srcdev-nuxt-components 9.5.6 → 9.6.0

package/.claude/skills/component-compliance-checklist.md

@@ -13,7 +13,8 @@ skip silently. Notes marked **Existing component** only apply when migrating.
 
 A component passes when its Component Ledger row (`node .claude/component-ledger/build.mjs`, then
 `.claude/component-ledger/audit.json`) shows `score: 5`, a real tier, and `variants`, `legacy_props`,
-`story_args_bug`, `eslint_issues`, `redundant_priv_tokens` and `styling_doc_outdated` all `false`.
+`story_args_bug`, `eslint_issues`, `redundant_priv_tokens`, `styling_doc_outdated` and `missing_stress_story`
+all `false`.
 The ledger can't see items 9, 10, 11 and 14, so check those by hand.
 
 ## The checklist
@@ -131,7 +132,10 @@ The ledger can't see items 9, 10, 11 and 14, so check those by hand.
     covers ellipsis too (`1` is single-line ellipsis). Default it to `none` unless the layout
     clearly needs a cap, and never clamp text that must stay readable (legal or attribution text,
     link text that names its destination). Shape and rules: `theming-component-token-pattern.md`,
-    "Line-clamp tokens". Add a unit test for any logic fix. A component that takes no data or copy
+    "Line-clamp tokens". Give each line-clamp token a Controls-panel select in the stories (set on
+    a wrapper `:style`, stripped from the component's args), labelled as a story-only CSS token so
+    nobody mistakes it for a prop: `storybook-add-story.md`, "Label token controls as story-only".
+    Add a unit test for any logic fix. A component that takes no data or copy
     (e.g. a pure layout wrapper) still gets one with oversized slot content.
 7. **Skill doc** — create or update `.claude/skills/components/<component-name>.md`, following the
    pattern of an existing one. A labelled `<Name>Field` wrapper (or any other wrapper) is documented

package/.claude/skills/components/breadcrumb.md

@@ -47,4 +47,9 @@ a `to` is a real link; the library never guesses which item is "current" from it
 - `ServiceDetail` uses this component internally for its hero banner breadcrumb, overriding
   `--breadcrumb-colour` to `white` so it reads over the hero image. See
   [service-detail.md](service-detail.md).
+- Items with a blank `label` are skipped (no empty crumb, no dangling separator), and nothing renders when
+  none are left, so there is no empty `<nav>` landmark. An empty `separator` renders no separator element.
+  Added 2026-10-06.
+- Long labels wrap (unbroken ones too). Set `--breadcrumb-item-line-clamp` (default `none`) to cap each
+  label's lines with an ellipsis, e.g. `1` for single-line crumbs. Added 2026-10-06.
 - See `CONSUMER-STYLING.md` in the component's own folder for the full `--breadcrumb-*` token API.

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

@@ -98,6 +98,8 @@ Colour resolves as **variant token → base token → variant default**: `--disp
 
 ## Notes
 
+- Since 2026-10-06 a pill never grows past its container: a label too long for the space ends in an ellipsis (it still never wraps).
+
 - `border-radius` defaults to `100vw` — this always collapses to the tightest possible radius on the shorter axis, making it geometry-independent (no magic number needed).
 - `cursor: default` and `user-select: none` are applied unconditionally. `cursor: pointer` is applied automatically via `:is(button, a)` when `tag` is interactive.
 - All variant colour pairs use a light-tint background (`--color-01`) with a dark text colour (`--color-09`/`--color-10`) to ensure WCAG AA contrast. The project colour scale runs `00` (lightest) → `10` (darkest) — the opposite of Tailwind.

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/navigation-items.md

@@ -18,6 +18,7 @@ active-route highlighting, hover indicator).
 | `mainNavigationState` | `ResponsiveHeaderState` | `{ clonedNavLinks: {}, navListVisibility: {}, hasSecondNav: false }` | Shared geometry/visibility state, normally supplied by the parent `ResponsiveHeader` — not something a consumer constructs by hand outside of tests/stories. |
 | `panelVariant` | `"modern" \| "classic"` | `"classic"` | Which panel component renders a dropdown's submenu: `ExpandingPanel` (`"modern"`) or `ExpandingPanelClassic` (`"classic"`, default). `"modern"` is known not to work correctly on WebKit. Normally set via `ResponsiveHeader`'s own `panelVariant` prop rather than directly. See CLAUDE.md pitfall #19. |
 | `ariaLabel` | `string` | `"Overflow navigation menu"` | aria-label on the root `role="menu"` element — override for localisation. Normally set via `ResponsiveHeader`'s own `overflowMenuAriaLabel` prop rather than directly. |
+| `submenuAriaLabel` | `string` | `"{title} submenu"` | aria-label on each submenu summary; `{title}` is replaced with `childLinksTitle` (or `name`). Normally set via `ResponsiveHeader`'s `submenuAriaLabel`. |
 | `styleClassPassthrough` | `string \| string[]` | `[]` | Extra CSS classes applied to the root `.overflow-navigation-wrapper` element. |
 
 ---

package/.claude/skills/components/opening-hours.md

@@ -78,6 +78,18 @@ earlier than `opens` means the session runs past midnight and is displayed as gi
 - Grouping compares status, sessions and note; only **consecutive** days (in `week-starts-on`
   order) group. No wrap-around from Sunday to Monday.
 - Exceptions don't alter the weekly table; they are listed separately.
+- **Bad data never throws** (since 2026-10-05): a time that isn't a valid `HH:MM` from `00:00` to
+  `23:59` (e.g. `"abc"`, `"25:99"`, `"24:00"`) and an exception date that isn't a real
+  `YYYY-MM-DD` are shown exactly as written. An invalid `locale` falls back to `en-GB`, and an
+  invalid `timeZone` to the browser's own. An exception whose `to` is before its `from` is shown
+  the right way round, and duplicate exception dates both render. The checks are the
+  auto-imported `parseOpeningTime` and `parseOpeningDate` utils (`app/utils/opening-hours.ts`).
+- A session that closes after midnight (`22:00`–`02:00`) displays as written; schema.org reads
+  `closes` before `opens` as the next day.
+- `status: "open"` with no sessions is treated as closed (since 2026-10-05): the row shows
+  `closedLabel`, gets `data-status="closed"`, and structured data treats it as closed too.
+- Long text wraps rather than overflowing; notes and exception labels have line-clamp tokens
+  (`CONSUMER-STYLING.md`). The `StressTest` story covers the worst-case data.
 - Today's highlight and past-exception hiding run in `onMounted`, never on the server, so cached
   HTML can't carry a stale day. Past exceptions are briefly visible before hydration.
 - **Structured data**: emits `{ "@type": structuredData.type ?? "LocalBusiness", "@id", name,

package/.claude/skills/components/price-list.md

@@ -4,7 +4,8 @@
 
 `PriceList` (`app/components/02.molecules/price-list/`) renders a service/menu-style price list:
 one or more columns, each with a heading (optional icon) and a `<dl>` of description/price rows.
-Columns stack below `48em` and sit two-up above it. Not a SaaS plan comparison, use `PricingCard`
+Columns stack in a narrow container and sit two-up once the component itself is wide enough
+(a container-width grid since 2026-10-05, not a viewport media query). Not a SaaS plan comparison, use `PricingCard`
 for that.
 
 ---
@@ -48,6 +49,8 @@ No slots, no events.
 - Column titles are `HeroText` headings at `heading-tag`. Prices are plain `<span>`s inside `<dd>`,
   not headings (before 2026-09-27 each price was an `<h2>`, which flooded the heading outline).
 - Rows are `<div>`-wrapped `<dt>`/`<dd>` pairs, valid inside `<dl>`.
+- A column with an empty `headingtext` renders no heading at all (no empty `<h2>`); its rows still
+  render.
 
 ---
 
@@ -57,6 +60,12 @@ All tokens are `--price-list-*`; full table in `CONSUMER-STYLING.md` next to the
 Common ones: `--price-list-divider-colour`, `--price-list-divider-opacity`,
 `--price-list-price-font-size`, `--price-list-heading-margin-block-end`.
 
+Layout and long data: `--price-list-column-min-inline-size` (`32rem`) and `--price-list-max-columns`
+(`2`) control when columns sit side by side; `--price-list-price-max-inline-size` (`50%`) caps the
+price so a long price wraps instead of crushing the description; `--price-list-description-line-clamp`
+(`none`) caps description lines. Unbroken strings wrap anywhere. The `StressTest` story covers the
+worst-case data.
+
 ---
 
 ## Usage

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

@@ -110,8 +110,82 @@ buggy toggle-based version too.
 | `mainNavAriaLabel` | `string` | `"Main navigation"` | aria-label on the primary nav landmark — override for localisation. |
 | `secondaryNavAriaLabel` | `string` | `"Secondary navigation"` | aria-label on the secondary (overflow) nav landmark — override for localisation. |
 | `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
+
+`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-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-*` |
+
+```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
+  summary labelled "undefined submenu").
+- Child links are keyed by index, so duplicate names are fine.
+- The overflow button appears whenever any item is hidden, whatever the group keys are called.
+  It used to read `navListVisibility.firstNav`/`secondNav` only, so a group named anything else
+  (e.g. `main`) kept the burger showing even when everything fitted. Empty nav data never shows
+  it, and still completes the geometry pass.
+- The top-bar dropdown and the overflow panel are capped in width and height (tokens in
+  `CONSUMER-STYLING.md`); long names wrap and long lists scroll inside them.
+- **Fit check (fixed 2026-10-05):** an item is visible when its right edge is at or before the main
+  nav's own measured right edge (which already has the secondary nav and gap reserved as
+  `margin-inline-end`). It used to compare against the wrapper while adding the gap a second time
+  with a strict `<`, so the last item of a flush-right second group (e.g. "Contact") was always
+  sent to the overflow menu, however wide the screen.
+- The component copies `responsiveNavLinks` before measuring. It used to write each item's
+  `config` straight into the consumer's own nav data object.
+- The `StressTest` story covers all of the above.
+- **Alignment (added 2026-10-05):** `--responsive-header-main-nav-justify-content`
+  (default `space-between`) sets how the main nav's groups sit along the bar; use `safe end` /
+  `safe center`, never plain `end`/`center`. The `MainNavAlignment` story shows the options.
+
 ## Slots
 
 | Slot | Purpose |

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

@@ -27,6 +27,8 @@ Branding (logo/wordmark) is entirely consumer-authored via the `#branding` slot
 | `mainNavAriaLabel` | `string` | `"Main navigation"` | Forwarded to `ResponsiveHeader`'s `mainNavAriaLabel` — override for localisation. |
 | `secondaryNavAriaLabel` | `string` | `"Secondary navigation"` | Forwarded to `ResponsiveHeader`'s `secondaryNavAriaLabel` — override for localisation. |
 | `overflowMenuAriaLabel` | `string` | `"Overflow navigation menu"` | Forwarded to `ResponsiveHeader`'s `overflowMenuAriaLabel` — override for localisation. |
+| `overflowButtonLabel` | `string` | `"More navigation"` | Forwarded to `ResponsiveHeader`'s `overflowButtonLabel`, the burger button's accessible name. |
+| `submenuAriaLabel` | `string` | `"{title} submenu"` | Forwarded to `ResponsiveHeader`'s `submenuAriaLabel`; `{title}` is replaced with the item's title. |
 
 ---
 

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

package/.claude/skills/components/tab-navigation.md

@@ -1,5 +1,11 @@
 # TabNavigation
 
+> **Deprecated (2026-10-06): use [ResponsiveHeader](responsive-header.md) for new work.** It does
+> everything TabNavigation does, including same-page `#anchor` links with `anchorScrollOffset`, and
+> collapses item by item instead of all-or-nothing. Follow "Migrating from TabNavigation" in that doc.
+> TabNavigation stays until existing consumers have moved, then it will be removed. It logs a
+> dev-mode console warning on mount.
+
 ## Overview
 
 A responsive horizontal navigation bar with CSS anchor-positioning indicators, smooth anchor
@@ -41,10 +47,20 @@ interface NavItemData {
 | `nav-align` | `"left" \| "center" \| "right"` | `"left"` | Positions the tab list within the nav container |
 | `anchor-scroll-offset` | `number \| (() => number)` | — | Pixel offset subtracted from scroll target; pass a getter so it is re-evaluated at click time |
 | `aria-label` | `string` | `"Site navigation"` | aria-label on the root `<nav>` landmark — override for localisation |
+| `open-menu-label` | `string` | `"Open navigation menu"` | Burger button label while closed — override for localisation |
+| `close-menu-label` | `string` | `"Close navigation menu"` | Burger button label while open — override for localisation |
 | `:style-class-passthrough` | `string \| string[]` | `[]` | Extra classes on the root `<nav>` element |
 
 ---
 
+> **Changed 2026-10-06:** the burger labels are props (were hardcoded English). Items with blank `text`
+> are skipped (a link with no text has no accessible name), and nothing renders when none are left.
+> Items are keyed by position, so duplicate or missing `href`s no longer break rendering. The mobile
+> panel's id comes from `useId()` (was a fixed `tab-nav-panel`, which duplicated with two navs on a
+> page). Links show a focus ring (`--tab-nav-focus-ring-*`), and long panel labels wrap. Colour
+> defaults are light-theme now (`--theme-text` links, `--theme-accent` hover and indicator, `--page-bg`
+> panel); they used to assume a dark header. Dark headers or dark mode set the colour tokens.
+
 ## Basic usage — route links
 
 ```vue
@@ -146,9 +162,9 @@ the component source folder for the full token reference.
 
 | Token | Default | Controls |
 |---|---|---|
-| `--tab-nav-link-color` | `var(--slate-01, currentColor)` | Link text colour |
-| `--tab-nav-link-hover-color` | `var(--slate-04, currentColor)` | Link hover colour |
-| `--tab-nav-link-active-color` | `var(--slate-01, currentColor)` | Active link colour |
+| `--tab-nav-link-color` | `var(--theme-text)` | Link text colour |
+| `--tab-nav-link-hover-color` | `var(--theme-accent)` | Link hover colour |
+| `--tab-nav-link-active-color` | the link colour | Active link colour |
 | `--tab-nav-link-size` | `1.6rem` | Font size |
 | `--tab-nav-link-weight` | `400` | Font weight |
 | `--tab-nav-link-tracking` | `0.06em` | Letter spacing |
@@ -159,17 +175,17 @@ the component source folder for the full token reference.
 
 | Token | Default | Controls |
 |---|---|---|
-| `--tab-nav-decorator-indicator-color` | `var(--slate-01, currentColor)` | Active underline bar colour |
+| `--tab-nav-decorator-indicator-color` | `var(--theme-accent)` | Active underline bar colour |
 | `--tab-nav-decorator-hovered-bg` | `transparent` | Hover pill background (set non-transparent to enable) |
 
 ### Mobile panel
 
 | Token | Default | Controls |
 |---|---|---|
-| `--tab-nav-panel-bg` | `var(--page-bg, #1a1614)` | Panel background |
-| `--tab-nav-panel-border-color` | `color-mix(in oklch, var(--slate-01) 35%, transparent)` | Panel top border |
-| `--tab-nav-panel-item-border` | `color-mix(in oklch, var(--slate-01) 8%, transparent)` | Item dividers |
-| `--tab-nav-panel-link-color` | `var(--slate-01, currentColor)` | Panel link colour |
+| `--tab-nav-panel-bg` | `var(--page-bg, var(--theme-surface-subtle))` | Panel background |
+| `--tab-nav-panel-border-color` | the link colour at 20% | Panel top border |
+| `--tab-nav-panel-item-border` | the panel link colour at 12% | Item dividers |
+| `--tab-nav-panel-link-color` | the link colour | Panel link colour |
 | `--tab-nav-panel-padding-block` | `1.4rem` | Link vertical padding |
 | `--tab-nav-panel-padding-inline` | `1.5rem` | Link horizontal padding |
 | `--tab-nav-panel-slide-duration` | `350ms` | Panel open/close duration |
@@ -179,7 +195,7 @@ the component source folder for the full token reference.
 
 | Token | Default | Controls |
 |---|---|---|
-| `--tab-nav-burger-color` | `var(--slate-01, currentColor)` | Bar colour |
+| `--tab-nav-burger-color` | the link colour | Bar colour |
 | `--tab-nav-burger-width` | `22px` | Bar width |
 | `--tab-nav-burger-height` | `1.5px` | Bar height |
 | `--tab-nav-burger-gap` | `5px` | Gap between bars |

package/.claude/skills/index.md

@@ -107,8 +107,7 @@ Each skill is a single markdown file named `<area>-<task>.md`.
     ├── wipe-away-vertical.md   — WipeAwayVertical: scroll-driven vertical wipe-away effect, pure-CSS grid overlay (no JS), indexed dynamic slots, sticky-centering-via-calc gotcha, CSS tokens
     ├── marquee-scroller.md     — MarqueeScroller: infinite logo/badge scroller, per-item dynamic slots (marqueeData id), hover/focus/keyboard pause, reduced-motion, CSS tokens
     ├── rotating-carousel-image.md — RotatingCarouselImage: 3D rotating image carousel, scroll-parallax tilt, focus/keyboard/hover pause, reduced-motion, CSS tokens
-    ├── site-navigation.md      — SiteNavigation: responsive nav with auto-collapse, burger menu, decorator indicators, CSS token API
-    ├── tab-navigation.md       — TabNavigation: horizontal tab nav with CSS anchor-positioning indicators, anchor scroll, burger collapse, full CSS token API
+    ├── tab-navigation.md       — TabNavigation (DEPRECATED, use ResponsiveHeader): horizontal tab nav with CSS anchor-positioning indicators, anchor scroll, burger collapse, full CSS token API
     ├── social-icons-list.md    — SocialIconsList: data-driven social icon links, ISocialIcon type, logos: icon names, CSS tokens
     ├── display-qr-code.md      — DisplayQrCode: QR code SVG from a string value, colour/size/variant/radius props, currentColor default
     ├── capture-qr-code.md      — CaptureQrCode: live camera scanner, error state, visibility/route/KeepAlive lifecycle, media stream cleanup

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

@@ -271,6 +271,20 @@ Key points:
 - Extra args must be stripped before `v-bind` — spreading unknown keys onto a component makes them unknown HTML attributes.
 - CSS custom properties set via `:style` on the component root are picked up by `var()` in the component's scoped CSS.
 
+### Label token controls as story-only
+
+A control that drives a CSS token (a line clamp, a colour) looks exactly like a prop in the
+Controls panel and the generated docs table, so a developer reading the story can assume it's a
+prop and try to pass it. Make it unmistakable:
+
+- Put it in the category `"CSS tokens (story only, set in your CSS)"`.
+- Start the description with `**Story control, not a prop.**`, name the token, and show the CSS a
+  consumer would write instead, e.g.
+  `` `.salon-menu { --price-list-description-line-clamp: 2; }` ``.
+- If a story's docs text tells people to try the control, say there too that it's a CSS token.
+
+`PriceList.stories.ts` and `GoogleReviews.stories.ts` (line-clamp controls) follow this.
+
 ## Notes
 
 - **Colour scheme:** `.storybook/preview.ts` pins every story to the light scheme

package/.vscode/srcdev-component-responsive-header.code-snippets

@@ -24,7 +24,9 @@
       "  main-nav-aria-label=\"${2:Main navigation}\"",
       "  secondary-nav-aria-label=\"${3:Secondary navigation}\"",
       "  overflow-menu-aria-label=\"${4:Overflow navigation menu}\"",
-      "/>"
+      "  overflow-button-label=\"${5:More navigation}\"",
+      "  submenu-aria-label=\"${6:{title\\} submenu}\"",
+      "></ResponsiveHeader>"
     ]
   },
   "SRCDEV ResponsiveHeader Nav Data (with dropdown)": {
@@ -54,5 +56,15 @@
       "  --responsive-header-link-font-size: ${4:1.4rem};",
       "}"
     ]
+  },
+  "SRCDEV ResponsiveHeader Anchor Links": {
+    "description": "ResponsiveHeader for a one-page site: #anchor items smooth-scroll to sections, offset for a sticky header",
+    "scope": "vue,html",
+    "body": [
+      "<ResponsiveHeader",
+      "  :responsive-nav-links=\"{ main: [{ name: '$1Home', path: '#$2home' }, { name: '$3About', path: '#$4about' }] }\"",
+      "  :anchor-scroll-offset=\"${5:80}\"",
+      "/>"
+    ]
   }
 }

package/.vscode/srcdev-component-service-detail.code-snippets

@@ -7,6 +7,7 @@
       "  :service-data=\"$1service\"",
       "  location=\"$2Mobile — across Bath\"",
       "  :related-services=\"$3relatedServices\"",
+      "  price-prefix=\"${7:From}\"",
       ">",
       "  <template #book-cta>",
       "    <button type=\"button\">$4Book Now</button>",

package/.vscode/srcdev-component-service-summary.code-snippets

@@ -18,7 +18,7 @@
     "description": "ServiceSummary with image/content columns swapped",
     "scope": "vue,html",
     "body": [
-      "<ServiceSummary :service-data=\"$1service\" :reverse=\"$2true\">",
+      "<ServiceSummary :service-data=\"$1service\" :reverse=\"$2true\" price-prefix=\"${3:From}\">",
       "  <template #summary-link=\"{ serviceData }\">",
       "    <NuxtLink :to=\"`/services/${serviceData.slug}`\">$3More about {{ serviceData.title }} →</NuxtLink>",
       "  </template>",
@@ -55,6 +55,8 @@
       "    --service-summary-image-padding-block-mobile: ;",
       "    --service-summary-image-padding-inline-mobile: ;",
       "    --service-summary-pills-gap: ;",
+      "    --service-summary-column-min-width: ;",
+      "    --service-summary-body-line-clamp: ;",
       "    --service-summary-pill-border-colour: ;",
       "",
       "    .service-summary__image-wrapper {}",