From dfda4decd0ba6bce3dbb3a0695f11a290eda2b03 Mon Sep 17 00:00:00 2001
From: Agustin Delgado <agustindariodelgado@gmail.com>
Date: Sat, 19 Sep 2026 16:00:55 -0300
Subject: [PATCH 1/4] feat: add Breadcrumbs, Separator and Avatar

Breadcrumbs is a nav landmark named Breadcrumb in six languages, with an ordered list that keeps its role in writing, aria-current on the current page, aria-hidden separators in the items, and a span for a link without an address or with disabled.

Separator is a role=separator line, vertical on request, or role=none when decorative.

Avatar loads the image off the screen and renders the img once it is there, shows the fallback at once for a failure or a missing source, and holds it back for a delay while the image loads.
---
 .changeset/avatar-v1.md                       |   5 +
 .changeset/breadcrumbs-v1.md                  |   5 +
 .changeset/separator-v1.md                    |   5 +
 docs/src/content/avatar/api.json              | 133 +++++++++++
 docs/src/content/avatar/demos/hero.svelte     |  31 +++
 docs/src/content/avatar/demos/status.svelte   |  32 +++
 docs/src/content/avatar/index.md              |  64 ++++++
 docs/src/content/breadcrumbs/api.json         | 206 ++++++++++++++++++
 .../content/breadcrumbs/demos/disabled.svelte |  33 +++
 .../src/content/breadcrumbs/demos/hero.svelte |  35 +++
 docs/src/content/breadcrumbs/index.md         |  82 +++++++
 docs/src/content/separator/api.json           |  53 +++++
 docs/src/content/separator/demos/hero.svelte  |  16 ++
 docs/src/content/separator/index.md           |  53 +++++
 docs/src/lib/docs/nav.ts                      |   3 +
 packages/ui/package.json                      |  15 ++
 packages/ui/src/lib/avatar/README.md          |  43 ++++
 packages/ui/src/lib/avatar/TODO.md            |  13 ++
 .../avatar/fallback/avatar-fallback.svelte    |  57 +++++
 .../src/lib/avatar/image/avatar-image.svelte  |  72 ++++++
 packages/ui/src/lib/avatar/index.parts.ts     |   3 +
 packages/ui/src/lib/avatar/index.ts           |  23 ++
 .../ui/src/lib/avatar/root/avatar-root.svelte |  53 +++++
 .../ui/src/lib/avatar/root/avatar-ssr.test.ts |  20 ++
 .../ui/src/lib/avatar/root/avatar-test.svelte |  28 +++
 .../ui/src/lib/avatar/root/avatar.test.ts     |  89 ++++++++
 packages/ui/src/lib/avatar/root/context.ts    |  27 +++
 packages/ui/src/lib/avatar/types.ts           |  46 ++++
 packages/ui/src/lib/breadcrumbs/README.md     |  59 +++++
 packages/ui/src/lib/breadcrumbs/TODO.md       |  13 ++
 .../ui/src/lib/breadcrumbs/index.parts.ts     |   5 +
 packages/ui/src/lib/breadcrumbs/index.ts      |  22 ++
 .../breadcrumbs/item/breadcrumbs-item.svelte  |  30 +++
 .../breadcrumbs/link/breadcrumbs-link.svelte  |  47 ++++
 .../breadcrumbs/list/breadcrumbs-list.svelte  |  31 +++
 .../breadcrumbs/root/breadcrumbs-root.svelte  |  47 ++++
 .../breadcrumbs/root/breadcrumbs-ssr.test.ts  |  16 ++
 .../breadcrumbs/root/breadcrumbs-test.svelte  |  39 ++++
 .../lib/breadcrumbs/root/breadcrumbs.test.ts  |  99 +++++++++
 .../separator/breadcrumbs-separator.svelte    |  35 +++
 packages/ui/src/lib/breadcrumbs/types.ts      |  67 ++++++
 packages/ui/src/lib/index.ts                  |   6 +
 .../ui/src/lib/internal/localized-strings.ts  |   8 +
 packages/ui/src/lib/separator/README.md       |  33 +++
 packages/ui/src/lib/separator/TODO.md         |  11 +
 packages/ui/src/lib/separator/index.ts        |   8 +
 .../src/lib/separator/separator-ssr.test.ts   |  20 ++
 .../src/lib/separator/separator-test.svelte   |  20 ++
 .../ui/src/lib/separator/separator.svelte     |  62 ++++++
 .../ui/src/lib/separator/separator.test.ts    |  59 +++++
 packages/ui/src/lib/separator/types.ts        |   1 +
 51 files changed, 1983 insertions(+)
 create mode 100644 .changeset/avatar-v1.md
 create mode 100644 .changeset/breadcrumbs-v1.md
 create mode 100644 .changeset/separator-v1.md
 create mode 100644 docs/src/content/avatar/api.json
 create mode 100644 docs/src/content/avatar/demos/hero.svelte
 create mode 100644 docs/src/content/avatar/demos/status.svelte
 create mode 100644 docs/src/content/avatar/index.md
 create mode 100644 docs/src/content/breadcrumbs/api.json
 create mode 100644 docs/src/content/breadcrumbs/demos/disabled.svelte
 create mode 100644 docs/src/content/breadcrumbs/demos/hero.svelte
 create mode 100644 docs/src/content/breadcrumbs/index.md
 create mode 100644 docs/src/content/separator/api.json
 create mode 100644 docs/src/content/separator/demos/hero.svelte
 create mode 100644 docs/src/content/separator/index.md
 create mode 100644 packages/ui/src/lib/avatar/README.md
 create mode 100644 packages/ui/src/lib/avatar/TODO.md
 create mode 100644 packages/ui/src/lib/avatar/fallback/avatar-fallback.svelte
 create mode 100644 packages/ui/src/lib/avatar/image/avatar-image.svelte
 create mode 100644 packages/ui/src/lib/avatar/index.parts.ts
 create mode 100644 packages/ui/src/lib/avatar/index.ts
 create mode 100644 packages/ui/src/lib/avatar/root/avatar-root.svelte
 create mode 100644 packages/ui/src/lib/avatar/root/avatar-ssr.test.ts
 create mode 100644 packages/ui/src/lib/avatar/root/avatar-test.svelte
 create mode 100644 packages/ui/src/lib/avatar/root/avatar.test.ts
 create mode 100644 packages/ui/src/lib/avatar/root/context.ts
 create mode 100644 packages/ui/src/lib/avatar/types.ts
 create mode 100644 packages/ui/src/lib/breadcrumbs/README.md
 create mode 100644 packages/ui/src/lib/breadcrumbs/TODO.md
 create mode 100644 packages/ui/src/lib/breadcrumbs/index.parts.ts
 create mode 100644 packages/ui/src/lib/breadcrumbs/index.ts
 create mode 100644 packages/ui/src/lib/breadcrumbs/item/breadcrumbs-item.svelte
 create mode 100644 packages/ui/src/lib/breadcrumbs/link/breadcrumbs-link.svelte
 create mode 100644 packages/ui/src/lib/breadcrumbs/list/breadcrumbs-list.svelte
 create mode 100644 packages/ui/src/lib/breadcrumbs/root/breadcrumbs-root.svelte
 create mode 100644 packages/ui/src/lib/breadcrumbs/root/breadcrumbs-ssr.test.ts
 create mode 100644 packages/ui/src/lib/breadcrumbs/root/breadcrumbs-test.svelte
 create mode 100644 packages/ui/src/lib/breadcrumbs/root/breadcrumbs.test.ts
 create mode 100644 packages/ui/src/lib/breadcrumbs/separator/breadcrumbs-separator.svelte
 create mode 100644 packages/ui/src/lib/breadcrumbs/types.ts
 create mode 100644 packages/ui/src/lib/separator/README.md
 create mode 100644 packages/ui/src/lib/separator/TODO.md
 create mode 100644 packages/ui/src/lib/separator/index.ts
 create mode 100644 packages/ui/src/lib/separator/separator-ssr.test.ts
 create mode 100644 packages/ui/src/lib/separator/separator-test.svelte
 create mode 100644 packages/ui/src/lib/separator/separator.svelte
 create mode 100644 packages/ui/src/lib/separator/separator.test.ts
 create mode 100644 packages/ui/src/lib/separator/types.ts

diff --git a/.changeset/avatar-v1.md b/.changeset/avatar-v1.md
new file mode 100644
index 00000000..44f5fff9
--- /dev/null
+++ b/.changeset/avatar-v1.md
@@ -0,0 +1,5 @@
+---
+'@human-kit/ui': minor
+---
+
+Add the Avatar primitive with `Root`, `Image` and `Fallback`. The image loads off the screen first, and the `<img>` renders once it is there, thus a broken image icon never shows. The fallback shows while the image is not on the screen, at once for a failure or a missing `src`, and after `delay` milliseconds while a slow image loads. The root has `data-status` and `onStatusChange` for `loading`, `loaded` and `error`.
diff --git a/.changeset/breadcrumbs-v1.md b/.changeset/breadcrumbs-v1.md
new file mode 100644
index 00000000..9c51279b
--- /dev/null
+++ b/.changeset/breadcrumbs-v1.md
@@ -0,0 +1,5 @@
+---
+'@human-kit/ui': minor
+---
+
+Add the Breadcrumbs primitive with `Root`, `List`, `Item`, `Link` and `Separator`. The root is a `<nav>` landmark named "Breadcrumb" in the locale of `LocaleProvider`, the list is an `<ol>` of `<li>`, and `current` gives the last link `aria-current="page"`. A link without an `href`, or with `disabled`, is a `<span>` out of the tab order. The separator is `aria-hidden`, in the item after the link, thus the list holds pages only.
diff --git a/.changeset/separator-v1.md b/.changeset/separator-v1.md
new file mode 100644
index 00000000..859af00a
--- /dev/null
+++ b/.changeset/separator-v1.md
@@ -0,0 +1,5 @@
+---
+'@human-kit/ui': minor
+---
+
+Add the Separator primitive: a `role="separator"` line with `aria-orientation="vertical"` for a vertical one, and `role="none"` with `decorative` for a line the content already makes.
diff --git a/docs/src/content/avatar/api.json b/docs/src/content/avatar/api.json
new file mode 100644
index 00000000..655213a5
--- /dev/null
+++ b/docs/src/content/avatar/api.json
@@ -0,0 +1,133 @@
+{
+	"component": "avatar",
+	"parts": [
+		{
+			"name": "Root",
+			"description": "The picture and its fallback. It holds the status of the image, and it has no role of its own.",
+			"props": [
+				{
+					"name": "children",
+					"type": "Snippet",
+					"required": false,
+					"default": null,
+					"description": "`Avatar.Image` and `Avatar.Fallback`."
+				},
+				{
+					"name": "class",
+					"type": "string",
+					"required": false,
+					"default": "''",
+					"description": "The CSS class names of the element."
+				},
+				{
+					"name": "element",
+					"type": "HTMLSpanElement | null",
+					"required": false,
+					"default": "null",
+					"description": "The root element. Use `bind:element` to read it."
+				},
+				{
+					"name": "onStatusChange",
+					"type": "(status: AvatarStatus) => void",
+					"required": false,
+					"default": null,
+					"description": "Called when the image starts to load, loads, or fails."
+				}
+			],
+			"dataAttributes": [
+				{
+					"name": "data-avatar-root",
+					"description": "Present on the element."
+				},
+				{
+					"name": "data-status",
+					"description": "`loading`, `loaded` or `error`."
+				}
+			]
+		},
+		{
+			"name": "Image",
+			"description": "The picture. It loads the image off the screen first, and it renders the `<img>` once the image is there.",
+			"props": [
+				{
+					"name": "src",
+					"type": "string | null",
+					"required": false,
+					"default": null,
+					"description": "The address of the image. Without it, the fallback shows."
+				},
+				{
+					"name": "alt",
+					"type": "string",
+					"required": true,
+					"default": null,
+					"description": "The text in place of the image. Give the name of the person or the thing. Give an empty\nstring when the name is beside the avatar already, thus a screen reader does not read it\ntwice."
+				},
+				{
+					"name": "class",
+					"type": "string",
+					"required": false,
+					"default": "''",
+					"description": "The CSS class names of the element."
+				},
+				{
+					"name": "element",
+					"type": "HTMLImageElement | null",
+					"required": false,
+					"default": "null",
+					"description": "The image element, once the image is on the screen. Use `bind:element` to read it."
+				}
+			],
+			"dataAttributes": [
+				{
+					"name": "data-avatar-image",
+					"description": "Present on the element."
+				}
+			]
+		},
+		{
+			"name": "Fallback",
+			"description": "What shows in place of the image, while the image is not on the screen. `delay` holds it back while the image loads.",
+			"props": [
+				{
+					"name": "children",
+					"type": "Snippet",
+					"required": false,
+					"default": null,
+					"description": "The content in place of the image, such as initials or an icon."
+				},
+				{
+					"name": "class",
+					"type": "string",
+					"required": false,
+					"default": "''",
+					"description": "The CSS class names of the element."
+				},
+				{
+					"name": "delay",
+					"type": "number",
+					"required": false,
+					"default": "0",
+					"description": "The time in milliseconds before the fallback shows while the image loads. A fallback that\nflashes before a fast image is noise: 300 or 600 hides it on a good connection. It shows at\nonce when the image fails, or when there is no image."
+				},
+				{
+					"name": "element",
+					"type": "HTMLSpanElement | null",
+					"required": false,
+					"default": "null",
+					"description": "The fallback element, while it is on the screen. Use `bind:element` to read it."
+				}
+			],
+			"dataAttributes": [
+				{
+					"name": "data-avatar-fallback",
+					"description": "Present on the element."
+				},
+				{
+					"name": "data-status",
+					"description": "`loading` or `error`: the fallback is not on the screen while the image is."
+				}
+			]
+		}
+	]
+}
diff --git a/docs/src/content/avatar/demos/hero.svelte b/docs/src/content/avatar/demos/hero.svelte
new file mode 100644
index 00000000..1e58b413
--- /dev/null
+++ b/docs/src/content/avatar/demos/hero.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { Avatar } from '@human-kit/ui';
+
+	// A drawn portrait, thus the demo needs no file and no person.
+	const portrait =
+		'data:image/svg+xml;utf8,' +
+		encodeURIComponent(
+			'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80"><rect width="80" height="80" fill="#c7d2fe"/><circle cx="40" cy="32" r="14" fill="#4338ca"/><path d="M12 80c0-16 12-26 28-26s28 10 28 26z" fill="#4338ca"/></svg>'
+		);
+
+	const rootClass =
+		'inline-flex size-12 items-center justify-center overflow-hidden rounded-full bg-neutral-200 align-middle dark:bg-neutral-800';
+	const fallbackClass = 'text-sm font-medium text-neutral-700 dark:text-neutral-200';
+</script>
+
+<div class="flex items-center gap-4">
+	<Avatar.Root class={rootClass}>
+		<Avatar.Image src={portrait} alt="Ada Lovelace" class="size-full object-cover" />
+		<Avatar.Fallback delay={600} class={fallbackClass}>AL</Avatar.Fallback>
+	</Avatar.Root>
+
+	<Avatar.Root class={rootClass}>
+		<Avatar.Image src="/no-such-portrait.jpg" alt="Grace Hopper" class="size-full object-cover" />
+		<Avatar.Fallback class={fallbackClass}>GH</Avatar.Fallback>
+	</Avatar.Root>
+
+	<Avatar.Root class={rootClass}>
+		<Avatar.Image src={null} alt="Katherine Johnson" />
+		<Avatar.Fallback class={fallbackClass}>KJ</Avatar.Fallback>
+	</Avatar.Root>
+</div>
diff --git a/docs/src/content/avatar/demos/status.svelte b/docs/src/content/avatar/demos/status.svelte
new file mode 100644
index 00000000..3a486122
--- /dev/null
+++ b/docs/src/content/avatar/demos/status.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { Avatar, type AvatarStatus } from '@human-kit/ui';
+
+	const portrait =
+		'data:image/svg+xml;utf8,' +
+		encodeURIComponent(
+			'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80"><rect width="80" height="80" fill="#fde68a"/><circle cx="40" cy="32" r="14" fill="#b45309"/><path d="M12 80c0-16 12-26 28-26s28 10 28 26z" fill="#b45309"/></svg>'
+		);
+
+	let status = $state<AvatarStatus>('loading');
+	let src = $state<string | null>(portrait);
+
+	const buttonClass =
+		'border border-neutral-300 px-3 py-1 hover:bg-neutral-100 dark:border-neutral-700 dark:hover:bg-neutral-800';
+</script>
+
+<div class="flex flex-wrap items-center gap-4 text-sm text-neutral-900 dark:text-white">
+	<Avatar.Root
+		class="inline-flex size-12 items-center justify-center overflow-hidden rounded-full bg-neutral-200 align-middle data-[status=error]:bg-red-100 dark:bg-neutral-800 dark:data-[status=error]:bg-red-950"
+		onStatusChange={(next) => (status = next)}
+	>
+		<Avatar.Image {src} alt="Mary Jackson" class="size-full object-cover" />
+		<Avatar.Fallback delay={600} class="font-medium text-neutral-700 dark:text-neutral-200">
+			MJ
+		</Avatar.Fallback>
+	</Avatar.Root>
+	<span class="w-28 tabular-nums">status: {status}</span>
+	<button type="button" class={buttonClass} onclick={() => (src = portrait)}>Good source</button>
+	<button type="button" class={buttonClass} onclick={() => (src = '/no-such-portrait.jpg')}>
+		Bad source
+	</button>
+</div>
diff --git a/docs/src/content/avatar/index.md b/docs/src/content/avatar/index.md
new file mode 100644
index 00000000..1e1fe69e
--- /dev/null
+++ b/docs/src/content/avatar/index.md
@@ -0,0 +1,64 @@
+---
+title: Avatar
+description: A picture of a person or a thing, with a fallback for when the picture is not there, which never shows a broken image and holds the fallback back while a fast image loads.
+---
+
+<script>
+	import { Demo, ApiReference } from '$lib/docs/components/index.js';
+	import Hero from './demos/hero.svelte';
+	import heroSource from './demos/hero.svelte?highlight';
+	import Status from './demos/status.svelte';
+	import statusSource from './demos/status.svelte?highlight';
+	import api from './api.json';
+</script>
+
+# Avatar
+
+`Avatar` is a picture of a person or a thing, with a fallback for when the picture is not there. The image loads off the screen first, and it shows once it is there: a broken image icon never shows. The fallback shows in its place, at once or after a delay.
+
+<Demo source={heroSource}><Hero /></Demo>
+
+## Anatomy
+
+`Avatar.Root` holds the status of the image. `Avatar.Image` is the picture, and `Avatar.Fallback` is what shows in its place: initials, an icon, a color.
+
+```svelte
+<script>
+	import { Avatar } from '@human-kit/ui';
+</script>
+
+<Avatar.Root class="size-10 overflow-hidden rounded-full">
+	<Avatar.Image src="/ada.jpg" alt="Ada Lovelace" />
+	<Avatar.Fallback delay={600}>AL</Avatar.Fallback>
+</Avatar.Root>
+```
+
+## The image
+
+`Avatar.Image` loads the image off the screen, and it renders the `<img>` once the image is there. Without a `src`, or when the image fails, the `<img>` never renders and the fallback shows. A new `src` starts a new load.
+
+## The fallback
+
+`Avatar.Fallback` shows while the image is not on the screen. Give `delay` in milliseconds to hold it back while the image loads. A fallback that flashes before a fast image is noise, and 600 hides it on a good connection. It shows at once when the image fails, or when there is no image.
+
+## Status
+
+The root has `data-status` for your styles: `loading`, `loaded` or `error`. `onStatusChange` gives the same to your code.
+
+<Demo source={statusSource}><Status /></Demo>
+
+## Usage guidelines
+
+- Give `alt` the name of the person or the thing. Give an empty `alt` when the name is beside the avatar already, thus a screen reader does not read it twice. Hide a fallback of initials with `aria-hidden="true"` in that case.
+- Give the root a size and `overflow: hidden`, and the image `object-fit: cover`.
+- Give `delay` to the fallback on a list of avatars: a list that flashes initials is noise.
+
+## Accessibility
+
+- The image is an `<img>` with your `alt`. The root has no role of its own.
+- The fallback is plain content. A screen reader reads it as text, and initials read as letters. A name in `alt` on the image reads better. So does `aria-hidden` on initials beside a visible name.
+- Nothing in the avatar is focusable.
+
+## API reference
+
+<ApiReference api={api} />
diff --git a/docs/src/content/breadcrumbs/api.json b/docs/src/content/breadcrumbs/api.json
new file mode 100644
index 00000000..80c4562b
--- /dev/null
+++ b/docs/src/content/breadcrumbs/api.json
@@ -0,0 +1,206 @@
+{
+	"component": "breadcrumbs",
+	"parts": [
+		{
+			"name": "Root",
+			"description": "The `<nav>` landmark, named \"Breadcrumb\" in the locale of `LocaleProvider`.",
+			"props": [
+				{
+					"name": "children",
+					"type": "Snippet",
+					"required": false,
+					"default": null,
+					"description": "`Breadcrumbs.List`."
+				},
+				{
+					"name": "class",
+					"type": "string",
+					"required": false,
+					"default": "''",
+					"description": "The CSS class names of the element."
+				},
+				{
+					"name": "aria-label",
+					"type": "string",
+					"required": false,
+					"default": null,
+					"description": "The name of the landmark. Without it, the name is \"Breadcrumb\" in the locale of\n`LocaleProvider`. Give one when the page has two sets of breadcrumbs."
+				},
+				{
+					"name": "element",
+					"type": "HTMLElement | null",
+					"required": false,
+					"default": "null",
+					"description": "The `<nav>` element. Use `bind:element` to read it."
+				}
+			],
+			"dataAttributes": [
+				{
+					"name": "data-breadcrumbs-root",
+					"description": "Present on the element."
+				}
+			]
+		},
+		{
+			"name": "List",
+			"description": "The `<ol>` of the trail, with `role=\"list\"` in writing. The order of the items is the order of the pages.",
+			"props": [
+				{
+					"name": "children",
+					"type": "Snippet",
+					"required": false,
+					"default": null,
+					"description": "The items."
+				},
+				{
+					"name": "class",
+					"type": "string",
+					"required": false,
+					"default": "''",
+					"description": "The CSS class names of the element."
+				},
+				{
+					"name": "element",
+					"type": "HTMLOListElement | null",
+					"required": false,
+					"default": "null",
+					"description": "The `<ol>` element. Use `bind:element` to read it."
+				}
+			],
+			"dataAttributes": [
+				{
+					"name": "data-breadcrumbs-list",
+					"description": "Present on the element."
+				}
+			]
+		},
+		{
+			"name": "Item",
+			"description": "One page of the trail, as an `<li>`. It holds a link, and a separator after the link on every item but the last.",
+			"props": [
+				{
+					"name": "children",
+					"type": "Snippet",
+					"required": false,
+					"default": null,
+					"description": "`Breadcrumbs.Link`, and a `Breadcrumbs.Separator` after it."
+				},
+				{
+					"name": "class",
+					"type": "string",
+					"required": false,
+					"default": "''",
+					"description": "The CSS class names of the element."
+				},
+				{
+					"name": "element",
+					"type": "HTMLLIElement | null",
+					"required": false,
+					"default": "null",
+					"description": "The `<li>` element. Use `bind:element` to read it."
+				}
+			],
+			"dataAttributes": [
+				{
+					"name": "data-breadcrumbs-item",
+					"description": "Present on the element."
+				}
+			]
+		},
+		{
+			"name": "Link",
+			"description": "The page, as an `<a>` with an `href`, or a `<span>` without one. `current` marks the page the user is on.",
+			"props": [
+				{
+					"name": "children",
+					"type": "Snippet",
+					"required": false,
+					"default": null,
+					"description": "The text of the link."
+				},
+				{
+					"name": "class",
+					"type": "string",
+					"required": false,
+					"default": "''",
+					"description": "The CSS class names of the element."
+				},
+				{
+					"name": "href",
+					"type": "string",
+					"required": false,
+					"default": null,
+					"description": "The address of the page. Without it, the link is plain text."
+				},
+				{
+					"name": "current",
+					"type": "boolean",
+					"required": false,
+					"default": "false",
+					"description": "Marks the page the user is on. The link gets `aria-current=\"page\"`. Set it on the last\nitem: a screen reader user then knows where the trail ends."
+				},
+				{
+					"name": "disabled",
+					"type": "boolean",
+					"required": false,
+					"default": "false",
+					"description": "Takes the link out of use: it keeps its text, and it loses its `href` and its tab stop."
+				},
+				{
+					"name": "element",
+					"type": "HTMLAnchorElement | HTMLSpanElement | null",
+					"required": false,
+					"default": "null",
+					"description": "The `<a>` element, or the `<span>` without an `href`. Use `bind:element` to read it."
+				}
+			],
+			"dataAttributes": [
+				{
+					"name": "data-breadcrumbs-link",
+					"description": "Present on the element."
+				},
+				{
+					"name": "data-current",
+					"description": "Present on the link of the page the user is on."
+				},
+				{
+					"name": "data-disabled",
+					"description": "Present on a disabled link."
+				}
+			]
+		},
+		{
+			"name": "Separator",
+			"description": "The sign between two pages, hidden from the screen reader. A slash without children.",
+			"props": [
+				{
+					"name": "children",
+					"type": "Snippet",
+					"required": false,
+					"default": null,
+					"description": "The sign between two items. A slash without children."
+				},
+				{
+					"name": "class",
+					"type": "string",
+					"required": false,
+					"default": "''",
+					"description": "The CSS class names of the element."
+				},
+				{
+					"name": "element",
+					"type": "HTMLSpanElement | null",
+					"required": false,
+					"default": "null",
+					"description": "The `<span>` element. Use `bind:element` to read it."
+				}
+			],
+			"dataAttributes": [
+				{
+					"name": "data-breadcrumbs-separator",
+					"description": "Present on the element."
+				}
+			]
+		}
+	]
+}
diff --git a/docs/src/content/breadcrumbs/demos/disabled.svelte b/docs/src/content/breadcrumbs/demos/disabled.svelte
new file mode 100644
index 00000000..35c78368
--- /dev/null
+++ b/docs/src/content/breadcrumbs/demos/disabled.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { Breadcrumbs } from '@human-kit/ui';
+
+	const linkClass =
+		'rounded-sm text-neutral-600 outline-none hover:text-neutral-900 focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 data-[current=true]:font-medium data-[current=true]:text-neutral-900 data-[disabled=true]:text-neutral-400 dark:text-neutral-400 dark:hover:text-white dark:focus-visible:outline-white dark:data-[current=true]:text-white dark:data-[disabled=true]:text-neutral-600';
+</script>
+
+<Breadcrumbs.Root aria-label="Folder">
+	<Breadcrumbs.List class="flex list-none flex-wrap items-center gap-1.5 p-0 text-sm">
+		<Breadcrumbs.Item class="flex items-center gap-1.5">
+			<Breadcrumbs.Link href="/files" class={linkClass} onclick={(event) => event.preventDefault()}>
+				Files
+			</Breadcrumbs.Link>
+			<Breadcrumbs.Separator class="text-neutral-400" />
+		</Breadcrumbs.Item>
+		<Breadcrumbs.Item class="flex items-center gap-1.5">
+			<Breadcrumbs.Link href="/files/shared" disabled class={linkClass}
+				>Shared with me</Breadcrumbs.Link
+			>
+			<Breadcrumbs.Separator class="text-neutral-400" />
+		</Breadcrumbs.Item>
+		<Breadcrumbs.Item>
+			<Breadcrumbs.Link
+				href="/files/shared/q3"
+				current
+				class={linkClass}
+				onclick={(event) => event.preventDefault()}
+			>
+				Q3 report
+			</Breadcrumbs.Link>
+		</Breadcrumbs.Item>
+	</Breadcrumbs.List>
+</Breadcrumbs.Root>
diff --git a/docs/src/content/breadcrumbs/demos/hero.svelte b/docs/src/content/breadcrumbs/demos/hero.svelte
new file mode 100644
index 00000000..d9459880
--- /dev/null
+++ b/docs/src/content/breadcrumbs/demos/hero.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+	import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
+	import { Breadcrumbs } from '@human-kit/ui';
+
+	const pages = [
+		{ href: '/', title: 'Home' },
+		{ href: '/docs', title: 'Docs' },
+		{ href: '/docs/components', title: 'Components' }
+	];
+
+	const linkClass =
+		'rounded-sm text-neutral-600 outline-none hover:text-neutral-900 focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 data-[current=true]:font-medium data-[current=true]:text-neutral-900 dark:text-neutral-400 dark:hover:text-white dark:focus-visible:outline-white dark:data-[current=true]:text-white';
+</script>
+
+<Breadcrumbs.Root>
+	<Breadcrumbs.List class="flex list-none flex-wrap items-center gap-1.5 p-0 text-sm">
+		{#each pages as page (page.href)}
+			<Breadcrumbs.Item class="flex items-center gap-1.5">
+				<Breadcrumbs.Link
+					href={page.href}
+					class={linkClass}
+					onclick={(event) => event.preventDefault()}
+				>
+					{page.title}
+				</Breadcrumbs.Link>
+				<Breadcrumbs.Separator class="text-neutral-400">
+					<ChevronRightIcon class="size-3.5" />
+				</Breadcrumbs.Separator>
+			</Breadcrumbs.Item>
+		{/each}
+		<Breadcrumbs.Item>
+			<Breadcrumbs.Link current class={linkClass}>Breadcrumbs</Breadcrumbs.Link>
+		</Breadcrumbs.Item>
+	</Breadcrumbs.List>
+</Breadcrumbs.Root>
diff --git a/docs/src/content/breadcrumbs/index.md b/docs/src/content/breadcrumbs/index.md
new file mode 100644
index 00000000..64717b89
--- /dev/null
+++ b/docs/src/content/breadcrumbs/index.md
@@ -0,0 +1,82 @@
+---
+title: Breadcrumbs
+description: The trail of pages above the one the user is on, as a nav landmark with an ordered list of links, the current page marked for the screen reader, and separators it does not read.
+---
+
+<script>
+	import { Demo, ApiReference } from '$lib/docs/components/index.js';
+	import Hero from './demos/hero.svelte';
+	import heroSource from './demos/hero.svelte?highlight';
+	import Disabled from './demos/disabled.svelte';
+	import disabledSource from './demos/disabled.svelte?highlight';
+	import api from './api.json';
+</script>
+
+# Breadcrumbs
+
+`Breadcrumbs` is the trail of pages above the one the user is on. It is a `<nav>` landmark named "Breadcrumb" with an ordered list of links, and the last one says it is the current page.
+
+<Demo source={heroSource}><Hero /></Demo>
+
+## Anatomy
+
+`Breadcrumbs.Root` is the `<nav>` landmark. `Breadcrumbs.List` is the `<ol>`, and each `Breadcrumbs.Item` is an `<li>` with a `Breadcrumbs.Link` in it. `Breadcrumbs.Separator` is the sign after a link, in the item.
+
+```svelte
+<script>
+	import { Breadcrumbs } from '@human-kit/ui';
+</script>
+
+<Breadcrumbs.Root>
+	<Breadcrumbs.List>
+		<Breadcrumbs.Item>
+			<Breadcrumbs.Link href="/">Home</Breadcrumbs.Link>
+			<Breadcrumbs.Separator />
+		</Breadcrumbs.Item>
+		<Breadcrumbs.Item>
+			<Breadcrumbs.Link href="/docs">Docs</Breadcrumbs.Link>
+			<Breadcrumbs.Separator />
+		</Breadcrumbs.Item>
+		<Breadcrumbs.Item>
+			<Breadcrumbs.Link current>Breadcrumbs</Breadcrumbs.Link>
+		</Breadcrumbs.Item>
+	</Breadcrumbs.List>
+</Breadcrumbs.Root>
+```
+
+## The current page
+
+Give `current` to the last link. It gets `aria-current="page"`, and `data-current` for your styles. It can keep its `href`: a link to the page the user is on is a way to reload it. Without an `href`, the link is a `<span>`: plain text, and not a tab stop.
+
+## The separator
+
+`Breadcrumbs.Separator` renders a slash without children, or your own sign. It is `aria-hidden`: the list already separates the items, and a slash read aloud between each two is noise. Put it in the item, after the link, on every item but the last. The list then holds pages only, and the count a screen reader says is the count of pages.
+
+## A disabled link
+
+`disabled` takes the `href` away from a link. The text stays, with `aria-disabled` and `data-disabled`, and the link is out of the tab order on its own. Use it for a page the user cannot open now.
+
+<Demo source={disabledSource}><Disabled /></Demo>
+
+## The name
+
+The landmark is named "Breadcrumb", in the locale of `LocaleProvider`. Give `aria-label` for a name of your own, and always when the page has two sets of breadcrumbs. Two landmarks with one name are one to the screen reader.
+
+## Usage guidelines
+
+- Put the trail near the top of the page, before the main content.
+- Keep the page the user is on as the last item. A trail without its end leaves the user to guess where they are.
+- Keep the separator out of the last item.
+- Use `disabled` and not a missing `href` for a page that exists and is out of reach now: the reader then knows the difference.
+
+## Accessibility
+
+- `Breadcrumbs.Root` is a `<nav>` with `aria-label="Breadcrumb"`, in the locale of `LocaleProvider`. A screen reader user finds it in the list of landmarks, apart from the main navigation.
+- `Breadcrumbs.List` is an `<ol>` of `<li>`: a screen reader says the count and the position of each page. It has `role="list"` in writing, for the browsers that drop a list with `list-style: none`.
+- `Breadcrumbs.Link` with `current` has `aria-current="page"`. Without an `href`, or with `disabled`, it is a `<span>`: not a link, and not a tab stop.
+- `Breadcrumbs.Separator` is `aria-hidden`.
+- The keyboard moves through the links with `Tab`. Breadcrumbs are links on a page, not a widget with arrow keys.
+
+## API reference
+
+<ApiReference api={api} />
diff --git a/docs/src/content/separator/api.json b/docs/src/content/separator/api.json
new file mode 100644
index 00000000..3ea93e3f
--- /dev/null
+++ b/docs/src/content/separator/api.json
@@ -0,0 +1,53 @@
+{
+	"component": "separator",
+	"parts": [
+		{
+			"name": "Root",
+			"description": "A line between two groups of content. It is a `role=\"separator\"` element, or `role=\"none\"` when decorative. Give it a size with CSS.",
+			"props": [
+				{
+					"name": "orientation",
+					"type": "SeparatorOrientation",
+					"required": false,
+					"default": "'horizontal'",
+					"description": "The direction of the line. A horizontal separator sits between two blocks, one above the\nother. A vertical one sits between two items side by side, such as in a toolbar."
+				},
+				{
+					"name": "decorative",
+					"type": "boolean",
+					"required": false,
+					"default": "false",
+					"description": "Makes the separator a visual line only. A screen reader then skips it. Use it for a line\nthat repeats a break the content already makes, such as a border between two sections\nwith headings. Without it, the separator is a `role=\"separator\"` element, which a screen\nreader reads as a break between two groups of content."
+				},
+				{
+					"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 separator element. Use `bind:element` to read it."
+				}
+			],
+			"dataAttributes": [
+				{
+					"name": "data-decorative",
+					"description": "Present when the separator is decorative."
+				},
+				{
+					"name": "data-orientation",
+					"description": "`horizontal` or `vertical`."
+				},
+				{
+					"name": "data-separator-root",
+					"description": "Present on the element."
+				}
+			]
+		}
+	]
+}
diff --git a/docs/src/content/separator/demos/hero.svelte b/docs/src/content/separator/demos/hero.svelte
new file mode 100644
index 00000000..d55e661b
--- /dev/null
+++ b/docs/src/content/separator/demos/hero.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Separator } from '@human-kit/ui';
+</script>
+
+<div class="flex w-72 flex-col gap-4 text-sm text-neutral-900 dark:text-white">
+	<p>An account for the whole team, with one bill.</p>
+	<Separator class="h-px w-full bg-neutral-200 dark:bg-neutral-800" />
+	<p>Each member keeps a workspace of their own.</p>
+	<div class="flex h-5 items-center gap-3">
+		<span>Edit</span>
+		<Separator orientation="vertical" class="h-full w-px bg-neutral-200 dark:bg-neutral-800" />
+		<span>Share</span>
+		<Separator orientation="vertical" class="h-full w-px bg-neutral-200 dark:bg-neutral-800" />
+		<span>Delete</span>
+	</div>
+</div>
diff --git a/docs/src/content/separator/index.md b/docs/src/content/separator/index.md
new file mode 100644
index 00000000..1930b902
--- /dev/null
+++ b/docs/src/content/separator/index.md
@@ -0,0 +1,53 @@
+---
+title: Separator
+description: A line between two groups of content, which a screen reader reads as a break, horizontal or vertical, or decorative and skipped.
+---
+
+<script>
+	import { Demo, ApiReference } from '$lib/docs/components/index.js';
+	import Hero from './demos/hero.svelte';
+	import heroSource from './demos/hero.svelte?highlight';
+	import api from './api.json';
+</script>
+
+# Separator
+
+`Separator` is a line between two groups of content. A screen reader reads it as a break, the same as a native `<hr>`. It has no size of its own: give it a border or a background, and a width or a height.
+
+<Demo source={heroSource}><Hero /></Demo>
+
+## Anatomy
+
+The component has one part. It renders a `<div>` with `role="separator"`.
+
+```svelte
+<script>
+	import { Separator } from '@human-kit/ui';
+</script>
+
+<Separator class="h-px w-full bg-neutral-200" />
+```
+
+## Orientation
+
+A separator is horizontal by default: it sits between two blocks, one above the other. Give `orientation="vertical"` for a line between two items side by side, such as in a toolbar. The element then has `aria-orientation="vertical"`, and `data-orientation` is on it for your styles in both cases.
+
+## Decorative
+
+Some lines repeat a break the content already makes, such as a border between two sections with headings. A screen reader would read two breaks. Give `decorative` to such a line: it becomes `role="none"`, and the screen reader skips it.
+
+## Usage guidelines
+
+- Give the line a size with CSS: a height and a width, or a border.
+- Use `decorative` when the content around the line already tells the reader where one group ends.
+- A separator that the user moves, such as a window splitter, is a different pattern. This one is not focusable.
+
+## Accessibility
+
+- The element is `role="separator"`. A vertical one has `aria-orientation="vertical"`: a separator is horizontal unless it says otherwise.
+- `decorative` makes it `role="none"`, out of the accessibility tree.
+- It has no tab stop.
+
+## API reference
+
+<ApiReference api={api} />
diff --git a/docs/src/lib/docs/nav.ts b/docs/src/lib/docs/nav.ts
index fbf75799..130f45b7 100644
--- a/docs/src/lib/docs/nav.ts
+++ b/docs/src/lib/docs/nav.ts
@@ -63,8 +63,11 @@ export const nav: NavGroup[] = [
 		label: 'Structure',
 		items: [
 			{ slug: 'accordion', title: 'Accordion' },
+			{ slug: 'avatar', title: 'Avatar' },
+			{ slug: 'breadcrumbs', title: 'Breadcrumbs' },
 			{ slug: 'collapsible', title: 'Collapsible' },
 			{ slug: 'progress', title: 'Progress' },
+			{ slug: 'separator', title: 'Separator' },
 			{ slug: 'table', title: 'Table' },
 			{ slug: 'tabs', title: 'Tabs' },
 			{ slug: 'tree', title: 'Tree' }
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 48d083bb..21b4257e 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -203,6 +203,21 @@
 			"svelte": "./dist/tree/index.js",
 			"default": "./dist/tree/index.js"
 		},
+		"./avatar": {
+			"types": "./dist/avatar/index.d.ts",
+			"svelte": "./dist/avatar/index.js",
+			"default": "./dist/avatar/index.js"
+		},
+		"./breadcrumbs": {
+			"types": "./dist/breadcrumbs/index.d.ts",
+			"svelte": "./dist/breadcrumbs/index.js",
+			"default": "./dist/breadcrumbs/index.js"
+		},
+		"./separator": {
+			"types": "./dist/separator/index.d.ts",
+			"svelte": "./dist/separator/index.js",
+			"default": "./dist/separator/index.js"
+		},
 		"./input": {
 			"types": "./dist/input/index.d.ts",
 			"svelte": "./dist/input/index.js",
diff --git a/packages/ui/src/lib/avatar/README.md b/packages/ui/src/lib/avatar/README.md
new file mode 100644
index 00000000..965fe33f
--- /dev/null
+++ b/packages/ui/src/lib/avatar/README.md
@@ -0,0 +1,43 @@
+# Avatar
+
+## Description
+
+`Avatar` is a picture of a person or a thing, with a fallback for when the picture is not there. The image loads off the screen first, and it shows once it is there: a broken image icon never shows. The fallback shows in its place, at once or after a delay.
+
+## Anatomy
+
+- `Avatar.Root`
+- `Avatar.Image`
+- `Avatar.Fallback`
+
+```svelte
+<Avatar.Root class="size-10 rounded-full">
+	<Avatar.Image src="/ada.jpg" alt="Ada Lovelace" />
+	<Avatar.Fallback delay={600}>AL</Avatar.Fallback>
+</Avatar.Root>
+```
+
+## Usage guidelines
+
+- Give `alt` the name of the person or the thing. Give an empty `alt` when the name is beside the avatar already, and hide a fallback of initials with `aria-hidden="true"` in that case.
+- Give `delay` to the fallback, such as 600, thus a fast image does not flash initials first.
+- Style the root by `data-status`: `loading`, `loaded` or `error`.
+- Read the status with `onStatusChange` on the root.
+
+## API reference
+
+- `Avatar.Root`
+  - `onStatusChange?: (status: 'loading' | 'loaded' | 'error') => void`
+  - `element?: HTMLSpanElement | null` (bindable)
+- `Avatar.Image`
+  - `src?: string | null`, `alt: string`
+  - `element?: HTMLImageElement | null` (bindable)
+- `Avatar.Fallback`
+  - `delay?: number` (`0`)
+  - `element?: HTMLSpanElement | null` (bindable)
+
+## Accessibility
+
+- The image is an `<img>` with your `alt`. The root has no role of its own.
+- The fallback is plain content. A screen reader reads it as text, and initials read as letters. A name in `alt` on the image reads better. So does `aria-hidden` on initials beside a visible name.
+- Nothing in the avatar is focusable.
diff --git a/packages/ui/src/lib/avatar/TODO.md b/packages/ui/src/lib/avatar/TODO.md
new file mode 100644
index 00000000..c0145b08
--- /dev/null
+++ b/packages/ui/src/lib/avatar/TODO.md
@@ -0,0 +1,13 @@
+# Avatar TODO
+
+## Goal
+
+Track Avatar work with a single mandatory TODO format.
+
+## Backlog
+
+- [x] [M][P0][Area: Architecture][Owner: Unassigned][Target: Done] Create the `root`, `image` and `fallback` parts with namespace exports and a shared status.
+- [x] [S][P0][Area: State][Owner: Unassigned][Target: Done] Load the image off the screen, show the `<img>` once it is there, and show the fallback at once for a failure or a missing `src`.
+- [x] [S][P1][Area: UX][Owner: Unassigned][Target: Done] Hold the fallback back for `delay` milliseconds while the image loads.
+- [x] [M][P0][Area: Testing][Owner: Unassigned][Target: Done] Add coverage for the load, the failure, the missing source, the delay, a change of source, `onStatusChange`, and SSR.
+- [ ] [S][P2][Area: API][Owner: Unassigned][Target: Backlog] Add an `Avatar.Group` for a row of avatars that overlap, with a count of the rest.
diff --git a/packages/ui/src/lib/avatar/fallback/avatar-fallback.svelte b/packages/ui/src/lib/avatar/fallback/avatar-fallback.svelte
new file mode 100644
index 00000000..d19dca5e
--- /dev/null
+++ b/packages/ui/src/lib/avatar/fallback/avatar-fallback.svelte
@@ -0,0 +1,57 @@
+<script lang="ts">
+	import type { AvatarFallbackProps } from '../types.js';
+	import { useAvatarContext } from '../root/context';
+
+	/**
+	 * Avatar.Fallback — what shows in place of the image: initials, an icon, a color.
+	 *
+	 * It shows while the image is not on the screen. `delay` holds it back while the image
+	 * loads, thus a fast image does not flash a fallback first. It shows at once when the image
+	 * fails, or when there is no image.
+	 */
+	let {
+		children,
+		class: className = '',
+		delay = 0,
+		element = $bindable<HTMLSpanElement | null>(null),
+		...restProps
+	}: AvatarFallbackProps = $props();
+
+	const avatar = useAvatarContext('Avatar.Fallback');
+
+	let fallbackRef: HTMLSpanElement | null = $state(null);
+	// True once `delay` has passed since the load started. It resets with each load.
+	let delayPassed = $state(false);
+
+	$effect(() => {
+		element = fallbackRef;
+		return () => {
+			element = null;
+		};
+	});
+
+	$effect(() => {
+		if (avatar.status !== 'loading' || delay <= 0) return;
+		delayPassed = false;
+		const timer = setTimeout(() => {
+			delayPassed = true;
+		}, delay);
+		return () => clearTimeout(timer);
+	});
+
+	const shown = $derived(
+		avatar.status === 'error' || (avatar.status === 'loading' && (delay <= 0 || delayPassed))
+	);
+</script>
+
+{#if shown}
+	<span
+		{...restProps}
+		bind:this={fallbackRef}
+		class={className}
+		data-avatar-fallback="true"
+		data-status={avatar.status}
+	>
+		{@render children?.()}
+	</span>
+{/if}
diff --git a/packages/ui/src/lib/avatar/image/avatar-image.svelte b/packages/ui/src/lib/avatar/image/avatar-image.svelte
new file mode 100644
index 00000000..1c5eb31f
--- /dev/null
+++ b/packages/ui/src/lib/avatar/image/avatar-image.svelte
@@ -0,0 +1,72 @@
+<script lang="ts">
+	import { untrack } from 'svelte';
+	import type { AvatarImageProps } from '../types.js';
+	import { useAvatarContext } from '../root/context';
+
+	/**
+	 * Avatar.Image — the picture.
+	 *
+	 * It loads the image off the screen first, and it renders the `<img>` once the image is
+	 * there: a broken image icon, or a blank box, never shows. Without a `src`, or when the
+	 * image fails, the status is `error` and `Avatar.Fallback` shows in its place.
+	 */
+	let {
+		src,
+		alt,
+		class: className = '',
+		element = $bindable<HTMLImageElement | null>(null),
+		crossorigin,
+		referrerpolicy,
+		...restProps
+	}: AvatarImageProps = $props();
+
+	const avatar = useAvatarContext('Avatar.Image');
+
+	let imageRef: HTMLImageElement | null = $state(null);
+
+	$effect(() => {
+		element = imageRef;
+		return () => {
+			element = null;
+		};
+	});
+
+	// The status is set in `untrack`: the setter reads the status to skip a repeat, and a read
+	// here would make the load depend on its own result.
+	$effect(() => {
+		const source = src;
+		if (!source) {
+			untrack(() => avatar.setStatus('error'));
+			return;
+		}
+		// The same request the `<img>` makes, thus the browser serves the `<img>` from its cache.
+		const loader = new Image();
+		if (crossorigin !== undefined && crossorigin !== null) loader.crossOrigin = crossorigin;
+		if (referrerpolicy) loader.referrerPolicy = referrerpolicy;
+		loader.onload = () => avatar.setStatus('loaded');
+		loader.onerror = () => avatar.setStatus('error');
+		loader.src = source;
+		// An image from the cache is complete at once: no `loading` frame for the fallback.
+		untrack(() => {
+			if (loader.complete && loader.naturalWidth > 0) avatar.setStatus('loaded');
+			else avatar.setStatus('loading');
+		});
+		return () => {
+			loader.onload = null;
+			loader.onerror = null;
+		};
+	});
+</script>
+
+{#if avatar.status === 'loaded' && src}
+	<img
+		{...restProps}
+		bind:this={imageRef}
+		{src}
+		{alt}
+		{crossorigin}
+		{referrerpolicy}
+		class={className}
+		data-avatar-image="true"
+	/>
+{/if}
diff --git a/packages/ui/src/lib/avatar/index.parts.ts b/packages/ui/src/lib/avatar/index.parts.ts
new file mode 100644
index 00000000..bf069cdf
--- /dev/null
+++ b/packages/ui/src/lib/avatar/index.parts.ts
@@ -0,0 +1,3 @@
+export { default as Root } from './root/avatar-root.svelte';
+export { default as Image } from './image/avatar-image.svelte';
+export { default as Fallback } from './fallback/avatar-fallback.svelte';
diff --git a/packages/ui/src/lib/avatar/index.ts b/packages/ui/src/lib/avatar/index.ts
new file mode 100644
index 00000000..9ec47e95
--- /dev/null
+++ b/packages/ui/src/lib/avatar/index.ts
@@ -0,0 +1,23 @@
+import type { ComponentProps } from 'svelte';
+import type AvatarFallbackComponent from './fallback/avatar-fallback.svelte';
+import type AvatarImageComponent from './image/avatar-image.svelte';
+import type AvatarRootComponent from './root/avatar-root.svelte';
+
+export * as Avatar from './index.parts.js';
+
+export { default as AvatarRoot } from './root/avatar-root.svelte';
+export { default as AvatarImage } from './image/avatar-image.svelte';
+export { default as AvatarFallback } from './fallback/avatar-fallback.svelte';
+export type AvatarRootProps = ComponentProps<typeof AvatarRootComponent>;
+export type AvatarImageProps = ComponentProps<typeof AvatarImageComponent>;
+export type AvatarFallbackProps = ComponentProps<typeof AvatarFallbackComponent>;
+export {
+	getAvatarContext,
+	setAvatarContext,
+	useAvatarContext,
+	type AvatarContext,
+	type AvatarStatus
+} from './root/context.js';
+
+import * as AvatarParts from './index.parts.js';
+export default AvatarParts;
diff --git a/packages/ui/src/lib/avatar/root/avatar-root.svelte b/packages/ui/src/lib/avatar/root/avatar-root.svelte
new file mode 100644
index 00000000..50843e96
--- /dev/null
+++ b/packages/ui/src/lib/avatar/root/avatar-root.svelte
@@ -0,0 +1,53 @@
+<script lang="ts">
+	import type { AvatarRootProps } from '../types.js';
+	import { setAvatarContext, type AvatarContext, type AvatarStatus } from './context';
+
+	/**
+	 * Avatar.Root — a picture of a person or a thing, with a fallback for when the picture is
+	 * not there.
+	 *
+	 * It holds the status of the image and gives it to the parts: `Avatar.Image` shows once the
+	 * image is on the screen, and `Avatar.Fallback` shows while it is not. The root is a plain
+	 * `<span>` with no role: the name is on the image as `alt`, or on the fallback as text.
+	 */
+	let {
+		children,
+		class: className = '',
+		element = $bindable<HTMLSpanElement | null>(null),
+		onStatusChange,
+		...restProps
+	}: AvatarRootProps = $props();
+
+	let rootRef: HTMLSpanElement | null = $state(null);
+	let status = $state<AvatarStatus>('loading');
+
+	const context: AvatarContext = {
+		get status() {
+			return status;
+		},
+		setStatus(next) {
+			if (status === next) return;
+			status = next;
+			onStatusChange?.(next);
+		}
+	};
+
+	setAvatarContext(context);
+
+	$effect(() => {
+		element = rootRef;
+		return () => {
+			element = null;
+		};
+	});
+</script>
+
+<span
+	{...restProps}
+	bind:this={rootRef}
+	class={className}
+	data-avatar-root="true"
+	data-status={status}
+>
+	{@render children?.()}
+</span>
diff --git a/packages/ui/src/lib/avatar/root/avatar-ssr.test.ts b/packages/ui/src/lib/avatar/root/avatar-ssr.test.ts
new file mode 100644
index 00000000..6d70ff7e
--- /dev/null
+++ b/packages/ui/src/lib/avatar/root/avatar-ssr.test.ts
@@ -0,0 +1,20 @@
+// @vitest-environment node
+
+import { describe, expect, it } from 'vitest';
+import { render } from 'svelte/server';
+import AvatarTest from './avatar-test.svelte';
+
+describe('Avatar SSR', () => {
+	it('renders the fallback and no image before hydration', () => {
+		const { body } = render(AvatarTest, { props: { src: '/ada.jpg' } });
+		expect(body).toContain('data-status="loading"');
+		expect(body).toContain('data-avatar-fallback="true"');
+		expect(body).not.toContain('<img');
+	});
+
+	it('holds a delayed fallback back on the server too', () => {
+		const { body } = render(AvatarTest, { props: { src: '/ada.jpg', delay: 600 } });
+		expect(body).not.toContain('data-avatar-fallback');
+		expect(body).not.toContain('<img');
+	});
+});
diff --git a/packages/ui/src/lib/avatar/root/avatar-test.svelte b/packages/ui/src/lib/avatar/root/avatar-test.svelte
new file mode 100644
index 00000000..016a97f9
--- /dev/null
+++ b/packages/ui/src/lib/avatar/root/avatar-test.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { Avatar } from '../index';
+	import type { AvatarStatus } from '../index';
+
+	let {
+		src = undefined,
+		alt = 'Ada Lovelace',
+		delay = 0,
+		onStatusChange
+	}: {
+		src?: string | null;
+		alt?: string;
+		delay?: number;
+		onStatusChange?: (status: AvatarStatus) => void;
+	} = $props();
+
+	let image = $state<HTMLImageElement | null>(null);
+	let fallback = $state<HTMLSpanElement | null>(null);
+</script>
+
+<Avatar.Root data-testid="root" class="avatar" {onStatusChange}>
+	<Avatar.Image {src} {alt} data-testid="image" class="image" bind:element={image} />
+	<Avatar.Fallback {delay} data-testid="fallback" class="fallback" bind:element={fallback}>
+		AL
+	</Avatar.Fallback>
+</Avatar.Root>
+<span data-testid="image-tag">{image?.tagName ?? 'none'}</span>
+<span data-testid="fallback-tag">{fallback?.tagName ?? 'none'}</span>
diff --git a/packages/ui/src/lib/avatar/root/avatar.test.ts b/packages/ui/src/lib/avatar/root/avatar.test.ts
new file mode 100644
index 00000000..0dc6cb54
--- /dev/null
+++ b/packages/ui/src/lib/avatar/root/avatar.test.ts
@@ -0,0 +1,89 @@
+import { describe, expect, it, vi } from 'vitest';
+import { render } from 'vitest-browser-svelte';
+import AvatarTest from './avatar-test.svelte';
+
+// A 1 by 1 PNG. The browser loads it at once, from memory.
+const PIXEL =
+	'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==';
+const BROKEN = 'data:image/png;base64,not-an-image';
+
+function byTestId<T extends HTMLElement = HTMLElement>(id: string): T | null {
+	return document.querySelector<T>(`[data-testid="${id}"]`);
+}
+
+describe('Avatar', () => {
+	it('shows the image once it loads, and no fallback after', async () => {
+		const onStatusChange = vi.fn();
+		render(AvatarTest, { src: PIXEL, onStatusChange });
+
+		await expect.poll(() => byTestId('root')?.getAttribute('data-status')).toBe('loaded');
+		const image = byTestId<HTMLImageElement>('image');
+		expect(image?.tagName).toBe('IMG');
+		expect(image?.getAttribute('src')).toBe(PIXEL);
+		expect(image?.getAttribute('alt')).toBe('Ada Lovelace');
+		expect(image?.getAttribute('data-avatar-image')).toBe('true');
+		expect(byTestId('fallback')).toBeNull();
+		expect(byTestId('image-tag')?.textContent).toBe('IMG');
+		expect(byTestId('fallback-tag')?.textContent).toBe('none');
+		expect(onStatusChange).toHaveBeenLastCalledWith('loaded');
+	});
+
+	it('shows the fallback, and no image, when the image fails', async () => {
+		const onStatusChange = vi.fn();
+		render(AvatarTest, { src: BROKEN, onStatusChange });
+
+		await expect.poll(() => byTestId('root')?.getAttribute('data-status')).toBe('error');
+		expect(byTestId('image')).toBeNull();
+		expect(byTestId('fallback')?.textContent?.trim()).toBe('AL');
+		expect(byTestId('fallback')?.getAttribute('data-status')).toBe('error');
+		expect(onStatusChange).toHaveBeenLastCalledWith('error');
+	});
+
+	it('shows the fallback at once without a source', async () => {
+		render(AvatarTest, { src: null });
+
+		await expect.poll(() => byTestId('root')?.getAttribute('data-status')).toBe('error');
+		expect(byTestId('image')).toBeNull();
+		expect(byTestId('fallback')).not.toBeNull();
+	});
+
+	it('holds the fallback back for the delay while the image loads, and not on a failure', async () => {
+		vi.useFakeTimers({ toFake: ['setTimeout', 'clearTimeout'] });
+		try {
+			// A source that never answers: the load stays pending.
+			render(AvatarTest, { src: 'http://127.0.0.1:9/never.png', delay: 500 });
+			expect(byTestId('root')?.getAttribute('data-status')).toBe('loading');
+			expect(byTestId('fallback')).toBeNull();
+
+			await vi.advanceTimersByTimeAsync(400);
+			expect(byTestId('fallback')).toBeNull();
+			await vi.advanceTimersByTimeAsync(100);
+			await expect.poll(() => byTestId('fallback')).not.toBeNull();
+		} finally {
+			vi.useRealTimers();
+		}
+	});
+
+	it('shows the fallback at once on a failure, delay or not', async () => {
+		render(AvatarTest, { src: BROKEN, delay: 10000 });
+		await expect.poll(() => byTestId('root')?.getAttribute('data-status')).toBe('error');
+		expect(byTestId('fallback')).not.toBeNull();
+	});
+
+	it('loads again when the source changes', async () => {
+		const screen = render(AvatarTest, { src: BROKEN });
+		await expect.poll(() => byTestId('root')?.getAttribute('data-status')).toBe('error');
+
+		await screen.rerender({ src: PIXEL });
+		await expect.poll(() => byTestId('root')?.getAttribute('data-status')).toBe('loaded');
+		expect(byTestId('image')).not.toBeNull();
+		expect(byTestId('fallback')).toBeNull();
+	});
+
+	it('is not in the tab order', () => {
+		render(AvatarTest, { src: null });
+		const root = byTestId('root');
+		expect(root?.hasAttribute('tabindex')).toBe(false);
+		expect(root?.hasAttribute('role')).toBe(false);
+	});
+});
diff --git a/packages/ui/src/lib/avatar/root/context.ts b/packages/ui/src/lib/avatar/root/context.ts
new file mode 100644
index 00000000..2d1fb77d
--- /dev/null
+++ b/packages/ui/src/lib/avatar/root/context.ts
@@ -0,0 +1,27 @@
+import { getContext, setContext } from 'svelte';
+
+const KEY = Symbol('avatar');
+
+/** `loading` until the image answers, then `loaded` or `error`. `error` without a `src` too. */
+export type AvatarStatus = 'loading' | 'loaded' | 'error';
+
+export type AvatarContext = {
+	status: AvatarStatus;
+	setStatus: (status: AvatarStatus) => void;
+};
+
+export function setAvatarContext(context: AvatarContext) {
+	setContext(KEY, context);
+}
+
+export function getAvatarContext(): AvatarContext | undefined {
+	return getContext<AvatarContext | undefined>(KEY);
+}
+
+export function useAvatarContext(part = 'Avatar'): AvatarContext {
+	const context = getAvatarContext();
+	if (!context) {
+		throw new Error(`${part} must be used within Avatar.Root.`);
+	}
+	return context;
+}
diff --git a/packages/ui/src/lib/avatar/types.ts b/packages/ui/src/lib/avatar/types.ts
new file mode 100644
index 00000000..0808a12b
--- /dev/null
+++ b/packages/ui/src/lib/avatar/types.ts
@@ -0,0 +1,46 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes, HTMLImgAttributes } from 'svelte/elements';
+import type { AvatarStatus } from './root/context.js';
+
+export type { AvatarContext, AvatarStatus } from './root/context.js';
+
+export type AvatarRootProps = Omit<HTMLAttributes<HTMLSpanElement>, 'children' | 'class'> & {
+	/** `Avatar.Image` and `Avatar.Fallback`. */
+	children?: Snippet;
+	/** The CSS class names of the element. */
+	class?: string;
+	/** The root element. Use `bind:element` to read it. */
+	element?: HTMLSpanElement | null;
+	/** Called when the image starts to load, loads, or fails. */
+	onStatusChange?: (status: AvatarStatus) => void;
+};
+
+export type AvatarImageProps = Omit<HTMLImgAttributes, 'class' | 'src' | 'alt'> & {
+	/** The address of the image. Without it, the fallback shows. */
+	src?: string | null;
+	/**
+	 * The text in place of the image. Give the name of the person or the thing. Give an empty
+	 * string when the name is beside the avatar already, thus a screen reader does not read it
+	 * twice.
+	 */
+	alt: string;
+	/** The CSS class names of the element. */
+	class?: string;
+	/** The image element, once the image is on the screen. Use `bind:element` to read it. */
+	element?: HTMLImageElement | null;
+};
+
+export type AvatarFallbackProps = Omit<HTMLAttributes<HTMLSpanElement>, 'children' | 'class'> & {
+	/** The content in place of the image, such as initials or an icon. */
+	children?: Snippet;
+	/** The CSS class names of the element. */
+	class?: string;
+	/**
+	 * The time in milliseconds before the fallback shows while the image loads. A fallback that
+	 * flashes before a fast image is noise: 300 or 600 hides it on a good connection. It shows at
+	 * once when the image fails, or when there is no image.
+	 */
+	delay?: number;
+	/** The fallback element, while it is on the screen. Use `bind:element` to read it. */
+	element?: HTMLSpanElement | null;
+};
diff --git a/packages/ui/src/lib/breadcrumbs/README.md b/packages/ui/src/lib/breadcrumbs/README.md
new file mode 100644
index 00000000..9cdbbf7f
--- /dev/null
+++ b/packages/ui/src/lib/breadcrumbs/README.md
@@ -0,0 +1,59 @@
+# Breadcrumbs
+
+## Description
+
+`Breadcrumbs` is the trail of pages above the one the user is on. It is a `<nav>` landmark named "Breadcrumb" with an ordered list of links, and the last one says it is the current page.
+
+## Anatomy
+
+- `Breadcrumbs.Root`
+- `Breadcrumbs.List`
+- `Breadcrumbs.Item`
+- `Breadcrumbs.Link`
+- `Breadcrumbs.Separator`
+
+```svelte
+<Breadcrumbs.Root>
+	<Breadcrumbs.List>
+		<Breadcrumbs.Item>
+			<Breadcrumbs.Link href="/">Home</Breadcrumbs.Link>
+			<Breadcrumbs.Separator />
+		</Breadcrumbs.Item>
+		<Breadcrumbs.Item>
+			<Breadcrumbs.Link href="/docs">Docs</Breadcrumbs.Link>
+			<Breadcrumbs.Separator />
+		</Breadcrumbs.Item>
+		<Breadcrumbs.Item>
+			<Breadcrumbs.Link current>Breadcrumbs</Breadcrumbs.Link>
+		</Breadcrumbs.Item>
+	</Breadcrumbs.List>
+</Breadcrumbs.Root>
+```
+
+## Usage guidelines
+
+- Set `current` on the last link. It can keep its `href`: a link to the page the user is on is a way to reload it.
+- Put the separator in the item, after the link, on every item but the last.
+- Give the root an `aria-label` when the page has two sets of breadcrumbs.
+- Use `disabled` for a page the user cannot open now. The text stays, the link goes.
+
+## API reference
+
+- `Breadcrumbs.Root`
+  - `aria-label?: string` ("Breadcrumb", localized)
+  - `element?: HTMLElement | null` (bindable)
+- `Breadcrumbs.List`, `Breadcrumbs.Item`
+  - `element` (bindable)
+- `Breadcrumbs.Link`
+  - `href?: string`, `current?: boolean`, `disabled?: boolean`
+  - `element?: HTMLAnchorElement | HTMLSpanElement | null` (bindable)
+- `Breadcrumbs.Separator`
+  - `children` (a slash without children)
+
+## Accessibility
+
+- `Breadcrumbs.Root` is a `<nav>` with `aria-label="Breadcrumb"`, in the locale of `LocaleProvider`. A screen reader user finds it in the list of landmarks.
+- `Breadcrumbs.List` is an `<ol>` of `<li>`: a screen reader says the count and the position of each page. It has `role="list"` in writing, for the browsers that drop a list with `list-style: none`.
+- `Breadcrumbs.Link` with `current` has `aria-current="page"`. Without an `href`, or with `disabled`, it is a `<span>`: not a link, and not a tab stop.
+- `Breadcrumbs.Separator` is `aria-hidden`. The list already separates the items.
+- The keyboard moves through the links with `Tab`. Breadcrumbs are links on a page, not a widget with arrow keys.
diff --git a/packages/ui/src/lib/breadcrumbs/TODO.md b/packages/ui/src/lib/breadcrumbs/TODO.md
new file mode 100644
index 00000000..9c624f0b
--- /dev/null
+++ b/packages/ui/src/lib/breadcrumbs/TODO.md
@@ -0,0 +1,13 @@
+# Breadcrumbs TODO
+
+## Goal
+
+Track Breadcrumbs work with a single mandatory TODO format.
+
+## Backlog
+
+- [x] [M][P0][Area: Architecture][Owner: Unassigned][Target: Done] Create the `root`, `list`, `item`, `link` and `separator` parts with namespace exports.
+- [x] [S][P0][Area: Accessibility][Owner: Unassigned][Target: Done] Render a `<nav>` named "Breadcrumb" in six languages, an `<ol>` of `<li>`, `aria-current="page"` on the current link, and `aria-hidden` separators.
+- [x] [S][P1][Area: Accessibility][Owner: Unassigned][Target: Done] Render a `<span>` for a link without an `href` or with `disabled`, out of the tab order.
+- [x] [M][P0][Area: Testing][Owner: Unassigned][Target: Done] Add coverage for the landmark, the locale, the current page, the separators, the disabled link, the tab order, and SSR.
+- [ ] [M][P2][Area: UX][Owner: Unassigned][Target: Backlog] Collapse the middle of a long trail behind a menu, with the first and the last pages in view.
diff --git a/packages/ui/src/lib/breadcrumbs/index.parts.ts b/packages/ui/src/lib/breadcrumbs/index.parts.ts
new file mode 100644
index 00000000..e1be82ee
--- /dev/null
+++ b/packages/ui/src/lib/breadcrumbs/index.parts.ts
@@ -0,0 +1,5 @@
+export { default as Root } from './root/breadcrumbs-root.svelte';
+export { default as List } from './list/breadcrumbs-list.svelte';
+export { default as Item } from './item/breadcrumbs-item.svelte';
+export { default as Link } from './link/breadcrumbs-link.svelte';
+export { default as Separator } from './separator/breadcrumbs-separator.svelte';
diff --git a/packages/ui/src/lib/breadcrumbs/index.ts b/packages/ui/src/lib/breadcrumbs/index.ts
new file mode 100644
index 00000000..5fc32a81
--- /dev/null
+++ b/packages/ui/src/lib/breadcrumbs/index.ts
@@ -0,0 +1,22 @@
+import type { ComponentProps } from 'svelte';
+import type BreadcrumbsItemComponent from './item/breadcrumbs-item.svelte';
+import type BreadcrumbsLinkComponent from './link/breadcrumbs-link.svelte';
+import type BreadcrumbsListComponent from './list/breadcrumbs-list.svelte';
+import type BreadcrumbsRootComponent from './root/breadcrumbs-root.svelte';
+import type BreadcrumbsSeparatorComponent from './separator/breadcrumbs-separator.svelte';
+
+export * as Breadcrumbs from './index.parts.js';
+
+export { default as BreadcrumbsRoot } from './root/breadcrumbs-root.svelte';
+export { default as BreadcrumbsList } from './list/breadcrumbs-list.svelte';
+export { default as BreadcrumbsItem } from './item/breadcrumbs-item.svelte';
+export { default as BreadcrumbsLink } from './link/breadcrumbs-link.svelte';
+export { default as BreadcrumbsSeparator } from './separator/breadcrumbs-separator.svelte';
+export type BreadcrumbsRootProps = ComponentProps<typeof BreadcrumbsRootComponent>;
+export type BreadcrumbsListProps = ComponentProps<typeof BreadcrumbsListComponent>;
+export type BreadcrumbsItemProps = ComponentProps<typeof BreadcrumbsItemComponent>;
+export type BreadcrumbsLinkProps = ComponentProps<typeof BreadcrumbsLinkComponent>;
+export type BreadcrumbsSeparatorProps = ComponentProps<typeof BreadcrumbsSeparatorComponent>;
+
+import * as BreadcrumbsParts from './index.parts.js';
+export default BreadcrumbsParts;
diff --git a/packages/ui/src/lib/breadcrumbs/item/breadcrumbs-item.svelte b/packages/ui/src/lib/breadcrumbs/item/breadcrumbs-item.svelte
new file mode 100644
index 00000000..49f270e8
--- /dev/null
+++ b/packages/ui/src/lib/breadcrumbs/item/breadcrumbs-item.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+	import type { BreadcrumbsItemProps } from '../types.js';
+
+	/**
+	 * Breadcrumbs.Item — one page of the trail.
+	 *
+	 * It is an `<li>` with a `Breadcrumbs.Link` in it, and a `Breadcrumbs.Separator` after the
+	 * link on every item but the last. The separator is in the item, not between two items,
+	 * thus the list holds items only and its count is the count of pages.
+	 */
+	let {
+		children,
+		class: className = '',
+		element = $bindable<HTMLLIElement | null>(null),
+		...restProps
+	}: BreadcrumbsItemProps = $props();
+
+	let itemRef: HTMLLIElement | null = $state(null);
+
+	$effect(() => {
+		element = itemRef;
+		return () => {
+			element = null;
+		};
+	});
+</script>
+
+<li {...restProps} bind:this={itemRef} class={className} data-breadcrumbs-item="true">
+	{@render children?.()}
+</li>
diff --git a/packages/ui/src/lib/breadcrumbs/link/breadcrumbs-link.svelte b/packages/ui/src/lib/breadcrumbs/link/breadcrumbs-link.svelte
new file mode 100644
index 00000000..4d5c7839
--- /dev/null
+++ b/packages/ui/src/lib/breadcrumbs/link/breadcrumbs-link.svelte
@@ -0,0 +1,47 @@
+<script lang="ts">
+	import type { BreadcrumbsLinkProps } from '../types.js';
+
+	/**
+	 * Breadcrumbs.Link — the page, as a link.
+	 *
+	 * It is an `<a>` with an `href`, and a `<span>` without one. `current` marks the page the
+	 * user is on with `aria-current="page"`. `disabled` takes the `href` away: a link with no
+	 * address is out of the tab order on its own, with no `tabindex` to manage.
+	 */
+	let {
+		children,
+		class: className = '',
+		href,
+		current = false,
+		disabled = false,
+		element = $bindable<HTMLAnchorElement | HTMLSpanElement | null>(null),
+		...restProps
+	}: BreadcrumbsLinkProps = $props();
+
+	let linkRef: HTMLAnchorElement | HTMLSpanElement | null = $state(null);
+	const isLink = $derived(Boolean(href) && !disabled);
+
+	$effect(() => {
+		element = linkRef;
+		return () => {
+			element = null;
+		};
+	});
+</script>
+
+<!-- Without an address, the text is not a link: a span says so, where an anchor with no href
+     still reads as a link to some screen readers. -->
+<svelte:element
+	this={isLink ? 'a' : 'span'}
+	{...restProps}
+	bind:this={linkRef}
+	href={isLink ? href : undefined}
+	aria-current={current ? 'page' : undefined}
+	aria-disabled={disabled ? 'true' : undefined}
+	class={className}
+	data-breadcrumbs-link="true"
+	data-current={current || undefined}
+	data-disabled={disabled || undefined}
+>
+	{@render children?.()}
+</svelte:element>
diff --git a/packages/ui/src/lib/breadcrumbs/list/breadcrumbs-list.svelte b/packages/ui/src/lib/breadcrumbs/list/breadcrumbs-list.svelte
new file mode 100644
index 00000000..c45d7a97
--- /dev/null
+++ b/packages/ui/src/lib/breadcrumbs/list/breadcrumbs-list.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	import type { BreadcrumbsListProps } from '../types.js';
+
+	/**
+	 * Breadcrumbs.List — the ordered list of the trail.
+	 *
+	 * It is an `<ol>`: the order of the items is the order of the pages, from the root of the
+	 * site to the page the user is on, and a screen reader says how many there are. The role is
+	 * on it in writing: some browsers drop the list from the accessibility tree when its
+	 * `list-style` is `none`, which every trail sets.
+	 */
+	let {
+		children,
+		class: className = '',
+		element = $bindable<HTMLOListElement | null>(null),
+		...restProps
+	}: BreadcrumbsListProps = $props();
+
+	let listRef: HTMLOListElement | null = $state(null);
+
+	$effect(() => {
+		element = listRef;
+		return () => {
+			element = null;
+		};
+	});
+</script>
+
+<ol {...restProps} bind:this={listRef} role="list" class={className} data-breadcrumbs-list="true">
+	{@render children?.()}
+</ol>
diff --git a/packages/ui/src/lib/breadcrumbs/root/breadcrumbs-root.svelte b/packages/ui/src/lib/breadcrumbs/root/breadcrumbs-root.svelte
new file mode 100644
index 00000000..a7b939ee
--- /dev/null
+++ b/packages/ui/src/lib/breadcrumbs/root/breadcrumbs-root.svelte
@@ -0,0 +1,47 @@
+<script lang="ts">
+	import { readable } from 'svelte/store';
+	import { resolveLocalizedString } from '../../internal/localized-strings';
+	import { useLocaleContextOptional } from '../../locale-provider/context';
+	import type { BreadcrumbsRootProps } from '../types.js';
+
+	/**
+	 * Breadcrumbs.Root — the trail of pages above the one the user is on.
+	 *
+	 * It is a `<nav>` landmark named "Breadcrumb", in the locale of `LocaleProvider`: a screen
+	 * reader user finds it in the list of landmarks, apart from the main navigation. Put a
+	 * `Breadcrumbs.List` in it.
+	 */
+	let {
+		children,
+		class: className = '',
+		'aria-label': ariaLabelProp,
+		element = $bindable<HTMLElement | null>(null),
+		...restProps
+	}: BreadcrumbsRootProps = $props();
+
+	const localeContext = useLocaleContextOptional();
+	const emptyLocaleStore = readable<string | undefined>(undefined);
+	const localeStore = localeContext?.locale ?? emptyLocaleStore;
+	const ariaLabel = $derived(
+		ariaLabelProp ?? resolveLocalizedString($localeStore, 'breadcrumbs.label')
+	);
+
+	let navRef: HTMLElement | null = $state(null);
+
+	$effect(() => {
+		element = navRef;
+		return () => {
+			element = null;
+		};
+	});
+</script>
+
+<nav
+	{...restProps}
+	bind:this={navRef}
+	aria-label={ariaLabel}
+	class={className}
+	data-breadcrumbs-root="true"
+>
+	{@render children?.()}
+</nav>
diff --git a/packages/ui/src/lib/breadcrumbs/root/breadcrumbs-ssr.test.ts b/packages/ui/src/lib/breadcrumbs/root/breadcrumbs-ssr.test.ts
new file mode 100644
index 00000000..fa2bc98d
--- /dev/null
+++ b/packages/ui/src/lib/breadcrumbs/root/breadcrumbs-ssr.test.ts
@@ -0,0 +1,16 @@
+// @vitest-environment node
+
+import { describe, expect, it } from 'vitest';
+import { render } from 'svelte/server';
+import BreadcrumbsTest from './breadcrumbs-test.svelte';
+
+describe('Breadcrumbs SSR', () => {
+	it('renders the landmark, the list and the current page before hydration', () => {
+		const { body } = render(BreadcrumbsTest, { props: { locale: 'fr-FR' } });
+		expect(body).toContain('<nav');
+		expect(body).toContain(`aria-label="Fil d'Ariane"`);
+		expect(body).toContain('<ol');
+		expect(body).toContain('aria-current="page"');
+		expect(body).toContain('aria-hidden="true"');
+	});
+});
diff --git a/packages/ui/src/lib/breadcrumbs/root/breadcrumbs-test.svelte b/packages/ui/src/lib/breadcrumbs/root/breadcrumbs-test.svelte
new file mode 100644
index 00000000..fd7e7730
--- /dev/null
+++ b/packages/ui/src/lib/breadcrumbs/root/breadcrumbs-test.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+	import { Breadcrumbs } from '../index';
+	import LocaleProvider from '../../locale-provider/index';
+
+	let {
+		locale = undefined,
+		label = undefined,
+		disabled = false,
+		currentHref = true
+	}: { locale?: string; label?: string; disabled?: boolean; currentHref?: boolean } = $props();
+
+	let nav = $state<HTMLElement | null>(null);
+</script>
+
+<button type="button" data-testid="before">Before</button>
+<LocaleProvider {locale}>
+	<Breadcrumbs.Root data-testid="nav" aria-label={label} bind:element={nav} class="trail">
+		<Breadcrumbs.List data-testid="list">
+			<Breadcrumbs.Item>
+				<Breadcrumbs.Link href="/" data-testid="home">Home</Breadcrumbs.Link>
+				<Breadcrumbs.Separator data-testid="separator" />
+			</Breadcrumbs.Item>
+			<Breadcrumbs.Item>
+				<Breadcrumbs.Link href="/docs" {disabled} data-testid="docs">Docs</Breadcrumbs.Link>
+				<Breadcrumbs.Separator>›</Breadcrumbs.Separator>
+			</Breadcrumbs.Item>
+			<Breadcrumbs.Item>
+				<Breadcrumbs.Link
+					href={currentHref ? '/docs/breadcrumbs' : undefined}
+					current
+					data-testid="current"
+				>
+					Breadcrumbs
+				</Breadcrumbs.Link>
+			</Breadcrumbs.Item>
+		</Breadcrumbs.List>
+	</Breadcrumbs.Root>
+</LocaleProvider>
+<span data-testid="nav-tag">{nav?.tagName ?? 'none'}</span>
diff --git a/packages/ui/src/lib/breadcrumbs/root/breadcrumbs.test.ts b/packages/ui/src/lib/breadcrumbs/root/breadcrumbs.test.ts
new file mode 100644
index 00000000..b27fad9b
--- /dev/null
+++ b/packages/ui/src/lib/breadcrumbs/root/breadcrumbs.test.ts
@@ -0,0 +1,99 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-svelte';
+import { userEvent } from 'vitest/browser';
+import BreadcrumbsTest from './breadcrumbs-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;
+}
+
+describe('Breadcrumbs', () => {
+	it('is a nav landmark named Breadcrumb, with an ordered list of items', () => {
+		render(BreadcrumbsTest);
+		const nav = byTestId('nav');
+
+		expect(nav.tagName).toBe('NAV');
+		expect(nav.getAttribute('aria-label')).toBe('Breadcrumb');
+		expect(nav.className).toBe('trail');
+		const list = byTestId('list');
+		expect(list.tagName).toBe('OL');
+		expect(list.getAttribute('role')).toBe('list');
+		expect(list.parentElement).toBe(nav);
+		const items = list.querySelectorAll(':scope > li');
+		expect(items).toHaveLength(3);
+		expect(byTestId('nav-tag').textContent).toBe('NAV');
+	});
+
+	it('takes the name from the locale, and from aria-label first', () => {
+		render(BreadcrumbsTest, { locale: 'es-AR' });
+		expect(byTestId('nav').getAttribute('aria-label')).toBe('Ruta de navegación');
+
+		document.body.innerHTML = '';
+		render(BreadcrumbsTest, { locale: 'es-AR', label: 'Ubicación' });
+		expect(byTestId('nav').getAttribute('aria-label')).toBe('Ubicación');
+	});
+
+	it('marks the current page, and keeps it a link with an href', () => {
+		render(BreadcrumbsTest);
+		const current = byTestId('current');
+
+		expect(current.tagName).toBe('A');
+		expect(current.getAttribute('href')).toBe('/docs/breadcrumbs');
+		expect(current.getAttribute('aria-current')).toBe('page');
+		expect(current.getAttribute('data-current')).toBe('true');
+		expect(byTestId('home').hasAttribute('aria-current')).toBe(false);
+	});
+
+	it('is plain text without an href, and says it is current', () => {
+		render(BreadcrumbsTest, { currentHref: false });
+		const current = byTestId('current');
+
+		expect(current.tagName).toBe('SPAN');
+		expect(current.getAttribute('aria-current')).toBe('page');
+		expect(current.hasAttribute('href')).toBe(false);
+	});
+
+	it('hides the separators from the screen reader, with a slash by default', () => {
+		render(BreadcrumbsTest);
+		const separators = document.querySelectorAll('[data-breadcrumbs-separator]');
+
+		expect(separators).toHaveLength(2);
+		expect(separators[0].getAttribute('aria-hidden')).toBe('true');
+		expect(separators[0].textContent?.trim()).toBe('/');
+		expect(separators[1].textContent?.trim()).toBe('›');
+		// In the item, after the link: the list holds items only.
+		expect(separators[0].parentElement?.tagName).toBe('LI');
+		expect(separators[0].previousElementSibling).toBe(byTestId('home'));
+	});
+
+	it('takes a disabled link out of the tab order, and keeps its text', async () => {
+		render(BreadcrumbsTest, { disabled: true });
+		const docs = byTestId('docs');
+
+		expect(docs.tagName).toBe('SPAN');
+		expect(docs.hasAttribute('href')).toBe(false);
+		expect(docs.getAttribute('aria-disabled')).toBe('true');
+		expect(docs.getAttribute('data-disabled')).toBe('true');
+		expect(docs.textContent?.trim()).toBe('Docs');
+
+		byTestId('before').focus();
+		await userEvent.keyboard('{Tab}');
+		expect(document.activeElement).toBe(byTestId('home'));
+		await userEvent.keyboard('{Tab}');
+		expect(document.activeElement).toBe(byTestId('current'));
+	});
+
+	it('moves through the links with Tab, in the order of the trail', async () => {
+		render(BreadcrumbsTest);
+		byTestId('before').focus();
+
+		await userEvent.keyboard('{Tab}');
+		expect(document.activeElement).toBe(byTestId('home'));
+		await userEvent.keyboard('{Tab}');
+		expect(document.activeElement).toBe(byTestId('docs'));
+		await userEvent.keyboard('{Tab}');
+		expect(document.activeElement).toBe(byTestId('current'));
+	});
+});
diff --git a/packages/ui/src/lib/breadcrumbs/separator/breadcrumbs-separator.svelte b/packages/ui/src/lib/breadcrumbs/separator/breadcrumbs-separator.svelte
new file mode 100644
index 00000000..5823db08
--- /dev/null
+++ b/packages/ui/src/lib/breadcrumbs/separator/breadcrumbs-separator.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+	import type { BreadcrumbsSeparatorProps } from '../types.js';
+
+	/**
+	 * Breadcrumbs.Separator — the sign between two pages of the trail.
+	 *
+	 * It is hidden from the screen reader: the list already separates the items, and a slash
+	 * read aloud between each two is noise. Put it in the item, after the link.
+	 */
+	let {
+		children,
+		class: className = '',
+		element = $bindable<HTMLSpanElement | null>(null),
+		...restProps
+	}: BreadcrumbsSeparatorProps = $props();
+
+	let separatorRef: HTMLSpanElement | null = $state(null);
+
+	$effect(() => {
+		element = separatorRef;
+		return () => {
+			element = null;
+		};
+	});
+</script>
+
+<span
+	{...restProps}
+	bind:this={separatorRef}
+	aria-hidden="true"
+	class={className}
+	data-breadcrumbs-separator="true"
+>
+	{#if children}{@render children()}{:else}/{/if}
+</span>
diff --git a/packages/ui/src/lib/breadcrumbs/types.ts b/packages/ui/src/lib/breadcrumbs/types.ts
new file mode 100644
index 00000000..d0b31b05
--- /dev/null
+++ b/packages/ui/src/lib/breadcrumbs/types.ts
@@ -0,0 +1,67 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAnchorAttributes, HTMLAttributes, HTMLOlAttributes } from 'svelte/elements';
+
+export type BreadcrumbsRootProps = Omit<HTMLAttributes<HTMLElement>, 'children' | 'class'> & {
+	/** `Breadcrumbs.List`. */
+	children?: Snippet;
+	/** The CSS class names of the element. */
+	class?: string;
+	/**
+	 * The name of the landmark. Without it, the name is "Breadcrumb" in the locale of
+	 * `LocaleProvider`. Give one when the page has two sets of breadcrumbs.
+	 */
+	'aria-label'?: string;
+	/** The `<nav>` element. Use `bind:element` to read it. */
+	element?: HTMLElement | null;
+};
+
+export type BreadcrumbsListProps = Omit<HTMLOlAttributes, 'children' | 'class' | 'role'> & {
+	/** The items. */
+	children?: Snippet;
+	/** The CSS class names of the element. */
+	class?: string;
+	/** The `<ol>` element. Use `bind:element` to read it. */
+	element?: HTMLOListElement | null;
+};
+
+export type BreadcrumbsItemProps = Omit<HTMLAttributes<HTMLLIElement>, 'children' | 'class'> & {
+	/** `Breadcrumbs.Link`, and a `Breadcrumbs.Separator` after it. */
+	children?: Snippet;
+	/** The CSS class names of the element. */
+	class?: string;
+	/** The `<li>` element. Use `bind:element` to read it. */
+	element?: HTMLLIElement | null;
+};
+
+export type BreadcrumbsLinkProps = Omit<
+	HTMLAnchorAttributes,
+	'children' | 'class' | 'href' | 'aria-current' | 'aria-disabled'
+> & {
+	/** The text of the link. */
+	children?: Snippet;
+	/** The CSS class names of the element. */
+	class?: string;
+	/** The address of the page. Without it, the link is plain text. */
+	href?: string;
+	/**
+	 * Marks the page the user is on. The link gets `aria-current="page"`. Set it on the last
+	 * item: a screen reader user then knows where the trail ends.
+	 */
+	current?: boolean;
+	/** Takes the link out of use: it keeps its text, and it loses its `href` and its tab stop. */
+	disabled?: boolean;
+	/** The `<a>` element, or the `<span>` without an `href`. Use `bind:element` to read it. */
+	element?: HTMLAnchorElement | HTMLSpanElement | null;
+};
+
+export type BreadcrumbsSeparatorProps = Omit<
+	HTMLAttributes<HTMLSpanElement>,
+	'children' | 'class' | 'aria-hidden'
+> & {
+	/** The sign between two items. A slash without children. */
+	children?: Snippet;
+	/** The CSS class names of the element. */
+	class?: string;
+	/** The `<span>` element. Use `bind:element` to read it. */
+	element?: HTMLSpanElement | null;
+};
diff --git a/packages/ui/src/lib/index.ts b/packages/ui/src/lib/index.ts
index 2bb81e4c..57f372f9 100644
--- a/packages/ui/src/lib/index.ts
+++ b/packages/ui/src/lib/index.ts
@@ -3,6 +3,8 @@
 // Components (namespace exports)
 export { Accordion } from './accordion/index.js';
 export { Autocomplete } from './autocomplete/index.js';
+export { Avatar } from './avatar/index.js';
+export { Breadcrumbs } from './breadcrumbs/index.js';
 export { Button } from './button/index.js';
 export { Checkbox } from './checkbox/index.js';
 export { CheckboxGroup } from './checkbox-group/index.js';
@@ -35,6 +37,7 @@ export { Tree } from './tree/index.js';
 // Simple components
 export { default as Input } from './input/index.js';
 export { default as Label } from './label/index.js';
+export { default as Separator } from './separator/index.js';
 export { default as Dropzone } from './dropzone/index.js';
 export { default as LocaleProvider } from './locale-provider/index.js';
 export { Portal } from './portal/index.js';
@@ -42,6 +45,7 @@ export { OverflowRow, type OverflowRowState } from './overflow-row/index.js';
 export { default as TextArea } from './textarea/index.js';
 
 export * from './locale-provider/index.js';
+export type { SeparatorOrientation, SeparatorProps } from './separator/index.js';
 
 // Re-export named exports from components
 export * from './accordion/index.js';
@@ -49,6 +53,8 @@ export * from './autocomplete/index.js';
 export * from './button/index.js';
 export * from './checkbox/index.js';
 export * from './checkbox-group/index.js';
+export * from './avatar/index.js';
+export * from './breadcrumbs/index.js';
 export * from './collapsible/index.js';
 export * from './combobox/index.js';
 export * from './calendar/index.js';
diff --git a/packages/ui/src/lib/internal/localized-strings.ts b/packages/ui/src/lib/internal/localized-strings.ts
index 505bea76..08f61267 100644
--- a/packages/ui/src/lib/internal/localized-strings.ts
+++ b/packages/ui/src/lib/internal/localized-strings.ts
@@ -338,6 +338,14 @@ const LOCALIZED_STRINGS = {
 		de: '{count} Elemente nach {label} verschoben',
 		it: '{count} elementi spostati in {label}'
 	},
+	'breadcrumbs.label': {
+		en: 'Breadcrumb',
+		es: 'Ruta de navegación',
+		pt: 'Trilha de navegação',
+		fr: "Fil d'Ariane",
+		de: 'Brotkrumennavigation',
+		it: 'Percorso di navigazione'
+	},
 	'segment.empty': {
 		en: 'Empty',
 		es: 'Vacío',
diff --git a/packages/ui/src/lib/separator/README.md b/packages/ui/src/lib/separator/README.md
new file mode 100644
index 00000000..786f065c
--- /dev/null
+++ b/packages/ui/src/lib/separator/README.md
@@ -0,0 +1,33 @@
+# Separator
+
+## Description
+
+`Separator` is a line between two groups of content. A screen reader reads it as a break, the same as a native `<hr>`. It has no size of its own: give it a border or a background, and a width or a height.
+
+## Anatomy
+
+- `Separator`
+
+```svelte
+<Separator class="h-px w-full bg-neutral-200" />
+<Separator orientation="vertical" class="h-6 w-px bg-neutral-200" />
+```
+
+## Usage guidelines
+
+- Use `orientation="vertical"` for a line between two items side by side, such as in a toolbar.
+- Use `decorative` for a line that repeats a break the content already makes, such as a border between two sections with headings. A screen reader then skips it.
+- Give the line a size with CSS. `data-orientation` is on the element for your styles.
+
+## API reference
+
+- `Separator`
+  - `orientation?: 'horizontal' | 'vertical'` (`'horizontal'`)
+  - `decorative?: boolean` (`false`)
+  - `element?: HTMLDivElement | null` (bindable)
+
+## Accessibility
+
+- The element is `role="separator"`. A vertical one has `aria-orientation="vertical"`: a separator is horizontal unless it says otherwise.
+- `decorative` makes it `role="none"`, which a screen reader skips.
+- It is not focusable. A separator that the user moves, such as a window splitter, is a different pattern.
diff --git a/packages/ui/src/lib/separator/TODO.md b/packages/ui/src/lib/separator/TODO.md
new file mode 100644
index 00000000..056eb3d5
--- /dev/null
+++ b/packages/ui/src/lib/separator/TODO.md
@@ -0,0 +1,11 @@
+# Separator TODO
+
+## Goal
+
+Track Separator work with a single mandatory TODO format.
+
+## Backlog
+
+- [x] [S][P0][Area: Accessibility][Owner: Unassigned][Target: Done] Render `role="separator"` with `aria-orientation="vertical"` for a vertical line, and `role="none"` for a decorative one.
+- [x] [S][P0][Area: Testing][Owner: Unassigned][Target: Done] Add coverage for the roles, the orientation, `bind:element` and SSR.
+- [ ] [M][P3][Area: API][Owner: Unassigned][Target: Backlog] Add a focusable window splitter with `aria-valuenow` and the arrow keys, as a primitive of its own.
diff --git a/packages/ui/src/lib/separator/index.ts b/packages/ui/src/lib/separator/index.ts
new file mode 100644
index 00000000..2743b880
--- /dev/null
+++ b/packages/ui/src/lib/separator/index.ts
@@ -0,0 +1,8 @@
+import type { ComponentProps } from 'svelte';
+import type SeparatorComponent from './separator.svelte';
+import Separator from './separator.svelte';
+
+export type SeparatorProps = ComponentProps<typeof SeparatorComponent>;
+export type { SeparatorOrientation } from './types.js';
+export { Separator };
+export default Separator;
diff --git a/packages/ui/src/lib/separator/separator-ssr.test.ts b/packages/ui/src/lib/separator/separator-ssr.test.ts
new file mode 100644
index 00000000..b01df43c
--- /dev/null
+++ b/packages/ui/src/lib/separator/separator-ssr.test.ts
@@ -0,0 +1,20 @@
+// @vitest-environment node
+
+import { describe, expect, it } from 'vitest';
+import { render } from 'svelte/server';
+import SeparatorTest from './separator-test.svelte';
+
+describe('Separator SSR', () => {
+	it('renders the role and the orientation before hydration', () => {
+		const { body } = render(SeparatorTest, { props: { orientation: 'vertical' } });
+		expect(body).toContain('role="separator"');
+		expect(body).toContain('aria-orientation="vertical"');
+		expect(body).toContain('data-orientation="vertical"');
+	});
+
+	it('renders no role for a decorative line', () => {
+		const { body } = render(SeparatorTest, { props: { decorative: true } });
+		expect(body).toContain('role="none"');
+		expect(body).not.toContain('aria-orientation');
+	});
+});
diff --git a/packages/ui/src/lib/separator/separator-test.svelte b/packages/ui/src/lib/separator/separator-test.svelte
new file mode 100644
index 00000000..98a72bad
--- /dev/null
+++ b/packages/ui/src/lib/separator/separator-test.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import Separator from './separator.svelte';
+	import type { SeparatorOrientation } from './types.js';
+
+	let {
+		orientation,
+		decorative = false
+	}: { orientation?: SeparatorOrientation; decorative?: boolean } = $props();
+
+	let element = $state<HTMLDivElement | null>(null);
+	let show = $state(true);
+</script>
+
+<p>Before</p>
+{#if show}
+	<Separator {orientation} {decorative} bind:element data-testid="separator" class="line" />
+{/if}
+<p>After</p>
+<span data-testid="element-tag">{element?.tagName ?? 'none'}</span>
+<button type="button" onclick={() => (show = false)}>Unmount</button>
diff --git a/packages/ui/src/lib/separator/separator.svelte b/packages/ui/src/lib/separator/separator.svelte
new file mode 100644
index 00000000..d4f7f536
--- /dev/null
+++ b/packages/ui/src/lib/separator/separator.svelte
@@ -0,0 +1,62 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { SeparatorOrientation } from './types.js';
+
+	type SeparatorProps = Omit<
+		HTMLAttributes<HTMLDivElement>,
+		'children' | 'class' | 'role' | 'aria-orientation'
+	> & {
+		/**
+		 * The direction of the line. A horizontal separator sits between two blocks, one above the
+		 * other. A vertical one sits between two items side by side, such as in a toolbar.
+		 */
+		orientation?: SeparatorOrientation;
+		/**
+		 * Makes the separator a visual line only. A screen reader then skips it. Use it for a line
+		 * that repeats a break the content already makes, such as a border between two sections
+		 * with headings. Without it, the separator is a `role="separator"` element, which a screen
+		 * reader reads as a break between two groups of content.
+		 */
+		decorative?: boolean;
+		/** The CSS class names of the element. */
+		class?: string;
+		/** The separator element. Use `bind:element` to read it. */
+		element?: HTMLDivElement | null;
+	};
+
+	/**
+	 * Separator — a line between two groups of content.
+	 *
+	 * It is a `role="separator"` element, which a screen reader reads as a break, with
+	 * `aria-orientation` for a vertical line: a separator is horizontal unless it says otherwise.
+	 * `decorative` takes the role away for a line that repeats a break the content already makes.
+	 * It has no size of its own: give it a border or a background, and a width or a height.
+	 */
+	let {
+		orientation = 'horizontal',
+		decorative = false,
+		class: className = '',
+		element = $bindable<HTMLDivElement | null>(null),
+		...restProps
+	}: SeparatorProps = $props();
+
+	let separatorRef: HTMLDivElement | null = $state(null);
+
+	$effect(() => {
+		element = separatorRef;
+		return () => {
+			element = null;
+		};
+	});
+</script>
+
+<div
+	{...restProps}
+	bind:this={separatorRef}
+	role={decorative ? 'none' : 'separator'}
+	aria-orientation={decorative || orientation === 'horizontal' ? undefined : 'vertical'}
+	class={className}
+	data-separator-root="true"
+	data-orientation={orientation}
+	data-decorative={decorative || undefined}
+></div>
diff --git a/packages/ui/src/lib/separator/separator.test.ts b/packages/ui/src/lib/separator/separator.test.ts
new file mode 100644
index 00000000..789a7e53
--- /dev/null
+++ b/packages/ui/src/lib/separator/separator.test.ts
@@ -0,0 +1,59 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-svelte';
+import { userEvent } from 'vitest/browser';
+import SeparatorTest from './separator-test.svelte';
+
+function separator() {
+	return document.querySelector<HTMLDivElement>('[data-separator-root="true"]')!;
+}
+
+describe('Separator', () => {
+	it('is a horizontal separator by default, with no aria-orientation', () => {
+		render(SeparatorTest);
+		const element = separator();
+
+		expect(element.getAttribute('role')).toBe('separator');
+		expect(element.hasAttribute('aria-orientation')).toBe(false);
+		expect(element.getAttribute('data-orientation')).toBe('horizontal');
+		expect(element.hasAttribute('data-decorative')).toBe(false);
+		expect(element.className).toBe('line');
+		expect(element.getAttribute('data-testid')).toBe('separator');
+	});
+
+	it('says it is vertical', () => {
+		render(SeparatorTest, { orientation: 'vertical' });
+		const element = separator();
+
+		expect(element.getAttribute('role')).toBe('separator');
+		expect(element.getAttribute('aria-orientation')).toBe('vertical');
+		expect(element.getAttribute('data-orientation')).toBe('vertical');
+	});
+
+	it('is out of the accessibility tree when decorative', () => {
+		render(SeparatorTest, { orientation: 'vertical', decorative: true });
+		const element = separator();
+
+		expect(element.getAttribute('role')).toBe('none');
+		expect(element.hasAttribute('aria-orientation')).toBe(false);
+		expect(element.getAttribute('data-decorative')).toBe('true');
+		expect(element.getAttribute('data-orientation')).toBe('vertical');
+	});
+
+	it('is not a tab stop', async () => {
+		render(SeparatorTest);
+		await userEvent.keyboard('{Tab}');
+		expect(document.activeElement?.tagName).toBe('BUTTON');
+	});
+
+	it('gives its element to bind:element, and takes it back on unmount', async () => {
+		const screen = render(SeparatorTest);
+		await expect
+			.poll(() => document.querySelector('[data-testid="element-tag"]')?.textContent)
+			.toBe('DIV');
+
+		await userEvent.click(screen.getByRole('button', { name: 'Unmount' }));
+		await expect
+			.poll(() => document.querySelector('[data-testid="element-tag"]')?.textContent)
+			.toBe('none');
+	});
+});
diff --git a/packages/ui/src/lib/separator/types.ts b/packages/ui/src/lib/separator/types.ts
new file mode 100644
index 00000000..c824ed1e
--- /dev/null
+++ b/packages/ui/src/lib/separator/types.ts
@@ -0,0 +1 @@
+export type SeparatorOrientation = 'horizontal' | 'vertical';

From 94a15985d5c33bc474651107f99f7188aa24871e Mon Sep 17 00:00:00 2001
From: Agustin Delgado <agustindariodelgado@gmail.com>
Date: Sat, 19 Sep 2026 16:06:39 -0300
Subject: [PATCH 2/4] fix(avatar): name the fallback with the alt of the image

A failed image left a nameless avatar: the screen reader heard the letters of the initials. The fallback is a role=img named with the alt now, and hidden for an empty alt. The docs note that the image loads on mount, thus loading=lazy has no effect, and the breadcrumbs chevron turns for a right-to-left page.
---
 docs/src/content/avatar/api.json                |  2 +-
 docs/src/content/avatar/index.md                | 10 +++++++---
 docs/src/content/breadcrumbs/demos/hero.svelte  |  2 +-
 packages/ui/src/lib/avatar/README.md            |  4 ++--
 packages/ui/src/lib/avatar/TODO.md              |  2 ++
 .../lib/avatar/fallback/avatar-fallback.svelte  | 10 ++++++++++
 .../ui/src/lib/avatar/image/avatar-image.svelte |  7 +++++++
 .../ui/src/lib/avatar/root/avatar-root.svelte   |  7 +++++++
 packages/ui/src/lib/avatar/root/avatar.test.ts  | 17 +++++++++++++++++
 packages/ui/src/lib/avatar/root/context.ts      |  3 +++
 packages/ui/src/lib/breadcrumbs/TODO.md         |  1 +
 11 files changed, 58 insertions(+), 7 deletions(-)

diff --git a/docs/src/content/avatar/api.json b/docs/src/content/avatar/api.json
index 655213a5..c9ca3958 100644
--- a/docs/src/content/avatar/api.json
+++ b/docs/src/content/avatar/api.json
@@ -87,7 +87,7 @@
 		},
 		{
 			"name": "Fallback",
-			"description": "What shows in place of the image, while the image is not on the screen. `delay` holds it back while the image loads.",
+			"description": "What shows in place of the image, while the image is not on the screen, named with its `alt`. `delay` holds it back while the image loads.",
 			"props": [
 				{
 					"name": "children",
diff --git a/docs/src/content/avatar/index.md b/docs/src/content/avatar/index.md
index 1e1fe69e..62e38a0e 100644
--- a/docs/src/content/avatar/index.md
+++ b/docs/src/content/avatar/index.md
@@ -39,7 +39,7 @@ description: A picture of a person or a thing, with a fallback for when the pict
 
 ## The fallback
 
-`Avatar.Fallback` shows while the image is not on the screen. Give `delay` in milliseconds to hold it back while the image loads. A fallback that flashes before a fast image is noise, and 600 hides it on a good connection. It shows at once when the image fails, or when there is no image.
+`Avatar.Fallback` shows while the image is not on the screen, with the name of the image as its own. Give `delay` in milliseconds to hold it back while the image loads. A fallback that flashes before a fast image is noise, and 600 hides it on a good connection. It shows at once when the image fails, or when there is no image.
 
 ## Status
 
@@ -47,16 +47,20 @@ The root has `data-status` for your styles: `loading`, `loaded` or `error`. `onS
 
 <Demo source={statusSource}><Status /></Demo>
 
+## Lazy images
+
+The image loads as soon as the root mounts, thus `loading="lazy"` on `Avatar.Image` has no effect. A list of avatars below the fold loads them all. Render the list when it comes into view, or keep it short.
+
 ## Usage guidelines
 
-- Give `alt` the name of the person or the thing. Give an empty `alt` when the name is beside the avatar already, thus a screen reader does not read it twice. Hide a fallback of initials with `aria-hidden="true"` in that case.
+- Give `alt` the name of the person or the thing. Give an empty `alt` when the name is beside the avatar already, thus a screen reader does not read it twice. The fallback follows the `alt`: it takes the name, or it hides.
 - Give the root a size and `overflow: hidden`, and the image `object-fit: cover`.
 - Give `delay` to the fallback on a list of avatars: a list that flashes initials is noise.
 
 ## Accessibility
 
 - The image is an `<img>` with your `alt`. The root has no role of its own.
-- The fallback is plain content. A screen reader reads it as text, and initials read as letters. A name in `alt` on the image reads better. So does `aria-hidden` on initials beside a visible name.
+- The fallback takes the name of the image: it is a `role="img"` named with the `alt`. A screen reader hears the name, and not the letters of the initials. An empty `alt` hides it. Without an image, it is plain content.
 - Nothing in the avatar is focusable.
 
 ## API reference
diff --git a/docs/src/content/breadcrumbs/demos/hero.svelte b/docs/src/content/breadcrumbs/demos/hero.svelte
index d9459880..f4585f18 100644
--- a/docs/src/content/breadcrumbs/demos/hero.svelte
+++ b/docs/src/content/breadcrumbs/demos/hero.svelte
@@ -24,7 +24,7 @@
 					{page.title}
 				</Breadcrumbs.Link>
 				<Breadcrumbs.Separator class="text-neutral-400">
-					<ChevronRightIcon class="size-3.5" />
+					<ChevronRightIcon class="size-3.5 rtl:-scale-x-100" />
 				</Breadcrumbs.Separator>
 			</Breadcrumbs.Item>
 		{/each}
diff --git a/packages/ui/src/lib/avatar/README.md b/packages/ui/src/lib/avatar/README.md
index 965fe33f..7260dbc5 100644
--- a/packages/ui/src/lib/avatar/README.md
+++ b/packages/ui/src/lib/avatar/README.md
@@ -19,7 +19,7 @@
 
 ## Usage guidelines
 
-- Give `alt` the name of the person or the thing. Give an empty `alt` when the name is beside the avatar already, and hide a fallback of initials with `aria-hidden="true"` in that case.
+- Give `alt` the name of the person or the thing. Give an empty `alt` when the name is beside the avatar already. The fallback follows the `alt`: it takes the name, or it hides.
 - Give `delay` to the fallback, such as 600, thus a fast image does not flash initials first.
 - Style the root by `data-status`: `loading`, `loaded` or `error`.
 - Read the status with `onStatusChange` on the root.
@@ -39,5 +39,5 @@
 ## Accessibility
 
 - The image is an `<img>` with your `alt`. The root has no role of its own.
-- The fallback is plain content. A screen reader reads it as text, and initials read as letters. A name in `alt` on the image reads better. So does `aria-hidden` on initials beside a visible name.
+- The fallback takes the name of the image: it is a `role="img"` named with the `alt`. A screen reader hears the name, and not the letters of the initials. An empty `alt` hides it. Without an image, it is plain content.
 - Nothing in the avatar is focusable.
diff --git a/packages/ui/src/lib/avatar/TODO.md b/packages/ui/src/lib/avatar/TODO.md
index c0145b08..45687923 100644
--- a/packages/ui/src/lib/avatar/TODO.md
+++ b/packages/ui/src/lib/avatar/TODO.md
@@ -10,4 +10,6 @@ Track Avatar work with a single mandatory TODO format.
 - [x] [S][P0][Area: State][Owner: Unassigned][Target: Done] Load the image off the screen, show the `<img>` once it is there, and show the fallback at once for a failure or a missing `src`.
 - [x] [S][P1][Area: UX][Owner: Unassigned][Target: Done] Hold the fallback back for `delay` milliseconds while the image loads.
 - [x] [M][P0][Area: Testing][Owner: Unassigned][Target: Done] Add coverage for the load, the failure, the missing source, the delay, a change of source, `onStatusChange`, and SSR.
+- [x] [S][P1][Area: Accessibility][Owner: Unassigned][Target: Done] Name the fallback with the `alt` of the image, and hide it for an empty `alt`.
 - [ ] [S][P2][Area: API][Owner: Unassigned][Target: Backlog] Add an `Avatar.Group` for a row of avatars that overlap, with a count of the rest.
+- [ ] [S][P2][Area: Performance][Owner: Unassigned][Target: Backlog] Honor `loading="lazy"`: start the load when the root comes into view, and not on mount.
diff --git a/packages/ui/src/lib/avatar/fallback/avatar-fallback.svelte b/packages/ui/src/lib/avatar/fallback/avatar-fallback.svelte
index d19dca5e..216f5947 100644
--- a/packages/ui/src/lib/avatar/fallback/avatar-fallback.svelte
+++ b/packages/ui/src/lib/avatar/fallback/avatar-fallback.svelte
@@ -8,6 +8,11 @@
 	 * It shows while the image is not on the screen. `delay` holds it back while the image
 	 * loads, thus a fast image does not flash a fallback first. It shows at once when the image
 	 * fails, or when there is no image.
+	 *
+	 * It takes the name of the image: with an `alt` on `Avatar.Image`, the fallback is a
+	 * `role="img"` with that `alt` as its name, thus a screen reader hears "Ada Lovelace" and not
+	 * the letters of her initials. An empty `alt` makes the fallback decorative, the same as it
+	 * makes the image.
 	 */
 	let {
 		children,
@@ -42,12 +47,17 @@
 	const shown = $derived(
 		avatar.status === 'error' || (avatar.status === 'loading' && (delay <= 0 || delayPassed))
 	);
+	// `undefined` without an image: the fallback is then the content, with no name of its own.
+	const name = $derived(avatar.alt);
 </script>
 
 {#if shown}
 	<span
 		{...restProps}
 		bind:this={fallbackRef}
+		role={name ? 'img' : undefined}
+		aria-label={name || undefined}
+		aria-hidden={name === '' ? 'true' : undefined}
 		class={className}
 		data-avatar-fallback="true"
 		data-status={avatar.status}
diff --git a/packages/ui/src/lib/avatar/image/avatar-image.svelte b/packages/ui/src/lib/avatar/image/avatar-image.svelte
index 1c5eb31f..6a7d177b 100644
--- a/packages/ui/src/lib/avatar/image/avatar-image.svelte
+++ b/packages/ui/src/lib/avatar/image/avatar-image.svelte
@@ -24,6 +24,13 @@
 
 	let imageRef: HTMLImageElement | null = $state(null);
 
+	// The fallback takes the name of the image, thus a failed image is not a nameless avatar.
+	$effect(() => {
+		const name = alt;
+		untrack(() => avatar.setAlt(name));
+		return () => avatar.setAlt(undefined);
+	});
+
 	$effect(() => {
 		element = imageRef;
 		return () => {
diff --git a/packages/ui/src/lib/avatar/root/avatar-root.svelte b/packages/ui/src/lib/avatar/root/avatar-root.svelte
index 50843e96..2740cea3 100644
--- a/packages/ui/src/lib/avatar/root/avatar-root.svelte
+++ b/packages/ui/src/lib/avatar/root/avatar-root.svelte
@@ -20,6 +20,7 @@
 
 	let rootRef: HTMLSpanElement | null = $state(null);
 	let status = $state<AvatarStatus>('loading');
+	let alt = $state<string | undefined>(undefined);
 
 	const context: AvatarContext = {
 		get status() {
@@ -29,6 +30,12 @@
 			if (status === next) return;
 			status = next;
 			onStatusChange?.(next);
+		},
+		get alt() {
+			return alt;
+		},
+		setAlt(next) {
+			alt = next;
 		}
 	};
 
diff --git a/packages/ui/src/lib/avatar/root/avatar.test.ts b/packages/ui/src/lib/avatar/root/avatar.test.ts
index 0dc6cb54..e3ae9e6b 100644
--- a/packages/ui/src/lib/avatar/root/avatar.test.ts
+++ b/packages/ui/src/lib/avatar/root/avatar.test.ts
@@ -39,6 +39,23 @@ describe('Avatar', () => {
 		expect(onStatusChange).toHaveBeenLastCalledWith('error');
 	});
 
+	it('gives the fallback the name of the image, and hides it for an empty alt', async () => {
+		render(AvatarTest, { src: BROKEN });
+		await expect.poll(() => byTestId('root')?.getAttribute('data-status')).toBe('error');
+		const fallback = byTestId('fallback');
+		expect(fallback?.getAttribute('role')).toBe('img');
+		expect(fallback?.getAttribute('aria-label')).toBe('Ada Lovelace');
+		expect(fallback?.hasAttribute('aria-hidden')).toBe(false);
+
+		document.body.innerHTML = '';
+		render(AvatarTest, { src: BROKEN, alt: '' });
+		await expect.poll(() => byTestId('root')?.getAttribute('data-status')).toBe('error');
+		const decorative = byTestId('fallback');
+		expect(decorative?.hasAttribute('role')).toBe(false);
+		expect(decorative?.hasAttribute('aria-label')).toBe(false);
+		expect(decorative?.getAttribute('aria-hidden')).toBe('true');
+	});
+
 	it('shows the fallback at once without a source', async () => {
 		render(AvatarTest, { src: null });
 
diff --git a/packages/ui/src/lib/avatar/root/context.ts b/packages/ui/src/lib/avatar/root/context.ts
index 2d1fb77d..d6b4a57f 100644
--- a/packages/ui/src/lib/avatar/root/context.ts
+++ b/packages/ui/src/lib/avatar/root/context.ts
@@ -8,6 +8,9 @@ export type AvatarStatus = 'loading' | 'loaded' | 'error';
 export type AvatarContext = {
 	status: AvatarStatus;
 	setStatus: (status: AvatarStatus) => void;
+	/** The `alt` of the image, thus the fallback can take its name. `undefined` without an image. */
+	alt: string | undefined;
+	setAlt: (alt: string | undefined) => void;
 };
 
 export function setAvatarContext(context: AvatarContext) {
diff --git a/packages/ui/src/lib/breadcrumbs/TODO.md b/packages/ui/src/lib/breadcrumbs/TODO.md
index 9c624f0b..c357d7ab 100644
--- a/packages/ui/src/lib/breadcrumbs/TODO.md
+++ b/packages/ui/src/lib/breadcrumbs/TODO.md
@@ -10,4 +10,5 @@ Track Breadcrumbs work with a single mandatory TODO format.
 - [x] [S][P0][Area: Accessibility][Owner: Unassigned][Target: Done] Render a `<nav>` named "Breadcrumb" in six languages, an `<ol>` of `<li>`, `aria-current="page"` on the current link, and `aria-hidden` separators.
 - [x] [S][P1][Area: Accessibility][Owner: Unassigned][Target: Done] Render a `<span>` for a link without an `href` or with `disabled`, out of the tab order.
 - [x] [M][P0][Area: Testing][Owner: Unassigned][Target: Done] Add coverage for the landmark, the locale, the current page, the separators, the disabled link, the tab order, and SSR.
+- [x] [S][P0][Area: Accessibility][Owner: Unassigned][Target: Done] Keep `role="list"` on the `<ol>` in writing, for the browsers that drop a list with `list-style: none`.
 - [ ] [M][P2][Area: UX][Owner: Unassigned][Target: Backlog] Collapse the middle of a long trail behind a menu, with the first and the last pages in view.

From 770110da83e3aa53643d0da4a4bf505951415f33 Mon Sep 17 00:00:00 2001
From: Agustin Delgado <agustindariodelgado@gmail.com>
Date: Sat, 19 Sep 2026 16:36:36 -0300
Subject: [PATCH 3/4] feat: pay the backlog of Avatar, Breadcrumbs and
 Separator

Avatar: loading=lazy starts the load when the avatar comes into view; Avatar.Group is a named role=group with a max, and Avatar.Count says how many are past it, as +N on the screen and N more for the screen reader.

Breadcrumbs: maxItems folds the middle of a long trail behind Breadcrumbs.Ellipsis, a button named Show N more pages; a press unfolds the trail and moves the focus to the first page that comes into view.

Separator: with a value it is a window splitter, a tab stop with aria-valuenow that the arrow keys, Home, End, Enter and a pointer drag along the parent move, with the horizontal arrows flipped on a right-to-left page.
---
 .changeset/avatar-v1.md                       |   2 +-
 .changeset/breadcrumbs-v1.md                  |   2 +-
 .changeset/separator-v1.md                    |   2 +-
 docs/src/content/avatar/api.json              | 102 +++++++++
 docs/src/content/avatar/demos/group.svelte    |  39 ++++
 docs/src/content/avatar/index.md              |  14 +-
 docs/src/content/breadcrumbs/api.json         |  83 +++++++
 .../breadcrumbs/demos/collapsed.svelte        |  38 ++++
 docs/src/content/breadcrumbs/index.md         |  11 +-
 docs/src/content/separator/api.json           |  80 ++++++-
 .../content/separator/demos/splitter.svelte   |  25 +++
 docs/src/content/separator/index.md           |  17 +-
 packages/ui/src/lib/avatar/README.md          |   9 +
 packages/ui/src/lib/avatar/TODO.md            |   4 +-
 .../src/lib/avatar/count/avatar-count.svelte  |  56 +++++
 .../lib/avatar/group/avatar-group-test.svelte |  24 +++
 .../src/lib/avatar/group/avatar-group.svelte  |  65 ++++++
 .../src/lib/avatar/group/avatar-group.test.ts |  66 ++++++
 packages/ui/src/lib/avatar/group/context.ts   |  32 +++
 .../src/lib/avatar/image/avatar-image.svelte  |  27 ++-
 packages/ui/src/lib/avatar/index.parts.ts     |   2 +
 packages/ui/src/lib/avatar/index.ts           |  13 ++
 .../ui/src/lib/avatar/root/avatar-root.svelte |  37 +++-
 .../ui/src/lib/avatar/root/avatar-test.svelte |  14 +-
 .../ui/src/lib/avatar/root/avatar.test.ts     |  13 ++
 packages/ui/src/lib/avatar/root/context.ts    |   2 +
 packages/ui/src/lib/avatar/types.ts           |  53 ++++-
 packages/ui/src/lib/breadcrumbs/README.md     |   6 +
 packages/ui/src/lib/breadcrumbs/TODO.md       |   2 +-
 .../ellipsis/breadcrumbs-ellipsis.svelte      |  62 ++++++
 .../ui/src/lib/breadcrumbs/index.parts.ts     |   1 +
 packages/ui/src/lib/breadcrumbs/index.ts      |   9 +
 .../breadcrumbs/item/breadcrumbs-item.svelte  |  20 +-
 .../root/breadcrumbs-collapse-test.svelte     |  36 ++++
 .../root/breadcrumbs-collapse.test.ts         |  79 +++++++
 .../breadcrumbs/root/breadcrumbs-root.svelte  |  65 ++++++
 .../ui/src/lib/breadcrumbs/root/context.ts    |  36 ++++
 packages/ui/src/lib/breadcrumbs/types.ts      |  36 +++-
 .../ui/src/lib/internal/localized-strings.ts  |  16 ++
 packages/ui/src/lib/separator/README.md       |   6 +-
 packages/ui/src/lib/separator/TODO.md         |   2 +-
 .../ui/src/lib/separator/separator.svelte     | 202 +++++++++++++++++-
 .../ui/src/lib/separator/splitter-test.svelte |  53 +++++
 .../ui/src/lib/separator/splitter.test.ts     | 159 ++++++++++++++
 44 files changed, 1583 insertions(+), 39 deletions(-)
 create mode 100644 docs/src/content/avatar/demos/group.svelte
 create mode 100644 docs/src/content/breadcrumbs/demos/collapsed.svelte
 create mode 100644 docs/src/content/separator/demos/splitter.svelte
 create mode 100644 packages/ui/src/lib/avatar/count/avatar-count.svelte
 create mode 100644 packages/ui/src/lib/avatar/group/avatar-group-test.svelte
 create mode 100644 packages/ui/src/lib/avatar/group/avatar-group.svelte
 create mode 100644 packages/ui/src/lib/avatar/group/avatar-group.test.ts
 create mode 100644 packages/ui/src/lib/avatar/group/context.ts
 create mode 100644 packages/ui/src/lib/breadcrumbs/ellipsis/breadcrumbs-ellipsis.svelte
 create mode 100644 packages/ui/src/lib/breadcrumbs/root/breadcrumbs-collapse-test.svelte
 create mode 100644 packages/ui/src/lib/breadcrumbs/root/breadcrumbs-collapse.test.ts
 create mode 100644 packages/ui/src/lib/breadcrumbs/root/context.ts
 create mode 100644 packages/ui/src/lib/separator/splitter-test.svelte
 create mode 100644 packages/ui/src/lib/separator/splitter.test.ts

diff --git a/.changeset/avatar-v1.md b/.changeset/avatar-v1.md
index 44f5fff9..74bd7d8f 100644
--- a/.changeset/avatar-v1.md
+++ b/.changeset/avatar-v1.md
@@ -2,4 +2,4 @@
 '@human-kit/ui': minor
 ---
 
-Add the Avatar primitive with `Root`, `Image` and `Fallback`. The image loads off the screen first, and the `<img>` renders once it is there, thus a broken image icon never shows. The fallback shows while the image is not on the screen, at once for a failure or a missing `src`, and after `delay` milliseconds while a slow image loads. The root has `data-status` and `onStatusChange` for `loading`, `loaded` and `error`.
+Add the Avatar primitive with `Root`, `Image` and `Fallback`. The image loads off the screen first, and the `<img>` renders once it is there, thus a broken image icon never shows. The fallback shows while the image is not on the screen, at once for a failure or a missing `src`, and after `delay` milliseconds while a slow image loads. The root has `data-status` and `onStatusChange` for `loading`, `loaded` and `error`. The fallback takes the name of the image as a `role="img"`, and `loading="lazy"` starts the load when the avatar comes into view. `Avatar.Group` is a named `role="group"` with a `max`, and `Avatar.Count` says how many avatars are past it, as `+N` on the screen and "N more" for the screen reader.
diff --git a/.changeset/breadcrumbs-v1.md b/.changeset/breadcrumbs-v1.md
index 9c51279b..ecc7d6e4 100644
--- a/.changeset/breadcrumbs-v1.md
+++ b/.changeset/breadcrumbs-v1.md
@@ -2,4 +2,4 @@
 '@human-kit/ui': minor
 ---
 
-Add the Breadcrumbs primitive with `Root`, `List`, `Item`, `Link` and `Separator`. The root is a `<nav>` landmark named "Breadcrumb" in the locale of `LocaleProvider`, the list is an `<ol>` of `<li>`, and `current` gives the last link `aria-current="page"`. A link without an `href`, or with `disabled`, is a `<span>` out of the tab order. The separator is `aria-hidden`, in the item after the link, thus the list holds pages only.
+Add the Breadcrumbs primitive with `Root`, `List`, `Item`, `Link` and `Separator`. The root is a `<nav>` landmark named "Breadcrumb" in the locale of `LocaleProvider`, the list is an `<ol>` of `<li>`, and `current` gives the last link `aria-current="page"`. A link without an `href`, or with `disabled`, is a `<span>` out of the tab order. The separator is `aria-hidden`, in the item after the link, thus the list holds pages only. `maxItems` folds the middle of a long trail behind `Breadcrumbs.Ellipsis`, a button named "Show N more pages" that unfolds it and moves the focus to the first page that comes into view.
diff --git a/.changeset/separator-v1.md b/.changeset/separator-v1.md
index 859af00a..ffba1147 100644
--- a/.changeset/separator-v1.md
+++ b/.changeset/separator-v1.md
@@ -2,4 +2,4 @@
 '@human-kit/ui': minor
 ---
 
-Add the Separator primitive: a `role="separator"` line with `aria-orientation="vertical"` for a vertical one, and `role="none"` with `decorative` for a line the content already makes.
+Add the Separator primitive: a `role="separator"` line with `aria-orientation="vertical"` for a vertical one, and `role="none"` with `decorative` for a line the content already makes. With a `value`, it is a window splitter: a tab stop with `aria-valuenow`, which the arrow keys, `Home`, `End`, `Enter` and a pointer drag move.
diff --git a/docs/src/content/avatar/api.json b/docs/src/content/avatar/api.json
index c9ca3958..4aad1d3d 100644
--- a/docs/src/content/avatar/api.json
+++ b/docs/src/content/avatar/api.json
@@ -39,6 +39,10 @@
 					"name": "data-avatar-root",
 					"description": "Present on the element."
 				},
+				{
+					"name": "data-index",
+					"description": "The place of the avatar in its group, from 0. Absent outside a group."
+				},
 				{
 					"name": "data-status",
 					"description": "`loading`, `loaded` or `error`."
@@ -56,6 +60,13 @@
 					"default": null,
 					"description": "The address of the image. Without it, the fallback shows."
 				},
+				{
+					"name": "loading",
+					"type": "'eager' | 'lazy'",
+					"required": false,
+					"default": "'eager'",
+					"description": "`lazy` starts the load when the avatar comes into view, and not on mount. Use it on a long\nlist of avatars, thus the ones below the fold do not all load at once."
+				},
 				{
 					"name": "alt",
 					"type": "string",
@@ -128,6 +139,97 @@
 					"description": "`loading` or `error`: the fallback is not on the screen while the image is."
 				}
 			]
+		},
+		{
+			"name": "Group",
+			"description": "A row of avatars, as a `role=\"group\"` named with `aria-label`. `max` limits the avatars on the screen.",
+			"props": [
+				{
+					"name": "children",
+					"type": "Snippet",
+					"required": false,
+					"default": null,
+					"description": "The avatars, and an `Avatar.Count` for the ones past `max`."
+				},
+				{
+					"name": "class",
+					"type": "string",
+					"required": false,
+					"default": "''",
+					"description": "The CSS class names of the element."
+				},
+				{
+					"name": "max",
+					"type": "number",
+					"required": false,
+					"default": null,
+					"description": "The count of avatars on the screen. The ones past it render nothing, and `Avatar.Count`\nsays how many they are. Without it, every avatar is on the screen."
+				},
+				{
+					"name": "aria-label",
+					"type": "string",
+					"required": false,
+					"default": null,
+					"description": "The name of the group, such as \"Assignees\". A group with no name is a group a screen\nreader cannot tell apart from the content around it."
+				},
+				{
+					"name": "element",
+					"type": "HTMLDivElement | null",
+					"required": false,
+					"default": "null",
+					"description": "The group element. Use `bind:element` to read it."
+				}
+			],
+			"dataAttributes": [
+				{
+					"name": "data-avatar-group",
+					"description": "Present on the element."
+				},
+				{
+					"name": "data-overflow",
+					"description": "Present while the group has more avatars than it shows."
+				}
+			]
+		},
+		{
+			"name": "Count",
+			"description": "The count of avatars past the `max` of the group, as `+N`, and \"N more\" for the screen reader. It renders only while there are some.",
+			"props": [
+				{
+					"name": "children",
+					"type": "Snippet<[AvatarCountState]>",
+					"required": false,
+					"default": null,
+					"description": "The content in place of `+N`. It gets the overflow, the count and the limit."
+				},
+				{
+					"name": "class",
+					"type": "string",
+					"required": false,
+					"default": "''",
+					"description": "The CSS class names of the element."
+				},
+				{
+					"name": "aria-label",
+					"type": "string",
+					"required": false,
+					"default": null,
+					"description": "The name for the screen reader. Without it, \"N more\" in the locale of `LocaleProvider`."
+				},
+				{
+					"name": "element",
+					"type": "HTMLSpanElement | null",
+					"required": false,
+					"default": "null",
+					"description": "The count element, while it is on the screen. Use `bind:element` to read it."
+				}
+			],
+			"dataAttributes": [
+				{
+					"name": "data-avatar-count",
+					"description": "Present on the element."
+				}
+			]
 		}
 	]
 }
diff --git a/docs/src/content/avatar/demos/group.svelte b/docs/src/content/avatar/demos/group.svelte
new file mode 100644
index 00000000..5bcd63a0
--- /dev/null
+++ b/docs/src/content/avatar/demos/group.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+	import { Avatar } from '@human-kit/ui';
+
+	const people = [
+		['Ada Lovelace', '#c7d2fe', '#4338ca'],
+		['Grace Hopper', '#fde68a', '#b45309'],
+		['Katherine Johnson', '#bbf7d0', '#15803d'],
+		['Mary Jackson', '#fecaca', '#b91c1c'],
+		['Dorothy Vaughan', '#e9d5ff', '#7e22ce']
+	] as const;
+
+	// Drawn portraits, thus the demo needs no file and no person.
+	function portrait(back: string, front: string) {
+		return (
+			'data:image/svg+xml;utf8,' +
+			encodeURIComponent(
+				`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80"><rect width="80" height="80" fill="${back}"/><circle cx="40" cy="32" r="14" fill="${front}"/><path d="M12 80c0-16 12-26 28-26s28 10 28 26z" fill="${front}"/></svg>`
+			)
+		);
+	}
+
+	const avatarClass =
+		'inline-flex size-10 items-center justify-center overflow-hidden rounded-full bg-neutral-200 ring-2 ring-white dark:bg-neutral-800 dark:ring-neutral-950';
+</script>
+
+<Avatar.Group max={3} aria-label="Assignees" class="flex -space-x-2">
+	{#each people as [name, back, front] (name)}
+		<Avatar.Root class={avatarClass}>
+			<Avatar.Image src={portrait(back, front)} alt={name} class="size-full object-cover" />
+			<Avatar.Fallback delay={600} class="text-xs font-medium">
+				{name
+					.split(' ')
+					.map((part) => part[0])
+					.join('')}
+			</Avatar.Fallback>
+		</Avatar.Root>
+	{/each}
+	<Avatar.Count class="{avatarClass} text-xs font-medium text-neutral-700 dark:text-neutral-200" />
+</Avatar.Group>
diff --git a/docs/src/content/avatar/index.md b/docs/src/content/avatar/index.md
index 62e38a0e..f785a493 100644
--- a/docs/src/content/avatar/index.md
+++ b/docs/src/content/avatar/index.md
@@ -1,6 +1,6 @@
 ---
 title: Avatar
-description: A picture of a person or a thing, with a fallback for when the picture is not there, which never shows a broken image and holds the fallback back while a fast image loads.
+description: A picture of a person or a thing, with a fallback for when the picture is not there, which never shows a broken image, holds the fallback back while a fast image loads, and groups a row of avatars with a count of the rest.
 ---
 
 <script>
@@ -9,6 +9,8 @@ description: A picture of a person or a thing, with a fallback for when the pict
 	import heroSource from './demos/hero.svelte?highlight';
 	import Status from './demos/status.svelte';
 	import statusSource from './demos/status.svelte?highlight';
+	import Group from './demos/group.svelte';
+	import groupSource from './demos/group.svelte?highlight';
 	import api from './api.json';
 </script>
 
@@ -49,18 +51,26 @@ The root has `data-status` for your styles: `loading`, `loaded` or `error`. `onS
 
 ## Lazy images
 
-The image loads as soon as the root mounts, thus `loading="lazy"` on `Avatar.Image` has no effect. A list of avatars below the fold loads them all. Render the list when it comes into view, or keep it short.
+Give `loading="lazy"` to `Avatar.Image` on a long list: the load then starts when the avatar comes into view, and not on mount. The status is `loading` until then, and the fallback shows after its `delay`.
+
+## A group
+
+`Avatar.Group` is a row of avatars, such as the people on a task. It is a `role="group"`: give it a name with `aria-label`. `max` limits the avatars on the screen, and the ones past it render nothing, thus they load no image. `Avatar.Count` shows how many they are, as `+N`. The screen reader hears "N more", in the locale of `LocaleProvider`.
+
+<Demo source={groupSource}><Group /></Demo>
 
 ## Usage guidelines
 
 - Give `alt` the name of the person or the thing. Give an empty `alt` when the name is beside the avatar already, thus a screen reader does not read it twice. The fallback follows the `alt`: it takes the name, or it hides.
 - Give the root a size and `overflow: hidden`, and the image `object-fit: cover`.
 - Give `delay` to the fallback on a list of avatars: a list that flashes initials is noise.
+- Give a group a name with `aria-label`. A row of pictures with no name is a row a screen reader cannot tell apart from the content around it.
 
 ## Accessibility
 
 - The image is an `<img>` with your `alt`. The root has no role of its own.
 - The fallback takes the name of the image: it is a `role="img"` named with the `alt`. A screen reader hears the name, and not the letters of the initials. An empty `alt` hides it. Without an image, it is plain content.
+- `Avatar.Group` is a `role="group"` named with your `aria-label`. `Avatar.Count` is a `role="img"` named "N more".
 - Nothing in the avatar is focusable.
 
 ## API reference
diff --git a/docs/src/content/breadcrumbs/api.json b/docs/src/content/breadcrumbs/api.json
index 80c4562b..52b3745e 100644
--- a/docs/src/content/breadcrumbs/api.json
+++ b/docs/src/content/breadcrumbs/api.json
@@ -26,6 +26,27 @@
 					"default": null,
 					"description": "The name of the landmark. Without it, the name is \"Breadcrumb\" in the locale of\n`LocaleProvider`. Give one when the page has two sets of breadcrumbs."
 				},
+				{
+					"name": "maxItems",
+					"type": "number",
+					"required": false,
+					"default": null,
+					"description": "The count of items past which the middle of the trail folds behind a `Breadcrumbs.Ellipsis`.\nThe first item and the last `maxItems - 1` stay in view. Without it, every item is in view."
+				},
+				{
+					"name": "expanded",
+					"type": "boolean",
+					"required": false,
+					"default": "false",
+					"description": "True once the user unfolds the trail. Use `bind:expanded` to read it, or to fold it again."
+				},
+				{
+					"name": "onExpandedChange",
+					"type": "(expanded: boolean) => void",
+					"required": false,
+					"default": null,
+					"description": "Called when the trail unfolds or folds."
+				},
 				{
 					"name": "element",
 					"type": "HTMLElement | null",
@@ -38,6 +59,10 @@
 				{
 					"name": "data-breadcrumbs-root",
 					"description": "Present on the element."
+				},
+				{
+					"name": "data-collapsed",
+					"description": "Present while the middle of the trail is folded."
 				}
 			]
 		},
@@ -169,6 +194,64 @@
 				}
 			]
 		},
+		{
+			"name": "Ellipsis",
+			"description": "The button that stands for the folded middle of a long trail, in an `<li>`. It renders only while the trail is folded, named \"Show N more pages\".",
+			"props": [
+				{
+					"name": "children",
+					"type": "Snippet",
+					"required": false,
+					"default": null,
+					"description": "The content of the button. Three dots without children."
+				},
+				{
+					"name": "class",
+					"type": "string",
+					"required": false,
+					"default": "''",
+					"description": "The CSS class names of the button."
+				},
+				{
+					"name": "itemClass",
+					"type": "string",
+					"required": false,
+					"default": "''",
+					"description": "The CSS class names of the `<li>` around the button."
+				},
+				{
+					"name": "separator",
+					"type": "Snippet",
+					"required": false,
+					"default": null,
+					"description": "The sign after the button, such as a `Breadcrumbs.Separator`."
+				},
+				{
+					"name": "aria-label",
+					"type": "string",
+					"required": false,
+					"default": null,
+					"description": "The name of the button. Without it, \"Show N more pages\" in the locale of `LocaleProvider`."
+				},
+				{
+					"name": "element",
+					"type": "HTMLButtonElement | null",
+					"required": false,
+					"default": "null",
+					"description": "The button element, while the trail is folded. Use `bind:element` to read it."
+				}
+			],
+			"dataAttributes": [
+				{
+					"name": "data-breadcrumbs-ellipsis",
+					"description": "Present on the `<li>` around the button."
+				},
+				{
+					"name": "data-breadcrumbs-ellipsis-button",
+					"description": "Present on the button."
+				}
+			]
+		},
 		{
 			"name": "Separator",
 			"description": "The sign between two pages, hidden from the screen reader. A slash without children.",
diff --git a/docs/src/content/breadcrumbs/demos/collapsed.svelte b/docs/src/content/breadcrumbs/demos/collapsed.svelte
new file mode 100644
index 00000000..dc354b23
--- /dev/null
+++ b/docs/src/content/breadcrumbs/demos/collapsed.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { Breadcrumbs } from '@human-kit/ui';
+
+	const pages = ['Home', 'Docs', 'Components', 'Navigation', 'Breadcrumbs'];
+
+	const linkClass =
+		'rounded-sm text-neutral-600 outline-none hover:text-neutral-900 focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 data-[current=true]:font-medium data-[current=true]:text-neutral-900 dark:text-neutral-400 dark:hover:text-white dark:focus-visible:outline-white dark:data-[current=true]:text-white';
+</script>
+
+<Breadcrumbs.Root maxItems={3}>
+	<Breadcrumbs.List class="flex list-none flex-wrap items-center gap-1.5 p-0 text-sm">
+		{#each pages as page, index (page)}
+			<Breadcrumbs.Item class="flex items-center gap-1.5">
+				<Breadcrumbs.Link
+					href="/{page.toLowerCase()}"
+					current={index === pages.length - 1}
+					class={linkClass}
+					onclick={(event) => event.preventDefault()}
+				>
+					{page}
+				</Breadcrumbs.Link>
+				{#if index < pages.length - 1}
+					<Breadcrumbs.Separator class="text-neutral-400" />
+				{/if}
+			</Breadcrumbs.Item>
+			{#if index === 0}
+				<Breadcrumbs.Ellipsis
+					itemClass="flex items-center gap-1.5"
+					class="rounded-sm px-1 text-neutral-600 outline-none hover:text-neutral-900 data-[focus-visible=true]:outline-solid data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-offset-2 data-[focus-visible=true]:outline-neutral-900 dark:text-neutral-400 dark:hover:text-white dark:data-[focus-visible=true]:outline-white"
+				>
+					{#snippet separator()}
+						<Breadcrumbs.Separator class="text-neutral-400" />
+					{/snippet}
+				</Breadcrumbs.Ellipsis>
+			{/if}
+		{/each}
+	</Breadcrumbs.List>
+</Breadcrumbs.Root>
diff --git a/docs/src/content/breadcrumbs/index.md b/docs/src/content/breadcrumbs/index.md
index 64717b89..eb42acc6 100644
--- a/docs/src/content/breadcrumbs/index.md
+++ b/docs/src/content/breadcrumbs/index.md
@@ -1,6 +1,6 @@
 ---
 title: Breadcrumbs
-description: The trail of pages above the one the user is on, as a nav landmark with an ordered list of links, the current page marked for the screen reader, and separators it does not read.
+description: The trail of pages above the one the user is on, as a nav landmark with an ordered list of links, the current page marked for the screen reader, separators it does not read, and a fold for a long trail.
 ---
 
 <script>
@@ -9,6 +9,8 @@ description: The trail of pages above the one the user is on, as a nav landmark
 	import heroSource from './demos/hero.svelte?highlight';
 	import Disabled from './demos/disabled.svelte';
 	import disabledSource from './demos/disabled.svelte?highlight';
+	import Collapsed from './demos/collapsed.svelte';
+	import collapsedSource from './demos/collapsed.svelte?highlight';
 	import api from './api.json';
 </script>
 
@@ -58,6 +60,12 @@ Give `current` to the last link. It gets `aria-current="page"`, and `data-curren
 
 <Demo source={disabledSource}><Disabled /></Demo>
 
+## A long trail
+
+Give `maxItems` to fold the middle of a long trail. The first page and the last `maxItems - 1` stay in view. A `Breadcrumbs.Ellipsis` in the list stands for the rest: put it after the first item. It is a button named "Show N more pages", in the locale of `LocaleProvider`. A press unfolds the trail, and the focus moves to the first page that comes into view. `bind:expanded` reads the state, and folds the trail again.
+
+<Demo source={collapsedSource}><Collapsed /></Demo>
+
 ## The name
 
 The landmark is named "Breadcrumb", in the locale of `LocaleProvider`. Give `aria-label` for a name of your own, and always when the page has two sets of breadcrumbs. Two landmarks with one name are one to the screen reader.
@@ -75,6 +83,7 @@ The landmark is named "Breadcrumb", in the locale of `LocaleProvider`. Give `ari
 - `Breadcrumbs.List` is an `<ol>` of `<li>`: a screen reader says the count and the position of each page. It has `role="list"` in writing, for the browsers that drop a list with `list-style: none`.
 - `Breadcrumbs.Link` with `current` has `aria-current="page"`. Without an `href`, or with `disabled`, it is a `<span>`: not a link, and not a tab stop.
 - `Breadcrumbs.Separator` is `aria-hidden`.
+- `Breadcrumbs.Ellipsis` is a button with a name that says how many pages it hides. After the press, the focus lands on the first of them. The button is gone, and a focus left on nothing is a focus lost.
 - The keyboard moves through the links with `Tab`. Breadcrumbs are links on a page, not a widget with arrow keys.
 
 ## API reference
diff --git a/docs/src/content/separator/api.json b/docs/src/content/separator/api.json
index 3ea93e3f..60902a15 100644
--- a/docs/src/content/separator/api.json
+++ b/docs/src/content/separator/api.json
@@ -3,7 +3,7 @@
 	"parts": [
 		{
 			"name": "Root",
-			"description": "A line between two groups of content. It is a `role=\"separator\"` element, or `role=\"none\"` when decorative. Give it a size with CSS.",
+			"description": "A line between two groups of content: a `role=\"separator\"` element, or `role=\"none\"` when decorative. With a `value`, a window splitter the keyboard and the pointer move. Give it a size with CSS.",
 			"props": [
 				{
 					"name": "orientation",
@@ -17,7 +17,63 @@
 					"type": "boolean",
 					"required": false,
 					"default": "false",
-					"description": "Makes the separator a visual line only. A screen reader then skips it. Use it for a line\nthat repeats a break the content already makes, such as a border between two sections\nwith headings. Without it, the separator is a `role=\"separator\"` element, which a screen\nreader reads as a break between two groups of content."
+					"description": "Makes the separator a visual line only. A screen reader then skips it. Use it for a line\nthat repeats a break the content already makes, such as a border between two sections\nwith headings. Without it, the separator is a `role=\"separator\"` element, which a screen\nreader reads as a break between two groups of content. A separator with a `value` keeps\nits role."
+				},
+				{
+					"name": "value",
+					"type": "number",
+					"required": false,
+					"default": null,
+					"description": "Makes the separator a window splitter the user moves: the size of the pane before it, as a\nnumber between `min` and `max`. Use `bind:value` and give the pane its size from it. The\nsplitter is a tab stop. The arrow keys move it, `Home` and `End` send it to the ends, and\n`Enter` folds the pane and unfolds it. The pointer drags it along its parent."
+				},
+				{
+					"name": "min",
+					"type": "number",
+					"required": false,
+					"default": "0",
+					"description": "The value with the pane folded."
+				},
+				{
+					"name": "max",
+					"type": "number",
+					"required": false,
+					"default": "100",
+					"description": "The value with the pane at its largest."
+				},
+				{
+					"name": "step",
+					"type": "number",
+					"required": false,
+					"default": "1",
+					"description": "The move of one arrow key."
+				},
+				{
+					"name": "largeStep",
+					"type": "number",
+					"required": false,
+					"default": "10",
+					"description": "The move of one arrow key with `Shift`."
+				},
+				{
+					"name": "onValueChange",
+					"type": "(value: number) => void",
+					"required": false,
+					"default": null,
+					"description": "Called with the value after each move."
+				},
+				{
+					"name": "aria-controls",
+					"type": "string",
+					"required": false,
+					"default": null,
+					"description": "The id of the pane the splitter sizes, for `aria-controls`."
+				},
+				{
+					"name": "disabled",
+					"type": "boolean",
+					"required": false,
+					"default": "false",
+					"description": "Holds the splitter still. It stays a tab stop, and it says it is disabled."
 				},
 				{
 					"name": "class",
@@ -39,6 +95,26 @@
 					"name": "data-decorative",
 					"description": "Present when the separator is decorative."
 				},
+				{
+					"name": "data-disabled",
+					"description": "Present on a disabled splitter."
+				},
+				{
+					"name": "data-dragging",
+					"description": "Present while the pointer drags the splitter."
+				},
+				{
+					"name": "data-focus-visible",
+					"description": "Present while the splitter has the focus from the keyboard."
+				},
+				{
+					"name": "data-focused",
+					"description": "Present while the splitter has the focus."
+				},
+				{
+					"name": "data-movable",
+					"description": "Present on a window splitter: a separator with a `value`."
+				},
 				{
 					"name": "data-orientation",
 					"description": "`horizontal` or `vertical`."
diff --git a/docs/src/content/separator/demos/splitter.svelte b/docs/src/content/separator/demos/splitter.svelte
new file mode 100644
index 00000000..e37e9a23
--- /dev/null
+++ b/docs/src/content/separator/demos/splitter.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { Separator } from '@human-kit/ui';
+
+	// The pane before the splitter takes its width from the value, as a share of the row.
+	let value = $state(35);
+</script>
+
+<div class="flex h-40 w-full text-sm text-neutral-900 dark:text-white">
+	<div id="splitter-pane" class="overflow-hidden p-3" style="flex: 0 0 {value}%">
+		<p>Files</p>
+		<p class="text-neutral-500">{Math.round(value)}% of the row</p>
+	</div>
+	<Separator
+		orientation="vertical"
+		bind:value
+		min={10}
+		max={90}
+		aria-label="Resize the file list"
+		aria-controls="splitter-pane"
+		class="w-1 shrink-0 cursor-col-resize bg-neutral-200 outline-none hover:bg-neutral-400 data-[dragging=true]:bg-neutral-900 data-[focus-visible=true]:outline-solid data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-offset-2 data-[focus-visible=true]:outline-neutral-900 dark:bg-neutral-800 dark:hover:bg-neutral-600 dark:data-[dragging=true]:bg-white dark:data-[focus-visible=true]:outline-white"
+	/>
+	<div class="flex-1 p-3">
+		<p>Preview</p>
+	</div>
+</div>
diff --git a/docs/src/content/separator/index.md b/docs/src/content/separator/index.md
index 1930b902..6deb2d6e 100644
--- a/docs/src/content/separator/index.md
+++ b/docs/src/content/separator/index.md
@@ -1,12 +1,14 @@
 ---
 title: Separator
-description: A line between two groups of content, which a screen reader reads as a break, horizontal or vertical, or decorative and skipped.
+description: A line between two groups of content, which a screen reader reads as a break, horizontal or vertical, decorative and skipped, or a window splitter the keyboard and the pointer move.
 ---
 
 <script>
 	import { Demo, ApiReference } from '$lib/docs/components/index.js';
 	import Hero from './demos/hero.svelte';
 	import heroSource from './demos/hero.svelte?highlight';
+	import Splitter from './demos/splitter.svelte';
+	import splitterSource from './demos/splitter.svelte?highlight';
 	import api from './api.json';
 </script>
 
@@ -36,17 +38,26 @@ A separator is horizontal by default: it sits between two blocks, one above the
 
 Some lines repeat a break the content already makes, such as a border between two sections with headings. A screen reader would read two breaks. Give `decorative` to such a line: it becomes `role="none"`, and the screen reader skips it.
 
+## A window splitter
+
+Give `value` for a separator the user moves: the size of the pane before it, as a number between `min` and `max`. Use `bind:value`, and give the pane its size from it. The splitter is then a tab stop with `aria-valuenow`, and it has a name from `aria-label`. Give `aria-controls` the id of the pane.
+
+The arrow keys of its axis move it by `step`, and by `largeStep` with `Shift`. `Home` and `End` send it to the ends. `Enter` folds the pane to `min`, and unfolds it to where it was. The pointer drags it along its parent: a move of a fifth of the parent is a fifth of the range. `data-dragging` is on it through the drag, and `data-focus-visible` with the keyboard focus.
+
+<Demo source={splitterSource}><Splitter /></Demo>
+
 ## Usage guidelines
 
 - Give the line a size with CSS: a height and a width, or a border.
 - Use `decorative` when the content around the line already tells the reader where one group ends.
-- A separator that the user moves, such as a window splitter, is a different pattern. This one is not focusable.
+- Give a splitter a name with `aria-label`, such as "Resize the file list", and a width the pointer can find.
 
 ## Accessibility
 
 - The element is `role="separator"`. A vertical one has `aria-orientation="vertical"`: a separator is horizontal unless it says otherwise.
 - `decorative` makes it `role="none"`, out of the accessibility tree.
-- It has no tab stop.
+- A plain separator has no tab stop. A splitter has one, with `aria-valuenow`, `aria-valuemin`, `aria-valuemax`, `aria-controls` and a name. The keyboard moves it: the arrows, `Home`, `End` and `Enter`.
+- On a right-to-left page the horizontal arrows flip. `ArrowLeft` grows the pane before a vertical splitter, because that pane is on the right.
 
 ## API reference
 
diff --git a/packages/ui/src/lib/avatar/README.md b/packages/ui/src/lib/avatar/README.md
index 7260dbc5..d0d713cc 100644
--- a/packages/ui/src/lib/avatar/README.md
+++ b/packages/ui/src/lib/avatar/README.md
@@ -9,6 +9,8 @@
 - `Avatar.Root`
 - `Avatar.Image`
 - `Avatar.Fallback`
+- `Avatar.Group`
+- `Avatar.Count`
 
 ```svelte
 <Avatar.Root class="size-10 rounded-full">
@@ -23,6 +25,8 @@
 - Give `delay` to the fallback, such as 600, thus a fast image does not flash initials first.
 - Style the root by `data-status`: `loading`, `loaded` or `error`.
 - Read the status with `onStatusChange` on the root.
+- Give `loading="lazy"` to the image on a long list: the load starts when the avatar comes into view.
+- Put a row of avatars in `Avatar.Group` with an `aria-label` and a `max`, and an `Avatar.Count` for the ones past the limit.
 
 ## API reference
 
@@ -35,9 +39,14 @@
 - `Avatar.Fallback`
   - `delay?: number` (`0`)
   - `element?: HTMLSpanElement | null` (bindable)
+- `Avatar.Group`
+  - `max?: number`, `aria-label?: string`
+- `Avatar.Count`
+  - `children?: Snippet<[{ overflow, count, max }]>`, `aria-label?: string` ("N more", localized)
 
 ## Accessibility
 
 - The image is an `<img>` with your `alt`. The root has no role of its own.
 - The fallback takes the name of the image: it is a `role="img"` named with the `alt`. A screen reader hears the name, and not the letters of the initials. An empty `alt` hides it. Without an image, it is plain content.
+- `Avatar.Group` is a `role="group"` named with your `aria-label`. `Avatar.Count` is a `role="img"` named "N more".
 - Nothing in the avatar is focusable.
diff --git a/packages/ui/src/lib/avatar/TODO.md b/packages/ui/src/lib/avatar/TODO.md
index 45687923..7db71f82 100644
--- a/packages/ui/src/lib/avatar/TODO.md
+++ b/packages/ui/src/lib/avatar/TODO.md
@@ -11,5 +11,5 @@ Track Avatar work with a single mandatory TODO format.
 - [x] [S][P1][Area: UX][Owner: Unassigned][Target: Done] Hold the fallback back for `delay` milliseconds while the image loads.
 - [x] [M][P0][Area: Testing][Owner: Unassigned][Target: Done] Add coverage for the load, the failure, the missing source, the delay, a change of source, `onStatusChange`, and SSR.
 - [x] [S][P1][Area: Accessibility][Owner: Unassigned][Target: Done] Name the fallback with the `alt` of the image, and hide it for an empty `alt`.
-- [ ] [S][P2][Area: API][Owner: Unassigned][Target: Backlog] Add an `Avatar.Group` for a row of avatars that overlap, with a count of the rest.
-- [ ] [S][P2][Area: Performance][Owner: Unassigned][Target: Backlog] Honor `loading="lazy"`: start the load when the root comes into view, and not on mount.
+- [x] [S][P2][Area: API][Owner: Unassigned][Target: Done] Add `Avatar.Group` and `Avatar.Count` for a row of avatars with a limit and a count of the rest.
+- [x] [S][P2][Area: Performance][Owner: Unassigned][Target: Done] Honor `loading="lazy"`: start the load when the root comes into view, and not on mount.
diff --git a/packages/ui/src/lib/avatar/count/avatar-count.svelte b/packages/ui/src/lib/avatar/count/avatar-count.svelte
new file mode 100644
index 00000000..6cddc510
--- /dev/null
+++ b/packages/ui/src/lib/avatar/count/avatar-count.svelte
@@ -0,0 +1,56 @@
+<script lang="ts">
+	import { readable } from 'svelte/store';
+	import { resolveLocalizedString } from '../../internal/localized-strings';
+	import { useLocaleContextOptional } from '../../locale-provider/context';
+	import type { AvatarCountProps } from '../types.js';
+	import { useAvatarGroupContext } from '../group/context';
+
+	/**
+	 * Avatar.Count — the count of avatars past the `max` of the group, such as `+3`.
+	 *
+	 * It renders only while the group has more avatars than it shows. The screen reader hears
+	 * "3 more", in the locale of `LocaleProvider`, and not "plus three".
+	 */
+	let {
+		children,
+		class: className = '',
+		'aria-label': ariaLabelProp,
+		element = $bindable<HTMLSpanElement | null>(null),
+		...restProps
+	}: AvatarCountProps = $props();
+
+	const group = useAvatarGroupContext('Avatar.Count');
+
+	const localeContext = useLocaleContextOptional();
+	const emptyLocaleStore = readable<string | undefined>(undefined);
+	const localeStore = localeContext?.locale ?? emptyLocaleStore;
+	const ariaLabel = $derived(
+		ariaLabelProp ?? resolveLocalizedString($localeStore, 'avatar.more', { count: group.overflow })
+	);
+
+	let countRef: HTMLSpanElement | null = $state(null);
+
+	$effect(() => {
+		element = countRef;
+		return () => {
+			element = null;
+		};
+	});
+</script>
+
+{#if group.overflow > 0}
+	<span
+		{...restProps}
+		bind:this={countRef}
+		role="img"
+		aria-label={ariaLabel}
+		class={className}
+		data-avatar-count="true"
+	>
+		{#if children}
+			{@render children({ overflow: group.overflow, count: group.count, max: group.max })}
+		{:else}
+			+{group.overflow}
+		{/if}
+	</span>
+{/if}
diff --git a/packages/ui/src/lib/avatar/group/avatar-group-test.svelte b/packages/ui/src/lib/avatar/group/avatar-group-test.svelte
new file mode 100644
index 00000000..cd2d86e3
--- /dev/null
+++ b/packages/ui/src/lib/avatar/group/avatar-group-test.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { Avatar } from '../index';
+	import LocaleProvider from '../../locale-provider/index';
+
+	let {
+		names = ['Ada', 'Grace', 'Katherine', 'Mary', 'Dorothy'],
+		max = undefined,
+		locale = undefined,
+		lazy = false
+	}: { names?: string[]; max?: number; locale?: string; lazy?: boolean } = $props();
+</script>
+
+<div style="height: 200vh"></div>
+<LocaleProvider {locale}>
+	<Avatar.Group {max} aria-label="Assignees" data-testid="group">
+		{#each names as name (name)}
+			<Avatar.Root data-testid="avatar">
+				<Avatar.Image src={null} alt={name} loading={lazy ? 'lazy' : 'eager'} />
+				<Avatar.Fallback>{name.slice(0, 1)}</Avatar.Fallback>
+			</Avatar.Root>
+		{/each}
+		<Avatar.Count data-testid="count" />
+	</Avatar.Group>
+</LocaleProvider>
diff --git a/packages/ui/src/lib/avatar/group/avatar-group.svelte b/packages/ui/src/lib/avatar/group/avatar-group.svelte
new file mode 100644
index 00000000..d581b387
--- /dev/null
+++ b/packages/ui/src/lib/avatar/group/avatar-group.svelte
@@ -0,0 +1,65 @@
+<script lang="ts">
+	import type { AvatarGroupProps } from '../types.js';
+	import { setAvatarGroupContext, type AvatarGroupContext } from './context';
+
+	/**
+	 * Avatar.Group — a row of avatars, such as the people on a task.
+	 *
+	 * It is a `role="group"`: give it a name with `aria-label`, thus a screen reader user knows
+	 * what the row is. `max` limits the avatars on the screen. The ones past it render nothing,
+	 * and `Avatar.Count` says how many they are.
+	 */
+	let {
+		children,
+		class: className = '',
+		max,
+		element = $bindable<HTMLDivElement | null>(null),
+		...restProps
+	}: AvatarGroupProps = $props();
+
+	let groupRef: HTMLDivElement | null = $state(null);
+	let ids = $state<string[]>([]);
+
+	const limit = $derived(max === undefined || max < 0 ? Infinity : Math.floor(max));
+
+	const context: AvatarGroupContext = {
+		get count() {
+			return ids.length;
+		},
+		get max() {
+			return limit;
+		},
+		get overflow() {
+			return Math.max(0, ids.length - limit);
+		},
+		register(id) {
+			ids = [...ids, id];
+			return () => {
+				ids = ids.filter((candidate) => candidate !== id);
+			};
+		},
+		indexOf(id) {
+			return ids.indexOf(id);
+		}
+	};
+
+	setAvatarGroupContext(context);
+
+	$effect(() => {
+		element = groupRef;
+		return () => {
+			element = null;
+		};
+	});
+</script>
+
+<div
+	{...restProps}
+	bind:this={groupRef}
+	role="group"
+	class={className}
+	data-avatar-group="true"
+	data-overflow={context.overflow > 0 || undefined}
+>
+	{@render children?.()}
+</div>
diff --git a/packages/ui/src/lib/avatar/group/avatar-group.test.ts b/packages/ui/src/lib/avatar/group/avatar-group.test.ts
new file mode 100644
index 00000000..70beaceb
--- /dev/null
+++ b/packages/ui/src/lib/avatar/group/avatar-group.test.ts
@@ -0,0 +1,66 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-svelte';
+import AvatarGroupTest from './avatar-group-test.svelte';
+
+function avatars() {
+	return Array.from(document.querySelectorAll<HTMLElement>('[data-testid="avatar"]'));
+}
+
+function count() {
+	return document.querySelector<HTMLElement>('[data-testid="count"]');
+}
+
+describe('Avatar.Group', () => {
+	it('is a named group that shows every avatar without a limit, and no count', () => {
+		render(AvatarGroupTest);
+		const group = document.querySelector('[data-testid="group"]');
+
+		expect(group?.getAttribute('role')).toBe('group');
+		expect(group?.getAttribute('aria-label')).toBe('Assignees');
+		expect(group?.hasAttribute('data-overflow')).toBe(false);
+		expect(avatars()).toHaveLength(5);
+		expect(avatars().map((avatar) => avatar.getAttribute('data-index'))).toEqual([
+			'0',
+			'1',
+			'2',
+			'3',
+			'4'
+		]);
+		expect(count()).toBeNull();
+	});
+
+	it('shows the first max avatars, and counts the rest for the screen reader', () => {
+		render(AvatarGroupTest, { max: 3 });
+
+		expect(avatars()).toHaveLength(3);
+		expect(
+			avatars().map((avatar) => avatar.querySelector('[data-avatar-fallback]')?.textContent?.trim())
+		).toEqual(['A', 'G', 'K']);
+		expect(document.querySelector('[data-testid="group"]')?.getAttribute('data-overflow')).toBe(
+			'true'
+		);
+		expect(count()?.textContent?.trim()).toBe('+2');
+		expect(count()?.getAttribute('role')).toBe('img');
+		expect(count()?.getAttribute('aria-label')).toBe('2 more');
+	});
+
+	it('speaks the locale', () => {
+		render(AvatarGroupTest, { max: 4, locale: 'es' });
+		expect(count()?.getAttribute('aria-label')).toBe('1 más');
+	});
+
+	it('follows the list: an avatar that leaves lets the next one in', async () => {
+		const screen = render(AvatarGroupTest, { max: 3 });
+		expect(count()?.textContent?.trim()).toBe('+2');
+
+		await screen.rerender({ max: 3, names: ['Grace', 'Katherine', 'Mary', 'Dorothy'] });
+		expect(
+			avatars().map((avatar) => avatar.querySelector('[data-avatar-fallback]')?.textContent?.trim())
+		).toEqual(['G', 'K', 'M']);
+		expect(count()?.textContent?.trim()).toBe('+1');
+
+		await screen.rerender({ max: 3, names: ['Grace', 'Katherine'] });
+		expect(avatars()).toHaveLength(2);
+		expect(count()).toBeNull();
+	});
+});
diff --git a/packages/ui/src/lib/avatar/group/context.ts b/packages/ui/src/lib/avatar/group/context.ts
new file mode 100644
index 00000000..495605f4
--- /dev/null
+++ b/packages/ui/src/lib/avatar/group/context.ts
@@ -0,0 +1,32 @@
+import { getContext, setContext } from 'svelte';
+
+const KEY = Symbol('avatar-group');
+
+export type AvatarGroupContext = {
+	/** The count of avatars in the group, on the screen or not. */
+	readonly count: number;
+	/** The count of avatars on the screen. `Infinity` without a limit. */
+	readonly max: number;
+	/** The count of avatars past the limit. */
+	readonly overflow: number;
+	/** Registers an avatar, and answers its place in the group. The returned function unregisters it. */
+	register: (id: string) => () => void;
+	/** The place of an avatar in the group, or -1 when it is not registered. */
+	indexOf: (id: string) => number;
+};
+
+export function setAvatarGroupContext(context: AvatarGroupContext) {
+	setContext(KEY, context);
+}
+
+export function getAvatarGroupContext(): AvatarGroupContext | undefined {
+	return getContext<AvatarGroupContext | undefined>(KEY);
+}
+
+export function useAvatarGroupContext(part = 'Avatar'): AvatarGroupContext {
+	const context = getAvatarGroupContext();
+	if (!context) {
+		throw new Error(`${part} must be used within Avatar.Group.`);
+	}
+	return context;
+}
diff --git a/packages/ui/src/lib/avatar/image/avatar-image.svelte b/packages/ui/src/lib/avatar/image/avatar-image.svelte
index 6a7d177b..4544b4f7 100644
--- a/packages/ui/src/lib/avatar/image/avatar-image.svelte
+++ b/packages/ui/src/lib/avatar/image/avatar-image.svelte
@@ -8,11 +8,13 @@
 	 *
 	 * It loads the image off the screen first, and it renders the `<img>` once the image is
 	 * there: a broken image icon, or a blank box, never shows. Without a `src`, or when the
-	 * image fails, the status is `error` and `Avatar.Fallback` shows in its place.
+	 * image fails, the status is `error` and `Avatar.Fallback` shows in its place. With
+	 * `loading="lazy"`, the load waits for the root to come into view.
 	 */
 	let {
 		src,
 		alt,
+		loading = 'eager',
 		class: className = '',
 		element = $bindable<HTMLImageElement | null>(null),
 		crossorigin,
@@ -38,6 +40,25 @@
 		};
 	});
 
+	// A lazy image waits for the root to come into view. Without an observer, it loads at once.
+	let inView = $state(false);
+	$effect(() => {
+		const root = avatar.element;
+		if (loading !== 'lazy' || !root || typeof IntersectionObserver === 'undefined') {
+			inView = true;
+			return;
+		}
+		inView = false;
+		const observer = new IntersectionObserver((entries) => {
+			if (entries.some((entry) => entry.isIntersecting)) {
+				inView = true;
+				observer.disconnect();
+			}
+		});
+		observer.observe(root);
+		return () => observer.disconnect();
+	});
+
 	// The status is set in `untrack`: the setter reads the status to skip a repeat, and a read
 	// here would make the load depend on its own result.
 	$effect(() => {
@@ -46,6 +67,10 @@
 			untrack(() => avatar.setStatus('error'));
 			return;
 		}
+		if (!inView) {
+			untrack(() => avatar.setStatus('loading'));
+			return;
+		}
 		// The same request the `<img>` makes, thus the browser serves the `<img>` from its cache.
 		const loader = new Image();
 		if (crossorigin !== undefined && crossorigin !== null) loader.crossOrigin = crossorigin;
diff --git a/packages/ui/src/lib/avatar/index.parts.ts b/packages/ui/src/lib/avatar/index.parts.ts
index bf069cdf..b366f45b 100644
--- a/packages/ui/src/lib/avatar/index.parts.ts
+++ b/packages/ui/src/lib/avatar/index.parts.ts
@@ -1,3 +1,5 @@
 export { default as Root } from './root/avatar-root.svelte';
 export { default as Image } from './image/avatar-image.svelte';
 export { default as Fallback } from './fallback/avatar-fallback.svelte';
+export { default as Group } from './group/avatar-group.svelte';
+export { default as Count } from './count/avatar-count.svelte';
diff --git a/packages/ui/src/lib/avatar/index.ts b/packages/ui/src/lib/avatar/index.ts
index 9ec47e95..65e2e5b7 100644
--- a/packages/ui/src/lib/avatar/index.ts
+++ b/packages/ui/src/lib/avatar/index.ts
@@ -1,5 +1,7 @@
 import type { ComponentProps } from 'svelte';
+import type AvatarCountComponent from './count/avatar-count.svelte';
 import type AvatarFallbackComponent from './fallback/avatar-fallback.svelte';
+import type AvatarGroupComponent from './group/avatar-group.svelte';
 import type AvatarImageComponent from './image/avatar-image.svelte';
 import type AvatarRootComponent from './root/avatar-root.svelte';
 
@@ -8,9 +10,20 @@ export * as Avatar from './index.parts.js';
 export { default as AvatarRoot } from './root/avatar-root.svelte';
 export { default as AvatarImage } from './image/avatar-image.svelte';
 export { default as AvatarFallback } from './fallback/avatar-fallback.svelte';
+export { default as AvatarGroup } from './group/avatar-group.svelte';
+export { default as AvatarCount } from './count/avatar-count.svelte';
 export type AvatarRootProps = ComponentProps<typeof AvatarRootComponent>;
 export type AvatarImageProps = ComponentProps<typeof AvatarImageComponent>;
 export type AvatarFallbackProps = ComponentProps<typeof AvatarFallbackComponent>;
+export type AvatarGroupProps = ComponentProps<typeof AvatarGroupComponent>;
+export type AvatarCountProps = ComponentProps<typeof AvatarCountComponent>;
+export type { AvatarCountState } from './types.js';
+export {
+	getAvatarGroupContext,
+	setAvatarGroupContext,
+	useAvatarGroupContext,
+	type AvatarGroupContext
+} from './group/context.js';
 export {
 	getAvatarContext,
 	setAvatarContext,
diff --git a/packages/ui/src/lib/avatar/root/avatar-root.svelte b/packages/ui/src/lib/avatar/root/avatar-root.svelte
index 2740cea3..b4d052bc 100644
--- a/packages/ui/src/lib/avatar/root/avatar-root.svelte
+++ b/packages/ui/src/lib/avatar/root/avatar-root.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { AvatarRootProps } from '../types.js';
+	import { getAvatarGroupContext } from '../group/context';
 	import { setAvatarContext, type AvatarContext, type AvatarStatus } from './context';
 
 	/**
@@ -9,6 +10,9 @@
 	 * It holds the status of the image and gives it to the parts: `Avatar.Image` shows once the
 	 * image is on the screen, and `Avatar.Fallback` shows while it is not. The root is a plain
 	 * `<span>` with no role: the name is on the image as `alt`, or on the fallback as text.
+	 *
+	 * In an `Avatar.Group`, it takes a place in the order, and it renders nothing past the
+	 * `max` of the group: a hidden avatar loads no image.
 	 */
 	let {
 		children,
@@ -22,6 +26,15 @@
 	let status = $state<AvatarStatus>('loading');
 	let alt = $state<string | undefined>(undefined);
 
+	// Registered at creation, not in an effect: the place in the group must be known before the
+	// first render, or an avatar past the limit would paint once and go.
+	const group = getAvatarGroupContext();
+	const groupId = $props.id();
+	const unregister = group?.register(groupId);
+	$effect(() => () => unregister?.());
+	const index = $derived(group ? group.indexOf(groupId) : -1);
+	const hidden = $derived(group !== undefined && index >= group.max);
+
 	const context: AvatarContext = {
 		get status() {
 			return status;
@@ -36,6 +49,9 @@
 		},
 		setAlt(next) {
 			alt = next;
+		},
+		get element() {
+			return rootRef;
 		}
 	};
 
@@ -49,12 +65,15 @@
 	});
 </script>
 
-<span
-	{...restProps}
-	bind:this={rootRef}
-	class={className}
-	data-avatar-root="true"
-	data-status={status}
->
-	{@render children?.()}
-</span>
+{#if !hidden}
+	<span
+		{...restProps}
+		bind:this={rootRef}
+		class={className}
+		data-avatar-root="true"
+		data-status={status}
+		data-index={index < 0 ? undefined : index}
+	>
+		{@render children?.()}
+	</span>
+{/if}
diff --git a/packages/ui/src/lib/avatar/root/avatar-test.svelte b/packages/ui/src/lib/avatar/root/avatar-test.svelte
index 016a97f9..a6bd5c0b 100644
--- a/packages/ui/src/lib/avatar/root/avatar-test.svelte
+++ b/packages/ui/src/lib/avatar/root/avatar-test.svelte
@@ -6,11 +6,13 @@
 		src = undefined,
 		alt = 'Ada Lovelace',
 		delay = 0,
+		lazy = false,
 		onStatusChange
 	}: {
 		src?: string | null;
 		alt?: string;
 		delay?: number;
+		lazy?: boolean;
 		onStatusChange?: (status: AvatarStatus) => void;
 	} = $props();
 
@@ -18,8 +20,18 @@
 	let fallback = $state<HTMLSpanElement | null>(null);
 </script>
 
+{#if lazy}
+	<div style="height: 300vh"></div>
+{/if}
 <Avatar.Root data-testid="root" class="avatar" {onStatusChange}>
-	<Avatar.Image {src} {alt} data-testid="image" class="image" bind:element={image} />
+	<Avatar.Image
+		{src}
+		{alt}
+		loading={lazy ? 'lazy' : 'eager'}
+		data-testid="image"
+		class="image"
+		bind:element={image}
+	/>
 	<Avatar.Fallback {delay} data-testid="fallback" class="fallback" bind:element={fallback}>
 		AL
 	</Avatar.Fallback>
diff --git a/packages/ui/src/lib/avatar/root/avatar.test.ts b/packages/ui/src/lib/avatar/root/avatar.test.ts
index e3ae9e6b..20224f8f 100644
--- a/packages/ui/src/lib/avatar/root/avatar.test.ts
+++ b/packages/ui/src/lib/avatar/root/avatar.test.ts
@@ -97,6 +97,19 @@ describe('Avatar', () => {
 		expect(byTestId('fallback')).toBeNull();
 	});
 
+	it('waits for the avatar to come into view with loading lazy', async () => {
+		render(AvatarTest, { src: PIXEL, lazy: true });
+		// The avatar is below a tall block: out of view until a scroll.
+		expect(byTestId('root')?.getAttribute('data-status')).toBe('loading');
+		await new Promise((done) => setTimeout(done, 150));
+		expect(byTestId('root')?.getAttribute('data-status')).toBe('loading');
+		expect(byTestId('image')).toBeNull();
+
+		byTestId('root')?.scrollIntoView();
+		await expect.poll(() => byTestId('root')?.getAttribute('data-status')).toBe('loaded');
+		expect(byTestId('image')).not.toBeNull();
+	});
+
 	it('is not in the tab order', () => {
 		render(AvatarTest, { src: null });
 		const root = byTestId('root');
diff --git a/packages/ui/src/lib/avatar/root/context.ts b/packages/ui/src/lib/avatar/root/context.ts
index d6b4a57f..2f44e6eb 100644
--- a/packages/ui/src/lib/avatar/root/context.ts
+++ b/packages/ui/src/lib/avatar/root/context.ts
@@ -11,6 +11,8 @@ export type AvatarContext = {
 	/** The `alt` of the image, thus the fallback can take its name. `undefined` without an image. */
 	alt: string | undefined;
 	setAlt: (alt: string | undefined) => void;
+	/** The root element, for a lazy image that waits for it to come into view. */
+	readonly element: HTMLElement | null;
 };
 
 export function setAvatarContext(context: AvatarContext) {
diff --git a/packages/ui/src/lib/avatar/types.ts b/packages/ui/src/lib/avatar/types.ts
index 0808a12b..f329f57f 100644
--- a/packages/ui/src/lib/avatar/types.ts
+++ b/packages/ui/src/lib/avatar/types.ts
@@ -3,6 +3,52 @@ import type { HTMLAttributes, HTMLImgAttributes } from 'svelte/elements';
 import type { AvatarStatus } from './root/context.js';
 
 export type { AvatarContext, AvatarStatus } from './root/context.js';
+export type { AvatarGroupContext } from './group/context.js';
+
+export type AvatarGroupProps = Omit<
+	HTMLAttributes<HTMLDivElement>,
+	'children' | 'class' | 'role'
+> & {
+	/** The avatars, and an `Avatar.Count` for the ones past `max`. */
+	children?: Snippet;
+	/** The CSS class names of the element. */
+	class?: string;
+	/**
+	 * The count of avatars on the screen. The ones past it render nothing, and `Avatar.Count`
+	 * says how many they are. Without it, every avatar is on the screen.
+	 */
+	max?: number;
+	/**
+	 * The name of the group, such as "Assignees". A group with no name is a group a screen
+	 * reader cannot tell apart from the content around it.
+	 */
+	'aria-label'?: string;
+	/** The group element. Use `bind:element` to read it. */
+	element?: HTMLDivElement | null;
+};
+
+export type AvatarCountState = {
+	/** The count of avatars past `max`. */
+	overflow: number;
+	/** The count of avatars in the group. */
+	count: number;
+	/** The limit of the group. */
+	max: number;
+};
+
+export type AvatarCountProps = Omit<
+	HTMLAttributes<HTMLSpanElement>,
+	'children' | 'class' | 'aria-label'
+> & {
+	/** The content in place of `+N`. It gets the overflow, the count and the limit. */
+	children?: Snippet<[AvatarCountState]>;
+	/** The CSS class names of the element. */
+	class?: string;
+	/** The name for the screen reader. Without it, "N more" in the locale of `LocaleProvider`. */
+	'aria-label'?: string;
+	/** The count element, while it is on the screen. Use `bind:element` to read it. */
+	element?: HTMLSpanElement | null;
+};
 
 export type AvatarRootProps = Omit<HTMLAttributes<HTMLSpanElement>, 'children' | 'class'> & {
 	/** `Avatar.Image` and `Avatar.Fallback`. */
@@ -15,9 +61,14 @@ export type AvatarRootProps = Omit<HTMLAttributes<HTMLSpanElement>, 'children' |
 	onStatusChange?: (status: AvatarStatus) => void;
 };
 
-export type AvatarImageProps = Omit<HTMLImgAttributes, 'class' | 'src' | 'alt'> & {
+export type AvatarImageProps = Omit<HTMLImgAttributes, 'class' | 'src' | 'alt' | 'loading'> & {
 	/** The address of the image. Without it, the fallback shows. */
 	src?: string | null;
+	/**
+	 * `lazy` starts the load when the avatar comes into view, and not on mount. Use it on a long
+	 * list of avatars, thus the ones below the fold do not all load at once.
+	 */
+	loading?: 'eager' | 'lazy';
 	/**
 	 * The text in place of the image. Give the name of the person or the thing. Give an empty
 	 * string when the name is beside the avatar already, thus a screen reader does not read it
diff --git a/packages/ui/src/lib/breadcrumbs/README.md b/packages/ui/src/lib/breadcrumbs/README.md
index 9cdbbf7f..5ed69a2d 100644
--- a/packages/ui/src/lib/breadcrumbs/README.md
+++ b/packages/ui/src/lib/breadcrumbs/README.md
@@ -10,6 +10,7 @@
 - `Breadcrumbs.List`
 - `Breadcrumbs.Item`
 - `Breadcrumbs.Link`
+- `Breadcrumbs.Ellipsis`
 - `Breadcrumbs.Separator`
 
 ```svelte
@@ -36,17 +37,21 @@
 - Put the separator in the item, after the link, on every item but the last.
 - Give the root an `aria-label` when the page has two sets of breadcrumbs.
 - Use `disabled` for a page the user cannot open now. The text stays, the link goes.
+- Give `maxItems` to fold a long trail, and put a `Breadcrumbs.Ellipsis` after the first item.
 
 ## API reference
 
 - `Breadcrumbs.Root`
   - `aria-label?: string` ("Breadcrumb", localized)
+  - `maxItems?: number`, `expanded?: boolean` (bindable), `onExpandedChange?: (expanded: boolean) => void`
   - `element?: HTMLElement | null` (bindable)
 - `Breadcrumbs.List`, `Breadcrumbs.Item`
   - `element` (bindable)
 - `Breadcrumbs.Link`
   - `href?: string`, `current?: boolean`, `disabled?: boolean`
   - `element?: HTMLAnchorElement | HTMLSpanElement | null` (bindable)
+- `Breadcrumbs.Ellipsis`
+  - `children` (three dots without children), `itemClass?: string`, `separator?: Snippet`, `aria-label?: string` ("Show N more pages", localized)
 - `Breadcrumbs.Separator`
   - `children` (a slash without children)
 
@@ -56,4 +61,5 @@
 - `Breadcrumbs.List` is an `<ol>` of `<li>`: a screen reader says the count and the position of each page. It has `role="list"` in writing, for the browsers that drop a list with `list-style: none`.
 - `Breadcrumbs.Link` with `current` has `aria-current="page"`. Without an `href`, or with `disabled`, it is a `<span>`: not a link, and not a tab stop.
 - `Breadcrumbs.Separator` is `aria-hidden`. The list already separates the items.
+- `Breadcrumbs.Ellipsis` is a button named "Show N more pages". After the press, the focus lands on the first page that comes into view.
 - The keyboard moves through the links with `Tab`. Breadcrumbs are links on a page, not a widget with arrow keys.
diff --git a/packages/ui/src/lib/breadcrumbs/TODO.md b/packages/ui/src/lib/breadcrumbs/TODO.md
index c357d7ab..d1e89b54 100644
--- a/packages/ui/src/lib/breadcrumbs/TODO.md
+++ b/packages/ui/src/lib/breadcrumbs/TODO.md
@@ -11,4 +11,4 @@ Track Breadcrumbs work with a single mandatory TODO format.
 - [x] [S][P1][Area: Accessibility][Owner: Unassigned][Target: Done] Render a `<span>` for a link without an `href` or with `disabled`, out of the tab order.
 - [x] [M][P0][Area: Testing][Owner: Unassigned][Target: Done] Add coverage for the landmark, the locale, the current page, the separators, the disabled link, the tab order, and SSR.
 - [x] [S][P0][Area: Accessibility][Owner: Unassigned][Target: Done] Keep `role="list"` on the `<ol>` in writing, for the browsers that drop a list with `list-style: none`.
-- [ ] [M][P2][Area: UX][Owner: Unassigned][Target: Backlog] Collapse the middle of a long trail behind a menu, with the first and the last pages in view.
+- [x] [M][P2][Area: UX][Owner: Unassigned][Target: Done] Fold the middle of a long trail behind `Breadcrumbs.Ellipsis`, with the first and the last pages in view, and the focus on the first page that comes into view after the press.
diff --git a/packages/ui/src/lib/breadcrumbs/ellipsis/breadcrumbs-ellipsis.svelte b/packages/ui/src/lib/breadcrumbs/ellipsis/breadcrumbs-ellipsis.svelte
new file mode 100644
index 00000000..daee5031
--- /dev/null
+++ b/packages/ui/src/lib/breadcrumbs/ellipsis/breadcrumbs-ellipsis.svelte
@@ -0,0 +1,62 @@
+<script lang="ts">
+	import { readable } from 'svelte/store';
+	import { ButtonRoot } from '../../button/index.js';
+	import { resolveLocalizedString } from '../../internal/localized-strings';
+	import { useLocaleContextOptional } from '../../locale-provider/context';
+	import type { BreadcrumbsEllipsisProps } from '../types.js';
+	import { useBreadcrumbsContext } from '../root/context';
+
+	/**
+	 * Breadcrumbs.Ellipsis — the button that stands for the folded middle of a long trail.
+	 *
+	 * Put it in the list after the first item. It renders only while the trail is folded, as an
+	 * `<li>` with a button named "Show N more pages", in the locale of `LocaleProvider`. A press
+	 * unfolds the trail, and the focus moves to the first page that comes into view: the button
+	 * is gone, and a focus left on nothing is a focus lost.
+	 */
+	let {
+		children,
+		class: className = '',
+		itemClass = '',
+		separator,
+		'aria-label': ariaLabelProp,
+		element = $bindable<HTMLButtonElement | null>(null),
+		onclick,
+		...restProps
+	}: BreadcrumbsEllipsisProps = $props();
+
+	const breadcrumbs = useBreadcrumbsContext('Breadcrumbs.Ellipsis');
+
+	const localeContext = useLocaleContextOptional();
+	const emptyLocaleStore = readable<string | undefined>(undefined);
+	const localeStore = localeContext?.locale ?? emptyLocaleStore;
+	const ariaLabel = $derived(
+		ariaLabelProp ??
+			resolveLocalizedString($localeStore, 'breadcrumbs.showMore', {
+				count: breadcrumbs.hiddenCount
+			})
+	);
+
+	function handleClick(event: MouseEvent & { currentTarget: EventTarget & HTMLButtonElement }) {
+		onclick?.(event);
+		if (event.defaultPrevented) return;
+		breadcrumbs.expand();
+	}
+</script>
+
+{#if breadcrumbs.collapsed}
+	<li class={itemClass} data-breadcrumbs-ellipsis="true">
+		<ButtonRoot
+			{...restProps}
+			bind:element
+			class={className}
+			type="button"
+			aria-label={ariaLabel}
+			data-breadcrumbs-ellipsis-button="true"
+			onclick={handleClick}
+		>
+			{#if children}{@render children()}{:else}…{/if}
+		</ButtonRoot>
+		{@render separator?.()}
+	</li>
+{/if}
diff --git a/packages/ui/src/lib/breadcrumbs/index.parts.ts b/packages/ui/src/lib/breadcrumbs/index.parts.ts
index e1be82ee..d1dc85e7 100644
--- a/packages/ui/src/lib/breadcrumbs/index.parts.ts
+++ b/packages/ui/src/lib/breadcrumbs/index.parts.ts
@@ -2,4 +2,5 @@ export { default as Root } from './root/breadcrumbs-root.svelte';
 export { default as List } from './list/breadcrumbs-list.svelte';
 export { default as Item } from './item/breadcrumbs-item.svelte';
 export { default as Link } from './link/breadcrumbs-link.svelte';
+export { default as Ellipsis } from './ellipsis/breadcrumbs-ellipsis.svelte';
 export { default as Separator } from './separator/breadcrumbs-separator.svelte';
diff --git a/packages/ui/src/lib/breadcrumbs/index.ts b/packages/ui/src/lib/breadcrumbs/index.ts
index 5fc32a81..62bc7a4b 100644
--- a/packages/ui/src/lib/breadcrumbs/index.ts
+++ b/packages/ui/src/lib/breadcrumbs/index.ts
@@ -1,4 +1,5 @@
 import type { ComponentProps } from 'svelte';
+import type BreadcrumbsEllipsisComponent from './ellipsis/breadcrumbs-ellipsis.svelte';
 import type BreadcrumbsItemComponent from './item/breadcrumbs-item.svelte';
 import type BreadcrumbsLinkComponent from './link/breadcrumbs-link.svelte';
 import type BreadcrumbsListComponent from './list/breadcrumbs-list.svelte';
@@ -11,11 +12,19 @@ export { default as BreadcrumbsRoot } from './root/breadcrumbs-root.svelte';
 export { default as BreadcrumbsList } from './list/breadcrumbs-list.svelte';
 export { default as BreadcrumbsItem } from './item/breadcrumbs-item.svelte';
 export { default as BreadcrumbsLink } from './link/breadcrumbs-link.svelte';
+export { default as BreadcrumbsEllipsis } from './ellipsis/breadcrumbs-ellipsis.svelte';
 export { default as BreadcrumbsSeparator } from './separator/breadcrumbs-separator.svelte';
 export type BreadcrumbsRootProps = ComponentProps<typeof BreadcrumbsRootComponent>;
 export type BreadcrumbsListProps = ComponentProps<typeof BreadcrumbsListComponent>;
 export type BreadcrumbsItemProps = ComponentProps<typeof BreadcrumbsItemComponent>;
 export type BreadcrumbsLinkProps = ComponentProps<typeof BreadcrumbsLinkComponent>;
+export type BreadcrumbsEllipsisProps = ComponentProps<typeof BreadcrumbsEllipsisComponent>;
+export {
+	getBreadcrumbsContext,
+	setBreadcrumbsContext,
+	useBreadcrumbsContext,
+	type BreadcrumbsContext
+} from './root/context.js';
 export type BreadcrumbsSeparatorProps = ComponentProps<typeof BreadcrumbsSeparatorComponent>;
 
 import * as BreadcrumbsParts from './index.parts.js';
diff --git a/packages/ui/src/lib/breadcrumbs/item/breadcrumbs-item.svelte b/packages/ui/src/lib/breadcrumbs/item/breadcrumbs-item.svelte
index 49f270e8..775860d0 100644
--- a/packages/ui/src/lib/breadcrumbs/item/breadcrumbs-item.svelte
+++ b/packages/ui/src/lib/breadcrumbs/item/breadcrumbs-item.svelte
@@ -1,12 +1,14 @@
 <script lang="ts">
 	import type { BreadcrumbsItemProps } from '../types.js';
+	import { useBreadcrumbsContext } from '../root/context';
 
 	/**
 	 * Breadcrumbs.Item — one page of the trail.
 	 *
 	 * It is an `<li>` with a `Breadcrumbs.Link` in it, and a `Breadcrumbs.Separator` after the
 	 * link on every item but the last. The separator is in the item, not between two items,
-	 * thus the list holds items only and its count is the count of pages.
+	 * thus the list holds items only and its count is the count of pages. In a folded trail, an
+	 * item of the middle renders nothing until the trail unfolds.
 	 */
 	let {
 		children,
@@ -15,6 +17,14 @@
 		...restProps
 	}: BreadcrumbsItemProps = $props();
 
+	const breadcrumbs = useBreadcrumbsContext('Breadcrumbs.Item');
+	// Registered at creation, not in an effect: the place in the trail must be known before the
+	// first render, or a folded item would paint once and go.
+	const id = $props.id();
+	const unregister = breadcrumbs.register(id);
+	$effect(() => unregister);
+	const hidden = $derived(breadcrumbs.isHidden(id));
+
 	let itemRef: HTMLLIElement | null = $state(null);
 
 	$effect(() => {
@@ -25,6 +35,8 @@
 	});
 </script>
 
-<li {...restProps} bind:this={itemRef} class={className} data-breadcrumbs-item="true">
-	{@render children?.()}
-</li>
+{#if !hidden}
+	<li {...restProps} bind:this={itemRef} class={className} data-breadcrumbs-item="true">
+		{@render children?.()}
+	</li>
+{/if}
diff --git a/packages/ui/src/lib/breadcrumbs/root/breadcrumbs-collapse-test.svelte b/packages/ui/src/lib/breadcrumbs/root/breadcrumbs-collapse-test.svelte
new file mode 100644
index 00000000..ae8fe486
--- /dev/null
+++ b/packages/ui/src/lib/breadcrumbs/root/breadcrumbs-collapse-test.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { Breadcrumbs } from '../index';
+	import LocaleProvider from '../../locale-provider/index';
+
+	let {
+		pages = ['Home', 'Docs', 'Components', 'Navigation', 'Breadcrumbs'],
+		maxItems = undefined,
+		locale = undefined,
+		onExpandedChange
+	}: {
+		pages?: string[];
+		maxItems?: number;
+		locale?: string;
+		onExpandedChange?: (expanded: boolean) => void;
+	} = $props();
+
+	let expanded = $state(false);
+</script>
+
+<LocaleProvider {locale}>
+	<Breadcrumbs.Root {maxItems} bind:expanded {onExpandedChange} data-testid="nav">
+		<Breadcrumbs.List data-testid="list">
+			{#each pages as page, index (page)}
+				<Breadcrumbs.Item data-testid="item">
+					<Breadcrumbs.Link href="/{page.toLowerCase()}" current={index === pages.length - 1}>
+						{page}
+					</Breadcrumbs.Link>
+				</Breadcrumbs.Item>
+				{#if index === 0}
+					<Breadcrumbs.Ellipsis data-testid="ellipsis" />
+				{/if}
+			{/each}
+		</Breadcrumbs.List>
+	</Breadcrumbs.Root>
+</LocaleProvider>
+<span data-testid="expanded">{expanded ? 'yes' : 'no'}</span>
diff --git a/packages/ui/src/lib/breadcrumbs/root/breadcrumbs-collapse.test.ts b/packages/ui/src/lib/breadcrumbs/root/breadcrumbs-collapse.test.ts
new file mode 100644
index 00000000..c88afe43
--- /dev/null
+++ b/packages/ui/src/lib/breadcrumbs/root/breadcrumbs-collapse.test.ts
@@ -0,0 +1,79 @@
+import { describe, expect, it, vi } from 'vitest';
+import { render } from 'vitest-browser-svelte';
+import { userEvent } from 'vitest/browser';
+import BreadcrumbsCollapseTest from './breadcrumbs-collapse-test.svelte';
+
+function pages() {
+	return Array.from(document.querySelectorAll('[data-testid="item"]')).map((item) =>
+		item.textContent?.trim()
+	);
+}
+
+function ellipsis() {
+	return document.querySelector<HTMLButtonElement>('[data-testid="ellipsis"]');
+}
+
+describe('Breadcrumbs collapse', () => {
+	it('shows every page without a limit, and no ellipsis', () => {
+		render(BreadcrumbsCollapseTest);
+		expect(pages()).toEqual(['Home', 'Docs', 'Components', 'Navigation', 'Breadcrumbs']);
+		expect(ellipsis()).toBeNull();
+		expect(document.querySelector('[data-testid="nav"]')?.hasAttribute('data-collapsed')).toBe(
+			false
+		);
+	});
+
+	it('folds the middle past maxItems: the first page, the ellipsis, and the last ones', () => {
+		render(BreadcrumbsCollapseTest, { maxItems: 3 });
+
+		expect(pages()).toEqual(['Home', 'Navigation', 'Breadcrumbs']);
+		const button = ellipsis();
+		expect(button?.tagName).toBe('BUTTON');
+		expect(button?.getAttribute('aria-label')).toBe('Show 2 more pages');
+		expect(button?.textContent?.trim()).toBe('…');
+		expect(button?.closest('li')?.getAttribute('data-breadcrumbs-ellipsis')).toBe('true');
+		// The ellipsis sits between the first page and the rest.
+		const list = document.querySelector('[data-testid="list"]');
+		const children = Array.from(list?.children ?? []).map(
+			(child) =>
+				child.getAttribute('data-testid') ?? child.getAttribute('data-breadcrumbs-ellipsis')
+		);
+		expect(children).toEqual(['item', 'true', 'item', 'item']);
+		expect(document.querySelector('[data-testid="nav"]')?.getAttribute('data-collapsed')).toBe(
+			'true'
+		);
+	});
+
+	it('does not fold a trail that fits', () => {
+		render(BreadcrumbsCollapseTest, { maxItems: 5 });
+		expect(pages()).toHaveLength(5);
+		expect(ellipsis()).toBeNull();
+	});
+
+	it('keeps two pages in view at least', () => {
+		render(BreadcrumbsCollapseTest, { maxItems: 1 });
+		expect(pages()).toEqual(['Home', 'Breadcrumbs']);
+		expect(ellipsis()?.getAttribute('aria-label')).toBe('Show 3 more pages');
+	});
+
+	it('unfolds on a press, and moves the focus to the first page that comes into view', async () => {
+		const onExpandedChange = vi.fn();
+		render(BreadcrumbsCollapseTest, { maxItems: 3, onExpandedChange });
+
+		ellipsis()?.focus();
+		await userEvent.keyboard('{Enter}');
+
+		await expect
+			.poll(() => pages())
+			.toEqual(['Home', 'Docs', 'Components', 'Navigation', 'Breadcrumbs']);
+		expect(ellipsis()).toBeNull();
+		expect(document.activeElement?.textContent?.trim()).toBe('Docs');
+		expect(document.querySelector('[data-testid="expanded"]')?.textContent).toBe('yes');
+		expect(onExpandedChange).toHaveBeenCalledWith(true);
+	});
+
+	it('speaks the locale', () => {
+		render(BreadcrumbsCollapseTest, { maxItems: 3, locale: 'es' });
+		expect(ellipsis()?.getAttribute('aria-label')).toBe('Mostrar 2 páginas más');
+	});
+});
diff --git a/packages/ui/src/lib/breadcrumbs/root/breadcrumbs-root.svelte b/packages/ui/src/lib/breadcrumbs/root/breadcrumbs-root.svelte
index a7b939ee..5f6519ec 100644
--- a/packages/ui/src/lib/breadcrumbs/root/breadcrumbs-root.svelte
+++ b/packages/ui/src/lib/breadcrumbs/root/breadcrumbs-root.svelte
@@ -1,8 +1,10 @@
 <script lang="ts">
+	import { tick } from 'svelte';
 	import { readable } from 'svelte/store';
 	import { resolveLocalizedString } from '../../internal/localized-strings';
 	import { useLocaleContextOptional } from '../../locale-provider/context';
 	import type { BreadcrumbsRootProps } from '../types.js';
+	import { setBreadcrumbsContext, type BreadcrumbsContext } from './context';
 
 	/**
 	 * Breadcrumbs.Root — the trail of pages above the one the user is on.
@@ -10,11 +12,18 @@
 	 * It is a `<nav>` landmark named "Breadcrumb", in the locale of `LocaleProvider`: a screen
 	 * reader user finds it in the list of landmarks, apart from the main navigation. Put a
 	 * `Breadcrumbs.List` in it.
+	 *
+	 * `maxItems` folds the middle of a long trail: the first item and the last `maxItems - 1`
+	 * stay in view, and a `Breadcrumbs.Ellipsis` in the list stands for the rest until a press
+	 * unfolds them.
 	 */
 	let {
 		children,
 		class: className = '',
 		'aria-label': ariaLabelProp,
+		maxItems,
+		expanded = $bindable(false),
+		onExpandedChange,
 		element = $bindable<HTMLElement | null>(null),
 		...restProps
 	}: BreadcrumbsRootProps = $props();
@@ -27,6 +36,61 @@
 	);
 
 	let navRef: HTMLElement | null = $state(null);
+	let ids = $state<string[]>([]);
+
+	// Fewer than two in view would hide the current page, or the root of the site.
+	const limit = $derived(maxItems === undefined ? Infinity : Math.max(2, Math.floor(maxItems)));
+	const collapsed = $derived(!expanded && ids.length > limit);
+	// The folded middle: after the first item, before the last `limit - 1`.
+	const hiddenEnd = $derived(collapsed ? ids.length - (limit - 1) : 0);
+	const hiddenCount = $derived(collapsed ? hiddenEnd - 1 : 0);
+
+	async function expand() {
+		if (expanded) return;
+		expanded = true;
+		onExpandedChange?.(true);
+		// The button that had the focus is gone: the first page that came into view takes it.
+		await tick();
+		const items = Array.from(
+			navRef?.querySelectorAll<HTMLElement>('[data-breadcrumbs-item]') ?? []
+		).slice(1);
+		for (const item of items) {
+			const target = item.querySelector<HTMLElement>('a[href], button, [tabindex]');
+			if (target) {
+				target.focus();
+				return;
+			}
+		}
+	}
+
+	const context: BreadcrumbsContext = {
+		get count() {
+			return ids.length;
+		},
+		get maxItems() {
+			return limit;
+		},
+		get collapsed() {
+			return collapsed;
+		},
+		get hiddenCount() {
+			return hiddenCount;
+		},
+		register(id) {
+			ids = [...ids, id];
+			return () => {
+				ids = ids.filter((candidate) => candidate !== id);
+			};
+		},
+		isHidden(id) {
+			if (!collapsed) return false;
+			const index = ids.indexOf(id);
+			return index > 0 && index < hiddenEnd;
+		},
+		expand
+	};
+
+	setBreadcrumbsContext(context);
 
 	$effect(() => {
 		element = navRef;
@@ -42,6 +106,7 @@
 	aria-label={ariaLabel}
 	class={className}
 	data-breadcrumbs-root="true"
+	data-collapsed={collapsed || undefined}
 >
 	{@render children?.()}
 </nav>
diff --git a/packages/ui/src/lib/breadcrumbs/root/context.ts b/packages/ui/src/lib/breadcrumbs/root/context.ts
new file mode 100644
index 00000000..105acb15
--- /dev/null
+++ b/packages/ui/src/lib/breadcrumbs/root/context.ts
@@ -0,0 +1,36 @@
+import { getContext, setContext } from 'svelte';
+
+const KEY = Symbol('breadcrumbs');
+
+export type BreadcrumbsContext = {
+	/** The count of items in the trail, on the screen or not. */
+	readonly count: number;
+	/** The count of items past which the middle of the trail folds. `Infinity` without a limit. */
+	readonly maxItems: number;
+	/** True while the middle of the trail is out of view. */
+	readonly collapsed: boolean;
+	/** The count of items out of view. */
+	readonly hiddenCount: number;
+	/** Registers an item, and answers a function that unregisters it. */
+	register: (id: string) => () => void;
+	/** True for an item in the folded middle of the trail. */
+	isHidden: (id: string) => boolean;
+	/** Unfolds the trail, and moves the focus to the first item that comes into view. */
+	expand: () => void;
+};
+
+export function setBreadcrumbsContext(context: BreadcrumbsContext) {
+	setContext(KEY, context);
+}
+
+export function getBreadcrumbsContext(): BreadcrumbsContext | undefined {
+	return getContext<BreadcrumbsContext | undefined>(KEY);
+}
+
+export function useBreadcrumbsContext(part = 'Breadcrumbs'): BreadcrumbsContext {
+	const context = getBreadcrumbsContext();
+	if (!context) {
+		throw new Error(`${part} must be used within Breadcrumbs.Root.`);
+	}
+	return context;
+}
diff --git a/packages/ui/src/lib/breadcrumbs/types.ts b/packages/ui/src/lib/breadcrumbs/types.ts
index d0b31b05..c66095a9 100644
--- a/packages/ui/src/lib/breadcrumbs/types.ts
+++ b/packages/ui/src/lib/breadcrumbs/types.ts
@@ -1,5 +1,12 @@
 import type { Snippet } from 'svelte';
-import type { HTMLAnchorAttributes, HTMLAttributes, HTMLOlAttributes } from 'svelte/elements';
+import type {
+	HTMLAnchorAttributes,
+	HTMLAttributes,
+	HTMLButtonAttributes,
+	HTMLOlAttributes
+} from 'svelte/elements';
+
+export type { BreadcrumbsContext } from './root/context.js';
 
 export type BreadcrumbsRootProps = Omit<HTMLAttributes<HTMLElement>, 'children' | 'class'> & {
 	/** `Breadcrumbs.List`. */
@@ -11,6 +18,15 @@ export type BreadcrumbsRootProps = Omit<HTMLAttributes<HTMLElement>, 'children'
 	 * `LocaleProvider`. Give one when the page has two sets of breadcrumbs.
 	 */
 	'aria-label'?: string;
+	/**
+	 * The count of items past which the middle of the trail folds behind a `Breadcrumbs.Ellipsis`.
+	 * The first item and the last `maxItems - 1` stay in view. Without it, every item is in view.
+	 */
+	maxItems?: number;
+	/** True once the user unfolds the trail. Use `bind:expanded` to read it, or to fold it again. */
+	expanded?: boolean;
+	/** Called when the trail unfolds or folds. */
+	onExpandedChange?: (expanded: boolean) => void;
 	/** The `<nav>` element. Use `bind:element` to read it. */
 	element?: HTMLElement | null;
 };
@@ -54,6 +70,24 @@ export type BreadcrumbsLinkProps = Omit<
 	element?: HTMLAnchorElement | HTMLSpanElement | null;
 };
 
+export type BreadcrumbsEllipsisProps = Omit<
+	HTMLButtonAttributes,
+	'children' | 'class' | 'type' | 'aria-label'
+> & {
+	/** The content of the button. Three dots without children. */
+	children?: Snippet;
+	/** The CSS class names of the button. */
+	class?: string;
+	/** The CSS class names of the `<li>` around the button. */
+	itemClass?: string;
+	/** The sign after the button, such as a `Breadcrumbs.Separator`. */
+	separator?: Snippet;
+	/** The name of the button. Without it, "Show N more pages" in the locale of `LocaleProvider`. */
+	'aria-label'?: string;
+	/** The button element, while the trail is folded. Use `bind:element` to read it. */
+	element?: HTMLButtonElement | null;
+};
+
 export type BreadcrumbsSeparatorProps = Omit<
 	HTMLAttributes<HTMLSpanElement>,
 	'children' | 'class' | 'aria-hidden'
diff --git a/packages/ui/src/lib/internal/localized-strings.ts b/packages/ui/src/lib/internal/localized-strings.ts
index 08f61267..a0db04f8 100644
--- a/packages/ui/src/lib/internal/localized-strings.ts
+++ b/packages/ui/src/lib/internal/localized-strings.ts
@@ -338,6 +338,14 @@ const LOCALIZED_STRINGS = {
 		de: '{count} Elemente nach {label} verschoben',
 		it: '{count} elementi spostati in {label}'
 	},
+	'avatar.more': {
+		en: '{count} more',
+		es: '{count} más',
+		pt: '{count} mais',
+		fr: '{count} de plus',
+		de: '{count} weitere',
+		it: '{count} altri'
+	},
 	'breadcrumbs.label': {
 		en: 'Breadcrumb',
 		es: 'Ruta de navegación',
@@ -346,6 +354,14 @@ const LOCALIZED_STRINGS = {
 		de: 'Brotkrumennavigation',
 		it: 'Percorso di navigazione'
 	},
+	'breadcrumbs.showMore': {
+		en: 'Show {count} more pages',
+		es: 'Mostrar {count} páginas más',
+		pt: 'Mostrar mais {count} páginas',
+		fr: 'Afficher {count} pages de plus',
+		de: '{count} weitere Seiten anzeigen',
+		it: 'Mostra altre {count} pagine'
+	},
 	'segment.empty': {
 		en: 'Empty',
 		es: 'Vacío',
diff --git a/packages/ui/src/lib/separator/README.md b/packages/ui/src/lib/separator/README.md
index 786f065c..fe18869d 100644
--- a/packages/ui/src/lib/separator/README.md
+++ b/packages/ui/src/lib/separator/README.md
@@ -2,7 +2,7 @@
 
 ## Description
 
-`Separator` is a line between two groups of content. A screen reader reads it as a break, the same as a native `<hr>`. It has no size of its own: give it a border or a background, and a width or a height.
+`Separator` is a line between two groups of content. A screen reader reads it as a break, the same as a native `<hr>`. It has no size of its own: give it a border or a background, and a width or a height. With a `value`, it is a window splitter the keyboard and the pointer move.
 
 ## Anatomy
 
@@ -18,16 +18,18 @@
 - Use `orientation="vertical"` for a line between two items side by side, such as in a toolbar.
 - Use `decorative` for a line that repeats a break the content already makes, such as a border between two sections with headings. A screen reader then skips it.
 - Give the line a size with CSS. `data-orientation` is on the element for your styles.
+- Give `value` with `bind:value` for a window splitter, and size the pane before it from the value. Name it with `aria-label`, and point `aria-controls` at the pane.
 
 ## API reference
 
 - `Separator`
   - `orientation?: 'horizontal' | 'vertical'` (`'horizontal'`)
   - `decorative?: boolean` (`false`)
+  - `value?: number` (bindable), `min?: number` (`0`), `max?: number` (`100`), `step?: number` (`1`), `largeStep?: number` (`10`), `onValueChange?: (value: number) => void`, `aria-controls?: string`, `disabled?: boolean`
   - `element?: HTMLDivElement | null` (bindable)
 
 ## Accessibility
 
 - The element is `role="separator"`. A vertical one has `aria-orientation="vertical"`: a separator is horizontal unless it says otherwise.
 - `decorative` makes it `role="none"`, which a screen reader skips.
-- It is not focusable. A separator that the user moves, such as a window splitter, is a different pattern.
+- A plain separator is not focusable. A splitter is a tab stop with `aria-valuenow`, `aria-valuemin`, `aria-valuemax` and a name. The arrows of its axis move it by `step`, or by `largeStep` with `Shift`. `Home` and `End` send it to the ends, and `Enter` folds and unfolds the pane. The horizontal arrows flip on a right-to-left page.
diff --git a/packages/ui/src/lib/separator/TODO.md b/packages/ui/src/lib/separator/TODO.md
index 056eb3d5..f90ee865 100644
--- a/packages/ui/src/lib/separator/TODO.md
+++ b/packages/ui/src/lib/separator/TODO.md
@@ -8,4 +8,4 @@ Track Separator work with a single mandatory TODO format.
 
 - [x] [S][P0][Area: Accessibility][Owner: Unassigned][Target: Done] Render `role="separator"` with `aria-orientation="vertical"` for a vertical line, and `role="none"` for a decorative one.
 - [x] [S][P0][Area: Testing][Owner: Unassigned][Target: Done] Add coverage for the roles, the orientation, `bind:element` and SSR.
-- [ ] [M][P3][Area: API][Owner: Unassigned][Target: Backlog] Add a focusable window splitter with `aria-valuenow` and the arrow keys, as a primitive of its own.
+- [x] [M][P3][Area: API][Owner: Unassigned][Target: Done] Add the window splitter behind `value`: a tab stop with `aria-valuenow`, the arrow keys, `Home`, `End`, `Enter`, and a pointer drag along the parent.
diff --git a/packages/ui/src/lib/separator/separator.svelte b/packages/ui/src/lib/separator/separator.svelte
index d4f7f536..3a1e5a1d 100644
--- a/packages/ui/src/lib/separator/separator.svelte
+++ b/packages/ui/src/lib/separator/separator.svelte
@@ -1,10 +1,19 @@
 <script lang="ts">
 	import type { HTMLAttributes } from 'svelte/elements';
+	import { watchFocusVisible } from '../primitives/focus-visible.svelte';
+	import { shouldShowFocusVisible, trackInteractionModality } from '../primitives/input-modality';
 	import type { SeparatorOrientation } from './types.js';
 
 	type SeparatorProps = Omit<
 		HTMLAttributes<HTMLDivElement>,
-		'children' | 'class' | 'role' | 'aria-orientation'
+		| 'children'
+		| 'class'
+		| 'role'
+		| 'aria-orientation'
+		| 'aria-valuenow'
+		| 'aria-valuemin'
+		| 'aria-valuemax'
+		| 'aria-disabled'
 	> & {
 		/**
 		 * The direction of the line. A horizontal separator sits between two blocks, one above the
@@ -15,9 +24,31 @@
 		 * Makes the separator a visual line only. A screen reader then skips it. Use it for a line
 		 * that repeats a break the content already makes, such as a border between two sections
 		 * with headings. Without it, the separator is a `role="separator"` element, which a screen
-		 * reader reads as a break between two groups of content.
+		 * reader reads as a break between two groups of content. A separator with a `value` keeps
+		 * its role.
 		 */
 		decorative?: boolean;
+		/**
+		 * Makes the separator a window splitter the user moves: the size of the pane before it, as a
+		 * number between `min` and `max`. Use `bind:value` and give the pane its size from it. The
+		 * splitter is a tab stop. The arrow keys move it, `Home` and `End` send it to the ends, and
+		 * `Enter` folds the pane and unfolds it. The pointer drags it along its parent.
+		 */
+		value?: number;
+		/** The value with the pane folded. */
+		min?: number;
+		/** The value with the pane at its largest. */
+		max?: number;
+		/** The move of one arrow key. */
+		step?: number;
+		/** The move of one arrow key with `Shift`. */
+		largeStep?: number;
+		/** Called with the value after each move. */
+		onValueChange?: (value: number) => void;
+		/** The id of the pane the splitter sizes, for `aria-controls`. */
+		'aria-controls'?: string;
+		/** Holds the splitter still. It stays a tab stop, and it says it is disabled. */
+		disabled?: boolean;
 		/** The CSS class names of the element. */
 		class?: string;
 		/** The separator element. Use `bind:element` to read it. */
@@ -31,16 +62,47 @@
 	 * `aria-orientation` for a vertical line: a separator is horizontal unless it says otherwise.
 	 * `decorative` takes the role away for a line that repeats a break the content already makes.
 	 * It has no size of its own: give it a border or a background, and a width or a height.
+	 *
+	 * With a `value`, it is a window splitter: a focusable separator with `aria-valuenow` that
+	 * the arrow keys and the pointer move. The value is a number in `[min, max]`, and the pane
+	 * before the splitter takes its size from it.
 	 */
 	let {
 		orientation = 'horizontal',
 		decorative = false,
+		value = $bindable(),
+		min = 0,
+		max = 100,
+		step = 1,
+		largeStep = 10,
+		onValueChange,
+		disabled = false,
 		class: className = '',
 		element = $bindable<HTMLDivElement | null>(null),
+		style,
+		onkeydown: onKeyDownExternal,
+		onpointerdown: onPointerDownExternal,
+		onfocus: onFocusExternal,
+		onblur: onBlurExternal,
 		...restProps
 	}: SeparatorProps = $props();
 
 	let separatorRef: HTMLDivElement | null = $state(null);
+	let focused = $state(false);
+	let focusVisible = $state(false);
+	let dragging = $state(false);
+	// The value before a fold with `Enter`, thus the next `Enter` unfolds to the same place.
+	let valueBeforeFold: number | null = null;
+
+	const movable = $derived(value !== undefined);
+	const hasRole = $derived(movable || !decorative);
+	const clamped = $derived(value === undefined ? undefined : clamp(value));
+
+	watchFocusVisible({
+		isFocused: () => focused,
+		element: () => separatorRef,
+		set: (visible) => (focusVisible = visible)
+	});
 
 	$effect(() => {
 		element = separatorRef;
@@ -48,15 +110,145 @@
 			element = null;
 		};
 	});
+
+	function clamp(next: number) {
+		return Math.min(max, Math.max(min, next));
+	}
+
+	function setValue(next: number) {
+		const bounded = clamp(next);
+		if (bounded === value) return;
+		value = bounded;
+		onValueChange?.(bounded);
+	}
+
+	function isRtl() {
+		return separatorRef ? getComputedStyle(separatorRef).direction === 'rtl' : false;
+	}
+
+	function handleKeyDown(event: KeyboardEvent & { currentTarget: EventTarget & HTMLDivElement }) {
+		onKeyDownExternal?.(event);
+		if (event.defaultPrevented || !movable || disabled || clamped === undefined) return;
+		// A vertical line splits left from right: the horizontal arrows move it. A horizontal
+		// line splits top from bottom: the vertical arrows move it.
+		const vertical = orientation === 'vertical';
+		const forward = vertical ? 'ArrowRight' : 'ArrowDown';
+		const backward = vertical ? 'ArrowLeft' : 'ArrowUp';
+		// On a right-to-left page the pane before a vertical line is on the right: the arrows flip.
+		const sign = vertical && isRtl() ? -1 : 1;
+		const amount = event.shiftKey ? largeStep : step;
+		let next: number | null = null;
+		if (event.key === forward) next = clamped + amount * sign;
+		else if (event.key === backward) next = clamped - amount * sign;
+		else if (event.key === 'Home') next = min;
+		else if (event.key === 'End') next = max;
+		else if (event.key === 'Enter') {
+			if (clamped > min) {
+				valueBeforeFold = clamped;
+				next = min;
+			} else {
+				next = valueBeforeFold ?? max;
+				valueBeforeFold = null;
+			}
+		}
+		if (next === null) return;
+		event.preventDefault();
+		setValue(next);
+	}
+
+	function handlePointerDown(
+		event: PointerEvent & { currentTarget: EventTarget & HTMLDivElement }
+	) {
+		onPointerDownExternal?.(event);
+		trackInteractionModality(event, separatorRef);
+		focusVisible = false;
+		if (event.defaultPrevented || !movable || disabled || clamped === undefined) return;
+		if (event.button !== 0) return;
+		const node = event.currentTarget;
+		const parent = node.parentElement;
+		if (!parent) return;
+		event.preventDefault();
+		node.focus();
+		const vertical = orientation === 'vertical';
+		const sign = vertical && isRtl() ? -1 : 1;
+		const rect = parent.getBoundingClientRect();
+		const size = vertical ? rect.width : rect.height;
+		if (size <= 0) return;
+		const start = vertical ? event.clientX : event.clientY;
+		const startValue = clamped;
+		const pointerId = event.pointerId;
+		// The capture keeps the events on the splitter when the pointer runs ahead of it. The
+		// window listeners work without it, thus a pointer the browser does not know is no error.
+		try {
+			node.setPointerCapture(pointerId);
+		} catch {
+			// See above.
+		}
+		dragging = true;
+
+		const handleMove = (moveEvent: PointerEvent) => {
+			if (moveEvent.pointerId !== pointerId) return;
+			const position = vertical ? moveEvent.clientX : moveEvent.clientY;
+			// The move along the parent, as a share of its size, in the units of the range.
+			const delta = ((position - start) * sign * (max - min)) / size;
+			setValue(startValue + delta);
+		};
+		const handleUp = (upEvent: PointerEvent) => {
+			if (upEvent.pointerId !== pointerId) return;
+			dragging = false;
+			if (node.hasPointerCapture(pointerId)) node.releasePointerCapture(pointerId);
+			window.removeEventListener('pointermove', handleMove);
+			window.removeEventListener('pointerup', handleUp);
+			window.removeEventListener('pointercancel', handleUp);
+		};
+		window.addEventListener('pointermove', handleMove);
+		window.addEventListener('pointerup', handleUp);
+		window.addEventListener('pointercancel', handleUp);
+	}
+
+	function handleFocus(event: FocusEvent & { currentTarget: EventTarget & HTMLDivElement }) {
+		onFocusExternal?.(event);
+		focused = true;
+		focusVisible = shouldShowFocusVisible(separatorRef);
+	}
+
+	function handleBlur(event: FocusEvent & { currentTarget: EventTarget & HTMLDivElement }) {
+		onBlurExternal?.(event);
+		focused = false;
+		focusVisible = false;
+	}
+
+	// The browser must not turn the drag into a scroll before the splitter claims it.
+	const inlineStyle = $derived(
+		[movable ? 'touch-action: none;' : '', style ?? ''].filter(Boolean).join(' ') || undefined
+	);
 </script>
 
+<!-- A window splitter is a separator with a tab stop, as the pattern says: the arrow keys move
+     it, thus it must take the focus. -->
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
 <div
 	{...restProps}
 	bind:this={separatorRef}
-	role={decorative ? 'none' : 'separator'}
-	aria-orientation={decorative || orientation === 'horizontal' ? undefined : 'vertical'}
+	role={hasRole ? 'separator' : 'none'}
+	aria-orientation={hasRole && orientation === 'vertical' ? 'vertical' : undefined}
+	aria-valuenow={clamped}
+	aria-valuemin={movable ? min : undefined}
+	aria-valuemax={movable ? max : undefined}
+	aria-disabled={movable && disabled ? 'true' : undefined}
+	tabindex={movable ? 0 : undefined}
 	class={className}
+	style={inlineStyle}
 	data-separator-root="true"
 	data-orientation={orientation}
-	data-decorative={decorative || undefined}
+	data-decorative={(decorative && !movable) || undefined}
+	data-movable={movable || undefined}
+	data-disabled={(movable && disabled) || undefined}
+	data-dragging={dragging || undefined}
+	data-focused={focused || undefined}
+	data-focus-visible={focusVisible || undefined}
+	onkeydown={handleKeyDown}
+	onpointerdown={handlePointerDown}
+	onfocus={handleFocus}
+	onblur={handleBlur}
 ></div>
diff --git a/packages/ui/src/lib/separator/splitter-test.svelte b/packages/ui/src/lib/separator/splitter-test.svelte
new file mode 100644
index 00000000..ff816083
--- /dev/null
+++ b/packages/ui/src/lib/separator/splitter-test.svelte
@@ -0,0 +1,53 @@
+<script lang="ts">
+	import Separator from './separator.svelte';
+	import type { SeparatorOrientation } from './types.js';
+
+	let {
+		orientation = 'vertical',
+		min = 0,
+		max = 100,
+		step = 1,
+		largeStep = 10,
+		disabled = false,
+		dir = 'ltr',
+		onValueChange
+	}: {
+		orientation?: SeparatorOrientation;
+		min?: number;
+		max?: number;
+		step?: number;
+		largeStep?: number;
+		disabled?: boolean;
+		dir?: 'ltr' | 'rtl';
+		onValueChange?: (value: number) => void;
+	} = $props();
+
+	let value = $state(40);
+</script>
+
+<button type="button" data-testid="before">Before</button>
+<div
+	{dir}
+	data-testid="container"
+	style="display: flex; flex-direction: {orientation === 'vertical'
+		? 'row'
+		: 'column'}; width: 400px; height: 400px;"
+>
+	<div id="pane" style="flex: 0 0 {value}%;">Pane</div>
+	<Separator
+		{orientation}
+		bind:value
+		{min}
+		{max}
+		{step}
+		{largeStep}
+		{disabled}
+		{onValueChange}
+		aria-label="Resize the pane"
+		aria-controls="pane"
+		data-testid="splitter"
+		style="flex: 0 0 8px; background: gray;"
+	/>
+	<div style="flex: 1;">Rest</div>
+</div>
+<span data-testid="value">{value}</span>
diff --git a/packages/ui/src/lib/separator/splitter.test.ts b/packages/ui/src/lib/separator/splitter.test.ts
new file mode 100644
index 00000000..08cb8b90
--- /dev/null
+++ b/packages/ui/src/lib/separator/splitter.test.ts
@@ -0,0 +1,159 @@
+import { tick } from 'svelte';
+import { describe, expect, it, vi } from 'vitest';
+import { render } from 'vitest-browser-svelte';
+import { userEvent } from 'vitest/browser';
+import SplitterTest from './splitter-test.svelte';
+
+function splitter() {
+	return document.querySelector<HTMLDivElement>('[data-testid="splitter"]')!;
+}
+
+function value() {
+	return document.querySelector('[data-testid="value"]')?.textContent;
+}
+
+function pointer(target: Element, type: string, x: number, y: number) {
+	target.dispatchEvent(
+		new PointerEvent(type, {
+			pointerType: 'mouse',
+			pointerId: 1,
+			isPrimary: true,
+			button: 0,
+			buttons: 1,
+			clientX: x,
+			clientY: y,
+			bubbles: true,
+			cancelable: true
+		})
+	);
+}
+
+describe('Separator as a window splitter', () => {
+	it('is a focusable separator with a value, a range and a name', () => {
+		render(SplitterTest);
+		const element = splitter();
+
+		expect(element.getAttribute('role')).toBe('separator');
+		expect(element.getAttribute('aria-orientation')).toBe('vertical');
+		expect(element.getAttribute('tabindex')).toBe('0');
+		expect(element.getAttribute('aria-valuenow')).toBe('40');
+		expect(element.getAttribute('aria-valuemin')).toBe('0');
+		expect(element.getAttribute('aria-valuemax')).toBe('100');
+		expect(element.getAttribute('aria-label')).toBe('Resize the pane');
+		expect(element.getAttribute('aria-controls')).toBe('pane');
+		expect(element.getAttribute('data-movable')).toBe('true');
+		expect(element.style.touchAction).toBe('none');
+	});
+
+	it('moves with the arrow keys of its axis, by step and by largeStep with Shift', async () => {
+		const onValueChange = vi.fn();
+		render(SplitterTest, { onValueChange });
+		splitter().focus();
+
+		await userEvent.keyboard('{ArrowRight}');
+		expect(value()).toBe('41');
+		await userEvent.keyboard('{ArrowLeft}{ArrowLeft}');
+		expect(value()).toBe('39');
+		await userEvent.keyboard('{Shift>}{ArrowRight}{/Shift}');
+		expect(value()).toBe('49');
+		// The other axis does nothing to a vertical line.
+		await userEvent.keyboard('{ArrowUp}{ArrowDown}');
+		expect(value()).toBe('49');
+		expect(onValueChange).toHaveBeenLastCalledWith(49);
+		expect(splitter().getAttribute('aria-valuenow')).toBe('49');
+		expect(splitter().getAttribute('data-focus-visible')).toBe('true');
+	});
+
+	it('uses the vertical arrows for a horizontal line', async () => {
+		render(SplitterTest, { orientation: 'horizontal' });
+		splitter().focus();
+
+		await userEvent.keyboard('{ArrowDown}');
+		expect(value()).toBe('41');
+		await userEvent.keyboard('{ArrowRight}');
+		expect(value()).toBe('41');
+	});
+
+	it('goes to the ends with Home and End, and folds and unfolds with Enter', async () => {
+		render(SplitterTest);
+		splitter().focus();
+
+		await userEvent.keyboard('{End}');
+		expect(value()).toBe('100');
+		await userEvent.keyboard('{Home}');
+		expect(value()).toBe('0');
+		await userEvent.keyboard('{ArrowRight}{ArrowRight}{ArrowRight}');
+		expect(value()).toBe('3');
+		await userEvent.keyboard('{Enter}');
+		expect(value()).toBe('0');
+		await userEvent.keyboard('{Enter}');
+		expect(value()).toBe('3');
+	});
+
+	it('stays in the range', async () => {
+		render(SplitterTest, { min: 20, max: 60 });
+		splitter().focus();
+
+		await userEvent.keyboard('{End}{ArrowRight}');
+		expect(value()).toBe('60');
+		await userEvent.keyboard('{Home}{ArrowLeft}');
+		expect(value()).toBe('20');
+	});
+
+	it('flips the horizontal arrows on a right-to-left page', async () => {
+		render(SplitterTest, { dir: 'rtl' });
+		splitter().focus();
+
+		await userEvent.keyboard('{ArrowLeft}');
+		expect(value()).toBe('41');
+		await userEvent.keyboard('{ArrowRight}');
+		expect(value()).toBe('40');
+	});
+
+	it('follows a drag along its parent', async () => {
+		render(SplitterTest);
+		const element = splitter();
+		const rect = element.getBoundingClientRect();
+		const x = rect.left + 4;
+		const y = rect.top + 100;
+
+		pointer(element, 'pointerdown', x, y);
+		await tick();
+		expect(element.getAttribute('data-dragging')).toBe('true');
+		expect(document.activeElement).toBe(element);
+		// The parent is 400 px wide: 80 px is a fifth of the range.
+		pointer(element, 'pointermove', x + 80, y);
+		await tick();
+		expect(value()).toBe('60');
+		pointer(element, 'pointermove', x - 400, y);
+		await tick();
+		expect(value()).toBe('0');
+		pointer(element, 'pointerup', x - 400, y);
+		await tick();
+		expect(element.hasAttribute('data-dragging')).toBe(false);
+		expect(element.hasAttribute('data-focus-visible')).toBe(false);
+	});
+
+	it('holds still when disabled, and says so', async () => {
+		render(SplitterTest, { disabled: true });
+		const element = splitter();
+		expect(element.getAttribute('aria-disabled')).toBe('true');
+		expect(element.getAttribute('tabindex')).toBe('0');
+
+		element.focus();
+		await userEvent.keyboard('{ArrowRight}');
+		expect(value()).toBe('40');
+		const rect = element.getBoundingClientRect();
+		pointer(element, 'pointerdown', rect.left + 4, rect.top + 100);
+		pointer(element, 'pointermove', rect.left + 84, rect.top + 100);
+		await tick();
+		expect(value()).toBe('40');
+	});
+
+	it('is a tab stop after the button before it', async () => {
+		render(SplitterTest);
+		document.querySelector<HTMLElement>('[data-testid="before"]')?.focus();
+		await userEvent.keyboard('{Tab}');
+		expect(document.activeElement).toBe(splitter());
+	});
+});

From 5d76f71e127139b069e296539ea17dcb83eaac3f Mon Sep 17 00:00:00 2001
From: Agustin Delgado <agustindariodelgado@gmail.com>
Date: Sat, 19 Sep 2026 20:05:13 -0300
Subject: [PATCH 4/4] fix(docs): point the breadcrumbs demos at real pages

The prerender follows every link it finds. The demos linked to pages that do not exist, and the build of the docs failed with a 404 on /docs.
---
 .../content/breadcrumbs/demos/collapsed.svelte    | 15 +++++++++++----
 .../src/content/breadcrumbs/demos/disabled.svelte | 14 ++++++--------
 docs/src/content/breadcrumbs/demos/hero.svelte    |  4 ++--
 3 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/docs/src/content/breadcrumbs/demos/collapsed.svelte b/docs/src/content/breadcrumbs/demos/collapsed.svelte
index dc354b23..c4133bf2 100644
--- a/docs/src/content/breadcrumbs/demos/collapsed.svelte
+++ b/docs/src/content/breadcrumbs/demos/collapsed.svelte
@@ -1,7 +1,14 @@
 <script lang="ts">
 	import { Breadcrumbs } from '@human-kit/ui';
 
-	const pages = ['Home', 'Docs', 'Components', 'Navigation', 'Breadcrumbs'];
+	// Real pages of this site: the prerender follows every link it finds.
+	const pages = [
+		{ href: '/', title: 'Home' },
+		{ href: '/docs/quick-start', title: 'Docs' },
+		{ href: '/docs/about', title: 'About' },
+		{ href: '/docs/accessibility', title: 'Accessibility' },
+		{ href: '/docs/breadcrumbs', title: 'Breadcrumbs' }
+	];
 
 	const linkClass =
 		'rounded-sm text-neutral-600 outline-none hover:text-neutral-900 focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 data-[current=true]:font-medium data-[current=true]:text-neutral-900 dark:text-neutral-400 dark:hover:text-white dark:focus-visible:outline-white dark:data-[current=true]:text-white';
@@ -9,15 +16,15 @@
 
 <Breadcrumbs.Root maxItems={3}>
 	<Breadcrumbs.List class="flex list-none flex-wrap items-center gap-1.5 p-0 text-sm">
-		{#each pages as page, index (page)}
+		{#each pages as page, index (page.href)}
 			<Breadcrumbs.Item class="flex items-center gap-1.5">
 				<Breadcrumbs.Link
-					href="/{page.toLowerCase()}"
+					href={page.href}
 					current={index === pages.length - 1}
 					class={linkClass}
 					onclick={(event) => event.preventDefault()}
 				>
-					{page}
+					{page.title}
 				</Breadcrumbs.Link>
 				{#if index < pages.length - 1}
 					<Breadcrumbs.Separator class="text-neutral-400" />
diff --git a/docs/src/content/breadcrumbs/demos/disabled.svelte b/docs/src/content/breadcrumbs/demos/disabled.svelte
index 35c78368..cc31fb4a 100644
--- a/docs/src/content/breadcrumbs/demos/disabled.svelte
+++ b/docs/src/content/breadcrumbs/demos/disabled.svelte
@@ -5,28 +5,26 @@
 		'rounded-sm text-neutral-600 outline-none hover:text-neutral-900 focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 data-[current=true]:font-medium data-[current=true]:text-neutral-900 data-[disabled=true]:text-neutral-400 dark:text-neutral-400 dark:hover:text-white dark:focus-visible:outline-white dark:data-[current=true]:text-white dark:data-[disabled=true]:text-neutral-600';
 </script>
 
-<Breadcrumbs.Root aria-label="Folder">
+<Breadcrumbs.Root>
 	<Breadcrumbs.List class="flex list-none flex-wrap items-center gap-1.5 p-0 text-sm">
 		<Breadcrumbs.Item class="flex items-center gap-1.5">
-			<Breadcrumbs.Link href="/files" class={linkClass} onclick={(event) => event.preventDefault()}>
-				Files
+			<Breadcrumbs.Link href="/" class={linkClass} onclick={(event) => event.preventDefault()}>
+				Home
 			</Breadcrumbs.Link>
 			<Breadcrumbs.Separator class="text-neutral-400" />
 		</Breadcrumbs.Item>
 		<Breadcrumbs.Item class="flex items-center gap-1.5">
-			<Breadcrumbs.Link href="/files/shared" disabled class={linkClass}
-				>Shared with me</Breadcrumbs.Link
-			>
+			<Breadcrumbs.Link href="/docs/quick-start" disabled class={linkClass}>Docs</Breadcrumbs.Link>
 			<Breadcrumbs.Separator class="text-neutral-400" />
 		</Breadcrumbs.Item>
 		<Breadcrumbs.Item>
 			<Breadcrumbs.Link
-				href="/files/shared/q3"
+				href="/docs/breadcrumbs"
 				current
 				class={linkClass}
 				onclick={(event) => event.preventDefault()}
 			>
-				Q3 report
+				Breadcrumbs
 			</Breadcrumbs.Link>
 		</Breadcrumbs.Item>
 	</Breadcrumbs.List>
diff --git a/docs/src/content/breadcrumbs/demos/hero.svelte b/docs/src/content/breadcrumbs/demos/hero.svelte
index f4585f18..eecc2fc4 100644
--- a/docs/src/content/breadcrumbs/demos/hero.svelte
+++ b/docs/src/content/breadcrumbs/demos/hero.svelte
@@ -4,8 +4,8 @@
 
 	const pages = [
 		{ href: '/', title: 'Home' },
-		{ href: '/docs', title: 'Docs' },
-		{ href: '/docs/components', title: 'Components' }
+		{ href: '/docs/quick-start', title: 'Docs' },
+		{ href: '/docs/accessibility', title: 'Accessibility' }
 	];
 
 	const linkClass =