srcdev-nuxt-components 9.1.49 → 9.1.51

package/.claude/settings.json

@@ -27,9 +27,7 @@
       "Bash(git ls-tree *)",
       "Bash(node -p \"require\\('./package.json'\\).version\")",
       "Bash(git status *)",
-      "Bash(cp /Users/simoncornforth/websites/nuxt-components/.claude/skills/components/data-grid.md /Users/simoncornforth/websites/nuxt-components/.claude/skills/components/auto-grid.md)",
-      "Bash(rm /Users/simoncornforth/websites/nuxt-components/.claude/skills/components/data-grid.md)"
-    ],
-    "additionalDirectories": []
+      "Bash(xargs ls -1)"
+    ]
   }
 }

package/.claude/settings.local.json

@@ -1,4 +1,17 @@
 {
+  "hooks": {
+    "PostToolUse": [
+      {
+        "matcher": "Bash",
+        "hooks": [
+          {
+            "type": "command",
+            "command": "grep -q '/Users/' .claude/settings.json 2>/dev/null && { echo 'settings.json contains absolute paths — move them to settings.local.json' >&2; exit 1; } || exit 0"
+          }
+        ]
+      }
+    ]
+  },
   "permissions": {
     "allow": [
       "WebSearch",
@@ -29,7 +42,13 @@
       "Bash(SRCDEV_STANDALONE=true npx vitest --run app/composables/tests/useCancellableTimer app/components/02.molecules/samaritan-prompt/tests/SamaritanPromptMixed)",
       "Bash(SRCDEV_STANDALONE=true npx vitest --run app/components/02.molecules/samaritan-prompt/tests/SamaritanPromptMixed)",
       "Bash(SRCDEV_STANDALONE=true npx vitest --run app/composables/tests/useCancellableTimer)",
-      "Bash(SRCDEV_STANDALONE=true npm run test:run -- --reporter=verbose)"
+      "Bash(SRCDEV_STANDALONE=true npm run test:run -- --reporter=verbose)",
+      "Bash(cp /Users/simoncornforth/websites/nuxt-components/.claude/skills/components/data-grid.md /Users/simoncornforth/websites/nuxt-components/.claude/skills/components/auto-grid.md)",
+      "Bash(rm /Users/simoncornforth/websites/nuxt-components/.claude/skills/components/data-grid.md)",
+      "Bash(git -C /Users/simoncornforth/websites/nuxt-components log --oneline -10)",
+      "Bash(git -C /Users/simoncornforth/websites/nuxt-components log 5a80426..HEAD --oneline)",
+      "Bash(git -C /Users/simoncornforth/websites/nuxt-components show 71c276e --stat)",
+      "Bash(git -C /Users/simoncornforth/websites/nuxt-components show a1e1641 --stat)"
     ],
     "additionalDirectories": [
       "/Users/simoncornforth/websites/nuxt-components/app/components/01.atoms/content-wrappers/content-width",
@@ -40,7 +59,8 @@
       "/Users/simoncornforth/websites/nuxt-components/app/assets/styles/extends-layer",
       "/Users/simoncornforth/websites/nuxt-components/app/components/01.atoms",
       "/private/tmp",
-      "/Users/simoncornforth/websites/nuxt-components/app/components/01.atoms/banner-video"
+      "/Users/simoncornforth/websites/nuxt-components/app/components/01.atoms/banner-video",
+      "/Users/simoncornforth/websites/nuxt-components/app/components/01.atoms/page-row"
     ]
   }
 }

package/.claude/skills/components/card-core.md

@@ -0,0 +1,205 @@
+# CardCore Component
+
+## Overview
+
+`CardCore` is a generic card container that renders dynamic named slots as stacked rows. It
+supports four visual variants, an optional blurred backdrop layer, and a full CSS custom property
+API for global and per-instance theming.
+
+---
+
+## Props reference
+
+> **Hyphenation rule**: Vue's ESLint config enforces `vue/attribute-hyphenation`. Always write
+> camelCase prop names hyphenated in templates: `:style-class-passthrough`.
+
+| Prop (template form) | Type | Default | Notes |
+|---|---|---|---|
+| `tag` | `"div" \| "section" \| "article" \| "aside" \| "main" \| "nav"` | `"div"` | Root element tag |
+| `variant` | `"solid" \| "subtle" \| "soft" \| "outline"` | `"solid"` | Visual style variant |
+| `has-dividers` | `boolean` | `false` | Adds a border between each card row |
+| `no-outline` | `boolean` | `false` | Removes border and box-shadow |
+| `:style-class-passthrough` | `string \| string[]` | `[]` | Extra classes on the root element |
+
+---
+
+## Slots
+
+Named slots are rendered as rows. Any slot name is valid — each becomes a
+`.card-row.card-row-{name}` div.
+
+```vue
+<CardCore variant="solid">
+  <template #header>Header content</template>
+  <template #body>Body content</template>
+  <template #footer>Footer content</template>
+</CardCore>
+```
+
+Rendered structure:
+
+```html
+<div class="card-core solid">
+  <div class="card-row card-row-header">...</div>
+  <div class="card-row card-row-body">...</div>
+  <div class="card-row card-row-footer">...</div>
+</div>
+```
+
+---
+
+## Public CSS token API
+
+Set `--card-core-*` tokens at `:root` (global), a page wrapper (scoped), or inline (per-instance).
+
+| Token | Default | Controls |
+|---|---|---|
+| `--card-core-row-gap` | `1rem` | Gap between card rows |
+| `--card-core-inner-padding` | `1rem` | Available for row-level padding (not applied by the component itself) |
+| `--card-core-border-radius` | `0.5rem` | Corner rounding |
+| `--card-core-border` | `0.2rem solid var(--slate-08)` | Full border shorthand |
+| `--card-core-box-shadow` | `0.1rem 0.1rem 0.4rem oklch(from var(--slate-08) l c h / 0.45)` | Box shadow shorthand |
+| `--card-core-background-color` | `transparent` | Main background colour |
+| `--card-core-background-image` | `none` | Main background image |
+| `--card-core-lower-background-color` | `transparent` | Blurred backdrop layer colour |
+| `--card-core-lower-background-image` | `none` | Blurred backdrop layer image |
+| `--card-core-lower-background-position` | `center` | Backdrop image position |
+| `--card-core-lower-background-blur` | `16px` | Backdrop blur amount |
+| `--card-core-lower-scale` | `1.1` | Backdrop scale (hides blur-edge artefact) |
+
+> **Variant note**: `solid`, `subtle`, `soft`, and `outline` variants override the internal
+> `--_card-background-color` and `--_card-border` tokens directly, bypassing the public tokens
+> for those properties. Override variant colours by targeting the variant class (see below).
+
+---
+
+## Global theming — consuming app setup file
+
+Create `assets/styles/setup/07.components/card-core.css` in the consuming app:
+
+```css
+/* assets/styles/setup/07.components/card-core.css */
+:root {
+  --card-core-border-radius: 1rem;
+  --card-core-border: 0.1rem solid var(--brand-border);
+  --card-core-box-shadow: 0 0.2rem 1.2rem rgb(0 0 0 / 8%);
+  --card-core-row-gap: 0;
+}
+
+/* variant colour overrides */
+.card-core {
+  &.solid {
+    --_card-background-color: var(--brand-surface);
+    --_card-border: 0.1rem solid var(--brand-border);
+  }
+
+  &.outline {
+    --_card-border: 0.15rem solid var(--brand-primary);
+  }
+}
+```
+
+---
+
+## Blurred backdrop pattern
+
+`--card-core-lower-*` tokens drive a `::before` pseudo-element behind all card content. Use it
+for image-backed cards with a frosted/blurred layer effect.
+
+```css
+.card-core {
+  &.hero-card {
+    --card-core-lower-background-image: url("/images/hero.jpg");
+    --card-core-lower-background-blur: 24px;
+    --card-core-lower-scale: 1.15;
+    --card-core-lower-background-color: rgb(0 0 0 / 30%);
+    --card-core-background-color: transparent;
+  }
+}
+```
+
+Or inline:
+
+```vue
+<CardCore
+  variant="solid"
+  style="
+    --card-core-lower-background-image: url('/images/hero.jpg');
+    --card-core-lower-background-blur: 20px;
+  "
+>
+  ...
+</CardCore>
+```
+
+---
+
+## Page-scoped overrides
+
+```css
+/* Unscoped <style> block in the consuming page */
+.services-page {
+  .card-core {
+    --card-core-border-radius: 1.2rem;
+    --card-core-row-gap: 0;
+
+    &.solid {
+      --_card-background-color: var(--brand-surface-alt);
+    }
+  }
+}
+```
+
+---
+
+## Per-instance override via styleClassPassthrough
+
+```vue
+<CardCore :style-class-passthrough="['featured']">
+  ...
+</CardCore>
+```
+
+```css
+.card-core {
+  &.featured {
+    --card-core-border: 0.2rem solid var(--brand-primary);
+    --card-core-box-shadow: 0 0.4rem 2rem rgb(0 0 0 / 15%);
+    --card-core-border-radius: 1.6rem;
+  }
+}
+```
+
+---
+
+## Card row targeting
+
+```css
+.card-core {
+  .card-row-header {
+    padding: 1.6rem;
+    background-color: var(--brand-primary);
+    color: white;
+  }
+
+  .card-row-body {
+    padding: 1.6rem;
+  }
+
+  .card-row-footer {
+    padding: 1.2rem 1.6rem;
+    border-top: 0.1rem solid var(--brand-border);
+  }
+}
+```
+
+---
+
+## Notes
+
+- Auto-imported in Nuxt — no manual import needed.
+- The `::before` backdrop layer sits at `z-index: 0`; all slot content is lifted to `z-index: 1`
+  automatically via the `> *` selector.
+- `--card-core-inner-padding` is available as a token but the component does not apply it to rows
+  — the consuming app is expected to set padding on `.card-row-*` selectors directly.
+- See `CONSUMER-STYLING.md` in the component source folder for the full override reference.

package/.claude/skills/components/display-dialog.md

@@ -0,0 +1,128 @@
+# DisplayDialog
+
+## Overview
+
+`DisplayDialog` is a native `<dialog>`-based overlay with header, scrollable content, and footer
+action slots. Five variants cover the common dialog patterns. Pair with `useDialogControls` for
+open/close state management.
+
+**Location**: `app/components/01.atoms/display-dialog/DisplayDialog.vue`
+
+## Props
+
+| Prop | Type | Default | Notes |
+|---|---|---|---|
+| `dataDialogId` | `string` | — | **Required.** Unique identifier rendered as `data-dialog-id` attribute. |
+| `variant` | `'dialog' \| 'modal' \| 'confirm' \| 'alert' \| 'fullscreen'` | `'dialog'` | Controls panel sizing and ARIA role. |
+| `v-model` | `boolean` | — | Controls open/closed state. |
+| `allowContentScroll` | `boolean` | `false` | Enables independent scroll on `.dialog-content`. |
+| `lockViewport` | `boolean` | `true` | Adds/removes `lock` class on `<body>` on mount/close. |
+| `justifyDialog` | `'start' \| 'center' \| 'end'` | `'center'` | Horizontal position of panel within overlay. |
+| `alignDialog` | `'start' \| 'center' \| 'end'` | `'center'` | Vertical position of panel within overlay. |
+| `styleClassPassthrough` | `string \| string[]` | `[]` | Extra classes applied to the root `<dialog>` element. |
+
+## Slots
+
+| Slot | Renders in |
+|---|---|
+| `#dialogTitle` | `.col-left` in the header (hidden when slot is empty) |
+| `#dialogContent` | `.dialog-content` (hidden when slot is empty) |
+| `#actionButtonLeft` | Left side of `.footer` |
+| `#actionButtonRight` | Right side of `.footer` |
+
+`.footer` is omitted entirely when neither action button slot is provided.
+
+## Variants
+
+| Variant | Panel size | ARIA role | Dismiss on Escape/outside-click |
+|---|---|---|---|
+| `dialog` | `70dvh × min(75%, 72rem)` | `dialog` | Yes |
+| `modal` | Content-sized | `dialog` | Yes |
+| `confirm` | Content-sized | `dialog` | Yes |
+| `alert` | `min(90%, 48rem)` | `alertdialog` | **No** — requires explicit action |
+| `fullscreen` | `100% × 100%` | `dialog` | Yes |
+
+## Basic usage
+
+```vue
+<script setup lang="ts">
+const { dialogsConfig, openDialog, closeDialog } = useDialogControls({
+  logout: {
+    onConfirm: () => performLogout(),
+    onCancel: () => {},
+  },
+})
+</script>
+
+<template>
+  <button @click="openDialog('logout')">Log out</button>
+
+  <DisplayDialog
+    v-if="dialogsConfig['logout']"
+    v-model="dialogsConfig['logout']"
+    variant="confirm"
+    data-dialog-id="logout"
+  >
+    <template #dialogTitle>
+      <p>Confirm logout?</p>
+    </template>
+    <template #dialogContent>
+      <p>Are you sure you wish to log out?</p>
+    </template>
+    <template #actionButtonLeft>
+      <button @click="closeDialog('logout', 'cancel')">Cancel</button>
+    </template>
+    <template #actionButtonRight>
+      <button @click="closeDialog('logout', 'confirm')">Log out</button>
+    </template>
+  </DisplayDialog>
+</template>
+```
+
+## Alert variant
+
+Use `variant="alert"` for destructive or attention-critical actions. Escape and outside-click
+are both disabled — the user must act via the footer buttons.
+
+```vue
+<DisplayDialog
+  v-if="dialogsConfig['deleteAccount']"
+  v-model="dialogsConfig['deleteAccount']"
+  variant="alert"
+  data-dialog-id="deleteAccount"
+>
+  <template #dialogTitle><p>Delete account?</p></template>
+  <template #dialogContent>
+    <p>This action is permanent and cannot be undone.</p>
+  </template>
+  <template #actionButtonLeft>
+    <button @click="closeDialog('deleteAccount', 'cancel')">Cancel</button>
+  </template>
+  <template #actionButtonRight>
+    <button @click="closeDialog('deleteAccount', 'confirm')">Delete account</button>
+  </template>
+</DisplayDialog>
+```
+
+## CSS token API
+
+See `CONSUMER-STYLING.md` in the component folder for the full token reference. Prefer global
+CSS over per-instance overrides — dialogs are site-wide UI:
+
+```css
+/* assets/styles/setup/07.components/display-dialog.css */
+:root {
+  --display-dialog-inner-border-radius: 1.2rem;
+  --display-dialog-inner-background: var(--brand-surface);
+  --display-dialog-inner-border: 0.1rem solid var(--brand-border);
+  --display-dialog-transition-duration: 250ms;
+}
+```
+
+## Notes
+
+- Always use `v-if="dialogsConfig['id']"` (not `v-show`) — `DisplayDialog` runs body-lock logic
+  in `onMounted`, which must only fire when the dialog actually opens.
+- `dataDialogId` is required; it is used as the `data-dialog-id` DOM attribute and as the key
+  for `useDialogControls`.
+- Related: `composable-dialog-controls.md`

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

@@ -61,7 +61,7 @@ Each slot accepts any content, but these library components are natural fits:
 | `#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.                           |
+| `#content`    | Any content component             | Below the straddle — safe to use `PageRow`, `ServicesSection`, etc.                             |
 
 Example with `HeroText` in the header slot:
 

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

@@ -0,0 +1,157 @@
+# PageRow Component
+
+## Overview
+
+`PageRow` is a page layout primitive built on CSS Grid named lines. Each `PageRow` is
+simultaneously a CSS grid container (for its children) and a grid item (when nested inside another
+`PageRow`). Compose full-width backgrounds with constrained inner content by nesting PageRows —
+no extra wrapper divs needed.
+
+---
+
+## Props reference
+
+> **Hyphenation rule**: Vue's ESLint config enforces `vue/attribute-hyphenation`. Always write
+> camelCase prop names hyphenated in templates: `:style-class-passthrough`.
+
+| Prop (template form) | Type | Default | Notes |
+|---|---|---|---|
+| `tag` | `"div" \| "section" \| "article" \| "header" \| "footer" \| "main" \| "nav"` | `"div"` | Root element tag |
+| `variant` | `"full" \| "popout" \| "content" \| "inset-content"` | `"content"` | Grid column track this element occupies when nested in another PageRow |
+| `align` | `"start" \| "end"` | — | Bleeds one side to the viewport edge while respecting the variant boundary on the other |
+| `id` | `string` | — | `id` attribute on the root element |
+| `:style-class-passthrough` | `string \| string[]` | `[]` | Extra classes on the root element |
+
+---
+
+## Track widths
+
+| Variant | Max width | Typical use |
+|---|---|---|
+| `full` | 100vw (1fr gutters) | Full-bleed backgrounds, hero sections |
+| `popout` | 1400px | Imagery, callouts that break the text column |
+| `content` | 1064px | Body text, standard page content (default) |
+| `inset-content` | 840px | Focused reading, narrower prose or forms |
+
+All widths are overridable via CSS tokens — see [Consumer styling](#consumer-css-token-api).
+
+---
+
+## Core composition pattern
+
+Nest a `variant="full"` outer PageRow (for backgrounds / borders) with inner PageRows at narrower
+variants. Direct non-PageRow children inherit the outer row's variant as their default grid column.
+
+```vue
+<!-- Full-width section background, constrained content -->
+<PageRow tag="section" variant="full" style="background: var(--brand-surface); padding-block: 6rem;">
+  <h1>Heading</h1>        <!-- spans full track -->
+  <p>Body copy</p>        <!-- spans full track -->
+
+  <!-- Break out to a narrower inner width -->
+  <PageRow variant="content">
+    <p>Constrained to 1064px</p>
+  </PageRow>
+</PageRow>
+```
+
+---
+
+## Align prop — edge bleed
+
+Combine `variant` with `align` to bleed one side to the viewport edge while keeping the opposite
+boundary at the track line. Useful for asymmetric imagery, pull-quotes, or decorative panels.
+
+```vue
+<!-- Bleeds left to viewport edge, right boundary at content-end -->
+<PageRow>
+  <PageRow variant="content" align="start" style="background: var(--brand-tint);">
+    <p>full-start → content-end</p>
+  </PageRow>
+</PageRow>
+
+<!-- Bleeds right to viewport edge, left boundary at content-start -->
+<PageRow>
+  <PageRow variant="content" align="end" style="background: var(--brand-tint);">
+    <p>content-start → full-end</p>
+  </PageRow>
+</PageRow>
+```
+
+`align` has no effect on `variant="full"` (already edge-to-edge).
+
+---
+
+## Accessibility — aria-labelledby
+
+When `tag` is `section`, `main`, or `article`, `PageRow` automatically generates an
+`aria-labelledby` attribute pointing to the first heading inside. Bind the `headingId` slot prop
+to that heading's `id` to complete the association.
+
+```vue
+<PageRow tag="section">
+  <template #default="{ headingId }">
+    <h2 :id="headingId">Section title</h2>
+    <p>Section content</p>
+  </template>
+</PageRow>
+```
+
+Non-landmark tags (`div`, `header`, `footer`, `nav`) do not receive `aria-labelledby`. The
+`headingId` slot prop is still provided but can be ignored.
+
+---
+
+## Consumer CSS token API
+
+Set `--page-row-*` tokens at `:root` (global), a page wrapper (scoped), or inline (per-instance).
+
+| Token | Default | Controls |
+|---|---|---|
+| `--page-row-minimum-content-padding` | `1rem` | Minimum gutter at narrow viewports |
+| `--page-row-popout-max-width` | `1400px` | Max width of the popout track |
+| `--page-row-content-max-width` | `1064px` | Max width of the content track |
+| `--page-row-inset-content-max-width` | `840px` | Max width of the inset-content track |
+
+### Global override
+
+```css
+/* assets/styles/setup/07.components/page-row.css */
+:root {
+  --page-row-minimum-content-padding: 1.6rem;
+  --page-row-content-max-width: 960px;
+}
+```
+
+### Page-scoped override
+
+```css
+/* Unscoped <style> in the consuming page */
+.landing-page {
+  .page-row {
+    --page-row-content-max-width: 800px;
+  }
+}
+```
+
+### Per-instance override
+
+```vue
+<PageRow variant="content" style="--page-row-content-max-width: 720px;">
+  ...
+</PageRow>
+```
+
+See `CONSUMER-STYLING.md` in the component source folder for the full override reference.
+
+---
+
+## Notes
+
+- Auto-imported in Nuxt — no manual import needed.
+- The component applies no padding, margin, or background — these are always set by the consuming
+  app on the PageRow element or its children.
+- `container-type: inline-size` is set on every `.page-row`, so `@container` queries on children
+  respond to the PageRow's own width, not the viewport.
+- Track widths are derived with `calc()` from the four tokens — adjusting one token shifts all
+  related tracks proportionally.

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

@@ -48,11 +48,11 @@ Set on `.services-card-grid` (or scoped to a page class):
   <div>
     <NuxtLayout name="default">
       <template #layout-content>
-        <LayoutRow tag="div" variant="content" :style-class-passthrough="['mbe-20']">
+        <PageRow tag="div" variant="content" :style-class-passthrough="['mbe-20']">
           <h1 class="page-heading-1">Services</h1>
-        </LayoutRow>
+        </PageRow>
 
-        <LayoutRow tag="div" variant="content" :style-class-passthrough="['mbe-20']">
+        <PageRow tag="div" variant="content" :style-class-passthrough="['mbe-20']">
           <ServicesCardGrid
             :services-data="servicesData ?? []"
             :eyebrow-config="{ fontSize: 'large' }"
@@ -60,7 +60,7 @@ Set on `.services-card-grid` (or scoped to a page class):
             href-base="/services/"
             button-text-prefix="More on"
           />
-        </LayoutRow>
+        </PageRow>
       </template>
     </NuxtLayout>
   </div>

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

@@ -71,11 +71,11 @@ The slot is forwarded from the inner `ServicesSection` and receives the current
   <div>
     <NuxtLayout name="default">
       <template #layout-content>
-        <LayoutRow tag="div" variant="content" :style-class-passthrough="['mbe-20']">
+        <PageRow tag="div" variant="content" :style-class-passthrough="['mbe-20']">
           <h1 class="page-heading-1">Our Services</h1>
-        </LayoutRow>
+        </PageRow>
 
-        <LayoutRow tag="div" variant="content" :style-class-passthrough="['mbe-20']">
+        <PageRow tag="div" variant="content" :style-class-passthrough="['mbe-20']">
           <ServicesSectionGrid
             :services-data="servicesData ?? []"
             :use-alternate-reverse="true"
@@ -89,7 +89,7 @@ The slot is forwarded from the inner `ServicesSection` and receives the current
               />
             </template>
           </ServicesSectionGrid>
-        </LayoutRow>
+        </PageRow>
       </template>
     </NuxtLayout>
   </div>