@sigx/zero-daisyui 0.14.0 → 0.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sigx/zero-daisyui",
-  "version": "0.14.0",
+  "version": "0.15.0",
   "description": "DaisyUI-flavored design system for SignalX Zero — daisy's token values and component look as a pure tokens+recipes skin over @sigx/zero primitives. No Tailwind, no daisyUI plugin required.",
   "type": "module",
   "main": "./dist/index.js",
@@ -62,12 +62,12 @@
     "url": "https://github.com/signalxjs/zero/issues"
   },
   "peerDependencies": {
-    "@sigx/zero": "^0.14.0"
+    "@sigx/zero": "^0.15.0"
   },
   "devDependencies": {
     "typescript": "^7.0.2",
-    "@sigx/zero": "^0.14.0",
-    "@sigx/zero-kit": "^0.14.0"
+    "@sigx/zero-kit": "^0.15.0",
+    "@sigx/zero": "^0.15.0"
   },
   "publishConfig": {
     "access": "public"

package/src/recipes.ts

@@ -1625,12 +1625,34 @@ export const menu: RecipeInput = {
     // Trigger-carried axes — same wiring as dialog, same reason. The dropdown
     // and its items are top-layer siblings the donut cannot reach.
     variants: { color: btnColors(), size: btnSizes },
-    // The btn paddings, restated physically — see `lynxBtnPad` (#1084).
+    // The btn paddings, restated physically — see `lynxBtnPad` (#1084) —
+    // and the trigger's press rendering, as popover's (`lynxBtnPressed`).
     targets: {
         web: floatingArrow('menu', panelArrowPaint),
         lynx: {
             parts: {
-                trigger: { base: lynxBtnPad(4) },
+                // Content-sized like daisy's btn (signalxjs/lynx#1165), an
+                // explicit row (lynx does not default the direction the way a
+                // browser does), the held state in place of the dropped
+                // `:hover`, and the box-shadow ring (signalxjs/lynx#1163).
+                trigger: {
+                    base: { ...lynxBtnPad(4), ...lynxBtnFit, flexDirection: 'row' },
+                    states: { pressed: lynxBtnPressed, ...lynxFocus() },
+                },
+                // The popups' rows stack and span the panel: a flex column
+                // (a lynx view's default is a shrink-wrapping linear box).
+                popup: { base: { display: 'flex', flexDirection: 'column' } },
+                'sub-popup': { base: { display: 'flex', flexDirection: 'column' } },
+                // Every row kind is a mark / label / shortcut / chevron row.
+                // A touch list has no hover: lynx-zero stamps `highlighted` on
+                // the row under the finger, so the web's highlight wash is the
+                // press rendering as it stands. The ✓ (item-indicator) and ›
+                // (sub-trigger) the web draws with `::after` render as
+                // `<text>` glyphs in lynx-zero — there is no pseudo-element.
+                item: { base: { flexDirection: 'row' } },
+                'checkbox-item': { base: { flexDirection: 'row' } },
+                'radio-item': { base: { flexDirection: 'row' } },
+                'sub-trigger': { base: { flexDirection: 'row' } },
                 // The shortcut's reading-end push, restated physically (#1084).
                 shortcut: { base: { marginLeft: 'auto', paddingLeft: 'var(--space-lg)' } },
             },
@@ -5374,6 +5396,30 @@ const treeRowSelectors: NonNullable<PartStyles['selectors']> = {
     },
 };
 
+/**
+ * The tree rows' lynx states (signalxjs/lynx#1256). The web's press wash is
+ * `[data-pressed]:not([data-disabled]):not([data-selected])`; lynx has no
+ * absence classes, so the wash is the plain `pressed` state and a selected
+ * row restores its accent fill below. The web's descendant rule that swaps
+ * the check box's pair on a selected row (`[data-selected] &` on the box)
+ * becomes the ROW's own custom properties: they inherit to the box inside
+ * it. The focus ring is inset (rows sit flush) and drawn as a box-shadow,
+ * which follows the row's radius where lynx's `outline` does not.
+ */
+const lynxTreeRowStates: Record<string, CssProps> = {
+    pressed: { background: 'var(--color-base-300)' },
+    selected: {
+        '--tree-check': 'var(--tree-on-accent)',
+        '--tree-on-check': 'var(--tree-accent)',
+    },
+    ...lynxFocus({ inset: true }),
+};
+
+/** A held selected row keeps its accent fill (the web's `:not([data-selected])`). */
+const lynxTreeRowSelectors: Record<string, CssProps> = {
+    '&[data-selected][data-pressed]': { background: 'var(--tree-accent)' },
+};
+
 /**
  * `tickGlyphFallback` for the node check box, whose tick is its `::after`:
  * the geometry drops and the same pseudo carries the glyph, in the medium's
@@ -5524,12 +5570,37 @@ export const treeView: RecipeInput = {
             xl: { root: { base: { '--tree-text': 'var(--text-lg)' } } },
         },
     },
-    // The indent, restated physically: logical spellings resolve on iOS but
-    // not on Android (measured, signalxjs/lynx#1084), so the emitter refuses
-    // them. Physical is the lynx target's norm — no RTL flow there.
+    // lynx (signalxjs/lynx#1256, zero#478). No hover on a touch platform, no
+    // `:not()`, no pseudo-elements, no descendant selectors: each web rule
+    // those carry is restated on the part the runtime stamps. The skin's
+    // `:dir(rtl)` mirror and the `@media` stops have no lynx form (no RTL
+    // flow, no conditions) and stay dropped.
     targets: {
         lynx: {
             parts: {
+                item: { states: lynxTreeRowStates, selectors: lynxTreeRowSelectors },
+                'branch-trigger': { states: lynxTreeRowStates, selectors: lynxTreeRowSelectors },
+                // `inline-block` is not a lynx display value. The glyph is a
+                // `<text>` part: a 1em box centred on it, so the quarter turn
+                // pivots on the chevron instead of swinging it sideways.
+                'branch-indicator': { base: { display: 'flex', width: '1em', textAlign: 'center' } },
+                // The mark is a `<text>` child lynx-zero renders (`✓` checked,
+                // `−` indeterminate) in place of the web's clip-path `::after`
+                // tick — clip-path and pseudo-elements are both dropped on
+                // lynx. The glyph is the forced-colors fallback's shape
+                // (`nodeTickFallback`), inked with the box's `-on` pair and
+                // sized by inheritance from the row.
+                'node-checkbox': {
+                    base: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        color: 'var(--tree-on-check)',
+                    },
+                },
+                // The indent, restated physically: logical spellings resolve
+                // on iOS but not on Android (measured, signalxjs/lynx#1084),
+                // so the emitter refuses them.
                 'branch-content': { base: { paddingLeft: 'var(--space-lg)' } },
             },
         },
@@ -5633,6 +5704,10 @@ export const input: RecipeInput = {
             selectors: {
                 // Same muting, same reason as `number-input/input` (#264).
                 '&::placeholder': { color: 'color-mix(in oklab, var(--color-base-content) 60%, transparent)' },
+                // zero draws its own ClearTrigger and clears on Escape, and Firefox
+                // draws no native clear: hide the engine's cancel button everywhere (#446).
+                '&::-webkit-search-cancel-button': { appearance: 'none', display: 'none' },
+                '&::-webkit-search-decoration': { appearance: 'none' },
             },
         },
         // daisy's `label` inside `.input`: a quiet prefix/suffix at one edge,
@@ -6154,7 +6229,13 @@ export const alert: RecipeInput = {
                     },
                 },
                 // Pinned top-right, its glyph on the padding edge. `inherit`
-                // is spelled as the root's own ink.
+                // is spelled as the root's own ink. A square chip, the
+                // glyph centred in it: the web's `line-height: 1` + 2xs
+                // padding make an almost-square box, but lynx does not carry
+                // the line-height into the glyph's `<text>`, so the padded
+                // box was a narrow × in a tall line — a 14 × 20pt pill whose
+                // press wash and focus ring drew as vertical ovals
+                // (signalxjs/lynx#1253). The box is sized outright instead.
                 close: {
                     base: {
                         position: 'absolute',
@@ -6162,6 +6243,13 @@ export const alert: RecipeInput = {
                         right: 'calc(var(--alert-pad-x) - var(--space-2xs))',
                         color: 'var(--color-base-content)',
                         fontSize: 'var(--text-md)',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        boxSizing: 'border-box',
+                        padding: '0',
+                        width: 'calc(var(--text-md) + var(--space-2xs) * 2)',
+                        height: 'calc(var(--text-md) + var(--space-2xs) * 2)',
                     },
                     states: lynxFocus({ gap: 'var(--alert-tint)' }),
                 },
@@ -6806,6 +6894,15 @@ export const kbd: RecipeInput = {
                         ...lynxSides('border{}Width', 'var(--border)', ['Top', 'Right', 'Left']),
                         borderBottomWidth: 'calc(var(--border) * 2)',
                         ...lynxSides('border{}Color', 'var(--color-base-300)'),
+                        // The web's monospace cap comes from the browser's
+                        // UA style for `<kbd>`, not the recipe; lynx has no
+                        // UA sheet, so the face is spelled here
+                        // (signalxjs/lynx#1254). Concrete names, not a
+                        // token: iOS Lynx walks the list with
+                        // `UIFont fontWithName:` (Menlo ships on iOS, the
+                        // CSS generics do not resolve there), and
+                        // `monospace` serves the lynx web target.
+                        fontFamily: 'Menlo, monospace',
                     },
                 },
             },
@@ -7875,6 +7972,28 @@ export const navbar: RecipeInput = {
             xl: { root: { base: { minBlockSize: '6rem', fontSize: 'var(--text-lg)' } } },
         },
     },
+    // Lynx (signalxjs/lynx#1257): `min-block-size` is not a lynx property,
+    // so the bar's height ramp is restated as `min-height`; and a lynx flex
+    // container is only a row when it says so, so the bar and its three
+    // sections spell `flex-direction: row`.
+    targets: {
+        lynx: {
+            parts: {
+                root: { base: { flexDirection: 'row', minHeight: '4rem' } },
+                start: { base: { flexDirection: 'row' } },
+                center: { base: { flexDirection: 'row' } },
+                end: { base: { flexDirection: 'row' } },
+            },
+            variants: {
+                size: {
+                    xs: { root: { base: { minHeight: '2.5rem' } } },
+                    sm: { root: { base: { minHeight: '3rem' } } },
+                    lg: { root: { base: { minHeight: '5rem' } } },
+                    xl: { root: { base: { minHeight: '6rem' } } },
+                },
+            },
+        },
+    },
 };
 
 /**
@@ -7934,6 +8053,14 @@ export const navList: RecipeInput = {
                 alignItems: 'center',
                 gap: 'var(--space-sm)',
                 textDecoration: 'none',
+                // Without an href the link is a <button> (#451): drop its chrome.
+                appearance: 'none',
+                background: 'none',
+                border: '0',
+                font: 'inherit',
+                textAlign: 'start',
+                inlineSize: '100%',
+                cursor: 'pointer',
                 color: 'var(--nav-ink)',
                 padding: 'var(--space-sm) var(--space-lg)',
                 borderRadius: 'var(--radius-field)',
@@ -7981,6 +8108,27 @@ export const navList: RecipeInput = {
             xl: { root: { base: { fontSize: 'var(--text-lg)' } }, link: { base: { padding: 'var(--space-lg) var(--space-xl)' } } },
         },
     },
+    // The web's block and inline boxes, restated for lynx (signalxjs/lynx#1259).
+    // No `:hover` on a touch platform, and the link's anatomy declares no
+    // `pressed` flag: a held link has lynx-zero's main-thread press scale.
+    targets: {
+        lynx: {
+            parts: {
+                // `display: block` has no lynx projection: a column, so the
+                // link spans the list as a block `<li>` makes it.
+                item: { base: { display: 'flex', flexDirection: 'column' } },
+                // The icon / label / meta row, explicit (lynx does not
+                // default the direction the way a browser does).
+                link: { base: { flexDirection: 'row' } },
+                // `inline-size` restated physically; the glyph centred in
+                // its column on both axes.
+                icon: { base: { width: '1.25em', flexDirection: 'row', alignItems: 'center' } },
+                // The count's push to the far edge, restated physically —
+                // `margin-inline-start` does not resolve on Android (#1084).
+                meta: { base: { marginLeft: 'auto', flexDirection: 'row' } },
+            },
+        },
+    },
 };
 
 /**
@@ -8090,6 +8238,37 @@ export const breadcrumbs: RecipeInput = {
             xl: { root: { base: { fontSize: 'var(--text-lg)' } } },
         },
     },
+    // Lynx (signalxjs/lynx#1257):
+    // - The list, the items and the ellipsis are explicit rows (a lynx flex
+    //   container is only a row when it says so).
+    // - The trigger's `hover` ink is dropped on a touch platform; the
+    //   `pressed` flag carries it instead. Its resting ink moves onto a
+    //   lynx-only token so the base rule stays a plain var() read: the
+    //   emitter bakes a `color-mix` declaration per theme under the host
+    //   class, and that baked rule would outrank the pressed one.
+    // - The focus ring is the lynx box-shadow ring (outline has no offset
+    //   and ignores the radius there).
+    // - The link's `hover` stays dropped: the link anatomy declares no
+    //   pressed flag, so there is nothing on lynx to carry it.
+    // - The separator is a real part on both targets (lynx-zero renders it
+    //   as a text glyph), so daisy's `::before` chevron needs no lynx form.
+    targets: {
+        lynx: {
+            tokens: { '--bc-trigger-ink': 'color-mix(in oklch, var(--color-base-content) 75%, transparent)' },
+            parts: {
+                list: { base: { flexDirection: 'row' } },
+                item: { base: { flexDirection: 'row' } },
+                ellipsis: { base: { flexDirection: 'row' } },
+                'ellipsis-trigger': {
+                    base: { color: 'var(--bc-trigger-ink)' },
+                    states: {
+                        pressed: { color: 'var(--color-base-content)' },
+                        'focus-visible': lynxFocusRing('var(--color-primary)'),
+                    },
+                },
+            },
+        },
+    },
 };
 
 /**
@@ -8128,6 +8307,19 @@ const pageTrigger: PartStyles = {
     },
 };
 
+/** A pagination cell's box on lynx — see the recipe's lynx section. */
+const pageCellLynx: NonNullable<PartStyles['base']> = {
+    minWidth: 'var(--pg-size)',
+    height: 'var(--pg-size)',
+    flexShrink: '0',
+};
+
+/** The four triggers on lynx: the cell box, the held wash + sink, the ring. */
+const pageTriggerLynx: PartStyles = {
+    base: pageCellLynx,
+    states: { pressed: { background: 'var(--color-base-300)' }, ...lynxFocus() },
+};
+
 /**
  * Pagination — daisy's join-of-buttons made of standalone btn cells: the
  * quiet base-200 fill, base-300 hover, the current page inverted into the
@@ -8224,13 +8416,35 @@ export const pagination: RecipeInput = {
             xl: { root: { base: { '--pg-size': 'calc(var(--size-field) * 14)', '--pg-font': 'var(--text-lg)' } } },
         },
     },
-    // The cell's inline padding, restated physically: logical spellings
-    // resolve on iOS but not on Android (measured, signalxjs/lynx#1084), so
-    // the emitter refuses them.
+    // Lynx (signalxjs/lynx#1258):
+    // - the cells' size, restated physically: `min-inline-size` and
+    //   `block-size` do not resolve on lynx (lynx#1145), so every cell
+    //   collapsed to its glyph. Read through `--pg-size`, so the compile
+    //   inlines the size steps per part, as it does the web's;
+    // - the item's inline padding, physical: logical spellings resolve on
+    //   iOS but not on Android (measured, lynx#1084);
+    // - the press: the web answers a pointer with `:hover`, which a touch
+    //   platform drops, so the held cell paints daisy's hover wash with the
+    //   1px sink (`lynxBtnPressed`'s pair) — the current page keeps its
+    //   accent fill and only sinks;
+    // - the focus ring as `lynxFocus`: lynx's outline has no offset and
+    //   ignores the radius (lynx#1163);
+    // - no row shrink: a cell never squeezes below its size in a narrow row.
+    // The glyphs' rtl flip has no replacement: lynx has no RTL flow.
     targets: {
         lynx: {
             parts: {
-                item: { base: { paddingLeft: 'var(--space-2xs)', paddingRight: 'var(--space-2xs)' } },
+                root: { base: { flexDirection: 'row' } },
+                item: {
+                    base: { ...pageCellLynx, paddingLeft: 'var(--space-2xs)', paddingRight: 'var(--space-2xs)' },
+                    states: lynxFocus(),
+                    selectors: { '&[data-pressed][data-state="inactive"]': { background: 'var(--color-base-300)' } },
+                },
+                ellipsis: { base: pageCellLynx },
+                'first-trigger': pageTriggerLynx,
+                'prev-trigger': pageTriggerLynx,
+                'next-trigger': pageTriggerLynx,
+                'last-trigger': pageTriggerLynx,
             },
         },
     },
@@ -8250,6 +8464,12 @@ const stepInk = (accent: string, role: string): string =>
     `color-mix(in oklab, ${accent} `
     + `${Math.min(ROLE_INK_KEEP[role as keyof typeof roles] ?? 55, 70)}%, var(--color-base-content))`;
 
+/**
+ * The complete disc's fill: 20% of the accent over base-100, in OKLAB (see
+ * the indicator's `complete` state for why not OKLCH).
+ */
+const stepTint = (accent: string): string => `color-mix(in oklab, ${accent} 20%, var(--color-base-100))`;
+
 /** A Steps root holding wizard parts (#296) — the panel or the triggers. */
 const STEPS_WIZARD = '&:has(> [data-scope="steps"]:is([data-part="content"], [data-part="prev-trigger"], [data-part="next-trigger"]))';
 
@@ -8367,7 +8587,7 @@ export const steps: RecipeInput = {
                 // (warning's yellow came out pink) — which the browser parity
                 // check caught once per-step colour put all eight roles on
                 // the disc (#112).
-                complete: { background: 'color-mix(in oklab, var(--steps-accent) 20%, var(--color-base-100))', color: 'var(--steps-complete-ink)' },
+                complete: { background: stepTint('var(--steps-accent)'), color: 'var(--steps-complete-ink)' },
                 inactive: { background: 'var(--color-base-200)', color: 'var(--color-base-content)' },
                 invalid: { background: 'var(--color-error)', color: 'var(--color-error-content)' },
             },
@@ -8455,32 +8675,82 @@ export const steps: RecipeInput = {
             xl: { root: { base: { '--steps-ind': 'calc(var(--size-selector) * 9)', '--steps-font': 'var(--text-md)' } } },
         },
     },
-    // The bridge's anchors and the vertical item's tail padding, restated
-    // physically: logical spellings resolve on iOS but not on Android
-    // (measured, signalxjs/lynx#1084), so the emitter refuses them. Physical
-    // is the lynx target's norm — no RTL flow there to mirror with.
+    // Lynx. Physical spellings throughout: logical insets, margins and
+    // paddings resolve on iOS but not on Android (measured,
+    // signalxjs/lynx#1084), and `inline-size` / `block-size` do not resolve
+    // at all (lynx#1145) — without the restatement the discs and lines did
+    // not paint. Also (signalxjs/lynx#1258):
+    // - the complete disc's tint and ink read `--steps-accent` through a
+    //   colour function, which cannot bake; the base pair is restated over
+    //   primary, and each colour already restates the ink on its item, so
+    //   the tint joins it there;
+    // - the bridge runs from this disc's edge to the next disc's edge —
+    //   `50% + ind/2` for `100% - ind` — instead of centre to centre under
+    //   the disc, so it needs no z-index across sibling items; the item
+    //   stops clipping (a lynx view's `overflow` defaults to hidden) so the
+    //   bridge can reach past its box;
+    // - the `:has()` wizard wrap becomes the `wizard` stamp lynx-zero puts on
+    //   the root while a panel or trigger is mounted (raw css below);
+    // - the focus ring as `lynxFocus` (lynx#1163), and Back/Next's press as
+    //   daisy's hover wash + sink (`lynxBtnPressed`), `:hover` being dropped.
     targets: {
         lynx: {
+            tokens: {
+                '--steps-complete-ink': stepInk('var(--color-primary)', 'primary'),
+                '--steps-complete-tint': stepTint('var(--color-primary)'),
+            },
             parts: {
+                root: { base: { flexDirection: 'row', overflow: 'visible' } },
                 item: {
+                    base: { overflow: 'visible' },
+                    states: lynxFocus(),
                     selectors: {
                         '&[data-orientation="vertical"]': { paddingBottom: 'var(--space-lg)' },
                     },
                 },
+                indicator: {
+                    base: { width: 'var(--steps-ind)', height: 'var(--steps-ind)' },
+                    states: { complete: { background: 'var(--steps-complete-tint)' } },
+                },
                 separator: {
                     selectors: {
                         '&[data-orientation="horizontal"]': {
-                            top: 'calc(var(--space-xs) + var(--steps-ind) / 2)',
-                            left: '50%',
+                            top: 'calc(var(--space-xs) + (var(--steps-ind) - var(--border)) / 2)',
+                            left: 'calc(50% + var(--steps-ind) / 2)',
+                            width: 'calc(100% - var(--steps-ind))',
+                            height: 'var(--border)',
                         },
                         '&[data-orientation="vertical"]': {
                             left: 'calc(var(--space-xs) + (var(--steps-ind) - var(--border)) / 2)',
                             top: 'calc(var(--space-xs) + var(--steps-ind))',
                             bottom: 'calc(var(--space-xs) * -1)',
+                            width: 'var(--border)',
                         },
                     },
                 },
+                'prev-trigger': {
+                    base: { ...lynxBtnPad(4), ...lynxBtnFit },
+                    states: { pressed: lynxBtnPressed, ...lynxFocus() },
+                },
+                'next-trigger': {
+                    base: { ...lynxBtnPad(4), ...lynxBtnFit, marginLeft: 'auto' },
+                    states: { pressed: lynxBtnPressed, ...lynxFocus() },
+                },
+            },
+            variants: {
+                color: Object.fromEntries(ROLES.map((c) => [c, { item: { base: {
+                    '--steps-complete-tint': stepTint(`var(--color-${c})`),
+                } } }])),
             },
+            // lynx-zero stamps `wizard` on the root while a Content,
+            // PrevTrigger or NextTrigger is mounted — the web's `:has()`.
+            // A lynx-zero rendering detail, not a modifier an author sets.
+            css: `
+.zx-steps__root.zx-m-wizard {
+    flex-wrap: wrap;
+    row-gap: var(--space-md);
+}
+`,
         },
     },
 };