@dorsk/tsumikit 0.71.0 → 0.72.0

package/dist/components/layouts/AppShell.svelte

@@ -9,11 +9,14 @@
 	//     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 IconButton from '../molecules/IconButton.svelte';
+	import { resizeHandle } from './resizable-panel-frame.js';
 
 	let {
 		header,
@@ -71,6 +74,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;
@@ -103,39 +108,17 @@
 	}
 	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) localStorage.setItem(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 +150,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 +184,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 +193,9 @@
 				/>
 			</div>
 		{/if}
-		{@render header?.()}
+		<div class="shell-header-content" inert={bgInert || undefined}>
+			{@render header?.()}
+		</div>
 	</header>
 
 	{#if sidebar}
@@ -213,15 +216,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 +251,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 +270,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 +280,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 +419,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 +442,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

@@ -594,10 +594,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>

package/dist/components/layouts/TabBar.svelte

@@ -0,0 +1,217 @@
+<script lang="ts">
+	// Phone bottom tab bar: fixed to the bottom edge with safe-area padding.
+	// Items without `href` form a `tablist` of `tab`s with roving focus; with
+	// `href` the bar is a `<nav>` of `<a aria-current="page">`. While mounted as
+	// a bar it publishes its measured height as `--tabbar-h` on `<html>` so
+	// content can clear it (`padding-bottom: var(--tabbar-h)`).
+	import Badge from '../atoms/Badge.svelte';
+	import Icon from '../atoms/Icon.svelte';
+	import type { IconName } from '../atoms/Icon.svelte';
+	import { formatCount, hasCount } from '../../count';
+
+	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;
+	}
+
+	let {
+		items,
+		value = $bindable(),
+		onselect,
+		label = 'Primary',
+		placement = 'bar',
+		class: klass = '',
+		...rest
+	}: {
+		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;
+	} = $props();
+
+	const links = $derived(items.some((item) => item.href));
+	const isCurrent = (item: TabBarItem) => item.id === value;
+	const focusIndex = $derived(Math.max(0, items.findIndex(isCurrent)));
+	const badgeText = (badge: TabBarItem['badge']) =>
+		typeof badge === 'number' ? (hasCount(badge) ? formatCount(badge) : '') : (badge ?? '');
+
+	let height = $state(0);
+
+	$effect(() => {
+		if (placement !== 'bar' || typeof document === 'undefined') return;
+		const root = document.documentElement;
+		root.style.setProperty('--tabbar-h', `${height}px`);
+		return () => root.style.removeProperty('--tabbar-h');
+	});
+
+	function select(item: TabBarItem) {
+		if (item.id === value) return;
+		value = item.id;
+		onselect?.(item.id, item);
+	}
+
+	function onkeydown(e: KeyboardEvent) {
+		const all = [...(e.currentTarget as HTMLElement).querySelectorAll<HTMLElement>('.tabbar-item')];
+		const i = all.indexOf(e.target as HTMLElement);
+		if (i < 0) return;
+		let next: number;
+		if (e.key === 'ArrowRight') next = (i + 1) % all.length;
+		else if (e.key === 'ArrowLeft') next = (i - 1 + all.length) % all.length;
+		else if (e.key === 'Home') next = 0;
+		else if (e.key === 'End') next = all.length - 1;
+		else return;
+		e.preventDefault();
+		all[next].focus();
+		if (!links) select(items[next]);
+	}
+</script>
+
+{#snippet glyph(item: TabBarItem)}
+	<span class="tabbar-glyph">
+		{#if item.icon}
+			<Icon name={item.icon} size={22} />
+		{/if}
+		{#if badgeText(item.badge)}
+			<Badge class="tabbar-badge" tone="accent" size="xs" border={false} active numeric={typeof item.badge === 'number'}>
+				{badgeText(item.badge)}
+			</Badge>
+		{/if}
+	</span>
+	<span class="tabbar-label">{item.label}</span>
+{/snippet}
+
+<nav
+	bind:offsetHeight={height}
+	data-tsu="TabBar"
+	aria-label={label}
+	class="tabbar {klass}"
+	class:bar={placement === 'bar'}
+	{...rest}
+>
+	<div
+		class="tabbar-row"
+		role={links ? undefined : 'tablist'}
+		aria-label={links ? undefined : label}
+		{onkeydown}
+	>
+		{#each items as item, i (item.id)}
+			{#if item.href}
+				<a
+					href={item.href}
+					class="tabbar-item"
+					class:current={isCurrent(item)}
+					aria-current={isCurrent(item) ? 'page' : undefined}
+					onclick={() => select(item)}
+				>
+					{@render glyph(item)}
+				</a>
+			{:else}
+				<button
+					type="button"
+					role="tab"
+					class="tabbar-item"
+					class:current={isCurrent(item)}
+					aria-selected={isCurrent(item)}
+					aria-controls={item.controls}
+					tabindex={i === focusIndex ? 0 : -1}
+					onclick={() => select(item)}
+				>
+					{@render glyph(item)}
+				</button>
+			{/if}
+		{/each}
+	</div>
+</nav>
+
+<style>
+	.tabbar {
+		min-width: 0;
+		background: var(--bg-elevated);
+		border-top: 1px solid var(--border);
+	}
+	.bar {
+		position: fixed;
+		inset-inline: 0;
+		bottom: 0;
+		z-index: var(--z-nav);
+		padding-bottom: env(safe-area-inset-bottom, 0px);
+		padding-inline: env(safe-area-inset-left, 0px) env(safe-area-inset-right, 0px);
+		background: color-mix(in srgb, var(--bg-elevated) 92%, transparent);
+		backdrop-filter: blur(12px);
+	}
+	.tabbar-row {
+		display: flex;
+		align-items: stretch;
+		min-width: 0;
+		min-height: var(--nav-h);
+	}
+	.tabbar-item {
+		position: relative;
+		display: flex;
+		flex: 1 1 0;
+		min-width: 0;
+		min-height: max(48px, var(--touch-target));
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		gap: 2px;
+		padding: var(--sp-1) var(--sp-2);
+		border: none;
+		border-radius: 0;
+		background: none;
+		color: var(--text-muted);
+		font: inherit;
+		font-size: var(--fs-xs);
+		font-weight: var(--fw-medium);
+		text-decoration: none;
+		cursor: pointer;
+		-webkit-tap-highlight-color: transparent;
+		transition: color 0.12s var(--ease);
+	}
+	.tabbar-item:hover {
+		color: var(--text);
+		text-decoration: none;
+	}
+	.tabbar-item:focus-visible {
+		outline: 2px solid var(--accent);
+		outline-offset: -2px;
+	}
+	.tabbar-item.current {
+		color: var(--accent);
+	}
+	.tabbar-glyph {
+		position: relative;
+		display: inline-flex;
+		flex: none;
+		align-items: center;
+	}
+	.tabbar-label {
+		max-width: 100%;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	.tabbar :global(.tabbar-badge) {
+		position: absolute;
+		top: -0.4rem;
+		left: calc(100% - 0.5rem);
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.tabbar-item {
+			transition: none;
+		}
+	}
+</style>