@svgrid/grid 2.6.23 → 3.0.0

package/src/SvToaster.svelte

@@ -1,159 +1,159 @@
-<script lang="ts">
-  /**
-   * SvToaster - renders the shared toast queue (see `toast-store`). Mount ONCE
-   * near the app root; call `toast()` from anywhere to push notifications. The
-   * container is an `aria-live` region as a visual backstop, though each toast
-   * is also announced through the shared live region by the store.
-   *
-   * ```svelte
-   * <SvToaster position="bottom-right" />
-   * ```
-   */
-  import { portalToBody } from './popover'
-  import { toastStore, dismissToast, pauseToast, resumeToast, type Toast, type ToastAction } from './toast-store.svelte'
-
-  type Position =
-    | 'top-left' | 'top-center' | 'top-right'
-    | 'bottom-left' | 'bottom-center' | 'bottom-right'
-
-  type Props = {
-    /** Corner/edge the stack anchors to. Default 'bottom-right'. */
-    position?: Position
-    /** Max toasts shown at once (older ones stay queued in the store). */
-    max?: number
-  }
-
-  let { position = 'bottom-right', max = 5 }: Props = $props()
-
-  const visible = $derived(toastStore.toasts.slice(-max))
-  const icon = (v: Toast['variant']) =>
-    v === 'success' ? '✓' : v === 'error' ? '✕' : v === 'warning' ? '⚠' : 'ℹ'
-
-  // Swipe-to-dismiss: drag a toast sideways past ~60px to dismiss it.
-  let drag = $state<{ id: number; startX: number; dx: number } | null>(null)
-  function onDown(e: PointerEvent, id: number) {
-    // Only the primary button starts a swipe.
-    if (e.button !== 0) return
-    // Don't hijack presses on the toast's own controls (dismiss X, action /
-    // cancel buttons). Capturing the pointer here would redirect the pointerup
-    // to the toast and swallow the button's click.
-    if (e.target instanceof Element && e.target.closest('button')) return
-    drag = { id, startX: e.clientX, dx: 0 }
-    ;(e.currentTarget as HTMLElement).setPointerCapture?.(e.pointerId)
-    pauseToast(id)
-  }
-  function onMove(e: PointerEvent) {
-    if (drag) drag = { ...drag, dx: e.clientX - drag.startX }
-  }
-  function onUp(id: number) {
-    if (!drag || drag.id !== id) return
-    const dx = drag.dx
-    drag = null
-    if (Math.abs(dx) > 60) dismissToast(id)
-    else resumeToast(id)
-  }
-  const dragDx = (id: number) => (drag?.id === id ? drag.dx : 0)
-
-  // Run a toast action, then dismiss the toast unless it opted to stay open.
-  function runAction(a: ToastAction, id: number) {
-    a.onClick?.(id)
-    if (!a.keepOpen) dismissToast(id)
-  }
-</script>
-
-<div class="sv-toaster sv-toaster--{position}" use:portalToBody role="region" aria-label="Notifications">
-  {#each visible as t (t.id)}
-    <!-- svelte-ignore a11y_no_static_element_interactions -->
-    <div
-      class="sv-toast sv-toast--{t.variant}"
-      class:is-dragging={drag?.id === t.id}
-      role={t.variant === 'error' || t.variant === 'warning' ? 'alert' : 'status'}
-      style:transform={dragDx(t.id) ? `translateX(${dragDx(t.id)}px)` : undefined}
-      style:opacity={dragDx(t.id) ? 1 - Math.min(Math.abs(dragDx(t.id)) / 160, 0.7) : undefined}
-      onmouseenter={() => pauseToast(t.id)}
-      onmouseleave={() => resumeToast(t.id)}
-      onfocusin={() => pauseToast(t.id)}
-      onfocusout={() => resumeToast(t.id)}
-      onpointerdown={(e) => onDown(e, t.id)}
-      onpointermove={onMove}
-      onpointerup={() => onUp(t.id)}
-      onpointercancel={() => onUp(t.id)}
-    >
-      {#if t.render}
-        <div class="sv-toast__content">{@render t.render(t)}</div>
-      {:else}
-        <span class="sv-toast__icon" aria-hidden="true">{icon(t.variant)}</span>
-        <div class="sv-toast__content">
-          {#if t.title}<div class="sv-toast__title">{t.title}</div>{/if}
-          <div class="sv-toast__msg">{t.message}</div>
-          {#if t.action || t.cancel}
-            <div class="sv-toast__actions">
-              {#if t.cancel}
-                <button type="button" class="sv-toast__action sv-toast__action--cancel" onclick={() => runAction(t.cancel!, t.id)}>{t.cancel.label}</button>
-              {/if}
-              {#if t.action}
-                <button type="button" class="sv-toast__action" onclick={() => runAction(t.action!, t.id)}>{t.action.label}</button>
-              {/if}
-            </div>
-          {/if}
-        </div>
-      {/if}
-      {#if t.dismissible}
-        <button type="button" class="sv-toast__x" aria-label="Dismiss" onclick={() => dismissToast(t.id)}>&times;</button>
-      {/if}
-    </div>
-  {/each}
-</div>
-
-<style>
-  :global(.sv-toaster) {
-    position: fixed; z-index: 2147483001; display: flex; flex-direction: column; gap: 8px;
-    padding: 16px; max-width: min(92vw, 380px); pointer-events: none;
-  }
-  :global(.sv-toaster--top-left) { top: 0; left: 0; }
-  :global(.sv-toaster--top-center) { top: 0; left: 50%; transform: translateX(-50%); align-items: center; }
-  :global(.sv-toaster--top-right) { top: 0; right: 0; }
-  :global(.sv-toaster--bottom-left) { bottom: 0; left: 0; flex-direction: column-reverse; }
-  :global(.sv-toaster--bottom-center) { bottom: 0; left: 50%; transform: translateX(-50%); align-items: center; flex-direction: column-reverse; }
-  :global(.sv-toaster--bottom-right) { bottom: 0; right: 0; flex-direction: column-reverse; }
-
-  :global(.sv-toast) {
-    pointer-events: auto;
-    display: flex; align-items: flex-start; gap: 10px; width: 100%; box-sizing: border-box;
-    padding: 11px 12px; border-radius: 10px; font-size: 13px; line-height: 1.45;
-    background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a);
-    border: 1px solid var(--sg-border, #e2e8f0);
-    border-inline-start: 3px solid var(--_accent, var(--sg-accent, #2563eb));
-    box-shadow: 0 12px 32px -12px rgba(15, 23, 42, 0.4);
-    animation: sv-toast-in 0.18s cubic-bezier(0.16, 1, 0.3, 1) both;
-    transition: transform 0.2s ease, opacity 0.2s ease;
-    touch-action: pan-y; /* let vertical scroll through; capture horizontal swipe */
-  }
-  :global(.sv-toast.is-dragging) { transition: none; cursor: grabbing; user-select: none; }
-  @keyframes sv-toast-in { from { opacity: 0; transform: translateY(6px) scale(0.98) } to { opacity: 1 } }
-  @media (prefers-reduced-motion: reduce) { :global(.sv-toast) { animation: none } }
-
-  :global(.sv-toast--success) { --_accent: var(--sg-success, #16a34a); }
-  :global(.sv-toast--error) { --_accent: var(--sg-danger, #dc2626); }
-  :global(.sv-toast--warning) { --_accent: var(--sg-warning, #d97706); }
-  :global(.sv-toast--info) { --_accent: var(--sg-accent, #2563eb); }
-
-  :global(.sv-toast__icon) { flex: none; width: 18px; height: 18px; display: grid; place-items: center; color: var(--_accent); font-weight: 700; }
-  :global(.sv-toast__content) { flex: 1; min-width: 0; }
-  :global(.sv-toast__title) { font-weight: 650; margin-bottom: 1px; }
-  :global(.sv-toast__msg) { color: var(--sg-fg, #0f172a); overflow-wrap: anywhere; }
-  :global(.sv-toast__actions) { display: flex; gap: 8px; margin-top: 9px; }
-  :global(.sv-toast__action) {
-    font: inherit; font-size: 12.5px; font-weight: 600; padding: 4px 11px; border-radius: 6px;
-    border: 1px solid var(--_accent, var(--sg-accent, #2563eb)); background: none; color: var(--_accent, var(--sg-accent, #2563eb));
-    cursor: pointer;
-  }
-  :global(.sv-toast__action:hover) { background: color-mix(in srgb, var(--_accent, #2563eb) 12%, transparent); }
-  :global(.sv-toast__action--cancel) { border-color: var(--sg-border, #e2e8f0); color: var(--sg-muted, #64748b); }
-  :global(.sv-toast__action--cancel:hover) { background: var(--sg-row-hover-bg, #f1f5f9); color: var(--sg-fg, #0f172a); }
-  :global(.sv-toast__x) {
-    flex: none; width: 22px; height: 22px; display: grid; place-items: center; margin: -2px -2px 0 0;
-    background: none; border: 0; color: var(--sg-muted, #64748b); cursor: pointer; border-radius: 5px; font-size: 17px; line-height: 1;
-  }
-  :global(.sv-toast__x:hover) { background: var(--sg-row-hover-bg, #f1f5f9); color: var(--sg-fg, #0f172a); }
-</style>
+<script lang="ts">
+  /**
+   * SvToaster - renders the shared toast queue (see `toast-store`). Mount ONCE
+   * near the app root; call `toast()` from anywhere to push notifications. The
+   * container is an `aria-live` region as a visual backstop, though each toast
+   * is also announced through the shared live region by the store.
+   *
+   * ```svelte
+   * <SvToaster position="bottom-right" />
+   * ```
+   */
+  import { portalToBody } from './popover'
+  import { toastStore, dismissToast, pauseToast, resumeToast, type Toast, type ToastAction } from './toast-store.svelte'
+
+  type Position =
+    | 'top-left' | 'top-center' | 'top-right'
+    | 'bottom-left' | 'bottom-center' | 'bottom-right'
+
+  type Props = {
+    /** Corner/edge the stack anchors to. Default 'bottom-right'. */
+    position?: Position
+    /** Max toasts shown at once (older ones stay queued in the store). */
+    max?: number
+  }
+
+  let { position = 'bottom-right', max = 5 }: Props = $props()
+
+  const visible = $derived(toastStore.toasts.slice(-max))
+  const icon = (v: Toast['variant']) =>
+    v === 'success' ? '✓' : v === 'error' ? '✕' : v === 'warning' ? '⚠' : 'ℹ'
+
+  // Swipe-to-dismiss: drag a toast sideways past ~60px to dismiss it.
+  let drag = $state<{ id: number; startX: number; dx: number } | null>(null)
+  function onDown(e: PointerEvent, id: number) {
+    // Only the primary button starts a swipe.
+    if (e.button !== 0) return
+    // Don't hijack presses on the toast's own controls (dismiss X, action /
+    // cancel buttons). Capturing the pointer here would redirect the pointerup
+    // to the toast and swallow the button's click.
+    if (e.target instanceof Element && e.target.closest('button')) return
+    drag = { id, startX: e.clientX, dx: 0 }
+    ;(e.currentTarget as HTMLElement).setPointerCapture?.(e.pointerId)
+    pauseToast(id)
+  }
+  function onMove(e: PointerEvent) {
+    if (drag) drag = { ...drag, dx: e.clientX - drag.startX }
+  }
+  function onUp(id: number) {
+    if (!drag || drag.id !== id) return
+    const dx = drag.dx
+    drag = null
+    if (Math.abs(dx) > 60) dismissToast(id)
+    else resumeToast(id)
+  }
+  const dragDx = (id: number) => (drag?.id === id ? drag.dx : 0)
+
+  // Run a toast action, then dismiss the toast unless it opted to stay open.
+  function runAction(a: ToastAction, id: number) {
+    a.onClick?.(id)
+    if (!a.keepOpen) dismissToast(id)
+  }
+</script>
+
+<div class="sv-toaster sv-toaster--{position}" use:portalToBody role="region" aria-label="Notifications">
+  {#each visible as t (t.id)}
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div
+      class="sv-toast sv-toast--{t.variant}"
+      class:is-dragging={drag?.id === t.id}
+      role={t.variant === 'error' || t.variant === 'warning' ? 'alert' : 'status'}
+      style:transform={dragDx(t.id) ? `translateX(${dragDx(t.id)}px)` : undefined}
+      style:opacity={dragDx(t.id) ? 1 - Math.min(Math.abs(dragDx(t.id)) / 160, 0.7) : undefined}
+      onmouseenter={() => pauseToast(t.id)}
+      onmouseleave={() => resumeToast(t.id)}
+      onfocusin={() => pauseToast(t.id)}
+      onfocusout={() => resumeToast(t.id)}
+      onpointerdown={(e) => onDown(e, t.id)}
+      onpointermove={onMove}
+      onpointerup={() => onUp(t.id)}
+      onpointercancel={() => onUp(t.id)}
+    >
+      {#if t.render}
+        <div class="sv-toast__content">{@render t.render(t)}</div>
+      {:else}
+        <span class="sv-toast__icon" aria-hidden="true">{icon(t.variant)}</span>
+        <div class="sv-toast__content">
+          {#if t.title}<div class="sv-toast__title">{t.title}</div>{/if}
+          <div class="sv-toast__msg">{t.message}</div>
+          {#if t.action || t.cancel}
+            <div class="sv-toast__actions">
+              {#if t.cancel}
+                <button type="button" class="sv-toast__action sv-toast__action--cancel" onclick={() => runAction(t.cancel!, t.id)}>{t.cancel.label}</button>
+              {/if}
+              {#if t.action}
+                <button type="button" class="sv-toast__action" onclick={() => runAction(t.action!, t.id)}>{t.action.label}</button>
+              {/if}
+            </div>
+          {/if}
+        </div>
+      {/if}
+      {#if t.dismissible}
+        <button type="button" class="sv-toast__x" aria-label="Dismiss" onclick={() => dismissToast(t.id)}>&times;</button>
+      {/if}
+    </div>
+  {/each}
+</div>
+
+<style>
+  :global(.sv-toaster) {
+    position: fixed; z-index: 2147483001; display: flex; flex-direction: column; gap: 8px;
+    padding: 16px; max-width: min(92vw, 380px); pointer-events: none;
+  }
+  :global(.sv-toaster--top-left) { top: 0; left: 0; }
+  :global(.sv-toaster--top-center) { top: 0; left: 50%; transform: translateX(-50%); align-items: center; }
+  :global(.sv-toaster--top-right) { top: 0; right: 0; }
+  :global(.sv-toaster--bottom-left) { bottom: 0; left: 0; flex-direction: column-reverse; }
+  :global(.sv-toaster--bottom-center) { bottom: 0; left: 50%; transform: translateX(-50%); align-items: center; flex-direction: column-reverse; }
+  :global(.sv-toaster--bottom-right) { bottom: 0; right: 0; flex-direction: column-reverse; }
+
+  :global(.sv-toast) {
+    pointer-events: auto;
+    display: flex; align-items: flex-start; gap: 10px; width: 100%; box-sizing: border-box;
+    padding: 11px 12px; border-radius: 10px; font-size: 13px; line-height: 1.45;
+    background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a);
+    border: 1px solid var(--sg-border, #e2e8f0);
+    border-inline-start: 3px solid var(--_accent, var(--sg-accent, #2563eb));
+    box-shadow: 0 12px 32px -12px rgba(15, 23, 42, 0.4);
+    animation: sv-toast-in 0.18s cubic-bezier(0.16, 1, 0.3, 1) both;
+    transition: transform 0.2s ease, opacity 0.2s ease;
+    touch-action: pan-y; /* let vertical scroll through; capture horizontal swipe */
+  }
+  :global(.sv-toast.is-dragging) { transition: none; cursor: grabbing; user-select: none; }
+  @keyframes sv-toast-in { from { opacity: 0; transform: translateY(6px) scale(0.98) } to { opacity: 1 } }
+  @media (prefers-reduced-motion: reduce) { :global(.sv-toast) { animation: none } }
+
+  :global(.sv-toast--success) { --_accent: var(--sg-success, #16a34a); }
+  :global(.sv-toast--error) { --_accent: var(--sg-danger, #dc2626); }
+  :global(.sv-toast--warning) { --_accent: var(--sg-warning, #d97706); }
+  :global(.sv-toast--info) { --_accent: var(--sg-accent, #2563eb); }
+
+  :global(.sv-toast__icon) { flex: none; width: 18px; height: 18px; display: grid; place-items: center; color: var(--_accent); font-weight: 700; }
+  :global(.sv-toast__content) { flex: 1; min-width: 0; }
+  :global(.sv-toast__title) { font-weight: 650; margin-bottom: 1px; }
+  :global(.sv-toast__msg) { color: var(--sg-fg, #0f172a); overflow-wrap: anywhere; }
+  :global(.sv-toast__actions) { display: flex; gap: 8px; margin-top: 9px; }
+  :global(.sv-toast__action) {
+    font: inherit; font-size: 12.5px; font-weight: 600; padding: 4px 11px; border-radius: 6px;
+    border: 1px solid var(--_accent, var(--sg-accent, #2563eb)); background: none; color: var(--_accent, var(--sg-accent, #2563eb));
+    cursor: pointer;
+  }
+  :global(.sv-toast__action:hover) { background: color-mix(in srgb, var(--_accent, #2563eb) 12%, transparent); }
+  :global(.sv-toast__action--cancel) { border-color: var(--sg-border, #e2e8f0); color: var(--sg-muted, #64748b); }
+  :global(.sv-toast__action--cancel:hover) { background: var(--sg-row-hover-bg, #f1f5f9); color: var(--sg-fg, #0f172a); }
+  :global(.sv-toast__x) {
+    flex: none; width: 22px; height: 22px; display: grid; place-items: center; margin: -2px -2px 0 0;
+    background: none; border: 0; color: var(--sg-muted, #64748b); cursor: pointer; border-radius: 5px; font-size: 17px; line-height: 1;
+  }
+  :global(.sv-toast__x:hover) { background: var(--sg-row-hover-bg, #f1f5f9); color: var(--sg-fg, #0f172a); }
+</style>

package/src/SvToaster.test.ts

@@ -1,95 +1,95 @@
-/**
- * Component tests for SvToaster: renders the queue, and swipe-to-dismiss.
- */
-import { afterEach, describe, expect, it } from 'vitest'
-import { mount, unmount, flushSync } from 'svelte'
-import SvToaster from './SvToaster.svelte'
-import { toast, clearToasts, toastStore } from './toast-store.svelte'
-
-function mountToaster() {
-  const target = document.createElement('div')
-  document.body.appendChild(target)
-  const app = mount(SvToaster, { target, props: {} })
-  flushSync()
-  return { destroy: () => { unmount(app); target.remove() } }
-}
-
-const toastEl = () => document.body.querySelector<HTMLElement>('.sv-toast')
-
-afterEach(() => {
-  clearToasts()
-  document.body.innerHTML = ''
-})
-
-describe('SvToaster', () => {
-  it('renders a queued toast', () => {
-    const { destroy } = mountToaster()
-    try {
-      toast('Saved', { duration: 0 })
-      flushSync()
-      expect(toastEl()).not.toBeNull()
-      expect(toastEl()!.textContent).toContain('Saved')
-    } finally { destroy() }
-  })
-
-  it('swiping a toast past the threshold dismisses it', () => {
-    const { destroy } = mountToaster()
-    try {
-      toast('Swipe me', { duration: 0 })
-      flushSync()
-      const el = toastEl()!
-      el.dispatchEvent(new MouseEvent('pointerdown', { bubbles: true, clientX: 100 }))
-      el.dispatchEvent(new MouseEvent('pointermove', { bubbles: true, clientX: 220 })) // dx 120 > 60
-      el.dispatchEvent(new MouseEvent('pointerup', { bubbles: true, clientX: 220 }))
-      flushSync()
-      expect(toastStore.toasts).toHaveLength(0)
-      expect(toastEl()).toBeNull()
-    } finally { destroy() }
-  })
-
-  it('clicking the dismiss (x) button removes the toast', () => {
-    const { destroy } = mountToaster()
-    try {
-      toast('Close me', { duration: 0 })
-      flushSync()
-      const x = document.body.querySelector<HTMLButtonElement>('.sv-toast__x')!
-      expect(x).not.toBeNull()
-      x.click()
-      flushSync()
-      expect(toastStore.toasts).toHaveLength(0)
-      expect(toastEl()).toBeNull()
-    } finally { destroy() }
-  })
-
-  it('a press that starts on the dismiss button does not begin a swipe', () => {
-    // The swipe handler must ignore presses on the toast's own controls,
-    // otherwise pointer-capture on the toast swallows the button's click.
-    const { destroy } = mountToaster()
-    try {
-      toast('Keep me', { duration: 0 })
-      flushSync()
-      const el = toastEl()!
-      const x = el.querySelector<HTMLButtonElement>('.sv-toast__x')!
-      x.dispatchEvent(new MouseEvent('pointerdown', { bubbles: true, clientX: 100, button: 0 }))
-      el.dispatchEvent(new MouseEvent('pointermove', { bubbles: true, clientX: 240 })) // dx 140 > 60
-      el.dispatchEvent(new MouseEvent('pointerup', { bubbles: true, clientX: 240 }))
-      flushSync()
-      // No swipe was started, so the toast survives (the click path owns dismiss).
-      expect(toastStore.toasts).toHaveLength(1)
-    } finally { destroy() }
-  })
-
-  it('a small swipe does not dismiss', () => {
-    const { destroy } = mountToaster()
-    try {
-      toast('Keep me', { duration: 0 })
-      flushSync()
-      const el = toastEl()!
-      el.dispatchEvent(new MouseEvent('pointerdown', { bubbles: true, clientX: 100 }))
-      el.dispatchEvent(new MouseEvent('pointermove', { bubbles: true, clientX: 130 })) // dx 30 < 60
-      el.dispatchEvent(new MouseEvent('pointerup', { bubbles: true, clientX: 130 }))
-      flushSync()
-      expect(toastStore.toasts).toHaveLength(1)
-    } finally { destroy() }
-  })
-})
+/**
+ * Component tests for SvToaster: renders the queue, and swipe-to-dismiss.
+ */
+import { afterEach, describe, expect, it } from 'vitest'
+import { mount, unmount, flushSync } from 'svelte'
+import SvToaster from './SvToaster.svelte'
+import { toast, clearToasts, toastStore } from './toast-store.svelte'
+
+function mountToaster() {
+  const target = document.createElement('div')
+  document.body.appendChild(target)
+  const app = mount(SvToaster, { target, props: {} })
+  flushSync()
+  return { destroy: () => { unmount(app); target.remove() } }
+}
+
+const toastEl = () => document.body.querySelector<HTMLElement>('.sv-toast')
+
+afterEach(() => {
+  clearToasts()
+  document.body.innerHTML = ''
+})
+
+describe('SvToaster', () => {
+  it('renders a queued toast', () => {
+    const { destroy } = mountToaster()
+    try {
+      toast('Saved', { duration: 0 })
+      flushSync()
+      expect(toastEl()).not.toBeNull()
+      expect(toastEl()!.textContent).toContain('Saved')
+    } finally { destroy() }
+  })
+
+  it('swiping a toast past the threshold dismisses it', () => {
+    const { destroy } = mountToaster()
+    try {
+      toast('Swipe me', { duration: 0 })
+      flushSync()
+      const el = toastEl()!
+      el.dispatchEvent(new MouseEvent('pointerdown', { bubbles: true, clientX: 100 }))
+      el.dispatchEvent(new MouseEvent('pointermove', { bubbles: true, clientX: 220 })) // dx 120 > 60
+      el.dispatchEvent(new MouseEvent('pointerup', { bubbles: true, clientX: 220 }))
+      flushSync()
+      expect(toastStore.toasts).toHaveLength(0)
+      expect(toastEl()).toBeNull()
+    } finally { destroy() }
+  })
+
+  it('clicking the dismiss (x) button removes the toast', () => {
+    const { destroy } = mountToaster()
+    try {
+      toast('Close me', { duration: 0 })
+      flushSync()
+      const x = document.body.querySelector<HTMLButtonElement>('.sv-toast__x')!
+      expect(x).not.toBeNull()
+      x.click()
+      flushSync()
+      expect(toastStore.toasts).toHaveLength(0)
+      expect(toastEl()).toBeNull()
+    } finally { destroy() }
+  })
+
+  it('a press that starts on the dismiss button does not begin a swipe', () => {
+    // The swipe handler must ignore presses on the toast's own controls,
+    // otherwise pointer-capture on the toast swallows the button's click.
+    const { destroy } = mountToaster()
+    try {
+      toast('Keep me', { duration: 0 })
+      flushSync()
+      const el = toastEl()!
+      const x = el.querySelector<HTMLButtonElement>('.sv-toast__x')!
+      x.dispatchEvent(new MouseEvent('pointerdown', { bubbles: true, clientX: 100, button: 0 }))
+      el.dispatchEvent(new MouseEvent('pointermove', { bubbles: true, clientX: 240 })) // dx 140 > 60
+      el.dispatchEvent(new MouseEvent('pointerup', { bubbles: true, clientX: 240 }))
+      flushSync()
+      // No swipe was started, so the toast survives (the click path owns dismiss).
+      expect(toastStore.toasts).toHaveLength(1)
+    } finally { destroy() }
+  })
+
+  it('a small swipe does not dismiss', () => {
+    const { destroy } = mountToaster()
+    try {
+      toast('Keep me', { duration: 0 })
+      flushSync()
+      const el = toastEl()!
+      el.dispatchEvent(new MouseEvent('pointerdown', { bubbles: true, clientX: 100 }))
+      el.dispatchEvent(new MouseEvent('pointermove', { bubbles: true, clientX: 130 })) // dx 30 < 60
+      el.dispatchEvent(new MouseEvent('pointerup', { bubbles: true, clientX: 130 }))
+      flushSync()
+      expect(toastStore.toasts).toHaveLength(1)
+    } finally { destroy() }
+  })
+})