@sigx/zero-daisyui 0.12.0 → 0.13.0

package/dist/report.json

@@ -10411,7 +10411,7 @@
       {
         "where": "lynx recipe for \"checkbox\"",
         "what": "--checkbox-size",
-        "detail": "calc-holding custom-property chain inlined: value substituted into 2 consumer declaration(s) across 6 compound(s) and the definition dropped — lynx drops any declaration consuming var() of a property whose value holds calc() (measured, signalxjs/lynx#1075)",
+        "detail": "calc-holding custom-property chain inlined: value substituted into 4 consumer declaration(s) across 6 compound(s) and the definition dropped — lynx drops any declaration consuming var() of a property whose value holds calc() (measured, signalxjs/lynx#1075)",
         "scope": "checkbox"
       },
       {
@@ -10848,6 +10848,36 @@
       }
     ],
     "dropped": [
+      {
+        "where": "lynx tokens, theme \"light\"",
+        "what": "--fx-noise: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.34' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23a)' opacity='0.2'%3E%3C/rect%3E%3C/svg%3E\")",
+        "detail": "an SVG data-URI image fails to decode on iOS lynx — SDWebImage reports \"Downloaded image decode failed\" as a level-error image failure, the dev client's red error screen (measured, signalxjs/lynx#1215); dropped — the image is dropped with it, supply a raster or a lynx replacement in the recipe's lynx target section if it is not decorative"
+      },
+      {
+        "where": "lynx tokens, theme \"light\"",
+        "what": "--fx-noise: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.34' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23a)' opacity='0.2'%3E%3C/rect%3E%3C/svg%3E\")",
+        "detail": "an SVG data-URI image fails to decode on iOS lynx — SDWebImage reports \"Downloaded image decode failed\" as a level-error image failure, the dev client's red error screen (measured, signalxjs/lynx#1215); dropped — the image is dropped with it, supply a raster or a lynx replacement in the recipe's lynx target section if it is not decorative"
+      },
+      {
+        "where": "lynx tokens, theme \"dark\"",
+        "what": "--fx-noise: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.34' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23a)' opacity='0.2'%3E%3C/rect%3E%3C/svg%3E\")",
+        "detail": "an SVG data-URI image fails to decode on iOS lynx — SDWebImage reports \"Downloaded image decode failed\" as a level-error image failure, the dev client's red error screen (measured, signalxjs/lynx#1215); dropped — the image is dropped with it, supply a raster or a lynx replacement in the recipe's lynx target section if it is not decorative"
+      },
+      {
+        "where": "lynx tokens, theme \"dim\"",
+        "what": "--fx-noise: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.34' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23a)' opacity='0.2'%3E%3C/rect%3E%3C/svg%3E\")",
+        "detail": "an SVG data-URI image fails to decode on iOS lynx — SDWebImage reports \"Downloaded image decode failed\" as a level-error image failure, the dev client's red error screen (measured, signalxjs/lynx#1215); dropped — the image is dropped with it, supply a raster or a lynx replacement in the recipe's lynx target section if it is not decorative"
+      },
+      {
+        "where": "lynx tokens, theme \"nord\"",
+        "what": "--fx-noise: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.34' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23a)' opacity='0.2'%3E%3C/rect%3E%3C/svg%3E\")",
+        "detail": "an SVG data-URI image fails to decode on iOS lynx — SDWebImage reports \"Downloaded image decode failed\" as a level-error image failure, the dev client's red error screen (measured, signalxjs/lynx#1215); dropped — the image is dropped with it, supply a raster or a lynx replacement in the recipe's lynx target section if it is not decorative"
+      },
+      {
+        "where": "lynx tokens, theme \"sunset\"",
+        "what": "--fx-noise: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.34' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23a)' opacity='0.2'%3E%3C/rect%3E%3C/svg%3E\")",
+        "detail": "an SVG data-URI image fails to decode on iOS lynx — SDWebImage reports \"Downloaded image decode failed\" as a level-error image failure, the dev client's red error screen (measured, signalxjs/lynx#1215); dropped — the image is dropped with it, supply a raster or a lynx replacement in the recipe's lynx target section if it is not decorative"
+      },
       {
         "where": "lynx tokens",
         "what": "prefers-reduced-motion duration collapse",
@@ -11525,12 +11555,36 @@
         "detail": "padding-inline resolves on iOS but not on Android (measured, signalxjs/lynx#1084) — cross-platform-asymmetric, treated as unsupported; dropped, restate the geometry with a physical spelling (top/right/bottom/left, margin-*/padding-*) in the recipe's lynx target section",
         "scope": "fieldset"
       },
+      {
+        "where": "lynx recipe for \"checkbox\".\"control\"",
+        "what": "backgroundImage: none, var(--fx-noise)",
+        "detail": "reads --fx-noise, which the lynx tokens refuse — an SVG data-URI image fails to decode on iOS lynx — SDWebImage reports \"Downloaded image decode failed\" as a level-error image failure, the dev client's red error screen (measured, signalxjs/lynx#1215); dropped — the image is dropped with it, supply a raster or a lynx replacement in the recipe's lynx target section if it is not decorative",
+        "scope": "checkbox"
+      },
       {
         "where": "lynx recipe for \"checkbox\".\"indicator\"",
         "what": "rotate: 45deg",
         "detail": "the standalone rotate property resolves on iOS but not on Android (measured, signalxjs/lynx#1084) — cross-platform-asymmetric, treated as unsupported; dropped, spell the motion as a transform function (transform: rotate(...)) in the recipe's lynx target section",
         "scope": "checkbox"
       },
+      {
+        "where": "lynx recipe for \"checkbox\".\"indicator\"",
+        "what": "clipPath: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 70% 80%, 70% 100%)",
+        "detail": "clip-path is not applied on lynx (measured on iOS, signalxjs/lynx#1216 — daisy's polygon-cut checkbox tick drew as the unclipped rotated square); dropped, draw the shape another way (borders, radii, transforms) in the recipe's lynx target section",
+        "scope": "checkbox"
+      },
+      {
+        "where": "lynx recipe for \"checkbox\".\"indicator\"",
+        "what": "clipPath: polygon(20% 100%, 20% 80%, 50% 80%, 50% 0%, 70% 0%, 70% 100%)",
+        "detail": "clip-path is not applied on lynx (measured on iOS, signalxjs/lynx#1216 — daisy's polygon-cut checkbox tick drew as the unclipped rotated square); dropped, draw the shape another way (borders, radii, transforms) in the recipe's lynx target section",
+        "scope": "checkbox"
+      },
+      {
+        "where": "lynx recipe for \"checkbox\".\"indicator\"",
+        "what": "clipPath: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 80% 80%, 80% 100%)",
+        "detail": "clip-path is not applied on lynx (measured on iOS, signalxjs/lynx#1216 — daisy's polygon-cut checkbox tick drew as the unclipped rotated square); dropped, draw the shape another way (borders, radii, transforms) in the recipe's lynx target section",
+        "scope": "checkbox"
+      },
       {
         "where": "lynx recipe for \"checkbox\".\"indicator\"",
         "what": "translate: 0 -35%",
@@ -11561,6 +11615,12 @@
         "detail": "not expressible in the class grammar — dropped; supply a lynx replacement in the recipe target section",
         "scope": "checkbox-group"
       },
+      {
+        "where": "lynx recipe for \"radio-group\".\"item-indicator\"",
+        "what": "backgroundImage: none, var(--fx-noise)",
+        "detail": "reads --fx-noise, which the lynx tokens refuse — an SVG data-URI image fails to decode on iOS lynx — SDWebImage reports \"Downloaded image decode failed\" as a level-error image failure, the dev client's red error screen (measured, signalxjs/lynx#1215); dropped — the image is dropped with it, supply a raster or a lynx replacement in the recipe's lynx target section if it is not decorative",
+        "scope": "radio-group"
+      },
       {
         "where": "lynx recipe for \"progress\".\"range\"",
         "what": "at[\"reduced-motion\"]",
@@ -11969,6 +12029,18 @@
         "detail": "a color function over --border cannot bake — only the theme's --color-* vocabulary has a literal per theme, and a recipe-local property's value depends on which compound matched; dropped, supply a lynx replacement in the recipe target section",
         "scope": "toast"
       },
+      {
+        "where": "lynx recipe for \"toast\".\"indicator\"",
+        "what": "clipPath: polygon(15.1% 41.3%, 1% 55%, 37.6% 92.8%, 99% 19.8%, 83.9% 7.2%, 36.6% 63.5%)",
+        "detail": "clip-path is not applied on lynx (measured on iOS, signalxjs/lynx#1216 — daisy's polygon-cut checkbox tick drew as the unclipped rotated square); dropped, draw the shape another way (borders, radii, transforms) in the recipe's lynx target section",
+        "scope": "toast"
+      },
+      {
+        "where": "lynx recipe for \"toast\".\"indicator\"",
+        "what": "clipPath: polygon(20% 8%, 50% 38%, 80% 8%, 92% 20%, 62% 50%, 92% 80%, 80% 92%, 50% 62%, 20% 92%, 8% 80%, 38% 50%, 8% 20%)",
+        "detail": "clip-path is not applied on lynx (measured on iOS, signalxjs/lynx#1216 — daisy's polygon-cut checkbox tick drew as the unclipped rotated square); dropped, draw the shape another way (borders, radii, transforms) in the recipe's lynx target section",
+        "scope": "toast"
+      },
       {
         "where": "lynx recipe for \"toast\".\"indicator\"",
         "what": "at[\"reduced-motion\"]",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sigx/zero-daisyui",
-  "version": "0.12.0",
+  "version": "0.13.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.12.0"
+    "@sigx/zero": "^0.13.0"
   },
   "devDependencies": {
     "typescript": "^7.0.2",
-    "@sigx/zero": "^0.12.0",
-    "@sigx/zero-kit": "^0.12.0"
+    "@sigx/zero": "^0.13.0",
+    "@sigx/zero-kit": "^0.13.0"
   },
   "publishConfig": {
     "access": "public"

package/src/recipes.ts

@@ -1825,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%)';
@@ -2064,26 +2071,62 @@ export const checkbox: RecipeInput = {
                     },
                 },
                 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 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 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 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)',
+                        },
+                    },
                 },
             },
         },
@@ -4149,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: {
@@ -4496,6 +4544,11 @@ export const toggle: RecipeInput = {
     },
 };
 
+/** 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 = {
@@ -4625,15 +4678,13 @@ export const toggleGroup: RecipeInput = {
                         ...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' },
@@ -4649,6 +4700,10 @@ export const toggleGroup: RecipeInput = {
                     },
                     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',
@@ -4662,6 +4717,40 @@ export const toggleGroup: RecipeInput = {
                     },
                 },
             },
+            // 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};
+}
+`,
         },
     },
 };
@@ -4830,7 +4919,19 @@ export const numberInput: RecipeInput = {
                     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',
@@ -5447,6 +5548,10 @@ export const input: RecipeInput = {
     },
 };
 
+/** 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
@@ -5519,12 +5624,54 @@ export const textarea: RecipeInput = {
     // 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') } } },
                 },
             },
         },