srcdev-nuxt-components 9.5.7 → 9.6.0

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/responsive-header.md

@@ -112,8 +112,57 @@ 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
+
+`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

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/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/.vscode/srcdev-component-responsive-header.code-snippets

@@ -56,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 {}",

package/.vscode/srcdev-component-services-card.code-snippets

@@ -85,6 +85,7 @@
       "    --services-card-outline-width: ;",
       "    --services-card-outline-colour: ;",
       "    --services-card-outline-colour-hover: ;",
+      "    --services-card-outline-colour-focus: ;",
       "    --services-card-outline-offset: ;",
       "    --services-card-outline-offset-hover: ;",
       "    --services-card-background-color-hover: ;",
@@ -94,44 +95,45 @@
       "    --services-card-background-color: ;",
       "    --services-card-padding-block: ;",
       "    --services-card-padding-inline: ;",
-      "    --image-wrapper-aspect-ratio: ;",
-      "    --image-wrapper-border-radius: ;",
-      "    --image-wrapper-padding-block: ;",
-      "    --image-wrapper-padding-inline: ;",
-      "    --image-wrapper-border-image-zoom-transform: ;",
-      "    --details-wrapper-grid-gap: ;",
-      "    --details-wrapper-padding-block: ;",
-      "    --details-wrapper-padding-inline: ;",
-      "    --eyebrow-text-padding-block: ;",
-      "    --hero-text-padding-block: ;",
-      "    --description-text-colour: ;",
-      "    --description-padding-block: ;",
-      "    --description-line-height: ;",
-      "    --description-font-weight: ;",
-      "    --description-line-clamp: ;",
-      "    --meta-padding-block: ;",
-      "    --meta-border-colour: ;",
-      "    --meta-text-colour: ;",
-      "    --meta-duration-text-colour: ;",
-      "    --meta-price-text-colour: ;",
-      "    --meta-duration-font-weight: ;",
-      "    --meta-price-font-weight: ;",
-      "    --meta-letter-spacing: ;",
-      "    --meta-font-size: ;",
-      "    --meta-text-transform: ;",
-      "    --footer-padding-block: ;",
-      "    --footer-wrapper-grid-gap: ;",
+      "    --services-card-image-aspect-ratio: ;",
+      "    --services-card-image-border-radius: ;",
+      "    --services-card-image-padding-block: ;",
+      "    --services-card-image-padding-inline: ;",
+      "    --services-card-image-zoom-transform: ;",
+      "    --services-card-details-gap: ;",
+      "    --services-card-details-padding-block: ;",
+      "    --services-card-details-padding-inline: ;",
+      "    --services-card-eyebrow-padding-block: ;",
+      "    --services-card-title-padding-block: ;",
+      "    --services-card-description-text-colour: ;",
+      "    --services-card-description-padding-block: ;",
+      "    --services-card-description-line-height: ;",
+      "    --services-card-description-font-weight: ;",
+      "    --services-card-description-line-clamp: ;",
+      "    --services-card-meta-padding-block: ;",
+      "    --services-card-meta-border-colour: ;",
+      "    --services-card-meta-text-colour: ;",
+      "    --services-card-meta-duration-text-colour: ;",
+      "    --services-card-meta-price-text-colour: ;",
+      "    --services-card-meta-duration-font-weight: ;",
+      "    --services-card-meta-price-font-weight: ;",
+      "    --services-card-meta-letter-spacing: ;",
+      "    --services-card-meta-font-size: ;",
+      "    --services-card-meta-text-transform: ;",
+      "    --services-card-meta-gap: ;",
+      "    --services-card-footer-padding-block: ;",
+      "    --services-card-footer-gap: ;",
       "",
       "    /* Titles over the image (titlesWithinImageWrapper) */",
-      "    --image-wrapper-details-scrim-colour: ;",
-      "    --image-wrapper-details-scrim: ;",
-      "    --image-wrapper-details-text-colour: ;",
-      "    --image-wrapper-details-eyebrow-text-colour: ;",
-      "    --image-wrapper-details-gap: ;",
-      "    --image-wrapper-details-eyebrow-text-padding-block: ;",
-      "    --image-wrapper-details-eyebrow-text-padding-inline: ;",
-      "    --image-wrapper-details-hero-text-padding-block: ;",
-      "    --image-wrapper-details-hero-text-padding-inline: ;",
+      "    --services-card-image-details-scrim-colour: ;",
+      "    --services-card-image-details-scrim: ;",
+      "    --services-card-image-details-text-colour: ;",
+      "    --services-card-image-details-eyebrow-colour: ;",
+      "    --services-card-image-details-gap: ;",
+      "    --services-card-image-details-eyebrow-padding-block: ;",
+      "    --services-card-image-details-eyebrow-padding-inline: ;",
+      "    --services-card-image-details-title-padding-block: ;",
+      "    --services-card-image-details-title-padding-inline: ;",
       "  }",
       "}"
     ]

package/.vscode/srcdev-component-services-grids.code-snippets

@@ -29,7 +29,8 @@
       ".$1my-page {",
       "  --services-card-grid-column-min-width: $2;",
       "  --services-card-grid-gap: $3;",
-      "  --service-summary-grid-row-gap: $4;",
+      "  --services-card-grid-button-text-white-space: $4;",
+      "  --service-summary-grid-row-gap: $5;",
       "}"
     ]
   }

package/.vscode/srcdev-component-tab-navigation.code-snippets

@@ -10,7 +10,7 @@
     "description": "TabNavigation with a localised aria-label",
     "scope": "vue,html",
     "body": [
-      "<TabNavigation :nav-item-data=\"$1navData\" aria-label=\"${2:Site navigation}\" />"
+      "<TabNavigation :nav-item-data=\"$1navData\" aria-label=\"${2:Site navigation}\" open-menu-label=\"${3:Open navigation menu}\" close-menu-label=\"${4:Close navigation menu}\" />"
     ]
   },
   "SRCDEV TabNavigation Nav Data Script": {

package/app/components/01.atoms/display-pill/CONSUMER-STYLING.md

@@ -73,6 +73,9 @@ keeps the same proportions. Tune a **ratio** to change spacing across all sizes,
 Private tokens (not public API): `--_background`, `--_text-colour`, `--_font-size`, `--_padding-inline`,
 `--_padding-block`, `--_padding-inline-icon` (derived from `--_icon-size`), `--_icon-size`, swapped by the size and variant classes.
 
+> **Changed 2026-10-06**: a pill is capped at its container's width (`max-inline-size: 100%`), and a
+> label too long for it ends in an ellipsis instead of overflowing. Short labels are unaffected.
+
 ## State hooks
 
 - Size class: `.sm`, `.md`, `.lg`. Variant class: `.default`, `.primary`, `.success`, `.warning`,

package/app/components/01.atoms/display-pill/DisplayPill.vue

@@ -105,6 +105,7 @@ watch(
     line-height: 1;
     white-space: nowrap;
     width: fit-content;
+    max-inline-size: 100%;
     cursor: default;
     user-select: none;
 
@@ -128,8 +129,10 @@ watch(
     }
 
     .display-pill-label {
-      display: inline-flex;
-      align-items: center;
+      display: block;
+      min-inline-size: 0;
+      overflow-x: clip;
+      text-overflow: ellipsis;
     }
 
     &.sm {