@ruckc/truss-ui 0.0.0-stage → 1.1.1

package/LICENSE

@@ -0,0 +1,24 @@
+MIT License
+
+Copyright (c) 2026 Curtis Ruck
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+The bundled fonts, Inter and JetBrains Mono, are licensed separately under the
+SIL Open Font License 1.1; see src/lib/fonts/LICENSE-*.txt.

package/README.md

@@ -1,3 +1,104 @@
-# Temporary Holding Version
+# Truss UI
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+[![CI](https://github.com/ruckc/truss-ui/actions/workflows/ci.yml/badge.svg)](https://github.com/ruckc/truss-ui/actions/workflows/ci.yml)
+[![License: MIT](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
+
+A **Svelte 5 / SvelteKit design system** that blends Material 3's tonal surfaces, elevation and rounding with Blueprint's density, 32px controls and hairline structure — built from scratch, with no UI-library dependencies.
+
+**Docs and live demo: <https://truss.ruck.io>**
+
+- **69 components**: forms and pickers (no native `<select>`, date or time inputs), data tables with virtual scrolling, trees, menus, dialogs, an application shell and more.
+- **Zero runtime dependencies** in the core (peer: `svelte`). Fonts are bundled and served by *your* build.
+- **Accessible by construction**: names, ARIA, focus and complete keyboard maps, audited for every combination of every component's options.
+- **Themeable**: one set of `--tr-*` CSS tokens, light and dark, drives everything, including charts, graphs and maps.
+- **Tested like a library**: over 16,000 real-browser tests sweep option matrices and verify behaviour.
+
+## Packages
+
+| Package | What | Dependencies |
+| --- | --- | --- |
+| [`@ruckc/truss-ui`](https://truss.ruck.io/docs/getting-started/) | Core: tokens, fonts, icons, components | peer: `svelte` |
+| [`@ruckc/truss-chart`](https://truss.ruck.io/docs/packages/) | Line, bar, donut, histogram, sparkline (SVG) | peer: `svelte` |
+| [`@ruckc/truss-graph`](https://truss.ruck.io/docs/packages/) | Node/edge editor, custom nodes, 5 edge routers, minimap | peers: `svelte`, `@ruckc/truss-ui` |
+| [`@ruckc/truss-ol`](https://truss.ruck.io/docs/packages/) | OpenLayers map styled by the tokens | peers: `svelte`, `@ruckc/truss-ui`, `ol` |
+
+## Quick start
+
+```sh
+npm install @ruckc/truss-ui
+```
+
+```svelte
+<!-- +layout.svelte -->
+<script lang="ts">
+  import '@ruckc/truss-ui/styles.css';
+  import { Toaster } from '@ruckc/truss-ui';
+  let { children } = $props();
+</script>
+
+{@render children()}
+<Toaster />
+```
+
+```svelte
+<script lang="ts">
+  import { Button, Input, DatePicker, toasts } from '@ruckc/truss-ui';
+  let name = $state('');
+  let due = $state<string>();
+</script>
+
+<Input label="Name" bind:value={name} />
+<DatePicker label="Due" bind:value={due} />
+<Button onclick={() => toasts.success(`Saved ${name}`)}>Save</Button>
+```
+
+See **[Getting started](https://truss.ruck.io/docs/getting-started/)**, the **[component reference](https://truss.ruck.io/docs/)** (a live playground and generated API table for every component), **[Theming](https://truss.ruck.io/docs/theming/)** and **[Accessibility](https://truss.ruck.io/docs/accessibility/)**.
+
+## Highlights
+
+- **DataTable**: sticky header, resizable and sortable columns, tree rows, checkbox selection, column menu, optional pagination *or* virtual scrolling with infinite loading, per-column filters (a filter row, a heading menu opened by right-click or Shift+F10, or both) and a remote mode for server-side filtering and sorting.
+- **Date and time**: `Calendar`, `DatePicker`, `DateRangePicker`, `TimePicker`, `DateTimePicker`, `DateTimeRangePicker` (one combined popover), `TimeRangePicker`, `DurationInput`.
+- **InputGroup**: joins inputs, selects, pickers, buttons and addons into one seamless control.
+- **Graph**: custom node components, named ports on any side, edge routing (`bezier`, `straight`, `step`, `smoothstep`, `avoid`) and a minimap.
+- **Charts**: horizontal, stacked, 100% stacked and negative bars; histograms with drag-to-brush; every chart has a table view and keyboard readout.
+
+## Development
+
+```sh
+npm install
+npm run dev          # demo + docs site at http://localhost:5173
+npm run check        # svelte-check
+npm run package:all  # build all four packages into their dist/ folders
+npm run build        # regenerate the API docs and prerender the site (adapter-static)
+npm test             # the full browser suite (starts its own dev server)
+```
+
+Repository layout:
+
+```
+src/lib/              @ruckc/truss-ui (core)
+packages/charts/      @ruckc/truss-chart
+packages/graph/       @ruckc/truss-graph
+packages/map/         @ruckc/truss-ol
+src/routes/           the docs and demo site
+src/harness/, tests/  the component matrix and behavioural specs
+scripts/              API-reference and token extraction for the docs
+```
+
+The API reference is **generated from the source** (`npm run docs`), so it can't drift from the code. The test suite is described in [Testing](https://truss.ruck.io/docs/testing/).
+
+## Releases
+
+Every push to `main` that passes CI is released automatically: the version is worked out from the commit messages ([Conventional Commits](https://www.conventionalcommits.org)), all four packages are published to npm at that same version, and a GitHub release and `CHANGELOG.md` entry are created.
+
+| Commit | Release |
+| --- | --- |
+| `feat: …` | minor |
+| `fix:`, `perf:`, `revert:`, `docs:`, `refactor:`, `test:`, `build:`, `ci:`, `chore:`, `style:` | patch |
+| any type with `!` (e.g. `feat!: …`) or a `BREAKING CHANGE:` footer | major |
+
+Commits that don't follow the format (no `type:` prefix) don't trigger a release on their own. Publishing uses npm [trusted publishing](https://docs.npmjs.com/trusted-publishers) (OIDC from the `ci.yml` workflow), so no npm token is stored anywhere. Each package's trusted publisher on npmjs.com must be for workflow `ci.yml` with the **`npm publish`** action allowed (the default is only `npm stage publish`, which npm rejects with `403 OIDC permission denied for this action`).
+
+## Licence
+
+MIT © Curtis Ruck. The bundled Inter and JetBrains Mono fonts are under the SIL Open Font License 1.1.

package/dist/color.d.ts

@@ -0,0 +1,21 @@
+export type RGB = {
+    r: number;
+    g: number;
+    b: number;
+};
+export type HSV = {
+    h: number;
+    s: number;
+    v: number;
+};
+declare const clamp: (n: number, lo?: number, hi?: number) => number;
+/** Accepts #rgb, #rgba, #rrggbb, #rrggbbaa (with or without #). */
+export declare function parseHex(text: string): (RGB & {
+    a: number;
+}) | null;
+export declare const toHex: ({ r, g, b }: RGB, a?: number) => string;
+export declare function rgbToHsv({ r, g, b }: RGB): HSV;
+export declare function hsvToRgb({ h, s, v }: HSV): RGB;
+/** WCAG relative luminance contrast ratio. */
+export declare function contrast(a: RGB, b: RGB): number;
+export { clamp };

package/dist/color.js

@@ -0,0 +1,32 @@
+const clamp = (n, lo = 0, hi = 1) => Math.min(hi, Math.max(lo, n));
+const h2 = (n) => Math.round(n).toString(16).padStart(2, '0');
+/** Accepts #rgb, #rgba, #rrggbb, #rrggbbaa (with or without #). */
+export function parseHex(text) {
+    let t = text.trim().replace(/^#/, '');
+    if (/^[0-9a-f]{3,4}$/i.test(t))
+        t = t.replace(/./g, '$&$&');
+    if (!/^([0-9a-f]{6}|[0-9a-f]{8})$/i.test(t))
+        return null;
+    const n = (i) => parseInt(t.slice(i, i + 2), 16);
+    return { r: n(0), g: n(2), b: n(4), a: t.length === 8 ? n(6) / 255 : 1 };
+}
+export const toHex = ({ r, g, b }, a) => `#${h2(r)}${h2(g)}${h2(b)}${a != null && a < 1 ? h2(a * 255) : ''}`;
+export function rgbToHsv({ r, g, b }) {
+    const R = r / 255, G = g / 255, B = b / 255;
+    const max = Math.max(R, G, B), min = Math.min(R, G, B), d = max - min;
+    let h = 0;
+    if (d)
+        h = max === R ? ((G - B) / d) % 6 : max === G ? (B - R) / d + 2 : (R - G) / d + 4;
+    return { h: (h * 60 + 360) % 360, s: max ? d / max : 0, v: max };
+}
+export function hsvToRgb({ h, s, v }) {
+    const f = (n) => { const k = (n + h / 60) % 6; return v - v * s * Math.max(0, Math.min(k, 4 - k, 1)); };
+    return { r: Math.round(f(5) * 255), g: Math.round(f(3) * 255), b: Math.round(f(1) * 255) };
+}
+/** WCAG relative luminance contrast ratio. */
+export function contrast(a, b) {
+    const L = ({ r, g, b }) => [r, g, b].map((c) => { const s = c / 255; return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4; }).reduce((t, v, i) => t + v * [0.2126, 0.7152, 0.0722][i], 0);
+    const [x, y] = [L(a), L(b)].sort((p, q) => q - p);
+    return (x + 0.05) / (y + 0.05);
+}
+export { clamp };

package/dist/components/Accordion.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import Icon from '../icons/Icon.svelte';
+
+	let {
+		items,
+		open = $bindable([]),
+		multiple = false,
+		body
+	}: {
+		items: { id: string; title: string; disabled?: boolean }[];
+		/** Ids of expanded items. */
+		open?: string[];
+		multiple?: boolean;
+		body: Snippet<[id: string]>;
+	} = $props();
+
+	const uid = $props.id();
+	let root: HTMLDivElement;
+
+	function toggle(id: string) {
+		if (open.includes(id)) open = open.filter((x) => x !== id);
+		else open = multiple ? [...open, id] : [id];
+	}
+	function onKey(e: KeyboardEvent) {
+		const btns = [...root.querySelectorAll<HTMLButtonElement>('.hd:not(:disabled)')];
+		const i = btns.indexOf(document.activeElement as HTMLButtonElement);
+		const to = e.key === 'ArrowDown' ? (i + 1) % btns.length : e.key === 'ArrowUp' ? (i - 1 + btns.length) % btns.length : e.key === 'Home' ? 0 : e.key === 'End' ? btns.length - 1 : -1;
+		if (to < 0) return;
+		e.preventDefault();
+		btns[to].focus();
+	}
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div class="acc" bind:this={root} onkeydown={onKey}>
+	{#each items as it (it.id)}
+		{@const isOpen = open.includes(it.id)}
+		<div class="item" data-open={isOpen}>
+			<h3>
+				<button type="button" class="hd" id="{uid}-h-{it.id}" aria-expanded={isOpen} aria-controls="{uid}-p-{it.id}" disabled={it.disabled} onclick={() => toggle(it.id)}>
+					<Icon name="chevron-right" />{it.title}
+				</button>
+			</h3>
+			<div class="wrap" data-open={isOpen}>
+				<div class="inner">
+					<div class="content" id="{uid}-p-{it.id}" role="region" aria-labelledby="{uid}-h-{it.id}" inert={!isOpen}>
+						{@render body(it.id)}
+					</div>
+				</div>
+			</div>
+		</div>
+	{/each}
+</div>
+
+<style>
+	.acc { border: 1px solid var(--tr-outline-variant); border-radius: var(--tr-radius-md); overflow: hidden; background: var(--tr-surface-container-low); }
+	.item + .item { border-top: 1px solid var(--tr-outline-variant); }
+	h3 { margin: 0; font-size: inherit; }
+	.hd { display: flex; align-items: center; gap: 8px; width: 100%; height: 36px; padding: 0 12px; border: 0; background: var(--tr-surface-container); color: var(--tr-on-surface); font: 600 var(--tr-text-md) var(--tr-font-sans); text-align: left; cursor: pointer; }
+	.hd:hover:not(:disabled) { background: var(--tr-surface-container-high); }
+	.hd:disabled { opacity: 0.45; cursor: not-allowed; }
+	.hd:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--tr-primary); }
+	.hd :global(svg) { transition: transform var(--tr-dur) var(--tr-ease); }
+	.item[data-open='true'] .hd :global(svg) { transform: rotate(90deg); }
+	.wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--tr-dur) var(--tr-ease); }
+	.wrap[data-open='true'] { grid-template-rows: 1fr; border-top: 1px solid var(--tr-outline-variant); }
+	.inner { overflow: hidden; }
+	.content { padding: 12px; }
+</style>

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

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    items: {
+        id: string;
+        title: string;
+        disabled?: boolean;
+    }[];
+    /** Ids of expanded items. */
+    open?: string[];
+    multiple?: boolean;
+    body: Snippet<[id: string]>;
+};
+declare const Accordion: import("svelte").Component<$$ComponentProps, {}, "open">;
+type Accordion = ReturnType<typeof Accordion>;
+export default Accordion;

package/dist/components/Alert.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import Button from './Button.svelte';
+	import Dialog from './Dialog.svelte';
+	import Icon from '../icons/Icon.svelte';
+
+	let {
+		open = $bindable(false),
+		title,
+		intent = 'primary',
+		confirmLabel = 'OK',
+		cancelLabel,
+		onconfirm,
+		oncancel,
+		children
+	}: {
+		open?: boolean;
+		title: string;
+		intent?: 'primary' | 'warning' | 'danger';
+		confirmLabel?: string;
+		/** Omit for a single-button acknowledgement. */
+		cancelLabel?: string;
+		onconfirm?: () => void;
+		oncancel?: () => void;
+		children: Snippet;
+	} = $props();
+	const glyph = { primary: 'info', warning: 'warning', danger: 'error' } as const;
+</script>
+
+<Dialog bind:open {title} size="sm" alert onclose={() => {}}>
+	<div class="row" data-intent={intent}>
+		<span class="ic"><Icon name={glyph[intent]} size={20} /></span>
+		<div>{@render children()}</div>
+	</div>
+	{#snippet footer()}
+		{#if cancelLabel}<Button variant="minimal" intent="neutral" onclick={() => { open = false; oncancel?.(); }}>{cancelLabel}</Button>{/if}
+		<Button intent={intent === 'primary' ? 'primary' : intent} onclick={() => { open = false; onconfirm?.(); }}>{confirmLabel}</Button>
+	{/snippet}
+</Dialog>
+
+<style>
+	.row { display: flex; gap: 12px; line-height: 1.45; }
+	.ic { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--tr-primary-container); color: var(--tr-on-primary-container); }
+	.row[data-intent='warning'] .ic { background: var(--tr-warning-container); color: var(--tr-on-warning-container); }
+	.row[data-intent='danger'] .ic { background: var(--tr-danger-container); color: var(--tr-on-danger-container); }
+</style>

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

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    open?: boolean;
+    title: string;
+    intent?: 'primary' | 'warning' | 'danger';
+    confirmLabel?: string;
+    /** Omit for a single-button acknowledgement. */
+    cancelLabel?: string;
+    onconfirm?: () => void;
+    oncancel?: () => void;
+    children: Snippet;
+};
+declare const Alert: import("svelte").Component<$$ComponentProps, {}, "open">;
+type Alert = ReturnType<typeof Alert>;
+export default Alert;

package/dist/components/Avatar.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	let {
+		name,
+		src,
+		size = 'md',
+		status
+	}: { name: string; src?: string; size?: 'sm' | 'md' | 'lg'; status?: 'success' | 'warning' | 'danger' | 'neutral' } = $props();
+
+	const initials = $derived(name.trim().split(/\s+/).slice(0, 2).map((w) => w[0]?.toUpperCase() ?? '').join(''));
+	const hue = $derived([...name].reduce((a, c) => (a * 31 + c.charCodeAt(0)) >>> 0, 7) % 5);
+	let broken = $state(false);
+</script>
+
+<span class="av" data-size={size} data-hue={hue} role="img" aria-label={name} title={name}>
+	{#if src && !broken}<img {src} alt="" onerror={() => (broken = true)} />{:else}<span class="ini" aria-hidden="true">{initials}</span>{/if}
+	{#if status}<span class="st" data-status={status}></span>{/if}
+</span>
+
+<style>
+	.av { --cc: var(--tr-primary-container); --on: var(--tr-on-primary-container); position: relative; display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--cc); color: var(--on); font: 700 var(--tr-text-sm) var(--tr-font-sans); }
+	.av[data-size='sm'] { width: 24px; height: 24px; font-size: var(--tr-text-xs); }
+	.av[data-size='lg'] { width: 40px; height: 40px; font-size: var(--tr-text-md); }
+	.av[data-hue='1'] { --cc: var(--tr-success-container); --on: var(--tr-on-success-container); }
+	.av[data-hue='2'] { --cc: var(--tr-warning-container); --on: var(--tr-on-warning-container); }
+	.av[data-hue='3'] { --cc: var(--tr-danger-container); --on: var(--tr-on-danger-container); }
+	.av[data-hue='4'] { --cc: var(--tr-surface-container-highest); --on: var(--tr-on-surface); }
+	img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
+	.st { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--tr-surface); background: var(--tr-outline); }
+	.st[data-status='success'] { background: var(--tr-success); }
+	.st[data-status='warning'] { background: var(--tr-warning); }
+	.st[data-status='danger'] { background: var(--tr-danger); }
+</style>

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

@@ -0,0 +1,9 @@
+type $$ComponentProps = {
+    name: string;
+    src?: string;
+    size?: 'sm' | 'md' | 'lg';
+    status?: 'success' | 'warning' | 'danger' | 'neutral';
+};
+declare const Avatar: import("svelte").Component<$$ComponentProps, {}, "">;
+type Avatar = ReturnType<typeof Avatar>;
+export default Avatar;

package/dist/components/AvatarGroup.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import Avatar from './Avatar.svelte';
+	let { people, max = 4, size = 'md' }: { people: { name: string; src?: string }[]; max?: number; size?: 'sm' | 'md' | 'lg' } = $props();
+	const shown = $derived(people.slice(0, max));
+	const more = $derived(people.length - shown.length);
+</script>
+
+<span class="grp" role="group" aria-label="{people.length} people">
+	{#each shown as p (p.name)}<span class="slot"><Avatar {...p} {size} /></span>{/each}
+	{#if more > 0}<span class="slot"><span class="more" data-size={size} aria-label="{more} more">+{more}</span></span>{/if}
+</span>
+
+<style>
+	.grp { display: inline-flex; }
+	.slot { display: inline-flex; margin-left: -8px; border-radius: 50%; box-shadow: 0 0 0 2px var(--tr-surface); }
+	.slot:first-child { margin-left: 0; }
+	.more { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--tr-surface-container-highest); color: var(--tr-on-surface); font: 700 var(--tr-text-sm) var(--tr-font-sans); }
+	.more[data-size='sm'] { width: 24px; height: 24px; font-size: var(--tr-text-xs); }
+	.more[data-size='lg'] { width: 40px; height: 40px; }
+</style>

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

@@ -0,0 +1,11 @@
+type $$ComponentProps = {
+    people: {
+        name: string;
+        src?: string;
+    }[];
+    max?: number;
+    size?: 'sm' | 'md' | 'lg';
+};
+declare const AvatarGroup: import("svelte").Component<$$ComponentProps, {}, "">;
+type AvatarGroup = ReturnType<typeof AvatarGroup>;
+export default AvatarGroup;

package/dist/components/Badge.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let {
+		intent = 'neutral',
+		dot = true,
+		children
+	}: { intent?: 'neutral' | 'primary' | 'success' | 'warning' | 'danger'; dot?: boolean; children: Snippet } = $props();
+</script>
+
+<span class="tr-badge" data-intent={intent}>
+	{#if dot}<span class="dot" aria-hidden="true"></span>{/if}{@render children()}
+</span>
+
+<style>
+	.tr-badge {
+		--c: var(--tr-on-surface-variant); --cc: var(--tr-surface-container-high); --on: var(--tr-on-surface);
+		display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px;
+		border-radius: var(--tr-radius-pill); background: var(--cc); color: var(--on);
+		font-size: var(--tr-text-sm); font-weight: 600; white-space: nowrap;
+	}
+	.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
+	.tr-badge[data-intent='primary'] { --c: var(--tr-primary); --cc: var(--tr-primary-container); --on: var(--tr-on-primary-container); }
+	.tr-badge[data-intent='success'] { --c: var(--tr-success); --cc: var(--tr-success-container); --on: var(--tr-on-success-container); }
+	.tr-badge[data-intent='warning'] { --c: var(--tr-warning); --cc: var(--tr-warning-container); --on: var(--tr-on-warning-container); }
+	.tr-badge[data-intent='danger'] { --c: var(--tr-danger); --cc: var(--tr-danger-container); --on: var(--tr-on-danger-container); }
+</style>

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

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    intent?: 'neutral' | 'primary' | 'success' | 'warning' | 'danger';
+    dot?: boolean;
+    children: Snippet;
+};
+declare const Badge: import("svelte").Component<$$ComponentProps, {}, "">;
+type Badge = ReturnType<typeof Badge>;
+export default Badge;

package/dist/components/Breadcrumbs.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import Icon from '../icons/Icon.svelte';
+	import MenuButton from './MenuButton.svelte';
+	import type { MenuEntry } from '../types.js';
+
+	type Crumb = { label: string; href?: string; onclick?: () => void };
+	let { items, max = 4 }: { items: Crumb[]; /** Collapse the middle into a “…” menu beyond this many. */ max?: number } = $props();
+
+	const collapsed = $derived(items.length > max);
+	const head = $derived(collapsed ? items.slice(0, 1) : items.slice(0, -1));
+	const hidden = $derived(collapsed ? items.slice(1, items.length - (max - 2)) : []);
+	const tail = $derived(collapsed ? items.slice(items.length - (max - 2), -1) : []);
+	const last = $derived(items.at(-1));
+	const menu = $derived<MenuEntry[]>(hidden.map((c) => ({ label: c.label, onselect: () => (c.href ? (location.href = c.href) : c.onclick?.()) })));
+</script>
+
+{#snippet crumb(c: Crumb)}
+	{#if c.href}<a href={c.href}>{c.label}</a>{:else if c.onclick}<button type="button" onclick={c.onclick}>{c.label}</button>{:else}<span>{c.label}</span>{/if}
+{/snippet}
+
+<nav aria-label="Breadcrumb">
+	<ol>
+		{#each head as c}<li>{@render crumb(c)}<Icon name="chevron-right" /></li>{/each}
+		{#if collapsed}<li><MenuButton label="Show hidden path" items={menu} variant="minimal" size="sm" iconOnly /><Icon name="chevron-right" /></li>{/if}
+		{#each tail as c}<li>{@render crumb(c)}<Icon name="chevron-right" /></li>{/each}
+		{#if last}<li aria-current="page"><span class="cur">{last.label}</span></li>{/if}
+	</ol>
+</nav>
+
+<style>
+	ol { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; margin: 0; padding: 0; list-style: none; font-size: var(--tr-text-md); }
+	li { display: inline-flex; align-items: center; gap: 2px; color: var(--tr-on-surface-variant); }
+	a, button:not(.x) { padding: 2px 6px; border: 0; border-radius: var(--tr-radius-sm); background: none; color: var(--tr-on-surface-variant); font: inherit; text-decoration: none; cursor: pointer; }
+	a:hover, li > button:hover { background: var(--tr-surface-container-high); color: var(--tr-primary); }
+	a:focus-visible, li > button:focus-visible { outline: none; box-shadow: var(--tr-focus-ring); }
+	span:not(.cur) { padding: 2px 6px; }
+	.cur { padding: 2px 6px; color: var(--tr-on-surface); font-weight: 700; }
+</style>

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

@@ -0,0 +1,12 @@
+type Crumb = {
+    label: string;
+    href?: string;
+    onclick?: () => void;
+};
+type $$ComponentProps = {
+    items: Crumb[]; /** Collapse the middle into a “…” menu beyond this many. */
+    max?: number;
+};
+declare const Breadcrumbs: import("svelte").Component<$$ComponentProps, {}, "">;
+type Breadcrumbs = ReturnType<typeof Breadcrumbs>;
+export default Breadcrumbs;

package/dist/components/Button.svelte

@@ -0,0 +1,119 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import Icon from '../icons/Icon.svelte';
+	import type { IconName } from '../icons/paths.js';
+
+	type Props = Omit<HTMLButtonAttributes, 'children'> & {
+		variant?: 'filled' | 'tonal' | 'outlined' | 'minimal';
+		intent?: 'primary' | 'neutral' | 'success' | 'warning' | 'danger';
+		size?: 'sm' | 'md' | 'lg';
+		icon?: IconName;
+		rightIcon?: IconName;
+		loading?: boolean;
+		href?: string;
+		children?: Snippet;
+	};
+
+	let {
+		variant = 'filled',
+		intent = 'primary',
+		size = 'md',
+		icon,
+		rightIcon,
+		loading = false,
+		href,
+		type = 'button',
+		disabled,
+		class: klass = '',
+		children,
+		...rest
+	}: Props = $props();
+
+	const iconPx = $derived(size === 'lg' ? 20 : 16) as 16 | 20;
+</script>
+
+{#snippet content()}
+	{#if loading}<span class="spinner" aria-hidden="true"></span>{:else if icon}<Icon name={icon} size={iconPx} />{/if}
+	{#if children}<span class="label">{@render children()}</span>{/if}
+	{#if rightIcon}<Icon name={rightIcon} size={iconPx} />{/if}
+{/snippet}
+
+{#if href && !disabled && !loading}
+	<a class="tr-btn {klass}" data-variant={variant} data-intent={intent} data-size={size} data-icon-only={!children} {href} {...rest as Record<string, unknown>}>
+		{@render content()}
+	</a>
+{:else}
+	<button
+		class="tr-btn {klass}"
+		data-variant={variant}
+		data-intent={intent}
+		data-size={size}
+		data-icon-only={!children}
+		{type}
+		disabled={disabled || loading}
+		aria-busy={loading || undefined}
+		{...rest}
+	>
+		{@render content()}
+	</button>
+{/if}
+
+<style>
+	.tr-btn {
+		--c: var(--tr-primary);
+		--on: var(--tr-on-primary);
+		--cc: var(--tr-primary-container);
+		--on-cc: var(--tr-on-primary-container);
+		position: relative;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		gap: 6px;
+		height: var(--tr-control-h);
+		min-width: var(--tr-control-h);
+		padding: 0 12px;
+		border: 1px solid transparent;
+		border-radius: var(--tr-radius-sm);
+		font: 600 var(--tr-text-md) / 1 var(--tr-font-sans);
+		text-decoration: none;
+		white-space: nowrap;
+		cursor: pointer;
+		user-select: none;
+		transition:
+			background-color var(--tr-dur) var(--tr-ease),
+			box-shadow var(--tr-dur) var(--tr-ease),
+			transform var(--tr-dur-fast) var(--tr-ease);
+	}
+	.tr-btn[data-size='sm'] { height: var(--tr-control-h-sm); min-width: var(--tr-control-h-sm); padding: 0 8px; font-size: var(--tr-text-sm); }
+	.tr-btn[data-size='lg'] { height: var(--tr-control-h-lg); min-width: var(--tr-control-h-lg); padding: 0 16px; font-size: var(--tr-text-lg); }
+	.tr-btn[data-icon-only='true'] { padding: 0; }
+
+	.tr-btn[data-intent='neutral'] { --c: var(--tr-on-surface); --on: var(--tr-surface); --cc: var(--tr-surface-container-high); --on-cc: var(--tr-on-surface); }
+	.tr-btn[data-intent='success'] { --c: var(--tr-success); --on: var(--tr-on-success); --cc: var(--tr-success-container); --on-cc: var(--tr-on-success-container); }
+	.tr-btn[data-intent='warning'] { --c: var(--tr-warning); --on: var(--tr-on-warning); --cc: var(--tr-warning-container); --on-cc: var(--tr-on-warning-container); }
+	.tr-btn[data-intent='danger'] { --c: var(--tr-danger); --on: var(--tr-on-danger); --cc: var(--tr-danger-container); --on-cc: var(--tr-on-danger-container); }
+
+	/* Primary filled: solid, high contrast */
+	.tr-btn[data-variant='filled'] { background: var(--c); color: var(--on); box-shadow: var(--tr-elevation-1); }
+	.tr-btn[data-variant='filled']:hover:not(:disabled) { background: color-mix(in srgb, var(--on) 10%, var(--c)); }
+	/* Tonal: low-contrast container, strong label — dense toolbars */
+	.tr-btn[data-variant='tonal'] { background: var(--cc); color: var(--on-cc); }
+	.tr-btn[data-variant='tonal']:hover:not(:disabled) { background: color-mix(in srgb, var(--on-cc) 10%, var(--cc)); }
+	/* Outlined: precise 1px border */
+	.tr-btn[data-variant='outlined'] { border-color: var(--tr-outline); color: var(--c); background: transparent; }
+	.tr-btn[data-variant='outlined']:hover:not(:disabled) { background: color-mix(in srgb, var(--c) 8%, transparent); }
+	.tr-btn[data-variant='minimal'] { color: var(--c); background: transparent; }
+	.tr-btn[data-variant='minimal']:hover:not(:disabled) { background: color-mix(in srgb, var(--c) 10%, transparent); }
+
+	.tr-btn:active:not(:disabled) { transform: scale(0.98); }
+	.tr-btn:focus-visible { outline: none; box-shadow: var(--tr-focus-ring); }
+	.tr-btn:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
+
+	.spinner {
+		width: 14px; height: 14px; border-radius: 50%;
+		border: 2px solid currentColor; border-right-color: transparent;
+		animation: spin 0.7s linear infinite;
+	}
+	@keyframes spin { to { transform: rotate(360deg); } }
+</style>

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

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+import type { IconName } from '../icons/paths.js';
+type Props = Omit<HTMLButtonAttributes, 'children'> & {
+    variant?: 'filled' | 'tonal' | 'outlined' | 'minimal';
+    intent?: 'primary' | 'neutral' | 'success' | 'warning' | 'danger';
+    size?: 'sm' | 'md' | 'lg';
+    icon?: IconName;
+    rightIcon?: IconName;
+    loading?: boolean;
+    href?: string;
+    children?: Snippet;
+};
+declare const Button: import("svelte").Component<Props, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;