@ternkit/tern 1.2.1 → 1.4.0

package/dist/ui/Avatar.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	type Props = {
+		/** The person's name: the image's alt text, and the initials when there is no image. */
+		name: string;
+		src?: string | null;
+		size?: string;
+		class?: string;
+	};
+	let { name, src = null, size = '2.25rem', class: klass = '' }: Props = $props();
+	let failed = $state(false);
+	const initials = $derived(
+		name
+			.split(/\s+/)
+			.filter(Boolean)
+			.slice(0, 2)
+			.map((w) => w[0]!.toUpperCase())
+			.join('')
+	);
+</script>
+
+<span class="tern-avatar {klass}" style:--size={size}>
+	{#if src && !failed}
+		<img {src} alt={name} onerror={() => (failed = true)} />
+	{:else}
+		<span role="img" aria-label={name}>{initials}</span>
+	{/if}
+</span>
+
+<style>
+	.tern-avatar {
+		display: inline-grid;
+		place-items: center;
+		width: var(--size);
+		height: var(--size);
+		border-radius: 50%;
+		overflow: hidden;
+		background: var(--tern-accent-soft);
+		color: var(--tern-accent);
+		font-size: calc(var(--size) * 0.38);
+		font-weight: 650;
+		flex: none;
+	}
+	img {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+	}
+</style>

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

@@ -0,0 +1,10 @@
+type Props = {
+    /** The person's name: the image's alt text, and the initials when there is no image. */
+    name: string;
+    src?: string | null;
+    size?: string;
+    class?: string;
+};
+declare const Avatar: import("svelte").Component<Props, {}, "">;
+type Avatar = ReturnType<typeof Avatar>;
+export default Avatar;

package/dist/ui/Badge.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	type Props = { tone?: 'neutral' | 'accent' | 'success' | 'danger' | 'warning'; dot?: boolean; class?: string; children: Snippet };
+	let { tone = 'neutral', dot = false, class: klass = '', children }: Props = $props();
+</script>
+
+<span class="tern-badge {tone} {klass}">
+	{#if dot}<span class="dot" aria-hidden="true"></span>{/if}
+	{@render children()}
+</span>
+
+<style>
+	.tern-badge {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.35rem;
+		height: 1.375rem;
+		padding: 0 0.55rem;
+		border-radius: 999px;
+		font-size: 0.75rem;
+		font-weight: 600;
+		line-height: 1;
+		white-space: nowrap;
+		border: 1px solid transparent;
+	}
+	.dot {
+		width: 0.4rem;
+		height: 0.4rem;
+		border-radius: 50%;
+		background: currentColor;
+	}
+	.neutral {
+		background: var(--tern-surface-2);
+		color: var(--tern-fg);
+		border-color: var(--tern-border);
+	}
+	.accent {
+		background: var(--tern-accent-soft);
+		color: var(--tern-accent);
+	}
+	.success {
+		background: var(--tern-success-soft);
+		color: color-mix(in oklch, var(--tern-success) 80%, var(--tern-fg));
+	}
+	.danger {
+		background: var(--tern-danger-soft);
+		color: color-mix(in oklch, var(--tern-danger) 85%, var(--tern-fg));
+	}
+	.warning {
+		background: var(--tern-warning-soft);
+		color: color-mix(in oklch, var(--tern-warning) 55%, var(--tern-fg));
+	}
+</style>

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

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    tone?: 'neutral' | 'accent' | 'success' | 'danger' | 'warning';
+    dot?: boolean;
+    class?: string;
+    children: Snippet;
+};
+declare const Badge: import("svelte").Component<Props, {}, "">;
+type Badge = ReturnType<typeof Badge>;
+export default Badge;

package/dist/ui/BarChart.svelte

@@ -0,0 +1,170 @@
+<script lang="ts" generics="Row extends object">
+	import ChartFrame from './ChartFrame.svelte';
+	import { lastIndex, formatNumber, niceTicks, seriesColor, textWidth, type Series } from './chart.js';
+
+	type Props = {
+		data: Row[];
+		/** The field naming each bar's category. */
+		x: keyof Row & string;
+		series: Series<Row>[];
+		title: string;
+		description?: string;
+		level?: 2 | 3 | 4;
+		/** Stack the series instead of grouping them side by side. */
+		stacked?: boolean;
+		/** Bars grow sideways, for long category names or many categories. */
+		horizontal?: boolean;
+		height?: number;
+		format?: (v: number) => string;
+		class?: string;
+	};
+	let { data, x, series, title, description, level, stacked = false, horizontal = false, height, format = (v) => formatNumber(v), class: klass = '' }: Props = $props();
+
+	let width = $state(640);
+	let active = $state<number | null>(null);
+
+	const field = (r: Row, k: string) => (r as Record<string, unknown>)[k];
+	const cats = $derived(data.map((r) => String(field(r, x) ?? '')));
+	const values = $derived(
+		data.map((r) =>
+			series.map((s) => {
+				const v = field(r, s.key);
+				return typeof v === 'number' && Number.isFinite(v) ? Math.max(0, v) : 0;
+			})
+		)
+	);
+	const totals = $derived(values.map((v) => (stacked ? v.reduce((a, b) => a + b, 0) : Math.max(0, ...v))));
+	const h = $derived(height ?? (horizontal ? Math.max(120, data.length * (stacked || series.length === 1 ? 32 : 18 * series.length + 14) + 30) : 240));
+	const ticks = $derived(niceTicks(0, Math.max(0, ...totals), horizontal ? Math.max(2, Math.floor(width / 110)) : Math.max(3, Math.round(h / 60))));
+	const max = $derived(ticks[ticks.length - 1]!);
+
+	const top = 10;
+	const labelW = $derived(horizontal ? Math.min(180, Math.max(...cats.map(textWidth)) + 12) : Math.max(...ticks.map((t) => textWidth(format(t)))) + 10);
+	const left = $derived(labelW);
+	const right = $derived(horizontal && series.length === 1 ? Math.max(...totals.map((t) => textWidth(format(t)))) + 10 : 12);
+	const bottom = $derived(horizontal ? 22 : 24);
+	const plotW = $derived(Math.max(10, width - left - right));
+	const plotH = $derived(h - top - bottom);
+	const band = $derived((horizontal ? plotH : plotW) / Math.max(1, data.length));
+	const groups = $derived(stacked ? 1 : series.length);
+	// Bars are at most 24px thick; the rest of the band is air.
+	const thick = $derived(Math.max(2, Math.min(24, (band * 0.7 - (groups - 1) * 2) / groups)));
+	const scale = (v: number) => (v / (max || 1)) * (horizontal ? plotW : plotH);
+
+	type Rect = { s: number; x: number; y: number; w: number; h: number; end: boolean };
+	const rects = $derived(
+		values.map((v, i) => {
+			const out: Rect[] = [];
+			const groupW = groups * thick + (groups - 1) * 2;
+			const start = (horizontal ? top : left) + i * band + (band - groupW) / 2;
+			let acc = 0;
+			const topSeries = lastIndex(v, (n) => n > 0);
+			v.forEach((n, s) => {
+				if (n <= 0) return;
+				const len = scale(n);
+				const pos = stacked ? start : start + s * (thick + 2);
+				const from = scale(acc) + (stacked && acc > 0 ? 2 : 0);
+				const l = Math.max(0, len - (stacked && acc > 0 ? 2 : 0));
+				if (horizontal) out.push({ s, x: left + from, y: pos, w: l, h: thick, end: !stacked || s === topSeries });
+				else out.push({ s, x: pos, y: top + plotH - from - l, w: thick, h: l, end: !stacked || s === topSeries });
+				if (stacked) acc += n;
+			});
+			return out;
+		})
+	);
+
+	// A bar with a 4px rounded data end and a square baseline end.
+	function barPath(r: Rect) {
+		const rad = r.end ? Math.min(4, horizontal ? r.h / 2 : r.w / 2, horizontal ? r.w : r.h) : 0;
+		if (horizontal) return `M${r.x},${r.y}H${r.x + r.w - rad}Q${r.x + r.w},${r.y} ${r.x + r.w},${r.y + rad}V${r.y + r.h - rad}Q${r.x + r.w},${r.y + r.h} ${r.x + r.w - rad},${r.y + r.h}H${r.x}Z`;
+		return `M${r.x},${r.y + r.h}V${r.y + rad}Q${r.x},${r.y} ${r.x + rad},${r.y}H${r.x + r.w - rad}Q${r.x + r.w},${r.y} ${r.x + r.w},${r.y + rad}V${r.y + r.h}Z`;
+	}
+
+	function onkeydown(e: KeyboardEvent) {
+		const last = data.length - 1;
+		const next = horizontal ? 'ArrowDown' : 'ArrowRight';
+		const prev = horizontal ? 'ArrowUp' : 'ArrowLeft';
+		const moves: Record<string, number> = { [next]: Math.min(last, (active ?? -1) + 1), [prev]: Math.max(0, (active ?? last + 1) - 1), Home: 0, End: last };
+		if (e.key in moves) {
+			e.preventDefault();
+			active = moves[e.key]!;
+		} else if (e.key === 'Escape') active = null;
+	}
+	function hit(e: PointerEvent, el: Element) {
+		const r = el.getBoundingClientRect();
+		const at = horizontal ? ((e.clientY - r.top) / r.height) * h - top : ((e.clientX - r.left) / r.width) * width - left;
+		const i = Math.floor(at / band);
+		active = i >= 0 && i < data.length ? i : null;
+	}
+
+	const describe = (i: number) => `${cats[i]}: ` + series.map((s, k) => `${s.label} ${format(values[i]![k]!)}`).join(', ') + (stacked && series.length > 1 ? `, total ${format(totals[i]!)}` : '');
+	const table = $derived({
+		headers: [x, ...series.map((s) => s.label), ...(stacked && series.length > 1 ? ['Total'] : [])],
+		rows: data.map((_, i) => [cats[i]!, ...values[i]!.map(format), ...(stacked && series.length > 1 ? [format(totals[i]!)] : [])])
+	});
+	const labelEvery = $derived(horizontal ? 1 : Math.max(1, Math.ceil(data.length / Math.max(2, Math.floor(plotW / 64)))));
+</script>
+
+<ChartFrame {title} {description} {level} class={klass} legend={series.map((s, i) => ({ label: s.label, color: seriesColor(i), kind: 'rect' }))} {table} readout={active === null ? '' : describe(active)}>
+	<!-- svelte-ignore a11y_no_noninteractive_tabindex, a11y_no_noninteractive_element_interactions -->
+	<div
+		class="tern-plot"
+		bind:clientWidth={width}
+		role="group"
+		aria-roledescription="chart"
+		aria-label="{title}. Use the arrow keys to read values."
+		tabindex="0"
+		onpointermove={(e) => hit(e, e.currentTarget)}
+		onpointerleave={() => (active = null)}
+		onfocus={() => active === null && (active = 0)}
+		onblur={() => (active = null)}
+		{onkeydown}
+	>
+		<svg {width} height={h} viewBox="0 0 {width} {h}" aria-hidden="true">
+			{#each ticks as t (t)}
+				{#if horizontal}
+					<line class="grid" x1={left + scale(t)} x2={left + scale(t)} y1={top} y2={top + plotH} />
+					<text class="tick" x={left + scale(t)} y={h - 6} text-anchor="middle">{format(t)}</text>
+				{:else}
+					<line class="grid" x1={left} x2={left + plotW} y1={top + plotH - scale(t)} y2={top + plotH - scale(t)} />
+					<text class="tick" x={left - 8} y={top + plotH - scale(t)} dy="0.32em" text-anchor="end">{format(t)}</text>
+				{/if}
+			{/each}
+			{#each cats as c, i (i)}
+				{#if active === i}
+					<rect x={horizontal ? left : left + i * band} y={horizontal ? top + i * band : top} width={horizontal ? plotW : band} height={horizontal ? band : plotH} fill="var(--tern-surface-2)" />
+				{/if}
+				{#if horizontal}
+					<text class="tick" x={left - 8} y={top + i * band + band / 2} dy="0.32em" text-anchor="end">{c.length > 26 ? c.slice(0, 25) + '…' : c}</text>
+				{:else if i % labelEvery === 0}
+					<text class="tick" x={left + i * band + band / 2} y={h - 6} text-anchor="middle">{c}</text>
+				{/if}
+			{/each}
+			{#each rects as group, i (i)}
+				{#each group as r (r.s)}
+					<path d={barPath(r)} fill={seriesColor(r.s)} opacity={active === null || active === i ? 1 : 0.55} />
+				{/each}
+				{#if series.length === 1 && group[0]}
+					{#if horizontal}
+						<text class="direct" x={group[0].x + group[0].w + 6} y={group[0].y + group[0].h / 2} dy="0.32em">{format(totals[i]!)}</text>
+					{:else if data.length <= 12 && band > textWidth(format(totals[i]!))}
+						<text class="direct" x={group[0].x + group[0].w / 2} y={group[0].y - 6} text-anchor="middle">{format(totals[i]!)}</text>
+					{/if}
+				{/if}
+			{/each}
+		</svg>
+		{#if active !== null}
+			<div
+				class="tooltip"
+				style:left="{horizontal ? Math.min(left + scale(totals[active]!) + 12, width - 170) : Math.min(left + (active + 1) * band, width - 170)}px"
+				style:top="{horizontal ? top + active * band : top}px"
+			>
+				<div class="head">{cats[active]}</div>
+				{#each series as s, k (s.key)}
+					<div class="row"><span class="swatch" style:background={seriesColor(k)}></span><strong>{format(values[active]![k]!)}</strong><span>{s.label}</span></div>
+				{/each}
+				{#if stacked && series.length > 1}<div class="row"><strong>{format(totals[active]!)}</strong><span>Total</span></div>{/if}
+			</div>
+		{/if}
+	</div>
+</ChartFrame>

package/dist/ui/BarChart.svelte.d.ts

@@ -0,0 +1,40 @@
+import { type Series } from './chart.js';
+declare function $$render<Row extends object>(): {
+    props: {
+        data: Row[];
+        /** The field naming each bar's category. */
+        x: keyof Row & string;
+        series: Series<Row>[];
+        title: string;
+        description?: string;
+        level?: 2 | 3 | 4;
+        /** Stack the series instead of grouping them side by side. */
+        stacked?: boolean;
+        /** Bars grow sideways, for long category names or many categories. */
+        horizontal?: boolean;
+        height?: number;
+        format?: (v: number) => string;
+        class?: string;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Row extends object> {
+    props(): ReturnType<typeof $$render<Row>>['props'];
+    events(): ReturnType<typeof $$render<Row>>['events'];
+    slots(): ReturnType<typeof $$render<Row>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Row extends object>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Row>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Row>['props']>, ReturnType<__sveltets_Render<Row>['events']>, ReturnType<__sveltets_Render<Row>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Row>['bindings']>;
+    } & ReturnType<__sveltets_Render<Row>['exports']>;
+    <Row extends object>(internal: unknown, props: ReturnType<__sveltets_Render<Row>['props']> & {}): ReturnType<__sveltets_Render<Row>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const BarChart: $$IsomorphicComponent;
+type BarChart<Row extends object> = InstanceType<typeof BarChart<Row>>;
+export default BarChart;

package/dist/ui/Breadcrumb.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+	import Menu from './Menu.svelte';
+
+	type Crumb = { label: string; href?: string };
+	type Props = {
+		/** From the top level down to the current page, which is last. */
+		items: Crumb[];
+		/** With more items than this, the middle ones move into a menu. */
+		max?: number;
+		class?: string;
+	};
+	let { items, max = 4, class: klass = '' }: Props = $props();
+
+	const collapsed = $derived(items.length > max);
+	const head = $derived(collapsed ? items.slice(0, 1) : items);
+	const middle = $derived(collapsed ? items.slice(1, items.length - (max - 2)) : []);
+	const tail = $derived(collapsed ? items.slice(items.length - (max - 2)) : []);
+</script>
+
+{#snippet crumb(item: Crumb, last: boolean)}
+	<li>
+		{#if last}
+			<span aria-current="page">{item.label}</span>
+		{:else if item.href}
+			<a href={item.href}>{item.label}</a>
+		{:else}
+			<span>{item.label}</span>
+		{/if}
+	</li>
+{/snippet}
+
+<nav class="tern-breadcrumb {klass}" aria-label="Breadcrumb">
+	<ol>
+		{#each head as item, i (i)}{@render crumb(item, !collapsed && i === items.length - 1)}{/each}
+		{#if collapsed}
+			<li>
+				<Menu variant="ghost" items={middle.map((m) => ({ label: m.label, href: m.href }))} class="more">
+					<span class="tern-sr-only">Show {middle.length} more</span><span aria-hidden="true">…</span>
+				</Menu>
+			</li>
+			{#each tail as item, i (i)}{@render crumb(item, i === tail.length - 1)}{/each}
+		{/if}
+	</ol>
+</nav>
+
+<style>
+	ol {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: 0.25rem;
+		margin: 0;
+		padding: 0;
+		list-style: none;
+		font-size: 0.875rem;
+		color: var(--tern-muted);
+	}
+	li {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.25rem;
+	}
+	li + li::before {
+		content: '/';
+		margin-inline-end: 0.25rem;
+		color: var(--tern-border-strong);
+	}
+	a {
+		color: var(--tern-muted);
+		text-decoration: none;
+		border-radius: 3px;
+	}
+	a:hover {
+		color: var(--tern-fg);
+		text-decoration: underline;
+	}
+	a:focus-visible {
+		outline: 2px solid var(--tern-ring);
+		outline-offset: 2px;
+	}
+	[aria-current='page'] {
+		color: var(--tern-fg);
+		font-weight: 550;
+	}
+	li :global(.more .trigger) {
+		height: 1.5rem;
+		padding: 0 0.4rem;
+	}
+	li :global(.more .trigger svg) {
+		display: none;
+	}
+</style>

package/dist/ui/Breadcrumb.svelte.d.ts

@@ -0,0 +1,14 @@
+type Crumb = {
+    label: string;
+    href?: string;
+};
+type Props = {
+    /** From the top level down to the current page, which is last. */
+    items: Crumb[];
+    /** With more items than this, the middle ones move into a menu. */
+    max?: number;
+    class?: string;
+};
+declare const Breadcrumb: import("svelte").Component<Props, {}, "">;
+type Breadcrumb = ReturnType<typeof Breadcrumb>;
+export default Breadcrumb;

package/dist/ui/Button.svelte

@@ -0,0 +1,136 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
+
+	type Common = {
+		/** primary for the main action, secondary for the others, ghost for toolbars, danger for destructive actions */
+		variant?: 'primary' | 'secondary' | 'ghost' | 'danger';
+		size?: 'sm' | 'md' | 'lg';
+		/** Shows a spinner and blocks clicks, while staying focusable. */
+		loading?: boolean;
+		children?: Snippet;
+	};
+	type Props = Common & ((HTMLButtonAttributes & { href?: undefined }) | (HTMLAnchorAttributes & { href: string }));
+
+	let { variant = 'primary', size = 'md', loading = false, children, class: klass = '', ...rest }: Props = $props();
+</script>
+
+{#if rest.href !== undefined}
+	<a class="tern-btn {variant} {size} {klass}" {...rest as HTMLAnchorAttributes}>{@render children?.()}</a>
+{:else}
+	<button
+		class="tern-btn {variant} {size} {klass}"
+		type="button"
+		{...rest as HTMLButtonAttributes}
+		aria-busy={loading || undefined}
+		aria-disabled={loading || (rest as HTMLButtonAttributes).disabled || undefined}
+		onclick={(e) => {
+			if (loading) {
+				e.preventDefault();
+				return;
+			}
+			(rest as HTMLButtonAttributes).onclick?.(e as never);
+		}}
+	>
+		{#if loading}<span class="spinner" aria-hidden="true"></span>{/if}
+		{@render children?.()}
+	</button>
+{/if}
+
+<style>
+	.tern-btn {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		gap: 0.5em;
+		height: var(--tern-control-height);
+		padding: 0 1rem;
+		border-radius: var(--tern-radius-sm);
+		border: 1px solid transparent;
+		font: inherit;
+		font-size: 0.875rem;
+		font-weight: 550;
+		line-height: 1;
+		white-space: nowrap;
+		text-decoration: none;
+		cursor: pointer;
+		user-select: none;
+		transition:
+			background-color var(--tern-duration),
+			border-color var(--tern-duration),
+			box-shadow var(--tern-duration),
+			transform var(--tern-duration);
+	}
+	.tern-btn:focus-visible {
+		outline: 2px solid var(--tern-ring);
+		outline-offset: 2px;
+	}
+	.tern-btn:active:not([aria-disabled='true']) {
+		transform: translateY(0.5px);
+	}
+	.tern-btn[aria-disabled='true'],
+	.tern-btn:disabled {
+		opacity: 0.55;
+		cursor: not-allowed;
+	}
+	.tern-btn[aria-busy='true'] {
+		cursor: progress;
+	}
+	.sm {
+		height: calc(var(--tern-control-height) - 0.5rem);
+		padding: 0 0.7rem;
+		font-size: 0.8125rem;
+	}
+	.lg {
+		height: calc(var(--tern-control-height) + 0.5rem);
+		padding: 0 1.35rem;
+		font-size: 0.9375rem;
+	}
+	.primary {
+		background: var(--tern-accent);
+		color: var(--tern-accent-fg);
+		box-shadow:
+			var(--tern-shadow),
+			inset 0 1px 0 oklch(1 0 0 / 0.14);
+	}
+	.primary:hover:not([aria-disabled='true']) {
+		background: var(--tern-accent-hover);
+	}
+	.secondary {
+		background: var(--tern-surface);
+		color: var(--tern-fg);
+		border-color: var(--tern-border-strong);
+		box-shadow: var(--tern-shadow);
+	}
+	.secondary:hover:not([aria-disabled='true']) {
+		background: var(--tern-surface-2);
+	}
+	.ghost {
+		background: transparent;
+		color: var(--tern-fg);
+	}
+	.ghost:hover:not([aria-disabled='true']) {
+		background: var(--tern-surface-2);
+	}
+	.danger {
+		background: var(--tern-danger);
+		color: var(--tern-danger-fg);
+		box-shadow: var(--tern-shadow);
+	}
+	.danger:hover:not([aria-disabled='true']) {
+		background: var(--tern-danger-hover);
+	}
+	.spinner {
+		width: 1em;
+		height: 1em;
+		border-radius: 50%;
+		border: 2px solid currentColor;
+		border-right-color: transparent;
+		animation: spin 0.7s linear infinite;
+	}
+	@keyframes spin {
+		to {
+			transform: rotate(1turn);
+		}
+	}
+</style>

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

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
+type Common = {
+    /** primary for the main action, secondary for the others, ghost for toolbars, danger for destructive actions */
+    variant?: 'primary' | 'secondary' | 'ghost' | 'danger';
+    size?: 'sm' | 'md' | 'lg';
+    /** Shows a spinner and blocks clicks, while staying focusable. */
+    loading?: boolean;
+    children?: Snippet;
+};
+type Props = Common & ((HTMLButtonAttributes & {
+    href?: undefined;
+}) | (HTMLAnchorAttributes & {
+    href: string;
+}));
+declare const Button: import("svelte").Component<Props, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/dist/ui/ButtonGroup.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	type Props = {
+		/** Names the group for screen readers, such as "Text alignment". */
+		label: string;
+		orientation?: 'horizontal' | 'vertical';
+		class?: string;
+		/** Buttons, Menus or Inputs, drawn as one joined control. */
+		children: Snippet;
+	};
+	let { label, orientation = 'horizontal', class: klass = '', children }: Props = $props();
+</script>
+
+<div class="tern-button-group {orientation} {klass}" role="group" aria-label={label}>
+	{@render children()}
+</div>
+
+<style>
+	.tern-button-group {
+		display: inline-flex;
+		isolation: isolate;
+	}
+	.vertical {
+		flex-direction: column;
+	}
+	.tern-button-group > :global(*) {
+		position: relative;
+	}
+	.tern-button-group > :global(*:focus-visible),
+	.tern-button-group > :global(*:has(:focus-visible)) {
+		z-index: 1;
+	}
+	.horizontal > :global(* + *) {
+		margin-inline-start: -1px;
+	}
+	.vertical > :global(* + *) {
+		margin-block-start: -1px;
+	}
+	.horizontal > :global(:not(:first-child)),
+	.horizontal > :global(:not(:first-child) .trigger) {
+		border-start-start-radius: 0;
+		border-end-start-radius: 0;
+	}
+	.horizontal > :global(:not(:last-child)),
+	.horizontal > :global(:not(:last-child) .trigger) {
+		border-start-end-radius: 0;
+		border-end-end-radius: 0;
+	}
+	.vertical > :global(:not(:first-child)) {
+		border-start-start-radius: 0;
+		border-start-end-radius: 0;
+	}
+	.vertical > :global(:not(:last-child)) {
+		border-end-start-radius: 0;
+		border-end-end-radius: 0;
+	}
+	.tern-button-group > :global(.tern-btn) {
+		box-shadow: none;
+	}
+</style>

package/dist/ui/ButtonGroup.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    /** Names the group for screen readers, such as "Text alignment". */
+    label: string;
+    orientation?: 'horizontal' | 'vertical';
+    class?: string;
+    /** Buttons, Menus or Inputs, drawn as one joined control. */
+    children: Snippet;
+};
+declare const ButtonGroup: import("svelte").Component<Props, {}, "">;
+type ButtonGroup = ReturnType<typeof ButtonGroup>;
+export default ButtonGroup;