@dorsk/tsumikit 0.71.0 → 0.73.0

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/PullToRefresh.svelte

@@ -0,0 +1,205 @@
+<script lang="ts">
+	// Pull-down-to-refresh scroll container. The pull only starts from
+	// `scrollTop === 0` with a touch or pen pointer, the distance is damped so
+	// the indicator asymptotically approaches twice the threshold, and a release
+	// past the threshold awaits `onrefresh` while a Spinner holds the slot.
+	// Mouse and keyboard users refresh through the page's own control.
+	import type { Snippet } from 'svelte';
+	import Icon from '../atoms/Icon.svelte';
+	import Spinner from '../atoms/Spinner.svelte';
+
+	let {
+		children,
+		onrefresh,
+		threshold = 72,
+		label = 'Refreshing…',
+		pullLabel = 'Pull to refresh',
+		releaseLabel = 'Release to refresh',
+		disabled = false,
+		class: klass = '',
+		...rest
+	}: {
+		children?: Snippet;
+		/** Awaited after a release past the threshold; the spinner shows until it settles. */
+		onrefresh?: () => Promise<void> | void;
+		/** Damped pull distance (px) that arms the refresh. */
+		threshold?: number;
+		/** Announced through the live region while `onrefresh` is pending. */
+		label?: string;
+		pullLabel?: string;
+		releaseLabel?: string;
+		disabled?: boolean;
+		class?: string;
+		[key: string]: unknown;
+	} = $props();
+
+	const SLOP = 6;
+
+	let scroller: HTMLElement | undefined;
+	let offset = $state(0);
+	let pending = $state(false);
+	let pulling = $state(false);
+	let press: { id: number; y: number } | null = null;
+
+	const ready = $derived(pulling && offset >= threshold);
+	const phase = $derived(pending ? 'refreshing' : ready ? 'ready' : pulling ? 'pulling' : 'idle');
+	const progress = $derived(Math.min(1, offset / Math.max(1, threshold)));
+
+	function damp(dy: number) {
+		const max = threshold * 2;
+		return max * (1 - Math.exp(-dy / max));
+	}
+
+	function onpointerdown(e: PointerEvent) {
+		if (disabled || pending || press) return;
+		if (e.pointerType !== 'touch' && e.pointerType !== 'pen') return;
+		if (!scroller || scroller.scrollTop > 0) return;
+		press = { id: e.pointerId, y: e.clientY };
+		addEventListener('pointermove', onpointermove);
+		addEventListener('pointerup', onpointerup);
+		addEventListener('pointercancel', onpointercancel);
+	}
+
+	function onpointermove(e: PointerEvent) {
+		if (!press || e.pointerId !== press.id) return;
+		const dy = e.clientY - press.y;
+		if (!pulling) {
+			if (dy < -SLOP || (scroller && scroller.scrollTop > 0)) return release();
+			if (dy < SLOP) return;
+			pulling = true;
+		}
+		offset = dy > 0 ? damp(dy) : 0;
+	}
+
+	function onpointerup(e: PointerEvent) {
+		if (!press || e.pointerId !== press.id) return;
+		const fire = ready;
+		release();
+		if (fire) void refresh();
+	}
+
+	function onpointercancel(e: PointerEvent) {
+		if (!press || e.pointerId !== press.id) return;
+		release();
+	}
+
+	function release() {
+		press = null;
+		pulling = false;
+		if (!pending) offset = 0;
+		removeEventListener('pointermove', onpointermove);
+		removeEventListener('pointerup', onpointerup);
+		removeEventListener('pointercancel', onpointercancel);
+	}
+
+	async function refresh() {
+		if (pending) return;
+		pending = true;
+		offset = threshold;
+		try {
+			await onrefresh?.();
+		} finally {
+			pending = false;
+			offset = 0;
+		}
+	}
+
+	function scrollRoot(el: HTMLElement) {
+		scroller = el;
+		const block = (e: TouchEvent) => {
+			if (pulling) e.preventDefault();
+		};
+		el.addEventListener('touchmove', block, { passive: false });
+		return () => {
+			el.removeEventListener('touchmove', block);
+			release();
+			scroller = undefined;
+		};
+	}
+</script>
+
+<div
+	data-tsu="PullToRefresh"
+	data-state={phase}
+	class="ptr {klass}"
+	class:pulling
+	class:pending
+	style:--ptr-offset="{offset}px"
+	style:--ptr-progress={progress}
+	aria-busy={pending || undefined}
+	{onpointerdown}
+	{@attach scrollRoot}
+	{...rest}
+>
+	<div class="ptr-indicator" aria-hidden="true">
+		{#if pending}
+			<Spinner label={undefined} />
+		{:else}
+			<Icon name="arrow-down" class="ptr-arrow" />
+		{/if}
+	</div>
+	<div class="ptr-status sr-only" role="status" aria-live="polite">
+		{#if pending}{label}{:else if ready}{releaseLabel}{:else if pulling}{pullLabel}{/if}
+	</div>
+	<div class="ptr-content">
+		{@render children?.()}
+	</div>
+</div>
+
+<style>
+	.ptr {
+		position: relative;
+		overflow-y: auto;
+		overscroll-behavior-y: contain;
+		-webkit-overflow-scrolling: touch;
+		touch-action: pan-y;
+	}
+	.ptr-content {
+		translate: 0 var(--ptr-offset, 0px);
+		transition: translate 200ms var(--ease);
+	}
+	.pulling .ptr-content {
+		transition: none;
+	}
+	.ptr-indicator {
+		position: absolute;
+		inset: 0 0 auto;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: var(--ptr-offset, 0px);
+		overflow: hidden;
+		color: var(--text-muted);
+		opacity: var(--ptr-progress, 0);
+		transition: height 200ms var(--ease);
+		pointer-events: none;
+	}
+	.pulling .ptr-indicator {
+		transition: none;
+	}
+	.ptr-indicator :global(.ptr-arrow) {
+		rotate: calc(180deg * var(--ptr-progress, 0));
+		transition: rotate 150ms var(--ease);
+	}
+	.pending .ptr-indicator {
+		color: var(--accent);
+	}
+	.sr-only {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		overflow: hidden;
+		clip: rect(0 0 0 0);
+		white-space: nowrap;
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.ptr-content,
+		.ptr-indicator,
+		.ptr-indicator :global(.ptr-arrow) {
+			transition: none;
+		}
+		.ptr-indicator :global(.ptr-arrow) {
+			rotate: none;
+		}
+	}
+</style>

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

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    children?: Snippet;
+    /** Awaited after a release past the threshold; the spinner shows until it settles. */
+    onrefresh?: () => Promise<void> | void;
+    /** Damped pull distance (px) that arms the refresh. */
+    threshold?: number;
+    /** Announced through the live region while `onrefresh` is pending. */
+    label?: string;
+    pullLabel?: string;
+    releaseLabel?: string;
+    disabled?: boolean;
+    class?: string;
+    [key: string]: unknown;
+};
+declare const PullToRefresh: import("svelte").Component<$$ComponentProps, {}, "">;
+type PullToRefresh = ReturnType<typeof PullToRefresh>;
+export default PullToRefresh;

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;