@sigx/zero-daisyui 0.4.0 → 0.6.0

package/dist/css/index.css

@@ -16,9 +16,9 @@
     :where(:root) {
         color-scheme: light dark;
         --color-primary: light-dark(oklch(45% 0.24 277.023), oklch(58% 0.233 277.117));
-        --color-primary-content: light-dark(oklch(93% 0.034 272.788), oklch(96% 0.018 272.314));
+        --color-primary-content: light-dark(oklch(93% 0.034 272.788), oklch(98.9% 0.005 272.314));
         --color-secondary: oklch(65% 0.241 354.308);
-        --color-secondary-content: oklch(94% 0.028 342.258);
+        --color-secondary-content: oklch(24.2% 0.028 342.258);
         --color-accent: oklch(77% 0.152 181.912);
         --color-accent-content: oklch(38% 0.063 188.416);
         --color-neutral: oklch(14% 0.005 285.823);
@@ -35,14 +35,14 @@
         --color-base-200: light-dark(oklch(98% 0 0), oklch(23.26% 0.014 253.1));
         --color-base-300: light-dark(oklch(95% 0 0), oklch(21.15% 0.012 254.09));
         --color-base-content: light-dark(oklch(21% 0.006 285.885), oklch(97.807% 0.029 256.847));
-        --color-primary-soft: color-mix(in oklab, var(--color-primary) 12%, var(--color-base-100));
-        --color-secondary-soft: color-mix(in oklab, var(--color-secondary) 12%, var(--color-base-100));
-        --color-accent-soft: color-mix(in oklab, var(--color-accent) 12%, var(--color-base-100));
-        --color-neutral-soft: color-mix(in oklab, var(--color-neutral) 12%, var(--color-base-100));
-        --color-info-soft: color-mix(in oklab, var(--color-info) 12%, var(--color-base-100));
-        --color-success-soft: color-mix(in oklab, var(--color-success) 12%, var(--color-base-100));
-        --color-warning-soft: color-mix(in oklab, var(--color-warning) 12%, var(--color-base-100));
-        --color-error-soft: color-mix(in oklab, var(--color-error) 12%, var(--color-base-100));
+        --color-primary-soft: light-dark(color-mix(in oklab, var(--color-primary) 12%, var(--color-base-100)), color-mix(in oklab, var(--color-primary) 16%, var(--color-base-100)));
+        --color-secondary-soft: light-dark(color-mix(in oklab, var(--color-secondary) 12%, var(--color-base-100)), color-mix(in oklab, var(--color-secondary) 16%, var(--color-base-100)));
+        --color-accent-soft: light-dark(color-mix(in oklab, var(--color-accent) 12%, var(--color-base-100)), color-mix(in oklab, var(--color-accent) 16%, var(--color-base-100)));
+        --color-neutral-soft: light-dark(color-mix(in oklab, var(--color-neutral) 12%, var(--color-base-100)), color-mix(in oklab, var(--color-neutral) 16%, var(--color-base-100)));
+        --color-info-soft: light-dark(color-mix(in oklab, var(--color-info) 12%, var(--color-base-100)), color-mix(in oklab, var(--color-info) 16%, var(--color-base-100)));
+        --color-success-soft: light-dark(color-mix(in oklab, var(--color-success) 12%, var(--color-base-100)), color-mix(in oklab, var(--color-success) 16%, var(--color-base-100)));
+        --color-warning-soft: light-dark(color-mix(in oklab, var(--color-warning) 12%, var(--color-base-100)), color-mix(in oklab, var(--color-warning) 16%, var(--color-base-100)));
+        --color-error-soft: light-dark(color-mix(in oklab, var(--color-error) 12%, var(--color-base-100)), color-mix(in oklab, var(--color-error) 16%, var(--color-base-100)));
         --radius-selector: 0.5rem;
         --radius-field: 0.25rem;
         --radius-box: 0.5rem;
@@ -99,7 +99,7 @@
         --color-primary: oklch(45% 0.24 277.023);
         --color-primary-content: oklch(93% 0.034 272.788);
         --color-secondary: oklch(65% 0.241 354.308);
-        --color-secondary-content: oklch(94% 0.028 342.258);
+        --color-secondary-content: oklch(24.2% 0.028 342.258);
         --color-accent: oklch(77% 0.152 181.912);
         --color-accent-content: oklch(38% 0.063 188.416);
         --color-neutral: oklch(14% 0.005 285.823);
@@ -129,9 +129,9 @@
     [data-theme="dark"] {
         color-scheme: dark;
         --color-primary: oklch(58% 0.233 277.117);
-        --color-primary-content: oklch(96% 0.018 272.314);
+        --color-primary-content: oklch(98.9% 0.005 272.314);
         --color-secondary: oklch(65% 0.241 354.308);
-        --color-secondary-content: oklch(94% 0.028 342.258);
+        --color-secondary-content: oklch(24.2% 0.028 342.258);
         --color-accent: oklch(77% 0.152 181.912);
         --color-accent-content: oklch(38% 0.063 188.416);
         --color-neutral: oklch(14% 0.005 285.823);
@@ -456,6 +456,10 @@
 }
 
 @layer zero.recipes {
+    [data-scope="tabs"][data-part="root"] {
+        --tabs-ring-room: 4px;
+    }
+
     [data-scope="tabs"][data-part="root"] {
         display: flex;
         flex-direction: column;
@@ -465,6 +469,11 @@
     [data-scope="tabs"][data-part="list"] {
         display: inline-flex;
         align-self: flex-start;
+        box-sizing: border-box;
+        max-inline-size: 100%;
+        overflow-x: auto;
+        padding: var(--tabs-ring-room);
+        scroll-padding-inline: var(--tabs-ring-room);
     }
 
     [data-scope="tabs"][data-part="tab"] {
@@ -501,6 +510,10 @@
         outline-offset: 2px;
     }
 
+    [data-scope="tabs"][data-part="indicator"] {
+        display: none;
+    }
+
     [data-scope="tabs"][data-part="panel"] {
         font-size: var(--text-md);
     }
@@ -782,11 +795,11 @@
     [data-scope="collapsible"][data-part="root"]::details-content {
         block-size: 0;
         overflow: hidden;
-        transition: block-size var(--duration-normal) var(--ease-standard), content-visibility var(--duration-normal) allow-discrete;
     }
 
     [data-scope="collapsible"][data-part="root"][open]::details-content {
         block-size: auto;
+        transition: block-size var(--duration-normal) var(--ease-standard), content-visibility var(--duration-normal) allow-discrete;
     }
 
     [data-scope="collapsible"][data-part="trigger"] {
@@ -836,6 +849,11 @@
         font-size: var(--text-md);
     }
 
+    [data-scope="collapsible"][data-part="panel"][data-state="closed"] {
+        box-sizing: border-box;
+        animation: collapsible-panel-exit var(--duration-normal) var(--ease-standard);
+    }
+
     [data-scope="collapsible"][data-part="root"][data-color="primary"] {
         --collapsible-accent: color-mix(in oklab, var(--color-primary) 95%, var(--color-base-content));
     }
@@ -917,11 +935,18 @@
     }
 
     @media (prefers-reduced-motion: reduce) {
-        [data-scope="collapsible"][data-part="root"]::details-content {
+        [data-scope="collapsible"][data-part="root"][open]::details-content {
             transition: none;
         }
+
+        [data-scope="collapsible"][data-part="panel"][data-state="closed"] {
+            animation: none;
+        }
     }
 }
+@keyframes collapsible-panel-exit {
+    from { block-size: var(--collapsible-panel-height); } to { block-size: 0; padding-block: 0; }
+}
 
 @layer zero.recipes {
     [data-scope="switch"][data-part="root"] {
@@ -938,6 +963,10 @@
         cursor: pointer;
     }
 
+    [data-scope="switch"][data-part="root"][data-readonly] {
+        cursor: default;
+    }
+
     [data-scope="switch"][data-part="root"][data-disabled] {
         opacity: var(--disabled-opacity);
         cursor: not-allowed;
@@ -1048,6 +1077,23 @@
     [data-scope="switch"][data-part="root"][data-color="error"] {
         --switch-accent: var(--color-error);
     }
+
+    @media (forced-colors: active) {
+        [data-scope="switch"][data-part="thumb"] {
+            forced-color-adjust: none;
+            background-color: CanvasText;
+            background-image: none;
+            box-shadow: none;
+        }
+
+        [data-scope="switch"][data-part="thumb"][data-state="checked"] {
+            background-color: Highlight;
+        }
+
+        [data-scope="switch"][data-part="control"][data-disabled] [data-scope="switch"][data-part="thumb"] {
+            background-color: GrayText;
+        }
+    }
 }
 
 @layer zero.recipes {
@@ -2366,6 +2412,10 @@
         cursor: pointer;
     }
 
+    [data-scope="checkbox"][data-part="root"][data-readonly] {
+        cursor: default;
+    }
+
     [data-scope="checkbox"][data-part="root"][data-disabled] {
         opacity: var(--disabled-opacity);
         cursor: not-allowed;
@@ -2408,6 +2458,10 @@
         border-color: var(--color-error);
     }
 
+    [data-scope="checkbox"][data-part="control"][data-readonly] {
+        cursor: default;
+    }
+
     [data-scope="checkbox"][data-part="indicator"] {
         display: block;
         width: 100%;
@@ -2597,6 +2651,103 @@
     }
 }
 
+@layer zero.recipes {
+    [data-scope="checkbox-group"][data-part="root"] {
+        --checkbox-group-accent: var(--color-base-content);
+    }
+
+    [data-scope="checkbox-group"][data-part="root"] {
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-md);
+    }
+
+    [data-scope="checkbox-group"][data-part="root"][data-orientation="horizontal"] {
+        flex-direction: row;
+        flex-wrap: wrap;
+        column-gap: var(--space-lg);
+    }
+
+    [data-scope="checkbox-group"][data-part="label"] {
+        font-size: var(--text-sm);
+        font-weight: var(--weight-semibold);
+        color: var(--checkbox-group-accent);
+    }
+
+    [data-scope="checkbox-group"][data-part="label"][data-disabled] {
+        opacity: var(--disabled-opacity);
+    }
+
+    [data-scope="checkbox-group"][data-part="label"][data-required]::after {
+        content: " *";
+        color: color-mix(in oklab, var(--color-error) 85%, var(--color-base-content));
+    }
+
+    [data-scope="checkbox-group"][data-part="root"][data-color="primary"] {
+        --checkbox-group-accent: color-mix(in oklab, var(--color-primary) 95%, var(--color-base-content));
+    }
+
+    [data-scope="checkbox-group"][data-part="root"][data-color="secondary"] {
+        --checkbox-group-accent: color-mix(in oklab, var(--color-secondary) 70%, var(--color-base-content));
+    }
+
+    [data-scope="checkbox-group"][data-part="root"][data-color="accent"] {
+        --checkbox-group-accent: color-mix(in oklab, var(--color-accent) 55%, var(--color-base-content));
+    }
+
+    [data-scope="checkbox-group"][data-part="root"][data-color="neutral"] {
+        --checkbox-group-accent: color-mix(in oklab, var(--color-neutral) 40%, var(--color-base-content));
+    }
+
+    [data-scope="checkbox-group"][data-part="root"][data-color="info"] {
+        --checkbox-group-accent: color-mix(in oklab, var(--color-info) 70%, var(--color-base-content));
+    }
+
+    [data-scope="checkbox-group"][data-part="root"][data-color="success"] {
+        --checkbox-group-accent: color-mix(in oklab, var(--color-success) 55%, var(--color-base-content));
+    }
+
+    [data-scope="checkbox-group"][data-part="root"][data-color="warning"] {
+        --checkbox-group-accent: color-mix(in oklab, var(--color-warning) 45%, var(--color-base-content));
+    }
+
+    [data-scope="checkbox-group"][data-part="root"][data-color="error"] {
+        --checkbox-group-accent: color-mix(in oklab, var(--color-error) 85%, var(--color-base-content));
+    }
+
+    [data-scope="checkbox-group"][data-part="root"][data-size="xs"] {
+        gap: var(--space-sm);
+    }
+
+    [data-scope="checkbox-group"][data-part="root"][data-size="xl"] {
+        gap: var(--space-lg);
+    }
+
+    @scope ([data-scope="checkbox-group"][data-part="root"][data-size="xs"]) to ([data-scope="checkbox-group"][data-part="root"]) {
+        [data-scope="checkbox-group"][data-part="label"] {
+            font-size: var(--text-xs);
+        }
+    }
+
+    @scope ([data-scope="checkbox-group"][data-part="root"][data-size="sm"]) to ([data-scope="checkbox-group"][data-part="root"]) {
+        [data-scope="checkbox-group"][data-part="label"] {
+            font-size: var(--text-xs);
+        }
+    }
+
+    @scope ([data-scope="checkbox-group"][data-part="root"][data-size="lg"]) to ([data-scope="checkbox-group"][data-part="root"]) {
+        [data-scope="checkbox-group"][data-part="label"] {
+            font-size: var(--text-md);
+        }
+    }
+
+    @scope ([data-scope="checkbox-group"][data-part="root"][data-size="xl"]) to ([data-scope="checkbox-group"][data-part="root"]) {
+        [data-scope="checkbox-group"][data-part="label"] {
+            font-size: var(--text-lg);
+        }
+    }
+}
+
 @layer zero.recipes {
     [data-scope="radio-group"][data-part="root"] {
         --radio-size: calc(var(--size-selector) * 6);
@@ -2610,10 +2761,6 @@
         gap: var(--space-md);
     }
 
-    [data-scope="radio-group"][data-part="root"][data-invalid] [data-part="item-control"] {
-        border-color: var(--color-error);
-    }
-
     [data-scope="radio-group"][data-part="label"] {
         font-size: var(--text-sm);
         font-weight: var(--weight-semibold);
@@ -2630,6 +2777,10 @@
         cursor: pointer;
     }
 
+    [data-scope="radio-group"][data-part="item"][data-readonly] {
+        cursor: default;
+    }
+
     [data-scope="radio-group"][data-part="item"][data-disabled] {
         opacity: var(--disabled-opacity);
         cursor: not-allowed;
@@ -2657,6 +2808,10 @@
         animation: var(--duration-fast) var(--ease-standard) zero-daisy-radio;
     }
 
+    [data-scope="radio-group"][data-part="item-control"][data-invalid] {
+        border-color: var(--color-error);
+    }
+
     [data-scope="radio-group"][data-part="item-control"][data-focus-visible] {
         outline: 2px solid var(--radio-accent);
         outline-offset: 2px;
@@ -2895,6 +3050,8 @@
 @layer zero.recipes {
     [data-scope="slider"][data-part="root"] {
         --slider-accent: var(--color-primary);
+        --slider-track-size: calc(var(--size-selector) * 3);
+        --slider-thumb-size: calc(var(--size-selector) * 6);
     }
 
     [data-scope="slider"][data-part="root"] {
@@ -2908,15 +3065,32 @@
         opacity: var(--disabled-opacity);
     }
 
+    [data-scope="slider"][data-part="root"][data-orientation="vertical"] {
+        width: auto;
+        align-items: center;
+        --slider-length: calc(var(--size-selector) * 40);
+    }
+
     [data-scope="slider"][data-part="label"] {
         font-size: var(--text-sm);
         font-weight: var(--weight-semibold);
     }
 
     [data-scope="slider"][data-part="control"] {
+        appearance: none;
         width: 100%;
-        accent-color: var(--slider-accent);
+        height: var(--slider-thumb-size);
+        margin: 0;
+        background: transparent;
         cursor: pointer;
+        outline: none;
+        accent-color: var(--slider-accent);
+        --slider-fill: color-mix(in oklab, var(--slider-accent) 90%, var(--color-base-content));
+        --slider-track: linear-gradient(to right, var(--slider-fill) var(--slider-percent, 50%), var(--color-base-300) 0);
+    }
+
+    [data-scope="slider"][data-part="control"][data-readonly] {
+        cursor: default;
     }
 
     [data-scope="slider"][data-part="control"][data-disabled] {
@@ -2929,34 +3103,105 @@
     }
 
     [data-scope="slider"][data-part="control"][data-invalid] {
-        accent-color: var(--color-error);
+        --slider-accent: var(--color-error);
+    }
+
+    [data-scope="slider"][data-part="control"]::-webkit-slider-runnable-track {
+        height: var(--slider-track-size);
+        border-radius: var(--radius-selector);
+        background: var(--slider-track);
+    }
+
+    [data-scope="slider"][data-part="control"]::-webkit-slider-thumb {
+        appearance: none;
+        box-sizing: border-box;
+        width: var(--slider-thumb-size);
+        height: var(--slider-thumb-size);
+        margin-top: calc((var(--slider-track-size) - var(--slider-thumb-size)) / 2);
+        border-radius: calc(var(--radius-selector) + min(0.25rem, var(--radius-selector) * 3));
+        border: 0.25rem solid var(--slider-fill);
+        background: var(--color-base-100);
+        box-shadow: 0 -1px var(--depth-shade) inset, 0 8px 0 -4px var(--depth-sheen) inset;
+    }
+
+    [data-scope="slider"][data-part="control"]::-moz-range-track {
+        height: var(--slider-track-size);
+        border-radius: var(--radius-selector);
+        background: var(--slider-track);
+    }
+
+    [data-scope="slider"][data-part="control"]::-moz-range-thumb {
+        box-sizing: border-box;
+        width: var(--slider-thumb-size);
+        height: var(--slider-thumb-size);
+        border-radius: calc(var(--radius-selector) + min(0.25rem, var(--radius-selector) * 3));
+        border: 0.25rem solid var(--slider-fill);
+        background: var(--color-base-100);
+        box-shadow: 0 -1px var(--depth-shade) inset, 0 8px 0 -4px var(--depth-sheen) inset;
+    }
+
+    [data-scope="slider"][data-part="control"][data-orientation="vertical"] {
+        width: var(--slider-thumb-size);
+        height: var(--slider-length);
+        --slider-track: linear-gradient(to top, var(--slider-fill) var(--slider-percent, 50%), var(--color-base-300) 0);
+    }
+
+    [data-scope="slider"][data-part="control"][data-orientation="vertical"]::-webkit-slider-runnable-track {
+        width: var(--slider-track-size);
+        height: auto;
+    }
+
+    [data-scope="slider"][data-part="control"][data-orientation="vertical"]::-webkit-slider-thumb {
+        margin-top: 0;
+        margin-block-start: calc((var(--slider-track-size) - var(--slider-thumb-size)) / 2);
+    }
+
+    [data-scope="slider"][data-part="control"][data-orientation="vertical"]::-moz-range-track {
+        width: var(--slider-track-size);
+        height: 100%;
     }
 
     [data-scope="slider"][data-part="track"] {
-        height: calc(var(--size-selector) * 2);
-        margin-block: calc(var(--size-selector) * 1.5);
+        height: var(--slider-track-size);
+        margin-block: calc((var(--slider-thumb-size) - var(--slider-track-size)) / 2);
         border-radius: 9999px;
         background: var(--color-base-300);
         cursor: pointer;
     }
 
+    [data-scope="slider"][data-part="track"][data-readonly] {
+        cursor: default;
+    }
+
     [data-scope="slider"][data-part="track"][data-disabled] {
         cursor: not-allowed;
     }
 
+    [data-scope="slider"][data-part="track"][data-orientation="vertical"] {
+        width: var(--slider-track-size);
+        height: var(--slider-length);
+        margin-block: 0;
+        margin-inline: calc((var(--slider-thumb-size) - var(--slider-track-size)) / 2);
+    }
+
     [data-scope="slider"][data-part="range"] {
         height: 100%;
         border-radius: 9999px;
         background: color-mix(in oklab, var(--slider-accent) 90%, var(--color-base-content));
     }
 
+    [data-scope="slider"][data-part="range"][data-orientation="vertical"] {
+        inset-inline-start: 0;
+        width: 100%;
+    }
+
     [data-scope="slider"][data-part="thumb"] {
         box-sizing: border-box;
-        width: calc(var(--size-selector) * 5);
-        height: calc(var(--size-selector) * 5);
+        width: var(--slider-thumb-size);
+        height: var(--slider-thumb-size);
         inset-block-start: 50%;
         translate: 0 -50%;
-        margin-inline-start: calc(var(--size-selector) * -2.5);
+        margin-inline-start: calc(var(--slider-thumb-size) / -2);
         border-radius: 9999px;
         background: color-mix(in oklab, var(--slider-accent) 90%, var(--color-base-content));
         cursor: pointer;
@@ -2969,12 +3214,24 @@
         outline-offset: 2px;
     }
 
+    [data-scope="slider"][data-part="thumb"][data-readonly] {
+        cursor: default;
+    }
+
     [data-scope="slider"][data-part="thumb"][data-disabled] {
         cursor: not-allowed;
     }
 
+    [data-scope="slider"][data-part="thumb"][data-orientation="vertical"] {
+        inset-block-start: auto;
+        inset-inline-start: 50%;
+        translate: none;
+        margin-inline-start: calc(var(--slider-thumb-size) / -2);
+        margin-block-end: calc(var(--slider-thumb-size) / -2);
+    }
+
     [data-scope="slider"][data-part="mark"] {
-        padding-block-start: calc(var(--size-selector) * 2 + var(--space-2xs));
+        padding-block-start: calc(var(--slider-track-size) + var(--space-2xs));
         font-size: var(--text-xs);
         line-height: 1;
         white-space: nowrap;
@@ -2987,10 +3244,25 @@
         inset-block-start: 0;
         inset-inline-start: -1px;
         width: 2px;
-        height: calc(var(--size-selector) * 2);
+        height: var(--slider-track-size);
         background: var(--color-base-content);
     }
 
+    [data-scope="slider"][data-part="mark"][data-orientation="vertical"] {
+        inset-inline-start: 0;
+        padding-block-start: 0;
+        padding-inline-start: calc(var(--slider-track-size) + var(--space-2xs));
+        translate: 0 50%;
+    }
+
+    [data-scope="slider"][data-part="mark"][data-orientation="vertical"]::before {
+        inset-block-start: 50%;
+        inset-inline-start: 0;
+        width: var(--slider-track-size);
+        height: 2px;
+        translate: 0 -50%;
+    }
+
     [data-scope="slider"][data-part="value-text"] {
         font-size: var(--text-xs);
         opacity: 0.6;
@@ -3032,21 +3304,33 @@
         --slider-accent: var(--color-error);
     }
 
-    @scope ([data-scope="slider"][data-part="root"][data-size="xs"]) to ([data-scope="slider"][data-part="root"]) {
-        [data-scope="slider"][data-part="control"] {
-            height: calc(var(--size-selector) * 3);
-        }
+    [data-scope="slider"][data-part="root"][data-size="xs"] {
+        --slider-track-size: calc(var(--size-selector) * 2);
+        --slider-thumb-size: calc(var(--size-selector) * 4);
+    }
+
+    [data-scope="slider"][data-part="root"][data-size="sm"] {
+        --slider-track-size: calc(var(--size-selector) * 2.5);
+        --slider-thumb-size: calc(var(--size-selector) * 5);
+    }
 
+    [data-scope="slider"][data-part="root"][data-size="lg"] {
+        --slider-track-size: calc(var(--size-selector) * 3.5);
+        --slider-thumb-size: calc(var(--size-selector) * 7);
+    }
+
+    [data-scope="slider"][data-part="root"][data-size="xl"] {
+        --slider-track-size: calc(var(--size-selector) * 4);
+        --slider-thumb-size: calc(var(--size-selector) * 8);
+    }
+
+    @scope ([data-scope="slider"][data-part="root"][data-size="xs"]) to ([data-scope="slider"][data-part="root"]) {
         [data-scope="slider"][data-part="label"] {
             font-size: var(--text-xs);
         }
     }
 
     @scope ([data-scope="slider"][data-part="root"][data-size="sm"]) to ([data-scope="slider"][data-part="root"]) {
-        [data-scope="slider"][data-part="control"] {
-            height: calc(var(--size-selector) * 4);
-        }
-
         [data-scope="slider"][data-part="label"] {
             font-size: var(--text-sm);
         }
@@ -3065,24 +3349,22 @@
     }
 
     @scope ([data-scope="slider"][data-part="root"][data-size="lg"]) to ([data-scope="slider"][data-part="root"]) {
-        [data-scope="slider"][data-part="control"] {
-            height: calc(var(--size-selector) * 7);
-        }
-
         [data-scope="slider"][data-part="label"] {
             font-size: var(--text-md);
         }
     }
 
     @scope ([data-scope="slider"][data-part="root"][data-size="xl"]) to ([data-scope="slider"][data-part="root"]) {
-        [data-scope="slider"][data-part="control"] {
-            height: calc(var(--size-selector) * 8);
-        }
-
         [data-scope="slider"][data-part="label"] {
             font-size: var(--text-lg);
         }
     }
+
+    @media (forced-colors: active) {
+        [data-scope="slider"][data-part="control"] {
+            appearance: auto;
+        }
+    }
 }
 
 @layer zero.recipes {
@@ -3096,6 +3378,11 @@
         gap: var(--space-md);
     }
 
+    [data-scope="accordion"][data-part="root"][data-orientation="horizontal"] {
+        flex-direction: row;
+        align-items: start;
+    }
+
     [data-scope="accordion"][data-part="item"] {
         interpolate-size: allow-keywords;
         border: var(--border) solid var(--color-base-300);
@@ -3107,11 +3394,16 @@
     [data-scope="accordion"][data-part="item"]::details-content {
         block-size: 0;
         overflow: hidden;
-        transition: block-size var(--duration-normal) var(--ease-standard), content-visibility var(--duration-normal) allow-discrete;
     }
 
     [data-scope="accordion"][data-part="item"][open]::details-content {
         block-size: auto;
+        transition: block-size var(--duration-normal) var(--ease-standard), content-visibility var(--duration-normal) allow-discrete;
+    }
+
+    [data-scope="accordion"][data-part="root"][data-orientation="horizontal"] > [data-scope="accordion"][data-part="item"] {
+        flex: 1 1 0;
+        min-inline-size: 0;
     }
 
     [data-scope="accordion"][data-part="trigger"] {
@@ -3164,6 +3456,11 @@
         font-size: var(--text-md);
     }
 
+    [data-scope="accordion"][data-part="panel"][data-state="closed"] {
+        box-sizing: border-box;
+        animation: accordion-panel-exit var(--duration-normal) var(--ease-standard);
+    }
+
     [data-scope="accordion"][data-part="root"][data-color="primary"] {
         --accordion-accent: color-mix(in oklab, var(--color-primary) 95%, var(--color-base-content));
     }
@@ -3245,11 +3542,18 @@
     }
 
     @media (prefers-reduced-motion: reduce) {
-        [data-scope="accordion"][data-part="item"]::details-content {
+        [data-scope="accordion"][data-part="item"][open]::details-content {
             transition: none;
         }
+
+        [data-scope="accordion"][data-part="panel"][data-state="closed"] {
+            animation: none;
+        }
     }
 }
+@keyframes accordion-panel-exit {
+    from { block-size: var(--accordion-panel-height); } to { block-size: 0; padding-block: 0; }
+}
 
 @layer zero.recipes {
     [data-scope="select"][data-part="root"] {
@@ -3259,6 +3563,7 @@
     [data-scope="select"][data-part="root"] {
         display: inline-flex;
         flex-direction: column;
+        position: relative;
     }
 
     [data-scope="select"][data-part="trigger"] {
@@ -3286,6 +3591,10 @@
         border-color: var(--color-base-content);
     }
 
+    [data-scope="select"][data-part="trigger"][data-readonly] {
+        cursor: default;
+    }
+
     [data-scope="select"][data-part="trigger"][data-disabled] {
         opacity: var(--disabled-opacity);
         cursor: not-allowed;
@@ -3317,6 +3626,43 @@
         transform: rotate(180deg);
     }
 
+    [data-scope="select"][data-part="root"]:has(> [data-scope="select"][data-part="clear-trigger"]) [data-scope="select"][data-part="indicator"] {
+        margin-inline-start: calc(var(--space-2xl) + var(--space-sm));
+    }
+
+    [data-scope="select"][data-part="clear-trigger"] {
+        appearance: none;
+        position: absolute;
+        inset-block: 0;
+        margin-block: auto;
+        block-size: min(1.5rem, 100%);
+        min-inline-size: 1.5rem;
+        inset-inline-end: calc(var(--size-field) * 4 + 1em + var(--space-xs));
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0 var(--space-xs);
+        border: none;
+        background: transparent;
+        color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
+        font: inherit;
+        font-size: var(--text-sm);
+        line-height: var(--leading-none);
+        border-radius: var(--radius-field);
+        cursor: pointer;
+        transition: background var(--duration-fast) var(--ease-standard);
+    }
+
+    [data-scope="select"][data-part="clear-trigger"]:hover:not([data-disabled]) {
+        background: var(--color-base-200);
+        color: var(--color-base-content);
+    }
+
+    [data-scope="select"][data-part="clear-trigger"][data-focus-visible] {
+        outline: 2px solid var(--color-base-content);
+        outline-offset: 2px;
+    }
+
     [data-scope="select"][data-part="popup"] {
         opacity: 0;
         transform: translateY(-4px);
@@ -3327,7 +3673,10 @@
         border-radius: var(--radius-box);
         box-shadow: var(--shadow-lg);
         padding: var(--space-md);
-        min-width: 13rem;
+        min-width: var(--anchor-width, 13rem);
+        box-sizing: border-box;
+        max-height: min(20rem, var(--available-height, 20rem));
+        overflow-y: auto;
     }
 
     [data-scope="select"][data-part="popup"][data-state="open"] {
@@ -3342,6 +3691,13 @@
         opacity: 0.6;
     }
 
+    [data-scope="select"][data-part="group-heading"] {
+        padding: var(--space-md) var(--space-lg) var(--space-xs);
+        font-size: var(--text-xs);
+        font-weight: var(--weight-bold);
+        opacity: 0.6;
+    }
+
     [data-scope="select"][data-part="item"] {
         display: flex;
         align-items: center;
@@ -3374,6 +3730,12 @@
         color: var(--select-accent);
     }
 
+    [data-scope="select"][data-part="separator"] {
+        height: var(--border);
+        margin: var(--space-sm) var(--space-md);
+        background: var(--color-base-300);
+    }
+
     [data-scope="select"][data-part="root"][data-color="primary"] {
         --select-accent: var(--color-primary);
     }
@@ -4213,6 +4575,23 @@
         cursor: not-allowed;
     }
 
+    [data-scope="combobox"][data-part="clear-trigger"] {
+        appearance: none;
+        border: none;
+        background: transparent;
+        color: inherit;
+        font: inherit;
+        opacity: 0.6;
+        padding: 0 var(--space-xs);
+        line-height: var(--leading-none);
+        cursor: pointer;
+        transition: opacity var(--duration-fast) var(--ease-standard);
+    }
+
+    [data-scope="combobox"][data-part="clear-trigger"]:hover:not([data-disabled]) {
+        opacity: 1;
+    }
+
     [data-scope="combobox"][data-part="popup"] {
         opacity: 0;
         transform: translateY(-4px);
@@ -4223,7 +4602,10 @@
         border-radius: var(--radius-box);
         box-shadow: var(--shadow-lg);
         padding: var(--space-md);
-        min-width: 13rem;
+        min-width: var(--anchor-width, 13rem);
+        box-sizing: border-box;
+        max-height: min(20rem, var(--available-height, 20rem));
+        overflow-y: auto;
     }
 
     [data-scope="combobox"][data-part="popup"][data-state="open"] {
@@ -4238,6 +4620,13 @@
         opacity: 0.6;
     }
 
+    [data-scope="combobox"][data-part="group-heading"] {
+        padding: var(--space-md) var(--space-lg) var(--space-xs);
+        font-size: var(--text-xs);
+        font-weight: var(--weight-bold);
+        opacity: 0.6;
+    }
+
     [data-scope="combobox"][data-part="item"] {
         display: flex;
         align-items: center;
@@ -4275,6 +4664,19 @@
         opacity: 0.6;
     }
 
+    [data-scope="combobox"][data-part="loading"] {
+        padding: var(--space-lg);
+        font-size: var(--text-sm);
+        text-align: center;
+        opacity: 0.6;
+    }
+
+    [data-scope="combobox"][data-part="separator"] {
+        height: var(--border);
+        margin: var(--space-sm) var(--space-md);
+        background: var(--color-base-300);
+    }
+
     [data-scope="combobox"][data-part="root"][data-color="primary"] {
         --combobox-accent: var(--color-primary);
     }
@@ -5166,6 +5568,10 @@
         transform: rotate(90deg);
     }
 
+    [data-scope="tree-view"][data-part="branch-indicator"][data-state="loading"] {
+        transform: rotate(45deg);
+    }
+
     [data-scope="tree-view"][data-part="branch-indicator"]:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
         scale: -1 1;
     }
@@ -5266,6 +5672,7 @@
     [data-scope="input"][data-part="control"] {
         display: inline-flex;
         align-items: stretch;
+        gap: var(--space-2xs);
         box-sizing: border-box;
         height: calc(var(--size-field) * 12);
         background: var(--color-base-100);
@@ -5314,6 +5721,92 @@
         color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
     }
 
+    [data-scope="input"][data-part="adornment"] {
+        display: inline-flex;
+        align-items: center;
+        flex: none;
+        color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
+        font-size: var(--text-sm);
+        line-height: var(--leading-none);
+    }
+
+    [data-scope="input"][data-part="adornment"][data-placement="start"] {
+        order: -1;
+        padding-inline-start: var(--space-md);
+    }
+
+    [data-scope="input"][data-part="adornment"][data-placement="end"] {
+        order: 1;
+        padding-inline-end: var(--space-md);
+    }
+
+    [data-scope="input"][data-part="clear-trigger"] {
+        appearance: none;
+        border: none;
+        background: transparent;
+        color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
+        border-radius: 9999px;
+        align-self: center;
+        flex: none;
+        order: 1;
+        margin-inline-end: var(--space-xs);
+        padding: var(--space-2xs) var(--space-xs);
+        font-size: var(--text-sm);
+        font-weight: var(--weight-semibold);
+        line-height: var(--leading-none);
+        cursor: pointer;
+    }
+
+    [data-scope="input"][data-part="clear-trigger"]:hover:not([data-disabled]) {
+        color: var(--color-base-content);
+        background: var(--color-base-200);
+    }
+
+    [data-scope="input"][data-part="clear-trigger"][data-disabled] {
+        cursor: not-allowed;
+    }
+
+    [data-scope="input"][data-part="clear-trigger"][data-focus-visible] {
+        outline: 2px solid var(--color-base-content);
+        outline-offset: 2px;
+    }
+
+    [data-scope="input"][data-part="visibility-trigger"] {
+        appearance: none;
+        border: none;
+        background: transparent;
+        color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
+        border-radius: 9999px;
+        align-self: center;
+        flex: none;
+        order: 1;
+        margin-inline-end: var(--space-xs);
+        padding: var(--space-2xs) var(--space-xs);
+        font-size: var(--text-sm);
+        font-weight: var(--weight-semibold);
+        line-height: var(--leading-none);
+        cursor: pointer;
+    }
+
+    [data-scope="input"][data-part="visibility-trigger"][data-state="on"] {
+        color: var(--color-base-content);
+        background: var(--color-base-200);
+    }
+
+    [data-scope="input"][data-part="visibility-trigger"]:hover:not([data-disabled]) {
+        color: var(--color-base-content);
+        background: var(--color-base-200);
+    }
+
+    [data-scope="input"][data-part="visibility-trigger"][data-disabled] {
+        cursor: not-allowed;
+    }
+
+    [data-scope="input"][data-part="visibility-trigger"][data-focus-visible] {
+        outline: 2px solid var(--color-base-content);
+        outline-offset: 2px;
+    }
+
     [data-scope="input"][data-part="root"][data-color="primary"] {
         --input-accent: var(--color-primary);
     }
@@ -5355,6 +5848,18 @@
             font-size: var(--text-xs);
             padding: var(--space-2xs) var(--space-xs);
         }
+
+        [data-scope="input"][data-part="adornment"] {
+            font-size: var(--text-xs);
+        }
+
+        [data-scope="input"][data-part="clear-trigger"] {
+            font-size: var(--text-xs);
+        }
+
+        [data-scope="input"][data-part="visibility-trigger"] {
+            font-size: var(--text-xs);
+        }
     }
 
     @scope ([data-scope="input"][data-part="root"][data-size="sm"]) to ([data-scope="input"][data-part="root"]) {
@@ -5366,6 +5871,18 @@
             font-size: var(--text-xs);
             padding: var(--space-xs) var(--space-sm);
         }
+
+        [data-scope="input"][data-part="adornment"] {
+            font-size: var(--text-xs);
+        }
+
+        [data-scope="input"][data-part="clear-trigger"] {
+            font-size: var(--text-xs);
+        }
+
+        [data-scope="input"][data-part="visibility-trigger"] {
+            font-size: var(--text-xs);
+        }
     }
 
     @scope ([data-scope="input"][data-part="root"][data-size="lg"]) to ([data-scope="input"][data-part="root"]) {
@@ -5377,6 +5894,18 @@
             font-size: var(--text-md);
             padding: var(--space-md) var(--space-lg);
         }
+
+        [data-scope="input"][data-part="adornment"] {
+            font-size: var(--text-md);
+        }
+
+        [data-scope="input"][data-part="clear-trigger"] {
+            font-size: var(--text-md);
+        }
+
+        [data-scope="input"][data-part="visibility-trigger"] {
+            font-size: var(--text-md);
+        }
     }
 
     @scope ([data-scope="input"][data-part="root"][data-size="xl"]) to ([data-scope="input"][data-part="root"]) {
@@ -5388,6 +5917,18 @@
             font-size: var(--text-lg);
             padding: var(--space-lg) var(--space-xl);
         }
+
+        [data-scope="input"][data-part="adornment"] {
+            font-size: var(--text-lg);
+        }
+
+        [data-scope="input"][data-part="clear-trigger"] {
+            font-size: var(--text-lg);
+        }
+
+        [data-scope="input"][data-part="visibility-trigger"] {
+            font-size: var(--text-lg);
+        }
     }
 }
 
@@ -6673,6 +7214,7 @@
 
     [data-scope="stats"][data-part="root"] {
         display: flex;
+        overflow-x: auto;
         border: var(--border) solid var(--color-base-200);
         border-radius: var(--radius-box);
         background: var(--color-base-100);
@@ -6707,6 +7249,7 @@
 
     [data-scope="stats"][data-part="value"] {
         grid-column: 1;
+        white-space: nowrap;
         font-size: var(--text-2xl);
         font-weight: var(--weight-bold);
         font-variant-numeric: tabular-nums;
@@ -6725,36 +7268,84 @@
         align-self: center;
     }
 
-    [data-scope="stats"][data-part="root"][data-color="primary"] {
-        --stats-accent: var(--color-primary);
+    [data-scope="stats"][data-part="item"][data-color="primary"] {
+        --stats-accent: color-mix(in oklab, var(--color-primary) 95%, var(--color-base-content));
     }
 
-    [data-scope="stats"][data-part="root"][data-color="secondary"] {
-        --stats-accent: var(--color-secondary);
+    [data-scope="stats"][data-part="item"][data-color="secondary"] {
+        --stats-accent: color-mix(in oklab, var(--color-secondary) 70%, var(--color-base-content));
     }
 
-    [data-scope="stats"][data-part="root"][data-color="accent"] {
-        --stats-accent: var(--color-accent);
+    [data-scope="stats"][data-part="item"][data-color="accent"] {
+        --stats-accent: color-mix(in oklab, var(--color-accent) 55%, var(--color-base-content));
     }
 
-    [data-scope="stats"][data-part="root"][data-color="neutral"] {
-        --stats-accent: var(--color-neutral);
+    [data-scope="stats"][data-part="item"][data-color="neutral"] {
+        --stats-accent: color-mix(in oklab, var(--color-neutral) 40%, var(--color-base-content));
     }
 
-    [data-scope="stats"][data-part="root"][data-color="info"] {
-        --stats-accent: var(--color-info);
+    [data-scope="stats"][data-part="item"][data-color="info"] {
+        --stats-accent: color-mix(in oklab, var(--color-info) 70%, var(--color-base-content));
     }
 
-    [data-scope="stats"][data-part="root"][data-color="success"] {
-        --stats-accent: var(--color-success);
+    [data-scope="stats"][data-part="item"][data-color="success"] {
+        --stats-accent: color-mix(in oklab, var(--color-success) 55%, var(--color-base-content));
     }
 
-    [data-scope="stats"][data-part="root"][data-color="warning"] {
-        --stats-accent: var(--color-warning);
+    [data-scope="stats"][data-part="item"][data-color="warning"] {
+        --stats-accent: color-mix(in oklab, var(--color-warning) 45%, var(--color-base-content));
     }
 
-    [data-scope="stats"][data-part="root"][data-color="error"] {
-        --stats-accent: var(--color-error);
+    [data-scope="stats"][data-part="item"][data-color="error"] {
+        --stats-accent: color-mix(in oklab, var(--color-error) 85%, var(--color-base-content));
+    }
+
+    @scope ([data-scope="stats"][data-part="root"][data-color="primary"]) to ([data-scope="stats"][data-part="root"]) {
+        [data-scope="stats"][data-part="item"] {
+            --stats-accent: color-mix(in oklab, var(--color-primary) 95%, var(--color-base-content));
+        }
+    }
+
+    @scope ([data-scope="stats"][data-part="root"][data-color="secondary"]) to ([data-scope="stats"][data-part="root"]) {
+        [data-scope="stats"][data-part="item"] {
+            --stats-accent: color-mix(in oklab, var(--color-secondary) 70%, var(--color-base-content));
+        }
+    }
+
+    @scope ([data-scope="stats"][data-part="root"][data-color="accent"]) to ([data-scope="stats"][data-part="root"]) {
+        [data-scope="stats"][data-part="item"] {
+            --stats-accent: color-mix(in oklab, var(--color-accent) 55%, var(--color-base-content));
+        }
+    }
+
+    @scope ([data-scope="stats"][data-part="root"][data-color="neutral"]) to ([data-scope="stats"][data-part="root"]) {
+        [data-scope="stats"][data-part="item"] {
+            --stats-accent: color-mix(in oklab, var(--color-neutral) 40%, var(--color-base-content));
+        }
+    }
+
+    @scope ([data-scope="stats"][data-part="root"][data-color="info"]) to ([data-scope="stats"][data-part="root"]) {
+        [data-scope="stats"][data-part="item"] {
+            --stats-accent: color-mix(in oklab, var(--color-info) 70%, var(--color-base-content));
+        }
+    }
+
+    @scope ([data-scope="stats"][data-part="root"][data-color="success"]) to ([data-scope="stats"][data-part="root"]) {
+        [data-scope="stats"][data-part="item"] {
+            --stats-accent: color-mix(in oklab, var(--color-success) 55%, var(--color-base-content));
+        }
+    }
+
+    @scope ([data-scope="stats"][data-part="root"][data-color="warning"]) to ([data-scope="stats"][data-part="root"]) {
+        [data-scope="stats"][data-part="item"] {
+            --stats-accent: color-mix(in oklab, var(--color-warning) 45%, var(--color-base-content));
+        }
+    }
+
+    @scope ([data-scope="stats"][data-part="root"][data-color="error"]) to ([data-scope="stats"][data-part="root"]) {
+        [data-scope="stats"][data-part="item"] {
+            --stats-accent: color-mix(in oklab, var(--color-error) 85%, var(--color-base-content));
+        }
     }
 
     @scope ([data-scope="stats"][data-part="root"][data-size="xs"]) to ([data-scope="stats"][data-part="root"]) {
@@ -6799,6 +7390,7 @@
 
     [data-scope="timeline"][data-part="root"][data-orientation="horizontal"] {
         flex-direction: row;
+        overflow-x: auto;
     }
 
     [data-scope="timeline"][data-part="item"] {
@@ -7840,12 +8432,16 @@
         --pg-accent-content: var(--color-primary-content);
         --pg-size: calc(var(--size-field) * 10);
         --pg-font: var(--text-sm);
+        --pg-ring-room: 4px;
     }
 
     [data-scope="pagination"][data-part="root"] {
         display: flex;
         align-items: center;
         gap: var(--space-2xs);
+        overflow-x: auto;
+        padding: var(--pg-ring-room);
+        scroll-padding-inline: var(--pg-ring-room);
     }
 
     [data-scope="pagination"][data-part="item"] {
@@ -8725,6 +9321,11 @@
         background: var(--color-base-100);
     }
 
+    [data-scope="table"][data-part="root"][data-focus-visible] {
+        outline: 2px solid var(--color-base-content);
+        outline-offset: -2px;
+    }
+
     [data-scope="table"][data-part="table"] {
         border-collapse: collapse;
         inline-size: 100%;
@@ -9213,6 +9814,11 @@
         opacity: var(--disabled-opacity);
     }
 
+    [data-scope="file-upload"][data-part="item"][data-invalid] {
+        border-color: var(--color-error);
+        background: color-mix(in oklab, var(--color-error) 8%, var(--color-base-100));
+    }
+
     [data-scope="file-upload"][data-part="item-name"] {
         flex: 1 1 auto;
         min-width: 0;
@@ -9253,6 +9859,33 @@
         outline-offset: 2px;
     }
 
+    [data-scope="file-upload"][data-part="clear-trigger"] {
+        appearance: none;
+        border: none;
+        background: transparent;
+        color: inherit;
+        border-radius: 9999px;
+        padding: var(--space-2xs) var(--space-sm);
+        font-size: var(--fu-font);
+        font-weight: var(--weight-semibold);
+        line-height: var(--leading-none);
+        cursor: pointer;
+    }
+
+    [data-scope="file-upload"][data-part="clear-trigger"]:hover:not([data-disabled]) {
+        background: var(--color-base-200);
+    }
+
+    [data-scope="file-upload"][data-part="clear-trigger"][data-disabled] {
+        opacity: var(--disabled-opacity);
+        cursor: not-allowed;
+    }
+
+    [data-scope="file-upload"][data-part="clear-trigger"][data-focus-visible] {
+        outline: 2px solid var(--color-base-content);
+        outline-offset: 2px;
+    }
+
     [data-scope="file-upload"][data-part="root"][data-color="primary"] {
         --fu-accent: color-mix(in oklab, var(--color-primary) 95%, var(--color-base-content));
     }
@@ -9753,6 +10386,11 @@
         outline-offset: 2px;
     }
 
+    [data-scope="diff"][data-part="handle"][data-disabled] {
+        opacity: var(--disabled-opacity);
+        cursor: not-allowed;
+    }
+
     [data-scope="diff"][data-part="handle"][data-pressed] {
         --diff-accent: color-mix(in oklab, var(--color-base-content) 85%, var(--color-base-100));
     }