srcdev-nuxt-components 9.6.7 → 9.6.9

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

@@ -1,204 +0,0 @@
-# InputTextCore Component
-
-## Overview
-
-`InputTextCore` is the low-level native `<input>` primitive for the `05.forms` text-input family.
-It renders a single styled text-like input with left/right icon slots, focus/dirty state models,
-and numeric-pattern validation for `inputmode="numeric"`. It has no label, description, or error
-message rendering of its own — those are composed by the wrapper variants below.
-
-Most consumers should reach for one of the **Variants** rather than `InputTextCore` directly.
-
----
-
-## Props reference
-
-> **Hyphenation rule**: Vue's ESLint config enforces `vue/attribute-hyphenation`. Always write camelCase prop names hyphenated in templates: `:input-variant`, `:aria-describedby`.
-
-| Prop (template form)       | Type                                                         | Default     | Notes                                                                 |
-| --------------------------- | ------------------------------------------------------------ | ----------- | ---------------------------------------------------------------------- |
-| `:type`                     | `"text" \| "email" \| "password" \| "number" \| "tel" \| "url" \| "date"` | `"text"`    | Native input type.                                                     |
-| `:inputmode`                | `"text" \| "email" \| "tel" \| "url" \| "search" \| "numeric" \| "none" \| "decimal"` | `"text"`    | Sets virtual keyboard hint; `"numeric"` also enables pattern validation. |
-| `:maxlength`                | `number`                                                      | `255`       | Native `maxlength`.                                                   |
-| `:min`                      | `string \| number`                                            | (optional)  | Passed straight through to the native input — e.g. earliest allowed date for `type="date"`, or lowest number for `type="number"`. Use an ISO date string (`"2026-01-01"`) for `type="date"`. |
-| `:max`                      | `string \| number`                                            | (optional)  | Same as `min`, for the upper bound.                                   |
-| `:id`                       | `string`                                                      | (required)  | Applied to the native input.                                          |
-| `:name`                     | `string`                                                      | (required)  | Applied to the native input.                                          |
-| `:required`                 | `boolean`                                                     | `false`     | Native `required`.                                                    |
-| `:placeholder`              | `string`                                                      | `""`        | Native placeholder.                                                   |
-| `:field-has-error`          | `boolean`                                                     | `false`     | Drives `.error` class, `aria-invalid`, and forces `theme` to `"error"`. |
-| `:style-class-passthrough`  | `string \| string[]`                                          | `[]`        | Extra CSS classes applied to the wrapper.                             |
-| `:theme`                    | `FormUiTheme`                                                 | `"default"` | Overridden to `"error"` internally when `fieldHasError` is true.       |
-| `:aria-describedby`         | `string`                                                      | `""`        | Forwarded to the native input.                                        |
-| `:input-variant`            | `"normal" \| "outlined" \| "underlined"`                      | `"normal"`  | Visual style — border box vs. underline.                              |
-
-### v-models
-
-| Model             | Type      | Notes                                                     |
-| ----------------- | --------- | ---------------------------------------------------------- |
-| `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`).                   |
-
----
-
-## Slots
-
-| Slot    | Notes                                                                 |
-| ------- | ---------------------------------------------------------------------- |
-| `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.                 |
-
----
-
-## CSS Token Customization
-
-All `--input-text-*` tokens can be overridden at global, page, or instance scope, each falling back
-to the shared `--theme-*`/`--theme-input-*` tokens every other themed form component also uses. See
-`CONSUMER-STYLING.md` in the component directory for the full token table.
-
-**Common tokens:**
-- `--input-text-surface` — wrapper background
-- `--input-text-border` / `--input-text-border-hover` / `--input-text-border-focus` — border/outline colour
-- `--input-text-color` — input text colour
-- `--input-text-placeholder-color` — placeholder colour
-
----
-
-## Using `min`/`max` for a native date picker
-
-`type="date"` plus `min`/`max` is the standard way to stop the browser's native date picker from
-offering dates outside an allowed range — e.g. preventing a booking date in the past:
-
-```vue
-<InputTextCore
-  id="appointment-date"
-  name="appointmentDate"
-  type="date"
-  v-model="appointmentDate"
-  :min="new Date().toISOString().split('T')[0]"
-  max="2027-12-31"
-/>
-```
-
-`min`/`max` are passed straight through with no validation of their own — the browser enforces the
-range in its native picker/typed-entry UI. Pair with server-side validation; a native `min`/`max`
-constraint is a UX affordance, not a substitute for validating the submitted value.
-
----
-
-## Variants
-
-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.
-
-### InputTextWithLabel
-
-The general-purpose labelled text field — supports every `InputTypesText` value including
-`"date"`.
-
-```vue
-<InputTextWithLabel
-  v-model="appointmentDate"
-  id="appointment-date"
-  name="appointmentDate"
-  type="date"
-  label="Appointment date"
-  :min="new Date().toISOString().split('T')[0]"
-  max="2027-12-31"
-  :error-message="errors.appointmentDate"
-  :field-has-error="!!errors.appointmentDate"
-/>
-```
-
-Props: same `type`/`inputmode`/`maxlength`/`min`/`max`/`name`/`placeholder`/`label`/`errorMessage`/
-`fieldHasError`/`required`/`styleClassPassthrough`/`theme`/`inputVariant` as `InputTextCore`, plus
-`label: string` (required) and `errorMessage: object | string` (required — pass `""` if unused).
-Slots: `left`, `right`, `descriptionHtml`, `descriptionText`.
-
-### InputPasswordWithLabel
-
-Adds a show/hide toggle button (`InputButton variant="inline"` in the `right` slot) that swaps
-`type` between `"password"` and `"text"`.
-
-```vue
-<InputPasswordWithLabel
-  v-model="password"
-  name="password"
-  label="Password"
-  :error-message="errors.password"
-  :field-has-error="!!errors.password"
-  show-password-text="Show password"
-  hide-password-text="Hide password"
-/>
-```
-
-Extra props: `showPasswordText` (default `"Show password"`) and `hidePasswordText` (default
-`"Hide password"`) — the toggle button's accessible name in each state. Pass translated strings
-here for a non-English consumer app; there is no built-in i18n framework dependency.
-
-### InputTextAsNumberWithLabel
-
-A numeric stepper: left/right `InputButton variant="inline"` buttons decrement/increment the
-value by `step`, disabled once `min`/`max` is reached.
-
-```vue
-<InputTextAsNumberWithLabel
-  v-model="quantity"
-  name="quantity"
-  label="Quantity"
-  :min="1"
-  :max="99"
-  :step="1"
-  step-down-text="Decrease quantity"
-  step-up-text="Increase quantity"
->
-  <template #left>−</template>
-  <template #right>+</template>
-</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).
-
-**Fixed 2026-09-22**: `updateElementClasses(["input-text-as-number", "has-left-button",
-"has-right-button"])` computes marker classes onto this component's own `elementClasses`, which is
-bound to the outer `.input-text-with-label` wrapper — but the nested `<InputTextCore>` was passed
-`:style-class-passthrough` as a bare shorthand, which resolves to the raw incoming
-`styleClassPassthrough` **prop**, not the local `elementClasses`. So the marker classes never
-reached the actual `<input>`, the scoped `.input-text-core.input-text-as-number { width:
-fit-content; text-align: center; ... }` CSS never matched anything, and the input silently fell
-back to `InputTextCore`'s default full-width, left-aligned styling instead of the intended
-compact, centered numeric stepper box. Fixed by changing that binding to
-`:style-class-passthrough="elementClasses"` — `elementClasses` still carries any consumer-supplied
-`styleClassPassthrough` too, since the composable seeds it from the prop before the marker classes
-are toggled on top. When a component computes its own marker/state classes via
-`updateElementClasses()` and needs them on a *child* component rather than its own root element,
-always pass the computed `elementClasses` explicitly — the `:x` shorthand only ever resolves to
-the prop of that exact name, never a same-named local composable output.
-
----
-
-## Accessibility
-
-- `field-has-error` sets `aria-invalid="true"` and forces the error theme, independent of what
-  `theme` was passed.
-- `inputmode="numeric"` adds a `pattern="[0-9]+"` and blocks non-numeric `beforeinput` edits that
-  would fail it.
-- 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
-  `InputButton`'s `buttonText` (visually hidden via `.sr-only` when an icon-only slot is used).
-
----
-
-## Notes
-
-- **No built-in label/error rendering**: `InputTextCore` alone renders no `<label>` or error text —
-  use a variant, or compose your own wrapper the same way they do.
-- **`min`/`max` need matching `type`**: they're inert on `type="text"`/`"email"`/etc. — only
-  `"date"` and `"number"` (native range-constrained types) act on them.

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

@@ -1,154 +0,0 @@
-# InputTextareaCore Component
-
-## Overview
-
-`InputTextareaCore` is the low-level native `<textarea>` primitive for the `05.forms` multi-line
-text family. It renders a single native textarea with left/right decorative slots. It has no
-label, description, or error-message rendering of its own — that's composed by the
-`InputTextareaWithLabel` variant below.
-
-Most consumers should reach for **InputTextareaWithLabel** rather than `InputTextareaCore`
-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`. |
-| `:placeholder` | `string` | `""` | Native `placeholder`. |
-| `:required` | `boolean` | `false` | Native `required`. |
-| `:theme` | `FormUiTheme` | `"default"` | Sets `data-theme` on the wrapper. |
-| `: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`. |
-| `:field-has-error` | `boolean` | `false` | Drives `data-invalid` on the wrapper and `aria-invalid` on the textarea. |
-| `:style-class-passthrough` | `string \| string[]` | `[]` | Extra CSS classes applied to the textarea element. |
-| `:aria-describedby` | `string` | `""` | Forwarded to the native textarea. |
-
-### v-models
-
-- `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).
-  "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
-  becomes non-empty (never reset back to `false` by this component).
-- `v-model:is-active` — `boolean`. Tracks native focus/blur (`focusin`/`focusout`), toggling
-  `.active` on the wrapper and textarea.
-
----
-
-## Slots
-
-| Slot | Notes |
-|------|-------|
-| `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`
-divider/embedded-button styling — they're plain decorative content (see the Storybook stories,
-which use emoji), not a stepper control.
-
----
-
-## CSS token API
-
-See [CONSUMER-STYLING.md](../../app/components/05.forms/input-textarea/CONSUMER-STYLING.md) for
-the full table with defaults.
-
-**Common tokens:**
-- `--input-textarea-surface` — wrapper background, falls back to `--theme-input-surface`
-- `--input-textarea-border` / `-border-hover` / `-border-focus` — border colour resting, mouse-hover outline, and `:focus-visible` outline, fall back to `--theme-border`/`--theme-border-focus`
-- `--input-textarea-text-color` — textarea text colour, falls back to `--theme-input-text-color-normal`
-- `--input-textarea-placeholder-color` — placeholder text colour, falls back to `--theme-input-placeholder`
-
----
-
-## Fixed 2026-09-22: undefined tokens and dead code
-
-`InputTextareaCore` migrated to full compliance from a `variants:true`, `eslint_issues:true`,
-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`
-  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
-  codebase**. Per the CSS spec, an undefined `var()` with no fallback makes the whole declaration
-  invalid, so all five silently fell back to the browser/inherited default instead of the intended
-  design. Fixed by switching to the tokens `InputTextCore` actually uses for the same purpose:
-  `--input-padding-inline` for the wrapper padding, and `--theme-input-placeholder-font-size` +
-  hardcoded `italic`/`1`/`normal` for the placeholder (matching `InputTextCore`'s placeholder rule
-  exactly — those three placeholder sub-properties aren't tokenized there either).
-- **Zero public `--input-textarea-*` tokens existed at all** — every colour value read a
-  `--theme-*` global directly, with no component-level override point (the exact gap pitfall #14
-  describes for early `05.forms` components). Added the full set matching `InputTextCore`'s shape:
-  `--input-textarea-surface`, `-border`, `-border-hover`, `-border-focus`, `-text-color`,
-  `-placeholder-color`.
-- **Dead code**: both `InputTextareaCore` and `InputTextareaWithLabel` declared
-  `const FormUiTheme = computed(() => props.fieldHasError ? "error" : props.theme);` — a value
-  binding that shadows the imported `FormUiTheme` *type* import of the same name, and is never
-  referenced anywhere in either file (the template's `:theme` shorthand resolves straight from
-  `defineProps`). Removed both. `InputTextareaWithLabel` also had ~5 lines of commented-out dead
-  code (an old, hand-rolled `id`/`errorId`/`ariaDescribedby` implementation, superseded by
-  `useAriaDescribedById` right below it) — removed. (The identical dead `FormUiTheme` computed
-  still exists in `InputTextCore`/`InputTextWithLabel` themselves — out of scope for this pass
-  since those weren't being touched, but worth cleaning up next time either is migrated.)
-- **`InputTextareaWithLabel` passed `:label` down to `InputTextareaCore`**, which has no `label`
-  prop (matching `InputTextCore`, which doesn't have one either) — it fell through as a
-  meaningless raw `label="..."` HTML attribute on the wrapper `<div>`. Removed the pass-through;
-  `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
-  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
-  `"vue"`. This library's `.ts` Storybook files need Vue reactivity APIs imported explicitly (no
-  Nuxt auto-import outside `.vue` files) — a real runtime `ReferenceError` waiting to happen the
-  first time either story rendered. Fixed by adding `reactive` to the existing `computed` import.
-
----
-
-## Variants
-
-### InputTextareaWithLabel
-
-`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`.
-
-**Additional props over InputTextareaCore:**
-
-| 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. |
-
-**Slots**: `descriptionHtml`, `descriptionText` (both forwarded to `InputDescription`), plus
-`left`/`right` (forwarded straight through to the underlying `InputTextareaCore`).
-
-```vue
-<InputTextareaWithLabel
-  name="message"
-  label="Message"
-  v-model="message"
-  placeholder="How can we help you?"
-  :maxlength="500"
-  :error-message="errors.message"
-  :field-has-error="!!errors.message"
->
-  <template #descriptionText>Please describe your inquiry in detail</template>
-</InputTextareaWithLabel>
-```
-
-`v-model` is `string | number | readonly string[] | null | undefined`, **required** — same as
-`InputTextareaCore` above. `isDirty`/`isActive` are managed internally (not exposed as props) —
-`isDirty` flips to `true` the first time the value becomes a non-empty string (checked on mount
-and on every change), and never resets.

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

@@ -1,169 +0,0 @@
-# ToggleSwitchCore Component
-
-## Overview
-
-`ToggleSwitchCore` is the low-level pill-shaped (or square, via `round`) toggle switch primitive
-for the `05.forms` toggle family. It renders a visually-hidden native `<input type="checkbox">`
-(kept in the DOM for real keyboard/checkbox semantics) plus a styled track/thumb visual, with
-optional icon slots shown inside the thumb for the on/off states. It has no label, description, or
-error-message rendering of its own — that's composed by the `ToggleSwitchWithLabel` and
-`ToggleSwitchWithLabelInline` variants below.
-
-Most consumers should reach for **ToggleSwitchWithLabel** or **ToggleSwitchWithLabelInline** rather
-than `ToggleSwitchCore` 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`, `:true-value`, `:false-value`.
-
-| Prop (template form) | Type | Default | Notes |
-|------|------|---------|-------|
-| `:id` | `string` | (required) | Combined with a fixed prefix to build the native input's `id` (`toggle-switch-${id}`). |
-| `:name` | `string` | (required) | Applied to the native checkbox. |
-| `:required` | `boolean` | `false` | Native `required`. |
-| `:field-has-error` | `boolean` | `false` | Drives `aria-invalid` on the checkbox, and switches `data-theme` to `"error"` regardless of the `theme` prop's own value. |
-| `:true-value` / `:false-value` | `string \| number \| boolean` | `true` / `false` | The two values `v-model` toggles between. |
-| `:style-class-passthrough` | `string \| string[]` | `[]` | Extra CSS classes applied to the root element. |
-| `:theme` | `FormUiTheme` | `"default"` | Sets `data-theme` on the root (superseded by `"error"` when `field-has-error` is true — see above). |
-| `:round` | `boolean` | `true` | `true` renders a pill-shaped track/thumb (`border-radius: 100vw`); `false` renders a rounded-square shape (`border-radius: 0.4rem`). See the `--toggle-switch-border-radius` token in CONSUMER-STYLING.md to override the exact value either state produces. |
-| `:aria-describedby` | `string` | `""` | Forwarded to the native checkbox (omitted when empty). Changed 2026-09-27: it was ignored before, and the checkbox always pointed at `<id>-description` whether or not that element existed, so `ToggleSwitchWithLabel`'s error-message id never reached it. |
-
-### v-model
-
-- `v-model` — `string | number | boolean`, **required** (`defineModel({ required: true })`, satisfying `vue/require-default-prop` — see `project_ledger_eslint_issues_column` in memory).
-
-### Slots
-
-- `iconOn` / `iconOff` — replace the default `material-symbols:circle-outline` icon shown inside the thumb for each state. Providing either slot switches off the `use-default-icons` wrapper class (checked via `useSlots()`, so this only reacts to slot *presence*, not conditional slot content).
-
----
-
-## CSS token API
-
-See [CONSUMER-STYLING.md](../../app/components/05.forms/toggle-switch/CONSUMER-STYLING.md) for the
-full table with defaults.
-
-**Common tokens:**
-- `--toggle-switch-surface` / `-surface-hover` — track background resting/hover, fall back to `--theme-checkbox-symbol-surface`/`--theme-surface-subtle`
-- `--toggle-switch-border` / `-border-focus` — track border colour, and `:focus-visible` outline colour, fall back to `--theme-border`/`--theme-border-focus`
-- `--toggle-switch-symbol-surface-off` / `-symbol-surface-on` — thumb background unchecked/checked
-- `--toggle-switch-border-radius` — track and thumb shape; see the `round` prop above
-
----
-
-## Fixed 2026-09-23: dead functionality and story bugs
-
-`ToggleSwitchCore` (and its two variants) migrated to full compliance from a `variants:true`,
-`eslint_issues:true`, score-3/5 state (no tests, no skill doc).
-
-- **`round` prop was completely dead** — both variants declared and forwarded it to
-  `ToggleSwitchCore`, and Storybook's `SquareShape` story existed specifically to demonstrate
-  `round: false`, but `ToggleSwitchCore` never declared the prop at all, so it silently fell
-  through as an inert `round` DOM attribute on the root `<div>` and the track/thumb stayed pill-shaped
-  regardless. Fixed by adding `round` to `ToggleSwitchCore` and wiring it to a new
-  `--toggle-switch-border-radius` token (100vw when round, 0.4rem when square).
-- **`fieldHasError` didn't switch the component's theme** — `ToggleSwitchCore` and
-  `ToggleSwitchWithLabel` both computed an error-aware theme value but bound `data-theme` to the
-  raw `theme` prop instead of that computed, so this library's `[data-theme="error"]` global
-  token overrides never applied when a consumer set `fieldHasError`. Fixed by binding `data-theme`
-  to the computed value in both files.
-- **An invalid `for` attribute on a `<div>`** (`.toggle-switch-wrapper`) was removed — `for` is
-  only a valid HTML attribute on `<label>`/`<output>`, so it was inert dead markup; the real
-  label association is via `InputLabel`'s own `for`/`id` wiring in the variants.
-- **`defineModel` had no default**, tripping `vue/require-default-prop` (a known false-positive
-  for `defineModel` — see `project_ledger_eslint_issues_column` in memory) — fixed with
-  `{ required: true }` across `ToggleSwitchCore` and both variants, since a checkbox genuinely
-  can't be meaningfully empty.
-- **Two dead, unread `--_transition-duration` private tokens** (one per variant) were removed —
-  nothing in either variant's own CSS or `ToggleSwitchCore`'s ever read them; the actual
-  transition durations are hardcoded `0.4s` literals inside `ToggleSwitchCore`.
-- **Custom `iconOn`/`iconOff` slot content could render as a non-square box, throwing off
-  centering** — `.symbol-icon` is `display: grid; place-content: center;`, and its single
-  auto-sized track shrink-wraps to the slotted content's own box. A plain inline element (e.g. a
-  `<span>` wrapping a 16×16 SVG, as in the `WithCustomIcons` stories) sizes to its line box's
-  leading rather than its intrinsic height, rendering as ~16×20 instead of 16×16. Fixed by adding
-  `line-height: 0` to `.symbol-icon`, which collapses that leading for whatever markup a consumer
-  slots in. The default icon (`@nuxt/icon`'s `Icon` component) wasn't affected, since iconify sets
-  its own sizing/`vertical-align` internally.
-- **All three story files' `theme` control listed the wrong option set**
-  (`["primary", "secondary", "tertiary", "ghost", "error", "success", "warning"]`, none of which
-  match `FormUiTheme`) — fixed to the real `["default", "success", "error", "warning"]`.
-  `ToggleSwitchWithLabelInline.stories.ts`'s `InlineFormExample` story also passed the now-invalid
-  `theme="secondary"` directly — fixed to `"default"`.
-
----
-
-## Variants
-
-### ToggleSwitchWithLabel
-
-`ToggleSwitchWithLabel` (`ToggleSwitchWithLabel.vue`) composes `ToggleSwitchCore` with
-`InputLabel`, an optional description (rendered by `InputDescription`, the same as every other labelled form field), and `InputError`.
-
-**Additional props over ToggleSwitchCore:**
-
-| Prop (template form) | Type | Default | Notes |
-|------|------|---------|-------|
-| `:label` | `string` | (required) | Rendered via `InputLabel`. |
-| `:error-message` | `object \| string` | `""` | Rendered via `InputError` when `field-has-error` is true. |
-
-Note this wrapper passes `id`/`name`/`required`/`field-has-error`/`true-value`/`false-value`/
-`theme`/`round`/`aria-describedby` straight through to `ToggleSwitchCore`; `id` is a self-generated
-`useId()` value, not a prop — consumers don't set it directly.
-
-**Slots**: `descriptionText` / `descriptionHtml` (help text between the label and the switch, via `InputDescription`), `iconOn`, `iconOff` (the latter two forwarded to `ToggleSwitchCore`).
-
-The switch's `aria-describedby` lists the description id when a description slot is present and the error id when `field-has-error` is true, both together when both apply.
-
-```vue
-<ToggleSwitchWithLabel
-  name="notifications"
-  label="Enable notifications"
-  v-model="notificationsEnabled"
-  :error-message="errors.notifications"
-  :field-has-error="!!errors.notifications"
->
-  <template #descriptionText>Turn this on to receive notifications</template>
-</ToggleSwitchWithLabel>
-```
-
-#### Breaking change 2026-09-29: description slot
-
-The `description` slot is removed. Use `descriptionText` (plain text, wrapped in a `<p>`) or
-`descriptionHtml` (rich markup) instead. The old slot rendered into a bare `<div>` with no class,
-spacing or tokens, so its content sat flush against the switch; it now goes through
-`InputDescription` like every other labelled form field, styled by the `--input-description-*`
-tokens (see `input-description` CONSUMER-STYLING.md) and targetable as
-`.toggle-switch-description`. `aria-describedby` also used to drop the description id whenever
-the field had an error; it now lists both.
-
-```vue
-<!-- before -->
-<template #description>Sends at most one email a week.</template>
-<!-- after -->
-<template #descriptionText>Sends at most one email a week.</template>
-```
-
-### ToggleSwitchWithLabelInline
-
-`ToggleSwitchWithLabelInline` (`ToggleSwitchWithLabelInline.vue`) composes
-`ToggleSwitchCore` with `InputLabel` laid out inline (label and switch side by side, no
-description/error-message support — this variant is for compact settings-row usage).
-
-**Additional props over ToggleSwitchCore:**
-
-| Prop (template form) | Type | Default | Notes |
-|------|------|---------|-------|
-| `:label` | `string` | (required) | Rendered via `InputLabel`. |
-| `:label-weight` | `LabelWeight` (`"normal" \| "semi-bold" \| "bold"`) | `"normal"` | Maps to a `body-normal`/`body-normal-semibold`/`body-normal-bold` class on the label. |
-
-This variant has no `required`/`field-has-error`/`error-message` props — it never claimed error-state
-support, unlike `ToggleSwitchWithLabel`.
-
-**Slots**: `iconOn`, `iconOff` (forwarded to `ToggleSwitchCore`).
-
-```vue
-<ToggleSwitchWithLabelInline name="darkMode" label="Dark mode" v-model="darkModeEnabled" />
-```