srcdev-nuxt-components 9.6.7 → 9.6.9

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

@@ -0,0 +1,147 @@
+# InputTextarea Component
+
+> **Renamed 2026-10-16**: `InputTextareaCore` → `InputTextarea`, `InputTextareaWithLabel` →
+> `InputTextareaField` (DOM classes `.input-textarea-core` → `.input-textarea`,
+> `.input-textarea-with-label` → `.input-textarea-field`; full class list in
+> CONSUMER-STYLING.md). Skill doc renamed from `input-textarea-core.md`. Consumer apps use the
+> Field's old name; list their edits privately and apply them when each upgrades.
+
+## Overview
+
+`InputTextarea` is the low-level native `<textarea>` primitive for the `05.forms` multi-line text
+family. It renders one native textarea with left/right decorative slots and grows with its
+content (`field-sizing: content`) between a minimum and an optional maximum height. It has no
+label, description or error rendering of its own; that's composed by `InputTextareaField` below.
+
+Most consumers should reach for **InputTextareaField** rather than `InputTextarea` directly.
+
+---
+
+## Props reference
+
+> **Hyphenation rule**: Vue's ESLint config enforces `vue/attribute-hyphenation`. Always write camelCase prop names hyphenated in templates: `:field-has-error`, `:style-class-passthrough`, `:aria-describedby`.
+
+| Prop (template form) | Type | Default | Notes |
+|------|------|---------|-------|
+| `:id` | `string` | (required) | Applied to the native textarea. |
+| `:name` | `string` | (required) | Applied to the native textarea. |
+| `:maxlength` | `number` | `255` | Native `maxlength`. Raise it for free-text messages. |
+| `:placeholder` | `string` | `""` | Native `placeholder`. |
+| `:required` | `boolean` | `false` | Native `required`. |
+| `:readonly` | `boolean` | `false` | Native `readonly`. Added 2026-10-16. |
+| `:autocomplete` | `string` | (unset) | Native `autocomplete` token (e.g. `street-address`). Added 2026-10-16. |
+| `:theme` | `FormUiTheme` | `"default"` | Sets `data-theme` on the wrapper. |
+| `:input-variant` | `InputUiVariant` | `"normal"` | Sets `data-input-variant`. `normal` (bordered box) and `underlined` have CSS; `outlined` doesn't. |
+| `:field-has-error` | `boolean` | `false` | `data-invalid` on the wrapper and `aria-invalid="true"` on the textarea (omitted otherwise). |
+| `:style-class-passthrough` | `string \| string[]` | `[]` | Extra CSS classes on the textarea. Reacts to changes. |
+| `:aria-describedby` | `string` | `""` | Forwarded to the native textarea; omitted when empty. |
+
+### v-models
+
+- `v-model` — `string | number | readonly string[] | null | undefined`, **required**
+  (`defineModel({ required: true })`; `""` is a valid value, "required" means it must be bound).
+- `v-model:is-dirty` — `boolean`. Read only here: `InputTextareaField` sets it the first time the
+  value is non-empty. Reflected as `data-dirty`.
+- `v-model:is-active` — `boolean`. Tracks focus (`focusin`/`focusout`). Reflected as
+  `data-active`.
+
+---
+
+## Slots
+
+| Slot | Notes |
+|------|-------|
+| `left` | Rendered before the textarea in `.input-textarea-slot-left` (decorative, e.g. an icon). Sets `data-has-left-slot`. |
+| `right` | Same, after the textarea, in `.input-textarea-slot-right`. Sets `data-has-right-slot`. |
+
+The slots have no built-in `InputButton` styling, unlike `InputText`'s.
+
+---
+
+## CSS token API
+
+See [CONSUMER-STYLING.md](../../app/components/05.forms/input-textarea/CONSUMER-STYLING.md) for
+the full table with defaults and the state hooks.
+
+**Common tokens:**
+
+- `--input-textarea-surface` — wrapper background
+- `--input-textarea-border` / `-border-hover` / `-border-focus` — border and outline colours
+- `--input-textarea-text-color` / `-placeholder-color` — text colours
+- `--input-textarea-min-height` (default `6lh`) / `-max-height` (default `none`) — growth range
+- `--input-textarea-slot-gap` (default `1.2rem`) — gap between slots and textarea
+- `--input-textarea-slot-align` (default `center`) / `-slot-padding-block` (default `0`) — where
+  the slots sit against a tall textarea; `start` plus
+  `var(--form-textarea-padding-block)` lines an icon up with the first line
+
+**State hooks** (on `.input-textarea-wrapper`): `data-input-variant`, `data-theme`,
+`data-invalid`, `data-dirty`, `data-active`, `data-has-left-slot`, `data-has-right-slot`.
+
+`field-sizing: content` isn't supported in Safari 16 or Firefox; there the textarea keeps its
+minimum height and scrolls. That's degraded, not broken.
+
+---
+
+## Changed 2026-10-16: rename, state hooks, line breaks
+
+- Renamed to the Control/Field convention (note at the top).
+- State classes became data attributes (`.normal`/`.underlined` → `[data-input-variant]`,
+  `.dirty`/`.active`/`.error` → `[data-dirty]`/`[data-active]`/`[data-invalid]`,
+  `.has-left-slot`/`.has-right-slot` → `[data-has-*-slot]`); `.slot.left-slot`/`.right-slot` →
+  `.input-textarea-slot-left`/`-right`. The textarea no longer carries `dirty`/`active` classes.
+- `all: unset` on the textarea also reset the browser's `white-space: pre-wrap`, so it inherited
+  `normal` from the page. It now sets `white-space: pre-wrap` and `overflow-wrap: anywhere`
+  explicitly, and `min-inline-size: 0` so a long unbroken string can't widen the field.
+- `aria-invalid="false"` was rendered on every field without an error; it's now omitted.
+  `aria-describedby=""` likewise.
+- `InputTextareaField` applied its passthrough to both its root and the textarea; now its root
+  only, which is `.input-textarea-field` itself (the unclassed outer `<div>` is gone).
+- The hardcoded `gap: 12px` and `min-height: 6lh` became `--input-textarea-slot-gap` and
+  `--input-textarea-min-height`; `--input-textarea-max-height` is new.
+- Removed an unused `inputField` template ref.
+
+## Fixed 2026-09-22: undefined tokens and dead code
+
+Migrated from a score-1/5 state. Five undefined custom properties (wrapper padding and
+placeholder font) were replaced with the tokens `InputText` uses; public `--input-textarea-*`
+colour tokens were added (pitfall #14); a dead `FormUiTheme` computed, commented-out code and a
+`label` pass-through to the control were removed; `defineModel` got `{ required: true }`; and
+the Field story imported `reactive`, which it used without importing.
+
+---
+
+## Variants
+
+### InputTextareaField
+
+`InputTextareaField` composes `InputTextarea` with `InputLabel`, `InputDescription` (before the
+control, or after the control and error when `inputVariant === "outlined"`) and `InputError`. Ids
+come from `useAriaDescribedById`, so it takes `name`, not `id`. Root `.input-textarea-field`,
+with `data-theme`, `data-input-variant`, `data-invalid`, `data-dirty` and `data-active`.
+
+**Additional props over InputTextarea:**
+
+| 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. |
+| `:style-class-passthrough` | `string \| string[]` | `[]` | Applied to the `.input-textarea-field` root only. |
+
+`maxlength`, `name`, `placeholder`, `required`, `readonly`, `autocomplete`, `field-has-error`,
+`theme` and `input-variant` are forwarded.
+
+**Slots**: `descriptionHtml`, `descriptionText` (forwarded to `InputDescription`), plus
+`left`/`right` (forwarded to `InputTextarea`).
+
+```vue
+<InputTextareaField
+  v-model="message"
+  name="message"
+  label="Message"
+  :maxlength="1000"
+  :error-message="errors.message"
+  :field-has-error="!!errors.message"
+>
+  <template #descriptionText>Please describe your enquiry in detail</template>
+</InputTextareaField>
+```

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

@@ -3,7 +3,7 @@
 ## Overview
 
 `SelectMenu` is a trigger-and-popover component for selecting from a list of options — a custom,
-fully token-styled alternative to a native `<select>` or `InputSelectCore`, built for non-form
+fully token-styled alternative to a native `<select>` or `InputSelect`, built for non-form
 contexts (language switchers, category filters, faceted filter bars, multi-pick treatment lists).
 It reuses the same Popover API + CSS anchor-positioning mechanism as `ActionMenu` (see that skill
 doc), but its items carry a `value`/`label`/optional `icon`, and the whole thing is driven by
@@ -43,7 +43,7 @@ selected value(s). In single-select mode (default) it's the one selected option'
 `undefined` if nothing is selected — a valid, expected state that renders the placeholder. With
 `multiple`, it's an array of selected values (`[]` when nothing is selected). `{ default: undefined }`
 is this repo's fix for the `vue/require-default-prop` false positive on `defineModel`-declared
-props that are legitimately optional — unlike `InputSelectCore`'s `modelValue`, which uses
+props that are legitimately optional — unlike `InputSelect`'s `modelValue`, which uses
 `{ required: true }` because a native form field genuinely can't be meaningfully empty, this model
 is optional by design (see that rule's `defineModel` gap noted in the repo's ledger `eslint_issues`
 docs). For several independent single-select categories, place multiple `SelectMenu` instances
@@ -257,10 +257,10 @@ ellipsis. The `StressTest` story covers this at every canvas width.
 - **Chevron flip** (`scaleY(-1)`, was `rotate(180deg)` until 2026-10-07) keys off the trigger's `aria-expanded` (from the composable's `isOpen`), not
   `:has(...:popover-open)`, so it also works without the Popover API (changed 2026-10-05).
 - **No native `<select>`/`appearance: base-select` involved** — this is a from-scratch popover
-  listbox, not a styled native select, so it doesn't inherit `InputSelectCore`'s WebKit
+  listbox, not a styled native select, so it doesn't inherit `InputSelect`'s WebKit
   `appearance: base-select` constraints.
 - **Not a form field** — `SelectMenu` has no `fieldHasError`/`theme`/`inputVariant` props like the
-  `05.forms` inputs. Use `InputSelectCore` instead for an actual form field that needs validation
+  `05.forms` inputs. Use `InputSelect` instead for an actual form field that needs validation
   state and native `<select>` semantics.
 - **2026-10-08 stress-test pass**: root `max-inline-size: 100%` (a long trigger label overflowed
   narrow containers instead of truncating), popover `--select-menu-popover-max-width` and

package/.claude/skills/components/toggle-switch.md

@@ -0,0 +1,143 @@
+# ToggleSwitch Component
+
+> **Renamed 2026-10-16**: `ToggleSwitchCore` → `ToggleSwitch`, `ToggleSwitchWithLabel` →
+> `ToggleSwitchField`; `ToggleSwitchWithLabelInline` was removed in favour of
+> `layout="inline"` on `ToggleSwitchField`. DOM classes `.toggle-switch-core` → `.toggle-switch`,
+> `.toggle-switch-with-label` → `.toggle-switch-field` (full list in CONSUMER-STYLING.md). Skill
+> doc renamed from `toggle-switch-core.md`. Consumer apps use `ToggleSwitchWithLabel`; list their
+> edits privately and apply them when each upgrades.
+
+## Overview
+
+`ToggleSwitch` is the low-level on/off switch for the `05.forms` toggle family: a visually hidden
+native `<input type="checkbox" role="switch">` (real keyboard and form semantics) plus a
+decorative track and thumb (`aria-hidden`), with optional icon slots inside the thumb. It has no
+label, description or error rendering of its own; that's `ToggleSwitchField` below.
+
+Most consumers should reach for **ToggleSwitchField**.
+
+---
+
+## Props reference
+
+> **Hyphenation rule**: Vue's ESLint config enforces `vue/attribute-hyphenation`. Always write camelCase prop names hyphenated in templates: `:field-has-error`, `:style-class-passthrough`, `:aria-describedby`, `:true-value`, `:false-value`.
+
+| Prop (template form) | Type | Default | Notes |
+|------|------|---------|-------|
+| `:id` | `string` | (required) | Builds the native input's id: `toggle-switch-${id}`. Point your own `<label for>` at that. |
+| `:name` | `string` | (required) | Applied to the native checkbox. |
+| `:required` | `boolean` | `false` | Native `required`. |
+| `:field-has-error` | `boolean` | `false` | `aria-invalid="true"` on the checkbox (omitted otherwise), `data-invalid` on the root, and `data-theme="error"` whatever `theme` says. |
+| `:true-value` / `:false-value` | `string \| number \| boolean` | `true` / `false` | The two values `v-model` toggles between. A model value equal to neither shows as off. |
+| `:style-class-passthrough` | `string \| string[]` | `[]` | Extra classes on the root. Reacts to changes. |
+| `:theme` | `FormUiTheme` | `"default"` | Sets `data-theme` on the root (unless `field-has-error`). |
+| `:round` | `boolean` | `true` | Pill (`100vw` radius) or rounded square (`0.4rem`); `--toggle-switch-border-radius` overrides both. |
+| `:aria-describedby` | `string` | `""` | Forwarded to the checkbox; omitted when empty. |
+
+### v-model
+
+- `v-model` — `string | number | boolean`, **required** (`defineModel({ required: true })`).
+
+### Slots
+
+- `iconOn` / `iconOff` — replace the default `material-symbols:circle-outline` icon shown inside
+  the thumb in each state. Decorative: the whole track is `aria-hidden`.
+
+### Interaction
+
+Clicking the track toggles the value. Clicks that land on the input itself (a label click, Space,
+or a click on the input) are left to `v-model`, so each action toggles exactly once.
+
+---
+
+## CSS token API
+
+See [CONSUMER-STYLING.md](../../app/components/05.forms/toggle-switch/CONSUMER-STYLING.md) for the
+full table with defaults and the state hooks.
+
+**Common tokens:**
+
+- `--toggle-switch-surface` / `-surface-hover` — track background resting/hover
+- `--toggle-switch-border` / `-border-focus` — track border, and the `:focus-visible` outline
+- `--toggle-switch-symbol-surface-off` / `-symbol-surface-on` — thumb background per state
+- `--toggle-switch-border-radius`, `--toggle-switch-track-width` — shape and width overrides
+- `--toggle-switch-field-inline-gap` — space between label and switch in the inline layout
+
+**State hooks** (on `.toggle-switch`): `data-checked`, `data-invalid`, `data-theme`. On
+`.toggle-switch-field`: `data-layout`, `data-invalid`, `data-theme`.
+
+The thumb's slide respects `prefers-reduced-motion`.
+
+---
+
+## Changed 2026-10-16: rename, switch role, inline layout
+
+- Renamed to the Control/Field convention (note at the top). `ToggleSwitchWithLabelInline` was
+  folded into `ToggleSwitchField` as `layout="inline"`, which also gives the inline row
+  description, error and `required` support it never had.
+- The checkbox now has `role="switch"`, so screen readers announce "switch, on/off" rather than
+  a checkbox. The decorative track is `aria-hidden`.
+- `aria-invalid="false"` was rendered on every switch without an error; now omitted.
+- Generic inner classes (`.symbol-wrapper`, `.symbol`, `.symbol-icon`, `.icon-on`/`.icon-off`,
+  state classes `.checked`/`.active`, the unused `.use-default-icons`) became
+  `.toggle-switch-track`, `-thumb`, `-icon`, `-icon-on`/`-icon-off` and `[data-checked]`
+  (pitfall #16). The input got `.toggle-switch-input`; the default icon lost its `.icon` class.
+- The Fields' label passthrough used `input-switch-label`, so the `.toggle-switch-label` rules
+  never matched; the label now gets `.toggle-switch-label`. The inline variant's `nowrap` (dead
+  for the same reason) is gone: long labels wrap.
+- Clicking the input bubbled to the wrapper's click handler as well as updating `v-model`; it
+  happened to land on the right value. The wrapper handler now ignores clicks on the input.
+- Removed a redundant `:checked` binding next to `v-model`, and a duplicate `outline` in the
+  track's transition list.
+- `styleClassPassthrough` reacts to prop changes on both components.
+
+## Fixed 2026-09-23
+
+Migrated from a score-3/5 state: the `round` prop was never declared on the control (added, with
+`--toggle-switch-border-radius`); `fieldHasError` didn't switch `data-theme`; an invalid `for` on
+a `<div>` was removed; `defineModel` got `{ required: true }`; dead `--_transition-duration`
+tokens were removed; `line-height: 0` on the icon holder keeps slotted icons square; story theme
+options were corrected to `FormUiTheme`.
+
+---
+
+## Variants
+
+### ToggleSwitchField
+
+`ToggleSwitchField` composes `ToggleSwitch` with `InputLabel` (no required/optional indicator), an
+optional description (`InputDescription`, class `.toggle-switch-description`) and `InputError`.
+DOM order is label, description, switch, error in both layouts. Root `.toggle-switch-field`.
+
+**Additional props over ToggleSwitch** (it takes no `id`; ids come from `useId()`):
+
+| Prop (template form) | Type | Default | Notes |
+|------|------|---------|-------|
+| `:label` | `string` | (required) | Rendered via `InputLabel` (class `.toggle-switch-label`). |
+| `:layout` | `"stacked" \| "inline"` | `"stacked"` | `stacked`: label, description, switch, error in one column. `inline`: label and switch on one row (a grid, `data-layout="inline"`), description and error below. |
+| `:label-weight` | `LabelWeight` | bold when stacked, normal when inline | `body-normal` / `body-normal-semibold` / `body-normal-bold` class on the label. |
+| `:error-message` | `object \| string` | `""` | Rendered via `InputError` when `field-has-error` is true. |
+| `:style-class-passthrough` | `string \| string[]` | `[]` | Applied to the root only. |
+
+`name`, `required`, `field-has-error`, `true-value`, `false-value`, `theme` and `round` are
+forwarded. The root's `data-theme` switches to `error` with `field-has-error`, like the control's.
+
+**Slots**: `descriptionText` / `descriptionHtml` (via `InputDescription`), `iconOn`, `iconOff`.
+The switch's `aria-describedby` lists the description id when a description slot is filled and the
+error id when `field-has-error` is true.
+
+```vue
+<ToggleSwitchField
+  v-model="notificationsEnabled"
+  name="notifications"
+  label="Enable notifications"
+  :error-message="errors.notifications"
+  :field-has-error="!!errors.notifications"
+>
+  <template #descriptionText>Sends at most one email a week.</template>
+</ToggleSwitchField>
+
+<ToggleSwitchField v-model="darkMode" name="darkMode" label="Dark mode" layout="inline" />
+```
+
+The `description` slot was removed on 2026-09-29; use `descriptionText` or `descriptionHtml`.

package/.claude/skills/composable-zod-validation.md

@@ -68,7 +68,7 @@ Pass `formRef` to the `<form>` and bind `formErrors` to each field's `error-mess
 
 ```vue
 <form ref="formRef" @submit.stop.prevent="submitForm()">
-  <InputTextWithLabel
+  <InputTextField
     id="fullName"
     v-model="state.fullName"
     name="fullName"

package/.claude/skills/icon-sets.md

@@ -25,7 +25,7 @@ The layer's `modules/icon-sets.ts` runs at dev/build time and logs an info messa
 | `lucide` | `@iconify-json/lucide` | ActionMenu, InputCopy, PopOver, SelectMenu |
 | `material-symbols` | `@iconify-json/material-symbols` | form components |
 | `mdi` | `@iconify-json/mdi` | Form components, ServicesCard |
-| `radix-icons` | `@iconify-json/radix-icons` | InputPasswordWithLabel, InputError, DisplayThemeSwitch |
+| `radix-icons` | `@iconify-json/radix-icons` | InputPasswordField, InputError, DisplayThemeSwitch |
 
 ## Fix: install missing packages
 

package/.claude/skills/icon-sizing.md

@@ -48,7 +48,7 @@ beat every layered one regardless of specificity, so any `width`/`height` in `@l
 on an icon showed struck through in DevTools and did nothing, and the rule was "use `font-size`".
 When the layer was added, the `width`/`height` declarations written against icons at the time
 (CanvasSwitcher, DisplayTooltip, PopOver, InputCopy, SelectMenu, CarouselFlip, ResponsiveHeader,
-ServiceDetail, InputSelectCore) started applying for the first time. If an icon in one of those
+ServiceDetail, InputSelect) started applying for the first time. If an icon in one of those
 looks a different size than it used to, that's the cause.
 
 ## Related notes

package/.claude/skills/index.md

@@ -126,7 +126,7 @@ Each skill is a single markdown file named `<area>-<task>.md`.
     ├── display-theme-switch.md — DisplayThemeSwitch: system/light/dark picker wrapping TripleToggleSwitch, wired to useSettingsStore, labels/icons props, small sizing variant
     ├── card-core.md            — CardCore: generic card container, dynamic named slots as rows, 4 variants, blurred backdrop layer, full CSS token API
     ├── action-menu.md          — ActionMenu + ActionMenuItem: ellipsis trigger + anchored popover menu, indexed item-{n} slots, link/button items, full CSS token API
-    ├── select-menu.md          — SelectMenu: v-model single-select listbox popover (ActionMenu's popover mechanics, InputSelectCore's selected-option semantics), icon/text/chevron trigger toggles, checkmark on selected option, options-array driven, full CSS token API
+    ├── select-menu.md          — SelectMenu: v-model single-select listbox popover (ActionMenu's popover mechanics, InputSelect's selected-option semantics), icon/text/chevron trigger toggles, checkmark on selected option, options-array driven, full CSS token API
     ├── display-dialog.md       — DisplayDialog: native <dialog> overlay, 5 variants (dialog/modal/confirm/alert/fullscreen), useDialogControls integration, CSS token API
     ├── display-chip.md         — DisplayChip: status indicator chip overlay, CSS trig positioning, circle/square shapes, status colours, icon/label content
     ├── display-pill.md         — DisplayPill: pill/badge label with icon slot, 6 variants, 3 sizes, reversible order, --display-pill-* tokens (variants fall back to base colour/border/ring tokens); data-size/data-variant/data-reversed hooks (2026-10-08, were bare classes), label line-clamp token, -02 ring and outlined-monochrome recipes, StressTest story
@@ -145,10 +145,10 @@ Each skill is a single markdown file named `<area>-<task>.md`.
     ├── display-tooltip.md         — DisplayTooltip: anchor-positioned popover trigger, browser support caveat, CSS token API
     ├── display-tooltip-defined.md — DisplayTooltipDefined: structured title/body/action tooltip content with close button, composes DisplayTooltip
     ├── pop-over.md                — PopOver: generic anchor-positioned disclosure panel, consumer-supplied trigger/content slots, placement prop, CSS token API
-    ├── input-text-core.md        — InputTextCore: native text/date/number input primitive, min/max pass-through (date-picker range), CSS token API; Variants section covers InputTextWithLabel/InputPasswordWithLabel/InputTextAsNumberWithLabel
+    ├── input-text.md            — InputText (bare control), InputTextField, InputPasswordField, InputTextAsNumberField: renamed from Core/WithLabel, data-* state hooks, readonly/autocomplete props, leak-free digit filtering, wrapper attr-leak/empty-description/passthrough fixes, rounded+clamped stepping, min/max pass-through, CSS token API, stress stories
     ├── input-button.md           — InputButton (renamed from InputButtonCore 2026-09-28): button/NuxtLink/a, variants, icon slots, readonly (aria-disabled, activation blocked), tokens
-    ├── input-range-core.md       — InputRangeCore: native range-slider primitive, markers/datalist slots, dead --theme-form-range-accent-color token fixed, CSS token API; Variants section covers InputRangeDefault
-    ├── input-number.md           — InputNumber: native number-input primitive, left/right step-button slots, missing base class/placeholder/mismatched slot-selector bugs fixed, CSS token API; Variants section covers InputNumberField
+    ├── input-range.md            — InputRange: native range-slider primitive, markers/datalist slots, dead --theme-form-range-accent-color token fixed, CSS token API; Variants section covers InputRangeField; renamed from InputRangeCore/InputRangeDefault 2026-10-16, clamped stepping, useId datalist id, data-* hooks
+    ├── input-number.md           — InputNumber: native number-input primitive, left/right step-button slots, missing base class/placeholder/mismatched slot-selector bugs fixed, CSS token API; Variants section covers InputNumberField; clamped, rounded stepping, data-* state hooks, min/step-aware inputmode
     ├── input-otp.md              — InputOtp: one-time-code digit boxes (paste/autofill spreading, Backspace/arrow/Home/End nav, Enter submits, leading zeros kept, complete event, hidden input); Variants section covers InputOtpField
     ├── form-field.md             — FormField: layout wrapper for one form control (width cap, gutter, field spacing), data-width/data-has-gutter/data-invalid hooks, dead .underline rule removed, CSS token API
     ├── form-fieldset.md          — FormFieldset: shared fieldset+legend for checkbox/radio groups, groupRole prop (hardcoded radiogroup bug fixed), aria-required only on radiogroup, dead description slot removed, legend token API
@@ -157,12 +157,12 @@ Each skill is a single markdown file named `<area>-<task>.md`.
     ├── input-label.md            — InputLabel: the <label> every labelled *Field wrapper renders (textLabel/htmlLabel slots), id is the control's id rendered as for, required/optional indicator (app.config srcdev.inputLabel, text or icon), dead name/theme props and fallthrough :for removed, data-input-variant/data-invalid hooks, CSS token API
     ├── form-wrapper.md           — FormWrapper: width-capped outer container for a whole form, data-width hook, named inline-size container, not centred by default (--form-wrapper-margin-inline), CSS token API
     ├── pending-effect.md         — PendingEffect: animated dashed border InputButton draws while is-pending (has-pending-effect), tokens renamed to --pending-effect-* and read at point of use, animation moved off the host button, aria-hidden
-    ├── input-textarea-core.md    — InputTextareaCore: native textarea primitive, left/right decorative slots, undefined-token/dead-code/label-leak bugs fixed, CSS token API; Variants section covers InputTextareaWithLabel
-    ├── input-select-core.md      — InputSelectCore: native select primitive, data-driven options with icon decorator, dead required/styleClassPassthrough/isDirty-isActive functionality fixed, appearance:base-select browser-support note, CSS token API; Variants section covers InputSelectWithLabel
-    ├── input-checkbox-radio.md   — InputCheckboxRadio (bare control), InputCheckboxRadioField (labelled), InputCheckboxRadioButton (button/pill option): renamed from Core/WithLabel, state classes → data-* hooks, type-switch v-model fix, no aria-checked, icon font-size sizing, button spacing tokens
-    ├── input-checkbox.md         — MultipleCheckboxes/SingleCheckbox: fieldset-wrapped checkbox group (data-driven, button or labelled) and single checkbox, per-box native-required/styleClassPassthrough/data-testid bugs fixed, spacing token API
-    ├── input-radio.md            — MultipleRadiobuttons: fieldset radiogroup (data-driven, button or labelled), shared-name grouping bug fixed, dead label/placeholder/equalCols props removed, data-options-layout hook, spacing token API
-    ├── toggle-switch-core.md      — ToggleSwitchCore: pill/square checkbox-backed toggle primitive, dead round-prop/data-theme-error functionality and story theme-options bugs fixed, CSS token API; Variants section covers ToggleSwitchWithLabel (descriptionText/descriptionHtml via InputDescription, `description` slot removed 2026-09-29)/ToggleSwitchWithLabelInline
+    ├── input-textarea.md        — InputTextarea (bare control), InputTextareaField (labelled): renamed from Core/WithLabel, data-* state hooks, line breaks kept (all:unset pre-wrap fix), readonly/autocomplete props, min/max-height + slot-gap tokens, aria-invalid=false fix, Field passthrough on root only, CSS token API, stress stories
+    ├── input-select.md          — InputSelect (bare control), InputSelectField (labelled): renamed from Core/WithLabel, data-input-variant/data-invalid/data-dirty/data-active hooks, data-driven options with icon decorator, placeholder-vs-0 fix, Field passthrough on root only, appearance:base-select browser-support note, CSS token API, stress stories
+    ├── input-checkbox-radio.md   — InputCheckboxRadio (bare control), InputCheckboxRadioField (labelled), InputCheckboxRadioButton (button/pill option): renamed from Core/WithLabel, state classes → data-* hooks, type-switch v-model fix, no aria-checked, icon font-size sizing, button spacing tokens, long labels wrap (inline nowrap removed), optional useId button id
+    ├── input-checkbox.md         — MultipleCheckboxes/SingleCheckbox: fieldset-wrapped checkbox group (data-driven, button or labelled) and single checkbox, per-box native-required/styleClassPassthrough/data-testid bugs fixed, spacing token API, wraps hostile content (fieldset min-inline-size, useId option ids)
+    ├── input-radio.md            — MultipleRadiobuttons: fieldset radiogroup (data-driven, button or labelled), shared-name grouping bug fixed, dead label/placeholder/equalCols props removed, data-options-layout hook, spacing token API, useId button ids, wraps hostile content
+    ├── toggle-switch.md         — ToggleSwitch (bare control), ToggleSwitchField (labelled, layout="stacked"|"inline", replaces ToggleSwitchWithLabelInline): renamed from Core/WithLabel, role="switch", prefixed inner classes + data-checked, single-toggle click handling, reduced motion, round prop + border-radius token, track width from geometry, CSS token API, stress stories
     ├── triple-toggle-switch.md    — TripleToggleSwitch (renamed from TripleToggleSwitchCore): three-option icon radio pill with sliding marker, radiogroup + ariaLabel, system/light/dark marker-gradient tokens, reduced-motion, CSS token API
     ├── entry-animation.md         — EntryAnimation: scroll-driven entry animation wrapper (slide-in/zoom-reveal/exit-blur utility classes), skipAnimation for above-the-fold loop items, reduced-motion handled at the CSS layer
     ├── column-flow-grid.md        — ColumnFlowGrid (renamed from MasonryGrid): CSS multi-column text-flow layout, named dynamic slots (no count/data prop), itemMinWidth/gap/unit sizing, CSS token API; not a true masonry, see "which one do I want?"

package/.claude/skills/storybook-add-story.md

@@ -181,7 +181,7 @@ Playwright `STORY_BASE` slug. The slug is derived by lowercasing and replacing s
 | Title                                         | STORY_BASE slug                             |
 | --------------------------------------------- | ------------------------------------------- |
 | `"Atoms/Text Blocks/HeroText"`                | `atoms-text-blocks-herotext`                |
-| `"Components/Forms/Input Text/InputTextCore"` | `components-forms-input-text-inputtextcore` |
+| `"Components/Forms/Input Text/InputText"`     | `components-forms-input-text-inputtext`     |
 
 ## argTypes control types
 

package/.claude/skills/testing-add-unit-test.md

@@ -321,6 +321,23 @@ it("passes myProp to ChildComponent", async () => {
 
 Import the child component directly in the test file — it is not auto-imported there.
 
+## Testing `useId()` uniqueness across instances
+
+Each `mountSuspended` call is its own Nuxt app, so `useId()` restarts its counter and two separately
+mounted instances get the **same** ids. That's a test artefact, not a bug. To prove two instances
+don't collide, render both inside one host component (`MultipleCheckboxes.spec.ts`):
+
+```ts
+const Host = defineComponent({
+  components: { ComponentUnderTest },
+  setup: () => ({ props: initialPropsData }),
+  template: `<div><ComponentUnderTest v-bind="props" /><ComponentUnderTest v-bind="props" /></div>`,
+});
+const host = await mountSuspended(Host);
+const ids = host.findAll("input").map((input) => input.attributes("id"));
+expect(new Set(ids).size).toBe(ids.length);
+```
+
 ## Mocking browser APIs
 
 ### Global constructors (ResizeObserver, IntersectionObserver, etc.)

package/.claude/skills/theming-component-token-pattern.md

@@ -25,7 +25,7 @@ overrides (2026-08-25):
    signalled that to the consumer — the app's declaration became permanently dead, silently. A
    `var()` with an undefined custom property and no fallback just resolves to the property's
    initial value; there is no error, no warning, ever.
-2. **Tokens that were "shared" only by accident.** `InputTextCore`, `InputSelectCore`,
+2. **Tokens that were "shared" only by accident.** `InputText`, `InputSelect`,
    `InputNumber` and the checkbox button all read the exact same `--theme-input-surface`, so a
    consumer wanting to restyle just text inputs had no way to do that without also restyling every
    other input type. The private `--_input-text-surface: var(--theme-input-surface);` indirection
@@ -208,27 +208,27 @@ consuming app having declared anything.
   Pure token-rename pass, no visual/default changes (unlike `InputButton`'s redesign above).
   Added Storybook stories for both (`InputCheckboxRadio`, `InputCheckboxRadioButton`) —
   neither had one before.
-- ✅ `InputTextCore`, `InputSelectCore`, `InputNumber` — migrated 2026-08-25, see their
-  `CONSUMER-STYLING.md`. `InputTextCore`/`InputSelectCore` also had this exact problem's original
+- ✅ `InputText`, `InputSelect`, `InputNumber` — migrated 2026-08-25, see their
+  `CONSUMER-STYLING.md`. `InputText`/`InputSelect` also had this exact problem's original
   form: a private `--_input-text-*`/`--_input-select-*` naming scheme documented as a second
   "local override path" alongside the global tokens, added 2026-08-22 (three days before this
   pattern was formalised) as a workaround for a global-override-not-landing report that was never
   root-caused. That private-var-as-override-point shape is exactly what this pattern replaces —
   renamed public with real fallbacks, old two-path docs removed. `InputNumber` had no
   component-scoped tokens at all before this (bare `--theme-input-*` throughout). Added a
-  Storybook story for `InputSelectCore` (didn't have one); `InputNumber` still doesn't.
-  `InputTextCore`/`InputSelectCore`'s `.normal` variant also had hover and `:focus-visible` share
+  Storybook story for `InputSelect` (didn't have one); `InputNumber` still doesn't.
+  `InputText`/`InputSelect`'s `.normal` variant also had hover and `:focus-visible` share
   one token (literally the same rule content duplicated under two selectors) — split into
   `--input-text-border-hover`/`--input-select-border-hover` alongside the existing `-border-focus`
   pair, both still defaulting to `--theme-border-focus` so default rendering is unchanged, but
   mouse and assistive-tech interaction can now be themed independently. `InputNumber` has no
   hover state on its border at all (only a `:focus-visible` box-shadow toggle), so there was
   nothing to split there.
-- ✅ `ToggleSwitchCore`, `TripleToggleSwitch`, `DisplayThemeSwitch` — migrated 2026-08-25, see
+- ✅ `ToggleSwitch`, `TripleToggleSwitch`, `DisplayThemeSwitch` — migrated 2026-08-25, see
   the first two's `CONSUMER-STYLING.md`. Correction to the two lines this replaces: they claimed
-  `ToggleSwitchCore` read a bare `--theme-toggle-symbol-color-*` — that token doesn't exist
+  `ToggleSwitch` read a bare `--theme-toggle-symbol-color-*` — that token doesn't exist
   anywhere in this codebase and never did; false memory from conflating it with the checkbox
-  fix. `ToggleSwitchCore` itself turned out to be a plain Tier 2 case (real, live tokens, just no
+  fix. `ToggleSwitch` itself turned out to be a plain Tier 2 case (real, live tokens, just no
   component-scoped override point) plus five confirmed-dead private locals (declared, never read
   anywhere in the file) removed outright. The real dead-token bug was in `TripleToggleSwitch`
   (and duplicated in `DisplayThemeSwitch`'s own override): `--theme-form-radio-border`,

package/.claude/skills/theming-form-geometry-tokens.md

@@ -51,7 +51,7 @@ From `00.element-defaults.css` through `09.animation-motion.css`:
 
 `00.element-defaults.css` is the one exception — it's not tokens, it's a real selector-based rule
 (browser autofill background/text-colour reset via `input:autofill` etc.). It reads
-`var(--theme-surface)` and the component-private `--_input-text-core-color`, so changing
+`var(--theme-surface)` and the component-private `--_input-text-color`, so changing
 `--theme-surface` (per `theming-partial-override.md`) changes autofill colours too — no separate
 override needed there. If you need to change that rule's *behaviour* itself (not just its colour
 inputs), you'd need a competing unlayered selector of your own targeting the same pseudo-classes,

package/.vscode/srcdev-component-input-checkbox-radio.code-snippets

@@ -30,7 +30,6 @@
     "body": [
       "<InputCheckboxRadioButton",
       "  v-for=\"option in ${1:options}\"",
-      "  :id=\"`${2:name}-\\${option.value}`\"",
       "  :key=\"option.value\"",
       "  v-model=\"${3:state.value}\"",
       "  type=\"${4|checkbox,radio|}\"",

package/.vscode/srcdev-component-input-range.code-snippets

@@ -1,9 +1,9 @@
 {
-  "SRCDEV InputRangeCore Basic": {
-    "description": "Basic InputRangeCore native range input (no label/error wrapper)",
+  "SRCDEV InputRange Basic": {
+    "description": "Basic InputRange native range input (no label/error wrapper)",
     "scope": "vue,html",
     "body": [
-      "<InputRangeCore",
+      "<InputRange",
       "  id=\"$1fieldId\"",
       "  name=\"$2fieldName\"",
       "  v-model=\"$3fieldValue\"",
@@ -13,11 +13,11 @@
       "/>"
     ]
   },
-  "SRCDEV InputRangeCore With Markers": {
-    "description": "InputRangeCore with custom tick-mark markers overlaid on the track",
+  "SRCDEV InputRange With Markers": {
+    "description": "InputRange with custom tick-mark markers overlaid on the track",
     "scope": "vue,html",
     "body": [
-      "<InputRangeCore",
+      "<InputRange",
       "  id=\"$1fieldId\"",
       "  name=\"$2fieldName\"",
       "  v-model=\"$3fieldValue\"",
@@ -27,19 +27,39 @@
       ">",
       "  <template #markers>",
       "    <div class=\"input-range-markers\">",
-      "      <div class=\"marker\"><span class=\"marker-icon\">$7\\ud83d\\ude00</span></div>",
-      "      <div class=\"marker\"><span class=\"marker-icon\">$8\\ud83d\\ude10</span></div>",
-      "      <div class=\"marker\"><span class=\"marker-icon\">$9\\ud83d\\ude1e</span></div>",
+      "      <div class=\"input-range-marker\"><span class=\"input-range-marker-icon\">$7\\ud83d\\ude00</span></div>",
+      "      <div class=\"input-range-marker\"><span class=\"input-range-marker-icon\">$8\\ud83d\\ude10</span></div>",
+      "      <div class=\"input-range-marker\"><span class=\"input-range-marker-icon\">$9\\ud83d\\ude1e</span></div>",
       "    </div>",
       "  </template>",
-      "</InputRangeCore>"
+      "</InputRange>"
     ]
   },
-  "SRCDEV InputRangeDefault Basic": {
-    "description": "InputRangeDefault: labelled range slider with error/description support",
+  "SRCDEV InputRange With Datalist": {
+    "description": "InputRange with a datalist; the slot passes the generated datalistId",
     "scope": "vue,html",
     "body": [
-      "<InputRangeDefault",
+      "<InputRange",
+      "  id=\"$1fieldId\"",
+      "  name=\"$2fieldName\"",
+      "  v-model=\"$3fieldValue\"",
+      "  :min=\"${4:0}\"",
+      "  :max=\"${5:100}\"",
+      ">",
+      "  <template #datalist=\"{ datalistId }\">",
+      "    <datalist :id=\"datalistId\" class=\"input-range-datalist\">",
+      "      <option value=\"${4:0}\" label=\"${6:Low}\"></option>",
+      "      <option value=\"${5:100}\" label=\"${7:High}\"></option>",
+      "    </datalist>",
+      "  </template>",
+      "</InputRange>"
+    ]
+  },
+  "SRCDEV InputRangeField Basic": {
+    "description": "InputRangeField: labelled range slider with error/description support",
+    "scope": "vue,html",
+    "body": [
+      "<InputRangeField",
       "  v-model=\"$1fieldValue\"",
       "  name=\"$2fieldName\"",
       "  label=\"$3Field label\"",
@@ -51,11 +71,11 @@
       "/>"
     ]
   },
-  "SRCDEV InputRangeDefault With Step Buttons": {
-    "description": "InputRangeDefault with step-down/step-up buttons wired into the left/right slots",
+  "SRCDEV InputRangeField With Step Buttons": {
+    "description": "InputRangeField with step-down/step-up buttons wired into the left/right slots",
     "scope": "vue,html",
     "body": [
-      "<InputRangeDefault",
+      "<InputRangeField",
       "  v-model=\"$1fieldValue\"",
       "  name=\"$2fieldName\"",
       "  label=\"$3Field label\"",
@@ -67,11 +87,11 @@
       ">",
       "  <template #left>\\u2212</template>",
       "  <template #right>+</template>",
-      "</InputRangeDefault>"
+      "</InputRangeField>"
     ]
   },
   "SRCDEV InputRange CSS Override": {
-    "description": "CSS override scaffold for InputRangeCore tokens",
+    "description": "CSS override scaffold for InputRange tokens",
     "scope": "css",
     "body": [
       ".$1my-page {",