@sigx/zero-daisyui 0.11.0 → 0.13.0

package/src/recipes.ts

@@ -1690,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') },
             },
@@ -1781,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',
+                    },
+                },
+            },
+        },
+    },
 };
 
 /**
@@ -1794,6 +1825,13 @@ export const fieldset: RecipeInput = {
  * 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%)';
@@ -2012,33 +2050,83 @@ 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
-                    // `--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)',
+                        },
+                    },
                 },
             },
         },
@@ -2064,6 +2152,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)' },
@@ -2171,9 +2264,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)' } },
@@ -4088,6 +4192,11 @@ export const combobox: RecipeInput = {
                 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: {
@@ -4394,8 +4503,52 @@ 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)' },
+                    },
+                },
+            },
+        },
+    },
 };
 
+/** 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: RecipeInput = {
@@ -4505,6 +4658,101 @@ 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)'),
+                    },
+                    // 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' },
+                    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)' },
+                        // 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',
+                            borderLeftColor: 'var(--color-base-300)',
+                        },
+                        '&[data-orientation="vertical"]': {
+                            borderTopWidth: 'var(--border)',
+                            borderTopStyle: 'solid',
+                            borderTopColor: 'var(--color-base-300)',
+                        },
+                    },
+                },
+            },
+            // 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};
+}
+`,
+        },
+    },
 };
 
 // daisy "join" of an input and two btns: one bordered capsule (the control),
@@ -4649,14 +4897,65 @@ 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)') },
+                },
+                // `::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',
+                        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)',
+                    },
+                },
             },
         },
     },
@@ -5070,6 +5369,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
@@ -5191,8 +5499,59 @@ 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 },
+                },
+            },
+        },
+    },
 };
 
+/** The lynx textarea floor: two field heights, as ONE calc() (signalxjs/lynx#1219). */
+const textareaFloor = (step: keyof typeof FIELD_STEPS): string =>
+    `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
@@ -5259,6 +5618,64 @@ 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).
+    //
+    // 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,
+                        '--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') } } },
+                },
+            },
+        },
+    },
 };
 
 // ── Content tier (#311) ───────────────────────────────────────────────────