@sigx/zero-daisyui 0.12.0 → 0.13.0

package/dist/recipes.js

@@ -1754,6 +1754,12 @@ export const fieldset = {
  * horizontal bar and lifts it to the middle. All three verbatim from daisyUI
  * 5.7.8's `.checkbox:before` / `:checked` / `:indeterminate`.
  */
+/**
+ * The lynx tick's stroke: 20% of the checkbox's content box — the width of
+ * daisy's polygon bars — as a length, since borders take no percentage.
+ * The content box is the control less its padding and border on both sides.
+ */
+const CHECKBOX_LYNX_STROKE = 'calc((var(--checkbox-size) - var(--checkbox-pad) * 2 - var(--border) * 2) * 0.2)';
 const TICK_COLLAPSED = 'polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 70% 80%, 70% 100%)';
 const TICK_DRAWN = 'polygon(20% 100%, 20% 80%, 50% 80%, 50% 0%, 70% 0%, 70% 100%)';
 const DASH_DRAWN = 'polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 80% 80%, 80% 100%)';
@@ -1991,26 +1997,62 @@ export const checkbox = {
                     },
                 },
                 indicator: {
-                    // The tick's fill: the control's `color:` names
-                    // `--checkbox-on-accent`, and `currentColor` was that
-                    // ink by inheritance — spend it directly.
+                    // The tick WITHOUT clip-path, which lynx does not apply
+                    // (measured on iOS, signalxjs/lynx#1216 — daisy's
+                    // polygon-cut box drew as a solid diamond; the emitter
+                    // now drops every clip-path). daisy's drawn polygon is an
+                    // L inside the content box: a bar at x 50–70% over the
+                    // full height and a foot at y 80–100% from x 20%, both
+                    // 20% of the box thick, rotated 45° about the box's
+                    // centre. That is exactly the classic two-border check:
+                    // a 50%-wide full-height box at x 20% with a right and a
+                    // bottom border 20% of the content box thick, turned
+                    // about the content box's centre (60% 50% of itself).
+                    //
+                    // The ink: the control's `color:` names
+                    // `--checkbox-on-accent`, and `currentColor` was that ink
+                    // by inheritance (it never resolves on lynx,
+                    // signalxjs/lynx#1079) — spent directly on the borders.
                     //
-                    // The tick's motion, restated as `transform`: the
-                    // standalone `rotate`/`translate` properties resolve on
-                    // iOS but not on Android (measured, signalxjs/lynx#1084),
-                    // so the emitter refuses them. `transform` functions are
-                    // proven on both platforms — and the transition follows
-                    // the property that now moves.
+                    // The motion is `transform`: the standalone `rotate` /
+                    // `translate` properties resolve on iOS but not on
+                    // Android (signalxjs/lynx#1084). No sheen shadow — on a
+                    // hollow box it would band the inside of the L.
                     base: {
-                        backgroundColor: 'var(--checkbox-on-accent)',
+                        boxSizing: 'border-box',
+                        width: '50%',
+                        height: '100%',
+                        marginLeft: '20%',
+                        backgroundColor: 'transparent',
+                        borderStyle: 'solid',
+                        borderColor: 'var(--checkbox-on-accent)',
+                        borderTopWidth: '0',
+                        borderLeftWidth: '0',
+                        borderRightWidth: CHECKBOX_LYNX_STROKE,
+                        borderBottomWidth: CHECKBOX_LYNX_STROKE,
+                        boxShadow: 'none',
+                        transformOrigin: '60% 50%',
                         transform: 'rotate(45deg)',
-                        transition: 'clip-path var(--duration-slow) var(--ease-standard) var(--duration-instant), '
-                            + 'opacity var(--duration-instant) var(--ease-standard) var(--duration-instant), '
+                        transition: 'opacity var(--duration-instant) var(--ease-standard) var(--duration-instant), '
                             + 'transform var(--duration-slow) var(--ease-standard) var(--duration-instant)',
                     },
-                    // The order matches the standalone properties' fixed
-                    // apply order (translate, then rotate).
-                    states: { indeterminate: { transform: 'translateY(-35%) rotate(0deg)' } },
+                    states: {
+                        // daisy's dash (signalxjs/lynx#1217): the same six
+                        // points un-rotated into a bar at x 20–80%, 20% of
+                        // the box tall, lifted to the middle. Here a filled,
+                        // borderless 60% × 20% box centred on the cross
+                        // axis — the unclipped full-height box had painted
+                        // the top half of the control.
+                        indeterminate: {
+                            width: '60%',
+                            height: '20%',
+                            alignSelf: 'center',
+                            borderRightWidth: '0',
+                            borderBottomWidth: '0',
+                            backgroundColor: 'var(--checkbox-on-accent)',
+                            transform: 'rotate(0deg)',
+                        },
+                    },
                 },
             },
         },
@@ -4045,6 +4087,11 @@ export const combobox = {
                 flexWrap: 'wrap',
                 minWidth: '13rem',
                 ...fieldControl,
+                // The one field control that wraps: under `multiple` its tags
+                // flow onto new rows, so the field step is a floor, not a cap —
+                // a fixed height spills wrapped tags over the next field (#407).
+                height: 'auto',
+                minHeight: fieldHeight('md'),
                 transition: 'border-color var(--duration-fast) var(--ease-standard)',
             },
             states: {
@@ -4388,6 +4435,10 @@ export const toggle = {
         },
     },
 };
+/** A toggle-group end item's outer corner: the frame's radius inside its hairline. */
+const joinInnerRadius = 'calc(var(--radius-field) - var(--border))';
+/** A zero seam width that still holds var(), so it can beat the var-bearing seam on lynx. */
+const noSeam = 'calc(var(--border) * 0)';
 // daisy "join" of btns: one bordered capsule, hairline seams between items,
 // the on item filled with the accent.
 export const toggleGroup = {
@@ -4515,15 +4566,13 @@ export const toggleGroup = {
                         ...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' },
-                    },
+                    // The frame keeps all four edges (signalxjs/lynx#1218).
+                    // It used to give up its leading edge to the first item's
+                    // seam and trust its own clip to round that item's
+                    // corners, but on iOS the frame's clip does not round the
+                    // leading corners: the first item painted square, and its
+                    // seam was lost with them. The `first`/`last` modifiers
+                    // below carry the join's ends instead.
                 },
                 item: {
                     base: { flexShrink: '0', flexWrap: 'nowrap' },
@@ -4539,6 +4588,10 @@ export const toggleGroup = {
                     },
                     selectors: {
                         '&[data-state="on"][data-pressed]': { background: 'var(--toggle-group-accent)' },
+                        // The join seams: lynx has no sibling combinator, so
+                        // the web's `item + item` edge cannot be selected.
+                        // Every item draws its leading seam, and the `first`
+                        // modifier takes it off the item at the frame's edge.
                         '&[data-orientation="horizontal"]': {
                             borderLeftWidth: 'var(--border)',
                             borderLeftStyle: 'solid',
@@ -4552,6 +4605,40 @@ export const toggleGroup = {
                     },
                 },
             },
+            // The ends of the join (signalxjs/lynx#1218). Lynx has no
+            // `:first-child` or `:last-child`, so lynx-zero stamps the end
+            // items itself, as `data-mod-first` / `data-mod-last` (the
+            // `zx-m-first` / `zx-m-last` classes). They are a lynx-zero
+            // rendering detail, not modifiers an author sets, so they are
+            // not declared in the vocabulary and are styled from raw lynx
+            // css. The end items round their own outer corners to the
+            // frame's inner radius, so an on or held end item follows the
+            // frame's corners without relying on its clip; `first` also
+            // drops the leading seam, which would double the frame's edge.
+            // That zero width is spelled through var() on purpose: a static
+            // longhand loses to the var-bearing seam width whatever its
+            // specificity (lynx expands var() declarations after the
+            // cascade, signalxjs/lynx#1161).
+            css: `
+.zx-toggle-group__item.zx-m-first.zx-o-horizontal {
+    border-left-width: ${noSeam};
+    border-top-left-radius: ${joinInnerRadius};
+    border-bottom-left-radius: ${joinInnerRadius};
+}
+.zx-toggle-group__item.zx-m-first.zx-o-vertical {
+    border-top-width: ${noSeam};
+    border-top-left-radius: ${joinInnerRadius};
+    border-top-right-radius: ${joinInnerRadius};
+}
+.zx-toggle-group__item.zx-m-last.zx-o-horizontal {
+    border-top-right-radius: ${joinInnerRadius};
+    border-bottom-right-radius: ${joinInnerRadius};
+}
+.zx-toggle-group__item.zx-m-last.zx-o-vertical {
+    border-bottom-left-radius: ${joinInnerRadius};
+    border-bottom-right-radius: ${joinInnerRadius};
+}
+`,
         },
     },
 };
@@ -4719,7 +4806,19 @@ export const numberInput = {
                     base: { overflow: 'visible' },
                     states: { 'focus-visible': lynxFocusRing('var(--number-input-accent)') },
                 },
-                input: { base: { color: 'var(--color-base-content)', flexGrow: '1' } },
+                // `::placeholder` does not exist on lynx, so the web's 60%
+                // mix rides lynx's own `-x-placeholder-color` (baked per
+                // theme) — without it the platform default reads dark on
+                // dark (signalxjs/lynx#1222). Spelled out, not the
+                // `textFieldPlaceholder` const: that one is declared further
+                // down the module, after this literal is evaluated.
+                input: {
+                    base: {
+                        color: 'var(--color-base-content)',
+                        '-x-placeholder-color': 'color-mix(in oklab, var(--color-base-content) 60%, transparent)',
+                        flexGrow: '1',
+                    },
+                },
                 'increment-trigger': {
                     base: {
                         display: 'flex',
@@ -5323,6 +5422,8 @@ export const input = {
         },
     },
 };
+/** The lynx textarea floor: two field heights, as ONE calc() (signalxjs/lynx#1219). */
+const textareaFloor = (step) => `calc(var(--size-field) * ${FIELD_STEPS[step] * 2})`;
 /**
  * daisy "textarea" flavor. The `fieldControl` box minus its `height`: the
  * whole point of a textarea is that its height is the content's (and the
@@ -5395,12 +5496,54 @@ export const textarea = {
     // 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).
+    //
+    // The floor is one flat `calc(var(--size-field) * n)` per size
+    // (signalxjs/lynx#1219): the shared `calc(fieldHeight * 2)` nests a
+    // calc() in a calc(), and on device the box never took it — an empty
+    // textarea sat one line tall.
+    //
+    // The focus ring is NOT `lynxFocusRing`'s two stacked outset shadows
+    // (signalxjs/lynx#1220). Lynx iOS re-inserts a view's outset shadow
+    // layers at a stale index whenever it re-lays the view out
+    // (`LynxBackgroundManager.updateShadow` reads the sublayer count before
+    // removing the old layers), which reverses their stacking: the 4px ring
+    // lands on top of the 2px gap and paints one solid band. A fixed-height
+    // box never re-lays out; this auto-height one does, as its native field
+    // measures and grows. So the ring is spelled with one outset shadow and
+    // one inset shadow, which paint disjoint areas and cannot swap: the ring
+    // just outside the box, the box's own border repainted as the base-100
+    // gap, and the hairline redrawn inside it by the inset spread, in the
+    // edge colour (`--textarea-edge`, the error colour while invalid). The
+    // gap is the border's width instead of the web's 2px.
     targets: {
         lynx: {
             parts: {
                 textarea: {
-                    base: { color: 'var(--color-base-content)', '-x-placeholder-color': textFieldPlaceholder },
-                    states: { 'focus-visible': lynxFocusRing('var(--textarea-accent)') },
+                    base: {
+                        color: 'var(--color-base-content)',
+                        '-x-placeholder-color': textFieldPlaceholder,
+                        '--textarea-edge': 'var(--color-base-300)',
+                        minHeight: textareaFloor('md'),
+                    },
+                    states: {
+                        invalid: { '--textarea-edge': 'var(--color-error)' },
+                        'focus-visible': {
+                            outline: 'none',
+                            borderColor: 'var(--color-base-100)',
+                            boxShadow: '0 0 0 2px var(--textarea-accent), '
+                                // Twice the border (1px in every shipped
+                                // theme): the inner half shows as the hairline.
+                                + 'inset 0 0 0 2px var(--textarea-edge)',
+                        },
+                    },
+                },
+            },
+            variants: {
+                size: {
+                    xs: { textarea: { base: { minHeight: textareaFloor('xs') } } },
+                    sm: { textarea: { base: { minHeight: textareaFloor('sm') } } },
+                    lg: { textarea: { base: { minHeight: textareaFloor('lg') } } },
+                    xl: { textarea: { base: { minHeight: textareaFloor('xl') } } },
                 },
             },
         },