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

package/src/recipes.ts

@@ -187,6 +187,34 @@ const withPresence = (presence: PartStyles, styles: PartStyles): PartStyles => (
     ),
 });
 
+/**
+ * daisy's three tab flavors (#377): `tabs-border` — daisy's own default look,
+ * an underline under the active tab — plus `tabs-lift` (bordered tab lifting
+ * out of a baseline) and `tabs-box` (list on a base-200 surface, active tab a
+ * raised base-100 pill). All three ported from daisyUI 5.5.19
+ * `components/tab.css`.
+ *
+ * The base holds only flavor-neutral structure. Every flavor's chrome —
+ * including the box surface this recipe used to keep in `parts` — lives in
+ * its own `variant` entry, because the web emitter twins the DEFAULT value's
+ * rules as `:not([data-variant])`: a default that leaned on base styles would
+ * leak them into the other two flavors, and the box chrome in base is exactly
+ * what `variant="border"` must not inherit.
+ *
+ * Sizing goes through a `--tab-py`/`--tab-px` pair rather than a literal
+ * `padding` per size — daisy's own mechanism (`--tab-p`/`--tab-paddings` in
+ * tab.css). It is what lets `lift` move `var(--border)` between border and
+ * padding without restating the size ramp per flavor: axis rules all target
+ * the same part with equal specificity, so a `lift` padding literal would
+ * either lose to or beat the size axis by source order alone.
+ *
+ * variant × color: `color` paints the active tab's INK (`roleInk`, not the
+ * raw role — #210: raw roles are fill colours with no contrast floor as ink).
+ * `border`'s underline and `lift`'s label follow it via `currentColor`;
+ * `box` is the one flavor where daisy fills the active pill with the role
+ * (`checked:bg-primary checked:text-primary-content` in its docs), so a
+ * compound per role restores the fill+`-content` pair there.
+ */
 export const tabs: RecipeInput = {
     component: 'tabs',
     parts: {
@@ -197,10 +225,6 @@ export const tabs: RecipeInput = {
             base: {
                 display: 'inline-flex',
                 alignSelf: 'flex-start',
-                padding: 'var(--space-xs)',
-                gap: 'var(--space-xs)',
-                background: 'var(--color-base-200)',
-                borderRadius: 'var(--radius-field)',
             },
         },
         tab: {
@@ -208,21 +232,31 @@ export const tabs: RecipeInput = {
                 appearance: 'none',
                 border: 'none',
                 background: 'transparent',
-                padding: 'var(--space-sm) var(--space-xl)',
+                '--tab-py': 'var(--space-sm)',
+                '--tab-px': 'var(--space-xl)',
+                // daisy's per-size underline/corner cap: `--tab-radius-min`
+                // in tab.css, `calc(.75rem - var(--border))` at md. Declared
+                // here (not in `lift`, its only reader) so the size axis can
+                // override it — a definition inside the variant entry would
+                // beat the size rules on source order.
+                '--tab-radius-min': 'calc(0.75rem - var(--border))',
+                padding: 'var(--tab-py) var(--tab-px)',
                 fontSize: 'var(--text-sm)',
                 fontWeight: 'var(--weight-semibold)',
                 color: 'color-mix(in oklab, var(--color-base-content) 60%, transparent)',
-                borderRadius: 'calc(var(--radius-field) - 0.25rem)',
                 cursor: 'pointer',
+                // For the flavors' ::before marks (border's underline, lift's
+                // corner shoulders) — daisy's base `.tab` is `position:
+                // relative` for the same reason.
+                position: 'relative',
                 transition: 'background var(--duration-normal) var(--ease-standard), color var(--duration-normal) var(--ease-standard)',
             },
             states: {
                 hover: { color: 'var(--color-base-content)' },
-                active: {
-                    background: 'var(--color-base-100)',
-                    color: 'var(--color-base-content)',
-                    boxShadow: 'var(--shadow-sm)',
-                },
+                // Full-strength ink is the one active mark all three flavors
+                // share; each flavor's own chrome (underline, lift, pill)
+                // lives in its `variant` entry.
+                active: { color: 'var(--color-base-content)' },
                 inactive: {},
                 disabled: { opacity: 'var(--disabled-opacity)', cursor: 'not-allowed' },
                 ...focusRing,
@@ -235,40 +269,227 @@ export const tabs: RecipeInput = {
     },
     variants: {
         size: {
-            xs: { tab: { base: { fontSize: 'var(--text-xs)', padding: 'var(--space-2xs) var(--space-md)' } } },
-            sm: { tab: { base: { fontSize: 'var(--text-xs)', padding: 'var(--space-xs) var(--space-lg)' } } },
+            xs: { tab: { base: { fontSize: 'var(--text-xs)', '--tab-py': 'var(--space-2xs)', '--tab-px': 'var(--space-md)', '--tab-radius-min': 'calc(0.5rem - var(--border))' } } },
+            sm: { tab: { base: { fontSize: 'var(--text-xs)', '--tab-py': 'var(--space-xs)', '--tab-px': 'var(--space-lg)', '--tab-radius-min': 'calc(0.5rem - var(--border))' } } },
             // `md` is the un-attributed render: the base already IS the
             // middle step, so restating it here would be a second copy free
             // to drift. An empty entry emits no rule and keeps the base.
             md: {},
-            lg: { tab: { base: { fontSize: 'var(--text-md)', padding: 'var(--space-md) var(--space-2xl)' } } },
-            xl: { tab: { base: { fontSize: 'var(--text-lg)', padding: 'var(--space-lg) var(--space-2xl)' } } },
+            lg: { tab: { base: { fontSize: 'var(--text-md)', '--tab-py': 'var(--space-md)', '--tab-px': 'var(--space-2xl)', '--tab-radius-min': 'calc(1.5rem - var(--border))' } } },
+            xl: { tab: { base: { fontSize: 'var(--text-lg)', '--tab-py': 'var(--space-lg)', '--tab-px': 'var(--space-2xl)', '--tab-radius-min': 'calc(2rem - var(--border))' } } },
         },
         // Every role, not just primary. `data-color` passes through whatever a
         // consumer sets, so a one-role axis made `<Tabs.Root color="success">`
         // type-check, emit the attribute, and match nothing — the tab just
         // stayed primary with no diagnostic anywhere.
+        //
+        // The role lands as the active tab's INK — `border`'s underline and
+        // everything drawn `currentColor` follow it for free. `box` refines
+        // this per role through `compoundVariants` below (fill + `-content`).
         color: Object.fromEntries(
             ROLES.map((c) => [
                 c,
                 {
                     tab: {
                         states: {
-                            active: {
-                                background: `var(--color-${c})`,
-                                color: `var(--color-${c}-content)`,
-                            },
+                            active: { color: roleInk(c) },
                         },
                     },
                 },
             ]),
         ),
+        variant: {
+            // daisy `.tabs-border`: an always-present ::before bar under each
+            // tab — transparent at rest (daisy reaches transparent through an
+            // invalid-at-computed-value-time 4-value custom property; the
+            // rendered result is the same), currentColor + a 3px top border
+            // when active. The border is daisy's forced-colors survival for a
+            // background-painted mark, kept verbatim so the bar's geometry
+            // matches daisy's exactly.
+            border: {
+                tab: {
+                    base: { borderRadius: 'var(--radius-field)' },
+                    selectors: {
+                        '&::before': {
+                            content: '""',
+                            position: 'absolute',
+                            bottom: '0',
+                            insetInlineStart: '10%',
+                            width: '80%',
+                            // daisy renders under Tailwind preflight, whose
+                            // `*,::before,::after { box-sizing: border-box }`
+                            // makes the active `border-top: 3px` swallow the
+                            // 3px height rather than stack on it. zero ships
+                            // no such reset, so the bar carries the one
+                            // declaration itself — without it the active
+                            // underline doubles to 6px (review catch).
+                            boxSizing: 'border-box',
+                            height: '3px',
+                            borderRadius: 'var(--radius-field)',
+                            backgroundColor: 'transparent',
+                            transition: 'background-color var(--duration-normal) var(--ease-standard)',
+                        },
+                        '&[data-state="active"]:not([data-disabled])::before': {
+                            backgroundColor: 'currentColor',
+                            borderTop: '3px solid',
+                        },
+                    },
+                },
+            },
+            // daisy `.tabs-lift`: every tab sits on a base-300 baseline; the
+            // active one swaps that bottom hairline for top/side borders, a
+            // base-100 fill, rounded top corners, and the radial-gradient
+            // "shoulders" that curve its bottom corners outward into the
+            // baseline. Widths and paddings trade `var(--border)` exactly as
+            // daisy's `--tab-border`/`--tab-paddings` do, so activating a tab
+            // never changes its box size.
+            lift: {
+                tab: {
+                    base: {
+                        '--tab-radius-limit': 'min(var(--radius-field), var(--tab-radius-min))',
+                        borderStartStartRadius: 'var(--tab-radius-limit)',
+                        borderStartEndRadius: 'var(--tab-radius-limit)',
+                        borderWidth: '0 0 var(--border) 0',
+                        borderStyle: 'solid',
+                        borderColor: 'var(--color-base-300)',
+                        padding: 'calc(var(--tab-py) + var(--border)) var(--tab-px) var(--tab-py)',
+                    },
+                    states: {
+                        active: {
+                            background: 'var(--color-base-100)',
+                            borderWidth: 'var(--border) var(--border) 0 var(--border)',
+                            padding: 'var(--tab-py) calc(var(--tab-px) - var(--border)) calc(var(--tab-py) + var(--border))',
+                        },
+                    },
+                    selectors: {
+                        '&[data-state="active"]::before': {
+                            // daisy's `--tab-radius-grad` stop list:
+                            // transparent inside the corner arc, a base-300
+                            // ring of the border's width, base-100 outside.
+                            // Declared here rather than on the tab: every
+                            // shoulder rule below styles this same
+                            // pseudo-element, so they all read it — and on
+                            // lynx it drops with the ::before selector
+                            // instead of surviving as a dead declaration.
+                            '--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',
+                            zIndex: '1',
+                            bottom: '0',
+                            // daisy centres the shoulders through the flex
+                            // static position; an explicit symmetric overhang
+                            // of one corner radius per side is the same
+                            // geometry without needing the tab to be a flex
+                            // container.
+                            insetInlineStart: 'calc(var(--tab-radius-limit) * -1)',
+                            width: 'calc(100% + var(--tab-radius-limit) * 2)',
+                            height: 'var(--tab-radius-limit)',
+                            backgroundImage: 'radial-gradient(circle at top left, var(--tab-grad)), radial-gradient(circle at top right, var(--tab-grad))',
+                            backgroundPosition: 'top left, top right',
+                            backgroundSize: 'var(--tab-radius-limit) var(--tab-radius-limit)',
+                            backgroundRepeat: 'no-repeat',
+                        },
+                        // No shoulder past the row's edges — daisy's
+                        // `--radius-start: none` / `--radius-end: none` on
+                        // first/last, both suppressed for an only tab.
+                        '&[data-state="active"]:first-child::before': {
+                            backgroundImage: 'none, radial-gradient(circle at top right, var(--tab-grad))',
+                        },
+                        '&[data-state="active"]:last-child::before': {
+                            backgroundImage: 'radial-gradient(circle at top left, var(--tab-grad)), none',
+                        },
+                        '&[data-state="active"]:only-child::before': {
+                            backgroundImage: 'none',
+                        },
+                        // The gradients' corners are physical; when one side
+                        // is suppressed the image is asymmetric, so RTL needs
+                        // daisy's mirror on exactly the first/last tabs.
+                        [`&[data-state="active"]:first-child${rtl}::before`]: {
+                            transform: 'rotateY(180deg)',
+                        },
+                        [`&[data-state="active"]:last-child${rtl}::before`]: {
+                            transform: 'rotateY(180deg)',
+                        },
+                    },
+                },
+            },
+            // daisy `.tabs-box`: the styles this recipe shipped as its only
+            // look, moved verbatim out of `parts` — list on a padded base-200
+            // surface, active tab a raised base-100 pill.
+            box: {
+                list: {
+                    base: {
+                        padding: 'var(--space-xs)',
+                        gap: 'var(--space-xs)',
+                        background: 'var(--color-base-200)',
+                        borderRadius: 'var(--radius-field)',
+                    },
+                },
+                tab: {
+                    base: { borderRadius: 'calc(var(--radius-field) - 0.25rem)' },
+                    states: {
+                        active: {
+                            background: 'var(--color-base-100)',
+                            boxShadow: 'var(--shadow-sm)',
+                        },
+                    },
+                },
+            },
+        },
+    },
+    // box × color: daisy's box flavor fills the active pill with the role and
+    // flips the label to `-content` — the fill+pair form is contrast-safe by
+    // construction, so the raw role is right here (unlike the ink the single-
+    // axis rule paints). Emitted after the single-axis rules, so it wins the
+    // `color` tie on source order.
+    compoundVariants: ROLES.map((c) => ({
+        match: { variant: 'box', color: c },
+        parts: {
+            tab: {
+                states: {
+                    active: {
+                        background: `var(--color-${c})`,
+                        color: `var(--color-${c}-content)`,
+                    },
+                },
+            },
+        },
+    })),
+    // `md: {}` emits nothing — it states the size default for the manifest
+    // (signalxjs/lynx#1070). `border` is daisy's own default tab look, and a
+    // DELIBERATE web visual change (#377): the un-attributed render used to
+    // be the box pill. Deliberately no `color` default: the un-attributed
+    // active ink is base-content, outside the color vocabulary.
+    defaultVariants: { size: 'md', variant: 'border' },
+    targets: {
+        lynx: {
+            variants: {
+                variant: {
+                    // The underline is a ::before on the web, which lynx
+                    // drops — redrawn as a real bottom border on the tab
+                    // itself (transparent at rest so activation never moves
+                    // the row). `currentColor` keeps it following the color
+                    // axis ink, the same mechanism switch's shared border
+                    // already relies on for lynx.
+                    border: {
+                        tab: {
+                            base: { borderBottom: '3px solid transparent' },
+                            states: { active: { borderBottomColor: 'currentColor' } },
+                        },
+                    },
+                    // `min()` does not exist on lynx (signalxjs/lynx#1066) and
+                    // the shared `--tab-radius-limit` would drop, leaving its
+                    // readers dangling — the uncapped field radius is the
+                    // closest expressible value.
+                    lift: {
+                        tab: {
+                            base: { '--tab-radius-limit': 'var(--radius-field)' },
+                        },
+                    },
+                },
+            },
+        },
     },
-    // Size only: `md: {}` emits nothing, so this changes no CSS — it states
-    // the default for the manifest (signalxjs/lynx#1070). Deliberately no
-    // `color` default: the un-attributed active tab is a neutral base-100
-    // pill, which is outside the color vocabulary.
-    defaultVariants: { size: 'md' },
 };
 
 /**
@@ -407,46 +628,21 @@ export const switchRecipe: RecipeInput = {
             },
         },
         control: {
-            base: {
-                // The knob slides because the grid's leading column GROWS:
-                // `0fr 1fr 1fr` → `1fr 1fr 0fr`, with the knob parked in
-                // column 2. That is daisy's own mechanism, and unlike a
-                // `translateX` it is RTL-correct for free.
-                display: 'inline-grid',
-                gridTemplateColumns: '0fr 1fr 1fr',
-                placeContent: 'center',
-                position: 'relative',
-                verticalAlign: 'middle',
-                flexShrink: '0',
-                boxSizing: 'border-box',
-                width: 'calc((var(--switch-size) * 2) - (var(--border) + var(--switch-p)) * 2)',
-                height: 'var(--switch-size)',
-                padding: 'var(--switch-p)',
-                // daisy's radius formula: the selector radius GROWN by the
-                // padding and the border so the knob's own corner and the
-                // track's stay concentric, each clamped at 3× the token so a
-                // square-cornered theme (cyberpunk, wireframe) stays square.
-                '--switch-radius-max': 'calc(var(--radius-selector) + var(--radius-selector) + var(--radius-selector))',
-                borderRadius: 'calc(var(--radius-selector) + min(var(--switch-p), var(--switch-radius-max)) + min(var(--border), var(--switch-radius-max)))',
-                border: 'var(--border) solid currentColor',
-                color: 'var(--switch-ink)',
-                boxShadow: '0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000) inset',
-                userSelect: 'none',
-                transition: 'color var(--duration-slow) var(--ease-standard), '
-                    + 'background-color var(--duration-normal) var(--ease-standard), '
-                    + 'grid-template-columns var(--duration-normal) var(--ease-standard)',
-            },
+            // The track's whole box lives in `targets`: the web mechanism is
+            // an inline-grid whose leading column grows, spelled with grid
+            // and `min()` — both measured unresolvable by lynx's engine
+            // (signalxjs/lynx#1066), so the lynx section lays the same
+            // geometry out with flex + calc() instead. Whole blocks move
+            // (not single declarations) so the merged web view keeps its
+            // declaration order and the web goldens stay byte-identical.
             states: {
                 // daisy's checked toggle empties its track to base-100 and paints
                 // the KNOB with the accent — so the checked knob's contrast is
                 // accent-on-base-100, not accent-content-on-accent. Same
                 // trade-off as the checkbox's unchecked outline: 1.11:1 at worst
                 // (sunset/`neutral`), 7.68 at best, daisy's own numbers.
-                checked: {
-                    gridTemplateColumns: '1fr 1fr 0fr',
-                    color: 'var(--switch-accent)',
-                    backgroundColor: 'var(--color-base-100)',
-                },
+                // Both targets restate the paint in their own spelling below.
+                checked: {},
                 unchecked: {},
                 // `invalid` is semantic: it stays error under every colour
                 // variant. Stated as a longhand because the track's border is
@@ -458,24 +654,9 @@ export const switchRecipe: RecipeInput = {
             },
         },
         thumb: {
-            base: {
-                // daisy's `.toggle:before`: a square knob that fills its grid
-                // cell and takes the UNGROWN selector radius, so it is a
-                // rounded square in daisy's rounded-square themes and a circle
-                // only where the theme says so.
-                gridRowStart: '1',
-                gridColumnStart: '2',
-                aspectRatio: '1',
-                width: '100%',
-                height: '100%',
-                borderRadius: 'var(--radius-selector)',
-                backgroundColor: 'currentColor',
-                backgroundSize: 'auto, calc(var(--noise) * 100%)',
-                backgroundImage: 'none, var(--fx-noise)',
-                boxShadow: '0 -1px var(--depth-shade) inset, 0 8px 0 -4px var(--depth-sheen) inset, '
-                    + '0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000)',
-                transition: 'background-color var(--duration-instant) var(--ease-standard)',
-            },
+            // Like `control`, the knob's box is per-target: the web knob fills
+            // its grid cell, the lynx knob is an explicit calc() square that
+            // `translateX`es — see `targets` below.
             states: {
                 checked: {},
                 unchecked: {},
@@ -507,6 +688,146 @@ export const switchRecipe: RecipeInput = {
     // control and its text. Declared rather than left implicit so the
     // delegation reads as a decision.
     skipStates: { root: ['focus-visible'] },
+    // ONE design decision, two spellings. The web track is daisy's own
+    // mechanism — an inline-grid whose leading column grows (`0fr 1fr 1fr` →
+    // `1fr 1fr 0fr`) with a min()-clamped radius — and lynx's engine resolves
+    // neither grid nor the comparison functions (measured on device,
+    // signalxjs/lynx#1066; the emitter refuses min()/max()/clamp() on that
+    // evidence). So the whole box moves here per target: the web section is
+    // the original spelling verbatim, the lynx section rebuilds the same
+    // geometry with flex + calc() and slides the knob with `translateX`.
+    targets: {
+        web: {
+            parts: {
+                control: {
+                    base: {
+                        // The knob slides because the grid's leading column GROWS:
+                        // `0fr 1fr 1fr` → `1fr 1fr 0fr`, with the knob parked in
+                        // column 2. That is daisy's own mechanism, and unlike a
+                        // `translateX` it is RTL-correct for free.
+                        display: 'inline-grid',
+                        gridTemplateColumns: '0fr 1fr 1fr',
+                        placeContent: 'center',
+                        position: 'relative',
+                        verticalAlign: 'middle',
+                        flexShrink: '0',
+                        boxSizing: 'border-box',
+                        width: 'calc((var(--switch-size) * 2) - (var(--border) + var(--switch-p)) * 2)',
+                        height: 'var(--switch-size)',
+                        padding: 'var(--switch-p)',
+                        // daisy's radius formula: the selector radius GROWN by the
+                        // padding and the border so the knob's own corner and the
+                        // track's stay concentric, each clamped at 3× the token so a
+                        // square-cornered theme (cyberpunk, wireframe) stays square.
+                        '--switch-radius-max': 'calc(var(--radius-selector) + var(--radius-selector) + var(--radius-selector))',
+                        borderRadius: 'calc(var(--radius-selector) + min(var(--switch-p), var(--switch-radius-max)) + min(var(--border), var(--switch-radius-max)))',
+                        border: 'var(--border) solid currentColor',
+                        color: 'var(--switch-ink)',
+                        boxShadow: '0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000) inset',
+                        userSelect: 'none',
+                        transition: 'color var(--duration-slow) var(--ease-standard), '
+                            + 'background-color var(--duration-normal) var(--ease-standard), '
+                            + 'grid-template-columns var(--duration-normal) var(--ease-standard)',
+                    },
+                    states: {
+                        checked: {
+                            gridTemplateColumns: '1fr 1fr 0fr',
+                            color: 'var(--switch-accent)',
+                            backgroundColor: 'var(--color-base-100)',
+                        },
+                    },
+                },
+                thumb: {
+                    base: {
+                        // daisy's `.toggle:before`: a square knob that fills its grid
+                        // cell and takes the UNGROWN selector radius, so it is a
+                        // rounded square in daisy's rounded-square themes and a circle
+                        // only where the theme says so.
+                        gridRowStart: '1',
+                        gridColumnStart: '2',
+                        aspectRatio: '1',
+                        width: '100%',
+                        height: '100%',
+                        borderRadius: 'var(--radius-selector)',
+                        backgroundColor: 'currentColor',
+                        backgroundSize: 'auto, calc(var(--noise) * 100%)',
+                        backgroundImage: 'none, var(--fx-noise)',
+                        boxShadow: '0 -1px var(--depth-shade) inset, 0 8px 0 -4px var(--depth-sheen) inset, '
+                            + '0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000)',
+                        transition: 'background-color var(--duration-instant) var(--ease-standard)',
+                    },
+                },
+            },
+        },
+        lynx: {
+            parts: {
+                root: {
+                    // `inline-flex` has no lynx projection; restated as plain
+                    // flex with the direction explicit (lynx does not default
+                    // it the way a browser does).
+                    base: { display: 'flex', flexDirection: 'row', alignItems: 'center' },
+                },
+                control: {
+                    base: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        flexShrink: '0',
+                        boxSizing: 'border-box',
+                        // Same geometry as the web track: daisy's derived
+                        // width, ONE `--switch-size` driving everything.
+                        width: 'calc((var(--switch-size) * 2) - (var(--border) + var(--switch-p)) * 2)',
+                        height: 'var(--switch-size)',
+                        padding: 'var(--switch-p)',
+                        // The radius formula minus its min() clamps: exact for
+                        // every shipped theme (the clamp only bites when the
+                        // padding or border exceeds 3× the selector radius,
+                        // i.e. near-square themes this package does not ship).
+                        borderRadius: 'calc(var(--radius-selector) + var(--switch-p) + var(--border))',
+                        // No currentColor on this target — the ink is named
+                        // directly, and `checked` moves border + fill below.
+                        border: 'var(--border) solid var(--switch-ink)',
+                        userSelect: 'none',
+                        transition: 'border-color var(--duration-slow) var(--ease-standard), '
+                            + 'background-color var(--duration-normal) var(--ease-standard)',
+                    },
+                    states: {
+                        checked: {
+                            borderColor: 'var(--switch-accent)',
+                            backgroundColor: 'var(--color-base-100)',
+                        },
+                    },
+                },
+                thumb: {
+                    base: {
+                        // The web knob fills its square grid cell; here the
+                        // same square is explicit: track height minus border
+                        // and padding on both sides.
+                        width: 'calc(var(--switch-size) - (var(--border) + var(--switch-p)) * 2)',
+                        height: 'calc(var(--switch-size) - (var(--border) + var(--switch-p)) * 2)',
+                        borderRadius: 'var(--radius-selector)',
+                        backgroundColor: 'var(--switch-ink)',
+                        transition: 'transform var(--duration-normal) var(--ease-standard), '
+                            + 'background-color var(--duration-instant) var(--ease-standard)',
+                    },
+                    states: {
+                        // The knob's travel is exactly one knob-width: the
+                        // content box is two knobs wide, and the knob starts
+                        // at the near end. `translateX` is measured working
+                        // on lynx. The axis is PHYSICAL where the web's
+                        // growing grid column was logical — an RTL layout
+                        // would need a direction-aware multiplier, but the
+                        // lynx grammar carries no direction hook yet and the
+                        // runtime does not stamp one; revisit with the RTL
+                        // plumbing rather than guessing at it here.
+                        checked: {
+                            backgroundColor: 'var(--switch-accent)',
+                            transform: 'translateX(calc(var(--switch-size) - (var(--border) + var(--switch-p)) * 2))',
+                        },
+                    },
+                },
+            },
+        },
+    },
 };
 
 // --------------------------------------------------------------------------
@@ -1494,6 +1815,50 @@ export const slider: RecipeInput = {
     // declared for the manifest (signalxjs/lynx#1070).
     defaultVariants: { color: 'primary', size: 'md' },
     skipStates: { root: ['invalid', 'focus-visible'] },
+    // ONE design decision, two paints. On the web the accent reaches the
+    // screen twice: the native control is UA-drawn behind `accent-color`, and
+    // the composed range/thumb deepen the accent with `color-mix()`. Lynx
+    // renders neither spelling — `accent-color` styles a native
+    // `<input type=range>` lynx does not have, and the emitter drops
+    // `color-mix()` as unresolvable — so the compiled range and thumb shipped
+    // with no paint at all: grey track, invisible fill, invisible knob
+    // (measured on device, signalxjs/lynx#1075). The geometry all survives
+    // (the sizes are direct calc(), proven working); paint is the only gap,
+    // so this section only restates paint, in lynx-expressible spellings.
+    targets: {
+        lynx: {
+            parts: {
+                range: {
+                    // The web fill deepens the accent 90/10 toward
+                    // base-content (`progressFill`'s recipe); the plain
+                    // accent — a var() chain, proven working on device — is
+                    // the closest lynx-expressible equivalent.
+                    base: { background: 'var(--slider-accent)' },
+                },
+                thumb: {
+                    // daisy's real range thumb, ported from daisyUI 5
+                    // `range.css` `::-webkit-slider-thumb`. The source reads
+                    // `background-color: var(--range-thumb)` +
+                    // `border: var(--range-p) solid` in the range's
+                    // currentColor; here each resolves to its value —
+                    // `--range-thumb` defaults to `var(--color-base-100)`,
+                    // `--range-p` is daisy's literal `.25rem` (deliberately
+                    // not the theme's size token), and the border ink is the
+                    // accent (currentColor on a daisy `.range-*` IS the
+                    // accent role) — because on lynx a named value is a
+                    // var-chain fewer to resolve. daisy paints the progress
+                    // fill itself as a 100cqw box-shadow thrown off this
+                    // thumb — a native-input trick with no lynx equivalent;
+                    // the composed `.zx-slider__range` box above IS that
+                    // fill here, so the knob only needs its own two paints.
+                    base: {
+                        background: 'var(--color-base-100)',
+                        border: '0.25rem solid var(--slider-accent)',
+                    },
+                },
+            },
+        },
+    },
 };
 
 export const accordion: RecipeInput = {
@@ -1712,6 +2077,23 @@ export const select: RecipeInput = {
 };
 
 
+/**
+ * daisy's BUTTON ramp — `.btn`'s fixed height per size step, in `--size-field`
+ * units, exactly as daisyUI 5 ships it (`components/button.css`: `.btn-xs`
+ * `--size: calc(var(--size-field, .25rem) * 6)` through `.btn-xl` `* 14`,
+ * `.btn`/`.btn-md` `* 10` — 1.5 / 2 / 2.5 / 3 / 3.5rem at the default
+ * `--size-field: 0.25rem`).
+ *
+ * Its own table, not `FIELD_STEPS`: this repo's field ramp sits one step
+ * higher than daisy's (md = 12 units, 3rem), and restating the button off it
+ * would bake that offset into a second component. The button states daisy's
+ * own numbers; #376 is exactly what happened while it had no height at all —
+ * padding alone rendered md at ~30px against daisy's 40px.
+ */
+const BTN_STEPS = { xs: 6, sm: 8, md: 10, lg: 12, xl: 14 } as const;
+const btnHeight = (step: keyof typeof BTN_STEPS): string =>
+    `calc(var(--size-field) * ${BTN_STEPS[step]})`;
+
 export const button: RecipeInput = {
     component: 'button',
     // The two axes meet here instead of multiplying. `color` sets the accent
@@ -1849,12 +2231,17 @@ export const button: RecipeInput = {
                 },
             },
         },
+        // daisy sizes a btn by fixed height (`--size`), not by padding: each
+        // step states its `BTN_STEPS` height and keeps the padding/font ramps
+        // for inline air; the root's flex centering absorbs the block axis.
+        // The `<button>` element is UA `border-box`, so the stated height is
+        // the rendered height, border included — as in daisy.
         size: {
-            xs: { root: { base: { padding: 'var(--space-2xs) var(--space-xs)', fontSize: 'var(--text-xs)' } } },
-            sm: { root: { base: { padding: 'var(--space-xs) var(--space-sm)', fontSize: 'var(--text-sm)' } } },
-            md: { root: { base: { padding: 'var(--space-sm) var(--space-lg)', fontSize: 'var(--text-md)' } } },
-            lg: { root: { base: { padding: 'var(--space-md) var(--space-xl)', fontSize: 'var(--text-lg)' } } },
-            xl: { root: { base: { padding: 'var(--space-lg) var(--space-2xl)', fontSize: 'var(--text-xl)' } } },
+            xs: { root: { base: { height: btnHeight('xs'), padding: 'var(--space-2xs) var(--space-xs)', fontSize: 'var(--text-xs)' } } },
+            sm: { root: { base: { height: btnHeight('sm'), padding: 'var(--space-xs) var(--space-sm)', fontSize: 'var(--text-sm)' } } },
+            md: { root: { base: { height: btnHeight('md'), padding: 'var(--space-sm) var(--space-lg)', fontSize: 'var(--text-md)' } } },
+            lg: { root: { base: { height: btnHeight('lg'), padding: 'var(--space-md) var(--space-xl)', fontSize: 'var(--text-lg)' } } },
+            xl: { root: { base: { height: btnHeight('xl'), padding: 'var(--space-lg) var(--space-2xl)', fontSize: 'var(--text-xl)' } } },
         },
     },
     /**