srcdev-nuxt-components 9.1.32 → 9.1.33

package/.claude/skills/components/banner-video.md

@@ -170,6 +170,38 @@ Use an unscoped style block scoped by a page or section wrapper class. No `:deep
 </style>
 ```
 
+## Gotcha: aspect-ratio is overridden by max-height at wide viewports
+
+`max-height` from the depth tier silently wins over `aspect-ratio` once the viewport is wide enough. For example, at `depth="md"` the max-height clamp caps at `56rem` — so changing `aspectRatio` from `"21/9"` to `"1/1"` produces no visible change on a wide desktop because `max-height` is the binding constraint.
+
+**If you need `aspect-ratio` to dominate**, override all depth tokens to a large fixed value on the parent:
+
+```css
+.my-page {
+  --theme-banner-video-max-height-xs: 80rem;
+  --theme-banner-video-max-height-sm: 80rem;
+  --theme-banner-video-max-height-md: 80rem;
+  --theme-banner-video-max-height-lg: 80rem;
+  --theme-banner-video-max-height-xl: 80rem;
+}
+```
+
+Or via inline `:style` on the parent element (useful for dev QA exploration):
+
+```vue
+<div :style="{
+  '--theme-banner-video-max-height-xs': '80rem',
+  '--theme-banner-video-max-height-sm': '80rem',
+  '--theme-banner-video-max-height-md': '80rem',
+  '--theme-banner-video-max-height-lg': '80rem',
+  '--theme-banner-video-max-height-xl': '80rem',
+}">
+  <BannerVideo aspect-ratio="1/1" depth="lg" ... />
+</div>
+```
+
+You must override **all five tier tokens** — overriding only the active depth token is not sufficient because the component resolves the token by name.
+
 ## Notes
 
 - `loading="eager"` and `decoding="async"` are hardcoded on the fallback `NuxtImg` — it is above the fold by definition.

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

@@ -100,8 +100,21 @@ Override via `styleClassPassthrough` or a parent HOC `<style>` block targeting `
 
 Key CSS custom properties:
 
-- `--colour-text-accent` — colour applied to `.accent` spans and the icon
-- `--hero-text-{scale}` — font size per scale value
+| Property | Default | Controls |
+| -------- | ------- | -------- |
+| `--colour-text-accent` | — | Colour of `.accent` spans and the icon |
+| `--hero-text-{scale}` | — | Font size per `fontSize` prop value |
+| `--hero-text-vertical-gap` | `0.4em` | Gap between segments in `axis="vertical"` mode |
+
+**`--hero-text-vertical-gap`** controls `gap` on the flex column in vertical axis. Override at theme or page level:
+
+```css
+.my-page {
+  .hero-text.axis-vertical {
+    --hero-text-vertical-gap: 0.6em;
+  }
+}
+```
 
 ## Local style override scaffold
 

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

@@ -0,0 +1,134 @@
+---
+name: ProfileSection
+description: ProfileSection molecule — props, dynamic profile-info slots, eyebrowText/heroText/profileLinks slots, layout, accessibility
+type: reference
+---
+
+# ProfileSection
+
+## 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 — the root element automatically gets `aria-labelledby` wired to the heading inside the `#heroText` slot.
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `profilePicture` | `{ src: string; alt: string }` | — | **Required.** Path and alt text for the profile image. Rendered via `NuxtImg`. |
+| `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. |
+
+## Slots
+
+| Slot | Description |
+|------|-------------|
+| `#eyebrowText` | Optional eyebrow label above the heading. Use `EyebrowText`. |
+| `#heroText` | Heading slot. Receives `headingId` as a slot prop — bind it to the heading's `id` for accessible `aria-labelledby`. |
+| `#profile-info-1` … `#profile-info-N` | Bio / info blocks. Provide as many numbered slots as needed. They are rendered in ascending numeric order. |
+| `#profileLinks` | Links / actions shown at the bottom-right of the info column (e.g. social icons, booking CTA). |
+
+## Basic usage
+
+```vue
+<ProfileSection
+  tag="section"
+  :profile-picture="{ src: '/images/profile/mel.jpg', alt: 'Mel Stafford, reflexologist' }"
+>
+  <template #eyebrowText>
+    <EyebrowText font-size="large" text="About Mel" />
+  </template>
+
+  <template #heroText="{ headingId }">
+    <HeroText
+      tag="h2"
+      :id="headingId"
+      font-size="title"
+      :text-content="[
+        { text: 'Mel Stafford', styleClass: 'normal' },
+        { text: 'Reflexologist', styleClass: 'accent' },
+      ]"
+    />
+  </template>
+
+  <template #profile-info-1>
+    <p>With over a decade of practice…</p>
+  </template>
+
+  <template #profile-info-2>
+    <p>Mel is based in Lichfield…</p>
+  </template>
+
+  <template #profileLinks>
+    <SocialIconsList :items="socialLinks" />
+  </template>
+</ProfileSection>
+```
+
+## Dynamic profile-info slots
+
+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.
+- Gaps are supported — you can provide `#profile-info-1` and `#profile-info-3` without `#profile-info-2`; they sort correctly.
+
+## heroText slot prop
+
+The `#heroText` slot exposes `headingId` as a slot prop. Bind it to the heading's `id` prop so the component's `aria-labelledby` attribute points to the heading automatically:
+
+```vue
+<template #heroText="{ headingId }">
+  <HeroText tag="h2" :id="headingId" ... />
+</template>
+```
+
+If you use a different heading component, bind `headingId` to whatever prop renders the `id` attribute on the heading element.
+
+## 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`.
+- Profile links: `align-items: end; justify-content: flex-end` — right-aligned to the bottom of the info column.
+
+## CSS notes
+
+- The `.profile-section-header` element has **no default margin-block-end**. If you need spacing between the header and the picture/info grid, add it via a consuming-page style:
+
+```css
+.my-page {
+  .profile-section-header {
+    margin-block-end: 3.2rem;
+  }
+}
+```
+
+- Accent-coloured text within `.location` or `.services` info blocks can use the `.highlight` class for `var(--colour-text-accent)` or `var(--colour-link-default)` colouring respectively.
+
+## Consumer styling scaffold
+
+```vue
+<ProfileSection
+  :style-class-passthrough="['my-profile']"
+  ...
+>
+  ...
+</ProfileSection>
+
+<style>
+.profile-section {
+  &.my-profile {
+    .profile-section-header {
+      margin-block-end: 3.2rem;
+    }
+  }
+}
+</style>
+```
+
+## Notes
+
+- `NuxtImg` is used for the profile picture — provide a real `src` path. A placeholder (grey box) is shown if the image 404s.
+- The component does not expose `imgWidth` / `imgHeight` props for the picture. If IPX optimisation is critical, use a fixed-dimension image and rely on the `384px` column cap as the natural size constraint.
+- Component is auto-imported in Nuxt — no import needed.

package/.claude/skills/components/scroll-reveal-image.md

@@ -15,7 +15,7 @@ For arbitrary slot content — a grid of images, video, markup — use `ScrollRe
 ## Props
 
 | Prop | Type | Default | Description |
-|------|------|---------|-------------|
+| ---- | ---- | ------- | ----------- |
 | `src` | `string` | — | Image source path. **Required.** |
 | `alt` | `string` | `""` | Alt text for the image. |
 | `imgWidth` | `number` | `1920` | Intrinsic width of the source image — required for NuxtImg optimisation. |
@@ -95,7 +95,7 @@ For arbitrary slot content — a grid of images, video, markup — use `ScrollRe
 The vertical position of the image is driven by the scroll animation (`translateY`). `focalX` controls the **horizontal** crop so the subject stays centred when the frame is narrower than the image.
 
 | Value | Crops toward |
-|-------|-------------|
+| ----- | ----------- |
 | `"0%"` or `"left"` | Left edge |
 | `"50%"` (default) | Centre |
 | `"75%"` | Right of centre — useful for a subject offset to the right |
@@ -106,13 +106,14 @@ Internally, `focalX` sets `object-position: <focalX> 0%` on the `<img>`. The `Y`
 ## imgWidth / imgHeight
 
 Always provide these to match the intrinsic dimensions of the source file. NuxtImg uses them to:
+
 - Generate the correct `srcset` via the IPX pipeline
 - Avoid the `w=1536` fallback (not in Vercel's allowed widths: 640, 750, 828, 1080, 1200, 1920, 2048, 3840)
 
 Common pairs:
 
 | Image type | imgWidth | imgHeight |
-|-----------|----------|-----------|
+| ---------- | -------- | --------- |
 | Portrait (3:4) | `1280` | `1920` |
 | Landscape / banner (16:9) | `1920` | `1080` |
 | Wide banner (12:5) | `1920` | `800` |
@@ -143,7 +144,7 @@ Override `--_frame-height` in a scoped style block for responsive control:
 Set from props via inline `:style` — override in CSS for responsive or contextual control.
 
 | Property | Default | Set by prop |
-|----------|---------|-------------|
+| -------- | ------- | ----------- |
 | `--_frame-height` | `540px` | `frameHeight` |
 | `--_parallax-offset` | `36rem` | `parallaxOffset` |
 | `--_radius` | `0px` | `radius` |
@@ -155,6 +156,7 @@ See `scroll-reveal-frame.md` for the full guide. For portrait images the default
 
 ## Notes
 
+- The root `<figure>` has `margin: 0` set in the component — browser default `<figure>` margins are neutralised at source.
 - `loading="lazy"` and `decoding="async"` are hardcoded on the `<img>`. If this component is the LCP image, override with `loading="eager"` via a CSS-only approach is not possible — use `ScrollRevealFrame` with a manual `NuxtImg` instead and set `:loading="'eager'"`.
 - Do not place inside a container with `overflow: hidden` or `overflow: clip` — breaks the `view-timeline` scroll detection inherited from `ScrollRevealFrame`.
 - Reduced-motion: animation is disabled and the image falls back to a static crop centred at `object-position: <focalX> 50%`.

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

@@ -0,0 +1,102 @@
+---
+name: SectionParallax
+description: SectionParallax CSS fixed-background parallax section — props, browser support, iOS Safari limitation, when to use vs ScrollRevealImage
+type: reference
+---
+
+# SectionParallax
+
+## Overview
+
+`SectionParallax` is a full-width section that uses CSS `background-attachment: fixed` to create a parallax scrolling effect — the background image stays stationary while the page content scrolls over it. The effect is implemented with `@supports (background-attachment: fixed)` so it degrades gracefully.
+
+**Important browser limitation:** `background-attachment: fixed` does not work on iOS Safari (and mobile Chrome on iOS). On those browsers the background renders as a static image with no parallax motion. Use `SectionParallax` for atmospheric/decorative breaks where this is an acceptable trade-off. For cross-browser scroll-driven parallax, use `ScrollRevealImage` or `ScrollRevealFrame` instead.
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `tag` | `"div" \| "section" \| "article" \| "aside"` | `"div"` | HTML element rendered as the root. |
+| `backgroundImage` | `string` | `undefined` | Path to the background image. Bound as `url("...")` via `v-bind`. |
+| `styleClassPassthrough` | `string \| string[]` | `[]` | Extra classes applied to the root element. |
+
+## Slots
+
+| Slot | Description |
+|------|-------------|
+| `default` | Optional content rendered inside the section. Often left empty — the component is typically used as a purely decorative atmospheric break. |
+
+## Basic usage — decorative atmospheric break
+
+```vue
+<SectionParallax
+  tag="section"
+  background-image="/images/eucalyptus-lavender-and-oil.jpg"
+/>
+```
+
+## With overlay content
+
+```vue
+<SectionParallax
+  tag="section"
+  background-image="/images/candle-and-stones.jpg"
+  :style-class-passthrough="['has-overlay']"
+>
+  <div class="overlay-text">
+    <p>A quiet moment.</p>
+  </div>
+</SectionParallax>
+```
+
+## How it works
+
+The component sets:
+- `background-image: url(...)` via `v-bind`
+- `background-position: center`
+- `background-size: inherit` (fallback when fixed is not supported)
+- `min-height: 120vh`
+- `background-color: light-dark(var(--slate-01), var(--slate-08))` (visible if image fails to load)
+
+Inside `@supports (background-attachment: fixed)`:
+- `background-attachment: fixed` — pins the image to the viewport
+- `background-size: cover` — ensures the image fills the viewport
+- `min-height: 120vh` — ensures enough scroll travel to see the parallax motion
+
+## Controlling height
+
+Override `min-height` with a consuming-page style:
+
+```css
+.my-page {
+  .section-parallax {
+    min-height: 60vh; /* shorter atmospheric break */
+  }
+}
+```
+
+## Browser support
+
+| Browser | Support |
+|---------|---------|
+| Chrome / Edge (desktop) | ✅ Full parallax |
+| Firefox (desktop) | ✅ Full parallax |
+| Safari (desktop) | ✅ Full parallax |
+| iOS Safari | ❌ Static background (no parallax) |
+| Chrome on iOS | ❌ Static background (no parallax) |
+| Android Chrome | ✅ Usually supported |
+
+## When to use SectionParallax vs ScrollRevealImage
+
+| Use case | Recommendation |
+|----------|---------------|
+| Atmospheric break between sections, desktop-first site | `SectionParallax` — simpler, no JS |
+| Cross-browser scroll animation, mobile-first site | `ScrollRevealImage` or `ScrollRevealFrame` |
+| Image with rounded corners, specific frame height | `ScrollRevealImage` |
+| Image inlined within a content grid | `ScrollRevealImage` |
+
+## Notes
+
+- The `@supports` guard means the parallax activates only when the browser supports `background-attachment: fixed`. No JS is involved.
+- Slot content is only rendered when the `default` slot is provided (`v-if="slots.default"`).
+- The component has no built-in overlay or gradient — add one via the slot or a `::before` pseudo-element in your consuming-page styles.

package/app/components/01.atoms/scroll-reveal-frame/ScrollRevealFrame.vue

@@ -73,6 +73,7 @@ watch(
     --_parallax-offset: 36rem;
     --_radius: 0px;
 
+    margin: 0; /* reset browser <figure> default margin */
     position: relative;
     height: var(--_frame-height);
     width: 100%;

package/app/components/01.atoms/text-blocks/hero-text/HeroText.vue

@@ -59,7 +59,7 @@ const normalisedContent = computed(() =>
     }
     &.axis-vertical {
       display: flex;
-      gap: 0.2rem;
+      gap: var(--hero-text-vertical-gap, 0.4em);
       flex-direction: column;
     }
 

package/package.json

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