@sigx/zero-daisyui 0.5.0 → 0.7.0

package/dist/recipes.js

@@ -1,4 +1,4 @@
-import { axisRoles, tableStackAt } from '@sigx/zero-kit/define';
+import { axisRoles, popupArrow, popupArrowHost, tableStackAt } from '@sigx/zero-kit/define';
 import { roles, tokens } from './tokens.js';
 /**
  * Every role a consumer can pass as `color`, derived from the declaration
@@ -140,13 +140,45 @@ const disclosurePresence = {
         '&::details-content': {
             blockSize: '0',
             overflow: 'hidden',
+        },
+        // Open only: a close removes `open`, which hides the content before
+        // any transition could run — the panel animates that half (#276).
+        '&[open]::details-content': {
+            blockSize: 'auto',
             transition: 'block-size var(--duration-normal) var(--ease-standard), '
                 + 'content-visibility var(--duration-normal) allow-discrete',
         },
-        '&[open]::details-content': { blockSize: 'auto' },
     },
-    at: { 'reduced-motion': { selectors: { '&::details-content': { transition: 'none' } } } },
+    at: { 'reduced-motion': { selectors: { '&[open]::details-content': { transition: 'none' } } } },
 };
+/**
+ * The panel's close (#276). Removing `open` hides a `<details>` at once, so
+ * the close cannot live on `::details-content` the way the open does: zero
+ * flips the panel to `closed` first and holds the element open until the
+ * panel's own animation has played. The runtime publishes the panel's
+ * measured height as `--<scope>-panel-height`, which is the one value this
+ * needs — `auto` is not an endpoint any engine but Chromium can animate.
+ * `border-box` so the measured height (content + padding) is the whole box.
+ * Web-only: the property is written by the DOM runtime (`RUNTIME_PROPERTIES`).
+ */
+const disclosureExit = (scope) => ({
+    web: {
+        parts: {
+            panel: {
+                states: {
+                    closed: {
+                        boxSizing: 'border-box',
+                        animation: `${scope}-panel-exit var(--duration-normal) var(--ease-standard)`,
+                    },
+                },
+                at: { 'reduced-motion': { states: { closed: { animation: 'none' } } } },
+            },
+        },
+        keyframes: {
+            [`${scope}-panel-exit`]: `from { block-size: var(--${scope}-panel-height); } to { block-size: 0; padding-block: 0; }`,
+        },
+    },
+});
 /**
  * Merge presence into a part's own styles per KEY, not per block: a recipe
  * that already writes `states: { open: {} }` — the "deliberately unstyled"
@@ -191,14 +223,33 @@ const withPresence = (presence, styles) => ({
  */
 export const tabs = {
     component: 'tabs',
+    tokens: {
+        // How far the focus ring reaches outside a tab (2px + 2px offset):
+        // the list's scroll box pads by it so the ring is never clipped (#45).
+        '--tabs-ring-room': '4px',
+    },
     parts: {
         root: {
             base: { display: 'flex', flexDirection: 'column', gap: 'var(--space-lg)' },
         },
         list: {
+            // The row's own scroll box (#45), Pagination's and Stats' answer:
+            // a row of labels wider than its column (a phone, a wide fallback
+            // face) scrolls instead of pushing the page sideways.
+            // `max-inline-size` (border-box, so it includes the padding)
+            // gives the shrink-to-fit list a width to scroll in. The padding is room for the focus ring, which the
+            // scroll box would otherwise clip at the row's edges; the
+            // matching scroll padding keeps it clear when focus scrolls a
+            // tab into view. The box variant's own padding (space-xs, the
+            // same 4px) replaces it there.
             base: {
                 display: 'inline-flex',
                 alignSelf: 'flex-start',
+                boxSizing: 'border-box',
+                maxInlineSize: '100%',
+                overflowX: 'auto',
+                padding: 'var(--tabs-ring-room)',
+                scrollPaddingInline: 'var(--tabs-ring-room)',
             },
         },
         tab: {
@@ -236,6 +287,12 @@ export const tabs = {
                 ...focusRing,
             },
         },
+        // 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). 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)' },
             states: { active: {}, inactive: {} },
@@ -436,11 +493,17 @@ export const tabs = {
     targets: {
         lynx: {
             parts: {
-                // The default active ink — base-content, exactly what the
-                // shared `states.active.color` paints. One class, so any
+                // No hover on a touch platform: the held tab takes the ink
+                // daisy's hover gives it.
+                tab: { states: { pressed: { color: 'var(--color-base-content)' } } },
+                // The list is the indicator's containing block.
+                list: { base: { position: 'relative' } },
+                // The underline's ink (read by the `border` flavor below) —
+                // base-content by default, exactly what the shared
+                // `states.active.color` paints on the tab. One class, so any
                 // color-axis definition below (host + two classes, baked per
                 // theme) wins on specificity.
-                tab: { base: { '--tab-active-ink': 'var(--color-base-content)' } },
+                indicator: { base: { '--tab-active-ink': 'var(--color-base-content)' } },
             },
             variants: {
                 // `currentColor` never resolves on lynx (measured on device
@@ -450,18 +513,28 @@ export const tabs = {
                 // theme colors through color-mix(), which the emitter bakes
                 // once per theme — the same per-color/per-theme literal the
                 // active `color:` rules already land as.
-                color: Object.fromEntries(ROLES.map((c) => [c, { tab: { base: { '--tab-active-ink': roleInk(c) } } }])),
+                color: Object.fromEntries(ROLES.map((c) => [c, { indicator: { base: { '--tab-active-ink': roleInk(c) } } }])),
                 variant: {
                     // The underline is a ::before on the web, which lynx
-                    // drops — redrawn as a real bottom border on the tab
-                    // itself (transparent at rest so activation never moves
-                    // the row). The active ink rides `--tab-active-ink`
-                    // above — a plain var() chain, device-proven — instead
-                    // of `currentColor`, which lynx never resolves.
+                    // drops. It is redrawn on the `indicator` part (zero#324),
+                    // which lynx-zero renders in every list and positions
+                    // over the active tab from measured geometry (the web's
+                    // `--tabs-indicator-*` properties are web-only). The part
+                    // IS the tab's box, so daisy's bar is its bottom edge:
+                    // 3px, 80% wide and centred, like `left: 10%; width: 80%`
+                    // on the web. The ink rides `--tab-active-ink` — a plain
+                    // var() chain, device-proven — instead of `currentColor`,
+                    // which lynx never resolves.
                     border: {
-                        tab: {
-                            base: { borderBottom: '3px solid transparent' },
-                            states: { active: { borderBottomColor: 'var(--tab-active-ink)' } },
+                        indicator: {
+                            base: {
+                                display: 'flex',
+                                boxSizing: 'border-box',
+                                borderBottomWidth: '3px',
+                                borderBottomStyle: 'solid',
+                                borderBottomColor: 'var(--tab-active-ink)',
+                                transform: 'scaleX(0.8)',
+                            },
                         },
                     },
                     // `min()` does not exist on lynx (signalxjs/lynx#1066) and
@@ -505,6 +578,7 @@ const disclosureSizes = {
 // daisy "collapse collapse-arrow" flavor.
 export const collapsible = {
     component: 'collapsible',
+    targets: disclosureExit('collapsible'),
     // Public to a design system derived from this one (#73).
     hooks: {
         properties: {
@@ -621,6 +695,8 @@ export const switchRecipe = {
         root: {
             base: { display: 'inline-flex', alignItems: 'center', gap: 'var(--space-lg)', cursor: 'pointer' },
             states: {
+                // Readonly answers to nothing, so it does not invite a click.
+                readonly: { cursor: 'default' },
                 disabled: { opacity: 'var(--disabled-opacity)', cursor: 'not-allowed' },
                 checked: {},
                 unchecked: {},
@@ -753,6 +829,29 @@ export const switchRecipe = {
                             + '0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000)',
                         transition: 'background-color var(--duration-instant) var(--ease-standard)',
                     },
+                    at: {
+                        // The knob is `currentColor` background plus shadows:
+                        // forced colours revalue the one to Canvas and drop the
+                        // others, leaving two empty pill outlines that read the
+                        // same on and off (#189). Opt the knob out of forcing
+                        // and paint it in system colours — CanvasText at rest,
+                        // Highlight once checked. The noise and the shadows go
+                        // too: unforced, they would mix the forced ink back in.
+                        'forced-colors': {
+                            base: {
+                                forcedColorAdjust: 'none',
+                                backgroundColor: 'CanvasText',
+                                backgroundImage: 'none',
+                                boxShadow: 'none',
+                            },
+                            states: { checked: { backgroundColor: 'Highlight' } },
+                            // A disabled switch draws in GrayText, the forced palette's
+                            // own disabled ink, not full-strength ink faded by an
+                            // author opacity the user's theme cannot style. Keyed off
+                            // the control's flag, which outranks `checked`.
+                            selectors: { '[data-scope="switch"][data-part="control"][data-disabled] &': { backgroundColor: 'GrayText' } },
+                        },
+                    },
                 },
             },
         },
@@ -783,6 +882,10 @@ export const switchRecipe = {
                         // No currentColor on this target — the ink is named
                         // directly, and `checked` moves border + fill below.
                         border: 'var(--border) solid var(--switch-ink)',
+                        // daisy's 1px inset depth line along the track's top
+                        // edge — `currentColor` at `--depth` × 10% on the
+                        // web, the theme's own depth shade here.
+                        boxShadow: '0 1px var(--depth-shade) inset',
                         userSelect: 'none',
                         transition: 'border-color var(--duration-slow) var(--ease-standard), '
                             + 'background-color var(--duration-normal) var(--ease-standard)',
@@ -803,6 +906,12 @@ export const switchRecipe = {
                         height: 'calc(var(--switch-size) - (var(--border) + var(--switch-p)) * 2)',
                         borderRadius: 'var(--radius-selector)',
                         backgroundColor: 'var(--switch-ink)',
+                        // daisy's knob relief (`.toggle:before`): a shade
+                        // along the bottom edge, a sheen across the top, and
+                        // a 1px drop — the web's `currentColor` drop spelled
+                        // as the theme's depth shade. The noise layer has no
+                        // lynx spelling and stays web-only.
+                        boxShadow: '0 -1px var(--depth-shade) inset, 0 8px 0 -4px var(--depth-sheen) inset, 0 1px var(--depth-shade)',
                         transition: 'transform var(--duration-normal) var(--ease-standard), '
                             + 'background-color var(--duration-instant) var(--ease-standard)',
                     },
@@ -909,6 +1018,21 @@ const lynxBtnSizes = (part) => ({
     lg: { [part]: { base: lynxBtnPad(5) } },
     xl: { [part]: { base: lynxBtnPad(6) } },
 });
+/**
+ * The press rendering of the overlay btns (dialog, popover), for their
+ * `targets.lynx` sections. The web answers a pointer with `:hover`, which
+ * the lynx emitter drops (a touch platform), and these parts' `pressed`
+ * flag — stamped by the lynx runtime on every touch — had no rule, so a
+ * tap showed nothing (signalxjs/lynx#1146). daisy's `:hover` wash plus the
+ * btn's 1px sink, the same pair `button` paints for its own `pressed`. A
+ * colour variant restates the background after the states at equal
+ * specificity, so a coloured trigger keeps its fill and sinks.
+ */
+const lynxBtnPressed = {
+    background: 'var(--color-base-300)',
+    transform: 'translateY(1px)',
+    boxShadow: 'none',
+};
 export const dialog = {
     component: 'dialog',
     // Public to a design system derived from this one (#73).
@@ -1000,14 +1124,16 @@ export const dialog = {
     // reach and the trigger is the whole story here.
     variants: { color: btnColors(), size: btnSizes },
     // The btn paddings and the footer's push-down, restated physically —
-    // see `lynxBtnPad` for the #1084 verdict this answers.
+    // see `lynxBtnPad` for the #1084 verdict this answers — and the btns'
+    // press rendering (`lynxBtnPressed`). The footer states its row: on lynx
+    // a row container says so next to `display: flex`.
     targets: {
         lynx: {
             parts: {
-                trigger: { base: lynxBtnPad(4) },
-                close: { base: lynxBtnPad(4) },
-                cancel: { base: lynxBtnPad(4) },
-                footer: { base: { marginTop: 'var(--space-2xl)' } },
+                trigger: { base: lynxBtnPad(4), states: { pressed: lynxBtnPressed } },
+                close: { base: lynxBtnPad(4), states: { pressed: lynxBtnPressed } },
+                cancel: { base: lynxBtnPad(4), states: { pressed: lynxBtnPressed } },
+                footer: { base: { marginTop: 'var(--space-2xl)', flexDirection: 'row' } },
             },
             variants: { size: lynxBtnSizes('trigger') },
         },
@@ -1021,6 +1147,37 @@ 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
+ * control that opened it (`--anchor-width`, daisy's 13rem floor otherwise)
+ * and never taller than the room on the side it opened to
+ * (`--available-height`), scrolling past a 20rem cap. Border-box, so both
+ * bounds measure the box the strategy positions. Runtime-published
+ * properties are web-only, so this is each listbox recipe's `targets.web`;
+ * lynx keeps the shared 13rem.
+ */
+const anchoredListbox = {
+    boxSizing: 'border-box',
+    minWidth: 'var(--anchor-width, 13rem)',
+    maxHeight: 'min(20rem, var(--available-height, 20rem))',
+    overflowY: 'auto',
+};
 export const popover = {
     component: 'popover',
     parts: {
@@ -1041,6 +1198,14 @@ export const popover = {
         title: {
             base: { margin: '0 0 var(--space-md)', fontSize: 'var(--text-md)', fontWeight: 'var(--weight-bold)' },
         },
+        // The modal's muted body line, at the dropdown's tighter rhythm.
+        description: {
+            base: {
+                margin: '0 0 var(--space-lg)',
+                fontSize: 'var(--text-sm)',
+                color: 'color-mix(in oklab, var(--color-base-content) 75%, transparent)',
+            },
+        },
         close: {
             base: { ...btn, height: 'calc(var(--size-field) * 8)', paddingInline: 'calc(var(--size-field) * 3)', fontSize: 'var(--text-xs)' },
             states: {
@@ -1052,12 +1217,14 @@ export const popover = {
     },
     // Trigger-carried axes — same wiring as dialog, same reason.
     variants: { color: btnColors(), size: btnSizes },
-    // The btn paddings, restated physically — see `lynxBtnPad` (#1084).
+    // The btn paddings, restated physically — see `lynxBtnPad` (#1084) —
+    // and the btns' press rendering (`lynxBtnPressed`).
     targets: {
+        web: floatingArrow('popover', panelArrowPaint),
         lynx: {
             parts: {
-                trigger: { base: lynxBtnPad(4) },
-                close: { base: lynxBtnPad(3) },
+                trigger: { base: lynxBtnPad(4), states: { pressed: lynxBtnPressed } },
+                close: { base: lynxBtnPad(3), states: { pressed: lynxBtnPressed } },
             },
             variants: { size: lynxBtnSizes('trigger') },
         },
@@ -1099,6 +1266,7 @@ export const tooltip = {
     variants: { color: btnColors(), size: btnSizes },
     // The btn paddings, restated physically — see `lynxBtnPad` (#1084).
     targets: {
+        web: floatingArrow('tooltip', { background: 'var(--color-neutral)' }, '0.5rem'),
         lynx: {
             parts: { trigger: { base: lynxBtnPad(4) } },
             variants: { size: lynxBtnSizes('trigger') },
@@ -1251,6 +1419,7 @@ export const menu = {
     variants: { color: btnColors(), size: btnSizes },
     // The btn paddings, restated physically — see `lynxBtnPad` (#1084).
     targets: {
+        web: floatingArrow('menu', panelArrowPaint),
         lynx: {
             parts: { trigger: { base: lynxBtnPad(4) } },
             variants: { size: lynxBtnSizes('trigger') },
@@ -1306,6 +1475,60 @@ export const field = {
         },
     },
 };
+/**
+ * Fieldset (#285), daisyUI 5's `.fieldset` / `.fieldset-legend`: a
+ * one-column grid with a tight row gap and a little block padding, no frame
+ * of its own (daisy draws one only when the app adds `border`), and a
+ * semibold legend with block padding standing in for its margin. The UA
+ * `min-inline-size: min-content` is undone so a wide control cannot push the
+ * group past its column. Colour accents the legend through `roleInk`, the
+ * Field way.
+ */
+export const fieldset = {
+    component: 'fieldset',
+    tokens: { '--fieldset-accent': 'var(--color-base-content)' },
+    parts: {
+        root: {
+            base: {
+                display: 'grid',
+                gridTemplateColumns: '1fr',
+                gridAutoRows: 'max-content',
+                gap: 'var(--space-sm)',
+                minInlineSize: '0',
+                margin: '0',
+                paddingBlock: 'var(--space-xs)',
+                paddingInline: '0',
+                border: 'none',
+            },
+        },
+        legend: {
+            base: {
+                paddingBlock: 'var(--space-sm)',
+                paddingInline: '0',
+                fontSize: 'var(--text-sm)',
+                fontWeight: 'var(--weight-semibold)',
+                color: 'var(--fieldset-accent)',
+            },
+            states: {
+                disabled: { opacity: 'var(--disabled-opacity)' },
+                invalid: { color: roleInk('error') },
+            },
+        },
+    },
+    variants: {
+        color: Object.fromEntries(ROLES.map((c) => [c, { root: { base: {
+                        '--fieldset-accent': roleInk(c),
+                    } } }])),
+        size: {
+            xs: { legend: { base: { fontSize: 'var(--text-xs)' } } },
+            sm: { legend: { base: { fontSize: 'var(--text-xs)' } } },
+            // `md` is the un-attributed render.
+            md: {},
+            lg: { legend: { base: { fontSize: 'var(--text-md)' } } },
+            xl: { legend: { base: { fontSize: 'var(--text-lg)' } } },
+        },
+    },
+};
 /**
  * daisy's tick, drawn by a clip-path that GROWS.
  *
@@ -1380,6 +1603,8 @@ export const checkbox = {
         root: {
             base: { display: 'inline-flex', alignItems: 'center', gap: 'var(--space-md)', cursor: 'pointer' },
             states: {
+                // Readonly answers to nothing, so it does not invite a click.
+                readonly: { cursor: 'default' },
                 disabled: { opacity: 'var(--disabled-opacity)', cursor: 'not-allowed' },
                 checked: {}, unchecked: {}, indeterminate: {},
             },
@@ -1452,6 +1677,8 @@ export const checkbox = {
                 // `invalid` is semantic, not an accent: it stays error under
                 // every colour variant, on purpose.
                 invalid: { borderColor: 'var(--color-error)' },
+                // Readonly answers to nothing, so it does not invite a click.
+                readonly: { cursor: 'default' },
                 disabled: {},
             },
         },
@@ -1576,13 +1803,9 @@ export const radioGroup = {
     parts: {
         root: {
             base: { display: 'flex', flexDirection: 'column', gap: 'var(--space-md)' },
+            // `invalid` paints on each `item-control`, which carries the flag
+            // itself (#267) — the root only groups the items.
             states: { invalid: {}, required: {} },
-            selectors: {
-                // `invalid` is a fact about the GROUP — `item-control` carries
-                // no flag of its own — and it is semantic: it stays error
-                // under every colour variant.
-                '&[data-invalid] [data-part="item-control"]': { borderColor: 'var(--color-error)' },
-            },
         },
         label: {
             base: { fontSize: 'var(--text-sm)', fontWeight: 'var(--weight-semibold)' },
@@ -1591,6 +1814,8 @@ export const radioGroup = {
         item: {
             base: { display: 'inline-flex', alignItems: 'center', gap: 'var(--space-md)', cursor: 'pointer' },
             states: {
+                // Readonly answers to nothing, so it does not invite a click.
+                readonly: { cursor: 'default' },
                 disabled: { opacity: 'var(--disabled-opacity)', cursor: 'not-allowed' },
                 checked: {}, unchecked: {},
             },
@@ -1625,6 +1850,10 @@ export const radioGroup = {
                     animation: 'var(--duration-fast) var(--ease-standard) zero-daisy-radio',
                 },
                 unchecked: {},
+                // `invalid` is semantic: it stays error under every colour
+                // variant, and after `checked` so it holds whichever radio is
+                // chosen.
+                invalid: { borderColor: 'var(--color-error)' },
                 'focus-visible': { outline: '2px solid var(--radio-accent)', outlineOffset: '2px' },
                 disabled: {},
             },
@@ -1695,6 +1924,47 @@ export const radioGroup = {
         },
     },
 };
+/**
+ * CheckboxGroup (#282) — daisy has no group component; its forms stack
+ * `.checkbox` rows under a `fieldset-legend`. The boxes keep the checkbox
+ * recipe; the group owns the stack and the legend, which speaks Field's
+ * label (colour through `roleInk`, #210).
+ */
+export const checkboxGroup = {
+    component: 'checkbox-group',
+    tokens: { '--checkbox-group-accent': 'var(--color-base-content)' },
+    parts: {
+        root: {
+            base: { display: 'flex', flexDirection: 'column', gap: 'var(--space-md)' },
+            // `invalid` and `readonly` paint on each box — the root only
+            // lays the boxes out.
+            states: { invalid: {}, required: {}, readonly: {} },
+            selectors: {
+                '&[data-orientation="horizontal"]': { flexDirection: 'row', flexWrap: 'wrap', columnGap: 'var(--space-lg)' },
+            },
+        },
+        label: {
+            base: { fontSize: 'var(--text-sm)', fontWeight: 'var(--weight-semibold)', color: 'var(--checkbox-group-accent)' },
+            states: { disabled: { opacity: 'var(--disabled-opacity)' } },
+            selectors: {
+                '&[data-required]::after': { content: '" *"', color: roleInk('error') },
+            },
+        },
+    },
+    variants: {
+        color: Object.fromEntries(ROLES.map((c) => [c, { root: { base: {
+                        '--checkbox-group-accent': roleInk(c),
+                    } } }])),
+        size: {
+            xs: { root: { base: { gap: 'var(--space-sm)' } }, label: { base: { fontSize: 'var(--text-xs)' } } },
+            sm: { label: { base: { fontSize: 'var(--text-xs)' } } },
+            md: {},
+            lg: { label: { base: { fontSize: 'var(--text-md)' } } },
+            xl: { root: { base: { gap: 'var(--space-lg)' } }, label: { base: { fontSize: 'var(--text-lg)' } } },
+        },
+    },
+    skipStates: { label: ['invalid'] },
+};
 // --------------------------------------------------------------------------
 // 4. progress — replace the whole export (only the two radius lines move)
 // --------------------------------------------------------------------------
@@ -1756,9 +2026,13 @@ export const progress = {
                 transition: 'width var(--duration-slow) var(--ease-standard)',
             },
             states: {
-                // `complete` is a semantic state, not an accent: it stays
-                // success regardless of the colour variant, on purpose.
-                complete: { background: progressFill('success', 55) },
+                // `complete` keeps the colour axis. daisyUI 5 has no complete
+                // tint — a full `progress-primary` stays primary — and a
+                // `color="secondary"` bar that turns green at 100% reads as a
+                // bug, not as meaning (signalxjs/lynx#1144). A caller who wants
+                // "done" to look like success says so: `color="success"`.
+                // Declared equal to `loading` in `sameAs` below.
+                complete: {},
                 loading: {},
                 indeterminate: { width: '40%', animation: 'zero-daisy-indeterminate 1.2s ease-in-out infinite' },
             },
@@ -1794,6 +2068,8 @@ export const progress = {
     // so the manifest states the default for runtimes with no `:not()`
     // fallback (the lynx target; signalxjs/lynx#1070).
     defaultVariants: { color: 'primary', size: 'md' },
+    // A finished bar is a full bar of the same ink (see `complete` above).
+    sameAs: { root: { complete: 'loading' }, range: { complete: 'loading' } },
     keyframes: {
         // Logical, so the sweep runs the way the bar fills — `margin-inline-start`
         // is animatable and direction-aware on its own. The determinate `width`,
@@ -1814,9 +2090,19 @@ 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',
-    tokens: { '--slider-accent': 'var(--color-primary)' },
+    // daisy's `.range` metrics: the thumb is `--range-thumb-size`
+    // (×6 of `--size-selector` at md, ×4…×8 across the ramp — the same
+    // selector ramp checkbox rides) and the track is half of it. Both the
+    // native control and the composed parts read these.
+    tokens: {
+        '--slider-accent': 'var(--color-primary)',
+        '--slider-track-size': 'calc(var(--size-selector) * 3)',
+        '--slider-thumb-size': 'calc(var(--size-selector) * 6)',
+    },
     parts: {
         root: {
             base: { display: 'flex', flexDirection: 'column', gap: 'var(--space-sm)', width: '100%' },
@@ -1826,30 +2112,106 @@ export const slider = {
             base: { fontSize: 'var(--text-sm)', fontWeight: 'var(--weight-semibold)' },
             states: { disabled: {} },
         },
+        // A custom skin (`appearance: none`), ported from daisyUI 5's
+        // `range.css`: a `--radius-selector` track half the thumb's height,
+        // and daisy's real range thumb — a `base-100` knob inside a
+        // `.25rem` ring of the fill ink (daisy's `--range-p`), carrying the
+        // same `--depth` inset shading the checkbox and radio wear. daisy
+        // throws the elapsed fill as a 100cqw box-shadow off the thumb and
+        // clips it with `overflow: hidden`; here the track reads the
+        // runtime-published `--slider-percent` as a gradient stop instead,
+        // as every other skin does. The fill is deepened toward
+        // `base-content` the way `progressFill` deepens daisy's bar — a raw
+        // role on the base-300 rail is exactly the #210/#228 bug class.
+        //
+        // The rebuild is also the correctness move (see the kit skill): Blink
+        // treats range inputs as ALWAYS `:focus-visible`, even on mouse
+        // focus, so the base kills the native outline and the
+        // `focus-visible` state — compiled to the runtime's keyboard-only
+        // `[data-focus-visible]` flag — draws the ring only when it means it.
         control: {
-            base: { width: '100%', accentColor: 'var(--slider-accent)', cursor: 'pointer' },
+            base: {
+                appearance: 'none',
+                width: '100%',
+                height: 'var(--slider-thumb-size)',
+                margin: '0',
+                background: 'transparent',
+                cursor: 'pointer',
+                outline: 'none',
+                // Kept for the forced-colors fallback below, where native
+                // rendering takes over and still honours the accent.
+                accentColor: 'var(--slider-accent)',
+                // `--slider-fill` and `--slider-track` live in targets.web
+                // below: the fill is a color-mix() the lynx emitter drops,
+                // and the track reads the runtime-published
+                // `--slider-percent`, a web-only mechanism.
+            },
             states: {
+                // Readonly answers to nothing, so it does not invite a click.
+                readonly: { cursor: 'default' },
                 disabled: { cursor: 'not-allowed' },
                 'focus-visible': { outline: '2px solid var(--slider-accent)', outlineOffset: '2px' },
                 // `invalid` is semantic: it stays error under every colour
-                // variant, on purpose.
-                invalid: { accentColor: 'var(--color-error)' },
+                // variant, on purpose — the accent indirection swaps the
+                // fill, the thumb ring, the focus ring and the forced-colors
+                // fallback together.
+                invalid: { '--slider-accent': 'var(--color-error)' },
+            },
+            selectors: {
+                // Vendor pseudos cannot share a selector list — one unknown
+                // selector invalidates the whole rule — so each engine gets
+                // its own copy reading the shared custom properties.
+                '&::-webkit-slider-runnable-track': {
+                    height: 'var(--slider-track-size)',
+                    borderRadius: 'var(--radius-selector)',
+                    background: 'var(--slider-track)',
+                },
+                '&::-webkit-slider-thumb': {
+                    appearance: 'none',
+                    boxSizing: 'border-box',
+                    width: 'var(--slider-thumb-size)',
+                    height: 'var(--slider-thumb-size)',
+                    marginTop: 'calc((var(--slider-track-size) - var(--slider-thumb-size)) / 2)',
+                    borderRadius: 'calc(var(--radius-selector) + min(0.25rem, var(--radius-selector) * 3))',
+                    border: '0.25rem solid var(--slider-fill)',
+                    background: 'var(--color-base-100)',
+                    boxShadow: '0 -1px var(--depth-shade) inset, 0 8px 0 -4px var(--depth-sheen) inset',
+                },
+                '&::-moz-range-track': {
+                    height: 'var(--slider-track-size)',
+                    borderRadius: 'var(--radius-selector)',
+                    background: 'var(--slider-track)',
+                },
+                '&::-moz-range-thumb': {
+                    boxSizing: 'border-box',
+                    width: 'var(--slider-thumb-size)',
+                    height: 'var(--slider-thumb-size)',
+                    borderRadius: 'calc(var(--radius-selector) + min(0.25rem, var(--radius-selector) * 3))',
+                    border: '0.25rem solid var(--slider-fill)',
+                    background: 'var(--color-base-100)',
+                    boxShadow: '0 -1px var(--depth-shade) inset, 0 8px 0 -4px var(--depth-sheen) inset',
+                },
+            },
+            at: {
+                // Native rendering knows forced colors better than a custom
+                // skin; the retained accentColor keeps the fallback branded.
+                'forced-colors': { base: { appearance: 'auto' } },
             },
         },
-        // The composed range projection (#325). The native control above
-        // stays UA-drawn behind `accentColor`; the composed parts restate the
-        // same accent as real boxes. The fill is deepened toward
-        // `base-content` the way `progressFill` deepens daisy's bar — a raw
-        // role on the base-300 rail is exactly the #210/#228 bug class.
+        // The composed range projection (#325): the same metrics as the
+        // native control above, restating its accent as real boxes. The
+        // fill is the same deepened ink the native track paints.
         track: {
             base: {
-                height: 'calc(var(--size-selector) * 2)',
-                marginBlock: 'calc(var(--size-selector) * 1.5)',
+                height: 'var(--slider-track-size)',
+                // Reserve the thumb's overhang so the row's box matches the
+                // native control's.
+                marginBlock: 'calc((var(--slider-thumb-size) - var(--slider-track-size)) / 2)',
                 borderRadius: '9999px',
                 background: 'var(--color-base-300)',
                 cursor: 'pointer',
             },
-            states: { disabled: { cursor: 'not-allowed' } },
+            states: { readonly: { cursor: 'default' }, disabled: { cursor: 'not-allowed' } },
         },
         range: {
             base: {
@@ -1862,11 +2224,11 @@ export const slider = {
         thumb: {
             base: {
                 boxSizing: 'border-box',
-                width: 'calc(var(--size-selector) * 5)',
-                height: 'calc(var(--size-selector) * 5)',
+                width: 'var(--slider-thumb-size)',
+                height: 'var(--slider-thumb-size)',
                 insetBlockStart: '50%',
                 translate: '0 -50%',
-                marginInlineStart: 'calc(var(--size-selector) * -2.5)',
+                marginInlineStart: 'calc(var(--slider-thumb-size) / -2)',
                 borderRadius: '9999px',
                 background: 'color-mix(in oklab, var(--slider-accent) 90%, var(--color-base-content))',
                 cursor: 'pointer',
@@ -1876,12 +2238,14 @@ export const slider = {
             states: {
                 'focus-visible': { outline: '2px solid var(--slider-accent)', outlineOffset: '2px' },
                 pressed: {},
+                // Readonly answers to nothing, so it does not invite a click.
+                readonly: { cursor: 'default' },
                 disabled: { cursor: 'not-allowed' },
             },
         },
         mark: {
             base: {
-                paddingBlockStart: 'calc(var(--size-selector) * 2 + var(--space-2xs))',
+                paddingBlockStart: 'calc(var(--slider-track-size) + var(--space-2xs))',
                 fontSize: 'var(--text-xs)',
                 lineHeight: '1',
                 whiteSpace: 'nowrap',
@@ -1895,7 +2259,7 @@ export const slider = {
                     insetBlockStart: '0',
                     insetInlineStart: '-1px',
                     width: '2px',
-                    height: 'calc(var(--size-selector) * 2)',
+                    height: 'var(--slider-track-size)',
                     background: 'var(--color-base-content)',
                 },
             },
@@ -1908,57 +2272,222 @@ export const slider = {
         color: Object.fromEntries(ROLES.map((c) => [c, { root: { base: {
                         '--slider-accent': `var(--color-${c})`,
                     } } }])),
-        // A native range widget: only its box height is size-able without an
-        // appearance:none rebuild, so the ramp moves the box and the text.
+        // daisy's `.range-{xs…xl}` ramp: `--range-thumb-size` at ×4…×8 of
+        // `--size-selector` (1 / 1.25 / 1.5 / 1.75 / 2rem), the track half
+        // of it — so every step moves the whole widget; the un-attributed
+        // (and `md`) render takes the middle step from `tokens:`.
         size: {
-            xs: { control: { base: { height: 'calc(var(--size-selector) * 3)' } }, label: { base: { fontSize: 'var(--text-xs)' } } },
-            sm: { control: { base: { height: 'calc(var(--size-selector) * 4)' } }, label: { base: { fontSize: 'var(--text-sm)' } } },
+            xs: { root: { base: { '--slider-track-size': 'calc(var(--size-selector) * 2)', '--slider-thumb-size': 'calc(var(--size-selector) * 4)' } }, label: { base: { fontSize: 'var(--text-xs)' } } },
+            sm: { root: { base: { '--slider-track-size': 'calc(var(--size-selector) * 2.5)', '--slider-thumb-size': 'calc(var(--size-selector) * 5)' } }, label: { base: { fontSize: 'var(--text-sm)' } } },
+            // `md`'s metrics ARE the `tokens:` defaults — one source of truth.
             md: { label: { base: { fontSize: 'var(--text-sm)' } } },
-            lg: { control: { base: { height: 'calc(var(--size-selector) * 7)' } }, label: { base: { fontSize: 'var(--text-md)' } } },
-            xl: { control: { base: { height: 'calc(var(--size-selector) * 8)' } }, label: { base: { fontSize: 'var(--text-lg)' } } },
+            lg: { root: { base: { '--slider-track-size': 'calc(var(--size-selector) * 3.5)', '--slider-thumb-size': 'calc(var(--size-selector) * 7)' } }, label: { base: { fontSize: 'var(--text-md)' } } },
+            xl: { root: { base: { '--slider-track-size': 'calc(var(--size-selector) * 4)', '--slider-thumb-size': 'calc(var(--size-selector) * 8)' } }, label: { base: { fontSize: 'var(--text-lg)' } } },
         },
     },
-    // Base equals the default — `tokens:` binds the primary accent, and `md`
-    // only restates the label font-size the base already declares (the
-    // control's base height IS the middle step) — so the twins restate it;
+    // Base equals the default — `tokens:` binds the primary accent and the
+    // middle-step metrics, and `md` only restates the label font-size the
+    // base already declares — so the twins restate it;
     // declared for the manifest (signalxjs/lynx#1070).
     defaultVariants: { color: 'primary', size: 'md' },
     skipStates: { root: ['invalid', 'focus-visible'] },
     // ONE design decision, two paints. On the web the accent reaches the
-    // screen twice: the native control is UA-drawn behind `accent-color`, and
-    // the composed range/thumb deepen the accent with `color-mix()`. Lynx
-    // renders neither spelling — `accent-color` styles a native
-    // `<input type=range>` lynx does not have, and the emitter drops
-    // `color-mix()` as unresolvable — so the compiled range and thumb shipped
-    // with no paint at all: grey track, invisible fill, invisible knob
-    // (measured on device, signalxjs/lynx#1075). The geometry all survives
-    // (the sizes are direct calc(), proven working); paint is the only gap,
-    // so this section only restates paint, in lynx-expressible spellings.
+    // screen twice, both times deepened with `color-mix()`: the native
+    // control's gradient track and thumb ring (via `--slider-fill`, below),
+    // and the composed range/thumb. Lynx renders neither — it has no native
+    // `<input type=range>`, and the emitter drops `color-mix()` as
+    // unresolvable — so the compiled range and thumb once shipped with no
+    // paint at all: grey track, invisible fill, invisible knob (measured on
+    // device, signalxjs/lynx#1075). The geometry all survives (the sizes are
+    // direct calc() over the metric tokens); paint is the only gap, so the
+    // lynx section only restates paint, in lynx-expressible spellings, plus
+    // the physical restatement of the logical geometry.
     targets: {
+        web: {
+            parts: {
+                control: {
+                    base: {
+                        // The fill ink, deepened like the composed range.
+                        '--slider-fill': 'color-mix(in oklab, var(--slider-accent) 90%, var(--color-base-content))',
+                        // The filled track reads the runtime-published
+                        // `--slider-percent` — web-only (`RUNTIME_PROPERTIES`);
+                        // the lynx runtime paints its own track/range parts.
+                        '--slider-track': 'linear-gradient(to right, var(--slider-fill) var(--slider-percent, 50%), var(--color-base-300) 0)',
+                    },
+                    selectors: {
+                        // A vertical native range is spelled through writing
+                        // mode by the runtime (#170), so the long axis is the
+                        // box's HEIGHT and the channel's WIDTH; the fill
+                        // grows from the foot.
+                        '&[data-orientation="vertical"]': {
+                            width: 'var(--slider-thumb-size)',
+                            height: 'var(--slider-length)',
+                            '--slider-track': 'linear-gradient(to top, var(--slider-fill) var(--slider-percent, 50%), var(--color-base-300) 0)',
+                        },
+                        '&[data-orientation="vertical"]::-webkit-slider-runnable-track': {
+                            width: 'var(--slider-track-size)',
+                            height: 'auto',
+                        },
+                        // Blink lays the thumb against the channel's block
+                        // axis — in vertical-lr that is its left edge.
+                        '&[data-orientation="vertical"]::-webkit-slider-thumb': {
+                            marginTop: '0',
+                            marginBlockStart: 'calc((var(--slider-track-size) - var(--slider-thumb-size)) / 2)',
+                        },
+                        '&[data-orientation="vertical"]::-moz-range-track': {
+                            width: 'var(--slider-track-size)',
+                            height: '100%',
+                        },
+                    },
+                },
+                // Vertical (#170): the runtime positions the moving parts by
+                // physical `bottom` percents; these turn the channel upright and
+                // re-centre the knob on the other axis. Web-only — the lynx
+                // runtime ships no vertical slider.
+                root: {
+                    selectors: {
+                        '&[data-orientation="vertical"]': {
+                            width: 'auto',
+                            alignItems: 'center',
+                            '--slider-length': 'calc(var(--size-selector) * 40)',
+                        },
+                    },
+                },
+                track: {
+                    selectors: {
+                        '&[data-orientation="vertical"]': {
+                            width: 'var(--slider-track-size)',
+                            height: 'var(--slider-length)',
+                            marginBlock: '0',
+                            marginInline: 'calc((var(--slider-thumb-size) - var(--slider-track-size)) / 2)',
+                        },
+                    },
+                },
+                range: {
+                    selectors: {
+                        '&[data-orientation="vertical"]': { insetInlineStart: '0', width: '100%' },
+                    },
+                },
+                thumb: {
+                    selectors: {
+                        '&[data-orientation="vertical"]': {
+                            insetBlockStart: 'auto',
+                            insetInlineStart: '50%',
+                            translate: 'none',
+                            marginInlineStart: 'calc(var(--slider-thumb-size) / -2)',
+                            marginBlockEnd: 'calc(var(--slider-thumb-size) / -2)',
+                        },
+                    },
+                },
+                // The label sits beside the channel, centred on its tick.
+                mark: {
+                    selectors: {
+                        '&[data-orientation="vertical"]': {
+                            insetInlineStart: '0',
+                            paddingBlockStart: '0',
+                            paddingInlineStart: 'calc(var(--slider-track-size) + var(--space-2xs))',
+                            translate: '0 50%',
+                        },
+                        '&[data-orientation="vertical"]::before': {
+                            insetBlockStart: '50%',
+                            insetInlineStart: '0',
+                            width: 'var(--slider-track-size)',
+                            height: '2px',
+                            translate: '0 -50%',
+                        },
+                    },
+                },
+            },
+        },
         lynx: {
+            // The web's deepened fill, theme-baked: `color-mix()` over theme
+            // colours cannot resolve on device, but the emitter restates a
+            // colour function per theme as literals (as `progress` does for
+            // its accent), so each colour step gets the same 90/10 mix the
+            // web track and knob ring wear. Bound on the root like
+            // `--slider-accent`, rebound by `color` below and by `invalid`
+            // on the control (which wraps the rail on lynx).
+            tokens: { '--slider-fill': sliderFill('var(--color-primary)') },
+            variants: {
+                color: Object.fromEntries(ROLES.map((c) => [c, { root: { base: {
+                                '--slider-fill': sliderFill(`var(--color-${c})`),
+                            } } }])),
+            },
             parts: {
+                // Vertical (lynx#1144): the lynx runtime positions the moving
+                // parts itself — `top` percentages, the knob centred by
+                // `left: 50%` plus the base's `translateY(-50%)` and
+                // negative `margin-left` — so the class rules only turn the
+                // channel upright: the control is a thumb-wide column of
+                // daisy's rail length, the track fills it.
+                root: {
+                    selectors: {
+                        '&[data-orientation="vertical"]': { width: 'auto', alignItems: 'center' },
+                    },
+                },
+                control: {
+                    states: {
+                        invalid: { '--slider-fill': sliderFill('var(--color-error)') },
+                    },
+                    selectors: {
+                        '&[data-orientation="vertical"]': {
+                            display: 'flex',
+                            flexDirection: 'row',
+                            justifyContent: 'center',
+                            width: 'var(--slider-thumb-size)',
+                            height: 'calc(var(--size-selector) * 40)',
+                        },
+                    },
+                },
                 track: {
                     // The web track's `margin-block` breathing room,
                     // restated physically: logical spellings resolve on iOS
                     // but not on Android (measured, signalxjs/lynx#1084), so
                     // the emitter refuses them. Physical is the lynx
                     // target's norm — no RTL flow there.
+                    //
+                    // daisy's channel radius is the selector radius (the
+                    // native control's runnable-track), not a pill.
                     base: {
-                        marginTop: 'calc(var(--size-selector) * 1.5)',
-                        marginBottom: 'calc(var(--size-selector) * 1.5)',
+                        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(--size-selector) * 2 + 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
@@ -1969,13 +2498,16 @@ export const slider = {
                     // `--range-thumb` defaults to `var(--color-base-100)`,
                     // `--range-p` is daisy's literal `.25rem` (deliberately
                     // not the theme's size token), and the border ink is the
-                    // accent (currentColor on a daisy `.range-*` IS the
-                    // accent role) — because on lynx a named value is a
-                    // var-chain fewer to resolve. daisy paints the progress
-                    // fill itself as a 100cqw box-shadow thrown off this
-                    // thumb — a native-input trick with no lynx equivalent;
-                    // the composed `.zx-slider__range` box above IS that
-                    // fill here, so the knob only needs its own two paints.
+                    // deepened fill the web's native thumb ring reads. daisy
+                    // paints the progress fill itself as a 100cqw box-shadow
+                    // thrown off this thumb — a native-input trick with no
+                    // lynx equivalent; the composed `.zx-slider__range` box
+                    // above IS that fill here, so the knob only needs its own
+                    // paints. Its radius is daisy's formula minus the min()
+                    // clamp lynx cannot evaluate — exact for every shipped
+                    // theme (all set `--radius-selector` ≥ .25rem / 3) — and
+                    // it wears daisy's depth shading (`currentColor`'s 10%
+                    // outer shadow spelled as the theme's shade).
                     //
                     // The centering geometry is restated physically beside
                     // the paint: `inset-block-start`/`translate`/
@@ -1986,10 +2518,12 @@ 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(--size-selector) * -2.5)',
+                        marginLeft: 'calc(var(--slider-thumb-size) / -2)',
                     },
                 },
             },
@@ -1998,12 +2532,26 @@ export const slider = {
 };
 export const accordion = {
     component: 'accordion',
+    targets: {
+        ...disclosureExit('accordion'),
+        lynx: {
+            parts: {
+                // No hover on a touch platform: the held trigger takes daisy's
+                // hover fill. The ::after chevron has no lynx counterpart (no
+                // pseudo-elements, and the anatomy declares no part for it) —
+                // an app draws its own glyph in the trigger.
+                trigger: { states: { pressed: { background: 'var(--color-base-200)' } } },
+            },
+        },
+    },
     // Same accent grammar as collapsible: the open heading's ink, defaulting
     // to base-content so the un-attributed render is unchanged.
     tokens: { '--accordion-accent': 'var(--color-base-content)' },
     parts: {
         root: {
             base: { display: 'flex', flexDirection: 'column', gap: 'var(--space-md)' },
+            // `orientation="horizontal"` (#276): the cards sit in a row.
+            selectors: { '&[data-orientation="horizontal"]': { flexDirection: 'row', alignItems: 'start' } },
         },
         item: withPresence(disclosurePresence, {
             base: {
@@ -2013,6 +2561,7 @@ export const accordion = {
                 overflow: 'hidden',
             },
             states: { open: {}, closed: {} },
+            selectors: { '[data-scope="accordion"][data-part="root"][data-orientation="horizontal"] > &': { flex: '1 1 0', minInlineSize: '0' } },
         }),
         trigger: {
             base: {
@@ -2095,14 +2644,20 @@ const fieldControl = {
     borderRadius: 'var(--radius-field)',
     boxShadow: 'var(--shadow-xs)',
 };
+/**
+ * A select whose clear-trigger is rendered (#280) — anchored on the root, so
+ * a part inside the trigger can make room for the button laid over it.
+ */
+const SELECT_CLEARABLE = '[data-scope="select"][data-part="root"]:has(> [data-scope="select"][data-part="clear-trigger"]) &';
 export const select = {
     component: 'select',
     // Accent as text/border ink only — daisy's highlighted item is a neutral
     // base-200 wash, so no `-on-accent` content colour is consumed here.
     tokens: { '--select-accent': 'var(--color-primary)' },
     parts: {
+        // Positioned: the clear-trigger sits over the trigger's inline end.
         root: {
-            base: { display: 'inline-flex', flexDirection: 'column' },
+            base: { display: 'inline-flex', flexDirection: 'column', position: 'relative' },
         },
         trigger: {
             base: {
@@ -2115,6 +2670,8 @@ export const select = {
             },
             states: {
                 hover: { borderColor: 'var(--color-base-content)' },
+                // Readonly answers to nothing, so it does not invite a click.
+                readonly: { cursor: 'default' },
                 disabled: { opacity: 'var(--disabled-opacity)', cursor: 'not-allowed' },
                 open: { borderColor: 'var(--select-accent)' },
                 closed: {},
@@ -2151,6 +2708,41 @@ export const select = {
         indicator: {
             base: { opacity: '0.6', transition: 'transform var(--duration-normal) var(--ease-standard)' },
             states: { open: { transform: 'rotate(180deg)' }, closed: {} },
+            // Room for the clear-trigger laid over the field (#280).
+            selectors: { [SELECT_CLEARABLE]: { marginInlineStart: 'calc(var(--space-2xl) + var(--space-sm))' } },
+        },
+        // Clears the selection (#280): daisy's ghost-btn over the field's
+        // inline end, just before the chevron — muted like it, the base-200
+        // wash on hover, the base-content ring on focus.
+        'clear-trigger': {
+            base: {
+                appearance: 'none',
+                position: 'absolute',
+                insetBlock: '0',
+                // Centred in the field at WCAG 2.5.8's 24px target, shrinking
+                // only with a field too short to hold it.
+                marginBlock: 'auto',
+                blockSize: 'min(1.5rem, 100%)',
+                minInlineSize: '1.5rem',
+                insetInlineEnd: 'calc(var(--size-field) * 4 + 1em + var(--space-xs))',
+                display: 'inline-flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                padding: '0 var(--space-xs)',
+                border: 'none',
+                background: 'transparent',
+                color: 'color-mix(in oklab, var(--color-base-content) 70%, transparent)',
+                font: 'inherit',
+                fontSize: 'var(--text-sm)',
+                lineHeight: 'var(--leading-none)',
+                borderRadius: 'var(--radius-field)',
+                cursor: 'pointer',
+                transition: 'background var(--duration-fast) var(--ease-standard)',
+            },
+            states: {
+                hover: { background: 'var(--color-base-200)', color: 'var(--color-base-content)' },
+                ...focusRing,
+            },
         },
         popup: withPresence(popupPresence('translateY(-4px)'), {
             base: { ...floatingPanel, padding: 'var(--space-md)', minWidth: '13rem' },
@@ -2199,6 +2791,14 @@ export const select = {
             base: { fontSize: 'var(--text-xs)', color: 'var(--select-accent)' },
             states: { selected: {} },
         },
+        // The menu's rule between runs of options (#280).
+        separator: {
+            base: {
+                height: 'var(--border)',
+                margin: 'var(--space-sm) var(--space-md)',
+                background: 'var(--color-base-300)',
+            },
+        },
     },
     variants: {
         color: Object.fromEntries(ROLES.map((c) => [c, { root: { base: {
@@ -2221,8 +2821,28 @@ export const select = {
     // The trigger ramp restates `md` too (unlike `btnSizes`), so its lynx
     // counterpart does as well.
     targets: {
+        web: { parts: { popup: { base: anchoredListbox } } },
         lynx: {
-            parts: { trigger: { base: lynxBtnPad(4) } },
+            parts: {
+                // daisy's `.select` is `width: clamp(3rem, 20rem, 100%)`: 20rem,
+                // never wider than its container. lynx has no `clamp()`, so the
+                // same bounds are spelled out — and the base's 13rem floor
+                // comes down to daisy's 3rem, or the trigger overflowed any
+                // cell narrower than 208px (signalxjs/lynx#1146). The root
+                // caps too, so a shrink-wrapped root cannot push it back out.
+                root: { base: { maxWidth: '100%' } },
+                trigger: {
+                    base: { ...lynxBtnPad(4), width: '20rem', maxWidth: '100%', minWidth: '3rem' },
+                    // The web's `:hover` border is dropped on a touch
+                    // platform; a press gets a wash instead — a background,
+                    // so it never fights the open/invalid border inks.
+                    states: { pressed: { background: 'var(--color-base-200)' } },
+                },
+                // A touch list has no highlight: the pressed item takes the
+                // highlighted item's wash.
+                item: { states: { pressed: { background: 'var(--color-base-200)' } } },
+                'clear-trigger': { base: { top: 'var(--space-xs)', bottom: 'var(--space-xs)', right: 'calc(var(--size-field) * 4 + 1em + var(--space-xs))', minWidth: '1.5rem' } },
+            },
             variants: {
                 size: { ...lynxBtnSizes('trigger'), md: { trigger: { base: lynxBtnPad(4) } } },
             },
@@ -2244,6 +2864,22 @@ export const select = {
  */
 const BTN_STEPS = { xs: 6, sm: 8, md: 10, lg: 12, xl: 14 };
 const btnHeight = (step) => `calc(var(--size-field) * ${BTN_STEPS[step]})`;
+/**
+ * daisy 5's disabled btn, for the lynx target (signalxjs/lynx#1143). The web
+ * fades the whole button (`opacity: var(--disabled-opacity)`, 0.3 on the
+ * dark themes), which on device left a solid button's label barely legible.
+ * daisy's own `.btn:disabled` paints instead: a base-content wash (not on
+ * ghost/link), a transparent border, no shadow, and a muted base-content
+ * label. daisy mutes that label to 20%; this keeps it at 50%, still plainly
+ * inert but readable on a phone at arm's length.
+ */
+const lynxBtnDisabled = {
+    opacity: '1',
+    background: 'color-mix(in oklab, var(--color-base-content) 10%, transparent)',
+    color: 'color-mix(in oklab, var(--color-base-content) 50%, transparent)',
+    borderColor: 'transparent',
+    boxShadow: 'none',
+};
 export const button = {
     component: 'button',
     // Public to a design system derived from this one (#73).
@@ -2457,11 +3093,39 @@ export const button = {
     },
     defaultVariants: { color: 'primary', variant: 'solid', size: 'md' },
     keyframes: { 'zero-daisyui-btn-spin': 'to { transform: rotate(360deg) }' },
-    // The icon chips' zeroed inline padding, restated physically: logical
-    // spellings resolve on iOS but not on Android (measured,
-    // signalxjs/lynx#1084), so the emitter refuses them.
     targets: {
         lynx: {
+            parts: {
+                // The ring, restated: `currentColor` never resolves on lynx
+                // (signalxjs/lynx#1079) and the logical sizes/edge are
+                // unproven there, so the lynx ring is physical longhands in
+                // the variant's own ink (the variants below pick it).
+                spinner: {
+                    base: {
+                        width: '1em',
+                        height: '1em',
+                        border: 'calc(var(--border) * 2) solid var(--btn-ink)',
+                        borderTopColor: 'transparent',
+                    },
+                },
+                root: { states: { disabled: lynxBtnDisabled } },
+            },
+            variants: {
+                // The baked disabled paint above outranks every variant's fill
+                // (the theme host adds a class), but its plain declarations
+                // do not: outline/dash restate the border, ghost/link drop
+                // the wash (as in daisy).
+                variant: {
+                    solid: { spinner: { base: { borderColor: 'var(--btn-on-accent)', borderTopColor: 'transparent' } } },
+                    outline: { root: { states: { disabled: { borderColor: 'transparent' } } } },
+                    dash: { root: { states: { disabled: { borderColor: 'transparent' } } } },
+                    ghost: { root: { states: { disabled: { background: 'transparent' } } } },
+                    link: { root: { states: { disabled: { background: 'transparent' } } } },
+                },
+            },
+            // The icon chips' zeroed inline padding, restated physically: logical
+            // spellings resolve on iOS but not on Android (measured,
+            // signalxjs/lynx#1084), so the emitter refuses them.
             modifiers: {
                 square: { root: { base: { paddingLeft: '0', paddingRight: '0' } } },
                 circle: { root: { base: { paddingLeft: '0', paddingRight: '0' } } },
@@ -2700,21 +3364,66 @@ export const toast = {
     // signalxjs/lynx#1070. No `color` default: the un-attributed toast is a
     // neutral base-200 surface, outside the color vocabulary.
     defaultVariants: { size: 'md' },
-    // The corner placements' physical anchors: logical inset spellings
-    // resolve on iOS but not on Android (measured, signalxjs/lynx#1084), so
-    // the emitter refuses them. Physical is the lynx target's norm — no RTL
-    // flow there, so `start` IS left and `end` IS right.
     targets: {
         lynx: {
             parts: {
+                // The viewport is a full-width strip on lynx (the runtime pins
+                // it to the outlet's top or bottom edge). What the web gets
+                // from `:popover-open` and `min(24rem, 100vw)` is restated:
+                // flex (a lynx view defaults to linear layout, which ignores
+                // flex-direction and gap), and the cards aligned to the
+                // placement's edge. The centred pair's `left: 50%` +
+                // `translateX(-50%)` pull-back is for a shrink-wrapped popover;
+                // on the strip it shifted everything half a width left, so it
+                // is cancelled. The corner anchors are physical: logical
+                // insets resolve on iOS but not on Android (measured,
+                // signalxjs/lynx#1084), and lynx has no RTL flow, so `start`
+                // IS left and `end` IS right.
                 viewport: {
+                    base: { display: 'flex', width: 'auto' },
                     selectors: {
-                        '&[data-placement="top-start"]': { left: '0' },
-                        '&[data-placement="top-end"]': { right: '0' },
-                        '&[data-placement="bottom-start"]': { left: '0' },
-                        '&[data-placement="bottom-end"]': { right: '0' },
+                        '&[data-placement="top-start"]': { left: '0', alignItems: 'flex-start' },
+                        '&[data-placement="top"]': { left: '0', right: '0', transform: 'none', alignItems: 'center' },
+                        '&[data-placement="top-end"]': { right: '0', alignItems: 'flex-end' },
+                        '&[data-placement="bottom-start"]': { left: '0', alignItems: 'flex-start' },
+                        '&[data-placement="bottom"]': { left: '0', right: '0', transform: 'none', alignItems: 'center' },
+                        '&[data-placement="bottom-end"]': { right: '0', alignItems: 'flex-end' },
                     },
                 },
+                // No grid on lynx (signalxjs/lynx#1075): the card is a flex
+                // column (title, description, then the action), with the
+                // close button pinned to the top-right corner and the title
+                // kept clear of it. The web's 24rem viewport cap becomes the
+                // card's own cap. The `^="top"` entry offset has no class
+                // form, so each top placement restates it.
+                root: {
+                    base: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        alignItems: 'flex-start',
+                        position: 'relative',
+                        boxSizing: 'border-box',
+                        width: '100%',
+                        maxWidth: '24rem',
+                    },
+                    selectors: {
+                        '&[data-placement="top-start"]': { '--toast-from': '-8px' },
+                        '&[data-placement="top"]': { '--toast-from': '-8px' },
+                        '&[data-placement="top-end"]': { '--toast-from': '-8px' },
+                    },
+                },
+                title: { base: { paddingRight: '1.75em' } },
+                // The 75% ink mix over a recipe-local property cannot bake;
+                // the same ink at 75% opacity reads the same on the soft fill.
+                description: { base: { color: 'var(--toast-ink)', opacity: '0.75' } },
+                // The 25% ink border cannot bake either: it takes the full ink.
+                action: {
+                    base: {
+                        marginTop: 'var(--space-xs)',
+                        border: 'var(--border) solid var(--toast-ink)',
+                    },
+                },
+                close: { base: { position: 'absolute', top: 'var(--space-xs)', right: 'var(--space-xs)' } },
             },
         },
     },
@@ -2845,6 +3554,23 @@ export const combobox = {
                 disabled: { cursor: 'not-allowed' },
             },
         },
+        // Clears the value and the text (#280): the chevron's ghost, one
+        // step before it — muted, full ink on hover.
+        'clear-trigger': {
+            base: {
+                appearance: 'none',
+                border: 'none',
+                background: 'transparent',
+                color: 'inherit',
+                font: 'inherit',
+                opacity: '0.6',
+                padding: '0 var(--space-xs)',
+                lineHeight: 'var(--leading-none)',
+                cursor: 'pointer',
+                transition: 'opacity var(--duration-fast) var(--ease-standard)',
+            },
+            states: { hover: { opacity: '1' } },
+        },
         popup: withPresence(popupPresence('translateY(-4px)'), {
             base: { ...floatingPanel, padding: 'var(--space-md)', minWidth: '13rem' },
             states: { open: {}, closed: {} },
@@ -2900,6 +3626,23 @@ export const combobox = {
                 opacity: '0.6',
             },
         },
+        // The list still arriving (#280): the empty row's muted grammar.
+        loading: {
+            base: {
+                padding: 'var(--space-lg)',
+                fontSize: 'var(--text-sm)',
+                textAlign: 'center',
+                opacity: '0.6',
+            },
+        },
+        // The menu's rule between runs of options (#280).
+        separator: {
+            base: {
+                height: 'var(--border)',
+                margin: 'var(--space-sm) var(--space-md)',
+                background: 'var(--color-base-300)',
+            },
+        },
     },
     variants: {
         color: Object.fromEntries(ROLES.map((c) => [c, { root: { base: {
@@ -2922,6 +3665,9 @@ export const combobox = {
         input: ['focus-visible'],
         trigger: ['focus-visible'],
     },
+    targets: {
+        web: { parts: { popup: { base: anchoredListbox } } },
+    },
 };
 // daisy "btn" that stays pressed: the off state is the neutral btn, the on
 // state is the solid accent fill.
@@ -3520,7 +4266,9 @@ export const treeView = {
                 opacity: '0.6',
                 transition: 'transform var(--duration-fast) var(--ease-standard)',
             },
-            states: { open: { transform: 'rotate(90deg)' }, closed: {} },
+            // Loading: the chevron halts at daisy's own collapse-arrow angle —
+            // static (no loop), ink unchanged, so contrast is untouched.
+            states: { open: { transform: 'rotate(90deg)' }, closed: {}, loading: { transform: 'rotate(45deg)' } },
             // The glyph is element text the runtime renders (`TreeView.tsx`), not
             // `content:`, so the `:dir(rtl)` swap the submenu chevron uses is not
             // available here — a mirror is its equivalent. `scale` composes
@@ -3539,6 +4287,9 @@ export const treeView = {
             states: { open: {}, closed: {} },
         },
     },
+    // Open-and-loading content lays out exactly as open content does — the
+    // indicator and the treeitem's aria-busy carry the state.
+    sameAs: { 'branch-content': { loading: 'open' } },
     variants: {
         // A tree colours one thing: the selected row. Everything else is
         // structure, and tinting it would fight the content.
@@ -3567,6 +4318,32 @@ export const treeView = {
         },
     },
 };
+/**
+ * The affordances inside a text field (#281): daisy's in-field label ink and
+ * the ghost circle button, both following the size step.
+ */
+const affixInk = 'color-mix(in oklab, var(--color-base-content) 70%, transparent)';
+const fieldButton = {
+    appearance: 'none',
+    border: 'none',
+    background: 'transparent',
+    color: affixInk,
+    borderRadius: '9999px',
+    alignSelf: 'center',
+    flex: 'none',
+    order: '1',
+    marginInlineEnd: 'var(--space-xs)',
+    padding: 'var(--space-2xs) var(--space-xs)',
+    fontSize: 'var(--text-sm)',
+    fontWeight: 'var(--weight-semibold)',
+    lineHeight: 'var(--leading-none)',
+    cursor: 'pointer',
+};
+const affixSize = (fontSize) => ({
+    adornment: { base: { fontSize } },
+    'clear-trigger': { base: { fontSize } },
+    'visibility-trigger': { base: { fontSize } },
+});
 /**
  * daisy "input" flavor: the shared field box with nothing in it but the text.
  * Same `fieldControl` metrics as select's trigger, combobox's control and the
@@ -3593,6 +4370,7 @@ export const input = {
             base: {
                 display: 'inline-flex',
                 alignItems: 'stretch',
+                gap: 'var(--space-2xs)',
                 ...fieldControl,
                 overflow: 'hidden',
                 transition: 'border-color var(--duration-fast) var(--ease-standard)',
@@ -3629,6 +4407,43 @@ export const input = {
                 '&::placeholder': { color: 'color-mix(in oklab, var(--color-base-content) 60%, transparent)' },
             },
         },
+        // daisy's `label` inside `.input`: a quiet prefix/suffix at one edge,
+        // ordered logically so it flips with the reading direction.
+        adornment: {
+            base: {
+                display: 'inline-flex',
+                alignItems: 'center',
+                flex: 'none',
+                color: affixInk,
+                fontSize: 'var(--text-sm)',
+                lineHeight: 'var(--leading-none)',
+            },
+            states: { disabled: {} },
+            selectors: {
+                '&[data-placement="start"]': { order: '-1', paddingInlineStart: 'var(--space-md)' },
+                '&[data-placement="end"]': { order: '1', paddingInlineEnd: 'var(--space-md)' },
+            },
+        },
+        // `btn btn-ghost btn-circle btn-xs` inside the field.
+        'clear-trigger': {
+            base: fieldButton,
+            states: {
+                hover: { color: 'var(--color-base-content)', background: 'var(--color-base-200)' },
+                disabled: { cursor: 'not-allowed' },
+                ...focusRing,
+            },
+        },
+        // Shown: the ghost button's active fill and full ink.
+        'visibility-trigger': {
+            base: fieldButton,
+            states: {
+                on: { color: 'var(--color-base-content)', background: 'var(--color-base-200)' },
+                off: {},
+                hover: { color: 'var(--color-base-content)', background: 'var(--color-base-200)' },
+                disabled: { cursor: 'not-allowed' },
+                ...focusRing,
+            },
+        },
     },
     // The visible ring lives on `control`; the input delegates.
     skipStates: { input: ['focus-visible'] },
@@ -3641,13 +4456,13 @@ export const input = {
         // The control carries the height off the shared field ramp; the text
         // follows so the box stays proportional.
         size: {
-            xs: { control: { base: { height: fieldHeight('xs') } }, input: { base: { fontSize: 'var(--text-xs)', padding: 'var(--space-2xs) var(--space-xs)' } } },
-            sm: { control: { base: { height: fieldHeight('sm') } }, input: { base: { fontSize: 'var(--text-xs)', padding: 'var(--space-xs) var(--space-sm)' } } },
+            xs: { control: { base: { height: fieldHeight('xs') } }, input: { base: { fontSize: 'var(--text-xs)', padding: 'var(--space-2xs) var(--space-xs)' } }, ...affixSize('var(--text-xs)') },
+            sm: { control: { base: { height: fieldHeight('sm') } }, input: { base: { fontSize: 'var(--text-xs)', padding: 'var(--space-xs) var(--space-sm)' } }, ...affixSize('var(--text-xs)') },
             // `md` is the un-attributed render: the base already IS the
             // middle step.
             md: {},
-            lg: { control: { base: { height: fieldHeight('lg') } }, input: { base: { fontSize: 'var(--text-md)', padding: 'var(--space-md) var(--space-lg)' } } },
-            xl: { control: { base: { height: fieldHeight('xl') } }, input: { base: { fontSize: 'var(--text-lg)', padding: 'var(--space-lg) var(--space-xl)' } } },
+            lg: { control: { base: { height: fieldHeight('lg') } }, input: { base: { fontSize: 'var(--text-md)', padding: 'var(--space-md) var(--space-lg)' } }, ...affixSize('var(--text-md)') },
+            xl: { control: { base: { height: fieldHeight('xl') } }, input: { base: { fontSize: 'var(--text-lg)', padding: 'var(--space-lg) var(--space-xl)' } }, ...affixSize('var(--text-lg)') },
         },
     },
 };
@@ -4363,8 +5178,17 @@ export const stats = {
     tokens: { '--stats-accent': 'var(--color-base-content)' },
     parts: {
         root: {
+            // The row's own scroll box (#43): a value never wraps or shrinks
+            // (`nowrap` below), so a row too wide for its container scrolls
+            // inside the root — daisyUI's own `.stats` behaviour, and Table's
+            // and Pagination's answer — instead of pushing the page sideways.
+            // Items keep their flex automatic minimum — their min-content
+            // width — so the overflow lands here rather than in the next
+            // item. No ring room: a stat is not focusable, and anything a
+            // consumer puts in one sits inside the item's own padding.
             base: {
                 display: 'flex',
+                overflowX: 'auto',
                 border: 'var(--border) solid var(--color-base-200)',
                 borderRadius: 'var(--radius-box)',
                 background: 'var(--color-base-100)',
@@ -4401,6 +5225,8 @@ export const stats = {
         value: {
             base: {
                 gridColumn: '1',
+                // A figure is read whole: `$12 930` never breaks at its space.
+                whiteSpace: 'nowrap',
                 fontSize: 'var(--text-2xl)',
                 fontWeight: 'var(--weight-bold)',
                 fontVariantNumeric: 'tabular-nums',
@@ -4423,8 +5249,19 @@ export const stats = {
         },
     },
     variants: {
-        color: Object.fromEntries(ROLES.map((c) => [c, { root: { base: {
-                        '--stats-accent': `var(--color-${c})`,
+        // Keyed on the ITEM, not the root (#161): the item re-carries
+        // `color`, so a stat's own value outranks the row's, and the value
+        // inside it inherits whichever won. A root colour still reaches
+        // every item through the carrier's donut.
+        //
+        // The value is TEXT on the page, so the raw role is not always a
+        // readable ink: measured by the text matrix once the item re-carried
+        // the axis (#161), light warning is 1.76:1 and dark neutral 1.26:1
+        // on base-100. `roleInk` is the shared answer for a role used as ink
+        // (a per-role share of the role over base-content, which flips with
+        // the scheme), the same one the field and button text use.
+        color: Object.fromEntries(ROLES.map((c) => [c, { item: { base: {
+                        '--stats-accent': roleInk(c),
                     } } }])),
         size: {
             xs: { value: { base: { fontSize: 'var(--text-lg)' } } },
@@ -4470,7 +5307,11 @@ export const timeline = {
                 padding: '0',
             },
             selectors: {
-                '&[data-orientation="horizontal"]': { flexDirection: 'row' },
+                // A horizontal timeline is a row of steps whose width follows
+                // the step count, not the container: at phone width it scrolls
+                // inside its own box, the answer Table and Pagination give
+                // (#45), rather than widening the page.
+                '&[data-orientation="horizontal"]': { flexDirection: 'row', overflowX: 'auto' },
             },
         },
         /**
@@ -4614,6 +5455,87 @@ export const timeline = {
             xl: { marker: { base: { '--timeline-marker-size': 'calc(var(--size-selector) * 4)' } }, content: { base: { fontSize: 'var(--text-md)' } } },
         },
     },
+    /**
+     * Lynx has no grid, and it does not resolve `inline-size`/`block-size`:
+     * the item fell back to the engine's default layout and the marker,
+     * sized only logically, stretched into a pill (signalxjs/lynx#1145).
+     *
+     * The item is a wrapping flex row instead. Vertical: line one is the
+     * marker beside its content (start-side content ordered before the
+     * marker), and the connector takes line two by itself (`flex-basis:
+     * 100%`), drawn as a left border under the marker's centre, which is the
+     * web's row-2 segment. Horizontal: line one is the marker with the
+     * connector running on to the item's end, and the content wraps under it
+     * (start-side content above). Content grows from a zero basis, so long
+     * text never wraps onto its own line.
+     *
+     * The web collapses the start track when no item has start-side content
+     * (`:has()`); lynx has no such test. The vertical connector sits under a
+     * marker at the item's start edge, which is where the marker is unless
+     * that item has start-side content: an alternating vertical timeline is
+     * web-only for now.
+     */
+    targets: {
+        lynx: {
+            parts: {
+                item: { base: { display: 'flex', flexDirection: 'row', flexWrap: 'wrap', alignItems: 'center' } },
+                marker: {
+                    base: {
+                        width: 'var(--timeline-marker-size)',
+                        height: 'var(--timeline-marker-size)',
+                        flexGrow: '0',
+                        flexShrink: '0',
+                    },
+                },
+                connector: {
+                    selectors: {
+                        '&[data-orientation="vertical"]': {
+                            flexGrow: '0',
+                            flexShrink: '1',
+                            flexBasis: '100%',
+                            height: 'var(--space-lg)',
+                            background: 'transparent',
+                            borderLeftWidth: 'var(--border)',
+                            borderLeftStyle: 'solid',
+                            borderLeftColor: 'var(--color-base-300)',
+                            marginLeft: 'calc(var(--timeline-marker-size) / 2 - var(--border) / 2)',
+                        },
+                        '&[data-orientation="horizontal"]': {
+                            order: '1',
+                            flexGrow: '1',
+                            flexShrink: '1',
+                            flexBasis: '0',
+                            height: 'var(--border)',
+                            minWidth: 'var(--space-lg)',
+                        },
+                    },
+                },
+                content: {
+                    selectors: {
+                        '&[data-orientation="vertical"][data-placement="start"]': {
+                            order: '-1',
+                            flexGrow: '1',
+                            flexShrink: '1',
+                            flexBasis: '0',
+                        },
+                        '&[data-orientation="vertical"][data-placement="end"]': {
+                            flexGrow: '1',
+                            flexShrink: '1',
+                            flexBasis: '0',
+                        },
+                        '&[data-orientation="horizontal"][data-placement="start"]': {
+                            order: '-1',
+                            flexBasis: '100%',
+                        },
+                        '&[data-orientation="horizontal"][data-placement="end"]': {
+                            order: '2',
+                            flexBasis: '100%',
+                        },
+                    },
+                },
+            },
+        },
+    },
 };
 /** daisy chat: the classic bubble, colour-refilled per role. */
 export const chat = {
@@ -5164,9 +6086,27 @@ export const pagination = {
         '--pg-accent-content': 'var(--color-primary-content)',
         '--pg-size': 'calc(var(--size-field) * 10)',
         '--pg-font': 'var(--text-sm)',
+        // How far the focus ring reaches outside a control: the root's
+        // scroll box pads by it so the ring is never clipped (#44).
+        '--pg-ring-room': '4px',
     },
     parts: {
-        root: { base: { display: 'flex', alignItems: 'center', gap: 'var(--space-2xs)' } },
+        root: {
+            // The row's own scroll box (#44): the window is constant-width by
+            // design, so a narrow container scrolls it rather than clipping
+            // it — Table's answer. The padding is room for the focus ring's
+            // 2px + 2px offset, which the scroll box would otherwise clip at
+            // the row's edges; the matching scroll padding keeps it clear
+            // when focus scrolls a page into view.
+            base: {
+                display: 'flex',
+                alignItems: 'center',
+                gap: 'var(--space-2xs)',
+                overflowX: 'auto',
+                padding: 'var(--pg-ring-room)',
+                scrollPaddingInline: 'var(--pg-ring-room)',
+            },
+        },
         item: {
             base: {
                 display: 'inline-flex',
@@ -5624,6 +6564,9 @@ export const drawer = {
  */
 export const table = {
     component: 'table',
+    // A sortable header cell carries the sort state for `aria-sort`'s sake;
+    // its trigger and indicator paint it.
+    skipStates: { 'header-cell': ['ascending', 'descending', 'none'] },
     // Public to a design system derived from this one (#73).
     hooks: {
         properties: {
@@ -5651,6 +6594,11 @@ export const table = {
                 borderRadius: 'var(--radius-box)',
                 background: 'var(--color-base-100)',
             },
+            // The scroll box is a keyboard stop (#270): daisy's ink ring,
+            // drawn inside the box (negative offset) — the root is as wide
+            // as its column, so an outward ring would be clipped by
+            // whatever scrolls around it.
+            states: { 'focus-visible': { outline: '2px solid var(--color-base-content)', outlineOffset: '-2px' } },
             // Stacked (Table.Root stack, #55): zero lays each row out as a block
             // below the table's breakpoint; the card it becomes is drawn here.
             at: tableStackAt(tokens, 'root', { border: '0', borderRadius: '0', background: 'transparent' }),
@@ -5704,6 +6652,55 @@ export const table = {
             },
             at: tableStackAt(tokens, 'header-cell', { paddingInline: '0' }),
         },
+        // Sorting (#286): daisy's header label made a button — the sorted
+        // column's label takes the full accent ink, and the mark beside it
+        // turns with the direction.
+        'sort-trigger': {
+            base: {
+                appearance: 'none',
+                display: 'inline-flex',
+                alignItems: 'center',
+                margin: '0',
+                border: '0',
+                font: 'inherit',
+                letterSpacing: 'inherit',
+                textTransform: 'inherit',
+                textAlign: 'inherit',
+                cursor: 'pointer',
+                gap: 'var(--space-2xs)',
+                padding: '0',
+                borderRadius: 'var(--radius-selector)',
+                background: 'transparent',
+                color: 'inherit',
+                transition: 'color var(--duration-fast) var(--ease-standard)',
+            },
+            states: {
+                ascending: { color: 'var(--table-accent)' },
+                descending: { color: 'var(--table-accent)' },
+                none: {},
+                hover: { color: 'var(--table-accent)' },
+                disabled: { cursor: 'not-allowed', opacity: 'var(--disabled-opacity)' },
+                ...focusRing,
+            },
+            at: { 'reduced-motion': { base: { transition: 'none' } } },
+        },
+        // zero's ▲, turned for descending; an unsorted column shows it only
+        // under a hovered or keyboard-focused trigger.
+        'sort-indicator': {
+            base: {
+                display: 'inline-block',
+                fontSize: '0.75em',
+                lineHeight: '1',
+                transition: 'transform var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard)',
+            },
+            states: {
+                ascending: {},
+                descending: { transform: 'rotate(180deg)' },
+                none: { opacity: '0' },
+            },
+            selectors: { '[data-scope="table"][data-part="sort-trigger"]:is(:hover, [data-focus-visible]) > &[data-state="none"]': { opacity: '0.6' } },
+            at: { 'reduced-motion': { base: { transition: 'none' } } },
+        },
         cell: {
             base: {
                 padding: 'var(--table-pad-block) var(--table-pad-inline)',
@@ -5840,7 +6837,15 @@ export const fileUpload = {
                 borderRadius: 'var(--radius-field)',
                 background: 'var(--color-base-100)',
             },
-            states: { disabled: { opacity: 'var(--disabled-opacity)' } },
+            states: {
+                disabled: { opacity: 'var(--disabled-opacity)' },
+                // A rejected file the app renders through Item: daisy's
+                // error border over a faint error wash.
+                invalid: {
+                    borderColor: 'var(--color-error)',
+                    background: 'color-mix(in oklab, var(--color-error) 8%, var(--color-base-100))',
+                },
+            },
         },
         'item-name': {
             base: {
@@ -5876,6 +6881,26 @@ export const fileUpload = {
                 ...focusRing,
             },
         },
+        // daisy's btn-ghost btn-xs: the remove button's pill, at text size.
+        'clear-trigger': {
+            base: {
+                appearance: 'none',
+                border: 'none',
+                background: 'transparent',
+                color: 'inherit',
+                borderRadius: '9999px',
+                padding: 'var(--space-2xs) var(--space-sm)',
+                fontSize: 'var(--fu-font)',
+                fontWeight: 'var(--weight-semibold)',
+                lineHeight: 'var(--leading-none)',
+                cursor: 'pointer',
+            },
+            states: {
+                hover: { background: 'var(--color-base-200)' },
+                disabled: { opacity: 'var(--disabled-opacity)', cursor: 'not-allowed' },
+                ...focusRing,
+            },
+        },
     },
     variants: {
         color: Object.fromEntries(ROLES.map((c) => [c, { root: { base: {
@@ -6216,6 +7241,9 @@ export const diff = {
                 background: 'var(--color-base-100)',
                 borderRadius: 'var(--radius-box)',
             },
+            // The root holds the images, which are content: disabled is the
+            // handle's to show (#272).
+            states: { disabled: {} },
         },
         before: {
             base: { gridArea: '1 / 1', minWidth: '0' },
@@ -6245,6 +7273,9 @@ export const diff = {
             },
             states: {
                 ...focusRing,
+                // daisy's disabled look (#272): the uniform fade, and no grab
+                // cursor — the images are content and stay unfaded.
+                disabled: { opacity: 'var(--disabled-opacity)', cursor: 'not-allowed' },
                 pressed: { '--diff-accent': 'color-mix(in oklab, var(--color-base-content) 85%, var(--color-base-100))' },
             },
             selectors: {
@@ -6318,7 +7349,7 @@ export const diff = {
 };
 export const recipes = [
     tabs, collapsible, switchRecipe, dialog, popover, tooltip, menu,
-    field, checkbox, radioGroup, progress, slider, accordion, select, button, avatar, toast, combobox,
+    field, fieldset, checkbox, checkboxGroup, radioGroup, progress, slider, accordion, select, button, avatar, toast, combobox,
     toggle, toggleGroup, numberInput, ratingGroup, treeView, input, textarea,
     card, alert, emptyState, badge, divider, skeleton, spinner,
     kbd, status, indicator, stats, timeline, chat, radialProgress, join,