srcdev-nuxt-components 9.6.9 → 9.6.11

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/css-nesting-conventions.md

@@ -28,7 +28,8 @@ This project uses **native CSS nesting** (W3C CSS Nesting spec), not Sass/SCSS.
 **Why it silently fails**: esbuild converts `&__heading` to `:is(__heading)`, which tries to match an HTML element named `__heading`. No such element exists, so the styles are never applied. There's no error — just missing styles.
 
 The build will show this warning:
-```
+
+```text
 ▲ [WARNING] Cannot use type selector "__heading" directly after nesting selector "&" [css-syntax-error]
   CSS nesting syntax does not allow the "&" selector to come before a type selector.
 ```
@@ -119,3 +120,23 @@ If you see `&__` or `&-` in a `.vue` `<style lang="css">` block, it's Sass synta
 
 - `CLAUDE.md` → Styling Methodology section
 - `css-grid-max-width-gutters.md` — example of correct native nesting in a grid utility
+
+## State rules and specificity
+
+Nesting multiplies specificity: `.toggle-switch { .toggle-switch-wrapper { .toggle-switch-track
+{ .toggle-switch-thumb {} } } }` compiles to a four-class selector. A state rule written once at
+the root level, `.toggle-switch[data-checked] .toggle-switch-thumb`, has only three, so the base
+rule wins and the state never shows. Nest the state rule inside the element's own block instead:
+
+```css
+.toggle-switch-thumb {
+  translate: 0 0;
+
+  .toggle-switch[data-checked] & {
+    translate: 100% 0;
+  }
+}
+```
+
+`.toggle-switch[data-checked] &` adds the root's class and attribute on top of the full nested
+selector, so it always outranks the base rule.

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-triple-toggle-switch.code-snippets → srcdev-component-segmented-control.code-snippets}

@@ -1,18 +1,17 @@
 {
-  "SRCDEV TripleToggleSwitch": {
-    "description": "TripleToggleSwitch: three-option radio pill with a sliding marker",
+  "SRCDEV SegmentedControl": {
+    "description": "SegmentedControl: three-option radio pill with a sliding marker",
     "scope": "vue,html",
     "body": [
-      "<TripleToggleSwitch",
+      "<SegmentedControl",
       "  v-model=\"${1:selected}\"",
       "  v-model:field-data=\"${2:options}\"",
-      "  name=\"${3:triple-toggle}\"",
-      "  aria-label=\"${4:Choose an option}\"",
+      "  aria-label=\"${3:Choose an option}\"",
       "/>"
     ]
   },
-  "SRCDEV TripleToggleSwitch Options": {
-    "description": "IFormMultipleOptions data for TripleToggleSwitch (system/light/dark values get marker gradients)",
+  "SRCDEV SegmentedControl Options": {
+    "description": "IFormMultipleOptions data for SegmentedControl (system/light/dark values get marker gradients)",
     "scope": "typescript,vue",
     "body": [
       "const ${1:options} = ref<IFormMultipleOptions>({",

package/app/assets/styles/setup/03.theming/_theme-slots.css

@@ -13,6 +13,6 @@
   --theme-ring: var(--colour-theme-1);
   --theme-on-surface: var(--colour-theme-0);
   --theme-text: var(--colour-theme-9);
-  /* Light step: pairs with the dark --theme-surface-inverted (InputButton .secondary). */
+  /* Light step: pairs with the dark --theme-surface-inverted. */
   --theme-text-inverted: var(--colour-theme-0);
 }

package/app/assets/styles/setup/04.elements/forms/03.generic-input-geometry.css

@@ -20,6 +20,10 @@
   --form-element-outline-width-focus: 0.2rem;
   --form-element-outline-offset-focus: 0.2rem;
 
+  /* Resting shadow ring outside bordered controls. Its colour, --form-element-shadow-colour, is unset
+     so each control falls back to its own theme step 2 (red when invalid). */
+  --form-element-shadow-width: 0.2rem;
+
   /* Focus */
   --input-focus-ring-width: 0.2rem; /* 2px */
   --input-focus-ring-offset: 0.2rem;

package/app/components/01.atoms/alert-mask/AlertMask.vue

@@ -0,0 +1,194 @@
+<template>
+  <div class="alert-mask" :class="elementClasses">
+    <svg
+      class="alert-mask-decorator"
+      :style="{ '--_height': svgHeight + 'px' }"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      focusable="false"
+    >
+      <defs>
+        <mask :id="maskId" maskUnits="userSpaceOnUse">
+          <path :d="outerPath" fill="white" />
+          <path :d="innerPath" fill="black" />
+        </mask>
+      </defs>
+
+      <path
+        class="alert-mask-border"
+        :d="outerPath"
+        :style="cfg.borderColour ? { fill: cfg.borderColour } : undefined"
+        :mask="`url(#${maskId})`"
+      />
+      <path
+        class="alert-mask-background"
+        :d="innerPath"
+        :style="cfg.backgroundColour ? { fill: cfg.backgroundColour } : undefined"
+      />
+    </svg>
+
+    <div
+      class="alert-mask-content"
+      :style="{
+        '--_inset-left': cfg.borderLeft + 'px',
+        '--_inset-right': cfg.borderRight + 'px',
+        '--_inset-top': cfg.borderTop + 'px',
+        '--_inset-bottom': cfg.borderBottom + 'px',
+      }"
+    >
+      <div ref="alertContentRef" class="alert-mask-content-slot">
+        <slot name="default"></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { AlertMaskConfig } from "~/types/components";
+
+interface Props {
+  config?: AlertMaskConfig;
+  styleClassPassthrough?: string | string[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  config: () => ({}),
+  styleClassPassthrough: () => [],
+});
+
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+watch(
+  () => props.styleClassPassthrough,
+  () => {
+    resetElementClasses(props.styleClassPassthrough);
+  }
+);
+
+const maskId = `alert-mask-${useId()}`;
+const alertContentRef = useTemplateRef<HTMLElement | null>("alertContentRef");
+const contentWidth = ref(0);
+const contentHeight = ref(0);
+const measured = ref(false);
+let resizeObserver: ResizeObserver | null = null;
+
+const toSize = (value: number | undefined, fallback: number) =>
+  typeof value === "number" && Number.isFinite(value) ? Math.max(0, value) : fallback;
+
+const cfg = computed(() => ({
+  backgroundColour: props.config?.backgroundColour,
+  borderColour: props.config?.borderColour,
+  radiusLeft: toSize(props.config?.radiusLeft, 12),
+  radiusRight: toSize(props.config?.radiusRight, 12),
+  borderLeft: toSize(props.config?.borderLeft, 8),
+  borderTop: toSize(props.config?.borderTop, 8),
+  borderRight: toSize(props.config?.borderRight, 8),
+  borderBottom: toSize(props.config?.borderBottom, 8),
+}));
+
+const svgWidth = computed(() =>
+  measured.value ? contentWidth.value + cfg.value.borderLeft + cfg.value.borderRight : 0
+);
+const svgHeight = computed(() =>
+  measured.value ? contentHeight.value + cfg.value.borderTop + cfg.value.borderBottom : 0
+);
+
+const updateDimensions = () => {
+  const contentEl = alertContentRef.value;
+  if (!contentEl) return;
+  const rect = contentEl.getBoundingClientRect();
+  contentWidth.value = rect.width;
+  contentHeight.value = rect.height;
+  measured.value = true;
+};
+
+onMounted(() => {
+  nextTick(updateDimensions);
+  if (alertContentRef.value) {
+    resizeObserver = new ResizeObserver(updateDimensions);
+    resizeObserver.observe(alertContentRef.value);
+  }
+});
+
+onBeforeUnmount(() => {
+  resizeObserver?.disconnect();
+  resizeObserver = null;
+});
+
+const outerPath = computed(() => {
+  const width = svgWidth.value;
+  const height = svgHeight.value;
+  if (!width || !height) return "";
+
+  const rl = Math.min(cfg.value.radiusLeft, width / 2, height / 2);
+  const rr = Math.min(cfg.value.radiusRight, width / 2, height / 2);
+
+  return `
+    M ${rl} 0
+    L ${width - rr} 0
+    Q ${width} 0 ${width} ${rr}
+    L ${width} ${height - rr}
+    Q ${width} ${height} ${width - rr} ${height}
+    L ${rl} ${height}
+    Q 0 ${height} 0 ${height - rl}
+    L 0 ${rl}
+    Q 0 0 ${rl} 0 Z
+  `;
+});
+
+const innerPath = computed(() => {
+  const width = svgWidth.value;
+  const height = svgHeight.value;
+  const { borderLeft: bl, borderTop: bt, borderRight: br, borderBottom: bb } = cfg.value;
+  const innerWidth = width - bl - br;
+  const innerHeight = height - bt - bb;
+  if (!width || !height || innerWidth <= 0 || innerHeight <= 0) return "";
+
+  const rl = Math.min(cfg.value.radiusLeft, innerWidth / 2, innerHeight / 2);
+  const rr = Math.min(cfg.value.radiusRight, innerWidth / 2, innerHeight / 2);
+  const right = width - br;
+  const bottom = height - bb;
+
+  return `
+    M ${bl + rl} ${bt}
+    L ${right - rr} ${bt}
+    Q ${right} ${bt} ${right} ${bt + rr}
+    L ${right} ${bottom - rr}
+    Q ${right} ${bottom} ${right - rr} ${bottom}
+    L ${bl + rl} ${bottom}
+    Q ${bl} ${bottom} ${bl} ${bottom - rl}
+    L ${bl} ${bt + rl}
+    Q ${bl} ${bt} ${bl + rl} ${bt} Z
+  `;
+});
+</script>
+
+<style lang="css">
+@layer components {
+  .alert-mask {
+    display: grid;
+    grid-template-areas: "mask";
+    min-inline-size: 0;
+
+    .alert-mask-decorator {
+      grid-area: mask;
+      width: 100%;
+      height: var(--_height);
+
+      .alert-mask-border {
+        fill: var(--alert-mask-border-colour, var(--theme-accent));
+      }
+
+      .alert-mask-background {
+        fill: var(--alert-mask-background-colour, color-mix(in oklab, var(--theme-surface-subtle) 80%, transparent));
+      }
+    }
+
+    .alert-mask-content {
+      grid-area: mask;
+      min-inline-size: 0;
+      margin: var(--_inset-top) var(--_inset-right) var(--_inset-bottom) var(--_inset-left);
+    }
+  }
+}
+</style>