@happyvertical/smrt-ui 0.51.39 → 0.53.0

package/dist/components/feedback/ConfirmDialog.svelte

@@ -6,13 +6,11 @@
  * Provides a consistent confirmation dialog for destructive actions
  * or important decisions.
  *
- * Accessibility (#1586): the dialog is a `role="dialog" aria-modal="true"`
- * surface with managed focus — on open it records the previously-focused element
- * and moves focus to the confirm button; Tab/Shift+Tab are trapped within the
- * dialog; Escape (caught at the document level while open) cancels; and focus is
- * restored to the opener when the dialog closes.
+ * Native showModal() puts confirmations above existing Modal/Drawer surfaces,
+ * traps focus and makes the background inert. Escape is handled locally so
+ * only the active confirmation requests cancellation.
  */
-import { tick } from 'svelte';
+import { type Snippet, tick } from 'svelte';
 import { ripple } from '../../actions/ripple.js';
 
 /** Props for ConfirmDialog component */
@@ -21,8 +19,8 @@ export interface Props {
   open: boolean;
   /** Dialog title */
   title: string;
-  /** Dialog message */
-  message: string;
+  /** Plain text or rich message snippet */
+  message: string | Snippet;
   /** Confirm button label */
   confirmLabel?: string;
   /** Cancel button label */
@@ -49,7 +47,8 @@ const {
   oncancel,
 }: Props = $props();
 
-let backdropEl = $state<HTMLElement | null>(null);
+const instanceId = $props.id();
+let backdropEl = $state<HTMLDialogElement | null>(null);
 let confirmBtnEl = $state<HTMLButtonElement | null>(null);
 // The element focused before the dialog opened, restored on close.
 let previouslyFocused: HTMLElement | null = null;
@@ -63,38 +62,43 @@ function focusableEls(): HTMLElement[] {
   );
 }
 
-// Move focus into the dialog on open; restore it to the opener on close.
+// Keep the parent's open prop authoritative; native cancellation requests it.
 $effect(() => {
-  if (typeof document === 'undefined') return;
-
-  if (open) {
-    previouslyFocused = document.activeElement as HTMLElement | null;
-    // Wait for the dialog DOM to mount, then move focus into the dialog: the
-    // confirm action by default, the first focusable if confirm is disabled, or
-    // the dialog container itself when every control is disabled (loading) so
-    // focus is still contained and Escape stays reachable.
-    void tick().then(() => {
-      if (!open) return;
-      const target = confirmBtnEl?.disabled
-        ? (focusableEls()[0] ?? backdropEl)
-        : confirmBtnEl;
-      target?.focus();
-    });
-  } else if (previouslyFocused) {
-    previouslyFocused.focus();
+  const dialog = backdropEl;
+  if (!open || !dialog) return;
+  previouslyFocused = document.activeElement as HTMLElement | null;
+  dialog.showModal();
+  void tick().then(() => {
+    if (!dialog.open) return;
+    const target = confirmBtnEl?.disabled
+      ? (focusableEls()[0] ?? dialog)
+      : confirmBtnEl;
+    target?.focus();
+  });
+  return () => {
+    if (dialog.open) dialog.close();
+    previouslyFocused?.focus();
     previouslyFocused = null;
-  }
+  };
 });
 
+function handleCancel(event: Event) {
+  event.preventDefault();
+  event.stopPropagation();
+  oncancel?.();
+}
+
 function handleBackdropClick(e: MouseEvent) {
   if (e.target === e.currentTarget) {
     oncancel?.();
   }
 }
 
-// Escape handling lives at the document level (below) so it fires regardless of
-// where focus currently is. This handler, bound to the dialog, only traps Tab.
 function handleKeydown(e: KeyboardEvent) {
+  if (e.key === 'Escape') {
+    handleCancel(e);
+    return;
+  }
   if (e.key !== 'Tab') return;
 
   // Trap focus within the dialog so Tab can't escape to the page behind.
@@ -117,33 +121,30 @@ function handleKeydown(e: KeyboardEvent) {
     first.focus();
   }
 }
-
-function handleWindowKeydown(e: KeyboardEvent) {
-  if (open && e.key === 'Escape') {
-    e.preventDefault();
-    oncancel?.();
-  }
-}
 </script>
 
-<svelte:window onkeydown={handleWindowKeydown} />
-
 {#if open}
   <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-  <div
+  <dialog
     bind:this={backdropEl}
     class="dialog-backdrop"
-    role="dialog"
     aria-modal="true"
-    aria-labelledby="dialog-title"
-    aria-describedby="dialog-message"
+    aria-labelledby={`${instanceId}-title`}
+    aria-describedby={`${instanceId}-message`}
     tabindex="-1"
     onclick={handleBackdropClick}
     onkeydown={handleKeydown}
+    oncancel={handleCancel}
   >
     <div class="dialog-content">
-      <h2 id="dialog-title" class="dialog-title">{title}</h2>
-      <p id="dialog-message" class="dialog-message">{message}</p>
+      <h2 id={`${instanceId}-title`} class="dialog-title">{title}</h2>
+      <div id={`${instanceId}-message`} class="dialog-message">
+        {#if typeof message === 'string'}
+          {message}
+        {:else}
+          {@render message()}
+        {/if}
+      </div>
 
       <div class="dialog-actions">
         <button
@@ -171,7 +172,7 @@ function handleWindowKeydown(e: KeyboardEvent) {
         </button>
       </div>
     </div>
-  </div>
+  </dialog>
 {/if}
 
 <style>
@@ -181,9 +182,19 @@ function handleWindowKeydown(e: KeyboardEvent) {
     display: flex;
     align-items: center;
     justify-content: center;
-    background-color: var(--smrt-color-scrim, rgba(0, 0, 0, 0.4));
-    z-index: var(--smrt-z-index-dialog, 1000);
+    width: 100%;
+    height: 100%;
+    max-width: 100%;
+    max-height: 100%;
+    margin: 0;
+    border: none;
+    box-sizing: border-box;
+    background: transparent;
     padding: 1rem;
+  }
+
+  .dialog-backdrop::backdrop {
+    background-color: var(--smrt-color-scrim, rgba(0, 0, 0, 0.4));
     backdrop-filter: blur(2px);
   }
 

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

@@ -1,11 +1,23 @@
+/**
+ * ConfirmDialog - Modal confirmation dialog
+ * refactored for Material 3
+ *
+ * Provides a consistent confirmation dialog for destructive actions
+ * or important decisions.
+ *
+ * Native showModal() puts confirmations above existing Modal/Drawer surfaces,
+ * traps focus and makes the background inert. Escape is handled locally so
+ * only the active confirmation requests cancellation.
+ */
+import { type Snippet } from 'svelte';
 /** Props for ConfirmDialog component */
 export interface Props {
     /** Whether the dialog is open */
     open: boolean;
     /** Dialog title */
     title: string;
-    /** Dialog message */
-    message: string;
+    /** Plain text or rich message snippet */
+    message: string | Snippet;
     /** Confirm button label */
     confirmLabel?: string;
     /** Cancel button label */

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

@@ -1 +1 @@
-{"version":3,"file":"ConfirmDialog.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/feedback/ConfirmDialog.svelte.ts"],"names":[],"mappings":"AAoBA,wCAAwC;AACxC,MAAM,WAAW,KAAK;IACpB,iCAAiC;IACjC,IAAI,EAAE,OAAO,CAAC;IACd,mBAAmB;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,qBAAqB;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,2BAA2B;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0BAA0B;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gDAAgD;IAChD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oCAAoC;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AA2HD,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"ConfirmDialog.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/feedback/ConfirmDialog.svelte.ts"],"names":[],"mappings":"AAGA;;;;;;;;;;GAUG;AACH,OAAO,EAAE,KAAK,OAAO,EAAQ,MAAM,QAAQ,CAAC;AAI5C,wCAAwC;AACxC,MAAM,WAAW,KAAK;IACpB,iCAAiC;IACjC,IAAI,EAAE,OAAO,CAAC;IACd,mBAAmB;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,yCAAyC;IACzC,OAAO,EAAE,MAAM,GAAG,OAAO,CAAC;IAC1B,2BAA2B;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0BAA0B;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gDAAgD;IAChD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oCAAoC;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AA8HD,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/components/feedback/PhoneSheet.svelte

@@ -0,0 +1,224 @@
+<script lang="ts">
+/**
+ * PhoneSheet — the phone replacement for drawers and centered modals.
+ *
+ * - `variant="page"`: a full-screen page (a notifications list, a picker);
+ * - `variant="sheet"`: slides up from the bottom with a grabber; a swipe down
+ *   on its header closes it.
+ *
+ * It closes on its close button and Escape, moves focus into itself when it
+ * opens, and returns focus to the opener when it closes. It is positioned
+ * `absolute; inset: 0`, so it covers its nearest positioned ancestor — inside
+ * an `AdminShell`, render it in the `overlays` snippet so it covers the
+ * screen above the phone bottom bar. The host may keep it mounted while
+ * closed (it is hidden and inert), so a chat inside keeps its draft.
+ */
+import type { Snippet } from 'svelte';
+import { tick } from 'svelte';
+import { swipeDismiss } from '../../actions/swipe-dismiss.js';
+import { M } from '../../i18n/strings.ui.js';
+import { useI18n } from '../../i18n/use-i18n.js';
+
+export interface Props {
+  /** Whether the sheet is shown. */
+  open: boolean;
+  /** Heading shown in the sheet header; also names the dialog. */
+  title: string;
+  /** Called on the close button, Escape, or a swipe down (sheet). */
+  onclose: () => void;
+  /** `page` covers the area; `sheet` slides up with rounded corners. */
+  variant?: 'page' | 'sheet';
+  /** Element id, for `aria-controls` on the button that opens it. */
+  id?: string;
+  /** Accessible name of the close button (default "Close {title}"). */
+  closeLabel?: string;
+  /** Sheet body. */
+  children: Snippet;
+}
+
+let {
+  open,
+  title,
+  onclose,
+  variant = 'page',
+  id,
+  closeLabel,
+  children,
+}: Props = $props();
+
+const { t } = useI18n();
+const instanceId = $props.id();
+const headingId = `phone-sheet-${instanceId}`;
+let root: HTMLElement | undefined = $state();
+let returnFocus: HTMLElement | null = null;
+
+$effect(() => {
+  if (!open) return;
+  returnFocus =
+    document.activeElement instanceof HTMLElement
+      ? document.activeElement
+      : null;
+  void tick().then(() => root?.focus({ preventScroll: true }));
+  return () => {
+    const target = returnFocus;
+    returnFocus = null;
+    if (target && document.contains(target)) {
+      target.focus({ preventScroll: true });
+    }
+  };
+});
+
+function onkeydown(event: KeyboardEvent): void {
+  if (event.key !== 'Escape' || event.defaultPrevented) return;
+  event.preventDefault();
+  event.stopPropagation();
+  onclose();
+}
+</script>
+
+<div
+  bind:this={root}
+  {id}
+  class="phone-sheet phone-sheet--{variant}"
+  class:open
+  role="dialog"
+  aria-modal="false"
+  aria-labelledby={headingId}
+  aria-hidden={!open}
+  inert={!open}
+  tabindex="-1"
+  data-escape-scope
+  data-testid="phone-sheet"
+  {onkeydown}
+>
+  <header
+    class="phone-sheet__header"
+    use:swipeDismiss={{
+      direction: 'down',
+      onDismiss: onclose,
+      enabled: variant === 'sheet',
+    }}
+  >
+    {#if variant === 'sheet'}
+      <span class="phone-sheet__grabber" aria-hidden="true"></span>
+    {/if}
+    <h2 id={headingId}>{title}</h2>
+    <button
+      type="button"
+      class="phone-sheet__close"
+      aria-label={closeLabel ?? t(M['ui.phone_sheet.close'], { title })}
+      onclick={onclose}
+    >
+      <svg
+        viewBox="0 0 24 24"
+        width="22"
+        height="22"
+        aria-hidden="true"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+      >
+        <path d="M18 6 6 18M6 6l12 12" />
+      </svg>
+    </button>
+  </header>
+  <div class="phone-sheet__body">
+    {@render children()}
+  </div>
+</div>
+
+<style>
+  .phone-sheet {
+    position: absolute;
+    inset: 0;
+    z-index: 30;
+    display: grid;
+    grid-template-rows: auto minmax(0, 1fr);
+    background: var(--smrt-color-surface);
+    color: var(--smrt-color-on-surface);
+    transform: translateY(100%);
+    visibility: hidden;
+    transition:
+      transform var(--smrt-duration-medium1, 250ms) var(--smrt-easing-standard, ease),
+      visibility 0s linear var(--smrt-duration-medium1, 250ms);
+    outline: none;
+  }
+
+  .phone-sheet.open {
+    transform: none;
+    visibility: visible;
+    transition: transform var(--smrt-duration-medium1, 250ms)
+      var(--smrt-easing-standard, ease);
+  }
+
+  .phone-sheet--sheet {
+    border-start-start-radius: var(--smrt-radius-lg);
+    border-start-end-radius: var(--smrt-radius-lg);
+    box-shadow: var(--smrt-elevation-3);
+  }
+
+  .phone-sheet__header {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--smrt-spacing-2);
+    min-block-size: 3.5rem;
+    padding-block: 0;
+    padding-inline: var(--smrt-spacing-4) var(--smrt-spacing-2);
+    border-block-end: 1px solid var(--smrt-color-outline-variant);
+    touch-action: pan-x;
+  }
+
+  .phone-sheet__grabber {
+    position: absolute;
+    inset-block-start: var(--smrt-spacing-1);
+    inset-inline-start: 50%;
+    inline-size: 2.5rem;
+    block-size: 0.25rem;
+    border-radius: var(--smrt-radius-full);
+    background: var(--smrt-color-outline-variant);
+    transform: translateX(-50%);
+  }
+
+  .phone-sheet__header h2 {
+    margin: 0;
+    font: var(--smrt-typography-title-medium-font);
+  }
+
+  .phone-sheet__close {
+    display: inline-grid;
+    place-items: center;
+    inline-size: 2.75rem;
+    block-size: 2.75rem;
+    border: 0;
+    border-radius: var(--smrt-radius-full);
+    background: transparent;
+    color: inherit;
+    cursor: pointer;
+  }
+
+  .phone-sheet__close:hover,
+  .phone-sheet__close:focus-visible {
+    background: var(--smrt-color-surface-container-high);
+  }
+
+  .phone-sheet__close:focus-visible {
+    outline: 2px solid var(--smrt-color-primary);
+    outline-offset: -2px;
+  }
+
+  .phone-sheet__body {
+    min-block-size: 0;
+    overflow: auto;
+    overscroll-behavior: contain;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .phone-sheet,
+    .phone-sheet.open {
+      transition: none;
+    }
+  }
+</style>

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

@@ -0,0 +1,35 @@
+/**
+ * PhoneSheet — the phone replacement for drawers and centered modals.
+ *
+ * - `variant="page"`: a full-screen page (a notifications list, a picker);
+ * - `variant="sheet"`: slides up from the bottom with a grabber; a swipe down
+ *   on its header closes it.
+ *
+ * It closes on its close button and Escape, moves focus into itself when it
+ * opens, and returns focus to the opener when it closes. It is positioned
+ * `absolute; inset: 0`, so it covers its nearest positioned ancestor — inside
+ * an `AdminShell`, render it in the `overlays` snippet so it covers the
+ * screen above the phone bottom bar. The host may keep it mounted while
+ * closed (it is hidden and inert), so a chat inside keeps its draft.
+ */
+import type { Snippet } from 'svelte';
+export interface Props {
+    /** Whether the sheet is shown. */
+    open: boolean;
+    /** Heading shown in the sheet header; also names the dialog. */
+    title: string;
+    /** Called on the close button, Escape, or a swipe down (sheet). */
+    onclose: () => void;
+    /** `page` covers the area; `sheet` slides up with rounded corners. */
+    variant?: 'page' | 'sheet';
+    /** Element id, for `aria-controls` on the button that opens it. */
+    id?: string;
+    /** Accessible name of the close button (default "Close {title}"). */
+    closeLabel?: string;
+    /** Sheet body. */
+    children: Snippet;
+}
+declare const PhoneSheet: import("svelte").Component<Props, {}, "">;
+type PhoneSheet = ReturnType<typeof PhoneSheet>;
+export default PhoneSheet;
+//# sourceMappingURL=PhoneSheet.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PhoneSheet.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/feedback/PhoneSheet.svelte.ts"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;GAaG;AACH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAOtC,MAAM,WAAW,KAAK;IACpB,kCAAkC;IAClC,IAAI,EAAE,OAAO,CAAC;IACd,gEAAgE;IAChE,KAAK,EAAE,MAAM,CAAC;IACd,mEAAmE;IACnE,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,sEAAsE;IACtE,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC3B,mEAAmE;IACnE,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,qEAAqE;IACrE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kBAAkB;IAClB,QAAQ,EAAE,OAAO,CAAC;CACnB;AA2ED,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

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>