@heyramzi/ui 2.24.0 → 3.1.0

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

@@ -0,0 +1,96 @@
+import type { Snippet } from "svelte";
+import type { TableColumn } from "./types.js";
+export type TableCell<Row> = {
+    row: Row;
+    column: TableColumn<Row>;
+    value: unknown;
+    text: string;
+};
+export type TableGroup<Row> = {
+    key: string;
+    rows: Row[];
+};
+export type { TableColumn };
+import { type SortState } from "../data-table/data-table.js";
+declare function $$render<Row extends object>(): {
+    props: {
+        columns: TableColumn<Row>[];
+        rows: Row[];
+        /** What names a row, so a filter keeps its rows in place. */
+        rowKey: (row: Row) => string;
+        /** What the table is, for a screen reader. */
+        label: string;
+        /** A totals row, drawn under the body in the same columns. */
+        footer?: Row;
+        /** Draws a cell its own way. Print `text` for the plain case. */
+        cell?: Snippet<[TableCell<Row>]>;
+        rowClass?: (row: Row) => string | undefined;
+        /**
+         * Below this width the table scrolls sideways inside its frame. Defaults to the columns'
+         * own widths (8rem a text column, 5rem a number), so a phone scrolls rather than splits words.
+         * Pass "0" for a table that should squeeze.
+         */
+        minWidth?: string;
+        class?: string;
+        /** The sorted column and its direction. Bind it; columns with `sortable` set it. */
+        sort?: SortState<Row>;
+        /** Where a row goes. Draws a real link over the row, so middle-click and cmd-click work. */
+        rowHref?: (row: Row) => string | undefined;
+        /** Runs on a plain left click of the row link. Call `event.preventDefault()` to open in place; a modified click still follows `href`. */
+        onRowLink?: (row: Row, event: MouseEvent) => void;
+        /** The link's accessible name. Defaults to the row's first column text. */
+        rowLabel?: (row: Row) => string;
+        /** Adds a checkbox column with a select-all in the head. */
+        selectable?: boolean;
+        /** The `rowKey` of every checked row. Bind it. */
+        selected?: Set<string>;
+        selectAllLabel?: string;
+        selectRowLabel?: (row: Row) => string;
+        /** The items of a row menu: `ContextMenu.Item`s. Right-click, a long press, Shift+F10 or the ContextMenu key opens it. */
+        rowMenu?: Snippet<[Row]>;
+        /** Rows that return the same key sit under one header row, and `null` rows sit with no header. Order `rows` so a group is contiguous. */
+        group?: (row: Row) => string | null;
+        /** Draws a group's header. Prints the key when left out. */
+        groupHeader?: Snippet<[TableGroup<Row>]>;
+        /** Makes each group header a button that folds its rows. */
+        collapsible?: boolean;
+        /** The keys of the folded groups. Bind it. */
+        collapsed?: Set<string>;
+        /** Draws a column head its own way, an icon or a colour. Print `column.label` for the plain case. */
+        head?: Snippet<[TableColumn<Row>]>;
+        /** The row opens in place, from a button over the row named like the row link. */
+        onRowClick?: (row: Row) => void;
+        /** Whether a row shows its `subRow`. */
+        expanded?: (row: Row) => boolean;
+        /** A full-width row under the row, for detail. */
+        subRow?: Snippet<[Row]>;
+        /** Drawn across every column when there are no rows. */
+        empty?: Snippet;
+        /** Drawn across every column under the last row: a load-more sentinel or a spinner. */
+        trailing?: Snippet;
+        /** Draws placeholder rows in the same frame instead of `rows`. */
+        loading?: boolean;
+        skeletonRows?: number;
+    };
+    exports: {};
+    bindings: "sort" | "selected" | "collapsed";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Row extends object> {
+    props(): ReturnType<typeof $$render<Row>>['props'];
+    events(): ReturnType<typeof $$render<Row>>['events'];
+    slots(): ReturnType<typeof $$render<Row>>['slots'];
+    bindings(): "sort" | "selected" | "collapsed";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Row extends object>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Row>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Row>['props']>, ReturnType<__sveltets_Render<Row>['events']>, ReturnType<__sveltets_Render<Row>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Row>['bindings']>;
+    } & ReturnType<__sveltets_Render<Row>['exports']>;
+    <Row extends object>(internal: unknown, props: ReturnType<__sveltets_Render<Row>['props']> & {}): ReturnType<__sveltets_Render<Row>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const $$Component: $$IsomorphicComponent;
+type $$Component<Row extends object> = InstanceType<typeof $$Component<Row>>;
+export default $$Component;

package/src/components/table-view/table-view.test.ts

@@ -64,15 +64,19 @@ describe("TableView extensions", () => {
     { key: "total", label: "Total", numeric: true, sortable: true },
   ];
 
-  it("sorts from a head, by click or Enter, and sets aria-sort", () => {
+  // The 10 Nov audit: the head took focus itself with no button inside, so it wasn't announced as a control.
+  it("sorts from a button in the head and sets aria-sort on the th", () => {
     const { target, done } = render({ columns: sortable, sort: { key: "name", direction: "asc" } });
     const heads = target.querySelectorAll<HTMLElement>("thead th");
     expect(heads[0].getAttribute("aria-sort")).toBe("ascending");
     expect(heads[1].getAttribute("aria-sort")).toBe("none");
-    heads[1].click();
+    expect(heads[1].hasAttribute("tabindex")).toBe(false);
+    const button = heads[1].querySelector<HTMLButtonElement>("button");
+    expect(button?.textContent?.trim()).toBe("Total");
+    button?.click();
     flushSync();
     expect(target.querySelectorAll("thead th")[1].getAttribute("aria-sort")).toBe("ascending");
-    heads[1].dispatchEvent(new KeyboardEvent("keydown", { key: "Enter", bubbles: true }));
+    button?.click();
     flushSync();
     expect(target.querySelectorAll("thead th")[1].getAttribute("aria-sort")).toBe("descending");
     done();
@@ -123,17 +127,39 @@ describe("TableView extensions", () => {
 });
 
 describe("TableView row actions", () => {
-  it("opens a row on click and Enter, but leaves a nested button alone", () => {
+  // The 10 Nov audit: a clickable row took focus as a bare tr, so a screen reader didn't call it a control.
+  it("opens a row from its own named button or a click, but leaves a nested button alone", () => {
     const calls: string[] = [];
     const cell = createRawSnippet<[{ text: string }]>((cellProps) => ({
       render: () => `<span><button>${cellProps().text}</button></span>`,
     }));
     const { target, done } = render({ onRowClick: (row: Row) => calls.push(row.id), cell });
     const tr = target.querySelector("tbody tr") as HTMLElement;
+    expect(tr.hasAttribute("tabindex")).toBe(false);
+    const open = tr.querySelector<HTMLButtonElement>("td:last-child > button[aria-label]");
+    expect(open?.getAttribute("aria-label")).toBe("Audit");
+    open?.click();
     tr.click();
-    tr.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter", bubbles: true }));
-    (tr.querySelector("button") as HTMLButtonElement).click();
+    (tr.querySelector("span > button") as HTMLButtonElement).click();
     expect(calls).toEqual(["a", "a"]);
+    expect(target.querySelectorAll("thead th").length).toBe(3);
+    done();
+  });
+
+  it("opens a row menu from Shift+F10 or the ContextMenu key on a focused row", () => {
+    const rowMenu = createRawSnippet(() => ({ render: () => `<span>Rename</span>` }));
+    const { target, done } = render({ rowMenu });
+    const tr = target.querySelector("tbody tr") as HTMLElement;
+    expect(tr.tabIndex).toBe(0);
+    expect(tr.getAttribute("aria-keyshortcuts")).toBe("Shift+F10 ContextMenu");
+    for (const init of [{ key: "F10", shiftKey: true }, { key: "ContextMenu" }]) {
+      const opened: Event[] = [];
+      tr.addEventListener("contextmenu", (event) => opened.push(event), { once: true });
+      const key = new KeyboardEvent("keydown", { ...init, bubbles: true, cancelable: true });
+      tr.dispatchEvent(key);
+      expect(key.defaultPrevented).toBe(true);
+      expect(opened.length).toBe(1);
+    }
     done();
   });
 

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

@@ -2,6 +2,7 @@
 	// =========================
 	// IMPORTS
 	// =========================
+	import { tick } from "svelte";
 	import { Plus } from "phosphor-svelte";
 	import { cn } from "../../lib/utils.js";
 	import TagChip from "../chip/tag-chip.svelte";
@@ -26,13 +27,16 @@
 		max: string;
 		/** Shown when what's typed matches nothing and creating isn't allowed. */
 		none: string;
+		/** Announced to a screen reader once a tag is saved, and once one is gone. */
+		added: (tag: string) => string;
+		removed: (tag: string) => string;
 	}
 
 	interface Props {
 		/** The tags. Order is kept. */
 		value: readonly string[];
 		/** Called with the whole next list. Throw to refuse: the list reverts. */
-		onchange: (next: string[]) => void | Promise<void>;
+		onValueChange: (next: string[]) => void | Promise<void>;
 		/** The labels people pick from. Picking one stores its exact spelling and case. */
 		options?: readonly string[];
 		/**
@@ -43,8 +47,8 @@
 		/** Most tags the list holds. Past it the input goes away. */
 		max?: number;
 		/**
-		 * Tags typed freely, with no options and no menu: Enter, comma, space or Tab adds what's
-		 * typed, a pasted list adds every part, and leaving the field keeps what was typed.
+		 * Free typing, no options or menu: Enter, comma, space or Tab adds what's typed, a paste
+		 * adds every part, and leaving the field keeps the text.
 		 */
 		free?: boolean;
 		/** Accessible name of the field. */
@@ -59,7 +63,7 @@
 	// =========================
 	let {
 		value,
-		onchange,
+		onValueChange,
 		options = [],
 		allowCreate = true,
 		max,
@@ -80,6 +84,8 @@
 	let pending = $state<string[] | null>(null);
 	let input = $state<HTMLInputElement | null>(null);
 	let root = $state<HTMLElement | null>(null);
+	/** What the live region last said: the tags a save added or removed. */
+	let announcement = $state("");
 	const listId = $props.id();
 
 	// =========================
@@ -91,6 +97,8 @@
 		remove: (tag) => `Remove ${tag}`,
 		max: "Limit reached",
 		none: "No match",
+		added: (tag) => `Added ${tag}`,
+		removed: (tag) => `Removed ${tag}`,
 		...labels,
 	});
 	const tags = $derived(pending ?? [...value]);
@@ -114,9 +122,14 @@
 	// =========================
 	async function commit(next: readonly string[]) {
 		if (next === tags) return;
+		const before = tags;
 		pending = [...next];
 		try {
-			await onchange([...next]);
+			await onValueChange([...next]);
+			announcement = [
+				...next.filter((tag) => !before.includes(tag)).map(text.added),
+				...before.filter((tag) => !next.includes(tag)).map(text.removed),
+			].join(", ");
 		} finally {
 			pending = null;
 		}
@@ -125,7 +138,32 @@
 	function start() {
 		if (disabled) return;
 		editing = true;
-		queueMicrotask(() => input?.focus());
+		// A full list has no box, so focus lands on the last chip instead.
+		void tick().then(() => (input ?? chipButtons().at(-1))?.focus());
+	}
+
+	const chipButtons = () => [
+		...(root?.querySelectorAll<HTMLButtonElement>("[data-slot=tag-chip] button") ?? []),
+	];
+
+	// Arrows walk the chips and the box, Backspace or Delete removes the focused chip, Esc goes back to the box.
+	function onChipKey(event: KeyboardEvent, tag: string) {
+		const buttons = chipButtons();
+		const index = buttons.findIndex((button) => button === event.target);
+		if (index < 0) return;
+		const next = buttons[index + 1] ?? input;
+		if (event.key === "ArrowLeft") buttons[index - 1]?.focus();
+		else if (event.key === "ArrowRight") next?.focus();
+		else if (event.key === "Escape") (input ?? next)?.focus();
+		else if (["Backspace", "Delete", "Enter", " "].includes(event.key)) {
+			// Focus moves on first, so it never drops to the page. A full list's last chip waits for the box.
+			(next ?? buttons[index - 1])?.focus();
+			void commit(removeTag(tags, tag));
+			void tick().then(() => {
+				if (!root?.contains(document.activeElement)) input?.focus();
+			});
+		} else return;
+		event.preventDefault();
 	}
 
 	// Blur keeps typed text only when it's an existing label spelt another way, or the field is free.
@@ -149,7 +187,7 @@
 		if (free && (separator || event.key === "Enter" || (event.key === "Tab" && query.trim()))) {
 			event.preventDefault();
 			if (query.trim()) add(query);
-			else if (event.key === "Enter") stop();
+			else if (event.key === "Enter") finish();
 		} else if (event.key === "ArrowDown" || event.key === "ArrowUp") {
 			if (rows.length === 0) return;
 			event.preventDefault();
@@ -158,23 +196,34 @@
 		} else if (event.key === "Enter") {
 			event.preventDefault();
 			// The highlighted row: a close option when there is one, else the visible Create row.
-			if (!query.trim()) stop();
+			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())) {
 			event.preventDefault();
 			if (query.trim() && rows.length > 0) add(rows[Math.min(active, last)].name);
+		} else if (
+			event.key === "ArrowLeft" &&
+			tags.length > 0 &&
+			input?.selectionStart === 0 &&
+			input.selectionEnd === 0
+		) {
+			event.preventDefault();
+			chipButtons().at(-1)?.focus();
 		} else if (event.key === "Backspace" && query === "" && tags.length > 0) {
 			void commit(removeTag(tags, tags[tags.length - 1]));
 		} else if (event.key === "Escape") {
 			event.preventDefault();
 			if (query) query = "";
-			else {
-				editing = false;
-				root?.querySelector("button")?.focus();
-			}
+			else finish();
 		}
 	}
 
+	// Closing from the keyboard hands focus back to the field, once it's drawn again.
+	function finish() {
+		stop();
+		void tick().then(() => root?.querySelector("button")?.focus());
+	}
+
 	// Pasted words that are existing labels are added. The rest stay in the box to be created on purpose.
 	function onPaste(event: ClipboardEvent) {
 		const pasted = event.clipboardData?.getData("text") ?? "";
@@ -201,9 +250,10 @@
 		);
 	}
 
-	// WHY: Chrome fires focusout from the read-state button as editing removes it, so only the input leaving counts.
+	// WHY: Chrome fires focusout from the read-state button as editing removes it, so only the box or a chip leaving counts.
 	function onFocusOut(event: FocusEvent) {
-		if (event.target !== input) return;
+		const chipLeft = editing && (event.target as Element).closest("[data-slot=tag-chip]");
+		if (event.target !== input && !chipLeft) return;
 		const next = event.relatedTarget as Node | null;
 		if (editing && !(next && root?.contains(next))) stop();
 	}
@@ -226,7 +276,8 @@
 		title={tag}
 		removeLabel={text.remove(tag)}
 		removeFocusable={false}
-		onremove={removable ? () => commit(removeTag(tags, tag)) : undefined}
+		onRemove={removable ? () => commit(removeTag(tags, tag)) : undefined}
+		onkeydown={removable ? (event: KeyboardEvent) => onChipKey(event, tag) : undefined}
 	>
 		{tag}
 	</TagChip>
@@ -309,7 +360,7 @@
 			class={cn(
 				"-ml-1.5 flex min-h-7 w-full flex-wrap items-center gap-1 rounded-lg px-1.5 py-1 text-left transition-colors outline-none duration-quick ease-smooth-out hover:bg-foreground/4 focus-visible:shadow-(--ring-focus) disabled:pointer-events-none motion-reduce:transition-none",
 			)}
-			aria-label={label}
+			aria-label={tags.length > 0 ? `${label}: ${tags.join(", ")}` : label}
 			{disabled}
 			onclick={start}
 		>
@@ -320,4 +371,5 @@
 			{/each}
 		</button>
 	{/if}
+	<span class="sr-only" role="status">{announcement}</span>
 </div>

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

@@ -0,0 +1,40 @@
+interface Labels {
+    /** Shown in the empty read state and as the input's placeholder. */
+    add: string;
+    create: (query: string) => string;
+    remove: (tag: string) => string;
+    max: string;
+    /** Shown when what's typed matches nothing and creating isn't allowed. */
+    none: string;
+    /** Announced to a screen reader once a tag is saved, and once one is gone. */
+    added: (tag: string) => string;
+    removed: (tag: string) => string;
+}
+interface Props {
+    /** The tags. Order is kept. */
+    value: readonly string[];
+    /** Called with the whole next list. Throw to refuse: the list reverts. */
+    onValueChange: (next: string[]) => void | Promise<void>;
+    /** The labels people pick from. Picking one stores its exact spelling and case. */
+    options?: readonly string[];
+    /**
+     * Whether a label that isn't an option may be made, through the "Create" row only.
+     * Text close to an option never becomes a label unless that row is chosen.
+     */
+    allowCreate?: boolean;
+    /** Most tags the list holds. Past it the input goes away. */
+    max?: number;
+    /**
+     * Free typing, no options or menu: Enter, comma, space or Tab adds what's typed, a paste
+     * adds every part, and leaving the field keeps the text.
+     */
+    free?: boolean;
+    /** Accessible name of the field. */
+    label: string;
+    labels?: Partial<Labels>;
+    disabled?: boolean;
+    class?: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/components/tags-input/tags-input.test.ts

@@ -0,0 +1,101 @@
+import { flushSync, mount, tick, unmount } from "svelte";
+import { describe, expect, it } from "vite-plus/test";
+import TagsInput from "./tags-input.svelte";
+
+async function render(start: string[]) {
+  const target = document.createElement("div");
+  document.body.appendChild(target);
+  // The field shows `pending` while a save runs, then reads `value` again, so a getter is enough here.
+  let saved = start;
+  const app = mount(TagsInput, {
+    target,
+    props: {
+      get value() {
+        return saved;
+      },
+      onValueChange: (next: string[]) => {
+        saved = next;
+      },
+      label: "Tools",
+      free: true,
+    },
+  });
+  flushSync();
+  const key = async (k: string) => {
+    (document.activeElement as HTMLElement).dispatchEvent(
+      new KeyboardEvent("keydown", { key: k, bubbles: true, cancelable: true }),
+    );
+    flushSync();
+    await tick();
+  };
+  const chips = () => [
+    ...target.querySelectorAll<HTMLButtonElement>("[data-slot=tag-chip] button"),
+  ];
+  return {
+    target,
+    key,
+    chips,
+    focused: () =>
+      document.activeElement?.getAttribute("aria-label") ?? document.activeElement?.tagName,
+    done: () => {
+      void unmount(app);
+      target.remove();
+    },
+  };
+}
+
+// The 10 Nov audit: the remove buttons skipped the Tab order, so only the last tag could go.
+describe("TagsInput keyboard", () => {
+  it("names the field with its tags at rest", async () => {
+    const { target, done } = await render(["Airtable", "Make"]);
+    expect(target.querySelector("button")?.getAttribute("aria-label")).toBe(
+      "Tools: Airtable, Make",
+    );
+    done();
+  });
+
+  it("walks the chips with the arrows and removes the focused one", async () => {
+    const { target, key, chips, focused, done } = await render(["Airtable", "Make", "Zapier"]);
+    target.querySelector("button")?.click();
+    flushSync();
+    await tick();
+    expect(focused()).toBe("Tools");
+    await key("ArrowLeft");
+    expect(focused()).toBe("Remove Zapier");
+    await key("ArrowLeft");
+    await key("ArrowLeft");
+    expect(focused()).toBe("Remove Airtable");
+    await key("Delete");
+    expect(chips().map((b) => b.getAttribute("aria-label"))).toEqual([
+      "Remove Make",
+      "Remove Zapier",
+    ]);
+    expect(focused()).toBe("Remove Make");
+    expect(target.querySelector("[role=status]")?.textContent).toBe("Removed Airtable");
+    await key("ArrowRight");
+    await key("ArrowRight");
+    expect(focused()).toBe("Tools");
+    done();
+  });
+
+  it("announces an added tag and goes back to the box on Escape from a chip", async () => {
+    const { target, key, focused, done } = await render(["Make"]);
+    target.querySelector("button")?.click();
+    flushSync();
+    await tick();
+    const input = target.querySelector("input") as HTMLInputElement;
+    input.value = "Notion";
+    input.dispatchEvent(new Event("input", { bubbles: true }));
+    flushSync();
+    await key("Enter");
+    expect(target.querySelector("[role=status]")?.textContent).toBe("Added Notion");
+    input.value = "";
+    input.dispatchEvent(new Event("input", { bubbles: true }));
+    flushSync();
+    await key("ArrowLeft");
+    expect(focused()).toBe("Remove Notion");
+    await key("Escape");
+    expect(focused()).toBe("Tools");
+    done();
+  });
+});

package/src/components/theme/index.ts

@@ -3,7 +3,6 @@
  * layout, or the no-flash script never runs.
  */
 export { default as ThemeProvider } from "./theme-provider.svelte";
-export { revealTheme } from "../../lib/theme-transition.js";
 export {
   mode,
   resetMode,

package/src/components/theme/theme-provider.svelte

@@ -22,13 +22,18 @@
 		 * Fires when the person changes the mode, never on load. An app that saves the choice
 		 * on its server posts it here.
 		 */
-		onChange?: (mode: ThemeMode) => void;
+		onModeChange?: (mode: ThemeMode) => void;
 	}
 
 	// =========================
 	// PROPS
 	// =========================
-	let { initial = "system", onChange, synchronousModeChanges = true, ...watcher }: Props = $props();
+	let {
+		initial = "system",
+		onModeChange,
+		synchronousModeChanges = true,
+		...watcher
+	}: Props = $props();
 
 	// =========================
 	// EFFECTS
@@ -37,7 +42,7 @@
 	let seen: ThemeMode | null = null;
 	$effect(() => {
 		const next = userPrefersMode.current;
-		if (seen !== null && next !== seen) onChange?.(next);
+		if (seen !== null && next !== seen) onModeChange?.(next);
 		seen = next;
 	});
 </script>

package/src/components/theme/theme-provider.svelte.d.ts

@@ -0,0 +1,19 @@
+import { ModeWatcher, userPrefersMode } from "mode-watcher";
+import type { ComponentProps } from "svelte";
+type WatcherProps = ComponentProps<typeof ModeWatcher>;
+type ThemeMode = (typeof userPrefersMode)["current"];
+interface Props extends Omit<WatcherProps, "defaultMode"> {
+    /**
+     * The choice the server already knows, for a browser that has none stored. A stored
+     * choice wins, so it seeds a first visit and never overrides a click.
+     */
+    initial?: ThemeMode;
+    /**
+     * Fires when the person changes the mode, never on load. An app that saves the choice
+     * on its server posts it here.
+     */
+    onModeChange?: (mode: ThemeMode) => void;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/components/theme/theme-provider.test.ts

@@ -46,16 +46,16 @@ describe("ThemeProvider", () => {
   });
 
   it("reports a person's choice and not the load", () => {
-    const onChange = vi.fn();
-    const done = render({ initial: "light", onChange, disableHeadScriptInjection: true });
+    const onModeChange = vi.fn();
+    const done = render({ initial: "light", onModeChange, disableHeadScriptInjection: true });
     flushSync();
-    expect(onChange).not.toHaveBeenCalled();
+    expect(onModeChange).not.toHaveBeenCalled();
     setMode("dark");
     flushSync();
-    expect(onChange).toHaveBeenLastCalledWith("dark");
+    expect(onModeChange).toHaveBeenLastCalledWith("dark");
     toggleMode();
     flushSync();
-    expect(onChange).toHaveBeenLastCalledWith("light");
+    expect(onModeChange).toHaveBeenLastCalledWith("light");
     done();
   });
 });

package/src/components/toolbar/index.ts

@@ -1,7 +1,5 @@
 /**
- * One toolbar row for a list page. Wide, it shows search, tabs and a view switch inline. Narrow,
- * each of those folds into a menu and the row never wraps.
+ * One toolbar row for a list page: search, tabs and a view switch inline, folded into menus when
+ * narrow, never wrapping. `ToolbarSearch` lives in list-page.
  */
 export { default as Toolbar } from "./toolbar.svelte";
-export { default as ToolbarSearch } from "./toolbar-search.svelte";
-export { toolbarTriggerClass } from "./toolbar-trigger.js";

package/src/components/toolbar/toolbar-search.svelte

@@ -12,6 +12,8 @@
 	interface Props {
 		value: string;
 		placeholder?: string;
+		/** The box's accessible name. A placeholder isn't one, and it goes away once you type. */
+		label?: string;
 		size?: "sm" | "default";
 		class?: string;
 	}
@@ -22,6 +24,7 @@
 	let {
 		value = $bindable(""),
 		placeholder = "Search...",
+		label = "Search",
 		size = "default",
 		class: extraClass,
 	}: Props = $props();
@@ -54,6 +57,7 @@
 	<Input
 		bind:value
 		{placeholder}
+		aria-label={label}
 		class={cn(
 			"w-full",
 			size === "sm" ? "h-7 pl-7 pr-2.5 text-xs" : "h-7 pl-7 pr-2.5 text-xs",

package/src/components/toolbar/toolbar-search.svelte.d.ts

@@ -0,0 +1,11 @@
+interface Props {
+    value: string;
+    placeholder?: string;
+    /** The box's accessible name. A placeholder isn't one, and it goes away once you type. */
+    label?: string;
+    size?: "sm" | "default";
+    class?: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "value">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/components/toolbar/toolbar.svelte

@@ -72,7 +72,7 @@
 	<div class="flex flex-nowrap items-center gap-2">
 		{#if search !== undefined}
 			<div class="w-56 shrink-0 @max-2xl/toolbar:hidden">
-				<ToolbarSearch bind:value={search} placeholder={searchPlaceholder} />
+				<ToolbarSearch bind:value={search} placeholder={searchPlaceholder} label={searchLabel} />
 			</div>
 			<Popover.Root>
 				<Popover.Trigger