srcdev-nuxt-components 9.6.18 → 9.6.20

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/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/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.

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,11 +81,12 @@ 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
-    ├── page-row.md             — PageRow layout primitive: CSS grid named lines, nesting pattern, align prop, aria-labelledby, CSS token API
+    ├── page-row.md             — PageRow layout primitive: CSS grid named lines, nesting pattern, align prop, data-variant hook, aria-labelledby, CSS token API
     ├── link-text.md            — LinkText props, slots, usage patterns, styling
     ├── header-block.md         — HeaderBlock: tagLevel/classLevel semantic-vs-visual heading decoupling, page-heading-N utility classes
     ├── text-block.md           — TextBlock: vertical-rhythm text wrapper, --text-block-padding-block-start/-end tokens, heading-id slot prop for section/article aria-labelledby
@@ -119,30 +120,30 @@ Each skill is a single markdown file named `<area>-<task>.md`.
     ├── rotating-carousel-image.md — RotatingCarouselImage: 3D rotating image carousel, scroll-parallax tilt, focus/keyboard/hover pause, reduced-motion, CSS tokens
     ├── social-icons-list.md    — SocialIconsList: data-driven social icon links, ISocialIcon type, logos: icon names (dark ones vanish on dark backgrounds; mono alternatives), showLabel + scoped icon/label slots, per-item brandColour (set brand-colour tokens on .social-icons-list-item), tile/circle/label tokens, four recipes (mono tiles, dark dock, pills, overlapping stack), unsafe hrefs skipped
     ├── display-qr-code.md      — DisplayQrCode: QR code SVG from a string value, colour/size/variant/radius props, currentColor default
-    ├── capture-qr-code.md      — CaptureQrCode: live camera scanner, error state, visibility/route/KeepAlive lifecycle, media stream cleanup
-    ├── decode-qr-code.md       — DecodeQrCode: file picker + drag-and-drop image decoder, shared results list, CSS override points
-    ├── auto-grid.md            — AutoGrid: auto-fit responsive grid, $slots iteration, --auto-grid-gap/min-col-size-{small,default,large} tokens, is-responsive, semantic tag + aria
+    ├── capture-qr-code.md      — CaptureQrCode: live camera scanner, localisable errorMessages, error slot, restarts when the tab is shown again, own-root media stream cleanup, wrapping results
+    ├── decode-qr-code.md       — DecodeQrCode: file picker + drag-and-drop image decoder, shared results list, no-result/read-error messages, data-dropping state hook, CSS override points
+    ├── auto-grid.md            — AutoGrid: auto-fit responsive grid, $slots iteration, --auto-grid-gap/min-col-size-{small,default,large} tokens, is-responsive (data-responsive hook), semantic tag + aria
     ├── display-avatar.md       — DisplayAvatar (02.molecules): circular avatar with image/initials fallback (alt announced), broken-image fallback, data-size scale tokens, image-size, --display-avatar-* colours, chip badge, icon slot
     ├── 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
     ├── display-pill.md         — DisplayPill: pill/badge label with icon slot, 6 variants, 3 sizes, reversible order, --display-pill-* tokens (variants fall back to base colour/border/ring tokens); data-size/data-variant/data-reversed hooks (2026-10-08, were bare classes), label line-clamp token, -02 ring and outlined-monochrome recipes, StressTest story
-    ├── carousel-flip.md        — CarouselFlip: FLIP-animated carousel, carouselDataIds slot API, buttonLayout variants (sides/controls-flanking/controls-grouped-right/overlay), CSS tokens
-    ├── samaritan-prompt.md — SamaritanPrompt + SamaritanPromptMixed: animated text prompts, typewriter/word-pulse effects, MessageConfig API, pause on hover, aria-live, CSS tokens
+    ├── carousel-flip.md        — CarouselFlip: FLIP-animated carousel, carouselDataIds slot API, buttonLayout variants (sides/controls-flanking/controls-grouped-right/overlay/track-edges), button align/offset/edge-inset tokens, InputButton prev/next, prefixed classes + data-* state hooks, empty/single-item handling, CSS tokens
+    ├── samaritan-prompt.md — SamaritanPrompt + SamaritanPromptMixed: animated text prompts, typewriter/word-pulse effects, MessageConfig API, grapheme-safe typing, instant typing under reduced motion, pause on hover, aria-live, theme-default colours, wrapping + line-clamp, CSS tokens
     ├── display-toast.md          — DisplayToast (standalone v-model) + DisplayToastProvider + useToastQueue (app-wide queue): stacking, FLIP dismiss, maxVisible, SemanticTheme × 4, masked SVG glass variant
     ├── display-prompt.md         — DisplayPrompt: inline notification banner, SemanticTheme × 4, local vs parent-controlled dismiss, outlined modifier, CSS token override
     ├── expanding-panel-classic.md — ExpandingPanelClassic: grid-template-rows animation (no Baseline-2025 dependency), same API as ExpandingPanel, cross-browser animation parity trade-off
-    ├── site-header.md            — SiteHeader: PageRow + SkipLinks + ResponsiveHeader composition, #branding/#secondaryNavigation slots, dual styleClassPassthrough hooks
+    ├── site-header.md            — SiteHeader: PageRow + SkipLinks + ResponsiveHeader composition, #branding/#secondaryNavigation slots, dual styleClassPassthrough hooks, sticky on the outer row, capped branding column
     ├── responsive-header.md      — ResponsiveHeader: overflow-collapsing adaptive nav, measurement-pipeline gotchas (unsized icons, vw font-size drift), full CSS token API
     ├── navigation-items.md       — NavigationItems: internal overflow-panel renderer for ResponsiveHeader, complement-visibility logic, not used standalone
     ├── cookie-consent-banner.md  — CookieConsentBanner: fixed non-modal Accept/Reject banner built on AlertContent, driven by useCookieConsent; title/message slots, acceptLabel/rejectLabel/icon/showIcon/ariaLabel props, InputButton (inline) actions, position/button tokens (panel via --alert-content-*), teleported so tokens go on html/passthrough
     ├── display-banner.md         — DisplayBanner: canvas/content stacked overlay banner, conditional slot wrappers, CSS token API
-    ├── deep-expanding-menu.md         — DeepExpandingMenu: anchor-positioned popover nav panels, browser support caveat, CSS token API
-    ├── deep-expanding-menu-classic.md — DeepExpandingMenuClassic: <details>-based fallback nav, click-outside close, CSS token API
+    ├── deep-expanding-menu.md         — DeepExpandingMenu: anchor-positioned popover nav panels, browser support caveat, ariaLabel, prefixed classes, wrapping/flip/scroll stress handling, CSS token API
+    ├── deep-expanding-menu-classic.md — DeepExpandingMenuClassic: <details>-based fallback nav, per-instance exclusive groups, outside-click/Escape/link-follow close, ariaLabel, prefixed classes, container-width panels, CSS token API
     ├── display-tooltip.md         — DisplayTooltip: anchor-positioned popover trigger, browser support caveat, triggerIcon prop, type="button" trigger, hideTrigger removes it from tab order (data-hidden), CSS token API
     ├── display-tooltip-rich.md    — DisplayTooltipRich (Material 3 rich tooltip, renamed from DisplayTooltipDefined 2026-10-18): structured title/body/action content with InputButton close button, per-field line-clamp tokens, composes DisplayTooltip
     ├── pop-over.md                — PopOver: generic anchor-positioned disclosure panel, consumer-supplied trigger/content slots, placement prop, CSS token API
@@ -168,12 +169,13 @@ Each skill is a single markdown file named `<area>-<task>.md`.
     ├── sliding-toggle.md       — SlidingToggle: single-choice segmented radiogroup with text labels of any width, measured sliding + hover indicators (useSlidingIndicator), roving tabindex/arrow keys, corner-shape token, CSS token API
     ├── entry-animation.md         — EntryAnimation: scroll-driven entry animation wrapper (slide-in/zoom-reveal/exit-blur utility classes), skipAnimation for above-the-fold loop items, reduced-motion handled at the CSS layer
     ├── 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
+    ├── masonry-grid.md            — MasonryGrid: real measured-height masonry (greedy shortest-column packing, animated resize, re-packs on any tile 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
-    └── dashboard-stats-grid.md     — DashboardStatsGrid (renamed from LayoutGridB): top-row panel cluster + bottom-row panel strip dashboard grid, topRowSlot1ItemCount/bottomRowItemCount, CSS token API
+    ├── dashboard-quad-grid.md      — DashboardQuadGrid (renamed from LayoutGridA): fixed 4-slot dashboard grid, prefixed cell classes, container-query breakpoints, CSS token API
+    └── dashboard-stats-grid.md     — DashboardStatsGrid (renamed from LayoutGridB): top-row panel cluster + bottom-row panel strip dashboard grid, topRowSlot1ItemCount/bottomRowItemCount (floored, clamped at 0), prefixed classes, CSS token API
 ```
 
 ## Skill file template