@heyramzi/ui 3.3.0 → 3.4.0

package/dist/components/docs/index.js

@@ -3,5 +3,6 @@
 * A surface supplies a title and a body, and never lays a document out itself.
 */
 export { default as DocPage } from "../../../src/components/docs/doc-page.svelte";
+export { default as DocumentView } from "../../../src/components/docs/document-view.svelte";
 export { default as OnThisPage } from "../../../src/components/docs/on-this-page.svelte";
 export { ScrollSpy, READ_LINE } from "./scroll-spy.svelte.js";

package/dist/components/list-page/toolbar-density.js

@@ -15,12 +15,31 @@ export function getToolbarDensity() {
 */
 // WHY `max-content` on a probe, not the row's own width: the row is sized by
 // its container, so reading it back always says "it fits" (see collapse.ts).
+// WHY `flex: none` too: a row that is itself a flex item takes its width from
+// flex-basis, so `max-content` alone read back the container (10 Nov 2026).
+// WHY transitions are stopped: under reduced motion `tokens/base.css` gives every
+// element an 80ms transition on `all`, so the probe's own width change started a
+// transition and the read got the old width. The row never folded at 390px and
+// axe flagged the squeezed search field (gallery, 10 Nov 2026). The last fold's
+// gap and shrink changes are still running then too, so they're finished first.
 export function naturalRowWidth(row) {
-	const { width, flexWrap } = row.style;
+	for (const animation of row.getAnimations({ subtree: true })) {
+		if (animation instanceof CSSTransition) animation.finish();
+	}
+	const { width, flexWrap, flex } = row.style;
+	const transition = row.style.getPropertyValue("transition");
+	const priority = row.style.getPropertyPriority("transition");
+	row.style.setProperty("transition", "none", "important");
 	row.style.width = "max-content";
 	row.style.flexWrap = "nowrap";
+	row.style.flex = "none";
 	const needed = row.getBoundingClientRect().width;
 	row.style.width = width;
 	row.style.flexWrap = flexWrap;
+	row.style.flex = flex;
+	// The restored size has to settle before transitions come back, or the
+	// row would animate back from its probe width.
+	void row.offsetWidth;
+	row.style.setProperty("transition", transition, priority);
 	return needed;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@heyramzi/ui",
-  "version": "3.3.0",
+  "version": "3.4.0",
   "description": "Svelte 5 UI for apps: primitives, effects and animations, plus work (tasks and docs), charts, slides, an editor, onboarding and a canvas as subpaths.",
   "homepage": "https://ui.heyramzi.com",
   "license": "MIT",

package/src/charts/chart-plot.svelte

@@ -82,25 +82,28 @@
 	{#if count > 0}
 		<p class="hr-sr-only" aria-live="polite">{announce}</p>
 	{/if}
-	<table class="hr-sr-only">
-		<caption>{label}</caption>
-		<thead>
-			<tr>
-				<th scope="col">{table.xLabel}</th>
-				{#each table.columns as column, j (j)}
-					<th scope="col">{column}</th>
-				{/each}
-			</tr>
-		</thead>
-		<tbody>
-			{#each table.rows as row, i (i)}
+	<!-- A table ignores width: 1px and spills past the page, so the clipping box is a div. -->
+	<div class="hr-sr-only">
+		<table>
+			<caption>{label}</caption>
+			<thead>
 				<tr>
-					<th scope="row">{row.x}</th>
-					{#each row.cells as cell, j (j)}
-						<td>{cell}</td>
+					<th scope="col">{table.xLabel}</th>
+					{#each table.columns as column, j (j)}
+						<th scope="col">{column}</th>
 					{/each}
 				</tr>
-			{/each}
-		</tbody>
-	</table>
+			</thead>
+			<tbody>
+				{#each table.rows as row, i (i)}
+					<tr>
+						<th scope="row">{row.x}</th>
+						{#each row.cells as cell, j (j)}
+							<td>{cell}</td>
+						{/each}
+					</tr>
+				{/each}
+			</tbody>
+		</table>
+	</div>
 {/if}

package/src/components/docs/document-view.svelte

@@ -0,0 +1,232 @@
+<script lang="ts">
+	// =========================
+	// IMPORTS
+	// =========================
+	import type { Component, Snippet } from "svelte";
+	import { untrack } from "svelte";
+	import DocPage from "./doc-page.svelte";
+	import type { DocHeading } from "./scroll-spy.svelte.js";
+
+	// =========================
+	// TYPES
+	// =========================
+	interface Props {
+		title: string;
+		/** Breadcrumb, as a reader would say it: "Marketing / Reports". */
+		section?: string;
+		/** Already worded and localised: "Updated 30 Jul 2026". */
+		updated?: string;
+		icon?: Component<{
+			class?: string;
+			weight?: "bold";
+			"aria-hidden"?: boolean | "true" | "false";
+		}>;
+		actions?: Snippet;
+		/** The body's h2s, anchored by id, for the "On this page" rail. */
+		headings?: DocHeading[];
+		contentsLabel: string;
+		/** The rendered body. Trusted HTML from the consumer's own parser, never user input. */
+		html: string;
+		/** Changes when another document is shown: the pane returns to the top and the body re-enters. */
+		resetKey: string;
+		measure?: "prose" | "wide";
+		/** Runs on the body after every swap (icons, diagrams). Returns its cleanup. */
+		enhance?: (root: HTMLElement) => void | (() => void);
+		class?: string;
+	}
+
+	// =========================
+	// PROPS
+	// =========================
+	let {
+		title,
+		section,
+		updated,
+		icon,
+		actions,
+		headings = [],
+		contentsLabel,
+		html,
+		resetKey,
+		measure = "prose",
+		enhance,
+		class: className = "",
+	}: Props = $props();
+
+	// =========================
+	// STATE
+	// =========================
+	let body = $state<HTMLElement | null>(null);
+
+	// =========================
+	// EFFECTS
+	// =========================
+	$effect(() => {
+		void html;
+		const root = body;
+		if (!root || !enhance) return;
+		return untrack(() => enhance(root)) ?? undefined;
+	});
+</script>
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- =========================== -->
+<!-- Inline, not framed: a link is an ordinary anchor, so the router swaps only this body. -->
+<DocPage
+	{title}
+	{section}
+	{updated}
+	{icon}
+	{actions}
+	{headings}
+	{contentsLabel}
+	{resetKey}
+	{measure}
+>
+	{#key resetKey}
+		<div bind:this={body} class="document-view t-enter {className}">
+			<!-- eslint-disable-next-line svelte/no-at-html-tags -- trusted, parsed server-side -->
+			{@html html}
+		</div>
+	{/key}
+</DocPage>
+
+<!-- =========================== -->
+<!-- STYLES -->
+<!-- =========================== -->
+<!-- In the components layer at zero specificity, so a consumer's own document stylesheet wins without !important. -->
+<style>
+	@layer theme, base, components, utilities;
+
+	@layer components {
+		:global {
+			:where(.document-view) {
+				color: var(--color-foreground);
+				font-size: 0.9375rem;
+				line-height: 1.65;
+				overflow-wrap: anywhere;
+			}
+			:where(.document-view) :where(h1, h2, h3, h4) {
+				font-family: var(--font-heading);
+				color: var(--color-foreground);
+				line-height: 1.25;
+				text-wrap: balance;
+				scroll-margin-top: 6rem;
+			}
+			:where(.document-view) :where(h1:first-child) {
+				display: none;
+			}
+			:where(.document-view) :where(h2) {
+				margin: 2.5rem 0 0.75rem;
+				font-size: 1.25rem;
+				font-weight: 700;
+				letter-spacing: -0.01em;
+			}
+			:where(.document-view) :where(h3) {
+				margin: 1.75rem 0 0.5rem;
+				font-size: 1rem;
+				font-weight: 600;
+			}
+			:where(.document-view) > :where(:first-child, h1:first-child + *) {
+				margin-top: 0;
+			}
+			:where(.document-view) :where(p, ul, ol, blockquote, pre, table) {
+				margin: 0 0 1rem;
+			}
+			:where(.document-view) :where(ul, ol) {
+				padding-left: 1.25rem;
+			}
+			:where(.document-view) :where(li + li) {
+				margin-top: 0.25rem;
+			}
+			:where(.document-view) :where(a) {
+				color: var(--color-brand);
+				text-decoration: underline;
+				text-decoration-color: color-mix(in oklch, currentColor 35%, transparent);
+				text-underline-offset: 0.16em;
+				transition: text-decoration-color var(--duration-fast) ease-out;
+			}
+			@media (hover: hover) and (pointer: fine) {
+				:where(.document-view) :where(a:hover) {
+					text-decoration-color: currentColor;
+				}
+			}
+			/* A wikilink to a page that does not exist yet reads as text, not as a dead link. */
+			:where(.document-view) :where(.wikilink.missing, a.missing) {
+				color: var(--color-muted-foreground);
+				text-decoration-style: dashed;
+			}
+			:where(.document-view) :where(code) {
+				font-family: var(--font-mono);
+				font-size: 0.85em;
+				padding: 0.1em 0.35em;
+				border-radius: var(--radius-sm, 0.375rem);
+				background: var(--color-muted);
+			}
+			:where(.document-view) :where(pre) {
+				overflow-x: auto;
+				padding: 0.875rem 1rem;
+				border: 1px solid var(--color-border);
+				border-radius: var(--radius-lg);
+				background: var(--color-muted);
+				font-size: 0.8125rem;
+				line-height: 1.55;
+			}
+			:where(.document-view) :where(pre code) {
+				padding: 0;
+				background: none;
+				font-size: inherit;
+			}
+			:where(.document-view) :where(blockquote) {
+				padding: 0.75rem 1rem;
+				border-radius: var(--radius-md);
+				background: var(--color-muted);
+				color: var(--color-muted-foreground);
+			}
+			:where(.document-view) :where(blockquote > :last-child) {
+				margin-bottom: 0;
+			}
+			:where(.document-view) :where(.callout) {
+				margin: 0 0 1rem;
+				padding: 0.75rem 1rem;
+				border: 1px solid var(--color-border);
+				border-radius: var(--radius-lg);
+				background: var(--color-card);
+			}
+			:where(.document-view) :where(table) {
+				display: block;
+				max-width: 100%;
+				overflow-x: auto;
+				border-collapse: collapse;
+				font-size: 0.875rem;
+				font-variant-numeric: tabular-nums;
+			}
+			:where(.document-view) :where(th, td) {
+				padding: 0.5rem 0.75rem;
+				border-bottom: 1px solid var(--color-border);
+				text-align: left;
+				vertical-align: top;
+			}
+			:where(.document-view) :where(th) {
+				font-weight: 600;
+				color: var(--color-muted-foreground);
+			}
+			:where(.document-view) :where(hr) {
+				margin: 2rem 0;
+				border: 0;
+				border-top: 1px solid var(--color-border);
+			}
+			:where(.document-view) :where(img) {
+				max-width: 100%;
+				height: auto;
+				border-radius: var(--radius-md);
+			}
+			@media (prefers-reduced-motion: reduce) {
+				:where(.document-view) :where(a) {
+					transition: none;
+				}
+			}
+		}
+	}
+</style>

package/src/components/docs/document-view.svelte.d.ts

@@ -0,0 +1,29 @@
+import type { Component, Snippet } from "svelte";
+import type { DocHeading } from "./scroll-spy.svelte.js";
+interface Props {
+    title: string;
+    /** Breadcrumb, as a reader would say it: "Marketing / Reports". */
+    section?: string;
+    /** Already worded and localised: "Updated 30 Jul 2026". */
+    updated?: string;
+    icon?: Component<{
+        class?: string;
+        weight?: "bold";
+        "aria-hidden"?: boolean | "true" | "false";
+    }>;
+    actions?: Snippet;
+    /** The body's h2s, anchored by id, for the "On this page" rail. */
+    headings?: DocHeading[];
+    contentsLabel: string;
+    /** The rendered body. Trusted HTML from the consumer's own parser, never user input. */
+    html: string;
+    /** Changes when another document is shown: the pane returns to the top and the body re-enters. */
+    resetKey: string;
+    measure?: "prose" | "wide";
+    /** Runs on the body after every swap (icons, diagrams). Returns its cleanup. */
+    enhance?: (root: HTMLElement) => void | (() => void);
+    class?: string;
+}
+declare const $$Component: Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/components/docs/index.ts

@@ -3,6 +3,7 @@
  * A surface supplies a title and a body, and never lays a document out itself.
  */
 export { default as DocPage } from "./doc-page.svelte";
+export { default as DocumentView } from "./document-view.svelte";
 export { default as OnThisPage } from "./on-this-page.svelte";
 export {
   ScrollSpy,

package/src/components/list-page/filter-popover.svelte

@@ -9,6 +9,7 @@
 	import { cn } from "../../lib/utils.js";
 	import { Button } from "../../shadcn/button/index.js";
 	import { toolbarTriggerClass } from "../toolbar/toolbar-trigger.js";
+	import { getToolbarDensity } from "./toolbar-density.js";
 	import CountChip from "../chip/count-chip.svelte";
 	import type { PhosphorIcon } from "../../lib/icon-types.js";
 
@@ -59,6 +60,10 @@
 	// =========================
 	let hasCount = $derived(count > 0);
 	let isActive = $derived(active ?? hasCount);
+	// In a list-page toolbar that ran out of room even with its tabs folded,
+	// the trigger keeps its icon and count and drops the word. See `ListPageShell`.
+	const density = getToolbarDensity();
+	let iconOnly = $derived(density?.tight === true);
 
 	// =========================
 	// STATE
@@ -80,9 +85,19 @@
 <!-- MARKUP -->
 <!-- =========================== -->
 <DropdownMenu.Root bind:open>
-	<DropdownMenu.Trigger class={toolbarTriggerClass({ active: isActive, className: triggerClass })}>
+	<DropdownMenu.Trigger
+		class={toolbarTriggerClass({
+			active: isActive,
+			className: cn(
+				iconOnly && !hasCount && !trailing && "aspect-square justify-center px-0",
+				triggerClass,
+			),
+		})}
+		title={iconOnly ? label : undefined}
+	>
 		<IconComponent aria-hidden="true" class="size-3.5" />
-		<span>{label}</span>
+		<!-- Hidden, not dropped: the label stays the trigger's accessible name. -->
+		<span class={cn(iconOnly && "sr-only")}>{label}</span>
 		{#if trailing}
 			{@render trailing()}
 		{/if}

package/src/components/list-page/list-page-shell.svelte

@@ -2,7 +2,9 @@
 	// =========================
 	// IMPORTS
 	// =========================
-	import type { Snippet } from "svelte";
+	import { flushSync, tick, untrack, type Snippet } from "svelte";
+	import { MagnifyingGlass, X } from "phosphor-svelte";
+	import { toolbarTriggerClass } from "../toolbar/toolbar-trigger.js";
 	import EmptyState from "./empty-state.svelte";
 	import { cn } from "../../lib/utils.js";
 	import { pageGutterClass } from "../../lib/layout.js";
@@ -40,6 +42,11 @@
 		content?: Snippet;
 		empty?: Snippet;
 		extra?: Snippet;
+		/** The folded search icon's name, on a toolbar too narrow for the field.
+		 *  Translate at the call site. */
+		searchLabel?: string;
+		/** The close button's name once the folded search is open. */
+		closeSearchLabel?: string;
 	}
 
 	// =========================
@@ -61,6 +68,8 @@
 		content,
 		empty,
 		extra,
+		searchLabel = "Search",
+		closeSearchLabel = "Close search",
 	}: Props = $props();
 
 	// =========================
@@ -69,16 +78,33 @@
 	// Null off an app shell, where the toolbar just has no section strip to draw.
 	const section = getSectionHost();
 	let row = $state<HTMLElement>();
-	let tabsBox = $state<HTMLElement>();
-	// True when the row at full size would wrap. The tabs then draw as one
-	// dropdown, the first control with a smaller self that still does its job.
-	let compact = $state(false);
+	// How far the row has folded to stay on one line. 0 is full size; 1 folds
+	// the tabs into a dropdown; 2 also drops the filter and display labels;
+	// 3 also turns search into an icon that opens the field across the row.
+	type Level = 0 | 1 | 2 | 3;
+	const DEEPEST: Level = 3;
+	let level = $state<Level>(0);
+	let searchOpen = $state(false);
+	let searchLayer = $state<HTMLElement>();
 	setToolbarDensity({
 		get compact() {
-			return compact;
+			return level >= 1;
+		},
+		get tight() {
+			return level >= 2;
 		},
 	});
 
+	// =========================
+	// HANDLERS
+	// =========================
+	// Focus lands in the field, since opening it is asking to type.
+	async function openSearch() {
+		searchOpen = true;
+		await tick();
+		searchLayer?.querySelector<HTMLElement>("input, [contenteditable]")?.focus();
+	}
+
 	// =========================
 	// DERIVED
 	// =========================
@@ -101,22 +127,39 @@
 		if (!hasToolbar) return;
 		return section?.claim();
 	});
+	// Widened past the last fold, the field is back in the row, so the open
+	// layer has nothing left to cover.
+	$effect(() => {
+		if (level < DEEPEST) searchOpen = false;
+	});
 	// One row, never two (Ramzi, 9 Nov 2026): /tasks at 1500px put its status
 	// tabs and actions on a second line under search and filters.
-	// WHY the tabs' full width is remembered: once folded, the row only holds the
-	// dropdown, and a probe of it would say the full strip fits when it doesn't.
+	// Then 620px and 420px still wrapped, the filters on a line of their own, so
+	// a second fold drops their labels (10 Nov 2026).
+	// WHY each level's width is remembered: a folded row only holds the smaller
+	// controls, and a probe of it can't say whether the larger ones would fit.
+	// The probe refreshes the current level's entry, so new counts or chips
+	// cost at most one extra step before the row settles.
 	$effect(() => {
 		if (!row) return;
 		const el = row;
-		let fullTabs = 0;
+		const needs = [Infinity, Infinity, Infinity, Infinity];
 		let frame = 0;
+		// WHY settled in one pass with flushSync, not a frame per level: a phone
+		// load walked 0 to 3 over four frames, and axe read the squeezed search
+		// field in between (gallery, 390px).
 		const measure = () => {
 			frame = 0;
-			const needed = naturalRowWidth(el);
-			const tabs = tabsBox?.getBoundingClientRect().width ?? 0;
-			if (!compact) fullTabs = tabs;
-			const full = compact ? needed - tabs + fullTabs : needed;
-			compact = full > el.clientWidth + 0.5;
+			for (let step = 0; step <= DEEPEST * 2; step++) {
+				const room = el.clientWidth + 0.5;
+				const at = untrack(() => level);
+				needs[at] = naturalRowWidth(el);
+				let next = at;
+				if (needs[at] > room && at < DEEPEST) next = (at + 1) as Level;
+				else if (at > 0 && needs[at - 1] <= room) next = (at - 1) as Level;
+				if (next === at) return;
+				flushSync(() => (level = next));
+			}
 		};
 		// A frame's delay folds a burst of resizes into one probe and keeps the
 		// observer from looping on its own state change.
@@ -160,68 +203,111 @@
 		{#if hasToolbar}
 			<!-- One row on every list page: search and filters left, then tabs,
 			     view toggle and primary action right. -->
-			<!-- Without room, `order` keeps the actions beside search and drops
-			     filters to a scrolling line below. flex-wrap stays on at every width. -->
-			<!-- A container query, not a breakpoint: an 834px iPad read as desktop
-			     and clipped a 733px toolbar into a 538px column. -->
+			<!-- The row never wraps. Short of room it folds the tabs, then drops the
+			     filter and display labels; past that, search and the filters strip
+			     shrink and the strip scrolls. The actions never shrink. -->
 			<!-- Sticky, because the section tabs live here. `-mx-4 px-4` covers the
 			     gutter, `-mt-4 py-4` pulls the top padding inside the sticky box. -->
+			<!-- `data-fold` lets a caller's own control fold too: a primary button
+			     writes `group-data-[fold=3]/toolbar:sr-only` on its label. -->
 			<div
-				class="@container/toolbar sticky top-0 z-20 -mx-4 -mt-4 bg-card/95 px-4 py-4 backdrop-blur supports-[backdrop-filter]:bg-card/70"
+				data-fold={level}
+				class="group/toolbar @container/toolbar sticky top-0 z-20 -mx-4 -mt-4 bg-card/95 px-4 py-4 backdrop-blur supports-[backdrop-filter]:bg-card/70"
 			>
-				<!-- Folded and still short of room, the row stops wrapping and the
-				     filters strip scrolls, since it's the one part that already can. -->
-				<div
-					bind:this={row}
-					class={cn(
-						"flex flex-wrap items-center gap-2",
-						compact && "@3xl/toolbar:flex-nowrap",
-						toolbarClass,
-					)}
-				>
-					<!-- The section tabs lead: which page comes before which slice of it.
-					     One row replaces two rows that held four controls. -->
+				<!-- WHY the section strip sits outside the measured row: it's the nav
+				     between pages, and under 768px it takes a line of its own above the
+				     toolbar. Counted in the probe, it folded controls that had room. -->
+				<!-- A container query, not a breakpoint: an 834px iPad read as desktop
+				     and clipped a 733px toolbar into a 538px column. -->
+				<div class="flex flex-wrap items-center gap-2">
 					{#if section?.strip}
-						<SectionRuns
-							strip={section.strip}
-							class="order-first w-full max-w-full @3xl/toolbar:w-auto"
-						/>
-					{/if}
-					{#if search}
-						<div class="order-1 flex min-w-0 flex-1 items-center @3xl/toolbar:flex-none">
-							{@render search()}
-						</div>
+						<SectionRuns strip={section.strip} class="w-full max-w-full @3xl/toolbar:w-auto" />
 					{/if}
-					{#if tabs || rightActions}
-						<!-- Shrinks and wraps, not shrink-0: /tasks needs 610px here, and
-						     shrink-0 clipped its last control off an iPad screen. -->
-						<div
-							class={cn(
-								"order-2 flex min-w-0 flex-wrap items-center gap-2 @3xl/toolbar:order-3",
-								hasLeading ? "@3xl/toolbar:ms-auto" : "flex-1",
-								compact && "@3xl/toolbar:shrink-0",
-							)}
-						>
-							{#if tabs}
-								<div
-									bind:this={tabsBox}
-									class={cn("flex min-w-0 items-center", !hasLeading && "me-auto")}
-								>
-									{@render tabs()}
+					<div
+						bind:this={row}
+						class={cn(
+							"relative flex min-w-0 flex-1 flex-nowrap items-center",
+							// Icon triggers sit closer: at 390px the last fold was 4px over.
+							level >= 2 ? "gap-1.5" : "gap-2",
+							toolbarClass,
+						)}
+					>
+						{#if search && level < DEEPEST}
+							<div class="flex min-w-0 shrink items-center">
+								{@render search()}
+							</div>
+						{:else if search && !searchOpen}
+							<!-- WHY a fold and not a squeeze: at 390px the field shrank under
+							     axe's 24px target size and showed two letters of its placeholder. -->
+							<button
+								type="button"
+								class={toolbarTriggerClass({
+									className: "aspect-square shrink-0 justify-center px-0",
+								})}
+								aria-label={searchLabel}
+								title={searchLabel}
+								onclick={openSearch}
+							>
+								<MagnifyingGlass aria-hidden="true" class="size-3.5" />
+							</button>
+						{:else if search}
+							<!-- Open, the field covers the whole row; Escape or the close
+							     button hands the row back, with the query kept. -->
+							<div
+								bind:this={searchLayer}
+								role="search"
+								class="absolute inset-0 z-10 flex items-center gap-2 bg-card"
+								onkeydown={(event) => {
+									if (event.key === "Escape") searchOpen = false;
+								}}
+							>
+								<div class="flex min-w-0 flex-1 items-center [&>*]:w-full [&>*]:max-w-none">
+									{@render search()}
 								</div>
-							{/if}
-							{#if rightActions}
-								{@render rightActions()}
-							{/if}
-						</div>
-					{/if}
-					{#if filters}
-						<div
-							class="no-scrollbar order-3 flex w-full max-w-full min-w-0 items-center gap-2 overflow-x-auto @3xl/toolbar:order-2 @3xl/toolbar:w-auto"
-						>
-							{@render filters()}
-						</div>
-					{/if}
+								<button
+									type="button"
+									class={toolbarTriggerClass({
+										className: "aspect-square shrink-0 justify-center px-0",
+									})}
+									aria-label={closeSearchLabel}
+									onclick={() => (searchOpen = false)}
+								>
+									<X aria-hidden="true" class="size-3.5" />
+								</button>
+							</div>
+						{/if}
+						{#if filters}
+							<!-- Tight, the strip stops shrinking: squeezed under its icon
+							     trigger, the trigger slid beneath the tabs (420px). Its
+							     chips scroll inside a capped width instead. -->
+							<div
+								class={cn(
+									"no-scrollbar flex min-w-0 items-center gap-2 overflow-x-auto",
+									level >= 2 ? "max-w-40 shrink-0" : "shrink",
+								)}
+							>
+								{@render filters()}
+							</div>
+						{/if}
+						{#if tabs || rightActions}
+							<div
+								class={cn(
+									"flex shrink-0 items-center",
+									level >= 2 ? "gap-1.5" : "gap-2",
+									hasLeading ? "ms-auto" : "flex-1",
+								)}
+							>
+								{#if tabs}
+									<div class={cn("flex min-w-0 items-center", !hasLeading && "me-auto")}>
+										{@render tabs()}
+									</div>
+								{/if}
+								{#if rightActions}
+									{@render rightActions()}
+								{/if}
+							</div>
+						{/if}
+					</div>
 				</div>
 			</div>
 		{/if}

package/src/components/list-page/list-page-shell.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { Snippet } from "svelte";
+import { type Snippet } from "svelte";
 import type { PhosphorIcon, IconWeight } from "../../lib/icon-types.js";
 type EmptyConfig = {
     icon?: PhosphorIcon;
@@ -25,6 +25,11 @@ interface Props {
     content?: Snippet;
     empty?: Snippet;
     extra?: Snippet;
+    /** The folded search icon's name, on a toolbar too narrow for the field.
+     *  Translate at the call site. */
+    searchLabel?: string;
+    /** The close button's name once the folded search is open. */
+    closeSearchLabel?: string;
 }
 declare const $$Component: import("svelte").Component<Props, {}, "">;
 type $$Component = ReturnType<typeof $$Component>;

package/src/components/list-page/toolbar-density.ts

@@ -5,7 +5,11 @@ import { getContext, setContext } from "svelte";
  * its row and sets this; a control inside it reads it and draws a smaller self.
  */
 export interface ToolbarDensity {
+  /** The tabs fold into one dropdown. */
   readonly compact: boolean;
+  /** Folded and still short: a filter or display trigger drops its label and
+   *  keeps the icon, so the row never wraps (TSK-2121, 420px). Implies compact. */
+  readonly tight: boolean;
 }
 
 // WHY context: the shell owns the measurement and 26 pages render their tabs
@@ -27,12 +31,31 @@ export function getToolbarDensity(): ToolbarDensity | undefined {
  */
 // WHY `max-content` on a probe, not the row's own width: the row is sized by
 // its container, so reading it back always says "it fits" (see collapse.ts).
+// WHY `flex: none` too: a row that is itself a flex item takes its width from
+// flex-basis, so `max-content` alone read back the container (10 Nov 2026).
+// WHY transitions are stopped: under reduced motion `tokens/base.css` gives every
+// element an 80ms transition on `all`, so the probe's own width change started a
+// transition and the read got the old width. The row never folded at 390px and
+// axe flagged the squeezed search field (gallery, 10 Nov 2026). The last fold's
+// gap and shrink changes are still running then too, so they're finished first.
 export function naturalRowWidth(row: HTMLElement): number {
-  const { width, flexWrap } = row.style;
+  for (const animation of row.getAnimations({ subtree: true })) {
+    if (animation instanceof CSSTransition) animation.finish();
+  }
+  const { width, flexWrap, flex } = row.style;
+  const transition = row.style.getPropertyValue("transition");
+  const priority = row.style.getPropertyPriority("transition");
+  row.style.setProperty("transition", "none", "important");
   row.style.width = "max-content";
   row.style.flexWrap = "nowrap";
+  row.style.flex = "none";
   const needed = row.getBoundingClientRect().width;
   row.style.width = width;
   row.style.flexWrap = flexWrap;
+  row.style.flex = flex;
+  // The restored size has to settle before transitions come back, or the
+  // row would animate back from its probe width.
+  void row.offsetWidth;
+  row.style.setProperty("transition", transition, priority);
   return needed;
 }