@sigx/zero-daisyui 0.9.0 → 0.10.0

package/README.md

@@ -21,7 +21,9 @@ Override `--depth: 0` on a subtree to flatten it.
 
 The modal drawer sheet **slides** in from its edge and back out, the way daisy's
 `drawer-side` does (`translate` over 0.3s), instead of fading (#83). The travel
-flips with the placement and with `dir="rtl"`, and reduced motion drops it.
+flips with the placement and with `dir="rtl"`, and reduced motion drops it. A
+`top`/`bottom` sheet (#291) spans the viewport's width, rounds its inner
+corners, and rises (or drops) on the block axis, which never mirrors.
 
 The checkbox tick, the radio dot and the rating fill are **drawn**, not typeset:
 each is geometry that interpolates between states, so it rides the size ramp and

package/dist/css/components/drawer.css

@@ -38,7 +38,7 @@
         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%;
+        --drawer-travel: -100% 0;
         padding: var(--space-lg);
         background: var(--color-base-100);
         color: var(--color-base-content);
@@ -57,20 +57,28 @@
     }
 
     [data-scope="drawer"][data-part="panel"][data-placement="end"] {
-        --drawer-travel: 100%;
+        --drawer-travel: 100% 0;
     }
 
     [data-scope="drawer"][data-part="panel"][data-placement="start"]:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
-        --drawer-travel: 100%;
+        --drawer-travel: 100% 0;
     }
 
     [data-scope="drawer"][data-part="panel"][data-placement="end"]:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
-        --drawer-travel: -100%;
+        --drawer-travel: -100% 0;
+    }
+
+    [data-scope="drawer"][data-part="panel"][data-placement="top"] {
+        --drawer-travel: 0 -100%;
+    }
+
+    [data-scope="drawer"][data-part="panel"][data-placement="bottom"] {
+        --drawer-travel: 0 100%;
     }
 
     [data-scope="drawer"][data-part="panel"][data-l-dock="sheet"] {
         opacity: 1;
-        translate: var(--drawer-travel) 0;
+        translate: var(--drawer-travel);
         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;
@@ -96,6 +104,34 @@
         inset-inline-end: 0;
     }
 
+    [data-scope="drawer"][data-part="panel"]:where([data-placement="top"], [data-placement="bottom"]) {
+        --l-measure: none;
+    }
+
+    [data-scope="drawer"][data-part="panel"][data-placement="top"][data-l-dock="sheet"] {
+        inset-block-start: 0;
+        inset-block-end: auto;
+        inset-inline-start: 0;
+        inset-inline-end: 0;
+        margin-inline: auto;
+        block-size: auto;
+        max-block-size: 85dvh;
+        border-end-start-radius: var(--radius-box);
+        border-end-end-radius: var(--radius-box);
+    }
+
+    [data-scope="drawer"][data-part="panel"][data-placement="bottom"][data-l-dock="sheet"] {
+        inset-block-start: auto;
+        inset-block-end: 0;
+        inset-inline-start: 0;
+        inset-inline-end: 0;
+        margin-inline: auto;
+        block-size: auto;
+        max-block-size: 85dvh;
+        border-start-start-radius: var(--radius-box);
+        border-start-end-radius: var(--radius-box);
+    }
+
     [data-scope="drawer"][data-part="panel"]::backdrop {
         background: oklch(0% 0 0 / 0.4);
     }
@@ -316,7 +352,7 @@
 
         [data-scope="drawer"][data-part="panel"][data-l-dock="sheet"][data-state="open"] {
             opacity: 1;
-            translate: var(--drawer-travel) 0;
+            translate: var(--drawer-travel);
         }
     }
 }

package/dist/css/index.css

@@ -10347,7 +10347,7 @@
         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%;
+        --drawer-travel: -100% 0;
         padding: var(--space-lg);
         background: var(--color-base-100);
         color: var(--color-base-content);
@@ -10366,20 +10366,28 @@
     }
 
     [data-scope="drawer"][data-part="panel"][data-placement="end"] {
-        --drawer-travel: 100%;
+        --drawer-travel: 100% 0;
     }
 
     [data-scope="drawer"][data-part="panel"][data-placement="start"]:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
-        --drawer-travel: 100%;
+        --drawer-travel: 100% 0;
     }
 
     [data-scope="drawer"][data-part="panel"][data-placement="end"]:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
-        --drawer-travel: -100%;
+        --drawer-travel: -100% 0;
+    }
+
+    [data-scope="drawer"][data-part="panel"][data-placement="top"] {
+        --drawer-travel: 0 -100%;
+    }
+
+    [data-scope="drawer"][data-part="panel"][data-placement="bottom"] {
+        --drawer-travel: 0 100%;
     }
 
     [data-scope="drawer"][data-part="panel"][data-l-dock="sheet"] {
         opacity: 1;
-        translate: var(--drawer-travel) 0;
+        translate: var(--drawer-travel);
         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;
@@ -10405,6 +10413,34 @@
         inset-inline-end: 0;
     }
 
+    [data-scope="drawer"][data-part="panel"]:where([data-placement="top"], [data-placement="bottom"]) {
+        --l-measure: none;
+    }
+
+    [data-scope="drawer"][data-part="panel"][data-placement="top"][data-l-dock="sheet"] {
+        inset-block-start: 0;
+        inset-block-end: auto;
+        inset-inline-start: 0;
+        inset-inline-end: 0;
+        margin-inline: auto;
+        block-size: auto;
+        max-block-size: 85dvh;
+        border-end-start-radius: var(--radius-box);
+        border-end-end-radius: var(--radius-box);
+    }
+
+    [data-scope="drawer"][data-part="panel"][data-placement="bottom"][data-l-dock="sheet"] {
+        inset-block-start: auto;
+        inset-block-end: 0;
+        inset-inline-start: 0;
+        inset-inline-end: 0;
+        margin-inline: auto;
+        block-size: auto;
+        max-block-size: 85dvh;
+        border-start-start-radius: var(--radius-box);
+        border-start-end-radius: var(--radius-box);
+    }
+
     [data-scope="drawer"][data-part="panel"]::backdrop {
         background: oklch(0% 0 0 / 0.4);
     }
@@ -10625,7 +10661,7 @@
 
         [data-scope="drawer"][data-part="panel"][data-l-dock="sheet"][data-state="open"] {
             opacity: 1;
-            translate: var(--drawer-travel) 0;
+            translate: var(--drawer-travel);
         }
     }
 }

package/dist/lynx/components/button.css

@@ -447,9 +447,9 @@
 
 .zx-button__root.zx-m-wide {
     inline-size: 100%;
-    max-inline-size: 16rem;
+    max-inline-size: 256px;
     width: 100%;
-    max-width: 16rem;
+    max-width: 256px;
 }
 
 .zx-button__root.zx-m-block {

package/dist/lynx/components/carousel.css

@@ -1,7 +1,7 @@
 .zx-carousel__root {
     --carousel-accent: var(--color-base-content);
-    --carousel-dot: 0.625rem;
-    --carousel-nav: 2rem;
+    --carousel-dot: 10px;
+    --carousel-nav: 32px;
 }
 
 .zx-carousel__root {
@@ -264,21 +264,21 @@
 }
 
 .zx-carousel__root.zx-a-size-xs {
-    --carousel-dot: 0.375rem;
-    --carousel-nav: 1.5rem;
+    --carousel-dot: 6px;
+    --carousel-nav: 24px;
 }
 
 .zx-carousel__root.zx-a-size-sm {
-    --carousel-dot: 0.5rem;
-    --carousel-nav: 1.75rem;
+    --carousel-dot: 8px;
+    --carousel-nav: 28px;
 }
 
 .zx-carousel__root.zx-a-size-lg {
-    --carousel-dot: 0.75rem;
-    --carousel-nav: 2.5rem;
+    --carousel-dot: 12px;
+    --carousel-nav: 40px;
 }
 
 .zx-carousel__root.zx-a-size-xl {
-    --carousel-dot: 0.875rem;
-    --carousel-nav: 3rem;
+    --carousel-dot: 14px;
+    --carousel-nav: 48px;
 }

package/dist/lynx/components/checkbox.css

@@ -1,5 +1,5 @@
 .zx-checkbox__root {
-    --checkbox-pad: 0.25rem;
+    --checkbox-pad: 4px;
     --checkbox-accent: var(--color-primary);
     --checkbox-on-accent: var(--color-primary-content);
 }
@@ -89,7 +89,7 @@
     background-color: var(--checkbox-on-accent);
     clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 70% 80%, 70% 100%);
     box-shadow: 0 3px 0 0 var(--depth-sheen) inset;
-    font-size: 1rem;
+    font-size: 16px;
     line-height: 0.75;
     transition: clip-path var(--duration-slow) var(--ease-standard) var(--duration-instant), opacity var(--duration-instant) var(--ease-standard) var(--duration-instant), transform var(--duration-slow) var(--ease-standard) var(--duration-instant);
     transform: rotate(45deg);
@@ -152,7 +152,7 @@
 }
 
 .zx-checkbox__root.zx-a-size-xs {
-    --checkbox-pad: 0.125rem;
+    --checkbox-pad: 2px;
 }
 
 .zx-checkbox__label.zx-a-size-xs {
@@ -160,7 +160,7 @@
 }
 
 .zx-checkbox__root.zx-a-size-sm {
-    --checkbox-pad: 0.1875rem;
+    --checkbox-pad: 3px;
 }
 
 .zx-checkbox__label.zx-a-size-sm {
@@ -168,7 +168,7 @@
 }
 
 .zx-checkbox__root.zx-a-size-md {
-    --checkbox-pad: 0.25rem;
+    --checkbox-pad: 4px;
 }
 
 .zx-checkbox__label.zx-a-size-md {
@@ -176,7 +176,7 @@
 }
 
 .zx-checkbox__root.zx-a-size-lg {
-    --checkbox-pad: 0.3125rem;
+    --checkbox-pad: 5px;
 }
 
 .zx-checkbox__label.zx-a-size-lg {
@@ -184,7 +184,7 @@
 }
 
 .zx-checkbox__root.zx-a-size-xl {
-    --checkbox-pad: 0.375rem;
+    --checkbox-pad: 6px;
 }
 
 .zx-checkbox__label.zx-a-size-xl {

package/dist/lynx/components/combobox.css

@@ -11,7 +11,7 @@
     display: flex;
     align-items: stretch;
     flex-wrap: wrap;
-    min-width: 13rem;
+    min-width: 208px;
     box-sizing: border-box;
     height: calc(var(--size-field) * 12);
     background: var(--color-base-100);
@@ -162,7 +162,7 @@
     border-radius: var(--radius-box);
     box-shadow: var(--shadow-lg);
     padding: var(--space-md);
-    min-width: 13rem;
+    min-width: 208px;
 }
 
 .zx-combobox__popup.zx-s-open {

package/dist/lynx/components/dialog.css

@@ -44,8 +44,8 @@
     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;
     box-sizing: border-box;
     padding: var(--space-2xl);
-    max-width: 32rem;
-    width: calc(100% - 2rem);
+    max-width: 512px;
+    width: calc(100% - 32px);
     background: var(--color-base-100);
     color: var(--color-base-content);
     border: none;

package/dist/lynx/components/diff.css

@@ -1,7 +1,7 @@
 .zx-diff__root {
     --diff-accent: var(--color-base-content);
-    --diff-grip: 1.5rem;
-    --diff-hit: 2rem;
+    --diff-grip: 24px;
+    --diff-hit: 32px;
 }
 
 .zx-diff__root {
@@ -227,21 +227,21 @@
 }
 
 .zx-diff__root.zx-a-size-xs {
-    --diff-grip: 1rem;
-    --diff-hit: 1.5rem;
+    --diff-grip: 16px;
+    --diff-hit: 24px;
 }
 
 .zx-diff__root.zx-a-size-sm {
-    --diff-grip: 1.25rem;
-    --diff-hit: 1.75rem;
+    --diff-grip: 20px;
+    --diff-hit: 28px;
 }
 
 .zx-diff__root.zx-a-size-lg {
-    --diff-grip: 2rem;
-    --diff-hit: 2.5rem;
+    --diff-grip: 32px;
+    --diff-hit: 40px;
 }
 
 .zx-diff__root.zx-a-size-xl {
-    --diff-grip: 2.25rem;
-    --diff-hit: 2.75rem;
+    --diff-grip: 36px;
+    --diff-hit: 44px;
 }

package/dist/lynx/components/drawer.css

@@ -32,7 +32,7 @@
     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%;
+    --drawer-travel: -100% 0;
     padding: var(--space-lg);
     background: var(--color-base-100);
     color: var(--color-base-content);
@@ -50,7 +50,15 @@
 }
 
 .zx-drawer__panel.zx-p-end {
-    --drawer-travel: 100%;
+    --drawer-travel: 100% 0;
+}
+
+.zx-drawer__panel.zx-p-top {
+    --drawer-travel: 0 -100%;
+}
+
+.zx-drawer__panel.zx-p-bottom {
+    --drawer-travel: 0 100%;
 }
 
 .zx-drawer__panel.zx-l-dock-sheet {
@@ -67,6 +75,20 @@
     transition: translate var(--duration-slow) var(--ease-standard), display var(--duration-slow) allow-discrete, overlay var(--duration-slow) allow-discrete;
 }
 
+.zx-drawer__panel.zx-p-top.zx-l-dock-sheet {
+    block-size: auto;
+    max-block-size: 85dvh;
+    border-end-start-radius: var(--radius-box);
+    border-end-end-radius: var(--radius-box);
+}
+
+.zx-drawer__panel.zx-p-bottom.zx-l-dock-sheet {
+    block-size: auto;
+    max-block-size: 85dvh;
+    border-start-start-radius: var(--radius-box);
+    border-start-end-radius: var(--radius-box);
+}
+
 .zx-drawer__backdrop {
     background: #00000066;
 }

package/dist/lynx/components/grid.css

@@ -1,6 +1,6 @@
 .zx-grid__root {
     --l-cols: none;
-    --l-track: 16rem;
+    --l-track: 256px;
     --l-gap: 0;
     --l-gap-x: var(--l-gap);
     --l-gap-y: var(--l-gap);

package/dist/lynx/components/hover-card.css

@@ -25,7 +25,7 @@
     border-radius: var(--radius-box);
     box-shadow: var(--shadow-lg);
     padding: var(--space-xl);
-    max-width: 20rem;
+    max-width: 320px;
     font-size: var(--text-sm);
 }
 

package/dist/lynx/components/menu.css

@@ -42,7 +42,7 @@
     border-radius: var(--radius-box);
     box-shadow: var(--shadow-lg);
     padding: var(--space-md);
-    min-width: 13rem;
+    min-width: 208px;
 }
 
 .zx-menu__popup.zx-s-open {
@@ -159,7 +159,7 @@
     border-radius: var(--radius-box);
     box-shadow: var(--shadow-lg);
     padding: var(--space-md);
-    min-width: 13rem;
+    min-width: 208px;
 }
 
 .zx-menu__sub-popup.zx-s-open {

package/dist/lynx/components/navbar.css

@@ -2,7 +2,7 @@
     display: flex;
     align-items: center;
     gap: var(--space-sm);
-    min-block-size: 4rem;
+    min-block-size: 64px;
     padding: var(--space-sm);
     background: var(--color-base-100);
     color: var(--color-base-content);
@@ -72,20 +72,20 @@
 }
 
 .zx-navbar__root.zx-a-size-xs {
-    min-block-size: 2.5rem;
+    min-block-size: 40px;
     font-size: var(--text-sm);
 }
 
 .zx-navbar__root.zx-a-size-sm {
-    min-block-size: 3rem;
+    min-block-size: 48px;
     font-size: var(--text-sm);
 }
 
 .zx-navbar__root.zx-a-size-lg {
-    min-block-size: 5rem;
+    min-block-size: 80px;
 }
 
 .zx-navbar__root.zx-a-size-xl {
-    min-block-size: 6rem;
+    min-block-size: 96px;
     font-size: var(--text-lg);
 }

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

@@ -64,7 +64,7 @@
 }
 
 .zx-number-input__input {
-    width: 5rem;
+    width: 80px;
     min-width: 0;
     appearance: none;
     border: none;

package/dist/lynx/components/popover.css

@@ -52,7 +52,7 @@
     border-radius: var(--radius-box);
     box-shadow: var(--shadow-lg);
     padding: var(--space-2xl);
-    min-width: 15rem;
+    min-width: 240px;
 }
 
 .zx-popover__popup.zx-s-open {

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

@@ -1,5 +1,5 @@
 .zx-radio-group__root {
-    --radio-pad: 0.25rem;
+    --radio-pad: 4px;
     --radio-accent: var(--color-primary);
 }
 
@@ -139,7 +139,7 @@
 }
 
 .zx-radio-group__root.zx-a-size-xs {
-    --radio-pad: 0.125rem;
+    --radio-pad: 2px;
 }
 
 .zx-radio-group__item-label.zx-a-size-xs {
@@ -147,7 +147,7 @@
 }
 
 .zx-radio-group__root.zx-a-size-sm {
-    --radio-pad: 0.1875rem;
+    --radio-pad: 3px;
 }
 
 .zx-radio-group__item-label.zx-a-size-sm {
@@ -155,7 +155,7 @@
 }
 
 .zx-radio-group__root.zx-a-size-md {
-    --radio-pad: 0.25rem;
+    --radio-pad: 4px;
 }
 
 .zx-radio-group__item-label.zx-a-size-md {
@@ -163,7 +163,7 @@
 }
 
 .zx-radio-group__root.zx-a-size-lg {
-    --radio-pad: 0.3125rem;
+    --radio-pad: 5px;
 }
 
 .zx-radio-group__item-label.zx-a-size-lg {
@@ -171,7 +171,7 @@
 }
 
 .zx-radio-group__root.zx-a-size-xl {
-    --radio-pad: 0.375rem;
+    --radio-pad: 6px;
 }
 
 .zx-radio-group__item-label.zx-a-size-xl {

package/dist/lynx/components/select.css

@@ -6,9 +6,9 @@
     display: flex;
     flex-direction: column;
     position: relative;
-    width: 20rem;
+    width: 320px;
     max-width: 100%;
-    min-width: 3rem;
+    min-width: 48px;
 }
 
 .zx-select__trigger {
@@ -28,7 +28,7 @@
     cursor: pointer;
     transition: background var(--duration-normal) var(--ease-standard);
     box-sizing: border-box;
-    min-width: 3rem;
+    min-width: 48px;
     padding-left: calc(var(--size-field) * 4);
     padding-right: calc(var(--size-field) * 4);
     width: 100%;
@@ -85,6 +85,8 @@
 .zx-select__indicator {
     opacity: 0.6;
     transition: transform var(--duration-normal) var(--ease-standard);
+    width: 1em;
+    text-align: right;
 }
 
 .zx-select__indicator.zx-s-open {
@@ -94,7 +96,7 @@
 .zx-select__clear-trigger {
     appearance: none;
     position: absolute;
-    min-inline-size: 1.5rem;
+    min-inline-size: 24px;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -107,10 +109,12 @@
     border-radius: var(--radius-field);
     cursor: pointer;
     transition: background var(--duration-fast) var(--ease-standard);
-    top: var(--space-xs);
-    bottom: var(--space-xs);
-    right: calc(var(--size-field) * 4 + 1em + var(--space-xs));
-    min-width: 1.5rem;
+    top: calc(var(--size-field) * 6 - 12px);
+    right: calc(var(--border) + var(--size-field) * 4 + var(--text-sm) + var(--space-xs));
+    width: 24px;
+    height: 24px;
+    min-width: 24px;
+    box-sizing: border-box;
 }
 
 .zx-root .zx-select__clear-trigger {
@@ -136,7 +140,7 @@
 .zx-select__clear-trigger.zx-f-focus-visible {
     outline: none;
     outline-offset: 2px;
-    box-shadow: 0 0 0 2px var(--color-base-100), 0 0 0 4px var(--color-base-content);
+    box-shadow: inset 0 0 0 2px var(--color-base-content);
 }
 
 .zx-select__popup {
@@ -149,7 +153,7 @@
     border-radius: var(--radius-box);
     box-shadow: var(--shadow-lg);
     padding: var(--space-md);
-    min-width: 13rem;
+    min-width: 208px;
     --select-accent: var(--color-primary);
 }
 
@@ -285,6 +289,11 @@
     padding-right: calc(var(--size-field) * 2);
 }
 
+.zx-select__clear-trigger.zx-a-size-xs {
+    top: calc(var(--size-field) * 4 - 12px);
+    right: calc(var(--border) + var(--size-field) * 2 + var(--text-xs) + var(--space-xs));
+}
+
 .zx-select__trigger.zx-a-size-sm {
     height: calc(var(--size-field) * 10);
     font-size: var(--text-sm);
@@ -292,6 +301,11 @@
     padding-right: calc(var(--size-field) * 3);
 }
 
+.zx-select__clear-trigger.zx-a-size-sm {
+    top: calc(var(--size-field) * 5 - 12px);
+    right: calc(var(--border) + var(--size-field) * 3 + var(--text-sm) + var(--space-xs));
+}
+
 .zx-select__trigger.zx-a-size-md {
     height: calc(var(--size-field) * 12);
     font-size: var(--text-sm);
@@ -299,6 +313,11 @@
     padding-right: calc(var(--size-field) * 4);
 }
 
+.zx-select__clear-trigger.zx-a-size-md {
+    top: calc(var(--size-field) * 6 - 12px);
+    right: calc(var(--border) + var(--size-field) * 4 + var(--text-sm) + var(--space-xs));
+}
+
 .zx-select__trigger.zx-a-size-lg {
     height: calc(var(--size-field) * 14);
     font-size: var(--text-md);
@@ -306,9 +325,19 @@
     padding-right: calc(var(--size-field) * 5);
 }
 
+.zx-select__clear-trigger.zx-a-size-lg {
+    top: calc(var(--size-field) * 7 - 12px);
+    right: calc(var(--border) + var(--size-field) * 5 + var(--text-md) + var(--space-xs));
+}
+
 .zx-select__trigger.zx-a-size-xl {
     height: calc(var(--size-field) * 16);
     font-size: var(--text-lg);
     padding-left: calc(var(--size-field) * 6);
     padding-right: calc(var(--size-field) * 6);
 }
+
+.zx-select__clear-trigger.zx-a-size-xl {
+    top: calc(var(--size-field) * 8 - 12px);
+    right: calc(var(--border) + var(--size-field) * 6 + var(--text-lg) + var(--space-xs));
+}