@dorsk/tsumikit 0.77.0 → 0.79.0

package/dist/components/molecules/RadialMenu.svelte

@@ -542,11 +542,11 @@
 		width: max(var(--radial-petal-size, 3.5rem), var(--touch-target));
 		height: max(var(--radial-petal-size, 3.5rem), var(--touch-target));
 		padding: 0 var(--sp-0-5);
-		border: 1px solid var(--border-strong);
+		border: var(--edge-width) solid var(--raised-edge);
 		border-radius: 50%;
-		background: var(--bg-elevated);
+		background: var(--raised-fill);
 		color: var(--text);
-		box-shadow: var(--shadow-md);
+		box-shadow: var(--raised-shadow);
 		font-size: var(--fs-xs);
 		line-height: var(--lh-heading);
 		translate: -50% -50%;

package/dist/components/molecules/RadioGroup.svelte

@@ -172,9 +172,10 @@
 		width: var(--chip-sm);
 		height: var(--chip-sm);
 		margin-top: var(--sp-px);
-		border: 1px solid var(--border-strong);
+		border: var(--edge-width) solid var(--control-edge);
 		border-radius: var(--r-pill);
-		background: var(--bg);
+		background: var(--control-fill);
+		box-shadow: var(--control-shadow);
 		transition: border-color var(--dur-fast) var(--ease);
 	}
 	.dot-ctl::after {
@@ -205,6 +206,7 @@
 	input:focus-visible + .dot-ctl {
 		outline: var(--focus-ring);
 		outline-offset: var(--focus-ring-offset);
+		box-shadow: var(--control-shadow), var(--focus-glow);
 	}
 	.texts {
 		display: flex;
@@ -231,7 +233,7 @@
 		min-width: 0;
 		gap: var(--sp-2);
 		padding: var(--pad, var(--sp-2) var(--sp-3));
-		border: 1px solid var(--border);
+		border: var(--edge-width) solid var(--surface-edge);
 		border-radius: var(--r-md);
 		transition:
 			border-color var(--dur-fast) var(--ease),
@@ -239,7 +241,7 @@
 	}
 	.row.selected {
 		border-color: var(--accent-dim);
-		background: var(--bg-elevated);
+		background: var(--surface-fill);
 	}
 	.row .radio {
 		flex: 1 1 auto;

package/dist/components/molecules/RichSelect.svelte

@@ -431,9 +431,10 @@
 		min-width: 0;
 		min-height: var(--rs-height);
 		padding: var(--sp-1) var(--sp-2) var(--sp-1) var(--sp-1);
-		border: 1px solid var(--border-strong);
+		border: var(--edge-width) solid var(--control-edge);
 		border-radius: var(--r-md);
 		background: var(--surface);
+		box-shadow: var(--control-shadow);
 		color: var(--text);
 		text-align: start;
 		cursor: pointer;
@@ -444,6 +445,7 @@
 	.rich-select :global(.pop-trigger.rs-trigger:focus-visible) {
 		outline: var(--focus-ring);
 		outline-offset: var(--focus-ring-offset);
+		box-shadow: var(--control-shadow), var(--focus-glow);
 	}
 	.rich-select :global(.pop-trigger.rs-trigger:active:not(:disabled)) {
 		scale: var(--press-scale-lg);
@@ -534,8 +536,8 @@
 	}
 	.rs-row[data-dragging] {
 		z-index: 1;
-		box-shadow: var(--shadow-md);
-		background: var(--bg-elevated);
+		box-shadow: var(--raised-shadow);
+		background: var(--raised-fill);
 		transition: none;
 	}
 	.rs-option {
@@ -587,6 +589,6 @@
 		display: flex;
 		flex-direction: column;
 		padding-top: var(--sp-1);
-		border-top: 1px solid var(--border);
+		border-top: var(--edge-width) solid var(--surface-edge);
 	}
 </style>

package/dist/components/molecules/SectionHeader.svelte

@@ -172,7 +172,7 @@
 	}
 	.sh-divider > .sh-row {
 		padding-bottom: var(--sp-2);
-		border-bottom: 1px solid var(--border);
+		border-bottom: var(--edge-width) solid var(--surface-edge);
 	}
 	.sh-group > .sh-row {
 		flex-wrap: nowrap;

package/dist/components/molecules/SeekSlider.svelte

@@ -276,7 +276,7 @@
 		height: var(--seek-track);
 		margin-top: calc(var(--seek-track) / -2);
 		border-radius: var(--r-pill);
-		background: var(--bg-elevated-2);
+		background: var(--track-fill);
 		overflow: hidden;
 		transform-origin: center;
 		transition: scale var(--dur-fast) var(--ease);
@@ -322,7 +322,7 @@
 		border-radius: var(--r-pill);
 		background: var(--seek-accent);
 		border: 2px solid var(--bg);
-		box-shadow: var(--shadow-sm);
+		box-shadow: var(--thumb-shadow);
 		transform: translate(-50%, -50%);
 		scale: 0.6;
 		opacity: 0;
@@ -346,7 +346,7 @@
 		.seek:not(.seek--inert):hover .seek-thumb {
 			opacity: 1;
 			scale: 1;
-			box-shadow: var(--shadow-sm), var(--seek-halo);
+			box-shadow: var(--thumb-shadow), var(--seek-halo);
 		}
 		.seek--dragging .seek-thumb {
 			scale: 1.15;
@@ -370,9 +370,9 @@
 		gap: var(--sp-1);
 		padding: var(--sp-1) var(--sp-2);
 		border-radius: var(--r-sm);
-		background: var(--bg-elevated);
-		border: 1px solid var(--border);
-		box-shadow: var(--shadow-md);
+		background: var(--raised-fill);
+		border: var(--edge-width) solid var(--surface-edge);
+		box-shadow: var(--raised-shadow);
 		color: var(--text);
 		font-size: var(--fs-xs);
 		font-variant-numeric: tabular-nums;

package/dist/components/molecules/SegmentedControl.svelte

@@ -238,7 +238,7 @@
 	   items fill the inside, which is the height minus border and padding. */
 	.seg {
 		--seg-h: var(--control-md);
-		--seg-inset: calc(var(--sp-0-5) + 1px);
+		--seg-inset: calc(var(--sp-0-5) + var(--edge-width));
 		--seg-item-h: calc(var(--seg-h) - 2 * var(--seg-inset));
 		position: relative;
 		display: inline-flex;
@@ -247,8 +247,8 @@
 		height: var(--seg-h);
 		min-height: var(--seg-h);
 		padding: var(--sp-0-5);
-		background: var(--bg-elevated-2);
-		border: 1px solid var(--border);
+		background: var(--track-fill);
+		border: var(--edge-width) solid var(--track-edge);
 		border-radius: var(--r-pill);
 		max-width: 100%;
 		min-width: 0;
@@ -326,8 +326,8 @@
 		width: 0;
 		height: 0;
 		border-radius: var(--r-pill);
-		background: var(--bg);
-		box-shadow: var(--shadow-sm);
+		background: var(--thumb-fill);
+		box-shadow: var(--thumb-shadow);
 		transform-origin: top left;
 		pointer-events: none;
 		transition:
@@ -430,8 +430,8 @@
 	}
 	.seg-item.selected {
 		color: var(--text);
-		background: var(--bg);
-		box-shadow: var(--shadow-sm);
+		background: var(--thumb-fill);
+		box-shadow: var(--thumb-shadow);
 	}
 	.seg.placed .seg-item.selected {
 		background: transparent;

package/dist/components/molecules/SortableList.svelte

@@ -571,7 +571,7 @@
 	}
 	.sl-row {
 		position: relative;
-		border-bottom: 1px solid var(--border);
+		border-bottom: var(--edge-width) solid var(--surface-edge);
 	}
 	.sl-row:last-child {
 		border-bottom: 0;
@@ -609,7 +609,7 @@
 		position: relative;
 		z-index: 1;
 		background: var(--bg-elevated-2);
-		box-shadow: var(--shadow-md);
+		box-shadow: var(--raised-shadow);
 		transition: none;
 	}
 	.sl-grip,

package/dist/components/molecules/SplitButton.svelte

@@ -168,7 +168,7 @@
 		position: relative;
 		width: var(--split-height);
 		flex: none;
-		margin-inline-start: -1px;
+		margin-inline-start: calc(-1 * var(--edge-width));
 		--pop-trigger-radius: 0 var(--r-md) var(--r-md) 0;
 		--pop-trigger-pad: 0;
 	}

package/dist/components/molecules/StatusBar.svelte

@@ -74,6 +74,8 @@
 	.status-label {
 		flex: 1;
 		min-width: 0;
+		padding-block: calc(var(--focus-ring-width) + var(--focus-ring-offset));
+		margin-block: calc(-1 * (var(--focus-ring-width) + var(--focus-ring-offset)));
 		overflow: hidden;
 		text-overflow: ellipsis;
 		white-space: nowrap;

package/dist/components/molecules/Tabs.svelte

@@ -297,7 +297,7 @@
 		flex: 1 1 auto;
 		min-width: 0;
 		gap: var(--sp-1);
-		border-bottom: 1px solid var(--border);
+		border-bottom: var(--edge-width) solid var(--surface-edge);
 		overflow-x: auto;
 		overflow-y: hidden;
 		scrollbar-width: thin;
@@ -330,7 +330,7 @@
 		font-weight: var(--fw-medium);
 		--icon-size: var(--control-icon-md);
 		border-bottom: 2px solid transparent;
-		margin-bottom: -1px;
+		margin-bottom: calc(-1 * var(--edge-width));
 		max-width: var(--tab-max-width, none);
 		transition:
 			color var(--dur-fast) var(--ease),
@@ -373,7 +373,7 @@
 		align-items: center;
 		gap: var(--sp-1);
 		padding-inline-start: var(--sp-2);
-		border-bottom: 1px solid var(--border);
+		border-bottom: var(--edge-width) solid var(--surface-edge);
 	}
 	.tabpanel {
 		padding-top: var(--sp-4);

package/dist/components/molecules/ThemePicker.svelte

@@ -257,7 +257,7 @@
 		margin-top: var(--sp-2);
 		padding: var(--sp-1) var(--sp-2);
 		border: 2px solid transparent;
-		border-top: 1px solid var(--border);
+		border-top: var(--edge-width) solid var(--surface-edge);
 		border-radius: var(--r-md);
 		background: none;
 		color: inherit;

package/dist/components/molecules/Timestamp.svelte

@@ -226,7 +226,7 @@
 	.ts-mode {
 		flex: 1;
 		padding: var(--sp-1) var(--sp-2);
-		border: 1px solid var(--border-strong);
+		border: var(--edge-width) solid var(--btn-edge);
 		border-radius: var(--r-sm);
 		background: transparent;
 		color: var(--text-muted);

package/dist/components/molecules/Toggle.svelte

@@ -82,15 +82,16 @@
 		font-weight: var(--fw-medium);
 		line-height: var(--lh-none);
 		--icon-size: var(--control-icon-sm);
-		background: var(--bg-elevated-2);
+		background: var(--surface-fill-2);
 		color: var(--text-muted);
-		border: 1px solid var(--border);
+		border: var(--edge-width) solid var(--surface-edge);
 		white-space: nowrap;
 		user-select: none;
 		transition:
 			background var(--dur-fast) var(--ease),
 			border-color var(--dur-fast) var(--ease),
 			color var(--dur-fast) var(--ease),
+			translate var(--dur-fast) var(--ease),
 			scale var(--dur-fast) var(--ease-out);
 	}
 	.toggle:disabled {
@@ -125,7 +126,8 @@
 	}
 	@media (hover: hover) and (pointer: fine) {
 		.toggle:hover:not(:disabled) {
-			border-color: var(--border-strong);
+			border-color: var(--surface-edge-strong);
+			translate: 0 calc(-1 * var(--hover-lift));
 		}
 	}
 	.toggle:active:not(:disabled) {

package/dist/components/molecules/Tooltip.svelte

@@ -206,9 +206,9 @@
 		padding: var(--sp-1) var(--sp-2);
 		background: var(--bg-elevated-2);
 		color: var(--text);
-		border: 1px solid var(--border-strong);
+		border: var(--edge-width) solid var(--raised-edge);
 		border-radius: var(--r-sm);
-		box-shadow: var(--shadow-md);
+		box-shadow: var(--raised-shadow);
 		font-size: var(--fs-xs);
 		line-height: var(--lh-snug);
 		white-space: normal;

package/dist/components/molecules/Truncate.svelte

@@ -9,6 +9,7 @@
 	// observed and the longest candidate that fits is shown (mode `path`
 	// abbreviates fish-style). `copyable` copies the full text on click.
 	import { copyToClipboard } from '../../clipboard';
+	import { untrack } from 'svelte';
 	import { pathCandidates, truncate, type TruncateMode } from '../../truncate';
 	import Tooltip from './Tooltip.svelte';
 
@@ -72,15 +73,18 @@
 	let probe = $state<HTMLSpanElement | null>(null);
 	let avail = $state(Number.POSITIVE_INFINITY);
 	let chPx = $state(8);
+	let cap = $state(Number.POSITIVE_INFINITY);
 
 	$effect(() => {
 		if (!fit || !rail) return;
 		const el = rail;
 		const measure = () => {
-			avail = el.clientWidth;
+			const w = el.clientWidth;
+			if (w > avail) cap = Number.POSITIVE_INFINITY;
+			avail = w;
 			if (probe) chPx = probe.getBoundingClientRect().width / 10 || chPx;
 		};
-		measure();
+		untrack(measure);
 		const ro = new ResizeObserver(measure);
 		ro.observe(el);
 		return () => ro.disconnect();
@@ -88,7 +92,7 @@
 
 	const shown = $derived.by(() => {
 		if (fit) {
-			const budget = Math.max(0, avail - 1);
+			const budget = Math.max(0, Math.min(avail - 1, cap));
 			return candidates.find((c) => [...c].length * chPx <= budget) ?? candidates[candidates.length - 1];
 		}
 		if (max === undefined) return text;
@@ -96,6 +100,17 @@
 	});
 	const isTruncated = $derived(shown !== text);
 
+	// The per-character estimate can undershoot (glyph fallbacks, late fonts): cap the budget below the spilling candidate.
+	$effect(() => {
+		if (!fit || !rail || shown === candidates[candidates.length - 1]) return;
+		const el = rail;
+		const id = requestAnimationFrame(() => {
+			const over = el.scrollWidth - el.clientWidth;
+			if (over > 0) cap = Math.min(untrack(() => cap), [...shown].length * chPx - over);
+		});
+		return () => cancelAnimationFrame(id);
+	});
+
 	let status = $state('');
 	let timer: ReturnType<typeof setTimeout> | undefined;
 	async function copy(e: MouseEvent) {
@@ -173,6 +188,9 @@
 		max-width: 100%;
 		overflow: hidden;
 	}
+	.rail .trunc:focus-visible {
+		outline-offset: var(--focus-ring-offset-inset);
+	}
 	.grow {
 		flex: 1 1 0;
 	}

package/dist/components/molecules/VolumeSlider.svelte

@@ -306,7 +306,7 @@
 		height: var(--vol-track);
 		margin-top: calc(var(--vol-track) / -2);
 		border-radius: var(--r-pill);
-		background: var(--bg-elevated-2);
+		background: var(--track-fill);
 		overflow: hidden;
 	}
 	.vol--vertical .vol-track {
@@ -354,7 +354,7 @@
 		border-radius: var(--r-pill);
 		background: var(--vol-accent);
 		border: 2px solid var(--bg);
-		box-shadow: var(--shadow-sm);
+		box-shadow: var(--thumb-shadow);
 		transform: translate(-50%, -50%);
 		scale: 0.6;
 		opacity: 0;
@@ -375,7 +375,7 @@
 		.vol-slab:not([aria-disabled='true']):hover .vol-thumb {
 			opacity: 1;
 			scale: 1;
-			box-shadow: var(--shadow-sm), var(--vol-halo);
+			box-shadow: var(--thumb-shadow), var(--vol-halo);
 		}
 		.vol--dragging .vol-thumb {
 			scale: 1.15;

package/dist/components/organisms/ConversationFeed.svelte

@@ -154,6 +154,7 @@
 		min-height: 0;
 	}
 	.feed {
+		position: relative;
 		flex: 1;
 		min-height: 0;
 		overflow: auto;
@@ -180,6 +181,6 @@
 		margin-inline: auto;
 		z-index: 1;
 		border-radius: var(--r-pill);
-		box-shadow: var(--shadow-md);
+		box-shadow: var(--raised-shadow);
 	}
 </style>

package/dist/components/organisms/ConversationPanel.svelte

@@ -45,7 +45,7 @@
 		gap: var(--sp-2);
 		min-width: 0;
 		padding: var(--sp-2) var(--sp-3);
-		border-bottom: 1px solid var(--border);
+		border-bottom: var(--edge-width) solid var(--surface-edge);
 	}
 	.panel-body {
 		flex: 1;
@@ -55,12 +55,12 @@
 	}
 	.panel-status {
 		flex: none;
-		border-top: 1px solid var(--border);
+		border-top: var(--edge-width) solid var(--surface-edge);
 	}
 	.panel-composer {
 		flex: none;
 		padding: var(--sp-2) var(--sp-3) var(--sp-3);
-		border-top: 1px solid var(--border);
+		border-top: var(--edge-width) solid var(--surface-edge);
 	}
 	.panel-status + .panel-composer {
 		border-top: 0;

package/dist/components/organisms/DataTable.svelte

@@ -239,6 +239,7 @@
 					<th
 						scope="col"
 						data-hide-below={col.hideBelow}
+						class:dt-sortable={col.sortable && !headerSnippets[col.key]}
 						style:width={col.width}
 						style:text-align={col.align ?? 'left'}
 						aria-sort={col.sortable
@@ -363,7 +364,7 @@
 		width: 100%;
 		overflow-x: auto;
 		-webkit-overflow-scrolling: touch;
-		border: 1px solid var(--border);
+		border: var(--edge-width) solid var(--surface-edge);
 		border-radius: var(--r-lg);
 		container-type: inline-size;
 	}
@@ -382,7 +383,7 @@
 	th,
 	td {
 		padding: var(--sp-2) var(--sp-3);
-		border-bottom: 1px solid var(--border);
+		border-bottom: var(--edge-width) solid var(--surface-edge);
 	}
 	.dt.sm th,
 	.dt.sm td {
@@ -394,7 +395,7 @@
 		color: var(--text-muted);
 		text-transform: uppercase;
 		letter-spacing: 0.04em;
-		background: var(--bg-elevated-2);
+		background: var(--surface-fill-2);
 		white-space: nowrap;
 	}
 	.dt.sticky th {
@@ -430,6 +431,15 @@
 		color: inherit;
 		cursor: pointer;
 	}
+	th.dt-sortable {
+		position: relative;
+	}
+	/* The whole header cell is the sort hit area. */
+	.dt-sort::after {
+		content: '';
+		position: absolute;
+		inset: 0;
+	}
 	.dt-arrow {
 		display: inline-block;
 		opacity: 0.4;
@@ -527,17 +537,9 @@
 		tbody tr:last-child td :global(.checkbox::before) {
 			inset-block-end: 0;
 		}
-		/* Sort slab: inline-end stays at 0 so it never reaches the next header
-		   cell, and the inline-start reach stays inside the cell's own padding. */
-		.dt-sort {
-			position: relative;
-		}
-		.dt-sort::before {
-			content: '';
-			position: absolute;
-			inset-block: var(--touch-slab);
-			inset-inline-start: var(--touch-slab);
-			inset-inline-end: 0;
+		/* The cell overlay grows vertically to the compact target, never sideways. */
+		.dt-sort::after {
+			inset-block: min(0px, calc((100% - var(--touch-target-compact)) / 2));
 		}
 	}
 	@container (max-width: 30rem) {
@@ -587,7 +589,7 @@
 		align-items: baseline;
 		gap: var(--sp-1) var(--sp-3);
 		padding: var(--sp-3);
-		border-bottom: 1px solid var(--border);
+		border-bottom: var(--edge-width) solid var(--surface-edge);
 	}
 	[data-stacked] tbody tr:last-child {
 		border-bottom: none;
@@ -679,7 +681,7 @@
 	.dt-more {
 		text-align: center;
 		padding: var(--sp-2);
-		border-top: 1px solid var(--border);
+		border-top: var(--edge-width) solid var(--surface-edge);
 	}
 	.dt-more-btn {
 		border: 0;

package/dist/components/organisms/FilterSearchBar.svelte

@@ -97,14 +97,20 @@
 		{#if showChips && (chips.length || text)}
 			<div class="fsb__chips">
 				{#each chips as f (f.span[0])}
-					<Badge tone="info" removable onremove={() => remove(f.span)}>
+					<Badge
+						tone="info"
+						truncate
+						title="{labelFor(f.field)} {operatorById(f.op)?.label} {f.values.join(', ') || '∅'}"
+						removable
+						onremove={() => remove(f.span)}
+					>
 						<span class="fsb__chip-field">{labelFor(f.field)}</span>
 						<span class="fsb__chip-op">{operatorById(f.op)?.label}</span>
 						<span class="fsb__chip-val">{f.values.join(', ') || '∅'}</span>
 					</Badge>
 				{/each}
 				{#if text}
-					<Badge tone="neutral">
+					<Badge tone="neutral" truncate title="text {text}">
 						<span class="fsb__chip-op">text</span>
 						<span class="fsb__chip-val">{text}</span>
 					</Badge>

package/dist/styles/tokens.css

@@ -285,6 +285,40 @@
   --shift-xs: 2px;
   --shift-sm: 4px;
   --shift-md: 8px;
+
+  /* Structural look. Components read these instead of hardcoding borders,
+     fills and shadows, so a theme can restyle the kit's surfaces from tokens. */
+  --edge-width: 1px;
+  --surface-fill: var(--bg-elevated);
+  --surface-fill-2: var(--bg-elevated-2);
+  --surface-edge: var(--border);
+  --surface-edge-strong: var(--border-strong);
+  --surface-shadow: 0 0 0 0 transparent;
+  --surface-shadow-hover: var(--surface-shadow);
+  --raised-fill: var(--bg-elevated);
+  --raised-edge: var(--border-strong);
+  --raised-shadow: var(--shadow-md);
+  --overlay-fill: var(--bg-elevated);
+  --overlay-edge: var(--border);
+  --overlay-shadow: var(--shadow-lg);
+  --control-fill: var(--bg);
+  --control-edge: var(--border-strong);
+  --control-edge-hover: var(--text-faint);
+  --control-shadow: 0 0 0 0 transparent;
+  --track-fill: var(--bg-elevated-2);
+  --track-edge: var(--border);
+  --thumb-fill: var(--bg);
+  --thumb-shadow: var(--shadow-sm);
+  --btn-fill: var(--surface);
+  --btn-edge: var(--border-strong);
+  --btn-shadow: 0 0 0 0 transparent;
+  --btn-shadow-hover: var(--btn-shadow);
+  --btn-primary-fill: var(--accent);
+  --btn-primary-edge: var(--accent);
+  --btn-primary-shadow: 0 0 0 0 transparent;
+  --btn-primary-shadow-hover: var(--btn-primary-shadow);
+  --hover-lift: 0px;
+  --focus-glow: 0 0 0 0 transparent;
 }
 
 @supports (animation-timing-function: linear(0, 1)) {

package/package.json

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