@dorsk/tsumikit 0.21.0 → 0.23.0

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: "";