@dorsk/tsumikit 0.70.0 → 0.72.0

package/dist/components/organisms/DataTable.svelte

@@ -25,6 +25,16 @@
 		 *  detail cells share lines (`responsive="stack"` only, default true). */
 		stackLabel?: boolean;
 	}
+
+	let rootFontPx: number | undefined;
+
+	function rootFontSize(): number {
+		if (rootFontPx === undefined) {
+			rootFontPx = Number.parseFloat(getComputedStyle(document.documentElement).fontSize);
+			window.addEventListener('resize', () => (rootFontPx = undefined), { once: true });
+		}
+		return rootFontPx;
+	}
 </script>
 
 <script lang="ts" generics="T">
@@ -60,6 +70,7 @@
 		loadMoreLabel = 'Load more',
 		responsive = 'scroll',
 		stackBelow = '48rem',
+		stackActions = 'start',
 		class: klass = '',
 		style: styleProp = '',
 		tableClass = '',
@@ -76,9 +87,11 @@
 		/** Replaces a column's header content (e.g. a select-all checkbox). */
 		headerSnippets?: Record<string, Snippet<[Column<T>]>>;
 		empty?: string | Snippet;
+		/** Sticks within the table's own scroller, which also scrolls horizontally,
+		 *  so it only sticks when the table has a bounded height
+		 *  (e.g. `style="max-height: 60vh"`), not to the page. */
 		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. */
+		/** Distance from the scroller's top for the sticky header. Defaults to 0. */
 		stickyOffset?: string;
 		/** `fixed` makes declared column widths authoritative (needed for truncate). */
 		layout?: 'auto' | 'fixed';
@@ -101,6 +114,9 @@
 		responsive?: 'scroll' | 'stack';
 		/** Width (px/em/rem) under which `stack` mode kicks in. */
 		stackBelow?: string;
+		/** Where actions sit in a stacked card: `start` beside the title (wraps
+		 *  under a long one), `end` always closing the card. */
+		stackActions?: 'start' | 'end';
 		class?: string;
 		style?: string;
 		/** Class on the inner <table>. */
@@ -121,22 +137,31 @@
 		return { destroy: () => observer.disconnect() };
 	}
 
+	function markEmpty(node: HTMLElement) {
+		const update = () => node.toggleAttribute('data-empty', !node.firstElementChild && !node.textContent?.trim());
+		update();
+		const observer = new MutationObserver(update);
+		observer.observe(node, { childList: true, subtree: true, characterData: true });
+		return () => observer.disconnect();
+	}
+
 	function toPx(length: string, el: HTMLElement): number {
 		const n = Number.parseFloat(length);
-		const fontSize = (node: Element) => Number.parseFloat(getComputedStyle(node).fontSize);
-		if (length.endsWith('rem')) return n * fontSize(document.documentElement);
-		if (length.endsWith('em')) return n * fontSize(el);
+		if (length.endsWith('rem')) return n * rootFontSize();
+		if (length.endsWith('em')) return n * Number.parseFloat(getComputedStyle(el).fontSize);
 		return n;
 	}
 
+	// Font sizes are read in the observer callback, after layout, so mounting never forces a style recalc.
 	$effect(() => {
 		if (responsive !== 'stack' || !wrapEl) {
 			stacked = false;
 			return;
 		}
 		const el = wrapEl;
-		const limit = toPx(stackBelow, el);
+		const below = stackBelow;
 		const observer = new ResizeObserver(([entry]) => {
+			const limit = toPx(below, el);
 			stacked = entry.contentRect.width < limit;
 		});
 		observer.observe(el);
@@ -148,6 +173,13 @@
 
 	const colCount = $derived(columns.length + (rowActions ? 1 : 0));
 
+	const NESTED_CONTROL = 'a,button,input,select,textarea,label,summary,[role="button"],[contenteditable]';
+
+	function fromNestedControl(e: Event & { currentTarget: HTMLElement }): boolean {
+		const hit = (e.target as Element).closest(NESTED_CONTROL);
+		return !!hit && hit !== e.currentTarget && e.currentTarget.contains(hit);
+	}
+
 	function display(col: Column<T>, row: T): unknown {
 		if (col.get) return col.get(row);
 		return (row as Record<string, unknown>)[col.key];
@@ -188,6 +220,7 @@
 	data-tsu="DataTable"
 	data-size={size}
 	data-stacked={stacked || undefined}
+	data-stack-actions={responsive === 'stack' && stackActions === 'end' ? 'end' : undefined}
 	aria-busy={loading || undefined}
 >
 	<table
@@ -221,7 +254,7 @@
 						{:else if col.sortable}
 							<button type="button" class="dt-sort" onclick={() => toggleSort(col)}>
 								<span>{col.label}</span>
-								<span class="dt-arrow" class:active={sortKey === col.key}>
+								<span class="dt-arrow" aria-hidden="true" class:active={sortKey === col.key}>
 									{sortKey === col.key ? (sortDir === 'asc' ? '↑' : '↓') : '↕'}
 								</span>
 							</button>
@@ -256,9 +289,14 @@
 						class:clickable={!!onrowclick}
 						class:toned={!!tone && tone !== 'neutral'}
 						tabindex={onrowclick ? 0 : undefined}
-						onclick={onrowclick ? () => onrowclick(row) : undefined}
+						onclick={onrowclick
+							? (e) => {
+									if (!fromNestedControl(e)) onrowclick(row);
+								}
+							: undefined}
 						onkeydown={onrowclick
 							? (e) => {
+									if (e.target !== e.currentTarget) return;
 									if (e.key === 'Enter' || e.key === ' ') {
 										e.preventDefault();
 										onrowclick(row);
@@ -267,20 +305,25 @@
 							: undefined}
 					>
 						{#each columns as col (col.key)}
+							{@const value = cellSnippets[col.key] ? undefined : display(col, row)}
 							<td
 								data-part="cell"
 								data-hide-below={col.hideBelow}
 								data-role={responsive === 'stack' ? (col.role ?? 'detail') : undefined}
 								data-label={responsive === 'stack' ? col.label : undefined}
 								data-stack-label={responsive === 'stack' && col.stackLabel === false ? 'false' : undefined}
+								data-empty={responsive === 'stack' && !cellSnippets[col.key] && (value == null || value === '')
+									? ''
+									: undefined}
 								class:truncate={col.truncate}
 								class:nowrap={col.nowrap}
 								style:text-align={stacked ? undefined : (col.align ?? 'left')}
+								{@attach responsive === 'stack' && cellSnippets[col.key] ? markEmpty : undefined}
 							>
 								{#if cellSnippets[col.key]}
 									{@render cellSnippets[col.key](row)}
 								{:else}
-									{display(col, row)}
+									{value}
 								{/if}
 							</td>
 						{/each}
@@ -403,7 +446,10 @@
 	tr.clickable:hover,
 	tr.clickable:focus-visible {
 		background: var(--bg-elevated-2);
-		outline: none;
+	}
+	tr.clickable:focus-visible {
+		outline: var(--focus-ring);
+		outline-offset: -2px;
 	}
 	td.truncate {
 		white-space: nowrap;
@@ -479,6 +525,9 @@
 	[data-stacked] {
 		overflow-x: visible;
 	}
+	[data-stacked] .dt {
+		table-layout: fixed;
+	}
 	[data-stacked] thead {
 		position: absolute;
 		width: 1px;
@@ -552,10 +601,17 @@
 	[data-stacked] td[data-stack-label='false']::before {
 		content: none;
 	}
-	[data-stacked] td[data-role='meta'] ~ td[data-role='meta'][data-stack-label='false'] {
+	[data-stacked] td[data-part='cell'][data-empty] {
+		display: none;
+	}
+	[data-stacked]
+		td[data-role='meta']:not([data-empty])
+		~ td[data-role='meta'][data-stack-label='false']:not([data-empty]) {
 		margin-inline-start: calc(var(--sp-1) - var(--sp-3));
 	}
-	[data-stacked] td[data-role='meta'] ~ td[data-role='meta'][data-stack-label='false']::before {
+	[data-stacked]
+		td[data-role='meta']:not([data-empty])
+		~ td[data-role='meta'][data-stack-label='false']:not([data-empty])::before {
 		content: '·';
 		margin-inline-end: var(--sp-1);
 		color: var(--text-faint);
@@ -568,6 +624,10 @@
 		width: auto;
 		opacity: 1;
 	}
+	[data-stacked][data-stack-actions='end'] td[data-role='actions'],
+	[data-stacked][data-stack-actions='end'] td.dt-actions {
+		order: 2;
+	}
 	[data-stacked] td[data-role='hidden'] {
 		display: none;
 	}

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

@@ -38,9 +38,11 @@ declare function $$render<T>(): {
         /** Replaces a column's header content (e.g. a select-all checkbox). */
         headerSnippets?: Record<string, Snippet<[Column<T>]>>;
         empty?: string | Snippet;
+        /** Sticks within the table's own scroller, which also scrolls horizontally,
+         *  so it only sticks when the table has a bounded height
+         *  (e.g. `style="max-height: 60vh"`), not to the page. */
         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. */
+        /** Distance from the scroller's top for the sticky header. Defaults to 0. */
         stickyOffset?: string;
         /** `fixed` makes declared column widths authoritative (needed for truncate). */
         layout?: "auto" | "fixed";
@@ -63,6 +65,9 @@ declare function $$render<T>(): {
         responsive?: "scroll" | "stack";
         /** Width (px/em/rem) under which `stack` mode kicks in. */
         stackBelow?: string;
+        /** Where actions sit in a stacked card: `start` beside the title (wraps
+         *  under a long one), `end` always closing the card. */
+        stackActions?: "start" | "end";
         class?: string;
         style?: string;
         /** Class on the inner <table>. */

package/dist/components/organisms/FilterSearchBar.svelte

@@ -29,6 +29,7 @@
 		size = 'md',
 		shape = 'square',
 		surface = 'base',
+		font = 'mono',
 		hotkey,
 		showHotkey = false,
 		grow = false,
@@ -56,6 +57,8 @@
 		size?: ControlSize;
 		shape?: 'square' | 'pill';
 		surface?: 'base' | 'raised' | 'sunken';
+		/** `sans` renders the typed text and placeholder in `--font-sans`; chips stay mono. */
+		font?: 'mono' | 'sans';
 		hotkey?: string;
 		showHotkey?: boolean;
 		grow?: boolean;
@@ -81,6 +84,7 @@
 	{size}
 	{shape}
 	{surface}
+	{font}
 	{hotkey}
 	{showHotkey}
 	{grow}

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

@@ -19,6 +19,8 @@ type Own = {
     size?: ControlSize;
     shape?: 'square' | 'pill';
     surface?: 'base' | 'raised' | 'sunken';
+    /** `sans` renders the typed text and placeholder in `--font-sans`; chips stay mono. */
+    font?: 'mono' | 'sans';
     hotkey?: string;
     showHotkey?: boolean;
     grow?: boolean;

package/dist/index.d.ts

@@ -41,6 +41,7 @@ export { default as NavSection } from './components/layouts/NavSection.svelte';
 export { default as ResizablePanel } from './components/layouts/ResizablePanel.svelte';
 export { type ResizeHandleParams, resizeHandle, } from './components/layouts/resizable-panel-frame.js';
 export { default as Stack } from './components/layouts/Stack.svelte';
+export { default as TabBar, type TabBarItem } from './components/layouts/TabBar.svelte';
 export { default as Toolbar } from './components/layouts/Toolbar.svelte';
 export { type AccordionHeaderContext, type AccordionItem, type AccordionVariant, default as Accordion, } from './components/molecules/Accordion.svelte';
 export { type Attachment, default as AttachmentList, } from './components/molecules/AttachmentList.svelte';
@@ -79,6 +80,7 @@ export { default as OptionButton } from './components/molecules/OptionButton.sve
 export { default as Pagination } from './components/molecules/Pagination.svelte';
 export { default as Popover } from './components/molecules/Popover.svelte';
 export { default as Prose } from './components/molecules/Prose.svelte';
+export { default as PullToRefresh } from './components/molecules/PullToRefresh.svelte';
 export { default as RadialMenu, type RadialArc, } from './components/molecules/RadialMenu.svelte';
 export { default as RadioGroup, type RadioOption, } from './components/molecules/RadioGroup.svelte';
 export { default as SectionHeader } from './components/molecules/SectionHeader.svelte';
@@ -87,6 +89,7 @@ export { default as SelectButton } from './components/molecules/SelectButton.sve
 export { default as SortableList, SORTABLE_LIST_MESSAGES, type SortableListMessages, type SortableListMove, type SortableListRowContext, } from './components/molecules/SortableList.svelte';
 export { default as SplitButton } from './components/molecules/SplitButton.svelte';
 export { default as StatusBar } from './components/molecules/StatusBar.svelte';
+export { default as SwipeRow, type SwipeAction } from './components/molecules/SwipeRow.svelte';
 export { default as Tabs, type TabItem } from './components/molecules/Tabs.svelte';
 export { default as ThemePicker } from './components/molecules/ThemePicker.svelte';
 export { default as Timestamp } from './components/molecules/Timestamp.svelte';

package/dist/index.js

@@ -46,6 +46,7 @@ export { default as NavSection } from './components/layouts/NavSection.svelte';
 export { default as ResizablePanel } from './components/layouts/ResizablePanel.svelte';
 export { resizeHandle, } from './components/layouts/resizable-panel-frame.js';
 export { default as Stack } from './components/layouts/Stack.svelte';
+export { default as TabBar } from './components/layouts/TabBar.svelte';
 export { default as Toolbar } from './components/layouts/Toolbar.svelte';
 export { default as Accordion, } from './components/molecules/Accordion.svelte';
 export { default as AttachmentList, } from './components/molecules/AttachmentList.svelte';
@@ -87,6 +88,7 @@ export { default as OptionButton } from './components/molecules/OptionButton.sve
 export { default as Pagination } from './components/molecules/Pagination.svelte';
 export { default as Popover } from './components/molecules/Popover.svelte';
 export { default as Prose } from './components/molecules/Prose.svelte';
+export { default as PullToRefresh } from './components/molecules/PullToRefresh.svelte';
 export { default as RadialMenu, } from './components/molecules/RadialMenu.svelte';
 export { default as RadioGroup, } from './components/molecules/RadioGroup.svelte';
 export { default as SectionHeader } from './components/molecules/SectionHeader.svelte';
@@ -95,6 +97,7 @@ export { default as SelectButton } from './components/molecules/SelectButton.sve
 export { default as SortableList, SORTABLE_LIST_MESSAGES, } from './components/molecules/SortableList.svelte';
 export { default as SplitButton } from './components/molecules/SplitButton.svelte';
 export { default as StatusBar } from './components/molecules/StatusBar.svelte';
+export { default as SwipeRow } from './components/molecules/SwipeRow.svelte';
 export { default as Tabs } from './components/molecules/Tabs.svelte';
 export { default as ThemePicker } from './components/molecules/ThemePicker.svelte';
 export { default as Timestamp } from './components/molecules/Timestamp.svelte';

package/dist/markdown.js

@@ -15,6 +15,7 @@ const BLOCK_RE = new RegExp(`${BLOCK_L}(\\d+)${BLOCK_R}`, 'g');
 const SPAN_L = '\x10';
 const SPAN_R = '\x11';
 const SPAN_RE = new RegExp(`${SPAN_L}(\\d+)${SPAN_R}`, 'g');
+const BARE_URL_RE = new RegExp(`\\bhttps?://(?:&amp;|[^\\s&<>"${SPAN_L}${SPAN_R}])+`, 'g');
 // Terminal escape sequences (the ansi-regex pattern), then the remaining C0
 // controls except tab and newline, plus DEL.
 const ANSI_RE = 
@@ -62,20 +63,27 @@ function autolinkUrls(s) {
     });
     return s.replace(SPAN_RE, (_m, i) => saved[Number(i)]);
 }
-// Inline passes on already-escaped text.
+// Inline passes on already-escaped text; emphasis never reaches inside code, link tags or URLs.
 function inline(s, autolink) {
-    s = s.replace(/`([^`]+)`/g, '<code>$1</code>');
-    s = s.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
-    s = s.replace(/(^|[^*\w])\*([^*\n]+)\*/g, '$1<em>$2</em>');
-    s = s.replace(/(^|[^\w])_([^_\n]+)_(?!\w)/g, '$1<em>$2</em>');
-    s = s.replace(/~~([^~]+)~~/g, '<del>$1</del>');
+    const held = [];
+    const hold = (html) => `${SPAN_L}${held.push(html) - 1}${SPAN_R}`;
+    s = s.replace(/`([^`]+)`/g, (_m, code) => hold(`<code>${code}</code>`));
     s = s.replace(/\[([^\]]+)\]\(([^\s)]+)\)/g, (m, text, url) => {
         const href = safeHref(url);
         if (!href)
             return m;
         const external = /^https?:/i.test(href) ? ' target="_blank" rel="noopener noreferrer"' : '';
-        return `<a href="${href}"${external}>${text}</a>`;
+        return `${hold(`<a href="${href}"${external}>`)}${text}${hold('</a>')}`;
+    });
+    s = s.replace(BARE_URL_RE, (raw) => {
+        const url = raw.replace(/[*_~]+$/, '');
+        return hold(url) + raw.slice(url.length);
     });
+    s = s.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
+    s = s.replace(/(^|[^*\w])\*([^*\n]+)\*/g, '$1<em>$2</em>');
+    s = s.replace(/(^|[^\w])_([^_\n]+)_(?!\w)/g, '$1<em>$2</em>');
+    s = s.replace(/~~([^~]+)~~/g, '<del>$1</del>');
+    s = s.replace(SPAN_RE, (_m, i) => held[Number(i)]);
     return autolink ? autolinkUrls(s) : s;
 }
 function splitRow(row) {

package/dist/styles/reset.css

@@ -78,6 +78,11 @@ select {
 code,
 pre {
 	font-family: var(--font-mono);
+}
+code {
+	font-size: var(--fs-xs);
+}
+pre {
 	font-size: 0.875em;
 }
 
@@ -101,3 +106,28 @@ pre {
 	}
 }
 
+@media (prefers-reduced-motion: reduce) {
+	*,
+	*::before,
+	*::after {
+		animation-duration: 0.01ms !important;
+		animation-iteration-count: 1 !important;
+		transition-duration: 0.01ms !important;
+		scroll-behavior: auto !important;
+	}
+}
+
+/* Windows High Contrast: keep the focus ring on a system color. */
+@media (forced-colors: active) {
+	:focus-visible {
+		outline: 2px solid Highlight;
+		outline-offset: 2px;
+	}
+}
+
+/* Stronger separators when the user asks for more contrast. */
+@media (prefers-contrast: more) {
+	:root {
+		--border: var(--border-strong);
+	}
+}

package/dist/styles/syntax.css

@@ -63,32 +63,3 @@
 .hljs-deletion {
 	color: var(--danger);
 }
-
-@media (prefers-reduced-motion: reduce) {
-	*,
-	*::before,
-	*::after {
-		animation-duration: 0.01ms !important;
-		animation-iteration-count: 1 !important;
-		transition-duration: 0.01ms !important;
-		scroll-behavior: auto !important;
-	}
-}
-
-/* Forced colors (Windows High Contrast). The OS replaces our palette with its
-   own; our job is to not fight it and to keep affordances visible. Keep the
-   focus ring mapped to a system color, and make sure the focus outline shows
-   even where we'd normally rely on a token border. */
-@media (forced-colors: active) {
-	:focus-visible {
-		outline: 2px solid Highlight;
-		outline-offset: 2px;
-	}
-}
-
-/* Stronger separators when the user asks for more contrast. */
-@media (prefers-contrast: more) {
-	:root {
-		--border: var(--border-strong);
-	}
-}

package/dist/styles/tokens.css

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

package/package.json

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