srcdev-nuxt-components 9.4.8 → 9.4.10

package/.claude/skills/components/dashboard-quad-grid.md

@@ -0,0 +1,98 @@
+# DashboardQuadGrid Component
+
+## Overview
+
+`DashboardQuadGrid` (renamed from `LayoutGridA`) is a fixed 4-panel dashboard layout. Unlike
+`LayoutGridByCols`/`LayoutGridByWidth`, it does not take a column-count prop — it has four
+**named** slots (`slot1`–`slot4`) with a fixed responsive arrangement that changes shape (not
+just column count) across breakpoints, designed for dashboard-style layouts (one primary panel
+plus three supporting panels).
+
+---
+
+## Slot pattern
+
+Exactly four fixed slot names — `slot1`, `slot2`, `slot3`, `slot4`. Not dynamic; each is a named
+slot with a specific position in the layout at each breakpoint.
+
+```vue
+<DashboardQuadGrid>
+  <template #slot1><ArticleCard /></template>
+  <template #slot2><StatsPanel /></template>
+  <template #slot3><QuickActions /></template>
+  <template #slot4><ActivityFeed /></template>
+</DashboardQuadGrid>
+```
+
+---
+
+## Props reference
+
+| Prop (template form) | Type | Default | Notes |
+|------|------|---------|-------|
+| `:style-class-passthrough` | `string \| string[]` | `[]` | Extra CSS classes on the root element. |
+
+---
+
+## Responsive behaviour
+
+Uses **CSS container queries** (`container-type: inline-size`) on the wrapper — responds to its
+own container width, not the viewport.
+
+- **Below 768px**: all four slots stack vertically in order (slot1 → slot2 → slot3 → slot4).
+- **768px–1059px**: 2-column, 3-row grid. `slot1` and `slot2` each span the full width (rows 1
+  and 2); `slot3`/`slot4` sit side by side in row 3.
+- **≥1060px**: 3-column, 2-row grid. `slot1` spans vertically down the left column; `slot2` spans
+  horizontally across the top-right; `slot3`/`slot4` sit in the bottom-right.
+
+This shape is structural — there is no prop to reconfigure it. If you need an arbitrary
+column count instead, use `LayoutGridByCols`/`LayoutGridByWidth`.
+
+---
+
+## CSS token API
+
+See [CONSUMER-STYLING.md](../../app/components/01.atoms/content-wrappers/layout-grid/dashboard-quad-grid/CONSUMER-STYLING.md).
+
+| Token | Default | Controls |
+|---|---|---|
+| `--dashboard-quad-grid-gap` | `2rem` | Gap between the four slot panels |
+| `--dashboard-quad-grid-padding` | `2rem` | Padding inside each slot panel |
+| `--dashboard-quad-grid-outline-width` | `0.1rem` | Slot panel outline width |
+| `--dashboard-quad-grid-outline-colour` | `light-dark(black, white)` | Slot panel outline colour |
+| `--dashboard-quad-grid-outline-offset` | `0` | Slot panel outline offset |
+| `--dashboard-quad-grid-border-width` | `0` | Slot panel border width (off by default — the panel edge is drawn by the outline) |
+| `--dashboard-quad-grid-border-colour` | `light-dark(black, white)` | Slot panel border colour, only visible once `--dashboard-quad-grid-border-width` is set |
+| `--dashboard-quad-grid-border-radius` | `0.5rem` | Slot panel corner radius |
+| `--dashboard-quad-grid-rule-width` | `0.1rem` | Width of the grid gap rule line (CSS Gap Decorations, limited browser support) |
+| `--dashboard-quad-grid-rule-colour` | `transparent` | Colour of the grid gap rule line, invisible by default |
+| `--dashboard-quad-grid-rule-inset` | `0` | Inset of the grid gap rule line from the panel edges |
+
+---
+
+## Local style override scaffold
+
+```vue
+<DashboardQuadGrid :style-class-passthrough="['my-grid']">
+  ...
+</DashboardQuadGrid>
+
+<style>
+.dashboard-quad-grid-wrapper {
+  &.my-grid {
+    --dashboard-quad-grid-gap: 1.6rem;
+  }
+}
+</style>
+```
+
+---
+
+## Notes
+
+- Auto-imported in Nuxt — no manual import needed.
+- Renamed from `LayoutGridA` during the 2026-09-21 compliance migration; previously lived
+  unplaced at `app/components/layout-grids/LayoutGridA.vue` with options-style props and no
+  public CSS tokens (its geometry values were hardcoded px literals).
+- For a generic, arbitrary-column-count grid, use `LayoutGridByCols`/`LayoutGridByWidth` instead
+  — this component's 4-slot shape is fixed and specifically dashboard-oriented.

package/.claude/skills/components/dashboard-stats-grid.md

@@ -0,0 +1,103 @@
+# DashboardStatsGrid Component
+
+## Overview
+
+`DashboardStatsGrid` (renamed from `LayoutGridB`) is a dashboard layout combining a multi-panel
+top row (a cluster of small stat/summary panels plus two static side panels) with a strip of
+panels in the bottom row. Item counts in the two dynamic clusters are prop-driven; the two static
+top-row slots and overall shape are fixed.
+
+---
+
+## Slot pattern
+
+- `top-row-slot1-{n}-content` — dynamic, `n` from `1` to `topRowSlot1ItemCount`
+- `top-row-slot-2` — static
+- `top-row-slot-3` — static
+- `bottom-row-{n}-content` — dynamic, `n` from `1` to `bottomRowItemCount`
+
+```vue
+<DashboardStatsGrid :top-row-slot1-item-count="3" :bottom-row-item-count="2">
+  <template #top-row-slot1-1-content><StatCard label="Uptime" value="98.5%" /></template>
+  <template #top-row-slot1-2-content><StatCard label="Users" value="1,247" /></template>
+  <template #top-row-slot1-3-content><StatCard label="Latency" value="342ms" /></template>
+
+  <template #top-row-slot-2><FeaturedPanel /></template>
+  <template #top-row-slot-3><InfoPanel /></template>
+
+  <template #bottom-row-1-content><FeaturePanel /></template>
+  <template #bottom-row-2-content><FeaturePanel /></template>
+</DashboardStatsGrid>
+```
+
+---
+
+## Props reference
+
+| Prop (template form) | Type | Default | Notes |
+|------|------|---------|-------|
+| `:top-row-slot1-item-count` | `number` | `6` | Number of dynamic panels rendered in the top-row cluster (`top-row-slot1-{n}-content`). |
+| `:bottom-row-item-count` | `number` | `4` | Number of dynamic panels rendered in the bottom row (`bottom-row-{n}-content`). |
+| `:style-class-passthrough` | `string \| string[]` | `[]` | Extra CSS classes on the root element. |
+
+---
+
+## Responsive behaviour
+
+Uses **CSS container queries** (`container-type: inline-size`) — responds to its own container
+width, not the viewport.
+
+- **Top row, below 1024px**: `slot1` cluster, `slot2`, `slot3` stack vertically.
+- **Top row, ≥1024px**: two-column layout — `slot1` cluster + `slot3` on the left
+  (`minmax(46rem, 33%)` on the right for `slot2`), with `slot2` spanning both rows on the right.
+- **`slot1` cluster, below 680px**: 2 columns.
+- **`slot1` cluster, ≥680px**: 3 columns.
+- **Bottom row**: always a fixed 2-column grid regardless of container width.
+
+This shape is structural — there is no prop to reconfigure it.
+
+---
+
+## CSS token API
+
+See [CONSUMER-STYLING.md](../../app/components/01.atoms/content-wrappers/layout-grid/dashboard-stats-grid/CONSUMER-STYLING.md).
+
+| Token | Default | Controls |
+|---|---|---|
+| `--dashboard-stats-grid-gap` | `1.2rem` | Gap between panels, in every row |
+| `--dashboard-stats-grid-panel-padding` | `1.2rem` | Padding inside each panel |
+| `--dashboard-stats-grid-border-width` | `0.1rem` | Panel border width |
+| `--dashboard-stats-grid-border-colour` | `light-dark(hsl(0, 29%, 3%), hsl(0, 0%, 92%))` | Panel border colour |
+| `--dashboard-stats-grid-border-radius` | `1.2rem` | Panel corner radius |
+| `--dashboard-stats-grid-rule-width` | `0.1rem` | Width of the grid gap rule line (CSS Gap Decorations, limited browser support) |
+| `--dashboard-stats-grid-rule-colour` | `transparent` | Colour of the grid gap rule line, invisible by default |
+| `--dashboard-stats-grid-rule-inset` | `0` | Inset of the grid gap rule line from the panel edges |
+
+---
+
+## Local style override scaffold
+
+```vue
+<DashboardStatsGrid :style-class-passthrough="['my-grid']">
+  ...
+</DashboardStatsGrid>
+
+<style>
+.dashboard-stats-grid {
+  &.my-grid {
+    --dashboard-stats-grid-gap: 1.6rem;
+  }
+}
+</style>
+```
+
+---
+
+## Notes
+
+- Auto-imported in Nuxt — no manual import needed.
+- Renamed from `LayoutGridB` during the 2026-09-21 compliance migration; previously lived
+  unplaced at `app/components/layout-grids/LayoutGridB.vue` with options-style props. Its old
+  `--_color` custom property was dead code (declared, never consumed) and was removed rather than
+  promoted; `--_gap`/`--_border-color` had no public fallback and are now
+  `--dashboard-stats-grid-gap`/`--dashboard-stats-grid-border-colour`.

package/.claude/skills/components/display-theme-switch.md

@@ -0,0 +1,60 @@
+---
+name: DisplayThemeSwitch
+description: DisplayThemeSwitch system/light/dark theme picker wired to useSettingsStore, wraps TripleToggleSwitchCore
+type: reference
+---
+
+# DisplayThemeSwitch
+
+## Overview
+
+`DisplayThemeSwitch` is a system/light/dark colour-scheme picker. It's a thin wrapper around
+`TripleToggleSwitchCore` (`app/components/05.forms/triple-toggle-switch/`), wired to
+`useSettingsStore` (`app/stores/useSettingsStore.ts`) so selecting an option updates the app's
+`colourScheme` state and applies the matching class (`system`/`light`/`dark`) to
+`<html>`. Renders inside `<ClientOnly>` since the store's persisted value isn't known until
+hydration.
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `styleClassPassthrough` | `string \| string[]` | `[]` | Extra classes on the root. Pass `"small"` for compact sizing. |
+| `systemLabel` | `string` | `"System"` | Accessible label for the system option. |
+| `lightLabel` | `string` | `"Light"` | Accessible label for the light option. |
+| `darkLabel` | `string` | `"Dark"` | Accessible label for the dark option. |
+| `systemIcon` | `string` | `"material-symbols:night-sight-auto-sharp"` | Icon name for the system option. |
+| `lightIcon` | `string` | `"radix-icons:sun"` | Icon name for the light option. |
+| `darkIcon` | `string` | `"radix-icons:moon"` | Icon name for the dark option. |
+
+## Basic usage
+
+```vue
+<DisplayThemeSwitch />
+
+<!-- Compact, for a header/nav slot -->
+<DisplayThemeSwitch style-class-passthrough="small" />
+
+<!-- Translated labels -->
+<DisplayThemeSwitch system-label="Automatique" light-label="Clair" dark-label="Sombre" />
+```
+
+## Styling
+
+No `--display-theme-switch-*` tokens of its own — every visual aspect (colour, marker gradient,
+sizing) is delegated to `TripleToggleSwitchCore`'s public `--triple-toggle-switch-*` tokens. See
+CONSUMER-STYLING.md here and `TripleToggleSwitchCore`'s own CONSUMER-STYLING.md.
+
+## Notes
+
+- 2026-09-20 migration: moved from `app/components/display-theme-switch/` (unplaced) into
+  `02.molecules/`. Added `systemLabel`/`lightLabel`/`darkLabel`/`systemIcon`/`lightIcon`/`darkIcon`
+  props — the three option labels/icons were previously hardcoded English strings with no override
+  hook. Removed a large block of dead/duplicate CSS in this component's own `<style>` that either
+  no-op-duplicated `TripleToggleSwitchCore`'s own default styling (same selectors, same values) or
+  actively bypassed its public `--triple-toggle-switch-*` tokens with hardcoded literals (a
+  consumer setting e.g. `--triple-toggle-switch-surface` globally would have been silently
+  overridden back). Only the genuine `small`-variant sizing override remains, now driving
+  `TripleToggleSwitchCore`'s own public sizing tokens (`--triple-toggle-switch-gap`/`-padding`/
+  `-option-padding`/`-icon-size`, added in the same migration) instead of reaching into its
+  private `--_form-*`/`--_scheme-icon-font-size` locals directly.

package/.claude/skills/components/glowing-border.md

@@ -0,0 +1,66 @@
+---
+name: GlowingBorder
+description: GlowingBorder decorative wrapper with an animated conic-gradient glow border in 5 colour variants
+type: reference
+---
+
+# GlowingBorder
+
+## Overview
+
+`GlowingBorder` wraps its default slot content in a rotating conic-gradient border effect, built
+with `@property`-registered custom properties so the hue rotation animates smoothly. It renders as
+a configurable root element via the `tag` prop.
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `tag` | `"div" \| "p" \| "span" \| "section" \| "article" \| "aside" \| "header" \| "footer" \| "main" \| "nav" \| "ul" \| "ol"` | `"div"` | Root element tag. |
+| `variant` | `"subtle" \| "vivid" \| "silver" \| "steel" \| "green"` | `"subtle"` | Glow colour variant. |
+| `styleClassPassthrough` | `string \| string[]` | `[]` | Extra classes applied to the root element. |
+
+## Slots
+
+| Slot | Description |
+|---|---|
+| `default` | Content rendered inside the glowing border. |
+
+## Basic usage
+
+```vue
+<GlowingBorder variant="vivid">
+  <p>Content wrapped in a glowing border</p>
+</GlowingBorder>
+```
+
+## Styling
+
+Border width, radius, surface colour, animation duration, and every variant's 5 gradient colour
+stops are public CSS custom properties — see `CONSUMER-STYLING.md` for the full token table.
+
+```vue
+<GlowingBorder
+  variant="steel"
+  style="--glowing-border-width: 2px; --glowing-border-animation-duration: 6s;"
+>
+  <p>Slower, thinner steel glow</p>
+</GlowingBorder>
+```
+
+## Motion
+
+The glow animation stops automatically under `prefers-reduced-motion: reduce`.
+
+## Notes
+
+- 2026-09-20 migration: moved from `app/components/glowing-border/` (unplaced) into
+  `01.atoms/animations/glowing-border/`; converted from options-style `defineProps({...})` to
+  `interface Props` + `withDefaults`; promoted border width/radius/surface/animation-duration and
+  every variant's 5 colour stops (previously hardcoded or unprefixed `--border-width`/`--surface`)
+  to public `--glowing-border-*` tokens; renamed internal composition custom properties
+  (`--clr-1..5`, `--glow-deg`, `--gradient-glow`) to private `--_clr-1..5`/`--_glow-deg`/
+  `--_gradient-glow`; added a `prefers-reduced-motion` guard. No behaviour change beyond the new
+  override surface.
+- 2026-09-20: added `green` variant (vibrant, saturated greens: `#00ff87`, `#39ff14`, `#00c853`,
+  `#64dd17`, `#00e676`), each stop overridable via `--glowing-border-green-color-{1-5}`.

package/.claude/skills/components/input-range-core.md

@@ -0,0 +1,142 @@
+# InputRangeCore Component
+
+## Overview
+
+`InputRangeCore` is the low-level native `<input type="range">` primitive for the `05.forms`
+range-slider family. It renders a single native range input with left/right button slots (for
+step-down/step-up controls), an optional `markers` slot for custom tick marks overlaid on the
+track, and an optional `datalist` slot for native tick-mark snapping. It has no label,
+description, or error-message rendering of its own — that's composed by the `InputRangeDefault`
+variant below.
+
+Most consumers should reach for **InputRangeDefault** rather than `InputRangeCore` directly.
+
+---
+
+## Props reference
+
+> **Hyphenation rule**: Vue's ESLint config enforces `vue/attribute-hyphenation`. Always write camelCase prop names hyphenated in templates: `:field-has-error`, `:style-class-passthrough`, `:aria-describedby`.
+
+| Prop (template form) | Type | Default | Notes |
+|------|------|---------|-------|
+| `:id` | `string` | (required) | Applied to the native input. |
+| `:name` | `string` | (required) | Applied to the native input, and used to derive the `list` id when the `datalist` slot is used (`${name}-datalist`). |
+| `:min` | `number` | (required) | Native `min`. |
+| `:max` | `number` | (required) | Native `max`. |
+| `:step` | `number` | `1` | Native `step`. |
+| `:required` | `boolean` | `false` | Native `required`. |
+| `:placeholder` | `string` | `""` | Declared but not rendered — range inputs have no placeholder concept. Kept for prop-shape consistency with sibling `05.forms` components. |
+| `:theme` | `FormUiTheme` | `"default"` | Sets `data-theme` on the wrapper. |
+| `:weight` | `FormWeight` | `"normal"` | Adds an `input-range--{weight}` class to the input. **No CSS in the library currently styles this class — it's a no-op today**, kept for prop-shape consistency with sibling components. |
+| `:field-has-error` | `boolean` | `false` | Declared, but doesn't drive any visible state inside `InputRangeCore` itself — `InputRangeDefault` handles the actual error styling (`data-invalid`/`.error` class) on its own wrapper. |
+| `:style-class-passthrough` | `string \| string[]` | `[]` | Extra CSS classes applied to the input element. |
+| `:aria-describedby` | `string` | `""` | Forwarded to the native input. |
+
+### v-model
+
+`v-model` — `number`, **required** (`defineModel<number>({ required: true })`). Bound directly to
+the native range input. Required rather than defaulted deliberately — a real `<input type="range">`
+always has a concrete value (there's no meaningful "empty" range slider), so a default here would
+be an artificial value rather than reflecting actual native behaviour. This also satisfies
+`vue/require-default-prop`, which otherwise flags any `defineModel()` without a default — see
+`project_ledger_eslint_issues_column` in memory for why that's the correct fix (not a rule
+disable, not a fake default).
+
+---
+
+## Slots
+
+| Slot | Notes |
+|------|-------|
+| `left` | Rendered before the track (e.g. a step-down button). |
+| `right` | Rendered after the track (e.g. a step-up button). |
+| `markers` | Rendered as an overlay on top of the track (`grid-area: element-stack`, same cell as the input). Adds a `has-markers` class to the input, which shrinks its visible track to a thin `0.2rem` strip and hides the native thumb, so your marker content becomes the primary visual. Expected shape: a `.input-range-markers` wrapper containing `.marker` elements (each optionally containing a `.marker-icon`) — see the component's own scoped CSS for the classes it pre-styles. |
+| `datalist` | Rendered after the input. Must contain a real `<datalist>` element whose `id` matches `${name}-datalist` for the browser to link it via the input's `list` attribute — the component computes that id string for the `list` attribute itself, but does not set the `id` on your slotted `<datalist>` for you. |
+
+---
+
+## CSS token API
+
+See [CONSUMER-STYLING.md](../../app/components/05.forms/input-range/CONSUMER-STYLING.md) for the
+full table with defaults.
+
+**Common tokens:**
+- `--input-range-accent-colour` — native `accent-color` (track/thumb tint), falls back to `--theme-accent`
+- `--input-range-marker-background-colour` / `-outline-colour` — marker dot styling
+- `--input-range-marker-icon-colour` — falls back to `--input-range-accent-colour`
+
+Thumb/track height and the button-slot's button size come from the shared global geometry token
+`--input-range-button-size` (declared in `03.generic-input-geometry.css`, not owned by this
+component), matching the convention `theming-form-geometry-tokens.md` documents for the rest of
+`05.forms`.
+
+---
+
+## Fixed 2026-09-21: dead `accent-color` token
+
+`accent-color` previously read `--theme-form-range-accent-color`, a custom property that was never
+declared anywhere in the codebase, with no fallback. Per the CSS spec, an undefined `var()` with
+no fallback makes the whole declaration invalid at computed-value time — so `accent-color` was
+silently falling back to the browser's native default (an OS-dependent blue) instead of the
+intended theme colour, in every place it was used (the input itself, its `.has-markers` state, and
+the marker icon colour). This is the same bug class found in `CarouselFlip`'s edge-preview tokens
+around the same time — check any component reaching for a `--theme-*`-prefixed custom property for
+a real declaration of that name before trusting it renders correctly.
+
+Also removed: a broken `::-webkit-slider-thumb` rule (`background-color: 0.1rem solid green` is
+invalid CSS and was silently dropped; `accent-color`/`color` don't apply to that pseudo-element at
+all) and ~60 lines of dead commented-out alternative thumb/track styling — none of it had any
+visible effect, since `appearance: none` (required for custom thumb/track styling to take effect)
+was itself commented out.
+
+---
+
+## Variants
+
+### InputRangeDefault
+
+`InputRangeDefault` (`variants/InputRangeDefault.vue`) composes `InputRangeCore` with `InputLabel`,
+`InputDescription`, and `InputError`, plus optional step-down/step-up buttons (`InputButtonCore`)
+wired into the `left`/`right` slots.
+
+**Additional props over InputRangeCore:**
+
+| Prop (template form) | Type | Default | Notes |
+|------|------|---------|-------|
+| `:label` | `string` | (required) | Rendered via `InputLabel`. |
+| `:error-message` | `object \| string` | (required) | Rendered via `InputError` when `field-has-error` is true. |
+| `:step-down-label` | `string` | `"Step down"` | `button-text` on the step-down `InputButtonCore` — override for localisation. |
+| `:step-up-label` | `string` | `"Step up"` | `button-text` on the step-up `InputButtonCore` — override for localisation. |
+
+**Slots**: `descriptionHtml`, `descriptionText` (both forwarded to `InputDescription`), plus
+`left`/`right`/`markers`/`datalist` (forwarded straight through to the underlying
+`InputRangeCore` — the step-down/step-up buttons only render when you use the `left`/`right`
+slots yourself, since the button icon content itself is consumer-supplied via `#iconOnly`).
+
+```vue
+<InputRangeDefault
+  name="priceRange"
+  label="Price range"
+  v-model="price"
+  :min="0"
+  :max="500"
+  :step="10"
+  error-message="Please choose a value within the allowed range"
+  :field-has-error="hasError"
+>
+  <template #left><Icon name="mdi:minus" /></template>
+  <template #right><Icon name="mdi:plus" /></template>
+</InputRangeDefault>
+```
+
+`v-model` is `number`, **required** — same as `InputRangeCore` above.
+
+**Fixed 2026-09-21**: removed a dead `deepCssClassPassthrough` prop (declared, never consumed
+anywhere in the component or referenced elsewhere in the codebase) and a dead `<style>` block
+targeting `.input-range-label`/`.label-description` — classes that nothing in this component (or
+`InputLabel`/`InputDescription`) actually renders, so the block had no effect. Also removed two
+dead commented-out lines (`// const id = useId();`, a duplicate no-op `FormUiTheme` computed), and
+(same day, follow-up pass) a `const props = withDefaults(...)` in both `InputRangeCore` and
+`InputRangeDefault` that had become entirely unused once the dead `FormUiTheme` computed was
+removed — the template's `:id`/`:name`/etc. shorthand bindings resolve straight from `defineProps`
+automatically in `<script setup>`, no destructuring or `props.` reference needed.

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

@@ -52,20 +52,37 @@ type: reference
 ## 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)
+- `background-position: var(--section-parallax-background-position, center)`
+- `background-size: var(--section-parallax-background-size, cover)`
+- `min-height: var(--section-parallax-min-height, 100svh)`
+- `background-color: var(--section-parallax-background-colour, light-dark(var(--slate-01), var(--slate-08)))` (visible if image fails to load)
+
+Inside `@media (hover: hover) and (pointer: fine) { @supports (background-attachment: fixed) { ... } }`:
 
-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
+- `min-height: var(--section-parallax-min-height-fixed, 120vh)` — ensures enough scroll travel to see the parallax motion
+
+Under `@media (prefers-reduced-motion: reduce)`, the parallax is disabled regardless of hover/
+`@supports` support: `background-attachment` reverts to `scroll` and height reverts to
+`--section-parallax-min-height`.
 
-## Controlling height
+## Styling
+
+Height, background position/size/colour are all public CSS custom properties — see
+`CONSUMER-STYLING.md` for the full token table.
+
+```vue
+<SectionParallax
+  background-image="/images/candle-and-stones.jpg"
+  style="--section-parallax-min-height: 60vh; --section-parallax-min-height-fixed: 70vh;"
+>
+  <p>Shorter atmospheric break</p>
+</SectionParallax>
+```
 
-Override `min-height` with a consuming-page style:
+Alternatively, override `min-height` with a consuming-page style:
 
 ```css
 .my-page {
@@ -98,5 +115,10 @@ Override `min-height` with a consuming-page style:
 ## 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.
+- 2026-09-20 migration: moved from `app/components/parallax/` (unplaced) into
+  `01.atoms/animations/section-parallax/`; props pattern was already `interface Props` +
+  `withDefaults` (no change needed); promoted min-height/background-position/background-size/
+  background-colour (previously hardcoded) to public `--section-parallax-*` tokens; added a
+  `prefers-reduced-motion: reduce` guard that disables the fixed-attachment parallax. No behaviour
+  change beyond the new override surface and the reduced-motion opt-out.

package/.claude/skills/components/ui-block-decorated.md

@@ -0,0 +1,56 @@
+---
+name: UiBlockDecorated
+description: UiBlockDecorated plain block wrapper with independent border/shadow/inner-shadow strength levels — props, CSS tokens
+type: reference
+---
+
+# UiBlockDecorated
+
+## Overview
+
+`UiBlockDecorated` renders its slot content in a plain block element (configurable `tag`) with
+three independent, optional decorations: a border, a drop shadow, and an inset ("inner") shadow.
+Each decoration has its own 0-based "strength" prop that selects a level from a built-in scale;
+`0` (the default) applies no class for that decoration, so all three are opt-in and combinable.
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `tag` | `"div" \| "p" \| "span" \| "section" \| "article" \| "aside" \| "header" \| "footer" \| "main" \| "nav" \| "ul" \| "ol"` | `"div"` | Root element tag. |
+| `borderStrength` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6` | `0` | Border strength level; `0` = no border. |
+| `shadowStrength` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6` | `0` | Drop shadow strength level; `0` = no shadow. |
+| `innerShadowStrength` | `0 \| 1 \| 2 \| 3 \| 4` | `0` | Inset shadow strength level; `0` = no inner shadow. |
+| `styleClassPassthrough` | `string \| string[]` | `[]` | Extra classes applied to the root element. |
+
+## Basic usage
+
+```vue
+<UiBlockDecorated :shadow-strength="3">
+  <p>Block content</p>
+</UiBlockDecorated>
+
+<UiBlockDecorated tag="section" :border-strength="2" :inner-shadow-strength="1">
+  <p>Block content</p>
+</UiBlockDecorated>
+```
+
+## CSS custom properties
+
+Each strength level has its own public token — see CONSUMER-STYLING.md for the full table. In
+short: `--ui-block-decorated-border-1` .. `-6`, `--ui-block-decorated-shadow-1` .. `-6`,
+`--ui-block-decorated-inner-shadow-1` .. `-4`, and `--ui-block-decorated-inner-shadow-highlight`
+(layered on top of every inner shadow level).
+
+## Notes
+
+- 2026-09-16 migration: previously used options-style `defineProps` and referenced six families of
+  global tokens (`--border-1`..`-6`, `--shadow-1`..`-6`, `--inner-shadow-1`..`-4`,
+  `--inner-shadow-highlight`) that were never declared anywhere in the codebase — every border,
+  shadow and inner shadow rendered as nothing. Fixed by giving each strength level its own
+  component-scoped public token (`--ui-block-decorated-*`) with a real fallback value baked in, so
+  the decorations work out of the box and are still fully overridable.
+- The applied classes were also renamed from bare `.border-1`/`.shadow-1`/`.inner-shadow-1` to
+  `.ui-block-decorated-border-1` etc. — the un-prefixed names risked colliding with a consumer
+  app's own utility classes, since this component renders inline in the consumer's DOM (not
+  teleported/portaled).