@sigx/zero-daisyui 0.6.0 → 0.8.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
@@ -28,6 +28,36 @@ const focusRing = {
         outlineOffset: '2px',
     },
 };
+/**
+ * The focus ring on lynx, for `targets.lynx` (signalxjs/lynx#1163): the same
+ * 2px ring 2px clear of the part, spelled as spread box-shadows.
+ *
+ * The web ring is `outline` + `outline-offset`, and neither survives on
+ * lynx: its `outline` ignores `border-radius` (a square box around a
+ * rounded button, a rectangle around the switch pill) and it has no
+ * `outline-offset` property at all, so the ring sat flush on the fill. A
+ * zero-blur shadow's spread follows the element's radius. Shadows stack
+ * rather than mask, so the offset gap cannot be transparent: the inner
+ * shadow paints it in `gap` — the surface the part sits on, which is what
+ * the web's gap shows through to. `outline: none` retires the shared ring
+ * in the same merged declaration block.
+ *
+ * `under` appends the part's own lynx shadows (a knob's depth relief), which
+ * the focus rule would otherwise replace. `inset` draws the ring inside the
+ * part, flush with its edge, for a part whose parent clips an outside ring
+ * away (signalxjs/lynx#1164, the accordion trigger inside its card).
+ */
+const lynxFocusRing = (ink, { gap = 'var(--color-base-100)', under, inset = false } = {}) => ({
+    outline: 'none',
+    boxShadow: [
+        ...(inset ? [`inset 0 0 0 2px ${ink}`] : [`0 0 0 2px ${gap}`, `0 0 0 4px ${ink}`]),
+        ...(under ? [under] : []),
+    ].join(', '),
+});
+/** `focusRing`'s lynx spelling — the base-content ring, as a states entry. */
+const lynxFocus = (opts) => ({
+    'focus-visible': lynxFocusRing('var(--color-base-content)', opts),
+});
 /**
  * How far each role survives in the button's INK — the colour a transparent or
  * tinted fill draws its label, border and focus ring with.
@@ -289,7 +319,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 +523,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)' }, ...lynxFocus() } },
+                // 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 +543,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
@@ -528,6 +576,14 @@ export const tabs = {
                             base: { '--tab-radius-limit': 'var(--radius-field)' },
                         },
                     },
+                    // The box flavor's tabs sit on the list's base-200
+                    // surface, so the ring's gap is that surface. Stated on
+                    // the variant (one class more than the part rule) so it
+                    // also outranks the active pill's `--shadow-sm`, which
+                    // is a box-shadow too.
+                    box: {
+                        tab: { states: lynxFocus({ gap: 'var(--color-base-200)' }) },
+                    },
                 },
             },
         },
@@ -864,6 +920,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)',
@@ -873,6 +933,9 @@ export const switchRecipe = {
                             borderColor: 'var(--switch-accent)',
                             backgroundColor: 'var(--color-base-100)',
                         },
+                        // The pill ring (signalxjs/lynx#1163), keeping the
+                        // track's inset depth line under it.
+                        'focus-visible': lynxFocusRing('var(--switch-accent)', { under: '0 1px var(--depth-shade) inset' }),
                     },
                 },
                 thumb: {
@@ -884,6 +947,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)',
                     },
@@ -983,6 +1052,36 @@ const lynxBtnPad = (mult) => ({
     paddingLeft: `calc(var(--size-field) * ${mult})`,
     paddingRight: `calc(var(--size-field) * ${mult})`,
 });
+/**
+ * A four-side property spelled as its physical longhands, for `targets.lynx`
+ * sections that must not ship a `var()`-bearing shorthand.
+ *
+ * Lynx keeps a declaration holding `var()` under its own property id,
+ * unexpanded, and expands it only after the cascade has merged every rule
+ * into one insertion-ordered style map — in that map's order, writing over
+ * the longhands already there (`CSSVariableHandler::HandleCSSVariables`). A
+ * static shorthand, by contrast, is expanded into its longhands at parse
+ * time. So a var-bearing `border-color` and a static `border-top-color` never
+ * meet in the cascade at all: whichever key the map saw later wins, whatever
+ * the specificity (signalxjs/lynx#1161, #1162). Longhands share one key per
+ * side, and the cascade decides again.
+ */
+const lynxSides = (prop, value, sides = ['Top', 'Right', 'Bottom', 'Left']) => Object.fromEntries(sides.map((side) => [prop.replace('{}', side), value]));
+/**
+ * daisy's `.btn` is content-sized and never squeezed: `display: inline-flex`
+ * with `flex-shrink: 0; flex-wrap: nowrap`, so a narrow row makes the button
+ * overflow, never break its label. A lynx view has no inline formatting
+ * context: it stretches to a linear or column parent, and a squeezed label
+ * `<text>` then wraps per character ("Bt / n", signalxjs/lynx#1165).
+ * `width: max-content` is the intrinsic keyword starlight implements (an
+ * intrinsic width is also exempt from the cross-axis stretch), so the box
+ * sizes to its content as the web's does; the other two are daisy's own.
+ */
+const lynxBtnFit = {
+    width: 'max-content',
+    flexShrink: '0',
+    flexWrap: 'nowrap',
+};
 /** The btn size ramp's physical inline padding, for `targets.lynx.variants`. */
 const lynxBtnSizes = (part) => ({
     xs: { [part]: { base: lynxBtnPad(2) } },
@@ -990,6 +1089,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 +1195,17 @@ 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)' } },
+                // Content-sized like daisy's btn, never broken mid-word (signalxjs/lynx#1165).
+                trigger: { base: { ...lynxBtnPad(4), ...lynxBtnFit }, states: { pressed: lynxBtnPressed, ...lynxFocus() } },
+                close: { base: lynxBtnPad(4), states: { pressed: lynxBtnPressed, ...lynxFocus() } },
+                cancel: { base: lynxBtnPad(4), states: { pressed: lynxBtnPressed, ...lynxFocus() } },
+                footer: { base: { marginTop: 'var(--space-2xl)', flexDirection: 'row' } },
             },
             variants: { size: lynxBtnSizes('trigger') },
         },
@@ -1102,6 +1219,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 +1270,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 +1289,15 @@ 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) },
+                // Content-sized like daisy's btn, never broken mid-word (signalxjs/lynx#1165).
+                trigger: { base: { ...lynxBtnPad(4), ...lynxBtnFit }, states: { pressed: lynxBtnPressed, ...lynxFocus() } },
+                close: { base: lynxBtnPad(3), states: { pressed: lynxBtnPressed, ...lynxFocus() } },
             },
             variants: { size: lynxBtnSizes('trigger') },
         },
@@ -1196,12 +1339,63 @@ 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') },
         },
     },
 };
+/**
+ * Hover card — daisy's `link` opening a `dropdown-content` card. The trigger
+ * is running text, not a btn: underlined in the ink it sits in (daisy's bare
+ * `link`), and a colour is `link-<role>` in the role's readable ink
+ * (`roleInk`). The underline thickens on hover and while the card is up,
+ * rather than the ink dimming — the `btn-link` reasoning. The card is the
+ * floating panel popover and menu wear.
+ */
+export const hoverCard = {
+    component: 'hover-card',
+    parts: {
+        trigger: {
+            base: {
+                color: 'inherit',
+                textDecorationLine: 'underline',
+                textUnderlineOffset: '2px',
+                cursor: 'pointer',
+                borderRadius: 'var(--radius-selector)',
+            },
+            states: {
+                hover: { textDecorationThickness: '2px' },
+                open: { textDecorationThickness: '2px' },
+                closed: {},
+                ...focusRing,
+            },
+        },
+        popup: withPresence(popupPresence('translateY(-4px)'), {
+            base: {
+                ...floatingPanel,
+                padding: 'var(--space-xl)',
+                maxWidth: '20rem',
+                fontSize: 'var(--text-sm)',
+            },
+            states: { open: {}, closed: {} },
+        }),
+    },
+    variants: {
+        color: Object.fromEntries(ROLES.map((c) => [c, { trigger: { base: { color: roleInk(c) } } }])),
+        size: {
+            xs: { trigger: { base: { fontSize: 'var(--text-xs)' } } },
+            sm: { trigger: { base: { fontSize: 'var(--text-sm)' } } },
+            md: {},
+            lg: { trigger: { base: { fontSize: 'var(--text-lg)' } } },
+            xl: { trigger: { base: { fontSize: 'var(--text-xl)' } } },
+        },
+    },
+    // Web-only: the popover top layer and the runtime's arrow geometry have
+    // no lynx counterpart.
+    targets: { web: floatingArrow('hover-card', panelArrowPaint) },
+};
 // daisy "menu in a dropdown" look.
 export const menu = {
     component: 'menu',
@@ -1335,6 +1529,17 @@ export const menu = {
                 opacity: '0.6',
             },
         },
+        // daisy's menu hint: the group label's faded ink, pushed to the
+        // row's reading end — faded less, since 0.6 leaves nord's paper
+        // under the 4.5:1 a line read by eye owes.
+        shortcut: {
+            base: {
+                marginInlineStart: 'auto',
+                paddingInlineStart: 'var(--space-lg)',
+                fontSize: 'var(--text-xs)',
+                opacity: '0.75',
+            },
+        },
         separator: {
             base: {
                 height: 'var(--border)',
@@ -1348,12 +1553,55 @@ 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) } },
+            parts: {
+                trigger: { base: lynxBtnPad(4) },
+                // The shortcut's reading-end push, restated physically (#1084).
+                shortcut: { base: { marginLeft: 'auto', paddingLeft: 'var(--space-lg)' } },
+            },
             variants: { size: lynxBtnSizes('trigger') },
         },
     },
 };
+// The menubar row: daisy's `menu-horizontal` strip — a base-200 box the
+// menu triggers sit in. The triggers are ordinary `menu` triggers.
+export const menubar = {
+    component: 'menubar',
+    tokens: { '--menubar-surface': 'var(--color-base-200)' },
+    parts: {
+        root: {
+            base: {
+                display: 'flex',
+                alignItems: 'center',
+                gap: 'var(--space-xs)',
+                padding: 'var(--space-xs)',
+                width: 'max-content',
+                maxWidth: '100%',
+                flexWrap: 'wrap',
+                background: 'var(--menubar-surface)',
+                borderRadius: 'var(--radius-box)',
+            },
+            // The triggers fade themselves — see basic.
+            states: { disabled: {} },
+            selectors: {
+                '&[data-orientation="vertical"]': { flexDirection: 'column', alignItems: 'stretch' },
+            },
+        },
+    },
+    variants: {
+        color: Object.fromEntries(ROLES.map((c) => [c, { root: { base: {
+                        '--menubar-surface': `color-mix(in oklch, var(--color-${c}) 12%, var(--color-base-200))`,
+                    } } }])),
+        size: {
+            xs: { root: { base: { gap: '0', padding: '0' } } },
+            sm: { root: { base: { padding: 'var(--space-2xs)' } } },
+            md: {},
+            lg: { root: { base: { gap: 'var(--space-sm)', padding: 'var(--space-sm)' } } },
+            xl: { root: { base: { gap: 'var(--space-md)', padding: 'var(--space-sm)' } } },
+        },
+    },
+};
 export const field = {
     component: 'field',
     // The label's accent ink — base-content by default, so the un-attributed
@@ -1403,6 +1651,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 +2202,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 +2244,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 +2266,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 +2576,100 @@ 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)') },
+                        // The control's ring is the NATIVE input's on the web;
+                        // lynx always renders the composed parts, where the
+                        // thumb is what takes focus and wears the ring below
+                        // (signalxjs/lynx#1163 — both at once read as two
+                        // nested boxes).
+                        'focus-visible': { outline: 'none' },
+                    },
+                    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 +2680,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,11 +2700,20 @@ 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)',
                     },
+                    // The round ring (signalxjs/lynx#1163), over the knob's
+                    // depth relief.
+                    states: {
+                        'focus-visible': lynxFocusRing('var(--slider-accent)', {
+                            under: '0 -1px var(--depth-shade) inset, 0 8px 0 -4px var(--depth-sheen) inset, 0 1px var(--depth-shade)',
+                        }),
+                    },
                 },
             },
         },
@@ -2328,7 +2721,31 @@ 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.
+                //
+                // The item card clips (`overflow: hidden`) and the trigger
+                // fills it, so an outside ring is clipped away entirely
+                // (signalxjs/lynx#1164): the ring is drawn inset, rounded to
+                // the card's inner corners.
+                trigger: {
+                    states: {
+                        pressed: { background: 'var(--color-base-200)' },
+                        'focus-visible': {
+                            ...lynxFocusRing('var(--color-base-content)', { inset: true }),
+                            borderRadius: 'calc(var(--radius-box) - var(--border))',
+                        },
+                    },
+                },
+            },
+        },
+    },
     // 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,10 +3026,47 @@ export const select = {
         web: { parts: { popup: { base: anchoredListbox } } },
         lynx: {
             parts: {
-                trigger: { base: lynxBtnPad(4) },
-                'clear-trigger': { base: { top: 'var(--space-xs)', bottom: 'var(--space-xs)', right: 'calc(var(--size-field) * 4 + 1em + var(--space-xs))', minWidth: '1.5rem' } },
+                // 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 bounds sit on the ROOT, the box daisy's `.select` is,
+                // and the trigger fills it. The web root is `inline-flex`, so
+                // it shrink-wraps the trigger; lynx rewrites that to `flex`,
+                // and a root stretched by its parent while the trigger stayed
+                // capped left the clear-trigger — positioned against the root
+                // — floating past the trigger's end (signalxjs/lynx#1166).
+                root: { base: { width: '20rem', maxWidth: '100%', minWidth: '3rem' } },
+                trigger: {
+                    base: { ...lynxBtnPad(4), width: '100%', 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)' }, ...lynxFocus() },
+                },
+                // The popup renders in the overlay outlet, outside the root,
+                // so it cannot inherit the root's `--select-accent`, and an
+                // unresolved `var()` on lynx has no fallback: the selected
+                // item and its tick fell back to base-content
+                // (signalxjs/lynx#1168). The popup restates the accent; its
+                // colour-axis twins are in `variants.color` below.
+                popup: { base: { '--select-accent': 'var(--color-primary)' } },
+                // 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' },
+                    states: lynxFocus(),
+                },
             },
             variants: {
+                // The popup's accent follows the root's colour axis — the
+                // popup carries the axis class itself (lynx stamps every part).
+                color: Object.fromEntries(ROLES.map((c) => [c, { popup: { base: {
+                                '--select-accent': `var(--color-${c})`,
+                            } } }])),
                 size: { ...lynxBtnSizes('trigger'), md: { trigger: { base: lynxBtnPad(4) } } },
             },
         },
@@ -2633,6 +3087,38 @@ 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]})`;
+/**
+ * The btn padding ramp — `[size, block space, inline space]` per step. One
+ * table for the web's `padding` shorthand and the lynx section's longhands,
+ * so the two spellings cannot drift apart.
+ */
+const BTN_PAD = [
+    ['xs', '2xs', 'xs'],
+    ['sm', 'xs', 'sm'],
+    ['md', 'sm', 'lg'],
+    ['lg', 'md', 'xl'],
+    ['xl', 'lg', '2xl'],
+];
+const btnPadding = (step) => {
+    const [, block, inline] = BTN_PAD.find(([size]) => size === step);
+    return `var(--space-${block}) var(--space-${inline})`;
+};
+/**
+ * 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).
@@ -2811,11 +3297,11 @@ export const button = {
         // The `<button>` element is UA `border-box`, so the stated height is
         // the rendered height, border included — as in daisy.
         size: {
-            xs: { root: { base: { height: btnHeight('xs'), padding: 'var(--space-2xs) var(--space-xs)', fontSize: 'var(--text-xs)' } } },
-            sm: { root: { base: { height: btnHeight('sm'), padding: 'var(--space-xs) var(--space-sm)', fontSize: 'var(--text-sm)' } } },
-            md: { root: { base: { height: btnHeight('md'), padding: 'var(--space-sm) var(--space-lg)', fontSize: 'var(--text-md)' } } },
-            lg: { root: { base: { height: btnHeight('lg'), padding: 'var(--space-md) var(--space-xl)', fontSize: 'var(--text-lg)' } } },
-            xl: { root: { base: { height: btnHeight('xl'), padding: 'var(--space-lg) var(--space-2xl)', fontSize: 'var(--text-xl)' } } },
+            xs: { root: { base: { height: btnHeight('xs'), padding: btnPadding('xs'), fontSize: 'var(--text-xs)' } } },
+            sm: { root: { base: { height: btnHeight('sm'), padding: btnPadding('sm'), fontSize: 'var(--text-sm)' } } },
+            md: { root: { base: { height: btnHeight('md'), padding: btnPadding('md'), fontSize: 'var(--text-md)' } } },
+            lg: { root: { base: { height: btnHeight('lg'), padding: btnPadding('lg'), fontSize: 'var(--text-lg)' } } },
+            xl: { root: { base: { height: btnHeight('xl'), padding: btnPadding('xl'), fontSize: 'var(--text-xl)' } } },
         },
     },
     /**
@@ -2846,14 +3332,96 @@ 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). Every
+                // var-bearing edge is a longhand (`lynxSides`): a var-bearing
+                // `border` expanded after the transparent top and closed the
+                // ring (signalxjs/lynx#1161). The shorthand stays, static, so
+                // the shared `currentColor` spelling never ships.
+                spinner: {
+                    base: {
+                        width: '1em',
+                        height: '1em',
+                        border: '0 solid transparent',
+                        ...lynxSides('border{}Width', 'calc(var(--border) * 2)'),
+                        ...lynxSides('border{}Color', 'var(--btn-ink)', ['Right', 'Bottom', 'Left']),
+                        borderTopColor: 'transparent',
+                    },
+                },
+                root: {
+                    // daisy's content-sized, never-squeezed btn (#1165), and
+                    // the hairline as longhands: a var-bearing `border`
+                    // shorthand would expand over the variants' and the
+                    // disabled state's edge colours (see `lynxSides`).
+                    base: {
+                        ...lynxBtnFit,
+                        border: '0 solid transparent',
+                        ...lynxSides('border{}Width', 'var(--border)'),
+                    },
+                    // The ring in the variant's own ink (signalxjs/lynx#1163).
+                    states: { disabled: lynxBtnDisabled, 'focus-visible': lynxFocusRing('var(--btn-ink)') },
+                },
+            },
+            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). outline/dash draw their ink edge as
+                // longhands, so that transparent restatement wins by
+                // specificity instead of losing to a var-bearing
+                // `border-color` (signalxjs/lynx#1162); the shared shorthand
+                // is neutralised to a static value.
+                variant: {
+                    solid: { spinner: { base: lynxSides('border{}Color', 'var(--btn-on-accent)', ['Right', 'Bottom', 'Left']) } },
+                    outline: {
+                        root: {
+                            base: { borderColor: 'transparent', ...lynxSides('border{}Color', 'var(--btn-ink)') },
+                            states: { disabled: { borderColor: 'transparent' } },
+                        },
+                    },
+                    dash: {
+                        root: {
+                            base: { borderColor: 'transparent', ...lynxSides('border{}Color', 'var(--btn-ink)') },
+                            states: { disabled: { borderColor: 'transparent' } },
+                        },
+                    },
+                    ghost: { root: { states: { disabled: { background: 'transparent' } } } },
+                    // `link` zeroes the box-shadow in a variant rule that
+                    // lands after the ring, so it restates the ring.
+                    link: { root: { states: { disabled: { background: 'transparent' }, 'focus-visible': lynxFocusRing('var(--btn-ink)') } } },
+                },
+                // The size ramp's paddings as longhands, so square/circle's
+                // zeroed sides below win by the cascade rather than by the
+                // order lynx happens to expand a var-bearing `padding` in.
+                size: Object.fromEntries(BTN_PAD.map(([size, block, inline]) => [size, {
+                        root: {
+                            base: {
+                                padding: '0',
+                                ...lynxSides('padding{}', `var(--space-${block})`, ['Top', 'Bottom']),
+                                ...lynxSides('padding{}', `var(--space-${inline})`, ['Right', 'Left']),
+                            },
+                        },
+                    }])),
+            },
+            // 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. `width: auto`
+            // undoes the root's `max-content`, which would otherwise switch
+            // off the `aspect-ratio` that squares the chip. `wide`/`block`
+            // restate their width physically: `inline-size` and
+            // `max-inline-size` are not lynx properties at all.
             modifiers: {
-                square: { root: { base: { paddingLeft: '0', paddingRight: '0' } } },
-                circle: { root: { base: { paddingLeft: '0', paddingRight: '0' } } },
+                wide: { root: { base: { width: '100%', maxWidth: '16rem' } } },
+                block: { root: { base: { width: '100%' } } },
+                square: { root: { base: { width: 'auto', paddingLeft: '0', paddingRight: '0' } } },
+                circle: { root: { base: { width: 'auto', paddingLeft: '0', paddingRight: '0' } } },
+                // `active` zeroes the box-shadow too (the held press look).
+                active: { root: { states: { 'focus-visible': lynxFocusRing('var(--btn-ink)') } } },
             },
         },
     },
@@ -2933,6 +3501,22 @@ export const avatar = {
         },
     },
 };
+/**
+ * A toast whose indicator is rendered (#292): the grid grows a leading column
+ * for the mark, and the text, action and close step one column along.
+ */
+const TOAST_MARKED = '[data-scope="toast"][data-part="root"]:has(> [data-scope="toast"][data-part="indicator"]) > &';
+/** The indicator's marks, cut from its fill — not mirrored in RTL (a tick is not a direction). */
+const TOAST_CHECK = 'polygon(15.1% 41.3%, 1% 55%, 37.6% 92.8%, 99% 19.8%, 83.9% 7.2%, 36.6% 63.5%)';
+const TOAST_CROSS = 'polygon(20% 8%, 50% 38%, 80% 8%, 92% 20%, 62% 50%, 92% 80%, 80% 92%, 50% 62%, 20% 92%, 8% 80%, 38% 50%, 8% 20%)';
+/**
+ * daisy's success and error are FILLS — light enough in `light` and `nord`
+ * that a bare mark in them reads under 2:1 on the toast's base-200. Deepened
+ * toward base-content (which flips with the theme), the hue survives and the
+ * mark clears the 3:1 non-text floor in every theme.
+ */
+const TOAST_SUCCESS_INK = 'color-mix(in oklab, var(--color-success) 55%, var(--color-base-content))';
+const TOAST_ERROR_INK = 'color-mix(in oklab, var(--color-error) 55%, var(--color-base-content))';
 /**
  * Toast presence is runtime-managed (see the SKILL's Toast section): plain
  * two-state transitions only — no `@starting-style`, no `allow-discrete`.
@@ -2943,6 +3527,7 @@ export const toast = {
         '--toast-bg': 'var(--color-base-200)',
         '--toast-ink': 'var(--color-base-content)',
         '--toast-from': '8px',
+        '--toast-mark': '1rem',
     },
     parts: {
         viewport: {
@@ -2996,6 +3581,7 @@ export const toast = {
             },
             selectors: {
                 '&[data-placement^="top"]': { '--toast-from': '-8px' },
+                '&:has(> [data-scope="toast"][data-part="indicator"])': { gridTemplateColumns: 'auto 1fr auto auto' },
             },
             states: {
                 open: { opacity: '1', transform: 'none' },
@@ -3005,8 +3591,39 @@ export const toast = {
                 'reduced-motion': { base: { transition: 'none' }, states: { open: { transform: 'none' } } },
             },
         },
+        // daisy's `loading-spinner` ring in the alert's own ink, then the
+        // success tick or the error cross — the promise toast's status.
+        indicator: {
+            base: {
+                gridColumn: '1',
+                gridRow: '1 / span 2',
+                inlineSize: 'var(--toast-mark)',
+                blockSize: 'var(--toast-mark)',
+                boxSizing: 'border-box',
+            },
+            states: {
+                loading: {
+                    borderRadius: '50%',
+                    border: 'calc(var(--border) * 2) solid color-mix(in oklab, var(--toast-ink) 25%, transparent)',
+                    borderBlockStartColor: 'var(--toast-ink)',
+                    animation: 'zero-daisyui-toast-spin 0.75s linear infinite',
+                },
+                complete: { background: TOAST_SUCCESS_INK, clipPath: TOAST_CHECK },
+                error: { background: TOAST_ERROR_INK, clipPath: TOAST_CROSS },
+            },
+            at: {
+                'reduced-motion': { states: { loading: { animation: 'none' } } },
+                'forced-colors': {
+                    states: {
+                        complete: { background: 'CanvasText', forcedColorAdjust: 'none' },
+                        error: { background: 'CanvasText', forcedColorAdjust: 'none' },
+                    },
+                },
+            },
+        },
         title: {
             base: { gridColumn: '1', fontWeight: 'var(--weight-semibold)' },
+            selectors: { [TOAST_MARKED]: { gridColumn: '2' } },
         },
         description: {
             base: {
@@ -3014,6 +3631,7 @@ export const toast = {
                 fontSize: 'var(--text-xs)',
                 color: 'color-mix(in oklab, var(--toast-ink) 75%, transparent)',
             },
+            selectors: { [TOAST_MARKED]: { gridColumn: '2' } },
         },
         action: {
             base: {
@@ -3034,6 +3652,7 @@ export const toast = {
                 disabled: { opacity: 'var(--disabled-opacity)', cursor: 'not-allowed' },
                 ...focusRing,
             },
+            selectors: { [TOAST_MARKED]: { gridColumn: '3' } },
         },
         close: {
             base: {
@@ -3053,6 +3672,7 @@ export const toast = {
                 disabled: { opacity: 'var(--disabled-opacity)' },
                 ...focusRing,
             },
+            selectors: { [TOAST_MARKED]: { gridColumn: '4' } },
         },
     },
     variants: {
@@ -3089,24 +3709,79 @@ 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.
+    keyframes: { 'zero-daisyui-toast-spin': 'to { transform: rotate(360deg); }' },
     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.
+                // Their rings' gap is the card's own fill.
+                action: {
+                    base: {
+                        marginTop: 'var(--space-xs)',
+                        border: 'var(--border) solid var(--toast-ink)',
+                    },
+                    states: lynxFocus({ gap: 'var(--toast-bg)' }),
+                },
+                close: {
+                    base: { position: 'absolute', top: 'var(--space-xs)', right: 'var(--space-xs)' },
+                    states: lynxFocus({ gap: 'var(--toast-bg)' }),
+                },
             },
         },
     },
+    // The viewport's `open` (the stack expanded) is a fact this skin has no
+    // use for: its toasts are always a plain column, so both states look the
+    // same by design (#292).
+    skipStates: { viewport: ['open', 'closed'] },
 };
 export const combobox = {
     component: 'combobox',
@@ -3906,12 +4581,28 @@ const treeRowSelectors = {
         background: 'var(--color-base-300)',
     },
 };
+/**
+ * `tickGlyphFallback` for the node check box, whose tick is its `::after`:
+ * the geometry drops and the same pseudo carries the glyph, in the medium's
+ * own ink (the #233 divergence, restated).
+ */
+const nodeTickFallback = (ink) => ({
+    selectors: {
+        '&::after': { clipPath: 'none', backgroundColor: '#0000', rotate: '0deg', inset: '0', display: 'grid', placeItems: 'center', color: ink, fontSize: '0.85em', lineHeight: '1' },
+        '&[data-state="checked"]::after': { content: '"✔︎"', clipPath: 'none', rotate: '0deg' },
+        '&[data-state="indeterminate"]::after': { content: '"−"', clipPath: 'none', rotate: '0deg', translate: 'none' },
+    },
+});
 export const treeView = {
     component: 'tree-view',
     tokens: {
         '--tree-accent': 'var(--color-primary)',
         '--tree-text': 'var(--text-sm)',
         '--tree-on-accent': 'var(--color-primary-content)',
+        // The node check box's pair — the tree's own accent, so a colour
+        // variant retints the box with the row.
+        '--tree-check': 'var(--tree-accent)',
+        '--tree-on-check': 'var(--tree-on-accent)',
     },
     parts: {
         root: {
@@ -3960,6 +4651,58 @@ export const treeView = {
                 'reduced-motion': { base: { transition: 'none' } },
             },
         },
+        // daisy's `.checkbox` at row scale: the accent outline, the recessed
+        // depth shade, the fill on check — and daisy's own tick, the six
+        // clip-path points rotated 45°, drawn on the box's `::after` since
+        // the part is one span. On a selected row (the accent fill) the pair
+        // swaps, so the box never vanishes into the row it sits on.
+        'node-checkbox': {
+            base: {
+                display: 'inline-block',
+                position: 'relative',
+                flexShrink: '0',
+                boxSizing: 'border-box',
+                width: '1.25em',
+                height: '1.25em',
+                border: 'var(--border) solid var(--tree-check)',
+                borderRadius: 'var(--radius-selector)',
+                boxShadow: '0 1px var(--depth-shade) inset',
+                cursor: 'pointer',
+                transition: 'background-color var(--duration-normal) var(--ease-standard)',
+            },
+            states: {
+                checked: { backgroundColor: 'var(--tree-check)' },
+                indeterminate: { backgroundColor: 'var(--tree-check)' },
+                unchecked: {},
+                disabled: { cursor: 'not-allowed' },
+            },
+            selectors: {
+                '&::after': {
+                    content: '""',
+                    position: 'absolute',
+                    inset: '15%',
+                    opacity: '0',
+                    rotate: '45deg',
+                    backgroundColor: 'var(--tree-on-check)',
+                    clipPath: TICK_COLLAPSED,
+                    transition: 'clip-path var(--duration-slow) var(--ease-standard) var(--duration-instant), '
+                        + 'opacity var(--duration-instant) var(--ease-standard) var(--duration-instant), '
+                        + 'rotate var(--duration-slow) var(--ease-standard) var(--duration-instant), '
+                        + 'translate var(--duration-slow) var(--ease-standard) var(--duration-instant)',
+                },
+                '&[data-state="checked"]::after': { clipPath: TICK_DRAWN, opacity: '1' },
+                '&[data-state="indeterminate"]::after': { clipPath: DASH_DRAWN, opacity: '1', translate: '0 -35%', rotate: '0deg' },
+                '[data-scope="tree-view"][data-selected] &': {
+                    '--tree-check': 'var(--tree-on-accent)',
+                    '--tree-on-check': 'var(--tree-accent)',
+                },
+            },
+            at: {
+                'reduced-motion': { base: { transition: 'none' }, selectors: { '&::after': { transition: 'none' } } },
+                'forced-colors': nodeTickFallback('CanvasText'),
+                print: nodeTickFallback('var(--print-ink)'),
+            },
+        },
         // Indentation comes from this inline padding — depth is the DOM
         // nesting, no per-level rules needed.
         'branch-content': {
@@ -4240,6 +4983,36 @@ export const card = {
                 overflow: 'hidden',
             },
         },
+        /**
+         * Media (#302) — daisy's `card > figure`: a centred flex box, flush
+         * to the card's edges, the image filling it.
+         */
+        media: {
+            base: {
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                margin: '0',
+                inlineSize: '100%',
+                objectFit: 'cover',
+            },
+            selectors: {
+                // The media's own image, when the band wraps one (a div or a
+                // figure): block-level, the band's full width, cropped rather
+                // than stretched when the band is given a height.
+                '& > :is(img, picture, video, svg, canvas)': {
+                    display: 'block',
+                    inlineSize: '100%',
+                    blockSize: '100%',
+                    objectFit: 'cover',
+                },
+                // The corners it shares with the card (#302): the root clips
+                // too, but an asChild <img> is the band itself and rounds on
+                // its own.
+                '&:first-child': { borderStartStartRadius: 'var(--radius-box)', borderStartEndRadius: 'var(--radius-box)' },
+                '&:last-child': { borderEndStartRadius: 'var(--radius-box)', borderEndEndRadius: 'var(--radius-box)' },
+            },
+        },
         header: {
             base: {
                 display: 'flex',
@@ -4569,16 +5342,51 @@ export const divider = {
     tokens: { '--divider-ink': 'var(--color-base-300)', '--divider-thickness': 'var(--border)' },
     parts: {
         root: {
-            base: { border: 'none', background: 'var(--divider-ink)', alignSelf: 'stretch' },
+            // The rule is two flex segments (#298), drawn as borders: with no
+            // label they meet and read as one line, and a label sits between
+            // them. Borders rather than a background, so forced colours keep
+            // the line instead of revaluing it to Canvas.
+            base: {
+                display: 'flex',
+                alignItems: 'center',
+                border: 'none',
+                alignSelf: 'stretch',
+            },
             selectors: {
-                '&[data-orientation="horizontal"]': {
-                    inlineSize: '100%',
-                    blockSize: 'var(--divider-thickness)',
-                },
-                '&[data-orientation="vertical"]': {
-                    inlineSize: 'var(--divider-thickness)',
-                    minBlockSize: '1em',
+                '&::before': { content: '""', flex: '1 1 0', minInlineSize: '0' },
+                '&::after': { content: '""', flex: '1 1 0', minInlineSize: '0' },
+                '&[data-orientation="horizontal"]': { inlineSize: '100%' },
+                '&[data-orientation="horizontal"]::before': { borderBlockStart: 'var(--divider-thickness) solid var(--divider-ink)' },
+                '&[data-orientation="horizontal"]::after': { borderBlockStart: 'var(--divider-thickness) solid var(--divider-ink)' },
+                '&[data-orientation="vertical"]': { flexDirection: 'column', minBlockSize: '1em' },
+                '&[data-orientation="vertical"]::before': { borderInlineStart: 'var(--divider-thickness) solid var(--divider-ink)' },
+                '&[data-orientation="vertical"]::after': { borderInlineStart: 'var(--divider-thickness) solid var(--divider-ink)' },
+                // A placed label sits flush at its edge: the segment on
+                // that side goes, and the other one takes the whole run.
+                '&:has(> [data-scope="divider"][data-part="label"][data-placement="start"])::before': { display: 'none' },
+                '&:has(> [data-scope="divider"][data-part="label"][data-placement="end"])::after': { display: 'none' },
+            },
+        },
+        label: {
+            base: {
+                // daisy's `divider` text: the content colour, the rule
+                // stopping a gap short of it on either side.
+                flex: 'none',
+                paddingInline: 'var(--space-md)',
+                fontSize: 'var(--text-sm)',
+                whiteSpace: 'nowrap',
+                color: 'var(--color-base-content)',
+            },
+            selectors: {
+                '[data-scope="divider"][data-part="root"][data-orientation="vertical"] > &': {
+                    paddingInline: '0',
+                    paddingBlock: 'var(--space-sm)',
                 },
+                // Flush means flush: no inset on the side the rule gave up.
+                '&[data-placement="start"]': { paddingInlineStart: '0' },
+                '&[data-placement="end"]': { paddingInlineEnd: '0' },
+                '[data-scope="divider"][data-part="root"][data-orientation="vertical"] > &[data-placement="start"]': { paddingBlockStart: '0' },
+                '[data-scope="divider"][data-part="root"][data-orientation="vertical"] > &[data-placement="end"]': { paddingBlockEnd: '0' },
             },
         },
     },
@@ -5121,6 +5929,10 @@ export const timeline = {
                 },
             },
         },
+        // Title and description (#302): daisy's timeline-box leads with a
+        // bold line; the detail under it in the card description's ink.
+        title: { base: { display: 'block', margin: '0', fontWeight: 'var(--weight-semibold)', lineHeight: 'var(--leading-tight)' } },
+        description: { base: { display: 'block', margin: '0', marginBlockStart: 'var(--space-2xs)', color: 'color-mix(in oklab, var(--color-base-content) 70%, transparent)' } },
     },
     variants: {
         color: Object.fromEntries(ROLES.map((c) => [c, { marker: { base: {
@@ -5135,6 +5947,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 = {
@@ -5244,6 +6137,95 @@ export const chat = {
         },
     },
 };
+/**
+ * ChatLog — daisy's `bg-base-200 rounded-box` well that the chat bubbles
+ * already sit in, scrolling; the jump trigger is a `btn btn-sm` pill in the
+ * role's solid pair with daisy's `shadow-xs` and its 1px press sink, floated
+ * over the rows by `position: sticky` at the box's foot. Its negative block
+ * margin gives back the line it would take, so appearing moves no row.
+ */
+export const chatLog = {
+    component: 'chat-log',
+    tokens: {
+        '--chat-log-fill': 'var(--color-primary)',
+        '--chat-log-on-fill': 'var(--color-primary-content)',
+        '--chat-log-jump-size': 'calc(var(--size-field) * 8)',
+    },
+    parts: {
+        root: {
+            base: {
+                display: 'flex',
+                flexDirection: 'column',
+                overflowY: 'auto',
+                overscrollBehaviorY: 'contain',
+                borderRadius: 'var(--radius-box)',
+                background: 'var(--color-base-100)',
+                color: 'var(--color-base-content)',
+                border: 'var(--border) solid var(--color-base-300)',
+                padding: 'var(--space-sm) var(--space-md)',
+            },
+            // Drawn inside the box (negative offset): an outward ring would
+            // be clipped by whatever scrolls around the transcript.
+            states: { 'focus-visible': { outline: '2px solid var(--color-base-content)', outlineOffset: '-2px' } },
+        },
+        content: {
+            base: {
+                // `auto` gathers a short transcript at the foot; a long one
+                // overflows and the margin resolves to nothing.
+                marginBlockStart: 'auto',
+                flex: 'none',
+                display: 'grid',
+                rowGap: 'var(--space-xs)',
+            },
+        },
+        'jump-trigger': {
+            base: {
+                position: 'sticky',
+                insetBlockEnd: 'var(--space-sm)',
+                alignSelf: 'center',
+                flex: 'none',
+                marginBlockStart: 'calc(var(--chat-log-jump-size) * -1)',
+                blockSize: 'var(--chat-log-jump-size)',
+                appearance: 'none',
+                display: 'inline-flex',
+                alignItems: 'center',
+                gap: 'var(--space-2xs)',
+                paddingInline: 'var(--space-md)',
+                border: 'var(--border) solid transparent',
+                borderRadius: '9999px',
+                background: 'var(--chat-log-fill)',
+                color: 'var(--chat-log-on-fill)',
+                boxShadow: 'var(--shadow-xs)',
+                fontFamily: 'inherit',
+                fontSize: 'var(--text-xs)',
+                fontWeight: 'var(--weight-semibold)',
+                lineHeight: 'var(--leading-none)',
+                cursor: 'pointer',
+                transition: 'background var(--duration-fast) var(--ease-standard)',
+            },
+            states: {
+                open: {},
+                closed: {},
+                hover: { background: 'color-mix(in oklab, var(--chat-log-fill) 90%, black)' },
+                'focus-visible': { outline: '2px solid var(--color-base-content)', outlineOffset: '2px' },
+            },
+            selectors: { '&[data-pressed]:not([data-disabled])': { transform: 'translateY(1px)', boxShadow: 'none' } },
+        },
+    },
+    variants: {
+        color: Object.fromEntries(ROLES.map((c) => [c, { 'jump-trigger': { base: {
+                        '--chat-log-fill': `var(--color-${c})`,
+                        '--chat-log-on-fill': `var(--color-${c}-content)`,
+                    } } }])),
+        size: {
+            xs: { content: { base: { rowGap: 'var(--space-2xs)' } }, 'jump-trigger': { base: { '--chat-log-jump-size': 'calc(var(--size-field) * 6)', fontSize: 'var(--text-xs)' } } },
+            sm: { content: { base: { rowGap: 'var(--space-2xs)' } }, 'jump-trigger': { base: { '--chat-log-jump-size': 'calc(var(--size-field) * 7)', fontSize: 'var(--text-xs)' } } },
+            md: {},
+            lg: { content: { base: { rowGap: 'var(--space-sm)' } }, 'jump-trigger': { base: { '--chat-log-jump-size': 'calc(var(--size-field) * 9)', fontSize: 'var(--text-sm)' } } },
+            xl: { content: { base: { rowGap: 'var(--space-md)' } }, 'jump-trigger': { base: { '--chat-log-jump-size': 'calc(var(--size-field) * 10)', fontSize: 'var(--text-sm)' } } },
+        },
+    },
+};
 /** daisy radial-progress: --value became --progress-percent; same ring. */
 export const radialProgress = {
     component: 'radial-progress',
@@ -5630,6 +6612,8 @@ export const breadcrumbs = {
                 alignItems: 'center',
                 gap: 'var(--space-xs)',
             },
+            // `closed` is presence: the runtime hides the part (#295).
+            states: { open: {}, closed: {} },
         },
         link: {
             base: {
@@ -5658,6 +6642,37 @@ export const breadcrumbs = {
                 userSelect: 'none',
             },
         },
+        ellipsis: {
+            base: {
+                display: 'flex',
+                alignItems: 'center',
+                gap: 'var(--space-xs)',
+            },
+            // `closed` is presence: the runtime hides the part (#295).
+            states: { open: {}, closed: {} },
+        },
+        'ellipsis-trigger': {
+            base: {
+                appearance: 'none',
+                background: 'transparent',
+                border: '0',
+                padding: '0 var(--space-2xs)',
+                margin: '0',
+                font: 'inherit',
+                lineHeight: 'inherit',
+                color: 'color-mix(in oklch, var(--color-base-content) 75%, transparent)',
+                borderRadius: 'var(--radius-selector)',
+                cursor: 'pointer',
+                transition: 'color var(--duration-fast) var(--ease-standard)',
+            },
+            states: {
+                hover: { color: 'var(--color-base-content)', textDecoration: 'underline' },
+                'focus-visible': {
+                    outline: '2px solid var(--color-primary)',
+                    outlineOffset: '2px',
+                },
+            },
+        },
     },
     variants: {
         color: Object.fromEntries(ROLES.map((c) => [c, { root: { base: {
@@ -5672,11 +6687,46 @@ export const breadcrumbs = {
         },
     },
 };
+/**
+ * The four pagination triggers — prev/next and, with `withEdges`, the
+ * first/last jumps (#294) — are one cell: the same box, the same
+ * glyph-sized type, and the same flip under the rtl guard, since every
+ * glyph (`‹ › « »`) is physical ink pointing at a reading edge.
+ */
+const pageTrigger = {
+    base: {
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        minInlineSize: 'var(--pg-size)',
+        blockSize: 'var(--pg-size)',
+        background: 'var(--color-base-200)',
+        color: 'var(--color-base-content)',
+        border: 'none',
+        borderRadius: 'var(--radius-field)',
+        fontSize: 'calc(var(--pg-font) * 1.2)',
+        lineHeight: 'var(--leading-none)',
+        appearance: 'none',
+        // Link mode renders an <a> (#294): no UA underline.
+        textDecoration: 'none',
+        cursor: 'pointer',
+        transition: 'background var(--duration-fast) var(--ease-standard)',
+    },
+    states: {
+        hover: { background: 'var(--color-base-300)' },
+        disabled: { opacity: 'var(--disabled-opacity)', cursor: 'not-allowed' },
+        ...focusRing,
+    },
+    selectors: {
+        '&[data-pressed]:not([data-disabled])': { transform: 'translateY(1px)' },
+        [`&${rtl}`]: { scale: '-1 1' },
+    },
+};
 /**
  * Pagination — daisy's join-of-buttons made of standalone btn cells: the
  * quiet base-200 fill, base-300 hover, the current page inverted into the
  * accent pair (primary by default). Pressed is the daisy 1px sink. The
- * `‹`/`›` glyphs flip under the shared rtl guard.
+ * `‹ › « »` glyphs flip under the shared rtl guard.
  */
 export const pagination = {
     component: 'pagination',
@@ -5722,6 +6772,7 @@ export const pagination = {
                 fontWeight: 'var(--weight-semibold)',
                 fontVariantNumeric: 'tabular-nums',
                 appearance: 'none',
+                textDecoration: 'none',
                 cursor: 'pointer',
                 transition: 'background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard)',
             },
@@ -5749,60 +6800,10 @@ export const pagination = {
                 userSelect: 'none',
             },
         },
-        'prev-trigger': {
-            base: {
-                display: 'inline-flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                minInlineSize: 'var(--pg-size)',
-                blockSize: 'var(--pg-size)',
-                background: 'var(--color-base-200)',
-                color: 'var(--color-base-content)',
-                border: 'none',
-                borderRadius: 'var(--radius-field)',
-                fontSize: 'calc(var(--pg-font) * 1.2)',
-                lineHeight: 'var(--leading-none)',
-                appearance: 'none',
-                cursor: 'pointer',
-                transition: 'background var(--duration-fast) var(--ease-standard)',
-            },
-            states: {
-                hover: { background: 'var(--color-base-300)' },
-                disabled: { opacity: 'var(--disabled-opacity)', cursor: 'not-allowed' },
-                ...focusRing,
-            },
-            selectors: {
-                '&[data-pressed]:not([data-disabled])': { transform: 'translateY(1px)' },
-                [`&${rtl}`]: { scale: '-1 1' },
-            },
-        },
-        'next-trigger': {
-            base: {
-                display: 'inline-flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                minInlineSize: 'var(--pg-size)',
-                blockSize: 'var(--pg-size)',
-                background: 'var(--color-base-200)',
-                color: 'var(--color-base-content)',
-                border: 'none',
-                borderRadius: 'var(--radius-field)',
-                fontSize: 'calc(var(--pg-font) * 1.2)',
-                lineHeight: 'var(--leading-none)',
-                appearance: 'none',
-                cursor: 'pointer',
-                transition: 'background var(--duration-fast) var(--ease-standard)',
-            },
-            states: {
-                hover: { background: 'var(--color-base-300)' },
-                disabled: { opacity: 'var(--disabled-opacity)', cursor: 'not-allowed' },
-                ...focusRing,
-            },
-            selectors: {
-                '&[data-pressed]:not([data-disabled])': { transform: 'translateY(1px)' },
-                [`&${rtl}`]: { scale: '-1 1' },
-            },
-        },
+        'first-trigger': pageTrigger,
+        'prev-trigger': pageTrigger,
+        'next-trigger': pageTrigger,
+        'last-trigger': pageTrigger,
     },
     variants: {
         color: Object.fromEntries(ROLES.map((c) => [c, { root: { base: {
@@ -5840,6 +6841,20 @@ export const pagination = {
  */
 const stepInk = (accent, role) => `color-mix(in oklab, ${accent} `
     + `${Math.min(ROLE_INK_KEEP[role] ?? 55, 70)}%, var(--color-base-content))`;
+/** A Steps root holding wizard parts (#296) — the panel or the triggers. */
+const STEPS_WIZARD = '&:has(> [data-scope="steps"]:is([data-part="content"], [data-part="prev-trigger"], [data-part="next-trigger"]))';
+/** Steps' Back/Next (#296): the neutral daisy btn, with its 1px sink. */
+const stepsTrigger = {
+    base: { ...btn, flex: '0 0 auto', alignSelf: 'flex-start' },
+    states: {
+        hover: { background: 'var(--color-base-300)' },
+        disabled: { opacity: 'var(--disabled-opacity)', cursor: 'not-allowed' },
+        ...focusRing,
+    },
+    selectors: {
+        '&[data-pressed]:not([data-disabled])': { transform: 'translateY(1px)' },
+    },
+};
 /**
  * Steps — daisy's steps translated to the richer rail: bold numbered discs
  * on base-200, the walked disc and line refilled with the accent pair
@@ -5866,6 +6881,10 @@ export const steps = {
             },
             selectors: {
                 '&[data-orientation="vertical"]': { flexDirection: 'column' },
+                // A wizard (#296): the rail keeps its own line and the panel
+                // and triggers wrap below it. Only then — a bare rail never
+                // wraps, so its steps stay one row at any width.
+                [STEPS_WIZARD]: { flexWrap: 'wrap', rowGap: 'var(--space-md)' },
             },
         },
         /**
@@ -5904,6 +6923,10 @@ export const steps = {
                 active: { color: 'var(--steps-accent-ink)', fontWeight: 'var(--weight-semibold)' },
                 complete: { color: 'var(--color-base-content)' },
                 inactive: { color: 'color-mix(in oklch, var(--color-base-content) 65%, transparent)' },
+                // daisy's `step-error`, whatever the phase: after the phases,
+                // so it wins at equal weight. `stepInk`, not `roleInk`: the
+                // 85% error ink measured 3.79:1 on light's page as text.
+                invalid: { color: stepInk('var(--color-error)', 'error') },
                 disabled: { opacity: 'var(--disabled-opacity)', cursor: 'not-allowed' },
                 ...focusRing,
             },
@@ -5935,6 +6958,7 @@ export const steps = {
                 // the disc (#112).
                 complete: { background: 'color-mix(in oklab, var(--steps-accent) 20%, var(--color-base-100))', color: 'var(--steps-complete-ink)' },
                 inactive: { background: 'var(--color-base-200)', color: 'var(--color-base-content)' },
+                invalid: { background: 'var(--color-error)', color: 'var(--color-error-content)' },
             },
         },
         /**
@@ -5966,6 +6990,7 @@ export const steps = {
             states: {
                 complete: { background: 'var(--steps-accent)' },
                 inactive: { background: 'var(--color-base-300)' },
+                invalid: { background: 'var(--color-error)' },
             },
         },
         title: {
@@ -5980,6 +7005,25 @@ export const steps = {
                 fontWeight: 'var(--weight-normal)',
             },
         },
+        /**
+         * The active step's panel: a full-width line under the rail (the
+         * wizard wrap above). Inactive panels are `hidden`, so they need no
+         * rule.
+         */
+        content: {
+            base: {
+                flex: '1 0 100%',
+                fontSize: 'var(--text-md)',
+                color: 'var(--color-base-content)',
+            },
+            states: { active: {}, inactive: {} },
+        },
+        // Back/Next are daisy btns; Next takes the far end of their line.
+        'prev-trigger': stepsTrigger,
+        'next-trigger': {
+            ...stepsTrigger,
+            base: { ...stepsTrigger.base, marginInlineStart: 'auto' },
+        },
     },
     variants: {
         // Keyed on the ITEM, not the root (#112): the item re-carries
@@ -6163,6 +7207,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 +7295,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)',
@@ -6895,11 +7991,11 @@ 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,
+    tabs, collapsible, switchRecipe, dialog, popover, tooltip, hoverCard, menu, menubar,
+    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,
+    kbd, status, indicator, stats, timeline, chat, chatLog, radialProgress, join,
     navbar, navList, breadcrumbs, pagination, steps, drawer,
     table,
     fileUpload,