srcdev-nuxt-components 9.0.15 → 9.0.17

package/.claude/skills/components/contact-section.md

@@ -0,0 +1,101 @@
+# ContactSection Component
+
+## Overview
+
+`ContactSection` is a two-column molecule that pairs a 3-item info list (using `StepperList` internally) with a contact form slot. On narrow viewports the columns stack; at 768 px and above they sit side by side.
+
+---
+
+## Props reference
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `tag` | `"div" \| "section" \| "article" \| "main"` | `"div"` | Root HTML element. Use `"section"` when the landmark is meaningful. |
+| `stepperIndicatorSize` | `string` | `"3rem"` | Passed through to the internal `StepperList` `indicatorSize` prop. Any valid CSS length. |
+| `styleClassPassthrough` | `string \| string[]` | `[]` | Extra CSS classes applied to the root element. |
+
+---
+
+## Slot API
+
+The component exposes 7 slots — 3 info-item slots, 3 indicator slots, and a form slot.
+
+| Slot | Purpose |
+|------|---------|
+| `#item-0` | Content of the first info item |
+| `#item-1` | Content of the second info item |
+| `#item-2` | Content of the third info item |
+| `#indicator-0` | Custom indicator icon for item 0 (optional — CSS counter bubble shown if omitted) |
+| `#indicator-1` | Custom indicator icon for item 1 (optional) |
+| `#indicator-2` | Custom indicator icon for item 2 (optional) |
+| `#form` | Contact form or any right-column content |
+
+Slots are **zero-indexed**. The internal `StepperList` is always rendered with `itemCount="3"` and `:connected="false"`.
+
+---
+
+## Usage examples
+
+### Default (no slots)
+
+```vue
+<ContactSection />
+```
+
+Renders three placeholder `<p>` tags and an empty form column.
+
+### With info content and a form
+
+```vue
+<ContactSection tag="section" :stepper-indicator-size="'2.4rem'">
+  <template #item-0>
+    <div>
+      <strong>Get in touch</strong>
+      <p class="page-body-normal">We'd love to hear from you.</p>
+    </div>
+  </template>
+  <template #item-1>
+    <div>
+      <strong>Email us</strong>
+      <p class="page-body-normal"><a href="mailto:hello@example.com">hello@example.com</a></p>
+    </div>
+  </template>
+  <template #item-2>
+    <div>
+      <strong>Call us</strong>
+      <p class="page-body-normal"><a href="tel:+441234567890">+44 1234 567 890</a></p>
+    </div>
+  </template>
+  <template #form>
+    <form>...</form>
+  </template>
+</ContactSection>
+```
+
+### With custom indicator icons
+
+```vue
+<ContactSection>
+  <template #indicator-0>
+    <Icon name="lucide-map-pin" class="indicator-icon" />
+  </template>
+  <template #item-0>
+    <div>
+      <strong>Location</strong>
+      <p class="page-body-normal">123 High Street, Bath, BA1 1AA</p>
+    </div>
+  </template>
+  <!-- repeat for indicator-1/item-1, indicator-2/item-2 -->
+</ContactSection>
+```
+
+Custom indicator content should use the `indicator-icon` class so the icon inherits the correct size and colour from `StepperList`.
+
+---
+
+## Notes
+
+- `stepperIndicatorSize` passes directly to the internal `StepperList` `indicatorSize` — use it to scale the indicator bubble/icon area. Default `"3rem"` is 30 px at the project's `62.5%` rem base.
+- The internal `StepperList` always uses `tag="ul"`, `:connected="false"`, and `indicator-alignment="top"`. These are not configurable from `ContactSection`.
+- Auto-imported in Nuxt — no manual import needed.
+- See [stepper-list.md](stepper-list.md) for `StepperList` prop details and CSS custom property theming.

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.