npm - @dorsk/tsumikit - Versions diffs - 0.71.0 → 0.73.0 - Mend

@dorsk/tsumikit 0.71.0 → 0.73.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (84) hide show

package/README.md +54 -5
package/dist/autoresize.js +13 -0
package/dist/clipboard.js +12 -0
package/dist/components/atoms/Artwork.svelte +4 -2
package/dist/components/atoms/Avatar.svelte +4 -3
package/dist/components/atoms/Badge.svelte +13 -0
package/dist/components/atoms/Button.svelte +25 -9
package/dist/components/atoms/Card.svelte +2 -0
package/dist/components/atoms/Dot.svelte +1 -1
package/dist/components/atoms/Icon.svelte +7 -0
package/dist/components/atoms/Icon.svelte.d.ts +7 -0
package/dist/components/atoms/Kbd.svelte +28 -16
package/dist/components/atoms/Link.svelte +6 -4
package/dist/components/atoms/Scrim.svelte +18 -1
package/dist/components/atoms/Slider.svelte +11 -1
package/dist/components/atoms/Swatch.svelte +12 -0
package/dist/components/atoms/TimeDisplay.svelte +98 -0
package/dist/components/atoms/TimeDisplay.svelte.d.ts +24 -0
package/dist/components/layouts/AppShell.svelte +72 -40
package/dist/components/layouts/Container.svelte +25 -3
package/dist/components/layouts/MasterDetail.svelte +59 -33
package/dist/components/layouts/MasterDetail.svelte.d.ts +1 -1
package/dist/components/layouts/NavItem.svelte +8 -4
package/dist/components/layouts/NavSection.svelte +8 -2
package/dist/components/layouts/ResizablePanel.svelte +19 -4
package/dist/components/layouts/TabBar.svelte +217 -0
package/dist/components/layouts/TabBar.svelte.d.ts +27 -0
package/dist/components/layouts/Toolbar.svelte +5 -0
package/dist/components/layouts/toolbar-roving.d.ts +16 -0
package/dist/components/layouts/toolbar-roving.js +47 -1
package/dist/components/molecules/Accordion.svelte +2 -1
package/dist/components/molecules/AttachmentList.svelte +1 -0
package/dist/components/molecules/Breadcrumb.svelte +7 -6
package/dist/components/molecules/Breadcrumb.svelte.d.ts +2 -1
package/dist/components/molecules/CapBar.svelte +3 -1
package/dist/components/molecules/Composer.svelte +27 -5
package/dist/components/molecules/Drawer.svelte +10 -1
package/dist/components/molecules/Dropzone.svelte +2 -1
package/dist/components/molecules/FilterInput.svelte +17 -1
package/dist/components/molecules/FilterInput.svelte.d.ts +2 -0
package/dist/components/molecules/Metric.svelte +28 -3
package/dist/components/molecules/Modal.svelte +20 -4
package/dist/components/molecules/Popover.svelte +7 -3
package/dist/components/molecules/PullToRefresh.svelte +205 -0
package/dist/components/molecules/PullToRefresh.svelte.d.ts +18 -0
package/dist/components/molecules/SectionHeader.svelte +29 -14
package/dist/components/molecules/SeekSlider.svelte +370 -0
package/dist/components/molecules/SeekSlider.svelte.d.ts +37 -0
package/dist/components/molecules/SegmentedControl.svelte +10 -6
package/dist/components/molecules/SelectButton.svelte +33 -22
package/dist/components/molecules/SwipeRow.svelte +349 -0
package/dist/components/molecules/SwipeRow.svelte.d.ts +37 -0
package/dist/components/molecules/Tabs.svelte +11 -5
package/dist/components/molecules/Timestamp.svelte +1 -1
package/dist/components/molecules/Toaster.svelte +70 -13
package/dist/components/molecules/Tooltip.svelte +19 -10
package/dist/components/molecules/VolumeSlider.svelte +367 -0
package/dist/components/molecules/VolumeSlider.svelte.d.ts +30 -0
package/dist/components/molecules/combobox-keyboard.js +2 -1
package/dist/components/organisms/ConversationFeed.svelte +22 -8
package/dist/components/organisms/ConversationFeed.svelte.d.ts +2 -0
package/dist/components/organisms/DataTable.svelte +22 -5
package/dist/components/organisms/DataTable.svelte.d.ts +4 -2
package/dist/components/organisms/FilterSearchBar.svelte +4 -0
package/dist/components/organisms/FilterSearchBar.svelte.d.ts +2 -0
package/dist/index.d.ts +7 -0
package/dist/index.js +7 -0
package/dist/markdown.js +15 -7
package/dist/media-time.d.ts +6 -0
package/dist/media-time.js +25 -0
package/dist/query/edit.js +1 -16
package/dist/query/parser.js +68 -28
package/dist/query/query.js +9 -5
package/dist/query/quotes.d.ts +24 -0
package/dist/query/quotes.js +78 -0
package/dist/query/single.js +1 -3
package/dist/query/suggest.js +25 -32
package/dist/stores/fontscale.svelte.js +3 -2
package/dist/stores/storage.d.ts +2 -0
package/dist/stores/storage.js +16 -0
package/dist/stores/theme.svelte.js +4 -7
package/dist/styles/reset.css +30 -0
package/dist/styles/syntax.css +0 -29
package/package.json +1 -1

package/dist/components/layouts/TabBar.svelte ADDED Viewed

@@ -0,0 +1,217 @@
+<script lang="ts">
+	// Phone bottom tab bar: fixed to the bottom edge with safe-area padding.
+	// Items without `href` form a `tablist` of `tab`s with roving focus; with
+	// `href` the bar is a `<nav>` of `<a aria-current="page">`. While mounted as
+	// a bar it publishes its measured height as `--tabbar-h` on `<html>` so
+	// content can clear it (`padding-bottom: var(--tabbar-h)`).
+	import Badge from '../atoms/Badge.svelte';
+	import Icon from '../atoms/Icon.svelte';
+	import type { IconName } from '../atoms/Icon.svelte';
+	import { formatCount, hasCount } from '../../count';
+	export interface TabBarItem {
+		id: string;
+		label: string;
+		icon?: IconName;
+		/** Renders an `<a>`; without it the item is a `<button role="tab">`. */
+		href?: string;
+		/** Count (capped at `99+`) or short text pinned to the glyph. 0 / '' render nothing. */
+		badge?: number | string;
+		/** Id of the panel a tab shows (`aria-controls`). */
+		controls?: string;
+	}
+	let {
+		items,
+		value = $bindable(),
+		onselect,
+		label = 'Primary',
+		placement = 'bar',
+		class: klass = '',
+		...rest
+	}: {
+		items: TabBarItem[];
+		/** `id` of the selected item. */
+		value?: string;
+		onselect?: (id: string, item: TabBarItem) => void;
+		/** Accessible name of the bar. */
+		label?: string;
+		/** 'bar' = fixed to the bottom edge; 'inline' = flows with its parent. */
+		placement?: 'bar' | 'inline';
+		class?: string;
+		[key: string]: unknown;
+	} = $props();
+	const links = $derived(items.some((item) => item.href));
+	const isCurrent = (item: TabBarItem) => item.id === value;
+	const focusIndex = $derived(Math.max(0, items.findIndex(isCurrent)));
+	const badgeText = (badge: TabBarItem['badge']) =>
+		typeof badge === 'number' ? (hasCount(badge) ? formatCount(badge) : '') : (badge ?? '');
+	let height = $state(0);
+	$effect(() => {
+		if (placement !== 'bar' || typeof document === 'undefined') return;
+		const root = document.documentElement;
+		root.style.setProperty('--tabbar-h', `${height}px`);
+		return () => root.style.removeProperty('--tabbar-h');
+	});
+	function select(item: TabBarItem) {
+		if (item.id === value) return;
+		value = item.id;
+		onselect?.(item.id, item);
+	}
+	function onkeydown(e: KeyboardEvent) {
+		const all = [...(e.currentTarget as HTMLElement).querySelectorAll<HTMLElement>('.tabbar-item')];
+		const i = all.indexOf(e.target as HTMLElement);
+		if (i < 0) return;
+		let next: number;
+		if (e.key === 'ArrowRight') next = (i + 1) % all.length;
+		else if (e.key === 'ArrowLeft') next = (i - 1 + all.length) % all.length;
+		else if (e.key === 'Home') next = 0;
+		else if (e.key === 'End') next = all.length - 1;
+		else return;
+		e.preventDefault();
+		all[next].focus();
+		if (!links) select(items[next]);
+	}
+</script>
+{#snippet glyph(item: TabBarItem)}
+	<span class="tabbar-glyph">
+		{#if item.icon}
+			<Icon name={item.icon} size={22} />
+		{/if}
+		{#if badgeText(item.badge)}
+			<Badge class="tabbar-badge" tone="accent" size="xs" border={false} active numeric={typeof item.badge === 'number'}>
+				{badgeText(item.badge)}
+			</Badge>
+		{/if}
+	</span>
+	<span class="tabbar-label">{item.label}</span>
+{/snippet}
+<nav
+	bind:offsetHeight={height}
+	data-tsu="TabBar"
+	aria-label={label}
+	class="tabbar {klass}"
+	class:bar={placement === 'bar'}
+	{...rest}
+>
+	<div
+		class="tabbar-row"
+		role={links ? undefined : 'tablist'}
+		aria-label={links ? undefined : label}
+		{onkeydown}
+	>
+		{#each items as item, i (item.id)}
+			{#if item.href}
+				<a
+					href={item.href}
+					class="tabbar-item"
+					class:current={isCurrent(item)}
+					aria-current={isCurrent(item) ? 'page' : undefined}
+					onclick={() => select(item)}
+				>
+					{@render glyph(item)}
+				</a>
+			{:else}
+				<button
+					type="button"
+					role="tab"
+					class="tabbar-item"
+					class:current={isCurrent(item)}
+					aria-selected={isCurrent(item)}
+					aria-controls={item.controls}
+					tabindex={i === focusIndex ? 0 : -1}
+					onclick={() => select(item)}
+				>
+					{@render glyph(item)}
+				</button>
+			{/if}
+		{/each}
+	</div>
+</nav>
+<style>
+	.tabbar {
+		min-width: 0;
+		background: var(--bg-elevated);
+		border-top: 1px solid var(--border);
+	}
+	.bar {
+		position: fixed;
+		inset-inline: 0;
+		bottom: 0;
+		z-index: var(--z-nav);
+		padding-bottom: env(safe-area-inset-bottom, 0px);
+		padding-inline: env(safe-area-inset-left, 0px) env(safe-area-inset-right, 0px);
+		background: color-mix(in srgb, var(--bg-elevated) 92%, transparent);
+		backdrop-filter: blur(12px);
+	}
+	.tabbar-row {
+		display: flex;
+		align-items: stretch;
+		min-width: 0;
+		min-height: var(--nav-h);
+	}
+	.tabbar-item {
+		position: relative;
+		display: flex;
+		flex: 1 1 0;
+		min-width: 0;
+		min-height: max(48px, var(--touch-target));
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		gap: 2px;
+		padding: var(--sp-1) var(--sp-2);
+		border: none;
+		border-radius: 0;
+		background: none;
+		color: var(--text-muted);
+		font: inherit;
+		font-size: var(--fs-xs);
+		font-weight: var(--fw-medium);
+		text-decoration: none;
+		cursor: pointer;
+		-webkit-tap-highlight-color: transparent;
+		transition: color 0.12s var(--ease);
+	}
+	.tabbar-item:hover {
+		color: var(--text);
+		text-decoration: none;
+	}
+	.tabbar-item:focus-visible {
+		outline: 2px solid var(--accent);
+		outline-offset: -2px;
+	}
+	.tabbar-item.current {
+		color: var(--accent);
+	}
+	.tabbar-glyph {
+		position: relative;
+		display: inline-flex;
+		flex: none;
+		align-items: center;
+	}
+	.tabbar-label {
+		max-width: 100%;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	.tabbar :global(.tabbar-badge) {
+		position: absolute;
+		top: -0.4rem;
+		left: calc(100% - 0.5rem);
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.tabbar-item {
+			transition: none;
+		}
+	}
+</style>

package/dist/components/layouts/TabBar.svelte.d.ts ADDED Viewed

@@ -0,0 +1,27 @@
+import type { IconName } from '../atoms/Icon.svelte';
+export interface TabBarItem {
+    id: string;
+    label: string;
+    icon?: IconName;
+    /** Renders an `<a>`; without it the item is a `<button role="tab">`. */
+    href?: string;
+    /** Count (capped at `99+`) or short text pinned to the glyph. 0 / '' render nothing. */
+    badge?: number | string;
+    /** Id of the panel a tab shows (`aria-controls`). */
+    controls?: string;
+}
+type $$ComponentProps = {
+    items: TabBarItem[];
+    /** `id` of the selected item. */
+    value?: string;
+    onselect?: (id: string, item: TabBarItem) => void;
+    /** Accessible name of the bar. */
+    label?: string;
+    /** 'bar' = fixed to the bottom edge; 'inline' = flows with its parent. */
+    placement?: 'bar' | 'inline';
+    class?: string;
+    [key: string]: unknown;
+};
+declare const TabBar: import("svelte").Component<$$ComponentProps, {}, "value">;
+type TabBar = ReturnType<typeof TabBar>;
+export default TabBar;

package/dist/components/layouts/Toolbar.svelte CHANGED Viewed

@@ -16,6 +16,7 @@
 		consumesArrowKeys,
 		isToolbarNavKey,
 		nextToolbarStop,
+		radioGroupPeers,
 		TOOLBAR_STOP_ATTR,
 		toolbarStops
 	} from './toolbar-roving.js';
@@ -93,6 +94,10 @@
 		list.forEach((node, i) => {
 			node.setAttribute(TOOLBAR_STOP_ATTR, '');
 			node.tabIndex = i === index ? 0 : -1;
+			for (const peer of radioGroupPeers(node, el)) {
+				peer.setAttribute(TOOLBAR_STOP_ATTR, '');
+				peer.tabIndex = -1;
+			}
 		});
 	}

package/dist/components/layouts/toolbar-roving.d.ts CHANGED Viewed

@@ -38,6 +38,22 @@ export function acceptsRovingStop(el: {
  * @returns {HTMLElement[]}
  */
 export function toolbarStops(container: Element | null, isHidden: (node: HTMLElement) => boolean): HTMLElement[];
+/**
+ * A named radio group is a single stop, like a native one: its checked radio,
+ * else its first. The arrows inside it stay the browser's.
+ *
+ * @param {HTMLElement[]} stops
+ * @returns {HTMLElement[]}
+ */
+export function oneStopPerRadioGroup(stops: HTMLElement[]): HTMLElement[];
+/**
+ * The other radios sharing `node`'s group inside `container`.
+ *
+ * @param {HTMLElement} node
+ * @param {Element | null} container
+ * @returns {HTMLElement[]}
+ */
+export function radioGroupPeers(node: HTMLElement, container: Element | null): HTMLElement[];
 /**
  * Arrows wrap; Home/End jump to the ends. `undefined` means "not ours" — the
  * caller must leave the event alone.

package/dist/components/layouts/toolbar-roving.js CHANGED Viewed

@@ -20,6 +20,7 @@ const ARROW_CONSUMING_INPUTS = new Set([
 	'week',
 	'time',
 	'range',
+	'radio',
 ]);
 /** @param {string} key */
@@ -67,7 +68,7 @@ export function acceptsRovingStop(el) {
  */
 export function toolbarStops(container, isHidden) {
 	if (!container) return [];
-	return [
+	const stops = [
 		.../** @type {NodeListOf<HTMLElement>} */ (container.querySelectorAll(TOOLBAR_STOP_SELECTOR)),
 	].filter((node) =>
 		acceptsRovingStop({
@@ -79,6 +80,51 @@ export function toolbarStops(container, isHidden) {
 			claimed: node.hasAttribute(TOOLBAR_STOP_ATTR),
 		}),
 	);
+	return oneStopPerRadioGroup(stops);
+}
+/** @param {HTMLElement} node */
+function radioName(node) {
+	const input = /** @type {HTMLInputElement} */ (node);
+	return node.tagName === 'INPUT' && input.type === 'radio' && input.name ? input.name : null;
+}
+/**
+ * A named radio group is a single stop, like a native one: its checked radio,
+ * else its first. The arrows inside it stay the browser's.
+ *
+ * @param {HTMLElement[]} stops
+ * @returns {HTMLElement[]}
+ */
+export function oneStopPerRadioGroup(stops) {
+	/** @type {Map<string, HTMLElement>} */
+	const picked = new Map();
+	for (const node of stops) {
+		const name = radioName(node);
+		if (name === null) continue;
+		const current = /** @type {HTMLInputElement | undefined} */ (picked.get(name));
+		if (!current || (!current.checked && /** @type {HTMLInputElement} */ (node).checked))
+			picked.set(name, node);
+	}
+	return stops.filter((node) => {
+		const name = radioName(node);
+		return name === null || picked.get(name) === node;
+	});
+}
+/**
+ * The other radios sharing `node`'s group inside `container`.
+ *
+ * @param {HTMLElement} node
+ * @param {Element | null} container
+ * @returns {HTMLElement[]}
+ */
+export function radioGroupPeers(node, container) {
+	const name = radioName(node);
+	if (name === null || !container) return [];
+	return [
+		.../** @type {NodeListOf<HTMLElement>} */ (container.querySelectorAll('input[type="radio"]')),
+	].filter((peer) => peer !== node && radioName(peer) === name);
 }
 /**

package/dist/components/molecules/Accordion.svelte CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -60,6 +60,7 @@
 		size = 'md',
 		shape = 'square',
 		surface = 'base',
+		font = 'mono',
 		hotkey,
 		showHotkey = false,
 		grow = false,
@@ -106,6 +107,8 @@
 		shape?: 'square' | 'pill';
 		/** Theme-aware surface shade of the bar (mirrors Card). */
 		surface?: 'base' | 'raised' | 'sunken';
+		/** Typeface of the typed text and placeholder; `sans` for plain search boxes. */
+		font?: 'mono' | 'sans';
 		/** Key (e.g. `'/'`) that focuses the input when pressed outside an editable
 		 *  element and without modifiers. */
 		hotkey?: string;
@@ -145,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);
@@ -360,6 +365,7 @@
 	class:surface-raised={surface === 'raised'}
 	class:surface-sunken={surface === 'sunken'}
 	class:fi--grow={grow}
+	class:fi--sans={font === 'sans'}
 	data-tsu="FilterInput"
 >
 	<div class="fi__bar">
@@ -374,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}
@@ -416,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={() => {
@@ -532,6 +545,9 @@
 			font-size: max(16px, var(--fs-sm));
 		}
 	}
+	.fi--sans .fi__input {
+		font-family: var(--font-sans);
+	}
 	.fi__input::placeholder {
 		color: var(--text-faint);
 	}

package/dist/components/molecules/FilterInput.svelte.d.ts CHANGED Viewed

@@ -54,6 +54,8 @@ type Own = {
     shape?: 'square' | 'pill';
     /** Theme-aware surface shade of the bar (mirrors Card). */
     surface?: 'base' | 'raised' | 'sunken';
+    /** Typeface of the typed text and placeholder; `sans` for plain search boxes. */
+    font?: 'mono' | 'sans';
     /** Key (e.g. `'/'`) that focuses the input when pressed outside an editable
      *  element and without modifiers. */
     hotkey?: string;

package/dist/components/molecules/Metric.svelte CHANGED Viewed

@@ -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;