@sigx/zero-daisyui 0.6.0 → 0.7.0

package/dist/recipes.js

@@ -1,4 +1,4 @@
-import { axisRoles, tableStackAt } from '@sigx/zero-kit/define';
+import { axisRoles, popupArrow, popupArrowHost, tableStackAt } from '@sigx/zero-kit/define';
 import { roles, tokens } from './tokens.js';
 /**
  * Every role a consumer can pass as `color`, derived from the declaration
@@ -289,7 +289,9 @@ export const tabs = {
         },
         // daisy draws each flavor's active mark on the tab itself (the
         // underline, the lift, the pill) and none of them slides, so a
-        // `Tabs.Indicator` renders nothing here (#283).
+        // `Tabs.Indicator` renders nothing here (#283). On lynx, which has
+        // no pseudo-elements, the `border` flavor's underline is drawn on
+        // this part instead (see `targets.lynx`).
         indicator: { base: { display: 'none' } },
         panel: {
             base: { fontSize: 'var(--text-md)' },
@@ -491,11 +493,17 @@ export const tabs = {
     targets: {
         lynx: {
             parts: {
-                // The default active ink — base-content, exactly what the
-                // shared `states.active.color` paints. One class, so any
+                // No hover on a touch platform: the held tab takes the ink
+                // daisy's hover gives it.
+                tab: { states: { pressed: { color: 'var(--color-base-content)' } } },
+                // The list is the indicator's containing block.
+                list: { base: { position: 'relative' } },
+                // The underline's ink (read by the `border` flavor below) —
+                // base-content by default, exactly what the shared
+                // `states.active.color` paints on the tab. One class, so any
                 // color-axis definition below (host + two classes, baked per
                 // theme) wins on specificity.
-                tab: { base: { '--tab-active-ink': 'var(--color-base-content)' } },
+                indicator: { base: { '--tab-active-ink': 'var(--color-base-content)' } },
             },
             variants: {
                 // `currentColor` never resolves on lynx (measured on device
@@ -505,18 +513,28 @@ export const tabs = {
                 // theme colors through color-mix(), which the emitter bakes
                 // once per theme — the same per-color/per-theme literal the
                 // active `color:` rules already land as.
-                color: Object.fromEntries(ROLES.map((c) => [c, { tab: { base: { '--tab-active-ink': roleInk(c) } } }])),
+                color: Object.fromEntries(ROLES.map((c) => [c, { indicator: { base: { '--tab-active-ink': roleInk(c) } } }])),
                 variant: {
                     // The underline is a ::before on the web, which lynx
-                    // drops — redrawn as a real bottom border on the tab
-                    // itself (transparent at rest so activation never moves
-                    // the row). The active ink rides `--tab-active-ink`
-                    // above — a plain var() chain, device-proven — instead
-                    // of `currentColor`, which lynx never resolves.
+                    // drops. It is redrawn on the `indicator` part (zero#324),
+                    // which lynx-zero renders in every list and positions
+                    // over the active tab from measured geometry (the web's
+                    // `--tabs-indicator-*` properties are web-only). The part
+                    // IS the tab's box, so daisy's bar is its bottom edge:
+                    // 3px, 80% wide and centred, like `left: 10%; width: 80%`
+                    // on the web. The ink rides `--tab-active-ink` — a plain
+                    // var() chain, device-proven — instead of `currentColor`,
+                    // which lynx never resolves.
                     border: {
-                        tab: {
-                            base: { borderBottom: '3px solid transparent' },
-                            states: { active: { borderBottomColor: 'var(--tab-active-ink)' } },
+                        indicator: {
+                            base: {
+                                display: 'flex',
+                                boxSizing: 'border-box',
+                                borderBottomWidth: '3px',
+                                borderBottomStyle: 'solid',
+                                borderBottomColor: 'var(--tab-active-ink)',
+                                transform: 'scaleX(0.8)',
+                            },
                         },
                     },
                     // `min()` does not exist on lynx (signalxjs/lynx#1066) and
@@ -864,6 +882,10 @@ export const switchRecipe = {
                         // No currentColor on this target — the ink is named
                         // directly, and `checked` moves border + fill below.
                         border: 'var(--border) solid var(--switch-ink)',
+                        // daisy's 1px inset depth line along the track's top
+                        // edge — `currentColor` at `--depth` × 10% on the
+                        // web, the theme's own depth shade here.
+                        boxShadow: '0 1px var(--depth-shade) inset',
                         userSelect: 'none',
                         transition: 'border-color var(--duration-slow) var(--ease-standard), '
                             + 'background-color var(--duration-normal) var(--ease-standard)',
@@ -884,6 +906,12 @@ export const switchRecipe = {
                         height: 'calc(var(--switch-size) - (var(--border) + var(--switch-p)) * 2)',
                         borderRadius: 'var(--radius-selector)',
                         backgroundColor: 'var(--switch-ink)',
+                        // daisy's knob relief (`.toggle:before`): a shade
+                        // along the bottom edge, a sheen across the top, and
+                        // a 1px drop — the web's `currentColor` drop spelled
+                        // as the theme's depth shade. The noise layer has no
+                        // lynx spelling and stays web-only.
+                        boxShadow: '0 -1px var(--depth-shade) inset, 0 8px 0 -4px var(--depth-sheen) inset, 0 1px var(--depth-shade)',
                         transition: 'transform var(--duration-normal) var(--ease-standard), '
                             + 'background-color var(--duration-instant) var(--ease-standard)',
                     },
@@ -990,6 +1018,21 @@ const lynxBtnSizes = (part) => ({
     lg: { [part]: { base: lynxBtnPad(5) } },
     xl: { [part]: { base: lynxBtnPad(6) } },
 });
+/**
+ * The press rendering of the overlay btns (dialog, popover), for their
+ * `targets.lynx` sections. The web answers a pointer with `:hover`, which
+ * the lynx emitter drops (a touch platform), and these parts' `pressed`
+ * flag — stamped by the lynx runtime on every touch — had no rule, so a
+ * tap showed nothing (signalxjs/lynx#1146). daisy's `:hover` wash plus the
+ * btn's 1px sink, the same pair `button` paints for its own `pressed`. A
+ * colour variant restates the background after the states at equal
+ * specificity, so a coloured trigger keeps its fill and sinks.
+ */
+const lynxBtnPressed = {
+    background: 'var(--color-base-300)',
+    transform: 'translateY(1px)',
+    boxShadow: 'none',
+};
 export const dialog = {
     component: 'dialog',
     // Public to a design system derived from this one (#73).
@@ -1081,14 +1124,16 @@ export const dialog = {
     // reach and the trigger is the whole story here.
     variants: { color: btnColors(), size: btnSizes },
     // The btn paddings and the footer's push-down, restated physically —
-    // see `lynxBtnPad` for the #1084 verdict this answers.
+    // see `lynxBtnPad` for the #1084 verdict this answers — and the btns'
+    // press rendering (`lynxBtnPressed`). The footer states its row: on lynx
+    // a row container says so next to `display: flex`.
     targets: {
         lynx: {
             parts: {
-                trigger: { base: lynxBtnPad(4) },
-                close: { base: lynxBtnPad(4) },
-                cancel: { base: lynxBtnPad(4) },
-                footer: { base: { marginTop: 'var(--space-2xl)' } },
+                trigger: { base: lynxBtnPad(4), states: { pressed: lynxBtnPressed } },
+                close: { base: lynxBtnPad(4), states: { pressed: lynxBtnPressed } },
+                cancel: { base: lynxBtnPad(4), states: { pressed: lynxBtnPressed } },
+                footer: { base: { marginTop: 'var(--space-2xl)', flexDirection: 'row' } },
             },
             variants: { size: lynxBtnSizes('trigger') },
         },
@@ -1102,6 +1147,21 @@ const floatingPanel = {
     borderRadius: 'var(--radius-box)',
     boxShadow: 'var(--shadow-lg)',
 };
+/**
+ * The arrow a floating surface grows toward its anchor (#279), in the
+ * surface's own paint: the dropdown's base-100 and border for popover and
+ * menu, the tooltip's borderless neutral for the tooltip — daisy's
+ * `tooltip` draws exactly that tail under its bubble. Web-only (placed by
+ * the runtime's `--arrow-x`/`--arrow-y`), so it rides `targets.web` with
+ * the popup's permission to let it out.
+ */
+const floatingArrow = (scope, paint, size = '0.625rem') => ({
+    parts: {
+        popup: { selectors: popupArrowHost(scope) },
+        arrow: popupArrow(scope, { size, paint }),
+    },
+});
+const panelArrowPaint = { background: 'var(--color-base-100)', border: 'var(--border) solid var(--color-base-300)' };
 /**
  * daisy's dropdown menu for a listbox, sized by the geometry the
  * anchored-position strategy publishes (#278): at least the width of the
@@ -1138,6 +1198,14 @@ export const popover = {
         title: {
             base: { margin: '0 0 var(--space-md)', fontSize: 'var(--text-md)', fontWeight: 'var(--weight-bold)' },
         },
+        // The modal's muted body line, at the dropdown's tighter rhythm.
+        description: {
+            base: {
+                margin: '0 0 var(--space-lg)',
+                fontSize: 'var(--text-sm)',
+                color: 'color-mix(in oklab, var(--color-base-content) 75%, transparent)',
+            },
+        },
         close: {
             base: { ...btn, height: 'calc(var(--size-field) * 8)', paddingInline: 'calc(var(--size-field) * 3)', fontSize: 'var(--text-xs)' },
             states: {
@@ -1149,12 +1217,14 @@ export const popover = {
     },
     // Trigger-carried axes — same wiring as dialog, same reason.
     variants: { color: btnColors(), size: btnSizes },
-    // The btn paddings, restated physically — see `lynxBtnPad` (#1084).
+    // The btn paddings, restated physically — see `lynxBtnPad` (#1084) —
+    // and the btns' press rendering (`lynxBtnPressed`).
     targets: {
+        web: floatingArrow('popover', panelArrowPaint),
         lynx: {
             parts: {
-                trigger: { base: lynxBtnPad(4) },
-                close: { base: lynxBtnPad(3) },
+                trigger: { base: lynxBtnPad(4), states: { pressed: lynxBtnPressed } },
+                close: { base: lynxBtnPad(3), states: { pressed: lynxBtnPressed } },
             },
             variants: { size: lynxBtnSizes('trigger') },
         },
@@ -1196,6 +1266,7 @@ export const tooltip = {
     variants: { color: btnColors(), size: btnSizes },
     // The btn paddings, restated physically — see `lynxBtnPad` (#1084).
     targets: {
+        web: floatingArrow('tooltip', { background: 'var(--color-neutral)' }, '0.5rem'),
         lynx: {
             parts: { trigger: { base: lynxBtnPad(4) } },
             variants: { size: lynxBtnSizes('trigger') },
@@ -1348,6 +1419,7 @@ export const menu = {
     variants: { color: btnColors(), size: btnSizes },
     // The btn paddings, restated physically — see `lynxBtnPad` (#1084).
     targets: {
+        web: floatingArrow('menu', panelArrowPaint),
         lynx: {
             parts: { trigger: { base: lynxBtnPad(4) } },
             variants: { size: lynxBtnSizes('trigger') },
@@ -1403,6 +1475,60 @@ export const field = {
         },
     },
 };
+/**
+ * Fieldset (#285), daisyUI 5's `.fieldset` / `.fieldset-legend`: a
+ * one-column grid with a tight row gap and a little block padding, no frame
+ * of its own (daisy draws one only when the app adds `border`), and a
+ * semibold legend with block padding standing in for its margin. The UA
+ * `min-inline-size: min-content` is undone so a wide control cannot push the
+ * group past its column. Colour accents the legend through `roleInk`, the
+ * Field way.
+ */
+export const fieldset = {
+    component: 'fieldset',
+    tokens: { '--fieldset-accent': 'var(--color-base-content)' },
+    parts: {
+        root: {
+            base: {
+                display: 'grid',
+                gridTemplateColumns: '1fr',
+                gridAutoRows: 'max-content',
+                gap: 'var(--space-sm)',
+                minInlineSize: '0',
+                margin: '0',
+                paddingBlock: 'var(--space-xs)',
+                paddingInline: '0',
+                border: 'none',
+            },
+        },
+        legend: {
+            base: {
+                paddingBlock: 'var(--space-sm)',
+                paddingInline: '0',
+                fontSize: 'var(--text-sm)',
+                fontWeight: 'var(--weight-semibold)',
+                color: 'var(--fieldset-accent)',
+            },
+            states: {
+                disabled: { opacity: 'var(--disabled-opacity)' },
+                invalid: { color: roleInk('error') },
+            },
+        },
+    },
+    variants: {
+        color: Object.fromEntries(ROLES.map((c) => [c, { root: { base: {
+                        '--fieldset-accent': roleInk(c),
+                    } } }])),
+        size: {
+            xs: { legend: { base: { fontSize: 'var(--text-xs)' } } },
+            sm: { legend: { base: { fontSize: 'var(--text-xs)' } } },
+            // `md` is the un-attributed render.
+            md: {},
+            lg: { legend: { base: { fontSize: 'var(--text-md)' } } },
+            xl: { legend: { base: { fontSize: 'var(--text-lg)' } } },
+        },
+    },
+};
 /**
  * daisy's tick, drawn by a clip-path that GROWS.
  *
@@ -1900,9 +2026,13 @@ export const progress = {
                 transition: 'width var(--duration-slow) var(--ease-standard)',
             },
             states: {
-                // `complete` is a semantic state, not an accent: it stays
-                // success regardless of the colour variant, on purpose.
-                complete: { background: progressFill('success', 55) },
+                // `complete` keeps the colour axis. daisyUI 5 has no complete
+                // tint — a full `progress-primary` stays primary — and a
+                // `color="secondary"` bar that turns green at 100% reads as a
+                // bug, not as meaning (signalxjs/lynx#1144). A caller who wants
+                // "done" to look like success says so: `color="success"`.
+                // Declared equal to `loading` in `sameAs` below.
+                complete: {},
                 loading: {},
                 indeterminate: { width: '40%', animation: 'zero-daisy-indeterminate 1.2s ease-in-out infinite' },
             },
@@ -1938,6 +2068,8 @@ export const progress = {
     // so the manifest states the default for runtimes with no `:not()`
     // fallback (the lynx target; signalxjs/lynx#1070).
     defaultVariants: { color: 'primary', size: 'md' },
+    // A finished bar is a full bar of the same ink (see `complete` above).
+    sameAs: { root: { complete: 'loading' }, range: { complete: 'loading' } },
     keyframes: {
         // Logical, so the sweep runs the way the bar fills — `margin-inline-start`
         // is animatable and direction-aware on its own. The determinate `width`,
@@ -1958,6 +2090,8 @@ export const progress = {
         },
     },
 };
+/** The slider's deepened fill — the web's `--slider-fill` mix, for a given accent. */
+const sliderFill = (accent) => `color-mix(in oklab, ${accent} 90%, var(--color-base-content))`;
 export const slider = {
     component: 'slider',
     // daisy's `.range` metrics: the thumb is `--range-thumb-size`
@@ -2266,29 +2400,94 @@ export const slider = {
             },
         },
         lynx: {
+            // The web's deepened fill, theme-baked: `color-mix()` over theme
+            // colours cannot resolve on device, but the emitter restates a
+            // colour function per theme as literals (as `progress` does for
+            // its accent), so each colour step gets the same 90/10 mix the
+            // web track and knob ring wear. Bound on the root like
+            // `--slider-accent`, rebound by `color` below and by `invalid`
+            // on the control (which wraps the rail on lynx).
+            tokens: { '--slider-fill': sliderFill('var(--color-primary)') },
+            variants: {
+                color: Object.fromEntries(ROLES.map((c) => [c, { root: { base: {
+                                '--slider-fill': sliderFill(`var(--color-${c})`),
+                            } } }])),
+            },
             parts: {
+                // Vertical (lynx#1144): the lynx runtime positions the moving
+                // parts itself — `top` percentages, the knob centred by
+                // `left: 50%` plus the base's `translateY(-50%)` and
+                // negative `margin-left` — so the class rules only turn the
+                // channel upright: the control is a thumb-wide column of
+                // daisy's rail length, the track fills it.
+                root: {
+                    selectors: {
+                        '&[data-orientation="vertical"]': { width: 'auto', alignItems: 'center' },
+                    },
+                },
+                control: {
+                    states: {
+                        invalid: { '--slider-fill': sliderFill('var(--color-error)') },
+                    },
+                    selectors: {
+                        '&[data-orientation="vertical"]': {
+                            display: 'flex',
+                            flexDirection: 'row',
+                            justifyContent: 'center',
+                            width: 'var(--slider-thumb-size)',
+                            height: 'calc(var(--size-selector) * 40)',
+                        },
+                    },
+                },
                 track: {
                     // The web track's `margin-block` breathing room,
                     // restated physically: logical spellings resolve on iOS
                     // but not on Android (measured, signalxjs/lynx#1084), so
                     // the emitter refuses them. Physical is the lynx
                     // target's norm — no RTL flow there.
+                    //
+                    // daisy's channel radius is the selector radius (the
+                    // native control's runnable-track), not a pill.
                     base: {
                         marginTop: 'calc((var(--slider-thumb-size) - var(--slider-track-size)) / 2)',
                         marginBottom: 'calc((var(--slider-thumb-size) - var(--slider-track-size)) / 2)',
+                        borderRadius: 'var(--radius-selector)',
+                    },
+                    selectors: {
+                        '&[data-orientation="vertical"]': {
+                            width: 'var(--slider-track-size)',
+                            height: '100%',
+                            marginTop: '0',
+                            marginBottom: '0',
+                        },
                     },
                 },
                 mark: {
-                    // Same #1084 verdict: the tick labels hang below the
-                    // track off a physical padding.
-                    base: { paddingTop: 'calc(var(--slider-track-size) + var(--space-2xs))' },
+                    // The web draws the tick with `::before`, which lynx has
+                    // no projection for — the mark was an empty, invisible
+                    // box. Here the mark IS the tick: a 2px rule across the
+                    // channel, centred on its runtime-set `left` percent.
+                    // (Lynx marks carry no label text.)
+                    base: {
+                        top: '0',
+                        width: '2px',
+                        height: 'var(--slider-track-size)',
+                        marginLeft: '-1px',
+                        paddingTop: '0',
+                        backgroundColor: 'var(--color-base-content)',
+                    },
+                    selectors: {
+                        '&[data-orientation="vertical"]': {
+                            left: '0',
+                            width: 'var(--slider-track-size)',
+                            height: '2px',
+                            marginLeft: '0',
+                            marginTop: '-1px',
+                        },
+                    },
                 },
                 range: {
-                    // The web fill deepens the accent 90/10 toward
-                    // base-content (`progressFill`'s recipe); the plain
-                    // accent — a var() chain, proven working on device — is
-                    // the closest lynx-expressible equivalent.
-                    base: { background: 'var(--slider-accent)' },
+                    base: { background: 'var(--slider-fill)', borderRadius: 'var(--radius-selector)' },
                 },
                 thumb: {
                     // daisy's real range thumb, ported from daisyUI 5
@@ -2299,13 +2498,16 @@ export const slider = {
                     // `--range-thumb` defaults to `var(--color-base-100)`,
                     // `--range-p` is daisy's literal `.25rem` (deliberately
                     // not the theme's size token), and the border ink is the
-                    // accent (currentColor on a daisy `.range-*` IS the
-                    // accent role) — because on lynx a named value is a
-                    // var-chain fewer to resolve. daisy paints the progress
-                    // fill itself as a 100cqw box-shadow thrown off this
-                    // thumb — a native-input trick with no lynx equivalent;
-                    // the composed `.zx-slider__range` box above IS that
-                    // fill here, so the knob only needs its own two paints.
+                    // deepened fill the web's native thumb ring reads. daisy
+                    // paints the progress fill itself as a 100cqw box-shadow
+                    // thrown off this thumb — a native-input trick with no
+                    // lynx equivalent; the composed `.zx-slider__range` box
+                    // above IS that fill here, so the knob only needs its own
+                    // paints. Its radius is daisy's formula minus the min()
+                    // clamp lynx cannot evaluate — exact for every shipped
+                    // theme (all set `--radius-selector` ≥ .25rem / 3) — and
+                    // it wears daisy's depth shading (`currentColor`'s 10%
+                    // outer shadow spelled as the theme's shade).
                     //
                     // The centering geometry is restated physically beside
                     // the paint: `inset-block-start`/`translate`/
@@ -2316,7 +2518,9 @@ export const slider = {
                     // proven on both platforms.
                     base: {
                         background: 'var(--color-base-100)',
-                        border: '0.25rem solid var(--slider-accent)',
+                        border: '0.25rem solid var(--slider-fill)',
+                        borderRadius: 'calc(var(--radius-selector) + 0.25rem)',
+                        boxShadow: '0 -1px var(--depth-shade) inset, 0 8px 0 -4px var(--depth-sheen) inset, 0 1px var(--depth-shade)',
                         top: '50%',
                         transform: 'translateY(-50%)',
                         marginLeft: 'calc(var(--slider-thumb-size) / -2)',
@@ -2328,7 +2532,18 @@ export const slider = {
 };
 export const accordion = {
     component: 'accordion',
-    targets: disclosureExit('accordion'),
+    targets: {
+        ...disclosureExit('accordion'),
+        lynx: {
+            parts: {
+                // No hover on a touch platform: the held trigger takes daisy's
+                // hover fill. The ::after chevron has no lynx counterpart (no
+                // pseudo-elements, and the anatomy declares no part for it) —
+                // an app draws its own glyph in the trigger.
+                trigger: { states: { pressed: { background: 'var(--color-base-200)' } } },
+            },
+        },
+    },
     // Same accent grammar as collapsible: the open heading's ink, defaulting
     // to base-content so the un-attributed render is unchanged.
     tokens: { '--accordion-accent': 'var(--color-base-content)' },
@@ -2609,7 +2824,23 @@ export const select = {
         web: { parts: { popup: { base: anchoredListbox } } },
         lynx: {
             parts: {
-                trigger: { base: lynxBtnPad(4) },
+                // daisy's `.select` is `width: clamp(3rem, 20rem, 100%)`: 20rem,
+                // never wider than its container. lynx has no `clamp()`, so the
+                // same bounds are spelled out — and the base's 13rem floor
+                // comes down to daisy's 3rem, or the trigger overflowed any
+                // cell narrower than 208px (signalxjs/lynx#1146). The root
+                // caps too, so a shrink-wrapped root cannot push it back out.
+                root: { base: { maxWidth: '100%' } },
+                trigger: {
+                    base: { ...lynxBtnPad(4), width: '20rem', maxWidth: '100%', minWidth: '3rem' },
+                    // The web's `:hover` border is dropped on a touch
+                    // platform; a press gets a wash instead — a background,
+                    // so it never fights the open/invalid border inks.
+                    states: { pressed: { background: 'var(--color-base-200)' } },
+                },
+                // A touch list has no highlight: the pressed item takes the
+                // highlighted item's wash.
+                item: { states: { pressed: { background: 'var(--color-base-200)' } } },
                 'clear-trigger': { base: { top: 'var(--space-xs)', bottom: 'var(--space-xs)', right: 'calc(var(--size-field) * 4 + 1em + var(--space-xs))', minWidth: '1.5rem' } },
             },
             variants: {
@@ -2633,6 +2864,22 @@ export const select = {
  */
 const BTN_STEPS = { xs: 6, sm: 8, md: 10, lg: 12, xl: 14 };
 const btnHeight = (step) => `calc(var(--size-field) * ${BTN_STEPS[step]})`;
+/**
+ * daisy 5's disabled btn, for the lynx target (signalxjs/lynx#1143). The web
+ * fades the whole button (`opacity: var(--disabled-opacity)`, 0.3 on the
+ * dark themes), which on device left a solid button's label barely legible.
+ * daisy's own `.btn:disabled` paints instead: a base-content wash (not on
+ * ghost/link), a transparent border, no shadow, and a muted base-content
+ * label. daisy mutes that label to 20%; this keeps it at 50%, still plainly
+ * inert but readable on a phone at arm's length.
+ */
+const lynxBtnDisabled = {
+    opacity: '1',
+    background: 'color-mix(in oklab, var(--color-base-content) 10%, transparent)',
+    color: 'color-mix(in oklab, var(--color-base-content) 50%, transparent)',
+    borderColor: 'transparent',
+    boxShadow: 'none',
+};
 export const button = {
     component: 'button',
     // Public to a design system derived from this one (#73).
@@ -2846,11 +3093,39 @@ export const button = {
     },
     defaultVariants: { color: 'primary', variant: 'solid', size: 'md' },
     keyframes: { 'zero-daisyui-btn-spin': 'to { transform: rotate(360deg) }' },
-    // The icon chips' zeroed inline padding, restated physically: logical
-    // spellings resolve on iOS but not on Android (measured,
-    // signalxjs/lynx#1084), so the emitter refuses them.
     targets: {
         lynx: {
+            parts: {
+                // The ring, restated: `currentColor` never resolves on lynx
+                // (signalxjs/lynx#1079) and the logical sizes/edge are
+                // unproven there, so the lynx ring is physical longhands in
+                // the variant's own ink (the variants below pick it).
+                spinner: {
+                    base: {
+                        width: '1em',
+                        height: '1em',
+                        border: 'calc(var(--border) * 2) solid var(--btn-ink)',
+                        borderTopColor: 'transparent',
+                    },
+                },
+                root: { states: { disabled: lynxBtnDisabled } },
+            },
+            variants: {
+                // The baked disabled paint above outranks every variant's fill
+                // (the theme host adds a class), but its plain declarations
+                // do not: outline/dash restate the border, ghost/link drop
+                // the wash (as in daisy).
+                variant: {
+                    solid: { spinner: { base: { borderColor: 'var(--btn-on-accent)', borderTopColor: 'transparent' } } },
+                    outline: { root: { states: { disabled: { borderColor: 'transparent' } } } },
+                    dash: { root: { states: { disabled: { borderColor: 'transparent' } } } },
+                    ghost: { root: { states: { disabled: { background: 'transparent' } } } },
+                    link: { root: { states: { disabled: { background: 'transparent' } } } },
+                },
+            },
+            // The icon chips' zeroed inline padding, restated physically: logical
+            // spellings resolve on iOS but not on Android (measured,
+            // signalxjs/lynx#1084), so the emitter refuses them.
             modifiers: {
                 square: { root: { base: { paddingLeft: '0', paddingRight: '0' } } },
                 circle: { root: { base: { paddingLeft: '0', paddingRight: '0' } } },
@@ -3089,21 +3364,66 @@ export const toast = {
     // signalxjs/lynx#1070. No `color` default: the un-attributed toast is a
     // neutral base-200 surface, outside the color vocabulary.
     defaultVariants: { size: 'md' },
-    // The corner placements' physical anchors: logical inset 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 and `end` IS right.
     targets: {
         lynx: {
             parts: {
+                // The viewport is a full-width strip on lynx (the runtime pins
+                // it to the outlet's top or bottom edge). What the web gets
+                // from `:popover-open` and `min(24rem, 100vw)` is restated:
+                // flex (a lynx view defaults to linear layout, which ignores
+                // flex-direction and gap), and the cards aligned to the
+                // placement's edge. The centred pair's `left: 50%` +
+                // `translateX(-50%)` pull-back is for a shrink-wrapped popover;
+                // on the strip it shifted everything half a width left, so it
+                // is cancelled. The corner anchors are physical: logical
+                // insets resolve on iOS but not on Android (measured,
+                // signalxjs/lynx#1084), and lynx has no RTL flow, so `start`
+                // IS left and `end` IS right.
                 viewport: {
+                    base: { display: 'flex', width: 'auto' },
                     selectors: {
-                        '&[data-placement="top-start"]': { left: '0' },
-                        '&[data-placement="top-end"]': { right: '0' },
-                        '&[data-placement="bottom-start"]': { left: '0' },
-                        '&[data-placement="bottom-end"]': { right: '0' },
+                        '&[data-placement="top-start"]': { left: '0', alignItems: 'flex-start' },
+                        '&[data-placement="top"]': { left: '0', right: '0', transform: 'none', alignItems: 'center' },
+                        '&[data-placement="top-end"]': { right: '0', alignItems: 'flex-end' },
+                        '&[data-placement="bottom-start"]': { left: '0', alignItems: 'flex-start' },
+                        '&[data-placement="bottom"]': { left: '0', right: '0', transform: 'none', alignItems: 'center' },
+                        '&[data-placement="bottom-end"]': { right: '0', alignItems: 'flex-end' },
                     },
                 },
+                // No grid on lynx (signalxjs/lynx#1075): the card is a flex
+                // column (title, description, then the action), with the
+                // close button pinned to the top-right corner and the title
+                // kept clear of it. The web's 24rem viewport cap becomes the
+                // card's own cap. The `^="top"` entry offset has no class
+                // form, so each top placement restates it.
+                root: {
+                    base: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        alignItems: 'flex-start',
+                        position: 'relative',
+                        boxSizing: 'border-box',
+                        width: '100%',
+                        maxWidth: '24rem',
+                    },
+                    selectors: {
+                        '&[data-placement="top-start"]': { '--toast-from': '-8px' },
+                        '&[data-placement="top"]': { '--toast-from': '-8px' },
+                        '&[data-placement="top-end"]': { '--toast-from': '-8px' },
+                    },
+                },
+                title: { base: { paddingRight: '1.75em' } },
+                // The 75% ink mix over a recipe-local property cannot bake;
+                // the same ink at 75% opacity reads the same on the soft fill.
+                description: { base: { color: 'var(--toast-ink)', opacity: '0.75' } },
+                // The 25% ink border cannot bake either: it takes the full ink.
+                action: {
+                    base: {
+                        marginTop: 'var(--space-xs)',
+                        border: 'var(--border) solid var(--toast-ink)',
+                    },
+                },
+                close: { base: { position: 'absolute', top: 'var(--space-xs)', right: 'var(--space-xs)' } },
             },
         },
     },
@@ -5135,6 +5455,87 @@ export const timeline = {
             xl: { marker: { base: { '--timeline-marker-size': 'calc(var(--size-selector) * 4)' } }, content: { base: { fontSize: 'var(--text-md)' } } },
         },
     },
+    /**
+     * Lynx has no grid, and it does not resolve `inline-size`/`block-size`:
+     * the item fell back to the engine's default layout and the marker,
+     * sized only logically, stretched into a pill (signalxjs/lynx#1145).
+     *
+     * The item is a wrapping flex row instead. Vertical: line one is the
+     * marker beside its content (start-side content ordered before the
+     * marker), and the connector takes line two by itself (`flex-basis:
+     * 100%`), drawn as a left border under the marker's centre, which is the
+     * web's row-2 segment. Horizontal: line one is the marker with the
+     * connector running on to the item's end, and the content wraps under it
+     * (start-side content above). Content grows from a zero basis, so long
+     * text never wraps onto its own line.
+     *
+     * The web collapses the start track when no item has start-side content
+     * (`:has()`); lynx has no such test. The vertical connector sits under a
+     * marker at the item's start edge, which is where the marker is unless
+     * that item has start-side content: an alternating vertical timeline is
+     * web-only for now.
+     */
+    targets: {
+        lynx: {
+            parts: {
+                item: { base: { display: 'flex', flexDirection: 'row', flexWrap: 'wrap', alignItems: 'center' } },
+                marker: {
+                    base: {
+                        width: 'var(--timeline-marker-size)',
+                        height: 'var(--timeline-marker-size)',
+                        flexGrow: '0',
+                        flexShrink: '0',
+                    },
+                },
+                connector: {
+                    selectors: {
+                        '&[data-orientation="vertical"]': {
+                            flexGrow: '0',
+                            flexShrink: '1',
+                            flexBasis: '100%',
+                            height: 'var(--space-lg)',
+                            background: 'transparent',
+                            borderLeftWidth: 'var(--border)',
+                            borderLeftStyle: 'solid',
+                            borderLeftColor: 'var(--color-base-300)',
+                            marginLeft: 'calc(var(--timeline-marker-size) / 2 - var(--border) / 2)',
+                        },
+                        '&[data-orientation="horizontal"]': {
+                            order: '1',
+                            flexGrow: '1',
+                            flexShrink: '1',
+                            flexBasis: '0',
+                            height: 'var(--border)',
+                            minWidth: 'var(--space-lg)',
+                        },
+                    },
+                },
+                content: {
+                    selectors: {
+                        '&[data-orientation="vertical"][data-placement="start"]': {
+                            order: '-1',
+                            flexGrow: '1',
+                            flexShrink: '1',
+                            flexBasis: '0',
+                        },
+                        '&[data-orientation="vertical"][data-placement="end"]': {
+                            flexGrow: '1',
+                            flexShrink: '1',
+                            flexBasis: '0',
+                        },
+                        '&[data-orientation="horizontal"][data-placement="start"]': {
+                            order: '-1',
+                            flexBasis: '100%',
+                        },
+                        '&[data-orientation="horizontal"][data-placement="end"]': {
+                            order: '2',
+                            flexBasis: '100%',
+                        },
+                    },
+                },
+            },
+        },
+    },
 };
 /** daisy chat: the classic bubble, colour-refilled per role. */
 export const chat = {
@@ -6163,6 +6564,9 @@ export const drawer = {
  */
 export const table = {
     component: 'table',
+    // A sortable header cell carries the sort state for `aria-sort`'s sake;
+    // its trigger and indicator paint it.
+    skipStates: { 'header-cell': ['ascending', 'descending', 'none'] },
     // Public to a design system derived from this one (#73).
     hooks: {
         properties: {
@@ -6248,6 +6652,55 @@ export const table = {
             },
             at: tableStackAt(tokens, 'header-cell', { paddingInline: '0' }),
         },
+        // Sorting (#286): daisy's header label made a button — the sorted
+        // column's label takes the full accent ink, and the mark beside it
+        // turns with the direction.
+        'sort-trigger': {
+            base: {
+                appearance: 'none',
+                display: 'inline-flex',
+                alignItems: 'center',
+                margin: '0',
+                border: '0',
+                font: 'inherit',
+                letterSpacing: 'inherit',
+                textTransform: 'inherit',
+                textAlign: 'inherit',
+                cursor: 'pointer',
+                gap: 'var(--space-2xs)',
+                padding: '0',
+                borderRadius: 'var(--radius-selector)',
+                background: 'transparent',
+                color: 'inherit',
+                transition: 'color var(--duration-fast) var(--ease-standard)',
+            },
+            states: {
+                ascending: { color: 'var(--table-accent)' },
+                descending: { color: 'var(--table-accent)' },
+                none: {},
+                hover: { color: 'var(--table-accent)' },
+                disabled: { cursor: 'not-allowed', opacity: 'var(--disabled-opacity)' },
+                ...focusRing,
+            },
+            at: { 'reduced-motion': { base: { transition: 'none' } } },
+        },
+        // zero's ▲, turned for descending; an unsorted column shows it only
+        // under a hovered or keyboard-focused trigger.
+        'sort-indicator': {
+            base: {
+                display: 'inline-block',
+                fontSize: '0.75em',
+                lineHeight: '1',
+                transition: 'transform var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard)',
+            },
+            states: {
+                ascending: {},
+                descending: { transform: 'rotate(180deg)' },
+                none: { opacity: '0' },
+            },
+            selectors: { '[data-scope="table"][data-part="sort-trigger"]:is(:hover, [data-focus-visible]) > &[data-state="none"]': { opacity: '0.6' } },
+            at: { 'reduced-motion': { base: { transition: 'none' } } },
+        },
         cell: {
             base: {
                 padding: 'var(--table-pad-block) var(--table-pad-inline)',
@@ -6896,7 +7349,7 @@ export const diff = {
 };
 export const recipes = [
     tabs, collapsible, switchRecipe, dialog, popover, tooltip, menu,
-    field, checkbox, checkboxGroup, radioGroup, progress, slider, accordion, select, button, avatar, toast, combobox,
+    field, fieldset, checkbox, checkboxGroup, radioGroup, progress, slider, accordion, select, button, avatar, toast, combobox,
     toggle, toggleGroup, numberInput, ratingGroup, treeView, input, textarea,
     card, alert, emptyState, badge, divider, skeleton, spinner,
     kbd, status, indicator, stats, timeline, chat, radialProgress, join,