@ruckc/truss-ui 0.0.0-stage → 1.0.0

package/dist/components/InputGroup.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	/**
+	 * Joins controls into one seamless unit: shared 1px borders, corner radii only on the outer ends, focus raised above
+	 * neighbours. Put almost any input inside — Input, NumberInput, Select, Combobox, MultiSelect, TagInput, Textarea,
+	 * DatePicker, TimePicker, DateRangePicker, DateTimePicker, DurationInput, ColorPicker, SegmentedControl, Button,
+	 * SplitButton, MenuButton — plus <InputAddon> for static text or icons.
+	 *
+	 * Give the *group* the label/hint/error, not the individual controls (their own labels would break the alignment).
+	 * Inputs share the free space; give a child a fixed width by wrapping it, e.g. `<div style="width: 120px">`.
+	 */
+	let {
+		label,
+		hint,
+		error,
+		size = 'md',
+		vertical = false,
+		disabled = false,
+		children
+	}: {
+		label?: string;
+		hint?: string;
+		error?: string;
+		/** Sets the height of every default-sized control inside. */
+		size?: 'sm' | 'md' | 'lg';
+		/** Stack the controls instead of lining them up. */
+		vertical?: boolean;
+		/** Disables every control inside. */
+		disabled?: boolean;
+		children: Snippet;
+	} = $props();
+
+	const id = $props.id();
+</script>
+
+<div class="tr-field ig-wrap">
+	{#if label}<span class="tr-label" id="{id}-label">{label}</span>{/if}
+	<fieldset class="ig" {disabled} data-size={size} data-vertical={vertical} data-invalid={!!error} data-disabled={disabled} aria-labelledby={label ? `${id}-label` : undefined} aria-describedby={error || hint ? `${id}-msg` : undefined}>
+		{@render children()}
+	</fieldset>
+	{#if error || hint}<div class="tr-hint" id="{id}-msg" data-error={!!error}>{error ?? hint}</div>{/if}
+</div>
+
+<style>
+	.ig { display: flex; align-items: flex-start; min-width: 0; margin: 0; padding: 0; border: 0; }
+	.ig[data-vertical='true'] { flex-direction: column; align-items: stretch; }
+	.ig[data-size='sm'] { --tr-control-h: 24px; font-size: var(--tr-text-sm); }
+	.ig[data-size='lg'] { --tr-control-h: 40px; font-size: var(--tr-text-lg); }
+	.ig[data-disabled='true'] { opacity: 0.55; pointer-events: none; }
+
+	/* items: inputs share space, everything else is its natural size */
+	.ig > :global(*) { flex: 0 0 auto; min-width: 0; position: relative; }
+	.ig > :global(.tr-field), .ig > :global(.tr-grow) { flex: 1 1 0; }
+	.ig[data-vertical='true'] > :global(*) { flex: none; }
+
+	/* overlap the shared border by 1px, lift whatever has focus/hover so its ring and popovers sit on top */
+	.ig:not([data-vertical='true']) > :global(* + *) { margin-left: -1px; }
+	.ig[data-vertical='true'] > :global(* + *) { margin-top: -1px; }
+	.ig > :global(*:hover) { z-index: 1; }
+	.ig > :global(*:focus-within) { z-index: 3; }
+
+	/* square the inner corners of the visible boxes: a box is either inside the child (inputs, selects) or the child itself (buttons, addons) */
+	.ig:not([data-vertical='true']) > :global(*:not(:first-child) :where(.tr-control, .control, .trigger, .tr-btn, .addon, .seg)), .ig:not([data-vertical='true']) > :global(:where(.tr-control, .control, .trigger, .tr-btn, .addon, .seg):not(:first-child)) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
+	.ig:not([data-vertical='true']) > :global(*:not(:last-child) :where(.tr-control, .control, .trigger, .tr-btn, .addon, .seg)), .ig:not([data-vertical='true']) > :global(:where(.tr-control, .control, .trigger, .tr-btn, .addon, .seg):not(:last-child)) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
+	.ig[data-vertical='true'] > :global(*:not(:first-child) :where(.tr-control, .control, .trigger, .tr-btn, .addon, .seg)), .ig[data-vertical='true'] > :global(:where(.tr-control, .control, .trigger, .tr-btn, .addon, .seg):not(:first-child)) { border-top-left-radius: 0; border-top-right-radius: 0; }
+	.ig[data-vertical='true'] > :global(*:not(:last-child) :where(.tr-control, .control, .trigger, .tr-btn, .addon, .seg)), .ig[data-vertical='true'] > :global(:where(.tr-control, .control, .trigger, .tr-btn, .addon, .seg):not(:last-child)) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
+	/* group-level error colours every box */
+	.ig[data-invalid='true'] :global(:where(.tr-control, .control, .trigger, .addon)) { border-color: var(--tr-danger); }
+</style>

package/dist/components/InputGroup.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    label?: string;
+    hint?: string;
+    error?: string;
+    /** Sets the height of every default-sized control inside. */
+    size?: 'sm' | 'md' | 'lg';
+    /** Stack the controls instead of lining them up. */
+    vertical?: boolean;
+    /** Disables every control inside. */
+    disabled?: boolean;
+    children: Snippet;
+};
+declare const InputGroup: import("svelte").Component<$$ComponentProps, {}, "">;
+type InputGroup = ReturnType<typeof InputGroup>;
+export default InputGroup;

package/dist/components/Menu.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+	import { tick } from 'svelte';
+	import Icon from '../icons/Icon.svelte';
+	import Menu from './Menu.svelte';
+	import type { MenuEntry, MenuItem } from '../types.js';
+
+	let {
+		items,
+		label = 'Menu',
+		autofocus = false,
+		onclose,
+		onback
+	}: {
+		items: MenuEntry[];
+		label?: string;
+		/** Focus the first item on mount (set when opened from a trigger). */
+		autofocus?: boolean;
+		/** Called after an item is chosen, so the owner can close the surface. */
+		onclose?: () => void;
+		/** Submenus: called on ArrowLeft to return focus to the parent. */
+		onback?: () => void;
+	} = $props();
+
+	let root: HTMLUListElement;
+	let openSub = $state<number | null>(null);
+
+	const buttons = () => (root ? [...root.querySelectorAll<HTMLButtonElement>(':scope > li > button:not(:disabled)')] : []);
+	$effect(() => { if (autofocus) tick().then(() => buttons()[0]?.focus()); });
+
+	const isItem = (e: MenuEntry): e is MenuItem => 'label' in e;
+
+	async function openSubmenu(i: number, focus: boolean) {
+		openSub = i;
+		if (focus) { await tick(); root?.querySelector<HTMLButtonElement>(`:scope > li:nth-child(${i + 1}) .sub [role^='menuitem']:not(:disabled)`)?.focus(); }
+	}
+	function choose(it: MenuItem, i: number) {
+		if (it.items) return openSubmenu(i, true);
+		it.onselect?.();
+		onclose?.();
+	}
+	function onKey(e: KeyboardEvent) {
+		const els = buttons();
+		const cur = document.activeElement as HTMLButtonElement;
+		const i = els.indexOf(cur);
+		if (i < 0) return; // key came from a nested submenu
+		const idx = Number(cur.dataset.i);
+		const to = e.key === 'ArrowDown' ? (i + 1) % els.length : e.key === 'ArrowUp' ? (i - 1 + els.length) % els.length : e.key === 'Home' ? 0 : e.key === 'End' ? els.length - 1 : -1;
+		if (to >= 0) { e.preventDefault(); openSub = null; els[to].focus(); }
+		else if (e.key === 'ArrowRight' && (items[idx] as MenuItem)?.items) { e.preventDefault(); openSubmenu(idx, true); }
+		else if (e.key === 'ArrowLeft' && onback) { e.preventDefault(); onback(); }
+	}
+</script>
+
+<ul class="menu" role="menu" aria-label={label} bind:this={root} onkeydown={onKey}>
+	{#each items as it, i}
+		{#if 'divider' in it}
+			<li role="separator" class="sep"></li>
+		{:else if 'heading' in it}
+			<li role="presentation" class="heading">{it.heading}</li>
+		{:else if isItem(it)}
+			<li role="none" onpointerenter={() => (openSub = it.items && !it.disabled ? i : null)}>
+				<button
+					type="button" data-i={i} role={it.checked != null ? 'menuitemcheckbox' : 'menuitem'} aria-checked={it.checked}
+					aria-haspopup={it.items ? 'menu' : undefined} aria-expanded={it.items ? openSub === i : undefined}
+					disabled={it.disabled} data-danger={it.danger} onclick={() => choose(it, i)}
+				>
+					<span class="lead">{#if it.checked}<Icon name="tick" />{:else if it.icon}<Icon name={it.icon} />{/if}</span>
+					<span class="lbl">{it.label}</span>
+					{#if it.shortcut}<kbd>{it.shortcut}</kbd>{/if}
+					{#if it.items}<Icon name="chevron-right" />{/if}
+				</button>
+				{#if it.items && openSub === i}
+					<div class="sub">
+						<Menu items={it.items} label={it.label} {onclose} onback={() => { openSub = null; root?.querySelector<HTMLButtonElement>(`[data-i="${i}"]`)?.focus(); }} />
+					</div>
+				{/if}
+			</li>
+		{/if}
+	{/each}
+</ul>
+
+<style>
+	.menu { margin: 0; padding: 4px; list-style: none; min-width: 180px; }
+	li { position: relative; }
+	button { display: flex; align-items: center; gap: 8px; width: 100%; height: var(--tr-control-h); padding: 0 8px; border: 0; border-radius: var(--tr-radius-sm); background: none; color: var(--tr-on-surface); font: inherit; text-align: left; white-space: nowrap; cursor: pointer; }
+	button:hover:not(:disabled), button:focus-visible, button[aria-expanded='true'] { outline: none; background: var(--tr-surface-container-highest); }
+	button:disabled { opacity: 0.45; cursor: not-allowed; }
+	button[data-danger='true'] { color: var(--tr-danger); }
+	.lead { display: inline-flex; width: 16px; flex: none; }
+	.lbl { flex: 1; }
+	kbd { font: var(--tr-text-xs) var(--tr-font-mono); color: var(--tr-on-surface-variant); }
+	.sep { height: 1px; margin: 4px 0; background: var(--tr-outline-variant); }
+	.heading { padding: 6px 8px 2px; font-size: var(--tr-text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tr-on-surface-variant); }
+	.sub { position: absolute; top: -5px; left: calc(100% + 2px); z-index: 60; background: var(--tr-surface-container-low); border: 1px solid var(--tr-outline-variant); border-radius: var(--tr-radius-md); box-shadow: var(--tr-elevation-2); }
+</style>

package/dist/components/Menu.svelte.d.ts

@@ -0,0 +1,15 @@
+import Menu from './Menu.svelte';
+import type { MenuEntry } from '../types.js';
+type $$ComponentProps = {
+    items: MenuEntry[];
+    label?: string;
+    /** Focus the first item on mount (set when opened from a trigger). */
+    autofocus?: boolean;
+    /** Called after an item is chosen, so the owner can close the surface. */
+    onclose?: () => void;
+    /** Submenus: called on ArrowLeft to return focus to the parent. */
+    onback?: () => void;
+};
+declare const Menu: import("svelte").Component<$$ComponentProps, {}, "">;
+type Menu = ReturnType<typeof Menu>;
+export default Menu;

package/dist/components/MenuButton.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import Button from './Button.svelte';
+	import Menu from './Menu.svelte';
+	import Popover from './Popover.svelte';
+	import type { IconName } from '../icons/paths.js';
+	import type { MenuEntry } from '../types.js';
+
+	let {
+		label,
+		icon,
+		items,
+		variant = 'outlined',
+		intent = 'neutral',
+		size = 'md',
+		align = 'start',
+		iconOnly = false
+	}: {
+		label: string;
+		icon?: IconName;
+		items: MenuEntry[];
+		variant?: 'filled' | 'tonal' | 'outlined' | 'minimal';
+		intent?: 'primary' | 'neutral' | 'success' | 'warning' | 'danger';
+		size?: 'sm' | 'md' | 'lg';
+		align?: 'start' | 'end';
+		/** Show only the icon (label becomes the accessible name). */
+		iconOnly?: boolean;
+	} = $props();
+
+	let open = $state(false);
+	let host: HTMLDivElement;
+	const trigger = () => host.querySelector<HTMLButtonElement>('button');
+</script>
+
+<div class="tr-anchor mb" bind:this={host}>
+	{#if iconOnly}
+		<Button {variant} {intent} {size} icon={icon ?? 'more'} aria-label={label} aria-haspopup="menu" aria-expanded={open} onclick={() => (open = !open)} />
+	{:else}
+		<Button {variant} {intent} {size} {icon} rightIcon="chevron-down" aria-haspopup="menu" aria-expanded={open} onclick={() => (open = !open)}>{label}</Button>
+	{/if}
+	<Popover bind:open {align} onclose={(r) => r && trigger()?.focus()}>
+		<Menu {items} {label} autofocus onclose={() => { open = false; trigger()?.focus(); }} />
+	</Popover>
+</div>
+
+<style>.mb { display: inline-block; }</style>

package/dist/components/MenuButton.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { IconName } from '../icons/paths.js';
+import type { MenuEntry } from '../types.js';
+type $$ComponentProps = {
+    label: string;
+    icon?: IconName;
+    items: MenuEntry[];
+    variant?: 'filled' | 'tonal' | 'outlined' | 'minimal';
+    intent?: 'primary' | 'neutral' | 'success' | 'warning' | 'danger';
+    size?: 'sm' | 'md' | 'lg';
+    align?: 'start' | 'end';
+    /** Show only the icon (label becomes the accessible name). */
+    iconOnly?: boolean;
+};
+declare const MenuButton: import("svelte").Component<$$ComponentProps, {}, "">;
+type MenuButton = ReturnType<typeof MenuButton>;
+export default MenuButton;

package/dist/components/MultiSelect.svelte

@@ -0,0 +1,129 @@
+<script lang="ts">
+	import { SvelteMap } from 'svelte/reactivity';
+	import Icon from '../icons/Icon.svelte';
+	import Popover from './Popover.svelte';
+	import OptionList from './OptionList.svelte';
+	import type { Option } from '../types.js';
+
+	let {
+		options = [],
+		loadOptions,
+		value = $bindable([]),
+		label,
+		ariaLabel,
+		placeholder = 'Add…',
+		allowCreate = false,
+		disabled = false,
+		error,
+		debounce = 200
+	}: {
+		options?: Option[];
+		loadOptions?: (query: string, signal: AbortSignal) => Promise<Option[]>;
+		value?: string[];
+		label?: string;
+		/** Accessible name when no visible `label` is shown. */
+		ariaLabel?: string;
+		placeholder?: string;
+		/** Offer `Create "text"`; Enter or comma commits free text as a new tag. */
+		allowCreate?: boolean;
+		disabled?: boolean;
+		error?: string;
+		debounce?: number;
+	} = $props();
+
+	const id = $props.id();
+	let open = $state(false);
+	let text = $state('');
+	let active = $state(0);
+	let items = $state<Option[]>([]);
+	let loading = $state(false);
+	let input: HTMLInputElement;
+	const known = new SvelteMap<string, string>();
+	$effect(() => { for (const o of options) known.set(String(o.value), o.label); });
+
+	const q = $derived(text.trim());
+	const base = $derived(loadOptions ? items : options.filter((o) => o.label.toLowerCase().includes(q.toLowerCase())));
+	const canCreate = $derived(
+		allowCreate && !!q && !value.includes(q) && !base.some((o) => o.label.toLowerCase() === q.toLowerCase() || String(o.value) === q)
+	);
+	const shown = $derived<Option[]>(canCreate ? [...base, { value: q, label: `Create “${q}”`, icon: 'plus' }] : base);
+
+	let timer: ReturnType<typeof setTimeout>;
+	let ctrl: AbortController | undefined;
+	/** A typed query has not produced results yet: the list on screen is stale. */
+	let pending = $state(false);
+	$effect(() => () => { clearTimeout(timer); ctrl?.abort(); });
+	async function run(term: string) {
+		ctrl?.abort();
+		const c = (ctrl = new AbortController());
+		loading = true;
+		try {
+			const r = await loadOptions!(term, c.signal);
+			if (c.signal.aborted) return;
+			items = r;
+			for (const o of r) known.set(String(o.value), o.label);
+		} catch { if (!c.signal.aborted) items = []; }
+		finally { if (!c.signal.aborted) { loading = false; pending = false; } }
+	}
+
+	const toggle = (v: string) => (value = value.includes(v) ? value.filter((x) => x !== v) : [...value, v]);
+	function choose(o: Option) {
+		if (o.label.startsWith('Create “')) known.set(String(o.value), String(o.value));
+		toggle(String(o.value));
+		text = ''; active = 0;
+		if (loadOptions) run('');
+		input.focus();
+	}
+	function onInput() {
+		open = true; active = 0;
+		if (text.endsWith(',') && allowCreate) { text = text.slice(0, -1); if (q && !value.includes(q)) { value = [...value, q]; text = ''; } return; }
+		if (loadOptions) { pending = true; ctrl?.abort(); clearTimeout(timer); timer = setTimeout(() => run(q), debounce); }
+	}
+	function openList() { if (disabled) return; open = true; if (loadOptions && !q) run(''); }
+	function onKey(e: KeyboardEvent) {
+		const n = shown.length;
+		if (e.key === 'ArrowDown') { e.preventDefault(); open ? (active = (active + 1) % Math.max(n, 1)) : openList(); }
+		else if (e.key === 'ArrowUp') { e.preventDefault(); open ? (active = (active - 1 + n) % Math.max(n, 1)) : openList(); }
+		else if (e.key === 'Enter' && pending) {
+			e.preventDefault(); // results for what was typed haven't arrived — don't pick from the old list
+			if (allowCreate && q && !value.includes(q)) { known.set(q, q); value = [...value, q]; text = ''; }
+		}
+		else if (e.key === 'Enter' && open && shown[active]) { e.preventDefault(); choose(shown[active]); }
+		else if (e.key === 'Backspace' && !text && value.length) value = value.slice(0, -1);
+	}
+</script>
+
+<div class="tr-field">
+	{#if label}<label class="tr-label" for={id}>{label}</label>{/if}
+	<div class="tr-anchor">
+		<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
+		<div class="tr-control multi" data-invalid={!!error} data-disabled={disabled} onclick={() => input.focus()}>
+			{#each value as v (v)}
+				<span class="chip">
+					{known.get(v) ?? v}
+					<button type="button" aria-label="Remove {known.get(v) ?? v}" {disabled} onclick={(e) => { e.stopPropagation(); toggle(v); }}><Icon name="cross" /></button>
+				</span>
+			{/each}
+			<input
+				class="tr-bare" {id} aria-label={label ? undefined : ariaLabel} bind:this={input} bind:value={text} placeholder={value.length ? '' : placeholder} {disabled} autocomplete="off"
+				role="combobox" aria-autocomplete="list" aria-expanded={open} aria-controls="{id}-list"
+				aria-activedescendant={open && shown.length ? `${id}-list-opt-${active}` : undefined}
+				onfocus={openList} onclick={openList} oninput={onInput} onkeydown={onKey}
+			/>
+		</div>
+		<Popover bind:open>
+			<OptionList id="{id}-list" options={shown} {active} selected={value} query={q} {loading}
+				emptyText={allowCreate ? 'Type to create a tag' : 'No matches'} onchoose={choose} onhover={(i) => (active = i)} />
+		</Popover>
+	</div>
+	{#if error}<div class="tr-hint" data-error="true">{error}</div>{/if}
+</div>
+
+<style>
+	.multi { flex-wrap: wrap; padding: 3px 6px; gap: 4px; cursor: text; }
+	.multi .tr-bare { flex: 1 1 80px; height: 24px; }
+	.chip { display: inline-flex; align-items: center; gap: 2px; height: 24px; padding: 0 2px 0 8px; border-radius: var(--tr-radius-pill); background: var(--tr-primary-container); color: var(--tr-on-primary-container); font-size: var(--tr-text-sm); font-weight: 600; }
+	.chip button { display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; }
+	.chip button:hover { background: color-mix(in srgb, currentColor 15%, transparent); }
+	.chip button:focus-visible { outline: none; box-shadow: var(--tr-focus-ring); }
+</style>

package/dist/components/MultiSelect.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { Option } from '../types.js';
+type $$ComponentProps = {
+    options?: Option[];
+    loadOptions?: (query: string, signal: AbortSignal) => Promise<Option[]>;
+    value?: string[];
+    label?: string;
+    /** Accessible name when no visible `label` is shown. */
+    ariaLabel?: string;
+    placeholder?: string;
+    /** Offer `Create "text"`; Enter or comma commits free text as a new tag. */
+    allowCreate?: boolean;
+    disabled?: boolean;
+    error?: string;
+    debounce?: number;
+};
+declare const MultiSelect: import("svelte").Component<$$ComponentProps, {}, "value">;
+type MultiSelect = ReturnType<typeof MultiSelect>;
+export default MultiSelect;

package/dist/components/Navbar.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	let { start, center, end, sticky = true }: { start?: Snippet; center?: Snippet; end?: Snippet; sticky?: boolean } = $props();
+</script>
+
+<header class="nb" data-sticky={sticky}>
+	<div class="s">{#if start}{@render start()}{/if}</div>
+	<div class="c">{#if center}{@render center()}{/if}</div>
+	<div class="e">{#if end}{@render end()}{/if}</div>
+</header>
+
+<style>
+	.nb { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; height: 48px; padding: 0 12px; background: var(--tr-surface-container-low); border-bottom: 1px solid var(--tr-outline-variant); box-shadow: var(--tr-elevation-1); z-index: 20; }
+	.nb[data-sticky='true'] { position: sticky; top: 0; }
+	.s, .c, .e { display: flex; align-items: center; gap: 8px; min-width: 0; }
+	.e { justify-content: flex-end; }
+</style>

package/dist/components/Navbar.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    start?: Snippet;
+    center?: Snippet;
+    end?: Snippet;
+    sticky?: boolean;
+};
+declare const Navbar: import("svelte").Component<$$ComponentProps, {}, "">;
+type Navbar = ReturnType<typeof Navbar>;
+export default Navbar;

package/dist/components/NumberInput.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+	import Button from './Button.svelte';
+
+	let {
+		value = $bindable(null),
+		min,
+		max,
+		step = 1,
+		label,
+		ariaLabel,
+		hint,
+		error,
+		placeholder,
+		disabled = false
+	}: {
+		value?: number | null;
+		min?: number;
+		max?: number;
+		step?: number;
+		label?: string;
+		/** Accessible name when no visible `label` is shown. */
+		ariaLabel?: string;
+		hint?: string;
+		error?: string;
+		placeholder?: string;
+		disabled?: boolean;
+	} = $props();
+
+	const id = $props.id();
+	const decimals = $derived(String(step).split('.')[1]?.length ?? 0);
+	const norm = (n: number) => {
+		const c = Math.min(max ?? Infinity, Math.max(min ?? -Infinity, n));
+		return Number(c.toFixed(decimals));
+	};
+	let text = $state('');
+	$effect(() => { text = value == null ? '' : String(value); });
+
+	function commit() {
+		const t = text.trim().replace(/,/g, '');
+		if (!t) { value = null; return; }
+		const n = Number(t);
+		if (Number.isNaN(n)) { text = value == null ? '' : String(value); return; }
+		value = norm(n);
+		text = String(value);
+	}
+	const bump = (dir: 1 | -1) => (value = norm((value ?? 0) + dir * step));
+</script>
+
+<div class="tr-field">
+	{#if label}<label class="tr-label" for={id}>{label}</label>{/if}
+	<div class="tr-control" data-trail="true" data-invalid={!!error} data-disabled={disabled}>
+		<input
+			class="tr-bare" {id} aria-label={label ? undefined : ariaLabel} bind:value={text} {placeholder} {disabled} inputmode="decimal" autocomplete="off"
+			role="spinbutton" aria-valuenow={value ?? undefined} aria-valuemin={min} aria-valuemax={max}
+			onblur={commit}
+			onkeydown={(e) => {
+				if (e.key === 'ArrowUp') { e.preventDefault(); bump(1); }
+				else if (e.key === 'ArrowDown') { e.preventDefault(); bump(-1); }
+				else if (e.key === 'Enter') commit();
+			}}
+		/>
+		<Button variant="minimal" intent="neutral" size="sm" icon="minus" aria-label="Decrease" tabindex={-1} disabled={disabled || (min != null && (value ?? 0) <= min)} onclick={() => bump(-1)} />
+		<Button variant="minimal" intent="neutral" size="sm" icon="plus" aria-label="Increase" tabindex={-1} disabled={disabled || (max != null && (value ?? 0) >= max)} onclick={() => bump(1)} />
+	</div>
+	{#if error || hint}<div class="tr-hint" data-error={!!error}>{error ?? hint}</div>{/if}
+</div>

package/dist/components/NumberInput.svelte.d.ts

@@ -0,0 +1,16 @@
+type $$ComponentProps = {
+    value?: number | null;
+    min?: number;
+    max?: number;
+    step?: number;
+    label?: string;
+    /** Accessible name when no visible `label` is shown. */
+    ariaLabel?: string;
+    hint?: string;
+    error?: string;
+    placeholder?: string;
+    disabled?: boolean;
+};
+declare const NumberInput: import("svelte").Component<$$ComponentProps, {}, "value">;
+type NumberInput = ReturnType<typeof NumberInput>;
+export default NumberInput;

package/dist/components/OptionList.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+	import Icon from '../icons/Icon.svelte';
+	import type { Option } from '../types.js';
+
+	let {
+		id,
+		options,
+		active = 0,
+		selected = [],
+		query = '',
+		loading = false,
+		emptyText = 'No matches',
+		onchoose,
+		onhover
+	}: {
+		id: string;
+		options: Option[];
+		active?: number;
+		selected?: string[];
+		query?: string;
+		loading?: boolean;
+		emptyText?: string;
+		onchoose: (o: Option) => void;
+		onhover?: (i: number) => void;
+	} = $props();
+
+	function parts(label: string, q: string): [string, string, string] {
+		const i = q ? label.toLowerCase().indexOf(q.toLowerCase()) : -1;
+		return i < 0 ? [label, '', ''] : [label.slice(0, i), label.slice(i, i + q.length), label.slice(i + q.length)];
+	}
+
+	$effect(() => {
+		options; // re-run when the list changes
+		document.getElementById(`${id}-opt-${active}`)?.scrollIntoView({ block: 'nearest' });
+	});
+</script>
+
+<ul {id} role="listbox" aria-busy={loading || undefined}>
+	{#each options as o, i (o.value)}
+		{@const [pre, hit, post] = parts(o.label, query)}
+		<!-- svelte-ignore a11y_click_events_have_key_events -->
+		<li
+			id="{id}-opt-{i}"
+			role="option"
+			aria-selected={selected.includes(String(o.value))}
+			aria-disabled={o.disabled}
+			data-active={i === active}
+			onpointerdown={(e) => e.preventDefault()}
+			onpointermove={() => onhover?.(i)}
+			onclick={() => !o.disabled && onchoose(o)}
+		>
+			{#if o.icon}<Icon name={o.icon} />{/if}
+			<span class="text">
+				<span>{pre}{#if hit}<mark>{hit}</mark>{/if}{post}</span>
+				{#if o.description}<small>{o.description}</small>{/if}
+			</span>
+			{#if selected.includes(String(o.value))}<Icon name="tick" />{/if}
+		</li>
+	{:else}
+		<li class="empty" role="presentation">{loading ? 'Loading…' : emptyText}</li>
+	{/each}
+</ul>
+
+<style>
+	ul { margin: 0; padding: 4px; list-style: none; max-height: 240px; overflow-y: auto; }
+	li { display: flex; align-items: center; gap: 8px; min-height: var(--tr-control-h); padding: 0 8px; border-radius: var(--tr-radius-sm); cursor: pointer; }
+	.text { flex: 1; display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
+	small { color: var(--tr-on-surface-variant); font-size: var(--tr-text-xs); }
+	mark { background: none; color: var(--tr-primary); font-weight: 700; }
+	li[data-active='true'] { background: var(--tr-surface-container-highest); }
+	li[aria-selected='true'] { font-weight: 600; }
+	li[aria-disabled='true'] { opacity: 0.45; cursor: not-allowed; }
+	li.empty { color: var(--tr-on-surface-variant); cursor: default; }
+</style>

package/dist/components/OptionList.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Option } from '../types.js';
+type $$ComponentProps = {
+    id: string;
+    options: Option[];
+    active?: number;
+    selected?: string[];
+    query?: string;
+    loading?: boolean;
+    emptyText?: string;
+    onchoose: (o: Option) => void;
+    onhover?: (i: number) => void;
+};
+declare const OptionList: import("svelte").Component<$$ComponentProps, {}, "">;
+type OptionList = ReturnType<typeof OptionList>;
+export default OptionList;