@sigx/zero-daisyui 0.6.0 → 0.7.0

package/dist/css/index.css

@@ -1467,12 +1467,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;
@@ -1505,6 +1515,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);
@@ -1732,6 +1804,71 @@
         transform: none;
     }
 
+    [data-scope="tooltip"][data-part="popup"]:has(> [data-scope="tooltip"][data-part="arrow"]) {
+        overflow: visible;
+    }
+
+    [data-scope="tooltip"][data-part="arrow"] {
+        display: none;
+        position: absolute;
+        box-sizing: border-box;
+        width: 0.5rem;
+        height: 0.5rem;
+        rotate: 45deg;
+        pointer-events: none;
+        background: var(--color-neutral);
+    }
+
+    [data-scope="tooltip"][data-part="popup"][data-placement^="top"] > [data-scope="tooltip"][data-part="arrow"] {
+        display: block;
+        top: calc(100% - 0.5rem / 2);
+        left: var(--arrow-x, calc(50% - 0.5rem / 2));
+        clip-path: polygon(100% 0, 100% 100%, 0 100%);
+    }
+
+    [data-scope="tooltip"][data-part="popup"][data-placement^="bottom"] > [data-scope="tooltip"][data-part="arrow"] {
+        display: block;
+        top: calc(0.5rem / -2);
+        left: var(--arrow-x, calc(50% - 0.5rem / 2));
+        clip-path: polygon(0 0, 100% 0, 0 100%);
+    }
+
+    [data-scope="tooltip"][data-part="popup"][data-placement^="left"] > [data-scope="tooltip"][data-part="arrow"] {
+        display: block;
+        left: calc(100% - 0.5rem / 2);
+        top: var(--arrow-y, calc(50% - 0.5rem / 2));
+        clip-path: polygon(0 0, 100% 0, 100% 100%);
+    }
+
+    [data-scope="tooltip"][data-part="popup"][data-placement^="right"] > [data-scope="tooltip"][data-part="arrow"] {
+        display: block;
+        left: calc(0.5rem / -2);
+        top: var(--arrow-y, calc(50% - 0.5rem / 2));
+        clip-path: polygon(0 0, 100% 100%, 0 100%);
+    }
+
+    [data-scope="tooltip"][data-part="popup"][data-placement^="start"] > [data-scope="tooltip"][data-part="arrow"] {
+        display: block;
+        inset-inline-start: calc(100% - 0.5rem / 2);
+        top: var(--arrow-y, calc(50% - 0.5rem / 2));
+        clip-path: polygon(0 0, 100% 0, 100% 100%);
+    }
+
+    [data-scope="tooltip"][data-part="popup"][data-placement^="end"] > [data-scope="tooltip"][data-part="arrow"] {
+        display: block;
+        inset-inline-start: calc(0.5rem / -2);
+        top: var(--arrow-y, calc(50% - 0.5rem / 2));
+        clip-path: polygon(0 0, 100% 100%, 0 100%);
+    }
+
+    [data-scope="tooltip"][data-part="popup"][data-placement^="start"]:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) > [data-scope="tooltip"][data-part="arrow"] {
+        clip-path: polygon(0 0, 100% 100%, 0 100%);
+    }
+
+    [data-scope="tooltip"][data-part="popup"][data-placement^="end"]:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) > [data-scope="tooltip"][data-part="arrow"] {
+        clip-path: polygon(0 0, 100% 0, 100% 100%);
+    }
+
     [data-scope="tooltip"][data-part="trigger"][data-color="primary"] {
         background: var(--color-primary);
         color: var(--color-primary-content);
@@ -1958,6 +2095,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;
@@ -2102,6 +2243,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);
@@ -2397,6 +2600,96 @@
     }
 }
 
+@layer zero.recipes {
+    [data-scope="fieldset"][data-part="root"] {
+        --fieldset-accent: var(--color-base-content);
+    }
+
+    [data-scope="fieldset"][data-part="root"] {
+        display: grid;
+        grid-template-columns: 1fr;
+        grid-auto-rows: max-content;
+        gap: var(--space-sm);
+        min-inline-size: 0;
+        margin: 0;
+        padding-block: var(--space-xs);
+        padding-inline: 0;
+        border: none;
+    }
+
+    [data-scope="fieldset"][data-part="legend"] {
+        padding-block: var(--space-sm);
+        padding-inline: 0;
+        font-size: var(--text-sm);
+        font-weight: var(--weight-semibold);
+        color: var(--fieldset-accent);
+    }
+
+    [data-scope="fieldset"][data-part="legend"][data-disabled] {
+        opacity: var(--disabled-opacity);
+    }
+
+    [data-scope="fieldset"][data-part="legend"][data-invalid] {
+        color: color-mix(in oklab, var(--color-error) 85%, var(--color-base-content));
+    }
+
+    [data-scope="fieldset"][data-part="root"][data-color="primary"] {
+        --fieldset-accent: color-mix(in oklab, var(--color-primary) 95%, var(--color-base-content));
+    }
+
+    [data-scope="fieldset"][data-part="root"][data-color="secondary"] {
+        --fieldset-accent: color-mix(in oklab, var(--color-secondary) 70%, var(--color-base-content));
+    }
+
+    [data-scope="fieldset"][data-part="root"][data-color="accent"] {
+        --fieldset-accent: color-mix(in oklab, var(--color-accent) 55%, var(--color-base-content));
+    }
+
+    [data-scope="fieldset"][data-part="root"][data-color="neutral"] {
+        --fieldset-accent: color-mix(in oklab, var(--color-neutral) 40%, var(--color-base-content));
+    }
+
+    [data-scope="fieldset"][data-part="root"][data-color="info"] {
+        --fieldset-accent: color-mix(in oklab, var(--color-info) 70%, var(--color-base-content));
+    }
+
+    [data-scope="fieldset"][data-part="root"][data-color="success"] {
+        --fieldset-accent: color-mix(in oklab, var(--color-success) 55%, var(--color-base-content));
+    }
+
+    [data-scope="fieldset"][data-part="root"][data-color="warning"] {
+        --fieldset-accent: color-mix(in oklab, var(--color-warning) 45%, var(--color-base-content));
+    }
+
+    [data-scope="fieldset"][data-part="root"][data-color="error"] {
+        --fieldset-accent: color-mix(in oklab, var(--color-error) 85%, var(--color-base-content));
+    }
+
+    @scope ([data-scope="fieldset"][data-part="root"][data-size="xs"]) to ([data-scope="fieldset"][data-part="root"]) {
+        [data-scope="fieldset"][data-part="legend"] {
+            font-size: var(--text-xs);
+        }
+    }
+
+    @scope ([data-scope="fieldset"][data-part="root"][data-size="sm"]) to ([data-scope="fieldset"][data-part="root"]) {
+        [data-scope="fieldset"][data-part="legend"] {
+            font-size: var(--text-xs);
+        }
+    }
+
+    @scope ([data-scope="fieldset"][data-part="root"][data-size="lg"]) to ([data-scope="fieldset"][data-part="root"]) {
+        [data-scope="fieldset"][data-part="legend"] {
+            font-size: var(--text-md);
+        }
+    }
+
+    @scope ([data-scope="fieldset"][data-part="root"][data-size="xl"]) to ([data-scope="fieldset"][data-part="root"]) {
+        [data-scope="fieldset"][data-part="legend"] {
+            font-size: var(--text-lg);
+        }
+    }
+}
+
 @layer zero.recipes {
     [data-scope="checkbox"][data-part="root"] {
         --checkbox-size: calc(var(--size-selector) * 6);
@@ -2962,10 +3255,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;
@@ -9362,6 +9651,66 @@
         color: color-mix(in oklab, var(--table-accent) 60%, transparent);
     }
 
+    [data-scope="table"][data-part="sort-trigger"] {
+        appearance: none;
+        display: inline-flex;
+        align-items: center;
+        margin: 0;
+        border: 0;
+        font: inherit;
+        letter-spacing: inherit;
+        text-transform: inherit;
+        text-align: inherit;
+        cursor: pointer;
+        gap: var(--space-2xs);
+        padding: 0;
+        border-radius: var(--radius-selector);
+        background: transparent;
+        color: inherit;
+        transition: color var(--duration-fast) var(--ease-standard);
+    }
+
+    [data-scope="table"][data-part="sort-trigger"][data-state="ascending"] {
+        color: var(--table-accent);
+    }
+
+    [data-scope="table"][data-part="sort-trigger"][data-state="descending"] {
+        color: var(--table-accent);
+    }
+
+    [data-scope="table"][data-part="sort-trigger"]:hover:not([data-disabled]) {
+        color: var(--table-accent);
+    }
+
+    [data-scope="table"][data-part="sort-trigger"][data-disabled] {
+        cursor: not-allowed;
+        opacity: var(--disabled-opacity);
+    }
+
+    [data-scope="table"][data-part="sort-trigger"][data-focus-visible] {
+        outline: 2px solid var(--color-base-content);
+        outline-offset: 2px;
+    }
+
+    [data-scope="table"][data-part="sort-indicator"] {
+        display: inline-block;
+        font-size: 0.75em;
+        line-height: 1;
+        transition: transform var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard);
+    }
+
+    [data-scope="table"][data-part="sort-indicator"][data-state="descending"] {
+        transform: rotate(180deg);
+    }
+
+    [data-scope="table"][data-part="sort-indicator"][data-state="none"] {
+        opacity: 0;
+    }
+
+    [data-scope="table"][data-part="sort-trigger"]:is(:hover, [data-focus-visible]) > [data-scope="table"][data-part="sort-indicator"][data-state="none"] {
+        opacity: 0.6;
+    }
+
     [data-scope="table"][data-part="cell"] {
         padding: var(--table-pad-block) var(--table-pad-inline);
         text-align: var(--table-cell-align);
@@ -9551,6 +9900,16 @@
             padding-block: var(--space-xs);
         }
     }
+
+    @media (prefers-reduced-motion: reduce) {
+        [data-scope="table"][data-part="sort-trigger"] {
+            transition: none;
+        }
+
+        [data-scope="table"][data-part="sort-indicator"] {
+            transition: none;
+        }
+    }
 }
 
 @layer zero.structure {

package/dist/lynx/components/accordion.css

@@ -46,6 +46,10 @@
     outline-offset: 2px;
 }
 
+.zx-accordion__trigger.zx-f-pressed {
+    background: var(--color-base-200);
+}
+
 .zx-accordion__panel {
     padding: 0 var(--space-2xl) var(--space-xl);
     font-size: var(--text-md);

package/dist/lynx/components/button.css

@@ -30,8 +30,12 @@
     block-size: 1em;
     flex: none;
     border-radius: 9999px;
+    border: calc(var(--border) * 2) solid var(--btn-ink);
     border-block-start-color: transparent;
     animation: zero-daisyui-btn-spin 0.7s linear infinite;
+    width: 1em;
+    height: 1em;
+    border-top-color: transparent;
 }
 
 .zx-button__root {
@@ -56,8 +60,35 @@
 }
 
 .zx-button__root.zx-f-disabled {
-    opacity: var(--disabled-opacity);
+    opacity: 1;
     cursor: not-allowed;
+    border-color: transparent;
+    box-shadow: none;
+}
+
+.zx-root .zx-button__root.zx-f-disabled {
+    background: #18181b19;
+    color: #18181b80;
+}
+
+.zx-root.zx-theme-dark .zx-button__root.zx-f-disabled {
+    background: #ecf9ff19;
+    color: #ecf9ff80;
+}
+
+.zx-root.zx-theme-dim .zx-button__root.zx-f-disabled {
+    background: #b2ccd619;
+    color: #b2ccd680;
+}
+
+.zx-root.zx-theme-nord .zx-button__root.zx-f-disabled {
+    background: #2e344019;
+    color: #2e344080;
+}
+
+.zx-root.zx-theme-sunset .zx-button__root.zx-f-disabled {
+    background: #9fb9d019;
+    color: #9fb9d080;
 }
 
 .zx-button__root.zx-f-focus-visible {
@@ -283,12 +314,21 @@
     color: var(--btn-on-accent);
 }
 
+.zx-button__spinner.zx-a-variant-solid {
+    border-color: var(--btn-on-accent);
+    border-top-color: transparent;
+}
+
 .zx-button__root.zx-a-variant-outline {
     background: transparent;
     color: var(--btn-ink);
     border-color: var(--btn-ink);
 }
 
+.zx-button__root.zx-a-variant-outline.zx-f-disabled {
+    border-color: transparent;
+}
+
 .zx-button__root.zx-a-variant-soft {
     background: var(--btn-soft);
     color: var(--btn-ink);
@@ -299,6 +339,10 @@
     color: var(--btn-ink);
 }
 
+.zx-button__root.zx-a-variant-ghost.zx-f-disabled {
+    background: transparent;
+}
+
 .zx-button__root.zx-a-variant-dash {
     background: transparent;
     color: var(--btn-ink);
@@ -306,6 +350,10 @@
     border-style: dashed;
 }
 
+.zx-button__root.zx-a-variant-dash.zx-f-disabled {
+    border-color: transparent;
+}
+
 .zx-button__root.zx-a-variant-link {
     background: transparent;
     color: var(--btn-ink);
@@ -314,6 +362,10 @@
     box-shadow: none;
 }
 
+.zx-button__root.zx-a-variant-link.zx-f-disabled {
+    background: transparent;
+}
+
 .zx-button__root.zx-a-size-xs {
     height: calc(var(--size-field) * 6);
     padding: var(--space-2xs) var(--space-xs);

package/dist/lynx/components/dialog.css

@@ -28,6 +28,12 @@
     outline-offset: 2px;
 }
 
+.zx-dialog__trigger.zx-f-pressed {
+    background: var(--color-base-300);
+    transform: translateY(1px);
+    box-shadow: none;
+}
+
 .zx-dialog__popup {
     opacity: 0;
     transform: translateY(8px) scale(0.97);
@@ -89,6 +95,7 @@
     justify-content: flex-end;
     gap: var(--space-md);
     margin-top: var(--space-2xl);
+    flex-direction: row;
 }
 
 .zx-dialog__close {
@@ -120,6 +127,12 @@
     outline-offset: 2px;
 }
 
+.zx-dialog__close.zx-f-pressed {
+    background: var(--color-base-300);
+    transform: translateY(1px);
+    box-shadow: none;
+}
+
 .zx-dialog__cancel {
     appearance: none;
     display: flex;
@@ -149,6 +162,12 @@
     outline-offset: 2px;
 }
 
+.zx-dialog__cancel.zx-f-pressed {
+    background: var(--color-base-300);
+    transform: translateY(1px);
+    box-shadow: none;
+}
+
 .zx-dialog__trigger.zx-a-color-primary {
     background: var(--color-primary);
     color: var(--color-primary-content);