srcdev-nuxt-components 9.6.17 → 9.6.19

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/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
@@ -309,6 +311,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/expanding-panel-classic.md

@@ -4,7 +4,7 @@
 
 **Prefer [`ExpandingPanel`](expanding-panel.md) unless you have a concrete reason not to.** `ExpandingPanelClassic` is the pre-`::details-content` implementation, kept only as a fallback for consumers who need the open/close animation to work identically in every browser today (its `grid-template-rows: 0fr → 1fr` sibling trick has no Baseline-2025 feature dependency). `ExpandingPanel` looks and behaves identically everywhere too — the only difference is that its animation degrades to an instant (unanimated) open/close in browsers without `interpolate-size` support (Chromium only, as of 2026), where this component still animates.
 
-`ExpandingPanelClassic` is a single expand/collapse panel built on the native `<details>`/`<summary>` element. It animates open/close via a CSS grid-template-rows trick, supports `v-model` for controlled state, and can be locked open with `forceOpened`. Multiple panels can be grouped into a native accordion by sharing the same `name` prop (see `AccordianCore`).
+`ExpandingPanelClassic` is a single expand/collapse panel built on the native `<details>`/`<summary>` element. It animates open/close via a CSS grid-template-rows trick, supports `v-model` for controlled state, and can be locked open with `forceOpened`. Multiple panels can be grouped into a native accordion by sharing the same `name` prop (see `AccordionGroup`).
 
 ---
 
@@ -12,7 +12,7 @@
 
 | Prop | Type | Default | Notes |
 |------|------|---------|-------|
-| `name` | `string` | `useId()` | Identifies the panel. Used in ARIA attributes (`id-{name}-trigger`, `id-{name}-content`). If omitted, a unique id is generated automatically. |
+| `name` | `string` | `useId()` | The `<details>` `name`; panels sharing it form an exclusive-open group. Not used for element ids (each panel gets its own `useId()`). If omitted, a unique name is generated automatically. |
 | `animationDuration` | `number` | `400` | Expand/collapse transition duration in milliseconds. Pass `0` to disable animation. |
 | `forceOpened` | `boolean` | `false` | When `true`, the panel is always open. The toggle icon is hidden and clicks do not close the panel. |
 | `contentIsOnTop` | `boolean` | `false` | When `true`, the content region is taken out of flow and absolutely positioned directly below the summary, raised above surrounding page content via `z-index` — instead of pushing layout down when it opens. Applies a `content-is-on-top` class to the root `.expanding-panel-classic` element (not the content div). Also enables click-outside-to-close (see below) — not applied when `forceOpened` is `true`. |
@@ -132,11 +132,11 @@ The component wires ARIA automatically from the `name` prop:
 
 | Element | Attribute | Value |
 |---------|-----------|-------|
-| `<summary>` | `id` | `id-{name}-trigger` |
-| `<summary>` | `aria-controls` | `id-{name}-content` |
+| `<summary>` | `id` | `{useId()}-trigger` |
+| `<summary>` | `aria-controls` | `{useId()}-content` |
 | `<summary>` | `aria-expanded` | `true` / `false` |
-| content div | `id` | `id-{name}-content` |
-| content div | `aria-labelledby` | `id-{name}-trigger` |
+| content div | `id` | `{useId()}-content` |
+| content div | `aria-labelledby` | `{useId()}-trigger` |
 | content div | `role` | `region` |
 
 Always supply a meaningful `name` prop when using multiple panels on the same page to avoid duplicate IDs.
@@ -213,9 +213,11 @@ See [component-local-style-override.md](../component-local-style-override.md) fo
 
 ## Notes
 
+- 2026-10-20: element ids come from a per-panel `useId()` instead of `name`. Panels sharing a `name` (an exclusive group, ResponsiveHeader's overflow groups) all rendered the same `id-{name}-trigger`/`-content`, so every `aria-controls` pointed at the first panel. The same pass made the summary track `minmax(0, 1fr) auto` and added `overflow-wrap: anywhere` on the root, so a long unbroken summary wraps instead of pushing the caret out of the clipped summary. The `StressTest` story covers long, RTL, emoji and empty-slot cases.
 - The open/close animation uses `grid-template-rows: 0fr → 1fr` — no JS height measurement needed.
 - `content-is-on-top` is applied to the root `.expanding-panel-classic` element, not `.expanding-panel-classic-content` — style overrides must scope through it, e.g. `.expanding-panel-classic.my-panel .expanding-panel-classic-content .inner { ... }`.
 - When `forceOpened` is `true`, `open` stays `true` regardless of `v-model`, but `v-model` still updates internally on clicks (useful if you later set `forceOpened` back to `false`).
-- Group panels into a native accordion (only one open at a time) by passing the same `name` to multiple panels or use `AccordianCore` which handles this automatically.
+- Group panels into a native accordion (only one open at a time) by passing the same `name` to multiple panels or use `AccordionGroup` which handles this automatically.
+- **Used by:** `AccordionGroup` (`variant="classic"`, the default), `AccordionChat` (restyles the summary as a question bubble and wraps the content in an answer bubble; never touches `.inner`), `ContentDocs`, `ResponsiveHeader` and `NavigationItems` (`panelVariant="classic"`).
 - Auto-imported in Nuxt — no manual import needed.
 - File: `app/components/02.molecules/expandable/expanding-panel-classic/ExpandingPanelClassic.vue`

package/.claude/skills/components/expanding-panel.md

@@ -2,11 +2,11 @@
 
 ## Overview
 
-`ExpandingPanel` is a single expand/collapse panel built on the native `<details>`/`<summary>` element. It animates open/close by styling the `::details-content` pseudo-element (the browser's own anonymous box wrapping everything after `<summary>`) where supported, supports `v-model` for controlled state, and can be locked open with `forceOpened`. Multiple panels can be grouped into a native accordion by sharing the same `name` prop (see `AccordianCore`).
+`ExpandingPanel` is a single expand/collapse panel built on the native `<details>`/`<summary>` element. It animates open/close by styling the `::details-content` pseudo-element (the browser's own anonymous box wrapping everything after `<summary>`) where supported, supports `v-model` for controlled state, and can be locked open with `forceOpened`. Multiple panels can be grouped into a native accordion by sharing the same `name` prop (see `AccordionGroup`).
 
 **WebKit (Safari/iOS) does not support `::details-content`** as of 2026-08, confirmed via real-device testing — Chrome's device-emulation mode cannot catch this, since it's still the Blink engine underneath regardless of which browser UI it's simulating. WebKit silently drops the whole rule block: no animation and (more seriously) `content-is-on-top`'s `position: absolute` never applying, so an overlay panel renders in normal document flow and can break the surrounding layout. An `@supports not selector(::details-content)` CSS-only fallback was tried (2026-08-22) but didn't reliably kick in on real devices either and was reverted the same day — **do not reintroduce that approach**.
 
-**The actual fix is component-level, not CSS-level**: every consumer that gave `ExpandingPanel` a choice of implementation now defaults to `ExpandingPanelClassic` instead — see `AccordianCore`'s `variant` prop (default `"classic"`), `ContentDocs`'s `panelVariant` prop (default `"classic"`), and `ResponsiveHeader`/`NavigationItems`'s `panelVariant` prop (default `"classic"`). `ExpandingPanel` itself is unchanged (still `::details-content`-only, no fallback) and logs a `console.warn` in dev mode on every mount warning about this. Reach for `ExpandingPanel` directly, or pass `variant`/`panelVariant: "modern"` to one of the above, only once you've confirmed it's acceptable for your actual audience — it is **not** the safe default anywhere in this library anymore. See pitfall #19 in the repo's `CLAUDE.md` for the full history.
+**The actual fix is component-level, not CSS-level**: every consumer that gave `ExpandingPanel` a choice of implementation now defaults to `ExpandingPanelClassic` instead — see `AccordionGroup`'s `variant` prop (default `"classic"`), `ContentDocs`'s `panelVariant` prop (default `"classic"`), and `ResponsiveHeader`/`NavigationItems`'s `panelVariant` prop (default `"classic"`). `ExpandingPanel` itself is unchanged (still `::details-content`-only, no fallback) and logs a `console.warn` in dev mode on every mount warning about this. Reach for `ExpandingPanel` directly, or pass `variant`/`panelVariant: "modern"` to one of the above, only once you've confirmed it's acceptable for your actual audience — it is **not** the safe default anywhere in this library anymore. See pitfall #19 in the repo's `CLAUDE.md` for the full history.
 
 ---
 
@@ -14,7 +14,7 @@
 
 | Prop | Type | Default | Notes |
 |------|------|---------|-------|
-| `name` | `string` | `useId()` | Identifies the panel. Used in ARIA attributes (`id-{name}-trigger`, `id-{name}-content`). If omitted, a unique id is generated automatically. |
+| `name` | `string` | `useId()` | The `<details>` `name`; panels sharing it form an exclusive-open group. Not used for element ids (each panel gets its own `useId()`). If omitted, a unique name is generated automatically. |
 | `animationDuration` | `number` | `400` | Expand/collapse transition duration in milliseconds. Pass `0` to disable animation. |
 | `forceOpened` | `boolean` | `false` | When `true`, the panel is always open. The toggle icon is hidden and clicks do not close the panel. |
 | `contentIsOnTop` | `boolean` | `false` | When `true`, the content region is taken out of flow and absolutely positioned directly below the summary, raised above surrounding page content via `z-index` — instead of pushing layout down when it opens. Applies a `content-is-on-top` class to the root `.expanding-panel` element (not the content div). Also enables click-outside-to-close (see below) — not applied when `forceOpened` is `true`. |
@@ -132,11 +132,11 @@ The component wires ARIA automatically from the `name` prop:
 
 | Element | Attribute | Value |
 |---------|-----------|-------|
-| `<summary>` | `id` | `id-{name}-trigger` |
-| `<summary>` | `aria-controls` | `id-{name}-content` |
+| `<summary>` | `id` | `{useId()}-trigger` |
+| `<summary>` | `aria-controls` | `{useId()}-content` |
 | `<summary>` | `aria-expanded` | `true` / `false` |
-| content div | `id` | `id-{name}-content` |
-| content div | `aria-labelledby` | `id-{name}-trigger` |
+| content div | `id` | `{useId()}-content` |
+| content div | `aria-labelledby` | `{useId()}-trigger` |
 | content div | `role` | `region` |
 
 Always supply a meaningful `name` prop when using multiple panels on the same page to avoid duplicate IDs.
@@ -213,9 +213,10 @@ See [component-local-style-override.md](../component-local-style-override.md) fo
 
 ## Notes
 
+- 2026-10-20: element ids come from a per-panel `useId()` instead of `name`. Panels sharing a `name` (an exclusive group, ResponsiveHeader's overflow groups) all rendered the same `id-{name}-trigger`/`-content`, so every `aria-controls` pointed at the first panel. The same pass made the summary track `minmax(0, 1fr) auto` and added `overflow-wrap: anywhere` on the root, so a long unbroken summary wraps instead of pushing the caret out of the clipped summary. The `StressTest` story covers long, RTL, emoji and empty-slot cases.
 - The open/close animation targets `::details-content` (`height: 0 → auto`, `overflow: clip`) — no JS height measurement needed. Requires `interpolate-size: allow-keywords` for the height transition itself (Chromium only as of 2026; other browsers with `::details-content` support still toggle correctly, just instantly). WebKit has neither, and there is no automatic fallback — use `ExpandingPanelClassic` (see the Overview section above) for anything that needs to work correctly there.
 - `content-is-on-top` is applied to the root `.expanding-panel` element, not `.expanding-panel-content` — style overrides must scope through it, e.g. `.expanding-panel.my-panel .expanding-panel-content { ... }`.
 - When `forceOpened` is `true`, `open` stays `true` regardless of `v-model`, but `v-model` still updates internally on clicks (useful if you later set `forceOpened` back to `false`).
-- Group panels into a native accordion (only one open at a time) by passing the same `name` to multiple panels or use `AccordianCore` which handles this automatically.
+- Group panels into a native accordion (only one open at a time) by passing the same `name` to multiple panels or use `AccordionGroup` which handles this automatically.
 - Auto-imported in Nuxt — no manual import needed.
 - File: `app/components/02.molecules/expandable/expanding-panel/ExpandingPanel.vue`

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

@@ -222,7 +222,7 @@ All tokens are read via `var(--token, default)` — see the full list in the com
 Defaults are for a **light** header (changed 2026-10-07): panels use `--page-bg`, borders and hover tints are `color-mix()`es of `--theme-text`, the overflow button is transparent with a `--theme-border-focus` hover outline. They used to assume a dark bar (`Canvas`, translucent white borders and tints). A dark header sets the tokens.
 | `--responsive-nav-decorator-indicator-color` / `--responsive-nav-decorator-hovered-*` | `currentColor` / inherits | The sliding active/hover indicator bar under the main nav. |
 | `--responsive-nav-decorator-indicator-offset` | `2px` | Distance of the active indicator below the active item's bottom edge; negative raises it. |
-| `--responsive-nav-decorator-indicator-height` / `--responsive-nav-decorator-hovered-border-radius` / `--responsive-nav-decorator-transition-duration` | `2px` / `4px` / `200ms` | Active indicator thickness, hover highlight radius, and how long both take to slide. |
+| `--responsive-nav-decorator-indicator-height` / `--responsive-nav-decorator-hovered-border-radius` / `--responsive-nav-decorator-transition-duration` | `2px` / `4px` / `200ms` | Active indicator thickness, hover highlight radius, and how long both take to slide (they jump under `prefers-reduced-motion`; the chevron and overflow button don't animate their movement either). |
 
 ---
 

package/.claude/skills/components/sparkle-effect.md

@@ -0,0 +1,79 @@
+---
+name: SparkleEffect
+description: SparkleEffect decorative wrapper that sends sparkles along its rounded border and fades in a glow on hover or keyboard focus
+type: reference
+---
+
+# SparkleEffect
+
+## Overview
+
+`SparkleEffect` wraps one element (a button, link or card) and, on hover or keyboard focus inside
+it, sends small blurred sparkles travelling along the wrapper's border box while a soft glow fades in
+behind the slot. Adapted from a Kevin Powell CodePen ("whimsical" button). It's a wrapper rather than
+a utility class because the effect needs its own decorative elements.
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `count` | `number` | `5` | Number of sparkles. Floored and clamped to 1 to 12; a non-finite value falls back to 5. |
+| `radius` | `string` | `undefined` | Written inline as `--sparkle-effect-radius`. Match the slotted element's corner radius. |
+| `continuous` | `boolean` | `false` | Loop the sparkles for as long as the hover or focus lasts, instead of one burst per hover. Rendered as `data-continuous`. |
+| `tag` | `"span" \| "div"` | `"span"` | `span` (inline-grid) for buttons and inline content, `div` (grid) for block content like cards. |
+| `styleClassPassthrough` | `string \| string[]` | `[]` | Extra classes on the root. |
+
+## Slots
+
+| Slot | Description |
+|---|---|
+| `default` | The element that gets the effect. One element; the wrapper shrinks to it. |
+
+## Basic usage
+
+```vue
+<SparkleEffect>
+  <InputButton button-text="Whimsy" is-pill />
+</SparkleEffect>
+
+<SparkleEffect continuous>
+  <InputButton button-text="Keep hovering" is-pill />
+</SparkleEffect>
+
+<SparkleEffect tag="div" radius="1.2rem" :count="7">
+  <NuxtLink to="/workshop" class="workshop-card">...</NuxtLink>
+</SparkleEffect>
+```
+
+## Behaviour
+
+- Renders the slotted content unchanged; the sparkles and glow are added around it.
+- Renders `count` sparkles, floored and clamped to 1 to 12, with 5 for NaN or Infinity.
+- The first five sparkles use tuned presets (lightness, hue shift, scale, drift, end point, speed)
+  from the original pen. Sparkles 6 to 12 reuse them with a further hue shift (35° per cycle), an end
+  point 13% further round the path and mirrored drift. Script writes them inline per sparkle, so there
+  is no `:nth-child` and slotted siblings can't shift them.
+- Hover, or `:focus-visible` on anything inside, runs the effect. By default it's one burst per hover; with
+  `continuous` each sparkle loops at its own speed until the hover or focus ends. The slotted control keeps its own
+  focus ring.
+- The glow sits behind the slot (`isolation: isolate` on the root, glow at `z-index: -1`), so it
+  works whatever stacking context the slotted element creates.
+- Sparkles follow `--sparkle-effect-radius`: the wrapper can't read the child's radius.
+- Sparkles are in an `aria-hidden`, `pointer-events: none` layer with nothing focusable.
+- `prefers-reduced-motion: reduce` gives the glow only.
+- Without `offset-path: border-box` (Safari before 17.2) no sparkles render; the glow still works.
+  Without relative colour syntax (Safari before 18) sparkles use the base colour unshifted.
+- No effect while the slotted element is `:disabled` or `aria-disabled="true"` (InputButton
+  `readonly`).
+- Hostile counts, long unbroken button labels, full-width block children, round icon buttons, nested
+  wrappers and an empty wrapper don't break layout (`StressTest` story).
+
+## Styling
+
+Colour (defaults to `--theme-border`), sparkle size, sparkle blur (`1px`), duration, radius, glow blur and glow opacity
+are public tokens; see `CONSUMER-STYLING.md`.
+
+## Stories
+
+**Atoms/Effects/SparkleEffect**: Default (the original pen's lavender), ThemeColour, ManySparks,
+Continuous, OnCard, Disabled, StressTest.

package/.claude/skills/index.md

@@ -81,7 +81,8 @@ Each skill is a single markdown file named `<area>-<task>.md`.
     ├── alert-mask.md      — AlertMask (renamed from AlertMaskCore): SVG border/fill sized to slotted content via ResizeObserver; config-prop geometry, --alert-mask-* colour tokens
     ├── alert-masked-content.md — AlertMaskedContent: AlertContentInner inside AlertMask's SVG mask (accent cut-out border + translucent fill); masked variant for DisplayToast/DisplayPrompt; --alert-masked-content-* colour tokens
     ├── animated-svg-text.md    — AnimatedSvgText: inline SVG stroke-draw-then-fill animation, text slot, CSS token API
-    ├── accordian-core.md       — AccordianCore indexed dynamic slots (accordian-{n}-summary/icon/content), exclusive-open grouping
+    ├── accordion-group.md      — AccordionGroup (renamed from AccordianCore): panels inferred from item-{n}-summary/content/icon slots, exclusive-open via shared name, unique per-panel ids, classic/modern variant, max-width token
+    ├── accordion-chat.md       — AccordionChat: accordion as a chat (question bubbles right, rich answer bubbles left), avatar precedence item-{n}-avatar > #avatar > avatarLabel > none, built on ExpandingPanelClassic, full --accordion-chat-* token API (dark theme via tokens only)
     ├── eyebrow-text.md         — EyebrowText props, usage patterns, styling
     ├── hero-text.md            — HeroText props, usage patterns, styling
     ├── layout-grid-by-cols.md  — LayoutGridByCols dynamic slots (item-{n}), column/gap/collapse props that write public --layout-grid-by-cols-* tokens (CSS-settable), section label
@@ -126,7 +127,7 @@ Each skill is a single markdown file named `<area>-<task>.md`.
     ├── profile-section.md      — ProfileSection (02.molecules): picture + numbered profile-info-N slots, eyebrow/hero header (above, or over the picture top/bottom on a scrim via header-placement), profileLinks, container-query two-column layout, .location/.services highlight tokens
     ├── display-theme-switch.md — DisplayThemeSwitch: system/light/dark picker wrapping SegmentedControl, wired to useSettingsStore, labels/icons props, small sizing variant
     ├── card-core.md            — CardCore: generic card container, dynamic named slots as rows, 4 variants, blurred backdrop layer, full CSS token API
-    ├── action-menu.md          — ActionMenu + ActionMenuItem: ellipsis trigger + anchored popover menu, indexed item-{n} slots, link/button items, full CSS token API
+    ├── action-menu.md          — ActionMenu + ActionMenuItem: ellipsis trigger + anchored popover menu, indexed item-{n} slots, link/button items, max-width cap with wrapping labels + label line-clamp token, inline flip near the left edge, full CSS token API
     ├── select-menu.md          — SelectMenu: v-model single-select listbox popover (ActionMenu's popover mechanics, InputSelect's selected-option semantics), icon/text/chevron trigger toggles, checkmark on selected option, options-array driven, full CSS token API
     ├── display-dialog.md       — DisplayDialog: native <dialog> overlay, 5 variants (dialog/modal/confirm/alert/fullscreen), useDialogControls integration, InputButton close button, viewport-capped panel with wrapping title/content/footer, aria-label fallthrough when untitled, CSS token API
     ├── display-chip.md         — DisplayChip: status indicator chip overlay, CSS trig positioning, circle/square shapes, status colours, icon/label content
@@ -170,6 +171,7 @@ Each skill is a single markdown file named `<area>-<task>.md`.
     ├── column-flow-grid.md        — ColumnFlowGrid (renamed from MasonryGrid): CSS multi-column text-flow layout, named dynamic slots (no count/data prop), itemMinWidth/gap/unit sizing, CSS token API; not a true masonry, see "which one do I want?"
     ├── masonry-grid.md            — MasonryGrid: real measured-height masonry (greedy shortest-column packing, animated resize) absorbed from the now-retired MasonryGridOrdered; named dynamic slots, fixedWidth/justify, CSS token API
     ├── glowing-border.md          — GlowingBorder: animated conic-gradient glow border, 5 colour variants, tag prop, full CSS token API for width/radius/surface/duration/per-variant colour stops, reduced-motion guard
+    ├── sparkle-effect.md          — SparkleEffect: slot wrapper sending sparkles along its rounded border (offset-path) plus a glow on hover/focus-visible, count prop (1 to 12, preset table), continuous prop (loop while hovered/focused), radius prop/token, blur token, disabled suppression, reduced-motion and old-Safari glow-only fallback, CSS token API
     ├── section-parallax.md        — SectionParallax: CSS fixed-background parallax section, iOS Safari limitation, when to use vs ScrollRevealImage, CSS token API, reduced-motion guard
     ├── container-glow.md          — ContainerGlow (renamed from ContainerGlowCore): pointer-proximity glow-border cards, named dynamic slots (one card per slot), config-prop-driven layout/interaction, full CSS token API for static visuals, reduced-motion guard
     ├── dashboard-quad-grid.md      — DashboardQuadGrid (renamed from LayoutGridA): fixed 4-slot dashboard grid, container-query breakpoints, CSS token API

package/.claude/skills/storybook-add-story.md

@@ -313,6 +313,14 @@ prop and try to pass it. Make it unmistakable:
 
 `PriceList.stories.ts` and `GoogleReviews.stories.ts` (line-clamp controls) follow this.
 
+## Dynamic slot names in template strings
+
+A dynamic slot argument can't contain spaces: `` #[`item-${i + 6}-summary`] `` is cut at the first space
+(HTML attribute names end there) and the story fails with "Missing } in template expression". It
+only shows when Storybook renders the story, since the template is a string. Write the expression
+without spaces (`` #[`item-${i}-summary`] ``), or build the names in `setup()` and bind them:
+`#[item.summarySlot]` (AccordionChat's StressTest, 2026-10-20).
+
 ## Docs page
 
 `.storybook/preview.ts` sets `tags: ["autodocs"]` globally (2026-10-14), so every story file gets a

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

@@ -47,7 +47,7 @@ Component skills land in `.claude/skills/srcdev-nuxt-components/components/`:
 │           ├── pricing-card.md         — SaaS pricing plan card
 │           ├── input-copy.md           — copy-to-clipboard input
 │           ├── expanding-panel.md      — single expand/collapse panel
-│           ├── accordian-core.md       — native accordion (grouped panels)
+│           ├── accordion-group.md      — native accordion (grouped panels)
 │           ├── display-avatar.md       — circular avatar component
 │           ├── card-core.md            — generic card container
 │           ├── auto-grid.md            — responsive auto-fit grid

package/.vscode/srcdev-component-accordion-chat.code-snippets

@@ -0,0 +1,42 @@
+{
+  "SRCDEV AccordionChat": {
+    "description": "AccordionChat: questions as right-hand bubbles, answers as left-hand bubbles with an avatar",
+    "scope": "vue,html",
+    "body": [
+      "<AccordionChat name=\"${1:faq}\" avatar-label=\"${2:AM}\">",
+      "  <template #item-0-summary>${3:Question one?}</template>",
+      "  <template #item-0-content><p>${4:Answer one.}</p></template>",
+      "",
+      "  <template #item-1-summary>${5:Question two?}</template>",
+      "  <template #item-1-content><p>${6:Answer two.}</p></template>",
+      "</AccordionChat>"
+    ]
+  },
+  "SRCDEV AccordionChat Looped": {
+    "description": "AccordionChat driven by an array via dynamic item-{n} slot names",
+    "scope": "vue,html",
+    "body": [
+      "<AccordionChat name=\"${1:faq}\" avatar-label=\"${2:AM}\">",
+      "  <template v-for=\"(item, i) in ${3:items}\" :key=\"`s\\${i}`\" #[`item-\\${i}-summary`]>{{ item.${4:question} }}</template>",
+      "  <template v-for=\"(item, i) in ${3:items}\" :key=\"`c\\${i}`\" #[`item-\\${i}-content`]><p>{{ item.${5:answer} }}</p></template>",
+      "</AccordionChat>"
+    ]
+  },
+  "SRCDEV AccordionChat CSS Override": {
+    "description": "AccordionChat colour and type tokens scoped to a page or section class",
+    "scope": "css",
+    "body": [
+      ".${1:faq-section} {",
+      "  --accordion-chat-question-surface: ${2:#ececec};",
+      "  --accordion-chat-question-colour: ${3:#1d1d1f};",
+      "  --accordion-chat-question-surface-open: ${4:#1d1d1f};",
+      "  --accordion-chat-question-colour-open: ${5:#ffffff};",
+      "  --accordion-chat-answer-surface: ${6:#ffffff};",
+      "  --accordion-chat-answer-border: ${7:#e6e4e1};",
+      "  --accordion-chat-answer-colour: ${8:#2a2a2c};",
+      "  --accordion-chat-avatar-surface: ${9:#1d1d1f};",
+      "  --accordion-chat-avatar-colour: ${10:#ffffff};",
+      "}"
+    ]
+  }
+}