srcdev-nuxt-components 9.4.12 → 9.5.1

package/.vscode/srcdev-component-slider-gallery.code-snippets

@@ -6,6 +6,13 @@
       "<SliderGallery v-model:gallery-data=\"$1galleryData\" />"
     ]
   },
+  "SRCDEV SliderGallery No Scrim": {
+    "description": "SliderGallery without the gradient behind slide text",
+    "scope": "vue,html",
+    "body": [
+      "<SliderGallery v-model:gallery-data=\"$1galleryData\" :text-scrim=\"false\" />"
+    ]
+  },
   "SRCDEV SliderGallery Localised": {
     "description": "SliderGallery with localised loading/CTA/arrow copy",
     "scope": "vue,html",
@@ -16,6 +23,7 @@
       "  see-more-text=\"${3:SEE MORE}\"",
       "  prev-aria-label=\"${4:Previous image}\"",
       "  next-aria-label=\"${5:Next image}\"",
+      "  aria-label=\"${6:Image gallery}\"",
       "/>"
     ]
   },
@@ -31,6 +39,7 @@
       "    alt: \"$3\",",
       "    title: \"$4\",",
       "    textBrightness: \"${5:light}\",",
+      "    href: \"$6\",",
       "  },",
       "]);"
     ]

package/.vscode/srcdev-component-social-icons-list.code-snippets

@@ -0,0 +1,24 @@
+{
+  "SRCDEV SocialIconsList": {
+    "description": "SocialIconsList row of social profile links",
+    "scope": "vue,html",
+    "body": [
+      "<SocialIconsList",
+      "  :items=\"[",
+      "    { networkName: '${1:Instagram}', iconName: '${2:logos:instagram-icon}', baseHref: '${3:https://www.instagram.com/}', profileId: '$4' },",
+      "  ]\"",
+      "  label=\"${5:Social media profiles}\"",
+      "/>"
+    ]
+  },
+  "SRCDEV SocialIconsList CSS Override": {
+    "description": "CSS override scaffold for SocialIconsList tokens",
+    "scope": "css",
+    "body": [
+      ".$1my-page {",
+      "  --social-icons-list-icon-size: $2;",
+      "  --social-icons-list-gap: $3;",
+      "}"
+    ]
+  }
+}

package/.vscode/srcdev-component-stepper-list.code-snippets

@@ -0,0 +1,39 @@
+{
+  "SRCDEV StepperList": {
+    "description": "StepperList with auto-numbered indicators and indexed item-{n} slots",
+    "scope": "vue,html",
+    "body": [
+      "<StepperList tag=\"${1|ol,ul|}\" :item-count=\"${2:3}\" indicator-variant=\"${3|disc,square,circle|}\">",
+      "  <template #item-0>$4</template>",
+      "  <template #item-1>$5</template>",
+      "  <template #item-2>$6</template>",
+      "</StepperList>"
+    ]
+  },
+  "SRCDEV StepperList Looped": {
+    "description": "StepperList driven by an array, with a custom icon indicator per step",
+    "scope": "vue,html",
+    "body": [
+      "<StepperList tag=\"ol\" :item-count=\"$1steps.length\">",
+      "  <template v-for=\"($2step, $3i) in $1steps\" :key=\"`indicator-${$3i}`\" #[`indicator-${$3i}`]>",
+      "    <Icon :name=\"$2step.icon\" />",
+      "  </template>",
+      "  <template v-for=\"($2step, $3i) in $1steps\" :key=\"`item-${$3i}`\" #[`item-${$3i}`]>",
+      "    $4",
+      "  </template>",
+      "</StepperList>"
+    ]
+  },
+  "SRCDEV StepperList CSS Override": {
+    "description": "CSS override scaffold for StepperList tokens",
+    "scope": "css",
+    "body": [
+      ".$1my-page {",
+      "  --stepper-list-gap: $2;",
+      "  --stepper-list-connector-color: $3;",
+      "  --stepper-list-counter-disc-background: $4;",
+      "  --stepper-list-counter-disc-text: $5;",
+      "}"
+    ]
+  }
+}

package/.vscode/srcdev-component-text-block.code-snippets

@@ -0,0 +1,31 @@
+{
+  "SRCDEV TextBlock Basic": {
+    "description": "TextBlock: vertical-rhythm wrapper for a block of text (page lead, intro copy)",
+    "scope": "vue,html",
+    "body": [
+      "<TextBlock :style-class-passthrough=\"['${1:page-lead}']\">",
+      "  $2",
+      "</TextBlock>"
+    ]
+  },
+  "SRCDEV TextBlock Labelled Section": {
+    "description": "TextBlock rendered as a <section> labelled by its heading via the heading-id slot prop",
+    "scope": "vue,html",
+    "body": [
+      "<TextBlock tag=\"${1|section,article|}\" v-slot=\"{ headingId }\">",
+      "  <HeaderBlock :id=\"headingId\" :tag-level=\"${2:2}\" :class-level=\"${3:2}\">${4:Heading}</HeaderBlock>",
+      "  $5",
+      "</TextBlock>"
+    ]
+  },
+  "SRCDEV TextBlock CSS Tokens": {
+    "description": "CSS override scaffold for TextBlock padding tokens",
+    "scope": "css",
+    "body": [
+      ".${1:page-lead} {",
+      "  --text-block-padding-block-start: ${2:var(--fluid-space-48-96)};",
+      "  --text-block-padding-block-end: ${3:var(--fluid-space-48-96)};",
+      "}"
+    ]
+  }
+}

package/.vscode/srcdev-component-toggle-switch.code-snippets

@@ -20,7 +20,9 @@
       "  label=\"$3Field label\"",
       "  :error-message=\"$4errors.fieldName\"",
       "  :field-has-error=\"!!$4errors.fieldName\"",
-      "/>"
+      ">",
+      "  <template #descriptionText>$5Help text</template>",
+      "</ToggleSwitchWithLabel>"
     ]
   },
   "SRCDEV ToggleSwitchWithLabelInline": {

package/.vscode/srcdev-component-triple-toggle-switch.code-snippets

@@ -0,0 +1,30 @@
+{
+  "SRCDEV TripleToggleSwitch": {
+    "description": "TripleToggleSwitch: three-option radio pill with a sliding marker",
+    "scope": "vue,html",
+    "body": [
+      "<TripleToggleSwitch",
+      "  v-model=\"${1:selected}\"",
+      "  v-model:field-data=\"${2:options}\"",
+      "  name=\"${3:triple-toggle}\"",
+      "  aria-label=\"${4:Choose an option}\"",
+      "/>"
+    ]
+  },
+  "SRCDEV TripleToggleSwitch Options": {
+    "description": "IFormMultipleOptions data for TripleToggleSwitch (system/light/dark values get marker gradients)",
+    "scope": "typescript,vue",
+    "body": [
+      "const ${1:options} = ref<IFormMultipleOptions>({",
+      "  data: [",
+      "    { id: \"${2:system}\", name: \"${3:scheme}\", value: \"${2:system}\", label: \"${4:System}\", icon: \"${5:material-symbols:night-sight-auto-sharp}\" },",
+      "    { id: \"${6:light}\", name: \"${3:scheme}\", value: \"${6:light}\", label: \"${7:Light}\", icon: \"${8:radix-icons:sun}\" },",
+      "    { id: \"${9:dark}\", name: \"${3:scheme}\", value: \"${9:dark}\", label: \"${10:Dark}\", icon: \"${11:radix-icons:moon}\" },",
+      "  ],",
+      "  total: 3,",
+      "  skip: 0,",
+      "  limit: 3,",
+      "});"
+    ]
+  }
+}

package/README.md

@@ -143,8 +143,8 @@ re-evaluates locally so each themed element gets its own full palette without af
 | red    | 30  | Error / `data-theme="error"`                      |
 | green  | 157 | Success / `data-theme="success"`                  |
 | amber  | 75  | Available for consumer use                        |
-| orange | 60  | Available for consumer use                        |
-| sunset | 50  | Warning / `data-theme="warning"` (with hue drift) |
+| orange | 55  | Warning / `data-theme="warning"`                  |
+| sunset | 50  | Available for consumer use (with hue drift)       |
 | slate  | 260 | Near-neutral grey                                 |
 
 ### Consumer app: generating a custom palette

package/app/app.config.ts

@@ -5,6 +5,7 @@ import type {
   DisplayToastPosition,
   DisplayToastAlignment,
 } from "./types/components";
+import type { InputLabelIndicator } from "./types/forms/types.forms";
 
 export default defineAppConfig({
   srcdev: {
@@ -22,6 +23,7 @@ export default defineAppConfig({
       dismissible: false,
       useAutoFocus: false,
       masked: false,
+      closeLabel: "Close this prompt",
     },
     displayToast: {
       appearance: {
@@ -45,6 +47,14 @@ export default defineAppConfig({
       allowContentScroll: false,
       theme: undefined as SemanticTheme | undefined,
       closeIcon: "bitcoin-icons:cross-filled",
+      closeLabel: "Close",
+    },
+    inputLabel: {
+      indicator: "none" as InputLabelIndicator,
+      requiredText: "*",
+      optionalText: "(optional)",
+      requiredIcon: undefined as string | undefined,
+      optionalIcon: undefined as string | undefined,
     },
     cookieConsentBanner: {
       theme: "info" as SemanticTheme,

package/app/assets/styles/setup/02.colours/_orange.css

@@ -1,14 +1,14 @@
 /* GENERATED — edit ramps.config.mjs, not this file */
 :where(html) {
-  --orange-00: oklch(98% 0.0067 60);
-  --orange-01: oklch(94% 0.027 60);
-  --orange-02: oklch(88% 0.048 60);
-  --orange-03: oklch(80% 0.075 60);
-  --orange-04: oklch(72% 0.102 60);
-  --orange-05: oklch(64% 0.129 60);
-  --orange-06: oklch(56% 0.15 60);
-  --orange-07: oklch(48% 0.1425 60);
-  --orange-08: oklch(40% 0.129 60);
-  --orange-09: oklch(32% 0.1155 60);
-  --orange-10: oklch(25% 0.096 60);
+  --orange-00: oklch(98% 0.0086 55);
+  --orange-01: oklch(94% 0.0342 55);
+  --orange-02: oklch(88% 0.0608 55);
+  --orange-03: oklch(80% 0.095 55);
+  --orange-04: oklch(72% 0.1292 55);
+  --orange-05: oklch(64% 0.1634 55);
+  --orange-06: oklch(56% 0.19 55);
+  --orange-07: oklch(48% 0.1805 55);
+  --orange-08: oklch(40% 0.1634 55);
+  --orange-09: oklch(32% 0.1463 55);
+  --orange-10: oklch(25% 0.1216 55);
 }

package/app/assets/styles/setup/02.colours/_theme-params.css

@@ -8,8 +8,8 @@
   --palette-green-chroma: 0.19;
   --palette-amber-hue: 75;
   --palette-amber-chroma: 0.19;
-  --palette-orange-hue: 60;
-  --palette-orange-chroma: 0.15;
+  --palette-orange-hue: 55;
+  --palette-orange-chroma: 0.19;
   --palette-sunset-hue: 50;
   --palette-sunset-chroma: 0.22;
   --palette-sunset-drift: -25;

package/app/assets/styles/setup/03.theming/_default.css

@@ -11,17 +11,6 @@
   --colour-text-accent: light-dark(var(--blue-09), var(--blue-05));
   --colour-text-eyebrow: light-dark(var(--blue-09), var(--blue-05));
 
-  /* ===========================================
-     GLASS PANEL VARIABLES
-     =========================================== */
-  --glass-panel-bg: light-dark(rgba(255, 255, 255, 0.55), rgba(12, 12, 20, 0.45));
-  --glass-panel-border-color: light-dark(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.07));
-  /* Multi-shadow: opacity driven by light-dark() sub-vars */
-  --_gp-shadow-a: light-dark(0.08, 0.5);
-  --_gp-shadow-b: light-dark(0.04, 0.3);
-  --glass-panel-shadow: 0 8px 32px rgba(0, 0, 0, var(--_gp-shadow-a)), 0 2px 8px rgba(0, 0, 0, var(--_gp-shadow-b));
-  --glass-panel-highlight: light-dark(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.04));
-
   /* ===========================================
      HERO / EYEBROW TEXT VARIABLES
      =========================================== */
@@ -41,17 +30,7 @@
   --stepper-list-counter-square-text: light-dark(var(--blue-09), var(--blue-02));
   --stepper-list-counter-square-border: light-dark(var(--blue-09), var(--blue-02));
   --stepper-list-connector-color: light-dark(var(--blue-01), var(--blue-02));
-  --stepper-list-icon: light-dark(var(--blue-09), var(--blue-02));
-
-  /* ===========================================
-     COLOUR FINDER VARIABLES
-     =========================================== */
-  --colour-finder-primary-colour: var(--blue-03);
-  --colour-finder-border-colour: light-dark(var(--blue-02), var(--blue-03));
-  --colour-finder-checked-surface-colour: light-dark(var(--green-03), var(--green-10));
-  --colour-finder-checked-stroke-colour: light-dark(var(--green-09), var(--green-03));
-  --colour-finder-conflict-surface-colour: light-dark(var(--sunset-03), var(--sunset-09));
-  --colour-finder-conflict-stroke-colour: light-dark(var(--sunset-09), var(--sunset-03));
+  --stepper-list-icon-color: light-dark(var(--blue-09), var(--blue-02));
 
   /* ===========================================
      TREATMENT CONSULTANT VARIABLES

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

@@ -13,7 +13,7 @@
   --theme-on-surface: var(--colour-theme-0);
   --theme-text: light-dark(var(--colour-theme-9), var(--colour-theme-2));
   /* Light-mode branch was --colour-theme-9 — identical to --theme-surface-inverted's own
-     light-mode branch (line 6), its only pairing (InputButtonCore's .secondary, background +
+     light-mode branch (line 6), its only pairing (InputButton's .secondary, background +
      color), so secondary-button text was invisible (dark-on-dark) in light mode. Should be a
      light step to contrast against that dark inverted surface, matching how --theme-on-surface
      (line 13) contrasts against --theme-surface the same way in both modes. */

package/app/assets/styles/setup/03.theming/_warning.css

@@ -1,13 +1,11 @@
-/* Warning theme uses the full sunset ramp with hue drift.
-   Steps 00–05 sit in amber/orange territory; steps 06–10 shift toward red-orange.
-   --theme-surface overrides to step 5 (mid-light) so warning CTAs read as
-   warm/alert rather than the dark-filled default. */
+/* Warning theme uses the orange ramp.
+   --theme-surface overrides to step 6 in both modes: the lightest orange step where the
+   near-white --theme-on-surface text still meets AA (4.65:1). Step 5 read as more vivid but
+   only reached 3.3:1. Hover goes one step darker so contrast only increases. */
 :where([data-theme="warning"]) {
-  --theme-hue: var(--palette-sunset-hue);
-  --theme-chroma: var(--palette-sunset-chroma);
-  --theme-hue-drift: var(--palette-sunset-drift);
+  --theme-hue: var(--palette-orange-hue);
+  --theme-chroma: var(--palette-orange-chroma);
 
-  /* Lighter surface than the default step-9 — keeps warning buttons warm, not heavy */
-  --theme-surface:       light-dark(var(--colour-theme-5), var(--colour-theme-4));
-  --theme-surface-hover: light-dark(var(--colour-theme-7), var(--colour-theme-5));
+  --theme-surface: var(--colour-theme-6);
+  --theme-surface-hover: var(--colour-theme-7);
 }

package/app/assets/styles/setup/04.elements/forms/02.typography.css

@@ -1,12 +1,6 @@
 :where(html) {
-  /* Label */
-  --field-label-font-size: var(--step-5); /* 14px */
-  --field-label-font-weight: 500;
-  --field-label-line-height: 1.3;
-
   /* Input text */
   --input-font-size: 1.6rem; /* 16px */
-  --input-line-height: 1.4;
   --theme-input-placeholder-font-size: 1.4rem;
 
   /* Button text */
@@ -14,12 +8,4 @@
   --button-line-height: 1.4;
   --button-font-weight: 600;
   --button-text-transform: none;
-
-  /* Description */
-  --field-description-font-size: 1.3rem;
-  --field-description-line-height: 1.4;
-
-  /* Error */
-  --field-error-font-size: 1.3rem;
-  --field-error-font-weight: 500;
 }

package/app/assets/styles/setup/04.elements/forms/06.button-geometry.css

@@ -14,7 +14,7 @@
   --button-icon-gap: 1.8rem;
 
   /* Sized so the button's TOTAL rendered height matches --input-min-height, not its content
-     box alone — .input-button-core keeps box-sizing: content-box (changing that risks shifting
+     box alone — .input-button keeps box-sizing: content-box (changing that risks shifting
      icon-only's aspect-ratio: 1 sizing), so its own padding-block and border have to be
      subtracted back out here, unlike --input-min-height itself which happens to need no such
      adjustment (InputTextCore has zero padding-block and no full border in its resting state).

package/app/assets/styles/setup/index.css

@@ -1,4 +1,4 @@
-@layer reset, colours, theming, form-tokens, typography, a11y, components, utilities, consumer;
+@layer reset, colours, theming, form-tokens, typography, a11y, icons, components, utilities, consumer;
 
 @import "./01.config/index.css" layer(reset);
 @import "./02.colours/index.css" layer(colours);

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

@@ -1,15 +1,26 @@
 <template>
   <div class="alert-mask-core" :class="[elementClasses]">
-    <svg class="alert-mask-decorator" :style="{ '--_height': svgHeight + 'px' }" xmlns="http://www.w3.org/2000/svg">
+    <svg
+      class="alert-mask-decorator"
+      :style="{ '--_height': svgHeight + 'px' }"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      focusable="false"
+    >
       <defs>
-        <mask id="borderMask" maskUnits="userSpaceOnUse">
+        <mask :id="maskId" maskUnits="userSpaceOnUse">
           <path :d="outerPath" fill="white" />
           <path :d="innerPath" fill="black" />
         </mask>
       </defs>
 
-      <path :d="outerPath" :fill="cfg.borderColour" mask="url(#borderMask)" vector-effect="non-scaling-stroke" />
-      <path :d="innerPath" :fill="cfg.backgroundColour" />
+      <path
+        :d="outerPath"
+        :style="{ fill: cfg.borderColour }"
+        :mask="`url(#${maskId})`"
+        vector-effect="non-scaling-stroke"
+      />
+      <path :d="innerPath" :style="{ fill: cfg.backgroundColour }" />
     </svg>
 
     <div
@@ -43,9 +54,11 @@ const props = withDefaults(defineProps<Props>(), {
 
 const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 
+const maskId = `alert-mask-${useId()}`;
 const alertContentRef = useTemplateRef<HTMLElement | null>("alertContentRef");
 const svgWidth = ref(0);
 const svgHeight = ref(0);
+let resizeObserver: ResizeObserver | null = null;
 
 // Update dimensions based on content
 onMounted(() => {
@@ -67,11 +80,16 @@ onMounted(() => {
   // Observe content changes
   const contentEl = alertContentRef.value;
   if (contentEl) {
-    const resizeObserver = new ResizeObserver(updateDimensions);
+    resizeObserver = new ResizeObserver(updateDimensions);
     resizeObserver.observe(contentEl);
   }
 });
 
+onBeforeUnmount(() => {
+  resizeObserver?.disconnect();
+  resizeObserver = null;
+});
+
 const cfg = computed(() => ({
   backgroundColour: props.config?.backgroundColour ?? "rgba(0,0,0,0.25)",
   borderColour: props.config?.borderColour ?? "var(--orange-08)",

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

@@ -25,10 +25,33 @@ prop (`AlertMaskConfig`):
 </AlertMaskCore>
 ```
 
+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).
+
 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`.
 
+---
+
+## Internal (non-overridable) custom properties
+
+`--_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.
+
+---
+
+## 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`.
+
+---
+
 ## Class passthrough
 
 Use `styleClassPassthrough` to add classes to the root `.alert-mask-core` element for layout
@@ -39,8 +62,3 @@ governed by `config`.
 <AlertMaskCore style-class-passthrough="my-alert-mask">...</AlertMaskCore>
 ```
 
-## Internal (non-overridable) custom properties
-
-`--_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.

package/app/components/01.atoms/alert-mask/stories/AlertMaskCore.stories.ts

@@ -28,51 +28,77 @@ const meta: Meta<typeof AlertMaskCore> = {
 export default meta;
 type Story = StoryObj<typeof AlertMaskCore>;
 
-export const Default: Story = {
+// The mask is a translucent fill plus a cut-out border, so it needs something busy behind it to read at all.
+const backdrop =
+  "background: url('/images/banners/video/lake-banner.jpg') center / cover; padding: 4rem 2.4rem; border-radius: 1.2rem; max-width: 60rem;";
+const gradientBackdrop =
+  "background: repeating-linear-gradient(45deg, oklch(100% 0 0 / 0.18) 0 1.2rem, transparent 1.2rem 2.4rem), linear-gradient(120deg, oklch(70% 0.2 30), oklch(65% 0.2 200) 60%, oklch(55% 0.22 300)); padding: 4rem 2.4rem; border-radius: 1.2rem; max-width: 60rem;";
+
+export const CustomConfig: Story = {
   args: {
-    config: {},
+    config: {
+      backgroundColour: "rgba(0, 0, 0, 0.3)",
+      borderColour: "var(--theme-accent)",
+      radiusLeft: 8,
+      radiusRight: 4,
+      borderLeft: 6,
+      borderTop: 1,
+      borderRight: 1,
+      borderBottom: 1,
+    },
   },
   render: (args) => ({
     components: { AlertMaskCore },
     setup() {
-      return { args };
+      return { args, backdrop };
     },
     template: `
-      <AlertMaskCore v-bind="args">
-        <p style="margin: 0; padding: 1.6rem; color: white;">Default alert mask content</p>
-      </AlertMaskCore>
+      <div data-theme="info" :style="backdrop">
+        <AlertMaskCore v-bind="args">
+          <p style="margin: 0; padding: 1.6rem; color: white;">Custom accent-bar config, matching AlertMaskedContent's default shape</p>
+        </AlertMaskCore>
+      </div>
     `,
   }),
+  parameters: {
+    docs: {
+      description: {
+        story: "The accent-bar shape used by AlertMaskedContent: thick left radius/border, thin elsewhere.",
+      },
+    },
+  },
 };
 
-export const CustomConfig: Story = {
+export const OverGradient: Story = {
   args: {
     config: {
       backgroundColour: "rgba(0, 0, 0, 0.3)",
-      borderColour: "var(--theme-accent)",
-      radiusLeft: 8,
-      radiusRight: 4,
-      borderLeft: 6,
-      borderTop: 1,
-      borderRight: 1,
-      borderBottom: 1,
+      borderColour: "white",
+      radiusLeft: 16,
+      radiusRight: 16,
+      borderLeft: 4,
+      borderTop: 4,
+      borderRight: 4,
+      borderBottom: 4,
     },
   },
   render: (args) => ({
     components: { AlertMaskCore },
     setup() {
-      return { args };
+      return { args, gradientBackdrop };
     },
     template: `
-      <AlertMaskCore v-bind="args">
-        <p style="margin: 0; padding: 1.6rem; color: white;">Custom accent-bar config, matching AlertMaskedContent's default shape</p>
-      </AlertMaskCore>
+      <div :style="gradientBackdrop">
+        <AlertMaskCore v-bind="args">
+          <p style="margin: 0; padding: 1.6rem; color: white;">Even border all round: the stripes show through the fill and stop at the border's inner edge.</p>
+        </AlertMaskCore>
+      </div>
     `,
   }),
   parameters: {
     docs: {
       description: {
-        story: "The accent-bar shape used by AlertMaskedContent: thick left radius/border, thin elsewhere.",
+        story: "A striped gradient behind an even 4px white border, so the translucent fill and the border's cut-out are both visible.",
       },
     },
   },

package/app/components/01.atoms/alert-mask/tests/AlertMaskCore.spec.ts

@@ -171,13 +171,47 @@ describe("AlertMaskCore", () => {
 
     // Check for defs and mask
     expect(wrapper.find("defs").exists()).toBe(true);
-    expect(wrapper.find("mask#borderMask").exists()).toBe(true);
+    const mask = wrapper.find("mask");
+    expect(mask.exists()).toBe(true);
+    expect(wrapper.find("path[mask]").attributes("mask")).toBe(`url(#${mask.attributes("id")})`);
 
     // Check for paths
     const paths = wrapper.findAll("path");
     expect(paths.length).toBe(4); // 2 in mask, 2 visible paths
   });
 
+  it("gives each instance its own mask id so multiple masks on a page don't share one shape", async () => {
+    const wrapper = await mountSuspended({
+      components: { AlertMaskCore },
+      template: "<div><AlertMaskCore></AlertMaskCore><AlertMaskCore></AlertMaskCore></div>",
+    });
+    const ids = wrapper.findAll("mask").map((mask) => mask.attributes("id"));
+    expect(ids).toHaveLength(2);
+    expect(ids[0]).toBeTruthy();
+    expect(ids[0]).not.toBe(ids[1]);
+  });
+
+  it("hides the decorative SVG from assistive technology", async () => {
+    const wrapper = await mountSuspended(AlertMaskCore);
+    expect(wrapper.find(".alert-mask-decorator").attributes("aria-hidden")).toBe("true");
+  });
+
+  it("applies config colours as fill styles so CSS var() values resolve", async () => {
+    const wrapper = await mountSuspended(AlertMaskCore, {
+      props: { config: { borderColour: "var(--my-border)", backgroundColour: "var(--my-bg)" } },
+    });
+    const paths = wrapper.findAll(".alert-mask-decorator > path");
+    expect((paths[0]!.element as unknown as SVGElement).style.fill).toBe("var(--my-border)");
+    expect((paths[1]!.element as unknown as SVGElement).style.fill).toBe("var(--my-bg)");
+  });
+
+  it("disconnects its ResizeObserver on unmount", async () => {
+    const wrapper = await mountSuspended(AlertMaskCore);
+    const observer = mockResizeObserver.mock.results.at(-1)?.value as { disconnect: ReturnType<typeof vi.fn> };
+    wrapper.unmount();
+    expect(observer.disconnect).toHaveBeenCalled();
+  });
+
   it("applies CSS custom properties for content positioning", async () => {
     const config: AlertMaskConfig = {
       borderLeft: 15,

package/app/components/01.atoms/animations/animated-svg-text/CONSUMER-STYLING.md

@@ -23,6 +23,18 @@ through public CSS custom properties, consumed directly on `.animated-svg-text s
 </AnimatedSvgText>
 ```
 
+---
+
+## Local overrides
+
+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`.
+
+---
+
 ## Notes
 
 - The animation runs once on mount (`forwards`, `1` iteration) — it does not loop or replay on re-entry.
@@ -32,3 +44,4 @@ through public CSS custom properties, consumed directly on `.animated-svg-text s
   traced at a small/normalised coordinate scale — a larger `viewBox` (e.g. plain SVG `<text>` at a
   large `font-size`) needs a proportionally larger `--animated-svg-text-stroke-width` and
   `--animated-svg-text-stroke-dasharray`, or the stroke renders too thin/short to see.
+