srcdev-nuxt-components 9.6.9 → 9.6.11

package/.claude/rules/consumer/ids-from-useid.md

@@ -6,9 +6,11 @@ paths:
 # Element ids come from `useId()`, never from data
 
 Build `id`/`for` pairs from `useId()` (plus a loop index for repeated items), never from props or
-data values like `` `${name}-${item.value}` ``.
+data values like `` `${name}-${item.value}` ``. A radio group's default `name` comes from
+`useId()` too, never a fixed string.
 
 Why: two instances sharing a `name` and values produce duplicate ids, and a value with spaces makes
-an invalid one, so labels toggle the wrong control (`MultipleCheckboxes`, 2026-10-16). Test
+an invalid one, so labels toggle the wrong control (`MultipleCheckboxes`, 2026-10-16). A fixed default radio `name` makes every instance on a page
+one group, so picking in one clears the others (`SegmentedControl`, 2026-10-17). Test
 uniqueness with both instances inside one host component: separate `mountSuspended` calls each
 restart the `useId()` counter. Detail: skill `testing-add-unit-test.md` (srcdev-nuxt-components).

package/.claude/skills/component-compliance-checklist.md

@@ -183,7 +183,8 @@ The ledger can't see items 6c, 9, 10, 11 and 14, so check those by hand.
 8. **VS Code snippet** — create or update `.vscode/srcdev-component-{family}.code-snippets`,
    covering the control and its Field wrapper in one file. For a teleported component, a CSS
    override scaffold must not nest its selector under a page class: it never matches (the
-   `DisplayToast` snippet did, fixed 2026-10-16).
+   `DisplayToast` snippet did, fixed 2026-10-16). A tab stop with a default value is `${3:8}`:
+   `$38` is read as tab stop 38 and the default never appears (`AlertMask`, fixed 2026-10-17).
 9. **Accessibility** — check for gaps beyond what already-passing tests would catch:
    - Interactive controls (buttons, toggles, custom form-like widgets) have an accessible name —
      visible text, `aria-label`, or `aria-labelledby`.
@@ -196,6 +197,11 @@ The ledger can't see items 6c, 9, 10, 11 and 14, so check those by hand.
    - A toast, banner or status message doesn't `.focus()` itself when it appears (rule
      `consumer/a11y-no-focus-steal.md`).
    - Focus is visible (`:focus-visible`, not a suppressed outline) on anything focusable.
+   - `aria-invalid` is bound as `fieldHasError ? 'true' : undefined`, never the boolean itself:
+     `:aria-invalid="fieldHasError"` renders `aria-invalid="false"` on every valid field
+     (`InputTextarea`, `ToggleSwitch`, fixed 2026-10-16). Same for an empty `aria-describedby`.
+   - A checkbox drawn as an on/off switch has `role="switch"`, and its decorative track is
+     `aria-hidden` (`ToggleSwitch`, 2026-10-16).
    - Live-updating or auto-advancing content (carousels, marquees, auto-dismissing toasts) has a
      way to pause it, per WCAG 2.2.2 — a visible control, or pause-on-hover/focus at minimum.
    - `prefers-reduced-motion` is respected for any animation that isn't purely decorative.
@@ -275,13 +281,29 @@ The ledger can't see items 6c, 9, 10, 11 and 14, so check those by hand.
       defaults to its min-content width and overflows a narrow column (`MultipleCheckboxes`,
       2026-10-16).
     - Element ids come from `useId()`, never from data values (rule `consumer/ids-from-useid.md`).
+    - A wrapper passes its child only props the child declares. Anything else falls through as an
+      HTML attribute on the child's root: `InputTextField` put `label="…"` and
+      `error-message="…"` on `.input-text-wrapper` (fixed 2026-10-16). Check the child root's
+      attributes in a test.
+    - A control styled with `all: unset` restores the UA defaults it depends on. On a `<textarea>`
+      that reset `white-space: pre-wrap` (inherited, so it took the page's `normal`); set
+      `white-space: pre-wrap` and `overflow-wrap: anywhere` explicitly (`InputTextarea`,
+      2026-10-16).
+    - A state rule (`[data-checked]`) written at the root level loses to deeper nested base rules
+      for the same element. Nest it in the element's own block as `.root[data-x] & { … }`
+      (`ToggleSwitch`, 2026-10-16; `css-nesting-conventions.md`). Same for hover and focus: keep
+      both at the same nesting depth with focus after hover, or a deeper hover rule recolours the
+      focus ring while both apply (`InputSelect`, 2026-10-17).
     - Step buttons and any other script that changes a number round to the step's precision
       (`toFixed`), clamp to `min`/`max`, and compare limits with `<=`/`>=`, never `===` (0.1 steps
       drift to 0.30000000000000004, and an overshoot past an `===` check never disables the button).
       Reference: `stepBy()` in `InputNumberField`.
     - Layout measured in script (connector lines, indicators) re-measures when any measured item
       resizes or changes class, not only when the container resizes (`measured-layout-observers.md`,
-      pitfall #28).
+      pitfall #28). Prefer a CSS-only position when one exists (rule above, `SegmentedControl`).
+    - Geometry drawn in script (SVG paths, canvas) is physical. Position content around it with
+      physical properties (`margin-left`, not `margin-inline-start`), or right-to-left content
+      overlaps a one-sided bar (`AlertMask`, 2026-10-17).
     - Action buttons are `InputButton` (`variant="inline"` when the wrapper styles them), not a raw
       `<button>` (`component-inline-button.md`, `component-inline-action-button.md`). The ledger
       doesn't check this, which is how `InputCopy` scored 5/5 with one (fixed 2026-10-15).

package/.claude/skills/component-inline-action-button.md

@@ -76,7 +76,7 @@ Target `.my-action-button.input-button` inside the wrapper to override InputButt
 
 ## What `variant="inline"` still brings
 
-`inline` adds no colours, but the base `.input-button` rule and its inner `.button-text` still
+`inline` adds no colours, but the base `.input-button` rule and its inner `.input-button-text` still
 apply. Override what the wrapper doesn't want, on the `.my-action-button.input-button` selector:
 
 - `box-sizing: content-box`: set `border-box` if the button has a `max-inline-size: 100%` or sits
@@ -84,10 +84,11 @@ apply. Override what the wrapper doesn't want, on the `.my-action-button.input-b
 - `min-height: var(--button-min-height)`: set `auto` to size from your own padding.
 - `grid-auto-flow: column` layout, `overflow: hidden` and a `transition: all` (replace it with
   your own `transition` list).
-- `.button-text` takes `font-size: var(--button-font-size)` and
+- `.input-button-text` takes `font-size: var(--button-font-size)` and
   `text-transform: var(--button-text-transform)`: set `font-size: inherit; text-transform: none`
-  on `& .button-text` to keep the wrapper's type. It already wraps unbroken text
-  (`overflow-wrap: anywhere`, with `white-space` from `--input-button-text-white-space`).
+  on `& .input-button-text` to keep the wrapper's type. It already wraps unbroken text
+  (`overflow-wrap: anywhere`, with `white-space` from `--input-button-text-white-space`, default
+  `normal`).
 - The label is the `buttonText` string prop; there's no label slot. A wrapper that had label
   slots on a raw `<button>` turns them into string props when it switches (a breaking change).
 

package/.claude/skills/component-naming.md

@@ -60,7 +60,12 @@ stripping `Core`.
    control name).
 2. `sed` the old names across `app/`, `.claude/`, `.vscode/`, `MIGRATION.md` and `CLAUDE.md`:
    component names, `import` paths, story titles/`*StoryArgs` interfaces, `describe()` names, and the
-   root/base DOM class (update `CONSUMER-STYLING.md` and test selectors that use it).
+   root/base DOM class (update `CONSUMER-STYLING.md` and test selectors that use it). Match on word
+   boundaries (`\bToggleSwitchCore\b`): a bare `ToggleSwitchCore` also matched inside
+   `TripleToggleSwitchCore` and rewrote its history notes (2026-10-16). Leave out the gitignored
+   `.claude/settings.json` (its old allowlist entries match too) and any dated "Renamed"/"Changed"
+   notes, and rename a removed wrapper by hand before the bulk pass, or `XWithLabel` → `XField`
+   turns `XWithLabelInline` into a name that never existed.
 3. Add a "Renamed YYYY-MM-DD" note at the top of the skill doc listing old → new names and classes.
 4. Grep consumer repos (`/check-component-usage`) and **list** the files/lines that use the old
    names (in the private consumer notes, never in this repo). Don't edit the consumers yet: they pin
@@ -93,12 +98,13 @@ external consumer, free to rename. Run `/check-component-usage` for the current
 | ~~ToggleSwitchWithLabel~~ | ✅ `ToggleSwitchField` (2026-10-16) | yes |
 | ~~ToggleSwitchWithLabelInline~~ | ✅ `layout="inline"` on `ToggleSwitchField` (2026-10-16) | - |
 | ~~TripleToggleSwitchCore~~ | ✅ `TripleToggleSwitch` (2026-09-27) | - |
+| ~~TripleToggleSwitch~~ | ✅ `SegmentedControl` (2026-10-17): handles any option count | - |
 | ~~InputButtonCore~~ | ✅ `InputButton` (2026-09-28) | yes |
 | ~~InputCheckboxRadioCore~~ | ✅ `InputCheckboxRadio` (2026-09-27) | - |
 | InputCheckboxRadioButton | ✅ kept: button-style option, not a Field (2026-09-27) | - |
 | ~~InputCheckboxRadioWithLabel~~ | ✅ `InputCheckboxRadioField` (2026-09-27) | - |
 | ~~ActionMenuItemCore~~ | ✅ `ActionMenuItem` (2026-09-27) | - |
-| AlertMaskCore | `AlertMask` | - |
+| ~~AlertMaskCore~~ | ✅ `AlertMask` (2026-10-17) | - |
 | CardCore | **decide**: `Card` is single-word and collision-prone; prefer a prefixed name (`Display*`, `Content*`) | yes |
 | AccordianCore | **decide**: also fixes the "Accordian" misspelling; bare `Accordion` is single-word and collision-prone, and it is built on `<details>`/`<summary>` | yes |
 | ~~TabsCore~~ | ✅ `TabbedContent` (2026-10-07) | - |

package/.claude/skills/components/{alert-mask-core.md → alert-mask.md}

@@ -1,14 +1,18 @@
 ---
-name: AlertMaskCore
-description: AlertMaskCore SVG border/background mask sized to slotted content; config-prop-driven geometry/colour, no CSS token API
+name: AlertMask
+description: AlertMask SVG border and fill sized to slotted content; config-prop geometry, --alert-mask-* colour tokens
 type: reference
 ---
 
-# AlertMaskCore
+# AlertMask
+
+> **Renamed 2026-10-17**: `AlertMaskCore` → `AlertMask` (Control/Field naming), root class
+> `.alert-mask-core` → `.alert-mask`, types file `alert-mask-core.d.ts` → `alert-mask.d.ts`
+> (`AlertMaskConfig` unchanged). Props and slot unchanged.
 
 ## Overview
 
-`AlertMaskCore` draws a border + background around its default slot content using an SVG `<mask>`,
+`AlertMask` draws a border + background around its default slot content using an SVG `<mask>`,
 sized to the content's measured dimensions via `ResizeObserver`. It's the low-level primitive
 `AlertMaskedContent` (`app/components/02.molecules/alert-masked-content/`) builds on for its
 accent-bordered alert shape.
@@ -20,12 +24,12 @@ accent-bordered alert shape.
 | `config` | `AlertMaskConfig` | `{}` | Border/background colour and geometry (see below). All fields optional. |
 | `styleClassPassthrough` | `string \| string[]` | `[]` | Extra classes applied to the root element. |
 
-### `AlertMaskConfig` (`app/types/components/alert-mask-core.d.ts`)
+### `AlertMaskConfig` (`app/types/components/alert-mask.d.ts`)
 
 | Field | Type | Default | Description |
 |---|---|---|---|
-| `backgroundColour` | `string` | `"rgba(0,0,0,0.25)"` | Inner fill colour. |
-| `borderColour` | `string` | `"var(--orange-08)"` | Border fill colour. |
+| `backgroundColour` | `string` | token `--alert-mask-background-colour` | Inner fill colour; overrides the token. |
+| `borderColour` | `string` | token `--alert-mask-border-colour` | Border fill colour; overrides the token. |
 | `radiusLeft` | `number` | `12` | Left-side corner radius (px). |
 | `radiusRight` | `number` | `12` | Right-side corner radius (px). |
 | `borderLeft` | `number` | `8` | Left border thickness (px). |
@@ -33,14 +37,18 @@ accent-bordered alert shape.
 | `borderRight` | `number` | `8` | Right border thickness (px). |
 | `borderBottom` | `number` | `8` | Bottom border thickness (px). |
 
+Sides are physical, matching the drawn path. Negative or non-finite sizes fall back to `0` and the
+default respectively; radii are clamped to half the box's smaller side (inner radii to the inner
+box), and borders that leave no inner box drop the fill.
+
 ## Basic usage
 
 ```vue
-<AlertMaskCore>
+<AlertMask>
   <p>Alert content</p>
-</AlertMaskCore>
+</AlertMask>
 
-<AlertMaskCore
+<AlertMask
   :config="{
     borderColour: 'var(--theme-accent)',
     backgroundColour: 'rgba(0, 0, 0, 0.3)',
@@ -53,33 +61,33 @@ accent-bordered alert shape.
   }"
 >
   <p>Accent-bordered alert content</p>
-</AlertMaskCore>
+</AlertMask>
 ```
 
 ## How it works
 
 - The default-slot content is measured via `ResizeObserver` (initial measurement runs after
-  `nextTick` on mount).
+  `nextTick` on mount). Only the content size is stored; the SVG size is computed from it plus the
+  current borders, so a `config` change redraws without waiting for a resize. Nothing draws until
+  the first measurement.
 - An SVG outer path (rounded rect using `radiusLeft`/`radiusRight`) and inner path (the same rect
   inset by the border thicknesses) are computed from that measurement, and the region between them
   is masked to `borderColour`; the inner region is filled with `backgroundColour`.
 - Each instance gets its own mask id (`alert-mask-<useId>`), so several masks on one page don't
   share a shape. The SVG is `aria-hidden`.
-- `borderColour`/`backgroundColour` are applied as `fill` **styles**, not attributes, so a `var()`
-  value (e.g. `var(--theme-accent)`, or a consumer token) resolves against the element's ancestors.
-  A `var(--theme-*)` colour needs a `data-theme` ancestor to resolve.
+- Colours come from `--alert-mask-border-colour` / `--alert-mask-background-colour` (theme
+  defaults). A `config` colour is applied as an inline `fill` **style**, so it wins and a `var()`
+  value resolves against the element's ancestors.
 - The `ResizeObserver` is disconnected on unmount.
 - The slot content itself sits in a separate `.alert-mask-content` div, inset by the same border
-  thicknesses via internal `--_inset-*` custom properties, so it visually sits inside the drawn
-  border without overlapping it.
+  thicknesses via private `--_inset-left|right|top|bottom` (physical `margin`, so right-to-left
+  layouts keep the content clear of a left accent bar).
 
-## No CSS token API
+## Styling
 
-Unlike most components in this library, `AlertMaskCore` has no public `--alert-mask-core-*` CSS
-custom properties — the SVG path geometry can't be driven by `var()`, so `config` is the entire
-override surface (colour included). Colour strings may be `var()` references, so a wrapper
-component can expose its own tokens through them (as `AlertMaskedContent` does with
-`--alert-masked-content-border-colour`/`-background`). See CONSUMER-STYLING.md.
+Colour tokens `--alert-mask-border-colour` and `--alert-mask-background-colour`; geometry through
+`config`. `AlertMaskedContent` passes both colours through `config` from its own
+`--alert-masked-content-*` tokens. See CONSUMER-STYLING.md.
 
 ## Notes
 
@@ -96,3 +104,10 @@ component can expose its own tokens through them (as `AlertMaskedContent` does w
   resolves reliably, and the `ResizeObserver` is disconnected on unmount (it previously leaked).
   Stories now render over a photo/gradient backdrop with a `data-theme` wrapper; on the plain canvas
   they looked flat grey.
+- 2026-10-17 migration: renamed from `AlertMaskCore`. Fixed: content margins used `0` when
+  `config` omitted a border while the path used the default `8` (content overlapped the border);
+  the SVG size only updated on a content resize, so a `config` border change left it stale; no
+  clamping, so an oversized radius or negative border drew a broken path; content margins were
+  logical while the path is physical (right-to-left content overlapped the left accent bar);
+  passthrough didn't react. Colours became `--alert-mask-*` tokens with `--theme-*` defaults.
+  The snippet's tab stops (`$38` read as stop 38) were fixed. `StressTest` story added.

package/.claude/skills/components/alert-masked-content.md

@@ -1,6 +1,6 @@
 ---
 name: AlertMaskedContent
-description: AlertMaskedContent — AlertContentInner inside AlertMaskCore's SVG mask (accent border cut-out + translucent fill); the masked variant DisplayToast/DisplayPrompt swap in
+description: AlertMaskedContent — AlertContentInner inside AlertMask's SVG mask (accent border cut-out + translucent fill); the masked variant DisplayToast/DisplayPrompt swap in
 type: reference
 ---
 
@@ -9,7 +9,7 @@ type: reference
 ## Overview
 
 The "glass" sibling of `AlertContent`. Same icon/title/body/dismiss layout (the shared
-`AlertContentInner`), but instead of an opaque surface it sits inside `AlertMaskCore`, which draws
+`AlertContentInner`), but instead of an opaque surface it sits inside `AlertMask`, which draws
 an accent-coloured border as an SVG cut-out and a translucent fill, so the page behind shows
 through.
 
@@ -91,5 +91,5 @@ See `CONSUMER-STYLING.md` next to the component. Public tokens:
 - Changed 2026-09-27: colours are now overridable via the two public tokens (previously fixed
   literals, reachable only through `maskConfig`), and the transparent inner background uses
   `AlertContentInner`'s public `--alert-content-inner-background` instead of reaching into its
-  private `--_alert-content-inner-bg`. `AlertMaskCore` now gives each instance a unique mask id,
+  private `--_alert-content-inner-bg`. `AlertMask` now gives each instance a unique mask id,
   so several masked alerts on one page (e.g. stacked toasts) no longer all use the first one's shape.

package/.claude/skills/components/container-glow.md

@@ -97,7 +97,7 @@ apply instantly instead of fading).
 
 - 2026-09-20 migration: renamed from `ContainerGlowCore` to `ContainerGlow` — the `Core` suffix in
   this library denotes a primitive with a non-Core wrapper built on top of it (`InputTextCore` → `InputTextWithLabel`, since renamed;
-  `AlertMaskCore` → `AlertMaskedContent`), and this component has no such
+  `AlertMask` → `AlertMaskedContent`), and this component has no such
   sibling. Checked all consumer repos first; found one real usage in a defunct
   demo app, left as a follow-up for that repo rather than edited here.
 - Moved from `app/components/container-glow/` (unplaced) into

package/.claude/skills/components/display-theme-switch.md

@@ -1,6 +1,6 @@
 ---
 name: DisplayThemeSwitch
-description: DisplayThemeSwitch system/light/dark theme picker wired to useSettingsStore, wraps TripleToggleSwitch
+description: DisplayThemeSwitch system/light/dark theme picker wired to useSettingsStore, wraps SegmentedControl
 type: reference
 ---
 
@@ -9,7 +9,7 @@ type: reference
 ## Overview
 
 `DisplayThemeSwitch` is a system/light/dark colour-scheme picker. It's a thin wrapper around
-`TripleToggleSwitch` (`app/components/05.forms/triple-toggle-switch/`), wired to
+`SegmentedControl` (`app/components/05.forms/segmented-control/`), wired to
 `useSettingsStore` (`app/stores/useSettingsStore.ts`) so selecting an option updates the app's
 `colourScheme` state and applies the matching class (`system`/`light`/`dark`) to
 `<html>`. Renders inside `<ClientOnly>` since the store's persisted value isn't known until
@@ -43,8 +43,8 @@ hydration.
 ## Styling
 
 No `--display-theme-switch-*` tokens of its own — every visual aspect (colour, marker gradient,
-sizing) is delegated to `TripleToggleSwitch`'s public `--triple-toggle-switch-*` tokens. See
-CONSUMER-STYLING.md here and `TripleToggleSwitch`'s own CONSUMER-STYLING.md.
+sizing) is delegated to `SegmentedControl`'s public `--segmented-control-*` tokens. See
+CONSUMER-STYLING.md here and `SegmentedControl`'s own CONSUMER-STYLING.md.
 
 ## Notes
 
@@ -52,10 +52,10 @@ CONSUMER-STYLING.md here and `TripleToggleSwitch`'s own CONSUMER-STYLING.md.
   `02.molecules/`. Added `systemLabel`/`lightLabel`/`darkLabel`/`systemIcon`/`lightIcon`/`darkIcon`
   props — the three option labels/icons were previously hardcoded English strings with no override
   hook. Removed a large block of dead/duplicate CSS in this component's own `<style>` that either
-  no-op-duplicated `TripleToggleSwitch`'s own default styling (same selectors, same values) or
-  actively bypassed its public `--triple-toggle-switch-*` tokens with hardcoded literals (a
-  consumer setting e.g. `--triple-toggle-switch-surface` globally would have been silently
+  no-op-duplicated `SegmentedControl`'s own default styling (same selectors, same values) or
+  actively bypassed its public `--segmented-control-*` tokens with hardcoded literals (a
+  consumer setting e.g. `--segmented-control-surface` globally would have been silently
   overridden back). Only the genuine `small`-variant sizing override remains, now driving
-  `TripleToggleSwitch`'s own public sizing tokens (`--triple-toggle-switch-gap`/`-padding`/
+  `SegmentedControl`'s own public sizing tokens (`--segmented-control-gap`/`-padding`/
   `-option-padding`/`-icon-size`, added in the same migration) instead of reaching into its
   private `--_form-*`/`--_scheme-icon-font-size` locals directly.

package/.claude/skills/components/input-button.md

@@ -18,14 +18,14 @@ so its tokens restyle those too.
 | Prop | Type | Default | Notes |
 |---|---|---|---|
 | `buttonText` | `string` | `""` | Visible label; becomes `sr-only` with the `#iconOnly` slot, so always set it for icon-only buttons |
-| `variant` | `"primary" \| "secondary" \| "tertiary" \| "inline"` | `"primary"` | `inline` is for action buttons inside custom wrappers (see `component-inline-action-button.md`) |
+| `variant` | `"primary" \| "secondary" \| "tertiary" \| "inline"` | `"primary"` | Rendered as `data-variant`. Primary is filled, secondary outlined, tertiary text-only (tint on hover). `inline` has no colours of its own and is for action buttons inside custom wrappers (see `component-inline-action-button.md`) |
 | `type` | `"button" \| "reset" \| "submit"` | `"button"` | Ignored when rendered as a link |
 | `href` | `string` | — | Renders a link instead of a button |
 | `external` | `boolean` | `false` | Force a real navigation for a same-origin `href` that isn't a Vue Router page (e.g. a Nitro server route) |
 | `theme` | `"default" \| "success" \| "error" \| "warning"` | `"default"` | Sets `data-theme`, re-declaring the `--theme-*` palette on the button |
-| `isPill` | `boolean` | `false` | Fully rounded |
-| `isPending` | `boolean` | `false` | Adds `.is-pending` |
-| `hasPendingEffect` | `boolean` | `false` | Renders the `PendingEffect` overlay |
+| `isPill` | `boolean` | `false` | Fully rounded (`data-pill`) |
+| `isPending` | `boolean` | `false` | Sets `data-pending` (dimmed primary surface; with `hasPendingEffect`, animates the border and blocks clicks) |
+| `hasPendingEffect` | `boolean` | `false` | Renders the `PendingEffect` overlay, sets `data-pending-effect` |
 | `readonly` | `boolean` | `false` | Dimmed, `aria-disabled="true"`, and not operable: clicks (mouse or keyboard) are swallowed before any consumer `@click` runs |
 | `styleClassPassthrough` | `string \| string[]` | `[]` | Classes on the root. Reactive after mount |
 
@@ -56,7 +56,7 @@ Give slotted `<Icon>`s `class="icon"` to pick up `--input-icon-size` (applied as
 ## Accessibility
 
 - Icon-only buttons keep `buttonText` as `sr-only` text: never leave it empty.
-- `readonly` is exposed as `aria-disabled="true"` and blocks activation; the button stays focusable
+- `readonly` is exposed as `aria-disabled="true"` (omitted otherwise) and blocks activation; the button stays focusable
   so its label is still discoverable (unlike native `disabled`).
 - Focus ring: `:focus-visible` with `--button-focus-ring-width` / `-offset`.
 
@@ -66,10 +66,29 @@ Colour tokens are `--input-button-{variant}-{property}` with `--theme-*` fallbac
 typography are the global `--button-*` tokens. Full reference:
 `app/components/05.forms/input-button/CONSUMER-STYLING.md`.
 
-Labels stay on one line by default. Set `--input-button-text-white-space: normal` to let a long
-label wrap inside a narrow container (added 2026-10-06; `ServicesCardGrid` does this for its CTAs).
+Long labels wrap inside the button (`--input-button-text-white-space` defaults to `normal`, and
+unbroken strings break anywhere). Set it to `nowrap` to keep a label on one line; it then widens
+the button instead. Button text is never line-clamped.
+
+State hooks on the root: `data-variant`, `data-theme`, `data-pill`, `data-pending`,
+`data-pending-effect`, `data-link`, `data-icon-only`. Inner elements: `.input-button-text` and
+`.input-button-icon[data-slot="left" | "right" | "icon-only"]`.
 
 ## Notes
 
 - Before 2026-09-28, `readonly` only set `pointer-events: none`, so keyboard users could still
   activate it; the icon size (`width`/`height` on `.icon`) was silently overridden by `@nuxt/icon`.
+- **2026-10-17**: secondary changed from a filled `--theme-surface-inverted` button to outlined
+  (transparent, `--theme-surface` border and text, `--theme-surface-subtle` on hover), and tertiary
+  from a grey `--slate-01` fill with an underline to text-only. Both left the `contrast-color()`
+  trial, which now covers primary only. Primary and secondary gained a 2px `box-shadow` ring
+  (`--input-button-{variant}-shadow`, default `--colour-theme-2`; width `--input-button-shadow-width`),
+  and their hover outline now takes the hover border colour (1px, no offset). Tertiary has neither.
+- **2026-10-17**: state moved from bare classes to `data-*` attributes (`.primary` →
+  `[data-variant="primary"]`, `.pill` → `[data-pill]`, `.is-pending` → `[data-pending]`,
+  `.pending-effect` → `[data-pending-effect]`, `.is-link` → `[data-link]`, `.icon-only` →
+  `[data-icon-only]`), and the inner classes were prefixed (`.button-text` →
+  `.input-button-text`, `.btn-icon.left` → `.input-button-icon[data-slot="left"]`). The bare names
+  collided with consumer CSS (pitfall #16). `--input-button-text-white-space` now defaults to
+  `normal` (was `nowrap`, which overflowed narrow columns). `aria-disabled` is omitted instead of
+  `"false"` when not readonly. Added the `StressTest` story.

package/.claude/skills/components/input-checkbox-radio.md

@@ -163,3 +163,5 @@ line-clamp tokens: an option label names the choice and must stay readable. The
 - `InputCheckboxRadioButton`'s `id` became optional with a `useId()` fallback.
 - Specs now unmount every wrapper in `afterEach`; stories moved to `StoryObj` with Docs
   descriptions, parent-story links, `CanvasSwitcher` (Field, Button) and `StressTest` stories.
+
+**2026-10-17**: resting shadow ring, the box (`--input-checkbox-shadow`, not inside the button style) and the button style (`--input-checkbox-button-shadow`). Theme step 2 by default, so it turns red under `data-invalid`; width is the global `--form-element-shadow-width`. Hover now draws a 1px outline in the border colour with no offset, over the ring's inner edge (was a 2px outline at a 2px offset in the focus colour); focus is unchanged and sits just outside the ring.

package/.claude/skills/components/input-description.md

@@ -100,3 +100,8 @@ look, zero the slot margins and space it with the root margins (example in CONSU
   bottom margin collapsed through and won anyway).
 - An empty `descriptionId` no longer renders `id=""`. `styleClassPassthrough` now reacts to prop
   changes.
+
+**2026-10-17** (stress-test pass): `--input-description-line-height` defaults to `1.5` (was
+`var(--step-4)`, equal to the font size, so wrapped lines touched); the root wraps unbroken copy
+(`overflow-wrap: anywhere`). Added the `StressTest` story, a CanvasSwitcher decorator, Docs page
+descriptions and a link to the InputTextField story; the spec restores mocks after each test.

package/.claude/skills/components/input-error.md

@@ -24,7 +24,7 @@ the surrounding theme.
 | Prop (template form) | Type | Default | Notes |
 |------|------|---------|-------|
 | `:id` | `string` | (required) | Must match an id in the control's `aria-describedby` while in error. Wrappers get it from `useAriaDescribedById(...).errorId`, which only adds it to `aria-describedby` when `fieldHasError` is true. |
-| `:error-message` | `string \| string[] \| object` | (required) | A string renders as one message; an array renders as a `<ul>` list. |
+| `:error-message` | `string \| string[] \| object` | (required) | A string renders as one message; an array renders as a `<ul role="list">`, with blank entries dropped. Long and unbroken text wraps inside the strip (`overflow-wrap: anywhere`); it is never line-clamped. |
 | `:show-error` | `boolean` | (required) | Opens the strip. Rendered as `data-visible`; when `false` the root gets `aria-hidden="true"`. |
 | `:is-detached` | `boolean` | (required) | `true`: sits below the control with a `2rem` gap, fully rounded. `false`: tucked under the control's bottom edge. Rendered as `data-detached`. |
 | `:input-variant` | `"normal" \| "outlined" \| "underlined"` | `"normal"` | Match the control's variant. Rendered as `data-input-variant`. `underlined` drops the rounded corners and (when attached) the outline. |
@@ -41,7 +41,7 @@ No slots.
 ```vue
 <template>
   <div class="my-field">
-    <input :id :aria-describedby="ariaDescribedby()" :aria-invalid="fieldHasError" />
+    <input :id :aria-describedby="ariaDescribedby()" :aria-invalid="fieldHasError ? 'true' : undefined" />
     <InputError :id="errorId" :error-message :show-error="fieldHasError" :is-detached="false" :input-variant />
   </div>
 </template>
@@ -66,6 +66,8 @@ const { id, errorId, ariaDescribedby } = useAriaDescribedById(props.name, toRef(
   read when the control is focused. Moving focus to the first invalid field on submit is the
   form's job (see `FormWrapper` / pattern forms).
 - Hidden errors are `aria-hidden="true"`; the icon is always `aria-hidden`.
+- The message list keeps `role="list"`, since `list-style: none` makes Safari/VoiceOver drop list
+  semantics.
 - The open/close transition is disabled under `prefers-reduced-motion: reduce`.
 
 ---
@@ -103,3 +105,8 @@ re-declares those on the element itself, so ancestor overrides of them never lan
   Hardcoded font size/weight, padding, list gap and detached gap promoted to public tokens.
 - `aria-hidden` now omitted when visible (was `"false"`); icon marked `aria-hidden`;
   `prefers-reduced-motion` respected; `styleClassPassthrough` now reacts to prop changes.
+
+**2026-10-17** (stress-test pass): added the `StressTest` story and a CanvasSwitcher decorator;
+message text wraps long unbroken strings (`min-inline-size: 0`, `overflow-wrap: anywhere`) and the
+icon no longer shrinks; blank array entries are dropped; the list gets `role="list"`; child rules
+nested inside the root block. No line-clamp token on purpose: a truncated error can't be acted on.

package/.claude/skills/components/input-label.md

@@ -41,7 +41,9 @@ Use `InputLabel` directly only when building a custom field wrapper:
 | `htmlLabel` | Rich markup (e.g. a required marker). Rendered first. Phrasing content only: it's inside a `<label>`, so no interactive elements. |
 | `textLabel` | Plain label text. |
 
-Both render directly inside the `<label>`, no wrapper elements. Don't hardcode a required
+Both render directly inside the `<label>`, no wrapper elements. Long or unbroken copy wraps
+(`overflow-wrap: anywhere` on the label); there is no line-clamp token, since slot copy is the
+consumer's own markup to clamp. Don't hardcode a required
 asterisk in a slot: use the indicator below.
 
 ---
@@ -62,7 +64,7 @@ export default defineAppConfig({
   without it; `"none"`: nothing (default, so existing sites are unchanged).
 - `InputTextField`, `InputTextAsNumberField`, `InputNumberField`, `InputSelectField`,
   `InputTextareaField` and `InputRangeField` forward `:required`.
-  `ToggleSwitchField` pass `indicator="none"`: a switch always
+  `ToggleSwitchField` passes `indicator="none"`: a switch always
   has a value, so neither marker means anything there.
 - The wrappers don't expose the indicator props per field; use `app.config`.
 - Text props are the i18n hook: pass translated `optionalText`/`requiredText` (or set them in
@@ -116,3 +118,7 @@ Hooks: `data-input-variant`, `data-invalid`, `.input-label-indicator[data-indica
 **2026-09-27**: added the required/optional indicator (`required`, `indicator`, `requiredText`,
 `optionalText`, `requiredIcon`, `optionalIcon`, all app.config-backed under `srcdev.inputLabel`),
 with wrappers forwarding `:required`.
+
+**2026-10-17** (stress-test pass): `overflow-wrap: anywhere` on the label so unbroken copy and
+markers wrap in a narrow column; added the `StressTest` story, a CanvasSwitcher decorator, Docs
+page descriptions and a link to the InputTextField story; spec now unmounts every wrapper.

package/.claude/skills/components/input-number.md

@@ -252,3 +252,5 @@ classes are gone.
 - Specs unmount in `afterEach`; stories moved to `StoryObj` with Docs descriptions, a
   `DecimalSteps` story, `CanvasSwitcher` and a `StressTest` story on the Field. The bare
   control's step-button demo uses `InputButton`, not raw buttons.
+
+**2026-10-17**: resting shadow ring (`--input-number-shadow`), `normal` variant; underlined unchanged. Theme step 2 by default, so it turns red under `data-invalid`; width is the global `--form-element-shadow-width`. Hover now draws a 1px outline in the border colour with no offset, over the ring's inner edge (was a 2px outline at a 2px offset in the focus colour); focus is unchanged and sits just outside the ring.

package/.claude/skills/components/input-otp.md

@@ -118,3 +118,5 @@ focused the first box on mount; pass `autofocus` to keep that. Its boxes were na
 read the code from `v-model` or the hidden input (`name`) instead. Rename the app's file away (or
 delete it) once on the layer release that ships this, or the app's own `InputOtp` shadows the
 layer's.
+
+**2026-10-17**: resting shadow ring (`--input-otp-shadow`), each box, `normal` variant. Theme step 2 by default, so it turns red under `data-invalid`; width is the global `--form-element-shadow-width`. Hover now draws a 1px outline in the border colour with no offset, over the ring's inner edge (was a 2px outline at a 2px offset in the focus colour); focus is unchanged and sits just outside the ring.

package/.claude/skills/components/input-range.md

@@ -175,3 +175,5 @@ automatically in `<script setup>`, no destructuring or `props.` reference needed
 - Specs unmount in `afterEach`; stories moved to `StoryObj` with Docs descriptions, a
   `DecimalSteps` story, `CanvasSwitcher` and a `StressTest` story on the Field. The bare
   control's step-button demo uses `InputButton`, not raw buttons.
+
+**2026-10-17**: deliberately left out of the form-control shadow ring and border-colour hover. The default mode is the native slider (no border to ring), and markers mode draws each marker's edge as an outline. Decided to keep it as it is.

package/.claude/skills/components/input-select.md

@@ -151,3 +151,5 @@ the `theme` prop says; the Field root's own `data-theme` keeps the prop value.
 ```
 
 `v-model` and `v-model:field-data` are both **required**, same as `InputSelect` above.
+
+**2026-10-17**: resting shadow ring (`--input-select-shadow`), `normal` variant; underlined keeps its old 2px hover outline. Theme step 2 by default, so it turns red under `data-invalid`; width is the global `--form-element-shadow-width`. Hover now draws a 1px outline in the border colour with no offset, over the ring's inner edge (was a 2px outline at a 2px offset in the focus colour); focus is unchanged and sits just outside the ring.

package/.claude/skills/components/input-text.md

@@ -218,3 +218,5 @@ A compact numeric stepper on a text input (no native spinner). Root
 - The password and stepper buttons get accessible names through `InputButton`'s `buttonText`
   (visually hidden in icon-only mode).
 - Use `autocomplete` on personal-data fields (WCAG 1.3.5).
+
+**2026-10-17**: resting shadow ring (`--input-text-shadow`), `normal` variant; underlined unchanged. Theme step 2 by default, so it turns red under `data-invalid`; width is the global `--form-element-shadow-width`. Hover now draws a 1px outline in the border colour with no offset, over the ring's inner edge (was a 2px outline at a 2px offset in the focus colour); focus is unchanged and sits just outside the ring.

package/.claude/skills/components/input-textarea.md

@@ -145,3 +145,5 @@ with `data-theme`, `data-input-variant`, `data-invalid`, `data-dirty` and `data-
   <template #descriptionText>Please describe your enquiry in detail</template>
 </InputTextareaField>
 ```
+
+**2026-10-17**: resting shadow ring (`--input-textarea-shadow`), `normal` variant; underlined unchanged. Theme step 2 by default, so it turns red under `data-invalid`; width is the global `--form-element-shadow-width`. Hover now draws a 1px outline in the border colour with no offset, over the ring's inner edge (was a 2px outline at a 2px offset in the focus colour); focus is unchanged and sits just outside the ring.

package/.claude/skills/components/pending-effect.md

@@ -4,8 +4,9 @@
 
 `PendingEffect` is a decorative SVG that draws an animated dashed line around a busy button. It
 is an internal part of `InputButton`: set `has-pending-effect` on the button and toggle
-`is-pending`. Don't render it on its own. Its CSS depends on the host having `.pending-effect`
-(and `position: relative`, which that rule provides), plus `.is-pending` to show and animate it.
+`is-pending`. Don't render it on its own. Its CSS depends on the host being `.input-button[data-pending-effect]`
+(and `position: relative`, which that rule provides), plus `[data-pending]` to show and animate it.
+Those were the classes `.pending-effect` and `.is-pending` until 2026-10-17.
 
 ```vue
 <InputButton button-text="Submit" type="submit" has-pending-effect :is-pending="submitting" />
@@ -26,10 +27,10 @@ No slots, no events.
 
 ## Behaviour
 
-- Hidden (`opacity: 0`) until the host has `.is-pending`.
+- Hidden (`opacity: 0`) until the host has `[data-pending]`.
 - The host must not clip overflow: the line is drawn outside the host's edge. `InputButton`
   sets `overflow: hidden` on buttons generally, and switches it to `visible` when
-  `.pending-effect` is present. Before 2026-09-26 it didn't, so the effect never rendered at all.
+  `[data-pending-effect]` is present. Before 2026-09-26 it didn't, so the effect never rendered at all.
 - Under `prefers-reduced-motion: reduce` it never shows, since the animation is the whole effect.
 - `aria-hidden="true"` and `focusable="false"`: it is decorative. Busy state for assistive tech
   is the host button's responsibility.