@sigx/zero-daisyui 0.15.0 → 0.17.0

package/src/recipes.ts

@@ -240,6 +240,98 @@ const disclosureExit = (scope: 'collapsible' | 'accordion'): RecipeInput['target
     },
 });
 
+/**
+ * Collapsible's non-native mode (#453): a `<div>` root, a `<button>` trigger
+ * and a panel hidden with `hidden="until-found"`. Nothing lives on
+ * `::details-content` there, so the panel does that wrapper's work itself:
+ * collapsed while `hidden` (the UA's `content-visibility: hidden` keeps the
+ * box — padding and border included — on the page), clipped so its content
+ * never spills out of a box that is growing or shrinking, and grown
+ * from collapsed to `auto` on the open state (`interpolate-size` is the
+ * root's, and inherits); the close is `disclosureExit`'s, as in native mode.
+ * Inert in native mode: a native panel is never `hidden`, and its block size
+ * never moves.
+ *
+ * The trigger sheds the paint a UA `<button>` has and a `<summary>` never
+ * had — only where the recipe's own base leaves a property unset, since this
+ * rule (`:where(button)`, the base's specificity) is emitted after it.
+ * Web-only, like `hidden="until-found"` itself.
+ */
+const BUTTON_RESET: CssProps = {
+    appearance: 'none',
+    margin: '0',
+    padding: '0',
+    border: '0',
+    background: 'none',
+    color: 'inherit',
+    fontFamily: 'inherit',
+    fontSize: 'inherit',
+    fontWeight: 'inherit',
+    fontStyle: 'inherit',
+    lineHeight: 'inherit',
+    letterSpacing: 'inherit',
+    textTransform: 'inherit',
+    textAlign: 'start',
+    inlineSize: '100%',
+    boxSizing: 'border-box',
+};
+/** The reset minus what `base` states itself (a `borderRadius` is no border). */
+const summaryLike = (base: CssProps = {}): CssProps => {
+    const own = Object.keys(base).filter((key) => !key.endsWith('Radius'));
+    return Object.fromEntries(Object.entries(BUTTON_RESET)
+        .filter(([key]) => !own.some((k) => k === key || k.startsWith(key))));
+};
+const withNonNative = (recipe: RecipeInput): RecipeInput => {
+    const web = recipe.targets?.web ?? {};
+    const trigger = web.parts?.trigger ?? {};
+    const panel = web.parts?.panel ?? {};
+    const reduced = panel.at?.['reduced-motion'] ?? {};
+    return {
+        ...recipe,
+        targets: {
+            ...recipe.targets,
+            web: {
+                ...web,
+                parts: {
+                    ...web.parts,
+                    trigger: {
+                        ...trigger,
+                        selectors: { ...trigger.selectors, '&:where(button)': summaryLike(recipe.parts.trigger?.base) },
+                    },
+                    panel: {
+                        ...panel,
+                        base: { ...panel.base, overflow: 'clip' },
+                        selectors: {
+                            ...panel.selectors,
+                            '&[data-state="closed"][hidden]': {
+                                blockSize: '0',
+                                paddingBlock: '0',
+                                borderBlockWidth: '0',
+                                animation: 'none',
+                            },
+                        },
+                        // The open half: from the collapsed box to `auto`.
+                        states: {
+                            ...panel.states,
+                            open: {
+                                ...panel.states?.open,
+                                transition: 'block-size var(--duration-normal) var(--ease-standard), padding-block var(--duration-normal) var(--ease-standard)',
+                            },
+                        },
+                        at: {
+                            ...panel.at,
+                            'reduced-motion': {
+                                ...reduced,
+                                states: { ...reduced.states, open: { transition: 'none' } },
+                            },
+                        },
+                    },
+                },
+            },
+        },
+    };
+};
+
 /**
  * Merge presence into a part's own styles per KEY, not per block: a recipe
  * that already writes `states: { open: {} }` — the "deliberately unstyled"
@@ -660,7 +752,7 @@ const disclosureSizes: Record<string, Record<string, PartStyles>> = {
 };
 
 // daisy "collapse collapse-arrow" flavor.
-export const collapsible: RecipeInput = {
+export const collapsible: RecipeInput = withNonNative({
     component: 'collapsible',
     targets: disclosureExit('collapsible'),
     // Public to a design system derived from this one (#73).
@@ -739,7 +831,7 @@ export const collapsible: RecipeInput = {
     // signalxjs/lynx#1070. No `color` default: the un-attributed accent is
     // base-content ink, outside the color vocabulary.
     defaultVariants: { size: 'md' },
-};
+});
 
 // daisy "toggle" flavor.
 export const switchRecipe: RecipeInput = {
@@ -1413,7 +1505,17 @@ export const tooltip: RecipeInput = {
     targets: {
         web: floatingArrow('tooltip', { background: 'var(--color-neutral)' }, '0.5rem'),
         lynx: {
-            parts: { trigger: { base: lynxBtnPad(4) } },
+            parts: {
+                // Content-sized like daisy's btn, never broken mid-word
+                // (signalxjs/lynx#1165). No pressed rule: the anatomy
+                // declares none — the long press paints the `open` state.
+                trigger: { base: { ...lynxBtnPad(4), ...lynxBtnFit } },
+                // The arrow's paint: the bubble's neutral, continued. The
+                // web's `floatingArrow` geometry rides runtime custom
+                // properties lynx does not write, so lynx-zero places the
+                // 8px square and turns it itself (signalxjs/lynx#1277).
+                arrow: { base: { background: 'var(--color-neutral)' } },
+            },
             variants: { size: lynxBtnSizes('trigger') },
         },
     },
@@ -4632,6 +4734,70 @@ export const combobox: RecipeInput = {
     },
     targets: {
         web: { parts: { popup: { base: anchoredListbox } } },
+        // lynx-zero's combobox (signalxjs/lynx#1278): a native text field in
+        // a painted `control` view, the list in the overlay outlet.
+        lynx: {
+            parts: {
+                // select's bounds (signalxjs/lynx#1146): 20rem, never wider
+                // than the container. The web's 13rem control floor
+                // overflowed any cell narrower than 208px on a phone; the
+                // control fills the root instead.
+                root: { base: { width: '20rem', maxWidth: '100%', minWidth: '3rem' } },
+                // The web `:hover` border is dropped on a touch platform. The
+                // ring is the box-shadow spelling (signalxjs/lynx#1163): lynx
+                // has no `outline-offset`, and its outline ignores the radius.
+                control: {
+                    base: { minWidth: '3rem', width: '100%' },
+                    states: lynxFocus(),
+                },
+                // `color: inherit` never reaches a native text field, and
+                // `::placeholder` does not exist: the ink is explicit, and the
+                // placeholder takes lynx's `-x-placeholder-color` — the web's
+                // 60% mix, baked per theme (input's spelling; its constant is
+                // declared below this recipe, so the value is restated).
+                input: {
+                    base: {
+                        color: 'var(--color-base-content)',
+                        '-x-placeholder-color': 'color-mix(in oklab, var(--color-base-content) 60%, transparent)',
+                        flexGrow: '1',
+                        flexShrink: '1',
+                    },
+                },
+                // The chevron and the × are `<view>`s holding a glyph: centred
+                // in the stretched row (a lynx view lays its child out at the
+                // top), in explicit ink. A held chevron comes up to full ink —
+                // the touch answer to the web's resting 60%. The clear-trigger
+                // declares no pressed flag; its feedback is the text leaving.
+                trigger: {
+                    base: { color: 'var(--color-base-content)', display: 'flex', alignItems: 'center', justifyContent: 'center' },
+                    states: { pressed: { opacity: '1' } },
+                },
+                'clear-trigger': {
+                    base: { color: 'var(--color-base-content)', display: 'flex', alignItems: 'center', justifyContent: 'center' },
+                },
+                // The chip's ring is the lynx one; its remove button's ring is
+                // drawn inside, so it never paints over the chip's label.
+                tag: { states: lynxFocus() },
+                'tag-remove': {
+                    base: { color: 'var(--color-base-content)' },
+                    states: lynxFocus({ inset: true }),
+                },
+                // The popup renders in the overlay outlet, outside the root,
+                // so it cannot inherit `--combobox-accent`, and an unresolved
+                // `var()` on lynx has no fallback (select's
+                // signalxjs/lynx#1168). The popup restates the accent; its
+                // colour-axis twins are in `variants.color` below.
+                popup: { base: { '--combobox-accent': 'var(--color-primary)' } },
+                // A touch list has no pointer highlight: a held option takes
+                // the highlighted wash.
+                item: { states: { pressed: { background: 'var(--color-base-200)' } } },
+            },
+            variants: {
+                color: Object.fromEntries(ROLES.map((c) => [c, { popup: { base: {
+                    '--combobox-accent': `var(--color-${c})`,
+                } } }])),
+            },
+        },
     },
 };
 
@@ -5415,6 +5581,15 @@ const lynxTreeRowStates: Record<string, CssProps> = {
     ...lynxFocus({ inset: true }),
 };
 
+/**
+ * The tree rows' lynx base: the fill still eases, the ink snaps — a
+ * transitioned `color` never reaches the row's inheriting label on lynx
+ * (signalxjs/lynx#1292; see the tree-view recipe's `targets`).
+ */
+const lynxTreeRowBase: CssProps = {
+    transition: 'background var(--duration-fast) var(--ease-standard)',
+};
+
 /** 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)' },
@@ -5575,11 +5750,23 @@ export const treeView: RecipeInput = {
     // 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.
+    //
+    // The rows transition `background` only (signalxjs/lynx#1292, zero#521).
+    // A row's label is the author's `<text>`, inked by inheritance from the
+    // row. Lynx's new animator (on by default) takes a transitioned `color`
+    // change away from the element's own style pass and ticks it into the
+    // row's paint alone, and the row's children inherit its computed colour
+    // only in that pass, so they kept the OLD ink: a row selected live
+    // painted base-content text on the accent fill, while a row selected at
+    // mount (no transition runs) was right. Read in Lynx's
+    // `fiber_element.cc` (`ConsumeStyleInternal`) and
+    // `css_transition_manager.cc` (`ConsumeCSSProperty`). Without a `color`
+    // transition the new ink is set in the style pass and reaches the label.
     targets: {
         lynx: {
             parts: {
-                item: { states: lynxTreeRowStates, selectors: lynxTreeRowSelectors },
-                'branch-trigger': { states: lynxTreeRowStates, selectors: lynxTreeRowSelectors },
+                item: { base: lynxTreeRowBase, states: lynxTreeRowStates, selectors: lynxTreeRowSelectors },
+                'branch-trigger': { base: lynxTreeRowBase, 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.
@@ -6669,7 +6856,11 @@ export const divider: RecipeInput = {
             // no fill, its cross size following the label, a row when
             // horizontal. Both are lynx-zero rendering details, not
             // modifiers an author sets, so they are styled from raw lynx css
-            // (the toggle-group join ends' reasoning).
+            // (the toggle-group join ends' reasoning). A segment centres
+            // itself on the label (signalxjs/lynx#1272): it carries the
+            // root's `align-self: stretch`, and a stretched item with a
+            // definite thickness lands at cross-start on lynx — the top of
+            // the label row, not the middle daisy's rules sit on.
             css: `
 .zx-divider__root.zx-m-labelled {
     --divider-ink: transparent;
@@ -6683,6 +6874,7 @@ export const divider: RecipeInput = {
 }
 .zx-divider__root.zx-m-segment {
     flex: 1 1 0;
+    align-self: center;
 }
 .zx-divider__root.zx-m-segment.zx-o-horizontal {
     min-width: 0;
@@ -7621,14 +7813,43 @@ export const chat: RecipeInput = {
             xl: { bubble: { base: { fontSize: 'var(--text-lg)', padding: 'var(--space-md) var(--space-xl)' } } },
         },
     },
-    // The row's vertical padding, restated physically: logical spellings
-    // resolve on iOS but not on Android (measured, signalxjs/lynx#1084), so
-    // the emitter refuses them.
+    // Lynx (signalxjs/lynx#1276):
+    // - the row's vertical padding, restated physically: logical spellings
+    //   resolve on iOS but not on Android (measured, signalxjs/lynx#1084), so
+    //   the emitter refuses them;
+    // - lynx has no grid, so the row is a flex column (header, bubble,
+    //   footer), gathered to the placement's side. The avatar leaves the
+    //   flow: lynx-zero pins it to the row's bottom corner and reserves its
+    //   measured width beside the column;
+    // - the `[data-placement] > &` selectors have no class form on the
+    //   parts (placement is the root's), so the bubble's square tail corner
+    //   is raw lynx css, a descendant of the placed root — the shape the
+    //   theme restatements are proven to match. Physical corners: lynx has
+    //   no RTL flow.
     targets: {
         lynx: {
             parts: {
-                root: { base: { paddingTop: 'var(--space-2xs)', paddingBottom: 'var(--space-2xs)' } },
+                root: {
+                    base: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        alignItems: 'flex-start',
+                        paddingTop: 'var(--space-2xs)',
+                        paddingBottom: 'var(--space-2xs)',
+                    },
+                    selectors: {
+                        '&[data-placement="end"]': { alignItems: 'flex-end' },
+                    },
+                },
             },
+            css: `
+.zx-chat__root.zx-p-start .zx-chat__bubble {
+    border-bottom-left-radius: 0;
+}
+.zx-chat__root.zx-p-end .zx-chat__bubble {
+    border-bottom-right-radius: 0;
+}
+`,
         },
     },
 };
@@ -7721,6 +7942,59 @@ export const chatLog: RecipeInput = {
             xl: { content: { base: { rowGap: 'var(--space-md)' } }, 'jump-trigger': { base: { '--chat-log-jump-size': 'calc(var(--size-field) * 10)', fontSize: 'var(--text-sm)' } } },
         },
     },
+    // Lynx (signalxjs/lynx#1276). lynx-zero's root is the frame and a native
+    // scroll-view inside Content does the scrolling, so:
+    // - the frame's padding moves onto the content (physical — logical
+    //   spellings do not resolve on Android, signalxjs/lynx#1084), so rows
+    //   scroll to the frame's edge instead of clipping at an inset;
+    // - the content's grid is a flex column (lynx has no grid); a short
+    //   transcript sits at the top — `margin-block-start: auto` has nothing
+    //   to push against inside a scroll-view;
+    // - the jump trigger floats in lynx-zero's absolute dock at the frame's
+    //   foot, so it drops `position: sticky` and the negative margin, and
+    //   restates its inline padding physically;
+    // - `:hover` is dropped on touch: the held trigger shows the hover's
+    //   90% darkening (restated per colour — a colour function over
+    //   `--chat-log-fill` cannot bake), with the existing 1px sink;
+    // - the focus rings as `lynxFocus` (lynx#1163), the frame's drawn inside
+    //   like the web's negative offset.
+    targets: {
+        lynx: {
+            parts: {
+                root: {
+                    base: { padding: '0', overflow: 'hidden' },
+                    states: { 'focus-visible': lynxFocusRing('var(--color-base-content)', { inset: true }) },
+                },
+                content: {
+                    base: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        paddingTop: 'var(--space-sm)',
+                        paddingBottom: 'var(--space-sm)',
+                        paddingLeft: 'var(--space-md)',
+                        paddingRight: 'var(--space-md)',
+                    },
+                },
+                'jump-trigger': {
+                    base: {
+                        position: 'relative',
+                        flexDirection: 'row',
+                        paddingLeft: 'var(--space-md)',
+                        paddingRight: 'var(--space-md)',
+                    },
+                    states: {
+                        pressed: { background: 'color-mix(in oklab, var(--color-primary) 90%, black)' },
+                        ...lynxFocus(),
+                    },
+                },
+            },
+            variants: {
+                color: Object.fromEntries(ROLES.map((c) => [c, { 'jump-trigger': { states: {
+                    pressed: { background: `color-mix(in oklab, var(--color-${c}) 90%, black)` },
+                } } }])),
+            },
+        },
+    },
 };
 
 /** daisy radial-progress: --value became --progress-percent; same ring. */
@@ -7976,13 +8250,26 @@ export const navbar: RecipeInput = {
     // so the bar's height ramp is restated as `min-height`; and a lynx flex
     // container is only a row when it says so, so the bar and its three
     // sections spell `flex-direction: row`.
+    //
+    // No section squeezes a word (signalxjs/lynx#1274, zero#499). On the web
+    // `flex: 1 1 0%` is floored by the flex item's automatic minimum (its
+    // min-content width), so "Acme" never breaks. Lynx's flex layout has no
+    // automatic minimum, and its `min-width` takes no intrinsic keyword, so
+    // a zero basis shrank the start below its text and the `<text>` wrapped
+    // per character ("Acm / e"). On lynx the ends start from their content
+    // (`flex-basis: auto`), never shrink, and share the slack equally; the
+    // centre takes daisy's own `flex-shrink: 0`. A bar too narrow for its
+    // content overflows whole, as daisy's does — the btn rule (lynx#1165).
+    // The cost: with a centre and unequal ends, the centre sits off-centre
+    // by half the ends' difference (the web's is exact until a section
+    // reaches its min-content).
     targets: {
         lynx: {
             parts: {
                 root: { base: { flexDirection: 'row', minHeight: '4rem' } },
-                start: { base: { flexDirection: 'row' } },
-                center: { base: { flexDirection: 'row' } },
-                end: { base: { flexDirection: 'row' } },
+                start: { base: { flexDirection: 'row', flexBasis: 'auto', flexShrink: '0' } },
+                center: { base: { flexDirection: 'row', flexShrink: '0' } },
+                end: { base: { flexDirection: 'row', flexBasis: 'auto', flexShrink: '0' } },
             },
             variants: {
                 size: {
@@ -8932,11 +9219,68 @@ export const drawer: RecipeInput = {
                 },
             },
         },
-        // The btn paddings, restated physically — see `lynxBtnPad` (#1084).
+        // The btn paddings, restated physically — see `lynxBtnPad` (#1084) —
+        // and the btns' press rendering (`lynxBtnPressed`), as dialog wears
+        // them. The edge sheet (signalxjs/lynx#1277): lynx-zero lays the
+        // panel on its edge with flexbox inside the backdrop, so the sheet
+        // stays in flow (`position: relative`, never `fixed`) and sizes to
+        // it — no viewport units, which lynx does not resolve against the
+        // overlay outlet. The skin keeps the cap, the corners and the slide.
         lynx: {
+            keyframes: {
+                // `translate` is Android-asymmetric (#1084): the travel is a
+                // transform function, one per edge.
+                'zero-daisy-drawer-in-start': 'from { transform: translateX(-100%); } to { transform: translateX(0); }',
+                'zero-daisy-drawer-in-end': 'from { transform: translateX(100%); } to { transform: translateX(0); }',
+                'zero-daisy-drawer-in-top': 'from { transform: translateY(-100%); } to { transform: translateY(0); }',
+                'zero-daisy-drawer-in-bottom': 'from { transform: translateY(100%); } to { transform: translateY(0); }',
+            },
             parts: {
-                trigger: { base: lynxBtnPad(4) },
-                close: { base: lynxBtnPad(4) },
+                trigger: { base: { ...lynxBtnPad(4), ...lynxBtnFit }, states: { pressed: lynxBtnPressed, ...lynxFocus() } },
+                close: { base: { ...lynxBtnPad(4), ...lynxBtnFit }, states: { pressed: lynxBtnPressed, ...lynxFocus() } },
+                panel: {
+                    // The cap alone: `min(20rem, 85vw)` has no lynx spelling
+                    // (no min()); lynx-zero states the 85% share inline and
+                    // this caps it — together, the web's width.
+                    base: { '--l-measure': '20rem' },
+                    selectors: {
+                        '&[data-l-dock="sheet"]': {
+                            position: 'relative',
+                            blockSize: 'auto',
+                            maxBlockSize: 'none',
+                        },
+                        // The block edges run full width (the web's `:where()`
+                        // pair, one selector each — no `:where()` on lynx),
+                        // content-sized up to 85% of the outlet.
+                        '&[data-placement="top"]': { '--l-measure': 'none' },
+                        '&[data-placement="bottom"]': { '--l-measure': 'none' },
+                        '&[data-placement="top"][data-l-dock="sheet"]': {
+                            maxBlockSize: '85%',
+                            borderBottomLeftRadius: 'var(--radius-box)',
+                            borderBottomRightRadius: 'var(--radius-box)',
+                        },
+                        '&[data-placement="bottom"][data-l-dock="sheet"]': {
+                            maxBlockSize: '85%',
+                            borderTopLeftRadius: 'var(--radius-box)',
+                            borderTopRightRadius: 'var(--radius-box)',
+                        },
+                        // The slide in from the edge (the web's `translate`
+                        // over `@starting-style`, both dropped here). The
+                        // exit is an unmount on lynx, so only the entry runs.
+                        '&[data-placement="start"][data-l-dock="sheet"][data-state="open"]': {
+                            animation: 'zero-daisy-drawer-in-start var(--duration-slow) var(--ease-standard)',
+                        },
+                        '&[data-placement="end"][data-l-dock="sheet"][data-state="open"]': {
+                            animation: 'zero-daisy-drawer-in-end var(--duration-slow) var(--ease-standard)',
+                        },
+                        '&[data-placement="top"][data-l-dock="sheet"][data-state="open"]': {
+                            animation: 'zero-daisy-drawer-in-top var(--duration-slow) var(--ease-standard)',
+                        },
+                        '&[data-placement="bottom"][data-l-dock="sheet"][data-state="open"]': {
+                            animation: 'zero-daisy-drawer-in-bottom var(--duration-slow) var(--ease-standard)',
+                        },
+                    },
+                },
             },
             variants: { size: lynxBtnSizes('trigger') },
         },
@@ -9136,6 +9480,96 @@ export const table: RecipeInput = {
             },
         },
     },
+    // signalxjs/lynx#1279. Lynx has no table layout: lynx-zero lays the
+    // parts out as flex rows itself. The `hover` modifier has no lynx
+    // answer (a touch screen has no hover), nor has the viewport-width
+    // `@media` of the stacked mode — lynx-zero resolves `stack` in JS and
+    // stamps the parts instead (see `css` below).
+    targets: {
+        lynx: {
+            parts: {
+                // The web's `overflow-x: auto` box: a lynx view clips its
+                // rounded frame; a table of fixed columns scrolls in a
+                // scroll-view lynx-zero renders.
+                root: {
+                    base: { overflow: 'hidden' },
+                    // daisy's ring drawn inside the box, as on the web
+                    // (outline-offset: -2px) — spelled as an inset shadow.
+                    states: { 'focus-visible': lynxFocusRing('var(--color-base-content)', { inset: true }) },
+                },
+                // The muted header ink: the colour function over
+                // `--table-accent` cannot bake (a recipe-local property),
+                // so the default accent's mix is restated here and each
+                // colour's below.
+                'header-cell': { base: { color: 'color-mix(in oklab, var(--color-base-content) 60%, transparent)' } },
+                'cell-label': { base: { color: 'color-mix(in oklab, var(--color-base-content) 60%, transparent)' } },
+                // The web's hover ink, while held; the lynx ring.
+                'sort-trigger': {
+                    base: { flexDirection: 'row' },
+                    states: { pressed: { color: 'var(--table-accent)' }, ...lynxFocus() },
+                },
+                // The mark never takes its width out of the header's word
+                // (signalxjs/lynx#1299): lynx's flex has no automatic
+                // minimum, so the ▲ (kept in layout while unsorted) squeezed
+                // "Name" into "Nam / e" at xl. lynx-zero holds the label's
+                // `<text>` at its content width; a header too narrow for
+                // both overflows whole, as the web's column grows.
+                'sort-indicator': { base: { flexShrink: '0' } },
+            },
+            variants: {
+                color: Object.fromEntries(ROLES.map((c) => {
+                    const muted = `color-mix(in oklab, ${roleInk(c)} 60%, transparent)`;
+                    return [c, {
+                        'header-cell': { base: { color: muted } },
+                        'cell-label': { base: { color: muted } },
+                    }];
+                })),
+            },
+            // lynx-zero rendering details, not modifiers an author sets:
+            // - `stripe`: lynx has no `:nth-child`, so the body stamps its
+            //   even, unselected rows (mount order) under `zebra`.
+            // - `held`: the unsorted mark the web reveals under a hovered or
+            //   keyboard-focused trigger, shown while the trigger is held.
+            // - `stacked`: the stacked mode's card chrome (the web's
+            //   below-breakpoint rules). Zero widths and paddings keep a
+            //   var() so they beat the var-bearing base values (lynx expands
+            //   var() declarations after the cascade, signalxjs/lynx#1161);
+            //   the root keeps its base-100 fill (a var-free transparent
+            //   would lose the same way).
+            css: `
+.zx-table__root.zx-m-stacked {
+    border-width: calc(var(--border) * 0);
+    border-radius: calc(var(--radius-box) * 0);
+}
+.zx-table__caption.zx-m-stacked {
+    padding-left: calc(var(--table-pad-inline) * 0);
+    padding-right: calc(var(--table-pad-inline) * 0);
+}
+.zx-table__row.zx-m-stacked {
+    border: var(--border) solid var(--color-base-200);
+    border-radius: var(--radius-box);
+    background: var(--color-base-100);
+    padding: var(--space-sm) var(--table-pad-inline);
+    margin-bottom: var(--space-md);
+}
+.zx-table__row.zx-m-stacked.zx-f-selected {
+    background: var(--color-base-300);
+}
+.zx-table__cell.zx-m-stacked {
+    padding-left: calc(var(--table-pad-inline) * 0);
+    padding-right: calc(var(--table-pad-inline) * 0);
+    padding-top: var(--space-xs);
+    padding-bottom: var(--space-xs);
+}
+.zx-table__row.zx-m-stripe {
+    background: var(--color-base-200);
+}
+.zx-table__sort-indicator.zx-m-held.zx-s-none {
+    opacity: 0.6;
+}
+`,
+        },
+    },
 };
 
 /**
@@ -9302,6 +9736,73 @@ export const fileUpload: RecipeInput = {
             xl: { root: { base: { '--fu-pad': 'calc(var(--space-xl) * 1.25)', '--fu-font': 'var(--text-md)' } } },
         },
     },
+    // Lynx (signalxjs/lynx#1276):
+    // - lynx has no grid: the root and the item list are flex columns, and
+    //   the stretched parts (dropzone, item list) say so with `align-self`;
+    //   the rows (trigger, item) state `flex-direction: row`;
+    // - the dropzone centres its words in a column (lynx text alignment is
+    //   the text's own), and its highlighted wash — a colour function over
+    //   `--fu-accent`, which cannot bake — is restated per colour over the
+    //   role. lynx never drives `highlighted` (no drag source); it shows
+    //   through `ForceStates` in the gallery;
+    // - `:hover` is dropped on touch: the held trigger shows daisy's
+    //   base-300 wash + 1px sink (`lynxBtnPressed`, in place of the
+    //   standalone `translate`, which Android does not resolve), and the
+    //   held × and clear show the ghost's base-200 wash;
+    // - the focus rings as `lynxFocus` (lynx#1163).
+    targets: {
+        lynx: {
+            parts: {
+                root: { base: { display: 'flex', flexDirection: 'column', alignItems: 'flex-start' } },
+                trigger: {
+                    base: { flexDirection: 'row' },
+                    states: { pressed: lynxBtnPressed, ...lynxFocus() },
+                },
+                dropzone: {
+                    base: { alignSelf: 'stretch', display: 'flex', flexDirection: 'column', alignItems: 'center' },
+                    states: {
+                        highlighted: { background: 'color-mix(in oklab, var(--color-primary) 8%, var(--color-base-100))' },
+                    },
+                },
+                'item-group': {
+                    base: { alignSelf: 'stretch', display: 'flex', flexDirection: 'column' },
+                },
+                item: { base: { flexDirection: 'row' } },
+                // Only the name gives way in a narrow row (signalxjs/lynx#1294).
+                // Lynx's flex has no automatic minimum, so every item
+                // shrank below its content: "1.5 kB" wrapped to two lines
+                // and the × squeezed into an oval. The size and the × keep
+                // their content width, as the web's do; the name
+                // (`flex: 1 1 auto; min-width: 0`) ellipsizes.
+                'item-size': { base: { flexShrink: '0' } },
+                'item-remove': {
+                    base: { flexShrink: '0' },
+                    states: { pressed: { background: 'var(--color-base-200)' }, ...lynxFocus() },
+                },
+                'clear-trigger': {
+                    states: { pressed: { background: 'var(--color-base-200)' }, ...lynxFocus() },
+                },
+            },
+            variants: {
+                color: Object.fromEntries(ROLES.map((c) => [c, { dropzone: { states: {
+                    highlighted: { background: `color-mix(in oklab, var(--color-${c}) 8%, var(--color-base-100))` },
+                } } }])),
+            },
+        },
+    },
+};
+
+/** A carousel nav circle on lynx: the glyph centred as flex (no `grid`). */
+const carouselTriggerLynx: CssProps = {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+};
+
+/** A held carousel nav circle on lynx: daisy's hover wash plus the 1px sink, and the lynx ring. */
+const carouselTriggerLynxStates: Record<string, CssProps> = {
+    pressed: { background: 'var(--color-base-300)', transform: 'translateY(1px)' },
+    ...lynxFocus(),
 };
 
 /**
@@ -9454,14 +9955,60 @@ export const carousel: RecipeInput = {
     // spellings resolve on iOS but not on Android (measured,
     // signalxjs/lynx#1084), so the emitter refuses them. Physical is the
     // lynx target's norm — no RTL flow there, so `start` IS left.
+    //
+    // signalxjs/lynx#1279 — the rest of the lynx shape:
+    // - `grid` does not lay out on lynx: the root is a flex column, and a
+    //   trigger centres its glyph as flex.
+    // - The dot: the web draws it on `::before` inside a
+    //   `max(dot, 1.5rem)` button; lynx has neither pseudo-elements nor
+    //   `max()`, so lynx-zero renders the dot AS the indicator (its touch
+    //   area widened with `hit-slop`) and the ring and the active fill ride
+    //   the part.
+    // - The web sinks a held trigger with the standalone `translate`,
+    //   which Android ignores (#1084): a transform function here, over
+    //   daisy's hover wash (no hover on touch).
+    // - Rings: lynx's outline ignores radius and has no offset (#1163).
+    // No replacement for the viewport's `:focus-visible` ring: there is no
+    // keyboard focus on lynx, and the part declares no flag to key it on.
     targets: {
         lynx: {
             parts: {
+                root: { base: { display: 'flex', flexDirection: 'column' } },
                 'prev-trigger': {
-                    base: { top: 'calc(50% - var(--carousel-nav) / 2)', left: 'var(--space-sm)' },
+                    base: {
+                        top: 'calc(50% - var(--carousel-nav) / 2)',
+                        left: 'var(--space-sm)',
+                        ...carouselTriggerLynx,
+                    },
+                    states: carouselTriggerLynxStates,
                 },
                 'next-trigger': {
-                    base: { top: 'calc(50% - var(--carousel-nav) / 2)', right: 'var(--space-sm)' },
+                    base: {
+                        top: 'calc(50% - var(--carousel-nav) / 2)',
+                        right: 'var(--space-sm)',
+                        ...carouselTriggerLynx,
+                    },
+                    states: carouselTriggerLynxStates,
+                },
+                'indicator-group': { base: { flexDirection: 'row', alignItems: 'center' } },
+                indicator: {
+                    base: {
+                        display: 'flex',
+                        width: 'var(--carousel-dot)',
+                        height: 'var(--carousel-dot)',
+                        flexShrink: '0',
+                        // Longhands: the ring's colour bakes per theme only
+                        // on its own (a shorthand mixing it with the
+                        // --border calc cannot).
+                        borderWidth: 'calc(var(--border) * 2)',
+                        borderStyle: 'solid',
+                        borderColor: 'color-mix(in oklab, var(--color-base-content) 70%, transparent)',
+                        borderRadius: '9999px',
+                    },
+                    states: {
+                        active: { background: 'var(--carousel-accent)', borderColor: 'var(--carousel-accent)' },
+                        ...lynxFocus(),
+                    },
                 },
             },
         },