@dorsk/tsumikit 0.70.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. |
 
@@ -261,9 +261,9 @@ the trigger overlays the selected option's glyph + muted hint on the native cont
 sm/md/lg as on `Switch`, or `--cb-box` for the box alone),
 Slider (`ticks` draws a dot per step for a segmented slider), Progress, Gauge (vertical consumption cell, `variant` continuous/segments,
 threshold tones via `warnAt`/`dangerAt`, `corner` snippet), Artwork (lazy cover image with seeded gradient + initials
-fallback, `aspect`, `status` overlay), Avatar (grapheme-safe initial or `glyph`, hue hashed from
+fallback, `aspect`, `status` overlay, `srcset`/`sizes` passed to the `<img>`), Avatar (grapheme-safe initial or `glyph`, hue hashed from
 `seed`/`name` or a fixed `tone`, `size` xs–lg or px, `shape` circle/square, `decorative`, corner `status`), Card (`tone` tints the surface for inline banners), Badge
-(`tone` semantic palette or `color` for any CSS colour, `size` xs/sm/md, `dot`,
+(`tone` semantic palette (the shared `Tone`, `success` = `ok`, plus `muted`/`violet`) or `color` for any CSS colour, `size` xs/sm/md (sm/xs on `--fs-xs`), `dot`,
 `icon`, `numeric`, `truncate`, `variant="text"`, `removable`/`onremove` or any
 trailing action via `actionIcon`/`actionLabel`/`onaction`, `removed` mutes and
 strikes the pill for a restorable entry; all tints derive from
@@ -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
@@ -290,6 +290,8 @@ sizes the panel; an item with a `control` snippet renders as a non-button row ho
 Tabs (omit `panel` for a strip-only tablist of document tabs: `closable` + `onclose(id)`
 close through the ✕, Delete and middle-click, per-tab `leading` snippet, `title`,
 trailing `actions` snippet; `--tab-max-width` truncates long labels),
+Breadcrumb (`maxItems` collapses the middle, `size` sm/md, `wrap={false}` keeps one
+line with the current crumb ellipsised, `collapseCurrent` keeps only the ancestors),
 RadioGroup (per-option `description` in every variant, announced via
 `aria-describedby`; `onfocuschange(value)` fires once per newly focused/hovered option;
 `variant="rows"`: bordered rows, per-option `note`,
@@ -342,16 +344,19 @@ 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`
 `title | detail | meta | actions | hidden` — detail cells get a `data-label`
 prefix, `Column.stackLabel: false` drops it so metas join on one `·` line
 and details share lines, `--dt-meta-font` restyles meta values (e.g. `var(--font-sans)`; a
-literal `inherit` falls back to mono), the `<table>`
+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`;
@@ -379,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
@@ -861,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`
@@ -972,6 +1004,15 @@ from the hidden text unless `aria-label` is set:
 <Cluster stackAt="md"><Button grow>Cancel</Button><Button grow variant="primary">Save</Button></Cluster>
 ```
 
+Compact text controls (`Button size="sm"`, `Toggle`, `Switch`, `Link`) take
+the same shape, sized by `--touch-slab`: at least 8px past the block edges and
+the inline start, and at least `--touch-target-compact` (40px) tall, with no
+inline-end overflow. `SegmentedControl` items grow on the block axis and by
+half the gap sideways, which stays inside the group's padding, so neighbours
+never overlap. `Input size="sm"` cannot host a pseudo-element and grows to 40px
+instead, as should any control that clips its own overflow:
+`min-height: var(--touch-target-compact)`.
+
 `--control-height-*` and `--box-*` are **required tokens**: a consumer that
 forks `variables.css` must keep them (Button `control`, Select `sm`, every `box`)
 or those controls render with unresolved sizes.

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

@@ -11,6 +11,8 @@
 
 	type Own = {
 		src?: string | null;
+		srcset?: string;
+		sizes?: string;
 		alt: string;
 		/** Drives the gradient hue and the initials. Defaults to `alt`. */
 		seed?: string;
@@ -32,6 +34,8 @@
 	};
 	let {
 		src,
+		srcset,
+		sizes,
 		alt,
 		seed,
 		aspect = '1/1',
@@ -50,11 +54,13 @@
 	let failed = $state(false);
 	$effect(() => {
 		src;
+		srcset;
 		failed = false;
 	});
 
 	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) : '');
 
@@ -71,12 +77,13 @@
 	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}
-		<img {src} {alt} class="img fit-{fit}" loading="lazy" decoding="async" onerror={fail} />
+		<img {src} {srcset} {sizes} {alt} class="img fit-{fit}" loading="lazy" decoding="async" onerror={fail} />
 	{:else if fallback === 'initials' && text}
 		<span class="initials" aria-hidden="true">{text}</span>
 	{:else if fallback === 'icon'}

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

@@ -3,6 +3,8 @@ import type { Snippet } from 'svelte';
 import type { IconName } from './Icon.svelte';
 type Own = {
     src?: string | null;
+    srcset?: string;
+    sizes?: string;
     alt: string;
     /** Drives the gradient hue and the initials. Defaults to `alt`. */
     seed?: string;

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

@@ -13,10 +13,11 @@
 	import type { Snippet } from 'svelte';
 	import Dot from './Dot.svelte';
 	import Icon, { type IconName } from './Icon.svelte';
+	import { canonicalTone, type Tone as SharedTone } from '../../tone';
 
-	type Tone = 'neutral' | 'ok' | 'warn' | 'danger' | 'info' | 'accent' | 'muted' | 'violet';
+	type Tone = SharedTone | 'muted' | 'violet';
 
-	const TONE_COLOR: Record<Exclude<Tone, 'neutral'>, string> = {
+	const TONE_COLOR: Record<Exclude<Tone, 'neutral' | 'success'>, string> = {
 		ok: 'var(--ok)',
 		warn: 'var(--warn)',
 		danger: 'var(--danger)',
@@ -106,7 +107,8 @@
 		...rest
 	}: Omit<HTMLAttributes<HTMLElement>, keyof Own> & Own = $props();
 
-	const toneColor = $derived(color ?? (tone === 'neutral' ? undefined : TONE_COLOR[tone]));
+	const t = $derived(canonicalTone(tone));
+	const toneColor = $derived(color ?? (t === 'neutral' ? undefined : TONE_COLOR[t]));
 	const hasAction = $derived(removable || actionIcon !== undefined);
 </script>
 
@@ -120,10 +122,10 @@
 	class:grow={grow}
 	class:no-shrink={!shrink}
 	class:block={block}
-	class:badge-ok={tone === 'ok'}
-	class:badge-warn={tone === 'warn'}
-	class:badge-danger={tone === 'danger'}
-	class:badge-info={tone === 'info'}
+	class:badge-ok={t === 'ok'}
+	class:badge-warn={t === 'warn'}
+	class:badge-danger={t === 'danger'}
+	class:badge-info={t === 'info'}
 	class:toned={toneColor !== undefined}
 	class:badge-sm={size === 'sm'}
 	class:badge-xs={size === 'xs'}
@@ -138,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}
@@ -193,7 +196,7 @@
 	}
 	.badge-sm,
 	.badge-xs {
-		font-size: var(--badge-fs, calc(var(--fs-xs) * 0.92));
+		font-size: var(--badge-fs, var(--fs-xs));
 		gap: 0.15rem;
 	}
 	.badge-sm {
@@ -293,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/Badge.svelte.d.ts

@@ -1,7 +1,8 @@
 import type { HTMLAttributes } from 'svelte/elements';
 import type { Snippet } from 'svelte';
 import { type IconName } from './Icon.svelte';
-type Tone = 'neutral' | 'ok' | 'warn' | 'danger' | 'info' | 'accent' | 'muted' | 'violet';
+import { type Tone as SharedTone } from '../../tone';
+type Tone = SharedTone | 'muted' | 'violet';
 type Own = {
     tone?: Tone;
     /** Fill the free space of a flex row (`flex: 1 1 0`). */

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}
@@ -544,7 +560,8 @@
 	   The slab is the centred target with its inline-end half cut off: inline-end
 	   overflow counts towards the scrollable overflow of every scroll ancestor, and
 	   in a row that half lies under the next sibling anyway. Growing further towards
-	   the start would let each slab cover the previous sibling's centre. */
+	   the start would let each slab cover the previous sibling's centre. Text
+	   buttons at size sm take the same shape sized by --touch-slab. */
 	@media (pointer: coarse) {
 		.btn-icon:not(.hit-compact),
 		.btn-icon-inline:not(.hit-compact),
@@ -566,6 +583,16 @@
 			inset-inline-start: min(0px, calc((100% - var(--touch-target)) / 2));
 			inset-inline-end: 0;
 		}
+		.btn-sm:not(.btn-icon, .btn-icon-inline, .btn-box, .btn-square, .btn-chip, .btn-stacked, .hit-compact) {
+			position: relative;
+		}
+		.btn-sm:not(.btn-icon, .btn-icon-inline, .btn-box, .btn-square, .btn-chip, .btn-stacked, .hit-compact)::before {
+			content: '';
+			position: absolute;
+			inset-block: var(--touch-slab);
+			inset-inline-start: var(--touch-slab);
+			inset-inline-end: 0;
+		}
 	}
 
 	/* Two-state (toggle) buttons — e.g. an IconButton with `pressed`. Reacts to
@@ -703,7 +730,8 @@
 	.btn-link .btn-count,
 	.btn-icon-inline .btn-count {
 		--btn-count-size: 1rem;
-		font-size: calc(var(--fs-xs) * 0.85);
+		padding: 0 0.2rem;
+		font-size: var(--fs-xs);
 	}
 	/* The accent fill would swallow an accent pill: invert on primary. */
 	.btn-primary .btn-count {

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

@@ -170,6 +170,9 @@
 		.input-sm {
 			font-size: max(16px, var(--fs-sm));
 		}
+		.input-sm:not(.grouped) {
+			min-height: max(var(--touch-target-compact), var(--input-size, var(--control-height-compact)));
+		}
 	}
 	.input-grow {
 		flex: 1 1 0;

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,
@@ -74,4 +76,16 @@
 	.align-center {
 		text-align: center;
 	}
+	@media (pointer: coarse) {
+		.link {
+			position: relative;
+		}
+		.link::before {
+			content: '';
+			position: absolute;
+			inset-block: var(--touch-slab);
+			inset-inline-start: var(--touch-slab);
+			inset-inline-end: 0;
+		}
+	}
 </style>