srcdev-nuxt-components 9.4.12 → 9.5.0

package/.claude/skills/components/decode-qr-code.md

@@ -4,6 +4,8 @@ QR code decoder for static images. Accepts images via file picker or drag-and-dr
 
 **File**: `app/components/02.molecules/qr-code/DecodeQrCode.vue`
 
+> **Changed 2026-09-28:** `.qr-code-capture`, `.qr-code-dropzone`, `.scanned-results` → `.decode-qr-code-capture`, `-dropzone`, `-results`. The file input now has a visible label and the drop zone instruction text (both props); the root is no longer forced to `aspect-ratio: 1 / 1`.
+
 ## Prerequisites
 
 The `nuxt-qrcode` Nuxt module must be registered in the consuming app's `nuxt.config.ts`:
@@ -21,6 +23,8 @@ No camera permission is required — this component works entirely with uploaded
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
+| `upload-label` | `string` | `"Upload a QR code image"` | Visible label wrapping the file input (its accessible name) |
+| `drop-label` | `string` | `"Or drop a QR code image here"` | Instruction text inside the drop zone |
 | `style-class-passthrough` | `string \| string[]` | `[]` | Extra classes on the root element |
 
 ## CSS classes
@@ -28,17 +32,19 @@ No camera permission is required — this component works entirely with uploaded
 | Class | Where | Description |
 |-------|-------|-------------|
 | `.decode-qr-code` | root | always present |
-| `.qr-code-capture` | file input | the `QrcodeCapture` file-picker element |
-| `.qr-code-dropzone` | drop zone | the `QrcodeDropZone` drag-and-drop area |
-| `.scanned-results` | inner | shown when at least one code has been decoded |
+| `.decode-qr-code-capture` | file input | the `QrcodeCapture` file-picker element |
+| `.decode-qr-code-dropzone` | drop zone | the `QrcodeDropZone` drag-and-drop area |
+| `.decode-qr-code-upload` | label | wraps `.decode-qr-code-upload-label` and the file input |
+| `.decode-qr-code-dropzone.is-dropping` | drop zone | an image is being dragged over it |
+| `.decode-qr-code-results` | inner | polite live region, always rendered; its `<ul>` appears once a code is decoded |
 
 ## Behaviour
 
-- Two input methods are rendered side by side: a file picker (`.qr-code-capture`) and a drag-and-drop zone (`.qr-code-dropzone`)
-- Both share the same `onDetect` handler — results are displayed in the same `.scanned-results` list regardless of input method
+- Two input methods are rendered side by side: a file picker (`.decode-qr-code-capture`) and a drag-and-drop zone (`.decode-qr-code-dropzone`)
+- Both share the same `onDetect` handler — results are displayed in the same `.decode-qr-code-results` list regardless of input method
 - Detected QR codes replace the previous results — each decode is a fresh result set
-- If the decoded array is empty, `.scanned-results` is hidden
-- The drop zone has a dashed border and minimum height by default — style with `.qr-code-dropzone` to customise
+- If the decoded array is empty, the results `<ul>` isn't rendered (the live-region wrapper stays)
+- The drop zone has a dashed border and minimum height by default — style with `.decode-qr-code-dropzone` to customise
 
 ## Usage
 
@@ -63,7 +69,7 @@ With styling:
   gap: 1.6rem;
 }
 
-.my-decoder .qr-code-dropzone {
+.my-decoder .decode-qr-code-dropzone {
   min-height: 12rem;
   border-radius: 1rem;
   border-color: var(--theme-input-border);
@@ -72,7 +78,7 @@ With styling:
   justify-content: center;
 }
 
-.my-decoder .scanned-results {
+.my-decoder .decode-qr-code-results {
   margin-block-start: 1.6rem;
   font-size: 1.4rem;
 }

package/.claude/skills/components/display-avatar.md

@@ -24,11 +24,13 @@
 
 | Size | Diameter | Font size |
 | ---- | -------- | --------- |
-| `xs` | 24px     | 0.75rem   |
-| `s`  | 32px     | 0.875rem  |
-| `md` | 40px     | 1rem      |
-| `lg` | 48px     | 1.125rem  |
-| `xl` | 56px     | 1.25rem   |
+| `xs` | 2.4rem (24px) | 1.2rem (12px) |
+| `s`  | 3.2rem (32px) | 1.4rem (14px) |
+| `md` | 4rem (40px)   | 1.6rem (16px) |
+| `lg` | 4.8rem (48px) | 1.8rem (18px) |
+| `xl` | 5.6rem (56px) | 2rem (20px)   |
+
+Each step is a token (`--display-avatar-size-md`, `--display-avatar-font-size-md`, ...), and `--display-avatar-size`/`--display-avatar-font-size` override the scale for one avatar or an area. A custom `size` string renders at `md` unless you set `--display-avatar-size`. Full list in `CONSUMER-STYLING.md`.
 
 ---
 
@@ -49,6 +51,10 @@ When `src` is not set, a `<span>` renders the fallback value:
 2. `alt` initials — first character of each word, capped at two characters.
 3. Empty string — if neither is set.
 
+When `alt` is set, the initials are `aria-hidden` and the full `alt` is rendered as `sr-only` text, so a screen reader announces "Jane Smith" rather than "J S". With only `text`, the text is read as-is.
+
+With `src`, the image uses `alt`, or an empty (decorative) `alt` when none is given. Pass `alt` unless the name is already visible next to the avatar.
+
 ```
 alt="John Doe"     → "JD"
 alt="Alice"        → "A"
@@ -134,7 +140,7 @@ interface DisplayChipConfig {
 ```vue
 <DisplayAvatar size="xl">
   <template #default>
-    <img src="/images/profile.jpg" alt="Jane Smith" class="avatar-image" />
+    <img src="/images/profile.jpg" alt="Jane Smith" class="display-avatar-image" />
   </template>
 </DisplayAvatar>
 ```
@@ -144,38 +150,16 @@ interface DisplayChipConfig {
 ```vue
 <DisplayAvatar alt="Jane Smith">
   <template #icon>
-    <Icon name="bi:check-circle-fill" class="avatar-icon" />
+    <Icon name="bi:check-circle-fill" class="display-avatar-icon" />
   </template>
 </DisplayAvatar>
 ```
 
 ---
 
-## Local style override scaffold
-
-```vue
-<DisplayAvatar
-  alt="Jane Smith"
-  :style-class-passthrough="['profile-avatar']"
-/>
-
-<style>
-/* ─── DisplayAvatar local overrides ────────────────────────────────
-   Scope by your wrapper class, then nest .display-avatar directly.
-   No :deep() needed (component styles are unscoped).
-   Delete this block if no overrides are needed.
-   ─────────────────────────────────────────────────────────────────── */
-.my-page-section {
-  .display-avatar {
-    &.profile-avatar {
-      /* custom overrides */
-    }
-  }
-}
-</style>
-```
+## Styling
 
-See [component-local-style-override.md](../component-local-style-override.md) for the full pattern.
+Tokens for size, background, text colour, radius and icon size are in `CONSUMER-STYLING.md` next to the component; overrides follow [component-local-style-override.md](../component-local-style-override.md). Give an icon in the `#icon` slot the `display-avatar-icon` class to size it with `--display-avatar-icon-size`.
 
 ---
 
@@ -185,3 +169,4 @@ See [component-local-style-override.md](../component-local-style-override.md) fo
 - When `chip` is set, the root element becomes `DisplayChip` and the `as` prop is ignored.
 - `class` and `style` are **not** declared as explicit props — they fall through to the root element automatically via Vue's attribute inheritance (`inheritAttrs: true`). Do not re-add them as props; doing so pulls them out of `$attrs` and breaks automatic inheritance.
 - `NuxtImg` is used for the image, so `@nuxt/image` must be installed in the consuming app.
+- 2026-09-27 migration: moved from `01.atoms` to `02.molecules` (it composes `DisplayChip`). Font sizes fixed (they were 16px-root rem values, rendering at 7.5–12.5px here); sizes and colours are now public tokens, with a `--theme-*` background and text colour instead of no background and faint `--slate-03` text. The hardcoded English `"Avatar"` alt fallback became an empty (decorative) alt, and initials now announce the full `alt`. Classes `.avatar-image`/`.avatar-icon` became `.display-avatar-image`/`.display-avatar-icon`. A stray `style-class-passthrough` attribute is no longer rendered on a native root, and the chip config now reacts to prop changes.

package/.claude/skills/components/display-chip.md

@@ -1,5 +1,7 @@
 # DisplayChip Component
 
+> **Renamed 2026-09-27:** root class `.display-chip-core` → `.display-chip`. Status colours are now public tokens (`--display-chip-colour-*`, were unprefixed `--color-*`); the geometry vars fed from `config` are private (`--_chip-*`).
+
 ## Overview
 
 `DisplayChip` renders a small status indicator dot (or icon/label badge) that is absolutely positioned on a parent element using CSS trigonometric functions. It works by applying a radial-gradient mask to the parent's content, creating a clean cutout behind the chip. Supports circle and square parent shapes.
@@ -53,12 +55,15 @@ Default config: `{ size: "12px", maskWidth: "4px", offset: "0px", angle: "90deg"
 
 Apply status via `styleClassPassthrough` — the component has built-in colour variants:
 
-| Class      | Colour                  |
-| ---------- | ----------------------- |
-| (none)     | `slategrey` (offline)   |
-| `online`   | `rgb(0, 255, 135)`      |
-| `idle`     | `rgb(255, 185, 51)`     |
-| `dnd`      | `rgb(255, 40, 80)`      |
+| Class | Token | Default |
+| --- | --- | --- |
+| (none) | `--display-chip-colour-offline` | `slategrey` |
+| `online` | `--display-chip-colour-online` | `rgb(0, 255, 135)` |
+| `idle` | `--display-chip-colour-idle` | `rgb(255, 185, 51)` |
+| `dnd` | `--display-chip-colour-dnd` | `rgb(255, 40, 80)` |
+
+Icon and label colour: `--display-chip-text-colour` (default `black`). Full reference:
+`app/components/02.molecules/display-chip/CONSUMER-STYLING.md`.
 
 ```vue
 <DisplayChip :style-class-passthrough="['online']">...</DisplayChip>
@@ -186,15 +191,15 @@ See [display-avatar.md](./display-avatar.md) for the full API.
 
 <style>
 /* ─── DisplayChip local overrides ──────────────────────────────────
-   Scope by your wrapper class, then nest .display-chip-core directly.
+   Scope by your wrapper class, then nest .display-chip directly.
    No :deep() needed (component styles are unscoped).
    Delete this block if no overrides are needed.
    ─────────────────────────────────────────────────────────────────── */
 .my-page-section {
-  .display-chip-core {
+  .display-chip {
     &.my-chip {
       /* override colour vars, e.g. */
-      --color-online: hotpink;
+      --display-chip-colour-online: hotpink;
     }
   }
 }
@@ -209,5 +214,5 @@ See [display-avatar.md](./display-avatar.md) for the full API.
 - `shape` must match the actual shape of the slot content — the position maths differs between `circle` (radius-based) and `square` (clamped corner-aware).
 - `config` values are geometric inputs to CSS `calc(cos())` / `calc(sin())` expressions. Pass them as strings with units (`"12px"`, `"45deg"`), not plain numbers.
 - The chip dot is rendered via `::after` pseudo-element; icon and label sit above it at `z-index: 2`.
-- The mask cutout is applied to all direct children of `.display-chip-core` except `.chip-icon` and `.chip-label` — ensure the host element is a direct child.
+- The mask cutout is applied to all direct children of `.display-chip` except `.chip-icon` and `.chip-label` — ensure the host element is a direct child.
 - `DisplayChipConfig` and `DisplayChipProps` are both exported from the layer types. Use `DisplayChipConfig` when passing geometry values (the `config` prop). Use `DisplayChipProps` only if you need to pass the full component prop set (e.g. when building a wrapper component).

package/.claude/skills/components/display-dialog.md

@@ -21,6 +21,7 @@ open/close state management.
 | `justifyDialog` | `'start' \| 'center' \| 'end'` | `'center'` | Horizontal position of panel within overlay. |
 | `alignDialog` | `'start' \| 'center' \| 'end'` | `'center'` | Vertical position of panel within overlay. |
 | `closeIcon` | `string` | app.config | Icon name for the header close button. Override per-instance or set globally via `app.config`. |
+| `closeLabel` | `string` | app.config (`"Close"`) | Screen-reader text on the icon-only close button. Pass a translated string, or set it site-wide via `app.config`. |
 | `styleClassPassthrough` | `string \| string[]` | `[]` | Extra classes applied to the root `<dialog>` element. |
 
 ## Slots
@@ -120,6 +121,7 @@ export default defineAppConfig({
       alignDialog: "end",
       lockViewport: true,
       closeIcon: "heroicons:x-mark",
+      closeLabel: "Fermer",
       theme: "info",
     },
   },
@@ -130,7 +132,7 @@ Per-instance props always win — app.config only fills in when a prop is absent
 
 ## CSS token API
 
-See `CONSUMER-STYLING.md` in the component folder for the full token reference. Prefer global
+See `CONSUMER-STYLING.md` in the component folder for the full token reference. The four `--display-dialog-inner-*` panel tokens resolve on `.display-dialog-inner` (since 2026-09-27), so they can be set per variant (`.display-dialog-inner.alert { ... }`); `fullscreen` ignores radius/border/outline. Colour defaults use `--colour-text-default` / `--page-bg`, not `light-dark()`. Prefer global
 CSS over per-instance overrides — dialogs are site-wide UI:
 
 ```css

package/.claude/skills/components/display-pill.md

@@ -8,8 +8,8 @@ A classic pill/badge component for displaying status labels, tags, or metadata.
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `tag` | `"span" \| "div" \| "button" \| "a"` | `"span"` | Root element. Use `"button"` or `"a"` for interactive pills — cursor auto-switches to pointer |
-| `label` | `string` | `undefined` | Pill text. When set, renders inside `.pill-label` and suppresses the default slot |
+| `tag` | `"span" \| "div" \| "button" \| "a"` | `"span"` | Root element. Use `"button"` or `"a"` for interactive pills: cursor switches to pointer and a `:focus-visible` outline is shown. A `button` gets `type="button"`; pass `href` (falls through) for an `a`. |
+| `label` | `string` | `undefined` | Pill text. When set, renders inside `.display-pill-label` and suppresses the default slot |
 | `size` | `"sm" \| "md" \| "lg"` | `"md"` | Size variant |
 | `variant` | `"default" \| "primary" \| "success" \| "warning" \| "danger" \| "neutral"` | `"default"` | Colour variant |
 | `reversed` | `boolean` | `false` | Reverses icon/label order (`flex-direction: row-reverse`) |
@@ -19,7 +19,7 @@ A classic pill/badge component for displaying status labels, tags, or metadata.
 
 | Slot | Description |
 |------|-------------|
-| `icon` | Icon content — rendered before the label by default, after when `reversed=true` |
+| `icon` | Icon content, wrapped in `.display-pill-icon` (sized by `--display-pill-icon-size`) — rendered before the label by default, after when `reversed=true` |
 | `default` | Custom label content — only used when the `label` prop is not set |
 
 ## Basic usage
@@ -67,57 +67,9 @@ When `label` is not set, the default slot is rendered instead:
 
 ## CSS token API
 
-All tokens follow the `--theme-pill-*` convention and fall back to project colour tokens.
-
-### Colour
-
-| Token | Default |
-|-------|---------|
-| `--theme-pill-bg` | `var(--slate-01)` |
-| `--theme-pill-color` | `var(--slate-09)` |
-| `--theme-pill-primary-bg` | `var(--blue-01)` |
-| `--theme-pill-primary-color` | `var(--blue-09)` |
-| `--theme-pill-success-bg` | `var(--green-01)` |
-| `--theme-pill-success-color` | `var(--green-10)` |
-| `--theme-pill-warning-bg` | `var(--yellow-08, #fef9c3)` |
-| `--theme-pill-warning-color` | `var(--yellow-03, #a16207)` |
-| `--theme-pill-danger-bg` | `var(--red-01)` |
-| `--theme-pill-danger-color` | `var(--red-10)` |
-| `--theme-pill-neutral-bg` | `var(--slate-08)` |
-| `--theme-pill-neutral-color` | `var(--slate-03)` |
-
-### Border
-
-| Token | Default |
-|-------|---------|
-| `--theme-pill-border-color` | `transparent` |
-| `--theme-pill-border-width` | `1px` |
-| `--theme-pill-border-style` | `solid` |
-| `--theme-pill-border-radius` | `100vw` |
-
-### Outline
-
-| Token | Default |
-|-------|---------|
-| `--theme-pill-outline` | `none` |
-| `--theme-pill-outline-offset` | `0px` |
-
-### Typography & spacing
-
-| Token | Default |
-|-------|---------|
-| `--theme-pill-font-size` | `1.2rem` |
-| `--theme-pill-font-size-sm` | `1rem` |
-| `--theme-pill-font-size-lg` | `1.4rem` |
-| `--theme-pill-font-weight` | `500` |
-| `--theme-pill-padding-x` | `1rem` |
-| `--theme-pill-padding-y` | `0.4rem` |
-| `--theme-pill-gap` | `0.5rem` |
-| `--theme-pill-icon-size` | `1.4rem` |
-
-## Theming via styleClassPassthrough
-
-Override tokens by targeting `.your-class.display-pill` — no `:deep()` needed:
+Full token list in `CONSUMER-STYLING.md` next to the component. All tokens are `--display-pill-*` (renamed from `--theme-pill-*` on 2026-09-27; `bg`/`color` became `background`/`text-colour`).
+
+Colour resolves as **variant token → base token → variant default**: `--display-pill-background`/`-text-colour` restyle every variant; `--display-pill-success-background` etc. win for that variant only. Sizes have `-sm`/`-lg` suffixed tokens for font size and icon size only; padding and gap are the icon size times a ratio (`--display-pill-padding-inline-ratio` 0.7, `-padding-inline-icon-ratio` 0.4, `-padding-block-ratio` 0.3, `-gap-ratio` 0.35), so spacing scales with the pill. Absolute `--display-pill-padding-inline`/`-padding-block`/`-gap` tokens still override. The icon side of a pill gets `--display-pill-padding-inline-icon` (tighter than `--display-pill-padding-inline`), placed by `data-icon-position` (`start`, `end` when `reversed`, `only` for icon-only, absent with no icon), so label-only pills stay evenly padded.
 
 ```vue
 <DisplayPill label="New" variant="primary" style-class-passthrough="pill-new" />
@@ -125,33 +77,22 @@ Override tokens by targeting `.your-class.display-pill` — no `:deep()` needed:
 
 ```css
 .pill-new.display-pill {
-  --theme-pill-primary-bg: var(--green-01);
-  --theme-pill-primary-color: var(--green-10);
-  --theme-pill-border-color: currentColor;
-  --theme-pill-border-width: 1.5px;
-}
-```
-
-## Border and outline examples
-
-```css
-/* Solid border */
-.bordered.display-pill {
-  --theme-pill-border-color: currentColor;
-  --theme-pill-border-width: 1.5px;
+  --display-pill-primary-background: var(--green-01);
+  --display-pill-primary-text-colour: var(--green-10);
+  --display-pill-border-colour: currentColor;
+  --display-pill-border-width: 0.15rem;
 }
 
 /* Dashed border */
 .dashed.display-pill {
-  --theme-pill-border-color: currentColor;
-  --theme-pill-border-width: 1.5px;
-  --theme-pill-border-style: dashed;
+  --display-pill-border-colour: currentColor;
+  --display-pill-border-style: dashed;
 }
 
-/* Focus-ring style outline */
-.outlined.display-pill {
-  --theme-pill-outline: 2px solid currentColor;
-  --theme-pill-outline-offset: 3px;
+/* Decorative outline ring */
+.ringed.display-pill {
+  --display-pill-outline: 0.2rem solid currentColor;
+  --display-pill-outline-offset: 0.3rem;
 }
 ```
 
@@ -160,3 +101,4 @@ Override tokens by targeting `.your-class.display-pill` — no `:deep()` needed:
 - `border-radius` defaults to `100vw` — this always collapses to the tightest possible radius on the shorter axis, making it geometry-independent (no magic number needed).
 - `cursor: default` and `user-select: none` are applied unconditionally. `cursor: pointer` is applied automatically via `:is(button, a)` when `tag` is interactive.
 - All variant colour pairs use a light-tint background (`--color-01`) with a dark text colour (`--color-09`/`--color-10`) to ensure WCAG AA contrast. The project colour scale runs `00` (lightest) → `10` (darkest) — the opposite of Tailwind.
+- 2026-09-27 migration: tokens renamed `--theme-pill-*` → `--display-pill-*`; variants now fall back to the base colour tokens (so `ServiceSummary`/`ServiceDetail`'s pill overrides finally apply); `warning` moved from a non-existent `--yellow-*` ramp (hex fallbacks) to `--orange-01`/`--orange-10`; icon slot wrapped and sized (the icon-size tokens were unused); `.pill-label` → `.display-pill-label`; `button` pills get `type="button"` and a visible focus outline (the base `outline: none` suppressed it); single-use private pass-throughs inlined.

package/.claude/skills/components/display-prompt.md

@@ -1,12 +1,14 @@
 # DisplayPrompt
 
+> **Changed 2026-09-28:** root class `.display-prompt-core` → `.display-prompt` (and `data-test-id` `display-prompt-core-{theme}` → `display-prompt-{theme}`). The documented `outlined` passthrough modifier never had any CSS behind it and was removed from this doc.
+
 ## Overview
 
 `DisplayPrompt` is an inline notification banner with a themed icon, title, optional content, and
 an optional dismiss button. It collapses in-place via CSS grid animation rather than removing from
 the DOM. Dismiss can be controlled locally (closes itself) or by a parent via `v-model`.
 
-**Location**: `app/components/01.atoms/prompt/DisplayPrompt.vue`
+**Location**: `app/components/02.molecules/prompt/DisplayPrompt.vue`
 **Types**: `~/types/components` — `DisplayPromptTheme`, `SemanticTheme`
 
 ## Props
@@ -17,7 +19,8 @@ the DOM. Dismiss can be controlled locally (closes itself) or by a parent via `v
 | `dismissible` | `boolean` | `false` | Shows a close button. |
 | `useAutoFocus` | `boolean` | `false` | Focuses the prompt root element on mount. |
 | `masked` | `boolean` | `false` | SVG glass border — swaps `AlertContent` for `AlertMaskedContent`. |
-| `styleClassPassthrough` | `string \| string[]` | `[]` | Extra classes on the inner wrapper. Supported modifier: `"outlined"`. |
+| `closeLabel` | `string` | `"Close this prompt"` | Screen-reader label for the dismiss button. Also settable via `app.config`; the `#customTitle` slot still overrides it. |
+| `styleClassPassthrough` | `string \| string[]` | `[]` | Extra classes on the inner `.display-prompt-wrapper` (not the root). Reactive after mount. |
 | `v-model` | `boolean` | `false` | Optional parent control — see dismiss behaviour below. |
 
 ## Slots
@@ -28,7 +31,7 @@ the DOM. Dismiss can be controlled locally (closes itself) or by a parent via `v
 | `#content` | Body text below the title. The `<p>` element is omitted when this slot is empty. |
 | `#customDecoratorIcon` | Replaces the default theme icon. |
 | `#customCloseIcon` | Replaces the default × close icon inside the dismiss button. |
-| `#customTitle` | Screen-reader label for the dismiss button (default: `"Close this prompt"`). |
+| `#customTitle` | Screen-reader label for the dismiss button (defaults to the `closeLabel` prop). |
 
 ## Themes
 
@@ -53,7 +56,9 @@ Two modes depending on whether `v-model` is bound:
 | `v-model="true"` | Emits `update:modelValue = false`; internal state unchanged — parent controls visibility |
 
 The `.closed` class triggers a CSS grid row animation (`grid-template-rows: 1fr → 0fr`) with
-`opacity: 0` and `pointer-events: none`.
+`opacity: 0` and `pointer-events: none`, and the root becomes `inert` so the dismiss button leaves the
+tab order and the accessibility tree. The transition is off under `prefers-reduced-motion: reduce`;
+its duration is `--display-prompt-transition-duration` (`200ms`).
 
 ## app.config defaults
 
@@ -69,6 +74,7 @@ export default defineAppConfig({
       dismissible: true,
       masked: false,
       useAutoFocus: false,
+      closeLabel: "Fermer",
     },
   },
 })
@@ -114,20 +120,6 @@ const showPrompt = ref(true)
 </template>
 ```
 
-## `styleClassPassthrough` modifiers
-
-| Class | Effect |
-|---|---|
-| `"outlined"` | Adds `1px solid var(--theme-border)` border to the wrapper |
-
-Apply via prop:
-
-```vue
-<DisplayPrompt :style-class-passthrough="['outlined']" theme="error">
-  <template #title>Something went wrong.</template>
-</DisplayPrompt>
-```
-
 ## CSS token override
 
 Scope overrides using your page or section wrapper class — no `:deep()` needed:
@@ -156,7 +148,7 @@ glass effect to be visible.
 ## Notes
 
 - `DisplayPromptTheme` is an alias for `SemanticTheme` (`"info" | "success" | "warning" | "error"`).
-- The root element always has `tabindex="0"` — it is focusable whether or not `dismissible` is set.
+- The root gets `tabindex="-1"` only when `useAutoFocus` is on, so it can take programmatic focus without joining the tab order (it used to be `tabindex="0"` always).
 - `useAutoFocus` focuses the root element on mount (useful when injecting a prompt in response to a
   user action that has already moved focus elsewhere).
 - The `#title` slot renders unconditionally — an empty title `<p>` will still appear. Always

package/.claude/skills/components/display-qr-code.md

@@ -14,6 +14,7 @@ Renders a styled QR code SVG from a string value. Supports colour, size, corner
 | `black-color` | `string` | `"currentColor"` | Colour for the dark modules |
 | `white-color` | `string` | `"transparent"` | Colour for the light modules |
 | `size` | `string` | `"256px"` | Width of the QR code (height matches via `aspect-ratio: 1 / 1`) |
+| `aria-label` | `string` | `"QR code"` | Accessible name for the QR image (root has `role="img"`). Pass something specific and translated, e.g. "Scan to book an appointment". |
 | `style-class-passthrough` | `string \| string[]` | `[]` | Extra classes on the root element |
 
 ### QrCodeVariant type
@@ -29,6 +30,10 @@ const variant: QrCodeVariant = {
 };
 ```
 
+## CSS token
+
+`--display-qr-code-size` overrides the `size` prop when set (e.g. on a page wrapper). Full reference: `app/components/01.atoms/qr-code/CONSUMER-STYLING.md`.
+
 ## CSS classes
 
 | Class | Where | Description |

package/.claude/skills/components/display-theme-switch.md

@@ -1,6 +1,6 @@
 ---
 name: DisplayThemeSwitch
-description: DisplayThemeSwitch system/light/dark theme picker wired to useSettingsStore, wraps TripleToggleSwitchCore
+description: DisplayThemeSwitch system/light/dark theme picker wired to useSettingsStore, wraps TripleToggleSwitch
 type: reference
 ---
 
@@ -9,7 +9,7 @@ type: reference
 ## Overview
 
 `DisplayThemeSwitch` is a system/light/dark colour-scheme picker. It's a thin wrapper around
-`TripleToggleSwitchCore` (`app/components/05.forms/triple-toggle-switch/`), wired to
+`TripleToggleSwitch` (`app/components/05.forms/triple-toggle-switch/`), wired to
 `useSettingsStore` (`app/stores/useSettingsStore.ts`) so selecting an option updates the app's
 `colourScheme` state and applies the matching class (`system`/`light`/`dark`) to
 `<html>`. Renders inside `<ClientOnly>` since the store's persisted value isn't known until
@@ -20,6 +20,7 @@ hydration.
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `styleClassPassthrough` | `string \| string[]` | `[]` | Extra classes on the root. Pass `"small"` for compact sizing. |
+| `ariaLabel` | `string` | `"Colour scheme"` | Accessible name for the radiogroup. |
 | `systemLabel` | `string` | `"System"` | Accessible label for the system option. |
 | `lightLabel` | `string` | `"Light"` | Accessible label for the light option. |
 | `darkLabel` | `string` | `"Dark"` | Accessible label for the dark option. |
@@ -42,8 +43,8 @@ hydration.
 ## Styling
 
 No `--display-theme-switch-*` tokens of its own — every visual aspect (colour, marker gradient,
-sizing) is delegated to `TripleToggleSwitchCore`'s public `--triple-toggle-switch-*` tokens. See
-CONSUMER-STYLING.md here and `TripleToggleSwitchCore`'s own CONSUMER-STYLING.md.
+sizing) is delegated to `TripleToggleSwitch`'s public `--triple-toggle-switch-*` tokens. See
+CONSUMER-STYLING.md here and `TripleToggleSwitch`'s own CONSUMER-STYLING.md.
 
 ## Notes
 
@@ -51,10 +52,10 @@ CONSUMER-STYLING.md here and `TripleToggleSwitchCore`'s own CONSUMER-STYLING.md.
   `02.molecules/`. Added `systemLabel`/`lightLabel`/`darkLabel`/`systemIcon`/`lightIcon`/`darkIcon`
   props — the three option labels/icons were previously hardcoded English strings with no override
   hook. Removed a large block of dead/duplicate CSS in this component's own `<style>` that either
-  no-op-duplicated `TripleToggleSwitchCore`'s own default styling (same selectors, same values) or
+  no-op-duplicated `TripleToggleSwitch`'s own default styling (same selectors, same values) or
   actively bypassed its public `--triple-toggle-switch-*` tokens with hardcoded literals (a
   consumer setting e.g. `--triple-toggle-switch-surface` globally would have been silently
   overridden back). Only the genuine `small`-variant sizing override remains, now driving
-  `TripleToggleSwitchCore`'s own public sizing tokens (`--triple-toggle-switch-gap`/`-padding`/
+  `TripleToggleSwitch`'s own public sizing tokens (`--triple-toggle-switch-gap`/`-padding`/
   `-option-padding`/`-icon-size`, added in the same migration) instead of reaching into its
   private `--_form-*`/`--_scheme-icon-font-size` locals directly.

package/.claude/skills/components/display-toast.md

@@ -11,10 +11,9 @@ Two patterns are available depending on the use case:
 
 **Locations**:
 
-- `app/components/01.atoms/toast/DisplayToast.vue`
-- `app/components/01.atoms/toast/DisplayToastProvider.vue`
+- `app/components/02.molecules/toast/DisplayToast.vue`
+- `app/components/02.molecules/toast/DisplayToastProvider.vue`
 - `app/composables/useToastQueue.ts`
-- `app/components/01.atoms/toast/molecules/DefaultToastContent.vue`
 
 **Types**: `~/types/components` — `DisplayToastConfig`, `DisplayToastTheme`, `ToastQueueEntry`, `ToastQueueStatus`
 
@@ -81,7 +80,7 @@ Resolution chain: **`config` prop → app.config → hardcoded fallback**.
 
 | Slot | Description |
 |---|---|
-| `default` | Replaces `DefaultToastContent` entirely. `has-theme`, `tabindex`, and `aria-describedby` are omitted — accessibility is the caller's responsibility. |
+| `default` | Replaces the built-in `AlertContent`/`AlertMaskedContent` entirely. `has-theme`, `tabindex`, and `aria-describedby` are omitted — accessibility is the caller's responsibility. |
 | `#customToastIcon` | Replaces the default theme icon. |
 | `#title` | Replaces `config.content.title`. Do not provide both slot and config value. |
 | `#description` | Replaces `config.content.description`. Do not provide both slot and config value. |
@@ -224,11 +223,11 @@ appearing behind a consumer's own sticky header.
 
 ### Masked variant
 
-Setting `appearance.masked: true` swaps `AlertContent` for `AlertMaskedContent`, which uses an SVG-based border and a semi-transparent background (`rgba(0,0,0,0.3)`) so page content is faintly visible beneath the toast.
+Setting `appearance.masked: true` swaps `AlertContent` for `AlertMaskedContent`, which uses an SVG-based border and a semi-transparent background (the theme's `--theme-surface-subtle` at 80%) so page content is faintly visible beneath the toast.
 
 The SVG border shape matches the standard toast exactly (8px left radius, 4px right, 6px accent-colour left bar via `--theme-accent`). Override any dimension or colour via a `maskConfig` prop if using `AlertMaskedContent` standalone.
 
-The inner content layout is handled by the shared `AlertContentInner` molecule — both variants reuse it. `AlertMaskedContent` overrides `--_alert-content-inner-bg: transparent` so the glass effect shows through.
+The inner content layout is handled by the shared `AlertContentInner` molecule — both variants reuse it. `AlertMaskedContent` sets `--alert-content-inner-background: transparent` so the glass effect shows through.
 
 ### Provider notes
 

package/.claude/skills/components/entry-animation.md

@@ -67,7 +67,7 @@ every item, it just omits the animation class for the ones that don't need it:
 
 None — this component has no `--entry-animation-*` tokens or CSS of its own. The animation
 keyframes, timing, and `prefers-reduced-motion` guard live in the shared utility class
-(`entry-slide-in`/`entry-zoom-reveal`/`entry-exit-blur`), not in this component.
+(`entry-slide-in`/`entry-zoom-reveal`/`entry-exit-blur`), not in this component. Full reference: `app/components/01.atoms/animations/entry/CONSUMER-STYLING.md`.
 
 ---
 
@@ -82,7 +82,4 @@ keyframes, timing, and `prefers-reduced-motion` guard live in the shared utility
 
 ## Notes
 
-- **No animation reactivity**: `animationType`/`skipAnimation` are read once at mount to toggle the
-  utility class — changing either prop after mount does not currently re-toggle the class. This
-  matches the component's existing usage pattern (animation type is always set once per instance,
-  never swapped at runtime); flag it if a future consumer needs runtime toggling.
+- **Reactive**: `animationType`, `skipAnimation` and `styleClassPassthrough` can all change after mount; the animation class is bound in the template (it used to be set once at setup, fixed 2026-09-27). Note that switching the class on an element already in view restarts its scroll-driven timeline from wherever the scroll position currently is.

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

@@ -61,11 +61,13 @@ EyebrowText is commonly placed directly above a `HeroText` heading:
 
 | Value | CSS variable |
 |-------|-------------|
-| `large` | `--eyebrow-text-large` |
-| `medium` | `--eyebrow-text-medium` |
-| `small` | `--eyebrow-text-small` |
+| `large` | `--eyebrow-text-large` (default `1.4rem`) |
+| `medium` | `--eyebrow-text-medium` (default `1.2rem`) |
+| `small` | `--eyebrow-text-small` (default `1rem`) |
 
-Define these CSS custom properties in your consuming app to control sizes.
+The library theme sets these on `:root`; the component has matching fallbacks. The text is filled
+with `--eyebrow-text-bg-img` (gold/rose gradient by default) via `background-clip: text`. Full
+reference: `app/components/01.atoms/text-blocks/eyebrow-text/CONSUMER-STYLING.md`.
 
 ## Styling