srcdev-nuxt-components 9.6.10 → 9.6.12

package/.claude/skills/components/marquee-scroller.md

@@ -10,8 +10,9 @@ type: reference
 
 `MarqueeScroller` renders an infinite horizontal scroller for small repeating items — client
 logos, badges, testimonial avatars. The track is duplicated once so the loop is seamless
-(`marquee-group` renders twice: once real, once `aria-hidden="true"`), and the whole thing pauses
-automatically on hover, on keyboard focus, and when the user has `prefers-reduced-motion` set.
+(`.marquee-scroller-group` renders twice: once real, once `aria-hidden="true"` and `inert`), and the
+whole thing pauses automatically on hover, whenever focus is inside it, and when the user has
+`prefers-reduced-motion` set.
 
 ## Props
 
@@ -24,11 +25,12 @@ automatically on hover, on keyboard focus, and when the user has `prefers-reduce
 | `ariaLabel` | `string` | `"Scrolling content"` | `aria-label` on the root region — override for localisation. |
 | `ariaDescription` | `string` | `"Use spacebar to pause or play the animation."` | Screen-reader-only instructions rendered inside the region — override for localisation. |
 | `showControls` | `boolean` | `false` | Shows a visible pause/play button. Recommended (WCAG 2.2.2, Pause/Stop/Hide) whenever content scrolls automatically and indefinitely. |
-| `respectReducedMotion` | `boolean` | `true` | Auto-pauses and disables the animation for users with `prefers-reduced-motion: reduce`, and pauses on keyboard focus. |
+| `respectReducedMotion` | `boolean` | `true` | Auto-pauses and disables the animation for users with `prefers-reduced-motion: reduce` (and keeps it paused after focus leaves). Focus-pausing no longer depends on it. |
 | `playIcon` | `string` | `"mdi:play"` | Iconify icon name shown on the control button while paused. Ignored if the `toggle-icon` slot is used. |
 | `pauseIcon` | `string` | `"mdi:pause"` | Iconify icon name shown on the control button while playing. Ignored if the `toggle-icon` slot is used. |
-| `playLabel` | `string` | `"Play animation"` | Control button `aria-label` while paused — override for localisation. |
-| `pauseLabel` | `string` | `"Pause animation"` | Control button `aria-label` while playing — override for localisation. |
+| `playLabel` | `string` | `"Play animation"` | Control button text (visually hidden, its accessible name) while paused — override for localisation. |
+| `pauseLabel` | `string` | `"Pause animation"` | Control button text (visually hidden, its accessible name) while playing — override for localisation. |
+| `styleClassPassthrough` | `string \| string[]` | `[]` | Extra classes on the root `.marquee-scroller`, via `useStyleClassPassthrough` (reacts to prop changes). |
 
 Import the item types from the library's type exports when building `marqueeData`/`itemConfig`
 outside the component:
@@ -52,8 +54,10 @@ One dynamically-named slot per `marqueeData` entry, named after that item's `id`
 </MarqueeScroller>
 ```
 
-Each slot is rendered twice (once in the visible group, once in the `aria-hidden` duplicate group)
-so the loop wraps seamlessly — don't put anything with side effects or unique ids inside a slot.
+Each slot is rendered twice (once in the visible group, once in the `aria-hidden`, `inert`
+duplicate group) so the loop wraps seamlessly. Don't put anything with side effects or unique ids
+inside a slot. Links are fine: only the real copy is focusable. Items are fixed-size boxes; text
+wraps inside them (`overflow-wrap: anywhere`) but content taller than `itemConfig.height` overflows.
 
 `toggle-icon` (scoped with `{ isPaused: boolean }`) replaces the control button's icon entirely —
 use this instead of `playIcon`/`pauseIcon` when an Iconify name isn't enough (custom SVG, a
@@ -70,16 +74,25 @@ different icon set):
 ## Accessibility behaviour
 
 - The root is `role="region"` with `tabindex="0"` so it's independently focusable.
-- Spacebar toggles pause/play while the region is focused. Arrow keys do nothing — there is no
+- Spacebar toggles pause/play while the region itself is focused (keydown from inside, e.g. on the
+  control button or a link, is left to that element). Arrow keys do nothing — there is no
   manual-stepping behaviour, so the default `ariaDescription` doesn't claim one (fixed 2026-09-08;
   it previously announced "arrow keys ... for manual control" with no implementation behind it).
-- Focusing the region pauses the animation when `respectReducedMotion` is `true` (the default);
-  blurring resumes it unless the user prefers reduced motion.
+- Focus anywhere inside the region (the region itself, or a link in an item) pauses the animation
+  and removes `aria-hidden` from the track, so the focused content is announced. Focus moving between
+  elements inside keeps it paused. When focus leaves, it resumes only if focus caused the pause and
+  the user doesn't prefer reduced motion: a pause chosen with the button or spacebar sticks.
+  Focus landing on the control button doesn't auto-pause, so one click pauses. (Changed 2026-10-17:
+  this used to listen for `focus`/`blur` on the region only, gated on `respectReducedMotion`, so
+  tabbing to a link in an item left it moving and `aria-hidden`.)
 - Hovering anywhere over the scroller pauses the track and applies
   `--marquee-scroller-group-hover-filter` (default `grayscale(1)`) to every item; hovering an
   individual item restores it via `--marquee-scroller-item-hover-filter` (default `grayscale(0)`).
 - `aria-live` switches to `"polite"` while paused so screen readers announce the paused content.
-- The duplicate track group is always `aria-hidden="true"`.
+- The track is `aria-hidden="true"` while playing (attribute removed when paused). The duplicate
+  group is always `aria-hidden="true"` and `inert`, so its copies of any links can't be focused.
+- The control button is an `InputButton` (`variant="inline"`, icon-only): `playLabel`/`pauseLabel`
+  is its visually hidden text rather than an `aria-label`.
 - All user-visible copy (`ariaLabel`, `ariaDescription`, `playLabel`, `pauseLabel`) is a plain
   string prop with an English default — there's no i18n framework dependency in this library, so
   pass translated strings from the consumer's own i18n solution.
@@ -110,11 +123,11 @@ theme); only its border width is (`--marquee-scroller-control-border-width`).
 
 ## Seamless loop math
 
-The track duplicates `marqueeData` into two `.marquee-group` children so the loop can wrap without
+The track duplicates `marqueeData` into two `.marquee-scroller-group` children so the loop can wrap without
 a visible cut. The animation must shift the track by exactly one group's width plus its connecting
 gap — not `translateX(-50%)`, which overshoots short of the seam once the track's own `gap`
 between the two groups is added to its total width. This is computed as a private
-`--_track-shift: calc(itemCount * (itemWidth + gap))` token and used in the `marqueeMove`
+`--_track-shift: calc(itemCount * (itemWidth + gap))` token and used in the `marquee-scroller-move`
 keyframe. Fixed 2026-09-08 — the original `-50%` version produced a small but visible gap/overlap
 at the loop point once more than a couple of items were in `marqueeData`.
 
@@ -125,6 +138,30 @@ section on a wide viewport), the loop briefly shows empty space before snapping
 the visible track only spans as wide as the content, not the container. On mount (and on
 container resize, via `ResizeObserver`), the component measures one rendered group's `scrollWidth`
 against the root element's `offsetWidth` and repeats `marqueeData` internally (`repeatCount`)
-enough times per `.marquee-group` so a single group's width always covers the container. This is
+enough times per `.marquee-scroller-group` so a single group's width always covers the container. This is
 transparent to consumers — it doesn't change `marqueeData` or any prop, only how many times each
 item's slot is rendered internally. Fixed 2026-09-08.
+
+The repeat count is capped at 50 copies per group, so tiny items in a huge container can't flood
+the DOM (added 2026-10-17).
+
+## Storybook
+
+`Atoms/Effects/MarqueeScroller`: `WithControls`, `FocusableItems` (links in items, for the focus
+behaviour), and `StressTest` (24 items of hostile copy, a broken image, long localised labels, a
+single item, tiny items hitting the repeat cap, and empty data). Stories use the `CanvasSwitcher`
+decorator.
+
+## History
+
+**2026-10-17** (stress-test pass, breaking class renames):
+
+- Structural classes prefixed (`.marquee-scroller-item`, `-control`, `-track`, `-group`,
+  `-description`); bare `.reverse`/`.paused`/`.reduced-motion` became `data-*` attributes; keyframes
+  renamed `marquee-scroller-move`. See CONSUMER-STYLING.md for the full map.
+- Raw `<button>` replaced with `InputButton variant="inline"` (icon-only slot).
+- Focus-pausing reworked (focusin/focusout, see Accessibility behaviour); duplicate group `inert`.
+- `prefers-reduced-motion` change listener is now removed on unmount.
+- New `--marquee-scroller-focus-outline-colour` token (was bare `--theme-ring`).
+- Added `styleClassPassthrough`. Removed the redundant `aspect-ratio: 1 / 1` on items (width and
+  height are both set, and it mis-centres on old Safari). Items wrap unbroken text.

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

@@ -4,8 +4,9 @@
 
 `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.
+`is-pending`. Don't render it on its own. Its CSS depends on the host being `.input-button[data-pending-effect]`
+(and `position: relative`, which that rule provides), plus `[data-pending]` to show and animate it.
+Those were the classes `.pending-effect` and `.is-pending` until 2026-10-17.
 
 ```vue
 <InputButton button-text="Submit" type="submit" has-pending-effect :is-pending="submitting" />
@@ -26,10 +27,10 @@ No slots, no events.
 
 ## Behaviour
 
-- Hidden (`opacity: 0`) until the host has `.is-pending`.
+- Hidden (`opacity: 0`) until the host has `[data-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.
+  `[data-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.

package/.claude/skills/components/{triple-toggle-switch.md → segmented-control.md}

@@ -1,23 +1,27 @@
 ---
-name: TripleToggleSwitch
-description: TripleToggleSwitch three-option radio pill with a sliding marker, v-model + v-model:field-data, system/light/dark marker gradients, CSS token API
+name: SegmentedControl
+description: SegmentedControl icon radio pill with a sliding marker, v-model + v-model:field-data, system/light/dark marker gradients, CSS token API
 type: reference
 ---
 
-# TripleToggleSwitch
+# SegmentedControl
 
+> **Renamed 2026-10-17**: `TripleToggleSwitch` → `SegmentedControl` (folder
+> `05.forms/segmented-control/`). Classes `.triple-toggle-switch*` → `.segmented-control*`, tokens
+> `--triple-toggle-switch-*` → `--segmented-control-*`; props, slots and behaviour unchanged.
+>
 > **Renamed 2026-09-27**: `TripleToggleSwitchCore` → `TripleToggleSwitch` (Control/Field naming,
-> see `.claude/skills/component-naming.md`). Root class `.triple-toggle-switch` unchanged.
+> see `.claude/skills/component-naming.md`).
 
 ## Overview
 
-A pill containing three icon-only radio options, with a circular marker that slides behind the
+A pill of icon-only radio options (three is the usual case, any count works), with a circular marker that slides behind the
 selected one. Native `<input type="radio">` elements do the work (keyboard arrows, form
 submission), hidden under each icon; each option's `label` is rendered `sr-only`.
 
-Lives in `app/components/05.forms/triple-toggle-switch/`. Its one in-library consumer is
+Lives in `app/components/05.forms/segmented-control/`. Its one in-library consumer is
 `DisplayThemeSwitch` (system/light/dark colour-scheme picker wired to `useSettingsStore`). Reach
-for that for a theme switch; use `TripleToggleSwitch` directly for any other three-way choice.
+for that for a theme switch; use `SegmentedControl` directly for any other three-way choice.
 
 ## Props
 
@@ -25,14 +29,13 @@ for that for a theme switch; use `TripleToggleSwitch` directly for any other thr
 |---|---|---|---|
 | `v-model` | `string \| number \| boolean` | (required) | Selected option `value`. |
 | `v-model:field-data` | `IFormMultipleOptions` | (required) | Options (`data[]` of `{ id, name, value, label, icon? }`). Read-only in practice; a `computed` works. |
-| `name` | `string` | `"triple-toggle-switch"` | Shared radio `name`. Give each instance on a page its own. |
+| `name` | `string` | generated | Radio `name`. Defaults to a unique `useId()` name, so several instances never share a group. |
 | `aria-label` | `string` | `""` | Accessible name for the `role="radiogroup"`. Omitted from the DOM when empty. Always pass one. |
 | `theme` | `FormUiTheme` | `"default"` | Rendered as `data-theme`. |
 | `step-animation-duration` | `string` | `"250ms"` | Marker slide duration; also times the icon colour swap (see Behaviour). Ignored under `prefers-reduced-motion`. |
 | `style-class-passthrough` | `string \| string[]` | `[]` | Classes on the root. |
 
-Option `id`s are used as element ids (and as a class on each icon), so they must be unique on the
-page.
+Element ids come from `useId()`, not from option `id`s, so duplicate or missing data ids are safe.
 
 ## Usage
 
@@ -54,18 +57,21 @@ const options = ref<IFormMultipleOptions>({
 </script>
 
 <template>
-  <TripleToggleSwitch v-model="scheme" v-model:field-data="options" name="scheme" aria-label="Colour scheme" />
+  <SegmentedControl v-model="scheme" v-model:field-data="options" aria-label="Colour scheme" />
 </template>
 ```
 
 ## Behaviour
 
-- Exactly three columns (`repeat(3, 1fr)`); more or fewer options will lay out wrongly.
-- Options without an `icon` render no visible content (the label is `sr-only`), so always give
-  each option an icon.
-- The marker is measured from the first option's width on mount and fades in after ~250ms. It
-  isn't re-measured on resize, so changing the icon-size/padding tokens after mount (e.g. toggling
-  a class) leaves the marker at its old size.
+- One column per option (`repeat(<count>, minmax(0, 1fr))`), so two, four or five options lay out
+  correctly; three is just the common case.
+- Options without an `icon` render an empty circle (the label is `sr-only`), so give each option an
+  icon.
+- The marker sits in a second grid identical to the options grid and moves with
+  `inset-inline-start: calc(index * (100% + gap))`, where `100%` is one column. No script measures
+  anything, so it's right from the first paint, follows token and size changes, and moves the
+  correct way in right-to-left layouts. A value that matches no option hides the marker (no
+  `data-has-selection` on the root).
 - Icon colour swaps are timed to the marker: the newly active icon waits half of
   `stepAnimationDuration`, then fades to the active colour over the other half, so it lands as the
   marker arrives rather than turning white on the bare track. The previous icon fades back straight
@@ -73,12 +79,12 @@ const options = ref<IFormMultipleOptions>({
 - Option circles are sized by their content (1em icon + equal padding) with `place-items: center`,
   not `aspect-ratio`; older iPad Safari mis-centred the icons under the `aspect-ratio` version.
 - Marker gradients only exist for the values `system`, `light` and `dark`; other values get the
-  plain `--triple-toggle-switch-marker-surface` background.
+  plain `--segmented-control-marker-surface` background.
 
 ## Styling
 
 Full token list in `CONSUMER-STYLING.md` next to the component. Key tokens:
-`--triple-toggle-switch-surface`, `-border`, `-gap`, `-padding`, `-option-padding`, `-icon-size`,
+`--segmented-control-surface`, `-border`, `-gap`, `-padding`, `-option-padding`, `-icon-size`,
 `-marker-gradient-system`/`-light`/`-dark`, `-option-icon-color`/`-color-active`.
 
 ## Notes
@@ -89,3 +95,12 @@ Full token list in `CONSUMER-STYLING.md` next to the component. Key tokens:
   dead `--_form-border-radius` token and commented-out CSS removed; three identical per-id icon
   colour rules collapsed to one `.option-icon` rule (the per-id classes are still rendered);
   `fieldData` is now a typed required `defineModel`. Tests added.
+
+**2026-10-17**: resting shadow ring (`--segmented-control-shadow`), on the wrapper. Theme step 2 by default, so it turns red under `data-invalid`; width is the global `--form-element-shadow-width`. Hover now draws a 1px outline in the border colour with no offset, over the ring's inner edge (was a 2px outline at a 2px offset in the focus colour); focus is unchanged and sits just outside the ring.
+- 2026-10-17 migration: inner classes prefixed (`.option-group` → `.segmented-control-option`,
+  etc.) and state moved to `data-checked`/`data-value`/`data-has-selection`; the measured marker
+  (first option's width, 250ms timer, no resize handling) replaced by a CSS-only grid position;
+  any option count supported; ids and the default `name` from `useId()` (the fixed default name
+  made two instances one radio group); icons `aria-hidden`, marker layer `aria-hidden`;
+  passthrough now reactive; generic values no longer show a white icon on a white marker.
+  `StressTest` story added.

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

@@ -206,6 +206,6 @@ No `actions` slot — the entire card renders as an anchor (`NuxtLink` for the i
 - Root markup is two rows (`grid-template-rows: auto 1fr`): `.services-card-image-wrapper`, then a `.services-card-details` (`display: flex; flex-direction: column`) holding the eyebrow, title, description, and a `.services-card-footer` wrapper. Description length is controlled by `--services-card-description-line-clamp` (default `none`) rather than a fixed-height grid row.
 - `.services-card-footer` groups the meta row and the `actions` slot and gets `margin-block-start: auto`, pinning them to the bottom of the card. Combined with the root's `1fr` details row, this means when `ServicesCardGrid`'s default `align-items: stretch` makes a card taller than its own content (to match a taller sibling in the same row), the extra height goes to `.services-card-footer`'s top margin rather than leaving whitespace below the actions slot — so the meta row and actions/button line up across a row of cards regardless of each card's description length. This does the visual job of CSS subgrid without needing a subgrid chain across `ServicesCard`/`ServicesCardGrid` (which would also break whenever cards in a row don't all render the same optional rows — `.services-card-meta` and `actions` are both conditional).
 - Image has a `3/4` aspect ratio with a subtle scale-on-hover effect, triggered by hovering the image only (not the whole card). When the card is a whole-card link styled with its own hover effect (e.g. `--services-card-transform-hover`), set `--services-card-image-zoom-transform: none` so the two effects don't stack; the "Dark Overlay Cards" story does this. Keep the zoom for the `actions`-slot layout, where the card itself has no hover state. The hover is on `.services-card-image-wrapper`, not the image, so it still fires when the overlaid titles cover the image. `.services-card-image-details` is `position: relative; z-index: 1` because the image's hover `transform` would otherwise paint over it, and `.services-card-image-wrapper` sets `isolation: isolate` so that z-index stays inside the card.
-- `.services-card`, `.services-card-image-wrapper`, `.services-card-details`, and `.services-card-footer` all set `min-inline-size: 0`. Without it, an unbreakable child — most commonly a long `actions` slot button label, since `InputButton`'s `.button-text` is `white-space: nowrap` with no ellipsis — forces its content's min-content width up through the flex/grid chain and widens that one card's grid column in `ServicesCardGrid` wider than its siblings (the image just rides along on the widened column; it isn't the actual cause). If you see one card/column wider than the rest with cut-off content, check for a long unbreakable string in a slot before assuming it's an image sizing issue.
+- `.services-card`, `.services-card-image-wrapper`, `.services-card-details`, and `.services-card-footer` all set `min-inline-size: 0`. Without it, an unbreakable child — most commonly a long `actions` slot button label, kept on one line with `--input-button-text-white-space: nowrap` (the default until 2026-10-17) — forces its content's min-content width up through the flex/grid chain and widens that one card's grid column in `ServicesCardGrid` wider than its siblings (the image just rides along on the widened column; it isn't the actual cause). If you see one card/column wider than the rest with cut-off content, check for a long unbreakable string in a slot before assuming it's an image sizing issue.
 - Usually consumed via `ServicesCardGrid` rather than directly.
 - The "Dark Overlay Cards" story shows a full restyle using tokens only: dark panel, flush image, titles over the image, hover lift (`--services-card-transform-hover`), and EyebrowText typography tokens (`--eyebrow-text-font-style`, `-letter-spacing`, etc.) set on the card so they inherit into its eyebrow.

package/.claude/skills/components/tabbed-content.md

@@ -169,7 +169,7 @@ length, cancelling the per-frame checks while the highlight was still sliding an
 colours (dark selected label, invisible neighbour). A More-button resize also re-places both
 indicators (`syncIndicators(true)`), since its box moves even when no tab changes sides, and an
 overflow change refreshes with `refreshTabs(true)` so an in-flight move retargets instead of
-snapping. This replaces the per-component timing trick `TripleToggleSwitch` uses (swap
+snapping. This replaces the per-component timing trick `SegmentedControl` uses (swap
 colour at half the slide), which only works for single-step moves; a tab jump passes under
 several labels.
 

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

@@ -141,3 +141,5 @@ error id when `field-has-error` is true.
 ```
 
 The `description` slot was removed on 2026-09-29; use `descriptionText` or `descriptionHtml`.
+
+**2026-10-17**: resting shadow ring (`--toggle-switch-shadow`), on the track. Theme step 2 by default, so it turns red under `data-invalid`; width is the global `--form-element-shadow-width`. Hover now draws a 1px outline in the border colour with no offset, over the ring's inner edge (was a 2px outline at a 2px offset in the focus colour); focus is unchanged and sits just outside the ring.

package/.claude/skills/index.md

@@ -77,8 +77,8 @@ Each skill is a single markdown file named `<area>-<task>.md`.
 ├── composable-anchored-popover.md    — useAnchoredPopover: popover + anchor positioning with JS fallbacks for Safari 16 (no Popover API) and 17–18 (no anchor positioning); used by ActionMenu/SelectMenu/DeepExpandingMenu/DisplayTooltip/PopOver
 └── components/
     ├── alert-content.md          — AlertContent + AlertContentInner: themed alert panel (icon/title/content/actions/dismiss) under DisplayToast, DisplayPrompt and AlertMaskedContent; showIcon, #actions row, --alert-content-* tokens, app.config icon map
-    ├── alert-mask-core.md      — AlertMaskCore: SVG border/background mask sized to slotted content via ResizeObserver, config-prop-driven geometry/colour (no CSS token API)
-    ├── alert-masked-content.md — AlertMaskedContent: AlertContentInner inside AlertMaskCore's SVG mask (accent cut-out border + translucent fill); masked variant for DisplayToast/DisplayPrompt; --alert-masked-content-* colour tokens
+    ├── alert-mask.md      — AlertMask (renamed from AlertMaskCore): SVG border/fill sized to slotted content via ResizeObserver; config-prop geometry, --alert-mask-* colour tokens
+    ├── alert-masked-content.md — AlertMaskedContent: AlertContentInner inside AlertMask's SVG mask (accent cut-out border + translucent fill); masked variant for DisplayToast/DisplayPrompt; --alert-masked-content-* colour tokens
     ├── 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
@@ -123,7 +123,7 @@ Each skill is a single markdown file named `<area>-<task>.md`.
     ├── auto-grid.md            — AutoGrid: auto-fit responsive grid, $slots iteration, --auto-grid-gap/min-col-size-{small,default,large} tokens, is-responsive, semantic tag + aria
     ├── display-avatar.md       — DisplayAvatar (02.molecules): circular avatar with image/initials fallback (alt announced), broken-image fallback, data-size scale tokens, image-size, --display-avatar-* colours, chip badge, icon slot
     ├── profile-section.md      — ProfileSection (02.molecules): picture + numbered profile-info-N slots, eyebrow/hero header (above, or over the picture top/bottom on a scrim via header-placement), profileLinks, container-query two-column layout, .location/.services highlight tokens
-    ├── display-theme-switch.md — DisplayThemeSwitch: system/light/dark picker wrapping TripleToggleSwitch, wired to useSettingsStore, labels/icons props, small sizing variant
+    ├── display-theme-switch.md — DisplayThemeSwitch: system/light/dark picker wrapping SegmentedControl, 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 + ActionMenuItem: 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, InputSelect's selected-option semantics), icon/text/chevron trigger toggles, checkmark on selected option, options-array driven, full CSS token API
@@ -146,7 +146,7 @@ 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.md            — InputText (bare control), InputTextField, InputPasswordField, InputTextAsNumberField: renamed from Core/WithLabel, data-* state hooks, readonly/autocomplete props, leak-free digit filtering, wrapper attr-leak/empty-description/passthrough fixes, rounded+clamped stepping, min/max pass-through, CSS token API, stress stories
-    ├── input-button.md           — InputButton (renamed from InputButtonCore 2026-09-28): button/NuxtLink/a, variants, icon slots, readonly (aria-disabled, activation blocked), tokens
+    ├── input-button.md           — InputButton (renamed from InputButtonCore 2026-09-28): button/NuxtLink/a; primary filled, secondary outlined, tertiary text-only, inline unstyled; data-* state hooks; shadow ring + border-colour hover; wrapping labels; icon slots; readonly (aria-disabled, activation blocked); tokens
     ├── input-range.md            — InputRange: native range-slider primitive, markers/datalist slots, dead --theme-form-range-accent-color token fixed, CSS token API; Variants section covers InputRangeField; renamed from InputRangeCore/InputRangeDefault 2026-10-16, clamped stepping, useId datalist id, data-* hooks
     ├── input-number.md           — InputNumber: native number-input primitive, left/right step-button slots, missing base class/placeholder/mismatched slot-selector bugs fixed, CSS token API; Variants section covers InputNumberField; clamped, rounded stepping, data-* state hooks, min/step-aware inputmode
     ├── input-otp.md              — InputOtp: one-time-code digit boxes (paste/autofill spreading, Backspace/arrow/Home/End nav, Enter submits, leading zeros kept, complete event, hidden input); Variants section covers InputOtpField
@@ -163,7 +163,7 @@ Each skill is a single markdown file named `<area>-<task>.md`.
     ├── input-checkbox.md         — MultipleCheckboxes/SingleCheckbox: fieldset-wrapped checkbox group (data-driven, button or labelled) and single checkbox, per-box native-required/styleClassPassthrough/data-testid bugs fixed, spacing token API, wraps hostile content (fieldset min-inline-size, useId option ids)
     ├── input-radio.md            — MultipleRadiobuttons: fieldset radiogroup (data-driven, button or labelled), shared-name grouping bug fixed, dead label/placeholder/equalCols props removed, data-options-layout hook, spacing token API, useId button ids, wraps hostile content
     ├── toggle-switch.md         — ToggleSwitch (bare control), ToggleSwitchField (labelled, layout="stacked"|"inline", replaces ToggleSwitchWithLabelInline): renamed from Core/WithLabel, role="switch", prefixed inner classes + data-checked, single-toggle click handling, reduced motion, round prop + border-radius token, track width from geometry, CSS token API, stress stories
-    ├── triple-toggle-switch.md    — TripleToggleSwitch (renamed from TripleToggleSwitchCore): three-option icon radio pill with sliding marker, radiogroup + ariaLabel, system/light/dark marker-gradient tokens, reduced-motion, CSS token API
+    ├── segmented-control.md    — SegmentedControl (renamed from TripleToggleSwitch): icon radio pill for any number of options with sliding marker, radiogroup + ariaLabel, system/light/dark marker-gradient tokens, reduced-motion, CSS token API
     ├── 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

package/.claude/skills/storybook-add-story.md

@@ -393,7 +393,9 @@ story: "See the [CookieConsentBanner](?path=/story/molecules-cookieconsentbanner
   default `"padded"` layout insets the canvas by 1rem, which masks viewport gutters, full-bleed
   tracks and edge alignment (`PageRow`, `SliderGallery`). To swap canvas widths inside a story,
   add the `CanvasSwitcher` decorator from `PageRow.stories.ts` (container-sized components only;
-  see `components/canvas-switcher.md`).
+  see `components/canvas-switcher.md`). The switcher renders its own buttons, so for a component
+  with Playwright tests that grab the story's only `role=button` (`InputButton`), put it on the
+  `StressTest` story alone, not in the meta.
 - Use `table: { category: "..." }` in `argTypes` when a component has many props — it groups
   them in the Storybook controls panel (e.g. `"Model"`, `"Basic"`, `"Validation"`, `"Styling"`, `"Slots"`).
 - Export multiple named stories (`Default`, `WithError`, `Outlined`, etc.) when you want

package/.claude/skills/theming-component-token-pattern.md

@@ -191,6 +191,30 @@ Three tiers deep here: instance/global override → "look like the primary butto
 slot underneath that. Each link in the chain is a real, resolvable token — nothing depends on a
 consuming app having declared anything.
 
+## Global colour knobs that follow the theme
+
+A site-wide colour knob that should follow each element's `data-theme` (or `data-invalid`) can't be
+declared on `:root` as `var(--colour-theme-2)`: a custom property holding `var()` is computed where
+it's declared and inherited as that value, so every element gets the root theme's colour. Leave the
+knob undeclared and fall back at the point of use instead:
+
+```css
+/* global: only the geometry is declared */
+:where(html) {
+  --form-element-shadow-width: 0.2rem;
+}
+
+/* component: the colour fallback is evaluated on the themed element */
+.input-text-wrapper {
+  box-shadow: 0 0 0 var(--form-element-shadow-width)
+    var(--input-text-shadow, var(--form-element-shadow-colour, var(--colour-theme-2)));
+}
+```
+
+`--colour-theme-N` and the `--theme-*` slots are themselves re-declared on every `[data-theme]` and
+`[data-invalid]` element (`theme-ramp.css`, `_theme-slots.css`), which is why they work at the point of
+use. Rule: `css-theme-relative-globals.md`.
+
 ## What this does NOT change
 
 - Tier 1 theme slots (`_theme-slots.css`) stay bare `var()`, no fallback, by design.

package/.claude/skills/theming-form-geometry-tokens.md

@@ -42,7 +42,7 @@ From `00.element-defaults.css` through `09.animation-motion.css`:
 | --- | --- |
 | `01.field-layout-container-level.css` | `--field-margin-block`, `--field-gap-block`, `--field-gap-inline`, `--field-label-gap`, `--field-description-gap`, `--field-error-gap` |
 | `02.typography.css` | `--field-label-font-size/-weight/-line-height`, `--input-font-size`, `--input-line-height`, `--theme-input-placeholder-font-size`, `--button-font-size/-line-height/-weight/-text-transform`, `--field-description-font-size/-line-height`, `--field-error-font-size/-weight` |
-| `03.generic-input-geometry.css` | `--input-padding-block/-inline`, `--input-padding-inline-with-icon`, `--form-element-border-width`, `--form-element-border-bottom-width-underlined`, `--form-input-border-radius[-underlined]`, `--form-element-outline-width[-focus]`, `--form-element-outline-offset-focus`, `--input-focus-ring-width/-offset`, `--input-underline-width`, `--input-min-height`, `--input-element-line-height`, plus per-element-type geometry (textarea/select/range/checkbox/toggle — see file for the full set) |
+| `03.generic-input-geometry.css` | `--input-padding-block/-inline`, `--input-padding-inline-with-icon`, `--form-element-border-width`, `--form-element-border-bottom-width-underlined`, `--form-input-border-radius[-underlined]`, `--form-element-outline-width[-focus]`, `--form-element-outline-offset-focus`, `--form-element-shadow-width` (the resting shadow ring on bordered controls and primary/secondary buttons; its colour `--form-element-shadow-colour` is deliberately undeclared so each control falls back to its own theme step 2), `--input-focus-ring-width/-offset`, `--input-underline-width`, `--input-min-height`, `--input-element-line-height`, plus per-element-type geometry (textarea/select/range/checkbox/toggle — see file for the full set) |
 | `04.slot-icon-system.css` | `--input-slot-width/-gap`, `--input-icon-size`, `--input-icon-slot-gap`, `--input-icon-color[-focus/-error]` |
 | `05.checkbox-radio-geometry.css` | `--control-size`, `--control-border-radius`, `--radio-border-radius`, `--control-border-width`, `--control-indicator-scale`, `--control-label-gap` |
 | `06.button-geometry.css` | `--button-padding-block/-inline`, `--button-border-radius[-icon-only]`, `--button-border-width`, `--button-outline-width`, `--button-focus-ring-width/-offset`, `--button-icon-gap` |

package/.claude/skills/theming-partial-override.md

@@ -40,7 +40,7 @@ affects buttons, inputs, prompts, and toasts simultaneously:
 | --------------------------- | ------------------------- | ------------------------------------------------------------------------------------------------------------------------ |
 | `--theme-surface`           | `--colour-theme-7` / `9` | Filled button/chip surface                                                                                              |
 | `--theme-surface-hover`     | `--colour-theme-9` / `7` | Hover state of filled surface                                                                                            |
-| `--theme-surface-inverted`  | `--colour-theme-9` / `2` | Inverted surface (`InputButton`'s `.secondary` background)                                                          |
+| `--theme-surface-inverted`  | `--colour-theme-9` / `2` | Inverted surface (dark panels; InputButton's secondary used it until 2026-10-17)                                                          |
 | `--theme-accent`            | `--colour-theme-5` / `4` | Decorative accent strip (prompt/toast left edge)                                                                        |
 | `--theme-surface-subtle`    | `--colour-theme-1` / `9` | Subtle body bg for prompt/toast, outline element hover                                                                  |
 | `--theme-border`            | `--colour-theme-6` / `5` | Input/card border                                                                                                        |

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

@@ -0,0 +1,41 @@
+{
+  "SRCDEV AlertMask Basic": {
+    "description": "AlertMask: SVG border and fill sized to slotted content",
+    "scope": "vue,html",
+    "body": [
+      "<AlertMask>",
+      "  $0",
+      "</AlertMask>"
+    ]
+  },
+  "SRCDEV AlertMask Custom Config": {
+    "description": "AlertMask with custom colour/geometry config",
+    "scope": "vue,html",
+    "body": [
+      "<AlertMask",
+      "  :config=\"{",
+      "    borderColour: '${1:var(--theme-accent)}',",
+      "    backgroundColour: '${2:rgba(0, 0, 0, 0.3)}',",
+      "    radiusLeft: ${3:8},",
+      "    radiusRight: ${4:4},",
+      "    borderLeft: ${5:6},",
+      "    borderTop: ${6:1},",
+      "    borderRight: ${7:1},",
+      "    borderBottom: ${8:1},",
+      "  }\"",
+      ">",
+      "  $0",
+      "</AlertMask>"
+    ]
+  },
+  "SRCDEV AlertMask CSS Override": {
+    "description": "CSS override scaffold for AlertMask colour tokens",
+    "scope": "css",
+    "body": [
+      ".${1:my-section} {",
+      "  --alert-mask-border-colour: $2;",
+      "  --alert-mask-background-colour: $3;",
+      "}"
+    ]
+  }
+}

package/.vscode/srcdev-component-form-field.code-snippets

@@ -3,7 +3,7 @@
     "description": "FormField layout wrapper around a single form control",
     "scope": "vue,html",
     "body": [
-      "<FormField width=\"${1|wide,medium,narrow|}\" :has-gutter=\"${2|false,true|}\" :field-has-error=\"!!$3errors.fieldName\">",
+      "<FormField width=\"${1|wide,medium,narrow|}\" :has-gutter=\"${2|false,true|}\" :field-has-error=\"!!${3:errors.fieldName}\">",
       "  $0",
       "</FormField>"
     ]
@@ -12,12 +12,13 @@
     "description": "CSS override scaffold for FormField tokens",
     "scope": "css",
     "body": [
-      ".$1my-page {",
+      ".${1:my-page} {",
       "  .form-field {",
-      "    --form-field-max-width-narrow: $2;",
-      "    --form-field-gutter-width: $3;",
-      "    --form-field-margin-block: $4;",
-      "    --form-field-background-color: $5;",
+      "    --form-field-max-width-narrow: ${2:400px};",
+      "    --form-field-gutter-width: ${3:1.6rem};",
+      "    --form-field-margin-block: ${4:0 1.6rem};",
+      "    --form-field-background-color: ${5:transparent};",
+      "    --form-field-border-radius: ${6:0.4rem};",
       "  }",
       "}"
     ]

package/.vscode/srcdev-component-form-fieldset.code-snippets

@@ -4,11 +4,11 @@
     "scope": "vue,html",
     "body": [
       "<FormFieldset",
-      "  id=\"$1fieldId\"",
-      "  name=\"$2fieldName\"",
-      "  legend=\"$3Legend\"",
+      "  id=\"${1:fieldId}\"",
+      "  name=\"${2:fieldName}\"",
+      "  legend=\"${3:Legend}\"",
       "  group-role=\"${4|group,radiogroup|}\"",
-      "  :field-has-error=\"!!$5errors.fieldName\"",
+      "  :field-has-error=\"!!${5:errors.fieldName}\"",
       ">",
       "  <template #content>",
       "    $0",
@@ -20,15 +20,15 @@
     "description": "CSS override scaffold for FormFieldset tokens",
     "scope": "css",
     "body": [
-      ".$1my-page {",
+      ".${1:my-page} {",
       "  .form-fieldset {",
-      "    --form-fieldset-padding-block: $6;",
-      "    --form-fieldset-padding-inline: $7;",
-      "    --form-fieldset-border: $8;",
-      "    --form-fieldset-legend-color: $2;",
-      "    --form-fieldset-legend-font-size: $3;",
-      "    --form-fieldset-legend-font-weight: $4;",
-      "    --form-fieldset-legend-margin-block: $5;",
+      "    --form-fieldset-padding-block: ${2:0};",
+      "    --form-fieldset-padding-inline: ${3:0};",
+      "    --form-fieldset-border: ${4:0};",
+      "    --form-fieldset-legend-color: ${5:inherit};",
+      "    --form-fieldset-legend-font-size: ${6:var(--step-5)};",
+      "    --form-fieldset-legend-font-weight: ${7:normal};",
+      "    --form-fieldset-legend-margin-block: ${8:0.8rem};",
       "  }",
       "}"
     ]