srcdev-nuxt-components 9.6.18 → 9.6.20

package/.claude/rules/consumer/css-relative-colour-calc.md

@@ -0,0 +1,15 @@
+---
+paths:
+  - "app/**/*.vue"
+  - "app/**/*.css"
+---
+
+# No `calc()` on relative-colour channels in a stylesheet
+
+Never write `calc()` over a relative-colour channel keyword in a `<style>` block or CSS file
+(`oklch(from var(--x) l c calc(h + 50))`). When a value like that is needed, set the whole colour as
+a custom property from script (an inline `:style`) and read it with `var()` in the CSS.
+
+Why: the build's PostCSS `calc()` parser doesn't know channel keywords (`h`, `l`, `c`) and warns
+"Lexical error ... Unrecognized text" on every build, even though browsers accept it. Inline styles
+never go through PostCSS (`SparkleEffect`, 2026-10-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/rules/consumer/vue-dynamic-arg-no-spaces.md

@@ -0,0 +1,16 @@
+---
+paths:
+  - "app/**/*.vue"
+  - "app/**/*.stories.ts"
+---
+
+# No spaces inside a dynamic slot or argument name
+
+Never put a space inside `#[...]`, `:[...]` or `@[...]`: write `` #[`item-${i}-summary`] ``, not
+`` #[`item-${i + 6}-summary`] ``. When the name needs arithmetic, build it in script and bind it
+(`#[item.summarySlot]`).
+
+Why: an HTML attribute name ends at the first space, so the template compiler sees a cut-off
+expression ("Missing } in template expression"). In a story's template string it only fails when
+Storybook renders the story. Detail: skill `storybook-add-story.md` (srcdev-nuxt-components),
+"Dynamic slot names in template strings".

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

@@ -121,7 +121,9 @@ The ledger can't see items 6c, 9, 10, 11 and 14, so check those by hand.
     template directly to the live object (`v-model="args.modelValue"`, `v-bind="componentArgs"`
     where `componentArgs` is a `computed()` that strips only genuinely non-prop extra args) rather
     than copying values out in `setup()` — a destructure/spread from `args` is only safe when it's
-    inside a `computed()`. The ledger's `story_args_bug` column flags this automatically (any
+    inside a `computed()`. Binding raw `args` (`v-bind="args"`) when the meta has story-only args is the
+    same bug class in a different shape: the extras land on the root as HTML attributes (`ActionMenu`'s
+    `itemcount="5"`, 2026-10-20), and the ledger doesn't see it. The ledger's `story_args_bug` column flags the destructure case automatically (any
     `{...} = args;` spread not wrapped in a `computed()`); still eyeball each story file yourself,
     since a differently-shaped variant of the same mistake may not match that exact heuristic.
 6b. **Stress-test story** — add a `StressTest` story ("Stress Test (Worst-Case Data)") that
@@ -138,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
@@ -309,6 +316,9 @@ The ledger can't see items 6c, 9, 10, 11 and 14, so check those by hand.
     - Element ids come from `useId()`, never from data values (rule `consumer/ids-from-useid.md`).
       Call `useId()` once at setup, never inside a `computed` (`DisplayTooltip`, `DisplayTooltipRich`,
       2026-10-18).
+    - A wrapper forwards a slot to its child only when the consumer filled it
+      (`<template v-if="slots[name]" #icon>`). An always-present `<template #icon>` replaces the child's
+      fallback with nothing: `AccordionGroup` hid the panels' default caret this way until 2026-10-20.
     - A wrapper passes its child only props the child declares. Anything else falls through as an
       HTML attribute on the child's root: `InputTextField` put `label="…"` and
       `error-message="…"` on `.input-text-wrapper` (fixed 2026-10-16). Check the child root's

package/.claude/skills/component-dynamic-slots.md

@@ -91,7 +91,7 @@ predictable pattern (`item-0`, `item-1`, …).
 | Reason to keep `itemCount` | Example |
 
 |---|---|
-| Multiple slot types per item must be grouped into one rendered element | `AccordianCore` — `summary`/`icon`/`content` per `<ExpandingPanel>` |
+| Multiple slot types per item must be grouped into one rendered element | `AccordionGroup` — `summary`/`icon`/`content` per panel |
 | Two parallel loops must stay in sync for aria linking | `TabbedContent` — trigger `<button>` loop + panel `<div>` loop linked by id |
 | `itemCount` drives non-slot logic (z-index, CSS scope, counters) | `WipeAwayVertical` — `z-index: itemCount - key`, `timelineScope` computed |
 | `$slots` inspection per iteration is needed to conditionally render | `StepperList` — checks `$slots[indicator-N]` to toggle class per `<li>` |
@@ -131,7 +131,6 @@ Some components pair multiple slot types per index (e.g. TabbedContent):
 ### Reference components (indexed dynamic slots)
 
 - `app/components/01.atoms/tabbed-content/TabbedContent.vue`
-- `app/components/accordian/AccordianCore.vue`
 - `app/components/02.molecules/stepper-list/StepperList.vue`
 - `app/components/01.atoms/animations/view-timeline/WipeAwayVertical.vue`
 
@@ -200,6 +199,7 @@ No count prop needed — just add slots:
 ### Examples (prefixed slot inference)
 
 - `app/components/02.molecules/profile-section/ProfileSection.vue`
+- `app/components/02.molecules/expandable/accordion-group/AccordionGroup.vue` (three slot kinds per item; count from `item-{n}-summary`)
 
 ---
 

package/.claude/skills/component-naming.md

@@ -107,7 +107,7 @@ external consumer, free to rename. Run `/check-component-usage` for the current
 | ~~AlertMaskCore~~ | ✅ `AlertMask` (2026-10-17) | - |
 | ~~DisplayTooltipDefined~~ | ✅ `DisplayTooltipRich` (2026-10-18): Material 3 "rich tooltip", the implementation word "Defined" said nothing about what it is | - |
 | CardCore | **decide**: `Card` is single-word and collision-prone; prefer a prefixed name (`Display*`, `Content*`) | yes |
-| AccordianCore | **decide**: also fixes the "Accordian" misspelling; bare `Accordion` is single-word and collision-prone, and it is built on `<details>`/`<summary>` | yes |
+| ~~AccordianCore~~ | ✅ `AccordionGroup` (2026-10-20) | yes |
 | ~~TabsCore~~ | ✅ `TabbedContent` (2026-10-07) | - |
 
 The `input-checkbox` family also has `MultipleCheckboxes`/`SingleCheckbox` on top of the Core; look

package/.claude/skills/components/accordion-chat.md

@@ -0,0 +1,99 @@
+---
+name: AccordionChat
+description: AccordionChat renders an accordion as a chat conversation, question bubbles on the right and rich answer bubbles with an optional avatar on the left
+type: reference
+---
+
+# AccordionChat
+
+## Overview
+
+`AccordionChat` is an accordion drawn as a chat: each panel's summary is a question bubble on the
+right, and its content is an answer bubble on the left, with an optional avatar. Use it for FAQs or
+"ask us" sections where a conversational look suits the site. It's purely presentational: the only
+interaction is the normal accordion open and close. Built on `ExpandingPanelClassic` (works and
+animates in every browser), with the same slot names as `AccordionGroup`, so the two swap easily.
+
+## Props
+
+| Prop | Type | Default | Notes |
+|---|---|---|---|
+| `name` | `string` | `undefined` | Shared `<details>` name: only one answer open at a time. |
+| `animationDuration` | `number` | `300` | Row-height animation in ms, passed to every panel. |
+| `avatarLabel` | `string` | `""` | Initials for the avatar circle; trimmed, then cut to the first two graphemes (emoji stay whole). |
+| `showAvatar` | `boolean` | `true` | `false` removes the avatar column even when an avatar slot is filled. |
+| `styleClassPassthrough` | `string \| string[]` | `[]` | Extra classes on the root. |
+
+## Slots
+
+| Slot | Purpose |
+|---|---|
+| `item-{n}-summary` | Question text. **Its presence creates panel `n`** (prefixed slot inference, same as `AccordionGroup`). |
+| `item-{n}-content` | Answer bubble content, any markup. Without it the panel has no answer bubble. |
+| `item-{n}-icon` | Optional; replaces the default `+` circle for that panel. |
+| `item-{n}-avatar` | Optional; the avatar for that panel only. |
+| `avatar` | Optional; the avatar for every panel (logo image, `<Icon>`). |
+
+Avatar precedence per panel: `item-{n}-avatar`, then `#avatar`, then `avatarLabel`, then none (no
+avatar column; the bubble sits flush left).
+
+## Basic usage
+
+```vue
+<AccordionChat name="faq" avatar-label="AM">
+  <template #item-0-summary>Do you offer gift vouchers?</template>
+  <template #item-0-content><p>Yes, in any amount, valid for twelve months.</p></template>
+
+  <template #item-1-summary>Is there parking nearby?</template>
+  <template #item-1-content><p>Free on-street parking on Northtown Road.</p></template>
+</AccordionChat>
+```
+
+With a logo avatar:
+
+```vue
+<AccordionChat name="faq">
+  <template #avatar><NuxtImg src="/logo-mark.svg" alt="" width="30" height="30" /></template>
+  ...
+</AccordionChat>
+```
+
+## Behaviour
+
+- One panel per `item-{n}-summary` slot, in numeric order, gaps allowed; panels follow slots added
+  or removed after mount.
+- The summary renders in the question bubble and the content in the answer bubble; a panel without
+  a content slot has no answer bubble.
+- The default icon is a `+` in a circle that rotates to `×` when open; `item-{n}-icon` replaces it.
+- Avatar precedence is panel slot, group slot, label, none; `showAvatar=false` removes the column.
+- The avatar label is cut to two graphemes.
+- A shared `name` keeps one answer open at a time.
+- `aria-expanded`, `aria-controls`/`aria-labelledby` and unique ids come from
+  `ExpandingPanelClassic` unchanged.
+- The avatar is always `aria-hidden`: it repeats beside every answer, so it's decoration.
+- The question bubble shows a focus ring on keyboard focus.
+- Reduced motion turns off the answer entrance animation and the icon rotation transition.
+- Every colour, size, radius, font and duration is a token, so a fully different look (the Dark
+  Theme story) needs no extra CSS.
+- Long unbroken text, long copy, emoji, HTML-like text, RTL (tails and sides flip), an over-wide
+  image, a long or emoji avatar label, a panel with no content and many panels all hold their layout
+  (`StressTest` story).
+
+## Styling
+
+All tokens are `--accordion-chat-*`, defaulting to `--theme-*` colours; see `CONSUMER-STYLING.md`
+(includes a dark serif recipe). The bubble is a wrapper inside the panel's `#content` slot, never the
+panel's `.inner`.
+
+## Stories
+
+**Molecules/Expandable/AccordionChat**: Default, Theme Defaults, Dark Theme, Logo Avatar, Icon
+Avatar, No Avatar, Per-Panel Avatar Override, Exclusive Open, Rich Answer Content, Stress Test.
+
+## Notes
+
+- Brief: a chat-styled accordion with question/answer bubbles. A typing indicator was considered and
+  dropped (2026-10-20): the component has no interactions beyond open and close.
+- The question bubble restyles `ExpandingPanelClassic`'s `summary` with a deeper selector
+  (`.accordion-chat .accordion-chat-item.expanding-panel-classic .expanding-panel-classic-summary`)
+  so it beats the panel's own rules without editing the panel.

package/.claude/skills/components/accordion-group.md

@@ -0,0 +1,98 @@
+---
+name: AccordionGroup
+description: AccordionGroup renders a group of expanding panels from item-{n}-summary/content/icon slots, optionally exclusive-open via a shared name
+type: reference
+---
+
+# AccordionGroup
+
+> **Renamed 2026-10-20:** `AccordianCore` → `AccordionGroup` (also fixes the "Accordian"
+> misspelling); root class `.display-accordian` → `.accordion-group`; panel class `.accordian-item`
+> → `.accordion-group-item`; slots `accordian-{n}-*` → `item-{n}-*`. The `itemCount` prop is
+> gone: the group counts its `item-{n}-summary` slots itself. Folder
+> `02.molecules/expandable/accordion-group/`.
+
+## Overview
+
+`AccordionGroup` renders one expanding panel per `item-{n}-summary` slot: `ExpandingPanelClassic`
+by default, or `ExpandingPanel` with `variant="modern"`. Pass `name` to make it exclusive (the
+browser keeps one `<details>` in a shared-name group open). Typical use: FAQs, product details,
+terms sections.
+
+## Props
+
+| Prop | Type | Default | Notes |
+|---|---|---|---|
+| `name` | `string` | `undefined` | Shared `name` on every panel's `<details>`; makes the group exclusive-open. Unset, each panel gets its own generated name and opens independently. |
+| `animationDuration` | `number` | `300` | Milliseconds, passed to every panel and to the group's own margin/radius transition. |
+| `variant` | `"classic" \| "modern"` | `"classic"` | `modern` relies on `::details-content`, which WebKit lacks (pitfall #19); keep `classic` unless you've confirmed your audience. |
+| `styleClassPassthrough` | `string \| string[]` | `[]` | Extra classes on the root. |
+
+## Slots
+
+Prefixed slot inference (`component-dynamic-slots.md`, pattern 3): no count prop.
+
+| Slot | Purpose |
+|---|---|
+| `item-{n}-summary` | The panel's clickable summary. **Its presence creates panel `n`.** |
+| `item-{n}-content` | The panel's content. |
+| `item-{n}-icon` | Optional. Replaces the panel's default caret; omit it to keep the caret. |
+
+`n` is any non-negative integer. Panels render in numeric order, and gaps are fine (`item-0`,
+`item-2`, `item-10`). An `item-{n}-content` or `-icon` slot with no matching summary renders
+nothing.
+
+## Basic usage
+
+```vue
+<AccordionGroup name="faq">
+  <template #item-0-summary>How long does a first appointment take?</template>
+  <template #item-0-content><p>About an hour.</p></template>
+
+  <template #item-1-summary>Can I change a booking?</template>
+  <template #item-1-content><p>Yes, up to 24 hours before.</p></template>
+</AccordionGroup>
+```
+
+From data:
+
+```vue
+<AccordionGroup name="faq">
+  <template v-for="(faq, i) in faqs" :key="`s${i}`" #[`item-${i}-summary`]>{{ faq.question }}</template>
+  <template v-for="(faq, i) in faqs" :key="`c${i}`" #[`item-${i}-content`]><p>{{ faq.answer }}</p></template>
+</AccordionGroup>
+```
+
+## Behaviour
+
+- One panel per `item-{n}-summary` slot, in numeric order; adding or removing a summary slot after
+  mount adds or removes its panel (slots are read per render, not in a `computed`).
+- With `name`, opening a panel closes the others; without it, panels open independently.
+- Every panel has its own unique ids (`useId()`), so `aria-controls`/`aria-labelledby` pair each
+  summary with its own content region even when the panels share a `name`.
+- A panel with no `item-{n}-icon` slot keeps its default caret.
+- Only props the panels declare are passed to them (no stray attributes on panel roots).
+- `variant` is group-wide; every panel renders the same component.
+- Long unbroken summaries and content wrap rather than overflowing or pushing the caret out; RTL,
+  emoji and HTML-like text render correctly; an empty group renders an empty wrapper
+  (`StressTest` story).
+
+## Styling
+
+One token of its own, `--accordion-group-max-width` (default `60rem`); everything else is the
+active panel's tokens. See `CONSUMER-STYLING.md`.
+
+## Stories
+
+**Molecules/Expandable/AccordionGroup**: Default, ExclusiveOpen, ModernVariant, CustomIcons,
+SlowAnimation, NoPanels, StressTest.
+
+## Notes
+
+- 2026-10-20 migration fixes, beyond the rename: the group passed `icon-size="medium"`, which
+  neither panel declares, so it landed on every panel root as an HTML attribute; it always filled
+  the panel's `#icon` slot, so the default caret vanished unless every item had an icon slot; it had
+  no `styleClassPassthrough` watch; the `600px` width is now a token. The same pass fixed two
+  bugs in the panels themselves: ids built from `name` (shared-name panels all had the same
+  `id-{name}-trigger`/`-content`, which also affected ResponsiveHeader's overflow groups) and a plain
+  `1fr` summary track that let a long word push the caret out.

package/.claude/skills/components/action-menu.md

@@ -141,11 +141,17 @@ Quick reference:
   `items[0]`; `ArrowUp` should focus `items[items.length - 1]`. Without the guard, the modulo
   formula gives `items[n-2]` for `ArrowUp` — the second-to-last item instead of the last.
 - **Right-aligned by default** — the menu's right edge aligns with the trigger's right edge
-  (`right: anchor(right)`). Flips above the trigger near the bottom of the viewport
-  (`position-try-fallbacks: flip-block`).
+  (`right: anchor(right)`). Flips above the trigger near the bottom of the viewport, and opens
+  rightwards from a trigger near the left edge (`position-try-fallbacks: flip-block, flip-inline,
+  flip-block flip-inline`; anchor-positioning browsers only, the JS fallback flips block only).
+- **Width and long labels** — the menu sizes to its longest label between
+  `--action-menu-popover-min-width` (20rem) and `--action-menu-popover-max-width`
+  (`min(32rem, 100vw - 3.2rem)`); labels wrap at the ceiling (`overflow-wrap: anywhere`, label
+  track `minmax(0, 1fr)`). `--action-menu-item-label-line-clamp` (default `none`) caps them. Until
+  2026-10-20 labels were `nowrap` and widened the menu without limit. `StressTest` story.
 - **`anchorName` format** — internally generated as `--action-menu-anchor-{id}` (a valid CSS
   `<dashed-ident>`). Set via a CSS custom property on the root element so both the trigger's
   `anchor-name` and the popover's `position-anchor` can reference the same value.
-- **Dynamic slots stability** — `item-{n}` slots enforce that only `ActionMenuItem` content
-  enters the list; arbitrary HTML inside the popover is not supported and will break the ARIA
-  `menu` / `menuitem` pattern.
+- **One `ActionMenuItem` per slot** — nothing enforces it, but anything else inside an `item-{n}`
+  slot breaks the ARIA `menu` / `menuitem` pattern (keyboard navigation only finds
+  `[role="menuitem"]`).

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.