@duskmoon-dev/core 1.17.0 → 1.17.1

package/dist/components/alert.css

@@ -119,6 +119,24 @@
     border-color: transparent;
   }
 
+  .alert-accent {
+    background-color: color-mix(in oklch, var(--color-accent) 15%, var(--color-surface));
+    color: var(--color-on-surface);
+    border-color: transparent;
+  }
+
+  .alert-neutral {
+    background-color: color-mix(in oklch, var(--color-neutral) 15%, var(--color-surface));
+    color: var(--color-on-surface);
+    border-color: transparent;
+  }
+
+  .alert-base {
+    background-color: var(--color-base-200);
+    color: var(--color-base-content);
+    border-color: transparent;
+  }
+
   /* Filled Variants */
   .alert-filled.alert-info {
     background-color: var(--color-info);
@@ -155,6 +173,21 @@
     color: var(--color-tertiary-content);
   }
 
+  .alert-filled.alert-accent {
+    background-color: var(--color-accent);
+    color: var(--color-accent-content);
+  }
+
+  .alert-filled.alert-neutral {
+    background-color: var(--color-neutral);
+    color: var(--color-neutral-content);
+  }
+
+  .alert-filled.alert-base {
+    background-color: var(--color-base-100);
+    color: var(--color-base-content);
+  }
+
   /* Outlined Variants */
   .alert-outlined {
     background-color: transparent;
@@ -195,6 +228,21 @@
     color: var(--color-tertiary);
   }
 
+  .alert-outlined.alert-accent {
+    border-color: var(--color-accent);
+    color: var(--color-accent);
+  }
+
+  .alert-outlined.alert-neutral {
+    border-color: var(--color-neutral);
+    color: var(--color-neutral);
+  }
+
+  .alert-outlined.alert-base {
+    border-color: var(--color-base-content);
+    color: var(--color-base-content);
+  }
+
   /* Ghost Variant */
   .alert-ghost {
     background-color: transparent;
@@ -208,6 +256,9 @@
   .alert-ghost.alert-success   { color: var(--color-success); }
   .alert-ghost.alert-warning   { color: var(--color-warning); }
   .alert-ghost.alert-error     { color: var(--color-error); }
+  .alert-ghost.alert-accent    { color: var(--color-accent); }
+  .alert-ghost.alert-neutral   { color: var(--color-neutral); }
+  .alert-ghost.alert-base      { color: var(--color-base-content); }
 
   /* Dismissible */
   .alert-dismissible {

package/dist/components/appbar.css

@@ -380,6 +380,75 @@
     opacity: 0.8;
   }
 
+  .appbar-accent {
+    background-color: var(--color-accent);
+    color: var(--color-accent-content);
+  }
+
+  .appbar-accent .appbar-nav,
+  .appbar-accent .appbar-action,
+  .appbar-accent .appbar-back {
+    color: var(--color-accent-content);
+  }
+
+  .appbar-accent .appbar-nav:hover,
+  .appbar-accent .appbar-action:hover,
+  .appbar-accent .appbar-back:hover {
+    background-color: color-mix(in oklch, var(--color-accent) 15%, var(--color-surface));
+    color: var(--color-accent);
+  }
+
+  .appbar-accent .appbar-subtitle {
+    color: var(--color-accent-content);
+    opacity: 0.8;
+  }
+
+  .appbar-neutral {
+    background-color: var(--color-neutral);
+    color: var(--color-neutral-content);
+  }
+
+  .appbar-neutral .appbar-nav,
+  .appbar-neutral .appbar-action,
+  .appbar-neutral .appbar-back {
+    color: var(--color-neutral-content);
+  }
+
+  .appbar-neutral .appbar-nav:hover,
+  .appbar-neutral .appbar-action:hover,
+  .appbar-neutral .appbar-back:hover {
+    background-color: color-mix(in oklch, var(--color-neutral) 15%, var(--color-surface));
+    color: var(--color-neutral);
+  }
+
+  .appbar-neutral .appbar-subtitle {
+    color: var(--color-neutral-content);
+    opacity: 0.8;
+  }
+
+  .appbar-base {
+    background-color: var(--color-base-100);
+    color: var(--color-base-content);
+  }
+
+  .appbar-base .appbar-nav,
+  .appbar-base .appbar-action,
+  .appbar-base .appbar-back {
+    color: var(--color-base-content);
+  }
+
+  .appbar-base .appbar-nav:hover,
+  .appbar-base .appbar-action:hover,
+  .appbar-base .appbar-back:hover {
+    background-color: var(--color-base-200);
+    color: var(--color-base-content);
+  }
+
+  .appbar-base .appbar-subtitle {
+    color: var(--color-base-content);
+    opacity: 0.8;
+  }
+
   .appbar-info {
     background-color: var(--color-info);
     color: var(--color-info-content);

package/dist/components/autocomplete.css

@@ -298,6 +298,27 @@
     box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-error) 10%, transparent);
   }
 
+  .autocomplete-accent .autocomplete-input {
+    color: var(--color-accent);
+  }
+  .autocomplete-accent .autocomplete-input:focus {
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-accent) 10%, transparent);
+  }
+
+  .autocomplete-neutral .autocomplete-input {
+    color: var(--color-neutral);
+  }
+  .autocomplete-neutral .autocomplete-input:focus {
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-neutral) 10%, transparent);
+  }
+
+  .autocomplete-base .autocomplete-input {
+    color: var(--color-base-content);
+  }
+  .autocomplete-base .autocomplete-input:focus {
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-base-content) 10%, transparent);
+  }
+
   /* Ghost Variant */
   .autocomplete-ghost .autocomplete-input {
     background-color: transparent;

package/dist/components/avatar.css

@@ -113,6 +113,21 @@
     color: var(--color-error-content);
   }
 
+  .avatar-accent {
+    background-color: var(--color-accent);
+    color: var(--color-accent-content);
+  }
+
+  .avatar-neutral {
+    background-color: var(--color-neutral);
+    color: var(--color-neutral-content);
+  }
+
+  .avatar-base {
+    background-color: var(--color-base-100);
+    color: var(--color-base-content);
+  }
+
   /* Ring */
   .avatar-ring {
     outline: none;

package/dist/components/badge.css

@@ -35,6 +35,21 @@
     color: var(--color-tertiary-content);
   }
 
+  .badge-accent {
+    background-color: var(--color-accent);
+    color: var(--color-accent-content);
+  }
+
+  .badge-neutral {
+    background-color: var(--color-neutral);
+    color: var(--color-neutral-content);
+  }
+
+  .badge-base {
+    background-color: var(--color-base-100);
+    color: var(--color-base-content);
+  }
+
   .badge-info {
     background-color: var(--color-info);
     color: var(--color-info-content);
@@ -76,6 +91,21 @@
     border-color: var(--color-tertiary);
   }
 
+  .badge-outline.badge-accent {
+    color: var(--color-accent);
+    border-color: var(--color-accent);
+  }
+
+  .badge-outline.badge-neutral {
+    color: var(--color-neutral);
+    border-color: var(--color-neutral);
+  }
+
+  .badge-outline.badge-base {
+    color: var(--color-base-content);
+    border-color: var(--color-base-content);
+  }
+
   .badge-outline.badge-info {
     color: var(--color-info);
     border-color: var(--color-info);
@@ -117,6 +147,21 @@
     color: var(--color-on-tertiary-container);
   }
 
+  .badge-soft.badge-accent {
+    background-color: color-mix(in oklch, var(--color-accent) 15%, var(--color-surface));
+    color: var(--color-on-surface);
+  }
+
+  .badge-soft.badge-neutral {
+    background-color: color-mix(in oklch, var(--color-neutral) 15%, var(--color-surface));
+    color: var(--color-on-surface);
+  }
+
+  .badge-soft.badge-base {
+    background-color: var(--color-base-200);
+    color: var(--color-base-content);
+  }
+
   .badge-soft.badge-info {
     background-color: var(--color-info-container);
     color: var(--color-on-info-container);

package/dist/components/button.css

@@ -93,6 +93,42 @@
     filter: none;
   }
 
+  .btn-accent {
+    --btn-text-color: var(--color-accent-content);
+    background-color: var(--color-accent);
+    border-color: var(--color-accent);
+  }
+
+  .btn-accent:hover {
+    background-color: color-mix(in oklch, var(--color-accent), black 10%);
+    border-color: color-mix(in oklch, var(--color-accent), black 10%);
+    filter: none;
+  }
+
+  .btn-neutral {
+    --btn-text-color: var(--color-neutral-content);
+    background-color: var(--color-neutral);
+    border-color: var(--color-neutral);
+  }
+
+  .btn-neutral:hover {
+    background-color: color-mix(in oklch, var(--color-neutral), black 10%);
+    border-color: color-mix(in oklch, var(--color-neutral), black 10%);
+    filter: none;
+  }
+
+  .btn-base {
+    --btn-text-color: var(--color-base-content);
+    background-color: var(--color-base-100);
+    border-color: var(--color-base-100);
+  }
+
+  .btn-base:hover {
+    background-color: var(--color-base-200);
+    border-color: var(--color-base-200);
+    filter: none;
+  }
+
   /* Outline / Outlined Variant (.btn-outlined is an alias) */
   .btn-outline,
   .btn-outlined {
@@ -143,6 +179,42 @@
     background-color: var(--color-tertiary);
   }
 
+  .btn-outline.btn-accent,
+  .btn-outlined.btn-accent {
+    --btn-text-color: var(--color-accent);
+    border-color: currentColor;
+  }
+
+  .btn-outline.btn-accent:hover,
+  .btn-outlined.btn-accent:hover {
+    --btn-text-color: var(--color-accent-content);
+    background-color: var(--color-accent);
+  }
+
+  .btn-outline.btn-neutral,
+  .btn-outlined.btn-neutral {
+    --btn-text-color: var(--color-neutral);
+    border-color: currentColor;
+  }
+
+  .btn-outline.btn-neutral:hover,
+  .btn-outlined.btn-neutral:hover {
+    --btn-text-color: var(--color-neutral-content);
+    background-color: var(--color-neutral);
+  }
+
+  .btn-outline.btn-base,
+  .btn-outlined.btn-base {
+    --btn-text-color: var(--color-base-content);
+    border-color: currentColor;
+  }
+
+  .btn-outline.btn-base:hover,
+  .btn-outlined.btn-base:hover {
+    --btn-text-color: var(--color-base-content);
+    background-color: var(--color-base-100);
+  }
+
   .btn-outline.btn-info,
   .btn-outlined.btn-info {
     --btn-text-color: var(--color-info);
@@ -234,6 +306,24 @@
   .btn-ghost.btn-success { --btn-text-color: var(--color-success); }
   .btn-ghost.btn-warning { --btn-text-color: var(--color-warning); }
   .btn-ghost.btn-error   { --btn-text-color: var(--color-error); }
+  .btn-ghost.btn-accent  { --btn-text-color: var(--color-accent); }
+  .btn-ghost.btn-neutral { --btn-text-color: var(--color-neutral); }
+  .btn-ghost.btn-base    { --btn-text-color: var(--color-base-content); }
+
+  .btn-ghost.btn-accent:hover {
+    --btn-text-color: var(--color-accent);
+    background-color: color-mix(in oklch, var(--color-accent) 15%, var(--color-surface));
+  }
+
+  .btn-ghost.btn-neutral:hover {
+    --btn-text-color: var(--color-neutral);
+    background-color: color-mix(in oklch, var(--color-neutral) 15%, var(--color-surface));
+  }
+
+  .btn-ghost.btn-base:hover {
+    --btn-text-color: var(--color-base-content);
+    background-color: var(--color-base-200);
+  }
 
   .btn-ghost.btn-info:hover {
     --btn-text-color: var(--color-on-info-container);
@@ -298,6 +388,24 @@
   .btn-text.btn-success { --btn-text-color: var(--color-success); }
   .btn-text.btn-warning { --btn-text-color: var(--color-warning); }
   .btn-text.btn-error   { --btn-text-color: var(--color-error); }
+  .btn-text.btn-accent  { --btn-text-color: var(--color-accent); }
+  .btn-text.btn-neutral { --btn-text-color: var(--color-neutral); }
+  .btn-text.btn-base    { --btn-text-color: var(--color-base-content); }
+
+  .btn-text.btn-accent:hover {
+    --btn-text-color: var(--color-accent);
+    background-color: color-mix(in oklch, var(--color-accent) 15%, var(--color-surface));
+  }
+
+  .btn-text.btn-neutral:hover {
+    --btn-text-color: var(--color-neutral);
+    background-color: color-mix(in oklch, var(--color-neutral) 15%, var(--color-surface));
+  }
+
+  .btn-text.btn-base:hover {
+    --btn-text-color: var(--color-base-content);
+    background-color: var(--color-base-200);
+  }
 
   .btn-text.btn-info:hover {
     --btn-text-color: var(--color-on-info-container);
@@ -345,6 +453,21 @@
     background-color: var(--color-tertiary-container);
   }
 
+  .btn-tonal.btn-accent {
+    --btn-text-color: var(--color-on-surface);
+    background-color: color-mix(in oklch, var(--color-accent) 15%, var(--color-surface));
+  }
+
+  .btn-tonal.btn-neutral {
+    --btn-text-color: var(--color-on-surface);
+    background-color: color-mix(in oklch, var(--color-neutral) 15%, var(--color-surface));
+  }
+
+  .btn-tonal.btn-base {
+    --btn-text-color: var(--color-base-content);
+    background-color: var(--color-base-200);
+  }
+
   .btn-tonal.btn-info {
     --btn-text-color: var(--color-on-info-container);
     background-color: var(--color-info-container);

package/dist/components/card.css

@@ -198,6 +198,33 @@
     color: var(--color-on-error-container);
   }
 
+  .card-accent {
+    background-color: color-mix(in oklch, var(--color-accent) 15%, var(--color-surface));
+    color: var(--color-on-surface);
+  }
+
+  .card-accent .card-title {
+    color: var(--color-on-surface);
+  }
+
+  .card-neutral {
+    background-color: color-mix(in oklch, var(--color-neutral) 15%, var(--color-surface));
+    color: var(--color-on-surface);
+  }
+
+  .card-neutral .card-title {
+    color: var(--color-on-surface);
+  }
+
+  .card-base {
+    background-color: var(--color-base-200);
+    color: var(--color-base-content);
+  }
+
+  .card-base .card-title {
+    color: var(--color-base-content);
+  }
+
   /* Glass Effect */
   .card-glass {
     background-color: rgb(255 255 255 / 0.1);

package/dist/components/cascader.css

@@ -416,6 +416,27 @@
     box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-error) 10%, transparent);
   }
 
+  .cascader-accent .cascader-trigger {
+    color: var(--color-accent);
+  }
+  .cascader-accent .cascader-trigger:focus {
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-accent) 10%, transparent);
+  }
+
+  .cascader-neutral .cascader-trigger {
+    color: var(--color-neutral);
+  }
+  .cascader-neutral .cascader-trigger:focus {
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-neutral) 10%, transparent);
+  }
+
+  .cascader-base .cascader-trigger {
+    color: var(--color-base-content);
+  }
+  .cascader-base .cascader-trigger:focus {
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-base-content) 10%, transparent);
+  }
+
   /* Ghost Variant */
   .cascader-ghost .cascader-trigger {
     background-color: transparent;

package/dist/components/chat.css

@@ -162,6 +162,21 @@
     --chat-bubble-fg: var(--color-on-error-container);
   }
 
+  .chat-bubble-accent {
+    --chat-bubble-bg: color-mix(in oklch, var(--color-accent) 15%, var(--color-surface));
+    --chat-bubble-fg: var(--color-on-surface);
+  }
+
+  .chat-bubble-neutral {
+    --chat-bubble-bg: color-mix(in oklch, var(--color-neutral) 15%, var(--color-surface));
+    --chat-bubble-fg: var(--color-on-surface);
+  }
+
+  .chat-bubble-base {
+    --chat-bubble-bg: var(--color-base-200);
+    --chat-bubble-fg: var(--color-base-content);
+  }
+
   .chat-bubble-filled.chat-bubble-primary {
     --chat-bubble-bg: var(--color-primary);
     --chat-bubble-fg: var(--color-primary-content);
@@ -197,6 +212,21 @@
     --chat-bubble-fg: var(--color-error-content);
   }
 
+  .chat-bubble-filled.chat-bubble-accent {
+    --chat-bubble-bg: var(--color-accent);
+    --chat-bubble-fg: var(--color-accent-content);
+  }
+
+  .chat-bubble-filled.chat-bubble-neutral {
+    --chat-bubble-bg: var(--color-neutral);
+    --chat-bubble-fg: var(--color-neutral-content);
+  }
+
+  .chat-bubble-filled.chat-bubble-base {
+    --chat-bubble-bg: var(--color-base-100);
+    --chat-bubble-fg: var(--color-base-content);
+  }
+
   .chat-bubble-xs {
     padding: 0.375rem 0.625rem;
     font-size: 0.75rem;

package/dist/components/checkbox.css

@@ -178,6 +178,33 @@
     border-color: var(--color-info-content);
   }
 
+  .checkbox-accent {
+    --checkbox-color: var(--color-accent);
+  }
+
+  .checkbox-accent:checked::before,
+  .checkbox-accent:indeterminate::before {
+    border-color: var(--color-accent-content);
+  }
+
+  .checkbox-neutral {
+    --checkbox-color: var(--color-neutral);
+  }
+
+  .checkbox-neutral:checked::before,
+  .checkbox-neutral:indeterminate::before {
+    border-color: var(--color-neutral-content);
+  }
+
+  .checkbox-base {
+    --checkbox-color: var(--color-base-100);
+  }
+
+  .checkbox-base:checked::before,
+  .checkbox-base:indeterminate::before {
+    border-color: var(--color-base-content);
+  }
+
   /* Ghost Variant — borderless unchecked state */
   .checkbox-ghost {
     --checkbox-border-color: transparent;

package/dist/components/chip.css

@@ -70,6 +70,36 @@
     background-color: color-mix(in oklch, var(--color-tertiary), black 10%);
   }
 
+  .chip-accent {
+    background-color: var(--color-accent);
+    color: var(--color-accent-content);
+    border-color: var(--color-accent);
+  }
+
+  .chip-accent:hover {
+    background-color: color-mix(in oklch, var(--color-accent), black 10%);
+  }
+
+  .chip-neutral {
+    background-color: var(--color-neutral);
+    color: var(--color-neutral-content);
+    border-color: var(--color-neutral);
+  }
+
+  .chip-neutral:hover {
+    background-color: color-mix(in oklch, var(--color-neutral), black 10%);
+  }
+
+  .chip-base {
+    background-color: var(--color-base-100);
+    color: var(--color-base-content);
+    border-color: var(--color-base-100);
+  }
+
+  .chip-base:hover {
+    background-color: var(--color-base-200);
+  }
+
   .chip-info {
     background-color: var(--color-info);
     color: var(--color-info-content);
@@ -144,6 +174,30 @@
     background-color: var(--color-tertiary-container);
   }
 
+  .chip-outlined.chip-accent {
+    color: var(--color-accent);
+  }
+
+  .chip-outlined.chip-accent:hover {
+    background-color: color-mix(in oklch, var(--color-accent) 15%, var(--color-surface));
+  }
+
+  .chip-outlined.chip-neutral {
+    color: var(--color-neutral);
+  }
+
+  .chip-outlined.chip-neutral:hover {
+    background-color: color-mix(in oklch, var(--color-neutral) 15%, var(--color-surface));
+  }
+
+  .chip-outlined.chip-base {
+    color: var(--color-base-content);
+  }
+
+  .chip-outlined.chip-base:hover {
+    background-color: var(--color-base-200);
+  }
+
   .chip-outlined.chip-info {
     color: var(--color-info);
   }
@@ -197,6 +251,21 @@
     color: var(--color-on-tertiary-container);
   }
 
+  .chip-tonal.chip-accent {
+    background-color: color-mix(in oklch, var(--color-accent) 15%, var(--color-surface));
+    color: var(--color-on-surface);
+  }
+
+  .chip-tonal.chip-neutral {
+    background-color: color-mix(in oklch, var(--color-neutral) 15%, var(--color-surface));
+    color: var(--color-on-surface);
+  }
+
+  .chip-tonal.chip-base {
+    background-color: var(--color-base-200);
+    color: var(--color-base-content);
+  }
+
   .chip-tonal.chip-info {
     background-color: var(--color-info-container);
     color: var(--color-on-info-container);
@@ -236,6 +305,9 @@
   .chip-ghost.chip-success   { background-color: transparent; color: var(--color-success); }
   .chip-ghost.chip-warning   { background-color: transparent; color: var(--color-warning); }
   .chip-ghost.chip-error     { background-color: transparent; color: var(--color-error); }
+  .chip-ghost.chip-accent    { background-color: transparent; color: var(--color-accent); }
+  .chip-ghost.chip-neutral   { background-color: transparent; color: var(--color-neutral); }
+  .chip-ghost.chip-base      { background-color: transparent; color: var(--color-base-content); }
 
   .chip-ghost.chip-primary:hover   { background-color: var(--color-primary-container); }
   .chip-ghost.chip-secondary:hover { background-color: var(--color-secondary-container); }
@@ -244,6 +316,9 @@
   .chip-ghost.chip-success:hover   { background-color: var(--color-success-container); }
   .chip-ghost.chip-warning:hover   { background-color: var(--color-warning-container); }
   .chip-ghost.chip-error:hover     { background-color: var(--color-error-container); }
+  .chip-ghost.chip-accent:hover    { background-color: color-mix(in oklch, var(--color-accent) 15%, var(--color-surface)); }
+  .chip-ghost.chip-neutral:hover   { background-color: color-mix(in oklch, var(--color-neutral) 15%, var(--color-surface)); }
+  .chip-ghost.chip-base:hover      { background-color: var(--color-base-200); }
 
   /* Size Variants */
   .chip-sm {

package/dist/components/circle-menu.css

@@ -301,6 +301,30 @@
     --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 {