@dorsk/tsumikit 0.75.0 → 0.77.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/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/GlyphStack.svelte

@@ -321,9 +321,17 @@
 		font-size: var(--fs-xs);
 		line-height: var(--lh-none);
 	}
+	.stacked > :global(*) :global(:focus-visible),
+	.stacked > :global(:focus-visible) {
+		outline-offset: var(--focus-ring-offset-inset);
+	}
 	.glyph-stack[data-expand] {
 		cursor: pointer;
 	}
+	/* An expandable stack is one target: presses land on the stack, not on 1rem cells. */
+	.glyph-stack[data-expand] > .cell {
+		pointer-events: none;
+	}
 	.glyph-stack[data-expand='slide'] {
 		touch-action: none;
 		user-select: none;

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

@@ -0,0 +1,592 @@
+<script lang="ts" module>
+	export type RichSelectOptionContext<T> = {
+		option: T;
+		index: number;
+		selected: boolean;
+		active: boolean;
+		/** True for the copy rendered inside the closed trigger. */
+		inTrigger: boolean;
+	};
+</script>
+
+<script lang="ts" generics="T">
+	import { tick, type Snippet } from 'svelte';
+	import Icon from '../atoms/Icon.svelte';
+	import { playSound } from '../../sound';
+	import Popover from './Popover.svelte';
+	import { createTypeahead, richSelectAction, typeaheadIndex } from './rich-select-keyboard.js';
+	import { slotForTop } from './sortable-list-order.js';
+
+	type Key = string | number;
+
+	type Props = {
+		options: readonly T[];
+		/** Key of the selected option (`getKey`). */
+		value?: Key;
+		onchange?: (value: Key, option: T) => void;
+		getKey?: (option: T) => Key;
+		/** Text used by typeahead and announcements. */
+		getLabel?: (option: T) => string;
+		/** The card, rendered in the closed trigger and for every listbox row.
+		 *  It sits inside the trigger button, so it must not contain controls. */
+		option: Snippet<[RichSelectOptionContext<T>]>;
+		/** Per-row actions beside the card. They never select the option. */
+		trailing?: Snippet<[{ option: T; index: number; close: () => void }]>;
+		footer?: Snippet<[{ close: () => void }]>;
+		/** Enables the drag handles and Alt+ArrowUp/Down; reorder `options` in it. */
+		onreorder?: (from: number, to: number) => void;
+		placeholder?: Snippet | string;
+		/** Accessible name of the select. */
+		label: string;
+		disabled?: boolean;
+		box?: 'sm' | 'md' | 'lg';
+		placement?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
+		open?: boolean;
+		/** Play UI sounds when enabled globally; false silences this instance. */
+		sound?: boolean;
+		/** Spoken after a keyboard reorder. */
+		movedMessage?: (label: string, position: number, total: number) => string;
+		class?: string;
+		style?: string;
+	};
+
+	const fallbackKey = (o: T): Key => {
+		const r = o as { id?: Key; value?: Key; key?: Key };
+		return r?.key ?? r?.id ?? r?.value ?? String(o);
+	};
+	const fallbackLabel = (o: T): string => {
+		const r = o as { label?: string; name?: string };
+		return r?.label ?? r?.name ?? String(o);
+	};
+
+	let {
+		options,
+		value = $bindable(),
+		onchange,
+		getKey = fallbackKey,
+		getLabel = fallbackLabel,
+		option,
+		trailing,
+		footer,
+		onreorder,
+		placeholder = 'Select…',
+		label,
+		disabled = false,
+		box = 'md',
+		placement = 'bottom-start',
+		open = $bindable(false),
+		sound = true,
+		movedMessage = (name, position, total) => `${name} moved to position ${position} of ${total}`,
+		class: klass = '',
+		style = '',
+	}: Props = $props();
+
+	const uid = Math.random().toString(36).slice(2, 8);
+	const listId = `rs-list-${uid}`;
+	const optionId = (i: number) => `rs-opt-${uid}-${i}`;
+
+	let root = $state<HTMLDivElement | null>(null);
+	let active = $state(-1);
+	let announcement = $state('');
+	let triggerWidth = $state(0);
+	let dragFrom = $state(-1);
+	let dragTo = $state(-1);
+	let dragDy = $state(0);
+	let dragHeight = 0;
+
+	const selectedIndex = $derived(options.findIndex((o) => getKey(o) === value));
+	const selectedOption = $derived(selectedIndex >= 0 ? options[selectedIndex] : undefined);
+	const typeahead = createTypeahead();
+
+	const triggerEl = () => root?.querySelector<HTMLElement>('.rs-trigger') ?? null;
+	const rowEls = () => [...(root?.querySelectorAll<HTMLElement>('.rs-row') ?? [])];
+
+	$effect(() => {
+		const el = triggerEl();
+		if (!el || typeof ResizeObserver === 'undefined') return;
+		const ro = new ResizeObserver(() => (triggerWidth = el.offsetWidth));
+		ro.observe(el);
+		return () => ro.disconnect();
+	});
+
+	$effect(() => {
+		triggerEl()?.setAttribute('role', 'combobox');
+	});
+
+	$effect(() => {
+		if (!open) return;
+		if (active < 0 || active >= options.length) active = selectedIndex >= 0 ? selectedIndex : 0;
+	});
+
+	$effect(() => {
+		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;
+	}
+
+	function focusTrigger() {
+		triggerEl()?.focus();
+	}
+
+	function choose(index: number, closeAfter: boolean) {
+		const next = options[index];
+		if (next === undefined) return;
+		const key = getKey(next);
+		active = index;
+		if (key !== value) {
+			value = key;
+			onchange?.(key, next);
+			playSound(closeAfter ? 'click' : 'tick', sound);
+		}
+		if (closeAfter) {
+			close();
+			focusTrigger();
+		}
+	}
+
+	function reorder(from: number, to: number) {
+		if (!onreorder || from === to) return;
+		const moved = options[from];
+		onreorder(from, to);
+		active = to;
+		if (moved !== undefined) announcement = movedMessage(getLabel(moved), to + 1, options.length);
+		playSound('tick', sound);
+	}
+
+	function trailingFocusables(index: number) {
+		const row = rowEls()[index];
+		return [
+			...(row?.querySelectorAll<HTMLElement>(
+				'.rs-trailing :is(button, a[href], input, select, textarea, [tabindex]:not([tabindex="-1"])):not(:disabled)'
+			) ?? []),
+		];
+	}
+
+	function onTriggerKey(e: KeyboardEvent) {
+		const action = richSelectAction(e, {
+			open,
+			count: options.length,
+			index: open ? active : selectedIndex,
+			reorder: onreorder !== undefined,
+			trailing: open && active >= 0 && trailingFocusables(active).length > 0,
+		});
+		if (!action) return;
+		if (action.type === 'close' && e.key === 'Tab') {
+			close();
+			return;
+		}
+		e.preventDefault();
+		e.stopPropagation();
+		switch (action.type) {
+			case 'open':
+				active = selectedIndex >= 0 ? selectedIndex : 0;
+				open = true;
+				break;
+			case 'close':
+				close();
+				focusTrigger();
+				break;
+			case 'select':
+				choose(active, true);
+				break;
+			case 'move':
+				active = action.index;
+				break;
+			case 'change':
+				choose(action.index, false);
+				break;
+			case 'reorder':
+				reorder(action.from, action.to);
+				break;
+			case 'trailing':
+				trailingFocusables(active)[0]?.focus();
+				break;
+			case 'type': {
+				const from = open ? active : selectedIndex;
+				const hit = typeaheadIndex(options.map(getLabel), typeahead.push(action.char), from);
+				if (hit === undefined) break;
+				if (open) active = hit;
+				else choose(hit, false);
+				break;
+			}
+		}
+	}
+
+	function onPanelKey(e: KeyboardEvent, target: HTMLElement) {
+		if (!target.closest('.rs-trailing')) {
+			if (e.key === 'Escape') {
+				e.preventDefault();
+				e.stopPropagation();
+				close();
+				focusTrigger();
+			}
+			return;
+		}
+		const row = target.closest<HTMLElement>('.rs-row');
+		const index = row ? rowEls().indexOf(row) : -1;
+		const items = index >= 0 ? trailingFocusables(index) : [];
+		const at = items.indexOf(target);
+		const back = e.key === 'ArrowLeft' || (e.key === 'Tab' && e.shiftKey && at <= 0);
+		if (e.key === 'Escape' || back || e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+			e.preventDefault();
+			e.stopPropagation();
+			if (e.key === 'ArrowLeft' && at > 0) {
+				items[at - 1].focus();
+				return;
+			}
+			if (e.key === 'Escape') close();
+			else if (e.key === 'ArrowUp') active = Math.max(index - 1, 0);
+			else if (e.key === 'ArrowDown') active = Math.min(index + 1, options.length - 1);
+			focusTrigger();
+			return;
+		}
+		if (e.key === 'ArrowRight' && at >= 0 && at < items.length - 1) {
+			e.preventDefault();
+			e.stopPropagation();
+			items[at + 1].focus();
+		}
+	}
+
+	function onKeydownCapture(e: KeyboardEvent) {
+		if (disabled) return;
+		const target = e.target as HTMLElement;
+		if (target === triggerEl()) onTriggerKey(e);
+		else if (target.closest('.rs-panel')) onPanelKey(e, target);
+	}
+
+	function onGripDown(e: PointerEvent, index: number) {
+		if (!onreorder || e.button !== 0) return;
+		e.preventDefault();
+		const grip = e.currentTarget as HTMLElement;
+		grip.setPointerCapture?.(e.pointerId);
+		const rows = rowEls();
+		const startY = e.clientY;
+		const top = (rows[index]?.offsetTop ?? 0) - (rows[0]?.offsetTop ?? 0);
+		const others = rows.filter((_, i) => i !== index).map((r) => r.offsetHeight);
+		dragHeight = rows[index]?.offsetHeight ?? 0;
+		dragFrom = index;
+		dragTo = index;
+		dragDy = 0;
+		active = index;
+		const move = (ev: PointerEvent) => {
+			dragDy = ev.clientY - startY;
+			dragTo = slotForTop(top + dragDy, others);
+		};
+		const end = (ev: PointerEvent) => {
+			grip.removeEventListener('pointermove', move);
+			grip.removeEventListener('pointerup', end);
+			grip.removeEventListener('pointercancel', end);
+			const from = dragFrom;
+			const to = dragTo;
+			dragFrom = -1;
+			dragTo = -1;
+			dragDy = 0;
+			if (ev.type === 'pointerup') reorder(from, to);
+		};
+		grip.addEventListener('pointermove', move);
+		grip.addEventListener('pointerup', end);
+		grip.addEventListener('pointercancel', end);
+	}
+
+	function shiftFor(i: number) {
+		if (dragFrom < 0) return undefined;
+		if (i === dragFrom) return `0 ${dragDy}px`;
+		if (dragFrom < i && i <= dragTo) return `0 ${-dragHeight}px`;
+		if (dragTo <= i && i < dragFrom) return `0 ${dragHeight}px`;
+		return undefined;
+	}
+
+	async function onOpen() {
+		typeahead.reset();
+		await tick();
+		if (active >= 0) revealActive();
+	}
+
+	function onClose() {
+		typeahead.reset();
+		dragFrom = -1;
+	}
+
+	const panelStyle = $derived(
+		triggerWidth > 0
+			? `min-width: max(10rem, ${triggerWidth}px); max-width: min(max(22rem, ${triggerWidth}px), calc(100vw - 2 * var(--sp-3)))`
+			: ''
+	);
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+	bind:this={root}
+	data-tsu="RichSelect"
+	class="rich-select box-{box} {klass}"
+	class:is-disabled={disabled}
+	class:is-dragging={dragFrom >= 0}
+	class:is-open={open}
+	{style}
+	onkeydowncapture={onKeydownCapture}
+>
+	<Popover
+		bind:open
+		bare
+		{label}
+		{placement}
+		{disabled}
+		{sound}
+		role="group"
+		haspopup="listbox"
+		triggerClass="rs-trigger"
+		panelClass="rs-panel"
+		{panelStyle}
+		onopen={onOpen}
+		onclose={onClose}
+		aria-controls={listId}
+		aria-activedescendant={open && active >= 0 ? optionId(active) : undefined}
+	>
+		{#snippet trigger()}
+			<span class="rs-value">
+				{#if selectedOption !== undefined}
+					{@render option({ option: selectedOption, index: selectedIndex, selected: true, active: false, inTrigger: true })}
+				{:else if typeof placeholder === 'string'}
+					<span class="rs-placeholder">{placeholder}</span>
+				{:else}
+					{@render placeholder()}
+				{/if}
+			</span>
+			<span class="rs-chevron" aria-hidden="true"><Icon name="chevron-down" /></span>
+		{/snippet}
+		<div class="rs-list" role="listbox" id={listId} aria-label={label}>
+			{#each options as opt, i (getKey(opt))}
+				{@const selected = i === selectedIndex}
+				<div
+					class="rs-row"
+					role="presentation"
+					data-active={i === active ? '' : undefined}
+					data-selected={selected ? '' : undefined}
+					data-dragging={i === dragFrom ? '' : undefined}
+					style:translate={shiftFor(i)}
+				>
+					{#if onreorder}
+						<span class="rs-grip" aria-hidden="true" onpointerdown={(e) => onGripDown(e, i)}></span>
+					{/if}
+					<!-- svelte-ignore a11y_click_events_have_key_events -->
+					<div
+						class="rs-option"
+						role="option"
+						id={optionId(i)}
+						aria-selected={selected}
+						tabindex="-1"
+						onclick={() => choose(i, true)}
+						onmousedown={(e) => e.preventDefault()}
+						onpointermove={() => {
+							if (dragFrom < 0) active = i;
+						}}
+					>
+						{@render option({ option: opt, index: i, selected, active: i === active, inTrigger: false })}
+					</div>
+					{#if trailing}
+						<div class="rs-trailing">{@render trailing({ option: opt, index: i, close })}</div>
+					{/if}
+				</div>
+			{/each}
+		</div>
+		{#if footer}
+			<div class="rs-footer">{@render footer({ close })}</div>
+		{/if}
+	</Popover>
+	<span class="sr-only" aria-live="polite">{announcement}</span>
+</div>
+
+<style>
+	.rich-select {
+		display: block;
+		min-width: 0;
+		--rs-height: var(--control-md);
+	}
+	.rich-select.box-sm {
+		--rs-height: var(--control-sm);
+	}
+	.rich-select.box-lg {
+		--rs-height: var(--control-lg);
+	}
+	.rich-select :global(.pop-trigger.rs-trigger) {
+		display: flex;
+		align-items: center;
+		gap: var(--sp-2);
+		box-sizing: border-box;
+		width: 100%;
+		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-radius: var(--r-md);
+		background: var(--surface);
+		color: var(--text);
+		text-align: start;
+		cursor: pointer;
+		transition:
+			border-color var(--dur-fast) var(--ease),
+			scale var(--dur-fast) var(--ease-out);
+	}
+	.rich-select :global(.pop-trigger.rs-trigger:focus-visible) {
+		outline: var(--focus-ring);
+		outline-offset: var(--focus-ring-offset);
+	}
+	.rich-select :global(.pop-trigger.rs-trigger:active:not(:disabled)) {
+		scale: var(--press-scale-lg);
+		transition-duration: var(--dur-press);
+	}
+	.rich-select :global(.pop-trigger.rs-trigger[aria-expanded='true']) {
+		border-color: var(--accent);
+	}
+	.rich-select :global(.pop-trigger.rs-trigger:disabled) {
+		opacity: var(--disabled-opacity);
+		cursor: not-allowed;
+	}
+	@media (hover: hover) and (pointer: fine) {
+		.rich-select :global(.pop-trigger.rs-trigger:hover:not(:disabled)) {
+			border-color: var(--accent);
+		}
+	}
+	.rs-value {
+		flex: 1 1 auto;
+		min-width: 0;
+		overflow: hidden;
+	}
+	.rs-placeholder {
+		display: block;
+		color: var(--text-muted);
+		font-size: var(--control-fs-md);
+		line-height: var(--lh-tight);
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	.rs-chevron {
+		display: inline-flex;
+		flex: none;
+		color: var(--text-muted);
+		--icon-size: var(--control-icon-md);
+		transition: rotate var(--dur-fast) var(--ease-out);
+	}
+	.rich-select.is-open .rs-chevron {
+		rotate: 180deg;
+	}
+	.rich-select :global(.pop-panel.rs-panel) {
+		display: flex;
+		flex-direction: column;
+		gap: var(--sp-1);
+		box-sizing: border-box;
+		max-height: min(70vh, 28rem);
+		padding: var(--sp-1);
+	}
+	.rs-list {
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		gap: var(--sp-0-5);
+		min-height: 0;
+		overflow-y: auto;
+		overscroll-behavior: contain;
+	}
+	.rs-row {
+		position: relative;
+		display: flex;
+		align-items: center;
+		gap: var(--sp-1);
+		min-height: var(--control-sm);
+		border-radius: var(--r-sm);
+		transition:
+			background-color var(--dur-fast) var(--ease),
+			translate var(--dur-fast) var(--ease-out);
+	}
+	.rs-row[data-active] {
+		background: var(--bg-elevated-2);
+		transition-duration: var(--dur-instant), var(--dur-fast);
+	}
+	.rs-row[data-selected] {
+		background: color-mix(in srgb, var(--accent) 12%, transparent);
+	}
+	.rs-row[data-selected][data-active] {
+		background: color-mix(in srgb, var(--accent) 18%, var(--bg-elevated-2));
+	}
+	.rs-row[data-selected]::before {
+		content: '';
+		position: absolute;
+		inset-block: var(--sp-1);
+		inset-inline-start: 0;
+		width: 3px;
+		border-radius: var(--r-pill);
+		background: var(--accent);
+	}
+	.rs-row[data-dragging] {
+		z-index: 1;
+		box-shadow: var(--shadow-md);
+		background: var(--bg-elevated);
+		transition: none;
+	}
+	.rs-option {
+		flex: 1 1 auto;
+		min-width: 0;
+		padding: var(--sp-1);
+		border-radius: var(--r-sm);
+		cursor: pointer;
+		outline: none;
+	}
+	.rs-trailing {
+		display: flex;
+		flex: none;
+		align-items: center;
+		gap: var(--sp-1);
+		padding-inline-end: var(--sp-1);
+	}
+	.rs-grip {
+		flex: none;
+		align-self: stretch;
+		width: 24px;
+		min-height: 24px;
+		margin-inline-start: var(--sp-0-5);
+		border-radius: var(--r-sm);
+		display: grid;
+		place-items: center;
+		color: var(--text-muted);
+		cursor: grab;
+		touch-action: none;
+		opacity: 0.6;
+		transition: opacity var(--dur-fast) var(--ease);
+	}
+	.rs-grip::before {
+		content: '';
+		width: 10px;
+		height: 16px;
+		background: radial-gradient(circle, currentColor 1.5px, transparent 1.75px) 0 0 / 5px 5.333px;
+	}
+	@media (hover: hover) and (pointer: fine) {
+		.rs-grip:hover {
+			opacity: 1;
+		}
+	}
+	.is-dragging .rs-grip {
+		cursor: grabbing;
+	}
+	.rs-footer {
+		flex: none;
+		display: flex;
+		flex-direction: column;
+		padding-top: var(--sp-1);
+		border-top: 1px solid var(--border);
+	}
+</style>

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

@@ -0,0 +1,68 @@
+export type RichSelectOptionContext<T> = {
+    option: T;
+    index: number;
+    selected: boolean;
+    active: boolean;
+    /** True for the copy rendered inside the closed trigger. */
+    inTrigger: boolean;
+};
+import { type Snippet } from 'svelte';
+declare function $$render<T>(): {
+    props: {
+        options: readonly T[];
+        /** Key of the selected option (`getKey`). */
+        value?: string | number;
+        onchange?: (value: string | number, option: T) => void;
+        getKey?: (option: T) => string | number;
+        /** Text used by typeahead and announcements. */
+        getLabel?: (option: T) => string;
+        /** The card, rendered in the closed trigger and for every listbox row.
+         *  It sits inside the trigger button, so it must not contain controls. */
+        option: Snippet<[RichSelectOptionContext<T>]>;
+        /** Per-row actions beside the card. They never select the option. */
+        trailing?: Snippet<[{
+            option: T;
+            index: number;
+            close: () => void;
+        }]>;
+        footer?: Snippet<[{
+            close: () => void;
+        }]>;
+        /** Enables the drag handles and Alt+ArrowUp/Down; reorder `options` in it. */
+        onreorder?: (from: number, to: number) => void;
+        placeholder?: Snippet | string;
+        /** Accessible name of the select. */
+        label: string;
+        disabled?: boolean;
+        box?: "sm" | "md" | "lg";
+        placement?: "bottom-start" | "bottom-end" | "top-start" | "top-end";
+        open?: boolean;
+        /** Play UI sounds when enabled globally; false silences this instance. */
+        sound?: boolean;
+        /** Spoken after a keyboard reorder. */
+        movedMessage?: (label: string, position: number, total: number) => string;
+        class?: string;
+        style?: string;
+    };
+    exports: {};
+    bindings: "open" | "value";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "open" | "value";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const RichSelect: $$IsomorphicComponent;
+type RichSelect<T> = InstanceType<typeof RichSelect<T>>;
+export default RichSelect;

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/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/rich-select-keyboard.d.ts

@@ -0,0 +1,82 @@
+/**
+ * @typedef {{ type: 'open', index?: number }
+ *   | { type: 'close' }
+ *   | { type: 'select' }
+ *   | { type: 'move', index: number }
+ *   | { type: 'change', index: number }
+ *   | { type: 'reorder', from: number, to: number }
+ *   | { type: 'trailing' }
+ *   | { type: 'type', char: string }} RichSelectAction
+ */
+/**
+ * Map a keydown on the trigger to what the select does with it. Closed, the
+ * arrows step the value like a native select and Enter/Space/Alt+ArrowDown open.
+ * Open, the arrows and Home/End move the active option, Enter/Space select,
+ * Escape closes, Alt+arrows reorder (when `reorder` is set), and Tab or
+ * ArrowRight reach the active option's trailing actions (when it has any).
+ * Printable characters feed the typeahead in both states. `undefined` leaves
+ * the key alone.
+ *
+ * @param {{ key: string, altKey?: boolean, ctrlKey?: boolean, metaKey?: boolean, shiftKey?: boolean }} e
+ * @param {{ open: boolean, count: number, index: number, reorder?: boolean, trailing?: boolean }} state
+ * @returns {RichSelectAction | undefined}
+ */
+export function richSelectAction(e: {
+    key: string;
+    altKey?: boolean;
+    ctrlKey?: boolean;
+    metaKey?: boolean;
+    shiftKey?: boolean;
+}, { open, count, index, reorder, trailing }: {
+    open: boolean;
+    count: number;
+    index: number;
+    reorder?: boolean;
+    trailing?: boolean;
+}): RichSelectAction | undefined;
+/**
+ * Index of the first label, searching forward from `from` and wrapping, that
+ * starts with `query` (case- and accent-insensitive). A query of one repeated
+ * character cycles through the labels starting with it, as native selects do.
+ *
+ * @param {readonly string[]} labels
+ * @param {string} query
+ * @param {number} from index of the current option, or -1
+ * @returns {number | undefined}
+ */
+export function typeaheadIndex(labels: readonly string[], query: string, from: number): number | undefined;
+/**
+ * Accumulates typed characters into a query that resets after `timeout` ms of
+ * silence.
+ *
+ * @param {number} [timeout]
+ * @param {() => number} [now]
+ */
+export function createTypeahead(timeout?: number, now?: () => number): {
+    /** @param {string} char */
+    push(char: string): string;
+    reset(): void;
+};
+export type RichSelectAction = {
+    type: "open";
+    index?: number;
+} | {
+    type: "close";
+} | {
+    type: "select";
+} | {
+    type: "move";
+    index: number;
+} | {
+    type: "change";
+    index: number;
+} | {
+    type: "reorder";
+    from: number;
+    to: number;
+} | {
+    type: "trailing";
+} | {
+    type: "type";
+    char: string;
+};

package/dist/components/molecules/rich-select-keyboard.js

@@ -0,0 +1,114 @@
+/**
+ * @typedef {{ type: 'open', index?: number }
+ *   | { type: 'close' }
+ *   | { type: 'select' }
+ *   | { type: 'move', index: number }
+ *   | { type: 'change', index: number }
+ *   | { type: 'reorder', from: number, to: number }
+ *   | { type: 'trailing' }
+ *   | { type: 'type', char: string }} RichSelectAction
+ */
+
+/**
+ * Map a keydown on the trigger to what the select does with it. Closed, the
+ * arrows step the value like a native select and Enter/Space/Alt+ArrowDown open.
+ * Open, the arrows and Home/End move the active option, Enter/Space select,
+ * Escape closes, Alt+arrows reorder (when `reorder` is set), and Tab or
+ * ArrowRight reach the active option's trailing actions (when it has any).
+ * Printable characters feed the typeahead in both states. `undefined` leaves
+ * the key alone.
+ *
+ * @param {{ key: string, altKey?: boolean, ctrlKey?: boolean, metaKey?: boolean, shiftKey?: boolean }} e
+ * @param {{ open: boolean, count: number, index: number, reorder?: boolean, trailing?: boolean }} state
+ * @returns {RichSelectAction | undefined}
+ */
+export function richSelectAction(e, { open, count, index, reorder = false, trailing = false }) {
+	const { key } = e;
+	if (e.ctrlKey || e.metaKey) return undefined;
+	const last = count - 1;
+	const cur = index >= 0 && index <= last ? index : -1;
+	if (!open) {
+		if (e.altKey) return key === 'ArrowDown' ? { type: 'open' } : undefined;
+		if (key === 'Enter' || key === ' ') return { type: 'open' };
+		if (count <= 0) return undefined;
+		if (key === 'ArrowDown')
+			return { type: 'change', index: cur < 0 ? 0 : Math.min(cur + 1, last) };
+		if (key === 'ArrowUp') return { type: 'change', index: cur < 0 ? last : Math.max(cur - 1, 0) };
+		if (key === 'Home') return { type: 'change', index: 0 };
+		if (key === 'End') return { type: 'change', index: last };
+		return printable(e) ? { type: 'type', char: key } : undefined;
+	}
+	if (key === 'Escape') return { type: 'close' };
+	if (e.altKey) {
+		if (key === 'ArrowUp' && reorder && cur > 0) return { type: 'reorder', from: cur, to: cur - 1 };
+		if (key === 'ArrowDown' && reorder && cur >= 0 && cur < last)
+			return { type: 'reorder', from: cur, to: cur + 1 };
+		if (key === 'ArrowUp' && !reorder) return { type: 'select' };
+		return undefined;
+	}
+	if ((key === 'Tab' && !e.shiftKey) || key === 'ArrowRight')
+		return trailing && cur >= 0 ? { type: 'trailing' } : undefined;
+	if (key === 'Tab') return { type: 'close' };
+	if (key === 'Enter' || key === ' ') return cur >= 0 ? { type: 'select' } : { type: 'close' };
+	if (count <= 0) return undefined;
+	if (key === 'ArrowDown') return { type: 'move', index: cur < 0 ? 0 : Math.min(cur + 1, last) };
+	if (key === 'ArrowUp') return { type: 'move', index: cur < 0 ? last : Math.max(cur - 1, 0) };
+	if (key === 'Home') return { type: 'move', index: 0 };
+	if (key === 'End') return { type: 'move', index: last };
+	return printable(e) ? { type: 'type', char: key } : undefined;
+}
+
+/** @param {{ key: string, altKey?: boolean }} e */
+function printable(e) {
+	return e.key.length === 1 && !e.altKey && e.key !== ' ';
+}
+
+/**
+ * Index of the first label, searching forward from `from` and wrapping, that
+ * starts with `query` (case- and accent-insensitive). A query of one repeated
+ * character cycles through the labels starting with it, as native selects do.
+ *
+ * @param {readonly string[]} labels
+ * @param {string} query
+ * @param {number} from index of the current option, or -1
+ * @returns {number | undefined}
+ */
+export function typeaheadIndex(labels, query, from) {
+	const n = labels.length;
+	if (n === 0 || query === '') return undefined;
+	const fold = (/** @type {string} */ s) => s.normalize('NFD').replace(/\p{M}/gu, '').toLowerCase();
+	const q = fold(query);
+	const repeated = [...q].every((c) => c === q[0]);
+	const needle = repeated ? q[0] : q;
+	const start = repeated ? from + 1 : Math.max(from, 0);
+	for (let i = 0; i < n; i += 1) {
+		const at = (((start + i) % n) + n) % n;
+		if (fold(labels[at]).startsWith(needle)) return at;
+	}
+	return undefined;
+}
+
+/**
+ * Accumulates typed characters into a query that resets after `timeout` ms of
+ * silence.
+ *
+ * @param {number} [timeout]
+ * @param {() => number} [now]
+ */
+export function createTypeahead(timeout = 500, now = () => Date.now()) {
+	let query = '';
+	let at = -Infinity;
+	return {
+		/** @param {string} char */
+		push(char) {
+			const t = now();
+			query = t - at > timeout ? char : query + char;
+			at = t;
+			return query;
+		},
+		reset() {
+			query = '';
+			at = -Infinity;
+		},
+	};
+}

package/dist/components/organisms/ConversationFeed.svelte

@@ -64,6 +64,25 @@
 		if (stuck) pending = false;
 	}
 
+	// Keyboard focus at the scroll edge would cut its ring: bring it inside the scroll padding.
+	function onfocusin(e: FocusEvent) {
+		const el = scroller;
+		const target = e.target;
+		if (!el || !(target instanceof Element) || target === el) return;
+		try {
+			if (!target.matches(':focus-visible')) return;
+		} catch {
+			return;
+		}
+		const pad = Number.parseFloat(getComputedStyle(el).scrollPaddingTop) || 0;
+		const box = el.getBoundingClientRect();
+		const r = target.getBoundingClientRect();
+		const top = box.top + el.clientTop;
+		const bottom = top + el.clientHeight;
+		if (r.top - pad < top) el.scrollTop -= top - (r.top - pad);
+		else if (r.bottom + pad > bottom) el.scrollTop += r.bottom + pad - bottom;
+	}
+
 	$effect.pre(() => {
 		const el = scroller;
 		const first = items.length ? key(items[0]) : undefined;
@@ -106,7 +125,7 @@
 </script>
 
 <div data-tsu="ConversationFeed" class="feed-wrap {klass}" style={styleProp}>
-	<div class="feed" bind:this={scroller} {onscroll}>
+	<div class="feed" bind:this={scroller} {onscroll} {onfocusin}>
 		{#if loadMore}
 			<LoadMore pill state={loadMore} onload={onloadmore} label={loadMoreLabel} />
 		{/if}

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/dist/index.d.ts

@@ -85,6 +85,7 @@ 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 RichSelect, type RichSelectOptionContext, } from './components/molecules/RichSelect.svelte';
 export { default as SectionHeader } from './components/molecules/SectionHeader.svelte';
 export { default as SeekSlider } from './components/molecules/SeekSlider.svelte';
 export { default as SegmentedControl, type SegmentOption, } from './components/molecules/SegmentedControl.svelte';

package/dist/index.js

@@ -92,6 +92,7 @@ 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 RichSelect, } from './components/molecules/RichSelect.svelte';
 export { default as SectionHeader } from './components/molecules/SectionHeader.svelte';
 export { default as SeekSlider } from './components/molecules/SeekSlider.svelte';
 export { default as SegmentedControl, } from './components/molecules/SegmentedControl.svelte';

package/dist/styles/reset.css

@@ -51,9 +51,6 @@ a {
 	color: var(--link);
 	text-decoration: none;
 }
-a:hover {
-	text-decoration: underline;
-}
 
 button {
 	font: inherit;
@@ -96,6 +93,9 @@ pre {
 /* Slim scrollbars for mice only. On touch, a custom scrollbar replaces the
    native overlay bars with classic space-taking ones. */
 @media (hover: hover) and (pointer: fine) {
+	a:hover {
+		text-decoration: underline;
+	}
 	::-webkit-scrollbar {
 		width: 8px;
 		height: 8px;

package/package.json

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