srcdev-nuxt-components 9.6.7 → 9.6.9

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

@@ -0,0 +1,14 @@
+---
+paths:
+  - "app/**/*.vue"
+---
+
+# 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}` ``.
+
+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
+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

@@ -25,7 +25,10 @@ The ledger can't see items 6c, 9, 10, 11 and 14, so check those by hand.
    **Existing component:** if it lives outside a tier, move it with `git mv`.
 2. **Props pattern** — `interface Props` + `withDefaults(defineProps<Props>(), {...})`, never
    options-style `defineProps({...})`. Include `styleClassPassthrough` and wire it through
-   `useStyleClassPassthrough()`. Consumer-facing data-shape types go in
+   `useStyleClassPassthrough()`, with a `watch` that calls `resetElementClasses` so it reacts to prop
+   changes. A Field wrapper applies its passthrough to its own root only: forwarding the same prop
+   to the inner control as well puts one consumer class on two elements (`InputNumberField`,
+   `InputRangeField`, fixed 2026-10-16). Consumer-facing data-shape types go in
    `app/types/components/<component-name>.d.ts` and are exported from `app/types/components/index.ts`
    (see `component-export-types.md`), not left inline in the `.vue` file.
 3. **CSS tokens** — audit every custom property in the component's `<style>` block against the
@@ -196,6 +199,10 @@ The ledger can't see items 6c, 9, 10, 11 and 14, so check those by hand.
    - 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.
+   - A mode that hides a native control's own indicator (a range thumb, a checkbox box, a caret)
+     draws its own visible state for the current value, and its interactive area isn't shrunk to a
+     sliver. `InputRange`'s markers mode hid the thumb with nothing in its place and left only a
+     2px line clickable, from its first commit until 2026-10-16; its 5/5 score didn't show it.
    - A component with a `tag` prop that can render a landmark uses `useAriaLabelledById`
      (`component-aria-landmark.md`), unless it falls back to `aria-label` when no heading is
      given: the composable can't do that and warns whenever a landmark has no heading. Then label
@@ -262,6 +269,16 @@ The ledger can't see items 6c, 9, 10, 11 and 14, so check those by hand.
       the edits in private memory. Note that an inline-size container can't size itself from its
       content: say so in `CONSUMER-STYLING.md` (`ProfileSection`).
     - Grid tracks that hold text are `minmax(0, …)` so an unbroken string can't widen the grid.
+    - An `auto-fit` column minimum taken from a token or a measured width is wrapped in
+      `min(100%, …)`, or one long item makes the column wider than its container.
+    - A component whose root is a `<fieldset>` sets `min-inline-size: 0` on it: a native fieldset
+      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`).
+    - 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).

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

@@ -105,6 +105,6 @@ changed visible label ("Copied!") isn't announced, because the aria-label wins;
 
 ## Real examples
 
-- `InputPasswordWithLabel`: `app/components/05.forms/input-text/InputPasswordWithLabel.vue` (show/hide toggle attached to the input)
+- `InputPasswordField`: `app/components/05.forms/input-text/InputPasswordField.vue` (show/hide toggle attached to the input)
 - `CookieConsentBanner`: `app/components/02.molecules/cookie-consent-banner/CookieConsentBanner.vue`
   (standalone Accept/Reject actions, not attached to an input)

package/.claude/skills/component-local-style-override.md

@@ -165,7 +165,7 @@ Use when the same component appears multiple times on a page and you need to tar
 instance.
 
 If the component you're rendering is a **wrapper** that doesn't forward `styleClassPassthrough` to
-the inner component you want to style (e.g. `InputDescription` inside `InputTextWithLabel`), put a
+the inner component you want to style (e.g. `InputDescription` inside `InputTextField`), put a
 plain `class` on the wrapper instead. Vue falls it through to the wrapper's root element, which is
 an ancestor of the inner component, so tokens set there inherit down. This needs the wrapper to
 have a single root element and not set `inheritAttrs: false`.

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

@@ -79,19 +79,19 @@ external consumer, free to rename. Run `/check-component-usage` for the current
 |---------|----------|-----------|
 | ~~InputNumberCore~~ | ✅ `InputNumber` (2026-09-25) | - |
 | ~~InputNumberDefault~~ | ✅ `InputNumberField` (2026-09-25) | - |
-| InputTextCore | `InputText` | yes |
-| InputTextWithLabel | `InputTextField` | yes |
-| InputPasswordWithLabel | `InputPasswordField` | yes |
-| InputTextAsNumberWithLabel | `InputTextAsNumberField` | - |
-| InputRangeCore | `InputRange` | - |
-| InputRangeDefault | `InputRangeField` | - |
-| InputTextareaCore | `InputTextarea` | - |
-| InputTextareaWithLabel | `InputTextareaField` | yes |
-| InputSelectCore | `InputSelect` | yes |
-| InputSelectWithLabel | `InputSelectField` | yes |
-| ToggleSwitchCore | `ToggleSwitch` | yes |
-| ToggleSwitchWithLabel | `ToggleSwitchField` | yes |
-| ToggleSwitchWithLabelInline | `layout` prop on `ToggleSwitchField`, or `ToggleSwitchFieldInline` | - |
+| ~~InputTextCore~~ | ✅ `InputText` (2026-10-16) | yes |
+| ~~InputTextWithLabel~~ | ✅ `InputTextField` (2026-10-16) | yes |
+| ~~InputPasswordWithLabel~~ | ✅ `InputPasswordField` (2026-10-16) | yes |
+| ~~InputTextAsNumberWithLabel~~ | ✅ `InputTextAsNumberField` (2026-10-16) | - |
+| ~~InputRangeCore~~ | ✅ `InputRange` (2026-10-16) | - |
+| ~~InputRangeDefault~~ | ✅ `InputRangeField` (2026-10-16) | - |
+| ~~InputTextareaCore~~ | ✅ `InputTextarea` (2026-10-16) | - |
+| ~~InputTextareaWithLabel~~ | ✅ `InputTextareaField` (2026-10-16) | yes |
+| ~~InputSelectCore~~ | ✅ `InputSelect` (2026-10-16) | yes |
+| ~~InputSelectWithLabel~~ | ✅ `InputSelectField` (2026-10-16) | yes |
+| ~~ToggleSwitchCore~~ | ✅ `ToggleSwitch` (2026-10-16) | yes |
+| ~~ToggleSwitchWithLabel~~ | ✅ `ToggleSwitchField` (2026-10-16) | yes |
+| ~~ToggleSwitchWithLabelInline~~ | ✅ `layout="inline"` on `ToggleSwitchField` (2026-10-16) | - |
 | ~~TripleToggleSwitchCore~~ | ✅ `TripleToggleSwitch` (2026-09-27) | - |
 | ~~InputButtonCore~~ | ✅ `InputButton` (2026-09-28) | yes |
 | ~~InputCheckboxRadioCore~~ | ✅ `InputCheckboxRadio` (2026-09-27) | - |

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

@@ -96,8 +96,8 @@ apply instantly instead of fading).
 ## Notes
 
 - 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`, `AlertMaskCore` → `AlertMaskedContent`), and this component has no such
+  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
   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/form-field.md

@@ -6,7 +6,7 @@
 field's width (`narrow`/`medium`/`wide`), centres it with `margin-inline: auto`, optionally insets
 it from its container edges with a gutter, and applies the shared vertical field spacing
 (`--field-margin-block`). It renders no label, input or error text itself: put an `*Field`
-component (`InputTextWithLabel`, `InputNumberField`, `InputSelectWithLabel`, ...) in its default
+component (`InputTextField`, `InputNumberField`, `InputSelectField`, ...) in its default
 slot.
 
 Typical use inside `FormWrapper` / a pattern form: `<FormField width="wide" :has-gutter="false">`
@@ -37,7 +37,7 @@ around each control, so the form's own container controls the width.
 
 ```vue
 <FormField width="wide" :has-gutter="false" :field-has-error="!!errors.email">
-  <InputTextWithLabel
+  <InputTextField
     v-model="state.email"
     name="email"
     label="Email"

package/.claude/skills/components/form-wrapper.md

@@ -36,7 +36,7 @@ centre it.
 <FormWrapper width="medium">
   <form @submit.prevent="submitForm">
     <FormField width="wide" :has-gutter="false">
-      <InputTextWithLabel ... />
+      <InputTextField ... />
     </FormField>
   </form>
 </FormWrapper>

package/.claude/skills/components/glowing-border.md

@@ -50,7 +50,7 @@ stops are public CSS custom properties — see `CONSUMER-STYLING.md` for the ful
 
 ## Highlighting a single control
 
-Wrap just an `InputButton` or `InputTextCore` so the glow becomes the control's border (a design
+Wrap just an `InputButton` or `InputText` so the glow becomes the control's border (a design
 call-out for something "special"). Set `--glowing-border-radius` to the control's radius plus the
 glow width, `--glowing-border-surface: transparent`, `--glowing-border-overflow: visible` (or the
 control's focus ring is clipped), shrink-to-fit display, and `--input-text-border: transparent` for

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

@@ -28,7 +28,6 @@ Use these three directly only for a custom group or layout:
 
 <InputCheckboxRadioButton
   v-for="option in options"
-  :id="`service-${option.value}`"
   :key="option.value"
   v-model="state.services"
   type="checkbox"
@@ -85,9 +84,9 @@ Same props as the control minus `isButton` (always on), plus:
 
 | Prop | Type | Default | Notes |
 |---|---|---|---|
-| `id` | `string` | required | Used for both the input and `label[for]`. |
+| `id` | `string` | generated | Used for both the input and `label[for]`. Optional since 2026-10-16: omitted, it comes from `useId()`. Never build it from data values (rule `ids-from-useid.md`). |
 | `label` | `string` | `""` | Replaced by the `labelContent` slot when given. |
-| `:options-layout` | `OptionsLayout` | `"equal-widths"` | `data-options-layout`; `inline` stops the label wrapping. |
+| `:options-layout` | `OptionsLayout` | `"equal-widths"` | `data-options-layout`, a styling hook only (until 2026-10-16 `inline` made the label `nowrap`). |
 | `direction` | `"row" \| "row-reverse"` | `"row"` | `data-direction`; `row-reverse` puts the control on the right. Reacts to changes. |
 | `:is-pill` | `boolean` | `false` | `data-pill`, fully rounded. |
 | `:item-icon` | `string` | `"material-symbols:add-2"` | Decorator icon name. The `itemIcon` slot replaces it entirely. |
@@ -124,6 +123,15 @@ Full detail in `app/components/05.forms/input-checkbox-radio/CONSUMER-STYLING.md
 
 ---
 
+## Long and hostile content
+
+Both labels wrap long unbroken words and URLs (`overflow-wrap: anywhere`, `min-inline-size: 0` on
+label and root), and the control and decorator icon keep their size (`flex-shrink: 0`). No
+line-clamp tokens: an option label names the choice and must stay readable. The Field and Button
+`StressTest` stories cover it; the bare control renders no text, so it has none.
+
+---
+
 ## History
 
 **Migrated 2026-09-27** (3/5 → full compliance):
@@ -147,3 +155,11 @@ Full detail in `app/components/05.forms/input-checkbox-radio/CONSUMER-STYLING.md
 - Button radius, gap, paddings and the Field label colour became tokens; label colour default moved
   from `--colour-text-default` to `--theme-text`. Removed an undeclared `--_box-shadow` and an
   invalid unitless `min-height`.
+
+**Stress pass 2026-10-16**:
+
+- Removed the inline-layout `nowrap` on the button label (private `--_white-space`), which made an
+  unbroken label overflow the row; labels now wrap and the control/icon no longer shrink.
+- `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.

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

@@ -24,7 +24,7 @@ instead.
 
 | Prop (template form) | Type | Default | Notes |
 |---|---|---|---|
-| `name` | `string` | (required) | Shared `name` on every checkbox; also used to build each checkbox `id` (`${name}-${item.value}`) and the error/description ids. |
+| `name` | `string` | (required) | Shared `name` on every checkbox; also used for the error/description ids. Button-presentation checkbox ids come from `useId()` plus the option index (until 2026-10-16 they were `${name}-${item.value}`, which duplicated across two groups sharing a name and broke on values with spaces). |
 | `legend` | `string` | (required) | Fieldset `<legend>` text. |
 | `:error-message` | `string \| object` | (required) | Shown by `InputError` when `fieldHasError` is true. Pass `""` when there's no error. An array renders as a list. |
 | `:field-has-error` | `boolean` | `false` | Shows the error, sets `aria-invalid` on the fieldset and points each checkbox's `aria-describedby` at the error. |
@@ -36,7 +36,7 @@ instead.
 | `:display-as-disc` | `boolean` | `false` | Round checkbox symbol. |
 | `:theme` | `FormUiTheme` | `"default"` | Forwarded to each control. |
 | `:input-variant` | `InputUiVariant` | `"normal"` | Forwarded to each control and the error message. |
-| `:style-class-passthrough` | `string \| string[]` | `[]` | Classes on the root `<fieldset>`. Read once at mount. |
+| `:style-class-passthrough` | `string \| string[]` | `[]` | Classes on the root `<fieldset>`; updates when the prop changes. |
 | `data-testid` | `string` | `"multiple-checkboxes"` | On the root `<fieldset>`. |
 | `label` | `string` | `""` | **Ignored.** Kept only so existing call sites that pass it don't break; it has never rendered. Use `legend` or the description slots. |
 
@@ -84,7 +84,7 @@ instead.
 | `:options-layout` | `OptionsLayout` | `"equal-widths"` | Rendered as `data-options-layout` on the items container. |
 | `:theme` | `FormUiTheme` | `"default"` | |
 | `:input-variant` | `InputUiVariant` | `"normal"` | |
-| `:style-class-passthrough` | `string \| string[]` | `[]` | Classes on the root `<fieldset>`. Read once at mount. |
+| `:style-class-passthrough` | `string \| string[]` | `[]` | Classes on the root `<fieldset>`; updates when the prop changes. |
 | `data-testid` | `string` | `"single-checkbox"` | On the root `<fieldset>`. |
 
 ### v-model
@@ -122,6 +122,17 @@ controls' own colours are the `--input-checkbox-*` tokens in `input-checkbox-rad
 
 ---
 
+## Long and hostile content
+
+Both root fieldsets set `min-inline-size: 0` (a native `<fieldset>` otherwise grows to its
+min-content width and overflows a narrow column) and `overflow-wrap: anywhere`, which inherits
+into the legend, description, labels and error, so long unbroken words and URLs wrap. Equal-width
+columns are capped at `100%` of the container. Button-mode labels wrap too (`InputCheckboxRadioButton` dropped its inline `nowrap`
+2026-10-16). No line-clamp tokens: the legend, option labels and error name the choice or the
+problem and must stay readable. The `StressTest` story in each story file covers this.
+
+---
+
 ## Migration notes (2026-09-25)
 
 Brought to full compliance. Behaviour changes a consumer could notice:

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

@@ -3,15 +3,15 @@
 ## Overview
 
 `InputDescription` renders a form field's help text. Every `*Field` wrapper in `05.forms`
-(`InputTextWithLabel`, `InputNumberField`, `InputSelectWithLabel`, `InputTextareaWithLabel`,
-`InputRangeDefault`, `InputTextAsNumberWithLabel`, `SingleCheckbox`, `MultipleCheckboxes`,
+(`InputTextField`, `InputNumberField`, `InputSelectField`, `InputTextareaField`,
+`InputRangeField`, `InputTextAsNumberField`, `SingleCheckbox`, `MultipleCheckboxes`,
 `MultipleRadiobuttons`) already renders one and forwards its own `descriptionText` /
 `descriptionHtml` slots into it, so consumers normally just pass those slots to the wrapper:
 
 ```vue
-<InputTextWithLabel v-model="email" name="email" label="Email" :field-has-error :error-message>
+<InputTextField v-model="email" name="email" label="Email" :field-has-error :error-message>
   <template #descriptionText>We'll only use this for your booking confirmation</template>
-</InputTextWithLabel>
+</InputTextField>
 ```
 
 Use `InputDescription` directly only when building a custom field wrapper.
@@ -54,7 +54,7 @@ otherwise `InputDescription` sees an (empty) slot and renders an empty element:
 
 - It's a plain description, not a live region: link it with `aria-describedby` on the control
   (`useAriaDescribedById` does this in every wrapper).
-- `InputTextWithLabel`, `InputSelectWithLabel` and `InputTextareaWithLabel` render it **after**
+- `InputTextField`, `InputSelectField` and `InputTextareaField` render it **after**
   the control for the `outlined` variant and before it otherwise; both positions carry the same id.
 
 ---
@@ -81,9 +81,9 @@ look, zero the slot margins and space it with the root margins (example in CONSU
 - Wrappers forwarded both description slots unconditionally, so every field rendered an empty
   description element (with its id) even when no description was given. Each wrapper now forwards
   a slot only when its own consumer supplied it.
-- `InputTextWithLabel` and `InputSelectWithLabel` rendered the description **twice** for the
+- `InputTextField` and `InputSelectField` rendered the description **twice** for the
   `outlined` variant (before and after the control); the first copy now has
-  `v-if="inputVariant !== 'outlined'"`, matching `InputTextareaWithLabel`.
+  `v-if="inputVariant !== 'outlined'"`, matching `InputTextareaField`.
 - The outlined-variant copies had no `description-id`, so the control's `aria-describedby`
   pointed at an id that didn't exist. They now pass it.
 - Removed props that were never read: `id` (a leftover from a commented-out id computation) and

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

@@ -3,9 +3,9 @@
 ## Overview
 
 `InputError` renders the red error message strip under a form control. Every `*Field` wrapper in
-`05.forms` (`InputTextWithLabel`, `InputNumberField`, `InputSelectWithLabel`, `InputTextareaWithLabel`,
-`InputRangeDefault`, `ToggleSwitchWithLabel`, `SingleCheckbox`, `MultipleCheckboxes`,
-`MultipleRadiobuttons`, `InputTextAsNumberWithLabel`) already renders one, so consumers rarely use
+`05.forms` (`InputTextField`, `InputNumberField`, `InputSelectField`, `InputTextareaField`,
+`InputRangeField`, `ToggleSwitchField`, `SingleCheckbox`, `MultipleCheckboxes`,
+`MultipleRadiobuttons`, `InputTextAsNumberField`) already renders one, so consumers rarely use
 it directly. Use it yourself only when building a custom field wrapper.
 
 It is designed to sit in **grid row 2** of the wrapper, directly under the control in row 1: it is

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

@@ -3,9 +3,8 @@
 ## Overview
 
 `InputLabel` renders a form field's `<label>`. Every labelled wrapper in `05.forms`
-(`InputTextWithLabel`, `InputTextAsNumberWithLabel`, `InputNumberField`, `InputSelectWithLabel`,
-`InputTextareaWithLabel`, `InputRangeDefault`, `ToggleSwitchWithLabel`,
-`ToggleSwitchWithLabelInline`) already renders one from its `label` prop, so consumers normally
+(`InputTextField`, `InputTextAsNumberField`, `InputNumberField`, `InputSelectField`,
+`InputTextareaField`, `InputRangeField`, `ToggleSwitchField`) already renders one from its `label` prop, so consumers normally
 never use it directly.
 
 Use `InputLabel` directly only when building a custom field wrapper:
@@ -24,7 +23,7 @@ Use `InputLabel` directly only when building a custom field wrapper:
 
 | Prop (template form) | Type | Default | Notes |
 |------|------|---------|-------|
-| `:id` | `string` | required | The **control's** id, rendered as the label's `for`. The label itself gets no id. Must match the id actually on the `<input>`/`<select>`/`<textarea>` (e.g. `ToggleSwitchCore` prefixes its input id with `toggle-switch-`, so its wrappers pass `toggleSwitchId`). |
+| `:id` | `string` | required | The **control's** id, rendered as the label's `for`. The label itself gets no id. Must match the id actually on the `<input>`/`<select>`/`<textarea>` (e.g. `ToggleSwitch` prefixes its input id with `toggle-switch-`, so its wrappers pass `toggleSwitchId`). |
 | `:required` | `boolean` | `false` | Whether the field is required. Only decides which fields the indicator marks; it doesn't set `required` on the control. Wrappers forward their own `required`. |
 | `:indicator` | `"none" \| "required" \| "optional"` | `undefined` → app.config → `"none"` | Which fields get a marker. |
 | `:required-text` | `string` | `undefined` → app.config → `"*"` | Required marker text. |
@@ -61,9 +60,9 @@ export default defineAppConfig({
 
 - `"required"` mode: a marker on fields with `required`; `"optional"` mode: a marker on fields
   without it; `"none"`: nothing (default, so existing sites are unchanged).
-- `InputTextWithLabel`, `InputTextAsNumberWithLabel`, `InputNumberField`, `InputSelectWithLabel`,
-  `InputTextareaWithLabel` and `InputRangeDefault` forward `:required`.
-  `ToggleSwitchWithLabel`/`ToggleSwitchWithLabelInline` pass `indicator="none"`: a switch always
+- `InputTextField`, `InputTextAsNumberField`, `InputNumberField`, `InputSelectField`,
+  `InputTextareaField` and `InputRangeField` forward `:required`.
+  `ToggleSwitchField` pass `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
@@ -101,7 +100,7 @@ Hooks: `data-input-variant`, `data-invalid`, `.input-label-indicator[data-indica
 - Removed props that were never read: `name` and `theme`. Wrappers stopped passing them.
 - Wrappers also passed a non-prop `:for`, which fell through and overrode the `for` built from
   `id`. For the text/number/select/textarea/range wrappers it was the same value (dropped). For
-  `ToggleSwitchWithLabel`/`ToggleSwitchWithLabelInline` it was the only thing pointing the label
+  `ToggleSwitchField` it was the only thing pointing the label
   at the real input (`toggle-switch-<id>`); they now pass `:id="toggleSwitchId"` explicitly.
 - `inputVariant` moved from a bare class (`.normal`/`.underlined`, whose rules were duplicates of
   the base rule) to `data-input-variant`. `fieldHasError` (accepted but unused) now renders

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

@@ -29,17 +29,17 @@ Most consumers should reach for **InputNumberField** rather than `InputNumber` d
 | `:placeholder` | `string` | `""` | Native `placeholder`. |
 | `:required` | `boolean` | `false` | Native `required`. |
 | `:theme` | `FormUiTheme` | `"default"` | Sets `data-theme` on the wrapper. |
-| `:weight` | `FormWeight` | `"normal"` | Adds an `input-number--{weight}` class to the input, for prop-shape consistency with sibling `05.forms` components. **No CSS in the library currently styles this class — it's a no-op today**, same convention as `InputRangeCore`'s `weight` prop. |
-| `:input-variant` | `InputUiVariant` | `"normal"` | Adds the variant name as a class on the wrapper — `"normal"` (bordered box) and `"underlined"` (bottom-border only) have CSS; `"outlined"` doesn't (see CONSUMER-STYLING.md). Same prop/behaviour as `InputTextCore`. |
+| `:weight` | `FormWeight` | `"normal"` | Adds an `input-number--{weight}` class to the input, for prop-shape consistency with sibling `05.forms` components. **No CSS in the library currently styles this class — it's a no-op today**, same convention as `InputRange`'s `weight` prop. |
+| `:input-variant` | `InputUiVariant` | `"normal"` | Rendered as `data-input-variant` on the wrapper (a bare class until 2026-10-16) — `"normal"` (bordered box) and `"underlined"` (bottom-border only) have CSS; `"outlined"` doesn't (see CONSUMER-STYLING.md). Same prop/behaviour as `InputText`. |
 | `:field-has-error` | `boolean` | `false` | Drives `data-invalid` on the wrapper. |
-| `:style-class-passthrough` | `string \| string[]` | `[]` | Extra CSS classes applied to the input element. |
+| `:style-class-passthrough` | `string \| string[]` | `[]` | Extra CSS classes applied to the input element. Reacts to changes. |
 | `:aria-describedby` | `string` | `""` | Forwarded to the native input. |
 
 ### v-model
 
 `v-model` — `number | readonly number[]`, **required** (`defineModel({ required: true })`). Bound
 directly to the native number input. Required rather than defaulted deliberately — same reasoning
-as `InputRangeCore`'s `v-model` (see that skill doc) — this also satisfies `vue/require-default-prop`.
+as `InputRange`'s `v-model` (see that skill doc) — this also satisfies `vue/require-default-prop`.
 
 ---
 
@@ -47,17 +47,17 @@ as `InputRangeCore`'s `v-model` (see that skill doc) — this also satisfies `vu
 
 | Slot | Notes |
 |------|-------|
-| `left` | Rendered before the input (e.g. a step-down button). Adds `has-left-slot` to the wrapper. |
-| `right` | Rendered after the input (e.g. a step-up button). Adds `has-right-slot` to the wrapper. |
+| `left` | Rendered before the input (e.g. a step-down button) in `.input-number-slot-left`. Sets `data-has-left-slot` on the wrapper. |
+| `right` | Rendered after the input (e.g. a step-up button) in `.input-number-slot-right`. Sets `data-has-right-slot` on the wrapper. |
 
-Any `.input-button` inside `.slot` gets its own border/outline stripped and is sized to
+Any `.input-button` inside `.input-number-slot` gets its own border/outline stripped and is sized to
 match the input (`aspect-ratio: 1`, `width: var(--input-min-height)`) regardless of which slot
 it's in. The divider border is then added directly to that button element specifically when its
-slot is present — `&.has-left-slot .left-slot .input-button { border-right: ... }` and the
-right-hand mirror — so it sits flush against the button's own edge rather than around the
-containing `.slot` div. This makes step buttons read as embedded segments of the same control
+slot is present (`.input-number-slot-left .input-button { border-right: ... }` and the
+right-hand mirror), so it sits flush against the button's own edge rather than around the
+containing `.input-number-slot` div. This makes step buttons read as embedded segments of the same control
 rather than separate floating buttons. The divider reuses the wrapper's own border colour token
-(no separate divider token), same as `InputTextCore`/`InputTextAsNumberWithLabel`.
+(no separate divider token), same as `InputText`/`InputTextAsNumberField`.
 
 ---
 
@@ -83,7 +83,7 @@ score-1/5 state. Several latent bugs were fixed alongside the standard checklist
 - The native `<input>` had no static `input-number` class — only the dynamic
   `elementClasses` passthrough — so the entire `.input-number { ... }` style block (font,
   padding, colour, focus box-shadow) never matched anything. Fixed by adding the class directly.
-- `placeholder` was declared as a prop but never bound on the `<input>` — unlike `InputRangeCore`
+- `placeholder` was declared as a prop but never bound on the `<input>` — unlike `InputRange`
   (where a range input genuinely has no placeholder concept and the no-op is intentional and
   documented), a number input *does* support `placeholder` meaningfully, so this was a real gap,
   not a deliberate no-op. Fixed by binding `:placeholder`.
@@ -107,9 +107,9 @@ score-1/5 state. Several latent bugs were fixed alongside the standard checklist
   aligned with the rest of `05.forms`.
 - `weight` was passed from `InputNumberField` to `InputNumber` but `InputNumber` had no
   matching prop, so it fell through as a raw, meaningless `weight="normal"` HTML attribute on the
-  wrapper `<div>`. Fixed by declaring the prop on `InputNumber` too, matching `InputRangeCore`.
+  wrapper `<div>`. Fixed by declaring the prop on `InputNumber` too, matching `InputRange`.
 - `defineModel()` had no default, tripping `vue/require-default-prop` — fixed the same way as
-  `InputRangeCore`: `defineModel({ required: true })`, not a rule disable or an artificial default.
+  `InputRange`: `defineModel({ required: true })`, not a rule disable or an artificial default.
 - A single-use private token, `--_border`, was inlined to the public
   `var(--input-number-border, var(--theme-border))` directly at its point of use — it had no
   composition or state-swap behind it, just a bare pass-through (see pitfall #20). `--_surface`
@@ -117,7 +117,7 @@ score-1/5 state. Several latent bugs were fixed alongside the standard checklist
 
 ---
 
-## Fixed 2026-09-22 (follow-up): rewritten to visually mirror InputTextCore
+## Fixed 2026-09-22 (follow-up): rewritten to visually mirror InputText
 
 The first migration pass above only made `InputNumber`'s *own* (pre-existing, previously dead)
 CSS active — it didn't reconsider whether that CSS was actually the right design. Once live, it
@@ -125,21 +125,21 @@ was visually inconsistent with the rest of `05.forms`: no border-radius, no hove
 state, wrong padding-token family (`--form-textarea-padding-*` instead of the shared input
 padding tokens), and a box-shadow-toggle focus mechanism instead of the `:has()`-based outline
 approach every other input in this library uses. `InputNumber` is meant to be a native
-`<input type="number">` sibling to the text-based `InputTextAsNumberWithLabel` variant (see
-`input-text-core.md`'s Variants section) — both should look and behave the same. The CSS was rewritten
-to mirror `InputTextCore` directly:
+`<input type="number">` sibling to the text-based `InputTextAsNumberField` variant (see
+`input-text.md`'s Variants section) — both should look and behave the same. The CSS was rewritten
+to mirror `InputText` directly:
 
-- Added `:input-variant` (`"normal"` / `"outlined"` / `"underlined"`), matching `InputTextCore`'s
+- Added `:input-variant` (`"normal"` / `"outlined"` / `"underlined"`), matching `InputText`'s
   prop and wrapper-class shape (`InputNumberField` forwards it the same way
-  `InputTextWithLabel` forwards it to `InputTextCore`, including to `InputLabel`).
-- Replaced the flat, unconditional border/radius/box-shadow with `InputTextCore`'s `.normal`
+  `InputTextField` forwards it to `InputText`, including to `InputLabel`).
+- Replaced the flat, unconditional border/radius/box-shadow with `InputText`'s `.normal`
   variant shape: border + `border-radius: var(--form-input-border-radius)` (previously this read
   `var(--form-element-border-width)` — a pre-existing bug that used the *border-width* token as
   the *radius*, coincidentally invisible while the block was dead), plus `:has(input:hover)` /
   `:has(input:focus-visible)` outline states instead of the old `--_focus-box-shadow` custom
   property toggle.
   - `--input-number-border-hover` and `--input-number-border-focus` are new public tokens for
-    these two states (both fall back to `--theme-border-focus`, same as `InputTextCore`).
+    these two states (both fall back to `--theme-border-focus`, same as `InputText`).
 - Padding moved from `--form-textarea-padding-*` (the wrong token family — textarea, not input)
   to the shared `--input-padding-block`/`--input-padding-inline`/`--input-min-height` tokens every
   other `05.forms` text-like input uses.
@@ -148,7 +148,7 @@ to mirror `InputTextCore` directly:
   previously it had neither, an accessibility gap beyond the visual mismatch (checklist item 9).
 - The divider between the input and an embedded button now reuses the border colour
   (`--_border`) directly instead of a separate `--input-number-divider-color` token — removed,
-  since `InputTextCore` doesn't have an equivalent separate token either (the border colour
+  since `InputText` doesn't have an equivalent separate token either (the border colour
   *is* the divider colour there too).
 - `--_border-hover` and `--_surface-hover` were each used only once with no composition or
   state-swap, so per the public-token rule they were inlined directly
@@ -158,21 +158,21 @@ to mirror `InputTextCore` directly:
   wrapper's own focus outline *and* the embedded button's focus outline both read it).
 - Fixed 2026-10-04: the wrapper's hover and focus outlines only matched `input:hover` /
   `input:focus-visible`, so hovering or tabbing to a step button showed no outer ring, unlike
-  `InputTextCore` (and so `InputTextAsNumberWithLabel`), which matches `button` too. Both
-  selectors are now `:has(input:…, button:…)`, mirroring `InputTextCore`.
+  `InputText` (and so `InputTextAsNumberField`), which matches `button` too. Both
+  selectors are now `:has(input:…, button:…)`, mirroring `InputText`.
 
 **Separately found in the same investigation** (not an `InputNumber` bug, but what the visual
-comparison was originally checking against): `InputTextAsNumberWithLabel.vue` had its own,
-unrelated pre-existing bug — see `input-text-core.md`'s Variants section for the fix.
+comparison was originally checking against): `InputTextAsNumberField.vue` had its own,
+unrelated pre-existing bug — see `input-text.md`'s Variants section for the fix.
 
 **Correction, same day**: the first version of this rewrite still didn't visually match — the
 divider border and button sizing (`aspect-ratio: 1`, `width: var(--input-min-height)`) had been
 put on the `.left-slot`/`.right-slot` *wrapper divs*, not on `.input-button` itself, unlike
-`InputTextCore`'s equivalent block. That left an unstyled gap between the button and the border
+`InputText`'s equivalent block. That left an unstyled gap between the button and the border
 line instead of a flush edge, and the buttons weren't sized to match the input's height. Fixed by
 moving the divider border and all button sizing/colour rules onto `.input-button` directly
 (`&.has-left-slot .left-slot .input-button { border-right: ... }`, matching
-`InputTextAsNumberWithLabel`'s `.left-slot .input-button { border-right: ... }` exactly)
+`InputTextAsNumberField`'s `.left-slot .input-button { border-right: ... }` exactly)
 rather than the containing `.slot` div. When mirroring another component's CSS structure, check
 *which element* a rule targets, not just that an equivalent rule exists somewhere in the block —
 a border/sizing rule one level off in the DOM tree produces a visually-close-but-not-matching
@@ -221,3 +221,34 @@ button icon content itself is consumer-supplied).
 
 Step-down is disabled (`readonly` on its `InputButton`) once the value reaches `min`, and
 step-up once it reaches `max`; clicking either button while at that boundary is a no-op.
+Each press adds or subtracts `step` (its absolute value, or 1 when it's 0), rounds away
+floating-point drift (0.2 + 0.1 gives 0.3) and clamps to `min`/`max`, so a step that would overshoot
+lands on the limit and a typed out-of-range value is pulled back in. From an empty field the first
+press sets 0, clamped into range. `:style-class-passthrough` lands on the root `.input-number-field`
+only (it also reached the inner input until 2026-10-16) and reacts to changes. The root carries
+`data-input-variant`, `data-theme` and `data-invalid`; its old `error`, `theme-*` and variant
+classes are gone.
+
+---
+
+## Stress pass 2026-10-16
+
+- **Stepping** (`InputNumberField`): 0.1 steps drifted (0.30000000000000004); a step that didn't
+  divide the range overshot `max`/`min` (8 + 5 with max 10 gave 13); an empty field turned into
+  `NaN`. Now rounded to the step's precision, clamped to `min`/`max`, and an empty field starts at
+  0, clamped. A zero or negative `step` steps by its size, or 1.
+- **Mobile keyboard**: `inputmode="numeric"` and `pattern="[0-9]+"` were hardcoded, so a negative
+  or decimal value couldn't be typed on phones (and number inputs ignore `pattern`). `inputmode` is
+  now `numeric` for whole steps, `decimal` for fractional ones, and omitted when `min` is negative;
+  `pattern` is gone.
+- **Width**: the input's minimum width was `max`'s digit count in `em`, uncapped and blind to a
+  longer negative `min` or the step's decimals. It now counts the longest of `min`/`max` plus the
+  step's decimals, capped at `12em`; the wrapper has `max-inline-size: 100%` and the step buttons
+  don't shrink. The Field wraps long label, description and error copy.
+- **State hooks**: bare state classes became data attributes and the slot holders got prefixed
+  class names (CONSUMER-STYLING.md has the mapping). Removed the non-existent `body-normal-bold`
+  utility class from the label and a dead `.label-description` rule. `InputError` now gets
+  `input-variant` like the label does.
+- 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.

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

@@ -41,7 +41,7 @@ option in `fieldData.data`, and an `InputError`. It's the single-choice sibling
 | `:options-layout` | `OptionsLayout` | `"equal-widths"` | `"equal-widths"` (auto-fit grid sized to the longest label), `"inline"` (wrapping row) or `"block"` (column). Rendered as `data-options-layout` on the items container. |
 | `:theme` | `FormUiTheme` | `"default"` | Passed to each radio. |
 | `:input-variant` | `InputUiVariant` | `"normal"` | Passed to each radio, the description and the error. |
-| `:style-class-passthrough` | `string \| string[]` | `[]` | Classes on the root `<fieldset>`. Read once at mount. |
+| `:style-class-passthrough` | `string \| string[]` | `[]` | Classes on the root `<fieldset>`; updates when the prop changes. |
 | `data-testid` | `string` | `"multiple-radio-buttons"` | On the root `<fieldset>`. |
 
 ### v-model
@@ -93,3 +93,17 @@ tokens from `input-checkbox-radio`.
   to `data-options-layout`; `MultipleCheckboxes` and `SingleCheckbox` got the same change.
 - Gap and top margin are public tokens. The label-width measurement no longer includes a
   selector for a class that doesn't exist. `fieldData` is a typed required model.
+
+**Stress pass 2026-10-16**:
+
+- Button-mode radio ids were `${name}-${item.value}`, so two groups sharing a `name` got duplicate
+  ids and a value with spaces made an invalid one (CLAUDE.md pitfall 30). `MultipleRadiobuttons`
+  no longer passes an `id`; `InputCheckboxRadioButton` generates one with `useId()`.
+- The root fieldset sets `min-inline-size: 0` and `overflow-wrap: anywhere`, and equal-width
+  columns are capped at `min(100%, ...)`, so long legends, labels and errors wrap inside a narrow
+  column (same fix as `MultipleCheckboxes`). No line-clamp tokens: the legend, option labels and
+  error must stay readable.
+- `styleClassPassthrough` is watched instead of read once at mount.
+- The spec unmounts every wrapper in `afterEach`; the story moved to `StoryObj` with Docs
+  descriptions, `CanvasSwitcher` and a `StressTest` story, and its gap control is labelled as a
+  story-only CSS token.