@duskmoon-dev/core 1.17.0 → 1.17.2

package/dist/index.css

@@ -486,7 +486,7 @@ html {
   --theme-pair: "moonlight";
   --theme-description: "Warm amber/coral";
   --color-primary: oklch(72% 0.17 75);
-  --color-primary-content: oklch(100% 0 0);
+  --color-primary-content: oklch(25% 0.03 95.91);
   --color-primary-container: oklch(95% 0.035 95.91);
   --color-on-primary-container: oklch(25% 0.03 95.91);
   --color-secondary: oklch(62% 0.19 20);
@@ -651,7 +651,7 @@ html {
   --theme-pair: "moonlight";
   --theme-description: "Warm amber/coral";
   --color-primary: oklch(72% 0.17 75);
-  --color-primary-content: oklch(100% 0 0);
+  --color-primary-content: oklch(25% 0.03 95.91);
   --color-primary-container: oklch(95% 0.035 95.91);
   --color-on-primary-container: oklch(25% 0.03 95.91);
   --color-secondary: oklch(62% 0.19 20);
@@ -1119,6 +1119,42 @@ html {
     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 {
@@ -1169,6 +1205,42 @@ html {
     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);
@@ -1260,6 +1332,24 @@ html {
   .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);
@@ -1324,6 +1414,24 @@ html {
   .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);
@@ -1371,6 +1479,21 @@ html {
     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);
@@ -1754,6 +1877,33 @@ html {
     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);
@@ -1881,6 +2031,9 @@ html {
   .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 {
@@ -1939,6 +2092,9 @@ html {
   .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 {
@@ -2142,6 +2298,33 @@ html {
     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;
@@ -2258,6 +2441,30 @@ html {
     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;
@@ -2385,6 +2592,38 @@ html {
     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;
@@ -2625,6 +2864,56 @@ html {
     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;
@@ -3759,6 +4048,21 @@ html {
     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;
@@ -3869,6 +4173,21 @@ html {
     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);
@@ -3910,6 +4229,21 @@ html {
     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);
@@ -3951,6 +4285,21 @@ html {
     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);
@@ -4175,6 +4524,21 @@ html {
     --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);
@@ -4210,6 +4574,21 @@ html {
     --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;
@@ -4490,6 +4869,36 @@ html {
     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);
@@ -4564,6 +4973,30 @@ html {
     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);
   }
@@ -4617,6 +5050,21 @@ html {
     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);
@@ -4656,6 +5104,9 @@ html {
   .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); }
@@ -4664,6 +5115,9 @@ html {
   .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 {
@@ -5446,6 +5900,27 @@ html {
     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;
@@ -5894,6 +6369,27 @@ html {
     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;
@@ -6125,6 +6621,33 @@ html {
     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;
@@ -6945,6 +7468,48 @@ html {
     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,
@@ -7353,6 +7918,27 @@ html {
     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;
@@ -8366,11 +8952,32 @@ html {
     box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-warning) 10%, transparent);
   }
 
-  .multi-select-error .multi-select-trigger {
-    color: var(--color-error);
+  .multi-select-error .multi-select-trigger {
+    color: var(--color-error);
+  }
+  .multi-select-error .multi-select-trigger:focus-within {
+    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-error .multi-select-trigger:focus-within {
-    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-error) 10%, transparent);
+  .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 */
@@ -8608,6 +9215,30 @@ html {
     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;
@@ -8826,6 +9457,30 @@ html {
     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); }
@@ -9010,6 +9665,18 @@ html {
     --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;
@@ -9203,6 +9870,18 @@ html {
     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;
@@ -9252,6 +9931,9 @@ html {
   .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. */
@@ -9268,6 +9950,9 @@ html {
   .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 {
@@ -9471,6 +10156,21 @@ html {
     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;
@@ -9614,6 +10314,9 @@ html {
   .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 {
@@ -9633,6 +10336,9 @@ html {
   .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 {
@@ -10066,6 +10772,69 @@ html {
     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;
@@ -10133,6 +10902,9 @@ html {
   .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;
@@ -10391,6 +11163,24 @@ html {
     --switch-container-color: var(--color-info-container);
   }
 
+  .switch-accent {
+    --switch-color: var(--color-accent);
+    --switch-content-color: var(--color-accent-content);
+    --switch-container-color: color-mix(in oklch, var(--color-accent) 20%, var(--color-surface));
+  }
+
+  .switch-neutral {
+    --switch-color: var(--color-neutral);
+    --switch-content-color: var(--color-neutral-content);
+    --switch-container-color: color-mix(in oklch, var(--color-neutral) 20%, var(--color-surface));
+  }
+
+  .switch-base {
+    --switch-color: var(--color-base-100);
+    --switch-content-color: var(--color-base-content);
+    --switch-container-color: color-mix(in oklch, var(--color-base-100) 20%, var(--color-surface));
+  }
+
   /* Ghost Variant — borderless track */
   .switch-ghost {
     --switch-border-color: transparent;
@@ -10608,6 +11398,9 @@ html {
   .textarea-filled.textarea-success:focus-visible { border-bottom-color: var(--color-success); }
   .textarea-filled.textarea-warning:focus-visible { border-bottom-color: var(--color-warning); }
   .textarea-filled.textarea-error:focus-visible { border-bottom-color: var(--color-error); }
+  .textarea-filled.textarea-accent:focus-visible { border-bottom-color: var(--color-accent); }
+  .textarea-filled.textarea-neutral:focus-visible { border-bottom-color: var(--color-neutral); }
+  .textarea-filled.textarea-base:focus-visible { border-bottom-color: var(--color-base-content); }
 
   /* Outlined Variant (default) */
   .textarea-outlined {
@@ -10651,6 +11444,9 @@ html {
   .textarea-success { color: var(--color-success); }
   .textarea-warning { color: var(--color-warning); }
   .textarea-error   { color: var(--color-error); }
+  .textarea-accent  { color: var(--color-accent); }
+  .textarea-neutral { color: var(--color-neutral); }
+  .textarea-base    { color: var(--color-base-content); }
 
   /* ============================================
    * SIZE VARIANTS
@@ -11150,6 +11946,30 @@ html {
     border-color: var(--color-error);
   }
 
+  /* Accent variant */
+  .toggle-btn-accent.toggle-btn-active,
+  .toggle-btn-accent.active {
+    color: var(--color-on-surface);
+    background-color: color-mix(in oklch, var(--color-accent) 15%, var(--color-surface));
+    border-color: var(--color-accent);
+  }
+
+  /* Neutral variant */
+  .toggle-btn-neutral.toggle-btn-active,
+  .toggle-btn-neutral.active {
+    color: var(--color-on-surface);
+    background-color: color-mix(in oklch, var(--color-neutral) 15%, var(--color-surface));
+    border-color: var(--color-neutral);
+  }
+
+  /* Base variant */
+  .toggle-btn-base.toggle-btn-active,
+  .toggle-btn-base.active {
+    color: var(--color-base-content);
+    background-color: var(--color-base-200);
+    border-color: var(--color-base-content);
+  }
+
   /* Ghost Variant */
   .toggle-btn-ghost {
     background-color: transparent;
@@ -11167,6 +11987,9 @@ html {
   .toggle-btn-ghost.toggle-btn-success   { color: var(--color-success); }
   .toggle-btn-ghost.toggle-btn-warning   { color: var(--color-warning); }
   .toggle-btn-ghost.toggle-btn-error     { color: var(--color-error); }
+  .toggle-btn-ghost.toggle-btn-accent    { color: var(--color-accent); }
+  .toggle-btn-ghost.toggle-btn-neutral   { color: var(--color-neutral); }
+  .toggle-btn-ghost.toggle-btn-base      { color: var(--color-base-content); }
 
   /* Focus state */
   .toggle-btn:focus-visible {
@@ -11605,6 +12428,33 @@ html {
     box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-error) 10%, transparent);
   }
 
+  .time-input-accent .time-input-field,
+  .time-input-accent .time-input-segments {
+    color: var(--color-accent);
+  }
+
+  .time-input-accent .time-input-field:focus {
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-accent) 10%, transparent);
+  }
+
+  .time-input-neutral .time-input-field,
+  .time-input-neutral .time-input-segments {
+    color: var(--color-neutral);
+  }
+
+  .time-input-neutral .time-input-field:focus {
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-neutral) 10%, transparent);
+  }
+
+  .time-input-base .time-input-field,
+  .time-input-base .time-input-segments {
+    color: var(--color-base-content);
+  }
+
+  .time-input-base .time-input-field:focus {
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-base-content) 10%, transparent);
+  }
+
   /* Ghost Variant */
   .time-input-ghost .time-input-field,
   .time-input-ghost .time-input-segments {
@@ -12115,6 +12965,27 @@ html {
     box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-error) 10%, transparent);
   }
 
+  .tree-select-accent .tree-select-trigger {
+    color: var(--color-accent);
+  }
+  .tree-select-accent .tree-select-trigger:focus {
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-accent) 10%, transparent);
+  }
+
+  .tree-select-neutral .tree-select-trigger {
+    color: var(--color-neutral);
+  }
+  .tree-select-neutral .tree-select-trigger:focus {
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-neutral) 10%, transparent);
+  }
+
+  .tree-select-base .tree-select-trigger {
+    color: var(--color-base-content);
+  }
+  .tree-select-base .tree-select-trigger:focus {
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-base-content) 10%, transparent);
+  }
+
   /* Ghost Variant */
   .tree-select-ghost .tree-select-trigger {
     background-color: transparent;
@@ -12332,6 +13203,24 @@ html {
     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);
@@ -12368,6 +13257,21 @@ html {
     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;
@@ -12408,6 +13312,21 @@ html {
     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;
@@ -12421,6 +13340,9 @@ html {
   .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 {
@@ -12703,6 +13625,18 @@ html {
     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;
@@ -13350,6 +14284,21 @@ html {
     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);
@@ -13633,6 +14582,30 @@ html {
     color: var(--color-tertiary);
   }
 
+  .toast-accent {
+    border-color: var(--color-accent);
+  }
+
+  .toast-accent .toast-icon {
+    color: var(--color-accent);
+  }
+
+  .toast-neutral {
+    border-color: var(--color-neutral);
+  }
+
+  .toast-neutral .toast-icon {
+    color: var(--color-neutral);
+  }
+
+  .toast-base {
+    border-color: var(--color-base-content);
+  }
+
+  .toast-base .toast-icon {
+    color: var(--color-base-content);
+  }
+
   /* Filled Variants */
   .toast-filled.toast-info {
     background-color: var(--color-info-container);
@@ -13676,6 +14649,24 @@ html {
     color: var(--color-on-tertiary-container);
   }
 
+  .toast-filled.toast-accent {
+    background-color: color-mix(in oklch, var(--color-accent) 15%, var(--color-surface));
+    border-color: transparent;
+    color: var(--color-on-surface);
+  }
+
+  .toast-filled.toast-neutral {
+    background-color: color-mix(in oklch, var(--color-neutral) 15%, var(--color-surface));
+    border-color: transparent;
+    color: var(--color-on-surface);
+  }
+
+  .toast-filled.toast-base {
+    background-color: var(--color-base-200);
+    border-color: transparent;
+    color: var(--color-base-content);
+  }
+
   /* Filled variant sub-element color inheritance fix.
      .toast-title and .toast-message have explicit color rules that would otherwise
      override the filled variant's inherited on-container color. */
@@ -13697,6 +14688,9 @@ html {
   .toast-ghost.toast-success   { color: var(--color-success); }
   .toast-ghost.toast-warning   { color: var(--color-warning); }
   .toast-ghost.toast-error     { color: var(--color-error); }
+  .toast-ghost.toast-accent    { color: var(--color-accent); }
+  .toast-ghost.toast-neutral   { color: var(--color-neutral); }
+  .toast-ghost.toast-base      { color: var(--color-base-content); }
 
   .toast-ghost .toast-title,
   .toast-ghost .toast-message {
@@ -14056,6 +15050,69 @@ html {
     border-right-color: var(--color-warning);
   }
 
+  .tooltip.tooltip-accent .tooltip-content {
+    background-color: var(--color-accent);
+    color: var(--color-accent-content);
+  }
+
+  .tooltip.tooltip-accent .tooltip-content::before {
+    border-top-color: var(--color-accent);
+  }
+
+  .tooltip.tooltip-accent.tooltip-bottom .tooltip-content::before {
+    border-bottom-color: var(--color-accent);
+  }
+
+  .tooltip.tooltip-accent.tooltip-left .tooltip-content::before {
+    border-left-color: var(--color-accent);
+  }
+
+  .tooltip.tooltip-accent.tooltip-right .tooltip-content::before {
+    border-right-color: var(--color-accent);
+  }
+
+  .tooltip.tooltip-neutral .tooltip-content {
+    background-color: var(--color-neutral);
+    color: var(--color-neutral-content);
+  }
+
+  .tooltip.tooltip-neutral .tooltip-content::before {
+    border-top-color: var(--color-neutral);
+  }
+
+  .tooltip.tooltip-neutral.tooltip-bottom .tooltip-content::before {
+    border-bottom-color: var(--color-neutral);
+  }
+
+  .tooltip.tooltip-neutral.tooltip-left .tooltip-content::before {
+    border-left-color: var(--color-neutral);
+  }
+
+  .tooltip.tooltip-neutral.tooltip-right .tooltip-content::before {
+    border-right-color: var(--color-neutral);
+  }
+
+  .tooltip.tooltip-base .tooltip-content {
+    background-color: var(--color-base-100);
+    color: var(--color-base-content);
+  }
+
+  .tooltip.tooltip-base .tooltip-content::before {
+    border-top-color: var(--color-base-100);
+  }
+
+  .tooltip.tooltip-base.tooltip-bottom .tooltip-content::before {
+    border-bottom-color: var(--color-base-100);
+  }
+
+  .tooltip.tooltip-base.tooltip-left .tooltip-content::before {
+    border-left-color: var(--color-base-100);
+  }
+
+  .tooltip.tooltip-base.tooltip-right .tooltip-content::before {
+    border-right-color: var(--color-base-100);
+  }
+
   /* Multi-line Tooltip */
   .tooltip-multiline .tooltip-content {
     white-space: normal;
@@ -14492,6 +15549,75 @@ html {
     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);
@@ -14888,6 +16014,21 @@ html {
     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 {
@@ -15635,6 +16776,30 @@ html {
     --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 {
@@ -17367,10 +18532,16 @@ html {
 
   .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);
@@ -17443,6 +18614,30 @@ html {
     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;