@dorsk/tsumikit 0.70.0 → 0.72.0

package/dist/components/atoms/Scrim.svelte

@@ -1,3 +1,7 @@
+<script lang="ts" module>
+	const open: object[] = [];
+</script>
+
 <script lang="ts">
 	import { browser } from '../../env';
 
@@ -38,15 +42,27 @@
 		return () => query.removeEventListener('change', sync);
 	});
 
+	let el = $state<HTMLButtonElement | null>(null);
+
+	// Only the topmost scrim reacts, and never to an Escape aimed at a dialog
+	// or popover layered above it.
 	$effect(() => {
 		if (!browser) return;
+		const self = {};
+		open.push(self);
 		const onKeydown = (event: KeyboardEvent) => {
 			if (event.key !== 'Escape' || event.defaultPrevented) return;
+			if (open.at(-1) !== self) return;
+			const layer = (event.target as Element | null)?.closest?.('dialog[open], [popover]');
+			if (layer && !(el && layer.contains(el))) return;
 			event.preventDefault();
 			onclose?.();
 		};
 		document.addEventListener('keydown', onKeydown);
-		return () => document.removeEventListener('keydown', onKeydown);
+		return () => {
+			document.removeEventListener('keydown', onKeydown);
+			open.splice(open.indexOf(self), 1);
+		};
 	});
 </script>
 
@@ -54,6 +70,7 @@
 	<button
 		type="button"
 		class="scrim {klass}"
+		bind:this={el}
 		style={styleProp}
 		style:z-index={z}
 		aria-label={label}

package/dist/components/atoms/Select.svelte

@@ -241,6 +241,7 @@
 	   with Button size="sm", Popover size="sm" and SegmentedControl size="sm". */
 	.select.select-sm {
 		height: var(--select-size, var(--control-height-compact));
+		min-height: var(--select-size, var(--control-height-compact));
 	}
 	.select.w-auto {
 		width: auto;

package/dist/components/atoms/Slider.svelte

@@ -15,7 +15,7 @@
 		step = 1,
 		label,
 		showValue = false,
-		format = (v: number) => String(v),
+		format: formatProp,
 		id: idProp,
 		'aria-describedby': ariaDescribedby,
 		'aria-invalid': ariaInvalid,
@@ -53,6 +53,10 @@
 	const fallbackId = $props.id();
 	const id = $derived(idProp ?? field?.id ?? fallbackId);
 	const isInvalid = $derived(invalid || !!field?.invalid);
+	const format = $derived(formatProp ?? ((v: number) => String(v)));
+	const valueText = $derived(
+		marks.find((m) => m.value === Number(value))?.label ?? formatProp?.(Number(value))
+	);
 
 	$effect(() => warnUnlabelled(el, 'Slider'));
 
@@ -78,6 +82,7 @@
 		{step}
 		bind:value
 		aria-label={label}
+		aria-valuetext={valueText}
 		{...rest}
 		aria-describedby={ariaDescribedby ?? field?.describedBy}
 		aria-invalid={ariaInvalid ?? (isInvalid ? 'true' : undefined)}
@@ -212,6 +217,11 @@
 		outline: var(--focus-ring);
 		outline-offset: 2px;
 	}
+	@media (pointer: coarse) {
+		input[type='range'] {
+			min-height: var(--touch-target-compact);
+		}
+	}
 	input[type='range']:disabled {
 		opacity: 0.45;
 		cursor: not-allowed;

package/dist/components/atoms/Swatch.svelte

@@ -111,4 +111,16 @@
 		outline: 2px solid var(--accent);
 		outline-offset: 3px;
 	}
+	@media (pointer: coarse) {
+		.interactive {
+			position: relative;
+		}
+		.interactive::before {
+			content: '';
+			position: absolute;
+			inset-block: var(--touch-slab);
+			inset-inline-start: var(--touch-slab);
+			inset-inline-end: 0;
+		}
+	}
 </style>

package/dist/components/atoms/Switch.svelte

@@ -124,6 +124,18 @@
 	.switch-sm.on .knob {
 		transform: translateX(0.8rem);
 	}
+	@media (pointer: coarse) {
+		.switch {
+			position: relative;
+		}
+		.switch::before {
+			content: '';
+			position: absolute;
+			inset-block: var(--touch-slab);
+			inset-inline-start: var(--touch-slab);
+			inset-inline-end: 0;
+		}
+	}
 	.switch-row {
 		display: inline-flex;
 		align-items: center;

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>