@sigx/zero-daisyui 0.4.0 → 0.6.0

package/dist/css/components/slider.css

@@ -1,6 +1,10 @@
+@layer zero.fallback, zero.tokens, zero.recipes, zero.structure;
+
 @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"] {
@@ -14,15 +18,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] {
@@ -35,34 +56,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;
@@ -75,12 +167,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;
@@ -93,10 +197,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;
@@ -138,21 +257,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);
         }
@@ -171,22 +302,20 @@
     }
 
     @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;
+        }
+    }
 }

package/dist/css/components/spacer.css

@@ -1,3 +1,5 @@
+@layer zero.fallback, zero.tokens, zero.recipes, zero.structure;
+
 @layer zero.recipes {
     [data-scope="spacer"][data-part="root"] {
         --l-space: 0;

package/dist/css/components/spinner.css

@@ -1,3 +1,5 @@
+@layer zero.fallback, zero.tokens, zero.recipes, zero.structure;
+
 @layer zero.recipes {
     [data-scope="spinner"][data-part="root"] {
         --spinner-size: calc(var(--size-field) * 0.5);

package/dist/css/components/stack.css

@@ -1,3 +1,5 @@
+@layer zero.fallback, zero.tokens, zero.recipes, zero.structure;
+
 @layer zero.recipes {
     [data-scope="stack"][data-part="root"] {
         --l-gap: 0;

package/dist/css/components/stats.css

@@ -1,3 +1,5 @@
+@layer zero.fallback, zero.tokens, zero.recipes, zero.structure;
+
 @layer zero.recipes {
     [data-scope="stats"][data-part="root"] {
         --stats-accent: var(--color-base-content);
@@ -5,6 +7,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);
@@ -39,6 +42,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;
@@ -57,36 +61,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="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="secondary"] {
-        --stats-accent: var(--color-secondary);
+    [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="accent"] {
-        --stats-accent: var(--color-accent);
+    [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="neutral"] {
-        --stats-accent: var(--color-neutral);
+    [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="info"] {
-        --stats-accent: var(--color-info);
+    [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="success"] {
-        --stats-accent: var(--color-success);
+    [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="warning"] {
-        --stats-accent: var(--color-warning);
+    [data-scope="stats"][data-part="item"][data-color="error"] {
+        --stats-accent: color-mix(in oklab, var(--color-error) 85%, var(--color-base-content));
     }
 
-    [data-scope="stats"][data-part="root"][data-color="error"] {
-        --stats-accent: var(--color-error);
+    @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"]) {

package/dist/css/components/status.css

@@ -1,3 +1,5 @@
+@layer zero.fallback, zero.tokens, zero.recipes, zero.structure;
+
 @layer zero.recipes {
     [data-scope="status"][data-part="root"] {
         --status-ink: var(--color-base-content);

package/dist/css/components/steps.css

@@ -1,3 +1,5 @@
+@layer zero.fallback, zero.tokens, zero.recipes, zero.structure;
+
 @layer zero.recipes {
     [data-scope="steps"][data-part="root"] {
         --steps-accent: var(--color-primary);

package/dist/css/components/swap.css

@@ -1,3 +1,5 @@
+@layer zero.fallback, zero.tokens, zero.recipes, zero.structure;
+
 @layer zero.recipes {
     [data-scope="swap"][data-part="root"] {
         --swap-ink: var(--color-base-content);

package/dist/css/components/switch.css

@@ -1,3 +1,5 @@
+@layer zero.fallback, zero.tokens, zero.recipes, zero.structure;
+
 @layer zero.recipes {
     [data-scope="switch"][data-part="root"] {
         --switch-size: calc(var(--size-selector) * 6);
@@ -13,6 +15,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;
@@ -123,4 +129,21 @@
     [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;
+        }
+    }
 }

package/dist/css/components/table.css

@@ -1,3 +1,5 @@
+@layer zero.fallback, zero.tokens, zero.recipes, zero.structure;
+
 @layer zero.recipes {
     [data-scope="table"][data-part="root"] {
         --table-cell-align: start;
@@ -14,6 +16,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%;

package/dist/css/components/tabs.css

@@ -1,4 +1,10 @@
+@layer zero.fallback, zero.tokens, zero.recipes, zero.structure;
+
 @layer zero.recipes {
+    [data-scope="tabs"][data-part="root"] {
+        --tabs-ring-room: 4px;
+    }
+
     [data-scope="tabs"][data-part="root"] {
         display: flex;
         flex-direction: column;
@@ -8,6 +14,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"] {
@@ -44,6 +55,10 @@
         outline-offset: 2px;
     }
 
+    [data-scope="tabs"][data-part="indicator"] {
+        display: none;
+    }
+
     [data-scope="tabs"][data-part="panel"] {
         font-size: var(--text-md);
     }

package/dist/css/components/textarea.css

@@ -1,3 +1,5 @@
+@layer zero.fallback, zero.tokens, zero.recipes, zero.structure;
+
 @layer zero.recipes {
     [data-scope="textarea"][data-part="root"] {
         --textarea-accent: var(--color-base-content);

package/dist/css/components/timeline.css

@@ -1,3 +1,5 @@
+@layer zero.fallback, zero.tokens, zero.recipes, zero.structure;
+
 @layer zero.recipes {
     [data-scope="timeline"][data-part="root"] {
         --timeline-accent: var(--color-base-content);
@@ -15,6 +17,7 @@
 
     [data-scope="timeline"][data-part="root"][data-orientation="horizontal"] {
         flex-direction: row;
+        overflow-x: auto;
     }
 
     [data-scope="timeline"][data-part="item"] {

package/dist/css/components/toast.css

@@ -1,3 +1,5 @@
+@layer zero.fallback, zero.tokens, zero.recipes, zero.structure;
+
 @layer zero.recipes {
     [data-scope="toast"][data-part="root"] {
         --toast-bg: var(--color-base-200);

package/dist/css/components/toggle-group.css

@@ -1,3 +1,5 @@
+@layer zero.fallback, zero.tokens, zero.recipes, zero.structure;
+
 @layer zero.recipes {
     [data-scope="toggle-group"][data-part="root"] {
         --toggle-group-accent: var(--color-primary);

package/dist/css/components/toggle.css

@@ -1,3 +1,5 @@
+@layer zero.fallback, zero.tokens, zero.recipes, zero.structure;
+
 @layer zero.recipes {
     [data-scope="toggle"][data-part="root"] {
         --toggle-accent: var(--color-primary);

package/dist/css/components/tooltip.css

@@ -1,3 +1,5 @@
+@layer zero.fallback, zero.tokens, zero.recipes, zero.structure;
+
 @layer zero.recipes {
     [data-scope="tooltip"][data-part="trigger"] {
         appearance: none;

package/dist/css/components/tree-view.css

@@ -1,3 +1,5 @@
+@layer zero.fallback, zero.tokens, zero.recipes, zero.structure;
+
 @layer zero.recipes {
     [data-scope="tree-view"][data-part="root"] {
         --tree-accent: var(--color-primary);
@@ -123,6 +125,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;
     }