srcdev-nuxt-components 9.6.6 → 9.6.8

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

@@ -262,6 +262,12 @@ 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`).
     - 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-naming.md

@@ -83,8 +83,8 @@ external consumer, free to rename. Run `/check-component-usage` for the current
 | InputTextWithLabel | `InputTextField` | yes |
 | InputPasswordWithLabel | `InputPasswordField` | yes |
 | InputTextAsNumberWithLabel | `InputTextAsNumberField` | - |
-| InputRangeCore | `InputRange` | - |
-| InputRangeDefault | `InputRangeField` | - |
+| ~~InputRangeCore~~ | ✅ `InputRange` (2026-10-16) | - |
+| ~~InputRangeDefault~~ | ✅ `InputRangeField` (2026-10-16) | - |
 | InputTextareaCore | `InputTextarea` | - |
 | InputTextareaWithLabel | `InputTextareaField` | yes |
 | InputSelectCore | `InputSelect` | yes |

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

@@ -4,7 +4,7 @@
 
 `InputDescription` renders a form field's help text. Every `*Field` wrapper in `05.forms`
 (`InputTextWithLabel`, `InputNumberField`, `InputSelectWithLabel`, `InputTextareaWithLabel`,
-`InputRangeDefault`, `InputTextAsNumberWithLabel`, `SingleCheckbox`, `MultipleCheckboxes`,
+`InputRangeField`, `InputTextAsNumberWithLabel`, `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:
 

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

@@ -4,7 +4,7 @@
 
 `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`,
+`InputRangeField`, `ToggleSwitchWithLabel`, `SingleCheckbox`, `MultipleCheckboxes`,
 `MultipleRadiobuttons`, `InputTextAsNumberWithLabel`) already renders one, so consumers rarely use
 it directly. Use it yourself only when building a custom field wrapper.
 

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

@@ -4,7 +4,7 @@
 
 `InputLabel` renders a form field's `<label>`. Every labelled wrapper in `05.forms`
 (`InputTextWithLabel`, `InputTextAsNumberWithLabel`, `InputNumberField`, `InputSelectWithLabel`,
-`InputTextareaWithLabel`, `InputRangeDefault`, `ToggleSwitchWithLabel`,
+`InputTextareaWithLabel`, `InputRangeField`, `ToggleSwitchWithLabel`,
 `ToggleSwitchWithLabelInline`) already renders one from its `label` prop, so consumers normally
 never use it directly.
 
@@ -62,7 +62,7 @@ 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`.
+  `InputTextareaWithLabel` and `InputRangeField` forward `:required`.
   `ToggleSwitchWithLabel`/`ToggleSwitchWithLabelInline` 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`.

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 `InputTextCore`. |
 | `: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,15 +47,15 @@ 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`.
 
@@ -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`
@@ -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.

package/.claude/skills/components/{input-range-core.md → input-range.md}

@@ -1,15 +1,20 @@
-# InputRangeCore Component
+# InputRange Component
+
+> **Renamed 2026-10-16**: `InputRangeCore` → `InputRange`, `InputRangeDefault` → `InputRangeField`
+> (DOM classes `.input-range-core` → `.input-range`, `.input-range-with-label` →
+> `.input-range-field`; full class list in CONSUMER-STYLING.md). Skill doc renamed from
+> `input-range-core.md`. No consumer app used either old name.
 
 ## Overview
 
-`InputRangeCore` is the low-level native `<input type="range">` primitive for the `05.forms`
+`InputRange` is the low-level native `<input type="range">` primitive for the `05.forms`
 range-slider family. It renders a single native range input with left/right button slots (for
 step-down/step-up controls), an optional `markers` slot for custom tick marks overlaid on the
 track, and an optional `datalist` slot for native tick-mark snapping. It has no label,
-description, or error-message rendering of its own — that's composed by the `InputRangeDefault`
+description, or error-message rendering of its own — that's composed by the `InputRangeField`
 variant below.
 
-Most consumers should reach for **InputRangeDefault** rather than `InputRangeCore` directly.
+Most consumers should reach for **InputRangeField** rather than `InputRange` directly.
 
 ---
 
@@ -20,7 +25,7 @@ Most consumers should reach for **InputRangeDefault** rather than `InputRangeCor
 | Prop (template form) | Type | Default | Notes |
 |------|------|---------|-------|
 | `:id` | `string` | (required) | Applied to the native input. |
-| `:name` | `string` | (required) | Applied to the native input, and used to derive the `list` id when the `datalist` slot is used (`${name}-datalist`). |
+| `:name` | `string` | (required) | Applied to the native input. (Until 2026-10-16 it also built the datalist id, `${name}-datalist`; that id now comes from `useId()`.) |
 | `:min` | `number` | (required) | Native `min`. |
 | `:max` | `number` | (required) | Native `max`. |
 | `:step` | `number` | `1` | Native `step`. |
@@ -28,8 +33,8 @@ Most consumers should reach for **InputRangeDefault** rather than `InputRangeCor
 | `:placeholder` | `string` | `""` | Declared but not rendered — range inputs have no placeholder concept. Kept for prop-shape consistency with sibling `05.forms` components. |
 | `:theme` | `FormUiTheme` | `"default"` | Sets `data-theme` on the wrapper. |
 | `:weight` | `FormWeight` | `"normal"` | Adds an `input-range--{weight}` class to the input. **No CSS in the library currently styles this class — it's a no-op today**, kept for prop-shape consistency with sibling components. |
-| `:field-has-error` | `boolean` | `false` | Declared, but doesn't drive any visible state inside `InputRangeCore` itself — `InputRangeDefault` handles the actual error styling (`data-invalid`/`.error` class) on its own wrapper. |
-| `:style-class-passthrough` | `string \| string[]` | `[]` | Extra CSS classes applied to the input element. |
+| `:field-has-error` | `boolean` | `false` | `data-invalid` on the wrapper and `aria-invalid="true"` on the input (it did nothing here until 2026-10-16). |
+| `: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
@@ -50,8 +55,8 @@ disable, not a fake default).
 |------|-------|
 | `left` | Rendered before the track (e.g. a step-down button). |
 | `right` | Rendered after the track (e.g. a step-up button). |
-| `markers` | Rendered as an overlay on top of the track (`grid-area: element-stack`, same cell as the input). Adds a `has-markers` class to the input, which shrinks its visible track to a thin `0.2rem` strip and hides the native thumb, so your marker content becomes the primary visual. Expected shape: a `.input-range-markers` wrapper containing `.marker` elements (each optionally containing a `.marker-icon`) — see the component's own scoped CSS for the classes it pre-styles. |
-| `datalist` | Rendered after the input. Must contain a real `<datalist>` element whose `id` matches `${name}-datalist` for the browser to link it via the input's `list` attribute — the component computes that id string for the `list` attribute itself, but does not set the `id` on your slotted `<datalist>` for you. |
+| `markers` | Rendered as an overlay on top of the track (`grid-area: element-stack`, same cell as the input). Sets `data-has-markers` on the wrapper: a line joining the markers is drawn behind them, the input becomes a transparent layer over the whole marker row (so the row is draggable and clickable), and the thumb is restyled as a ring the size of one marker that circles the selected one. That lines up because markers are spaced `space-between` and given an explicit size (icon size + 2 × padding), the same as the thumb. Use one marker per step (`(max - min) / step + 1`). Expected shape: a `.input-range-markers` wrapper containing `.input-range-marker` elements (each optionally containing an `.input-range-marker-icon`); those classes are pre-styled (they were `.marker`/`.marker-icon` until 2026-10-16). |
+| `datalist` | Rendered after the input, with a `datalistId` slot prop: put it on your `<datalist>` (`<template #datalist="{ datalistId }"><datalist :id="datalistId">`) and the input's `list` points at it. The id comes from `useId()`, so two ranges sharing a `name` don't collide. `list` is omitted when the slot is empty. |
 
 ---
 
@@ -93,13 +98,13 @@ was itself commented out.
 
 ## Variants
 
-### InputRangeDefault
+### InputRangeField
 
-`InputRangeDefault` (`InputRangeDefault.vue`) composes `InputRangeCore` with `InputLabel`,
+`InputRangeField` (`InputRangeField.vue`) composes `InputRange` with `InputLabel`,
 `InputDescription`, and `InputError`, plus optional step-down/step-up buttons (`InputButton`)
 wired into the `left`/`right` slots.
 
-**Additional props over InputRangeCore:**
+**Additional props over InputRange:**
 
 | Prop (template form) | Type | Default | Notes |
 |------|------|---------|-------|
@@ -110,11 +115,11 @@ wired into the `left`/`right` slots.
 
 **Slots**: `descriptionHtml`, `descriptionText` (both forwarded to `InputDescription`), plus
 `left`/`right`/`markers`/`datalist` (forwarded straight through to the underlying
-`InputRangeCore` — the step-down/step-up buttons only render when you use the `left`/`right`
+`InputRange`; `markers` wasn't forwarded until 2026-10-16, and `datalist` passes `datalistId` on — the step-down/step-up buttons only render when you use the `left`/`right`
 slots yourself, since the button icon content itself is consumer-supplied via `#iconOnly`).
 
 ```vue
-<InputRangeDefault
+<InputRangeField
   name="priceRange"
   label="Price range"
   v-model="price"
@@ -126,17 +131,47 @@ slots yourself, since the button icon content itself is consumer-supplied via `#
 >
   <template #left><Icon name="mdi:minus" /></template>
   <template #right><Icon name="mdi:plus" /></template>
-</InputRangeDefault>
+</InputRangeField>
 ```
 
-`v-model` is `number`, **required** — same as `InputRangeCore` above.
+`v-model` is `number`, **required** — same as `InputRange` above.
+
+Each step-button 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`; step-down goes read-only at or
+below `min`, step-up at or above `max`. `:style-class-passthrough` lands on the root
+`.input-range-field` only (it also reached the inner input until 2026-10-16) and reacts to changes.
+The root carries `data-theme` and `data-invalid` (its old `error` class is gone), and the label
+gets `input-range-label` (it was the number field's `input-number-label`, with a non-existent
+`body-normal-bold` utility).
 
 **Fixed 2026-09-21**: removed a dead `deepCssClassPassthrough` prop (declared, never consumed
 anywhere in the component or referenced elsewhere in the codebase) and a dead `<style>` block
 targeting `.input-range-label`/`.label-description` — classes that nothing in this component (or
 `InputLabel`/`InputDescription`) actually renders, so the block had no effect. Also removed two
 dead commented-out lines (`// const id = useId();`, a duplicate no-op `FormUiTheme` computed), and
-(same day, follow-up pass) a `const props = withDefaults(...)` in both `InputRangeCore` and
-`InputRangeDefault` that had become entirely unused once the dead `FormUiTheme` computed was
+(same day, follow-up pass) a `const props = withDefaults(...)` in both `InputRange` and
+`InputRangeField` that had become entirely unused once the dead `FormUiTheme` computed was
 removed — the template's `:id`/`:name`/etc. shorthand bindings resolve straight from `defineProps`
 automatically in `<script setup>`, no destructuring or `props.` reference needed.
+
+---
+
+## Stress pass 2026-10-16
+
+- **Stepping** (`InputRangeField`): 0.1 steps drifted (0.30000000000000004) and a step that didn't
+  divide the range overshot `min`/`max`; the read-only checks used `===`, so an overshot value
+  never disabled the button. Now rounded, clamped, and `<=`/`>=`. A zero or negative `step`
+  steps by its size, or 1.
+- **Datalist id**: was `${name}-datalist`, so two ranges sharing a `name` linked to the same list
+  (rule `ids-from-useid.md`). Now `useId()`, handed to the slot as `datalistId`.
+- **Error state**: `fieldHasError` did nothing on `InputRange`; it now sets `data-invalid` and
+  `aria-invalid`.
+- **Slots**: the Field didn't forward `markers`.
+- **Classes**: bare/generic classes became prefixed classes or data attributes, and the marker
+  defaults moved from dark-page colours to `--theme-*` tokens (CONSUMER-STYLING.md has the
+  mapping). The Field's passthrough no longer reaches the inner input as well as its root.
+- **Overflow**: the slider container gets `min-inline-size: 0` and the step buttons don't
+  shrink; the Field wraps long label, description and error copy.
+- 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-textarea-core.md

@@ -33,7 +33,7 @@ directly.
 
 - `v-model` — `string | number | readonly string[] | null | undefined`, **required**
   (`defineModel({ required: true })`, satisfying `vue/require-default-prop` the same way as
-  `InputRangeCore`/`InputNumber` — see `project_ledger_eslint_issues_column` in memory).
+  `InputRange`/`InputNumber` — see `project_ledger_eslint_issues_column` in memory).
   "Required" here means a consumer must bind `v-model`, not that the value can't be an empty
   string — `""` is a perfectly valid textarea value.
 - `v-model:is-dirty` — `boolean`. Set once by `InputTextareaWithLabel` the first time the value
@@ -50,7 +50,7 @@ directly.
 | `left` | Rendered before the textarea (decorative — e.g. an icon). Adds `has-left-slot` to the wrapper. |
 | `right` | Rendered after the textarea (decorative). Adds `has-right-slot` to the wrapper. |
 
-Unlike `InputNumber`/`InputRangeCore`, these slots have no built-in `InputButton`
+Unlike `InputNumber`/`InputRange`, these slots have no built-in `InputButton`
 divider/embedded-button styling — they're plain decorative content (see the Storybook stories,
 which use emoji), not a stepper control.
 
@@ -75,7 +75,7 @@ the full table with defaults.
 score-1/5 state (no public tokens, no CONSUMER-STYLING.md, no tests, no skill doc, no snippet).
 
 - **Silently broken styling from undefined CSS custom properties** (same bug class as pitfall #21
-  and `InputRangeCore`'s dead `--theme-form-range-accent-color`): the wrapper's `padding-inline`
+  and `InputRange`'s dead `--theme-form-range-accent-color`): the wrapper's `padding-inline`
   read `--element-decorator-padding-inline`, and the placeholder's `font-size`/`font-style`/
   `line-height`/`font-weight` read `--input-placeholder-font-size`/`-font-style`/`-line-height`/
   `-font-weight` — **none of these five custom properties were declared anywhere in the
@@ -105,7 +105,7 @@ score-1/5 state (no public tokens, no CONSUMER-STYLING.md, no tests, no skill do
   `InputLabel` (which does have a real `label` concept) already renders it correctly. Covered by
   a regression test.
 - **`defineModel()` had no default**, tripping `vue/require-default-prop` in both files — fixed
-  with `{ required: true }`, same pattern as `InputRangeCore`/`InputNumber` (see the v-model
+  with `{ required: true }`, same pattern as `InputRange`/`InputNumber` (see the v-model
   note above for why this is still correct even though an empty string is a valid value here).
 - **`InputTextareaWithLabel.stories.ts` used `reactive()` in two render functions
   (`AllVariants`/`FormExamples`) without importing it** — only `computed` was imported from

package/.claude/skills/components/page-hero-highlights.md

@@ -1,5 +1,7 @@
 # PageHeroHighlights Component
 
+> **Changed 2026-10-16:** `widthConstrained` was inverted in the CSS since it was first added (`true` gave full width, `false` capped the column); it now does what this doc always said. The tablet/desktop gutters never applied (their `@container` queries had no container): the root is now a named `page-hero-highlights` inline-size container and the rows sit in a `.page-hero-highlights-grid` wrapper. Colour defaults are light theme tokens (were `darkblue`/`white`/`black`/`--slate-*`). Equal-width highlights wrap below `--page-hero-highlights-item-min-width` (12rem). Grid tracks are `minmax(0, …)` and items get `overflow-wrap: anywhere`.
+
 > **Changed 2026-09-28:** styles are now in `@layer components` (they were unlayered). Every token is `--page-hero-highlights-*` with its default as a `var()` fallback, so it can be set on the component or any ancestor (previously declared on the root with generic names like `--max-width`, `--highlight-border`, so ancestor values never landed). Inner classes are prefixed (`.page-hero-highlights-header-row`, `-header-slot`, `-strip`, `-content-row`, `-content-slot`); the content-align root classes are `.content-align-start`/`.content-align-center` (were bare `.start`/`.center`); the highlight contract classes are `.page-hero-highlights-item`, `-item-title`, `-item-body` (were `.highlight`, `.title`, `.body`); PageHeroHighlightsHeader uses `.page-hero-highlights-header-start`/`-end` and `--page-hero-highlights-header-*` tokens (were `.phh-*` / `--phh-*`). Full token reference: `CONSUMER-STYLING.md` in the component folder.
 
 ## Overview
@@ -19,7 +21,7 @@ The layout uses a 4-row CSS Grid with `subgrid` — no `translate`, negative mar
 | `tag`                   | `"div" \| "section" \| "main"`                                      | `"div"`     | Root element tag                                                                                                                |
 | `highlightsEqualWidths` | `boolean`                                                           | `false`     | Equal-width grid columns for highlight items                                                                                    |
 | `highlightsJustify`     | `"start" \| "center" \| "end" \| "space-between" \| "space-around"` | `"start"`   | Alignment of highlight items along the main axis                                                                                |
-| `widthConstrained`              | `boolean`                                                           | `false`     | When `true`, caps the central column at `--width-constrained` (default `1064px`). Gutters grow responsively to enforce the constraint. |
+| `widthConstrained`              | `boolean`                                                           | `false`     | When `true`, caps the central column at `--page-hero-highlights-max-width` (default `1064px`). Gutters grow responsively to enforce the constraint. |
 | `contentAlign`          | `"start" \| "center"`                                               | `"center"`  | When `widthConstrained` is `true`: `"center"` grows gutters equally; `"start"` pins content to the left with a fixed left gutter.      |
 | `contentPanel`          | `boolean`                                                           | `true`      | When `true`, renders a decorative panel behind the content slot and offsets the highlights strip. Set to `false` for a flat layout with no backdrop. |
 | `highlightTitleBaseline`| `boolean`                                                           | `false`     | When `true`, fixes the highlight title row to a set height so titles align at a common baseline. Override `--page-hero-highlights-title-height` to tune. |
@@ -166,7 +168,7 @@ See [component-aria-landmark.md](../component-aria-landmark.md) for the full pat
 
 ## Equal-width highlights
 
-By default, highlight items size to their content (`flex-wrap`). Pass `:highlights-equal-widths="true"` to switch to a grid where all items share equal column widths:
+By default, highlight items size to their content (`flex-wrap`). Pass `:highlights-equal-widths="true"` to switch to a grid where all items share equal column widths (`repeat(auto-fit, minmax(min(100%, --page-hero-highlights-item-min-width), 1fr))`), wrapping onto new rows when they'd get narrower than the min width (default `12rem`):
 
 ```vue
 <PageHeroHighlights :highlights-equal-widths="true">
@@ -176,10 +178,10 @@ By default, highlight items size to their content (`flex-wrap`). Pass `:highligh
 
 ## Constraining the central column width
 
-Pass `:width-constrained="true"` to cap the content column at `--width-constrained` (default `1064px`). The gutters grow responsively to enforce it — full-bleed backgrounds are unaffected and `subgrid` continues to work. Use `content-align` to pin to the left or centre:
+Pass `:width-constrained="true"` to cap the content column at `--page-hero-highlights-max-width` (default `1064px`). The gutters grow responsively to enforce it — full-bleed backgrounds are unaffected and `subgrid` continues to work. Use `content-align` to pin to the left or centre:
 
 ```vue
-<!-- Centred, capped at --width-constrained (1064px) -->
+<!-- Centred, capped at --page-hero-highlights-max-width (1064px) -->
 <PageHeroHighlights :width-constrained="true" content-align="center">...</PageHeroHighlights>
 
 <!-- Left-pinned (right side takes remaining space) -->
@@ -190,12 +192,12 @@ The maximum width value and gutter sizes are all CSS tokens — override them vi
 
 ```css
 .my-page-hero {
-  --width-constrained: 1200px;
+  --page-hero-highlights-max-width: 1200px;
   --page-hero-highlights-gutter-desktop: 48px;
 }
 ```
 
-See [css-grid-width-constrained-gutters.md](../css-grid-width-constrained-gutters.md) for the underlying pattern explanation.
+See [css-grid-max-width-gutters.md](../css-grid-max-width-gutters.md) for the underlying pattern explanation.
 
 ## Local style override scaffold
 
@@ -215,40 +217,41 @@ See [component-local-style-override.md](../component-local-style-override.md) fo
 .page-hero-highlights {
   &.my-page-hero {
     /* Grid layout */
-    /* --width-constrained: 1064px; */
+    /* --page-hero-highlights-max-width: 1064px; */
     /* --page-hero-highlights-gutter-mobile: 16px; */
     /* --page-hero-highlights-gutter-tablet: 40px; */
     /* --page-hero-highlights-gutter-desktop: 32px; */
 
     /* Header zone */
-    /* --page-hero-highlights-header-background: darkblue; */
+    /* --page-hero-highlights-header-background: var(--theme-surface-subtle); */
 
     /* Highlights strip */
     /* --page-hero-highlights-strip-gap: 1rem; */
     /* --page-hero-highlights-strip-inset: 1.2rem; */
+    /* --page-hero-highlights-item-min-width: 12rem; */ /* equal-widths wrap point */
 
     /* Highlight cards */
     /* --page-hero-highlights-item-rows-gap: 1.2rem; */
     /* --page-hero-highlights-title-height: 1fr; */ /* see: highlight-title-baseline prop */
     /* --page-hero-highlights-item-padding-block-start: 1.2rem; */
     /* --page-hero-highlights-item-padding: 1.2rem; */
-    /* --page-hero-highlights-item-background: white; */
-    /* --page-hero-highlights-item-border: 1px solid black; */
+    /* --page-hero-highlights-item-background: var(--page-bg, Canvas); */
+    /* --page-hero-highlights-item-border: 1px solid var(--theme-border); */
     /* --page-hero-highlights-item-border-radius: 8px; */
-    /* --page-hero-highlights-item-colour: black; */
+    /* --page-hero-highlights-item-colour: var(--theme-text); */
 
     /* Content zone */
-    /* --page-hero-highlights-content-background: var(--slate-01); */ /* transparent */
+    /* --page-hero-highlights-content-background: transparent; */
     /* --page-hero-highlights-content-start-gap: 1.2rem; */
     /* --page-hero-highlights-content-end-gap: 1.2rem; */
 
     /* Content slot decorative border */
     /* --page-hero-highlights-content-margin-block-start: 2.4rem; */
     /* --page-hero-highlights-content-margin: var(--page-hero-highlights-strip-inset); */
-    /* --page-hero-highlights-panel-background: var(--slate-00); */
-    /* --page-hero-highlights-panel-border: 1px solid var(--slate-06); */
+    /* --page-hero-highlights-panel-background: var(--theme-surface-subtle); */
+    /* --page-hero-highlights-panel-border: 1px solid var(--theme-border); */
     /* --page-hero-highlights-panel-border-radius: 0.8rem; */
-    /* --page-hero-highlights-panel-outline: 1px solid var(--slate-02); */
+    /* --page-hero-highlights-panel-outline: none; */
 
     /* When using :highlight-title-baseline="true" */
     /* --page-hero-highlights-title-height-baseline: 4rem; */ /* proportional value preferred */
@@ -268,10 +271,10 @@ row3: highlights bottom half
 row4: page content (never underflows highlights)
 ```
 
-`.page-hero-highlights-header-row` spans cols 1–3, rows 1–2 (edge-to-edge bg). `.page-hero-highlights-header-slot` is placed in row 1 only.
+All of these sit in `.page-hero-highlights-grid`, the grid inside the root (the root is the size container). `.page-hero-highlights-header-row` spans cols 1–3, rows 1–2 (edge-to-edge bg). `.page-hero-highlights-header-slot` is placed in row 1 only.
 `.page-hero-highlights-content-row` spans cols 1–3, rows 3–4 (bg fills behind highlights; `.page-hero-highlights-content-slot` is placed in row 4 only). The decorative border behind `.page-hero-highlights-content-slot` is rendered via `.page-hero-highlights-content-row::before` — there is no separate DOM element for it.
 
-Grid columns are determined entirely by CSS — no `v-bind`. The `widthConstrained` and `contentAlign` props add CSS classes (`width-constrained`, `start`, `center`) which select the appropriate `grid-template-columns` rule.
+Grid columns are determined entirely by CSS — no `v-bind`. The `widthConstrained` and `contentAlign` props add CSS classes (`width-constrained`, `content-align-start`, `content-align-center`) on the root, which select the `grid-template-columns` rule on `.page-hero-highlights-grid`.
 
 ## Layout pitfall: do not use `grid-template-rows: subgrid` inside `.page-hero-highlights-strip`
 
@@ -300,4 +303,5 @@ The `.page-hero-highlights-strip` element spans rows 2–3 of the parent grid (t
 - Lives in `app/components/04.templates/page-hero-highlights/`.
 - Storybook title: `"Templates/PageHeroHighlights"`.
 - **`contentAlign` has no effect when `widthConstrained` is `false`** — both gutters hold their responsive default.
-- **Gutter sizes are CSS tokens** — `--page-hero-highlights-gutter-mobile/tablet/desktop` are all overridable. The responsive switching between them (via `@container`) is handled internally and cannot be overridden.
+- **Gutter sizes are CSS tokens** — `--page-hero-highlights-gutter-mobile/tablet/desktop` are all overridable. They switch at 768px and 1024px of the component's own width (`@container page-hero-highlights`); the breakpoints themselves aren't tokens.
+- **The root is an inline-size container**, so it can't size from its content: as a flex or grid item give it `inline-size: 100%` or a track. A grid on the root itself was moved to `.page-hero-highlights-grid` for this (an element can't query its own size).