srcdev-nuxt-components 9.6.0 → 9.6.2

package/app/components/02.molecules/profile-section/tests/ProfileSection.spec.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect } from "vitest";
-import { h } from "vue";
+import { defineComponent, h, nextTick, ref } from "vue";
 import { mountSuspended } from "@nuxt/test-utils/runtime";
 import ProfileSection from "../ProfileSection.vue";
 
@@ -52,25 +52,28 @@ describe("ProfileSection", () => {
     expect(img.attributes("alt")).toBe("Jane Doe");
   });
 
-  it("renders 3 profile-info blocks by default", async () => {
+  it("renders no profile-info blocks when no profile-info slots are given", async () => {
     const wrapper = await mountSuspended(ProfileSection, {
       props: defaultProps,
     });
-    const blocks = wrapper.findAll(".profile-section-info-block");
-    expect(blocks.length).toBe(3);
+    expect(wrapper.findAll(".profile-section-info-block").length).toBe(0);
   });
 
-  it("renders the correct number of profile-info blocks from profileInfoCount", async () => {
+  it("renders one block per provided profile-info slot, in numeric order, with gaps", async () => {
     const wrapper = await mountSuspended(ProfileSection, {
-      props: { ...defaultProps, profileInfoCount: 5 },
+      props: defaultProps,
+      slots: {
+        "profile-info-10": "<p>Ten</p>",
+        "profile-info-3": "<p>Three</p>",
+        "profile-info-1": "<p>One</p>",
+      },
     });
-    const blocks = wrapper.findAll(".profile-section-info-block");
-    expect(blocks.length).toBe(5);
+    expect(wrapper.findAll(".profile-section-info-block").map((b) => b.text())).toEqual(["One", "Three", "Ten"]);
   });
 
   it("renders named profile-info slot content", async () => {
     const wrapper = await mountSuspended(ProfileSection, {
-      props: { ...defaultProps, profileInfoCount: 2 },
+      props: defaultProps,
       slots: {
         "profile-info-1": "<p>First info block</p>",
         "profile-info-2": "<p>Second info block</p>",
@@ -91,11 +94,11 @@ describe("ProfileSection", () => {
     const wrapper = await mountSuspended(ProfileSection, {
       props: defaultProps,
       slots: {
-        eyebrowText: "<p class='eyebrow'>About Natasha</p>",
+        eyebrowText: "<p class='eyebrow'>About the author</p>",
       },
     });
     expect(wrapper.find(".eyebrow").exists()).toBe(true);
-    expect(wrapper.html()).toContain("About Natasha");
+    expect(wrapper.html()).toContain("About the author");
   });
 
   it("does not render heroText slot area when slot is not provided", async () => {
@@ -188,4 +191,134 @@ describe("ProfileSection", () => {
     expect(el.classes()).toContain("extra-class");
     expect(el.classes()).toContain("another-class");
   });
+
+  // ─── Stress test 2026-10-14 ────────────────────────────────────────────────
+
+  it("does not render an empty header when neither header slot is given", async () => {
+    const wrapper = await mountSuspended(ProfileSection, { props: defaultProps });
+    expect(wrapper.find(".profile-section-header").exists()).toBe(false);
+  });
+
+  it("adds and removes the header and info blocks when slots are toggled after mount", async () => {
+    const show = ref(false);
+    const Host = defineComponent({
+      components: { ProfileSection },
+      setup: () => ({ show, defaultProps }),
+      template: `
+        <ProfileSection v-bind="defaultProps">
+          <template v-if="show" #heroText><h2>Heading</h2></template>
+          <template v-if="show" #profile-info-1><p>Info</p></template>
+        </ProfileSection>
+      `,
+    });
+    const wrapper = await mountSuspended(Host);
+    expect(wrapper.find(".profile-section-header").exists()).toBe(false);
+    expect(wrapper.findAll(".profile-section-info-block").length).toBe(0);
+
+    show.value = true;
+    await nextTick();
+    expect(wrapper.find(".profile-section-header").exists()).toBe(true);
+    expect(wrapper.findAll(".profile-section-info-block").length).toBe(1);
+
+    show.value = false;
+    await nextTick();
+    expect(wrapper.find(".profile-section-header").exists()).toBe(false);
+    expect(wrapper.findAll(".profile-section-info-block").length).toBe(0);
+  });
+
+  it("uses the given picture width and height", async () => {
+    const wrapper = await mountSuspended(ProfileSection, {
+      props: { profilePicture: { src: "/a.jpg", alt: "A", width: 640, height: 480 } },
+    });
+    expect(wrapper.find("img").attributes("width")).toBe("640");
+    expect(wrapper.find("img").attributes("height")).toBe("480");
+  });
+
+  it.each([0, -100, Number.NaN, Number.POSITIVE_INFINITY])(
+    "falls back to 828x1104 for an invalid picture size (%s)",
+    async (size) => {
+      const wrapper = await mountSuspended(ProfileSection, {
+        props: { profilePicture: { src: "/a.jpg", alt: "A", width: size, height: size } },
+      });
+      expect(wrapper.find("img").attributes("width")).toBe("828");
+      expect(wrapper.find("img").attributes("height")).toBe("1104");
+    }
+  );
+
+  it("renders HTML-like alt text as text", async () => {
+    const wrapper = await mountSuspended(ProfileSection, {
+      props: { profilePicture: { src: "/a.jpg", alt: "<script>alert(1)</script>" } },
+    });
+    expect(wrapper.find("script").exists()).toBe(false);
+    expect(wrapper.find("img").attributes("alt")).toBe("<script>alert(1)</script>");
+  });
+
+  // ─── headerPlacement ─────────────────────────────────────────────────────────────────────────────────────────────────────────
+
+  const headerSlots = {
+    eyebrowText: "<p class='eyebrow'>About</p>",
+    heroText: (props: Record<string, unknown>) => h("h2", { id: props.headingId, class: "hero-heading" }, "Heading"),
+  };
+
+  it("renders the header above the grid by default", async () => {
+    const wrapper = await mountSuspended(ProfileSection, { props: defaultProps, slots: headerSlots });
+    expect(wrapper.find(".profile-section > .profile-section-header").exists()).toBe(true);
+    expect(wrapper.find(".profile-section-picture .profile-section-header").exists()).toBe(false);
+    expect(wrapper.attributes("data-header-placement")).toBe("above");
+  });
+
+  it("renders the header inside the picture frame, before the image, for picture-bottom", async () => {
+    const wrapper = await mountSuspended(ProfileSection, {
+      props: { ...defaultProps, headerPlacement: "picture-bottom" },
+      slots: headerSlots,
+    });
+    expect(wrapper.attributes("data-header-placement")).toBe("picture-bottom");
+    expect(wrapper.findAll(".profile-section-header").length).toBe(1);
+    const picture = wrapper.find(".profile-section-picture");
+    expect(picture.element.firstElementChild?.classList.contains("profile-section-header")).toBe(true);
+    expect(picture.find(".eyebrow").exists()).toBe(true);
+    expect(picture.find(".hero-heading").exists()).toBe(true);
+  });
+
+  it("keeps aria-labelledby pointing at the heading when it is inside the picture", async () => {
+    const wrapper = await mountSuspended(ProfileSection, {
+      props: { ...defaultProps, tag: "section", headerPlacement: "picture-bottom" },
+      slots: headerSlots,
+    });
+    expect(wrapper.attributes("aria-labelledby")).toBe(wrapper.find(".hero-heading").attributes("id"));
+  });
+
+  it("renders no header in the picture when no header slot is given", async () => {
+    const wrapper = await mountSuspended(ProfileSection, {
+      props: { ...defaultProps, headerPlacement: "picture-bottom" },
+    });
+    expect(wrapper.find(".profile-section-header").exists()).toBe(false);
+  });
+
+  it("moves the header when headerPlacement changes after mount", async () => {
+    const wrapper = await mountSuspended(ProfileSection, { props: defaultProps, slots: headerSlots });
+    await wrapper.setProps({ headerPlacement: "picture-bottom" });
+    expect(wrapper.find(".profile-section-picture .profile-section-header").exists()).toBe(true);
+    expect(wrapper.find(".profile-section > .profile-section-header").exists()).toBe(false);
+  });
+
+  it("renders the header inside the picture for picture-top too", async () => {
+    const wrapper = await mountSuspended(ProfileSection, {
+      props: { ...defaultProps, headerPlacement: "picture-top" },
+      slots: headerSlots,
+    });
+    expect(wrapper.attributes("data-header-placement")).toBe("picture-top");
+    expect(wrapper.find(".profile-section-picture > .profile-section-header").exists()).toBe(true);
+    expect(wrapper.find(".profile-section > .profile-section-header").exists()).toBe(false);
+  });
+
+  it("moves the header back above the grid when headerPlacement returns to above", async () => {
+    const wrapper = await mountSuspended(ProfileSection, {
+      props: { ...defaultProps, headerPlacement: "picture-top" },
+      slots: headerSlots,
+    });
+    await wrapper.setProps({ headerPlacement: "above" });
+    expect(wrapper.find(".profile-section > .profile-section-header").exists()).toBe(true);
+    expect(wrapper.find(".profile-section-picture .profile-section-header").exists()).toBe(false);
+  });
 });

package/app/components/02.molecules/profile-section/tests/__snapshots__/ProfileSection.spec.ts.snap

@@ -1,19 +1,14 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`ProfileSection > renders correct HTML structure 1`] = `
-"<div class="profile-section custom-class">
-  <header class="profile-section-header">
-    <!--v-if-->
-    <!--v-if-->
-  </header>
+"<div class="profile-section custom-class" data-header-placement="above">
+  <!--v-if-->
   <div class="profile-section-inner">
-    <div class="profile-section-picture"><img width="828" height="1104" data-nuxt-img="" srcset="/_ipx/s_828x1104/images/test.jpg 1x, /_ipx/s_1656x2208/images/test.jpg 2x" alt="Test profile picture" class="profile-section-image" src="/_ipx/s_828x1104/images/test.jpg"></div>
+    <div class="profile-section-picture">
+      <!--v-if--><img width="828" height="1104" data-nuxt-img="" srcset="/_ipx/s_828x1104/images/test.jpg 1x, /_ipx/s_1656x2208/images/test.jpg 2x" alt="Test profile picture" class="profile-section-image" src="/_ipx/s_828x1104/images/test.jpg">
+    </div>
     <div class="profile-section-info">
-      <div class="profile-section-info-content">
-        <div class="profile-section-info-block"></div>
-        <div class="profile-section-info-block"></div>
-        <div class="profile-section-info-block"></div>
-      </div>
+      <div class="profile-section-info-content"></div>
       <!--v-if-->
     </div>
   </div>

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