srcdev-nuxt-components 9.4.11 → 9.5.0

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

@@ -1,13 +1,17 @@
-# InputNumberCore Component
+# InputNumber Component
+
+> **Renamed 2026-09-25**: `InputNumberCore` → `InputNumber`, `InputNumberDefault` → `InputNumberField`
+> (DOM classes `.input-number-core` → `.input-number`, `.input-number-with-label` → `.input-number-field`).
+> First component moved to the Control/Field naming convention, see `.claude/skills/component-naming.md`.
 
 ## Overview
 
-`InputNumberCore` is the low-level native `<input type="number">` primitive for the `05.forms`
+`InputNumber` is the low-level native `<input type="number">` primitive for the `05.forms`
 number-input family. It renders a single native number input with left/right button slots (for
 step-down/step-up controls). It has no label, description, or error-message rendering of its
-own — that's composed by the `InputNumberDefault` variant below.
+own — that's composed by the `InputNumberField` variant below.
 
-Most consumers should reach for **InputNumberDefault** rather than `InputNumberCore` directly.
+Most consumers should reach for **InputNumberField** rather than `InputNumber` directly.
 
 ---
 
@@ -46,10 +50,10 @@ as `InputRangeCore`'s `v-model` (see that skill doc) — this also satisfies `vu
 | `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. |
 
-Any `.input-button-core` inside `.slot` gets its own border/outline stripped and is sized to
+Any `.input-button` inside `.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-core { border-right: ... }` and the
+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
 rather than separate floating buttons. The divider reuses the wrapper's own border colour token
@@ -63,6 +67,7 @@ See [CONSUMER-STYLING.md](../../app/components/05.forms/input-number/CONSUMER-ST
 full table with defaults.
 
 **Common tokens:**
+
 - `--input-number-surface` / `-surface-hover` — wrapper/input/embedded-button background, resting and hover, falls back to `--theme-input-surface`/`-surface-hover`
 - `--input-number-border` / `-border-hover` / `-border-focus` — border colour resting, mouse-hover outline, and `:focus-visible` outline (also the divider colour and the embedded button's own focus outline), falls back to `--theme-border`/`--theme-border-focus`
 - `--input-number-text-color` — input text colour, falls back to `--theme-input-text-color-normal`
@@ -72,11 +77,11 @@ full table with defaults.
 
 ## Fixed 2026-09-22: dead CSS from a missing base class and mismatched selectors
 
-`InputNumberCore` migrated to full compliance from a `variants:true`, `eslint_issues:true`,
+`InputNumber` migrated to full compliance from a `variants:true`, `eslint_issues:true`,
 score-1/5 state. Several latent bugs were fixed alongside the standard checklist:
 
-- The native `<input>` had no static `input-number-core` class — only the dynamic
-  `elementClasses` passthrough — so the entire `.input-number-core { ... }` style block (font,
+- 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`
   (where a range input genuinely has no placeholder concept and the no-op is intentional and
@@ -89,20 +94,20 @@ score-1/5 state. Several latent bugs were fixed alongside the standard checklist
   `slot left-slot`/`slot right-slot` and adding `has-left-slot`/`has-right-slot` to the wrapper
   directly from `slots.left`/`slots.right` (Vue's own `useSlots()`), rather than a fragile,
   cross-component class-toggling relay.
-- Relatedly, `InputNumberDefault` called `updateElementClasses(["has-left-button",
+- Relatedly, `InputNumberField` called `updateElementClasses(["has-left-button",
   "has-right-button"])` unconditionally on mount, which permanently added those two classes to
-  its own outer `.input-number-with-label` wrapper — a different element than
-  `InputNumberCore`'s `.input-number-wrapper`, so the `:has()` selector that was meant to key off
+  its own outer `.input-number-field` wrapper — a different element than
+  `InputNumber`'s `.input-number-wrapper`, so the `:has()` selector that was meant to key off
   those classes could never match (the class lived on an ancestor, not a descendant). Replaced
-  entirely: `InputNumberCore` now detects an embedded button directly via
-  `:has(.left-slot .input-button-core)` / `:has(.right-slot .input-button-core)`, so no
+  entirely: `InputNumber` now detects an embedded button directly via
+  `:has(.left-slot .input-button)` / `:has(.right-slot .input-button)`, so no
   JS-driven class relay is needed at all.
 - `theme` was typed as an inline `"default" | "success" | "error" | "warning"` union in both
-  `InputNumberCore` and `InputNumberDefault` instead of importing the shared `FormUiTheme` type —
+  `InputNumber` and `InputNumberField` instead of importing the shared `FormUiTheme` type —
   aligned with the rest of `05.forms`.
-- `weight` was passed from `InputNumberDefault` to `InputNumberCore` but `InputNumberCore` had no
+- `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 `InputNumberCore` too, matching `InputRangeCore`.
+  wrapper `<div>`. Fixed by declaring the prop on `InputNumber` too, matching `InputRangeCore`.
 - `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.
 - A single-use private token, `--_border`, was inlined to the public
@@ -114,18 +119,18 @@ score-1/5 state. Several latent bugs were fixed alongside the standard checklist
 
 ## Fixed 2026-09-22 (follow-up): rewritten to visually mirror InputTextCore
 
-The first migration pass above only made `InputNumberCore`'s *own* (pre-existing, previously dead)
+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
 was visually inconsistent with the rest of `05.forms`: no border-radius, no hover/focus outline
 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. `InputNumberCore` is meant to be a native
+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:
 
 - Added `:input-variant` (`"normal"` / `"outlined"` / `"underlined"`), matching `InputTextCore`'s
-  prop and wrapper-class shape (`InputNumberDefault` forwards it the same way
+  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`
   variant shape: border + `border-radius: var(--form-input-border-radius)` (previously this read
@@ -152,18 +157,18 @@ to mirror `InputTextCore` directly:
   private wrappers. `--_border-focus` stayed private since it's now genuinely reused (the
   wrapper's own focus outline *and* the embedded button's focus outline both read it).
 
-**Separately found in the same investigation** (not an `InputNumberCore` bug, but what the visual
+**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.
 
 **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-core` itself, unlike
+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
 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-core` directly
-(`&.has-left-slot .left-slot .input-button-core { border-right: ... }`, matching
-`InputTextAsNumberWithLabel`'s `.left-slot .input-button-core { border-right: ... }` exactly)
+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)
 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
@@ -173,28 +178,28 @@ result that's easy to miss without a side-by-side screenshot comparison.
 
 ## Variants
 
-### InputNumberDefault
+### InputNumberField
 
-`InputNumberDefault` (`variants/InputNumberDefault.vue`) composes `InputNumberCore` with
+`InputNumberField` (`InputNumberField.vue`) composes `InputNumber` with
 `InputLabel`, `InputDescription`, and `InputError`, plus optional step-down/step-up buttons
-(`InputButtonCore`) wired into the `left`/`right` slots.
+(`InputButton`) wired into the `left`/`right` slots.
 
-**Additional props over InputNumberCore:**
+**Additional props over InputNumber:**
 
 | Prop (template form) | Type | Default | Notes |
 |------|------|---------|-------|
 | `:label` | `string` | (required) | Rendered via `InputLabel`. |
 | `:error-message` | `object \| string` | (required) | Rendered via `InputError` when `field-has-error` is true. |
-| `:step-down-label` | `string` | `"Step down"` | `button-text` on the step-down `InputButtonCore` — override for localisation. |
-| `:step-up-label` | `string` | `"Step up"` | `button-text` on the step-up `InputButtonCore` — override for localisation. |
+| `:step-down-label` | `string` | `"Step down"` | `button-text` on the step-down `InputButton` — override for localisation. |
+| `:step-up-label` | `string` | `"Step up"` | `button-text` on the step-up `InputButton` — override for localisation. |
 
 **Slots**: `descriptionHtml`, `descriptionText` (both forwarded to `InputDescription`), plus
-`left`/`right` (forwarded straight through to the underlying `InputNumberCore` — the
+`left`/`right` (forwarded straight through to the underlying `InputNumber` — 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).
 
 ```vue
-<InputNumberDefault
+<InputNumberField
   name="quantity"
   label="Quantity"
   v-model="quantity"
@@ -205,10 +210,10 @@ button icon content itself is consumer-supplied).
 >
   <template #left><Icon name="mdi:minus" /></template>
   <template #right><Icon name="mdi:plus" /></template>
-</InputNumberDefault>
+</InputNumberField>
 ```
 
-`v-model` is `number | readonly number[]`, **required** — same as `InputNumberCore` above.
+`v-model` is `number | readonly number[]`, **required** — same as `InputNumber` above.
 
-Step-down is disabled (`readonly` on its `InputButtonCore`) once the value reaches `min`, and
+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.

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

@@ -0,0 +1,95 @@
+# MultipleRadiobuttons Component
+
+## Overview
+
+`MultipleRadiobuttons` (folder `05.forms/input-radio`) renders a single-choice group: a
+`FormFieldset` with `role="radiogroup"` and a legend, an optional description, one radio per
+option in `fieldData.data`, and an `InputError`. It's the single-choice sibling of
+`MultipleCheckboxes` (see `input-checkbox.md`) and takes the same shape of props and data.
+
+```vue
+<MultipleRadiobuttons
+  v-model="state.enquiryType"
+  v-model:field-data="enquiryTypeOptions"
+  name="enquiryType"
+  legend="What's your enquiry about?"
+  :required="true"
+  :error-message="errors.enquiryType ?? ''"
+  :field-has-error="Boolean(errors.enquiryType)"
+  options-layout="inline"
+>
+  <template #descriptionText>Pick the closest match.</template>
+</MultipleRadiobuttons>
+```
+
+---
+
+## Props reference
+
+> **Hyphenation rule**: write camelCase props hyphenated in templates: `:field-has-error`, `:is-button`, `:is-pill`, `:options-layout`, `:input-variant`, `:style-class-passthrough`.
+
+| Prop (template form) | Type | Default | Notes |
+|---|---|---|---|
+| `name` | `string` | (required) | Shared `name` of every radio (so they form one native group: arrow-key navigation, one tab stop), and the base for the description/error ids. |
+| `legend` | `string` | (required) | Fieldset `<legend>` text. |
+| `:error-message` | `string \| object` | (required) | Pass `""` when there's no error. |
+| `:field-has-error` | `boolean` | `false` | Shows the error and links it from each radio's `aria-describedby`. |
+| `:required` | `boolean` | `false` | Native `required` on every radio. |
+| `:is-button` | `boolean` | `false` | Button-style options (`InputCheckboxRadioButton`) instead of radio + label. |
+| `:is-pill` | `boolean` | `false` | Pill shape, only with `is-button`. |
+| `:direction` | `"row" \| "row-reverse"` | `"row"` | Icon/label order, only with `is-button`. |
+| `: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. |
+| `data-testid` | `string` | `"multiple-radio-buttons"` | On the root `<fieldset>`. |
+
+### v-model
+
+- `v-model`: the selected option's `value`, **required**. Start it at `""` (or `undefined`) for no selection.
+- `v-model:field-data`: `IFormMultipleOptions` (`{ data: [{ id, name, value, label }], ... }`), **required**. Keep it a plain `ref`, not a `computed`, since it's a two-way model. Each item's `name` is ignored: the group `name` prop is used for every radio.
+
+### Slots
+
+| Slot | Notes |
+|---|---|
+| `descriptionText` / `descriptionHtml` | Help text between the legend and the options, linked via `aria-describedby`. Nothing renders without them. |
+| `checkedIcon` | Icon inside the checked radio. |
+| `itemIcon` | Icon in button-style options (default `material-symbols:add-2`). |
+
+---
+
+## Accessibility
+
+- `role="radiogroup"` on the fieldset, named by its `<legend>`.
+- All radios share one `name`, so the browser treats them as one group: a single tab stop and
+  arrow keys to move the selection.
+- Each radio is labelled by its option label (`label[for]`). Description and error ids are on
+  every radio's `aria-describedby`.
+- No hardcoded copy: legend, labels, description and error text all come from props, data or slots.
+
+---
+
+## Styling
+
+Full detail in `app/components/05.forms/input-radio/CONSUMER-STYLING.md`. Public tokens:
+`--multiple-radiobuttons-gap`, `--multiple-radiobuttons-margin-block-start`. Hook:
+`.multiple-radiobuttons-items[data-options-layout]`. Radio visuals are `--input-checkbox-*`
+tokens from `input-checkbox-radio`.
+
+---
+
+## History
+
+**Migrated 2026-09-27** (1/5 → full compliance):
+
+- Each radio's `name` was `${name}-${item.name}`, so grouping (single tab stop, arrow keys,
+  `required` validation) only worked when every data item repeated the same `name`. It's now
+  the group `name` prop for every radio. Native form submissions see `name` instead of the old
+  doubled value (e.g. `enquiryType` rather than `enquiryType-enquiryType`).
+- Removed props that were never read: `label` (was required), `placeholder`, `multipleOptions`,
+  `equalCols`, `displayAsLozenge`. Consumers still passing `label` should drop it.
+- `options-layout` moved from a bare class (`.inline`/`.block`/`.equal-widths`, collision-prone)
+  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.

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

@@ -95,8 +95,8 @@ was itself commented out.
 
 ### InputRangeDefault
 
-`InputRangeDefault` (`variants/InputRangeDefault.vue`) composes `InputRangeCore` with `InputLabel`,
-`InputDescription`, and `InputError`, plus optional step-down/step-up buttons (`InputButtonCore`)
+`InputRangeDefault` (`InputRangeDefault.vue`) composes `InputRangeCore` with `InputLabel`,
+`InputDescription`, and `InputError`, plus optional step-down/step-up buttons (`InputButton`)
 wired into the `left`/`right` slots.
 
 **Additional props over InputRangeCore:**
@@ -105,8 +105,8 @@ wired into the `left`/`right` slots.
 |------|------|---------|-------|
 | `:label` | `string` | (required) | Rendered via `InputLabel`. |
 | `:error-message` | `object \| string` | (required) | Rendered via `InputError` when `field-has-error` is true. |
-| `:step-down-label` | `string` | `"Step down"` | `button-text` on the step-down `InputButtonCore` — override for localisation. |
-| `:step-up-label` | `string` | `"Step up"` | `button-text` on the step-up `InputButtonCore` — override for localisation. |
+| `:step-down-label` | `string` | `"Step down"` | `button-text` on the step-down `InputButton` — override for localisation. |
+| `:step-up-label` | `string` | `"Step up"` | `button-text` on the step-up `InputButton` — override for localisation. |
 
 **Slots**: `descriptionHtml`, `descriptionText` (both forwarded to `InputDescription`), plus
 `left`/`right`/`markers`/`datalist` (forwarded straight through to the underlying

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

@@ -116,7 +116,7 @@ score-2/5 state (no tests, no skill doc, no snippet).
 
 ### InputSelectWithLabel
 
-`InputSelectWithLabel` (`variants/InputSelectWithLabel.vue`) composes `InputSelectCore` with
+`InputSelectWithLabel` (`InputSelectWithLabel.vue`) composes `InputSelectCore` with
 `InputLabel`, `InputDescription` (positioned before or after the field depending on
 `inputVariant === "outlined"`, matching `InputTextWithLabel`'s exact placement rule), and
 `InputError`.

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

@@ -36,7 +36,7 @@ Most consumers should reach for one of the **Variants** rather than `InputTextCo
 
 | Model             | Type      | Notes                                                     |
 | ----------------- | --------- | ---------------------------------------------------------- |
-| `v-model`          | `string`  | The input value.                                            |
+| `v-model`          | `string`  | The input value. **Required** (`defineModel({ required: true })`, 2026-09-25), same for `InputTextWithLabel` and `InputPasswordWithLabel`. |
 | `v-model:is-dirty` | `boolean` | Set to `true` once the wrapper variant detects a non-empty value at mount or on change. |
 | `v-model:is-active`| `boolean` | Tracks focus state (`focusin`/`focusout`).                   |
 
@@ -46,7 +46,7 @@ Most consumers should reach for one of the **Variants** rather than `InputTextCo
 
 | Slot    | Notes                                                                 |
 | ------- | ---------------------------------------------------------------------- |
-| `left`  | Rendered before the input, inside the bordered wrapper (e.g. an icon or `InputButtonCore variant="inline"`). |
+| `left`  | Rendered before the input, inside the bordered wrapper (e.g. an icon or `InputButton variant="inline"`). |
 | `right` | Rendered after the input, inside the bordered wrapper.                 |
 
 ---
@@ -89,7 +89,7 @@ constraint is a UX affordance, not a substitute for validating the submitted val
 
 ## Variants
 
-The `variants/` folder composes `InputTextCore` with `InputLabel`, `InputDescription`, and
+Three sibling wrappers compose `InputTextCore` with `InputLabel`, `InputDescription`, and
 `InputError` for the common "labelled field" case. Each forwards `min`/`max` straight through if
 you pass them.
 
@@ -119,7 +119,7 @@ Slots: `left`, `right`, `descriptionHtml`, `descriptionText`.
 
 ### InputPasswordWithLabel
 
-Adds a show/hide toggle button (`InputButtonCore variant="inline"` in the `right` slot) that swaps
+Adds a show/hide toggle button (`InputButton variant="inline"` in the `right` slot) that swaps
 `type` between `"password"` and `"text"`.
 
 ```vue
@@ -140,7 +140,7 @@ here for a non-English consumer app; there is no built-in i18n framework depende
 
 ### InputTextAsNumberWithLabel
 
-A numeric stepper: left/right `InputButtonCore variant="inline"` buttons decrement/increment the
+A numeric stepper: left/right `InputButton variant="inline"` buttons decrement/increment the
 value by `step`, disabled once `min`/`max` is reached.
 
 ```vue
@@ -159,6 +159,8 @@ value by `step`, disabled once `min`/`max` is reached.
 </InputTextAsNumberWithLabel>
 ```
 
+`v-model` is `number | undefined` (`defineModel({ default: undefined })`): clearing the field sets it to `undefined`, so bind a `ref<number | undefined>` rather than assuming a number.
+
 Extra props: `min: number` (required), `max: number` (required), `step?: number` (default `1`),
 `stepDownText`/`stepUpText` (default `"Step down"`/`"Step up"`) — the decrement/increment buttons'
 accessible names. Requires `left`/`right` slot content for the step icons (no default icon).
@@ -190,7 +192,7 @@ the prop of that exact name, never a same-named local composable output.
 - Focus is tracked via native `focusin`/`focusout`, not a custom keyboard handler — `:focus-visible`
   styling is preserved.
 - The password/number variants give their icon-only toggle/step buttons a real accessible name via
-  `InputButtonCore`'s `buttonText` (visually hidden via `.sr-only` when an icon-only slot is used).
+  `InputButton`'s `buttonText` (visually hidden via `.sr-only` when an icon-only slot is used).
 
 ---
 

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`/`InputNumberCore` — see `project_ledger_eslint_issues_column` in memory).
+  `InputRangeCore`/`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 `InputNumberCore`/`InputRangeCore`, these slots have no built-in `InputButtonCore`
+Unlike `InputNumber`/`InputRangeCore`, 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.
 
@@ -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`/`InputNumberCore` (see the v-model
+  with `{ required: true }`, same pattern as `InputRangeCore`/`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
@@ -119,7 +119,7 @@ score-1/5 state (no public tokens, no CONSUMER-STYLING.md, no tests, no skill do
 
 ### InputTextareaWithLabel
 
-`InputTextareaWithLabel` (`variants/InputTextareaWithLabel.vue`) composes `InputTextareaCore` with
+`InputTextareaWithLabel` (`InputTextareaWithLabel.vue`) composes `InputTextareaCore` with
 `InputLabel`, `InputDescription` (positioned before or after the field depending on
 `inputVariant === "outlined"`, matching `InputTextWithLabel`'s exact placement rule), and
 `InputError`.

package/.claude/skills/components/layout-grid-by-cols.md

@@ -2,7 +2,9 @@
 
 ## Overview
 
-`LayoutGridByCols` is a CSS grid layout wrapper that arranges content into a fixed number of equal-width columns. It uses **named dynamic slots** — the component renders whatever slots the consumer passes, in the order they appear. It collapses to a single column below a configurable breakpoint.
+`LayoutGridByCols` is a CSS grid layout wrapper that arranges content into a fixed number of equal-width columns. It uses **named dynamic slots** — the component renders whatever slots the consumer passes, in the order they appear. It collapses to a single column when the grid is narrower than a configurable threshold.
+
+For columns that auto-fit by a minimum width instead of a fixed count, use `AutoGrid`.
 
 ---
 
@@ -34,13 +36,15 @@ When filling from a data array, use a dynamic slot name in a `v-for`:
 
 > **Hyphenation rule**: Vue's ESLint config enforces `vue/attribute-hyphenation`. Always write camelCase prop names hyphenated in templates: `:column-count`, `:single-col-below`, `:style-class-passthrough`.
 
+The three layout props have **no default**. When passed, each writes its public token inline on the root (so it beats CSS). When omitted, the token comes from CSS, falling back to the default shown.
+
 | Prop (template form) | Type | Default | Notes |
 |------|------|---------|-------|
-| `:column-count` | `2 \| 3 \| 4 \| 5 \| 6` | `2` | Number of equal-width columns above `single-col-below`. Minimum is 2. |
-| `:gap` | `string` | `"1rem"` | Any valid CSS length or shorthand. |
-| `:single-col-below` | `string` | `"768px"` | Container width below which the grid collapses to a single column. |
+| `:column-count` | `2 \| 3 \| 4 \| 5 \| 6` | unset (CSS `2`) | Equal columns above the threshold. Clamped to a minimum of 2. Writes `--layout-grid-by-cols-column-count`. |
+| `gap` | `string` | unset (CSS `1rem`) | Row and column gap, a **single** CSS length. Writes `--layout-grid-by-cols-gap`. |
+| `single-col-below` | `string` | unset (CSS `768px`) | Grid width below which it becomes one column. `"0px"` never collapses. Writes `--layout-grid-by-cols-single-col-below`. |
 | `tag` | `"div" \| "section"` | `"div"` | Use `"section"` for semantic page regions. |
-| `label` | `string` | `""` | Required when `tag="section"` — rendered as a visually-hidden `<p>` linked via `aria-labelledby`. |
+| `label` | `string` | `""` | Accessible name when `tag="section"`, rendered as a visually hidden `<p>` linked via `aria-labelledby`. |
 | `:style-class-passthrough` | `string \| string[]` | `[]` | Extra CSS classes on the root element. |
 
 ---
@@ -81,67 +85,51 @@ When filling from a data array, use a dynamic slot name in a `v-for`:
 </LayoutGridByCols>
 ```
 
-### Data-driven with v-for
+### Column count from CSS (responsive)
+
+Leave `column-count` off and set the token:
 
 ```vue
-<LayoutGridByCols :column-count="3">
-  <template v-for="(item, i) in items" #[`item-${i}`] :key="i">
-    <Card :data="item" />
-  </template>
-</LayoutGridByCols>
+<LayoutGridByCols style-class-passthrough="team-grid">...</LayoutGridByCols>
+```
+
+```css
+.team-grid {
+  --layout-grid-by-cols-column-count: 2;
+
+  @media (width >= 1024px) {
+    --layout-grid-by-cols-column-count: 4;
+  }
+}
 ```
 
 ---
 
 ## Accessibility
 
-- When `tag="section"`, the root element automatically receives `aria-labelledby` pointing to a visually-hidden `<p>` with the `label` value.
-- Always provide a meaningful `label` when using `tag="section"`.
+- When `tag="section"` and `label` is set, the root gets `aria-labelledby` pointing to a visually hidden `<p>` with the label.
+- A `section` without a `label` gets no `aria-labelledby` and no hidden text; `useAriaLabelledById` logs a dev console warning. Always pass a meaningful `label` with `tag="section"`.
 - When `tag="div"`, no label or ARIA attributes are added.
 
 ---
 
 ## Responsive behaviour
 
-Uses **CSS container queries** (`container-type: inline-size`) — responds to its own container width, not the viewport.
+The collapse compares the **grid's own width** (not the viewport) with the threshold, like a container query, but without one: it's a `repeat(auto-fill, minmax(...))` calculation, which is what lets the threshold be a CSS token. See `CONSUMER-STYLING.md` for the sizing model and full token list.
 
-- **Below `singleColBelow`**: single-column stacked layout.
-- **At or above `singleColBelow`**: `columnCount`-column grid.
+- **Narrower than `singleColBelow`**: single column.
+- **At or wider**: `columnCount` equal columns.
 
 ---
 
-## Local style override scaffold
-
-When consuming this component, scaffold a style block using `styleClassPassthrough`. Delete the block if unused.
-
-See [component-local-style-override.md](../component-local-style-override.md) for the full pattern.
-
-```vue
-<LayoutGridByCols :style-class-passthrough="['my-grid']" :column-count="3">
-  ...
-</LayoutGridByCols>
-
-<style>
-/* ─── LayoutGridByCols local overrides ─────────────────────────────
-   Colours, borders, geometry only — do not override behaviour.
-   Delete this block if no overrides are needed.
-   ─────────────────────────────────────────────────────────────────── */
-.layout-grid-by-cols {
-  &.my-grid {
-    /* Colours */
-    /* background: var(--brand-surface); */
-  }
-}
-</style>
-```
+## Styling
 
-> **Note:** `gap` and `column-count` are prop-driven — use the props rather than CSS overrides for layout changes.
+Tokens: `--layout-grid-by-cols-column-count`, `-single-col-below`, `-gap`, `-row-gap`, `-column-gap`. Classes: `.layout-grid-by-cols`, `.layout-grid-by-cols-inner`. Full detail in `CONSUMER-STYLING.md` next to the component; overrides follow [component-local-style-override.md](../component-local-style-override.md).
 
 ---
 
 ## Notes
 
 - Auto-imported in Nuxt — no manual import needed.
-- `column-count` is clamped to a minimum of 2 internally.
-- `gap` accepts any CSS value including compound values like `"1rem 2rem"`.
 - Slot names can be anything — semantic or indexed. Document order determines render order.
+- 2026-09-27 migration: `singleColBelow` never worked before (the breakpoint was a hardcoded `768px` container query); it does now. `gap`/`columnCount` moved from `v-bind()` to public tokens, and the layout props lost their defaults (defaults now live in CSS). A `section` without a `label` used to read the placeholder "If tag='section' then a label is required" to screen readers; it now renders nothing and relies on the composable's dev warning. `gap` must be a single length (compound values were claimed before but break the column calculation). Inner class `.layout-grid-inner` → `.layout-grid-by-cols-inner`; root no longer a `layoutGrid` size container. No consumer app used the component at the time.

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

@@ -2,7 +2,7 @@
 
 ## Overview
 
-`LinkText` renders a `NuxtLink` styled as a standalone text link, with optional left and/or right icon slots. Icons are vertically centred with the label text. Intended as a CTA-style link — distinct from `InputButtonCore` (which is a button/link hybrid with button styling).
+`LinkText` renders a `NuxtLink` styled as a standalone text link, with optional left and/or right icon slots. Icons are vertically centred with the label text. Intended as a CTA-style link — distinct from `InputButton` (which is a button/link hybrid with button styling).
 
 ## Props
 
@@ -84,7 +84,7 @@ Key CSS custom properties — define these in your consuming app to control appe
 | Property | Default | Purpose |
 |----------|---------|---------|
 | `--link-text-colour` | `currentColor` | Link text/icon colour |
-| `--link-text-colour-hover` | `currentColor` | Colour on hover/focus |
+| `--link-text-colour-hover` | `--link-text-colour` | Colour on hover/focus (falls back to the resting colour; before 2026-09-27 it fell back to the parent text colour) |
 | `--link-text-gap` | `0.4em` | Gap between icon and label |
 | `--link-text-font-size` | `inherit` | Font size |
 | `--link-text-decoration` | `underline` | Text decoration |