@dorsk/tsumikit 0.71.0 → 0.72.0

package/README.md

@@ -102,7 +102,7 @@ individually, in this order:
 | --- | --- |
 | `styles/tokens.css` | `:root` only — every token the kit reads (`--c-*` palette, `--bg`/`--text`/`--accent` aliases, type scale, spacing, radii, shadows, fonts, `--control-height`, …). Theme-less. |
 | `styles/themes.css` | the built-in `[data-theme="id"]` blocks, one per `THEMES` entry. |
-| `styles/reset.css` | reset + element defaults. |
+| `styles/reset.css` | reset + element defaults, global reduced-motion / forced-colors / prefers-contrast rules. |
 | `styles/utilities.css` | `.container`, `.stack`, `.row`, `.sr-only`, icon sizing, … |
 | `styles/syntax.css` | highlight.js / Prism class → `--syn-*` mapping. |
 
@@ -273,7 +273,7 @@ else aria-hidden, `interactive` renders a button with `onclick` + `aria-pressed`
 from `selected`), Divider (standalone
 horizontal/vertical hairline, `tone`, `spacing`, optional centred label,
 `decorative` to drop the `separator` role), Link (`tone`, `underline`
-always/hover/none, `align`), Icon (open registry — pass a `children` snippet for
+always/hover/none, default hover for navigation and titles; pass `always` inside prose, `align`), Icon (open registry — pass a `children` snippet for
 any custom SVG).
 
 **Molecules:** Field (`grow`), IconButton (`filled` forwards to `Icon`, for a
@@ -344,7 +344,8 @@ replaces a header cell (a select-all checkbox);
 paints a left accent bar + `data-tone`, `rowClass(row)`, `rowActions` snippet
 for a hover/focus-revealed trailing cell (always visible on touch; under
 `layout="fixed"` its column is `--dt-actions-w`, default 3.5rem),
-`stickyOffset` for the sticky header's `top`, `size="sm"`, `loading`,
+`stickyOffset` for the sticky header's `top` (it sticks within the table's own
+scroller, so give the table a bounded height), `size="sm"`, `loading`,
 `onloadmore` footer button, `empty` as string or snippet; `data-part`
 hooks on head/row/cell; `responsive="stack"` turns rows into cards below
 `stackBelow` (48rem, measured on the table's own box) using `Column.role`
@@ -355,7 +356,7 @@ literal `inherit` falls back to mono), stacked tables use `table-layout: fixed`,
 `stackActions="end"` closes every card with its actions, cells that render
 nothing get `data-empty` and are hidden and skipped by the `·` separators, the `<table>`
 stays a table for assistive tech), FilterSearchBar /
-FilterInput (`size="sm"` compact bar on `--control-height-compact`, text
+FilterInput (`font="sans"` for a plain search box, `size="sm"` compact bar on `--control-height-compact`, text
 floored at 16px under `pointer: coarse` so iOS does not zoom on focus,
 `shape="pill"`, `surface`, `hotkey="/"` focuses the input from anywhere
 outside an editable element, `showHotkey` renders the `<kbd>` hint, `grow`;
@@ -383,7 +384,8 @@ insets it as an elevated rounded card), NavItem
 (collapses to an icon rail when the sidebar is narrow; `icon` from the
 registry, `iconPath` / `iconChildren` for custom glyphs, `activeStyle="bar"`
 for the inset-bar active look), MasterDetail (list + detail columns that
-become two pages — one pane at a time with a sticky 44px back header — below
+become two pages — one pane at a time with a sticky 44px back header, keeping the
+list's scroll and focus — below
 their own `breakpoint`, so `selected` can be driven from the URL; `gap` spaces
 the columns and `divider="none"` drops the seam, both also settable as the
 `--md-gap` / `--md-divider` custom properties), Container, Stack
@@ -865,6 +867,32 @@ proportionally with no code. That's the recommended path for magnification.
 text tokens only) for reading-dense apps that want larger body text while
 keeping chrome compact. It isn't wired into AppShell or any default.
 
+### Mobile: TabBar, SwipeRow, PullToRefresh
+
+`TabBar` is a phone bottom tab bar: `items: { id, label, icon?, href?, badge? }[]`,
+`bind:value` (the selected `id`), `onselect(id, item)`. Items without `href` are a
+`tablist` with roving focus (←/→/Home/End); items with `href` are links with
+`aria-current="page"`. It is fixed to the bottom with `env(safe-area-inset-bottom)`
+(`placement="inline"` flows with the page) and, while mounted as a bar, publishes its
+height as `--tabbar-h` on `<html>`, so content clears it with
+`padding-bottom: var(--tabbar-h)`. Targets are at least 48px; numeric badges cap at `99+`.
+
+`SwipeRow` wraps a list row with one action per side: `leadingAction` on a rightward
+swipe, `trailingAction` on a leftward one, each `{ label, icon?, tone?, onaction }`
+(or `leading` / `trailing` snippets receiving the action and an `armed` flag).
+Releasing past `threshold` (0.35 of the width) fires `onaction`. Drags that are more
+vertical than horizontal are left to the scroller (`touch-action: pan-y`). The same
+actions are visually hidden buttons for keyboard and screen-reader users.
+
+`PullToRefresh` is a scroll container with pull-down-to-refresh for touch and pen.
+`onrefresh` returns a promise; the Spinner holds and the container is `aria-busy`
+with `label` ("Refreshing…") announced politely until it settles. It starts only at
+`scrollTop === 0`, fires once past `threshold` (72px), and contains overscroll so the
+browser's own pull does not fight it. Keep a visible refresh control for mouse users.
+
+AppShell exposes `--shell-header-h` (the header plus the top safe-area inset) for
+sticky offsets under `viewport-fit=cover`.
+
 ### Toolbar control heights
 
 `size="sm"` is the shared compact-toolbar contract for `Button`, `Popover`

package/dist/autoresize.js

@@ -32,6 +32,18 @@ export function autoresize(node, _value) {
     };
     resize();
     node.addEventListener('input', resize);
+    // Re-wrap on width changes, and measure once a hidden textarea is revealed.
+    let width = node.clientWidth;
+    const ro = typeof ResizeObserver === 'undefined'
+        ? undefined
+        : new ResizeObserver(([entry]) => {
+            const w = entry.contentRect.width;
+            if (w === width)
+                return;
+            width = w;
+            resize();
+        });
+    ro?.observe(node);
     return {
         update() {
             // re-measure when the bound value changes from outside (e.g. cleared)
@@ -39,6 +51,7 @@ export function autoresize(node, _value) {
         },
         destroy() {
             node.removeEventListener('input', resize);
+            ro?.disconnect();
         },
     };
 }

package/dist/clipboard.js

@@ -13,15 +13,27 @@ export async function copyToClipboard(value) {
         /* fall through to legacy path */
     }
     // Fallback for insecure contexts / older browsers.
+    const prev = document.activeElement;
+    const sel = document.getSelection();
+    const ranges = sel
+        ? Array.from({ length: sel.rangeCount }, (_, i) => sel.getRangeAt(i).cloneRange())
+        : [];
     try {
         const ta = document.createElement('textarea');
         ta.value = value;
+        ta.setAttribute('readonly', '');
         ta.style.position = 'fixed';
         ta.style.opacity = '0';
         document.body.appendChild(ta);
         ta.select();
         const ok = document.execCommand('copy');
         document.body.removeChild(ta);
+        prev?.focus?.({ preventScroll: true });
+        if (sel && ranges.length) {
+            sel.removeAllRanges();
+            for (const r of ranges)
+                sel.addRange(r);
+        }
         return ok;
     }
     catch {

package/dist/components/atoms/Artwork.svelte

@@ -60,6 +60,7 @@
 
 	const key = $derived(seed ?? alt);
 	const showImage = $derived(Boolean(src) && !failed);
+	const tile = $derived(showImage ? undefined : alt.trim() ? 'named' : 'decorative');
 	const gradient = $derived(showImage ? undefined : artworkGradient(key));
 	const text = $derived(fallback === 'initials' ? initialsOf(key) : '');
 
@@ -76,8 +77,9 @@
 	style:aspect-ratio={aspect}
 	style:width={size}
 	style:background={gradient}
-	role={showImage ? undefined : 'img'}
-	aria-label={showImage ? undefined : alt}
+	role={tile === 'named' ? 'img' : undefined}
+	aria-label={tile === 'named' ? alt : undefined}
+	aria-hidden={tile === 'decorative' ? 'true' : undefined}
 	{...rest}
 >
 	{#if showImage}

package/dist/components/atoms/Avatar.svelte

@@ -38,6 +38,7 @@
 
 	const text = $derived(glyph?.trim() || avatarInitial(name) || '?');
 	const hashed = $derived(tone === undefined);
+	const hidden = $derived(decorative || !name.trim());
 	const resolvedHue = $derived(hashed ? (hue ?? avatarHue(seed ?? name)) : undefined);
 </script>
 
@@ -55,9 +56,9 @@
 	class:size-lg={size === 'lg'}
 	style:--avatar-size={typeof size === 'number' ? `${size}px` : undefined}
 	style:--avatar-hue={resolvedHue}
-	role={decorative ? undefined : 'img'}
-	aria-label={decorative ? undefined : name}
-	aria-hidden={decorative ? 'true' : undefined}
+	role={hidden ? undefined : 'img'}
+	aria-label={hidden ? undefined : name}
+	aria-hidden={hidden ? 'true' : undefined}
 	{...rest}
 >
 	<span class="text" aria-hidden="true">{text}</span>

package/dist/components/atoms/Badge.svelte

@@ -140,6 +140,7 @@
 	class:interactive={as === 'button' || !!href}
 	style:--badge-tone={toneColor}
 	style:--badge-max-width={maxWidth}
+	type={!href && as === 'button' ? 'button' : undefined}
 	{...rest}
 >
 	{#if dot}
@@ -295,4 +296,16 @@
 	.action:hover {
 		opacity: 1;
 	}
+	@media (pointer: coarse) {
+		.action {
+			position: relative;
+		}
+		.action::before {
+			content: '';
+			position: absolute;
+			inset-block: var(--touch-slab);
+			inset-inline-start: var(--touch-slab);
+			inset-inline-end: 0;
+		}
+	}
 </style>

package/dist/components/atoms/Button.svelte

@@ -114,14 +114,23 @@
 	const t = $derived(canonicalTone(tone));
 
 	// A link-flavoured Button is a real <a>; native `disabled`/`type` don't apply,
-	// so a disabled link is expressed via aria-disabled + inert pointer handling.
+	// so an inactive link drops `href` (no focus, no keyboard activation).
 	const tag = $derived(href !== undefined || as === 'a' ? 'a' : 'button');
 	const inactive = $derived(disabled || loading);
 	const elementAttrs = $derived(
 		tag === 'a'
-			? { href, 'aria-disabled': inactive || undefined }
+			? inactive
+				? { href: undefined, role: 'link', 'aria-disabled': true }
+				: { href }
 			: { type, disabled: inactive }
 	);
+	const handleClick = (e: Parameters<NonNullable<typeof onclick>>[0]) => {
+		if (inactive) {
+			e.preventDefault();
+			return;
+		}
+		onclick?.(e);
+	};
 
 	const counted = $derived(hasCount(count));
 	const countText = $derived(hasCount(count) ? formatCount(count, countMax) : '');
@@ -137,12 +146,19 @@
 	const ariaLabel = $derived(rest['aria-label'] ? withCount(rest['aria-label']) : undefined);
 	$effect(() => {
 		if (!el || collapseLabel === 'never' || explicitName) return;
-		const labels = Array.from(el.querySelectorAll('[data-label]'), (n) => n.textContent?.trim())
-			.filter(Boolean)
-			.join(' ');
-		const text = labels && withCount(labels);
-		if (text) el.setAttribute('aria-label', text);
-		else el.removeAttribute('aria-label');
+		const node = el;
+		const sync = () => {
+			const labels = Array.from(node.querySelectorAll('[data-label]'), (n) => n.textContent?.trim())
+				.filter(Boolean)
+				.join(' ');
+			const text = labels && withCount(labels);
+			if (text) node.setAttribute('aria-label', text);
+			else node.removeAttribute('aria-label');
+		};
+		sync();
+		const observer = new MutationObserver(sync);
+		observer.observe(node, { childList: true, characterData: true, subtree: true });
+		return () => observer.disconnect();
 	});
 </script>
 
@@ -188,7 +204,7 @@
 	class:btn-counted={counted}
 	class:btn-stacked={stacked}
 	class:btn-hinted={keyHint !== undefined}
-	onclick={onclick}
+	onclick={handleClick}
 >
 	{#if loading}<span class="btn-spinner" aria-hidden="true"></span>{/if}
 	{#if glyph !== undefined}

package/dist/components/atoms/Card.svelte

@@ -65,6 +65,7 @@
 		tap = false,
 		interactive = false,
 		as = 'div',
+		type = 'button',
 		padding = 'md',
 		surface = 'base',
 		border = 'solid',
@@ -147,6 +148,7 @@
 	style={`${stackStyle}${style}`}
 	role={interactive && !native ? 'button' : undefined}
 	tabindex={interactive && !native ? 0 : undefined}
+	type={as === 'button' ? type : undefined}
 	onclick={handleClick}
 	onkeydown={handleKeydown}
 	{...rest}

package/dist/components/atoms/Dot.svelte

@@ -53,7 +53,7 @@
 	</span>
 {:else}
 	<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-	<span class="dot {klass}" class:glow class:ring style="--dot-color:{resolved}" data-tsu="Dot" role={interactive ? 'img' : undefined} tabindex={interactive ? 0 : undefined} {...rest}></span>
+	<span class="dot {klass}" class:glow class:ring style="--dot-color:{resolved}" data-tsu="Dot" role={interactive ? 'img' : undefined} tabindex={interactive ? 0 : undefined} aria-label={interactive && !color ? status : undefined} {...rest}></span>
 {/if}
 
 <style>

package/dist/components/atoms/Icon.svelte

@@ -50,6 +50,7 @@
 		music: '<path d="M9 18V5l12-2v13" /><circle cx="6" cy="18" r="3" /><circle cx="18" cy="16" r="3" />',
 		tv: '<path d="m17 2-5 5-5-5" /><rect width="20" height="15" x="2" y="7" rx="2" />',
 		film: '<rect width="18" height="18" x="3" y="3" rx="2" /><path d="M7 3v18" /><path d="M3 7.5h4" /><path d="M3 12h18" /><path d="M3 16.5h4" /><path d="M17 3v18" /><path d="M17 7.5h4" /><path d="M17 16.5h4" />',
+		video: '<path d="m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5" /><rect x="2" y="6" width="14" height="12" rx="2" />',
 		disc: '<circle cx="12" cy="12" r="10" /><circle cx="12" cy="12" r="2" />',
 
 		// — files / content —
@@ -68,6 +69,7 @@
 		unlink: '<path d="m18.84 12.25 1.72-1.71h-.02a5.004 5.004 0 0 0-.12-7.07 5.006 5.006 0 0 0-6.95 0l-1.72 1.71" /><path d="m5.17 11.75-1.71 1.71a5.004 5.004 0 0 0 .12 7.07 5.006 5.006 0 0 0 6.95 0l1.71-1.71" /><line x1="8" x2="8" y1="2" y2="5" /><line x1="2" x2="5" y1="8" y2="8" /><line x1="16" x2="16" y1="19" y2="22" /><line x1="19" x2="22" y1="16" y2="16" />',
 		'text-cursor': '<path d="M17 22h-1a4 4 0 0 1-4-4V6a4 4 0 0 1 4-4h1" /><path d="M7 22h1a4 4 0 0 0 4-4" /><path d="M7 2h1a4 4 0 0 1 4 4" />',
 		tag: '<path d="M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z" /><circle cx="7.5" cy="7.5" r=".5" fill="currentColor" />',
+		map: '<path d="M14.106 5.553a2 2 0 0 0 1.788 0l3.659-1.83A1 1 0 0 1 21 4.619v12.764a1 1 0 0 1-.553.894l-4.553 2.277a2 2 0 0 1-1.788 0l-4.212-2.106a2 2 0 0 0-1.788 0l-3.659 1.83A1 1 0 0 1 3 19.381V6.618a1 1 0 0 1 .553-.894l4.553-2.277a2 2 0 0 1 1.788 0z" /><path d="M15 5.764v15" /><path d="M9 3.236v15" />',
 		pin: '<path d="M12 17v5" /><path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z" />',
 		'pin-off': '<path d="M12 17v5" /><path d="M15 9.34V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H7.89" /><path d="m2 2 20 20" /><path d="M9 9v1.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h11" />',
 		'life-buoy': '<circle cx="12" cy="12" r="10" /><path d="m4.93 4.93 4.24 4.24" /><path d="m14.83 9.17 4.24-4.24" /><path d="m14.83 14.83 4.24 4.24" /><path d="m9.17 14.83-4.24 4.24" /><circle cx="12" cy="12" r="4" />',

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

@@ -37,6 +37,7 @@ declare const ICONS: {
     readonly music: "<path d=\"M9 18V5l12-2v13\" /><circle cx=\"6\" cy=\"18\" r=\"3\" /><circle cx=\"18\" cy=\"16\" r=\"3\" />";
     readonly tv: "<path d=\"m17 2-5 5-5-5\" /><rect width=\"20\" height=\"15\" x=\"2\" y=\"7\" rx=\"2\" />";
     readonly film: "<rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" /><path d=\"M7 3v18\" /><path d=\"M3 7.5h4\" /><path d=\"M3 12h18\" /><path d=\"M3 16.5h4\" /><path d=\"M17 3v18\" /><path d=\"M17 7.5h4\" /><path d=\"M17 16.5h4\" />";
+    readonly video: "<path d=\"m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5\" /><rect x=\"2\" y=\"6\" width=\"14\" height=\"12\" rx=\"2\" />";
     readonly disc: "<circle cx=\"12\" cy=\"12\" r=\"10\" /><circle cx=\"12\" cy=\"12\" r=\"2\" />";
     readonly file: "<path d=\"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z\" /><path d=\"M14 2v5a1 1 0 0 0 1 1h5\" />";
     readonly 'file-text': "<path d=\"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z\" /><path d=\"M14 2v5a1 1 0 0 0 1 1h5\" /><path d=\"M10 9H8\" /><path d=\"M16 13H8\" /><path d=\"M16 17H8\" />";
@@ -51,6 +52,7 @@ declare const ICONS: {
     readonly unlink: "<path d=\"m18.84 12.25 1.72-1.71h-.02a5.004 5.004 0 0 0-.12-7.07 5.006 5.006 0 0 0-6.95 0l-1.72 1.71\" /><path d=\"m5.17 11.75-1.71 1.71a5.004 5.004 0 0 0 .12 7.07 5.006 5.006 0 0 0 6.95 0l1.71-1.71\" /><line x1=\"8\" x2=\"8\" y1=\"2\" y2=\"5\" /><line x1=\"2\" x2=\"5\" y1=\"8\" y2=\"8\" /><line x1=\"16\" x2=\"16\" y1=\"19\" y2=\"22\" /><line x1=\"19\" x2=\"22\" y1=\"16\" y2=\"16\" />";
     readonly 'text-cursor': "<path d=\"M17 22h-1a4 4 0 0 1-4-4V6a4 4 0 0 1 4-4h1\" /><path d=\"M7 22h1a4 4 0 0 0 4-4\" /><path d=\"M7 2h1a4 4 0 0 1 4 4\" />";
     readonly tag: "<path d=\"M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z\" /><circle cx=\"7.5\" cy=\"7.5\" r=\".5\" fill=\"currentColor\" />";
+    readonly map: "<path d=\"M14.106 5.553a2 2 0 0 0 1.788 0l3.659-1.83A1 1 0 0 1 21 4.619v12.764a1 1 0 0 1-.553.894l-4.553 2.277a2 2 0 0 1-1.788 0l-4.212-2.106a2 2 0 0 0-1.788 0l-3.659 1.83A1 1 0 0 1 3 19.381V6.618a1 1 0 0 1 .553-.894l4.553-2.277a2 2 0 0 1 1.788 0z\" /><path d=\"M15 5.764v15\" /><path d=\"M9 3.236v15\" />";
     readonly pin: "<path d=\"M12 17v5\" /><path d=\"M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z\" />";
     readonly 'pin-off': "<path d=\"M12 17v5\" /><path d=\"M15 9.34V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H7.89\" /><path d=\"m2 2 20 20\" /><path d=\"M9 9v1.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h11\" />";
     readonly 'life-buoy': "<circle cx=\"12\" cy=\"12\" r=\"10\" /><path d=\"m4.93 4.93 4.24 4.24\" /><path d=\"m14.83 9.17 4.24-4.24\" /><path d=\"m14.83 14.83 4.24 4.24\" /><path d=\"m9.17 14.83-4.24 4.24\" /><circle cx=\"12\" cy=\"12\" r=\"4\" />";

package/dist/components/atoms/Kbd.svelte

@@ -18,43 +18,46 @@
 		typeof navigator !== 'undefined' &&
 		/mac|iphone|ipad|ipod/i.test(navigator.platform || navigator.userAgent || '');
 
-	function label(token: string): string {
+	type Key = { glyph: string; name: string };
+	const key = (glyph: string, name = glyph): Key => ({ glyph, name });
+
+	function label(token: string): Key {
 		const t = token.trim().toLowerCase();
 		switch (t) {
 			case 'mod':
-				return isMac ? '⌘' : 'Ctrl';
+				return isMac ? key('⌘', 'Command') : key('Ctrl', 'Control');
 			case 'ctrl':
 			case 'control':
-				return 'Ctrl';
+				return key('Ctrl', 'Control');
 			case 'meta':
 			case 'cmd':
 			case 'command':
-				return '⌘';
+				return key('⌘', 'Command');
 			case 'alt':
 			case 'option':
-				return isMac ? '⌥' : 'Alt';
+				return isMac ? key('⌥', 'Option') : key('Alt');
 			case 'shift':
-				return '⇧';
+				return key('⇧', 'Shift');
 			case 'enter':
 			case 'return':
-				return '↵';
+				return key('↵', 'Enter');
 			case 'esc':
 			case 'escape':
-				return 'Esc';
+				return key('Esc', 'Escape');
 			case 'tab':
-				return 'Tab';
+				return key('Tab');
 			case 'space':
-				return 'Space';
+				return key('Space');
 			case 'up':
-				return '↑';
+				return key('↑', 'Up arrow');
 			case 'down':
-				return '↓';
+				return key('↓', 'Down arrow');
 			case 'left':
-				return '←';
+				return key('←', 'Left arrow');
 			case 'right':
-				return '→';
+				return key('→', 'Right arrow');
 			default:
-				return t.charAt(0).toUpperCase() + t.slice(1);
+				return key(t.charAt(0).toUpperCase() + t.slice(1));
 		}
 	}
 
@@ -73,7 +76,7 @@
 >
 	{#each tokens as token, i (i)}
 		{#if i > 0}<span class="kbd-sep" aria-hidden="true">+</span>{/if}
-		<kbd class="kbd">{token}</kbd>
+		<kbd class="kbd">{#if token.name === token.glyph}{token.glyph}{:else}<span aria-hidden="true">{token.glyph}</span><span class="kbd-name">{token.name}</span>{/if}</kbd>
 	{/each}
 </span>
 
@@ -111,6 +114,15 @@
 		background: var(--bg-elevated-2);
 		color: inherit;
 	}
+	.kbd-name {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		margin: -1px;
+		overflow: hidden;
+		clip: rect(0, 0, 0, 0);
+		white-space: nowrap;
+	}
 	.kbd-sep {
 		font-size: 0.85em;
 		color: var(--text-faint);

package/dist/components/atoms/Link.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
 	import type { HTMLAttributes } from 'svelte/elements';
-	// Inline text link — underlined accent text with no button chrome. Renders an
-	// <a> when `href` is given, otherwise a <button> (for in-page actions that
-	// read as links, e.g. "Open ChatGPT again").
+	// Inline text link — accent text with no button chrome. Renders an <a> when
+	// `href` is given, otherwise a <button> (for in-page actions that read as
+	// links, e.g. "Open ChatGPT again").
+	// Underline: the default `hover` is for navigation, lists and entity titles;
+	// use `always` for links inside running prose.
 	import type { Snippet } from 'svelte';
 
 	type Own = {
@@ -20,7 +22,7 @@
 	let {
 		href,
 		tone = 'accent',
-		underline = 'always',
+		underline = 'hover',
 		align = 'start',
 		class: klass = '',
 		children,

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