@heyramzi/ui 2.23.0 → 3.0.0

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

@@ -4,6 +4,7 @@
 	// =========================
 	import type { Snippet } from "svelte";
 	import SectionLabel from "./section-label.svelte";
+	import CountChip from "../chip/count-chip.svelte";
 
 	// =========================
 	// TYPES
@@ -36,12 +37,7 @@
 		<svelte:element this={`h${level}`} class="flex items-center gap-2">
 			<SectionLabel class="min-w-0 [overflow-wrap:anywhere]">{title}</SectionLabel>
 			{#if count !== undefined}
-				<span
-					class="shrink-0 rounded-full bg-foreground/6 px-1.5 py-0.5 text-xs leading-none font-medium tabular-nums text-muted-foreground"
-					aria-label={`${count.toLocaleString()} ${countLabel}`}
-				>
-					{count.toLocaleString()}
-				</span>
+				<CountChip {count} size="sm" aria-label={`${count.toLocaleString()} ${countLabel}`} />
 			{/if}
 		</svelte:element>
 		{#if description}

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

@@ -30,8 +30,8 @@
 	// IMPORTS
 	// =========================
 	import { cn } from "../../lib/utils.js";
-	import { Icon } from "../icon/index.js";
 	import { Mark } from "../mark/index.js";
+	import CountChip from "../chip/count-chip.svelte";
 
 	// =========================
 	// TYPES
@@ -47,7 +47,7 @@
 	// =========================
 	// PROPS
 	// =========================
-	let { label, count, icon, image, done = false, badge, active = false }: Props = $props();
+	let { label, count, icon: Icon, image, done = false, badge, active = false }: Props = $props();
 
 	// =========================
 	// DERIVED
@@ -69,8 +69,8 @@
 			auto && "group-data-[state=active]/segment:opacity-100",
 		)}
 	/>
-{:else if icon}
-	<Icon {icon} size={16} class="shrink-0" />
+{:else if Icon}
+	<Icon aria-hidden="true" size={16} class="shrink-0" />
 {/if}
 
 {label}
@@ -80,21 +80,15 @@
 {/if}
 
 {#if count != null}
-	<span
-		class={cn(
-			// WHY 16px, not 18: inside a 22px segment, 18 read as a chip nested in the pill.
-
-			// WHY min-width equals height with 4px padding: `min-w-5 px-1.5` made a digit
-			// 20 by 18, so `rounded-full` drew an ellipse.
-			"inline-flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-xs leading-none font-medium tabular-nums",
-			"bg-foreground/8 text-muted-foreground",
-			on && "bg-brand/14 text-brand",
-			auto &&
-				"group-data-[state=active]/segment:bg-brand/14 group-data-[state=active]/segment:text-brand",
-		)}
-	>
-		{count.toLocaleString()}
-	</span>
+	<!-- WHY 16px, not 18: inside a 22px segment, 18 read as a chip nested in the pill. -->
+	<CountChip
+		{count}
+		size="sm"
+		tone={on ? "brand" : "neutral"}
+		class={auto
+			? "group-data-[state=active]/segment:bg-brand/12 group-data-[state=active]/segment:text-brand dark:group-data-[state=active]/segment:text-brand-light"
+			: undefined}
+	/>
 {:else if done}
 	<span
 		class={cn(

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

@@ -13,7 +13,6 @@
 		splitSegments,
 	} from "./collapse.js";
 	import { segmentedTriggerClass } from "./segmented.js";
-	import { Icon } from "../icon/index.js";
 	import { Mark } from "../mark/index.js";
 	import { CaretDown } from "phosphor-svelte";
 	import { Picker } from "../picker/index.js";
@@ -48,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;
 	}
@@ -128,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}
@@ -162,7 +161,7 @@
 							)}
 						/>
 					{:else if markOnly && option.icon}
-						<Icon 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;

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

@@ -0,0 +1,17 @@
+import type { SegmentContent } from "./segment.svelte";
+/** One destination. See `SegmentContent` for everything a segment can say. */
+export type SegmentedNavItem = SegmentContent & {
+    href: string;
+};
+interface Props {
+    items: readonly SegmentedNavItem[];
+    /** The href that is current. Compared after trailing slashes are dropped. */
+    current: string;
+    ariaLabel: string;
+    /** Fill the row rather than sit at its natural width. */
+    block?: boolean;
+    class?: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

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

@@ -79,6 +79,7 @@
 	{#snippet trigger()}
 		{label}
 		<CaretDown
+			aria-hidden="true"
 			class={cn(
 				"shrink-0 transition-transform duration-150 group-data-[state=open]/segment:rotate-180",
 				"size-3.5",

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

@@ -0,0 +1,37 @@
+import { type SegmentedVariant } from "./segmented.js";
+import type { SegmentContent } from "./segment.svelte";
+declare function $$render<V extends string>(): {
+    props: {
+        items: readonly (SegmentContent & {
+            value: V;
+        })[];
+        onSelect: (value: V) => void;
+        /** What the segment says. Translate at the call site. */
+        label?: string;
+        fill?: boolean;
+        variant?: SegmentedVariant;
+        searchPlaceholder?: string;
+        emptyLabel?: 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;