@sigx/zero-daisyui 0.4.0 → 0.6.0

package/src/recipes.ts

@@ -155,14 +155,48 @@ const disclosurePresence: PartStyles = {
         '&::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',
+                    + '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: 'collapsible' | 'accordion'): RecipeInput['targets'] => ({
+    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"
@@ -216,14 +250,33 @@ const withPresence = (presence: PartStyles, styles: PartStyles): PartStyles => (
  */
 export const tabs: RecipeInput = {
     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: {
@@ -261,6 +314,10 @@ export const tabs: RecipeInput = {
                 ...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).
+        indicator: { base: { display: 'none' } },
         panel: {
             base: { fontSize: 'var(--text-md)' },
             states: { active: {}, inactive: {} },
@@ -536,6 +593,7 @@ const disclosureSizes: Record<string, Record<string, PartStyles>> = {
 // daisy "collapse collapse-arrow" flavor.
 export const collapsible: RecipeInput = {
     component: 'collapsible',
+    targets: disclosureExit('collapsible'),
     // Public to a design system derived from this one (#73).
     hooks: {
         properties: {
@@ -653,6 +711,8 @@ export const switchRecipe: RecipeInput = {
         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: {},
@@ -787,6 +847,29 @@ export const switchRecipe: RecipeInput = {
                             + '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' } },
+                        },
+                    },
                 },
             },
         },
@@ -1067,6 +1150,23 @@ const floatingPanel: NonNullable<PartStyles['base']> = {
     boxShadow: 'var(--shadow-lg)',
 };
 
+/**
+ * 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: CssProps = {
+    boxSizing: 'border-box',
+    minWidth: 'var(--anchor-width, 13rem)',
+    maxHeight: 'min(20rem, var(--available-height, 20rem))',
+    overflowY: 'auto',
+};
+
 export const popover: RecipeInput = {
     component: 'popover',
     parts: {
@@ -1432,6 +1532,8 @@ export const checkbox: RecipeInput = {
         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: {},
             },
@@ -1504,6 +1606,8 @@ export const checkbox: RecipeInput = {
                 // `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: {},
             },
         },
@@ -1630,13 +1734,9 @@ export const radioGroup: RecipeInput = {
     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)' },
@@ -1645,6 +1745,8 @@ export const radioGroup: RecipeInput = {
         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: {},
             },
@@ -1679,6 +1781,10 @@ export const radioGroup: RecipeInput = {
                     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: {},
             },
@@ -1750,6 +1856,48 @@ export const radioGroup: RecipeInput = {
     },
 };
 
+/**
+ * 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: RecipeInput = {
+    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)
 // --------------------------------------------------------------------------
@@ -1875,7 +2023,15 @@ export const progress: RecipeInput = {
 
 export const slider: RecipeInput = {
     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%' },
@@ -1885,30 +2041,106 @@ export const slider: RecipeInput = {
             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: {
@@ -1921,11 +2153,11 @@ export const slider: RecipeInput = {
         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',
@@ -1935,12 +2167,14 @@ export const slider: RecipeInput = {
             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',
@@ -1954,7 +2188,7 @@ export const slider: RecipeInput = {
                     insetBlockStart: '0',
                     insetInlineStart: '-1px',
                     width: '2px',
-                    height: 'calc(var(--size-selector) * 2)',
+                    height: 'var(--slider-track-size)',
                     background: 'var(--color-base-content)',
                 },
             },
@@ -1967,33 +2201,135 @@ export const slider: RecipeInput = {
         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: {
             parts: {
                 track: {
@@ -2003,14 +2339,14 @@ export const slider: RecipeInput = {
                     // the emitter refuses them. Physical is the lynx
                     // target's norm — no RTL flow there.
                     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)',
                     },
                 },
                 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))' },
+                    base: { paddingTop: 'calc(var(--slider-track-size) + var(--space-2xs))' },
                 },
                 range: {
                     // The web fill deepens the accent 90/10 toward
@@ -2048,7 +2384,7 @@ export const slider: RecipeInput = {
                         border: '0.25rem solid var(--slider-accent)',
                         top: '50%',
                         transform: 'translateY(-50%)',
-                        marginLeft: 'calc(var(--size-selector) * -2.5)',
+                        marginLeft: 'calc(var(--slider-thumb-size) / -2)',
                     },
                 },
             },
@@ -2058,12 +2394,15 @@ export const slider: RecipeInput = {
 
 export const accordion: RecipeInput = {
     component: 'accordion',
+    targets: disclosureExit('accordion'),
     // 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: {
@@ -2073,6 +2412,7 @@ export const accordion: RecipeInput = {
                 overflow: 'hidden',
             },
             states: { open: {}, closed: {} },
+            selectors: { '[data-scope="accordion"][data-part="root"][data-orientation="horizontal"] > &': { flex: '1 1 0', minInlineSize: '0' } },
         }),
         trigger: {
             base: {
@@ -2157,14 +2497,21 @@ const fieldControl: NonNullable<PartStyles['base']> = {
     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: RecipeInput = {
     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: {
@@ -2177,6 +2524,8 @@ export const select: RecipeInput = {
             },
             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: {},
@@ -2213,6 +2562,41 @@ export const select: RecipeInput = {
         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' },
@@ -2228,6 +2612,16 @@ export const select: RecipeInput = {
                 opacity: '0.6',
             },
         },
+        // A windowed group's heading (#127): the same overline as the label,
+        // as a row of the flat window instead of inside a `group`.
+        'group-heading': {
+            base: {
+                padding: 'var(--space-md) var(--space-lg) var(--space-xs)',
+                fontSize: 'var(--text-xs)',
+                fontWeight: 'var(--weight-bold)',
+                opacity: '0.6',
+            },
+        },
         item: {
             base: {
                 display: 'flex',
@@ -2251,6 +2645,14 @@ export const select: RecipeInput = {
             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: {
@@ -2273,8 +2675,12 @@ export const select: RecipeInput = {
     // 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: {
+                trigger: { base: lynxBtnPad(4) },
+                'clear-trigger': { base: { top: 'var(--space-xs)', bottom: 'var(--space-xs)', right: 'calc(var(--size-field) * 4 + 1em + var(--space-xs))', minWidth: '1.5rem' } },
+            },
             variants: {
                 size: { ...lynxBtnSizes('trigger'), md: { trigger: { base: lynxBtnPad(4) } } },
             },
@@ -2906,6 +3312,23 @@ export const combobox: RecipeInput = {
                 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: {} },
@@ -2920,6 +3343,16 @@ export const combobox: RecipeInput = {
                 opacity: '0.6',
             },
         },
+        // A windowed group's heading (#127): the same overline as the label,
+        // as a row of the flat window instead of inside a `group`.
+        'group-heading': {
+            base: {
+                padding: 'var(--space-md) var(--space-lg) var(--space-xs)',
+                fontSize: 'var(--text-xs)',
+                fontWeight: 'var(--weight-bold)',
+                opacity: '0.6',
+            },
+        },
         item: {
             base: {
                 display: 'flex',
@@ -2951,6 +3384,23 @@ export const combobox: RecipeInput = {
                 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: {
@@ -2973,6 +3423,9 @@ export const combobox: RecipeInput = {
         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
@@ -3586,7 +4039,9 @@ export const treeView: RecipeInput = {
                 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
@@ -3605,6 +4060,9 @@ export const treeView: RecipeInput = {
             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.
@@ -3634,6 +4092,33 @@ export const treeView: RecipeInput = {
     },
 };
 
+/**
+ * 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: NonNullable<PartStyles['base']> = {
+    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: string) => ({
+    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
@@ -3660,6 +4145,7 @@ export const input: RecipeInput = {
             base: {
                 display: 'inline-flex',
                 alignItems: 'stretch',
+                gap: 'var(--space-2xs)',
                 ...fieldControl,
                 overflow: 'hidden',
                 transition: 'border-color var(--duration-fast) var(--ease-standard)',
@@ -3696,6 +4182,43 @@ export const input: RecipeInput = {
                 '&::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'] },
@@ -3708,13 +4231,13 @@ export const input: RecipeInput = {
         // 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)') },
         },
     },
 };
@@ -4442,8 +4965,17 @@ export const stats: RecipeInput = {
     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)',
@@ -4480,6 +5012,8 @@ export const stats: RecipeInput = {
         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',
@@ -4502,8 +5036,19 @@ export const stats: RecipeInput = {
         },
     },
     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)' } } },
@@ -4551,7 +5096,11 @@ export const timeline: RecipeInput = {
                 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' },
             },
         },
         /**
@@ -5252,9 +5801,27 @@ export const pagination: RecipeInput = {
         '--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',
@@ -5748,6 +6315,11 @@ export const table: RecipeInput = {
                 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' }),
@@ -5938,7 +6510,15 @@ export const fileUpload: RecipeInput = {
                 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: {
@@ -5974,6 +6554,26 @@ export const fileUpload: RecipeInput = {
                 ...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: {
@@ -6318,6 +6918,9 @@ export const diff: RecipeInput = {
                 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' },
@@ -6347,6 +6950,9 @@ export const diff: RecipeInput = {
             },
             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: {
@@ -6421,7 +7027,7 @@ export const diff: RecipeInput = {
 
 export const recipes: RecipeInput[] = [
     tabs, collapsible, switchRecipe, dialog, popover, tooltip, menu,
-    field, checkbox, radioGroup, progress, slider, accordion, select, button, avatar, toast, combobox,
+    field, 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,