srcdev-nuxt-components 9.5.7 → 9.6.1

package/app/components/02.molecules/display-chip/tests/DisplayChip.spec.ts

@@ -37,7 +37,7 @@ describe("DisplayChip", () => {
 
   it("renders correct HTML structure (square + styleClassPassthrough)", async () => {
     const wrapper = await mountSuspended(DisplayChip, {
-      props: { shape: "square", styleClassPassthrough: ["online"] },
+      props: { shape: "square", status: "online", styleClassPassthrough: ["featured"] },
     });
     expect(wrapper.html()).toMatchSnapshot();
   });
@@ -63,15 +63,41 @@ describe("DisplayChip", () => {
 
   // ─── Shape ────────────────────────────────────────────────────────────────
 
-  it("applies circle class by default", async () => {
+  it("sets data-shape='circle' by default", async () => {
     const wrapper = await mountSuspended(DisplayChip);
-    expect(wrapper.classes()).toContain("circle");
+    expect(wrapper.attributes("data-shape")).toBe("circle");
   });
 
-  it("applies square class when shape='square'", async () => {
+  it("sets data-shape='square' when shape='square'", async () => {
     const wrapper = await mountSuspended(DisplayChip, { props: { shape: "square" } });
-    expect(wrapper.classes()).toContain("square");
-    expect(wrapper.classes()).not.toContain("circle");
+    expect(wrapper.attributes("data-shape")).toBe("square");
+  });
+
+  it("does not put shape or status on the root as classes", async () => {
+    const wrapper = await mountSuspended(DisplayChip, { props: { shape: "square", status: "online" } });
+    expect(wrapper.classes()).toEqual(["display-chip"]);
+  });
+
+  // ─── Status ───────────────────────────────────────────────────────────────
+
+  it("sets data-status='offline' by default", async () => {
+    const wrapper = await mountSuspended(DisplayChip);
+    expect(wrapper.attributes("data-status")).toBe("offline");
+  });
+
+  it.each(["online", "idle", "dnd"] as const)("sets data-status='%s' from the status prop", async (status) => {
+    const wrapper = await mountSuspended(DisplayChip, { props: { status } });
+    expect(wrapper.attributes("data-status")).toBe(status);
+  });
+
+  it("renders statusLabel as screen-reader text", async () => {
+    const wrapper = await mountSuspended(DisplayChip, { props: { status: "online", statusLabel: "Online" } });
+    expect(wrapper.find(".sr-only").text()).toBe("Online");
+  });
+
+  it("renders no screen-reader text without statusLabel", async () => {
+    const wrapper = await mountSuspended(DisplayChip);
+    expect(wrapper.find(".sr-only").exists()).toBe(false);
   });
 
   // ─── CSS custom properties ────────────────────────────────────────────────
@@ -89,39 +115,81 @@ describe("DisplayChip", () => {
     expect(style.getPropertyValue("--_chip-angle")).toBe("45deg");
   });
 
-  it("sets default CSS custom properties when no config is provided", async () => {
+  it("falls back to the public tokens when no config is provided", async () => {
     const wrapper = await mountSuspended(DisplayChip);
     const style = (wrapper.element as HTMLElement).style;
-    expect(style.getPropertyValue("--_chip-size")).toBe("12px");
-    expect(style.getPropertyValue("--_chip-mask-width")).toBe("4px");
-    expect(style.getPropertyValue("--_chip-offset")).toBe("0px");
-    expect(style.getPropertyValue("--_chip-angle")).toBe("90deg");
+    expect(style.getPropertyValue("--_chip-size")).toBe("var(--display-chip-size, 1.2rem)");
+    expect(style.getPropertyValue("--_chip-mask-width")).toBe("var(--display-chip-mask-width, 0.4rem)");
+    expect(style.getPropertyValue("--_chip-offset")).toBe("var(--display-chip-offset, 0rem)");
+    expect(style.getPropertyValue("--_chip-angle")).toBe("var(--display-chip-angle, 90deg)");
+  });
+
+  it("falls back per field when config is partial", async () => {
+    const wrapper = await mountSuspended(DisplayChip, { props: { config: { label: "5", angle: "45deg" } } });
+    const style = (wrapper.element as HTMLElement).style;
+    expect(style.getPropertyValue("--_chip-size")).toBe("var(--display-chip-size, 1.2rem)");
+    expect(style.getPropertyValue("--_chip-angle")).toBe("45deg");
   });
 
   // ─── Label ────────────────────────────────────────────────────────────────
 
-  it("does not render .chip-label when config has no label", async () => {
+  it("does not render .display-chip-label when config has no label", async () => {
     const wrapper = await mountSuspended(DisplayChip);
-    expect(wrapper.find(".chip-label").exists()).toBe(false);
+    expect(wrapper.find(".display-chip-label").exists()).toBe(false);
   });
 
-  it("renders .chip-label when config.label is set", async () => {
+  it("renders .display-chip-label when config.label is set", async () => {
     const wrapper = await mountSuspended(DisplayChip, {
       props: { config: { size: "12px", maskWidth: "4px", offset: "0px", angle: "90deg", label: "5" } },
     });
-    expect(wrapper.find(".chip-label").exists()).toBe(true);
-    expect(wrapper.find(".chip-label").text()).toBe("5");
+    expect(wrapper.find(".display-chip-label").exists()).toBe(true);
+    expect(wrapper.find(".display-chip-label").text()).toBe("5");
   });
 
   it.each([
-    ["A", "length-1"],
-    ["+2", "length-2"],
-    ["DND", "length-3"],
-  ])("applies length class for label '%s'", async (label, expectedClass) => {
-    const wrapper = await mountSuspended(DisplayChip, {
-      props: { config: { size: "12px", maskWidth: "4px", offset: "0px", angle: "90deg", label } },
-    });
-    expect(wrapper.find(".chip-label").classes()).toContain(expectedClass);
+    ["A", "1"],
+    ["+2", "2"],
+    ["DND", "3"],
+    ["👨‍👩‍👧‍👦", "1"],
+    ["999+", "3"],
+  ])("sets data-length for label '%s'", async (label, expected) => {
+    const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
+    const wrapper = await mountSuspended(DisplayChip, { props: { config: { label } } });
+    expect(wrapper.find(".display-chip-label").attributes("data-length")).toBe(expected);
+    warnSpy.mockRestore();
+  });
+
+  it("keeps a multi-codepoint emoji whole instead of splitting it", async () => {
+    const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
+    const wrapper = await mountSuspended(DisplayChip, { props: { config: { label: "👨‍👩‍👧‍👦" } } });
+    expect(wrapper.find(".display-chip-label").text()).toBe("👨‍👩‍👧‍👦");
+    expect(warnSpy).not.toHaveBeenCalled();
+    warnSpy.mockRestore();
+  });
+
+  it("truncates by grapheme, not UTF-16 code unit", async () => {
+    const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
+    const wrapper = await mountSuspended(DisplayChip, { props: { config: { label: "🇬🇧🇺🇸🇫🇷🇩🇪" } } });
+    expect(wrapper.find(".display-chip-label").text()).toBe("🇬🇧🇺🇸🇫🇷");
+    warnSpy.mockRestore();
+  });
+
+  it("does not render a label for a whitespace-only label", async () => {
+    const wrapper = await mountSuspended(DisplayChip, { props: { config: { label: "   " } } });
+    expect(wrapper.find(".display-chip-label").exists()).toBe(false);
+  });
+
+  it("renders an HTML-like label as text", async () => {
+    const wrapper = await mountSuspended(DisplayChip, { props: { config: { label: "<b>" } } });
+    expect(wrapper.find(".display-chip-label b").exists()).toBe(false);
+    expect(wrapper.find(".display-chip-label").text()).toBe("<b>");
+  });
+
+  it("updates the label when config changes after mount", async () => {
+    const wrapper = await mountSuspended(DisplayChip, { props: { config: { label: "1" } } });
+    await wrapper.setProps({ config: { label: "42" } });
+    expect(wrapper.find(".display-chip-label").text()).toBe("42");
+    expect(wrapper.find(".display-chip-label").attributes("data-length")).toBe("2");
   });
 
   it("truncates label to 3 characters when label exceeds maximum length", async () => {
@@ -129,7 +197,7 @@ describe("DisplayChip", () => {
     const wrapper = await mountSuspended(DisplayChip, {
       props: { config: { size: "12px", maskWidth: "4px", offset: "0px", angle: "90deg", label: "ABCD" } },
     });
-    expect(wrapper.find(".chip-label").text()).toBe("ABC");
+    expect(wrapper.find(".display-chip-label").text()).toBe("ABC");
     warnSpy.mockRestore();
   });
 
@@ -144,16 +212,17 @@ describe("DisplayChip", () => {
 
   // ─── Icon ─────────────────────────────────────────────────────────────────
 
-  it("does not render .chip-icon when config has no icon", async () => {
+  it("does not render .display-chip-icon when config has no icon", async () => {
     const wrapper = await mountSuspended(DisplayChip);
-    expect(wrapper.find(".chip-icon").exists()).toBe(false);
+    expect(wrapper.find(".display-chip-icon").exists()).toBe(false);
   });
 
-  it("renders .chip-icon when config.icon is set", async () => {
+  it("renders .display-chip-icon when config.icon is set", async () => {
     const wrapper = await mountSuspended(DisplayChip, {
       props: { config: { size: "12px", maskWidth: "4px", offset: "0px", angle: "90deg", icon: "mdi:check" } },
     });
-    expect(wrapper.find(".chip-icon").exists()).toBe(true);
+    expect(wrapper.find(".display-chip-icon").exists()).toBe(true);
+    expect(wrapper.find(".display-chip-icon").attributes("aria-hidden")).toBe("true");
   });
 
   // ─── Slot ─────────────────────────────────────────────────────────────────

package/app/components/02.molecules/display-chip/tests/__snapshots__/DisplayChip.spec.ts.snap

@@ -1,12 +1,16 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`DisplayChip > renders correct HTML structure (default) 1`] = `"<span class="display-chip circle" style="--_chip-size: 12px; --_chip-mask-width: 4px; --_chip-offset: 0px; --_chip-angle: 90deg;"><!--v-if--><!--v-if--></span>"`;
+exports[`DisplayChip > renders correct HTML structure (default) 1`] = `"<span class="display-chip" data-shape="circle" data-status="offline" style="--_chip-size: var(--display-chip-size, 1.2rem); --_chip-mask-width: var(--display-chip-mask-width, 0.4rem); --_chip-offset: var(--display-chip-offset, 0rem); --_chip-angle: var(--display-chip-angle, 90deg);"><!--v-if--><!--v-if--><!--v-if--></span>"`;
 
-exports[`DisplayChip > renders correct HTML structure (square + styleClassPassthrough) 1`] = `"<span class="display-chip square online" style="--_chip-size: 12px; --_chip-mask-width: 4px; --_chip-offset: 0px; --_chip-angle: 90deg;"><!--v-if--><!--v-if--></span>"`;
+exports[`DisplayChip > renders correct HTML structure (square + styleClassPassthrough) 1`] = `"<span class="display-chip featured" data-shape="square" data-status="online" style="--_chip-size: var(--display-chip-size, 1.2rem); --_chip-mask-width: var(--display-chip-mask-width, 0.4rem); --_chip-offset: var(--display-chip-offset, 0rem); --_chip-angle: var(--display-chip-angle, 90deg);"><!--v-if--><!--v-if--><!--v-if--></span>"`;
 
 exports[`DisplayChip > renders correct HTML structure (with icon) 1`] = `
-"<span class="display-chip circle" style="--_chip-size: 12px; --_chip-mask-width: 4px; --_chip-offset: 0px; --_chip-angle: 90deg;"><span class="iconify i-mdi:check chip-icon" aria-hidden="true"></span>
+"<span class="display-chip" data-shape="circle" data-status="offline" style="--_chip-size: 12px; --_chip-mask-width: 4px; --_chip-offset: 0px; --_chip-angle: 90deg;"><span class="iconify i-mdi:check display-chip-icon" aria-hidden="true"></span>
+<!--v-if-->
 <!--v-if--></span>"
 `;
 
-exports[`DisplayChip > renders correct HTML structure (with label) 1`] = `"<span class="display-chip circle" style="--_chip-size: 12px; --_chip-mask-width: 4px; --_chip-offset: 0px; --_chip-angle: 90deg;"><!--v-if--><span class="chip-label length-1">5</span></span>"`;
+exports[`DisplayChip > renders correct HTML structure (with label) 1`] = `
+"<span class="display-chip" data-shape="circle" data-status="offline" style="--_chip-size: 12px; --_chip-mask-width: 4px; --_chip-offset: 0px; --_chip-angle: 90deg;"><!--v-if--><span class="display-chip-label" data-length="1">5</span>
+<!--v-if--></span>"
+`;

package/app/components/02.molecules/prompt/CONSUMER-STYLING.md

@@ -11,6 +11,10 @@ by `AlertContent`, or `AlertMaskedContent` with `masked`, and styled by their to
 `02.molecules/alert-content/CONSUMER-STYLING.md` and `02.molecules/alert-masked-content/CONSUMER-STYLING.md`.
 The palette comes from the `data-theme` attribute on `.display-prompt-wrapper` (`--theme-*` tokens).
 
+To shorten long titles or messages, use AlertContent's line-clamp tokens, which inherit through the
+prompt: `--alert-content-title-line-clamp` and `--alert-content-text-line-clamp` (default `none`,
+`1` is single-line ellipsis).
+
 > Changed 2026-09-28: `--display-prompt-transition-duration` is new (the transition was a hardcoded
 > `all 200ms`), and the transition now respects reduced motion.
 
@@ -22,9 +26,13 @@ No private `--_` tokens.
 
 | Hook | Element | When |
 |---|---|---|
-| `.closed` | `.display-prompt` (root) | Dismissed without a parent `v-model`; the root is also `inert` |
+| `[data-state="open\|closed"]` | `.display-prompt` (root) | `closed` once dismissed without a parent `v-model`; the root is then also `inert` |
 | `[data-theme="info\|success\|warning\|error"]` | `.display-prompt-wrapper` | The resolved `theme` |
 
+> Changed 2026-10-08: the bare `.closed` class is now `data-state="closed"` (and `data-state="open"` before
+> dismissal), so a consumer's own `.closed` utility class can no longer match the prompt. Replace
+> `.display-prompt.closed` selectors with `.display-prompt[data-state="closed"]`.
+
 > Changed 2026-09-28: root class renamed from `.display-prompt-core`. A closed prompt is now `inert`
 > (its dismiss button used to stay in the tab order while invisible), and the root is only focusable
 > (`tabindex="-1"`) when `use-auto-focus` is on.

package/app/components/02.molecules/prompt/DisplayPrompt.vue

@@ -2,7 +2,7 @@
   <div
     ref="promptElementRef"
     class="display-prompt"
-    :class="[{ closed: !componentOpen }]"
+    :data-state="componentOpen ? 'open' : 'closed'"
     :data-test-id="`display-prompt-${resolved.theme}`"
     :tabindex="resolved.useAutoFocus ? -1 : undefined"
     :inert="!componentOpen || undefined"
@@ -114,7 +114,7 @@ onMounted(() => {
       transition: none;
     }
 
-    &.closed {
+    &[data-state="closed"] {
       grid-template-rows: 0fr;
       opacity: 0;
       pointer-events: none;

package/app/components/02.molecules/prompt/stories/DisplayPrompt.stories.ts

@@ -1,11 +1,33 @@
-import type { Meta, StoryFn } from "@nuxtjs/storybook";
-import { ref } from "vue";
+import { computed, ref } from "vue";
+import type { Meta, StoryObj } from "@nuxtjs/storybook";
 import StorybookComponent from "../DisplayPrompt.vue";
+import CanvasSwitcher from "../../../01.atoms/canvas-switcher/CanvasSwitcher.vue";
+import type { MediaCanvas } from "~/types/components";
 
-export default {
+type LineClamp = "none" | "1" | "2" | "3" | "4";
+
+// Story-only args: drive AlertContent's CSS tokens, not DisplayPrompt props. See their argTypes entries.
+type StoryArgs = InstanceType<typeof StorybookComponent>["$props"] & {
+  titleLineClamp: LineClamp;
+  textLineClamp: LineClamp;
+};
+
+const lineClampArgType = (token: string, example: string) => ({
+  control: "select" as const,
+  options: ["none", "1", "2", "3", "4"] satisfies LineClamp[],
+  description:
+    `**Story control, not a prop.** Sets the \`${token}\` CSS token on a wrapper so you can try it here. ` +
+    `To use it in an app, set the token in your own CSS, e.g. \`.site-notice { ${token}: ${example}; }\`. ` +
+    "`1` is single-line ellipsis, `none` (the default) shows everything. Don't clamp messages people need to read in full.",
+  table: { category: "CSS tokens (story only, set in your CSS)", defaultValue: { summary: "none" } },
+});
+
+const meta: Meta<StoryArgs> = {
   title: "Molecules/DisplayPrompt",
   component: StorybookComponent,
   argTypes: {
+    titleLineClamp: lineClampArgType("--alert-content-title-line-clamp", "1"),
+    textLineClamp: lineClampArgType("--alert-content-text-line-clamp", "3"),
     theme: {
       control: { type: "inline-radio" },
       options: ["info", "success", "warning", "error"],
@@ -46,84 +68,199 @@ export default {
     masked: false,
     closeLabel: "Close this prompt",
     styleClassPassthrough: [],
+    titleLineClamp: "none",
+    textLineClamp: "none",
   },
-} as Meta<typeof StorybookComponent>;
+};
 
-const Template: StoryFn<typeof StorybookComponent> = (args) => ({
-  components: { StorybookComponent },
-  setup() {
-    const model = ref(false);
-    return { args, model };
-  },
-  template: `
-    <div style="padding: 2rem; max-width: 640px;">
-      <StorybookComponent
-        v-model="model"
-        :theme="args.theme"
-        :dismissible="args.dismissible"
-        :use-auto-focus="args.useAutoFocus"
-        :masked="args.masked"
-        :close-label="args.closeLabel"
-        :style-class-passthrough="args.styleClassPassthrough"
-      >
-        <template #title>Prompt title</template>
-        <template #content>This is the prompt content. It can contain any information you want to communicate to the user.</template>
-      </StorybookComponent>
-    </div>
-  `,
-});
+export default meta;
+type Story = StoryObj<StoryArgs>;
 
-export const Default = Template.bind({});
+function useStorySetup(args: StoryArgs) {
+  const tokenStyles = computed(() => ({
+    "--alert-content-title-line-clamp": args.titleLineClamp,
+    "--alert-content-text-line-clamp": args.textLineClamp,
+  }));
+  return { args, tokenStyles };
+}
 
-export const InfoTheme = Template.bind({});
-InfoTheme.args = {
-  theme: "info",
-  dismissible: true,
+const Template: Story = {
+  render: (args) => ({
+    components: { StorybookComponent },
+    setup() {
+      const model = ref(false);
+      return { ...useStorySetup(args), model };
+    },
+    template: `
+      <div :style="tokenStyles" style="padding: 2rem; max-width: 640px;">
+        <StorybookComponent
+          v-model="model"
+          :theme="args.theme"
+          :dismissible="args.dismissible"
+          :use-auto-focus="args.useAutoFocus"
+          :masked="args.masked"
+          :close-label="args.closeLabel"
+          :style-class-passthrough="args.styleClassPassthrough"
+        >
+          <template #title>Prompt title</template>
+          <template #content>This is the prompt content. It can contain any information you want to communicate to the user.</template>
+        </StorybookComponent>
+      </div>
+    `,
+  }),
 };
 
-export const SuccessTheme = Template.bind({});
-SuccessTheme.args = {
-  theme: "success",
-  dismissible: true,
-};
+export const Default: Story = { ...Template };
 
-export const WarningTheme = Template.bind({});
-WarningTheme.args = {
-  theme: "warning",
-  dismissible: true,
-};
+export const InfoTheme: Story = { ...Template, args: { theme: "info", dismissible: true } };
 
-export const ErrorTheme = Template.bind({});
-ErrorTheme.args = {
-  theme: "error",
-  dismissible: true,
-};
+export const SuccessTheme: Story = { ...Template, args: { theme: "success", dismissible: true } };
+
+export const WarningTheme: Story = { ...Template, args: { theme: "warning", dismissible: true } };
+
+export const ErrorTheme: Story = { ...Template, args: { theme: "error", dismissible: true } };
+
+export const Dismissible: Story = { ...Template, args: { theme: "info", dismissible: true } };
 
-export const Dismissible = Template.bind({});
-Dismissible.args = {
-  theme: "info",
-  dismissible: true,
+export const AllThemesDismissible: Story = {
+  render: () => ({
+    components: { StorybookComponent },
+    setup() {
+      return { themes: ["info", "success", "warning", "error"] as const };
+    },
+    template: `
+      <div style="padding: 2rem; display: flex; flex-direction: column; gap: 1.6rem; max-width: 640px;">
+        <StorybookComponent
+          v-for="theme in themes"
+          :key="theme"
+          :theme="theme"
+          :dismissible="true"
+        >
+          <template #title>{{ theme.charAt(0).toUpperCase() + theme.slice(1) }} prompt</template>
+          <template #content>This is the {{ theme }} variant of the prompt component.</template>
+        </StorybookComponent>
+      </div>
+    `,
+  }),
+  // Fixed showcase: hardcoded values, so Controls would do nothing here.
+  parameters: { controls: { disable: true } },
 };
 
-export const AllThemesDismissible: StoryFn<typeof StorybookComponent> = () => ({
-  components: { StorybookComponent },
-  setup() {
-    return { themes: ["info", "success", "warning", "error"] as const };
+const stressPrompts = [
+  {
+    key: "german",
+    theme: "error",
+    title: "Donaudampfschifffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft",
+    content:
+      "Ihre Sitzung läuft in Kürze ab. Bitte speichern Sie alle ungespeicherten Änderungen, bevor Sie fortfahren, sonst gehen sie verloren. https://example.com/konto/sitzung/a-very-long-path-segment-without-any-spaces-at-all-in-it",
+    closeLabel: "Diese Benachrichtigung schließen und nicht erneut anzeigen",
   },
-  template: `
-    <div style="padding: 2rem; display: flex; flex-direction: column; gap: 1.6rem; max-width: 640px;">
-      <StorybookComponent
-        v-for="theme in themes"
-        :key="theme"
-        :theme="theme"
-        :dismissible="true"
-      >
-        <template #title>{{ theme.charAt(0).toUpperCase() + theme.slice(1) }} prompt</template>
-        <template #content>This is the {{ theme }} variant of the prompt component.</template>
-      </StorybookComponent>
-    </div>
-  `,
-});
+  {
+    key: "emoji-html",
+    theme: "warning",
+    title: "🚨🔥 Heads up <script>alert('xss')</script>",
+    content: "<b>Not bold</b> &amp; <img src=x onerror=alert(1)> should all render as plain text. 👍🏽👨‍👩‍👧‍👦",
+    decoratorIcon: "🚨",
+  },
+  {
+    key: "rtl",
+    theme: "info",
+    dir: "rtl",
+    title: "تنبيه مهم بخصوص حسابك",
+    content: "تم تحديث شروط الخدمة. يرجى مراجعة التغييرات قبل المتابعة لاستخدام الموقع.",
+    closeLabel: "إغلاق",
+  },
+  {
+    key: "masked",
+    theme: "success",
+    masked: true,
+    title: "Gespeichert: Kundendienstmitarbeiterkontaktaufnahmeformular",
+    content: "Masked variant over a gradient, with an unbroken German compound in the title.",
+  },
+  {
+    key: "title-only",
+    theme: "success",
+    title: "Ok",
+  },
+  {
+    key: "empty-title",
+    theme: "info",
+    title: "",
+    content: "An empty title slot, a custom close icon and nothing else.",
+    customCloseIcon: true,
+  },
+  {
+    key: "content-only",
+    theme: "warning",
+    content: "x",
+  },
+];
 
-// Fixed showcase: hardcoded values, so Controls would do nothing here.
-AllThemesDismissible.parameters = { controls: { disable: true } };
+/**
+ * Stress test — hostile content across several prompts, inside the CanvasSwitcher so it can be
+ * checked at every width.
+ */
+export const StressTest: Story = {
+  name: "Stress Test (Worst-Case Data)",
+  args: { titleLineClamp: "none", textLineClamp: "none" },
+  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: { StorybookComponent },
+    setup() {
+      return { ...useStorySetup(args), stressPrompts };
+    },
+    template: `
+      <div :style="tokenStyles" style="display: grid; gap: 1.6rem;">
+        <div
+          v-for="prompt in stressPrompts"
+          :key="prompt.key"
+          :dir="prompt.dir"
+          :style="prompt.masked ? 'padding: 1.6rem; background: linear-gradient(135deg, oklch(40% 0.15 250), oklch(25% 0.1 300));' : undefined"
+        >
+          <StorybookComponent
+            :theme="prompt.theme"
+            :masked="prompt.masked ?? false"
+            :close-label="prompt.closeLabel"
+            dismissible
+          >
+            <template v-if="prompt.decoratorIcon" #customDecoratorIcon>{{ prompt.decoratorIcon }}</template>
+            <template v-if="prompt.title !== undefined" #title>{{ prompt.title }}</template>
+            <template v-if="prompt.content" #content>{{ prompt.content }}</template>
+            <template v-if="prompt.customCloseIcon" #customCloseIcon>✕</template>
+          </StorybookComponent>
+        </div>
+      </div>
+    `,
+  }),
+  parameters: {
+    layout: "fullscreen",
+    initialCanvas: "mobileCanvas",
+    docs: {
+      description: {
+        story:
+          "Hostile content: an unbroken German compound as the title, long German copy ending in a long URL, a long German close label, " +
+          "emoji at the start and as the decorator icon, HTML-like text (must render as text), right-to-left Arabic, the masked variant over a gradient, " +
+          "a two-character title, an empty title slot with a custom close icon, and a one-character message with no title. " +
+          "Check at every CanvasSwitcher width that nothing overflows or gets clipped, unbroken text wraps, the icon and dismiss button keep their size, " +
+          "the RTL prompt mirrors, and dismissing any prompt collapses it to zero height (the story's own grid gap stays)." +
+          "The two line-clamp controls are AlertContent CSS tokens (story only), not props: try `1` to see single-line ellipsis.",
+      },
+    },
+  },
+};

package/app/components/02.molecules/prompt/tests/DisplayPrompt.spec.ts

@@ -33,9 +33,9 @@ describe("DisplayPrompt", () => {
     expect(root(w).exists()).toBe(true);
   });
 
-  it("is visible by default (no closed class)", async () => {
+  it("is open by default (data-state=open)", async () => {
     const w = await mountSuspended(DisplayPrompt);
-    expect(root(w).classes()).not.toContain("closed");
+    expect(root(w).attributes("data-state")).toBe("open");
   });
 
   it("is not in the tab order by default", async () => {
@@ -104,6 +104,19 @@ describe("DisplayPrompt", () => {
     expect(w.find("[data-test-id='alert-content']").text()).toContain("Detailed explanation here");
   });
 
+  it("does not render the title element when the title slot is not provided", async () => {
+    const w = await mountSuspended(DisplayPrompt, { slots: { content: "x" } });
+    expect(w.find("[data-test-id='alert-title']").exists()).toBe(false);
+  });
+
+  it("renders HTML-like slot text as plain text", async () => {
+    const w = await mountSuspended(DisplayPrompt, {
+      slots: { title: () => "<script>alert('xss')</script>" },
+    });
+    expect(w.find("[data-test-id='alert-title'] script").exists()).toBe(false);
+    expect(w.find("[data-test-id='alert-title']").text()).toContain("<script>");
+  });
+
   it("does not render content element when content slot is empty", async () => {
     const w = await mountSuspended(DisplayPrompt);
     expect(w.find("[data-test-id='alert-content']").exists()).toBe(false);
@@ -123,11 +136,11 @@ describe("DisplayPrompt", () => {
 
   // ─── Dismiss behaviour (no parent model) ─────────────────────────────────
 
-  it("adds the closed class after the dismiss button is clicked", async () => {
+  it("sets data-state=closed after the dismiss button is clicked", async () => {
     const w = await mountSuspended(DisplayPrompt, { props: { dismissible: true } });
     await w.find("[data-test-id='alert-dismiss']").trigger("click");
     await nextTick();
-    expect(root(w).classes()).toContain("closed");
+    expect(root(w).attributes("data-state")).toBe("closed");
   });
 
   it("makes the closed prompt inert so its controls leave the tab order", async () => {
@@ -168,14 +181,14 @@ describe("DisplayPrompt", () => {
     expect(emitted![0]).toEqual([false]);
   });
 
-  it("does not add the closed class when dismissed via parent model", async () => {
+  it("stays data-state=open when dismissed via parent model", async () => {
     const w = await mountSuspended(DisplayPrompt, {
       props: { dismissible: true, modelValue: true },
     });
     await w.find("[data-test-id='alert-dismiss']").trigger("click");
     await nextTick();
     // componentOpen is unchanged — parent controls visibility via modelValue
-    expect(root(w).classes()).not.toContain("closed");
+    expect(root(w).attributes("data-state")).toBe("open");
   });
 
   // ─── styleClassPassthrough ────────────────────────────────────────────────