srcdev-nuxt-components 9.4.11 → 9.5.0

package/app/components/03.organisms/services/service-detail/stories/ServiceDetail.stories.ts

@@ -1,5 +1,5 @@
 import ServiceDetail from "../ServiceDetail.vue";
-import InputButtonCore from "../../../../05.forms/input-button/InputButtonCore.vue";
+import InputButton from "../../../../05.forms/input-button/InputButton.vue";
 import type { Meta, StoryObj } from "@nuxtjs/storybook";
 import type { Service } from "~/types/types.services";
 
@@ -171,7 +171,7 @@ const storyTheme = {
 
 export const Default: Story = {
   render: (args) => ({
-    components: { ServiceDetail, InputButtonCore },
+    components: { ServiceDetail, InputButton },
     setup() {
       return { args, balayage, relatedServices, storyTheme };
     },
@@ -184,13 +184,13 @@ export const Default: Story = {
         :style="storyTheme"
       >
         <template #book-cta>
-          <InputButtonCore tag="a" href="/contact" button-text="Book now" variant="primary" :style-class-passthrough="['mbs-16']" />
+          <InputButton tag="a" href="/contact" button-text="Book now" variant="primary" :style-class-passthrough="['mbs-16']" />
         </template>
         <template #sidebar-note>
           A patch test is required at least 48 hours before any colour treatment.
         </template>
         <template #final-cta>
-          <InputButtonCore tag="a" href="/contact" button-text="Book now" variant="secondary" />
+          <InputButton tag="a" href="/contact" button-text="Book now" variant="secondary" />
         </template>
       </ServiceDetail>
     `,
@@ -208,17 +208,17 @@ export const Default: Story = {
 export const NoLocationOrRelated: Story = {
   name: "No Location / No Related Services",
   render: (args) => ({
-    components: { ServiceDetail, InputButtonCore },
+    components: { ServiceDetail, InputButton },
     setup() {
       return { args, balayage, storyTheme };
     },
     template: `
       <ServiceDetail v-bind="args" :service-data="balayage" :style="storyTheme">
         <template #book-cta>
-          <InputButtonCore tag="a" href="/contact" button-text="Book now" variant="primary" :style-class-passthrough="['mbs-16']" />
+          <InputButton tag="a" href="/contact" button-text="Book now" variant="primary" :style-class-passthrough="['mbs-16']" />
         </template>
         <template #final-cta>
-          <InputButtonCore tag="a" href="/contact" button-text="Book now" variant="secondary" />
+          <InputButton tag="a" href="/contact" button-text="Book now" variant="secondary" />
         </template>
       </ServiceDetail>
     `,
@@ -236,7 +236,7 @@ export const NoLocationOrRelated: Story = {
 export const CustomBreadcrumbAndHeadings: Story = {
   name: "Custom Breadcrumb & Headings",
   render: (args) => ({
-    components: { ServiceDetail, InputButtonCore },
+    components: { ServiceDetail, InputButton },
     setup() {
       return { args, balayage, relatedServices, storyTheme };
     },
@@ -254,10 +254,10 @@ export const CustomBreadcrumbAndHeadings: Story = {
         :style="storyTheme"
       >
         <template #book-cta>
-          <InputButtonCore tag="a" href="/contact" button-text="Book now" variant="primary" :style-class-passthrough="['mbs-16']" />
+          <InputButton tag="a" href="/contact" button-text="Book now" variant="primary" :style-class-passthrough="['mbs-16']" />
         </template>
         <template #final-cta>
-          <InputButtonCore tag="a" href="/contact" button-text="Book now" variant="secondary" />
+          <InputButton tag="a" href="/contact" button-text="Book now" variant="secondary" />
         </template>
       </ServiceDetail>
     `,
@@ -274,14 +274,14 @@ export const CustomBreadcrumbAndHeadings: Story = {
 export const CustomRelatedServiceLink: Story = {
   name: "Custom Related Service Link (slot override)",
   render: (args) => ({
-    components: { ServiceDetail, InputButtonCore },
+    components: { ServiceDetail, InputButton },
     setup() {
       return { args, balayage, relatedServices, storyTheme };
     },
     template: `
       <ServiceDetail v-bind="args" :service-data="balayage" :related-services="relatedServices" :style="storyTheme">
         <template #book-cta>
-          <InputButtonCore tag="a" href="/contact" button-text="Book now" variant="primary" :style-class-passthrough="['mbs-16']" />
+          <InputButton tag="a" href="/contact" button-text="Book now" variant="primary" :style-class-passthrough="['mbs-16']" />
         </template>
         <template #related-service="{ service }">
           <a :href="'/services/' + service.slug" style="display:flex;gap:1.2rem;align-items:center;color:inherit;text-decoration:none;">
@@ -290,7 +290,7 @@ export const CustomRelatedServiceLink: Story = {
           </a>
         </template>
         <template #final-cta>
-          <InputButtonCore tag="a" href="/contact" button-text="Book now" variant="secondary" />
+          <InputButton tag="a" href="/contact" button-text="Book now" variant="secondary" />
         </template>
       </ServiceDetail>
     `,

package/app/components/03.organisms/services/service-detail/tests/__snapshots__/ServiceDetail.spec.ts.snap

@@ -21,7 +21,7 @@ exports[`ServiceDetail > renders correct HTML structure 1`] = `
           <h1 id="v-0-0" class="hero-text mb-20 display axis-horizontal">
             <!--v-if--><span class="text-block-0 normal">Balayage</span>
           </h1>
-          <div class="service-detail__hero-pills"><span class="display-pill md neutral"><span class="pill-label">2.5 - 3.5 hours</span></span><span class="display-pill md neutral"><span class="pill-label">From £95</span></span></div>
+          <div class="service-detail__hero-pills"><span class="display-pill md neutral"><!--v-if--><span class="display-pill-label">2.5 - 3.5 hours</span></span><span class="display-pill md neutral"><!--v-if--><span class="display-pill-label">From £95</span></span></div>
         </div>
       </div>
     </div>

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

@@ -1,3 +1,8 @@
+
+> **Changed 2026-09-27**: the background and text-colour tokens never applied before. The pills use
+> `variant="neutral"`, and `DisplayPill`'s neutral rule only read its own neutral tokens, so they rendered
+> as dark slate pills with light text (only the border token worked). `DisplayPill` variants now fall
+> back to the base `--display-pill-*` tokens, so these defaults (transparent, `currentColor`) take effect.
 # ServiceSummary — Consumer Styling Guide
 
 ## Public token API
@@ -39,7 +44,7 @@ where the layout is genuinely two columns side by side.
 ### Pill colours
 
 The duration/price pills are `DisplayPill` instances — `ServiceSummary` maps its own tokens onto
-`DisplayPill`'s `--theme-pill-*` custom properties scoped to `.service-summary__pills`:
+`DisplayPill`'s `--display-pill-*` custom properties scoped to `.service-summary__pills`:
 
 | Token | Default | Controls |
 |---|---|---|
@@ -47,12 +52,12 @@ The duration/price pills are `DisplayPill` instances — `ServiceSummary` maps i
 | `--service-summary-pill-colour` | `currentColor` | Text colour of the pills |
 | `--service-summary-pill-border-colour` | `currentColor` | Border colour of the pills |
 
-For anything not covered by these (e.g. pill size, font weight), target `--theme-pill-*` directly
+For anything not covered by these (e.g. pill size, font weight), target `--display-pill-*` directly
 under `.service-summary__pills` — see [display-pill.md](../../../../../.claude/skills/components/display-pill.md).
 
 ---
 
-## Global theming — recommended approach
+## Global theming
 
 Create `assets/styles/setup/07.components/service-summary.css` in the consuming app and
 set tokens on `:root`. This applies to every `ServiceSummary` across the site.
@@ -68,7 +73,20 @@ set tokens on `:root`. This applies to every `ServiceSummary` across the site.
 
 ---
 
-## Page-scoped overrides
+## Local overrides
+
+Set the tokens above on an element you own (a page or section class, or a class added with
+`:style-class-passthrough`): they inherit down into the component. Keep the block **unlayered** (no
+`@layer` wrapper) so it beats the library's `@layer components`. If your own file uses
+`<style scoped>`, tokens set on your element still work, but selectors that reach inside the component need
+`:deep()`. Patterns and examples: `.claude/skills/component-local-style-override.md`.
+
+**Caveat:** don't set `--display-pill-background`, `--display-pill-text-colour` or `--display-pill-border-colour` on an
+ancestor to restyle the pills: `ServiceSummary` re-declares them on `.service-summary__pills`, so an
+ancestor value never lands. Use the `--service-summary-pill-*` tokens, or set other
+`--display-pill-*` tokens on `.service-summary__pills` itself (see **Pill colours** above).
+
+### Page or section
 
 Override tokens for a specific section by scoping them under the page or layout wrapper.
 No `:deep()` is required (component styles are unscoped).
@@ -82,9 +100,7 @@ No `:deep()` is required (component styles are unscoped).
 }
 ```
 
----
-
-## Per-instance overrides via styleClassPassthrough
+### One instance
 
 Use sparingly — prefer global or page-scoped CSS. When a single instance needs a distinct
 visual style, pass a modifier class:
@@ -114,3 +130,4 @@ visual style, pass a modifier class:
 - `ServiceSummary` is summary-only — it has no "full mode". For a complete single-service page
   (process, ideal-for list, FAQs, booking CTA), use
   [ServiceDetail](../../../../../.claude/skills/components/service-detail.md) instead.
+

package/app/components/03.organisms/services/service-summary/ServiceSummary.vue

@@ -173,9 +173,9 @@ watch(
         gap: var(--service-summary-pills-gap, 0.8rem);
         margin-block-end: var(--service-summary-pills-margin-block-end, 2rem);
 
-        --theme-pill-bg: var(--service-summary-pill-bg, transparent);
-        --theme-pill-color: var(--service-summary-pill-colour, currentColor);
-        --theme-pill-border-color: var(--service-summary-pill-border-colour, currentColor);
+        --display-pill-background: var(--service-summary-pill-bg, transparent);
+        --display-pill-text-colour: var(--service-summary-pill-colour, currentColor);
+        --display-pill-border-colour: var(--service-summary-pill-border-colour, currentColor);
       }
     }
   }

package/app/components/03.organisms/services/service-summary/stories/ServiceSummary.stories.ts

@@ -292,7 +292,7 @@ export const RealisticPageContext: Story = {
     docs: {
       description: {
         story:
-          "Matches the real services listing page (app/pages/services/index.vue in the luxury-locs-by-natasha-nuxt3 project): a page hero (EyebrowText + HeroText inside PageRow/TextBlock) followed by a ServiceSummary. Use ServiceSummaryGrid for the full alternating listing — this story sanity-checks a single instance's layout in context.",
+          "Matches a typical services listing page: a page hero (EyebrowText + HeroText inside PageRow/TextBlock) followed by a ServiceSummary. Use ServiceSummaryGrid for the full alternating listing — this story sanity-checks a single instance's layout in context.",
       },
     },
   },

package/app/components/03.organisms/services/service-summary/tests/__snapshots__/ServiceSummary.spec.ts.snap

@@ -9,7 +9,7 @@ exports[`ServiceSummary > renders correct HTML structure 1`] = `
       <h2 id="v-0-0" class="hero-text mb-20 title axis-horizontal">
         <!--v-if--><span class="text-block-0 normal">Test Service</span>
       </h2>
-      <div class="service-summary__pills"><span class="display-pill md neutral"><span class="pill-label">60 mins</span></span><span class="display-pill md neutral"><span class="pill-label">From £50</span></span></div>
+      <div class="service-summary__pills"><span class="display-pill md neutral"><!--v-if--><span class="display-pill-label">60 mins</span></span><span class="display-pill md neutral"><!--v-if--><span class="display-pill-label">From £50</span></span></div>
       <p class="page-body-normal">What this service is</p>
     </div>
   </div>

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

@@ -82,7 +82,15 @@ the tokens above. See the component skill doc for slot/prop usage examples.
 
 ---
 
-## Per-instance overrides via styleClassPassthrough
+## Local overrides
+
+Set the tokens above on an element you own (a page or section class, or a class added with
+`:style-class-passthrough`): they inherit down into the component. Keep the block **unlayered** (no
+`@layer` wrapper) so it beats the library's `@layer components`. If your own file uses
+`<style scoped>`, tokens set on your element still work, but selectors that reach inside the component need
+`:deep()`. Patterns and examples: `.claude/skills/component-local-style-override.md`.
+
+### One instance
 
 Use sparingly — prefer global or page-scoped CSS. When a single instance needs a distinct look:
 
@@ -110,7 +118,7 @@ cards regardless of each card's description length, without needing CSS subgrid.
 
 `.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
+button label, since `InputButton`'s `.button-text` is `white-space: nowrap` with no
 ellipsis — forces its content's min-content width up through the flex/grid chain and widens
 that one card's grid column in `ServicesCardGrid` wider than its siblings. If a card/column
 ever looks wider than the rest with content cut off at the edge, check for a long unbreakable
@@ -127,3 +135,4 @@ on the widened column, not the cause.
 - `.meta`'s internal gap (between the duration and price text) is a fixed `1rem`, not a token.
 - Root element tag, `href`/`external` (whole-card-clickable), `eyebrowConfig`, and `heroConfig`
   are props, not CSS — see the component skill doc.
+

package/app/components/03.organisms/services/services-card/ServicesCard.vue

@@ -1,9 +1,9 @@
 <template>
   <component
-    :is="resolvedTag"
-    :href="isClickable ? props.href : undefined"
+    :is="resolvedTag()"
+    :href="isClickable() ? props.href : undefined"
     class="services-card"
-    :class="[elementClasses, { 'is-clickable': isClickable }]"
+    :class="[elementClasses, { 'is-clickable': isClickable() }]"
   >
     <div class="image-wrapper">
       <NuxtImg :src="serviceData.image" :alt="serviceData.title" loading="lazy" class="image" />
@@ -27,8 +27,8 @@
       <div class="description">
         {{ serviceData.shortDescription }}
       </div>
-      <div v-if="hasFooter" class="footer">
-        <div v-if="hasMeta" class="meta">
+      <div v-if="hasFooter()" class="footer">
+        <div v-if="hasMeta()" class="meta">
           <div class="meta-duration">
             <slot name="duration" :service-data="serviceData">{{ durationText }}</slot>
           </div>
@@ -44,16 +44,7 @@
 
 <script setup lang="ts">
 import type { Service } from "~/types/types.services";
-
-interface EyebrowConfig {
-  tag?: "p" | "div" | "span";
-  fontSize?: "large" | "medium" | "small";
-}
-
-interface HeroConfig {
-  tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
-  fontSize?: "display" | "title" | "heading" | "subheading" | "label";
-}
+import type { ServicesCardEyebrowConfig, ServicesCardHeroConfig } from "~/types/components";
 
 interface Props {
   tag?: "div" | "section" | "article";
@@ -61,11 +52,11 @@ interface Props {
   href?: string;
   /**
    * Force a real browser navigation instead of client-side routing, even for a same-origin
-   * href starting with "/". See InputButtonCore's `external` prop for the full rationale.
+   * href starting with "/". See InputButton's `external` prop for the full rationale.
    */
   external?: boolean;
-  eyebrowConfig?: EyebrowConfig;
-  heroConfig?: HeroConfig;
+  eyebrowConfig?: ServicesCardEyebrowConfig;
+  heroConfig?: ServicesCardHeroConfig;
   /** Overrides serviceData.duration. Ignored if the `duration` slot is used. */
   durationText?: string;
   /** Overrides serviceData.price. Ignored if the `price` slot is used. */
@@ -89,21 +80,21 @@ const NuxtLink = resolveComponent("NuxtLink");
 
 const durationText = computed(() => props.durationText ?? props.serviceData.duration);
 const priceText = computed(() => props.priceText ?? props.serviceData.price);
-const hasMeta = computed(() => Boolean(slots.duration || slots.price || durationText.value || priceText.value));
+const hasMeta = () => Boolean(slots.duration || slots.price || durationText.value || priceText.value);
 // Groups the meta row and actions slot so they can be pushed to the bottom of the card as
 // one unit — keeps them aligned across a row of cards in ServicesCardGrid regardless of how
 // long each card's description is, without needing per-row CSS subgrid across components.
-const hasFooter = computed(() => Boolean(hasMeta.value || slots.actions));
+const hasFooter = () => Boolean(hasMeta() || slots.actions);
 
 // Whole card is clickable only when there's no actions slot to hold its own interactive
 // content (which would otherwise end up nested inside the card's own anchor) and an href is set
-const isClickable = computed(() => Boolean(!slots.actions && props.href));
-const isInternalLink = computed(() => isClickable.value && props.href!.startsWith("/") && !props.external);
-const resolvedTag = computed(() => {
-  if (!isClickable.value) return props.tag;
-  if (isInternalLink.value) return NuxtLink;
+const isClickable = () => Boolean(!slots.actions && props.href);
+const isInternalLink = () => isClickable() && props.href!.startsWith("/") && !props.external;
+const resolvedTag = () => {
+  if (!isClickable()) return props.tag;
+  if (isInternalLink()) return NuxtLink;
   return "a";
-});
+};
 
 const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 

package/app/components/03.organisms/services/services-card/tests/ServicesCard.spec.ts

@@ -1,6 +1,7 @@
 import { describe, it, expect } from "vitest";
 import { mountSuspended } from "@nuxt/test-utils/runtime";
 import ServicesCard from "../ServicesCard.vue";
+import { defineComponent, nextTick, ref } from "vue";
 import type { Service } from "~/types/types.services";
 
 // ─── Fixtures ─────────────────────────────────────────────────────────────────
@@ -282,4 +283,24 @@ describe("ServicesCard", () => {
     expect(wrapper.classes()).not.toContain("original");
     expect(wrapper.classes()).toContain("updated");
   });
+
+  it("stops being a link when an actions slot appears after mount", async () => {
+    const Host = defineComponent({
+      components: { ServicesCard },
+      setup() {
+        return { mockService, showActions: ref(false) };
+      },
+      template: `
+        <ServicesCard :service-data="mockService" href="https://example.com/service">
+          <template v-if="showActions" #actions><button type="button">Book</button></template>
+        </ServicesCard>
+      `,
+    });
+    const wrapper = await mountSuspended(Host);
+    expect(wrapper.find("a.is-clickable").exists()).toBe(true);
+    (wrapper.vm as unknown as { showActions: boolean }).showActions = true;
+    await nextTick();
+    expect(wrapper.find("a.is-clickable").exists()).toBe(false);
+    expect(wrapper.find("button").exists()).toBe(true);
+  });
 });

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

@@ -0,0 +1,50 @@
+# ServiceSummaryGrid / ServicesCardGrid — Consumer Styling Guide
+
+## Public token API
+
+### ServiceSummaryGrid
+
+| Token | Default | Controls |
+|---|---|---|
+| `--service-summary-grid-row-gap` | `4rem` | Gap between stacked `ServiceSummary` rows |
+
+### ServicesCardGrid
+
+| Token | Default | Controls |
+|---|---|---|
+| `--services-card-grid-column-min-width` | `250px` | Minimum card column width before wrapping (capped at the container width) |
+| `--services-card-grid-gap` | `4rem` | Gap between cards |
+
+Each item is a full `ServiceSummary` or `ServicesCard`, styled by its own tokens (see
+`03.organisms/services/service-summary/CONSUMER-STYLING.md` and
+`03.organisms/services/services-card/CONSUMER-STYLING.md`). ServicesCardGrid's CTA is
+`InputButton` (`variant="secondary"`).
+
+> Changed 2026-09-28: ServicesCardGrid columns use `minmax(min(<min-width>, 100%), 1fr)`, so a
+> single column no longer overflows a container narrower than the minimum width.
+
+No private `--_` tokens.
+
+---
+
+## State hooks
+
+No state classes. The roots are `.service-summary-grid` and `.services-card-grid`; their children
+are the item components' own roots.
+
+---
+
+## Local overrides
+
+Set the tokens above on an element you own (a page or section class, or a class added with
+`:style-class-passthrough`): they inherit down into the component. Keep the block **unlayered** (no
+`@layer` wrapper) so it beats the library's `@layer components`. If your own file uses
+`<style scoped>`, tokens set on your element still work, but selectors that reach inside the component need
+`:deep()`. Patterns and examples: `.claude/skills/component-local-style-override.md`.
+
+---
+
+## Class passthrough
+
+`style-class-passthrough` adds classes to each grid's root. Reactive after mount. It doesn't reach
+the individual cards.

package/app/components/03.organisms/services/services-grids/ServicesCardGrid.vue

@@ -8,16 +8,16 @@
       :hero-config="heroConfig"
     >
       <template #actions="{ serviceData }">
-        <InputButtonCore
+        <InputButton
           variant="secondary"
           :button-text="`${buttonTextPrefix} ${serviceData.title}`"
           :href="`${hrefBase}${serviceData.slug}`"
           :style-class-passthrough="['mbs-24']"
         >
           <template #right>
-            <Icon name="mdi:arrow-right" class="icon" />
+            <Icon :name="buttonIcon" class="icon" aria-hidden="true" />
           </template>
-        </InputButtonCore>
+        </InputButton>
       </template>
     </ServicesCard>
   </component>
@@ -25,24 +25,16 @@
 
 <script setup lang="ts">
 import type { Service } from "~/types/types.services";
-
-interface EyebrowConfig {
-  tag?: "p" | "div" | "span";
-  fontSize?: "large" | "medium" | "small";
-}
-
-interface HeroConfig {
-  tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
-  fontSize?: "display" | "title" | "heading" | "subheading" | "label";
-}
+import type { ServicesCardEyebrowConfig, ServicesCardHeroConfig } from "~/types/components";
 
 interface Props {
   tag?: "div" | "section" | "main";
   servicesData: Service[];
-  eyebrowConfig?: EyebrowConfig;
-  heroConfig?: HeroConfig;
+  eyebrowConfig?: ServicesCardEyebrowConfig;
+  heroConfig?: ServicesCardHeroConfig;
   hrefBase?: string;
   buttonTextPrefix?: string;
+  buttonIcon?: string;
   styleClassPassthrough?: string | string[];
 }
 
@@ -52,6 +44,7 @@ const props = withDefaults(defineProps<Props>(), {
   heroConfig: () => ({}),
   hrefBase: "/services/",
   buttonTextPrefix: "Enquire about",
+  buttonIcon: "mdi:arrow-right",
   styleClassPassthrough: () => [],
 });
 
@@ -69,7 +62,7 @@ watch(
 @layer components {
   .services-card-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(var(--services-card-grid-column-min-width, 250px), 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(min(var(--services-card-grid-column-min-width, 250px), 100%), 1fr));
     gap: var(--services-card-grid-gap, 4rem);
   }
 }

package/app/components/03.organisms/services/services-grids/stories/ServicesCardGrid.stories.ts

@@ -12,6 +12,7 @@ type StoryArgs = {
   };
   hrefBase?: string;
   buttonTextPrefix?: string;
+  buttonIcon?: string;
   styleClassPassthrough?: string | string[];
   /** Story-only — not a real ServicesCardGrid prop, see useStorySetup below. */
   lineClamp?: number;
@@ -42,6 +43,10 @@ const meta: Meta<StoryArgs> = {
       control: { type: "text" },
       description: "Prefix for each card's CTA button text — appended with the service title",
     },
+    buttonIcon: {
+      control: { type: "text" },
+      description: "Icon on each card's CTA button",
+    },
     styleClassPassthrough: {
       control: "object",
       description: "Additional CSS classes applied to the root element",
@@ -58,6 +63,7 @@ const meta: Meta<StoryArgs> = {
     heroConfig: {},
     hrefBase: "/services/",
     buttonTextPrefix: "Enquire about",
+    buttonIcon: "mdi:arrow-right",
     styleClassPassthrough: [],
     lineClamp: 3,
   },

package/app/components/03.organisms/services/services-grids/tests/ServicesCardGrid.spec.ts

@@ -179,3 +179,21 @@ describe("ServicesCardGrid", () => {
     expect(wrapper.classes()).toContain("updated");
   });
 });
+
+describe("ServicesCardGrid button icon", () => {
+  const iconName = (wrapper: Awaited<ReturnType<typeof mountSuspended>>) =>
+    wrapper.find(".services-card-grid .iconify").classes().find((c: string) => c.includes(":")) ?? "";
+
+  it("uses the arrow icon by default, hidden from assistive tech", async () => {
+    const wrapper = await mountSuspended(ServicesCardGrid, { props: { servicesData: mockServices } });
+    expect(iconName(wrapper)).toContain("mdi:arrow-right");
+    expect(wrapper.find(".services-card-grid .iconify").attributes("aria-hidden")).toBe("true");
+  });
+
+  it("uses the buttonIcon prop when given", async () => {
+    const wrapper = await mountSuspended(ServicesCardGrid, {
+      props: { servicesData: mockServices, buttonIcon: "lucide:arrow-right" },
+    });
+    expect(iconName(wrapper)).toContain("lucide:arrow-right");
+  });
+});

package/app/components/03.organisms/services/services-grids/tests/__snapshots__/ServiceSummaryGrid.spec.ts.snap

@@ -10,7 +10,7 @@ exports[`ServiceSummaryGrid > renders correct HTML structure 1`] = `
         <h2 id="v-0-0-0" class="hero-text mb-20 title axis-horizontal">
           <!--v-if--><span class="text-block-0 normal">Locs Installation</span>
         </h2>
-        <div class="service-summary__pills"><span class="display-pill md neutral"><span class="pill-label">60 mins</span></span><span class="display-pill md neutral"><span class="pill-label">From £50</span></span></div>
+        <div class="service-summary__pills"><span class="display-pill md neutral"><!--v-if--><span class="display-pill-label">60 mins</span></span><span class="display-pill md neutral"><!--v-if--><span class="display-pill-label">From £50</span></span></div>
         <p class="page-body-normal">What this service is.</p>
       </div>
     </div>
@@ -23,7 +23,7 @@ exports[`ServiceSummaryGrid > renders correct HTML structure 1`] = `
         <h2 id="v-0-0-1" class="hero-text mb-20 title axis-horizontal">
           <!--v-if--><span class="text-block-0 normal">Locs Retwist</span>
         </h2>
-        <div class="service-summary__pills"><span class="display-pill md neutral"><span class="pill-label">60 mins</span></span><span class="display-pill md neutral"><span class="pill-label">From £50</span></span></div>
+        <div class="service-summary__pills"><span class="display-pill md neutral"><!--v-if--><span class="display-pill-label">60 mins</span></span><span class="display-pill md neutral"><!--v-if--><span class="display-pill-label">From £50</span></span></div>
         <p class="page-body-normal">What this service is.</p>
       </div>
     </div>
@@ -36,7 +36,7 @@ exports[`ServiceSummaryGrid > renders correct HTML structure 1`] = `
         <h2 id="v-0-0-2" class="hero-text mb-20 title axis-horizontal">
           <!--v-if--><span class="text-block-0 normal">Colour Treatment</span>
         </h2>
-        <div class="service-summary__pills"><span class="display-pill md neutral"><span class="pill-label">60 mins</span></span><span class="display-pill md neutral"><span class="pill-label">From £50</span></span></div>
+        <div class="service-summary__pills"><span class="display-pill md neutral"><!--v-if--><span class="display-pill-label">60 mins</span></span><span class="display-pill md neutral"><!--v-if--><span class="display-pill-label">From £50</span></span></div>
         <p class="page-body-normal">What this service is.</p>
       </div>
     </div>

package/app/components/03.organisms/services/services-grids/tests/__snapshots__/ServicesCardGrid.spec.ts.snap

@@ -14,7 +14,7 @@ exports[`ServicesCardGrid > renders correct HTML structure 1`] = `
         <div class="meta">
           <div class="meta-duration">60 mins</div>
           <div class="meta-price">£50</div>
-        </div><a href="/services/locs-installation" data-testid="input-button-core" data-theme="default" class="input-button-core secondary mbs-24 is-link">
+        </div><a href="/services/locs-installation" data-testid="input-button" data-theme="default" class="input-button secondary mbs-24 is-link">
           <!--v-if-->
           <!--v-if--><span class="button-text">Enquire about Locs Installation</span><span class="btn-icon right"><span class="iconify i-mdi:arrow-right icon" aria-hidden="true"></span></span>
           <!--v-if-->
@@ -34,7 +34,7 @@ exports[`ServicesCardGrid > renders correct HTML structure 1`] = `
         <div class="meta">
           <div class="meta-duration">60 mins</div>
           <div class="meta-price">£50</div>
-        </div><a href="/services/locs-retwist" data-testid="input-button-core" data-theme="default" class="input-button-core secondary mbs-24 is-link">
+        </div><a href="/services/locs-retwist" data-testid="input-button" data-theme="default" class="input-button secondary mbs-24 is-link">
           <!--v-if-->
           <!--v-if--><span class="button-text">Enquire about Locs Retwist</span><span class="btn-icon right"><span class="iconify i-mdi:arrow-right icon" aria-hidden="true"></span></span>
           <!--v-if-->
@@ -54,7 +54,7 @@ exports[`ServicesCardGrid > renders correct HTML structure 1`] = `
         <div class="meta">
           <div class="meta-duration">60 mins</div>
           <div class="meta-price">£50</div>
-        </div><a href="/services/colour-treatment" data-testid="input-button-core" data-theme="default" class="input-button-core secondary mbs-24 is-link">
+        </div><a href="/services/colour-treatment" data-testid="input-button" data-theme="default" class="input-button secondary mbs-24 is-link">
           <!--v-if-->
           <!--v-if--><span class="button-text">Enquire about Colour Treatment</span><span class="btn-icon right"><span class="iconify i-mdi:arrow-right icon" aria-hidden="true"></span></span>
           <!--v-if-->

package/app/components/03.organisms/site-header/CONSUMER-STYLING.md

@@ -27,7 +27,7 @@ component itself.
 
 ---
 
-## Global theming — recommended approach
+## Global theming
 
 Create `assets/styles/setup/07.components/site-header.css` in the consuming app and set tokens
 on a scope class matching the one passed via `styleClassPassthrough`:
@@ -52,9 +52,20 @@ on a scope class matching the one passed via `styleClassPassthrough`:
 
 ---
 
+## Local overrides
+
+Set the tokens above on an element you own (a page or section class, or a class added with
+`:style-class-passthrough`): they inherit down into the component. Keep the block **unlayered** (no
+`@layer` wrapper) so it beats the library's `@layer components`. If your own file uses
+`<style scoped>`, tokens set on your element still work, but selectors that reach inside the component need
+`:deep()`. Patterns and examples: `.claude/skills/component-local-style-override.md`.
+
+---
+
 ## Notes
 
 - The branding markup (logo image, wordmark, etc.) is entirely consumer-authored via the
   `#branding` slot — `SiteHeader` has no opinion on brand styling.
 - `SkipLinks`' hardcoded anchors (`#main-content`, `#footer-content`) expect the consuming
   layout's main/footer regions to carry those `id`s — unchanged from using `SkipLinks` directly.
+