@dorsk/tsumikit 0.69.0 → 0.71.0

package/README.md

@@ -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
@@ -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`,
@@ -348,9 +350,13 @@ 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, the `<table>`
+and details share lines, `--dt-meta-font` restyles meta values (e.g. `var(--font-sans)`; a
+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`,
+FilterInput (`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`;
 `key="cwd"` puts FilterInput in single-key mode — `value` is the bare value
@@ -363,7 +369,11 @@ sidebar on desktop, overlay drawer on mobile, optionally resizable;
 the content column only, `stickySidebar` pins it to the viewport, and
 `sidebarPadding="none" | "sm" | "md"` sets the aside gutter — the header and its
 children are `min-width: 0` so a wide title/actions row can't widen the grid on
-mobile), NavBar (horizontal route bar — `<nav>` + `<a aria-current="page">`,
+mobile; the mobile drawer's state is `bind:open` with `onOpenChange(open)`, and
+`closeOnNavigate` (default `true`) closes it when a plain same-origin link inside
+it is clicked — a router can also close it, e.g. SvelteKit
+`afterNavigate(() => (navOpen = false))` with `<AppShell bind:open={navOpen}>`
+to cover `goto` and back/forward), NavBar (horizontal route bar — `<nav>` + `<a aria-current="page">`,
 icon/emoji + label + count badge; `placement="bar"` pins it to the bottom edge
 over `--z-nav` with `--safe-bottom` padding, `orientation` stacks or inlines the
 glyph, `maxWidth` centres the row; items without `href` are buttons that set a
@@ -966,6 +976,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/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,6 +54,7 @@
 	let failed = $state(false);
 	$effect(() => {
 		src;
+		srcset;
 		failed = false;
 	});
 
@@ -76,7 +81,7 @@
 	{...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/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'}
@@ -193,7 +195,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 {

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

@@ -544,7 +544,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 +567,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 +714,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/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/Link.svelte

@@ -74,4 +74,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>

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

@@ -7,10 +7,11 @@
 	//     nav content collapse to icons.
 	//   • mobile: the sidebar becomes an off-canvas drawer that slides in over a
 	//     scrim; AppShell renders the hamburger toggle for you (shown only on
-	//     mobile), locks body scroll while open, closes on Escape / scrim click,
-	//     and marks the rest of the page `inert` so focus stays in the drawer.
+	//     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.
-	import type { Snippet } from 'svelte';
+	import { untrack, type Snippet } from 'svelte';
 	import { browser } from '../../env';
 	import IconButton from '../molecules/IconButton.svelte';
 
@@ -28,6 +29,9 @@
 		layout = 'header-top',
 		stickySidebar = false,
 		sidebarPadding = 'md',
+		open = $bindable(false),
+		onOpenChange,
+		closeOnNavigate = true,
 		class: klass = '',
 		style: styleProp = '',
 	}: {
@@ -54,12 +58,42 @@
 		stickySidebar?: boolean;
 		/** Inner padding of the sidebar; `'none'` when the nav owns its gutters. */
 		sidebarPadding?: 'none' | 'sm' | 'md';
+		/** Mobile drawer state; reset to `false` when the viewport reaches 48rem. */
+		open?: boolean;
+		/** Fires when AppShell itself opens or closes the drawer. */
+		onOpenChange?: (open: boolean) => void;
+		/** Close the mobile drawer when a same-origin link inside it is clicked
+		 *  (plain left click, no modifier keys, no `target` / `download`). */
+		closeOnNavigate?: boolean;
 		class?: string;
 		style?: string;
 	} = $props();
 
-	let open = $state(false);
 	let isMobile = $state(false);
+	let aside = $state<HTMLElement>();
+
+	function setOpen(next: boolean) {
+		if (open === next) return;
+		open = next;
+		onOpenChange?.(next);
+	}
+
+	function onSidebarClick(e: MouseEvent) {
+		if (!closeOnNavigate || !open) return;
+		if (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
+		const link = (e.target as Element | null)?.closest?.('a[href]');
+		if (!link) return;
+		const target = link.getAttribute('target');
+		if ((target && target !== '_self') || link.hasAttribute('download')) return;
+		let url: URL;
+		try {
+			url = new URL(link.getAttribute('href') ?? '', document.baseURI);
+		} catch {
+			return;
+		}
+		if (url.origin !== location.origin) return;
+		setOpen(false);
+	}
 
 	// --- resizable sidebar (desktop) ---
 	function loadW(): number | null {
@@ -108,13 +142,20 @@
 		const mq = window.matchMedia('(max-width: 47.999rem)');
 		const sync = () => {
 			isMobile = mq.matches;
-			if (!isMobile) open = false; // desktop: drawer concept doesn't apply
+			if (!isMobile) setOpen(false);
 		};
-		sync();
+		untrack(sync);
 		mq.addEventListener('change', sync);
 		return () => mq.removeEventListener('change', sync);
 	});
 
+	$effect(() => {
+		const el = aside;
+		if (!el) return;
+		el.addEventListener('click', onSidebarClick);
+		return () => el.removeEventListener('click', onSidebarClick);
+	});
+
 	// Lock body scroll while the mobile drawer is open.
 	$effect(() => {
 		if (!browser) return;
@@ -128,7 +169,7 @@
 	const bgInert = $derived(open && isMobile);
 </script>
 
-<svelte:window onkeydown={(e) => e.key === 'Escape' && (open = false)} />
+<svelte:window onkeydown={(e) => e.key === 'Escape' && setOpen(false)} />
 
 <div
 	class="shell {klass}"
@@ -147,7 +188,7 @@
 					icon="menu"
 					label="Toggle navigation"
 					aria-expanded={open}
-					onclick={() => (open = !open)}
+					onclick={() => setOpen(!open)}
 				/>
 			</div>
 		{/if}
@@ -160,7 +201,7 @@
 			class:show={open && isMobile}
 			tabindex="-1"
 			aria-hidden="true"
-			onclick={() => (open = false)}
+			onclick={() => setOpen(false)}
 		></button>
 		<aside
 			class="shell-sidebar"
@@ -168,6 +209,7 @@
 			data-padding={sidebarPadding}
 			aria-label={navLabel}
 			inert={isMobile && !open ? true : undefined}
+			bind:this={aside}
 		>
 			{@render sidebar()}
 			{#if resizableSidebar}

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

@@ -1,4 +1,4 @@
-import type { Snippet } from 'svelte';
+import { type Snippet } from 'svelte';
 type $$ComponentProps = {
     header?: Snippet;
     sidebar?: Snippet;
@@ -23,9 +23,16 @@ type $$ComponentProps = {
     stickySidebar?: boolean;
     /** Inner padding of the sidebar; `'none'` when the nav owns its gutters. */
     sidebarPadding?: 'none' | 'sm' | 'md';
+    /** Mobile drawer state; reset to `false` when the viewport reaches 48rem. */
+    open?: boolean;
+    /** Fires when AppShell itself opens or closes the drawer. */
+    onOpenChange?: (open: boolean) => void;
+    /** Close the mobile drawer when a same-origin link inside it is clicked
+     *  (plain left click, no modifier keys, no `target` / `download`). */
+    closeOnNavigate?: boolean;
     class?: string;
     style?: string;
 };
-declare const AppShell: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const AppShell: import("svelte").Component<$$ComponentProps, {}, "open">;
 type AppShell = ReturnType<typeof AppShell>;
 export default AppShell;

package/dist/components/molecules/Breadcrumb.svelte

@@ -19,6 +19,9 @@
 		char,
 		separator,
 		maxItems = 0,
+		size = 'sm',
+		wrap = true,
+		collapseCurrent = false,
 		class: klass = '',
 		style: styleProp = '',
 	}: {
@@ -29,6 +32,12 @@
 		/** Collapse the middle to an ellipsis when the trail is longer than this
 		 *  (0 = never collapse). Keeps the first item and the last `maxItems - 1`. */
 		maxItems?: number;
+		size?: 'sm' | 'md';
+		/** `false` keeps the trail on one line: ancestors keep their width and the
+		 *  current crumb shrinks with an ellipsis. */
+		wrap?: boolean;
+		/** Hide the current crumb and its separator, keeping only the ancestors. */
+		collapseCurrent?: boolean;
 		class?: string;
 		style?: string;
 	} = $props();
@@ -43,7 +52,14 @@
 </script>
 
 <nav aria-label="breadcrumb" data-tsu="Breadcrumb" class={klass} style={styleProp}>
-	<ol class="crumbs">
+	<ol
+		class={[
+			'crumbs',
+			size === 'md' && 'crumbs--md',
+			!wrap && 'crumbs--nowrap',
+			collapseCurrent && 'crumbs--collapse',
+		]}
+	>
 		{#each shown as item, i (i)}
 			<li class="crumb">
 				{#if 'ellipsis' in item}
@@ -57,7 +73,7 @@
 					<span class="sep" aria-hidden="true">
 						{#if separator}{@render separator()}{:else if char}{char}{:else}<Icon
 								name="chevron-right"
-								size={14}
+								size={size === 'md' ? 16 : 14}
 							/>{/if}
 					</span>
 				{/if}
@@ -77,6 +93,26 @@
 		list-style: none;
 		font-size: var(--fs-sm);
 	}
+	.crumbs--md {
+		font-size: var(--fs-md);
+	}
+	.crumbs--nowrap {
+		flex-wrap: nowrap;
+		min-width: 0;
+	}
+	.crumbs--nowrap .crumb {
+		flex-shrink: 0;
+	}
+	.crumbs--nowrap .crumb:last-child {
+		flex-shrink: 1;
+	}
+	.crumbs--nowrap .current {
+		max-width: none;
+	}
+	.crumbs--collapse .crumb:last-child:not(:first-child),
+	.crumbs--collapse .crumb:nth-last-child(2) .sep {
+		display: none;
+	}
 	.crumb {
 		display: inline-flex;
 		align-items: center;
@@ -104,6 +140,12 @@
 		text-overflow: ellipsis;
 		max-width: 24ch;
 	}
+	@media (hover: none) and (pointer: coarse) {
+		.link {
+			min-height: 40px;
+			align-content: center;
+		}
+	}
 	.ellipsis {
 		color: var(--text-muted);
 	}

package/dist/components/molecules/Breadcrumb.svelte.d.ts

@@ -11,6 +11,12 @@ type $$ComponentProps = {
     /** Collapse the middle to an ellipsis when the trail is longer than this
      *  (0 = never collapse). Keeps the first item and the last `maxItems - 1`. */
     maxItems?: number;
+    size?: 'sm' | 'md';
+    /** `false` keeps the trail on one line: ancestors keep their width and the
+     *  current crumb shrinks with an ellipsis. */
+    wrap?: boolean;
+    /** Hide the current crumb and its separator, keeping only the ancestors. */
+    collapseCurrent?: boolean;
     class?: string;
     style?: string;
 };

package/dist/components/molecules/FilterInput.svelte

@@ -524,6 +524,14 @@
 		outline: none;
 		min-width: 0;
 	}
+	@media (pointer: coarse) {
+		.fi__input {
+			font-size: max(16px, var(--fs-md));
+		}
+		.fi--sm .fi__input {
+			font-size: max(16px, var(--fs-sm));
+		}
+	}
 	.fi__input::placeholder {
 		color: var(--text-faint);
 	}

package/dist/components/molecules/SegmentedControl.svelte

@@ -179,6 +179,7 @@
 		flex-wrap: nowrap;
 		max-width: 100%;
 		overflow-x: auto;
+		overflow-y: hidden;
 		scrollbar-width: none;
 		-webkit-overflow-scrolling: touch;
 	}
@@ -244,6 +245,37 @@
 	.seg-box .seg-item {
 		height: 100%;
 	}
+	/* Wrapped rows size to their content; each item keeps the one-row height. */
+	.seg-wrap.seg-sm,
+	.seg-wrap.seg-control,
+	.seg-wrap.seg-box {
+		height: auto;
+	}
+	.seg-wrap.seg-sm .seg-item {
+		height: auto;
+		min-height: calc(var(--control-height-compact) - 8px);
+	}
+	.seg-wrap.seg-control .seg-item {
+		height: auto;
+		min-height: calc(var(--control-height) - 8px);
+	}
+	.seg-wrap.seg-box .seg-item {
+		height: auto;
+		min-height: calc(var(--control-height-default) - 8px);
+	}
+	/* Capped at half a row: one row stays a pill, extra rows square the corners. */
+	.seg-wrap:not(.seg-icon) {
+		border-radius: calc((0.6rem + 1.3 * var(--fs-sm)) / 2 + 4px);
+	}
+	.seg-wrap.seg-sm:not(.seg-icon) {
+		border-radius: calc(var(--control-height-compact) / 2);
+	}
+	.seg-wrap.seg-control:not(.seg-icon) {
+		border-radius: calc(var(--control-height) / 2);
+	}
+	.seg-wrap.seg-box:not(.seg-icon) {
+		border-radius: calc(var(--control-height-default) / 2);
+	}
 	.seg-icon .seg-item {
 		gap: 0;
 		padding: 0.35rem;
@@ -320,13 +352,24 @@
 		border-radius: var(--r-pill);
 		background: var(--bg-elevated-2);
 		color: var(--text-faint);
-		font-size: 0.6875rem;
+		font-size: var(--fs-xs);
 		font-weight: var(--fw-semibold);
 		font-variant-numeric: tabular-nums;
 		transition:
 			background 0.12s var(--ease),
 			color 0.12s var(--ease);
 	}
+	@media (pointer: coarse) {
+		.seg-item {
+			position: relative;
+		}
+		.seg-item::before {
+			content: '';
+			position: absolute;
+			inset-block: var(--touch-slab);
+			inset-inline: calc(var(--sp-1) / -2);
+		}
+	}
 	.seg-item.selected .seg-count {
 		background: color-mix(in srgb, var(--accent) 18%, transparent);
 		color: var(--accent);

package/dist/components/molecules/Toggle.svelte

@@ -108,4 +108,16 @@
 	.toggle.struck {
 		text-decoration: line-through;
 	}
+	@media (pointer: coarse) {
+		.toggle {
+			position: relative;
+		}
+		.toggle::before {
+			content: '';
+			position: absolute;
+			inset-block: var(--touch-slab);
+			inset-inline-start: var(--touch-slab);
+			inset-inline-end: 0;
+		}
+	}
 </style>

package/dist/components/organisms/DataTable.svelte

@@ -25,6 +25,16 @@
 		 *  detail cells share lines (`responsive="stack"` only, default true). */
 		stackLabel?: boolean;
 	}
+
+	let rootFontPx: number | undefined;
+
+	function rootFontSize(): number {
+		if (rootFontPx === undefined) {
+			rootFontPx = Number.parseFloat(getComputedStyle(document.documentElement).fontSize);
+			window.addEventListener('resize', () => (rootFontPx = undefined), { once: true });
+		}
+		return rootFontPx;
+	}
 </script>
 
 <script lang="ts" generics="T">
@@ -60,6 +70,7 @@
 		loadMoreLabel = 'Load more',
 		responsive = 'scroll',
 		stackBelow = '48rem',
+		stackActions = 'start',
 		class: klass = '',
 		style: styleProp = '',
 		tableClass = '',
@@ -101,6 +112,9 @@
 		responsive?: 'scroll' | 'stack';
 		/** Width (px/em/rem) under which `stack` mode kicks in. */
 		stackBelow?: string;
+		/** Where actions sit in a stacked card: `start` beside the title (wraps
+		 *  under a long one), `end` always closing the card. */
+		stackActions?: 'start' | 'end';
 		class?: string;
 		style?: string;
 		/** Class on the inner <table>. */
@@ -121,22 +135,31 @@
 		return { destroy: () => observer.disconnect() };
 	}
 
+	function markEmpty(node: HTMLElement) {
+		const update = () => node.toggleAttribute('data-empty', !node.firstElementChild && !node.textContent?.trim());
+		update();
+		const observer = new MutationObserver(update);
+		observer.observe(node, { childList: true, subtree: true, characterData: true });
+		return () => observer.disconnect();
+	}
+
 	function toPx(length: string, el: HTMLElement): number {
 		const n = Number.parseFloat(length);
-		const fontSize = (node: Element) => Number.parseFloat(getComputedStyle(node).fontSize);
-		if (length.endsWith('rem')) return n * fontSize(document.documentElement);
-		if (length.endsWith('em')) return n * fontSize(el);
+		if (length.endsWith('rem')) return n * rootFontSize();
+		if (length.endsWith('em')) return n * Number.parseFloat(getComputedStyle(el).fontSize);
 		return n;
 	}
 
+	// Font sizes are read in the observer callback, after layout, so mounting never forces a style recalc.
 	$effect(() => {
 		if (responsive !== 'stack' || !wrapEl) {
 			stacked = false;
 			return;
 		}
 		const el = wrapEl;
-		const limit = toPx(stackBelow, el);
+		const below = stackBelow;
 		const observer = new ResizeObserver(([entry]) => {
+			const limit = toPx(below, el);
 			stacked = entry.contentRect.width < limit;
 		});
 		observer.observe(el);
@@ -188,6 +211,7 @@
 	data-tsu="DataTable"
 	data-size={size}
 	data-stacked={stacked || undefined}
+	data-stack-actions={responsive === 'stack' && stackActions === 'end' ? 'end' : undefined}
 	aria-busy={loading || undefined}
 >
 	<table
@@ -267,20 +291,25 @@
 							: undefined}
 					>
 						{#each columns as col (col.key)}
+							{@const value = cellSnippets[col.key] ? undefined : display(col, row)}
 							<td
 								data-part="cell"
 								data-hide-below={col.hideBelow}
 								data-role={responsive === 'stack' ? (col.role ?? 'detail') : undefined}
 								data-label={responsive === 'stack' ? col.label : undefined}
 								data-stack-label={responsive === 'stack' && col.stackLabel === false ? 'false' : undefined}
+								data-empty={responsive === 'stack' && !cellSnippets[col.key] && (value == null || value === '')
+									? ''
+									: undefined}
 								class:truncate={col.truncate}
 								class:nowrap={col.nowrap}
 								style:text-align={stacked ? undefined : (col.align ?? 'left')}
+								{@attach responsive === 'stack' && cellSnippets[col.key] ? markEmpty : undefined}
 							>
 								{#if cellSnippets[col.key]}
 									{@render cellSnippets[col.key](row)}
 								{:else}
-									{display(col, row)}
+									{value}
 								{/if}
 							</td>
 						{/each}
@@ -479,6 +508,9 @@
 	[data-stacked] {
 		overflow-x: visible;
 	}
+	[data-stacked] .dt {
+		table-layout: fixed;
+	}
 	[data-stacked] thead {
 		position: absolute;
 		width: 1px;
@@ -552,10 +584,17 @@
 	[data-stacked] td[data-stack-label='false']::before {
 		content: none;
 	}
-	[data-stacked] td[data-role='meta'] ~ td[data-role='meta'][data-stack-label='false'] {
+	[data-stacked] td[data-part='cell'][data-empty] {
+		display: none;
+	}
+	[data-stacked]
+		td[data-role='meta']:not([data-empty])
+		~ td[data-role='meta'][data-stack-label='false']:not([data-empty]) {
 		margin-inline-start: calc(var(--sp-1) - var(--sp-3));
 	}
-	[data-stacked] td[data-role='meta'] ~ td[data-role='meta'][data-stack-label='false']::before {
+	[data-stacked]
+		td[data-role='meta']:not([data-empty])
+		~ td[data-role='meta'][data-stack-label='false']:not([data-empty])::before {
 		content: '·';
 		margin-inline-end: var(--sp-1);
 		color: var(--text-faint);
@@ -568,6 +607,10 @@
 		width: auto;
 		opacity: 1;
 	}
+	[data-stacked][data-stack-actions='end'] td[data-role='actions'],
+	[data-stacked][data-stack-actions='end'] td.dt-actions {
+		order: 2;
+	}
 	[data-stacked] td[data-role='hidden'] {
 		display: none;
 	}

package/dist/components/organisms/DataTable.svelte.d.ts

@@ -63,6 +63,9 @@ declare function $$render<T>(): {
         responsive?: "scroll" | "stack";
         /** Width (px/em/rem) under which `stack` mode kicks in. */
         stackBelow?: string;
+        /** Where actions sit in a stacked card: `start` beside the title (wraps
+         *  under a long one), `end` always closing the card. */
+        stackActions?: "start" | "end";
         class?: string;
         style?: string;
         /** Class on the inner <table>. */

package/dist/styles/tokens.css

@@ -184,6 +184,12 @@
   /* Minimum hit area on coarse pointers (WCAG 2.5.8); px so it never shrinks
 	   under a small root font-size. */
   --touch-target: 44px;
+  /* Compact controls on coarse pointers: an absolute ::before with inset-block
+	   and inset-inline-start at var(--touch-slab) and inset-inline-end: 0 (no
+	   scrollable overflow sideways). Controls that clip their overflow grow
+	   min-height to --touch-target-compact instead. */
+  --touch-target-compact: 40px;
+  --touch-slab: min(-8px, calc((100% - var(--touch-target-compact)) / 2));
 
   /* ---- Layout ---- */
   /* Fixed (px, not rem): the header is chrome that must NOT scale with the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dorsk/tsumikit",
-  "version": "0.69.0",
+  "version": "0.71.0",
   "description": "Minimal, dependency-free Svelte 5 + pure-CSS UI kit. Token-driven atoms, molecules & layouts with theming out of the box.",
   "type": "module",
   "license": "MIT",