srcdev-nuxt-components 9.3.7 → 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/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

@@ -178,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/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

package/.claude/skills/qa-panel.md

@@ -2,7 +2,7 @@
 
 ## Overview
 
-A collapsible panel that lets you toggle component props live on a page — without touching the component or breaking the visual layout. Uses a native `<details>`/`<summary>` so it takes up no space when collapsed. Every page under `app/pages/ui/` in this library is a demo-only page already, so the panel always renders there — no `isDev` gate needed. If you add one to a page in a consuming app that also serves real production traffic, gate it behind that app's own dev/staging check.
+A collapsible panel that lets you toggle component props live on a page — without touching the component or breaking the visual layout. Uses a native `<details>`/`<summary>` so it takes up no space when collapsed. This library no longer ships its own demo pages (`app/pages/`) — component demos live entirely in Storybook now, which has its own live prop-toggling via args/controls, so this panel isn't needed there. It's still useful in a **consuming app's own pages**: gate it behind that app's dev/staging check unless the page is genuinely demo-only.
 
 ## Structure
 
@@ -218,7 +218,7 @@ Scope inside your page body class (e.g. `.my-page`) so styles don't bleed. The p
 
 ## Notes
 
-- **Consuming apps on real production traffic**: if the page hosting the panel isn't demo-only (unlike everything under `app/pages/ui/` in this library), gate the panel with that app's own dev/staging check, e.g. `v-if="isDev"` with `const isDev = import.meta.dev;`. `import.meta.dev` is `false` in production builds, so the gated block is tree-shaken with no runtime cost.
+- **Consuming apps on real production traffic**: if the page hosting the panel isn't demo-only, gate the panel with that app's own dev/staging check, e.g. `v-if="isDev"` with `const isDev = import.meta.dev;`. `import.meta.dev` is `false` in production builds, so the gated block is tree-shaken with no runtime cost.
 - **Consuming apps**: The active chip color (`oklch(55% 0.18 240)`) is a neutral blue. Replace with a brand accent token if preferred: `background: var(--color-brand-accent)`.
 - **Panel placement**: Outside any `overflow: hidden` or clipping container, otherwise the panel may be clipped or push layout unexpectedly. Placing it as a direct sibling of the component row works well.
 - **Computed CSS vars**: When a prop controls a CSS custom property (e.g. max-height tiers), use a `computed` that returns a style object and bind it with `:style` on the component wrapper:

package/.vscode/srcdev-component-breadcrumb.code-snippets

@@ -0,0 +1,14 @@
+{
+  "SRCDEV Breadcrumb": {
+    "description": "Breadcrumb trail — items without a `to` render as plain current-page text",
+    "scope": "vue,html",
+    "body": [
+      "<Breadcrumb",
+      "  :items=\"[",
+      "    { label: '$1Services', to: '$2/services' },",
+      "    { label: '$3${TM_FILENAME_BASE}' },",
+      "  ]\"",
+      "/>"
+    ]
+  }
+}

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

@@ -0,0 +1,49 @@
+{
+  "SRCDEV ServiceDetail": {
+    "description": "ServiceDetail full page — hero banner, content, sticky sidebar, closing CTA",
+    "scope": "vue,html",
+    "body": [
+      "<ServiceDetail",
+      "  :service-data=\"$1service\"",
+      "  location=\"$2Mobile — across Bath\"",
+      "  :related-services=\"$3relatedServices\"",
+      ">",
+      "  <template #book-cta>",
+      "    <button type=\"button\">$4Book Now</button>",
+      "  </template>",
+      "  <template #sidebar-note>",
+      "    $5",
+      "  </template>",
+      "  <template #final-cta>",
+      "    <button type=\"button\">$6Book Now</button>",
+      "  </template>",
+      "</ServiceDetail>"
+    ]
+  },
+  "SRCDEV ServiceDetail Custom Breadcrumb": {
+    "description": "ServiceDetail with explicit breadcrumb routes instead of the auto-built category/title trail",
+    "scope": "vue,html",
+    "body": [
+      "<ServiceDetail",
+      "  :service-data=\"$1service\"",
+      "  :breadcrumb-items=\"[",
+      "    { label: '$2Services', to: '$3/services' },",
+      "    { label: '$4${TM_FILENAME_BASE}' },",
+      "  ]\"",
+      ">",
+      "  <template #book-cta>",
+      "    <button type=\"button\">$5Book Now</button>",
+      "  </template>",
+      "</ServiceDetail>"
+    ]
+  },
+  "SRCDEV ServiceDetail Related Service Link Slot": {
+    "description": "ServiceDetail related-service scoped slot — wraps each related item in a real link",
+    "scope": "vue,html",
+    "body": [
+      "<template #related-service=\"{ service }\">",
+      "  <NuxtLink :to=\"`/services/${service.slug}`\">$1{{ service.title }}</NuxtLink>",
+      "</template>"
+    ]
+  }
+}