@heyramzi/ui 2.23.0 → 3.0.0

package/src/components/list-page/empty-state.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { Snippet } from "svelte";
+import type { PhosphorIcon, IconWeight } from "../../lib/icon-types.js";
+interface Props {
+    icon?: PhosphorIcon;
+    iconWeight?: IconWeight;
+    /** Replaces the muted colour of a bare icon. Ignored by the tile, which stays foreground. */
+    iconClass?: string;
+    title: string;
+    description?: string;
+    actionLabel?: string;
+    actionHref?: string;
+    onAction?: () => void;
+    /** Several ways out, drawn in one row after the single action. */
+    actions?: Snippet;
+    /** `card` fills the white panel; `dashed` frames a whole dashboard section. */
+    surface?: "plain" | "card" | "dashed";
+    /** `sm` fits a 280px rail: a bare icon and one line of small type. */
+    size?: "default" | "sm";
+    class?: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/components/list-page/filter-item.svelte

@@ -39,7 +39,7 @@
 			)}
 		>
 			{#if checked}
-				<Check class="size-2.5" weight="bold" />
+				<Check aria-hidden="true" class="size-2.5" weight="bold" />
 			{/if}
 		</span>
 	{:else}

package/src/components/list-page/filter-item.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from "svelte";
+interface Props {
+    checked: boolean;
+    onclick: () => void;
+    variant?: "checkbox" | "radio";
+    children: Snippet;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/components/list-page/filter-popover.svelte

@@ -8,6 +8,7 @@
 	import { cn } from "../../lib/utils.js";
 	import { Button } from "../../shadcn/button/index.js";
 	import { toolbarTriggerClass } from "../toolbar/toolbar-trigger.js";
+	import CountChip from "../chip/count-chip.svelte";
 	import type { PhosphorIcon } from "../../lib/icon-types.js";
 
 	// phosphor-svelte v2 (resolved here) and v3 (what consumers run) differ only in
@@ -64,17 +65,13 @@
 <!-- =========================== -->
 <Popover.Root bind:open>
 	<Popover.Trigger class={toolbarTriggerClass({ active: isActive, className: triggerClass })}>
-		<IconComponent class="size-3.5" />
+		<IconComponent aria-hidden="true" class="size-3.5" />
 		<span>{label}</span>
 		{#if trailing}
 			{@render trailing()}
 		{/if}
 		{#if hasCount}
-			<span
-				class="ml-0.5 inline-flex h-4 min-w-4 items-center justify-center rounded-full bg-brand/12 px-1 text-xs leading-none font-semibold text-brand tabular-nums dark:text-brand-light"
-			>
-				{count.toLocaleString()}
-			</span>
+			<CountChip {count} size="sm" tone="brand" class="ml-0.5" />
 		{/if}
 	</Popover.Trigger>
 	<Popover.Content class={cn("p-2", width, contentClass)} {align}>

package/src/components/list-page/filter-popover.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { Snippet } from "svelte";
+import type { PhosphorIcon } from "../../lib/icon-types.js";
+interface Props {
+    label: string;
+    icon?: PhosphorIcon;
+    count?: number;
+    active?: boolean;
+    onClear?: () => void;
+    align?: "start" | "center" | "end";
+    width?: `w-${string}`;
+    open?: boolean;
+    clearLabel?: string;
+    triggerClass?: string;
+    contentClass?: string;
+    children: Snippet;
+    trailing?: Snippet;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "open">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/components/list-page/grouped-list.svelte

@@ -6,6 +6,7 @@
 	import { SvelteSet } from "svelte/reactivity";
 	import { CaretDown, Plus } from "phosphor-svelte";
 	import { cn } from "../../lib/utils.js";
+	import CountChip from "../chip/count-chip.svelte";
 
 	// =========================
 	// TYPES
@@ -102,6 +103,7 @@
 					<!-- The accordion chevron: it turns on the fast step and holds still under
 					     reduced motion, where the open state is aria-expanded and the rows. -->
 					<CaretDown
+						aria-hidden="true"
 						class={cn(
 							"size-3 shrink-0 text-muted-foreground transition-transform duration-fast ease-smooth-out motion-reduce:transition-none",
 							isCollapsed && "-rotate-90",
@@ -110,10 +112,7 @@
 					/>
 					{@render header(group, { collapsed: isCollapsed })}
 					{#if getCount}
-						<span
-							class="rounded-full bg-foreground/6 px-1.5 text-xs leading-5 font-medium text-muted-foreground tabular-nums"
-							>{getCount(group)}</span
-						>
+						<CountChip count={getCount(group)} />
 					{/if}
 				</button>
 				{#if actions}

package/src/components/list-page/grouped-list.svelte.d.ts

@@ -0,0 +1,49 @@
+import { type Snippet } from "svelte";
+declare function $$render<TGroup>(): {
+    props: {
+        groups: TGroup[];
+        getKey: (group: TGroup) => string;
+        defaultCollapsed?: string[];
+        /** WHY: a page that drives its own keyboard cursor has to know which rows
+            are on screen, and the collapsed set is the only thing that says so. */
+        onCollapsedChange?: (keys: string[]) => void;
+        header: Snippet<[TGroup, {
+            collapsed: boolean;
+        }]>;
+        /** Controls beside the header, outside its toggle button so a click on
+            one doesn't collapse the group. Shown on hover of the header row. */
+        actions?: Snippet<[TGroup]>;
+        rows: Snippet<[TGroup]>;
+        /** A count beside the header, in a small pill. Leave it out when the header draws its own. */
+        getCount?: (group: TGroup) => number;
+        /** Shows an add button at the end of the header row. */
+        onAdd?: (group: TGroup) => void;
+        /** The add button's accessible name. */
+        addLabel?: string;
+        class?: string;
+        onGroupDragOver?: (e: DragEvent, group: TGroup) => void;
+        onGroupDragLeave?: (e: DragEvent) => void;
+        onGroupDrop?: (e: DragEvent, group: TGroup) => void;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TGroup> {
+    props(): ReturnType<typeof $$render<TGroup>>['props'];
+    events(): ReturnType<typeof $$render<TGroup>>['events'];
+    slots(): ReturnType<typeof $$render<TGroup>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TGroup>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TGroup>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TGroup>['props']>, ReturnType<__sveltets_Render<TGroup>['events']>, ReturnType<__sveltets_Render<TGroup>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TGroup>['bindings']>;
+    } & ReturnType<__sveltets_Render<TGroup>['exports']>;
+    <TGroup>(internal: unknown, props: ReturnType<__sveltets_Render<TGroup>['props']> & {}): ReturnType<__sveltets_Render<TGroup>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const $$Component: $$IsomorphicComponent;
+type $$Component<TGroup> = InstanceType<typeof $$Component<TGroup>>;
+export default $$Component;

package/src/components/list-page/index.ts

@@ -1,6 +1,5 @@
-export { default as DetailEmpty } from "./detail-empty.svelte";
 export { default as DetailHeader } from "./detail-header.svelte";
-export { default as DetailPanel } from "./detail-panel.svelte";
+export { default as DetailPanel } from "../../lib/panel.svelte";
 export { default as DetailRow } from "./detail-row.svelte";
 export { default as DetailStack } from "./detail-stack.svelte";
 export { default as EmptyState } from "./empty-state.svelte";
@@ -9,10 +8,8 @@ export { default as PrevNext } from "./prev-next.svelte";
 export { stepTo } from "./step.js";
 export { default as NoticeBar } from "./notice-bar.svelte";
 export { default as RailBody } from "./rail-body.svelte";
-export { default as RailEmpty } from "./rail-empty.svelte";
 export { default as RailHead } from "./rail-head.svelte";
 export { default as RailRow } from "./rail-row.svelte";
-export { default as SectionLabel } from "../section-header/section-label.svelte";
 export { queueRailClass, queueRailWidth } from "./queue-rail.js";
 export { default as FilterPopover } from "./filter-popover.svelte";
 export { filterSectionClass } from "./filter-section.js";

package/src/components/list-page/list-page-shell.svelte.d.ts

@@ -0,0 +1,31 @@
+import type { Snippet } from "svelte";
+import type { PhosphorIcon, IconWeight } from "../../lib/icon-types.js";
+type EmptyConfig = {
+    icon?: PhosphorIcon;
+    iconWeight?: IconWeight;
+    title: string;
+    description?: string;
+    actionLabel?: string;
+    onAction?: () => void;
+    actionHref?: string;
+};
+interface Props {
+    isEmpty?: boolean;
+    emptyState?: EmptyConfig;
+    hideToolbarWhenEmpty?: boolean;
+    maxWidth?: string | false;
+    fillHeight?: boolean;
+    containerClass?: string;
+    toolbarClass?: string;
+    tabs?: Snippet;
+    search?: Snippet;
+    filters?: Snippet;
+    rightActions?: Snippet;
+    summary?: Snippet;
+    content?: Snippet;
+    empty?: Snippet;
+    extra?: Snippet;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/components/list-page/master-detail-focus.test.ts

@@ -0,0 +1,28 @@
+import { createRawSnippet, flushSync, mount, tick, unmount } from "svelte";
+import { describe, expect, it } from "vite-plus/test";
+import MasterDetail from "./master-detail.svelte";
+
+const rail = createRawSnippet(() => ({
+  render: () => `<div><button>Ada</button><button aria-current="page">Grace</button></div>`,
+}));
+const detail = createRawSnippet(() => ({ render: () => `<p>Grace's record</p>` }));
+
+describe("MasterDetail focus while stacked", () => {
+  it("puts focus back on the list's current row when Back is pressed", async () => {
+    const target = document.createElement("div");
+    document.body.appendChild(target);
+    const app = mount(MasterDetail, { target, props: { rail, detail, pane: "detail" } });
+    flushSync();
+
+    const back = [...target.querySelectorAll("button")].find(
+      (b) => b.textContent?.trim() === "Back to the list",
+    );
+    back?.focus();
+    back?.click();
+    for (let i = 0; i < 3; i++) await tick();
+
+    expect(document.activeElement?.textContent).toBe("Grace");
+    void unmount(app);
+    target.remove();
+  });
+});

package/src/components/list-page/master-detail.svelte

@@ -3,7 +3,8 @@
 	// IMPORTS
 	// =========================
 	import type { Snippet } from "svelte";
-	import { setContext } from "svelte";
+	import { setContext, tick } from "svelte";
+	import { focusAfterRender } from "../../lib/focus.js";
 	import { CaretLeft } from "phosphor-svelte";
 	import { cn } from "../../lib/utils.js";
 	import { Button } from "../../shadcn/button/index.js";
@@ -62,6 +63,14 @@
 		class: className,
 	}: Props = $props();
 
+	// =========================
+	// STATE
+	// =========================
+	let railEl = $state<HTMLElement>();
+	let detailEl = $state<HTMLElement>();
+	// Plain, not state: only back() reads it.
+	let opener: HTMLElement | null = null;
+
 	// =========================
 	// DERIVED
 	// =========================
@@ -85,10 +94,23 @@
 	// `RailRow` calls this when a record is picked. Above the breakpoint the classes
 	// that read `pane` are all prefixed away, so the flag changes nothing there.
 	setContext<MasterDetailPane>(MASTER_DETAIL_PANE, {
-		open: () => {
-			if (stackBelow) pane = "detail";
-		},
+		open: () => void openDetail(),
 	});
+
+	// Stacked, the rail hides under the focused row, so focus follows into the record.
+	async function openDetail() {
+		if (!stackBelow) return;
+		opener = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+		pane = "detail";
+		await tick();
+		if (railEl?.getClientRects().length === 0) await focusAfterRender(null, detailEl);
+	}
+
+	// Back puts focus on the row that opened the record, or the current one.
+	function back() {
+		pane = "rail";
+		void focusAfterRender(railEl, opener, '[aria-current="page"]');
+	}
 </script>
 
 <!-- =========================== -->
@@ -109,13 +131,16 @@
 		data-stack={stackBelow ?? undefined}
 	>
 		<aside
+			bind:this={railEl}
 			class={cn("md-rail min-h-0", railClass, stackBelow && pane === "detail" && hideWhileStacked)}
 		>
 			{@render rail()}
 		</aside>
 		<div
+			bind:this={detailEl}
+			tabindex="-1"
 			class={cn(
-				"md-detail flex min-h-0 min-w-0 flex-col",
+				"md-detail flex min-h-0 min-w-0 flex-col outline-none",
 				stackBelow && pane === "rail" && hideWhileStacked,
 			)}
 		>
@@ -126,9 +151,9 @@
 					variant="ghost"
 					size="sm"
 					class={cn("-mx-1 mb-2 self-start px-1 text-muted-foreground", stackedOnly)}
-					onclick={() => (pane = "rail")}
+					onclick={back}
 				>
-					<CaretLeft size={16} weight="bold" />
+					<CaretLeft aria-hidden="true" size={16} weight="bold" />
 					{backLabel}
 				</Button>
 			{/if}
@@ -154,25 +179,36 @@
 <!-- STYLE -->
 <!-- =========================== -->
 <style>
-	/* The stacked list-to-record swap. The incoming pane moves: forward from the
-	   right, back from the left. It runs when `data-pane` flips. */
-	@media (max-width: 1023px) {
-		.md-cols[data-stack="lg"][data-pane="detail"] > .md-detail {
-			animation: md-in-forward var(--duration-fast) var(--ease-smooth-out) both;
-		}
+	@layer theme, base, components, utilities;
+
+	@layer components {
+		/* The stacked list-to-record swap. The incoming pane moves: forward from the
+		   right, back from the left. It runs when `data-pane` flips. */
+		@media (max-width: 1023px) {
+			.md-cols[data-stack="lg"][data-pane="detail"] > .md-detail {
+				animation: md-in-forward var(--duration-fast) var(--ease-smooth-out) both;
+			}
 
-		.md-cols[data-stack="lg"][data-pane="rail"] > .md-rail {
-			animation: md-in-back var(--duration-fast) var(--ease-smooth-out) both;
+			.md-cols[data-stack="lg"][data-pane="rail"] > .md-rail {
+				animation: md-in-back var(--duration-fast) var(--ease-smooth-out) both;
+			}
 		}
-	}
 
-	@media (max-width: 1279px) {
-		.md-cols[data-stack="xl"][data-pane="detail"] > .md-detail {
-			animation: md-in-forward var(--duration-fast) var(--ease-smooth-out) both;
+		@media (max-width: 1279px) {
+			.md-cols[data-stack="xl"][data-pane="detail"] > .md-detail {
+				animation: md-in-forward var(--duration-fast) var(--ease-smooth-out) both;
+			}
+
+			.md-cols[data-stack="xl"][data-pane="rail"] > .md-rail {
+				animation: md-in-back var(--duration-fast) var(--ease-smooth-out) both;
+			}
 		}
 
-		.md-cols[data-stack="xl"][data-pane="rail"] > .md-rail {
-			animation: md-in-back var(--duration-fast) var(--ease-smooth-out) both;
+		@media (prefers-reduced-motion: reduce) {
+			.md-cols > .md-rail,
+			.md-cols > .md-detail {
+				animation: none;
+			}
 		}
 	}
 
@@ -197,11 +233,4 @@
 			transform: none;
 		}
 	}
-
-	@media (prefers-reduced-motion: reduce) {
-		.md-cols > .md-rail,
-		.md-cols > .md-detail {
-			animation: none;
-		}
-	}
 </style>

package/src/components/list-page/master-detail.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { Snippet } from "svelte";
+interface Props {
+    rail: Snippet;
+    detail: Snippet;
+    banner?: Snippet;
+    railWidth?: string;
+    stackBelow?: "lg" | "xl" | null;
+    backLabel?: string;
+    pane?: "rail" | "detail";
+    gap?: boolean;
+    pad?: boolean;
+    railClass?: string;
+    detailClass?: string;
+    class?: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "pane">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/components/list-page/master-detail.test.ts

@@ -21,7 +21,7 @@ describe("master detail on a phone", () => {
 
   it("draws a way back to the list, and only while stacked", () => {
     expect(shell).toContain('stackBelow === "xl" ? "xl:hidden" : "lg:hidden"');
-    expect(shell).toContain('onclick={() => (pane = "rail")}');
+    expect(shell).toContain("onclick={back}");
     expect(shell).toContain("{backLabel}");
   });
 

package/src/components/list-page/notice-bar.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from "svelte";
+import { type Tone as SeverityTone } from "../../lib/tone.js";
+import type { PhosphorIcon } from "../../lib/icon-types.js";
+type Tone = Extract<SeverityTone, "destructive" | "warning" | "info" | "success">;
+interface Props {
+    tone?: Tone;
+    icon?: PhosphorIcon;
+    actions?: 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/prev-next.svelte

@@ -14,7 +14,7 @@
 		/** Ids in the order the list shows them. */
 		ids: readonly string[];
 		current: string | null | undefined;
-		onselect: (id: string) => void;
+		onSelect: (id: string) => void;
 		previousLabel?: string;
 		nextLabel?: string;
 		/** Off when two steppers share a page, so one key press moves one list. */
@@ -28,7 +28,7 @@
 	let {
 		ids,
 		current,
-		onselect,
+		onSelect,
 		previousLabel = "Previous",
 		nextLabel = "Next",
 		keys = true,
@@ -67,7 +67,7 @@
 		const id = targetFor(event.key);
 		if (!id) return;
 		event.preventDefault();
-		onselect(id);
+		onSelect(id);
 	}
 </script>
 
@@ -81,11 +81,11 @@
 			icon
 			class="text-muted-foreground"
 			disabled={!prev}
-			onclick={() => prev && onselect(prev)}
+			onclick={() => prev && onSelect(prev)}
 			aria-label={previousLabel}
 			title={`${previousLabel} (K)`}
 		>
-			<CaretLeft size={15} />
+			<CaretLeft aria-hidden="true" size={15} />
 		</Button>
 		<span class="min-w-9 text-center text-xs tabular-nums">{index + 1}/{ids.length}</span>
 		<Button
@@ -94,11 +94,11 @@
 			icon
 			class="text-muted-foreground"
 			disabled={!next}
-			onclick={() => next && onselect(next)}
+			onclick={() => next && onSelect(next)}
 			aria-label={nextLabel}
 			title={`${nextLabel} (J)`}
 		>
-			<CaretRight size={15} />
+			<CaretRight aria-hidden="true" size={15} />
 		</Button>
 	</div>
 {/if}

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. -->