srcdev-nuxt-components 9.6.19 → 9.6.20

package/.claude/rules/consumer/ids-from-useid.md

@@ -7,11 +7,12 @@ paths:
 
 Build `id`/`for` pairs from `useId()` (plus a loop index for repeated items), never from props or
 data values like `` `${name}-${item.value}` ``. A radio group's default `name` comes from
-`useId()` too, never a fixed string. Call `useId()` once at setup and store the result; never call
+`useId()` too, never a fixed string, and so does a `<details name>` exclusive group. Call `useId()` once at setup and store the result; never call
 it inside a `computed`, which can re-run it.
 
 Why: two instances sharing a `name` and values produce duplicate ids, and a value with spaces makes
 an invalid one, so labels toggle the wrong control (`MultipleCheckboxes`, 2026-10-16). A fixed default radio `name` makes every instance on a page
-one group, so picking in one clears the others (`SegmentedControl`, 2026-10-17). Test
+one group, so picking in one clears the others (`SegmentedControl`, 2026-10-17); a fixed `<details>`
+`name` did the same across every `DeepExpandingMenuClassic` on a page (fixed 2026-10-21). Test
 uniqueness with both instances inside one host component: separate `mountSuspended` calls each
 restart the `useId()` counter. Detail: skill `testing-add-unit-test.md` (srcdev-nuxt-components).

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

@@ -140,6 +140,11 @@ The ledger can't see items 6c, 9, 10, 11 and 14, so check those by hand.
       `computed()`: Vue renders nothing for a fractional or negative range and only warns in dev
       (`StepperList`, 2026-10-15)
     - broken image or link URLs
+    - an empty list where script loops over the data: a `while` loop that walks or cycles the
+      items must still terminate, and an async loop must await something on every pass, or the
+      tab freezes. `SamaritanPromptMixed` (empty `messageConfigs` with `introDelay: 0`) and
+      `CarouselFlip` (empty `carouselDataIds`) both did, fixed 2026-10-21. Grep the script for
+      `while (` and check each one with zero and one item
     - data a third-party child can't handle: a library that throws while rendering (an encoder, a
       parser) breaks the whole page render. Catch it with `onErrorCaptured` and render a fallback
       (`DisplayQrCode` threw "Data too long" on an over-capacity value until 2026-10-19). Check story

package/.claude/skills/components/auto-grid.md

@@ -37,11 +37,13 @@ When filling from a data array, use a dynamic slot name in a `v-for`:
 | Prop (template form)       | Type                                        | Default | Notes                                         |
 | -------------------------- | ------------------------------------------- | ------- | --------------------------------------------- |
 | `tag`                      | `"div" \| "section" \| "article" \| "main"` | `"div"` | Use a semantic tag for page landmark regions. |
-| `is-responsive`            | `boolean`                                   | `false` | Adds `.is-responsive`: column minimum steps small → default → large via `@container` queries at 768px / 1024px. Needs a `container-type: inline-size` ancestor. |
+| `is-responsive`            | `boolean`                                   | `false` | Adds `data-responsive` (was the class `.is-responsive` until 2026-10-21): column minimum steps small → default → large via `@container` queries at 768px / 1024px. Needs a `container-type: inline-size` ancestor. |
 | `:style-class-passthrough` | `string \| string[]`                        | `[]`    | Extra CSS classes on the root element.        |
 
 ---
 
+Each slotted item gets `min-inline-size: 0`, so an unbroken string can't widen its column. The `StressTest` story feeds every cell oversized content (an unbroken string and URL, long German, a 1600px image, emoji, right-to-left, an empty cell).
+
 ## CSS custom properties
 
 Set these on the grid itself (`style`, passthrough class) or on any ancestor you own; they inherit

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

@@ -25,13 +25,14 @@ Camera access requires a secure context (HTTPS or localhost) and the user granti
 |------|------|---------|-------------|
 | `camera-stopped-label` | `string` | `"Camera stopped"` | Message while the camera is stopped (tab hidden, route leave) |
 | `reset-camera-label` | `string` | `"Reset camera"` | Reset button text in the error state |
+| `error-messages` | `CaptureQrCodeErrorMessages` | `{}` | Error copy keyed by error name (`NotAllowedError`, `NotFoundError`, `NotSupportedError`, `NotReadableError`, `OverconstrainedError`, `StreamApiNotSupportedError`, `InsecureContextError`, `StreamLoadTimeoutError`) plus `default`. Each key falls back to a built-in plain-English message; any other error name uses `default`. Type from `~/types/components`. |
 | `style-class-passthrough` | `string \| string[]` | `[]` | Extra classes on the root element |
 
 ## Slots
 
 | Slot | Scope | Description |
 |------|-------|-------------|
-| `#error` | `{ error, message, reset }` | Replaces the default error content (message + reset button). `error` is the `Error.name` (e.g. `NotAllowedError`), so you can show your own translated copy per case; call `reset()` to retry. |
+| `#error` | `{ error, message, reset }` | Replaces the default error content (message + reset button). `message` is the resolved `errorMessages` text. `error` is the `Error.name` (e.g. `NotAllowedError`), so you can show your own translated copy per case; call `reset()` to retry. |
 
 ## CSS classes
 
@@ -40,15 +41,17 @@ Camera access requires a secure context (HTTPS or localhost) and the user granti
 | `.capture-qr-code` | root | always present |
 | `.capture-qr-code-stopped` | inner | shown when camera is off but no error |
 | `.capture-qr-code-error` | inner | shown when an error has occurred |
-| `.capture-qr-code-results` | inner | polite live region, always rendered; its `<ul>` appears once a code is decoded |
+| `.capture-qr-code-results` | inner | polite live region, always rendered; its `.capture-qr-code-results-list` `<ul>` appears once a code is decoded |
+| `.capture-qr-code-result` | `<li>` | one decoded value; wraps anywhere |
+| `.capture-qr-code-error-message` | `<p>` | default error text |
 
 ## Behaviour
 
 - Camera starts automatically on mount (`state.cameraOn = true`)
-- When the page becomes hidden (tab switch, minimize), the camera stops and media streams are released
+- When the page becomes hidden (tab switch, minimize), the camera stops and media streams are released; when it becomes visible again the camera restarts, unless an error is showing (until 2026-10-21 it stayed on "Camera stopped" with no way back)
 - On route leave (`onBeforeRouteLeave`), the camera stops and streams are released
 - On `<KeepAlive>` deactivate/activate, camera is stopped/restarted accordingly
-- If the user denies camera permission or another error occurs, the `.capture-qr-code-error` state is shown with the error message and a **Reset camera** button
+- If the user denies camera permission or another error occurs, the `.capture-qr-code-error` state is shown with a plain-language message (from `errorMessages`, not the library's raw `[Name]: message` text, which it showed until 2026-10-21) and a **Reset camera** button
 - Detected QR codes replace the previous results — each scan is a fresh result set
 - Results are displayed as a `<ul>` inside `.capture-qr-code-results`
 
@@ -91,4 +94,5 @@ The root element is a square (`aspect-ratio: 1 / 1`) by default. Override in a c
 ## Notes
 
 - The component does not emit the detected values — results are rendered inline. To act on scan results in a parent, extend the component or use `nuxt-qrcode`'s `QrcodeStream` directly with `@detect`.
-- Media streams are stopped via two strategies: via the `QrcodeStream` component ref and via a document-level `querySelectorAll("video")` sweep — the sweep acts as a safety net if the ref is unavailable.
+- Media streams are stopped by sweeping `<video>` elements inside the component's own root. Until 2026-10-21 it also swept every `<video>` in the document, which stopped any other camera or call stream on the page.
+- 2026-10-21 migration: `errorMessages` prop, visible-again restart, own-root stream cleanup, wrapping results, `StressTest` story (simulation buttons drive the internal handlers, since Storybook can't fake a camera).

package/.claude/skills/components/carousel-flip.md

@@ -14,8 +14,7 @@ dynamic slots keyed by `carouselDataIds`. It supports swipe, arrow-key, marker-c
 prev/next-button navigation, and four `buttonLayout` variants for positioning the prev/next
 buttons relative to the marker controls.
 
-Has live production usage in a consumer app — check before making a breaking change to its
-default rendered output.
+No consumer app uses it as of 2026-10-21 (an earlier note said one did; a scan found none).
 
 ## Props
 
@@ -27,12 +26,12 @@ default rendered output.
 | `allowCarouselOverflow` | `boolean` | `false` | Allows items to overflow the item track horizontally instead of clipping. |
 | `useFlipAnimation` | `boolean` | `false` | Changes the initial item offset used in the FLIP reorder calculation. |
 | `useSpringEffect` | `boolean` | `false` | Uses `var(--spring-easing)` as the transition timing function instead of `ease`. |
-| `buttonLayout` | `"sides" \| "controls-flanking" \| "controls-grouped-right" \| "overlay"` | `"sides"` | Where the prev/next buttons sit relative to the carousel/controls. |
+| `buttonLayout` | `"sides" \| "controls-flanking" \| "controls-grouped-right" \| "overlay" \| "track-edges"` | `"sides"` | Where the prev/next buttons sit relative to the carousel/controls. |
 | `showControls` | `boolean` | `true` | Shows/hides the marker (dot) controls bar. Prev/next buttons remain regardless. |
 | `ariaLabel` | `string` | `"Image carousel"` | `aria-label` on the root region — override for localisation. |
 | `itemsAriaLabel` | `string` | `"Carousel items"` | `aria-label` on the item group — override for localisation. |
-| `previousLabel` | `string` | `"Go to previous item"` | Prev button `aria-label` — override for localisation. |
-| `nextLabel` | `string` | `"Go to next item"` | Next button `aria-label` — override for localisation. |
+| `previousLabel` | `string` | `"Go to previous item"` | Prev button accessible name (its visually hidden text) — override for localisation. |
+| `nextLabel` | `string` | `"Go to next item"` | Next button accessible name (its visually hidden text) — override for localisation. |
 | `jumpToItemLabel` | `string` | `"Jump to item"` | Marker button `aria-label` prefix — the 1-based index is appended (`"Jump to item 3"`). |
 | `itemPositionAnnouncement` | `(current: number, total: number) => string` | `` (current, total) => `Item ${current} of ${total}` `` | Builds the screen-reader live-region text on navigation — override for localisation or a different phrasing. |
 | `prevIcon` | `string` | `"ic:outline-keyboard-arrow-left"` | Iconify name for the previous button icon. Ignored if the `prev-icon` slot is used. |
@@ -64,10 +63,12 @@ One dynamically-named slot per `carouselDataIds` entry, named after that id:
 ## Navigation
 
 - **Swipe** (touch): left swipe → next, right swipe → previous.
-- **Keyboard**: `ArrowLeft`/`ArrowRight` on either the item track or the controls bar (both are
-  `tabindex="0"`).
+- **Keyboard**: `ArrowLeft`/`ArrowRight` while the item track (`tabindex="0"`) or a marker has
+  focus. The controls bar itself is no longer a tab stop (it was `tabindex="0"` with no name until
+  2026-10-21).
 - **Marker click**: jumps directly to that item.
-- **Prev/next buttons**: always rendered, regardless of `showControls`.
+- **Prev/next buttons**: `InputButton variant="inline"` with an `iconOnly` slot; rendered regardless
+  of `showControls`, but only when there are at least two items (the markers too).
 - All navigation wraps around at the ends.
 
 ## `buttonLayout` variants
@@ -77,31 +78,35 @@ One dynamically-named slot per `carouselDataIds` entry, named after that id:
 - `"controls-grouped-right"`: markers centred, prev/next buttons grouped to the right of them.
 - `"overlay"`: markers float over the bottom edge of the item track instead of occupying their
   own grid row.
+- `"track-edges"` (added 2026-10-21): prev/next overlay the ends of the visible track, inset by
+  `--carousel-flip-button-edge-inset` (default: the edge-preview width plus `0.8rem`), so they sit
+  on the active frame. Use it with `allowCarouselOverflow`, where `"sides"` leaves the buttons at
+  the component box's edges, over the neighbouring items that peek out past it.
+
+Placement tokens (added 2026-10-21): `--carousel-flip-button-align` (`start`/`center`/`end`,
+vertical) and `--carousel-flip-button-inline-offset` (`sides` and `controls-flanking`: pushes each
+button outward, negative pulls it inward; mirrors in RTL via `:dir(rtl)`). For the viewport edges
+of a centred carousel of known width: `calc((100vw - <that width>) / 2 - 1.6rem)`. A percentage
+won't work, since `translate` percentages resolve against the button.
 
 ## CSS token API
 
-See [CONSUMER-STYLING.md](../../app/components/03.organisms/image-galleries/carousel-flip/CONSUMER-STYLING.md).
-
-| Token | Default | Controls |
-|---|---|---|
-| `--carousel-flip-gap` | `1rem` | Gap between items inside the item track |
-| `--carousel-flip-layout-gap` | `1rem` | Grid gap between the prev/carousel/next/controls areas |
-| `--carousel-flip-display-max-width` | `80rem` | Max width of the item track and the controls bar |
-| `--carousel-flip-item-max-width` | `80rem` | Max width of a single item, before subtracting the edge-preview width |
-| `--carousel-flip-edge-preview-width` | `4rem` | How much of the neighbouring items peek in at each edge |
-| `--carousel-flip-marker-gap` | `1rem` | Gap between marker (dot) buttons |
-| `--carousel-flip-marker-active-colour` | `var(--slate-10)` | Active marker background colour |
-| `--carousel-flip-button-background-colour` | `white` | Prev/next button background colour |
-| `--carousel-flip-button-border-width` | `0.1rem` | Prev/next button border width |
-| `--carousel-flip-button-border-colour` | `hsl(0, 29%, 3%)` | Prev/next button border colour |
-| `--carousel-flip-button-border-radius` | `100vw` | Prev/next button corner radius |
-| `--carousel-flip-button-padding` | `0.8rem` | Prev/next button padding |
-| `--carousel-flip-button-icon-size` | `2.4rem` | Prev/next button icon glyph size |
-| `--carousel-flip-buttons-gap` | `1rem` | Gap between prev/next buttons in the `controls-grouped-right` layout |
-| `--carousel-flip-overlay-controls-offset` | `1rem` | Distance of the controls bar from the bottom edge in the `overlay` layout |
-| `--carousel-flip-focus-outline-width` | `0.2rem` | Marker button focus-visible outline width |
-| `--carousel-flip-focus-outline-colour` | `var(--theme-ring)` | Marker button focus-visible outline colour |
-| `--carousel-flip-focus-outline-offset` | `0.2rem` | Marker button focus-visible outline offset |
+Full table, state hooks and class names: [CONSUMER-STYLING.md](../../app/components/03.organisms/image-galleries/carousel-flip/CONSUMER-STYLING.md).
+Tokens are `--carousel-flip-*`: gaps and max widths, edge preview, marker gap and active colour,
+prev/next button colours, border, radius, padding and icon size/colour, and the focus outline.
+Colours default from `--theme-surface`, `--theme-surface-subtle`, `--theme-border`,
+`--theme-text` and `--theme-ring`.
+
+## Data handling
+
+- `itemCount` follows `carouselDataIds` after mount (it was frozen at the mount-time length until
+  2026-10-21, so adding items left the markers and announcement stale). When the list changes, the
+  layout is rebuilt and the active item resets to the first if it was removed.
+- An empty `carouselDataIds` renders an empty track. Until 2026-10-21 it sent `reorderItems` into
+  an infinite loop on mount and froze the tab.
+- Items are keyed on index + id, so a repeated id still renders (both items show that slot).
+- Item content wraps (`min-inline-size: 0`, `overflow-wrap: anywhere`), the centre grid column is
+  `minmax(0, 1fr)`, and the markers wrap onto more rows. The `StressTest` story covers all of these.
 
 ## Accessibility
 
@@ -114,6 +119,12 @@ See [CONSUMER-STYLING.md](../../app/components/03.organisms/image-galleries/caro
 
 ## Notes
 
+- 2026-10-21 migration: prefixed every structural class and moved state classes to `data-*`
+  attributes (see CONSUMER-STYLING.md), prev/next became `InputButton`, theme-token colour defaults,
+  `transitionSpeed` and the class passthrough became reactive, `aria-current` is omitted (not
+  `"false"`) on inactive items, and the spec lost a dead `#imports` mock of
+  `useStyleClassPassthrough` that never applied.
+
 - Migrated from `app/components/carousels/CarouselFlip.vue` (unplaced, legacy location) to
   `03.organisms/image-galleries/carousel-flip/` on 2026-09-21, alongside `SliderGallery`.
 - Sibling components `CarouselBasic` and `CarouselInfinite` were deleted in the same migration —

package/.claude/skills/components/column-flow-grid.md

@@ -82,6 +82,8 @@ properties, since they need JS-computed values rather than being purely CSS-driv
 
 ## Notes
 
+- The `StressTest` story feeds every cell oversized content (an unbroken string and URL, long German, a 1600px image, emoji, right-to-left, an empty cell).
+
 - **Renamed from `MasonryGrid`** (2026-09-13) — see **Which one do I want?** above for why. If you
   have consumer code importing this as `MasonryGrid`, it needs updating to `ColumnFlowGrid`; the
   props and behaviour are otherwise unchanged. CSS classes/tokens were renamed to match

package/.claude/skills/components/dashboard-quad-grid.md

@@ -50,6 +50,11 @@ column count instead, use `LayoutGridByCols` (fixed count) or `AutoGrid` (auto-f
 
 ---
 
+## Cell classes
+
+Each slot renders in a `.dashboard-quad-grid-cell` with `.dashboard-quad-grid-slot-1` to `-slot-4`
+(`.slot1` to `.slot4` until 2026-10-21). The `StressTest` story feeds every cell oversized content (an unbroken string and URL, long German, a 1600px image, emoji, right-to-left, an empty cell).
+
 ## CSS token API
 
 See [CONSUMER-STYLING.md](../../app/components/01.atoms/content-wrappers/layout-grid/dashboard-quad-grid/CONSUMER-STYLING.md).
@@ -59,10 +64,10 @@ See [CONSUMER-STYLING.md](../../app/components/01.atoms/content-wrappers/layout-
 | `--dashboard-quad-grid-gap` | `2rem` | Gap between the four slot panels |
 | `--dashboard-quad-grid-padding` | `2rem` | Padding inside each slot panel |
 | `--dashboard-quad-grid-outline-width` | `0.1rem` | Slot panel outline width |
-| `--dashboard-quad-grid-outline-colour` | `black` | Slot panel outline colour |
+| `--dashboard-quad-grid-outline-colour` | `var(--theme-border)` | Slot panel outline colour |
 | `--dashboard-quad-grid-outline-offset` | `0` | Slot panel outline offset |
 | `--dashboard-quad-grid-border-width` | `0` | Slot panel border width (off by default — the panel edge is drawn by the outline) |
-| `--dashboard-quad-grid-border-colour` | `black` | Slot panel border colour, only visible once `--dashboard-quad-grid-border-width` is set |
+| `--dashboard-quad-grid-border-colour` | `var(--theme-border)` | Slot panel border colour, only visible once `--dashboard-quad-grid-border-width` is set |
 | `--dashboard-quad-grid-border-radius` | `0.5rem` | Slot panel corner radius |
 | `--dashboard-quad-grid-rule-width` | `0.1rem` | Width of the grid gap rule line (CSS Gap Decorations, limited browser support) |
 | `--dashboard-quad-grid-rule-colour` | `transparent` | Colour of the grid gap rule line, invisible by default |

package/.claude/skills/components/dashboard-stats-grid.md

@@ -32,6 +32,10 @@ top-row slots and overall shape are fixed.
 
 ---
 
+The two counts are floored, and a negative or non-finite count renders no panels (until 2026-10-21 a
+fractional count rendered none at all, since Vue skips a fractional `v-for` range). Element classes
+are prefixed `.dashboard-stats-grid-*` (see CONSUMER-STYLING.md). The `StressTest` story feeds every cell oversized content (an unbroken string and URL, long German, a 1600px image, emoji, right-to-left, an empty cell).
+
 ## Props reference
 
 | Prop (template form) | Type | Default | Notes |

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

@@ -25,6 +25,8 @@ No camera permission is required — this component works entirely with uploaded
 |------|------|---------|-------------|
 | `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 |
+| `no-result-label` | `string` | `"No QR code was found in that image."` | Shown when an image decodes but contains no QR code. Empty string shows nothing |
+| `read-error-label` | `string` | `"That file couldn't be read as an image."` | Shown when the drop zone reports an error (a dropped file or URL that isn't a readable image). Empty string shows nothing |
 | `style-class-passthrough` | `string \| string[]` | `[]` | Extra classes on the root element |
 
 ## CSS classes
@@ -35,7 +37,8 @@ No camera permission is required — this component works entirely with uploaded
 | `.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-dropzone[data-dropping]` | drop zone | an image is being dragged over it (was `.is-dropping` until 2026-10-21) |
+| `.decode-qr-code-status` | `<p>` | the no-result or (with `[data-error]`) read-error message |
 | `.decode-qr-code-results` | inner | polite live region, always rendered; its `<ul>` appears once a code is decoded |
 
 ## Behaviour
@@ -43,7 +46,8 @@ No camera permission is required — this component works entirely with uploaded
 - 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, the results `<ul>` isn't rendered (the live-region wrapper stays)
+- If the decoded array is empty, the results `<ul>` isn't rendered and `noResultLabel` shows instead; a drop-zone error clears the results and shows `readErrorLabel`. Both go through the same polite live region. Before 2026-10-21 neither case gave any feedback.
+- Results and labels wrap (`overflow-wrap: anywhere`), so a long decoded URL stays inside the component
 - The drop zone has a dashed border and minimum height by default — style with `.decode-qr-code-dropzone` to customise
 
 ## Usage
@@ -87,4 +91,5 @@ With styling:
 ## Notes
 
 - Like `CaptureQrCode`, results are rendered inline and not emitted. To act on results in a parent, extend the component or use `nuxt-qrcode`'s `QrcodeCapture` / `QrcodeDropZone` primitives directly.
+- 2026-10-21 migration: `data-dropping` state hook, theme-token drop zone colours, status messages, wrapping, `StressTest` story (simulation buttons drive the internal handlers).
 - The component renders both input methods unconditionally. If only one is needed, use the underlying `QrcodeCapture` or `QrcodeDropZone` primitives directly.

package/.claude/skills/components/deep-expanding-menu-classic.md

@@ -11,8 +11,10 @@ type: reference
 `<details>`/`<summary>`-based fallback for [`DeepExpandingMenu`](deep-expanding-menu.md) — same
 props, same `ResponsiveHeaderNavItem` data shape, same visual result, but built without CSS
 anchor-positioning or the Popover API. Each nav item with `childLinks` renders as a native
-`<details>` element; opening one and clicking outside it closes it again via `@vueuse/core`'s
-`onClickOutside`.
+`<details>` element. Groups in one menu share a per-instance `name` (from `useId()`), so opening
+one closes the others. A click outside the menu (`@vueuse/core` `onClickOutside`), a click
+elsewhere inside it, Escape (focus returns to the group's `<summary>`) or following a child link
+closes the open group.
 
 Prefer `DeepExpandingMenu` unless the modern implementation's browser support isn't acceptable for
 your target audience — see its own docs for the caveat.
@@ -21,7 +23,8 @@ your target audience — see its own docs for the caveat.
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `tag` | `"div" \| "section" \| "nav" \| "ul" \| "ol"` | `"nav"` | Root element tag. |
+| `tag` | `"div" \| "section" \| "nav"` | `"nav"` | Root element tag. `ul`/`ol` were dropped 2026-10-21: the root wraps a `<div>`, so they rendered invalid HTML. |
+| `ariaLabel` | `string` | `undefined` | Accessible name on the root. Set it when the page has more than one `<nav>`. |
 | `navLinks` | `ResponsiveHeaderNavItem[]` | `[]` | Top-level nav items. An item with `path` renders as a direct link; an item with `childLinks` renders as a `<details>` group. |
 | `styleClassPassthrough` | `string \| string[]` | `[]` | Extra classes applied to the root element. |
 
@@ -53,37 +56,35 @@ const navLinks: ResponsiveHeaderNavItem[] = [
 
 ## CSS custom properties
 
-| Property | Default | Controls |
-|----------|---------|----------|
-| `--deep-expanding-menu-classic-gap` | `1.2rem` | Gap on the root grid |
-| `--deep-expanding-menu-classic-item-gap` | `2.4rem` | Gap between top-level items |
-| `--deep-expanding-menu-classic-link-border-width` | `0.2rem` | Bottom border width on links/toggles |
-| `--deep-expanding-menu-classic-link-padding-block` | `0.8rem` | Vertical padding on links/toggles |
-| `--deep-expanding-menu-classic-link-border-colour-hover` | `var(--blue-10)` | Bottom border colour on hover/focus |
-| `--deep-expanding-menu-classic-icon-size` | `1.2rem` | Caret icon size |
-| `--deep-expanding-menu-classic-panel-offset-top` | `4rem` | Panel offset from the toggle |
-| `--deep-expanding-menu-classic-panel-width` | `20rem` | Panel width below `768px` |
-| `--deep-expanding-menu-classic-panel-width-tablet` | `40rem` | Panel width from `768px` |
-| `--deep-expanding-menu-classic-panel-width-desktop` | `60rem` | Panel width from `1024px` |
-| `--deep-expanding-menu-classic-panel-background-colour` | `white` | Panel background |
-| `--deep-expanding-menu-classic-panel-border-width` | `0.1rem` | Panel border width |
-| `--deep-expanding-menu-classic-panel-border-colour` | `black` | Panel border colour |
-| `--deep-expanding-menu-classic-panel-border-radius` | `1.2rem` | Panel corner radius |
-| `--deep-expanding-menu-classic-panel-shadow` | `0 0 1rem rgba(0, 0, 0, 0.1)` | Panel box-shadow |
-| `--deep-expanding-menu-classic-panel-padding` | `1.2rem` | Panel padding |
-| `--deep-expanding-menu-classic-panel-heading-colour` | `var(--slate-10)` | `childLinksTitle` heading colour |
-| `--deep-expanding-menu-classic-panel-list-gap` | `1.2rem` | Gap between child link grid items |
-| `--deep-expanding-menu-classic-group-link-colour` | `var(--slate-10)` | Child link text colour |
-| `--deep-expanding-menu-classic-group-link-border-colour-hover` | `var(--slate-10)` | Child link bottom border colour on hover/focus |
-
-See `CONSUMER-STYLING.md` for the full token API.
+Public tokens are all `--deep-expanding-menu-classic-*`: item gap, link border/padding/hover
+colour, focus ring, icon size, and the panel's offset, three container-width tiers, colours,
+border, radius, shadow, padding, heading line clamp, list gap and child link colours. Colours
+default from `--theme-text`, `--theme-border`, `--theme-surface-subtle` and `--theme-ring`. The
+full table with defaults, the prefixed class names and the sizing model are in this component's
+`CONSUMER-STYLING.md`.
+
+## Data handling
+
+- An item with `path` is a link; anything else is a `<details>` group. An empty `path` is a group.
+- A group's heading renders only when `childLinksTitle` is non-empty, and its list only when
+  `childLinks` has items.
+- Child links are keyed on index + name, so duplicate names are safe.
+- Long or unbroken labels wrap, the top-level row wraps onto more lines, and each panel is capped
+  at the menu's width. A panel opens from its toggle's left edge and doesn't flip, so near the
+  right edge it can overrun the menu. The `StressTest` story covers all of these.
 
 ## Notes
 
 - Auto-imported in Nuxt — no manual import needed.
-- Multiple `<details>` groups sharing `name="navigation-group"` means opening one does **not**
-  auto-close siblings (unlike a native accordion) — each group closes independently via
-  click-outside.
+- Until 2026-10-21 every instance used the fixed `name="navigation-group"`, so all menus on a page
+  formed one exclusive group (opening a panel in one menu closed another menu's), and the doc
+  wrongly said siblings didn't auto-close. Click-outside listeners were also bound per group in
+  `onMounted`, so groups added later never closed.
+- 2026-10-21 migration: prefixed every structural class, moved colours to `--theme-*`, panel
+  offset to `calc(100% + 1rem)`, panel widths from viewport `@media` to `@container`, removed
+  the no-op `--deep-expanding-menu-classic-gap` and a `display: flex !important`, added
+  `ariaLabel`, Escape and link-follow closing, a `:focus-visible` ring, `role="list"`, an
+  `aria-hidden` caret, the heading line-clamp token and the `StressTest` story.
 - 2026-09-07 migration: moved from an unplaced top-level folder (was `DeepExpandingMenuOld.vue`)
   into `02.molecules/navigation/deep-expanding-menu-classic/`; converted options-style
   `defineProps` to `interface Props` + `withDefaults`; switched its locally-declared

package/.claude/skills/components/deep-expanding-menu.md

@@ -24,7 +24,8 @@ built on `<details>`/`<summary>`: same API and visual result, with no popover la
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `tag` | `"div" \| "section" \| "nav" \| "ul" \| "ol"` | `"nav"` | Root element tag. |
+| `tag` | `"div" \| "section" \| "nav"` | `"nav"` | Root element tag. `ul`/`ol` were dropped 2026-10-21: the root wraps a `<div>`, so they rendered invalid HTML. |
+| `ariaLabel` | `string` | `undefined` | Accessible name on the root. Set it when the page has more than one `<nav>`. |
 | `navLinks` | `ResponsiveHeaderNavItem[]` | `[]` | Top-level nav items. An item with `path` renders as a direct link; an item with `childLinks` renders as a toggle + popover panel. |
 | `styleClassPassthrough` | `string \| string[]` | `[]` | Extra classes applied to the root element. |
 
@@ -56,26 +57,22 @@ const navLinks: ResponsiveHeaderNavItem[] = [
 
 ## CSS custom properties
 
-| Property | Default | Controls |
-|----------|---------|----------|
-| `--deep-expanding-menu-gap` | `2.4rem` | Gap between top-level items |
-| `--deep-expanding-menu-link-border-width` | `0.2rem` | Bottom border width on links/toggles |
-| `--deep-expanding-menu-link-padding-block` | `0.8rem` | Vertical padding on links/toggles |
-| `--deep-expanding-menu-link-border-colour-hover` | `var(--blue-10)` | Bottom border colour on hover/focus |
-| `--deep-expanding-menu-icon-size` | `1.2rem` | Caret icon size |
-| `--deep-expanding-menu-panel-width` | `min(100%, 50vw)` | Popover panel width |
-| `--deep-expanding-menu-panel-background-colour` | `white` | Popover panel background |
-| `--deep-expanding-menu-panel-border-width` | `0.1rem` | Popover panel border width |
-| `--deep-expanding-menu-panel-border-colour` | `black` | Popover panel border colour |
-| `--deep-expanding-menu-panel-border-radius` | `1.2rem` | Popover panel corner radius |
-| `--deep-expanding-menu-panel-shadow` | `0 0 1rem rgba(0, 0, 0, 0.1)` | Popover panel box-shadow |
-| `--deep-expanding-menu-panel-padding` | `1.2rem` | Popover panel padding |
-| `--deep-expanding-menu-panel-heading-colour` | `var(--slate-10)` | `childLinksTitle` heading colour |
-| `--deep-expanding-menu-panel-list-gap` | `1.2rem` | Gap between child link grid items |
-| `--deep-expanding-menu-group-link-colour` | `var(--slate-10)` | Child link text colour |
-| `--deep-expanding-menu-group-link-border-colour-hover` | `var(--slate-10)` | Child link bottom border colour on hover/focus |
-
-See `CONSUMER-STYLING.md` for the full token API and what's not tokenised.
+Public tokens are all `--deep-expanding-menu-*`: row gap, link border/padding/hover colour, focus
+ring, icon size, and the panel's width, max height, colours, border, radius, shadow, padding,
+heading line clamp, list gap and child link colours. Colours default from `--theme-text`,
+`--theme-border`, `--theme-surface-subtle` and `--theme-ring`. The full table with defaults, the
+prefixed class names and the state hooks are in this component's `CONSUMER-STYLING.md`.
+
+## Data handling
+
+- An item with `path` is a link; anything else is a group (toggle + panel). An empty `path` is a group.
+- A group's heading renders only when `childLinksTitle` is non-empty, and its list only when
+  `childLinks` has items, so an empty group opens a panel with just its heading.
+- Child links are keyed on index + name, so duplicate names are safe.
+- Long or unbroken labels wrap (`overflow-wrap: anywhere`), the top-level row wraps onto more
+  lines, panel lists longer than `--deep-expanding-menu-panel-max-height` scroll, and a panel near
+  the right edge flips to align with its toggle's right edge where anchor positioning is supported.
+  The `StressTest` story covers all of these.
 
 ## Notes
 
@@ -92,6 +89,10 @@ See `CONSUMER-STYLING.md` for the full token API and what's not tokenised.
   `aria-expanded` revealing ordinary links), not an ARIA menu. `role="menu"` was removed 2026-10-05
   because it requires `menuitem` children and arrow-key handling the panels don't have, so screen
   readers announced a menu that didn't behave like one. Don't add it back.
+- 2026-10-21 migration: prefixed every structural class (`.inner`, `.navigation-*`, `.icon` became
+  `.deep-expanding-menu-*`), moved colour defaults to `--theme-*` tokens, added `ariaLabel`, a
+  `:focus-visible` ring, `role="list"` on the child list, an `aria-hidden` caret, the heading
+  line-clamp and max-height tokens, `position-try-fallbacks: flip-inline`, and the `StressTest` story.
 - 2026-10-05: removed two never-referenced `@position-try` blocks (`--anchor-left`, and an invalid
   `@position-try-fallbacks --anchor-right` at-rule).
 - 2026-09-07 migration: moved from an unplaced top-level folder into

package/.claude/skills/components/grid-stack.md

@@ -134,6 +134,8 @@ consumer's `<style scoped>` file, `.grid-stack__layer` rules need `:deep()`. Ful
 
 ## Notes
 
+- The `StressTest` story stacks an overlay of unbroken, long and right-to-left text over an image layer.
+
 - `pointer-events: none` on overlay layers (and `pointer-events: auto` on interactive children within them) is the standard pattern for overlays that shouldn't block interaction with layers behind them.
 - There is no built-in `z-index` — stacking is handled purely by DOM order. If a consumer applies `z-index` on a layer for other reasons, be aware it creates a new stacking context.
 - The slot name is used as the Vue `:key` on the layer wrapper, so slot names must be unique.

package/.claude/skills/components/layout-grid-by-cols.md

@@ -130,6 +130,8 @@ Tokens: `--layout-grid-by-cols-column-count`, `-single-col-below`, `-gap`, `-row
 
 ## Notes
 
+- The `StressTest` story feeds every cell oversized content (an unbroken string and URL, long German, a 1600px image, emoji, right-to-left, an empty cell).
+
 - Auto-imported in Nuxt — no manual import needed.
 - Slot names can be anything — semantic or indexed. Document order determines render order.
 - 2026-09-27 migration: `singleColBelow` never worked before (the breakpoint was a hardcoded `768px` container query); it does now. `gap`/`columnCount` moved from `v-bind()` to public tokens, and the layout props lost their defaults (defaults now live in CSS). A `section` without a `label` used to read the placeholder "If tag='section' then a label is required" to screen readers; it now renders nothing and relies on the composable's dev warning. `gap` must be a single length (compound values were claimed before but break the column calculation). Inner class `.layout-grid-inner` → `.layout-grid-by-cols-inner`; root no longer a `layoutGrid` size container. No consumer app used the component at the time.

package/.claude/skills/components/masonry-grid.md

@@ -98,9 +98,17 @@ See `CONSUMER-STYLING.md` in the component folder.
 
 ## Notes
 
+- 2026-10-21: tiles re-pack when any tile changes height (a `ResizeObserver` per tile, throttled to
+  one `requestAnimationFrame`), not only when the container width changes, so a late-loading image
+  no longer overlaps the tile below. Slot names are read per render (they were a `computed` over
+  `useSlots()`, which missed slots added after mount), and tiles are read in DOM order from the
+  wrapper instead of a `v-for` ref array, which Vue doesn't keep in DOM order. The multi-column state
+  is `data-multiple-cols` and the private tokens are prefixed `--_masonry-grid-*`.
+- The `StressTest` story mixes unbroken, long, image, emoji, right-to-left, empty and one-character tiles.
+
 - **How positioning works**: on mount and on every measured resize, each item is read (`item.
   offsetHeight`) in DOM order and placed at the top of whichever column currently has the least
-  accumulated height, via inline `--_position-top`/`--_position-left`/`--_element-width` custom
+  accumulated height, via inline `--_masonry-grid-item-top`/`--_masonry-grid-item-left`/`--_masonry-grid-item-width` custom
   properties the component sets directly (not part of the public token API — these are internal
   positioning state, not a styling surface). Column steps are computed in real pixels
   (`itemWidth + gap`) rather than equal percentage slots of the container — a percentage slot only

package/.claude/skills/components/page-row.md

@@ -24,6 +24,9 @@ no extra wrapper divs needed.
 
 ---
 
+The `variant` prop renders as `data-variant` on the root (a bare class like `.content` until
+2026-10-21). The `StressTest` story nests every variant with oversized content.
+
 ## Track widths
 
 | Variant | Max width | Typical use |

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

@@ -17,7 +17,9 @@ effects, styled as a monospace line over an underline with a pulsing cursor glyp
 
 Effects:
 
-- `typewriter` — characters typed one by one, held, deleted one by one.
+- `typewriter` — characters typed one by one, held, deleted one by one. "Characters" are graphemes
+  (`splitGraphemes()` in `app/utils/graphemes.ts`, `Intl.Segmenter`), so an emoji with a skin tone
+  or a family emoji never shows half a glyph.
 - `word-pulse` — the whole message fades in, holds, fades out.
 
 Both use `useCancellableTimer` for all timing, so the loop exits cleanly on unmount.
@@ -31,8 +33,9 @@ Both use `useCancellableTimer` for all timing, so the loop exits cleanly on unmo
   deletes or fades out, so a repeated message announces again.
 - **Pause on hover** (WCAG 2.2.2): pointer over the root pauses the sequence where it is and the
   cursor pulse; leaving resumes. The root gets `data-paused` while paused.
-- `prefers-reduced-motion: reduce` removes the cursor pulse and the word-pulse fade transition. The
-  text sequence keeps running (it's the content).
+- `prefers-reduced-motion: reduce` removes the cursor pulse and the word-pulse fade transition, and
+  the typewriter shows each message whole instead of typing and deleting it (since 2026-10-21). The
+  message sequence keeps running (it's the content).
 
 > **Changed 2026-09-27**: `SamaritanPrompt` previously had no live region (the visible text was read
 > character by character, if at all) and no reduced-motion handling; both now match
@@ -123,9 +126,13 @@ props on the component tag are hyphenated.
 
 Full token list and class hooks: `app/components/02.molecules/samaritan-prompt/CONSUMER-STYLING.md`.
 Tokens are `--samaritan-prompt-*` (text/underline/cursor colours, font, sizes, gaps, pulse
-duration). Defaults are white text on the assumption of a dark page; for a light or theme-switching
-page set `--samaritan-prompt-text-colour` and `--samaritan-prompt-underline-colour` (e.g. to
-`var(--theme-text)`).
+duration, white-space, line clamp). Colours default to `--theme-text` (text, underline) and
+`--theme-accent` (cursor); set the three colour tokens to `#fff`, `#fff`, `#cc0000` for the classic
+white-on-black look. Text wraps by default (`--samaritan-prompt-text-white-space: nowrap` restores
+one line).
+
+> **Changed 2026-10-21**: colour defaults were `#ffffff` text/underline and a `#cc0000` cursor on the
+> assumption of a dark page, and text was always `nowrap`, so a long message overflowed.
 
 The component brings no page layout; centre it from its parent.
 
@@ -134,7 +141,16 @@ The component brings no page layout; centre it from its parent.
 
 ## Notes
 
+- Both stories files have a `StressTest` story (long German, unbroken URL, empty message, emoji,
+  HTML-like text, right-to-left, single character) with the `CanvasSwitcher` decorator.
+
 - `SamaritanPromptMixed` reads `messageConfigs` at the start of each loop, so prop changes land on
-  the next loop. `SamaritanPrompt` restarts only when `effect` changes.
+  the next loop. With an empty list it polls every 500 ms (or `introDelay`, if longer) and starts
+  once messages arrive; until 2026-10-21 an empty list with `introDelay: 0` spun forever and froze
+  the tab.
+- `SamaritanPrompt` restarts when `effect` or the `messages` values change (compared by value, so
+  an inline array literal re-created on every parent render doesn't restart it). Until 2026-10-21 it
+  only restarted on `effect`, and an empty string in `messages` (or a list that shrank mid-cycle)
+  stopped the loop for good.
 - The `Mono MMM 5` font is declared with `@font-face` in each component's unscoped style from
-  `/fonts/monoMMM_5.ttf` (`font-display: swap` in `SamaritanPrompt`, `optional` in `SamaritanPromptMixed`).
+  `/fonts/monoMMM_5.ttf` (`font-display: swap` in both since 2026-10-21; `SamaritanPromptMixed` used `optional`).

package/.claude/skills/components/site-header.md

@@ -23,7 +23,7 @@ Branding (logo/wordmark) is entirely consumer-authored via the `#branding` slot
 | `pageRowVariant` | `"full" \| "popout" \| "content" \| "inset-content"` | `"content"` | Forwarded to the root `PageRow`'s `variant` prop. |
 | `styleClassPassthrough` | `string \| string[]` | `[]` | Extra CSS classes on the root `PageRow` — targets `--site-header-*` tokens (see `CONSUMER-STYLING.md`). |
 | `navStyleClassPassthrough` | `string \| string[]` | `[]` | Extra CSS classes on the nested `ResponsiveHeader` — targets its own `--responsive-header-*`/`--overflow-nav-*` tokens. |
-| `homeNavAriaLabel` | `string` | `"Home Navigation"` | aria-label on the home/branding nav landmark — override for localisation. |
+| `homeNavAriaLabel` | `string` | `"Home navigation"` | aria-label on the home/branding nav landmark — override for localisation. |
 | `mainNavAriaLabel` | `string` | `"Main navigation"` | Forwarded to `ResponsiveHeader`'s `mainNavAriaLabel` — override for localisation. |
 | `secondaryNavAriaLabel` | `string` | `"Secondary navigation"` | Forwarded to `ResponsiveHeader`'s `secondaryNavAriaLabel` — override for localisation. |
 | `overflowMenuAriaLabel` | `string` | `"Overflow navigation menu"` | Forwarded to `ResponsiveHeader`'s `overflowMenuAriaLabel` — override for localisation. |
@@ -97,8 +97,22 @@ const responsiveNavLinks = {
 
 ---
 
+## Styling and layout
+
+Tokens, class names and the sticky recipe are in this component's `CONSUMER-STYLING.md`. Since
+2026-10-21:
+
+- `--site-header-position: sticky` (with `--site-header-sticky-offset`, `--site-header-z-index`)
+  applies to the outer `.site-header-row` (the `PageRow`). Before that it sat on the inner
+  `<header>`, whose parent is exactly its height, so the header never actually stuck.
+- The branding column is `fit-content(var(--site-header-branding-max-width, 50%))` and the nav
+  column `minmax(0, 1fr)`, so a long brand wraps instead of squeezing the nav, and the nav can
+  shrink and collapse instead of overflowing. The `StressTest` story covers it.
+- `.home-navigation` became `.site-header-home-nav`, and `homeNavAriaLabel` defaults to
+  `"Home navigation"` (was `"Home Navigation"`).
+
 ## Migration notes
 
-- Consuming layouts previously assembling `PageRow` + `SkipLinks` + `ResponsiveHeader` (or the removed `TabNavigation`) by hand can switch to `SiteHeader` directly; the two `styleClassPassthrough` props map 1:1 onto the two independent passthrough hooks that pattern used.
+- Consuming layouts previously assembling `PageRow` + `SkipLinks` + `ResponsiveHeader` (or the removed `TabNavigation`) by hand can switch to `SiteHeader` directly; the two `styleClassPassthrough` props map 1:1 onto the two independent passthrough hooks that pattern used. Their hand-built markup often uses a `.home-navigation` class of its own; SiteHeader's nav is `.site-header-home-nav`, so move any styles across.
 - `TabNavigation` (removed 2026-10-07) took `NavItemData` (`{ main: [{ text, href, iconName, cssName }] }`, also removed), which is **not** the same shape as `ResponsiveHeaderProp` (`{ groupKey: [{ name, path, childLinksTitle, childLinks }] }`): migrating means reshaping the nav data, not just swapping the component. See "Migrating from TabNavigation" in `responsive-header.md`. Its `navAlign` prop has no `SiteHeader` equivalent since `ResponsiveHeader`'s layout is fixed (branding column + nav column).
 - Requires the consuming layout's main/footer regions to carry `id="main-content"` / `id="footer-content"` — same requirement as using `SkipLinks` directly.