srcdev-nuxt-components 9.1.6 → 9.1.8

package/.claude/settings.json

@@ -21,7 +21,8 @@
     "additionalDirectories": [
       "/Users/simoncornforth/websites/nuxt-components/app/components/01.atoms/content-wrappers/content-width",
       "/Users/simoncornforth/websites/nuxt-components/.claude/skills",
-      "/Users/simoncornforth/websites/nuxt-components/app/components/02.molecules/navigation/site-navigation/tests"
+      "/Users/simoncornforth/websites/nuxt-components/app/components/02.molecules/navigation/site-navigation/tests",
+      "/Users/simoncornforth/websites/luxury-locs-by-natasha-nuxt3/app/pages"
     ]
   }
 }

package/.claude/skills/components/page-hero-highlights.md

@@ -17,8 +17,8 @@ The layout uses a 4-row CSS Grid with `subgrid` — no `translate`, negative mar
 | `tag`                   | `"div" \| "section" \| "main"`                                      | `"div"`     | Root element tag                                                                                                                |
 | `highlightsEqualWidths` | `boolean`                                                           | `false`     | Equal-width grid columns for highlight items                                                                                    |
 | `highlightsJustify`     | `"start" \| "center" \| "end" \| "space-between" \| "space-around"` | `"start"`   | Alignment of highlight items along the main axis                                                                                |
-| `maxWidth`              | `string`                                                            | `undefined` | Cap the central content column (e.g. `"1064px"`). Gutters grow to enforce the constraint; below this width they hold at `16px`. |
-| `contentAlign`          | `"start" \| "center"`                                               | `"center"`  | When `maxWidth` is set: `"center"` grows gutters equally; `"start"` pins content to the left with a fixed `16px` left gutter.   |
+| `widthConstrained`              | `boolean`                                                           | `false`     | When `true`, caps the central column at `--width-constrained` (default `1064px`). Gutters grow responsively to enforce the constraint. |
+| `contentAlign`          | `"start" \| "center"`                                               | `"center"`  | When `widthConstrained` is `true`: `"center"` grows gutters equally; `"start"` pins content to the left with a fixed left gutter.      |
 | `contentPanel`          | `boolean`                                                           | `true`      | When `true`, renders a decorative panel behind the content slot and offsets the highlights strip. Set to `false` for a flat layout with no backdrop. |
 | `highlightTitleBaseline`| `boolean`                                                           | `false`     | When `true`, fixes the highlight title row to a set height so titles align at a common baseline. Override `--highlight-title-height` to tune. |
 | `styleClassPassthrough` | `string \| string[]`                                                | `[]`        | Extra classes on the root element                                                                                               |
@@ -66,7 +66,7 @@ Each slot accepts any content, but these library components are natural fits:
 Example with `HeroText` in the header slot:
 
 ```vue
-<PageHeroHighlights tag="section" max-width="1064px">
+<PageHeroHighlights tag="section" :width-constrained="true">
   <template #header="{ headingId }">
     <HeroText :heading-id="headingId" text="Welcome back" accent-text="Simon" />
   </template>
@@ -106,11 +106,13 @@ Located at: `app/components/04.templates/page-hero-highlights/PageHeroHighlights
 
 ### CSS tokens
 
-| Token              | Default  | Description                              |
-| ------------------ | -------- | ---------------------------------------- |
-| `--phh-padding-block` | `1.6rem` | Block padding on the header              |
-| `--phh-gap`        | `1.6rem` | Gap between `#start` and `#end` areas    |
-| `--phh-end-gap`    | `0.8rem` | Gap between items within `#end`          |
+| Token                      | Default          | Description                                          |
+| -------------------------- | ---------------- | ---------------------------------------------------- |
+| `--phh-padding-block-mobile`  | `1.6rem 3.2rem`  | Block padding (start end) at mobile widths           |
+| `--phh-padding-block-tablet`  | `2.4rem 4.8rem`  | Block padding (start end) at ≥768px                  |
+| `--phh-padding-block-desktop` | `3.2rem 6.4rem`  | Block padding (start end) at ≥1024px                 |
+| `--phh-gap`                   | `1.6rem`         | Gap between `#start` and `#end` areas                |
+| `--phh-end-gap`               | `0.8rem`         | Gap between items within `#end`                      |
 
 ### Usage
 
@@ -170,17 +172,26 @@ By default, highlight items size to their content (`flex-wrap`). Pass `:highligh
 
 ## Constraining the central column width
 
-Pass `max-width` to cap the content column. The gutters grow to enforce it — full-bleed backgrounds are unaffected and `subgrid` continues to work. Use `content-align` to pin to the left or centre:
+Pass `:width-constrained="true"` to cap the content column at `--width-constrained` (default `1064px`). The gutters grow responsively to enforce it — full-bleed backgrounds are unaffected and `subgrid` continues to work. Use `content-align` to pin to the left or centre:
 
 ```vue
-<!-- Centred, capped at 1064px -->
-<PageHeroHighlights max-width="1064px" content-align="center">...</PageHeroHighlights>
+<!-- Centred, capped at --width-constrained (1064px) -->
+<PageHeroHighlights :width-constrained="true" content-align="center">...</PageHeroHighlights>
 
-<!-- Left-pinned, capped at 1064px (right side takes remaining space) -->
-<PageHeroHighlights max-width="1064px" content-align="start">...</PageHeroHighlights>
+<!-- Left-pinned (right side takes remaining space) -->
+<PageHeroHighlights :width-constrained="true" content-align="start">...</PageHeroHighlights>
 ```
 
-See [css-grid-max-width-gutters.md](../css-grid-max-width-gutters.md) for the full pattern explanation.
+The maximum width value and gutter sizes are all CSS tokens — override them via `styleClassPassthrough` if you need different values:
+
+```css
+.my-page-hero {
+  --width-constrained: 1200px;
+  --page-hero-highlights-gutter-desktop: 48px;
+}
+```
+
+See [css-grid-width-constrained-gutters.md](../css-grid-width-constrained-gutters.md) for the underlying pattern explanation.
 
 ## Local style override scaffold
 
@@ -199,6 +210,12 @@ See [component-local-style-override.md](../component-local-style-override.md) fo
    ─────────────────────────────────────────────────────────────────── */
 .page-hero-highlights {
   &.my-page-hero {
+    /* Grid layout */
+    /* --width-constrained: 1064px; */
+    /* --page-hero-highlights-gutter-mobile: 16px; */
+    /* --page-hero-highlights-gutter-tablet: 40px; */
+    /* --page-hero-highlights-gutter-desktop: 32px; */
+
     /* Header zone */
     /* --header-row-background-colour: darkblue; */
 
@@ -239,8 +256,6 @@ See [component-local-style-override.md](../component-local-style-override.md) fo
 </style>
 ```
 
-> **Note:** The minimum gutter width (`16px`) and layout behaviour are not overridable via CSS custom properties. Use the `max-width` and `content-align` props to control column constraints.
-
 ## Grid structure (reference)
 
 ```text
@@ -254,6 +269,8 @@ row4: page content (never underflows highlights)
 `.header-row` spans cols 1–3, rows 1–2 (edge-to-edge bg). `.header-slot` is placed in row 1 only.
 `.content-row` spans cols 1–3, rows 3–4 (bg fills behind highlights; `.content-slot` is placed in row 4 only). The decorative border behind `.content-slot` is rendered via `.content-row:before` — there is no separate DOM element for it.
 
+Grid columns are determined entirely by CSS — no `v-bind`. The `widthConstrained` and `contentAlign` props add CSS classes (`width-constrained`, `start`, `center`) which select the appropriate `grid-template-columns` rule.
+
 ## Layout pitfall: do not use `grid-template-rows: subgrid` inside `.highlights-row`
 
 The `.highlights-row` element spans rows 2–3 of the parent grid (the "straddle"). If you add an inner grid to `.highlights-row` (e.g. to extend `equal-widths` behaviour) and include `grid-template-rows: subgrid`, auto-placed items will only occupy row 1 of the subgrid (= parent row 2). Parent row 3 collapses to 0-height, destroying the straddle effect — `.content-row` appears immediately below the highlights instead of overlapping it.
@@ -280,5 +297,5 @@ The `.highlights-row` element spans rows 2–3 of the parent grid (the "straddle
 - Component is auto-imported in Nuxt — no import needed.
 - Lives in `app/components/04.templates/page-hero-highlights/`.
 - Storybook title: `"Templates/PageHeroHighlights"`.
-- **Minimum gutter is fixed at `16px`** — it is baked into the `gridColumns` computed and cannot be overridden by a CSS custom property. If a consumer needs a different minimum (e.g. `24px`), it requires a prop or a fork of the component.
-- **`contentAlign` has no effect without `maxWidth`** — both sides always hold `16px` when `maxWidth` is not set.
+- **`contentAlign` has no effect when `widthConstrained` is `false`** — both gutters hold their responsive default.
+- **Gutter sizes are CSS tokens** — `--page-hero-highlights-gutter-mobile/tablet/desktop` are all overridable. The responsive switching between them (via `@container`) is handled internally and cannot be overridden.

package/.claude/skills/components/services-card-grid.md

@@ -6,21 +6,31 @@
 
 ## Props
 
-| Prop                    | Type                              | Default  | Required |
-| ----------------------- | --------------------------------- | -------- | -------- |
-| `servicesData`          | `Service[]`                       | —        | **yes**  |
-| `tag`                   | `"div" \| "section" \| "main"`    | `"div"`  | no       |
-| `eyebrowConfig`         | `EyebrowConfig`                   | `{}`     | no       |
-| `heroConfig`            | `HeroConfig`                      | `{}`     | no       |
-| `styleClassPassthrough` | `string \| string[]`              | `[]`     | no       |
+| Prop                    | Type                              | Default                          | Required |
+| ----------------------- | --------------------------------- | -------------------------------- | -------- |
+| `servicesData`          | `Service[]`                       | —                                | **yes**  |
+| `tag`                   | `"div" \| "section" \| "main"`    | `"div"`                          | no       |
+| `eyebrowConfig`         | `EyebrowConfig`                   | `{}`                             | no       |
+| `heroConfig`            | `HeroConfig`                      | `{}`                             | no       |
+| `hrefBase`              | `string`                          | `"/ui/services/services-section/"` | no     |
+| `buttonTextPrefix`      | `string`                          | `"Enquire about"`                | no       |
+| `styleClassPassthrough` | `string \| string[]`              | `[]`                             | no       |
 
 Both config props are passed through to every `ServicesCard` in the grid unchanged. See [services-card.md](./services-card.md) for the full `EyebrowConfig` / `HeroConfig` key reference.
 
-## Slots
+### Button link and text
 
-| Slot      | Slot props                 | Purpose                                          |
-| --------- | -------------------------- | ------------------------------------------------ |
-| `actions` | `{ serviceData: Service }` | CTA rendered inside each card below description  |
+Each card's CTA button is built internally as `${buttonTextPrefix} ${service.title}` linking to `${hrefBase}${service.slug}`. Override both at the call site:
+
+```vue
+<ServicesCardGrid
+  :services-data="servicesData ?? []"
+  href-base="/services/"
+  button-text-prefix="More on"
+/>
+```
+
+> **Note**: `ServicesCardGrid` does **not** forward a consumer `#actions` slot to its internal `ServicesCard` instances. Use `hrefBase` / `buttonTextPrefix` props to customise the CTA.
 
 ## CSS custom properties
 
@@ -47,20 +57,9 @@ Set on `.services-card-grid` (or scoped to a page class):
             :services-data="servicesData ?? []"
             :eyebrow-config="{ fontSize: 'large' }"
             :hero-config="{ tag: 'h2', fontSize: 'heading' }"
-          >
-            <template #actions="{ serviceData }">
-              <InputButtonCore
-                variant="secondary"
-                :button-text="`Enquire about ${serviceData.title}`"
-                :href="`/services/${serviceData.slug}`"
-                :style-class-passthrough="['mbs-24']"
-              >
-                <template #right>
-                  <Icon name="mdi:arrow-right" class="icon" />
-                </template>
-              </InputButtonCore>
-            </template>
-          </ServicesCardGrid>
+            href-base="/services/"
+            button-text-prefix="More on"
+          />
         </LayoutRow>
       </template>
     </NuxtLayout>

package/.claude/skills/css-grid-max-width-gutters.md

@@ -31,10 +31,47 @@ Left gutter stays fixed, content column is capped at `MAX_WIDTH`, remaining spac
 
 ## In Vue with a prop
 
+### Option A — CSS tokens + class selectors (preferred when max-width is a fixed design value)
+
+When the max-width and gutter values are fixed design tokens (not arbitrary consumer strings), express the logic entirely in CSS using a boolean `maxWidth` prop that adds a class:
+
+```ts
+interface Props {
+  maxWidth?: boolean;
+  contentAlign?: "start" | "center";
+}
+```
+
+```css
+.component {
+  --max-width: 1064px;
+  --gutter: 16px;
+
+  display: grid;
+
+  &.max-width {
+    grid-template-columns: var(--gutter) 1fr var(--gutter);
+  }
+
+  &:not(.max-width) {
+    &.start {
+      grid-template-columns: var(--gutter) minmax(0, var(--max-width)) minmax(var(--gutter), 1fr);
+    }
+    &.center {
+      grid-template-columns: max(var(--gutter), (100% - var(--max-width)) / 2) 1fr
+        max(var(--gutter), (100% - var(--max-width)) / 2);
+    }
+  }
+}
+```
+
+Consumers can override `--max-width` and `--gutter` via `styleClassPassthrough` without touching the prop. This is the approach used by `PageHeroHighlights`.
+
+### Option B — computed string with `v-bind` (use when max-width is a dynamic consumer prop)
+
 Because `v-bind()` in `<style>` can't be nested inside CSS functions like `max()`, build the column string as a computed and bind the whole value:
 
 ```ts
-// Props
 interface Props {
   maxWidth?: string;        // e.g. "1064px"
   contentAlign?: "start" | "center";
@@ -45,7 +82,6 @@ const props = withDefaults(defineProps<Props>(), {
   contentAlign: "center",
 });
 
-// Computed column string
 const gridColumns = computed(() => {
   if (!props.maxWidth) return "16px 1fr 16px";
   if (props.contentAlign === "start") return `16px minmax(0, ${props.maxWidth}) 1fr`;

package/.claude/skills/index.md

@@ -20,6 +20,7 @@ Each skill is a single markdown file named `<area>-<task>.md`.
 .claude/skills/
 ├── index.md                    — this file
 ├── performance-review.md       — spawn a subagent to inspect recently written code for Vue/Nuxt performance issues before dev handoff
+├── security-review.md          — spawn a subagent to inspect recently written code for security vulnerabilities (XSS, injection, data exposure, etc.) before dev handoff
 ├── storybook-add-story.md      — create a Storybook story for a component
 ├── storybook-add-font.md       — add a new font to Storybook
 ├── testing-add-unit-test.md    — create a Vitest unit test with snapshots

package/.claude/skills/security-review.md

@@ -0,0 +1,151 @@
+# Security Review
+
+## Overview
+
+Spawn a subagent to inspect recently written or modified code for security issues and report findings back before handoff to dev. Run this after code is written and ready for review.
+
+## When to invoke
+
+Invoke this skill (`/security-review`) after completing any of:
+- A new component that accepts user input or renders external data
+- A significant edit to an existing component
+- A new composable that handles URLs, tokens, or external data
+- Any code that constructs URLs, HTML, or interacts with browser APIs
+
+## Steps
+
+### 1. Identify files to review
+
+Collect the list of files changed in this conversation. If unclear, run `git diff --name-only HEAD` to get recently modified files.
+
+### 2. Spawn the security review subagent
+
+Use the Agent tool with `subagent_type: "general-purpose"` and the following prompt, substituting `{FILE_LIST}` with the actual file paths:
+
+---
+
+**Subagent prompt template:**
+
+```
+You are a Vue 3 / Nuxt security reviewer. Inspect the following files for security vulnerabilities and produce a concise report.
+
+Files to review:
+{FILE_LIST}
+
+Read each file in full, then check for the following issues. Report only issues that are actually present — do not flag hypothetical problems.
+
+─── XSS / Injection ─────────────────────────────────────────────
+□ `v-html` used with any non-static string (potential XSS — must be sanitised before use)
+□ Template literals passed to `v-html` or `innerHTML`
+□ User-controlled data rendered without escaping
+□ `eval()`, `new Function()`, or `setTimeout(string)` usage
+
+─── URL / Redirect Safety ───────────────────────────────────────
+□ `href` or `src` built from user-supplied data without validation (open redirect / javascript: injection)
+□ Dynamic `<script src>` or `<link href>` construction
+□ `window.location` assignment from unvalidated input
+
+─── Data Exposure ───────────────────────────────────────────────
+□ Secrets, API keys, or tokens hardcoded or logged to console
+□ Sensitive data stored in `localStorage` / `sessionStorage` without encryption
+□ `useRuntimeConfig()` public keys that expose values that should be private (server-only)
+□ Props or emits that inadvertently expose internal state to the DOM (e.g. `data-*` attributes)
+
+─── Component / Props ───────────────────────────────────────────
+□ `inheritAttrs: true` on components that accept `href` / `src` — an attacker can pass arbitrary attributes through
+□ Props that accept raw HTML strings without a sanitisation step
+□ Dynamic `is` prop on `<component>` bound to user-controlled data (component injection)
+
+─── Event Handling ──────────────────────────────────────────────
+□ `@click.native` or direct DOM event listeners on user-supplied elements
+□ `postMessage` handlers without origin validation
+□ Clipboard API writes of unvalidated data
+
+─── Dependencies / Imports ──────────────────────────────────────
+□ Dynamic `import()` paths constructed from user input
+□ Imports from non-registry URLs (e.g. raw GitHub, CDN) rather than npm packages
+
+─── Broken Access Control (OWASP A01) ───────────────────────────
+□ `v-if` used as the sole gate for sensitive UI — this is cosmetic only, not a real access check
+□ Route middleware (`definePageMeta({ middleware })`) that can be bypassed by navigating directly
+□ Server routes or API handlers that trust `event.context.auth` / headers set by the client
+□ Permissions or roles derived solely from client-side reactive state with no server validation
+
+─── Cryptographic Failures (OWASP A02) ──────────────────────────
+□ `Math.random()` used to generate tokens, IDs, or nonces (not cryptographically secure — use `crypto.randomUUID()` or `crypto.getRandomValues()`)
+□ `btoa()` / `atob()` used to "encode" sensitive values (this is encoding, not encryption)
+□ Sensitive values hashed with MD5 or SHA-1 (use SHA-256+ or bcrypt/argon2 for passwords)
+□ Passwords or secrets stored in plain text in state, localStorage, or cookies
+
+─── Security Misconfiguration (OWASP A05) ───────────────────────
+□ `nuxt.config.ts` missing security headers (`Content-Security-Policy`, `X-Frame-Options`, `Referrer-Policy`)
+□ CORS configured with `origin: "*"` on routes that return sensitive data
+□ Verbose error messages or stack traces returned to the client from server routes
+□ `devtools: true` or debug flags that could be active in production builds
+□ `runtimeConfig` values that mix public/private — anything in `public:` is exposed to the client bundle
+
+─── Authentication Failures (OWASP A07) ─────────────────────────
+□ Auth tokens stored in `localStorage` or `sessionStorage` (vulnerable to XSS — prefer `httpOnly` cookies)
+□ Auth state held only in client-side reactive state (`useState`, `ref`) with no server-side verification
+□ JWTs decoded client-side without signature verification before trusting claims
+□ Session IDs or tokens exposed in URL query parameters or `data-*` attributes
+□ No expiry enforced on tokens or session state
+
+─── Software & Data Integrity (OWASP A08) ───────────────────────
+□ `JSON.parse()` called on untrusted/external data without a validation step (schema check or try/catch with type guard)
+□ `Object.assign({}, userInput)` or `{ ...userInput }` spread onto internal objects — risk of prototype pollution if input is not sanitised
+□ External `<script>` tags added via `useHead` without a `crossorigin` and `integrity` (SRI) attribute
+□ Dynamic `import()` resolved from user-supplied strings (supply chain / path traversal risk)
+
+─── Logging & Monitoring (OWASP A09) ────────────────────────────
+□ `console.log` / `console.error` statements that output tokens, passwords, or PII
+□ Error handlers that re-throw raw server errors (including DB messages) to the client response
+□ Caught exceptions silently swallowed with no logging — makes incidents invisible
+
+─── Server-Side Request Forgery (OWASP A10) ─────────────────────
+□ `$fetch` / `useFetch` / `ofetch` called server-side with a URL constructed from user input (SSRF — attacker can target internal services)
+□ Proxy or redirect endpoints that forward to a caller-supplied URL without an allowlist check
+□ `useAsyncData` key derived from user input used to construct a server-side fetch URL
+
+─── CSRF ────────────────────────────────────────────────────────
+□ State-mutating server routes (POST/PUT/DELETE) that rely solely on cookies without a CSRF token or `SameSite=Strict`
+□ Forms that submit to API routes with no CSRF protection and no `Content-Type: application/json` enforcement (which prevents simple-form cross-origin attacks)
+
+─── Nuxt-specific ───────────────────────────────────────────────
+□ Server routes or API handlers that trust client-sent data without validation
+□ `useFetch` / `$fetch` URLs built from user input without sanitisation
+□ `definePageMeta` `middleware` bypassed by conditional rendering
+□ SSR hydration mismatches caused by client-only globals accessed during render
+
+─── Report format ───────────────────────────────────────────────
+For each issue found, output:
+
+**File:** `path/to/file.vue` (line N)
+**Issue:** One-sentence description of the vulnerability
+**Severity:** Low / Medium / High / Critical
+**Fix:** Concrete code change or approach to resolve it
+
+Group findings by file. If no issues are found in a file, skip it.
+End the report with a one-line summary: total issues found, breakdown by severity.
+```
+
+---
+
+### 3. Review the report
+
+Read the subagent's findings. For each **Critical** or **High** severity issue:
+- Apply the fix immediately if it is clear-cut and does not change behaviour
+- Flag it to the user with the suggested fix if it requires a design decision
+
+For **Medium** and **Low** severity issues, present them as a list for the user to decide on.
+
+### 4. Confirm completion
+
+After applying any fixes, re-run the subagent on the modified files to confirm no new issues were introduced.
+
+## Notes
+
+- This skill is read-only when used via the subagent — it does not edit files directly. Edits are made by the main agent after reviewing the report.
+- Report only issues that are actually present in the code — do not flag theoretical future vulnerabilities.
+- The subagent uses `subagent_type: "general-purpose"` so it has access to all tools (Read, Grep, Glob) needed to inspect the files.
+- Run alongside `/performance-review` — both can be spawned in parallel as independent subagents.

package/app/assets/styles/setup/01.config/_head.css

@@ -15,19 +15,31 @@ html {
   transition:
     background-color 0.4s ease,
     color 0.4s ease;
-  /* scrollbar-gutter: stable; */
+  scrollbar-gutter: stable;
 
   overflow-x: clip;
-}
-body {
-  background-color: var(--page-bg, lightgray);
-  color: var(--colour-text-default);
-  font-family: var(--font-family);
-  font-size: var(--step-4);
-  min-height: 100dvh;
-  transition:
-    background-color 0.4s ease,
-    color 0.4s ease;
 
-  overflow-x: clip;
+  body {
+    background-color: var(--page-bg, lightgray);
+    color: var(--colour-text-default);
+    font-family: var(--font-family);
+    font-size: var(--step-4);
+    /* min-height: 100dvh; */
+    transition:
+      background-color 0.4s ease,
+      color 0.4s ease;
+
+    overflow-x: clip;
+
+    #__nuxt {
+      height: 100%;
+      div {
+        .page-layout {
+          min-block-size: 100svh;
+          display: grid;
+          grid-template-rows: auto 1fr auto;
+        }
+      }
+    }
+  }
 }

package/app/components/02.molecules/navigation/site-navigation/SiteNavigation.vue

@@ -379,12 +379,16 @@ useResizeObserver(navRef, () => {
 
 onClickOutside(navRef, closeMenu);
 
+const router = useRouter();
+
 onMounted(async () => {
   await nextTick();
   checkOverflow();
   isLoaded.value = true;
-  await nextTick();
-  initNavDecorators();
+  await router.isReady();
+  requestAnimationFrame(() => {
+    initNavDecorators();
+  });
 });
 
 watch(isCollapsed, async (collapsed) => {

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

@@ -10,7 +10,7 @@
       <template #actions="{ serviceData }">
         <InputButtonCore
           variant="secondary"
-          :button-text="`Enquire about ${serviceData.title}`"
+          :button-text="`${buttonTextPrefix} ${serviceData.title}`"
           :href="`${hrefBase}${serviceData.slug}`"
           :style-class-passthrough="['mbs-24']"
         >
@@ -42,6 +42,7 @@ interface Props {
   eyebrowConfig?: EyebrowConfig;
   heroConfig?: HeroConfig;
   hrefBase?: string;
+  buttonTextPrefix?: string;
   styleClassPassthrough?: string | string[];
 }
 
@@ -50,6 +51,7 @@ const props = withDefaults(defineProps<Props>(), {
   eyebrowConfig: () => ({}),
   heroConfig: () => ({}),
   hrefBase: "/ui/services/services-section/",
+  buttonTextPrefix: "Enquire about",
   styleClassPassthrough: () => [],
 });
 

package/app/components/03.organisms/services/services-section/ServicesSection.vue

@@ -7,7 +7,7 @@
       <div class="info-wrapper" :class="infoWrapperClasses">
         <EyebrowText font-size="large" :text-content="serviceData.subtitle" />
         <HeroText
-          tag="h1"
+          :tag="headerTag"
           font-size="title"
           :text-content="[
             {
@@ -33,7 +33,7 @@
 
         <HeroText
           v-if="!isSummary"
-          tag="h2"
+          :tag="headerTag"
           axis="horizontal"
           font-size="subheading"
           :text-content="serviceData.heroHeading"
@@ -47,7 +47,7 @@
 
         <HeroText
           v-if="!isSummary"
-          tag="h2"
+          :tag="headerTag"
           axis="horizontal"
           font-size="subheading"
           :text-content="[{ text: 'The Process ', styleClass: 'normal' }]"
@@ -69,7 +69,7 @@
 
         <HeroText
           v-if="!isSummary"
-          tag="h2"
+          :tag="headerTag"
           axis="horizontal"
           font-size="subheading"
           :text-content="[{ text: 'Ideal For', styleClass: 'normal' }]"
@@ -87,7 +87,7 @@
 
         <HeroText
           v-if="!isSummary"
-          tag="h2"
+          :tag="headerTag"
           axis="horizontal"
           font-size="subheading"
           :text-content="[{ text: 'Aftercare &amp; Maintenance', styleClass: 'normal' }]"
@@ -98,7 +98,7 @@
 
         <HeroText
           v-if="!isSummary"
-          tag="h2"
+          :tag="headerTag"
           axis="horizontal"
           font-size="subheading"
           :text-content="[{ text: 'Frequently Asked Questions', styleClass: 'normal' }]"
@@ -144,6 +144,7 @@ import type { Service } from "~/types/types.services";
 
 interface Props {
   tag?: "div" | "section" | "article" | "main";
+  headerTag?: "h1" | "h2" | "h3";
   index?: number;
   serviceData: Service;
   isSummary?: boolean;
@@ -153,6 +154,7 @@ interface Props {
 }
 const props = withDefaults(defineProps<Props>(), {
   tag: "div",
+  headerTag: "h2",
   index: 0,
   isSummary: false,
   summaryAlignment: "center",

package/app/components/04.templates/page-hero-highlights/PageHeroHighlights.vue

@@ -2,7 +2,7 @@
   <component
     :is="tag"
     class="page-hero-highlights"
-    :class="[elementClasses, componentClasses, { 'has-content-panel': contentPanel }]"
+    :class="[elementClasses, componentClasses]"
     :aria-labelledby="ariaLabelledby"
   >
     <div class="header-row">
@@ -26,7 +26,7 @@ interface Props {
   tag?: "div" | "section" | "main";
   highlightsEqualWidths?: boolean;
   highlightsJustify?: "start" | "center" | "end" | "space-between" | "space-around";
-  maxWidth?: string;
+  widthConstrained?: boolean;
   contentAlign?: "start" | "center";
   contentPanel?: boolean;
   highlightTitleBaseline?: boolean;
@@ -37,22 +37,19 @@ const props = withDefaults(defineProps<Props>(), {
   tag: "div",
   highlightsEqualWidths: false,
   highlightsJustify: "start",
-  maxWidth: undefined,
+  widthConstrained: false,
   contentAlign: "center",
   contentPanel: true,
   highlightTitleBaseline: false,
   styleClassPassthrough: () => [],
 });
 
-const gridColumns = computed(() => {
-  if (!props.maxWidth) return "16px 1fr 16px";
-  if (props.contentAlign === "start") return `16px minmax(0, ${props.maxWidth}) minmax(16px, 1fr)`;
-  return `max(16px, (100% - ${props.maxWidth}) / 2) 1fr max(16px, (100% - ${props.maxWidth}) / 2)`;
-});
-
 const { headingId, ariaLabelledby } = useAriaLabelledById(() => props.tag);
 const componentClasses = computed(() => ({
   "highlight-title-baseline": props.highlightTitleBaseline,
+  [props.contentAlign]: true,
+  "width-constrained": props.widthConstrained,
+  "has-content-panel": props.contentPanel,
 }));
 
 const highlightClasses = computed(() => ({
@@ -73,7 +70,14 @@ watch(
 
 <style lang="css">
 .page-hero-highlights {
+  /* Layout tokens */
+  --max-width: 1064px;
+  --page-hero-highlights-gutter-mobile: 16px;
+  --page-hero-highlights-gutter-tablet: 40px;
+  --page-hero-highlights-gutter-desktop: 32px;
+
   /* User themable tokens */
+
   --header-row-background-colour: darkblue;
 
   --highlights-row-item-gap: 1rem;
@@ -105,11 +109,46 @@ watch(
     --highlight-padding-block-start: 0; /* We're setting the title height via row height, so this should be exposed for override in consuming page */
   }
 
+  /* Internal layout variables */
+  --page-hero-highlights-gutter: var(--page-hero-highlights-gutter-mobile);
+
+  @container (width >= 768px) {
+    --page-hero-highlights-gutter: var(--page-hero-highlights-gutter-tablet);
+  }
+  @container (width >= 1024px) {
+    --page-hero-highlights-gutter: var(--page-hero-highlights-gutter-desktop);
+  }
+
+  /* Private geometry */
+  --header-slot-grid-row: 1;
+  &.highlight-title-baseline {
+    --header-slot-grid-row: 1 / span 2;
+  }
+
   display: grid;
-  grid-template-columns: v-bind(gridColumns);
+  /* grid-template-columns: v-bind(gridColumns); */
   grid-template-rows: auto var(--highlight-title-height) 1fr auto;
   gap: 0;
 
+  &.width-constrained {
+    grid-template-columns: var(--page-hero-highlights-gutter) 1fr var(--page-hero-highlights-gutter);
+  }
+
+  &:not(.width-constrained) {
+    &.start {
+      grid-template-columns: var(--page-hero-highlights-gutter) minmax(0, var(--max-width)) minmax(
+          var(--page-hero-highlights-gutter),
+          1fr
+        );
+    }
+    &.center {
+      grid-template-columns: max(var(--page-hero-highlights-gutter), (100% - var(--max-width)) / 2) 1fr max(
+          var(--page-hero-highlights-gutter),
+          (100% - var(--max-width)) / 2
+        );
+    }
+  }
+
   .header-row {
     /* Element geometry */
     grid-column: 1 / -1;
@@ -123,7 +162,7 @@ watch(
 
     .header-slot {
       grid-column: 2;
-      grid-row: 1;
+      grid-row: var(--header-slot-grid-row);
       container-type: inline-size;
     }
   }

package/app/components/04.templates/page-hero-highlights/PageHeroHighlightsHeader.vue

@@ -34,14 +34,24 @@ watch(
 <style lang="css">
 .page-hero-highlights-header {
   /* User themable tokens */
-  --phh-padding-block: 1.6rem;
+  --phh-padding-block-mobile: 1.6rem 3.2rem;
+  --phh-padding-block-tablet: 2.4rem 4.8rem;
+  --phh-padding-block-desktop: 3.2rem 6.4rem;
   --phh-gap: 1.6rem;
   --phh-end-gap: 0.8rem;
 
   display: flex;
   flex-direction: column;
   gap: var(--phh-gap);
-  padding-block: var(--phh-padding-block);
+
+  padding-block: var(--phh-padding-block-mobile);
+
+  @container (width >= 768px) {
+    padding-block: var(--phh-padding-block-tablet);
+  }
+  @container (width >= 1024px) {
+    padding-block: var(--phh-padding-block-desktop);
+  }
 
   &:has(.phh-end) {
     @container (width >= 768px) {

package/app/components/04.templates/page-hero-highlights/stories/PageHeroHighlights.stories.ts

@@ -6,7 +6,7 @@ type StoryArgs = {
   tag?: "div" | "section" | "main";
   highlightsEqualWidths?: boolean;
   highlightsJustify?: "start" | "center" | "end" | "space-between" | "space-around";
-  maxWidth?: string;
+  widthConstrained?: boolean;
   contentAlign?: "start" | "center";
   contentPanel?: boolean;
   highlightTitleBaseline?: boolean;
@@ -34,11 +34,10 @@ const meta: Meta<StoryArgs> = {
       options: ["start", "center", "end", "space-between", "space-around"],
       description: "Justification of highlight items along the main axis",
     },
-    maxWidth: {
-      control: { type: "select" },
-      options: ["", "600px", "800px", "1024px", "1064px", "1200px", "1440px"],
+    widthConstrained: {
+      control: "boolean",
       description:
-        "Max width of the central content column. Gutters grow to enforce the constraint; below this width they hold at 16px.",
+        "When true, caps the central column at --max-width (default 1064px). Gutters grow responsively to enforce the constraint. Override --max-width via styleClassPassthrough to change the cap value.",
     },
     contentAlign: {
       control: { type: "inline-radio" },
@@ -78,7 +77,7 @@ const meta: Meta<StoryArgs> = {
     tag: "div",
     highlightsEqualWidths: false,
     highlightsJustify: "start",
-    maxWidth: "",
+    widthConstrained: false,
     contentAlign: "center",
     contentPanel: true,
     highlightTitleBaseline: false,
@@ -119,6 +118,12 @@ All layout and visual properties are customisable via CSS custom properties. Set
 
 \`\`\`css
 .page-hero-highlights {
+  /* Grid layout */
+  --max-width: 1064px;
+  --page-hero-highlights-gutter-mobile: 16px;
+  --page-hero-highlights-gutter-tablet: 40px;
+  --page-hero-highlights-gutter-desktop: 32px;
+
   /* Header zone */
   --header-row-background-colour: darkblue;
 
@@ -196,6 +201,12 @@ All layout and visual properties are customisable via CSS custom properties. Set
    ─────────────────────────────────────────────────────────────────── */
 .page-hero-highlights {
 
+  /* Grid layout */
+  --max-width: 1064px;
+  --page-hero-highlights-gutter-mobile: 16px;
+  --page-hero-highlights-gutter-tablet: 40px;
+  --page-hero-highlights-gutter-desktop: 32px;
+
   /* Header zone */
   --header-row-background-colour: darkblue;
 
@@ -330,10 +341,10 @@ export const NoSlotContent: Story = {
   }),
 };
 
-/** Max width centered — content column capped at 800px with equal growing gutters either side. */
+/** Max width centered — content column capped at --max-width (1064px) with equal growing gutters either side. */
 export const MaxWidthCentered: Story = {
   name: "Max Width — Centered",
-  args: { maxWidth: "800px", contentAlign: "center" },
+  args: { widthConstrained: true, contentAlign: "center" },
   render: (args: StoryArgs) => ({
     components: { PageHeroHighlights },
     setup() {
@@ -343,7 +354,7 @@ export const MaxWidthCentered: Story = {
       <PageHeroHighlights v-bind="componentArgs" :style="bgStyles">
         <template #header>
           <p class="page-heading-1">Dashboard</p>
-          <p class="page-body-normal">Content column is capped at 800px — gutters grow equally on both sides.</p>
+          <p class="page-body-normal">Content column is capped at --max-width (1064px by default) — gutters grow equally on both sides.</p>
         </template>
 
         <template #highlights>
@@ -370,10 +381,10 @@ export const MaxWidthCentered: Story = {
   }),
 };
 
-/** Max width start — content column capped at 800px, pinned to the left with a fixed 16px gutter. */
+/** Max width start — content column capped at --max-width (1064px), pinned to the left. */
 export const MaxWidthStart: Story = {
   name: "Max Width — Start",
-  args: { maxWidth: "800px", contentAlign: "start" },
+  args: { widthConstrained: true, contentAlign: "start" },
   render: (args: StoryArgs) => ({
     components: { PageHeroHighlights },
     setup() {
@@ -383,7 +394,7 @@ export const MaxWidthStart: Story = {
       <PageHeroHighlights v-bind="componentArgs" :style="bgStyles">
         <template #header>
           <p class="page-heading-1">Dashboard</p>
-          <p class="page-body-normal">Content column is capped at 800px, aligned to the start — right side takes the remaining space.</p>
+          <p class="page-body-normal">Content column is capped at --max-width (1064px by default), aligned to the start — right side takes the remaining space.</p>
         </template>
 
         <template #highlights>

package/app/components/04.templates/page-hero-highlights/tests/PageHeroHighlights.spec.ts

@@ -168,39 +168,30 @@ describe("PageHeroHighlights", () => {
     expect(el.classes()).toContain("another-class");
   });
 
-  describe("gridColumns", () => {
-    interface ComponentInstance {
-      gridColumns: string;
-    }
-
-    it("defaults to fixed 16px gutters with no maxWidth", async () => {
+  describe("grid layout classes", () => {
+    it("applies center class by default", async () => {
       const wrapper = await mountSuspended(PageHeroHighlights);
-      const vm = wrapper.vm as unknown as ComponentInstance;
-      expect(vm.gridColumns).toBe("16px 1fr 16px");
+      expect(wrapper.find(".page-hero-highlights").classes()).toContain("center");
     });
 
-    it("returns centered max-width columns when maxWidth is set and contentAlign is center", async () => {
-      const wrapper = await mountSuspended(PageHeroHighlights, {
-        props: { maxWidth: "1064px", contentAlign: "center" },
-      });
-      const vm = wrapper.vm as unknown as ComponentInstance;
-      expect(vm.gridColumns).toBe("max(16px, (100% - 1064px) / 2) 1fr max(16px, (100% - 1064px) / 2)");
+    it("does not apply width-constrained class by default", async () => {
+      const wrapper = await mountSuspended(PageHeroHighlights);
+      expect(wrapper.find(".page-hero-highlights").classes()).not.toContain("width-constrained");
     });
 
-    it("returns start-aligned columns when maxWidth is set and contentAlign is start", async () => {
+    it("applies width-constrained class when widthConstrained is true", async () => {
       const wrapper = await mountSuspended(PageHeroHighlights, {
-        props: { maxWidth: "1064px", contentAlign: "start" },
+        props: { widthConstrained: true },
       });
-      const vm = wrapper.vm as unknown as ComponentInstance;
-      expect(vm.gridColumns).toBe("16px minmax(0, 1064px) minmax(16px, 1fr)");
+      expect(wrapper.find(".page-hero-highlights").classes()).toContain("width-constrained");
     });
 
-    it("ignores contentAlign when maxWidth is not set", async () => {
+    it("applies start class when contentAlign is start", async () => {
       const wrapper = await mountSuspended(PageHeroHighlights, {
         props: { contentAlign: "start" },
       });
-      const vm = wrapper.vm as unknown as ComponentInstance;
-      expect(vm.gridColumns).toBe("16px 1fr 16px");
+      expect(wrapper.find(".page-hero-highlights").classes()).toContain("start");
+      expect(wrapper.find(".page-hero-highlights").classes()).not.toContain("center");
     });
   });
 });

package/app/components/04.templates/page-hero-highlights/tests/__snapshots__/PageHeroHighlights.spec.ts.snap

@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`PageHeroHighlights > renders correct HTML structure 1`] = `
-"<div class="page-hero-highlights has-content-panel">
+"<div class="page-hero-highlights center has-content-panel">
   <div class="header-row">
     <div class="header-slot">
       <h1>Page Title</h1>

package/app/pages/page-hero-highlights.vue

@@ -4,12 +4,12 @@
       <template #layout-content>
         <PageHeroHighlights
           tag="section"
-          max-width="1064px"
-          content-align="start"
-          :content-panel="true"
-          :highlights-equal-widths="false"
-          highlights-justify="start"
-          :highlight-title-baseline="true"
+          :width-constrained="widthConstrained"
+          :content-align="contentAlign"
+          :content-panel="contentPanel"
+          :highlights-equal-widths="highlightsEqualWidths"
+          :highlights-justify="highlightsJustify"
+          :highlight-title-baseline="highlightTitleBaseline"
           :style-class-passthrough="['mbe-32']"
         >
           <template #header="{ headingId }">
@@ -38,6 +38,54 @@
               <p class="page-heading-2">Recent Activity</p>
               <p class="page-body-normal">Your most recent transactions and events will appear here.</p>
             </div>
+
+            <div class="demo-controls">
+              <p class="demo-controls__heading">Props</p>
+              <div class="demo-controls__toggles">
+                <ToggleSwitchWithLabelInline
+                  v-model="widthConstrained"
+                  name="widthConstrained"
+                  label="widthConstrained"
+                />
+                <ToggleSwitchWithLabelInline v-model="contentPanel" name="contentPanel" label="contentPanel" />
+                <ToggleSwitchWithLabelInline
+                  v-model="highlightsEqualWidths"
+                  name="highlightsEqualWidths"
+                  label="highlightsEqualWidths"
+                />
+                <ToggleSwitchWithLabelInline
+                  v-model="highlightTitleBaseline"
+                  name="highlightTitleBaseline"
+                  label="highlightTitleBaseline"
+                />
+              </div>
+              <div class="demo-controls__selects">
+                <MultipleRadiobuttons
+                  v-model="contentAlign"
+                  v-model:field-data="contentAlignData"
+                  name="contentAlign"
+                  legend="contentAlign"
+                  label="contentAlign"
+                  error-message=""
+                  :is-button="true"
+                  :is-pill="true"
+                  :field-has-error="false"
+                  options-layout="inline"
+                />
+                <MultipleRadiobuttons
+                  v-model="highlightsJustify"
+                  v-model:field-data="highlightsJustifyData"
+                  name="highlightsJustify"
+                  legend="highlightsJustify"
+                  label="highlightsJustify"
+                  error-message=""
+                  :is-button="true"
+                  :is-pill="true"
+                  :field-has-error="false"
+                  options-layout="inline"
+                />
+              </div>
+            </div>
           </template>
         </PageHeroHighlights>
       </template>
@@ -46,6 +94,8 @@
 </template>
 
 <script setup lang="ts">
+import type { IFormMultipleOptions } from "~/types/forms/types.forms";
+
 definePageMeta({
   layout: false,
 });
@@ -62,13 +112,52 @@ useHead({
     class: "page-hero-highlights-page",
   },
 });
+
+const widthConstrained = ref(false);
+const contentAlign = ref<"start" | "center">("start");
+const contentPanel = ref(true);
+const highlightsEqualWidths = ref(false);
+const highlightsJustify = ref<"start" | "center" | "end" | "space-between" | "space-around">("start");
+const highlightTitleBaseline = ref(true);
+
+const contentAlignData = ref<IFormMultipleOptions>({
+  data: [
+    { id: "align-start", name: "contentAlign", value: "start", label: "start" },
+    { id: "align-center", name: "contentAlign", value: "center", label: "center" },
+  ],
+  total: 2,
+  skip: 0,
+  limit: 2,
+});
+
+const highlightsJustifyData = ref<IFormMultipleOptions>({
+  data: [
+    { id: "justify-start", name: "highlightsJustify", value: "start", label: "start" },
+    { id: "justify-center", name: "highlightsJustify", value: "center", label: "center" },
+    { id: "justify-end", name: "highlightsJustify", value: "end", label: "end" },
+    { id: "justify-space-between", name: "highlightsJustify", value: "space-between", label: "space-between" },
+    { id: "justify-space-around", name: "highlightsJustify", value: "space-around", label: "space-around" },
+  ],
+  total: 5,
+  skip: 0,
+  limit: 5,
+});
 </script>
 
 <style lang="css">
 .page-hero-highlights-page {
   .page-hero-highlights {
+    /* Layout tokens */
+    --max-width: 1064px;
+    --page-hero-highlights-gutter-mobile: 16px;
+    --page-hero-highlights-gutter-tablet: 40px;
+    --page-hero-highlights-gutter-desktop: 32px;
+
     .page-hero-highlights-header {
-      padding-block: 4rem 3rem;
+      /* User themable tokens */
+      --phh-padding-block-mobile: 1.6rem 6rem;
+      --phh-padding-block-tablet: 2.4rem 6rem;
+      --phh-padding-block-desktop: 4.2rem 7.4rem;
     }
 
     .content-row {
@@ -76,10 +165,40 @@ useHead({
         color: black;
 
         .some-class {
-          min-height: 40svh;
+          padding-block-end: 2.4rem;
         }
       }
     }
   }
+
+  .demo-controls {
+    margin-block-start: 2.4rem;
+    padding: 1.6rem;
+    border: 1px solid var(--slate-06);
+    border-radius: 0.8rem;
+    background: var(--slate-01);
+
+    &__heading {
+      font-size: 1.1rem;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.08em;
+      color: var(--slate-08);
+      margin-block-end: 1.2rem;
+    }
+
+    &__toggles {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.4rem 2.4rem;
+      margin-block-end: 1.6rem;
+    }
+
+    &__selects {
+      display: flex;
+      flex-direction: column;
+      gap: 0.8rem;
+    }
+  }
 }
 </style>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "9.1.6",
+  "version": "9.1.8",
   "main": "nuxt.config.ts",
   "types": "types.d.ts",
   "license": "MIT",