@sigx/zero-daisyui 0.11.0 → 0.12.0

package/dist/recipes.js

@@ -1621,6 +1621,10 @@ export const field = {
         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') },
             },
@@ -1711,6 +1715,33 @@ export const fieldset = {
             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',
+                    },
+                },
+            },
+        },
+    },
 };
 /**
  * daisy's tick, drawn by a clip-path that GROWS.
@@ -1939,11 +1970,25 @@ export const checkbox = {
     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
@@ -1989,6 +2034,11 @@ export const radioGroup = {
             // `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)' },
@@ -2096,9 +2146,20 @@ export const radioGroup = {
     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)' } },
@@ -4287,6 +4348,45 @@ export const toggle = {
         },
     },
     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,
 // the on item filled with the accent.
@@ -4395,6 +4495,65 @@ export const toggleGroup = {
         ])),
     },
     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),
 // hairline seams on the triggers' inner edges, neutral btn fills for the steppers.
@@ -4538,14 +4697,53 @@ export const numberInput = {
             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)',
+                    },
+                },
             },
         },
     },
@@ -4948,6 +5146,14 @@ const affixSize = (fontSize) => ({
     'clear-trigger': { base: { fontSize } },
     '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 = { 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
@@ -5069,6 +5275,53 @@ export const input = {
             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 },
+                },
+            },
+        },
+    },
 };
 /**
  * daisy "textarea" flavor. The `fieldControl` box minus its `height`: the
@@ -5136,6 +5389,22 @@ export const textarea = {
             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) ───────────────────────────────────────────────────
 /**