@sigx/zero-daisyui 0.13.0 → 0.15.0

package/src/recipes.ts

@@ -1625,12 +1625,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)' } },
             },
@@ -3773,6 +3795,80 @@ export const avatar: RecipeInput = {
             xl: { root: { base: { '--avatar-size': 'calc(var(--size-selector) * 16)', '--avatar-text': 'var(--text-lg)' } } },
         },
     },
+    // signalxjs/lynx#1237 — the lynx layout for what the web gets from grid.
+    targets: {
+        lynx: {
+            parts: {
+                // No grid on lynx (signalxjs/lynx#1075): the web stacks the
+                // image and the fallback in one grid cell. Here the root is a
+                // flex box that does not shrink in a row, and both faces are
+                // laid over it absolutely — the fallback, later in the tree,
+                // paints over a pending image exactly as the grid's second
+                // item does. lynx-zero renders neither face while its state
+                // hides it (`hiddenIn`), so the web's `&:not([hidden])`
+                // display rule has nothing to replace.
+                root: {
+                    base: {
+                        display: 'flex',
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        flexShrink: '0',
+                    },
+                },
+                // Each face also rounds itself to the root's shape (below),
+                // rather than trusting the root's clip to round an image on
+                // both engines.
+                image: {
+                    base: { position: 'absolute', top: '0', left: '0', borderRadius: '9999px' },
+                },
+                fallback: {
+                    base: {
+                        position: 'absolute',
+                        top: '0',
+                        left: '0',
+                        borderRadius: '9999px',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        textAlign: 'center',
+                    },
+                },
+            },
+            variants: {
+                shape: Object.fromEntries(([
+                    ['circle', '9999px'], ['square', '0'], ['rounded', 'var(--radius-selector)'],
+                ] as const).map(([shape, radius]) => [shape, {
+                    image: { base: { borderRadius: radius } },
+                    fallback: { base: { borderRadius: radius } },
+                }])),
+            },
+            // Every avatar after the first in an AvatarGroup overlaps its
+            // neighbour by a quarter of its own box — the web's
+            // `avatar-group` compose, `&:not(:first-child)`. Lynx has neither
+            // the nested-scope compose nor `:first-child`, so lynx-zero stamps
+            // those avatars `stacked` itself (`zx-m-stacked`, in mount order).
+            // A lynx-zero rendering detail, not a modifier an author sets, so
+            // it is styled from raw lynx css, one rule per avatar size.
+            css: `
+.zx-avatar__root.zx-m-stacked {
+    margin-left: calc(var(--size-selector) * -2.5);
+}
+.zx-avatar__root.zx-m-stacked.zx-a-size-xs {
+    margin-left: calc(var(--size-selector) * -1.5);
+}
+.zx-avatar__root.zx-m-stacked.zx-a-size-sm {
+    margin-left: calc(var(--size-selector) * -2);
+}
+.zx-avatar__root.zx-m-stacked.zx-a-size-lg {
+    margin-left: calc(var(--size-selector) * -3);
+}
+.zx-avatar__root.zx-m-stacked.zx-a-size-xl {
+    margin-left: calc(var(--size-selector) * -4);
+}
+`,
+        },
+    },
 };
 
 /**
@@ -3867,6 +3963,33 @@ export const avatarGroup: RecipeInput = {
             md: {},
         },
     },
+    // signalxjs/lynx#1237. The avatars inside take the group's size and
+    // colour from lynx-zero (the `composes` above has no class form on this
+    // target), and their overlap is the avatar recipe's `stacked` rule.
+    targets: {
+        lynx: {
+            parts: {
+                // A row that sizes to its faces (a lynx view stretches to its
+                // column otherwise).
+                root: { base: { display: 'flex', flexDirection: 'row', width: 'max-content' } },
+                // `inline-grid` centring as flex, and the logical inline
+                // padding and overlap as physical spellings — logical
+                // margins and paddings resolve on iOS but not on Android
+                // (signalxjs/lynx#1084); lynx has no RTL flow, so start IS left.
+                overflow: {
+                    base: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        flexShrink: '0',
+                        paddingLeft: 'var(--space-2xs)',
+                        paddingRight: 'var(--space-2xs)',
+                        marginLeft: 'calc(var(--avatar-group-size) * -0.25)',
+                    },
+                },
+            },
+        },
+    },
 };
 
 /**
@@ -4163,7 +4286,99 @@ export const toast: RecipeInput = {
                     base: { position: 'absolute', top: 'var(--space-xs)', right: 'var(--space-xs)' },
                     states: lynxFocus({ gap: 'var(--toast-bg)' }),
                 },
+                // The promise toast's mark (signalxjs/lynx#1196). No grid and
+                // no `:has()`: the mark is laid over the card's leading
+                // padding, at the root's own padding offsets (per size,
+                // below), and lynx-zero stamps `marked` on every part of a
+                // toast that shows it, so the text steps aside (the raw css
+                // below) — the web's leading grid column.
+                indicator: {
+                    base: {
+                        position: 'absolute',
+                        left: 'var(--space-lg)',
+                        top: 'var(--space-md)',
+                        width: 'var(--toast-mark)',
+                        height: 'var(--toast-mark)',
+                    },
+                    states: {
+                        // daisy's ring in the toast's ink. The track is the
+                        // ink at 25%, which cannot bake over the recipe-local
+                        // `--toast-ink`: the neutral toast's track mixes the
+                        // theme's base-content, and each colour's twin (the
+                        // variants below) its role. Longhands, and the head as
+                        // `border-top-color`: logical spellings are not lynx's
+                        // (signalxjs/lynx#1084), and a var-bearing shorthand
+                        // would repaint the head after the cascade (#1161).
+                        loading: {
+                            // The shared shorthand is dropped on lynx (its
+                            // track cannot bake); a static one here keeps it
+                            // that way should the shared value ever bake.
+                            border: '0 solid transparent',
+                            borderStyle: 'solid',
+                            ...lynxSides('border{}Width', 'calc(var(--border) * 2)'),
+                            ...lynxSides('border{}Color', 'color-mix(in oklab, var(--color-base-content) 25%, transparent)', ['Right', 'Bottom', 'Left']),
+                            borderTopColor: 'var(--toast-ink)',
+                        },
+                        // The tick without clip-path, which lynx does not apply
+                        // (signalxjs/lynx#1216): the checkbox's two-border
+                        // check — a box 3/8 of the mark wide and 3/4 tall with
+                        // its right and bottom borders drawn, turned 45° —
+                        // pulled to the middle of the mark's slot by its
+                        // margins. The fill the web cuts the tick from is
+                        // cleared.
+                        complete: {
+                            background: 'transparent',
+                            boxSizing: 'border-box',
+                            width: 'calc(var(--toast-mark) * 0.375)',
+                            height: 'calc(var(--toast-mark) * 0.75)',
+                            marginLeft: 'calc(var(--toast-mark) * 0.3125)',
+                            borderStyle: 'solid',
+                            borderColor: TOAST_SUCCESS_INK,
+                            borderTopWidth: '0',
+                            borderLeftWidth: '0',
+                            borderRightWidth: 'calc(var(--border) * 2)',
+                            borderBottomWidth: 'calc(var(--border) * 2)',
+                            transform: 'rotate(45deg)',
+                        },
+                        // The cross without clip-path: its two diagonal bars
+                        // as hard-stop gradients over a clear fill.
+                        error: {
+                            background: `linear-gradient(45deg, transparent 41%, ${TOAST_ERROR_INK} 41%, ${TOAST_ERROR_INK} 59%, transparent 59%), `
+                                + `linear-gradient(-45deg, transparent 41%, ${TOAST_ERROR_INK} 41%, ${TOAST_ERROR_INK} 59%, transparent 59%)`,
+                        },
+                    },
+                },
             },
+            variants: {
+                // Each colour's ring track: its role at 25% (the web's mix
+                // over `--toast-ink`, which is that role).
+                color: Object.fromEntries(ROLES.map((role) => [role, {
+                    indicator: {
+                        states: {
+                            loading: lynxSides('border{}Color', `color-mix(in oklab, var(--color-${role}) 25%, transparent)`, ['Right', 'Bottom', 'Left']),
+                        },
+                    },
+                }])),
+                // The mark sits at the root's padding offsets for its size.
+                size: {
+                    xs: { indicator: { base: { left: 'var(--space-md)', top: 'var(--space-xs)' } } },
+                    sm: { indicator: { base: { left: 'var(--space-md)', top: 'var(--space-sm)' } } },
+                    lg: { indicator: { base: { left: 'var(--space-xl)', top: 'var(--space-lg)' } } },
+                    xl: { indicator: { base: { left: 'var(--space-2xl)', top: 'var(--space-xl)' } } },
+                },
+            },
+            // The text of a marked toast steps past the mark and the web's
+            // column gap. `marked` is a lynx-zero rendering detail (the
+            // spelling of `:has(> indicator)`), not a modifier an author sets,
+            // so it is styled from raw lynx css. The reduced-motion and
+            // forced-colors stops cannot follow: lynx emits no `@media`.
+            css: `
+.zx-toast__title.zx-m-marked,
+.zx-toast__description.zx-m-marked,
+.zx-toast__action.zx-m-marked {
+    margin-left: calc(var(--toast-mark) + var(--space-md));
+}
+`,
         },
     },
     // The viewport's `open` (the stack expanded) is a fact this skin has no
@@ -4259,7 +4474,8 @@ export const combobox: RecipeInput = {
                 fontWeight: 'var(--weight-medium)',
                 lineHeight: 'var(--leading-none)',
             },
-            states: { disabled: {} },
+            // Arrowed onto from the input (#411).
+            states: { disabled: {}, ...focusRing },
         },
         'tag-label': { base: { whiteSpace: 'nowrap' } },
         'tag-remove': {
@@ -5180,6 +5396,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
@@ -5330,12 +5570,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)' } },
             },
         },
@@ -5439,6 +5704,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,
@@ -5638,11 +5907,18 @@ export const textarea: RecipeInput = {
     // lands on top of the 2px gap and paints one solid band. A fixed-height
     // box never re-lays out; this auto-height one does, as its native field
     // measures and grows. So the ring is spelled with one outset shadow and
-    // one inset shadow, which paint disjoint areas and cannot swap: the ring
+    // inset shadows, which paint areas the outset never reaches: the ring
     // just outside the box, the box's own border repainted as the base-100
-    // gap, and the hairline redrawn inside it by the inset spread, in the
+    // gap, and the hairline redrawn inside it by the edge inset's spread, in the
     // edge colour (`--textarea-edge`, the error colour while invalid). The
     // gap is the border's width instead of the web's 2px.
+    //
+    // Android paints inset shadows OVER the border, where iOS paints them
+    // under it (signalxjs/lynx#1230): the base-100 border vanished and the
+    // whole 2px inset showed as a grey band against the ring. So the gap is
+    // also drawn as a 1px base-100 inset stacked above the edge inset. On
+    // Android that inset is the gap. On iOS the border already covers it,
+    // whichever order the layers end up in, so iOS paints as before.
     targets: {
         lynx: {
             parts: {
@@ -5659,6 +5935,9 @@ export const textarea: RecipeInput = {
                             outline: 'none',
                             borderColor: 'var(--color-base-100)',
                             boxShadow: '0 0 0 2px var(--textarea-accent), '
+                                // The gap: the border's width in base-100,
+                                // for Android, which paints this over the border.
+                                + 'inset 0 0 0 1px var(--color-base-100), '
                                 // Twice the border (1px in every shipped
                                 // theme): the inner half shows as the hairline.
                                 + 'inset 0 0 0 2px var(--textarea-edge)',
@@ -5785,6 +6064,42 @@ export const card: RecipeInput = {
             xl: { root: { base: { '--card-pad': 'var(--space-2xl)' } } },
         },
     },
+    targets: {
+        lynx: {
+            parts: {
+                // The root does not clip on lynx: a clipping layer takes its
+                // own shadow with it on iOS, and the card's elevation is the
+                // daisy look. The media band rounds its own corners instead
+                // (below), which is all the clip was for.
+                root: { base: { overflow: 'visible' } },
+                // `inline-size` has no lynx spelling; the image selector and
+                // the `:first-child` / `:last-child` corners are dropped (no
+                // child or structural pseudo-classes). The band clips its
+                // own content, so an `<image>` inside it takes the corners.
+                media: { base: { width: '100%', overflow: 'hidden' } },
+                // A lynx view is a column unless told otherwise.
+                footer: { base: { flexDirection: 'row' } },
+            },
+            // The corners the media band shares with the card
+            // (signalxjs/lynx#1235). Lynx has no `:first-child` or
+            // `:last-child`, so lynx-zero stamps the band itself from its
+            // mount order among the card's bands, as `data-mod-first` /
+            // `data-mod-last` (the `zx-m-first` / `zx-m-last` classes). They
+            // are a lynx-zero rendering detail, not modifiers an author sets,
+            // so they are not declared in the vocabulary and are styled from
+            // raw lynx css (toggle-group's join ends are the precedent).
+            css: `
+.zx-card__media.zx-m-first {
+    border-top-left-radius: var(--radius-box);
+    border-top-right-radius: var(--radius-box);
+}
+.zx-card__media.zx-m-last {
+    border-bottom-left-radius: var(--radius-box);
+    border-bottom-right-radius: var(--radius-box);
+}
+`,
+        },
+    },
 };
 
 /**
@@ -5876,6 +6191,100 @@ export const alert: RecipeInput = {
             xl: { root: { base: { padding: 'var(--space-xl) var(--space-2xl)' } } },
         },
     },
+    targets: {
+        // No grid on lynx (signalxjs/lynx#1075, #1235): the web's three
+        // columns (the icon over both rows | the title over the description
+        // | the close button) are rebuilt as a flex column with the icon and
+        // the close button placed absolutely — the toast's close pin is the
+        // precedent. The padding moves onto two properties so the icon and
+        // the close button can follow it per size.
+        lynx: {
+            tokens: {
+                '--alert-pad-y': 'var(--space-md)',
+                '--alert-pad-x': 'var(--space-lg)',
+            },
+            parts: {
+                root: {
+                    base: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        alignItems: 'stretch',
+                        gap: 'var(--space-sm)',
+                        position: 'relative',
+                        boxSizing: 'border-box',
+                        padding: 'var(--alert-pad-y) var(--alert-pad-x)',
+                    },
+                },
+                // The icon column: a --text-xl slot at the padding edge,
+                // centred over the alert's height (the web's two-row span).
+                icon: {
+                    base: {
+                        position: 'absolute',
+                        left: 'var(--alert-pad-x)',
+                        top: '0',
+                        bottom: '0',
+                        width: 'var(--text-xl)',
+                        display: 'flex',
+                        justifyContent: 'center',
+                    },
+                },
+                // Pinned top-right, its glyph on the padding edge. `inherit`
+                // 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',
+                        top: 'calc(var(--alert-pad-y) - var(--space-2xs))',
+                        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)' }),
+                },
+            },
+            variants: {
+                size: {
+                    xs: { root: { base: { '--alert-pad-y': 'var(--space-2xs)', '--alert-pad-x': 'var(--space-sm)' } } },
+                    sm: { root: { base: { '--alert-pad-y': 'var(--space-xs)', '--alert-pad-x': 'var(--space-md)' } } },
+                    lg: { root: { base: { '--alert-pad-y': 'var(--space-lg)', '--alert-pad-x': 'var(--space-xl)' } } },
+                    xl: { root: { base: { '--alert-pad-y': 'var(--space-xl)', '--alert-pad-x': 'var(--space-2xl)' } } },
+                },
+            },
+            // The title and description keep clear of the icon column and
+            // the close button's corner. Lynx has no `:has()`, so lynx-zero
+            // stamps what the alert renders onto both text parts, as
+            // `data-mod-with-icon` / `data-mod-with-close` (the
+            // `zx-m-with-icon` / `zx-m-with-close` classes) — a lynx-zero
+            // rendering detail like toggle-group's join ends, styled from raw
+            // lynx css.
+            css: `
+.zx-alert__title.zx-m-with-icon {
+    margin-left: calc(var(--text-xl) + var(--space-md));
+}
+.zx-alert__description.zx-m-with-icon {
+    margin-left: calc(var(--text-xl) + var(--space-md));
+}
+.zx-alert__title.zx-m-with-close {
+    margin-right: calc(var(--text-md) + var(--space-md));
+}
+.zx-alert__description.zx-m-with-close {
+    margin-right: calc(var(--text-md) + var(--space-md));
+}
+`,
+        },
+    },
 };
 
 /**
@@ -5958,6 +6367,25 @@ export const emptyState: RecipeInput = {
             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)' } } },
         },
     },
+    // signalxjs/lynx#1236 — the lynx replacements for what the shared
+    // sections cannot say there.
+    targets: {
+        lynx: {
+            parts: {
+                // Physical margins: Android resolves no logical margin
+                // (signalxjs/lynx#1084).
+                icon: { base: { marginBottom: 'var(--space-xs)' } },
+                // Title and description are lynx `<text>`: a view's
+                // `text-align` and `color` do not reach one unless the app
+                // turned CSS inheritance on, so each states its own ink and
+                // centring. The web's 36ch measure becomes the root's width:
+                // `ch` is unmeasured on lynx.
+                title: { base: { color: 'var(--color-base-content)', textAlign: 'center' } },
+                description: { base: { textAlign: 'center', maxInlineSize: '100%' } },
+                actions: { base: { flexDirection: 'row', marginTop: 'var(--space-sm)' } },
+            },
+        },
+    },
 };
 
 /**
@@ -6060,6 +6488,62 @@ export const badge: RecipeInput = {
     },    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; }',
     },
+    /**
+     * Lynx (signalxjs/lynx#1234). The dot's `currentColor` never resolves
+     * there (lynx#1079), so the uncoloured dot and its ring take the pill's
+     * ink token, the value `currentColor` names on the web. The running halo
+     * and pulse mix the recipe-local `--badge-dot`, which cannot bake, so the
+     * halo is its own token mixed from each role's `--color-*` (baked per
+     * theme) and the pulse breathes opacity instead of the halo's spread.
+     * `inline-size`/`block-size` do not resolve on lynx (lynx#1145): the dot
+     * is sized physically. A lynx view has no inline formatting context, so
+     * the pill is content-sized with an explicit row (lynx#1165), and its
+     * hairline and the dot's ring are longhands (lynx#1161/#1162).
+     */
+    targets: {
+        lynx: {
+            tokens: {
+                '--badge-dot': 'var(--badge-ink)',
+                '--badge-dot-ring': 'var(--badge-ink)',
+                '--badge-dot-halo': 'color-mix(in oklch, var(--color-base-content) 35%, transparent)',
+            },
+            parts: {
+                root: {
+                    base: {
+                        ...lynxBtnFit,
+                        flexDirection: 'row',
+                        border: '0 solid transparent',
+                        ...lynxSides('border{}Width', 'var(--border)'),
+                    },
+                },
+                dot: {
+                    base: {
+                        display: 'flex',
+                        width: '0.5em',
+                        height: '0.5em',
+                        flexShrink: '0',
+                        border: '0 solid transparent',
+                        ...lynxSides('border{}Width', '0.1em'),
+                        ...lynxSides('border{}Color', 'var(--badge-dot-ring)'),
+                    },
+                    states: {
+                        running: {
+                            boxShadow: '0 0 0 0.2em var(--badge-dot-halo)',
+                            animation: 'zero-daisy-badge-pulse 1.6s ease-in-out infinite',
+                        },
+                    },
+                },
+            },
+            variants: {
+                color: Object.fromEntries(ROLES.map((c) => [c, {
+                    dot: { base: { '--badge-dot-halo': `color-mix(in oklch, var(--color-${c}) 35%, transparent)` } },
+                }])),
+            },
+            keyframes: {
+                'zero-daisy-badge-pulse': 'from, to { opacity: 1; } 50% { opacity: 0.45; }',
+            },
+        },
+    },
 };
 
 /** daisy "divider": the base-300 rule, thickening with the ramp. */
@@ -6130,6 +6614,11 @@ export const divider: RecipeInput = {
     },
     targets: {
         lynx: {
+            // `auto` behind a custom property, so the labelled root's size
+            // is var-bearing too and can beat the var-bearing line thickness
+            // below (lynx expands var() declarations after the cascade,
+            // signalxjs/lynx#1161).
+            tokens: { '--divider-fit': 'auto' },
             parts: {
                 // Lynx drops the ::before/::after segments the rule is drawn
                 // with above, which left the lynx divider with no line and,
@@ -6144,7 +6633,64 @@ export const divider: RecipeInput = {
                         '&[data-orientation="vertical"]': { inlineSize: 'var(--divider-thickness)' },
                     },
                 },
+                // The label's inset, physical (Android resolves no logical
+                // padding, signalxjs/lynx#1084), and flush on the side its
+                // placement gave up. Lynx has no descendant combinator from
+                // the root, so lynx-zero stamps the root's orientation on the
+                // label itself; vertical, the inset turns to the block axis.
+                // Every zero is spelled through var() so it beats the
+                // var-bearing inset (signalxjs/lynx#1161).
+                label: {
+                    base: {
+                        paddingLeft: 'var(--space-md)',
+                        paddingRight: 'var(--space-md)',
+                    },
+                    selectors: {
+                        '&[data-placement="start"]': { paddingLeft: 'calc(var(--space-md) * 0)' },
+                        '&[data-placement="end"]': { paddingRight: 'calc(var(--space-md) * 0)' },
+                        '&[data-orientation="vertical"]': {
+                            paddingLeft: 'calc(var(--space-md) * 0)',
+                            paddingRight: 'calc(var(--space-md) * 0)',
+                            paddingTop: 'var(--space-sm)',
+                            paddingBottom: 'var(--space-sm)',
+                        },
+                        '&[data-orientation="vertical"][data-placement="start"]': { paddingTop: 'calc(var(--space-sm) * 0)' },
+                        '&[data-orientation="vertical"][data-placement="end"]': { paddingBottom: 'calc(var(--space-sm) * 0)' },
+                    },
+                },
             },
+            // A labelled divider (signalxjs/lynx#1236). With no pseudo-
+            // elements, lynx-zero draws the rule's two segments as views
+            // carrying the root's own line classes plus `zx-m-segment` —
+            // so each paints this recipe's line, ink and thickness ramp — and
+            // leaves out the one on the label's placed side (the web's
+            // `:has(> [data-placement])::before { display: none }`). The root
+            // holding them is stamped `zx-m-labelled` and stops being a line:
+            // 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).
+            css: `
+.zx-divider__root.zx-m-labelled {
+    --divider-ink: transparent;
+}
+.zx-divider__root.zx-m-labelled.zx-o-horizontal {
+    flex-direction: row;
+    block-size: var(--divider-fit);
+}
+.zx-divider__root.zx-m-labelled.zx-o-vertical {
+    inline-size: var(--divider-fit);
+}
+.zx-divider__root.zx-m-segment {
+    flex: 1 1 0;
+}
+.zx-divider__root.zx-m-segment.zx-o-horizontal {
+    min-width: 0;
+}
+.zx-divider__root.zx-m-segment.zx-o-vertical {
+    min-height: 0;
+}
+`,
         },
     },
 };
@@ -6201,13 +6747,29 @@ export const skeleton: RecipeInput = {
     keyframes: {
         'zero-daisyui-skeleton': 'from, to { opacity: 1; } 50% { opacity: 0.55; }',
     },
+    // signalxjs/lynx#1237. The pulse is an opacity loop on the part itself —
+    // no pseudo-element, so it carries as is; only its keyframes are
+    // restated as three plain stops, not the `from, to` selector list. The
+    // reduced-motion stop cannot follow: lynx emits no `@media`.
+    targets: {
+        lynx: {
+            keyframes: {
+                'zero-daisyui-skeleton': '0% { opacity: 1; } 50% { opacity: 0.55; } 100% { opacity: 1; }',
+            },
+        },
+    },
 };
 
-/** daisy "loading-spinner": the ring, with one quadrant in the role's ink. */
+/**
+ * daisy "loading-spinner": the ring, with one quadrant in the role's ink.
+ * Sized on daisy's `loading-*` ramp — `--size-selector * 4…8` (16–32px), md
+ * the `loading` default of `* 6` (signalxjs/lynx#1237: the ramp was
+ * `--size-field * 0.35…0.9`, a 2px box that the 2px border swallowed).
+ */
 export const spinner: RecipeInput = {
     component: 'spinner',
     tokens: {
-        '--spinner-size': 'calc(var(--size-field) * 0.5)',
+        '--spinner-size': 'calc(var(--size-selector) * 6)',
         '--spinner-ink': 'var(--color-primary)',
         '--spinner-track': 'var(--color-base-300)',
     },
@@ -6231,14 +6793,40 @@ export const spinner: RecipeInput = {
             '--spinner-ink': `var(--color-${c})`,
         } } }])),
         size: {
-            xs: { root: { base: { '--spinner-size': 'calc(var(--size-field) * 0.35)' } } },
-            sm: { root: { base: { '--spinner-size': 'calc(var(--size-field) * 0.42)' } } },
+            xs: { root: { base: { '--spinner-size': 'calc(var(--size-selector) * 4)' } } },
+            sm: { root: { base: { '--spinner-size': 'calc(var(--size-selector) * 5)' } } },
             md: {},
-            lg: { root: { base: { '--spinner-size': 'calc(var(--size-field) * 0.7)' } } },
-            xl: { root: { base: { '--spinner-size': 'calc(var(--size-field) * 0.9)' } } },
+            lg: { root: { base: { '--spinner-size': 'calc(var(--size-selector) * 7)' } } },
+            xl: { root: { base: { '--spinner-size': 'calc(var(--size-selector) * 8)' } } },
         },
     },
     keyframes: { 'zero-daisyui-spin': 'to { transform: rotate(360deg); }' },
+    // signalxjs/lynx#1237 — the ring in physical spellings. The logical box
+    // size and `border-block-start-color` are not lynx's; the ring is
+    // restated as longhands, because a var-bearing `border` shorthand
+    // expands after the cascade and would repaint the head in the track
+    // colour (signalxjs/lynx#1161). A flex box, since `inline-block` is not a
+    // lynx display value, that keeps its size in a row. The reduced-motion
+    // stop cannot follow: lynx emits no `@media`.
+    targets: {
+        lynx: {
+            parts: {
+                root: {
+                    base: {
+                        display: 'flex',
+                        flexShrink: '0',
+                        width: 'var(--spinner-size)',
+                        height: 'var(--spinner-size)',
+                        border: '0 solid transparent',
+                        borderStyle: 'solid',
+                        ...lynxSides('border{}Width', 'calc(var(--border) * 2)'),
+                        ...lynxSides('border{}Color', 'var(--spinner-track)', ['Right', 'Bottom', 'Left']),
+                        borderTopColor: 'var(--spinner-ink)',
+                    },
+                },
+            },
+        },
+    },
 };
 
 // ── The content-tier sweep (#334) ─────────────────────────────────────────
@@ -6285,6 +6873,44 @@ export const kbd: RecipeInput = {
             xl: { root: { base: { fontSize: 'var(--text-md)', padding: 'var(--space-xs) var(--space-lg)' } } },
         },
     },
+    /**
+     * Lynx (signalxjs/lynx#1234). `min-inline-size` and the logical bottom
+     * edge do not resolve on lynx (lynx#1145, #1084), so the cap's floor is
+     * a physical `min-width` and its doubled bottom edge a physical
+     * longhand; the whole hairline is longhands so a var-bearing shorthand
+     * cannot expand over the thicker edge (lynx#1161/#1162). A lynx view has
+     * no inline formatting context: the cap is content-sized with an
+     * explicit row (lynx#1165).
+     */
+    targets: {
+        lynx: {
+            parts: {
+                root: {
+                    base: {
+                        ...lynxBtnFit,
+                        flexDirection: 'row',
+                        minWidth: '1.75em',
+                        border: '0 solid transparent',
+                        ...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',
+                    },
+                },
+            },
+            variants: {
+                size: { xs: { root: { base: { minWidth: '1.5em' } } } },
+            },
+        },
+    },
 };
 
 /**
@@ -6326,6 +6952,37 @@ export const status: RecipeInput = {
             xl: { root: { base: { '--status-size': 'calc(var(--size-selector) * 3.5)' } } },
         },
     },
+    /**
+     * Lynx (signalxjs/lynx#1234). The halo mixes the recipe-local
+     * `--status-ink`, which cannot bake, so it is its own token mixed from
+     * each role's `--color-*` (baked per theme). `inline-size`/`block-size`
+     * do not resolve on lynx (lynx#1145): the dot is sized physically, and
+     * it is a flex box rather than an inline-block the engine has no
+     * formatting context for.
+     */
+    targets: {
+        lynx: {
+            tokens: {
+                '--status-halo': 'color-mix(in oklch, var(--color-base-content) 25%, transparent)',
+            },
+            parts: {
+                root: {
+                    base: {
+                        display: 'flex',
+                        flexShrink: '0',
+                        width: 'var(--status-size)',
+                        height: 'var(--status-size)',
+                        boxShadow: '0 0 0 calc(var(--status-size) / 4) var(--status-halo)',
+                    },
+                },
+            },
+            variants: {
+                color: Object.fromEntries(ROLES.map((c) => [c, { root: { base: {
+                    '--status-halo': `color-mix(in oklch, var(--color-${c}) 25%, transparent)`,
+                } } }])),
+            },
+        },
+    },
 };
 
 /**
@@ -6510,6 +7167,90 @@ export const stats: RecipeInput = {
             xl: { value: { base: { fontSize: 'var(--text-3xl)' } } },
         },
     },
+    // signalxjs/lynx#1236 — the lynx replacements for what the shared
+    // sections cannot say there.
+    targets: {
+        lynx: {
+            parts: {
+                // A row unless vertical: a lynx flex container does not
+                // default to one.
+                root: { base: { flexDirection: 'row' } },
+                // Lynx has no grid, so `display: grid` left the item in the
+                // engine's default linear layout. The bands stack in a
+                // centred column instead, and the figure is pinned to the
+                // item's end edge (below). The padding as longhands, so the
+                // `figure` rule below can widen one side by specificity (a
+                // var-bearing `padding` shorthand would expand over it,
+                // signalxjs/lynx#1161).
+                item: {
+                    base: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        justifyContent: 'center',
+                        position: 'relative',
+                        padding: '0',
+                        paddingTop: 'var(--space-lg)',
+                        paddingBottom: 'var(--space-lg)',
+                        paddingLeft: 'var(--space-xl)',
+                        paddingRight: 'var(--space-xl)',
+                    },
+                    selectors: {
+                        // The seams: lynx has no sibling combinator, so the
+                        // web's `item + item` edge cannot be selected. Every
+                        // item draws its leading seam and the `first`
+                        // modifier takes it off the first (raw css below).
+                        '&[data-orientation="horizontal"]': {
+                            borderLeftWidth: 'var(--border)',
+                            borderLeftStyle: 'solid',
+                            borderLeftColor: 'var(--color-base-200)',
+                        },
+                        '&[data-orientation="vertical"]': {
+                            borderTopWidth: 'var(--border)',
+                            borderTopStyle: 'solid',
+                            borderTopColor: 'var(--color-base-200)',
+                        },
+                    },
+                },
+                // The web's second grid column, spanning the three bands and
+                // centred on them: pinned to the item's end edge, inside its
+                // padding, and centred top to bottom.
+                figure: {
+                    base: {
+                        position: 'absolute',
+                        top: '0',
+                        bottom: '0',
+                        right: 'var(--space-xl)',
+                        // The web centres the grid cell with align-self; the
+                        // insets place it here.
+                        alignSelf: 'auto',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        justifyContent: 'center',
+                    },
+                },
+            },
+            // lynx-zero stamps the row's first item `zx-m-first` (mount
+            // order; no `:first-child`) and an item holding a figure
+            // `zx-m-figure`. Rendering details, not author modifiers, so raw
+            // lynx css (the toggle-group join ends' reasoning). The first
+            // item drops the leading seam, its zero width spelled through
+            // var() to beat the var-bearing seam (signalxjs/lynx#1161). An
+            // item with a figure keeps the figure's column clear: the
+            // padding, the web's `--space-md` column gap, and a 2rem figure
+            // (daisy's `stat-figure` holds a `size-8` icon or avatar).
+            css: `
+.zx-stats__item.zx-m-first.zx-o-horizontal {
+    border-left-width: calc(var(--border) * 0);
+}
+.zx-stats__item.zx-m-first.zx-o-vertical {
+    border-top-width: calc(var(--border) * 0);
+}
+.zx-stats__item.zx-m-figure {
+    padding-right: calc(var(--space-xl) + var(--space-md) + 2rem);
+}
+`,
+        },
+    },
 };
 
 /**
@@ -7231,6 +7972,28 @@ 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`.
+    targets: {
+        lynx: {
+            parts: {
+                root: { base: { flexDirection: 'row', minHeight: '4rem' } },
+                start: { base: { flexDirection: 'row' } },
+                center: { base: { flexDirection: 'row' } },
+                end: { base: { flexDirection: 'row' } },
+            },
+            variants: {
+                size: {
+                    xs: { root: { base: { minHeight: '2.5rem' } } },
+                    sm: { root: { base: { minHeight: '3rem' } } },
+                    lg: { root: { base: { minHeight: '5rem' } } },
+                    xl: { root: { base: { minHeight: '6rem' } } },
+                },
+            },
+        },
+    },
 };
 
 /**
@@ -7290,6 +8053,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)',
@@ -7337,6 +8108,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' } },
+            },
+        },
+    },
 };
 
 /**
@@ -7446,6 +8238,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)'),
+                    },
+                },
+            },
+        },
+    },
 };
 
 /**
@@ -7484,6 +8307,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
@@ -7580,13 +8416,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,
             },
         },
     },
@@ -7606,6 +8464,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"]))';
 
@@ -7723,7 +8587,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)' },
             },
@@ -7811,32 +8675,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);
+}
+`,
         },
     },
 };