srcdev-nuxt-components 9.3.6 → 9.3.8

package/.claude/hooks/check-component-update.sh

@@ -1,7 +1,8 @@
 #!/usr/bin/env bash
 # PostToolUse hook (Write|Edit) for app/components/*.vue files. Advisory nudges only
 # (missing != wrong): skill doc, story, test, CONSUMER-STYLING.md, .vscode snippet,
-# legacy tier-folder location, options-style defineProps.
+# legacy tier-folder location, options-style defineProps, single-use private CSS tokens,
+# leftover app/pages/ demo pages (this library is Storybook-only, see Claude.md).
 
 root="${CLAUDE_PROJECT_DIR:-$(pwd)}"
 
@@ -63,4 +64,32 @@ if grep -qE 'defineProps\(\s*\{' "$f" && ! grep -q 'defineProps<' "$f"; then
   msg="$msg This component uses the options-style defineProps({...}) pattern, an outdated-pattern signal; migrate to interface Props + withDefaults(defineProps<Props>(), {...}) per the Props Pattern in Claude.md."
 fi
 
+# Private --_x CSS tokens that appear only twice in the file (once declared, once consumed) are
+# likely pure indirection with no reuse/computation/state to justify them — see the "Public
+# token pattern" rule in Claude.md's Styling Methodology and pitfall #20 (ServicesCard).
+private_vars=$(grep -oE -- '--_[a-zA-Z0-9-]+' "$f" | sort -u)
+if [[ -n "$private_vars" ]]; then
+  single_use=""
+  while IFS= read -r var; do
+    [[ -z "$var" ]] && continue
+    count=$(grep -oE -- "\\${var}\\b" "$f" | wc -l | tr -d ' ')
+    if [[ "$count" -le 2 ]]; then
+      single_use="$single_use $var"
+    fi
+  done <<< "$private_vars"
+  if [[ -n "$single_use" ]]; then
+    msg="$msg This component declares private CSS token(s) ($(echo "$single_use" | xargs)) that appear to be used only once — check whether each is genuinely reused across multiple declarations/selectors, composed from a v-bind() value, or swapped by a state (:hover, data-theme). If not, inline the public var(--token, default) directly at its point of use instead, per the Public token pattern rule in Claude.md's Styling Methodology (see pitfall #20 for the ServicesCard precedent), and update CONSUMER-STYLING.md/the skill doc if the token's public name or default changes."
+  fi
+fi
+
+# This library ships no demo pages — Storybook stories are the only demo surface (see Claude.md's
+# "Storybook is the only demo surface"). Flag any app/pages/ file that mentions this component,
+# whether a pre-existing leftover or a newly (re)added one.
+if [[ -d "$root/app/pages" ]]; then
+  demo_pages=$(grep -rlE "\\b${name}\\b" "$root/app/pages" 2>/dev/null | xargs)
+  if [[ -n "$demo_pages" ]]; then
+    msg="$msg Found file(s) under app/pages/ referencing $name ($demo_pages); this library has no demo pages (Storybook only) — delete them and move any demo-worthy content into the Storybook story instead."
+  fi
+fi
+
 jq -n --arg msg "$msg" '{hookSpecificOutput:{hookEventName:"PostToolUse",additionalContext:$msg}}'

package/.claude/skills/components/accordian-core.md

@@ -35,7 +35,7 @@ For `itemCount="3"` the following slots exist:
 | `name` | `string` | `undefined` | Shared `name` passed to every `ExpandingPanel`. When set, native `<details>` grouping means only one panel can be open at a time. Omit for independent panels. |
 | `itemCount` | `number` | `0` | Number of `ExpandingPanel` components to render. |
 | `animationDuration` | `number` | `300` | Expand/collapse animation duration in ms, forwarded to every panel. |
-| `variant` | `"modern" \| "classic"` | `"modern"` | `"modern"` renders each panel as `ExpandingPanel` (`::details-content`-based, Baseline "newly available" Sept 2025 — the animation itself only runs where `interpolate-size` is supported, Chromium only as of 2026). `"classic"` renders `ExpandingPanelClassic` instead (`grid-template-rows`-based, animates identically in every browser). Applies to every panel in the group — mixing variants within one `AccordianCore` isn't supported. See [expanding-panel-classic.md](expanding-panel-classic.md). |
+| `variant` | `"modern" \| "classic"` | `"classic"` | `"classic"` renders each panel as `ExpandingPanelClassic` (`grid-template-rows`-based, animates identically in every browser). `"modern"` renders `ExpandingPanel` instead (`::details-content`-based) — **known not to work correctly on WebKit (Safari/iOS)**, confirmed via real-device testing (2026-08); the animation silently fails and, worse, `contentIsOnTop` positioning never applies there. `"modern"` is opt-in for consumers who've confirmed it works for their audience, not the safe default. Applies to every panel in the group — mixing variants within one `AccordianCore` isn't supported. See [expanding-panel-classic.md](expanding-panel-classic.md) and CLAUDE.md pitfall #19. |
 | `styleClassPassthrough` | `string \| string[]` | `[]` | Extra CSS classes applied to the root `.display-accordian` element. |
 
 ---
@@ -91,10 +91,10 @@ Passing `name="faq"` groups all panels so only one can be open at a time.
 </AccordianCore>
 ```
 
-### Classic variant (animation must run in every browser)
+### Modern variant (opt-in, not WebKit-safe)
 
 ```vue
-<AccordianCore name="faq" :item-count="2" variant="classic">
+<AccordianCore name="faq" :item-count="2" variant="modern">
   <template #accordian-0-summary><span>Question one?</span></template>
   <template #accordian-0-content><p>Answer one.</p></template>
 
@@ -154,10 +154,10 @@ See [component-local-style-override.md](../component-local-style-override.md) fo
     /* Geometry */
     /* max-width: none; */ /* default is 600px — remove the width cap */
 
-    /* Panel-level overrides via the .accordian-item hook — .expanding-panel is the
-       root class rendered by the default "modern" variant; swap in
-       .expanding-panel-classic if this instance uses variant="classic" */
-    .accordian-item.expanding-panel {
+    /* Panel-level overrides via the .accordian-item hook — .expanding-panel-classic is
+       the root class rendered by the default "classic" variant; swap in .expanding-panel
+       if this instance uses variant="modern" */
+    .accordian-item.expanding-panel-classic {
       /* Border */
       /* border-block-end: 1px solid currentColor; */
 

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

@@ -0,0 +1,49 @@
+# Breadcrumb Component
+
+## Overview
+
+`Breadcrumb` renders a `<nav aria-label="Breadcrumb"><ol>...</ol></nav>` trail from an `items`
+array. Routing is delegated to the consumer: an item with a `to` renders as a `NuxtLink`; an item
+without one renders as plain text marked `aria-current="page"` (typically the last item, the
+current page).
+
+## Props
+
+| Prop | Type | Default | Required |
+|------|------|---------|----------|
+| `items` | `BreadcrumbItem[]` | — | **yes** |
+| `separator` | `string` | `"/"` | no |
+| `styleClassPassthrough` | `string \| string[]` | `[]` | no |
+
+`BreadcrumbItem` is exported from `~/types/components/breadcrumb` (and re-exported from
+`~/types/components`):
+
+```typescript
+interface BreadcrumbItem {
+  label: string;
+  to?: string;
+}
+```
+
+## Usage
+
+```vue
+<Breadcrumb
+  :items="[
+    { label: 'Services', to: '/services' },
+    { label: 'Balayage' },
+  ]"
+/>
+```
+
+Omit `to` on whichever item represents the current page — usually the last one. Every item with
+a `to` is a real link; the library never guesses which item is "current" from its position.
+
+## Notes
+
+- Component is auto-imported in Nuxt — no import needed.
+- No default content/slot — it's data-driven purely from `items`.
+- `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).
+- See `CONSUMER-STYLING.md` in the component's own folder for the full `--breadcrumb-*` token API.

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

@@ -17,6 +17,7 @@
 | `docsPageNavItems` | `DocsNavItem[]` | `[]` | Items rendered in the `docsPageNav` panel. Panel omitted entirely when empty. |
 | `docsNavLabel` | `string` | `"Navigation"` | Heading text for the `docsNav` panel's `#summary`. |
 | `docsPageNavLabel` | `string` | `"On this page"` | Heading text for the `docsPageNav` panel's `#summary`. |
+| `panelVariant` | `"modern" \| "classic"` | `"classic"` | Which panel component renders `docsNav`/`docsPageNav`: `ExpandingPanel` (`"modern"`) or `ExpandingPanelClassic` (`"classic"`, default). `"modern"` is known not to work correctly on WebKit — the mobile nav (which relies on `contentIsOnTop`) becomes unreachable there. See CLAUDE.md pitfall #19. |
 | `styleClassPassthrough` | `string \| string[]` | `[]` | Extra CSS classes applied to the root `.content-docs` element. |
 
 `DocsNavItem` (from `~/types/components`):
@@ -177,4 +178,4 @@ All `--content-docs-*` tokens can be overridden at global, page, or instance sco
 - File: `app/components/01.atoms/content-wrappers/docs-pages/ContentDocs.vue`
 - Types: `app/types/components/content-docs.d.ts` (`DocsNavItem`)
 - Tests: `app/components/01.atoms/content-wrappers/docs-pages/tests/ContentDocs.spec.ts`
-- Demo page: `app/pages/ui/layout-content-docs.vue`
+- Storybook: `app/components/01.atoms/content-wrappers/docs-pages/stories/ContentDocs.stories.ts`

package/.claude/skills/components/expanding-panel.md

@@ -4,9 +4,9 @@
 
 `ExpandingPanel` is a single expand/collapse panel built on the native `<details>`/`<summary>` element. It animates open/close by styling the `::details-content` pseudo-element (the browser's own anonymous box wrapping everything after `<summary>`) where supported, supports `v-model` for controlled state, and can be locked open with `forceOpened`. Multiple panels can be grouped into a native accordion by sharing the same `name` prop (see `AccordianCore`).
 
-**WebKit (Safari/iOS) does not support `::details-content`** as of 2026-08, confirmed via real-device testing — Chrome's device-emulation mode cannot catch this, since it's still the Blink engine underneath regardless of which browser UI it's simulating. WebKit silently drops the whole rule block: no console warning, no error, just no animation and (more seriously) `content-is-on-top`'s `position: absolute` never applying, so an overlay panel renders in normal document flow and can break the surrounding layout. Fixed 2026-08-22: `ExpandingPanel` now carries an `@supports not selector(::details-content)` fallback block that reproduces `ExpandingPanelClassic`'s `grid-template-rows` technique automatically — no consumer action needed, this works transparently on every browser. See pitfall #19 in the repo's `CLAUDE.md` for the full mechanism.
+**WebKit (Safari/iOS) does not support `::details-content`** as of 2026-08, confirmed via real-device testing — Chrome's device-emulation mode cannot catch this, since it's still the Blink engine underneath regardless of which browser UI it's simulating. WebKit silently drops the whole rule block: no animation and (more seriously) `content-is-on-top`'s `position: absolute` never applying, so an overlay panel renders in normal document flow and can break the surrounding layout. An `@supports not selector(::details-content)` CSS-only fallback was tried (2026-08-22) but didn't reliably kick in on real devices either and was reverted the same day — **do not reintroduce that approach**.
 
-`ExpandingPanelClassic` still exists as a standalone option — same props/model/slots API, always uses the `grid-template-rows` implementation with no pseudo-element dependency at all — but there's no longer a compatibility reason to prefer it over `ExpandingPanel`.
+**The actual fix is component-level, not CSS-level**: every consumer that gave `ExpandingPanel` a choice of implementation now defaults to `ExpandingPanelClassic` instead — see `AccordianCore`'s `variant` prop (default `"classic"`), `ContentDocs`'s `panelVariant` prop (default `"classic"`), and `ResponsiveHeader`/`NavigationItems`'s `panelVariant` prop (default `"classic"`). `ExpandingPanel` itself is unchanged (still `::details-content`-only, no fallback) and logs a `console.warn` in dev mode on every mount warning about this. Reach for `ExpandingPanel` directly, or pass `variant`/`panelVariant: "modern"` to one of the above, only once you've confirmed it's acceptable for your actual audience — it is **not** the safe default anywhere in this library anymore. See pitfall #19 in the repo's `CLAUDE.md` for the full history.
 
 ---
 
@@ -145,9 +145,9 @@ Always supply a meaningful `name` prop when using multiple panels on the same pa
 
 ## Styling the content when contentIsOnTop
 
-`background-color`, `padding`, and a shadow can be set directly on `.expanding-panel-content` (or on a wrapper inside the `#content` slot — either works) in browsers that support `::details-content`: the clipping boundary there is `::details-content` itself (`overflow: clip`, animated `height`), and `.expanding-panel-content` is a *child* of that box, so its own box is correctly clipped regardless of where the styling lives.
+`background-color`, `padding`, and a shadow can be set directly on `.expanding-panel-content` (or on a wrapper inside the `#content` slot — either works): the clipping boundary is `::details-content` itself (`overflow: clip`, animated `height`), and `.expanding-panel-content` is a *child* of that box, so its own box is correctly clipped regardless of where the styling lives.
 
-In the WebKit fallback path (no `::details-content` support), `.expanding-panel-content` itself is the animated grid track (`grid-template-rows: 0fr → 1fr`) and remains the element being sized — so styling placed directly on it is still clipped correctly there too. The one structural difference: the fallback wraps the `#content` slot in an internal `.inner` div (needed so a plain child's `min-height: auto` doesn't stop the row collapsing to true `0`) — this is purely an implementation detail for the collapse mechanism and isn't a styling hook; don't target `.inner` directly, style `.expanding-panel-content` or the slot's own markup instead, same as the `::details-content` path.
+If this needs to work correctly on WebKit too, use `ExpandingPanelClassic` instead (see the Overview section above) — its equivalent guidance lives in its own `CONSUMER-STYLING.md`, and its `.expanding-panel-classic-content > .inner` structure differs slightly.
 
 ---
 
@@ -213,7 +213,7 @@ See [component-local-style-override.md](../component-local-style-override.md) fo
 
 ## Notes
 
-- The open/close animation targets `::details-content` (`height: 0 → auto`, `overflow: clip`) where supported — no JS height measurement needed. Requires `interpolate-size: allow-keywords` for the height transition itself (Chromium only as of 2026; other browsers with `::details-content` support still toggle correctly, just instantly). WebKit has neither, and falls back to `ExpandingPanelClassic`'s `grid-template-rows` technique automatically (see the Overview section above) — that path animates in every browser regardless of `interpolate-size`.
+- The open/close animation targets `::details-content` (`height: 0 → auto`, `overflow: clip`) — no JS height measurement needed. Requires `interpolate-size: allow-keywords` for the height transition itself (Chromium only as of 2026; other browsers with `::details-content` support still toggle correctly, just instantly). WebKit has neither, and there is no automatic fallback — use `ExpandingPanelClassic` (see the Overview section above) for anything that needs to work correctly there.
 - `content-is-on-top` is applied to the root `.expanding-panel` element, not `.expanding-panel-content` — style overrides must scope through it, e.g. `.expanding-panel.my-panel .expanding-panel-content { ... }`.
 - When `forceOpened` is `true`, `open` stays `true` regardless of `v-model`, but `v-model` still updates internally on clicks (useful if you later set `forceOpened` back to `false`).
 - Group panels into a native accordion (only one open at a time) by passing the same `name` to multiple panels or use `AccordianCore` which handles this automatically.

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

@@ -16,6 +16,7 @@ active-route highlighting, hover indicator).
 | Prop | Type | Default | Notes |
 |------|------|---------|-------|
 | `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. |
 | `styleClassPassthrough` | `string \| string[]` | `[]` | Extra CSS classes applied to the root `.overflow-navigation-wrapper` element. |
 
 ---

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

@@ -106,6 +106,7 @@ buggy toggle-based version too.
 | `collapseBreakpoint` | `number \| null` | `null` | A fixed pixel width below which the whole main nav collapses into the overflow burger, instead of the default per-item responsive collapse. |
 | `collapseAtMainNavIntersection` | `boolean` | `false` | Like `collapseBreakpoint`, but the breakpoint is derived automatically from the main nav's own measured width rather than a fixed number. |
 | `allowExpandOnGesture` | `boolean` | `true` | When `true`, hovering/focusing a dropdown summary opens it (in addition to click). When `false`, only click toggles it. |
+| `panelVariant` | `"modern" \| "classic"` | `"classic"` | Forwarded to `NavigationItems` for its dropdown submenu panels: `ExpandingPanel` (`"modern"`) or `ExpandingPanelClassic` (`"classic"`, default). `"modern"` is known not to work correctly on WebKit. See CLAUDE.md pitfall #19. |
 | `styleClassPassthrough` | `string \| string[]` | `[]` | Extra CSS classes applied to the root `.navigation` element. |
 
 ## Slots

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

@@ -0,0 +1,156 @@
+# ServiceDetail Component
+
+## Overview
+
+`ServiceDetail` renders a single service as a full, standalone detail page: a full-bleed hero
+banner (breadcrumb, eyebrow, title, price/duration pills over the service image), a two-column
+body (long-form content in the main column, a sticky sidebar booking card + "You may also like"
+related-services list), and a closing full-width CTA banner. The process steps reuse
+[StepperList](stepper-list.md) (numbered circle indicators with connectors) rather than bespoke
+markup — Ideal For and FAQs are still bespoke (2-column card grid, plain Q&A list) since neither
+matches an existing molecule as directly.
+
+It is a different shape from [ServicesSection](services-section.md): `ServicesSection` renders
+image-beside-content (used both as a compact summary card in a list and, in full mode, as a
+same-page detail block); `ServiceDetail` is meant to *be* the whole page for one service —
+`headerTag` defaults to `"h1"` accordingly, and there is no summary/compact mode. There is no
+`isSummary` prop and no `v-if` gating of content — everything the component renders is always
+rendered.
+
+## Props
+
+| Prop | Type | Default | Required |
+|------|------|---------|----------|
+| `serviceData` | `Service` | — | **yes** |
+| `tag` | `"div" \| "section" \| "article" \| "main"` | `"div"` | no |
+| `headerTag` | `"h1" \| "h2" \| "h3"` | `"h1"` | no |
+| `subheadingTag` | `"h2" \| "h3"` | `"h2"` | no |
+| `breadcrumbItems` | `BreadcrumbItem[]` | auto-built from `serviceData` | no |
+| `processHeading` | `string` | `"The Process"` | no |
+| `idealForHeading` | `string` | `"Ideal For"` | no |
+| `maintenanceHeading` | `string` | `"Aftercare & Maintenance"` | no |
+| `faqsHeading` | `string` | `"Frequently Asked Questions"` | no |
+| `bookingHeading` | `string` | `"Book This Service"` | no |
+| `priceLabel` | `string` | `"Price"` | no |
+| `durationLabel` | `string` | `"Duration"` | no |
+| `locationLabel` | `string` | `"Location"` | no |
+| `location` | `string` | `undefined` | no |
+| `relatedServicesHeading` | `string` | `"You May Also Like"` | no |
+| `relatedServices` | `Service[]` | `[]` | no |
+| `finalCtaHeading` | `string` | `"Ready to book your appointment?"` | no |
+| `finalCtaBody` | `string` | `"Get in touch to book your appointment."` | no |
+| `imageLoading` | `"eager" \| "lazy"` | `"eager"` | no |
+| `imageFetchPriority` | `"high" \| "auto" \| "low"` | `"high"` | no |
+| `styleClassPassthrough` | `string \| string[]` | `[]` | no |
+
+`location` and `relatedServices` are **props on ServiceDetail, not fields on the shared `Service`
+type** — neither is universal enough to belong on `~/types/types.services`. The location row and
+the whole "You may also like" block simply don't render when they're omitted.
+
+`imageLoading`/`imageFetchPriority` default to eager/high because a `ServiceDetail` page normally
+has exactly one hero image and it's always the LCP candidate — unlike `ServicesSection`, which is
+often looped and needs the `index` prop to lazy-load everything past the first two instances.
+
+### `headerTag` vs `subheadingTag`
+
+Unlike `ServicesSection` (one `headerTag` prop applied to every heading, title included),
+`ServiceDetail` splits these: `headerTag` controls only the hero `<h1>` title; `subheadingTag`
+controls every other heading (What Is It, Process, Ideal For, Aftercare, FAQs, final CTA heading).
+This keeps the page's heading hierarchy correct when `ServiceDetail` is the page's own `<h1>`.
+
+The FAQ question itself is a hardcoded `<h3>` — if you set `subheadingTag="h3"`, FAQ questions
+end up at the same level as the FAQs section heading rather than one below it.
+
+### `breadcrumbItems`
+
+Defaults to a plain, non-linked two-item trail built from `serviceData.category` and
+`serviceData.title` when omitted. Pass real routes once your app's URL structure is known:
+
+```vue
+<ServiceDetail
+  :service-data="service"
+  :breadcrumb-items="[
+    { label: 'Services', to: '/services' },
+    { label: service.title },
+  ]"
+/>
+```
+
+## Slots
+
+| Slot | Slot props | Purpose |
+|------|-----------|---------|
+| `book-cta` | `{ serviceData: Service }` | Booking button inside the sidebar's booking card |
+| `sidebar-note` | — | Freeform note under the booking button (e.g. patch-test wording) — empty by default, deliberately not hardcoded since this library also serves non-hair-and-beauty apps |
+| `related-service` | `{ service: Service, index: number }` | Replaces one related-service item's whole default (non-clickable) thumbnail/title/price markup — use to wrap it in a real link |
+| `final-cta` | `{ serviceData: Service }` | Button in the closing full-width CTA banner |
+
+All routing decisions (breadcrumb links, book-cta href, related-service links, final-cta href)
+are delegated to the consumer, matching `ServicesSection`'s slot-based routing pattern.
+
+## Usage
+
+```vue
+<ServiceDetail
+  :service-data="service"
+  location="Mobile — across Bath"
+  :related-services="relatedServices"
+>
+  <template #book-cta>
+    <InputButtonCore tag="a" href="/contact" button-text="Book now" variant="primary" />
+  </template>
+  <template #sidebar-note>
+    A patch test is required at least 48 hours before any colour treatment.
+  </template>
+  <template #related-service="{ service: related }">
+    <NuxtLink :to="`/services/${related.slug}`">{{ related.title }} — {{ related.price }}</NuxtLink>
+  </template>
+  <template #final-cta>
+    <InputButtonCore tag="a" href="/contact" button-text="Book now" variant="secondary" />
+  </template>
+</ServiceDetail>
+```
+
+## Local style override scaffold
+
+```vue
+<ServiceDetail :style-class-passthrough="['my-service-page']" :service-data="service">
+  ...
+</ServiceDetail>
+
+<style>
+/* ─── ServiceDetail local overrides ──────────────────────────────
+   Colours, borders, geometry only — do not override behaviour.
+   Delete this block if no overrides are needed.
+   ─────────────────────────────────────────────────────────────────── */
+.service-detail {
+  &.my-service-page {
+    --service-detail-hero-border-radius: 1.2rem;
+    --service-detail-process-index-colour: var(--brand-accent);
+  }
+}
+</style>
+```
+
+See [component-local-style-override.md](../component-local-style-override.md) for the general
+pattern, and `CONSUMER-STYLING.md` in the component's own folder for the full token API.
+
+## Notes
+
+- Component is auto-imported in Nuxt — no import needed.
+- The `Service` type is imported from `~/types/types.services`; `BreadcrumbItem` from
+  `~/types/components/breadcrumb`.
+- No `isSummary` mode and no content gating — this component always renders everything it's
+  given. If you need a compact summary card for a services listing page, use
+  [ServicesSection](services-section.md) in summary mode or [ServicesCard](services-card.md)
+  instead, and reserve `ServiceDetail` for the individual `/services/[slug]` page.
+- Uses [Breadcrumb](breadcrumb.md) internally for the hero banner breadcrumb.
+- The two-/three-column layout breakpoints (body columns, ideal-for grid, final CTA row) are
+  `@container` queries against the component's own width, not the viewport.
+- Internal element classes are BEM-namespaced under `service-detail__*` (`service-detail__hero`,
+  `service-detail__process`, `service-detail__sidebar`, `service-detail__related`, etc.) — see
+  `CONSUMER-STYLING.md` for the full list alongside their tokens.
+- The section gets `aria-labelledby` automatically when `tag` is `"section"`, `"article"`, or
+  `"aside"`, pointing at the id `ServiceDetail` binds to its own title `HeroText` internally —
+  same mechanism as `ServicesSection`. `tag="main"` renders a `<main>` element but is never
+  auto-labelled.

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

@@ -12,7 +12,7 @@
 | `tag`                   | `"div" \| "section" \| "main"`    | `"div"`                          | no       |
 | `eyebrowConfig`         | `EyebrowConfig`                   | `{}`                             | no       |
 | `heroConfig`            | `HeroConfig`                      | `{}`                             | no       |
-| `hrefBase`              | `string`                          | `"/ui/services/services-section/"` | no     |
+| `hrefBase`              | `string`                          | `"/services/"`                    | no     |
 | `buttonTextPrefix`      | `string`                          | `"Enquire about"`                | no       |
 | `styleClassPassthrough` | `string \| string[]`              | `[]`                             | no       |
 
@@ -38,8 +38,8 @@ Set on `.services-card-grid` (or scoped to a page class):
 
 | Token                  | Default   | Controls                              |
 | ---------------------- | --------- | ------------------------------------- |
-| `--_gap`               | `4rem`    | Gap between grid cells                |
-| `--_column-min-width`  | `250px`   | Minimum column width before wrapping  |
+| `--services-card-grid-gap`               | `4rem`    | Gap between grid cells                |
+| `--services-card-grid-column-min-width`  | `250px`   | Minimum column width before wrapping  |
 
 ## Consumer page boilerplate
 
@@ -87,13 +87,13 @@ if (servicesData.value.length === 0) {
 .page-services {
   /* Page-level CSS token overrides — delete any you don't need */
   .services-card-grid {
-    --_gap: 4rem;
-    --_column-min-width: 250px;
+    --services-card-grid-gap: 4rem;
+    --services-card-grid-column-min-width: 250px;
 
     .services-card {
-      --_eyebrow-text-margin-block: 0.8rem 0;
-      --_hero-text-margin-block: 2rem 1rem;
-      --_description-text-colour: var(--colour-text-secondary);
+      --eyebrow-text-padding-block: 0.8rem 0;
+      --hero-text-padding-block: 2rem 1rem;
+      --description-text-colour: var(--colour-text-secondary);
     }
   }
 }
@@ -104,6 +104,6 @@ if (servicesData.value.length === 0) {
 
 - Component is auto-imported in Nuxt — no import needed.
 - The `Service` type is imported from `~/types/types.services`.
-- Uses `repeat(auto-fit, minmax(var(--_column-min-width), 1fr))` — columns grow to fill available space and wrap when below the minimum width.
+- Uses `repeat(auto-fit, minmax(var(--services-card-grid-column-min-width, 250px), 1fr))` — 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.
 - Data fetching is the page's responsibility — pass an empty array as fallback while loading (`servicesData ?? []`).

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

@@ -2,51 +2,69 @@
 
 ## Overview
 
-`ServicesCard` renders a single service as a portrait card: image, subtitle (eyebrow), title, short description, 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.
+`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.
 
 ## Props
 
-| Prop                    | Type                              | Default | Required |
-| ----------------------- | --------------------------------- | ------- | -------- |
-| `serviceData`           | `Service`                         | —       | **yes**  |
-| `tag`                   | `"div" \| "section" \| "article"` | `"div"` | no       |
-| `eyebrowConfig`         | `EyebrowConfig`                   | `{}`    | no       |
-| `heroConfig`            | `HeroConfig`                      | `{}`    | no       |
-| `styleClassPassthrough` | `string \| string[]`              | `[]`    | no       |
+| Prop                    | Type                              | Default     | Required |
+| ----------------------- | ---------------------------------- | ----------- | -------- |
+| `serviceData`           | `Service`                          | —           | **yes**  |
+| `tag`                   | `"div" \| "section" \| "article"` | `"div"`     | no       |
+| `href`                  | `string`                           | `undefined` | no       |
+| `external`              | `boolean`                          | `false`     | no       |
+| `eyebrowConfig`         | `EyebrowConfig`                    | `{}`        | no       |
+| `heroConfig`            | `HeroConfig`                       | `{}`        | no       |
+| `durationText`          | `string`                           | `undefined` | no       |
+| `priceText`             | `string`                           | `undefined` | no       |
+| `styleClassPassthrough` | `string \| string[]`               | `[]`        | no       |
+
+### Meta row (`durationText` / `priceText`)
+
+A row below the description shows duration (left) and price (right), separated by a top divider. It defaults to `serviceData.duration`/`serviceData.price` — `durationText`/`priceText` props override that text, and the `duration`/`price` slots (see Slots below) fully replace the content (e.g. to add an icon). The row is omitted entirely when there's no duration/price text and no slot content on either side.
+
+### Whole-card clickable (`href`)
+
+When `href` is set **and no `actions` slot content is provided**, the root element switches from `tag` to a link (`NuxtLink` for an internal href starting with `/`, a plain `a` otherwise) and the whole card becomes clickable — matching `InputButtonCore`'s link-resolution pattern. `external` forces a plain `a` tag even for an internal-looking href (e.g. a Nitro server route like `/api/auth/github`).
+
+If an `actions` slot is provided, the card stays as a static `tag` element (no href rendered) even when `href` is set — this avoids nesting another interactive element (e.g. a button/link in `actions`) inside the card's own anchor, which would be invalid HTML. Use the `href` mode for a plain "whole card links out" card with no separate CTA, and the `actions`-slot mode (see Basic usage below) when the card needs its own button/link.
+
+`is-clickable` is added to the root class list when whole-card-clickable mode is active, giving `cursor: pointer` and removing default link colour/underline. It's also what gates the border/outline hover/focus interaction-state tokens — see "Interaction states (whole-card-clickable only)" in `CONSUMER-STYLING.md`; they're a no-op when the card isn't clickable, since only `.is-clickable` has a `:hover`/`:focus-visible` rule.
 
 ### EyebrowConfig
 
-| Key        | Type                              | Default    |
-| ---------- | --------------------------------- | ---------- |
-| `tag`      | `"p" \| "div" \| "span"`         | `"div"`    |
-| `fontSize` | `"large" \| "medium" \| "small"` | `"large"`  |
+| Key        | Type                              | Default   |
+| ---------- | ---------------------------------- | --------- |
+| `tag`      | `"p" \| "div" \| "span"`          | `"div"`   |
+| `fontSize` | `"large" \| "medium" \| "small"`  | `"large"` |
 
 ### HeroConfig
 
-| Key        | Type                                                           | Default     |
-| ---------- | -------------------------------------------------------------- | ----------- |
-| `tag`      | `"h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6"`              | `"h2"`      |
+| Key        | Type                                                            | Default     |
+| ---------- | ----------------------------------------------------------------- | ----------- |
+| `tag`      | `"h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6"`                  | `"h2"`      |
 | `fontSize` | `"display" \| "title" \| "heading" \| "subheading" \| "label"` | `"heading"` |
 
 Config objects are partial — only specify the keys you want to override. Unset keys fall back to the defaults shown above.
 
 ## Slots
 
-| Slot      | Slot props                 | Purpose                                                                |
-| --------- | -------------------------- | ---------------------------------------------------------------------- |
-| `actions` | `{ serviceData: Service }` | CTA area below the description — buttons, links, or any action content |
+| Slot       | Slot props                 | Purpose                                                                                                 |
+| ---------- | --------------------------- | --------------------------------------------------------------------------------------------------------- |
+| `duration` | `{ serviceData: Service }` | Replaces the duration (left) side of the meta row; defaults to `durationText`/`serviceData.duration` |
+| `price`    | `{ serviceData: Service }` | Replaces the price (right) side of the meta row; defaults to `priceText`/`serviceData.price`         |
+| `actions`  | `{ serviceData: Service }` | CTA area below the meta row — buttons, links, or any action content                                    |
 
-The `actions` slot receives `serviceData` as a scoped prop so the consumer can construct routes or labels from the service data without additional props.
+All three slots receive `serviceData` as a scoped prop so the consumer can construct routes, labels, or formatted text from the service data without additional props.
 
 ## CSS custom properties
 
-Set on `.services-card` (or scoped to a page class):
-
-| Token                          | Default                       | Controls                        |
-| ------------------------------ | ----------------------------- | ------------------------------- |
-| `--_eyebrow-text-margin-block` | `0.8rem 0`                    | Space above/below the eyebrow   |
-| `--_hero-text-margin-block`    | `2rem 1rem`                   | Space above/below the title     |
-| `--_description-text-colour`   | `var(--colour-text-secondary)` | Description paragraph colour    |
+Prefer the `--services-card-*`/`--image-wrapper-*`/`--details-wrapper-*`/`--description-*`/`--meta-*`/`--footer-*`
+CSS custom properties documented in `CONSUMER-STYLING.md` (in the component's own folder) over
+raw class overrides — it lists every token, its default, which ones have a global `:root`
+fallback vs. page-scoped-only, and worked examples for global theming, page-scoped overrides,
+and per-instance overrides via `styleClassPassthrough`. For anything the tokens don't cover,
+scaffold a style block using `styleClassPassthrough` instead — see
+[component-local-style-override.md](../component-local-style-override.md) for the general pattern.
 
 ## Basic usage
 
@@ -80,6 +98,24 @@ Set on `.services-card` (or scoped to a page class):
 </ServicesCard>
 ```
 
+## With custom meta row content
+
+```vue
+<ServicesCard :service-data="service">
+  <template #duration="{ serviceData }">
+    <Icon name="mdi:clock-time-four-outline" class="icon" />
+    <span>{{ serviceData.duration }}</span>
+  </template>
+  <template #price="{ serviceData }">
+    <Icon name="mdi:currency-gbp" class="icon" />
+    <span>From {{ serviceData.price }}</span>
+  </template>
+  <template #actions="{ serviceData }">
+    <InputButtonCore variant="secondary" :button-text="`Enquire`" :href="`/services/${serviceData.slug}`" />
+  </template>
+</ServicesCard>
+```
+
 ## Consumer page boilerplate
 
 ```vue
@@ -107,18 +143,34 @@ Set on `.services-card` (or scoped to a page class):
 <style lang="css">
 .page-my-page {
   .services-card {
-    --_eyebrow-text-margin-block: 0.8rem 0;
-    --_hero-text-margin-block: 2rem 1rem;
-    --_description-text-colour: var(--colour-text-secondary);
+    --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);
   }
 }
 </style>
 ```
 
+See `CONSUMER-STYLING.md` for the full token list — every token is a plain public custom property
+consumed directly at its point of use (no `--_`-prefixed private indirection layer), so all of
+them work both globally (`:root`) and scoped like the example above.
+
+## Whole-card clickable usage
+
+```vue
+<ServicesCard :service-data="service" :href="`/services/${service.slug}`" />
+```
+
+No `actions` slot — the entire card renders as an anchor (`NuxtLink` for the internal href here) and is clickable anywhere within it.
+
 ## Notes
 
 - Component is auto-imported in Nuxt — no import needed.
 - The `Service` type is imported from `~/types/types.services`.
-- Grid rows are sized `auto auto auto 5lh auto` — the `5lh` row locks description height so actions align across cards.
+- 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.
+- `.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 `InputButtonCore`'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.

package/.claude/skills/index.md

@@ -48,7 +48,7 @@ Each skill is a single markdown file named `<area>-<task>.md`.
 ├── vercel-node-version.md            — .nvmrc pinned to Node 24 is required; without it Vercel uses npm 10 which crashes on versionless optional stubs
 ├── robots-env-aware.md               — @nuxtjs/robots: allow crawling on prod domain only, block on preview/staging via env var
 ├── new-app-scaffold.md               — scaffold a new Nuxt consumer app extending this layer (package.json, nuxt.config, app structure, CLAUDE.md)
-├── qa-panel.md                       — collapsible panel for toggling component props live on a page (always on for /pages/ui/ demo pages; gate with isDev in consuming apps)
+├── qa-panel.md                       — collapsible panel for toggling component props live on a page, for consuming apps' own pages (gate with isDev unless demo-only); this library's own demos live in Storybook
 ├── pull-request-description.md       — produce a PR description as a fenced markdown block from git diff vs main
 ├── using-component-skills.md         — discover and use component skills in consumer apps: where skills land, browsing patterns, workflow for deciding build vs. compose
 ├── composable-canonical-url.md       — useCanonicalUrl: set <link rel="canonical"> from runtimeConfig.public.canonicalHost; layout setup, node types
@@ -71,6 +71,8 @@ Each skill is a single markdown file named `<area>-<task>.md`.
     ├── services-card-grid.md        — ServicesCardGrid props, config pass-through, CSS tokens, full page boilerplate
     ├── services-section-grid.md     — ServicesSectionGrid props, useAlternateReverse zigzag layout, page boilerplate
     ├── services-section.md          — ServicesSection props (incl. heading/CTA copy), summary-link/cta/cta-panel slots, summary vs full mode
+    ├── service-detail.md            — ServiceDetail: full service detail page (hero banner, sticky sidebar booking card + related services, closing CTA), headerTag vs subheadingTag split, book-cta/sidebar-note/related-service/final-cta slots
+    ├── breadcrumb.md                — Breadcrumb: items (BreadcrumbItem[]) trail, link vs current-page text, CSS token API
     ├── contact-section.md      — ContactSection props (stepperIndicatorSize pass-through), 3-item info+form layout, slot API
     ├── stepper-list.md         — StepperList dynamic slots (item-{n}/indicator-{n}), props, connector behaviour
     ├── expanding-panel.md      — ExpandingPanel v-model, forceOpened, contentIsOnTop overlay mode, slots (summary/icon/content), ARIA wiring, CSS token API