@heyramzi/ui 3.1.0 → 3.3.0

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>

package/src/components/tags-input/tags-input.svelte

@@ -3,6 +3,7 @@
 	// IMPORTS
 	// =========================
 	import { tick } from "svelte";
+	import { Combobox } from "bits-ui";
 	import { Plus } from "phosphor-svelte";
 	import { cn } from "../../lib/utils.js";
 	import TagChip from "../chip/tag-chip.svelte";
@@ -79,11 +80,11 @@
 	// =========================
 	let editing = $state(false);
 	let query = $state("");
-	let active = $state(0);
 	// What the list shows while a save is in flight, so a tag doesn't blink out and back.
 	let pending = $state<string[] | null>(null);
 	let input = $state<HTMLInputElement | null>(null);
 	let root = $state<HTMLElement | null>(null);
+	let menu = $state<HTMLElement | null>(null);
 	/** What the live region last said: the tags a save added or removed. */
 	let announcement = $state("");
 	const listId = $props.id();
@@ -177,30 +178,35 @@
 
 	function add(name: string) {
 		query = "";
-		active = 0;
 		void commit(addTag(tags, name, options, max));
 	}
 
+	// Bits adds the picked row's value to the list (Enter or a click). The name goes through add for its spelling and the max.
+	function pick(next: string[]) {
+		const name = next.find((entry) => !tags.includes(entry));
+		if (name !== undefined) add(name);
+	}
+
+	// The row Bits highlights: a close option when there is one, else the visible Create row.
+	function highlighted() {
+		const lit = menu?.querySelector("[data-highlighted]")?.getAttribute("data-value");
+		return rows.find((row) => row.name === lit) ?? rows[0];
+	}
+
+	// Bits owns the arrows and Enter on a typed query. These keys sit on top of it, and run first.
 	function onKey(event: KeyboardEvent) {
-		const last = rows.length - 1;
-		const separator = event.key === "," || (free && event.key === " ");
-		if (free && (separator || event.key === "Enter" || (event.key === "Tab" && query.trim()))) {
-			event.preventDefault();
-			if (query.trim()) add(query);
-			else if (event.key === "Enter") finish();
-		} else if (event.key === "ArrowDown" || event.key === "ArrowUp") {
-			if (rows.length === 0) return;
+		const typed = query.trim() !== "";
+		const separator = event.key === "," || (event.key === "Tab" && typed);
+		if (free && (separator || event.key === " " || (event.key === "Enter" && typed))) {
 			event.preventDefault();
-			const step = event.key === "ArrowDown" ? 1 : -1;
-			active = (active + step + rows.length) % rows.length;
-		} else if (event.key === "Enter") {
+			if (typed) add(query);
+		} else if (!free && separator) {
 			event.preventDefault();
-			// The highlighted row: a close option when there is one, else the visible Create row.
-			if (!query.trim()) finish();
-			else if (rows.length > 0) add(rows[Math.min(active, last)].name);
-		} else if (event.key === "," || (event.key === "Tab" && query.trim())) {
+			const row = highlighted();
+			if (typed && row) add(row.name);
+		} else if (event.key === "Enter" && !typed) {
 			event.preventDefault();
-			if (query.trim() && rows.length > 0) add(rows[Math.min(active, last)].name);
+			finish();
 		} else if (
 			event.key === "ArrowLeft" &&
 			tags.length > 0 &&
@@ -257,12 +263,6 @@
 		const next = event.relatedTarget as Node | null;
 		if (editing && !(next && root?.contains(next))) stop();
 	}
-
-	// A new query starts from its best match.
-	$effect(() => {
-		void query;
-		active = 0;
-	});
 </script>
 
 <!-- =========================== -->
@@ -283,6 +283,23 @@
 	</TagChip>
 {/snippet}
 
+<!-- The free box is a plain text field. With suggestions, Bits adds the combobox role, state and keys. -->
+{#snippet box(attrs: Record<string, unknown>)}
+	<input
+		{...attrs}
+		bind:this={input}
+		bind:value={query}
+		type="text"
+		aria-label={label}
+		autocomplete="off"
+		autocapitalize="off"
+		spellcheck="false"
+		enterkeyhint="done"
+		placeholder={tags.length === 0 ? text.add : ""}
+		class="h-5 min-w-16 flex-1 bg-transparent px-1 text-base outline-none placeholder:text-muted-foreground sm:text-xs"
+	/>
+{/snippet}
+
 <div
 	bind:this={root}
 	class={cn("relative min-w-0", className)}
@@ -298,62 +315,62 @@
 			{/each}
 			{#if full}
 				<span class="px-1 text-xs text-muted-foreground">{text.max}</span>
+			{:else if free}
+				{@render box({ onkeydown: onKey, onpaste: onPaste })}
 			{:else}
-				<input
-					bind:this={input}
-					bind:value={query}
-					type="text"
-					role="combobox"
-					aria-label={label}
-					aria-expanded={open}
-					aria-controls={listId}
-					aria-autocomplete="list"
-					aria-activedescendant={open ? `${listId}-${active}` : undefined}
-					autocomplete="off"
-					autocapitalize="off"
-					spellcheck="false"
-					enterkeyhint="done"
-					placeholder={tags.length === 0 ? text.add : ""}
-					class="h-5 min-w-16 flex-1 bg-transparent px-1 text-base outline-none placeholder:text-muted-foreground sm:text-xs"
-					onkeydown={onKey}
-					onpaste={onPaste}
-				/>
+				<!-- The list's open state follows the query, so Bits' own open and close requests are dropped. -->
+				<Combobox.Root
+					type="multiple"
+					loop
+					bind:value={() => tags, pick}
+					bind:open={() => open, () => {}}
+				>
+					<Combobox.Input onkeydown={onKey} onpaste={onPaste}>
+						{#snippet child({ props })}
+							<!-- The box shows the query, not the text Bits writes after a pick. -->
+							{@const { value: _shown, ...bits } = props}
+							{@render box({ ...bits, "aria-controls": open ? listId : undefined })}
+						{/snippet}
+					</Combobox.Input>
+					<Combobox.Portal>
+						<!-- WHY customAnchor: the list sits under the whole field, not under the box at the end of the tags. -->
+						<Combobox.Content
+							bind:ref={menu}
+							id={listId}
+							aria-label={label}
+							customAnchor={root}
+							side="bottom"
+							align="start"
+							sideOffset={4}
+							collisionPadding={8}
+							class="z-50 max-h-60 w-(--bits-combobox-anchor-width) min-w-48 rounded-xl bg-popover text-popover-foreground shadow-edge-raised"
+						>
+							<Combobox.Viewport class="p-1">
+								{#each rows as row (row.kind + row.name)}
+									<Combobox.Item
+										value={row.name}
+										label={row.name}
+										class="flex min-h-8 cursor-default items-center gap-2 rounded-lg px-2 text-sm any-pointer-coarse:min-h-11 data-highlighted:bg-foreground/6 data-highlighted:text-foreground"
+									>
+										{#if row.kind === "create"}
+											<Plus class="size-3.5 shrink-0 text-muted-foreground" aria-hidden="true" />
+											<span class="truncate">{text.create(row.name)}</span>
+										{:else}
+											<span class="truncate">{row.name}</span>
+										{/if}
+									</Combobox.Item>
+								{/each}
+								{#if nothing}
+									<div class="flex min-h-8 items-center px-2 text-sm text-muted-foreground">
+										{text.none}
+									</div>
+								{/if}
+							</Combobox.Viewport>
+						</Combobox.Content>
+					</Combobox.Portal>
+				</Combobox.Root>
 			{/if}
 		</div>
-		{#if open}
-			<ul
-				id={listId}
-				role="listbox"
-				aria-label={label}
-				class="absolute top-full left-0 z-50 mt-1 max-h-60 w-full min-w-48 overflow-y-auto rounded-xl bg-popover p-1 text-popover-foreground shadow-edge-raised"
-			>
-				{#each rows as row, index (row.kind + row.name)}
-					<!-- svelte-ignore a11y_click_events_have_key_events -->
-					<li
-						id="{listId}-{index}"
-						role="option"
-						aria-selected={index === active}
-						class={cn(
-							"flex min-h-8 cursor-default items-center gap-2 rounded-lg px-2 text-sm any-pointer-coarse:min-h-11",
-							index === active && "bg-foreground/6 text-foreground",
-						)}
-						onmousedown={(e) => e.preventDefault()}
-						onmousemove={() => (active = index)}
-						onclick={() => add(row.name)}
-					>
-						{#if row.kind === "create"}
-							<Plus class="size-3.5 shrink-0 text-muted-foreground" aria-hidden="true" />
-							<span class="truncate">{text.create(row.name)}</span>
-						{:else}
-							<span class="truncate">{row.name}</span>
-						{/if}
-					</li>
-				{/each}
-				{#if nothing}
-					<li class="flex min-h-8 items-center px-2 text-sm text-muted-foreground">{text.none}</li>
-				{/if}
-			</ul>
-		{/if}
 	{:else}
 		<button
 			type="button"

package/src/components/toolbar/toolbar.svelte

@@ -101,8 +101,9 @@
 				class="@max-2xl/toolbar:hidden"
 			/>
 			<DropdownMenu.Root>
+				<!-- The name carries the tab it shows (WCAG 2.5.3), so "click Open" reaches it. -->
 				<DropdownMenu.Trigger
-					aria-label={tabsLabel}
+					aria-label={currentTab ? `${tabsLabel}: ${currentTab.label}` : tabsLabel}
 					class={cn(toolbarTriggerClass(), "min-w-0 @2xl/toolbar:hidden")}
 				>
 					<span class="truncate">{currentTab?.label}</span>

package/src/components/toolbar/toolbar.test.ts

@@ -55,22 +55,23 @@ describe("Toolbar", () => {
       tabsLabel: "Status",
       viewLabel: "Layout",
     });
-    for (const label of ["Find", "Status", "Layout"]) {
+    for (const label of ["Find", "Status: All", "Layout"]) {
       expect(root.querySelector(`button[aria-label="${label}"]`), label).not.toBeNull();
     }
   });
 
-  it("shows the current tab on the narrow menu trigger", async () => {
+  // The name holds the visible tab too (WCAG 2.5.3), so a speech user can say it.
+  it("shows the current tab on the narrow menu trigger and names it", async () => {
     const root = render({ search: "", tabs, tab: "open", views, view: "list" });
     await tick();
-    expect(root.querySelector('button[aria-label="Show"]')?.textContent?.trim()).toBe("Open");
+    expect(root.querySelector('button[aria-label="Show: Open"]')?.textContent?.trim()).toBe("Open");
   });
 
   it("leaves out what it isn't given", () => {
     const root = render({ tabs, tab: "all" });
     expect(root.querySelector('button[aria-label="Search"]')).toBeNull();
     expect(root.querySelector('button[aria-label="View"]')).toBeNull();
-    expect(root.querySelector('button[aria-label="Show"]')).not.toBeNull();
+    expect(root.querySelector('button[aria-label="Show: All"]')).not.toBeNull();
   });
 
   // The 10 Nov audit: the wide search box had only its placeholder for a name.

package/src/components/work-parts/group-head.svelte

@@ -6,10 +6,13 @@
 	import CountChip from "../chip/count-chip.svelte";
 
 	interface Props {
-		label: string;
+		label?: string;
+		/** Drawn in place of `label`, in the caller's own type, for a head whose name is markup. */
+		title?: Snippet;
 		/** The status colour of the dot. Leave out for no dot. */
 		hue?: string;
-		count: number;
+		/** Leave out for no count chip. */
+		count?: number;
 		/** Shows a plus at the end that adds an item to this group. */
 		onAdd?: () => void;
 		addLabel?: string;
@@ -18,16 +21,32 @@
 		class?: string;
 	}
 
-	let { label, hue, count, onAdd, addLabel = "Add", children, class: className }: Props = $props();
+	let {
+		label,
+		title,
+		hue,
+		count,
+		onAdd,
+		addLabel = "Add",
+		children,
+		class: className,
+	}: Props = $props();
 </script>
 
-<!-- A group's head, the same in a kanban column and a list group: dot, name, count, plus. -->
-<div class={cn("flex h-8 min-w-0 flex-1 items-center gap-2", className)}>
+<!-- A group's head, the same in a kanban column, a list group, a grouped list and a table group:
+     dot, name, count, plus. A span, since two callers put it inside their toggle button. -->
+<span class={cn("flex h-8 min-w-0 flex-1 items-center gap-2", className)}>
 	{#if hue}
 		<span class="size-2 shrink-0 rounded-full" style:background={hue} aria-hidden="true"></span>
 	{/if}
-	<span class="truncate text-sm font-medium text-foreground">{label}</span>
-	<CountChip {count} />
+	{#if title}
+		{@render title()}
+	{:else}
+		<span class="truncate text-sm font-medium text-foreground">{label}</span>
+	{/if}
+	{#if count !== undefined}
+		<CountChip {count} />
+	{/if}
 	{#if children || onAdd}
 		<span class="ms-auto flex shrink-0 items-center gap-0.5">
 			{@render children?.()}
@@ -36,7 +55,7 @@
 					variant="ghost"
 					size="sm"
 					icon
-					aria-label="{addLabel}: {label}"
+					aria-label={label ? `${addLabel}: ${label}` : addLabel}
 					class="text-muted-foreground"
 					onclick={onAdd}
 				>
@@ -45,4 +64,4 @@
 			{/if}
 		</span>
 	{/if}
-</div>
+</span>

package/src/components/work-parts/group-head.svelte.d.ts

@@ -1,9 +1,12 @@
 import type { Snippet } from "svelte";
 interface Props {
-    label: string;
+    label?: string;
+    /** Drawn in place of `label`, in the caller's own type, for a head whose name is markup. */
+    title?: Snippet;
     /** The status colour of the dot. Leave out for no dot. */
     hue?: string;
-    count: number;
+    /** Leave out for no count chip. */
+    count?: number;
     /** Shows a plus at the end that adds an item to this group. */
     onAdd?: () => void;
     addLabel?: string;