@ternkit/tern 1.2.1 → 1.4.0

package/dist/ui/InputOTP.svelte

@@ -0,0 +1,140 @@
+<script lang="ts">
+	import { getField } from './field.js';
+
+	type Props = {
+		/** The code; bind it. */
+		value?: string;
+		/** How many characters. */
+		length?: number;
+		/** numeric for digits only, or alphanumeric. */
+		mode?: 'numeric' | 'alphanumeric';
+		/** Labels it when it isn't in a Field. */
+		label?: string;
+		name?: string;
+		disabled?: boolean;
+		class?: string;
+		/** Runs once every character is entered, such as to submit. */
+		oncomplete?: (code: string) => void;
+	};
+	const field = getField();
+	let { value = $bindable(field?.value ?? ''), length = 6, mode = 'numeric', label, name: nameProp, disabled = false, class: klass = '', oncomplete }: Props = $props();
+	const name = $derived(nameProp ?? field?.name);
+
+	let input = $state<HTMLInputElement>();
+	let focused = $state(false);
+	let caret = $state(0);
+	const pattern = $derived(mode === 'numeric' ? /[^0-9]/g : /[^0-9a-z]/gi);
+
+	function oninput() {
+		const clean = input!.value.replace(pattern, '').slice(0, length);
+		input!.value = clean;
+		value = clean;
+		caret = clean.length;
+		if (clean.length === length) oncomplete?.(clean);
+	}
+</script>
+
+<!-- One real input, drawn as boxes: pasting, autofill from SMS and screen readers all just work. -->
+<div class="tern-otp {klass}" class:focused class:disabled={disabled || field?.disabled} style:--length={length}>
+	<input
+		bind:this={input}
+		{value}
+		{name}
+		id={field?.id}
+		aria-label={field ? undefined : label}
+		aria-describedby={field?.describedBy}
+		aria-invalid={field?.invalid || undefined}
+		required={field?.required}
+		disabled={disabled || field?.disabled}
+		inputmode={mode === 'numeric' ? 'numeric' : 'text'}
+		autocomplete="one-time-code"
+		autocapitalize="characters"
+		spellcheck="false"
+		pattern={mode === 'numeric' ? `[0-9]{${length}}` : `[0-9A-Za-z]{${length}}`}
+		{oninput}
+		onfocus={() => {
+			focused = true;
+			caret = value.length;
+		}}
+		onblur={() => (focused = false)}
+		onselect={() => (caret = Math.min(input?.selectionStart ?? 0, length - 1))}
+	/>
+	<div class="boxes" aria-hidden="true">
+		{#each { length }, i (i)}
+			<span class="box" class:active={focused && i === Math.min(caret, length - 1)} class:filled={i < value.length}>
+				{value[i] ?? ''}
+				{#if focused && i === value.length}<span class="caret"></span>{/if}
+			</span>
+		{/each}
+	</div>
+</div>
+
+<style>
+	.tern-otp {
+		position: relative;
+		width: fit-content;
+	}
+	input {
+		position: absolute;
+		inset: 0;
+		width: 100%;
+		height: 100%;
+		opacity: 0;
+		font-size: 16px; /* no zoom on iOS */
+		letter-spacing: 2.6rem;
+		caret-color: transparent;
+		border: 0;
+		padding: 0;
+		cursor: text;
+		z-index: 1;
+	}
+	.boxes {
+		display: flex;
+		gap: 0.5rem;
+	}
+	.box {
+		position: relative;
+		display: grid;
+		place-items: center;
+		width: 2.5rem;
+		height: 2.875rem;
+		font-family: var(--tern-font-mono);
+		font-size: 1.25rem;
+		font-weight: 600;
+		text-transform: uppercase;
+		color: var(--tern-fg);
+		background: var(--tern-surface);
+		border: 1px solid var(--tern-border-strong);
+		border-radius: var(--tern-radius-sm);
+		transition:
+			border-color var(--tern-duration),
+			box-shadow var(--tern-duration);
+	}
+	.box.active {
+		border-color: var(--tern-accent);
+		box-shadow: 0 0 0 3px color-mix(in oklch, var(--tern-ring) 30%, transparent);
+	}
+	.caret {
+		position: absolute;
+		width: 1px;
+		height: 1.25rem;
+		background: var(--tern-fg);
+		animation: blink 1s steps(1) infinite;
+	}
+	.tern-otp:has(input[aria-invalid='true']) .box {
+		border-color: var(--tern-danger);
+	}
+	.disabled {
+		opacity: 0.6;
+	}
+	@keyframes blink {
+		50% {
+			opacity: 0;
+		}
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.caret {
+			animation: none;
+		}
+	}
+</style>

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

@@ -0,0 +1,18 @@
+type Props = {
+    /** The code; bind it. */
+    value?: string;
+    /** How many characters. */
+    length?: number;
+    /** numeric for digits only, or alphanumeric. */
+    mode?: 'numeric' | 'alphanumeric';
+    /** Labels it when it isn't in a Field. */
+    label?: string;
+    name?: string;
+    disabled?: boolean;
+    class?: string;
+    /** Runs once every character is entered, such as to submit. */
+    oncomplete?: (code: string) => void;
+};
+declare const InputOTP: import("svelte").Component<Props, {}, "value">;
+type InputOTP = ReturnType<typeof InputOTP>;
+export default InputOTP;

package/dist/ui/Item.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	type Props = {
+		title: string;
+		description?: string;
+		/** Makes the whole item a link; actions stay separate buttons. */
+		href?: string;
+		/** An avatar, icon or thumbnail at the start. */
+		media?: Snippet;
+		/** Buttons or a badge at the end. */
+		actions?: Snippet;
+		/** li inside a ul or ol, div elsewhere. */
+		as?: 'div' | 'li';
+		class?: string;
+	};
+	let { title, description, href, media, actions, as = 'div', class: klass = '' }: Props = $props();
+</script>
+
+<!-- A row with media, a title, a description and actions, for lists of people, files or settings. -->
+<svelte:element this={as} class="tern-item {klass}" class:link={!!href}>
+	{#if media}<div class="media">{@render media()}</div>{/if}
+	<div class="text">
+		{#if href}<a {href} class="title">{title}</a>{:else}<span class="title">{title}</span>{/if}
+		{#if description}<span class="description">{description}</span>{/if}
+	</div>
+	{#if actions}<div class="actions">{@render actions()}</div>{/if}
+</svelte:element>
+
+<style>
+	.tern-item {
+		position: relative;
+		display: flex;
+		align-items: center;
+		gap: 0.75rem;
+		padding: 0.75rem;
+		border-radius: var(--tern-radius-sm);
+		list-style: none;
+	}
+	.link:hover {
+		background: var(--tern-surface-2);
+	}
+	.text {
+		display: grid;
+		flex: 1;
+		min-width: 0;
+	}
+	.title {
+		font-weight: 550;
+		color: var(--tern-fg);
+		text-decoration: none;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	/* The link covers the item, so it's one big target. */
+	a.title::after {
+		content: '';
+		position: absolute;
+		inset: 0;
+		border-radius: inherit;
+	}
+	a.title:focus-visible::after {
+		outline: 2px solid var(--tern-ring);
+		outline-offset: -2px;
+	}
+	a.title:focus-visible {
+		outline: none;
+	}
+	.description {
+		font-size: 0.8125rem;
+		color: var(--tern-muted);
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	.actions {
+		position: relative;
+		z-index: 1;
+		display: flex;
+		gap: 0.375rem;
+	}
+	.media {
+		flex: none;
+	}
+</style>

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

@@ -0,0 +1,17 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    title: string;
+    description?: string;
+    /** Makes the whole item a link; actions stay separate buttons. */
+    href?: string;
+    /** An avatar, icon or thumbnail at the start. */
+    media?: Snippet;
+    /** Buttons or a badge at the end. */
+    actions?: Snippet;
+    /** li inside a ul or ol, div elsewhere. */
+    as?: 'div' | 'li';
+    class?: string;
+};
+declare const Item: import("svelte").Component<Props, {}, "">;
+type Item = ReturnType<typeof Item>;
+export default Item;

package/dist/ui/Kbd.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	let { children }: { children: Snippet } = $props();
+</script>
+
+<kbd class="tern-kbd">{@render children()}</kbd>
+
+<style>
+	.tern-kbd {
+		display: inline-flex;
+		align-items: center;
+		min-width: 1.4em;
+		height: 1.4em;
+		padding: 0 0.35em;
+		justify-content: center;
+		border: 1px solid var(--tern-border-strong);
+		border-bottom-width: 2px;
+		border-radius: 5px;
+		background: var(--tern-surface);
+		font-family: var(--tern-font-mono);
+		font-size: 0.75em;
+		color: var(--tern-fg);
+	}
+</style>

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

@@ -0,0 +1,7 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    children: Snippet;
+};
+declare const Kbd: import("svelte").Component<$$ComponentProps, {}, "">;
+type Kbd = ReturnType<typeof Kbd>;
+export default Kbd;

package/dist/ui/Label.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLLabelAttributes } from 'svelte/elements';
+
+	type Props = HTMLLabelAttributes & {
+		/** Marks the control as required, with an asterisk screen readers skip (the control says it's required). */
+		required?: boolean;
+		children: Snippet;
+	};
+	let { required = false, class: klass = '', children, ...rest }: Props = $props();
+</script>
+
+<!-- A label on its own, for layouts Field doesn't fit. Point it at the control with for. -->
+<label class="tern-label {klass}" {...rest}>
+	{@render children()}
+	{#if required}<span class="required" aria-hidden="true">*</span>{/if}
+</label>
+
+<style>
+	.tern-label {
+		font-size: 0.875rem;
+		font-weight: 550;
+		color: var(--tern-fg);
+	}
+	.required {
+		color: var(--tern-danger);
+		margin-inline-start: 0.125rem;
+	}
+</style>

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

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+import type { HTMLLabelAttributes } from 'svelte/elements';
+type Props = HTMLLabelAttributes & {
+    /** Marks the control as required, with an asterisk screen readers skip (the control says it's required). */
+    required?: boolean;
+    children: Snippet;
+};
+declare const Label: import("svelte").Component<Props, {}, "">;
+type Label = ReturnType<typeof Label>;
+export default Label;

package/dist/ui/LineChart.svelte

@@ -0,0 +1,171 @@
+<script lang="ts" generics="Row extends object">
+	import ChartFrame from './ChartFrame.svelte';
+	import { lastIndex, formatNumber, formatX, isTime, niceTicks, numericX, seriesColor, textWidth, timeTicks, type Series, type XValue } from './chart.js';
+
+	type Props = {
+		data: Row[];
+		/** The field on the x axis: dates (Date or ISO strings), numbers or categories. */
+		x: keyof Row & string;
+		/** Up to eight series; each is a field of numbers. */
+		series: Series<Row>[];
+		title: string;
+		description?: string;
+		level?: 2 | 3 | 4;
+		/** Fill under the lines. */
+		area?: boolean;
+		/** Start the y axis at zero. Turn it off for values far from zero, such as a temperature. */
+		zero?: boolean;
+		height?: number;
+		/** Formats y values on the axis, in tooltips and in the table. */
+		format?: (v: number) => string;
+		class?: string;
+	};
+	let { data, x, series, title, description, level, area = false, zero = true, height = 240, 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 xs = $derived(data.map((r) => field(r, x) as XValue));
+	const time = $derived(isTime(xs));
+	const nx = $derived(numericX(xs));
+	const values = $derived(
+		series.map((s) =>
+			data.map((r) => {
+				const v = field(r, s.key);
+				return typeof v === 'number' && Number.isFinite(v) ? v : null;
+			})
+		)
+	);
+	const all = $derived(values.flat().filter((v): v is number => v !== null));
+	const yTicks = $derived(niceTicks(zero || area ? Math.min(0, ...all) : Math.min(...all), Math.max(zero || area ? 0 : -Infinity, ...all), Math.max(3, Math.round(height / 60))));
+	const yMin = $derived(yTicks[0]!);
+	const yMax = $derived(yTicks[yTicks.length - 1]!);
+
+	// Direct labels at the line ends for up to four series, unless they'd collide.
+	const top = 10;
+	const bottom = 24;
+	const left = $derived(Math.max(...yTicks.map((t) => textWidth(format(t)))) + 10);
+	const ends = $derived(values.map((v) => [...v].reverse().find((n) => n !== null) ?? null));
+	const endY = (v: number) => top + (1 - (v - yMin) / (yMax - yMin || 1)) * (height - top - bottom);
+	const direct = $derived.by(() => {
+		if (series.length > 4) return false;
+		const ys = ends.filter((e): e is number => e !== null).map(endY).sort((a, b) => a - b);
+		return ys.every((y, i) => i === 0 || y - ys[i - 1]! >= 14);
+	});
+	const endLabels = $derived(series.map((s, i) => (series.length === 1 ? (ends[i] === null ? '' : format(ends[i]!)) : s.label)));
+	const right = $derived(direct ? Math.max(...endLabels.map(textWidth)) + 14 : 8);
+
+	const plotW = $derived(Math.max(10, width - left - right));
+	const plotH = $derived(height - top - bottom);
+	const xMin = $derived(nx ? Math.min(...nx) : 0);
+	const xMax = $derived(nx ? Math.max(...nx) : Math.max(1, data.length - 1));
+	const px = (i: number) => left + (((nx ? nx[i]! : i) - xMin) / (xMax - xMin || 1)) * plotW;
+	const py = (v: number) => top + (1 - (v - yMin) / (yMax - yMin || 1)) * plotH;
+
+	const xTicks = $derived.by(() => {
+		if (time && nx) {
+			const t = timeTicks(xMin, xMax, Math.max(2, Math.floor(plotW / 90)));
+			return t.ticks.map((v) => ({ at: left + ((v - xMin) / (xMax - xMin || 1)) * plotW, label: t.format(v) }));
+		}
+		if (nx) return niceTicks(xMin, xMax, Math.max(2, Math.floor(plotW / 80))).filter((v) => v >= xMin && v <= xMax).map((v) => ({ at: left + ((v - xMin) / (xMax - xMin || 1)) * plotW, label: formatNumber(v) }));
+		const every = Math.max(1, Math.ceil(data.length / Math.max(2, Math.floor(plotW / 70))));
+		return xs.map((v, i) => ({ at: px(i), label: String(v), i })).filter((t) => t.i % every === 0);
+	});
+
+	function path(v: (number | null)[]) {
+		let d = '';
+		let pen = false;
+		v.forEach((n, i) => {
+			if (n === null) return void (pen = false);
+			d += `${pen ? 'L' : 'M'}${px(i).toFixed(1)},${py(n).toFixed(1)}`;
+			pen = true;
+		});
+		return d;
+	}
+	function areaPath(v: (number | null)[]) {
+		const base = py(Math.max(yMin, Math.min(0, yMax)));
+		const runs: string[] = [];
+		let run: number[] = [];
+		const flush = () => {
+			if (run.length) runs.push(`M${px(run[0]!)},${base}` + run.map((i) => `L${px(i).toFixed(1)},${py(v[i]!).toFixed(1)}`).join('') + `L${px(run[run.length - 1]!)},${base}Z`);
+			run = [];
+		};
+		v.forEach((n, i) => (n === null ? flush() : run.push(i)));
+		flush();
+		return runs.join('');
+	}
+
+	function nearest(clientX: number, el: Element) {
+		const r = el.getBoundingClientRect();
+		const at = ((clientX - r.left) / r.width) * width;
+		let best = 0;
+		for (let i = 1; i < data.length; i++) if (Math.abs(px(i) - at) < Math.abs(px(best) - at)) best = i;
+		return best;
+	}
+	function onkeydown(e: KeyboardEvent) {
+		const last = data.length - 1;
+		const moves: Record<string, number> = { ArrowRight: Math.min(last, (active ?? -1) + 1), ArrowLeft: 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;
+	}
+
+	const describe = (i: number) => `${formatX(xs[i]!, time)}: ` + series.map((s, k) => `${s.label} ${values[k]![i] === null ? 'no data' : format(values[k]![i]!)}`).join(', ');
+	const table = $derived({
+		headers: [x, ...series.map((s) => s.label)],
+		rows: data.map((_, i) => [formatX(xs[i]!, time), ...values.map((v) => (v[i] === null ? '–' : format(v[i]!)))])
+	});
+</script>
+
+<ChartFrame {title} {description} {level} class={klass} legend={series.map((s, i) => ({ label: s.label, color: seriesColor(i), kind: area ? 'rect' : 'line' }))} {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) => (active = nearest(e.clientX, e.currentTarget))}
+		onpointerleave={() => (active = null)}
+		onfocus={() => active === null && (active = data.length - 1)}
+		onblur={() => (active = null)}
+		{onkeydown}
+	>
+		<svg {width} {height} viewBox="0 0 {width} {height}" aria-hidden="true">
+			{#each yTicks as t (t)}
+				<line class="grid" x1={left} x2={left + plotW} y1={py(t)} y2={py(t)} />
+				<text class="tick" x={left - 8} y={py(t)} dy="0.32em" text-anchor="end">{format(t)}</text>
+			{/each}
+			{#each xTicks as t, i (i)}
+				<text class="tick" x={t.at} y={height - 6} text-anchor={i === 0 && t.at - left < 20 ? 'start' : 'middle'}>{t.label}</text>
+			{/each}
+			{#each values as v, k (series[k]!.key)}
+				{#if area}<path d={areaPath(v)} fill={seriesColor(k)} fill-opacity="0.1" />{/if}
+				<path d={path(v)} fill="none" stroke={seriesColor(k)} stroke-width="2" stroke-linejoin="round" stroke-linecap="round" />
+			{/each}
+			{#if active !== null}
+				<line class="grid" x1={px(active)} x2={px(active)} y1={top} y2={top + plotH} style="stroke: var(--tern-border-strong)" />
+			{/if}
+			{#each values as v, k (series[k]!.key)}
+				{@const i = active ?? lastIndex(v, (n) => n !== null)}
+				{#if i >= 0 && v[i] !== null}
+					<circle cx={px(i)} cy={py(v[i]!)} r="4" fill={seriesColor(k)} stroke="var(--tern-surface)" stroke-width="2" />
+				{/if}
+				{#if direct && ends[k] !== null}
+					<text class="direct" x={left + plotW + 10} y={py(ends[k]!)} dy="0.32em">{endLabels[k]}</text>
+				{/if}
+			{/each}
+		</svg>
+		{#if active !== null}
+			<div class="tooltip" style:left="{Math.min(px(active) + 12, width - 170)}px" style:top="{top}px">
+				<div class="head">{formatX(xs[active]!, time)}</div>
+				{#each series as s, k (s.key)}
+					<div class="row"><span class="swatch" style:background={seriesColor(k)}></span><strong>{values[k]![active] === null ? '–' : format(values[k]![active]!)}</strong><span>{s.label}</span></div>
+				{/each}
+			</div>
+		{/if}
+	</div>
+</ChartFrame>

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

@@ -0,0 +1,42 @@
+import { type Series } from './chart.js';
+declare function $$render<Row extends object>(): {
+    props: {
+        data: Row[];
+        /** The field on the x axis: dates (Date or ISO strings), numbers or categories. */
+        x: keyof Row & string;
+        /** Up to eight series; each is a field of numbers. */
+        series: Series<Row>[];
+        title: string;
+        description?: string;
+        level?: 2 | 3 | 4;
+        /** Fill under the lines. */
+        area?: boolean;
+        /** Start the y axis at zero. Turn it off for values far from zero, such as a temperature. */
+        zero?: boolean;
+        height?: number;
+        /** Formats y values on the axis, in tooltips and in the table. */
+        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 LineChart: $$IsomorphicComponent;
+type LineChart<Row extends object> = InstanceType<typeof LineChart<Row>>;
+export default LineChart;

package/dist/ui/Menu.svelte

@@ -0,0 +1,103 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import MenuList from './MenuList.svelte';
+	import type { MenuItem } from './menu.js';
+
+	type Props = {
+		/** The items. Items can have submenus, checkboxes, shortcuts and group headings. */
+		items: MenuItem[];
+		/** The button's content. */
+		children: Snippet;
+		/** Opens to the start or end edge of the button. */
+		align?: 'start' | 'end';
+		variant?: 'secondary' | 'ghost';
+		class?: string;
+	};
+	let { items, children, align = 'start', variant = 'secondary', class: klass = '' }: Props = $props();
+
+	const uid = $props.id();
+	let open = $state(false);
+	let focus = $state<'first' | 'last'>('first');
+	let button = $state<HTMLButtonElement>();
+
+	function show(where: 'first' | 'last') {
+		focus = where;
+		open = true;
+	}
+</script>
+
+<div class="tern-menu {klass}">
+	<button
+		bind:this={button}
+		type="button"
+		class="trigger {variant}"
+		id="tern-menu-{uid}-button"
+		aria-haspopup="menu"
+		aria-expanded={open}
+		aria-controls={open ? `tern-menu-${uid}` : undefined}
+		onclick={() => (open ? (open = false) : show('first'))}
+		onkeydown={(e) => {
+			if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') {
+				e.preventDefault();
+				show('first');
+			} else if (e.key === 'ArrowUp') {
+				e.preventDefault();
+				show('last');
+			}
+		}}
+	>
+		{@render children()}
+		<svg aria-hidden="true" viewBox="0 0 16 16" width="14" height="14"><path d="M4 6l4 4 4-4" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" /></svg>
+	</button>
+	{#if open && button}
+		<MenuList
+			{items}
+			id="tern-menu-{uid}"
+			labelledby="tern-menu-{uid}-button"
+			anchor={button}
+			{align}
+			{focus}
+			inside={() => [button]}
+			onclose={(how) => {
+				open = false;
+				if (how.returnFocus) button?.focus();
+			}}
+		/>
+	{/if}
+</div>
+
+<style>
+	.tern-menu {
+		display: inline-block;
+	}
+	.trigger {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.4rem;
+		height: var(--tern-control-height);
+		padding: 0 0.75rem 0 0.9rem;
+		font: inherit;
+		font-size: 0.875rem;
+		font-weight: 550;
+		color: var(--tern-fg);
+		border-radius: var(--tern-radius-sm);
+		cursor: pointer;
+	}
+	.secondary {
+		background: var(--tern-surface);
+		border: 1px solid var(--tern-border-strong);
+		box-shadow: var(--tern-shadow);
+	}
+	.ghost {
+		background: transparent;
+		border: 1px solid transparent;
+	}
+	.trigger:hover,
+	.trigger[aria-expanded='true'] {
+		background: var(--tern-surface-2);
+	}
+	.trigger:focus-visible {
+		outline: 2px solid var(--tern-ring);
+		outline-offset: 2px;
+	}
+</style>

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

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+import type { MenuItem } from './menu.js';
+type Props = {
+    /** The items. Items can have submenus, checkboxes, shortcuts and group headings. */
+    items: MenuItem[];
+    /** The button's content. */
+    children: Snippet;
+    /** Opens to the start or end edge of the button. */
+    align?: 'start' | 'end';
+    variant?: 'secondary' | 'ghost';
+    class?: string;
+};
+declare const Menu: import("svelte").Component<Props, {}, "">;
+type Menu = ReturnType<typeof Menu>;
+export default Menu;