@ruckc/truss-ui 0.0.0-stage → 1.0.0

package/dist/components/Popover.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	/**
+	 * Anchored surface. By default place it inside a `position: relative` wrapper (`.tr-anchor`); it anchors to its
+	 * parent, flips above when there is no room below, and closes on outside press or Escape.
+	 * With `fixed` + `anchor` it positions against the viewport instead, so it can escape clipping/scrolling ancestors
+	 * (tables, panels) — render it anywhere.
+	 */
+	let {
+		open = $bindable(false),
+		onclose,
+		align = 'start',
+		fixed = false,
+		anchor,
+		children
+	}: {
+		open?: boolean;
+		/** `refocus` is true when closed by Escape, so the owner can return focus to its trigger. */
+		onclose?: (refocus: boolean) => void;
+		align?: 'start' | 'end';
+		/** Viewport-fixed positioning against `anchor`. */
+		fixed?: boolean;
+		anchor?: HTMLElement | null;
+		children: Snippet;
+	} = $props();
+
+	let el = $state<HTMLDivElement>();
+	let flip = $state(false);
+	let pos = $state({ top: 0, left: 0, minWidth: 0 });
+
+	function close(refocus: boolean) {
+		open = false;
+		onclose?.(refocus);
+	}
+
+	$effect(() => {
+		if (!open || !el) return;
+		const host = fixed && anchor ? anchor : el.parentElement!;
+		const place = () => {
+			const r = host.getBoundingClientRect();
+			const h = el!.offsetHeight, w = el!.offsetWidth;
+			const above = r.bottom + h + 8 > window.innerHeight && r.top > h + 8;
+			if (fixed) {
+				const left = align === 'end' ? r.right - w : r.left;
+				pos = { top: above ? r.top - h - 4 : r.bottom + 4, left: Math.min(Math.max(4, left), window.innerWidth - w - 4), minWidth: r.width };
+			}
+			flip = above;
+		};
+		place();
+		const down = (e: PointerEvent) => {
+			const t = e.target as Node;
+			if (!host.contains(t) && !el!.contains(t)) close(false);
+		};
+		const key = (e: KeyboardEvent) => { if (e.key === 'Escape' && !e.defaultPrevented) { e.preventDefault(); close(true); } };
+		window.addEventListener('pointerdown', down);
+		// Fixed popovers may live outside the anchor's subtree, so listen globally
+		const keyTarget: EventTarget = fixed ? window : host;
+		keyTarget.addEventListener('keydown', key as EventListener);
+		if (fixed) { window.addEventListener('scroll', place, true); window.addEventListener('resize', place); }
+		return () => {
+			window.removeEventListener('pointerdown', down);
+			keyTarget.removeEventListener('keydown', key as EventListener);
+			if (fixed) { window.removeEventListener('scroll', place, true); window.removeEventListener('resize', place); }
+		};
+	});
+</script>
+
+{#if open}
+	<div
+		class="tr-popover" bind:this={el} data-flip={flip} data-align={align} data-fixed={fixed}
+		style:top={fixed ? `${pos.top}px` : undefined} style:left={fixed ? `${pos.left}px` : undefined} style:min-width={fixed ? `${pos.minWidth}px` : undefined}
+	>{@render children()}</div>
+{/if}
+
+<style>
+	.tr-popover {
+		position: absolute; z-index: 50; top: calc(100% + 4px); left: 0; min-width: 100%;
+		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);
+		animation: rise var(--tr-dur) var(--tr-ease);
+	}
+	.tr-popover[data-align='end'] { left: auto; right: 0; }
+	.tr-popover[data-flip='true'] { top: auto; bottom: calc(100% + 4px); }
+	.tr-popover[data-fixed='true'] { position: fixed; z-index: 300; right: auto; bottom: auto; }
+	@keyframes rise { from { opacity: 0; transform: translateY(-4px); } }
+</style>

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

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    open?: boolean;
+    /** `refocus` is true when closed by Escape, so the owner can return focus to its trigger. */
+    onclose?: (refocus: boolean) => void;
+    align?: 'start' | 'end';
+    /** Viewport-fixed positioning against `anchor`. */
+    fixed?: boolean;
+    anchor?: HTMLElement | null;
+    children: Snippet;
+};
+declare const Popover: import("svelte").Component<$$ComponentProps, {}, "open">;
+type Popover = ReturnType<typeof Popover>;
+export default Popover;

package/dist/components/ProgressBar.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	let {
+		value,
+		intent = 'primary',
+		label,
+		showValue = false,
+		size = 'md'
+	}: { value?: number; intent?: 'primary' | 'success' | 'warning' | 'danger' | 'neutral'; label?: string; showValue?: boolean; size?: 'sm' | 'md' } = $props();
+	const pct = $derived(value == null ? undefined : Math.min(100, Math.max(0, value)));
+	const id = $props.id();
+</script>
+
+<div class="pb" data-intent={intent} data-size={size}>
+	{#if label || showValue}
+		<div class="meta"><span id="{id}-l">{label}</span>{#if showValue && pct != null}<span class="num">{Math.round(pct)}%</span>{/if}</div>
+	{/if}
+	<div class="bar" role="progressbar" aria-labelledby={label ? `${id}-l` : undefined} aria-label={label ? undefined : 'Progress'} aria-valuemin="0" aria-valuemax="100" aria-valuenow={pct}>
+		<div class="fill" data-indeterminate={pct == null} style:width={pct == null ? undefined : `${pct}%`}></div>
+	</div>
+</div>
+
+<style>
+	.pb { --c: var(--tr-primary); }
+	.pb[data-intent='success'] { --c: var(--tr-success); }
+	.pb[data-intent='warning'] { --c: var(--tr-warning); }
+	.pb[data-intent='danger'] { --c: var(--tr-danger); }
+	.pb[data-intent='neutral'] { --c: var(--tr-on-surface-variant); }
+	.meta { display: flex; justify-content: space-between; margin-bottom: 4px; font-size: var(--tr-text-sm); font-weight: 600; color: var(--tr-on-surface-variant); }
+	.num { font-variant-numeric: tabular-nums; color: var(--tr-on-surface); }
+	.bar { position: relative; height: 6px; overflow: hidden; border-radius: 3px; background: var(--tr-surface-container-highest); }
+	.pb[data-size='sm'] .bar { height: 4px; }
+	.fill { height: 100%; border-radius: inherit; background: var(--c); transition: width var(--tr-dur) var(--tr-ease); }
+	.fill[data-indeterminate='true'] { position: absolute; width: 40%; animation: slide 1.2s var(--tr-ease) infinite; }
+	@keyframes slide { from { left: -40%; } to { left: 100%; } }
+</style>

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

@@ -0,0 +1,10 @@
+type $$ComponentProps = {
+    value?: number;
+    intent?: 'primary' | 'success' | 'warning' | 'danger' | 'neutral';
+    label?: string;
+    showValue?: boolean;
+    size?: 'sm' | 'md';
+};
+declare const ProgressBar: import("svelte").Component<$$ComponentProps, {}, "">;
+type ProgressBar = ReturnType<typeof ProgressBar>;
+export default ProgressBar;

package/dist/components/RadioGroup.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	let {
+		options,
+		value = $bindable(),
+		label,
+		orientation = 'vertical',
+		disabled = false
+	}: {
+		options: { value: string; label: string; disabled?: boolean }[];
+		value?: string;
+		label?: string;
+		orientation?: 'vertical' | 'horizontal';
+		disabled?: boolean;
+	} = $props();
+	const name = $props.id();
+</script>
+
+<fieldset class="rg" data-orientation={orientation} {disabled}>
+	{#if label}<legend class="tr-label">{label}</legend>{/if}
+	{#each options as o (o.value)}
+		<label class="opt" data-disabled={o.disabled || disabled}>
+			<input type="radio" class="tr-visually-hidden" {name} value={o.value} bind:group={value} disabled={o.disabled} />
+			<span class="dot"></span>{o.label}
+		</label>
+	{/each}
+</fieldset>
+
+<style>
+	.rg { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
+	.rg[data-orientation='horizontal'] { flex-flow: row wrap; gap: 4px 16px; }
+	.rg legend { padding: 0; }
+	.opt { display: inline-flex; align-items: center; gap: 8px; min-height: 24px; cursor: pointer; }
+	.opt[data-disabled='true'] { opacity: 0.5; cursor: not-allowed; }
+	.dot { flex: none; width: 18px; height: 18px; border: 1px solid var(--tr-outline); border-radius: 50%; background: var(--tr-surface-container-low); display: grid; place-items: center; transition: box-shadow var(--tr-dur) var(--tr-ease); }
+	.dot::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--tr-primary); transform: scale(0); transition: transform var(--tr-dur-fast) var(--tr-ease); }
+	input:checked + .dot { border-color: var(--tr-primary); }
+	input:checked + .dot::after { transform: scale(1); }
+	input:focus-visible + .dot { box-shadow: var(--tr-focus-ring); }
+</style>

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

@@ -0,0 +1,14 @@
+type $$ComponentProps = {
+    options: {
+        value: string;
+        label: string;
+        disabled?: boolean;
+    }[];
+    value?: string;
+    label?: string;
+    orientation?: 'vertical' | 'horizontal';
+    disabled?: boolean;
+};
+declare const RadioGroup: import("svelte").Component<$$ComponentProps, {}, "value">;
+type RadioGroup = ReturnType<typeof RadioGroup>;
+export default RadioGroup;

package/dist/components/Section.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import Icon from '../icons/Icon.svelte';
+	import type { IconName } from '../icons/paths.js';
+
+	let {
+		title,
+		subtitle,
+		icon,
+		collapsible = false,
+		open = $bindable(true),
+		actions,
+		children
+	}: {
+		title: string;
+		subtitle?: string;
+		icon?: IconName;
+		collapsible?: boolean;
+		open?: boolean;
+		/** Right-aligned header controls. */
+		actions?: Snippet;
+		children: Snippet;
+	} = $props();
+	const id = $props.id();
+</script>
+
+<section class="sec" aria-labelledby="{id}-t">
+	<header>
+		{#if collapsible}
+			<button type="button" class="tog" aria-expanded={open} aria-controls="{id}-b" onclick={() => (open = !open)}>
+				<Icon name="chevron-right" />
+				<span class="tx"><span class="t" id="{id}-t">{title}</span>{#if subtitle}<span class="s">{subtitle}</span>{/if}</span>
+			</button>
+		{:else}
+			{#if icon}<Icon name={icon} size={20} />{/if}
+			<span class="tx"><span class="t" id="{id}-t">{title}</span>{#if subtitle}<span class="s">{subtitle}</span>{/if}</span>
+		{/if}
+		{#if actions}<div class="act">{@render actions()}</div>{/if}
+	</header>
+	{#if open}<div class="body" id="{id}-b">{@render children()}</div>{/if}
+</section>
+
+<style>
+	.sec { background: var(--tr-surface-container-low); border: 1px solid var(--tr-outline-variant); border-radius: var(--tr-radius-md); box-shadow: var(--tr-elevation-1); overflow: hidden; }
+	header { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 8px 0 12px; background: var(--tr-surface-container); }
+	.sec:has(.body) header { border-bottom: 1px solid var(--tr-outline-variant); }
+	.tog { display: flex; align-items: center; gap: 8px; flex: 1; min-height: 40px; margin-left: -4px; padding: 0 4px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
+	.tog:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--tr-primary); }
+	.tog :global(svg) { transition: transform var(--tr-dur) var(--tr-ease); }
+	.tog[aria-expanded='true'] :global(svg) { transform: rotate(90deg); }
+	.tx { display: flex; flex-direction: column; flex: 1; line-height: 1.25; }
+	.t { font-weight: 700; }
+	.s { font-size: var(--tr-text-sm); color: var(--tr-on-surface-variant); }
+	.act { display: flex; gap: 4px; margin-left: auto; }
+	.body { padding: 16px; }
+</style>

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

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+import type { IconName } from '../icons/paths.js';
+type $$ComponentProps = {
+    title: string;
+    subtitle?: string;
+    icon?: IconName;
+    collapsible?: boolean;
+    open?: boolean;
+    /** Right-aligned header controls. */
+    actions?: Snippet;
+    children: Snippet;
+};
+declare const Section: import("svelte").Component<$$ComponentProps, {}, "open">;
+type Section = ReturnType<typeof Section>;
+export default Section;

package/dist/components/SegmentedControl.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+	import Icon from '../icons/Icon.svelte';
+	import type { IconName } from '../icons/paths.js';
+
+	let {
+		options,
+		value = $bindable(),
+		size = 'md',
+		fill = false,
+		label = 'Options'
+	}: {
+		options: { value: string; label?: string; /** Name for icon-only options (defaults to the value). */ ariaLabel?: string; icon?: IconName; disabled?: boolean }[];
+		value?: string;
+		size?: 'sm' | 'md';
+		fill?: boolean;
+		label?: string;
+	} = $props();
+
+	let root: HTMLDivElement;
+	const current = $derived(value ?? options.find((o) => !o.disabled)?.value);
+
+	function onKey(e: KeyboardEvent) {
+		const enabled = options.filter((o) => !o.disabled);
+		const i = enabled.findIndex((o) => o.value === current);
+		const d = e.key === 'ArrowRight' || e.key === 'ArrowDown' ? 1 : e.key === 'ArrowLeft' || e.key === 'ArrowUp' ? -1 : 0;
+		if (!d) return;
+		e.preventDefault();
+		const next = enabled[(i + d + enabled.length) % enabled.length];
+		value = next.value;
+		root.querySelector<HTMLElement>(`[data-v="${CSS.escape(next.value)}"]`)?.focus();
+	}
+</script>
+
+<!-- svelte-ignore a11y_interactive_supports_focus -->
+<div class="seg" bind:this={root} role="radiogroup" aria-label={label} data-size={size} data-fill={fill} onkeydown={onKey}>
+	{#each options as o (o.value)}
+		<button
+			type="button" role="radio" data-v={o.value} aria-label={o.label ? undefined : (o.ariaLabel ?? o.value)} aria-checked={o.value === current} disabled={o.disabled}
+			tabindex={o.value === current ? 0 : -1} onclick={() => (value = o.value)}
+		>
+			{#if o.icon}<Icon name={o.icon} />{/if}{#if o.label}{o.label}{/if}
+		</button>
+	{/each}
+</div>
+
+<style>
+	.seg { display: inline-flex; padding: 2px; gap: 2px; background: var(--tr-surface-container-high); border: 1px solid var(--tr-outline-variant); border-radius: var(--tr-radius-md); }
+	.seg[data-fill='true'] { display: flex; }
+	.seg[data-fill='true'] button { flex: 1; }
+	button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: calc(var(--tr-control-h) - 6px); min-width: 28px; padding: 0 12px; border: 0; border-radius: var(--tr-radius-sm); background: none; color: var(--tr-on-surface-variant); font: 600 var(--tr-text-md) var(--tr-font-sans); cursor: pointer; transition: background-color var(--tr-dur) var(--tr-ease), color var(--tr-dur) var(--tr-ease); }
+	.seg[data-size='sm'] button { height: 20px; padding: 0 8px; font-size: var(--tr-text-sm); }
+	button:hover:not(:disabled):not([aria-checked='true']) { background: var(--tr-surface-container-highest); color: var(--tr-on-surface); }
+	button[aria-checked='true'] { background: var(--tr-surface); color: var(--tr-primary); box-shadow: var(--tr-elevation-1); }
+	button:focus-visible { outline: none; box-shadow: var(--tr-focus-ring); }
+	button:disabled { opacity: 0.45; cursor: not-allowed; }
+</style>

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

@@ -0,0 +1,17 @@
+import type { IconName } from '../icons/paths.js';
+type $$ComponentProps = {
+    options: {
+        value: string;
+        label?: string; /** Name for icon-only options (defaults to the value). */
+        ariaLabel?: string;
+        icon?: IconName;
+        disabled?: boolean;
+    }[];
+    value?: string;
+    size?: 'sm' | 'md';
+    fill?: boolean;
+    label?: string;
+};
+declare const SegmentedControl: import("svelte").Component<$$ComponentProps, {}, "value">;
+type SegmentedControl = ReturnType<typeof SegmentedControl>;
+export default SegmentedControl;

package/dist/components/Select.svelte

@@ -0,0 +1,204 @@
+<script lang="ts" generics="V extends string | number">
+	import { tick } from 'svelte';
+	import Icon from '../icons/Icon.svelte';
+	import type { IconName } from '../icons/paths.js';
+
+	type Option = { value: V; label: string; icon?: IconName; disabled?: boolean };
+
+	let {
+		options,
+		value = $bindable(),
+		label,
+		ariaLabel,
+		placeholder = 'Select…',
+		searchable = true,
+		disabled = false,
+		error,
+		size = 'md'
+	}: {
+		options: Option[];
+		value?: V;
+		label?: string;
+		/** Accessible name when no visible `label` is shown. */
+		ariaLabel?: string;
+		placeholder?: string;
+		searchable?: boolean;
+		disabled?: boolean;
+		error?: string;
+		size?: 'sm' | 'md' | 'lg';
+	} = $props();
+
+	const uid = $props.id();
+	let open = $state(false);
+	let query = $state('');
+	let active = $state(0);
+	let root: HTMLDivElement;
+	let trigger: HTMLButtonElement;
+	let inputEl = $state<HTMLInputElement>();
+	let listEl = $state<HTMLElement>();
+
+	const filtered = $derived(options.filter((o) => o.label.toLowerCase().includes(query.trim().toLowerCase())));
+	const selected = $derived(options.find((o) => o.value === value));
+
+	async function show() {
+		if (disabled) return;
+		open = true;
+		query = '';
+		active = Math.max(0, options.findIndex((o) => o.value === value));
+		await tick();
+		(searchable ? inputEl : listEl)?.focus();
+	}
+	function close(refocus = true) {
+		open = false;
+		if (refocus) trigger?.focus();
+	}
+	function choose(o?: Option) {
+		if (!o || o.disabled) return;
+		value = o.value;
+		close();
+	}
+	function step(dir: 1 | -1) {
+		const n = filtered.length;
+		if (!n) return;
+		let i = active;
+		for (let k = 0; k < n; k++) {
+			i = (i + dir + n) % n;
+			if (!filtered[i].disabled) break;
+		}
+		active = i;
+	}
+	function onKey(e: KeyboardEvent) {
+		switch (e.key) {
+			case 'ArrowDown': step(1); break;
+			case 'ArrowUp': step(-1); break;
+			case 'Home': active = 0; break;
+			case 'End': active = filtered.length - 1; break;
+			case 'Enter': choose(filtered[active]); break;
+			case 'Escape': close(); break;
+			case 'Tab': close(false); return;
+			default: return;
+		}
+		e.preventDefault();
+	}
+	function onTriggerKey(e: KeyboardEvent) {
+		if (['ArrowDown', 'ArrowUp', 'Enter', ' '].includes(e.key)) {
+			e.preventDefault();
+			show();
+		}
+	}
+	$effect(() => {
+		if (open) document.getElementById(`${uid}-opt-${active}`)?.scrollIntoView({ block: 'nearest' });
+	});
+</script>
+
+<svelte:window onpointerdown={(e) => open && !root.contains(e.target as Node) && close(false)} />
+
+<div class="tr-field" bind:this={root}>
+	{#if label}<span class="tr-label" id="{uid}-label">{label}</span>{/if}
+	<button
+		bind:this={trigger}
+		type="button"
+		class="trigger"
+		data-size={size}
+		data-invalid={!!error}
+		{disabled}
+		role="combobox"
+		aria-haspopup="listbox"
+		aria-expanded={open}
+		aria-controls="{uid}-list"
+		aria-label={label ? undefined : ariaLabel}
+		aria-labelledby={label ? `${uid}-label` : undefined}
+		onclick={() => (open ? close() : show())}
+		onkeydown={onTriggerKey}
+	>
+		{#if selected?.icon}<Icon name={selected.icon} />{/if}
+		<span class="value" data-placeholder={!selected}>{selected?.label ?? placeholder}</span>
+		<Icon name="chevron-down" />
+	</button>
+	{#if error}<div class="tr-hint" data-error="true">{error}</div>{/if}
+
+	{#if open}
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<div class="popover" onkeydown={onKey}>
+			{#if searchable}
+				<div class="filter">
+					<Icon name="search" />
+					<input
+						bind:this={inputEl}
+						bind:value={query}
+						oninput={() => (active = 0)}
+						placeholder="Filter…"
+						aria-label="Filter options"
+						aria-controls="{uid}-list"
+						aria-activedescendant="{uid}-opt-{active}"
+					/>
+				</div>
+			{/if}
+			<ul
+				id="{uid}-list"
+				role="listbox"
+				tabindex="-1"
+				bind:this={listEl}
+				aria-labelledby={label ? `${uid}-label` : undefined}
+			>
+				{#each filtered as o, i (o.value)}
+					<!-- svelte-ignore a11y_click_events_have_key_events -->
+					<li
+						id="{uid}-opt-{i}"
+						role="option"
+						aria-selected={o.value === value}
+						aria-disabled={o.disabled}
+						data-active={i === active}
+						onpointermove={() => (active = i)}
+						onclick={() => choose(o)}
+					>
+						{#if o.icon}<Icon name={o.icon} />{/if}
+						<span>{o.label}</span>
+						{#if o.value === value}<Icon name="tick" />{/if}
+					</li>
+				{:else}
+					<li class="empty" role="presentation">No matches</li>
+				{/each}
+			</ul>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.tr-field { position: relative; }
+	.trigger {
+		display: flex; align-items: center; gap: 6px; width: 100%;
+		height: var(--tr-control-h); padding: 0 10px; text-align: left;
+		background: var(--tr-surface-container-low); color: var(--tr-on-surface);
+		border: 1px solid var(--tr-outline-variant); border-radius: var(--tr-radius-sm);
+		font: inherit; cursor: pointer;
+		transition: background-color var(--tr-dur) var(--tr-ease), box-shadow var(--tr-dur) var(--tr-ease);
+	}
+	.trigger[data-size='sm'] { height: var(--tr-control-h-sm); font-size: var(--tr-text-sm); }
+	.trigger[data-size='lg'] { height: var(--tr-control-h-lg); }
+	.trigger:hover:not(:disabled) { background: var(--tr-surface-container); border-color: var(--tr-outline); }
+	.trigger:focus-visible, .trigger[aria-expanded='true'] {
+		outline: none; background: var(--tr-surface-container); border-color: var(--tr-primary);
+		box-shadow: inset 0 -2px 0 var(--tr-primary), var(--tr-focus-ring);
+	}
+	.trigger[data-invalid='true'] { border-color: var(--tr-danger); }
+	.trigger:disabled { opacity: 0.5; cursor: not-allowed; }
+	.value { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+	.value[data-placeholder='true'] { color: var(--tr-placeholder); }
+
+	.popover {
+		position: absolute; z-index: 50; top: calc(100% + 4px); left: 0; right: 0; min-width: 180px;
+		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); overflow: hidden;
+	}
+	.filter { display: flex; align-items: center; gap: 6px; height: var(--tr-control-h); padding: 0 10px; border-bottom: 1px solid var(--tr-outline-variant); color: var(--tr-on-surface-variant); }
+	.filter input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; color: var(--tr-on-surface); font: inherit; }
+	.filter input::placeholder { color: var(--tr-placeholder); }
+	ul { margin: 0; padding: 4px; list-style: none; max-height: 240px; overflow-y: auto; outline: none; }
+	li { display: flex; align-items: center; gap: 8px; height: var(--tr-control-h); padding: 0 8px; border-radius: var(--tr-radius-sm); cursor: pointer; }
+	li span { flex: 1; }
+	li[data-active='true'] { background: var(--tr-surface-container-highest); }
+	li[aria-selected='true'] { color: var(--tr-primary); 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/Select.svelte.d.ts

@@ -0,0 +1,41 @@
+import type { IconName } from '../icons/paths.js';
+declare function $$render<V extends string | number>(): {
+    props: {
+        options: {
+            value: V;
+            label: string;
+            icon?: IconName;
+            disabled?: boolean;
+        }[];
+        value?: V;
+        label?: string;
+        /** Accessible name when no visible `label` is shown. */
+        ariaLabel?: string;
+        placeholder?: string;
+        searchable?: boolean;
+        disabled?: boolean;
+        error?: string;
+        size?: "sm" | "md" | "lg";
+    };
+    exports: {};
+    bindings: "value";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<V extends string | number> {
+    props(): ReturnType<typeof $$render<V>>['props'];
+    events(): ReturnType<typeof $$render<V>>['events'];
+    slots(): ReturnType<typeof $$render<V>>['slots'];
+    bindings(): "value";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <V extends string | number>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<V>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<V>['props']>, ReturnType<__sveltets_Render<V>['events']>, ReturnType<__sveltets_Render<V>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<V>['bindings']>;
+    } & ReturnType<__sveltets_Render<V>['exports']>;
+    <V extends string | number>(internal: unknown, props: ReturnType<__sveltets_Render<V>['props']> & {}): ReturnType<__sveltets_Render<V>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Select: $$IsomorphicComponent;
+type Select<V extends string | number> = InstanceType<typeof Select<V>>;
+export default Select;