srcdev-nuxt-components 9.6.0 → 9.6.2

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

@@ -1,5 +1,7 @@
 # DisplayPrompt
 
+> **Changed 2026-10-08:** the root's `.closed` class is now `data-state="open" | "closed"`, so a consumer's own `.closed` class can't collide with it.
+
 > **Changed 2026-09-28:** root class `.display-prompt-core` → `.display-prompt` (and `data-test-id` `display-prompt-core-{theme}` → `display-prompt-{theme}`). The documented `outlined` passthrough modifier never had any CSS behind it and was removed from this doc.
 
 ## Overview
@@ -27,7 +29,7 @@ the DOM. Dismiss can be controlled locally (closes itself) or by a parent via `v
 
 | Slot | Description |
 |---|---|
-| `#title` | **Required in practice.** Bold heading text. Always rendered (even when empty). |
+| `#title` | Bold heading text. The title `<p>` is omitted when this slot isn't provided. |
 | `#content` | Body text below the title. The `<p>` element is omitted when this slot is empty. |
 | `#customDecoratorIcon` | Replaces the default theme icon. |
 | `#customCloseIcon` | Replaces the default × close icon inside the dismiss button. |
@@ -52,10 +54,10 @@ Two modes depending on whether `v-model` is bound:
 
 | Scenario | What happens on close |
 |---|---|
-| No `v-model` (or `v-model="false"`) | Sets internal `componentOpen = false` → `.closed` class → collapses via CSS |
+| No `v-model` (or `v-model="false"`) | Sets internal `componentOpen = false` → `data-state="closed"` on the root → collapses via CSS |
 | `v-model="true"` | Emits `update:modelValue = false`; internal state unchanged — parent controls visibility |
 
-The `.closed` class triggers a CSS grid row animation (`grid-template-rows: 1fr → 0fr`) with
+`data-state="closed"` triggers a CSS grid row animation (`grid-template-rows: 1fr → 0fr`) with
 `opacity: 0` and `pointer-events: none`, and the root becomes `inert` so the dismiss button leaves the
 tab order and the accessibility tree. The transition is off under `prefers-reduced-motion: reduce`;
 its duration is `--display-prompt-transition-duration` (`200ms`).
@@ -151,5 +153,6 @@ glass effect to be visible.
 - The root gets `tabindex="-1"` only when `useAutoFocus` is on, so it can take programmatic focus without joining the tab order (it used to be `tabindex="0"` always).
 - `useAutoFocus` focuses the root element on mount (useful when injecting a prompt in response to a
   user action that has already moved focus elsewhere).
-- The `#title` slot renders unconditionally — an empty title `<p>` will still appear. Always
-  provide meaningful content in `#title`.
+- Long titles/messages wrap (unbroken strings included). To cap them, set AlertContent's
+  `--alert-content-title-line-clamp` / `--alert-content-text-line-clamp` on an ancestor. The
+  `StressTest` story shows the worst-case content.

package/.claude/skills/components/display-toast.md

@@ -53,6 +53,7 @@ interface DisplayToastConfig {
     title?: string               // bold title line
     description?: string         // smaller description line
     customIcon?: string          // icon name override (e.g. "akar-icons:check-box")
+    dismissLabel?: string        // screen-reader text for the close button — default: "Close"
   }
 }
 ```
@@ -111,6 +112,17 @@ const toastVisible = ref(false)
 - `onBeforeRouteLeave` dismisses the toast on navigation. This emits a Vue Router warning in Vitest (no active route record) — harmless.
 - `returnFocusTo` accepts an `HTMLElement` or a component instance with `$el`.
 - The toast uses `<Teleport to="body">`. In tests, query `document.querySelector(".display-toast")` not `wrapper.find()`.
+- Position, alignment and state are `data-position`, `data-alignment` (`full-width` when `fullWidth`) and `data-state="show|hide"`, not classes (changed 2026-10-08: the old bare `.top`/`.hide`/... classes could collide with a consumer's utility classes, since the toast is teleported into `<body>`).
+- In tests, unmount every toast in `afterEach` before clearing `document.body`: a leftover instance's pending dismiss timer otherwise re-renders into the removed container (`insertBefore` of null) during a later test's timer advance.
+
+### Auto-dismiss pause
+
+Auto-dismiss pauses while hovered, or while keyboard focus is on or inside the toast, and resumes with
+the remaining time (`createPausableTimeout` in `app/utils/pausableTimeout.ts`, plus
+`focusPausesAutoDismiss`). The toast's own programmatic focus only pauses it when the root matches
+`:focus-visible` (keyboard modality), so mouse users still get auto-dismiss. `data-paused` freezes the
+progress bar via `animation-play-state`. In jsdom `:focus-visible` matches any focus, so tests that
+depend on modality spy on `Element.prototype.matches` (see `DisplayToast.spec.ts`).
 
 ---
 
@@ -208,12 +220,15 @@ Stacked dismissals use a FLIP animation — remaining toasts slide smoothly to f
 
 ### CSS / styling
 
-Override tokens via an unscoped style block scoped to a page or layout class:
+Both components teleport to `<body>`, so tokens set on a page or layout class don't reach them: set
+them globally. Own tokens: `--display-toast(-provider)-max-width` (default `min(48rem, 100% - 2 * gutter)`),
+`-progress-colour`, `-focus-ring-colour`, `-z-index`. Card styling comes from `--alert-content-*`.
+Full list in `CONSUMER-STYLING.md`.
 
 ```css
-.my-page .display-toast-provider-item {
-  --theme-surface: oklch(15% 0 0);
-  --theme-text: oklch(95% 0 0);
+:where(html) {
+  --display-toast-provider-max-width: min(36rem, 100% - 48px);
+  --display-toast-provider-progress-colour: var(--brand-accent);
 }
 ```
 
@@ -234,5 +249,7 @@ The inner content layout is handled by the shared `AlertContentInner` molecule
 - `useToastQueue` state persists across route changes — no `onBeforeRouteLeave` cleanup needed.
 - `crypto.randomUUID()` generates toast IDs (`toast-<uuid>`). IDs are returned by `show()` for targeted `dismiss(id)` calls.
 - In tests, query via `document.querySelector(".display-toast-provider-item")` — the Teleport renders outside the component wrapper.
+- Every mounted provider reacts to the shared `useToastQueue` state, so tests must unmount providers in `afterEach`; otherwise an earlier test's provider runs its own timer for a new toast and dismisses it.
+- Each item pauses independently (hover / keyboard focus, same rule as the standalone toast), tracked per toast id.
 - The progress bar (`.display-toast-provider-progress`) is only rendered when `autoDismiss: true`.
 - Dismissal can be triggered by: close button click, Escape key (when the toast item has focus), `dismiss(id)`, auto-dismiss timer, or `clear()`.

package/.claude/skills/components/glowing-border.md

@@ -17,7 +17,7 @@ a configurable root element via the `tag` prop.
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `tag` | `"div" \| "p" \| "span" \| "section" \| "article" \| "aside" \| "header" \| "footer" \| "main" \| "nav" \| "ul" \| "ol"` | `"div"` | Root element tag. |
-| `variant` | `"subtle" \| "vivid" \| "silver" \| "steel" \| "green"` | `"subtle"` | Glow colour variant. |
+| `variant` | `"subtle" \| "vivid" \| "silver" \| "steel" \| "green"` | `"subtle"` | Glow colour variant, rendered as `data-variant` on the root (not a class). |
 | `styleClassPassthrough` | `string \| string[]` | `[]` | Extra classes applied to the root element. |
 
 ## Slots
@@ -36,7 +36,7 @@ a configurable root element via the `tag` prop.
 
 ## Styling
 
-Border width, radius, surface colour, animation duration, and every variant's 5 gradient colour
+Border width, radius, surface colour (defaults to `--theme-surface-subtle`), text colour (`--theme-text`), animation duration, and every variant's 5 gradient colour
 stops are public CSS custom properties — see `CONSUMER-STYLING.md` for the full token table.
 
 ```vue
@@ -48,6 +48,14 @@ stops are public CSS custom properties — see `CONSUMER-STYLING.md` for the ful
 </GlowingBorder>
 ```
 
+## Highlighting a single control
+
+Wrap just an `InputButton` or `InputTextCore` so the glow becomes the control's border (a design
+call-out for something "special"). Set `--glowing-border-radius` to the control's radius plus the
+glow width, `--glowing-border-surface: transparent`, `--glowing-border-overflow: visible` (or the
+control's focus ring is clipped), shrink-to-fit display, and `--input-text-border: transparent` for
+the input. Full recipe in `CONSUMER-STYLING.md`; `HighlightedControls` story.
+
 ## Motion
 
 The glow animation stops automatically under `prefers-reduced-motion: reduce`.
@@ -64,3 +72,13 @@ The glow animation stops automatically under `prefers-reduced-motion: reduce`.
   override surface.
 - 2026-09-20: added `green` variant (vibrant, saturated greens: `#00ff87`, `#39ff14`, `#00c853`,
   `#64dd17`, `#00e676`), each stop overridable via `--glowing-border-green-color-{1-5}`.
+- 2026-10-08 stress-test pass (`StressTest` story): the variant moved from a bare root class
+  (`.vivid`, `.green`...) to `data-variant`, since those names collide with common consumer
+  classes; `@keyframes glow` renamed to `glowing-border-rotate` for the same reason. Added
+  `overflow-wrap: anywhere` so long unbroken text wraps rather than being clipped by
+  `overflow: hidden`. `--glowing-border-surface` default moved from `canvas` to
+  `--theme-surface-subtle`, and a new `--glowing-border-text-colour` token defaults to
+  `--theme-text`. Stories gained story-only canvas and surface background controls with dark
+  values; the hardcoded dark stage was removed.
+- 2026-10-08: added `--glowing-border-overflow` (default `hidden`) so a wrapped control's hover/focus
+  outlines can show, plus the `HighlightedControls` story and recipe.

package/.claude/skills/components/google-reviews.md

@@ -132,8 +132,8 @@ replaced.
 - Survives hostile data (see the `StressTest` story): long and unbroken text wraps inside its card,
   reviewer names are cut to 2 lines (`--google-reviews-author-line-clamp`),
   initials take whole characters (emoji-safe), star fill is clamped to 0–5, review text renders as
-  plain text. A broken photo URL still shows the browser's broken-image icon, since
-  `DisplayAvatar` has no image-error fallback.
+  plain text. A broken photo URL falls back to the reviewer's initials (`DisplayAvatar`'s image-error
+  fallback).
 
 ## Variants
 

package/.claude/skills/components/profile-section.md

@@ -1,24 +1,26 @@
 ---
 name: ProfileSection
-description: ProfileSection molecule — props, dynamic profile-info slots, eyebrowText/heroText/profileLinks slots, layout, accessibility
+description: ProfileSection molecule — props, dynamic profile-info slots, eyebrowText/heroText/profileLinks slots, container-query layout, accessibility
 type: reference
 ---
 
 # ProfileSection
 
+> **Changed 2026-10-14 (breaking):** New `headerPlacement` prop (`above`, `picture-bottom`, `picture-top`) can put the header over the bottom or top of the picture. `profileInfoCount` removed — only the `profile-info-N` slots you give are rendered (it used to pad with empty blocks when none were given). The two-column switch is a container query on the component's own width, not a viewport `@media` query, and both columns are `minmax(0, …)`. The `<header>` is only rendered when a header slot is given. Highlight colours go through new `--profile-section-*` tokens. An invalid `profilePicture.width`/`height` (0, negative, `NaN`) falls back to 828×1104.
+>
 > **Classes renamed 2026-09-27:** `.picture` → `.profile-section-picture`, `.profile-picture` → `.profile-section-image`, `.profile-info` → `.profile-section-info`, `.profile-info-content` → `.profile-section-info-content`, `.profile-info-block` → `.profile-section-info-block`, `.profile-links` → `.profile-section-links`.
 
 ## Overview
 
-`ProfileSection` is a molecule that renders a practitioner/author profile: a header area (eyebrow + heading), a profile picture, and a flexible set of bio/info blocks alongside optional profile links. It is landmark-aware — when `tag` is `section`, `article`, or `aside`, the root element automatically gets `aria-labelledby` wired to the heading inside the `#heroText` slot (**you must bind `headingId` yourself, and a console warning fires if you forget** — see [component-aria-landmark.md](../component-aria-landmark.md)). `tag="main"` is never auto-labelled.
+`ProfileSection` is a molecule that renders a practitioner/author profile: a header area (eyebrow + heading), a profile picture, and a flexible set of bio/info blocks alongside optional profile links. It is landmark-aware — when `tag` is `section` or `article`, the root element automatically gets `aria-labelledby` wired to the heading inside the `#heroText` slot (**you must bind `headingId` yourself, and a console warning fires if you forget** — see [component-aria-landmark.md](../component-aria-landmark.md)). `tag="main"` is never auto-labelled.
 
 ## Props
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `profilePicture` | `ProfilePicture` (`{ src; alt; width?; height? }`, exported from the layer types) | — | **Required.** Rendered via `NuxtImg` with `width`/`height` defaulting to `828`/`1104` (3:4, a Vercel-allowed width). |
+| `profilePicture` | `ProfilePicture` (`{ src; alt; width?; height? }`, exported from the layer types) | — | **Required.** Rendered via `NuxtImg`. `width`/`height` default to `828`/`1104` (3:4, a Vercel-allowed width), and a missing or invalid value (0, negative, `NaN`, `Infinity`) uses the default. |
 | `tag` | `"div" \| "section" \| "article" \| "main"` | `"div"` | HTML element rendered as the root. |
-| `profileInfoCount` | `number` | `3` | Number of `profile-info-N` slots to generate when none are explicitly provided. |
+| `headerPlacement` | `"above" \| "picture-bottom" \| "picture-top"` | `"above"` | Where the `#eyebrowText`/`#heroText` header goes: above the grid, or over the bottom or top of the picture on a scrim. Template form: `header-placement`. |
 | `styleClassPassthrough` | `string \| string[]` | `[]` | Extra classes applied to the root element. |
 
 ## Slots
@@ -28,17 +30,19 @@ type: reference
 | `#eyebrowText` | Optional eyebrow label above the heading. Use `EyebrowText`. |
 | `#heroText` | Heading slot. Receives `headingId` as a slot prop — bind it to the heading's `id` for accessible `aria-labelledby`. |
 | `#profile-info-1` … `#profile-info-N` | Bio / info blocks. Provide as many numbered slots as needed. They are rendered in ascending numeric order. |
-| `#profileLinks` | Links / actions shown at the bottom-right of the info column (e.g. social icons, booking CTA). |
+| `#profileLinks` | Links / actions shown at the bottom-right of the info column (e.g. social icons, booking CTA). Wraps onto more lines when there are many. |
+
+The `<header class="profile-section-header">` is only rendered when `#eyebrowText` or `#heroText` is given. It renders above the grid, or inside the picture when `header-placement` is `picture-bottom` or `picture-top`.
 
 ## Basic usage
 
 ```vue
 <ProfileSection
   tag="section"
-  :profile-picture="{ src: '/images/profile/mel.jpg', alt: 'Mel Stafford, reflexologist' }"
+  :profile-picture="{ src: '/images/profile/alex.jpg', alt: 'Alex Morgan, hair stylist' }"
 >
   <template #eyebrowText>
-    <EyebrowText font-size="large" text="About Mel" />
+    <EyebrowText font-size="large" text-content="About Alex" />
   </template>
 
   <template #heroText="{ headingId }">
@@ -47,8 +51,8 @@ type: reference
       :id="headingId"
       font-size="title"
       :text-content="[
-        { text: 'Mel Stafford', styleClass: 'normal' },
-        { text: 'Reflexologist', styleClass: 'accent' },
+        { text: 'Alex Morgan', styleClass: 'normal' },
+        { text: 'Hair stylist', styleClass: 'accent' },
       ]"
     />
   </template>
@@ -58,7 +62,7 @@ type: reference
   </template>
 
   <template #profile-info-2>
-    <p>Mel is based in Lichfield…</p>
+    <p class="location">Based in <span class="highlight">Northtown</span>…</p>
   </template>
 
   <template #profileLinks>
@@ -69,11 +73,12 @@ type: reference
 
 ## Dynamic profile-info slots
 
-The `profile-info-N` slots are discovered at runtime by filtering `useSlots()` for keys matching `/^profile-info-\d+$/`. The slots are rendered in ascending numeric order.
+The `profile-info-N` slots are discovered at runtime by filtering `useSlots()` for keys matching `/^profile-info-\d+$/`, and rendered in ascending numeric order.
 
 - If you provide `#profile-info-1`, `#profile-info-2`, `#profile-info-3` — all three render in order.
-- If you provide no `profile-info-*` slots, the component renders `profileInfoCount` empty blocks (they used to contain visible placeholder text, removed 2026-09-27). Slot discovery runs every render, so slots added after mount appear.
-- Gaps are supported — you can provide `#profile-info-1` and `#profile-info-3` without `#profile-info-2`; they sort correctly.
+- If you provide none, no info blocks render.
+- Gaps are supported — you can provide `#profile-info-1` and `#profile-info-3` without `#profile-info-2`; `#profile-info-12` sorts after `#profile-info-2`.
+- Discovery runs every render, so slots added or removed after mount (a `v-if` on the slot template) appear and disappear.
 
 ## heroText slot prop
 
@@ -89,10 +94,41 @@ If you use a different heading component, bind `headingId` to whatever prop rend
 
 ## Layout
 
-- **Mobile**: single column — picture stacked above info.
-- **768px+**: two columns — `--profile-section-picture-width` (`384px`) picture column, `1fr` info column, `--profile-section-gap-wide` (`4rem`) gap (`--profile-section-gap`, `2rem`, below 768px).
-- Picture frame (`.profile-section-picture`): `--profile-section-picture-aspect-ratio` (`3 / 4`), `--profile-section-picture-border-radius` (`8px`), `overflow: hidden`. Full token list: `CONSUMER-STYLING.md` in the component folder. The `NuxtImg` fills the frame with `object-fit: cover`.
-- Profile links: `align-items: end; justify-content: flex-end` — right-aligned to the bottom of the info column.
+- The root is a size container named `profile-section`. Layout follows **the component's own width**, not the viewport.
+- **Under 768px wide**: single column — picture stacked above info, `--profile-section-gap` (`2rem`).
+- **768px wide or more**: two columns — `minmax(0, var(--profile-section-picture-width))` (`38.4rem`) picture column, `minmax(0, 1fr)` info column, `--profile-section-gap-wide` (`4rem`) gap.
+- Being an inline-size container, the root can't size itself from its content: give it a width in a flex row or other shrink-to-fit context.
+- The root sets `overflow-wrap: anywhere`, so unbroken text and URLs in any slot wrap rather than widening the grid.
+- Picture frame (`.profile-section-picture`): `--profile-section-picture-aspect-ratio` (`3 / 4`), `--profile-section-picture-border-radius` (`0.8rem`), `overflow: hidden`. The `NuxtImg` fills the frame with `object-fit: cover`. Full token list: `CONSUMER-STYLING.md` in the component folder.
+- Profile links: `flex-wrap: wrap; align-items: end; justify-content: flex-end` — right-aligned to the bottom of the info column.
+- To change the picture column width, set `--profile-section-picture-width`; don't override `grid-template-columns` in a viewport `@media` query, which no longer lines up with the component's own switch.
+
+## Header in picture
+
+With `header-placement="picture-bottom"` or `"picture-top"`, the `<header>` renders inside `.profile-section-picture`, before the image in the DOM (so it is read first), and sits at the bottom or top of the frame on a scrim that fades away from that edge. It follows ServicesCard's `titles-within-image-wrapper`:
+
+- Scrim and text come from `--profile-section-picture-header-*` tokens: scrim colour (`#000`) and opacity (`75%`), a solid stop (`0%`, how far the scrim stays full strength before fading) and a target colour (`transparent`, what it fades into, set it to roughly the photo's colour where the fade ends so it blends instead of leaving a grey band), text colour (`contrast-color()` of the scrim colour where supported, else `#fff`), eyebrow colour, padding (`2.4rem`), gap (`0.4rem`). Full list in `CONSUMER-STYLING.md`.
+- The frame drops `overflow: hidden` in this mode, so its aspect ratio is a minimum: a long header grows the frame rather than being clipped. The image is absolutely positioned and still fills the frame.
+- `aria-labelledby` still points at the heading.
+- Drop spacing utilities like `mb-20` from the heading in this mode; the header's padding handles spacing.
+
+```vue
+<ProfileSection tag="section" header-placement="picture-bottom" :profile-picture="picture">
+  <template #eyebrowText>
+    <EyebrowText tag="p" font-size="medium" text-content="About Alex" />
+  </template>
+  <template #heroText="{ headingId }">
+    <HeroText :id="headingId" tag="h2" font-size="heading" :text-content="[{ text: 'Alex Morgan', styleClass: 'normal' }]" />
+  </template>
+  ...
+</ProfileSection>
+```
+
+Two stories show themes built only from tokens: `Header In Picture (Dark, Bottom)`, ServicesCard-style, and `Header In Picture (Light, Top)`. A light scrim needs a dark `--profile-section-picture-header-text-colour`; `contrast-color()` picks one where supported, but set it for older browsers. `--profile-section-info-text-colour` sets the info column's text colour for a themed background.
+
+## Content hooks
+
+A `.highlight` inside an element with class `location` gets `--profile-section-highlight-colour` (default `var(--colour-text-accent)`); inside `services` it gets `--profile-section-link-colour` / `--profile-section-link-colour-hover` (defaults `var(--colour-link-default)` / `var(--colour-link-hover)`). Both use `--profile-section-highlight-font-weight` (`600`). The `location`/`services` class can sit on the `<p>` itself or a wrapper.
 
 ## CSS notes
 
@@ -106,8 +142,6 @@ If you use a different heading component, bind `headingId` to whatever prop rend
 }
 ```
 
-- Accent-coloured text within `.location` or `.services` info blocks can use the `.highlight` class for `var(--colour-text-accent)` or `var(--colour-link-default)` colouring respectively.
-
 ## Consumer styling scaffold
 
 ```vue
@@ -121,6 +155,8 @@ If you use a different heading component, bind `headingId` to whatever prop rend
 <style>
 .profile-section {
   &.my-profile {
+    --profile-section-picture-width: 32rem;
+
     .profile-section-header {
       margin-block-end: 3.2rem;
     }
@@ -131,6 +167,8 @@ If you use a different heading component, bind `headingId` to whatever prop rend
 
 ## Notes
 
-- `NuxtImg` is used for the profile picture — provide a real `src` path. A placeholder (grey box) is shown if the image 404s.
-- The component does not expose `imgWidth` / `imgHeight` props for the picture. If IPX optimisation is critical, use a fixed-dimension image and rely on the `384px` column cap as the natural size constraint.
+- `NuxtImg` is used for the profile picture — provide a real `src` path. A broken image shows its alt text inside the 3:4 frame.
+- Pass `width`/`height` in `profilePicture` when your image isn't 3:4 at 828px wide, so IPX/Vercel request the right size.
+- The `With Social Icons` story shows a `SocialIconsList` in `#profileLinks`; size it with `--social-icons-list-icon-size` and `--social-icons-list-gap` on your own wrapper.
+- The `StressTest` story covers hostile content (broken image, unbroken text, RTL, out-of-order slots, many links) at every canvas width.
 - Component is auto-imported in Nuxt — no import needed.

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

@@ -132,6 +132,9 @@ Route links and anchor links can be mixed in the same data. See the "Same-Page A
 
 ## Migrating from TabNavigation
 
+> `TabNavigation` was deprecated 2026-10-06 and **removed 2026-10-07**, along with its `NavItem` /
+> `NavItemData` types and the `useNavCollapse` composable. Type the new data as `ResponsiveHeaderProp`.
+
 `ResponsiveHeader` covers everything `TabNavigation` does, and collapses progressively (only the items
 that don't fit move into the overflow menu) instead of all-or-nothing. To switch:
 
@@ -149,8 +152,12 @@ that don't fit move into the overflow menu) instead of all-or-nothing. To switch
 | `anchor-scroll-offset` | `anchor-scroll-offset` |
 | collapse everything to a burger when items don't fit | default is per-item overflow; add `collapse-at-main-nav-intersection` for the old all-or-nothing burger |
 | `--tab-nav-link-color` | `--responsive-header-link-color` |
+| `--tab-nav-link-hover-color` / `--tab-nav-link-active-color` | `--responsive-header-link-color-hover` / `-active` (added 2026-10-07) |
+| `--tab-nav-decorator-hovered-bg` | `--responsive-nav-decorator-hovered-bg` |
 | `--tab-nav-decorator-indicator-color` | `--responsive-nav-decorator-indicator-color` |
-| `--tab-nav-*` panel and burger tokens | the overflow tokens in `CONSUMER-STYLING.md` and NavigationItems' `--overflow-nav-*` |
+| `--tab-nav-panel-link-color` / `-hover-color` / `-active-color` | `--overflow-nav-link-color` / `-color-hover` / `-color-active` |
+| `--tab-nav-panel-bg` / `--tab-nav-panel-border-color` / `--tab-nav-panel-item-border` | `--responsive-header-overflow-nav-bg` / `--responsive-header-overflow-nav-border` (full shorthand) / `--overflow-nav-link-border-color` |
+| `--tab-nav-burger-color` | `--responsive-header-overflow-btn-icon-color` |
 
 ```vue
 <!-- Before -->
@@ -203,9 +210,12 @@ All tokens are read via `var(--token, default)` — see the full list in the com
 |---|---|---|
 | `--responsive-header-link-font-size` | `inherit` | Nav-link font-size. **Set this to a fixed value** — see the measurement-pipeline note above for why leaving it `inherit` from a fluid ancestor is a footgun. |
 | `--responsive-header-link-color` | `inherit` | Link/summary text colour. |
+| `--responsive-header-link-color-hover` / `-active` | the resting colour | Per-state link colour in the top bar (added 2026-10-07). Hover falls back to the item's current state. `--overflow-nav-link-color-hover` / `-active` do the same in the overflow panel. |
 | `--responsive-header-bg` / `--responsive-header-padding-*` / `--responsive-header-border*` | transparent / `0` / `none` | Root element theming. |
 | `--responsive-header-overflow-btn-*` | various | Overflow burger button sizing/colour. |
 | `--responsive-header-sub-nav-*` / `--responsive-header-overflow-nav-*` | various | Top-bar dropdown panel and overflow-panel container theming. |
+
+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. |
 
 ---

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

@@ -21,14 +21,18 @@ open between picks.
 
 | Prop | Type | Default | Notes |
 |---|---|---|---|
-| `options` | `SelectMenuOption[]` | — | **Required.** `{ value: string \| number; label: string; icon?: string }[]`. |
+| `options` | `SelectMenuOption[]` | — | **Required.** `{ value: string \| number; label: string; icon?: string; dotColor?: string }[]`. `dotColor` (any CSS colour) colours the trigger's status dot while that option is selected (`indicator="dot"`, single-select) and shows a matching dot beside the option in the list when it has no `icon`. |
 | `label` | `string` | — | **Required.** Accessible name for the trigger + listbox (`aria-label`). Also the trigger's fallback text when nothing is selected and no `placeholder` is set — this doubles as a visible category tag, e.g. `"Choose a service"`. |
 | `placeholder` | `string` | `undefined` | Trigger text shown when nothing is selected. Falls back to `label` when omitted. |
-| `showIcon` | `boolean` | `true` | Show the selected option's icon in the trigger. |
+| `showIcon` | `boolean` | `true` | Show the leading icon in the trigger: the selected option's icon (single-select), otherwise `triggerIcon`. |
+| `triggerIcon` | `string` | `undefined` | Fixed leading icon, e.g. a filter category icon. Shown in both modes; in single-select a selected option's own icon replaces it. |
+| `indicator` | `"none" \| "count" \| "dot"` | `"none"` | Marker after the trigger text, visible only while something is selected; otherwise kept in the layout with `visibility: hidden` (`.select-menu-trigger-indicator-empty`) so the trigger width doesn't jump. `count` = badge with the number selected (for `multiple`); `dot` = status dot (for single-select filters, flags the filter as active). `aria-hidden`. |
+| `selectedCountLabel` | `string` | `"{count} selected"` | Appended to the trigger's `aria-label` while the indicator shows (`"Category, 3 selected"`). `{count}` is replaced. Override for translation. |
 | `showLabel` | `boolean` | `true` | Show the selected option's label (or placeholder/label fallback) text in the trigger. Set `false` for an icon-only compact trigger. |
 | `showChevron` | `boolean` | `true` | Show the trailing chevron in the trigger. |
-| `multiple` | `boolean` | `false` | Allow selecting more than one option. Each option gets a checkbox indicator, `v-model` becomes an array, and picking an option leaves the popover open so more can be toggled. Trigger icon is not shown when `true` (no single option to represent). |
+| `multiple` | `boolean` | `false` | Allow selecting more than one option. Each option gets a checkbox indicator, `v-model` becomes an array, and picking an option leaves the popover open so more can be toggled. No option icon in the trigger when `true` (no single option to represent); `triggerIcon` still shows. |
 | `showSelectionInTrigger` | `boolean` | `false` | Multiple mode only. When `true`, the trigger text updates to a comma-separated list of the currently checked options instead of staying fixed on `placeholder`/`label`. No effect outside `multiple`. |
+| `reserveLabelWidth` | `boolean` | `false` | Single-select only. Renders hidden copies of the placeholder and every option label in the same grid cell as the visible text, so the trigger is always as wide as the longest one and doesn't resize when the selection changes. Off by default, since sometimes a trigger that hugs its text is wanted. No effect with `multiple`. |
 | `inputVariant` | `InputUiVariant` | `"normal"` | Trigger border style, same prop as `InputSelect`: `"normal"` (bordered box) or `"underlined"` (bottom border only, square corners), added as a class on the root. `"outlined"` has no CSS, same as the `05.forms` inputs. |
 | `styleClassPassthrough` | `string \| string[]` | `[]` | Extra classes on the root `<div>`. |
 
@@ -132,6 +136,39 @@ Set `showSelectionInTrigger` to opt out of that and have the trigger update inst
 
 ---
 
+## Filter trigger: icon + count or status dot
+
+```vue
+<!-- Multi-select category filter: list icon, "Category", badge "3", chevron -->
+<SelectMenu
+  v-model="categories"
+  :options="categoryOptions"
+  label="Category"
+  multiple
+  trigger-icon="lucide:list"
+  indicator="count"
+/>
+
+<!-- Single-select status filter: dot appears once a status is picked, in that option's dotColor
+     statusOptions = [{ value: "active", label: "Active", dotColor: "var(--status-success)" }, ...] -->
+<SelectMenu
+  v-model="status"
+  :options="statusOptions"
+  label="Status"
+  trigger-icon="lucide:circle-dot"
+  indicator="dot"
+/>
+```
+
+The indicator is only visible while something is selected, so an unfiltered trigger looks plain,
+but its space is always reserved so the trigger doesn't resize as the filter is set and cleared.
+Per-option `dotColor` beats `--select-menu-trigger-dot-color`, which is the fallback (and the only
+colour in `multiple` mode).
+Badge/dot tokens (`--select-menu-trigger-count-*`, `--select-menu-trigger-dot-*`) are in
+`CONSUMER-STYLING.md`.
+
+---
+
 ## Filter bar (multiple categories)
 
 `SelectMenu` is single-select per instance — a faceted filter bar is built by placing one instance
@@ -167,6 +204,13 @@ Quick reference:
 }
 ```
 
+### Long content
+
+The root caps at its container width, so a long trigger label truncates with an ellipsis. The
+popover caps at `--select-menu-popover-max-width` (default `calc(100vw - 3.2rem)`) and option labels
+wrap; `--select-menu-item-label-line-clamp` (default `none`) caps them, `1` for single-line
+ellipsis. The `StressTest` story covers this at every canvas width.
+
 ---
 
 ## Notes
@@ -188,7 +232,8 @@ Quick reference:
     drop the whole rule.
   Confirmed broken on a Safari 16 iPad before this (trigger rendered, menu never opened).
 - **Left-aligned popover** (`left: anchor(left)`) — unlike `ActionMenu` which right-aligns. Matches
-  native `<select>` dropdown behaviour. Flips above the trigger near the bottom of the viewport.
+  native `<select>` dropdown behaviour. Flips above the trigger near the bottom of the viewport,
+  and to right-aligned when it would overflow the right edge (anchor-positioning browsers only).
 - **Keyboard navigation** follows the WAI-ARIA listbox pattern: `ArrowDown`/`ArrowUp` move between
   options (wraps around), `Home`/`End` jump to first/last, `Enter`/`Space` select the focused
   option, `Tab` closes without stealing focus back to the trigger (matches `ActionMenu`'s
@@ -209,7 +254,7 @@ Quick reference:
   weight doesn't resize the popover. Hover/focus has `-text-color-hover` and `-border-hover`, which
   fall back to the row's *current* state (selected or resting), not always to resting. There's no
   hover font-weight token on purpose: the width reserve only covers one alternate weight.
-- **Chevron rotation** keys off the trigger's `aria-expanded` (from the composable's `isOpen`), not
+- **Chevron flip** (`scaleY(-1)`, was `rotate(180deg)` until 2026-10-07) keys off the trigger's `aria-expanded` (from the composable's `isOpen`), not
   `:has(...:popover-open)`, so it also works without the Popover API (changed 2026-10-05).
 - **No native `<select>`/`appearance: base-select` involved** — this is a from-scratch popover
   listbox, not a styled native select, so it doesn't inherit `InputSelectCore`'s WebKit
@@ -217,3 +262,7 @@ Quick reference:
 - **Not a form field** — `SelectMenu` has no `fieldHasError`/`theme`/`inputVariant` props like the
   `05.forms` inputs. Use `InputSelectCore` instead for an actual form field that needs validation
   state and native `<select>` semantics.
+- **2026-10-08 stress-test pass**: root `max-inline-size: 100%` (a long trigger label overflowed
+  narrow containers instead of truncating), popover `--select-menu-popover-max-width` and
+  `flip-inline` fallbacks (a long option made the menu wider than the viewport), option labels wrap
+  with a `--select-menu-item-label-line-clamp` token instead of `nowrap`.

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

@@ -99,6 +99,6 @@ const responsiveNavLinks = {
 
 ## Migration notes
 
-- Consuming layouts previously assembling `PageRow` + `SkipLinks` + `ResponsiveHeader` (or `TabNavigation`) by hand can switch to `SiteHeader` directly; the two `styleClassPassthrough` props map 1:1 onto the two independent passthrough hooks that pattern used.
-- `TabNavigation`'s `NavItemData` shape (`{ main: [{ text, href, iconName, cssName }] }`) is **not** the same shape as `ResponsiveHeaderProp` (`{ groupKey: [{ name, path, childLinksTitle, childLinks }] }`) — migrating a `TabNavigation` consumer means reshaping the nav data, not just swapping the component. `TabNavigation`'s `navAlign` prop has no `SiteHeader` equivalent since `ResponsiveHeader`'s layout is fixed (branding column + nav column).
+- 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.
+- `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/social-icons-list.md

@@ -57,6 +57,8 @@ import type { ISocialIcon } from "srcdev-nuxt-components";
 | YouTube | `logos:youtube-icon` | `https://www.youtube.com/@` |
 | TikTok | `logos:tiktok-icon` | `https://www.tiktok.com/@` |
 
+`logos:instagram-icon`, `logos:x` and other dark brand icons vanish on a dark background, and their colours can't be changed. On a dark background use a mono icon such as `mdi:instagram` (any set that draws in `currentColor`) and colour it with `--social-icons-list-icon-colour` (default `currentColor`). Installed mono Instagram icons: `mdi:instagram`, `bi:instagram`, `lucide:instagram`, `akar-icons:instagram-fill`, `radix-icons:instagram-logo`.
+
 ---
 
 ## Usage example