srcdev-nuxt-components 9.6.3 → 9.6.5

package/.claude/rules/consumer/vue-no-self-closing.md

@@ -6,6 +6,7 @@ paths:
 # No self-closing non-void elements
 
 Always write explicit closing tags on non-void elements and slots: `<slot name="x"></slot>`,
-`<span></span>`. Never `<slot name="x" />`.
+`<span></span>`. Never `<slot name="x" />`. Components are the opposite: self-close them when
+they have no content (`<InputButton :button-text="label" />`, not `<InputButton ...></InputButton>`).
 
-Why: ESLint `vue/html-self-closing` rejects it.
+Why: ESLint `vue/html-self-closing` is set to `normal: "never"`, `component: "always"`.

package/.claude/skills/component-compliance-checklist.md

@@ -104,7 +104,8 @@ The ledger can't see items 6c, 9, 10, 11 and 14, so check those by hand.
    Sample copy in stories, and examples in the skill doc, use placeholders (a name like "Alex
    Morgan", a town like "Northtown"), never a real client's name, town, business or site: the
    stories and docs ship in the public package. **Existing component:** check for, and replace, any
-   copy lifted from a consumer app (`ProfileSection` had both).
+   copy lifted from a consumer app (`ProfileSection` had both), in the stories, the snippet and the
+   skill doc (`InputCopy` had one in a story and one in a snippet).
 6a. **Storybook Controls-panel reactivity** — check every story `Template`/`render` function in
     the component's `stories/*.stories.ts` files for this bug: `@storybook/vue3` mounts the story
     component **once** and, on every Controls-panel change, mutates the same reactive `args`
@@ -129,7 +130,10 @@ The ledger can't see items 6c, 9, 10, 11 and 14, so check those by hand.
       number of items
     - emoji (including at the start of anything that takes initials or first letters), HTML-like
       text (must render as text), right-to-left text
-    - out-of-range or odd numbers (0, negative, above the maximum, fractional, very large)
+    - out-of-range or odd numbers (0, negative, above the maximum, fractional, very large). A
+      count prop used as a `v-for` range (`itemCount`) needs flooring and clamping in a
+      `computed()`: Vue renders nothing for a fractional or negative range and only warns in dev
+      (`StepperList`, 2026-10-15)
     - broken image or link URLs
     Describe what to check in the story's docs description, and look at it at every
     `CanvasSwitcher` width. Fixes usually mean `overflow-wrap: anywhere`, `min-inline-size: 0` on
@@ -167,7 +171,9 @@ The ledger can't see items 6c, 9, 10, 11 and 14, so check those by hand.
 7. **Skill doc** — create or update `.claude/skills/components/<component-name>.md`, following the
    pattern of an existing one. A labelled `<Name>Field` wrapper (or any other wrapper) is documented
    in its control's doc under a "Variants" section, not in a doc of its own
-   (`feedback_variants_deprecated_as_own_skill_docs`). **Existing component:** if you find a
+   (`feedback_variants_deprecated_as_own_skill_docs`). **Existing component:** check every
+   behavioural claim (event order and timing, what's disabled when, breakpoints) against the code,
+   not just the props table: `InputCopy`'s doc said `copy` fired before the clipboard write. **Existing component:** if you find a
    `variants/` subfolder, flatten it into the parent folder (`git mv` the `.vue` files plus their
    stories/tests up one level, fix relative imports); `pathPrefix: false` keeps the auto-import
    names unchanged. All existing `variants/` folders were flattened 2026-09-25.
@@ -176,6 +182,8 @@ The ledger can't see items 6c, 9, 10, 11 and 14, so check those by hand.
 9. **Accessibility** — check for gaps beyond what already-passing tests would catch:
    - Interactive controls (buttons, toggles, custom form-like widgets) have an accessible name —
      visible text, `aria-label`, or `aria-labelledby`.
+   - A `<ul>`/`<ol>` styled with `list-style: none` gets `role="list"`, or Safari/VoiceOver stops
+     announcing it as a list (`StepperList`, 2026-10-15).
    - Keyboard behaviour matches what's actually implemented — no keydown case that only calls
      `event.preventDefault()` with a comment like "could add this later", and no screen-reader
      copy (visible or `sr-only`) that describes an interaction the component doesn't actually
@@ -250,6 +258,12 @@ The ledger can't see items 6c, 9, 10, 11 and 14, so check those by hand.
       the edits in private memory. Note that an inline-size container can't size itself from its
       content: say so in `CONSUMER-STYLING.md` (`ProfileSection`).
     - Grid tracks that hold text are `minmax(0, …)` so an unbroken string can't widen the grid.
+    - Layout measured in script (connector lines, indicators) re-measures when any measured item
+      resizes or changes class, not only when the container resizes (`measured-layout-observers.md`,
+      pitfall #28).
+    - Action buttons are `InputButton` (`variant="inline"` when the wrapper styles them), not a raw
+      `<button>` (`component-inline-button.md`, `component-inline-action-button.md`). The ledger
+      doesn't check this, which is how `InputCopy` scored 5/5 with one (fixed 2026-10-15).
     - No `:deep()` in the component's `<style>`: these blocks are never scoped, so Vue leaves it
       as-is and the browser drops the whole rule (pitfall #27). Use a descendant selector, or set
       the child component's public tokens on an ancestor.

package/.claude/skills/component-inline-action-button.md

@@ -74,6 +74,37 @@ Target `.my-action-button.input-button` inside the wrapper to override InputButt
 }
 ```
 
-## Real example
+## What `variant="inline"` still brings
 
-`InputCopyCore` — `app/components/forms/input-copy/InputCopyCore.vue`
+`inline` adds no colours, but the base `.input-button` rule and its inner `.button-text` still
+apply. Override what the wrapper doesn't want, on the `.my-action-button.input-button` selector:
+
+- `box-sizing: content-box`: set `border-box` if the button has a `max-inline-size: 100%` or sits
+  in a wrapping flex row, or padding pushes it past its container.
+- `min-height: var(--button-min-height)`: set `auto` to size from your own padding.
+- `grid-auto-flow: column` layout, `overflow: hidden` and a `transition: all` (replace it with
+  your own `transition` list).
+- `.button-text` takes `font-size: var(--button-font-size)` and
+  `text-transform: var(--button-text-transform)`: set `font-size: inherit; text-transform: none`
+  on `& .button-text` to keep the wrapper's type. It already wraps unbroken text
+  (`overflow-wrap: anywhere`, with `white-space` from `--input-button-text-white-space`).
+- The label is the `buttonText` string prop; there's no label slot. A wrapper that had label
+  slots on a raw `<button>` turns them into string props when it switches (a breaking change).
+
+`InputButton` always renders `data-theme` (default `"default"`). That value has no hue rule of
+its own, so the button keeps the parent's `data-theme` palette and `--theme-*` reads inside it
+still follow the wrapper's theme. Don't pass a theme just to keep it in step.
+
+## Temporary "done" states (copied, saved)
+
+When the button briefly blocks repeat clicks after it succeeds, use `InputButton`'s `readonly` prop
+(`aria-disabled` plus a click guard), not `disabled`: disabling the focused button drops keyboard
+focus. Keep `disabled` for a genuinely unavailable control. If the button has an `aria-label`, a
+changed visible label ("Copied!") isn't announced, because the aria-label wins; add a visually hidden
+`role="status"` span carrying the message. `InputCopy` does both (2026-10-15).
+
+## Real examples
+
+- `InputPasswordWithLabel`: `app/components/05.forms/input-text/InputPasswordWithLabel.vue` (show/hide toggle attached to the input)
+- `CookieConsentBanner`: `app/components/02.molecules/cookie-consent-banner/CookieConsentBanner.vue`
+  (standalone Accept/Reject actions, not attached to an input)

package/.claude/skills/components/cookie-consent-banner.md

@@ -16,6 +16,8 @@ Fixed, non-modal banner built on `AlertContent` (see `alert-content.md`), shown
 |---|---|---|---|
 | `theme` | `SemanticTheme` | `"info"` | Passed to `AlertContent`: panel colours, accent stripe and the accept button, via `--theme-*`. |
 | `ariaLabel` | `string` | `"Cookie consent"` | Accessible name for the banner's `role="region"`. Pass translated copy in non-English apps. |
+| `acceptLabel` | `string` | `"Accept"` | Accept button text (an `InputButton`'s `buttonText`). |
+| `rejectLabel` | `string` | `"Reject"` | Reject button text. |
 | `icon` | `string` | `"material-symbols:cookie-outline"` | Iconify name for the alert icon (`AlertContent`'s `customIcon`). |
 | `showIcon` | `boolean` | `true` | Render the icon column. |
 | `styleClassPassthrough` | `string \| string[]` | `[]` | Extra classes on the root element. |
@@ -41,10 +43,8 @@ Resolution chain: **prop → app.config → hardcoded fallback**.
 |---|---|---|
 | `title` | Title line above the message | "Cookies" |
 | `message` | The consent message body | "This site uses cookies to understand how it's used. You can accept or reject them." |
-| `acceptLabel` | Accept button text | "Accept" |
-| `rejectLabel` | Reject button text | "Reject" |
 
-Per [[feedback_i18n_required]] in consuming apps, always fill these slots with `t()`-sourced copy rather than relying on the English defaults.
+Per [[feedback_i18n_required]] in consuming apps, always fill these slots and the label props with `t()`-sourced copy rather than relying on the English defaults.
 
 ## Basic usage
 
@@ -61,11 +61,13 @@ useAnalytics();
   <div class="page-layout">
     <slot />
     <DisplayToastProvider position="top" alignment="right" :max-visible="3" />
-    <CookieConsentBanner :aria-label="t('global.cookieConsent.ariaLabel')">
+    <CookieConsentBanner
+      :aria-label="t('global.cookieConsent.ariaLabel')"
+      :accept-label="t('global.cookieConsent.accept')"
+      :reject-label="t('global.cookieConsent.reject')"
+    >
       <template #title>{{ t("global.cookieConsent.title") }}</template>
       <template #message>{{ t("global.cookieConsent.message") }}</template>
-      <template #acceptLabel>{{ t("global.cookieConsent.accept") }}</template>
-      <template #rejectLabel>{{ t("global.cookieConsent.reject") }}</template>
     </CookieConsentBanner>
   </div>
 </template>
@@ -85,3 +87,4 @@ The banner is **teleported to `<body>`**, so set tokens on `:root`/`html`/`body`
 - To let a visitor change their mind later (e.g. from a cookie-policy page), call `useCookieConsent().rejectAll()` or clear the `privacy-notice-consent` cookie — the banner reappears since `status` returns to `"unset"` only once the cookie is gone; `rejectAll()` itself sets it to `"denied"`, which keeps the banner hidden but stops GA. Expose a dedicated "reset my choice" affordance if you want the banner itself to resurface.
 - 2026-09-27 migration: classes/tokens/test ids renamed `privacy-notice-banner` → `cookie-consent-banner`; `light-dark()` defaults replaced with light values plus an explicit text colour; single-use private pass-throughs inlined and the hardcoded spacing, button and colour values promoted to public tokens; `ariaLabel` prop (was a hardcoded "Cookie consent"); closed banner hidden from keyboard and screen readers; visible `:focus-visible` outline on the buttons; reduced-motion support; `styleClassPassthrough` now reactive. Added CONSUMER-STYLING.md and a snippet.
 - 2026-09-27 (later the same day): rebuilt on `AlertContent` (`:custom-icon`, `:show-icon`, title/message/actions slots). New `title` slot (default "Cookies") and `icon`/`showIcon` props. The panel now follows the semantic theme in light and dark mode instead of a fixed white panel, with a left accent stripe instead of a top border and right-aligned buttons. The banner's own panel tokens were removed in favour of `--alert-content-*`.
+- 2026-10-15: `StressTest` story (worst-case copy: long German, unbroken strings and URLs, emoji/HTML-like text, RTL, empty title). **Breaking:** the buttons are now `InputButton variant="inline"`, so the `acceptLabel`/`rejectLabel` slots became string props of the same name (`:accept-label`, `:reject-label`); the closed state class `.closed` became `.cookie-consent-banner-closed`. The `--cookie-consent-banner-button-*`/`-accept-*`/`-reject-*` tokens are unchanged.

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

@@ -2,7 +2,9 @@
 
 ## Overview
 
-`InputCopy` renders a readonly text input with a copy-to-clipboard button. Displays a copyable value (e.g., license key, API token) with optional description text below. Shows visual feedback ("Copied!") in the button after a successful copy. Emits `copy` and `copied` events for consumer-side toast/feedback handling.
+`InputCopy` renders a readonly text input with a copy-to-clipboard button (an inline `InputButton`), with optional description text below. After a successful copy the button shows `copiedText` and `copiedIcon` for `copiedDuration` ms, a visually hidden status region announces `copiedText`, and the button stays focusable but `aria-disabled` so repeat clicks are ignored without losing focus. Emits `copy` and `copied` for consumer-side toast/feedback handling.
+
+**Location**: `app/components/02.molecules/input-copy/InputCopy.vue`
 
 ---
 
@@ -10,53 +12,49 @@
 
 > **Hyphenation rule**: Vue's ESLint config enforces `vue/attribute-hyphenation`. Always write camelCase prop names hyphenated in templates: `:style-class-passthrough`.
 
-| Prop (template form)       | Type                   | Default          | Notes                                                        |
-| -------------------------- | ---------------------- | ---------------- | ------------------------------------------------------------ |
-| `:value`                   | `string`               | (required)       | The text to copy to clipboard (e.g., license key, API token).|
-| `:id`                      | `string`               | auto-generated   | Id applied to the input. Only pass one if something needs to target this input directly. |
-| `:name`                    | `string`               | falls back to `id` | Name applied to the input. Falls back to the resolved `id` (auto-generated or explicit) when not provided. |
-| `:label`                   | `string`               | (optional)       | Short label for the field; used in aria-label if ariaLabel not set. |
-| `:aria-label`              | `string`               | (optional)       | Custom aria-label for the input; overrides label.           |
-| `:description`             | `string`               | (optional)       | Helper text displayed below the input.                       |
-| `:button-text`             | `string`               | `"Copy"`         | Label on the copy button.                                    |
-| `:copied-text`             | `string`               | `"Copied!"`      | Text shown in button after copy succeeds.                    |
-| `:copied-duration`         | `number`               | `2000`           | Milliseconds the "Copied!" state persists before resetting.  |
-| `:is-disabled`             | `boolean`              | `false`          | Disables the copy button.                                    |
-| `:style-class-passthrough` | `string \| string[]`   | `[]`             | Extra CSS classes applied to the root element.              |
+| Prop (template form)       | Type                 | Default            | Notes |
+| -------------------------- | -------------------- | ------------------ | ----- |
+| `:value`                   | `string`             | (required)         | The text copied to the clipboard. |
+| `:id`                      | `string`             | auto-generated     | Id on the input. Only pass one if something needs to target it. |
+| `:name`                    | `string`             | falls back to `id` | Name on the input. |
+| `:label`                   | `string`             | `undefined`        | Accessible name for the input (not rendered visibly) and part of the default button aria-label. |
+| `:aria-label`              | `string`             | `undefined`        | Accessible name for the input; overrides `label`. |
+| `:description`             | `string`             | `undefined`        | Helper text below the input, linked with `aria-describedby`. |
+| `:button-text`             | `string`             | `"Copy"`           | Button label. |
+| `:copied-text`             | `string`             | `"Copied!"`        | Button label and status announcement after a copy. |
+| `:button-aria-label`       | `string`             | `"Copy <label> to clipboard"` | Accessible name for the button. Pass translated copy in non-English apps. |
+| `:icon`                    | `string`             | `"lucide:copy"`    | Iconify name for the resting icon. |
+| `:copied-icon`             | `string`             | `"lucide:check"`   | Iconify name shown after a copy. |
+| `:copied-duration`         | `number`             | `2000`             | Milliseconds the copied state lasts. |
+| `:is-disabled`             | `boolean`            | `false`            | Disables the copy button. |
+| `:style-class-passthrough` | `string \| string[]` | `[]`               | Extra classes on the root element. |
 
 ---
 
 ## Events
 
-| Event    | Payload              | Notes                                                      |
-| -------- | -------------------- | ---------------------------------------------------------- |
-| `copy`   | `value: string`      | Emitted when the copy button is clicked (before clipboard write). |
-| `copied` | `value: string`      | Emitted after successful clipboard write; fires after `copy`. |
+| Event    | Payload         | Notes |
+| -------- | --------------- | ----- |
+| `copy`   | `value: string` | Emitted after the clipboard write succeeds. |
+| `copied` | `value: string` | Emitted straight after `copy`, same payload. Neither fires if the write fails (it logs `console.error`). |
 
 ---
 
 ## Slots
 
-None. Use events to customize feedback behavior.
+None.
 
 ---
 
-## CSS Token Customization
-
-All `--input-copy-*` tokens can be overridden at global, page, or instance scope. See `CONSUMER-STYLING.md` in the component directory for full token documentation and examples.
+## Styling
 
-**Common tokens:**
-- `--input-copy-input-bg` — input field background
-- `--input-copy-input-border` — input field border
-- `--input-copy-button-bg` — copy button background
-- `--input-copy-button-bg-hover` — button background on hover
-- `--input-copy-description-color` — description text color
+Tokens are `--input-copy-*` (layout gap, input, button, description including `--input-copy-description-line-clamp`), defaulting from `--theme-*`. Full list and defaults in `CONSUMER-STYLING.md` next to the component. The root is an inline-size container: below `48rem` of its own width the button shows only its icon.
 
 ---
 
-## Usage Examples
+## Usage examples
 
-### License key display (most common)
+### License key display
 
 ```vue
 <InputCopy
@@ -67,21 +65,20 @@ All `--input-copy-*` tokens can be overridden at global, page, or instance scope
 />
 ```
 
-### API token with custom button text
+### Translated copy
 
 ```vue
 <InputCopy
   :value="apiToken"
-  label="API token"
-  description="Do not share this token with anyone."
-  button-text="Copy token"
-  copied-text="Token copied!"
-  @copy="logCopy"
-  @copied="logCopied"
+  :label="t('account.apiToken.label')"
+  :description="t('account.apiToken.description')"
+  :button-text="t('common.copy')"
+  :copied-text="t('common.copied')"
+  :button-aria-label="t('account.apiToken.copyAriaLabel')"
 />
 ```
 
-### Disabled state (e.g., loading or error)
+### Disabled state
 
 ```vue
 <InputCopy
@@ -93,79 +90,29 @@ All `--input-copy-*` tokens can be overridden at global, page, or instance scope
 />
 ```
 
-### With custom styling via CSS tokens
-
-```vue
-<InputCopy
-  :value="shareLink"
-  label="Share link"
-  description="Share this link with others"
-  style="
-    --input-copy-input-bg: #f0f0f0;
-    --input-copy-button-bg: var(--brand-primary);
-    --input-copy-button-text-color: white;
-  "
-/>
-```
-
-### With page-scoped styling
-
-In your page's `<style>` block:
+### Page-scoped styling
 
 ```css
-.success-page .input-copy {
-  --input-copy-input-border: 2px solid var(--success-color);
-  --input-copy-button-bg: var(--success-color);
-  --input-copy-description-color: var(--slate-06);
+.account-page .input-copy {
+  --input-copy-input-border: 0.2rem solid var(--theme-border);
+  --input-copy-button-bg: var(--theme-surface-inverted);
 }
 ```
 
-Then in the template:
-
-```vue
-<div class="success-page">
-  <InputCopy
-    :value="licenseKey"
-    label="Your license key"
-    description="Copy this key to activate the component in your application."
-  />
-</div>
-```
-
-### With toast feedback (consumer-side)
-
-```vue
-<template>
-  <InputCopy
-    :value="apiKey"
-    label="API key"
-    @copied="handleCopied"
-  />
-</template>
-
-<script setup>
-const handleCopied = (value: string) => {
-  // Use your app's toast library
-  useToast().success(`Copied: ${value.slice(0, 8)}...`);
-};
-</script>
-```
-
 ---
 
 ## Accessibility
 
-- Input always has `aria-label` set from `label` or `aria-label` prop
-- Button has descriptive aria-label: "Copy [label] to clipboard"
-- Button is disabled during the "Copied!" feedback window to prevent repeated clicks
-- Icon-only display on mobile (<480px); text shown on desktop for clarity
-- Readonly input has `readonly` attribute; not editable
+- The input's accessible name comes from `aria-label` or `label`; `description` is linked with `aria-describedby`.
+- The button's accessible name is `buttonAriaLabel`, defaulting to "Copy [label] to clipboard". It's set as `aria-label`, so it overrides the visible label.
+- A visually hidden `role="status"` region announces `copiedText` after a copy (the button's aria-label doesn't change, so screen readers wouldn't otherwise hear it).
+- During the copied state the button is `aria-disabled`, not `disabled`, so keyboard focus stays on it.
+- Visible `:focus-visible` rings on the input and the button.
 
 ---
 
 ## Notes
 
-- **Clipboard API**: Uses native `navigator.clipboard.writeText()`. Fails silently if unavailable (e.g., insecure context).
-- **Button text hide on mobile**: By default, only the copy icon displays on screens <480px. Text appears on desktop (≥480px).
-- **No toast built-in**: This component does not show toasts. Listen to `@copied` event and use your app's toast library for feedback.
-- **Manual reset**: The "Copied!" state automatically resets after `copied-duration` milliseconds. No manual reset needed.
+- **Clipboard API**: uses `navigator.clipboard.writeText()`, which needs a secure context. A failure logs to the console and leaves the resting state.
+- **No toast built-in**: listen to `@copied` and use the app's own toast (e.g. `DisplayToastProvider`).
+- 2026-10-15 migration: raw `<button>` replaced with `InputButton variant="inline"`; new `buttonAriaLabel`, `icon`, `copiedIcon` props; status announcement, `aria-describedby`, copied state via `aria-disabled` instead of `disabled`; theme colour defaults and readable font sizes; container query replaces the 480px viewport media query; `.input-copy__button-text` became InputButton's `.button-text`; StressTest story and `--input-copy-description-line-clamp`.

package/.claude/skills/components/progress-tracker.md

@@ -0,0 +1,140 @@
+# ProgressTracker Component
+
+## Overview
+
+`ProgressTracker` (`app/components/02.molecules/progress-tracker/`) is a presentational progress
+track for a multi-step flow: a header with "Step X of Y" and a progress bar, then the steps as a
+`StepperList`. Steps before the `v-model` index are done (filled indicator with a tick), the model's
+step is current (ringed number, content in a focus card) and later steps are upcoming (outlined
+number, muted text). The current step's `#step-{n}` slot is where a parent puts a form or actions,
+so it also works as an accordion-style n-step wizard. The parent owns all state; the component has
+no events and never changes the model. Styling tokens:
+`app/components/02.molecules/progress-tracker/CONSUMER-STYLING.md`.
+
+---
+
+## Props reference
+
+> **Hyphenation rule**: write camelCase props hyphenated in templates: `:style-class-passthrough`.
+
+| Prop (template form) | Type | Default | Notes |
+|---|---|---|---|
+| `v-model` | `number` | (required) | 0-based index of the current step. `steps.length` means every step is done. Floored, and clamped to `0`–`steps.length`. |
+| `:steps` | `ProgressTrackerStep[]` | (required) | `{ title: string; body?: string }`, exported from `~/types/components`. An empty array renders nothing. |
+| `heading-tag` | `"h2" \| "h3" \| "h4" \| "h5" \| "h6"` | `"h3"` | Tag for each step title. |
+| `step-label` | `string` | `"Step {current} of {total}"` | Header text and the bar's `aria-valuetext`; `{current}` is 1-based. |
+| `complete-label` | `string` | `"All steps complete"` | Header text once every step is done. |
+| `done-label` | `string` | `"Completed"` | Screen-reader text appended to each done title (", Completed"). |
+| `done-icon` | `string` | `"lucide:check"` | Iconify name for the tick. |
+| `:focus-on-change` | `boolean` | `true` | Move focus when the model changes (see Behaviour). |
+| `:style-class-passthrough` | `string \| string[]` | `[]` | Classes on the root `div`. |
+
+## Slots
+
+| Slot | Props | Notes |
+|---|---|---|
+| `#step-{n}` | `{ step, index, headingId }` | Rendered **only while step `n` is current**, inside its focus card under the body. `headingId` is the step title's id, for `aria-labelledby` on a form. |
+
+---
+
+## Behaviour
+
+- One row per step, with its title and body; a step without a body has no body paragraph.
+- Steps before the model are done, the model's step is current, later steps are upcoming.
+- The current title has `aria-current="step"`; done titles carry `done-label` as screen-reader
+  text; indicators are `aria-hidden`. The list is an `ol`, so position ("2 of 5") is announced too.
+- The header shows `step-label` filled in, or `complete-label` when every step is done. It's a
+  polite live region, so a change is announced.
+- The bar is `role="progressbar"` with `aria-valuemin="0"`, `aria-valuemax` = step count,
+  `aria-valuenow` = done count and `aria-valuetext` = the header label.
+- Changing the model after mount moves focus to the new current title (`tabindex="-1"`), or to the
+  header label when complete, so keyboard and screen-reader users aren't dropped when a slot's
+  focused button unmounts. Never on first render. `:focus-on-change="false"` turns it off (e.g.
+  when the parent restores saved progress after mount).
+- Done steps are plain text: there is nothing clickable in the component itself.
+- The model is clamped: negative counts as 0, above `steps.length` counts as complete, fractions
+  are floored.
+- Survives worst-case data (unbroken strings, long copy, 20+ steps, empty steps) without breaking
+  the layout; the header wraps the bar below the label when space runs out.
+- Bar and state colour transitions are off under `prefers-reduced-motion: reduce`.
+
+---
+
+## Usage
+
+### Display only
+
+```vue
+<ProgressTracker v-model="currentStep" :steps="onboardingSteps" />
+```
+
+### Wizard (parent-owned forms)
+
+```vue
+<script setup lang="ts">
+import type { ProgressTrackerStep } from "~/types/components";
+
+const currentStep = ref(0);
+const form = reactive({ name: "", email: "" });
+
+const steps = computed<ProgressTrackerStep[]>(() => [
+  { title: "Your details", body: currentStep.value > 0 ? form.name : "Tell us who you are." },
+  { title: "Contact", body: currentStep.value > 1 ? form.email : "Where can we reach you?" },
+  { title: "Review and submit" },
+]);
+</script>
+
+<template>
+  <ProgressTracker v-model="currentStep" :steps="steps">
+    <template #step-0="{ headingId }">
+      <form :aria-labelledby="headingId" @submit.prevent="currentStep++">
+        <!-- fields, then a submit InputButton labelled Continue -->
+      </form>
+    </template>
+    <template #step-1="{ headingId }">
+      <form :aria-labelledby="headingId" @submit.prevent="currentStep++">
+        <!-- fields, a Back InputButton (@click="currentStep--") and Continue -->
+      </form>
+    </template>
+    <template #step-2="{ headingId }">
+      <form :aria-labelledby="headingId" @submit.prevent="currentStep = steps.length">
+        <!-- review, Back and Submit -->
+      </form>
+    </template>
+  </ProgressTracker>
+</template>
+```
+
+Validation, saving and what "complete" means are the parent's job. Pass a summary of each completed
+step back in as its `body` so done steps show what was entered.
+
+---
+
+## Composition
+
+- Built on `StepperList` (`tag="ol"`, `indicator-alignment="top"`), filling its `indicator-{n}` and
+  `item-{n}` slots. ProgressTracker sets StepperList's `--stepper-list-*` tokens on
+  `.progress-tracker-list` from its own, so an ancestor's `--stepper-list-*` values don't reach it.
+- Connector colour per state uses `.stepper-list-item:has(.progress-tracker-indicator.is-done)`,
+  the per-step state recipe from StepperList's `CONSUMER-STYLING.md`.
+- The focus card bleeds left by `--progress-tracker-card-padding-inline` so the current step's text
+  stays aligned with the other steps; the current indicator moves down by the card's block padding
+  to stay level with its title. Clearance between the current ring and the card is
+  `gap - card-padding-inline - ring-width` (4rem - 2rem - 0.6rem = 1.4rem by default). The first
+  defaults (3.2rem gap, 2.4rem padding) left 0.2rem and the ring touched the card, so change these
+  three together.
+
+---
+
+## Stories
+
+Default, All Complete, Interactive (Mark complete), Wizard (parent-owned forms), Translated
+Labels, White Card on a Panel, Stress Test. Title: `Molecules/ProgressTracker`.
+
+---
+
+## Notes
+
+- Out of scope: clickable or back-navigable steps, a built-in complete event or validation,
+  horizontal layout, auto-advance.
+- Auto-imported in Nuxt; import the `ProgressTrackerStep` type from `~/types/components`.

package/.claude/skills/components/stepper-list.md

@@ -20,6 +20,7 @@
 | … | … |
 
 **Rules:**
+
 - Slots are always **zero-indexed**: first item = `item-0`, last item = `item-{itemCount - 1}`.
 - `item-{n}` slots are required if you want content in each row.
 - `indicator-{n}` slots are **optional**. When omitted, a CSS counter bubble is rendered automatically. When provided, the custom content replaces the counter entirely — the CSS counter is hidden for that item only.
@@ -32,7 +33,7 @@
 
 | Prop | Type | Default | Notes |
 |------|------|---------|-------|
-| `itemCount` | `number` | — | **Required.** Controls how many `<li>` elements are rendered and which slots exist. |
+| `itemCount` | `number` | — | **Required.** Controls how many `<li>` elements are rendered and which slots exist. Floored to a whole number; negative or `NaN` renders no rows. |
 | `tag` | `"ul" \| "ol"` | `"ul"` | Use `"ol"` for sequentially meaningful content (recipes, instructions). |
 | `indicatorAlignment` | `"top" \| "center"` | `"top"` | Vertical alignment of the indicator relative to each item's content. `"center"` suits single-line items; `"top"` suits multi-line content. |
 | `indicatorVariant` | `"disc" \| "circle" \| "square"` | `"disc"` | Visual style of the auto-generated counter bubble. |
@@ -160,12 +161,14 @@ for full examples (global theming, page-scoped, and per-instance overrides).
 | `--stepper-list-counter-font-size` | `1.4rem` | Counter number font size |
 | `--stepper-list-counter-font-weight` | `600` | Counter number font weight |
 | `--stepper-list-connector-width` | `0.2rem` | Connector line thickness |
+| `--stepper-list-connector-gap` | `0` | Space between each end of the connector line and its indicators |
 
 ### Colours
 
 | Token | Default | Controls |
 |---|---|---|
 | `--stepper-list-connector-color` | `currentColor` | Connector line colour |
+| `--stepper-list-connector-image` | `none` | Image over the connector colour, e.g. a `repeating-linear-gradient()` for a dashed line |
 | `--stepper-list-icon-color` | `currentColor` | Icon colour for custom `indicator-icon` elements |
 
 ### Per-variant tokens
@@ -190,10 +193,10 @@ for full examples (global theming, page-scoped, and per-instance overrides).
 ## Connector behaviour
 
 - Connectors are drawn as `::after` pseudo-elements on each `<li>` except the last.
-- JS (`ResizeObserver`) measures the bottom of each indicator and the top of the next to set `--_connector-top` and `--_connector-height` precisely, keeping the line flush between bubbles regardless of content height.
+- JS (`ResizeObserver`) measures the bottom of each indicator and the top of the next to set `--_connector-top` and `--_connector-height` precisely, keeping the line flush between bubbles regardless of content height. It also sets `--_connector-left` to the indicator's measured centre, so the line stays centred under a custom indicator wider than the counter bubble (before JS runs it falls back to half of `--_counter-size`).
 - Before JS runs (SSR / initial paint), CSS fallback values approximate the correct position for `indicatorAlignment="top"`.
 - If `connected="false"`, no connectors are rendered and JS measurement is skipped.
-- Connectors recalculate automatically when `itemCount`, `connected`, or `indicatorAlignment` props change.
+- Connectors recalculate when `itemCount`, `connected` or `indicatorAlignment` change, when the list or any `<li>` resizes (a `ResizeObserver` on the list and every item), and when a `class` attribute or child nodes change anywhere inside the list (a `MutationObserver`). The last two cover a consumer restyling a step without the list changing size, e.g. ProgressTracker moving its focus card from one step to the next. Inline `style` changes are not watched, since the connector values themselves are written there.
 
 ---
 
@@ -222,6 +225,7 @@ See [component-local-style-override.md](../component-local-style-override.md) fo
     /* --stepper-list-counter-font-size: 1.4rem; */
     /* --stepper-list-counter-font-weight: 600; */
     /* --stepper-list-connector-width: 0.2rem; */
+    /* --stepper-list-connector-gap: 0.6rem; */
 
     /* Counter bubble — disc variant */
     /* --stepper-list-counter-disc-background: var(--brand-primary); */
@@ -246,6 +250,7 @@ See [component-local-style-override.md](../component-local-style-override.md) fo
 
     /* Connector line */
     /* --stepper-list-connector-color: var(--brand-primary); */
+    /* --stepper-list-connector-image: repeating-linear-gradient(to bottom, currentColor 0 0.4rem, transparent 0.4rem 0.8rem); */
   }
 }
 </style>
@@ -258,4 +263,6 @@ See [component-local-style-override.md](../component-local-style-override.md) fo
 - Always keep `itemCount` in sync with the number of `#item-*` slots you provide — mismatches will render empty `<li>` rows.
 - Slot names are **zero-indexed** — `#item-0` not `#item-1`.
 - The `indicator-icon` class is defined inside the component CSS and sizes the SVG to `var(--_counter-size)` (driven by `indicatorSize` or `--stepper-list-counter-size`). Always add it to custom SVGs.
+- Markup: root `<ul>`/`<ol>` with `role="list"` (Safari drops list semantics under `list-style: none`), each row `li.stepper-list-item`, content in `.stepper-list-content`. The content column is `minmax(0, 1fr)` with `overflow-wrap: anywhere`, so long unbroken strings wrap.
+- Used by `ServiceDetail` for its process steps (circle variant, `tag="ol"`, item count from CMS data) and by `ProgressTracker`, which fills the indicator and item slots with done/current/upcoming states (skill `progress-tracker.md`).
 - Auto-imported in Nuxt — no manual import needed.

package/.claude/skills/components/tabbed-content.md

@@ -145,6 +145,10 @@ and the trailing edge catches up: the same stretch effect as before, symmetric b
 settle timer. CSS retargets each edge from its current position, so a quick second move can't
 pull an edge backwards. Hover and active have separate duration/delay variables.
 
+`--tabs-hover-indicator-stretch` (default `1`) multiplies the hover pair's two edge delays in CSS,
+so `0` turns the hover stretch into a plain slide (both edges move together over the same
+duration). The active indicator and underline always stretch.
+
 This replaced a `translate` + `scale` model (a bar-wide box translated to the tab's left and
 scaled to its width, plus a timeout to settle after a stretch, and one shared
 `--_transition-duration`). Rightward moves animated both properties together in the settle step,

package/.claude/skills/composable-cookie-consent.md

@@ -18,7 +18,7 @@
 
 ### 2. Render the banner
 
-Pair it with [[cookie-consent-banner]] (`CookieConsentBanner.vue`), registered once in the app's default layout — see that component's skill doc for placement and copy slots.
+Pair it with [[cookie-consent-banner]] (`CookieConsentBanner.vue`), registered once in the app's default layout — see that component's skill doc for placement, copy slots and label props.
 
 ## Composable reference
 

package/.claude/skills/index.md

@@ -99,14 +99,15 @@ Each skill is a single markdown file named `<area>-<task>.md`.
     ├── skip-links.md                — SkipLinks: focus-revealed accessibility skip-nav, links (SkipLink[]) data-driven, homeLink slot, CSS token API
     ├── tabbed-content.md            — TabbedContent (was TabsCore): tablist + panels from indexed slots (itemCount), arrow-key nav, moving hover/active/underline indicators, CSS token API
     ├── contact-section.md      — ContactSection props (stepperIndicatorSize pass-through), 3-item info+form layout, slot API
-    ├── stepper-list.md         — StepperList dynamic slots (item-{n}/indicator-{n}), props, connector behaviour
+    ├── stepper-list.md         — StepperList dynamic slots (item-{n}/indicator-{n}), props, measured connectors (gap, dashed image tokens), per-step state recipe
+    ├── progress-tracker.md     — ProgressTracker: steps (ProgressTrackerStep[]) + v-model current index over StepperList, header label + progressbar, current-step #step-{n} slot for wizard forms, focus on change, CSS token API
     ├── expanding-panel.md      — ExpandingPanel v-model, forceOpened, contentIsOnTop overlay mode, slots (summary/icon/content), ARIA wiring, CSS token API
     ├── content-docs.md         — ContentDocs docs-page shell: prop-driven docsNav/docsPageNav (not slots), DocsNavItem icons, container-width breakpoint behaviour, shared/per-side CSS token API
     ├── glass-panel.md          — GlassPanel: frosted-glass container, light-only token defaults in-component (light-dark() block removed from _default.css, no built-in dark glass), highlight behind content, section/article labelled via headingId slot prop, CSS token API
     ├── pricing-card.md         — PricingCard: plan card with highlight badge, corner ribbon, feature list, #cta slot, heading-tag, line-clamp tokens
     ├── price-list.md           — PriceList: service/menu price columns (dl rows), PriceListData type, headingTag/fromLabel props, CSS token API
     ├── opening-hours.md        — OpeningHours: per-day data auto-grouped into ranges, split sessions, 24h/appointment, exceptions, Intl formatting, today highlight, JSON-LD, CSS token API
-    ├── input-copy.md           — InputCopy: readonly copy-to-clipboard input, visual feedback, Clipboard API, accessibility, CSS token API
+    ├── input-copy.md           — InputCopy: readonly copy-to-clipboard input with an inline InputButton, copied state + status announcement, translatable labels/icons, container-query icon-only button, --input-copy-* tokens
     ├── banner-video.md         — BannerVideo: full-width hero video banner, depth tier system, objectFit/objectPosition, playIcon/pauseIcon/toggle-icon slot, reduced-motion fallback, CSS tokens
     ├── grid-stack.md           — GridStack: CSS Grid z-axis stacking, slot API, z-order rules, sizing, video+overlay and image+text patterns
     ├── scroll-reveal-frame.md  — ScrollRevealFrame: generic parallax clipping frame, slot API, image grid pattern, public --scroll-reveal-frame-* tokens (props only write them when passed), browser support
@@ -136,7 +137,7 @@ Each skill is a single markdown file named `<area>-<task>.md`.
     ├── site-header.md            — SiteHeader: PageRow + SkipLinks + ResponsiveHeader composition, #branding/#secondaryNavigation slots, dual styleClassPassthrough hooks
     ├── responsive-header.md      — ResponsiveHeader: overflow-collapsing adaptive nav, measurement-pipeline gotchas (unsized icons, vw font-size drift), full CSS token API
     ├── navigation-items.md       — NavigationItems: internal overflow-panel renderer for ResponsiveHeader, complement-visibility logic, not used standalone
-    ├── cookie-consent-banner.md  — CookieConsentBanner: fixed non-modal Accept/Reject banner built on AlertContent, driven by useCookieConsent; title/message/acceptLabel/rejectLabel slots, icon/showIcon/ariaLabel props, position/button tokens (panel via --alert-content-*), teleported so tokens go on html/passthrough
+    ├── cookie-consent-banner.md  — CookieConsentBanner: fixed non-modal Accept/Reject banner built on AlertContent, driven by useCookieConsent; title/message slots, acceptLabel/rejectLabel/icon/showIcon/ariaLabel props, InputButton (inline) actions, position/button tokens (panel via --alert-content-*), teleported so tokens go on html/passthrough
     ├── display-banner.md         — DisplayBanner: canvas/content stacked overlay banner, conditional slot wrappers, CSS token API
     ├── deep-expanding-menu.md         — DeepExpandingMenu: anchor-positioned popover nav panels, browser support caveat, CSS token API
     ├── deep-expanding-menu-classic.md — DeepExpandingMenuClassic: <details>-based fallback nav, click-outside close, CSS token API