@sigx/zero-daisyui 0.7.0 → 0.8.0

package/dist/recipes.js

@@ -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.
@@ -495,7 +525,7 @@ export const tabs = {
             parts: {
                 // 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)' } } },
+                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) —
@@ -546,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)' }) },
+                    },
                 },
             },
         },
@@ -895,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: {
@@ -1011,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) } },
@@ -1130,9 +1201,10 @@ export const dialog = {
     targets: {
         lynx: {
             parts: {
-                trigger: { base: lynxBtnPad(4), states: { pressed: lynxBtnPressed } },
-                close: { base: lynxBtnPad(4), states: { pressed: lynxBtnPressed } },
-                cancel: { base: lynxBtnPad(4), states: { pressed: lynxBtnPressed } },
+                // 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') },
@@ -1223,8 +1295,9 @@ export const popover = {
         web: floatingArrow('popover', panelArrowPaint),
         lynx: {
             parts: {
-                trigger: { base: lynxBtnPad(4), states: { pressed: lynxBtnPressed } },
-                close: { base: lynxBtnPad(3), states: { pressed: lynxBtnPressed } },
+                // 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') },
         },
@@ -1273,6 +1346,56 @@ export const tooltip = {
         },
     },
 };
+/**
+ * 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',
@@ -1406,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)',
@@ -1421,11 +1555,53 @@ export const menu = {
     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
@@ -2428,6 +2604,12 @@ export const slider = {
                 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"]': {
@@ -2525,6 +2707,13 @@ export const slider = {
                         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)',
+                        }),
+                    },
                 },
             },
         },
@@ -2540,7 +2729,20 @@ export const accordion = {
                 // hover fill. The ::after chevron has no lynx counterpart (no
                 // pseudo-elements, and the anatomy declares no part for it) —
                 // an app draws its own glyph in the trigger.
-                trigger: { states: { pressed: { background: 'var(--color-base-200)' } } },
+                //
+                // 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))',
+                        },
+                    },
+                },
             },
         },
     },
@@ -2828,22 +3030,43 @@ export const select = {
                 // never wider than its container. lynx has no `clamp()`, so the
                 // same bounds are spelled out — and the base's 13rem floor
                 // comes down to daisy's 3rem, or the trigger overflowed any
-                // cell narrower than 208px (signalxjs/lynx#1146). The root
-                // caps too, so a shrink-wrapped root cannot push it back out.
-                root: { base: { maxWidth: '100%' } },
+                // 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: '20rem', maxWidth: '100%', minWidth: '3rem' },
+                    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)' } },
-                },
+                    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' } },
+                '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) } } },
             },
         },
@@ -2864,6 +3087,22 @@ export const select = {
  */
 const BTN_STEPS = { xs: 6, sm: 8, md: 10, lg: 12, xl: 14 };
 const btnHeight = (step) => `calc(var(--size-field) * ${BTN_STEPS[step]})`;
+/**
+ * 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
@@ -3058,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)' } } },
         },
     },
     /**
@@ -3099,36 +3338,90 @@ export const button = {
                 // 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).
+                // 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: 'calc(var(--border) * 2) solid var(--btn-ink)',
+                        border: '0 solid transparent',
+                        ...lynxSides('border{}Width', 'calc(var(--border) * 2)'),
+                        ...lynxSides('border{}Color', 'var(--btn-ink)', ['Right', 'Bottom', 'Left']),
                         borderTopColor: 'transparent',
                     },
                 },
-                root: { states: { disabled: lynxBtnDisabled } },
+                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).
+                // 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: { borderColor: 'var(--btn-on-accent)', borderTopColor: 'transparent' } } },
-                    outline: { root: { states: { disabled: { borderColor: 'transparent' } } } },
-                    dash: { root: { states: { disabled: { borderColor: 'transparent' } } } },
+                    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: { 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.
+            // 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)') } } },
             },
         },
     },
@@ -3208,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`.
@@ -3218,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: {
@@ -3271,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' },
@@ -3280,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: {
@@ -3289,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: {
@@ -3309,6 +3652,7 @@ export const toast = {
                 disabled: { opacity: 'var(--disabled-opacity)', cursor: 'not-allowed' },
                 ...focusRing,
             },
+            selectors: { [TOAST_MARKED]: { gridColumn: '3' } },
         },
         close: {
             base: {
@@ -3328,6 +3672,7 @@ export const toast = {
                 disabled: { opacity: 'var(--disabled-opacity)' },
                 ...focusRing,
             },
+            selectors: { [TOAST_MARKED]: { gridColumn: '4' } },
         },
     },
     variants: {
@@ -3364,6 +3709,7 @@ 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' },
+    keyframes: { 'zero-daisyui-toast-spin': 'to { transform: rotate(360deg); }' },
     targets: {
         lynx: {
             parts: {
@@ -3417,16 +3763,25 @@ export const toast = {
                 // 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)' }),
                 },
-                close: { base: { position: 'absolute', top: 'var(--space-xs)', right: 'var(--space-xs)' } },
             },
         },
     },
+    // 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',
@@ -4226,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: {
@@ -4280,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': {
@@ -4560,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',
@@ -4889,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' },
             },
         },
     },
@@ -5441,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: {
@@ -5645,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',
@@ -6031,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: {
@@ -6059,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: {
@@ -6073,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',
@@ -6123,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)',
             },
@@ -6150,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: {
@@ -6241,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
@@ -6267,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)' },
             },
         },
         /**
@@ -6305,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,
             },
@@ -6336,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)' },
             },
         },
         /**
@@ -6367,6 +6990,7 @@ export const steps = {
             states: {
                 complete: { background: 'var(--steps-accent)' },
                 inactive: { background: 'var(--color-base-300)' },
+                invalid: { background: 'var(--color-error)' },
             },
         },
         title: {
@@ -6381,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
@@ -7348,11 +7991,11 @@ export const diff = {
     },
 };
 export const recipes = [
-    tabs, collapsible, switchRecipe, dialog, popover, tooltip, menu,
+    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,