@sigx/zero-daisyui 0.2.0-beta.3 → 0.2.0-beta.5

package/README.md

@@ -70,6 +70,14 @@ modifiers as presence-only `data-mod-*`: `wide`, `block`, `square`, `circle`,
 daisy 4's `glass` is not carried: daisyUI 5 no longer documents it on any
 component, and the old library never exposed it either.
 
+Tabs carry daisy 5's three flavors as their own `variant` vocabulary —
+`border` (`tabs-border`, the underline that is daisy's default look and the
+un-attributed render here too), `lift` (`tabs-lift`) and `box` (`tabs-box`,
+the raised-pill look this package used to ship as its only one). `color` is
+orthogonal: it inks the active tab — `border`'s underline follows via
+`currentColor` — while `box` fills the active pill with the role and flips
+its label to the `-content` pair, as daisy's own box examples do.
+
 The package declares an **api** (the `defineApi` layer, see
 `docs/architecture.md` §3.6), so beside `/register` it ships a generated
 `./components` module — the daisy-native, single-import, fully-typed surface:

package/dist/components.d.ts

@@ -60,12 +60,13 @@ import type { Diff as ZDiff } from '@sigx/zero/diff';
 
 type ZeroAxisProp = 'color' | 'size' | 'variant' | 'axes' | 'mods';
 
-/** tabs — no vendor route; the wired surface keeps zero's names. */
+/** tabs — variant ← variant. Attributes stay zero-spelled. */
 type TabsProps = {
     color?: 'primary' | 'secondary' | 'accent' | 'neutral' | 'info' | 'success' | 'warning' | 'error';
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    'variant'?: 'border' | 'lift' | 'box';
 };
-type TabsAdapted = Adapted<typeof ZTabs, ZeroAxisProp, TabsProps>;
+type TabsAdapted = Adapted<typeof ZTabs, ZeroAxisProp | 'variant', TabsProps>;
 export declare const Tabs: TabsAdapted & AdaptedStatics<typeof ZTabs> & { Root: TabsAdapted };
 
 /** collapsible — no vendor route; the wired surface keeps zero's names. */

package/dist/css/components/button.css

@@ -170,31 +170,37 @@
     }
 
     [data-scope="button"][data-part="root"][data-size="xs"] {
+        height: calc(var(--size-field) * 6);
         padding: var(--space-2xs) var(--space-xs);
         font-size: var(--text-xs);
     }
 
     [data-scope="button"][data-part="root"][data-size="sm"] {
+        height: calc(var(--size-field) * 8);
         padding: var(--space-xs) var(--space-sm);
         font-size: var(--text-sm);
     }
 
     [data-scope="button"][data-part="root"][data-size="md"] {
+        height: calc(var(--size-field) * 10);
         padding: var(--space-sm) var(--space-lg);
         font-size: var(--text-md);
     }
 
     [data-scope="button"][data-part="root"]:not([data-size]) {
+        height: calc(var(--size-field) * 10);
         padding: var(--space-sm) var(--space-lg);
         font-size: var(--text-md);
     }
 
     [data-scope="button"][data-part="root"][data-size="lg"] {
+        height: calc(var(--size-field) * 12);
         padding: var(--space-md) var(--space-xl);
         font-size: var(--text-lg);
     }
 
     [data-scope="button"][data-part="root"][data-size="xl"] {
+        height: calc(var(--size-field) * 14);
         padding: var(--space-lg) var(--space-2xl);
         font-size: var(--text-xl);
     }

package/dist/css/components/tabs.css

@@ -8,22 +8,21 @@
     [data-scope="tabs"][data-part="list"] {
         display: inline-flex;
         align-self: flex-start;
-        padding: var(--space-xs);
-        gap: var(--space-xs);
-        background: var(--color-base-200);
-        border-radius: var(--radius-field);
     }
 
     [data-scope="tabs"][data-part="tab"] {
         appearance: none;
         border: none;
         background: transparent;
-        padding: var(--space-sm) var(--space-xl);
+        --tab-py: var(--space-sm);
+        --tab-px: var(--space-xl);
+        --tab-radius-min: calc(0.75rem - var(--border));
+        padding: var(--tab-py) var(--tab-px);
         font-size: var(--text-sm);
         font-weight: var(--weight-semibold);
         color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
-        border-radius: calc(var(--radius-field) - 0.25rem);
         cursor: pointer;
+        position: relative;
         transition: background var(--duration-normal) var(--ease-standard), color var(--duration-normal) var(--ease-standard);
     }
 
@@ -32,9 +31,7 @@
     }
 
     [data-scope="tabs"][data-part="tab"][data-state="active"] {
-        background: var(--color-base-100);
         color: var(--color-base-content);
-        box-shadow: var(--shadow-sm);
     }
 
     [data-scope="tabs"][data-part="tab"][data-disabled] {
@@ -54,81 +51,256 @@
     @scope ([data-scope="tabs"][data-part="root"][data-size="xs"]) to ([data-scope="tabs"][data-part="root"]) {
         [data-scope="tabs"][data-part="tab"] {
             font-size: var(--text-xs);
-            padding: var(--space-2xs) var(--space-md);
+            --tab-py: var(--space-2xs);
+            --tab-px: var(--space-md);
+            --tab-radius-min: calc(0.5rem - var(--border));
         }
     }
 
     @scope ([data-scope="tabs"][data-part="root"][data-size="sm"]) to ([data-scope="tabs"][data-part="root"]) {
         [data-scope="tabs"][data-part="tab"] {
             font-size: var(--text-xs);
-            padding: var(--space-xs) var(--space-lg);
+            --tab-py: var(--space-xs);
+            --tab-px: var(--space-lg);
+            --tab-radius-min: calc(0.5rem - var(--border));
         }
     }
 
     @scope ([data-scope="tabs"][data-part="root"][data-size="lg"]) to ([data-scope="tabs"][data-part="root"]) {
         [data-scope="tabs"][data-part="tab"] {
             font-size: var(--text-md);
-            padding: var(--space-md) var(--space-2xl);
+            --tab-py: var(--space-md);
+            --tab-px: var(--space-2xl);
+            --tab-radius-min: calc(1.5rem - var(--border));
         }
     }
 
     @scope ([data-scope="tabs"][data-part="root"][data-size="xl"]) to ([data-scope="tabs"][data-part="root"]) {
         [data-scope="tabs"][data-part="tab"] {
             font-size: var(--text-lg);
-            padding: var(--space-lg) var(--space-2xl);
+            --tab-py: var(--space-lg);
+            --tab-px: var(--space-2xl);
+            --tab-radius-min: calc(2rem - var(--border));
         }
     }
 
     @scope ([data-scope="tabs"][data-part="root"][data-color="primary"]) to ([data-scope="tabs"][data-part="root"]) {
+        [data-scope="tabs"][data-part="tab"][data-state="active"] {
+            color: color-mix(in oklab, var(--color-primary) 95%, var(--color-base-content));
+        }
+    }
+
+    @scope ([data-scope="tabs"][data-part="root"][data-color="secondary"]) to ([data-scope="tabs"][data-part="root"]) {
+        [data-scope="tabs"][data-part="tab"][data-state="active"] {
+            color: color-mix(in oklab, var(--color-secondary) 70%, var(--color-base-content));
+        }
+    }
+
+    @scope ([data-scope="tabs"][data-part="root"][data-color="accent"]) to ([data-scope="tabs"][data-part="root"]) {
+        [data-scope="tabs"][data-part="tab"][data-state="active"] {
+            color: color-mix(in oklab, var(--color-accent) 55%, var(--color-base-content));
+        }
+    }
+
+    @scope ([data-scope="tabs"][data-part="root"][data-color="neutral"]) to ([data-scope="tabs"][data-part="root"]) {
+        [data-scope="tabs"][data-part="tab"][data-state="active"] {
+            color: color-mix(in oklab, var(--color-neutral) 40%, var(--color-base-content));
+        }
+    }
+
+    @scope ([data-scope="tabs"][data-part="root"][data-color="info"]) to ([data-scope="tabs"][data-part="root"]) {
+        [data-scope="tabs"][data-part="tab"][data-state="active"] {
+            color: color-mix(in oklab, var(--color-info) 70%, var(--color-base-content));
+        }
+    }
+
+    @scope ([data-scope="tabs"][data-part="root"][data-color="success"]) to ([data-scope="tabs"][data-part="root"]) {
+        [data-scope="tabs"][data-part="tab"][data-state="active"] {
+            color: color-mix(in oklab, var(--color-success) 55%, var(--color-base-content));
+        }
+    }
+
+    @scope ([data-scope="tabs"][data-part="root"][data-color="warning"]) to ([data-scope="tabs"][data-part="root"]) {
+        [data-scope="tabs"][data-part="tab"][data-state="active"] {
+            color: color-mix(in oklab, var(--color-warning) 45%, var(--color-base-content));
+        }
+    }
+
+    @scope ([data-scope="tabs"][data-part="root"][data-color="error"]) to ([data-scope="tabs"][data-part="root"]) {
+        [data-scope="tabs"][data-part="tab"][data-state="active"] {
+            color: color-mix(in oklab, var(--color-error) 85%, var(--color-base-content));
+        }
+    }
+
+    @scope ([data-scope="tabs"][data-part="root"][data-variant="border"]) to ([data-scope="tabs"][data-part="root"]) {
+        [data-scope="tabs"][data-part="tab"] {
+            border-radius: var(--radius-field);
+        }
+
+        [data-scope="tabs"][data-part="tab"]::before {
+            content: "";
+            position: absolute;
+            bottom: 0;
+            inset-inline-start: 10%;
+            width: 80%;
+            box-sizing: border-box;
+            height: 3px;
+            border-radius: var(--radius-field);
+            background-color: transparent;
+            transition: background-color var(--duration-normal) var(--ease-standard);
+        }
+
+        [data-scope="tabs"][data-part="tab"][data-state="active"]:not([data-disabled])::before {
+            background-color: currentColor;
+            border-top: 3px solid;
+        }
+    }
+
+    @scope ([data-scope="tabs"][data-part="root"]:not([data-variant])) to ([data-scope="tabs"][data-part="root"]) {
+        [data-scope="tabs"][data-part="tab"] {
+            border-radius: var(--radius-field);
+        }
+
+        [data-scope="tabs"][data-part="tab"]::before {
+            content: "";
+            position: absolute;
+            bottom: 0;
+            inset-inline-start: 10%;
+            width: 80%;
+            box-sizing: border-box;
+            height: 3px;
+            border-radius: var(--radius-field);
+            background-color: transparent;
+            transition: background-color var(--duration-normal) var(--ease-standard);
+        }
+
+        [data-scope="tabs"][data-part="tab"][data-state="active"]:not([data-disabled])::before {
+            background-color: currentColor;
+            border-top: 3px solid;
+        }
+    }
+
+    @scope ([data-scope="tabs"][data-part="root"][data-variant="lift"]) to ([data-scope="tabs"][data-part="root"]) {
+        [data-scope="tabs"][data-part="tab"] {
+            --tab-radius-limit: min(var(--radius-field), var(--tab-radius-min));
+            border-start-start-radius: var(--tab-radius-limit);
+            border-start-end-radius: var(--tab-radius-limit);
+            border-width: 0 0 var(--border) 0;
+            border-style: solid;
+            border-color: var(--color-base-300);
+            padding: calc(var(--tab-py) + var(--border)) var(--tab-px) var(--tab-py);
+        }
+
+        [data-scope="tabs"][data-part="tab"][data-state="active"] {
+            background: var(--color-base-100);
+            border-width: var(--border) var(--border) 0 var(--border);
+            padding: var(--tab-py) calc(var(--tab-px) - var(--border)) calc(var(--tab-py) + var(--border));
+        }
+
+        [data-scope="tabs"][data-part="tab"][data-state="active"]::before {
+            --tab-grad: #0000 calc(69% - var(--border)), var(--color-base-300) calc(69% - var(--border) + 0.25px), var(--color-base-300) 69%, var(--color-base-100) calc(69% + 0.25px);
+            content: "";
+            position: absolute;
+            z-index: 1;
+            bottom: 0;
+            inset-inline-start: calc(var(--tab-radius-limit) * -1);
+            width: calc(100% + var(--tab-radius-limit) * 2);
+            height: var(--tab-radius-limit);
+            background-image: radial-gradient(circle at top left, var(--tab-grad)), radial-gradient(circle at top right, var(--tab-grad));
+            background-position: top left, top right;
+            background-size: var(--tab-radius-limit) var(--tab-radius-limit);
+            background-repeat: no-repeat;
+        }
+
+        [data-scope="tabs"][data-part="tab"][data-state="active"]:first-child::before {
+            background-image: none, radial-gradient(circle at top right, var(--tab-grad));
+        }
+
+        [data-scope="tabs"][data-part="tab"][data-state="active"]:last-child::before {
+            background-image: radial-gradient(circle at top left, var(--tab-grad)), none;
+        }
+
+        [data-scope="tabs"][data-part="tab"][data-state="active"]:only-child::before {
+            background-image: none;
+        }
+
+        [data-scope="tabs"][data-part="tab"][data-state="active"]:first-child:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *)::before {
+            transform: rotateY(180deg);
+        }
+
+        [data-scope="tabs"][data-part="tab"][data-state="active"]:last-child:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *)::before {
+            transform: rotateY(180deg);
+        }
+    }
+
+    @scope ([data-scope="tabs"][data-part="root"][data-variant="box"]) to ([data-scope="tabs"][data-part="root"]) {
+        [data-scope="tabs"][data-part="list"] {
+            padding: var(--space-xs);
+            gap: var(--space-xs);
+            background: var(--color-base-200);
+            border-radius: var(--radius-field);
+        }
+
+        [data-scope="tabs"][data-part="tab"] {
+            border-radius: calc(var(--radius-field) - 0.25rem);
+        }
+
+        [data-scope="tabs"][data-part="tab"][data-state="active"] {
+            background: var(--color-base-100);
+            box-shadow: var(--shadow-sm);
+        }
+    }
+
+    @scope ([data-scope="tabs"][data-part="root"][data-variant="box"][data-color="primary"]) to ([data-scope="tabs"][data-part="root"]) {
         [data-scope="tabs"][data-part="tab"][data-state="active"] {
             background: var(--color-primary);
             color: var(--color-primary-content);
         }
     }
 
-    @scope ([data-scope="tabs"][data-part="root"][data-color="secondary"]) to ([data-scope="tabs"][data-part="root"]) {
+    @scope ([data-scope="tabs"][data-part="root"][data-variant="box"][data-color="secondary"]) to ([data-scope="tabs"][data-part="root"]) {
         [data-scope="tabs"][data-part="tab"][data-state="active"] {
             background: var(--color-secondary);
             color: var(--color-secondary-content);
         }
     }
 
-    @scope ([data-scope="tabs"][data-part="root"][data-color="accent"]) to ([data-scope="tabs"][data-part="root"]) {
+    @scope ([data-scope="tabs"][data-part="root"][data-variant="box"][data-color="accent"]) to ([data-scope="tabs"][data-part="root"]) {
         [data-scope="tabs"][data-part="tab"][data-state="active"] {
             background: var(--color-accent);
             color: var(--color-accent-content);
         }
     }
 
-    @scope ([data-scope="tabs"][data-part="root"][data-color="neutral"]) to ([data-scope="tabs"][data-part="root"]) {
+    @scope ([data-scope="tabs"][data-part="root"][data-variant="box"][data-color="neutral"]) to ([data-scope="tabs"][data-part="root"]) {
         [data-scope="tabs"][data-part="tab"][data-state="active"] {
             background: var(--color-neutral);
             color: var(--color-neutral-content);
         }
     }
 
-    @scope ([data-scope="tabs"][data-part="root"][data-color="info"]) to ([data-scope="tabs"][data-part="root"]) {
+    @scope ([data-scope="tabs"][data-part="root"][data-variant="box"][data-color="info"]) to ([data-scope="tabs"][data-part="root"]) {
         [data-scope="tabs"][data-part="tab"][data-state="active"] {
             background: var(--color-info);
             color: var(--color-info-content);
         }
     }
 
-    @scope ([data-scope="tabs"][data-part="root"][data-color="success"]) to ([data-scope="tabs"][data-part="root"]) {
+    @scope ([data-scope="tabs"][data-part="root"][data-variant="box"][data-color="success"]) to ([data-scope="tabs"][data-part="root"]) {
         [data-scope="tabs"][data-part="tab"][data-state="active"] {
             background: var(--color-success);
             color: var(--color-success-content);
         }
     }
 
-    @scope ([data-scope="tabs"][data-part="root"][data-color="warning"]) to ([data-scope="tabs"][data-part="root"]) {
+    @scope ([data-scope="tabs"][data-part="root"][data-variant="box"][data-color="warning"]) to ([data-scope="tabs"][data-part="root"]) {
         [data-scope="tabs"][data-part="tab"][data-state="active"] {
             background: var(--color-warning);
             color: var(--color-warning-content);
         }
     }
 
-    @scope ([data-scope="tabs"][data-part="root"][data-color="error"]) to ([data-scope="tabs"][data-part="root"]) {
+    @scope ([data-scope="tabs"][data-part="root"][data-variant="box"][data-color="error"]) to ([data-scope="tabs"][data-part="root"]) {
         [data-scope="tabs"][data-part="tab"][data-state="active"] {
             background: var(--color-error);
             color: var(--color-error-content);