@dorsk/tsumikit 0.22.0 → 0.23.0

package/README.md

@@ -80,7 +80,15 @@ any custom SVG).
 Popover, Menu, Tabs, RadioGroup, Tooltip, Accordion, CopyButton, FileButton,
 Dropzone, CodeBlock, Callout, EmptyState, Toaster, ThemePicker, FontScalePicker.
 
-**Organisms:** DataTable (generic `<T>`, typed columns + cell snippets).
+**Organisms:** DataTable (generic `<T>`, typed columns + cell snippets;
+`layout="fixed"` makes column widths authoritative, `Column.truncate` /
+`nowrap` / `hideBelow="sm|md|lg"` (container-query on the table's own box),
+`hideHeader` clips the header but keeps it for assistive tech, `rowTone(row)`
+paints a left accent bar + `data-tone`, `rowClass(row)`, `rowActions` snippet
+for a hover/focus-revealed trailing cell (always visible on touch),
+`stickyOffset` for the sticky header's `top`, `size="sm"`, `loading`,
+`onloadmore` footer button, `empty` as string or snippet; `data-part`
+hooks on head/row/cell).
 
 **Layouts:** AppShell (responsive header/sidebar/main/footer — persistent
 sidebar on desktop, overlay drawer on mobile, optionally resizable;
@@ -90,8 +98,10 @@ the content column only, `stickySidebar` pins it to the viewport, and
 children are `min-width: 0` so a wide title/actions row can't widen the grid on
 mobile), NavItem
 (collapses to an icon rail when the sidebar is narrow), Container, Stack
-(vertical), Cluster (wrapping row), AutoGrid (intrinsically responsive columns —
-no media/container query needed).
+(vertical), Cluster (wrapping row; `stackAt="xs|sm|md|lg"` makes it its own
+query container and stacks children full-width below 18/30/40/48rem — phone
+action rows without a viewport query), AutoGrid (intrinsically responsive
+columns — no media/container query needed).
 
 ### Container
 
@@ -199,6 +209,37 @@ Button and Popover share the same semantic tones. For a confirmed positive
 action, `tone="success"` gives neutral controls a success tint; combine it with
 `variant="primary"` for a filled success action without consumer CSS.
 
+### Square boxes & touch targets
+
+Icon-ish controls share one square scale, `box="xs" | "sm" | "md" | "lg"` =
+`--box-xs/sm/md/lg` (1.5rem / `--control-height-compact` / 2.25rem /
+`--control-height-default`): `IconButton`, `Button`, `SelectButton`, `Popover`
+(trigger), `CopyButton` (hides its label) and `FileButton` (implies `iconOnly`).
+A boxed control is always square, padding-less and `flex: none`, so a header
+row of IconButton + SelectButton + Popover lines up with no per-app overrides.
+`md` is the classic 2.25rem icon button and the default; `chip` is an outlined
+`lg`. `Button square` instead takes its side from the height contract in force
+(`size` tier, or `--control-height` with `control`), for a square text glyph in
+a toolbar. `IconButton glyphSize` sets the exact glyph size for SVG *and* text
+glyphs (`size` stays the SVG px, emoji ×1.35).
+
+On `(pointer: coarse)` every icon-only/square control (and `Popover`'s default
+trigger) carries an invisible `::after` slab that extends its hit area to
+`--touch-target` (44px, WCAG 2.5.8) without moving layout; fine pointers are
+untouched. `hitArea="compact"` opts a dense-table row out. `Button
+collapseLabel="mobile" | "container"` hides `<span data-label>` children below
+40rem viewport / 30rem container, drops to icon padding, and names the button
+from the hidden text unless `aria-label` is set:
+
+```svelte
+<Button collapseLabel="container"><Icon name="search" /><span data-label>Search</span></Button>
+<Cluster stackAt="md"><Button grow>Cancel</Button><Button grow variant="primary">Save</Button></Cluster>
+```
+
+`--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.
+
 ## Built on the platform
 
 Interactive components lean on modern web features rather than reimplementing

package/dist/components/atoms/Button.svelte

@@ -21,15 +21,29 @@
 		href?: string;
 		target?: string;
 		rel?: string;
-		// Square 2.25rem icon-only tap target (IconButton). `iconInline` is the
-		// borderless, compact variant (chip-remove ✕, inline edit ✎); pair with
-		// `hoverDanger` to tint it red on hover (delete affordances).
+		// Square icon-only tap target (IconButton), `--box-md` (2.25rem) unless
+		// `box` says otherwise. `iconInline` is the borderless, compact variant
+		// (chip-remove ✕, inline edit ✎); pair with `hoverDanger` to tint it red on
+		// hover (delete affordances).
 		icon?: boolean;
-		// Larger 2.5rem outlined square icon-chip (header/toolbar action). Pairs
-		// with `tone` for tinted severity chips (back/archive/interrupt/more).
+		// Shared square box scale (`--box-xs/sm/md/lg`): always square, no padding,
+		// never flexes. Implies an icon-only control.
+		box?: 'xs' | 'sm' | 'md' | 'lg';
+		// Square text/icon control whose side equals the current height contract:
+		// `size` tier, or `--control-height` with `control`.
+		square?: boolean;
+		// Outlined `--box-lg` icon-chip (header/toolbar action). Pairs with `tone`
+		// for tinted severity chips (back/archive/interrupt/more).
 		chip?: boolean;
 		iconInline?: boolean;
 		hoverDanger?: boolean;
+		// Hide `[data-label]` children below 40rem viewport (`mobile`) or 30rem
+		// container (`container`) so the button becomes icon-only; the hidden text
+		// becomes the aria-label unless one is set.
+		collapseLabel?: 'never' | 'mobile' | 'container';
+		// Icon-only/square buttons grow a 44px hit slab on coarse pointers without
+		// moving layout; `compact` opts out in dense tables.
+		hitArea?: 'auto' | 'compact';
 		// Async/busy state: shows a spinner, blocks clicks, sets aria-busy. Stays
 		// disabled-equivalent while true (so a double-submit can't fire).
 		loading?: boolean;
@@ -47,9 +61,13 @@
 		as = 'button',
 		href,
 		icon = false,
+		box,
+		square = false,
 		chip = false,
 		iconInline = false,
 		hoverDanger = false,
+		collapseLabel = 'never',
+		hitArea = 'auto',
 		loading = false,
 		type = 'button',
 		disabled = false,
@@ -69,10 +87,22 @@
 			? { href, 'aria-disabled': inactive || undefined }
 			: { type, disabled: inactive }
 	);
+
+	let el = $state<HTMLElement | null>(null);
+	const explicitName = $derived(rest['aria-label'] ?? rest['aria-labelledby']);
+	$effect(() => {
+		if (!el || collapseLabel === 'never' || explicitName) return;
+		const text = Array.from(el.querySelectorAll('[data-label]'), (n) => n.textContent?.trim())
+			.filter(Boolean)
+			.join(' ');
+		if (text) el.setAttribute('aria-label', text);
+		else el.removeAttribute('aria-label');
+	});
 </script>
 
 <svelte:element
 	this={tag}
+	bind:this={el}
 	data-tsu="Button"
 	{...rest}
 	{...elementAttrs}
@@ -88,7 +118,13 @@
 	class:btn-control={control}
 	class:btn-block={block}
 	class:btn-icon={icon}
+	class:btn-box={box !== undefined}
+	class:btn-square={square}
 	class:btn-chip={chip}
+	class:btn-collapse-mobile={collapseLabel === 'mobile'}
+	class:btn-collapse-container={collapseLabel === 'container'}
+	class:hit-compact={hitArea === 'compact'}
+	style:--btn-box={box ? `var(--box-${box})` : undefined}
 	class:btn-tone-accent={tone === 'accent'}
 	class:btn-tone-success={tone === 'success'}
 	class:btn-tone-info={tone === 'info'}
@@ -226,11 +262,12 @@
 	/* Icon-chip: larger square outlined tap target for header/toolbar actions.
 	   Combines with a tone for tinted severity chips. */
 	.btn-chip {
-		min-height: 2.5rem;
-		min-width: 2.5rem;
-		height: 2.5rem;
-		width: 2.5rem;
+		min-height: var(--box-lg);
+		min-width: var(--box-lg);
+		height: var(--box-lg);
+		width: var(--box-lg);
 		padding: 0;
+		flex: none;
 		border-radius: var(--r-md);
 	}
 
@@ -317,12 +354,41 @@
 		filter: brightness(1.08);
 	}
 
-	/* Icon-only buttons (IconButton). Square box = consistent 2.25rem tap target. */
+	/* Icon-only buttons (IconButton). Square box = consistent --box-md tap target. */
 	.btn-icon {
-		min-height: 2.25rem;
-		min-width: 2.25rem;
+		min-height: var(--box-md);
+		min-width: var(--box-md);
 		padding: var(--sp-2);
 	}
+	/* `square`: side = the height contract in force (size tier or control). */
+	.btn-square {
+		width: var(--control-height-default);
+		min-width: var(--control-height-default);
+		padding: 0;
+		flex: none;
+	}
+	.btn-square.btn-sm {
+		width: var(--control-height-compact);
+		min-width: var(--control-height-compact);
+	}
+	.btn-square.btn-lg {
+		width: var(--control-height-large);
+		min-width: var(--control-height-large);
+		height: var(--control-height-large);
+	}
+	.btn-square.btn-control {
+		width: var(--control-height);
+		min-width: var(--control-height);
+	}
+	/* `box`: explicit square scale, wins over icon/chip/square/size sizing. */
+	.btn-box {
+		width: var(--btn-box);
+		min-width: var(--btn-box);
+		height: var(--btn-box);
+		min-height: var(--btn-box);
+		padding: 0;
+		flex: none;
+	}
 	.btn-icon-inline {
 		min-height: 0;
 		min-width: 0;
@@ -340,6 +406,49 @@
 		color: var(--danger);
 	}
 
+	/* Label collapse: `[data-label]` children disappear below the threshold and
+	   the button falls back to icon-only padding. */
+	@media (max-width: 40rem) {
+		.btn-collapse-mobile :global([data-label]) {
+			display: none;
+		}
+		.btn-collapse-mobile {
+			padding: var(--sp-2);
+			gap: 0;
+		}
+	}
+	@container (max-width: 30rem) {
+		.btn-collapse-container :global([data-label]) {
+			display: none;
+		}
+		.btn-collapse-container {
+			padding: var(--sp-2);
+			gap: 0;
+		}
+	}
+
+	/* Coarse pointers: icon-only and square buttons carry an invisible slab that
+	   extends the hit area to --touch-target without changing layout. Buttons
+	   already at or above the target keep their own box (inset never positive). */
+	@media (pointer: coarse) {
+		.btn-icon:not(.hit-compact),
+		.btn-icon-inline:not(.hit-compact),
+		.btn-box:not(.hit-compact),
+		.btn-square:not(.hit-compact),
+		.btn-chip:not(.hit-compact) {
+			position: relative;
+		}
+		.btn-icon:not(.hit-compact)::after,
+		.btn-icon-inline:not(.hit-compact)::after,
+		.btn-box:not(.hit-compact)::after,
+		.btn-square:not(.hit-compact)::after,
+		.btn-chip:not(.hit-compact)::after {
+			content: '';
+			position: absolute;
+			inset: min(0px, calc((100% - var(--touch-target)) / 2));
+		}
+	}
+
 	/* Two-state (toggle) buttons — e.g. an IconButton with `pressed`. Reacts to
 	   the native aria-pressed that flows through, so no extra class. Tint defaults
 	   to the accent; override per-instance with `style="--btn-on: var(--warn)"`. */

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

@@ -12,9 +12,13 @@ type ButtonProps = HTMLButtonAttributes & {
     target?: string;
     rel?: string;
     icon?: boolean;
+    box?: 'xs' | 'sm' | 'md' | 'lg';
+    square?: boolean;
     chip?: boolean;
     iconInline?: boolean;
     hoverDanger?: boolean;
+    collapseLabel?: 'never' | 'mobile' | 'container';
+    hitArea?: 'auto' | 'compact';
     loading?: boolean;
     class?: string;
     children?: Snippet;

package/dist/components/layouts/Cluster.svelte

@@ -10,6 +10,9 @@
 	// SegmentedControl/Select `control`), so a whole toolbar lines up from one prop
 	// instead of per-child sizing. `grow` makes direct children share the row width
 	// equally (flex: 1) — the toolbar equivalent of `style="flex:1"` on each child.
+	// `stackAt` turns the cluster into its own inline-size query container and
+	// stacks children full-width once it is narrower than the tier (18/30/40/48rem),
+	// for phone action rows; the cluster then no longer shrink-wraps its content.
 	const CONTROL_TIER = {
 		sm: 'var(--control-height-compact)',
 		md: 'var(--control-height-default)',
@@ -24,6 +27,7 @@
 		wrap = true,
 		size,
 		grow = false,
+		stackAt,
 		class: klass = '',
 		children,
 		...rest
@@ -35,6 +39,7 @@
 		wrap?: boolean;
 		size?: 'sm' | 'md' | 'lg';
 		grow?: boolean;
+		stackAt?: 'xs' | 'sm' | 'md' | 'lg';
 		class?: string;
 		children?: Snippet;
 		[key: string]: unknown;
@@ -46,6 +51,11 @@
 	data-tsu="Cluster"
 	class="cluster-c {klass}"
 	class:cluster-grow={grow}
+	class:cluster-stack={stackAt !== undefined}
+	class:stack-xs={stackAt === 'xs'}
+	class:stack-sm={stackAt === 'sm'}
+	class:stack-md={stackAt === 'md'}
+	class:stack-lg={stackAt === 'lg'}
 	style:gap
 	style:align-items={align}
 	style:justify-content={justify}
@@ -64,4 +74,27 @@
 		flex: 1 1 0;
 		min-width: 0;
 	}
+	.cluster-stack {
+		container-type: inline-size;
+	}
+	@container (max-width: 18rem) {
+		.stack-xs > :global(*) {
+			flex: 1 1 100%;
+		}
+	}
+	@container (max-width: 30rem) {
+		.stack-sm > :global(*) {
+			flex: 1 1 100%;
+		}
+	}
+	@container (max-width: 40rem) {
+		.stack-md > :global(*) {
+			flex: 1 1 100%;
+		}
+	}
+	@container (max-width: 48rem) {
+		.stack-lg > :global(*) {
+			flex: 1 1 100%;
+		}
+	}
 </style>

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

@@ -7,6 +7,7 @@ type $$ComponentProps = {
     wrap?: boolean;
     size?: 'sm' | 'md' | 'lg';
     grow?: boolean;
+    stackAt?: 'xs' | 'sm' | 'md' | 'lg';
     class?: string;
     children?: Snippet;
     [key: string]: unknown;

package/dist/components/molecules/CopyButton.svelte

@@ -13,7 +13,9 @@
 		label = 'Copy',
 		copiedLabel = 'Copied',
 		variant = 'ghost',
-		showLabel = true,
+		showLabel,
+		box,
+		hitArea = 'auto',
 		resetMs = 1500,
 		class: klass = ''
 	}: {
@@ -22,11 +24,16 @@
 		label?: string;
 		copiedLabel?: string;
 		variant?: 'default' | 'primary' | 'ghost' | 'danger';
+		/** Defaults to true, or false when `box` makes it icon-only. */
 		showLabel?: boolean;
+		/** Shared square box scale (`--box-xs/sm/md/lg`): a square icon-only copy control. */
+		box?: 'xs' | 'sm' | 'md' | 'lg';
+		hitArea?: 'auto' | 'compact';
 		resetMs?: number;
 		class?: string;
 	} = $props();
 
+	const labelShown = $derived(showLabel ?? box === undefined);
 	let copied = $state(false);
 	let status = $state('');
 	let timer: ReturnType<typeof setTimeout> | undefined;
@@ -46,12 +53,14 @@
 <Button
 	data-tsu="CopyButton"
 	{variant}
+	{box}
+	{hitArea}
 	class={klass}
 	onclick={copy}
 	aria-label={copied ? copiedLabel : label}
 	title={label}
 >
 	<Icon name={copied ? 'check' : 'copy'} />
-	{#if showLabel}<span>{copied ? copiedLabel : label}</span>{/if}
+	{#if labelShown}<span>{copied ? copiedLabel : label}</span>{/if}
 </Button>
 <span class="sr-only" role="status" aria-live="polite">{status}</span>

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

@@ -4,7 +4,11 @@ type $$ComponentProps = {
     label?: string;
     copiedLabel?: string;
     variant?: 'default' | 'primary' | 'ghost' | 'danger';
+    /** Defaults to true, or false when `box` makes it icon-only. */
     showLabel?: boolean;
+    /** Shared square box scale (`--box-xs/sm/md/lg`): a square icon-only copy control. */
+    box?: 'xs' | 'sm' | 'md' | 'lg';
+    hitArea?: 'auto' | 'compact';
     resetMs?: number;
     class?: string;
 };

package/dist/components/molecules/FileButton.svelte

@@ -16,6 +16,8 @@
 		disabled = false,
 		variant = 'default',
 		size = 'md',
+		box,
+		hitArea = 'auto',
 		class: klass = ''
 	}: {
 		onfiles: (files: File[]) => void;
@@ -36,9 +38,15 @@
 		/** Match the Button atom's sizes so a FileButton lines up with buttons in
 		 *  the same row. */
 		size?: 'sm' | 'md' | 'lg';
+		/** Shared square box scale (`--box-xs/sm/md/lg`); implies `iconOnly`. */
+		box?: 'xs' | 'sm' | 'md' | 'lg';
+		/** Icon-only buttons grow a 44px hit slab on coarse pointers; `compact` opts out. */
+		hitArea?: 'auto' | 'compact';
 		class?: string;
 	} = $props();
 
+	const onlyIcon = $derived(iconOnly || box !== undefined);
+
 	function onchange(e: Event) {
 		const input = e.currentTarget as HTMLInputElement;
 		const files = Array.from(input.files ?? []);
@@ -54,9 +62,12 @@
 	class:ghost={variant === 'ghost'}
 	class:sm={size === 'sm'}
 	class:lg={size === 'lg'}
-	class:icon-only={iconOnly}
+	class:icon-only={onlyIcon}
+	class:box={box !== undefined}
+	class:hit-compact={hitArea === 'compact'}
+	style:--file-box={box ? `var(--box-${box})` : undefined}
 	class:disabled
-	aria-label={iconOnly ? label : undefined}
+	aria-label={onlyIcon ? label : undefined}
 >
 	<input
 		class="sr-only"
@@ -71,7 +82,7 @@
 	{:else if emoji}
 		<span class="emoji" aria-hidden="true">{emoji}</span>
 	{/if}
-	<span class:sr-only={iconOnly}>{label}</span>
+	<span class:sr-only={onlyIcon}>{label}</span>
 </label>
 
 <style>
@@ -120,6 +131,24 @@
 		padding: var(--sp-2);
 		aspect-ratio: 1;
 	}
+	.file-btn.box {
+		width: var(--file-box);
+		min-width: var(--file-box);
+		height: var(--file-box);
+		min-height: var(--file-box);
+		padding: 0;
+		flex: none;
+	}
+	@media (pointer: coarse) {
+		.file-btn.icon-only:not(.hit-compact) {
+			position: relative;
+		}
+		.file-btn.icon-only:not(.hit-compact)::after {
+			content: '';
+			position: absolute;
+			inset: min(0px, calc((100% - var(--touch-target)) / 2));
+		}
+	}
 	/* Emoji glyph is bumped above the text size — at 1em a paperclip is hard to
 	   read, so render it a touch larger for legibility. */
 	.emoji {

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

@@ -18,6 +18,10 @@ type $$ComponentProps = {
     /** Match the Button atom's sizes so a FileButton lines up with buttons in
      *  the same row. */
     size?: 'sm' | 'md' | 'lg';
+    /** Shared square box scale (`--box-xs/sm/md/lg`); implies `iconOnly`. */
+    box?: 'xs' | 'sm' | 'md' | 'lg';
+    /** Icon-only buttons grow a 44px hit slab on coarse pointers; `compact` opts out. */
+    hitArea?: 'auto' | 'compact';
     class?: string;
 };
 declare const FileButton: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/components/molecules/IconButton.svelte

@@ -18,9 +18,18 @@
 		variant?: 'default' | 'primary' | 'ghost' | 'danger';
 		// Semantic state tint (forwarded to Button). Pairs well with `chip`.
 		tone?: 'none' | 'accent' | 'info' | 'warn' | 'danger';
-		// Larger 2.5rem outlined square icon-chip (header/toolbar actions).
+		// Outlined `--box-lg` square icon-chip (header/toolbar actions).
 		chip?: boolean;
+		// Shared square box scale (`--box-xs/sm/md/lg`); default `md` is the classic
+		// 2.25rem box. Forwarded to Button.
+		box?: 'xs' | 'sm' | 'md' | 'lg';
+		// SVG glyph px. Emoji text glyphs render at ×1.35 of it.
 		size?: number;
+		// Exact glyph size for SVG *and* text glyphs (px number or any CSS length),
+		// no emoji multiplier. Wins over `size`.
+		glyphSize?: number | string;
+		// Opt out of the 44px coarse-pointer hit slab in dense rows.
+		hitArea?: 'auto' | 'compact';
 		// Borderless, compact icon affordance (chip-remove ✕, inline edit ✎) —
 		// no square box; just a muted glyph that brightens on hover. Pair with
 		// `hoverDanger` to tint it red on hover (delete affordances).
@@ -46,7 +55,10 @@
 		variant = 'ghost',
 		tone = 'none',
 		chip = false,
+		box,
 		size = 18,
+		glyphSize,
+		hitArea = 'auto',
 		inline = false,
 		hoverDanger = false,
 		pressed,
@@ -55,6 +67,11 @@
 		class: klass = '',
 		...rest
 	}: IconButtonProps = $props();
+
+	const glyphCss = $derived(
+		glyphSize === undefined ? undefined : typeof glyphSize === 'number' ? `${glyphSize}px` : glyphSize
+	);
+	const emojiCss = $derived(glyphCss ?? `${size * 1.35}px`);
 </script>
 
 <!-- Composition: the icon-only button is a Button (canonical control styling)
@@ -65,6 +82,8 @@
 	{variant}
 	{tone}
 	{chip}
+	{box}
+	{hitArea}
 	{disabled}
 	{title}
 	{onclick}
@@ -76,19 +95,28 @@
 	aria-label={label}
 >
 	{#if children}
-		<Icon {size}>{@render children()}</Icon>
+		{#if glyphCss}
+			<span class="glyph" style="font-size: {glyphCss}"><Icon>{@render children()}</Icon></span>
+		{:else}
+			<Icon {size}>{@render children()}</Icon>
+		{/if}
 	{:else if emoji}
-		<span class="emoji" style="font-size: {size * 1.35}px" aria-hidden="true">{emoji}</span>
+		<span class="emoji" style="font-size: {emojiCss}" aria-hidden="true">{emoji}</span>
 	{:else if icon}
-		<Icon name={icon} {size} />
+		{#if glyphCss}
+			<span class="glyph" style="font-size: {glyphCss}"><Icon name={icon} /></span>
+		{:else}
+			<Icon name={icon} {size} />
+		{/if}
 	{/if}
 </Button>
 
 <style>
 	/* Off-registry glyph (emoji) rendered as text rather than an SVG. Sized off the
 	   `size` prop (×1.35, since an emoji reads small next to an SVG glyph of the
-	   same px) and centered so it shares the button's tap target. */
-	.emoji {
+	   same px) unless `glyphSize` is exact; centered so it shares the tap target. */
+	.emoji,
+	.glyph {
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;

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

@@ -14,7 +14,10 @@ type IconButtonProps = HTMLButtonAttributes & {
     variant?: 'default' | 'primary' | 'ghost' | 'danger';
     tone?: 'none' | 'accent' | 'info' | 'warn' | 'danger';
     chip?: boolean;
+    box?: 'xs' | 'sm' | 'md' | 'lg';
     size?: number;
+    glyphSize?: number | string;
+    hitArea?: 'auto' | 'compact';
     inline?: boolean;
     hoverDanger?: boolean;
     pressed?: boolean;

package/dist/components/molecules/Popover.svelte

@@ -27,8 +27,10 @@
 		variant,
 		tone = 'none',
 		size,
+		box,
 		control = false,
 		block = false,
+		hitArea = 'auto',
 		disabled = false,
 		onopen,
 		onclose
@@ -52,9 +54,14 @@
 		variant?: TriggerVariant;
 		tone?: TriggerTone;
 		size?: TriggerSize;
+		/** Shared square box scale (`--box-xs/sm/md/lg`) for an icon-only trigger;
+		 *  the default trigger is the `md` 2.25rem box. */
+		box?: 'xs' | 'sm' | 'md' | 'lg';
 		/** Use the shared `--control-height` toolbar/composer contract. */
 		control?: boolean;
 		block?: boolean;
+		/** Icon-only triggers grow a 44px hit slab on coarse pointers; `compact` opts out. */
+		hitArea?: 'auto' | 'compact';
 		disabled?: boolean;
 		onopen?: () => void;
 		onclose?: () => void;
@@ -109,6 +116,9 @@
 	class:trigger-lg={size === 'lg'}
 	class:trigger-control={control}
 	class:trigger-block={block}
+	class:trigger-box={box !== undefined}
+	class:hit-compact={hitArea === 'compact'}
+	style:--pop-box={box ? `var(--box-${box})` : undefined}
 	class:trigger-tone-accent={tone === 'accent'}
 	class:trigger-tone-success={tone === 'success'}
 	class:trigger-tone-info={tone === 'info'}
@@ -143,8 +153,8 @@
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
-		min-height: 2.25rem;
-		min-width: 2.25rem;
+		min-height: var(--box-md);
+		min-width: var(--box-md);
 		padding: var(--sp-2);
 		border: 1px solid transparent;
 		border-radius: var(--r-md);
@@ -221,6 +231,26 @@
 	.pop-trigger.trigger-block {
 		width: 100%;
 	}
+	.pop-trigger.trigger-box {
+		width: var(--pop-box);
+		min-width: var(--pop-box);
+		height: var(--pop-box);
+		min-height: var(--pop-box);
+		padding: 0;
+		flex: none;
+	}
+	/* Coarse pointers: icon-only triggers extend their hit area to --touch-target
+	   via an invisible slab; layout does not move. */
+	@media (pointer: coarse) {
+		.pop-trigger:not(.canonical, .bare, .hit-compact) {
+			position: relative;
+		}
+		.pop-trigger:not(.canonical, .bare, .hit-compact)::after {
+			content: '';
+			position: absolute;
+			inset: min(0px, calc((100% - var(--touch-target)) / 2));
+		}
+	}
 	.pop-trigger.trigger-tone-accent {
 		--pop-trigger-tone: var(--accent);
 	}

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

@@ -23,9 +23,14 @@ type $$ComponentProps = {
     variant?: TriggerVariant;
     tone?: TriggerTone;
     size?: TriggerSize;
+    /** Shared square box scale (`--box-xs/sm/md/lg`) for an icon-only trigger;
+     *  the default trigger is the `md` 2.25rem box. */
+    box?: 'xs' | 'sm' | 'md' | 'lg';
     /** Use the shared `--control-height` toolbar/composer contract. */
     control?: boolean;
     block?: boolean;
+    /** Icon-only triggers grow a 44px hit slab on coarse pointers; `compact` opts out. */
+    hitArea?: 'auto' | 'compact';
     disabled?: boolean;
     onopen?: () => void;
     onclose?: () => void;

package/dist/components/molecules/SelectButton.svelte

@@ -17,6 +17,8 @@
 		options,
 		groups,
 		onchange,
+		box,
+		hitArea = 'auto',
 		class: klass = '',
 		...rest
 	}: {
@@ -31,6 +33,9 @@
 		// the theme picker to split light/dark; falls back to `options` otherwise.
 		groups?: { label: string; options: Option[] }[];
 		onchange: (value: string) => void;
+		// Shared square box scale (`--box-xs/sm/md/lg`); default is the 2.25rem icon box.
+		box?: 'xs' | 'sm' | 'md' | 'lg';
+		hitArea?: 'auto' | 'compact';
 		class?: string;
 		[key: string]: unknown;
 	} = $props();
@@ -39,7 +44,7 @@
 <!-- The wrapper (owned here, so styled scoped) is the positioning context that
      clips the transparent overlaid <select>; the icon Button shows through. -->
 <span class="select-button {klass}" data-tsu="SelectButton" {...rest}>
-	<Button variant="ghost" icon {title} aria-label={label}>
+	<Button variant="ghost" icon {box} {hitArea} {title} aria-label={label}>
 		<span aria-hidden="true">{glyph}</span>
 		<Select
 			variant="ghost"

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

@@ -13,6 +13,8 @@ type $$ComponentProps = {
         options: Option[];
     }[];
     onchange: (value: string) => void;
+    box?: 'xs' | 'sm' | 'md' | 'lg';
+    hitArea?: 'auto' | 'compact';
     class?: string;
     [key: string]: unknown;
 };

package/dist/components/organisms/DataTable.svelte

@@ -1,4 +1,6 @@
 <script lang="ts" module>
+	export type RowTone = 'neutral' | 'ok' | 'warn' | 'danger' | 'info';
+
 	export interface Column<T> {
 		/** Key into the row, or an arbitrary id when paired with a cell snippet. */
 		key: string;
@@ -10,6 +12,12 @@
 		/** Header becomes a sort toggle. Sorts by the displayed value unless an
 		 *  `onsort` handler is supplied (then the caller controls ordering). */
 		sortable?: boolean;
+		/** One-line cells clipped with an ellipsis (pair with `layout="fixed"`). */
+		truncate?: boolean;
+		nowrap?: boolean;
+		/** Drop the column when the table's own box is narrower than the breakpoint
+		 *  (sm 30rem, md 48rem, lg 64rem). */
+		hideBelow?: 'sm' | 'md' | 'lg';
 	}
 </script>
 
@@ -30,7 +38,19 @@
 		onsort,
 		cellSnippets = {},
 		empty = 'No data.',
-		stickyHeader = false
+		stickyHeader = false,
+		stickyOffset,
+		layout = 'auto',
+		hideHeader = false,
+		size = 'md',
+		rowTone,
+		rowClass,
+		rowActions,
+		rowActionsLabel = 'Actions',
+		loading = false,
+		loadingLabel = 'Loading…',
+		onloadmore,
+		loadMoreLabel = 'Load more'
 	}: {
 		columns: Column<T>[];
 		rows: T[];
@@ -41,13 +61,34 @@
 		 *  table only reflects the indicator and emits; it does not reorder rows. */
 		onsort?: (key: string, dir: 'asc' | 'desc') => void;
 		cellSnippets?: Record<string, Snippet<[T]>>;
-		empty?: string;
+		empty?: string | Snippet;
 		stickyHeader?: boolean;
+		/** Distance from the scroll container's top for the sticky header, e.g.
+		 *  `var(--header-h)` when the page header overlaps. Defaults to 0. */
+		stickyOffset?: string;
+		/** `fixed` makes declared column widths authoritative (needed for truncate). */
+		layout?: 'auto' | 'fixed';
+		/** Visually hides the header; it stays in the DOM for assistive tech. */
+		hideHeader?: boolean;
+		size?: 'sm' | 'md';
+		/** Per-row semantic tone, rendered as a left accent bar + `data-tone`. */
+		rowTone?: (row: T) => RowTone | undefined;
+		rowClass?: (row: T) => string | undefined;
+		/** Trailing actions cell revealed on hover/focus (always visible on touch). */
+		rowActions?: Snippet<[T]>;
+		rowActionsLabel?: string;
+		loading?: boolean;
+		loadingLabel?: string;
+		/** Renders a footer "load more" button that calls this. */
+		onloadmore?: () => void;
+		loadMoreLabel?: string;
 	} = $props();
 
 	let sortKey = $state<string | null>(null);
 	let sortDir = $state<'asc' | 'desc'>('asc');
 
+	const colCount = $derived(columns.length + (rowActions ? 1 : 0));
+
 	function display(col: Column<T>, row: T): unknown {
 		if (col.get) return col.get(row);
 		return (row as Record<string, unknown>)[col.key];
@@ -80,13 +121,21 @@
 	});
 </script>
 
-<div class="dt-scroll" data-tsu="DataTable">
-	<table class="dt" class:sticky={stickyHeader}>
-		<thead>
+<div class="dt-scroll" data-tsu="DataTable" data-size={size} aria-busy={loading || undefined}>
+	<table
+		class="dt"
+		class:sticky={stickyHeader}
+		class:fixed={layout === 'fixed'}
+		class:head-hidden={hideHeader}
+		class:sm={size === 'sm'}
+		style:--dt-sticky-offset={stickyOffset}
+	>
+		<thead data-part="head">
 			<tr>
 				{#each columns as col (col.key)}
 					<th
 						scope="col"
+						data-hide-below={col.hideBelow}
 						style:width={col.width}
 						style:text-align={col.align ?? 'left'}
 						aria-sort={col.sortable
@@ -109,17 +158,31 @@
 						{/if}
 					</th>
 				{/each}
+				{#if rowActions}
+					<th scope="col" class="dt-actions-head"><span class="sr-only">{rowActionsLabel}</span></th>
+				{/if}
 			</tr>
 		</thead>
 		<tbody>
-			{#if sortedRows.length === 0}
-				<tr>
-					<td class="dt-empty" colspan={columns.length}>{empty}</td>
+			{#if sortedRows.length === 0 && !loading}
+				<tr data-part="empty">
+					<td class="dt-empty" colspan={colCount}>
+						{#if typeof empty === 'string'}
+							{empty}
+						{:else}
+							{@render empty()}
+						{/if}
+					</td>
 				</tr>
 			{:else}
 				{#each sortedRows as row (rowKey(row))}
+					{@const tone = rowTone?.(row)}
 					<tr
+						data-part="row"
+						data-tone={tone}
+						class={rowClass?.(row)}
 						class:clickable={!!onrowclick}
+						class:toned={!!tone && tone !== 'neutral'}
 						tabindex={onrowclick ? 0 : undefined}
 						role={onrowclick ? 'button' : undefined}
 						onclick={onrowclick ? () => onrowclick(row) : undefined}
@@ -133,7 +196,13 @@
 							: undefined}
 					>
 						{#each columns as col (col.key)}
-							<td style:text-align={col.align ?? 'left'}>
+							<td
+								data-part="cell"
+								data-hide-below={col.hideBelow}
+								class:truncate={col.truncate}
+								class:nowrap={col.nowrap}
+								style:text-align={col.align ?? 'left'}
+							>
 								{#if cellSnippets[col.key]}
 									{@render cellSnippets[col.key](row)}
 								{:else}
@@ -141,10 +210,29 @@
 								{/if}
 							</td>
 						{/each}
+						{#if rowActions}
+							<td data-part="actions" class="dt-actions">
+								{@render rowActions(row)}
+							</td>
+						{/if}
 					</tr>
 				{/each}
 			{/if}
+			{#if loading}
+				<tr data-part="loading">
+					<td class="dt-empty" colspan={colCount}>{loadingLabel}</td>
+				</tr>
+			{/if}
 		</tbody>
+		{#if onloadmore && !loading}
+			<tfoot>
+				<tr>
+					<td class="dt-more" colspan={colCount}>
+						<button type="button" class="dt-more-btn" onclick={onloadmore}>{loadMoreLabel}</button>
+					</td>
+				</tr>
+			</tfoot>
+		{/if}
 	</table>
 </div>
 
@@ -155,6 +243,7 @@
 		-webkit-overflow-scrolling: touch;
 		border: 1px solid var(--border);
 		border-radius: var(--r-lg);
+		container-type: inline-size;
 	}
 	.dt {
 		width: 100%;
@@ -162,11 +251,21 @@
 		font-size: var(--fs-sm);
 		background: var(--surface);
 	}
+	.dt.fixed {
+		table-layout: fixed;
+	}
+	.dt.sm {
+		font-size: var(--fs-xs);
+	}
 	th,
 	td {
 		padding: var(--sp-2) var(--sp-3);
 		border-bottom: 1px solid var(--border);
 	}
+	.dt.sm th,
+	.dt.sm td {
+		padding: var(--sp-1) var(--sp-2);
+	}
 	th {
 		font-size: var(--fs-xs);
 		font-weight: var(--fw-semibold);
@@ -178,9 +277,23 @@
 	}
 	.dt.sticky th {
 		position: sticky;
-		top: 0;
+		top: var(--dt-sticky-offset, 0);
 		z-index: 1;
 	}
+	/* Header stays in flow (so widths still apply) but paints nothing. */
+	.dt.head-hidden th {
+		height: 0;
+		padding: 0;
+		border: 0;
+		line-height: 0;
+		overflow: hidden;
+		clip-path: inset(50%);
+	}
+	.dt.head-hidden th > * {
+		display: block;
+		height: 0;
+		overflow: hidden;
+	}
 	/* Sort toggle: a bare button that inherits the th's type styling. */
 	.dt-sort {
 		display: inline-flex;
@@ -218,9 +331,96 @@
 		background: var(--bg-elevated-2);
 		outline: none;
 	}
+	td.truncate {
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		max-width: 0;
+	}
+	td.nowrap {
+		white-space: nowrap;
+	}
+	tr[data-tone='ok'] {
+		--dt-tone: var(--ok);
+	}
+	tr[data-tone='warn'] {
+		--dt-tone: var(--warn);
+	}
+	tr[data-tone='danger'] {
+		--dt-tone: var(--danger);
+	}
+	tr[data-tone='info'] {
+		--dt-tone: var(--info);
+	}
+	tr.toned td:first-child {
+		box-shadow: inset 3px 0 0 var(--dt-tone);
+	}
+	.dt-actions-head,
+	.dt-actions {
+		width: 1%;
+		white-space: nowrap;
+		text-align: right;
+	}
+	.dt-actions {
+		opacity: 0;
+		transition: opacity 0.12s var(--ease);
+	}
+	tr:hover .dt-actions,
+	tr:focus-within .dt-actions {
+		opacity: 1;
+	}
+	@media (pointer: coarse) {
+		.dt-actions {
+			opacity: 1;
+		}
+	}
+	@container (max-width: 30rem) {
+		[data-hide-below='sm'] {
+			display: none;
+		}
+	}
+	@container (max-width: 48rem) {
+		[data-hide-below='md'] {
+			display: none;
+		}
+	}
+	@container (max-width: 64rem) {
+		[data-hide-below='lg'] {
+			display: none;
+		}
+	}
 	.dt-empty {
 		text-align: center;
 		color: var(--text-faint);
 		padding: var(--sp-8);
 	}
+	.dt-more {
+		text-align: center;
+		padding: var(--sp-2);
+		border-top: 1px solid var(--border);
+	}
+	.dt-more-btn {
+		border: 0;
+		background: none;
+		padding: var(--sp-1) var(--sp-3);
+		font: inherit;
+		color: var(--accent);
+		cursor: pointer;
+		border-radius: var(--r-md, 6px);
+	}
+	.dt-more-btn:hover,
+	.dt-more-btn:focus-visible {
+		background: var(--bg-elevated-2);
+	}
+	.sr-only {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		padding: 0;
+		margin: -1px;
+		overflow: hidden;
+		clip: rect(0, 0, 0, 0);
+		white-space: nowrap;
+		border: 0;
+	}
 </style>

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

@@ -1,3 +1,4 @@
+export type RowTone = 'neutral' | 'ok' | 'warn' | 'danger' | 'info';
 export interface Column<T> {
     /** Key into the row, or an arbitrary id when paired with a cell snippet. */
     key: string;
@@ -9,6 +10,12 @@ export interface Column<T> {
     /** Header becomes a sort toggle. Sorts by the displayed value unless an
      *  `onsort` handler is supplied (then the caller controls ordering). */
     sortable?: boolean;
+    /** One-line cells clipped with an ellipsis (pair with `layout="fixed"`). */
+    truncate?: boolean;
+    nowrap?: boolean;
+    /** Drop the column when the table's own box is narrower than the breakpoint
+     *  (sm 30rem, md 48rem, lg 64rem). */
+    hideBelow?: 'sm' | 'md' | 'lg';
 }
 import type { Snippet } from 'svelte';
 declare function $$render<T>(): {
@@ -22,8 +29,27 @@ declare function $$render<T>(): {
          *  table only reflects the indicator and emits; it does not reorder rows. */
         onsort?: (key: string, dir: "asc" | "desc") => void;
         cellSnippets?: Record<string, Snippet<[T]>>;
-        empty?: string;
+        empty?: string | Snippet;
         stickyHeader?: boolean;
+        /** Distance from the scroll container's top for the sticky header, e.g.
+         *  `var(--header-h)` when the page header overlaps. Defaults to 0. */
+        stickyOffset?: string;
+        /** `fixed` makes declared column widths authoritative (needed for truncate). */
+        layout?: "auto" | "fixed";
+        /** Visually hides the header; it stays in the DOM for assistive tech. */
+        hideHeader?: boolean;
+        size?: "sm" | "md";
+        /** Per-row semantic tone, rendered as a left accent bar + `data-tone`. */
+        rowTone?: (row: T) => RowTone | undefined;
+        rowClass?: (row: T) => string | undefined;
+        /** Trailing actions cell revealed on hover/focus (always visible on touch). */
+        rowActions?: Snippet<[T]>;
+        rowActionsLabel?: string;
+        loading?: boolean;
+        loadingLabel?: string;
+        /** Renders a footer "load more" button that calls this. */
+        onloadmore?: () => void;
+        loadMoreLabel?: string;
     };
     exports: {};
     bindings: "";

package/dist/index.d.ts

@@ -53,7 +53,7 @@ export { default as Toaster } from './components/molecules/Toaster.svelte';
 export { default as Toggle } from './components/molecules/Toggle.svelte';
 export { default as Tooltip } from './components/molecules/Tooltip.svelte';
 export { default as Truncate } from './components/molecules/Truncate.svelte';
-export { type Column, default as DataTable } from './components/organisms/DataTable.svelte';
+export { type Column, default as DataTable, type RowTone, } from './components/organisms/DataTable.svelte';
 export { default as FilterSearchBar } from './components/organisms/FilterSearchBar.svelte';
 export { type AndNode, activeToken, compilePredicate, defaultOperator, type ExprNode, type FieldDef, type FieldType, type FilterNode, filters, findField, freeText, type LeafNode, type NotNode, OPERATORS, type Operator, type OperatorId, type OrNode, operatorByCode, operatorById, operatorsFor, parse, type Query, type QueryNode, resolveValues, type Schema, type Suggestion, type SuggestKind, type SuggestState, serialize, serializeFilter, suggest, type TextNode, toSql, type ValueContext, type ValueOption, type ValueProvider, walk, } from './query';
 export { fontScale, SCALE_LEVELS, type ScaleLevel } from './stores/fontscale.svelte';

package/dist/index.js

@@ -64,7 +64,7 @@ export { default as Toggle } from './components/molecules/Toggle.svelte';
 export { default as Tooltip } from './components/molecules/Tooltip.svelte';
 export { default as Truncate } from './components/molecules/Truncate.svelte';
 // ---- organisms ----
-export { default as DataTable } from './components/organisms/DataTable.svelte';
+export { default as DataTable, } from './components/organisms/DataTable.svelte';
 export { default as FilterSearchBar } from './components/organisms/FilterSearchBar.svelte';
 // ---- query core (headless: schema / parser / AST / suggest / compilers) ----
 export { activeToken, compilePredicate, defaultOperator, filters, findField, freeText, OPERATORS, operatorByCode, operatorById, operatorsFor, parse, resolveValues, serialize, serializeFilter, suggest, toSql, walk, } from './query';

package/dist/styles/variables.css

@@ -172,6 +172,17 @@
   --control-height-default: 2.5rem;
   --control-height-large: 3rem;
   --control-height: 2.75rem;
+  /* Square box scale for icon-only controls (IconButton, Button `box`/`square`,
+	   SelectButton, Popover trigger, CopyButton, FileButton). md is the classic
+	   2.25rem icon button; sm/lg reuse the control heights so a boxed control
+	   lines up with text controls in the same row. */
+  --box-xs: 1.5rem;
+  --box-sm: var(--control-height-compact);
+  --box-md: 2.25rem;
+  --box-lg: var(--control-height-default);
+  /* Minimum hit area on coarse pointers (WCAG 2.5.8); px so it never shrinks
+	   under a small root font-size. */
+  --touch-target: 44px;
 
   /* ---- 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.22.0",
+  "version": "0.23.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",