@dorsk/tsumikit 0.71.0 → 0.73.0

package/dist/components/atoms/TimeDisplay.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+	/**
+	 * "1:02 / 23:45" readout with tabular numbers. Clicking it shows the
+	 * remaining time instead ("-22:43 / 23:45"). Live or unknown durations
+	 * render the position only and cannot be toggled.
+	 */
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { formatMediaTime, isLiveDuration } from '../../media-time';
+
+	type Own = {
+		/** Position in seconds. */
+		current?: number;
+		/** Duration in seconds; `null`/`Infinity` = live or unknown. */
+		duration?: number | null;
+		/** Show time left instead of the position. */
+		remaining?: boolean;
+		/** Allow clicking to toggle `remaining`. */
+		toggle?: boolean;
+		size?: 'sm' | 'md';
+		formatTime?: (seconds: number, ref?: number) => string;
+		toggleLabel?: string;
+		class?: string;
+	};
+
+	let {
+		current = 0,
+		duration = null,
+		remaining = $bindable(false),
+		toggle = true,
+		size = 'sm',
+		formatTime = formatMediaTime,
+		toggleLabel = 'Toggle remaining time',
+		class: klass = '',
+		...rest
+	}: Omit<HTMLAttributes<HTMLElement>, keyof Own> & Own = $props();
+
+	const live = $derived(isLiveDuration(duration));
+	const total = $derived(live ? 0 : (duration as number));
+	const pos = $derived(Math.min(live ? Number.POSITIVE_INFINITY : total, Math.max(0, current)));
+	const head = $derived(live ? formatTime(pos) : remaining ? `-${formatTime(total - pos, total)}` : formatTime(pos, total));
+	const tail = $derived(live ? null : formatTime(total, total));
+	const interactive = $derived(toggle && !live);
+</script>
+
+{#if interactive}
+	<button
+		data-tsu="TimeDisplay"
+		type="button"
+		class="td td--{size} td--button {klass}"
+		class:td--remaining={remaining}
+		title={toggleLabel}
+		aria-pressed={remaining}
+		onclick={() => (remaining = !remaining)}
+		{...rest}
+	>
+		<span data-part="position">{head}</span><span class="td-sep" aria-hidden="true">{' / '}</span><span data-part="duration">{tail}</span>
+	</button>
+{:else}
+	<span data-tsu="TimeDisplay" class="td td--{size} {klass}" {...rest}>
+		<span data-part="position">{head}</span>{#if tail !== null}<span class="td-sep" aria-hidden="true">{' / '}</span><span data-part="duration">{tail}</span>{/if}
+	</span>
+{/if}
+
+<style>
+	.td {
+		display: inline-flex;
+		align-items: baseline;
+		font-size: var(--fs-sm);
+		font-variant-numeric: tabular-nums;
+		color: var(--text-muted);
+		white-space: nowrap;
+	}
+	.td--md {
+		font-size: var(--fs-base);
+	}
+	.td--button {
+		border: 0;
+		background: none;
+		padding: 0;
+		margin: 0;
+		font: inherit;
+		font-variant-numeric: tabular-nums;
+		color: inherit;
+		cursor: pointer;
+		border-radius: var(--r-sm);
+	}
+	.td--button:hover {
+		color: var(--text);
+	}
+	.td--button:focus-visible {
+		outline: var(--focus-ring);
+		outline-offset: var(--focus-ring-offset);
+	}
+	.td-sep {
+		color: var(--text-faint);
+		white-space: pre;
+	}
+</style>

package/dist/components/atoms/TimeDisplay.svelte.d.ts

@@ -0,0 +1,24 @@
+/**
+     * "1:02 / 23:45" readout with tabular numbers. Clicking it shows the
+     * remaining time instead ("-22:43 / 23:45"). Live or unknown durations
+     * render the position only and cannot be toggled.
+     */
+import type { HTMLAttributes } from 'svelte/elements';
+type Own = {
+    /** Position in seconds. */
+    current?: number;
+    /** Duration in seconds; `null`/`Infinity` = live or unknown. */
+    duration?: number | null;
+    /** Show time left instead of the position. */
+    remaining?: boolean;
+    /** Allow clicking to toggle `remaining`. */
+    toggle?: boolean;
+    size?: 'sm' | 'md';
+    formatTime?: (seconds: number, ref?: number) => string;
+    toggleLabel?: string;
+    class?: string;
+};
+type $$ComponentProps = Omit<HTMLAttributes<HTMLElement>, keyof Own> & Own;
+declare const TimeDisplay: import("svelte").Component<$$ComponentProps, {}, "remaining">;
+type TimeDisplay = ReturnType<typeof TimeDisplay>;
+export default TimeDisplay;

package/dist/components/layouts/AppShell.svelte

@@ -9,11 +9,15 @@
 	//     scrim; AppShell renders the hamburger toggle for you (shown only on
 	//     mobile), locks body scroll while open, closes on Escape / scrim click /
 	//     a same-origin link click inside it, and marks the rest of the page
-	//     `inert` so focus stays in the drawer. `bind:open` to drive it yourself.
-	// Switching to desktop auto-closes the drawer. Safe-area insets are honored.
+	//     (all but the hamburger) `inert`. Opening focuses the first control in
+	//     the drawer; closing returns focus to the toggle. `bind:open` to drive it.
+	// Switching to desktop auto-closes the drawer. Safe-area insets are honored;
+	// `--shell-header-h` is the rendered header height (incl. the top inset).
 	import { untrack, type Snippet } from 'svelte';
 	import { browser } from '../../env';
+	import { readStorage, writeStorage } from '../../stores/storage';
 	import IconButton from '../molecules/IconButton.svelte';
+	import { resizeHandle } from './resizable-panel-frame.js';
 
 	let {
 		header,
@@ -71,6 +75,8 @@
 
 	let isMobile = $state(false);
 	let aside = $state<HTMLElement>();
+	let menuBtn = $state<HTMLElement>();
+	let asideW = $state(0);
 
 	function setOpen(next: boolean) {
 		if (open === next) return;
@@ -98,44 +104,22 @@
 	// --- resizable sidebar (desktop) ---
 	function loadW(): number | null {
 		if (!browser || !sidebarWidthKey) return null;
-		const n = Number(localStorage.getItem(sidebarWidthKey));
+		const n = Number(readStorage(sidebarWidthKey));
 		return Number.isFinite(n) && n >= minSidebar ? Math.min(n, maxSidebar) : null;
 	}
 	let sideW = $state<number | null>(loadW());
 	let dragging = $state(false);
-	let rafId = 0;
-	let lastX = 0;
-	function startDrag(e: PointerEvent) {
-		dragging = true;
-		lastX = e.clientX;
-		(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
-		e.preventDefault();
-	}
-	function onDrag(e: PointerEvent) {
-		if (!dragging) return;
-		lastX = e.clientX;
-		if (rafId) return;
-		rafId = requestAnimationFrame(() => {
-			rafId = 0;
-			sideW = Math.round(Math.max(minSidebar, Math.min(lastX, maxSidebar)));
-		});
-	}
-	function endDrag(e: PointerEvent) {
-		if (!dragging) return;
-		dragging = false;
-		if (rafId) {
-			cancelAnimationFrame(rafId);
-			rafId = 0;
-		}
-		try {
-			(e.currentTarget as HTMLElement).releasePointerCapture(e.pointerId);
-		} catch {
-			/* already released */
-		}
-		if (browser && sidebarWidthKey && sideW != null) localStorage.setItem(sidebarWidthKey, String(sideW));
+	function persistW(w: number) {
+		if (browser && sidebarWidthKey) writeStorage(sidebarWidthKey, String(w));
 	}
+	const measureW = () => sideW ?? aside?.getBoundingClientRect().width ?? 0;
 	// The effective desktop width: a resized px value wins over the prop default.
 	const widthCss = $derived(resizableSidebar && sideW != null ? `${sideW}px` : sidebarWidth);
+	$effect(() => {
+		if (!resizableSidebar || !aside) return;
+		void widthCss;
+		asideW = Math.round(measureW());
+	});
 
 	$effect(() => {
 		if (!browser) return;
@@ -167,6 +151,24 @@
 
 	// Background is inert (untabbable, hidden from AT) when the drawer is open.
 	const bgInert = $derived(open && isMobile);
+
+	const FOCUSABLE =
+		'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+	let wasInert = false;
+	$effect(() => {
+		const active = bgInert;
+		if (active === wasInert) return;
+		wasInert = active;
+		untrack(() => {
+			if (active) {
+				aside?.querySelector<HTMLElement>(FOCUSABLE)?.focus();
+				return;
+			}
+			const current = document.activeElement;
+			if (current && current !== document.body && !aside?.contains(current)) return;
+			menuBtn?.querySelector<HTMLElement>('button')?.focus();
+		});
+	});
 </script>
 
 <svelte:window onkeydown={(e) => e.key === 'Escape' && setOpen(false)} />
@@ -183,7 +185,7 @@
 		{#if sidebar}
 			<!-- Wrapper owned here so the responsive hide is a scoped rule on our own
 			     element, not a :global reach into the IconButton's button. -->
-			<div class="shell-menu-btn">
+			<div class="shell-menu-btn" bind:this={menuBtn}>
 				<IconButton
 					icon="menu"
 					label="Toggle navigation"
@@ -192,7 +194,9 @@
 				/>
 			</div>
 		{/if}
-		{@render header?.()}
+		<div class="shell-header-content" inert={bgInert || undefined}>
+			{@render header?.()}
+		</div>
 	</header>
 
 	{#if sidebar}
@@ -213,15 +217,25 @@
 		>
 			{@render sidebar()}
 			{#if resizableSidebar}
+				<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
 				<div
 					class="shell-sidebar-resize"
 					role="separator"
+					tabindex="0"
 					aria-label="Resize sidebar"
 					aria-orientation="vertical"
-					onpointerdown={startDrag}
-					onpointermove={onDrag}
-					onpointerup={endDrag}
-					onpointercancel={endDrag}
+					aria-valuemin={minSidebar}
+					aria-valuemax={maxSidebar}
+					aria-valuenow={sideW ?? asideW}
+					use:resizeHandle={{
+						side: 'left',
+						min: minSidebar,
+						max: maxSidebar,
+						measure: measureW,
+						onwidth: (w) => (sideW = w),
+						oncommit: persistW,
+						onactive: (active) => (dragging = active)
+					}}
 				></div>
 			{/if}
 		</aside>
@@ -238,6 +252,7 @@
 
 <style>
 	.shell {
+		--shell-header-h: calc(var(--header-h) + var(--safe-top));
 		min-height: 100dvh;
 		display: grid;
 		grid-template-columns: minmax(0, 1fr);
@@ -256,7 +271,7 @@
 		align-items: center;
 		gap: var(--sp-3);
 		min-width: 0;
-		height: var(--header-h);
+		height: var(--shell-header-h);
 		padding-inline: max(var(--sp-4), var(--safe-left)) max(var(--sp-4), var(--safe-right));
 		padding-top: var(--safe-top);
 		background: color-mix(in srgb, var(--bg) 88%, transparent);
@@ -266,6 +281,12 @@
 	.shell-header > :global(*) {
 		min-width: 0;
 	}
+	.shell-header-content {
+		display: contents;
+	}
+	.shell-header-content > :global(*) {
+		min-width: 0;
+	}
 	.shell-menu-btn {
 		display: inline-flex;
 		align-items: center;
@@ -399,9 +420,14 @@
 			transition: background 0.12s var(--ease);
 		}
 		.shell-sidebar-resize:hover::after,
+		.shell-sidebar-resize:focus-visible::after,
 		.shell.dragging .shell-sidebar-resize::after {
 			background: var(--accent);
 		}
+		.shell-sidebar-resize:focus-visible {
+			outline: 2px solid var(--accent);
+			outline-offset: -2px;
+		}
 	}
 
 	/* Tablet: the persistent column narrows to an icon rail so the content and
@@ -417,4 +443,10 @@
 			display: none;
 		}
 	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.shell-sidebar {
+			transition: none;
+		}
+	}
 </style>

package/dist/components/layouts/Container.svelte

@@ -4,6 +4,7 @@
 	// `--container-gutter` so children can bleed to the column edge with
 	// `margin-inline: calc(-1 * var(--container-gutter))`.
 	import type { Snippet } from 'svelte';
+	import { browser } from '../../env';
 
 	let {
 		as = 'div',
@@ -36,8 +37,26 @@
 		[key: string]: unknown;
 	} = $props();
 
+	// `100vw` includes the reserved scrollbar gutter (`scrollbar-gutter: stable`).
+	let scrollbarW = $state(0);
+	$effect(() => {
+		if (!browser || !fullWidth) return;
+		const sync = () => {
+			scrollbarW = Math.max(0, window.innerWidth - document.documentElement.clientWidth);
+		};
+		sync();
+		window.addEventListener('resize', sync);
+		const ro = typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(sync);
+		ro?.observe(document.documentElement);
+		return () => {
+			window.removeEventListener('resize', sync);
+			ro?.disconnect();
+		};
+	});
+
 	const style = $derived.by(() => {
 		const vars: string[] = [];
+		if (fullWidth && scrollbarW) vars.push(`--ct-scrollbar: ${scrollbarW}px`);
 		if (!fullWidth && size && size !== 'none') vars.push(`--ct-max: ${size}`);
 		if (gutter) vars.push(`--container-gutter: ${gutter}`);
 		if (fullWidth && inset) {
@@ -87,12 +106,15 @@
 
 	/* Break out of any centered ancestor to span the viewport (minus `inset`).
 	   `margin-inline: calc(50% - 50vw)` pulls each edge out to the viewport,
-	   keeping the element in normal flow (no transform/overflow side-effects). */
+	   keeping the element in normal flow (no transform/overflow side-effects).
+	   --ct-scrollbar (measured) takes the scrollbar gutter out of `100vw`. */
 	.ct.full {
 		--ct-inset-l: 0px;
 		--ct-inset-r: 0px;
+		--ct-vw: calc(100vw - var(--ct-scrollbar, 0px));
 		max-width: none;
-		width: calc(100vw - var(--ct-inset-l) - var(--ct-inset-r));
-		margin-inline: calc(50% - 50vw + var(--ct-inset-l)) calc(50% - 50vw + var(--ct-inset-r));
+		width: calc(var(--ct-vw) - var(--ct-inset-l) - var(--ct-inset-r));
+		margin-inline: calc(50% - var(--ct-vw) / 2 + var(--ct-inset-l))
+			calc(50% - var(--ct-vw) / 2 + var(--ct-inset-r));
 	}
 </style>

package/dist/components/layouts/MasterDetail.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
 	// List + detail columns. Above `breakpoint` (measured on this component's own
 	// box, not the viewport) both columns render and scroll independently. Below
-	// it exactly one pane renders: the list while nothing is `selected`, the
-	// detail (with a sticky back header) once it is. The consumer drives
-	// `selected` — typically from the URL — so each pane can be its own route.
-	import type { Snippet } from 'svelte';
+	// it exactly one pane shows: the list while nothing is `selected`, the detail
+	// (with a sticky back header) once it is. Both stay mounted, so the list keeps
+	// its scroll and the focus moves to Back and returns to the opened item.
+	// The consumer drives `selected` — typically from the URL — so each pane can
+	// be its own route.
+	import { type Snippet, tick } from 'svelte';
 	import { browser } from '../../env';
 	import Icon from '../atoms/Icon.svelte';
 
@@ -49,6 +51,11 @@
 
 	let root = $state<HTMLElement | null>(null);
 	let mobile = $state(false);
+	let listEl = $state<HTMLElement | null>(null);
+	let backEl = $state<HTMLButtonElement | null>(null);
+	let listScroll = 0;
+	let listFocus: HTMLElement | null = null;
+	let wasSelected: boolean | undefined;
 
 	function toPx(length: string, el: HTMLElement): number {
 		const n = Number.parseFloat(length);
@@ -71,6 +78,26 @@
 
 	const showList = $derived(!mobile || !selected);
 	const showDetail = $derived(!mobile || selected);
+
+	$effect.pre(() => {
+		const now = selected;
+		const prev = wasSelected;
+		wasSelected = now;
+		if (!mobile || prev === undefined || prev === now) return;
+		const list = listEl;
+		if (now) {
+			listScroll = list?.scrollTop ?? 0;
+			const active = document.activeElement;
+			listFocus = active instanceof HTMLElement && list?.contains(active) ? active : null;
+			tick().then(() => backEl?.focus());
+		} else {
+			tick().then(() => {
+				if (list) list.scrollTop = listScroll;
+				if (listFocus?.isConnected) listFocus.focus({ preventScroll: true });
+				listFocus = null;
+			});
+		}
+	});
 </script>
 
 <div
@@ -84,37 +111,33 @@
 	data-tsu="MasterDetail"
 	{...rest}
 >
-	{#if showList}
-		<aside class="md-list" aria-label={listLabel}>
-			{@render list()}
-		</aside>
-	{/if}
-	{#if showDetail}
-		<section class="md-detail">
-			{#if mobile}
-				<header class="md-detail-header">
-					<button type="button" class="md-back" onclick={() => onback?.()}>
-						<Icon name="chevron-left" />
-						<span>{backLabel}</span>
-					</button>
-					{#if detailHeader}
-						<div class="md-detail-header-content">{@render detailHeader()}</div>
-					{/if}
-				</header>
-			{:else if detailHeader}
-				<header class="md-detail-header">
+	<aside bind:this={listEl} class="md-list" aria-label={listLabel} hidden={!showList}>
+		{@render list()}
+	</aside>
+	<section class="md-detail" hidden={!showDetail}>
+		{#if mobile}
+			<header class="md-detail-header">
+				<button bind:this={backEl} type="button" class="md-back" onclick={() => onback?.()}>
+					<Icon name="chevron-left" />
+					<span>{backLabel}</span>
+				</button>
+				{#if detailHeader}
 					<div class="md-detail-header-content">{@render detailHeader()}</div>
-				</header>
-			{/if}
-			<div class="md-detail-body">
-				{#if selected}
-					{@render detail()}
-				{:else}
-					{@render empty?.()}
 				{/if}
-			</div>
-		</section>
-	{/if}
+			</header>
+		{:else if detailHeader}
+			<header class="md-detail-header">
+				<div class="md-detail-header-content">{@render detailHeader()}</div>
+			</header>
+		{/if}
+		<div class="md-detail-body">
+			{#if selected}
+				{@render detail()}
+			{:else}
+				{@render empty?.()}
+			{/if}
+		</div>
+	</section>
 </div>
 
 <style>
@@ -142,6 +165,9 @@
 		display: flex;
 		flex-direction: column;
 	}
+	.md-detail[hidden] {
+		display: none;
+	}
 	.md-detail-header {
 		position: sticky;
 		top: 0;

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

@@ -1,4 +1,4 @@
-import type { Snippet } from 'svelte';
+import { type Snippet } from 'svelte';
 type $$ComponentProps = {
     list: Snippet;
     detail: Snippet;

package/dist/components/layouts/NavItem.svelte

@@ -4,8 +4,8 @@
 	// (≤ 8rem — e.g. the user drags AppShell's resizable sidebar down to a rail)
 	// the label hides and the icon centers, purely in CSS; a non-empty badge then
 	// collapses to a small dot indicator so the count cue survives the rail.
-	// `title`/`aria-label` carry the name so the icon-only state stays accessible
-	// and shows a tooltip. Renders an <a> when `href` is set, else a <button>.
+	// In the rail the label and pill stay in the accessible name (visually
+	// hidden), and `title` shows the label as a tooltip. Renders an <a> when `href` is set, else a <button>.
 	// The glyph is `iconChildren` (raw 24×24 SVG content), else `iconPath`
 	// (single path d), else the registry `icon`.
 	import type { Snippet } from 'svelte';
@@ -73,7 +73,6 @@
 	class:active
 	class:bar={activeStyle === 'bar'}
 	title={label}
-	aria-label={label}
 	aria-current={active ? 'page' : undefined}
 	{onclick}
 	{...rest}
@@ -184,7 +183,12 @@
 		}
 		.nav-label,
 		.nav-trail {
-			display: none;
+			position: absolute;
+			width: 1px;
+			height: 1px;
+			overflow: hidden;
+			clip-path: inset(50%);
+			white-space: nowrap;
 		}
 		.nav-dot {
 			display: block;

package/dist/components/layouts/NavSection.svelte

@@ -21,13 +21,19 @@
 		class?: string;
 		style?: string;
 	} = $props();
+
+	const labelId = $props.id();
 </script>
 
 <div class="nav-section {klass}" data-tsu="NavSection" {...rest}>
 	{#if label}
-		<div class="nav-section-label">{label}</div>
+		<div class="nav-section-label" id={labelId}>{label}</div>
 	{/if}
-	<div class="nav-section-items">
+	<div
+		class="nav-section-items"
+		role={label ? 'group' : undefined}
+		aria-labelledby={label ? labelId : undefined}
+	>
 		{@render children?.()}
 	</div>
 </div>

package/dist/components/layouts/ResizablePanel.svelte

@@ -2,6 +2,7 @@
 	import type { Snippet } from 'svelte';
 	import { untrack } from 'svelte';
 	import { browser } from '../../env';
+	import { readStorage, writeStorage } from '../../stores/storage';
 	import Icon from '../atoms/Icon.svelte';
 	import Scrim from '../atoms/Scrim.svelte';
 	import { resizeHandle, resolveLength } from './resizable-panel-frame.js';
@@ -152,7 +153,7 @@
 		if (!widthKey) return;
 
 		const savedWidth = parseStoredWidth(
-			localStorage.getItem(widthKey),
+			readStorage(widthKey),
 			boundedMin,
 			boundedMax
 		);
@@ -160,7 +161,7 @@
 
 		if (persistCollapsed) {
 			const savedCollapsed = parseStoredCollapsed(
-				localStorage.getItem(`${widthKey}:collapsed`)
+				readStorage(`${widthKey}:collapsed`)
 			);
 			if (savedCollapsed !== undefined) collapsed = savedCollapsed;
 		}
@@ -212,7 +213,7 @@
 	});
 
 	function persistWidth(nextWidth: number) {
-		if (browser && widthKey) localStorage.setItem(widthKey, String(nextWidth));
+		if (browser && widthKey) writeStorage(widthKey, String(nextWidth));
 	}
 
 	function setWidth(nextWidth: number) {
@@ -292,7 +293,7 @@
 		}
 		collapsed = !collapsed;
 		if (browser && widthKey && persistCollapsed) {
-			localStorage.setItem(`${widthKey}:collapsed`, String(collapsed));
+			writeStorage(`${widthKey}:collapsed`, String(collapsed));
 		}
 	}
 </script>
@@ -594,10 +595,24 @@
 		}
 	}
 
+	/* Coarse pointers: an invisible slab grows the chevron towards --touch-target. */
+	@media (pointer: coarse) {
+		.collapse-control::before {
+			content: '';
+			position: absolute;
+			inset-block: min(0px, calc((100% - var(--touch-target)) / 2));
+			inset-inline: min(0px, calc((100% - var(--touch-target)) / 2));
+		}
+	}
+
 	@media (prefers-reduced-motion: reduce) {
 		.panel {
 			transition: none;
 			animation: none;
 		}
+		.overlay .panel,
+		.overlay.right .panel {
+			animation: none;
+		}
 	}
 </style>