srcdev-nuxt-components 9.6.10 → 9.6.11

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

package/app/components/01.atoms/alert-mask/CONSUMER-STYLING.md

@@ -1,64 +1,79 @@
-# AlertMaskCore — Consumer Styling Guide
+# AlertMask — Consumer Styling Guide
 
-## No public CSS token API
+> **Renamed 2026-10-17**: `AlertMaskCore` → `AlertMask`, root class `.alert-mask-core` →
+> `.alert-mask`. The colours also became CSS tokens (below); `config` colours still override them.
 
-`AlertMaskCore` draws its border/background via an SVG `<mask>` whose path geometry is computed
-from measured content dimensions, so it can't expose colour/radius/thickness as CSS custom
-properties the way most components do — a `var()` can't be interpolated into an SVG path or
-resized reactively the way a `fill` attribute can. Instead, the override surface is the `config`
-prop (`AlertMaskConfig`):
+`AlertMask` draws a border and a translucent fill around its slot as an SVG path, sized to the
+measured content. Geometry (radii, per-side border widths) can't be a CSS token, because the path
+is computed in script, so it comes from the `config` prop. Colours are plain CSS `fill` values, so
+they're tokens.
 
-```vue
-<AlertMaskCore
-  :config="{
-    backgroundColour: '#1a1a1a',
-    borderColour: 'var(--theme-accent)',
-    radiusLeft: 8,
-    radiusRight: 4,
-    borderLeft: 6,
-    borderTop: 1,
-    borderRight: 1,
-    borderBottom: 1,
-  }"
->
-  <p>Alert content</p>
-</AlertMaskCore>
-```
+## Public token API
+
+| Token | Default | Controls |
+|---|---|---|
+| `--alert-mask-border-colour` | `var(--theme-accent)` | Border fill |
+| `--alert-mask-background-colour` | `color-mix(in oklab, var(--theme-surface-subtle) 80%, transparent)` | Inner fill |
+
+A `config.borderColour` or `config.backgroundColour` is applied as an inline `fill` style on its
+path and beats the token. Both read the theme of the nearest `data-theme` ancestor.
+
+> **Changed 2026-10-17**: the colours were `config`-only, with hardcoded defaults
+> (`var(--orange-08)` border, `rgba(0,0,0,0.25)` fill). They now default from the tokens above.
+
+### Geometry (`config`, `AlertMaskConfig`)
+
+| Field | Default | Controls |
+|---|---|---|
+| `radiusLeft` / `radiusRight` | `12` | Corner radius (px) of the left and right corners |
+| `borderLeft` / `borderTop` / `borderRight` / `borderBottom` | `8` | Border width (px) per side; the content is inset by the same amounts |
 
-Colours are applied as `fill` styles, so `borderColour`/`backgroundColour` can be `var()`
-references to your own tokens (a `var(--theme-*)` value needs a `data-theme` ancestor to resolve).
+Sides are physical (left stays left in a right-to-left layout), matching the drawn path. Negative
+or non-finite values fall back to `0` and the default respectively, and a radius larger than the
+box is clamped to half its smaller side.
 
-All fields are optional and fall back to `backgroundColour: "rgba(0,0,0,0.25)"`,
-`borderColour: "var(--orange-08)"`, `radiusLeft`/`radiusRight: 12`, `borderLeft`/`borderTop`/
-`borderRight`/`borderBottom: 8`.
+Private tokens (not public API): `--_height` (the measured SVG height) and `--_inset-left`,
+`--_inset-right`, `--_inset-top`, `--_inset-bottom` (content margins from the border widths), all set
+inline from script.
 
 ---
 
-## Internal (non-overridable) custom properties
+## State hooks
 
-`--_height`, `--_inset-inline-start`, `--_inset-inline-end`, `--_inset-block-start`, and
-`--_inset-block-end` are set inline from measured content size and `config` border widths. They're
-private implementation plumbing, not a consumer override surface — use `config` instead.
+None. Inner elements: `.alert-mask` > `.alert-mask-decorator` (the SVG, with `.alert-mask-border`
+and `.alert-mask-background` paths) + `.alert-mask-content` > `.alert-mask-content-slot`.
+
+---
+
+## Global theming
+
+```css
+:where(html) {
+  --alert-mask-border-colour: var(--theme-border);
+}
+```
 
 ---
 
 ## Local overrides
 
-There are no public tokens, so override the classes above with direct properties, scoped to an
-element you own (a page or section class, or a class added with `:style-class-passthrough`). Keep
-the block **unlayered** (no `@layer` wrapper) so it beats the library's `@layer components`. If your
-own file uses `<style scoped>`, selectors that reach inside the component need `:deep()`. Patterns
-and examples: `.claude/skills/component-local-style-override.md`.
+Set the tokens above on an element you own (a page or section class, or a class added with
+`:style-class-passthrough`): they inherit down into the component. Keep the block **unlayered** (no
+`@layer` wrapper) so it beats the library's `@layer components`. If your own file uses
+`<style scoped>`, tokens set on your element still work, but selectors that reach inside the
+component need `:deep()`. Patterns and examples: `.claude/skills/component-local-style-override.md`.
+
+**Caveat:** a colour passed in `config` is an inline style on the path, so it wins over the token
+wherever the token is set. `AlertMaskedContent` passes both colours this way (through its own
+`--alert-masked-content-*` tokens), so inside it set those instead.
 
 ---
 
 ## Class passthrough
 
-Use `styleClassPassthrough` to add classes to the root `.alert-mask-core` element for layout
-purposes (positioning, sizing) — it doesn't affect the mask's own colours or geometry, which stay
-governed by `config`.
+`style-class-passthrough` adds classes to the root `.alert-mask` element and updates after mount.
+Use it for layout (sizing, positioning) or to scope the colour tokens.
 
 ```vue
-<AlertMaskCore style-class-passthrough="my-alert-mask">...</AlertMaskCore>
+<AlertMask style-class-passthrough="my-alert-mask">...</AlertMask>
 ```
-