From 0af04c43637ca70385e75015c6ac184efa071cda Mon Sep 17 00:00:00 2001
From: Agustin Delgado <agustindariodelgado@gmail.com>
Date: Fri, 18 Sep 2026 16:27:14 -0300
Subject: [PATCH 01/13] feat(toast): add the Toast primitive

`Toast.Provider` holds the list and the timers, and gives the manager to
the page through `useToastManager()` or `bind:manager`: `add`, `update`,
`close` and `promise`. `Toast.Viewport` is a `role="region"` landmark
named with the count of toasts, with `F6` in and out, and two live regions
beside it announce each toast without its buttons. `Toast.Root` is a
`dialog` that is not modal, or an `alertdialog` for a high priority, with
`Escape`, a swipe that follows the finger, and an exit animation from its
CSS. The timers stop on hover, on keyboard focus and in a background
window. The newest toasts stay up to a limit, and the older ones wait
inert behind them.

The `ariaHideOutside` primitive learned `data-hk-hide-outside-exempt`,
thus the viewport stays reachable behind a modal dialog.
---
 .changeset/toast-v1.md                        |   5 +
 docs/src/content/toast/api.json               | 352 ++++++++++++
 docs/src/content/toast/demos/action.svelte    |  47 ++
 docs/src/content/toast/demos/hero.svelte      |  41 ++
 docs/src/content/toast/demos/promise.svelte   |  35 ++
 docs/src/content/toast/demos/viewport.svelte  | 115 ++++
 docs/src/content/toast/index.md               | 128 +++++
 docs/src/lib/docs/nav.ts                      |   1 +
 packages/ui/package.json                      |   5 +
 packages/ui/src/lib/index.ts                  |   2 +
 .../ui/src/lib/internal/localized-strings.ts  |  24 +
 .../src/lib/primitives/aria-hide-outside.ts   |   9 +-
 packages/ui/src/lib/primitives/focus-trap.ts  |   3 +-
 packages/ui/src/lib/toast/README.md           |  67 +++
 packages/ui/src/lib/toast/TODO.md             |  20 +
 .../src/lib/toast/action/toast-action.svelte  |  42 ++
 .../ui/src/lib/toast/close/toast-close.svelte |  41 ++
 .../lib/toast/content/toast-content.svelte    |  24 +
 .../description/toast-description.svelte      |  32 ++
 packages/ui/src/lib/toast/index.parts.ts      |   8 +
 packages/ui/src/lib/toast/index.ts            |  56 ++
 packages/ui/src/lib/toast/provider/context.ts |  50 ++
 .../lib/toast/provider/toast-hook-test.svelte |  15 +
 .../toast/provider/toast-manager.svelte.ts    | 342 ++++++++++++
 .../toast/provider/toast-modal-test.svelte    |  31 ++
 .../lib/toast/provider/toast-provider.svelte  |  91 +++
 .../toast/provider/toast-shared-test.svelte   |  27 +
 .../src/lib/toast/provider/toast-ssr.test.ts  |  15 +
 .../src/lib/toast/provider/toast-test.svelte  |  67 +++
 .../ui/src/lib/toast/provider/toast.test.ts   | 524 ++++++++++++++++++
 packages/ui/src/lib/toast/root/context.ts     |  35 ++
 .../ui/src/lib/toast/root/toast-root.svelte   | 256 +++++++++
 .../ui/src/lib/toast/title/toast-title.svelte |  29 +
 packages/ui/src/lib/toast/types.ts            | 116 ++++
 .../lib/toast/viewport/toast-viewport.svelte  | 306 ++++++++++
 35 files changed, 2959 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/toast-v1.md
 create mode 100644 docs/src/content/toast/api.json
 create mode 100644 docs/src/content/toast/demos/action.svelte
 create mode 100644 docs/src/content/toast/demos/hero.svelte
 create mode 100644 docs/src/content/toast/demos/promise.svelte
 create mode 100644 docs/src/content/toast/demos/viewport.svelte
 create mode 100644 docs/src/content/toast/index.md
 create mode 100644 packages/ui/src/lib/toast/README.md
 create mode 100644 packages/ui/src/lib/toast/TODO.md
 create mode 100644 packages/ui/src/lib/toast/action/toast-action.svelte
 create mode 100644 packages/ui/src/lib/toast/close/toast-close.svelte
 create mode 100644 packages/ui/src/lib/toast/content/toast-content.svelte
 create mode 100644 packages/ui/src/lib/toast/description/toast-description.svelte
 create mode 100644 packages/ui/src/lib/toast/index.parts.ts
 create mode 100644 packages/ui/src/lib/toast/index.ts
 create mode 100644 packages/ui/src/lib/toast/provider/context.ts
 create mode 100644 packages/ui/src/lib/toast/provider/toast-hook-test.svelte
 create mode 100644 packages/ui/src/lib/toast/provider/toast-manager.svelte.ts
 create mode 100644 packages/ui/src/lib/toast/provider/toast-modal-test.svelte
 create mode 100644 packages/ui/src/lib/toast/provider/toast-provider.svelte
 create mode 100644 packages/ui/src/lib/toast/provider/toast-shared-test.svelte
 create mode 100644 packages/ui/src/lib/toast/provider/toast-ssr.test.ts
 create mode 100644 packages/ui/src/lib/toast/provider/toast-test.svelte
 create mode 100644 packages/ui/src/lib/toast/provider/toast.test.ts
 create mode 100644 packages/ui/src/lib/toast/root/context.ts
 create mode 100644 packages/ui/src/lib/toast/root/toast-root.svelte
 create mode 100644 packages/ui/src/lib/toast/title/toast-title.svelte
 create mode 100644 packages/ui/src/lib/toast/types.ts
 create mode 100644 packages/ui/src/lib/toast/viewport/toast-viewport.svelte

diff --git a/.changeset/toast-v1.md b/.changeset/toast-v1.md
new file mode 100644
index 00000000..f9bf2e35
--- /dev/null
+++ b/.changeset/toast-v1.md
@@ -0,0 +1,5 @@
+---
+'@human-kit/ui': minor
+---
+
+Add the Toast primitive with `Provider`, `Viewport`, `Root`, `Content`, `Title`, `Description`, `Action` and `Close`. The manager on `useToastManager()` or `bind:manager` has `add`, `update`, `close` and `promise`. The viewport is a `role="region"` landmark named with the count of toasts, with `F6` in and out, and two live regions beside it announce each toast without its buttons. Each toast is a `dialog` that is not modal, or an `alertdialog` for a high priority, with `Escape` to close, a swipe that follows the finger, and an exit animation from its CSS. The timers stop on hover, on keyboard focus and in a background window, the newest toasts stay up to a limit, and the viewport stays reachable behind a modal dialog. The `ariaHideOutside` primitive learned `data-hk-hide-outside-exempt`.
diff --git a/docs/src/content/toast/api.json b/docs/src/content/toast/api.json
new file mode 100644
index 00000000..96a4d2a0
--- /dev/null
+++ b/docs/src/content/toast/api.json
@@ -0,0 +1,352 @@
+{
+	"component": "toast",
+	"parts": [
+		{
+			"name": "Provider",
+			"description": "The list of toasts and the timers. It renders nothing of its own.",
+			"props": [
+				{
+					"name": "timeout",
+					"type": "number",
+					"required": false,
+					"default": "DEFAULT_TOAST_TIMEOUT",
+					"description": "The default time a toast stays, in milliseconds. `0` keeps each toast until a close."
+				},
+				{
+					"name": "limit",
+					"type": "number",
+					"required": false,
+					"default": "DEFAULT_TOAST_LIMIT",
+					"description": "The count of toasts on the screen. The older ones past it wait behind, hidden and inert,\nwith their timers stopped, and they come forward as the newer ones close."
+				},
+				{
+					"name": "manager",
+					"type": "ToastManager",
+					"required": false,
+					"default": null,
+					"description": "The manager: `add`, `update`, `close` and `promise`. Use `bind:manager` to read it in the\npage, or give one to share a list of toasts between two providers."
+				},
+				{
+					"name": "children",
+					"type": "Snippet",
+					"required": false,
+					"default": null,
+					"description": "The app, with a `Toast.Viewport` somewhere in it."
+				}
+			],
+			"dataAttributes": []
+		},
+		{
+			"name": "Viewport",
+			"description": "The region where the toasts land. It makes a div with role=\"region\", at the end of the body, and it renders the snippet for each toast.",
+			"props": [
+				{
+					"name": "children",
+					"type": "Snippet<[ToastItem]>",
+					"required": true,
+					"default": null,
+					"description": "The toast to render for each item. It gets the item; render a `Toast.Root` with it."
+				},
+				{
+					"name": "class",
+					"type": "string",
+					"required": false,
+					"default": "''",
+					"description": "The CSS class names of the element."
+				},
+				{
+					"name": "portal",
+					"type": "boolean",
+					"required": false,
+					"default": "true",
+					"description": "Renders the viewport at the end of `<body>`, thus it draws above the page. Set it to\n`false` to render it in place."
+				},
+				{
+					"name": "element",
+					"type": "HTMLDivElement | null",
+					"required": false,
+					"default": "null",
+					"description": "The bindable viewport element."
+				}
+			],
+			"dataAttributes": [
+				{
+					"name": "data-expanded",
+					"description": "Present while the pointer rests on the viewport, or the focus is in it."
+				},
+				{
+					"name": "data-toast-viewport",
+					"description": "Identifies the viewport element."
+				}
+			]
+		},
+		{
+			"name": "Root",
+			"description": "One toast. It makes a div with role=\"dialog\", or role=\"alertdialog\" for a high priority, that is not modal.",
+			"props": [
+				{
+					"name": "toast",
+					"type": "ToastItem",
+					"required": true,
+					"default": null,
+					"description": "The item from `Toast.Viewport`."
+				},
+				{
+					"name": "children",
+					"type": "Snippet",
+					"required": false,
+					"default": null,
+					"description": "The parts of the toast."
+				},
+				{
+					"name": "class",
+					"type": "string",
+					"required": false,
+					"default": "''",
+					"description": "The CSS class names of the element."
+				},
+				{
+					"name": "swipeDirection",
+					"type": "SwipeSide[]",
+					"required": false,
+					"default": "['bottom', 'right']",
+					"description": "The sides a swipe can push the toast out through: `bottom` and `right` by default. One side\nper axis counts. An empty array turns the swipe off. A swipe on `Toast.Close` or\n`Toast.Action` never starts."
+				},
+				{
+					"name": "element",
+					"type": "HTMLDivElement | null",
+					"required": false,
+					"default": "null",
+					"description": "The bindable toast element."
+				}
+			],
+			"dataAttributes": [
+				{
+					"name": "data-ending",
+					"description": "Present through the exit animation."
+				},
+				{
+					"name": "data-entering",
+					"description": "Present through the enter animation."
+				},
+				{
+					"name": "data-exiting",
+					"description": "Present through the exit animation."
+				},
+				{
+					"name": "data-expanded",
+					"description": "Present while the pointer rests on the viewport, or the focus is in it."
+				},
+				{
+					"name": "data-front",
+					"description": "Present on the toast in front."
+				},
+				{
+					"name": "data-limited",
+					"description": "Present on a toast past the limit. It is inert."
+				},
+				{
+					"name": "data-priority",
+					"description": "The priority of the item: `low` or `high`."
+				},
+				{
+					"name": "data-swipe-direction",
+					"description": "The side of the swipe in progress, or of the swipe that dismissed the toast."
+				},
+				{
+					"name": "data-swipe-dismissed",
+					"description": "Present when a swipe dismissed the toast, for the exit."
+				},
+				{
+					"name": "data-swiping",
+					"description": "Present while a swipe is in progress."
+				},
+				{
+					"name": "data-toast-id",
+					"description": "The id of the item."
+				},
+				{
+					"name": "data-toast-root",
+					"description": "Identifies the toast element."
+				},
+				{
+					"name": "data-type",
+					"description": "The `type` of the item, such as `success` or `loading`."
+				}
+			]
+		},
+		{
+			"name": "Content",
+			"description": "The message: the title and the description. Keep the buttons out of it.",
+			"props": [
+				{
+					"name": "children",
+					"type": "Snippet",
+					"required": false,
+					"default": null,
+					"description": "The title and the description."
+				},
+				{
+					"name": "class",
+					"type": "string",
+					"required": false,
+					"default": "''",
+					"description": "The CSS class names of the element."
+				}
+			],
+			"dataAttributes": [
+				{
+					"name": "data-priority",
+					"description": "The priority of the item: `low` or `high`."
+				},
+				{
+					"name": "data-toast-content",
+					"description": "Identifies the content element."
+				},
+				{
+					"name": "data-type",
+					"description": "The `type` of the item, such as `success` or `loading`."
+				}
+			]
+		},
+		{
+			"name": "Title",
+			"description": "The name of the toast. It gives its id to the toast as `aria-labelledby`, and it shows the `title` of the item without children.",
+			"props": [
+				{
+					"name": "children",
+					"type": "Snippet",
+					"required": false,
+					"default": null,
+					"description": "The title. Without children, it shows the `title` of the item."
+				},
+				{
+					"name": "class",
+					"type": "string",
+					"required": false,
+					"default": "''",
+					"description": "The CSS class names of the element."
+				},
+				{
+					"name": "id",
+					"type": "string",
+					"required": false,
+					"default": null,
+					"description": "The id of the element. The component makes one when you give none."
+				}
+			],
+			"dataAttributes": [
+				{
+					"name": "data-toast-title",
+					"description": "Identifies the title element."
+				}
+			]
+		},
+		{
+			"name": "Description",
+			"description": "The message of the toast. It gives its id to the toast as `aria-describedby`, and it shows the `description` of the item without children.",
+			"props": [
+				{
+					"name": "children",
+					"type": "Snippet",
+					"required": false,
+					"default": null,
+					"description": "The description. Without children, it shows the `description` of the item."
+				},
+				{
+					"name": "class",
+					"type": "string",
+					"required": false,
+					"default": "''",
+					"description": "The CSS class names of the element."
+				},
+				{
+					"name": "id",
+					"type": "string",
+					"required": false,
+					"default": null,
+					"description": "The id of the element. The component makes one when you give none."
+				}
+			],
+			"dataAttributes": [
+				{
+					"name": "data-toast-description",
+					"description": "Identifies the description element."
+				}
+			]
+		},
+		{
+			"name": "Close",
+			"description": "A button that closes the toast.",
+			"props": [
+				{
+					"name": "children",
+					"type": "Snippet",
+					"required": false,
+					"default": null,
+					"description": "The name on the button."
+				},
+				{
+					"name": "class",
+					"type": "string",
+					"required": false,
+					"default": "''",
+					"description": "The CSS class names of the element."
+				},
+				{
+					"name": "element",
+					"type": "HTMLButtonElement | null",
+					"required": false,
+					"default": "null",
+					"description": "The bindable button element."
+				}
+			],
+			"dataAttributes": [
+				{
+					"name": "data-toast-close",
+					"description": "Identifies the close button."
+				}
+			]
+		},
+		{
+			"name": "Action",
+			"description": "The one thing the toast offers. The press closes the toast.",
+			"props": [
+				{
+					"name": "children",
+					"type": "Snippet",
+					"required": false,
+					"default": null,
+					"description": "The name on the button."
+				},
+				{
+					"name": "class",
+					"type": "string",
+					"required": false,
+					"default": "''",
+					"description": "The CSS class names of the element."
+				},
+				{
+					"name": "keepOpen",
+					"type": "boolean",
+					"required": false,
+					"default": "false",
+					"description": "Keeps the toast open after the press. By default, the press closes it."
+				},
+				{
+					"name": "element",
+					"type": "HTMLButtonElement | null",
+					"required": false,
+					"default": "null",
+					"description": "The bindable button element."
+				}
+			],
+			"dataAttributes": [
+				{
+					"name": "data-toast-action",
+					"description": "Identifies the action button."
+				}
+			]
+		}
+	]
+}
diff --git a/docs/src/content/toast/demos/action.svelte b/docs/src/content/toast/demos/action.svelte
new file mode 100644
index 00000000..e1a4c47e
--- /dev/null
+++ b/docs/src/content/toast/demos/action.svelte
@@ -0,0 +1,47 @@
+<script lang="ts">
+	import XIcon from '@lucide/svelte/icons/x';
+	import { Toast } from '@human-kit/ui';
+	import type { ToastManager } from '@human-kit/ui';
+
+	let manager = $state<ToastManager>();
+	let deleted = $state(false);
+
+	const buttonClass =
+		'border border-neutral-300 px-3 py-1 text-sm text-neutral-900 outline-none hover:bg-neutral-100 focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 disabled:opacity-50 dark:border-neutral-700 dark:text-white dark:hover:bg-neutral-800 dark:focus-visible:outline-white';
+</script>
+
+<Toast.Provider bind:manager>
+	<button
+		type="button"
+		class={buttonClass}
+		disabled={deleted}
+		onclick={() => {
+			deleted = true;
+			manager?.add({ title: 'Message deleted', timeout: 8000 });
+		}}
+	>
+		{deleted ? 'Deleted' : 'Delete the message'}
+	</button>
+	<!-- The action closes the toast on the press: the offer is taken. -->
+	<Toast.Viewport class="toast-viewport">
+		{#snippet children(toast)}
+			<Toast.Root {toast} class="toast flex items-center gap-3">
+				<Toast.Content class="toast-content flex-1">
+					<Toast.Title class="text-sm text-neutral-900 dark:text-white" />
+				</Toast.Content>
+				<Toast.Action
+					onclick={() => (deleted = false)}
+					class="text-sm font-medium text-neutral-900 underline outline-none focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-neutral-900 dark:text-white dark:focus-visible:outline-white"
+				>
+					Undo
+				</Toast.Action>
+				<Toast.Close
+					aria-label="Close"
+					class="inline-flex size-6 items-center justify-center text-neutral-500 outline-none hover:text-neutral-900 focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-neutral-900 dark:hover:text-white dark:focus-visible:outline-white"
+				>
+					<XIcon class="size-4" />
+				</Toast.Close>
+			</Toast.Root>
+		{/snippet}
+	</Toast.Viewport>
+</Toast.Provider>
diff --git a/docs/src/content/toast/demos/hero.svelte b/docs/src/content/toast/demos/hero.svelte
new file mode 100644
index 00000000..46d88f4e
--- /dev/null
+++ b/docs/src/content/toast/demos/hero.svelte
@@ -0,0 +1,41 @@
+<script lang="ts">
+	import { Toast } from '@human-kit/ui';
+	import type { ToastManager } from '@human-kit/ui';
+	import Viewport from './viewport.svelte';
+
+	let manager = $state<ToastManager>();
+	let count = 0;
+
+	const buttonClass =
+		'border border-neutral-300 px-3 py-1 text-sm text-neutral-900 outline-none hover:bg-neutral-100 focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 dark:border-neutral-700 dark:text-white dark:hover:bg-neutral-800 dark:focus-visible:outline-white';
+</script>
+
+<!-- The viewport is a component of its own, thus each demo on this page shares its styles. -->
+<Toast.Provider bind:manager>
+	<div class="flex flex-wrap gap-2">
+		<button
+			type="button"
+			class={buttonClass}
+			onclick={() => {
+				count += 1;
+				manager?.add({ title: `File ${count} saved`, description: 'The copy is on the server.' });
+			}}
+		>
+			Add a toast
+		</button>
+		<button
+			type="button"
+			class={buttonClass}
+			onclick={() =>
+				manager?.add({
+					title: 'Connection lost',
+					description: 'The changes stay on this device until it is back.',
+					priority: 'high',
+					type: 'error'
+				})}
+		>
+			Add a high priority toast
+		</button>
+	</div>
+	<Viewport />
+</Toast.Provider>
diff --git a/docs/src/content/toast/demos/promise.svelte b/docs/src/content/toast/demos/promise.svelte
new file mode 100644
index 00000000..c8f2eaa8
--- /dev/null
+++ b/docs/src/content/toast/demos/promise.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { Toast } from '@human-kit/ui';
+	import type { ToastManager } from '@human-kit/ui';
+	import Viewport from './viewport.svelte';
+
+	let manager = $state<ToastManager>();
+
+	// A fake upload that fails one time in three, thus the demo shows both ends.
+	function upload() {
+		const task = new Promise<string>((resolve, reject) => {
+			setTimeout(() => {
+				if (Math.random() > 0.3) resolve('photo.png');
+				else reject(new Error('Timeout'));
+			}, 1500);
+		});
+		manager
+			?.promise(task, {
+				loading: 'Uploading photo.png',
+				success: (name) => `${name} is on the server`,
+				error: (error) => `The upload failed: ${(error as Error).message}`
+			})
+			.catch(() => {});
+	}
+</script>
+
+<Toast.Provider bind:manager>
+	<button
+		type="button"
+		onclick={upload}
+		class="border border-neutral-300 px-3 py-1 text-sm text-neutral-900 outline-none hover:bg-neutral-100 focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 dark:border-neutral-700 dark:text-white dark:hover:bg-neutral-800 dark:focus-visible:outline-white"
+	>
+		Upload
+	</button>
+	<Viewport />
+</Toast.Provider>
diff --git a/docs/src/content/toast/demos/viewport.svelte b/docs/src/content/toast/demos/viewport.svelte
new file mode 100644
index 00000000..b8c4cb80
--- /dev/null
+++ b/docs/src/content/toast/demos/viewport.svelte
@@ -0,0 +1,115 @@
+<script lang="ts">
+	import XIcon from '@lucide/svelte/icons/x';
+	import { Toast } from '@human-kit/ui';
+</script>
+
+<!-- One viewport for the app. The toasts stack in the corner, and they spread out while the
+     pointer rests on them or the focus is in them. -->
+<Toast.Viewport class="toast-viewport">
+	{#snippet children(toast)}
+		<Toast.Root {toast} class="toast">
+			<Toast.Content class="toast-content">
+				<Toast.Title class="text-sm font-medium text-neutral-900 dark:text-white" />
+				<Toast.Description class="text-sm text-neutral-600 dark:text-neutral-400" />
+			</Toast.Content>
+			<Toast.Close
+				aria-label="Close"
+				class="absolute top-2 right-2 inline-flex size-6 items-center justify-center text-neutral-500 outline-none hover:text-neutral-900 data-[focus-visible=true]:outline-solid data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-neutral-900 dark:hover:text-white dark:data-[focus-visible=true]:outline-white"
+			>
+				<XIcon class="size-4" />
+			</Toast.Close>
+		</Toast.Root>
+	{/snippet}
+</Toast.Viewport>
+
+<style>
+	:global(.toast-viewport) {
+		position: fixed;
+		inset-block-end: 1rem;
+		inset-inline-end: 1rem;
+		z-index: 100;
+		width: 20rem;
+		max-width: calc(100vw - 2rem);
+		height: var(--toast-frontmost-height, 0px);
+		outline: none;
+	}
+
+	:global(.toast) {
+		position: absolute;
+		inset-block-end: 0;
+		inset-inline-end: 0;
+		width: 100%;
+		padding: 0.75rem 2.25rem 0.75rem 1rem;
+		border: 1px solid var(--color-neutral-200);
+		background: white;
+		box-shadow: 0 8px 24px rgb(0 0 0 / 0.12);
+		outline: none;
+		transform: translateX(var(--toast-swipe-movement-x))
+			translateY(calc(var(--toast-swipe-movement-y) - var(--toast-index) * 12px))
+			scale(calc(1 - var(--toast-index) * 0.05));
+		transform-origin: bottom center;
+		transition:
+			transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
+			opacity 0.3s;
+		z-index: calc(1000 - var(--toast-index));
+	}
+
+	:global(.dark .toast) {
+		border-color: var(--color-neutral-800);
+		background: var(--color-neutral-900);
+	}
+
+	/* The toasts behind the front one take its height while the stack is collapsed. */
+	:global(.toast:not([data-front]):not([data-expanded])) {
+		height: var(--toast-frontmost-height);
+		overflow: hidden;
+	}
+
+	:global(.toast:not([data-front]):not([data-expanded]) .toast-content) {
+		opacity: 0;
+	}
+
+	:global(.toast[data-expanded]) {
+		transform: translateX(var(--toast-swipe-movement-x))
+			translateY(
+				calc(var(--toast-swipe-movement-y) - var(--toast-offset-y) - var(--toast-index) * 8px)
+			);
+	}
+
+	:global(.toast[data-swiping]) {
+		transition: none;
+	}
+
+	:global(.toast[data-entering]),
+	:global(.toast[data-exiting]) {
+		opacity: 0;
+		transform: translateY(1rem);
+	}
+
+	:global(.toast[data-swipe-dismissed][data-swipe-direction='right']) {
+		transform: translateX(calc(var(--toast-swipe-movement-x) + 100%));
+	}
+
+	:global(.toast[data-swipe-dismissed][data-swipe-direction='bottom']) {
+		transform: translateY(calc(var(--toast-swipe-movement-y) + 100%));
+	}
+
+	:global(.toast:focus-visible) {
+		outline: 2px solid var(--color-neutral-900);
+		outline-offset: 2px;
+	}
+
+	:global(.dark .toast:focus-visible) {
+		outline-color: white;
+	}
+
+	:global(.toast[data-limited]) {
+		visibility: hidden;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		:global(.toast) {
+			transition-duration: 0.01s;
+		}
+	}
+</style>
diff --git a/docs/src/content/toast/index.md b/docs/src/content/toast/index.md
new file mode 100644
index 00000000..d492383e
--- /dev/null
+++ b/docs/src/content/toast/index.md
@@ -0,0 +1,128 @@
+---
+title: Toast
+description: A short message about an event, for a time, in a landmark the keyboard reaches with F6, announced by a live region, with timers that stop while the user reads, a limit, a swipe to dismiss, and a promise that turns loading into success or error.
+---
+
+<script>
+	import { Demo, ApiReference } from '$lib/docs/components/index.js';
+	import Hero from './demos/hero.svelte';
+	import heroSource from './demos/hero.svelte?highlight';
+	import PromiseDemo from './demos/promise.svelte';
+	import promiseSource from './demos/promise.svelte?highlight';
+	import Action from './demos/action.svelte';
+	import actionSource from './demos/action.svelte?highlight';
+	import api from './api.json';
+</script>
+
+# Toast
+
+`Toast` shows a short message about an event, for a time, without a stop of the work. The provider holds the list, and the viewport is the landmark where the toasts land. A screen reader hears each message from a live region beside them.
+
+<Demo source={heroSource}><Hero /></Demo>
+
+## Anatomy
+
+`Toast.Provider` holds the list of toasts and the timers. Put one around the app. `Toast.Viewport` is the region where the toasts land. Put one in the provider, and give it a snippet that renders a `Toast.Root` for each item.
+
+`Toast.Content` holds `Toast.Title` and `Toast.Description`. `Toast.Action` and `Toast.Close` are the buttons, outside the content.
+
+```svelte
+<script>
+	import { Toast } from '@human-kit/ui';
+</script>
+
+<Toast.Provider>
+	<App />
+	<Toast.Viewport>
+		{#snippet children(toast)}
+			<Toast.Root {toast}>
+				<Toast.Content>
+					<Toast.Title />
+					<Toast.Description />
+				</Toast.Content>
+				<Toast.Close aria-label="Close">x</Toast.Close>
+			</Toast.Root>
+		{/snippet}
+	</Toast.Viewport>
+</Toast.Provider>
+```
+
+## The manager
+
+Call `useToastManager()` in a component under the provider, or use `bind:manager` on the provider. The manager has `add`, `update`, `close` and `promise`.
+
+`add` takes `title`, `description`, `type`, `timeout`, `priority` and `data`, and it answers the id of the toast. With the id of a toast that is on the screen, `add` updates it. `update` replaces the fields it names, and it gives the toast its full time again. `close` closes one toast, or all of them without an id.
+
+```svelte
+<script>
+	import { useToastManager } from '@human-kit/ui';
+
+	const toasts = useToastManager();
+</script>
+
+<button onclick={() => toasts.add({ title: 'Saved', description: 'The copy is on the server.' })}>
+	Save
+</button>
+```
+
+The title and the description are text. That text is what the screen reader hears. `Toast.Title` and `Toast.Description` show it without children, and your own children replace it on the screen.
+
+## A promise
+
+`promise` adds a `loading` toast, which stays until the promise settles. It then turns into `success` or `error`, with the text for each state, and the timer starts.
+
+<Demo source={promiseSource}><PromiseDemo /></Demo>
+
+## An action
+
+`Toast.Action` is the one thing the toast offers, such as `Undo`. The press closes the toast, because the offer is taken. `keepOpen` holds it for an action that changes the toast instead.
+
+<Demo source={actionSource}><Action /></Demo>
+
+## Timers
+
+A toast stays `timeout` milliseconds: 5000 by default, on the provider or on the toast. `0` keeps it until a close.
+
+The timers stop while the pointer rests on the viewport, while the keyboard focus is in it, and while the window is in the background. They start again with the time each toast had left. A toast that closes while the user reads it is a toast the user did not read.
+
+## The stack
+
+The viewport shows the newest toasts up to `limit`: 3 by default. The older ones wait behind, hidden and inert, with their timers stopped, and they come forward as the newer ones close.
+
+Each toast gets `--toast-index`, `--toast-offset-y` and `--toast-height`, and the viewport gets `--toast-frontmost-height`. `data-front` marks the toast in front. `data-expanded` is on the viewport and on each toast while the pointer rests on the viewport, or while the focus is in it. The viewport of the first demo stacks the toasts in the corner with them, and spreads them out on `data-expanded`. Its source is in `viewport.svelte`, under the demo.
+
+```css
+.toast {
+	position: absolute;
+	inset-block-end: 0;
+	transform: translateY(calc(var(--toast-index) * -12px)) scale(calc(1 - var(--toast-index) * 0.05));
+}
+
+.toast[data-expanded] {
+	transform: translateY(calc(-1 * var(--toast-offset-y) - var(--toast-index) * 8px));
+}
+```
+
+## A swipe
+
+A swipe pushes the toast out through one of `swipeDirection`: `bottom` and `right` by default. The toast follows the finger with `--toast-swipe-movement-x` and `--toast-swipe-movement-y`, and it comes back when the swipe is short. `data-swipe-dismissed` and `data-swipe-direction` are on the toast for the exit. A swipe never starts on `Toast.Close` or `Toast.Action`.
+
+## Usage guidelines
+
+- Keep the default `timeout` at 5 seconds or more. A user who reads slowly needs the time, and a user with a screen magnifier can miss a short toast.
+- Use `priority: 'high'` only for a message that cannot wait. It interrupts the screen reader.
+- Put a message the user must act on in a `Dialog`, not in a toast. A toast goes away.
+- Keep the buttons out of `Toast.Content`. The announcement reads the content, not the buttons.
+- Give the app one viewport. Two providers can share one `manager`, for example an app and a dialog in it.
+
+## Accessibility
+
+- `Toast.Viewport` is a `role="region"` landmark, named with the count of toasts. `F6` moves the focus into it from anywhere on the page, and back. A `Tab` past the last button goes back to where the focus was.
+- Two live regions beside the viewport announce each toast: `role="status"` for the normal priority, and `role="alert"` for the high priority. They are on the page before the first toast, thus the first toast is announced too.
+- `Toast.Root` is a `role="dialog"` that is not modal, or an `alertdialog` for the high priority. It has `aria-labelledby` from the title and `aria-describedby` from the description, and it is a tab stop.
+- `Escape` closes the focused toast. The focus moves to the next toast, or back to where it was.
+- The viewport stays reachable behind a modal `Dialog`.
+
+## API reference
+
+<ApiReference api={api} />
diff --git a/docs/src/lib/docs/nav.ts b/docs/src/lib/docs/nav.ts
index 130f45b7..a17d817e 100644
--- a/docs/src/lib/docs/nav.ts
+++ b/docs/src/lib/docs/nav.ts
@@ -56,6 +56,7 @@ export const nav: NavGroup[] = [
 			{ slug: 'drawer', title: 'Drawer' },
 			{ slug: 'menu', title: 'Menu' },
 			{ slug: 'popover', title: 'Popover' },
+			{ slug: 'toast', title: 'Toast' },
 			{ slug: 'tooltip', title: 'Tooltip' }
 		]
 	},
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 433bdc3b..001c564d 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -128,6 +128,11 @@
 			"svelte": "./dist/timepicker/index.js",
 			"default": "./dist/timepicker/index.js"
 		},
+		"./toast": {
+			"types": "./dist/toast/index.d.ts",
+			"svelte": "./dist/toast/index.js",
+			"default": "./dist/toast/index.js"
+		},
 		"./dialog": {
 			"types": "./dist/dialog/index.d.ts",
 			"svelte": "./dist/dialog/index.js",
diff --git a/packages/ui/src/lib/index.ts b/packages/ui/src/lib/index.ts
index 57f372f9..b1c62abf 100644
--- a/packages/ui/src/lib/index.ts
+++ b/packages/ui/src/lib/index.ts
@@ -29,6 +29,7 @@ export { Switch } from './switch/index.js';
 export { Tooltip } from './tooltip/index.js';
 export { Table } from './table/index.js';
 export { Tabs } from './tabs/index.js';
+export { Toast } from './toast/index.js';
 export { Toggle } from './toggle/index.js';
 export { ToggleGroup } from './toggle-group/index.js';
 export { TransferList } from './transfer-list/index.js';
@@ -77,6 +78,7 @@ export * from './switch/index.js';
 export * from './tooltip/index.js';
 export * from './table/index.js';
 export * from './tabs/index.js';
+export * from './toast/index.js';
 export * from './toggle/index.js';
 export * from './toggle-group/index.js';
 export * from './transfer-list/index.js';
diff --git a/packages/ui/src/lib/internal/localized-strings.ts b/packages/ui/src/lib/internal/localized-strings.ts
index a0db04f8..2b37d4d4 100644
--- a/packages/ui/src/lib/internal/localized-strings.ts
+++ b/packages/ui/src/lib/internal/localized-strings.ts
@@ -369,6 +369,30 @@ const LOCALIZED_STRINGS = {
 		fr: 'Vide',
 		de: 'Leer',
 		it: 'Vuoto'
+	},
+	'toast.notifications': {
+		en: 'Notifications',
+		es: 'Notificaciones',
+		pt: 'Notificações',
+		fr: 'Notifications',
+		de: 'Benachrichtigungen',
+		it: 'Notifiche'
+	},
+	'toast.oneNotification': {
+		en: '1 notification',
+		es: '1 notificación',
+		pt: '1 notificação',
+		fr: '1 notification',
+		de: '1 Benachrichtigung',
+		it: '1 notifica'
+	},
+	'toast.multipleNotifications': {
+		en: '{count} notifications',
+		es: '{count} notificaciones',
+		pt: '{count} notificações',
+		fr: '{count} notifications',
+		de: '{count} Benachrichtigungen',
+		it: '{count} notifiche'
 	}
 } as const satisfies Record<string, LocalizedTable>;
 
diff --git a/packages/ui/src/lib/primitives/aria-hide-outside.ts b/packages/ui/src/lib/primitives/aria-hide-outside.ts
index 2c152e35..c74ae52e 100644
--- a/packages/ui/src/lib/primitives/aria-hide-outside.ts
+++ b/packages/ui/src/lib/primitives/aria-hide-outside.ts
@@ -17,7 +17,14 @@ import { TOP_LAYER_SELECTOR } from './click-outside';
  * region staying reachable behind a modal — is intentional: status/alert content is transient
  * and announcing it is the whole point.
  */
-const LIVE_REGION_SELECTOR = '[aria-live], [role="status"], [role="alert"], [role="log"]';
+/**
+ * An element that opts out of the hide, without being a live region itself: a toast viewport,
+ * whose toasts are announced by a live region beside it, but whose buttons must stay reachable
+ * behind a modal.
+ */
+export const HIDE_OUTSIDE_EXEMPT_ATTRIBUTE = 'data-hk-hide-outside-exempt';
+
+const LIVE_REGION_SELECTOR = `[aria-live], [role="status"], [role="alert"], [role="log"], [${HIDE_OUTSIDE_EXEMPT_ATTRIBUTE}]`;
 
 /**
  * Elements the MutationObserver must never hide when they appear while a modal is active:
diff --git a/packages/ui/src/lib/primitives/focus-trap.ts b/packages/ui/src/lib/primitives/focus-trap.ts
index 6d17a310..23debef5 100644
--- a/packages/ui/src/lib/primitives/focus-trap.ts
+++ b/packages/ui/src/lib/primitives/focus-trap.ts
@@ -63,7 +63,8 @@ function resolveInitialFocus(
 	return initialFocus;
 }
 
-function getFocusableElements(container: HTMLElement): HTMLElement[] {
+/** The elements in `container` that a `Tab` can reach, in DOM order. */
+export function getFocusableElements(container: HTMLElement): HTMLElement[] {
 	return Array.from(container.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR)).filter(
 		(element) =>
 			// getClientRects covers display:none and detached nodes while still
diff --git a/packages/ui/src/lib/toast/README.md b/packages/ui/src/lib/toast/README.md
new file mode 100644
index 00000000..01186155
--- /dev/null
+++ b/packages/ui/src/lib/toast/README.md
@@ -0,0 +1,67 @@
+# Toast
+
+## Description
+
+`Toast` shows a short message about an event, for a time, without a stop of the work. The provider holds the list, and the viewport is the landmark where the toasts land. A screen reader hears each message from a live region beside them.
+
+## Anatomy
+
+- `Toast.Provider`
+- `Toast.Viewport`
+- `Toast.Root`
+- `Toast.Content`
+- `Toast.Title`
+- `Toast.Description`
+- `Toast.Action`
+- `Toast.Close`
+
+```svelte
+<Toast.Provider>
+	<App />
+	<Toast.Viewport>
+		{#snippet children(toast)}
+			<Toast.Root {toast}>
+				<Toast.Content>
+					<Toast.Title />
+					<Toast.Description />
+				</Toast.Content>
+				<Toast.Close aria-label="Close">x</Toast.Close>
+			</Toast.Root>
+		{/snippet}
+	</Toast.Viewport>
+</Toast.Provider>
+```
+
+## Usage guidelines
+
+- Put one `Toast.Provider` around the app, and one `Toast.Viewport` in it.
+- Call `useToastManager()` in a component under the provider, or `bind:manager` on the provider, to `add`, `update`, `close` and `promise`.
+- Give `title` and `description` as text: that text is the announcement. The parts show it without children.
+- Keep the buttons out of `Toast.Content`, thus the announcement does not read them.
+- Use `priority: 'high'` only for a message that cannot wait. It interrupts the screen reader.
+- Keep the default `timeout` at 5 seconds or more. A user who reads slowly needs the time.
+- Style the stack with `--toast-index`, `--toast-offset-y`, `--toast-height`, `--toast-frontmost-height`, `data-front` and `data-expanded`. Move the toast with `--toast-swipe-movement-x` and `--toast-swipe-movement-y`.
+
+## API reference
+
+- `Toast.Provider`
+  - `timeout?: number` (5000), `limit?: number` (3)
+  - `manager?: ToastManager` (bindable)
+- `Toast.Viewport`
+  - `children: Snippet<[ToastItem]>`, `portal?: boolean` (true)
+- `Toast.Root`
+  - `toast: ToastItem`, `swipeDirection?: SwipeSide[]` (`['bottom', 'right']`)
+- `Toast.Action`
+  - `keepOpen?: boolean`
+- `ToastManager`
+  - `add(options) => id`, `update(id, options | (toast) => options)`, `close(id?)`, `promise(promise, { loading, success, error })`
+  - `pauseTimers()`, `resumeTimers()`, `toasts`, `visibleToasts`
+
+## Accessibility
+
+- `Toast.Viewport` is a `role="region"` landmark, named with the count of toasts. `F6` moves the focus into it from anywhere on the page, and back.
+- Two live regions beside the viewport announce each toast: `role="status"` for the normal priority, and `role="alert"` for the high priority. The message is the title and the description.
+- `Toast.Root` is a `role="dialog"` that is not modal, or an `alertdialog` for the high priority. It has `aria-labelledby` from the title and `aria-describedby` from the description, and it is a tab stop.
+- `Escape` closes the focused toast, and the focus moves to the next toast, or back to where it was.
+- The timers stop while the pointer rests on the viewport, while the focus is in it, and while the window is in the background.
+- The viewport stays reachable behind a modal dialog.
diff --git a/packages/ui/src/lib/toast/TODO.md b/packages/ui/src/lib/toast/TODO.md
new file mode 100644
index 00000000..80109689
--- /dev/null
+++ b/packages/ui/src/lib/toast/TODO.md
@@ -0,0 +1,20 @@
+# Toast TODO
+
+## Goal
+
+Track Toast work with a single mandatory TODO format.
+
+## Backlog
+
+- [x] [M][P0][Area: Architecture][Owner: Unassigned][Target: Done] Create the `provider`, `viewport`, `root`, `content`, `title`, `description`, `action` and `close` parts, with a manager that holds the list and the timers.
+- [x] [M][P0][Area: Accessibility][Owner: Unassigned][Target: Done] Make the viewport a `role="region"` landmark named with the count, with `F6` in and out, and a tab that leaves it back to the previous focus.
+- [x] [M][P0][Area: Accessibility][Owner: Unassigned][Target: Done] Announce each toast from two live regions beside the viewport, thus the buttons are not part of the message.
+- [x] [S][P0][Area: Accessibility][Owner: Unassigned][Target: Done] Make each toast a `dialog` or an `alertdialog` that is not modal, named by its title and described by its description.
+- [x] [M][P0][Area: State][Owner: Unassigned][Target: Done] Stop the timers on hover, on keyboard focus, and in a background window, and give each toast the time it had left on resume.
+- [x] [S][P1][Area: State][Owner: Unassigned][Target: Done] Keep the newest toasts up to the limit, and hold the older ones inert with their timers stopped.
+- [x] [S][P1][Area: State][Owner: Unassigned][Target: Done] Add `promise` for a loading toast that turns into success or error.
+- [x] [M][P1][Area: Interaction][Owner: Unassigned][Target: Done] Dismiss on a swipe that follows the finger, with a threshold and a flick, and never from a button.
+- [x] [S][P1][Area: Accessibility][Owner: Unassigned][Target: Done] Keep the viewport reachable behind a modal dialog.
+- [x] [M][P0][Area: Testing][Owner: Unassigned][Target: Done] Add coverage for the region, the announcements, the timers, the keyboard, the buttons, the limit, the swipe, the shared manager and SSR.
+- [ ] [S][P2][Area: API][Owner: Unassigned][Target: Backlog] Add a `Toast.Positioner` for a toast anchored to an element, such as a button.
+- [ ] [S][P2][Area: Interaction][Owner: Unassigned][Target: Backlog] Add a `data-hk-swipe-ignore` note to the docs for content of the consumer that must not start a swipe.
diff --git a/packages/ui/src/lib/toast/action/toast-action.svelte b/packages/ui/src/lib/toast/action/toast-action.svelte
new file mode 100644
index 00000000..c72a570c
--- /dev/null
+++ b/packages/ui/src/lib/toast/action/toast-action.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+	import { ButtonRoot } from '../../button/index.js';
+	import { SWIPE_IGNORE_ATTRIBUTE } from '../../primitives/swipe-gesture';
+	import { useToastContext } from '../root/context';
+	import type { ToastActionProps } from '../types.js';
+
+	/**
+	 * Toast.Action — a button that does the one thing the toast offers, such as `Undo`.
+	 *
+	 * The press closes the toast, because the offer is taken. `keepOpen` holds it for an action
+	 * that changes the toast instead. A swipe never starts on it.
+	 */
+	let {
+		children,
+		class: className = '',
+		keepOpen = false,
+		element = $bindable<HTMLButtonElement | null>(null),
+		onclick,
+		...restProps
+	}: ToastActionProps = $props();
+
+	const ctx = useToastContext('Toast.Action');
+	const swipeIgnore = { [SWIPE_IGNORE_ATTRIBUTE]: '' };
+
+	function handleClick(event: MouseEvent & { currentTarget: EventTarget & HTMLButtonElement }) {
+		onclick?.(event);
+		if (event.defaultPrevented || keepOpen) return;
+		ctx.close();
+	}
+</script>
+
+<ButtonRoot
+	{...restProps}
+	{...swipeIgnore}
+	bind:element
+	class={className}
+	type="button"
+	data-toast-action="true"
+	onclick={handleClick}
+>
+	{@render children?.()}
+</ButtonRoot>
diff --git a/packages/ui/src/lib/toast/close/toast-close.svelte b/packages/ui/src/lib/toast/close/toast-close.svelte
new file mode 100644
index 00000000..2a6d1322
--- /dev/null
+++ b/packages/ui/src/lib/toast/close/toast-close.svelte
@@ -0,0 +1,41 @@
+<script lang="ts">
+	import { ButtonRoot } from '../../button/index.js';
+	import { SWIPE_IGNORE_ATTRIBUTE } from '../../primitives/swipe-gesture';
+	import { useToastContext } from '../root/context';
+	import type { ToastCloseProps } from '../types.js';
+
+	/**
+	 * Toast.Close — a button that closes the toast.
+	 *
+	 * Put it outside `Toast.Content`, thus the announcement of the toast does not read it. Give
+	 * it a name, in its text or in `aria-label`. A swipe never starts on it.
+	 */
+	let {
+		children,
+		class: className = '',
+		element = $bindable<HTMLButtonElement | null>(null),
+		onclick,
+		...restProps
+	}: ToastCloseProps = $props();
+
+	const ctx = useToastContext('Toast.Close');
+	const swipeIgnore = { [SWIPE_IGNORE_ATTRIBUTE]: '' };
+
+	function handleClick(event: MouseEvent & { currentTarget: EventTarget & HTMLButtonElement }) {
+		onclick?.(event);
+		if (event.defaultPrevented) return;
+		ctx.close();
+	}
+</script>
+
+<ButtonRoot
+	{...restProps}
+	{...swipeIgnore}
+	bind:element
+	class={className}
+	type="button"
+	data-toast-close="true"
+	onclick={handleClick}
+>
+	{@render children?.()}
+</ButtonRoot>
diff --git a/packages/ui/src/lib/toast/content/toast-content.svelte b/packages/ui/src/lib/toast/content/toast-content.svelte
new file mode 100644
index 00000000..93900bd7
--- /dev/null
+++ b/packages/ui/src/lib/toast/content/toast-content.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { useToastContext } from '../root/context';
+	import type { ToastContentProps } from '../types.js';
+
+	/**
+	 * Toast.Content — the message: the title and the description.
+	 *
+	 * Keep the buttons out of it. The message is what the viewport announces, and the buttons
+	 * are what the user presses after it.
+	 */
+	let { children, class: className = '', ...restProps }: ToastContentProps = $props();
+
+	const ctx = useToastContext('Toast.Content');
+</script>
+
+<div
+	{...restProps}
+	class={className}
+	data-toast-content="true"
+	data-type={ctx.toast.type}
+	data-priority={ctx.toast.priority}
+>
+	{@render children?.()}
+</div>
diff --git a/packages/ui/src/lib/toast/description/toast-description.svelte b/packages/ui/src/lib/toast/description/toast-description.svelte
new file mode 100644
index 00000000..964c796a
--- /dev/null
+++ b/packages/ui/src/lib/toast/description/toast-description.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { useToastContext } from '../root/context';
+	import type { ToastDescriptionProps } from '../types.js';
+
+	/**
+	 * Toast.Description — the message of the toast.
+	 *
+	 * It registers its id with the root, which gives it to the toast as `aria-describedby`.
+	 * Without children, it shows the `description` of the item.
+	 */
+	let {
+		children,
+		class: className = '',
+		id: idProp,
+		...restProps
+	}: ToastDescriptionProps = $props();
+
+	const ctx = useToastContext('Toast.Description');
+	const generatedId = $props.id();
+	const id = $derived(idProp ?? generatedId);
+
+	// The returned unregister runs on destroy, and again whenever the id changes.
+	$effect(() => ctx.registerDescription(id));
+</script>
+
+<p {...restProps} {id} class={className} data-toast-description="true">
+	{#if children}
+		{@render children()}
+	{:else}
+		{ctx.toast.description}
+	{/if}
+</p>
diff --git a/packages/ui/src/lib/toast/index.parts.ts b/packages/ui/src/lib/toast/index.parts.ts
new file mode 100644
index 00000000..72d1e067
--- /dev/null
+++ b/packages/ui/src/lib/toast/index.parts.ts
@@ -0,0 +1,8 @@
+export { default as Provider } from './provider/toast-provider.svelte';
+export { default as Viewport } from './viewport/toast-viewport.svelte';
+export { default as Root } from './root/toast-root.svelte';
+export { default as Content } from './content/toast-content.svelte';
+export { default as Title } from './title/toast-title.svelte';
+export { default as Description } from './description/toast-description.svelte';
+export { default as Close } from './close/toast-close.svelte';
+export { default as Action } from './action/toast-action.svelte';
diff --git a/packages/ui/src/lib/toast/index.ts b/packages/ui/src/lib/toast/index.ts
new file mode 100644
index 00000000..95182105
--- /dev/null
+++ b/packages/ui/src/lib/toast/index.ts
@@ -0,0 +1,56 @@
+import type { ComponentProps } from 'svelte';
+import type ToastActionComponent from './action/toast-action.svelte';
+import type ToastCloseComponent from './close/toast-close.svelte';
+import type ToastContentComponent from './content/toast-content.svelte';
+import type ToastDescriptionComponent from './description/toast-description.svelte';
+import type ToastProviderComponent from './provider/toast-provider.svelte';
+import type ToastRootComponent from './root/toast-root.svelte';
+import type ToastTitleComponent from './title/toast-title.svelte';
+import type ToastViewportComponent from './viewport/toast-viewport.svelte';
+
+export * as Toast from './index.parts.js';
+
+export { default as ToastProvider } from './provider/toast-provider.svelte';
+export { default as ToastViewport } from './viewport/toast-viewport.svelte';
+export { default as ToastRoot } from './root/toast-root.svelte';
+export { default as ToastContent } from './content/toast-content.svelte';
+export { default as ToastTitle } from './title/toast-title.svelte';
+export { default as ToastDescription } from './description/toast-description.svelte';
+export { default as ToastClose } from './close/toast-close.svelte';
+export { default as ToastAction } from './action/toast-action.svelte';
+export type ToastProviderProps = ComponentProps<typeof ToastProviderComponent>;
+export type ToastViewportProps = ComponentProps<typeof ToastViewportComponent>;
+export type ToastRootProps = ComponentProps<typeof ToastRootComponent>;
+export type ToastContentProps = ComponentProps<typeof ToastContentComponent>;
+export type ToastTitleProps = ComponentProps<typeof ToastTitleComponent>;
+export type ToastDescriptionProps = ComponentProps<typeof ToastDescriptionComponent>;
+export type ToastCloseProps = ComponentProps<typeof ToastCloseComponent>;
+export type ToastActionProps = ComponentProps<typeof ToastActionComponent>;
+export {
+	getToastProviderContext,
+	setToastProviderContext,
+	useToastManager,
+	useToastProviderContext,
+	type ToastProviderContext
+} from './provider/context.js';
+export {
+	getToastContext,
+	setToastContext,
+	useToastContext,
+	type ToastContext
+} from './root/context.js';
+export {
+	createToastManager,
+	DEFAULT_TOAST_LIMIT,
+	DEFAULT_TOAST_TIMEOUT,
+	type ToastItem,
+	type ToastManager,
+	type ToastOptions,
+	type ToastPriority,
+	type ToastPromiseOptions,
+	type ToastStatus,
+	type ToastUpdate
+} from './provider/toast-manager.svelte.js';
+
+import * as ToastParts from './index.parts.js';
+export default ToastParts;
diff --git a/packages/ui/src/lib/toast/provider/context.ts b/packages/ui/src/lib/toast/provider/context.ts
new file mode 100644
index 00000000..ce170860
--- /dev/null
+++ b/packages/ui/src/lib/toast/provider/context.ts
@@ -0,0 +1,50 @@
+import { getContext, setContext } from 'svelte';
+import type { InternalToastManager, ToastManager } from './toast-manager.svelte';
+
+const PROVIDER_KEY = Symbol('toast-provider');
+
+export type ToastProviderContext = {
+	manager: InternalToastManager;
+	/** The pointer rests on the viewport. */
+	readonly hovering: boolean;
+	/** The focus is in the viewport. */
+	readonly focused: boolean;
+	/** The toasts are spread out: the pointer rests on them, or the focus is in them. */
+	readonly expanded: boolean;
+	/** The viewport element. */
+	readonly viewportElement: HTMLElement | null;
+	/** The height of each toast on the screen, by id, for a stack. */
+	readonly heights: ReadonlyMap<string, number>;
+	setHovering: (hovering: boolean) => void;
+	setFocused: (focused: boolean) => void;
+	setViewportElement: (element: HTMLElement | null) => void;
+	setHeight: (id: string, height: number | null) => void;
+	/** Moves the focus to the next toast, or back to where it was before the viewport. */
+	focusAfterClose: (id: string) => void;
+	/** The viewport gives the function behind `focusAfterClose`. */
+	setFocusAfterClose: (handler: ((id: string) => void) | null) => void;
+};
+
+export function setToastProviderContext(context: ToastProviderContext) {
+	setContext(PROVIDER_KEY, context);
+}
+
+export function getToastProviderContext(): ToastProviderContext | undefined {
+	return getContext<ToastProviderContext | undefined>(PROVIDER_KEY);
+}
+
+export function useToastProviderContext(part = 'Toast'): ToastProviderContext {
+	const context = getToastProviderContext();
+	if (!context) {
+		throw new Error(`${part} must be used within Toast.Provider.`);
+	}
+	return context;
+}
+
+/**
+ * The manager of the nearest `Toast.Provider`: `add`, `update`, `close` and `promise`. Call it
+ * in a component under the provider, at the start of its script.
+ */
+export function useToastManager<Data = unknown>(): ToastManager<Data> {
+	return useToastProviderContext('useToastManager').manager as ToastManager<Data>;
+}
diff --git a/packages/ui/src/lib/toast/provider/toast-hook-test.svelte b/packages/ui/src/lib/toast/provider/toast-hook-test.svelte
new file mode 100644
index 00000000..3b8df4f3
--- /dev/null
+++ b/packages/ui/src/lib/toast/provider/toast-hook-test.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { useToastManager } from '../index';
+
+	// A component under the provider reaches the manager without a binding.
+	const manager = useToastManager();
+</script>
+
+<button
+	type="button"
+	data-testid="add-from-child"
+	onclick={() => manager.add({ title: 'From child' })}
+>
+	Add
+</button>
+<span data-testid="count">{manager.visibleToasts.length}</span>
diff --git a/packages/ui/src/lib/toast/provider/toast-manager.svelte.ts b/packages/ui/src/lib/toast/provider/toast-manager.svelte.ts
new file mode 100644
index 00000000..d47cda3f
--- /dev/null
+++ b/packages/ui/src/lib/toast/provider/toast-manager.svelte.ts
@@ -0,0 +1,342 @@
+import { untrack } from 'svelte';
+
+export type ToastPriority = 'low' | 'high';
+export type ToastStatus = 'open' | 'ending';
+
+/** The default time a toast stays, in milliseconds. `0` keeps a toast until a close. */
+export const DEFAULT_TOAST_TIMEOUT = 5000;
+/** The default count of toasts on the screen. The older ones wait behind. */
+export const DEFAULT_TOAST_LIMIT = 3;
+
+export type ToastOptions<Data = unknown> = {
+	/** The id of the toast. With the id of a toast that is on the screen, `add` updates it. */
+	id?: string;
+	/** The title. It names the toast, and it is the first part of the announcement. */
+	title?: string;
+	/** The description. It is the message when there is no title. */
+	description?: string;
+	/**
+	 * A kind of your own, such as `success` or `error`, for `data-type` on the toast. A `loading`
+	 * toast stays until an update, because a task that runs has no end that a timer knows.
+	 */
+	type?: string;
+	/** The time the toast stays, in milliseconds. `0` keeps it until a close. */
+	timeout?: number;
+	/**
+	 * How the screen reader hears it. `low` is announced when the user is idle, and `high`
+	 * interrupts, thus the toast is `alertdialog`. Use `high` only for a message that cannot wait.
+	 */
+	priority?: ToastPriority;
+	/** Data of your own, for the content you render. */
+	data?: Data;
+	/** Runs when the toast starts to close. */
+	onClose?: () => void;
+	/** Runs when the toast leaves the DOM, after its exit animation. */
+	onRemove?: () => void;
+};
+
+export type ToastItem<Data = unknown> = {
+	readonly id: string;
+	readonly title: string | undefined;
+	readonly description: string | undefined;
+	readonly type: string | undefined;
+	readonly timeout: number;
+	readonly priority: ToastPriority;
+	readonly data: Data | undefined;
+	/** `open` on the screen, `ending` through the exit animation. */
+	readonly status: ToastStatus;
+	/** The toast is past the limit of the viewport. It waits, hidden and inert. */
+	readonly limited: boolean;
+	/** Goes up on each update. Replay an attention animation from it. */
+	readonly updateKey: number;
+	readonly onClose: (() => void) | undefined;
+	readonly onRemove: (() => void) | undefined;
+};
+
+export type ToastUpdate<Data = unknown> =
+	Omit<ToastOptions<Data>, 'id'> | ((toast: ToastItem<Data>) => Omit<ToastOptions<Data>, 'id'>);
+
+export type ToastPromiseOptions<Value, Data = unknown> = {
+	loading: string | Omit<ToastOptions<Data>, 'id'>;
+	success:
+		| string
+		| Omit<ToastOptions<Data>, 'id'>
+		| ((value: Value) => string | Omit<ToastOptions<Data>, 'id'>);
+	error:
+		| string
+		| Omit<ToastOptions<Data>, 'id'>
+		| ((error: unknown) => string | Omit<ToastOptions<Data>, 'id'>);
+};
+
+export type ToastManager<Data = unknown> = {
+	/** The toasts, the newest first. Render them in `Toast.Viewport`. */
+	readonly toasts: readonly ToastItem<Data>[];
+	/** The toasts on the screen: the newest ones, up to the limit. */
+	readonly visibleToasts: readonly ToastItem<Data>[];
+	/** Adds a toast, and answers its id. */
+	add: (options: ToastOptions<Data>) => string;
+	/** Updates a toast. The options replace the fields they name. */
+	update: (id: string, update: ToastUpdate<Data>) => void;
+	/** Starts the close of one toast, or of all of them. */
+	close: (id?: string) => void;
+	/** Takes a toast out of the list. `Toast.Root` calls it after the exit animation. */
+	remove: (id: string) => void;
+	/** Adds a `loading` toast that turns into `success` or `error` with the promise. */
+	promise: <Value>(
+		promise: Promise<Value>,
+		options: ToastPromiseOptions<Value, Data>
+	) => Promise<Value>;
+	/** Stops every timer, for example while the pointer rests on the viewport. */
+	pauseTimers: () => void;
+	/** Starts the timers again, with the time each toast had left. */
+	resumeTimers: () => void;
+	/** Whether the timers are stopped. */
+	readonly paused: boolean;
+};
+
+export type CreateToastManagerOptions = {
+	/** The default time a toast stays, in milliseconds. */
+	timeout?: () => number;
+	/** The count of toasts on the screen. */
+	limit?: () => number;
+};
+
+type Timer = {
+	timeoutId: ReturnType<typeof setTimeout> | null;
+	remaining: number;
+	startedAt: number;
+};
+
+let toastCounter = 0;
+
+function nextToastId() {
+	toastCounter += 1;
+	return `toast-${toastCounter}`;
+}
+
+function resolveText<Value>(
+	source: string | Omit<ToastOptions, 'id'> | ((value: Value) => string | Omit<ToastOptions, 'id'>),
+	value: Value
+): Omit<ToastOptions, 'id'> {
+	const resolved = typeof source === 'function' ? source(value) : source;
+	return typeof resolved === 'string' ? { description: resolved } : resolved;
+}
+
+/**
+ * The list of toasts and their timers. `Toast.Provider` makes one, and gives it to the parts
+ * and to the page through `useToastManager`. The timers live here and not in the toasts,
+ * thus one pause stops all of them, and a resume gives each one the time it had left.
+ */
+export function createToastManager<Data = unknown>(
+	options: CreateToastManagerOptions = {}
+): InternalToastManager<Data> {
+	let toasts = $state<ToastItem<Data>[]>([]);
+	let paused = $state(false);
+	// eslint-disable-next-line svelte/prefer-svelte-reactivity -- the timers are bookkeeping, not state: nothing renders from them.
+	const timers = new Map<string, Timer>();
+
+	const getTimeout = options.timeout ?? (() => DEFAULT_TOAST_TIMEOUT);
+	const getLimit = options.limit ?? (() => DEFAULT_TOAST_LIMIT);
+
+	const visibleToasts = $derived(toasts.filter((toast) => !toast.limited));
+
+	function setToasts(next: ToastItem<Data>[]) {
+		toasts = applyLimit(next);
+	}
+
+	// The newest toasts stay on the screen; the older ones past the limit wait, inert. A toast on
+	// its way out no longer takes a place.
+	function applyLimit(list: ToastItem<Data>[]): ToastItem<Data>[] {
+		const limit = Math.max(0, untrack(getLimit));
+		let active = 0;
+		return list.map((toast) => {
+			if (toast.status === 'ending') return toast.limited ? { ...toast, limited: false } : toast;
+			const limited = active >= limit;
+			active += 1;
+			return toast.limited === limited ? toast : { ...toast, limited };
+		});
+	}
+
+	function hasTimer(toast: ToastItem<Data>) {
+		return toast.timeout > 0 && toast.type !== 'loading' && toast.status !== 'ending';
+	}
+
+	function clearTimer(id: string) {
+		const timer = timers.get(id);
+		if (!timer) return;
+		if (timer.timeoutId !== null) clearTimeout(timer.timeoutId);
+		timers.delete(id);
+	}
+
+	function startTimer(id: string, duration: number) {
+		clearTimer(id);
+		const timer: Timer = { timeoutId: null, remaining: duration, startedAt: Date.now() };
+		timers.set(id, timer);
+		if (!paused) run(id, timer);
+	}
+
+	function run(id: string, timer: Timer) {
+		timer.startedAt = Date.now();
+		timer.timeoutId = setTimeout(() => {
+			timers.delete(id);
+			close(id);
+		}, timer.remaining);
+	}
+
+	// A timer runs only for a toast the user can see. A hidden one that closes on its own is a
+	// message nobody read.
+	function syncTimers() {
+		for (const toast of untrack(() => toasts)) {
+			const wants = hasTimer(toast) && !toast.limited;
+			const has = timers.has(toast.id);
+			if (wants && !has) startTimer(toast.id, toast.timeout);
+			if (!wants && has) clearTimer(toast.id);
+		}
+	}
+
+	function pauseTimers() {
+		if (paused) return;
+		paused = true;
+		for (const timer of timers.values()) {
+			if (timer.timeoutId === null) continue;
+			clearTimeout(timer.timeoutId);
+			timer.timeoutId = null;
+			timer.remaining = Math.max(0, timer.remaining - (Date.now() - timer.startedAt));
+		}
+	}
+
+	function resumeTimers() {
+		if (!paused) return;
+		paused = false;
+		for (const [id, timer] of timers) {
+			if (timer.timeoutId === null) run(id, timer);
+		}
+	}
+
+	function add(options: ToastOptions<Data>): string {
+		const id = options.id ?? nextToastId();
+		const existing = untrack(() => toasts.find((toast) => toast.id === id));
+		if (existing && existing.status !== 'ending') {
+			update(id, options);
+			return id;
+		}
+		const toast: ToastItem<Data> = {
+			id,
+			title: options.title,
+			description: options.description,
+			type: options.type,
+			timeout: options.timeout ?? untrack(getTimeout),
+			priority: options.priority ?? 'low',
+			data: options.data,
+			status: 'open',
+			limited: false,
+			updateKey: 0,
+			onClose: options.onClose,
+			onRemove: options.onRemove
+		};
+		setToasts([toast, ...untrack(() => toasts).filter((candidate) => candidate.id !== id)]);
+		syncTimers();
+		return id;
+	}
+
+	function update(id: string, incoming: ToastUpdate<Data>) {
+		const current = untrack(() => toasts.find((toast) => toast.id === id));
+		if (!current || current.status === 'ending') return;
+		const changes = typeof incoming === 'function' ? incoming(current) : incoming;
+		const next: ToastItem<Data> = {
+			...current,
+			...changes,
+			timeout:
+				changes.timeout ??
+				(Object.hasOwn(changes, 'timeout') ? untrack(getTimeout) : current.timeout),
+			priority: changes.priority ?? current.priority,
+			updateKey: current.updateKey + 1
+		};
+		setToasts(untrack(() => toasts).map((toast) => (toast.id === id ? next : toast)));
+		// An update is a new message: the toast gets its full time again.
+		clearTimer(id);
+		syncTimers();
+	}
+
+	function close(id?: string) {
+		const targets = untrack(() =>
+			toasts.filter((toast) => (id === undefined || toast.id === id) && toast.status !== 'ending')
+		);
+		if (targets.length === 0) return;
+		for (const toast of targets) clearTimer(toast.id);
+		setToasts(
+			untrack(() => toasts).map((toast) =>
+				targets.includes(toast) ? { ...toast, status: 'ending' as const } : toast
+			)
+		);
+		syncTimers();
+		for (const toast of targets) toast.onClose?.();
+	}
+
+	function remove(id: string) {
+		const target = untrack(() => toasts.find((toast) => toast.id === id));
+		if (!target) return;
+		clearTimer(id);
+		setToasts(untrack(() => toasts).filter((toast) => toast.id !== id));
+		syncTimers();
+		target.onRemove?.();
+	}
+
+	async function promise<Value>(
+		task: Promise<Value>,
+		promiseOptions: ToastPromiseOptions<Value, Data>
+	): Promise<Value> {
+		const loading = resolveText(promiseOptions.loading as never, undefined) as Omit<
+			ToastOptions<Data>,
+			'id'
+		>;
+		const id = add({ type: 'loading', ...loading, timeout: 0 });
+		try {
+			const value = await task;
+			const success = resolveText(promiseOptions.success as never, value) as Omit<
+				ToastOptions<Data>,
+				'id'
+			>;
+			update(id, { type: 'success', timeout: undefined, ...success });
+			return value;
+		} catch (error) {
+			const failure = resolveText(promiseOptions.error as never, error) as Omit<
+				ToastOptions<Data>,
+				'id'
+			>;
+			update(id, { type: 'error', timeout: undefined, ...failure });
+			throw error;
+		}
+	}
+
+	function syncLimit() {
+		toasts = applyLimit(untrack(() => toasts));
+		syncTimers();
+	}
+
+	return {
+		get toasts() {
+			return toasts;
+		},
+		get visibleToasts() {
+			return visibleToasts;
+		},
+		get paused() {
+			return paused;
+		},
+		add,
+		update,
+		close,
+		remove,
+		promise,
+		pauseTimers,
+		resumeTimers,
+		syncLimit
+	};
+}
+
+/** The manager with the calls that only the parts make. */
+export type InternalToastManager<Data = unknown> = ToastManager<Data> & {
+	/** `Toast.Provider` applies a new limit. */
+	syncLimit: () => void;
+};
diff --git a/packages/ui/src/lib/toast/provider/toast-modal-test.svelte b/packages/ui/src/lib/toast/provider/toast-modal-test.svelte
new file mode 100644
index 00000000..5b89fdc2
--- /dev/null
+++ b/packages/ui/src/lib/toast/provider/toast-modal-test.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { Dialog } from '../../dialog/index';
+	import { Toast } from '../index';
+	import type { ToastManager } from '../index';
+
+	let manager = $state<ToastManager>();
+</script>
+
+<Toast.Provider bind:manager>
+	<button type="button" data-testid="add" onclick={() => manager?.add({ title: 'Saved' })}
+		>Add</button
+	>
+	<Dialog.Root defaultOpen>
+		<Dialog.Portal>
+			<Dialog.Content data-testid="dialog">
+				<Dialog.Title>A modal</Dialog.Title>
+				<Dialog.Close>Dismiss</Dialog.Close>
+			</Dialog.Content>
+		</Dialog.Portal>
+	</Dialog.Root>
+	<Toast.Viewport data-testid="viewport">
+		{#snippet children(toast)}
+			<Toast.Root {toast}>
+				<Toast.Content>
+					<Toast.Title />
+				</Toast.Content>
+				<Toast.Close data-testid="close" aria-label="Close">x</Toast.Close>
+			</Toast.Root>
+		{/snippet}
+	</Toast.Viewport>
+</Toast.Provider>
diff --git a/packages/ui/src/lib/toast/provider/toast-provider.svelte b/packages/ui/src/lib/toast/provider/toast-provider.svelte
new file mode 100644
index 00000000..d62c6c0e
--- /dev/null
+++ b/packages/ui/src/lib/toast/provider/toast-provider.svelte
@@ -0,0 +1,91 @@
+<script lang="ts">
+	import { untrack } from 'svelte';
+	import { SvelteMap } from 'svelte/reactivity';
+	import type { ToastProviderProps } from '../types.js';
+	import { setToastProviderContext, type ToastProviderContext } from './context';
+	import {
+		createToastManager,
+		DEFAULT_TOAST_LIMIT,
+		DEFAULT_TOAST_TIMEOUT,
+		type InternalToastManager
+	} from './toast-manager.svelte';
+
+	/**
+	 * Toast.Provider — the list of toasts, and the manager that adds to it.
+	 *
+	 * Put one around the app, thus every toast lands in the same viewport. The manager is on
+	 * `bind:manager` for the page, and on `useToastManager()` for a component under the provider.
+	 * Give `manager` to share one list between two providers, such as an app and a dialog in it.
+	 */
+	let {
+		timeout = DEFAULT_TOAST_TIMEOUT,
+		limit = DEFAULT_TOAST_LIMIT,
+		manager: managerProp = $bindable(),
+		children
+	}: ToastProviderProps = $props();
+
+	const manager: InternalToastManager = untrack(
+		() =>
+			(managerProp as InternalToastManager | undefined) ??
+			createToastManager({ timeout: () => timeout, limit: () => limit })
+	);
+	managerProp = manager;
+
+	// A new limit takes effect on the toasts that are already there.
+	$effect(() => {
+		void limit;
+		untrack(() => manager.syncLimit());
+	});
+
+	let hovering = $state(false);
+	let focused = $state(false);
+	let viewportElement = $state<HTMLElement | null>(null);
+	const heights = new SvelteMap<string, number>();
+	let focusAfterCloseHandler: ((id: string) => void) | null = null;
+
+	const context: ToastProviderContext = {
+		manager,
+		get hovering() {
+			return hovering;
+		},
+		get focused() {
+			return focused;
+		},
+		get expanded() {
+			return hovering || focused;
+		},
+		get viewportElement() {
+			return viewportElement;
+		},
+		get heights() {
+			return heights;
+		},
+		setHovering(value) {
+			hovering = value;
+		},
+		setFocused(value) {
+			focused = value;
+		},
+		setViewportElement(element) {
+			viewportElement = element;
+		},
+		// `untrack` because the root measures from an effect: reading the map here would make
+		// that effect depend on what it writes.
+		setHeight(id, height) {
+			untrack(() => {
+				if (height === null) heights.delete(id);
+				else if (heights.get(id) !== height) heights.set(id, height);
+			});
+		},
+		focusAfterClose(id) {
+			focusAfterCloseHandler?.(id);
+		},
+		setFocusAfterClose(handler) {
+			focusAfterCloseHandler = handler;
+		}
+	};
+
+	setToastProviderContext(context);
+</script>
+
+{@render children?.()}
diff --git a/packages/ui/src/lib/toast/provider/toast-shared-test.svelte b/packages/ui/src/lib/toast/provider/toast-shared-test.svelte
new file mode 100644
index 00000000..b2556f06
--- /dev/null
+++ b/packages/ui/src/lib/toast/provider/toast-shared-test.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { Toast } from '../index';
+	import ToastHookTest from './toast-hook-test.svelte';
+	import type { ToastManager } from '../index';
+
+	let manager = $state<ToastManager>();
+</script>
+
+<Toast.Provider bind:manager>
+	<ToastHookTest />
+	<Toast.Viewport data-testid="viewport">
+		{#snippet children(toast)}
+			<Toast.Root {toast}>
+				<Toast.Content>
+					<Toast.Title />
+				</Toast.Content>
+			</Toast.Root>
+		{/snippet}
+	</Toast.Viewport>
+</Toast.Provider>
+
+{#if manager}
+	<!-- A second provider with the same manager: a dialog that shows the toasts of the app. -->
+	<Toast.Provider {manager}>
+		<ToastHookTest />
+	</Toast.Provider>
+{/if}
diff --git a/packages/ui/src/lib/toast/provider/toast-ssr.test.ts b/packages/ui/src/lib/toast/provider/toast-ssr.test.ts
new file mode 100644
index 00000000..e26aa5d0
--- /dev/null
+++ b/packages/ui/src/lib/toast/provider/toast-ssr.test.ts
@@ -0,0 +1,15 @@
+// @vitest-environment node
+
+import { describe, expect, it } from 'vitest';
+import { render } from 'svelte/server';
+import ToastTest from './toast-test.svelte';
+
+describe('Toast SSR', () => {
+	it('renders the announcers and no region without a toast', () => {
+		const { body } = render(ToastTest, { props: {} });
+
+		expect(body).toContain('role="status"');
+		expect(body).toContain('role="alert"');
+		expect(body).not.toContain('data-toast-viewport');
+	});
+});
diff --git a/packages/ui/src/lib/toast/provider/toast-test.svelte b/packages/ui/src/lib/toast/provider/toast-test.svelte
new file mode 100644
index 00000000..d09c7bc7
--- /dev/null
+++ b/packages/ui/src/lib/toast/provider/toast-test.svelte
@@ -0,0 +1,67 @@
+<script lang="ts">
+	import { Toast } from '../index';
+	import type { ToastManager } from '../index';
+	import type { SwipeSide } from '../../primitives/swipe-gesture';
+
+	type Props = {
+		timeout?: number;
+		limit?: number;
+		portal?: boolean;
+		swipeDirection?: SwipeSide[];
+		withAction?: boolean;
+		keepOpen?: boolean;
+		onManager?: (manager: ToastManager) => void;
+	};
+
+	let {
+		timeout,
+		limit,
+		portal = false,
+		swipeDirection,
+		withAction = false,
+		keepOpen = false,
+		onManager
+	}: Props = $props();
+
+	let manager = $state<ToastManager>();
+
+	$effect(() => {
+		if (manager) onManager?.(manager);
+	});
+</script>
+
+<button type="button" data-testid="before">Before</button>
+
+<Toast.Provider {timeout} {limit} bind:manager>
+	<button
+		type="button"
+		data-testid="add"
+		onclick={() => manager?.add({ title: 'Saved', description: 'The file is on the server.' })}
+	>
+		Add
+	</button>
+	<button
+		type="button"
+		data-testid="add-high"
+		onclick={() =>
+			manager?.add({ title: 'Lost', description: 'The connection is gone.', priority: 'high' })}
+	>
+		Add high
+	</button>
+	<Toast.Viewport data-testid="viewport" {portal}>
+		{#snippet children(toast)}
+			<Toast.Root {toast} {swipeDirection} data-testid="toast-{toast.id}" style="width: 200px;">
+				<Toast.Content data-testid="content">
+					<Toast.Title data-testid="title" />
+					<Toast.Description data-testid="description" />
+				</Toast.Content>
+				{#if withAction}
+					<Toast.Action data-testid="action" {keepOpen}>Undo</Toast.Action>
+				{/if}
+				<Toast.Close data-testid="close" aria-label="Close">x</Toast.Close>
+			</Toast.Root>
+		{/snippet}
+	</Toast.Viewport>
+</Toast.Provider>
+
+<button type="button" data-testid="after">After</button>
diff --git a/packages/ui/src/lib/toast/provider/toast.test.ts b/packages/ui/src/lib/toast/provider/toast.test.ts
new file mode 100644
index 00000000..8a0933d1
--- /dev/null
+++ b/packages/ui/src/lib/toast/provider/toast.test.ts
@@ -0,0 +1,524 @@
+import { tick } from 'svelte';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { render } from 'vitest-browser-svelte';
+import { userEvent } from 'vitest/browser';
+import type { ToastManager } from '../index';
+import ToastModalTest from './toast-modal-test.svelte';
+import ToastSharedTest from './toast-shared-test.svelte';
+import ToastTest from './toast-test.svelte';
+
+function byTestId<T extends HTMLElement = HTMLElement>(id: string): T {
+	const element = document.querySelector<T>(`[data-testid="${id}"]`);
+	if (!element) throw new Error(`No element with data-testid="${id}"`);
+	return element;
+}
+
+function toasts(): HTMLElement[] {
+	return Array.from(document.querySelectorAll<HTMLElement>('[data-toast-root]'));
+}
+
+function region(): HTMLElement | null {
+	return document.querySelector<HTMLElement>('[data-toast-viewport]');
+}
+
+function polite(): string {
+	return document.querySelector('[role="status"]')?.textContent?.trim() ?? '';
+}
+
+function assertive(): string {
+	return document.querySelector('[role="alert"]')?.textContent?.trim() ?? '';
+}
+
+async function press(id: string) {
+	byTestId(id).click();
+	await tick();
+}
+
+async function advance(ms: number) {
+	await vi.advanceTimersByTimeAsync(ms);
+	await tick();
+}
+
+function pointer(target: Element, type: string, pointerType: 'mouse' | 'touch' = 'mouse') {
+	target.dispatchEvent(
+		new PointerEvent(type, {
+			pointerType,
+			pointerId: 1,
+			bubbles: type !== 'pointerenter' && type !== 'pointerleave'
+		})
+	);
+}
+
+let manager: ToastManager | undefined;
+
+function setup(props: Record<string, unknown> = {}) {
+	return render(ToastTest, {
+		...props,
+		onManager: (value: ToastManager) => {
+			manager = value;
+		}
+	});
+}
+
+function getManager(): ToastManager {
+	if (!manager) throw new Error('The manager is not bound yet.');
+	return manager;
+}
+
+describe('Toast', () => {
+	beforeEach(() => {
+		vi.useFakeTimers({ toFake: ['setTimeout', 'clearTimeout', 'Date'] });
+	});
+
+	afterEach(() => {
+		vi.useRealTimers();
+		manager = undefined;
+	});
+
+	describe('region and announcement', () => {
+		it('renders nothing but the announcers while there is no toast', () => {
+			setup();
+
+			expect(region()).toBeNull();
+			expect(document.querySelector('[role="status"][aria-live="polite"]')).not.toBeNull();
+			expect(document.querySelector('[role="alert"][aria-live="assertive"]')).not.toBeNull();
+		});
+
+		it('adds a dialog with its name and its description, and announces it politely', async () => {
+			setup();
+
+			await press('add');
+
+			const [toast] = toasts();
+			expect(region()?.getAttribute('role')).toBe('region');
+			expect(region()?.getAttribute('aria-label')).toBe('1 notification');
+			expect(region()?.getAttribute('tabindex')).toBe('-1');
+			expect(toast.getAttribute('role')).toBe('dialog');
+			expect(toast.getAttribute('aria-modal')).toBe('false');
+			expect(toast.getAttribute('tabindex')).toBe('0');
+			expect(toast.getAttribute('data-priority')).toBe('low');
+			await expect.poll(() => toast.getAttribute('aria-labelledby')).toBe(byTestId('title').id);
+			await expect
+				.poll(() => toast.getAttribute('aria-describedby'))
+				.toBe(byTestId('description').id);
+			expect(byTestId('title').textContent?.trim()).toBe('Saved');
+			expect(byTestId('description').textContent?.trim()).toBe('The file is on the server.');
+			expect(polite()).toBe('Saved. The file is on the server.');
+			expect(assertive()).toBe('');
+		});
+
+		it('makes a high priority toast an alertdialog, and announces it assertively', async () => {
+			setup();
+
+			await press('add-high');
+
+			expect(toasts()[0].getAttribute('role')).toBe('alertdialog');
+			expect(assertive()).toBe('Lost. The connection is gone.');
+			expect(polite()).toBe('');
+		});
+
+		it('counts the toasts in the name of the region', async () => {
+			setup();
+
+			await press('add');
+			await press('add');
+
+			expect(region()?.getAttribute('aria-label')).toBe('2 notifications');
+			expect(toasts()[0].getAttribute('data-front')).toBe('true');
+			expect(toasts()[1].hasAttribute('data-front')).toBe(false);
+			expect(toasts()[0].style.getPropertyValue('--toast-index')).toBe('0');
+			expect(toasts()[1].style.getPropertyValue('--toast-index')).toBe('1');
+		});
+
+		it('does not read the buttons as part of the message', async () => {
+			setup({ withAction: true });
+
+			await press('add');
+
+			expect(polite()).toBe('Saved. The file is on the server.');
+			expect(byTestId('content').contains(byTestId('close'))).toBe(false);
+		});
+	});
+
+	describe('timers', () => {
+		it('closes on its own after the timeout, and leaves the DOM', async () => {
+			setup({ timeout: 1000 });
+
+			await press('add');
+			await advance(900);
+			expect(toasts()).toHaveLength(1);
+
+			await advance(100);
+			expect(toasts()[0]?.getAttribute('data-ending') ?? 'gone').toMatch(/true|gone/);
+			await expect.poll(() => toasts().length).toBe(0);
+			expect(region()).toBeNull();
+		});
+
+		it('stops the timer while the pointer rests on the region', async () => {
+			setup({ timeout: 1000 });
+
+			await press('add');
+			await advance(500);
+			pointer(region()!, 'pointerenter');
+			await advance(2000);
+			expect(toasts()).toHaveLength(1);
+			expect(region()?.getAttribute('data-expanded')).toBe('true');
+
+			pointer(region()!, 'pointerleave');
+			await advance(400);
+			expect(toasts()).toHaveLength(1);
+			await advance(100);
+			await expect.poll(() => toasts().length).toBe(0);
+		});
+
+		it('stops the timer while the keyboard focus is in the region', async () => {
+			setup({ timeout: 1000 });
+
+			await press('add');
+			byTestId('before').focus();
+			await userEvent.keyboard('{F6}');
+			await tick();
+			expect(document.activeElement).toBe(toasts()[0]);
+
+			await advance(3000);
+			expect(toasts()).toHaveLength(1);
+			expect(region()?.getAttribute('data-expanded')).toBe('true');
+
+			await userEvent.keyboard('{F6}');
+			await tick();
+			expect(document.activeElement).toBe(byTestId('before'));
+			await advance(1000);
+			await expect.poll(() => toasts().length).toBe(0);
+		});
+
+		it('keeps a toast with timeout 0, and a loading toast', async () => {
+			setup({ timeout: 1000 });
+			await tick();
+
+			getManager().add({ title: 'Forever', timeout: 0 });
+			getManager().add({ title: 'Working', type: 'loading' });
+			await advance(5000);
+
+			expect(toasts()).toHaveLength(2);
+		});
+
+		it('gives a toast its full time again on an update', async () => {
+			setup({ timeout: 1000 });
+			await tick();
+
+			const id = getManager().add({ title: 'One' });
+			await advance(800);
+			getManager().update(id, { title: 'Two' });
+			await tick();
+			expect(byTestId('title').textContent?.trim()).toBe('Two');
+			expect(polite()).toBe('Two');
+
+			await advance(800);
+			expect(toasts()).toHaveLength(1);
+			await advance(200);
+			await expect.poll(() => toasts().length).toBe(0);
+		});
+
+		it('turns a promise into loading, then success', async () => {
+			setup({ timeout: 1000 });
+			await tick();
+
+			let resolve!: (value: string) => void;
+			const task = new Promise<string>((done) => (resolve = done));
+			const result = getManager().promise(task, {
+				loading: 'Uploading',
+				success: (name) => `${name} is up`,
+				error: 'Failed'
+			});
+			await tick();
+			expect(toasts()[0].getAttribute('data-type')).toBe('loading');
+			expect(byTestId('description').textContent?.trim()).toBe('Uploading');
+			await advance(3000);
+			expect(toasts()).toHaveLength(1);
+
+			resolve('photo.png');
+			await result;
+			await tick();
+			expect(toasts()[0].getAttribute('data-type')).toBe('success');
+			expect(byTestId('description').textContent?.trim()).toBe('photo.png is up');
+			await advance(1000);
+			await expect.poll(() => toasts().length).toBe(0);
+		});
+
+		it('closes all toasts at once', async () => {
+			setup();
+			await tick();
+
+			getManager().add({ title: 'A' });
+			getManager().add({ title: 'B' });
+			await tick();
+			getManager().close();
+			await expect.poll(() => toasts().length).toBe(0);
+		});
+	});
+
+	describe('manager', () => {
+		it('reaches a component under the provider, and a second provider shares it', async () => {
+			render(ToastSharedTest);
+			await tick();
+			const buttons = document.querySelectorAll<HTMLButtonElement>(
+				'[data-testid="add-from-child"]'
+			);
+			expect(buttons).toHaveLength(2);
+
+			buttons[1].click();
+			await tick();
+
+			expect(toasts()).toHaveLength(1);
+			const counts = Array.from(document.querySelectorAll('[data-testid="count"]')).map(
+				(node) => node.textContent
+			);
+			expect(counts).toEqual(['1', '1']);
+		});
+
+		it('renders the viewport at the end of the body by default', async () => {
+			setup({ portal: true });
+			await press('add');
+
+			expect(region()?.parentElement?.parentElement).toBe(document.body);
+			expect(document.body.lastElementChild?.contains(region())).toBe(true);
+		});
+
+		it('stops the timers while the window is in the background', async () => {
+			setup({ timeout: 1000 });
+			await press('add');
+			await advance(500);
+
+			window.dispatchEvent(new Event('blur'));
+			await advance(3000);
+			expect(toasts()).toHaveLength(1);
+
+			window.dispatchEvent(new Event('focus'));
+			await advance(500);
+			await expect.poll(() => toasts().length).toBe(0);
+		});
+
+		it('does not stop the timers for a touch on the region', async () => {
+			setup({ timeout: 1000 });
+			await press('add');
+
+			pointer(region()!, 'pointerenter', 'touch');
+			await advance(1000);
+			await expect.poll(() => toasts().length).toBe(0);
+		});
+	});
+
+	describe('behind a modal', () => {
+		it('stays reachable while a modal dialog is open', async () => {
+			render(ToastModalTest);
+			await tick();
+			await expect.poll(() => byTestId('dialog').getAttribute('aria-modal')).toBe('true');
+			await new Promise((done) => requestAnimationFrame(() => requestAnimationFrame(done)));
+
+			byTestId('add').click();
+			await tick();
+			await new Promise((done) => requestAnimationFrame(() => requestAnimationFrame(done)));
+
+			const viewport = region();
+			expect(viewport).not.toBeNull();
+			expect(viewport?.closest('[aria-hidden="true"]')).toBeNull();
+			expect(viewport?.closest('[inert]')).toBeNull();
+			expect(byTestId('add').closest('[aria-hidden="true"]')).not.toBeNull();
+		});
+	});
+
+	describe('keyboard', () => {
+		it('F6 lands on the first toast, Escape closes it and the focus goes back', async () => {
+			setup();
+
+			await press('add');
+			byTestId('before').focus();
+			await userEvent.keyboard('{F6}');
+			await tick();
+			expect(document.activeElement).toBe(toasts()[0]);
+
+			await userEvent.keyboard('{Escape}');
+			await tick();
+			expect(toasts()[0]?.getAttribute('data-ending') ?? 'gone').toMatch(/true|gone/);
+			expect(document.activeElement).toBe(byTestId('before'));
+		});
+
+		it('moves the focus to the next toast when the focused one closes', async () => {
+			setup();
+
+			await press('add');
+			await press('add');
+			byTestId('before').focus();
+			await userEvent.keyboard('{F6}');
+			await tick();
+			const [first, second] = toasts();
+			expect(document.activeElement).toBe(first);
+
+			await userEvent.keyboard('{Escape}');
+			await tick();
+			expect(document.activeElement).toBe(second);
+		});
+
+		it('Tab past the last button goes back to where the focus was', async () => {
+			setup();
+
+			await press('add');
+			byTestId('before').focus();
+			await userEvent.keyboard('{F6}');
+			await userEvent.keyboard('{Tab}');
+			await tick();
+			expect(document.activeElement).toBe(byTestId('close'));
+
+			await userEvent.keyboard('{Tab}');
+			await tick();
+			expect(document.activeElement).toBe(byTestId('before'));
+		});
+	});
+
+	describe('buttons', () => {
+		it('the close button closes the toast', async () => {
+			setup();
+
+			await press('add');
+			await press('close');
+
+			expect(toasts()[0]?.getAttribute('data-ending') ?? 'gone').toMatch(/true|gone/);
+			await expect.poll(() => toasts().length).toBe(0);
+		});
+
+		it('the action closes the toast, unless keepOpen', async () => {
+			setup({ withAction: true, keepOpen: true });
+
+			await press('add');
+			await press('action');
+			expect(toasts()).toHaveLength(1);
+			expect(toasts()[0].hasAttribute('data-ending')).toBe(false);
+		});
+	});
+
+	describe('limit', () => {
+		it('keeps the newest toasts on the screen, and the older ones inert behind', async () => {
+			setup({ limit: 2, timeout: 1000 });
+
+			await press('add');
+			await press('add');
+			await press('add');
+
+			const all = toasts();
+			expect(all).toHaveLength(3);
+			expect(all[2].hasAttribute('inert')).toBe(true);
+			expect(all[2].getAttribute('data-limited')).toBe('true');
+			expect(region()?.getAttribute('aria-label')).toBe('2 notifications');
+
+			// The limited toast keeps its full time: its timer starts when it comes forward.
+			await advance(1000);
+			await expect
+				.poll(() => toasts().filter((t) => !t.hasAttribute('data-ending')).length)
+				.toBe(1);
+			const [left] = toasts().filter((t) => !t.hasAttribute('data-ending'));
+			expect(left.hasAttribute('inert')).toBe(false);
+			await advance(900);
+			expect(left.hasAttribute('data-ending')).toBe(false);
+			await advance(100);
+			await expect.poll(() => toasts().length).toBe(0);
+		});
+	});
+
+	describe('swipe', () => {
+		it('follows the finger, and dismisses past the threshold', async () => {
+			setup({ swipeDirection: ['right'] });
+
+			await press('add');
+			const toast = toasts()[0];
+			const rect = toast.getBoundingClientRect();
+			const at = (x: number, type: string) =>
+				toast.dispatchEvent(
+					new PointerEvent(type, {
+						pointerType: 'touch',
+						pointerId: 7,
+						isPrimary: true,
+						button: 0,
+						clientX: rect.left + 20 + x,
+						clientY: rect.top + 10,
+						bubbles: true,
+						cancelable: true
+					})
+				);
+
+			at(0, 'pointerdown');
+			window.dispatchEvent(
+				new PointerEvent('pointermove', {
+					pointerType: 'touch',
+					pointerId: 7,
+					clientX: rect.left + 40,
+					clientY: rect.top + 10,
+					bubbles: true,
+					cancelable: true
+				})
+			);
+			await tick();
+			expect(toast.getAttribute('data-swiping')).toBe('true');
+			expect(toast.getAttribute('data-swipe-direction')).toBe('right');
+			expect(toast.style.getPropertyValue('--toast-swipe-movement-x')).toBe('20px');
+
+			window.dispatchEvent(
+				new PointerEvent('pointermove', {
+					pointerType: 'touch',
+					pointerId: 7,
+					clientX: rect.left + 80,
+					clientY: rect.top + 10,
+					bubbles: true,
+					cancelable: true
+				})
+			);
+			window.dispatchEvent(
+				new PointerEvent('pointerup', {
+					pointerType: 'touch',
+					pointerId: 7,
+					clientX: rect.left + 80,
+					clientY: rect.top + 10,
+					bubbles: true
+				})
+			);
+			await tick();
+			expect(toast.getAttribute('data-swipe-dismissed')).toBe('true');
+			await expect.poll(() => toasts().length).toBe(0);
+		});
+
+		it('comes back after a short swipe', async () => {
+			setup({ swipeDirection: ['right'] });
+
+			await press('add');
+			const toast = toasts()[0];
+			const rect = toast.getBoundingClientRect();
+			const move = (x: number, type: string, target: EventTarget = window) =>
+				target.dispatchEvent(
+					new PointerEvent(type, {
+						pointerType: 'touch',
+						pointerId: 7,
+						isPrimary: true,
+						button: 0,
+						clientX: rect.left + 20 + x,
+						clientY: rect.top + 10,
+						bubbles: true,
+						cancelable: true
+					})
+				);
+
+			move(0, 'pointerdown', toast);
+			move(20, 'pointermove');
+			await tick();
+			expect(toast.style.getPropertyValue('--toast-swipe-movement-x')).toBe('20px');
+			// A finger that stops before it lifts: the release has no speed. Frames, not timers,
+			// because the timers are fake and the velocity reads the real clock.
+			for (let frame = 0; frame < 12; frame += 1) {
+				await new Promise((done) => requestAnimationFrame(done));
+			}
+			move(20, 'pointerup');
+			await tick();
+			expect(toast.style.getPropertyValue('--toast-swipe-movement-x')).toBe('0px');
+			expect(toast.hasAttribute('data-swiping')).toBe(false);
+			expect(toast.hasAttribute('data-ending')).toBe(false);
+		});
+	});
+});
diff --git a/packages/ui/src/lib/toast/root/context.ts b/packages/ui/src/lib/toast/root/context.ts
new file mode 100644
index 00000000..849b6d27
--- /dev/null
+++ b/packages/ui/src/lib/toast/root/context.ts
@@ -0,0 +1,35 @@
+import { getContext, setContext } from 'svelte';
+import type { ToastItem } from '../provider/toast-manager.svelte';
+
+const KEY = Symbol('toast');
+
+export type ToastContext = {
+	/** The item of this toast. */
+	readonly toast: ToastItem;
+	/** The ids of the registered titles, for `aria-labelledby`. */
+	readonly labelledBy: string | undefined;
+	/** The ids of the registered descriptions, for `aria-describedby`. */
+	readonly describedBy: string | undefined;
+	/** Registers a title id; the returned function unregisters it. */
+	registerTitle: (id: string) => () => void;
+	/** Registers a description id; the returned function unregisters it. */
+	registerDescription: (id: string) => () => void;
+	/** Closes this toast, and moves the focus on when it was in it. */
+	close: () => void;
+};
+
+export function setToastContext(context: ToastContext) {
+	setContext(KEY, context);
+}
+
+export function getToastContext(): ToastContext | undefined {
+	return getContext<ToastContext | undefined>(KEY);
+}
+
+export function useToastContext(part = 'Toast'): ToastContext {
+	const context = getToastContext();
+	if (!context) {
+		throw new Error(`${part} must be used within Toast.Root.`);
+	}
+	return context;
+}
diff --git a/packages/ui/src/lib/toast/root/toast-root.svelte b/packages/ui/src/lib/toast/root/toast-root.svelte
new file mode 100644
index 00000000..8845bf82
--- /dev/null
+++ b/packages/ui/src/lib/toast/root/toast-root.svelte
@@ -0,0 +1,256 @@
+<script lang="ts">
+	import { untrack } from 'svelte';
+	import { createPresence } from '../../primitives/presence.svelte';
+	import {
+		getSwipeAxis,
+		swipeGesture,
+		type SwipeSide,
+		type SwipeGestureOptions
+	} from '../../primitives/swipe-gesture';
+	import { useToastProviderContext } from '../provider/context';
+	import type { ToastRootProps } from '../types.js';
+	import { setToastContext, type ToastContext } from './context';
+
+	/**
+	 * Toast.Root — one toast.
+	 *
+	 * It is a `role="dialog"` that is not modal, or an `alertdialog` for a high priority: a
+	 * screen reader user who moves into the region hears its name and its description, and can
+	 * press its buttons. It is a tab stop, thus the keyboard reaches it after `F6`. `Escape`
+	 * closes it, and so does a swipe in one of `swipeDirection`, which follows the finger and
+	 * comes back when the swipe is short. It leaves the DOM after its exit animation.
+	 */
+	const SWIPE_THRESHOLD_PX = 40;
+	const FLICK_VELOCITY_PX_MS = 0.5;
+
+	let {
+		toast,
+		children,
+		class: className = '',
+		swipeDirection = ['bottom', 'right'],
+		element = $bindable<HTMLDivElement | null>(null),
+		onkeydown,
+		style,
+		...restProps
+	}: ToastRootProps = $props();
+
+	const ctx = useToastProviderContext('Toast.Root');
+	const manager = ctx.manager;
+
+	let rootRef: HTMLDivElement | null = $state(null);
+	let titleIds = $state<string[]>([]);
+	let descriptionIds = $state<string[]>([]);
+
+	const isEnding = $derived(toast.status === 'ending');
+	const index = $derived(manager.visibleToasts.findIndex((candidate) => candidate.id === toast.id));
+	const height = $derived(ctx.heights.get(toast.id) ?? null);
+	// The height of the toasts in front, for a stack that shifts the ones behind.
+	const offsetY = $derived.by(() => {
+		if (index <= 0) return 0;
+		let total = 0;
+		for (const candidate of manager.visibleToasts.slice(0, index)) {
+			total += ctx.heights.get(candidate.id) ?? 0;
+		}
+		return total;
+	});
+
+	function close() {
+		ctx.focusAfterClose(toast.id);
+		manager.close(toast.id);
+	}
+
+	function register(list: 'title' | 'description', id: string) {
+		untrack(() => {
+			if (list === 'title') titleIds = [...titleIds, id];
+			else descriptionIds = [...descriptionIds, id];
+		});
+		return () =>
+			untrack(() => {
+				if (list === 'title') titleIds = titleIds.filter((candidate) => candidate !== id);
+				else descriptionIds = descriptionIds.filter((candidate) => candidate !== id);
+			});
+	}
+
+	const context: ToastContext = {
+		get toast() {
+			return toast;
+		},
+		get labelledBy() {
+			return titleIds.length > 0 ? titleIds.join(' ') : undefined;
+		},
+		get describedBy() {
+			return descriptionIds.length > 0 ? descriptionIds.join(' ') : undefined;
+		},
+		registerTitle: (id) => register('title', id),
+		registerDescription: (id) => register('description', id),
+		close
+	};
+
+	setToastContext(context);
+
+	$effect(() => {
+		element = rootRef;
+	});
+
+	// The size feeds the stack: the viewport clamps the toasts behind to the one in front, and
+	// each toast shifts by the heights of the ones in front of it.
+	$effect(() => {
+		const node = rootRef;
+		if (!node || typeof ResizeObserver === 'undefined') return;
+		const id = toast.id;
+		const measure = () => ctx.setHeight(id, node.offsetHeight);
+		measure();
+		const observer = new ResizeObserver(measure);
+		observer.observe(node);
+		return () => {
+			observer.disconnect();
+			ctx.setHeight(id, null);
+		};
+	});
+
+	// Mounted through the exit animation, timed from the CSS motion of the element.
+	const presence = createPresence(
+		() => !isEnding,
+		() => rootRef
+	);
+
+	$effect(() => {
+		if (isEnding && !presence.isMounted) {
+			untrack(() => manager.remove(toast.id));
+		}
+	});
+
+	function handleKeyDown(event: KeyboardEvent & { currentTarget: EventTarget & HTMLDivElement }) {
+		onkeydown?.(event);
+		if (event.defaultPrevented || event.key !== 'Escape') return;
+		event.preventDefault();
+		close();
+	}
+
+	// --- Swipe --------------------------------------------------------------------------------
+
+	let swipeX = $state(0);
+	let swipeY = $state(0);
+	let swiping = $state(false);
+	let swipeSide = $state<SwipeSide | null>(null);
+	let dismissedBySwipe = $state(false);
+
+	function sidesByAxis(): { x: SwipeSide | null; y: SwipeSide | null } {
+		let x: SwipeSide | null = null;
+		let y: SwipeSide | null = null;
+		for (const side of swipeDirection) {
+			if (getSwipeAxis(side) === 'x') x ??= side;
+			else y ??= side;
+		}
+		return { x, y };
+	}
+
+	function gestureOptions(side: SwipeSide): SwipeGestureOptions {
+		const axis = getSwipeAxis(side);
+		const sign = side === 'right' || side === 'bottom' ? 1 : -1;
+		return {
+			side,
+			onStart: () => {
+				swiping = true;
+				swipeSide = side;
+				manager.pauseTimers();
+			},
+			onMove: ({ displacement }) => {
+				// The toast follows the finger outward, and resists a pull the other way.
+				const outward = displacement >= 0 ? displacement : displacement / 4;
+				if (axis === 'x') swipeX = outward * sign;
+				else swipeY = outward * sign;
+			},
+			onEnd: ({ displacement, velocity }) => {
+				swiping = false;
+				const dismiss = displacement > SWIPE_THRESHOLD_PX || velocity > FLICK_VELOCITY_PX_MS;
+				if (dismiss) {
+					dismissedBySwipe = true;
+					close();
+					return;
+				}
+				swipeX = 0;
+				swipeY = 0;
+				swipeSide = null;
+				if (!ctx.hovering && !ctx.focused) manager.resumeTimers();
+			},
+			onCancel: () => {
+				swiping = false;
+				swipeX = 0;
+				swipeY = 0;
+				swipeSide = null;
+				if (!ctx.hovering && !ctx.focused) manager.resumeTimers();
+			}
+		};
+	}
+
+	$effect(() => {
+		const node = rootRef;
+		if (!node) return;
+		const { x, y } = sidesByAxis();
+		const gestures = [x, y]
+			.filter((side): side is SwipeSide => side !== null)
+			.map((side) => swipeGesture(node, gestureOptions(side)));
+		return () => {
+			for (const gesture of gestures) gesture.destroy();
+		};
+	});
+
+	// The browser must not turn the drag into a scroll before the gesture claims it: the axis a
+	// swipe takes is closed to the native pan, and the other one stays open. A toast holds no
+	// scrolling content of its own, thus nothing in it loses a scroll.
+	const touchAction = $derived.by(() => {
+		const { x, y } = sidesByAxis();
+		if (x && y) return 'none';
+		if (x) return 'pan-y';
+		if (y) return 'pan-x';
+		return null;
+	});
+
+	const role = $derived(toast.priority === 'high' ? 'alertdialog' : 'dialog');
+	const inlineStyle = $derived(
+		[
+			`--toast-index: ${index < 0 ? 0 : index};`,
+			`--toast-offset-y: ${offsetY}px;`,
+			height === null ? '' : `--toast-height: ${height}px;`,
+			`--toast-swipe-movement-x: ${swipeX}px;`,
+			`--toast-swipe-movement-y: ${swipeY}px;`,
+			touchAction === null ? '' : `touch-action: ${touchAction};`,
+			style ?? ''
+		]
+			.filter(Boolean)
+			.join(' ')
+	);
+</script>
+
+<!-- A dialog is a tab stop here on purpose: `F6` lands on it, and the keyboard reads it whole
+before it reaches the buttons in it. -->
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<div
+	{...restProps}
+	bind:this={rootRef}
+	{role}
+	aria-modal="false"
+	tabindex="0"
+	aria-labelledby={context.labelledBy}
+	aria-describedby={context.describedBy}
+	inert={toast.limited || undefined}
+	class={className}
+	style={inlineStyle}
+	data-toast-root="true"
+	data-toast-id={toast.id}
+	data-type={toast.type}
+	data-priority={toast.priority}
+	data-front={index === 0 || undefined}
+	data-limited={toast.limited || undefined}
+	data-expanded={ctx.expanded || undefined}
+	data-ending={isEnding || undefined}
+	data-entering={presence.isEntering || undefined}
+	data-exiting={presence.isExiting || undefined}
+	data-swiping={swiping || undefined}
+	data-swipe-direction={swipeSide ?? undefined}
+	data-swipe-dismissed={dismissedBySwipe || undefined}
+	onkeydown={handleKeyDown}
+>
+	{@render children?.()}
+</div>
diff --git a/packages/ui/src/lib/toast/title/toast-title.svelte b/packages/ui/src/lib/toast/title/toast-title.svelte
new file mode 100644
index 00000000..4e1c99ff
--- /dev/null
+++ b/packages/ui/src/lib/toast/title/toast-title.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { useToastContext } from '../root/context';
+	import type { ToastTitleProps } from '../types.js';
+
+	/**
+	 * Toast.Title — the name of the toast.
+	 *
+	 * It registers its id with the root, which gives it to the toast as `aria-labelledby`. It
+	 * renders a `<div>` and not a heading: a toast is not a section of the page, and a heading
+	 * in it would break the outline of the page. Without children, it shows the `title` of the
+	 * item.
+	 */
+	let { children, class: className = '', id: idProp, ...restProps }: ToastTitleProps = $props();
+
+	const ctx = useToastContext('Toast.Title');
+	const generatedId = $props.id();
+	const id = $derived(idProp ?? generatedId);
+
+	// The returned unregister runs on destroy, and again whenever the id changes.
+	$effect(() => ctx.registerTitle(id));
+</script>
+
+<div {...restProps} {id} class={className} data-toast-title="true">
+	{#if children}
+		{@render children()}
+	{:else}
+		{ctx.toast.title}
+	{/if}
+</div>
diff --git a/packages/ui/src/lib/toast/types.ts b/packages/ui/src/lib/toast/types.ts
new file mode 100644
index 00000000..cda8f9ed
--- /dev/null
+++ b/packages/ui/src/lib/toast/types.ts
@@ -0,0 +1,116 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes, HTMLButtonAttributes } from 'svelte/elements';
+import type { ToastItem, ToastManager } from './provider/toast-manager.svelte.js';
+import type { SwipeSide } from '../primitives/swipe-gesture.js';
+
+export type {
+	ToastItem,
+	ToastManager,
+	ToastOptions,
+	ToastPriority,
+	ToastPromiseOptions,
+	ToastStatus,
+	ToastUpdate
+} from './provider/toast-manager.svelte.js';
+
+export type ToastProviderProps = {
+	/** The default time a toast stays, in milliseconds. `0` keeps each toast until a close. */
+	timeout?: number;
+	/**
+	 * The count of toasts on the screen. The older ones past it wait behind, hidden and inert,
+	 * with their timers stopped, and they come forward as the newer ones close.
+	 */
+	limit?: number;
+	/**
+	 * The manager: `add`, `update`, `close` and `promise`. Use `bind:manager` to read it in the
+	 * page, or give one to share a list of toasts between two providers.
+	 */
+	manager?: ToastManager;
+	/** The app, with a `Toast.Viewport` somewhere in it. */
+	children?: Snippet;
+};
+
+export type ToastViewportProps = Omit<
+	HTMLAttributes<HTMLDivElement>,
+	'children' | 'class' | 'role' | 'tabindex'
+> & {
+	/** The toast to render for each item. It gets the item; render a `Toast.Root` with it. */
+	children: Snippet<[ToastItem]>;
+	/** The CSS class names of the element. */
+	class?: string;
+	/**
+	 * Renders the viewport at the end of `<body>`, thus it draws above the page. Set it to
+	 * `false` to render it in place.
+	 */
+	portal?: boolean;
+	/** The bindable viewport element. */
+	element?: HTMLDivElement | null;
+};
+
+export type ToastRootProps = Omit<
+	HTMLAttributes<HTMLDivElement>,
+	'children' | 'class' | 'role' | 'tabindex' | 'id'
+> & {
+	/** The item from `Toast.Viewport`. */
+	toast: ToastItem;
+	/** The parts of the toast. */
+	children?: Snippet;
+	/** The CSS class names of the element. */
+	class?: string;
+	/**
+	 * The sides a swipe can push the toast out through: `bottom` and `right` by default. One side
+	 * per axis counts. An empty array turns the swipe off. A swipe on `Toast.Close` or
+	 * `Toast.Action` never starts.
+	 */
+	swipeDirection?: SwipeSide[];
+	/** The bindable toast element. */
+	element?: HTMLDivElement | null;
+};
+
+export type ToastContentProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'class'> & {
+	/** The title and the description. */
+	children?: Snippet;
+	/** The CSS class names of the element. */
+	class?: string;
+};
+
+export type ToastTitleProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'class' | 'id'> & {
+	/** The title. Without children, it shows the `title` of the item. */
+	children?: Snippet;
+	/** The CSS class names of the element. */
+	class?: string;
+	/** The id of the element. The component makes one when you give none. */
+	id?: string;
+};
+
+export type ToastDescriptionProps = Omit<
+	HTMLAttributes<HTMLParagraphElement>,
+	'children' | 'class' | 'id'
+> & {
+	/** The description. Without children, it shows the `description` of the item. */
+	children?: Snippet;
+	/** The CSS class names of the element. */
+	class?: string;
+	/** The id of the element. The component makes one when you give none. */
+	id?: string;
+};
+
+export type ToastCloseProps = Omit<HTMLButtonAttributes, 'type' | 'class' | 'children'> & {
+	/** The name on the button. */
+	children?: Snippet;
+	/** The CSS class names of the element. */
+	class?: string;
+	/** The bindable button element. */
+	element?: HTMLButtonElement | null;
+};
+
+export type ToastActionProps = Omit<HTMLButtonAttributes, 'type' | 'class' | 'children'> & {
+	/** The name on the button. */
+	children?: Snippet;
+	/** The CSS class names of the element. */
+	class?: string;
+	/** Keeps the toast open after the press. By default, the press closes it. */
+	keepOpen?: boolean;
+	/** The bindable button element. */
+	element?: HTMLButtonElement | null;
+};
diff --git a/packages/ui/src/lib/toast/viewport/toast-viewport.svelte b/packages/ui/src/lib/toast/viewport/toast-viewport.svelte
new file mode 100644
index 00000000..05e953fe
--- /dev/null
+++ b/packages/ui/src/lib/toast/viewport/toast-viewport.svelte
@@ -0,0 +1,306 @@
+<script lang="ts">
+	import { untrack } from 'svelte';
+	import { readable } from 'svelte/store';
+	import { resolveLocalizedString } from '../../internal/localized-strings';
+	import { useLocaleContextOptional } from '../../locale-provider/context';
+	import { Portal } from '../../portal';
+	import { HIDE_OUTSIDE_EXEMPT_ATTRIBUTE } from '../../primitives/aria-hide-outside';
+	import { getFocusableElements } from '../../primitives/focus-trap';
+	import { shouldShowFocusVisible } from '../../primitives/input-modality';
+	import { visuallyHiddenStyle } from '../../table/utils/visually-hidden-style';
+	import { useToastProviderContext } from '../provider/context';
+	import type { ToastItem } from '../provider/toast-manager.svelte';
+	import type { ToastViewportProps } from '../types.js';
+
+	/**
+	 * Toast.Viewport — the region where the toasts land.
+	 *
+	 * It is a `role="region"` landmark, thus a screen reader user finds it in the list of
+	 * landmarks, and `F6` moves the focus into it from anywhere on the page. The announcement of a
+	 * toast does not come from the region: two live regions beside it, one polite and one
+	 * assertive, say the title and the description of each new toast. Thus the screen reader does
+	 * not read the buttons of the toast as part of the message.
+	 *
+	 * The timers stop while the pointer rests on the region, while the focus is in it, and while
+	 * the window is in the background. A toast that closes while the user reads it is a toast
+	 * the user did not read.
+	 */
+	let {
+		children,
+		class: className = '',
+		portal = true,
+		element = $bindable<HTMLDivElement | null>(null),
+		onpointerenter,
+		onpointerleave,
+		onfocusin,
+		onfocusout,
+		onkeydown,
+		'aria-label': ariaLabelProp,
+		...restProps
+	}: ToastViewportProps = $props();
+
+	const ctx = useToastProviderContext('Toast.Viewport');
+	const manager = ctx.manager;
+
+	const localeContext = useLocaleContextOptional();
+	const emptyLocaleStore = readable<string | undefined>(undefined);
+	const localeStore = localeContext?.locale ?? emptyLocaleStore;
+
+	let regionRef: HTMLDivElement | null = $state(null);
+	// Where the focus was before `F6` or a click moved it into the region, thus a close can send
+	// it back there.
+	let previousFocus: HTMLElement | null = null;
+	let windowFocused = true;
+
+	const count = $derived(manager.visibleToasts.length);
+	const ariaLabel = $derived.by(() => {
+		if (ariaLabelProp) return ariaLabelProp;
+		if (count === 1) return resolveLocalizedString($localeStore, 'toast.oneNotification');
+		if (count > 1) {
+			return resolveLocalizedString($localeStore, 'toast.multipleNotifications', { count });
+		}
+		return resolveLocalizedString($localeStore, 'toast.notifications');
+	});
+
+	$effect(() => {
+		element = regionRef;
+		ctx.setViewportElement(regionRef);
+		return () => ctx.setViewportElement(null);
+	});
+
+	// --- Announcements ------------------------------------------------------------------------
+
+	// Each new toast, and each update, is one message. The key changes with each one, thus the
+	// live region gets a new node and reads the same text twice when two toasts say the same.
+	let politeMessage = $state('');
+	let politeKey = $state(0);
+	let assertiveMessage = $state('');
+	let assertiveKey = $state(0);
+	// eslint-disable-next-line svelte/prefer-svelte-reactivity -- a record of what was said, not state: nothing renders from it.
+	const announced = new Map<string, number>();
+
+	function messageOf(toast: ToastItem) {
+		return [toast.title, toast.description].filter(Boolean).join('. ');
+	}
+
+	$effect(() => {
+		const toasts = manager.toasts;
+		untrack(() => {
+			// eslint-disable-next-line svelte/prefer-svelte-reactivity -- a scratch set for one pass.
+			const ids = new Set<string>();
+			for (const toast of toasts) {
+				ids.add(toast.id);
+				if (toast.status === 'ending' || announced.get(toast.id) === toast.updateKey) continue;
+				announced.set(toast.id, toast.updateKey);
+				const message = messageOf(toast);
+				if (!message) continue;
+				if (toast.priority === 'high') {
+					assertiveMessage = message;
+					assertiveKey += 1;
+				} else {
+					politeMessage = message;
+					politeKey += 1;
+				}
+			}
+			for (const id of announced.keys()) {
+				if (!ids.has(id)) announced.delete(id);
+			}
+		});
+	});
+
+	// --- Timers -------------------------------------------------------------------------------
+
+	function syncTimers() {
+		if (ctx.hovering || ctx.focused || !windowFocused) manager.pauseTimers();
+		else manager.resumeTimers();
+	}
+
+	function handlePointerEnter(
+		event: PointerEvent & { currentTarget: EventTarget & HTMLDivElement }
+	) {
+		onpointerenter?.(event);
+		if (event.pointerType === 'touch') return;
+		ctx.setHovering(true);
+		syncTimers();
+	}
+
+	function handlePointerLeave(
+		event: PointerEvent & { currentTarget: EventTarget & HTMLDivElement }
+	) {
+		onpointerleave?.(event);
+		if (event.pointerType === 'touch') return;
+		ctx.setHovering(false);
+		syncTimers();
+	}
+
+	function handleFocusIn(event: FocusEvent & { currentTarget: EventTarget & HTMLDivElement }) {
+		onfocusin?.(event);
+		const target = event.target instanceof HTMLElement ? event.target : null;
+		// A press on a button in a toast is a press, not a visit: the timers keep going.
+		if (!shouldShowFocusVisible(target)) return;
+		if (!ctx.focused) {
+			const related = event.relatedTarget instanceof HTMLElement ? event.relatedTarget : null;
+			if (related && !regionRef?.contains(related)) previousFocus = related;
+		}
+		ctx.setFocused(true);
+		syncTimers();
+	}
+
+	function handleFocusOut(event: FocusEvent & { currentTarget: EventTarget & HTMLDivElement }) {
+		onfocusout?.(event);
+		const related = event.relatedTarget;
+		if (related instanceof Node && regionRef?.contains(related)) return;
+		ctx.setFocused(false);
+		syncTimers();
+	}
+
+	function handleWindowBlur() {
+		windowFocused = false;
+		syncTimers();
+	}
+
+	function handleWindowFocus() {
+		windowFocused = true;
+		syncTimers();
+	}
+
+	// --- Focus --------------------------------------------------------------------------------
+
+	function toastElements(): HTMLElement[] {
+		if (!regionRef) return [];
+		return Array.from(
+			regionRef.querySelectorAll<HTMLElement>('[data-toast-root]:not([inert]):not([data-ending])')
+		);
+	}
+
+	function focusFirstToast() {
+		const [first] = toastElements();
+		if (!first) return false;
+		const active = document.activeElement;
+		if (active instanceof HTMLElement && !regionRef?.contains(active)) previousFocus = active;
+		first.focus();
+		return true;
+	}
+
+	function restorePreviousFocus() {
+		const target = previousFocus;
+		previousFocus = null;
+		if (target && target.isConnected) {
+			target.focus();
+			return;
+		}
+		(document.activeElement as HTMLElement | null)?.blur?.();
+	}
+
+	// `F6` is the key that moves between the panes of an app. From anywhere on the page, it
+	// lands on the first toast; from the region, it goes back.
+	function handleWindowKeyDown(event: KeyboardEvent) {
+		if (event.key !== 'F6' || event.defaultPrevented) return;
+		const active = document.activeElement;
+		if (active instanceof HTMLElement && regionRef?.contains(active)) {
+			event.preventDefault();
+			restorePreviousFocus();
+			return;
+		}
+		if (focusFirstToast()) event.preventDefault();
+	}
+
+	function focusAfterClose(id: string) {
+		const active = document.activeElement;
+		const closing = regionRef?.querySelector<HTMLElement>(
+			`[data-toast-root][data-toast-id="${id}"]`
+		);
+		if (!closing || !(active instanceof Node) || !closing.contains(active)) return;
+		const toasts = toastElements();
+		const index = toasts.indexOf(closing);
+		const next = toasts[index + 1] ?? toasts[index - 1];
+		if (next) {
+			next.focus();
+			return;
+		}
+		restorePreviousFocus();
+	}
+
+	$effect(() => {
+		ctx.setFocusAfterClose(focusAfterClose);
+		return () => ctx.setFocusAfterClose(null);
+	});
+
+	// A `Tab` past the last button of the last toast, or a `Shift+Tab` before the first one, goes
+	// back to where the focus was. The region is at the end of the body, and the page after it is
+	// nothing.
+	function handleKeyDown(event: KeyboardEvent & { currentTarget: EventTarget & HTMLDivElement }) {
+		onkeydown?.(event);
+		if (event.defaultPrevented || event.key !== 'Tab' || !regionRef) return;
+		const tabbables = getFocusableElements(regionRef);
+		if (tabbables.length === 0) return;
+		const active = document.activeElement;
+		const first = tabbables[0];
+		const last = tabbables[tabbables.length - 1];
+		if ((event.shiftKey && active === first) || (!event.shiftKey && active === last)) {
+			event.preventDefault();
+			restorePreviousFocus();
+		}
+	}
+
+	$effect(() => {
+		window.addEventListener('keydown', handleWindowKeyDown);
+		window.addEventListener('blur', handleWindowBlur);
+		window.addEventListener('focus', handleWindowFocus);
+		return () => {
+			window.removeEventListener('keydown', handleWindowKeyDown);
+			window.removeEventListener('blur', handleWindowBlur);
+			window.removeEventListener('focus', handleWindowFocus);
+		};
+	});
+
+	const frontmostHeight = $derived.by(() => {
+		const front = manager.visibleToasts[0];
+		return front ? (ctx.heights.get(front.id) ?? null) : null;
+	});
+	const exemptAttribute = { [HIDE_OUTSIDE_EXEMPT_ATTRIBUTE]: '' };
+</script>
+
+{#snippet viewport()}
+	<div role="status" aria-live="polite" aria-atomic="true" style={visuallyHiddenStyle}>
+		{#key politeKey}
+			<div>{politeMessage}</div>
+		{/key}
+	</div>
+	<div role="alert" aria-live="assertive" aria-atomic="true" style={visuallyHiddenStyle}>
+		{#key assertiveKey}
+			<div>{assertiveMessage}</div>
+		{/key}
+	</div>
+	{#if manager.toasts.length > 0}
+		<div
+			{...restProps}
+			{...exemptAttribute}
+			bind:this={regionRef}
+			role="region"
+			tabindex="-1"
+			aria-label={ariaLabel}
+			class={className}
+			style="--toast-frontmost-height: {frontmostHeight === null
+				? ''
+				: `${frontmostHeight}px`};{restProps.style ? ` ${restProps.style}` : ''}"
+			data-toast-viewport="true"
+			data-expanded={ctx.expanded || undefined}
+			onpointerenter={handlePointerEnter}
+			onpointerleave={handlePointerLeave}
+			onfocusin={handleFocusIn}
+			onfocusout={handleFocusOut}
+			onkeydown={handleKeyDown}
+		>
+			{#each manager.toasts as toast (toast.id)}
+				{@render children(toast)}
+			{/each}
+		</div>
+	{/if}
+{/snippet}
+
+{#if portal}
+	<Portal>{@render viewport()}</Portal>
+{:else}
+	{@render viewport()}
+{/if}

From 1468b36e7b524351c52572676dd92ad62d85c166 Mon Sep 17 00:00:00 2001
From: Agustin Delgado <agustindariodelgado@gmail.com>
Date: Fri, 18 Sep 2026 17:09:10 -0300
Subject: [PATCH 02/13] feat(toast): add Toast.Positioner for a toast against
 an element

`add` takes `anchor`, `placement` and `offset`, and `Toast.Positioner`
puts the toast against that element as a fixed panel that follows it and
flips when the space is not sufficient. A toast with an anchor is out of
the stack: `--toast-index` reads 0, and `data-anchored` is on the root.
For a toast without one, the positioner is out of the layout, thus one
snippet serves both kinds. The docs say where `data-hk-swipe-ignore` goes.
---
 .changeset/toast-v1.md                        |  2 +-
 docs/src/content/toast/api.json               | 52 +++++++++++++
 docs/src/content/toast/demos/anchored.svelte  | 59 +++++++++++++++
 docs/src/content/toast/index.md               | 14 +++-
 packages/ui/src/lib/toast/README.md           |  6 +-
 packages/ui/src/lib/toast/TODO.md             |  4 +-
 packages/ui/src/lib/toast/index.parts.ts      |  1 +
 packages/ui/src/lib/toast/index.ts            |  3 +
 .../toast/positioner/toast-positioner.svelte  | 75 +++++++++++++++++++
 .../toast/provider/toast-manager.svelte.ts    | 22 ++++++
 .../src/lib/toast/provider/toast-test.svelte  | 42 ++++++++---
 .../ui/src/lib/toast/provider/toast.test.ts   | 33 ++++++++
 .../ui/src/lib/toast/root/toast-root.svelte   |  6 +-
 packages/ui/src/lib/toast/types.ts            | 11 +++
 .../lib/toast/viewport/toast-viewport.svelte  |  2 +-
 15 files changed, 313 insertions(+), 19 deletions(-)
 create mode 100644 docs/src/content/toast/demos/anchored.svelte
 create mode 100644 packages/ui/src/lib/toast/positioner/toast-positioner.svelte

diff --git a/.changeset/toast-v1.md b/.changeset/toast-v1.md
index f9bf2e35..2ebe961d 100644
--- a/.changeset/toast-v1.md
+++ b/.changeset/toast-v1.md
@@ -2,4 +2,4 @@
 '@human-kit/ui': minor
 ---
 
-Add the Toast primitive with `Provider`, `Viewport`, `Root`, `Content`, `Title`, `Description`, `Action` and `Close`. The manager on `useToastManager()` or `bind:manager` has `add`, `update`, `close` and `promise`. The viewport is a `role="region"` landmark named with the count of toasts, with `F6` in and out, and two live regions beside it announce each toast without its buttons. Each toast is a `dialog` that is not modal, or an `alertdialog` for a high priority, with `Escape` to close, a swipe that follows the finger, and an exit animation from its CSS. The timers stop on hover, on keyboard focus and in a background window, the newest toasts stay up to a limit, and the viewport stays reachable behind a modal dialog. The `ariaHideOutside` primitive learned `data-hk-hide-outside-exempt`.
+Add the Toast primitive with `Provider`, `Viewport`, `Positioner`, `Root`, `Content`, `Title`, `Description`, `Action` and `Close`. The manager on `useToastManager()` or `bind:manager` has `add`, `update`, `close` and `promise`. The viewport is a `role="region"` landmark named with the count of toasts, with `F6` in and out, and two live regions beside it announce each toast without its buttons. Each toast is a `dialog` that is not modal, or an `alertdialog` for a high priority, with `Escape` to close, a swipe that follows the finger, and an exit animation from its CSS. `Toast.Positioner` puts a toast with an `anchor` against that element. The timers stop on hover, on keyboard focus and in a background window, the newest toasts stay up to a limit, and the viewport stays reachable behind a modal dialog. The `ariaHideOutside` primitive learned `data-hk-hide-outside-exempt`.
diff --git a/docs/src/content/toast/api.json b/docs/src/content/toast/api.json
index 96a4d2a0..86955f78 100644
--- a/docs/src/content/toast/api.json
+++ b/docs/src/content/toast/api.json
@@ -80,6 +80,54 @@
 				}
 			]
 		},
+		{
+			"name": "Positioner",
+			"description": "Puts a toast with an anchor against that element, as a fixed div. For a toast without one, it is out of the layout.",
+			"props": [
+				{
+					"name": "toast",
+					"type": "ToastItem",
+					"required": true,
+					"default": null,
+					"description": "The item from `Toast.Viewport`."
+				},
+				{
+					"name": "children",
+					"type": "Snippet",
+					"required": false,
+					"default": null,
+					"description": "The `Toast.Root`."
+				},
+				{
+					"name": "class",
+					"type": "string",
+					"required": false,
+					"default": "''",
+					"description": "The CSS class names of the element."
+				},
+				{
+					"name": "element",
+					"type": "HTMLDivElement | null",
+					"required": false,
+					"default": "null",
+					"description": "The bindable positioner element."
+				}
+			],
+			"dataAttributes": [
+				{
+					"name": "data-anchored",
+					"description": "Present when the item has an anchor."
+				},
+				{
+					"name": "data-placement",
+					"description": "The side of the anchor where the toast sits, after a flip."
+				},
+				{
+					"name": "data-toast-positioner",
+					"description": "Identifies the positioner element."
+				}
+			]
+		},
 		{
 			"name": "Root",
 			"description": "One toast. It makes a div with role=\"dialog\", or role=\"alertdialog\" for a high priority, that is not modal.",
@@ -121,6 +169,10 @@
 				}
 			],
 			"dataAttributes": [
+				{
+					"name": "data-anchored",
+					"description": "Present when the item has an anchor. The toast is out of the stack."
+				},
 				{
 					"name": "data-ending",
 					"description": "Present through the exit animation."
diff --git a/docs/src/content/toast/demos/anchored.svelte b/docs/src/content/toast/demos/anchored.svelte
new file mode 100644
index 00000000..3dbc2a92
--- /dev/null
+++ b/docs/src/content/toast/demos/anchored.svelte
@@ -0,0 +1,59 @@
+<script lang="ts">
+	import { Toast } from '@human-kit/ui';
+	import type { ToastManager } from '@human-kit/ui';
+
+	let manager = $state<ToastManager>();
+	let copyButton = $state<HTMLButtonElement | null>(null);
+
+	const buttonClass =
+		'border border-neutral-300 px-3 py-1 text-sm text-neutral-900 outline-none hover:bg-neutral-100 focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 dark:border-neutral-700 dark:text-white dark:hover:bg-neutral-800 dark:focus-visible:outline-white';
+</script>
+
+<Toast.Provider bind:manager>
+	<button
+		type="button"
+		bind:this={copyButton}
+		class={buttonClass}
+		onclick={() =>
+			manager?.add({
+				id: 'copied',
+				title: 'Link copied',
+				anchor: copyButton,
+				placement: 'top',
+				timeout: 2000
+			})}
+	>
+		Copy link
+	</button>
+	<!-- The positioner puts a toast with an anchor against it. The same id keeps one toast on a
+	     second press: `add` updates it, and the timer starts again. -->
+	<Toast.Viewport>
+		{#snippet children(toast)}
+			<Toast.Positioner {toast}>
+				<Toast.Root
+					{toast}
+					swipeDirection={[]}
+					class="anchored-toast border border-neutral-200 bg-white px-3 py-1.5 text-sm text-neutral-900 shadow-lg outline-none focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-neutral-900 dark:border-neutral-800 dark:bg-neutral-900 dark:text-white dark:focus-visible:outline-white"
+				>
+					<Toast.Content>
+						<Toast.Title />
+					</Toast.Content>
+				</Toast.Root>
+			</Toast.Positioner>
+		{/snippet}
+	</Toast.Viewport>
+</Toast.Provider>
+
+<style>
+	:global(.anchored-toast) {
+		transition:
+			opacity 0.2s,
+			transform 0.2s;
+	}
+
+	:global(.anchored-toast[data-entering]),
+	:global(.anchored-toast[data-exiting]) {
+		opacity: 0;
+		transform: translateY(4px);
+	}
+</style>
diff --git a/docs/src/content/toast/index.md b/docs/src/content/toast/index.md
index d492383e..9850bc98 100644
--- a/docs/src/content/toast/index.md
+++ b/docs/src/content/toast/index.md
@@ -11,6 +11,8 @@ description: A short message about an event, for a time, in a landmark the keybo
 	import promiseSource from './demos/promise.svelte?highlight';
 	import Action from './demos/action.svelte';
 	import actionSource from './demos/action.svelte?highlight';
+	import Anchored from './demos/anchored.svelte';
+	import anchoredSource from './demos/anchored.svelte?highlight';
 	import api from './api.json';
 </script>
 
@@ -24,7 +26,7 @@ description: A short message about an event, for a time, in a landmark the keybo
 
 `Toast.Provider` holds the list of toasts and the timers. Put one around the app. `Toast.Viewport` is the region where the toasts land. Put one in the provider, and give it a snippet that renders a `Toast.Root` for each item.
 
-`Toast.Content` holds `Toast.Title` and `Toast.Description`. `Toast.Action` and `Toast.Close` are the buttons, outside the content.
+`Toast.Content` holds `Toast.Title` and `Toast.Description`. `Toast.Action` and `Toast.Close` are the buttons, outside the content. `Toast.Positioner` is optional: it puts a toast with an `anchor` against that element.
 
 ```svelte
 <script>
@@ -105,7 +107,15 @@ Each toast gets `--toast-index`, `--toast-offset-y` and `--toast-height`, and th
 
 ## A swipe
 
-A swipe pushes the toast out through one of `swipeDirection`: `bottom` and `right` by default. The toast follows the finger with `--toast-swipe-movement-x` and `--toast-swipe-movement-y`, and it comes back when the swipe is short. `data-swipe-dismissed` and `data-swipe-direction` are on the toast for the exit. A swipe never starts on `Toast.Close` or `Toast.Action`.
+A swipe pushes the toast out through one of `swipeDirection`: `bottom` and `right` by default. The toast follows the finger with `--toast-swipe-movement-x` and `--toast-swipe-movement-y`, and it comes back when the swipe is short. `data-swipe-dismissed` and `data-swipe-direction` are on the toast for the exit.
+
+A swipe never starts on `Toast.Close` or `Toast.Action`. Put `data-hk-swipe-ignore` on other content of your own that must not start one, such as a slider in the toast.
+
+## Against an element
+
+Give `anchor` to `add`, with an optional `placement` and `offset`, for a toast that sits against an element in place of the corner. Put `Toast.Positioner` around `Toast.Root` in the viewport snippet. For a toast without an anchor, the positioner is out of the layout, thus one snippet serves both kinds. A toast with an anchor is out of the stack: `--toast-index` reads 0, and `data-anchored` is on the root.
+
+<Demo source={anchoredSource}><Anchored /></Demo>
 
 ## Usage guidelines
 
diff --git a/packages/ui/src/lib/toast/README.md b/packages/ui/src/lib/toast/README.md
index 01186155..1450b79b 100644
--- a/packages/ui/src/lib/toast/README.md
+++ b/packages/ui/src/lib/toast/README.md
@@ -8,6 +8,7 @@
 
 - `Toast.Provider`
 - `Toast.Viewport`
+- `Toast.Positioner`
 - `Toast.Root`
 - `Toast.Content`
 - `Toast.Title`
@@ -40,6 +41,7 @@
 - Keep the buttons out of `Toast.Content`, thus the announcement does not read them.
 - Use `priority: 'high'` only for a message that cannot wait. It interrupts the screen reader.
 - Keep the default `timeout` at 5 seconds or more. A user who reads slowly needs the time.
+- Give `anchor` to `add`, and put `Toast.Positioner` around the root, for a toast against an element.
 - Style the stack with `--toast-index`, `--toast-offset-y`, `--toast-height`, `--toast-frontmost-height`, `data-front` and `data-expanded`. Move the toast with `--toast-swipe-movement-x` and `--toast-swipe-movement-y`.
 
 ## API reference
@@ -49,12 +51,14 @@
   - `manager?: ToastManager` (bindable)
 - `Toast.Viewport`
   - `children: Snippet<[ToastItem]>`, `portal?: boolean` (true)
+- `Toast.Positioner`
+  - `toast: ToastItem`
 - `Toast.Root`
   - `toast: ToastItem`, `swipeDirection?: SwipeSide[]` (`['bottom', 'right']`)
 - `Toast.Action`
   - `keepOpen?: boolean`
 - `ToastManager`
-  - `add(options) => id`, `update(id, options | (toast) => options)`, `close(id?)`, `promise(promise, { loading, success, error })`
+  - `add({ title, description, type, timeout, priority, data, anchor, placement, offset }) => id`, `update(id, options | (toast) => options)`, `close(id?)`, `promise(promise, { loading, success, error })`
   - `pauseTimers()`, `resumeTimers()`, `toasts`, `visibleToasts`
 
 ## Accessibility
diff --git a/packages/ui/src/lib/toast/TODO.md b/packages/ui/src/lib/toast/TODO.md
index 80109689..3a685e60 100644
--- a/packages/ui/src/lib/toast/TODO.md
+++ b/packages/ui/src/lib/toast/TODO.md
@@ -16,5 +16,5 @@ Track Toast work with a single mandatory TODO format.
 - [x] [M][P1][Area: Interaction][Owner: Unassigned][Target: Done] Dismiss on a swipe that follows the finger, with a threshold and a flick, and never from a button.
 - [x] [S][P1][Area: Accessibility][Owner: Unassigned][Target: Done] Keep the viewport reachable behind a modal dialog.
 - [x] [M][P0][Area: Testing][Owner: Unassigned][Target: Done] Add coverage for the region, the announcements, the timers, the keyboard, the buttons, the limit, the swipe, the shared manager and SSR.
-- [ ] [S][P2][Area: API][Owner: Unassigned][Target: Backlog] Add a `Toast.Positioner` for a toast anchored to an element, such as a button.
-- [ ] [S][P2][Area: Interaction][Owner: Unassigned][Target: Backlog] Add a `data-hk-swipe-ignore` note to the docs for content of the consumer that must not start a swipe.
+- [x] [S][P2][Area: API][Owner: Unassigned][Target: Done] Add a `Toast.Positioner` for a toast anchored to an element, such as a button.
+- [x] [S][P2][Area: Interaction][Owner: Unassigned][Target: Done] Add a `data-hk-swipe-ignore` note to the docs for content of the consumer that must not start a swipe.
diff --git a/packages/ui/src/lib/toast/index.parts.ts b/packages/ui/src/lib/toast/index.parts.ts
index 72d1e067..20c5abf4 100644
--- a/packages/ui/src/lib/toast/index.parts.ts
+++ b/packages/ui/src/lib/toast/index.parts.ts
@@ -1,5 +1,6 @@
 export { default as Provider } from './provider/toast-provider.svelte';
 export { default as Viewport } from './viewport/toast-viewport.svelte';
+export { default as Positioner } from './positioner/toast-positioner.svelte';
 export { default as Root } from './root/toast-root.svelte';
 export { default as Content } from './content/toast-content.svelte';
 export { default as Title } from './title/toast-title.svelte';
diff --git a/packages/ui/src/lib/toast/index.ts b/packages/ui/src/lib/toast/index.ts
index 95182105..637aff2e 100644
--- a/packages/ui/src/lib/toast/index.ts
+++ b/packages/ui/src/lib/toast/index.ts
@@ -3,6 +3,7 @@ import type ToastActionComponent from './action/toast-action.svelte';
 import type ToastCloseComponent from './close/toast-close.svelte';
 import type ToastContentComponent from './content/toast-content.svelte';
 import type ToastDescriptionComponent from './description/toast-description.svelte';
+import type ToastPositionerComponent from './positioner/toast-positioner.svelte';
 import type ToastProviderComponent from './provider/toast-provider.svelte';
 import type ToastRootComponent from './root/toast-root.svelte';
 import type ToastTitleComponent from './title/toast-title.svelte';
@@ -12,6 +13,7 @@ export * as Toast from './index.parts.js';
 
 export { default as ToastProvider } from './provider/toast-provider.svelte';
 export { default as ToastViewport } from './viewport/toast-viewport.svelte';
+export { default as ToastPositioner } from './positioner/toast-positioner.svelte';
 export { default as ToastRoot } from './root/toast-root.svelte';
 export { default as ToastContent } from './content/toast-content.svelte';
 export { default as ToastTitle } from './title/toast-title.svelte';
@@ -20,6 +22,7 @@ export { default as ToastClose } from './close/toast-close.svelte';
 export { default as ToastAction } from './action/toast-action.svelte';
 export type ToastProviderProps = ComponentProps<typeof ToastProviderComponent>;
 export type ToastViewportProps = ComponentProps<typeof ToastViewportComponent>;
+export type ToastPositionerProps = ComponentProps<typeof ToastPositionerComponent>;
 export type ToastRootProps = ComponentProps<typeof ToastRootComponent>;
 export type ToastContentProps = ComponentProps<typeof ToastContentComponent>;
 export type ToastTitleProps = ComponentProps<typeof ToastTitleComponent>;
diff --git a/packages/ui/src/lib/toast/positioner/toast-positioner.svelte b/packages/ui/src/lib/toast/positioner/toast-positioner.svelte
new file mode 100644
index 00000000..edf111d4
--- /dev/null
+++ b/packages/ui/src/lib/toast/positioner/toast-positioner.svelte
@@ -0,0 +1,75 @@
+<script lang="ts">
+	import { floating, type ExtendedPlacement } from '../../primitives/floating';
+	import { getFloatingLayerZIndex } from '../../primitives/layer-stack';
+	import { useToastProviderContext } from '../provider/context';
+	import type { ToastPositionerProps } from '../types.js';
+
+	/**
+	 * Toast.Positioner — puts a toast against the `anchor` of its item.
+	 *
+	 * Put it around `Toast.Root` in the viewport snippet. For a toast without an anchor, it is a
+	 * plain wrapper, thus one snippet serves both kinds. For a toast with one, it is a fixed
+	 * element that follows the anchor, flips when the space is not sufficient, and draws above
+	 * the topmost dialog of the moment.
+	 */
+	let {
+		toast,
+		children,
+		class: className = '',
+		element = $bindable<HTMLDivElement | null>(null),
+		style,
+		...restProps
+	}: ToastPositionerProps = $props();
+
+	useToastProviderContext('Toast.Positioner');
+
+	let positionerRef: HTMLDivElement | null = $state(null);
+	let resolvedPlacement = $state<string | undefined>(undefined);
+	// Resolved when the toast appears, thus it draws above the topmost dialog of that moment.
+	const zIndex = getFloatingLayerZIndex();
+
+	const anchor = $derived(toast.anchor && toast.anchor.isConnected ? toast.anchor : null);
+	const placement = $derived<ExtendedPlacement>(toast.placement ?? 'top');
+
+	$effect(() => {
+		element = positionerRef;
+	});
+
+	function resolvePlacementSide(value: string) {
+		const side = value.split(/[-\s]/)[0];
+		return side === 'top' || side === 'right' || side === 'left' ? side : 'bottom';
+	}
+</script>
+
+{#if anchor}
+	<div
+		{...restProps}
+		bind:this={positionerRef}
+		class={className}
+		style="position: fixed; z-index: {zIndex};{style ? ` ${style}` : ''}"
+		data-toast-positioner="true"
+		data-anchored="true"
+		data-placement={resolvedPlacement}
+		use:floating={{
+			anchor,
+			placement,
+			offset: toast.offset ?? 8,
+			onPositionUpdate: (_, __, finalPlacement) => {
+				resolvedPlacement = resolvePlacementSide(finalPlacement);
+			}
+		}}
+	>
+		{@render children?.()}
+	</div>
+{:else}
+	<!-- Out of the layout: the root keeps its place in the stack of the viewport. -->
+	<div
+		{...restProps}
+		bind:this={positionerRef}
+		class={className}
+		style="display: contents;{style ? ` ${style}` : ''}"
+		data-toast-positioner="true"
+	>
+		{@render children?.()}
+	</div>
+{/if}
diff --git a/packages/ui/src/lib/toast/provider/toast-manager.svelte.ts b/packages/ui/src/lib/toast/provider/toast-manager.svelte.ts
index d47cda3f..1f253d22 100644
--- a/packages/ui/src/lib/toast/provider/toast-manager.svelte.ts
+++ b/packages/ui/src/lib/toast/provider/toast-manager.svelte.ts
@@ -1,4 +1,5 @@
 import { untrack } from 'svelte';
+import type { ExtendedPlacement } from '../../primitives/floating';
 
 export type ToastPriority = 'low' | 'high';
 export type ToastStatus = 'open' | 'ending';
@@ -29,6 +30,15 @@ export type ToastOptions<Data = unknown> = {
 	priority?: ToastPriority;
 	/** Data of your own, for the content you render. */
 	data?: Data;
+	/**
+	 * An element the toast sits against, in place of the viewport. `Toast.Positioner` puts the
+	 * toast there. The toast is out of the stack: it has no place in the corner to take.
+	 */
+	anchor?: HTMLElement | null;
+	/** The side of the anchor for the toast. `top` by default. */
+	placement?: ExtendedPlacement;
+	/** The gap between the anchor and the toast, in pixels. 8 by default. */
+	offset?: number;
 	/** Runs when the toast starts to close. */
 	onClose?: () => void;
 	/** Runs when the toast leaves the DOM, after its exit animation. */
@@ -43,6 +53,9 @@ export type ToastItem<Data = unknown> = {
 	readonly timeout: number;
 	readonly priority: ToastPriority;
 	readonly data: Data | undefined;
+	readonly anchor: HTMLElement | null | undefined;
+	readonly placement: ExtendedPlacement | undefined;
+	readonly offset: number | undefined;
 	/** `open` on the screen, `ending` through the exit animation. */
 	readonly status: ToastStatus;
 	/** The toast is past the limit of the viewport. It waits, hidden and inert. */
@@ -73,6 +86,8 @@ export type ToastManager<Data = unknown> = {
 	readonly toasts: readonly ToastItem<Data>[];
 	/** The toasts on the screen: the newest ones, up to the limit. */
 	readonly visibleToasts: readonly ToastItem<Data>[];
+	/** The toasts on the screen that stack in the viewport: the ones without an anchor. */
+	readonly stackedToasts: readonly ToastItem<Data>[];
 	/** Adds a toast, and answers its id. */
 	add: (options: ToastOptions<Data>) => string;
 	/** Updates a toast. The options replace the fields they name. */
@@ -139,6 +154,7 @@ export function createToastManager<Data = unknown>(
 	const getLimit = options.limit ?? (() => DEFAULT_TOAST_LIMIT);
 
 	const visibleToasts = $derived(toasts.filter((toast) => !toast.limited));
+	const stackedToasts = $derived(visibleToasts.filter((toast) => !toast.anchor));
 
 	function setToasts(next: ToastItem<Data>[]) {
 		toasts = applyLimit(next);
@@ -228,6 +244,9 @@ export function createToastManager<Data = unknown>(
 			timeout: options.timeout ?? untrack(getTimeout),
 			priority: options.priority ?? 'low',
 			data: options.data,
+			anchor: options.anchor,
+			placement: options.placement,
+			offset: options.offset,
 			status: 'open',
 			limited: false,
 			updateKey: 0,
@@ -321,6 +340,9 @@ export function createToastManager<Data = unknown>(
 		get visibleToasts() {
 			return visibleToasts;
 		},
+		get stackedToasts() {
+			return stackedToasts;
+		},
 		get paused() {
 			return paused;
 		},
diff --git a/packages/ui/src/lib/toast/provider/toast-test.svelte b/packages/ui/src/lib/toast/provider/toast-test.svelte
index d09c7bc7..c04144fa 100644
--- a/packages/ui/src/lib/toast/provider/toast-test.svelte
+++ b/packages/ui/src/lib/toast/provider/toast-test.svelte
@@ -10,6 +10,7 @@
 		swipeDirection?: SwipeSide[];
 		withAction?: boolean;
 		keepOpen?: boolean;
+		withPositioner?: boolean;
 		onManager?: (manager: ToastManager) => void;
 	};
 
@@ -20,9 +21,12 @@
 		swipeDirection,
 		withAction = false,
 		keepOpen = false,
+		withPositioner = false,
 		onManager
 	}: Props = $props();
 
+	let anchorRef = $state<HTMLButtonElement | null>(null);
+
 	let manager = $state<ToastManager>();
 
 	$effect(() => {
@@ -40,6 +44,15 @@
 	>
 		Add
 	</button>
+	<button
+		type="button"
+		bind:this={anchorRef}
+		data-testid="add-anchored"
+		onclick={() =>
+			manager?.add({ title: 'Copied', anchor: anchorRef, placement: 'bottom', offset: 4 })}
+	>
+		Add anchored
+	</button>
 	<button
 		type="button"
 		data-testid="add-high"
@@ -50,16 +63,25 @@
 	</button>
 	<Toast.Viewport data-testid="viewport" {portal}>
 		{#snippet children(toast)}
-			<Toast.Root {toast} {swipeDirection} data-testid="toast-{toast.id}" style="width: 200px;">
-				<Toast.Content data-testid="content">
-					<Toast.Title data-testid="title" />
-					<Toast.Description data-testid="description" />
-				</Toast.Content>
-				{#if withAction}
-					<Toast.Action data-testid="action" {keepOpen}>Undo</Toast.Action>
-				{/if}
-				<Toast.Close data-testid="close" aria-label="Close">x</Toast.Close>
-			</Toast.Root>
+			{#snippet root()}
+				<Toast.Root {toast} {swipeDirection} data-testid="toast-{toast.id}" style="width: 200px;">
+					<Toast.Content data-testid="content">
+						<Toast.Title data-testid="title" />
+						<Toast.Description data-testid="description" />
+					</Toast.Content>
+					{#if withAction}
+						<Toast.Action data-testid="action" {keepOpen}>Undo</Toast.Action>
+					{/if}
+					<Toast.Close data-testid="close" aria-label="Close">x</Toast.Close>
+				</Toast.Root>
+			{/snippet}
+			{#if withPositioner}
+				<Toast.Positioner {toast} data-testid="positioner-{toast.id}">
+					{@render root()}
+				</Toast.Positioner>
+			{:else}
+				{@render root()}
+			{/if}
 		{/snippet}
 	</Toast.Viewport>
 </Toast.Provider>
diff --git a/packages/ui/src/lib/toast/provider/toast.test.ts b/packages/ui/src/lib/toast/provider/toast.test.ts
index 8a0933d1..25af962b 100644
--- a/packages/ui/src/lib/toast/provider/toast.test.ts
+++ b/packages/ui/src/lib/toast/provider/toast.test.ts
@@ -424,6 +424,39 @@ describe('Toast', () => {
 		});
 	});
 
+	describe('positioner', () => {
+		it('puts an anchored toast against its anchor, and keeps it out of the stack', async () => {
+			setup({ withPositioner: true });
+
+			await press('add');
+			await press('add-anchored');
+			await tick();
+
+			const anchored = toasts().find((toast) => toast.hasAttribute('data-anchored'));
+			const stacked = toasts().find((toast) => !toast.hasAttribute('data-anchored'));
+			expect(anchored).toBeDefined();
+			expect(stacked?.getAttribute('data-front')).toBe('true');
+			expect(stacked?.style.getPropertyValue('--toast-index')).toBe('0');
+			expect(anchored?.style.getPropertyValue('--toast-index')).toBe('0');
+
+			const positioner = anchored?.parentElement as HTMLElement;
+			expect(positioner.getAttribute('data-toast-positioner')).toBe('true');
+			expect(positioner.getAttribute('data-anchored')).toBe('true');
+			expect(positioner.style.position).toBe('fixed');
+			await expect.poll(() => positioner.getAttribute('data-placement')).toBe('bottom');
+			const anchorRect = byTestId('add-anchored').getBoundingClientRect();
+			await expect
+				.poll(() => Math.round(positioner.getBoundingClientRect().top))
+				.toBe(Math.round(anchorRect.bottom + 4));
+
+			// The plain wrapper of a stacked toast stays out of the layout.
+			const plain = stacked?.parentElement as HTMLElement;
+			expect(plain.getAttribute('data-toast-positioner')).toBe('true');
+			expect(plain.hasAttribute('data-anchored')).toBe(false);
+			expect(plain.style.display).toBe('contents');
+		});
+	});
+
 	describe('swipe', () => {
 		it('follows the finger, and dismisses past the threshold', async () => {
 			setup({ swipeDirection: ['right'] });
diff --git a/packages/ui/src/lib/toast/root/toast-root.svelte b/packages/ui/src/lib/toast/root/toast-root.svelte
index 8845bf82..5b7fa841 100644
--- a/packages/ui/src/lib/toast/root/toast-root.svelte
+++ b/packages/ui/src/lib/toast/root/toast-root.svelte
@@ -42,13 +42,14 @@
 	let descriptionIds = $state<string[]>([]);
 
 	const isEnding = $derived(toast.status === 'ending');
-	const index = $derived(manager.visibleToasts.findIndex((candidate) => candidate.id === toast.id));
+	// A toast against an anchor is out of the stack: `index` is -1, and the vars read 0.
+	const index = $derived(manager.stackedToasts.findIndex((candidate) => candidate.id === toast.id));
 	const height = $derived(ctx.heights.get(toast.id) ?? null);
 	// The height of the toasts in front, for a stack that shifts the ones behind.
 	const offsetY = $derived.by(() => {
 		if (index <= 0) return 0;
 		let total = 0;
-		for (const candidate of manager.visibleToasts.slice(0, index)) {
+		for (const candidate of manager.stackedToasts.slice(0, index)) {
 			total += ctx.heights.get(candidate.id) ?? 0;
 		}
 		return total;
@@ -242,6 +243,7 @@ before it reaches the buttons in it. -->
 	data-type={toast.type}
 	data-priority={toast.priority}
 	data-front={index === 0 || undefined}
+	data-anchored={Boolean(toast.anchor) || undefined}
 	data-limited={toast.limited || undefined}
 	data-expanded={ctx.expanded || undefined}
 	data-ending={isEnding || undefined}
diff --git a/packages/ui/src/lib/toast/types.ts b/packages/ui/src/lib/toast/types.ts
index cda8f9ed..c2a036c1 100644
--- a/packages/ui/src/lib/toast/types.ts
+++ b/packages/ui/src/lib/toast/types.ts
@@ -67,6 +67,17 @@ export type ToastRootProps = Omit<
 	element?: HTMLDivElement | null;
 };
 
+export type ToastPositionerProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'class'> & {
+	/** The item from `Toast.Viewport`. */
+	toast: ToastItem;
+	/** The `Toast.Root`. */
+	children?: Snippet;
+	/** The CSS class names of the element. */
+	class?: string;
+	/** The bindable positioner element. */
+	element?: HTMLDivElement | null;
+};
+
 export type ToastContentProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'class'> & {
 	/** The title and the description. */
 	children?: Snippet;
diff --git a/packages/ui/src/lib/toast/viewport/toast-viewport.svelte b/packages/ui/src/lib/toast/viewport/toast-viewport.svelte
index 05e953fe..78241769 100644
--- a/packages/ui/src/lib/toast/viewport/toast-viewport.svelte
+++ b/packages/ui/src/lib/toast/viewport/toast-viewport.svelte
@@ -255,7 +255,7 @@
 	});
 
 	const frontmostHeight = $derived.by(() => {
-		const front = manager.visibleToasts[0];
+		const front = manager.stackedToasts[0];
 		return front ? (ctx.heights.get(front.id) ?? null) : null;
 	});
 	const exemptAttribute = { [HIDE_OUTSIDE_EXEMPT_ATTRIBUTE]: '' };

From 4103e5738ed093c85ea7dbfc29b202f3f9f3fea8 Mon Sep 17 00:00:00 2001
From: Agustin Delgado <agustindariodelgado@gmail.com>
Date: Fri, 18 Sep 2026 17:36:47 -0300
Subject: [PATCH 03/13] fix(toast): announce every toast, name one without a
 title, and keep Tab behind a modal

Two toasts in the same tick were one message: the announcers now hold one
node per message, for a while, thus the screen reader reads both, and the
same text twice. A toast without a title takes its name from the
description, because a dialog without a name is a fault. A close from the
page moves the focus on when it was in the toast. The count in the name of
the region leaves out a toast on its way out. A hidden tab stops the
timers, and the focus trap of a modal leaves `Tab` to a surface that stays
reachable behind it, thus `Tab` moves in the toast and goes back to the
dialog after its last button.
---
 .changeset/toast-v1.md                        |   2 +-
 docs/src/content/toast/index.md               |   8 +-
 packages/ui/src/lib/primitives/focus-trap.ts  |   4 +
 packages/ui/src/lib/toast/README.md           |   4 +-
 .../description/toast-description.svelte      |  25 ++--
 .../ui/src/lib/toast/provider/toast.test.ts   | 117 +++++++++++++++++-
 .../ui/src/lib/toast/root/toast-root.svelte   |  16 ++-
 .../ui/src/lib/toast/title/toast-title.svelte |  25 ++--
 .../lib/toast/viewport/toast-viewport.svelte  |  84 +++++++++----
 9 files changed, 231 insertions(+), 54 deletions(-)

diff --git a/.changeset/toast-v1.md b/.changeset/toast-v1.md
index 2ebe961d..363c4504 100644
--- a/.changeset/toast-v1.md
+++ b/.changeset/toast-v1.md
@@ -2,4 +2,4 @@
 '@human-kit/ui': minor
 ---
 
-Add the Toast primitive with `Provider`, `Viewport`, `Positioner`, `Root`, `Content`, `Title`, `Description`, `Action` and `Close`. The manager on `useToastManager()` or `bind:manager` has `add`, `update`, `close` and `promise`. The viewport is a `role="region"` landmark named with the count of toasts, with `F6` in and out, and two live regions beside it announce each toast without its buttons. Each toast is a `dialog` that is not modal, or an `alertdialog` for a high priority, with `Escape` to close, a swipe that follows the finger, and an exit animation from its CSS. `Toast.Positioner` puts a toast with an `anchor` against that element. The timers stop on hover, on keyboard focus and in a background window, the newest toasts stay up to a limit, and the viewport stays reachable behind a modal dialog. The `ariaHideOutside` primitive learned `data-hk-hide-outside-exempt`.
+Add the Toast primitive with `Provider`, `Viewport`, `Positioner`, `Root`, `Content`, `Title`, `Description`, `Action` and `Close`. The manager on `useToastManager()` or `bind:manager` has `add`, `update`, `close` and `promise`. The viewport is a `role="region"` landmark named with the count of toasts, with `F6` in and out, and two live regions beside it announce each toast without its buttons. Each toast is a `dialog` that is not modal, or an `alertdialog` for a high priority, with `Escape` to close, a swipe that follows the finger, and an exit animation from its CSS. `Toast.Positioner` puts a toast with an `anchor` against that element. The timers stop on hover, on keyboard focus and in a background window, the newest toasts stay up to a limit, and the viewport stays reachable behind a modal dialog. The `ariaHideOutside` primitive learned `data-hk-hide-outside-exempt`, and the focus trap leaves `Tab` to a surface with that attribute while the focus is in it.
diff --git a/docs/src/content/toast/index.md b/docs/src/content/toast/index.md
index 9850bc98..163680df 100644
--- a/docs/src/content/toast/index.md
+++ b/docs/src/content/toast/index.md
@@ -85,7 +85,7 @@ The title and the description are text. That text is what the screen reader hear
 
 A toast stays `timeout` milliseconds: 5000 by default, on the provider or on the toast. `0` keeps it until a close.
 
-The timers stop while the pointer rests on the viewport, while the keyboard focus is in it, and while the window is in the background. They start again with the time each toast had left. A toast that closes while the user reads it is a toast the user did not read.
+The timers stop while the pointer rests on the viewport, and while the keyboard focus is in it. They also stop while the window is in the background, or the tab is hidden. They start again with the time each toast had left. A toast that closes while the user reads it is a toast the user did not read.
 
 ## The stack
 
@@ -128,10 +128,10 @@ Give `anchor` to `add`, with an optional `placement` and `offset`, for a toast t
 ## Accessibility
 
 - `Toast.Viewport` is a `role="region"` landmark, named with the count of toasts. `F6` moves the focus into it from anywhere on the page, and back. A `Tab` past the last button goes back to where the focus was.
-- Two live regions beside the viewport announce each toast: `role="status"` for the normal priority, and `role="alert"` for the high priority. They are on the page before the first toast, thus the first toast is announced too.
-- `Toast.Root` is a `role="dialog"` that is not modal, or an `alertdialog` for the high priority. It has `aria-labelledby` from the title and `aria-describedby` from the description, and it is a tab stop.
+- Two live regions beside the viewport announce each toast: `role="status"` for the normal priority, and `role="alert"` for the high priority. They are on the page before the first toast, thus the first toast is announced too. Two toasts in the same tick are two messages.
+- `Toast.Root` is a `role="dialog"` that is not modal, or an `alertdialog` for the high priority. It has `aria-labelledby` from the title and `aria-describedby` from the description, and it is a tab stop. A toast without a title takes its name from the description: a dialog without a name is a fault.
 - `Escape` closes the focused toast. The focus moves to the next toast, or back to where it was.
-- The viewport stays reachable behind a modal `Dialog`.
+- The viewport stays reachable behind a modal `Dialog`: `F6` moves the focus into it, `Tab` moves in it, and a `Tab` past its last button goes back to the dialog.
 
 ## API reference
 
diff --git a/packages/ui/src/lib/primitives/focus-trap.ts b/packages/ui/src/lib/primitives/focus-trap.ts
index 23debef5..eb1e0f6f 100644
--- a/packages/ui/src/lib/primitives/focus-trap.ts
+++ b/packages/ui/src/lib/primitives/focus-trap.ts
@@ -3,6 +3,7 @@
  * Traps keyboard focus within a container element.
  */
 
+import { HIDE_OUTSIDE_EXEMPT_ATTRIBUTE } from './aria-hide-outside';
 import { focusWithModality, getInteractionModality } from './input-modality';
 
 const FOCUSABLE_SELECTOR = [
@@ -98,6 +99,9 @@ export function focusTrap(node: HTMLElement, options: boolean | FocusTrapOptions
 		// Only the topmost active trap arbitrates Tab; ancestor traps under a
 		// nested overlay must not intercept it.
 		if (!isTopmostTrap(node)) return;
+		// A surface that stays reachable behind the modal, such as a toast viewport, manages its
+		// own Tab while the focus is in it, and sends the focus back on its own.
+		if (document.activeElement?.closest(`[${HIDE_OUTSIDE_EXEMPT_ATTRIBUTE}]`)) return;
 
 		const focusableElements = getFocusableElements(node);
 		if (focusableElements.length === 0) {
diff --git a/packages/ui/src/lib/toast/README.md b/packages/ui/src/lib/toast/README.md
index 1450b79b..06ada860 100644
--- a/packages/ui/src/lib/toast/README.md
+++ b/packages/ui/src/lib/toast/README.md
@@ -67,5 +67,5 @@
 - Two live regions beside the viewport announce each toast: `role="status"` for the normal priority, and `role="alert"` for the high priority. The message is the title and the description.
 - `Toast.Root` is a `role="dialog"` that is not modal, or an `alertdialog` for the high priority. It has `aria-labelledby` from the title and `aria-describedby` from the description, and it is a tab stop.
 - `Escape` closes the focused toast, and the focus moves to the next toast, or back to where it was.
-- The timers stop while the pointer rests on the viewport, while the focus is in it, and while the window is in the background.
-- The viewport stays reachable behind a modal dialog.
+- The timers stop while the pointer rests on the viewport, and while the focus is in it. They also stop while the window is in the background, or the tab is hidden.
+- The viewport stays reachable behind a modal dialog, with `F6` and `Tab`.
diff --git a/packages/ui/src/lib/toast/description/toast-description.svelte b/packages/ui/src/lib/toast/description/toast-description.svelte
index 964c796a..c1932b36 100644
--- a/packages/ui/src/lib/toast/description/toast-description.svelte
+++ b/packages/ui/src/lib/toast/description/toast-description.svelte
@@ -19,14 +19,23 @@
 	const generatedId = $props.id();
 	const id = $derived(idProp ?? generatedId);
 
+	// Without children and without a `description` on the item there is nothing to say: the
+	// part renders nothing, and it describes nothing.
+	const hasContent = $derived(Boolean(children) || Boolean(ctx.toast.description));
+
 	// The returned unregister runs on destroy, and again whenever the id changes.
-	$effect(() => ctx.registerDescription(id));
+	$effect(() => {
+		if (!hasContent) return;
+		return ctx.registerDescription(id);
+	});
 </script>
 
-<p {...restProps} {id} class={className} data-toast-description="true">
-	{#if children}
-		{@render children()}
-	{:else}
-		{ctx.toast.description}
-	{/if}
-</p>
+{#if hasContent}
+	<p {...restProps} {id} class={className} data-toast-description="true">
+		{#if children}
+			{@render children()}
+		{:else}
+			{ctx.toast.description}
+		{/if}
+	</p>
+{/if}
diff --git a/packages/ui/src/lib/toast/provider/toast.test.ts b/packages/ui/src/lib/toast/provider/toast.test.ts
index 25af962b..c6f5b975 100644
--- a/packages/ui/src/lib/toast/provider/toast.test.ts
+++ b/packages/ui/src/lib/toast/provider/toast.test.ts
@@ -21,12 +21,14 @@ function region(): HTMLElement | null {
 	return document.querySelector<HTMLElement>('[data-toast-viewport]');
 }
 
+/** The last message of the polite announcer. */
 function polite(): string {
-	return document.querySelector('[role="status"]')?.textContent?.trim() ?? '';
+	return document.querySelector('[role="status"] > div:last-child')?.textContent?.trim() ?? '';
 }
 
+/** The last message of the assertive announcer. */
 function assertive(): string {
-	return document.querySelector('[role="alert"]')?.textContent?.trim() ?? '';
+	return document.querySelector('[role="alert"] > div:last-child')?.textContent?.trim() ?? '';
 }
 
 async function press(id: string) {
@@ -68,11 +70,15 @@ function getManager(): ToastManager {
 describe('Toast', () => {
 	beforeEach(() => {
 		vi.useFakeTimers({ toFake: ['setTimeout', 'clearTimeout', 'Date'] });
+		// The full run puts each file in a frame the browser can report as hidden, and a hidden
+		// page stops the timers. These tests are about a page the user looks at.
+		Object.defineProperty(document, 'visibilityState', { value: 'visible', configurable: true });
 	});
 
 	afterEach(() => {
 		vi.useRealTimers();
 		manager = undefined;
+		Reflect.deleteProperty(document, 'visibilityState');
 	});
 
 	describe('region and announcement', () => {
@@ -298,6 +304,22 @@ describe('Toast', () => {
 			await expect.poll(() => toasts().length).toBe(0);
 		});
 
+		it('stops the timers while the tab is hidden', async () => {
+			setup({ timeout: 1000 });
+			await press('add');
+			await advance(500);
+
+			Object.defineProperty(document, 'visibilityState', { value: 'hidden', configurable: true });
+			document.dispatchEvent(new Event('visibilitychange'));
+			await advance(3000);
+			expect(toasts()).toHaveLength(1);
+
+			Object.defineProperty(document, 'visibilityState', { value: 'visible', configurable: true });
+			document.dispatchEvent(new Event('visibilitychange'));
+			await advance(500);
+			await expect.poll(() => toasts().length).toBe(0);
+		});
+
 		it('does not stop the timers for a touch on the region', async () => {
 			setup({ timeout: 1000 });
 			await press('add');
@@ -325,6 +347,97 @@ describe('Toast', () => {
 			expect(viewport?.closest('[inert]')).toBeNull();
 			expect(byTestId('add').closest('[aria-hidden="true"]')).not.toBeNull();
 		});
+
+		it('F6 reaches the toast from the modal, and F6 goes back to it', async () => {
+			render(ToastModalTest);
+			await tick();
+			await expect.poll(() => byTestId('dialog').getAttribute('aria-modal')).toBe('true');
+			await new Promise((done) => requestAnimationFrame(() => requestAnimationFrame(done)));
+			byTestId('add').click();
+			await tick();
+			const dismiss = byTestId('dialog').querySelector<HTMLButtonElement>('[data-dialog-close]');
+			dismiss?.focus();
+			expect(document.activeElement).toBe(dismiss);
+
+			await userEvent.keyboard('{F6}');
+			await tick();
+			await new Promise((done) => requestAnimationFrame(done));
+			expect(document.activeElement?.hasAttribute('data-toast-root')).toBe(true);
+
+			await userEvent.keyboard('{Tab}');
+			await tick();
+			expect(document.activeElement).toBe(byTestId('close'));
+
+			await userEvent.keyboard('{F6}');
+			await tick();
+			expect(document.activeElement).toBe(dismiss);
+		});
+	});
+
+	describe('announcements', () => {
+		it('reads two toasts of the same tick, and the same text twice', async () => {
+			setup();
+			await tick();
+
+			getManager().add({ title: 'Same' });
+			getManager().add({ title: 'Same' });
+			await tick();
+
+			const nodes = document.querySelectorAll('[role="status"] > div');
+			expect(Array.from(nodes).map((node) => node.textContent)).toEqual(['Same', 'Same']);
+
+			await advance(2100);
+			expect(document.querySelectorAll('[role="status"] > div')).toHaveLength(0);
+		});
+
+		it('names a toast without a title by its description', async () => {
+			setup();
+			await tick();
+
+			getManager().add({ description: 'Only a message' });
+			await tick();
+			const toast = toasts()[0];
+
+			await expect
+				.poll(() => toast.getAttribute('aria-labelledby'))
+				.toBe(byTestId('description').id);
+			expect(toast.hasAttribute('aria-describedby')).toBe(false);
+		});
+
+		it('does not count a toast on its way out in the name of the region', async () => {
+			setup({ timeout: 0 });
+			await tick();
+
+			const id = getManager().add({ title: 'A' });
+			getManager().add({ title: 'B' });
+			await tick();
+			expect(region()?.getAttribute('aria-label')).toBe('2 notifications');
+
+			getManager().close(id);
+			await tick();
+			expect(region()?.getAttribute('aria-label')).toBe('1 notification');
+		});
+
+		it('moves the focus on when the page closes the focused toast', async () => {
+			setup();
+			await tick();
+
+			const first = getManager().add({ title: 'A' });
+			getManager().add({ title: 'B' });
+			await tick();
+			byTestId('before').focus();
+			await userEvent.keyboard('{F6}');
+			await tick();
+			// The newest is first: F6 lands on B. Focus A, then close it from the page.
+			const a = byTestId(`toast-${first}`);
+			a.focus();
+			expect(document.activeElement).toBe(a);
+
+			getManager().close(first);
+			await tick();
+			expect(document.activeElement?.getAttribute('data-toast-id')).not.toBe(first);
+			expect(document.activeElement?.hasAttribute('data-toast-root')).toBe(true);
+		});
 	});
 
 	describe('keyboard', () => {
diff --git a/packages/ui/src/lib/toast/root/toast-root.svelte b/packages/ui/src/lib/toast/root/toast-root.svelte
index 5b7fa841..56af73a0 100644
--- a/packages/ui/src/lib/toast/root/toast-root.svelte
+++ b/packages/ui/src/lib/toast/root/toast-root.svelte
@@ -56,10 +56,20 @@
 	});
 
 	function close() {
-		ctx.focusAfterClose(toast.id);
 		manager.close(toast.id);
 	}
 
+	// A close from anywhere, also from the page through the manager, moves the focus on when it
+	// was in this toast. Otherwise the focus would fall to the body with the element.
+	$effect(() => {
+		if (!isEnding) return;
+		const node = rootRef;
+		const active = document.activeElement;
+		if (node && active instanceof Node && node.contains(active)) {
+			untrack(() => ctx.focusAfterClose(toast.id));
+		}
+	});
+
 	function register(list: 'title' | 'description', id: string) {
 		untrack(() => {
 			if (list === 'title') titleIds = [...titleIds, id];
@@ -233,8 +243,8 @@ before it reaches the buttons in it. -->
 	{role}
 	aria-modal="false"
 	tabindex="0"
-	aria-labelledby={context.labelledBy}
-	aria-describedby={context.describedBy}
+	aria-labelledby={context.labelledBy ?? context.describedBy}
+	aria-describedby={context.labelledBy ? context.describedBy : undefined}
 	inert={toast.limited || undefined}
 	class={className}
 	style={inlineStyle}
diff --git a/packages/ui/src/lib/toast/title/toast-title.svelte b/packages/ui/src/lib/toast/title/toast-title.svelte
index 4e1c99ff..b02086d1 100644
--- a/packages/ui/src/lib/toast/title/toast-title.svelte
+++ b/packages/ui/src/lib/toast/title/toast-title.svelte
@@ -16,14 +16,23 @@
 	const generatedId = $props.id();
 	const id = $derived(idProp ?? generatedId);
 
+	// Without children and without a `title` on the item there is nothing to say: the part
+	// renders nothing, and it gives no name. The description then names the toast.
+	const hasContent = $derived(Boolean(children) || Boolean(ctx.toast.title));
+
 	// The returned unregister runs on destroy, and again whenever the id changes.
-	$effect(() => ctx.registerTitle(id));
+	$effect(() => {
+		if (!hasContent) return;
+		return ctx.registerTitle(id);
+	});
 </script>
 
-<div {...restProps} {id} class={className} data-toast-title="true">
-	{#if children}
-		{@render children()}
-	{:else}
-		{ctx.toast.title}
-	{/if}
-</div>
+{#if hasContent}
+	<div {...restProps} {id} class={className} data-toast-title="true">
+		{#if children}
+			{@render children()}
+		{:else}
+			{ctx.toast.title}
+		{/if}
+	</div>
+{/if}
diff --git a/packages/ui/src/lib/toast/viewport/toast-viewport.svelte b/packages/ui/src/lib/toast/viewport/toast-viewport.svelte
index 78241769..8ac0b9b9 100644
--- a/packages/ui/src/lib/toast/viewport/toast-viewport.svelte
+++ b/packages/ui/src/lib/toast/viewport/toast-viewport.svelte
@@ -51,8 +51,11 @@
 	// it back there.
 	let previousFocus: HTMLElement | null = null;
 	let windowFocused = true;
+	// A page that opens in a background tab gets no `blur`: the visibility says it is hidden.
+	let documentVisible = typeof document === 'undefined' || document.visibilityState !== 'hidden';
 
-	const count = $derived(manager.visibleToasts.length);
+	// A toast on its way out is not one the user can act on: the name does not count it.
+	const count = $derived(manager.visibleToasts.filter((toast) => toast.status !== 'ending').length);
 	const ariaLabel = $derived.by(() => {
 		if (ariaLabelProp) return ariaLabelProp;
 		if (count === 1) return resolveLocalizedString($localeStore, 'toast.oneNotification');
@@ -70,12 +73,15 @@
 
 	// --- Announcements ------------------------------------------------------------------------
 
-	// Each new toast, and each update, is one message. The key changes with each one, thus the
-	// live region gets a new node and reads the same text twice when two toasts say the same.
-	let politeMessage = $state('');
-	let politeKey = $state(0);
-	let assertiveMessage = $state('');
-	let assertiveKey = $state(0);
+	// Each new toast, and each update, is one message with a key of its own. Two toasts in the
+	// same tick are two nodes, thus the live region reads both, and the same text twice when two
+	// toasts say the same. A message leaves the region after a while, or the next one would be a
+	// change of a text the screen reader already read.
+	type Announcement = { key: number; text: string };
+	const ANNOUNCEMENT_MS = 2000;
+	let announcementKey = 0;
+	let politeMessages = $state<Announcement[]>([]);
+	let assertiveMessages = $state<Announcement[]>([]);
 	// eslint-disable-next-line svelte/prefer-svelte-reactivity -- a record of what was said, not state: nothing renders from it.
 	const announced = new Map<string, number>();
 
@@ -83,6 +89,18 @@
 		return [toast.title, toast.description].filter(Boolean).join('. ');
 	}
 
+	function announce(text: string, priority: 'low' | 'high') {
+		announcementKey += 1;
+		const entry = { key: announcementKey, text };
+		if (priority === 'high') assertiveMessages = [...assertiveMessages, entry];
+		else politeMessages = [...politeMessages, entry];
+		// By key, not by identity: the state holds a proxy of the entry, not the entry.
+		setTimeout(() => {
+			politeMessages = politeMessages.filter((candidate) => candidate.key !== entry.key);
+			assertiveMessages = assertiveMessages.filter((candidate) => candidate.key !== entry.key);
+		}, ANNOUNCEMENT_MS);
+	}
+
 	$effect(() => {
 		const toasts = manager.toasts;
 		untrack(() => {
@@ -94,13 +112,7 @@
 				announced.set(toast.id, toast.updateKey);
 				const message = messageOf(toast);
 				if (!message) continue;
-				if (toast.priority === 'high') {
-					assertiveMessage = message;
-					assertiveKey += 1;
-				} else {
-					politeMessage = message;
-					politeKey += 1;
-				}
+				announce(message, toast.priority);
 			}
 			for (const id of announced.keys()) {
 				if (!ids.has(id)) announced.delete(id);
@@ -111,7 +123,7 @@
 	// --- Timers -------------------------------------------------------------------------------
 
 	function syncTimers() {
-		if (ctx.hovering || ctx.focused || !windowFocused) manager.pauseTimers();
+		if (ctx.hovering || ctx.focused || !windowFocused || !documentVisible) manager.pauseTimers();
 		else manager.resumeTimers();
 	}
 
@@ -164,6 +176,11 @@
 		syncTimers();
 	}
 
+	function handleVisibilityChange() {
+		documentVisible = document.visibilityState !== 'hidden';
+		syncTimers();
+	}
+
 	// --- Focus --------------------------------------------------------------------------------
 
 	function toastElements(): HTMLElement[] {
@@ -211,9 +228,21 @@
 			`[data-toast-root][data-toast-id="${id}"]`
 		);
 		if (!closing || !(active instanceof Node) || !closing.contains(active)) return;
-		const toasts = toastElements();
-		const index = toasts.indexOf(closing);
-		const next = toasts[index + 1] ?? toasts[index - 1];
+		// The closing toast may already be on its way out: the list keeps it, thus the next one is
+		// the one after it in the order, and the one before it when it was last.
+		const all = Array.from(
+			regionRef?.querySelectorAll<HTMLElement>('[data-toast-root]:not([inert])') ?? []
+		);
+		const open = (candidate: HTMLElement | undefined) =>
+			candidate && candidate !== closing && !candidate.hasAttribute('data-ending')
+				? candidate
+				: null;
+		const index = all.indexOf(closing);
+		const next =
+			all
+				.slice(index + 1)
+				.map(open)
+				.find(Boolean) ?? all.slice(0, Math.max(0, index)).reverse().map(open).find(Boolean);
 		if (next) {
 			next.focus();
 			return;
@@ -247,7 +276,10 @@
 		window.addEventListener('keydown', handleWindowKeyDown);
 		window.addEventListener('blur', handleWindowBlur);
 		window.addEventListener('focus', handleWindowFocus);
+		document.addEventListener('visibilitychange', handleVisibilityChange);
+		untrack(syncTimers);
 		return () => {
+			document.removeEventListener('visibilitychange', handleVisibilityChange);
 			window.removeEventListener('keydown', handleWindowKeyDown);
 			window.removeEventListener('blur', handleWindowBlur);
 			window.removeEventListener('focus', handleWindowFocus);
@@ -262,15 +294,15 @@
 </script>
 
 {#snippet viewport()}
-	<div role="status" aria-live="polite" aria-atomic="true" style={visuallyHiddenStyle}>
-		{#key politeKey}
-			<div>{politeMessage}</div>
-		{/key}
+	<div role="status" aria-live="polite" aria-relevant="additions" style={visuallyHiddenStyle}>
+		{#each politeMessages as message (message.key)}
+			<div>{message.text}</div>
+		{/each}
 	</div>
-	<div role="alert" aria-live="assertive" aria-atomic="true" style={visuallyHiddenStyle}>
-		{#key assertiveKey}
-			<div>{assertiveMessage}</div>
-		{/key}
+	<div role="alert" aria-live="assertive" aria-relevant="additions" style={visuallyHiddenStyle}>
+		{#each assertiveMessages as message (message.key)}
+			<div>{message.text}</div>
+		{/each}
 	</div>
 	{#if manager.toasts.length > 0}
 		<div

From 2cfee634e19c105597bcc6aebed1c81cad6f697c Mon Sep 17 00:00:00 2001
From: Agustin Delgado <agustindariodelgado@gmail.com>
Date: Sat, 19 Sep 2026 10:52:34 -0300
Subject: [PATCH 04/13] fix(toast): stop the timers on a hidden tab, not on a
 window without the focus

A window without the focus can still be in view, and a frame beside
others loses the focus all the time: the pause followed the focus and
never came back. The visibility of the tab is the signal that means the
user cannot see the toast.
---
 .changeset/toast-v1.md                        |  2 +-
 docs/src/content/toast/index.md               |  2 +-
 packages/ui/src/lib/toast/README.md           |  2 +-
 packages/ui/src/lib/toast/TODO.md             |  2 +-
 .../ui/src/lib/toast/provider/toast.test.ts   | 14 -----------
 .../lib/toast/viewport/toast-viewport.svelte  | 24 ++++---------------
 6 files changed, 9 insertions(+), 37 deletions(-)

diff --git a/.changeset/toast-v1.md b/.changeset/toast-v1.md
index 363c4504..7f4aa248 100644
--- a/.changeset/toast-v1.md
+++ b/.changeset/toast-v1.md
@@ -2,4 +2,4 @@
 '@human-kit/ui': minor
 ---
 
-Add the Toast primitive with `Provider`, `Viewport`, `Positioner`, `Root`, `Content`, `Title`, `Description`, `Action` and `Close`. The manager on `useToastManager()` or `bind:manager` has `add`, `update`, `close` and `promise`. The viewport is a `role="region"` landmark named with the count of toasts, with `F6` in and out, and two live regions beside it announce each toast without its buttons. Each toast is a `dialog` that is not modal, or an `alertdialog` for a high priority, with `Escape` to close, a swipe that follows the finger, and an exit animation from its CSS. `Toast.Positioner` puts a toast with an `anchor` against that element. The timers stop on hover, on keyboard focus and in a background window, the newest toasts stay up to a limit, and the viewport stays reachable behind a modal dialog. The `ariaHideOutside` primitive learned `data-hk-hide-outside-exempt`, and the focus trap leaves `Tab` to a surface with that attribute while the focus is in it.
+Add the Toast primitive with `Provider`, `Viewport`, `Positioner`, `Root`, `Content`, `Title`, `Description`, `Action` and `Close`. The manager on `useToastManager()` or `bind:manager` has `add`, `update`, `close` and `promise`. The viewport is a `role="region"` landmark named with the count of toasts, with `F6` in and out, and two live regions beside it announce each toast without its buttons. Each toast is a `dialog` that is not modal, or an `alertdialog` for a high priority, with `Escape` to close, a swipe that follows the finger, and an exit animation from its CSS. `Toast.Positioner` puts a toast with an `anchor` against that element. The timers stop on hover, on keyboard focus and in a hidden tab, the newest toasts stay up to a limit, and the viewport stays reachable behind a modal dialog. The `ariaHideOutside` primitive learned `data-hk-hide-outside-exempt`, and the focus trap leaves `Tab` to a surface with that attribute while the focus is in it.
diff --git a/docs/src/content/toast/index.md b/docs/src/content/toast/index.md
index 163680df..43226375 100644
--- a/docs/src/content/toast/index.md
+++ b/docs/src/content/toast/index.md
@@ -85,7 +85,7 @@ The title and the description are text. That text is what the screen reader hear
 
 A toast stays `timeout` milliseconds: 5000 by default, on the provider or on the toast. `0` keeps it until a close.
 
-The timers stop while the pointer rests on the viewport, and while the keyboard focus is in it. They also stop while the window is in the background, or the tab is hidden. They start again with the time each toast had left. A toast that closes while the user reads it is a toast the user did not read.
+The timers stop while the pointer rests on the viewport, and while the keyboard focus is in it. They also stop while the tab is hidden. They start again with the time each toast had left. A toast that closes while the user reads it is a toast the user did not read.
 
 ## The stack
 
diff --git a/packages/ui/src/lib/toast/README.md b/packages/ui/src/lib/toast/README.md
index 06ada860..56dd02e5 100644
--- a/packages/ui/src/lib/toast/README.md
+++ b/packages/ui/src/lib/toast/README.md
@@ -67,5 +67,5 @@
 - Two live regions beside the viewport announce each toast: `role="status"` for the normal priority, and `role="alert"` for the high priority. The message is the title and the description.
 - `Toast.Root` is a `role="dialog"` that is not modal, or an `alertdialog` for the high priority. It has `aria-labelledby` from the title and `aria-describedby` from the description, and it is a tab stop.
 - `Escape` closes the focused toast, and the focus moves to the next toast, or back to where it was.
-- The timers stop while the pointer rests on the viewport, and while the focus is in it. They also stop while the window is in the background, or the tab is hidden.
+- The timers stop while the pointer rests on the viewport, and while the focus is in it. They also stop while the tab is hidden.
 - The viewport stays reachable behind a modal dialog, with `F6` and `Tab`.
diff --git a/packages/ui/src/lib/toast/TODO.md b/packages/ui/src/lib/toast/TODO.md
index 3a685e60..272d6cd7 100644
--- a/packages/ui/src/lib/toast/TODO.md
+++ b/packages/ui/src/lib/toast/TODO.md
@@ -10,7 +10,7 @@ Track Toast work with a single mandatory TODO format.
 - [x] [M][P0][Area: Accessibility][Owner: Unassigned][Target: Done] Make the viewport a `role="region"` landmark named with the count, with `F6` in and out, and a tab that leaves it back to the previous focus.
 - [x] [M][P0][Area: Accessibility][Owner: Unassigned][Target: Done] Announce each toast from two live regions beside the viewport, thus the buttons are not part of the message.
 - [x] [S][P0][Area: Accessibility][Owner: Unassigned][Target: Done] Make each toast a `dialog` or an `alertdialog` that is not modal, named by its title and described by its description.
-- [x] [M][P0][Area: State][Owner: Unassigned][Target: Done] Stop the timers on hover, on keyboard focus, and in a background window, and give each toast the time it had left on resume.
+- [x] [M][P0][Area: State][Owner: Unassigned][Target: Done] Stop the timers on hover, on keyboard focus, and in a hidden tab, and give each toast the time it had left on resume.
 - [x] [S][P1][Area: State][Owner: Unassigned][Target: Done] Keep the newest toasts up to the limit, and hold the older ones inert with their timers stopped.
 - [x] [S][P1][Area: State][Owner: Unassigned][Target: Done] Add `promise` for a loading toast that turns into success or error.
 - [x] [M][P1][Area: Interaction][Owner: Unassigned][Target: Done] Dismiss on a swipe that follows the finger, with a threshold and a flick, and never from a button.
diff --git a/packages/ui/src/lib/toast/provider/toast.test.ts b/packages/ui/src/lib/toast/provider/toast.test.ts
index c6f5b975..2415e97e 100644
--- a/packages/ui/src/lib/toast/provider/toast.test.ts
+++ b/packages/ui/src/lib/toast/provider/toast.test.ts
@@ -290,20 +290,6 @@ describe('Toast', () => {
 			expect(document.body.lastElementChild?.contains(region())).toBe(true);
 		});
 
-		it('stops the timers while the window is in the background', async () => {
-			setup({ timeout: 1000 });
-			await press('add');
-			await advance(500);
-
-			window.dispatchEvent(new Event('blur'));
-			await advance(3000);
-			expect(toasts()).toHaveLength(1);
-
-			window.dispatchEvent(new Event('focus'));
-			await advance(500);
-			await expect.poll(() => toasts().length).toBe(0);
-		});
-
 		it('stops the timers while the tab is hidden', async () => {
 			setup({ timeout: 1000 });
 			await press('add');
diff --git a/packages/ui/src/lib/toast/viewport/toast-viewport.svelte b/packages/ui/src/lib/toast/viewport/toast-viewport.svelte
index 8ac0b9b9..4429e051 100644
--- a/packages/ui/src/lib/toast/viewport/toast-viewport.svelte
+++ b/packages/ui/src/lib/toast/viewport/toast-viewport.svelte
@@ -22,8 +22,8 @@
 	 * not read the buttons of the toast as part of the message.
 	 *
 	 * The timers stop while the pointer rests on the region, while the focus is in it, and while
-	 * the window is in the background. A toast that closes while the user reads it is a toast
-	 * the user did not read.
+	 * the tab is hidden. A toast that closes while the user reads it is a toast the user did not
+	 * read.
 	 */
 	let {
 		children,
@@ -50,8 +50,8 @@
 	// Where the focus was before `F6` or a click moved it into the region, thus a close can send
 	// it back there.
 	let previousFocus: HTMLElement | null = null;
-	let windowFocused = true;
-	// A page that opens in a background tab gets no `blur`: the visibility says it is hidden.
+	// The visibility of the tab, not the focus of the window: a window without the focus can
+	// still be in view, and a frame beside others loses the focus all the time.
 	let documentVisible = typeof document === 'undefined' || document.visibilityState !== 'hidden';
 
 	// A toast on its way out is not one the user can act on: the name does not count it.
@@ -123,7 +123,7 @@
 	// --- Timers -------------------------------------------------------------------------------
 
 	function syncTimers() {
-		if (ctx.hovering || ctx.focused || !windowFocused || !documentVisible) manager.pauseTimers();
+		if (ctx.hovering || ctx.focused || !documentVisible) manager.pauseTimers();
 		else manager.resumeTimers();
 	}
 
@@ -166,16 +166,6 @@
 		syncTimers();
 	}
 
-	function handleWindowBlur() {
-		windowFocused = false;
-		syncTimers();
-	}
-
-	function handleWindowFocus() {
-		windowFocused = true;
-		syncTimers();
-	}
-
 	function handleVisibilityChange() {
 		documentVisible = document.visibilityState !== 'hidden';
 		syncTimers();
@@ -274,15 +264,11 @@
 
 	$effect(() => {
 		window.addEventListener('keydown', handleWindowKeyDown);
-		window.addEventListener('blur', handleWindowBlur);
-		window.addEventListener('focus', handleWindowFocus);
 		document.addEventListener('visibilitychange', handleVisibilityChange);
 		untrack(syncTimers);
 		return () => {
 			document.removeEventListener('visibilitychange', handleVisibilityChange);
 			window.removeEventListener('keydown', handleWindowKeyDown);
-			window.removeEventListener('blur', handleWindowBlur);
-			window.removeEventListener('focus', handleWindowFocus);
 		};
 	});
 

From 654ed3c929127c9a8c1fd3a6ee919e1da9d4cf64 Mon Sep 17 00:00:00 2001
From: Agustin Delgado <agustindariodelgado@gmail.com>
Date: Sat, 19 Sep 2026 11:05:22 -0300
Subject: [PATCH 05/13] fix(toast): play the enter motion forward, from the
 first frame

The presence effect ran after the mount, and the measure of the toast in
between fixed the final styles first: the enter played backwards, then
forwards. The enter state now starts at creation, thus the first frame is
in it. The demos write the enter as an animation on `data-entering`, which
stays on for the whole motion, and the exit as a transition on
`data-exiting`; the docs say why.
---
 docs/src/content/toast/demos/anchored.svelte  | 12 ++++++++++-
 docs/src/content/toast/demos/viewport.svelte  | 17 ++++++++++++++-
 docs/src/content/toast/index.md               | 21 +++++++++++++++++++
 .../ui/src/lib/primitives/presence.svelte.ts  |  7 ++++++-
 4 files changed, 54 insertions(+), 3 deletions(-)

diff --git a/docs/src/content/toast/demos/anchored.svelte b/docs/src/content/toast/demos/anchored.svelte
index 3dbc2a92..822d4e78 100644
--- a/docs/src/content/toast/demos/anchored.svelte
+++ b/docs/src/content/toast/demos/anchored.svelte
@@ -51,9 +51,19 @@
 			transform 0.2s;
 	}
 
-	:global(.anchored-toast[data-entering]),
+	:global(.anchored-toast[data-entering]) {
+		animation: anchored-toast-in 0.2s ease-out;
+	}
+
 	:global(.anchored-toast[data-exiting]) {
 		opacity: 0;
 		transform: translateY(4px);
 	}
+
+	@keyframes anchored-toast-in {
+		from {
+			opacity: 0;
+			transform: translateY(4px);
+		}
+	}
 </style>
diff --git a/docs/src/content/toast/demos/viewport.svelte b/docs/src/content/toast/demos/viewport.svelte
index b8c4cb80..9d9d8493 100644
--- a/docs/src/content/toast/demos/viewport.svelte
+++ b/docs/src/content/toast/demos/viewport.svelte
@@ -80,12 +80,26 @@
 		transition: none;
 	}
 
-	:global(.toast[data-entering]),
+	/* The enter is an animation: `data-entering` stays on for the whole motion, thus a transition
+	   would sit still in the start state. The exit is a transition: `data-exiting` is the end
+	   state, and the motion runs from where the toast is. */
+	:global(.toast[data-entering]) {
+		animation: toast-in 0.4s cubic-bezier(0.22, 1, 0.36, 1);
+		transition: none;
+	}
+
 	:global(.toast[data-exiting]) {
 		opacity: 0;
 		transform: translateY(1rem);
 	}
 
+	@keyframes toast-in {
+		from {
+			opacity: 0;
+			transform: translateY(1rem);
+		}
+	}
+
 	:global(.toast[data-swipe-dismissed][data-swipe-direction='right']) {
 		transform: translateX(calc(var(--toast-swipe-movement-x) + 100%));
 	}
@@ -110,6 +124,7 @@
 	@media (prefers-reduced-motion: reduce) {
 		:global(.toast) {
 			transition-duration: 0.01s;
+			animation-duration: 0.01s;
 		}
 	}
 </style>
diff --git a/docs/src/content/toast/index.md b/docs/src/content/toast/index.md
index 43226375..8579c331 100644
--- a/docs/src/content/toast/index.md
+++ b/docs/src/content/toast/index.md
@@ -105,6 +105,27 @@ Each toast gets `--toast-index`, `--toast-offset-y` and `--toast-height`, and th
 }
 ```
 
+## Motion
+
+`data-entering` is on the toast through the enter motion, and `data-exiting` through the exit motion. The toast leaves the DOM when the exit motion ends. Write the enter as an animation on `data-entering`. The attribute stays on for the whole motion, thus a transition would sit still in the start state. Write the exit as a transition on `data-exiting`: it is the end state, and the motion runs from where the toast is.
+
+```css
+.toast[data-entering] {
+	animation: toast-in 0.4s ease-out;
+}
+
+.toast[data-exiting] {
+	opacity: 0;
+	transition: opacity 0.3s;
+}
+
+@keyframes toast-in {
+	from {
+		opacity: 0;
+	}
+}
+```
+
 ## A swipe
 
 A swipe pushes the toast out through one of `swipeDirection`: `bottom` and `right` by default. The toast follows the finger with `--toast-swipe-movement-x` and `--toast-swipe-movement-y`, and it comes back when the swipe is short. `data-swipe-dismissed` and `data-swipe-direction` are on the toast for the exit.
diff --git a/packages/ui/src/lib/primitives/presence.svelte.ts b/packages/ui/src/lib/primitives/presence.svelte.ts
index f9a94e6d..01deb1aa 100644
--- a/packages/ui/src/lib/primitives/presence.svelte.ts
+++ b/packages/ui/src/lib/primitives/presence.svelte.ts
@@ -10,6 +10,7 @@
  * starts on mount and tears down (canceling any in-flight motion tracker) on destroy.
  */
 
+import { untrack } from 'svelte';
 import { trackMotionEnd, type MotionTracker } from './motion';
 
 export type PresenceOptions = {
@@ -57,7 +58,11 @@ export function createPresence(
 	options: PresenceOptions = {}
 ): Presence {
 	let isMounted = $state(options.initiallyMounted ?? false);
-	let isEntering = $state(false);
+	// A node that is in the DOM from the first render, such as a toast, must paint its first frame
+	// in the enter state. The effect below runs after the mount, and a layout read in between
+	// (a measure, a floating position) would fix the final styles first: the enter would then
+	// play backwards before it plays forwards. So the enter state starts here, at creation.
+	let isEntering = $state(!(options.initiallyMounted ?? false) && untrack(getOpen));
 	let isExiting = $state(false);
 	let tracker: MotionTracker | undefined;
 

From f703830712c8ddcc85eae93041c6799beca42d95 Mon Sep 17 00:00:00 2001
From: Agustin Delgado <agustindariodelgado@gmail.com>
Date: Sat, 19 Sep 2026 13:50:26 -0300
Subject: [PATCH 06/13] fix(toast): move the stack up at once on a close, and
 keep the pointer in the spread stack

A toast on its way out is out of `stackedToasts` now, thus the ones behind it move up while it fades. It keeps the index and the offset it had for its exit, and the demo runs the exit from that place: a bare `translateY(1rem)` sank a toast from behind under the front one.

The demo also covers the gap between two spread toasts with a pseudo-element. A pointer in that gap left the viewport, which closed the stack under it and opened it again: the toasts behind were out of reach.

The dev render-scan button of the docs moves to the left of the corner: it sat over the close button of the front toast.
---
 docs/src/content/toast/api.json               |  2 +-
 docs/src/content/toast/demos/viewport.svelte  | 38 +++++++++++++------
 docs/src/content/toast/index.md               | 16 +++++++-
 docs/src/routes/+layout.svelte                |  4 +-
 packages/ui/src/lib/toast/README.md           |  1 +
 .../toast/provider/toast-manager.svelte.ts    | 10 ++++-
 .../ui/src/lib/toast/provider/toast.test.ts   | 25 ++++++++++++
 .../ui/src/lib/toast/root/toast-root.svelte   | 24 ++++++++++--
 8 files changed, 100 insertions(+), 20 deletions(-)

diff --git a/docs/src/content/toast/api.json b/docs/src/content/toast/api.json
index 86955f78..0e913a14 100644
--- a/docs/src/content/toast/api.json
+++ b/docs/src/content/toast/api.json
@@ -191,7 +191,7 @@
 				},
 				{
 					"name": "data-front",
-					"description": "Present on the toast in front."
+					"description": "Present on the toast in front. A toast on its way out keeps it, thus its exit runs from its place."
 				},
 				{
 					"name": "data-limited",
diff --git a/docs/src/content/toast/demos/viewport.svelte b/docs/src/content/toast/demos/viewport.svelte
index 9d9d8493..dd3446ef 100644
--- a/docs/src/content/toast/demos/viewport.svelte
+++ b/docs/src/content/toast/demos/viewport.svelte
@@ -34,7 +34,10 @@
 		outline: none;
 	}
 
+	/* The place in the stack is one variable, thus the exit and the swipe keep it. */
 	:global(.toast) {
+		--toast-y: calc(var(--toast-swipe-movement-y) - var(--toast-index) * 12px);
+		--toast-scale: calc(1 - var(--toast-index) * 0.05);
 		position: absolute;
 		inset-block-end: 0;
 		inset-inline-end: 0;
@@ -44,9 +47,8 @@
 		background: white;
 		box-shadow: 0 8px 24px rgb(0 0 0 / 0.12);
 		outline: none;
-		transform: translateX(var(--toast-swipe-movement-x))
-			translateY(calc(var(--toast-swipe-movement-y) - var(--toast-index) * 12px))
-			scale(calc(1 - var(--toast-index) * 0.05));
+		transform: translateX(var(--toast-swipe-movement-x)) translateY(var(--toast-y))
+			scale(var(--toast-scale));
 		transform-origin: bottom center;
 		transition:
 			transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
@@ -54,6 +56,16 @@
 		z-index: calc(1000 - var(--toast-index));
 	}
 
+	/* A bridge over the gap under each toast: the pointer crosses from one toast to the next
+	   without a leave of the viewport, which would close the stack. */
+	:global(.toast::after) {
+		content: '';
+		position: absolute;
+		inset-inline: 0;
+		inset-block-start: 100%;
+		height: 8px;
+	}
+
 	:global(.dark .toast) {
 		border-color: var(--color-neutral-800);
 		background: var(--color-neutral-900);
@@ -70,10 +82,10 @@
 	}
 
 	:global(.toast[data-expanded]) {
-		transform: translateX(var(--toast-swipe-movement-x))
-			translateY(
-				calc(var(--toast-swipe-movement-y) - var(--toast-offset-y) - var(--toast-index) * 8px)
-			);
+		--toast-y: calc(
+			var(--toast-swipe-movement-y) - var(--toast-offset-y) - var(--toast-index) * 8px
+		);
+		--toast-scale: 1;
 	}
 
 	:global(.toast[data-swiping]) {
@@ -82,7 +94,8 @@
 
 	/* The enter is an animation: `data-entering` stays on for the whole motion, thus a transition
 	   would sit still in the start state. The exit is a transition: `data-exiting` is the end
-	   state, and the motion runs from where the toast is. */
+	   state, and the motion runs from where the toast is. The toast keeps its place in the stack
+	   through the exit, and it sinks from there. */
 	:global(.toast[data-entering]) {
 		animation: toast-in 0.4s cubic-bezier(0.22, 1, 0.36, 1);
 		transition: none;
@@ -90,7 +103,8 @@
 
 	:global(.toast[data-exiting]) {
 		opacity: 0;
-		transform: translateY(1rem);
+		transform: translateX(var(--toast-swipe-movement-x)) translateY(calc(var(--toast-y) + 1rem))
+			scale(var(--toast-scale));
 	}
 
 	@keyframes toast-in {
@@ -101,11 +115,13 @@
 	}
 
 	:global(.toast[data-swipe-dismissed][data-swipe-direction='right']) {
-		transform: translateX(calc(var(--toast-swipe-movement-x) + 100%));
+		transform: translateX(calc(var(--toast-swipe-movement-x) + 100%)) translateY(var(--toast-y))
+			scale(var(--toast-scale));
 	}
 
 	:global(.toast[data-swipe-dismissed][data-swipe-direction='bottom']) {
-		transform: translateY(calc(var(--toast-swipe-movement-y) + 100%));
+		transform: translateX(var(--toast-swipe-movement-x)) translateY(calc(var(--toast-y) + 100%))
+			scale(var(--toast-scale));
 	}
 
 	:global(.toast:focus-visible) {
diff --git a/docs/src/content/toast/index.md b/docs/src/content/toast/index.md
index 8579c331..c767579b 100644
--- a/docs/src/content/toast/index.md
+++ b/docs/src/content/toast/index.md
@@ -105,9 +105,23 @@ Each toast gets `--toast-index`, `--toast-offset-y` and `--toast-height`, and th
 }
 ```
 
+A toast that closes is out of the stack at once: the ones behind it move up while it fades. It keeps the `--toast-index` and `--toast-offset-y` it had, thus its exit runs from its place.
+
+The pointer must not leave the viewport on its way from one toast to the next. The spread stack has a gap between two toasts, and a pointer in the gap is out of all of them. Put a pseudo-element on the toast that covers the gap, as the demo does.
+
+```css
+.toast::after {
+	content: '';
+	position: absolute;
+	inset-inline: 0;
+	inset-block-start: 100%;
+	height: 8px;
+}
+```
+
 ## Motion
 
-`data-entering` is on the toast through the enter motion, and `data-exiting` through the exit motion. The toast leaves the DOM when the exit motion ends. Write the enter as an animation on `data-entering`. The attribute stays on for the whole motion, thus a transition would sit still in the start state. Write the exit as a transition on `data-exiting`: it is the end state, and the motion runs from where the toast is.
+`data-entering` is on the toast through the enter motion, and `data-exiting` through the exit motion. The toast leaves the DOM when the exit motion ends. Write the enter as an animation on `data-entering`. The attribute stays on for the whole motion, thus a transition would sit still in the start state. Write the exit as a transition on `data-exiting`: it is the end state, and the motion runs from where the toast is. Keep the place in the stack in that end state. A `transform` that reads only `translateY(1rem)` puts a toast from behind under the front one for its exit.
 
 ```css
 .toast[data-entering] {
diff --git a/docs/src/routes/+layout.svelte b/docs/src/routes/+layout.svelte
index 289c5b64..eb856061 100644
--- a/docs/src/routes/+layout.svelte
+++ b/docs/src/routes/+layout.svelte
@@ -18,8 +18,10 @@
      of their own, because Svelte dedupes the former and not the latter. -->
 <Seo />
 
+<!-- The button sits to the left of the corner: the toast demos put their viewport there, and a
+     click on a close button must not land on it. -->
 {#if dev && !isBench}
-	<RenderScan />
+	<RenderScan offsetLeft={336} />
 {/if}
 
 {@render children()}
diff --git a/packages/ui/src/lib/toast/README.md b/packages/ui/src/lib/toast/README.md
index 56dd02e5..a25d60e5 100644
--- a/packages/ui/src/lib/toast/README.md
+++ b/packages/ui/src/lib/toast/README.md
@@ -43,6 +43,7 @@
 - Keep the default `timeout` at 5 seconds or more. A user who reads slowly needs the time.
 - Give `anchor` to `add`, and put `Toast.Positioner` around the root, for a toast against an element.
 - Style the stack with `--toast-index`, `--toast-offset-y`, `--toast-height`, `--toast-frontmost-height`, `data-front` and `data-expanded`. Move the toast with `--toast-swipe-movement-x` and `--toast-swipe-movement-y`.
+- A toast that closes is out of the stack at once, and it keeps the place it had for its exit. Cover the gap between two spread toasts with a pseudo-element, or the pointer leaves the viewport between them.
 
 ## API reference
 
diff --git a/packages/ui/src/lib/toast/provider/toast-manager.svelte.ts b/packages/ui/src/lib/toast/provider/toast-manager.svelte.ts
index 1f253d22..8cb5e69e 100644
--- a/packages/ui/src/lib/toast/provider/toast-manager.svelte.ts
+++ b/packages/ui/src/lib/toast/provider/toast-manager.svelte.ts
@@ -86,7 +86,11 @@ export type ToastManager<Data = unknown> = {
 	readonly toasts: readonly ToastItem<Data>[];
 	/** The toasts on the screen: the newest ones, up to the limit. */
 	readonly visibleToasts: readonly ToastItem<Data>[];
-	/** The toasts on the screen that stack in the viewport: the ones without an anchor. */
+	/**
+	 * The toasts that take a place in the stack of the viewport: the ones on the screen, without
+	 * an anchor, and not on their way out. A toast through its exit keeps the place it had, and
+	 * the ones behind it move up at once.
+	 */
 	readonly stackedToasts: readonly ToastItem<Data>[];
 	/** Adds a toast, and answers its id. */
 	add: (options: ToastOptions<Data>) => string;
@@ -154,7 +158,9 @@ export function createToastManager<Data = unknown>(
 	const getLimit = options.limit ?? (() => DEFAULT_TOAST_LIMIT);
 
 	const visibleToasts = $derived(toasts.filter((toast) => !toast.limited));
-	const stackedToasts = $derived(visibleToasts.filter((toast) => !toast.anchor));
+	const stackedToasts = $derived(
+		visibleToasts.filter((toast) => !toast.anchor && toast.status !== 'ending')
+	);
 
 	function setToasts(next: ToastItem<Data>[]) {
 		toasts = applyLimit(next);
diff --git a/packages/ui/src/lib/toast/provider/toast.test.ts b/packages/ui/src/lib/toast/provider/toast.test.ts
index 2415e97e..f83515e0 100644
--- a/packages/ui/src/lib/toast/provider/toast.test.ts
+++ b/packages/ui/src/lib/toast/provider/toast.test.ts
@@ -136,6 +136,31 @@ describe('Toast', () => {
 			expect(toasts()[1].style.getPropertyValue('--toast-index')).toBe('1');
 		});
 
+		it('moves the toasts behind up while one is on its way out, which keeps its place', async () => {
+			setup({ timeout: 0 });
+			await tick();
+
+			getManager().add({ title: 'A' });
+			const middle = getManager().add({ title: 'B' });
+			getManager().add({ title: 'C' });
+			await tick();
+			expect(toasts().map((toast) => toast.style.getPropertyValue('--toast-index'))).toEqual([
+				'0',
+				'1',
+				'2'
+			]);
+
+			getManager().close(middle);
+			await tick();
+
+			const [front, ending, behind] = toasts();
+			expect(ending.getAttribute('data-ending')).toBe('true');
+			expect(ending.style.getPropertyValue('--toast-index')).toBe('1');
+			expect(front.style.getPropertyValue('--toast-index')).toBe('0');
+			expect(behind.style.getPropertyValue('--toast-index')).toBe('1');
+			expect(getManager().stackedToasts.map((toast) => toast.title)).toEqual(['C', 'A']);
+		});
+
 		it('does not read the buttons as part of the message', async () => {
 			setup({ withAction: true });
 
diff --git a/packages/ui/src/lib/toast/root/toast-root.svelte b/packages/ui/src/lib/toast/root/toast-root.svelte
index 56af73a0..a0ebe52c 100644
--- a/packages/ui/src/lib/toast/root/toast-root.svelte
+++ b/packages/ui/src/lib/toast/root/toast-root.svelte
@@ -43,17 +43,33 @@
 
 	const isEnding = $derived(toast.status === 'ending');
 	// A toast against an anchor is out of the stack: `index` is -1, and the vars read 0.
-	const index = $derived(manager.stackedToasts.findIndex((candidate) => candidate.id === toast.id));
+	const liveIndex = $derived(
+		manager.stackedToasts.findIndex((candidate) => candidate.id === toast.id)
+	);
 	const height = $derived(ctx.heights.get(toast.id) ?? null);
 	// The height of the toasts in front, for a stack that shifts the ones behind.
-	const offsetY = $derived.by(() => {
-		if (index <= 0) return 0;
+	const liveOffsetY = $derived.by(() => {
+		if (liveIndex <= 0) return 0;
 		let total = 0;
-		for (const candidate of manager.stackedToasts.slice(0, index)) {
+		for (const candidate of manager.stackedToasts.slice(0, liveIndex)) {
 			total += ctx.heights.get(candidate.id) ?? 0;
 		}
 		return total;
 	});
+	// A toast on its way out is out of the stack, thus the ones behind it move up at once. It
+	// keeps the place it had for its exit motion: a place of 0 would put it under the front one.
+	let lastIndex = -1;
+	let lastOffsetY = 0;
+	const index = $derived.by(() => {
+		if (isEnding) return lastIndex;
+		lastIndex = liveIndex;
+		return liveIndex;
+	});
+	const offsetY = $derived.by(() => {
+		if (isEnding) return lastOffsetY;
+		lastOffsetY = liveOffsetY;
+		return liveOffsetY;
+	});
 
 	function close() {
 		manager.close(toast.id);

From 437cea1fd34d21b9a22f2610bdebaf3aa688e7cd Mon Sep 17 00:00:00 2001
From: Agustin Delgado <agustindariodelgado@gmail.com>
Date: Sat, 19 Sep 2026 14:28:55 -0300
Subject: [PATCH 07/13] feat(toast): a tap spreads the stack out, and a pull
 the wrong way stops short

A touch has no hover. A tap on a toast holds the stack open, and the timers with it, until a touch outside the viewport. A mouse press does nothing new: the hover already does it.

A pull against the swipe direction gave a quarter of the way: a long pull moved the front toast off the one behind, which showed empty. It is a rubber band of 8 px at most now.
---
 docs/src/content/toast/api.json               |  4 +-
 docs/src/content/toast/demos/viewport.svelte  |  2 +-
 docs/src/content/toast/index.md               |  6 +-
 packages/ui/src/lib/toast/README.md           |  2 +-
 packages/ui/src/lib/toast/provider/context.ts |  8 ++-
 .../lib/toast/provider/toast-provider.svelte  |  9 ++-
 .../ui/src/lib/toast/provider/toast.test.ts   | 62 ++++++++++++++++++-
 .../ui/src/lib/toast/root/toast-root.svelte   | 15 +++--
 .../lib/toast/viewport/toast-viewport.svelte  | 40 ++++++++++--
 9 files changed, 130 insertions(+), 18 deletions(-)

diff --git a/docs/src/content/toast/api.json b/docs/src/content/toast/api.json
index 0e913a14..095310a7 100644
--- a/docs/src/content/toast/api.json
+++ b/docs/src/content/toast/api.json
@@ -72,7 +72,7 @@
 			"dataAttributes": [
 				{
 					"name": "data-expanded",
-					"description": "Present while the pointer rests on the viewport, or the focus is in it."
+					"description": "Present while the pointer rests on the viewport, or the focus is in it. A tap on a toast holds it on until a touch outside the viewport."
 				},
 				{
 					"name": "data-toast-viewport",
@@ -187,7 +187,7 @@
 				},
 				{
 					"name": "data-expanded",
-					"description": "Present while the pointer rests on the viewport, or the focus is in it."
+					"description": "Present while the pointer rests on the viewport, or the focus is in it. A tap on a toast holds it on until a touch outside the viewport."
 				},
 				{
 					"name": "data-front",
diff --git a/docs/src/content/toast/demos/viewport.svelte b/docs/src/content/toast/demos/viewport.svelte
index dd3446ef..15138595 100644
--- a/docs/src/content/toast/demos/viewport.svelte
+++ b/docs/src/content/toast/demos/viewport.svelte
@@ -4,7 +4,7 @@
 </script>
 
 <!-- One viewport for the app. The toasts stack in the corner, and they spread out while the
-     pointer rests on them or the focus is in them. -->
+     pointer rests on them, while the focus is in them, or after a tap on them. -->
 <Toast.Viewport class="toast-viewport">
 	{#snippet children(toast)}
 		<Toast.Root {toast} class="toast">
diff --git a/docs/src/content/toast/index.md b/docs/src/content/toast/index.md
index c767579b..015abacb 100644
--- a/docs/src/content/toast/index.md
+++ b/docs/src/content/toast/index.md
@@ -85,13 +85,13 @@ The title and the description are text. That text is what the screen reader hear
 
 A toast stays `timeout` milliseconds: 5000 by default, on the provider or on the toast. `0` keeps it until a close.
 
-The timers stop while the pointer rests on the viewport, and while the keyboard focus is in it. They also stop while the tab is hidden. They start again with the time each toast had left. A toast that closes while the user reads it is a toast the user did not read.
+The timers stop while the pointer rests on the viewport, and while the keyboard focus is in it. A touch has no hover: a tap on a toast holds the stack open, and the timers with it, until a touch outside the viewport. They also stop while the tab is hidden. They start again with the time each toast had left. A toast that closes while the user reads it is a toast the user did not read.
 
 ## The stack
 
 The viewport shows the newest toasts up to `limit`: 3 by default. The older ones wait behind, hidden and inert, with their timers stopped, and they come forward as the newer ones close.
 
-Each toast gets `--toast-index`, `--toast-offset-y` and `--toast-height`, and the viewport gets `--toast-frontmost-height`. `data-front` marks the toast in front. `data-expanded` is on the viewport and on each toast while the pointer rests on the viewport, or while the focus is in it. The viewport of the first demo stacks the toasts in the corner with them, and spreads them out on `data-expanded`. Its source is in `viewport.svelte`, under the demo.
+Each toast gets `--toast-index`, `--toast-offset-y` and `--toast-height`, and the viewport gets `--toast-frontmost-height`. `data-front` marks the toast in front. `data-expanded` is on the viewport and on each toast while the pointer rests on the viewport, or while the focus is in it. A tap on a toast holds it on until a touch outside the viewport. The viewport of the first demo stacks the toasts in the corner with them, and spreads them out on `data-expanded`. Its source is in `viewport.svelte`, under the demo.
 
 ```css
 .toast {
@@ -142,7 +142,7 @@ The pointer must not leave the viewport on its way from one toast to the next. T
 
 ## A swipe
 
-A swipe pushes the toast out through one of `swipeDirection`: `bottom` and `right` by default. The toast follows the finger with `--toast-swipe-movement-x` and `--toast-swipe-movement-y`, and it comes back when the swipe is short. `data-swipe-dismissed` and `data-swipe-direction` are on the toast for the exit.
+A swipe pushes the toast out through one of `swipeDirection`: `bottom` and `right` by default. The toast follows the finger with `--toast-swipe-movement-x` and `--toast-swipe-movement-y`, and it comes back when the swipe is short. A pull the other way gives 8 px at most, thus the toast behind stays behind. `data-swipe-dismissed` and `data-swipe-direction` are on the toast for the exit.
 
 A swipe never starts on `Toast.Close` or `Toast.Action`. Put `data-hk-swipe-ignore` on other content of your own that must not start one, such as a slider in the toast.
 
diff --git a/packages/ui/src/lib/toast/README.md b/packages/ui/src/lib/toast/README.md
index a25d60e5..2a3007ff 100644
--- a/packages/ui/src/lib/toast/README.md
+++ b/packages/ui/src/lib/toast/README.md
@@ -68,5 +68,5 @@
 - Two live regions beside the viewport announce each toast: `role="status"` for the normal priority, and `role="alert"` for the high priority. The message is the title and the description.
 - `Toast.Root` is a `role="dialog"` that is not modal, or an `alertdialog` for the high priority. It has `aria-labelledby` from the title and `aria-describedby` from the description, and it is a tab stop.
 - `Escape` closes the focused toast, and the focus moves to the next toast, or back to where it was.
-- The timers stop while the pointer rests on the viewport, and while the focus is in it. They also stop while the tab is hidden.
+- The timers stop while the pointer rests on the viewport, and while the focus is in it. A tap on a toast holds the stack open, and the timers with it, until a touch outside the viewport. They also stop while the tab is hidden.
 - The viewport stays reachable behind a modal dialog, with `F6` and `Tab`.
diff --git a/packages/ui/src/lib/toast/provider/context.ts b/packages/ui/src/lib/toast/provider/context.ts
index ce170860..58d26512 100644
--- a/packages/ui/src/lib/toast/provider/context.ts
+++ b/packages/ui/src/lib/toast/provider/context.ts
@@ -9,7 +9,12 @@ export type ToastProviderContext = {
 	readonly hovering: boolean;
 	/** The focus is in the viewport. */
 	readonly focused: boolean;
-	/** The toasts are spread out: the pointer rests on them, or the focus is in them. */
+	/** A touch tapped a toast, and no touch outside the viewport came after it. */
+	readonly tapped: boolean;
+	/**
+	 * The toasts are spread out: the pointer rests on them, the focus is in them, or a touch
+	 * tapped them.
+	 */
 	readonly expanded: boolean;
 	/** The viewport element. */
 	readonly viewportElement: HTMLElement | null;
@@ -17,6 +22,7 @@ export type ToastProviderContext = {
 	readonly heights: ReadonlyMap<string, number>;
 	setHovering: (hovering: boolean) => void;
 	setFocused: (focused: boolean) => void;
+	setTapped: (tapped: boolean) => void;
 	setViewportElement: (element: HTMLElement | null) => void;
 	setHeight: (id: string, height: number | null) => void;
 	/** Moves the focus to the next toast, or back to where it was before the viewport. */
diff --git a/packages/ui/src/lib/toast/provider/toast-provider.svelte b/packages/ui/src/lib/toast/provider/toast-provider.svelte
index d62c6c0e..77cb986d 100644
--- a/packages/ui/src/lib/toast/provider/toast-provider.svelte
+++ b/packages/ui/src/lib/toast/provider/toast-provider.svelte
@@ -39,6 +39,7 @@
 
 	let hovering = $state(false);
 	let focused = $state(false);
+	let tapped = $state(false);
 	let viewportElement = $state<HTMLElement | null>(null);
 	const heights = new SvelteMap<string, number>();
 	let focusAfterCloseHandler: ((id: string) => void) | null = null;
@@ -51,8 +52,11 @@
 		get focused() {
 			return focused;
 		},
+		get tapped() {
+			return tapped;
+		},
 		get expanded() {
-			return hovering || focused;
+			return hovering || focused || tapped;
 		},
 		get viewportElement() {
 			return viewportElement;
@@ -66,6 +70,9 @@
 		setFocused(value) {
 			focused = value;
 		},
+		setTapped(value) {
+			tapped = value;
+		},
 		setViewportElement(element) {
 			viewportElement = element;
 		},
diff --git a/packages/ui/src/lib/toast/provider/toast.test.ts b/packages/ui/src/lib/toast/provider/toast.test.ts
index f83515e0..52219bcd 100644
--- a/packages/ui/src/lib/toast/provider/toast.test.ts
+++ b/packages/ui/src/lib/toast/provider/toast.test.ts
@@ -331,7 +331,7 @@ describe('Toast', () => {
 			await expect.poll(() => toasts().length).toBe(0);
 		});
 
-		it('does not stop the timers for a touch on the region', async () => {
+		it('does not stop the timers for a touch that passes over the region', async () => {
 			setup({ timeout: 1000 });
 			await press('add');
 
@@ -339,6 +339,31 @@ describe('Toast', () => {
 			await advance(1000);
 			await expect.poll(() => toasts().length).toBe(0);
 		});
+
+		it('a tap spreads the stack out and holds the timers, and a touch outside folds it back', async () => {
+			setup({ timeout: 1000 });
+			await press('add');
+			await press('add');
+			expect(region()?.hasAttribute('data-expanded')).toBe(false);
+
+			pointer(toasts()[0], 'pointerdown', 'touch');
+			await tick();
+			expect(region()?.getAttribute('data-expanded')).toBe('true');
+			expect(toasts()[1].getAttribute('data-expanded')).toBe('true');
+			await advance(1500);
+			expect(toasts().length).toBe(2);
+
+			// A mouse press outside is not a touch: the stack stays open.
+			pointer(byTestId('before'), 'pointerdown', 'mouse');
+			await tick();
+			expect(region()?.getAttribute('data-expanded')).toBe('true');
+
+			pointer(byTestId('before'), 'pointerdown', 'touch');
+			await tick();
+			expect(region()?.hasAttribute('data-expanded')).toBe(false);
+			await advance(1000);
+			await expect.poll(() => toasts().length).toBe(0);
+		});
 	});
 
 	describe('behind a modal', () => {
@@ -677,5 +702,40 @@ describe('Toast', () => {
 			expect(toast.hasAttribute('data-swiping')).toBe(false);
 			expect(toast.hasAttribute('data-ending')).toBe(false);
 		});
+
+		it('gives a little to a pull the wrong way, and no more', async () => {
+			setup({ swipeDirection: ['right'] });
+
+			await press('add');
+			const toast = toasts()[0];
+			const rect = toast.getBoundingClientRect();
+			const move = (x: number, type: string, target: EventTarget = window) =>
+				target.dispatchEvent(
+					new PointerEvent(type, {
+						pointerType: 'touch',
+						pointerId: 7,
+						isPrimary: true,
+						button: 0,
+						clientX: rect.left + 200 + x,
+						clientY: rect.top + 10,
+						bubbles: true,
+						cancelable: true
+					})
+				);
+
+			move(0, 'pointerdown', toast);
+			move(-8, 'pointermove');
+			await tick();
+			const short = parseFloat(toast.style.getPropertyValue('--toast-swipe-movement-x'));
+			move(-160, 'pointermove');
+			await tick();
+			const long = parseFloat(toast.style.getPropertyValue('--toast-swipe-movement-x'));
+			expect(short).toBeLessThan(0);
+			expect(long).toBeLessThan(short);
+			expect(long).toBeGreaterThan(-8);
+			move(-160, 'pointerup');
+			await tick();
+			expect(toast.hasAttribute('data-ending')).toBe(false);
+		});
 	});
 });
diff --git a/packages/ui/src/lib/toast/root/toast-root.svelte b/packages/ui/src/lib/toast/root/toast-root.svelte
index a0ebe52c..6637260e 100644
--- a/packages/ui/src/lib/toast/root/toast-root.svelte
+++ b/packages/ui/src/lib/toast/root/toast-root.svelte
@@ -22,6 +22,8 @@
 	 */
 	const SWIPE_THRESHOLD_PX = 40;
 	const FLICK_VELOCITY_PX_MS = 0.5;
+	// A pull the wrong way gives a little, and no more: the toast behind must not come into view.
+	const INWARD_PULL_MAX_PX = 8;
 
 	let {
 		toast,
@@ -183,8 +185,13 @@
 				manager.pauseTimers();
 			},
 			onMove: ({ displacement }) => {
-				// The toast follows the finger outward, and resists a pull the other way.
-				const outward = displacement >= 0 ? displacement : displacement / 4;
+				// The toast follows the finger outward. A pull the other way is a rubber band that
+				// stops short of the toast behind.
+				const pull = -displacement;
+				const outward =
+					displacement >= 0
+						? displacement
+						: -(INWARD_PULL_MAX_PX * pull) / (pull + INWARD_PULL_MAX_PX);
 				if (axis === 'x') swipeX = outward * sign;
 				else swipeY = outward * sign;
 			},
@@ -199,14 +206,14 @@
 				swipeX = 0;
 				swipeY = 0;
 				swipeSide = null;
-				if (!ctx.hovering && !ctx.focused) manager.resumeTimers();
+				if (!ctx.expanded) manager.resumeTimers();
 			},
 			onCancel: () => {
 				swiping = false;
 				swipeX = 0;
 				swipeY = 0;
 				swipeSide = null;
-				if (!ctx.hovering && !ctx.focused) manager.resumeTimers();
+				if (!ctx.expanded) manager.resumeTimers();
 			}
 		};
 	}
diff --git a/packages/ui/src/lib/toast/viewport/toast-viewport.svelte b/packages/ui/src/lib/toast/viewport/toast-viewport.svelte
index 4429e051..c5fb22e7 100644
--- a/packages/ui/src/lib/toast/viewport/toast-viewport.svelte
+++ b/packages/ui/src/lib/toast/viewport/toast-viewport.svelte
@@ -21,9 +21,10 @@
 	 * assertive, say the title and the description of each new toast. Thus the screen reader does
 	 * not read the buttons of the toast as part of the message.
 	 *
-	 * The timers stop while the pointer rests on the region, while the focus is in it, and while
-	 * the tab is hidden. A toast that closes while the user reads it is a toast the user did not
-	 * read.
+	 * A touch has no hover: a tap on a toast spreads the stack out, and a touch outside the
+	 * region folds it back. The timers stop while the pointer rests on the region, while the
+	 * focus is in it, while a tap holds it open, and while the tab is hidden. A toast that closes
+	 * while the user reads it is a toast the user did not read.
 	 */
 	let {
 		children,
@@ -32,6 +33,7 @@
 		element = $bindable<HTMLDivElement | null>(null),
 		onpointerenter,
 		onpointerleave,
+		onpointerdown,
 		onfocusin,
 		onfocusout,
 		onkeydown,
@@ -123,10 +125,28 @@
 	// --- Timers -------------------------------------------------------------------------------
 
 	function syncTimers() {
-		if (ctx.hovering || ctx.focused || !documentVisible) manager.pauseTimers();
+		if (ctx.hovering || ctx.focused || ctx.tapped || !documentVisible) manager.pauseTimers();
 		else manager.resumeTimers();
 	}
 
+	function handlePointerDown(
+		event: PointerEvent & { currentTarget: EventTarget & HTMLDivElement }
+	) {
+		onpointerdown?.(event);
+		if (event.pointerType === 'mouse' || ctx.tapped) return;
+		ctx.setTapped(true);
+		syncTimers();
+	}
+
+	// A touch anywhere else folds the stack back. The listener is on the document, thus a touch
+	// on a page that stops its own events folds it too.
+	function handleDocumentPointerDown(event: PointerEvent) {
+		if (!ctx.tapped || event.pointerType === 'mouse') return;
+		if (event.target instanceof Node && regionRef?.contains(event.target)) return;
+		ctx.setTapped(false);
+		syncTimers();
+	}
+
 	function handlePointerEnter(
 		event: PointerEvent & { currentTarget: EventTarget & HTMLDivElement }
 	) {
@@ -262,11 +282,22 @@
 		}
 	}
 
+	// The region leaves with the last toast, and a tap does not outlive it.
+	$effect(() => {
+		if (manager.toasts.length > 0 || !ctx.tapped) return;
+		untrack(() => {
+			ctx.setTapped(false);
+			syncTimers();
+		});
+	});
+
 	$effect(() => {
 		window.addEventListener('keydown', handleWindowKeyDown);
 		document.addEventListener('visibilitychange', handleVisibilityChange);
+		document.addEventListener('pointerdown', handleDocumentPointerDown, true);
 		untrack(syncTimers);
 		return () => {
+			document.removeEventListener('pointerdown', handleDocumentPointerDown, true);
 			document.removeEventListener('visibilitychange', handleVisibilityChange);
 			window.removeEventListener('keydown', handleWindowKeyDown);
 		};
@@ -306,6 +337,7 @@
 			data-expanded={ctx.expanded || undefined}
 			onpointerenter={handlePointerEnter}
 			onpointerleave={handlePointerLeave}
+			onpointerdown={handlePointerDown}
 			onfocusin={handleFocusIn}
 			onfocusout={handleFocusOut}
 			onkeydown={handleKeyDown}

From fc6efab79d593f71caec3c0c2316d4a511a499d4 Mon Sep 17 00:00:00 2001
From: Agustin Delgado <agustindariodelgado@gmail.com>
Date: Sat, 19 Sep 2026 14:41:39 -0300
Subject: [PATCH 08/13] test(toast): park the real mouse before each test

The mouse rests where the file before left it. On the region, it is a hover that stops the timers and spreads the stack out, and the tests of the timers and of the tap read that hover as their own state.
---
 .../ui/src/lib/toast/provider/toast.test.ts   | 72 ++++++++++---------
 1 file changed, 38 insertions(+), 34 deletions(-)

diff --git a/packages/ui/src/lib/toast/provider/toast.test.ts b/packages/ui/src/lib/toast/provider/toast.test.ts
index 52219bcd..ea1c455f 100644
--- a/packages/ui/src/lib/toast/provider/toast.test.ts
+++ b/packages/ui/src/lib/toast/provider/toast.test.ts
@@ -53,13 +53,17 @@ function pointer(target: Element, type: string, pointerType: 'mouse' | 'touch' =
 
 let manager: ToastManager | undefined;
 
-function setup(props: Record<string, unknown> = {}) {
-	return render(ToastTest, {
+async function setup(props: Record<string, unknown> = {}) {
+	const screen = render(ToastTest, {
 		...props,
 		onManager: (value: ToastManager) => {
 			manager = value;
 		}
 	});
+	// The real mouse rests where the file before left it. On the region, it would be a hover
+	// that stops the timers and spreads the stack out: park it on the button above the region.
+	await userEvent.hover(byTestId('before'));
+	return screen;
 }
 
 function getManager(): ToastManager {
@@ -82,8 +86,8 @@ describe('Toast', () => {
 	});
 
 	describe('region and announcement', () => {
-		it('renders nothing but the announcers while there is no toast', () => {
-			setup();
+		it('renders nothing but the announcers while there is no toast', async () => {
+			await setup();
 
 			expect(region()).toBeNull();
 			expect(document.querySelector('[role="status"][aria-live="polite"]')).not.toBeNull();
@@ -91,7 +95,7 @@ describe('Toast', () => {
 		});
 
 		it('adds a dialog with its name and its description, and announces it politely', async () => {
-			setup();
+			await setup();
 
 			await press('add');
 
@@ -114,7 +118,7 @@ describe('Toast', () => {
 		});
 
 		it('makes a high priority toast an alertdialog, and announces it assertively', async () => {
-			setup();
+			await setup();
 
 			await press('add-high');
 
@@ -124,7 +128,7 @@ describe('Toast', () => {
 		});
 
 		it('counts the toasts in the name of the region', async () => {
-			setup();
+			await setup();
 
 			await press('add');
 			await press('add');
@@ -137,7 +141,7 @@ describe('Toast', () => {
 		});
 
 		it('moves the toasts behind up while one is on its way out, which keeps its place', async () => {
-			setup({ timeout: 0 });
+			await setup({ timeout: 0 });
 			await tick();
 
 			getManager().add({ title: 'A' });
@@ -162,7 +166,7 @@ describe('Toast', () => {
 		});
 
 		it('does not read the buttons as part of the message', async () => {
-			setup({ withAction: true });
+			await setup({ withAction: true });
 
 			await press('add');
 
@@ -173,7 +177,7 @@ describe('Toast', () => {
 
 	describe('timers', () => {
 		it('closes on its own after the timeout, and leaves the DOM', async () => {
-			setup({ timeout: 1000 });
+			await setup({ timeout: 1000 });
 
 			await press('add');
 			await advance(900);
@@ -186,7 +190,7 @@ describe('Toast', () => {
 		});
 
 		it('stops the timer while the pointer rests on the region', async () => {
-			setup({ timeout: 1000 });
+			await setup({ timeout: 1000 });
 
 			await press('add');
 			await advance(500);
@@ -203,7 +207,7 @@ describe('Toast', () => {
 		});
 
 		it('stops the timer while the keyboard focus is in the region', async () => {
-			setup({ timeout: 1000 });
+			await setup({ timeout: 1000 });
 
 			await press('add');
 			byTestId('before').focus();
@@ -223,7 +227,7 @@ describe('Toast', () => {
 		});
 
 		it('keeps a toast with timeout 0, and a loading toast', async () => {
-			setup({ timeout: 1000 });
+			await setup({ timeout: 1000 });
 			await tick();
 
 			getManager().add({ title: 'Forever', timeout: 0 });
@@ -234,7 +238,7 @@ describe('Toast', () => {
 		});
 
 		it('gives a toast its full time again on an update', async () => {
-			setup({ timeout: 1000 });
+			await setup({ timeout: 1000 });
 			await tick();
 
 			const id = getManager().add({ title: 'One' });
@@ -251,7 +255,7 @@ describe('Toast', () => {
 		});
 
 		it('turns a promise into loading, then success', async () => {
-			setup({ timeout: 1000 });
+			await setup({ timeout: 1000 });
 			await tick();
 
 			let resolve!: (value: string) => void;
@@ -277,7 +281,7 @@ describe('Toast', () => {
 		});
 
 		it('closes all toasts at once', async () => {
-			setup();
+			await setup();
 			await tick();
 
 			getManager().add({ title: 'A' });
@@ -308,7 +312,7 @@ describe('Toast', () => {
 		});
 
 		it('renders the viewport at the end of the body by default', async () => {
-			setup({ portal: true });
+			await setup({ portal: true });
 			await press('add');
 
 			expect(region()?.parentElement?.parentElement).toBe(document.body);
@@ -316,7 +320,7 @@ describe('Toast', () => {
 		});
 
 		it('stops the timers while the tab is hidden', async () => {
-			setup({ timeout: 1000 });
+			await setup({ timeout: 1000 });
 			await press('add');
 			await advance(500);
 
@@ -332,7 +336,7 @@ describe('Toast', () => {
 		});
 
 		it('does not stop the timers for a touch that passes over the region', async () => {
-			setup({ timeout: 1000 });
+			await setup({ timeout: 1000 });
 			await press('add');
 
 			pointer(region()!, 'pointerenter', 'touch');
@@ -341,7 +345,7 @@ describe('Toast', () => {
 		});
 
 		it('a tap spreads the stack out and holds the timers, and a touch outside folds it back', async () => {
-			setup({ timeout: 1000 });
+			await setup({ timeout: 1000 });
 			await press('add');
 			await press('add');
 			expect(region()?.hasAttribute('data-expanded')).toBe(false);
@@ -412,7 +416,7 @@ describe('Toast', () => {
 
 	describe('announcements', () => {
 		it('reads two toasts of the same tick, and the same text twice', async () => {
-			setup();
+			await setup();
 			await tick();
 
 			getManager().add({ title: 'Same' });
@@ -427,7 +431,7 @@ describe('Toast', () => {
 		});
 
 		it('names a toast without a title by its description', async () => {
-			setup();
+			await setup();
 			await tick();
 
 			getManager().add({ description: 'Only a message' });
@@ -441,7 +445,7 @@ describe('Toast', () => {
 		});
 
 		it('does not count a toast on its way out in the name of the region', async () => {
-			setup({ timeout: 0 });
+			await setup({ timeout: 0 });
 			await tick();
 
 			const id = getManager().add({ title: 'A' });
@@ -455,7 +459,7 @@ describe('Toast', () => {
 		});
 
 		it('moves the focus on when the page closes the focused toast', async () => {
-			setup();
+			await setup();
 			await tick();
 
 			const first = getManager().add({ title: 'A' });
@@ -478,7 +482,7 @@ describe('Toast', () => {
 
 	describe('keyboard', () => {
 		it('F6 lands on the first toast, Escape closes it and the focus goes back', async () => {
-			setup();
+			await setup();
 
 			await press('add');
 			byTestId('before').focus();
@@ -493,7 +497,7 @@ describe('Toast', () => {
 		});
 
 		it('moves the focus to the next toast when the focused one closes', async () => {
-			setup();
+			await setup();
 
 			await press('add');
 			await press('add');
@@ -509,7 +513,7 @@ describe('Toast', () => {
 		});
 
 		it('Tab past the last button goes back to where the focus was', async () => {
-			setup();
+			await setup();
 
 			await press('add');
 			byTestId('before').focus();
@@ -526,7 +530,7 @@ describe('Toast', () => {
 
 	describe('buttons', () => {
 		it('the close button closes the toast', async () => {
-			setup();
+			await setup();
 
 			await press('add');
 			await press('close');
@@ -536,7 +540,7 @@ describe('Toast', () => {
 		});
 
 		it('the action closes the toast, unless keepOpen', async () => {
-			setup({ withAction: true, keepOpen: true });
+			await setup({ withAction: true, keepOpen: true });
 
 			await press('add');
 			await press('action');
@@ -547,7 +551,7 @@ describe('Toast', () => {
 
 	describe('limit', () => {
 		it('keeps the newest toasts on the screen, and the older ones inert behind', async () => {
-			setup({ limit: 2, timeout: 1000 });
+			await setup({ limit: 2, timeout: 1000 });
 
 			await press('add');
 			await press('add');
@@ -575,7 +579,7 @@ describe('Toast', () => {
 
 	describe('positioner', () => {
 		it('puts an anchored toast against its anchor, and keeps it out of the stack', async () => {
-			setup({ withPositioner: true });
+			await setup({ withPositioner: true });
 
 			await press('add');
 			await press('add-anchored');
@@ -608,7 +612,7 @@ describe('Toast', () => {
 
 	describe('swipe', () => {
 		it('follows the finger, and dismisses past the threshold', async () => {
-			setup({ swipeDirection: ['right'] });
+			await setup({ swipeDirection: ['right'] });
 
 			await press('add');
 			const toast = toasts()[0];
@@ -668,7 +672,7 @@ describe('Toast', () => {
 		});
 
 		it('comes back after a short swipe', async () => {
-			setup({ swipeDirection: ['right'] });
+			await setup({ swipeDirection: ['right'] });
 
 			await press('add');
 			const toast = toasts()[0];
@@ -704,7 +708,7 @@ describe('Toast', () => {
 		});
 
 		it('gives a little to a pull the wrong way, and no more', async () => {
-			setup({ swipeDirection: ['right'] });
+			await setup({ swipeDirection: ['right'] });
 
 			await press('add');
 			const toast = toasts()[0];

From c5292a34313e5d44a214ced95e2ca7c525962d21 Mon Sep 17 00:00:00 2001
From: Agustin Delgado <agustindariodelgado@gmail.com>
Date: Sat, 19 Sep 2026 14:50:12 -0300
Subject: [PATCH 09/13] fix(toast): a tap is a touch that lifts where it landed

The stack spread out on the finger down, thus every swipe started with a spread nobody asked for. The tap now resolves on the lift, within 10 px of where the touch landed, and not on a button.
---
 docs/src/content/toast/api.json               |  4 +-
 docs/src/content/toast/index.md               |  2 +-
 packages/ui/src/lib/toast/README.md           |  2 +-
 packages/ui/src/lib/toast/provider/context.ts |  2 +-
 .../ui/src/lib/toast/provider/toast.test.ts   | 39 +++++++++++++++++++
 .../lib/toast/viewport/toast-viewport.svelte  | 36 ++++++++++++++++-
 6 files changed, 78 insertions(+), 7 deletions(-)

diff --git a/docs/src/content/toast/api.json b/docs/src/content/toast/api.json
index 095310a7..82c9e5c2 100644
--- a/docs/src/content/toast/api.json
+++ b/docs/src/content/toast/api.json
@@ -72,7 +72,7 @@
 			"dataAttributes": [
 				{
 					"name": "data-expanded",
-					"description": "Present while the pointer rests on the viewport, or the focus is in it. A tap on a toast holds it on until a touch outside the viewport."
+					"description": "Present while the pointer rests on the viewport, or the focus is in it. A tap on a toast, not a swipe, holds it on until a touch outside the viewport."
 				},
 				{
 					"name": "data-toast-viewport",
@@ -187,7 +187,7 @@
 				},
 				{
 					"name": "data-expanded",
-					"description": "Present while the pointer rests on the viewport, or the focus is in it. A tap on a toast holds it on until a touch outside the viewport."
+					"description": "Present while the pointer rests on the viewport, or the focus is in it. A tap on a toast, not a swipe, holds it on until a touch outside the viewport."
 				},
 				{
 					"name": "data-front",
diff --git a/docs/src/content/toast/index.md b/docs/src/content/toast/index.md
index 015abacb..72256417 100644
--- a/docs/src/content/toast/index.md
+++ b/docs/src/content/toast/index.md
@@ -85,7 +85,7 @@ The title and the description are text. That text is what the screen reader hear
 
 A toast stays `timeout` milliseconds: 5000 by default, on the provider or on the toast. `0` keeps it until a close.
 
-The timers stop while the pointer rests on the viewport, and while the keyboard focus is in it. A touch has no hover: a tap on a toast holds the stack open, and the timers with it, until a touch outside the viewport. They also stop while the tab is hidden. They start again with the time each toast had left. A toast that closes while the user reads it is a toast the user did not read.
+The timers stop while the pointer rests on the viewport, and while the keyboard focus is in it. A touch has no hover: a tap on a toast holds the stack open, and the timers with it, until a touch outside the viewport. A tap lifts where it landed. A swipe is not a tap, and a press on a button is not one. They also stop while the tab is hidden. They start again with the time each toast had left. A toast that closes while the user reads it is a toast the user did not read.
 
 ## The stack
 
diff --git a/packages/ui/src/lib/toast/README.md b/packages/ui/src/lib/toast/README.md
index 2a3007ff..5266d928 100644
--- a/packages/ui/src/lib/toast/README.md
+++ b/packages/ui/src/lib/toast/README.md
@@ -68,5 +68,5 @@
 - Two live regions beside the viewport announce each toast: `role="status"` for the normal priority, and `role="alert"` for the high priority. The message is the title and the description.
 - `Toast.Root` is a `role="dialog"` that is not modal, or an `alertdialog` for the high priority. It has `aria-labelledby` from the title and `aria-describedby` from the description, and it is a tab stop.
 - `Escape` closes the focused toast, and the focus moves to the next toast, or back to where it was.
-- The timers stop while the pointer rests on the viewport, and while the focus is in it. A tap on a toast holds the stack open, and the timers with it, until a touch outside the viewport. They also stop while the tab is hidden.
+- The timers stop while the pointer rests on the viewport, and while the focus is in it. A tap on a toast, not a swipe, holds the stack open, and the timers with it, until a touch outside the viewport. They also stop while the tab is hidden.
 - The viewport stays reachable behind a modal dialog, with `F6` and `Tab`.
diff --git a/packages/ui/src/lib/toast/provider/context.ts b/packages/ui/src/lib/toast/provider/context.ts
index 58d26512..1ec8a14e 100644
--- a/packages/ui/src/lib/toast/provider/context.ts
+++ b/packages/ui/src/lib/toast/provider/context.ts
@@ -9,7 +9,7 @@ export type ToastProviderContext = {
 	readonly hovering: boolean;
 	/** The focus is in the viewport. */
 	readonly focused: boolean;
-	/** A touch tapped a toast, and no touch outside the viewport came after it. */
+	/** A touch tapped a toast, lifted where it landed, and no touch outside came after it. */
 	readonly tapped: boolean;
 	/**
 	 * The toasts are spread out: the pointer rests on them, the focus is in them, or a touch
diff --git a/packages/ui/src/lib/toast/provider/toast.test.ts b/packages/ui/src/lib/toast/provider/toast.test.ts
index ea1c455f..94676f0b 100644
--- a/packages/ui/src/lib/toast/provider/toast.test.ts
+++ b/packages/ui/src/lib/toast/provider/toast.test.ts
@@ -350,8 +350,12 @@ describe('Toast', () => {
 			await press('add');
 			expect(region()?.hasAttribute('data-expanded')).toBe(false);
 
+			// The finger down alone is not a tap yet: a swipe starts the same way.
 			pointer(toasts()[0], 'pointerdown', 'touch');
 			await tick();
+			expect(region()?.hasAttribute('data-expanded')).toBe(false);
+			pointer(toasts()[0], 'pointerup', 'touch');
+			await tick();
 			expect(region()?.getAttribute('data-expanded')).toBe('true');
 			expect(toasts()[1].getAttribute('data-expanded')).toBe('true');
 			await advance(1500);
@@ -368,6 +372,41 @@ describe('Toast', () => {
 			await advance(1000);
 			await expect.poll(() => toasts().length).toBe(0);
 		});
+
+		it('a swipe and a press on a button are not taps', async () => {
+			await setup({ timeout: 0, withAction: true });
+			await press('add');
+			await press('add');
+			const toast = toasts()[0];
+			const touchAt = (target: Element, type: string, x: number) =>
+				target.dispatchEvent(
+					new PointerEvent(type, {
+						pointerType: 'touch',
+						pointerId: 8,
+						isPrimary: true,
+						bubbles: true,
+						clientX: 100 + x,
+						clientY: 100
+					})
+				);
+
+			// A finger that moves before it lifts is a swipe, even a short one.
+			touchAt(toast, 'pointerdown', 0);
+			touchAt(toast, 'pointerup', 30);
+			await tick();
+			expect(region()?.hasAttribute('data-expanded')).toBe(false);
+
+			const close = byTestId('close');
+			touchAt(close, 'pointerdown', 0);
+			touchAt(close, 'pointerup', 0);
+			await tick();
+			expect(region()?.hasAttribute('data-expanded')).toBe(false);
+
+			touchAt(toast, 'pointerdown', 0);
+			touchAt(toast, 'pointerup', 4);
+			await tick();
+			expect(region()?.getAttribute('data-expanded')).toBe('true');
+		});
 	});
 
 	describe('behind a modal', () => {
diff --git a/packages/ui/src/lib/toast/viewport/toast-viewport.svelte b/packages/ui/src/lib/toast/viewport/toast-viewport.svelte
index c5fb22e7..3034afd0 100644
--- a/packages/ui/src/lib/toast/viewport/toast-viewport.svelte
+++ b/packages/ui/src/lib/toast/viewport/toast-viewport.svelte
@@ -7,6 +7,7 @@
 	import { HIDE_OUTSIDE_EXEMPT_ATTRIBUTE } from '../../primitives/aria-hide-outside';
 	import { getFocusableElements } from '../../primitives/focus-trap';
 	import { shouldShowFocusVisible } from '../../primitives/input-modality';
+	import { SWIPE_IGNORE_ATTRIBUTE } from '../../primitives/swipe-gesture';
 	import { visuallyHiddenStyle } from '../../table/utils/visually-hidden-style';
 	import { useToastProviderContext } from '../provider/context';
 	import type { ToastItem } from '../provider/toast-manager.svelte';
@@ -22,7 +23,8 @@
 	 * not read the buttons of the toast as part of the message.
 	 *
 	 * A touch has no hover: a tap on a toast spreads the stack out, and a touch outside the
-	 * region folds it back. The timers stop while the pointer rests on the region, while the
+	 * region folds it back. A tap is a touch that lifts where it landed: a swipe is not one, and
+	 * a press on a button is not one. The timers stop while the pointer rests on the region, while the
 	 * focus is in it, while a tap holds it open, and while the tab is hidden. A toast that closes
 	 * while the user reads it is a toast the user did not read.
 	 */
@@ -34,6 +36,8 @@
 		onpointerenter,
 		onpointerleave,
 		onpointerdown,
+		onpointerup,
+		onpointercancel,
 		onfocusin,
 		onfocusout,
 		onkeydown,
@@ -129,15 +133,41 @@
 		else manager.resumeTimers();
 	}
 
+	// A tap lifts within this distance of where it landed. Past it, the touch is a swipe.
+	const TAP_SLOP_PX = 10;
+	let tapStart: { id: number; x: number; y: number } | null = null;
+
 	function handlePointerDown(
 		event: PointerEvent & { currentTarget: EventTarget & HTMLDivElement }
 	) {
 		onpointerdown?.(event);
-		if (event.pointerType === 'mouse' || ctx.tapped) return;
+		tapStart = null;
+		if (event.pointerType === 'mouse') return;
+		// A press on a button is a press: it must not spread the stack under the finger.
+		if (event.target instanceof Element && event.target.closest(`[${SWIPE_IGNORE_ATTRIBUTE}]`)) {
+			return;
+		}
+		tapStart = { id: event.pointerId, x: event.clientX, y: event.clientY };
+	}
+
+	function handlePointerUp(event: PointerEvent & { currentTarget: EventTarget & HTMLDivElement }) {
+		onpointerup?.(event);
+		const start = tapStart;
+		tapStart = null;
+		if (!start || start.id !== event.pointerId) return;
+		if (Math.hypot(event.clientX - start.x, event.clientY - start.y) > TAP_SLOP_PX) return;
+		if (ctx.tapped) return;
 		ctx.setTapped(true);
 		syncTimers();
 	}
 
+	function handlePointerCancel(
+		event: PointerEvent & { currentTarget: EventTarget & HTMLDivElement }
+	) {
+		onpointercancel?.(event);
+		tapStart = null;
+	}
+
 	// A touch anywhere else folds the stack back. The listener is on the document, thus a touch
 	// on a page that stops its own events folds it too.
 	function handleDocumentPointerDown(event: PointerEvent) {
@@ -338,6 +368,8 @@
 			onpointerenter={handlePointerEnter}
 			onpointerleave={handlePointerLeave}
 			onpointerdown={handlePointerDown}
+			onpointerup={handlePointerUp}
+			onpointercancel={handlePointerCancel}
 			onfocusin={handleFocusIn}
 			onfocusout={handleFocusOut}
 			onkeydown={handleKeyDown}

From cf3b6cf41cf3e672c06e06b7afaf5814066d0f7f Mon Sep 17 00:00:00 2001
From: Agustin Delgado <agustindariodelgado@gmail.com>
Date: Sat, 19 Sep 2026 14:58:44 -0300
Subject: [PATCH 10/13] docs(toast): show the text of the toasts behind while a
 swipe moves the front one

The demo hid the text of the toasts behind the front one while the stack is folded. A swipe moved the front one aside and showed an empty card, which read as a fault.
---
 docs/src/content/toast/demos/viewport.svelte | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/docs/src/content/toast/demos/viewport.svelte b/docs/src/content/toast/demos/viewport.svelte
index 15138595..dd25eab7 100644
--- a/docs/src/content/toast/demos/viewport.svelte
+++ b/docs/src/content/toast/demos/viewport.svelte
@@ -77,10 +77,20 @@
 		overflow: hidden;
 	}
 
+	:global(.toast-content) {
+		transition: opacity 0.2s;
+	}
+
 	:global(.toast:not([data-front]):not([data-expanded]) .toast-content) {
 		opacity: 0;
 	}
 
+	/* While a swipe moves the front toast aside, the ones behind show their text: the next one
+	   is in view, and an empty card there reads as a fault. */
+	:global(.toast-viewport:has(.toast[data-front][data-swiping]) .toast .toast-content) {
+		opacity: 1;
+	}
+
 	:global(.toast[data-expanded]) {
 		--toast-y: calc(
 			var(--toast-swipe-movement-y) - var(--toast-offset-y) - var(--toast-index) * 8px

From cab00d3f5f5fa1731dc40a68b578c61cc67af1d1 Mon Sep 17 00:00:00 2001
From: Agustin Delgado <agustindariodelgado@gmail.com>
Date: Sat, 19 Sep 2026 15:08:16 -0300
Subject: [PATCH 11/13] fix(toast): announce the toasts of one tick in their
 order, and honor reduced motion in the demos

The announcer walked the list of toasts, which is the newest first: two toasts of one tick came out in reverse. The demos set a short motion under prefers-reduced-motion on the toast, and the enter rule, more specific, kept its 0.4 s.
---
 docs/src/content/toast/demos/anchored.svelte             | 8 ++++++++
 docs/src/content/toast/demos/viewport.svelte             | 4 +++-
 packages/ui/src/lib/toast/provider/toast.test.ts         | 9 +++++++--
 packages/ui/src/lib/toast/viewport/toast-viewport.svelte | 3 ++-
 4 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/docs/src/content/toast/demos/anchored.svelte b/docs/src/content/toast/demos/anchored.svelte
index 822d4e78..116f70cc 100644
--- a/docs/src/content/toast/demos/anchored.svelte
+++ b/docs/src/content/toast/demos/anchored.svelte
@@ -66,4 +66,12 @@
 			transform: translateY(4px);
 		}
 	}
+
+	@media (prefers-reduced-motion: reduce) {
+		:global(.anchored-toast),
+		:global(.anchored-toast[data-entering]) {
+			transition-duration: 0.01s;
+			animation-duration: 0.01s;
+		}
+	}
 </style>
diff --git a/docs/src/content/toast/demos/viewport.svelte b/docs/src/content/toast/demos/viewport.svelte
index dd25eab7..0c1c9a75 100644
--- a/docs/src/content/toast/demos/viewport.svelte
+++ b/docs/src/content/toast/demos/viewport.svelte
@@ -147,8 +147,10 @@
 		visibility: hidden;
 	}
 
+	/* The enter rule is more specific than `.toast`: the reduced motion names it too. */
 	@media (prefers-reduced-motion: reduce) {
-		:global(.toast) {
+		:global(.toast),
+		:global(.toast[data-entering]) {
 			transition-duration: 0.01s;
 			animation-duration: 0.01s;
 		}
diff --git a/packages/ui/src/lib/toast/provider/toast.test.ts b/packages/ui/src/lib/toast/provider/toast.test.ts
index 94676f0b..73996f19 100644
--- a/packages/ui/src/lib/toast/provider/toast.test.ts
+++ b/packages/ui/src/lib/toast/provider/toast.test.ts
@@ -454,16 +454,21 @@ describe('Toast', () => {
 	});
 
 	describe('announcements', () => {
-		it('reads two toasts of the same tick, and the same text twice', async () => {
+		it('reads two toasts of the same tick in their order, and the same text twice', async () => {
 			await setup();
 			await tick();
 
+			getManager().add({ title: 'First' });
 			getManager().add({ title: 'Same' });
 			getManager().add({ title: 'Same' });
 			await tick();
 
 			const nodes = document.querySelectorAll('[role="status"] > div');
-			expect(Array.from(nodes).map((node) => node.textContent)).toEqual(['Same', 'Same']);
+			expect(Array.from(nodes).map((node) => node.textContent)).toEqual([
+				'First',
+				'Same',
+				'Same'
+			]);
 
 			await advance(2100);
 			expect(document.querySelectorAll('[role="status"] > div')).toHaveLength(0);
diff --git a/packages/ui/src/lib/toast/viewport/toast-viewport.svelte b/packages/ui/src/lib/toast/viewport/toast-viewport.svelte
index 3034afd0..5a2a166b 100644
--- a/packages/ui/src/lib/toast/viewport/toast-viewport.svelte
+++ b/packages/ui/src/lib/toast/viewport/toast-viewport.svelte
@@ -112,7 +112,8 @@
 		untrack(() => {
 			// eslint-disable-next-line svelte/prefer-svelte-reactivity -- a scratch set for one pass.
 			const ids = new Set<string>();
-			for (const toast of toasts) {
+			// The list is the newest first; the screen reader hears the oldest first.
+			for (const toast of [...toasts].reverse()) {
 				ids.add(toast.id);
 				if (toast.status === 'ending' || announced.get(toast.id) === toast.updateKey) continue;
 				announced.set(toast.id, toast.updateKey);

From 14710cdc662e3761b67f0ad352d86d62b53f357e Mon Sep 17 00:00:00 2001
From: Agustin Delgado <agustindariodelgado@gmail.com>
Date: Sat, 19 Sep 2026 15:13:02 -0300
Subject: [PATCH 12/13] style(toast): format the test

---
 packages/ui/src/lib/toast/provider/toast.test.ts | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/packages/ui/src/lib/toast/provider/toast.test.ts b/packages/ui/src/lib/toast/provider/toast.test.ts
index 73996f19..6ca663ff 100644
--- a/packages/ui/src/lib/toast/provider/toast.test.ts
+++ b/packages/ui/src/lib/toast/provider/toast.test.ts
@@ -464,11 +464,7 @@ describe('Toast', () => {
 			await tick();
 
 			const nodes = document.querySelectorAll('[role="status"] > div');
-			expect(Array.from(nodes).map((node) => node.textContent)).toEqual([
-				'First',
-				'Same',
-				'Same'
-			]);
+			expect(Array.from(nodes).map((node) => node.textContent)).toEqual(['First', 'Same', 'Same']);
 
 			await advance(2100);
 			expect(document.querySelectorAll('[role="status"] > div')).toHaveLength(0);

From 39fb9459ec4966321b090b4a4decbae99f7fe97b Mon Sep 17 00:00:00 2001
From: Agustin Delgado <agustindariodelgado@gmail.com>
Date: Tue, 22 Sep 2026 14:45:20 -0300
Subject: [PATCH 13/13] fix(toast): keep the stack still while a toast enters,
 waits or goes

Three faults of the stack, found with a frame by frame trace of the demo:

- A toast past the limit read `--toast-index: 0`, thus it had the place in
  front. When a place freed, it came forward from over the toast the user
  reads. It now waits in the place behind the stack.
- A toast on its way out kept `data-front`, thus two toasts had it at one
  time. The front is now the one toast the user sees in front. The demo
  keeps the toast that goes out of the rule that hides the ones behind.
- The enter of the demo moved `transform`, which also holds the place in
  the stack. A toast pushed back while it came in jumped to its new place.
  The enter now moves `translate`, and the place keeps its transition.

Also: the close button of the action demo no longer has the room of a
button that floats.
---
 docs/src/content/toast/api.json               |  4 +-
 docs/src/content/toast/demos/action.svelte    | 10 ++++-
 docs/src/content/toast/demos/anchored.svelte  |  3 +-
 docs/src/content/toast/demos/viewport.svelte  | 21 +++++-----
 docs/src/content/toast/index.md               | 14 ++++++-
 packages/ui/src/lib/toast/README.md           |  5 ++-
 .../ui/src/lib/toast/provider/toast.test.ts   | 39 +++++++++++++++++++
 .../ui/src/lib/toast/root/toast-root.svelte   | 15 ++++---
 8 files changed, 90 insertions(+), 21 deletions(-)

diff --git a/docs/src/content/toast/api.json b/docs/src/content/toast/api.json
index 82c9e5c2..395ec84c 100644
--- a/docs/src/content/toast/api.json
+++ b/docs/src/content/toast/api.json
@@ -191,11 +191,11 @@
 				},
 				{
 					"name": "data-front",
-					"description": "Present on the toast in front. A toast on its way out keeps it, thus its exit runs from its place."
+					"description": "Present on the one toast in front. A toast on its way out drops it, and it keeps the place it had for its exit."
 				},
 				{
 					"name": "data-limited",
-					"description": "Present on a toast past the limit. It is inert."
+					"description": "Present on a toast past the limit. It is inert, and it waits in the place behind the stack."
 				},
 				{
 					"name": "data-priority",
diff --git a/docs/src/content/toast/demos/action.svelte b/docs/src/content/toast/demos/action.svelte
index e1a4c47e..a0507476 100644
--- a/docs/src/content/toast/demos/action.svelte
+++ b/docs/src/content/toast/demos/action.svelte
@@ -25,7 +25,7 @@
 	<!-- The action closes the toast on the press: the offer is taken. -->
 	<Toast.Viewport class="toast-viewport">
 		{#snippet children(toast)}
-			<Toast.Root {toast} class="toast flex items-center gap-3">
+			<Toast.Root {toast} class="toast toast-inline flex items-center gap-3">
 				<Toast.Content class="toast-content flex-1">
 					<Toast.Title class="text-sm text-neutral-900 dark:text-white" />
 				</Toast.Content>
@@ -45,3 +45,11 @@
 		{/snippet}
 	</Toast.Viewport>
 </Toast.Provider>
+
+<style>
+	/* The buttons of this toast are in the flow, not in the corner: the padding of the shared
+	   toast leaves room for a close button that floats, and here that room is a gap. */
+	:global(.toast-inline) {
+		padding-inline-end: 0.75rem;
+	}
+</style>
diff --git a/docs/src/content/toast/demos/anchored.svelte b/docs/src/content/toast/demos/anchored.svelte
index 116f70cc..3b515896 100644
--- a/docs/src/content/toast/demos/anchored.svelte
+++ b/docs/src/content/toast/demos/anchored.svelte
@@ -51,6 +51,7 @@
 			transform 0.2s;
 	}
 
+	/* The enter moves `translate`, and the exit `transform`: the two never fight for one property. */
 	:global(.anchored-toast[data-entering]) {
 		animation: anchored-toast-in 0.2s ease-out;
 	}
@@ -63,7 +64,7 @@
 	@keyframes anchored-toast-in {
 		from {
 			opacity: 0;
-			transform: translateY(4px);
+			translate: 0 4px;
 		}
 	}
 
diff --git a/docs/src/content/toast/demos/viewport.svelte b/docs/src/content/toast/demos/viewport.svelte
index 0c1c9a75..7ad29792 100644
--- a/docs/src/content/toast/demos/viewport.svelte
+++ b/docs/src/content/toast/demos/viewport.svelte
@@ -50,6 +50,7 @@
 		transform: translateX(var(--toast-swipe-movement-x)) translateY(var(--toast-y))
 			scale(var(--toast-scale));
 		transform-origin: bottom center;
+		translate: 0 0;
 		transition:
 			transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
 			opacity 0.3s;
@@ -71,8 +72,9 @@
 		background: var(--color-neutral-900);
 	}
 
-	/* The toasts behind the front one take its height while the stack is collapsed. */
-	:global(.toast:not([data-front]):not([data-expanded])) {
+	/* The toasts behind the front one take its height while the stack is collapsed. A toast on
+	   its way out is none of them: it shows what it said until it is gone. */
+	:global(.toast:not([data-front]):not([data-expanded]):not([data-ending])) {
 		height: var(--toast-frontmost-height);
 		overflow: hidden;
 	}
@@ -81,7 +83,7 @@
 		transition: opacity 0.2s;
 	}
 
-	:global(.toast:not([data-front]):not([data-expanded]) .toast-content) {
+	:global(.toast:not([data-front]):not([data-expanded]):not([data-ending]) .toast-content) {
 		opacity: 0;
 	}
 
@@ -102,13 +104,14 @@
 		transition: none;
 	}
 
-	/* The enter is an animation: `data-entering` stays on for the whole motion, thus a transition
-	   would sit still in the start state. The exit is a transition: `data-exiting` is the end
-	   state, and the motion runs from where the toast is. The toast keeps its place in the stack
-	   through the exit, and it sinks from there. */
+	/* The enter is an animation, because `data-entering` stays on for the whole motion: a
+	   transition would sit still in the start state. It moves `translate`, not `transform`, thus
+	   the place in the stack stays with the transition. A toast that comes in while the next one
+	   arrives is pushed back, and it slides back while it rises. The exit is a transition:
+	   `data-exiting` is the end state, and the motion runs from where the toast is. The toast
+	   keeps its place in the stack through the exit, and it sinks from there. */
 	:global(.toast[data-entering]) {
 		animation: toast-in 0.4s cubic-bezier(0.22, 1, 0.36, 1);
-		transition: none;
 	}
 
 	:global(.toast[data-exiting]) {
@@ -120,7 +123,7 @@
 	@keyframes toast-in {
 		from {
 			opacity: 0;
-			transform: translateY(1rem);
+			translate: 0 1rem;
 		}
 	}
 
diff --git a/docs/src/content/toast/index.md b/docs/src/content/toast/index.md
index 72256417..a7f019e3 100644
--- a/docs/src/content/toast/index.md
+++ b/docs/src/content/toast/index.md
@@ -91,7 +91,7 @@ The timers stop while the pointer rests on the viewport, and while the keyboard
 
 The viewport shows the newest toasts up to `limit`: 3 by default. The older ones wait behind, hidden and inert, with their timers stopped, and they come forward as the newer ones close.
 
-Each toast gets `--toast-index`, `--toast-offset-y` and `--toast-height`, and the viewport gets `--toast-frontmost-height`. `data-front` marks the toast in front. `data-expanded` is on the viewport and on each toast while the pointer rests on the viewport, or while the focus is in it. A tap on a toast holds it on until a touch outside the viewport. The viewport of the first demo stacks the toasts in the corner with them, and spreads them out on `data-expanded`. Its source is in `viewport.svelte`, under the demo.
+Each toast gets `--toast-index`, `--toast-offset-y` and `--toast-height`, and the viewport gets `--toast-frontmost-height`. `data-front` marks the one toast in front. A toast on its way out drops it, and it keeps the place it had. `data-expanded` is on the viewport and on each toast while the pointer rests on the viewport, or while the focus is in it. A tap on a toast holds it on until a touch outside the viewport. The viewport of the first demo stacks the toasts in the corner with them, and spreads them out on `data-expanded`. Its source is in `viewport.svelte`, under the demo.
 
 ```css
 .toast {
@@ -105,7 +105,9 @@ Each toast gets `--toast-index`, `--toast-offset-y` and `--toast-height`, and th
 }
 ```
 
-A toast that closes is out of the stack at once: the ones behind it move up while it fades. It keeps the `--toast-index` and `--toast-offset-y` it had, thus its exit runs from its place.
+A toast that closes is out of the stack at once: the ones behind it move up while it fades. It keeps the `--toast-index` and `--toast-offset-y` it had, thus its exit runs from its place. A rule that hides the toasts behind must let it pass, with `:not([data-ending])`.
+
+A toast past the limit waits in the place behind the stack. It comes forward one step when a place frees.
 
 The pointer must not leave the viewport on its way from one toast to the next. The spread stack has a gap between two toasts, and a pointer in the gap is out of all of them. Put a pseudo-element on the toast that covers the gap, as the demo does.
 
@@ -123,7 +125,14 @@ The pointer must not leave the viewport on its way from one toast to the next. T
 
 `data-entering` is on the toast through the enter motion, and `data-exiting` through the exit motion. The toast leaves the DOM when the exit motion ends. Write the enter as an animation on `data-entering`. The attribute stays on for the whole motion, thus a transition would sit still in the start state. Write the exit as a transition on `data-exiting`: it is the end state, and the motion runs from where the toast is. Keep the place in the stack in that end state. A `transform` that reads only `translateY(1rem)` puts a toast from behind under the front one for its exit.
 
+Move the enter with `translate`, and leave `transform` to the place in the stack. A toast that comes in while the next one arrives is pushed back at that moment. With the enter on `transform` too, the two fight for the property, and the toast jumps to its new place.
+
 ```css
+.toast {
+	transform: translateY(calc(var(--toast-index) * -12px));
+	transition: transform 0.4s;
+}
+
 .toast[data-entering] {
 	animation: toast-in 0.4s ease-out;
 }
@@ -136,6 +145,7 @@ The pointer must not leave the viewport on its way from one toast to the next. T
 @keyframes toast-in {
 	from {
 		opacity: 0;
+		translate: 0 1rem;
 	}
 }
 ```
diff --git a/packages/ui/src/lib/toast/README.md b/packages/ui/src/lib/toast/README.md
index 5266d928..9ba0d57a 100644
--- a/packages/ui/src/lib/toast/README.md
+++ b/packages/ui/src/lib/toast/README.md
@@ -43,7 +43,10 @@
 - Keep the default `timeout` at 5 seconds or more. A user who reads slowly needs the time.
 - Give `anchor` to `add`, and put `Toast.Positioner` around the root, for a toast against an element.
 - Style the stack with `--toast-index`, `--toast-offset-y`, `--toast-height`, `--toast-frontmost-height`, `data-front` and `data-expanded`. Move the toast with `--toast-swipe-movement-x` and `--toast-swipe-movement-y`.
-- A toast that closes is out of the stack at once, and it keeps the place it had for its exit. Cover the gap between two spread toasts with a pseudo-element, or the pointer leaves the viewport between them.
+- A toast that closes is out of the stack at once, and it keeps the place it had for its exit. It drops `data-front`, thus a rule that hides the toasts behind needs `:not([data-ending])`.
+- Move the enter motion with `translate`, and leave `transform` to the place in the stack. A toast pushed back mid-enter then slides.
+- A toast past the limit waits in the place behind the stack, and it comes forward one step when a place frees.
+- Cover the gap between two spread toasts with a pseudo-element, or the pointer leaves the viewport between them.
 
 ## API reference
 
diff --git a/packages/ui/src/lib/toast/provider/toast.test.ts b/packages/ui/src/lib/toast/provider/toast.test.ts
index 6ca663ff..8483fb6d 100644
--- a/packages/ui/src/lib/toast/provider/toast.test.ts
+++ b/packages/ui/src/lib/toast/provider/toast.test.ts
@@ -165,6 +165,23 @@ describe('Toast', () => {
 			expect(getManager().stackedToasts.map((toast) => toast.title)).toEqual(['C', 'A']);
 		});
 
+		it('gives up the front to the toast behind while it goes', async () => {
+			await setup({ timeout: 0 });
+			await tick();
+
+			getManager().add({ title: 'A' });
+			const front = getManager().add({ title: 'B' });
+			await tick();
+			expect(toasts()[0].getAttribute('data-front')).toBe('true');
+
+			getManager().close(front);
+			await tick();
+
+			const [ending, behind] = toasts();
+			expect(ending.hasAttribute('data-front')).toBe(false);
+			expect(behind.getAttribute('data-front')).toBe('true');
+		});
+
 		it('does not read the buttons as part of the message', async () => {
 			await setup({ withAction: true });
 
@@ -615,6 +632,28 @@ describe('Toast', () => {
 			await advance(100);
 			await expect.poll(() => toasts().length).toBe(0);
 		});
+
+		it('gives a toast past the limit the place behind the stack', async () => {
+			await setup({ limit: 2, timeout: 0 });
+			await tick();
+
+			getManager().add({ title: 'A' });
+			getManager().add({ title: 'B' });
+			getManager().add({ title: 'C' });
+			await tick();
+
+			// The waiting toast must not take the place in front: it would come forward from
+			// there, over the toast the user reads, when a place frees.
+			const waiting = toasts()[2];
+			expect(waiting.getAttribute('data-limited')).toBe('true');
+			expect(waiting.hasAttribute('data-front')).toBe(false);
+			expect(waiting.style.getPropertyValue('--toast-index')).toBe('2');
+
+			getManager().close(toasts()[0].dataset.toastId);
+			await tick();
+
+			expect(waiting.style.getPropertyValue('--toast-index')).toBe('1');
+		});
 	});
 
 	describe('positioner', () => {
diff --git a/packages/ui/src/lib/toast/root/toast-root.svelte b/packages/ui/src/lib/toast/root/toast-root.svelte
index 6637260e..aa6050c5 100644
--- a/packages/ui/src/lib/toast/root/toast-root.svelte
+++ b/packages/ui/src/lib/toast/root/toast-root.svelte
@@ -44,16 +44,21 @@
 	let descriptionIds = $state<string[]>([]);
 
 	const isEnding = $derived(toast.status === 'ending');
+	// The order in the corner: the toasts on the screen, and behind them the ones that wait past
+	// the limit. A toast that waits takes the place after the stack, thus it comes forward one
+	// step when a place frees. A place of 0 would put it in front, and it would walk from there.
+	const stackOrder = $derived([
+		...manager.stackedToasts,
+		...manager.toasts.filter((candidate) => candidate.limited && !candidate.anchor)
+	]);
 	// A toast against an anchor is out of the stack: `index` is -1, and the vars read 0.
-	const liveIndex = $derived(
-		manager.stackedToasts.findIndex((candidate) => candidate.id === toast.id)
-	);
+	const liveIndex = $derived(stackOrder.findIndex((candidate) => candidate.id === toast.id));
 	const height = $derived(ctx.heights.get(toast.id) ?? null);
 	// The height of the toasts in front, for a stack that shifts the ones behind.
 	const liveOffsetY = $derived.by(() => {
 		if (liveIndex <= 0) return 0;
 		let total = 0;
-		for (const candidate of manager.stackedToasts.slice(0, liveIndex)) {
+		for (const candidate of stackOrder.slice(0, liveIndex)) {
 			total += ctx.heights.get(candidate.id) ?? 0;
 		}
 		return total;
@@ -275,7 +280,7 @@ before it reaches the buttons in it. -->
 	data-toast-id={toast.id}
 	data-type={toast.type}
 	data-priority={toast.priority}
-	data-front={index === 0 || undefined}
+	data-front={(index === 0 && !isEnding && !toast.limited) || undefined}
 	data-anchored={Boolean(toast.anchor) || undefined}
 	data-limited={toast.limited || undefined}
 	data-expanded={ctx.expanded || undefined}