@sigx/zero-daisyui 0.13.0 → 0.14.0

package/src/recipes.ts

@@ -3773,6 +3773,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 +3941,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 +4264,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 +4452,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': {
@@ -5638,11 +5832,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 +5860,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 +5989,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 +6116,87 @@ 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.
+                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)',
+                    },
+                    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 +6279,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 +6400,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 +6526,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 +6545,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 +6659,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 +6705,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 +6785,35 @@ 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)'),
+                    },
+                },
+            },
+            variants: {
+                size: { xs: { root: { base: { minWidth: '1.5em' } } } },
+            },
+        },
+    },
 };
 
 /**
@@ -6326,6 +6855,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 +7070,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);
+}
+`,
+        },
+    },
 };
 
 /**