@ruckc/truss-ui 1.2.0 → 1.4.0

package/dist/components/Tabs.svelte

@@ -1,29 +1,54 @@
 <script lang="ts">
-	import type { Snippet } from 'svelte';
+	import { tick, type Snippet } from 'svelte';
 	import Icon from '../icons/Icon.svelte';
 	import type { IconName } from '../icons/paths.js';
+	import ContextMenu from './ContextMenu.svelte';
+	import MenuButton from './MenuButton.svelte';
+	import { rovingTarget } from '../roving.js';
+	import type { MenuEntry } from '../types.js';
+
+	type Tab = {
+		id: string;
+		label: string;
+		icon?: IconName;
+		disabled?: boolean;
+		/** Document variant: shows a close button (and enables Delete / Ctrl+W, middle-click and the context-menu entries). */
+		closable?: boolean;
+		/** Document variant: unsaved changes (a dot, plus "unsaved changes" in the accessible name). */
+		dirty?: boolean;
+		/** Document variant: renders the tab as a real link (client routing, open in new tab). */
+		href?: string;
+	};
 
 	let {
-		tabs,
+		tabs = $bindable(),
 		value = $bindable(),
 		panel,
 		label = 'Sections',
-		variant = 'line'
+		variant = 'line',
+		onclose,
+		onreorder
 	}: {
-		tabs: { id: string; label: string; icon?: IconName; disabled?: boolean }[];
+		/** In the document variant the list is reordered in place (and `onreorder` fires), so bind it or apply `onreorder` yourself. */
+		tabs: Tab[];
 		value?: string;
 		/** Rendered for the active tab only (lazy). */
 		panel: Snippet<[id: string]>;
 		label?: string;
-		variant?: 'line' | 'pill';
+		variant?: 'line' | 'pill' | 'document';
+		/** Document variant: a closable tab was asked to close (button, middle-click, Delete / Ctrl+W, context menu). Remove it from `tabs` in response. */
+		onclose?: (id: string) => void;
+		/** Document variant: the new order of tab ids after a drag or Ctrl+Shift+Arrow. */
+		onreorder?: (ids: string[]) => void;
 	} = $props();
 
 	const uid = $props.id();
-	const current = $derived(value ?? tabs.find((t) => !t.disabled)?.id);
-	let list: HTMLDivElement;
+	const doc = $derived(variant === 'document');
+	const current = $derived(doc ? (tabs.some((t) => t.id === value) ? value : tabs.find((t) => !t.disabled)?.id) : (value ?? tabs.find((t) => !t.disabled)?.id));
+	let list = $state<HTMLDivElement>();
 
 	function onKey(e: KeyboardEvent) {
-		const btns = [...list.querySelectorAll<HTMLButtonElement>('[role="tab"]:not(:disabled)')];
+		const btns = [...list!.querySelectorAll<HTMLButtonElement>('[role="tab"]:not(:disabled)')];
 		const i = btns.indexOf(document.activeElement as HTMLButtonElement);
 		const to = e.key === 'ArrowRight' ? (i + 1) % btns.length : e.key === 'ArrowLeft' ? (i - 1 + btns.length) % btns.length : e.key === 'Home' ? 0 : e.key === 'End' ? btns.length - 1 : -1;
 		if (to < 0) return;
@@ -31,44 +56,239 @@
 		btns[to].focus();
 		value = btns[to].dataset.id; // automatic activation
 	}
+
+	// ───────────── document variant
+	let announcement = $state('');
+	let overflowing = $state(false);
+	let canLeft = $state(false);
+	let canRight = $state(false);
+	let drag = $state<{ id: string; ins: number } | null>(null);
+	let press: { id: string; x: number; started: boolean } | null = null;
+
+	const tabEl = (id: string) => list?.querySelector<HTMLElement>(`[role="tab"][data-id="${CSS.escape(id)}"]`);
+
+	function measure() {
+		if (!list) return;
+		overflowing = list.scrollWidth > list.clientWidth + 1;
+		canLeft = list.scrollLeft > 0;
+		canRight = list.scrollLeft + list.clientWidth < list.scrollWidth - 1;
+	}
+	$effect(() => {
+		if (!doc || !list) return;
+		void tabs.map((t) => t.label + (t.dirty ? '*' : '') + (t.closable ? 'x' : '')).join();
+		measure();
+		const ro = new ResizeObserver(measure);
+		ro.observe(list);
+		return () => ro.disconnect();
+	});
+	// keep the active tab in view
+	$effect(() => {
+		if (!doc || !current) return;
+		const id = current;
+		tick().then(() => tabEl(id)?.scrollIntoView({ block: 'nearest', inline: 'nearest' }));
+	});
+	const scrollBy = (dir: 1 | -1) => list?.scrollBy({ left: dir * Math.max(120, list.clientWidth * 0.6), behavior: 'smooth' });
+
+	function close(id: string) {
+		const i = tabs.findIndex((t) => t.id === id);
+		if (i < 0 || !tabs[i].closable) return;
+		const focused = tabEl(id)?.matches(':focus');
+		const neighbour = (tabs[i + 1] ?? tabs[i - 1])?.id;
+		onclose?.(id);
+		if (focused && neighbour) tick().then(() => !tabs.some((t) => t.id === id) && tabEl(neighbour)?.focus());
+	}
+	const closeAll = (ids: string[]) => ids.forEach(close);
+
+	function move(id: string, to: number) {
+		const from = tabs.findIndex((t) => t.id === id);
+		to = Math.max(0, Math.min(tabs.length - 1, to));
+		if (from < 0 || from === to) return;
+		const refocus = tabEl(id)?.matches(':focus');
+		const next = [...tabs];
+		next.splice(to, 0, ...next.splice(from, 1));
+		tabs = next;
+		announcement = `${next[to].label}, moved to position ${to + 1} of ${next.length}`;
+		onreorder?.(next.map((t) => t.id));
+		if (refocus) tick().then(() => tabEl(id)?.focus());
+	}
+
+	function onDocKey(e: KeyboardEvent) {
+		const el = (e.target as HTMLElement).closest<HTMLElement>('[role="tab"]');
+		if (!el) return;
+		const id = el.dataset.id!;
+		const mod = e.ctrlKey || e.metaKey;
+		const i = tabs.findIndex((t) => t.id === id);
+		if (mod && e.shiftKey && ['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(e.key)) {
+			e.preventDefault();
+			move(id, e.key === 'ArrowLeft' ? i - 1 : e.key === 'ArrowRight' ? i + 1 : e.key === 'Home' ? 0 : tabs.length - 1);
+		} else if (e.key === 'Delete' || (mod && !e.shiftKey && e.key.toLowerCase() === 'w')) {
+			if (!tabs[i]?.closable) return;
+			e.preventDefault();
+			close(id);
+		} else {
+			const to = rovingTarget(e, list!, { selector: '[role="tab"]' });
+			if (!to) return;
+			e.preventDefault();
+			to.focus();
+			if (to.tagName !== 'A') value = to.dataset.id; // link tabs navigate on Enter instead
+		}
+	}
+
+	function onPointerDown(e: PointerEvent, id: string) {
+		if (e.button !== 0 || (e.target as HTMLElement).closest('.close')) return;
+		press = { id, x: e.clientX, started: false };
+	}
+	function onPointerMove(e: PointerEvent) {
+		if (!press || !list) return;
+		if (!press.started) {
+			if (Math.abs(e.clientX - press.x) < 5) return;
+			press.started = true;
+			list.setPointerCapture(e.pointerId);
+		}
+		const mids = [...list.querySelectorAll<HTMLElement>('.tab')].map((n) => { const r = n.getBoundingClientRect(); return r.left + r.width / 2; });
+		drag = { id: press.id, ins: mids.filter((m) => m < e.clientX).length };
+	}
+	function endPointer() {
+		if (press?.started && drag) {
+			const from = tabs.findIndex((t) => t.id === drag!.id);
+			move(drag.id, from < drag.ins ? drag.ins - 1 : drag.ins);
+		}
+		press = null;
+		drag = null;
+	}
+
+	const menuFor = (id: string): MenuEntry[] => {
+		const i = tabs.findIndex((t) => t.id === id);
+		const closable = (xs: Tab[]) => xs.filter((t) => t.closable).map((t) => t.id);
+		const others = closable(tabs.filter((t) => t.id !== id));
+		const right = closable(tabs.slice(i + 1));
+		return [
+			{ label: 'Close', disabled: !tabs[i]?.closable, onselect: () => close(id) },
+			{ label: 'Close others', disabled: !others.length, onselect: () => closeAll(others) },
+			{ label: 'Close to the right', disabled: !right.length, onselect: () => closeAll(right) }
+		];
+	};
+	const allTabs = $derived<MenuEntry[]>(
+		tabs.map((t) => ({ label: t.dirty ? `${t.label} (unsaved)` : t.label, icon: t.icon, disabled: t.disabled, href: t.href, onselect: t.href ? undefined : () => { value = t.id; tick().then(() => tabEl(t.id)?.focus()); } }))
+	);
 </script>
 
-<div class="tabs" data-variant={variant}>
-	<!-- svelte-ignore a11y_interactive_supports_focus -->
-	<div class="list" role="tablist" aria-label={label} bind:this={list} onkeydown={onKey}>
-		{#each tabs as t (t.id)}
-			<button
-				type="button" role="tab" id="{uid}-tab-{t.id}" data-id={t.id} disabled={t.disabled}
-				aria-selected={t.id === current} aria-controls="{uid}-panel-{t.id}" tabindex={t.id === current ? 0 : -1}
-				onclick={() => (value = t.id)}
-			>
-				{#if t.icon}<Icon name={t.icon} />{/if}{t.label}
-			</button>
-		{/each}
-	</div>
+{#snippet tabBody(t: Tab)}
+	{#if t.icon}<Icon name={t.icon} />{/if}{t.label}{#if t.dirty}<span class="dot" aria-hidden="true"></span><span class="tr-visually-hidden">, unsaved changes</span>{/if}
+{/snippet}
+
+{#snippet panelView()}
 	{#if current}
 		<div class="panel" role="tabpanel" id="{uid}-panel-{current}" aria-labelledby="{uid}-tab-{current}" tabindex="0">
 			{@render panel(current)}
 		</div>
 	{/if}
-</div>
+{/snippet}
+
+{#if doc}
+	<div class="tabs" data-variant="document">
+		<div class="strip">
+			{#if overflowing}
+				<button type="button" class="scroll" aria-label="Scroll tabs left" tabindex="-1" disabled={!canLeft} onclick={() => scrollBy(-1)}><Icon name="chevron-left" /></button>
+			{/if}
+			<!-- svelte-ignore a11y_interactive_supports_focus -->
+			<div
+				class="list" role="tablist" aria-label={label} bind:this={list} onkeydown={onDocKey} onscroll={measure}
+				onpointermove={onPointerMove} onpointerup={endPointer} onpointercancel={endPointer}
+			>
+				{#each tabs as t, i (t.id)}
+					<ContextMenu items={menuFor(t.id)} label="{t.label} actions">
+						<!-- svelte-ignore a11y_no_static_element_interactions -->
+						<div
+							class="tab" role="presentation" data-id={t.id} data-active={t.id === current} data-dragging={drag?.id === t.id}
+							data-drop={drag && drag.ins === i ? 'before' : drag && drag.ins === tabs.length && i === tabs.length - 1 ? 'after' : undefined}
+							onpointerdown={(e) => onPointerDown(e, t.id)}
+							onmousedown={(e) => { if (e.button === 1) e.preventDefault(); }}
+							onauxclick={(e) => { if (e.button === 1 && t.closable) { e.preventDefault(); close(t.id); } }}
+						>
+							<svelte:element
+								this={t.href && !t.disabled ? 'a' : 'button'} class="main" role="tab" id="{uid}-tab-{t.id}" data-id={t.id}
+								type={t.href && !t.disabled ? undefined : 'button'} href={t.href && !t.disabled ? t.href : undefined} disabled={t.disabled || undefined}
+								aria-selected={t.id === current} aria-controls="{uid}-panel-{t.id}" tabindex={t.id === current ? 0 : -1}
+								onclick={(e: MouseEvent) => { if (!(e.ctrlKey || e.metaKey || e.shiftKey)) value = t.id; }}
+							>{@render tabBody(t)}</svelte:element>
+							{#if t.closable}
+								<button type="button" class="close" tabindex="-1" aria-label="Close {t.label}" onclick={() => close(t.id)}><Icon name="cross" /></button>
+							{/if}
+						</div>
+					</ContextMenu>
+				{/each}
+			</div>
+			{#if overflowing}
+				<button type="button" class="scroll" aria-label="Scroll tabs right" tabindex="-1" disabled={!canRight} onclick={() => scrollBy(1)}><Icon name="chevron-right" /></button>
+				<MenuButton label="All tabs" icon="chevron-down" iconOnly variant="minimal" size="sm" align="end" items={allTabs} />
+			{/if}
+		</div>
+		<div class="tr-visually-hidden" role="status" aria-live="polite">{announcement}</div>
+		{@render panelView()}
+	</div>
+{:else}
+	<div class="tabs" data-variant={variant}>
+		<!-- svelte-ignore a11y_interactive_supports_focus -->
+		<div class="list" role="tablist" aria-label={label} bind:this={list} onkeydown={onKey}>
+			{#each tabs as t (t.id)}
+				<button
+					type="button" role="tab" id="{uid}-tab-{t.id}" data-id={t.id} disabled={t.disabled}
+					aria-selected={t.id === current} aria-controls="{uid}-panel-{t.id}" tabindex={t.id === current ? 0 : -1}
+					onclick={() => (value = t.id)}
+				>
+					{#if t.icon}<Icon name={t.icon} />{/if}{t.label}
+				</button>
+			{/each}
+		</div>
+		{@render panelView()}
+	</div>
+{/if}
 
 <style>
 	.list { display: flex; gap: 2px; border-bottom: 1px solid var(--tr-outline-variant); overflow-x: auto; }
-	button {
+	[role='tab'] {
 		position: relative; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border: 0; background: none;
-		color: var(--tr-on-surface-variant); font: 600 var(--tr-text-md) var(--tr-font-sans); white-space: nowrap; cursor: pointer;
+		color: var(--tr-on-surface-variant); font: 600 var(--tr-text-md) var(--tr-font-sans); white-space: nowrap; cursor: pointer; text-decoration: none;
 		border-radius: var(--tr-radius-sm) var(--tr-radius-sm) 0 0; transition: background-color var(--tr-dur) var(--tr-ease), color var(--tr-dur) var(--tr-ease);
 	}
-	button:hover:not(:disabled) { background: var(--tr-surface-container-high); color: var(--tr-on-surface); }
-	button:disabled { opacity: 0.45; cursor: not-allowed; }
-	button:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--tr-primary); }
-	button[aria-selected='true'] { color: var(--tr-primary); }
-	button[aria-selected='true']::after { content: ''; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--tr-primary); }
+	[role='tab']:hover:not(:disabled) { background: var(--tr-surface-container-high); color: var(--tr-on-surface); }
+	[role='tab']:disabled { opacity: 0.45; cursor: not-allowed; }
+	[role='tab']:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--tr-primary); }
+	[role='tab'][aria-selected='true'] { color: var(--tr-primary-text, var(--tr-primary)); }
+	[role='tab'][aria-selected='true']::after { content: ''; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--tr-primary); }
 	.panel { padding: 16px 4px; outline: none; }
 	.panel:focus-visible { box-shadow: var(--tr-focus-ring); border-radius: var(--tr-radius-sm); }
 	[data-variant='pill'] .list { border: 0; gap: 4px; }
-	[data-variant='pill'] button { height: var(--tr-control-h); border-radius: var(--tr-radius-pill); }
-	[data-variant='pill'] button[aria-selected='true'] { background: var(--tr-primary-container); color: var(--tr-on-primary-container); }
-	[data-variant='pill'] button[aria-selected='true']::after { display: none; }
+	[data-variant='pill'] [role='tab'] { height: var(--tr-control-h); border-radius: var(--tr-radius-pill); }
+	[data-variant='pill'] [role='tab'][aria-selected='true'] { background: var(--tr-primary-container); color: var(--tr-on-primary-container); }
+	[data-variant='pill'] [role='tab'][aria-selected='true']::after { display: none; }
+
+	/* document variant */
+	.strip { display: flex; align-items: stretch; gap: 2px; border-bottom: 1px solid var(--tr-outline-variant); }
+	[data-variant='document'] .list { flex: 1; min-width: 0; border: 0; gap: 0; scrollbar-width: none; user-select: none; }
+	[data-variant='document'] .list::-webkit-scrollbar { display: none; }
+	.tab { position: relative; display: inline-flex; flex: none; align-items: center; border: 1px solid transparent; border-bottom: 0; border-radius: var(--tr-radius-sm) var(--tr-radius-sm) 0 0; margin-bottom: -1px; }
+	.tab:hover { background: var(--tr-surface-container-high); }
+	.tab[data-active='true'] { background: var(--tr-surface); border-color: var(--tr-outline-variant); }
+	.tab[data-active='true']::before { content: ''; position: absolute; left: -1px; right: -1px; top: -1px; height: 2px; border-radius: 2px 2px 0 0; background: var(--tr-primary); }
+	.tab[data-dragging='true'] { opacity: 0.55; }
+	.tab[data-drop='before'] { box-shadow: inset 2px 0 0 var(--tr-primary); }
+	.tab[data-drop='after'] { box-shadow: inset -2px 0 0 var(--tr-primary); }
+	[data-variant='document'] .main { height: 34px; padding: 0 8px 0 12px; border-radius: 0; background: none; max-width: 240px; }
+	[data-variant='document'] .tab:not(:has(.close)) .main { padding-right: 12px; }
+	[data-variant='document'] .main:hover:not(:disabled) { background: none; }
+	[data-variant='document'] .main[aria-selected='true']::after { display: none; }
+	.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tr-warning); flex: none; }
+	.close, .scroll {
+		display: inline-flex; align-items: center; justify-content: center; flex: none; width: 20px; height: 20px; padding: 0; border: 0; border-radius: var(--tr-radius-sm);
+		background: none; color: var(--tr-on-surface-variant); cursor: pointer; font-size: 12px;
+	}
+	.close { margin-right: 6px; opacity: 0; }
+	.tab:hover .close, .tab[data-active='true'] .close, .close:focus-visible { opacity: 1; }
+	@media (hover: none) { .close { opacity: 1; } }
+	.close:hover, .scroll:hover:not(:disabled) { background: var(--tr-surface-container-highest); color: var(--tr-on-surface); }
+	.close:focus-visible, .scroll:focus-visible { outline: none; box-shadow: var(--tr-focus-ring); }
+	.scroll { width: 28px; height: auto; align-self: center; min-height: 28px; }
+	.scroll:disabled { opacity: 0.35; cursor: default; }
 </style>

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

@@ -1,18 +1,30 @@
-import type { Snippet } from 'svelte';
+import { type Snippet } from 'svelte';
 import type { IconName } from '../icons/paths.js';
+type Tab = {
+    id: string;
+    label: string;
+    icon?: IconName;
+    disabled?: boolean;
+    /** Document variant: shows a close button (and enables Delete / Ctrl+W, middle-click and the context-menu entries). */
+    closable?: boolean;
+    /** Document variant: unsaved changes (a dot, plus "unsaved changes" in the accessible name). */
+    dirty?: boolean;
+    /** Document variant: renders the tab as a real link (client routing, open in new tab). */
+    href?: string;
+};
 type $$ComponentProps = {
-    tabs: {
-        id: string;
-        label: string;
-        icon?: IconName;
-        disabled?: boolean;
-    }[];
+    /** In the document variant the list is reordered in place (and `onreorder` fires), so bind it or apply `onreorder` yourself. */
+    tabs: Tab[];
     value?: string;
     /** Rendered for the active tab only (lazy). */
     panel: Snippet<[id: string]>;
     label?: string;
-    variant?: 'line' | 'pill';
+    variant?: 'line' | 'pill' | 'document';
+    /** Document variant: a closable tab was asked to close (button, middle-click, Delete / Ctrl+W, context menu). Remove it from `tabs` in response. */
+    onclose?: (id: string) => void;
+    /** Document variant: the new order of tab ids after a drag or Ctrl+Shift+Arrow. */
+    onreorder?: (ids: string[]) => void;
 };
-declare const Tabs: import("svelte").Component<$$ComponentProps, {}, "value">;
+declare const Tabs: import("svelte").Component<$$ComponentProps, {}, "value" | "tabs">;
 type Tabs = ReturnType<typeof Tabs>;
 export default Tabs;

package/dist/components/Tag.svelte

@@ -43,14 +43,14 @@
 </span>
 
 <style>
-	.tag { --c: var(--tr-on-surface-variant); --cc: var(--tr-surface-container-high); --on: var(--tr-on-surface); display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: var(--tr-radius-sm); background: var(--cc); color: var(--on); font: 600 var(--tr-text-sm) var(--tr-font-display); letter-spacing: var(--tr-display-tracking); text-transform: var(--tr-display-transform); white-space: nowrap; }
+	.tag { --c: var(--tr-on-surface-variant); --ct: var(--c); --cc: var(--tr-surface-container-high); --on: var(--tr-on-surface); display: inline-flex; align-items: center; gap: 4px; height: var(--tr-control-h-sm); padding: 0 8px; border-radius: var(--tr-radius-sm); background: var(--cc); color: var(--on); font: 600 var(--tr-text-sm) var(--tr-font-display); letter-spacing: var(--tr-display-tracking); text-transform: var(--tr-display-transform); white-space: nowrap; }
 	.tag[data-size='sm'] { height: 20px; padding: 0 6px; font-size: var(--tr-text-xs); }
-	.tag[data-intent='primary'] { --c: var(--tr-primary); --cc: var(--tr-primary-container); --on: var(--tr-on-primary-container); }
-	.tag[data-intent='secondary'] { --c: var(--tr-secondary); --cc: var(--tr-secondary-container); --on: var(--tr-on-secondary-container); }
-	.tag[data-intent='success'] { --c: var(--tr-success); --cc: var(--tr-success-container); --on: var(--tr-on-success-container); }
-	.tag[data-intent='warning'] { --c: var(--tr-warning); --cc: var(--tr-warning-container); --on: var(--tr-on-warning-container); }
-	.tag[data-intent='danger'] { --c: var(--tr-danger); --cc: var(--tr-danger-container); --on: var(--tr-on-danger-container); }
-	.tag[data-variant='outlined'] { background: transparent; box-shadow: inset 0 0 0 1px var(--c); color: var(--c); }
+	.tag[data-intent='primary'] { --c: var(--tr-primary); --ct: var(--tr-primary-text, var(--tr-primary)); --cc: var(--tr-primary-container); --on: var(--tr-on-primary-container); }
+	.tag[data-intent='secondary'] { --c: var(--tr-secondary); --ct: var(--tr-secondary-text, var(--tr-secondary)); --cc: var(--tr-secondary-container); --on: var(--tr-on-secondary-container); }
+	.tag[data-intent='success'] { --c: var(--tr-success); --ct: var(--tr-success); --cc: var(--tr-success-container); --on: var(--tr-on-success-container); }
+	.tag[data-intent='warning'] { --c: var(--tr-warning); --ct: var(--tr-warning); --cc: var(--tr-warning-container); --on: var(--tr-on-warning-container); }
+	.tag[data-intent='danger'] { --c: var(--tr-danger); --ct: var(--tr-danger); --cc: var(--tr-danger-container); --on: var(--tr-on-danger-container); }
+	.tag[data-variant='outlined'] { background: transparent; box-shadow: inset 0 0 0 1px var(--c); color: var(--ct); }
 	.main { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
 	.tag:has(.main:hover) { background: color-mix(in srgb, var(--on) 10%, var(--cc)); }
 	.main:focus-visible, .x:focus-visible { outline: none; box-shadow: var(--tr-focus-ring); border-radius: var(--tr-radius-sm); }

package/dist/components/TagInput.svelte

@@ -68,5 +68,5 @@
 
 <style>
 	.ti { flex-wrap: wrap; padding: 3px 6px; gap: 4px; cursor: text; }
-	.ti .tr-bare { flex: 1 1 80px; height: 24px; }
+	.ti .tr-bare { flex: 1 1 80px; height: var(--tr-control-h-sm); }
 </style>

package/dist/components/Text.svelte

@@ -27,7 +27,7 @@
 	.tx[data-size='lg'] { font-size: var(--tr-text-lg); }
 	.tx[data-size='xl'] { font-size: var(--tr-text-xl); }
 	.tx[data-tone='muted'] { color: var(--tr-on-surface-variant); }
-	.tx[data-tone='primary'] { color: var(--tr-primary); }
+	.tx[data-tone='primary'] { color: var(--tr-primary-text, var(--tr-primary)); }
 	.tx[data-tone='success'] { color: var(--tr-success); }
 	.tx[data-tone='warning'] { color: var(--tr-warning); }
 	.tx[data-tone='danger'] { color: var(--tr-danger); }

package/dist/components/Toaster.svelte

@@ -1,17 +1,48 @@
 <script lang="ts">
 	import { fly } from 'svelte/transition';
-	import { toasts } from '../toast.svelte.js';
+	import { toasts, type Toast } from '../toast.svelte.js';
 	import Icon from '../icons/Icon.svelte';
 	import Button from './Button.svelte';
 
 	const glyph = { primary: 'info', success: 'success', warning: 'warning', danger: 'error' } as const;
+
+	// The timer pauses while the pointer is over a toast or focus is inside it, and resumes once both have left.
+	function enter(id: number) {
+		toasts.pause(id);
+	}
+	function leave(e: { currentTarget: EventTarget | null }, id: number) {
+		const el = e.currentTarget as HTMLElement;
+		if (!el.contains(document.activeElement)) toasts.resume(id);
+	}
+	function focusOut(e: FocusEvent, id: number) {
+		const el = e.currentTarget as HTMLElement;
+		const next = e.relatedTarget as Node | null;
+		if (next && el.contains(next)) return;
+		if (!el.matches(':hover')) toasts.resume(id);
+	}
+	function act(t: Toast) {
+		t.action?.run();
+		toasts.dismiss(t.id);
+	}
 </script>
 
 <div class="tr-toaster" role="region" aria-label="Notifications">
 	{#each toasts.items as t (t.id)}
-		<div class="toast" data-intent={t.intent} role={t.intent === 'danger' ? 'alert' : 'status'} transition:fly={{ y: 16, duration: 160 }}>
+		<div
+			class="toast"
+			data-intent={t.intent}
+			role={t.intent === 'danger' ? 'alert' : 'status'}
+			transition:fly={{ y: 16, duration: 160 }}
+			onpointerenter={() => enter(t.id)}
+			onpointerleave={(e) => leave(e, t.id)}
+			onfocusin={() => enter(t.id)}
+			onfocusout={(e) => focusOut(e, t.id)}
+		>
 			<span class="glyph"><Icon name={glyph[t.intent]} size={20} /></span>
 			<span class="msg">{t.message}</span>
+			{#if t.action}
+				<Button variant="minimal" intent="primary" size="sm" onclick={() => act(t)}>{t.action.label}</Button>
+			{/if}
 			<Button variant="minimal" intent="neutral" size="sm" icon="cross" aria-label="Dismiss" onclick={() => toasts.dismiss(t.id)} />
 		</div>
 	{/each}

package/dist/components/ToggleChip.svelte

@@ -43,7 +43,7 @@
 <style>
 	.chip {
 		--cc: var(--tr-primary-container); --on: var(--tr-on-primary-container);
-		display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px;
+		display: inline-flex; align-items: center; gap: 4px; height: calc(var(--tr-control-h) - 4px); padding: 0 10px;
 		border: 1px solid var(--tr-outline); border-radius: var(--tr-radius-pill);
 		background: transparent; color: var(--tr-on-surface-variant);
 		font: 600 var(--tr-text-sm) var(--tr-font-display); letter-spacing: var(--tr-display-tracking); text-transform: var(--tr-display-transform);

package/dist/components/Toolbar.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { setContext, type Snippet } from 'svelte';
+	import { roving } from '../roving.js';
+
+	let {
+		label,
+		orientation = 'horizontal',
+		children
+	}: {
+		/** Accessible name (required: a page can hold several toolbars). */
+		label: string;
+		orientation?: 'horizontal' | 'vertical';
+		children: Snippet;
+	} = $props();
+
+	setContext('tr-toolbar', () => orientation);
+</script>
+
+<!-- One tab stop for the whole bar; arrow keys move between its controls (roving tabindex). -->
+<div class="tb" role="toolbar" aria-label={label} aria-orientation={orientation} data-orientation={orientation} use:roving={() => ({ orientation })}>
+	{@render children()}
+</div>
+
+<style>
+	.tb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
+	.tb[data-orientation='vertical'] { display: inline-flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
+</style>

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

@@ -0,0 +1,10 @@
+import { type Snippet } from 'svelte';
+type $$ComponentProps = {
+    /** Accessible name (required: a page can hold several toolbars). */
+    label: string;
+    orientation?: 'horizontal' | 'vertical';
+    children: Snippet;
+};
+declare const Toolbar: import("svelte").Component<$$ComponentProps, {}, "">;
+type Toolbar = ReturnType<typeof Toolbar>;
+export default Toolbar;

package/dist/components/ToolbarSeparator.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { getContext } from 'svelte';
+
+	// The rule runs across the toolbar's main axis, so its own orientation is the opposite.
+	const toolbar = getContext<(() => 'horizontal' | 'vertical') | undefined>('tr-toolbar');
+	const own = $derived(toolbar?.() === 'vertical' ? 'horizontal' : 'vertical');
+</script>
+
+<div class="sep" role="separator" aria-orientation={own} data-orientation={own}></div>
+
+<style>
+	.sep { flex: none; background: var(--tr-outline-variant); }
+	.sep[data-orientation='vertical'] { align-self: stretch; width: 1px; min-height: 1.25em; margin: 0 4px; }
+	.sep[data-orientation='horizontal'] { height: 1px; margin: 4px 0; }
+</style>

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

@@ -0,0 +1,3 @@
+declare const ToolbarSeparator: import("svelte").Component<Record<string, never>, {}, "">;
+type ToolbarSeparator = ReturnType<typeof ToolbarSeparator>;
+export default ToolbarSeparator;

package/dist/components/Tooltip.svelte

@@ -1,13 +1,22 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
+	import TooltipTip from './TooltipTip.svelte';
+	import { ariaKeyShortcuts } from '../keys.js';
 
 	let {
 		text,
+		content,
+		shortcut,
 		placement = 'top',
 		delay = 350,
 		children
 	}: {
-		text: string;
+		/** Plain-text hint. Optional when `content` or `shortcut` is given. */
+		text?: string;
+		/** Rich (non-interactive) content shown in the tip; the tip is `pointer-events: none`, so put no links or buttons in it. */
+		content?: Snippet;
+		/** A key combination (`mod+k`, `g h`) shown as keys inside the tip, so it is part of the accessible description. `mod` is ⌘ on Apple platforms and Ctrl elsewhere. */
+		shortcut?: string;
 		placement?: 'top' | 'bottom' | 'left' | 'right';
 		/** ms before showing on hover (focus shows immediately). */
 		delay?: number;
@@ -16,31 +25,20 @@
 
 	const id = $props.id();
 	let open = $state(false);
-	let ready = $state(false);
-	let x = $state(0);
-	let y = $state(0);
-	let host: HTMLSpanElement;
-	let tip = $state<HTMLDivElement>();
+	let host = $state<HTMLSpanElement>();
 	let timer: ReturnType<typeof setTimeout>;
 
 	const show = (now = false) => { clearTimeout(timer); timer = setTimeout(() => (open = true), now ? 0 : delay); };
-	const hide = () => { clearTimeout(timer); open = false; ready = false; };
+	const hide = () => { clearTimeout(timer); open = false; };
 	$effect(() => () => clearTimeout(timer));
 
+	// expose the shortcut to assistive tech on the wrapped control
 	$effect(() => {
-		if (!open || !tip) return;
-		const r = host.getBoundingClientRect();
-		const t = tip.getBoundingClientRect();
-		let p = placement;
-		if (p === 'top' && r.top < t.height + 10) p = 'bottom';
-		else if (p === 'bottom' && r.bottom + t.height + 10 > innerHeight) p = 'top';
-		else if (p === 'left' && r.left < t.width + 10) p = 'right';
-		else if (p === 'right' && r.right + t.width + 10 > innerWidth) p = 'left';
-		const cx = r.left + r.width / 2 - t.width / 2, cy = r.top + r.height / 2 - t.height / 2;
-		const pos = { top: [cx, r.top - t.height - 6], bottom: [cx, r.bottom + 6], left: [r.left - t.width - 6, cy], right: [r.right + 6, cy] }[p];
-		x = Math.min(Math.max(4, pos[0]), innerWidth - t.width - 4);
-		y = Math.max(4, pos[1]);
-		ready = true;
+		const el = host?.firstElementChild;
+		const v = shortcut ? ariaKeyShortcuts(shortcut) : undefined;
+		if (!el || !v || el.hasAttribute('aria-keyshortcuts')) return;
+		el.setAttribute('aria-keyshortcuts', v);
+		return () => el.removeAttribute('aria-keyshortcuts');
 	});
 </script>
 
@@ -51,16 +49,9 @@
 	{@render children()}
 </span>
 {#if open}
-	<div class="tip" role="tooltip" {id} bind:this={tip} style:left="{x}px" style:top="{y}px" data-ready={ready}>{text}</div>
+	<TooltipTip anchor={host!} {id} {text} {content} {shortcut} {placement} />
 {/if}
 
 <style>
 	.host { display: inline-flex; }
-	.tip {
-		position: fixed; z-index: 200; max-width: 260px; padding: 4px 8px; pointer-events: none; visibility: hidden;
-		background: var(--tr-on-surface); color: var(--tr-surface); border-radius: var(--tr-radius-sm);
-		font: 500 var(--tr-text-sm) / 1.35 var(--tr-font-sans); box-shadow: var(--tr-elevation-2);
-	}
-	.tip[data-ready='true'] { visibility: visible; animation: fade var(--tr-dur-fast) var(--tr-ease); }
-	@keyframes fade { from { opacity: 0; } }
 </style>

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

@@ -1,6 +1,11 @@
 import type { Snippet } from 'svelte';
 type $$ComponentProps = {
-    text: string;
+    /** Plain-text hint. Optional when `content` or `shortcut` is given. */
+    text?: string;
+    /** Rich (non-interactive) content shown in the tip; the tip is `pointer-events: none`, so put no links or buttons in it. */
+    content?: Snippet;
+    /** A key combination (`mod+k`, `g h`) shown as keys inside the tip, so it is part of the accessible description. `mod` is ⌘ on Apple platforms and Ctrl elsewhere. */
+    shortcut?: string;
     placement?: 'top' | 'bottom' | 'left' | 'right';
     /** ms before showing on hover (focus shows immediately). */
     delay?: number;