@sigx/zero-daisyui 0.2.0-beta.6 → 0.4.0

package/dist/css/components/combobox.css

@@ -11,6 +11,7 @@
     [data-scope="combobox"][data-part="control"] {
         display: inline-flex;
         align-items: stretch;
+        flex-wrap: wrap;
         min-width: 13rem;
         box-sizing: border-box;
         height: calc(var(--size-field) * 12);
@@ -64,6 +65,56 @@
         color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
     }
 
+    [data-scope="combobox"][data-part="tag"] {
+        display: inline-flex;
+        align-items: center;
+        align-self: center;
+        gap: var(--space-2xs);
+        margin: var(--space-2xs);
+        padding: var(--space-2xs) var(--space-sm);
+        background: var(--color-base-200);
+        color: var(--color-base-content);
+        border-radius: var(--radius-selector);
+        font-size: var(--text-xs);
+        font-weight: var(--weight-medium);
+        line-height: var(--leading-none);
+    }
+
+    [data-scope="combobox"][data-part="tag-label"] {
+        white-space: nowrap;
+    }
+
+    [data-scope="combobox"][data-part="tag-remove"] {
+        appearance: none;
+        border: none;
+        background: transparent;
+        color: inherit;
+        font: inherit;
+        border-radius: var(--radius-selector);
+        padding: 0 var(--space-2xs);
+        line-height: var(--leading-none);
+        cursor: pointer;
+        transition: background var(--duration-fast) var(--ease-standard);
+    }
+
+    [data-scope="combobox"][data-part="tag-remove"]:hover:not([data-disabled]) {
+        background: color-mix(in oklab, var(--color-base-content) 10%, transparent);
+    }
+
+    [data-scope="combobox"][data-part="tag-remove"][data-disabled] {
+        opacity: var(--disabled-opacity);
+        cursor: not-allowed;
+    }
+
+    [data-scope="combobox"][data-part="tag-remove"][data-focus-visible] {
+        outline: 2px solid var(--color-base-content);
+        outline-offset: 2px;
+    }
+
+    [data-scope="combobox"][data-part="tag-remove"][data-pressed]:not([data-disabled]) {
+        background: color-mix(in oklab, var(--color-base-content) 18%, transparent);
+    }
+
     [data-scope="combobox"][data-part="trigger"] {
         appearance: none;
         border: none;
@@ -112,7 +163,7 @@
         display: flex;
         align-items: center;
         justify-content: space-between;
-        gap: 0.625rem;
+        gap: var(--space-md);
         padding: var(--space-md) var(--space-lg);
         font-size: var(--text-sm);
         font-weight: var(--weight-medium);
@@ -179,7 +230,7 @@
 
     @scope ([data-scope="combobox"][data-part="root"][data-size="xs"]) to ([data-scope="combobox"][data-part="root"]) {
         [data-scope="combobox"][data-part="control"] {
-            height: calc(var(--size-field) * 8);
+            min-height: calc(var(--size-field) * 8);
         }
 
         [data-scope="combobox"][data-part="input"] {
@@ -190,7 +241,7 @@
 
     @scope ([data-scope="combobox"][data-part="root"][data-size="sm"]) to ([data-scope="combobox"][data-part="root"]) {
         [data-scope="combobox"][data-part="control"] {
-            height: calc(var(--size-field) * 10);
+            min-height: calc(var(--size-field) * 10);
         }
 
         [data-scope="combobox"][data-part="input"] {
@@ -201,7 +252,7 @@
 
     @scope ([data-scope="combobox"][data-part="root"][data-size="md"]) to ([data-scope="combobox"][data-part="root"]) {
         [data-scope="combobox"][data-part="control"] {
-            height: calc(var(--size-field) * 12);
+            min-height: calc(var(--size-field) * 12);
         }
 
         [data-scope="combobox"][data-part="input"] {
@@ -212,7 +263,7 @@
 
     @scope ([data-scope="combobox"][data-part="root"][data-size="lg"]) to ([data-scope="combobox"][data-part="root"]) {
         [data-scope="combobox"][data-part="control"] {
-            height: calc(var(--size-field) * 14);
+            min-height: calc(var(--size-field) * 14);
         }
 
         [data-scope="combobox"][data-part="input"] {
@@ -223,7 +274,7 @@
 
     @scope ([data-scope="combobox"][data-part="root"][data-size="xl"]) to ([data-scope="combobox"][data-part="root"]) {
         [data-scope="combobox"][data-part="control"] {
-            height: calc(var(--size-field) * 16);
+            min-height: calc(var(--size-field) * 16);
         }
 
         [data-scope="combobox"][data-part="input"] {

package/dist/css/components/container.css

@@ -0,0 +1,16 @@
+@layer zero.recipes {
+    [data-scope="container"][data-part="root"] {
+        --l-measure: none;
+        --l-pad: 0;
+        --l-pad-x: var(--l-pad);
+        --l-pad-y: var(--l-pad);
+    }
+
+    [data-scope="container"][data-part="root"] {
+        inline-size: 100%;
+        max-inline-size: var(--l-measure);
+        margin-inline: auto;
+        padding-inline: var(--l-pad-x);
+        padding-block: var(--l-pad-y);
+    }
+}

package/dist/css/components/countdown.css

@@ -72,6 +72,11 @@
         --countdown-font: var(--text-3xl);
     }
 
+    [data-scope="countdown"][data-part="root"][data-mod-inline] {
+        font-size: inherit;
+        font-weight: inherit;
+    }
+
     @media (prefers-reduced-motion: reduce) {
         [data-scope="countdown"][data-part="digits"] {
             animation: none;

package/dist/css/components/dialog.css

@@ -36,7 +36,8 @@
         opacity: 0;
         transform: translateY(8px) scale(0.97);
         transition: opacity var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard), display var(--duration-fast) allow-discrete, overlay var(--duration-fast) allow-discrete;
-        padding: 1.5rem;
+        box-sizing: border-box;
+        padding: var(--space-2xl);
         max-width: 32rem;
         width: calc(100% - 2rem);
         background: var(--color-base-100);
@@ -72,7 +73,7 @@
         display: flex;
         justify-content: flex-end;
         gap: var(--space-md);
-        margin-block-start: 1.5rem;
+        margin-block-start: var(--space-2xl);
     }
 
     [data-scope="dialog"][data-part="close"] {

package/dist/css/components/drawer.css

@@ -36,13 +36,17 @@
         opacity: 0;
         transform: none;
         transition: opacity var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard), display var(--duration-fast) allow-discrete, overlay var(--duration-fast) allow-discrete;
+        --drawer-travel: -100%;
         padding: var(--space-lg);
         background: var(--color-base-100);
         color: var(--color-base-content);
         border: none;
         border-radius: var(--radius-box);
         box-shadow: var(--shadow-xl);
-        inline-size: min(20rem, 85vw);
+        box-sizing: border-box;
+        --l-measure: min(20rem, 85vw);
+        inline-size: 100%;
+        max-inline-size: var(--l-measure);
     }
 
     [data-scope="drawer"][data-part="panel"][data-state="open"] {
@@ -50,24 +54,42 @@
         transform: none;
     }
 
-    [data-scope="drawer"][data-part="panel"]:modal {
+    [data-scope="drawer"][data-part="panel"][data-placement="end"] {
+        --drawer-travel: 100%;
+    }
+
+    [data-scope="drawer"][data-part="panel"][data-placement="start"]:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+        --drawer-travel: 100%;
+    }
+
+    [data-scope="drawer"][data-part="panel"][data-placement="end"]:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+        --drawer-travel: -100%;
+    }
+
+    [data-scope="drawer"][data-part="panel"][data-l-dock="sheet"] {
+        opacity: 1;
+        translate: var(--drawer-travel) 0;
+        transition: translate var(--duration-slow) var(--ease-standard), display var(--duration-slow) allow-discrete, overlay var(--duration-slow) allow-discrete;
         position: fixed;
         inset-block-start: 0;
         inset-block-end: 0;
         block-size: 100dvh;
         max-block-size: 100dvh;
-        inline-size: min(20rem, 85vw);
-        max-inline-size: none;
         margin: 0;
         border-radius: 0;
     }
 
-    [data-scope="drawer"][data-part="panel"][data-placement="start"]:modal {
+    [data-scope="drawer"][data-part="panel"][data-l-dock="sheet"][data-state="open"] {
+        translate: none;
+        transition: translate var(--duration-slow) var(--ease-standard), display var(--duration-slow) allow-discrete, overlay var(--duration-slow) allow-discrete;
+    }
+
+    [data-scope="drawer"][data-part="panel"][data-placement="start"][data-l-dock="sheet"] {
         inset-inline-start: 0;
         inset-inline-end: auto;
     }
 
-    [data-scope="drawer"][data-part="panel"][data-placement="end"]:modal {
+    [data-scope="drawer"][data-part="panel"][data-placement="end"][data-l-dock="sheet"] {
         inset-inline-start: auto;
         inset-inline-end: 0;
     }
@@ -274,6 +296,14 @@
         [data-scope="drawer"][data-part="panel"][data-state="open"] {
             transform: none;
         }
+
+        [data-scope="drawer"][data-part="panel"][data-l-dock="sheet"] {
+            transition: none;
+        }
+
+        [data-scope="drawer"][data-part="panel"][data-l-dock="sheet"][data-state="open"] {
+            transition: none;
+        }
     }
 
     @starting-style {
@@ -281,5 +311,71 @@
             opacity: 0;
             transform: none;
         }
+
+        [data-scope="drawer"][data-part="panel"][data-l-dock="sheet"][data-state="open"] {
+            opacity: 1;
+            translate: var(--drawer-travel) 0;
+        }
+    }
+}
+
+/* Responsive Drawer structure (`modal={{ below }}`) — generated by @sigx/zero-kit
+   per declared breakpoint; see compileDockCss. */
+@layer zero.structure {
+    @media (min-width: 40rem) {
+        [data-scope="drawer"][data-part="trigger"][data-l-dock-above="sm"],
+        [data-scope="drawer"][data-part="close"][data-l-dock-above="sm"] {
+            display: none;
+        }
+
+        [data-scope="drawer"][data-part="panel"][data-l-dock-above="sm"] {
+            position: relative;
+            inset: auto;
+            margin: 0;
+        }
+    }
+
+    @media (width < 40rem) {
+        [data-scope="drawer"][data-part="panel"][data-l-dock-above="sm"]:not(:modal) {
+            display: none;
+        }
+    }
+
+    @media (min-width: 48rem) {
+        [data-scope="drawer"][data-part="trigger"][data-l-dock-above="md"],
+        [data-scope="drawer"][data-part="close"][data-l-dock-above="md"] {
+            display: none;
+        }
+
+        [data-scope="drawer"][data-part="panel"][data-l-dock-above="md"] {
+            position: relative;
+            inset: auto;
+            margin: 0;
+        }
+    }
+
+    @media (width < 48rem) {
+        [data-scope="drawer"][data-part="panel"][data-l-dock-above="md"]:not(:modal) {
+            display: none;
+        }
+    }
+
+    @media (min-width: 64rem) {
+        [data-scope="drawer"][data-part="trigger"][data-l-dock-above="lg"],
+        [data-scope="drawer"][data-part="close"][data-l-dock-above="lg"] {
+            display: none;
+        }
+
+        [data-scope="drawer"][data-part="panel"][data-l-dock-above="lg"] {
+            position: relative;
+            inset: auto;
+            margin: 0;
+        }
+    }
+
+    @media (width < 64rem) {
+        [data-scope="drawer"][data-part="panel"][data-l-dock-above="lg"]:not(:modal) {
+            display: none;
+        }
     }
 }

package/dist/css/components/empty-state.css

@@ -0,0 +1,164 @@
+@layer zero.recipes {
+    [data-scope="empty-state"][data-part="root"] {
+        --empty-accent: color-mix(in oklab, var(--color-base-content) 60%, transparent);
+        --empty-tint: var(--color-base-200);
+    }
+
+    [data-scope="empty-state"][data-part="root"] {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        text-align: center;
+        gap: var(--space-sm);
+        padding: var(--space-2xl) var(--space-xl);
+        background: var(--empty-tint);
+        color: var(--color-base-content);
+        border-radius: var(--radius-box);
+    }
+
+    [data-scope="empty-state"][data-part="icon"] {
+        display: inline-flex;
+        color: var(--empty-accent);
+        font-size: var(--text-2xl);
+        line-height: var(--leading-none);
+        margin-block-end: var(--space-xs);
+    }
+
+    [data-scope="empty-state"][data-part="title"] {
+        margin: 0;
+        font-size: var(--text-lg);
+        font-weight: var(--weight-bold);
+        line-height: var(--leading-tight);
+    }
+
+    [data-scope="empty-state"][data-part="description"] {
+        max-inline-size: 36ch;
+        font-size: var(--text-sm);
+        line-height: var(--leading-normal);
+        color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
+    }
+
+    [data-scope="empty-state"][data-part="actions"] {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: var(--space-sm);
+        margin-block-start: var(--space-sm);
+    }
+
+    [data-scope="empty-state"][data-part="root"][data-color="primary"] {
+        --empty-accent: color-mix(in oklab, var(--color-primary) 95%, var(--color-base-content));
+        --empty-tint: var(--color-primary-soft);
+    }
+
+    [data-scope="empty-state"][data-part="root"][data-color="secondary"] {
+        --empty-accent: color-mix(in oklab, var(--color-secondary) 70%, var(--color-base-content));
+        --empty-tint: var(--color-secondary-soft);
+    }
+
+    [data-scope="empty-state"][data-part="root"][data-color="accent"] {
+        --empty-accent: color-mix(in oklab, var(--color-accent) 55%, var(--color-base-content));
+        --empty-tint: var(--color-accent-soft);
+    }
+
+    [data-scope="empty-state"][data-part="root"][data-color="neutral"] {
+        --empty-accent: color-mix(in oklab, var(--color-neutral) 40%, var(--color-base-content));
+        --empty-tint: var(--color-neutral-soft);
+    }
+
+    [data-scope="empty-state"][data-part="root"][data-color="info"] {
+        --empty-accent: color-mix(in oklab, var(--color-info) 70%, var(--color-base-content));
+        --empty-tint: var(--color-info-soft);
+    }
+
+    [data-scope="empty-state"][data-part="root"][data-color="success"] {
+        --empty-accent: color-mix(in oklab, var(--color-success) 55%, var(--color-base-content));
+        --empty-tint: var(--color-success-soft);
+    }
+
+    [data-scope="empty-state"][data-part="root"][data-color="warning"] {
+        --empty-accent: color-mix(in oklab, var(--color-warning) 45%, var(--color-base-content));
+        --empty-tint: var(--color-warning-soft);
+    }
+
+    [data-scope="empty-state"][data-part="root"][data-color="error"] {
+        --empty-accent: color-mix(in oklab, var(--color-error) 85%, var(--color-base-content));
+        --empty-tint: var(--color-error-soft);
+    }
+
+    [data-scope="empty-state"][data-part="root"][data-size="xs"] {
+        padding: var(--space-md);
+        gap: var(--space-2xs);
+    }
+
+    [data-scope="empty-state"][data-part="root"][data-size="sm"] {
+        padding: var(--space-lg);
+        gap: var(--space-xs);
+    }
+
+    [data-scope="empty-state"][data-part="root"][data-size="lg"] {
+        padding: calc(var(--space-2xl) * 1.5) var(--space-2xl);
+        gap: var(--space-md);
+    }
+
+    [data-scope="empty-state"][data-part="root"][data-size="xl"] {
+        padding: calc(var(--space-2xl) * 2) var(--space-2xl);
+        gap: var(--space-lg);
+    }
+
+    @scope ([data-scope="empty-state"][data-part="root"][data-size="xs"]) to ([data-scope="empty-state"][data-part="root"]) {
+        [data-scope="empty-state"][data-part="icon"] {
+            font-size: var(--text-xl);
+        }
+
+        [data-scope="empty-state"][data-part="title"] {
+            font-size: var(--text-sm);
+        }
+
+        [data-scope="empty-state"][data-part="description"] {
+            font-size: var(--text-xs);
+        }
+    }
+
+    @scope ([data-scope="empty-state"][data-part="root"][data-size="sm"]) to ([data-scope="empty-state"][data-part="root"]) {
+        [data-scope="empty-state"][data-part="icon"] {
+            font-size: var(--text-2xl);
+        }
+
+        [data-scope="empty-state"][data-part="title"] {
+            font-size: var(--text-md);
+        }
+
+        [data-scope="empty-state"][data-part="description"] {
+            font-size: var(--text-xs);
+        }
+    }
+
+    @scope ([data-scope="empty-state"][data-part="root"][data-size="lg"]) to ([data-scope="empty-state"][data-part="root"]) {
+        [data-scope="empty-state"][data-part="icon"] {
+            font-size: var(--text-2xl);
+        }
+
+        [data-scope="empty-state"][data-part="title"] {
+            font-size: var(--text-xl);
+        }
+
+        [data-scope="empty-state"][data-part="description"] {
+            font-size: var(--text-md);
+        }
+    }
+
+    @scope ([data-scope="empty-state"][data-part="root"][data-size="xl"]) to ([data-scope="empty-state"][data-part="root"]) {
+        [data-scope="empty-state"][data-part="icon"] {
+            font-size: var(--text-2xl);
+        }
+
+        [data-scope="empty-state"][data-part="title"] {
+            font-size: var(--text-2xl);
+        }
+
+        [data-scope="empty-state"][data-part="description"] {
+            font-size: var(--text-md);
+        }
+    }
+}

package/dist/css/components/grid.css

@@ -0,0 +1,32 @@
+@layer zero.recipes {
+    [data-scope="grid"][data-part="root"] {
+        --l-cols: none;
+        --l-track: 16rem;
+        --l-gap: 0;
+        --l-gap-x: var(--l-gap);
+        --l-gap-y: var(--l-gap);
+        --l-pad: 0;
+        --l-pad-x: var(--l-pad);
+        --l-pad-y: var(--l-pad);
+        --l-align: stretch;
+        --l-justify: stretch;
+    }
+
+    [data-scope="grid"][data-part="root"] {
+        display: grid;
+        min-inline-size: 0;
+        grid-template-columns: var(--l-cols);
+        column-gap: var(--l-gap-x);
+        row-gap: var(--l-gap-y);
+        padding-inline: var(--l-pad-x);
+        padding-block: var(--l-pad-y);
+        align-items: var(--l-align);
+        justify-items: var(--l-justify);
+    }
+
+    [data-scope="grid"][data-part="cell"] {
+        --l-span: auto;
+        grid-column: var(--l-span);
+        min-inline-size: 0;
+    }
+}

package/dist/css/components/kbd.css

@@ -9,7 +9,7 @@
         align-items: center;
         justify-content: center;
         min-inline-size: 1.75em;
-        padding: 0.0625rem 0.4375rem;
+        padding: calc(var(--space-2xs) - var(--border)) calc(var(--space-md) - var(--border));
         background: var(--kbd-fill);
         color: var(--kbd-ink);
         border: var(--border) solid var(--color-base-300);

package/dist/css/components/menu.css

@@ -57,7 +57,7 @@
     [data-scope="menu"][data-part="item"] {
         display: flex;
         align-items: center;
-        gap: 0.625rem;
+        gap: var(--space-md);
         padding: var(--space-md) var(--space-lg);
         font-size: var(--text-sm);
         font-weight: var(--weight-medium);
@@ -79,7 +79,7 @@
     [data-scope="menu"][data-part="checkbox-item"] {
         display: flex;
         align-items: center;
-        gap: 0.625rem;
+        gap: var(--space-md);
         padding: var(--space-md) var(--space-lg);
         font-size: var(--text-sm);
         font-weight: var(--weight-medium);
@@ -101,7 +101,7 @@
     [data-scope="menu"][data-part="radio-item"] {
         display: flex;
         align-items: center;
-        gap: 0.625rem;
+        gap: var(--space-md);
         padding: var(--space-md) var(--space-lg);
         font-size: var(--text-sm);
         font-weight: var(--weight-medium);
@@ -134,7 +134,7 @@
     [data-scope="menu"][data-part="sub-trigger"] {
         display: flex;
         align-items: center;
-        gap: 0.625rem;
+        gap: var(--space-md);
         padding: var(--space-md) var(--space-lg);
         font-size: var(--text-sm);
         font-weight: var(--weight-medium);