@dorsk/tsumikit 0.24.0 → 0.25.0

package/README.md

@@ -154,7 +154,8 @@ any custom SVG).
 
 **Molecules:** Field, IconButton, SelectButton, Toggle, OptionButton, Modal,
 Popover, Menu, Tabs, RadioGroup, Tooltip, Accordion, CopyButton, FileButton,
-Dropzone, CodeBlock, Callout, EmptyState, Toaster, ThemePicker, FontScalePicker.
+Dropzone, CodeBlock, Callout, EmptyState, ConfirmModal, Pagination, Toaster,
+ThemePicker, FontScalePicker, SectionHeader, KeyValue, LoadMore.
 
 **Organisms:** DataTable (generic `<T>`, typed columns + cell snippets;
 `layout="fixed"` makes column widths authoritative, `Column.truncate` /
@@ -255,6 +256,71 @@ is a live region — `role="status"`, or `role="alert"` when `tone="danger"`.
 </Callout>
 ```
 
+### Modal, ConfirmModal & Pagination
+
+`Modal` opens on mount by default; pass `bind:open` instead to keep it mounted
+and drive `showModal()`/`close()` from state (closing writes `open = false`).
+`tone="danger" | "warn" | "info"` adds a title glyph and a 3px top border;
+`busy` makes the body inert, shows a spinner by the title and disables Escape,
+backdrop and the close button. The `footer` snippet is a right-aligned flex row
+(`justify-content: flex-end; gap: var(--sp-2)`).
+
+`ConfirmModal` wraps it as a yes/no dialog: `title`, `message` (or `children`),
+`confirmLabel`/`cancelLabel`, `tone="primary" | "danger" | "warn"`, `busy`,
+`onconfirm`, `oncancel`. An async `onconfirm` keeps the dialog busy until it
+settles, closes only on success and shows a rejection's message (`role="alert"`)
+under the body. `Button` accepts `tone="danger"` as an alias of
+`variant="danger"` so the tone axis works alone.
+
+```svelte
+<ConfirmModal bind:open title="Delete library?" tone="danger" confirmLabel="Delete"
+  onconfirm={() => api.deleteLibrary(id)} />
+```
+
+`Pagination` renders `<nav aria-label>` with prev/next IconButtons, numbered
+pages (`aria-current="page"`), ellipses and an optional `showRange` readout.
+Page mode: `bind:page` + `pageCount`. Offset mode: `bind:offset` + `limit` +
+`total` (page and count are derived, `offset` is written back). `onchange(page)`,
+`siblings` (1), `showEdges` (true), `size="sm" | "md"`, `label`. Under 24rem of
+container width it collapses to prev / "3 / 12" / next.
+
+```svelte
+<Pagination bind:offset limit={20} total={412} showRange onchange={load} />
+```
+
+### SectionHeader, Card header/footer, KeyValue, LoadMore
+
+`SectionHeader` is the one "title + meta + right-aligned actions" row:
+`title` (or `label`), `level` 1–4 (default 2), `size`, `subtitle`, `icon`,
+`count` (faint tabular figure after the title), `tone`, `hue` (0–360 swatch
+chip), `uppercase` (eyebrow group label), `divider`, `sticky` (pins at
+`--sticky-offset` / `--header-h` and publishes `--section-header-h` on its
+parent), `collapsible` + `bind:open` (title becomes a disclosure button with
+`aria-expanded`; `children` render beneath while open), `actions` snippet.
+
+`Card` gains `header` / `footer` snippets rendered outside the padded body
+behind a divider, `title` / `subtitle` / `actions` sugar that renders a
+`SectionHeader` in the header slot, and `gap` to stack children as a flex
+column. A Card without any of these renders exactly as before.
+
+`KeyValue` renders `rows: { label, value: string | number | Snippet, mono?,
+tone?, hint? }[]` as a semantic `<dl>` grid; `columns` 1 | 2, `dense`, `align`
+start | end. `LoadMore` is the tri-state list footer: `state` idle | loading |
+error | done, `onload`, `label`, `loadingLabel`, `errorLabel`, `retryLabel`,
+`doneLabel`, `pill` for the compact "load older" chip.
+
+```svelte
+<Card title="Recent sessions" subtitle="last 24h">
+  {#snippet actions()}<Link href="/sessions">View all</Link>{/snippet}
+  <KeyValue rows={[{ label: 'Running', value: 3, tone: 'ok' }, { label: 'Host', value: 'sakura', mono: true }]} />
+  {#snippet footer()}<LoadMore state={more} onload={loadMore} />{/snippet}
+</Card>
+
+<SectionHeader label="Blocked" count={4} uppercase hue={12} collapsible bind:open>
+  …group rows…
+</SectionHeader>
+```
+
 ## Container queries
 
 AppShell's `main` and `sidebar` are query containers (`container-name: main` /

package/dist/components/atoms/Button.svelte

@@ -112,7 +112,7 @@
 	class:btn-grow={grow}
 	class:btn-primary={variant === 'primary'}
 	class:btn-ghost={variant === 'ghost'}
-	class:btn-danger={variant === 'danger'}
+	class:btn-danger={variant === 'danger' || (tone === 'danger' && variant === 'default')}
 	class:btn-sm={size === 'sm'}
 	class:btn-lg={size === 'lg'}
 	class:btn-control={control}

package/dist/components/atoms/Card.svelte

@@ -13,7 +13,12 @@
 	// keeps them on the plain border colour. `stackY`/`stackX` set the per-layer
 	// vertical / horizontal offset in px (vertical spacing stays even across the
 	// 3 borders); horizontal defaults to a tiny 2px peek.
+	//
+	// `header`/`footer` snippets (or the `title`/`subtitle`/`actions` sugar,
+	// which renders a SectionHeader) sit outside the padded body behind a
+	// divider; `gap` stacks children as a flex column without a wrapper.
 	import type { Snippet } from 'svelte';
+	import SectionHeader from '../molecules/SectionHeader.svelte';
 
 	type Tone = 'neutral' | 'ok' | 'warn' | 'danger' | 'info';
 
@@ -27,8 +32,14 @@
 		stackTone = 'neutral',
 		stackY = 8,
 		stackX = 2,
+		title,
+		subtitle,
+		gap,
 		class: klass = '',
 		style = '',
+		header,
+		footer,
+		actions,
 		children,
 		...rest
 	}: {
@@ -41,8 +52,14 @@
 		stackTone?: Tone;
 		stackY?: number;
 		stackX?: number;
+		title?: string;
+		subtitle?: string;
+		gap?: string;
 		class?: string;
 		style?: string;
+		header?: Snippet;
+		footer?: Snippet;
+		actions?: Snippet;
 		children?: Snippet;
 		[key: string]: unknown;
 	} = $props();
@@ -50,6 +67,7 @@
 	let stackStyle = $derived(
 		stacked ? `--stack-y:${stackY}px;--stack-x:${stackX}px;` : ''
 	);
+	const framed = $derived(!!(header || footer || title));
 </script>
 
 <svelte:element
@@ -71,18 +89,55 @@
 	class:stack-warn={stacked && stackTone === 'warn'}
 	class:stack-danger={stacked && stackTone === 'danger'}
 	class:stack-info={stacked && stackTone === 'info'}
+	class:card-framed={framed}
+	class:card-gap={!framed && gap !== undefined}
+	style:--card-gap={gap}
 	style={`${stackStyle}${style}`}
 	{...rest}
 >
-	{@render children?.()}
+	{#if framed}
+		{#if title}
+			<div class="card-head">
+				<SectionHeader {title} {subtitle} {actions} level={3} size="md" />
+			</div>
+		{:else if header}
+			<div class="card-head">{@render header()}</div>
+		{/if}
+		<div class="card-body" class:card-gap={gap !== undefined}>{@render children?.()}</div>
+		{#if footer}
+			<div class="card-foot">{@render footer()}</div>
+		{/if}
+	{:else}
+		{@render children?.()}
+	{/if}
 </svelte:element>
 
 <style>
 	.card {
+		--card-pad: var(--sp-4);
 		background: var(--bg-elevated);
 		border: 1px solid var(--border);
 		border-radius: var(--r-lg);
-		padding: var(--sp-4);
+		padding: var(--card-pad);
+	}
+	.card-gap {
+		display: flex;
+		flex-direction: column;
+		gap: var(--card-gap);
+	}
+	.card-framed {
+		padding: 0;
+	}
+	.card-head,
+	.card-body,
+	.card-foot {
+		padding: var(--card-pad);
+	}
+	.card-head {
+		border-bottom: 1px solid var(--border);
+	}
+	.card-foot {
+		border-top: 1px solid var(--border);
 	}
 	/* Theme-aware surface shade, selected by prop so it adapts across themes
 	   instead of being overridden with app-level :global hacks. `base` is the
@@ -94,14 +149,22 @@
 		background: var(--bg-elevated-2);
 	}
 	.pad-none {
+		--card-pad: 0;
 		padding: 0;
 	}
 	.pad-sm {
+		--card-pad: var(--sp-2);
 		padding: var(--sp-2);
 	}
 	.pad-lg {
+		--card-pad: var(--sp-6);
 		padding: var(--sp-6);
 	}
+	.card-framed.pad-none,
+	.card-framed.pad-sm,
+	.card-framed.pad-lg {
+		padding: 0;
+	}
 	.card-tap {
 		cursor: pointer;
 		transition:

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

@@ -10,8 +10,14 @@ type $$ComponentProps = {
     stackTone?: Tone;
     stackY?: number;
     stackX?: number;
+    title?: string;
+    subtitle?: string;
+    gap?: string;
     class?: string;
     style?: string;
+    header?: Snippet;
+    footer?: Snippet;
+    actions?: Snippet;
     children?: Snippet;
     [key: string]: unknown;
 };

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

@@ -42,6 +42,6 @@ type $$ComponentProps = {
     /** Overlay mode: cap the width at the viewport and re-clamp on window resize. */
     clampToViewport?: boolean;
 };
-declare const ResizablePanel: import("svelte").Component<$$ComponentProps, {}, "collapsed" | "open">;
+declare const ResizablePanel: import("svelte").Component<$$ComponentProps, {}, "open" | "collapsed">;
 type ResizablePanel = ReturnType<typeof ResizablePanel>;
 export default ResizablePanel;

package/dist/components/molecules/ConfirmModal.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+	// Yes/no dialog on top of Modal. An async `onconfirm` keeps the dialog open
+	// and busy until it settles; a rejection surfaces its message and leaves the
+	// dialog open so the user can retry or cancel.
+	import type { Snippet } from 'svelte';
+	import Button from '../atoms/Button.svelte';
+	import Text from '../atoms/Text.svelte';
+	import Modal from './Modal.svelte';
+
+	let {
+		open = $bindable(false),
+		title,
+		message,
+		children,
+		confirmLabel = 'Confirm',
+		cancelLabel = 'Cancel',
+		tone = 'primary',
+		busy = false,
+		onconfirm,
+		oncancel
+	}: {
+		open?: boolean;
+		title: string;
+		message?: string;
+		children?: Snippet;
+		confirmLabel?: string;
+		cancelLabel?: string;
+		tone?: 'primary' | 'danger' | 'warn';
+		busy?: boolean;
+		onconfirm: () => void | Promise<void>;
+		oncancel?: () => void;
+	} = $props();
+
+	let pending = $state(false);
+	let error = $state<string | null>(null);
+	const working = $derived(busy || pending);
+
+	$effect(() => {
+		if (!open) error = null;
+	});
+
+	async function confirm() {
+		if (working) return;
+		error = null;
+		try {
+			const result = onconfirm();
+			if (result instanceof Promise) {
+				pending = true;
+				await result;
+			}
+			open = false;
+		} catch (e) {
+			error = e instanceof Error ? e.message : String(e);
+		} finally {
+			pending = false;
+		}
+	}
+
+	function cancel() {
+		if (working) return;
+		open = false;
+		oncancel?.();
+	}
+</script>
+
+<Modal
+	bind:open
+	{title}
+	tone={tone === 'primary' ? 'neutral' : tone}
+	busy={working}
+	onclose={oncancel}
+	size="sm"
+>
+	{#snippet body()}
+		<div class="confirm-body" data-tsu="ConfirmModal">
+			{#if message}<Text variant="body">{message}</Text>{/if}
+			{@render children?.()}
+			{#if error}
+				<Text variant="caption" tone="danger" role="alert" class="confirm-error">{error}</Text>
+			{/if}
+		</div>
+	{/snippet}
+	{#snippet footer()}
+		<Button onclick={cancel} disabled={working}>{cancelLabel}</Button>
+		<Button
+			variant={tone === 'danger' ? 'danger' : 'primary'}
+			tone={tone === 'warn' ? 'warn' : 'none'}
+			loading={working}
+			onclick={confirm}
+		>
+			{confirmLabel}
+		</Button>
+	{/snippet}
+</Modal>
+
+<style>
+	.confirm-body {
+		display: flex;
+		flex-direction: column;
+		gap: var(--sp-3);
+	}
+</style>

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

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    open?: boolean;
+    title: string;
+    message?: string;
+    children?: Snippet;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    tone?: 'primary' | 'danger' | 'warn';
+    busy?: boolean;
+    onconfirm: () => void | Promise<void>;
+    oncancel?: () => void;
+};
+declare const ConfirmModal: import("svelte").Component<$$ComponentProps, {}, "open">;
+type ConfirmModal = ReturnType<typeof ConfirmModal>;
+export default ConfirmModal;

package/dist/components/molecules/KeyValue.svelte

@@ -0,0 +1,117 @@
+<script lang="ts" module>
+	import type { Snippet } from 'svelte';
+
+	export type KeyValueTone = 'neutral' | 'ok' | 'warn' | 'danger' | 'info';
+
+	export interface KeyValueRow {
+		label: string;
+		value: string | number | Snippet;
+		mono?: boolean;
+		tone?: KeyValueTone;
+		hint?: string;
+	}
+</script>
+
+<script lang="ts">
+	// Label/value grid as a semantic <dl>: one or two label+value column pairs,
+	// values optionally mono / toned, with a faint hint line under the value.
+	import Text from '../atoms/Text.svelte';
+
+	const TEXT_TONE = {
+		neutral: 'default',
+		ok: 'success',
+		warn: 'warn',
+		danger: 'danger',
+		info: 'accent',
+	} as const;
+
+	let {
+		rows,
+		columns = 1,
+		dense = false,
+		align = 'start',
+		class: klass = '',
+		...rest
+	}: {
+		rows: KeyValueRow[];
+		columns?: 1 | 2;
+		dense?: boolean;
+		align?: 'start' | 'end';
+		class?: string;
+		[key: string]: unknown;
+	} = $props();
+</script>
+
+<dl
+	data-tsu="KeyValue"
+	class="kv {klass}"
+	class:kv-cols-2={columns === 2}
+	class:kv-dense={dense}
+	class:kv-align-end={align === 'end'}
+	{...rest}
+>
+	{#each rows as row, i (i)}
+		<div class="kv-row">
+			<dt class="kv-label">{row.label}</dt>
+			<dd class="kv-value">
+				{#if typeof row.value === 'function'}
+					{@render row.value()}
+				{:else}
+					<Text
+						tone={TEXT_TONE[row.tone ?? 'neutral']}
+						variant={row.mono ? 'code' : undefined}
+						numeric={typeof row.value === 'number'}
+					>
+						{row.value}
+					</Text>
+				{/if}
+				{#if row.hint}
+					<Text as="div" variant="caption" class="kv-hint">{row.hint}</Text>
+				{/if}
+			</dd>
+		</div>
+	{/each}
+</dl>
+
+<style>
+	.kv {
+		display: grid;
+		grid-template-columns: max-content minmax(0, 1fr);
+		column-gap: var(--sp-4);
+		row-gap: var(--sp-2);
+		margin: 0;
+		font-size: var(--fs-sm);
+	}
+	.kv-cols-2 {
+		grid-template-columns: repeat(2, max-content minmax(0, 1fr));
+	}
+	.kv-dense {
+		row-gap: var(--sp-1);
+		column-gap: var(--sp-3);
+		font-size: var(--fs-xs);
+	}
+	.kv-row {
+		display: contents;
+	}
+	.kv-label {
+		color: var(--text-muted);
+		font-weight: var(--fw-medium);
+	}
+	.kv-value {
+		margin: 0;
+		min-width: 0;
+		color: var(--text);
+		overflow-wrap: anywhere;
+	}
+	.kv-align-end .kv-value {
+		text-align: end;
+	}
+	.kv-value :global(.kv-hint) {
+		margin-top: var(--sp-1);
+	}
+	@container (max-width: 30rem) {
+		.kv-cols-2 {
+			grid-template-columns: max-content minmax(0, 1fr);
+		}
+	}
+</style>

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

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+export type KeyValueTone = 'neutral' | 'ok' | 'warn' | 'danger' | 'info';
+export interface KeyValueRow {
+    label: string;
+    value: string | number | Snippet;
+    mono?: boolean;
+    tone?: KeyValueTone;
+    hint?: string;
+}
+type $$ComponentProps = {
+    rows: KeyValueRow[];
+    columns?: 1 | 2;
+    dense?: boolean;
+    align?: 'start' | 'end';
+    class?: string;
+    [key: string]: unknown;
+};
+declare const KeyValue: import("svelte").Component<$$ComponentProps, {}, "">;
+type KeyValue = ReturnType<typeof KeyValue>;
+export default KeyValue;

package/dist/components/molecules/LoadMore.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+	// Tri-state "load more" footer for paginated lists: idle button, loading
+	// button (spinner, blocks re-entry), error line with retry, or a faint
+	// "done" note. `pill` renders the compact centered chip used to load older
+	// items above a feed.
+	import Button from '../atoms/Button.svelte';
+	import Text from '../atoms/Text.svelte';
+
+	let {
+		state = 'idle',
+		onload,
+		label = 'Load more',
+		loadingLabel = 'Loading…',
+		errorLabel = 'Failed to load',
+		retryLabel = 'Retry',
+		doneLabel = 'No more items',
+		pill = false,
+		class: klass = '',
+		...rest
+	}: {
+		state?: 'idle' | 'loading' | 'error' | 'done';
+		onload?: () => void;
+		label?: string;
+		loadingLabel?: string;
+		errorLabel?: string;
+		retryLabel?: string;
+		doneLabel?: string;
+		pill?: boolean;
+		class?: string;
+		[key: string]: unknown;
+	} = $props();
+</script>
+
+<div
+	data-tsu="LoadMore"
+	data-state={state}
+	class="load-more {klass}"
+	class:load-more-pill={pill}
+	role="status"
+	aria-busy={state === 'loading' || undefined}
+	{...rest}
+>
+	{#if state === 'done'}
+		<Text variant="caption" class="load-more-done">{doneLabel}</Text>
+	{:else if state === 'error'}
+		<Text tone="danger" size="sm" class="load-more-error">{errorLabel}</Text>
+		<Button size="sm" onclick={() => onload?.()}>{retryLabel}</Button>
+	{:else}
+		<Button
+			size="sm"
+			variant={pill ? 'default' : 'ghost'}
+			loading={state === 'loading'}
+			class={pill ? 'load-more-chip' : ''}
+			onclick={() => onload?.()}
+		>
+			{state === 'loading' ? loadingLabel : label}
+		</Button>
+	{/if}
+</div>
+
+<style>
+	.load-more {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		justify-content: center;
+		gap: var(--sp-2);
+		padding: var(--sp-2);
+		min-height: var(--sp-8);
+	}
+	.load-more-pill {
+		padding: var(--sp-1);
+	}
+	.load-more :global(.load-more-chip) {
+		border-radius: var(--r-pill);
+		font-size: var(--fs-xs);
+	}
+</style>

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

@@ -0,0 +1,15 @@
+type $$ComponentProps = {
+    state?: 'idle' | 'loading' | 'error' | 'done';
+    onload?: () => void;
+    label?: string;
+    loadingLabel?: string;
+    errorLabel?: string;
+    retryLabel?: string;
+    doneLabel?: string;
+    pill?: boolean;
+    class?: string;
+    [key: string]: unknown;
+};
+declare const LoadMore: import("svelte").Component<$$ComponentProps, {}, "">;
+type LoadMore = ReturnType<typeof LoadMore>;
+export default LoadMore;

package/dist/components/molecules/Modal.svelte

@@ -3,24 +3,46 @@
 	// the platform gives us the hard parts for free: top-layer rendering above
 	// everything (no z-index races), a real focus trap, inert background, initial
 	// focus, focus restoration to the trigger, Escape-to-close and a styleable
-	// ::backdrop. We only add: open-on-mount, click-outside, and optional
-	// desktop resize (width persisted under `resizeKey`).
+	// ::backdrop. We only add: open-on-mount (or `open`-driven), click-outside,
+	// tone/busy chrome, and optional desktop resize (width persisted under
+	// `resizeKey`).
 	import type { Snippet } from 'svelte';
 	import { browser } from '../../env';
+	import Icon, { type IconName } from '../atoms/Icon.svelte';
+	import Spinner from '../atoms/Spinner.svelte';
 	import IconButton from './IconButton.svelte';
 
+	type Tone = 'neutral' | 'danger' | 'warn' | 'info';
+	const TONE_ICON: Record<Exclude<Tone, 'neutral'>, IconName> = {
+		danger: 'warning',
+		warn: 'warning',
+		info: 'info'
+	};
+
 	let {
 		title,
+		open = $bindable(),
 		onclose,
 		body,
 		footer,
 		size = 'md',
+		tone = 'neutral',
+		busy = false,
 		resizeKey
 	}: {
 		title: string;
-		onclose: () => void;
+		/** Controlled visibility. When provided the `<dialog>` stays mounted and
+		 *  `showModal()`/`close()` follow the value; closing sets it back to false.
+		 *  Omit to open on mount (mount/unmount the component to show/hide). */
+		open?: boolean;
+		onclose?: () => void;
 		body: Snippet;
 		footer?: Snippet;
+		/** Title glyph + 3px top border in the semantic colour. */
+		tone?: Tone;
+		/** Work in flight: body is inert, a spinner sits by the title and Escape,
+		 *  backdrop and the close button stop closing until it clears. */
+		busy?: boolean;
 		/** Desktop width preset (sm 24rem / md 34rem / lg 48rem / xl 72rem). A
 		 *  `resizeKey` drag still overrides it. */
 		size?: 'sm' | 'md' | 'lg' | 'xl';
@@ -42,16 +64,30 @@
 	let width = $state<number | null>(loadWidth());
 	let dialogEl = $state<HTMLDialogElement | null>(null);
 
+	const controlled = $derived(open !== undefined);
+
+	// Open as a modal (top layer + trap + inert background + focus mgmt). The
+	// native element restores focus to the trigger automatically on close.
 	$effect(() => {
-		// Open as a modal (top layer + trap + inert background + focus mgmt). The
-		// native element restores focus to the trigger automatically on close.
-		dialogEl?.showModal();
+		if (!dialogEl) return;
+		if (!controlled) {
+			dialogEl.showModal();
+			return;
+		}
+		if (open && !dialogEl.open) dialogEl.showModal();
+		else if (!open && dialogEl.open) dialogEl.close();
 	});
 
+	function requestClose() {
+		if (busy) return;
+		if (controlled) open = false;
+		onclose?.();
+	}
+
 	// Click outside: <dialog fills the viewport; clicks on its padding-free self
 	// (not the inner .sheet) are backdrop clicks.
 	function onDialogClick(e: MouseEvent) {
-		if (e.target === dialogEl) onclose();
+		if (e.target === dialogEl) requestClose();
 	}
 
 	// --- resize ---
@@ -102,10 +138,15 @@
 	class="modal"
 	class:resizing
 	aria-labelledby={titleId}
+	aria-busy={busy || undefined}
+	data-tone={tone === 'neutral' ? undefined : tone}
 	style={width != null ? `--sheet-w: ${width}px` : undefined}
 	oncancel={(e) => {
 		e.preventDefault(); /* keep parent the source of truth for open state */
-		onclose();
+		requestClose();
+	}}
+	onclose={() => {
+		if (controlled) open = false;
 	}}
 	onclick={onDialogClick}
 >
@@ -114,13 +155,19 @@
 		class:sheet-sm={size === 'sm'}
 		class:sheet-lg={size === 'lg'}
 		class:sheet-xl={size === 'xl'}
+		class:sheet-toned={tone !== 'neutral'}
+		style:--modal-tone={tone === 'neutral' ? undefined : `var(--${tone})`}
 	>
 		<div class="sheet-head">
+			{#if tone !== 'neutral'}
+				<span class="sheet-tone-icon"><Icon name={TONE_ICON[tone]} size={18} /></span>
+			{/if}
 			<span id={titleId} class="sheet-title truncate">{title}</span>
+			{#if busy}<Spinner label="Working" />{/if}
 			<div class="spacer"></div>
-			<IconButton icon="x" label="Close dialog" onclick={onclose} />
+			<IconButton icon="x" label="Close dialog" disabled={busy} onclick={requestClose} />
 		</div>
-		<div class="sheet-body">
+		<div class="sheet-body" inert={busy}>
 			{@render body()}
 		</div>
 		{#if footer}
@@ -231,6 +278,14 @@
 		padding: var(--sp-4);
 		border-bottom: 1px solid var(--border);
 	}
+	.sheet-toned {
+		border-top: 3px solid var(--modal-tone);
+	}
+	.sheet-tone-icon {
+		display: inline-flex;
+		flex: none;
+		color: var(--modal-tone);
+	}
 	.sheet-title {
 		font-size: var(--fs-lg);
 		font-weight: var(--fw-semibold);
@@ -242,6 +297,7 @@
 	}
 	.sheet-foot {
 		display: flex;
+		justify-content: flex-end;
 		gap: var(--sp-2);
 		padding: var(--sp-4);
 		border-top: 1px solid var(--border);

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

@@ -1,9 +1,19 @@
 import type { Snippet } from 'svelte';
+type Tone = 'neutral' | 'danger' | 'warn' | 'info';
 type $$ComponentProps = {
     title: string;
-    onclose: () => void;
+    /** Controlled visibility. When provided the `<dialog>` stays mounted and
+     *  `showModal()`/`close()` follow the value; closing sets it back to false.
+     *  Omit to open on mount (mount/unmount the component to show/hide). */
+    open?: boolean;
+    onclose?: () => void;
     body: Snippet;
     footer?: Snippet;
+    /** Title glyph + 3px top border in the semantic colour. */
+    tone?: Tone;
+    /** Work in flight: body is inert, a spinner sits by the title and Escape,
+     *  backdrop and the close button stop closing until it clears. */
+    busy?: boolean;
     /** Desktop width preset (sm 24rem / md 34rem / lg 48rem / xl 72rem). A
      *  `resizeKey` drag still overrides it. */
     size?: 'sm' | 'md' | 'lg' | 'xl';
@@ -11,6 +21,6 @@ type $$ComponentProps = {
      *  width persists under this localStorage key. */
     resizeKey?: string;
 };
-declare const Modal: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const Modal: import("svelte").Component<$$ComponentProps, {}, "open">;
 type Modal = ReturnType<typeof Modal>;
 export default Modal;

package/dist/components/molecules/Pagination.svelte

@@ -0,0 +1,209 @@
+<script lang="ts">
+	// Page navigation in two flavours: page mode (`page` + `pageCount`) or
+	// offset mode (`offset` + `limit` + `total`, page/pageCount derived and
+	// `offset` written back). Numbered buttons collapse to prev / "3 / 12" /
+	// next when the container is narrower than 24rem.
+	import Text from '../atoms/Text.svelte';
+	import IconButton from './IconButton.svelte';
+
+	let {
+		page = $bindable(1),
+		pageCount,
+		offset = $bindable(),
+		limit,
+		total,
+		onchange,
+		siblings = 1,
+		showEdges = true,
+		showRange = false,
+		size = 'md',
+		label = 'Pagination',
+		class: klass = ''
+	}: {
+		/** 1-based current page. */
+		page?: number;
+		pageCount?: number;
+		/** Offset mode: 0-based index of the first item; needs `limit` + `total`. */
+		offset?: number;
+		limit?: number;
+		total?: number;
+		onchange?: (page: number) => void;
+		/** Numbered pages shown on each side of the current one. */
+		siblings?: number;
+		/** Always show the first and last page. */
+		showEdges?: boolean;
+		/** Show "1–20 / 412" (offset mode) or "3 / 12" next to the buttons. */
+		showRange?: boolean;
+		size?: 'sm' | 'md';
+		label?: string;
+		class?: string;
+	} = $props();
+
+	const offsetMode = $derived(offset !== undefined && limit !== undefined && total !== undefined);
+	const count = $derived(
+		Math.max(
+			1,
+			offsetMode ? Math.ceil((total as number) / Math.max(1, limit as number)) : (pageCount ?? 1)
+		)
+	);
+	const current = $derived(
+		Math.min(
+			count,
+			Math.max(
+				1,
+				offsetMode ? Math.floor((offset as number) / Math.max(1, limit as number)) + 1 : page
+			)
+		)
+	);
+
+	const ELLIPSIS = -1;
+	const items = $derived.by((): number[] => {
+		const out: number[] = [];
+		const lo = Math.max(1, current - siblings);
+		const hi = Math.min(count, current + siblings);
+		if (showEdges && lo > 1) {
+			out.push(1);
+			if (lo > 2) out.push(ELLIPSIS);
+		}
+		for (let p = lo; p <= hi; p++) out.push(p);
+		if (showEdges && hi < count) {
+			if (hi < count - 1) out.push(ELLIPSIS);
+			out.push(count);
+		}
+		return out;
+	});
+
+	const rangeText = $derived.by(() => {
+		if (offsetMode) {
+			const t = total as number;
+			const from = t === 0 ? 0 : (current - 1) * (limit as number) + 1;
+			const to = Math.min(t, current * (limit as number));
+			return `${from}–${to} / ${t}`;
+		}
+		return `${current} / ${count}`;
+	});
+
+	function go(p: number) {
+		const next = Math.min(count, Math.max(1, p));
+		if (next === current) return;
+		page = next;
+		if (offsetMode) offset = (next - 1) * (limit as number);
+		onchange?.(next);
+	}
+</script>
+
+<nav
+	data-tsu="Pagination"
+	class="pagination {klass}"
+	class:pagination-sm={size === 'sm'}
+	aria-label={label}
+>
+	<IconButton
+		icon="chevron-left"
+		label="Previous page"
+		box={size === 'sm' ? 'sm' : 'md'}
+		disabled={current <= 1}
+		onclick={() => go(current - 1)}
+	/>
+	<ol class="pages">
+		{#each items as item, i (item === ELLIPSIS ? `e${i}` : item)}
+			<li>
+				{#if item === ELLIPSIS}
+					<span class="ellipsis" aria-hidden="true">…</span>
+				{:else}
+					<button
+						type="button"
+						class="page"
+						class:on={item === current}
+						aria-current={item === current ? 'page' : undefined}
+						aria-label="Page {item}"
+						onclick={() => go(item)}
+					>
+						{item}
+					</button>
+				{/if}
+			</li>
+		{/each}
+	</ol>
+	<Text class="compact" size="sm" numeric tone="muted" aria-live="polite">{current} / {count}</Text>
+	<IconButton
+		icon="chevron-right"
+		label="Next page"
+		box={size === 'sm' ? 'sm' : 'md'}
+		disabled={current >= count}
+		onclick={() => go(current + 1)}
+	/>
+	{#if showRange}
+		<Text class="range" size="sm" numeric tone="muted">{rangeText}</Text>
+	{/if}
+</nav>
+
+<style>
+	.pagination {
+		container-type: inline-size;
+		display: flex;
+		align-items: center;
+		gap: var(--sp-1);
+		flex-wrap: wrap;
+	}
+	.pages {
+		display: flex;
+		align-items: center;
+		gap: var(--sp-1);
+		list-style: none;
+		margin: 0;
+		padding: 0;
+	}
+	.page {
+		min-width: var(--box-md);
+		height: var(--box-md);
+		padding: 0 var(--sp-2);
+		border: 1px solid transparent;
+		border-radius: 999px;
+		background: transparent;
+		color: var(--text-muted);
+		font-size: var(--fs-sm);
+		font-variant-numeric: tabular-nums;
+		cursor: pointer;
+		transition:
+			background 0.12s var(--ease),
+			color 0.12s var(--ease);
+	}
+	.page:hover {
+		background: var(--bg-elevated-2);
+		color: var(--text);
+	}
+	.page.on {
+		background: color-mix(in srgb, var(--accent) 16%, transparent);
+		border-color: color-mix(in srgb, var(--accent) 50%, transparent);
+		color: var(--accent);
+		font-weight: var(--fw-semibold);
+	}
+	.pagination-sm .page {
+		min-width: var(--box-sm);
+		height: var(--box-sm);
+		font-size: var(--fs-xs);
+	}
+	.ellipsis {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		min-width: var(--box-md);
+		color: var(--text-faint);
+	}
+	.pagination :global(.compact) {
+		display: none;
+		padding: 0 var(--sp-2);
+	}
+	.pagination :global(.range) {
+		margin-left: var(--sp-2);
+	}
+	@container (max-width: 24rem) {
+		.pages {
+			display: none;
+		}
+		.pagination :global(.compact) {
+			display: inline;
+		}
+	}
+</style>

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

@@ -0,0 +1,22 @@
+type $$ComponentProps = {
+    /** 1-based current page. */
+    page?: number;
+    pageCount?: number;
+    /** Offset mode: 0-based index of the first item; needs `limit` + `total`. */
+    offset?: number;
+    limit?: number;
+    total?: number;
+    onchange?: (page: number) => void;
+    /** Numbered pages shown on each side of the current one. */
+    siblings?: number;
+    /** Always show the first and last page. */
+    showEdges?: boolean;
+    /** Show "1–20 / 412" (offset mode) or "3 / 12" next to the buttons. */
+    showRange?: boolean;
+    size?: 'sm' | 'md';
+    label?: string;
+    class?: string;
+};
+declare const Pagination: import("svelte").Component<$$ComponentProps, {}, "page" | "offset">;
+type Pagination = ReturnType<typeof Pagination>;
+export default Pagination;

package/dist/components/molecules/SectionHeader.svelte

@@ -0,0 +1,233 @@
+<script lang="ts">
+	// Section / group header: heading + optional subtitle, icon, count, hue
+	// swatch and right-aligned actions on one wrapping row. `divider` underlines
+	// it, `sticky` pins it under the app header and publishes its height as
+	// `--section-header-h` on the parent so sibling sticky content can offset
+	// itself. `collapsible` turns the title into a disclosure button that
+	// toggles the `children` block rendered beneath.
+	import type { Snippet } from 'svelte';
+	import Heading from '../atoms/Heading.svelte';
+	import Icon, { type IconName } from '../atoms/Icon.svelte';
+	import Text from '../atoms/Text.svelte';
+
+	type Tone = 'neutral' | 'ok' | 'warn' | 'danger' | 'info';
+	type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+
+	let {
+		title,
+		label,
+		level = 2,
+		size,
+		subtitle,
+		icon,
+		count,
+		tone = 'neutral',
+		hue,
+		uppercase = false,
+		divider = false,
+		sticky = false,
+		collapsible = false,
+		open = $bindable(true),
+		class: klass = '',
+		actions,
+		children,
+		...rest
+	}: {
+		title?: string;
+		/** Alias for `title`. */
+		label?: string;
+		level?: 1 | 2 | 3 | 4;
+		size?: Size;
+		subtitle?: string;
+		icon?: IconName;
+		count?: number | string;
+		tone?: Tone;
+		/** Hue (0–360) rendered as a small swatch chip before the title. */
+		hue?: number;
+		uppercase?: boolean;
+		divider?: boolean;
+		sticky?: boolean;
+		collapsible?: boolean;
+		open?: boolean;
+		class?: string;
+		actions?: Snippet;
+		children?: Snippet;
+		[key: string]: unknown;
+	} = $props();
+
+	const text = $derived(title ?? label ?? '');
+	const id = $props.id();
+	const panelId = `${id}-panel`;
+	let el = $state<HTMLElement>();
+	let height = $state(0);
+
+	$effect(() => {
+		const parent = el?.parentElement;
+		if (!parent) return;
+		if (sticky) parent.style.setProperty('--section-header-h', `${height}px`);
+		else parent.style.removeProperty('--section-header-h');
+		return () => parent.style.removeProperty('--section-header-h');
+	});
+</script>
+
+<div
+	bind:this={el}
+	bind:offsetHeight={height}
+	data-tsu="SectionHeader"
+	class="section-header sh-{tone} {klass}"
+	class:sh-divider={divider}
+	class:sh-sticky={sticky}
+	class:sh-uppercase={uppercase}
+	class:sh-open={open}
+	{...rest}
+>
+	<div class="sh-row">
+		{#if collapsible}
+			<button
+				type="button"
+				class="sh-toggle"
+				aria-expanded={open}
+				aria-controls={panelId}
+				onclick={() => (open = !open)}
+			>
+				<Icon name="chevron-right" class="sh-chevron" />
+				{@render head()}
+			</button>
+		{:else}
+			{@render head()}
+		{/if}
+		{#if subtitle}
+			<Text variant="caption" class="sh-subtitle">{subtitle}</Text>
+		{/if}
+		{#if actions}
+			<div class="sh-actions">{@render actions()}</div>
+		{/if}
+	</div>
+	{#if children && (!collapsible || open)}
+		<div class="sh-panel" id={panelId}>{@render children()}</div>
+	{/if}
+</div>
+
+{#snippet head()}
+	{#if hue !== undefined}
+		<span class="sh-swatch" style:--sh-hue={hue} aria-hidden="true"></span>
+	{/if}
+	{#if icon}
+		<span class="sh-icon" aria-hidden="true"><Icon name={icon} /></span>
+	{/if}
+	<Heading {level} {size} class="sh-title">{text}</Heading>
+	{#if count !== undefined}
+		<Text tone="faint" weight="normal" numeric class="sh-count">{count}</Text>
+	{/if}
+{/snippet}
+
+<style>
+	.section-header {
+		--sh-tone: var(--text);
+	}
+	.sh-ok {
+		--sh-tone: var(--ok);
+	}
+	.sh-warn {
+		--sh-tone: var(--warn);
+	}
+	.sh-danger {
+		--sh-tone: var(--danger);
+	}
+	.sh-info {
+		--sh-tone: var(--info);
+	}
+	.sh-row {
+		display: flex;
+		align-items: center;
+		gap: var(--sp-3);
+		flex-wrap: wrap;
+		min-width: 0;
+	}
+	.sh-divider > .sh-row {
+		padding-bottom: var(--sp-2);
+		border-bottom: 1px solid var(--border);
+	}
+	.sh-sticky {
+		position: sticky;
+		top: var(--sticky-offset, var(--header-h, 0));
+		z-index: 1;
+		background: var(--section-header-bg, var(--bg));
+	}
+	.section-header :global(.sh-title) {
+		color: var(--sh-tone);
+		min-width: 0;
+		overflow-wrap: anywhere;
+	}
+	.sh-uppercase :global(.sh-title) {
+		text-transform: uppercase;
+		letter-spacing: 0.06em;
+		font-size: var(--fs-xs);
+		color: var(--text-muted);
+	}
+	.sh-ok.sh-uppercase :global(.sh-title),
+	.sh-warn.sh-uppercase :global(.sh-title),
+	.sh-danger.sh-uppercase :global(.sh-title),
+	.sh-info.sh-uppercase :global(.sh-title) {
+		color: var(--sh-tone);
+	}
+	.sh-icon {
+		display: inline-flex;
+		flex: none;
+		color: var(--sh-tone);
+		line-height: 1;
+	}
+	.sh-swatch {
+		flex: none;
+		width: 0.625rem;
+		height: 0.625rem;
+		border-radius: var(--r-sm);
+		background: hsl(var(--sh-hue) 70% 55%);
+		box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 20%, transparent);
+	}
+	.section-header :global(.sh-subtitle) {
+		flex: 1 1 auto;
+		min-width: 0;
+	}
+	.sh-actions {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: var(--sp-2);
+		margin-inline-start: auto;
+	}
+	.sh-toggle {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--sp-2);
+		min-width: 0;
+		padding: 0;
+		border: 0;
+		background: none;
+		font: inherit;
+		color: inherit;
+		text-align: start;
+		cursor: pointer;
+		border-radius: var(--r-sm);
+	}
+	.sh-toggle:focus-visible {
+		outline: 2px solid var(--accent);
+		outline-offset: 2px;
+	}
+	.section-header :global(.sh-chevron) {
+		flex: none;
+		color: var(--text-muted);
+		transition: transform 0.15s var(--ease);
+	}
+	.sh-open :global(.sh-chevron) {
+		transform: rotate(90deg);
+	}
+	.sh-panel {
+		margin-top: var(--sp-3);
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.section-header :global(.sh-chevron) {
+			transition: none;
+		}
+	}
+</style>

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

@@ -0,0 +1,29 @@
+import type { Snippet } from 'svelte';
+import { type IconName } from '../atoms/Icon.svelte';
+type Tone = 'neutral' | 'ok' | 'warn' | 'danger' | 'info';
+type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+type $$ComponentProps = {
+    title?: string;
+    /** Alias for `title`. */
+    label?: string;
+    level?: 1 | 2 | 3 | 4;
+    size?: Size;
+    subtitle?: string;
+    icon?: IconName;
+    count?: number | string;
+    tone?: Tone;
+    /** Hue (0–360) rendered as a small swatch chip before the title. */
+    hue?: number;
+    uppercase?: boolean;
+    divider?: boolean;
+    sticky?: boolean;
+    collapsible?: boolean;
+    open?: boolean;
+    class?: string;
+    actions?: Snippet;
+    children?: Snippet;
+    [key: string]: unknown;
+};
+declare const SectionHeader: import("svelte").Component<$$ComponentProps, {}, "open">;
+type SectionHeader = ReturnType<typeof SectionHeader>;
+export default SectionHeader;

package/dist/index.d.ts

@@ -32,6 +32,7 @@ export { type AccordionItem, default as Accordion, } from './components/molecule
 export { type BreadcrumbItem, default as Breadcrumb, } from './components/molecules/Breadcrumb.svelte';
 export { default as Callout } from './components/molecules/Callout.svelte';
 export { default as CodeBlock } from './components/molecules/CodeBlock.svelte';
+export { default as ConfirmModal } from './components/molecules/ConfirmModal.svelte';
 export { default as CopyButton } from './components/molecules/CopyButton.svelte';
 export { default as Dropzone } from './components/molecules/Dropzone.svelte';
 export { default as EmptyState } from './components/molecules/EmptyState.svelte';
@@ -40,12 +41,16 @@ export { default as FileButton } from './components/molecules/FileButton.svelte'
 export { default as FilterInput, type FilterInputContext, } from './components/molecules/FilterInput.svelte';
 export { default as FontScalePicker } from './components/molecules/FontScalePicker.svelte';
 export { default as IconButton } from './components/molecules/IconButton.svelte';
+export { default as KeyValue, type KeyValueRow, type KeyValueTone, } from './components/molecules/KeyValue.svelte';
+export { default as LoadMore } from './components/molecules/LoadMore.svelte';
 export { default as Menu, type MenuItem } from './components/molecules/Menu.svelte';
 export { default as Metric, default as StatTile, } from './components/molecules/Metric.svelte';
 export { default as Modal } from './components/molecules/Modal.svelte';
 export { default as OptionButton } from './components/molecules/OptionButton.svelte';
+export { default as Pagination } from './components/molecules/Pagination.svelte';
 export { default as Popover } from './components/molecules/Popover.svelte';
 export { default as RadioGroup, type RadioOption, } from './components/molecules/RadioGroup.svelte';
+export { default as SectionHeader } from './components/molecules/SectionHeader.svelte';
 export { default as SegmentedControl, type SegmentOption, } from './components/molecules/SegmentedControl.svelte';
 export { default as SelectButton } from './components/molecules/SelectButton.svelte';
 export { default as Tabs, type TabItem } from './components/molecules/Tabs.svelte';

package/dist/index.js

@@ -39,6 +39,7 @@ export { default as Accordion, } from './components/molecules/Accordion.svelte';
 export { default as Breadcrumb, } from './components/molecules/Breadcrumb.svelte';
 export { default as Callout } from './components/molecules/Callout.svelte';
 export { default as CodeBlock } from './components/molecules/CodeBlock.svelte';
+export { default as ConfirmModal } from './components/molecules/ConfirmModal.svelte';
 export { default as CopyButton } from './components/molecules/CopyButton.svelte';
 export { default as Dropzone } from './components/molecules/Dropzone.svelte';
 export { default as EmptyState } from './components/molecules/EmptyState.svelte';
@@ -48,14 +49,18 @@ export { default as FileButton } from './components/molecules/FileButton.svelte'
 export { default as FilterInput, } from './components/molecules/FilterInput.svelte';
 export { default as FontScalePicker } from './components/molecules/FontScalePicker.svelte';
 export { default as IconButton } from './components/molecules/IconButton.svelte';
+export { default as KeyValue, } from './components/molecules/KeyValue.svelte';
+export { default as LoadMore } from './components/molecules/LoadMore.svelte';
 export { default as Menu } from './components/molecules/Menu.svelte';
 export { default as Metric, 
 // StatTile is an alias for Metric — same component, dashboard-friendly name.
 default as StatTile, } from './components/molecules/Metric.svelte';
 export { default as Modal } from './components/molecules/Modal.svelte';
 export { default as OptionButton } from './components/molecules/OptionButton.svelte';
+export { default as Pagination } from './components/molecules/Pagination.svelte';
 export { default as Popover } from './components/molecules/Popover.svelte';
 export { default as RadioGroup, } from './components/molecules/RadioGroup.svelte';
+export { default as SectionHeader } from './components/molecules/SectionHeader.svelte';
 export { default as SegmentedControl, } from './components/molecules/SegmentedControl.svelte';
 export { default as SelectButton } from './components/molecules/SelectButton.svelte';
 export { default as Tabs } from './components/molecules/Tabs.svelte';

package/package.json

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