@duskmoon-dev/core 1.17.0 → 1.17.1

package/dist/components/index.css

@@ -144,6 +144,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 {
@@ -194,6 +230,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);
@@ -285,6 +357,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);
@@ -349,6 +439,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);
@@ -396,6 +504,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);
@@ -779,6 +902,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);
@@ -906,6 +1056,9 @@
   .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 {
@@ -964,6 +1117,9 @@
   .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 {
@@ -1167,6 +1323,33 @@
     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;
@@ -1283,6 +1466,30 @@
     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;
@@ -1410,6 +1617,38 @@
     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;
@@ -1650,6 +1889,56 @@
     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;
@@ -2784,6 +3073,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;
@@ -2894,6 +3198,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);
@@ -2935,6 +3254,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);
@@ -2976,6 +3310,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);
@@ -3200,6 +3549,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);
@@ -3235,6 +3599,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;
@@ -3515,6 +3894,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);
@@ -3589,6 +3998,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);
   }
@@ -3642,6 +4075,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);
@@ -3681,6 +4129,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); }
@@ -3689,6 +4140,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 {
@@ -4471,6 +4925,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;
@@ -4919,6 +5394,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;
@@ -5150,6 +5646,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;
@@ -5970,6 +6493,48 @@
     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,
@@ -6378,6 +6943,27 @@
     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;
@@ -7391,11 +7977,32 @@
     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 */
@@ -7633,6 +8240,30 @@
     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;
@@ -7851,6 +8482,30 @@
     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); }
@@ -8035,6 +8690,18 @@
     --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;
@@ -8228,6 +8895,18 @@
     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;
@@ -8277,6 +8956,9 @@
   .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. */
@@ -8293,6 +8975,9 @@
   .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 {
@@ -8496,6 +9181,21 @@
     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;
@@ -8639,6 +9339,9 @@
   .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 {
@@ -8658,6 +9361,9 @@
   .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 {
@@ -9091,6 +9797,69 @@
     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;
@@ -9158,6 +9927,9 @@
   .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;
@@ -9416,6 +10188,24 @@
     --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;
@@ -9633,6 +10423,9 @@
   .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 {
@@ -9676,6 +10469,9 @@
   .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
@@ -10175,6 +10971,30 @@
     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;
@@ -10192,6 +11012,9 @@
   .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 {
@@ -10630,6 +11453,33 @@
     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 {
@@ -11140,6 +11990,27 @@
     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;
@@ -11357,6 +12228,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);
@@ -11393,6 +12282,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;
@@ -11433,6 +12337,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;
@@ -11446,6 +12365,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 {
@@ -11728,6 +12650,18 @@
     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;
@@ -12375,6 +13309,21 @@
     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);
@@ -12658,6 +13607,30 @@
     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);
@@ -12701,6 +13674,24 @@
     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. */
@@ -12722,6 +13713,9 @@
   .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 {
@@ -13081,6 +14075,69 @@
     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;
@@ -13517,6 +14574,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);
@@ -13913,6 +15039,21 @@
     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 {
@@ -14660,6 +15801,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 {
@@ -16392,10 +17557,16 @@
 
   .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);
@@ -16468,6 +17639,30 @@
     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;