srcdev-nuxt-components 9.6.10 → 9.6.11

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

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

@@ -1,3 +1,6 @@
+import { ref } from "vue";
+import CanvasSwitcher from "../../../01.atoms/canvas-switcher/CanvasSwitcher.vue";
+import type { MediaCanvas } from "~/types/components";
 import type { Meta, StoryObj } from "@nuxtjs/storybook";
 import AlertMaskedContent from "../AlertMaskedContent.vue";
 import AlertContent from "../../alert-content/AlertContent.vue";
@@ -211,3 +214,60 @@ export const TokenOverrides: Story = {
     `,
   }),
 };
+
+export const StressTest: Story = {
+  name: "Stress Test (Worst-Case Data)",
+  args: { theme: "warning", dismissible: true },
+  decorators: [
+    (story, context) => ({
+      components: { story, CanvasSwitcher },
+      setup() {
+        const canvasName = ref<MediaCanvas>(context.parameters.initialCanvas ?? "mobileCanvas");
+        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;">
+          <story />
+        </div>
+      `,
+    }),
+  ],
+  render: (args) => ({
+    components: { AlertMaskedContent },
+    setup() {
+      return { args, wrapperStyle };
+    },
+    template: `
+      <div :data-theme="args.theme" :style="wrapperStyle" style="display: grid; gap: 1.6rem; max-width: none;">
+        <AlertMaskedContent v-bind="args">
+          <template #title>⚠️ Datenschutzgrundverordnungskonformitätsbestätigungsaufforderung &lt;b&gt;not bold&lt;/b&gt;</template>
+          <template #content>
+            Wir verwenden Ihre Adresse ausschließlich für Rückfragen zu Ihrer Bestellung bei Alex Morgan in Northtown.
+            https://example.com/a/very/long/unbroken/url/that/should/wrap/inside/the/mask يرجى المحاولة مرة أخرى
+          </template>
+        </AlertMaskedContent>
+        <div dir="rtl">
+          <AlertMaskedContent v-bind="args">
+            <template #title>تنبيه</template>
+            <template #content>نص من اليمين إلى اليسار؛ يبقى شريط التمييز على اليسار والنص بعيدًا عنه.</template>
+          </AlertMaskedContent>
+        </div>
+        <AlertMaskedContent v-bind="args" :mask-config="{ radiusLeft: 500, radiusRight: 500, borderLeft: -4 }">
+          <template #title>x</template>
+        </AlertMaskedContent>
+      </div>
+    `,
+  }),
+  parameters: {
+    docs: {
+      story: { inline: false, height: "900px" },
+      description: {
+        story:
+          "Long German title and body with an unbroken compound word and URL, HTML-like and right-to-left text, a right-to-left alert, and a hostile `mask-config` (oversized radii, negative border) round a one-character title. Check at every canvas width: text wraps inside the mask, the accent bar stays on the left with the text clear of it, and the hostile mask still draws a clean shape.",
+      },
+    },
+  },
+};

package/app/components/02.molecules/alert-masked-content/tests/AlertMaskedContent.spec.ts

@@ -38,16 +38,16 @@ describe("AlertMaskedContent", () => {
     expect(wrapper.find(".alert-masked-content").attributes("data-theme")).toBe("success");
   });
 
-  // ─── AlertMaskCore ────────────────────────────────────────────────────────
+  // ─── AlertMask ────────────────────────────────────────────────────────
 
-  it("renders AlertMaskCore", async () => {
+  it("renders AlertMask", async () => {
     const wrapper = await mountSuspended(AlertMaskedContent, { props: { theme: "info" } });
-    expect(wrapper.find(".alert-mask-core").exists()).toBe(true);
+    expect(wrapper.find(".alert-mask").exists()).toBe(true);
   });
 
-  it("renders AlertContentInner inside AlertMaskCore", async () => {
+  it("renders AlertContentInner inside AlertMask", async () => {
     const wrapper = await mountSuspended(AlertMaskedContent, { props: { theme: "info" } });
-    expect(wrapper.find(".alert-mask-core .alert-content-inner").exists()).toBe(true);
+    expect(wrapper.find(".alert-mask .alert-content-inner").exists()).toBe(true);
   });
 
   // ─── Icon ─────────────────────────────────────────────────────────────────
@@ -131,15 +131,15 @@ describe("AlertMaskedContent", () => {
 
   // ─── Default maskConfig ───────────────────────────────────────────────────
 
-  it("passes the resolved maskConfig to AlertMaskCore", async () => {
+  it("passes the resolved maskConfig to AlertMask", async () => {
     const wrapper = await mountSuspended(AlertMaskedContent, { props: { theme: "info" } });
     const contentEl = wrapper.find(".alert-mask-content");
     const style = (contentEl.element as HTMLElement).style;
-    // Default borderLeft: 6 → --_inset-inline-start: 6px
-    expect(style.getPropertyValue("--_inset-inline-start")).toBe("6px");
-    expect(style.getPropertyValue("--_inset-block-start")).toBe("1px");
-    expect(style.getPropertyValue("--_inset-inline-end")).toBe("1px");
-    expect(style.getPropertyValue("--_inset-block-end")).toBe("1px");
+    // Default borderLeft: 6 → --_inset-left: 6px
+    expect(style.getPropertyValue("--_inset-left")).toBe("6px");
+    expect(style.getPropertyValue("--_inset-top")).toBe("1px");
+    expect(style.getPropertyValue("--_inset-right")).toBe("1px");
+    expect(style.getPropertyValue("--_inset-bottom")).toBe("1px");
   });
 
   it("routes the default mask colours through public tokens", async () => {
@@ -168,7 +168,7 @@ describe("AlertMaskedContent", () => {
     });
     const contentEl = wrapper.find(".alert-mask-content");
     const style = (contentEl.element as HTMLElement).style;
-    expect(style.getPropertyValue("--_inset-inline-start")).toBe("12px");
+    expect(style.getPropertyValue("--_inset-left")).toBe("12px");
   });
 
   // ─── showIcon / actions (added 2026-09-27) ──────────────────────────────────

package/app/components/02.molecules/cookie-consent-banner/CONSUMER-STYLING.md

@@ -9,7 +9,7 @@ adds: position, motion and the two buttons.
 > **Changed 2026-10-15**: the closed state class `.closed` is now `.cookie-consent-banner-closed`,
 > and the buttons are `InputButton`s (`variant="inline"`, so the banner's tokens still style them):
 > each button is `.cookie-consent-banner-accept.input-button` / `.cookie-consent-banner-reject.input-button`
-> with the label in an inner `.button-text`. The button tokens below are unchanged.
+> with the label in an inner `.input-button-text` (`.button-text` until 2026-10-17). The button tokens below are unchanged.
 >
 > **Changed 2026-09-27**: rebuilt on `AlertContent`. The banner's own panel tokens
 > (`--cookie-consent-banner-padding`, `-gap`, `-border-radius`, `-border`, `-accent-border-width`,
@@ -47,7 +47,7 @@ adds: position, motion and the two buttons.
 
 The gap between the buttons and their alignment (right by default) are `AlertContent`'s
 `--alert-content-actions-gap` and `--alert-content-actions-justify`. Long labels wrap inside the
-buttons (`InputButton`'s `.button-text`), and the buttons wrap onto their own lines when the row is full.
+buttons (`InputButton`'s `.input-button-text`), and the buttons wrap onto their own lines when the row is full.
 The label keeps the banner's font size and case: `InputButton`'s `--button-font-size` and
 `--button-text-transform` don't apply here.
 
@@ -63,7 +63,7 @@ each resolving a public token once for reuse.
 - Classes: `.cookie-consent-banner` > `.cookie-consent-banner-inner` (the `role="region"`) >
   `.alert-content` (see its guide for the inner structure); the buttons are
   `InputButton`s with `.cookie-consent-banner-reject` and `.cookie-consent-banner-accept` (plus
-  `.input-button.inline`) inside `.alert-content-actions`.
+  `.input-button[data-variant="inline"]`) inside `.alert-content-actions`.
 - `data-test-id`: `cookie-consent-banner`, `cookie-consent-banner-reject`, `cookie-consent-banner-accept`,
   plus `AlertContent`'s `alert-icon`, `alert-title`, `alert-content`, `alert-actions`.
 

package/app/components/02.molecules/cookie-consent-banner/CookieConsentBanner.vue

@@ -127,7 +127,7 @@ const isClosed = computed(() => status.value !== "unset");
         outline-offset: 0.2rem;
       }
 
-      .button-text {
+      & .input-button-text {
         font-size: inherit;
         text-transform: none;
       }

package/app/components/02.molecules/cookie-consent-banner/tests/CookieConsentBanner.spec.ts

@@ -118,7 +118,7 @@ describe("CookieConsentBanner", () => {
       expect(button.tagName).toBe("BUTTON");
       expect(button.getAttribute("type")).toBe("button");
       expect(button.classList).toContain("input-button");
-      expect(button.classList).toContain("inline");
+      expect(button.dataset.variant).toBe("inline");
     }
   });