@dorsk/tsumikit 0.72.0 → 0.73.1

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);
 	}
 

package/dist/components/molecules/SectionHeader.svelte

@@ -4,7 +4,7 @@
 	// swatch and right-aligned actions on one wrapping row. `divider` underlines
 	// it, `sticky` pins it under the app header and publishes its height as
 	// `--section-header-h` on the parent so sibling sticky content can offset
-	// itself. `collapsible` turns the title into a disclosure button that
+	// itself. `collapsible` puts a disclosure button inside the heading that
 	// toggles the `children` block rendered beneath. `variant="group"` is the
 	// non-wrapping list-group row: `lead` · title · count · flexible rule · actions.
 	import type { Snippet } from 'svelte';
@@ -90,16 +90,7 @@
 >
 	<div class="sh-row">
 		{#if collapsible}
-			<button
-				type="button"
-				class="sh-toggle"
-				aria-expanded={open}
-				aria-controls={panelId}
-				onclick={() => (open = !open)}
-			>
-				<Icon name="chevron-right" class="sh-chevron" />
-				{@render head()}
-			</button>
+			<span class="sh-head">{@render head()}</span>
 		{:else}
 			{@render head()}
 		{/if}
@@ -125,10 +116,28 @@
 	{#if hue !== undefined}
 		<span class="sh-swatch" style:--sh-hue={hue} aria-hidden="true"></span>
 	{/if}
-	{#if icon}
-		<span class="sh-icon" aria-hidden="true"><Icon name={icon} /></span>
+	{#if collapsible}
+		<Heading {level} {size} class="sh-title">
+			<button
+				type="button"
+				class="sh-toggle"
+				aria-expanded={open}
+				aria-controls={open ? panelId : undefined}
+				onclick={() => (open = !open)}
+			>
+				<Icon name="chevron-right" class="sh-chevron" />
+				{#if icon}
+					<span class="sh-icon" aria-hidden="true"><Icon name={icon} /></span>
+				{/if}
+				{text}
+			</button>
+		</Heading>
+	{:else}
+		{#if icon}
+			<span class="sh-icon" aria-hidden="true"><Icon name={icon} /></span>
+		{/if}
+		<Heading {level} {size} class="sh-title">{text}</Heading>
 	{/if}
-	<Heading {level} {size} class="sh-title">{text}</Heading>
 	{#if count !== undefined}
 		<Text tone="faint" weight="normal" numeric class="sh-count">{count}</Text>
 	{/if}
@@ -233,6 +242,12 @@
 		gap: var(--sp-2);
 		margin-inline-start: auto;
 	}
+	.sh-head {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--sp-2);
+		min-width: 0;
+	}
 	.sh-toggle {
 		display: inline-flex;
 		align-items: center;

package/dist/components/molecules/SeekSlider.svelte

@@ -0,0 +1,370 @@
+<script lang="ts">
+	/**
+	 * Media scrubber. Dragging previews (`oninput`) without seeking; the player
+	 * seeks only on `onchange`, fired once per release or keyboard step. The
+	 * hit slab is tall enough for touch while the visible track stays thin.
+	 */
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { describeMediaTime, formatMediaTime, isLiveDuration } from '../../media-time';
+
+	type Own = {
+		/** Position in seconds. Updated only on commit, never while dragging. */
+		value?: number;
+		/** Duration in seconds. `null`/`Infinity`/`0` = live or unknown: the track is disabled. */
+		max?: number | null;
+		/** Buffered `[start, end]` ranges in seconds, drawn as a muted fill. */
+		buffered?: [number, number][];
+		/** Seconds per arrow key. */
+		step?: number;
+		/** Fraction of the duration per PageUp/PageDown. */
+		bigStep?: number;
+		disabled?: boolean;
+		size?: 'sm' | 'md';
+		label?: string;
+		formatTime?: (seconds: number, ref?: number) => string;
+		/** Fired on every pointer move while scrubbing with the previewed time. */
+		oninput?: (seconds: number) => void;
+		/** Fired once on release or per keyboard step with the committed time. */
+		onchange?: (seconds: number) => void;
+		onscrubstart?: () => void;
+		onscrubend?: () => void;
+		/** Rendered above the time in the hover/drag tooltip (thumbnail). */
+		previewSnippet?: Snippet<[number]>;
+		class?: string;
+		style?: string;
+	};
+
+	let {
+		value = $bindable(0),
+		max = null,
+		buffered = [],
+		step = 5,
+		bigStep = 0.1,
+		disabled = false,
+		size = 'md',
+		label = 'Seek',
+		formatTime = formatMediaTime,
+		oninput,
+		onchange,
+		onscrubstart,
+		onscrubend,
+		previewSnippet,
+		class: klass = '',
+		style: styleProp,
+		...rest
+	}: Omit<HTMLAttributes<HTMLDivElement>, keyof Own> & Own = $props();
+
+	let dragging = $state(false);
+	let preview = $state(0);
+	let hoverFrac = $state<number | null>(null);
+	let pointerId: number | null = null;
+
+	const live = $derived(isLiveDuration(max));
+	const duration = $derived(live ? 0 : (max as number));
+	const inert = $derived(disabled || live);
+	const clamp = (v: number) => (live ? Math.max(0, v) : Math.min(duration, Math.max(0, v)));
+	const shown = $derived(clamp(dragging ? preview : value));
+	const frac = (v: number) => (duration > 0 ? clamp(v) / duration : 0);
+	const pct = $derived(frac(shown) * 100);
+	const tipValue = $derived(dragging ? shown : hoverFrac === null ? null : hoverFrac * duration);
+	const tipPct = $derived(tipValue === null ? 0 : frac(tipValue) * 100);
+	const ranges = $derived(
+		live
+			? []
+			: buffered
+					.map(([a, b]) => [frac(a), frac(b)] as const)
+					.filter(([a, b]) => b > a)
+	);
+	const valueText = $derived(describeMediaTime(shown, live ? null : duration, formatTime));
+
+	function fracAt(el: HTMLElement, clientX: number) {
+		const r = el.getBoundingClientRect();
+		if (!r.width) return 0;
+		let f = (clientX - r.left) / r.width;
+		if (getComputedStyle(el).direction === 'rtl') f = 1 - f;
+		return Math.min(1, Math.max(0, f));
+	}
+
+	function commit(v: number) {
+		const next = clamp(v);
+		value = next;
+		onchange?.(next);
+	}
+
+	function endDrag(el: HTMLElement, fire: boolean) {
+		if (pointerId !== null && typeof el.releasePointerCapture === 'function') {
+			try {
+				el.releasePointerCapture(pointerId);
+			} catch {}
+		}
+		pointerId = null;
+		dragging = false;
+		onscrubend?.();
+		if (fire) commit(preview);
+	}
+
+	function onpointerdown(e: PointerEvent) {
+		if (inert || e.button !== 0 || pointerId !== null) return;
+		const el = e.currentTarget as HTMLElement;
+		e.preventDefault();
+		pointerId = e.pointerId;
+		dragging = true;
+		preview = fracAt(el, e.clientX) * duration;
+		if (typeof el.setPointerCapture === 'function') {
+			try {
+				el.setPointerCapture(e.pointerId);
+			} catch {}
+		}
+		el.focus?.({ preventScroll: true });
+		onscrubstart?.();
+		oninput?.(preview);
+	}
+
+	function onpointermove(e: PointerEvent) {
+		const el = e.currentTarget as HTMLElement;
+		if (pointerId === e.pointerId) {
+			preview = fracAt(el, e.clientX) * duration;
+			oninput?.(preview);
+			return;
+		}
+		if (inert || pointerId !== null) return;
+		hoverFrac = fracAt(el, e.clientX);
+	}
+
+	function onpointerup(e: PointerEvent) {
+		if (pointerId !== e.pointerId) return;
+		endDrag(e.currentTarget as HTMLElement, true);
+	}
+
+	function onpointercancel(e: PointerEvent) {
+		if (pointerId !== e.pointerId) return;
+		endDrag(e.currentTarget as HTMLElement, false);
+	}
+
+	function onlostpointercapture(e: PointerEvent) {
+		if (pointerId === null || pointerId !== e.pointerId) return;
+		pointerId = null;
+		dragging = false;
+		onscrubend?.();
+		commit(preview);
+	}
+
+	function onpointerleave() {
+		hoverFrac = null;
+	}
+
+	function onkeydown(e: KeyboardEvent) {
+		if (inert) return;
+		const base = dragging ? preview : value;
+		let next: number | null = null;
+		switch (e.key) {
+			case 'ArrowRight':
+			case 'ArrowUp':
+				next = base + step;
+				break;
+			case 'ArrowLeft':
+			case 'ArrowDown':
+				next = base - step;
+				break;
+			case 'PageUp':
+				next = base + bigStep * duration;
+				break;
+			case 'PageDown':
+				next = base - bigStep * duration;
+				break;
+			case 'Home':
+				next = 0;
+				break;
+			case 'End':
+				next = duration;
+				break;
+		}
+		if (next === null) return;
+		e.preventDefault();
+		commit(next);
+	}
+</script>
+
+<div
+	data-tsu="SeekSlider"
+	class="seek seek--{size} {klass}"
+	class:seek--dragging={dragging}
+	class:seek--inert={inert}
+	class:seek--tip={tipValue !== null}
+	style="--pct: {pct}; --tip: {tipPct};{styleProp ?? ''}"
+	role="slider"
+	tabindex={inert ? -1 : 0}
+	aria-label={label}
+	aria-orientation="horizontal"
+	aria-valuemin={0}
+	aria-valuemax={duration}
+	aria-valuenow={shown}
+	aria-valuetext={valueText}
+	aria-disabled={inert ? 'true' : undefined}
+	{onpointerdown}
+	{onpointermove}
+	{onpointerup}
+	{onpointercancel}
+	{onlostpointercapture}
+	{onpointerleave}
+	{onkeydown}
+	{...rest}
+>
+	<span class="seek-track" data-part="track">
+		{#each ranges as [a, b], i (i)}
+			<i class="seek-buffered" data-part="buffered" style="--a: {a * 100}; --b: {b * 100}"></i>
+		{/each}
+		<i class="seek-played" data-part="played"></i>
+	</span>
+	<span class="seek-anchor seek-anchor--thumb" data-part="thumb-anchor">
+		<i class="seek-thumb" data-part="thumb"></i>
+	</span>
+	{#if tipValue !== null}
+		<span class="seek-anchor seek-anchor--tip" aria-hidden="true">
+			<span class="seek-tip" data-part="tip">
+				{#if previewSnippet}{@render previewSnippet(tipValue)}{/if}
+				<span class="seek-tip-time">{formatTime(tipValue, duration)}</span>
+			</span>
+		</span>
+	{/if}
+</div>
+
+<style>
+	.seek {
+		--seek-track: 3px;
+		--seek-track-active: 5px;
+		--seek-thumb: 12px;
+		--seek-slab: 1.25rem;
+		--seek-accent: var(--slider-accent, var(--accent));
+		position: relative;
+		display: block;
+		width: 100%;
+		min-height: var(--seek-slab);
+		cursor: pointer;
+		touch-action: none;
+		user-select: none;
+		-webkit-user-select: none;
+		outline: none;
+	}
+	.seek--md {
+		--seek-track: 4px;
+		--seek-track-active: 6px;
+		--seek-thumb: 14px;
+		--seek-slab: 1.5rem;
+	}
+	@media (pointer: coarse) {
+		.seek {
+			min-height: var(--touch-target-compact);
+		}
+	}
+	.seek--inert {
+		cursor: default;
+		opacity: 0.45;
+	}
+	.seek-track {
+		position: absolute;
+		inset-inline: 0;
+		top: 50%;
+		height: var(--seek-track);
+		margin-top: calc(var(--seek-track) / -2);
+		border-radius: var(--r-pill);
+		background: var(--bg-elevated-2);
+		overflow: hidden;
+		transition:
+			height 120ms var(--ease),
+			margin-top 120ms var(--ease);
+	}
+	.seek:hover .seek-track,
+	.seek:focus-visible .seek-track,
+	.seek--dragging .seek-track {
+		height: var(--seek-track-active);
+		margin-top: calc(var(--seek-track-active) / -2);
+	}
+	.seek--inert:hover .seek-track {
+		height: var(--seek-track);
+		margin-top: calc(var(--seek-track) / -2);
+	}
+	.seek-buffered,
+	.seek-played {
+		position: absolute;
+		inset-block: 0;
+		inset-inline-start: 0;
+	}
+	.seek-buffered {
+		inset-inline-start: calc(var(--a) * 1%);
+		width: calc((var(--b) - var(--a)) * 1%);
+		background: var(--border-strong);
+	}
+	.seek-played {
+		width: calc(var(--pct) * 1%);
+		background: var(--seek-accent);
+	}
+	.seek-anchor {
+		position: absolute;
+		top: 50%;
+		width: 0;
+		height: 0;
+		pointer-events: none;
+	}
+	.seek-anchor--thumb {
+		inset-inline-start: calc(var(--pct) * 1%);
+	}
+	.seek-anchor--tip {
+		inset-inline-start: calc(var(--tip) * 1%);
+	}
+	.seek-thumb {
+		position: absolute;
+		left: 0;
+		top: 0;
+		width: var(--seek-thumb);
+		height: var(--seek-thumb);
+		border-radius: 50%;
+		background: var(--seek-accent);
+		border: 2px solid var(--bg);
+		box-shadow: var(--shadow-sm);
+		transform: translate(-50%, -50%) scale(0.6);
+		opacity: 0;
+		transition:
+			opacity 120ms var(--ease),
+			transform 120ms var(--ease);
+	}
+	.seek:hover .seek-thumb,
+	.seek:focus-visible .seek-thumb,
+	.seek--dragging .seek-thumb {
+		opacity: 1;
+		transform: translate(-50%, -50%) scale(1);
+	}
+	.seek--inert .seek-thumb {
+		opacity: 0;
+	}
+	.seek:focus-visible .seek-thumb {
+		outline: var(--focus-ring);
+		outline-offset: 2px;
+	}
+	.seek-tip {
+		position: absolute;
+		left: 0;
+		bottom: calc(var(--seek-thumb) / 2 + var(--sp-2));
+		transform: translateX(-50%);
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: var(--sp-1);
+		padding: var(--sp-1) var(--sp-2);
+		border-radius: var(--r-sm);
+		background: var(--bg-elevated);
+		border: 1px solid var(--border);
+		box-shadow: var(--shadow-md);
+		color: var(--text);
+		font-size: var(--fs-xs);
+		font-variant-numeric: tabular-nums;
+		white-space: nowrap;
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.seek-track,
+		.seek-thumb {
+			transition: none;
+		}
+	}
+</style>

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

@@ -0,0 +1,37 @@
+/**
+     * Media scrubber. Dragging previews (`oninput`) without seeking; the player
+     * seeks only on `onchange`, fired once per release or keyboard step. The
+     * hit slab is tall enough for touch while the visible track stays thin.
+     */
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Own = {
+    /** Position in seconds. Updated only on commit, never while dragging. */
+    value?: number;
+    /** Duration in seconds. `null`/`Infinity`/`0` = live or unknown: the track is disabled. */
+    max?: number | null;
+    /** Buffered `[start, end]` ranges in seconds, drawn as a muted fill. */
+    buffered?: [number, number][];
+    /** Seconds per arrow key. */
+    step?: number;
+    /** Fraction of the duration per PageUp/PageDown. */
+    bigStep?: number;
+    disabled?: boolean;
+    size?: 'sm' | 'md';
+    label?: string;
+    formatTime?: (seconds: number, ref?: number) => string;
+    /** Fired on every pointer move while scrubbing with the previewed time. */
+    oninput?: (seconds: number) => void;
+    /** Fired once on release or per keyboard step with the committed time. */
+    onchange?: (seconds: number) => void;
+    onscrubstart?: () => void;
+    onscrubend?: () => void;
+    /** Rendered above the time in the hover/drag tooltip (thumbnail). */
+    previewSnippet?: Snippet<[number]>;
+    class?: string;
+    style?: string;
+};
+type $$ComponentProps = Omit<HTMLAttributes<HTMLDivElement>, keyof Own> & Own;
+declare const SeekSlider: import("svelte").Component<$$ComponentProps, {}, "value">;
+type SeekSlider = ReturnType<typeof SeekSlider>;
+export default SeekSlider;

package/dist/components/molecules/SegmentedControl.svelte

@@ -24,6 +24,7 @@
 	// browser-free keyboard model matches Tabs: ←/→ and Home/End move selection,
 	// Space/Enter (or click) activate. `value` is bindable.
 	import type { Snippet } from 'svelte';
+	import type { Attachment } from 'svelte/attachments';
 	import Icon from '../atoms/Icon.svelte';
 	import { formatSegmentCount } from './segmented-control-count.js';
 	import { nextEnabledSegment } from './segmented-control-keyboard.js';
@@ -88,19 +89,43 @@
 
 	let listEl = $state<HTMLDivElement | null>(null);
 	const baseId = `seg-${Math.random().toString(36).slice(2, 8)}`;
+	// The roving tab stop: the selected option, or the first enabled one when the
+	// selection is unknown or disabled, so the group never drops out of the Tab order.
+	const stop = $derived(
+		options.find((o) => o.value === value && !o.disabled) ?? options.find((o) => !o.disabled)
+	);
+	const segId = (val: string) => `${baseId}-${val}`;
+
+	// A pill wider than its container falls back to the `scroll` layout; the
+	// class is dropped again once the row fits so the touch slab stays unclipped.
+	let overflowing = $state(false);
+	const watchOverflow: Attachment<HTMLElement> = (node) => {
+		if (wrap || typeof ResizeObserver === 'undefined') {
+			overflowing = false;
+			return;
+		}
+		const check = () => {
+			overflowing = node.scrollWidth - node.clientWidth > 1;
+		};
+		const ro = new ResizeObserver(check);
+		ro.observe(node);
+		check();
+		return () => {
+			ro.disconnect();
+			overflowing = false;
+		};
+	};
 
 	function select(val: string, focus = false) {
 		if (options.find((o) => o.value === val)?.disabled) return;
 		value = val;
 		onchange?.(val);
 		if (focus) {
-			queueMicrotask(() =>
-				listEl?.querySelector<HTMLButtonElement>(`#${baseId}-${val}`)?.focus()
-			);
+			queueMicrotask(() => listEl?.ownerDocument.getElementById(segId(val))?.focus());
 		}
 	}
 	function onkeydown(e: KeyboardEvent) {
-		const i = options.findIndex((o) => o.value === value);
+		const i = stop ? options.indexOf(stop) : -1;
 		const next = nextEnabledSegment(options, i, e.key);
 		if (next === undefined) return;
 		e.preventDefault();
@@ -123,18 +148,20 @@
 	class:collapse-container={collapseLabels === 'container'}
 	class:seg-scroll={scroll}
 	class:seg-block={block}
+	class:seg-overflow={overflowing}
 	data-tsu="SegmentedControl"
 	{onkeydown}
+	{@attach watchOverflow}
 >
 	{#each options as o (o.value)}
 		{@const selected = value === o.value}
 		<button
 			type="button"
-			id="{baseId}-{o.value}"
+			id={segId(o.value)}
 			role="radio"
 			aria-checked={selected}
 			aria-label={variant === 'icon' && !o.label ? o.value : o.label}
-			tabindex={selected ? 0 : -1}
+			tabindex={stop?.value === o.value ? 0 : -1}
 			class="seg-item"
 			class:has-label={!!o.label}
 			class:selected
@@ -161,6 +188,8 @@
 		background: var(--bg-elevated-2);
 		border: 1px solid var(--border);
 		border-radius: var(--r-pill);
+		max-width: 100%;
+		min-width: 0;
 	}
 	.seg-icon {
 		border-radius: var(--r-md);
@@ -189,6 +218,19 @@
 	.seg-scroll .seg-item {
 		flex: none;
 	}
+	.seg-overflow {
+		flex-wrap: nowrap;
+		overflow-x: auto;
+		overflow-y: hidden;
+		scrollbar-width: none;
+		-webkit-overflow-scrolling: touch;
+	}
+	.seg-overflow::-webkit-scrollbar {
+		display: none;
+	}
+	.seg-overflow .seg-item {
+		flex: none;
+	}
 	.seg-block {
 		display: flex;
 		width: 100%;
@@ -196,6 +238,12 @@
 	.seg-block .seg-item {
 		flex: 1 1 0;
 		justify-content: center;
+		min-width: 0;
+	}
+	.seg-block .seg-label {
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
 	}
 
 	.seg-item {