srcdev-nuxt-components 9.6.12 → 9.6.14

package/app/components/01.atoms/display-dialog/DisplayDialog.vue

@@ -23,14 +23,18 @@
           </div>
 
           <div class="display-dialog-col-right">
-            <button
+            <InputButton
+              type="button"
+              variant="inline"
               data-test-id="display-dialog-header-close"
-              class="display-dialog-close"
-              @click.prevent="closeDialog()"
+              :button-text="resolved.closeLabel"
+              style-class-passthrough="display-dialog-close"
+              @click="closeDialog()"
             >
-              <Icon :name="resolved.closeIcon" class="icon" />
-              <span class="sr-only">{{ resolved.closeLabel }}</span>
-            </button>
+              <template #iconOnly>
+                <Icon :name="resolved.closeIcon" class="icon" aria-hidden="true" />
+              </template>
+            </InputButton>
           </div>
         </div>
         <div
@@ -139,19 +143,6 @@ onUnmounted(() => {
   .display-dialog {
     --_transition-duration: var(--display-dialog-transition-duration, 200ms);
 
-    --_header-button-border-hover: var(
-      --display-dialog-header-button-border-hover,
-      0.1rem solid var(--colour-text-default)
-    );
-    --_header-button-outline-hover: var(
-      --display-dialog-header-button-outline-hover,
-      0.1rem solid var(--colour-text-default)
-    );
-    --_header-button-icon-color: var(
-      --display-dialog-header-button-icon-color,
-      var(--colour-text-default)
-    );
-
     position: fixed;
     left: 0;
     top: 0;
@@ -211,13 +202,14 @@ onUnmounted(() => {
       --_inner-outline: var(--display-dialog-inner-outline, 0.1rem solid var(--colour-text-default));
 
       display: grid;
-      grid-template-rows: auto 1fr auto;
+      grid-template-rows: auto minmax(0, 1fr) auto;
       border-radius: var(--_inner-border-radius);
       border: var(--_inner-border);
       outline: var(--_inner-outline);
       background-color: var(--display-dialog-inner-background, var(--page-bg));
       height: initial;
-      width: 100vw;
+      max-inline-size: 100%;
+      max-block-size: 100%;
       overflow: hidden;
 
       &.alert {
@@ -250,30 +242,33 @@ onUnmounted(() => {
       }
 
       .display-dialog-header {
+        grid-row: 1;
         display: flex;
         align-items: center;
+        gap: var(--display-dialog-header-gap, 1.2rem);
         padding: var(--display-dialog-header-padding, 1.2rem);
 
         &[data-theme] {
-          border-block-end: 0.2rem solid var(--theme-accent);
-
-          .display-dialog-close .icon {
-            color: var(--theme-accent);
-          }
+          border-block-end: 0.2rem solid var(--display-dialog-header-accent-color, var(--theme-accent));
         }
 
         .display-dialog-col-left {
           flex: 1;
+          min-inline-size: 0;
+          overflow-wrap: anywhere;
         }
 
         .display-dialog-col-right {
+          flex: none;
           margin-inline-start: auto;
 
-          .display-dialog-close {
-            background-color: transparent;
+          .display-dialog-close.input-button {
+            box-sizing: border-box;
             display: block flex;
             align-items: center;
             justify-content: center;
+            min-height: auto;
+            background-color: transparent;
             margin: var(--display-dialog-header-button-margin, 0);
             padding: var(--display-dialog-header-button-padding, 0.4rem);
             border: var(--display-dialog-header-button-border, 0.1rem solid transparent);
@@ -287,21 +282,31 @@ onUnmounted(() => {
             &:hover,
             &:focus-visible {
               cursor: pointer;
-              border: var(--_header-button-border-hover);
-              outline: var(--_header-button-outline-hover);
+              border: var(--display-dialog-header-button-border-hover, 0.1rem solid var(--colour-text-default));
+              outline: var(--display-dialog-header-button-outline-hover, 0.1rem solid var(--colour-text-default));
+            }
+
+            .input-button-icon {
+              margin: 0;
             }
 
             .icon {
-              color: var(--_header-button-icon-color);
+              color: var(--display-dialog-header-button-icon-color, var(--colour-text-default));
               display: block;
               font-size: var(--display-dialog-header-button-icon-size, 2.4rem);
+
+              .display-dialog-header[data-theme] & {
+                color: var(--display-dialog-header-accent-color, var(--theme-accent));
+              }
             }
           }
         }
       }
 
       .display-dialog-content {
+        grid-row: 2;
         overflow: hidden;
+        overflow-wrap: anywhere;
         padding: var(--display-dialog-content-padding, 1.2rem);
 
         &.allow-content-scroll {
@@ -313,7 +318,10 @@ onUnmounted(() => {
       }
 
       .display-dialog-footer {
+        grid-row: 3;
         display: flex;
+        flex-wrap: wrap;
+        overflow-wrap: anywhere;
         gap: var(--display-dialog-footer-gap, 1.2rem);
         justify-content: flex-end;
         padding: var(--display-dialog-footer-padding, 1.2rem);

package/app/components/01.atoms/display-dialog/stories/DisplayDialog.stories.ts

@@ -10,6 +10,9 @@ type StoryArgs = {
   theme: "" | "info" | "success" | "warning" | "error";
   closeIcon: string;
   closeLabel: string;
+  stressShowTitle?: boolean;
+  stressShowContent?: boolean;
+  stressFooterButtons?: number;
 };
 
 export default {
@@ -72,8 +75,9 @@ export default {
     docs: {
       description: {
         component:
-          "A dialog overlay with header, scrollable content, and footer action slots. Supports `dialog`, `confirm`, `alert`, `modal`, and `fullscreen` variants. The `alert` variant sets `role=alertdialog` and disables dismiss-on-outside-click and Escape.",
+          "A dialog overlay with header, scrollable content, and footer action slots. Supports `dialog`, `confirm`, `alert`, `modal`, and `fullscreen` variants. The `alert` variant sets `role=alertdialog` and disables dismiss-on-outside-click and Escape. Slots: `dialogTitle` (also names the dialog), `dialogContent`, `actionButtonLeft` and `actionButtonRight`. Open state is `v-model`; `closeLabel` and `closeIcon` set the header close button. With no `dialogTitle`, pass an `aria-label` (it falls through to the `<dialog>`). Every story renders in its own frame because the overlay is `position: fixed`.",
       },
+      story: { inline: false, height: "600px" },
     },
   },
 } as Meta<StoryArgs>;
@@ -200,3 +204,90 @@ ScrollableContent.parameters = {
     description: { story: "Content area scrolls independently when it overflows the fixed-height dialog panel." },
   },
 };
+
+const stressLabels = [
+  "Abbrechenundzurückzurübersicht",
+  "😀 Bestätigen",
+  "<b>not bold</b>",
+  "إلغاء العملية",
+  "OK",
+  "Änderungenspeichernundfortfahrenohnezuwarten",
+];
+
+export const StressTest: StoryFn<StoryArgs> = (args) => ({
+  components: { StorybookComponent },
+  setup() {
+    const open = ref(true);
+    return { args, open, stressLabels };
+  },
+  template: `
+    <div style="padding: 4rem; display: flex; justify-content: center;">
+      <button :style="'${triggerButtonStyles}'" @click="open = true">Open dialog</button>
+      <StorybookComponent
+        v-model="open"
+        :variant="args.variant"
+        :allow-content-scroll="args.allowContentScroll"
+        :justify-dialog="args.justifyDialog"
+        :align-dialog="args.alignDialog"
+        :theme="args.theme || undefined"
+        :close-icon="args.closeIcon"
+        :close-label="args.closeLabel"
+        :lock-viewport="false"
+        aria-label="Stress test dialog"
+        data-dialog-id="storybook-stress"
+      >
+        <template v-if="args.stressShowTitle" #dialogTitle>
+          <p style="margin: 0; font-weight: 700; font-size: 1.6rem;">😀 Bevorzugtekontaktmethodefürrückfragenundterminvereinbarungenbestätigen &lt;b&gt;not bold&lt;/b&gt; طريقة الاتصال المفضلة</p>
+        </template>
+        <template v-if="args.stressShowContent" #dialogContent>
+          <p style="margin: 0 0 1.2rem; line-height: 1.6;">https://example.invalid/a/very/long/unbroken/url/that/never/offers/a/break/opportunity/anywhere/in/its/path?query=withevenmoreunbrokentextandparameters</p>
+          <p style="margin: 0 0 1.2rem; line-height: 1.6;">Sind Sie sicher, dass Sie alle nicht gespeicherten Änderungen an Ihrem Profil, Ihren Benachrichtigungseinstellungen und Ihren gespeicherten Zahlungsmethoden unwiderruflich verwerfen möchten? Dieser Vorgang kann nicht rückgängig gemacht werden.</p>
+          <p dir="rtl" style="margin: 0 0 1.2rem; line-height: 1.6;">هل أنت متأكد أنك تريد تجاهل جميع التغييرات غير المحفوظة؟ لا يمكن التراجع عن هذا الإجراء.</p>
+          <p v-for="n in 12" :key="n" style="margin: 0 0 1.2rem; line-height: 1.6;">Paragraph {{ n }}: <b>&lt;script&gt;alert("x")&lt;/script&gt;</b> renders as text. Lorem ipsum odor amet, consectetuer adipiscing elit.</p>
+        </template>
+        <template v-if="args.stressFooterButtons" #actionButtonRight>
+          <button
+            v-for="label in stressLabels.slice(0, args.stressFooterButtons)"
+            :key="label"
+            :style="'${actionButtonStyles}'"
+            @click="open = false"
+          >{{ label }}</button>
+        </template>
+      </StorybookComponent>
+    </div>
+  `,
+});
+StressTest.storyName = "Stress Test (Worst-Case Data)";
+StressTest.args = {
+  variant: "modal",
+  closeLabel: "Dialogfensterschließenundzurückkehren 😀",
+  stressShowTitle: true,
+  stressShowContent: true,
+  stressFooterButtons: 6,
+};
+StressTest.argTypes = {
+  stressShowTitle: {
+    control: { type: "boolean" },
+    description: "Story-only: render the `dialogTitle` slot (off shows the close button alone in the header)",
+    table: { category: "Stress test (story-only)" },
+  },
+  stressShowContent: {
+    control: { type: "boolean" },
+    description: "Story-only: render the `dialogContent` slot",
+    table: { category: "Stress test (story-only)" },
+  },
+  stressFooterButtons: {
+    control: { type: "range", min: 0, max: 6, step: 1 },
+    description: "Story-only: number of footer buttons in `actionButtonRight` (0 omits the footer)",
+    table: { category: "Stress test (story-only)" },
+  },
+};
+StressTest.parameters = {
+  docs: {
+    story: { inline: false, height: "700px" },
+    description: {
+      story:
+        "Worst-case content, opened on load. A long unbroken title with emoji, HTML-like and right-to-left text, an unbroken URL, long German and Arabic copy, escaped markup that must render as text, and six footer buttons with unbroken labels. Switch `variant` through all five: the panel never exceeds the viewport, the close button stays in the header's top-right corner, the title and content wrap instead of widening the panel, the footer buttons wrap onto further rows and stay visible (content is clipped, or scrolls with `allowContentScroll`, rather than pushing the footer off-screen). Toggle the slots off one at a time: with no content the footer keeps its own row (at the bottom of the fixed-height `dialog` panel) instead of stretching into the middle one, and with nothing but the header the panel is just the close button.",
+    },
+  },
+};

package/app/components/01.atoms/display-dialog/tests/DisplayDialog.spec.ts

@@ -10,6 +10,19 @@ const { useAppConfigMock } = vi.hoisted(() => ({
 
 mockNuxtImport("useAppConfig", () => useAppConfigMock);
 
+const mounted: { unmount: () => void }[] = [];
+
+const mountDialog = async (options: Parameters<typeof mountSuspended<typeof DisplayDialog>>[1] = {}) => {
+  const wrapper = await mountSuspended(DisplayDialog, options);
+  mounted.push(wrapper);
+  return wrapper;
+};
+
+const unmountDialog = (wrapper: { unmount: () => void }) => {
+  mounted.splice(mounted.indexOf(wrapper), 1);
+  wrapper.unmount();
+};
+
 vi.mock("focus-trap-vue", () => ({
   FocusTrap: {
     name: "FocusTrap",
@@ -21,6 +34,8 @@ vi.mock("focus-trap-vue", () => ({
 
 describe("DisplayDialog", () => {
   afterEach(() => {
+    mounted.splice(0).forEach((wrapper) => wrapper.unmount());
+    vi.restoreAllMocks();
     document.body.classList.remove("lock");
     delete document.body.dataset.lockCount;
   });
@@ -28,7 +43,7 @@ describe("DisplayDialog", () => {
   // ─── Mount ────────────────────────────────────────────────────────────────
 
   it("mounts without error", async () => {
-    const wrapper = await mountSuspended(DisplayDialog, {
+    const wrapper = await mountDialog({
       props: { dataDialogId: "test" },
     });
     expect(wrapper.vm).toBeTruthy();
@@ -37,7 +52,7 @@ describe("DisplayDialog", () => {
   // ─── Snapshot ─────────────────────────────────────────────────────────────
 
   it("renders correct HTML structure with all slots", async () => {
-    const wrapper = await mountSuspended(DisplayDialog, {
+    const wrapper = await mountDialog({
       props: { dataDialogId: "test", modelValue: true },
       slots: {
         dialogTitle: "<p>Title</p>",
@@ -52,14 +67,14 @@ describe("DisplayDialog", () => {
   // ─── Root element ─────────────────────────────────────────────────────────
 
   it("renders as <dialog>", async () => {
-    const wrapper = await mountSuspended(DisplayDialog, {
+    const wrapper = await mountDialog({
       props: { dataDialogId: "test" },
     });
     expect(wrapper.element.tagName).toBe("DIALOG");
   });
 
   it("always has the display-dialog class", async () => {
-    const wrapper = await mountSuspended(DisplayDialog, {
+    const wrapper = await mountDialog({
       props: { dataDialogId: "test" },
     });
     expect(wrapper.classes()).toContain("display-dialog");
@@ -68,7 +83,7 @@ describe("DisplayDialog", () => {
   // ─── data-dialog-id ───────────────────────────────────────────────────────
 
   it("sets data-dialog-id attribute from prop", async () => {
-    const wrapper = await mountSuspended(DisplayDialog, {
+    const wrapper = await mountDialog({
       props: { dataDialogId: "my-dialog" },
     });
     expect(wrapper.attributes("data-dialog-id")).toBe("my-dialog");
@@ -77,14 +92,14 @@ describe("DisplayDialog", () => {
   // ─── open attribute ───────────────────────────────────────────────────────
 
   it("sets [open] attribute when modelValue is true", async () => {
-    const wrapper = await mountSuspended(DisplayDialog, {
+    const wrapper = await mountDialog({
       props: { dataDialogId: "test", modelValue: true },
     });
     expect(wrapper.attributes("open")).toBeDefined();
   });
 
   it("omits [open] attribute when modelValue is false", async () => {
-    const wrapper = await mountSuspended(DisplayDialog, {
+    const wrapper = await mountDialog({
       props: { dataDialogId: "test", modelValue: false },
     });
     expect(wrapper.attributes("open")).toBeUndefined();
@@ -93,7 +108,7 @@ describe("DisplayDialog", () => {
   // ─── role ─────────────────────────────────────────────────────────────────
 
   it("has no explicit role by default — implicit from <dialog> element", async () => {
-    const wrapper = await mountSuspended(DisplayDialog, {
+    const wrapper = await mountDialog({
       props: { dataDialogId: "test" },
     });
     expect(wrapper.attributes("role")).toBeUndefined();
@@ -102,7 +117,7 @@ describe("DisplayDialog", () => {
   it.each(["dialog", "modal", "confirm", "fullscreen"] as const)(
     "has no explicit role for variant='%s' — implicit from <dialog> element",
     async (variant) => {
-      const wrapper = await mountSuspended(DisplayDialog, {
+      const wrapper = await mountDialog({
         props: { dataDialogId: "test", variant },
       });
       expect(wrapper.attributes("role")).toBeUndefined();
@@ -110,7 +125,7 @@ describe("DisplayDialog", () => {
   );
 
   it("has role='alertdialog' for variant='alert'", async () => {
-    const wrapper = await mountSuspended(DisplayDialog, {
+    const wrapper = await mountDialog({
       props: { dataDialogId: "test", variant: "alert" },
     });
     expect(wrapper.attributes("role")).toBe("alertdialog");
@@ -119,7 +134,7 @@ describe("DisplayDialog", () => {
   // ─── Variant class on .display-dialog-inner ──────────────────────────────────────────────
 
   it("applies 'dialog' class to .display-dialog-inner by default", async () => {
-    const wrapper = await mountSuspended(DisplayDialog, {
+    const wrapper = await mountDialog({
       props: { dataDialogId: "test" },
     });
     expect(wrapper.find(".display-dialog-inner").classes()).toContain("dialog");
@@ -128,7 +143,7 @@ describe("DisplayDialog", () => {
   it.each(["dialog", "modal", "confirm", "alert", "fullscreen"] as const)(
     "applies '%s' class to .display-dialog-inner",
     async (variant) => {
-      const wrapper = await mountSuspended(DisplayDialog, {
+      const wrapper = await mountDialog({
         props: { dataDialogId: "test", variant },
       });
       expect(wrapper.find(".display-dialog-inner").classes()).toContain(variant);
@@ -138,7 +153,7 @@ describe("DisplayDialog", () => {
   // ─── Slots ────────────────────────────────────────────────────────────────
 
   it("renders dialogTitle slot in .display-dialog-col-left", async () => {
-    const wrapper = await mountSuspended(DisplayDialog, {
+    const wrapper = await mountDialog({
       props: { dataDialogId: "test" },
       slots: { dialogTitle: "<p>My Title</p>" },
     });
@@ -146,14 +161,14 @@ describe("DisplayDialog", () => {
   });
 
   it("omits .display-dialog-col-left when dialogTitle slot is not provided", async () => {
-    const wrapper = await mountSuspended(DisplayDialog, {
+    const wrapper = await mountDialog({
       props: { dataDialogId: "test" },
     });
     expect(wrapper.find(".display-dialog-col-left").exists()).toBe(false);
   });
 
   it("renders dialogContent slot in .display-dialog-content", async () => {
-    const wrapper = await mountSuspended(DisplayDialog, {
+    const wrapper = await mountDialog({
       props: { dataDialogId: "test" },
       slots: { dialogContent: "<p>Content</p>" },
     });
@@ -161,14 +176,14 @@ describe("DisplayDialog", () => {
   });
 
   it("omits .display-dialog-content when dialogContent slot is not provided", async () => {
-    const wrapper = await mountSuspended(DisplayDialog, {
+    const wrapper = await mountDialog({
       props: { dataDialogId: "test" },
     });
     expect(wrapper.find(".display-dialog-content").exists()).toBe(false);
   });
 
   it("renders .display-dialog-footer when actionButtonLeft slot is provided", async () => {
-    const wrapper = await mountSuspended(DisplayDialog, {
+    const wrapper = await mountDialog({
       props: { dataDialogId: "test" },
       slots: { actionButtonLeft: "<button>Cancel</button>" },
     });
@@ -176,7 +191,7 @@ describe("DisplayDialog", () => {
   });
 
   it("renders .display-dialog-footer when actionButtonRight slot is provided", async () => {
-    const wrapper = await mountSuspended(DisplayDialog, {
+    const wrapper = await mountDialog({
       props: { dataDialogId: "test" },
       slots: { actionButtonRight: "<button>Confirm</button>" },
     });
@@ -184,14 +199,14 @@ describe("DisplayDialog", () => {
   });
 
   it("omits .display-dialog-footer when neither action button slot is provided", async () => {
-    const wrapper = await mountSuspended(DisplayDialog, {
+    const wrapper = await mountDialog({
       props: { dataDialogId: "test" },
     });
     expect(wrapper.find(".display-dialog-footer").exists()).toBe(false);
   });
 
   it("renders both action button slots inside .display-dialog-footer", async () => {
-    const wrapper = await mountSuspended(DisplayDialog, {
+    const wrapper = await mountDialog({
       props: { dataDialogId: "test" },
       slots: {
         actionButtonLeft: "<button>Cancel</button>",
@@ -205,7 +220,7 @@ describe("DisplayDialog", () => {
   // ─── allowContentScroll ───────────────────────────────────────────────────
 
   it("does not apply allow-content-scroll class by default", async () => {
-    const wrapper = await mountSuspended(DisplayDialog, {
+    const wrapper = await mountDialog({
       props: { dataDialogId: "test" },
       slots: { dialogContent: "<p>Content</p>" },
     });
@@ -213,7 +228,7 @@ describe("DisplayDialog", () => {
   });
 
   it("applies allow-content-scroll class when allowContentScroll=true", async () => {
-    const wrapper = await mountSuspended(DisplayDialog, {
+    const wrapper = await mountDialog({
       props: { dataDialogId: "test", allowContentScroll: true },
       slots: { dialogContent: "<p>Content</p>" },
     });
@@ -223,7 +238,7 @@ describe("DisplayDialog", () => {
   // ─── Close button ─────────────────────────────────────────────────────────
 
   it("close button emits update:modelValue=false", async () => {
-    const wrapper = await mountSuspended(DisplayDialog, {
+    const wrapper = await mountDialog({
       props: { dataDialogId: "test", modelValue: true },
     });
     await wrapper.find('[data-test-id="display-dialog-header-close"]').trigger("click");
@@ -231,26 +246,57 @@ describe("DisplayDialog", () => {
   });
 
   it("uses \"Close\" as the close button's screen-reader label by default", async () => {
-    const wrapper = await mountSuspended(DisplayDialog, { props: { dataDialogId: "test" } });
+    const wrapper = await mountDialog({ props: { dataDialogId: "test" } });
     expect(wrapper.find(".display-dialog-close .sr-only").text()).toBe("Close");
   });
 
   it("uses the closeLabel prop for the close button's screen-reader label", async () => {
-    const wrapper = await mountSuspended(DisplayDialog, { props: { dataDialogId: "test", closeLabel: "Fermer" } });
+    const wrapper = await mountDialog({ props: { dataDialogId: "test", closeLabel: "Fermer" } });
     expect(wrapper.find(".display-dialog-close .sr-only").text()).toBe("Fermer");
   });
 
+  it("renders the close button as an icon-only InputButton of type button", async () => {
+    const wrapper = await mountDialog({ props: { dataDialogId: "test" } });
+    const close = wrapper.find('[data-test-id="display-dialog-header-close"]');
+    expect(close.element.tagName).toBe("BUTTON");
+    expect(close.classes()).toEqual(expect.arrayContaining(["input-button", "display-dialog-close"]));
+    expect(close.attributes("type")).toBe("button");
+    expect(close.attributes("data-icon-only")).toBeDefined();
+    expect(close.find(".icon").attributes("aria-hidden")).toBe("true");
+  });
+
+  // ─── Accessible name ──────────────────────────────────────────────────────
+
+  it("labels the dialog by its title when dialogTitle is provided", async () => {
+    const wrapper = await mountDialog({
+      props: { dataDialogId: "test" },
+      slots: { dialogTitle: "<p>My Title</p>" },
+    });
+    const titleId = wrapper.find(".display-dialog-col-left").attributes("id");
+    expect(titleId).toBeTruthy();
+    expect(wrapper.attributes("aria-labelledby")).toBe(titleId);
+  });
+
+  it("passes a consumer aria-label through to the <dialog> when there is no title", async () => {
+    const wrapper = await mountDialog({
+      props: { dataDialogId: "test" },
+      attrs: { "aria-label": "Settings" },
+    });
+    expect(wrapper.attributes("aria-labelledby")).toBeUndefined();
+    expect(wrapper.attributes("aria-label")).toBe("Settings");
+  });
+
   // ─── styleClassPassthrough ────────────────────────────────────────────────
 
   it("applies a styleClassPassthrough string", async () => {
-    const wrapper = await mountSuspended(DisplayDialog, {
+    const wrapper = await mountDialog({
       props: { dataDialogId: "test", styleClassPassthrough: "my-class" },
     });
     expect(wrapper.classes()).toContain("my-class");
   });
 
   it("updates classes when styleClassPassthrough changes", async () => {
-    const wrapper = await mountSuspended(DisplayDialog, {
+    const wrapper = await mountDialog({
       props: { dataDialogId: "test", styleClassPassthrough: ["original"] },
     });
     await wrapper.setProps({ styleClassPassthrough: ["updated"] });
@@ -259,7 +305,7 @@ describe("DisplayDialog", () => {
   });
 
   it("applies multiple styleClassPassthrough classes from an array", async () => {
-    const wrapper = await mountSuspended(DisplayDialog, {
+    const wrapper = await mountDialog({
       props: { dataDialogId: "test", styleClassPassthrough: ["class-a", "class-b"] },
     });
     expect(wrapper.classes()).toContain("class-a");
@@ -269,40 +315,40 @@ describe("DisplayDialog", () => {
   // ─── Body viewport lock ───────────────────────────────────────────────────
 
   it("adds lock class to body on mount when lockViewport=true", async () => {
-    const wrapper = await mountSuspended(DisplayDialog, {
+    const wrapper = await mountDialog({
       props: { dataDialogId: "test", lockViewport: true },
     });
     expect(document.body.classList.contains("lock")).toBe(true);
-    wrapper.unmount();
+    unmountDialog(wrapper);
   });
 
   it("does not add lock class to body when lockViewport=false", async () => {
-    await mountSuspended(DisplayDialog, {
+    await mountDialog({
       props: { dataDialogId: "test", lockViewport: false },
     });
     expect(document.body.classList.contains("lock")).toBe(false);
   });
 
   it("removes lock class from body on unmount when lockViewport=true", async () => {
-    const wrapper = await mountSuspended(DisplayDialog, {
+    const wrapper = await mountDialog({
       props: { dataDialogId: "test", lockViewport: true },
     });
     expect(document.body.classList.contains("lock")).toBe(true);
-    wrapper.unmount();
+    unmountDialog(wrapper);
     expect(document.body.classList.contains("lock")).toBe(false);
   });
 
   it("does not remove lock when a second locking dialog is still open", async () => {
-    const wrapper1 = await mountSuspended(DisplayDialog, {
+    const wrapper1 = await mountDialog({
       props: { dataDialogId: "a", lockViewport: true },
     });
-    const wrapper2 = await mountSuspended(DisplayDialog, {
+    const wrapper2 = await mountDialog({
       props: { dataDialogId: "b", lockViewport: true },
     });
     expect(document.body.classList.contains("lock")).toBe(true);
-    wrapper2.unmount();
+    unmountDialog(wrapper2);
     expect(document.body.classList.contains("lock")).toBe(true);
-    wrapper1.unmount();
+    unmountDialog(wrapper1);
     expect(document.body.classList.contains("lock")).toBe(false);
   });
 
@@ -327,7 +373,7 @@ describe("DisplayDialog", () => {
         .find((c: string) => c !== "iconify" && c !== "icon") ?? "";
 
     it("uses hardcoded fallbacks when app.config has no displayDialog key", async () => {
-      const wrapper = await mountSuspended(DisplayDialog, {
+      const wrapper = await mountDialog({
         props: { dataDialogId: "test" },
         slots: { dialogContent: "<p>Content</p>" },
       });
@@ -356,7 +402,7 @@ describe("DisplayDialog", () => {
           },
         },
       });
-      const wrapper = await mountSuspended(DisplayDialog, {
+      const wrapper = await mountDialog({
         props: { dataDialogId: "test" },
         slots: { dialogContent: "<p>Content</p>" },
       });
@@ -385,7 +431,7 @@ describe("DisplayDialog", () => {
           },
         },
       });
-      const wrapper = await mountSuspended(DisplayDialog, {
+      const wrapper = await mountDialog({
         props: {
           dataDialogId: "test",
           variant: "fullscreen",
@@ -412,7 +458,7 @@ describe("DisplayDialog", () => {
         icon: {},
         srcdev: { displayDialog: { lockViewport: false } },
       });
-      await mountSuspended(DisplayDialog, { props: { dataDialogId: "test" } });
+      await mountDialog({ props: { dataDialogId: "test" } });
       expect(document.body.classList.contains("lock")).toBe(false);
     });
   });

package/app/components/01.atoms/display-dialog/tests/__snapshots__/DisplayDialog.spec.ts.snap

@@ -7,7 +7,11 @@ exports[`DisplayDialog > renders correct HTML structure with all slots 1`] = `
       <div id="v-0-0" class="display-dialog-col-left">
         <p>Title</p>
       </div>
-      <div class="display-dialog-col-right"><button data-test-id="display-dialog-header-close" class="display-dialog-close"><span class="iconify undefinedbitcoin-icons:cross-filled icon"></span><span class="sr-only">Close</span></button></div>
+      <div class="display-dialog-col-right"><button type="button" data-testid="input-button" data-theme="default" data-variant="inline" data-icon-only="" class="input-button display-dialog-close" data-test-id="display-dialog-header-close">
+          <!--v-if-->
+          <!--v-if--><span class="input-button-text sr-only">Close</span>
+          <!--v-if--><span class="input-button-icon" data-slot="icon-only"><span class="iconify undefinedbitcoin-icons:cross-filled icon" aria-hidden="true"></span></span>
+        </button></div>
     </div>
     <div class="display-dialog-content">
       <p>Content</p>