@duskmoon-dev/core 1.17.0 → 1.17.1

package/dist/esm/components/circle-menu.js

@@ -302,6 +302,30 @@ export const css = `/**
     --circle-menu-item-ring: color-mix(in oklch, var(--color-error) 40%, transparent);
   }
 
+  .circle-menu-accent {
+    --circle-menu-btn-bg: var(--color-accent);
+    --circle-menu-bar-color: var(--color-accent-content);
+    --circle-menu-item-bg: var(--color-accent);
+    --circle-menu-item-color: var(--color-accent-content);
+    --circle-menu-item-ring: color-mix(in oklch, var(--color-accent) 40%, transparent);
+  }
+
+  .circle-menu-neutral {
+    --circle-menu-btn-bg: var(--color-neutral);
+    --circle-menu-bar-color: var(--color-neutral-content);
+    --circle-menu-item-bg: var(--color-neutral);
+    --circle-menu-item-color: var(--color-neutral-content);
+    --circle-menu-item-ring: color-mix(in oklch, var(--color-neutral) 40%, transparent);
+  }
+
+  .circle-menu-base {
+    --circle-menu-btn-bg: var(--color-base-100);
+    --circle-menu-bar-color: var(--color-base-content);
+    --circle-menu-item-bg: var(--color-base-100);
+    --circle-menu-item-color: var(--color-base-content);
+    --circle-menu-item-ring: color-mix(in oklch, var(--color-base-content) 40%, transparent);
+  }
+
   /* === Reduced motion === */
   @media (prefers-reduced-motion: reduce) {
     .circle-menu-label {

package/dist/esm/components/collapse.js

@@ -176,10 +176,16 @@ export const css = `/**
 
   .collapse-card .collapse-inner,
   .collapse-card .collapse-content > * {
-    padding: 0 1rem 1rem;
     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 > * {
+    padding: 0 1rem 1rem;
+  }
+
   /* Bordered Variant */
   .collapse-bordered {
     border: 1px solid var(--color-outline-variant);
@@ -252,6 +258,30 @@ export const css = `/**
     background-color: var(--color-error-container);
   }
 
+  .collapse-accent .collapse-trigger {
+    color: var(--color-accent);
+  }
+
+  .collapse-accent .collapse-trigger:hover {
+    background-color: color-mix(in oklch, var(--color-accent) 15%, var(--color-surface));
+  }
+
+  .collapse-neutral .collapse-trigger {
+    color: var(--color-neutral);
+  }
+
+  .collapse-neutral .collapse-trigger:hover {
+    background-color: color-mix(in oklch, var(--color-neutral) 15%, var(--color-surface));
+  }
+
+  .collapse-base .collapse-trigger {
+    color: var(--color-base-content);
+  }
+
+  .collapse-base .collapse-trigger:hover {
+    background-color: var(--color-base-200);
+  }
+
   /* Size Variants */
   .collapse-sm .collapse-trigger {
     padding: 0.5rem 0.75rem;

package/dist/esm/components/datepicker.js

@@ -756,6 +756,48 @@ export const css = `/**
     color: var(--color-warning-content);
   }
 
+  .datepicker-accent .datepicker-input {
+    color: var(--color-accent);
+  }
+  .datepicker-accent .datepicker-input:focus {
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-accent) 10%, transparent);
+  }
+
+  .datepicker-accent .datepicker-day-selected,
+  .datepicker-accent .datepicker-day-range-start,
+  .datepicker-accent .datepicker-day-range-end {
+    background-color: var(--color-accent);
+    color: var(--color-accent-content);
+  }
+
+  .datepicker-neutral .datepicker-input {
+    color: var(--color-neutral);
+  }
+  .datepicker-neutral .datepicker-input:focus {
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-neutral) 10%, transparent);
+  }
+
+  .datepicker-neutral .datepicker-day-selected,
+  .datepicker-neutral .datepicker-day-range-start,
+  .datepicker-neutral .datepicker-day-range-end {
+    background-color: var(--color-neutral);
+    color: var(--color-neutral-content);
+  }
+
+  .datepicker-base .datepicker-input {
+    color: var(--color-base-content);
+  }
+  .datepicker-base .datepicker-input:focus {
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-base-content) 10%, transparent);
+  }
+
+  .datepicker-base .datepicker-day-selected,
+  .datepicker-base .datepicker-day-range-start,
+  .datepicker-base .datepicker-day-range-end {
+    background-color: var(--color-base-100);
+    color: var(--color-base-content);
+  }
+
   /* Day Selected Color Variants */
   .datepicker-primary .datepicker-day-selected,
   .datepicker-primary .datepicker-day-range-start,

package/dist/esm/components/divider.js

@@ -184,6 +184,21 @@ export const css = `/**
     background-color: var(--color-error);
   }
 
+  .divider-accent::before,
+  .divider-accent::after {
+    background-color: var(--color-accent);
+  }
+
+  .divider-neutral::before,
+  .divider-neutral::after {
+    background-color: var(--color-neutral);
+  }
+
+  .divider-base::before,
+  .divider-base::after {
+    background-color: var(--color-base-content);
+  }
+
   /* ── Gradient Lines ─────────────────────────────────────────────── */
   .divider-gradient::before,
   .divider-gradient::after {

package/dist/esm/components/file-upload.js

@@ -349,6 +349,27 @@ export const css = `/**
     box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-error) 10%, transparent);
   }
 
+  .file-upload-accent .file-upload-dropzone {
+    color: var(--color-accent);
+  }
+  .file-upload-accent .file-upload-dropzone:focus-within {
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-accent) 10%, transparent);
+  }
+
+  .file-upload-neutral .file-upload-dropzone {
+    color: var(--color-neutral);
+  }
+  .file-upload-neutral .file-upload-dropzone:focus-within {
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-neutral) 10%, transparent);
+  }
+
+  .file-upload-base .file-upload-dropzone {
+    color: var(--color-base-content);
+  }
+  .file-upload-base .file-upload-dropzone:focus-within {
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-base-content) 10%, transparent);
+  }
+
   /* Ghost Variant */
   .file-upload-ghost .file-upload-dropzone {
     background-color: transparent;

package/dist/esm/components/form.js

@@ -115,6 +115,33 @@ export const css = `/**
     border-color: var(--color-error);
   }
 
+  .checkbox-accent:checked {
+    background-color: var(--color-accent);
+    border-color: var(--color-accent);
+  }
+
+  .checkbox-accent:checked::after {
+    border-color: var(--color-accent-content);
+  }
+
+  .checkbox-neutral:checked {
+    background-color: var(--color-neutral);
+    border-color: var(--color-neutral);
+  }
+
+  .checkbox-neutral:checked::after {
+    border-color: var(--color-neutral-content);
+  }
+
+  .checkbox-base:checked {
+    background-color: var(--color-base-100);
+    border-color: var(--color-base-100);
+  }
+
+  .checkbox-base:checked::after {
+    border-color: var(--color-base-content);
+  }
+
   /* Checkbox Sizes */
   .checkbox-xs {
     width: 0.875rem;
@@ -231,6 +258,30 @@ export const css = `/**
     background-color: var(--color-error);
   }
 
+  .radio-accent:checked {
+    border-color: var(--color-accent);
+  }
+
+  .radio-accent:checked::after {
+    background-color: var(--color-accent);
+  }
+
+  .radio-neutral:checked {
+    border-color: var(--color-neutral);
+  }
+
+  .radio-neutral:checked::after {
+    background-color: var(--color-neutral);
+  }
+
+  .radio-base:checked {
+    border-color: var(--color-base-content);
+  }
+
+  .radio-base:checked::after {
+    background-color: var(--color-base-content);
+  }
+
   /* Toggle/Switch */
   .toggle {
     appearance: none;
@@ -358,6 +409,38 @@ export const css = `/**
     border-color: var(--color-secondary);
   }
 
+  .select-tertiary:focus-visible {
+    border-color: var(--color-tertiary);
+  }
+
+  .select-info:focus-visible {
+    border-color: var(--color-info);
+  }
+
+  .select-success:focus-visible {
+    border-color: var(--color-success);
+  }
+
+  .select-warning:focus-visible {
+    border-color: var(--color-warning);
+  }
+
+  .select-error:focus-visible {
+    border-color: var(--color-error);
+  }
+
+  .select-accent:focus-visible {
+    border-color: var(--color-accent);
+  }
+
+  .select-neutral:focus-visible {
+    border-color: var(--color-neutral);
+  }
+
+  .select-base:focus-visible {
+    border-color: var(--color-base-content);
+  }
+
   /* Select Sizes */
   .select-xs {
     padding: 0.375rem 2rem 0.375rem 0.625rem;

package/dist/esm/components/input.js

@@ -60,6 +60,9 @@ export const css = `/**
   .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 {
@@ -118,6 +121,9 @@ export const css = `/**
   .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); }
 
   /* Input with Icon */
   .input-group {

package/dist/esm/components/multi-select.js

@@ -485,6 +485,27 @@ export const css = `/**
     box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-error) 10%, transparent);
   }
 
+  .multi-select-accent .multi-select-trigger {
+    color: var(--color-accent);
+  }
+  .multi-select-accent .multi-select-trigger:focus-within {
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-accent) 10%, transparent);
+  }
+
+  .multi-select-neutral .multi-select-trigger {
+    color: var(--color-neutral);
+  }
+  .multi-select-neutral .multi-select-trigger:focus-within {
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-neutral) 10%, transparent);
+  }
+
+  .multi-select-base .multi-select-trigger {
+    color: var(--color-base-content);
+  }
+  .multi-select-base .multi-select-trigger:focus-within {
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-base-content) 10%, transparent);
+  }
+
   /* Ghost Variant */
   .multi-select-ghost .multi-select-trigger {
     background-color: transparent;

package/dist/esm/components/navigation.js

@@ -16,6 +16,56 @@ export const css = `/**
     color: var(--color-on-surface);
   }
 
+  .navbar-primary {
+    background-color: var(--color-primary);
+    color: var(--color-primary-content);
+  }
+
+  .navbar-secondary {
+    background-color: var(--color-secondary);
+    color: var(--color-secondary-content);
+  }
+
+  .navbar-tertiary {
+    background-color: var(--color-tertiary);
+    color: var(--color-tertiary-content);
+  }
+
+  .navbar-accent {
+    background-color: var(--color-accent);
+    color: var(--color-accent-content);
+  }
+
+  .navbar-neutral {
+    background-color: var(--color-neutral);
+    color: var(--color-neutral-content);
+  }
+
+  .navbar-base {
+    background-color: var(--color-base-100);
+    color: var(--color-base-content);
+  }
+
+  .navbar-info {
+    background-color: var(--color-info);
+    color: var(--color-info-content);
+  }
+
+  .navbar-success {
+    background-color: var(--color-success);
+    color: var(--color-success-content);
+  }
+
+  .navbar-warning {
+    background-color: var(--color-warning);
+    color: var(--color-warning-content);
+  }
+
+  .navbar-error {
+    background-color: var(--color-error);
+    color: var(--color-error-content);
+  }
+
   .navbar-start {
     display: flex;
     align-items: center;

package/dist/esm/components/otp-input.js

@@ -178,6 +178,30 @@ export const css = `/**
     box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-error) 10%, transparent);
   }
 
+  .otp-input-accent .otp-input-field {
+    color: var(--color-accent);
+  }
+
+  .otp-input-accent .otp-input-field:focus {
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-accent) 10%, transparent);
+  }
+
+  .otp-input-neutral .otp-input-field {
+    color: var(--color-neutral);
+  }
+
+  .otp-input-neutral .otp-input-field:focus {
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-neutral) 10%, transparent);
+  }
+
+  .otp-input-base .otp-input-field {
+    color: var(--color-base-content);
+  }
+
+  .otp-input-base .otp-input-field:focus {
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-base-content) 10%, transparent);
+  }
+
   /* Ghost Variant */
   .otp-input-ghost .otp-input-field {
     background-color: transparent;

package/dist/esm/components/pin-input.js

@@ -168,6 +168,30 @@ export const css = `/**
     box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-error) 10%, transparent);
   }
 
+  .pin-input-accent .pin-input-field {
+    color: var(--color-accent);
+  }
+
+  .pin-input-accent .pin-input-field:focus {
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-accent) 10%, transparent);
+  }
+
+  .pin-input-neutral .pin-input-field {
+    color: var(--color-neutral);
+  }
+
+  .pin-input-neutral .pin-input-field:focus {
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-neutral) 10%, transparent);
+  }
+
+  .pin-input-base .pin-input-field {
+    color: var(--color-base-content);
+  }
+
+  .pin-input-base .pin-input-field:focus {
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-base-content) 10%, transparent);
+  }
+
   @keyframes pin-shake {
     0%, 100% { transform: translateX(0); }
     20%, 60% { transform: translateX(-4px); }

package/dist/esm/components/progress.js

@@ -55,6 +55,18 @@ export const css = `/**
     background-color: var(--color-error);
   }
 
+  .progress-accent .progress-bar {
+    background-color: var(--color-accent);
+  }
+
+  .progress-neutral .progress-bar {
+    background-color: var(--color-neutral);
+  }
+
+  .progress-base .progress-bar {
+    background-color: var(--color-base-content);
+  }
+
   /* Size Variants */
   .progress-xs {
     height: 0.25rem;

package/dist/esm/components/radio.js

@@ -130,6 +130,18 @@ export const css = `/**
     --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;

package/dist/esm/components/rating.js

@@ -129,6 +129,18 @@ export const css = `/**
     color: var(--color-warning);
   }
 
+  .rating-accent .rating-item.filled {
+    color: var(--color-accent);
+  }
+
+  .rating-neutral .rating-item.filled {
+    color: var(--color-neutral);
+  }
+
+  .rating-base .rating-item.filled {
+    color: var(--color-base-content);
+  }
+
   /* Read Only */
   .rating-readonly .rating-item {
     cursor: default;
@@ -178,6 +190,9 @@ export const css = `/**
   .rating-info:not(.rating-readonly):hover .rating-item      { color: var(--color-info); }
   .rating-success:not(.rating-readonly):hover .rating-item   { color: var(--color-success); }
   .rating-error:not(.rating-readonly):hover .rating-item     { color: var(--color-error); }
+  .rating-accent:not(.rating-readonly):hover .rating-item    { color: var(--color-accent); }
+  .rating-neutral:not(.rating-readonly):hover .rating-item   { color: var(--color-neutral); }
+  .rating-base:not(.rating-readonly):hover .rating-item      { color: var(--color-base-content); }
 
   /* Focus Visible — use warning (the default fill color) for the base ring;
      per-variant overrides below match the active fill color for each variant. */
@@ -194,6 +209,9 @@ export const css = `/**
   .rating-success .rating-item:focus-visible   { box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-success)   20%, transparent); }
   .rating-error .rating-item:focus-visible     { box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-error)     20%, transparent); }
   .rating-warning .rating-item:focus-visible   { box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-warning)   20%, transparent); }
+  .rating-accent .rating-item:focus-visible    { box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-accent)    20%, transparent); }
+  .rating-neutral .rating-item:focus-visible   { box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-neutral)   20%, transparent); }
+  .rating-base .rating-item:focus-visible      { box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-base-content) 20%, transparent); }
 
   /* Rating Display (static) */
   .rating-display {

package/dist/esm/components/segment-control.js

@@ -134,6 +134,21 @@ export const css = `/**
     color: var(--color-on-error-container);
   }
 
+  .segment-control-accent .segment-item-active {
+    background-color: color-mix(in oklch, var(--color-accent) 15%, var(--color-surface));
+    color: var(--color-on-surface);
+  }
+
+  .segment-control-neutral .segment-item-active {
+    background-color: color-mix(in oklch, var(--color-neutral) 15%, var(--color-surface));
+    color: var(--color-on-surface);
+  }
+
+  .segment-control-base .segment-item-active {
+    background-color: var(--color-base-200);
+    color: var(--color-base-content);
+  }
+
   /* Full Width */
   .segment-control-full {
     display: flex;

package/dist/esm/components/select.js

@@ -69,6 +69,9 @@ export const css = `/**
   .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 {
@@ -88,6 +91,9 @@ export const css = `/**
   .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); }
 
   /* Size Variants */
   .select-xs {

package/dist/esm/components/slider.js

@@ -331,6 +331,69 @@ export const css = `/**
     border-top-color: var(--color-error);
   }
 
+  .slider-accent .slider-track-filled,
+  .slider-accent .slider-thumb {
+    background-color: var(--color-accent);
+  }
+
+  .slider-accent .slider-thumb:hover,
+  .slider-accent .slider-thumb:focus-visible {
+    box-shadow: 0 0 0 8px color-mix(in oklch, var(--color-accent) 15%, var(--color-surface)), 0 2px 4px color-mix(in srgb, var(--color-shadow) 20%, transparent);
+  }
+
+  .slider-accent .slider-mark-active { background-color: var(--color-accent-content); }
+
+  .slider-accent .slider-thumb-label {
+    background-color: var(--color-accent);
+    color: var(--color-accent-content);
+  }
+
+  .slider-accent .slider-thumb-label::after {
+    border-top-color: var(--color-accent);
+  }
+
+  .slider-neutral .slider-track-filled,
+  .slider-neutral .slider-thumb {
+    background-color: var(--color-neutral);
+  }
+
+  .slider-neutral .slider-thumb:hover,
+  .slider-neutral .slider-thumb:focus-visible {
+    box-shadow: 0 0 0 8px color-mix(in oklch, var(--color-neutral) 15%, var(--color-surface)), 0 2px 4px color-mix(in srgb, var(--color-shadow) 20%, transparent);
+  }
+
+  .slider-neutral .slider-mark-active { background-color: var(--color-neutral-content); }
+
+  .slider-neutral .slider-thumb-label {
+    background-color: var(--color-neutral);
+    color: var(--color-neutral-content);
+  }
+
+  .slider-neutral .slider-thumb-label::after {
+    border-top-color: var(--color-neutral);
+  }
+
+  .slider-base .slider-track-filled,
+  .slider-base .slider-thumb {
+    background-color: var(--color-base-100);
+  }
+
+  .slider-base .slider-thumb:hover,
+  .slider-base .slider-thumb:focus-visible {
+    box-shadow: 0 0 0 8px var(--color-base-200), 0 2px 4px color-mix(in srgb, var(--color-shadow) 20%, transparent);
+  }
+
+  .slider-base .slider-mark-active { background-color: var(--color-base-content); }
+
+  .slider-base .slider-thumb-label {
+    background-color: var(--color-base-100);
+    color: var(--color-base-content);
+  }
+
+  .slider-base .slider-thumb-label::after {
+    border-top-color: var(--color-base-100);
+  }
+
   /* Disabled State */
   .slider-disabled {
     opacity: 0.6;
@@ -398,6 +461,9 @@ export const css = `/**
   .slider-success.slider-vertical .slider-thumb-label::after   { border-right-color: var(--color-success); }
   .slider-warning.slider-vertical .slider-thumb-label::after   { border-right-color: var(--color-warning); }
   .slider-error.slider-vertical .slider-thumb-label::after     { border-right-color: var(--color-error); }
+  .slider-accent.slider-vertical .slider-thumb-label::after    { border-right-color: var(--color-accent); }
+  .slider-neutral.slider-vertical .slider-thumb-label::after   { border-right-color: var(--color-neutral); }
+  .slider-base.slider-vertical .slider-thumb-label::after      { border-right-color: var(--color-base-100); }
 
   .slider-vertical .slider-marks {
     flex-direction: column;

package/dist/esm/components/snackbar.js

@@ -246,6 +246,21 @@ export const css = `/**
     color: var(--color-on-tertiary-container);
   }
 
+  .snackbar-accent {
+    background-color: color-mix(in oklch, var(--color-accent) 15%, var(--color-surface));
+    color: var(--color-on-surface);
+  }
+
+  .snackbar-neutral {
+    background-color: color-mix(in oklch, var(--color-neutral) 15%, var(--color-surface));
+    color: var(--color-on-surface);
+  }
+
+  .snackbar-base {
+    background-color: var(--color-base-200);
+    color: var(--color-base-content);
+  }
+
   /* Dark Snackbar (default MD3 style) */
   .snackbar-dark {
     background-color: var(--color-on-surface);