minora 0.1.0

package/src/components/form-validation.css

@@ -0,0 +1,700 @@
+/* ============================================================
+   ELEGANT MINIMALIST UI KIT — Form Validation System
+   form-validation.css
+
+   Covers:
+     - Inline field validation (error/success/warning)
+     - Password strength indicator
+     - Form-level alert banner
+     - Form success state
+     - Validation message animations (slide + fade)
+     - Field highlight effects
+   ============================================================ */
+
+/* ═══════════════════════════════════════════════════════════
+   FIELD ERROR / WARNING / SUCCESS MESSAGES
+   Animation: slide down + fade in on appear
+   ═══════════════════════════════════════════════════════════ */
+
+.field-error-message,
+.field-warning-message,
+.field-success-message {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-1);
+  margin-top: var(--space-1-5);
+  font-family: var(--font-sans);
+  font-size: var(--text-xs);
+  font-weight: var(--font-medium);
+  line-height: var(--leading-tight);
+  opacity: 0;
+  transform: translateY(-4px);
+  animation: field-msg-in var(--duration-normal) var(--ease-out) forwards;
+}
+
+@keyframes field-msg-in {
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.field-error-message.fade-out,
+.field-warning-message.fade-out,
+.field-success-message.fade-out {
+  animation: field-msg-out var(--duration-normal) var(--ease-in-out) forwards;
+}
+
+@keyframes field-msg-out {
+  to {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+}
+
+.field-error-message svg,
+.field-warning-message svg,
+.field-success-message svg {
+  width: var(--space-3);
+  height: var(--space-3);
+  flex-shrink: 0;
+  margin-top: var(--space-0-25);
+}
+
+/* Error */
+.field-error-message {
+  color: var(--color-error);
+}
+
+.field-error-message svg {
+  color: var(--color-error);
+}
+
+/* Warning */
+.field-warning-message {
+  color: var(--color-warning);
+}
+
+.field-warning-message svg {
+  color: var(--color-warning);
+}
+
+/* Success */
+.field-success-message {
+  color: var(--color-success);
+}
+
+.field-success-message svg {
+  color: var(--color-success);
+}
+
+/* ═══════════════════════════════════════════════════════════
+   INPUT VALIDATION STATES
+   Applies to .input-wrapper from input.css
+   ═══════════════════════════════════════════════════════════ */
+
+/* Error — override input.css defaults */
+.input-wrapper.field-error {
+  border-color: var(--color-error);
+}
+
+.input-wrapper.field-error .input {
+  color: var(--input-text-color);
+}
+
+.input-wrapper.field-error:focus-within {
+  border-color: var(--color-error);
+  box-shadow: 0 0 0 var(--focus-ring-width) var(--color-error-border);
+}
+
+/* Validation icon inside input (trailing position) */
+.field-validation-icon {
+  display: none;
+  flex-shrink: 0;
+  width: var(--space-4);
+  height: var(--space-4);
+  margin-right: var(--space-3);
+  animation: field-msg-in var(--duration-normal) var(--ease-out) forwards;
+}
+
+.input-wrapper.field-error .field-validation-icon.icon-error {
+  display: inline-flex;
+  color: var(--color-error);
+}
+
+.input-wrapper.field-success .field-validation-icon.icon-success {
+  display: inline-flex;
+  color: var(--color-success);
+}
+
+.input-wrapper.field-warning .field-validation-icon.icon-warning {
+  display: inline-flex;
+  color: var(--color-warning);
+}
+
+/* Success state */
+.input-wrapper.field-success {
+  border-color: var(--color-success);
+}
+
+.input-wrapper.field-success:focus-within {
+  border-color: var(--color-success);
+  box-shadow: 0 0 0 var(--focus-ring-width) var(--color-success-border);
+}
+
+/* Warning state */
+.input-wrapper.field-warning {
+  border-color: var(--color-warning);
+}
+
+.input-wrapper.field-warning:focus-within {
+  border-color: var(--color-warning);
+  box-shadow: 0 0 0 var(--focus-ring-width) var(--color-warning-border);
+}
+
+/* ═══════════════════════════════════════════════════════════
+   SELECT VALIDATION STATES
+   ═══════════════════════════════════════════════════════════ */
+
+.select.field-error .select-trigger {
+  border-color: var(--color-error);
+}
+
+.select.field-error.select-open .select-trigger {
+  border-color: var(--color-error);
+  box-shadow: 0 0 0 var(--focus-ring-width) var(--color-error-border);
+}
+
+.select.field-success .select-trigger {
+  border-color: var(--color-success);
+}
+
+.select.field-success.select-open .select-trigger {
+  border-color: var(--color-success);
+  box-shadow: 0 0 0 var(--focus-ring-width) var(--color-success-border);
+}
+
+.select.field-warning .select-trigger {
+  border-color: var(--color-warning);
+}
+
+.select.field-warning.select-open .select-trigger {
+  border-color: var(--color-warning);
+  box-shadow: 0 0 0 var(--focus-ring-width) var(--color-warning-border);
+}
+
+/* ═══════════════════════════════════════════════════════════
+   TEXTAREA VALIDATION STATES
+   ═══════════════════════════════════════════════════════════ */
+
+.textarea.field-error {
+  border-color: var(--color-error);
+}
+
+.textarea.field-error:focus {
+  border-color: var(--color-error);
+  box-shadow: 0 0 0 var(--focus-ring-width) var(--color-error-border);
+}
+
+.textarea.field-success {
+  border-color: var(--color-success);
+}
+
+.textarea.field-success:focus {
+  border-color: var(--color-success);
+  box-shadow: 0 0 0 var(--focus-ring-width) var(--color-success-border);
+}
+
+.textarea.field-warning {
+  border-color: var(--color-warning);
+}
+
+.textarea.field-warning:focus {
+  border-color: var(--color-warning);
+  box-shadow: 0 0 0 var(--focus-ring-width) var(--color-warning-border);
+}
+
+/* ═══════════════════════════════════════════════════════════
+   CHECKBOX / RADIO VALIDATION
+   ═══════════════════════════════════════════════════════════ */
+
+.checkbox.field-error .checkbox-box {
+  border-color: var(--color-error);
+}
+
+.checkbox.field-error .checkbox-native:checked ~ .checkbox-box {
+  background-color: var(--color-error);
+  border-color: var(--color-error);
+}
+
+.checkbox.field-error .checkbox-label {
+  color: var(--color-error);
+}
+
+.radio.field-error .radio-circle {
+  border-color: var(--color-error);
+}
+
+.radio.field-error .radio-native:checked ~ .radio-circle {
+  border-color: var(--color-error);
+  background-color: var(--color-error);
+}
+
+.radio.field-error .radio-label {
+  color: var(--color-error);
+}
+
+/* ═══════════════════════════════════════════════════════════
+   TOGGLE / SWITCH VALIDATION
+   ═══════════════════════════════════════════════════════════ */
+
+.switch-card.field-error {
+  border-color: var(--color-error);
+}
+
+/* ═══════════════════════════════════════════════════════════
+   CHARACTER COUNTER — State colors
+   ═══════════════════════════════════════════════════════════ */
+
+.input-counter.limit-near {
+  color: var(--color-warning);
+  font-weight: var(--font-medium);
+}
+
+.input-counter.limit-reached {
+  color: var(--color-error);
+  font-weight: var(--font-semibold);
+}
+
+/* ═══════════════════════════════════════════════════════════
+   PASSWORD STRENGTH INDICATOR
+   ═══════════════════════════════════════════════════════════ */
+
+.password-strength {
+  margin-top: var(--space-2);
+}
+
+.password-strength-bar-track {
+  display: flex;
+  gap: var(--space-1);
+  margin-bottom: var(--space-1-5);
+}
+
+.password-strength-segment {
+  flex: 1;
+  height: var(--space-1);
+  border-radius: var(--radius-pill);
+  background-color: var(--color-neutral-200);
+  transition: background-color var(--duration-normal) var(--ease-in-out);
+}
+
+/* Strength levels */
+.password-strength[data-strength="weak"] .password-strength-segment:nth-child(1) {
+  background-color: var(--color-error);
+}
+
+.password-strength[data-strength="fair"] .password-strength-segment:nth-child(-n+2) {
+  background-color: var(--color-warning);
+}
+
+.password-strength[data-strength="good"] .password-strength-segment:nth-child(-n+3) {
+  background-color: var(--color-accent-500);
+}
+
+.password-strength[data-strength="strong"] .password-strength-segment {
+  background-color: var(--color-success);
+}
+
+/* Strength label */
+.password-strength-label {
+  font-family: var(--font-sans);
+  font-size: var(--text-xs);
+  font-weight: var(--font-medium);
+  line-height: var(--leading-tight);
+  color: var(--color-neutral-500);
+  transition: color var(--duration-fast) var(--ease-in-out);
+}
+
+.password-strength[data-strength="weak"] .password-strength-label {
+  color: var(--color-error);
+}
+
+.password-strength[data-strength="fair"] .password-strength-label {
+  color: var(--color-warning);
+}
+
+.password-strength[data-strength="good"] .password-strength-label {
+  color: var(--color-accent-600);
+}
+
+.password-strength[data-strength="strong"] .password-strength-label {
+  color: var(--color-success);
+}
+
+/* ═══════════════════════════════════════════════════════════
+   FORM-LEVEL ALERT BANNER
+   ═══════════════════════════════════════════════════════════ */
+
+.form-alert {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-3);
+  padding: var(--space-4);
+  border-radius: var(--radius-md);
+  margin-bottom: var(--space-6);
+  opacity: 0;
+  transform: translateY(-8px);
+  animation: form-alert-in var(--duration-normal) var(--ease-out) forwards;
+}
+
+@keyframes form-alert-in {
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.form-alert.fade-out {
+  animation: form-alert-out var(--duration-normal) var(--ease-in-out) forwards;
+}
+
+@keyframes form-alert-out {
+  to {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+}
+
+/* Error alert */
+.form-alert-error {
+  background-color: var(--color-error-light);
+  border: var(--border-width) solid var(--color-error-border);
+}
+
+.form-alert-error .form-alert-icon {
+  color: var(--color-error);
+}
+
+.form-alert-error .form-alert-title {
+  color: var(--color-error-dark);
+}
+
+.form-alert-error .form-alert-list li {
+  color: var(--color-error-dark);
+}
+
+.form-alert-error .form-alert-list a {
+  color: var(--color-error);
+}
+
+/* Warning alert */
+.form-alert-warning {
+  background-color: var(--color-warning-light);
+  border: var(--border-width) solid var(--color-warning-border);
+}
+
+.form-alert-warning .form-alert-icon {
+  color: var(--color-warning);
+}
+
+.form-alert-warning .form-alert-title {
+  color: var(--color-warning-dark);
+}
+
+.form-alert-warning .form-alert-list li {
+  color: var(--color-warning-dark);
+}
+
+.form-alert-warning .form-alert-list a {
+  color: var(--color-warning);
+}
+
+/* Success alert */
+.form-alert-success {
+  background-color: var(--color-success-light);
+  border: var(--border-width) solid var(--color-success-border);
+}
+
+.form-alert-success .form-alert-icon {
+  color: var(--color-success);
+}
+
+.form-alert-success .form-alert-title {
+  color: var(--color-success-dark);
+}
+
+.form-alert-success .form-alert-list li {
+  color: var(--color-success-dark);
+}
+
+/* Alert content */
+.form-alert-icon {
+  flex-shrink: 0;
+  width: var(--space-5);
+  height: var(--space-5);
+  margin-top: var(--space-0-5);
+}
+
+.form-alert-body {
+  flex: 1;
+  min-width: 0;
+}
+
+.form-alert-title {
+  font-family: var(--font-sans);
+  font-size: var(--text-sm);
+  font-weight: var(--font-semibold);
+  line-height: var(--leading-tight);
+  margin-bottom: var(--space-1);
+}
+
+.form-alert-list {
+  margin: 0;
+  padding-left: var(--space-4);
+  font-size: var(--text-xs);
+  line-height: var(--leading-relaxed);
+}
+
+.form-alert-list li {
+  margin-bottom: var(--space-0-5);
+}
+
+.form-alert-list a {
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  cursor: pointer;
+  font-weight: var(--font-medium);
+}
+
+.form-alert-list a:hover {
+  text-decoration-thickness: 2px;
+}
+
+/* Dismiss button */
+.form-alert-dismiss {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--space-5);
+  height: var(--space-5);
+  border: none;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--color-neutral-500);
+  cursor: pointer;
+  padding: 0;
+  transition: color var(--duration-fast) var(--ease-in-out),
+              background-color var(--duration-fast) var(--ease-in-out);
+}
+
+.form-alert-dismiss:hover {
+  background-color: rgba(0, 0, 0, 0.06);
+  color: var(--color-neutral-700);
+}
+
+.form-alert-dismiss svg {
+  width: var(--space-4);
+  height: var(--space-4);
+}
+
+/* ═══════════════════════════════════════════════════════════
+   FORM SUCCESS STATE
+   ═══════════════════════════════════════════════════════════ */
+
+.form-success-state {
+  display: none;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: var(--space-12) var(--space-8);
+  gap: var(--space-4);
+  animation: form-success-in var(--duration-slow) var(--ease-out) forwards;
+}
+
+.form-success-state.is-visible {
+  display: flex;
+}
+
+@keyframes form-success-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.form-success-icon {
+  width: var(--space-16);
+  height: var(--space-16);
+  border-radius: var(--radius-pill);
+  background-color: var(--color-success-light);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: var(--space-2);
+}
+
+.form-success-icon svg {
+  width: var(--space-8);
+  height: var(--space-8);
+  color: var(--color-success);
+  stroke-dasharray: 48;
+  stroke-dashoffset: 48;
+  animation: success-check-draw var(--duration-slow) var(--ease-out) var(--anim-check-draw-delay) forwards;
+}
+
+@keyframes success-check-draw {
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+
+.form-success-title {
+  font-family: var(--font-serif);
+  font-size: var(--text-2xl);
+  font-weight: var(--font-semibold);
+  color: var(--color-neutral-900);
+  line-height: var(--leading-tight);
+}
+
+.form-success-desc {
+  font-size: var(--text-sm);
+  color: var(--color-neutral-500);
+  line-height: var(--leading-relaxed);
+  max-width: 360px;
+}
+
+/* ═══════════════════════════════════════════════════════════
+   FORM LOADING / SUBMITTING STATE
+   ═══════════════════════════════════════════════════════════ */
+
+.form.is-submitting {
+  opacity: 0.6;
+  pointer-events: none;
+}
+
+.form.is-submitting .btn-submit-text {
+  opacity: 0;
+}
+
+.form.is-submitting .btn-submit-spinner {
+  display: inline-flex;
+}
+
+.btn-submit-spinner {
+  display: none;
+  width: var(--space-4);
+  height: var(--space-4);
+  position: absolute;
+  animation: btn-spin var(--anim-spinner-fast) linear infinite;
+}
+
+.btn-submit-spinner .spinner-circle {
+  stroke: currentColor;
+  stroke-dasharray: 20;
+  stroke-dashoffset: 15;
+  stroke-linecap: round;
+}
+
+@keyframes btn-spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+/* ═══════════════════════════════════════════════════════════
+   VALIDATING STATE — Inline indicator
+   ═══════════════════════════════════════════════════════════ */
+
+.field-validating-indicator {
+  display: none;
+  align-items: center;
+  gap: var(--space-1-5);
+  margin-top: var(--space-1-5);
+  font-size: var(--text-xs);
+  color: var(--color-neutral-500);
+}
+
+.field-validating-indicator.is-visible {
+  display: inline-flex;
+}
+
+.field-validating-indicator .validating-spinner {
+  width: var(--space-3);
+  height: var(--space-3);
+  animation: btn-spin var(--anim-spin-duration) linear infinite;
+}
+
+.field-validating-indicator .validating-spinner .spinner-circle {
+  stroke: currentColor;
+  stroke-dasharray: 12;
+  stroke-dashoffset: 9;
+  stroke-linecap: round;
+}
+
+/* ═══════════════════════════════════════════════════════════
+   FORM — Hide/Show transitions
+   ═══════════════════════════════════════════════════════════ */
+
+.form-contents {
+  transition: opacity var(--duration-normal) var(--ease-in-out);
+}
+
+.form-contents.is-hidden {
+  display: none;
+}
+
+/* ═══════════════════════════════════════════════════════════
+   UTILITY: Helper for field spacing with validation
+   ═══════════════════════════════════════════════════════════ */
+
+.field-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1-5);
+}
+
+/* ═══════════════════════════════════════════════════════════
+   CONFIRM PASSWORD MATCH INDICATOR
+   ═══════════════════════════════════════════════════════════ */
+
+.password-match-message {
+  display: none;
+  align-items: flex-start;
+  gap: var(--space-1);
+  margin-top: var(--space-1-5);
+  font-size: var(--text-xs);
+  font-weight: var(--font-medium);
+  line-height: var(--leading-tight);
+}
+
+.password-match-message.is-visible {
+  display: flex;
+  animation: field-msg-in var(--duration-normal) var(--ease-out) forwards;
+}
+
+.password-match-message.is-error {
+  color: var(--color-error);
+}
+
+.password-match-message.is-error svg {
+  color: var(--color-error);
+  width: var(--space-3);
+  height: var(--space-3);
+  flex-shrink: 0;
+}
+
+.password-match-message.is-success {
+  color: var(--color-success);
+}
+
+.password-match-message.is-success svg {
+  color: var(--color-success);
+  width: var(--space-3);
+  height: var(--space-3);
+  flex-shrink: 0;
+}