@sigx/zero-daisyui 0.12.0 → 0.14.0

package/src/recipes.ts

@@ -1825,6 +1825,13 @@ export const fieldset: RecipeInput = {
  * horizontal bar and lifts it to the middle. All three verbatim from daisyUI
  * 5.7.8's `.checkbox:before` / `:checked` / `:indeterminate`.
  */
+/**
+ * The lynx tick's stroke: 20% of the checkbox's content box — the width of
+ * daisy's polygon bars — as a length, since borders take no percentage.
+ * The content box is the control less its padding and border on both sides.
+ */
+const CHECKBOX_LYNX_STROKE = 'calc((var(--checkbox-size) - var(--checkbox-pad) * 2 - var(--border) * 2) * 0.2)';
+
 const TICK_COLLAPSED = 'polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 70% 80%, 70% 100%)';
 const TICK_DRAWN = 'polygon(20% 100%, 20% 80%, 50% 80%, 50% 0%, 70% 0%, 70% 100%)';
 const DASH_DRAWN = 'polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 80% 80%, 80% 100%)';
@@ -2064,26 +2071,62 @@ export const checkbox: RecipeInput = {
                     },
                 },
                 indicator: {
-                    // The tick's fill: the control's `color:` names
-                    // `--checkbox-on-accent`, and `currentColor` was that
-                    // ink by inheritance — spend it directly.
+                    // The tick WITHOUT clip-path, which lynx does not apply
+                    // (measured on iOS, signalxjs/lynx#1216 — daisy's
+                    // polygon-cut box drew as a solid diamond; the emitter
+                    // now drops every clip-path). daisy's drawn polygon is an
+                    // L inside the content box: a bar at x 50–70% over the
+                    // full height and a foot at y 80–100% from x 20%, both
+                    // 20% of the box thick, rotated 45° about the box's
+                    // centre. That is exactly the classic two-border check:
+                    // a 50%-wide full-height box at x 20% with a right and a
+                    // bottom border 20% of the content box thick, turned
+                    // about the content box's centre (60% 50% of itself).
                     //
-                    // The tick's motion, restated as `transform`: the
-                    // standalone `rotate`/`translate` properties resolve on
-                    // iOS but not on Android (measured, signalxjs/lynx#1084),
-                    // so the emitter refuses them. `transform` functions are
-                    // proven on both platforms — and the transition follows
-                    // the property that now moves.
+                    // The ink: the control's `color:` names
+                    // `--checkbox-on-accent`, and `currentColor` was that ink
+                    // by inheritance (it never resolves on lynx,
+                    // signalxjs/lynx#1079) — spent directly on the borders.
+                    //
+                    // The motion is `transform`: the standalone `rotate` /
+                    // `translate` properties resolve on iOS but not on
+                    // Android (signalxjs/lynx#1084). No sheen shadow — on a
+                    // hollow box it would band the inside of the L.
                     base: {
-                        backgroundColor: 'var(--checkbox-on-accent)',
+                        boxSizing: 'border-box',
+                        width: '50%',
+                        height: '100%',
+                        marginLeft: '20%',
+                        backgroundColor: 'transparent',
+                        borderStyle: 'solid',
+                        borderColor: 'var(--checkbox-on-accent)',
+                        borderTopWidth: '0',
+                        borderLeftWidth: '0',
+                        borderRightWidth: CHECKBOX_LYNX_STROKE,
+                        borderBottomWidth: CHECKBOX_LYNX_STROKE,
+                        boxShadow: 'none',
+                        transformOrigin: '60% 50%',
                         transform: 'rotate(45deg)',
-                        transition: 'clip-path var(--duration-slow) var(--ease-standard) var(--duration-instant), '
-                            + 'opacity var(--duration-instant) var(--ease-standard) var(--duration-instant), '
+                        transition: 'opacity var(--duration-instant) var(--ease-standard) var(--duration-instant), '
                             + 'transform var(--duration-slow) var(--ease-standard) var(--duration-instant)',
                     },
-                    // The order matches the standalone properties' fixed
-                    // apply order (translate, then rotate).
-                    states: { indeterminate: { transform: 'translateY(-35%) rotate(0deg)' } },
+                    states: {
+                        // daisy's dash (signalxjs/lynx#1217): the same six
+                        // points un-rotated into a bar at x 20–80%, 20% of
+                        // the box tall, lifted to the middle. Here a filled,
+                        // borderless 60% × 20% box centred on the cross
+                        // axis — the unclipped full-height box had painted
+                        // the top half of the control.
+                        indeterminate: {
+                            width: '60%',
+                            height: '20%',
+                            alignSelf: 'center',
+                            borderRightWidth: '0',
+                            borderBottomWidth: '0',
+                            backgroundColor: 'var(--checkbox-on-accent)',
+                            transform: 'rotate(0deg)',
+                        },
+                    },
                 },
             },
         },
@@ -3730,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);
+}
+`,
+        },
+    },
 };
 
 /**
@@ -3824,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)',
+                    },
+                },
+            },
+        },
+    },
 };
 
 /**
@@ -4120,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
@@ -4149,6 +4385,11 @@ export const combobox: RecipeInput = {
                 flexWrap: 'wrap',
                 minWidth: '13rem',
                 ...fieldControl,
+                // The one field control that wraps: under `multiple` its tags
+                // flow onto new rows, so the field step is a floor, not a cap —
+                // a fixed height spills wrapped tags over the next field (#407).
+                height: 'auto',
+                minHeight: fieldHeight('md'),
                 transition: 'border-color var(--duration-fast) var(--ease-standard)',
             },
             states: {
@@ -4211,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': {
@@ -4496,6 +4738,11 @@ export const toggle: RecipeInput = {
     },
 };
 
+/** A toggle-group end item's outer corner: the frame's radius inside its hairline. */
+const joinInnerRadius = 'calc(var(--radius-field) - var(--border))';
+/** A zero seam width that still holds var(), so it can beat the var-bearing seam on lynx. */
+const noSeam = 'calc(var(--border) * 0)';
+
 // daisy "join" of btns: one bordered capsule, hairline seams between items,
 // the on item filled with the accent.
 export const toggleGroup: RecipeInput = {
@@ -4625,15 +4872,13 @@ export const toggleGroup: RecipeInput = {
                         ...lynxSides('border{}Width', 'var(--border)'),
                         ...lynxSides('border{}Color', 'var(--color-base-300)'),
                     },
-                    selectors: {
-                        // The join seams: lynx has no sibling combinator, so
-                        // the web's `item + item` edge cannot be selected.
-                        // Every item draws its leading seam instead (below),
-                        // and the frame gives up that edge — the first item's
-                        // seam stands in for it, inside the frame's clip.
-                        '&[data-orientation="horizontal"]': { borderLeftWidth: '0' },
-                        '&[data-orientation="vertical"]': { borderTopWidth: '0' },
-                    },
+                    // The frame keeps all four edges (signalxjs/lynx#1218).
+                    // It used to give up its leading edge to the first item's
+                    // seam and trust its own clip to round that item's
+                    // corners, but on iOS the frame's clip does not round the
+                    // leading corners: the first item painted square, and its
+                    // seam was lost with them. The `first`/`last` modifiers
+                    // below carry the join's ends instead.
                 },
                 item: {
                     base: { flexShrink: '0', flexWrap: 'nowrap' },
@@ -4649,6 +4894,10 @@ export const toggleGroup: RecipeInput = {
                     },
                     selectors: {
                         '&[data-state="on"][data-pressed]': { background: 'var(--toggle-group-accent)' },
+                        // The join 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 item at the frame's edge.
                         '&[data-orientation="horizontal"]': {
                             borderLeftWidth: 'var(--border)',
                             borderLeftStyle: 'solid',
@@ -4662,6 +4911,40 @@ export const toggleGroup: RecipeInput = {
                     },
                 },
             },
+            // The ends of the join (signalxjs/lynx#1218). Lynx has no
+            // `:first-child` or `:last-child`, so lynx-zero stamps the end
+            // items itself, 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. The end items round their own outer corners to the
+            // frame's inner radius, so an on or held end item follows the
+            // frame's corners without relying on its clip; `first` also
+            // drops the leading seam, which would double the frame's edge.
+            // That zero width is spelled through var() on purpose: a static
+            // longhand loses to the var-bearing seam width whatever its
+            // specificity (lynx expands var() declarations after the
+            // cascade, signalxjs/lynx#1161).
+            css: `
+.zx-toggle-group__item.zx-m-first.zx-o-horizontal {
+    border-left-width: ${noSeam};
+    border-top-left-radius: ${joinInnerRadius};
+    border-bottom-left-radius: ${joinInnerRadius};
+}
+.zx-toggle-group__item.zx-m-first.zx-o-vertical {
+    border-top-width: ${noSeam};
+    border-top-left-radius: ${joinInnerRadius};
+    border-top-right-radius: ${joinInnerRadius};
+}
+.zx-toggle-group__item.zx-m-last.zx-o-horizontal {
+    border-top-right-radius: ${joinInnerRadius};
+    border-bottom-right-radius: ${joinInnerRadius};
+}
+.zx-toggle-group__item.zx-m-last.zx-o-vertical {
+    border-bottom-left-radius: ${joinInnerRadius};
+    border-bottom-right-radius: ${joinInnerRadius};
+}
+`,
         },
     },
 };
@@ -4830,7 +5113,19 @@ export const numberInput: RecipeInput = {
                     base: { overflow: 'visible' },
                     states: { 'focus-visible': lynxFocusRing('var(--number-input-accent)') },
                 },
-                input: { base: { color: 'var(--color-base-content)', flexGrow: '1' } },
+                // `::placeholder` does not exist on lynx, so the web's 60%
+                // mix rides lynx's own `-x-placeholder-color` (baked per
+                // theme) — without it the platform default reads dark on
+                // dark (signalxjs/lynx#1222). Spelled out, not the
+                // `textFieldPlaceholder` const: that one is declared further
+                // down the module, after this literal is evaluated.
+                input: {
+                    base: {
+                        color: 'var(--color-base-content)',
+                        '-x-placeholder-color': 'color-mix(in oklab, var(--color-base-content) 60%, transparent)',
+                        flexGrow: '1',
+                    },
+                },
                 'increment-trigger': {
                     base: {
                         display: 'flex',
@@ -5447,6 +5742,10 @@ export const input: RecipeInput = {
     },
 };
 
+/** The lynx textarea floor: two field heights, as ONE calc() (signalxjs/lynx#1219). */
+const textareaFloor = (step: keyof typeof FIELD_STEPS): string =>
+    `calc(var(--size-field) * ${FIELD_STEPS[step] * 2})`;
+
 /**
  * daisy "textarea" flavor. The `fieldControl` box minus its `height`: the
  * whole point of a textarea is that its height is the content's (and the
@@ -5519,12 +5818,64 @@ export const textarea: RecipeInput = {
     // are explicit here — `color: inherit` and `::placeholder` never reach a
     // native widget — and the web's `:hover` border and outline ring become
     // the lynx focus ring in the root's accent (signalxjs/lynx#1163).
+    //
+    // The floor is one flat `calc(var(--size-field) * n)` per size
+    // (signalxjs/lynx#1219): the shared `calc(fieldHeight * 2)` nests a
+    // calc() in a calc(), and on device the box never took it — an empty
+    // textarea sat one line tall.
+    //
+    // The focus ring is NOT `lynxFocusRing`'s two stacked outset shadows
+    // (signalxjs/lynx#1220). Lynx iOS re-inserts a view's outset shadow
+    // layers at a stale index whenever it re-lays the view out
+    // (`LynxBackgroundManager.updateShadow` reads the sublayer count before
+    // removing the old layers), which reverses their stacking: the 4px ring
+    // 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
+    // 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 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: {
                 textarea: {
-                    base: { color: 'var(--color-base-content)', '-x-placeholder-color': textFieldPlaceholder },
-                    states: { 'focus-visible': lynxFocusRing('var(--textarea-accent)') },
+                    base: {
+                        color: 'var(--color-base-content)',
+                        '-x-placeholder-color': textFieldPlaceholder,
+                        '--textarea-edge': 'var(--color-base-300)',
+                        minHeight: textareaFloor('md'),
+                    },
+                    states: {
+                        invalid: { '--textarea-edge': 'var(--color-error)' },
+                        'focus-visible': {
+                            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)',
+                        },
+                    },
+                },
+            },
+            variants: {
+                size: {
+                    xs: { textarea: { base: { minHeight: textareaFloor('xs') } } },
+                    sm: { textarea: { base: { minHeight: textareaFloor('sm') } } },
+                    lg: { textarea: { base: { minHeight: textareaFloor('lg') } } },
+                    xl: { textarea: { base: { minHeight: textareaFloor('xl') } } },
                 },
             },
         },
@@ -5638,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);
+}
+`,
+        },
+    },
 };
 
 /**
@@ -5729,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));
+}
+`,
+        },
+    },
 };
 
 /**
@@ -5811,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)' } },
+            },
+        },
+    },
 };
 
 /**
@@ -5913,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. */
@@ -5983,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,
@@ -5997,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;
+}
+`,
         },
     },
 };
@@ -6054,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)',
     },
@@ -6084,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) ─────────────────────────────────────────
@@ -6138,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' } } } },
+            },
+        },
+    },
 };
 
 /**
@@ -6179,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)`,
+                } } }])),
+            },
+        },
+    },
 };
 
 /**
@@ -6363,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);
+}
+`,
+        },
+    },
 };
 
 /**