@dorsk/tsumikit 0.77.0 → 0.78.0

package/dist/components/layouts/AppShell.svelte

@@ -289,6 +289,7 @@
 	}
 	.shell-menu-btn {
 		display: inline-flex;
+		flex: none;
 		align-items: center;
 	}
 	.shell-main {

package/dist/components/layouts/NavBar.svelte

@@ -311,6 +311,9 @@
 		text-overflow: ellipsis;
 		white-space: nowrap;
 	}
+	.stacked .navbar-label {
+		max-width: 100%;
+	}
 	.navbar-badge {
 		position: absolute;
 		top: -0.35rem;

package/dist/components/molecules/Callout.svelte

@@ -90,19 +90,19 @@
 		gap: var(--sp-3);
 		padding: var(--sp-3);
 	}
-	:global(.callout-ok) {
+	:global(.card.callout-ok) {
 		--callout-tone: var(--ok);
 	}
-	:global(.callout-warn) {
+	:global(.card.callout-warn) {
 		--callout-tone: var(--warn);
 	}
-	:global(.callout-danger) {
+	:global(.card.callout-danger) {
 		--callout-tone: var(--danger);
 	}
-	:global(.callout-info) {
+	:global(.card.callout-info) {
 		--callout-tone: var(--info);
 	}
-	:global(.callout-accent) {
+	:global(.card.callout-accent) {
 		--callout-tone: var(--accent);
 	}
 

package/dist/components/molecules/ChatBubble.svelte

@@ -180,5 +180,9 @@
 		-webkit-line-clamp: var(--clamp);
 		line-clamp: var(--clamp);
 		overflow: hidden;
+		padding: calc(var(--focus-ring-width) + var(--focus-ring-offset));
+		padding-block-end: 0;
+		margin: calc(-1 * (var(--focus-ring-width) + var(--focus-ring-offset)));
+		margin-block-end: 0;
 	}
 </style>

package/dist/components/molecules/CodeBlock.svelte

@@ -101,8 +101,15 @@
 		font-family: var(--font-mono);
 		color: var(--text-muted);
 	}
+	.cb-name {
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
 	.cb-body {
 		display: flex;
+		align-items: flex-start;
 		overflow: auto;
 		-webkit-overflow-scrolling: touch;
 	}

package/dist/components/molecules/FilterInput.svelte

@@ -467,6 +467,7 @@
 	.fi__bar {
 		--fi-icon: var(--control-icon-md);
 		display: flex;
+		flex-wrap: wrap;
 		align-items: center;
 		gap: var(--sp-2);
 		padding: 0 var(--control-px-md);
@@ -522,7 +523,7 @@
 		position: relative;
 		display: flex;
 		flex: 1;
-		min-width: 0;
+		min-width: min(100%, 6rem);
 	}
 	.fi__display {
 		position: absolute;

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/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/organisms/ConversationFeed.svelte

@@ -154,6 +154,7 @@
 		min-height: 0;
 	}
 	.feed {
+		position: relative;
 		flex: 1;
 		min-height: 0;
 		overflow: auto;

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/package.json

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