@sigx/zero-daisyui 0.6.0 → 0.8.0

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

@@ -0,0 +1,174 @@
+@layer zero.fallback, zero.tokens, zero.recipes, zero.structure;
+
+@layer zero.recipes {
+    [data-scope="hover-card"][data-part="trigger"] {
+        color: inherit;
+        text-decoration-line: underline;
+        text-underline-offset: 2px;
+        cursor: pointer;
+        border-radius: var(--radius-selector);
+    }
+
+    [data-scope="hover-card"][data-part="trigger"]:hover:not([data-disabled]) {
+        text-decoration-thickness: 2px;
+    }
+
+    [data-scope="hover-card"][data-part="trigger"][data-state="open"] {
+        text-decoration-thickness: 2px;
+    }
+
+    [data-scope="hover-card"][data-part="trigger"][data-focus-visible] {
+        outline: 2px solid var(--color-base-content);
+        outline-offset: 2px;
+    }
+
+    [data-scope="hover-card"][data-part="popup"] {
+        opacity: 0;
+        transform: translateY(-4px);
+        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;
+        background: var(--color-base-100);
+        color: var(--color-base-content);
+        border: var(--border) solid var(--color-base-300);
+        border-radius: var(--radius-box);
+        box-shadow: var(--shadow-lg);
+        padding: var(--space-xl);
+        max-width: 20rem;
+        font-size: var(--text-sm);
+    }
+
+    [data-scope="hover-card"][data-part="popup"][data-state="open"] {
+        opacity: 1;
+        transform: none;
+    }
+
+    [data-scope="hover-card"][data-part="popup"]:has(> [data-scope="hover-card"][data-part="arrow"]) {
+        overflow: visible;
+    }
+
+    [data-scope="hover-card"][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="hover-card"][data-part="popup"][data-placement^="top"] > [data-scope="hover-card"][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="hover-card"][data-part="popup"][data-placement^="bottom"] > [data-scope="hover-card"][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="hover-card"][data-part="popup"][data-placement^="left"] > [data-scope="hover-card"][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="hover-card"][data-part="popup"][data-placement^="right"] > [data-scope="hover-card"][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="hover-card"][data-part="popup"][data-placement^="start"] > [data-scope="hover-card"][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="hover-card"][data-part="popup"][data-placement^="end"] > [data-scope="hover-card"][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="hover-card"][data-part="popup"][data-placement^="start"]:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) > [data-scope="hover-card"][data-part="arrow"] {
+        clip-path: polygon(0 0, 100% 100%, 0 100%);
+    }
+
+    [data-scope="hover-card"][data-part="popup"][data-placement^="end"]:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) > [data-scope="hover-card"][data-part="arrow"] {
+        clip-path: polygon(0 0, 100% 0, 100% 100%);
+    }
+
+    [data-scope="hover-card"][data-part="trigger"][data-color="primary"] {
+        color: color-mix(in oklab, var(--color-primary) 95%, var(--color-base-content));
+    }
+
+    [data-scope="hover-card"][data-part="trigger"][data-color="secondary"] {
+        color: color-mix(in oklab, var(--color-secondary) 70%, var(--color-base-content));
+    }
+
+    [data-scope="hover-card"][data-part="trigger"][data-color="accent"] {
+        color: color-mix(in oklab, var(--color-accent) 55%, var(--color-base-content));
+    }
+
+    [data-scope="hover-card"][data-part="trigger"][data-color="neutral"] {
+        color: color-mix(in oklab, var(--color-neutral) 40%, var(--color-base-content));
+    }
+
+    [data-scope="hover-card"][data-part="trigger"][data-color="info"] {
+        color: color-mix(in oklab, var(--color-info) 70%, var(--color-base-content));
+    }
+
+    [data-scope="hover-card"][data-part="trigger"][data-color="success"] {
+        color: color-mix(in oklab, var(--color-success) 55%, var(--color-base-content));
+    }
+
+    [data-scope="hover-card"][data-part="trigger"][data-color="warning"] {
+        color: color-mix(in oklab, var(--color-warning) 45%, var(--color-base-content));
+    }
+
+    [data-scope="hover-card"][data-part="trigger"][data-color="error"] {
+        color: color-mix(in oklab, var(--color-error) 85%, var(--color-base-content));
+    }
+
+    [data-scope="hover-card"][data-part="trigger"][data-size="xs"] {
+        font-size: var(--text-xs);
+    }
+
+    [data-scope="hover-card"][data-part="trigger"][data-size="sm"] {
+        font-size: var(--text-sm);
+    }
+
+    [data-scope="hover-card"][data-part="trigger"][data-size="lg"] {
+        font-size: var(--text-lg);
+    }
+
+    [data-scope="hover-card"][data-part="trigger"][data-size="xl"] {
+        font-size: var(--text-xl);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        [data-scope="hover-card"][data-part="popup"] {
+            transition: none;
+        }
+
+        [data-scope="hover-card"][data-part="popup"][data-state="open"] {
+            transform: none;
+        }
+    }
+
+    @starting-style {
+        [data-scope="hover-card"][data-part="popup"][data-state="open"] {
+            opacity: 0;
+            transform: translateY(-4px);
+        }
+    }
+}

package/dist/css/components/menu.css

@@ -56,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;
@@ -194,12 +198,81 @@
         opacity: 0.6;
     }
 
+    [data-scope="menu"][data-part="shortcut"] {
+        margin-inline-start: auto;
+        padding-inline-start: var(--space-lg);
+        font-size: var(--text-xs);
+        opacity: 0.75;
+    }
+
     [data-scope="menu"][data-part="separator"] {
         height: var(--border);
         margin: var(--space-sm) var(--space-md);
         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/menubar.css

@@ -0,0 +1,75 @@
+@layer zero.fallback, zero.tokens, zero.recipes, zero.structure;
+
+@layer zero.recipes {
+    [data-scope="menubar"][data-part="root"] {
+        --menubar-surface: var(--color-base-200);
+    }
+
+    [data-scope="menubar"][data-part="root"] {
+        display: flex;
+        align-items: center;
+        gap: var(--space-xs);
+        padding: var(--space-xs);
+        width: max-content;
+        max-width: 100%;
+        flex-wrap: wrap;
+        background: var(--menubar-surface);
+        border-radius: var(--radius-box);
+    }
+
+    [data-scope="menubar"][data-part="root"][data-orientation="vertical"] {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    [data-scope="menubar"][data-part="root"][data-color="primary"] {
+        --menubar-surface: color-mix(in oklch, var(--color-primary) 12%, var(--color-base-200));
+    }
+
+    [data-scope="menubar"][data-part="root"][data-color="secondary"] {
+        --menubar-surface: color-mix(in oklch, var(--color-secondary) 12%, var(--color-base-200));
+    }
+
+    [data-scope="menubar"][data-part="root"][data-color="accent"] {
+        --menubar-surface: color-mix(in oklch, var(--color-accent) 12%, var(--color-base-200));
+    }
+
+    [data-scope="menubar"][data-part="root"][data-color="neutral"] {
+        --menubar-surface: color-mix(in oklch, var(--color-neutral) 12%, var(--color-base-200));
+    }
+
+    [data-scope="menubar"][data-part="root"][data-color="info"] {
+        --menubar-surface: color-mix(in oklch, var(--color-info) 12%, var(--color-base-200));
+    }
+
+    [data-scope="menubar"][data-part="root"][data-color="success"] {
+        --menubar-surface: color-mix(in oklch, var(--color-success) 12%, var(--color-base-200));
+    }
+
+    [data-scope="menubar"][data-part="root"][data-color="warning"] {
+        --menubar-surface: color-mix(in oklch, var(--color-warning) 12%, var(--color-base-200));
+    }
+
+    [data-scope="menubar"][data-part="root"][data-color="error"] {
+        --menubar-surface: color-mix(in oklch, var(--color-error) 12%, var(--color-base-200));
+    }
+
+    [data-scope="menubar"][data-part="root"][data-size="xs"] {
+        gap: 0;
+        padding: 0;
+    }
+
+    [data-scope="menubar"][data-part="root"][data-size="sm"] {
+        padding: var(--space-2xs);
+    }
+
+    [data-scope="menubar"][data-part="root"][data-size="lg"] {
+        gap: var(--space-sm);
+        padding: var(--space-sm);
+    }
+
+    [data-scope="menubar"][data-part="root"][data-size="xl"] {
+        gap: var(--space-md);
+        padding: var(--space-sm);
+    }
+}

package/dist/css/components/pagination.css

@@ -33,6 +33,7 @@
         font-weight: var(--weight-semibold);
         font-variant-numeric: tabular-nums;
         appearance: none;
+        text-decoration: none;
         cursor: pointer;
         transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
     }
@@ -71,6 +72,46 @@
         user-select: none;
     }
 
+    [data-scope="pagination"][data-part="first-trigger"] {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-inline-size: var(--pg-size);
+        block-size: var(--pg-size);
+        background: var(--color-base-200);
+        color: var(--color-base-content);
+        border: none;
+        border-radius: var(--radius-field);
+        font-size: calc(var(--pg-font) * 1.2);
+        line-height: var(--leading-none);
+        appearance: none;
+        text-decoration: none;
+        cursor: pointer;
+        transition: background var(--duration-fast) var(--ease-standard);
+    }
+
+    [data-scope="pagination"][data-part="first-trigger"]:hover:not([data-disabled]) {
+        background: var(--color-base-300);
+    }
+
+    [data-scope="pagination"][data-part="first-trigger"][data-disabled] {
+        opacity: var(--disabled-opacity);
+        cursor: not-allowed;
+    }
+
+    [data-scope="pagination"][data-part="first-trigger"][data-focus-visible] {
+        outline: 2px solid var(--color-base-content);
+        outline-offset: 2px;
+    }
+
+    [data-scope="pagination"][data-part="first-trigger"][data-pressed]:not([data-disabled]) {
+        transform: translateY(1px);
+    }
+
+    [data-scope="pagination"][data-part="first-trigger"]:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+        scale: -1 1;
+    }
+
     [data-scope="pagination"][data-part="prev-trigger"] {
         display: inline-flex;
         align-items: center;
@@ -84,6 +125,7 @@
         font-size: calc(var(--pg-font) * 1.2);
         line-height: var(--leading-none);
         appearance: none;
+        text-decoration: none;
         cursor: pointer;
         transition: background var(--duration-fast) var(--ease-standard);
     }
@@ -123,6 +165,7 @@
         font-size: calc(var(--pg-font) * 1.2);
         line-height: var(--leading-none);
         appearance: none;
+        text-decoration: none;
         cursor: pointer;
         transition: background var(--duration-fast) var(--ease-standard);
     }
@@ -149,6 +192,46 @@
         scale: -1 1;
     }
 
+    [data-scope="pagination"][data-part="last-trigger"] {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-inline-size: var(--pg-size);
+        block-size: var(--pg-size);
+        background: var(--color-base-200);
+        color: var(--color-base-content);
+        border: none;
+        border-radius: var(--radius-field);
+        font-size: calc(var(--pg-font) * 1.2);
+        line-height: var(--leading-none);
+        appearance: none;
+        text-decoration: none;
+        cursor: pointer;
+        transition: background var(--duration-fast) var(--ease-standard);
+    }
+
+    [data-scope="pagination"][data-part="last-trigger"]:hover:not([data-disabled]) {
+        background: var(--color-base-300);
+    }
+
+    [data-scope="pagination"][data-part="last-trigger"][data-disabled] {
+        opacity: var(--disabled-opacity);
+        cursor: not-allowed;
+    }
+
+    [data-scope="pagination"][data-part="last-trigger"][data-focus-visible] {
+        outline: 2px solid var(--color-base-content);
+        outline-offset: 2px;
+    }
+
+    [data-scope="pagination"][data-part="last-trigger"][data-pressed]:not([data-disabled]) {
+        transform: translateY(1px);
+    }
+
+    [data-scope="pagination"][data-part="last-trigger"]:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+        scale: -1 1;
+    }
+
     [data-scope="pagination"][data-part="root"][data-color="primary"] {
         --pg-accent: var(--color-primary);
         --pg-accent-content: var(--color-primary-content);

package/dist/css/components/popover.css

@@ -56,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;
@@ -94,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

@@ -33,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;