@duskmoon-dev/core 1.19.2 → 1.19.4

package/dist/esm/components/card.js

@@ -37,6 +37,8 @@ export const css = `/**
 
   /* Card Body */
   .card-body {
+    min-inline-size: 0;
+    overflow-wrap: anywhere;
     --card-p: 1.5rem;
     display: flex;
     flex-direction: column;
@@ -101,6 +103,16 @@ export const css = `/**
     border: 1px solid var(--color-outline);
     box-shadow: none;
   }
+  .card-outlined { border: 1px solid var(--color-outline); box-shadow: none; }
+  .card-outlined:hover { box-shadow: none; }
+  .card-filled { background: var(--color-surface-container-highest); box-shadow: none; }
+  .card-lowest { background: var(--color-surface-container-lowest); box-shadow: none; }
+  .card-low { background: var(--color-surface-container-low); box-shadow: var(--shadow-sm); }
+  .card-default { background: var(--color-surface-container); box-shadow: var(--shadow-md); }
+  .card-high { background: var(--color-surface-container-high); box-shadow: var(--shadow-lg); }
+  .card-highest { background: var(--color-surface-container-highest); box-shadow: var(--shadow-xl); }
+  .card-subtitle { color: var(--color-on-surface-variant); font-size: 0.875rem; }
+  .card-comfortable .card-body { --card-p: 2rem; }
 
   .card-bordered:hover {
     box-shadow: none;

package/dist/esm/components/carousel.d.ts

@@ -0,0 +1,5 @@
+// Auto-generated type declaration for carousel
+export declare const css: string;
+export declare const styles: CSSStyleSheet | null;
+declare const sheet: CSSStyleSheet | null;
+export default sheet;

package/dist/esm/components/carousel.js

@@ -0,0 +1,37 @@
+// Auto-generated from carousel.css
+export const css = `@layer components {
+  .carousel {
+    display: flex;
+    gap: 1rem;
+    max-inline-size: 100%;
+    min-inline-size: 0;
+    overflow: auto;
+    scroll-snap-type: inline mandatory;
+    scroll-behavior: smooth;
+    color: var(--color-on-surface);
+  }
+  .carousel-item { flex: none; min-inline-size: 0; max-inline-size: 100%; scroll-snap-align: start; overflow-wrap: anywhere; }
+  .carousel-horizontal { flex-direction: row; scroll-snap-type: inline mandatory; }
+  .carousel-center > .carousel-item { scroll-snap-align: center; }
+  .carousel-end > .carousel-item { scroll-snap-align: end; }
+  .carousel-start > .carousel-item { scroll-snap-align: start; }
+  .carousel-vertical { flex-direction: column; max-block-size: var(--carousel-height, 24rem); scroll-snap-type: block mandatory; }
+  .carousel:focus-visible, .carousel-item:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
+  @media (prefers-reduced-motion: reduce) { .carousel { scroll-behavior: auto; } }
+  @media print { .carousel { flex-wrap: wrap; overflow: visible; max-block-size: none; } }
+  .carousel-primary { color: var(--color-primary); }
+  .carousel-secondary { color: var(--color-secondary); }
+  .carousel-tertiary { color: var(--color-tertiary); }
+  .carousel-info { color: var(--color-info); }
+  .carousel-success { color: var(--color-success); }
+  .carousel-warning { color: var(--color-warning); }
+  .carousel-error { color: var(--color-error); }
+}
+`;
+
+const sheet = typeof CSSStyleSheet !== 'undefined' ? new CSSStyleSheet() : null;
+if (sheet) {
+  sheet.replaceSync(css);
+}
+export const styles = sheet;
+export default sheet;

package/dist/esm/components/chat.js

@@ -432,6 +432,8 @@ export const css = `@layer components {
     align-items: stretch;
     gap: 0.5rem;
     max-width: min(80ch, 100%);
+    min-inline-size: 0;
+    box-sizing: border-box;
     padding: 0.625rem 0.875rem;
     border-radius: 1rem;
     background-color: var(--chat-bubble-bg);
@@ -446,39 +448,41 @@ export const css = `@layer components {
   .chat-bubble-content {
     min-width: 0;
   }
+  .chat-bubble pre { max-inline-size: 100%; min-inline-size: 0; overflow: auto; white-space: pre; }
+  .chat-bubble a { overflow-wrap: anywhere; text-decoration: underline; }
 
   .chat-start .chat-bubble::before,
   .chat-end .chat-bubble::before {
     content: "";
     position: absolute;
-    top: 0;
-    width: calc(1rem - 2px);
-    height: calc(1rem - 2px);
+    inset-block-start: 0;
+    inline-size: 0.75rem;
+    block-size: 1rem;
     background-color: var(--chat-bubble-bg);
-    clip-path: polygon(0 0, 100% 0, 100% 100%);
-    filter:
-      drop-shadow(-1px 0 0 var(--color-outline-variant))
-      drop-shadow(0 -1px 0 var(--color-outline-variant));
+    mask-image: radial-gradient(ellipse at 0 100%, transparent 68%, black 72%);
     pointer-events: none;
   }
 
   .chat-start .chat-bubble::before {
-    left: -0.5rem;
+    inset-inline-start: -0.5rem;
   }
 
   .chat-start .chat-bubble {
-    border-top-left-radius: 0;
+    border-start-start-radius: 0;
   }
 
   .chat-end .chat-bubble::before {
-    right: -0.5rem;
+    inset-inline-end: -0.5rem;
     transform: scaleX(-1);
   }
 
   .chat-end .chat-bubble {
-    border-top-right-radius: 0;
+    border-start-end-radius: 0;
   }
 
+  .chat-start:dir(rtl) .chat-bubble::before { transform: scaleX(-1); }
+  .chat-end:dir(rtl) .chat-bubble::before { transform: none; }
+
   .chat-bubble-primary {
     --chat-bubble-bg: var(--color-primary-container);
     --chat-bubble-fg: var(--color-on-primary-container);

package/dist/esm/components/checkbox.js

@@ -1,5 +1,73 @@
 // Auto-generated from checkbox.css
-export const css = `/**
+export const css = `/** 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
  *
@@ -8,6 +76,8 @@ export const css = `/**
  */
 
 @layer components {
+  :where(.checkbox) { box-sizing: border-box; }
+
   /* Base Checkbox - applied directly to input[type="checkbox"] */
   .checkbox {
     --checkbox-size: 1.25rem;
@@ -36,8 +106,8 @@ export const css = `/**
     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;
   }
 
@@ -60,7 +130,7 @@ export const css = `/**
   .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);
   }
@@ -122,7 +192,7 @@ export const css = `/**
 
   .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 {
@@ -131,7 +201,7 @@ export const css = `/**
 
   .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 {
@@ -140,7 +210,7 @@ export const css = `/**
 
   .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 {
@@ -149,7 +219,7 @@ export const css = `/**
 
   .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 {
@@ -158,7 +228,7 @@ export const css = `/**
 
   .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 {
@@ -167,7 +237,7 @@ export const css = `/**
 
   .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 {
@@ -176,7 +246,7 @@ export const css = `/**
 
   .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 {
@@ -185,7 +255,7 @@ export const css = `/**
 
   .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 {
@@ -194,7 +264,7 @@ export const css = `/**
 
   .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 {
@@ -203,7 +273,7 @@ export const css = `/**
 
   .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/esm/components/collapse.js

@@ -29,7 +29,7 @@ export const css = `/**
     border: none;
     cursor: pointer;
     transition: background-color 150ms ease-in-out;
-    text-align: left;
+    text-align: start;
   }
 
   .collapse-trigger:hover {
@@ -66,33 +66,36 @@ export const css = `/**
   }
 
   /* 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);
   }
 
@@ -179,10 +182,8 @@ export const css = `/**
     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;
   }
 
@@ -292,7 +293,8 @@ export const css = `/**
     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;
   }
 
@@ -305,7 +307,8 @@ export const css = `/**
     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;
   }
 
@@ -346,13 +349,13 @@ export const css = `/**
   }
 
   /* 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;
   }
@@ -496,6 +499,54 @@ export const css = `/**
     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/esm/components/countdown.d.ts

@@ -0,0 +1,5 @@
+// Auto-generated type declaration for countdown
+export declare const css: string;
+export declare const styles: CSSStyleSheet | null;
+declare const sheet: CSSStyleSheet | null;
+export default sheet;

package/dist/esm/components/countdown.js

@@ -0,0 +1,31 @@
+// Auto-generated from countdown.css
+export const css = `@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); }
+}
+`;
+
+const sheet = typeof CSSStyleSheet !== 'undefined' ? new CSSStyleSheet() : null;
+if (sheet) {
+  sheet.replaceSync(css);
+}
+export const styles = sheet;
+export default sheet;

package/dist/esm/components/datepicker.js

@@ -1,10 +1,80 @@
 // Auto-generated from datepicker.css
-export const css = `/**
+export const css = `/** 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;
@@ -197,6 +267,9 @@ export const css = `/**
     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;
@@ -679,6 +752,7 @@ export const css = `/**
   /* Inline Datepicker (always visible) */
   .datepicker-inline {
     position: static;
+    max-inline-size: 22rem;
   }
 
   .datepicker-inline .datepicker-dropdown,
@@ -690,6 +764,8 @@ export const css = `/**
     transform: none;
     margin-top: 0;
     box-shadow: none;
+    min-inline-size: 0;
+    max-inline-size: 100%;
   }
 
   /* Input Color Variants */

package/dist/esm/components/diff.d.ts

@@ -0,0 +1,5 @@
+// Auto-generated type declaration for diff
+export declare const css: string;
+export declare const styles: CSSStyleSheet | null;
+declare const sheet: CSSStyleSheet | null;
+export default sheet;