@sigx/zero-daisyui 0.5.0 → 0.7.0

package/dist/css/components/indicator.css

@@ -1,3 +1,5 @@
+@layer zero.fallback, zero.tokens, zero.recipes, zero.structure;
+
 @layer zero.recipes {
     [data-scope="indicator"][data-part="root"] {
         position: relative;

package/dist/css/components/input.css

@@ -1,3 +1,5 @@
+@layer zero.fallback, zero.tokens, zero.recipes, zero.structure;
+
 @layer zero.recipes {
     [data-scope="input"][data-part="root"] {
         --input-accent: var(--color-base-content);
@@ -25,6 +27,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);
@@ -73,6 +76,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);
     }
@@ -114,6 +203,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"]) {
@@ -125,6 +226,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"]) {
@@ -136,6 +249,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"]) {
@@ -147,5 +272,17 @@
             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);
+        }
     }
 }

package/dist/css/components/join.css

@@ -1,3 +1,5 @@
+@layer zero.fallback, zero.tokens, zero.recipes, zero.structure;
+
 @layer zero.recipes {
     [data-scope="join"][data-part="root"] {
         display: inline-flex;

package/dist/css/components/kbd.css

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

package/dist/css/components/menu.css

@@ -1,3 +1,5 @@
+@layer zero.fallback, zero.tokens, zero.recipes, zero.structure;
+
 @layer zero.recipes {
     [data-scope="menu"][data-part="trigger"] {
         appearance: none;
@@ -54,6 +56,10 @@
         transform: none;
     }
 
+    [data-scope="menu"][data-part="popup"]:has(> [data-scope="menu"][data-part="arrow"]) {
+        overflow: visible;
+    }
+
     [data-scope="menu"][data-part="item"] {
         display: flex;
         align-items: center;
@@ -198,6 +204,68 @@
         background: var(--color-base-300);
     }
 
+    [data-scope="menu"][data-part="arrow"] {
+        display: none;
+        position: absolute;
+        box-sizing: border-box;
+        width: 0.625rem;
+        height: 0.625rem;
+        rotate: 45deg;
+        pointer-events: none;
+        background: var(--color-base-100);
+        border: var(--border) solid var(--color-base-300);
+    }
+
+    [data-scope="menu"][data-part="popup"][data-placement^="top"] > [data-scope="menu"][data-part="arrow"] {
+        display: block;
+        top: calc(100% - 0.625rem / 2);
+        left: var(--arrow-x, calc(50% - 0.625rem / 2));
+        clip-path: polygon(100% 0, 100% 100%, 0 100%);
+    }
+
+    [data-scope="menu"][data-part="popup"][data-placement^="bottom"] > [data-scope="menu"][data-part="arrow"] {
+        display: block;
+        top: calc(0.625rem / -2);
+        left: var(--arrow-x, calc(50% - 0.625rem / 2));
+        clip-path: polygon(0 0, 100% 0, 0 100%);
+    }
+
+    [data-scope="menu"][data-part="popup"][data-placement^="left"] > [data-scope="menu"][data-part="arrow"] {
+        display: block;
+        left: calc(100% - 0.625rem / 2);
+        top: var(--arrow-y, calc(50% - 0.625rem / 2));
+        clip-path: polygon(0 0, 100% 0, 100% 100%);
+    }
+
+    [data-scope="menu"][data-part="popup"][data-placement^="right"] > [data-scope="menu"][data-part="arrow"] {
+        display: block;
+        left: calc(0.625rem / -2);
+        top: var(--arrow-y, calc(50% - 0.625rem / 2));
+        clip-path: polygon(0 0, 100% 100%, 0 100%);
+    }
+
+    [data-scope="menu"][data-part="popup"][data-placement^="start"] > [data-scope="menu"][data-part="arrow"] {
+        display: block;
+        inset-inline-start: calc(100% - 0.625rem / 2);
+        top: var(--arrow-y, calc(50% - 0.625rem / 2));
+        clip-path: polygon(0 0, 100% 0, 100% 100%);
+    }
+
+    [data-scope="menu"][data-part="popup"][data-placement^="end"] > [data-scope="menu"][data-part="arrow"] {
+        display: block;
+        inset-inline-start: calc(0.625rem / -2);
+        top: var(--arrow-y, calc(50% - 0.625rem / 2));
+        clip-path: polygon(0 0, 100% 100%, 0 100%);
+    }
+
+    [data-scope="menu"][data-part="popup"][data-placement^="start"]:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) > [data-scope="menu"][data-part="arrow"] {
+        clip-path: polygon(0 0, 100% 100%, 0 100%);
+    }
+
+    [data-scope="menu"][data-part="popup"][data-placement^="end"]:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) > [data-scope="menu"][data-part="arrow"] {
+        clip-path: polygon(0 0, 100% 0, 100% 100%);
+    }
+
     [data-scope="menu"][data-part="trigger"][data-color="primary"] {
         background: var(--color-primary);
         color: var(--color-primary-content);

package/dist/css/components/nav-list.css

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

package/dist/css/components/navbar.css

@@ -1,3 +1,5 @@
+@layer zero.fallback, zero.tokens, zero.recipes, zero.structure;
+
 @layer zero.recipes {
     [data-scope="navbar"][data-part="root"] {
         display: flex;

package/dist/css/components/number-input.css

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

package/dist/css/components/pagination.css

@@ -1,15 +1,21 @@
+@layer zero.fallback, zero.tokens, zero.recipes, zero.structure;
+
 @layer zero.recipes {
     [data-scope="pagination"][data-part="root"] {
         --pg-accent: var(--color-primary);
         --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"] {

package/dist/css/components/popover.css

@@ -1,3 +1,5 @@
+@layer zero.fallback, zero.tokens, zero.recipes, zero.structure;
+
 @layer zero.recipes {
     [data-scope="popover"][data-part="trigger"] {
         appearance: none;
@@ -54,12 +56,22 @@
         transform: none;
     }
 
+    [data-scope="popover"][data-part="popup"]:has(> [data-scope="popover"][data-part="arrow"]) {
+        overflow: visible;
+    }
+
     [data-scope="popover"][data-part="title"] {
         margin: 0 0 var(--space-md);
         font-size: var(--text-md);
         font-weight: var(--weight-bold);
     }
 
+    [data-scope="popover"][data-part="description"] {
+        margin: 0 0 var(--space-lg);
+        font-size: var(--text-sm);
+        color: color-mix(in oklab, var(--color-base-content) 75%, transparent);
+    }
+
     [data-scope="popover"][data-part="close"] {
         appearance: none;
         display: inline-flex;
@@ -92,6 +104,68 @@
         outline-offset: 2px;
     }
 
+    [data-scope="popover"][data-part="arrow"] {
+        display: none;
+        position: absolute;
+        box-sizing: border-box;
+        width: 0.625rem;
+        height: 0.625rem;
+        rotate: 45deg;
+        pointer-events: none;
+        background: var(--color-base-100);
+        border: var(--border) solid var(--color-base-300);
+    }
+
+    [data-scope="popover"][data-part="popup"][data-placement^="top"] > [data-scope="popover"][data-part="arrow"] {
+        display: block;
+        top: calc(100% - 0.625rem / 2);
+        left: var(--arrow-x, calc(50% - 0.625rem / 2));
+        clip-path: polygon(100% 0, 100% 100%, 0 100%);
+    }
+
+    [data-scope="popover"][data-part="popup"][data-placement^="bottom"] > [data-scope="popover"][data-part="arrow"] {
+        display: block;
+        top: calc(0.625rem / -2);
+        left: var(--arrow-x, calc(50% - 0.625rem / 2));
+        clip-path: polygon(0 0, 100% 0, 0 100%);
+    }
+
+    [data-scope="popover"][data-part="popup"][data-placement^="left"] > [data-scope="popover"][data-part="arrow"] {
+        display: block;
+        left: calc(100% - 0.625rem / 2);
+        top: var(--arrow-y, calc(50% - 0.625rem / 2));
+        clip-path: polygon(0 0, 100% 0, 100% 100%);
+    }
+
+    [data-scope="popover"][data-part="popup"][data-placement^="right"] > [data-scope="popover"][data-part="arrow"] {
+        display: block;
+        left: calc(0.625rem / -2);
+        top: var(--arrow-y, calc(50% - 0.625rem / 2));
+        clip-path: polygon(0 0, 100% 100%, 0 100%);
+    }
+
+    [data-scope="popover"][data-part="popup"][data-placement^="start"] > [data-scope="popover"][data-part="arrow"] {
+        display: block;
+        inset-inline-start: calc(100% - 0.625rem / 2);
+        top: var(--arrow-y, calc(50% - 0.625rem / 2));
+        clip-path: polygon(0 0, 100% 0, 100% 100%);
+    }
+
+    [data-scope="popover"][data-part="popup"][data-placement^="end"] > [data-scope="popover"][data-part="arrow"] {
+        display: block;
+        inset-inline-start: calc(0.625rem / -2);
+        top: var(--arrow-y, calc(50% - 0.625rem / 2));
+        clip-path: polygon(0 0, 100% 100%, 0 100%);
+    }
+
+    [data-scope="popover"][data-part="popup"][data-placement^="start"]:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) > [data-scope="popover"][data-part="arrow"] {
+        clip-path: polygon(0 0, 100% 100%, 0 100%);
+    }
+
+    [data-scope="popover"][data-part="popup"][data-placement^="end"]:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) > [data-scope="popover"][data-part="arrow"] {
+        clip-path: polygon(0 0, 100% 0, 100% 100%);
+    }
+
     [data-scope="popover"][data-part="trigger"][data-color="primary"] {
         background: var(--color-primary);
         color: var(--color-primary-content);

package/dist/css/components/progress.css

@@ -1,3 +1,5 @@
+@layer zero.fallback, zero.tokens, zero.recipes, zero.structure;
+
 @layer zero.recipes {
     [data-scope="progress"][data-part="root"] {
         --progress-accent: color-mix(in oklab, var(--color-primary) 90%, var(--color-primary-content));
@@ -31,10 +33,6 @@
         transition: width var(--duration-slow) var(--ease-standard);
     }
 
-    [data-scope="progress"][data-part="range"][data-state="complete"] {
-        background: color-mix(in oklab, var(--color-success) 55%, var(--color-success-content));
-    }
-
     [data-scope="progress"][data-part="range"][data-state="indeterminate"] {
         width: 40%;
         animation: zero-daisy-indeterminate 1.2s ease-in-out infinite;

package/dist/css/components/radial-progress.css

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

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

@@ -1,3 +1,5 @@
+@layer zero.fallback, zero.tokens, zero.recipes, zero.structure;
+
 @layer zero.recipes {
     [data-scope="radio-group"][data-part="root"] {
         --radio-size: calc(var(--size-selector) * 6);
@@ -11,10 +13,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);
@@ -31,6 +29,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;
@@ -58,6 +60,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;

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

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

package/dist/css/components/select.css

@@ -1,3 +1,5 @@
+@layer zero.fallback, zero.tokens, zero.recipes, zero.structure;
+
 @layer zero.recipes {
     [data-scope="select"][data-part="root"] {
         --select-accent: var(--color-primary);
@@ -6,6 +8,7 @@
     [data-scope="select"][data-part="root"] {
         display: inline-flex;
         flex-direction: column;
+        position: relative;
     }
 
     [data-scope="select"][data-part="trigger"] {
@@ -33,6 +36,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;
@@ -64,6 +71,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);
@@ -74,7 +118,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"] {
@@ -128,6 +175,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);
     }

package/dist/css/components/skeleton.css

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