srcdev-nuxt-components 9.0.15 → 9.0.16

package/.claude/skills/components/expanding-panel.md

@@ -0,0 +1,156 @@
+# ExpandingPanel Component
+
+## Overview
+
+`ExpandingPanel` is a single expand/collapse panel built on the native `<details>`/`<summary>` element. It animates open/close via a CSS grid-template-rows trick, supports `v-model` for controlled state, and can be locked open with `forceOpened`. Multiple panels can be grouped into a native accordion by sharing the same `name` prop (see `AccordianCore`).
+
+---
+
+## Props reference
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `name` | `string` | `useId()` | Identifies the panel. Used in ARIA attributes (`id-{name}-trigger`, `id-{name}-content`). If omitted, a unique id is generated automatically. |
+| `animationDuration` | `number` | `400` | Expand/collapse transition duration in milliseconds. Pass `0` to disable animation. |
+| `forceOpened` | `boolean` | `false` | When `true`, the panel is always open. The toggle icon is hidden and clicks do not close the panel. |
+| `styleClassPassthrough` | `string \| string[]` | `[]` | Extra CSS classes applied to the root `.expanding-panel` element. |
+
+## Model
+
+| Model | Type | Default | Notes |
+|-------|------|---------|-------|
+| `v-model` | `boolean` | `false` | Controls open/closed state. Bind to a `ref<boolean>` to manage state externally. |
+
+---
+
+## Slots
+
+| Slot | Purpose |
+|------|---------|
+| `#summary` | Content rendered inside the clickable `<summary>` row (label area). |
+| `#icon` | Custom toggle icon. Defaults to a `bi:caret-down-fill` icon that flips on open. Hidden when `forceOpened` is `true`. |
+| `#content` | Content revealed when the panel is open. Can contain any markup. |
+
+---
+
+## Usage examples
+
+### Basic uncontrolled panel
+
+```vue
+<ExpandingPanel name="delivery">
+  <template #summary>
+    <span>Delivery &amp; Returns</span>
+  </template>
+  <template #content>
+    <p>Free standard delivery on orders over £50.</p>
+  </template>
+</ExpandingPanel>
+```
+
+### Controlled via v-model
+
+```vue
+<script setup lang="ts">
+const isOpen = ref(false);
+</script>
+
+<template>
+  <ExpandingPanel name="faq-1" v-model="isOpen">
+    <template #summary><span>What is your returns policy?</span></template>
+    <template #content><p>You can return any item within 30 days.</p></template>
+  </ExpandingPanel>
+  <button @click="isOpen = !isOpen">Toggle externally</button>
+</template>
+```
+
+### Force opened (always visible, no toggle)
+
+```vue
+<ExpandingPanel name="notice" :force-opened="true">
+  <template #summary><strong>Important notice</strong></template>
+  <template #content>
+    <p>This panel cannot be collapsed.</p>
+  </template>
+</ExpandingPanel>
+```
+
+### Custom icon
+
+```vue
+<ExpandingPanel name="custom-icon">
+  <template #summary><span>Section title</span></template>
+  <template #icon>
+    <svg width="12" height="12" viewBox="0 0 12 12">
+      <path d="M6 9L1 3h10z" fill="currentColor" />
+    </svg>
+  </template>
+  <template #content><p>Content here.</p></template>
+</ExpandingPanel>
+```
+
+### Slow animation
+
+```vue
+<ExpandingPanel name="slow" :animation-duration="800">
+  <template #summary><span>Slow panel</span></template>
+  <template #content><p>Opens and closes over 800 ms.</p></template>
+</ExpandingPanel>
+```
+
+---
+
+## ARIA / accessibility
+
+The component wires ARIA automatically from the `name` prop:
+
+| Element | Attribute | Value |
+|---------|-----------|-------|
+| `<summary>` | `id` | `id-{name}-trigger` |
+| `<summary>` | `aria-controls` | `id-{name}-content` |
+| `<summary>` | `aria-expanded` | `true` / `false` |
+| content div | `id` | `id-{name}-content` |
+| content div | `aria-labelledby` | `id-{name}-trigger` |
+| content div | `role` | `region` |
+
+Always supply a meaningful `name` prop when using multiple panels on the same page to avoid duplicate IDs.
+
+---
+
+## Local style override scaffold
+
+When consuming this component, scaffold a style block using `styleClassPassthrough`. Delete the block if unused.
+
+See [component-local-style-override.md](../component-local-style-override.md) for the full pattern.
+
+```vue
+<ExpandingPanel name="my-item" :style-class-passthrough="['my-panel']">
+  ...
+</ExpandingPanel>
+
+<style>
+/* ─── ExpandingPanel local overrides ───────────────────────────────
+   Colours, borders, geometry only — do not override behaviour.
+   Delete this block if no overrides are needed.
+   ─────────────────────────────────────────────────────────────────── */
+.expanding-panel {
+  &.my-panel {
+    /* Border */
+    /* border-block-end: 1px solid currentColor; */
+
+    /* Summary row geometry */
+    /* .expanding-panel-details .expanding-panel-summary { padding-block: 1.2rem; } */
+  }
+}
+</style>
+```
+
+---
+
+## Notes
+
+- The open/close animation uses `grid-template-rows: 0fr → 1fr` — no JS height measurement needed.
+- When `forceOpened` is `true`, `open` stays `true` regardless of `v-model`, but `v-model` still updates internally on clicks (useful if you later set `forceOpened` back to `false`).
+- Group panels into a native accordion (only one open at a time) by passing the same `name` to multiple panels or use `AccordianCore` which handles this automatically.
+- Auto-imported in Nuxt — no manual import needed.
+- File: `app/components/02.molecules/expandable/expanding-panel/ExpandingPanel.vue`

package/.claude/skills/components/eyebrow-text.md

@@ -77,6 +77,31 @@ Text is always `text-transform: uppercase` — do not pass pre-uppercased string
 
 Override via `styleClassPassthrough` or a parent HOC `<style>` block targeting `.eyebrow-text`.
 
+## Local style override scaffold
+
+When consuming this component, scaffold a style block using `styleClassPassthrough`. Delete the block if unused.
+
+See [component-local-style-override.md](../component-local-style-override.md) for the full pattern.
+
+```vue
+<EyebrowText :style-class-passthrough="['my-eyebrow']" text-content="Our Services" />
+
+<style>
+/* ─── EyebrowText local overrides ──────────────────────────────────
+   Colours, borders, geometry only — do not override behaviour.
+   Delete this block if no overrides are needed.
+   ─────────────────────────────────────────────────────────────────── */
+.eyebrow-text {
+  &.my-eyebrow {
+    /* Colours */
+    /* --colour-text-eyebrow: var(--brand-accent); */
+  }
+}
+</style>
+```
+
+> **Note:** Font size is controlled via the `fontSize` prop and theme tokens `--eyebrow-text-large/medium/small` — define these at theme level, not as local overrides.
+
 ## Notes
 
 - Component is auto-imported in Nuxt — no import needed.

package/.claude/skills/components/hero-text.md

@@ -103,6 +103,31 @@ Key CSS custom properties:
 - `--colour-text-accent` — colour applied to `.accent` spans and the icon
 - `--hero-text-{scale}` — font size per scale value
 
+## Local style override scaffold
+
+When consuming this component, scaffold a style block using `styleClassPassthrough`. Delete the block if unused.
+
+See [component-local-style-override.md](../component-local-style-override.md) for the full pattern.
+
+```vue
+<HeroText :style-class-passthrough="['my-hero']" tag="h1" :text-content="[...]" />
+
+<style>
+/* ─── HeroText local overrides ─────────────────────────────────────
+   Colours, borders, geometry only — do not override behaviour.
+   Delete this block if no overrides are needed.
+   ─────────────────────────────────────────────────────────────────── */
+.hero-text {
+  &.my-hero {
+    /* Colours */
+    /* --colour-text-accent: var(--brand-primary); */
+  }
+}
+</style>
+```
+
+> **Note:** Font size is controlled via the `fontSize` prop and theme tokens `--hero-text-display/title/heading/subheading/label` — define these at theme level, not as local overrides.
+
 ## Notes
 
 - Text segments are trimmed and a trailing space is automatically appended between segments in horizontal axis — do not manually pad `text` values.

package/.claude/skills/components/layout-grid-by-cols.md

@@ -0,0 +1,147 @@
+# LayoutGridByCols Component
+
+## Overview
+
+`LayoutGridByCols` is a CSS grid layout wrapper that arranges content into a fixed number of equal-width columns. It uses **named dynamic slots** — the component renders whatever slots the consumer passes, in the order they appear. It collapses to a single column below a configurable breakpoint.
+
+---
+
+## Slot pattern
+
+Pass any number of slots with any names. The component renders each one in document order inside the grid.
+
+```vue
+<LayoutGridByCols :column-count="3">
+  <template #item-0><ServicesCard /></template>
+  <template #item-1><ServicesCard /></template>
+  <template #item-2><ServicesCard /></template>
+</LayoutGridByCols>
+```
+
+When filling from a data array, use a dynamic slot name in a `v-for`:
+
+```vue
+<LayoutGridByCols :column-count="3">
+  <template v-for="(item, i) in items" #[`item-${i}`] :key="i">
+    <ServicesCard :data="item" />
+  </template>
+</LayoutGridByCols>
+```
+
+---
+
+## Props reference
+
+> **Hyphenation rule**: Vue's ESLint config enforces `vue/attribute-hyphenation`. Always write camelCase prop names hyphenated in templates: `:column-count`, `:single-col-below`, `:style-class-passthrough`.
+
+| Prop (template form) | Type | Default | Notes |
+|------|------|---------|-------|
+| `:column-count` | `2 \| 3 \| 4 \| 5 \| 6` | `2` | Number of equal-width columns above `single-col-below`. Minimum is 2. |
+| `:gap` | `string` | `"1rem"` | Any valid CSS length or shorthand. |
+| `:single-col-below` | `string` | `"768px"` | Container width below which the grid collapses to a single column. |
+| `tag` | `"div" \| "section"` | `"div"` | Use `"section"` for semantic page regions. |
+| `label` | `string` | `""` | Required when `tag="section"` — rendered as a visually-hidden `<p>` linked via `aria-labelledby`. |
+| `:style-class-passthrough` | `string \| string[]` | `[]` | Extra CSS classes on the root element. |
+
+---
+
+## Usage examples
+
+### Two-column grid (default)
+
+```vue
+<LayoutGridByCols>
+  <template #left>
+    <p>Left cell</p>
+  </template>
+  <template #right>
+    <p>Right cell</p>
+  </template>
+</LayoutGridByCols>
+```
+
+### Three-column card grid
+
+```vue
+<LayoutGridByCols :column-count="3" gap="2rem">
+  <template #card-a><ServicesCard title="Card A" /></template>
+  <template #card-b><ServicesCard title="Card B" /></template>
+  <template #card-c><ServicesCard title="Card C" /></template>
+</LayoutGridByCols>
+```
+
+### Section with accessible label
+
+```vue
+<LayoutGridByCols tag="section" label="Our team" :column-count="4" gap="1.6rem">
+  <template #alice><TeamCard name="Alice" /></template>
+  <template #bob><TeamCard name="Bob" /></template>
+  <template #carol><TeamCard name="Carol" /></template>
+  <template #dan><TeamCard name="Dan" /></template>
+</LayoutGridByCols>
+```
+
+### Data-driven with v-for
+
+```vue
+<LayoutGridByCols :column-count="3">
+  <template v-for="(item, i) in items" #[`item-${i}`] :key="i">
+    <Card :data="item" />
+  </template>
+</LayoutGridByCols>
+```
+
+---
+
+## Accessibility
+
+- When `tag="section"`, the root element automatically receives `aria-labelledby` pointing to a visually-hidden `<p>` with the `label` value.
+- Always provide a meaningful `label` when using `tag="section"`.
+- When `tag="div"`, no label or ARIA attributes are added.
+
+---
+
+## Responsive behaviour
+
+Uses **CSS container queries** (`container-type: inline-size`) — responds to its own container width, not the viewport.
+
+- **Below `singleColBelow`**: single-column stacked layout.
+- **At or above `singleColBelow`**: `columnCount`-column grid.
+
+---
+
+## Local style override scaffold
+
+When consuming this component, scaffold a style block using `styleClassPassthrough`. Delete the block if unused.
+
+See [component-local-style-override.md](../component-local-style-override.md) for the full pattern.
+
+```vue
+<LayoutGridByCols :style-class-passthrough="['my-grid']" :column-count="3">
+  ...
+</LayoutGridByCols>
+
+<style>
+/* ─── LayoutGridByCols local overrides ─────────────────────────────
+   Colours, borders, geometry only — do not override behaviour.
+   Delete this block if no overrides are needed.
+   ─────────────────────────────────────────────────────────────────── */
+.layout-grid-by-cols {
+  &.my-grid {
+    /* Colours */
+    /* background: var(--brand-surface); */
+  }
+}
+</style>
+```
+
+> **Note:** `gap` and `column-count` are prop-driven — use the props rather than CSS overrides for layout changes.
+
+---
+
+## Notes
+
+- Auto-imported in Nuxt — no manual import needed.
+- `column-count` is clamped to a minimum of 2 internally.
+- `gap` accepts any CSS value including compound values like `"1rem 2rem"`.
+- Slot names can be anything — semantic or indexed. Document order determines render order.

package/.claude/skills/components/layout-row.md

@@ -196,6 +196,41 @@ Override in consuming app to adjust all track sizes globally:
 
 ---
 
+## Local style override scaffold
+
+When consuming this component, scaffold a style block using `styleClassPassthrough`. Delete the block if unused.
+
+See [component-local-style-override.md](../component-local-style-override.md) for the full pattern.
+
+```vue
+<LayoutRow variant="content" :style-class-passthrough="['my-row']">
+  ...
+</LayoutRow>
+
+<style>
+/* ─── LayoutRow local overrides ────────────────────────────────────
+   Colours, borders, geometry only — do not override behaviour.
+   Delete this block if no overrides are needed.
+   ─────────────────────────────────────────────────────────────────── */
+.layout-row {
+  &.my-row {
+    /* Track widths — for this instance only */
+    /* --content-max-width: 1200px; */
+    /* --popout-max-width: 1600px; */
+    /* --inset-content-max-width: 900px; */
+    /* --minimum-content-padding: 2rem; */
+
+    /* Colours */
+    /* background: var(--brand-surface); */
+  }
+}
+</style>
+```
+
+> **Note:** Track width custom properties set here affect only this instance. For site-wide changes, set them at `:root` or theme level.
+
+---
+
 ## Notes
 
 - Auto-imported in Nuxt — no import needed.

package/.claude/skills/components/link-text.md

@@ -93,6 +93,39 @@ Key CSS custom properties — define these in your consuming app to control appe
 
 Override via `styleClassPassthrough` or a parent HOC `<style>` block targeting `.link-text`.
 
+## Local style override scaffold
+
+When consuming this component, scaffold a style block using `styleClassPassthrough`. Delete the block if unused.
+
+See [component-local-style-override.md](../component-local-style-override.md) for the full pattern.
+
+```vue
+<LinkText :style-class-passthrough="['my-link']" to="/path" link-text="Learn More" />
+
+<style>
+/* ─── LinkText local overrides ─────────────────────────────────────
+   Colours, borders, geometry only — do not override behaviour.
+   Delete this block if no overrides are needed.
+   ─────────────────────────────────────────────────────────────────── */
+.link-text {
+  &.my-link {
+    /* Colours */
+    /* --link-text-colour: var(--brand-primary); */
+    /* --link-text-colour-hover: var(--brand-primary-dark); */
+
+    /* Typography */
+    /* --link-text-font-size: 1.6rem; */
+    /* --link-text-decoration: underline; */
+    /* --link-text-decoration-hover: none; */
+    /* --link-text-underline-offset: 0.3em; */
+
+    /* Geometry */
+    /* --link-text-gap: 0.6em; */
+  }
+}
+</style>
+```
+
 ## Notes
 
 - Component is auto-imported in Nuxt — no import needed.

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

@@ -0,0 +1,224 @@
+# PageHeroHighlights Component
+
+## Overview
+
+`PageHeroHighlights` is a page-level layout template that creates a "hero + highlights strip" grid. It has:
+
+- A **header zone** — full edge-to-edge background, content drives the row height
+- A **highlights strip** — straddles the header/content boundary (overlaps both), sits above via `z-index`
+- A **content zone** — background fills behind the highlights strip, actual content sits below it
+
+The layout uses a 4-row CSS Grid with `subgrid` — no `translate`, negative margins, or absolute positioning.
+
+## Props
+
+| Prop                    | Type                                                                | Default     | Description                                                                                                                     |
+| ----------------------- | ------------------------------------------------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------- |
+| `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.   |
+| `styleClassPassthrough` | `string \| string[]`                                                | `[]`        | Extra classes on the root element                                                                                               |
+
+## Slots
+
+| Slot         | Slot props              | Purpose                             |
+| ------------ | ----------------------- | ----------------------------------- |
+| `header`     | `{ headingId: string }` | Header zone — text, title, subtitle |
+| `highlights` | —                       | Highlight cards in the strip        |
+| `content`    | —                       | Page body content below the strip   |
+
+## Basic usage
+
+```vue
+<PageHeroHighlights>
+  <template #header>
+    <p class="page-heading-1">Dashboard</p>
+    <p class="page-body-normal">Overview of your account activity.</p>
+  </template>
+
+  <template #highlights>
+    <div class="card">Total Revenue: £24,500</div>
+    <div class="card">Active Users: 1,284</div>
+    <div class="card">Open Tasks: 37</div>
+  </template>
+
+  <template #content>
+    <p class="page-heading-2">Recent Activity</p>
+  </template>
+</PageHeroHighlights>
+```
+
+## Composition with other library components
+
+Each slot accepts any content, but these library components are natural fits:
+
+| Slot          | Component                         | Notes                                                                                           |
+| ------------- | --------------------------------- | ----------------------------------------------------------------------------------------------- |
+| `#header`     | `HeroText`                        | Heading with accent text, icon, and configurable size — wires `headingId` for `aria-labelledby` |
+| `#highlights` | `ServicesCard` (×n)               | Portrait cards with image, title, description, and CTA slot                                     |
+| `#highlights` | `LayoutGridByCols` wrapping cards | When you want a responsive column grid rather than a single row of cards                        |
+| `#content`    | Any content component             | Below the straddle — safe to use `LayoutRow`, `ServicesSection`, etc.                           |
+
+Example with `HeroText` in the header slot:
+
+```vue
+<PageHeroHighlights tag="section" max-width="1064px">
+  <template #header="{ headingId }">
+    <HeroText :heading-id="headingId" text="Welcome back" accent-text="Simon" />
+  </template>
+
+  <template #highlights>
+    <ServicesCard v-for="item in highlights" :key="item.id" v-bind="item">
+      <template #actions>
+        <LinkText :href="item.href">View</LinkText>
+      </template>
+    </ServicesCard>
+  </template>
+
+  <template #content>
+    <!-- page body -->
+  </template>
+</PageHeroHighlights>
+```
+
+## With aria-labelledby (section tag)
+
+When `tag="section"`, `aria-labelledby` is set automatically. Wire the heading id via the scoped slot prop:
+
+```vue
+<PageHeroHighlights tag="section">
+  <template #header="{ headingId }">
+    <h1 :id="headingId" class="page-heading-1">Dashboard</h1>
+  </template>
+  ...
+</PageHeroHighlights>
+```
+
+See [component-aria-landmark.md](../component-aria-landmark.md) for the full pattern.
+
+## Equal-width highlights
+
+By default, highlight items size to their content (`flex-wrap`). Pass `:highlights-equal-widths="true"` to switch to a grid where all items share equal column widths:
+
+```vue
+<PageHeroHighlights :highlights-equal-widths="true">
+  ...
+</PageHeroHighlights>
+```
+
+## 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:
+
+```vue
+<!-- Centred, capped at 1064px -->
+<PageHeroHighlights max-width="1064px" content-align="center">...</PageHeroHighlights>
+
+<!-- Left-pinned, capped at 1064px (right side takes remaining space) -->
+<PageHeroHighlights max-width="1064px" content-align="start">...</PageHeroHighlights>
+```
+
+See [css-grid-max-width-gutters.md](../css-grid-max-width-gutters.md) for the full pattern explanation.
+
+## Local style override scaffold
+
+When consuming this component, scaffold a style block using `styleClassPassthrough`. The block below lists every available CSS custom property — update the values you need and delete the rest.
+
+See [component-local-style-override.md](../component-local-style-override.md) for the full pattern.
+
+```vue
+<PageHeroHighlights :style-class-passthrough="['my-page-hero']">
+  ...
+</PageHeroHighlights>
+
+<style>
+/* ─── PageHeroHighlights local overrides ────────────────────────────
+   Update values as needed. Delete tokens you are not overriding.
+   ─────────────────────────────────────────────────────────────────── */
+.page-hero-highlights {
+  &.my-page-hero {
+    /* Header zone */
+    /* --header-row-background-colour: darkblue; */
+
+    /* Highlights strip */
+    /* --highlights-row-item-gap: 1rem; */
+    /* --highlights-row-initial-item-offset: 1.2rem; */
+
+    /* Highlight cards */
+    /* --highlight-rows-gap: 1.2rem; */
+    /* --highlight-title-height: 1fr; */ /* see: highlight-title-baseline prop */
+    /* --highlight-padding-block-start: 1.2rem; */
+    /* --highlight-padding: 1.2rem; */
+    /* --highlight-background-color: white; */
+    /* --highlight-border: 1px solid black; */
+    /* --highlight-border-radius: 8px; */
+    /* --highlight-color: black; */
+
+    /* Content zone */
+    /* --content-row-background-color: var(--slate-01); */ /* transparent */
+    /* --content-row-start-gap: 1.2rem; */
+    /* --content-row-end-gap: 1.2rem; */
+
+    /* Content slot decorative border */
+    /* --content-slot-margin-block-start: 2.4rem; */
+    /* --content-slot-margin: var(--highlights-row-initial-item-offset); */
+    /* --content-slot-background-color: var(--slate-00); */
+    /* --content-slot-border: 1px solid var(--slate-06); */
+    /* --content-slot-border-radius: 0.8rem; */
+    /* --content-slot-outline: 1px solid var(--slate-02); */
+
+    /* When using :highlight-title-baseline="true" */
+    /* &.highlight-title-baseline { */
+    /*   --highlight-title-height: 4rem; */ /* proportional value preferred */
+    /*   --highlight-padding-block-start: 0; */
+    /* } */
+  }
+}
+</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
+col:  [gutter] [centre] [gutter]
+row1: header content (height driven by slot)
+row2: highlights top half  ← highlights spans rows 2–3, z-index: 1
+row3: highlights bottom half
+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.
+
+## 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.
+
+```css
+/* ❌ — breaks the straddle when items are auto-placed by column flow */
+&.equal-widths {
+  display: grid;
+  grid-template-rows: subgrid; /* row 3 collapses */
+  grid-auto-columns: 1fr;
+  grid-auto-flow: column;
+}
+
+/* ✅ — single implicit row; items stretch to fill combined height of rows 2–3 */
+&.equal-widths {
+  display: grid;
+  grid-auto-columns: 1fr;
+  grid-auto-flow: column;
+}
+```
+
+## Notes
+
+- 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.