srcdev-nuxt-components 9.4.11 → 9.5.0

package/.claude/skills/components/opening-hours.md

@@ -0,0 +1,116 @@
+# OpeningHours Component
+
+## Overview
+
+`OpeningHours` (`app/components/02.molecules/opening-hours/`) renders a business's weekly opening
+hours as a `<dl>`, plus an optional "special opening times" list for bank holidays, closures etc.
+Data is authored **per day**; the component groups consecutive identical days into ranges
+("Monday – Saturday") itself, so a single day change never leaves a hand-written range stale.
+
+Covers: single sessions, split sessions (restaurant lunch/dinner), closed days, 24 hours,
+by appointment, overnight sessions (closes after midnight), per-day notes, date/date-range
+exceptions, today highlight, schema.org JSON-LD. Not included (yet): a live "open now" status.
+
+---
+
+## Props reference
+
+> **Hyphenation rule**: write camelCase props hyphenated in templates (`:hour12`, `group-days`).
+
+| Prop (template form) | Type | Default | Notes |
+|---|---|---|---|
+| `:days` | `OpeningDay[]` | (required) | One entry per day; missing days render as closed |
+| `:exceptions` | `OpeningException[]` | `[]` | Special dates, listed under their own heading |
+| `locale` | `string` | `"en-GB"` | Drives day names, dates and time format via `Intl` |
+| `:hour12` | `boolean` | `false` | 12-hour am/pm times |
+| `day-format` | `"long" \| "short"` | `"long"` | "Monday" vs "Mon" |
+| `:group-days` | `boolean` | `true` | Collapse consecutive identical days; `false` lists all seven |
+| `week-starts-on` | `"monday" \| "sunday"` | `"monday"` | Row order |
+| `:highlight-today` | `boolean` | `true` | Marks today's row with `data-today` + `aria-current="date"` |
+| `:hide-past-exceptions` | `boolean` | `true` | Drops exceptions whose end date has passed |
+| `time-zone` | `string` | visitor's | IANA zone used to work out "today"; set to the business's zone |
+| `heading-tag` | `"h2"`–`"h6"` | `"h3"` | Level of the exceptions heading |
+| `exceptions-heading` | `string` | `"Special opening times"` | `""` omits the heading |
+| `closed-label` | `string` | `"Closed"` | |
+| `open24-hours-label` | `string` | `"Open 24 hours"` | |
+| `by-appointment-label` | `string` | `"By appointment only"` | |
+| `to-label` | `string` | `"to"` | Screen-reader word read in place of the visual dash |
+| `:structured-data` | `OpeningHoursStructuredData` | `undefined` | When set, emits LocalBusiness JSON-LD via `useHead` (read once at setup) |
+| `:style-class-passthrough` | `string \| string[]` | `[]` | Classes on the root; reactive |
+
+All visible text is a prop or comes from `Intl`, so passing `locale` plus translated labels fully
+localises it.
+
+### Data shape
+
+Importable: `import type { OpeningDay, OpeningException, OpeningSession, OpeningStatus, OpeningHoursStructuredData } from "srcdev-nuxt-components"`
+(source: `app/types/components/opening-hours.d.ts`).
+
+```ts
+type OpeningWeekday = 0 | 1 | 2 | 3 | 4 | 5 | 6; // 0 = Monday, 6 = Sunday
+type OpeningStatus = "open" | "closed" | "24-hours" | "by-appointment";
+
+interface OpeningSession { opens: string; closes: string; label?: string } // 24h "HH:MM"
+interface OpeningDay {
+  day: OpeningWeekday;
+  status?: OpeningStatus;     // default: "open" if sessions given, else "closed"
+  sessions?: OpeningSession[];
+  note?: string;
+}
+interface OpeningException {
+  from: string;               // "YYYY-MM-DD"
+  to?: string;                // inclusive, omit for one day
+  label?: string;             // "Christmas"
+  status?: OpeningStatus;     // same default rule; no sessions = closed
+  sessions?: OpeningSession[];
+  note?: string;
+}
+interface OpeningHoursStructuredData { type?: string; name?: string; id?: string }
+```
+
+Times are always authored as 24-hour strings; `hour12` only changes the display. A `closes`
+earlier than `opens` means the session runs past midnight and is displayed as given.
+
+---
+
+## Behaviour notes
+
+- Grouping compares status, sessions and note; only **consecutive** days (in `week-starts-on`
+  order) group. No wrap-around from Sunday to Monday.
+- Exceptions don't alter the weekly table; they are listed separately.
+- Today's highlight and past-exception hiding run in `onMounted`, never on the server, so cached
+  HTML can't carry a stale day. Past exceptions are briefly visible before hydration.
+- **Structured data**: emits `{ "@type": structuredData.type ?? "LocalBusiness", "@id", name,
+  openingHoursSpecification }`. If the site already has a main business JSON-LD block, either pass
+  the same `id` so search engines merge the two, or skip the prop and call the auto-imported
+  `buildOpeningHoursSpecification(days, exceptions)` util (`app/utils/opening-hours.ts`) to add
+  the hours to the existing block. Closed and by-appointment weekly days are omitted; closed
+  exceptions use `opens = closes = "00:00"` per schema.org; 24 hours uses `00:00`–`23:59`.
+
+---
+
+## Usage
+
+```vue
+<OpeningHours :days="openingDays" :exceptions="specialDates" time-zone="Europe/London" />
+```
+
+Restaurant with split sessions, 12-hour display and JSON-LD:
+
+```vue
+<OpeningHours
+  :days="restaurantDays"
+  :hour12="true"
+  time-zone="Europe/London"
+  :structured-data="{ type: 'Restaurant', name: 'The Anchor', id: 'https://example.com/#business' }"
+/>
+```
+
+```ts
+const restaurantDays: OpeningDay[] = [
+  { day: 1, sessions: [{ opens: "12:00", closes: "14:30", label: "Lunch" }, { opens: "18:00", closes: "22:00", label: "Dinner" }] },
+  { day: 5, sessions: [{ opens: "18:00", closes: "01:00" }], note: "Last orders 23:30" },
+];
+```
+
+Styling: `--opening-hours-*` tokens, see `CONSUMER-STYLING.md` next to the component.

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

@@ -1,5 +1,7 @@
 # PageHeroHighlights Component
 
+> **Changed 2026-09-28:** styles are now in `@layer components` (they were unlayered). Every token is `--page-hero-highlights-*` with its default as a `var()` fallback, so it can be set on the component or any ancestor (previously declared on the root with generic names like `--max-width`, `--highlight-border`, so ancestor values never landed). Inner classes are prefixed (`.page-hero-highlights-header-row`, `-header-slot`, `-strip`, `-content-row`, `-content-slot`); the content-align root classes are `.content-align-start`/`.content-align-center` (were bare `.start`/`.center`); the highlight contract classes are `.page-hero-highlights-item`, `-item-title`, `-item-body` (were `.highlight`, `.title`, `.body`); PageHeroHighlightsHeader uses `.page-hero-highlights-header-start`/`-end` and `--page-hero-highlights-header-*` tokens (were `.phh-*` / `--phh-*`). Full token reference: `CONSUMER-STYLING.md` in the component folder.
+
 ## Overview
 
 `PageHeroHighlights` is a page-level layout template that creates a "hero + highlights strip" grid. It has:
@@ -20,7 +22,7 @@ The layout uses a 4-row CSS Grid with `subgrid` — no `translate`, negative mar
 | `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. |
+| `highlightTitleBaseline`| `boolean`                                                           | `false`     | When `true`, fixes the highlight title row to a set height so titles align at a common baseline. Override `--page-hero-highlights-title-height` to tune. |
 | `styleClassPassthrough` | `string \| string[]`                                                | `[]`        | Extra classes on the root element                                                                                               |
 
 ## Slots
@@ -102,17 +104,17 @@ Located at: `app/components/04.templates/page-hero-highlights/PageHeroHighlights
 | Slot    | Purpose                                                   |
 | ------- | --------------------------------------------------------- |
 | `start` | Title and description — always rendered, fills full width when `#end` is absent |
-| `end`   | Action buttons — `.phh-end` is only mounted when this slot is provided |
+| `end`   | Action buttons — `.page-hero-highlights-header-end` is only mounted when this slot is provided |
 
 ### CSS tokens
 
 | 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`                      |
+| `--page-hero-highlights-header-padding-block-mobile`  | `1.6rem 3.2rem`  | Block padding (start end) at mobile widths           |
+| `--page-hero-highlights-header-padding-block-tablet`  | `2.4rem 4.8rem`  | Block padding (start end) at ≥768px                  |
+| `--page-hero-highlights-header-padding-block-desktop` | `3.2rem 6.4rem`  | Block padding (start end) at ≥1024px                 |
+| `--page-hero-highlights-header-gap`                   | `1.6rem`         | Gap between `#start` and `#end` areas                |
+| `--page-hero-highlights-header-end-gap`               | `0.8rem`         | Gap between items within `#end`                      |
 
 ### Usage
 
@@ -219,40 +221,38 @@ See [component-local-style-override.md](../component-local-style-override.md) fo
     /* --page-hero-highlights-gutter-desktop: 32px; */
 
     /* Header zone */
-    /* --header-row-background-colour: darkblue; */
+    /* --page-hero-highlights-header-background: darkblue; */
 
     /* Highlights strip */
-    /* --highlights-row-item-gap: 1rem; */
-    /* --highlights-row-initial-item-offset: 1.2rem; */
+    /* --page-hero-highlights-strip-gap: 1rem; */
+    /* --page-hero-highlights-strip-inset: 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; */
+    /* --page-hero-highlights-item-rows-gap: 1.2rem; */
+    /* --page-hero-highlights-title-height: 1fr; */ /* see: highlight-title-baseline prop */
+    /* --page-hero-highlights-item-padding-block-start: 1.2rem; */
+    /* --page-hero-highlights-item-padding: 1.2rem; */
+    /* --page-hero-highlights-item-background: white; */
+    /* --page-hero-highlights-item-border: 1px solid black; */
+    /* --page-hero-highlights-item-border-radius: 8px; */
+    /* --page-hero-highlights-item-colour: black; */
 
     /* Content zone */
-    /* --content-row-background-color: var(--slate-01); */ /* transparent */
-    /* --content-row-start-gap: 1.2rem; */
-    /* --content-row-end-gap: 1.2rem; */
+    /* --page-hero-highlights-content-background: var(--slate-01); */ /* transparent */
+    /* --page-hero-highlights-content-start-gap: 1.2rem; */
+    /* --page-hero-highlights-content-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); */
+    /* --page-hero-highlights-content-margin-block-start: 2.4rem; */
+    /* --page-hero-highlights-content-margin: var(--page-hero-highlights-strip-inset); */
+    /* --page-hero-highlights-panel-background: var(--slate-00); */
+    /* --page-hero-highlights-panel-border: 1px solid var(--slate-06); */
+    /* --page-hero-highlights-panel-border-radius: 0.8rem; */
+    /* --page-hero-highlights-panel-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; */
-    /* } */
+    /* --page-hero-highlights-title-height-baseline: 4rem; */ /* proportional value preferred */
+    /* --page-hero-highlights-item-padding-block-start-baseline: 0; */
   }
 }
 </style>
@@ -268,14 +268,14 @@ 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.
+`.page-hero-highlights-header-row` spans cols 1–3, rows 1–2 (edge-to-edge bg). `.page-hero-highlights-header-slot` is placed in row 1 only.
+`.page-hero-highlights-content-row` spans cols 1–3, rows 3–4 (bg fills behind highlights; `.page-hero-highlights-content-slot` is placed in row 4 only). The decorative border behind `.page-hero-highlights-content-slot` is rendered via `.page-hero-highlights-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`
+## Layout pitfall: do not use `grid-template-rows: subgrid` inside `.page-hero-highlights-strip`
 
-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.
+The `.page-hero-highlights-strip` element spans rows 2–3 of the parent grid (the "straddle"). If you add an inner grid to `.page-hero-highlights-strip` (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 — `.page-hero-highlights-content-row` appears immediately below the highlights instead of overlapping it.
 
 ```css
 /* ❌ — breaks the straddle when items are auto-placed by column flow */

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

@@ -20,7 +20,7 @@ no extra wrapper divs needed.
 | `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 |
+| `:style-class-passthrough` | `string \| string[]` | `[]` | Extra classes on the root element (reactive after mount) |
 
 ---
 

package/.claude/skills/components/pending-effect.md

@@ -0,0 +1,63 @@
+# PendingEffect Component
+
+## Overview
+
+`PendingEffect` is a decorative SVG that draws an animated dashed line around a busy button. It
+is an internal part of `InputButton`: set `has-pending-effect` on the button and toggle
+`is-pending`. Don't render it on its own. Its CSS depends on the host having `.pending-effect`
+(and `position: relative`, which that rule provides), plus `.is-pending` to show and animate it.
+
+```vue
+<InputButton button-text="Submit" type="submit" has-pending-effect :is-pending="submitting" />
+```
+
+---
+
+## Props reference
+
+| Prop (template form) | Type | Default | Notes |
+|------|------|---------|-------|
+| `theme` | `"default" \| "success" \| "error" \| "warning"` | `"default"` | Set as `data-theme` on the SVG, so the `--theme-surface` colour defaults follow the theme. `InputButton` passes its own `theme`. |
+| `:style-class-passthrough` | `string \| string[]` | `[]` | Extra classes on the SVG. Not forwarded by `InputButton`. |
+
+No slots, no events.
+
+---
+
+## Behaviour
+
+- Hidden (`opacity: 0`) until the host has `.is-pending`.
+- The host must not clip overflow: the line is drawn outside the host's edge. `InputButton`
+  sets `overflow: hidden` on buttons generally, and switches it to `visible` when
+  `.pending-effect` is present. Before 2026-09-26 it didn't, so the effect never rendered at all.
+- Under `prefers-reduced-motion: reduce` it never shows, since the animation is the whole effect.
+- `aria-hidden="true"` and `focusable="false"`: it is decorative. Busy state for assistive tech
+  is the host button's responsibility.
+- The dash animation runs on the SVG's own rects. It used to run on the host button, and because
+  `stroke-dashoffset` is inherited, it also animated the stroke of any SVG icon inside the button.
+
+---
+
+## Styling
+
+Full table in `app/components/05.forms/pending-effect/CONSUMER-STYLING.md`. Public tokens:
+`--pending-effect-line-color|line-thickness|line-length`, `--pending-effect-blur-color|blur-size`,
+`--pending-effect-offset`, `--pending-effect-border-radius|border-radius-icon-only`,
+`--pending-effect-animation-duration`. All read with fallbacks at the point of use, so they can
+be set on any ancestor.
+
+---
+
+## History
+
+**Migrated 2026-09-26** (0/5 → full compliance):
+
+- Tokens renamed to `--pending-effect-*` (were `--pending-line-*`, `--pending-blur-*`,
+  `--pending-offset`, and the generic `--animation-speed`). They used to be declared on the host
+  button, which blocked any override set on a parent. No consumer overrode the old names.
+- Inner classes prefixed (`.pending-effect-container|blur|line`), keyframes renamed from the
+  generic `stroke-dashoffset` to `pending-effect-dash`.
+- Animation moved from the host button to the rects (see Behaviour).
+- Corner radius became a public token; removed a dead base `stroke: black; stroke-width: 0.5rem`
+  that both rects always overrode.
+- SVG is now `aria-hidden`; `styleClassPassthrough` changes after mount are picked up.

package/.claude/skills/components/price-list.md

@@ -0,0 +1,72 @@
+# PriceList Component
+
+## Overview
+
+`PriceList` (`app/components/02.molecules/price-list/`) renders a service/menu-style price list:
+one or more columns, each with a heading (optional icon) and a `<dl>` of description/price rows.
+Columns stack below `48em` and sit two-up above it. Not a SaaS plan comparison, use `PricingCard`
+for that.
+
+---
+
+## Props reference
+
+> **Hyphenation rule**: write camelCase props hyphenated in templates (`:price-list-data`).
+
+| Prop (template form) | Type | Default | Notes |
+|---|---|---|---|
+| `:price-list-data` | `PriceListData[]` | (required) | One entry per column |
+| `heading-tag` | `"h2" \| "h3" \| "h4" \| "h5" \| "h6"` | `"h2"` | Heading level for column titles; match the page outline |
+| `from-label` | `string` | `"from"` | Text before a price whose item has `from: true`. Pass a translated string for i18n |
+| `:style-class-passthrough` | `string \| string[]` | `[]` | Classes on the root; reactive |
+
+### Data shape
+
+Importable: `import type { PriceListData, PriceItem } from "srcdev-nuxt-components"`
+(source: `app/types/components/price-list.d.ts`).
+
+```ts
+interface PriceItem {
+  description: string;
+  price: string;   // pre-formatted, e.g. "£45"
+  from?: boolean;  // prefix with fromLabel
+}
+
+interface PriceListData {
+  headingtext: string;   // note: lower-case "t"
+  headingIcon?: string;  // Iconify name, e.g. "lucide:sparkles"
+  items: PriceItem[];
+}
+```
+
+No slots, no events.
+
+---
+
+## Semantics
+
+- Column titles are `HeroText` headings at `heading-tag`. Prices are plain `<span>`s inside `<dd>`,
+  not headings (before 2026-09-27 each price was an `<h2>`, which flooded the heading outline).
+- Rows are `<div>`-wrapped `<dt>`/`<dd>` pairs, valid inside `<dl>`.
+
+---
+
+## Styling
+
+All tokens are `--price-list-*`; full table in `CONSUMER-STYLING.md` next to the component.
+Common ones: `--price-list-divider-colour`, `--price-list-divider-opacity`,
+`--price-list-price-font-size`, `--price-list-heading-margin-block-end`.
+
+---
+
+## Usage
+
+```vue
+<PriceList :price-list-data="priceListData" :style-class-passthrough="['mbe-20']" />
+```
+
+Nested under an existing `h2` section heading:
+
+```vue
+<PriceList :price-list-data="priceListData" heading-tag="h3" from-label="ab" />
+```

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

@@ -49,7 +49,7 @@ Override the default feature list rendering. Receives no slot scope.
 
 ### #cta slot
 
-Customize the CTA button. Default renders `InputButtonCore` with theme support.
+Customize the CTA button. Default renders `InputButton` with theme support.
 
 **Slot scope:**
 - `ctaText: string` — button label from `:cta-text` prop
@@ -60,7 +60,7 @@ Customize the CTA button. Default renders `InputButtonCore` with theme support.
 ```vue
 <PricingCard plan-name="Pro" :price="99" @select="handleSelect">
   <template #cta="{ ctaText, isDisabled, onSelect }">
-    <InputButtonCore
+    <InputButton
       :button-text="ctaText"
       variant="secondary"
       theme="custom"
@@ -127,7 +127,7 @@ All `--pricing-card-*` tokens can be overridden at global, page, or instance sco
   @select="handleSelect"
 >
   <template #cta="{ ctaText, isDisabled, onSelect }">
-    <InputButtonCore
+    <InputButton
       :button-text="ctaText"
       variant="primary"
       :readonly="isDisabled"

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

@@ -6,6 +6,8 @@ type: reference
 
 # ProfileSection
 
+> **Classes renamed 2026-09-27:** `.picture` → `.profile-section-picture`, `.profile-picture` → `.profile-section-image`, `.profile-info` → `.profile-section-info`, `.profile-info-content` → `.profile-section-info-content`, `.profile-info-block` → `.profile-section-info-block`, `.profile-links` → `.profile-section-links`.
+
 ## Overview
 
 `ProfileSection` is a molecule that renders a practitioner/author profile: a header area (eyebrow + heading), a profile picture, and a flexible set of bio/info blocks alongside optional profile links. It is landmark-aware — when `tag` is `section`, `article`, or `aside`, the root element automatically gets `aria-labelledby` wired to the heading inside the `#heroText` slot (**you must bind `headingId` yourself, and a console warning fires if you forget** — see [component-aria-landmark.md](../component-aria-landmark.md)). `tag="main"` is never auto-labelled.
@@ -14,7 +16,7 @@ type: reference
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `profilePicture` | `{ src: string; alt: string }` | — | **Required.** Path and alt text for the profile image. Rendered via `NuxtImg`. |
+| `profilePicture` | `ProfilePicture` (`{ src; alt; width?; height? }`, exported from the layer types) | — | **Required.** Rendered via `NuxtImg` with `width`/`height` defaulting to `828`/`1104` (3:4, a Vercel-allowed width). |
 | `tag` | `"div" \| "section" \| "article" \| "main"` | `"div"` | HTML element rendered as the root. |
 | `profileInfoCount` | `number` | `3` | Number of `profile-info-N` slots to generate when none are explicitly provided. |
 | `styleClassPassthrough` | `string \| string[]` | `[]` | Extra classes applied to the root element. |
@@ -70,7 +72,7 @@ type: reference
 The `profile-info-N` slots are discovered at runtime by filtering `useSlots()` for keys matching `/^profile-info-\d+$/`. The slots are rendered in ascending numeric order.
 
 - If you provide `#profile-info-1`, `#profile-info-2`, `#profile-info-3` — all three render in order.
-- If you provide no `profile-info-*` slots, the component generates `profileInfoCount` empty placeholder blocks.
+- If you provide no `profile-info-*` slots, the component renders `profileInfoCount` empty blocks (they used to contain visible placeholder text, removed 2026-09-27). Slot discovery runs every render, so slots added after mount appear.
 - Gaps are supported — you can provide `#profile-info-1` and `#profile-info-3` without `#profile-info-2`; they sort correctly.
 
 ## heroText slot prop
@@ -88,8 +90,8 @@ If you use a different heading component, bind `headingId` to whatever prop rend
 ## Layout
 
 - **Mobile**: single column — picture stacked above info.
-- **768px+**: two columns — `384px` picture column, `1fr` info column, `4rem` gap.
-- Picture frame: `aspect-ratio: 3/4`, `border-radius: 8px`, `overflow: hidden`. The `NuxtImg` fills the frame with `object-fit: cover`.
+- **768px+**: two columns — `--profile-section-picture-width` (`384px`) picture column, `1fr` info column, `--profile-section-gap-wide` (`4rem`) gap (`--profile-section-gap`, `2rem`, below 768px).
+- Picture frame (`.profile-section-picture`): `--profile-section-picture-aspect-ratio` (`3 / 4`), `--profile-section-picture-border-radius` (`8px`), `overflow: hidden`. Full token list: `CONSUMER-STYLING.md` in the component folder. The `NuxtImg` fills the frame with `object-fit: cover`.
 - Profile links: `align-items: end; justify-content: flex-end` — right-aligned to the bottom of the info column.
 
 ## CSS notes

package/.claude/skills/components/samaritan-prompt.md

@@ -0,0 +1,140 @@
+---
+name: SamaritanPrompt
+description: SamaritanPrompt and SamaritanPromptMixed animated text prompts — props, MessageConfig API, typewriter/word-pulse effects, pause on hover, aria-live announcements, cursor slot, CSS tokens
+type: reference
+---
+
+# SamaritanPrompt / SamaritanPromptMixed
+
+## Overview
+
+Two components in `02.molecules/samaritan-prompt/` that loop through messages with animated text
+effects, styled as a monospace line over an underline with a pulsing cursor glyph below:
+
+- **`SamaritanPrompt`** — a list of plain strings, one effect and one set of timings for all of them.
+- **`SamaritanPromptMixed`** — a list of `SamaritanPromptMessageConfig` objects, each able to pick its
+  own effect and override any timing. Adds an `introDelay` before each loop.
+
+Effects:
+
+- `typewriter` — characters typed one by one, held, deleted one by one.
+- `word-pulse` — the whole message fades in, holds, fades out.
+
+Both use `useCancellableTimer` for all timing, so the loop exits cleanly on unmount.
+
+## Accessibility
+
+- The visual content (`.samaritan-prompt__content`) and the cursor are `aria-hidden="true"`, so
+  screen readers never hear partial text.
+- A visually hidden `aria-live="polite"` `aria-atomic="true"` span announces each full message when
+  it's fully shown (typewriter: once typed; word-pulse: once faded in) and is cleared before it
+  deletes or fades out, so a repeated message announces again.
+- **Pause on hover** (WCAG 2.2.2): pointer over the root pauses the sequence where it is and the
+  cursor pulse; leaving resumes. The root gets `data-paused` while paused.
+- `prefers-reduced-motion: reduce` removes the cursor pulse and the word-pulse fade transition. The
+  text sequence keeps running (it's the content).
+
+> **Changed 2026-09-27**: `SamaritanPrompt` previously had no live region (the visible text was read
+> character by character, if at all) and no reduced-motion handling; both now match
+> `SamaritanPromptMixed`. Pause on hover is new on both.
+
+## Props — SamaritanPrompt
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `messages` | `string[]` | — | Messages to cycle through. **Required.** |
+| `effect` | `"typewriter" \| "word-pulse"` | `"typewriter"` | Effect for all messages. Changing it restarts the loop. |
+| `typeSpeed` | `number` | `80` | ms per character typed. |
+| `deleteSpeed` | `number` | `40` | ms per character deleted. |
+| `holdDuration` | `number` | `2000` | ms the typed text holds before deleting. |
+| `pauseDuration` | `number` | `500` | Typewriter: ms between messages. Word-pulse: ms before each full cycle. |
+| `wordDuration` | `number` | `1200` | ms a word-pulse message stays fully visible. |
+| `fadeDuration` | `number` | `400` | ms for the word-pulse fade in/out. |
+| `hideCursorInCycle` | `boolean` | `true` | Hide the cursor while text animates, show it during pauses. |
+| `styleClassPassthrough` | `string \| string[]` | `[]` | Extra classes on the root. Reactive. |
+
+## Props — SamaritanPromptMixed
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `messageConfigs` | `SamaritanPromptMessageConfig[]` | — | Messages. **Required.** |
+| `effect` | `"typewriter" \| "word-pulse"` | `"typewriter"` | Default effect. |
+| `typeSpeed` | `number` | `80` | ms per character typed. |
+| `deleteSpeed` | `number` | `40` | ms per character deleted. |
+| `holdDuration` | `number` | `7000` | ms the typed text holds before deleting. |
+| `pauseDuration` | `number` | `1000` | ms pause after each message. |
+| `wordDuration` | `number` | `1200` | ms a word-pulse message stays fully visible. |
+| `fadeDuration` | `number` | `400` | ms for the word-pulse fade in/out. |
+| `introDelay` | `number` | `2000` | ms before the first message of every loop. `0` starts immediately. |
+| `hideCursorInCycle` | `boolean` | `true` | Hide the cursor while text animates. |
+| `styleClassPassthrough` | `string \| string[]` | `[]` | Extra classes on the root. Reactive. |
+
+Note the different defaults for `holdDuration` and `pauseDuration` between the two components.
+
+### SamaritanPromptMessageConfig
+
+```ts
+import type { SamaritanPromptMessageConfig } from "srcdev-nuxt-components";
+
+interface SamaritanPromptMessageConfig {
+  text: string;
+  effect?: "typewriter" | "word-pulse";
+  typeSpeed?: number;
+  deleteSpeed?: number;
+  holdDuration?: number;
+  pauseDuration?: number;
+  wordDuration?: number;
+  fadeDuration?: number;
+  hideCursorInCycle?: boolean;
+}
+```
+
+Omitted fields fall back to the matching component prop. `SamaritanPromptEffect` is exported too.
+
+> **Changed 2026-09-27**: this type was `MessageConfig`, exported from inside
+> `SamaritanPromptMixed.vue`. It now lives in `app/types/components/samaritan-prompt.d.ts`.
+
+## Slots
+
+| Slot | Default | Description |
+|------|---------|-------------|
+| `cursor` | `▲` | Cursor glyph. Rendered inside `aria-hidden` `.samaritan-prompt__cursor`, so keep it decorative. |
+
+## Usage
+
+```vue
+<SamaritanPrompt :messages="['Can you hear me?', 'Surveillance active']" />
+
+<SamaritanPrompt effect="word-pulse" :word-duration="2000" :messages="['Stand by']" />
+
+<SamaritanPromptMixed
+  :intro-delay="0"
+  :message-configs="[
+    { text: 'Initialising system', effect: 'typewriter', holdDuration: 3000 },
+    { text: 'Stand by', effect: 'word-pulse', wordDuration: 2000 },
+  ]"
+/>
+```
+
+Inside a `messageConfigs` object literal, keys are camelCase (`holdDuration`), not hyphenated; only
+props on the component tag are hyphenated.
+
+## Styling
+
+Full token list and class hooks: `app/components/02.molecules/samaritan-prompt/CONSUMER-STYLING.md`.
+Tokens are `--samaritan-prompt-*` (text/underline/cursor colours, font, sizes, gaps, pulse
+duration). Defaults are white text on the assumption of a dark page; for a light or theme-switching
+page set `--samaritan-prompt-text-colour` and `--samaritan-prompt-underline-colour` (e.g. to
+`var(--theme-text)`).
+
+The component brings no page layout; centre it from its parent.
+
+> **Changed 2026-09-27**: tokens renamed from `--samaritan-*` / `color` to `--samaritan-prompt-*` /
+> `colour`. `SamaritanPromptMixed` no longer needs (or styles) a `.samaritan-stage` ancestor.
+
+## Notes
+
+- `SamaritanPromptMixed` reads `messageConfigs` at the start of each loop, so prop changes land on
+  the next loop. `SamaritanPrompt` restarts only when `effect` changes.
+- The `Mono MMM 5` font is declared with `@font-face` in each component's unscoped style from
+  `/fonts/monoMMM_5.ttf` (`font-display: swap` in `SamaritanPrompt`, `optional` in `SamaritanPromptMixed`).