@sigx/zero-daisyui 0.14.0 → 0.16.0

package/src/recipes.ts

@@ -1413,7 +1413,17 @@ export const tooltip: RecipeInput = {
     targets: {
         web: floatingArrow('tooltip', { background: 'var(--color-neutral)' }, '0.5rem'),
         lynx: {
-            parts: { trigger: { base: lynxBtnPad(4) } },
+            parts: {
+                // Content-sized like daisy's btn, never broken mid-word
+                // (signalxjs/lynx#1165). No pressed rule: the anatomy
+                // declares none — the long press paints the `open` state.
+                trigger: { base: { ...lynxBtnPad(4), ...lynxBtnFit } },
+                // The arrow's paint: the bubble's neutral, continued. The
+                // web's `floatingArrow` geometry rides runtime custom
+                // properties lynx does not write, so lynx-zero places the
+                // 8px square and turns it itself (signalxjs/lynx#1277).
+                arrow: { base: { background: 'var(--color-neutral)' } },
+            },
             variants: { size: lynxBtnSizes('trigger') },
         },
     },
@@ -1625,12 +1635,34 @@ 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).
+    // The btn paddings, restated physically — see `lynxBtnPad` (#1084) —
+    // and the trigger's press rendering, as popover's (`lynxBtnPressed`).
     targets: {
         web: floatingArrow('menu', panelArrowPaint),
         lynx: {
             parts: {
-                trigger: { base: lynxBtnPad(4) },
+                // Content-sized like daisy's btn (signalxjs/lynx#1165), an
+                // explicit row (lynx does not default the direction the way a
+                // browser does), the held state in place of the dropped
+                // `:hover`, and the box-shadow ring (signalxjs/lynx#1163).
+                trigger: {
+                    base: { ...lynxBtnPad(4), ...lynxBtnFit, flexDirection: 'row' },
+                    states: { pressed: lynxBtnPressed, ...lynxFocus() },
+                },
+                // The popups' rows stack and span the panel: a flex column
+                // (a lynx view's default is a shrink-wrapping linear box).
+                popup: { base: { display: 'flex', flexDirection: 'column' } },
+                'sub-popup': { base: { display: 'flex', flexDirection: 'column' } },
+                // Every row kind is a mark / label / shortcut / chevron row.
+                // A touch list has no hover: lynx-zero stamps `highlighted` on
+                // the row under the finger, so the web's highlight wash is the
+                // press rendering as it stands. The ✓ (item-indicator) and ›
+                // (sub-trigger) the web draws with `::after` render as
+                // `<text>` glyphs in lynx-zero — there is no pseudo-element.
+                item: { base: { flexDirection: 'row' } },
+                'checkbox-item': { base: { flexDirection: 'row' } },
+                'radio-item': { base: { flexDirection: 'row' } },
+                'sub-trigger': { base: { flexDirection: 'row' } },
                 // The shortcut's reading-end push, restated physically (#1084).
                 shortcut: { base: { marginLeft: 'auto', paddingLeft: 'var(--space-lg)' } },
             },
@@ -4610,6 +4642,70 @@ export const combobox: RecipeInput = {
     },
     targets: {
         web: { parts: { popup: { base: anchoredListbox } } },
+        // lynx-zero's combobox (signalxjs/lynx#1278): a native text field in
+        // a painted `control` view, the list in the overlay outlet.
+        lynx: {
+            parts: {
+                // select's bounds (signalxjs/lynx#1146): 20rem, never wider
+                // than the container. The web's 13rem control floor
+                // overflowed any cell narrower than 208px on a phone; the
+                // control fills the root instead.
+                root: { base: { width: '20rem', maxWidth: '100%', minWidth: '3rem' } },
+                // The web `:hover` border is dropped on a touch platform. The
+                // ring is the box-shadow spelling (signalxjs/lynx#1163): lynx
+                // has no `outline-offset`, and its outline ignores the radius.
+                control: {
+                    base: { minWidth: '3rem', width: '100%' },
+                    states: lynxFocus(),
+                },
+                // `color: inherit` never reaches a native text field, and
+                // `::placeholder` does not exist: the ink is explicit, and the
+                // placeholder takes lynx's `-x-placeholder-color` — the web's
+                // 60% mix, baked per theme (input's spelling; its constant is
+                // declared below this recipe, so the value is restated).
+                input: {
+                    base: {
+                        color: 'var(--color-base-content)',
+                        '-x-placeholder-color': 'color-mix(in oklab, var(--color-base-content) 60%, transparent)',
+                        flexGrow: '1',
+                        flexShrink: '1',
+                    },
+                },
+                // The chevron and the × are `<view>`s holding a glyph: centred
+                // in the stretched row (a lynx view lays its child out at the
+                // top), in explicit ink. A held chevron comes up to full ink —
+                // the touch answer to the web's resting 60%. The clear-trigger
+                // declares no pressed flag; its feedback is the text leaving.
+                trigger: {
+                    base: { color: 'var(--color-base-content)', display: 'flex', alignItems: 'center', justifyContent: 'center' },
+                    states: { pressed: { opacity: '1' } },
+                },
+                'clear-trigger': {
+                    base: { color: 'var(--color-base-content)', display: 'flex', alignItems: 'center', justifyContent: 'center' },
+                },
+                // The chip's ring is the lynx one; its remove button's ring is
+                // drawn inside, so it never paints over the chip's label.
+                tag: { states: lynxFocus() },
+                'tag-remove': {
+                    base: { color: 'var(--color-base-content)' },
+                    states: lynxFocus({ inset: true }),
+                },
+                // The popup renders in the overlay outlet, outside the root,
+                // so it cannot inherit `--combobox-accent`, and an unresolved
+                // `var()` on lynx has no fallback (select's
+                // signalxjs/lynx#1168). The popup restates the accent; its
+                // colour-axis twins are in `variants.color` below.
+                popup: { base: { '--combobox-accent': 'var(--color-primary)' } },
+                // A touch list has no pointer highlight: a held option takes
+                // the highlighted wash.
+                item: { states: { pressed: { background: 'var(--color-base-200)' } } },
+            },
+            variants: {
+                color: Object.fromEntries(ROLES.map((c) => [c, { popup: { base: {
+                    '--combobox-accent': `var(--color-${c})`,
+                } } }])),
+            },
+        },
     },
 };
 
@@ -5374,6 +5470,30 @@ const treeRowSelectors: NonNullable<PartStyles['selectors']> = {
     },
 };
 
+/**
+ * The tree rows' lynx states (signalxjs/lynx#1256). The web's press wash is
+ * `[data-pressed]:not([data-disabled]):not([data-selected])`; lynx has no
+ * absence classes, so the wash is the plain `pressed` state and a selected
+ * row restores its accent fill below. The web's descendant rule that swaps
+ * the check box's pair on a selected row (`[data-selected] &` on the box)
+ * becomes the ROW's own custom properties: they inherit to the box inside
+ * it. The focus ring is inset (rows sit flush) and drawn as a box-shadow,
+ * which follows the row's radius where lynx's `outline` does not.
+ */
+const lynxTreeRowStates: Record<string, CssProps> = {
+    pressed: { background: 'var(--color-base-300)' },
+    selected: {
+        '--tree-check': 'var(--tree-on-accent)',
+        '--tree-on-check': 'var(--tree-accent)',
+    },
+    ...lynxFocus({ inset: true }),
+};
+
+/** A held selected row keeps its accent fill (the web's `:not([data-selected])`). */
+const lynxTreeRowSelectors: Record<string, CssProps> = {
+    '&[data-selected][data-pressed]': { background: 'var(--tree-accent)' },
+};
+
 /**
  * `tickGlyphFallback` for the node check box, whose tick is its `::after`:
  * the geometry drops and the same pseudo carries the glyph, in the medium's
@@ -5524,12 +5644,37 @@ 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.
+    // lynx (signalxjs/lynx#1256, zero#478). No hover on a touch platform, no
+    // `:not()`, no pseudo-elements, no descendant selectors: each web rule
+    // those carry is restated on the part the runtime stamps. The skin's
+    // `:dir(rtl)` mirror and the `@media` stops have no lynx form (no RTL
+    // flow, no conditions) and stay dropped.
     targets: {
         lynx: {
             parts: {
+                item: { states: lynxTreeRowStates, selectors: lynxTreeRowSelectors },
+                'branch-trigger': { states: lynxTreeRowStates, selectors: lynxTreeRowSelectors },
+                // `inline-block` is not a lynx display value. The glyph is a
+                // `<text>` part: a 1em box centred on it, so the quarter turn
+                // pivots on the chevron instead of swinging it sideways.
+                'branch-indicator': { base: { display: 'flex', width: '1em', textAlign: 'center' } },
+                // The mark is a `<text>` child lynx-zero renders (`✓` checked,
+                // `−` indeterminate) in place of the web's clip-path `::after`
+                // tick — clip-path and pseudo-elements are both dropped on
+                // lynx. The glyph is the forced-colors fallback's shape
+                // (`nodeTickFallback`), inked with the box's `-on` pair and
+                // sized by inheritance from the row.
+                'node-checkbox': {
+                    base: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        color: 'var(--tree-on-check)',
+                    },
+                },
+                // The indent, restated physically: logical spellings resolve
+                // on iOS but not on Android (measured, signalxjs/lynx#1084),
+                // so the emitter refuses them.
                 'branch-content': { base: { paddingLeft: 'var(--space-lg)' } },
             },
         },
@@ -5633,6 +5778,10 @@ export const input: RecipeInput = {
             selectors: {
                 // Same muting, same reason as `number-input/input` (#264).
                 '&::placeholder': { color: 'color-mix(in oklab, var(--color-base-content) 60%, transparent)' },
+                // zero draws its own ClearTrigger and clears on Escape, and Firefox
+                // draws no native clear: hide the engine's cancel button everywhere (#446).
+                '&::-webkit-search-cancel-button': { appearance: 'none', display: 'none' },
+                '&::-webkit-search-decoration': { appearance: 'none' },
             },
         },
         // daisy's `label` inside `.input`: a quiet prefix/suffix at one edge,
@@ -6154,7 +6303,13 @@ export const alert: RecipeInput = {
                     },
                 },
                 // Pinned top-right, its glyph on the padding edge. `inherit`
-                // is spelled as the root's own ink.
+                // is spelled as the root's own ink. A square chip, the
+                // glyph centred in it: the web's `line-height: 1` + 2xs
+                // padding make an almost-square box, but lynx does not carry
+                // the line-height into the glyph's `<text>`, so the padded
+                // box was a narrow × in a tall line — a 14 × 20pt pill whose
+                // press wash and focus ring drew as vertical ovals
+                // (signalxjs/lynx#1253). The box is sized outright instead.
                 close: {
                     base: {
                         position: 'absolute',
@@ -6162,6 +6317,13 @@ export const alert: RecipeInput = {
                         right: 'calc(var(--alert-pad-x) - var(--space-2xs))',
                         color: 'var(--color-base-content)',
                         fontSize: 'var(--text-md)',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        boxSizing: 'border-box',
+                        padding: '0',
+                        width: 'calc(var(--text-md) + var(--space-2xs) * 2)',
+                        height: 'calc(var(--text-md) + var(--space-2xs) * 2)',
                     },
                     states: lynxFocus({ gap: 'var(--alert-tint)' }),
                 },
@@ -6581,7 +6743,11 @@ export const divider: RecipeInput = {
             // no fill, its cross size following the label, a row when
             // horizontal. Both are lynx-zero rendering details, not
             // modifiers an author sets, so they are styled from raw lynx css
-            // (the toggle-group join ends' reasoning).
+            // (the toggle-group join ends' reasoning). A segment centres
+            // itself on the label (signalxjs/lynx#1272): it carries the
+            // root's `align-self: stretch`, and a stretched item with a
+            // definite thickness lands at cross-start on lynx — the top of
+            // the label row, not the middle daisy's rules sit on.
             css: `
 .zx-divider__root.zx-m-labelled {
     --divider-ink: transparent;
@@ -6595,6 +6761,7 @@ export const divider: RecipeInput = {
 }
 .zx-divider__root.zx-m-segment {
     flex: 1 1 0;
+    align-self: center;
 }
 .zx-divider__root.zx-m-segment.zx-o-horizontal {
     min-width: 0;
@@ -6806,6 +6973,15 @@ export const kbd: RecipeInput = {
                         ...lynxSides('border{}Width', 'var(--border)', ['Top', 'Right', 'Left']),
                         borderBottomWidth: 'calc(var(--border) * 2)',
                         ...lynxSides('border{}Color', 'var(--color-base-300)'),
+                        // The web's monospace cap comes from the browser's
+                        // UA style for `<kbd>`, not the recipe; lynx has no
+                        // UA sheet, so the face is spelled here
+                        // (signalxjs/lynx#1254). Concrete names, not a
+                        // token: iOS Lynx walks the list with
+                        // `UIFont fontWithName:` (Menlo ships on iOS, the
+                        // CSS generics do not resolve there), and
+                        // `monospace` serves the lynx web target.
+                        fontFamily: 'Menlo, monospace',
                     },
                 },
             },
@@ -7524,14 +7700,43 @@ 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.
+    // Lynx (signalxjs/lynx#1276):
+    // - 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;
+    // - lynx has no grid, so the row is a flex column (header, bubble,
+    //   footer), gathered to the placement's side. The avatar leaves the
+    //   flow: lynx-zero pins it to the row's bottom corner and reserves its
+    //   measured width beside the column;
+    // - the `[data-placement] > &` selectors have no class form on the
+    //   parts (placement is the root's), so the bubble's square tail corner
+    //   is raw lynx css, a descendant of the placed root — the shape the
+    //   theme restatements are proven to match. Physical corners: lynx has
+    //   no RTL flow.
     targets: {
         lynx: {
             parts: {
-                root: { base: { paddingTop: 'var(--space-2xs)', paddingBottom: 'var(--space-2xs)' } },
+                root: {
+                    base: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        alignItems: 'flex-start',
+                        paddingTop: 'var(--space-2xs)',
+                        paddingBottom: 'var(--space-2xs)',
+                    },
+                    selectors: {
+                        '&[data-placement="end"]': { alignItems: 'flex-end' },
+                    },
+                },
             },
+            css: `
+.zx-chat__root.zx-p-start .zx-chat__bubble {
+    border-bottom-left-radius: 0;
+}
+.zx-chat__root.zx-p-end .zx-chat__bubble {
+    border-bottom-right-radius: 0;
+}
+`,
         },
     },
 };
@@ -7624,6 +7829,59 @@ export const chatLog: RecipeInput = {
             xl: { content: { base: { rowGap: 'var(--space-md)' } }, 'jump-trigger': { base: { '--chat-log-jump-size': 'calc(var(--size-field) * 10)', fontSize: 'var(--text-sm)' } } },
         },
     },
+    // Lynx (signalxjs/lynx#1276). lynx-zero's root is the frame and a native
+    // scroll-view inside Content does the scrolling, so:
+    // - the frame's padding moves onto the content (physical — logical
+    //   spellings do not resolve on Android, signalxjs/lynx#1084), so rows
+    //   scroll to the frame's edge instead of clipping at an inset;
+    // - the content's grid is a flex column (lynx has no grid); a short
+    //   transcript sits at the top — `margin-block-start: auto` has nothing
+    //   to push against inside a scroll-view;
+    // - the jump trigger floats in lynx-zero's absolute dock at the frame's
+    //   foot, so it drops `position: sticky` and the negative margin, and
+    //   restates its inline padding physically;
+    // - `:hover` is dropped on touch: the held trigger shows the hover's
+    //   90% darkening (restated per colour — a colour function over
+    //   `--chat-log-fill` cannot bake), with the existing 1px sink;
+    // - the focus rings as `lynxFocus` (lynx#1163), the frame's drawn inside
+    //   like the web's negative offset.
+    targets: {
+        lynx: {
+            parts: {
+                root: {
+                    base: { padding: '0', overflow: 'hidden' },
+                    states: { 'focus-visible': lynxFocusRing('var(--color-base-content)', { inset: true }) },
+                },
+                content: {
+                    base: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        paddingTop: 'var(--space-sm)',
+                        paddingBottom: 'var(--space-sm)',
+                        paddingLeft: 'var(--space-md)',
+                        paddingRight: 'var(--space-md)',
+                    },
+                },
+                'jump-trigger': {
+                    base: {
+                        position: 'relative',
+                        flexDirection: 'row',
+                        paddingLeft: 'var(--space-md)',
+                        paddingRight: 'var(--space-md)',
+                    },
+                    states: {
+                        pressed: { background: 'color-mix(in oklab, var(--color-primary) 90%, black)' },
+                        ...lynxFocus(),
+                    },
+                },
+            },
+            variants: {
+                color: Object.fromEntries(ROLES.map((c) => [c, { 'jump-trigger': { states: {
+                    pressed: { background: `color-mix(in oklab, var(--color-${c}) 90%, black)` },
+                } } }])),
+            },
+        },
+    },
 };
 
 /** daisy radial-progress: --value became --progress-percent; same ring. */
@@ -7875,6 +8133,41 @@ export const navbar: RecipeInput = {
             xl: { root: { base: { minBlockSize: '6rem', fontSize: 'var(--text-lg)' } } },
         },
     },
+    // Lynx (signalxjs/lynx#1257): `min-block-size` is not a lynx property,
+    // so the bar's height ramp is restated as `min-height`; and a lynx flex
+    // container is only a row when it says so, so the bar and its three
+    // sections spell `flex-direction: row`.
+    //
+    // No section squeezes a word (signalxjs/lynx#1274, zero#499). On the web
+    // `flex: 1 1 0%` is floored by the flex item's automatic minimum (its
+    // min-content width), so "Acme" never breaks. Lynx's flex layout has no
+    // automatic minimum, and its `min-width` takes no intrinsic keyword, so
+    // a zero basis shrank the start below its text and the `<text>` wrapped
+    // per character ("Acm / e"). On lynx the ends start from their content
+    // (`flex-basis: auto`), never shrink, and share the slack equally; the
+    // centre takes daisy's own `flex-shrink: 0`. A bar too narrow for its
+    // content overflows whole, as daisy's does — the btn rule (lynx#1165).
+    // The cost: with a centre and unequal ends, the centre sits off-centre
+    // by half the ends' difference (the web's is exact until a section
+    // reaches its min-content).
+    targets: {
+        lynx: {
+            parts: {
+                root: { base: { flexDirection: 'row', minHeight: '4rem' } },
+                start: { base: { flexDirection: 'row', flexBasis: 'auto', flexShrink: '0' } },
+                center: { base: { flexDirection: 'row', flexShrink: '0' } },
+                end: { base: { flexDirection: 'row', flexBasis: 'auto', flexShrink: '0' } },
+            },
+            variants: {
+                size: {
+                    xs: { root: { base: { minHeight: '2.5rem' } } },
+                    sm: { root: { base: { minHeight: '3rem' } } },
+                    lg: { root: { base: { minHeight: '5rem' } } },
+                    xl: { root: { base: { minHeight: '6rem' } } },
+                },
+            },
+        },
+    },
 };
 
 /**
@@ -7934,6 +8227,14 @@ export const navList: RecipeInput = {
                 alignItems: 'center',
                 gap: 'var(--space-sm)',
                 textDecoration: 'none',
+                // Without an href the link is a <button> (#451): drop its chrome.
+                appearance: 'none',
+                background: 'none',
+                border: '0',
+                font: 'inherit',
+                textAlign: 'start',
+                inlineSize: '100%',
+                cursor: 'pointer',
                 color: 'var(--nav-ink)',
                 padding: 'var(--space-sm) var(--space-lg)',
                 borderRadius: 'var(--radius-field)',
@@ -7981,6 +8282,27 @@ export const navList: RecipeInput = {
             xl: { root: { base: { fontSize: 'var(--text-lg)' } }, link: { base: { padding: 'var(--space-lg) var(--space-xl)' } } },
         },
     },
+    // The web's block and inline boxes, restated for lynx (signalxjs/lynx#1259).
+    // No `:hover` on a touch platform, and the link's anatomy declares no
+    // `pressed` flag: a held link has lynx-zero's main-thread press scale.
+    targets: {
+        lynx: {
+            parts: {
+                // `display: block` has no lynx projection: a column, so the
+                // link spans the list as a block `<li>` makes it.
+                item: { base: { display: 'flex', flexDirection: 'column' } },
+                // The icon / label / meta row, explicit (lynx does not
+                // default the direction the way a browser does).
+                link: { base: { flexDirection: 'row' } },
+                // `inline-size` restated physically; the glyph centred in
+                // its column on both axes.
+                icon: { base: { width: '1.25em', flexDirection: 'row', alignItems: 'center' } },
+                // The count's push to the far edge, restated physically —
+                // `margin-inline-start` does not resolve on Android (#1084).
+                meta: { base: { marginLeft: 'auto', flexDirection: 'row' } },
+            },
+        },
+    },
 };
 
 /**
@@ -8090,6 +8412,37 @@ export const breadcrumbs: RecipeInput = {
             xl: { root: { base: { fontSize: 'var(--text-lg)' } } },
         },
     },
+    // Lynx (signalxjs/lynx#1257):
+    // - The list, the items and the ellipsis are explicit rows (a lynx flex
+    //   container is only a row when it says so).
+    // - The trigger's `hover` ink is dropped on a touch platform; the
+    //   `pressed` flag carries it instead. Its resting ink moves onto a
+    //   lynx-only token so the base rule stays a plain var() read: the
+    //   emitter bakes a `color-mix` declaration per theme under the host
+    //   class, and that baked rule would outrank the pressed one.
+    // - The focus ring is the lynx box-shadow ring (outline has no offset
+    //   and ignores the radius there).
+    // - The link's `hover` stays dropped: the link anatomy declares no
+    //   pressed flag, so there is nothing on lynx to carry it.
+    // - The separator is a real part on both targets (lynx-zero renders it
+    //   as a text glyph), so daisy's `::before` chevron needs no lynx form.
+    targets: {
+        lynx: {
+            tokens: { '--bc-trigger-ink': 'color-mix(in oklch, var(--color-base-content) 75%, transparent)' },
+            parts: {
+                list: { base: { flexDirection: 'row' } },
+                item: { base: { flexDirection: 'row' } },
+                ellipsis: { base: { flexDirection: 'row' } },
+                'ellipsis-trigger': {
+                    base: { color: 'var(--bc-trigger-ink)' },
+                    states: {
+                        pressed: { color: 'var(--color-base-content)' },
+                        'focus-visible': lynxFocusRing('var(--color-primary)'),
+                    },
+                },
+            },
+        },
+    },
 };
 
 /**
@@ -8128,6 +8481,19 @@ const pageTrigger: PartStyles = {
     },
 };
 
+/** A pagination cell's box on lynx — see the recipe's lynx section. */
+const pageCellLynx: NonNullable<PartStyles['base']> = {
+    minWidth: 'var(--pg-size)',
+    height: 'var(--pg-size)',
+    flexShrink: '0',
+};
+
+/** The four triggers on lynx: the cell box, the held wash + sink, the ring. */
+const pageTriggerLynx: PartStyles = {
+    base: pageCellLynx,
+    states: { pressed: { background: 'var(--color-base-300)' }, ...lynxFocus() },
+};
+
 /**
  * Pagination — daisy's join-of-buttons made of standalone btn cells: the
  * quiet base-200 fill, base-300 hover, the current page inverted into the
@@ -8224,13 +8590,35 @@ 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.
+    // Lynx (signalxjs/lynx#1258):
+    // - the cells' size, restated physically: `min-inline-size` and
+    //   `block-size` do not resolve on lynx (lynx#1145), so every cell
+    //   collapsed to its glyph. Read through `--pg-size`, so the compile
+    //   inlines the size steps per part, as it does the web's;
+    // - the item's inline padding, physical: logical spellings resolve on
+    //   iOS but not on Android (measured, lynx#1084);
+    // - the press: the web answers a pointer with `:hover`, which a touch
+    //   platform drops, so the held cell paints daisy's hover wash with the
+    //   1px sink (`lynxBtnPressed`'s pair) — the current page keeps its
+    //   accent fill and only sinks;
+    // - the focus ring as `lynxFocus`: lynx's outline has no offset and
+    //   ignores the radius (lynx#1163);
+    // - no row shrink: a cell never squeezes below its size in a narrow row.
+    // The glyphs' rtl flip has no replacement: lynx has no RTL flow.
     targets: {
         lynx: {
             parts: {
-                item: { base: { paddingLeft: 'var(--space-2xs)', paddingRight: 'var(--space-2xs)' } },
+                root: { base: { flexDirection: 'row' } },
+                item: {
+                    base: { ...pageCellLynx, paddingLeft: 'var(--space-2xs)', paddingRight: 'var(--space-2xs)' },
+                    states: lynxFocus(),
+                    selectors: { '&[data-pressed][data-state="inactive"]': { background: 'var(--color-base-300)' } },
+                },
+                ellipsis: { base: pageCellLynx },
+                'first-trigger': pageTriggerLynx,
+                'prev-trigger': pageTriggerLynx,
+                'next-trigger': pageTriggerLynx,
+                'last-trigger': pageTriggerLynx,
             },
         },
     },
@@ -8250,6 +8638,12 @@ 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))`;
 
+/**
+ * The complete disc's fill: 20% of the accent over base-100, in OKLAB (see
+ * the indicator's `complete` state for why not OKLCH).
+ */
+const stepTint = (accent: string): string => `color-mix(in oklab, ${accent} 20%, var(--color-base-100))`;
+
 /** A Steps root holding wizard parts (#296) — the panel or the triggers. */
 const STEPS_WIZARD = '&:has(> [data-scope="steps"]:is([data-part="content"], [data-part="prev-trigger"], [data-part="next-trigger"]))';
 
@@ -8367,7 +8761,7 @@ export const steps: RecipeInput = {
                 // (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)' },
+                complete: { background: stepTint('var(--steps-accent)'), color: 'var(--steps-complete-ink)' },
                 inactive: { background: 'var(--color-base-200)', color: 'var(--color-base-content)' },
                 invalid: { background: 'var(--color-error)', color: 'var(--color-error-content)' },
             },
@@ -8455,32 +8849,82 @@ 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.
+    // Lynx. Physical spellings throughout: logical insets, margins and
+    // paddings resolve on iOS but not on Android (measured,
+    // signalxjs/lynx#1084), and `inline-size` / `block-size` do not resolve
+    // at all (lynx#1145) — without the restatement the discs and lines did
+    // not paint. Also (signalxjs/lynx#1258):
+    // - the complete disc's tint and ink read `--steps-accent` through a
+    //   colour function, which cannot bake; the base pair is restated over
+    //   primary, and each colour already restates the ink on its item, so
+    //   the tint joins it there;
+    // - the bridge runs from this disc's edge to the next disc's edge —
+    //   `50% + ind/2` for `100% - ind` — instead of centre to centre under
+    //   the disc, so it needs no z-index across sibling items; the item
+    //   stops clipping (a lynx view's `overflow` defaults to hidden) so the
+    //   bridge can reach past its box;
+    // - the `:has()` wizard wrap becomes the `wizard` stamp lynx-zero puts on
+    //   the root while a panel or trigger is mounted (raw css below);
+    // - the focus ring as `lynxFocus` (lynx#1163), and Back/Next's press as
+    //   daisy's hover wash + sink (`lynxBtnPressed`), `:hover` being dropped.
     targets: {
         lynx: {
+            tokens: {
+                '--steps-complete-ink': stepInk('var(--color-primary)', 'primary'),
+                '--steps-complete-tint': stepTint('var(--color-primary)'),
+            },
             parts: {
+                root: { base: { flexDirection: 'row', overflow: 'visible' } },
                 item: {
+                    base: { overflow: 'visible' },
+                    states: lynxFocus(),
                     selectors: {
                         '&[data-orientation="vertical"]': { paddingBottom: 'var(--space-lg)' },
                     },
                 },
+                indicator: {
+                    base: { width: 'var(--steps-ind)', height: 'var(--steps-ind)' },
+                    states: { complete: { background: 'var(--steps-complete-tint)' } },
+                },
                 separator: {
                     selectors: {
                         '&[data-orientation="horizontal"]': {
-                            top: 'calc(var(--space-xs) + var(--steps-ind) / 2)',
-                            left: '50%',
+                            top: 'calc(var(--space-xs) + (var(--steps-ind) - var(--border)) / 2)',
+                            left: 'calc(50% + var(--steps-ind) / 2)',
+                            width: 'calc(100% - var(--steps-ind))',
+                            height: 'var(--border)',
                         },
                         '&[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)',
+                            width: 'var(--border)',
                         },
                     },
                 },
+                'prev-trigger': {
+                    base: { ...lynxBtnPad(4), ...lynxBtnFit },
+                    states: { pressed: lynxBtnPressed, ...lynxFocus() },
+                },
+                'next-trigger': {
+                    base: { ...lynxBtnPad(4), ...lynxBtnFit, marginLeft: 'auto' },
+                    states: { pressed: lynxBtnPressed, ...lynxFocus() },
+                },
             },
+            variants: {
+                color: Object.fromEntries(ROLES.map((c) => [c, { item: { base: {
+                    '--steps-complete-tint': stepTint(`var(--color-${c})`),
+                } } }])),
+            },
+            // lynx-zero stamps `wizard` on the root while a Content,
+            // PrevTrigger or NextTrigger is mounted — the web's `:has()`.
+            // A lynx-zero rendering detail, not a modifier an author sets.
+            css: `
+.zx-steps__root.zx-m-wizard {
+    flex-wrap: wrap;
+    row-gap: var(--space-md);
+}
+`,
         },
     },
 };
@@ -8662,11 +9106,68 @@ export const drawer: RecipeInput = {
                 },
             },
         },
-        // The btn paddings, restated physically — see `lynxBtnPad` (#1084).
+        // The btn paddings, restated physically — see `lynxBtnPad` (#1084) —
+        // and the btns' press rendering (`lynxBtnPressed`), as dialog wears
+        // them. The edge sheet (signalxjs/lynx#1277): lynx-zero lays the
+        // panel on its edge with flexbox inside the backdrop, so the sheet
+        // stays in flow (`position: relative`, never `fixed`) and sizes to
+        // it — no viewport units, which lynx does not resolve against the
+        // overlay outlet. The skin keeps the cap, the corners and the slide.
         lynx: {
+            keyframes: {
+                // `translate` is Android-asymmetric (#1084): the travel is a
+                // transform function, one per edge.
+                'zero-daisy-drawer-in-start': 'from { transform: translateX(-100%); } to { transform: translateX(0); }',
+                'zero-daisy-drawer-in-end': 'from { transform: translateX(100%); } to { transform: translateX(0); }',
+                'zero-daisy-drawer-in-top': 'from { transform: translateY(-100%); } to { transform: translateY(0); }',
+                'zero-daisy-drawer-in-bottom': 'from { transform: translateY(100%); } to { transform: translateY(0); }',
+            },
             parts: {
-                trigger: { base: lynxBtnPad(4) },
-                close: { base: lynxBtnPad(4) },
+                trigger: { base: { ...lynxBtnPad(4), ...lynxBtnFit }, states: { pressed: lynxBtnPressed, ...lynxFocus() } },
+                close: { base: { ...lynxBtnPad(4), ...lynxBtnFit }, states: { pressed: lynxBtnPressed, ...lynxFocus() } },
+                panel: {
+                    // The cap alone: `min(20rem, 85vw)` has no lynx spelling
+                    // (no min()); lynx-zero states the 85% share inline and
+                    // this caps it — together, the web's width.
+                    base: { '--l-measure': '20rem' },
+                    selectors: {
+                        '&[data-l-dock="sheet"]': {
+                            position: 'relative',
+                            blockSize: 'auto',
+                            maxBlockSize: 'none',
+                        },
+                        // The block edges run full width (the web's `:where()`
+                        // pair, one selector each — no `:where()` on lynx),
+                        // content-sized up to 85% of the outlet.
+                        '&[data-placement="top"]': { '--l-measure': 'none' },
+                        '&[data-placement="bottom"]': { '--l-measure': 'none' },
+                        '&[data-placement="top"][data-l-dock="sheet"]': {
+                            maxBlockSize: '85%',
+                            borderBottomLeftRadius: 'var(--radius-box)',
+                            borderBottomRightRadius: 'var(--radius-box)',
+                        },
+                        '&[data-placement="bottom"][data-l-dock="sheet"]': {
+                            maxBlockSize: '85%',
+                            borderTopLeftRadius: 'var(--radius-box)',
+                            borderTopRightRadius: 'var(--radius-box)',
+                        },
+                        // The slide in from the edge (the web's `translate`
+                        // over `@starting-style`, both dropped here). The
+                        // exit is an unmount on lynx, so only the entry runs.
+                        '&[data-placement="start"][data-l-dock="sheet"][data-state="open"]': {
+                            animation: 'zero-daisy-drawer-in-start var(--duration-slow) var(--ease-standard)',
+                        },
+                        '&[data-placement="end"][data-l-dock="sheet"][data-state="open"]': {
+                            animation: 'zero-daisy-drawer-in-end var(--duration-slow) var(--ease-standard)',
+                        },
+                        '&[data-placement="top"][data-l-dock="sheet"][data-state="open"]': {
+                            animation: 'zero-daisy-drawer-in-top var(--duration-slow) var(--ease-standard)',
+                        },
+                        '&[data-placement="bottom"][data-l-dock="sheet"][data-state="open"]': {
+                            animation: 'zero-daisy-drawer-in-bottom var(--duration-slow) var(--ease-standard)',
+                        },
+                    },
+                },
             },
             variants: { size: lynxBtnSizes('trigger') },
         },
@@ -8866,6 +9367,89 @@ export const table: RecipeInput = {
             },
         },
     },
+    // signalxjs/lynx#1279. Lynx has no table layout: lynx-zero lays the
+    // parts out as flex rows itself. The `hover` modifier has no lynx
+    // answer (a touch screen has no hover), nor has the viewport-width
+    // `@media` of the stacked mode — lynx-zero resolves `stack` in JS and
+    // stamps the parts instead (see `css` below).
+    targets: {
+        lynx: {
+            parts: {
+                // The web's `overflow-x: auto` box: a lynx view clips its
+                // rounded frame; a table of fixed columns scrolls in a
+                // scroll-view lynx-zero renders.
+                root: {
+                    base: { overflow: 'hidden' },
+                    // daisy's ring drawn inside the box, as on the web
+                    // (outline-offset: -2px) — spelled as an inset shadow.
+                    states: { 'focus-visible': lynxFocusRing('var(--color-base-content)', { inset: true }) },
+                },
+                // The muted header ink: the colour function over
+                // `--table-accent` cannot bake (a recipe-local property),
+                // so the default accent's mix is restated here and each
+                // colour's below.
+                'header-cell': { base: { color: 'color-mix(in oklab, var(--color-base-content) 60%, transparent)' } },
+                'cell-label': { base: { color: 'color-mix(in oklab, var(--color-base-content) 60%, transparent)' } },
+                // The web's hover ink, while held; the lynx ring.
+                'sort-trigger': {
+                    base: { flexDirection: 'row' },
+                    states: { pressed: { color: 'var(--table-accent)' }, ...lynxFocus() },
+                },
+            },
+            variants: {
+                color: Object.fromEntries(ROLES.map((c) => {
+                    const muted = `color-mix(in oklab, ${roleInk(c)} 60%, transparent)`;
+                    return [c, {
+                        'header-cell': { base: { color: muted } },
+                        'cell-label': { base: { color: muted } },
+                    }];
+                })),
+            },
+            // lynx-zero rendering details, not modifiers an author sets:
+            // - `stripe`: lynx has no `:nth-child`, so the body stamps its
+            //   even, unselected rows (mount order) under `zebra`.
+            // - `held`: the unsorted mark the web reveals under a hovered or
+            //   keyboard-focused trigger, shown while the trigger is held.
+            // - `stacked`: the stacked mode's card chrome (the web's
+            //   below-breakpoint rules). Zero widths and paddings keep a
+            //   var() so they beat the var-bearing base values (lynx expands
+            //   var() declarations after the cascade, signalxjs/lynx#1161);
+            //   the root keeps its base-100 fill (a var-free transparent
+            //   would lose the same way).
+            css: `
+.zx-table__root.zx-m-stacked {
+    border-width: calc(var(--border) * 0);
+    border-radius: calc(var(--radius-box) * 0);
+}
+.zx-table__caption.zx-m-stacked {
+    padding-left: calc(var(--table-pad-inline) * 0);
+    padding-right: calc(var(--table-pad-inline) * 0);
+}
+.zx-table__row.zx-m-stacked {
+    border: var(--border) solid var(--color-base-200);
+    border-radius: var(--radius-box);
+    background: var(--color-base-100);
+    padding: var(--space-sm) var(--table-pad-inline);
+    margin-bottom: var(--space-md);
+}
+.zx-table__row.zx-m-stacked.zx-f-selected {
+    background: var(--color-base-300);
+}
+.zx-table__cell.zx-m-stacked {
+    padding-left: calc(var(--table-pad-inline) * 0);
+    padding-right: calc(var(--table-pad-inline) * 0);
+    padding-top: var(--space-xs);
+    padding-bottom: var(--space-xs);
+}
+.zx-table__row.zx-m-stripe {
+    background: var(--color-base-200);
+}
+.zx-table__sort-indicator.zx-m-held.zx-s-none {
+    opacity: 0.6;
+}
+`,
+        },
+    },
 };
 
 /**
@@ -9032,6 +9616,65 @@ export const fileUpload: RecipeInput = {
             xl: { root: { base: { '--fu-pad': 'calc(var(--space-xl) * 1.25)', '--fu-font': 'var(--text-md)' } } },
         },
     },
+    // Lynx (signalxjs/lynx#1276):
+    // - lynx has no grid: the root and the item list are flex columns, and
+    //   the stretched parts (dropzone, item list) say so with `align-self`;
+    //   the rows (trigger, item) state `flex-direction: row`;
+    // - the dropzone centres its words in a column (lynx text alignment is
+    //   the text's own), and its highlighted wash — a colour function over
+    //   `--fu-accent`, which cannot bake — is restated per colour over the
+    //   role. lynx never drives `highlighted` (no drag source); it shows
+    //   through `ForceStates` in the gallery;
+    // - `:hover` is dropped on touch: the held trigger shows daisy's
+    //   base-300 wash + 1px sink (`lynxBtnPressed`, in place of the
+    //   standalone `translate`, which Android does not resolve), and the
+    //   held × and clear show the ghost's base-200 wash;
+    // - the focus rings as `lynxFocus` (lynx#1163).
+    targets: {
+        lynx: {
+            parts: {
+                root: { base: { display: 'flex', flexDirection: 'column', alignItems: 'flex-start' } },
+                trigger: {
+                    base: { flexDirection: 'row' },
+                    states: { pressed: lynxBtnPressed, ...lynxFocus() },
+                },
+                dropzone: {
+                    base: { alignSelf: 'stretch', display: 'flex', flexDirection: 'column', alignItems: 'center' },
+                    states: {
+                        highlighted: { background: 'color-mix(in oklab, var(--color-primary) 8%, var(--color-base-100))' },
+                    },
+                },
+                'item-group': {
+                    base: { alignSelf: 'stretch', display: 'flex', flexDirection: 'column' },
+                },
+                item: { base: { flexDirection: 'row' } },
+                'item-remove': {
+                    states: { pressed: { background: 'var(--color-base-200)' }, ...lynxFocus() },
+                },
+                'clear-trigger': {
+                    states: { pressed: { background: 'var(--color-base-200)' }, ...lynxFocus() },
+                },
+            },
+            variants: {
+                color: Object.fromEntries(ROLES.map((c) => [c, { dropzone: { states: {
+                    highlighted: { background: `color-mix(in oklab, var(--color-${c}) 8%, var(--color-base-100))` },
+                } } }])),
+            },
+        },
+    },
+};
+
+/** A carousel nav circle on lynx: the glyph centred as flex (no `grid`). */
+const carouselTriggerLynx: CssProps = {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+};
+
+/** A held carousel nav circle on lynx: daisy's hover wash plus the 1px sink, and the lynx ring. */
+const carouselTriggerLynxStates: Record<string, CssProps> = {
+    pressed: { background: 'var(--color-base-300)', transform: 'translateY(1px)' },
+    ...lynxFocus(),
 };
 
 /**
@@ -9184,14 +9827,60 @@ export const carousel: RecipeInput = {
     // 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.
+    //
+    // signalxjs/lynx#1279 — the rest of the lynx shape:
+    // - `grid` does not lay out on lynx: the root is a flex column, and a
+    //   trigger centres its glyph as flex.
+    // - The dot: the web draws it on `::before` inside a
+    //   `max(dot, 1.5rem)` button; lynx has neither pseudo-elements nor
+    //   `max()`, so lynx-zero renders the dot AS the indicator (its touch
+    //   area widened with `hit-slop`) and the ring and the active fill ride
+    //   the part.
+    // - The web sinks a held trigger with the standalone `translate`,
+    //   which Android ignores (#1084): a transform function here, over
+    //   daisy's hover wash (no hover on touch).
+    // - Rings: lynx's outline ignores radius and has no offset (#1163).
+    // No replacement for the viewport's `:focus-visible` ring: there is no
+    // keyboard focus on lynx, and the part declares no flag to key it on.
     targets: {
         lynx: {
             parts: {
+                root: { base: { display: 'flex', flexDirection: 'column' } },
                 'prev-trigger': {
-                    base: { top: 'calc(50% - var(--carousel-nav) / 2)', left: 'var(--space-sm)' },
+                    base: {
+                        top: 'calc(50% - var(--carousel-nav) / 2)',
+                        left: 'var(--space-sm)',
+                        ...carouselTriggerLynx,
+                    },
+                    states: carouselTriggerLynxStates,
                 },
                 'next-trigger': {
-                    base: { top: 'calc(50% - var(--carousel-nav) / 2)', right: 'var(--space-sm)' },
+                    base: {
+                        top: 'calc(50% - var(--carousel-nav) / 2)',
+                        right: 'var(--space-sm)',
+                        ...carouselTriggerLynx,
+                    },
+                    states: carouselTriggerLynxStates,
+                },
+                'indicator-group': { base: { flexDirection: 'row', alignItems: 'center' } },
+                indicator: {
+                    base: {
+                        display: 'flex',
+                        width: 'var(--carousel-dot)',
+                        height: 'var(--carousel-dot)',
+                        flexShrink: '0',
+                        // Longhands: the ring's colour bakes per theme only
+                        // on its own (a shorthand mixing it with the
+                        // --border calc cannot).
+                        borderWidth: 'calc(var(--border) * 2)',
+                        borderStyle: 'solid',
+                        borderColor: 'color-mix(in oklab, var(--color-base-content) 70%, transparent)',
+                        borderRadius: '9999px',
+                    },
+                    states: {
+                        active: { background: 'var(--carousel-accent)', borderColor: 'var(--carousel-accent)' },
+                        ...lynxFocus(),
+                    },
                 },
             },
         },