@dorsk/tsumikit 0.26.0 → 0.28.0

package/README.md

@@ -144,7 +144,10 @@ for a light theme (`:root` defaults to dark, so dark themes may omit it).
 
 ## Components
 
-**Atoms:** Text, Heading, Button, Input, Textarea, Select, Switch, Checkbox,
+**Atoms:** Text, Heading, Button, Input (`icon` inset leading glyph,
+`clearable` + `onclear`, `shape="pill"`, `width` fixed + `flex: none`,
+`onenter(value)`; the bare `<input>` DOM is unchanged unless `icon`/`clearable`
+is used), Textarea, Select, Switch, Checkbox,
 Slider, Progress, Artwork (lazy cover image with seeded gradient + initials
 fallback, `aspect`, `status` overlay), Card (`tone` tints the surface for inline banners), Badge
 (`tone` semantic palette or `color` for any CSS colour, `size` xs/sm/md, `dot`,
@@ -153,7 +156,7 @@ fallback, `aspect`, `status` overlay), Card (`tone` tints the surface for inline
 always/hover/none, `align`), Icon (open registry — pass a `children` snippet for
 any custom SVG).
 
-**Molecules:** Field, IconButton, SelectButton, Toggle, OptionButton, Modal,
+**Molecules:** Field (`grow`), IconButton, SelectButton, Toggle, OptionButton, Modal,
 Popover, Menu, Tabs, RadioGroup, Tooltip, Accordion, CopyButton, FileButton,
 Dropzone, CodeBlock, Callout, EmptyState, ConfirmModal, Pagination, Toaster,
 ThemePicker, FontScalePicker, SectionHeader, KeyValue, LoadMore.
@@ -166,7 +169,13 @@ 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).
+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, the `<table>` stays a table for assistive tech), FilterSearchBar /
+FilterInput (`size="sm"` compact bar on `--control-height-compact`,
+`shape="pill"`, `surface`, `hotkey="/"` focuses the input from anywhere
+outside an editable element, `showHotkey` renders the `<kbd>` hint, `grow`).
 
 **Layouts:** AppShell (responsive header/sidebar/main/footer — persistent
 sidebar on desktop, overlay drawer on mobile, optionally resizable;

package/dist/components/atoms/Card.svelte

@@ -5,7 +5,12 @@
 	// rows); `as` lets it be a button/anchor when the whole surface is clickable.
 	// `padding` dials the inner spacing (none/sm/md/lg) for denser cards.
 	// `tone` tints the surface itself (border + faint background wash) with a
-	// semantic hue for inline banners; `neutral` is the plain card.
+	// semantic hue for inline banners; `neutral` is the plain card; `attention`
+	// adds a left bar for needs-input rows.
+	//
+	// `interactive` makes a non-button/anchor card keyboard-operable
+	// (role=button, tabindex, Enter/Space) and ignores clicks originating from
+	// nested interactive elements so inner buttons/links keep working.
 	//
 	// `stacked` fakes a pile of cards by drawing two layers peeking out below
 	// (and optionally to the right) via pseudo-elements. `stackTone` tints those
@@ -20,10 +25,11 @@
 	import type { Snippet } from 'svelte';
 	import SectionHeader from '../molecules/SectionHeader.svelte';
 
-	type Tone = 'neutral' | 'ok' | 'warn' | 'danger' | 'info';
+	type Tone = 'neutral' | 'ok' | 'warn' | 'danger' | 'info' | 'attention';
 
 	let {
 		tap = false,
+		interactive = false,
 		as = 'div',
 		padding = 'md',
 		surface = 'base',
@@ -35,6 +41,8 @@
 		title,
 		subtitle,
 		gap,
+		maxWidth,
+		onclick,
 		class: klass = '',
 		style = '',
 		header,
@@ -44,6 +52,7 @@
 		...rest
 	}: {
 		tap?: boolean;
+		interactive?: boolean;
 		as?: 'div' | 'button' | 'a' | 'li' | 'section' | 'form';
 		padding?: 'none' | 'sm' | 'md' | 'lg';
 		surface?: 'base' | 'raised' | 'sunken';
@@ -55,6 +64,8 @@
 		title?: string;
 		subtitle?: string;
 		gap?: string;
+		maxWidth?: string;
+		onclick?: (e: MouseEvent | KeyboardEvent) => void;
 		class?: string;
 		style?: string;
 		header?: Snippet;
@@ -68,6 +79,26 @@
 		stacked ? `--stack-y:${stackY}px;--stack-x:${stackX}px;` : ''
 	);
 	const framed = $derived(!!(header || footer || title));
+	const native = $derived(as === 'button' || as === 'a');
+
+	const NESTED = 'button,a,input,select,textarea,[role=button],[contenteditable],[contenteditable=true]';
+	function fromNested(e: Event): boolean {
+		const target = e.target as Element | null;
+		const hit = target?.closest?.(NESTED);
+		return !!hit && hit !== e.currentTarget;
+	}
+	function handleClick(e: MouseEvent) {
+		if (!onclick) return;
+		if (interactive && fromNested(e)) return;
+		onclick(e);
+	}
+	function handleKeydown(e: KeyboardEvent) {
+		if (!interactive || native || !onclick) return;
+		if (e.key !== 'Enter' && e.key !== ' ') return;
+		if (fromNested(e)) return;
+		if (e.key === ' ') e.preventDefault();
+		onclick(e);
+	}
 </script>
 
 <svelte:element
@@ -79,11 +110,13 @@
 	class:pad-lg={padding === 'lg'}
 	class:surface-raised={surface === 'raised'}
 	class:surface-sunken={surface === 'sunken'}
-	class:card-tap={tap}
+	class:card-tap={tap || interactive}
+	class:card-max={maxWidth !== undefined}
 	class:card-ok={tone === 'ok'}
 	class:card-warn={tone === 'warn'}
 	class:card-danger={tone === 'danger'}
 	class:card-info={tone === 'info'}
+	class:card-attention={tone === 'attention'}
 	class:card-stacked={stacked}
 	class:stack-ok={stacked && stackTone === 'ok'}
 	class:stack-warn={stacked && stackTone === 'warn'}
@@ -92,7 +125,12 @@
 	class:card-framed={framed}
 	class:card-gap={!framed && gap !== undefined}
 	style:--card-gap={gap}
+	style:max-width={maxWidth}
 	style={`${stackStyle}${style}`}
+	role={interactive && !native ? 'button' : undefined}
+	tabindex={interactive && !native ? 0 : undefined}
+	onclick={handleClick}
+	onkeydown={handleKeydown}
 	{...rest}
 >
 	{#if framed}
@@ -177,6 +215,9 @@
 	.card-tap:hover {
 		border-color: var(--border-strong);
 	}
+	.card-max {
+		width: 100%;
+	}
 
 	.card-ok {
 		--card-tone: var(--ok);
@@ -190,13 +231,21 @@
 	.card-info {
 		--card-tone: var(--info);
 	}
+	.card-attention {
+		--card-tone: var(--attention-bar);
+	}
 	.card-ok,
 	.card-warn,
 	.card-danger,
-	.card-info {
+	.card-info,
+	.card-attention {
 		border-color: color-mix(in srgb, var(--card-tone) 55%, var(--border));
 		background: color-mix(in srgb, var(--card-tone) 8%, var(--bg-elevated));
 	}
+	.card-attention {
+		background: var(--attention-bg);
+		box-shadow: inset 3px 0 0 var(--attention-bar);
+	}
 
 	/* Stacked effect — two back layers peeking out bottom-right. The front
 	   surface keeps its own background so the layers only show at the edges. */

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

@@ -1,7 +1,8 @@
 import type { Snippet } from 'svelte';
-type Tone = 'neutral' | 'ok' | 'warn' | 'danger' | 'info';
+type Tone = 'neutral' | 'ok' | 'warn' | 'danger' | 'info' | 'attention';
 type $$ComponentProps = {
     tap?: boolean;
+    interactive?: boolean;
     as?: 'div' | 'button' | 'a' | 'li' | 'section' | 'form';
     padding?: 'none' | 'sm' | 'md' | 'lg';
     surface?: 'base' | 'raised' | 'sunken';
@@ -13,6 +14,8 @@ type $$ComponentProps = {
     title?: string;
     subtitle?: string;
     gap?: string;
+    maxWidth?: string;
+    onclick?: (e: MouseEvent | KeyboardEvent) => void;
     class?: string;
     style?: string;
     header?: Snippet;

package/dist/components/atoms/Input.svelte

@@ -1,8 +1,11 @@
 <script lang="ts">
 	// Text input primitive. Owns its styling from theme tokens; supports
 	// `bind:value` and passes through every native <input> attribute. `mono`
-	// switches to the monospace family (paths, tokens, env values).
+	// switches to the monospace family (paths, tokens, env values). A wrapper is
+	// rendered only when `icon` / `clearable` are used, so the bare <input> DOM
+	// stays as-is otherwise.
 	import type { HTMLInputAttributes } from 'svelte/elements';
+	import Icon, { type IconName } from './Icon.svelte';
 
 	// `size` shadows the native char-width attribute (unused in token-sized
 	// layouts) to expose a height preset instead.
@@ -15,6 +18,17 @@
 		/** Error state: danger border + aria-invalid (also styles if a consumer
 		 *  sets aria-invalid directly). */
 		invalid?: boolean;
+		/** Leading icon, inset inside the control. */
+		icon?: IconName;
+		/** Trailing clear (✕) button shown while the value is non-empty. */
+		clearable?: boolean;
+		onclear?: () => void;
+		clearLabel?: string;
+		shape?: 'square' | 'pill';
+		/** Fixed width (also `flex: none` so flex rows don't stretch it). */
+		width?: string;
+		/** Fires with the current value on Enter. */
+		onenter?: (value: string) => void;
 		class?: string;
 		value?: HTMLInputAttributes['value'];
 		el?: HTMLInputElement | null;
@@ -25,24 +39,73 @@
 		size = 'md',
 		grow = false,
 		invalid = false,
+		icon,
+		clearable = false,
+		onclear,
+		clearLabel = 'Clear',
+		shape = 'square',
+		width,
+		onenter,
+		onkeydown,
 		class: klass = '',
 		value = $bindable(),
 		el = $bindable(null),
 		...rest
 	}: Props = $props();
+
+	const wrapped = $derived(!!icon || clearable);
+
+	function handleKeydown(e: KeyboardEvent & { currentTarget: EventTarget & HTMLInputElement }) {
+		onkeydown?.(e);
+		if (onenter && e.key === 'Enter' && !e.defaultPrevented) onenter(String(value ?? ''));
+	}
+
+	function clear() {
+		value = '';
+		onclear?.();
+		el?.focus();
+	}
 </script>
 
-<input
-	bind:this={el}
-	data-tsu="Input"
-	class="input {klass}"
-	class:mono
-	class:input-sm={size === 'sm'}
-	class:input-grow={grow}
-	bind:value
-	{...rest}
-	aria-invalid={invalid || undefined}
-/>
+{#snippet control()}
+	<input
+		bind:this={el}
+		data-tsu="Input"
+		class="input {klass}"
+		class:mono
+		class:input-sm={size === 'sm'}
+		class:input-grow={grow}
+		class:input-fixed={!!width && !wrapped}
+		class:input-pill={shape === 'pill'}
+		class:has-icon={!!icon}
+		class:has-clear={clearable}
+		style:width={wrapped ? undefined : width}
+		bind:value
+		{...rest}
+		onkeydown={onenter || onkeydown ? handleKeydown : undefined}
+		aria-invalid={invalid || undefined}
+	/>
+{/snippet}
+
+{#if wrapped}
+	<div
+		class="input-wrap"
+		data-part="wrap"
+		class:input-grow={grow}
+		class:input-fixed={!!width}
+		style:width
+	>
+		{#if icon}<span class="input-icon"><Icon name={icon} /></span>{/if}
+		{@render control()}
+		{#if clearable && value}
+			<button type="button" class="input-clear" aria-label={clearLabel} onclick={clear}>
+				<Icon name="x" />
+			</button>
+		{/if}
+	</div>
+{:else}
+	{@render control()}
+{/if}
 
 <style>
 	.input {
@@ -67,6 +130,13 @@
 		width: auto;
 		min-width: 0;
 	}
+	.input-fixed {
+		flex: none;
+	}
+	.input-pill {
+		border-radius: var(--r-pill);
+		padding-inline: var(--sp-4);
+	}
 	.input[aria-invalid='true'] {
 		border-color: var(--danger);
 	}
@@ -76,4 +146,46 @@
 	.mono {
 		font-family: var(--font-mono);
 	}
+
+	.input-wrap {
+		position: relative;
+		display: flex;
+		align-items: center;
+		width: 100%;
+	}
+	.input-wrap .input {
+		width: 100%;
+	}
+	.has-icon {
+		padding-inline-start: calc(var(--sp-3) + 1em + var(--sp-2));
+	}
+	.has-clear {
+		padding-inline-end: calc(var(--sp-3) + 1em + var(--sp-2));
+	}
+	.input-icon,
+	.input-clear {
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		display: flex;
+		align-items: center;
+		color: var(--text-faint);
+		pointer-events: none;
+	}
+	.input-icon {
+		left: var(--sp-3);
+	}
+	.input-clear {
+		right: var(--sp-2);
+		pointer-events: auto;
+		border: 0;
+		background: transparent;
+		padding: 0 var(--sp-1);
+		cursor: pointer;
+		border-radius: var(--r-sm);
+	}
+	.input-clear:hover,
+	.input-clear:focus-visible {
+		color: var(--text);
+	}
 </style>

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

@@ -1,4 +1,5 @@
 import type { HTMLInputAttributes } from 'svelte/elements';
+import { type IconName } from './Icon.svelte';
 type Props = Omit<HTMLInputAttributes, 'size'> & {
     mono?: boolean;
     size?: 'sm' | 'md';
@@ -8,6 +9,17 @@ type Props = Omit<HTMLInputAttributes, 'size'> & {
     /** Error state: danger border + aria-invalid (also styles if a consumer
      *  sets aria-invalid directly). */
     invalid?: boolean;
+    /** Leading icon, inset inside the control. */
+    icon?: IconName;
+    /** Trailing clear (✕) button shown while the value is non-empty. */
+    clearable?: boolean;
+    onclear?: () => void;
+    clearLabel?: string;
+    shape?: 'square' | 'pill';
+    /** Fixed width (also `flex: none` so flex rows don't stretch it). */
+    width?: string;
+    /** Fires with the current value on Enter. */
+    onenter?: (value: string) => void;
     class?: string;
     value?: HTMLInputAttributes['value'];
     el?: HTMLInputElement | null;

package/dist/components/molecules/Field.svelte

@@ -10,6 +10,7 @@
 		for: forId,
 		hint,
 		error,
+		grow = false,
 		class: klass = '',
 		children
 	}: {
@@ -17,12 +18,14 @@
 		for?: string;
 		hint?: string;
 		error?: string;
+		/** Fill the available width of a flex/Cluster row (flex: 1). */
+		grow?: boolean;
 		class?: string;
 		children?: Snippet;
 	} = $props();
 </script>
 
-<div class="field {klass}" data-tsu="Field">
+<div class="field {klass}" class:field-grow={grow} data-tsu="Field">
 	{#if label}
 		{#if forId}
 			<label class="label" for={forId}>{label}</label>
@@ -41,6 +44,10 @@
 		flex-direction: column;
 		gap: var(--sp-1);
 	}
+	.field-grow {
+		flex: 1 1 0;
+		min-width: 0;
+	}
 	.label {
 		font-size: var(--fs-sm);
 		font-weight: var(--fw-medium);

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

@@ -4,6 +4,8 @@ type $$ComponentProps = {
     for?: string;
     hint?: string;
     error?: string;
+    /** Fill the available width of a flex/Cluster row (flex: 1). */
+    grow?: boolean;
     class?: string;
     children?: Snippet;
 };

package/dist/components/molecules/FilterInput.svelte

@@ -51,6 +51,12 @@
 		autoQuote = true,
 		showClear = true,
 		icon = 'search',
+		size = 'md',
+		shape = 'square',
+		surface = 'base',
+		hotkey,
+		showHotkey = false,
+		grow = false,
 		onchange,
 		onsubmit,
 		inline,
@@ -70,6 +76,18 @@
 		showClear?: boolean;
 		/** Leading icon; pass `null` to hide it. */
 		icon?: IconName | null;
+		/** `sm` renders a compact-toolbar bar (`--control-height-compact`). */
+		size?: 'sm' | 'md';
+		shape?: 'square' | 'pill';
+		/** Theme-aware surface shade of the bar (mirrors Card). */
+		surface?: 'base' | 'raised' | 'sunken';
+		/** Key (e.g. `'/'`) that focuses the input when pressed outside an editable
+		 *  element and without modifiers. */
+		hotkey?: string;
+		/** Render the hotkey as a `<kbd>` hint, hidden on focus / when non-empty. */
+		showHotkey?: boolean;
+		/** Fill the available width of a flex/Cluster row (flex: 1). */
+		grow?: boolean;
 		/** Fires the parsed AST on every change — feed this to your backend. */
 		onchange?: (query: Query, raw: string) => void;
 		/** Fires on Enter / clear / chip-remove with the raw query string. */
@@ -93,8 +111,29 @@
 	let active = $state(0);
 	let open = $state(false);
 	let keyboardNavigation = $state(false);
+	let focused = $state(false);
 	let reqId = 0;
 
+	function isEditable(target: EventTarget | null): boolean {
+		if (!(target instanceof HTMLElement)) return false;
+		if (target.isContentEditable) return true;
+		return ['INPUT', 'TEXTAREA', 'SELECT'].includes(target.tagName);
+	}
+
+	$effect(() => {
+		if (!hotkey) return;
+		const key = hotkey;
+		function onHotkey(e: KeyboardEvent) {
+			if (e.key !== key || e.defaultPrevented) return;
+			if (e.ctrlKey || e.metaKey || e.altKey) return;
+			if (isEditable(e.target)) return;
+			e.preventDefault();
+			el?.focus();
+		}
+		document.addEventListener('keydown', onHotkey);
+		return () => document.removeEventListener('keydown', onHotkey);
+	});
+
 	// Parsed view (drives the onchange AST + the snippet context).
 	const ast = $derived(parse(value, schema));
 	const chips = $derived(filters(ast));
@@ -256,7 +295,15 @@
 	};
 </script>
 
-<div class="fi" data-tsu="FilterInput">
+<div
+	class="fi"
+	class:fi--sm={size === 'sm'}
+	class:fi--pill={shape === 'pill'}
+	class:surface-raised={surface === 'raised'}
+	class:surface-sunken={surface === 'sunken'}
+	class:fi--grow={grow}
+	data-tsu="FilterInput"
+>
 	<div class="fi__bar">
 		{#if icon}<span class="fi__icon"><Icon name={icon} label="Search" /></span>{/if}
 		{#if inline}{@render inline(ctx)}{/if}
@@ -272,10 +319,19 @@
 			onkeyup={(e) => {
 				if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') refresh();
 			}}
-			onfocus={refresh}
-			onblur={() => setTimeout(() => (open = false), 120)}
+			onfocus={() => {
+				focused = true;
+				refresh();
+			}}
+			onblur={() => {
+				focused = false;
+				setTimeout(() => (open = false), 120);
+			}}
 			{onkeydown}
 		/>
+		{#if showHotkey && hotkey && !focused && !value}
+			<kbd class="fi__kbd" aria-hidden="true">{hotkey}</kbd>
+		{/if}
 		{#if showClear && value}
 			<button
 				type="button"
@@ -324,16 +380,45 @@
 	.fi {
 		position: relative;
 	}
+	.fi--grow {
+		flex: 1 1 0;
+		min-width: 0;
+	}
 	.fi__bar {
 		display: flex;
 		align-items: center;
 		gap: var(--sp-2);
 		padding: 0 var(--sp-3);
-		min-height: 44px;
+		min-height: var(--control-height-default);
 		background: var(--bg-elevated);
 		border: 1px solid var(--border-strong);
 		border-radius: var(--r-md);
 	}
+	.fi--sm .fi__bar {
+		min-height: var(--control-height-compact);
+	}
+	.fi--sm .fi__input {
+		font-size: var(--fs-sm);
+	}
+	.fi--pill .fi__bar {
+		border-radius: var(--r-pill);
+		padding-inline: var(--sp-4);
+	}
+	.surface-raised .fi__bar {
+		background: var(--surface);
+	}
+	.surface-sunken .fi__bar {
+		background: var(--bg-elevated-2);
+	}
+	.fi__kbd {
+		font-family: var(--font-mono);
+		font-size: var(--fs-xs);
+		line-height: 1;
+		color: var(--text-faint);
+		border: 1px solid var(--border);
+		border-radius: var(--r-sm);
+		padding: 2px var(--sp-1);
+	}
 	.fi__bar:focus-within {
 		border-color: var(--accent);
 		box-shadow: 0 0 0 3px var(--accent-dim);

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

@@ -36,6 +36,18 @@ type $$ComponentProps = {
     showClear?: boolean;
     /** Leading icon; pass `null` to hide it. */
     icon?: IconName | null;
+    /** `sm` renders a compact-toolbar bar (`--control-height-compact`). */
+    size?: 'sm' | 'md';
+    shape?: 'square' | 'pill';
+    /** Theme-aware surface shade of the bar (mirrors Card). */
+    surface?: 'base' | 'raised' | 'sunken';
+    /** Key (e.g. `'/'`) that focuses the input when pressed outside an editable
+     *  element and without modifiers. */
+    hotkey?: string;
+    /** Render the hotkey as a `<kbd>` hint, hidden on focus / when non-empty. */
+    showHotkey?: boolean;
+    /** Fill the available width of a flex/Cluster row (flex: 1). */
+    grow?: boolean;
     /** Fires the parsed AST on every change — feed this to your backend. */
     onchange?: (query: Query, raw: string) => void;
     /** Fires on Enter / clear / chip-remove with the raw query string. */

package/dist/components/organisms/DataTable.svelte

@@ -18,6 +18,9 @@
 		/** Drop the column when the table's own box is narrower than the breakpoint
 		 *  (sm 30rem, md 48rem, lg 64rem). */
 		hideBelow?: 'sm' | 'md' | 'lg';
+		/** Placement inside the stacked card (`responsive="stack"` only). Columns
+		 *  without a role render as `label: value` detail lines. */
+		role?: 'title' | 'detail' | 'meta' | 'actions' | 'hidden';
 	}
 </script>
 
@@ -50,7 +53,9 @@
 		loading = false,
 		loadingLabel = 'Loading…',
 		onloadmore,
-		loadMoreLabel = 'Load more'
+		loadMoreLabel = 'Load more',
+		responsive = 'scroll',
+		stackBelow = '48rem'
 	}: {
 		columns: Column<T>[];
 		rows: T[];
@@ -82,8 +87,38 @@
 		/** Renders a footer "load more" button that calls this. */
 		onloadmore?: () => void;
 		loadMoreLabel?: string;
+		/** `stack` renders each row as a card once the table's own box is narrower
+		 *  than `stackBelow`; `scroll` (default) keeps a horizontal scroller. */
+		responsive?: 'scroll' | 'stack';
+		/** Width (px/em/rem) under which `stack` mode kicks in. */
+		stackBelow?: string;
 	} = $props();
 
+	let wrapEl = $state<HTMLDivElement | null>(null);
+	let stacked = $state(false);
+
+	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);
+		return n;
+	}
+
+	$effect(() => {
+		if (responsive !== 'stack' || !wrapEl) {
+			stacked = false;
+			return;
+		}
+		const el = wrapEl;
+		const limit = toPx(stackBelow, el);
+		const observer = new ResizeObserver(([entry]) => {
+			stacked = entry.contentRect.width < limit;
+		});
+		observer.observe(el);
+		return () => observer.disconnect();
+	});
+
 	let sortKey = $state<string | null>(null);
 	let sortDir = $state<'asc' | 'desc'>('asc');
 
@@ -121,7 +156,15 @@
 	});
 </script>
 
-<div class="dt-scroll" data-tsu="DataTable" data-size={size} aria-busy={loading || undefined}>
+<div
+	bind:this={wrapEl}
+	class="dt-scroll"
+	class:dt-stack={responsive === 'stack'}
+	data-tsu="DataTable"
+	data-size={size}
+	data-stacked={stacked || undefined}
+	aria-busy={loading || undefined}
+>
 	<table
 		class="dt"
 		class:sticky={stickyHeader}
@@ -199,9 +242,11 @@
 							<td
 								data-part="cell"
 								data-hide-below={col.hideBelow}
+								data-role={responsive === 'stack' ? (col.role ?? 'detail') : undefined}
+								data-label={responsive === 'stack' ? col.label : undefined}
 								class:truncate={col.truncate}
 								class:nowrap={col.nowrap}
-								style:text-align={col.align ?? 'left'}
+								style:text-align={stacked ? undefined : (col.align ?? 'left')}
 							>
 								{#if cellSnippets[col.key]}
 									{@render cellSnippets[col.key](row)}
@@ -389,6 +434,91 @@
 			display: none;
 		}
 	}
+	/* Stacked cards: the <table> stays a table for AT, but every row lays out as
+	   a wrapping flex row (title | actions, detail lines, trailing meta cluster).
+	   The header is clipped, not removed. */
+	[data-stacked] {
+		overflow-x: visible;
+	}
+	[data-stacked] thead th {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		padding: 0;
+		margin: -1px;
+		overflow: hidden;
+		clip: rect(0, 0, 0, 0);
+		white-space: nowrap;
+		border: 0;
+	}
+	[data-stacked] tbody,
+	[data-stacked] tfoot,
+	[data-stacked] td {
+		display: block;
+	}
+	[data-stacked] tr {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: baseline;
+		gap: var(--sp-1) var(--sp-3);
+		padding: var(--sp-3);
+		border-bottom: 1px solid var(--border);
+	}
+	[data-stacked] tbody tr:last-child {
+		border-bottom: none;
+	}
+	[data-stacked] td {
+		flex: 0 0 100%;
+		min-width: 0;
+		padding: 0;
+		border: 0;
+	}
+	[data-stacked] td.truncate {
+		max-width: none;
+	}
+	[data-stacked] tr.toned td:first-child {
+		box-shadow: none;
+	}
+	[data-stacked] tr.toned {
+		box-shadow: inset 3px 0 0 var(--dt-tone);
+	}
+	[data-stacked] td[data-role='title'] {
+		flex: 1 1 0;
+		order: -2;
+		font-weight: var(--fw-semibold);
+		font-size: var(--fs-md);
+		color: var(--text);
+	}
+	[data-stacked] td[data-role='detail']::before {
+		content: attr(data-label) ': ';
+		color: var(--text-muted);
+	}
+	[data-stacked] td[data-role='meta'] {
+		flex: none;
+		order: 1;
+		font-family: var(--font-mono);
+		font-size: var(--fs-xs);
+		color: var(--text-muted);
+	}
+	[data-stacked] td[data-role='meta']::before {
+		content: attr(data-label) ' ';
+		color: var(--text-faint);
+	}
+	[data-stacked] td[data-role='actions'],
+	[data-stacked] td.dt-actions {
+		flex: none;
+		order: -1;
+		margin-inline-start: auto;
+		width: auto;
+		opacity: 1;
+	}
+	[data-stacked] td[data-role='hidden'] {
+		display: none;
+	}
+	[data-stacked] td.dt-empty,
+	[data-stacked] td.dt-more {
+		text-align: center;
+	}
 	.dt-empty {
 		text-align: center;
 		color: var(--text-faint);

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

@@ -16,6 +16,9 @@ export interface Column<T> {
     /** Drop the column when the table's own box is narrower than the breakpoint
      *  (sm 30rem, md 48rem, lg 64rem). */
     hideBelow?: 'sm' | 'md' | 'lg';
+    /** Placement inside the stacked card (`responsive="stack"` only). Columns
+     *  without a role render as `label: value` detail lines. */
+    role?: 'title' | 'detail' | 'meta' | 'actions' | 'hidden';
 }
 import type { Snippet } from 'svelte';
 declare function $$render<T>(): {
@@ -50,6 +53,11 @@ declare function $$render<T>(): {
         /** Renders a footer "load more" button that calls this. */
         onloadmore?: () => void;
         loadMoreLabel?: string;
+        /** `stack` renders each row as a card once the table's own box is narrower
+         *  than `stackBelow`; `scroll` (default) keeps a horizontal scroller. */
+        responsive?: "scroll" | "stack";
+        /** Width (px/em/rem) under which `stack` mode kicks in. */
+        stackBelow?: string;
     };
     exports: {};
     bindings: "";

package/dist/components/organisms/FilterSearchBar.svelte

@@ -24,6 +24,12 @@
 		placeholder = 'artist:"Daft Punk" AND year>=2000',
 		showChips = true,
 		autoQuote = true,
+		size = 'md',
+		shape = 'square',
+		surface = 'base',
+		hotkey,
+		showHotkey = false,
+		grow = false,
 		onchange,
 		onsubmit
 	}: {
@@ -39,6 +45,13 @@
 		 * the quotes. Set false for bare typing where spaces split the value.
 		 */
 		autoQuote?: boolean;
+		/** Forwarded to FilterInput. */
+		size?: 'sm' | 'md';
+		shape?: 'square' | 'pill';
+		surface?: 'base' | 'raised' | 'sunken';
+		hotkey?: string;
+		showHotkey?: boolean;
+		grow?: boolean;
 		/** Fires the parsed AST on every change — feed this to your backend. */
 		onchange?: (query: Query, raw: string) => void;
 		/** Fires on Enter / clear / chip-remove with the raw query string. */
@@ -50,7 +63,20 @@
 	}
 </script>
 
-<FilterInput {schema} bind:value {placeholder} {autoQuote} {onchange} {onsubmit}>
+<FilterInput
+	{schema}
+	bind:value
+	{placeholder}
+	{autoQuote}
+	{size}
+	{shape}
+	{surface}
+	{hotkey}
+	{showHotkey}
+	{grow}
+	{onchange}
+	{onsubmit}
+>
 	{#snippet below({ filters: chips, text, remove })}
 		{#if showChips && (chips.length || text)}
 			<div class="fsb__chips">

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

@@ -13,6 +13,13 @@ type $$ComponentProps = {
      * the quotes. Set false for bare typing where spaces split the value.
      */
     autoQuote?: boolean;
+    /** Forwarded to FilterInput. */
+    size?: 'sm' | 'md';
+    shape?: 'square' | 'pill';
+    surface?: 'base' | 'raised' | 'sunken';
+    hotkey?: string;
+    showHotkey?: boolean;
+    grow?: boolean;
     /** Fires the parsed AST on every change — feed this to your backend. */
     onchange?: (query: Query, raw: string) => void;
     /** Fires on Enter / clear / chip-remove with the raw query string. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dorsk/tsumikit",
-  "version": "0.26.0",
+  "version": "0.28.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",