srcdev-nuxt-components 9.5.7 → 9.6.1

package/app/components/02.molecules/toast/stories/DisplayToastProvider.stories.ts

@@ -140,3 +140,76 @@ FullWidth.args = {
   theme: "warning",
   autoDismiss: false,
 };
+
+const longUnbroken = "Donaudampfschifffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft";
+
+const stressToasts = [
+  {
+    theme: "error" as const,
+    title: "Ihre Zahlung konnte leider nicht verarbeitet werden, bitte überprüfen Sie Ihre Kartendaten",
+    description:
+      "Die Bank hat die Transaktion abgelehnt. Bitte versuchen Sie es mit einer anderen Zahlungsmethode erneut oder wenden Sie sich an Ihre Bank, um weitere Informationen zu erhalten. ".repeat(
+        2
+      ),
+  },
+  { theme: "warning" as const, title: longUnbroken, description: "https://example.com/" + "a-long-path-segment".repeat(6) },
+  { theme: "success" as const, title: "🎉 Emoji first", description: "<b>Not bold</b> <script>alert('x')</script>" },
+  { theme: "info" as const, title: "تم حفظ التغييرات بنجاح", description: "نص عربي طويل من اليمين إلى اليسار للتحقق من الاتجاه" },
+  { theme: "info" as const, title: "A", description: "" },
+  { theme: "info" as const, title: "", description: "Description only, no title." },
+];
+
+export const StressTest: StoryFn<StoryArgs> = (args) => ({
+  components: { DisplayToastProvider },
+  setup() {
+    const { show, clear } = useToastQueue();
+    const queueStress = () => {
+      stressToasts.forEach(({ theme, title, description }) => {
+        show({
+          appearance: { theme },
+          behavior: { autoDismiss: args.autoDismiss, duration: args.duration },
+          content: { title, description, dismissLabel: "Benachrichtigung schließen" },
+        });
+      });
+    };
+    const flood = () => {
+      for (let index = 1; index <= 20; index++) {
+        show({ behavior: { autoDismiss: true, duration: 1500 }, content: { title: `Toast ${index} of 20` } });
+      }
+    };
+    return { args, queueStress, flood, clear };
+  },
+  template: `
+    <div style="padding: 2rem; min-height: 200px;">
+      <div style="display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem;">
+        <button @click="queueStress" style="padding: 0.6rem 1.4rem; cursor: pointer; border: 1px solid #ccc; border-radius: 4px;">Queue worst-case toasts</button>
+        <button @click="flood" style="padding: 0.6rem 1.4rem; cursor: pointer; border: 1px solid #ccc; border-radius: 4px;">Flood 20 toasts</button>
+        <button @click="clear" style="padding: 0.6rem 1.4rem; cursor: pointer; border: 1px solid #ccc; border-radius: 4px;">Clear Queue</button>
+      </div>
+      <DisplayToastProvider
+        :position="args.position"
+        :alignment="args.alignment"
+        :full-width="args.fullWidth"
+        :max-visible="args.maxVisible"
+      />
+    </div>
+  `,
+});
+StressTest.storyName = "Stress Test (Worst-Case Data)";
+StressTest.args = {
+  maxVisible: 5,
+  autoDismiss: true,
+  duration: 8000,
+};
+StressTest.parameters = {
+  docs: {
+    description: {
+      story:
+        "Hostile toast content: long German copy, an unbroken word as the title, a long URL, emoji first, HTML-like text " +
+        "(must render as text), RTL, a one-character title, empty title and empty description, plus a flood of 20 queued toasts. " +
+        "Toasts are fixed to the viewport, so use Storybook's viewport toolbar (not a canvas width) to check narrow screens. " +
+        "Check that every toast stays inside the viewport and caps at 48rem on wide screens, unbroken text wraps, hovering a toast " +
+        "or tabbing into it freezes its progress bar and timer, and the flood drains in order without stacking past maxVisible.",
+    },
+  },
+};

package/app/components/02.molecules/toast/tests/DisplayToast.spec.ts

@@ -10,6 +10,9 @@ const { useAppConfigMock } = vi.hoisted(() => ({
 
 mockNuxtImport("useAppConfig", () => useAppConfigMock);
 
+const mounted: { unmount: () => void }[] = [];
+let focusVisibleSpy: { mockRestore: () => void } | null = null;
+
 // Helper: mount the toast and activate it so the teleported element is in the DOM.
 async function mountAndShow(props: Record<string, unknown> = {}, slots: Record<string, string> = {}) {
   const { config, styleClassPassthrough, ...rest } = props;
@@ -17,6 +20,7 @@ async function mountAndShow(props: Record<string, unknown> = {}, slots: Record<s
     props: { config, styleClassPassthrough } as Record<string, unknown>,
     slots,
   });
+  mounted.push(wrapper);
   await wrapper.setProps({ ...rest, modelValue: true });
   await nextTick();
   return wrapper;
@@ -27,7 +31,11 @@ function toast() {
 }
 
 describe("DisplayToast", () => {
+  // Unmount first: a leftover toast's pending timers would otherwise re-render into the cleared body.
   afterEach(() => {
+    mounted.splice(0).forEach((wrapper) => wrapper.unmount());
+    focusVisibleSpy?.mockRestore();
+    focusVisibleSpy = null;
     document.body.innerHTML = "";
   });
 
@@ -50,9 +58,9 @@ describe("DisplayToast", () => {
     expect(toast()).not.toBeNull();
   });
 
-  it("has the show class when activated", async () => {
+  it("has data-state='show' when activated", async () => {
     await mountAndShow();
-    expect(toast()!.classList).toContain("show");
+    expect(toast()!.getAttribute("data-state")).toBe("show");
   });
 
   // ─── data-theme ───────────────────────────────────────────────────────────
@@ -83,26 +91,28 @@ describe("DisplayToast", () => {
     expect(toast()!.getAttribute("aria-live")).toBe(live);
   });
 
-  // ─── Position classes ─────────────────────────────────────────────────────
+  // ─── Position hooks ───────────────────────────────────────────────────────
 
-  it.each(["top", "bottom"] as const)("applies %s position class", async (position) => {
+  it.each(["top", "bottom"] as const)("sets data-position='%s'", async (position) => {
     await mountAndShow({ config: { appearance: { position } } });
-    expect(toast()!.classList).toContain(position);
+    expect(toast()!.getAttribute("data-position")).toBe(position);
   });
 
-  it.each(["left", "center", "right"] as const)("applies %s alignment class", async (alignment) => {
+  it.each(["left", "center", "right"] as const)("sets data-alignment='%s'", async (alignment) => {
     await mountAndShow({ config: { appearance: { alignment } } });
-    expect(toast()!.classList).toContain(alignment);
+    expect(toast()!.getAttribute("data-alignment")).toBe(alignment);
   });
 
-  it("applies full-width class when fullWidth is true", async () => {
-    await mountAndShow({ config: { appearance: { fullWidth: true } } });
-    expect(toast()!.classList).toContain("full-width");
+  it("sets data-alignment='full-width' when fullWidth is true, overriding alignment", async () => {
+    await mountAndShow({ config: { appearance: { fullWidth: true, alignment: "left" } } });
+    expect(toast()!.getAttribute("data-alignment")).toBe("full-width");
   });
 
-  it("does not apply alignment class when fullWidth is true", async () => {
-    await mountAndShow({ config: { appearance: { fullWidth: true, alignment: "left" } } });
-    expect(toast()!.classList).not.toContain("left");
+  it("adds no generic position or state classes a consumer's CSS could match", async () => {
+    await mountAndShow({ config: { appearance: { position: "top", alignment: "center" } } });
+    for (const name of ["top", "bottom", "left", "center", "right", "show", "hide", "full-width"]) {
+      expect(toast()!.classList).not.toContain(name);
+    }
   });
 
   // ─── tabindex / aria-describedby ──────────────────────────────────────────
@@ -194,7 +204,7 @@ describe("DisplayToast", () => {
     await nextTick();
     toast()!.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true }));
     await nextTick();
-    expect(toast()!.classList).toContain("hide");
+    expect(toast()!.getAttribute("data-state")).toBe("hide");
   });
 
   // ─── Dismiss via close button ─────────────────────────────────────────────
@@ -205,7 +215,111 @@ describe("DisplayToast", () => {
     await nextTick();
     (document.querySelector("[data-test-id='alert-dismiss']") as HTMLElement).click();
     await nextTick();
-    expect(toast()!.classList).toContain("hide");
+    expect(toast()!.getAttribute("data-state")).toBe("hide");
+  });
+
+  // ─── Dismiss label ────────────────────────────────────────────────────────
+
+  it("passes config.content.dismissLabel to the close button's screen-reader text", async () => {
+    await mountAndShow({ config: { behavior: { autoDismiss: false }, content: { dismissLabel: "Schließen" } } });
+    expect(document.querySelector("[data-test-id='alert-dismiss']")!.textContent).toContain("Schließen");
+  });
+
+  // ─── Auto-dismiss pause ──────────────────────────────────────────────────
+
+  const autoConfig = { behavior: { autoDismiss: true, duration: 1000 } };
+
+  // jsdom matches :focus-visible whenever an element is focused; real browsers only do after keyboard input.
+  const originalMatches = Element.prototype.matches;
+  function setFocusVisible(keyboard: boolean) {
+    const spy = vi.spyOn(Element.prototype, "matches");
+    spy.mockImplementation(function (this: Element, selector: string) {
+      return selector === ":focus-visible" ? keyboard : originalMatches.call(this, selector);
+    });
+    focusVisibleSpy = spy;
+  }
+
+  it("auto-dismisses after the duration", async () => {
+    await mountAndShow({ config: autoConfig });
+    vi.advanceTimersByTime(1000);
+    await nextTick();
+    expect(toast()!.getAttribute("data-state")).toBe("hide");
+  });
+
+  it("pauses auto-dismiss while hovered and resumes with the remaining time", async () => {
+    setFocusVisible(false);
+    await mountAndShow({ config: autoConfig });
+    vi.advanceTimersByTime(400);
+    toast()!.dispatchEvent(new Event("pointerenter"));
+    await nextTick();
+    expect(toast()!.hasAttribute("data-paused")).toBe(true);
+    vi.advanceTimersByTime(5000);
+    await nextTick();
+    expect(toast()!.getAttribute("data-state")).toBe("show");
+    toast()!.dispatchEvent(new Event("pointerleave"));
+    await nextTick();
+    expect(toast()!.hasAttribute("data-paused")).toBe(false);
+    vi.advanceTimersByTime(599);
+    await nextTick();
+    expect(toast()!.getAttribute("data-state")).toBe("show");
+    vi.advanceTimersByTime(1);
+    await nextTick();
+    expect(toast()!.getAttribute("data-state")).toBe("hide");
+  });
+
+  it("pauses while focus is on something inside the toast", async () => {
+    await mountAndShow({ config: autoConfig }, { default: "<a href='#' class='inner-link'>Undo</a>" });
+    const link = document.querySelector(".inner-link") as HTMLElement;
+    link.dispatchEvent(new FocusEvent("focusin", { bubbles: true }));
+    await nextTick();
+    vi.advanceTimersByTime(5000);
+    await nextTick();
+    expect(toast()!.getAttribute("data-state")).toBe("show");
+    link.dispatchEvent(new FocusEvent("focusout", { bubbles: true, relatedTarget: null }));
+    await nextTick();
+    vi.advanceTimersByTime(1000);
+    await nextTick();
+    expect(toast()!.getAttribute("data-state")).toBe("hide");
+  });
+
+  it("does not pause when the toast takes focus after mouse input", async () => {
+    setFocusVisible(false);
+    await mountAndShow({ config: autoConfig });
+    vi.advanceTimersByTime(100); // the toast focuses itself
+    await nextTick();
+    expect(document.activeElement).toBe(toast());
+    expect(toast()!.hasAttribute("data-paused")).toBe(false);
+    vi.advanceTimersByTime(900);
+    await nextTick();
+    expect(toast()!.getAttribute("data-state")).toBe("hide");
+  });
+
+  it("pauses when the toast takes focus after keyboard input, until focus leaves", async () => {
+    setFocusVisible(true);
+    await mountAndShow({ config: autoConfig });
+    vi.advanceTimersByTime(100);
+    await nextTick();
+    expect(toast()!.hasAttribute("data-paused")).toBe(true);
+    vi.advanceTimersByTime(5000);
+    await nextTick();
+    expect(toast()!.getAttribute("data-state")).toBe("show");
+    (toast() as HTMLElement).blur();
+    await nextTick();
+    vi.advanceTimersByTime(900);
+    await nextTick();
+    expect(toast()!.getAttribute("data-state")).toBe("hide");
+  });
+
+  it("does not let an earlier show's timer dismiss a toast re-shown after a manual dismiss", async () => {
+    const wrapper = await mountAndShow({ config: autoConfig });
+    await wrapper.setProps({ modelValue: false });
+    vi.advanceTimersByTime(550);
+    await nextTick();
+    await wrapper.setProps({ modelValue: true });
+    await nextTick();
+    vi.advanceTimersByTime(600);
+    await nextTick();
+    expect(toast()!.getAttribute("data-state")).toBe("show");
   });
 
   // ─── styleClassPassthrough ────────────────────────────────────────────────
@@ -236,8 +350,8 @@ describe("DisplayToast", () => {
     it("uses hardcoded fallbacks when app.config has no displayToast key", async () => {
       await mountAndShow();
       expect(toast()!.getAttribute("data-theme")).toBe("info");
-      expect(toast()!.classList).toContain("top");
-      expect(toast()!.classList).toContain("right");
+      expect(toast()!.getAttribute("data-position")).toBe("top");
+      expect(toast()!.getAttribute("data-alignment")).toBe("right");
       expect(document.querySelector(".display-toast-progress")).not.toBeNull();
     });
 
@@ -260,7 +374,7 @@ describe("DisplayToast", () => {
       }));
       await mountAndShow({ config: { appearance: { theme: "warning", position: "top" } } });
       expect(toast()!.getAttribute("data-theme")).toBe("warning");
-      expect(toast()!.classList).toContain("top");
+      expect(toast()!.getAttribute("data-position")).toBe("top");
     });
   });
 });

package/app/components/02.molecules/toast/tests/DisplayToastProvider.spec.ts

@@ -4,6 +4,15 @@ import { mountSuspended } from "@nuxt/test-utils/runtime";
 import DisplayToastProvider from "../DisplayToastProvider.vue";
 import { useToastQueue } from "~/composables/useToastQueue";
 
+const mounted: { unmount: () => void }[] = [];
+
+// Every provider shares the global queue, so a leftover one from an earlier test would run its own timers.
+async function mountProvider(...args: Parameters<typeof mountSuspended<typeof DisplayToastProvider>>) {
+  const wrapper = await mountSuspended(...args);
+  mounted.push(wrapper);
+  return wrapper;
+}
+
 function item() {
   return document.querySelector(".display-toast-provider-item");
 }
@@ -24,6 +33,7 @@ describe("DisplayToastProvider", () => {
   });
 
   afterEach(() => {
+    mounted.splice(0).forEach((wrapper) => wrapper.unmount());
     clear();
     document.body.innerHTML = "";
   });
@@ -31,47 +41,47 @@ describe("DisplayToastProvider", () => {
   // ─── Mount ────────────────────────────────────────────────────────────────
 
   it("mounts without error", async () => {
-    const wrapper = await mountSuspended(DisplayToastProvider);
+    const wrapper = await mountProvider(DisplayToastProvider);
     expect(wrapper.vm).toBeTruthy();
   });
 
   it("renders the provider container", async () => {
-    await mountSuspended(DisplayToastProvider);
+    await mountProvider(DisplayToastProvider);
     expect(provider()).not.toBeNull();
   });
 
   // ─── Empty state ──────────────────────────────────────────────────────────
 
   it("renders no items when queue is empty", async () => {
-    await mountSuspended(DisplayToastProvider);
+    await mountProvider(DisplayToastProvider);
     expect(items().length).toBe(0);
   });
 
   // ─── Show / queue ─────────────────────────────────────────────────────────
 
   it("promotes a pending entry to visible on show()", async () => {
-    await mountSuspended(DisplayToastProvider);
+    await mountProvider(DisplayToastProvider);
     show({ content: { text: "Hello" } });
     await nextTick();
     expect(items().length).toBe(1);
   });
 
   it("renders the toast message text", async () => {
-    await mountSuspended(DisplayToastProvider);
+    await mountProvider(DisplayToastProvider);
     show({ content: { text: "Toast message" } });
     await nextTick();
     expect(document.querySelector(".alert-content-body")!.textContent).toContain("Toast message");
   });
 
   it("renders the toast title", async () => {
-    await mountSuspended(DisplayToastProvider);
+    await mountProvider(DisplayToastProvider);
     show({ content: { title: "My Title" } });
     await nextTick();
     expect(document.querySelector("[data-test-id='alert-title']")!.textContent).toContain("My Title");
   });
 
   it("renders the toast description", async () => {
-    await mountSuspended(DisplayToastProvider);
+    await mountProvider(DisplayToastProvider);
     show({ content: { description: "My description" } });
     await nextTick();
     expect(document.querySelector("[data-test-id='alert-content']")!.textContent).toContain("My description");
@@ -82,7 +92,7 @@ describe("DisplayToastProvider", () => {
   it.each(["info", "success", "warning", "error"] as const)(
     "sets data-theme='%s' from config",
     async (theme) => {
-      await mountSuspended(DisplayToastProvider);
+      await mountProvider(DisplayToastProvider);
       show({ appearance: { theme } });
       await nextTick();
       expect(item()!.getAttribute("data-theme")).toBe(theme);
@@ -90,7 +100,7 @@ describe("DisplayToastProvider", () => {
   );
 
   it("defaults to data-theme='info'", async () => {
-    await mountSuspended(DisplayToastProvider);
+    await mountProvider(DisplayToastProvider);
     show({});
     await nextTick();
     expect(item()!.getAttribute("data-theme")).toBe("info");
@@ -104,7 +114,7 @@ describe("DisplayToastProvider", () => {
     { theme: "warning" as const, role: "alert", live: "assertive" },
     { theme: "error" as const, role: "alert", live: "assertive" },
   ])("sets role=$role and aria-live=$live for theme='$theme'", async ({ theme, role, live }) => {
-    await mountSuspended(DisplayToastProvider);
+    await mountProvider(DisplayToastProvider);
     show({ appearance: { theme } });
     await nextTick();
     expect(item()!.getAttribute("role")).toBe(role);
@@ -112,48 +122,56 @@ describe("DisplayToastProvider", () => {
   });
 
   it("sets aria-describedby on each item", async () => {
-    await mountSuspended(DisplayToastProvider);
+    await mountProvider(DisplayToastProvider);
     show({});
     await nextTick();
     expect(item()!.getAttribute("aria-describedby")).not.toBeNull();
   });
 
   it("sets tabindex='0' on each item", async () => {
-    await mountSuspended(DisplayToastProvider);
+    await mountProvider(DisplayToastProvider);
     show({});
     await nextTick();
     expect(item()!.getAttribute("tabindex")).toBe("0");
   });
 
-  // ─── Position / alignment classes ────────────────────────────────────────
+  // ─── Position / alignment hooks ──────────────────────────────────────────
 
-  it.each(["top", "bottom"] as const)("applies %s class to provider", async (position) => {
-    await mountSuspended(DisplayToastProvider, { props: { position } });
-    expect(provider()!.classList).toContain(position);
+  it.each(["top", "bottom"] as const)("sets data-position='%s' on the provider", async (position) => {
+    await mountProvider(DisplayToastProvider, { props: { position } });
+    expect(provider()!.getAttribute("data-position")).toBe(position);
   });
 
-  it.each(["left", "center", "right"] as const)(
-    "applies %s alignment class to provider",
-    async (alignment) => {
-      await mountSuspended(DisplayToastProvider, { props: { alignment } });
-      expect(provider()!.classList).toContain(alignment);
-    }
-  );
+  it.each(["left", "center", "right"] as const)("sets data-alignment='%s' on the provider", async (alignment) => {
+    await mountProvider(DisplayToastProvider, { props: { alignment } });
+    expect(provider()!.getAttribute("data-alignment")).toBe(alignment);
+  });
+
+  it("sets data-alignment='full-width' when fullWidth is true, overriding alignment", async () => {
+    await mountProvider(DisplayToastProvider, { props: { fullWidth: true, alignment: "left" } });
+    expect(provider()!.getAttribute("data-alignment")).toBe("full-width");
+  });
 
-  it("applies full-width class when fullWidth is true", async () => {
-    await mountSuspended(DisplayToastProvider, { props: { fullWidth: true } });
-    expect(provider()!.classList).toContain("full-width");
+  it("adds no generic position classes a consumer's CSS could match", async () => {
+    await mountProvider(DisplayToastProvider, { props: { position: "top", alignment: "center" } });
+    for (const name of ["top", "bottom", "left", "center", "right", "full-width"]) {
+      expect(provider()!.classList).not.toContain(name);
+    }
   });
 
-  it("does not apply alignment class when fullWidth is true", async () => {
-    await mountSuspended(DisplayToastProvider, { props: { fullWidth: true, alignment: "left" } });
-    expect(provider()!.classList).not.toContain("left");
+  // ─── Dismiss label ────────────────────────────────────────────────────────
+
+  it("passes config.content.dismissLabel to the close button's screen-reader text", async () => {
+    await mountProvider(DisplayToastProvider);
+    show({ behavior: { autoDismiss: false }, content: { text: "Saved", dismissLabel: "Fermer" } });
+    await nextTick();
+    expect(document.querySelector("[data-test-id='alert-dismiss']")!.textContent).toContain("Fermer");
   });
 
   // ─── maxVisible ───────────────────────────────────────────────────────────
 
   it("shows only one item at a time when maxVisible=1", async () => {
-    await mountSuspended(DisplayToastProvider, { props: { maxVisible: 1 } });
+    await mountProvider(DisplayToastProvider, { props: { maxVisible: 1 } });
     show({ content: { text: "First" } });
     show({ content: { text: "Second" } });
     await nextTick();
@@ -162,7 +180,7 @@ describe("DisplayToastProvider", () => {
   });
 
   it("shows up to maxVisible items simultaneously", async () => {
-    await mountSuspended(DisplayToastProvider, { props: { maxVisible: 2 } });
+    await mountProvider(DisplayToastProvider, { props: { maxVisible: 2 } });
     show({ content: { text: "First" } });
     show({ content: { text: "Second" } });
     show({ content: { text: "Third" } });
@@ -173,7 +191,7 @@ describe("DisplayToastProvider", () => {
   // ─── Dismiss ──────────────────────────────────────────────────────────────
 
   it("removes item when close button is clicked", async () => {
-    await mountSuspended(DisplayToastProvider);
+    await mountProvider(DisplayToastProvider);
     show({ behavior: { autoDismiss: false } });
     await nextTick();
     (document.querySelector("[data-test-id='alert-dismiss']") as HTMLElement).click();
@@ -182,7 +200,7 @@ describe("DisplayToastProvider", () => {
   });
 
   it("removes item when Escape is pressed", async () => {
-    await mountSuspended(DisplayToastProvider);
+    await mountProvider(DisplayToastProvider);
     show({ behavior: { autoDismiss: false } });
     await nextTick();
     item()!.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true }));
@@ -193,7 +211,7 @@ describe("DisplayToastProvider", () => {
   // ─── Auto-dismiss timer ───────────────────────────────────────────────────
 
   it("auto-dismisses after duration", async () => {
-    await mountSuspended(DisplayToastProvider);
+    await mountProvider(DisplayToastProvider);
     show({ behavior: { autoDismiss: true, duration: 3000 } });
     await nextTick();
     expect(items().length).toBe(1);
@@ -202,8 +220,56 @@ describe("DisplayToastProvider", () => {
     expect(items().length).toBe(0);
   });
 
+  it("pauses auto-dismiss while hovered and resumes with the remaining time", async () => {
+    await mountProvider(DisplayToastProvider);
+    show({ behavior: { autoDismiss: true, duration: 1000 } });
+    await nextTick();
+    vi.advanceTimersByTime(400);
+    item()!.dispatchEvent(new Event("pointerenter"));
+    await nextTick();
+    expect(item()!.hasAttribute("data-paused")).toBe(true);
+    vi.advanceTimersByTime(5000);
+    await nextTick();
+    expect(items().length).toBe(1);
+    item()!.dispatchEvent(new Event("pointerleave"));
+    await nextTick();
+    vi.advanceTimersByTime(599);
+    await nextTick();
+    expect(items().length).toBe(1);
+    vi.advanceTimersByTime(1);
+    await nextTick();
+    expect(items().length).toBe(0);
+  });
+
+  it("pauses while focus is on something inside a toast, and resumes when it leaves", async () => {
+    await mountProvider(DisplayToastProvider);
+    show({ behavior: { autoDismiss: true, duration: 1000 } });
+    await nextTick();
+    const inner = item()!.querySelector(".alert-content-body") as HTMLElement;
+    inner.dispatchEvent(new FocusEvent("focusin", { bubbles: true }));
+    await nextTick();
+    expect(item()!.hasAttribute("data-paused")).toBe(true);
+    vi.advanceTimersByTime(5000);
+    await nextTick();
+    expect(items().length).toBe(1);
+    inner.dispatchEvent(new FocusEvent("focusout", { bubbles: true, relatedTarget: null }));
+    await nextTick();
+    vi.advanceTimersByTime(1000);
+    await nextTick();
+    expect(items().length).toBe(0);
+  });
+
+  it("does not mark a non-auto-dismiss toast as paused", async () => {
+    await mountProvider(DisplayToastProvider);
+    show({ behavior: { autoDismiss: false } });
+    await nextTick();
+    item()!.dispatchEvent(new Event("pointerenter"));
+    await nextTick();
+    expect(item()!.hasAttribute("data-paused")).toBe(false);
+  });
+
   it("does not auto-dismiss when autoDismiss is false", async () => {
-    await mountSuspended(DisplayToastProvider);
+    await mountProvider(DisplayToastProvider);
     show({ behavior: { autoDismiss: false } });
     await nextTick();
     vi.advanceTimersByTime(10000);
@@ -214,7 +280,7 @@ describe("DisplayToastProvider", () => {
   // ─── Queue progression ────────────────────────────────────────────────────
 
   it("promotes next pending entry after current is dismissed", async () => {
-    await mountSuspended(DisplayToastProvider, { props: { maxVisible: 1 } });
+    await mountProvider(DisplayToastProvider, { props: { maxVisible: 1 } });
     show({ content: { text: "First" }, behavior: { autoDismiss: false } });
     show({ content: { text: "Second" }, behavior: { autoDismiss: false } });
     await nextTick();
@@ -228,14 +294,14 @@ describe("DisplayToastProvider", () => {
   // ─── Progress bar ─────────────────────────────────────────────────────────
 
   it("renders progress bar when autoDismiss is true", async () => {
-    await mountSuspended(DisplayToastProvider);
+    await mountProvider(DisplayToastProvider);
     show({ behavior: { autoDismiss: true } });
     await nextTick();
     expect(document.querySelector(".display-toast-provider-progress")).not.toBeNull();
   });
 
   it("does not render progress bar when autoDismiss is false", async () => {
-    await mountSuspended(DisplayToastProvider);
+    await mountProvider(DisplayToastProvider);
     show({ behavior: { autoDismiss: false } });
     await nextTick();
     expect(document.querySelector(".display-toast-provider-progress")).toBeNull();
@@ -245,7 +311,7 @@ describe("DisplayToastProvider", () => {
 
   it("removes all items on clear()", async () => {
     const { clear: clearQueue } = useToastQueue();
-    await mountSuspended(DisplayToastProvider, { props: { maxVisible: 3 } });
+    await mountProvider(DisplayToastProvider, { props: { maxVisible: 3 } });
     show({});
     show({});
     await nextTick();

package/app/components/03.organisms/image-galleries/slider-gallery/CONSUMER-STYLING.md

@@ -6,7 +6,8 @@
 
 | Token | Default | Controls |
 |---|---|---|
-| `--slider-gallery-height` | `100svh` | Gallery height (width is always `100vw`) |
+| `--slider-gallery-height` | `100svh` | Gallery height |
+| `--slider-gallery-width` | `100vw` | Gallery width. Set `100%` to fill a positioned container instead of the viewport |
 | `--slider-gallery-z-index` | `9999` | Stacking order (full-screen takeover) |
 | `--slider-gallery-accent` | `#f1683a` | Loading spinner and progress bar colour |
 | `--slider-gallery-loading-background` | `var(--page-bg)` | Loading overlay background |
@@ -25,6 +26,15 @@
 | `--slider-gallery-cta-background` | `#99999975` | See-more link background |
 | `--slider-gallery-cta-border-colour` | `#fff` | See-more link border |
 | `--slider-gallery-cta-colour` | `#fff` | See-more link text |
+| `--slider-gallery-author-line-clamp` | `none` | Max lines of the stylist line |
+| `--slider-gallery-title-line-clamp` | `none` | Max lines of the title |
+| `--slider-gallery-topic-line-clamp` | `none` | Max lines of the category line |
+| `--slider-gallery-description-line-clamp` | `none` | Max lines of the description |
+
+Line-clamp tokens: `1` is single-line ellipsis, any other number caps the lines with an ellipsis
+on the last, `none` shows everything. All slide text wraps long unbroken strings (`overflow-wrap: anywhere`).
+The slide text is absolutely positioned, so very long copy can run into the thumbnails and arrows:
+clamp the description if your CMS copy is unbounded.
 
 ### Thumbnails
 
@@ -43,6 +53,11 @@
 | `--slider-gallery-thumbnail-outline-offset-hover` | the resting offset | Outline gap on hover |
 | `--slider-gallery-thumbnail-border-radius` | `20px` | Thumbnail rounding |
 | `--slider-gallery-thumbnail-overlay` | `#0004` | Tint over thumbnail images |
+| `--slider-gallery-thumbnail-title-line-clamp` | `2` | Max lines of a thumbnail title |
+| `--slider-gallery-thumbnail-description-line-clamp` | `2` | Max lines of a thumbnail description |
+
+The thumbnail clamps default to `2` because the card is a fixed size with its text anchored to the
+bottom: uncapped, long text grows upwards and its first lines are cut off.
 
 ### Arrows
 
@@ -83,6 +98,9 @@ Private (not public API): `--_animation-duration` (from the `animationDuration`
 `--_arrow-border-*`/`--_arrow-outline-*` (resting values the hover tokens fall back to) and
 `--_arrows-top`/`-right`/`-width`/`-max-width` (the resolved, breakpoint-switched row position).
 
+> Changed 2026-10-06: added `--slider-gallery-width` (was a fixed `100vw`) and the line-clamp tokens;
+> slide, thumbnail, see-more and loading text now wrap unbroken strings.
+
 > Changed 2026-09-28: the thumbnail sizing/border/radius overrides used to be private names
 > (`--_thumbnailMobileWidth`, `--_thumbnailBorderRadius`, etc.) with no public token; colours were
 > hardcoded. The arrow icon is now sized by `--slider-gallery-arrow-icon-size` (width/height), separately from the button, and the `--_translate-x` icon nudge was removed. The wide thumbnail size now also applies to the image