@dorsk/tsumikit 0.68.0 → 0.69.0

package/README.md

@@ -334,7 +334,8 @@ bindable, `onselect`/`onclose(reason)` report picks; `findTrigger`/`applyTrigger
 are exported for trigger-char detection and token replacement).
 
 **Organisms:** ConversationPanel / ConversationFeed (chat column + sticky
-feed, see below), DataTable (generic `<T>`, typed columns + cell snippets;
+feed, see below), DataTable (generic `<T>`, typed columns + cell snippets; `headerSnippets[key]`
+replaces a header cell (a select-all checkbox);
 `layout="fixed"` makes column widths authoritative, `Column.truncate` /
 `nowrap` / `hideBelow="sm|md|lg"` (container-query on the table's own box),
 `hideHeader` clips the header but keeps it for assistive tech, `rowTone(row)`
@@ -346,7 +347,9 @@ for a hover/focus-revealed trailing cell (always visible on touch; under
 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 /
+prefix, `Column.stackLabel: false` drops it so metas join on one `·` line
+and details share lines, `--dt-meta-font` restyles meta values, 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`;

package/dist/components/molecules/SegmentedControl.svelte

@@ -3,8 +3,10 @@
 		value: string;
 		/** Visible text. Optional in `icon` mode where the icon carries the meaning. */
 		label?: string;
-		/** Optional count badge rendered after the label (filter-pill use). */
-		count?: number;
+		/** Optional count badge rendered after the label (filter-pill use). Numbers
+		 *  get thousands separators (`11178` → `11,178`, fixed en-US so SSR and
+		 *  hydration agree); strings render verbatim (`'99+'`, another locale). */
+		count?: number | string;
 		/** Icon glyph — required for icon-toggle mode, optional alongside a label. */
 		icon?: import('../atoms/Icon.svelte').IconName;
 		/** Greyed out, not selectable, skipped by keyboard navigation. */
@@ -23,6 +25,7 @@
 	// Space/Enter (or click) activate. `value` is bindable.
 	import type { Snippet } from 'svelte';
 	import Icon from '../atoms/Icon.svelte';
+	import { formatSegmentCount } from './segmented-control-count.js';
 	import { nextEnabledSegment } from './segmented-control-keyboard.js';
 
 	let {
@@ -143,7 +146,7 @@
 			{:else}
 				{#if o.icon}<Icon name={o.icon} />{/if}
 				{#if o.label}<span class="seg-label">{o.label}</span>{/if}
-				{#if o.count !== undefined}<span class="seg-count">{o.count}</span>{/if}
+				{#if o.count !== undefined}<span class="seg-count">{formatSegmentCount(o.count)}</span>{/if}
 			{/if}
 		</button>
 	{/each}

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

@@ -2,8 +2,10 @@ export interface SegmentOption {
     value: string;
     /** Visible text. Optional in `icon` mode where the icon carries the meaning. */
     label?: string;
-    /** Optional count badge rendered after the label (filter-pill use). */
-    count?: number;
+    /** Optional count badge rendered after the label (filter-pill use). Numbers
+     *  get thousands separators (`11178` → `11,178`, fixed en-US so SSR and
+     *  hydration agree); strings render verbatim (`'99+'`, another locale). */
+    count?: number | string;
     /** Icon glyph — required for icon-toggle mode, optional alongside a label. */
     icon?: import('../atoms/Icon.svelte').IconName;
     /** Greyed out, not selectable, skipped by keyboard navigation. */

package/dist/components/molecules/segmented-control-count.d.ts

@@ -0,0 +1,2 @@
+/** @param {number | string} count */
+export function formatSegmentCount(count: number | string): string;

package/dist/components/molecules/segmented-control-count.js

@@ -0,0 +1,6 @@
+const countFormat = new Intl.NumberFormat('en-US');
+
+/** @param {number | string} count */
+export function formatSegmentCount(count) {
+	return typeof count === 'number' ? countFormat.format(count) : count;
+}

package/dist/components/organisms/DataTable.svelte

@@ -21,6 +21,9 @@
 		/** Placement inside the stacked card (`responsive="stack"` only). Columns
 		 *  without a role render as `label: value` detail lines. */
 		role?: 'title' | 'detail' | 'meta' | 'actions' | 'hidden';
+		/** `false` drops the stacked label: meta cells join on one `·` line and
+		 *  detail cells share lines (`responsive="stack"` only, default true). */
+		stackLabel?: boolean;
 	}
 </script>
 
@@ -40,6 +43,7 @@
 		onrowclick,
 		onsort,
 		cellSnippets = {},
+		headerSnippets = {},
 		empty = 'No data.',
 		stickyHeader = false,
 		stickyOffset,
@@ -69,6 +73,8 @@
 		 *  table only reflects the indicator and emits; it does not reorder rows. */
 		onsort?: (key: string, dir: 'asc' | 'desc') => void;
 		cellSnippets?: Record<string, Snippet<[T]>>;
+		/** Replaces a column's header content (e.g. a select-all checkbox). */
+		headerSnippets?: Record<string, Snippet<[Column<T>]>>;
 		empty?: string | Snippet;
 		stickyHeader?: boolean;
 		/** Distance from the scroll container's top for the sticky header, e.g.
@@ -210,7 +216,9 @@
 								: 'none'
 							: undefined}
 					>
-						{#if col.sortable}
+						{#if headerSnippets[col.key]}
+							{@render headerSnippets[col.key](col)}
+						{: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}>
@@ -264,6 +272,7 @@
 								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}
 								class:truncate={col.truncate}
 								class:nowrap={col.nowrap}
 								style:text-align={stacked ? undefined : (col.align ?? 'left')}
@@ -528,12 +537,27 @@
 	[data-stacked] td[data-role='meta'] {
 		flex: none;
 		order: 1;
-		font-family: var(--font-mono);
+		font-family: var(--dt-meta-font, var(--font-mono));
 		font-size: var(--fs-xs);
 		color: var(--text-muted);
 	}
 	[data-stacked] td[data-role='meta']::before {
 		content: attr(data-label) ' ';
+		font-family: var(--font-sans);
+		color: var(--text-faint);
+	}
+	[data-stacked] td[data-role='detail'][data-stack-label='false'] {
+		flex: 0 1 auto;
+	}
+	[data-stacked] td[data-stack-label='false']::before {
+		content: none;
+	}
+	[data-stacked] td[data-role='meta'] ~ td[data-role='meta'][data-stack-label='false'] {
+		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 {
+		content: '·';
+		margin-inline-end: var(--sp-1);
 		color: var(--text-faint);
 	}
 	[data-stacked] td[data-role='actions'],

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

@@ -19,6 +19,9 @@ export interface Column<T> {
     /** Placement inside the stacked card (`responsive="stack"` only). Columns
      *  without a role render as `label: value` detail lines. */
     role?: 'title' | 'detail' | 'meta' | 'actions' | 'hidden';
+    /** `false` drops the stacked label: meta cells join on one `·` line and
+     *  detail cells share lines (`responsive="stack"` only, default true). */
+    stackLabel?: boolean;
 }
 import type { Snippet } from 'svelte';
 declare function $$render<T>(): {
@@ -32,6 +35,8 @@ 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]>>;
+        /** Replaces a column's header content (e.g. a select-all checkbox). */
+        headerSnippets?: Record<string, Snippet<[Column<T>]>>;
         empty?: string | Snippet;
         stickyHeader?: boolean;
         /** Distance from the scroll container's top for the sticky header, e.g.

package/package.json

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