@dorsk/tsumikit 0.70.0 → 0.72.0

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

@@ -179,6 +179,7 @@
 		flex-wrap: nowrap;
 		max-width: 100%;
 		overflow-x: auto;
+		overflow-y: hidden;
 		scrollbar-width: none;
 		-webkit-overflow-scrolling: touch;
 	}
@@ -244,6 +245,37 @@
 	.seg-box .seg-item {
 		height: 100%;
 	}
+	/* Wrapped rows size to their content; each item keeps the one-row height. */
+	.seg-wrap.seg-sm,
+	.seg-wrap.seg-control,
+	.seg-wrap.seg-box {
+		height: auto;
+	}
+	.seg-wrap.seg-sm .seg-item {
+		height: auto;
+		min-height: calc(var(--control-height-compact) - 8px);
+	}
+	.seg-wrap.seg-control .seg-item {
+		height: auto;
+		min-height: calc(var(--control-height) - 8px);
+	}
+	.seg-wrap.seg-box .seg-item {
+		height: auto;
+		min-height: calc(var(--control-height-default) - 8px);
+	}
+	/* Capped at half a row: one row stays a pill, extra rows square the corners. */
+	.seg-wrap:not(.seg-icon) {
+		border-radius: calc((0.6rem + 1.3 * var(--fs-sm)) / 2 + 4px);
+	}
+	.seg-wrap.seg-sm:not(.seg-icon) {
+		border-radius: calc(var(--control-height-compact) / 2);
+	}
+	.seg-wrap.seg-control:not(.seg-icon) {
+		border-radius: calc(var(--control-height) / 2);
+	}
+	.seg-wrap.seg-box:not(.seg-icon) {
+		border-radius: calc(var(--control-height-default) / 2);
+	}
 	.seg-icon .seg-item {
 		gap: 0;
 		padding: 0.35rem;
@@ -320,13 +352,24 @@
 		border-radius: var(--r-pill);
 		background: var(--bg-elevated-2);
 		color: var(--text-faint);
-		font-size: 0.6875rem;
+		font-size: var(--fs-xs);
 		font-weight: var(--fw-semibold);
 		font-variant-numeric: tabular-nums;
 		transition:
 			background 0.12s var(--ease),
 			color 0.12s var(--ease);
 	}
+	@media (pointer: coarse) {
+		.seg-item {
+			position: relative;
+		}
+		.seg-item::before {
+			content: '';
+			position: absolute;
+			inset-block: var(--touch-slab);
+			inset-inline: calc(var(--sp-1) / -2);
+		}
+	}
 	.seg-item.selected .seg-count {
 		background: color-mix(in srgb, var(--accent) 18%, transparent);
 		color: var(--accent);

package/dist/components/molecules/SwipeRow.svelte

@@ -0,0 +1,349 @@
+<script lang="ts" module>
+	import type { IconName } from '../atoms/Icon.svelte';
+	import type { Tone } from '../../tone';
+
+	export interface SwipeAction {
+		label: string;
+		icon?: IconName;
+		tone?: Tone;
+		onaction: () => void;
+	}
+</script>
+
+<script lang="ts">
+	/**
+	 * List row with a hidden action on each side, revealed by a horizontal swipe.
+	 * A swipe past `threshold` (fraction of the row width) fires the action on
+	 * release; a shorter one snaps back. The axis is locked after a few pixels:
+	 * a drag that is more vertical than horizontal is left to the scroller.
+	 * The same actions are reachable as visually hidden buttons for keyboard
+	 * and screen-reader users.
+	 */
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import Icon from '../atoms/Icon.svelte';
+	import { canonicalTone } from '../../tone';
+
+	type Own = {
+		children: Snippet;
+		/** Revealed on a rightward swipe. */
+		leadingAction?: SwipeAction;
+		/** Revealed on a leftward swipe. */
+		trailingAction?: SwipeAction;
+		/** Custom pane content; defaults to the action's icon and label. */
+		leading?: Snippet<[SwipeAction, boolean]>;
+		trailing?: Snippet<[SwipeAction, boolean]>;
+		/** Fraction of the row width the content must travel to fire. */
+		threshold?: number;
+		disabled?: boolean;
+		class?: string;
+		style?: string;
+	};
+
+	let {
+		children,
+		leadingAction,
+		trailingAction,
+		leading,
+		trailing,
+		threshold = 0.35,
+		disabled = false,
+		class: klass = '',
+		style: styleProp,
+		...rest
+	}: Omit<HTMLAttributes<HTMLDivElement>, keyof Own> & Own = $props();
+
+	const SLOP = 8;
+	const FALLBACK_WIDTH = 320;
+
+	let offset = $state(0);
+	let dragging = $state(false);
+	let settling = $state(false);
+
+	let pointerId: number | null = null;
+	let startX = 0;
+	let startY = 0;
+	let width = $state(0);
+	let locked: 'x' | 'y' | null = null;
+	let swallowClick = false;
+	let settleTimer: ReturnType<typeof setTimeout> | undefined;
+
+	const armed = $derived(width > 0 && Math.abs(offset) >= width * threshold);
+	const side = $derived(offset > 0 ? 'leading' : offset < 0 ? 'trailing' : null);
+	const active = $derived(side === 'leading' ? leadingAction : side === 'trailing' ? trailingAction : undefined);
+	const tone = $derived(canonicalTone(active?.tone ?? 'neutral'));
+
+	function reducedMotion() {
+		return typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches;
+	}
+
+	function release(el: HTMLElement) {
+		if (pointerId !== null && typeof el.releasePointerCapture === 'function') {
+			try {
+				el.releasePointerCapture(pointerId);
+			} catch {}
+		}
+		pointerId = null;
+		locked = null;
+		dragging = false;
+	}
+
+	function settle() {
+		clearTimeout(settleTimer);
+		if (reducedMotion()) {
+			offset = 0;
+			return;
+		}
+		settling = true;
+		offset = 0;
+		settleTimer = setTimeout(() => (settling = false), 220);
+	}
+
+	function onpointerdown(e: PointerEvent) {
+		swallowClick = false;
+		if (disabled || e.button !== 0 || pointerId !== null) return;
+		if (!leadingAction && !trailingAction) return;
+		const el = e.currentTarget as HTMLElement;
+		pointerId = e.pointerId;
+		startX = e.clientX;
+		startY = e.clientY;
+		width = el.clientWidth || FALLBACK_WIDTH;
+		locked = null;
+		clearTimeout(settleTimer);
+		settling = false;
+	}
+
+	function onpointermove(e: PointerEvent) {
+		if (pointerId !== e.pointerId) return;
+		const el = e.currentTarget as HTMLElement;
+		const dx = e.clientX - startX;
+		const dy = e.clientY - startY;
+		if (locked === null) {
+			if (Math.hypot(dx, dy) < SLOP) return;
+			if (Math.abs(dy) >= Math.abs(dx)) {
+				locked = 'y';
+				release(el);
+				return;
+			}
+			locked = 'x';
+			dragging = true;
+			swallowClick = true;
+			if (typeof el.setPointerCapture === 'function') {
+				try {
+					el.setPointerCapture(e.pointerId);
+				} catch {}
+			}
+		}
+		if (locked !== 'x') return;
+		const max = leadingAction ? width : 0;
+		const min = trailingAction ? -width : 0;
+		offset = Math.max(min, Math.min(max, dx));
+	}
+
+	function onpointerup(e: PointerEvent) {
+		if (pointerId !== e.pointerId) return;
+		const el = e.currentTarget as HTMLElement;
+		const fire = locked === 'x' && armed ? active : undefined;
+		release(el);
+		settle();
+		fire?.onaction();
+	}
+
+	function onpointercancel(e: PointerEvent) {
+		if (pointerId !== e.pointerId) return;
+		release(e.currentTarget as HTMLElement);
+		settle();
+	}
+
+	function onclickcapture(e: MouseEvent) {
+		if (!swallowClick) return;
+		swallowClick = false;
+		e.stopPropagation();
+		e.preventDefault();
+	}
+
+	function onlostpointercapture() {
+		if (pointerId === null) return;
+		pointerId = null;
+		locked = null;
+		dragging = false;
+		settle();
+	}
+</script>
+
+<div
+	data-tsu="SwipeRow"
+	class="swiperow {klass}"
+	class:swiperow--dragging={dragging}
+	class:swiperow--settling={settling}
+	class:swiperow--armed={armed}
+	class:swiperow--leading={side === 'leading'}
+	class:swiperow--trailing={side === 'trailing'}
+	class:swiperow-tone-accent={tone === 'accent'}
+	class:swiperow-tone-success={tone === 'ok'}
+	class:swiperow-tone-info={tone === 'info'}
+	class:swiperow-tone-warn={tone === 'warn'}
+	class:swiperow-tone-danger={tone === 'danger'}
+	style="--swiperow-x: {offset}px;{styleProp ?? ''}"
+	{onpointerdown}
+	{onpointermove}
+	{onpointerup}
+	{onpointercancel}
+	{onlostpointercapture}
+	{onclickcapture}
+	{...rest}
+>
+	{#if leadingAction}
+		<div class="swiperow-pane swiperow-pane--leading" aria-hidden="true" data-part="leading">
+			{#if leading}
+				{@render leading(leadingAction, side === 'leading' && armed)}
+			{:else}
+				{#if leadingAction.icon}<Icon name={leadingAction.icon} />{/if}
+				<span class="swiperow-pane-label">{leadingAction.label}</span>
+			{/if}
+		</div>
+	{/if}
+	{#if trailingAction}
+		<div class="swiperow-pane swiperow-pane--trailing" aria-hidden="true" data-part="trailing">
+			{#if trailing}
+				{@render trailing(trailingAction, side === 'trailing' && armed)}
+			{:else}
+				{#if trailingAction.icon}<Icon name={trailingAction.icon} />{/if}
+				<span class="swiperow-pane-label">{trailingAction.label}</span>
+			{/if}
+		</div>
+	{/if}
+	<div class="swiperow-content" data-part="content">
+		{@render children()}
+	</div>
+	{#if leadingAction || trailingAction}
+		<div class="swiperow-actions" data-part="actions">
+			{#if leadingAction}
+				<button type="button" class="swiperow-sr" data-part="leading-button" {disabled} onclick={() => leadingAction?.onaction()}>
+					{leadingAction.label}
+				</button>
+			{/if}
+			{#if trailingAction}
+				<button type="button" class="swiperow-sr" data-part="trailing-button" {disabled} onclick={() => trailingAction?.onaction()}>
+					{trailingAction.label}
+				</button>
+			{/if}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.swiperow {
+		--swiperow-tone: var(--bg-elevated-2);
+		--swiperow-ink: var(--text);
+		position: relative;
+		overflow: hidden;
+		touch-action: pan-y;
+		user-select: none;
+		-webkit-user-select: none;
+	}
+	.swiperow-tone-accent {
+		--swiperow-tone: var(--accent);
+		--swiperow-ink: var(--text-on-accent);
+	}
+	.swiperow-tone-success {
+		--swiperow-tone: var(--ok);
+		--swiperow-ink: var(--bg);
+	}
+	.swiperow-tone-info {
+		--swiperow-tone: var(--info);
+		--swiperow-ink: var(--bg);
+	}
+	.swiperow-tone-warn {
+		--swiperow-tone: var(--warn);
+		--swiperow-ink: var(--bg);
+	}
+	.swiperow-tone-danger {
+		--swiperow-tone: var(--danger);
+		--swiperow-ink: var(--bg);
+	}
+	.swiperow-pane {
+		position: absolute;
+		inset: 0;
+		display: flex;
+		align-items: center;
+		gap: var(--sp-2);
+		padding: 0 var(--sp-4);
+		background: var(--swiperow-tone);
+		color: var(--swiperow-ink);
+		font-size: var(--fs-sm);
+		font-weight: 600;
+		visibility: hidden;
+		pointer-events: none;
+	}
+	.swiperow-pane--leading {
+		justify-content: flex-start;
+	}
+	.swiperow-pane--trailing {
+		justify-content: flex-end;
+	}
+	.swiperow--leading .swiperow-pane--leading,
+	.swiperow--trailing .swiperow-pane--trailing {
+		visibility: visible;
+	}
+	.swiperow-pane :global(svg) {
+		transition: transform 120ms var(--ease);
+	}
+	.swiperow--armed .swiperow-pane :global(svg) {
+		transform: scale(1.2);
+	}
+	.swiperow-content {
+		position: relative;
+		background: var(--bg);
+		transform: translate3d(var(--swiperow-x), 0, 0);
+		will-change: transform;
+	}
+	.swiperow--settling .swiperow-content {
+		transition: transform 200ms var(--ease);
+	}
+	.swiperow--dragging .swiperow-content {
+		cursor: grabbing;
+	}
+	.swiperow-actions {
+		position: absolute;
+		inset: 0 0 0 auto;
+		display: flex;
+		align-items: center;
+		gap: var(--sp-1);
+		padding: 0 var(--sp-2);
+		pointer-events: none;
+	}
+	.swiperow-sr {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		padding: 0;
+		margin: -1px;
+		overflow: hidden;
+		clip: rect(0, 0, 0, 0);
+		white-space: nowrap;
+		border: 0;
+	}
+	.swiperow-sr:focus-visible {
+		position: static;
+		width: auto;
+		height: auto;
+		margin: 0;
+		padding: var(--sp-1) var(--sp-2);
+		clip: auto;
+		pointer-events: auto;
+		font: inherit;
+		font-size: var(--fs-sm);
+		color: var(--swiperow-ink);
+		background: var(--swiperow-tone);
+		border-radius: var(--r-sm);
+		outline: 2px solid var(--accent);
+		outline-offset: 1px;
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.swiperow--settling .swiperow-content,
+		.swiperow-pane :global(svg) {
+			transition: none;
+		}
+	}
+</style>

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

@@ -0,0 +1,37 @@
+import type { IconName } from '../atoms/Icon.svelte';
+import type { Tone } from '../../tone';
+export interface SwipeAction {
+    label: string;
+    icon?: IconName;
+    tone?: Tone;
+    onaction: () => void;
+}
+/**
+     * List row with a hidden action on each side, revealed by a horizontal swipe.
+     * A swipe past `threshold` (fraction of the row width) fires the action on
+     * release; a shorter one snaps back. The axis is locked after a few pixels:
+     * a drag that is more vertical than horizontal is left to the scroller.
+     * The same actions are reachable as visually hidden buttons for keyboard
+     * and screen-reader users.
+     */
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Own = {
+    children: Snippet;
+    /** Revealed on a rightward swipe. */
+    leadingAction?: SwipeAction;
+    /** Revealed on a leftward swipe. */
+    trailingAction?: SwipeAction;
+    /** Custom pane content; defaults to the action's icon and label. */
+    leading?: Snippet<[SwipeAction, boolean]>;
+    trailing?: Snippet<[SwipeAction, boolean]>;
+    /** Fraction of the row width the content must travel to fire. */
+    threshold?: number;
+    disabled?: boolean;
+    class?: string;
+    style?: string;
+};
+type $$ComponentProps = Omit<HTMLAttributes<HTMLDivElement>, keyof Own> & Own;
+declare const SwipeRow: import("svelte").Component<$$ComponentProps, {}, "">;
+type SwipeRow = ReturnType<typeof SwipeRow>;
+export default SwipeRow;

package/dist/components/molecules/Toggle.svelte

@@ -108,4 +108,16 @@
 	.toggle.struck {
 		text-decoration: line-through;
 	}
+	@media (pointer: coarse) {
+		.toggle {
+			position: relative;
+		}
+		.toggle::before {
+			content: '';
+			position: absolute;
+			inset-block: var(--touch-slab);
+			inset-inline-start: var(--touch-slab);
+			inset-inline-end: 0;
+		}
+	}
 </style>

package/dist/components/organisms/ConversationFeed.svelte

@@ -17,6 +17,7 @@
 		loadMoreLabel = 'Load older',
 		follow = true,
 		jumpLabel = 'Jump to latest',
+		label = 'Messages',
 		class: klass = '',
 		style: styleProp = ''
 	}: {
@@ -32,6 +33,8 @@
 		/** Stick to the bottom while the user is at the bottom. */
 		follow?: boolean;
 		jumpLabel?: string;
+		/** Accessible name of the message log. */
+		label?: string;
 		class?: string;
 		style?: string;
 	} = $props();
@@ -41,9 +44,10 @@
 	let scroller = $state<HTMLElement | null>(null);
 	let stuck = $state(true);
 	let pending = $state(false);
+	// Keeps screen readers from announcing a history load or swap as new messages.
+	let busy = $state(false);
 	let prevFirst: string | number | undefined;
 	let prevLast: string | number | undefined;
-	let prevLength = 0;
 
 	const atBottom = (el: HTMLElement) => el.scrollHeight - el.scrollTop - el.clientHeight <= THRESHOLD;
 
@@ -64,17 +68,26 @@
 		const el = scroller;
 		const first = items.length ? key(items[0]) : undefined;
 		const last = items.length ? key(items[items.length - 1]) : undefined;
-		const length = items.length;
 		if (!el) return;
-		const prepended = prevFirst !== undefined && first !== prevFirst && length > prevLength;
-		const appended = last !== undefined && last !== prevLast;
+		const keys = prevFirst === undefined ? null : new Set(items.map(key));
+		const kept = (k: string | number | undefined) => k !== undefined && keys !== null && keys.has(k);
+		const prepended = first !== prevFirst && last === prevLast && kept(prevFirst);
+		const reset = prevLast !== undefined && !kept(prevLast) && !kept(prevFirst);
+		const appended = !reset && last !== undefined && last !== prevLast;
 		prevFirst = first;
 		prevLast = last;
-		prevLength = length;
 		const fromBottom = el.scrollHeight - el.scrollTop;
+		if (prepended || reset) {
+			busy = true;
+			requestAnimationFrame(() => requestAnimationFrame(() => (busy = false)));
+		}
 		tick().then(() => {
 			if (prepended) {
 				el.scrollTop = el.scrollHeight - fromBottom;
+			} else if (reset) {
+				pending = false;
+				if (untrack(() => follow)) scrollToBottom();
+				else el.scrollTop = 0;
 			} else if (appended) {
 				if (untrack(() => follow && stuck)) scrollToBottom();
 				else pending = true;
@@ -100,7 +113,7 @@
 		{#if items.length === 0 && empty}
 			{@render empty()}
 		{/if}
-		<div class="feed-items" {@attach pin}>
+		<div class="feed-items" role="log" aria-label={label} aria-busy={busy} {@attach pin}>
 			{#each items as entry, i (key(entry))}
 				{@render item(entry, i)}
 			{/each}
@@ -138,9 +151,10 @@
 	}
 	.jump {
 		position: absolute;
-		inset-inline-start: 50%;
+		inset-inline: 0;
 		bottom: var(--sp-3);
-		transform: translateX(-50%);
+		width: fit-content;
+		margin-inline: auto;
 		z-index: 1;
 		border-radius: var(--r-pill);
 		box-shadow: var(--shadow-md);

package/dist/components/organisms/ConversationFeed.svelte.d.ts

@@ -13,6 +13,8 @@ declare function $$render<T>(): {
         /** Stick to the bottom while the user is at the bottom. */
         follow?: boolean;
         jumpLabel?: string;
+        /** Accessible name of the message log. */
+        label?: string;
         class?: string;
         style?: string;
     };