@duskmoon-dev/core 1.19.2 → 1.19.4

package/dist/components/autocomplete.css

@@ -4,6 +4,8 @@
  */
 
 @layer components {
+  :where(.autocomplete, .autocomplete *) { box-sizing: border-box; }
+
   /* Autocomplete Container */
   .autocomplete {
     position: relative;
@@ -14,6 +16,7 @@
   /* Autocomplete Input */
   .autocomplete-input {
     width: 100%;
+    min-inline-size: 0;
     padding: 0.75rem 1rem;
     font-size: 0.875rem;
     line-height: 1.5;
@@ -24,6 +27,37 @@
     transition: border-color 150ms ease-in-out, box-shadow 150ms ease-in-out;
   }
 
+  .autocomplete-input-wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+
+  .autocomplete-toggle {
+    position: absolute;
+    inset-inline-end: 0.125rem;
+    inset-block-start: 50%;
+    transform: translateY(-50%);
+    display: grid;
+    place-items: center;
+    inline-size: 2.75rem;
+    block-size: 2.75rem;
+    padding: 0;
+    font: inherit;
+    color: var(--color-on-surface);
+    background: transparent;
+    border: none;
+    border-radius: var(--radius-sm);
+    cursor: pointer;
+  }
+
+  .autocomplete-toggle:hover:not(:disabled) { background-color: var(--color-surface-container); }
+  .autocomplete-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: -3px; }
+  .autocomplete-toggle:disabled { opacity: 0.38; cursor: not-allowed; }
+  .autocomplete-sm .autocomplete-toggle { inline-size: 1.75rem; block-size: 1.75rem; }
+  .autocomplete-outlined .autocomplete-input { background-color: transparent; }
+  .autocomplete-options { list-style: none; margin: 0; padding: 0.25rem; }
+
   .autocomplete-input:focus {
     outline: none;
     box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
@@ -40,8 +74,7 @@
   .autocomplete-dropdown {
     position: absolute;
     top: 100%;
-    left: 0;
-    right: 0;
+    inset-inline: 0;
     z-index: 1000;
     max-height: 15rem;
     margin-top: 0.25rem;
@@ -57,12 +90,18 @@
   }
 
   .autocomplete.autocomplete-open .autocomplete-dropdown,
+  .autocomplete-dropdown.autocomplete-dropdown-open,
   .autocomplete-dropdown.show {
     opacity: 1;
     visibility: visible;
     transform: translateY(0);
   }
 
+  .autocomplete-dropdown[hidden],
+  .autocomplete-option[hidden],
+  .autocomplete-no-results[hidden],
+  .autocomplete-no-options[hidden] { display: none; }
+
   /* Autocomplete Options */
   .autocomplete-option {
     display: flex;
@@ -77,16 +116,20 @@
 
   .autocomplete-option:hover,
   .autocomplete-option:focus,
+  .autocomplete-option.autocomplete-option-focused,
   .autocomplete-option.highlighted {
     background-color: var(--color-surface-container);
   }
 
-  .autocomplete-option.selected {
+  .autocomplete-option.selected,
+  .autocomplete-option.autocomplete-option-selected,
+  .autocomplete-option[aria-selected="true"] {
     background-color: var(--color-primary-container);
     color: var(--color-on-primary-container);
   }
 
   .autocomplete-option:disabled,
+  .autocomplete-option[aria-disabled="true"],
   .autocomplete-option.disabled {
     color: var(--color-on-surface-variant);
     cursor: not-allowed;
@@ -133,7 +176,8 @@
   }
 
   /* Group Header */
-  .autocomplete-group-header {
+  .autocomplete-group-header,
+  .autocomplete-group-label {
     padding: 0.5rem 1rem;
     font-size: 0.75rem;
     font-weight: 600;
@@ -144,7 +188,8 @@
   }
 
   /* No Results */
-  .autocomplete-no-results {
+  .autocomplete-no-results,
+  .autocomplete-no-options {
     padding: 1rem;
     text-align: center;
     font-size: 0.875rem;
@@ -164,7 +209,7 @@
   /* Clear Button */
   .autocomplete-clear {
     position: absolute;
-    right: 0.75rem;
+    inset-inline-end: 0.75rem;
     top: 50%;
     transform: translateY(-50%);
     display: flex;
@@ -187,28 +232,31 @@
 
   /* With Clear Button */
   .autocomplete-clearable .autocomplete-input {
-    padding-right: 2.5rem;
+    padding-inline-end: 2.5rem;
   }
 
   /* Multi-select Tags */
-  .autocomplete-tags {
+  .autocomplete-tags,
+  .autocomplete-chips {
     display: flex;
     flex-wrap: wrap;
     gap: 0.25rem;
     padding: 0.375rem;
-    padding-right: 2.5rem;
+    padding-inline-end: 2.5rem;
     min-height: 2.75rem;
     background-color: var(--color-surface);
     border: 1px solid var(--color-outline);
     border-radius: var(--radius-sm);
   }
 
-  .autocomplete-tags:focus-within {
+  .autocomplete-tags:focus-within,
+  .autocomplete-chips:focus-within {
     border-color: var(--color-primary);
     box-shadow: 0 0 0 3px var(--color-primary-container);
   }
 
-  .autocomplete-tag {
+  .autocomplete-tag,
+  .autocomplete-chip {
     display: inline-flex;
     align-items: center;
     gap: 0.25rem;
@@ -219,7 +267,8 @@
     border-radius: var(--radius-xs);
   }
 
-  .autocomplete-tag-remove {
+  .autocomplete-tag-remove,
+  .autocomplete-chip-remove {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -233,7 +282,8 @@
     transition: background-color 150ms ease-in-out;
   }
 
-  .autocomplete-tag-remove:hover {
+  .autocomplete-tag-remove:hover,
+  .autocomplete-chip-remove:hover {
     background-color: var(--color-on-primary-container);
     color: var(--color-primary-container);
   }
@@ -341,6 +391,10 @@
     font-size: 1rem;
   }
 
+  /* Reserve the toggle's space after size shorthands set input padding. */
+  .autocomplete-input-wrapper .autocomplete-input { padding-inline-end: 3.25rem; }
+  .autocomplete-sm .autocomplete-input-wrapper .autocomplete-input { padding-inline-end: 2.25rem; }
+
   /* Reduce Motion */
   @media (prefers-reduced-motion: reduce) {
     .autocomplete-dropdown {

package/dist/components/avatar.css

@@ -13,7 +13,7 @@
     width: 3rem;
     height: 3rem;
     border-radius: var(--radius-full);
-    overflow: hidden;
+    overflow: visible;
     background-color: var(--color-surface-container);
     color: var(--color-on-surface);
     font-weight: 500;
@@ -24,6 +24,7 @@
     width: 100%;
     height: 100%;
     object-fit: cover;
+    border-radius: inherit;
   }
 
   /* Avatar Placeholder */
@@ -33,7 +34,9 @@
     justify-content: center;
     width: 100%;
     height: 100%;
-    font-size: 1.25rem;
+    font-size: inherit;
+    border-radius: inherit;
+    overflow: hidden;
     text-transform: uppercase;
   }
 
@@ -135,24 +138,28 @@
   }
 
   .avatar-ring-primary {
-    outline-color: var(--color-primary);
+    box-shadow: 0 0 0 3px var(--color-primary);
   }
 
   .avatar-ring-secondary {
-    outline-color: var(--color-secondary);
+    box-shadow: 0 0 0 3px var(--color-secondary);
   }
 
   .avatar-ring-tertiary {
-    outline-color: var(--color-tertiary);
+    box-shadow: 0 0 0 3px var(--color-tertiary);
   }
 
   /* Online/Offline Indicator */
   .avatar-online::after,
-  .avatar-offline::after {
+  .avatar-offline::after,
+  .avatar-status-online::after,
+  .avatar-status-offline::after,
+  .avatar-status-busy::after,
+  .avatar-status-away::after {
     content: '';
     position: absolute;
-    bottom: 0;
-    right: 0;
+    inset-block-end: 0;
+    inset-inline-end: 0;
     width: 25%;
     height: 25%;
     min-width: 0.5rem;
@@ -161,14 +168,19 @@
     border: 2px solid var(--color-surface);
   }
 
-  .avatar-online::after {
+  .avatar-online::after,
+  .avatar-status-online::after {
     background-color: var(--color-success);
   }
 
-  .avatar-offline::after {
+  .avatar-offline::after,
+  .avatar-status-offline::after {
     background-color: var(--color-outline);
   }
 
+  .avatar-status-busy::after { background-color: var(--color-error); }
+  .avatar-status-away::after { background-color: var(--color-warning); }
+
   /* Avatar Group */
   .avatar-group {
     display: flex;
@@ -178,21 +190,33 @@
 
   .avatar-group .avatar {
     border: 2px solid var(--color-surface);
-    margin-left: -0.75rem;
+    margin-inline-start: -0.75rem;
   }
 
   .avatar-group .avatar:last-child {
-    margin-left: 0;
+    margin-inline-start: 0;
   }
 
   /* Avatar Group Sizes */
   .avatar-group-sm .avatar {
-    margin-left: -0.5rem;
+    margin-inline-start: -0.5rem;
   }
 
   .avatar-group-lg .avatar {
-    margin-left: -1rem;
-  }
+    margin-inline-start: -1rem;
+  }
+
+  /* Historical documented composition classes. */
+  .avatar-image { inline-size: 100%; block-size: 100%; border-radius: inherit; overflow: hidden; }
+  .avatar-icon { display: inline-flex; align-items: center; justify-content: center; inline-size: 100%; block-size: 100%; }
+  .avatar-circle { border-radius: var(--radius-full); }
+  .avatar-bordered { border: 2px solid currentColor; }
+  .avatar-clickable { cursor: pointer; }
+  .avatar-overflow { font-size: 0.875rem; }
+  .avatar-group-dense > .avatar { margin-inline-start: -1rem; }
+  .avatar-group-xs > .avatar { inline-size: 1.5rem; block-size: 1.5rem; font-size: 0.625rem; }
+  .avatar-group-xl > .avatar { inline-size: 6rem; block-size: 6rem; font-size: 2rem; }
+  .avatar-group-dense > .avatar:last-child { margin-inline-start: 0; }
 
   /* Focus State for Interactive Avatars */
   .avatar:focus-visible {

package/dist/components/badge.css

@@ -6,6 +6,7 @@
 @layer components {
   /* Base Badge */
   .badge {
+    box-sizing: border-box;
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -13,7 +14,10 @@
     font-size: 0.75rem;
     font-weight: 500;
     line-height: 1rem;
-    white-space: nowrap;
+    white-space: normal;
+    max-inline-size: 100%;
+    overflow-wrap: anywhere;
+    min-inline-size: 0;
     border-radius: var(--radius-full);
     background-color: var(--color-surface-container);
     color: var(--color-on-surface);
@@ -227,13 +231,13 @@
   /* Badge with Indicator Dot */
   .badge-indicator {
     position: relative;
-    padding-left: 1rem;
+    padding-inline-start: 1rem;
   }
 
   .badge-indicator::before {
     content: '';
     position: absolute;
-    left: 0.375rem;
+    inset-inline-start: 0.375rem;
     top: 50%;
     transform: translateY(-50%);
     width: 0.375rem;
@@ -242,6 +246,14 @@
     background-color: currentColor;
   }
 
+  .badge-filled { font-weight: 500; }
+  .badge-md { padding: 0.125rem 0.5rem; font-size: 0.75rem; line-height: 1rem; }
+  .badge-notification { position: absolute; inset-block-start: 0; inset-inline-end: 0; transform: translate(50%, -50%); }
+  .badge-notification:dir(rtl) { transform: translate(-50%, -50%); }
+  .badge-removable { gap: 0.25rem; }
+  .badge-removable > button { display: inline-flex; padding: 0; border: 0; color: inherit; background: transparent; cursor: pointer; }
+  .badge-removable > button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
+
   /* Empty Badge (just a dot) */
   .badge-dot {
     width: 0.5rem;

package/dist/components/card.css

@@ -36,6 +36,8 @@
 
   /* Card Body */
   .card-body {
+    min-inline-size: 0;
+    overflow-wrap: anywhere;
     --card-p: 1.5rem;
     display: flex;
     flex-direction: column;
@@ -100,6 +102,16 @@
     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/components/carousel.css

@@ -0,0 +1,28 @@
+@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); }
+}

package/dist/components/chat.css

@@ -431,6 +431,8 @@
     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);
@@ -445,39 +447,41 @@
   .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/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 */