@heyramzi/ui 2.24.0 → 3.0.0

package/src/components/hold-to-confirm/hold-to-confirm.test.ts

@@ -0,0 +1,105 @@
+import { createRawSnippet, flushSync, mount, unmount } from "svelte";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vite-plus/test";
+import HoldToConfirm from "./hold-to-confirm.svelte";
+
+const text = (label: string) => createRawSnippet(() => ({ render: () => `<span>${label}</span>` }));
+
+function render(duration = 800) {
+  const onConfirm = vi.fn();
+  const target = document.createElement("div");
+  document.body.appendChild(target);
+  const app = mount(HoldToConfirm, {
+    target,
+    props: { duration, onConfirm, idle: text("Hold to delete"), holding: text("Deleting") },
+  });
+  flushSync();
+  const button = target.querySelector("button");
+  if (!button) throw new Error("HoldToConfirm rendered no button");
+  const key = (type: "keydown" | "keyup", k: string, repeat = false) => {
+    button.dispatchEvent(new KeyboardEvent(type, { key: k, repeat, bubbles: true }));
+    flushSync();
+  };
+  return {
+    button,
+    onConfirm,
+    key,
+    done: () => {
+      void unmount(app);
+      target.remove();
+    },
+  };
+}
+
+// The OS repeats keydown about every 33ms while a key is held. The 10 Nov audit saw Space stall at 6%.
+async function holdWithRepeat(key: ReturnType<typeof render>["key"], k: string, ms: number) {
+  key("keydown", k);
+  for (let t = 33; t <= ms; t += 33) {
+    await vi.advanceTimersByTimeAsync(33);
+    key("keydown", k, true);
+  }
+}
+
+describe("HoldToConfirm keyboard", () => {
+  beforeEach(() =>
+    vi.useFakeTimers({
+      toFake: ["requestAnimationFrame", "cancelAnimationFrame", "performance", "setTimeout"],
+    }),
+  );
+  afterEach(() => vi.useRealTimers());
+
+  for (const k of [" ", "Enter"]) {
+    it(`confirms when ${k === " " ? "Space" : k} is held through key repeat`, async () => {
+      const { onConfirm, key, done } = render();
+      await holdWithRepeat(key, k, 900);
+      expect(onConfirm).toHaveBeenCalledTimes(1);
+      key("keyup", k);
+      done();
+    });
+  }
+
+  it("cancels when the key is let go early", async () => {
+    const { button, onConfirm, key, done } = render();
+    await holdWithRepeat(key, " ", 400);
+    key("keyup", " ");
+    await vi.advanceTimersByTimeAsync(800);
+    expect(onConfirm).not.toHaveBeenCalled();
+    expect(button.dataset.holding).toBe("false");
+    done();
+  });
+
+  // 10 Nov 2026: a screen reader's activate presses and lets go at once, so the hold never completed.
+  it("arms on an assistive-tech click and confirms on a second one", async () => {
+    const { button, onConfirm, done } = render();
+    const status = button.parentElement?.querySelector('[role="status"]');
+    expect(status?.textContent).toBe("");
+    button.dispatchEvent(new MouseEvent("click", { detail: 0, bubbles: true }));
+    flushSync();
+    expect(onConfirm).not.toHaveBeenCalled();
+    expect(status?.textContent).toBe("Press again to confirm");
+    button.dispatchEvent(new MouseEvent("click", { detail: 0, bubbles: true }));
+    flushSync();
+    expect(onConfirm).toHaveBeenCalledTimes(1);
+    done();
+  });
+
+  it("lets the armed state lapse and ignores pointer clicks", async () => {
+    const { button, onConfirm, done } = render();
+    button.dispatchEvent(new MouseEvent("click", { detail: 0, bubbles: true }));
+    await vi.advanceTimersByTimeAsync(6000);
+    button.dispatchEvent(new MouseEvent("click", { detail: 0, bubbles: true }));
+    button.dispatchEvent(new MouseEvent("click", { detail: 1, bubbles: true }));
+    flushSync();
+    expect(onConfirm).not.toHaveBeenCalled();
+    done();
+  });
+
+  it("cancels when focus leaves mid-hold", async () => {
+    const { button, onConfirm, key, done } = render();
+    await holdWithRepeat(key, "Enter", 300);
+    button.dispatchEvent(new FocusEvent("blur"));
+    flushSync();
+    await vi.advanceTimersByTimeAsync(800);
+    expect(onConfirm).not.toHaveBeenCalled();
+    done();
+  });
+});

package/src/components/language-flag/language-flag.svelte

@@ -35,11 +35,12 @@
 <!-- =========================== -->
 <!-- MARKUP -->
 <!-- =========================== -->
+<!-- With the label shown, the flag is decorative, or the code is read twice. -->
 {#if src}
 	<span class={cn("inline-flex items-center gap-1.5", className)}>
 		<img
 			{src}
-			alt={language.toUpperCase()}
+			alt={showLabel ? "" : language.toUpperCase()}
 			class={cn("shrink-0 rounded-sm", sizeClass)}
 			loading="lazy"
 		/>

package/src/components/language-flag/language-flag.svelte.d.ts

@@ -0,0 +1,11 @@
+interface Props {
+    language: string;
+    /** Language code to image URL, for another set or path. */
+    flags?: Record<string, string>;
+    size?: "sm" | "md";
+    showLabel?: boolean;
+    class?: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

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

@@ -0,0 +1,15 @@
+import type { Snippet } from "svelte";
+interface Props {
+    title: string;
+    badge?: Snippet;
+    leading?: Snippet;
+    meta?: Array<string | null | undefined | false>;
+    note?: string | null;
+    actions?: Snippet;
+    corner?: 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/detail-row.svelte.d.ts

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

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

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

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

@@ -119,7 +119,7 @@
 	<Empty.Header class={look.header}>
 		{#if Icon && !look.icon}
 			<Empty.Media class="mb-3 size-12 rounded-xl bg-card text-foreground shadow-card">
-				<Icon weight={iconWeight} class="size-6" />
+				<Icon aria-hidden="true" weight={iconWeight} class="size-6" />
 			</Empty.Media>
 		{/if}
 		<Empty.Title
@@ -147,10 +147,21 @@
 <!-- STYLE -->
 <!-- =========================== -->
 <style>
-	/* Never `:nth-child` here: one such rule makes every DOM insert on the page restyle its later siblings. */
-	:global(.t-empty) > :global(*) {
-		animation: t-empty-in var(--duration-slow) var(--ease-smooth-out) both;
-		animation-delay: calc((sibling-index() - 1) * var(--duration-stagger));
+	@layer theme, base, components, utilities;
+
+	@layer components {
+		/* Never `:nth-child` here: one such rule makes every DOM insert on the page restyle its later siblings. */
+		:global(.t-empty) > :global(*) {
+			animation: t-empty-in var(--duration-slow) var(--ease-smooth-out) both;
+			animation-delay: calc((sibling-index() - 1) * var(--duration-stagger));
+		}
+
+		@media (prefers-reduced-motion: reduce) {
+			:global(.t-empty) > :global(*) {
+				animation-name: t-empty-fade;
+				animation-delay: 0s;
+			}
+		}
 	}
 
 	@keyframes -global-t-empty-in {
@@ -169,11 +180,4 @@
 			opacity: 0;
 		}
 	}
-
-	@media (prefers-reduced-motion: reduce) {
-		:global(.t-empty) > :global(*) {
-			animation-name: t-empty-fade;
-			animation-delay: 0s;
-		}
-	}
 </style>

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

@@ -65,7 +65,7 @@
 <!-- =========================== -->
 <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()}

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

@@ -103,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",

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

@@ -10,7 +10,6 @@ export { default as NoticeBar } from "./notice-bar.svelte";
 export { default as RailBody } from "./rail-body.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}