srcdev-nuxt-components 9.6.9 → 9.6.11

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

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

@@ -0,0 +1,198 @@
+import { ref } from "vue";
+import AlertMask from "../AlertMask.vue";
+import CanvasSwitcher from "../../canvas-switcher/CanvasSwitcher.vue";
+import type { Meta, StoryObj } from "@nuxtjs/storybook";
+import type { MediaCanvas } from "~/types/components";
+
+const meta: Meta<typeof AlertMask> = {
+  title: "Atoms/AlertMask",
+  component: AlertMask,
+  argTypes: {
+    config: {
+      control: "object",
+      description:
+        "Border/background colour and geometry: backgroundColour, borderColour, radiusLeft, radiusRight, borderLeft, borderTop, borderRight, borderBottom",
+      table: { category: "Basic" },
+    },
+    styleClassPassthrough: {
+      table: { disable: true },
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Draws a border and translucent fill around slotted content as an SVG path, sized to the measured content. Geometry (radii and per-side border widths) comes from the `config` prop; colours default from `--alert-mask-border-colour` and `--alert-mask-background-colour`, and `config` colours override them. [AlertMaskedContent](?path=/story/molecules-alertmaskedcontent--default) is the alert built on it.",
+      },
+    },
+  },
+  decorators: [
+    (story, context) => ({
+      components: { story, CanvasSwitcher },
+      setup() {
+        const canvasName = ref<MediaCanvas>(context.parameters.initialCanvas ?? "fullWidthCanvas");
+        return { canvasName };
+      },
+      template: `
+        <div style="padding: 1.2rem 1.6rem; border-block-end: 1px solid currentColor;">
+          <CanvasSwitcher v-model:canvas-name="canvasName" />
+        </div>
+        <div :class="canvasName" style="margin-inline: auto; padding: 2rem; outline: 1px dashed currentColor;">
+          <p style="margin: 0 0 1.6rem; font-size: 1.4rem;">
+            The alert built on this mask is
+            <a href="/?path=/story/molecules-alertmaskedcontent--default" target="_top">AlertMaskedContent</a>.
+          </p>
+          <story />
+        </div>
+      `,
+    }),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof AlertMask>;
+
+// 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 Default: Story = {
+  args: { config: {} },
+  render: (args) => ({
+    components: { AlertMask },
+    setup() {
+      return { args, gradientBackdrop };
+    },
+    template: `
+      <div data-theme="info" :style="gradientBackdrop">
+        <AlertMask v-bind="args">
+          <p style="margin: 0; padding: 1.6rem;">Default geometry and token colours: an 8px theme-accent border and a translucent subtle-surface fill.</p>
+        </AlertMask>
+      </div>
+    `,
+  }),
+  parameters: {
+    docs: { description: { story: "No config: default radii and borders, colours from the CSS tokens and the surrounding `data-theme`." } },
+  },
+};
+
+export const CustomConfig: 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,
+    },
+  },
+  render: (args) => ({
+    components: { AlertMask },
+    setup() {
+      return { args, backdrop };
+    },
+    template: `
+      <div data-theme="info" :style="backdrop">
+        <AlertMask v-bind="args">
+          <p style="margin: 0; padding: 1.6rem; color: white;">Custom accent-bar config, matching AlertMaskedContent's default shape</p>
+        </AlertMask>
+      </div>
+    `,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: "The accent-bar shape used by AlertMaskedContent: thick left radius/border, thin elsewhere.",
+      },
+    },
+  },
+};
+
+export const OverGradient: Story = {
+  args: {
+    config: {
+      backgroundColour: "rgba(0, 0, 0, 0.3)",
+      borderColour: "white",
+      radiusLeft: 16,
+      radiusRight: 16,
+      borderLeft: 4,
+      borderTop: 4,
+      borderRight: 4,
+      borderBottom: 4,
+    },
+  },
+  render: (args) => ({
+    components: { AlertMask },
+    setup() {
+      return { args, gradientBackdrop };
+    },
+    template: `
+      <div :style="gradientBackdrop">
+        <AlertMask 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>
+        </AlertMask>
+      </div>
+    `,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: "A striped gradient behind an even 4px white border, so the translucent fill and the border's cut-out are both visible.",
+      },
+    },
+  },
+};
+
+const stressConfigs = [
+  { caption: "Radii far larger than the box (500)", config: { radiusLeft: 500, radiusRight: 500 } },
+  { caption: "Negative borders and radius (clamped to 0)", config: { borderLeft: -10, borderTop: -4, radiusLeft: -8 } },
+  { caption: "Huge borders (40px) round a single word", config: { borderLeft: 40, borderTop: 40, borderRight: 40, borderBottom: 40 } },
+  { caption: "Fractional values", config: { borderLeft: 2.5, borderTop: 0.5, borderRight: 0.5, borderBottom: 0.5, radiusLeft: 6.25, radiusRight: 3.75 } },
+  { caption: "Zero borders", config: { borderLeft: 0, borderTop: 0, borderRight: 0, borderBottom: 0 } },
+];
+
+export const StressTest: Story = {
+  name: "Stress Test (Worst-Case Data)",
+  render: () => ({
+    components: { AlertMask },
+    setup() {
+      return { stressConfigs, gradientBackdrop };
+    },
+    template: `
+      <div data-theme="info" :style="gradientBackdrop" style="display: grid; gap: 2.4rem;">
+        <AlertMask :config="{ borderLeft: 6, borderTop: 1, borderRight: 1, borderBottom: 1, radiusLeft: 8, radiusRight: 4 }">
+          <p style="margin: 0; padding: 1.6rem; overflow-wrap: anywhere;">
+            📧 Datenschutzgrundverordnungskonformitätsbestätigung https://example.com/a/very/long/unbroken/url/that/should/wrap <b>not bold</b> &lt;b&gt;escaped&lt;/b&gt; يرجى إدخال بريدك الإلكتروني. Wir verwenden Ihre Adresse ausschließlich für Rückfragen zu Ihrer Bestellung bei Alex Morgan in Northtown.
+          </p>
+        </AlertMask>
+        <div dir="rtl">
+          <AlertMask :config="{ borderLeft: 6, borderTop: 1, borderRight: 1, borderBottom: 1, radiusLeft: 8, radiusRight: 4 }">
+            <p style="margin: 0; padding: 1.6rem;">نص من اليمين إلى اليسار داخل القناع، مع شريط التمييز على اليسار</p>
+          </AlertMask>
+        </div>
+        <AlertMask></AlertMask>
+        <div v-for="item in stressConfigs" :key="item.caption">
+          <p style="margin: 0 0 0.8rem; font-size: 1.4rem;">{{ item.caption }}</p>
+          <AlertMask :config="item.config">
+            <p style="margin: 0; padding: 0.8rem;">x</p>
+          </AlertMask>
+        </div>
+      </div>
+    `,
+  }),
+  parameters: {
+    initialCanvas: "mobileCanvas",
+    docs: {
+      story: { inline: false, height: "1100px" },
+      description: {
+        story:
+          "Long German copy with an unbroken compound word and URL, HTML-like and right-to-left text, an empty mask, then hostile config: oversized radii, negative and fractional values, huge and zero borders. Check at every canvas width: the frame always hugs its content inside the dashed outline, no path draws outside the box or inverts, the thick bar stays on the left in the right-to-left mask with the text clear of it, and the empty mask collapses to a border-only frame.",
+      },
+    },
+  },
+};

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

@@ -0,0 +1,233 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import { defineComponent, nextTick } from "vue";
+import AlertMask from "../AlertMask.vue";
+import type { AlertMaskConfig } from "~/types/components";
+
+interface AlertMaskInstance {
+  cfg: {
+    backgroundColour: string | undefined;
+    borderColour: string | undefined;
+    radiusLeft: number;
+    radiusRight: number;
+    borderLeft: number;
+    borderTop: number;
+    borderRight: number;
+    borderBottom: number;
+  };
+  contentWidth: number;
+  contentHeight: number;
+  measured: boolean;
+  svgWidth: number;
+  svgHeight: number;
+  outerPath: string;
+  innerPath: string;
+}
+
+// Vitest 4: a mock's implementation must be a regular function (not an arrow function) to stay
+// constructible via `new`.
+const mockResizeObserver = vi.fn(function () {
+  return { observe: vi.fn(), unobserve: vi.fn(), disconnect: vi.fn() };
+});
+vi.stubGlobal("ResizeObserver", mockResizeObserver);
+
+const mounted: { unmount: () => void }[] = [];
+
+const mountMask = async (options: Parameters<typeof mountSuspended<typeof AlertMask>>[1] = {}) => {
+  const wrapper = await mountSuspended(AlertMask, options);
+  mounted.push(wrapper);
+  return wrapper;
+};
+
+const vmOf = (wrapper: Awaited<ReturnType<typeof mountMask>>) => wrapper.vm as unknown as AlertMaskInstance;
+
+const setContentSize = async (vm: AlertMaskInstance, width: number, height: number) => {
+  vm.contentWidth = width;
+  vm.contentHeight = height;
+  vm.measured = true;
+  await nextTick();
+};
+
+const numbersIn = (path: string) => (path.match(/-?\d+(\.\d+)?/g) ?? []).map(Number);
+
+describe("AlertMask", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    mounted.splice(0).forEach((wrapper) => wrapper.unmount());
+    vi.restoreAllMocks();
+  });
+
+  it("renders the root, decorator and content structure", async () => {
+    const wrapper = await mountMask();
+    expect(wrapper.find(".alert-mask").exists()).toBe(true);
+    expect(wrapper.find(".alert-mask-decorator").exists()).toBe(true);
+    expect(wrapper.find(".alert-mask-border").exists()).toBe(true);
+    expect(wrapper.find(".alert-mask-background").exists()).toBe(true);
+    expect(wrapper.find(".alert-mask-content-slot").exists()).toBe(true);
+  });
+
+  it("renders default slot content", async () => {
+    const wrapper = await mountMask({ slots: { default: "<p class='test-content'>Alert</p>" } });
+    expect(wrapper.find(".test-content").text()).toBe("Alert");
+  });
+
+  it("applies passthrough classes and reacts to changes", async () => {
+    const wrapper = await mountMask({ props: { styleClassPassthrough: ["one", "two"] } });
+    const root = () => wrapper.find(".alert-mask");
+    expect(root().classes()).toEqual(expect.arrayContaining(["one", "two"]));
+
+    await wrapper.setProps({ styleClassPassthrough: "three" });
+    expect(root().classes()).toContain("three");
+    expect(root().classes()).not.toContain("one");
+  });
+
+  it("uses default geometry and leaves colours to CSS tokens when no config is given", async () => {
+    const vm = vmOf(await mountMask());
+    expect(vm.cfg).toEqual({
+      backgroundColour: undefined,
+      borderColour: undefined,
+      radiusLeft: 12,
+      radiusRight: 12,
+      borderLeft: 8,
+      borderTop: 8,
+      borderRight: 8,
+      borderBottom: 8,
+    });
+  });
+
+  it("applies a full custom config", async () => {
+    const config: AlertMaskConfig = {
+      backgroundColour: "rgba(255,0,0,0.5)",
+      borderColour: "#ff0000",
+      radiusLeft: 20,
+      radiusRight: 15,
+      borderLeft: 12,
+      borderTop: 10,
+      borderRight: 8,
+      borderBottom: 6,
+    };
+    const vm = vmOf(await mountMask({ props: { config } }));
+    expect(vm.cfg).toEqual(config);
+  });
+
+  it("sanitises negative and non-finite sizes", async () => {
+    const vm = vmOf(
+      await mountMask({
+        props: { config: { borderLeft: -10, borderTop: Number.NaN, radiusLeft: -4, radiusRight: Infinity } },
+      })
+    );
+    expect(vm.cfg.borderLeft).toBe(0);
+    expect(vm.cfg.borderTop).toBe(8);
+    expect(vm.cfg.radiusLeft).toBe(0);
+    expect(vm.cfg.radiusRight).toBe(12);
+  });
+
+  it("only sets fill styles for colours given in config", async () => {
+    const plain = await mountMask();
+    expect(plain.find(".alert-mask-border").attributes("style")).toBeUndefined();
+    expect(plain.find(".alert-mask-background").attributes("style")).toBeUndefined();
+
+    const custom = await mountMask({
+      props: { config: { borderColour: "var(--my-border)", backgroundColour: "var(--my-bg)" } },
+    });
+    expect((custom.find(".alert-mask-border").element as unknown as SVGElement).style.fill).toBe("var(--my-border)");
+    expect((custom.find(".alert-mask-background").element as unknown as SVGElement).style.fill).toBe("var(--my-bg)");
+  });
+
+  it("gives each instance its own mask id", async () => {
+    const Host = defineComponent({
+      components: { AlertMask },
+      template: "<div><AlertMask>One</AlertMask><AlertMask>Two</AlertMask></div>",
+    });
+    const wrapper = await mountSuspended(Host);
+    mounted.push(wrapper);
+    const ids = wrapper.findAll("mask").map((mask) => mask.attributes("id"));
+    expect(new Set(ids).size).toBe(2);
+    expect(wrapper.findAll(".alert-mask-border")[0]!.attributes("mask")).toBe(`url(#${ids[0]})`);
+  });
+
+  it("hides the decorative SVG from assistive technology", async () => {
+    const wrapper = await mountMask();
+    expect(wrapper.find(".alert-mask-decorator").attributes("aria-hidden")).toBe("true");
+  });
+
+  it("insets the content by the configured borders", async () => {
+    const wrapper = await mountMask({
+      props: { config: { borderLeft: 15, borderTop: 20, borderRight: 25, borderBottom: 30 } },
+    });
+    const style = (wrapper.find(".alert-mask-content").element as HTMLElement).style;
+    expect(style.getPropertyValue("--_inset-left")).toBe("15px");
+    expect(style.getPropertyValue("--_inset-top")).toBe("20px");
+    expect(style.getPropertyValue("--_inset-right")).toBe("25px");
+    expect(style.getPropertyValue("--_inset-bottom")).toBe("30px");
+  });
+
+  it("insets the content by the default borders when config omits them", async () => {
+    const style = ((await mountMask()).find(".alert-mask-content").element as HTMLElement).style;
+    expect(style.getPropertyValue("--_inset-left")).toBe("8px");
+    expect(style.getPropertyValue("--_inset-bottom")).toBe("8px");
+  });
+
+  it("observes the content and disconnects on unmount", async () => {
+    const wrapper = await mountMask({ slots: { default: "<div>Content</div>" } });
+    expect(mockResizeObserver).toHaveBeenCalled();
+    const observer = mockResizeObserver.mock.results.at(-1)?.value as { disconnect: ReturnType<typeof vi.fn> };
+    wrapper.unmount();
+    mounted.splice(mounted.indexOf(wrapper), 1);
+    expect(observer.disconnect).toHaveBeenCalled();
+  });
+
+  it("draws nothing until the content is measured", async () => {
+    const vm = vmOf(await mountMask());
+    vm.measured = false;
+    await nextTick();
+    expect(vm.svgWidth).toBe(0);
+    expect(vm.outerPath).toBe("");
+    expect(vm.innerPath).toBe("");
+  });
+
+  it("sizes the SVG from the content plus the borders", async () => {
+    const wrapper = await mountMask();
+    const vm = vmOf(wrapper);
+    await setContentSize(vm, 200, 100);
+    expect(vm.svgWidth).toBe(216);
+    expect(vm.svgHeight).toBe(116);
+    expect((wrapper.find(".alert-mask-decorator").element as HTMLElement).style.getPropertyValue("--_height")).toBe(
+      "116px"
+    );
+    expect(vm.outerPath).not.toBe("");
+    expect(vm.innerPath).not.toBe("");
+  });
+
+  it("recomputes the size when the border config changes without a content resize", async () => {
+    const wrapper = await mountMask();
+    const vm = vmOf(wrapper);
+    await setContentSize(vm, 200, 100);
+
+    await wrapper.setProps({ config: { borderTop: 30, borderBottom: 30 } });
+    expect(vm.svgHeight).toBe(160);
+  });
+
+  it("clamps radii larger than the box so the path stays inside it", async () => {
+    const wrapper = await mountMask({ props: { config: { radiusLeft: 500, radiusRight: 500 } } });
+    const vm = vmOf(wrapper);
+    await setContentSize(vm, 200, 40);
+
+    const outer = numbersIn(vm.outerPath);
+    expect(Math.min(...outer)).toBeGreaterThanOrEqual(0);
+    expect(Math.max(...outer)).toBeLessThanOrEqual(216);
+    const inner = numbersIn(vm.innerPath);
+    expect(Math.min(...inner)).toBeGreaterThanOrEqual(0);
+  });
+
+  it("drops the inner cut-out when the borders fill the whole box", async () => {
+    const wrapper = await mountMask({ props: { config: { borderLeft: 100, borderRight: 100 } } });
+    const vm = vmOf(wrapper);
+    await setContentSize(vm, 0, 40);
+    expect(vm.outerPath).not.toBe("");
+    expect(vm.innerPath).toBe("");
+  });
+});

package/app/components/02.molecules/alert-masked-content/AlertMaskedContent.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="alert-masked-content" :data-theme="theme">
-    <AlertMaskCore :config="resolvedMaskConfig">
+    <AlertMask :config="resolvedMaskConfig">
       <AlertContentInner
         :theme="theme"
         :custom-icon="customIcon"
@@ -29,7 +29,7 @@
           <slot name="dismissLabel"></slot>
         </template>
       </AlertContentInner>
-    </AlertMaskCore>
+    </AlertMask>
   </div>
 </template>
 

package/app/components/02.molecules/alert-masked-content/CONSUMER-STYLING.md

@@ -1,7 +1,7 @@
 # AlertMaskedContent — Consumer Styling Guide
 
 `AlertMaskedContent` is `AlertContentInner` (icon, title, body, dismiss button) wrapped in
-`AlertMaskCore`'s SVG mask: an accent-coloured border drawn as a cut-out, and a translucent fill,
+`AlertMask`'s SVG mask: an accent-coloured border drawn as a cut-out, and a translucent fill,
 so whatever sits behind the alert stays visible. It's the variant `DisplayToast`
 (`appearance.masked`) and `DisplayPrompt` (`masked`) swap in.
 
@@ -20,7 +20,7 @@ for that instance.
 
 ### Mask geometry
 
-Radius and border thickness aren't tokens: `AlertMaskCore` computes the SVG path from them in JS.
+Radius and border thickness aren't tokens: `AlertMask` computes the SVG path from them in JS.
 Set them with the `maskConfig` prop (`AlertMaskConfig`). Defaults: `radiusLeft: 8`,
 `radiusRight: 4`, `borderLeft: 6`, `borderTop`/`borderRight`/`borderBottom: 1`.
 
@@ -31,13 +31,13 @@ set on the root (`--theme-text`, `--theme-border`, etc.).
 
 ### Private tokens
 
-None of its own. `AlertMaskCore`'s `--_height` / `--_inset-*` are measured plumbing, not public API.
+None of its own. `AlertMask`'s `--_height` / `--_inset-*` are measured plumbing, not public API.
 
 ## State hooks
 
 - `data-theme="info" | "success" | "warning" | "error"` on the root `.alert-masked-content`,
   from the `theme` prop. Drives `--theme-accent` and the content colours.
-- Inner classes: `.alert-mask-core` > `.alert-mask-decorator` (the SVG) + `.alert-mask-content` >
+- Inner classes: `.alert-mask` > `.alert-mask-decorator` (the SVG) + `.alert-mask-content` >
   `.alert-content-inner` > `.alert-content-icon`, `.alert-content-main` > (`.alert-content-body` >
   `.alert-content-title`, `.alert-content-text`) + `.alert-content-actions`, then `.alert-content-dismiss`.
   The inner content tokens (`--alert-content-gap`, `-padding`, `-text-colour`, `-icon-size`, `-title-font-size`,