@ternkit/tern 1.3.0 → 1.4.0

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/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;

package/dist/ui/Calendar.svelte

@@ -0,0 +1,265 @@
+<script lang="ts">
+	import { tick } from 'svelte';
+	import { addDays, addMonths, format, localeWeekStart, monthGrid, startOfMonth, today, type ISODate } from './dates.js';
+
+	export type DateRange = { start: ISODate | null; end: ISODate | null };
+
+	type Props = {
+		/** single picks a day; range picks a start and an end. */
+		mode?: 'single' | 'range';
+		/** The chosen day (single) or { start, end } (range); bind it. */
+		value?: ISODate | null | DateRange;
+		/** The earliest and latest days that can be picked. */
+		min?: ISODate;
+		max?: ISODate;
+		/** Other days that can't be picked, such as weekends. */
+		isDisabled?: (date: ISODate) => boolean;
+		/** The locale for month and day names; the browser's by default. */
+		locale?: string;
+		/** The first day of the week, 0 for Sunday; the locale's by default. */
+		weekStart?: number;
+		/** Names the calendar for screen readers. */
+		label?: string;
+		class?: string;
+		/** Runs when a day (single) or a whole range is picked. */
+		onselect?: (value: ISODate | DateRange) => void;
+	};
+	let { mode = 'single', value = $bindable(mode === 'range' ? { start: null, end: null } : null), min, max, isDisabled, locale, weekStart, label, class: klass = '', onselect }: Props = $props();
+
+	const uid = $props.id();
+	const id = `tern-calendar-${uid}`;
+	const first = $derived(weekStart ?? localeWeekStart(locale));
+	const range = $derived(mode === 'range' ? ((value as DateRange | null) ?? { start: null, end: null }) : null);
+	const single = $derived(mode === 'single' ? (value as ISODate | null) : null);
+	const now = today();
+	let focused = $state<ISODate>(today());
+	let hovered = $state<ISODate | null>(null);
+	let grid = $state<HTMLTableElement>();
+
+	// Start where the value is.
+	$effect.pre(() => {
+		const start = single ?? range?.start;
+		if (start) focused = start;
+	});
+
+	const weeks = $derived(monthGrid(focused, first));
+	const month = $derived(focused.slice(0, 7));
+	const weekdays = $derived(weeks[0]!.map((d) => ({ short: format(d, locale, { weekday: 'short' }), long: format(d, locale, { weekday: 'long' }) })));
+
+	const blocked = (d: ISODate) => (min !== undefined && d < min) || (max !== undefined && d > max) || !!isDisabled?.(d);
+	const selected = (d: ISODate) => (single ? d === single : !!range && (d === range.start || d === range.end));
+	const between = (d: ISODate) => {
+		if (!range?.start) return false;
+		const end = range.end ?? hovered;
+		if (!end) return false;
+		const [a, b] = range.start <= end ? [range.start, end] : [end, range.start];
+		return d > a && d < b;
+	};
+
+	async function moveTo(d: ISODate) {
+		if (min && d < min) d = min;
+		if (max && d > max) d = max;
+		focused = d;
+		await tick();
+		grid?.querySelector<HTMLElement>(`[data-date="${d}"]`)?.focus();
+	}
+
+	function pick(d: ISODate) {
+		if (blocked(d)) return;
+		focused = d;
+		if (mode === 'single') {
+			value = d;
+			onselect?.(d);
+			return;
+		}
+		const r = range!;
+		if (!r.start || r.end) value = { start: d, end: null };
+		else {
+			const next = d < r.start ? { start: d, end: r.start } : { start: r.start, end: d };
+			value = next;
+			onselect?.(next);
+		}
+	}
+
+	function onkeydown(e: KeyboardEvent) {
+		const dow = (new Date(`${focused}T00:00:00Z`).getUTCDay() - first + 7) % 7;
+		const moves: Record<string, () => ISODate> = {
+			ArrowRight: () => addDays(focused, 1),
+			ArrowLeft: () => addDays(focused, -1),
+			ArrowDown: () => addDays(focused, 7),
+			ArrowUp: () => addDays(focused, -7),
+			Home: () => addDays(focused, -dow),
+			End: () => addDays(focused, 6 - dow),
+			PageDown: () => addMonths(focused, e.shiftKey ? 12 : 1),
+			PageUp: () => addMonths(focused, e.shiftKey ? -12 : -1)
+		};
+		if (e.key in moves) {
+			e.preventDefault();
+			moveTo(moves[e.key]!());
+		} else if (e.key === 'Enter' || e.key === ' ') {
+			e.preventDefault();
+			pick(focused);
+		}
+	}
+
+	const canPrev = $derived(!min || startOfMonth(focused) > min);
+	const canNext = $derived(!max || addMonths(startOfMonth(focused), 1) <= max);
+</script>
+
+<div class="tern-calendar {klass}" role="group" aria-label={label}>
+	<div class="header">
+		<button type="button" class="nav" aria-label="Previous month" disabled={!canPrev} onclick={() => (focused = addMonths(focused, -1))}>
+			<svg aria-hidden="true" viewBox="0 0 16 16" width="16" height="16"><path d="M10 4l-4 4 4 4" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" /></svg>
+		</button>
+		<div class="title" id="{id}-title" aria-live="polite">{format(focused, locale, { month: 'long', year: 'numeric' })}</div>
+		<button type="button" class="nav" aria-label="Next month" disabled={!canNext} onclick={() => (focused = addMonths(focused, 1))}>
+			<svg aria-hidden="true" viewBox="0 0 16 16" width="16" height="16"><path d="M6 4l4 4-4 4" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" /></svg>
+		</button>
+	</div>
+	<table bind:this={grid} role="grid" aria-labelledby="{id}-title" aria-multiselectable={mode === 'range' || undefined}>
+		<thead>
+			<tr>
+				{#each weekdays as w (w.long)}<th scope="col" abbr={w.long}>{w.short}</th>{/each}
+			</tr>
+		</thead>
+		<tbody>
+			{#each weeks as week (week[0])}
+				<tr>
+					{#each week as d (d)}
+						{@const outside = d.slice(0, 7) !== month}
+						<td
+							aria-selected={selected(d)}
+							class:start={range?.start === d && !!(range.end || hovered)}
+							class:end={range?.end === d || (!range?.end && hovered === d && range?.start && range.start < d)}
+							class:between={between(d)}
+						>
+							<button
+								type="button"
+								data-date={d}
+								tabindex={d === focused ? 0 : -1}
+								class="day"
+								class:outside
+								class:selected={selected(d)}
+								aria-label={format(d, locale, { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}
+								aria-current={d === now ? 'date' : undefined}
+								aria-disabled={blocked(d) || undefined}
+								onclick={() => pick(d)}
+								onfocus={() => (focused = d)}
+								onpointerenter={() => (hovered = d)}
+								onpointerleave={() => (hovered = null)}
+								{onkeydown}
+							>
+								{Number(d.slice(8))}
+							</button>
+						</td>
+					{/each}
+				</tr>
+			{/each}
+		</tbody>
+	</table>
+</div>
+
+<style>
+	.tern-calendar {
+		display: inline-grid;
+		gap: 0.5rem;
+		color: var(--tern-fg);
+		font-size: 0.875rem;
+	}
+	.header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+	}
+	.title {
+		font-weight: 600;
+	}
+	.nav {
+		display: grid;
+		place-items: center;
+		width: 2rem;
+		height: 2rem;
+		color: var(--tern-muted);
+		background: transparent;
+		border: 1px solid var(--tern-border);
+		border-radius: var(--tern-radius-sm);
+		cursor: pointer;
+	}
+	.nav:hover:not(:disabled) {
+		color: var(--tern-fg);
+		background: var(--tern-surface-2);
+	}
+	.nav:disabled {
+		opacity: 0.4;
+		cursor: not-allowed;
+	}
+	.nav:focus-visible {
+		outline: 2px solid var(--tern-ring);
+		outline-offset: 1px;
+	}
+	table {
+		border-collapse: collapse;
+	}
+	th {
+		width: 2.25rem;
+		padding-bottom: 0.25rem;
+		font-size: 0.75rem;
+		font-weight: 500;
+		color: var(--tern-muted);
+	}
+	td {
+		padding: 1px 0;
+	}
+	td.between,
+	td.start,
+	td.end {
+		background: var(--tern-accent-soft);
+	}
+	td.start {
+		border-radius: 50% 0 0 50%;
+	}
+	td.end {
+		border-radius: 0 50% 50% 0;
+	}
+	td.start.end {
+		border-radius: 50%;
+	}
+	.day {
+		display: grid;
+		place-items: center;
+		width: 2.25rem;
+		height: 2.25rem;
+		padding: 0;
+		font: inherit;
+		font-variant-numeric: tabular-nums;
+		color: var(--tern-fg);
+		background: transparent;
+		border: 0;
+		border-radius: 50%;
+		cursor: pointer;
+	}
+	.day:hover:not([aria-disabled='true']):not(.selected) {
+		background: var(--tern-surface-2);
+	}
+	.day.outside {
+		color: var(--tern-muted);
+	}
+	.day[aria-current='date'] {
+		font-weight: 700;
+		box-shadow: inset 0 0 0 1px var(--tern-border-strong);
+	}
+	.day.selected {
+		color: var(--tern-accent-fg);
+		background: var(--tern-accent);
+	}
+	.day[aria-disabled='true'] {
+		color: var(--tern-muted);
+		opacity: 0.45;
+		text-decoration: line-through;
+		cursor: not-allowed;
+	}
+	.day:focus-visible {
+		outline: 2px solid var(--tern-ring);
+		outline-offset: 1px;
+	}
+</style>

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

@@ -0,0 +1,28 @@
+import { type ISODate } from './dates.js';
+export type DateRange = {
+    start: ISODate | null;
+    end: ISODate | null;
+};
+type Props = {
+    /** single picks a day; range picks a start and an end. */
+    mode?: 'single' | 'range';
+    /** The chosen day (single) or { start, end } (range); bind it. */
+    value?: ISODate | null | DateRange;
+    /** The earliest and latest days that can be picked. */
+    min?: ISODate;
+    max?: ISODate;
+    /** Other days that can't be picked, such as weekends. */
+    isDisabled?: (date: ISODate) => boolean;
+    /** The locale for month and day names; the browser's by default. */
+    locale?: string;
+    /** The first day of the week, 0 for Sunday; the locale's by default. */
+    weekStart?: number;
+    /** Names the calendar for screen readers. */
+    label?: string;
+    class?: string;
+    /** Runs when a day (single) or a whole range is picked. */
+    onselect?: (value: ISODate | DateRange) => void;
+};
+declare const Calendar: import("svelte").Component<Props, {}, "value">;
+type Calendar = ReturnType<typeof Calendar>;
+export default Calendar;