srcdev-nuxt-components 9.5.6 → 9.6.0

package/app/components/03.organisms/responsive-header/tests/.nuxt/types/nitro-nuxt.d.ts

@@ -0,0 +1,64 @@
+
+/// <reference path="nitro-layouts.d.ts" />
+/// <reference path="app.config.d.ts" />
+/// <reference path="runtime-config.d.ts" />
+/// <reference path="../../../../../../../node_modules/@nuxt/nitro-server/dist/index.d.mts" />
+/// <reference path="middleware.d.ts" />
+
+import type { RuntimeConfig } from 'nuxt/schema'
+import type { H3Event } from 'h3'
+import type { LogObject } from 'consola'
+import type { NuxtIslandContext, NuxtIslandResponse, NuxtRenderHTMLContext } from 'nuxt/app'
+
+declare module 'nitropack' {
+  interface NitroRuntimeConfigApp {
+    buildAssetsDir: string
+    cdnURL: string
+  }
+  interface NitroRuntimeConfig extends RuntimeConfig {}
+  interface NitroRouteConfig {
+    ssr?: boolean
+    noScripts?: boolean
+    /** @deprecated Use `noScripts` instead */
+    experimentalNoScripts?: boolean
+  }
+  interface NitroRouteRules {
+    ssr?: boolean
+    noScripts?: boolean
+    /** @deprecated Use `noScripts` instead */
+    experimentalNoScripts?: boolean
+    appMiddleware?: Record<string, boolean>
+    appLayout?: string | false
+  }
+  interface NitroRuntimeHooks {
+    'dev:ssr-logs': (ctx: { logs: LogObject[], path: string }) => void | Promise<void>
+    'render:html': (htmlContext: NuxtRenderHTMLContext, context: { event: H3Event }) => void | Promise<void>
+    'render:island': (islandResponse: NuxtIslandResponse, context: { event: H3Event, islandContext: NuxtIslandContext }) => void | Promise<void>
+  }
+}
+declare module 'nitropack/types' {
+  interface NitroRuntimeConfigApp {
+    buildAssetsDir: string
+    cdnURL: string
+  }
+  interface NitroRuntimeConfig extends RuntimeConfig {}
+  interface NitroRouteConfig {
+    ssr?: boolean
+    noScripts?: boolean
+    /** @deprecated Use `noScripts` instead */
+    experimentalNoScripts?: boolean
+  }
+  interface NitroRouteRules {
+    ssr?: boolean
+    noScripts?: boolean
+    /** @deprecated Use `noScripts` instead */
+    experimentalNoScripts?: boolean
+    appMiddleware?: Record<string, boolean>
+    appLayout?: string | false
+  }
+  interface NitroRuntimeHooks {
+    'dev:ssr-logs': (ctx: { logs: LogObject[], path: string }) => void | Promise<void>
+    'render:html': (htmlContext: NuxtRenderHTMLContext, context: { event: H3Event }) => void | Promise<void>
+    'render:island': (islandResponse: NuxtIslandResponse, context: { event: H3Event, islandContext: NuxtIslandContext }) => void | Promise<void>
+  }
+}

package/app/components/03.organisms/responsive-header/tests/.nuxt/types/plugins.d.ts

@@ -0,0 +1,29 @@
+// Generated by Nuxt'
+import type { Plugin } from '#app'
+
+type Decorate<T extends Record<string, any>> = { [K in keyof T as K extends string ? `$${K}` : never]: T[K] }
+
+type InjectionType<A extends Plugin> = A extends {default: Plugin<infer T>} ? Decorate<T> : unknown
+
+type NuxtAppInjections = 
+  InjectionType<typeof import("../../../../../../../node_modules/nuxt/dist/app/plugins/revive-payload.client.js")> &
+  InjectionType<typeof import("../../../../../../../node_modules/nuxt/dist/head/runtime/plugins/unhead.js")> &
+  InjectionType<typeof import("../../../../../../../node_modules/nuxt/dist/app/plugins/router.js")> &
+  InjectionType<typeof import("../../../../../../../node_modules/nuxt/dist/app/plugins/navigation-repaint.client.js")> &
+  InjectionType<typeof import("../../../../../../../node_modules/nuxt/dist/app/plugins/check-outdated-build.client.js")> &
+  InjectionType<typeof import("../../../../../../../node_modules/nuxt/dist/app/plugins/revive-payload.server.js")> &
+  InjectionType<typeof import("../../../../../../../node_modules/nuxt/dist/app/plugins/chunk-reload.client.js")>
+
+declare module '#app' {
+  interface NuxtApp extends NuxtAppInjections { }
+
+  interface NuxtAppLiterals {
+    pluginName: 'nuxt:revive-payload:client' | 'nuxt:head' | 'nuxt:router' | 'nuxt:revive-payload:server' | 'nuxt:chunk-reload' | 'nuxt:global-components'
+  }
+}
+
+declare module 'vue' {
+  interface ComponentCustomProperties extends NuxtAppInjections { }
+}
+
+export { }

package/app/components/03.organisms/responsive-header/tests/.nuxt/types/runtime-config.d.ts

@@ -0,0 +1,32 @@
+import { RuntimeConfig as UserRuntimeConfig, PublicRuntimeConfig as UserPublicRuntimeConfig } from 'nuxt/schema'
+  interface SharedRuntimeConfig {
+   app: {
+      buildId: string,
+
+      baseURL: string,
+
+      buildAssetsDir: string,
+
+      cdnURL: string,
+   },
+
+   nitro: {
+      envPrefix: string,
+   },
+  }
+  interface SharedPublicRuntimeConfig {
+
+  }
+declare module '@nuxt/schema' {
+  interface RuntimeConfig extends UserRuntimeConfig {}
+  interface PublicRuntimeConfig extends UserPublicRuntimeConfig {}
+}
+declare module 'nuxt/schema' {
+  interface RuntimeConfig extends SharedRuntimeConfig {}
+  interface PublicRuntimeConfig extends SharedPublicRuntimeConfig {}
+}
+declare module 'vue' {
+        interface ComponentCustomProperties {
+          $config: UserRuntimeConfig
+        }
+      }

package/app/components/03.organisms/responsive-header/tests/.nuxt/types/shared-imports.d.ts

@@ -0,0 +1,10 @@
+// Generated by auto imports
+export {}
+declare global {
+  const useRuntimeConfig: (event?: import('h3').H3Event) => import('nuxt/schema').RuntimeConfig
+  const useAppConfig: () => import('nuxt/schema').AppConfig
+  const defineAppConfig: <C extends import('nuxt/schema').AppConfigInput>(config: C) => C
+  const createError: typeof import('h3')['createError']
+  const setResponseStatus: typeof import('h3')['setResponseStatus']
+
+}

package/app/components/03.organisms/responsive-header/tests/NavigationItems.spec.ts

@@ -146,10 +146,46 @@ describe("NavigationItems", () => {
     expect(details.attributes("open")).toBe("");
   });
 
+  it("builds the submenu aria-label from submenuAriaLabel, falling back to name", async () => {
+    const wrapper = await mountSuspended(NavigationItems, {
+      props: {
+        submenuAriaLabel: "Untermenü {title}",
+        mainNavigationState: {
+          clonedNavLinks: { firstNav: [{ name: "Services", childLinks: [{ name: "A", path: "/a" }] }] },
+          navListVisibility: { firstNav: false },
+          hasSecondNav: false,
+        },
+      },
+    });
+    const text = wrapper.find(".overflow-navigation-details .overflow-navigation-text");
+    expect(text.text()).toBe("Services");
+    expect(text.attributes("aria-label")).toBe("Untermenü Services");
+  });
+
   it("renders correct HTML structure with default props", async () => {
     const wrapper = await mountSuspended(NavigationItems, {
       props: { mainNavigationState },
     });
     expect(wrapper.html()).toMatchSnapshot();
   });
+
+  // ─── Same-page anchor links ─────────────────────────────────────────────
+
+  it("renders #anchor items as plain links, emits anchorClick and follows activeHash", async () => {
+    const wrapper = await mountSuspended(NavigationItems, {
+      props: {
+        activeHash: "#about",
+        mainNavigationState: {
+          clonedNavLinks: { firstNav: [{ name: "Home", path: "#home" }, { name: "About", path: "#about" }] },
+          navListVisibility: { firstNav: false },
+          hasSecondNav: false,
+        },
+      },
+    });
+    const links = wrapper.findAll(".overflow-navigation-link");
+    expect(links[0]!.attributes("href")).toBe("#home");
+    expect(wrapper.findAll(".overflow-navigation-item")[1]!.classes()).toContain("is-active");
+    await links[0]!.trigger("click");
+    expect(wrapper.emitted("anchorClick")?.[0]?.[1]).toBe("#home");
+  });
 });

package/app/components/03.organisms/responsive-header/tests/ResponsiveHeader.spec.ts

@@ -34,6 +34,19 @@ const triggerGeometryPass = async () => {
   }
 };
 
+// Fake layout: the main nav ends at mainNavRight and each item is 100px wide, laid out in
+// document order, so item n (0-based) ends at (n + 1) * 100.
+const mockGeometry = (mainNavRight: number) =>
+  vi.spyOn(Element.prototype, "getBoundingClientRect").mockImplementation(function (this: Element) {
+    let right = 0;
+    if (this.classList.contains("main-navigation")) right = mainNavRight;
+    if (this.classList.contains("main-navigation-item")) {
+      const items = Array.from(this.closest(".main-navigation")?.querySelectorAll(".main-navigation-item") ?? []);
+      right = (items.indexOf(this) + 1) * 100;
+    }
+    return { left: 0, top: 0, bottom: 0, x: 0, y: 0, height: 0, right, width: right, toJSON: () => ({}) } as DOMRect;
+  });
+
 const navLinks: ResponsiveHeaderProp = {
   firstNav: [
     { name: "Home", path: "/" },
@@ -296,18 +309,90 @@ describe("ResponsiveHeader", () => {
     expect(overflowNav.text()).toContain("UI Components");
   });
 
-  it("completes the geometry pass and marks all items visually-hidden under jsdom's zero-size layout", async () => {
+  it("hides only the items that end past the main nav's right edge", async () => {
+    const geometry = mockGeometry(250);
     const wrapper = await mountSuspended(ResponsiveHeader, {
       props: { responsiveNavLinks: navLinks },
     });
     await triggerGeometryPass();
 
-    // jsdom reports every rect as 0×0, so `rect.right + margin + gap < wrapperRect.right`
-    // (0 + 0 + 12 < 0) is always false — every item correctly collapses into overflow.
     expect(wrapper.find(".navigation").classes()).toContain("geometry-ready");
-    const items = wrapper.findAll(".main-navigation-item");
-    expect(items.length).toBeGreaterThan(0);
-    items.forEach((item) => expect(item.classes()).toContain("visually-hidden"));
+    const hidden = wrapper.findAll(".main-navigation-item").map((item) => item.classes().includes("visually-hidden"));
+    expect(hidden).toEqual([false, false, true, true]);
+    expect(wrapper.find(".overflow-details").classes()).not.toContain("visually-hidden");
+    geometry.mockRestore();
+  });
+
+  it("keeps an item that ends exactly at the main nav's right edge, so a flush-right last item isn't always hidden", async () => {
+    const geometry = mockGeometry(400);
+    const wrapper = await mountSuspended(ResponsiveHeader, {
+      props: { responsiveNavLinks: navLinks },
+    });
+    await triggerGeometryPass();
+
+    wrapper.findAll(".main-navigation-item").forEach((item) => expect(item.classes()).not.toContain("visually-hidden"));
+    expect(wrapper.find(".overflow-details").classes()).toContain("visually-hidden");
+    geometry.mockRestore();
+  });
+
+  it("gives the icon-only overflow button an accessible name", async () => {
+    const wrapper = await mountSuspended(ResponsiveHeader, {
+      props: { responsiveNavLinks: navLinks },
+    });
+    expect(wrapper.find(".overflow-details-summary").attributes("aria-label")).toBe("More navigation");
+    await wrapper.setProps({ overflowButtonLabel: "Menü" });
+    expect(wrapper.find(".overflow-details-summary").attributes("aria-label")).toBe("Menü");
+  });
+
+  it("builds the submenu aria-label from submenuAriaLabel", async () => {
+    const wrapper = await mountSuspended(ResponsiveHeader, {
+      props: { responsiveNavLinks: navLinks, submenuAriaLabel: "Untermenü {title}" },
+    });
+    expect(wrapper.find(".main-navigation-details-summary").attributes("aria-label")).toBe("Untermenü UI Components");
+  });
+
+  it("falls back to name for a dropdown with no childLinksTitle", async () => {
+    const wrapper = await mountSuspended(ResponsiveHeader, {
+      props: { responsiveNavLinks: { firstNav: [{ name: "Services", childLinks: [{ name: "A", path: "/a" }] }] } },
+    });
+    const summary = wrapper.find(".main-navigation-details-summary");
+    expect(summary.text()).toBe("Services");
+    expect(summary.attributes("aria-label")).toBe("Services submenu");
+  });
+
+  it("renders child links with duplicate names without key clashes", async () => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    const wrapper = await mountSuspended(ResponsiveHeader, {
+      props: {
+        responsiveNavLinks: {
+          firstNav: [
+            { name: "Dup", childLinksTitle: "Dup", childLinks: [{ name: "Same", path: "/a" }, { name: "Same", path: "/b" }] },
+          ],
+        },
+      },
+    });
+    expect(wrapper.findAll(".main-navigation-sub-nav-link")).toHaveLength(2);
+    expect(warn.mock.calls.some(([msg]) => String(msg).includes("Duplicate keys"))).toBe(false);
+    warn.mockRestore();
+  });
+
+  it("shows the overflow button for any group key once an item is hidden", async () => {
+    const geometry = mockGeometry(150);
+    const wrapper = await mountSuspended(ResponsiveHeader, {
+      props: { responsiveNavLinks: { main: [{ name: "Home", path: "/" }, { name: "About", path: "/about" }] } },
+    });
+    await triggerGeometryPass();
+    expect(wrapper.find(".overflow-details").classes()).not.toContain("visually-hidden");
+    geometry.mockRestore();
+  });
+
+  it("keeps the overflow button hidden when there are no nav items", async () => {
+    const wrapper = await mountSuspended(ResponsiveHeader, {
+      props: { responsiveNavLinks: {} },
+    });
+    await triggerGeometryPass();
+    expect(wrapper.find(".navigation").classes()).toContain("geometry-ready");
+    expect(wrapper.find(".overflow-details").classes()).toContain("visually-hidden");
   });
 
   it("renders correct HTML structure with default props", async () => {
@@ -316,4 +401,44 @@ describe("ResponsiveHeader", () => {
     });
     expect(wrapper.html()).toMatchSnapshot();
   });
+
+  // ─── Same-page anchor links ─────────────────────────────────────────────
+
+  describe("anchor links", () => {
+    const anchorLinks: ResponsiveHeaderProp = {
+      firstNav: [
+        { name: "Home", path: "#home" },
+        { name: "About", path: "#about" },
+        { name: "Blog", path: "/blog" },
+      ],
+    };
+
+    it("renders #anchor paths as plain links and route paths as NuxtLinks", async () => {
+      const wrapper = await mountSuspended(ResponsiveHeader, { props: { responsiveNavLinks: anchorLinks } });
+      const links = wrapper.findAll(".main-navigation-link");
+      expect(links[0]!.attributes("href")).toBe("#home");
+      expect(links[2]!.attributes("href")).toBe("/blog");
+    });
+
+    it("marks the first anchor item active on load", async () => {
+      const wrapper = await mountSuspended(ResponsiveHeader, { props: { responsiveNavLinks: anchorLinks } });
+      await nextTick();
+      const items = wrapper.findAll(".main-navigation-item");
+      expect(items[0]!.classes()).toContain("is-active");
+      expect(items[1]!.classes()).not.toContain("is-active");
+    });
+
+    it("moves the active item to a clicked anchor and scrolls instead of jumping", async () => {
+      vi.stubGlobal("matchMedia", vi.fn().mockReturnValue({ matches: false }));
+      const section = document.createElement("section");
+      section.id = "about";
+      section.scrollIntoView = vi.fn();
+      document.body.appendChild(section);
+      const wrapper = await mountSuspended(ResponsiveHeader, { props: { responsiveNavLinks: anchorLinks } });
+      await wrapper.findAll(".main-navigation-link")[1]!.trigger("click");
+      expect(section.scrollIntoView).toHaveBeenCalled();
+      expect(wrapper.findAll(".main-navigation-item")[1]!.classes()).toContain("is-active");
+      section.remove();
+    });
+  });
 });

package/app/components/03.organisms/responsive-header/tests/__snapshots__/ResponsiveHeader.spec.ts.snap

@@ -4,11 +4,11 @@ exports[`ResponsiveHeader > renders correct HTML structure with default props 1`
 "<div class="navigation loaded" role="banner">
   <nav class="main-navigation is-animated" aria-label="Main navigation">
     <ul class="main-navigation-list">
-      <li class="main-navigation-item visually-hidden is-active" style="--_main-navigation-item-width: 0px;" data-group-key="firstNav" data-local-index="0"><a href="/" class="main-navigation-link">
+      <li class="main-navigation-item visually-hidden is-active" data-group-key="firstNav" data-local-index="0"><a href="/" class="main-navigation-link">
           <!--v-if--> Home
         </a></li>
-      <li class="main-navigation-item visually-hidden" style="--_main-navigation-item-width: 0px;" data-group-key="firstNav" data-local-index="1"><a href="/about" class="main-navigation-link has-icon"><span class="iconify i-mdi:home decorator-icon" aria-hidden="true"></span> About</a></li>
-      <li class="main-navigation-item visually-hidden" style="--_main-navigation-item-width: 0px;" data-group-key="firstNav" data-local-index="2">
+      <li class="main-navigation-item visually-hidden" data-group-key="firstNav" data-local-index="1"><a href="/about" class="main-navigation-link has-icon"><span class="iconify i-mdi:home decorator-icon" aria-hidden="true"></span> About</a></li>
+      <li class="main-navigation-item visually-hidden" data-group-key="firstNav" data-local-index="2">
         <details class="main-navigation-details" name="navigation-group">
           <summary class="main-navigation-details-summary has-toggle-icon" aria-label="UI Components submenu"><span class="iconify i-mdi:chevron-down icon" aria-hidden="true"></span>
             <!--v-if--> UI Components
@@ -23,7 +23,7 @@ exports[`ResponsiveHeader > renders correct HTML structure with default props 1`
       </li>
     </ul>
     <ul class="main-navigation-list">
-      <li class="main-navigation-item visually-hidden" style="--_main-navigation-item-width: 0px;" data-group-key="secondNav" data-local-index="0"><a href="/contact" class="main-navigation-link">
+      <li class="main-navigation-item visually-hidden" data-group-key="secondNav" data-local-index="0"><a href="/contact" class="main-navigation-link">
           <!--v-if--> Contact
         </a></li>
     </ul>
@@ -32,13 +32,13 @@ exports[`ResponsiveHeader > renders correct HTML structure with default props 1`
   </nav>
   <nav class="secondary-navigation" aria-label="Secondary navigation">
     <details class="overflow-details visually-hidden" name="overflow-group">
-      <summary class="overflow-details-summary has-toggle-icon"><span class="iconify i-gravity-ui:ellipsis icon show" aria-hidden="true"></span><span class="iconify i-gravity-ui:bars icon" aria-hidden="true"></span></summary>
+      <summary class="overflow-details-summary has-toggle-icon" aria-label="More navigation"><span class="iconify i-gravity-ui:ellipsis icon show" aria-hidden="true"></span><span class="iconify i-gravity-ui:bars icon" aria-hidden="true"></span></summary>
       <div class="overflow-details-nav" role="menu">
         <div class="overflow-navigation-wrapper" role="menu" aria-label="Overflow navigation menu">
           <ul class="overflow-navigation-list visible" style="--_overflow-navigation-list-min-width: 0px;" role="none">
-            <li class="overflow-navigation-item visible is-active" style="--_main-navigation-item-width: 0px;" data-group-key="firstNav" data-local-index="0" role="none"><a href="/" class="overflow-navigation-link" role="menuitem"><span class="overflow-navigation-text">Home</span></a></li>
-            <li class="overflow-navigation-item visible" style="--_main-navigation-item-width: 0px;" data-group-key="firstNav" data-local-index="1" role="none"><a href="/about" class="overflow-navigation-link" role="menuitem"><span class="overflow-navigation-text">About</span></a></li>
-            <li class="overflow-navigation-item visible" style="--_main-navigation-item-width: 0px;" data-group-key="firstNav" data-local-index="2" role="none">
+            <li class="overflow-navigation-item visible is-active" data-group-key="firstNav" data-local-index="0" role="none"><a href="/" class="overflow-navigation-link" role="menuitem"><span class="overflow-navigation-text">Home</span></a></li>
+            <li class="overflow-navigation-item visible" data-group-key="firstNav" data-local-index="1" role="none"><a href="/about" class="overflow-navigation-link" role="menuitem"><span class="overflow-navigation-text">About</span></a></li>
+            <li class="overflow-navigation-item visible" data-group-key="firstNav" data-local-index="2" role="none">
               <div class="expanding-panel-classic overflow-navigation-details">
                 <details class="expanding-panel-classic-details" name="overflow-navigation-group">
                   <summary id="id-overflow-navigation-group-trigger" class="expanding-panel-classic-summary" aria-controls="id-overflow-navigation-group-content" aria-expanded="false">
@@ -61,7 +61,7 @@ exports[`ResponsiveHeader > renders correct HTML structure with default props 1`
             </li>
           </ul>
           <ul class="overflow-navigation-list visible" style="--_overflow-navigation-list-min-width: 0px;" role="none">
-            <li class="overflow-navigation-item visible" style="--_main-navigation-item-width: 0px;" data-group-key="secondNav" data-local-index="0" role="none"><a href="/contact" class="overflow-navigation-link" role="menuitem"><span class="overflow-navigation-text">Contact</span></a></li>
+            <li class="overflow-navigation-item visible" data-group-key="secondNav" data-local-index="0" role="none"><a href="/contact" class="overflow-navigation-link" role="menuitem"><span class="overflow-navigation-text">Contact</span></a></li>
           </ul>
           <div aria-hidden="true" class="overflow-nav-indicator-hovered"></div>
           <div aria-hidden="true" class="overflow-nav-indicator-active"></div>

package/app/components/03.organisms/responsive-header/tests/node_modules/.cache/nuxt/chrome-workspace.json

@@ -0,0 +1 @@
+{"uuid":"21163df5-50d7-4cfc-ab56-45d835fb0c72"}

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

@@ -1,40 +1,8 @@
+# ServiceDetail — Consumer Styling Guide
 
 > **Changed 2026-09-27**: `--service-detail-hero-pill-bg` (and the hero text colour on the pills)
 > never applied before, because `DisplayPill`'s `neutral` variant ignored the base tokens. It now
 > falls back to them, so the hero pills are transparent with the hero text colour as documented.
-# 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
-[service-summary.md](../../../../../.claude/skills/components/service-summary.md)-style nesting
-notes in [page-row.md](../../../../../.claude/skills/components/page-row.md) for how nested page-rows
-compose.
-
----
 
 ## Public token API
 
@@ -44,12 +12,25 @@ compose.
 |---|---|---|
 | `--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` on `.service-detail__hero-content` (the breadcrumb/title/pills wrapper) — where that content sits 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-min-height-mobile` | `32rem` | Minimum hero banner height below the `768px` container breakpoint. The hero grows past it when its content (a long title, say) needs more room; the image always fills the hero (`object-fit`/`object-position` control cropping) |
+| `--service-detail-hero-min-height-tablet` | `36rem` | Minimum hero banner height from the `768px` container breakpoint |
+| `--service-detail-hero-min-height-desktop` | `42rem` | Minimum hero banner height from the `1024px` container breakpoint |
+
+> Changed 2026-10-06: these were applied as a fixed `height`, so a long title was clipped by the
+> hero. They are now a true minimum (`min-block-size`), matching their names.
+>
+> Also 2026-10-06: line-clamp tokens for the hero eyebrow and title, sidebar labels and values,
+> and the final CTA heading and body. The hero title's and final CTA heading's spacing moved from
+> utility classes (`mb-20`, `mbs-0`/`mbe-8`) into the component CSS, same values, so the clamp can
+> keep descenders and italic overhang visible.
 | `--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-hero-eyebrow-line-clamp` | `none` | Max lines of the hero eyebrow (subtitle), ellipsis on the last. `1` is single-line ellipsis |
+| `--service-detail-hero-title-line-clamp` | `none` | Max lines of the hero title |
+
+For the breadcrumb, set Breadcrumb's own `--breadcrumb-item-line-clamp` (it reaches the hero
+breadcrumb from any ancestor).
 | `--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 `--display-pill-background`) |
@@ -100,8 +81,8 @@ target `--stepper-list-*` directly under `.service-detail__process` — see
 | `--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-background` | `var(--theme-surface-subtle)` | Card background colour |
+| `--service-detail-ideal-for-item-border-colour` | `transparent` | 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 |
@@ -129,17 +110,28 @@ The ideal-for grid becomes 2 columns at a **500px container width**.
 | `--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-label-line-clamp` | `none` | Max lines of the "Book This Service" / "You May Also Like" labels |
+| `--service-detail-sidebar-value-line-clamp` | `none` | Max lines of a row's value (price, duration, location) |
+
+A row's label takes the width of its own words (up to half the row) and wraps between words only;
+the value takes the rest and wraps anywhere.
 | `--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-background` | `var(--theme-surface-subtle)` | 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-colour` | `transparent` | 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-title-line-clamp` | `none` | Max lines of a related item's title (default item only, not the `related-service` slot). `1` is single-line ellipsis |
+
+> Changed 2026-10-06: the ideal-for and related-service cards defaulted to dark `--slate-09` with a
+> `--slate-06` border but set no text colour, so on a light page their inherited dark text was
+> unreadable. They now default to `var(--theme-surface-subtle)` with a transparent border. To keep
+> dark cards, set the four `-background`/`-border-colour` tokens.
 | `--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) |
 
@@ -153,6 +145,11 @@ The booking card is a `GlassPanel` — its own `--glass-panel-*` tokens also app
 | `--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 |
+| `--service-detail-final-cta-heading-line-clamp` | `none` | Max lines of the banner heading |
+| `--service-detail-final-cta-body-line-clamp` | `none` | Max lines of the banner body text |
+
+The `final-cta` slot sits in `.service-detail__final-cta-action`, which never shrinks: long copy
+wraps beside it instead of pushing the button out of 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 —
@@ -160,6 +157,47 @@ see Layout building blocks above.
 
 ---
 
+## State hooks
+
+No state classes. Inner classes are all `service-detail__*` (hero, hero image/overlay/content, breadcrumb,
+hero pills, body, main, process, ideal-for and its items/icon, faqs and each faq/question, sidebar,
+booking card, sidebar label/rows/note, related items, final CTA). FAQ questions render one heading level
+below `subheadingTag` (`h3` for the default `h2`, `h4` for `h3`).
+
+---
+
+## 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
+[service-summary.md](../../../../../.claude/skills/components/service-summary.md)-style nesting
+notes in [page-row.md](../../../../../.claude/skills/components/page-row.md) for how nested page-rows
+compose.
+
+---
+
 ## Text content — props, not CSS
 
 Section headings, sidebar labels, and CTA copy are **props**, not hardcoded strings:
@@ -177,6 +215,14 @@ Section headings, sidebar labels, and CTA copy are **props**, not hardcoded stri
 | `relatedServicesHeading` | `"You May Also Like"` |
 | `finalCtaHeading` | `"Ready to book your appointment?"` |
 | `finalCtaBody` | `"Get in touch to book your appointment."` |
+| `pricePrefix` | `"From"` (hero price pill; `""` shows the price alone) |
+| `breadcrumbAriaLabel` | Breadcrumb's own default |
+| `idealForIcon` | `"mdi:diamond-stone"` (decorative, hidden from assistive tech) |
+
+A section is left out, heading and all, when its data is empty (`process`, `idealFor`, `faqs`,
+`maintenance`, a `heroHeading` with no text), and so is any heading or label prop set to `""`. Empty
+`subtitle`, `title`, `price`, `duration`, `longDescription`, `whatIsIt` and FAQ questions/answers render
+nothing, and empty breadcrumb labels are dropped.
 
 ```vue
 <ServiceDetail
@@ -226,6 +272,12 @@ never reach the hero pills or breadcrumb. Use the `--service-detail-hero-*` toke
 
 ---
 
+## Class passthrough
+
+`style-class-passthrough` adds classes to the root `.service-detail`. Reactive after mount.
+
+---
+
 ## Notes
 
 - Routing is entirely delegated to the consumer via slots: `book-cta` (scoped `serviceData`),
@@ -251,4 +303,3 @@ never reach the hero pills or breadcrumb. Use the `--service-detail-hero-*` toke
   `@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 `ServiceSummary`'s `--service-summary-grid-gap-desktop`).
-