srcdev-nuxt-components 9.5.7 → 9.6.1

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/input-button.md

@@ -66,6 +66,9 @@ Colour tokens are `--input-button-{variant}-{property}` with `--theme-*` fallbac
 typography are the global `--button-*` tokens. Full reference:
 `app/components/05.forms/input-button/CONSUMER-STYLING.md`.
 
+Labels stay on one line by default. Set `--input-button-text-white-space: normal` to let a long
+label wrap inside a narrow container (added 2026-10-06; `ServicesCardGrid` does this for its CTAs).
+
 ## Notes
 
 - Before 2026-09-28, `readonly` only set `pointer-events: none`, so keyboard users could still

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

@@ -112,8 +112,64 @@ buggy toggle-based version too.
 | `overflowMenuAriaLabel` | `string` | `"Overflow navigation menu"` | Forwarded to `NavigationItems`' `ariaLabel` — override for localisation. |
 | `overflowButtonLabel` | `string` | `"More navigation"` | Accessible name of the overflow/burger button, which shows only icons. |
 | `submenuAriaLabel` | `string` | `"{title} submenu"` | aria-label on each dropdown summary, top bar and overflow panel; `{title}` is replaced with `childLinksTitle` (or `name`). Forwarded to `NavigationItems`. |
+| `anchorScrollOffset` | `number \| (() => number)` | `undefined` (0) | Pixels left above a section when a `#anchor` link scrolls to it, e.g. a sticky header's height. Pass a getter to read it at click time. |
 | `styleClassPassthrough` | `string \| string[]` | `[]` | Extra CSS classes applied to the root `.navigation` element. |
 
+## Same-page anchor links (since 2026-10-06)
+
+Any item or child link whose `path` starts with `#` is a same-page section link:
+
+- It renders as a plain `<a href="#section">`, not a `NuxtLink`, so Vue Router stays out of the scroll.
+- Clicking it smooth-scrolls to the element with that id (`useAnchorScroll`), leaving
+  `anchorScrollOffset` pixels above it, and pushes the hash to the URL. Under
+  `prefers-reduced-motion: reduce` the browser's instant jump is used instead.
+- It is active (`li.is-active`, the indicator) by hash, not by route. On load, the URL's hash wins;
+  with none, the first anchor item in the data is active. Both the top bar and the overflow menu
+  share that state.
+- Clicking one closes any open dropdown and the overflow menu (route links close them by navigating).
+
+Route links and anchor links can be mixed in the same data. See the "Same-Page Anchor Links" story.
+
+## 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:
+
+| TabNavigation | ResponsiveHeader |
+|---|---|
+| `:nav-item-data="{ main: [...] }"` | `:responsive-nav-links="{ main: [...] }"` |
+| item `text` | item `name` |
+| item `href` (route or `#anchor`) | item `path` (route or `#anchor`, same behaviour) |
+| item `iconName` | item `iconName` |
+| item `isExternal` | drop it: `NuxtLink` treats a full URL as external |
+| item `cssName` | no equivalent; drop it (no consumer styles these classes) |
+| `nav-align="right"` | `--responsive-header-main-nav-justify-content: safe end` (CSS token) |
+| `aria-label` | `main-nav-aria-label` |
+| `open-menu-label` / `close-menu-label` | `overflow-button-label` (one label; the button is a `<summary>`) |
+| `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-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 -->
+<TabNavigation nav-align="right" :nav-item-data="{ main: [{ text: 'About', href: '#about' }] }" />
+
+<!-- After -->
+<ResponsiveHeader
+  :responsive-nav-links="{ main: [{ name: 'About', path: '#about' }] }"
+  style="--responsive-header-main-nav-justify-content: safe end"
+/>
+```
+
 ## Data edge cases (since 2026-10-05)
 
 - A dropdown with no `childLinksTitle` shows its `name` instead (it used to render an empty
@@ -154,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/service-detail.md

@@ -36,6 +36,9 @@ always rendered.
 | `headerTag` | `"h1" \| "h2" \| "h3"` | `"h1"` | no |
 | `subheadingTag` | `"h2" \| "h3"` | `"h2"` | no |
 | `breadcrumbItems` | `BreadcrumbItem[]` | auto-built from `serviceData` | no |
+| `breadcrumbAriaLabel` | `string` | Breadcrumb's default | no |
+| `pricePrefix` | `string` | `"From"` | no |
+| `idealForIcon` | `string` | `"mdi:diamond-stone"` | no |
 | `heroImageVariant` | `"full" \| "popout" \| "content" \| "inset-content"` | `"full"` | no |
 | `heroContentVariant` | `"full" \| "popout" \| "content" \| "inset-content"` | `"content"` | no |
 | `bodyVariant` | `"full" \| "popout" \| "content" \| "inset-content"` | `"content"` | no |
@@ -90,6 +93,35 @@ Defaults to a plain, non-linked two-item trail built from `serviceData.category`
 />
 ```
 
+> **Changed 2026-10-06:** the hero price prefix (`pricePrefix`), breadcrumb label and ideal-for icon are
+> props (the `From` and the icon were hardcoded). Sections with empty data, and headings set to `""`, are
+> left out instead of rendering an orphan heading; empty fields render nothing; with no title, a landmark
+> `tag` drops `aria-labelledby`. FAQ questions are one level below `subheadingTag` (were always `h3`).
+> The hero tokens are now a real minimum height, so a long title grows the hero instead of being clipped.
+> Ideal-for and related cards default to `--theme-surface-subtle` (were dark slate with no text colour).
+> The `final-cta` slot sits in `.service-detail__final-cta-action`, which never shrinks, so long copy can't
+> push its button out of the banner. Sidebar row labels size to their words (up to half the row); values wrap.
+
+## Line-clamp tokens
+
+All default to `none` (show everything). `1` is single-line ellipsis; any other number caps the lines
+with an ellipsis on the last. Set them in the consumer's own CSS, e.g.
+`.service-page { --service-detail-hero-title-line-clamp: 3; }`.
+
+| Token | Clamps |
+|---|---|
+| `--breadcrumb-item-line-clamp` | Each hero breadcrumb label (Breadcrumb's own token) |
+| `--service-detail-hero-eyebrow-line-clamp` | Hero eyebrow (`subtitle`) |
+| `--service-detail-hero-title-line-clamp` | Hero title |
+| `--service-detail-sidebar-label-line-clamp` | "Book This Service" / "You May Also Like" labels |
+| `--service-detail-sidebar-value-line-clamp` | Sidebar row values (price, duration, location) |
+| `--service-detail-related-title-line-clamp` | Related service titles (default item only, not the `related-service` slot) |
+| `--service-detail-final-cta-heading-line-clamp` | Final CTA heading |
+| `--service-detail-final-cta-body-line-clamp` | Final CTA body |
+
+The long-form body sections (description, process, FAQs) have no clamp on purpose: this is the page
+people come to read in full.
+
 ## Slots
 
 | Slot | Slot props | Purpose |

package/.claude/skills/components/service-summary.md

@@ -25,6 +25,7 @@ Usually consumed via [ServiceSummaryGrid](service-summary-grid.md) rather than d
 | `index` | `number` | `0` | no |
 | `alignment` | `"start" \| "center" \| "end"` | `"center"` | no |
 | `reverse` | `boolean` | `false` | no |
+| `pricePrefix` | `string` | `"From"` | no |
 | `styleClassPassthrough` | `string \| string[]` | `[]` | no |
 
 ### `index` and image loading
@@ -57,6 +58,13 @@ same pattern `ServiceDetail`'s hero uses — rather than the icon+text row the o
 had. There are no icon-customisation props (`durationIcon`/`priceIcon` are gone along with the
 icon row).
 
+The price pill reads `` `${pricePrefix} ${price}` `` (trimmed): pass a translated `pricePrefix`, or `""`
+for the price alone. A pill is only rendered when its value is non-empty, and the pill row is left out
+when both are empty. Empty `subtitle`, `title` and `whatIsIt` render nothing either; with no title, a
+landmark `tag` drops its `aria-labelledby` (there is no heading to point at). Added 2026-10-06, along
+with `--service-summary-column-min-width` and `--service-summary-body-line-clamp`. Before, the `From`
+prefix was hardcoded and empty fields rendered empty elements, including an empty heading.
+
 ## Row height and image aspect ratio
 
 By default `.service-summary` has no fixed height — the row sizes to its content: the image

package/.claude/skills/components/services-card-grid.md

@@ -40,6 +40,7 @@ Set on `.services-card-grid` (or scoped to a page class):
 | Token                  | Default   | Controls                              |
 | ---------------------- | --------- | ------------------------------------- |
 | `--services-card-grid-gap`               | `4rem`    | Gap between grid cells                |
+| `--services-card-grid-button-text-white-space` | `normal` | CTA label wrapping; `nowrap` keeps labels on one line |
 | `--services-card-grid-column-min-width`  | `250px`   | Minimum column width before wrapping  |
 
 ## Consumer page boilerplate
@@ -92,9 +93,9 @@ if (servicesData.value.length === 0) {
     --services-card-grid-column-min-width: 250px;
 
     .services-card {
-      --eyebrow-text-padding-block: 0.8rem 0;
-      --hero-text-padding-block: 2rem 1rem;
-      --description-text-colour: var(--colour-text-secondary);
+      --services-card-eyebrow-padding-block: 0.8rem 0;
+      --services-card-title-padding-block: 2rem 1rem;
+      --services-card-description-text-colour: inherit;
     }
   }
 }
@@ -107,4 +108,5 @@ if (servicesData.value.length === 0) {
 - The `Service` type is imported from `~/types/types.services`.
 - Uses `repeat(auto-fit, minmax(min(var(--services-card-grid-column-min-width, 250px), 100%), 1fr))` (the `min(…, 100%)` stops a single column overflowing containers narrower than the minimum, fixed 2026-09-28) — columns grow to fill available space and wrap when below the minimum width.
 - The `#actions` slot template is passed down into each `ServicesCard`; `serviceData` is the scoped prop for the current iteration item.
+- CTA labels (`buttonTextPrefix` + title, trimmed) wrap inside the card since 2026-10-06; before, InputButton's `nowrap` let a long or translated title run past the card edge and get clipped.
 - Data fetching is the page's responsibility — pass an empty array as fallback while loading (`servicesData ?? []`).

package/.claude/skills/components/services-card.md

@@ -4,6 +4,16 @@
 
 `ServicesCard` renders a single service as a portrait card: image, subtitle (eyebrow), title, short description, an optional duration/price meta row, and an `actions` slot for any CTA content. The component owns the layout and data display; all routing and button decisions are delegated to the consumer via the slot.
 
+> **Changed 2026-10-06:** every inner class and card-specific token is now prefixed `services-card-`
+> (`.footer` → `.services-card-footer`, `--meta-font-size` → `--services-card-meta-font-size`,
+> `--image-wrapper-*` → `--services-card-image-*`, and so on; the full old-to-new list is in
+> `CONSUMER-STYLING.md` under State hooks). Bare names like `.footer`, `.description` and
+> `--meta-*` collided with consumer CSS, since the card renders inline. Also: empty `subtitle`,
+> `title` or `shortDescription` no longer render an empty element (no empty heading); long unbroken
+> text wraps; a long duration/price wraps onto its own line; `--services-card-description-line-clamp`
+> defaults to `none`; new `--services-card-meta-gap`; outline hover tokens fall back to the resting ones; a whole-card link now shows a focus ring by default
+> (`--services-card-outline-colour-focus`, falling back to the hover colour then `--theme-ring`).
+
 ## Props
 
 | Prop                    | Type                              | Default     | Required |
@@ -33,11 +43,11 @@ If an `actions` slot is provided, the card stays as a static `tag` element (no h
 
 ### Titles over the image (`titlesWithinImageWrapper`)
 
-When `true`, the eyebrow and title move out of `.details-wrapper` and sit over the bottom of the image instead. The image wrapper is a `GridStack`: the image is layer 1, and `.image-wrapper-details` (eyebrow + title) is layer 2. The description, meta row and actions stay below the image.
+When `true`, the eyebrow and title move out of `.services-card-details` and sit over the bottom of the image instead. The image wrapper is a `GridStack`: the image is layer 1, and `.services-card-image-details` (eyebrow + title) is layer 2. The description, meta row and actions stay below the image.
 
-- A gradient scrim behind the text keeps it readable. Its colour comes from `--image-wrapper-details-scrim-colour` (default black), and `--image-wrapper-details-scrim` replaces the whole background (`none` removes it).
-- Text colour uses `contrast-color()` against the scrim colour where supported (black or white, whichever reads better), falling back to white. It reads the scrim colour only, not the photo, so if you remove the scrim, set `--image-wrapper-details-text-colour` yourself.
-- The eyebrow's gradient fill is turned off over the image; it takes the text colour (or `--image-wrapper-details-eyebrow-text-colour`).
+- A gradient scrim behind the text keeps it readable. Its colour comes from `--services-card-image-details-scrim-colour` (default black), and `--services-card-image-details-scrim` replaces the whole background (`none` removes it).
+- Text colour uses `contrast-color()` against the scrim colour where supported (black or white, whichever reads better), falling back to white. It reads the scrim colour only, not the photo, so if you remove the scrim, set `--services-card-image-details-text-colour` yourself.
+- The eyebrow's gradient fill is turned off over the image; it takes the text colour (or `--services-card-image-details-eyebrow-colour`).
 - The eyebrow's default `fontSize` is `"medium"` in this mode (vs `"large"` below the image). `eyebrowConfig`/`heroConfig` still apply.
 
 See "Titles over the image" in `CONSUMER-STYLING.md` for the token list.
@@ -158,10 +168,10 @@ scaffold a style block using `styleClassPassthrough` instead — see
 .page-my-page {
   .services-card {
     --services-card-gap: 1.4rem;
-    --description-line-clamp: 3;
-    --eyebrow-text-padding-block: 0.8rem 0;
-    --hero-text-padding-block: 2rem 1rem;
-    --meta-border-colour: var(--brand-border);
+    --services-card-description-line-clamp: 3;
+    --services-card-eyebrow-padding-block: 0.8rem 0;
+    --services-card-title-padding-block: 2rem 1rem;
+    --services-card-meta-border-colour: var(--brand-border);
   }
 }
 </style>
@@ -193,9 +203,9 @@ No `actions` slot — the entire card renders as an anchor (`NuxtLink` for the i
 
 - Component is auto-imported in Nuxt — no import needed.
 - The `Service` type is imported from `~/types/types.services`.
-- Root markup is two rows (`grid-template-rows: auto 1fr`): `.image-wrapper`, then a `.details-wrapper` (`display: flex; flex-direction: column`) holding the eyebrow, title, description, and a `.footer` wrapper. Description length is controlled by `--description-line-clamp` (default effectively unclamped) rather than a fixed-height grid row.
-- `.footer` groups the meta row and the `actions` slot and gets `margin-block-start: auto`, pinning them to the bottom of the card. Combined with the root's `1fr` details row, this means when `ServicesCardGrid`'s default `align-items: stretch` makes a card taller than its own content (to match a taller sibling in the same row), the extra height goes to `.footer`'s top margin rather than leaving whitespace below the actions slot — so the meta row and actions/button line up across a row of cards regardless of each card's description length. This does the visual job of CSS subgrid without needing a subgrid chain across `ServicesCard`/`ServicesCardGrid` (which would also break whenever cards in a row don't all render the same optional rows — `.meta` and `actions` are both conditional).
-- Image has a `3/4` aspect ratio with a subtle scale-on-hover effect, triggered by hovering the image only (not the whole card). When the card is a whole-card link styled with its own hover effect (e.g. `--services-card-transform-hover`), set `--image-wrapper-border-image-zoom-transform: none` so the two effects don't stack; the "Dark Overlay Cards" story does this. Keep the zoom for the `actions`-slot layout, where the card itself has no hover state. The hover is on `.image-wrapper`, not the image, so it still fires when the overlaid titles cover the image. `.image-wrapper-details` is `position: relative; z-index: 1` because the image's hover `transform` would otherwise paint over it, and `.image-wrapper` sets `isolation: isolate` so that z-index stays inside the card.
-- `.services-card`, `.image-wrapper`, `.details-wrapper`, and `.footer` all set `min-inline-size: 0`. Without it, an unbreakable child — most commonly a long `actions` slot button label, since `InputButton`'s `.button-text` is `white-space: nowrap` with no ellipsis — forces its content's min-content width up through the flex/grid chain and widens that one card's grid column in `ServicesCardGrid` wider than its siblings (the image just rides along on the widened column; it isn't the actual cause). If you see one card/column wider than the rest with cut-off content, check for a long unbreakable string in a slot before assuming it's an image sizing issue.
+- Root markup is two rows (`grid-template-rows: auto 1fr`): `.services-card-image-wrapper`, then a `.services-card-details` (`display: flex; flex-direction: column`) holding the eyebrow, title, description, and a `.services-card-footer` wrapper. Description length is controlled by `--services-card-description-line-clamp` (default `none`) rather than a fixed-height grid row.
+- `.services-card-footer` groups the meta row and the `actions` slot and gets `margin-block-start: auto`, pinning them to the bottom of the card. Combined with the root's `1fr` details row, this means when `ServicesCardGrid`'s default `align-items: stretch` makes a card taller than its own content (to match a taller sibling in the same row), the extra height goes to `.services-card-footer`'s top margin rather than leaving whitespace below the actions slot — so the meta row and actions/button line up across a row of cards regardless of each card's description length. This does the visual job of CSS subgrid without needing a subgrid chain across `ServicesCard`/`ServicesCardGrid` (which would also break whenever cards in a row don't all render the same optional rows — `.services-card-meta` and `actions` are both conditional).
+- Image has a `3/4` aspect ratio with a subtle scale-on-hover effect, triggered by hovering the image only (not the whole card). When the card is a whole-card link styled with its own hover effect (e.g. `--services-card-transform-hover`), set `--services-card-image-zoom-transform: none` so the two effects don't stack; the "Dark Overlay Cards" story does this. Keep the zoom for the `actions`-slot layout, where the card itself has no hover state. The hover is on `.services-card-image-wrapper`, not the image, so it still fires when the overlaid titles cover the image. `.services-card-image-details` is `position: relative; z-index: 1` because the image's hover `transform` would otherwise paint over it, and `.services-card-image-wrapper` sets `isolation: isolate` so that z-index stays inside the card.
+- `.services-card`, `.services-card-image-wrapper`, `.services-card-details`, and `.services-card-footer` all set `min-inline-size: 0`. Without it, an unbreakable child — most commonly a long `actions` slot button label, since `InputButton`'s `.button-text` is `white-space: nowrap` with no ellipsis — forces its content's min-content width up through the flex/grid chain and widens that one card's grid column in `ServicesCardGrid` wider than its siblings (the image just rides along on the widened column; it isn't the actual cause). If you see one card/column wider than the rest with cut-off content, check for a long unbreakable string in a slot before assuming it's an image sizing issue.
 - Usually consumed via `ServicesCardGrid` rather than directly.
 - The "Dark Overlay Cards" story shows a full restyle using tokens only: dark panel, flush image, titles over the image, hover lift (`--services-card-transform-hover`), and EyebrowText typography tokens (`--eyebrow-text-font-style`, `-letter-spacing`, etc.) set on the card so they inherit into its eyebrow.

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/slider-gallery.md

@@ -5,7 +5,13 @@
 `SliderGallery` (`03.organisms/image-galleries/slider-gallery`) is a full-screen image carousel:
 a large slide with staggered text, a thumbnail strip that animates into place, prev/next arrows, a
 progress bar, and optional auto-advance. It's `position: absolute; inset: 0` at `100svh × 100vw`,
-so place it inside a positioned container sized for it (usually a full-viewport hero).
+so place it inside a positioned container sized for it (usually a full-viewport hero). To fill a
+smaller positioned container instead, set `--slider-gallery-width: 100%` and `--slider-gallery-height: 100%`.
+
+> **Changed 2026-10-06:** worst-case timings are clamped: `animationDuration` below 0 (or not a
+> finite number) becomes 0, and auto-advance waits at least `max(1000, animationDuration, autoRunInterval)`
+> ms. Before, an `autoRunInterval` at or below `animationDuration` stopped auto-advance after the first
+> slide. Long unbroken text now wraps everywhere, and thumbnail text is clamped to 2 lines by default.
 
 > **Changed 2026-09-28:** every inner class is now `slider-gallery-*` (was bare `.list`, `.item`,
 > `.content`, `.title`, `.thumbnail`, `.arrows`, `.time` and so on, which collided with consumer CSS
@@ -20,8 +26,8 @@ so place it inside a positioned container sized for it (usually a full-viewport
 |---|---|---|---|
 | `v-model:gallery-data` | `IGalleryData[]` | required | Slides (see type below) |
 | `autoRun` | `boolean` | `true` | Auto-advance. Paused while hovered or focused; never runs under `prefers-reduced-motion: reduce` |
-| `autoRunInterval` | `number` | `7000` | ms between auto-advances |
-| `animationDuration` | `number` | `3000` | ms a transition locks the controls (also drives the progress bar) |
+| `autoRunInterval` | `number` | `7000` | ms between auto-advances. Never shorter than `animationDuration` or 1000ms |
+| `animationDuration` | `number` | `3000` | ms a transition locks the controls (also drives the progress bar). Negative values become 0 |
 | `ariaLabel` | `string` | `"Image gallery"` | Carousel region label |
 | `loadingText` | `string` | `"Loading gallery..."` | Loading-state copy |
 | `seeMoreText` | `string` | `"SEE MORE"` | Link text for slides with an `href` |
@@ -78,7 +84,7 @@ const slides = ref<IGalleryData[]>([
 ## Styling
 
 Public tokens (`--slider-gallery-*`) cover height, z-index, accent (spinner and progress), text
-colours, thumbnail size/border/radius/overlay, arrow row position (base, tablet, desktop), arrow size, colours, border, outline (resting, hover and focus) and CTA colours. Full reference:
+width, colours, line clamps for each text element (`--slider-gallery-*-line-clamp`; thumbnails default to 2 lines), thumbnail size/border/radius/overlay, arrow row position (base, tablet, desktop), arrow size, colours, border, outline (resting, hover and focus) and CTA colours. Full reference:
 `app/components/03.organisms/image-galleries/slider-gallery/CONSUMER-STYLING.md`.
 
 ## Notes