@heyramzi/ui 3.1.0 → 3.3.1

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;
 }

package/src/components/picker/picker.svelte

@@ -18,7 +18,8 @@
 		options?: PickerOption<V>[];
 		/** Titled runs, when the menu has a shape worth naming. */
 		groups?: PickerGroup<V>[];
-		value: V | null;
+		/** An array checks each row in it, and a pick leaves the menu open for the next one. */
+		value: V | V[] | null;
 		onSelect: (value: V) => void;
 		/** The control that opens the menu. Rendered inside `Popover.Trigger`. */
 		trigger: Snippet;
@@ -74,10 +75,14 @@
 	const WIDTH = { sm: "w-44", default: "w-52", lg: "w-60" } as const;
 
 	function pick(next: V) {
-		open = false;
+		if (!Array.isArray(value)) open = false;
 		onSelect(next);
 	}
 
+	function isChecked(option: PickerOption<V>): boolean {
+		return Array.isArray(value) ? value.includes(option.value) : option.value === value;
+	}
+
 	/**
 	 * WHY a custom filter: the default one scores `value`, which is often an id.
 	 * Typing "an" fuzzy-matched every uuid, so only the visible words are searched.
@@ -152,7 +157,7 @@
 				{#each resolved as group, i (group.heading ?? i)}
 					<Command.Group heading={group.heading}>
 						{#each group.options as option (option.value)}
-							{@const active = option.value === value}
+							{@const active = isChecked(option)}
 							<Command.Item
 								value={option.value}
 								keywords={keywordsFor(option)}

package/src/components/picker/picker.svelte.d.ts

@@ -6,7 +6,8 @@ declare function $$render<V extends string>(): {
         options?: PickerOption<V>[];
         /** Titled runs, when the menu has a shape worth naming. */
         groups?: PickerGroup<V>[];
-        value: V | null;
+        /** An array checks each row in it, and a pick leaves the menu open for the next one. */
+        value: V | V[] | null;
         onSelect: (value: V) => void;
         /** The control that opens the menu. Rendered inside `Popover.Trigger`. */
         trigger: Snippet;

package/src/components/segmented/segmented-filter.svelte

@@ -2,6 +2,7 @@
 	// =========================
 	// IMPORTS
 	// =========================
+	import { ToggleGroup } from "bits-ui";
 	import { cn } from "../../lib/utils.js";
 	import Segment from "./segment.svelte";
 	import type { TabDef } from "./animated-tabs.svelte";
@@ -26,8 +27,9 @@
 		// WHY: picks which rows are listed, with no panel of its own. That's a
 		// segmented control, not a tab set.
 
-		// WHY not `AnimatedTabs`: a strip with no tabpanel is a `group` of `aria-pressed`
-		// toggles. "Tab 1 of 4" sends a screen reader looking for a panel.
+		// WHY not `AnimatedTabs`: a strip with no tabpanel is a bits-ui single toggle group,
+		// one Tab stop whose segments report checked. "Tab 1 of 4" sends a screen reader
+		// looking for a panel.
 
 		// WHY `TabDef`: an option and a tab were the same five fields written twice.
 		options: readonly TabDef<T>[];
@@ -107,6 +109,12 @@
 		value = next;
 		onValueChange?.(next);
 	}
+
+	// bits-ui hands back a plain string, and "" when the picked segment is pressed again.
+	function pickByValue(next: string) {
+		const option = merged.find((o) => o.value === next);
+		if (option) pick(option.value);
+	}
 </script>
 
 <!-- =========================== -->
@@ -132,20 +140,21 @@
 		{/snippet}
 	</Picker>
 {:else}
-	<div
+	<!-- WHY a function binding: a filter always has one option on, so the setter drops the ""
+	     and the getter keeps showing `value`. -->
+	<ToggleGroup.Root
+		type="single"
+		bind:value={() => value, pickByValue}
 		class={cn("no-scrollbar flex max-w-full min-w-0 overflow-x-auto", className)}
-		role="group"
 		aria-label={ariaLabel}
 	>
 		<SegmentedTrack fill={block}>
 			{#each split.visible as option (option.value)}
 				{@const active = value === option.value}
 				{@const markOnly = iconOnly && Boolean(option.image || option.icon)}
-				<button
-					type="button"
+				<ToggleGroup.Item
+					value={option.value}
 					class={segmentedTriggerClass({ fill: block, active })}
-					onclick={() => pick(option.value)}
-					aria-pressed={active}
 					aria-label={markOnly ? option.label : undefined}
 					title={markOnly ? option.label : undefined}
 				>
@@ -173,7 +182,7 @@
 							{active}
 						/>
 					{/if}
-				</button>
+				</ToggleGroup.Item>
 			{/each}
 			{#snippet after()}
 				{#if split.hidden.length > 0}
@@ -181,5 +190,5 @@
 				{/if}
 			{/snippet}
 		</SegmentedTrack>
-	</div>
+	</ToggleGroup.Root>
 {/if}

package/src/components/segmented/segmented-track.svelte

@@ -83,6 +83,7 @@
 							[data-state="active"],
 							[aria-current="page"],
 							[aria-pressed="true"],
+							[data-state="on"],
 							[data-state="open"]
 						)
 				) {
@@ -116,7 +117,9 @@
 		/* Before the attachment measures, the active segment draws the pill itself,
 		   so a server-rendered strip is right before any JS arrives. */
 		.track:not([data-pill="on"])
-			:global(:is([data-state="active"], [aria-current="page"], [aria-pressed="true"])) {
+			:global(
+				:is([data-state="active"], [aria-current="page"], [aria-pressed="true"], [data-state="on"])
+			) {
 			background-color: var(--color-card);
 			box-shadow: var(--elev-btn), var(--elev-hairline);
 		}
@@ -125,7 +128,9 @@
 		:global(.dark) .pill,
 		:global(.dark)
 			.track:not([data-pill="on"])
-			:global(:is([data-state="active"], [aria-current="page"], [aria-pressed="true"])) {
+			:global(
+				:is([data-state="active"], [aria-current="page"], [aria-pressed="true"], [data-state="on"])
+			) {
 			background-color: color-mix(in oklch, var(--color-foreground) 14%, var(--color-card));
 		}
 
@@ -138,6 +143,7 @@
 							[data-state="active"],
 							[aria-current="page"],
 							[aria-pressed="true"],
+							[data-state="on"],
 							[data-state="open"]
 						)
 				) {
@@ -155,7 +161,9 @@
 		}
 
 		.track[data-variant="underline"]:not([data-pill="on"])
-			:global(:is([data-state="active"], [aria-current="page"], [aria-pressed="true"])) {
+			:global(
+				:is([data-state="active"], [aria-current="page"], [aria-pressed="true"], [data-state="on"])
+			) {
 			background-color: transparent;
 			box-shadow: inset 0 -2px 0 var(--segmented-rule, var(--color-foreground));
 		}

package/src/components/table-view/table-view.svelte

@@ -17,6 +17,7 @@
 	import * as ContextMenu from "../../shadcn/context-menu/index.js";
 	import { Checkbox } from "../../shadcn/checkbox/index.js";
 	import { SortableHead, TableSkeleton } from "../data-table/index.js";
+	import GroupHead from "../work-parts/group-head.svelte";
 	import { toggleSort, type SortState } from "../data-table/data-table.js";
 	import { MENU_KEYS, openMenuFromKey } from "../data-table/menu-key.js";
 
@@ -119,6 +120,9 @@
 		skeletonRows = 5,
 	}: Props = $props();
 
+	// Names each group's body, so a fold button can say which rows it folds.
+	const uid = $props.id();
+
 	// =========================
 	// DERIVED
 	// =========================
@@ -229,6 +233,15 @@
 <!-- =========================== -->
 <!-- MARKUP -->
 <!-- =========================== -->
+{#snippet groupTitle(tableGroup: TableGroup<Row>, className?: string)}
+	<!-- The th sets the type: GroupHead takes the name as markup, so no size of its own lands on it. -->
+	<GroupHead class={className}>
+		{#snippet title()}
+			{#if groupHeader}{@render groupHeader(tableGroup)}{:else}{tableGroup.key}{/if}
+		{/snippet}
+	</GroupHead>
+{/snippet}
+
 {#snippet body(row: Row)}
 	{#each columns as column (column.key)}
 		<Table.Cell
@@ -403,10 +416,11 @@
 			<TableSkeleton rows={skeletonRows} columns={skeletonColumns} />
 		{:else}
 			{#if group}
-				{#each entries as entry (entry.id)}
+				{#each entries as entry, index (entry.id)}
 					{@const folded = entry.key !== null && collapsible && collapsed.has(entry.key)}
 					{@const tableGroup = { key: entry.key ?? "", rows: entry.rows }}
-					<Table.Body>
+					{@const bodyId = `${uid}-group-${index}`}
+					<Table.Body id={bodyId}>
 						{#if entry.key !== null}
 							<Table.Row
 								class="bg-foreground/4 hover:translate-y-0 hover:bg-foreground/4 hover:shadow-none"
@@ -416,6 +430,7 @@
 										<button
 											type="button"
 											aria-expanded={!folded}
+											aria-controls={bodyId}
 											class="t-press flex h-8 w-full items-center gap-2 px-2 text-start outline-none focus-visible:shadow-(--ring-focus-inset)"
 											onclick={() => toggleGroup(tableGroup.key)}
 										>
@@ -426,12 +441,13 @@
 												)}
 												aria-hidden="true"
 											/>
-											{#if groupHeader}{@render groupHeader(tableGroup)}{:else}{tableGroup.key}{/if}
+											{@render groupTitle(tableGroup)}
 										</button>
 									{:else}
-										<span class="flex h-8 items-center px-2">
-											{#if groupHeader}{@render groupHeader(tableGroup)}{:else}{tableGroup.key}{/if}
-										</span>
+										<!-- No gap: unlike the toggle, a fixed head never spaced its parts. -->
+										<div class="flex h-8 items-center px-2">
+											{@render groupTitle(tableGroup, "gap-0")}
+										</div>
 									{/if}
 								</Table.Head>
 							</Table.Row>