srcdev-nuxt-components 9.4.9 → 9.4.11

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

@@ -0,0 +1,142 @@
+# InputRangeCore Component
+
+## Overview
+
+`InputRangeCore` is the low-level native `<input type="range">` primitive for the `05.forms`
+range-slider family. It renders a single native range input with left/right button slots (for
+step-down/step-up controls), an optional `markers` slot for custom tick marks overlaid on the
+track, and an optional `datalist` slot for native tick-mark snapping. It has no label,
+description, or error-message rendering of its own — that's composed by the `InputRangeDefault`
+variant below.
+
+Most consumers should reach for **InputRangeDefault** rather than `InputRangeCore` 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 input. |
+| `:name` | `string` | (required) | Applied to the native input, and used to derive the `list` id when the `datalist` slot is used (`${name}-datalist`). |
+| `:min` | `number` | (required) | Native `min`. |
+| `:max` | `number` | (required) | Native `max`. |
+| `:step` | `number` | `1` | Native `step`. |
+| `:required` | `boolean` | `false` | Native `required`. |
+| `:placeholder` | `string` | `""` | Declared but not rendered — range inputs have no placeholder concept. Kept for prop-shape consistency with sibling `05.forms` components. |
+| `:theme` | `FormUiTheme` | `"default"` | Sets `data-theme` on the wrapper. |
+| `:weight` | `FormWeight` | `"normal"` | Adds an `input-range--{weight}` class to the input. **No CSS in the library currently styles this class — it's a no-op today**, kept for prop-shape consistency with sibling components. |
+| `:field-has-error` | `boolean` | `false` | Declared, but doesn't drive any visible state inside `InputRangeCore` itself — `InputRangeDefault` handles the actual error styling (`data-invalid`/`.error` class) on its own wrapper. |
+| `:style-class-passthrough` | `string \| string[]` | `[]` | Extra CSS classes applied to the input element. |
+| `:aria-describedby` | `string` | `""` | Forwarded to the native input. |
+
+### v-model
+
+`v-model` — `number`, **required** (`defineModel<number>({ required: true })`). Bound directly to
+the native range input. Required rather than defaulted deliberately — a real `<input type="range">`
+always has a concrete value (there's no meaningful "empty" range slider), so a default here would
+be an artificial value rather than reflecting actual native behaviour. This also satisfies
+`vue/require-default-prop`, which otherwise flags any `defineModel()` without a default — see
+`project_ledger_eslint_issues_column` in memory for why that's the correct fix (not a rule
+disable, not a fake default).
+
+---
+
+## Slots
+
+| Slot | Notes |
+|------|-------|
+| `left` | Rendered before the track (e.g. a step-down button). |
+| `right` | Rendered after the track (e.g. a step-up button). |
+| `markers` | Rendered as an overlay on top of the track (`grid-area: element-stack`, same cell as the input). Adds a `has-markers` class to the input, which shrinks its visible track to a thin `0.2rem` strip and hides the native thumb, so your marker content becomes the primary visual. Expected shape: a `.input-range-markers` wrapper containing `.marker` elements (each optionally containing a `.marker-icon`) — see the component's own scoped CSS for the classes it pre-styles. |
+| `datalist` | Rendered after the input. Must contain a real `<datalist>` element whose `id` matches `${name}-datalist` for the browser to link it via the input's `list` attribute — the component computes that id string for the `list` attribute itself, but does not set the `id` on your slotted `<datalist>` for you. |
+
+---
+
+## CSS token API
+
+See [CONSUMER-STYLING.md](../../app/components/05.forms/input-range/CONSUMER-STYLING.md) for the
+full table with defaults.
+
+**Common tokens:**
+- `--input-range-accent-colour` — native `accent-color` (track/thumb tint), falls back to `--theme-accent`
+- `--input-range-marker-background-colour` / `-outline-colour` — marker dot styling
+- `--input-range-marker-icon-colour` — falls back to `--input-range-accent-colour`
+
+Thumb/track height and the button-slot's button size come from the shared global geometry token
+`--input-range-button-size` (declared in `03.generic-input-geometry.css`, not owned by this
+component), matching the convention `theming-form-geometry-tokens.md` documents for the rest of
+`05.forms`.
+
+---
+
+## Fixed 2026-09-21: dead `accent-color` token
+
+`accent-color` previously read `--theme-form-range-accent-color`, a custom property that was never
+declared anywhere in the codebase, with no fallback. Per the CSS spec, an undefined `var()` with
+no fallback makes the whole declaration invalid at computed-value time — so `accent-color` was
+silently falling back to the browser's native default (an OS-dependent blue) instead of the
+intended theme colour, in every place it was used (the input itself, its `.has-markers` state, and
+the marker icon colour). This is the same bug class found in `CarouselFlip`'s edge-preview tokens
+around the same time — check any component reaching for a `--theme-*`-prefixed custom property for
+a real declaration of that name before trusting it renders correctly.
+
+Also removed: a broken `::-webkit-slider-thumb` rule (`background-color: 0.1rem solid green` is
+invalid CSS and was silently dropped; `accent-color`/`color` don't apply to that pseudo-element at
+all) and ~60 lines of dead commented-out alternative thumb/track styling — none of it had any
+visible effect, since `appearance: none` (required for custom thumb/track styling to take effect)
+was itself commented out.
+
+---
+
+## Variants
+
+### InputRangeDefault
+
+`InputRangeDefault` (`variants/InputRangeDefault.vue`) composes `InputRangeCore` with `InputLabel`,
+`InputDescription`, and `InputError`, plus optional step-down/step-up buttons (`InputButtonCore`)
+wired into the `left`/`right` slots.
+
+**Additional props over InputRangeCore:**
+
+| 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. |
+
+**Slots**: `descriptionHtml`, `descriptionText` (both forwarded to `InputDescription`), plus
+`left`/`right`/`markers`/`datalist` (forwarded straight through to the underlying
+`InputRangeCore` — the step-down/step-up buttons only render when you use the `left`/`right`
+slots yourself, since the button icon content itself is consumer-supplied via `#iconOnly`).
+
+```vue
+<InputRangeDefault
+  name="priceRange"
+  label="Price range"
+  v-model="price"
+  :min="0"
+  :max="500"
+  :step="10"
+  error-message="Please choose a value within the allowed range"
+  :field-has-error="hasError"
+>
+  <template #left><Icon name="mdi:minus" /></template>
+  <template #right><Icon name="mdi:plus" /></template>
+</InputRangeDefault>
+```
+
+`v-model` is `number`, **required** — same as `InputRangeCore` above.
+
+**Fixed 2026-09-21**: removed a dead `deepCssClassPassthrough` prop (declared, never consumed
+anywhere in the component or referenced elsewhere in the codebase) and a dead `<style>` block
+targeting `.input-range-label`/`.label-description` — classes that nothing in this component (or
+`InputLabel`/`InputDescription`) actually renders, so the block had no effect. Also removed two
+dead commented-out lines (`// const id = useId();`, a duplicate no-op `FormUiTheme` computed), and
+(same day, follow-up pass) a `const props = withDefaults(...)` in both `InputRangeCore` and
+`InputRangeDefault` that had become entirely unused once the dead `FormUiTheme` computed was
+removed — the template's `:id`/`:name`/etc. shorthand bindings resolve straight from `defineProps`
+automatically in `<script setup>`, no destructuring or `props.` reference needed.

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

@@ -0,0 +1,151 @@
+# InputSelectCore Component
+
+## Overview
+
+`InputSelectCore` is the low-level native `<select>` primitive for the `05.forms` select family.
+It renders a native select with a data-driven list of `<option>`s (each optionally decorated with
+an icon), an optional placeholder option, and adopts the modern CSS Customizable Select API
+(`appearance: base-select`) for a fully styleable open-picker state where supported, with a
+graceful CSS fallback (see "Browser support" below). It has no label, description, or
+error-message rendering of its own — that's composed by the `InputSelectWithLabel` variant below.
+
+Most consumers should reach for **InputSelectWithLabel** rather than `InputSelectCore` 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 select. |
+| `:name` | `string` | (required) | Applied to the native select. |
+| `:placeholder` | `string` | `""` | Renders a disabled placeholder `<option>` (selected when `modelValue` is empty). No option rendered at all when unset. |
+| `:title` | `string` | `"Please select an option"` | Native `title` attribute (tooltip). |
+| `: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 select. |
+| `:style-class-passthrough` | `string \| string[]` | `[]` | Extra CSS classes applied to the select element. |
+| `:aria-describedby` | `string` | `""` | Forwarded to the native select. |
+
+### v-models
+
+- `v-model` — `string | number | readonly number[]`, **required** (`defineModel({ required: true })`, satisfying `vue/require-default-prop` — see `project_ledger_eslint_issues_column` in memory).
+- `v-model:field-data` — `IFormMultipleOptions` (`{ data: IOptionsConfig[]; total; skip; limit }`), **required**. The `data` array drives the rendered `<option>`s. The template dereferences `fieldData.data` unconditionally, so a consumer that doesn't bind `v-model:field-data` will crash on render — `required: true` documents that constraint (it's a dev-time warning only, not a runtime guard).
+- `v-model:is-dirty` — `boolean`. Set to `true` on the native `change` event (never reset to `false` by this component).
+- `v-model:is-active` — `boolean`. Tracks native focus/blur (`focusin`/`focusout`), toggling `.active` on the wrapper.
+
+---
+
+## CSS token API
+
+See [CONSUMER-STYLING.md](../../app/components/05.forms/input-select/CONSUMER-STYLING.md) for the
+full table with defaults.
+
+**Common tokens:**
+- `--input-select-surface` / `-surface-hover` — wrapper/select background and option-row hover background, fall back to `--theme-input-surface`/`-surface-hover`
+- `--input-select-border` / `-border-hover` / `-border-focus` — border colour resting, mouse-hover outline, and `:focus-visible` outline (also the open-picker's own border/outline), fall back to `--theme-border`/`--theme-border-focus`
+
+---
+
+## Browser support: `appearance: base-select`
+
+The open-picker styling (`&::picker(select)`, `:open`/`:not(:open)` states, the transition/opacity
+`@starting-style` reveal) relies on the CSS Customizable Select API
+(`appearance: base-select`/`::picker(select)`), a very new feature not yet supported everywhere.
+The component degrades gracefully in non-supporting browsers rather than breaking: `appearance:
+none` is set first (unconditionally), then overridden by `appearance: base-select` only where the
+browser recognizes that value — an unsupported value is simply ignored by the CSS parser, so the
+select falls back to the browser's native (unstyled) dropdown instead of losing functionality.
+Per pitfall #19's general lesson (checking WebKit support specifically for load-bearing use of a
+very new CSS feature, since Chrome's device-emulation mode can't catch a WebKit-only gap): this
+fallback is CSS-only degradation, not a functional break like `ExpandingPanel`'s `::details-content`
+case was, so it's lower risk — but the open-picker's custom border/outline/transition styling
+should still be spot-checked on a real Safari session before treating it as visually final.
+
+---
+
+## Fixed 2026-09-22: dead functionality and prop-shape bugs
+
+`InputSelectCore` migrated to full compliance from a `variants:true`, `eslint_issues:true`,
+score-2/5 state (no tests, no skill doc, no snippet).
+
+- **`required` prop was declared but never bound to the native `<select>`** — native HTML
+  `required` validation was completely inert regardless of the prop's value. Fixed by adding
+  `:required` to the select.
+- **`styleClassPassthrough` prop was declared but never consumed** — no `useStyleClassPassthrough`
+  call existed anywhere in the script, and the select's `class` was a hardcoded static string.
+  The prop was entirely dead; a consumer passing it had no effect. Fixed by wiring up
+  `useStyleClassPassthrough` and binding `elementClasses` alongside the static class.
+- **`isDirty`/`isActive` models were declared and read in the wrapper's CSS class bindings
+  (`{ dirty: isDirty }`, `{ active: isActive }`), but nothing ever set them** — no `focusin`/
+  `focusout`/`change` handlers existed at all, unlike `InputTextareaCore`'s `updateFocus`
+  pattern. The `.dirty`/`.active` CSS states could never trigger. Fixed by adding
+  `@focusin`/`@focusout` (toggling `isActive`) and `@change` (setting `isDirty = true`) directly
+  on the select.
+- **The placeholder `<option>` used `readonly`**, which is not a valid/supported HTML attribute
+  on `<option>` — a silent no-op, leaving the placeholder fully selectable as a real answer
+  (defeating its purpose). Fixed by switching to `disabled`, the correct native pattern for a
+  non-selectable placeholder option.
+- **`theme`/`inputVariant` were typed as inline unions** (`"default" | "success" | "error" |
+  "warning"` / `"normal" | "outlined" | "underlined"`) instead of importing the shared
+  `FormUiTheme`/`InputUiVariant` types — aligned with the rest of `05.forms`.
+- **`fieldData`'s `defineModel` used an untyped `defineModel("fieldData") as Ref<T>` cast**
+  instead of the proper generic `defineModel<T>("fieldData")` call, and had no default — the
+  `as` cast also hid the prop from ESLint's `vue/require-default-prop` detection entirely (it
+  didn't fire on `InputSelectCore.vue`, only on `InputSelectWithLabel.vue`'s correctly-typed
+  equivalent). Fixed by using the proper generic form with `{ required: true }` on both files —
+  see the `v-model:field-data` note above for why `required` is the meaningful fix here (the
+  template would otherwise crash on `fieldData.data` with no data bound).
+- **Dead commented-out CSS** (~8 lines, a "legacy support - eg, Safari" `::after` arrow
+  fallback that was never active) and a **redundant duplicate declaration**
+  (`&.underlined { background-color: var(--_surface); }`, re-setting a value the unscoped base
+  rule already applied unconditionally) were removed.
+- **CSS token cleanup**: `--_surface`, `--_surface-hover`, `--_border-hover`, and
+  `--_outline-color` were each used at exactly one point with no composition or state-swap
+  behind them (`--_outline-color` was a bare alias for `--_border-focus`, per pitfall #20) — all
+  four inlined directly to their public `var(--input-select-*, {default})` form at their point of
+  use. `--_border` (reused across `.normal`/`.underlined`/open-picker) and `--_border-focus`
+  (used directly once, plus now the open-picker's outline too) correctly stayed private.
+
+---
+
+## Variants
+
+### InputSelectWithLabel
+
+`InputSelectWithLabel` (`variants/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`.
+
+**Additional props over InputSelectCore:**
+
+| Prop (template form) | Type | Default | Notes |
+|------|------|---------|-------|
+| `:data-testid` | `string` | `"input-select-with-label"` | Sets `data-testid` on the wrapper — used for the wrapper element specifically (`:data-testid` shorthand resolves to the camelCase `dataTestid` prop, same convention as `:aria-describedby`). |
+| `: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`).
+
+```vue
+<InputSelectWithLabel
+  name="colour"
+  label="Favourite colour"
+  v-model="colour"
+  v-model:field-data="colourOptions"
+  placeholder="Choose a colour"
+  :error-message="errors.colour"
+  :field-has-error="!!errors.colour"
+>
+  <template #descriptionText>Pick the colour you like best</template>
+</InputSelectWithLabel>
+```
+
+`v-model` and `v-model:field-data` are both **required** — same as `InputSelectCore` above. Note
+this wrapper passes `:theme="FormUiTheme"` (a local `computed`, not the raw `theme` prop) down to
+`InputSelectCore`, so the theme automatically switches to `"error"` whenever `fieldHasError` is
+true, regardless of the `theme` prop's own value.

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

@@ -163,6 +163,22 @@ Extra props: `min: number` (required), `max: number` (required), `step?: number`
 `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

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

@@ -0,0 +1,154 @@
+# 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`/`InputNumberCore` — 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 `InputNumberCore`/`InputRangeCore`, these slots have no built-in `InputButtonCore`
+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`/`InputNumberCore` (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` (`variants/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/section-parallax.md

@@ -52,20 +52,37 @@ type: reference
 ## How it works
 
 The component sets:
+
 - `background-image: url(...)` via `v-bind`
-- `background-position: center`
-- `background-size: inherit` (fallback when fixed is not supported)
-- `min-height: 120vh`
-- `background-color: light-dark(var(--slate-01), var(--slate-08))` (visible if image fails to load)
+- `background-position: var(--section-parallax-background-position, center)`
+- `background-size: var(--section-parallax-background-size, cover)`
+- `min-height: var(--section-parallax-min-height, 100svh)`
+- `background-color: var(--section-parallax-background-colour, light-dark(var(--slate-01), var(--slate-08)))` (visible if image fails to load)
+
+Inside `@media (hover: hover) and (pointer: fine) { @supports (background-attachment: fixed) { ... } }`:
 
-Inside `@supports (background-attachment: fixed)`:
 - `background-attachment: fixed` — pins the image to the viewport
-- `background-size: cover` — ensures the image fills the viewport
-- `min-height: 120vh` — ensures enough scroll travel to see the parallax motion
+- `min-height: var(--section-parallax-min-height-fixed, 120vh)` — ensures enough scroll travel to see the parallax motion
+
+Under `@media (prefers-reduced-motion: reduce)`, the parallax is disabled regardless of hover/
+`@supports` support: `background-attachment` reverts to `scroll` and height reverts to
+`--section-parallax-min-height`.
 
-## Controlling height
+## Styling
+
+Height, background position/size/colour are all public CSS custom properties — see
+`CONSUMER-STYLING.md` for the full token table.
+
+```vue
+<SectionParallax
+  background-image="/images/candle-and-stones.jpg"
+  style="--section-parallax-min-height: 60vh; --section-parallax-min-height-fixed: 70vh;"
+>
+  <p>Shorter atmospheric break</p>
+</SectionParallax>
+```
 
-Override `min-height` with a consuming-page style:
+Alternatively, override `min-height` with a consuming-page style:
 
 ```css
 .my-page {
@@ -98,5 +115,10 @@ Override `min-height` with a consuming-page style:
 ## Notes
 
 - The `@supports` guard means the parallax activates only when the browser supports `background-attachment: fixed`. No JS is involved.
-- Slot content is only rendered when the `default` slot is provided (`v-if="slots.default"`).
 - The component has no built-in overlay or gradient — add one via the slot or a `::before` pseudo-element in your consuming-page styles.
+- 2026-09-20 migration: moved from `app/components/parallax/` (unplaced) into
+  `01.atoms/animations/section-parallax/`; props pattern was already `interface Props` +
+  `withDefaults` (no change needed); promoted min-height/background-position/background-size/
+  background-colour (previously hardcoded) to public `--section-parallax-*` tokens; added a
+  `prefers-reduced-motion: reduce` guard that disables the fixed-attachment parallax. No behaviour
+  change beyond the new override surface and the reduced-motion opt-out.