@sigx/zero-daisyui 0.2.0-beta.5 → 0.3.0-beta.1

package/src/recipes.ts

@@ -4,8 +4,9 @@
  * package: a design system is data, and "looks like daisy" is one possible
  * value of that data.
  */
-import type { CssProps, PartStyles, RecipeInput, RoleDecl } from '@sigx/zero-kit';
-import { roles } from './tokens.js';
+import type { CssProps, PartStyles, RecipeInput } from '@sigx/zero-kit';
+import { axisRoles, tableStackAt } from '@sigx/zero-kit/define';
+import { roles, tokens } from './tokens.js';
 
 /**
  * Every role a consumer can pass as `color`, derived from the declaration
@@ -14,9 +15,7 @@ import { roles } from './tokens.js';
  * `-content` or `-soft` are fills or hairlines, not action colours; this
  * design system declares none.
  */
-const ROLES = Object.entries(roles as Record<string, RoleDecl>)
-    .filter(([, decl]) => decl.content !== false && decl.soft !== false)
-    .map(([name]) => name);
+const ROLES = axisRoles(roles);
 
 /**
  * "…and the reading direction is right-to-left" — appended to a selector, never
@@ -537,6 +536,13 @@ const disclosureSizes: Record<string, Record<string, PartStyles>> = {
 // daisy "collapse collapse-arrow" flavor.
 export const collapsible: RecipeInput = {
     component: 'collapsible',
+    // Public to a design system derived from this one (#73).
+    hooks: {
+        properties: {
+            '--collapsible-accent': 'The accent of the open trigger.',
+        },
+        pseudo: { trigger: ['::after'] },
+    },
     // The accent is the open heading's INK, so the default is base-content —
     // the un-attributed render stays exactly daisy's neutral collapse and a
     // role only arrives through `data-color`.
@@ -611,6 +617,14 @@ export const collapsible: RecipeInput = {
 // daisy "toggle" flavor.
 export const switchRecipe: RecipeInput = {
     component: 'switch',
+    // Public to a design system derived from this one (#73).
+    hooks: {
+        properties: {
+            '--switch-size': 'The height; width, padding and knob travel derive from it.',
+            '--switch-accent': 'The checked track and knob accent.',
+            '--switch-ink': 'The unchecked border, knob and ring ink (daisy --input-color).',
+        },
+    },
     /**
      * daisy drives the whole toggle off ONE size, exactly as it drives the
      * checkbox: `--size` is the height, the padding is a fixed eighth of it,
@@ -919,8 +933,32 @@ const btnSizes: Record<string, Record<string, PartStyles>> = {
     xl: { trigger: { base: { height: fieldHeight('xl'), paddingInline: 'calc(var(--size-field) * 6)', fontSize: 'var(--text-lg)' } } },
 };
 
+/**
+ * `btn`'s inline padding restated physically, for the `targets.lynx`
+ * sections of every btn-wearing recipe: logical spellings resolve on iOS but
+ * not on Android (measured, signalxjs/lynx#1084), so the lynx emitter
+ * refuses `padding-inline`. Physical is that target's norm — lynx has no
+ * RTL flow for the logical spelling to flip with.
+ */
+const lynxBtnPad = (mult: number): NonNullable<PartStyles['base']> => ({
+    paddingLeft: `calc(var(--size-field) * ${mult})`,
+    paddingRight: `calc(var(--size-field) * ${mult})`,
+});
+
+/** The btn size ramp's physical inline padding, for `targets.lynx.variants`. */
+const lynxBtnSizes = (part: string): Record<string, Record<string, PartStyles>> => ({
+    xs: { [part]: { base: lynxBtnPad(2) } },
+    sm: { [part]: { base: lynxBtnPad(3) } },
+    lg: { [part]: { base: lynxBtnPad(5) } },
+    xl: { [part]: { base: lynxBtnPad(6) } },
+});
+
 export const dialog: RecipeInput = {
     component: 'dialog',
+    // Public to a design system derived from this one (#73).
+    hooks: {
+        keyframes: ['zero-daisy-pop'],
+    },
     keyframes: {
         'zero-daisy-pop': 'from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); }',
     },
@@ -937,7 +975,12 @@ export const dialog: RecipeInput = {
         },
         popup: withPresence(popupPresence('translateY(8px) scale(0.97)'), {
             base: {
-                padding: '1.5rem',
+                // A <dialog> keeps the UA's `content-box`, and zero ships no
+                // reset — so a width or max-width meant to leave a gutter
+                // grew by the padding, and at phone width the popup ran past
+                // both edges (#101). Its box is the border box.
+                boxSizing: 'border-box',
+                padding: 'var(--space-2xl)',
                 maxWidth: '32rem',
                 width: 'calc(100% - 2rem)',
                 background: 'var(--color-base-100)',
@@ -967,14 +1010,15 @@ export const dialog: RecipeInput = {
         },
         // daisy's `modal-action`: the actions sit at the trailing edge, one
         // step of the button gap apart, pushed down by the modal's own
-        // padding value rather than by a scale step (daisy writes 1.5rem for
-        // both, as `popup` above does).
+        // padding — daisy writes 1.5rem for both, and both now read the top
+        // of the ramp (`--space-2xl`, 1.25rem) so a density override moves
+        // the popup's inset and the footer's push-down together.
         footer: {
             base: {
                 display: 'flex',
                 justifyContent: 'flex-end',
                 gap: 'var(--space-md)',
-                marginBlockStart: '1.5rem',
+                marginBlockStart: 'var(--space-2xl)',
             },
         },
         close: {
@@ -999,6 +1043,19 @@ export const dialog: RecipeInput = {
     // Trigger-carried axes — see `btnColors` for why the popup is out of
     // reach and the trigger is the whole story here.
     variants: { color: btnColors(), size: btnSizes },
+    // The btn paddings and the footer's push-down, restated physically —
+    // see `lynxBtnPad` for the #1084 verdict this answers.
+    targets: {
+        lynx: {
+            parts: {
+                trigger: { base: lynxBtnPad(4) },
+                close: { base: lynxBtnPad(4) },
+                cancel: { base: lynxBtnPad(4) },
+                footer: { base: { marginTop: 'var(--space-2xl)' } },
+            },
+            variants: { size: lynxBtnSizes('trigger') },
+        },
+    },
 };
 
 // daisy "dropdown-content"/card look for floating panels.
@@ -1041,6 +1098,16 @@ export const popover: RecipeInput = {
     },
     // Trigger-carried axes — same wiring as dialog, same reason.
     variants: { color: btnColors(), size: btnSizes },
+    // The btn paddings, restated physically — see `lynxBtnPad` (#1084).
+    targets: {
+        lynx: {
+            parts: {
+                trigger: { base: lynxBtnPad(4) },
+                close: { base: lynxBtnPad(3) },
+            },
+            variants: { size: lynxBtnSizes('trigger') },
+        },
+    },
 };
 
 export const tooltip: RecipeInput = {
@@ -1077,6 +1144,13 @@ export const tooltip: RecipeInput = {
     // Trigger-carried axes — same wiring as dialog, same reason. The bubble
     // stays daisy's neutral tooltip whatever the trigger's colour.
     variants: { color: btnColors(), size: btnSizes },
+    // The btn paddings, restated physically — see `lynxBtnPad` (#1084).
+    targets: {
+        lynx: {
+            parts: { trigger: { base: lynxBtnPad(4) } },
+            variants: { size: lynxBtnSizes('trigger') },
+        },
+    },
 };
 
 // daisy "menu in a dropdown" look.
@@ -1101,7 +1175,7 @@ export const menu: RecipeInput = {
             base: {
                 display: 'flex',
                 alignItems: 'center',
-                gap: '0.625rem',
+                gap: 'var(--space-md)',
                 padding: 'var(--space-md) var(--space-lg)',
                 fontSize: 'var(--text-sm)',
                 fontWeight: 'var(--weight-medium)',
@@ -1121,7 +1195,7 @@ export const menu: RecipeInput = {
             base: {
                 display: 'flex',
                 alignItems: 'center',
-                gap: '0.625rem',
+                gap: 'var(--space-md)',
                 padding: 'var(--space-md) var(--space-lg)',
                 fontSize: 'var(--text-sm)',
                 fontWeight: 'var(--weight-medium)',
@@ -1140,7 +1214,7 @@ export const menu: RecipeInput = {
             base: {
                 display: 'flex',
                 alignItems: 'center',
-                gap: '0.625rem',
+                gap: 'var(--space-md)',
                 padding: 'var(--space-md) var(--space-lg)',
                 fontSize: 'var(--text-sm)',
                 fontWeight: 'var(--weight-medium)',
@@ -1175,7 +1249,7 @@ export const menu: RecipeInput = {
             base: {
                 display: 'flex',
                 alignItems: 'center',
-                gap: '0.625rem',
+                gap: 'var(--space-md)',
                 padding: 'var(--space-md) var(--space-lg)',
                 fontSize: 'var(--text-sm)',
                 fontWeight: 'var(--weight-medium)',
@@ -1223,6 +1297,13 @@ export const menu: RecipeInput = {
     // Trigger-carried axes — same wiring as dialog, same reason. The dropdown
     // and its items are top-layer siblings the donut cannot reach.
     variants: { color: btnColors(), size: btnSizes },
+    // The btn paddings, restated physically — see `lynxBtnPad` (#1084).
+    targets: {
+        lynx: {
+            parts: { trigger: { base: lynxBtnPad(4) } },
+            variants: { size: lynxBtnSizes('trigger') },
+        },
+    },
 };
 
 export const field: RecipeInput = {
@@ -1349,7 +1430,7 @@ export const checkbox: RecipeInput = {
     },
     parts: {
         root: {
-            base: { display: 'inline-flex', alignItems: 'center', gap: '0.625rem', cursor: 'pointer' },
+            base: { display: 'inline-flex', alignItems: 'center', gap: 'var(--space-md)', cursor: 'pointer' },
             states: {
                 disabled: { opacity: 'var(--disabled-opacity)', cursor: 'not-allowed' },
                 checked: {}, unchecked: {}, indeterminate: {},
@@ -1510,7 +1591,23 @@ export const checkbox: RecipeInput = {
                     // The tick's fill: the control's `color:` names
                     // `--checkbox-on-accent`, and `currentColor` was that
                     // ink by inheritance — spend it directly.
-                    base: { backgroundColor: 'var(--checkbox-on-accent)' },
+                    //
+                    // The tick's motion, restated as `transform`: the
+                    // standalone `rotate`/`translate` properties resolve on
+                    // iOS but not on Android (measured, signalxjs/lynx#1084),
+                    // so the emitter refuses them. `transform` functions are
+                    // proven on both platforms — and the transition follows
+                    // the property that now moves.
+                    base: {
+                        backgroundColor: 'var(--checkbox-on-accent)',
+                        transform: 'rotate(45deg)',
+                        transition: 'clip-path var(--duration-slow) var(--ease-standard) var(--duration-instant), '
+                            + 'opacity var(--duration-instant) var(--ease-standard) var(--duration-instant), '
+                            + 'transform var(--duration-slow) var(--ease-standard) var(--duration-instant)',
+                    },
+                    // The order matches the standalone properties' fixed
+                    // apply order (translate, then rotate).
+                    states: { indeterminate: { transform: 'translateY(-35%) rotate(0deg)' } },
                 },
             },
         },
@@ -1532,7 +1629,7 @@ export const radioGroup: RecipeInput = {
     },
     parts: {
         root: {
-            base: { display: 'flex', flexDirection: 'column', gap: '0.625rem' },
+            base: { display: 'flex', flexDirection: 'column', gap: 'var(--space-md)' },
             states: { invalid: {}, required: {} },
             selectors: {
                 // `invalid` is a fact about the GROUP — `item-control` carries
@@ -1546,7 +1643,7 @@ export const radioGroup: RecipeInput = {
             states: { disabled: { opacity: 'var(--disabled-opacity)' } },
         },
         item: {
-            base: { display: 'inline-flex', alignItems: 'center', gap: '0.625rem', cursor: 'pointer' },
+            base: { display: 'inline-flex', alignItems: 'center', gap: 'var(--space-md)', cursor: 'pointer' },
             states: {
                 disabled: { opacity: 'var(--disabled-opacity)', cursor: 'not-allowed' },
                 checked: {}, unchecked: {},
@@ -1762,6 +1859,18 @@ export const progress: RecipeInput = {
         // other way.
         'zero-daisy-indeterminate': 'from { margin-inline-start: -40%; } to { margin-inline-start: 100%; }',
     },
+    // The same sweep with a physical margin: logical spellings resolve on
+    // iOS but not on Android (measured, signalxjs/lynx#1084), so the emitter
+    // refuses the shared keyframes. Physical is the lynx target's norm — no
+    // RTL flow there for the sweep to mirror with. Keyframes merge per name,
+    // so this REPLACES the shared animation on lynx.
+    targets: {
+        lynx: {
+            keyframes: {
+                'zero-daisy-indeterminate': 'from { margin-left: -40%; } to { margin-left: 100%; }',
+            },
+        },
+    },
 };
 
 export const slider: RecipeInput = {
@@ -1887,6 +1996,22 @@ export const slider: RecipeInput = {
     targets: {
         lynx: {
             parts: {
+                track: {
+                    // The web track's `margin-block` breathing room,
+                    // restated physically: logical spellings resolve on iOS
+                    // but not on Android (measured, signalxjs/lynx#1084), so
+                    // the emitter refuses them. Physical is the lynx
+                    // target's norm — no RTL flow there.
+                    base: {
+                        marginTop: 'calc(var(--size-selector) * 1.5)',
+                        marginBottom: 'calc(var(--size-selector) * 1.5)',
+                    },
+                },
+                mark: {
+                    // Same #1084 verdict: the tick labels hang below the
+                    // track off a physical padding.
+                    base: { paddingTop: 'calc(var(--size-selector) * 2 + var(--space-2xs))' },
+                },
                 range: {
                     // The web fill deepens the accent 90/10 toward
                     // base-content (`progressFill`'s recipe); the plain
@@ -1910,9 +2035,20 @@ export const slider: RecipeInput = {
                     // 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.
+                    //
+                    // The centering geometry is restated physically beside
+                    // the paint: `inset-block-start`/`translate`/
+                    // `margin-inline-start` resolve on iOS but not on
+                    // Android (measured, signalxjs/lynx#1084 — the knob sat
+                    // off-center there), so the emitter refuses them.
+                    // `top` + `transform: translateY()` + `margin-left` are
+                    // proven on both platforms.
                     base: {
                         background: 'var(--color-base-100)',
                         border: '0.25rem solid var(--slider-accent)',
+                        top: '50%',
+                        transform: 'translateY(-50%)',
+                        marginLeft: 'calc(var(--size-selector) * -2.5)',
                     },
                 },
             },
@@ -2097,7 +2233,7 @@ export const select: RecipeInput = {
                 display: 'flex',
                 alignItems: 'center',
                 justifyContent: 'space-between',
-                gap: '0.625rem',
+                gap: 'var(--space-md)',
                 padding: 'var(--space-md) var(--space-lg)',
                 fontSize: 'var(--text-sm)',
                 fontWeight: 'var(--weight-medium)',
@@ -2133,6 +2269,17 @@ export const select: RecipeInput = {
     // Base equals the default (`tokens:` accent, `fieldControl`'s md height),
     // so the twins restate it; declared for the manifest (signalxjs/lynx#1070).
     defaultVariants: { color: 'primary', size: 'md' },
+    // The btn paddings, restated physically — see `lynxBtnPad` (#1084).
+    // The trigger ramp restates `md` too (unlike `btnSizes`), so its lynx
+    // counterpart does as well.
+    targets: {
+        lynx: {
+            parts: { trigger: { base: lynxBtnPad(4) } },
+            variants: {
+                size: { ...lynxBtnSizes('trigger'), md: { trigger: { base: lynxBtnPad(4) } } },
+            },
+        },
+    },
 };
 
 
@@ -2155,6 +2302,15 @@ const btnHeight = (step: keyof typeof BTN_STEPS): string =>
 
 export const button: RecipeInput = {
     component: 'button',
+    // Public to a design system derived from this one (#73).
+    hooks: {
+        properties: {
+            '--btn-accent': 'The fill of the solid variant.',
+            '--btn-on-accent': 'The ink on --btn-accent.',
+            '--btn-soft': 'The soft fill (soft variant, unfilled hover).',
+            '--btn-ink': 'The ink of the unfilled variants.',
+        },
+    },
     // The two axes meet here instead of multiplying. `color` sets the accent
     // pair; `variant` decides how the accent is used. 8 + 4 + 5 rules rather
     // than 8 × 4.
@@ -2165,9 +2321,34 @@ export const button: RecipeInput = {
         '--btn-ink': roleInk('primary'),
     },
     parts: {
+        // The loading spinner (#50): a real part zero renders before the
+        // label while `loading`, drawn as a ring in `currentColor` with one
+        // transparent quadrant — it takes whatever ink the variant chose.
+        // A literal duration and an explicit reduced-motion `none`: the kit
+        // collapses `--duration-*` under reduced motion, and an infinite
+        // loop at ~0s strobes rather than stops.
+        // daisy marks a loading button with a `loading loading-spinner` span;
+        // this is that span, zero's own now (it was a `loading` modifier's
+        // `::before` until #50 made loading a Button state).
+        spinner: {
+            base: {
+                boxSizing: 'border-box',
+                inlineSize: '1em',
+                blockSize: '1em',
+                flex: 'none',
+                borderRadius: '9999px',
+                border: 'calc(var(--border) * 2) solid currentColor',
+                borderBlockStartColor: 'transparent',
+                animation: 'zero-daisyui-btn-spin 0.7s linear infinite',
+            },
+            at: { 'reduced-motion': { base: { animation: 'none' } } },
+        },
         root: {
             base: {
                 appearance: 'none',
+                // An asChild `<a>` gets no UA underline (see the README's
+                // link-button note for the unlayered `a { color }` case).
+                textDecoration: 'none',
                 display: 'inline-flex',
                 alignItems: 'center',
                 justifyContent: 'center',
@@ -2183,6 +2364,9 @@ export const button: RecipeInput = {
                     + 'border-color var(--duration-fast) var(--ease-standard)',
             },
             states: {
+                // Work in flight (`loading`, #50): still focusable, still legible —
+                // the label is what the reader is waiting on — so no fade here.
+                loading: { cursor: 'progress' },
                 disabled: { opacity: 'var(--disabled-opacity)', cursor: 'not-allowed' },
                 // The ring is drawn on the page, offset clear of the button —
                 // ink, not fill, and the same 3:1 floor. On `--btn-accent` it
@@ -2328,40 +2512,20 @@ export const button: RecipeInput = {
         active: {
             root: { base: { transform: 'translateY(1px)', boxShadow: 'none', filter: 'brightness(0.92)' } },
         },
-        /**
-         * daisy's loading spinner, drawn by the recipe (#332): daisy marks
-         * the button with a `loading loading-spinner` span; zero changes no
-         * DOM, so the ring is a `::before` in `currentColor` with one
-         * transparent quadrant — it inherits whatever ink the variant chose,
-         * and the root's existing `gap` spaces it from the label. Literal
-         * duration + explicit reduced-motion `none`, like the spinner
-         * recipe: the kit collapses `--duration-*` under reduced motion, and
-         * an infinite loop at ~0s strobes rather than stops.
-         */
-        loading: {
-            root: {
-                base: { cursor: 'progress' },
-                selectors: {
-                    '&::before': {
-                        content: '""',
-                        boxSizing: 'border-box',
-                        inlineSize: '1em',
-                        blockSize: '1em',
-                        flex: 'none',
-                        borderRadius: '9999px',
-                        border: 'calc(var(--border) * 2) solid currentColor',
-                        borderBlockStartColor: 'transparent',
-                        animation: 'zero-daisyui-btn-spin 0.7s linear infinite',
-                    },
-                },
-                at: {
-                    'reduced-motion': { selectors: { '&::before': { animation: 'none' } } },
-                },
-            },
-        },
     },
     defaultVariants: { color: 'primary', variant: 'solid', size: 'md' },
     keyframes: { 'zero-daisyui-btn-spin': 'to { transform: rotate(360deg) }' },
+    // The icon chips' zeroed inline padding, restated physically: logical
+    // spellings resolve on iOS but not on Android (measured,
+    // signalxjs/lynx#1084), so the emitter refuses them.
+    targets: {
+        lynx: {
+            modifiers: {
+                square: { root: { base: { paddingLeft: '0', paddingRight: '0' } } },
+                circle: { root: { base: { paddingLeft: '0', paddingRight: '0' } } },
+            },
+        },
+    },
 };
 
 export const avatar: RecipeInput = {
@@ -2415,6 +2579,13 @@ export const avatar: RecipeInput = {
         },
     },
     variants: {
+        // The shape axis (zero#129) — one declaration on the root, whose
+        // `overflow: hidden` clips the image and the fallback alike. `rounded` is daisy's selector radius; the default is the circle.
+        shape: {
+            circle: { root: { base: { borderRadius: '9999px' } } },
+            square: { root: { base: { borderRadius: '0' } } },
+            rounded: { root: { base: { borderRadius: 'var(--radius-selector)' } } },
+        },
         // daisy colours the RING, not the fallback — that is what its avatar
         // does, and the fallback stays neutral so initials read the same
         // whichever role is chosen.
@@ -2589,6 +2760,24 @@ export const toast: RecipeInput = {
     // signalxjs/lynx#1070. No `color` default: the un-attributed toast is a
     // neutral base-200 surface, outside the color vocabulary.
     defaultVariants: { size: 'md' },
+    // The corner placements' physical anchors: logical inset spellings
+    // resolve on iOS but not on Android (measured, signalxjs/lynx#1084), so
+    // the emitter refuses them. Physical is the lynx target's norm — no RTL
+    // flow there, so `start` IS left and `end` IS right.
+    targets: {
+        lynx: {
+            parts: {
+                viewport: {
+                    selectors: {
+                        '&[data-placement="top-start"]': { left: '0' },
+                        '&[data-placement="top-end"]': { right: '0' },
+                        '&[data-placement="bottom-start"]': { left: '0' },
+                        '&[data-placement="bottom-end"]': { right: '0' },
+                    },
+                },
+            },
+        },
+    },
 };
 
 export const combobox: RecipeInput = {
@@ -2608,6 +2797,7 @@ export const combobox: RecipeInput = {
             base: {
                 display: 'inline-flex',
                 alignItems: 'stretch',
+                flexWrap: 'wrap',
                 minWidth: '13rem',
                 ...fieldControl,
                 transition: 'border-color var(--duration-fast) var(--ease-standard)',
@@ -2653,6 +2843,52 @@ export const combobox: RecipeInput = {
                 '&::placeholder': { color: 'color-mix(in oklab, var(--color-base-content) 60%, transparent)' },
             },
         },
+        // A chosen value under `multiple` (#39): a chip in the control, before
+        // the input. Symmetric metrics only — the physical-direction lint and
+        // the lynx emitter both refuse a one-sided inset.
+        // daisy's badge: a base-200 pill, centred in the stretched row.
+        tag: {
+            base: {
+                display: 'inline-flex',
+                alignItems: 'center',
+                alignSelf: 'center',
+                gap: 'var(--space-2xs)',
+                margin: 'var(--space-2xs)',
+                padding: 'var(--space-2xs) var(--space-sm)',
+                background: 'var(--color-base-200)',
+                color: 'var(--color-base-content)',
+                borderRadius: 'var(--radius-selector)',
+                fontSize: 'var(--text-xs)',
+                fontWeight: 'var(--weight-medium)',
+                lineHeight: 'var(--leading-none)',
+            },
+            states: { disabled: {} },
+        },
+        'tag-label': { base: { whiteSpace: 'nowrap' } },
+        'tag-remove': {
+            base: {
+                appearance: 'none',
+                border: 'none',
+                background: 'transparent',
+                color: 'inherit',
+                font: 'inherit',
+                borderRadius: 'var(--radius-selector)',
+                padding: '0 var(--space-2xs)',
+                lineHeight: 'var(--leading-none)',
+                cursor: 'pointer',
+                transition: 'background var(--duration-fast) var(--ease-standard)',
+            },
+            states: {
+                hover: { background: 'color-mix(in oklab, var(--color-base-content) 10%, transparent)' },
+                disabled: { opacity: 'var(--disabled-opacity)', cursor: 'not-allowed' },
+                ...focusRing,
+            },
+            selectors: {
+                '&[data-pressed]:not([data-disabled])': {
+                    background: 'color-mix(in oklab, var(--color-base-content) 18%, transparent)',
+                },
+            },
+        },
         trigger: {
             base: {
                 appearance: 'none',
@@ -2689,7 +2925,7 @@ export const combobox: RecipeInput = {
                 display: 'flex',
                 alignItems: 'center',
                 justifyContent: 'space-between',
-                gap: '0.625rem',
+                gap: 'var(--space-md)',
                 padding: 'var(--space-md) var(--space-lg)',
                 fontSize: 'var(--text-sm)',
                 fontWeight: 'var(--weight-medium)',
@@ -2721,15 +2957,15 @@ export const combobox: RecipeInput = {
             '--combobox-accent': `var(--color-${c})`,
         } } }])),
         // The control carries the height — the shared field ramp, the same one
-        // `select`'s trigger steps on — and the input carries the inset and the
-        // type. `md` restates exactly the resting values so the union stays
+        // `select`'s trigger steps on, as a floor so wrapped tags can grow it
+        // — and the input carries the inset and the type. `md` restates exactly the resting values so the union stays
         // complete.
         size: {
-            xs: { control: { base: { height: fieldHeight('xs') } }, input: { base: { padding: 'var(--space-2xs) var(--space-md)', fontSize: 'var(--text-xs)' } } },
-            sm: { control: { base: { height: fieldHeight('sm') } }, input: { base: { padding: 'var(--space-xs) var(--space-md)', fontSize: 'var(--text-sm)' } } },
-            md: { control: { base: { height: fieldHeight('md') } }, input: { base: { padding: 'var(--space-sm) var(--space-lg)', fontSize: 'var(--text-sm)' } } },
-            lg: { control: { base: { height: fieldHeight('lg') } }, input: { base: { padding: 'var(--space-md) var(--space-xl)', fontSize: 'var(--text-md)' } } },
-            xl: { control: { base: { height: fieldHeight('xl') } }, input: { base: { padding: 'var(--space-lg) var(--space-2xl)', fontSize: 'var(--text-lg)' } } },
+            xs: { control: { base: { minHeight: fieldHeight('xs') } }, input: { base: { padding: 'var(--space-2xs) var(--space-md)', fontSize: 'var(--text-xs)' } } },
+            sm: { control: { base: { minHeight: fieldHeight('sm') } }, input: { base: { padding: 'var(--space-xs) var(--space-md)', fontSize: 'var(--text-sm)' } } },
+            md: { control: { base: { minHeight: fieldHeight('md') } }, input: { base: { padding: 'var(--space-sm) var(--space-lg)', fontSize: 'var(--text-sm)' } } },
+            lg: { control: { base: { minHeight: fieldHeight('lg') } }, input: { base: { padding: 'var(--space-md) var(--space-xl)', fontSize: 'var(--text-md)' } } },
+            xl: { control: { base: { minHeight: fieldHeight('xl') } }, input: { base: { padding: 'var(--space-lg) var(--space-2xl)', fontSize: 'var(--text-lg)' } } },
         },
     },
     // The visible ring lives on `control`; input and trigger delegate.
@@ -2829,6 +3065,13 @@ export const toggle: RecipeInput = {
 // the on item filled with the accent.
 export const toggleGroup: RecipeInput = {
     component: 'toggle-group',
+    // Public to a design system derived from this one (#73).
+    hooks: {
+        properties: {
+            '--toggle-group-accent': 'The fill of an on item.',
+            '--toggle-group-on-accent': 'The ink on --toggle-group-accent.',
+        },
+    },
     tokens: {
         '--toggle-group-accent': 'var(--color-primary)',
         '--toggle-group-on-accent': 'var(--color-primary-content)',
@@ -3071,6 +3314,17 @@ export const numberInput: RecipeInput = {
             xl: { control: { base: { height: fieldHeight('xl') } }, input: { base: { fontSize: 'var(--text-lg)', padding: 'var(--space-lg) var(--space-xl)' } } },
         },
     },
+    // The steppers' inline padding, restated physically: logical spellings
+    // resolve on iOS but not on Android (measured, signalxjs/lynx#1084), so
+    // the emitter refuses them.
+    targets: {
+        lynx: {
+            parts: {
+                'increment-trigger': { base: { paddingLeft: 'var(--space-lg)', paddingRight: 'var(--space-lg)' } },
+                'decrement-trigger': { base: { paddingLeft: 'var(--space-lg)', paddingRight: 'var(--space-lg)' } },
+            },
+        },
+    },
 };
 
 /**
@@ -3254,7 +3508,7 @@ export const ratingGroup: RecipeInput = {
 const treeRow: NonNullable<PartStyles['base']> = {
     display: 'flex',
     alignItems: 'center',
-    gap: '0.625rem',
+    gap: 'var(--space-md)',
     padding: 'var(--space-sm) var(--space-md)',
     fontSize: 'var(--tree-text)',
     fontWeight: 'var(--weight-medium)',
@@ -3368,6 +3622,16 @@ export const treeView: RecipeInput = {
             xl: { root: { base: { '--tree-text': 'var(--text-lg)' } } },
         },
     },
+    // The indent, restated physically: logical spellings resolve on iOS but
+    // not on Android (measured, signalxjs/lynx#1084), so the emitter refuses
+    // them. Physical is the lynx target's norm — no RTL flow there.
+    targets: {
+        lynx: {
+            parts: {
+                'branch-content': { base: { paddingLeft: 'var(--space-lg)' } },
+            },
+        },
+    },
 };
 
 /**
@@ -3523,75 +3787,6 @@ export const textarea: RecipeInput = {
     },
 };
 
-/**
- * NativeSelect (#333) — daisy "select" flavor on the platform's own picker:
- * the `fieldControl` box (same metrics as every field, so mixed rows line
- * up), `appearance: none`, and the recipe-drawn chevron at the inline end.
- * No open state — the platform owns the popup — so colour surfaces on the
- * focus ring, exactly like input's.
- */
-export const nativeSelect: RecipeInput = {
-    component: 'native-select',
-    tokens: { '--native-select-accent': 'var(--color-base-content)' },
-    parts: {
-        root: {
-            base: { position: 'relative', display: 'inline-flex', alignItems: 'center' },
-            states: { disabled: {}, invalid: {}, required: {}, placeholder: {} },
-        },
-        control: {
-            base: {
-                appearance: 'none',
-                width: '100%',
-                minWidth: '12rem',
-                ...fieldControl,
-                color: 'var(--color-base-content)',
-                font: 'inherit',
-                fontSize: 'var(--text-sm)',
-                padding: 'var(--space-sm) var(--space-md)',
-                // Room for the chevron the platform no longer draws.
-                paddingInlineEnd: 'calc(var(--space-md) + 1.25em)',
-                cursor: 'pointer',
-                transition: 'border-color var(--duration-fast) var(--ease-standard)',
-            },
-            states: {
-                hover: { borderColor: 'var(--color-base-content)' },
-                invalid: { borderColor: 'var(--color-error)' },
-                disabled: { opacity: 'var(--disabled-opacity)', cursor: 'not-allowed' },
-                required: {},
-                // Same muting as the fields' placeholders (#264).
-                placeholder: { color: 'color-mix(in oklab, var(--color-base-content) 60%, transparent)' },
-                'focus-visible': { ...focusRing['focus-visible'], outline: '2px solid var(--native-select-accent)' },
-            },
-        },
-        indicator: {
-            base: {
-                position: 'absolute',
-                insetInlineEnd: 'var(--space-md)',
-                pointerEvents: 'none',
-                opacity: '0.6',
-                fontSize: 'var(--text-sm)',
-            },
-        },
-    },
-    // The visible ring lives on the <select> itself; the wrapper delegates.
-    skipStates: { root: ['focus-visible'] },
-    variants: {
-        // The ring carries the role — daisy's field chrome is neutral, so
-        // focus is the only place colour surfaces (input's exact move).
-        color: Object.fromEntries(ROLES.map((c) => [c, { root: { base: {
-            '--native-select-accent': `var(--color-${c})`,
-        } } }])),
-        // The shared field-height ramp, on the control itself.
-        size: {
-            xs: { control: { base: { height: fieldHeight('xs'), fontSize: 'var(--text-xs)', padding: 'var(--space-2xs) var(--space-xs)', paddingInlineEnd: 'calc(var(--space-xs) + 1.25em)' } } },
-            sm: { control: { base: { height: fieldHeight('sm'), fontSize: 'var(--text-xs)', padding: 'var(--space-xs) var(--space-sm)', paddingInlineEnd: 'calc(var(--space-sm) + 1.25em)' } } },
-            md: {},
-            lg: { control: { base: { height: fieldHeight('lg'), fontSize: 'var(--text-md)', padding: 'var(--space-md) var(--space-lg)', paddingInlineEnd: 'calc(var(--space-lg) + 1.25em)' } } },
-            xl: { control: { base: { height: fieldHeight('xl'), fontSize: 'var(--text-lg)', padding: 'var(--space-lg) var(--space-xl)', paddingInlineEnd: 'calc(var(--space-xl) + 1.25em)' } } },
-        },
-    },
-};
-
 // ── Content tier (#311) ───────────────────────────────────────────────────
 /**
  * daisy "card" flavor: `bg-base-100` on a `rounded-box` with a real shadow —
@@ -3600,6 +3795,12 @@ export const nativeSelect: RecipeInput = {
  */
 export const card: RecipeInput = {
     component: 'card',
+    // Public to a design system derived from this one (#73).
+    hooks: {
+        properties: {
+            '--card-pad': 'The card padding.',
+        },
+    },
     tokens: { '--card-pad': 'var(--space-xl)' },
     parts: {
         root: {
@@ -3756,6 +3957,88 @@ export const alert: RecipeInput = {
     },
 };
 
+/**
+ * EmptyState (zero#131) — daisy has no empty-state component; this is the
+ * `hero`-content idiom at card scale: a centred column on the base-200
+ * surface with the box radius, the icon in the role's ink and the surface
+ * in its soft tint when a tone is given.
+ */
+export const emptyState: RecipeInput = {
+    component: 'empty-state',
+    hooks: {
+        properties: {
+            '--empty-accent': 'The icon ink.',
+            '--empty-tint': 'The surface fill.',
+        },
+    },
+    tokens: {
+        '--empty-accent': 'color-mix(in oklab, var(--color-base-content) 60%, transparent)',
+        '--empty-tint': 'var(--color-base-200)',
+    },
+    parts: {
+        root: {
+            base: {
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                textAlign: 'center',
+                gap: 'var(--space-sm)',
+                padding: 'var(--space-2xl) var(--space-xl)',
+                background: 'var(--empty-tint)',
+                color: 'var(--color-base-content)',
+                borderRadius: 'var(--radius-box)',
+            },
+        },
+        icon: {
+            base: {
+                display: 'inline-flex',
+                color: 'var(--empty-accent)',
+                fontSize: 'var(--text-2xl)',
+                lineHeight: 'var(--leading-none)',
+                marginBlockEnd: 'var(--space-xs)',
+            },
+        },
+        title: {
+            base: {
+                margin: '0',
+                fontSize: 'var(--text-lg)',
+                fontWeight: 'var(--weight-bold)',
+                lineHeight: 'var(--leading-tight)',
+            },
+        },
+        description: {
+            base: {
+                maxInlineSize: '36ch',
+                fontSize: 'var(--text-sm)',
+                lineHeight: 'var(--leading-normal)',
+                color: 'color-mix(in oklab, var(--color-base-content) 70%, transparent)',
+            },
+        },
+        actions: {
+            base: {
+                display: 'flex',
+                flexWrap: 'wrap',
+                justifyContent: 'center',
+                gap: 'var(--space-sm)',
+                marginBlockStart: 'var(--space-sm)',
+            },
+        },
+    },
+    variants: {
+        color: Object.fromEntries(ROLES.map((c) => [c, { root: { base: {
+            '--empty-accent': roleInk(c),
+            '--empty-tint': `var(--color-${c}-soft)`,
+        } } }])),
+        size: {
+            xs: { root: { base: { padding: 'var(--space-md)', gap: 'var(--space-2xs)' } }, icon: { base: { fontSize: 'var(--text-xl)' } }, title: { base: { fontSize: 'var(--text-sm)' } }, description: { base: { fontSize: 'var(--text-xs)' } } },
+            sm: { root: { base: { padding: 'var(--space-lg)', gap: 'var(--space-xs)' } }, icon: { base: { fontSize: 'var(--text-2xl)' } }, title: { base: { fontSize: 'var(--text-md)' } }, description: { base: { fontSize: 'var(--text-xs)' } } },
+            md: {},
+            lg: { root: { base: { padding: 'calc(var(--space-2xl) * 1.5) var(--space-2xl)', gap: 'var(--space-md)' } }, icon: { base: { fontSize: 'var(--text-2xl)' } }, title: { base: { fontSize: 'var(--text-xl)' } }, description: { base: { fontSize: 'var(--text-md)' } } },
+            xl: { root: { base: { padding: 'calc(var(--space-2xl) * 2) var(--space-2xl)', gap: 'var(--space-lg)' } }, icon: { base: { fontSize: 'var(--text-2xl)' } }, title: { base: { fontSize: 'var(--text-2xl)' } }, description: { base: { fontSize: 'var(--text-md)' } } },
+        },
+    },
+};
+
 /**
  * daisy "badge" flavor: a fully-rounded pill with a hairline, filled by the
  * role. No `variant` — the repo-wide decision (#175) holds everywhere except
@@ -3764,7 +4047,18 @@ export const alert: RecipeInput = {
  */
 export const badge: RecipeInput = {
     component: 'badge',
+    // Public to a design system derived from this one (#73).
+    hooks: {
+        properties: {
+            '--badge-dot': 'The status dot\'s fill (zero#130); the pill\'s ink at rest.',
+            '--badge-dot-ring': 'The ring around a coloured status dot.',
+            '--badge-fill': 'The badge fill.',
+            '--badge-ink': 'The badge ink.',
+        },
+    },
     tokens: {
+        '--badge-dot': 'currentColor',
+        '--badge-dot-ring': 'currentColor',
         '--badge-fill': 'var(--color-base-200)',
         '--badge-ink': 'var(--color-base-content)',
     },
@@ -3780,7 +4074,7 @@ export const badge: RecipeInput = {
                 // daisy badges are pills; a large radius rather than 9999px so
                 // a square-cornered theme can still say so through the token.
                 borderRadius: 'var(--radius-selector)',
-                padding: '0.125rem 0.625rem',
+                padding: 'var(--space-2xs) var(--space-lg)',
                 fontSize: 'var(--text-xs)',
                 fontWeight: 'var(--weight-semibold)',
                 lineHeight: 'var(--leading-normal)',
@@ -3788,12 +4082,53 @@ export const badge: RecipeInput = {
                 textDecoration: 'none',
             },
         },
+        // The status dot (zero#130). On an uncoloured pill it is the pill's
+        // INK — a dot in `currentColor` is legible on whatever fill the pill
+        // has. Coloured — by its own `data-color`, or by the pill's, since the
+        // nearest carrier wins (#94) — it is the role's fill inside a ring in
+        // the role's `-content` ink, the timeline marker's answer: a dot that
+        // follows a solid pill of the same role still has an edge. `running` is a
+        // static halo the pulse breathes; under reduced motion the halo
+        // stays and the breathing stops, so the state never vanishes.
+        dot: {
+            base: {
+                display: 'inline-block',
+                flex: 'none',
+                inlineSize: '0.5em',
+                blockSize: '0.5em',
+                boxSizing: 'border-box',
+                borderRadius: '50%',
+                background: 'var(--badge-dot)',
+                border: '0.1em solid var(--badge-dot-ring)',
+            },
+            states: {
+                running: {
+                    boxShadow: '0 0 0 0.2em color-mix(in oklch, var(--badge-dot) 35%, transparent)',
+                    animation: 'zero-daisy-badge-pulse 1.6s ease-out infinite',
+                },
+            },
+            at: {
+                'reduced-motion': { states: { running: { animation: 'none' } } },
+                // Forced colours strip the fill and keep the border, so the
+                // border draws the whole dot there.
+                'forced-colors': { base: { borderWidth: '0.25em' } },
+            },
+        },
     },
     variants: {
-        color: Object.fromEntries(ROLES.map((c) => [c, { root: { base: {
-            '--badge-fill': `var(--color-${c})`,
-            '--badge-ink': `var(--color-${c}-content)`,
-        } } }])),
+        color: Object.fromEntries(ROLES.map((c) => [c, {
+            root: { base: {
+                '--badge-fill': `var(--color-${c})`,
+                '--badge-ink': `var(--color-${c}-content)`,
+            } },
+            // The dot's colour (zero#130): keyed under `variants.color` so the
+            // compiler anchors it on the pill's `data-color` AND on the dot's
+            // own re-carried one — the nearest carrier wins (#94).
+            dot: { base: {
+                '--badge-dot': `var(--color-${c})`,
+                '--badge-dot-ring': `var(--color-${c}-content)`,
+            } },
+        }])),
         size: {
             xs: { root: { base: { fontSize: 'var(--text-xs)', padding: '0 var(--space-sm)' } } },
             sm: { root: { base: { fontSize: 'var(--text-xs)', padding: '0 var(--space-md)' } } },
@@ -3801,6 +4136,8 @@ export const badge: RecipeInput = {
             lg: { root: { base: { fontSize: 'var(--text-sm)', padding: 'var(--space-2xs) var(--space-lg)' } } },
             xl: { root: { base: { fontSize: 'var(--text-md)', padding: 'var(--space-xs) var(--space-xl)' } } },
         },
+    },    keyframes: {
+        'zero-daisy-badge-pulse': 'from { box-shadow: 0 0 0 0 color-mix(in oklch, var(--badge-dot) 45%, transparent); } to { box-shadow: 0 0 0 0.5em transparent; }',
     },
 };
 
@@ -3846,6 +4183,12 @@ export const divider: RecipeInput = {
  */
 export const skeleton: RecipeInput = {
     component: 'skeleton',
+    // Public to a design system derived from this one (#73).
+    hooks: {
+        properties: {
+            '--skeleton-fill': 'The placeholder fill.',
+        },
+    },
     tokens: { '--skeleton-fill': 'var(--color-base-300)' },
     parts: {
         root: {
@@ -3935,7 +4278,11 @@ export const kbd: RecipeInput = {
                 alignItems: 'center',
                 justifyContent: 'center',
                 minInlineSize: '1.75em',
-                padding: '0.0625rem 0.4375rem',
+                // daisy's .0625rem/.4375rem, restated as the ramp steps they
+                // already are once the cap's own border is absorbed: the OUTER
+                // box lands on 2xs/md, so the cap rides the ramp under a density
+                // override while keeping daisy's painted size exactly at 1px.
+                padding: 'calc(var(--space-2xs) - var(--border)) calc(var(--space-md) - var(--border))',
                 background: 'var(--kbd-fill)',
                 color: 'var(--kbd-ink)',
                 border: 'var(--border) solid var(--color-base-300)',
@@ -4063,6 +4410,30 @@ export const indicator: RecipeInput = {
             xl: { item: { base: { fontSize: 'var(--text-lg)' } } },
         },
     },
+    // The corner slots, restated physically: logical inset spellings and the
+    // standalone `translate` property resolve on iOS but not on Android
+    // (measured, signalxjs/lynx#1084), so the emitter refuses them. Physical
+    // anchors plus `transform: translate()` are proven on both platforms,
+    // and physical is the lynx target's norm — no RTL flow there, so the
+    // hand-flipped RTL rules above have nothing to engage with either.
+    targets: {
+        lynx: {
+            parts: {
+                item: {
+                    selectors: {
+                        '&[data-placement="top-start"]': { top: '0', left: '0', transform: 'translate(-50%, -50%)' },
+                        '&[data-placement="top"]': { top: '0', left: '50%', transform: 'translate(-50%, -50%)' },
+                        '&[data-placement="top-end"]': { top: '0', right: '0', transform: 'translate(50%, -50%)' },
+                        '&[data-placement="start"]': { top: '50%', left: '0', transform: 'translate(-50%, -50%)' },
+                        '&[data-placement="end"]': { top: '50%', right: '0', transform: 'translate(50%, -50%)' },
+                        '&[data-placement="bottom-start"]': { bottom: '0', left: '0', transform: 'translate(-50%, 50%)' },
+                        '&[data-placement="bottom"]': { bottom: '0', left: '50%', transform: 'translate(-50%, 50%)' },
+                        '&[data-placement="bottom-end"]': { bottom: '0', right: '0', transform: 'translate(50%, 50%)' },
+                    },
+                },
+            },
+        },
+    },
 };
 
 /** daisy stats: the rounded base-100 panel with rule-thin item joins. */
@@ -4144,10 +4515,32 @@ export const stats: RecipeInput = {
     },
 };
 
+/**
+ * A timeline none of whose content sits on the start side: the root carries
+ * no start-placed content among its own items. Child combinators all the way
+ * down, so a timeline nested inside another's content answers only for
+ * itself.
+ */
+const TIMELINE_NO_START = '[data-scope="timeline"][data-part="root"]'
+    + ':not(:has(> [data-scope="timeline"][data-part="item"] > [data-scope="timeline"][data-part="content"][data-placement="start"])) > &';
+
 /** daisy timeline: the boxed content beside a dotted axis. */
 export const timeline: RecipeInput = {
     component: 'timeline',
-    tokens: { '--timeline-accent': 'var(--color-base-content)', '--timeline-marker-size': 'calc(var(--size-selector) * 3)' },
+    // Public to a design system derived from this one (#73).
+    hooks: {
+        properties: {
+            '--timeline-accent': 'The marker and connector accent.',
+            '--timeline-ring': 'The ring around a coloured marker — the role\'s -content ink (#94).',
+            '--timeline-marker-size': 'The marker diameter.',
+        },
+    },
+    tokens: {
+        '--timeline-accent': 'var(--color-base-content)',
+        // The coloured dot's ring (#94); uncoloured, it IS the dot.
+        '--timeline-ring': 'var(--timeline-accent)',
+        '--timeline-marker-size': 'calc(var(--size-selector) * 3)',
+    },
     parts: {
         root: {
             base: {
@@ -4183,6 +4576,11 @@ export const timeline: RecipeInput = {
                     gridTemplateColumns: 'auto 1fr',
                     flex: '1 1 0%',
                 },
+                // No content on the start side anywhere in this timeline →
+                // the start track collapses instead of holding half the item
+                // empty (#57). Automatic, so there is no prop to forget.
+                [`${TIMELINE_NO_START}[data-orientation="vertical"]`]: { gridTemplateColumns: '0 auto 1fr' },
+                [`${TIMELINE_NO_START}[data-orientation="horizontal"]`]: { gridTemplateRows: '0 auto 1fr' },
             },
         },
         marker: {
@@ -4192,12 +4590,24 @@ export const timeline: RecipeInput = {
                 boxSizing: 'border-box',
                 borderRadius: '9999px',
                 background: 'var(--timeline-accent)',
-                border: 'calc(var(--timeline-marker-size) / 2) solid var(--timeline-accent)',
+                // A coloured dot is the role fill inside a RING in the role's
+                // `-content` ink (#94): a light role on a light page, or a dark
+                // one on a dark page, has no edge of its own, and a per-entry
+                // tone is exactly the mark a reader has to find. One half of
+                // the role's own pair clears 3:1 against the page (the contrast
+                // audit measures every colour). With no colour the ring is the
+                // fill — the same solid dot as before.
+                border: 'calc(var(--timeline-marker-size) / 6) solid var(--timeline-ring)',
                 display: 'flex',
                 alignItems: 'center',
                 justifyContent: 'center',
                 fontSize: '0',
             },
+            at: {
+                // Forced colours strip the fill and keep the border, so the
+                // border draws the whole dot there, as it always did.
+                'forced-colors': { base: { borderWidth: 'calc(var(--timeline-marker-size) / 2)' } },
+            },
             selectors: {
                 // The axis cell, both orientations. `place-self` centres the
                 // dot on the line in the cross axis.
@@ -4275,6 +4685,7 @@ export const timeline: RecipeInput = {
     variants: {
         color: Object.fromEntries(ROLES.map((c) => [c, { marker: { base: {
             '--timeline-accent': `var(--color-${c})`,
+            '--timeline-ring': `var(--color-${c}-content)`,
         } } }])),
         size: {
             xs: { marker: { base: { '--timeline-marker-size': 'calc(var(--size-selector) * 2)' } }, content: { base: { fontSize: 'var(--text-xs)' } } },
@@ -4383,6 +4794,16 @@ export const chat: RecipeInput = {
             xl: { bubble: { base: { fontSize: 'var(--text-lg)', padding: 'var(--space-md) var(--space-xl)' } } },
         },
     },
+    // The row's vertical padding, restated physically: logical spellings
+    // resolve on iOS but not on Android (measured, signalxjs/lynx#1084), so
+    // the emitter refuses them.
+    targets: {
+        lynx: {
+            parts: {
+                root: { base: { paddingTop: 'var(--space-2xs)', paddingBottom: 'var(--space-2xs)' } },
+            },
+        },
+    },
 };
 
 /** daisy radial-progress: --value became --progress-percent; same ring. */
@@ -4636,6 +5057,112 @@ export const navbar: RecipeInput = {
     },
 };
 
+/**
+ * NavList (zero#132) — daisy's `menu` idiom for a sidebar: rounded rows, a
+ * base-200 wash on hover, and the current page as the role's soft fill in
+ * the role's ink. `meta` is where daisy's menu puts its badge.
+ */
+export const navList: RecipeInput = {
+    component: 'nav-list',
+    hooks: {
+        properties: {
+            '--nav-accent': 'The current link\'s ink.',
+            '--nav-tint': 'The current link\'s fill.',
+            '--nav-ink': 'The resting link ink.',
+        },
+    },
+    tokens: {
+        '--nav-accent': 'var(--color-base-content)',
+        '--nav-tint': 'var(--color-base-300)',
+        '--nav-ink': 'var(--color-base-content)',
+    },
+    parts: {
+        root: {
+            base: {
+                display: 'flex',
+                flexDirection: 'column',
+                gap: 'var(--space-lg)',
+                fontSize: 'var(--text-sm)',
+                color: 'var(--color-base-content)',
+            },
+        },
+        group: {
+            base: { display: 'flex', flexDirection: 'column', gap: 'var(--space-xs)' },
+        },
+        heading: {
+            base: {
+                padding: '0 var(--space-lg)',
+                fontSize: 'var(--text-xs)',
+                fontWeight: 'var(--weight-bold)',
+                opacity: '0.6',
+            },
+        },
+        list: {
+            base: {
+                display: 'flex',
+                flexDirection: 'column',
+                gap: 'var(--space-2xs)',
+                listStyle: 'none',
+                margin: '0',
+                padding: '0',
+            },
+        },
+        item: { base: { display: 'block' } },
+        link: {
+            base: {
+                display: 'flex',
+                alignItems: 'center',
+                gap: 'var(--space-sm)',
+                textDecoration: 'none',
+                color: 'var(--nav-ink)',
+                padding: 'var(--space-sm) var(--space-lg)',
+                borderRadius: 'var(--radius-field)',
+                fontWeight: 'var(--weight-medium)',
+                lineHeight: 'var(--leading-tight)',
+                transition: 'background var(--duration-fast) var(--ease-standard)',
+            },
+            states: {
+                hover: { background: 'var(--color-base-200)' },
+                active: { background: 'var(--nav-tint)', color: 'var(--nav-accent)' },
+                inactive: {},
+                ...focusRing,
+            },
+        },
+        icon: {
+            base: {
+                display: 'inline-flex',
+                inlineSize: '1.25em',
+                justifyContent: 'center',
+                flex: 'none',
+                lineHeight: 'var(--leading-none)',
+            },
+        },
+        meta: {
+            base: {
+                marginInlineStart: 'auto',
+                display: 'inline-flex',
+                alignItems: 'center',
+                fontSize: 'var(--text-xs)',
+                fontVariantNumeric: 'tabular-nums',
+                opacity: '0.7',
+            },
+        },
+    },
+    variants: {
+        color: Object.fromEntries(ROLES.map((c) => [c, { root: { base: {
+            '--nav-accent': roleInk(c),
+            '--nav-tint': `var(--color-${c}-soft)`,
+        } } }])),
+        size: {
+            xs: { root: { base: { fontSize: 'var(--text-xs)' } }, link: { base: { padding: 'var(--space-2xs) var(--space-md)' } } },
+            sm: { root: { base: { fontSize: 'var(--text-xs)' } }, link: { base: { padding: 'var(--space-xs) var(--space-md)' } } },
+            md: {},
+            lg: { root: { base: { fontSize: 'var(--text-md)' } }, link: { base: { padding: 'var(--space-md) var(--space-lg)' } } },
+            xl: { root: { base: { fontSize: 'var(--text-lg)' } }, link: { base: { padding: 'var(--space-lg) var(--space-xl)' } } },
+        },
+    },
+};
+
 /**
  * Breadcrumbs — daisy's breadcrumbs: a compact text-sm trail, links
  * underlining on hover, the current crumb plain full ink. Colour rebinds
@@ -4839,8 +5366,32 @@ export const pagination: RecipeInput = {
             xl: { root: { base: { '--pg-size': 'calc(var(--size-field) * 14)', '--pg-font': 'var(--text-lg)' } } },
         },
     },
+    // The cell's inline padding, restated physically: logical spellings
+    // resolve on iOS but not on Android (measured, signalxjs/lynx#1084), so
+    // the emitter refuses them.
+    targets: {
+        lynx: {
+            parts: {
+                item: { base: { paddingLeft: 'var(--space-2xs)', paddingRight: 'var(--space-2xs)' } },
+            },
+        },
+    },
 };
 
+/**
+ * The complete step's digit: the role hue deepened toward base-content, on
+ * the disc's 20% tint of that role — `roleInk`'s per-role keep, capped at
+ * 70%. The cap is the primary story: 95% on the tint measured 2.96:1 under
+ * nord's muted primary (the static contrast matrix, #403). The per-role part
+ * arrived with per-step colour (#112), when the matrix first measured every
+ * role here: a flat 70% put nord's muted accent/success/warning at 2.2–2.6:1
+ * and the dark themes' neutral (darker than the page) at 1.7–2.0:1, and
+ * `ROLE_INK_KEEP` already knew how much hue each of those can keep.
+ */
+const stepInk = (accent: string, role: string): string =>
+    `color-mix(in oklab, ${accent} `
+    + `${Math.min(ROLE_INK_KEEP[role as keyof typeof roles] ?? 55, 70)}%, var(--color-base-content))`;
+
 /**
  * Steps — daisy's steps translated to the richer rail: bold numbered discs
  * on base-200, the walked disc and line refilled with the accent pair
@@ -4853,6 +5404,9 @@ export const steps: RecipeInput = {
         '--steps-accent': 'var(--color-primary)',
         '--steps-accent-content': 'var(--color-primary-content)',
         '--steps-accent-ink': roleInk('primary'),
+        // Read through the accent, so it resolves on the element that sets
+        // it; a colour on the item restates it for that role.
+        '--steps-complete-ink': stepInk('var(--steps-accent)', 'primary'),
         '--steps-ind': 'calc(var(--size-selector) * 7)',
         '--steps-font': 'var(--text-sm)',
     },
@@ -4924,7 +5478,14 @@ export const steps: RecipeInput = {
             },
             states: {
                 active: { background: 'var(--steps-accent)', color: 'var(--steps-accent-content)' },
-                complete: { background: 'color-mix(in oklch, var(--steps-accent) 20%, var(--color-base-100))', color: 'var(--steps-accent-ink)' },
+                // Ink deepened toward base-content, per role (`stepInk`). The
+                // tint mixes in OKLAB: daisy's light base-100 is
+                // `oklch(100% 0 0)`, whose 0 hue the browser interpolates as
+                // written, so an OKLCH mix swung every role's tint toward red
+                // (warning's yellow came out pink) — which the browser parity
+                // check caught once per-step colour put all eight roles on
+                // the disc (#112).
+                complete: { background: 'color-mix(in oklab, var(--steps-accent) 20%, var(--color-base-100))', color: 'var(--steps-complete-ink)' },
                 inactive: { background: 'var(--color-base-200)', color: 'var(--color-base-content)' },
             },
         },
@@ -4973,10 +5534,15 @@ export const steps: RecipeInput = {
         },
     },
     variants: {
-        color: Object.fromEntries(ROLES.map((c) => [c, { root: { base: {
+        // Keyed on the ITEM, not the root (#112): the item re-carries
+        // `color`, so a step's own value outranks the rail's, and the
+        // disc, bridge and title inside it inherit whichever won. A root
+        // colour still reaches every item through the carrier's donut.
+        color: Object.fromEntries(ROLES.map((c) => [c, { item: { base: {
             '--steps-accent': `var(--color-${c})`,
             '--steps-accent-content': `var(--color-${c}-content)`,
             '--steps-accent-ink': roleInk(c),
+            '--steps-complete-ink': stepInk(`var(--color-${c})`, c),
         } } }])),
         size: {
             xs: { root: { base: { '--steps-ind': 'calc(var(--size-selector) * 5)', '--steps-font': 'var(--text-xs)' } } },
@@ -4986,12 +5552,76 @@ export const steps: RecipeInput = {
             xl: { root: { base: { '--steps-ind': 'calc(var(--size-selector) * 9)', '--steps-font': 'var(--text-md)' } } },
         },
     },
+    // The bridge's anchors and the vertical item's tail padding, restated
+    // physically: logical spellings resolve on iOS but not on Android
+    // (measured, signalxjs/lynx#1084), so the emitter refuses them. Physical
+    // is the lynx target's norm — no RTL flow there to mirror with.
+    targets: {
+        lynx: {
+            parts: {
+                item: {
+                    selectors: {
+                        '&[data-orientation="vertical"]': { paddingBottom: 'var(--space-lg)' },
+                    },
+                },
+                separator: {
+                    selectors: {
+                        '&[data-orientation="horizontal"]': {
+                            top: 'calc(var(--space-xs) + var(--steps-ind) / 2)',
+                            left: '50%',
+                        },
+                        '&[data-orientation="vertical"]': {
+                            left: 'calc(var(--space-xs) + (var(--steps-ind) - var(--border)) / 2)',
+                            top: 'calc(var(--space-xs) + var(--steps-ind))',
+                            bottom: 'calc(var(--space-xs) * -1)',
+                        },
+                    },
+                },
+            },
+        },
+    },
+};
+
+/**
+ * The modal sheet's slide (#83): in from its edge, back out to it.
+ *
+ * `translate` is physical, so the travel is a custom property that flips with
+ * the placement AND the direction — off the reading start is leftward in LTR
+ * and rightward in RTL (the `rtl` hedge, as everywhere here). Keyed on
+ * `data-l-dock="sheet"`, the regime, which holds through the exit where
+ * `:modal` does not, so the slide-out leaves from the sheet's own box.
+ * Opacity stays at 1: the travel is the transition. Each direction rides the
+ * transition declared at its destination; reduced motion drops both.
+ */
+const sheetSlide = (enter: string, exit: string): PartStyles => {
+    const sheet = '&[data-l-dock="sheet"]';
+    const open = `${sheet}[data-state="open"]`;
+    const travel = (tempo: string): string => {
+        const duration = tempo.split(' ')[0];
+        return `translate ${tempo}, display ${duration} allow-discrete, overlay ${duration} allow-discrete`;
+    };
+    return {
+        base: { '--drawer-travel': '-100%' },
+        selectors: {
+            '&[data-placement="end"]': { '--drawer-travel': '100%' },
+            [`&[data-placement="start"]${rtl}`]: { '--drawer-travel': '100%' },
+            [`&[data-placement="end"]${rtl}`]: { '--drawer-travel': '-100%' },
+            [sheet]: { opacity: '1', translate: 'var(--drawer-travel) 0', transition: travel(exit) },
+            [open]: { translate: 'none', transition: travel(enter) },
+        },
+        at: {
+            'starting-style': { selectors: { [open]: { opacity: '1', translate: 'var(--drawer-travel) 0' } } },
+            'reduced-motion': { selectors: { [sheet]: { transition: 'none' }, [open]: { transition: 'none' } } },
+        },
+    };
 };
 
 /**
  * Drawer — daisy's drawer-side as a native <dialog> edge sheet: base-100
- * paper, no border (daisy separates the drawer with the scrim), faded in.
- * Base render is the inline mode; `:modal` is the top-layer edge sheet.
+ * paper, no border (daisy separates the drawer with the scrim), sliding in
+ * from its edge the way daisy's drawer-side does (`translate` over 0.3s,
+ * #83). Base render is the inline mode; `data-l-dock="sheet"` is the
+ * top-layer edge sheet.
  */
 export const drawer: RecipeInput = {
     component: 'drawer',
@@ -5006,7 +5636,10 @@ export const drawer: RecipeInput = {
                 ...focusRing,
             },
         },
-        panel: withPresence(popupPresence('none'), {
+        panel: withPresence(withPresence(popupPresence('none'), sheetSlide(
+            'var(--duration-slow) var(--ease-standard)',
+            'var(--duration-slow) var(--ease-standard)',
+        )), {
             base: {
                 padding: 'var(--space-lg)',
                 background: 'var(--color-base-100)',
@@ -5014,30 +5647,39 @@ export const drawer: RecipeInput = {
                 border: 'none',
                 borderRadius: 'var(--radius-box)',
                 boxShadow: 'var(--shadow-xl)',
-                inlineSize: 'min(20rem, 85vw)',
+                // The width is capped by `--l-measure` (Drawer.Panel's
+                // `measure`, via the layout step table); this is the default
+                // an unset `measure` leaves. A cap, not a width, because the
+                // table spells `full` as `none` — valid only for a max. In
+                // flow and as a sheet alike, the panel fills what it is given
+                // up to the measure, as its border box, so `full` never
+                // overflows by its own padding.
+                boxSizing: 'border-box',
+                '--l-measure': 'min(20rem, 85vw)',
+                inlineSize: '100%',
+                maxInlineSize: 'var(--l-measure)',
             },
             states: { open: {}, closed: {} },
             selectors: {
                 /**
-                 * The platform's own spelling of "this open is the modal
-                 * one": `:modal`. The base styles above are the INLINE
-                 * render (`show()` keeps the panel in flow); this block is
-                 * the top-layer edge sheet. Logical insets pin the edge, so
-                 * RTL mirrors free.
+                 * The top-layer edge sheet, keyed on the regime
+                 * (`data-l-dock="sheet"`) rather than `:modal`, which stops
+                 * matching the moment `close()` runs — so the sheet keeps its
+                 * box through the exit (#83). The base styles above are the
+                 * INLINE render. Logical insets pin the edge, so RTL mirrors
+                 * free.
                  */
-                '&:modal': {
+                '&[data-l-dock="sheet"]': {
                     position: 'fixed',
                     insetBlockStart: '0',
                     insetBlockEnd: '0',
                     blockSize: '100dvh',
                     maxBlockSize: '100dvh',
-                    inlineSize: 'min(20rem, 85vw)',
-                    maxInlineSize: 'none',
                     margin: '0',
                     borderRadius: '0',
                 },
-                '&[data-placement="start"]:modal': { insetInlineStart: '0', insetInlineEnd: 'auto' },
-                '&[data-placement="end"]:modal': { insetInlineStart: 'auto', insetInlineEnd: '0' },
+                '&[data-placement="start"][data-l-dock="sheet"]': { insetInlineStart: '0', insetInlineEnd: 'auto' },
+                '&[data-placement="end"][data-l-dock="sheet"]': { insetInlineStart: 'auto', insetInlineEnd: '0' },
             },
         }),
         backdrop: {
@@ -5059,6 +5701,16 @@ export const drawer: RecipeInput = {
     // Trigger-carried axes — see `btnColors` for why the panel is out of
     // reach and the trigger is the whole story here.
     variants: { color: btnColors(), size: btnSizes },
+    // The btn paddings, restated physically — see `lynxBtnPad` (#1084).
+    targets: {
+        lynx: {
+            parts: {
+                trigger: { base: lynxBtnPad(4) },
+                close: { base: lynxBtnPad(4) },
+            },
+            variants: { size: lynxBtnSizes('trigger') },
+        },
+    },
 };
 
 /**
@@ -5069,7 +5721,20 @@ export const drawer: RecipeInput = {
  */
 export const table: RecipeInput = {
     component: 'table',
+    // Public to a design system derived from this one (#73).
+    hooks: {
+        properties: {
+            '--table-cell-align': 'Cell text alignment; zero writes it inline from the column spec.',
+            '--table-accent': 'The header ink accent.',
+            '--table-pad-block': 'Cell block padding.',
+            '--table-pad-inline': 'Cell inline padding.',
+            '--table-font': 'The table font size.',
+        },
+    },
     tokens: {
+        // The column spec's alignment (#55): a cell that names an aligned
+        // column overrides it inline; everything else reads `start`.
+        '--table-cell-align': 'start',
         '--table-accent': 'var(--color-base-content)',
         '--table-pad-block': 'var(--space-sm)',
         '--table-pad-inline': 'var(--space-md)',
@@ -5083,6 +5748,9 @@ export const table: RecipeInput = {
                 borderRadius: 'var(--radius-box)',
                 background: 'var(--color-base-100)',
             },
+        // Stacked (Table.Root stack, #55): zero lays each row out as a block
+        // below the table's breakpoint; the card it becomes is drawn here.
+            at: tableStackAt(tokens, 'root', { border: '0', borderRadius: '0', background: 'transparent' }),
         },
         table: {
             base: {
@@ -5100,34 +5768,52 @@ export const table: RecipeInput = {
                 fontSize: 'var(--text-xs)',
                 color: 'color-mix(in oklab, var(--color-base-content) 60%, transparent)',
             },
+            at: tableStackAt(tokens, 'caption', { paddingInline: '0' }),
         },
         head: {},
-        body: {},
+        body: { at: tableStackAt(tokens, 'body', { rowGap: 'var(--space-md)' }) },
         foot: {
             base: {
                 fontSize: 'var(--text-xs)',
                 color: 'color-mix(in oklab, var(--color-base-content) 60%, transparent)',
             },
+            at: tableStackAt(tokens, 'foot', { rowGap: 'var(--space-md)', marginBlockStart: 'var(--space-md)' }),
         },
         row: {
             base: { borderBlockEnd: 'var(--border) solid var(--color-base-200)' },
             states: {
                 selected: { background: 'var(--color-base-300)' },
             },
+            at: tableStackAt(tokens, 'row', {
+                border: 'var(--border) solid var(--color-base-200)',
+                borderRadius: 'var(--radius-box)',
+                background: 'var(--color-base-100)',
+                padding: 'var(--table-pad-block) var(--table-pad-inline)',
+            }),
         },
         'header-cell': {
             base: {
                 padding: 'var(--table-pad-block) var(--table-pad-inline)',
-                textAlign: 'start',
+                textAlign: 'var(--table-cell-align)',
                 fontWeight: 'var(--weight-semibold)',
                 fontSize: 'var(--text-xs)',
                 color: 'color-mix(in oklab, var(--table-accent) 60%, transparent)',
             },
+            at: tableStackAt(tokens, 'header-cell', { paddingInline: '0' }),
         },
         cell: {
             base: {
                 padding: 'var(--table-pad-block) var(--table-pad-inline)',
-                textAlign: 'start',
+                textAlign: 'var(--table-cell-align)',
+            },
+            at: tableStackAt(tokens, 'cell', { paddingInline: '0', paddingBlock: 'var(--space-xs)' }),
+        },
+        // A stacked cell's column label, in the header's muted semibold.
+        'cell-label': {
+            base: {
+                fontWeight: 'var(--weight-semibold)',
+                fontSize: 'var(--text-xs)',
+                color: 'color-mix(in oklab, var(--table-accent) 60%, transparent)',
             },
         },
     },
@@ -5449,6 +6135,22 @@ export const carousel: RecipeInput = {
             xl: { root: { base: { '--carousel-dot': '0.875rem', '--carousel-nav': '3rem' } } },
         },
     },
+    // The nav buttons' anchors, restated physically: logical inset
+    // spellings resolve on iOS but not on Android (measured,
+    // signalxjs/lynx#1084), so the emitter refuses them. Physical is the
+    // lynx target's norm — no RTL flow there, so `start` IS left.
+    targets: {
+        lynx: {
+            parts: {
+                'prev-trigger': {
+                    base: { top: 'calc(50% - var(--carousel-nav) / 2)', left: 'var(--space-sm)' },
+                },
+                'next-trigger': {
+                    base: { top: 'calc(50% - var(--carousel-nav) / 2)', right: 'var(--space-sm)' },
+                },
+            },
+        },
+    },
 };
 
 /**
@@ -5588,6 +6290,12 @@ export const countdown: RecipeInput = {
             xl: { root: { base: { '--countdown-font': 'var(--text-3xl)' } } },
         },
     },
+    // One line inside a sentence (#57): the surrounding text's size and
+    // weight instead of the display step. What stays is what makes
+    // it a countdown — tabular digits, its ink, the per-tick entry.
+    modifiers: {
+        inline: { root: { base: { fontSize: 'inherit', fontWeight: 'inherit' } } },
+    },
     keyframes: { 'zero-daisyui-countdown-in': 'from { transform: translateY(0.6em); opacity: 0; }' },
 };
 
@@ -5693,16 +6401,31 @@ export const diff: RecipeInput = {
                 },
             },
         },
+        // The reveal pane's pin and the handle's centering margin, restated
+        // physically: logical spellings resolve on iOS but not on Android
+        // (measured, signalxjs/lynx#1084), so the emitter refuses them.
+        // Physical is the lynx target's norm — no RTL flow there to mirror
+        // with.
+        lynx: {
+            parts: {
+                after: {
+                    base: { top: '0', bottom: '0', left: '0' },
+                },
+                handle: {
+                    base: { top: '0', bottom: '0', marginLeft: 'calc(var(--diff-hit) / -2)' },
+                },
+            },
+        },
     },
 };
 
 export const recipes: RecipeInput[] = [
     tabs, collapsible, switchRecipe, dialog, popover, tooltip, menu,
     field, checkbox, radioGroup, progress, slider, accordion, select, button, avatar, toast, combobox,
-    toggle, toggleGroup, numberInput, ratingGroup, treeView, input, textarea, nativeSelect,
-    card, alert, badge, divider, skeleton, spinner,
+    toggle, toggleGroup, numberInput, ratingGroup, treeView, input, textarea,
+    card, alert, emptyState, badge, divider, skeleton, spinner,
     kbd, status, indicator, stats, timeline, chat, radialProgress, join,
-    navbar, breadcrumbs, pagination, steps, drawer,
+    navbar, navList, breadcrumbs, pagination, steps, drawer,
     table,
     fileUpload,
     carousel,