@dorsk/tsumikit 0.71.0 → 0.72.0

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

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

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

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

@@ -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/FilterInput.svelte

@@ -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;
@@ -360,6 +363,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">
@@ -532,6 +536,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

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