@duskmoon-dev/core 1.19.3 → 1.19.4

package/dist/components/form.css

@@ -1,663 +1,1793 @@
 /**
- * Form Component Styles
- * DuskMoonUI - Material Design 3 inspired form system
+ * Legacy form entry: native controls and composition reuse canonical CSS.
+ * No control state rules belong in this compatibility wrapper.
  */
-
+/** Opt-in native presentation. Applications own errors, messages and announcements. */
 @layer components {
-  /* Form Control */
-  .form-control {
-    display: flex;
-    flex-direction: column;
-    gap: 0.25rem;
-    width: 100%;
-    margin-bottom: 1rem;
-    color: var(--color-on-surface);
-  }
+  /* Compatibility wrapper states are intentionally immediate. */
+  :is(.form-group-info, .form-control.info) { --dm-validation-color: var(--color-info); }
+  :is(.form-group-warning, .form-control.warning) { --dm-validation-color: var(--color-warning); }
+  :is(.form-group-success, .form-control.success) { --dm-validation-color: var(--color-success); }
 
-  /* Label */
-  .label {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0.25rem 0;
+  :is(.input, .select, .textarea, .checkbox, .radio, .switch, .toggle, .file-input, .otp-input-field, .otp-code, .datepicker-input):is(.validate :valid, .validate:valid, .validator.validator-success:user-valid):not([aria-invalid="true"]):not(:where(.form-group-error *, .form-control.error *)):not(:disabled) {
+    --dm-validation-color: var(--color-success);
+    --dm-validation-content: var(--color-success-content);
   }
 
-  .label-text {
-    font-size: 0.875rem;
-    font-weight: 500;
-    color: var(--color-on-surface);
-    padding-bottom: 0.25rem;
+  :is(.input, .select, .textarea, .checkbox, .radio, .switch, .toggle, .file-input, .otp-input-field, .otp-code, .datepicker-input):is(.validate :invalid, .validate:invalid, .validator:user-invalid):not(:disabled) {
+    --dm-validation-color: var(--color-error);
+    --dm-validation-content: var(--color-error-content);
   }
 
-  .label-text-alt {
-    font-size: 0.75rem;
-    color: var(--color-on-surface-variant);
+  :is(.form-group-error, .form-control.error) {
+    --dm-validation-color: var(--color-error);
+    --dm-validation-content: var(--color-error-content);
   }
 
-  /* Checkbox */
-  .checkbox {
-    appearance: none;
-    width: 1.25rem;
-    height: 1.25rem;
-    border: 2px solid var(--color-outline);
-    border-radius: var(--radius-xs);
-    background-color: transparent;
-    cursor: pointer;
-    transition: all 150ms ease-in-out;
-    position: relative;
+  /* Higher specificity than native states, including server-invalid + user-valid. */
+  :is(.input, .select, .textarea, .checkbox, .radio, .switch, .toggle, .file-input, .otp-input-field, .otp-code, .datepicker-input):is([aria-invalid="true"], .form-group-error *, .form-control.error *):not(:disabled):is(:focus, :not(:focus)) {
+    --dm-validation-color: var(--color-error);
+    --dm-validation-content: var(--color-error-content);
   }
 
-  .checkbox:hover {
-    border-color: var(--color-primary);
+  /* This shared selector wins over filled/ghost focus and semantic modifiers. */
+  :is(.input, .select, .textarea, .checkbox, .radio, .switch, .toggle, .file-input, .otp-input-field, .otp-code, .datepicker-input):is([aria-invalid="true"], .validator:user-invalid, .validator.validator-success:user-valid, .validate :invalid, .validate :valid, .validate:invalid, .validate:valid, .form-group-error *, .form-group-success *, .form-group-warning *, .form-group-info *, .form-control.error *, .form-control.success *, .form-control.warning *, .form-control.info *):not(:disabled) {
+    color: var(--dm-validation-color);
+    border-color: var(--dm-validation-color);
+    --checkbox-color: var(--dm-validation-color);
+    --radio-color: var(--dm-validation-color);
+    --switch-color: var(--dm-validation-color);
+    --switch-content-color: var(--dm-validation-content, var(--color-primary-content));
+    --toggle-color: var(--dm-validation-color);
   }
 
-  .checkbox:checked {
-    background-color: var(--color-primary);
-    border-color: var(--color-primary);
+  :is(.input, .select, .textarea, .checkbox, .radio, .switch, .toggle, .file-input, .otp-input-field, .otp-code, .datepicker-input):is([aria-invalid="true"], .validator:user-invalid, .validator.validator-success:user-valid, .validate :invalid, .validate :valid, .validate:invalid, .validate:valid, .form-group-error *, .form-group-success *, .form-group-warning *, .form-group-info *, .form-control.error *, .form-control.success *, .form-control.warning *, .form-control.info *):not(:disabled):focus {
+    border-color: var(--dm-validation-color);
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--dm-validation-color) 20%, transparent);
   }
 
-  .checkbox:checked::after {
-    content: '';
-    position: absolute;
-    left: 0.25rem;
-    top: 0.0625rem;
-    width: 0.375rem;
-    height: 0.625rem;
-    border: solid var(--color-primary-content);
-    border-width: 0 2px 2px 0;
-    transform: rotate(45deg);
-  }
+  :is(.form-group-error, .form-control.error) :is(.form-label, .label-text) { color: var(--color-error); }
+  :is(.form-group-success, .form-control.success) :is(.form-label, .label-text) { color: var(--color-success); }
+  :is(.form-group-warning, .form-control.warning) :is(.form-label, .label-text) { color: var(--color-warning); }
+  :is(.form-group-info, .form-control.info) :is(.form-label, .label-text) { color: var(--color-info); }
 
-  .checkbox:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
-  }
+  .validator-hint { font-size: 0.75rem; color: var(--color-on-surface-variant); }
+  .validator-error { display: none; font-size: 0.75rem; color: var(--color-error); }
+  /* Keep OTP actions stationary when blur reveals an error during a click. */
+  .otp-code ~ .validator-error { display: block; visibility: hidden; }
+  :is(.form-group, .form-control):has(:is([aria-invalid="true"], .validator:user-invalid, .validate :invalid, .validate:invalid):not(:disabled)) > .validator-error,
+  :is(.form-group-error, .form-control.error) > .validator-error { display: block; visibility: visible; }
 
-  .checkbox:disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
+  @media (forced-colors: active) {
+    :is(input, select, textarea):is(.input, .select, .textarea, .checkbox, .radio, .switch, .toggle, .file-input, .otp-input-field, .otp-code, .datepicker-input):focus-visible {
+      outline: 2px solid Highlight;
+      outline-offset: 2px;
+    }
+    input:is(.checkbox, .radio, .switch, .toggle) { appearance: auto; }
+    input:is(.checkbox, .radio, .switch, .toggle)::before,
+    input:is(.checkbox, .radio, .switch, .toggle)::after { content: none; }
   }
+}
 
-  /* Checkbox Color Variants */
-  .checkbox-primary:checked {
-    background-color: var(--color-primary);
-    border-color: var(--color-primary);
-  }
 
-  .checkbox-secondary:checked {
-    background-color: var(--color-secondary);
-    border-color: var(--color-secondary);
-  }
 
-  .checkbox-success:checked {
-    background-color: var(--color-success);
-    border-color: var(--color-success);
+@layer components {
+  .file-input {
+    display: block;
+    box-sizing: border-box;
+    width: 100%;
+    min-width: 0;
+    padding: 0;
+    font: inherit;
+    color: var(--color-on-surface);
+    background-color: var(--color-surface);
+    border: 1px solid currentColor;
+    border-radius: var(--radius-sm);
+    cursor: pointer;
   }
+  .file-input::file-selector-button {
+    padding: 0.75rem 1rem;
+    margin-inline-end: 0.75rem;
+    font: inherit;
+    color: inherit;
+    background-color: var(--color-surface-container);
+    border: none;
+    border-inline-end: 1px solid currentColor;
+    cursor: inherit;
+  }
+  .file-input:hover:not(:disabled)::file-selector-button { background-color: var(--color-surface-container-high); }
+  .file-input:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent); }
+  .file-input:disabled { opacity: 0.5; cursor: not-allowed; }
+  .file-input-xs::file-selector-button { padding: 0.375rem 0.625rem; }
+  .file-input-sm::file-selector-button { padding: 0.5rem 0.75rem; }
+  .file-input-lg::file-selector-button { padding: 1rem 1.25rem; }
+  .file-input-primary { color: var(--color-primary); }
+  .file-input-secondary { color: var(--color-secondary); }
+  .file-input-tertiary { color: var(--color-tertiary); }
+  .file-input-info { color: var(--color-info); }
+  .file-input-success { color: var(--color-success); }
+  .file-input-warning { color: var(--color-warning); }
+  .file-input-error { color: var(--color-error); }
+  .file-input-ghost { border-color: transparent; }
+}
 
-  .checkbox-tertiary:checked {
-    background-color: var(--color-tertiary);
-    border-color: var(--color-tertiary);
-  }
 
-  .checkbox-info:checked {
-    background-color: var(--color-info);
-    border-color: var(--color-info);
-  }
+/**
+ * Input Component Styles
+ * DuskMoonUI - Material Design 3 inspired input system
+ */
 
-  .checkbox-warning:checked {
-    background-color: var(--color-warning);
-    border-color: var(--color-warning);
+@layer components {
+  /* Base Input */
+  .input {
+    box-sizing: border-box;
+    min-width: 0;
+    display: flex;
+    width: 100%;
+    padding: 0.75rem 1rem;
+    font-size: 1rem;
+    line-height: 1.5rem;
+    background-color: var(--color-surface);
+    color: var(--color-on-surface);
+    border: 1px solid currentColor;
+    border-radius: var(--radius-sm);
+    transition: border-color 150ms ease-in-out, box-shadow 150ms ease-in-out;
   }
 
-  .checkbox-error:checked {
-    background-color: var(--color-error);
-    border-color: var(--color-error);
+  .input::placeholder {
+    color: var(--color-on-surface-variant);
+    opacity: 0.7;
   }
 
-  .checkbox-accent:checked {
-    background-color: var(--color-accent);
-    border-color: var(--color-accent);
+  .input:focus {
+    outline: none;
   }
 
-  .checkbox-accent:checked::after {
-    border-color: var(--color-accent-content);
+  .input:focus-visible {
+    box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
+    outline: none;
   }
 
-  .checkbox-neutral:checked {
-    background-color: var(--color-neutral);
-    border-color: var(--color-neutral);
+  .input:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+    background-color: var(--color-surface-container);
   }
 
-  .checkbox-neutral:checked::after {
-    border-color: var(--color-neutral-content);
+  /* Bordered Input */
+  .input-outlined { background-color: transparent; border-color: var(--color-outline); }
+  .input-bordered {
+    border-color: var(--color-outline);
+    background-color: var(--color-surface);
   }
 
-  .checkbox-base:checked {
-    background-color: var(--color-base-100);
-    border-color: var(--color-base-100);
+  .input-bordered:hover:not(:disabled):not(:focus) {
+    border-color: var(--color-outline-variant);
   }
 
-  .checkbox-base:checked::after {
-    border-color: var(--color-base-content);
-  }
+  /* Color Variants — base .input:focus-visible uses currentColor 20%, so no per-variant
+     focus-visible overrides needed; setting color: here is sufficient. */
+  .input-primary   { color: var(--color-primary); }
+  .input-secondary { color: var(--color-secondary); }
+  .input-tertiary  { color: var(--color-tertiary); }
 
-  /* Checkbox Sizes */
-  .checkbox-xs {
-    width: 0.875rem;
-    height: 0.875rem;
+  /* Semantic Colors */
+  .input-info    { color: var(--color-info); }
+  .input-success { color: var(--color-success); }
+  .input-warning { color: var(--color-warning); }
+  .input-error   { color: var(--color-error); }
+  .input-accent  { color: var(--color-accent); }
+  .input-neutral { color: var(--color-neutral); }
+  .input-base    { color: var(--color-base-content); }
+
+  /* Size Variants */
+  .input-xs {
+    padding: 0.375rem 0.625rem;
+    font-size: 0.75rem;
+    line-height: 1rem;
+    border-radius: var(--radius-xs);
+    height: 1.75rem;
   }
 
-  .checkbox-sm {
-    width: 1rem;
-    height: 1rem;
+  .input-sm {
+    padding: 0.5rem 0.75rem;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    border-radius: var(--radius-xs);
+    height: 2.25rem;
   }
 
-  .checkbox-lg {
-    width: 1.5rem;
-    height: 1.5rem;
+  .input-lg {
+    padding: 1rem 1.25rem;
+    font-size: 1.125rem;
+    line-height: 1.75rem;
+    border-radius: var(--radius-sm);
+    height: 3.5rem;
   }
 
-  /* Radio */
-  .radio {
-    appearance: none;
-    width: 1.25rem;
-    height: 1.25rem;
-    border: 2px solid var(--color-outline);
-    border-radius: var(--radius-full);
+  /* Ghost Input */
+  .input-md { height: 3rem; }
+  .input-ghost {
     background-color: transparent;
-    cursor: pointer;
-    transition: all 150ms ease-in-out;
-    position: relative;
+    border-color: transparent;
   }
 
-  .radio:hover {
-    border-color: var(--color-primary);
+  .input-ghost:focus-visible {
+    background-color: var(--color-surface-container);
+    border-color: transparent;
+    box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
   }
 
-  .radio:checked {
-    border-color: var(--color-primary);
+  /* Filled Input */
+  .input-filled {
+    background-color: var(--color-surface-container);
+    border-color: transparent;
+    border-bottom: 2px solid var(--color-outline);
+    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
   }
 
-  .radio:checked::after {
-    content: '';
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    width: 0.5rem;
-    height: 0.5rem;
-    background-color: var(--color-primary);
-    border-radius: var(--radius-full);
-    transform: translate(-50%, -50%);
+  .input-filled:focus-visible {
+    border-bottom-color: var(--color-primary);
+    box-shadow: none;
   }
 
-  .radio:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
-  }
+  .input-filled.input-primary:focus-visible { border-bottom-color: var(--color-primary); }
+  .input-filled.input-secondary:focus-visible { border-bottom-color: var(--color-secondary); }
+  .input-filled.input-tertiary:focus-visible { border-bottom-color: var(--color-tertiary); }
+  .input-filled.input-info:focus-visible { border-bottom-color: var(--color-info); }
+  .input-filled.input-success:focus-visible { border-bottom-color: var(--color-success); }
+  .input-filled.input-warning:focus-visible { border-bottom-color: var(--color-warning); }
+  .input-filled.input-error:focus-visible { border-bottom-color: var(--color-error); }
+  .input-filled.input-accent:focus-visible { border-bottom-color: var(--color-accent); }
+  .input-filled.input-neutral:focus-visible { border-bottom-color: var(--color-neutral); }
+  .input-filled.input-base:focus-visible { border-bottom-color: var(--color-base-content); }
 
-  .radio:disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
+  /* Input with Icon */
+  .input-group {
+    display: flex;
+    align-items: stretch;
   }
 
-  /* Radio Color Variants */
-  .radio-primary:checked {
-    border-color: var(--color-primary);
+  .input-group > .input {
+    flex: 1;
+    border-radius: 0;
   }
 
-  .radio-primary:checked::after {
-    background-color: var(--color-primary);
+  .input-group > .input:first-child {
+    border-top-left-radius: var(--radius-sm);
+    border-bottom-left-radius: var(--radius-sm);
   }
 
-  .radio-secondary:checked {
-    border-color: var(--color-secondary);
+  .input-group > .input:last-child {
+    border-top-right-radius: var(--radius-sm);
+    border-bottom-right-radius: var(--radius-sm);
   }
 
-  .radio-secondary:checked::after {
-    background-color: var(--color-secondary);
+  .input-group-text {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 1rem;
+    background-color: var(--color-surface-container);
+    color: var(--color-on-surface-variant);
+    border: 1px solid var(--color-outline);
   }
 
-  .radio-tertiary:checked {
-    border-color: var(--color-tertiary);
+  .input-group-text:first-child {
+    border-top-left-radius: var(--radius-sm);
+    border-bottom-left-radius: var(--radius-sm);
+    border-right: none;
   }
 
-  .radio-tertiary:checked::after {
-    background-color: var(--color-tertiary);
+  .input-group-text:last-child {
+    border-top-right-radius: var(--radius-sm);
+    border-bottom-right-radius: var(--radius-sm);
+    border-left: none;
   }
 
-  .radio-info:checked {
-    border-color: var(--color-info);
+  /* Reduce Motion */
+  @media (prefers-reduced-motion: reduce) {
+    .input,
+    .input-filled,
+    .file-input {
+      transition: none;
+    }
   }
+}
 
-  .radio-info:checked::after {
-    background-color: var(--color-info);
-  }
 
-  .radio-success:checked {
-    border-color: var(--color-success);
-  }
 
-  .radio-success:checked::after {
-    background-color: var(--color-success);
+/**
+ * Checkbox Component Styles
+ * DuskMoonUI - Material Design 3 inspired checkbox
+ *
+ * Usage: <input type="checkbox" class="checkbox" />
+ * With label: <label class="label cursor-pointer gap-2"><input type="checkbox" class="checkbox" /><span>Label</span></label>
+ */
+
+@layer components {
+  :where(.checkbox) { box-sizing: border-box; }
+
+  /* Base Checkbox - applied directly to input[type="checkbox"] */
+  .checkbox {
+    --checkbox-size: 1.25rem;
+    --checkbox-color: var(--color-primary);
+    --checkbox-border-color: var(--color-on-surface-variant);
+    color: var(--color-on-surface);
+
+    position: relative;
+    display: inline-grid;
+    place-content: center;
+    width: var(--checkbox-size);
+    height: var(--checkbox-size);
+    margin: 0;
+    cursor: pointer;
+    appearance: none;
+    background-color: transparent;
+    border: 2px solid var(--checkbox-border-color);
+    border-radius: var(--radius-xs);
+    transition: background-color 150ms ease-in-out, border-color 150ms ease-in-out;
+  }
+
+  /* Checkmark using ::before pseudo-element */
+  .checkbox::before {
+    content: "";
+    width: 0.65em;
+    height: 0.35em;
+    transform: scale(0) rotate(-45deg);
+    transform-origin: center;
+    border-bottom: 2px solid var(--dm-validation-content, var(--color-primary-content));
+    border-left: 2px solid var(--dm-validation-content, var(--color-primary-content));
+    transition: transform 150ms ease-in-out;
   }
 
-  .radio-warning:checked {
-    border-color: var(--color-warning);
+  /* Checked State */
+  .checkbox:checked {
+    background-color: var(--checkbox-color);
+    border-color: var(--checkbox-color);
   }
 
-  .radio-warning:checked::after {
-    background-color: var(--color-warning);
+  .checkbox:checked::before {
+    transform: scale(1) rotate(-45deg);
   }
 
-  .radio-error:checked {
-    border-color: var(--color-error);
+  /* Indeterminate State */
+  .checkbox:indeterminate {
+    background-color: var(--checkbox-color);
+    border-color: var(--checkbox-color);
   }
 
-  .radio-error:checked::after {
-    background-color: var(--color-error);
+  .checkbox:indeterminate::before {
+    width: 0.5em;
+    height: 0;
+    border-bottom: 2px solid var(--dm-validation-content, var(--color-primary-content));
+    border-left: 0;
+    transform: scale(1) rotate(0deg);
   }
 
-  .radio-accent:checked {
-    border-color: var(--color-accent);
+  /* Hover State */
+  .checkbox:hover:not(:disabled):not(:checked) {
+    border-color: var(--color-on-surface);
   }
 
-  .radio-accent:checked::after {
-    background-color: var(--color-accent);
+  .checkbox:checked:hover:not(:disabled),
+  .checkbox:indeterminate:hover:not(:disabled) {
+    background-color: color-mix(in oklch, var(--checkbox-color), black 10%);
+    border-color: color-mix(in oklch, var(--checkbox-color), black 10%);
   }
 
-  .radio-neutral:checked {
-    border-color: var(--color-neutral);
+  /* Focus State */
+  .checkbox:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--checkbox-color) 20%, transparent);
   }
 
-  .radio-neutral:checked::after {
-    background-color: var(--color-neutral);
+  /* Disabled State */
+  .checkbox:disabled {
+    cursor: not-allowed;
+    opacity: 0.38;
   }
 
-  .radio-base:checked {
-    border-color: var(--color-base-content);
+  /* ========================================
+   * Size Variants
+   * ======================================== */
+
+  .checkbox-xs {
+    --checkbox-size: 0.875rem;
   }
 
-  .radio-base:checked::after {
-    background-color: var(--color-base-content);
+  .checkbox-sm {
+    --checkbox-size: 1rem;
   }
 
-  /* Toggle/Switch */
-  .toggle {
-    appearance: none;
-    width: 3rem;
-    height: 1.5rem;
-    border-radius: var(--radius-lg);
-    background-color: var(--color-surface-container-highest);
-    cursor: pointer;
-    transition: all 150ms ease-in-out;
-    position: relative;
+  .checkbox-md {
+    --checkbox-size: 1.25rem;
   }
 
-  .toggle::after {
-    content: '';
-    position: absolute;
-    left: 0.25rem;
-    top: 50%;
-    transform: translateY(-50%);
-    width: 1rem;
-    height: 1rem;
-    background-color: var(--color-on-surface-variant);
-    border-radius: var(--radius-full);
-    transition: all 150ms ease-in-out;
+  .checkbox-lg {
+    --checkbox-size: 1.5rem;
   }
 
-  .toggle:checked {
-    background-color: var(--color-primary);
+  .checkbox-xl {
+    --checkbox-size: 1.75rem;
   }
 
-  .toggle:checked::after {
-    left: calc(100% - 1.25rem);
-    background-color: var(--color-primary-content);
+  /* ========================================
+   * Color Variants
+   * ======================================== */
+
+  .checkbox-primary {
+    --checkbox-color: var(--color-primary);
   }
 
-  .toggle:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
+  .checkbox-primary:checked::before,
+  .checkbox-primary:indeterminate::before {
+    border-color: var(--dm-validation-content, var(--color-primary-content));
   }
 
-  .toggle:disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
+  .checkbox-secondary {
+    --checkbox-color: var(--color-secondary);
   }
 
-  /* Toggle Sizes */
-  .toggle-xs {
-    width: 2rem;
-    height: 1rem;
+  .checkbox-secondary:checked::before,
+  .checkbox-secondary:indeterminate::before {
+    border-color: var(--dm-validation-content, var(--color-secondary-content));
   }
 
-  .toggle-xs::after {
-    width: 0.625rem;
-    height: 0.625rem;
-    left: 0.1875rem;
+  .checkbox-tertiary {
+    --checkbox-color: var(--color-tertiary);
   }
 
-  .toggle-xs:checked::after {
-    left: calc(100% - 0.8125rem);
+  .checkbox-tertiary:checked::before,
+  .checkbox-tertiary:indeterminate::before {
+    border-color: var(--dm-validation-content, var(--color-tertiary-content));
   }
 
-  .toggle-sm {
-    width: 2.5rem;
-    height: 1.25rem;
+  .checkbox-success {
+    --checkbox-color: var(--color-success);
   }
 
-  .toggle-sm::after {
-    width: 0.75rem;
-    height: 0.75rem;
+  .checkbox-success:checked::before,
+  .checkbox-success:indeterminate::before {
+    border-color: var(--dm-validation-content, var(--color-success-content));
   }
 
-  .toggle-lg {
-    width: 4rem;
-    height: 2rem;
+  .checkbox-warning {
+    --checkbox-color: var(--color-warning);
   }
 
-  .toggle-lg::after {
-    width: 1.5rem;
-    height: 1.5rem;
+  .checkbox-warning:checked::before,
+  .checkbox-warning:indeterminate::before {
+    border-color: var(--dm-validation-content, var(--color-warning-content));
   }
 
-  /* Select */
-  .select {
-    appearance: none;
-    width: 100%;
-    padding: 0.75rem 2.5rem 0.75rem 1rem;
-    font-size: 1rem;
-    line-height: 1.5rem;
-    background-color: var(--color-surface);
-    color: var(--color-on-surface);
-    border: 1px solid currentColor;
-    border-radius: var(--radius-sm);
-    cursor: pointer;
-    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
-    background-position: right 0.75rem center;
-    background-repeat: no-repeat;
-    background-size: 1.25rem;
-    transition: border-color 150ms ease-in-out;
+  .checkbox-error {
+    --checkbox-color: var(--color-error);
   }
 
-  .select:focus {
-    outline: none;
+  .checkbox-error:checked::before,
+  .checkbox-error:indeterminate::before {
+    border-color: var(--dm-validation-content, var(--color-error-content));
   }
 
-  .select:focus-visible {
-    border-color: var(--color-primary);
-    outline: none;
+  .checkbox-info {
+    --checkbox-color: var(--color-info);
   }
 
-  .select:disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
+  .checkbox-info:checked::before,
+  .checkbox-info:indeterminate::before {
+    border-color: var(--dm-validation-content, var(--color-info-content));
   }
 
-  /* Select Bordered */
-  .select-bordered {
-    border-color: var(--color-outline);
+  .checkbox-accent {
+    --checkbox-color: var(--color-accent);
   }
 
-  /* Select Color Variants */
-  .select-primary:focus-visible {
-    border-color: var(--color-primary);
+  .checkbox-accent:checked::before,
+  .checkbox-accent:indeterminate::before {
+    border-color: var(--dm-validation-content, var(--color-accent-content));
   }
 
-  .select-secondary:focus-visible {
-    border-color: var(--color-secondary);
+  .checkbox-neutral {
+    --checkbox-color: var(--color-neutral);
   }
 
-  .select-tertiary:focus-visible {
-    border-color: var(--color-tertiary);
+  .checkbox-neutral:checked::before,
+  .checkbox-neutral:indeterminate::before {
+    border-color: var(--dm-validation-content, var(--color-neutral-content));
   }
 
-  .select-info:focus-visible {
-    border-color: var(--color-info);
+  .checkbox-base {
+    --checkbox-color: var(--color-base-100);
   }
 
-  .select-success:focus-visible {
-    border-color: var(--color-success);
+  .checkbox-base:checked::before,
+  .checkbox-base:indeterminate::before {
+    border-color: var(--dm-validation-content, var(--color-base-content));
   }
 
-  .select-warning:focus-visible {
-    border-color: var(--color-warning);
+  /* Ghost Variant — borderless unchecked state */
+  .checkbox-ghost {
+    --checkbox-border-color: transparent;
   }
 
-  .select-error:focus-visible {
-    border-color: var(--color-error);
+  .checkbox-ghost:hover:not(:disabled):not(:checked) {
+    border-color: transparent;
   }
 
-  .select-accent:focus-visible {
-    border-color: var(--color-accent);
+  /* ========================================
+   * Checkbox with Label (wrapper pattern)
+   * ======================================== */
+
+  .checkbox-label {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    cursor: pointer;
+    user-select: none;
+    font-size: 0.875rem;
+    color: var(--color-on-surface);
   }
 
-  .select-neutral:focus-visible {
-    border-color: var(--color-neutral);
+  .checkbox-label:has(.checkbox:disabled) {
+    cursor: not-allowed;
+    opacity: 0.38;
   }
 
-  .select-base:focus-visible {
-    border-color: var(--color-base-content);
+  /* ========================================
+   * Checkbox Group
+   * ======================================== */
+
+  .checkbox-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
   }
 
-  /* Select Sizes */
-  .select-xs {
-    padding: 0.375rem 2rem 0.375rem 0.625rem;
-    font-size: 0.75rem;
-    line-height: 1rem;
+  .checkbox-group-horizontal {
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 1.5rem;
   }
 
-  .select-sm {
-    padding: 0.5rem 2.25rem 0.5rem 0.75rem;
+  .checkbox-group-label {
     font-size: 0.875rem;
-    line-height: 1.25rem;
+    font-weight: 500;
+    color: var(--color-on-surface);
+    margin-bottom: 0.5rem;
   }
 
-  .select-lg {
-    padding: 1rem 3rem 1rem 1.25rem;
-    font-size: 1.125rem;
-    line-height: 1.75rem;
+  /* ========================================
+   * Reduce Motion
+   * ======================================== */
+
+  @media (prefers-reduced-motion: reduce) {
+    .checkbox,
+    .checkbox::before {
+      transition: none;
+    }
   }
+}
 
-  /* Textarea */
-  .textarea {
-    width: 100%;
+
+
+/**
+ * Radio Component Styles
+ * DuskMoonUI - Material Design 3 inspired radio button
+ *
+ * Usage: <input type="radio" name="group" class="radio" />
+ * With label: <label class="radio-label"><input type="radio" name="group" class="radio" /><span>Option</span></label>
+ */
+
+@layer components {
+  :where(.radio) { box-sizing: border-box; }
+
+  /* Base Radio - applied directly to input[type="radio"] */
+  .radio {
+    --radio-size: 1.25rem;
+    --radio-color: var(--color-primary);
+    --radio-border-color: var(--color-on-surface-variant);
+    color: var(--color-on-surface);
+
+    position: relative;
+    display: inline-grid;
+    place-content: center;
+    width: var(--radio-size);
+    height: var(--radio-size);
+    margin: 0;
+    cursor: pointer;
+    appearance: none;
+    background-color: transparent;
+    border: 2px solid var(--radio-border-color);
+    border-radius: var(--radius-full);
+    transition: border-color 150ms ease-in-out;
+  }
+
+  /* Inner dot using ::before pseudo-element */
+  .radio::before {
+    content: "";
+    width: 0.5em;
+    height: 0.5em;
+    border-radius: var(--radius-full);
+    background-color: var(--radio-color);
+    transform: scale(0);
+    transition: transform 150ms ease-in-out;
+  }
+
+  /* Checked State */
+  .radio:checked {
+    border-color: var(--radio-color);
+  }
+
+  .radio:checked::before {
+    transform: scale(1);
+  }
+
+  /* Hover State */
+  .radio:hover:not(:disabled):not(:checked) {
+    border-color: var(--color-on-surface);
+  }
+
+  .radio:checked:hover:not(:disabled) {
+    border-color: color-mix(in oklch, var(--radio-color), black 10%);
+  }
+
+  .radio:checked:hover:not(:disabled)::before {
+    background-color: color-mix(in oklch, var(--radio-color), black 10%);
+  }
+
+  /* Focus State */
+  .radio:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--radio-color) 20%, transparent);
+  }
+
+  /* Disabled State */
+  .radio:disabled {
+    cursor: not-allowed;
+    opacity: 0.38;
+  }
+
+  /* ========================================
+   * Size Variants
+   * ======================================== */
+
+  .radio-xs {
+    --radio-size: 0.875rem;
+  }
+
+  .radio-sm {
+    --radio-size: 1rem;
+  }
+
+  .radio-md {
+    --radio-size: 1.25rem;
+  }
+
+  .radio-lg {
+    --radio-size: 1.5rem;
+  }
+
+  .radio-xl {
+    --radio-size: 1.75rem;
+  }
+
+  /* ========================================
+   * Color Variants
+   * ======================================== */
+
+  .radio-primary {
+    --radio-color: var(--color-primary);
+  }
+
+  .radio-secondary {
+    --radio-color: var(--color-secondary);
+  }
+
+  .radio-tertiary {
+    --radio-color: var(--color-tertiary);
+  }
+
+  .radio-success {
+    --radio-color: var(--color-success);
+  }
+
+  .radio-warning {
+    --radio-color: var(--color-warning);
+  }
+
+  .radio-error {
+    --radio-color: var(--color-error);
+  }
+
+  .radio-info {
+    --radio-color: var(--color-info);
+  }
+
+  .radio-accent {
+    --radio-color: var(--color-accent);
+  }
+
+  .radio-neutral {
+    --radio-color: var(--color-neutral);
+  }
+
+  .radio-base {
+    --radio-color: var(--color-base-content);
+  }
+
+  /* Ghost Variant — borderless unchecked state */
+  .radio-ghost {
+    --radio-border-color: transparent;
+  }
+
+  .radio-ghost:hover:not(:disabled):not(:checked) {
+    border-color: transparent;
+  }
+
+  /* ========================================
+   * Radio with Label (wrapper pattern)
+   * ======================================== */
+
+  .radio-label {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    cursor: pointer;
+    user-select: none;
+    font-size: 0.875rem;
+    color: var(--color-on-surface);
+  }
+
+  .radio-label:has(.radio:disabled) {
+    cursor: not-allowed;
+    opacity: 0.38;
+  }
+
+  /* ========================================
+   * Radio Group
+   * ======================================== */
+
+  .radio-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  .radio-group-horizontal {
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 1.5rem;
+  }
+
+  .radio-group-label {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--color-on-surface);
+    margin-bottom: 0.5rem;
+  }
+
+  /* ========================================
+   * Reduce Motion
+   * ======================================== */
+
+  @media (prefers-reduced-motion: reduce) {
+    .radio,
+    .radio::before {
+      transition: none;
+    }
+  }
+}
+
+
+
+@layer components {
+  /* Toggle/Switch */
+  .toggle {
+    --toggle-color: var(--color-primary);
+    box-sizing: border-box;
+    color: var(--color-on-surface);
+    border: 1px solid currentColor;
+    appearance: none;
+    width: 3rem;
+    height: 1.5rem;
+    border-radius: var(--radius-lg);
+    background-color: var(--color-surface-container-highest);
+    cursor: pointer;
+    transition: all 150ms ease-in-out;
+    position: relative;
+  }
+
+  .toggle::after {
+    content: '';
+    position: absolute;
+    inset-inline-start: 0.25rem;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 1rem;
+    height: 1rem;
+    background-color: var(--color-on-surface-variant);
+    border-radius: var(--radius-full);
+    transition: all 150ms ease-in-out;
+  }
+
+  .toggle:checked {
+    background-color: var(--toggle-color);
+  }
+
+  .toggle:checked::after {
+    inset-inline-start: calc(100% - 1.25rem);
+    background-color: var(--dm-validation-content, var(--color-primary-content));
+  }
+
+  .toggle:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
+  }
+
+  .toggle:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  /* Toggle Sizes */
+  .toggle-xs {
+    width: 2rem;
+    height: 1rem;
+  }
+
+  .toggle-xs::after {
+    width: 0.625rem;
+    height: 0.625rem;
+    inset-inline-start: 0.1875rem;
+  }
+
+  .toggle-xs:checked::after {
+    inset-inline-start: calc(100% - 0.8125rem);
+  }
+
+  .toggle-sm {
+    width: 2.5rem;
+    height: 1.25rem;
+  }
+
+  .toggle-sm::after {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+
+  .toggle-lg {
+    width: 4rem;
+    height: 2rem;
+  }
+
+  .toggle-lg::after {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+
+  .toggle-sm:checked::after { inset-inline-start: calc(100% - 1rem); }
+  .toggle-lg:checked::after { inset-inline-start: calc(100% - 1.75rem); }
+  .toggle-primary { --toggle-color: var(--color-primary); }
+  .toggle-secondary { --toggle-color: var(--color-secondary); }
+  .toggle-tertiary { --toggle-color: var(--color-tertiary); }
+  .toggle-info { --toggle-color: var(--color-info); }
+  .toggle-success { --toggle-color: var(--color-success); }
+  .toggle-warning { --toggle-color: var(--color-warning); }
+  .toggle-error { --toggle-color: var(--color-error); }
+  .toggle-ghost { border-color: transparent; }
+  @media (prefers-reduced-motion: reduce) { .toggle, .toggle::after { transition: none; } }
+}
+
+
+
+/**
+ * Select Component Styles
+ * DuskMoonUI - Material Design 3 inspired select/dropdown system
+ */
+
+@layer components {
+  :where(.select) { box-sizing: border-box; }
+
+  /* Base Select */
+  .select {
+    display: block;
+    width: 100%;
+    padding: 0.75rem 2.5rem 0.75rem 1rem;
+    font-size: 1rem;
+    line-height: 1.5rem;
+    color: var(--color-on-surface);
+    background-color: var(--color-surface);
+    border: 1px solid currentColor;
+    border-radius: var(--radius-sm);
+    outline: none;
+    cursor: pointer;
+    appearance: none;
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+    background-position: right 0.75rem center;
+    background-repeat: no-repeat;
+    background-size: 1.25rem 1.25rem;
+    transition: border-color 150ms ease-in-out, box-shadow 150ms ease-in-out;
+  }
+
+  .select:hover:not(:disabled) {
+    background-color: var(--color-surface-container);
+  }
+
+  .select:focus {
+    outline: none;
+  }
+
+  .select:focus-visible {
+    box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
+  }
+
+  .select:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+    background-color: var(--color-surface-container);
+  }
+
+  /* Filled Variant */
+  .select-filled {
+    background-color: var(--color-surface-container);
+    border: none;
+    border-bottom: 2px solid var(--color-outline);
+    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
+  }
+
+  .select-filled:hover:not(:disabled) {
+    background-color: var(--color-surface-container-high);
+    border-bottom-color: var(--color-on-surface);
+  }
+
+  .select-filled:focus-visible {
+    border-bottom-color: var(--color-primary);
+    box-shadow: none;
+  }
+
+  .select-filled.select-primary:focus-visible { border-bottom-color: var(--color-primary); }
+  .select-filled.select-secondary:focus-visible { border-bottom-color: var(--color-secondary); }
+  .select-filled.select-tertiary:focus-visible { border-bottom-color: var(--color-tertiary); }
+  .select-filled.select-info:focus-visible { border-bottom-color: var(--color-info); }
+  .select-filled.select-success:focus-visible { border-bottom-color: var(--color-success); }
+  .select-filled.select-warning:focus-visible { border-bottom-color: var(--color-warning); }
+  .select-filled.select-error:focus-visible { border-bottom-color: var(--color-error); }
+  .select-filled.select-accent:focus-visible { border-bottom-color: var(--color-accent); }
+  .select-filled.select-neutral:focus-visible { border-bottom-color: var(--color-neutral); }
+  .select-filled.select-base:focus-visible { border-bottom-color: var(--color-base-content); }
+
+  /* Outlined Variant (default is outlined) */
+  .select-outlined {
+    background-color: transparent;
+    border: 1px solid var(--color-outline);
+    border-radius: var(--radius-sm);
+  }
+
+  /* Color Variants — base .select:focus-visible uses currentColor 20%, so no per-variant
+     focus-visible overrides needed; setting color: here is sufficient. */
+  .select-primary   { color: var(--color-primary); }
+  .select-secondary { color: var(--color-secondary); }
+  .select-tertiary  { color: var(--color-tertiary); }
+
+  /* Semantic Colors */
+  .select-info    { color: var(--color-info); }
+  .select-success { color: var(--color-success); }
+  .select-warning { color: var(--color-warning); }
+  .select-error   { color: var(--color-error); }
+  .select-accent  { color: var(--color-accent); }
+  .select-neutral { color: var(--color-neutral); }
+  .select-base    { color: var(--color-base-content); }
+
+  .select-bordered { border-color: var(--color-outline); }
+  .select-md { font-size: 1rem; }
+  .select:dir(rtl) { padding-inline: 1rem 2.5rem; background-position: left 0.75rem center; }
+
+  /* Size Variants */
+  .select-xs {
+    padding: 0.375rem 2rem 0.375rem 0.625rem;
+    font-size: 0.75rem;
+    line-height: 1rem;
+    border-radius: var(--radius-xs);
+    background-size: 1rem 1rem;
+  }
+
+  .select-sm {
+    padding: 0.5rem 2.25rem 0.5rem 0.75rem;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    border-radius: var(--radius-xs);
+    background-size: 1.125rem 1.125rem;
+  }
+
+  .select-lg {
+    padding: 1rem 3rem 1rem 1.25rem;
+    font-size: 1.125rem;
+    line-height: 1.75rem;
+    border-radius: var(--radius-sm);
+    background-size: 1.5rem 1.5rem;
+    background-position: right 1rem center;
+  }
+
+  /* Select Container */
+  .select-container {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    width: 100%;
+  }
+
+  .select-label {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--color-on-surface);
+  }
+
+  .select-helper {
+    font-size: 0.75rem;
+    color: var(--color-on-surface-variant);
+  }
+
+  .select-container-error .select-helper {
+    color: var(--color-error);
+  }
+
+  /* Select Group */
+  .select-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+
+  /* Multiple Select */
+  .select-multiple {
+    padding: 0.5rem;
+    height: auto;
+    min-height: 6rem;
+    background-image: none;
+  }
+
+  .select-multiple option {
+    padding: 0.5rem 0.75rem;
+    border-radius: var(--radius-xs);
+  }
+
+  .select-multiple option:checked {
+    background-color: var(--color-primary-container);
+    color: var(--color-on-primary-container);
+  }
+
+  /* Ghost Select */
+  .select-ghost {
+    background-color: transparent;
+    border-color: transparent;
+  }
+
+  .select-ghost:hover:not(:disabled) {
+    background-color: var(--color-surface-container);
+    border-color: transparent;
+  }
+
+  .select-ghost:focus-visible {
+    background-color: var(--color-surface-container);
+    border-color: transparent;
+    box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
+  }
+
+  /* Reduce Motion */
+  @media (prefers-reduced-motion: reduce) {
+    .select {
+      transition: none;
+    }
+  }
+}
+
+
+
+/**
+ * Textarea Component Styles
+ * DuskMoonUI - Material Design 3 inspired multi-line text input
+ */
+
+@layer components {
+  :where(.textarea) { box-sizing: border-box; }
+
+  /* ============================================
+   * TEXTAREA CONTAINER
+   * ============================================ */
+
+  .textarea-container {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    width: 100%;
+  }
+
+  /* ============================================
+   * TEXTAREA LABEL
+   * ============================================ */
+
+  .textarea-label {
+    display: block;
+    font-size: 0.875rem;
+    font-weight: 500;
+    line-height: 1.25rem;
+    color: var(--color-on-surface);
+    margin-bottom: 0.25rem;
+  }
+
+  /* Floating Label */
+  .textarea-label-floating {
+    position: absolute;
+    top: 0.75rem;
+    left: 1rem;
+    font-size: 1rem;
+    font-weight: 400;
+    color: var(--color-on-surface-variant);
+    pointer-events: none;
+    transition: all 150ms ease-in-out;
+    transform-origin: left top;
+    z-index: 1;
+  }
+
+  /* Floating label active state - when textarea has content or focus */
+  .textarea:focus ~ .textarea-label-floating,
+  .textarea:not(:placeholder-shown) ~ .textarea-label-floating {
+    top: -0.5rem;
+    left: 0.75rem;
+    font-size: 0.75rem;
+    font-weight: 500;
+    color: var(--color-primary);
+    background-color: var(--color-surface);
+    padding: 0 0.25rem;
+  }
+
+  /* Floating label for filled variant */
+  .textarea-filled ~ .textarea-label-floating {
+    background-color: transparent;
+  }
+
+  .textarea-filled:focus ~ .textarea-label-floating,
+  .textarea-filled:not(:placeholder-shown) ~ .textarea-label-floating {
+    top: 0.25rem;
+    left: 0.75rem;
+    background-color: transparent;
+  }
+
+  /* ============================================
+   * HELPER TEXT
+   * ============================================ */
+
+  .textarea-helper {
+    font-size: 0.75rem;
+    line-height: 1rem;
+    color: var(--color-on-surface-variant);
+    margin-top: 0.25rem;
+  }
+
+  /* ============================================
+   * BASE TEXTAREA
+   * ============================================ */
+
+  .textarea {
+    display: block;
+    width: 100%;
     min-height: 6rem;
     padding: 0.75rem 1rem;
     font-size: 1rem;
     line-height: 1.5rem;
-    background-color: var(--color-surface);
+    font-family: inherit;
     color: var(--color-on-surface);
+    background-color: var(--color-surface);
     border: 1px solid currentColor;
     border-radius: var(--radius-sm);
-    resize: vertical;
-    field-sizing: content;
-    transition: border-color 150ms ease-in-out;
+    outline: none;
+    resize: vertical;
+    field-sizing: content;
+    transition: border-color 150ms ease-in-out, box-shadow 150ms ease-in-out;
+  }
+
+  .textarea::placeholder {
+    color: var(--color-on-surface-variant);
+    opacity: 0.7;
+  }
+
+  .textarea:hover:not(:disabled) {
+    background-color: var(--color-surface-container);
+  }
+
+  .textarea:focus {
+    outline: none;
+  }
+
+  .textarea:focus-visible {
+    box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
+  }
+
+  .textarea:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+    background-color: var(--color-surface-container);
+    resize: none;
+  }
+
+  .textarea[readonly] {
+    background-color: var(--color-surface-container);
+    cursor: default;
+  }
+
+  /* Full Width */
+  .textarea-full {
+    width: 100%;
+  }
+
+  /* ============================================
+   * VARIANTS
+   * ============================================ */
+
+  /* Filled Variant */
+  .textarea-filled {
+    background-color: var(--color-surface-container);
+    border: none;
+    border-bottom: 2px solid var(--color-outline);
+    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
+  }
+
+  .textarea-filled:hover:not(:disabled) {
+    background-color: var(--color-surface-container-high);
+    border-bottom-color: var(--color-on-surface);
+  }
+
+  .textarea-filled:focus-visible {
+    border-bottom-color: var(--color-primary);
+    box-shadow: none;
+  }
+
+  .textarea-filled.textarea-primary:focus-visible { border-bottom-color: var(--color-primary); }
+  .textarea-filled.textarea-secondary:focus-visible { border-bottom-color: var(--color-secondary); }
+  .textarea-filled.textarea-tertiary:focus-visible { border-bottom-color: var(--color-tertiary); }
+  .textarea-filled.textarea-info:focus-visible { border-bottom-color: var(--color-info); }
+  .textarea-filled.textarea-success:focus-visible { border-bottom-color: var(--color-success); }
+  .textarea-filled.textarea-warning:focus-visible { border-bottom-color: var(--color-warning); }
+  .textarea-filled.textarea-error:focus-visible { border-bottom-color: var(--color-error); }
+  .textarea-filled.textarea-accent:focus-visible { border-bottom-color: var(--color-accent); }
+  .textarea-filled.textarea-neutral:focus-visible { border-bottom-color: var(--color-neutral); }
+  .textarea-filled.textarea-base:focus-visible { border-bottom-color: var(--color-base-content); }
+
+  /* Outlined Variant (default) */
+  .textarea-outlined {
+    background-color: transparent;
+    border: 1px solid var(--color-outline);
+    border-radius: var(--radius-sm);
   }
 
-  .textarea::placeholder {
-    color: var(--color-on-surface-variant);
-    opacity: 0.7;
+  /* Ghost Variant */
+  .textarea-ghost {
+    background-color: transparent;
+    border-color: transparent;
   }
 
-  .textarea:focus {
-    outline: none;
+  .textarea-ghost:hover:not(:disabled) {
+    background-color: var(--color-surface-container);
+    border-color: transparent;
   }
 
-  .textarea:focus-visible {
-    border-color: var(--color-primary);
+  .textarea-ghost:focus-visible {
+    background-color: var(--color-surface-container);
+    border-color: transparent;
+    box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
   }
 
-  .textarea:disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
+  /* ============================================
+   * COLOR VARIANTS
+   * ============================================ */
+
+  /* Color Variants — base .textarea:focus-visible uses currentColor 20%, so no per-variant
+     focus-visible overrides needed; setting color: here is sufficient. */
+  .textarea-primary   { color: var(--color-primary); }
+  .textarea-secondary { color: var(--color-secondary); }
+  .textarea-tertiary  { color: var(--color-tertiary); }
+
+  /* ============================================
+   * SEMANTIC COLORS
+   * ============================================ */
+
+  .textarea-info    { color: var(--color-info); }
+  .textarea-success { color: var(--color-success); }
+  .textarea-warning { color: var(--color-warning); }
+  .textarea-error   { color: var(--color-error); }
+  .textarea-accent  { color: var(--color-accent); }
+  .textarea-neutral { color: var(--color-neutral); }
+  .textarea-base    { color: var(--color-base-content); }
+
+  /* ============================================
+   * SIZE VARIANTS
+   * ============================================ */
+
+  .textarea-xs { min-height: 3rem; padding: 0.375rem 0.625rem; font-size: 0.75rem; line-height: 1rem; }
+  .textarea-md { min-height: 6rem; }
+  .textarea-bordered { border-color: var(--color-outline); }
+
+  .textarea-sm {
+    min-height: 4rem;
+    padding: 0.5rem 0.75rem;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    border-radius: var(--radius-xs);
+  }
+
+  .textarea-lg {
+    min-height: 8rem;
+    padding: 1rem 1.25rem;
+    font-size: 1.125rem;
+    line-height: 1.75rem;
+    border-radius: var(--radius-sm);
+  }
+
+  /* ============================================
+   * RESIZE OPTIONS
+   * ============================================ */
+
+  .textarea-resize-none {
     resize: none;
   }
 
-  .textarea-bordered {
-    border-color: var(--color-outline);
+  .textarea-resize-vertical {
+    resize: vertical;
+  }
+
+  .textarea-resize-horizontal {
+    resize: horizontal;
+  }
+
+  .textarea-resize-both {
+    resize: both;
+  }
+
+  /* ============================================
+   * COMPACT AUTO-RESIZE
+   * ============================================ */
+
+  .textarea-auto-resize,
+  .textarea-autosize {
+    resize: none;
+    overflow: hidden;
+    min-height: 3rem;
+    field-sizing: content; /* Modern CSS - auto-grows without JS in supported browsers */
+  }
+
+  /* ============================================
+   * CHARACTER COUNTER
+   * ============================================ */
+
+  .textarea-counter {
+    font-size: 0.75rem;
+    line-height: 1rem;
+    color: var(--color-on-surface-variant);
+    text-align: right;
+  }
+
+  .textarea-counter-error,
+  .textarea-counter-exceeded {
+    color: var(--color-error);
   }
 
-  /* Validation States */
-  .form-control.error .input,
-  .form-control.error .select,
-  .form-control.error .textarea,
-  .input-error,
-  .select-error,
-  .textarea-error {
-    border-color: var(--color-error);
+  /* ============================================
+   * CONTAINER STATES
+   * ============================================ */
+
+  .textarea-container-error .textarea-label {
+    color: var(--color-error);
   }
 
-  .form-control.error .input:focus-visible,
-  .form-control.error .select:focus-visible,
-  .form-control.error .textarea:focus-visible {
-    border-color: var(--color-error);
-    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-error) 10%, transparent);
+  .textarea-container-error .textarea-helper {
+    color: var(--color-error);
   }
 
-  .form-control.error .label-text {
+  .textarea-container-error .textarea-label-floating {
     color: var(--color-error);
   }
 
-  .form-control.success .input,
-  .form-control.success .select,
-  .form-control.success .textarea,
-  .input-success,
-  .select-success,
-  .textarea-success {
-    border-color: var(--color-success);
+  .textarea-container-error .textarea:focus ~ .textarea-label-floating {
+    color: var(--color-error);
   }
 
-  .form-control.success .input:focus-visible,
-  .form-control.success .select:focus-visible,
-  .form-control.success .textarea:focus-visible {
-    border-color: var(--color-success);
-    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-success) 10%, transparent);
+  .textarea-container-success .textarea-label {
+    color: var(--color-success);
   }
 
-  .form-control.success .label-text {
+  .textarea-container-success .textarea-helper {
     color: var(--color-success);
   }
 
-  .form-control.warning .input,
-  .form-control.warning .select,
-  .form-control.warning .textarea,
-  .input-warning,
-  .select-warning,
-  .textarea-warning {
-    border-color: var(--color-warning);
+  .textarea-container-success .textarea-label-floating {
+    color: var(--color-success);
   }
 
-  .form-control.warning .input:focus-visible,
-  .form-control.warning .select:focus-visible,
-  .form-control.warning .textarea:focus-visible {
-    border-color: var(--color-warning);
-    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-warning) 10%, transparent);
+  .textarea-container-success .textarea:focus ~ .textarea-label-floating {
+    color: var(--color-success);
   }
 
-  .form-control.warning .label-text {
-    color: var(--color-warning);
+  /* ============================================
+   * REDUCE MOTION
+   * ============================================ */
+
+  @media (prefers-reduced-motion: reduce) {
+    .textarea,
+    .textarea-label-floating {
+      transition: none;
+    }
+  }
+}
+
+@layer components {
+  .range {
+    --range-thumb-size: 1.25rem;
+    appearance: none;
+    display: block;
+    box-sizing: border-box;
+    width: 100%;
+    min-width: 0;
+    height: var(--range-thumb-size);
+    margin: 0;
+    color: var(--color-on-surface);
+    accent-color: currentColor;
+    background: transparent;
+    cursor: pointer;
+  }
+  .range::-webkit-slider-runnable-track { height: 0.5rem; background: var(--color-surface-container-highest); border-radius: var(--radius-xs); }
+  .range::-moz-range-track { height: 0.5rem; background: var(--color-surface-container-highest); border-radius: var(--radius-xs); }
+  .range::-webkit-slider-thumb {
+    appearance: none;
+    width: var(--range-thumb-size);
+    height: var(--range-thumb-size);
+    margin-top: calc((0.5rem - var(--range-thumb-size)) / 2);
+    background: currentColor;
+    border: 1px solid currentColor;
+    border-radius: var(--radius-full);
+  }
+  .range::-moz-range-thumb { width: var(--range-thumb-size); height: var(--range-thumb-size); background: currentColor; border: 1px solid currentColor; border-radius: var(--radius-full); }
+  .range:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
+  .range:disabled { opacity: 0.5; cursor: not-allowed; }
+  .range-xs { --range-thumb-size: 0.875rem; }
+  .range-sm { --range-thumb-size: 1rem; }
+  .range-lg { --range-thumb-size: 1.5rem; }
+  .range-primary { color: var(--color-primary); }
+  .range-secondary { color: var(--color-secondary); }
+  .range-tertiary { color: var(--color-tertiary); }
+  .range-info { color: var(--color-info); }
+  .range-success { color: var(--color-success); }
+  .range-warning { color: var(--color-warning); }
+  .range-error { color: var(--color-error); }
+  @media (forced-colors: active) { .range { appearance: auto; } .range:focus-visible { outline-color: Highlight; } }
+}
+
+
+
+/**
+ * Form Group Component Styles
+ * DuskMoonUI - Form layout utilities including label, helper text, fieldset
+ */
+
+@layer components {
+  /* Form Group Container */
+  .form-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    width: 100%;
   }
 
-  .form-control.info .input,
-  .form-control.info .select,
-  .form-control.info .textarea,
-  .input-info,
-  .select-info,
-  .textarea-info {
-    border-color: var(--color-info);
+  .form-group-horizontal {
+    flex-direction: row;
+    align-items: flex-start;
+    gap: 1rem;
   }
 
-  .form-control.info .input:focus-visible,
-  .form-control.info .select:focus-visible,
-  .form-control.info .textarea:focus-visible {
-    border-color: var(--color-info);
-    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-info) 10%, transparent);
+  .form-group-horizontal .form-label {
+    min-width: 8rem;
+    padding-top: 0.75rem;
   }
 
-  .form-control.info .label-text {
-    color: var(--color-info);
+  .form-group-horizontal .form-control {
+    flex: 1;
+  }
+
+  /* Form Label */
+  .form-label {
+    display: block;
+    font-size: 0.875rem;
+    font-weight: 500;
+    line-height: 1.25rem;
+    color: var(--color-on-surface);
+    margin-bottom: 0.25rem;
+  }
+
+  .form-label-required::after {
+    content: ' *';
+    color: var(--color-error);
+  }
+
+  .form-label-optional::after {
+    content: ' (optional)';
+    font-size: 0.75rem;
+    font-weight: 400;
+    color: var(--color-on-surface-variant);
+  }
+
+  /* Label Sizes */
+  .form-label-sm {
+    font-size: 0.75rem;
+    line-height: 1rem;
+  }
+
+  .form-label-lg {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
+
+  /* Form Control Wrapper */
+  .form-control {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
   }
 
   /* Helper Text */
   .helper-text {
     font-size: 0.75rem;
+    line-height: 1rem;
     color: var(--color-on-surface-variant);
     margin-top: 0.25rem;
   }
 
-  .helper-text.error {
+  .helper-text-error {
     color: var(--color-error);
   }
 
-  .helper-text.success {
+  .helper-text-success {
     color: var(--color-success);
   }
 
-  .helper-text.warning {
+  .helper-text-warning {
     color: var(--color-warning);
   }
 
-  .helper-text.info {
+  .helper-text-info {
     color: var(--color-info);
   }
 
-  /* Native HTML Validation (:user-invalid/:user-valid, :invalid/:valid, ARIA)
-   * is handled in form-group.css to avoid duplication. */
+  /* Helper Text with Icon */
+  .helper-text-icon {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+  }
 
-  /* Required Field Indicator */
-  .label-text.required::after {
-    content: ' *';
-    color: var(--color-error);
+  .helper-text-icon svg,
+  .helper-text-icon .icon {
+    width: 0.875rem;
+    height: 0.875rem;
   }
 
-  /* Range Input */
-  .range {
-    appearance: none;
-    width: 100%;
-    height: 0.5rem;
-    background-color: var(--color-surface-container-highest);
-    border-radius: var(--radius-xs);
-    cursor: pointer;
+  /* Form Hint (above input) */
+  .form-hint {
+    font-size: 0.75rem;
+    line-height: 1rem;
+    color: var(--color-on-surface-variant);
+    margin-bottom: 0.25rem;
   }
 
-  .range::-webkit-slider-thumb {
-    appearance: none;
-    width: 1.25rem;
-    height: 1.25rem;
-    background-color: var(--color-primary);
-    border-radius: var(--radius-full);
-    cursor: pointer;
-    transition: transform 150ms ease-in-out;
+  /* Fieldset */
+  .fieldset {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    padding: 1rem;
+    margin: 0;
+    border: 1px solid var(--color-outline-variant);
+    border-radius: var(--radius-sm);
+    background-color: transparent;
+  }
+
+  .fieldset-legend {
+    padding: 0 0.5rem;
+    font-size: 0.875rem;
+    font-weight: 600;
+    line-height: 1.25rem;
+    color: var(--color-on-surface);
   }
 
-  .range::-webkit-slider-thumb:hover {
-    transform: scale(1.1);
+  /* Fieldset Variants */
+  .fieldset-filled {
+    background-color: var(--color-surface-container-lowest);
+    border-color: transparent;
   }
 
-  .range::-moz-range-thumb {
-    width: 1.25rem;
-    height: 1.25rem;
-    background-color: var(--color-primary);
+  .fieldset-borderless {
     border: none;
-    border-radius: var(--radius-full);
-    cursor: pointer;
+    padding: 0;
   }
 
-  .range:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
+  /* Fieldset with Card Style */
+  .fieldset-card {
+    background-color: var(--color-surface);
+    border-color: transparent;
+    box-shadow: var(--shadow-xs);
+    padding: 1.5rem;
   }
 
-  /* Reduce Motion */
-  @media (prefers-reduced-motion: reduce) {
-    .form-control,
-    .input,
-    .select,
-    .textarea,
-    .range,
-    .label-float .form-control ~ label {
-      transition: none;
+  /* Form Row */
+  .form-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+  }
+
+  .form-row > .form-group {
+    flex: 1;
+    min-width: 200px;
+  }
+
+  /* Form Grid */
+  .form-grid {
+    display: grid;
+    gap: 1rem;
+  }
+
+  .form-grid-2 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .form-grid-3 {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  .form-grid-4 {
+    grid-template-columns: repeat(4, 1fr);
+  }
+
+  @media (max-width: 640px) {
+    .form-grid-2,
+    .form-grid-3,
+    .form-grid-4 {
+      grid-template-columns: 1fr;
     }
   }
+
+  /* Form Actions */
+  .form-actions {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    margin-top: 1rem;
+  }
+
+  .form-actions-right {
+    justify-content: flex-end;
+  }
+
+  .form-actions-center {
+    justify-content: center;
+  }
+
+  .form-actions-between {
+    justify-content: space-between;
+  }
+
+  /* Form Divider */
+  .form-divider {
+    height: 1px;
+    background-color: var(--color-outline-variant);
+    margin: 1rem 0;
+  }
+
+  .form-divider-text {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    color: var(--color-on-surface-variant);
+    font-size: 0.75rem;
+    text-transform: uppercase;
+  }
+
+  .form-divider-text::before,
+  .form-divider-text::after {
+    content: '';
+    flex: 1;
+    height: 1px;
+    background-color: var(--color-outline-variant);
+  }
+
+  /* Form Section */
+  .form-section {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .form-section-title {
+    font-size: 1rem;
+    font-weight: 600;
+    color: var(--color-on-surface);
+    margin-bottom: 0.5rem;
+  }
+
+  .form-section-description {
+    font-size: 0.875rem;
+    color: var(--color-on-surface-variant);
+    margin-bottom: 1rem;
+  }
+
+  /* Inline Form */
+  .form-inline {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-end;
+    gap: 0.75rem;
+  }
+
+  .form-inline .form-group {
+    flex: none;
+    width: auto;
+  }
+
+  /* Character Counter */
+  .form-counter {
+    font-size: 0.75rem;
+    color: var(--color-on-surface-variant);
+    text-align: right;
+    margin-top: 0.25rem;
+  }
+
+  .form-counter-error {
+    color: var(--color-error);
+  }
+
+  /* Legacy label and helper APIs share the composition implementation. */
+  /* Label */
+  .label {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.25rem 0;
+  }
+
+  .label-text {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--color-on-surface);
+    padding-bottom: 0.25rem;
+  }
+
+  .label-text-alt {
+    font-size: 0.75rem;
+    color: var(--color-on-surface-variant);
+  }
+
+
+  .label-text.required::after,
+  .form-label[aria-required="true"]::after,
+  label[aria-required="true"]::after {
+    content: ' *';
+    color: var(--color-error);
+  }
+
+  .helper-text.error { color: var(--color-error); }
+  .helper-text.success { color: var(--color-success); }
+  .helper-text.warning { color: var(--color-warning); }
+  .helper-text.info { color: var(--color-info); }
+
+  .form-group-disabled { opacity: 0.5; pointer-events: none; }
+  .fieldset { min-inline-size: 0; }
+  .form-group, .form-control { min-inline-size: 0; }
+  .form-control { width: 100%; margin-bottom: 1rem; color: var(--color-on-surface); }
+
+  @media (max-width: 640px) {
+    .form-group-horizontal { flex-direction: column; }
+    .form-row > .form-group { min-width: 0; flex-basis: 100%; }
+  }
 }
+