srcdev-nuxt-components 9.3.11 → 9.3.13

package/app/components/02.molecules/input-copy/CONSUMER-STYLING.md

@@ -14,9 +14,9 @@ or instance) without touching the component itself.
 | `--input-copy-input-text-color` | `#333` | Input text colour |
 | `--input-copy-input-placeholder-color` | `#999` | Placeholder text colour |
 | `--input-copy-input-font-size` | `0.95rem` | Input field font size |
-| `--input-copy-button-bg` | `var(--theme-button-primary-surface)` | Copy button background |
-| `--input-copy-button-bg-hover` | `var(--theme-button-primary-surface-hover)` | Copy button background on hover |
-| `--input-copy-button-text-color` | `var(--theme-button-primary-text)` | Copy button text colour |
+| `--input-copy-button-bg` | `var(--input-button-primary-surface)` | Copy button background |
+| `--input-copy-button-bg-hover` | `var(--input-button-primary-surface-hover)` | Copy button background on hover |
+| `--input-copy-button-text-color` | `var(--input-button-primary-text)` | Copy button text colour |
 | `--input-copy-button-padding` | `0.8rem 1.2rem` | Copy button padding |
 | `--input-copy-button-border-radius` | `0.4rem` | Copy button corner rounding |
 | `--input-copy-button-gap` | `0.6rem` | Gap between icon and text in button |

package/app/components/02.molecules/input-copy/InputCopy.vue

@@ -102,9 +102,15 @@ onUnmounted(() => {
     --_input-placeholder-color: var(--input-copy-input-placeholder-color, #999);
     --_input-font-size: var(--input-copy-input-font-size, 0.95rem);
 
-    --_button-bg: var(--input-copy-button-bg, var(--theme-button-primary-surface));
-    --_button-bg-hover: var(--input-copy-button-bg-hover, var(--theme-button-primary-surface-hover));
-    --_button-text-color: var(--input-copy-button-text-color, var(--theme-button-primary-text));
+    --_button-bg: var(--input-copy-button-bg, var(--input-button-primary-surface, var(--theme-surface)));
+    --_button-bg-hover: var(
+      --input-copy-button-bg-hover,
+      var(--input-button-primary-surface-hover, var(--theme-surface-hover))
+    );
+    --_button-text-color: var(
+      --input-copy-button-text-color,
+      var(--input-button-primary-text, var(--theme-on-surface))
+    );
     --_button-padding: var(--input-copy-button-padding, 0.8rem 1.2rem);
     --_button-border-radius: var(--input-copy-button-border-radius, 0.4rem);
     --_button-gap: var(--input-copy-button-gap, 0.6rem);

package/app/components/02.molecules/pricing-card/CONSUMER-STYLING.md

@@ -33,9 +33,9 @@ override it — there is no locale-aware formatting, just a literal prefix chara
 | `--pricing-card-description-color` | `#555` | Plan description text colour |
 | `--pricing-card-feature-color` | `#333` | Feature list text colour |
 | `--pricing-card-cta-align` | `flex-start` | CTA wrapper `align-self` — set to `stretch`, `center`, or `flex-end` to change CTA alignment/width within the card |
-| `--pricing-card-cta-bg` | `var(--theme-button-primary-surface)` | CTA button background |
-| `--pricing-card-cta-bg-hover` | `var(--theme-button-primary-surface-hover)` | CTA button background on hover |
-| `--pricing-card-cta-text` | `var(--theme-button-primary-text)` | CTA button text colour |
+| `--pricing-card-cta-bg` | `var(--input-button-primary-surface)` | CTA button background |
+| `--pricing-card-cta-bg-hover` | `var(--input-button-primary-surface-hover)` | CTA button background on hover |
+| `--pricing-card-cta-text` | `var(--input-button-primary-text)` | CTA button text colour |
 | `--pricing-card-cta-padding` | `1rem 1.6rem` | CTA button padding |
 | `--pricing-card-cta-border-radius` | `0.4rem` | CTA button corner rounding |
 

package/app/components/02.molecules/pricing-card/PricingCard.vue

@@ -111,9 +111,12 @@ watch(
     --_feature-color: var(--pricing-card-feature-color, #333);
 
     --_cta-align: var(--pricing-card-cta-align, flex-start);
-    --_cta-bg: var(--pricing-card-cta-bg, var(--theme-button-primary-surface));
-    --_cta-bg-hover: var(--pricing-card-cta-bg-hover, var(--theme-button-primary-surface-hover));
-    --_cta-text: var(--pricing-card-cta-text, var(--theme-button-primary-text));
+    --_cta-bg: var(--pricing-card-cta-bg, var(--input-button-primary-surface, var(--theme-surface)));
+    --_cta-bg-hover: var(
+      --pricing-card-cta-bg-hover,
+      var(--input-button-primary-surface-hover, var(--theme-surface-hover))
+    );
+    --_cta-text: var(--pricing-card-cta-text, var(--input-button-primary-text, var(--theme-on-surface)));
     --_cta-padding: var(--pricing-card-cta-padding, 1rem 1.6rem);
     --_cta-border-radius: var(--pricing-card-cta-border-radius, 0.4rem);
 

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

@@ -26,7 +26,7 @@ The closing full-width CTA banner is wrapped the same way via `finalCtaVariant`
 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
+[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.
 
@@ -49,11 +49,10 @@ compose.
 | `--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
+The hero image is always `object-fit: cover` (not tokened) — only its anchor point changes
+responsively: below the `768px` container breakpoint it's 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.
+`--service-detail-hero-image-position-medium` (default `center`).
 
 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
@@ -211,7 +210,7 @@ Section headings, sidebar labels, and CTA copy are **props**, not hardcoded stri
 
 - 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
+  pattern as `ServiceSummary`'s `summary-link` slot. 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.
@@ -224,11 +223,11 @@ Section headings, sidebar labels, and CTA copy are **props**, not hardcoded stri
   `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
+  final CTA) — unlike `ServiceSummary`, which uses one `headerTag` prop for its (single) title heading. 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`).
+  just spacing (same rationale as `ServiceSummary`'s `--service-summary-grid-gap-desktop`).

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

@@ -294,7 +294,6 @@ watch(
         object-position: var(--service-detail-hero-image-position-small, bottom);
 
         @container (width >= 768px) {
-          object-fit: contain;
           object-position: var(--service-detail-hero-image-position-medium, center);
         }
       }

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

@@ -82,7 +82,7 @@ const meta: Meta<typeof ServiceDetail> = {
     docs: {
       description: {
         component:
-          "Renders a full service detail page: a full-bleed hero banner (breadcrumb, eyebrow, title, price/duration pills over the service image), a two-column body (long-form content plus a sticky sidebar booking card and related-services list), and a closing full-width CTA banner. Routing (breadcrumb links, book-cta, related-service links, final-cta) is delegated to the consumer via slots, same pattern as ServicesSection.",
+          "Renders a full service detail page: a full-bleed hero banner (breadcrumb, eyebrow, title, price/duration pills over the service image), a two-column body (long-form content plus a sticky sidebar booking card and related-services list), and a closing full-width CTA banner. Routing (breadcrumb links, book-cta, related-service links, final-cta) is delegated to the consumer via slots, same pattern as ServiceSummary.",
       },
     },
   },
@@ -299,7 +299,7 @@ export const CustomRelatedServiceLink: Story = {
     docs: {
       description: {
         story:
-          "The related-service scoped slot replaces each related item's default (non-clickable) markup — use it to wrap the item in a real link, matching the pattern of ServicesSection's summary-link slot.",
+          "The related-service scoped slot replaces each related item's default (non-clickable) markup — use it to wrap the item in a real link, matching the pattern of ServiceSummary's summary-link slot.",
       },
     },
   },

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

@@ -0,0 +1,116 @@
+# ServiceSummary — Consumer Styling Guide
+
+## Public token API
+
+All `--service-summary-*` tokens are the stable override surface. Set them globally in a
+theme file, scoped to a page wrapper, or per-instance via `styleClassPassthrough`.
+
+### Layout & sizing
+
+| Token | Default | Controls |
+|---|---|---|
+| `--service-summary-grid-gap` | `2rem` | Gap between image and content columns below the 768px container breakpoint |
+| `--service-summary-grid-gap-desktop` | `3rem` | Gap between columns at the 768px container breakpoint and above |
+| `--service-summary-height-mobile` | `auto` | Height of the whole `.service-summary` row below the 768px container breakpoint. `auto` (the default) lets the row size to its content — the image sizes itself via `--service-summary-image-aspect-ratio` and the text column sizes to its own content. Set a fixed length to force both columns to share a common row height instead (the image then crops via `object-fit: cover` to fill it, and `alignment` positions the text within the leftover space) |
+| `--service-summary-height-tablet` | `auto` (falls back to `--service-summary-height-mobile`) | Row height from the 768px container breakpoint |
+| `--service-summary-height-desktop` | `auto` (falls back to `--service-summary-height-tablet`, then `-mobile`) | Row height from the 1024px container breakpoint |
+| `--service-summary-image-aspect-ratio` | `1 / 1` | Aspect ratio of `.service-summary__image-wrapper` when its height isn't otherwise forced by a `--service-summary-height-*` override (i.e. the default, row-height-auto case) — has no visible effect once a row height override makes both dimensions definite |
+| `--service-summary-image-padding-block-mobile` | `0` | Padding-block (top/bottom) inset around the image, inside `.service-summary__image-wrapper`, below the 768px container breakpoint — creates a visible frame/border effect since the image itself sizes to the wrapper's content box, not the padding box |
+| `--service-summary-image-padding-block-tablet` | `0` (falls back to `-mobile`) | Padding-block from the 768px container breakpoint |
+| `--service-summary-image-padding-block-desktop` | `0` (falls back to `-tablet`, then `-mobile`) | Padding-block from the 1024px container breakpoint |
+| `--service-summary-image-padding-inline-mobile` | `0` | Padding-inline (left/right) inset around the image below the 768px container breakpoint |
+| `--service-summary-image-padding-inline-tablet` | `0` (falls back to `-mobile`) | Padding-inline from the 768px container breakpoint |
+| `--service-summary-image-padding-inline-desktop` | `0` (falls back to `-tablet`, then `-mobile`) | Padding-inline from the 1024px container breakpoint |
+| `--service-summary-image-border-radius` | `0.8rem` | Corner rounding on the service image |
+| `--service-summary-pills-gap` | `0.8rem` | Gap between the duration and price pills |
+| `--service-summary-pills-margin-block-end` | `2rem` | Space below the pill row |
+
+All breakpoints above (row height, image padding, and the two-column grid switch) are
+**container queries** against `.service-summary`'s own inline size (`container-name:
+service-summary`), not the viewport — this keeps the layout responsive to the space
+`ServiceSummary` actually has, which matters when it sits next to a persistent side nav that a
+viewport-based `@media` query can't see.
+
+Below the 768px breakpoint the grid is a single stacked column (image above text), so a
+`--service-summary-height-mobile` override sets a height for the *whole stack*, not just the
+image — usually left `auto` on mobile and only set from `--service-summary-height-tablet` up,
+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`:
+
+| Token | Default | Controls |
+|---|---|---|
+| `--service-summary-pill-bg` | `transparent` | Background of the price/duration pills |
+| `--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
+under `.service-summary__pills` — see [display-pill.md](../../../../../.claude/skills/components/display-pill.md).
+
+---
+
+## Global theming — recommended approach
+
+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.
+
+```css
+/* assets/styles/setup/07.components/service-summary.css */
+:root {
+  --service-summary-grid-gap: 2.4rem;
+  --service-summary-grid-gap-desktop: 4rem;
+  --service-summary-image-border-radius: 1.2rem;
+}
+```
+
+---
+
+## Page-scoped overrides
+
+Override tokens for a specific section by scoping them under the page or layout wrapper.
+No `:deep()` is required (component styles are unscoped).
+
+```css
+/* In the consuming page's unscoped <style> block */
+.our-services-page {
+  .service-summary {
+    --service-summary-pill-border-colour: var(--brand-accent);
+  }
+}
+```
+
+---
+
+## Per-instance overrides via styleClassPassthrough
+
+Use sparingly — prefer global or page-scoped CSS. When a single instance needs a distinct
+visual style, pass a modifier class:
+
+```vue
+<ServiceSummary :style-class-passthrough="['highlight-service']" :service-data="service" />
+```
+
+```css
+.service-summary.highlight-service {
+  --service-summary-image-border-radius: 2rem;
+}
+```
+
+---
+
+## Notes
+
+- `--service-summary-grid-gap-desktop` only applies at `768px` and above — the breakpoint
+  itself is not a token, since changing it would affect the grid's `minmax()` column sizing
+  too, not just spacing. The same 768px/1024px breakpoints are shared with the row-height
+  tokens above.
+- The row-height tokens live on `.service-summary` itself (the whole row), not on
+  `.service-summary__image-wrapper` — `.service-summary__grid` and
+  `.service-summary__image-wrapper` both inherit it via `height: 100%`, so overriding the row
+  height also gives `alignment` real leftover space to position the text column within.
+- `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

@@ -0,0 +1,183 @@
+<template>
+  <component :is="tag" class="service-summary" :class="[elementClasses]" :aria-labelledby="ariaLabelledby">
+    <div class="service-summary__grid" :class="{ 'service-summary__grid--reverse': reverse }">
+      <div class="service-summary__image-wrapper">
+        <NuxtImg
+          :src="serviceData.image"
+          :alt="serviceData.title"
+          :loading="imageLoading"
+          :fetchpriority="imageFetchPriority"
+          class="service-summary__image"
+        />
+      </div>
+      <div class="service-summary__info-wrapper" :class="infoWrapperClasses">
+        <EyebrowText font-size="large" :text-content="serviceData.subtitle" />
+        <HeroText
+          :id="headingId"
+          :tag="headerTag"
+          font-size="title"
+          :text-content="[{ text: serviceData.title, styleClass: 'normal' }]"
+          :style-class-passthrough="['mb-20']"
+        />
+
+        <div class="service-summary__pills">
+          <DisplayPill :label="serviceData.duration" size="md" variant="neutral" />
+          <DisplayPill :label="`From ${serviceData.price}`" size="md" variant="neutral" />
+        </div>
+
+        <p class="page-body-normal">{{ serviceData.whatIsIt }}</p>
+
+        <slot name="summary-link" :service-data="serviceData"></slot>
+      </div>
+    </div>
+  </component>
+</template>
+
+<script setup lang="ts">
+import type { Service } from "~/types/types.services";
+
+interface Props {
+  tag?: "div" | "section" | "article" | "main";
+  headerTag?: "h1" | "h2" | "h3";
+  index?: number;
+  serviceData: Service;
+  alignment?: "start" | "center" | "end";
+  reverse?: boolean;
+  styleClassPassthrough?: string | string[];
+}
+const props = withDefaults(defineProps<Props>(), {
+  tag: "div",
+  headerTag: "h2",
+  index: 0,
+  alignment: "center",
+  reverse: false,
+  styleClassPassthrough: () => [],
+});
+
+const { headingId, ariaLabelledby } = useAriaLabelledById(() => props.tag);
+
+const infoWrapperClasses = computed(() => ({
+  [`service-summary__info-wrapper--align-${props.alignment}`]: true,
+}));
+
+// Computed to return loading="lazy" if index is greater than 1, so that the first two summaries prioritise image loading, but if there are more than 2 summaries, the rest will lazy load their images to improve performance.
+const imageLoading = computed(() => (props.index !== undefined && props.index > 1 ? "lazy" : "eager"));
+
+// Only the first image (LCP candidate) gets fetchpriority="high" to reduce resource load delay.
+const imageFetchPriority = computed(() => (props.index === 0 ? "high" : "auto"));
+
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+watch(
+  () => props.styleClassPassthrough,
+  () => {
+    resetElementClasses(props.styleClassPassthrough);
+  }
+);
+</script>
+
+<style lang="css">
+@layer components {
+  .service-summary {
+    container-type: inline-size;
+    container-name: service-summary;
+    height: var(--service-summary-height-mobile, auto);
+
+    @container service-summary (width >= 768px) {
+      height: var(--service-summary-height-tablet, var(--service-summary-height-mobile, auto));
+    }
+
+    @container service-summary (width >= 1024px) {
+      height: var(
+        --service-summary-height-desktop,
+        var(--service-summary-height-tablet, var(--service-summary-height-mobile, auto))
+      );
+    }
+
+    .service-summary__grid {
+      --_grid-gap: var(--service-summary-grid-gap, 2rem);
+
+      display: grid;
+      grid-template-columns: 1fr;
+      gap: var(--_grid-gap);
+      height: 100%;
+
+      @container service-summary (width >= 768px) {
+        --_grid-gap: var(--service-summary-grid-gap-desktop, 3rem);
+
+        grid-template-columns: repeat(auto-fit, minmax(246px, 1fr));
+
+        &.service-summary__grid--reverse {
+          .service-summary__image-wrapper {
+            /* The order: 2 on .service-summary__image-wrapper pushes it after the content div, since by default both children have order: 0 and source order wins — so the content div naturally sits first. */
+            order: 2;
+          }
+        }
+      }
+
+      .service-summary__info-wrapper {
+        display: grid;
+
+        &.service-summary__info-wrapper--align-start {
+          align-content: start;
+        }
+        &.service-summary__info-wrapper--align-center {
+          align-content: center;
+        }
+        &.service-summary__info-wrapper--align-end {
+          align-content: end;
+        }
+      }
+
+      .service-summary__image-wrapper {
+        height: 100%;
+        aspect-ratio: var(--service-summary-image-aspect-ratio, 1 / 1);
+        padding-block: var(--service-summary-image-padding-block-mobile, 0);
+        padding-inline: var(--service-summary-image-padding-inline-mobile, 0);
+        border-radius: var(--service-summary-image-border-radius, 0.8rem);
+        overflow: hidden;
+
+        @container service-summary (width >= 768px) {
+          padding-block: var(
+            --service-summary-image-padding-block-tablet,
+            var(--service-summary-image-padding-block-mobile, 0)
+          );
+          padding-inline: var(
+            --service-summary-image-padding-inline-tablet,
+            var(--service-summary-image-padding-inline-mobile, 0)
+          );
+        }
+
+        @container service-summary (width >= 1024px) {
+          padding-block: var(
+            --service-summary-image-padding-block-desktop,
+            var(--service-summary-image-padding-block-tablet, var(--service-summary-image-padding-block-mobile, 0))
+          );
+          padding-inline: var(
+            --service-summary-image-padding-inline-desktop,
+            var(--service-summary-image-padding-inline-tablet, var(--service-summary-image-padding-inline-mobile, 0))
+          );
+        }
+
+        .service-summary__image {
+          display: block;
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+        }
+      }
+
+      .service-summary__pills {
+        display: flex;
+        flex-wrap: wrap;
+        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);
+      }
+    }
+  }
+}
+</style>