srcdev-nuxt-components 9.4.12 → 9.5.0

package/.claude/skills/components/alert-content.md

@@ -0,0 +1,110 @@
+# AlertContent / AlertContentInner
+
+## Overview
+
+`AlertContent` is a themed alert panel: an accent stripe on the left, then an icon, a title and/or
+message, an optional row of action buttons, and an optional dismiss button. `data-theme` (from the
+required `theme` prop) drives every colour through the `--theme-*` tokens, so it works in light and
+dark mode.
+
+`AlertContentInner` is the shared inside (icon, body, actions, dismiss) used by both `AlertContent`
+and `AlertMaskedContent`. `DisplayToast`, `DisplayToastProvider` and `DisplayPrompt` pick one of
+those two with `<component :is>`, so props and slots added here should be forwarded by both
+wrappers. Don't use `AlertContentInner` directly in pages.
+
+**Location**: `app/components/02.molecules/alert-content/AlertContent.vue`, `AlertContentInner.vue`
+
+> **Changed 2026-09-27**: skill doc renamed from `alert-content-inner.md`. Added the `showIcon` prop
+> and `#actions` slot, public `--alert-content-*` tokens for the previously hardcoded values, and
+> renamed `.title`/`.content` to `.alert-content-title`/`.alert-content-text`.
+
+## Props
+
+Same on `AlertContent`, `AlertContentInner` and `AlertMaskedContent`:
+
+| Prop | Type | Default | Notes |
+|---|---|---|---|
+| `theme` | `SemanticTheme` | — | **Required.** Default icon, and `data-theme` on `AlertContent`'s root. |
+| `customIcon` | `string` | `undefined` | Icon name override. |
+| `showIcon` | `boolean` | `true` | Set `false` to drop the icon column entirely (no empty space left). |
+| `dismissible` | `boolean` | `false` | Shows the dismiss button, which emits `dismiss`. |
+| `contentId` | `string` | `undefined` | `id` on `.alert-content-body`, for `aria-describedby` wiring. |
+| `ariaLive` | `"polite" \| "assertive" \| "off"` | `undefined` | `aria-live` on `.alert-content-body`. Leave unset for static content (e.g. a banner present on page load). |
+
+## Slots
+
+| Slot | Description |
+|---|---|
+| `#icon` | Replaces the icon (inside the `aria-hidden` icon region). |
+| `#title` | Title line (`<p class="alert-content-title">`). |
+| `#content` | Message text (`<p class="alert-content-text">`), so phrasing content only. |
+| `#actions` | A wrapping, right-aligned (`--alert-content-actions-justify`) row of controls under the message. Sits **outside** `.alert-content-body`, so it isn't part of the `aria-live` region or the `contentId` description. |
+| `#dismissIcon` | Replaces the dismiss button icon. |
+| `#dismissLabel` | Screen-reader label for the dismiss button (default `"Close"`); pass translated text here. |
+
+## Events
+
+| Event | When |
+|---|---|
+| `dismiss` | The dismiss button is clicked. |
+
+## app.config defaults
+
+Icon names, per theme and for the dismiss button, are configurable globally. One change covers every
+toast, prompt and any other component built on `AlertContentInner`.
+
+```ts
+export default defineAppConfig({
+  srcdev: {
+    alertContent: {
+      icons: {
+        info: "heroicons:information-circle",
+        success: "heroicons:check-circle",
+        warning: "heroicons:exclamation-triangle",
+        error: "heroicons:x-circle",
+      },
+      dismissIcon: "heroicons:x-mark",
+    },
+  },
+})
+```
+
+Resolution chain: **`customIcon` prop → app.config icons → hardcoded fallback**. The `#dismissIcon`
+slot always wins over app.config.
+
+## Usage
+
+```vue
+<AlertContent theme="success">
+  <template #title>Saved</template>
+  <template #content>Your changes have been saved.</template>
+</AlertContent>
+
+<!-- Action row (right-aligned by default), custom icon -->
+<AlertContent theme="info" custom-icon="material-symbols:cookie-outline">
+  <template #title>Cookies</template>
+  <template #content>We use cookies to understand how the site is used.</template>
+  <template #actions>
+    <InputButton type="button" variant="tertiary" button-text="Reject" @click="reject" />
+    <InputButton type="button" variant="primary" button-text="Accept" @click="accept" />
+  </template>
+</AlertContent>
+```
+
+## Styling
+
+Full token list in `CONSUMER-STYLING.md` next to the component. Outer shape (`AlertContent` only):
+`--alert-content-accent`, `-accent-width`, `-border`, `-border-radius-start`/`-end`. Inside (applies to
+`AlertMaskedContent` too): `--alert-content-inner-background`, `-gap`, `-padding`, `-text-colour`,
+`-icon-colour`, `-icon-size`, `-title-font-size`, `-text-font-size`, `-body-gap`,
+`-actions-spacing`, `-actions-gap`, `-actions-justify` (default `flex-end`, right-aligned), and the `-dismiss-*` tokens.
+
+## Notes
+
+- `AlertMaskedContent` sets `--alert-content-inner-background: transparent` on its own root so the
+  SVG mask shows through; change its fill with `--alert-masked-content-background` instead.
+- `AlertContent`'s root is `display: grid` so the inner stretches to the root's height (e.g. in a
+  stretched row next to a taller alert) instead of showing the accent colour below it.
+- The inner is a flex row (icon | main | dismiss), so a missing icon or dismiss button leaves no
+  empty column or stray gap. Before 2026-09-27 it was a fixed three-column grid, and a
+  non-dismissible alert carried an empty trailing column plus its gap.

package/.claude/skills/components/alert-mask-core.md

@@ -63,6 +63,12 @@ accent-bordered alert shape.
 - An SVG outer path (rounded rect using `radiusLeft`/`radiusRight`) and inner path (the same rect
   inset by the border thicknesses) are computed from that measurement, and the region between them
   is masked to `borderColour`; the inner region is filled with `backgroundColour`.
+- Each instance gets its own mask id (`alert-mask-<useId>`), so several masks on one page don't
+  share a shape. The SVG is `aria-hidden`.
+- `borderColour`/`backgroundColour` are applied as `fill` **styles**, not attributes, so a `var()`
+  value (e.g. `var(--theme-accent)`, or a consumer token) resolves against the element's ancestors.
+  A `var(--theme-*)` colour needs a `data-theme` ancestor to resolve.
+- The `ResizeObserver` is disconnected on unmount.
 - The slot content itself sits in a separate `.alert-mask-content` div, inset by the same border
   thicknesses via internal `--_inset-*` custom properties, so it visually sits inside the drawn
   border without overlapping it.
@@ -71,7 +77,9 @@ accent-bordered alert shape.
 
 Unlike most components in this library, `AlertMaskCore` has no public `--alert-mask-core-*` CSS
 custom properties — the SVG path geometry can't be driven by `var()`, so `config` is the entire
-override surface (colour included). See CONSUMER-STYLING.md.
+override surface (colour included). Colour strings may be `var()` references, so a wrapper
+component can expose its own tokens through them (as `AlertMaskedContent` does with
+`--alert-masked-content-border-colour`/`-background`). See CONSUMER-STYLING.md.
 
 ## Notes
 
@@ -82,3 +90,9 @@ override surface (colour included). See CONSUMER-STYLING.md.
   `--_height`/`--_inset-inline-start`/`--_inset-inline-end`/`--_inset-block-start`/
   `--_inset-block-end` (they're JS-computed plumbing, not a consumer override surface — `config`
   already covers that). No behaviour change.
+- Changed 2026-09-27: the mask id was a hardcoded `borderMask`, so with more than one instance on a
+  page (e.g. stacked masked toasts) every instance used the first one's mask shape; now unique per
+  instance via `useId()`. Also: SVG marked `aria-hidden`, colours applied as `fill` styles so `var()`
+  resolves reliably, and the `ResizeObserver` is disconnected on unmount (it previously leaked).
+  Stories now render over a photo/gradient backdrop with a `data-theme` wrapper; on the plain canvas
+  they looked flat grey.

package/.claude/skills/components/alert-masked-content.md

@@ -0,0 +1,95 @@
+---
+name: AlertMaskedContent
+description: AlertMaskedContent — AlertContentInner inside AlertMaskCore's SVG mask (accent border cut-out + translucent fill); the masked variant DisplayToast/DisplayPrompt swap in
+type: reference
+---
+
+# AlertMaskedContent
+
+## Overview
+
+The "glass" sibling of `AlertContent`. Same icon/title/body/dismiss layout (the shared
+`AlertContentInner`), but instead of an opaque surface it sits inside `AlertMaskCore`, which draws
+an accent-coloured border as an SVG cut-out and a translucent fill, so the page behind shows
+through.
+
+Used internally by `DisplayToast` (`appearance.masked: true`) and `DisplayPrompt`
+(`:masked="true"`). Use it directly when you want a standalone alert over imagery or a gradient.
+
+**Location**: `app/components/02.molecules/alert-masked-content/AlertMaskedContent.vue`
+
+## Props
+
+| Prop | Type | Default | Notes |
+|---|---|---|---|
+| `theme` | `SemanticTheme` | — | **Required.** Sets `data-theme` on the root; drives the accent colour and default icon. |
+| `customIcon` | `string` | `undefined` | Icon name override (see `alert-content.md` for the resolution chain). |
+| `showIcon` | `boolean` | `true` | Render the icon column. |
+| `dismissible` | `boolean` | `false` | Shows the dismiss button. |
+| `contentId` | `string` | `undefined` | `id` on `.alert-content-body`, for `aria-describedby` wiring. |
+| `ariaLive` | `"polite" \| "assertive" \| "off"` | `undefined` | `aria-live` on `.alert-content-body`. |
+| `maskConfig` | `AlertMaskConfig` | `undefined` | Merged over the defaults below; any field you set wins. |
+
+Default mask config:
+
+```ts
+{
+  borderColour: "var(--alert-masked-content-border-colour, var(--theme-accent))",
+  backgroundColour: "var(--alert-masked-content-background, color-mix(in oklab, var(--theme-surface-subtle) 80%, transparent))",
+  radiusLeft: 8, radiusRight: 4,
+  borderLeft: 6, borderTop: 1, borderRight: 1, borderBottom: 1,
+}
+```
+
+## Slots
+
+Forwarded to `AlertContentInner`: `#icon`, `#title`, `#content`, `#actions` (a button row under the message, outside the live body), `#dismissIcon`, `#dismissLabel`
+(sr-only dismiss label, default `"Close"`; pass translated text here).
+
+## Events
+
+| Event | Payload | When |
+|---|---|---|
+| `dismiss` | — | The dismiss button is clicked. |
+
+## Usage
+
+```vue
+<AlertMaskedContent theme="success" dismissible @dismiss="hide">
+  <template #title>Saved</template>
+  <template #content>Your changes have been saved.</template>
+</AlertMaskedContent>
+```
+
+Colour via tokens (inherits from any ancestor you own):
+
+```vue
+<div style="--alert-masked-content-border-colour: white; --alert-masked-content-background: oklch(20% 0.05 260 / 0.6);">
+  <AlertMaskedContent theme="info">...</AlertMaskedContent>
+</div>
+```
+
+Geometry via `maskConfig`:
+
+```vue
+<AlertMaskedContent theme="info" :mask-config="{ radiusLeft: 16, radiusRight: 16, borderLeft: 2 }">...</AlertMaskedContent>
+```
+
+## Styling
+
+See `CONSUMER-STYLING.md` next to the component. Public tokens:
+`--alert-masked-content-border-colour`, `--alert-masked-content-background`. The root sets
+`--alert-content-inner-background: transparent` on itself so the mask shows through.
+
+## Notes
+
+- Needs something behind it to read as a mask. On a plain page it's just a grey-ish box. The
+  Storybook "Over Imagery" story compares it with `AlertContent` over photos and gradients.
+- The default fill is `--theme-surface-subtle` at 80% (via `color-mix()`), the surface
+  `--theme-text` is designed for, so contrast holds in light and dark mode. Changed 2026-09-27:
+  it was `rgba(0, 0, 0, 0.3)`, which put dark light-mode text on a darkened backdrop.
+- Changed 2026-09-27: colours are now overridable via the two public tokens (previously fixed
+  literals, reachable only through `maskConfig`), and the transparent inner background uses
+  `AlertContentInner`'s public `--alert-content-inner-background` instead of reaching into its
+  private `--_alert-content-inner-bg`. `AlertMaskCore` now gives each instance a unique mask id,
+  so several masked alerts on one page (e.g. stacked toasts) no longer all use the first one's shape.

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

@@ -2,7 +2,7 @@
 
 ## Overview
 
-`AutoGrid` is a responsive auto-fit CSS grid wrapper. It renders whatever named slots the consumer provides, auto-fitting columns to a minimum of `250px` each. Column count and gap are controlled via CSS custom properties, making layout adjustments a single-line style override rather than a prop change.
+`AutoGrid` is a responsive auto-fit CSS grid wrapper. It renders whatever named slots the consumer provides, auto-fitting columns to a minimum of `300px` each (or stepping 250/300/350px by container width with `is-responsive`). Column count and gap are controlled via CSS custom properties, making layout adjustments a single-line style override rather than a prop change.
 
 ---
 
@@ -37,18 +37,28 @@ When filling from a data array, use a dynamic slot name in a `v-for`:
 | Prop (template form)       | Type                                        | Default | Notes                                         |
 | -------------------------- | ------------------------------------------- | ------- | --------------------------------------------- |
 | `tag`                      | `"div" \| "section" \| "article" \| "main"` | `"div"` | Use a semantic tag for page landmark regions. |
+| `is-responsive`            | `boolean`                                   | `false` | Adds `.is-responsive`: column minimum steps small → default → large via `@container` queries at 768px / 1024px. Needs a `container-type: inline-size` ancestor. |
 | `:style-class-passthrough` | `string \| string[]`                        | `[]`    | Extra CSS classes on the root element.        |
 
 ---
 
 ## CSS custom properties
 
-Override these via `style` attribute or a `styleClassPassthrough` class in a consuming `<style>` block.
+Set these on the grid itself (`style`, passthrough class) or on any ancestor you own; they inherit
+in. Full reference: `app/components/01.atoms/grids/auto-grid/CONSUMER-STYLING.md`.
 
-| Property                  | Default  | Notes                                                                                    |
-| ------------------------- | -------- | ---------------------------------------------------------------------------------------- |
-| `--auto-grid-min-col-size` | `250px` | Minimum column width; browser auto-fits as many columns as will fit.                    |
-| `--auto-grid-gap`          | `1rem`  | Grid gap between items.                                                                  |
+| Property                           | Default | Notes                                                                        |
+| ---------------------------------- | ------- | ---------------------------------------------------------------------------- |
+| `--auto-grid-gap`                  | `1rem`  | Grid gap between items.                                                      |
+| `--auto-grid-min-col-size-default` | `300px` | Minimum column width when `is-responsive` is off; the 768px+ step when on.   |
+| `--auto-grid-min-col-size-small`   | `250px` | `is-responsive` only: minimum column width below 768px container width.     |
+| `--auto-grid-min-col-size-large`   | `350px` | `is-responsive` only: minimum column width at 1024px+ container width.      |
+
+There is no `--auto-grid-min-col-size` token (an earlier version of this doc listed one; it never
+existed in the component). Use `--auto-grid-min-col-size-default`.
+
+> Changed 2026-09-27: the tokens used to be declared on `.auto-grid` itself, so ancestor values
+> never landed. Defaults are now `var()` fallbacks at the point of use.
 
 ### Fixed column count
 
@@ -63,7 +73,7 @@ Override `grid-template-columns` directly — there is no single token for this:
 ### Narrower minimum item width
 
 ```vue
-<AutoGrid style="--auto-grid-min-col-size: 180px;">
+<AutoGrid style="--auto-grid-min-col-size-default: 180px;">
   ...
 </AutoGrid>
 ```
@@ -154,11 +164,9 @@ See [component-aria-landmark.md](../component-aria-landmark.md) for the full lan
    Use CSS custom properties for layout, not utility classes.
    Delete this block if no overrides are needed.
    ─────────────────────────────────────────────────────────────────── */
-.auto-grid {
-  &.my-auto-grid {
-    --auto-grid-min-col-size: 200px;
-    --auto-grid-gap: 2rem;
-  }
+.my-auto-grid {
+  --auto-grid-min-col-size-default: 200px;
+  --auto-grid-gap: 2rem;
 }
 </style>
 ```
@@ -171,5 +179,5 @@ See [component-local-style-override.md](../component-local-style-override.md) fo
 
 - Auto-imported in Nuxt — no manual import needed.
 - Slot names can be anything — semantic (`#revenue`) or indexed (`#item-0`). Document order determines render order.
-- `--auto-grid-min-col-size` controls the minimum column width; `auto-fit` fills as many columns as will fit.
+- `--auto-grid-min-col-size-default` controls the minimum column width; `auto-fit` fills as many columns as will fit.
 - To fix the column count, override `grid-template-columns` directly (e.g. `style="grid-template-columns: repeat(3, 1fr)"`) — there is no single token for this.

package/.claude/skills/components/canvas-switcher.md

@@ -4,7 +4,7 @@
 
 `CanvasSwitcher` renders a row of icon buttons (mobile / tablet / laptop / desktop / full width)
 for switching a bound `MediaCanvas` value — typically used to drive a preview/demo wrapper's width
-while working on a responsive component in Storybook. Each button is an `InputButtonCore`
+while working on a responsive component in Storybook. Each button is an `InputButton`
 (`variant="tertiary"`, icon-only), giving it the library's standard button focus ring and hover
 state for free instead of a raw `<button>`.
 
@@ -55,7 +55,7 @@ actually imported somewhere, since Nuxt only bundles a component's SFC styles wh
 
 - Component is auto-imported in Nuxt — no import needed.
 - No accessible-name prop is needed on the buttons — each one's `button-text` ("Mobile", "Tablet",
-  etc.) is rendered screen-reader-only by `InputButtonCore`'s icon-only handling, and the selected
+  etc.) is rendered screen-reader-only by `InputButton`'s icon-only handling, and the selected
   button is marked via `aria-pressed="true"` rather than a private CSS-only "current" class.
 - See `CONSUMER-STYLING.md` in the component's own folder for the full `--canvas-switcher-*` token
-  API. Button-level tokens (surface/hover/focus) belong to `InputButtonCore`, not this component.
+  API. Button-level tokens (surface/hover/focus) belong to `InputButton`, not this component.

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

@@ -4,6 +4,8 @@ Live camera QR code scanner. Streams the device camera, detects QR codes in real
 
 **File**: `app/components/02.molecules/qr-code/CaptureQrCode.vue`
 
+> **Changed 2026-09-28:** root class `.capture-qr-stream` → `.capture-qr-code`; `.camera-stopped`, `.camera-error`, `.scanned-results` → `.capture-qr-code-stopped`, `-error`, `-results`. Copy is now props, the error block is `role="alert"` with an `#error` slot, and the reset button is `InputButton`.
+
 ## Prerequisites
 
 The `nuxt-qrcode` Nuxt module must be registered in the consuming app's `nuxt.config.ts`:
@@ -21,16 +23,24 @@ Camera access requires a secure context (HTTPS or localhost) and the user granti
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
+| `camera-stopped-label` | `string` | `"Camera stopped"` | Message while the camera is stopped (tab hidden, route leave) |
+| `reset-camera-label` | `string` | `"Reset camera"` | Reset button text in the error state |
 | `style-class-passthrough` | `string \| string[]` | `[]` | Extra classes on the root element |
 
+## Slots
+
+| Slot | Scope | Description |
+|------|-------|-------------|
+| `#error` | `{ error, message, reset }` | Replaces the default error content (message + reset button). `error` is the `Error.name` (e.g. `NotAllowedError`), so you can show your own translated copy per case; call `reset()` to retry. |
+
 ## CSS classes
 
 | Class | Where | Description |
 |-------|-------|-------------|
-| `.capture-qr-stream` | root | always present |
-| `.camera-stopped` | inner | shown when camera is off but no error |
-| `.camera-error` | inner | shown when an error has occurred |
-| `.scanned-results` | inner | shown when at least one code has been decoded |
+| `.capture-qr-code` | root | always present |
+| `.capture-qr-code-stopped` | inner | shown when camera is off but no error |
+| `.capture-qr-code-error` | inner | shown when an error has occurred |
+| `.capture-qr-code-results` | inner | polite live region, always rendered; its `<ul>` appears once a code is decoded |
 
 ## Behaviour
 
@@ -38,9 +48,9 @@ Camera access requires a secure context (HTTPS or localhost) and the user granti
 - When the page becomes hidden (tab switch, minimize), the camera stops and media streams are released
 - On route leave (`onBeforeRouteLeave`), the camera stops and streams are released
 - On `<KeepAlive>` deactivate/activate, camera is stopped/restarted accordingly
-- If the user denies camera permission or another error occurs, the `.camera-error` state is shown with the error message and a **Reset camera** button
+- If the user denies camera permission or another error occurs, the `.capture-qr-code-error` state is shown with the error message and a **Reset camera** button
 - Detected QR codes replace the previous results — each scan is a fresh result set
-- Results are displayed as a `<ul>` inside `.scanned-results`
+- Results are displayed as a `<ul>` inside `.capture-qr-code-results`
 
 ## Usage
 
@@ -61,18 +71,18 @@ With styling:
 The root element is a square (`aspect-ratio: 1 / 1`) by default. Override in a consuming page or component:
 
 ```css
-.my-scanner.capture-qr-stream {
+.my-scanner.capture-qr-code {
   aspect-ratio: auto;
   max-width: 40rem;
 }
 
-.my-scanner .camera-error {
+.my-scanner .capture-qr-code-error {
   padding: 1.6rem;
   border-radius: 0.8rem;
   background-color: var(--theme-surface-error);
 }
 
-.my-scanner .scanned-results {
+.my-scanner .capture-qr-code-results {
   margin-block-start: 1.6rem;
   font-size: 1.4rem;
 }

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

@@ -14,7 +14,7 @@ dynamic slots keyed by `carouselDataIds`. It supports swipe, arrow-key, marker-c
 prev/next-button navigation, and four `buttonLayout` variants for positioning the prev/next
 buttons relative to the marker controls.
 
-Has live production usage on instepreflexology — check before making a breaking change to its
+Has live production usage in a consumer app — check before making a breaking change to its
 default rendered output.
 
 ## Props
@@ -125,8 +125,8 @@ See [CONSUMER-STYLING.md](../../app/components/03.organisms/image-galleries/caro
   properties that were never declared anywhere, with no fallback. Per CSS spec this makes the
   whole declaration invalid at computed-value time, so the item edge-preview offset and the
   width caps were silently never applying in production. Now declared as real public tokens with
-  real defaults (`80rem`/`80rem`/`4rem`) — this is a visible change to the live carousel on
-  instepreflexology, done deliberately after confirming with the maintainer.
+  real defaults (`80rem`/`80rem`/`4rem`) — this is a visible change to the live carousel in
+  a consumer app, done deliberately after confirming with the maintainer.
 - Removed dead commented-out code in `itemWidthOffsetStr`'s computed (an unreachable
   `if (props.allowCarouselOverflow)` branch, entirely commented out, that duplicated the live
   branch's logic).

package/.claude/skills/components/container-glow.md

@@ -93,8 +93,8 @@ apply instantly instead of fading).
 - 2026-09-20 migration: renamed from `ContainerGlowCore` to `ContainerGlow` — the `Core` suffix in
   this library denotes a primitive with a non-Core wrapper built on top of it (`InputTextCore` →
   `InputTextWithLabel`, `AlertMaskCore` → `AlertMaskedContent`), and this component has no such
-  sibling. Checked all consumer repos first; found one real usage in the defunct
-  `nuxt-extend-nuxt-forms` demo app, left as a follow-up for that repo rather than edited here.
+  sibling. Checked all consumer repos first; found one real usage in a defunct
+  demo app, left as a follow-up for that repo rather than edited here.
 - Moved from `app/components/container-glow/` (unplaced) into
   `01.atoms/animations/container-glow/`.
 - The `Config` type was previously an inline, non-exported interface with **all fields required**,

package/.claude/skills/components/content-docs.md

@@ -123,9 +123,9 @@ Building this component's forced-open/forced-closed cycling surfaced a real bug
 
 ## Icons
 
-`DocsNavItem.icon` is optional (any icon name resolvable by `<Icon>`, e.g. Lucide set: `"lucide:rocket"`). Items without an icon still align correctly with icon-bearing items — the link is `display: grid` with a fixed-width icon column (`--docs-nav-link-icon-size`), not `flex`, so an absent icon doesn't collapse the label leftward.
+`DocsNavItem.icon` is optional (any icon name resolvable by `<Icon>`, e.g. Lucide set: `"lucide:rocket"`). Items without an icon still align correctly with icon-bearing items — the link is `display: grid` with a fixed-width icon column (`--content-docs-link-icon-size`), not `flex`, so an absent icon doesn't collapse the label leftward.
 
-To move the icon to the end of the link instead of the start, set `--docs-nav-link-icon-order` (or `--docs-page-nav-link-icon-order`) to `rtl` (default `ltr`). This uses a `direction` flip to mirror which physical side the fixed-width column renders on, rather than swapping `grid-column` values directly — swapping columns would put the label into the icon-sized track and squeeze it. The icon and label content reset `direction: ltr` internally so text/glyphs don't visually mirror.
+To move the icon to the end of the link instead of the start, set `--content-docs-nav-link-icon-order` (or `--content-docs-page-nav-link-icon-order`) to `rtl` (default `ltr`). This uses a `direction` flip to mirror which physical side the fixed-width column renders on, rather than swapping `grid-column` values directly — swapping columns would put the label into the icon-sized track and squeeze it. The icon and label content reset `direction: ltr` internally so text/glyphs don't visually mirror.
 
 ---
 
@@ -137,7 +137,7 @@ All `--content-docs-*` tokens can be overridden at global, page, or instance sco
 - `-font-size`, `-font-weight`, `-color`, `-bg`, `-margin`, `-padding-block`, `-padding-inline`
 
 **Panel tokens** (shared: `--content-docs-panel-*`, per-side: `--content-docs-{nav,page-nav}-panel-bg`):
-- `-bg` (default: `light-dark(var(--slate-00), var(--slate-10))`, the project's standard card-surface token), `-padding-block`, `-padding-inline`, `-border-radius`
+- `-bg` (default: `var(--page-bg)`), `-padding-block`, `-padding-inline`, `-border-radius`
 
 **Link tokens** (shared: `--content-docs-link-*`, per-side: `--content-docs-{nav,page-nav}-link-*`):
 - `-font-size`, `-padding-block`, `-padding-inline`, `-margin-block`, `-border-radius`, `-color`, `-bg`, `-hover-bg`, `-hover-color`, `-active-bg`, `-active-color`
@@ -147,8 +147,12 @@ All `--content-docs-*` tokens can be overridden at global, page, or instance sco
 - `--content-docs-page-nav-column-width` (default `22rem`, desktop `docsPageNav` track)
 - `--content-docs-page-nav-column-width-tablet` (default `20rem`, tablet's single fixed track — `docsNav` is full-width at tablet)
 
-**Icon tokens** (not `content-docs-` prefixed — shared with the link, not per-side by default):
-- `--docs-nav-link-icon-gap`, `--docs-nav-link-icon-size`, `--docs-nav-link-icon-order` (`ltr`/`rtl`), `--docs-page-nav-link-icon-order`
+**Icon tokens** (shared by both link lists; renamed from `--docs-*` to `--content-docs-*` 2026-09-27, no consumer used the old names):
+- `--content-docs-link-icon-gap`, `--content-docs-link-icon-size` (applied as `font-size` on the icon, pitfall #24), `--content-docs-nav-link-icon-order` (`ltr`/`rtl`), `--content-docs-page-nav-link-icon-order`
+
+---
+
+Full token reference with defaults: `app/components/01.atoms/content-wrappers/docs-pages/CONSUMER-STYLING.md`.
 
 ---
 

package/.claude/skills/components/cookie-consent-banner.md

@@ -2,9 +2,9 @@
 
 ## Overview
 
-Fixed, non-modal banner shown while cookie consent is undecided (`useCookieConsent().status === 'unset'`). Accept/Reject buttons call `acceptAll()`/`rejectAll()` on [[composable-cookie-consent]] directly — no `v-model`, no emits to wire up. Pair with [[composable-analytics]] (or any other consent-gated script) which reads the same consent state.
+Fixed, non-modal banner built on `AlertContent` (see `alert-content.md`), shown while cookie consent is undecided (`useCookieConsent().status === 'unset'`). Accept/Reject buttons call `acceptAll()`/`rejectAll()` on [[composable-cookie-consent]] directly — no `v-model`, no emits to wire up. Pair with [[composable-analytics]] (or any other consent-gated script) which reads the same consent state.
 
-**Location**: `app/components/01.atoms/cookie-consent-banner/CookieConsentBanner.vue`
+**Location**: `app/components/02.molecules/cookie-consent-banner/CookieConsentBanner.vue`
 
 **Types**: `~/types/components` — `CookieConsentBannerProps`, `CookieConsentStatus`
 
@@ -14,7 +14,10 @@ Fixed, non-modal banner shown while cookie consent is undecided (`useCookieConse
 
 | Prop | Type | Default | Notes |
 |---|---|---|---|
-| `theme` | `SemanticTheme` | `"info"` | Colours the banner's accent border and accept button via `--theme-accent`. |
+| `theme` | `SemanticTheme` | `"info"` | Passed to `AlertContent`: panel colours, accent stripe and the accept button, via `--theme-*`. |
+| `ariaLabel` | `string` | `"Cookie consent"` | Accessible name for the banner's `role="region"`. Pass translated copy in non-English apps. |
+| `icon` | `string` | `"material-symbols:cookie-outline"` | Iconify name for the alert icon (`AlertContent`'s `customIcon`). |
+| `showIcon` | `boolean` | `true` | Render the icon column. |
 | `styleClassPassthrough` | `string \| string[]` | `[]` | Extra classes on the root element. |
 
 ### app.config defaults
@@ -36,6 +39,7 @@ Resolution chain: **prop → app.config → hardcoded fallback**.
 
 | Slot | Purpose | Default |
 |---|---|---|
+| `title` | Title line above the message | "Cookies" |
 | `message` | The consent message body | "This site uses cookies to understand how it's used. You can accept or reject them." |
 | `acceptLabel` | Accept button text | "Accept" |
 | `rejectLabel` | Reject button text | "Reject" |
@@ -57,7 +61,8 @@ useAnalytics();
   <div class="page-layout">
     <slot />
     <DisplayToastProvider position="top" alignment="right" :max-visible="3" />
-    <CookieConsentBanner>
+    <CookieConsentBanner :aria-label="t('global.cookieConsent.ariaLabel')">
+      <template #title>{{ t("global.cookieConsent.title") }}</template>
       <template #message>{{ t("global.cookieConsent.message") }}</template>
       <template #acceptLabel>{{ t("global.cookieConsent.accept") }}</template>
       <template #rejectLabel>{{ t("global.cookieConsent.reject") }}</template>
@@ -68,21 +73,15 @@ useAnalytics();
 
 ## CSS / styling
 
-Public tokens (all on `.privacy-notice-banner`, `var(--privacy-notice-banner-*, fallback)` pattern):
+Panel styling is `AlertContent`'s `--alert-content-*` tokens; the banner adds position/motion and button tokens (`--cookie-consent-banner-*`). Full detail, and a "neutral panel" recipe for the old white look, in `CONSUMER-STYLING.md` next to the component.
 
-| Token | Default |
-|---|---|
-| `--privacy-notice-banner-z-index` | `999999` |
-| `--privacy-notice-banner-gutter` | `1.6rem` |
-| `--privacy-notice-banner-max-width` | `64rem` |
-| `--privacy-notice-banner-border-radius` | `0.8rem` |
-| `--privacy-notice-banner-border` | `0.1rem solid light-dark(var(--slate-10), var(--slate-02))` |
-| `--privacy-notice-banner-background` | `light-dark(var(--slate-00), var(--slate-10))` |
-| `--privacy-notice-banner-transition-duration` | `200ms` |
+The banner is **teleported to `<body>`**, so set tokens on `:root`/`html`/`body` or through `style-class-passthrough`, not on a page wrapper.
 
 ## Notes
 
-- **Teleported to `<body>`** — like `DisplayToastProvider`, query it in tests via `document.querySelector(".privacy-notice-banner")`, not `wrapper.find(...)`.
-- **No focus trap / backdrop** — this is a dismiss-by-decision banner, not a modal. It collapses via a `grid-template-rows` transition (same mechanic as `DisplayPrompt`) once `status` leaves `"unset"`, rather than unmounting.
+- **Teleported to `<body>`** — like `DisplayToastProvider`, query it in tests via `document.querySelector(".cookie-consent-banner")`, not `wrapper.find(...)`.
+- **No focus trap / backdrop** — this is a dismiss-by-decision banner, not a modal. It collapses via a `grid-template-rows` transition (same mechanic as `DisplayPrompt`) once `status` leaves `"unset"`, rather than unmounting. When closed it is `visibility: hidden`, so its buttons leave the tab order and accessibility tree (before 2026-09-27 they stayed focusable while invisible).
 - **Only ever one instance** — `useCookieConsent()`'s underlying state is a module-scope singleton, so mounting the banner twice in one app just duplicates the UI, it doesn't create separate consent state.
-- To let a visitor change their mind later (e.g. from a cookie-policy page), call `useCookieConsent().rejectAll()` or clear the `cookie-consent` cookie — the banner reappears since `status` returns to `"unset"` only once the cookie is gone; `rejectAll()` itself sets it to `"denied"`, which keeps the banner hidden but stops GA. Expose a dedicated "reset my choice" affordance if you want the banner itself to resurface.
+- To let a visitor change their mind later (e.g. from a cookie-policy page), call `useCookieConsent().rejectAll()` or clear the `privacy-notice-consent` cookie — the banner reappears since `status` returns to `"unset"` only once the cookie is gone; `rejectAll()` itself sets it to `"denied"`, which keeps the banner hidden but stops GA. Expose a dedicated "reset my choice" affordance if you want the banner itself to resurface.
+- 2026-09-27 migration: classes/tokens/test ids renamed `privacy-notice-banner` → `cookie-consent-banner`; `light-dark()` defaults replaced with light values plus an explicit text colour; single-use private pass-throughs inlined and the hardcoded spacing, button and colour values promoted to public tokens; `ariaLabel` prop (was a hardcoded "Cookie consent"); closed banner hidden from keyboard and screen readers; visible `:focus-visible` outline on the buttons; reduced-motion support; `styleClassPassthrough` now reactive. Added CONSUMER-STYLING.md and a snippet.
+- 2026-09-27 (later the same day): rebuilt on `AlertContent` (`:custom-icon`, `:show-icon`, title/message/actions slots). New `title` slot (default "Cookies") and `icon`/`showIcon` props. The panel now follows the semantic theme in light and dark mode instead of a fixed white panel, with a left accent stripe instead of a top border and right-aligned buttons. The banner's own panel tokens were removed in favour of `--alert-content-*`.

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

@@ -2,8 +2,8 @@
 
 ## Overview
 
-`DashboardQuadGrid` (renamed from `LayoutGridA`) is a fixed 4-panel dashboard layout. Unlike
-`LayoutGridByCols`/`LayoutGridByWidth`, it does not take a column-count prop — it has four
+`DashboardQuadGrid` (renamed from `LayoutGridA`) is a fixed 4-panel dashboard layout. Unlike the generic
+grids (`LayoutGridByCols`, `AutoGrid`), its column arrangement isn't configurable — it has four
 **named** slots (`slot1`–`slot4`) with a fixed responsive arrangement that changes shape (not
 just column count) across breakpoints, designed for dashboard-style layouts (one primary panel
 plus three supporting panels).
@@ -46,7 +46,7 @@ own container width, not the viewport.
   horizontally across the top-right; `slot3`/`slot4` sit in the bottom-right.
 
 This shape is structural — there is no prop to reconfigure it. If you need an arbitrary
-column count instead, use `LayoutGridByCols`/`LayoutGridByWidth`.
+column count instead, use `LayoutGridByCols` (fixed count) or `AutoGrid` (auto-fit by minimum width).
 
 ---
 
@@ -94,5 +94,5 @@ See [CONSUMER-STYLING.md](../../app/components/01.atoms/content-wrappers/layout-
 - Renamed from `LayoutGridA` during the 2026-09-21 compliance migration; previously lived
   unplaced at `app/components/layout-grids/LayoutGridA.vue` with options-style props and no
   public CSS tokens (its geometry values were hardcoded px literals).
-- For a generic, arbitrary-column-count grid, use `LayoutGridByCols`/`LayoutGridByWidth` instead
+- For a generic, arbitrary-column-count grid, use `LayoutGridByCols` or `AutoGrid` instead
   — this component's 4-slot shape is fixed and specifically dashboard-oriented.