@sigx/zero-daisyui 0.10.0 → 0.12.0

package/src/recipes.ts

@@ -148,6 +148,14 @@ const roleInk = (role: string): string =>
     + `${ROLE_INK_KEEP[role as keyof typeof roles] ?? 55}%, var(--color-base-content))`;
 
 // daisy "tabs-box" flavor: a rounded container, lifted active tab.
+/**
+ * The swipe-to-dismiss offset (#293): `createSwipe` publishes the drag as
+ * `--swipe-x` / `--swipe-y` on a toast root or a drawer sheet, and this is
+ * the one place it is read — composed first into the part's `transform`, so
+ * an enter/exit offset or a slide rides on top of it. Unset, it is nothing.
+ */
+const SWIPE = 'translate(var(--swipe-x, 0px), var(--swipe-y, 0px))';
+
 /**
  * Enter/exit presence for a top-layer popup.
  *
@@ -1682,6 +1690,10 @@ export const field: RecipeInput = {
         label: {
             base: { fontSize: 'var(--text-sm)', fontWeight: 'var(--weight-semibold)', color: 'var(--field-accent)' },
             states: { disabled: { opacity: 'var(--disabled-opacity)' } },
+            // lynx has no pseudo-elements and the anatomy no part to carry
+            // the asterisk, so it stays a web-only mark: on lynx a required
+            // field still stamps `required` on its root and label, and the
+            // control inside adopts it (signalxjs/lynx#1205).
             selectors: {
                 '&[data-required]::after': { content: '" *"', color: roleInk('error') },
             },
@@ -1773,6 +1785,33 @@ export const fieldset: RecipeInput = {
             xl: { legend: { base: { fontSize: 'var(--text-lg)' } } },
         },
     },
+    // Lynx has no grid: the one-column track becomes a flex column (the gap
+    // survives), and the block/inline paddings are restated physically —
+    // logical spellings resolve on iOS but not on Android (signalxjs/lynx#1084).
+    targets: {
+        lynx: {
+            parts: {
+                root: {
+                    base: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        paddingTop: 'var(--space-xs)',
+                        paddingBottom: 'var(--space-xs)',
+                        paddingLeft: '0',
+                        paddingRight: '0',
+                    },
+                },
+                legend: {
+                    base: {
+                        paddingTop: 'var(--space-sm)',
+                        paddingBottom: 'var(--space-sm)',
+                        paddingLeft: '0',
+                        paddingRight: '0',
+                    },
+                },
+            },
+        },
+    },
 };
 
 /**
@@ -2004,11 +2043,25 @@ export const checkbox: RecipeInput = {
     targets: {
         lynx: {
             parts: {
+                // The box/label row, pinned: `inline-flex` is rewritten to
+                // `flex`, and the row must not depend on the engine's
+                // default direction (signalxjs/lynx#1203).
+                root: { base: { display: 'flex', flexDirection: 'row' } },
                 control: {
                     // The web fallback (`color-mix(in oklab, … currentColor …)`)
                     // exists for consumers that unset the accent; this package
                     // always defines it, so the plain accent IS the ring.
-                    base: { border: 'var(--border) solid var(--checkbox-accent)' },
+                    //
+                    // `inline-block` is not a lynx display value (no inline
+                    // formatting context); a flex box keeps daisy's geometry —
+                    // the padding insets the 100%-sized indicator either way.
+                    base: { display: 'flex', border: 'var(--border) solid var(--checkbox-accent)' },
+                    // The ring as spread shadows that follow the box's radius
+                    // (signalxjs/lynx#1163 — lynx's `outline` ignores it and
+                    // has no offset), keeping the box's inset depth line.
+                    states: {
+                        'focus-visible': lynxFocusRing('var(--checkbox-accent)', { under: '0 1px var(--depth-shade) inset' }),
+                    },
                 },
                 indicator: {
                     // The tick's fill: the control's `color:` names
@@ -2056,6 +2109,11 @@ export const radioGroup: RecipeInput = {
             // `invalid` paints on each `item-control`, which carries the flag
             // itself (#267) — the root only groups the items.
             states: { invalid: {}, required: {} },
+            // `orientation="horizontal"` lays the items in a wrapping row —
+            // checkbox-group's rule (signalxjs/zero#393).
+            selectors: {
+                '&[data-orientation="horizontal"]': { flexDirection: 'row', flexWrap: 'wrap', columnGap: 'var(--space-lg)' },
+            },
         },
         label: {
             base: { fontSize: 'var(--text-sm)', fontWeight: 'var(--weight-semibold)' },
@@ -2163,9 +2221,20 @@ export const radioGroup: RecipeInput = {
     targets: {
         lynx: {
             parts: {
+                // The control/label row, pinned — as checkbox's root
+                // (signalxjs/lynx#1203).
+                item: { base: { display: 'flex', flexDirection: 'row' } },
                 'item-control': {
-                    base: { border: 'var(--border) solid var(--radio-accent)' },
-                    states: { checked: { borderColor: 'var(--radio-accent)' } },
+                    // `display: flex` in place of `inline-block`, which lynx
+                    // does not have — the padding still insets the dot.
+                    base: { display: 'flex', border: 'var(--border) solid var(--radio-accent)' },
+                    states: {
+                        checked: { borderColor: 'var(--radio-accent)' },
+                        // The round ring (signalxjs/lynx#1163): spread
+                        // shadows follow the 9999px radius where `outline`
+                        // drew a square.
+                        'focus-visible': lynxFocusRing('var(--radio-accent)', { under: '0 1px var(--depth-shade) inset' }),
+                    },
                 },
                 'item-indicator': {
                     states: { checked: { backgroundColor: 'var(--radio-accent)' } },
@@ -2933,12 +3002,6 @@ 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"]) &';
-
 /**
  * The select trigger's lynx steps — `[inline padding in --size-field units,
  * font-size step]` — as the size variants set them (`lynxBtnPad` and the
@@ -3029,9 +3092,13 @@ 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))' } },
+            states: {
+                open: { transform: 'rotate(180deg)' },
+                closed: {},
+                // Room for the clear-trigger laid over the field (#280) — the
+                // `clearable` flag the runtime stamps while it renders (#387).
+                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
@@ -3189,7 +3256,25 @@ export const select: RecipeInput = {
                 // focus ring was a tall pill. The ring is inset, so it hugs
                 // the chip and can never reach the chevron, and no gap shadow
                 // paints past the chip's rounded corners.
-                indicator: { base: { width: '1em', textAlign: 'right' } },
+                indicator: {
+                    base: { width: '1em', textAlign: 'right' },
+                    // The web's room for the chip (`margin-inline-start`) is a
+                    // logical spelling Android never resolves, and it is
+                    // sized off the web's own offset. Here the chip is a
+                    // 1.5rem square one `--space-xs` short of the chevron
+                    // at every size, so the room is exactly that — and the
+                    // trigger's `gap` stays between the value and the chip.
+                    // Before the `clearable` flag the web reached this with
+                    // `:has()`, which lynx cannot express: at lg/xl the value
+                    // ran under the chip and its focus ring
+                    // (signalxjs/lynx#1191).
+                    states: { clearable: { marginLeft: 'calc(1.5rem + var(--space-xs))' } },
+                },
+                // The value gives way to the chip instead of running under
+                // it: one line, clipped with an ellipsis — the web's
+                // `nowrap` button text, with a flex item's `min-width: auto`
+                // lifted so it can shrink below its content at all.
+                value: { base: { flexShrink: '1', minWidth: '0', overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' } },
                 'clear-trigger': {
                     base: { ...lynxSelectClear('md'), width: '1.5rem', height: '1.5rem', minWidth: '1.5rem', boxSizing: 'border-box' },
                     states: lynxFocus({ inset: true }),
@@ -3210,7 +3295,6 @@ export const select: RecipeInput = {
     },
 };
 
-
 /**
  * daisy's BUTTON ramp — `.btn`'s fixed height per size step, in `--size-field`
  * units, exactly as daisyUI 5 ships it (`components/button.css`: `.btn-xs`
@@ -3829,6 +3913,8 @@ export const toast: RecipeInput = {
             states: {
                 open: { opacity: '1', transform: 'none' },
                 closed: {},
+                // Styled in `targets.web` — the swipe is web-only (#293).
+                swiping: {},
             },
             at: {
                 'reduced-motion': { base: { transition: 'none' }, states: { open: { transform: 'none' } } },
@@ -3954,6 +4040,22 @@ export const toast: RecipeInput = {
     defaultVariants: { size: 'md' },
     keyframes: { 'zero-daisyui-toast-spin': 'to { transform: rotate(360deg); }' },
     targets: {
+        // The swipe (#293) — web only, since the runtime's `--swipe-*` offset
+        // is: composed ahead of the enter/exit offset, and no pan or pinch
+        // starts on a toast, so a touch drag is the swipe's.
+        web: {
+            parts: {
+                root: {
+                    base: { transform: `${SWIPE} translateY(var(--toast-from))`, touchAction: 'none' },
+                    states: { open: { transform: SWIPE } },
+                    selectors: {
+                        // Mid-swipe the toast tracks the pointer, not a transition.
+                        '&[data-swiping]': { transition: 'none', userSelect: 'none' },
+                    },
+                    at: { 'reduced-motion': { states: { open: { transform: SWIPE } } } },
+                },
+            },
+        },
         lynx: {
             parts: {
                 // The viewport is a full-width strip on lynx (the runtime pins
@@ -4353,6 +4455,45 @@ export const toggle: RecipeInput = {
         },
     },
     defaultVariants: { color: 'primary', size: 'md' },
+    // signalxjs/lynx#1204 — the lynx replacements for what this recipe's
+    // shared sections cannot say there.
+    targets: {
+        lynx: {
+            parts: {
+                root: {
+                    // daisy's content-sized, never-squeezed btn (lynx#1165):
+                    // a lynx view has no inline formatting context, so the
+                    // toggle stretched to its column and a squeezed label
+                    // wrapped per character. The glyph + label sit in a row.
+                    // The hairline as longhands: a var-bearing `border`
+                    // shorthand expands after the cascade and would beat
+                    // any edge a later rule restates (lynx#1161/#1162).
+                    base: {
+                        ...lynxBtnFit,
+                        flexDirection: 'row',
+                        border: '0 solid transparent',
+                        ...lynxSides('border{}Width', 'var(--border)'),
+                        ...lynxSides('border{}Color', 'var(--color-base-300)'),
+                    },
+                    states: {
+                        // No hover on a touch platform: the held toggle
+                        // takes the wash daisy's hover gives it. The shared
+                        // pressed rule adds the btn's 1px sink.
+                        pressed: { background: 'var(--color-base-300)' },
+                        on: lynxSides('border{}Color', 'var(--toggle-accent)'),
+                        // lynx's `outline` ignores the radius and has no
+                        // offset (lynx#1163): the ring as spread shadows.
+                        'focus-visible': lynxFocusRing('var(--toggle-accent)'),
+                    },
+                    selectors: {
+                        // A held on toggle keeps its fill (the web's
+                        // `[data-state=on]:hover` stays on the accent too).
+                        '&[data-state="on"][data-pressed]': { background: 'var(--toggle-accent)' },
+                    },
+                },
+            },
+        },
+    },
 };
 
 // daisy "join" of btns: one bordered capsule, hairline seams between items,
@@ -4464,6 +4605,65 @@ export const toggleGroup: RecipeInput = {
         ),
     },
     defaultVariants: { color: 'primary' },
+    // signalxjs/lynx#1204 — the lynx replacements for what this recipe's
+    // shared sections cannot say there.
+    targets: {
+        lynx: {
+            parts: {
+                root: {
+                    // Content-sized like the web's inline-flex capsule (a
+                    // lynx view stretches to its column otherwise), a row
+                    // unless vertical, and the frame as longhands so the
+                    // orientation rules below can drop one edge by
+                    // specificity (a var-bearing `border` shorthand would
+                    // expand over them, lynx#1161/#1162).
+                    base: {
+                        width: 'max-content',
+                        flexShrink: '0',
+                        flexDirection: 'row',
+                        border: '0 solid transparent',
+                        ...lynxSides('border{}Width', 'var(--border)'),
+                        ...lynxSides('border{}Color', 'var(--color-base-300)'),
+                    },
+                    selectors: {
+                        // The join seams: lynx has no sibling combinator, so
+                        // the web's `item + item` edge cannot be selected.
+                        // Every item draws its leading seam instead (below),
+                        // and the frame gives up that edge — the first item's
+                        // seam stands in for it, inside the frame's clip.
+                        '&[data-orientation="horizontal"]': { borderLeftWidth: '0' },
+                        '&[data-orientation="vertical"]': { borderTopWidth: '0' },
+                    },
+                },
+                item: {
+                    base: { flexShrink: '0', flexWrap: 'nowrap' },
+                    states: {
+                        // No hover on a touch platform: a held item takes the
+                        // wash daisy's hover gives it; an on item keeps its
+                        // fill (the selector below).
+                        pressed: { background: 'var(--color-base-300)' },
+                        // The frame clips its items, so the ring is drawn
+                        // inside the item (lynx's `outline` has no offset
+                        // and ignores the radius, lynx#1163).
+                        'focus-visible': lynxFocusRing('var(--toggle-group-accent)', { inset: true }),
+                    },
+                    selectors: {
+                        '&[data-state="on"][data-pressed]': { background: 'var(--toggle-group-accent)' },
+                        '&[data-orientation="horizontal"]': {
+                            borderLeftWidth: 'var(--border)',
+                            borderLeftStyle: 'solid',
+                            borderLeftColor: 'var(--color-base-300)',
+                        },
+                        '&[data-orientation="vertical"]': {
+                            borderTopWidth: 'var(--border)',
+                            borderTopStyle: 'solid',
+                            borderTopColor: 'var(--color-base-300)',
+                        },
+                    },
+                },
+            },
+        },
+    },
 };
 
 // daisy "join" of an input and two btns: one bordered capsule (the control),
@@ -4608,14 +4808,53 @@ export const numberInput: RecipeInput = {
             xl: { control: { base: { height: fieldHeight('xl') } }, input: { base: { fontSize: 'var(--text-lg)', padding: 'var(--space-lg) var(--space-xl)' } } },
         },
     },
-    // The steppers' inline padding, restated physically: logical spellings
-    // resolve on iOS but not on Android (measured, signalxjs/lynx#1084), so
-    // the emitter refuses them.
+    // Lynx restatements:
+    // - the steppers' inline padding and their seams, physically: logical
+    //   spellings resolve on iOS but not on Android (measured,
+    //   signalxjs/lynx#1084);
+    // - the steppers are views around a text glyph, with none of a
+    //   button's content centering;
+    // - the native input takes no `inherit`: its ink is spelled out, and it
+    //   grows into any room a stretched control leaves between the steppers;
+    // - the web root is inline-flex and hugs its content; lynx's flex column
+    //   stretches, so the children align to the start instead;
+    // - the focus ring is `lynxFocusRing` (lynx's outline ignores the radius
+    //   and has no offset, signalxjs/lynx#1163). A shadow must not be
+    //   clipped by the box's own `overflow: hidden`, so the control stops
+    //   clipping and the steppers round their own outer corners instead.
     targets: {
         lynx: {
             parts: {
-                'increment-trigger': { base: { paddingLeft: 'var(--space-lg)', paddingRight: 'var(--space-lg)' } },
-                'decrement-trigger': { base: { paddingLeft: 'var(--space-lg)', paddingRight: 'var(--space-lg)' } },
+                root: { base: { alignItems: 'flex-start' } },
+                control: {
+                    base: { overflow: 'visible' },
+                    states: { 'focus-visible': lynxFocusRing('var(--number-input-accent)') },
+                },
+                input: { base: { color: 'var(--color-base-content)', flexGrow: '1' } },
+                'increment-trigger': {
+                    base: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        paddingLeft: 'var(--space-lg)',
+                        paddingRight: 'var(--space-lg)',
+                        borderLeft: 'var(--border) solid var(--color-base-300)',
+                        borderTopRightRadius: 'var(--radius-field)',
+                        borderBottomRightRadius: 'var(--radius-field)',
+                    },
+                },
+                'decrement-trigger': {
+                    base: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        paddingLeft: 'var(--space-lg)',
+                        paddingRight: 'var(--space-lg)',
+                        borderRight: 'var(--border) solid var(--color-base-300)',
+                        borderTopLeftRadius: 'var(--radius-field)',
+                        borderBottomLeftRadius: 'var(--radius-field)',
+                    },
+                },
             },
         },
     },
@@ -5029,6 +5268,15 @@ const affixSize = (fontSize: string) => ({
     'visibility-trigger': { base: { fontSize } },
 });
 
+/**
+ * A text field's placeholder ink on lynx (signalxjs/lynx#1205): the web's
+ * `::placeholder` mix, for lynx's `-x-placeholder-color` property — the
+ * emitter bakes the `color-mix()` to one literal per theme.
+ */
+const textFieldPlaceholder = 'color-mix(in oklab, var(--color-base-content) 60%, transparent)';
+/** The ghost field button's held look on lynx — the web's hover wash, on a press. */
+const fieldButtonHeld: CssProps = { color: 'var(--color-base-content)', background: 'var(--color-base-200)' };
+
 /**
  * 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
@@ -5150,6 +5398,53 @@ export const input: RecipeInput = {
             xl: { control: { base: { height: fieldHeight('xl') } }, input: { base: { fontSize: 'var(--text-lg)', padding: 'var(--space-lg) var(--space-xl)' } }, ...affixSize('var(--text-lg)') },
         },
     },
+    // lynx (signalxjs/lynx#1205). The field is a native text widget inside
+    // a view `control`, so what the web gets from the cascade is restated:
+    targets: {
+        lynx: {
+            parts: {
+                // The web control is an `inline-flex` row; the emitter's
+                // `flex` rewrite keeps no direction, so the row is explicit.
+                // No `:hover` border on a touch platform — the ring below
+                // (box-shadow spread, signalxjs/lynx#1163) is the focus cue,
+                // in the root's accent like the web outline.
+                control: {
+                    base: { flexDirection: 'row' },
+                    states: { 'focus-visible': lynxFocusRing('var(--input-accent)') },
+                },
+                // `color: inherit` never reaches a native text field, and
+                // `::placeholder` does not exist: the ink is explicit and the
+                // placeholder takes lynx's own `-x-placeholder-color`, the
+                // web's 60% mix baked per theme.
+                input: {
+                    base: {
+                        color: 'var(--color-base-content)',
+                        '-x-placeholder-color': textFieldPlaceholder,
+                        flexGrow: '1',
+                        flexShrink: '1',
+                    },
+                },
+                // The adornment's edge padding, physical: Android never
+                // resolves the logical spellings (signalxjs/lynx#1084).
+                adornment: {
+                    selectors: {
+                        '&[data-placement="start"]': { paddingLeft: 'var(--space-md)' },
+                        '&[data-placement="end"]': { paddingRight: 'var(--space-md)' },
+                    },
+                },
+                // Same for the ghost buttons' end margin; the web's `:hover`
+                // wash answers a press instead.
+                'clear-trigger': {
+                    base: { marginRight: 'var(--space-xs)' },
+                    states: { pressed: fieldButtonHeld },
+                },
+                'visibility-trigger': {
+                    base: { marginRight: 'var(--space-xs)' },
+                    states: { pressed: fieldButtonHeld },
+                },
+            },
+        },
+    },
 };
 
 /**
@@ -5218,6 +5513,22 @@ export const textarea: RecipeInput = {
             xl: { textarea: { base: { fontSize: 'var(--text-lg)', minHeight: `calc(${fieldHeight('xl')} * 2)`, padding: 'var(--space-lg) var(--space-xl)' } } },
         },
     },
+    // lynx (signalxjs/lynx#1205): lynx-zero renders the part as a view (the
+    // box, whose state classes repaint) around the native field, which wears
+    // the part's base class as its text face. So the ink and the placeholder
+    // are explicit here — `color: inherit` and `::placeholder` never reach a
+    // native widget — and the web's `:hover` border and outline ring become
+    // the lynx focus ring in the root's accent (signalxjs/lynx#1163).
+    targets: {
+        lynx: {
+            parts: {
+                textarea: {
+                    base: { color: 'var(--color-base-content)', '-x-placeholder-color': textFieldPlaceholder },
+                    states: { 'focus-visible': lynxFocusRing('var(--textarea-accent)') },
+                },
+            },
+        },
+    },
 };
 
 // ── Content tier (#311) ───────────────────────────────────────────────────
@@ -7401,7 +7712,8 @@ const sheetSlide = (enter: string, exit: string): PartStyles => {
     const open = `${sheet}[data-state="open"]`;
     const travel = (tempo: string): string => {
         const duration = tempo.split(' ')[0];
-        return `translate ${tempo}, display ${duration} allow-discrete, overlay ${duration} allow-discrete`;
+        // `transform` rides along for the swipe's spring back (#293).
+        return `translate ${tempo}, transform ${tempo}, display ${duration} allow-discrete, overlay ${duration} allow-discrete`;
     };
     return {
         base: { '--drawer-travel': '-100% 0' },
@@ -7539,8 +7851,27 @@ export const drawer: RecipeInput = {
     // Trigger-carried axes — see `btnColors` for why the panel is out of
     // reach and the trigger is the whole story here.
     variants: { color: btnColors(), size: btnSizes },
-    // The btn paddings, restated physically — see `lynxBtnPad` (#1084).
     targets: {
+        // Swipe to dismiss (#293) — web only, since the runtime's `--swipe-*`
+        // offset is: the sheet wears the drag offset (`SWIPE`) in every
+        // state — so a swiped sheet leaves from where it was let go — at a
+        // weight above the presence's own open `transform`. Mid-swipe no
+        // transition runs. A touch pan across the dismiss axis stays the
+        // page's; along it is the gesture's, so content taller than a
+        // block-edge sheet scrolls in a box of its own inside the panel.
+        web: {
+            parts: {
+                panel: {
+                    selectors: {
+                        '&[data-l-dock="sheet"][data-state]': { transform: SWIPE },
+                        '&[data-l-dock="sheet"][data-state="open"][data-swiping]': { transition: 'none', userSelect: 'none' },
+                        '&[data-l-dock="sheet"]:where([data-placement="start"], [data-placement="end"])': { touchAction: 'pan-y' },
+                        '&[data-l-dock="sheet"]:where([data-placement="top"], [data-placement="bottom"])': { touchAction: 'pan-x' },
+                    },
+                },
+            },
+        },
+        // The btn paddings, restated physically — see `lynxBtnPad` (#1084).
         lynx: {
             parts: {
                 trigger: { base: lynxBtnPad(4) },