@ternkit/tern 1.2.1 → 1.4.0

package/dist/ui/DatePicker.svelte

@@ -0,0 +1,138 @@
+<script lang="ts">
+	import Calendar, { type DateRange } from './Calendar.svelte';
+	import Popover from './Popover.svelte';
+	import { format, type ISODate } from './dates.js';
+	import { getField } from './field.js';
+
+	type Props = {
+		mode?: 'single' | 'range';
+		/** The chosen day (single) or { start, end } (range), as ISO dates; bind it. */
+		value?: ISODate | null | DateRange;
+		placeholder?: string;
+		/** Labels it when it isn't in a Field. */
+		label?: string;
+		/** Posts the date as YYYY-MM-DD under this name; a range posts name and name + "_end". */
+		name?: string;
+		min?: ISODate;
+		max?: ISODate;
+		isDisabled?: (date: ISODate) => boolean;
+		locale?: string;
+		weekStart?: number;
+		/** How the chosen date is shown. */
+		display?: Intl.DateTimeFormatOptions;
+		disabled?: boolean;
+		class?: string;
+		onchange?: (value: ISODate | DateRange) => void;
+	};
+	const field = getField();
+	let {
+		mode = 'single',
+		value = $bindable(mode === 'range' ? { start: null, end: null } : null),
+		placeholder = mode === 'range' ? 'Pick dates' : 'Pick a date',
+		label,
+		name: nameProp,
+		min,
+		max,
+		isDisabled,
+		locale,
+		weekStart,
+		display = { year: 'numeric', month: 'short', day: 'numeric' },
+		disabled = false,
+		class: klass = '',
+		onchange
+	}: Props = $props();
+	const name = $derived(nameProp ?? field?.name);
+
+	const uid = $props.id();
+	field?.custom();
+	let open = $state(false);
+	const triggerId = field?.id ?? `tern-datepicker-${uid}-trigger`;
+
+	const text = $derived.by(() => {
+		if (mode === 'single') return value ? format(value as ISODate, locale, display) : '';
+		const r = value as DateRange | null;
+		if (!r?.start) return '';
+		return `${format(r.start, locale, display)} – ${r.end ? format(r.end, locale, display) : '…'}`;
+	});
+</script>
+
+<Popover bind:open label={label ?? 'Choose a date'} align="start" {triggerId}>
+	{#snippet trigger(props)}
+		<button
+			type="button"
+			class="tern-datepicker {klass}"
+			{...props}
+			aria-labelledby="{field?.labelId ?? `tern-datepicker-${uid}-label`} tern-datepicker-{uid}-value"
+			aria-describedby={field?.describedBy}
+			disabled={disabled || field?.disabled}
+		>
+			<svg aria-hidden="true" viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"><rect x="2.5" y="3.5" width="11" height="10" rx="2" /><path d="M2.5 6.5h11M5.5 2v3M10.5 2v3" /></svg>
+			<span class:placeholder={!text} id="tern-datepicker-{uid}-value">{text || placeholder}</span>
+		</button>
+		{#if !field}<span class="tern-sr-only" id="tern-datepicker-{uid}-label">{label ?? 'Date'}</span>{/if}
+	{/snippet}
+	<Calendar
+		bind:value
+		{mode}
+		{min}
+		{max}
+		{isDisabled}
+		{locale}
+		{weekStart}
+		label={label ?? 'Choose a date'}
+		onselect={(v) => {
+			onchange?.(v);
+			open = false;
+			document.getElementById(triggerId)?.focus();
+		}}
+	/>
+</Popover>
+{#if name}
+	{#if mode === 'single'}
+		<input type="hidden" {name} value={(value as ISODate | null) ?? ''} />
+	{:else}
+		<input type="hidden" {name} value={(value as DateRange | null)?.start ?? ''} />
+		<input type="hidden" name="{name}_end" value={(value as DateRange | null)?.end ?? ''} />
+	{/if}
+{/if}
+
+<style>
+	.tern-datepicker {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.5rem;
+		width: 100%;
+		height: var(--tern-control-height);
+		padding: 0 0.75rem;
+		font: inherit;
+		font-size: 0.875rem;
+		color: var(--tern-fg);
+		text-align: start;
+		background: var(--tern-surface);
+		border: 1px solid var(--tern-border-strong);
+		border-radius: var(--tern-radius-sm);
+		cursor: pointer;
+	}
+	.tern-datepicker svg {
+		flex: none;
+		color: var(--tern-muted);
+	}
+	.tern-datepicker:hover:not(:disabled) {
+		border-color: var(--tern-muted);
+	}
+	.tern-datepicker:focus-visible {
+		outline: none;
+		border-color: var(--tern-accent);
+		box-shadow: 0 0 0 3px color-mix(in oklch, var(--tern-ring) 30%, transparent);
+	}
+	.tern-datepicker[aria-invalid='true'] {
+		border-color: var(--tern-danger);
+	}
+	.tern-datepicker:disabled {
+		opacity: 0.6;
+		cursor: not-allowed;
+	}
+	.placeholder {
+		color: var(--tern-muted);
+	}
+</style>

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

@@ -0,0 +1,25 @@
+import { type DateRange } from './Calendar.svelte';
+import { type ISODate } from './dates.js';
+type Props = {
+    mode?: 'single' | 'range';
+    /** The chosen day (single) or { start, end } (range), as ISO dates; bind it. */
+    value?: ISODate | null | DateRange;
+    placeholder?: string;
+    /** Labels it when it isn't in a Field. */
+    label?: string;
+    /** Posts the date as YYYY-MM-DD under this name; a range posts name and name + "_end". */
+    name?: string;
+    min?: ISODate;
+    max?: ISODate;
+    isDisabled?: (date: ISODate) => boolean;
+    locale?: string;
+    weekStart?: number;
+    /** How the chosen date is shown. */
+    display?: Intl.DateTimeFormatOptions;
+    disabled?: boolean;
+    class?: string;
+    onchange?: (value: ISODate | DateRange) => void;
+};
+declare const DatePicker: import("svelte").Component<Props, {}, "value">;
+type DatePicker = ReturnType<typeof DatePicker>;
+export default DatePicker;

package/dist/ui/Dialog.svelte

@@ -0,0 +1,301 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { trapTab } from './floating.js';
+
+	type Props = {
+		/** Whether the dialog is open; bind it. */
+		open?: boolean;
+		/** The heading, which labels the dialog. */
+		title: string;
+		/** A sentence under the title, read when the dialog opens. */
+		description?: string;
+		/** Close when the backdrop is clicked. Escape always closes. */
+		dismissable?: boolean;
+		size?: 'sm' | 'md' | 'lg';
+		/** center for a dialog; an edge slides it in from there, as Sheet and Drawer do. */
+		side?: 'center' | 'left' | 'right' | 'top' | 'bottom';
+		/** alertdialog for confirmations that interrupt, as AlertDialog uses. */
+		role?: 'dialog' | 'alertdialog';
+		/** Show the close button in the corner. */
+		closeButton?: boolean;
+		/** Drag the panel down to close it, with a handle at the top. For bottom sheets on touch screens. */
+		draggable?: boolean;
+		/** The element to focus when it opens, instead of the first focusable one. */
+		initialFocus?: () => HTMLElement | null | undefined;
+		class?: string;
+		children?: Snippet;
+		/** Buttons at the bottom, such as Cancel and Save. */
+		footer?: Snippet;
+		onclose?: () => void;
+	};
+	let {
+		open = $bindable(false),
+		title,
+		description,
+		dismissable = true,
+		size = 'md',
+		side = 'center',
+		role = 'dialog',
+		closeButton = true,
+		draggable = false,
+		initialFocus,
+		class: klass = '',
+		children,
+		footer,
+		onclose
+	}: Props = $props();
+
+	const uid = $props.id();
+	let dialog = $state<HTMLDialogElement>();
+
+	// The native dialog makes the page inert, closes on Escape and returns
+	// focus to what opened it.
+	$effect(() => {
+		if (!dialog) return;
+		if (open && !dialog.open) {
+			dialog.showModal();
+			const el = initialFocus?.();
+			if (el) el.focus();
+		} else if (!open && dialog.open) dialog.close();
+	});
+
+	// Dragging a bottom sheet down closes it once it passes a quarter of its height.
+	let drag = $state(0);
+	let dragStart: number | null = null;
+	function dragDown(e: PointerEvent) {
+		if (!draggable) return;
+		dragStart = e.clientY;
+		(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+	}
+	function dragMove(e: PointerEvent) {
+		if (dragStart !== null) drag = Math.max(0, e.clientY - dragStart);
+	}
+	function dragEnd(e: PointerEvent) {
+		if (dragStart === null) return;
+		const panel = (e.currentTarget as HTMLElement).closest('.panel') as HTMLElement | null;
+		if (panel && drag > panel.offsetHeight / 4) open = false;
+		dragStart = null;
+		drag = 0;
+	}
+</script>
+
+<dialog
+	bind:this={dialog}
+	class="tern-dialog {size} {side} {klass}"
+	{role}
+	aria-labelledby="tern-dialog-{uid}-title"
+	aria-describedby={description ? `tern-dialog-${uid}-description` : undefined}
+	onclose={() => {
+		open = false;
+		onclose?.();
+	}}
+	onclick={(e) => {
+		if (dismissable && e.target === dialog) open = false;
+	}}
+	onkeydown={(e) => dialog && trapTab(dialog, e)}
+>
+	<div class="panel" style:translate={drag ? `0 ${drag}px` : undefined}>
+		{#if draggable}
+			<div class="handle" aria-hidden="true" onpointerdown={dragDown} onpointermove={dragMove} onpointerup={dragEnd} onpointercancel={dragEnd}><span></span></div>
+		{/if}
+		<header>
+			<h2 id="tern-dialog-{uid}-title">{title}</h2>
+			{#if closeButton}
+				<button type="button" class="close" aria-label="Close" onclick={() => (open = false)}>
+					<svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" /></svg>
+				</button>
+			{/if}
+		</header>
+		{#if description}<p class="description" id="tern-dialog-{uid}-description">{description}</p>{/if}
+		{#if children}<div class="body">{@render children()}</div>{/if}
+		{#if footer}<footer>{@render footer()}</footer>{/if}
+	</div>
+</dialog>
+
+<style>
+	.tern-dialog {
+		padding: 0;
+		border: 0;
+		background: transparent;
+		color: var(--tern-fg);
+		max-width: calc(100vw - 2rem);
+		width: 28rem;
+		overflow: visible;
+	}
+	.sm {
+		width: 22rem;
+	}
+	.lg {
+		width: 40rem;
+	}
+	.tern-dialog::backdrop {
+		background: oklch(0.2 0.02 240 / 0.45);
+		backdrop-filter: blur(2px);
+	}
+	.tern-dialog[open] .panel {
+		animation: rise var(--tern-duration) ease-out;
+	}
+	.panel {
+		display: grid;
+		gap: 1rem;
+		padding: 1.25rem 1.5rem 1.5rem;
+		background: var(--tern-surface);
+		border: 1px solid var(--tern-border);
+		border-radius: calc(var(--tern-radius) + 4px);
+		box-shadow: var(--tern-shadow-lg);
+	}
+	header {
+		display: flex;
+		align-items: flex-start;
+		justify-content: space-between;
+		gap: 1rem;
+	}
+	h2 {
+		margin: 0;
+		font-size: 1.0625rem;
+		font-weight: 650;
+		letter-spacing: -0.01em;
+	}
+	.description {
+		margin: -0.5rem 0 0;
+		color: var(--tern-muted);
+		font-size: 0.875rem;
+	}
+	.close {
+		display: grid;
+		place-items: center;
+		width: 1.75rem;
+		height: 1.75rem;
+		margin: -0.25rem -0.5rem 0 0;
+		border: 0;
+		border-radius: var(--tern-radius-sm);
+		background: transparent;
+		color: var(--tern-muted);
+		cursor: pointer;
+	}
+	.close:hover {
+		background: var(--tern-surface-2);
+		color: var(--tern-fg);
+	}
+	.close:focus-visible {
+		outline: 2px solid var(--tern-ring);
+		outline-offset: 1px;
+	}
+	footer {
+		display: flex;
+		justify-content: flex-end;
+		gap: 0.5rem;
+		margin-top: 0.25rem;
+	}
+	/* Sheets: full height or width, against an edge. */
+	.tern-dialog:not(.center) {
+		margin: 0;
+		max-width: 100vw;
+		max-height: 100vh;
+	}
+	.tern-dialog.left,
+	.tern-dialog.right {
+		height: 100vh;
+		width: min(24rem, 100vw - 3rem);
+	}
+	.tern-dialog.left {
+		margin-right: auto;
+	}
+	.tern-dialog.right {
+		margin-left: auto;
+	}
+	.tern-dialog.top,
+	.tern-dialog.bottom {
+		width: 100vw;
+	}
+	.tern-dialog.top {
+		margin-bottom: auto;
+	}
+	.tern-dialog.bottom {
+		margin-top: auto;
+	}
+	.tern-dialog:not(.center) .panel {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+		box-sizing: border-box;
+		overflow: auto;
+		border-radius: 0;
+	}
+	.tern-dialog.left footer,
+	.tern-dialog.right footer {
+		margin-top: auto;
+	}
+	.left .panel {
+		border-width: 0 1px 0 0;
+	}
+	.right .panel {
+		border-width: 0 0 0 1px;
+	}
+	.top .panel {
+		border-width: 0 0 1px;
+		border-radius: 0 0 calc(var(--tern-radius) + 4px) calc(var(--tern-radius) + 4px);
+	}
+	.bottom .panel {
+		max-height: 85vh;
+		border-width: 1px 0 0;
+		border-radius: calc(var(--tern-radius) + 4px) calc(var(--tern-radius) + 4px) 0 0;
+	}
+	.tern-dialog.left[open] .panel {
+		animation-name: from-left;
+	}
+	.tern-dialog.right[open] .panel {
+		animation-name: from-right;
+	}
+	.tern-dialog.top[open] .panel {
+		animation-name: from-top;
+	}
+	.tern-dialog.bottom[open] .panel {
+		animation-name: from-bottom;
+	}
+	.handle {
+		display: grid;
+		place-items: center;
+		margin: -0.75rem 0 -0.25rem;
+		padding: 0.5rem;
+		cursor: grab;
+		touch-action: none;
+	}
+	.handle span {
+		width: 2.5rem;
+		height: 0.3rem;
+		border-radius: 1rem;
+		background: var(--tern-border-strong);
+	}
+	@keyframes from-left {
+		from {
+			transform: translateX(-100%);
+		}
+	}
+	@keyframes from-right {
+		from {
+			transform: translateX(100%);
+		}
+	}
+	@keyframes from-top {
+		from {
+			transform: translateY(-100%);
+		}
+	}
+	@keyframes from-bottom {
+		from {
+			transform: translateY(100%);
+		}
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.tern-dialog[open] .panel {
+			animation: none !important;
+		}
+	}
+	@keyframes rise {
+		from {
+			opacity: 0;
+			transform: translateY(6px) scale(0.985);
+		}
+	}
+</style>

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

@@ -0,0 +1,30 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    /** Whether the dialog is open; bind it. */
+    open?: boolean;
+    /** The heading, which labels the dialog. */
+    title: string;
+    /** A sentence under the title, read when the dialog opens. */
+    description?: string;
+    /** Close when the backdrop is clicked. Escape always closes. */
+    dismissable?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    /** center for a dialog; an edge slides it in from there, as Sheet and Drawer do. */
+    side?: 'center' | 'left' | 'right' | 'top' | 'bottom';
+    /** alertdialog for confirmations that interrupt, as AlertDialog uses. */
+    role?: 'dialog' | 'alertdialog';
+    /** Show the close button in the corner. */
+    closeButton?: boolean;
+    /** Drag the panel down to close it, with a handle at the top. For bottom sheets on touch screens. */
+    draggable?: boolean;
+    /** The element to focus when it opens, instead of the first focusable one. */
+    initialFocus?: () => HTMLElement | null | undefined;
+    class?: string;
+    children?: Snippet;
+    /** Buttons at the bottom, such as Cancel and Save. */
+    footer?: Snippet;
+    onclose?: () => void;
+};
+declare const Dialog: import("svelte").Component<Props, {}, "open">;
+type Dialog = ReturnType<typeof Dialog>;
+export default Dialog;

package/dist/ui/DonutChart.svelte

@@ -0,0 +1,115 @@
+<script lang="ts" generics="Row extends object">
+	import ChartFrame from './ChartFrame.svelte';
+	import { formatNumber, seriesColor } from './chart.js';
+
+	type Props = {
+		data: Row[];
+		/** The field naming each part. */
+		label: keyof Row & string;
+		/** The field with each part's amount. */
+		value: keyof Row & string;
+		title: string;
+		description?: string;
+		level?: 2 | 3 | 4;
+		/** Parts after this many fold into "Other". */
+		max?: number;
+		/** The total's caption in the middle, such as "visits". */
+		totalLabel?: string;
+		size?: number;
+		format?: (v: number) => string;
+		class?: string;
+	};
+	let { data, label, value, title, description, level, max = 6, totalLabel = 'total', size = 180, format = (v) => formatNumber(v), class: klass = '' }: Props = $props();
+
+	let active = $state<number | null>(null);
+
+	// Biggest first; the tail folds into Other so colors stay distinct.
+	const parts = $derived.by(() => {
+		const rows = data
+			.map((r) => {
+				const o = r as Record<string, unknown>;
+				return { label: String(o[label] ?? ''), value: Math.max(0, Number(o[value]) || 0) };
+			})
+			.sort((a, b) => b.value - a.value);
+		if (rows.length <= max) return rows;
+		const keep = rows.slice(0, max - 1);
+		return [...keep, { label: 'Other', value: rows.slice(max - 1).reduce((a, r) => a + r.value, 0) }];
+	});
+	const total = $derived(parts.reduce((a, p) => a + p.value, 0));
+	const r = $derived(size / 2);
+	const inner = $derived(r * 0.62);
+
+	const arcs = $derived.by(() => {
+		let a = -Math.PI / 2;
+		const gap = parts.length > 1 ? 2 / r : 0; // a 2px surface gap between parts
+		return parts.map((p, i) => {
+			const sweep = total ? (p.value / total) * Math.PI * 2 : 0;
+			const from = a + gap / 2;
+			const to = a + sweep - gap / 2;
+			a += sweep;
+			return { i, d: sweep > gap ? arc(from, to) : '' };
+		});
+	});
+	function arc(from: number, to: number) {
+		const large = to - from > Math.PI ? 1 : 0;
+		const p = (rad: number, a: number) => `${(r + rad * Math.cos(a)).toFixed(2)},${(r + rad * Math.sin(a)).toFixed(2)}`;
+		if (to - from >= Math.PI * 2 - 0.001) return `M${p(r, from)}A${r},${r} 0 1 1 ${p(r, from + Math.PI)}A${r},${r} 0 1 1 ${p(r, from)}M${p(inner, from)}A${inner},${inner} 0 1 0 ${p(inner, from + Math.PI)}A${inner},${inner} 0 1 0 ${p(inner, from)}Z`;
+		return `M${p(r, from)}A${r},${r} 0 ${large} 1 ${p(r, to)}L${p(inner, to)}A${inner},${inner} 0 ${large} 0 ${p(inner, from)}Z`;
+	}
+	const pct = (v: number) => (total ? Math.round((v / total) * 1000) / 10 : 0);
+
+	function onkeydown(e: KeyboardEvent) {
+		const last = parts.length - 1;
+		const moves: Record<string, number> = { ArrowRight: Math.min(last, (active ?? -1) + 1), ArrowDown: Math.min(last, (active ?? -1) + 1), ArrowLeft: Math.max(0, (active ?? 1) - 1), ArrowUp: Math.max(0, (active ?? 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 table = $derived({ headers: [label, value, 'Share'], rows: parts.map((p) => [p.label, format(p.value), `${pct(p.value)}%`]) });
+</script>
+
+<ChartFrame
+	{title}
+	{description}
+	{level}
+	class={klass}
+	legend={parts.map((p, i) => ({ label: `${p.label} · ${pct(p.value)}%`, color: seriesColor(i), kind: 'rect' }))}
+	{table}
+	readout={active === null ? '' : `${parts[active]!.label}: ${format(parts[active]!.value)}, ${pct(parts[active]!.value)}%`}
+>
+	<!-- svelte-ignore a11y_no_noninteractive_tabindex, a11y_no_noninteractive_element_interactions -->
+	<div
+		class="tern-plot donut"
+		role="group"
+		aria-roledescription="chart"
+		aria-label="{title}. Use the arrow keys to read values."
+		tabindex="0"
+		style:width="{size}px"
+		onpointerleave={() => (active = null)}
+		onfocus={() => active === null && (active = 0)}
+		onblur={() => (active = null)}
+		{onkeydown}
+	>
+		<svg width={size} height={size} viewBox="0 0 {size} {size}" aria-hidden="true">
+			{#each arcs as a (a.i)}
+				<path d={a.d} fill={seriesColor(a.i)} fill-rule="evenodd" opacity={active === null || active === a.i ? 1 : 0.5} onpointerenter={() => (active = a.i)} role="presentation" />
+			{/each}
+			<text x={r} y={r - 4} text-anchor="middle" class="total">{active === null ? format(total) : format(parts[active]!.value)}</text>
+			<text x={r} y={r + 14} text-anchor="middle" class="tick">{active === null ? totalLabel : parts[active]!.label}</text>
+		</svg>
+	</div>
+</ChartFrame>
+
+<style>
+	.donut {
+		justify-self: start;
+		max-width: 100%;
+	}
+	.total {
+		fill: var(--tern-fg);
+		font-size: 20px;
+		font-weight: 650;
+		font-variant-numeric: tabular-nums;
+	}
+</style>

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

@@ -0,0 +1,40 @@
+declare function $$render<Row extends object>(): {
+    props: {
+        data: Row[];
+        /** The field naming each part. */
+        label: keyof Row & string;
+        /** The field with each part's amount. */
+        value: keyof Row & string;
+        title: string;
+        description?: string;
+        level?: 2 | 3 | 4;
+        /** Parts after this many fold into "Other". */
+        max?: number;
+        /** The total's caption in the middle, such as "visits". */
+        totalLabel?: string;
+        size?: 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 DonutChart: $$IsomorphicComponent;
+type DonutChart<Row extends object> = InstanceType<typeof DonutChart<Row>>;
+export default DonutChart;

package/dist/ui/Drawer.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import Dialog from './Dialog.svelte';
+
+	type Props = {
+		/** Whether it's open; bind it. */
+		open?: boolean;
+		title: string;
+		description?: string;
+		class?: string;
+		children?: Snippet;
+		footer?: Snippet;
+		onclose?: () => void;
+	};
+	let { open = $bindable(false), ...rest }: Props = $props();
+</script>
+
+<!-- A bottom sheet: slides up, and closes when dragged down, tapped outside or on Escape. -->
+<Dialog bind:open side="bottom" draggable {...rest} />

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

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    /** Whether it's open; bind it. */
+    open?: boolean;
+    title: string;
+    description?: string;
+    class?: string;
+    children?: Snippet;
+    footer?: Snippet;
+    onclose?: () => void;
+};
+declare const Drawer: import("svelte").Component<Props, {}, "open">;
+type Drawer = ReturnType<typeof Drawer>;
+export default Drawer;