@dorsk/tsumikit 0.72.0 → 0.73.0

package/README.md

@@ -890,6 +890,27 @@ with `label` ("Refreshing…") announced politely until it settles. It starts on
 `scrollTop === 0`, fires once past `threshold` (72px), and contains overscroll so the
 browser's own pull does not fight it. Keep a visible refresh control for mouse users.
 
+### Player: SeekSlider, VolumeSlider, TimeDisplay
+
+`SeekSlider` is a media scrubber: `bind:value` (seconds), `max` (duration;
+`null`/`Infinity`/`0` = live, track disabled), `buffered` (`[start, end][]` drawn
+as a muted fill), `step` (5 s arrows), `bigStep` (10 % PageUp/Down), `size="sm" | "md"`,
+`formatTime`, `previewSnippet(time)` for a thumbnail in the hover tooltip. `oninput`
+fires while dragging and never seeks; `onchange` fires once per release or keyboard
+step, so seek the player only there. `onscrubstart`/`onscrubend` bracket a drag. The
+hit slab is `--touch-target-compact` tall on coarse pointers while the track stays
+3–4 px, and horizontal scrubbing never scrolls the page. `aria-valuetext` reads
+"1:02 of 23:45".
+
+`VolumeSlider` pairs a mute toggle (glyph follows the level) with a short slider:
+`bind:value` (0–1), `bind:muted`, `orientation="vertical"`, `step` (5 %, also the
+wheel notch), `onchange`/`oninput`/`onmutechange`. Changing the level unmutes.
+`hideOnTouch` (default) hides the slider, not the mute button, on touch screens.
+
+`TimeDisplay` renders "1:02 / 23:45" in tabular numbers; clicking toggles
+`bind:remaining`. `formatMediaTime`, `describeMediaTime` and `isLiveDuration` are
+exported for custom readouts.
+
 AppShell exposes `--shell-header-h` (the header plus the top safe-area inset) for
 sticky offsets under `viewport-fit=cover`.
 

package/dist/components/atoms/Icon.svelte

@@ -45,6 +45,11 @@
 		play: '<path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z" />',
 		pause: '<rect x="14" y="3" width="5" height="18" rx="1" /><rect x="5" y="3" width="5" height="18" rx="1" />',
 		stop: '<rect width="18" height="18" x="3" y="3" rx="2" />',
+		volume: '<path d="M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z" />',
+		'volume-low': '<path d="M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z" /><path d="M16 9a5 5 0 0 1 0 6" />',
+		'volume-high': '<path d="M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z" /><path d="M16 9a5 5 0 0 1 0 6" /><path d="M19.364 18.364a9 9 0 0 0 0-12.728" />',
+		'volume-mute': '<path d="M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z" /><path d="m22 9-6 6" /><path d="m16 9 6 6" />',
+		'volume-off': '<path d="M16 9a5 5 0 0 1 .95 2.293" /><path d="M19.364 5.636a9 9 0 0 1 1.889 9.96" /><path d="m2 2 20 20" /><path d="m7 7-.587.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298V11" /><path d="M9.828 4.172A.686.686 0 0 1 11 4.657v.686" />',
 
 		// — media types —
 		music: '<path d="M9 18V5l12-2v13" /><circle cx="6" cy="18" r="3" /><circle cx="18" cy="16" r="3" />',

package/dist/components/atoms/Icon.svelte.d.ts

@@ -34,6 +34,11 @@ declare const ICONS: {
     readonly play: "<path d=\"M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z\" />";
     readonly pause: "<rect x=\"14\" y=\"3\" width=\"5\" height=\"18\" rx=\"1\" /><rect x=\"5\" y=\"3\" width=\"5\" height=\"18\" rx=\"1\" />";
     readonly stop: "<rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" />";
+    readonly volume: "<path d=\"M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z\" />";
+    readonly 'volume-low': "<path d=\"M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z\" /><path d=\"M16 9a5 5 0 0 1 0 6\" />";
+    readonly 'volume-high': "<path d=\"M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z\" /><path d=\"M16 9a5 5 0 0 1 0 6\" /><path d=\"M19.364 18.364a9 9 0 0 0 0-12.728\" />";
+    readonly 'volume-mute': "<path d=\"M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z\" /><path d=\"m22 9-6 6\" /><path d=\"m16 9 6 6\" />";
+    readonly 'volume-off': "<path d=\"M16 9a5 5 0 0 1 .95 2.293\" /><path d=\"M19.364 5.636a9 9 0 0 1 1.889 9.96\" /><path d=\"m2 2 20 20\" /><path d=\"m7 7-.587.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298V11\" /><path d=\"M9.828 4.172A.686.686 0 0 1 11 4.657v.686\" />";
     readonly music: "<path d=\"M9 18V5l12-2v13\" /><circle cx=\"6\" cy=\"18\" r=\"3\" /><circle cx=\"18\" cy=\"16\" r=\"3\" />";
     readonly tv: "<path d=\"m17 2-5 5-5-5\" /><rect width=\"20\" height=\"15\" x=\"2\" y=\"7\" rx=\"2\" />";
     readonly film: "<rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" /><path d=\"M7 3v18\" /><path d=\"M3 7.5h4\" /><path d=\"M3 12h18\" /><path d=\"M3 16.5h4\" /><path d=\"M17 3v18\" /><path d=\"M17 7.5h4\" /><path d=\"M17 16.5h4\" />";

package/dist/components/atoms/TimeDisplay.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+	/**
+	 * "1:02 / 23:45" readout with tabular numbers. Clicking it shows the
+	 * remaining time instead ("-22:43 / 23:45"). Live or unknown durations
+	 * render the position only and cannot be toggled.
+	 */
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { formatMediaTime, isLiveDuration } from '../../media-time';
+
+	type Own = {
+		/** Position in seconds. */
+		current?: number;
+		/** Duration in seconds; `null`/`Infinity` = live or unknown. */
+		duration?: number | null;
+		/** Show time left instead of the position. */
+		remaining?: boolean;
+		/** Allow clicking to toggle `remaining`. */
+		toggle?: boolean;
+		size?: 'sm' | 'md';
+		formatTime?: (seconds: number, ref?: number) => string;
+		toggleLabel?: string;
+		class?: string;
+	};
+
+	let {
+		current = 0,
+		duration = null,
+		remaining = $bindable(false),
+		toggle = true,
+		size = 'sm',
+		formatTime = formatMediaTime,
+		toggleLabel = 'Toggle remaining time',
+		class: klass = '',
+		...rest
+	}: Omit<HTMLAttributes<HTMLElement>, keyof Own> & Own = $props();
+
+	const live = $derived(isLiveDuration(duration));
+	const total = $derived(live ? 0 : (duration as number));
+	const pos = $derived(Math.min(live ? Number.POSITIVE_INFINITY : total, Math.max(0, current)));
+	const head = $derived(live ? formatTime(pos) : remaining ? `-${formatTime(total - pos, total)}` : formatTime(pos, total));
+	const tail = $derived(live ? null : formatTime(total, total));
+	const interactive = $derived(toggle && !live);
+</script>
+
+{#if interactive}
+	<button
+		data-tsu="TimeDisplay"
+		type="button"
+		class="td td--{size} td--button {klass}"
+		class:td--remaining={remaining}
+		title={toggleLabel}
+		aria-pressed={remaining}
+		onclick={() => (remaining = !remaining)}
+		{...rest}
+	>
+		<span data-part="position">{head}</span><span class="td-sep" aria-hidden="true">{' / '}</span><span data-part="duration">{tail}</span>
+	</button>
+{:else}
+	<span data-tsu="TimeDisplay" class="td td--{size} {klass}" {...rest}>
+		<span data-part="position">{head}</span>{#if tail !== null}<span class="td-sep" aria-hidden="true">{' / '}</span><span data-part="duration">{tail}</span>{/if}
+	</span>
+{/if}
+
+<style>
+	.td {
+		display: inline-flex;
+		align-items: baseline;
+		font-size: var(--fs-sm);
+		font-variant-numeric: tabular-nums;
+		color: var(--text-muted);
+		white-space: nowrap;
+	}
+	.td--md {
+		font-size: var(--fs-base);
+	}
+	.td--button {
+		border: 0;
+		background: none;
+		padding: 0;
+		margin: 0;
+		font: inherit;
+		font-variant-numeric: tabular-nums;
+		color: inherit;
+		cursor: pointer;
+		border-radius: var(--r-sm);
+	}
+	.td--button:hover {
+		color: var(--text);
+	}
+	.td--button:focus-visible {
+		outline: var(--focus-ring);
+		outline-offset: var(--focus-ring-offset);
+	}
+	.td-sep {
+		color: var(--text-faint);
+		white-space: pre;
+	}
+</style>

package/dist/components/atoms/TimeDisplay.svelte.d.ts

@@ -0,0 +1,24 @@
+/**
+     * "1:02 / 23:45" readout with tabular numbers. Clicking it shows the
+     * remaining time instead ("-22:43 / 23:45"). Live or unknown durations
+     * render the position only and cannot be toggled.
+     */
+import type { HTMLAttributes } from 'svelte/elements';
+type Own = {
+    /** Position in seconds. */
+    current?: number;
+    /** Duration in seconds; `null`/`Infinity` = live or unknown. */
+    duration?: number | null;
+    /** Show time left instead of the position. */
+    remaining?: boolean;
+    /** Allow clicking to toggle `remaining`. */
+    toggle?: boolean;
+    size?: 'sm' | 'md';
+    formatTime?: (seconds: number, ref?: number) => string;
+    toggleLabel?: string;
+    class?: string;
+};
+type $$ComponentProps = Omit<HTMLAttributes<HTMLElement>, keyof Own> & Own;
+declare const TimeDisplay: import("svelte").Component<$$ComponentProps, {}, "remaining">;
+type TimeDisplay = ReturnType<typeof TimeDisplay>;
+export default TimeDisplay;

package/dist/components/layouts/AppShell.svelte

@@ -15,6 +15,7 @@
 	// `--shell-header-h` is the rendered header height (incl. the top inset).
 	import { untrack, type Snippet } from 'svelte';
 	import { browser } from '../../env';
+	import { readStorage, writeStorage } from '../../stores/storage';
 	import IconButton from '../molecules/IconButton.svelte';
 	import { resizeHandle } from './resizable-panel-frame.js';
 
@@ -103,13 +104,13 @@
 	// --- resizable sidebar (desktop) ---
 	function loadW(): number | null {
 		if (!browser || !sidebarWidthKey) return null;
-		const n = Number(localStorage.getItem(sidebarWidthKey));
+		const n = Number(readStorage(sidebarWidthKey));
 		return Number.isFinite(n) && n >= minSidebar ? Math.min(n, maxSidebar) : null;
 	}
 	let sideW = $state<number | null>(loadW());
 	let dragging = $state(false);
 	function persistW(w: number) {
-		if (browser && sidebarWidthKey) localStorage.setItem(sidebarWidthKey, String(w));
+		if (browser && sidebarWidthKey) writeStorage(sidebarWidthKey, String(w));
 	}
 	const measureW = () => sideW ?? aside?.getBoundingClientRect().width ?? 0;
 	// The effective desktop width: a resized px value wins over the prop default.

package/dist/components/layouts/ResizablePanel.svelte

@@ -2,6 +2,7 @@
 	import type { Snippet } from 'svelte';
 	import { untrack } from 'svelte';
 	import { browser } from '../../env';
+	import { readStorage, writeStorage } from '../../stores/storage';
 	import Icon from '../atoms/Icon.svelte';
 	import Scrim from '../atoms/Scrim.svelte';
 	import { resizeHandle, resolveLength } from './resizable-panel-frame.js';
@@ -152,7 +153,7 @@
 		if (!widthKey) return;
 
 		const savedWidth = parseStoredWidth(
-			localStorage.getItem(widthKey),
+			readStorage(widthKey),
 			boundedMin,
 			boundedMax
 		);
@@ -160,7 +161,7 @@
 
 		if (persistCollapsed) {
 			const savedCollapsed = parseStoredCollapsed(
-				localStorage.getItem(`${widthKey}:collapsed`)
+				readStorage(`${widthKey}:collapsed`)
 			);
 			if (savedCollapsed !== undefined) collapsed = savedCollapsed;
 		}
@@ -212,7 +213,7 @@
 	});
 
 	function persistWidth(nextWidth: number) {
-		if (browser && widthKey) localStorage.setItem(widthKey, String(nextWidth));
+		if (browser && widthKey) writeStorage(widthKey, String(nextWidth));
 	}
 
 	function setWidth(nextWidth: number) {
@@ -292,7 +293,7 @@
 		}
 		collapsed = !collapsed;
 		if (browser && widthKey && persistCollapsed) {
-			localStorage.setItem(`${widthKey}:collapsed`, String(collapsed));
+			writeStorage(`${widthKey}:collapsed`, String(collapsed));
 		}
 	}
 </script>

package/dist/components/molecules/Accordion.svelte

@@ -56,6 +56,7 @@
 		style?: string;
 	};
 
+	const uid = $props.id();
 	let local = $state<Record<string, boolean>>({});
 	let seen: Record<string, boolean | undefined> = {};
 
@@ -98,7 +99,7 @@
 	{#each items as item (item.id)}
 		<Disclosure
 			class="acc-item"
-			id={`acc-${item.id}`}
+			id={`${uid}-acc-${item.id}`}
 			open={isOpen(item)}
 			onchange={(o) => set(item, o)}
 			disabled={item.disabled}

package/dist/components/molecules/AttachmentList.svelte

@@ -103,6 +103,7 @@
 						maxWidth="16rem"
 						removable={!!onremove}
 						onremove={() => onremove?.(i)}
+						actionLabel="{removeLabel} {f.name}"
 						title={f.name}
 					>
 						{@const src = thumb(f)}

package/dist/components/molecules/Breadcrumb.svelte

@@ -6,9 +6,9 @@
 </script>
 
 <script lang="ts">
-	// Navigation trail (e.g. "Musique > Artist > Album > Track"). The last item —
-	// or any item without an `href` — renders unlinked and is marked
-	// aria-current="page". When the trail exceeds `maxItems` the middle collapses
+	// Navigation trail (e.g. "Musique > Artist > Album > Track"). The last item
+	// renders unlinked with aria-current="page"; other items without an `href`
+	// render as plain text. When the trail exceeds `maxItems` the middle collapses
 	// to an ellipsis, always keeping the first item and the tail. `separator` is a
 	// snippet for custom markup, else a char via the `char` prop.
 	import type { Snippet } from 'svelte';
@@ -30,7 +30,8 @@
 		char?: string;
 		separator?: Snippet;
 		/** Collapse the middle to an ellipsis when the trail is longer than this
-		 *  (0 = never collapse). Keeps the first item and the last `maxItems - 1`. */
+		 *  (0 = never collapse). Keeps the first item and the last `maxItems - 1`;
+		 *  values below 2 behave as 2 so the current page always shows. */
 		maxItems?: number;
 		size?: 'sm' | 'md';
 		/** `false` keeps the trail on one line: ancestors keep their width and the
@@ -46,7 +47,7 @@
 
 	const shown = $derived<Crumb[]>(
 		maxItems > 0 && items.length > maxItems
-			? [items[0], { ellipsis: true }, ...items.slice(items.length - (maxItems - 1))]
+			? [items[0], { ellipsis: true }, ...items.slice(items.length - (Math.max(2, maxItems) - 1))]
 			: items
 	);
 </script>
@@ -67,7 +68,7 @@
 				{:else if item.href && i < shown.length - 1}
 					<a class="link" href={item.href}>{item.label}</a>
 				{:else}
-					<span class="current" aria-current="page">{item.label}</span>
+					<span class="current" aria-current={i === shown.length - 1 ? 'page' : undefined}>{item.label}</span>
 				{/if}
 				{#if i < shown.length - 1}
 					<span class="sep" aria-hidden="true">

package/dist/components/molecules/Breadcrumb.svelte.d.ts

@@ -9,7 +9,8 @@ type $$ComponentProps = {
     char?: string;
     separator?: Snippet;
     /** Collapse the middle to an ellipsis when the trail is longer than this
-     *  (0 = never collapse). Keeps the first item and the last `maxItems - 1`. */
+     *  (0 = never collapse). Keeps the first item and the last `maxItems - 1`;
+     *  values below 2 behave as 2 so the current page always shows. */
     maxItems?: number;
     size?: 'sm' | 'md';
     /** `false` keeps the trail on one line: ancestors keep their width and the

package/dist/components/molecules/CapBar.svelte

@@ -112,7 +112,7 @@
 	let limit = $state(0);
 	let dragging = $state(false);
 	let keying = $state(false);
-	let committed = cap;
+	let committed: number | null = null;
 
 	const stacked = $derived(isStacked(layout, width, limit));
 
@@ -151,6 +151,7 @@
 		if (readonly || !trackEl || e.button !== 0) return;
 		e.preventDefault();
 		dragging = true;
+		committed = cap;
 		trackEl.setPointerCapture(e.pointerId);
 		setCap(capFromPointer(e.clientX, trackEl.getBoundingClientRect(), step, min, max));
 		trackEl.querySelector<HTMLElement>('.handle')?.focus();
@@ -169,6 +170,7 @@
 		const next = capKeyStep(e.key, e.shiftKey, snapCap(cap ?? max, step, min, max), step, min, max);
 		if (next === null) return;
 		e.preventDefault();
+		if (!keying) committed = cap;
 		keying = true;
 		setCap(next);
 	}

package/dist/components/molecules/Composer.svelte

@@ -129,8 +129,32 @@
 			addFiles(files);
 		}
 	}
+	// Only file drags are handled; native text drag-and-drop into the field is
+	// left to the browser. The depth counter stops dragleave on child crossings
+	// from flickering the `dragging` state.
+	let dragDepth = 0;
+	function hasFiles(e: DragEvent): boolean {
+		return Array.from(e.dataTransfer?.types ?? []).includes('Files');
+	}
+	function ondragenter(e: DragEvent) {
+		if (!hasFiles(e)) return;
+		dragDepth++;
+		dragging = true;
+	}
+	function ondragleave(e: DragEvent) {
+		if (!hasFiles(e)) return;
+		dragDepth = Math.max(0, dragDepth - 1);
+		if (dragDepth === 0) dragging = false;
+	}
+	function ondragover(e: DragEvent) {
+		if (!hasFiles(e)) return;
+		e.preventDefault();
+		if (e.dataTransfer) e.dataTransfer.dropEffect = 'copy';
+	}
 	function ondrop(e: DragEvent) {
+		if (!hasFiles(e)) return;
 		e.preventDefault();
+		dragDepth = 0;
 		dragging = false;
 		addFiles(Array.from(e.dataTransfer?.files ?? []));
 	}
@@ -156,11 +180,9 @@
 	class:busy
 	style={styleProp}
 	role="group"
-	ondragover={(e) => {
-		e.preventDefault();
-		dragging = true;
-	}}
-	ondragleave={() => (dragging = false)}
+	{ondragenter}
+	{ondragleave}
+	{ondragover}
 	{ondrop}
 >
 	<AttachmentList files={attachments} onremove={removeAt} />

package/dist/components/molecules/Drawer.svelte

@@ -85,8 +85,16 @@
 		onclose?.();
 	}
 
+	// A drag that starts in the panel and ends on the backdrop fires click on the
+	// dialog too, so the press must have landed on the backdrop as well.
+	let pressOnBackdrop = false;
+	function onDialogPointerDown(e: PointerEvent) {
+		pressOnBackdrop = e.target === dialogEl;
+	}
 	function onDialogClick(e: MouseEvent) {
-		if (e.target === dialogEl) requestClose();
+		const outside = pressOnBackdrop && e.target === dialogEl;
+		pressOnBackdrop = false;
+		if (outside) requestClose();
 	}
 </script>
 
@@ -104,6 +112,7 @@
 	onclose={() => {
 		if (controlled) open = false;
 	}}
+	onpointerdown={onDialogPointerDown}
 	onclick={onDialogClick}
 >
 	<div

package/dist/components/molecules/Dropzone.svelte

@@ -91,12 +91,13 @@
 		if (depth === 0) setOver(false);
 	}
 	function onDragOver(e: DragEvent) {
-		if (disabled) return;
+		if (disabled || !hasFiles(e)) return;
 		// preventDefault is required or `drop` never fires.
 		e.preventDefault();
 		if (e.dataTransfer) e.dataTransfer.dropEffect = 'copy';
 	}
 	function onDrop(e: DragEvent) {
+		if (!hasFiles(e)) return;
 		e.preventDefault();
 		depth = 0;
 		setOver(false);

package/dist/components/molecules/FilterInput.svelte

@@ -148,6 +148,8 @@
 	};
 
 	const field = getFieldContext();
+	const uid = $props.id();
+	const listboxId = `${uid}-lb`;
 	let el = $state<HTMLInputElement | null>(null);
 	let menuEl = $state<HTMLDivElement | null>(null);
 	let menu = $state<SuggestState | null>(null);
@@ -378,6 +380,11 @@
 				id={id ?? field?.id}
 				aria-describedby={ariaDescribedby ?? field?.describedBy}
 				aria-invalid={ariaInvalid ?? (field?.invalid ? 'true' : undefined)}
+				role="combobox"
+				aria-autocomplete="list"
+				aria-expanded={open && !!menu}
+				aria-controls={open && menu ? listboxId : undefined}
+				aria-activedescendant={open && menu ? `${uid}-opt-${active}` : undefined}
 				spellcheck="false"
 				autocomplete="off"
 				placeholder={hint}
@@ -420,14 +427,16 @@
 	</div>
 
 	{#if open && menu}
-		<div bind:this={menuEl} class="fi__menu" role="listbox" aria-label={kindLabel[menu.kind]}>
+		<div bind:this={menuEl} id={listboxId} class="fi__menu" role="listbox" aria-label={kindLabel[menu.kind]}>
 			<div class="fi__menu-head">{kindLabel[menu.kind]}</div>
 			{#each menu.items as item, i (item.insert + i)}
 				<button
 					type="button"
+					id="{uid}-opt-{i}"
 					class="fi__opt"
 					class:is-active={i === active}
 					role="option"
+					tabindex="-1"
 					aria-selected={i === active}
 					onmousedown={(e) => e.preventDefault()}
 					onmouseenter={() => {

package/dist/components/molecules/Metric.svelte

@@ -98,20 +98,27 @@
 {/snippet}
 
 {#if layout === 'inline'}
-	<div
+	<svelte:element
+		this={href ? 'a' : onclick ? 'button' : 'div'}
 		data-tsu="Metric"
 		class="metric metric-inline metric-{canonicalTone(tone)} {tintValue ? 'metric-tint' : ''} {klass}"
 		class:metric-sm={size === 'sm'}
+		class:metric-tap={!!(href || onclick)}
+		href={href || undefined}
+		target={href && external ? '_blank' : undefined}
+		rel={href && external ? 'noopener noreferrer' : undefined}
+		type={!href && onclick ? 'button' : undefined}
+		{onclick}
 		{...rest}
 	>
-		<span class="metric-label">{label}</span>
+		<span class="metric-label">{label}{#if href && external}<Icon name="external" />{/if}</span>
 		<span class="metric-value">
 			<span class="metric-num">{value}</span>
 			{#if unit}<span class="metric-unit">{unit}</span>{/if}
 		</span>
 		{@render segmentRow()}
 		{#if sub}<span class="metric-sub">{sub}</span>{/if}
-	</div>
+	</svelte:element>
 {:else}
 <Card
 	data-tsu="Metric"
@@ -242,6 +249,24 @@
 	.metric-inline .metric-num {
 		font-size: var(--fs-md);
 	}
+	.metric-inline.metric-tap {
+		padding: 0;
+		border: 0;
+		background: none;
+		font: inherit;
+		color: inherit;
+		text-align: start;
+		text-decoration: none;
+		cursor: pointer;
+		border-radius: var(--r-sm);
+	}
+	.metric-inline.metric-tap:hover .metric-label {
+		color: var(--text);
+	}
+	.metric-inline.metric-tap:focus-visible {
+		outline: 2px solid var(--accent);
+		outline-offset: 2px;
+	}
 	.metric-segments {
 		display: flex;
 		flex-wrap: wrap;

package/dist/components/molecules/Modal.svelte

@@ -9,6 +9,7 @@
 	// `resizeKey`).
 	import type { Snippet } from 'svelte';
 	import { browser } from '../../env';
+	import { readStorage, writeStorage } from '../../stores/storage';
 	import Icon, { type IconName } from '../atoms/Icon.svelte';
 	import Spinner from '../atoms/Spinner.svelte';
 	import IconButton from './IconButton.svelte';
@@ -76,7 +77,7 @@
 
 	function loadWidth(): number | null {
 		if (!browser || !resizeKey) return null;
-		const n = Number(localStorage.getItem(resizeKey));
+		const n = Number(readStorage(resizeKey));
 		return Number.isFinite(n) && n >= MIN_W ? Math.min(n, MAX_W) : null;
 	}
 	let width = $state<number | null>(loadWidth());
@@ -103,9 +104,17 @@
 	}
 
 	// Click outside: <dialog fills the viewport; clicks on its padding-free self
-	// (not the inner .sheet) are backdrop clicks.
+	// (not the inner .sheet) are backdrop clicks. A drag that starts in the sheet
+	// and ends on the backdrop also fires click on the dialog, so the press must
+	// have landed on the backdrop too.
+	let pressOnBackdrop = false;
+	function onDialogPointerDown(e: PointerEvent) {
+		pressOnBackdrop = e.target === dialogEl;
+	}
 	function onDialogClick(e: MouseEvent) {
-		if (e.target === dialogEl) requestClose();
+		const outside = pressOnBackdrop && e.target === dialogEl;
+		pressOnBackdrop = false;
+		if (outside) requestClose();
 	}
 
 	// --- resize ---
@@ -146,7 +155,7 @@
 		} catch {
 			/* already released */
 		}
-		if (browser && resizeKey && width != null) localStorage.setItem(resizeKey, String(width));
+		if (browser && resizeKey && width != null) writeStorage(resizeKey, String(width));
 	}
 </script>
 
@@ -166,6 +175,7 @@
 	onclose={() => {
 		if (controlled) open = false;
 	}}
+	onpointerdown={onDialogPointerDown}
 	onclick={onDialogClick}
 >
 	<div
@@ -283,6 +293,12 @@
 			opacity: 0.4;
 		}
 	}
+	@media (prefers-reduced-motion: reduce) {
+		.modal::backdrop,
+		.sheet {
+			animation: none;
+		}
+	}
 	.modal.resizing .sheet {
 		user-select: none;
 		/* Make per-frame width changes cheap to paint: hint the animated property,

package/dist/components/molecules/Popover.svelte

@@ -186,7 +186,11 @@
 	}
 
 	const hover = createHoverIntent({ open: show, close });
-	$effect(() => () => hover.cancel());
+	$effect(() => () => {
+		hover.cancel();
+		removeEventListener('scroll', reposition, true);
+		removeEventListener('resize', reposition);
+	});
 
 	function onPointerEnter(e: PointerEvent) {
 		if (disabled || !opensOnHover(openOn, e.pointerType)) return;
@@ -194,8 +198,8 @@
 		else hover.enter(hoverDelay);
 	}
 
-	function onPointerLeave() {
-		if (openOn !== 'hover') return;
+	function onPointerLeave(e: PointerEvent) {
+		if (!opensOnHover(openOn, e.pointerType)) return;
 		hover.leave(HOVER_CLOSE_GRACE);
 	}