@happyvertical/smrt-ui 0.52.0 → 0.53.0

package/dist/components/feedback/ToastViewport.svelte

@@ -10,7 +10,17 @@ export interface Props {
   /** Toaster instance that manages the toast queue. */
   toaster?: Toaster;
   /** Screen corner where toasts appear. */
-  position?: 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
+  position?:
+    | 'top-start'
+    | 'top-center'
+    | 'top-end'
+    | 'bottom-start'
+    | 'bottom-center'
+    | 'bottom-end';
+  /** CSS length inset from the window or anchor region. */
+  inset?: string;
+  /** Optional content region used for toast placement. */
+  anchor?: HTMLElement | null;
   /** CSS class to apply to the viewport container. */
   class?: string;
 }
@@ -18,10 +28,131 @@ let {
   toaster = defaultToaster,
   position = 'bottom-end',
   class: className = '',
+  inset = 'var(--smrt-spacing-4, 1rem)',
+  anchor = null,
 }: Props = $props();
+const instanceId = $props.id();
+const hoverReason = `${instanceId}-hover`;
+const focusReason = `${instanceId}-focus`;
 let toasts = $state<Toast[]>([]);
+let bounds = $state<{
+  top: number;
+  right: number;
+  bottom: number;
+  left: number;
+  width: number;
+} | null>(null);
 
-$effect(() => toaster.subscribe((next) => (toasts = next)));
+$effect(() => {
+  if (!anchor) {
+    bounds = null;
+    return;
+  }
+  const region = anchor;
+  function measure() {
+    const rect = region.getBoundingClientRect();
+    bounds = {
+      top: rect.top,
+      right: window.innerWidth - rect.right,
+      bottom: window.innerHeight - rect.bottom,
+      left: rect.left,
+      width: rect.width,
+    };
+  }
+  measure();
+  const observer = new ResizeObserver(measure);
+  observer.observe(region);
+  window.addEventListener('resize', measure);
+  document.addEventListener('scroll', measure, true);
+  return () => {
+    observer.disconnect();
+    window.removeEventListener('resize', measure);
+    document.removeEventListener('scroll', measure, true);
+  };
+});
+
+// A popover outside the topmost modal remains inert. Keep the live region and
+// its controls inside the active dialog instead, preserving their Svelte owner.
+function followModal(node: HTMLElement) {
+  const marker = document.createComment('toast viewport host');
+  node.before(marker);
+  let stack: HTMLDialogElement[] = [];
+  function update(records: MutationRecord[] = []) {
+    const dialogs = Array.from(
+      document.querySelectorAll<HTMLDialogElement>('dialog[open]'),
+    ).filter((dialog) => dialog.matches(':modal'));
+    stack = stack.filter((dialog) => dialogs.includes(dialog));
+    for (const dialog of dialogs)
+      if (!stack.includes(dialog)) stack.push(dialog);
+    for (const record of records) {
+      if (record.type !== 'attributes' || record.attributeName !== 'open')
+        continue;
+      const dialog = record.target as HTMLDialogElement;
+      if (!dialogs.includes(dialog)) continue;
+      stack = [...stack.filter((item) => item !== dialog), dialog];
+    }
+    const focused = dialogs
+      .filter((dialog) => dialog.contains(document.activeElement))
+      .at(-1);
+    if (focused)
+      stack = [...stack.filter((dialog) => dialog !== focused), focused];
+    const host = stack.at(-1) ?? marker.parentElement;
+    if (!host || node.parentElement === host) return;
+    const active = node.contains(document.activeElement)
+      ? (document.activeElement as HTMLElement)
+      : null;
+    if (host === marker.parentElement) marker.after(node);
+    else host.append(node);
+    active?.focus();
+    if (!node.contains(document.activeElement)) {
+      for (const toast of toasts) toaster.resume?.(toast.id, focusReason);
+    }
+  }
+  update();
+  const observer = new MutationObserver(update);
+  observer.observe(document.documentElement, {
+    subtree: true,
+    childList: true,
+    attributes: true,
+    attributeFilter: ['open'],
+  });
+  const focus = () => update();
+  document.addEventListener('focusin', focus);
+  return {
+    destroy() {
+      observer.disconnect();
+      document.removeEventListener('focusin', focus);
+      marker.remove();
+      node.remove();
+    },
+  };
+}
+
+function handleFocusOut(event: FocusEvent, id: string) {
+  if (
+    event.currentTarget instanceof HTMLElement &&
+    event.relatedTarget instanceof Node &&
+    event.currentTarget.contains(event.relatedTarget)
+  )
+    return;
+  toaster.resume?.(id, focusReason);
+}
+
+$effect(() => {
+  const queue = toaster;
+  let ids: string[] = [];
+  const unsubscribe = queue.subscribe((next) => {
+    ids = next.map((toast) => toast.id);
+    toasts = next;
+  });
+  return () => {
+    unsubscribe();
+    for (const id of ids) {
+      queue.resume?.(id, hoverReason);
+      queue.resume?.(id, focusReason);
+    }
+  };
+});
 
 async function runAction(toast: Toast) {
   await toast.action?.run();
@@ -29,23 +160,40 @@ async function runAction(toast: Toast) {
 }
 </script>
 
-<section class="viewport viewport--{position} {className}" aria-label="Notifications" aria-live="polite">
+<section use:followModal class="viewport viewport--{position} {className}" aria-label="Notifications" aria-live="polite"
+  style:--toast-inset={inset}
+  style:--toast-top={bounds ? `${bounds.top}px` : undefined}
+  style:--toast-right={bounds ? `${bounds.right}px` : undefined}
+  style:--toast-bottom={bounds ? `${bounds.bottom}px` : undefined}
+  style:--toast-left={bounds ? `${bounds.left}px` : undefined}
+  style:--toast-region-width={bounds ? `${bounds.width}px` : undefined}
+>
   {#each toasts as toast (toast.id)}
+    <div role="group" aria-label={toast.title ?? 'Notification'}
+      onmouseenter={() => toaster.pause?.(toast.id, hoverReason)}
+      onmouseleave={() => toaster.resume?.(toast.id, hoverReason)}
+      onfocusin={() => toaster.pause?.(toast.id, focusReason)}
+      onfocusout={(event) => handleFocusOut(event, toast.id)}
+    >
     <Alert variant={toast.variant} title={toast.title} dismissible ondismiss={() => toaster.dismiss(toast.id)}>
       {toast.message}
       {#snippet action()}
         {#if toast.action}<button type="button" onclick={() => runAction(toast)}>{toast.action.label}</button>{/if}
       {/snippet}
     </Alert>
+    </div>
   {/each}
 </section>
 
 <style>
-  .viewport { position: fixed; z-index: var(--smrt-z-index-toast, 1200); display: grid; width: min(24rem, calc(100vw - 2 * var(--smrt-spacing-4))); gap: var(--smrt-spacing-2); pointer-events: none; }
+  .viewport { position: fixed; z-index: var(--smrt-z-index-toast, 1200); display: grid; width: min(24rem, calc(var(--toast-region-width, 100vw) - 2 * var(--toast-inset))); gap: var(--smrt-spacing-2); pointer-events: none; }
   .viewport :global(.alert) { pointer-events: auto; box-shadow: var(--smrt-elevation-3); }
-  .viewport--top-start { top: var(--smrt-spacing-4); left: var(--smrt-spacing-4); }
-  .viewport--top-end { top: var(--smrt-spacing-4); right: var(--smrt-spacing-4); }
-  .viewport--bottom-start { bottom: var(--smrt-spacing-4); left: var(--smrt-spacing-4); }
-  .viewport--bottom-end { right: var(--smrt-spacing-4); bottom: var(--smrt-spacing-4); }
+  .viewport--top-start { top: calc(var(--toast-top, 0px) + var(--toast-inset)); left: calc(var(--toast-left, 0px) + var(--toast-inset)); }
+  .viewport--top-end { top: calc(var(--toast-top, 0px) + var(--toast-inset)); right: calc(var(--toast-right, 0px) + var(--toast-inset)); }
+  .viewport--bottom-start { bottom: calc(var(--toast-bottom, 0px) + var(--toast-inset)); left: calc(var(--toast-left, 0px) + var(--toast-inset)); }
+  .viewport--bottom-end { right: calc(var(--toast-right, 0px) + var(--toast-inset)); bottom: calc(var(--toast-bottom, 0px) + var(--toast-inset)); }
+  .viewport--top-center, .viewport--bottom-center { left: calc(var(--toast-left, 0px) + var(--toast-region-width, 100vw) / 2); transform: translateX(-50%); }
+  .viewport--top-center { top: calc(var(--toast-top, 0px) + var(--toast-inset)); }
+  .viewport--bottom-center { bottom: calc(var(--toast-bottom, 0px) + var(--toast-inset)); }
   button { padding: var(--smrt-spacing-1) var(--smrt-spacing-2); border: 1px solid currentColor; border-radius: var(--smrt-radius-small); background: transparent; color: inherit; font: inherit; cursor: pointer; }
 </style>

package/dist/components/feedback/ToastViewport.svelte.d.ts

@@ -3,7 +3,11 @@ export interface Props {
     /** Toaster instance that manages the toast queue. */
     toaster?: Toaster;
     /** Screen corner where toasts appear. */
-    position?: 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
+    position?: 'top-start' | 'top-center' | 'top-end' | 'bottom-start' | 'bottom-center' | 'bottom-end';
+    /** CSS length inset from the window or anchor region. */
+    inset?: string;
+    /** Optional content region used for toast placement. */
+    anchor?: HTMLElement | null;
     /** CSS class to apply to the viewport container. */
     class?: string;
 }

package/dist/components/feedback/ToastViewport.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToastViewport.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/feedback/ToastViewport.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,EAGL,KAAK,OAAO,EACb,MAAM,YAAY,CAAC;AAGpB,MAAM,WAAW,KAAK;IACpB,qDAAqD;IACrD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,WAAW,GAAG,SAAS,GAAG,cAAc,GAAG,YAAY,CAAC;IACnE,oDAAoD;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAmCD,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"ToastViewport.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/feedback/ToastViewport.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,EAGL,KAAK,OAAO,EACb,MAAM,YAAY,CAAC;AAGpB,MAAM,WAAW,KAAK;IACpB,qDAAqD;IACrD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yCAAyC;IACzC,QAAQ,CAAC,EACL,WAAW,GACX,YAAY,GACZ,SAAS,GACT,cAAc,GACd,eAAe,GACf,YAAY,CAAC;IACjB,yDAAyD;IACzD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wDAAwD;IACxD,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC5B,oDAAoD;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA8JD,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/components/feedback/__tests__/ConfirmDialog.test.js

@@ -1,18 +1,10 @@
-/**
- * Golden test for ConfirmDialog (Sweep S11, #1416).
- *
- * ConfirmDialog renders a backdrop `<div role="dialog" aria-modal="true">` only
- * while `open` is true, with a title, message, and cancel/confirm buttons. It
- * exposes `onconfirm`/`oncancel` callbacks; Escape (handled at the document
- * level) and backdrop clicks both route to `oncancel`. On open it manages focus:
- * focus moves to the confirm button, Tab is trapped within the dialog, and focus
- * is restored to the opener on close (#1586).
- */
-import { render, screen, waitFor } from '@testing-library/svelte';
+/** Native confirmation rendering, actions, focus and instance identity. */
+import { fireEvent, render, screen, waitFor } from '@testing-library/svelte';
 import userEvent from '@testing-library/user-event';
 import { describe, expect, it, vi } from 'vitest';
 import { expectNoA11yViolations } from '../../../test-support/a11y';
 import ConfirmDialog from '../ConfirmDialog.svelte';
+import RichMessage from './confirm-message.fixture.svelte';
 const baseProps = {
     open: true,
     title: 'Delete item',
@@ -27,6 +19,38 @@ describe('ConfirmDialog', () => {
         expect(dialog).toHaveAccessibleName('Delete item');
         expect(screen.getByText('This action cannot be undone.')).toBeInTheDocument();
     });
+    it('uses native dialog and unique instance description ids', () => {
+        render(ConfirmDialog, { props: baseProps });
+        render(ConfirmDialog, {
+            props: { ...baseProps, title: 'Second', message: 'Other' },
+        });
+        const dialogs = screen.getAllByRole('dialog');
+        expect(dialogs.every((dialog) => dialog instanceof HTMLDialogElement)).toBe(true);
+        for (const attribute of ['aria-labelledby', 'aria-describedby']) {
+            const ids = dialogs.map((dialog) => dialog.getAttribute(attribute));
+            expect(new Set(ids).size).toBe(2);
+            for (let index = 0; index < dialogs.length; index++) {
+                expect(dialogs[index].contains(document.getElementById(ids[index]))).toBe(true);
+            }
+        }
+    });
+    it('handles native cancel without closing outside controlled state', async () => {
+        const oncancel = vi.fn();
+        render(ConfirmDialog, { props: { ...baseProps, oncancel } });
+        const dialog = screen.getByRole('dialog');
+        const event = new Event('cancel', { cancelable: true });
+        await fireEvent(dialog, event);
+        expect(event.defaultPrevented).toBe(true);
+        expect(oncancel).toHaveBeenCalledTimes(1);
+        expect(dialog).toHaveAttribute('open');
+    });
+    it('renders a snippet message as accessible rich content', () => {
+        render(RichMessage);
+        const dialog = screen.getByRole('dialog', { name: 'Rich confirmation' });
+        expect(dialog.querySelector('strong')).toHaveTextContent('Record name');
+        expect(screen.getAllByRole('listitem')).toHaveLength(2);
+        expect(dialog).toHaveAccessibleDescription('Remove Record name? Notes Attachments');
+    });
     it('renders nothing when closed', () => {
         render(ConfirmDialog, { props: { ...baseProps, open: false } });
         expect(screen.queryByRole('dialog')).toBeNull();
@@ -104,17 +128,11 @@ describe('ConfirmDialog', () => {
             expect(opener).toHaveFocus();
             opener.remove();
         });
-        it('cancels via Escape even when focus is outside the dialog', async () => {
+        it('does not consume Escape from outside its dialog', async () => {
             const oncancel = vi.fn();
-            const outside = document.createElement('input');
-            document.body.appendChild(outside);
             render(ConfirmDialog, { props: { ...baseProps, oncancel } });
-            // Move focus out of the dialog, then press Escape: the document-level
-            // handler still fires because the dialog is open.
-            outside.focus();
-            await userEvent.keyboard('{Escape}');
-            expect(oncancel).toHaveBeenCalledTimes(1);
-            outside.remove();
+            await fireEvent.keyDown(window, { key: 'Escape' });
+            expect(oncancel).not.toHaveBeenCalled();
         });
         it('focuses the dialog container when all controls are disabled (loading)', async () => {
             // Both buttons are disabled while loading, so there is no focusable

package/dist/components/feedback/__tests__/confirm-message.fixture.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+import ConfirmDialog from '../ConfirmDialog.svelte';
+</script>
+
+{#snippet message()}
+  Remove <strong>Record name</strong>?
+  <ul><li>Notes</li><li>Attachments</li></ul>
+{/snippet}
+<ConfirmDialog open title="Rich confirmation" {message} />

package/dist/components/feedback/__tests__/confirm-message.fixture.svelte.d.ts

@@ -0,0 +1,19 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ConfirmMessage: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ConfirmMessage = InstanceType<typeof ConfirmMessage>;
+export default ConfirmMessage;
+//# sourceMappingURL=confirm-message.fixture.svelte.d.ts.map

package/dist/components/feedback/__tests__/confirm-message.fixture.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"confirm-message.fixture.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/__tests__/confirm-message.fixture.svelte.ts"],"names":[],"mappings":"AAgBA,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,cAAc;;kBAA+E,CAAC;AAClF,KAAK,cAAc,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC;AAC5D,eAAe,cAAc,CAAC"}

package/dist/components/feedback/__tests__/toast.test.js

@@ -1,4 +1,4 @@
-import { render, screen } from '@testing-library/svelte';
+import { act, fireEvent, render, screen } from '@testing-library/svelte';
 import userEvent from '@testing-library/user-event';
 import { describe, expect, it, vi } from 'vitest';
 import ToastViewport from '../ToastViewport.svelte';
@@ -47,3 +47,144 @@ describe('toast', () => {
         }
     });
 });
+describe('toast dismissal interactions', () => {
+    it('preserves the remaining duration until every pause reason clears', () => {
+        vi.useFakeTimers();
+        try {
+            const toaster = createToaster();
+            let visible = 0;
+            toaster.subscribe((toasts) => {
+                visible = toasts.length;
+            });
+            const id = toaster.show({ message: 'Saved', duration: 1000 });
+            vi.advanceTimersByTime(300);
+            toaster.pause?.(id, 'hover');
+            toaster.pause?.(id, 'focus');
+            vi.advanceTimersByTime(5000);
+            expect(visible).toBe(1);
+            toaster.resume?.(id, 'hover');
+            vi.advanceTimersByTime(5000);
+            expect(visible).toBe(1);
+            toaster.resume?.(id, 'focus');
+            toaster.resume?.(id, 'focus');
+            vi.advanceTimersByTime(699);
+            expect(visible).toBe(1);
+            vi.advanceTimersByTime(1);
+            expect(visible).toBe(0);
+        }
+        finally {
+            vi.useRealTimers();
+        }
+    });
+    it('replacing a paused id resets its duration without losing interaction pause', () => {
+        vi.useFakeTimers();
+        try {
+            const toaster = createToaster();
+            let message = '';
+            toaster.subscribe((toasts) => {
+                message = toasts[0]?.message ?? '';
+            });
+            toaster.show({ id: 'save', message: 'Saving', duration: 1000 });
+            toaster.pause?.('save', 'hover');
+            toaster.show({ id: 'save', message: 'Saved', duration: 2000 });
+            vi.advanceTimersByTime(5000);
+            expect(message).toBe('Saved');
+            toaster.resume?.('save', 'hover');
+            vi.advanceTimersByTime(1999);
+            expect(message).toBe('Saved');
+            vi.advanceTimersByTime(1);
+            expect(message).toBe('');
+        }
+        finally {
+            vi.useRealTimers();
+        }
+    });
+    it('can keep success notifications persistent while other notifications expire', () => {
+        vi.useFakeTimers();
+        try {
+            const toaster = createToaster({ successDuration: 0, duration: 1000 });
+            let messages = [];
+            toaster.subscribe((toasts) => {
+                messages = toasts.map((toast) => toast.message);
+            });
+            const id = toaster.success('Only record of approval');
+            toaster.show('Temporary');
+            toaster.success('Explicit duration wins', { duration: 500 });
+            vi.advanceTimersByTime(10000);
+            expect(messages).toEqual(['Only record of approval']);
+            toaster.dismiss(id);
+            expect(messages).toEqual([]);
+            toaster.show('Cleared');
+            toaster.clear();
+            expect(vi.getTimerCount()).toBe(0);
+        }
+        finally {
+            vi.useRealTimers();
+        }
+    });
+    it('viewport hover and focus pause independently, including focus movement within a toast', async () => {
+        vi.useFakeTimers();
+        try {
+            const toaster = createToaster();
+            render(ToastViewport, { props: { toaster } });
+            await act(() => {
+                toaster.show({
+                    message: 'Stay visible',
+                    duration: 1000,
+                    action: { label: 'Undo', run: () => { } },
+                });
+            });
+            const group = screen.getByRole('group', { name: 'Notification' });
+            await fireEvent.mouseEnter(group);
+            await fireEvent.focusIn(screen.getByRole('button', { name: 'Undo' }));
+            await fireEvent.mouseLeave(group);
+            await fireEvent.focusOut(screen.getByRole('button', { name: 'Undo' }), {
+                relatedTarget: screen.getByRole('button', { name: 'Dismiss' }),
+            });
+            await act(() => vi.advanceTimersByTime(5000));
+            expect(screen.getByText('Stay visible')).toBeInTheDocument();
+            await fireEvent.focusOut(group, { relatedTarget: document.body });
+            await act(() => vi.advanceTimersByTime(1000));
+            expect(screen.queryByText('Stay visible')).not.toBeInTheDocument();
+        }
+        finally {
+            vi.useRealTimers();
+        }
+    });
+    it('releases its interaction pauses when the viewport unmounts', async () => {
+        vi.useFakeTimers();
+        try {
+            const toaster = createToaster();
+            let count = 0;
+            toaster.subscribe((toasts) => {
+                count = toasts.length;
+            });
+            const { unmount } = render(ToastViewport, { props: { toaster } });
+            await act(() => {
+                toaster.show({ message: 'Paused', duration: 1000 });
+            });
+            await fireEvent.mouseEnter(screen.getByRole('group', { name: 'Notification' }));
+            await act(() => vi.advanceTimersByTime(5000));
+            expect(count).toBe(1);
+            await unmount();
+            vi.advanceTimersByTime(1000);
+            expect(count).toBe(0);
+            expect(document.querySelector('.viewport')).toBeNull();
+        }
+        finally {
+            vi.useRealTimers();
+        }
+    });
+    it('retains compatibility with injected toasters without pause/resume methods', async () => {
+        const legacy = { ...createToaster(), pause: undefined, resume: undefined };
+        const { unmount } = render(ToastViewport, { props: { toaster: legacy } });
+        legacy.success('Legacy', { duration: 0 });
+        const group = await screen.findByRole('group', { name: 'Notification' });
+        await fireEvent.mouseEnter(group);
+        await fireEvent.mouseLeave(group);
+        await userEvent.click(screen.getByRole('button', { name: 'Dismiss' }));
+        expect(screen.queryByText('Legacy')).not.toBeInTheDocument();
+        await unmount();
+        expect(document.querySelector('.viewport')).toBeNull();
+    });
+});

package/dist/components/feedback/index.d.ts

@@ -13,7 +13,7 @@ export { default as Progress } from './Progress.svelte';
 export { default as ProgressBar } from './ProgressBar.svelte';
 export { default as Spinner } from './Spinner.svelte';
 export { default as ToastViewport } from './ToastViewport.svelte';
-export type { Toast, ToastAction, Toaster, ToastInput, ToastVariant, } from './toast.js';
+export type { Toast, ToastAction, Toaster, ToasterOptions, ToastInput, ToastVariant, } from './toast.js';
 export { createToaster, toaster } from './toast.js';
 export { default as WorkingStrip } from './WorkingStrip.svelte';
 export { WORKING_ASSERTIVE_PHASES, type WorkingPhase, type WorkingStatus, } from './working-status.js';

package/dist/components/feedback/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/feedback/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAGH,OAAO,EACL,uBAAuB,EACvB,KAAK,cAAc,EACnB,KAAK,mBAAmB,EACxB,YAAY,EACZ,cAAc,GACf,MAAM,gCAAgC,CAAC;AAIxC,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,YAAY,EACV,KAAK,EACL,WAAW,EACX,OAAO,EACP,UAAU,EACV,YAAY,GACb,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EACL,wBAAwB,EACxB,KAAK,YAAY,EACjB,KAAK,aAAa,GACnB,MAAM,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/feedback/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAGH,OAAO,EACL,uBAAuB,EACvB,KAAK,cAAc,EACnB,KAAK,mBAAmB,EACxB,YAAY,EACZ,cAAc,GACf,MAAM,gCAAgC,CAAC;AAIxC,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,YAAY,EACV,KAAK,EACL,WAAW,EACX,OAAO,EACP,cAAc,EACd,UAAU,EACV,YAAY,GACb,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EACL,wBAAwB,EACxB,KAAK,YAAY,EACjB,KAAK,aAAa,GACnB,MAAM,qBAAqB,CAAC"}

package/dist/components/feedback/toast.d.ts

@@ -19,10 +19,22 @@ export interface Toaster {
     show(input: string | ToastInput): string;
     success(message: string, input?: Omit<ToastInput, 'message' | 'variant'>): string;
     error(message: string, input?: Omit<ToastInput, 'message' | 'variant'>): string;
+    /** Pause dismissal for a named interaction; legacy injected toasters may omit it. */
+    pause?(id: string, reason?: string): void;
+    /** Resume dismissal when all named interactions have ended. */
+    resume?(id: string, reason?: string): void;
     dismiss(id: string): void;
     clear(): void;
     subscribe(listener: (toasts: Toast[]) => void): () => void;
 }
-export declare function createToaster(): Toaster;
+/** Default durations; zero keeps notifications until explicitly dismissed. */
+export interface ToasterOptions {
+    /** Default dismissal duration in milliseconds (5000 by default). */
+    duration?: number;
+    /** Success dismissal duration; zero preserves the only record of an action. */
+    successDuration?: number;
+}
+/** Create an isolated notification queue with interaction-aware dismissal timers. */
+export declare function createToaster(options?: ToasterOptions): Toaster;
 export declare const toaster: Toaster;
 //# sourceMappingURL=toast.d.ts.map

package/dist/components/feedback/toast.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../../src/components/feedback/toast.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAEpE,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,IAAI,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CAC7B;AAED,MAAM,WAAW,KAAK;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,YAAY,CAAC;IACtB,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,WAAW,CAAC;CACtB;AAED,MAAM,WAAW,UAAW,SAAQ,OAAO,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,GAAG,SAAS,CAAC,CAAC;IACxE,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,OAAO;IACtB,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,UAAU,GAAG,MAAM,CAAC;IACzC,OAAO,CACL,OAAO,EAAE,MAAM,EACf,KAAK,CAAC,EAAE,IAAI,CAAC,UAAU,EAAE,SAAS,GAAG,SAAS,CAAC,GAC9C,MAAM,CAAC;IACV,KAAK,CACH,OAAO,EAAE,MAAM,EACf,KAAK,CAAC,EAAE,IAAI,CAAC,UAAU,EAAE,SAAS,GAAG,SAAS,CAAC,GAC9C,MAAM,CAAC;IACV,OAAO,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,KAAK,IAAI,IAAI,CAAC;IACd,SAAS,CAAC,QAAQ,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,IAAI,GAAG,MAAM,IAAI,CAAC;CAC5D;AAID,wBAAgB,aAAa,IAAI,OAAO,CA0DvC;AAED,eAAO,MAAM,OAAO,SAAkB,CAAC"}
+{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../../src/components/feedback/toast.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAEpE,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,IAAI,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CAC7B;AAED,MAAM,WAAW,KAAK;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,YAAY,CAAC;IACtB,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,WAAW,CAAC;CACtB;AAED,MAAM,WAAW,UAAW,SAAQ,OAAO,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,GAAG,SAAS,CAAC,CAAC;IACxE,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,OAAO;IACtB,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,UAAU,GAAG,MAAM,CAAC;IACzC,OAAO,CACL,OAAO,EAAE,MAAM,EACf,KAAK,CAAC,EAAE,IAAI,CAAC,UAAU,EAAE,SAAS,GAAG,SAAS,CAAC,GAC9C,MAAM,CAAC;IACV,KAAK,CACH,OAAO,EAAE,MAAM,EACf,KAAK,CAAC,EAAE,IAAI,CAAC,UAAU,EAAE,SAAS,GAAG,SAAS,CAAC,GAC9C,MAAM,CAAC;IACV,qFAAqF;IACrF,KAAK,CAAC,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1C,+DAA+D;IAC/D,MAAM,CAAC,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3C,OAAO,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,KAAK,IAAI,IAAI,CAAC;IACd,SAAS,CAAC,QAAQ,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,IAAI,GAAG,MAAM,IAAI,CAAC;CAC5D;AAID,8EAA8E;AAC9E,MAAM,WAAW,cAAc;IAC7B,oEAAoE;IACpE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,+EAA+E;IAC/E,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,qFAAqF;AACrF,wBAAgB,aAAa,CAAC,OAAO,GAAE,cAAmB,GAAG,OAAO,CAwGnE;AAED,eAAO,MAAM,OAAO,SAAkB,CAAC"}

package/dist/components/feedback/toast.js

@@ -1,5 +1,6 @@
 let nextToastId = 0;
-export function createToaster() {
+/** Create an isolated notification queue with interaction-aware dismissal timers. */
+export function createToaster(options = {}) {
     let toasts = [];
     const listeners = new Set();
     const timers = new Map();
@@ -9,8 +10,8 @@ export function createToaster() {
     };
     function dismiss(id) {
         const timer = timers.get(id);
-        if (timer)
-            clearTimeout(timer);
+        if (timer?.handle)
+            clearTimeout(timer.handle);
         timers.delete(id);
         toasts = toasts.filter((toast) => toast.id !== id);
         publish();
@@ -19,31 +20,71 @@ export function createToaster() {
         const normalized = typeof input === 'string' ? { message: input } : input;
         const id = normalized.id ?? `toast-${++nextToastId}`;
         const existingTimer = timers.get(id);
-        if (existingTimer)
-            clearTimeout(existingTimer);
+        if (existingTimer?.handle)
+            clearTimeout(existingTimer.handle);
         timers.delete(id);
         const toast = {
             id,
             message: normalized.message,
             title: normalized.title,
             variant: normalized.variant ?? 'info',
-            duration: normalized.duration ?? 5000,
+            duration: normalized.duration ??
+                (normalized.variant === 'success'
+                    ? options.successDuration
+                    : undefined) ??
+                options.duration ??
+                5000,
             action: normalized.action,
         };
         toasts = [...toasts.filter((item) => item.id !== id), toast];
         publish();
-        if (toast.duration > 0)
-            timers.set(id, setTimeout(() => dismiss(id), toast.duration));
+        if (toast.duration > 0) {
+            const timer = {
+                remaining: toast.duration,
+                started: Date.now(),
+                reasons: existingTimer?.reasons ?? new Set(),
+            };
+            timers.set(id, timer);
+            startTimer(id, timer);
+        }
         return id;
     }
+    function startTimer(id, timer) {
+        if (timer.reasons.size)
+            return;
+        timer.started = Date.now();
+        timer.handle = setTimeout(() => dismiss(id), timer.remaining);
+    }
+    function pause(id, reason = 'manual') {
+        const timer = timers.get(id);
+        if (!timer || timer.reasons.has(reason))
+            return;
+        if (!timer.reasons.size) {
+            if (timer.handle)
+                clearTimeout(timer.handle);
+            timer.handle = undefined;
+            timer.remaining = Math.max(0, timer.remaining - (Date.now() - timer.started));
+        }
+        timer.reasons.add(reason);
+    }
+    function resume(id, reason = 'manual') {
+        const timer = timers.get(id);
+        if (!timer || !timer.reasons.delete(reason))
+            return;
+        startTimer(id, timer);
+    }
     return {
         show,
+        pause,
+        resume,
         success: (message, input) => show({ ...input, message, variant: 'success' }),
         error: (message, input) => show({ ...input, message, variant: 'error' }),
         dismiss,
         clear() {
-            for (const timer of timers.values())
-                clearTimeout(timer);
+            for (const timer of timers.values()) {
+                if (timer.handle)
+                    clearTimeout(timer.handle);
+            }
             timers.clear();
             toasts = [];
             publish();