@dorsk/tsumikit 0.76.0 → 0.78.0

package/dist/components/atoms/Divider.svelte

@@ -100,8 +100,9 @@
 		background: var(--divider-color);
 	}
 	.divider-label {
+		min-width: 0;
 		color: var(--text-muted);
 		font-size: var(--fs-sm);
-		white-space: nowrap;
+		text-align: center;
 	}
 </style>

package/dist/components/atoms/Input.svelte

@@ -12,7 +12,7 @@
 
 	// `size` shadows the native char-width attribute (unused in token-sized
 	// layouts) to expose a height preset instead.
-	type Props = Omit<HTMLInputAttributes, 'size'> & {
+	type Props = Omit<HTMLInputAttributes, 'size' | 'onsubmit'> & {
 		mono?: boolean;
 		size?: ControlSize;
 		/** Fill the available width of a flex/Cluster row (flex: 1) instead of

package/dist/components/atoms/Input.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { ControlSize } from '../../size';
 import type { HTMLInputAttributes } from 'svelte/elements';
 import { type IconName } from './Icon.svelte';
-type Props = Omit<HTMLInputAttributes, 'size'> & {
+type Props = Omit<HTMLInputAttributes, 'size' | 'onsubmit'> & {
     mono?: boolean;
     size?: ControlSize;
     /** Fill the available width of a flex/Cluster row (flex: 1) instead of

package/dist/components/atoms/Select.svelte

@@ -199,6 +199,7 @@
 	.select-wrap.w-auto {
 		display: inline-block;
 		width: auto;
+		max-width: 100%;
 	}
 	.select-wrap.select-grow {
 		flex: 1 1 0;
@@ -253,6 +254,8 @@
 	}
 	.select.w-auto {
 		width: auto;
+		max-width: 100%;
+		text-overflow: ellipsis;
 	}
 	.select.embedded {
 		background: var(--select-bg, var(--bg-elevated-2));

package/dist/components/atoms/Textarea.svelte

@@ -23,7 +23,7 @@
 	import { getFieldContext, warnUnlabelled } from '../../field-context';
 	import { getInputGroupContext } from '../../input-group-context';
 
-	type Props = HTMLTextareaAttributes & {
+	type Props = Omit<HTMLTextareaAttributes, 'onsubmit'> & {
 		mono?: boolean;
 		autoresize?: boolean;
 		size?: ControlSize;

package/dist/components/atoms/Textarea.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { ControlSize } from '../../size';
 import type { HTMLTextareaAttributes } from 'svelte/elements';
-type Props = HTMLTextareaAttributes & {
+type Props = Omit<HTMLTextareaAttributes, 'onsubmit'> & {
     mono?: boolean;
     autoresize?: boolean;
     size?: ControlSize;

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/CopyButton.svelte

@@ -60,7 +60,7 @@
 	{variant}
 	{box}
 	{hitArea}
-	class="copy-btn {klass}"
+	class="copy-btn {labelShown && box !== undefined ? 'copy-labelled' : ''} {klass}"
 	sound={false}
 	onclick={copy}
 	aria-label={copied ? copiedLabel : label}
@@ -78,6 +78,10 @@
 	/* Both glyphs share one grid cell so the swap never changes the width. The
 	   check springs in (the kit's one bounce: a rare confirmation); the copy
 	   glyph fades out fast and back in over the base duration on revert. */
+	:global(.copy-btn.btn-box.copy-labelled) {
+		width: auto;
+		padding-inline: var(--sp-2);
+	}
 	.glyphs {
 		display: inline-grid;
 		place-items: center;

package/dist/components/molecules/Field.svelte

@@ -73,6 +73,7 @@
 		display: flex;
 		flex-direction: column;
 		gap: var(--sp-1);
+		min-width: 0;
 	}
 	.field-grow {
 		flex: 1 1 0;

package/dist/components/molecules/FileButton.svelte

@@ -93,7 +93,7 @@
 	{:else if emoji}
 		<span class="emoji" aria-hidden="true">{emoji}</span>
 	{/if}
-	<span class:sr-only={onlyIcon}>{label}</span>
+	<span class="text" class:sr-only={onlyIcon}>{label}</span>
 </label>
 
 <style>
@@ -114,6 +114,7 @@
 		font-weight: var(--fw-medium);
 		font-size: var(--control-fs-md);
 		line-height: var(--lh-none);
+		max-width: 100%;
 		white-space: nowrap;
 		cursor: pointer;
 		user-select: none;
@@ -179,6 +180,11 @@
 		}
 	}
 	/* An emoji reads small next to an SVG glyph of the same size: one icon tier up. */
+	.text:not(.sr-only) {
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
 	.emoji {
 		display: inline-flex;
 		font-size: var(--icon-lg);

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/RadioGroup.svelte

@@ -219,6 +219,7 @@
 
 	.rows {
 		gap: var(--sp-1);
+		min-width: 0;
 	}
 	.row-wrap {
 		min-width: 0;
@@ -250,8 +251,9 @@
 	}
 	.label-line {
 		display: flex;
+		flex-wrap: wrap;
 		align-items: baseline;
-		gap: var(--sp-2);
+		gap: var(--sp-px) var(--sp-2);
 		min-width: 0;
 	}
 	.row .label-text {
@@ -260,7 +262,6 @@
 	.note {
 		font-size: var(--fs-xs);
 		color: var(--text-faint);
-		white-space: nowrap;
 	}
 	.description {
 		font-size: var(--fs-xs);

package/dist/components/molecules/RichSelect.svelte

@@ -119,11 +119,21 @@
 	});
 
 	$effect(() => {
-		if (!open || active < 0) return;
-		const el = root?.ownerDocument.getElementById(optionId(active));
-		el?.scrollIntoView?.({ block: 'nearest' });
+		if (open && active >= 0) revealActive();
 	});
 
+	// Scrolls the listbox only: `scrollIntoView` on a top-layer panel also
+	// scrolls the document in Chromium.
+	function revealActive() {
+		const list = root?.querySelector<HTMLElement>('.rs-list');
+		const row = rowEls()[active];
+		if (!list || !row) return;
+		const top = row.offsetTop;
+		const bottom = top + row.offsetHeight;
+		if (top < list.scrollTop) list.scrollTop = top;
+		else if (bottom > list.scrollTop + list.clientHeight) list.scrollTop = bottom - list.clientHeight;
+	}
+
 	function close() {
 		open = false;
 	}
@@ -303,8 +313,7 @@
 	async function onOpen() {
 		typeahead.reset();
 		await tick();
-		const el = active >= 0 ? root?.ownerDocument.getElementById(optionId(active)) : null;
-		el?.scrollIntoView?.({ block: 'nearest' });
+		if (active >= 0) revealActive();
 	}
 
 	function onClose() {
@@ -459,7 +468,6 @@
 	}
 	.rs-placeholder {
 		display: block;
-		padding-inline: var(--sp-1);
 		color: var(--text-muted);
 		font-size: var(--control-fs-md);
 		line-height: var(--lh-tight);
@@ -486,6 +494,7 @@
 		padding: var(--sp-1);
 	}
 	.rs-list {
+		position: relative;
 		display: flex;
 		flex-direction: column;
 		gap: var(--sp-0-5);

package/dist/components/molecules/SelectButton.svelte

@@ -30,6 +30,7 @@
 		shrink = true,
 		block = false,
 		sound = true,
+		disabled = false,
 		class: klass = '',
 		...rest
 	}: {
@@ -64,6 +65,7 @@
 		hitArea?: 'auto' | 'compact';
 		/** Play UI sounds when enabled globally; false silences this instance. */
 		sound?: boolean;
+		disabled?: boolean;
 		class?: string;
 		[key: string]: unknown;
 	} = $props();
@@ -81,6 +83,7 @@
 	class="select-button {klass}"
 	class:row={variant === 'row'}
 	class:active
+	class:disabled
 	data-tsu="SelectButton"
 	{...rest}
 	class:grow={grow}
@@ -98,6 +101,7 @@
 		aria-label={label}
 		{title}
 		{value}
+		{disabled}
 		onchange={change}
 	>
 		{#if groups}
@@ -138,18 +142,25 @@
 	.select-button.active {
 		color: var(--accent);
 	}
+	.select-button.disabled {
+		opacity: var(--disabled-opacity);
+		cursor: not-allowed;
+	}
 	/* The inert face takes no pointer events: mirror ghost hover, press and the
 	   focus ring from the select overlaying it. */
 	.select-button:active :global(.btn-ghost) {
 		--btn-scale-dur: var(--dur-press);
 		scale: var(--press-scale-sm);
 	}
+	.select-button.disabled:active :global(.btn-ghost) {
+		scale: none;
+	}
 	.select-button:has(:focus-visible) {
 		outline: var(--focus-ring);
 		outline-offset: var(--focus-ring-offset);
 	}
 	@media (hover: hover) and (pointer: fine) {
-		.select-button:hover :global(.btn-ghost) {
+		.select-button:not(.disabled):hover :global(.btn-ghost) {
 			background: var(--bg-elevated-2);
 		}
 	}

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

@@ -34,6 +34,7 @@ type $$ComponentProps = {
     hitArea?: 'auto' | 'compact';
     /** Play UI sounds when enabled globally; false silences this instance. */
     sound?: boolean;
+    disabled?: boolean;
     class?: string;
     [key: string]: unknown;
 };

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/Toggle.svelte

@@ -63,7 +63,7 @@
 	class:on={pressed}
 	aria-pressed={pressed}
 >
-	{@render children?.()}
+	<span class="label">{@render children?.()}</span>
 </button>
 
 <style>
@@ -106,10 +106,20 @@
 		font-size: var(--control-fs-md);
 		--icon-size: var(--control-icon-md);
 	}
+	.label {
+		display: contents;
+	}
 	.toggle.grow {
 		flex: 1 1 0;
 		min-width: 0;
 	}
+	.toggle.grow .label {
+		display: block;
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		text-align: center;
+	}
 	.toggle.no-shrink {
 		flex: none;
 	}

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/dist/floating.js

@@ -20,9 +20,15 @@ function alignPos(align, start, size, fSize) {
 export function place(trigger, floating, placement = 'bottom-start', gap = 6) {
     placeAt(trigger.getBoundingClientRect(), floating, placement, gap);
 }
+// The enter transition starts the panel at `scale: var(--enter-scale)`, so a
+// client rect taken on open is ~4% short; offset sizes ignore transforms.
+function layoutSize(el) {
+    const { width, height } = el.getBoundingClientRect();
+    return { width: el.offsetWidth || width, height: el.offsetHeight || height };
+}
 /** `place` against a viewport rect instead of an element. */
 export function placeAt(t, floating, placement = 'bottom-start', gap = 6) {
-    const f = floating.getBoundingClientRect();
+    const f = layoutSize(floating);
     const vw = document.documentElement.clientWidth;
     const vh = document.documentElement.clientHeight;
     const [side, align] = placement.split('-');

package/package.json

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