@duskmoon-dev/core 1.16.1 → 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);
@@ -2920,119 +3239,586 @@
     border: 1px solid currentColor;
   }
 
-  .badge-outline.badge-primary {
-    color: var(--color-primary);
-    border-color: var(--color-primary);
+  .badge-outline.badge-primary {
+    color: var(--color-primary);
+    border-color: var(--color-primary);
+  }
+
+  .badge-outline.badge-secondary {
+    color: var(--color-secondary);
+    border-color: var(--color-secondary);
+  }
+
+  .badge-outline.badge-tertiary {
+    color: var(--color-tertiary);
+    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);
+  }
+
+  .badge-outline.badge-success {
+    color: var(--color-success);
+    border-color: var(--color-success);
+  }
+
+  .badge-outline.badge-warning {
+    color: var(--color-warning);
+    border-color: var(--color-warning);
+  }
+
+  .badge-outline.badge-error {
+    color: var(--color-error);
+    border-color: var(--color-error);
+  }
+
+  /* Soft/Tonal Variants */
+  .badge-soft {
+    background-color: var(--color-primary-container);
+    color: var(--color-on-primary-container);
+  }
+
+  .badge-soft.badge-primary {
+    background-color: var(--color-primary-container);
+    color: var(--color-on-primary-container);
+  }
+
+  .badge-soft.badge-secondary {
+    background-color: var(--color-secondary-container);
+    color: var(--color-on-secondary-container);
+  }
+
+  .badge-soft.badge-tertiary {
+    background-color: var(--color-tertiary-container);
+    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);
+  }
+
+  .badge-soft.badge-success {
+    background-color: var(--color-success-container);
+    color: var(--color-on-success-container);
+  }
+
+  .badge-soft.badge-warning {
+    background-color: var(--color-warning-container);
+    color: var(--color-on-warning-container);
+  }
+
+  .badge-soft.badge-error {
+    background-color: var(--color-error-container);
+    color: var(--color-on-error-container);
+  }
+
+  /* Size Variants */
+  .badge-sm {
+    padding: 0 0.375rem;
+    font-size: 0.625rem;
+    line-height: 0.875rem;
+  }
+
+  .badge-lg {
+    padding: 0.25rem 0.75rem;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
+
+  /* Badge with Indicator Dot */
+  .badge-indicator {
+    position: relative;
+    padding-left: 1rem;
+  }
+
+  .badge-indicator::before {
+    content: '';
+    position: absolute;
+    left: 0.375rem;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 0.375rem;
+    height: 0.375rem;
+    border-radius: var(--radius-full);
+    background-color: currentColor;
+  }
+
+  /* Empty Badge (just a dot) */
+  .badge-dot {
+    width: 0.5rem;
+    height: 0.5rem;
+    padding: 0;
+    border-radius: var(--radius-full);
+  }
+}
+
+/**
+ * Chat Component Styles
+ * DuskMoonUI - LLM-oriented chat primitives
+ */
+
+@layer components {
+  .chat {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    column-gap: 0.75rem;
+    align-items: end;
+    padding: 0.25rem 0;
+  }
+
+  .chat-start {
+    grid-template-columns: auto minmax(0, 1fr);
+  }
+
+  .chat-end {
+    grid-template-columns: minmax(0, 1fr) auto;
+  }
+
+  .chat-avatar {
+    grid-row: 1 / span 999;
+    grid-column: 1;
+    align-self: start;
+    justify-self: start;
+  }
+
+  .chat-end .chat-avatar {
+    grid-column: 2;
+    justify-self: end;
+  }
+
+  .chat > :not(.chat-avatar) {
+    grid-column: 2;
+    justify-self: start;
+    max-width: 100%;
+    margin-bottom: 0.25rem;
+  }
+
+  .chat-end > :not(.chat-avatar) {
+    grid-column: 1;
+    justify-self: end;
+  }
+
+  .chat-header,
+  .chat-footer {
+    color: var(--color-on-surface-variant);
+    font-size: 0.75rem;
+    line-height: 1rem;
+  }
+
+  .chat-header {
+    margin-bottom: 0.125rem;
+  }
+
+  .chat-footer {
+    margin-top: 0.125rem;
+    margin-bottom: 0;
+  }
+
+  .chat-bubble {
+    --chat-bubble-bg: var(--color-surface-container-highest);
+    --chat-bubble-fg: var(--color-on-surface);
+
+    position: relative;
+    max-width: min(80ch, 100%);
+    padding: 0.625rem 0.875rem;
+    border-radius: 1rem;
+    background-color: var(--chat-bubble-bg);
+    color: var(--chat-bubble-fg);
+    box-shadow: inset 0 0 0 1px var(--color-outline-variant);
+    font-size: 0.875rem;
+    line-height: 1.45;
+    overflow-wrap: anywhere;
+    word-break: break-word;
+  }
+
+  .chat-start .chat-bubble::before,
+  .chat-end .chat-bubble::before,
+  .chat-start .chat-bubble::after,
+  .chat-end .chat-bubble::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    clip-path: polygon(0 0, 100% 0, 100% 100%);
+  }
+
+  .chat-start .chat-bubble::before {
+    left: -0.625rem;
+    width: 1rem;
+    height: 1rem;
+    background-color: var(--color-outline-variant);
+  }
+
+  .chat-start .chat-bubble::after {
+    left: -0.5rem;
+    width: calc(1rem - 2px);
+    height: calc(1rem - 2px);
+    top: 1px;
+    background-color: var(--chat-bubble-bg);
+  }
+
+  .chat-start .chat-bubble {
+    border-top-left-radius: 0;
+  }
+
+  .chat-end .chat-bubble::before {
+    right: -0.625rem;
+    width: 1rem;
+    height: 1rem;
+    background-color: var(--color-outline-variant);
+    transform: scaleX(-1);
+  }
+
+  .chat-end .chat-bubble::after {
+    right: -0.5rem;
+    width: calc(1rem - 2px);
+    height: calc(1rem - 2px);
+    top: 1px;
+    background-color: var(--chat-bubble-bg);
+    transform: scaleX(-1);
+  }
+
+  .chat-end .chat-bubble {
+    border-top-right-radius: 0;
+  }
+
+  .chat-bubble-primary {
+    --chat-bubble-bg: var(--color-primary-container);
+    --chat-bubble-fg: var(--color-on-primary-container);
+  }
+
+  .chat-bubble-secondary {
+    --chat-bubble-bg: var(--color-secondary-container);
+    --chat-bubble-fg: var(--color-on-secondary-container);
+  }
+
+  .chat-bubble-tertiary {
+    --chat-bubble-bg: var(--color-tertiary-container);
+    --chat-bubble-fg: var(--color-on-tertiary-container);
+  }
+
+  .chat-bubble-info {
+    --chat-bubble-bg: var(--color-info-container);
+    --chat-bubble-fg: var(--color-on-info-container);
+  }
+
+  .chat-bubble-success {
+    --chat-bubble-bg: var(--color-success-container);
+    --chat-bubble-fg: var(--color-on-success-container);
+  }
+
+  .chat-bubble-warning {
+    --chat-bubble-bg: var(--color-warning-container);
+    --chat-bubble-fg: var(--color-on-warning-container);
+  }
+
+  .chat-bubble-error {
+    --chat-bubble-bg: var(--color-error-container);
+    --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);
+  }
+
+  .chat-bubble-filled.chat-bubble-secondary {
+    --chat-bubble-bg: var(--color-secondary);
+    --chat-bubble-fg: var(--color-secondary-content);
+  }
+
+  .chat-bubble-filled.chat-bubble-tertiary {
+    --chat-bubble-bg: var(--color-tertiary);
+    --chat-bubble-fg: var(--color-tertiary-content);
+  }
+
+  .chat-bubble-filled.chat-bubble-info {
+    --chat-bubble-bg: var(--color-info);
+    --chat-bubble-fg: var(--color-info-content);
+  }
+
+  .chat-bubble-filled.chat-bubble-success {
+    --chat-bubble-bg: var(--color-success);
+    --chat-bubble-fg: var(--color-success-content);
+  }
+
+  .chat-bubble-filled.chat-bubble-warning {
+    --chat-bubble-bg: var(--color-warning);
+    --chat-bubble-fg: var(--color-warning-content);
+  }
+
+  .chat-bubble-filled.chat-bubble-error {
+    --chat-bubble-bg: var(--color-error);
+    --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;
+  }
+
+  .chat-bubble-sm {
+    padding: 0.5rem 0.75rem;
+    font-size: 0.8125rem;
+  }
+
+  .chat-bubble-md {
+    padding: 0.625rem 0.875rem;
+    font-size: 0.875rem;
   }
 
-  .badge-outline.badge-secondary {
-    color: var(--color-secondary);
-    border-color: var(--color-secondary);
+  .chat-bubble-lg {
+    padding: 0.875rem 1.125rem;
+    font-size: 1rem;
   }
 
-  .badge-outline.badge-tertiary {
-    color: var(--color-tertiary);
-    border-color: var(--color-tertiary);
+  .chat-reasoning,
+  .chat-tool {
+    width: min(80ch, 100%);
+    border: 1px solid var(--color-outline);
+    border-radius: var(--radius-sm);
+    background-color: var(--color-surface-container-low);
+    color: var(--color-on-surface);
+    font-size: 0.8125rem;
+    line-height: 1.45;
+    overflow: hidden;
   }
 
-  .badge-outline.badge-info {
-    color: var(--color-info);
-    border-color: var(--color-info);
+  .chat-reasoning > summary,
+  .chat-tool > summary {
+    cursor: pointer;
+    list-style-position: inside;
   }
 
-  .badge-outline.badge-success {
-    color: var(--color-success);
-    border-color: var(--color-success);
+  .chat-reasoning > summary {
+    padding: 0.5rem 0.75rem;
+    color: var(--color-on-surface-variant);
+    font-weight: 500;
   }
 
-  .badge-outline.badge-warning {
-    color: var(--color-warning);
-    border-color: var(--color-warning);
+  .chat-reasoning > :not(summary) {
+    padding: 0 0.75rem 0.75rem;
+    color: var(--color-on-surface-variant);
+    font-style: italic;
   }
 
-  .badge-outline.badge-error {
-    color: var(--color-error);
-    border-color: var(--color-error);
+  .chat-tool-header {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    color: var(--color-on-surface);
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+    font-size: 0.75rem;
+    font-weight: 600;
   }
 
-  /* Soft/Tonal Variants */
-  .badge-soft {
-    background-color: var(--color-primary-container);
-    color: var(--color-on-primary-container);
+  .chat-tool-status {
+    display: inline-flex;
+    align-items: center;
+    min-height: 1.25rem;
+    padding: 0.125rem 0.5rem;
+    border-radius: 999px;
+    margin-left: auto;
+    font-family: inherit;
+    font-size: 0.6875rem;
+    font-weight: 600;
+    line-height: 1;
   }
 
-  .badge-soft.badge-primary {
-    background-color: var(--color-primary-container);
-    color: var(--color-on-primary-container);
+  .chat-tool-call,
+  .chat-tool-result {
+    padding: 0.75rem;
+    border-top: 1px solid var(--color-outline);
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+    font-size: 0.75rem;
+    overflow-x: auto;
   }
 
-  .badge-soft.badge-secondary {
-    background-color: var(--color-secondary-container);
-    color: var(--color-on-secondary-container);
+  .chat-tool-result {
+    background-color: color-mix(in oklch, var(--color-surface-container) 65%, transparent);
   }
 
-  .badge-soft.badge-tertiary {
-    background-color: var(--color-tertiary-container);
-    color: var(--color-on-tertiary-container);
+  .chat-tool-pending .chat-tool-status {
+    border: 1px solid var(--color-outline);
+    color: var(--color-on-surface-variant);
   }
 
-  .badge-soft.badge-info {
+  .chat-tool-running .chat-tool-status {
     background-color: var(--color-info-container);
     color: var(--color-on-info-container);
   }
 
-  .badge-soft.badge-success {
-    background-color: var(--color-success-container);
-    color: var(--color-on-success-container);
+  .chat-tool-running .chat-tool-header::before {
+    content: "";
+    width: 0.875rem;
+    height: 0.875rem;
+    border: 2px solid currentColor;
+    border-top-color: transparent;
+    border-radius: 999px;
+    animation: chat-tool-spin 800ms linear infinite;
   }
 
-  .badge-soft.badge-warning {
-    background-color: var(--color-warning-container);
-    color: var(--color-on-warning-container);
+  .chat-tool-success .chat-tool-status {
+    background-color: var(--color-success-container);
+    color: var(--color-on-success-container);
   }
 
-  .badge-soft.badge-error {
+  .chat-tool-error .chat-tool-status {
     background-color: var(--color-error-container);
     color: var(--color-on-error-container);
   }
 
-  /* Size Variants */
-  .badge-sm {
-    padding: 0 0.375rem;
-    font-size: 0.625rem;
-    line-height: 0.875rem;
+  .chat-typing {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    min-width: 2.25rem;
   }
 
-  .badge-lg {
-    padding: 0.25rem 0.75rem;
-    font-size: 0.875rem;
-    line-height: 1.25rem;
+  .chat-typing::before,
+  .chat-typing::after,
+  .chat-typing span {
+    content: "";
+    width: 0.375rem;
+    height: 0.375rem;
+    border-radius: 999px;
+    background-color: currentColor;
+    opacity: 0.55;
+    animation: chat-typing-dot 1.4s ease-in-out infinite;
   }
 
-  /* Badge with Indicator Dot */
-  .badge-indicator {
-    position: relative;
-    padding-left: 1rem;
+  .chat-typing span {
+    animation-delay: 150ms;
   }
 
-  .badge-indicator::before {
-    content: '';
-    position: absolute;
-    left: 0.375rem;
-    top: 50%;
-    transform: translateY(-50%);
-    width: 0.375rem;
-    height: 0.375rem;
-    border-radius: var(--radius-full);
+  .chat-typing::after {
+    animation-delay: 300ms;
+  }
+
+  .chat-bubble-streaming::after {
+    content: "";
+    display: inline-block;
+    width: 1px;
+    height: 1em;
+    margin-left: 0.25rem;
     background-color: currentColor;
+    vertical-align: -0.125em;
+    animation: chat-stream-caret 1s step-end infinite;
   }
 
-  /* Empty Badge (just a dot) */
-  .badge-dot {
-    width: 0.5rem;
-    height: 0.5rem;
-    padding: 0;
-    border-radius: var(--radius-full);
+  .chat-reasoning > summary:focus-visible,
+  .chat-tool > summary:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
+  }
+
+  @keyframes chat-typing-dot {
+    0%,
+    80%,
+    100% {
+      opacity: 0.45;
+      transform: translateY(0);
+    }
+
+    40% {
+      opacity: 1;
+      transform: translateY(-0.1875rem);
+    }
+  }
+
+  @keyframes chat-stream-caret {
+    0%,
+    49% {
+      opacity: 1;
+    }
+
+    50%,
+    100% {
+      opacity: 0;
+    }
+  }
+
+  @keyframes chat-tool-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .chat-typing::before,
+    .chat-typing::after,
+    .chat-typing span,
+    .chat-bubble-streaming::after,
+    .chat-tool-running .chat-tool-header::before {
+      animation: none;
+    }
+
+    .chat-bubble-streaming::after {
+      opacity: 1;
+    }
   }
 }
 
@@ -3108,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);
@@ -3182,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);
   }
@@ -3235,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);
@@ -3274,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); }
@@ -3282,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 {
@@ -4064,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;
@@ -4512,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;
@@ -4743,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;
@@ -5563,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,
@@ -5971,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;
@@ -6984,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 */
@@ -7226,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;
@@ -7444,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); }
@@ -7628,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;
@@ -7821,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;
@@ -7870,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. */
@@ -7886,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 {
@@ -8089,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;
@@ -8232,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 {
@@ -8251,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 {
@@ -8684,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;
@@ -8751,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;
@@ -9009,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;
@@ -9226,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 {
@@ -9269,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
@@ -9768,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;
@@ -9785,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 {
@@ -10223,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 {
@@ -10733,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;
@@ -10950,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);
@@ -10986,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;
@@ -11026,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;
@@ -11039,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 {
@@ -11321,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;
@@ -11968,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);
@@ -12251,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);
@@ -12294,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. */
@@ -12315,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 {
@@ -12674,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;
@@ -13110,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);
@@ -13506,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 {
@@ -14253,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 {
@@ -15985,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);
@@ -16061,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;