/** * Astela Default Theme - Static styles * * Loaded render-blocking from the so form state is correct at first * paint, BEFORE any JavaScript runs. Previously these rules were injected at * runtime by forms.js, which left the loading spinner / success state visible * until hydration (the "stuck loading button" bug). * * forms.js only toggles `data-state` on the
— the styling lives here. */ /* Base hidden state for show-on-* classes (spinner, success, error) */ .form-show-on-submit, .form-show-on-success, .form-show-on-error { opacity: 0; transform: scale(0.75); transition: all 0.3s ease; } .form-hide-on-submit, .form-hide-on-success, .form-hide-on-error { transition: all 0.3s ease; } /* Submitting state */ form[data-state="submitting"] .form-hide-on-submit { opacity: 0; transform: scale(0.75); } form[data-state="submitting"] .form-show-on-submit { opacity: 1; transform: scale(1); } /* Success state */ form[data-state="success"] .form-hide-on-success { opacity: 0; transform: scale(0.75); } form[data-state="success"] .form-show-on-success { opacity: 1; transform: scale(1); } /* Error state */ form[data-state="error"] .form-hide-on-error { opacity: 0; transform: scale(0.75); } form[data-state="error"] .form-show-on-error { opacity: 1; transform: scale(1); } /* Field-level errors */ [data-field-error] { color: hsl(var(--destructive, 0 84% 60%)); font-size: 0.875rem; margin-top: 0.25rem; } [data-invalid="true"] { border-color: hsl(var(--destructive, 0 84% 60%)) !important; }