@duskmoon-dev/core 1.19.3 → 1.19.5

package/dist/components/checkbox.css

@@ -1,3 +1,71 @@
+/** Opt-in native presentation. Applications own errors, messages and announcements. */
+@layer components {
+  /* 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); }
+
+  :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);
+  }
+
+  :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);
+  }
+
+  :is(.form-group-error, .form-control.error) {
+    --dm-validation-color: var(--color-error);
+    --dm-validation-content: var(--color-error-content);
+  }
+
+  /* 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);
+  }
+
+  /* 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);
+  }
+
+  :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);
+  }
+
+  :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); }
+
+  .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; }
+
+  @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 Component Styles
  * DuskMoonUI - Material Design 3 inspired checkbox
@@ -7,6 +75,8 @@
  */
 
 @layer components {
+  :where(.checkbox) { box-sizing: border-box; }
+
   /* Base Checkbox - applied directly to input[type="checkbox"] */
   .checkbox {
     --checkbox-size: 1.25rem;
@@ -35,8 +105,8 @@
     height: 0.35em;
     transform: scale(0) rotate(-45deg);
     transform-origin: center;
-    border-bottom: 2px solid var(--color-primary-content);
-    border-left: 2px solid var(--color-primary-content);
+    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;
   }
 
@@ -59,7 +129,7 @@
   .checkbox:indeterminate::before {
     width: 0.5em;
     height: 0;
-    border-bottom: 2px solid var(--color-primary-content);
+    border-bottom: 2px solid var(--dm-validation-content, var(--color-primary-content));
     border-left: 0;
     transform: scale(1) rotate(0deg);
   }
@@ -121,7 +191,7 @@
 
   .checkbox-primary:checked::before,
   .checkbox-primary:indeterminate::before {
-    border-color: var(--color-primary-content);
+    border-color: var(--dm-validation-content, var(--color-primary-content));
   }
 
   .checkbox-secondary {
@@ -130,7 +200,7 @@
 
   .checkbox-secondary:checked::before,
   .checkbox-secondary:indeterminate::before {
-    border-color: var(--color-secondary-content);
+    border-color: var(--dm-validation-content, var(--color-secondary-content));
   }
 
   .checkbox-tertiary {
@@ -139,7 +209,7 @@
 
   .checkbox-tertiary:checked::before,
   .checkbox-tertiary:indeterminate::before {
-    border-color: var(--color-tertiary-content);
+    border-color: var(--dm-validation-content, var(--color-tertiary-content));
   }
 
   .checkbox-success {
@@ -148,7 +218,7 @@
 
   .checkbox-success:checked::before,
   .checkbox-success:indeterminate::before {
-    border-color: var(--color-success-content);
+    border-color: var(--dm-validation-content, var(--color-success-content));
   }
 
   .checkbox-warning {
@@ -157,7 +227,7 @@
 
   .checkbox-warning:checked::before,
   .checkbox-warning:indeterminate::before {
-    border-color: var(--color-warning-content);
+    border-color: var(--dm-validation-content, var(--color-warning-content));
   }
 
   .checkbox-error {
@@ -166,7 +236,7 @@
 
   .checkbox-error:checked::before,
   .checkbox-error:indeterminate::before {
-    border-color: var(--color-error-content);
+    border-color: var(--dm-validation-content, var(--color-error-content));
   }
 
   .checkbox-info {
@@ -175,7 +245,7 @@
 
   .checkbox-info:checked::before,
   .checkbox-info:indeterminate::before {
-    border-color: var(--color-info-content);
+    border-color: var(--dm-validation-content, var(--color-info-content));
   }
 
   .checkbox-accent {
@@ -184,7 +254,7 @@
 
   .checkbox-accent:checked::before,
   .checkbox-accent:indeterminate::before {
-    border-color: var(--color-accent-content);
+    border-color: var(--dm-validation-content, var(--color-accent-content));
   }
 
   .checkbox-neutral {
@@ -193,7 +263,7 @@
 
   .checkbox-neutral:checked::before,
   .checkbox-neutral:indeterminate::before {
-    border-color: var(--color-neutral-content);
+    border-color: var(--dm-validation-content, var(--color-neutral-content));
   }
 
   .checkbox-base {
@@ -202,7 +272,7 @@
 
   .checkbox-base:checked::before,
   .checkbox-base:indeterminate::before {
-    border-color: var(--color-base-content);
+    border-color: var(--dm-validation-content, var(--color-base-content));
   }
 
   /* Ghost Variant — borderless unchecked state */

package/dist/components/collapse.css

@@ -28,7 +28,7 @@
     border: none;
     cursor: pointer;
     transition: background-color 150ms ease-in-out;
-    text-align: left;
+    text-align: start;
   }
 
   .collapse-trigger:hover {
@@ -65,33 +65,36 @@
   }
 
   /* Open State */
-  .collapse-open .collapse-content {
+  .collapse:not(details):not(.collapse-closed).collapse-open > .collapse-content,
+  details.collapse[open] > .collapse-content {
     grid-template-rows: 1fr;
   }
 
-  .collapse-open .collapse-content > * {
+  .collapse:not(details):not(.collapse-closed).collapse-open > .collapse-content > *,
+  details.collapse[open] > .collapse-content > * {
     padding: 0 1rem 1rem;
   }
 
-  .collapse-open .collapse-icon {
+  .collapse:not(details):not(.collapse-closed).collapse-open > .collapse-trigger > .collapse-icon,
+  details.collapse[open] > .collapse-trigger > .collapse-icon {
     transform: rotate(180deg);
   }
 
   /* Closed State (explicit) */
-  .collapse-closed .collapse-content {
+  .collapse:not(details).collapse-closed > .collapse-content {
     grid-template-rows: 0fr;
   }
 
   /* Legacy show class for backwards compatibility */
-  .collapse.show .collapse-content {
+  .collapse:not(details):not(.collapse-closed).show > .collapse-content {
     grid-template-rows: 1fr;
   }
 
-  .collapse.show .collapse-content > * {
+  .collapse:not(details):not(.collapse-closed).show > .collapse-content > * {
     padding: 0 1rem 1rem;
   }
 
-  .collapse.show .collapse-icon {
+  .collapse:not(details):not(.collapse-closed).show > .collapse-trigger > .collapse-icon {
     transform: rotate(180deg);
   }
 
@@ -178,10 +181,8 @@
     color: var(--color-on-surface-variant);
   }
 
-  .collapse-card.collapse-open .collapse-inner,
-  .collapse-card.collapse-open .collapse-content > *,
-  .collapse-card.show .collapse-inner,
-  .collapse-card.show .collapse-content > * {
+  .collapse-card:not(details):not(.collapse-closed):is(.collapse-open, .show) > .collapse-content > *,
+  details.collapse-card[open] > .collapse-content > * {
     padding: 0 1rem 1rem;
   }
 
@@ -291,7 +292,8 @@
     padding: 0 0.75rem;
   }
 
-  .collapse-sm.collapse-open .collapse-content > * {
+  .collapse-sm:not(details):not(.collapse-closed):is(.collapse-open, .show) > .collapse-content > *,
+  details.collapse-sm[open] > .collapse-content > * {
     padding: 0 0.75rem 0.75rem;
   }
 
@@ -304,7 +306,8 @@
     padding: 0 1.25rem;
   }
 
-  .collapse-lg.collapse-open .collapse-content > * {
+  .collapse-lg:not(details):not(.collapse-closed):is(.collapse-open, .show) > .collapse-content > *,
+  details.collapse-lg[open] > .collapse-content > * {
     padding: 0 1.25rem 1.25rem;
   }
 
@@ -345,13 +348,13 @@
   }
 
   /* Slide Animation */
-  .collapse-slide .collapse-content > * {
+  .collapse-slide > .collapse-content > * {
     transform: translateY(-0.5rem);
     opacity: 0;
     transition: transform 300ms ease-in-out, opacity 200ms ease-in-out;
   }
 
-  .collapse-slide.collapse-open .collapse-content > * {
+  .collapse-slide:not(details):not(.collapse-closed):is(.collapse-open, .show) > .collapse-content > * {
     transform: translateY(0);
     opacity: 1;
   }
@@ -495,6 +498,54 @@
     transition: height 300ms ease-in-out;
   }
 
+  /* Native state is authoritative; controlled aliases never select native items. */
+  details.collapse { display: block; }
+  details.collapse > summary { list-style: none; }
+  details.collapse > summary::-webkit-details-marker { display: none; }
+  .collapse:not(details):not(.collapse-open):not(.show) > .collapse-content,
+  .collapse:not(details).collapse-closed > .collapse-content,
+  .collapse-content[hidden] { display: none; }
+  .collapse-content > * { min-block-size: 0; min-inline-size: 0; overflow-wrap: anywhere; }
+  .collapse.collapse-fade { opacity: 1; }
+  .collapse.collapse-fade > .collapse-content { opacity: 0; }
+  .collapse.collapse-fade:not(details):not(.collapse-closed):is(.show, .collapse-open) > .collapse-content,
+  details.collapse.collapse-fade[open] > .collapse-content { opacity: 1; }
+  .collapse.collapse-slide:not(details):not(.collapse-closed):is(.show, .collapse-open) > .collapse-content > *,
+  details.collapse.collapse-slide[open] > .collapse-content > * { transform: none; opacity: 1; }
+  .collapse.collapse-horizontal { display: block; }
+  .collapse.collapse-horizontal > .collapse-content { grid-template-rows: 1fr; grid-template-columns: 0fr; white-space: normal; }
+  .collapse.collapse-horizontal:not(details):not(.collapse-closed):is(.show, .collapse-open) > .collapse-content,
+  details.collapse.collapse-horizontal[open] > .collapse-content { grid-template-columns: 1fr; }
+  .collapse.collapse-horizontal-fixed { width: auto; }
+  .collapse.collapse-horizontal-fixed > .collapse-content { inline-size: 0; }
+  .collapse.collapse-horizontal-fixed:not(details):not(.collapse-closed):is(.show, .collapse-open) > .collapse-content,
+  details.collapse.collapse-horizontal-fixed[open] > .collapse-content { inline-size: min(100%, var(--collapse-width, 20rem)); }
+  details.collapse.collapse-maxheight { max-height: none; }
+  .collapse.collapse-maxheight:not(details):not(.collapse-closed):is(.show, .collapse-open) { max-height: var(--collapse-max-height, 100rem); }
+  .collapse.collapse-maxheight:not(details).collapse-closed { max-height: 0; }
+
+  /* Native disclosure animation; older browsers retain immediate native behavior. */
+  @supports (interpolate-size: allow-keywords) {
+    @media (prefers-reduced-motion: no-preference) {
+      details.collapse::details-content {
+        interpolate-size: allow-keywords;
+        block-size: 0;
+        overflow: clip;
+        transition: block-size 300ms ease-in-out, content-visibility 300ms allow-discrete;
+      }
+      details.collapse[open]::details-content { block-size: auto; }
+      .collapse:not(details) > .collapse-content {
+        interpolate-size: allow-keywords;
+        block-size: 0;
+        transition: block-size 300ms ease-in-out, display 300ms allow-discrete;
+      }
+      .collapse:not(details):not(.collapse-closed):is(.show, .collapse-open) > .collapse-content:not([hidden]) { block-size: auto; }
+      @starting-style {
+        .collapse:not(details):not(.collapse-closed):is(.show, .collapse-open) > .collapse-content:not([hidden]) { block-size: 0; }
+      }
+    }
+  }
+
   /* Reduce Motion */
   @media (prefers-reduced-motion: reduce) {
     .collapse,

package/dist/components/countdown.css

@@ -0,0 +1,22 @@
+@layer components {
+  .countdown { display: inline-flex; flex-wrap: wrap; gap: 0.5rem; align-items: baseline; color: var(--color-on-surface); font-variant-numeric: tabular-nums; }
+  .countdown-value { display: inline-block; min-inline-size: 2ch; text-align: center; font-size: 2rem; line-height: 1.2; overflow-wrap: anywhere; }
+  .countdown-sm .countdown-value { font-size: 1rem; }
+  .countdown-lg .countdown-value { font-size: 3rem; }
+  @media (prefers-reduced-motion: no-preference) { .countdown-transition .countdown-value { transition: color 150ms ease; } }
+  @media (prefers-reduced-motion: no-preference) {
+    .countdown-animated .countdown-value.countdown-tick { animation: countdown-tick 240ms ease-out; }
+  }
+  @keyframes countdown-tick {
+    from { transform: translateY(-0.2em); opacity: 0.35; }
+    to { transform: translateY(0); opacity: 1; }
+  }
+  @media print { .countdown-value.countdown-tick { animation: none; } }
+  .countdown-primary { color: var(--color-primary); }
+  .countdown-secondary { color: var(--color-secondary); }
+  .countdown-tertiary { color: var(--color-tertiary); }
+  .countdown-info { color: var(--color-info); }
+  .countdown-success { color: var(--color-success); }
+  .countdown-warning { color: var(--color-warning); }
+  .countdown-error { color: var(--color-error); }
+}

package/dist/components/datepicker.css

@@ -1,9 +1,79 @@
+/** Opt-in native presentation. Applications own errors, messages and announcements. */
+@layer components {
+  /* 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); }
+
+  :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);
+  }
+
+  :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);
+  }
+
+  :is(.form-group-error, .form-control.error) {
+    --dm-validation-color: var(--color-error);
+    --dm-validation-content: var(--color-error-content);
+  }
+
+  /* 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);
+  }
+
+  /* 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);
+  }
+
+  :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);
+  }
+
+  :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); }
+
+  .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; }
+
+  @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; }
+  }
+}
+
+
 /**
  * Datepicker Component Styles
  * DuskMoonUI - Material Design 3 inspired datepicker system
  */
 
 @layer components {
+  :where(.datepicker, .datepicker-input) { box-sizing: border-box; }
+
   /* Datepicker Container */
   .datepicker {
     position: relative;
@@ -196,6 +266,9 @@
     padding: 0.5rem;
   }
 
+  .datepicker-calendar > :is(.datepicker-weekdays, .datepicker-days) { grid-column: 1 / -1; }
+  .datepicker-trigger:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
+
   /* Weekday Headers */
   .datepicker-weekdays {
     display: grid;
@@ -678,6 +751,7 @@
   /* Inline Datepicker (always visible) */
   .datepicker-inline {
     position: static;
+    max-inline-size: 22rem;
   }
 
   .datepicker-inline .datepicker-dropdown,
@@ -689,6 +763,8 @@
     transform: none;
     margin-top: 0;
     box-shadow: none;
+    min-inline-size: 0;
+    max-inline-size: 100%;
   }
 
   /* Input Color Variants */

package/dist/components/diff.css

@@ -0,0 +1,33 @@
+@layer components {
+  .diff {
+    --diff-position: 50%;
+    display: grid;
+    position: relative;
+    isolation: isolate;
+    aspect-ratio: var(--diff-ratio, 16 / 9);
+    max-inline-size: 100%;
+    overflow: hidden;
+    color: var(--color-on-surface);
+    background: var(--color-surface-container);
+    border-radius: var(--radius-md);
+  }
+  .diff-before, .diff-after { grid-area: 1 / 1; min-inline-size: 0; min-block-size: 0; overflow: hidden; }
+  .diff-before { z-index: 1; clip-path: inset(0 calc(100% - clamp(0%, var(--diff-position), 100%)) 0 0); }
+  .diff:dir(rtl) > .diff-before { clip-path: inset(0 0 0 calc(100% - clamp(0%, var(--diff-position), 100%))); }
+  .diff img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
+  .diff-label { position: absolute; inset-block-start: 0.5rem; inset-inline-start: 0.5rem; padding: 0.25rem 0.5rem; background: var(--color-surface); color: var(--color-on-surface); border-radius: var(--radius-sm); }
+  .diff-after .diff-label { inset-inline-start: auto; inset-inline-end: 0.5rem; }
+  .diff-static { aspect-ratio: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .diff.diff-static > .diff-before, .diff-static > .diff-after { grid-area: auto; clip-path: none; position: relative; }
+  @media print {
+    .diff { aspect-ratio: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
+    .diff > .diff-before, .diff:dir(rtl) > .diff-before, .diff > .diff-after { grid-area: auto; clip-path: none; position: relative; }
+  }
+  .diff-primary { color: var(--color-primary); }
+  .diff-secondary { color: var(--color-secondary); }
+  .diff-tertiary { color: var(--color-tertiary); }
+  .diff-info { color: var(--color-info); }
+  .diff-success { color: var(--color-success); }
+  .diff-warning { color: var(--color-warning); }
+  .diff-error { color: var(--color-error); }
+}

package/dist/components/file-input.css

@@ -0,0 +1,107 @@
+/** Opt-in native presentation. Applications own errors, messages and announcements. */
+@layer components {
+  /* 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); }
+
+  :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);
+  }
+
+  :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);
+  }
+
+  :is(.form-group-error, .form-control.error) {
+    --dm-validation-color: var(--color-error);
+    --dm-validation-content: var(--color-error-content);
+  }
+
+  /* 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);
+  }
+
+  /* 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);
+  }
+
+  :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);
+  }
+
+  :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); }
+
+  .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; }
+
+  @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; }
+  }
+}
+
+
+@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; }
+}