srcdev-nuxt-components 9.6.5 → 9.6.6

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

@@ -198,21 +198,35 @@ describe("DisplayToast", () => {
 
   // ─── Dismiss via Escape key ────────────────────────────────────────────────
 
-  it("transitions to hide class when Escape is pressed", async () => {
+  it("transitions to hide class when Escape is pressed on the toast", async () => {
     await mountAndShow({ config: { behavior: { autoDismiss: false } } });
-    vi.advanceTimersByTime(100); // fire the focus setTimeout
-    await nextTick();
+    vi.advanceTimersByTime(1);
     toast()!.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true }));
     await nextTick();
     expect(toast()!.getAttribute("data-state")).toBe("hide");
   });
 
+  it("dismisses on Escape pressed anywhere in the document, since it never takes focus", async () => {
+    await mountAndShow({ config: { behavior: { autoDismiss: false } } });
+    document.body.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true }));
+    await nextTick();
+    expect(toast()!.getAttribute("data-state")).toBe("hide");
+  });
+
+  it("ignores an Escape another handler has already claimed", async () => {
+    await mountAndShow({ config: { behavior: { autoDismiss: false } } });
+    const event = new KeyboardEvent("keydown", { key: "Escape", bubbles: true, cancelable: true });
+    event.preventDefault();
+    document.body.dispatchEvent(event);
+    await nextTick();
+    expect(toast()!.getAttribute("data-state")).toBe("show");
+  });
+
   // ─── Dismiss via close button ─────────────────────────────────────────────
 
   it("transitions to hide class when the close button is clicked", async () => {
     await mountAndShow({ config: { behavior: { autoDismiss: false } } });
-    vi.advanceTimersByTime(100);
-    await nextTick();
+    vi.advanceTimersByTime(1);
     (document.querySelector("[data-test-id='alert-dismiss']") as HTMLElement).click();
     await nextTick();
     expect(toast()!.getAttribute("data-state")).toBe("hide");
@@ -282,22 +296,29 @@ describe("DisplayToast", () => {
     expect(toast()!.getAttribute("data-state")).toBe("hide");
   });
 
-  it("does not pause when the toast takes focus after mouse input", async () => {
+  it("does not move focus to itself when shown", async () => {
+    await mountAndShow({ config: autoConfig });
+    vi.advanceTimersByTime(500);
+    await nextTick();
+    expect(document.activeElement).not.toBe(toast());
+    expect(toast()!.hasAttribute("data-paused")).toBe(false);
+  });
+
+  it("does not pause when focused after mouse input", async () => {
     setFocusVisible(false);
     await mountAndShow({ config: autoConfig });
-    vi.advanceTimersByTime(100); // the toast focuses itself
+    (toast() as HTMLElement).focus();
     await nextTick();
-    expect(document.activeElement).toBe(toast());
     expect(toast()!.hasAttribute("data-paused")).toBe(false);
-    vi.advanceTimersByTime(900);
+    vi.advanceTimersByTime(1000);
     await nextTick();
     expect(toast()!.getAttribute("data-state")).toBe("hide");
   });
 
-  it("pauses when the toast takes focus after keyboard input, until focus leaves", async () => {
+  it("pauses when a keyboard user focuses the toast, until focus leaves", async () => {
     setFocusVisible(true);
     await mountAndShow({ config: autoConfig });
-    vi.advanceTimersByTime(100);
+    (toast() as HTMLElement).focus();
     await nextTick();
     expect(toast()!.hasAttribute("data-paused")).toBe(true);
     vi.advanceTimersByTime(5000);
@@ -305,7 +326,7 @@ describe("DisplayToast", () => {
     expect(toast()!.getAttribute("data-state")).toBe("show");
     (toast() as HTMLElement).blur();
     await nextTick();
-    vi.advanceTimersByTime(900);
+    vi.advanceTimersByTime(1000);
     await nextTick();
     expect(toast()!.getAttribute("data-state")).toBe("hide");
   });

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

@@ -208,6 +208,26 @@ describe("DisplayToastProvider", () => {
     expect(items().length).toBe(0);
   });
 
+  it("does not move focus to a toast when it appears", async () => {
+    await mountProvider(DisplayToastProvider);
+    show({ behavior: { autoDismiss: false } });
+    await nextTick();
+    await nextTick();
+    expect(document.activeElement).not.toBe(item());
+  });
+
+  it("dismisses only the newest toast when Escape is pressed outside the toasts", async () => {
+    await mountProvider(DisplayToastProvider, { props: { maxVisible: 2 } });
+    show({ content: { text: "First" }, behavior: { autoDismiss: false } });
+    show({ content: { text: "Second" }, behavior: { autoDismiss: false } });
+    await nextTick();
+    expect(items().length).toBe(2);
+    document.body.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true }));
+    await nextTick();
+    expect(items().length).toBe(1);
+    expect(item()!.textContent).toContain("First");
+  });
+
   // ─── Auto-dismiss timer ───────────────────────────────────────────────────
 
   it("auto-dismisses after duration", async () => {

package/app/types/components/social-icons-list.d.ts

@@ -1,3 +1,5 @@
+import type { VNode } from "vue";
+
 export interface ISocialIcon {
   networkName: string;
   iconName: string;
@@ -5,4 +7,11 @@ export interface ISocialIcon {
   profileId: string;
   /** Accessible name for the link; overrides the list's linkLabelTemplate. */
   label?: string;
+  /** Brand colour, exposed as --social-icons-list-brand-colour on this item for recipes to use. */
+  brandColour?: string;
+}
+
+export interface SocialIconsListSlots {
+  icon?(props: { item: ISocialIcon }): VNode[];
+  label?(props: { item: ISocialIcon }): VNode[];
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "9.6.5",
+  "version": "9.6.6",
   "main": "nuxt.config.ts",
   "types": "types.d.ts",
   "license": "MIT",