srcdev-nuxt-components 9.4.9 → 9.4.11

package/.claude/skills/components/select-menu.md

@@ -0,0 +1,195 @@
+# SelectMenu
+
+## Overview
+
+`SelectMenu` is a trigger-and-popover component for selecting from a list of options — a custom,
+fully token-styled alternative to a native `<select>` or `InputSelectCore`, built for non-form
+contexts (language switchers, category filters, faceted filter bars, multi-pick treatment lists).
+It reuses the same Popover API + CSS anchor-positioning mechanism as `ActionMenu` (see that skill
+doc), but its items carry a `value`/`label`/optional `icon`, and the whole thing is driven by
+`v-model` instead of slotted actions. Defaults to single-select (checkmark, closes on pick); set
+`multiple` for a checkbox-per-option multi-select where `v-model` is an array and the popover stays
+open between picks.
+
+**Location**: `app/components/02.molecules/select-menu/`
+
+---
+
+## Components
+
+### SelectMenu
+
+| Prop | Type | Default | Notes |
+|---|---|---|---|
+| `options` | `SelectMenuOption[]` | — | **Required.** `{ value: string \| number; label: string; icon?: string }[]`. |
+| `label` | `string` | — | **Required.** Accessible name for the trigger + listbox (`aria-label`). Also the trigger's fallback text when nothing is selected and no `placeholder` is set — this doubles as a visible category tag, e.g. `"Choose a service"`. |
+| `placeholder` | `string` | `undefined` | Trigger text shown when nothing is selected. Falls back to `label` when omitted. |
+| `showIcon` | `boolean` | `true` | Show the selected option's icon in the trigger. |
+| `showLabel` | `boolean` | `true` | Show the selected option's label (or placeholder/label fallback) text in the trigger. Set `false` for an icon-only compact trigger. |
+| `showChevron` | `boolean` | `true` | Show the trailing chevron in the trigger. |
+| `multiple` | `boolean` | `false` | Allow selecting more than one option. Each option gets a checkbox indicator, `v-model` becomes an array, and picking an option leaves the popover open so more can be toggled. Trigger icon is not shown when `true` (no single option to represent). |
+| `showSelectionInTrigger` | `boolean` | `false` | Multiple mode only. When `true`, the trigger text updates to a comma-separated list of the currently checked options instead of staying fixed on `placeholder`/`label`. No effect outside `multiple`. |
+| `styleClassPassthrough` | `string \| string[]` | `[]` | Extra classes on the root `<div>`. |
+
+**v-model**
+
+`defineModel<string | number | (string | number)[] | undefined>({ default: undefined })` — the
+selected value(s). In single-select mode (default) it's the one selected option's `value`, or
+`undefined` if nothing is selected — a valid, expected state that renders the placeholder. With
+`multiple`, it's an array of selected values (`[]` when nothing is selected). `{ default: undefined }`
+is this repo's fix for the `vue/require-default-prop` false positive on `defineModel`-declared
+props that are legitimately optional — unlike `InputSelectCore`'s `modelValue`, which uses
+`{ required: true }` because a native form field genuinely can't be meaningfully empty, this model
+is optional by design (see that rule's `defineModel` gap noted in the repo's ledger `eslint_issues`
+docs). For several independent single-select categories, place multiple `SelectMenu` instances
+side by side rather than using `multiple` on one instance — see the "Filter bar" section below.
+
+**Type import**
+
+```ts
+import type { SelectMenuOption } from "~/types/components/select-menu";
+// consuming apps: import type { SelectMenuOption } from "srcdev-nuxt-components";
+```
+
+---
+
+## Basic usage
+
+```vue
+<script setup lang="ts">
+import type { SelectMenuOption } from "~/types/components/select-menu";
+
+const language = ref<string>("en");
+const languageOptions: SelectMenuOption[] = [
+  { value: "en", label: "English", icon: "flag:gb-4x3" },
+  { value: "fr", label: "Français", icon: "flag:fr-4x3" },
+];
+</script>
+
+<template>
+  <SelectMenu v-model="language" :options="languageOptions" label="Language" />
+</template>
+```
+
+---
+
+## Trigger content variants
+
+| Variant | Usage |
+|---|---|
+| Icon-only (compact switcher, e.g. a flag in a tight header) | `:show-label="false" :show-chevron="false"` |
+| Icon + chevron, no text (flag with a visible dropdown affordance) | `:show-label="false"` |
+| Text + chevron (category filter, no per-option icons) | `:show-icon="false"` |
+| Icon + text + chevron (full select) | Defaults — no overrides needed |
+
+When nothing is selected, the trigger shows `placeholder` (or `label` if no placeholder is given)
+— this is what makes it work as a filter-category tag, e.g. a `SelectMenu` with
+`label="Choose a service"` and no `placeholder` shows "Choose a service" until an option is
+picked, then swaps to the selected option's label.
+
+---
+
+## Multi-select (checkboxes)
+
+Set `multiple` to turn every option into a checkbox row. `v-model` becomes an array, and clicking
+an option toggles it without closing the popover:
+
+```vue
+<script setup lang="ts">
+const treatments = ref<string[]>([]);
+const treatmentOptions = [
+  { value: "trim", label: "Trim" },
+  { value: "layers", label: "Layers" },
+  { value: "restyle", label: "Restyle" },
+  { value: "straightening", label: "Straightening" },
+];
+</script>
+
+<template>
+  <SelectMenu v-model="treatments" :options="treatmentOptions" label="Services required" multiple />
+</template>
+```
+
+Unlike single-select, the trigger text stays fixed by default on `placeholder`/`label` as a static
+category tag regardless of the current selection — it doesn't update to list checked options, so
+`label="Services required"` remains visible in the trigger the whole time. Use the checkboxes
+inside the open popover to see what's currently selected.
+
+Set `showSelectionInTrigger` to opt out of that and have the trigger update instead:
+
+```vue
+<SelectMenu
+  v-model="treatments"
+  :options="treatmentOptions"
+  label="Services required"
+  multiple
+  show-selection-in-trigger
+/>
+<!-- Trigger reads e.g. "Layers, Restyle" once those two are checked, falling back to
+     "Services required" again if everything is unchecked. -->
+```
+
+---
+
+## Filter bar (multiple categories)
+
+`SelectMenu` is single-select per instance — a faceted filter bar is built by placing one instance
+per category, each with its own `v-model`:
+
+```vue
+<template>
+  <div style="display: flex; gap: 1.2rem;">
+    <SelectMenu label="Choose a service" v-model="service" :options="serviceOptions" />
+    <SelectMenu label="Choose a stylist" v-model="stylist" :options="stylistOptions" />
+  </div>
+</template>
+```
+
+---
+
+## CSS token API
+
+See `CONSUMER-STYLING.md` in the component folder for the full token reference. Default styling
+targets the same visual language as the library's other select-like controls (border, background,
+radius, focus ring drawn from `--theme-*` tokens).
+
+Quick reference:
+
+```css
+/* assets/styles/setup/07.components/select-menu.css */
+:root {
+  --select-menu-trigger-border-radius: 999rem;
+  --select-menu-trigger-surface: var(--brand-surface);
+  --select-menu-popover-surface: var(--brand-surface);
+  --select-menu-item-surface-hover: var(--brand-surface-subtle);
+  --select-menu-item-check-color: var(--brand-accent);
+}
+```
+
+---
+
+## Notes
+
+- **Popover API + CSS anchor positioning** — same mechanism as `ActionMenu`. Broadly supported
+  (Chrome 114+, Firefox 125+, Safari 17+). No polyfill is included.
+- **Left-aligned popover** (`left: anchor(left)`) — unlike `ActionMenu` which right-aligns. Matches
+  native `<select>` dropdown behaviour. Flips above the trigger near the bottom of the viewport.
+- **Keyboard navigation** follows the WAI-ARIA listbox pattern: `ArrowDown`/`ArrowUp` move between
+  options (wraps around), `Home`/`End` jump to first/last, `Enter`/`Space` select the focused
+  option, `Tab` closes without stealing focus back to the trigger (matches `ActionMenu`'s
+  `handleKeydown` convention — see that skill doc's note on the `currentIndex === -1` guard, which
+  applies identically here). `Enter`/`Space` close the popover in single-select mode but only
+  toggle the checkbox (leaving it open) when `multiple` is set.
+- **Opens focused on the current selection** — `handleToggle` focuses the first selected
+  `[role="option"]` if one exists (in `multiple` mode, the first checked item), otherwise the first
+  option (unlike `ActionMenu`, which always focuses the first item since it has no selection state).
+- **`aria-multiselectable="true"`** is set on the listbox only when `multiple` is `true`.
+- **Chevron rotation is pure CSS** via `:has(.select-menu-popover:popover-open)` on the root — no
+  JS state drives the visual. `isOpen` is still tracked internally, but only to set `aria-expanded`
+  on the trigger.
+- **No native `<select>`/`appearance: base-select` involved** — this is a from-scratch popover
+  listbox, not a styled native select, so it doesn't inherit `InputSelectCore`'s WebKit
+  `appearance: base-select` constraints.
+- **Not a form field** — `SelectMenu` has no `fieldHasError`/`theme`/`inputVariant` props like the
+  `05.forms` inputs. Use `InputSelectCore` instead for an actual form field that needs validation
+  state and native `<select>` semantics.

package/.claude/skills/components/toggle-switch-core.md

@@ -0,0 +1,150 @@
+# ToggleSwitchCore Component
+
+## Overview
+
+`ToggleSwitchCore` is the low-level pill-shaped (or square, via `round`) toggle switch primitive
+for the `05.forms` toggle family. It renders a visually-hidden native `<input type="checkbox">`
+(kept in the DOM for real keyboard/checkbox semantics) plus a styled track/thumb visual, with
+optional icon slots shown inside the thumb for the on/off states. It has no label, description, or
+error-message rendering of its own — that's composed by the `ToggleSwitchWithLabel` and
+`ToggleSwitchWithLabelInline` variants below.
+
+Most consumers should reach for **ToggleSwitchWithLabel** or **ToggleSwitchWithLabelInline** rather
+than `ToggleSwitchCore` 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`, `:true-value`, `:false-value`.
+
+| Prop (template form) | Type | Default | Notes |
+|------|------|---------|-------|
+| `:id` | `string` | (required) | Combined with a fixed prefix to build the native input's `id` (`toggle-switch-${id}`). |
+| `:name` | `string` | (required) | Applied to the native checkbox. |
+| `:required` | `boolean` | `false` | Native `required`. |
+| `:field-has-error` | `boolean` | `false` | Drives `aria-invalid` on the checkbox, and switches `data-theme` to `"error"` regardless of the `theme` prop's own value. |
+| `:true-value` / `:false-value` | `string \| number \| boolean` | `true` / `false` | The two values `v-model` toggles between. |
+| `:style-class-passthrough` | `string \| string[]` | `[]` | Extra CSS classes applied to the root element. |
+| `:theme` | `FormUiTheme` | `"default"` | Sets `data-theme` on the root (superseded by `"error"` when `field-has-error` is true — see above). |
+| `:round` | `boolean` | `true` | `true` renders a pill-shaped track/thumb (`border-radius: 100vw`); `false` renders a rounded-square shape (`border-radius: 0.4rem`). See the `--toggle-switch-border-radius` token in CONSUMER-STYLING.md to override the exact value either state produces. |
+| `:aria-describedby` | `string` | `""` | Forwarded to the native checkbox. |
+
+### v-model
+
+- `v-model` — `string | number | boolean`, **required** (`defineModel({ required: true })`, satisfying `vue/require-default-prop` — see `project_ledger_eslint_issues_column` in memory).
+
+### Slots
+
+- `iconOn` / `iconOff` — replace the default `material-symbols:circle-outline` icon shown inside the thumb for each state. Providing either slot switches off the `use-default-icons` wrapper class (checked via `useSlots()`, so this only reacts to slot *presence*, not conditional slot content).
+
+---
+
+## CSS token API
+
+See [CONSUMER-STYLING.md](../../app/components/05.forms/toggle-switch/CONSUMER-STYLING.md) for the
+full table with defaults.
+
+**Common tokens:**
+- `--toggle-switch-surface` / `-surface-hover` — track background resting/hover, fall back to `--theme-checkbox-symbol-surface`/`--theme-surface-subtle`
+- `--toggle-switch-border` / `-border-focus` — track border colour, and `:focus-visible` outline colour, fall back to `--theme-border`/`--theme-border-focus`
+- `--toggle-switch-symbol-surface-off` / `-symbol-surface-on` — thumb background unchecked/checked
+- `--toggle-switch-border-radius` — track and thumb shape; see the `round` prop above
+
+---
+
+## Fixed 2026-09-23: dead functionality and story bugs
+
+`ToggleSwitchCore` (and its two variants) migrated to full compliance from a `variants:true`,
+`eslint_issues:true`, score-3/5 state (no tests, no skill doc).
+
+- **`round` prop was completely dead** — both variants declared and forwarded it to
+  `ToggleSwitchCore`, and Storybook's `SquareShape` story existed specifically to demonstrate
+  `round: false`, but `ToggleSwitchCore` never declared the prop at all, so it silently fell
+  through as an inert `round` DOM attribute on the root `<div>` and the track/thumb stayed pill-shaped
+  regardless. Fixed by adding `round` to `ToggleSwitchCore` and wiring it to a new
+  `--toggle-switch-border-radius` token (100vw when round, 0.4rem when square).
+- **`fieldHasError` didn't switch the component's theme** — `ToggleSwitchCore` and
+  `ToggleSwitchWithLabel` both computed an error-aware theme value but bound `data-theme` to the
+  raw `theme` prop instead of that computed, so this library's `[data-theme="error"]` global
+  token overrides never applied when a consumer set `fieldHasError`. Fixed by binding `data-theme`
+  to the computed value in both files.
+- **An invalid `for` attribute on a `<div>`** (`.toggle-switch-wrapper`) was removed — `for` is
+  only a valid HTML attribute on `<label>`/`<output>`, so it was inert dead markup; the real
+  label association is via `InputLabel`'s own `for`/`id` wiring in the variants.
+- **`defineModel` had no default**, tripping `vue/require-default-prop` (a known false-positive
+  for `defineModel` — see `project_ledger_eslint_issues_column` in memory) — fixed with
+  `{ required: true }` across `ToggleSwitchCore` and both variants, since a checkbox genuinely
+  can't be meaningfully empty.
+- **Two dead, unread `--_transition-duration` private tokens** (one per variant) were removed —
+  nothing in either variant's own CSS or `ToggleSwitchCore`'s ever read them; the actual
+  transition durations are hardcoded `0.4s` literals inside `ToggleSwitchCore`.
+- **Custom `iconOn`/`iconOff` slot content could render as a non-square box, throwing off
+  centering** — `.symbol-icon` is `display: grid; place-content: center;`, and its single
+  auto-sized track shrink-wraps to the slotted content's own box. A plain inline element (e.g. a
+  `<span>` wrapping a 16×16 SVG, as in the `WithCustomIcons` stories) sizes to its line box's
+  leading rather than its intrinsic height, rendering as ~16×20 instead of 16×16. Fixed by adding
+  `line-height: 0` to `.symbol-icon`, which collapses that leading for whatever markup a consumer
+  slots in. The default icon (`@nuxt/icon`'s `Icon` component) wasn't affected, since iconify sets
+  its own sizing/`vertical-align` internally.
+- **All three story files' `theme` control listed the wrong option set**
+  (`["primary", "secondary", "tertiary", "ghost", "error", "success", "warning"]`, none of which
+  match `FormUiTheme`) — fixed to the real `["default", "success", "error", "warning"]`.
+  `ToggleSwitchWithLabelInline.stories.ts`'s `InlineFormExample` story also passed the now-invalid
+  `theme="secondary"` directly — fixed to `"default"`.
+
+---
+
+## Variants
+
+### ToggleSwitchWithLabel
+
+`ToggleSwitchWithLabel` (`variants/ToggleSwitchWithLabel.vue`) composes `ToggleSwitchCore` with
+`InputLabel`, an optional `description` slot, and `InputError`.
+
+**Additional props over ToggleSwitchCore:**
+
+| Prop (template form) | Type | Default | Notes |
+|------|------|---------|-------|
+| `:label` | `string` | (required) | Rendered via `InputLabel`. |
+| `:error-message` | `object \| string` | `""` | Rendered via `InputError` when `field-has-error` is true. |
+
+Note this wrapper passes `id`/`name`/`required`/`field-has-error`/`true-value`/`false-value`/
+`theme`/`round`/`aria-describedby` straight through to `ToggleSwitchCore`; `id` is a self-generated
+`useId()` value, not a prop — consumers don't set it directly.
+
+**Slots**: `description`, `iconOn`, `iconOff` (the latter two forwarded to `ToggleSwitchCore`).
+
+```vue
+<ToggleSwitchWithLabel
+  name="notifications"
+  label="Enable notifications"
+  v-model="notificationsEnabled"
+  :error-message="errors.notifications"
+  :field-has-error="!!errors.notifications"
+>
+  <template #description>Turn this on to receive notifications</template>
+</ToggleSwitchWithLabel>
+```
+
+### ToggleSwitchWithLabelInline
+
+`ToggleSwitchWithLabelInline` (`variants/ToggleSwitchWithLabelInline.vue`) composes
+`ToggleSwitchCore` with `InputLabel` laid out inline (label and switch side by side, no
+description/error-message support — this variant is for compact settings-row usage).
+
+**Additional props over ToggleSwitchCore:**
+
+| Prop (template form) | Type | Default | Notes |
+|------|------|---------|-------|
+| `:label` | `string` | (required) | Rendered via `InputLabel`. |
+| `:label-weight` | `LabelWeight` (`"normal" \| "semi-bold" \| "bold"`) | `"normal"` | Maps to a `body-normal`/`body-normal-semibold`/`body-normal-bold` class on the label. |
+
+This variant has no `required`/`field-has-error`/`error-message` props — it never claimed error-state
+support, unlike `ToggleSwitchWithLabel`.
+
+**Slots**: `iconOn`, `iconOff` (forwarded to `ToggleSwitchCore`).
+
+```vue
+<ToggleSwitchWithLabelInline name="darkMode" label="Dark mode" v-model="darkModeEnabled" />
+```

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).

package/.claude/skills/components/wipe-away-vertical.md

@@ -0,0 +1,98 @@
+---
+name: WipeAwayVertical
+description: WipeAwayVertical scroll-driven vertical wipe-away effect — props, dynamic slot API, CSS grid overlay mechanics, CSS tokens
+type: reference
+---
+
+# WipeAwayVertical
+
+## Overview
+
+`WipeAwayVertical` is a scroll-driven "wipe away" effect: a stack of sticky panels, each of
+which wipes away (via a `clip-path` animation) to reveal the panel underneath as the user
+scrolls past its paired tracking section. Pure CSS — built on `animation-timeline: view()`, a
+single-column CSS grid overlay, and no JavaScript scroll listeners or measurement at all.
+
+## How it works
+
+- The root is a single-column CSS grid. `.sticky-items-container` spans every row as an overlay
+  (`grid-row: 1 / -1`), holding `itemCount` `.sticky-item` panels stacked with descending
+  `z-index` (item 0 on top).
+- Each real `.scrolling-section` gets its own explicit grid row and acts as a scroll tracker —
+  its entry into the viewport drives the wipe-out animation of its paired sticky item via a
+  named `view-timeline`. Only `itemCount - 1` sections are rendered: the **last** sticky item
+  has nothing left to reveal, so it has no wipe animation (`animation-timeline: none`) and no
+  scrolling section of its own.
+- A `.leading-buffer` (fixed `100vh`) renders before the first scrolling section, so section 0
+  isn't already partway through its `entry` timeline range at page load, whatever content
+  precedes the component.
+- A `.trailing-buffer`, sized by `--wipe-away-vertical-trailing-buffer` (default `20vh`), renders
+  after the last real scrolling section — just enough room for the sticky container to release
+  cleanly once the final panel is fully revealed.
+- `.sticky-items-container` is sized by `--wipe-away-vertical-height` (default `100vh`) and
+  centers itself with `top: calc((100vh - var(--wipe-away-vertical-height, 100vh)) / 2)` — a
+  plain `calc()`, deliberately **not** a `transform: translateY()`. `position: sticky`'s
+  stick/release threshold is computed from the element's *untransformed* layout position, so a
+  transform-based visual shift releases the sticky panel early by the transformed amount,
+  leaving a gap after the last panel. `.scrolling-section`'s `view-timeline-inset` uses the same
+  `calc()` so the entry/exit range lines up with the same visual offset. (An earlier version
+  used `top: 50%` — also wrong, since a percentage `top` on `position: sticky` resolves against
+  the containing block's height, not the viewport, and this component's containing block is
+  deliberately many viewport-heights tall.)
+- Where `@supports not (animation-timeline: view())`, the grid/sticky/animation machinery is
+  dropped entirely: the root becomes `display: block`, the leading/trailing buffers and
+  scrolling sections are hidden, and the sticky items render as plain stacked panels in normal
+  document flow. No JS fallback, no opacity crossfade — just a flat, static stack.
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `tag` | `"div" \| "section" \| "main" \| "article" \| "aside"` | `"div"` | Root element tag. |
+| `itemCount` | `number` | — (required) | Number of sticky panels. Drives the sticky-item slot loop, `itemCount - 1` scrolling sections, per-item `z-index`, and `view-timeline` naming. |
+| `styleClassPassthrough` | `string \| string[]` | `[]` | Extra classes applied to the root element. |
+
+## Slots
+
+Dynamic named slots:
+
+| Slot | Description |
+|------|-------------|
+| `stickyItem-{n}` | Content for sticky panel `n`, indexed `0` to `itemCount - 1`. |
+| `scrollingItem-{n}` | Content (or an empty spacer) for scroll-tracking section `n`, indexed `0` to `itemCount - 2` only — the last panel has no scrolling section of its own. Typically an empty `100vh`-tall `div`; its height determines how much scroll distance that panel's wipe covers. |
+
+## Basic usage
+
+```vue
+<WipeAwayVertical :item-count="3">
+  <template #stickyItem-0><PanelOne /></template>
+  <template #stickyItem-1><PanelTwo /></template>
+  <template #stickyItem-2><PanelThree /></template>
+
+  <template #scrollingItem-0><div style="height: 100vh;"></div></template>
+  <template #scrollingItem-1><div style="height: 100vh;"></div></template>
+</WipeAwayVertical>
+```
+
+Leave the root's own `height` unset — it's a grid that sizes itself from its children (leading
+buffer + scrolling sections + trailing buffer). Setting an explicit height undersizes the root
+relative to its real content and releases the sticky panel mid-wipe.
+
+## CSS custom properties
+
+| Property | Default | Applies to |
+|----------|---------|------------|
+| `--wipe-away-vertical-height` | `100vh` | `.sticky-items-container` height (the visible sticky panel stack) |
+| `--wipe-away-vertical-border-radius` | `0.5rem` | `.sticky-item` corner radius |
+| `--wipe-away-vertical-animation-duration` | `1s` | `wipe-out` keyframe duration (view-timeline-supporting browsers) |
+| `--wipe-away-vertical-trailing-buffer` | `20vh` | height of the release cushion after the last real scrolling section |
+
+## Notes
+
+- Uses indexed dynamic slots (not the library's default named-dynamic-slot pattern) because
+  `itemCount` also drives non-slot logic: per-item `z-index`, grid rows, and the
+  `view-timeline-name`/`animation-timeline` CSS variable naming, not just the slot loop itself.
+- Reduced motion: the wipe animation is disabled under `prefers-reduced-motion: reduce`
+  (`animation: none; clip-path: none;`) — all panels render fully visible with no clip.
+- No hardcoded consumer-facing text — this is a purely structural/animation wrapper around
+  consumer-supplied slot content.

package/.claude/skills/icon-sets.md

@@ -21,7 +21,7 @@ The layer's `modules/icon-sets.ts` runs at dev/build time and logs an info messa
 | `bi` | `@iconify-json/bi` | NavigationItems (overflow caret) |
 | `bitcoin-icons` | `@iconify-json/bitcoin-icons` | Display components |
 | `gravity-ui` | `@iconify-json/gravity-ui` | NavigationItems (burger/ellipsis overflow) |
-| `ic` | `@iconify-json/ic` | CarouselBasic, CarouselFlip, CarouselInfinite, SliderGallery, CanvasSwitcher |
+| `ic` | `@iconify-json/ic` | CarouselFlip, SliderGallery, CanvasSwitcher |
 | `lucide` | `@iconify-json/lucide` | ColourFinder, TreatmentConsultant |
 | `material-symbols` | `@iconify-json/material-symbols` | form components |
 | `mdi` | `@iconify-json/mdi` | NavigationHorizontal, form components, ServicesCard |

package/.claude/skills/index.md

@@ -63,6 +63,7 @@ Each skill is a single markdown file named `<area>-<task>.md`.
 ├── composable-analytics.md           — useAnalytics: provider-agnostic trackEvent/page-view tracking (google-analytics only implemented), consent-gated, single call site for setup + firing events
 └── components/
     ├── alert-content-inner.md    — AlertContentInner: shared icon/body/dismiss molecule under AlertContent + AlertMaskedContent; app.config icon map (alertContent.icons + dismissIcon) covers all consumers
+    ├── alert-mask-core.md      — AlertMaskCore: SVG border/background mask sized to slotted content via ResizeObserver, config-prop-driven geometry/colour (no CSS token API)
     ├── animated-svg-text.md    — AnimatedSvgText: inline SVG stroke-draw-then-fill animation, text slot, CSS token API
     ├── accordian-core.md       — AccordianCore indexed dynamic slots (accordian-{n}-summary/icon/content), exclusive-open grouping
     ├── eyebrow-text.md         — EyebrowText props, usage patterns, styling
@@ -92,6 +93,7 @@ Each skill is a single markdown file named `<area>-<task>.md`.
     ├── grid-stack.md           — GridStack: CSS Grid z-axis stacking, slot API, z-order rules, sizing, video+overlay and image+text patterns
     ├── scroll-reveal-frame.md  — ScrollRevealFrame: generic parallax clipping frame, slot API, image grid pattern, CSS tokens, browser support
     ├── scroll-reveal-image.md  — ScrollRevealImage: single-image parallax reveal, focalX, imgWidth/imgHeight, responsive frame height
+    ├── wipe-away-vertical.md   — WipeAwayVertical: scroll-driven vertical wipe-away effect, pure-CSS grid overlay (no JS), indexed dynamic slots, sticky-centering-via-calc gotcha, CSS tokens
     ├── marquee-scroller.md     — MarqueeScroller: infinite logo/badge scroller, per-item dynamic slots (marqueeData id), hover/focus/keyboard pause, reduced-motion, CSS tokens
     ├── rotating-carousel-image.md — RotatingCarouselImage: 3D rotating image carousel, scroll-parallax tilt, focus/keyboard/hover pause, reduced-motion, CSS tokens
     ├── site-navigation.md      — SiteNavigation: responsive nav with auto-collapse, burger menu, decorator indicators, CSS token API
@@ -102,8 +104,10 @@ Each skill is a single markdown file named `<area>-<task>.md`.
     ├── decode-qr-code.md       — DecodeQrCode: file picker + drag-and-drop image decoder, shared results list, CSS override points
     ├── auto-grid.md            — AutoGrid: auto-fit responsive grid, $slots iteration, --auto-grid-min-col-size/gap tokens, semantic tag + aria
     ├── display-avatar.md       — DisplayAvatar: circular avatar with image/initials fallback, size variants, chip badge, icon slot, styleClassPassthrough
+    ├── display-theme-switch.md — DisplayThemeSwitch: system/light/dark picker wrapping TripleToggleSwitchCore, wired to useSettingsStore, labels/icons props, small sizing variant
     ├── card-core.md            — CardCore: generic card container, dynamic named slots as rows, 4 variants, blurred backdrop layer, full CSS token API
     ├── action-menu.md          — ActionMenu + ActionMenuItemCore: ellipsis trigger + anchored popover menu, indexed item-{n} slots, link/button items, full CSS token API
+    ├── select-menu.md          — SelectMenu: v-model single-select listbox popover (ActionMenu's popover mechanics, InputSelectCore's selected-option semantics), icon/text/chevron trigger toggles, checkmark on selected option, options-array driven, full CSS token API
     ├── display-dialog.md       — DisplayDialog: native <dialog> overlay, 5 variants (dialog/modal/confirm/alert/fullscreen), useDialogControls integration, CSS token API
     ├── display-chip.md         — DisplayChip: status indicator chip overlay, CSS trig positioning, circle/square shapes, status colours, icon/label content
     ├── display-pill.md         — DisplayPill: pill/badge label with icon slot, 6 variants, 3 sizes, reversible order, full CSS token API for border/outline/colour
@@ -123,9 +127,19 @@ Each skill is a single markdown file named `<area>-<task>.md`.
     ├── display-tooltip-defined.md — DisplayTooltipDefined: structured title/body/action tooltip content with close button, composes DisplayTooltip
     ├── pop-over.md                — PopOver: generic anchor-positioned disclosure panel, consumer-supplied trigger/content slots, placement prop, CSS token API
     ├── input-text-core.md        — InputTextCore: native text/date/number input primitive, min/max pass-through (date-picker range), CSS token API; Variants section covers InputTextWithLabel/InputPasswordWithLabel/InputTextAsNumberWithLabel
+    ├── input-range-core.md       — InputRangeCore: native range-slider primitive, markers/datalist slots, dead --theme-form-range-accent-color token fixed, CSS token API; Variants section covers InputRangeDefault
+    ├── input-number-core.md      — InputNumberCore: native number-input primitive, left/right step-button slots, missing base class/placeholder/mismatched slot-selector bugs fixed, CSS token API; Variants section covers InputNumberDefault
+    ├── input-textarea-core.md    — InputTextareaCore: native textarea primitive, left/right decorative slots, undefined-token/dead-code/label-leak bugs fixed, CSS token API; Variants section covers InputTextareaWithLabel
+    ├── input-select-core.md      — InputSelectCore: native select primitive, data-driven options with icon decorator, dead required/styleClassPassthrough/isDirty-isActive functionality fixed, appearance:base-select browser-support note, CSS token API; Variants section covers InputSelectWithLabel
+    ├── toggle-switch-core.md      — ToggleSwitchCore: pill/square checkbox-backed toggle primitive, dead round-prop/data-theme-error functionality and story theme-options bugs fixed, CSS token API; Variants section covers ToggleSwitchWithLabel/ToggleSwitchWithLabelInline
     ├── entry-animation.md         — EntryAnimation: scroll-driven entry animation wrapper (slide-in/zoom-reveal/exit-blur utility classes), skipAnimation for above-the-fold loop items, reduced-motion handled at the CSS layer
     ├── column-flow-grid.md        — ColumnFlowGrid (renamed from MasonryGrid): CSS multi-column text-flow layout, named dynamic slots (no count/data prop), itemMinWidth/gap/unit sizing, CSS token API; not a true masonry, see "which one do I want?"
-    └── masonry-grid.md            — MasonryGrid: real measured-height masonry (greedy shortest-column packing, animated resize) absorbed from the now-retired MasonryGridOrdered; named dynamic slots, fixedWidth/justify, CSS token API
+    ├── masonry-grid.md            — MasonryGrid: real measured-height masonry (greedy shortest-column packing, animated resize) absorbed from the now-retired MasonryGridOrdered; named dynamic slots, fixedWidth/justify, CSS token API
+    ├── glowing-border.md          — GlowingBorder: animated conic-gradient glow border, 5 colour variants, tag prop, full CSS token API for width/radius/surface/duration/per-variant colour stops, reduced-motion guard
+    ├── section-parallax.md        — SectionParallax: CSS fixed-background parallax section, iOS Safari limitation, when to use vs ScrollRevealImage, CSS token API, reduced-motion guard
+    ├── container-glow.md          — ContainerGlow (renamed from ContainerGlowCore): pointer-proximity glow-border cards, named dynamic slots (one card per slot), config-prop-driven layout/interaction, full CSS token API for static visuals, reduced-motion guard
+    ├── dashboard-quad-grid.md      — DashboardQuadGrid (renamed from LayoutGridA): fixed 4-slot dashboard grid, container-query breakpoints, CSS token API
+    └── dashboard-stats-grid.md     — DashboardStatsGrid (renamed from LayoutGridB): top-row panel cluster + bottom-row panel strip dashboard grid, topRowSlot1ItemCount/bottomRowItemCount, CSS token API
 ```
 
 ## Skill file template

package/.vscode/css-custom-data.json

@@ -0,0 +1,38 @@
+{
+  "version": 1.1,
+  "properties": [
+    {
+      "name": "rule",
+      "status": "experimental",
+      "description": "CSS Gap Decorations: shorthand for row-rule/column-rule width, style, and colour — draws lines in the gaps between grid/flex items. Limited browser support as of 2026.",
+      "references": [
+        {
+          "name": "MDN Reference",
+          "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/rule"
+        }
+      ]
+    },
+    {
+      "name": "rule-break",
+      "status": "experimental",
+      "description": "CSS Gap Decorations: controls whether gap rule lines break at grid item intersections (e.g. \"intersection\", \"spanning-item\"). Limited browser support as of 2026.",
+      "references": [
+        {
+          "name": "MDN Reference",
+          "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/rule-break"
+        }
+      ]
+    },
+    {
+      "name": "rule-inset",
+      "status": "experimental",
+      "description": "CSS Gap Decorations: insets gap rule lines from the edges of the items they run between. Limited browser support as of 2026.",
+      "references": [
+        {
+          "name": "MDN Reference",
+          "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/rule-inset"
+        }
+      ]
+    }
+  ]
+}

package/.vscode/settings.json

@@ -36,6 +36,9 @@
       "editor.trimAutoWhitespace": "explicit"
     }
   },
+  // Recognises CSS properties too new for VS Code's built-in CSS language service (e.g. Gap Decorations' rule/rule-break/rule-inset)
+  "css.customData": [".vscode/css-custom-data.json"],
+
   // More info: https://open-props.style/#getting-started
   "cssvar.files": ["assets/styles/main.css"],
   "cssvar.ignore": [],

package/.vscode/srcdev-component-alert-mask-core.code-snippets

@@ -0,0 +1,31 @@
+{
+  "SRCDEV AlertMaskCore Basic": {
+    "description": "AlertMaskCore — SVG border/background mask sized to slotted content",
+    "scope": "vue,html",
+    "body": [
+      "<AlertMaskCore>",
+      "  $0",
+      "</AlertMaskCore>"
+    ]
+  },
+  "SRCDEV AlertMaskCore Custom Config": {
+    "description": "AlertMaskCore with custom colour/geometry config",
+    "scope": "vue,html",
+    "body": [
+      "<AlertMaskCore",
+      "  :config=\"{",
+      "    borderColour: '$1var(--theme-accent)',",
+      "    backgroundColour: '$2rgba(0, 0, 0, 0.3)',",
+      "    radiusLeft: $38,",
+      "    radiusRight: $44,",
+      "    borderLeft: $56,",
+      "    borderTop: $61,",
+      "    borderRight: $71,",
+      "    borderBottom: $81,",
+      "  }\"",
+      ">",
+      "  $0",
+      "</AlertMaskCore>"
+    ]
+  }
+}