@heyramzi/ui 2.24.0 → 3.1.0

package/src/components/list-page/prev-next.svelte.d.ts

@@ -0,0 +1,14 @@
+interface Props {
+    /** Ids in the order the list shows them. */
+    ids: readonly string[];
+    current: string | null | undefined;
+    onSelect: (id: string) => void;
+    previousLabel?: string;
+    nextLabel?: string;
+    /** Off when two steppers share a page, so one key press moves one list. */
+    keys?: boolean;
+    class?: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/components/list-page/rail-body.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from "svelte";
+interface Props {
+    children: Snippet;
+    class?: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/components/list-page/rail-head.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from "svelte";
+interface Props {
+    label?: string;
+    action?: Snippet;
+    children?: Snippet;
+    class?: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/components/list-page/rail-row.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { Snippet } from "svelte";
+interface Props {
+    title: string;
+    selected?: boolean;
+    onclick: () => void;
+    leading?: Snippet;
+    trailing?: Snippet;
+    preview?: string | null;
+    meta?: Array<string | null | undefined | false>;
+    metaTruncate?: "first" | "last";
+    metaTrail?: Snippet;
+    actions?: Snippet;
+    titleLines?: 1 | 2;
+    class?: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/components/mark/mark.svelte

@@ -55,7 +55,9 @@
 		onerror={() => (broken = src)}
 	/>
 {:else}
+	<!-- Hidden like the image: a lone initial read aloud is a stray letter, not a name. -->
 	<span
+		aria-hidden="true"
 		class={cn(
 			"bg-muted text-muted-foreground flex size-4 shrink-0 items-center justify-center text-[10px] leading-none font-bold",
 			round ? "rounded-full" : "rounded-xs",

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

@@ -0,0 +1,16 @@
+/**
+ * A brand's mark at glyph size: a kit icon, a channel avatar, a client logo.
+ * One renderer, because three places each handled a missing file their own way.
+ */
+interface Props {
+    /** The file. A missing or broken one falls back to the label's initial. */
+    src?: string;
+    /** Read for the fallback letter. The mark itself is decorative. */
+    label: string;
+    /** `circle` crops a photograph to a disc, `square` fits a logo whole. */
+    shape?: "square" | "circle";
+    class?: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/components/open-in/open-in.svelte

@@ -10,7 +10,7 @@
 		name: string;
 		/** The default accessible sentence, when the caller passes no translated one. */
 		action: string;
-		icon: Component<{ size?: number; class?: string }>;
+		icon: Component<{ size?: number; class?: string; "aria-hidden"?: boolean | "true" | "false" }>;
 	}
 
 	/** `chip` is the bordered inline tag, `button` sits in a header beside other
@@ -96,12 +96,12 @@
 			className,
 		)}
 	>
-		<Icon size={iconSize} />
+		<Icon aria-hidden="true" size={iconSize} />
 		{#if variant !== "icon"}
 			{text}
 			<!-- The one thing the mark can't say: this leaves the app. It stays muted
 				     so the eye lands on the tool name first. -->
-			<ArrowSquareOut size={iconSize} class="text-muted-foreground" />
+			<ArrowSquareOut aria-hidden="true" size={iconSize} class="text-muted-foreground" />
 		{/if}
 	</a>
 </div>

package/src/components/open-in/open-in.svelte.d.ts

@@ -0,0 +1,35 @@
+import type { Component } from "svelte";
+/**
+ * The one way out to a tool: mark, name, go-to arrow, never the verb, which
+ * survives as the accessible name.
+ */
+export interface OpenInTool {
+    /** The visible text, and the word the tool calls itself. */
+    name: string;
+    /** The default accessible sentence, when the caller passes no translated one. */
+    action: string;
+    icon: Component<{
+        size?: number;
+        class?: string;
+        "aria-hidden"?: boolean | "true" | "false";
+    }>;
+}
+/** `chip` is the bordered inline tag, `button` sits in a header beside other
+ *  buttons, `icon` is the bare mark for a dense row. */
+export type OpenInVariant = "chip" | "button" | "icon";
+export type OpenInSize = "sm" | "default";
+interface Props {
+    /** The tool to link to: its name, accessible sentence and mark. */
+    tool: OpenInTool;
+    href: string;
+    variant?: OpenInVariant;
+    size?: OpenInSize;
+    /** Overrides the visible text. The accessible name is `title`, never this. */
+    label?: string;
+    /** The accessible sentence, translated by the caller. */
+    title?: string;
+    class?: string;
+}
+declare const $$Component: Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/components/picker/mark-picker.svelte

@@ -71,10 +71,10 @@
 			<Mark src={selected.image} label={selected.label} {shape} />
 		{:else if selected?.icon}
 			{@const Icon = selected.icon}
-			<Icon class="text-muted-foreground size-4" />
+			<Icon aria-hidden="true" class="text-muted-foreground size-4" />
 		{/if}
 		<span class="truncate">{selected?.label ?? placeholder}</span>
-		<CaretDown class="text-muted-foreground size-3" />
+		<CaretDown aria-hidden="true" class="text-muted-foreground size-3" />
 	{/snippet}
 	<!-- A row with an icon of its own is drawn by `Picker`; this is every other
 	     row, the ones that carry a mark. -->

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

@@ -0,0 +1,38 @@
+import type { PickerOption } from "./types.js";
+declare function $$render<V extends string>(): {
+    props: {
+        options: PickerOption<V>[];
+        value: V | null;
+        onSelect: (value: V) => void;
+        ariaLabel: string;
+        /** Said by the trigger when nothing in the list is the current value. */
+        placeholder?: string;
+        /** The search field's own prompt, on a list long enough to show one. */
+        searchPlaceholder?: string;
+        /** `circle` for a face or an avatar, `square` for a logo. */
+        shape?: "square" | "circle";
+        width?: "sm" | "default" | "lg";
+        class?: string;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<V extends string> {
+    props(): ReturnType<typeof $$render<V>>['props'];
+    events(): ReturnType<typeof $$render<V>>['events'];
+    slots(): ReturnType<typeof $$render<V>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <V extends string>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<V>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<V>['props']>, ReturnType<__sveltets_Render<V>['events']>, ReturnType<__sveltets_Render<V>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<V>['bindings']>;
+    } & ReturnType<__sveltets_Render<V>['exports']>;
+    <V extends string>(internal: unknown, props: ReturnType<__sveltets_Render<V>['props']> & {}): ReturnType<__sveltets_Render<V>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const $$Component: $$IsomorphicComponent;
+type $$Component<V extends string> = InstanceType<typeof $$Component<V>>;
+export default $$Component;

package/src/components/picker/picker.svelte

@@ -1,5 +1,6 @@
 <script lang="ts" generics="V extends string">
 	import type { Snippet } from "svelte";
+	import type { Command as CommandPrimitive } from "bits-ui";
 	import * as Command from "../../shadcn/command/index.js";
 	import * as Popover from "../../shadcn/popover/index.js";
 	import { cn } from "../../lib/utils.js";
@@ -88,6 +89,36 @@
 	function keywordsFor(option: PickerOption<V>): string[] {
 		return [option.label, option.hint, option.keywords].filter(Boolean) as string[];
 	}
+
+	let commandRef = $state<HTMLElement | null>(null);
+	let commandApi = $state<CommandPrimitive.Root | null>(null);
+
+	// Command's keys live on its root. With no search field, Popover focused its own content outside that root, so arrows and Enter were dead.
+	function focusList(event: Event) {
+		if (showSearch) return;
+		event.preventDefault();
+		commandRef?.focus();
+	}
+
+	let labels = $derived(new Map(resolved.flatMap((g) => g.options.map((o) => [o.value, o.label]))));
+
+	// Typeahead without a search field: a letter moves to the next row whose label starts with it.
+	function typeahead(event: KeyboardEvent) {
+		if (showSearch || event.key.length !== 1 || event.metaKey || event.ctrlKey || event.altKey)
+			return;
+		const items = commandApi?.getValidItems() ?? [];
+		const from = items.findIndex((el) => el.getAttribute("aria-selected") === "true");
+		const letter = event.key.toLowerCase();
+		for (let step = 1; step <= items.length; step++) {
+			const index = (from + step) % items.length;
+			const label = labels.get(items[index].getAttribute("data-value") as V) ?? "";
+			if (label.toLowerCase().startsWith(letter)) {
+				event.preventDefault();
+				commandApi?.updateSelectedToIndex(index);
+				return;
+			}
+		}
+	}
 </script>
 
 <Popover.Root bind:open>
@@ -96,8 +127,21 @@
 	</Popover.Trigger>
 	<!-- A picker opens below its trigger. `side` was a prop taking four edges and
 	 no caller in any repo had ever passed one. Deleted 4 Sep 2026. -->
-	<Popover.Content {align} side="bottom" class={cn("p-0", WIDTH[width])}>
-		<Command.Root {filter} loop>
+	<Popover.Content
+		{align}
+		side="bottom"
+		class={cn("p-0", WIDTH[width])}
+		onOpenAutoFocus={focusList}
+	>
+		<Command.Root
+			{filter}
+			loop
+			bind:ref={commandRef}
+			bind:api={commandApi}
+			onkeydown={typeahead}
+			label={triggerLabel}
+			class="focus-visible:outline-hidden"
+		>
 			{#if showSearch}
 				<Command.Input placeholder={searchPlaceholder} />
 			{/if}
@@ -118,7 +162,7 @@
 							>
 								{#if option.icon}
 									{@const Icon = option.icon}
-									<Icon class={cn("size-4", option.tone)} weight="bold" />
+									<Icon aria-hidden="true" class={cn("size-4", option.tone)} weight="bold" />
 								{:else if lead}
 									{@render lead(option)}
 								{/if}

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

@@ -0,0 +1,59 @@
+import type { Snippet } from "svelte";
+import type { PickerGroup, PickerOption } from "./types.js";
+declare function $$render<V extends string>(): {
+    props: {
+        /** Flat list. Mutually exclusive with `groups`. */
+        options?: PickerOption<V>[];
+        /** Titled runs, when the menu has a shape worth naming. */
+        groups?: PickerGroup<V>[];
+        value: V | null;
+        onSelect: (value: V) => void;
+        /** The control that opens the menu. Rendered inside `Popover.Trigger`. */
+        trigger: Snippet;
+        /** Class for the trigger. Use `pickerTriggerClass` to build it. */
+        triggerClass?: string;
+        triggerLabel?: string;
+        /**
+         * A mark drawn at the head of a row when the option carries no icon: an
+         * avatar, a client logo, a colour swatch.
+         */
+        lead?: Snippet<[PickerOption<V>]>;
+        /** Pinned under the list: a clear action, a hint, a secondary surface. */
+        footer?: Snippet<[{
+            close: () => void;
+        }]>;
+        /**
+         * Search field. `auto` shows it from seven rows, the point at which the
+         * eye stops finding a name faster than the fingers can type it.
+         */
+        searchable?: boolean | "auto";
+        searchPlaceholder?: string;
+        emptyLabel?: string;
+        open?: boolean;
+        align?: "start" | "center" | "end";
+        /** `sm` fits a word, `default` a name, `lg` a name and a date. */
+        width?: "sm" | "default" | "lg";
+        disabled?: boolean;
+    };
+    exports: {};
+    bindings: "open";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<V extends string> {
+    props(): ReturnType<typeof $$render<V>>['props'];
+    events(): ReturnType<typeof $$render<V>>['events'];
+    slots(): ReturnType<typeof $$render<V>>['slots'];
+    bindings(): "open";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <V extends string>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<V>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<V>['props']>, ReturnType<__sveltets_Render<V>['events']>, ReturnType<__sveltets_Render<V>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<V>['bindings']>;
+    } & ReturnType<__sveltets_Render<V>['exports']>;
+    <V extends string>(internal: unknown, props: ReturnType<__sveltets_Render<V>['props']> & {}): ReturnType<__sveltets_Render<V>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const $$Component: $$IsomorphicComponent;
+type $$Component<V extends string> = InstanceType<typeof $$Component<V>>;
+export default $$Component;

package/src/components/picker/picker.test.ts

@@ -0,0 +1,71 @@
+import { createRawSnippet, flushSync, mount, tick, unmount } from "svelte";
+import { describe, expect, it, vi } from "vite-plus/test";
+import Picker from "./picker.svelte";
+
+const trigger = createRawSnippet(() => ({ render: () => `<span>Priority</span>` }));
+const options = ["Urgent", "High", "Medium", "Low"].map((label) => ({
+  value: label.toLowerCase(),
+  label,
+}));
+
+async function render() {
+  const onSelect = vi.fn();
+  const target = document.createElement("div");
+  document.body.appendChild(target);
+  const app = mount(Picker<string>, {
+    target,
+    props: { options, value: null, onSelect, trigger, triggerLabel: "Priority" },
+  });
+  flushSync();
+  target.querySelector("button")?.click();
+  await settle();
+  const press = async (key: string) => {
+    document.activeElement?.dispatchEvent(new KeyboardEvent("keydown", { key, bubbles: true }));
+    await settle();
+  };
+  const highlighted = () =>
+    document.querySelector('[data-slot="command-item"][aria-selected="true"]')?.textContent?.trim();
+  return {
+    onSelect,
+    press,
+    highlighted,
+    done: () => {
+      void unmount(app);
+      target.remove();
+    },
+  };
+}
+
+async function settle() {
+  for (let i = 0; i < 4; i++) await tick();
+  await new Promise((resolve) => setTimeout(resolve, 0));
+  flushSync();
+}
+
+// 10 Nov 2026: under seven rows there's no search field, and focus sat outside the Command root.
+describe("Picker keyboard without a search field", () => {
+  it("takes focus into the list so arrows, Home, End and Enter work", async () => {
+    const { onSelect, press, highlighted, done } = await render();
+    expect(document.activeElement?.getAttribute("data-slot")).toBe("command");
+    expect(highlighted()).toBe("Urgent");
+    await press("ArrowDown");
+    expect(highlighted()).toBe("High");
+    await press("End");
+    expect(highlighted()).toBe("Low");
+    await press("Home");
+    expect(highlighted()).toBe("Urgent");
+    await press("ArrowDown");
+    await press("Enter");
+    expect(onSelect).toHaveBeenCalledWith("high");
+    done();
+  });
+
+  it("jumps to the next row starting with a typed letter", async () => {
+    const { press, highlighted, done } = await render();
+    await press("l");
+    expect(highlighted()).toBe("Low");
+    await press("m");
+    expect(highlighted()).toBe("Medium");
+    done();
+  });
+});

package/src/components/section-card/section-card.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from "svelte";
+interface Props {
+    title: string;
+    /** Controls at the far end of the header. */
+    actions?: Snippet;
+    /** No padding in the body, so a table runs edge to edge under the header. */
+    flush?: boolean;
+    class?: string;
+    children: Snippet;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/components/section-header/section-header.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { Snippet } from "svelte";
+interface Props {
+    title: string;
+    /** How many things the section holds. Drawn as a chip next to the title. */
+    count?: number;
+    /** What the count counts, for a screen reader: "lines". */
+    countLabel?: string;
+    /** One line under the title. */
+    description?: string;
+    /** A control at the far end of the row. */
+    actions?: Snippet;
+    /** The heading level. Sections under a page title are 2. */
+    level?: 2 | 3;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/components/section-header/section-label.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from "svelte";
+import type { PhosphorIcon } from "../../lib/icon-types.js";
+interface Props {
+    icon?: PhosphorIcon;
+    children: Snippet;
+    class?: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/components/segmented/animated-tabs.svelte.d.ts

@@ -0,0 +1,61 @@
+import type { SegmentContent } from "./segment.svelte";
+/** One tab. See `SegmentContent` for everything a segment can say. */
+export type TabDef<T extends string = string> = SegmentContent & {
+    value: T;
+    /**
+     * The tab's group. A divider marks each change of group, and a group's `label` opens it as a
+     * quiet heading.
+     */
+    group?: TabGroup;
+};
+/** `id` is what makes two tabs one group. `label` is optional text for a heading before the group. */
+export type TabGroup = {
+    id: string;
+    label?: string;
+};
+/**
+ * Where the tab row sits, the only thing that legitimately differs between
+ * two tab sets. A closed union and not a class string: 23 files each decided
+ * their own.
+ */
+export type TabsPlacement = "toolbar" | "section" | "inline";
+import { Tabs as TabsPrimitive } from "bits-ui";
+import { type SegmentedVariant } from "./segmented.js";
+declare function $$render<T extends string>(): {
+    props: Omit<TabsPrimitive.RootProps, "value" | "onValueChange"> & {
+        tabs: readonly TabDef<T>[];
+        value?: T;
+        onValueChange?: (value: T) => void;
+        placement?: TabsPlacement;
+        block?: boolean;
+        variant?: SegmentedVariant;
+        ariaLabel?: string;
+        toolbar?: import("svelte").Snippet;
+        lead?: import("svelte").Snippet;
+        listWrapperClass?: string;
+        hideSingle?: boolean;
+        max?: number;
+        moreLabel?: string;
+    };
+    exports: {};
+    bindings: "value" | "ref";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends string> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "value" | "ref";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends string>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends string>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const $$Component: $$IsomorphicComponent;
+type $$Component<T extends string> = InstanceType<typeof $$Component<T>>;
+export default $$Component;

package/src/components/segmented/section-runs.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { SegmentedNavItem } from "./segmented-nav.svelte";
+/** One bordered track on the section row. A run with a `label` is a reference
+ *  set, not a step, so `SectionRuns` titles it and sends it right. */
+export interface SectionRun {
+    label?: string;
+    items: readonly SegmentedNavItem[];
+    /** Overrides the strip's `current` for this run, so two nested runs each light one tab. */
+    current?: string;
+}
+/** What an app shell publishes so a page's toolbar can draw the section strip. */
+export interface SectionStrip {
+    runs: readonly SectionRun[];
+    current: string;
+    ariaLabel: string;
+}
+interface Props {
+    strip: SectionStrip;
+    /** The host row's own constraints: order, width, container queries. */
+    class?: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/components/segmented/segment.svelte

@@ -70,7 +70,7 @@
 		)}
 	/>
 {:else if Icon}
-	<Icon size={16} class="shrink-0" />
+	<Icon aria-hidden="true" size={16} class="shrink-0" />
 {/if}
 
 {label}

package/src/components/segmented/segment.svelte.d.ts

@@ -0,0 +1,30 @@
+import type { PhosphorIcon } from "../../lib/icon-types.js";
+/** Everything a segment may say, for every strip drawn from this folder. */
+export type SegmentContent = {
+    label: string;
+    /** A number after the label. `0` still renders; omit for "no number". */
+    count?: number;
+    icon?: PhosphorIcon;
+    /** A square mark drawn in place of an icon, for a brand that has one. */
+    image?: string;
+    /**
+     * This segment's work is finished. Drawn as a dot after the label, and only
+     * where there is no count, because a count already says the same thing.
+     */
+    done?: boolean;
+    /**
+     * A short note after the label, such as "Save 20%". Text where `count` is a
+     * number, in the accent colour. Drawn before a count or a done dot.
+     */
+    badge?: string;
+};
+interface Props extends SegmentContent {
+    /**
+     * `true`/`false` when the caller owns the state. `"auto"` when bits-ui owns it
+     * in a `data-state` on the trigger, and the stylesheet answers.
+     */
+    active?: boolean | "auto";
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

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

@@ -47,9 +47,8 @@
 		max?: number | "none";
 		/** What the menu segment says. Translate at the call site. */
 		moreLabel?: string;
-		/** An option with an `image` or `icon` draws the mark alone, and its label
-		 *  moves to `aria-label` and the hover title. For a toolbar with no room
-		 *  for words, where every mark is a brand people know. */
+		/** An option with an `image` or `icon` draws the mark alone; its label moves to
+		 *  `aria-label` and the title. For a cramped toolbar of well-known brand marks. */
 		iconOnly?: boolean;
 		class?: string;
 	}
@@ -127,6 +126,7 @@
 		{#snippet trigger()}
 			<Segment label={current.label} count={current.count} icon={current.icon} active />
 			<CaretDown
+				aria-hidden="true"
 				class="size-3 shrink-0 opacity-60 transition-transform duration-150 group-data-[state=open]/segment:rotate-180"
 			/>
 		{/snippet}
@@ -161,7 +161,7 @@
 							)}
 						/>
 					{:else if markOnly && option.icon}
-						<option.icon size={16} class="shrink-0" />
+						<option.icon aria-hidden="true" size={16} class="shrink-0" />
 					{:else}
 						<Segment
 							label={option.label}

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

@@ -0,0 +1,43 @@
+import type { TabDef } from "./animated-tabs.svelte";
+declare function $$render<T extends string>(): {
+    props: {
+        options: readonly TabDef<T>[];
+        value: T;
+        onValueChange?: (value: T) => void;
+        counts?: Partial<Record<T, number>>;
+        ariaLabel: string;
+        /** Fill the row rather than sit at its natural width. On for the list-page
+         *  filter strip, off for a segment sitting in a toolbar beside others. */
+        block?: boolean;
+        /** Objects the row may draw before its tail becomes a menu. See `collapse.ts`.
+         *  `"none"` never folds. */
+        max?: number | "none";
+        /** What the menu segment says. Translate at the call site. */
+        moreLabel?: string;
+        /** An option with an `image` or `icon` draws the mark alone; its label moves to
+         *  `aria-label` and the title. For a cramped toolbar of well-known brand marks. */
+        iconOnly?: boolean;
+        class?: string;
+    };
+    exports: {};
+    bindings: "value";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends string> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "value";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends string>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends string>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const $$Component: $$IsomorphicComponent;
+type $$Component<T extends string> = InstanceType<typeof $$Component<T>>;
+export default $$Component;