srcdev-nuxt-components 9.3.7 → 9.3.9

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

@@ -0,0 +1,108 @@
+{
+  "SRCDEV ServicesCard Basic": {
+    "description": "ServicesCard basic usage with actions slot",
+    "scope": "vue,html",
+    "body": [
+      "<ServicesCard :service-data=\"$1service\">",
+      "  <template #actions=\"{ serviceData }\">",
+      "    <InputButtonCore",
+      "      variant=\"secondary\"",
+      "      :button-text=\"`More about ${serviceData.title}`\"",
+      "      :href=\"`/services/${serviceData.slug}`\"",
+      "    >",
+      "      <template #right>",
+      "        <Icon name=\"mdi:arrow-right\" class=\"icon\" />",
+      "      </template>",
+      "    </InputButtonCore>",
+      "  </template>",
+      "</ServicesCard>"
+    ]
+  },
+  "SRCDEV ServicesCard Whole Card Clickable": {
+    "description": "ServicesCard with href and no actions slot — whole card is clickable",
+    "scope": "vue,html",
+    "body": [
+      "<ServicesCard :service-data=\"$1service\" :href=\"`/services/${$1service.slug}`\" />"
+    ]
+  },
+  "SRCDEV ServicesCard With Config Overrides": {
+    "description": "ServicesCard with eyebrowConfig/heroConfig overrides",
+    "scope": "vue,html",
+    "body": [
+      "<ServicesCard",
+      "  :service-data=\"$1service\"",
+      "  :eyebrow-config=\"{ fontSize: '$2small' }\"",
+      "  :hero-config=\"{ tag: '$3h3', fontSize: '$4title' }\"",
+      ">",
+      "  <template #actions=\"{ serviceData }\">",
+      "    <InputButtonCore variant=\"secondary\" button-text=\"$5Enquire\" :href=\"`/services/${serviceData.slug}`\" />",
+      "  </template>",
+      "</ServicesCard>"
+    ]
+  },
+  "SRCDEV ServicesCard With Custom Meta Row": {
+    "description": "ServicesCard with custom duration/price slot content (e.g. icons)",
+    "scope": "vue,html",
+    "body": [
+      "<ServicesCard :service-data=\"$1service\">",
+      "  <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=\"$2Enquire\" :href=\"`/services/${serviceData.slug}`\" />",
+      "  </template>",
+      "</ServicesCard>"
+    ]
+  },
+  "SRCDEV ServicesCard CSS Override": {
+    "description": "CSS override scaffold for ServicesCard — scope to a page or section class. See CONSUMER-STYLING.md for the full token list.",
+    "scope": "css",
+    "body": [
+      ".$1my-page {",
+      "  .services-card {",
+      "    /* Public tokens — could also be set globally on :root instead */",
+      "    /* Interaction states — only visible in whole-card-clickable mode (is-clickable) */",
+      "    --services-card-border-radius: ;",
+      "    --services-card-border-width: ;",
+      "    --services-card-border-colour: ;",
+      "    --services-card-border-colour-hover: ;",
+      "    --services-card-outline-width: ;",
+      "    --services-card-outline-colour: ;",
+      "    --services-card-outline-colour-hover: ;",
+      "    --services-card-outline-offset: ;",
+      "    --services-card-outline-offset-hover: ;",
+      "",
+      "    --services-card-gap: ;",
+      "    --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: ;",
+      "    --description-padding-block: ;",
+      "    --description-line-height: ;",
+      "    --description-line-clamp: ;",
+      "    --meta-padding-block: ;",
+      "    --meta-text-transform: ;",
+      "    --footer-padding-block: ;",
+      "    --footer-wrapper-grid-gap: ;",
+      "",
+      "    /* Local-only tokens — page-scoped override only, no :root fallback */",
+      "    --_eyebrow-text-padding-block: ;",
+      "    --_hero-text-padding-block: ;",
+      "    --_description-text-colour: ;",
+      "    --_meta-border-colour: ;",
+      "    --_meta-text-colour: ;",
+      "    --_meta-font-size: ;",
+      "  }",
+      "}"
+    ]
+  }
+}

package/app/components/01.atoms/navigation/breadcrumb/Breadcrumb.vue

@@ -0,0 +1,94 @@
+<template>
+  <nav class="breadcrumb" :class="[elementClasses]" aria-label="Breadcrumb">
+    <ol class="breadcrumb__list">
+      <li v-for="(item, index) in items" :key="`${item.label}-${index}`" class="breadcrumb__item">
+        <NuxtLink v-if="item.to" :to="item.to" class="breadcrumb__link">{{ item.label }}</NuxtLink>
+        <span v-else class="breadcrumb__label" :aria-current="index === items.length - 1 ? 'page' : undefined">{{
+          item.label
+        }}</span>
+        <span v-if="index < items.length - 1" class="breadcrumb__separator" aria-hidden="true">{{ separator }}</span>
+      </li>
+    </ol>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import type { BreadcrumbItem } from "~/types/components/breadcrumb";
+
+interface Props {
+  items: BreadcrumbItem[];
+  separator?: string;
+  styleClassPassthrough?: string | string[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  separator: "/",
+  styleClassPassthrough: () => [],
+});
+
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+watch(
+  () => props.styleClassPassthrough,
+  () => {
+    resetElementClasses(props.styleClassPassthrough);
+  }
+);
+</script>
+
+<style lang="css">
+@layer components {
+  .breadcrumb {
+    --_font-size: var(--breadcrumb-font-size, 1.3rem);
+    --_gap: var(--breadcrumb-gap, 0.8rem);
+    --_text-transform: var(--breadcrumb-text-transform, uppercase);
+    --_letter-spacing: var(--breadcrumb-letter-spacing, 0.05em);
+    --_colour: var(--breadcrumb-colour, currentColor);
+    --_colour-current: var(--breadcrumb-colour-current, var(--breadcrumb-colour, currentColor));
+    --_link-decoration-hover: var(--breadcrumb-link-decoration-hover, underline);
+
+    font-size: var(--_font-size);
+    text-transform: var(--_text-transform);
+    letter-spacing: var(--_letter-spacing);
+
+    .breadcrumb__list {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: var(--_gap);
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    }
+
+    .breadcrumb__item {
+      display: flex;
+      align-items: center;
+      gap: var(--_gap);
+    }
+
+    .breadcrumb__link,
+    .breadcrumb__label {
+      color: var(--_colour);
+    }
+
+    .breadcrumb__label[aria-current="page"] {
+      color: var(--_colour-current);
+    }
+
+    .breadcrumb__link {
+      text-decoration: none;
+
+      &:hover,
+      &:focus-visible {
+        text-decoration: var(--_link-decoration-hover);
+      }
+    }
+
+    .breadcrumb__separator {
+      color: var(--_colour);
+      opacity: 0.6;
+    }
+  }
+}
+</style>

package/app/components/01.atoms/navigation/breadcrumb/CONSUMER-STYLING.md

@@ -0,0 +1,32 @@
+# Breadcrumb — Consumer Styling Guide
+
+## Public token API
+
+| Token | Default | Controls |
+|---|---|---|
+| `--breadcrumb-font-size` | `1.3rem` | Font size of the whole trail |
+| `--breadcrumb-gap` | `0.8rem` | Gap between an item's label and its separator, and between items |
+| `--breadcrumb-text-transform` | `uppercase` | Text transform of the whole trail |
+| `--breadcrumb-letter-spacing` | `0.05em` | Letter spacing of the whole trail |
+| `--breadcrumb-colour` | `currentColor` | Colour of links, separators, and non-current labels |
+| `--breadcrumb-colour-current` | `currentColor` | Colour of the current-page item (the one without a `to`) |
+| `--breadcrumb-link-decoration-hover` | `underline` | `text-decoration` on link hover/focus |
+
+```css
+.breadcrumb {
+  --breadcrumb-colour: white;
+  --breadcrumb-colour-current: var(--colour-text-accent);
+}
+```
+
+## Text content — props, not CSS
+
+`items` and `separator` are props. There is no hardcoded copy to override in CSS.
+
+## Notes
+
+- An item renders as a `NuxtLink` when it has a `to`, otherwise as `<span aria-current="page">` —
+  omit `to` on whichever item represents the current page (usually the last one).
+- The separator (`aria-hidden="true"`) is only rendered between items, never after the last one.
+- `--breadcrumb-colour` is what `ServiceDetail` overrides internally (to `white` by default) so
+  the breadcrumb reads over its hero image — see `ServiceDetail`'s `CONSUMER-STYLING.md`.

package/app/components/01.atoms/navigation/breadcrumb/stories/Breadcrumb.stories.ts

@@ -0,0 +1,87 @@
+import Breadcrumb from "../Breadcrumb.vue";
+import type { Meta, StoryObj } from "@nuxtjs/storybook";
+import type { BreadcrumbItem } from "~/types/components/breadcrumb";
+
+const meta: Meta<typeof Breadcrumb> = {
+  title: "Atoms/Navigation/Breadcrumb",
+  component: Breadcrumb,
+  argTypes: {
+    items: {
+      control: "object",
+      description: "Ordered list of { label, to? } — items without `to` render as plain text (typically the last, current-page item)",
+    },
+    separator: {
+      control: "text",
+      description: "Character or short string rendered between items",
+    },
+    styleClassPassthrough: {
+      control: "object",
+      description: "Additional CSS classes applied to the root element",
+    },
+  },
+  args: {
+    separator: "/",
+    styleClassPassthrough: [],
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Renders a `<nav aria-label=\"Breadcrumb\">` trail from an items array. Any item with a `to` renders as a NuxtLink; an item without one renders as plain text marked `aria-current=\"page\"` — routing decisions stay with the consumer, same as the rest of this library.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Breadcrumb>;
+
+// ─── Fixtures ─────────────────────────────────────────────────────────────────
+
+const items: BreadcrumbItem[] = [
+  { label: "Services", to: "/services" },
+  { label: "Balayage" },
+];
+
+// ─── Stories ──────────────────────────────────────────────────────────────────
+
+export const Default: Story = {
+  args: { items },
+  render: (args) => ({
+    components: { Breadcrumb },
+    setup() {
+      return { args };
+    },
+    template: `<Breadcrumb v-bind="args" />`,
+  }),
+};
+
+export const ThreeLevels: Story = {
+  name: "Three Levels",
+  args: {
+    items: [
+      { label: "Home", to: "/" },
+      { label: "Services", to: "/services" },
+      { label: "Balayage" },
+    ],
+  },
+  render: (args) => ({
+    components: { Breadcrumb },
+    setup() {
+      return { args };
+    },
+    template: `<Breadcrumb v-bind="args" />`,
+  }),
+};
+
+export const CustomSeparator: Story = {
+  name: "Custom Separator",
+  args: { items, separator: ">" },
+  render: (args) => ({
+    components: { Breadcrumb },
+    setup() {
+      return { args };
+    },
+    template: `<Breadcrumb v-bind="args" />`,
+  }),
+};

package/app/components/01.atoms/navigation/breadcrumb/tests/Breadcrumb.spec.ts

@@ -0,0 +1,87 @@
+import { describe, it, expect } from "vitest";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import Breadcrumb from "../Breadcrumb.vue";
+import type { BreadcrumbItem } from "~/types/components/breadcrumb";
+
+// ─── Fixtures ─────────────────────────────────────────────────────────────────
+
+const items: BreadcrumbItem[] = [
+  { label: "Services", to: "/services" },
+  { label: "Balayage", to: "/services/balayage" },
+  { label: "Highlights" },
+];
+
+// ─── Tests ────────────────────────────────────────────────────────────────────
+
+describe("Breadcrumb", () => {
+  it("mounts without error", async () => {
+    const wrapper = await mountSuspended(Breadcrumb, { props: { items } });
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  it("renders correct HTML structure", async () => {
+    const wrapper = await mountSuspended(Breadcrumb, { props: { items } });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it("renders a nav with the Breadcrumb aria-label", async () => {
+    const wrapper = await mountSuspended(Breadcrumb, { props: { items } });
+    expect(wrapper.attributes("aria-label")).toBe("Breadcrumb");
+  });
+
+  it("renders every item's label", async () => {
+    const wrapper = await mountSuspended(Breadcrumb, { props: { items } });
+    expect(wrapper.text()).toContain("Services");
+    expect(wrapper.text()).toContain("Balayage");
+    expect(wrapper.text()).toContain("Highlights");
+  });
+
+  it("renders a link for items with a to prop", async () => {
+    const wrapper = await mountSuspended(Breadcrumb, { props: { items } });
+    const links = wrapper.findAll("a");
+    expect(links.length).toBe(2);
+    expect(links[0]?.text()).toBe("Services");
+    expect(links[1]?.text()).toBe("Balayage");
+  });
+
+  it("renders the last item without a to prop as plain text marked as current page", async () => {
+    const wrapper = await mountSuspended(Breadcrumb, { props: { items } });
+    const current = wrapper.find('[aria-current="page"]');
+    expect(current.exists()).toBe(true);
+    expect(current.text()).toBe("Highlights");
+  });
+
+  it("does not render a separator after the last item", async () => {
+    const wrapper = await mountSuspended(Breadcrumb, { props: { items } });
+    const separators = wrapper.findAll(".breadcrumb__separator");
+    expect(separators.length).toBe(items.length - 1);
+  });
+
+  it("uses a custom separator", async () => {
+    const wrapper = await mountSuspended(Breadcrumb, { props: { items, separator: ">" } });
+    expect(wrapper.find(".breadcrumb__separator").text()).toBe(">");
+  });
+
+  it("applies a single styleClassPassthrough string", async () => {
+    const wrapper = await mountSuspended(Breadcrumb, { props: { items, styleClassPassthrough: "custom-class" } });
+    expect(wrapper.classes()).toContain("custom-class");
+  });
+
+  it("applies multiple styleClassPassthrough classes from an array", async () => {
+    const wrapper = await mountSuspended(Breadcrumb, {
+      props: { items, styleClassPassthrough: ["class-a", "class-b"] },
+    });
+    expect(wrapper.classes()).toContain("class-a");
+    expect(wrapper.classes()).toContain("class-b");
+  });
+
+  it("updates classes when styleClassPassthrough prop changes", async () => {
+    const wrapper = await mountSuspended(Breadcrumb, {
+      props: { items, styleClassPassthrough: ["original"] },
+    });
+    expect(wrapper.classes()).toContain("original");
+    await wrapper.setProps({ styleClassPassthrough: ["updated"] });
+    expect(wrapper.classes()).not.toContain("original");
+    expect(wrapper.classes()).toContain("updated");
+  });
+});

package/app/components/01.atoms/navigation/breadcrumb/tests/__snapshots__/Breadcrumb.spec.ts.snap

@@ -0,0 +1,13 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Breadcrumb > renders correct HTML structure 1`] = `
+"<nav class="breadcrumb" aria-label="Breadcrumb">
+  <ol class="breadcrumb__list">
+    <li class="breadcrumb__item"><a href="/services" class="breadcrumb__link">Services</a><span class="breadcrumb__separator" aria-hidden="true">/</span></li>
+    <li class="breadcrumb__item"><a href="/services/balayage" class="breadcrumb__link">Balayage</a><span class="breadcrumb__separator" aria-hidden="true">/</span></li>
+    <li class="breadcrumb__item"><span class="breadcrumb__label" aria-current="page">Highlights</span>
+      <!--v-if-->
+    </li>
+  </ol>
+</nav>"
+`;

package/app/components/03.organisms/services/service-detail/CONSUMER-STYLING.md

@@ -0,0 +1,234 @@
+# ServiceDetail — Consumer Styling Guide
+
+## Layout building blocks
+
+The hero banner is a [GridStack](../../../../../.claude/skills/components/grid-stack.md) with two
+stacked layers — an `image` layer (the service photo) behind a `content` layer (the scrim +
+breadcrumb/title/pills). Each layer's root element is itself a
+[PageRow](../../../../../.claude/skills/components/page-row.md): `.service-detail__hero-image-row`
+(prop `heroImageVariant`, default `"full"`) wraps the photo, and `.service-detail__hero-overlay`
+(prop `heroContentVariant`, default `"content"`) *is* the scrim/alignment element, not a wrapper
+around one — a `PageRow`'s own box always spans the full width of its parent regardless of variant,
+only its children default into the variant's grid column, so the one element can carry the
+full-bleed scrim while its child (`.service-detail__hero-content`) still gets pulled to the
+configured column. This means the photo bleeds to whatever width `.service-detail` itself is allowed
+(edge-to-edge if `ServiceDetail` is placed without a content-constraining wrapper around it), while
+the breadcrumb/title/pills always stay pulled into the page's normal content-width column,
+regardless of how wide the photo bleeds. `--service-detail-hero-padding` now only controls
+**block** (vertical) padding on the scrim — horizontal alignment of the text is handled entirely by
+`.service-detail__hero-overlay`'s own `PageRow` grid, not by padding, so it can't fight the page's
+content-grid gutters.
+
+The two-column body (main content + sticky sidebar) is wrapped in its own `PageRow`, whose variant
+is a prop: `bodyVariant` (`"full" | "popout" | "content" | "inset-content"`, default `"content"`).
+The closing full-width CTA banner is wrapped the same way via `finalCtaVariant` (same type, same
+`"content"` default). This means a consumer no longer needs to wrap `ServiceDetail` itself in an
+outer `PageRow` purely to constrain either section's width — pass `body-variant`/`final-cta-variant`
+directly. It's still fine (and necessary for a genuine full-bleed hero) to place `ServiceDetail`
+inside an outer, wider `PageRow` — see
+[services-section.md](../../../../../.claude/skills/components/services-section.md)-style nesting
+notes in [page-row.md](../../../../../.claude/skills/components/page-row.md) for how nested page-rows
+compose.
+
+## Public token API
+
+### Hero banner
+
+| Token | Default | Controls |
+|---|---|---|
+| `--service-detail-hero-border-radius` | `0.8rem` | Corner rounding on the hero (clips the image/content layers — set to `0` for a true edge-to-edge bleed hero) |
+| `--service-detail-hero-content-align` | `end` | `align-content` of the content overlay grid — where the breadcrumb/title/pills sit within the hero's block axis (`end` = bottom-anchored) |
+| `--service-detail-hero-min-height-mobile` | `32rem` | Hero banner height below the `768px` container breakpoint. The hero image always fills this height (`object-fit`/`object-position` control cropping) |
+| `--service-detail-hero-min-height-tablet` | `36rem` | Hero banner height from the `768px` container breakpoint |
+| `--service-detail-hero-min-height-desktop` | `42rem` | Hero banner height from the `1024px` container breakpoint |
+| `--service-detail-hero-padding` | `3.2rem` | **Block-axis (vertical)** padding around the breadcrumb/title/pills content — horizontal alignment comes from the nested content `PageRow`, not this token |
+| `--service-detail-hero-scrim` | `linear-gradient(0deg, rgb(0 0 0 / 70%) 0%, rgb(0 0 0 / 10%) 60%, transparent 100%)` | Overlay gradient behind the hero text, for legibility over the image |
+| `--service-detail-hero-text-colour` | `white` | Colour of the breadcrumb, eyebrow, and title over the hero image |
+| `--service-detail-breadcrumb-margin-block-end` | `0.8rem` | Space below the breadcrumb |
+| `--service-detail-hero-pills-gap` | `0.8rem` | Gap between the duration and price pills |
+| `--service-detail-hero-pill-bg` | `transparent` | Background of the price/duration pills (via `DisplayPill`'s `--theme-pill-bg`) |
+| `--service-detail-hero-pill-border-colour` | `currentColor` | Border colour of the price/duration pills |
+
+The hero image's crop behaviour also changes responsively (position only, not tokened as fit
+itself): below the `768px` container breakpoint it's `object-fit: cover` anchored with
+`--service-detail-hero-image-position-small` (default `bottom`); from `768px` up it switches to
+`object-fit: contain` anchored with `--service-detail-hero-image-position-medium` (default
+`center`) so the full photo stays visible once there's room for it, rather than continuing to crop.
+
+For anything not covered by these (e.g. the `full`/`content` variant tracks themselves), target
+`--page-row-*` tokens under `.service-detail__hero-image-row`/`.service-detail__hero-overlay` — see
+[page-row.md](../../../../../.claude/skills/components/page-row.md).
+
+### Body layout
+
+| Token | Default | Controls |
+|---|---|---|
+| `--service-detail-body-gap` | `3rem` | Gap between the main column and sidebar |
+| `--service-detail-body-margin-block-start` | `3rem` | Space above the two-column body |
+| `--service-detail-main-section-gap` | `2.4rem` | Gap between stacked sections in the main column |
+
+The body becomes two columns at a **900px container width** (`@container`, not viewport) — the
+main column is flexible, the sidebar is `minmax(28rem, 34rem)`. The body's own breakout width is
+controlled by the `bodyVariant` prop (default `"content"`), not a token — see Layout building
+blocks above.
+
+### Process / Ideal For / FAQs
+
+The process list is rendered with `StepperList` (`indicator-variant="circle"`, connectors on) —
+these tokens are `ServiceDetail`'s own names, mapped internally onto the matching
+`--stepper-list-*` tokens scoped to `.service-detail__process`:
+
+| Token | Default | Controls |
+|---|---|---|
+| `--service-detail-process-step-gap` | `1.6rem` | Gap between the number circle and its text (`--stepper-list-gap`) |
+| `--service-detail-process-step-padding-block` | `1.6rem` | Vertical padding per process step (`--stepper-list-padding-block`) |
+| `--service-detail-process-divider-colour` | `currentColor` | Connector line between process steps (`--stepper-list-connector-color`) |
+| `--service-detail-process-index-colour` | `var(--colour-text-accent)` | Colour and border of the step number circles (`--stepper-list-counter-circle-text`/`-border`) |
+| `--service-detail-process-index-font-size` | `1.4rem` | Font size of the step numbers (`--stepper-list-counter-font-size`) |
+
+For anything not covered by these (e.g. the circle's own size, `--stepper-list-counter-size`),
+target `--stepper-list-*` directly under `.service-detail__process` — see
+[stepper-list.md](../../../../../.claude/skills/components/stepper-list.md) for the full token API.
+
+| Token | Default | Controls |
+|---|---|---|
+| `--service-detail-ideal-for-gap` | `1.2rem` | Gap between ideal-for cards |
+| `--service-detail-ideal-for-item-gap` | `1rem` | Gap between icon and text within a card |
+| `--service-detail-ideal-for-item-padding` | `1.6rem` | Padding inside a card |
+| `--service-detail-ideal-for-item-background` | `var(--slate-09)` | Card background colour |
+| `--service-detail-ideal-for-item-border-colour` | `var(--slate-06)` | Card border colour |
+| `--service-detail-ideal-for-item-border-radius` | `0.4rem` | Card corner rounding |
+| `--service-detail-ideal-for-icon-size` | `1.6rem` | Icon size |
+| `--service-detail-ideal-for-icon-colour` | `var(--colour-text-accent)` | Icon colour |
+| `--service-detail-ideal-for-icon-transform` | `translateY(0.4rem)` | Vertical nudge on the icon to optically align it with the first line of text |
+| `--service-detail-faq-padding-block` | `1.6rem` | Vertical padding per FAQ entry |
+| `--service-detail-faq-divider-colour` | `currentColor` | Divider line between FAQ entries |
+| `--service-detail-faq-question-font-size` | `1.6rem` | FAQ question font size |
+| `--service-detail-faq-question-margin-block-end` | `0.8rem` | Space between an FAQ question and its answer |
+
+The ideal-for grid becomes 2 columns at a **500px container width**.
+
+### Sidebar
+
+| Token | Default | Controls |
+|---|---|---|
+| `--service-detail-sidebar-gap` | `2rem` | Gap between the booking card and related-services block |
+| `--service-detail-sidebar-sticky-offset` | `2rem` | `top` offset while the sidebar is stuck |
+| `--service-detail-sidebar-label-font-size` | `1.2rem` | Font size of "Book This Service" / "You May Also Like" labels |
+| `--service-detail-sidebar-label-margin-block-end` | `1.6rem` | Space below a sidebar label |
+| `--service-detail-sidebar-label-letter-spacing` | `0.05em` | Letter spacing of a sidebar label |
+| `--service-detail-booking-card-padding` | `2.4rem` | Padding inside the booking `GlassPanel` |
+| `--service-detail-sidebar-row-gap` | `1rem` | Gap between a row's label and value |
+| `--service-detail-sidebar-row-padding-block` | `1rem` | Vertical padding per price/duration/location row |
+| `--service-detail-sidebar-row-divider-colour` | `currentColor` | Divider line above each price/duration/location row |
+| `--service-detail-sidebar-row-book-cta-padding-block` | `2rem` | Vertical padding on the `book-cta` slot's own row (only renders when the slot has content) |
+| `--service-detail-sidebar-row-book-cta-justify-content` | `end` | Horizontal alignment of the `book-cta` slot content within its row |
+| `--service-detail-sidebar-row-label-font-size` | `1.2rem` | Font size of a row's label (e.g. "Price") |
+| `--service-detail-sidebar-note-font-size` | `1.2rem` | Font size of the `sidebar-note` slot content |
+| `--service-detail-sidebar-note-margin-block-start` | `1.2rem` | Space above the `sidebar-note` slot content |
+| `--service-detail-related-items-gap` | `1rem` | Gap between related-service item cards |
+| `--service-detail-related-item-background` | `var(--slate-09)` | Background colour of a related-service item's card |
+| `--service-detail-related-item-padding` | `1rem` | Padding inside a related-service item's card |
+| `--service-detail-related-item-border-colour` | `var(--slate-06)` | Border colour of a related-service item's card |
+| `--service-detail-related-item-border-radius` | `0.4rem` | Corner rounding of a related-service item's card |
+| `--service-detail-related-item-gap` | `1.2rem` | Gap between a related item's thumbnail and its text |
+| `--service-detail-related-image-size` | `5.6rem` | Width/height of a related-service thumbnail |
+| `--service-detail-related-image-border-radius` | `0.4rem` | Corner rounding of a related-service thumbnail |
+| `--service-detail-related-price-font-size` | `1.2rem` | Font size of a related item's price |
+| `--service-detail-related-price-margin-block-start` | `0.6rem` | Space between a related item's title and its price |
+| `--service-detail-muted-opacity` | `0.7` | Opacity shared by every secondary/muted text element (sidebar label, sidebar note, related price, final CTA body) |
+
+The booking card is a `GlassPanel` — its own `--glass-panel-*` tokens also apply.
+
+### Final CTA banner
+
+| Token | Default | Controls |
+|---|---|---|
+| `--service-detail-final-cta-gap` | `1.6rem` | Gap between the copy and the `final-cta` slot content |
+| `--service-detail-final-cta-margin-block-start` | `3.2rem` | Space above the banner |
+| `--service-detail-final-cta-padding-block` | `3.2rem 3.2rem` | Padding (block-start block-end) around the banner content, below its divider |
+| `--service-detail-final-cta-divider-colour` | `currentColor` | Divider line above the banner |
+
+The banner becomes a single row (copy left, CTA right) at a **700px container width**. Its own
+breakout width is controlled by the `finalCtaVariant` prop (default `"content"`), not a token —
+see Layout building blocks above.
+
+---
+
+## Text content — props, not CSS
+
+Section headings, sidebar labels, and CTA copy are **props**, not hardcoded strings:
+
+| Prop | Default |
+|---|---|
+| `processHeading` | `"The Process"` |
+| `idealForHeading` | `"Ideal For"` |
+| `maintenanceHeading` | `"Aftercare & Maintenance"` |
+| `faqsHeading` | `"Frequently Asked Questions"` |
+| `bookingHeading` | `"Book This Service"` |
+| `priceLabel` | `"Price"` |
+| `durationLabel` | `"Duration"` |
+| `locationLabel` | `"Location"` |
+| `relatedServicesHeading` | `"You May Also Like"` |
+| `finalCtaHeading` | `"Ready to book your appointment?"` |
+| `finalCtaBody` | `"Get in touch to book your appointment."` |
+
+```vue
+<ServiceDetail
+  :service-data="service"
+  final-cta-heading="Ready to book your colour appointment?"
+  final-cta-body="Mobile service across Bath — I come to you."
+/>
+```
+
+---
+
+## Global theming — recommended approach
+
+```css
+/* assets/styles/setup/07.components/service-detail.css */
+:root {
+  --service-detail-hero-border-radius: 1.2rem;
+  --service-detail-process-index-colour: var(--brand-accent);
+  --service-detail-ideal-for-icon-colour: var(--brand-accent);
+}
+```
+
+## Page-scoped overrides
+
+```css
+.our-services-page {
+  .service-detail {
+    --service-detail-body-gap: 4rem;
+    --service-detail-sidebar-sticky-offset: 8rem; /* clear a fixed site header */
+  }
+}
+```
+
+---
+
+## Notes
+
+- Routing is entirely delegated to the consumer via slots: `book-cta` (scoped `serviceData`),
+  `final-cta` (scoped `serviceData`), and `related-service` (scoped `service`, `index`) — same
+  pattern as `ServicesSection`'s `cta`/`summary-link` slots. Only `sidebar-note` has no scoped
+  data (it's plain content, e.g. patch-test wording).
+- `related-service`'s fallback content is a non-clickable thumbnail + title + price — pass the
+  slot yourself to wrap it in a real link once you have a routing convention.
+- The `location` row and the entire "You May Also Like" block only render when `location` /
+  `relatedServices` are actually passed — neither exists on the shared `Service` type, so nothing
+  breaks for consumer apps that don't have this data.
+- The `book-cta` slot's own sidebar row also only renders when that slot actually has content
+  (`v-if="$slots['book-cta']"`) — it no longer reserves an empty row when the slot is unused.
+- `breadcrumbItems` defaults to a plain, non-linked `[category, title]` trail built from
+  `serviceData` — pass real `to` routes once your app's URL structure is known.
+- `headerTag` (default `"h1"`) controls only the hero title; `subheadingTag` (default `"h2"`)
+  controls every other heading in the component (What Is It, Process, Ideal For, Aftercare, FAQs,
+  final CTA) — unlike `ServicesSection`, which uses one `headerTag` prop for all of them. This
+  component is meant to be the whole page's `<h1>`, so its subheadings need their own level.
+- The FAQ question is a hardcoded `<h3>` — if you set `subheadingTag="h3"`, the FAQ questions will
+  sit at the same level as their own section heading rather than one below it.
+- Two-/three-column breakpoints (900px body, 500px ideal-for grid, 700px final CTA) use
+  `@container` queries against the component's own width, not the viewport — they are not tokens
+  since resizing them would need corresponding `minmax()`/`grid-template-columns` changes too, not
+  just spacing (same rationale as `ServicesSection`'s `--services-section-grid-gap-desktop`).