@ternkit/tern 1.2.1 → 1.4.0

package/dist/runtime/validate.js

@@ -0,0 +1,168 @@
+// Checks form values against the rules tern gen writes to ./$forms from a
+// kit.FormAction's validate tags. The checks and messages match
+// internal/formrules in Go, which checks the same rules on the server;
+// internal/formrules/testdata/cases.json keeps the two in step.
+const emailRe = /^[^\s@<>()",;:]+@[^\s@<>()",;:]+\.[^\s@<>()",;:]+$/;
+const intRe = /^[+-]?\d+$/;
+const floatRe = /^[+-]?(\d+\.?\d*|\.\d+)$/;
+const patterns = new Map();
+function truthy(s) {
+    return !['', 'off', 'false', '0', 'no'].includes(s.trim().toLowerCase());
+}
+/** Reads a date or a date and time as Go does, or null. Times without a zone are UTC. */
+export function parseFormTime(kind, s) {
+    if (kind === 'date') {
+        const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(s);
+        if (!m)
+            return null;
+        const [y, mo, d] = [Number(m[1]), Number(m[2]), Number(m[3])];
+        const t = Date.UTC(y, mo - 1, d);
+        const back = new Date(t);
+        return back.getUTCFullYear() === y && back.getUTCMonth() === mo - 1 && back.getUTCDate() === d ? t : null;
+    }
+    const m = /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2})(?::(\d{2}))?$/.exec(s);
+    if (m) {
+        const [y, mo, d, h, mi, se] = m.slice(1).map((x) => Number(x ?? 0));
+        const t = Date.UTC(y, mo - 1, d, h, mi, se);
+        const b = new Date(t);
+        return b.getUTCDate() === d && b.getUTCHours() === h && b.getUTCMinutes() === mi ? t : null;
+    }
+    if (/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(\.\d+)?(Z|[+-]\d{2}:\d{2})$/.test(s)) {
+        const t = Date.parse(s);
+        return Number.isNaN(t) ? null : t;
+    }
+    return null;
+}
+function joinOr(list) {
+    return list.length === 1 ? list[0] : `${list.slice(0, -1).join(', ')} or ${list[list.length - 1]}`;
+}
+const bound = { min: 'at least', max: 'at most', len: 'exactly' };
+/**
+ * Returns why a field's values are invalid, or "". values are its posted
+ * values; other reads another field's first value, for same=.
+ */
+export function checkField(f, values, other = () => '', labelOf = (n) => n) {
+    const msg = (m) => f.message || m;
+    const list = values.filter((v) => v.trim() !== '');
+    const v = values[0] ?? '';
+    const empty = f.kind === 'strings' ? list.length === 0 : f.kind === 'bool' ? !truthy(v) : v.trim() === '';
+    if (empty) {
+        if (!f.required)
+            return '';
+        return msg(f.kind === 'bool' ? `${f.label} must be checked.` : `${f.label} is required.`);
+    }
+    let num = 0;
+    let when = 0;
+    if (f.kind === 'int') {
+        if (!intRe.test(v.trim()))
+            return msg(`${f.label} must be a whole number.`);
+        num = Number(v.trim());
+    }
+    else if (f.kind === 'float') {
+        if (!floatRe.test(v.trim()))
+            return msg(`${f.label} must be a number.`);
+        num = Number(v.trim());
+    }
+    else if (f.kind === 'date' || f.kind === 'datetime') {
+        const t = parseFormTime(f.kind, v.trim());
+        if (t === null)
+            return msg(f.kind === 'date' ? `${f.label} must be a date.` : `${f.label} must be a date and time.`);
+        when = t;
+    }
+    for (const r of f.rules ?? []) {
+        const arg = r.arg ?? '';
+        const n = Number(arg);
+        switch (r.name) {
+            case 'min':
+            case 'max':
+            case 'len': {
+                const low = r.name === 'min';
+                const fails = (c) => (r.name === 'len' && c !== n) || (low && c < n) || (r.name === 'max' && c > n);
+                if (f.kind === 'string') {
+                    if (fails([...v].length))
+                        return msg(`${f.label} must be ${bound[r.name]} ${arg} ${n === 1 ? 'character' : 'characters'}.`);
+                }
+                else if (f.kind === 'int' || f.kind === 'float') {
+                    if (fails(num))
+                        return msg(`${f.label} must be ${bound[r.name]} ${arg}.`);
+                }
+                else if (f.kind === 'date' || f.kind === 'datetime') {
+                    const b = parseFormTime(f.kind, arg) ?? 0;
+                    if ((low && when < b) || (r.name === 'max' && when > b))
+                        return msg(`${f.label} must be on or ${low ? 'after' : 'before'} ${arg}.`);
+                }
+                else if (f.kind === 'strings') {
+                    if (fails(list.length))
+                        return msg(`Choose ${bound[r.name]} ${arg} for ${f.label.toLowerCase()}.`);
+                }
+                break;
+            }
+            case 'email':
+                if (!emailRe.test(v))
+                    return msg(`${f.label} must be an email address.`);
+                break;
+            case 'url': {
+                let ok = false;
+                try {
+                    const u = new URL(v);
+                    ok = (u.protocol === 'http:' || u.protocol === 'https:') && u.host !== '' && !/[ \t\n]/.test(v);
+                }
+                catch {
+                    ok = false;
+                }
+                if (!ok)
+                    return msg(`${f.label} must be a web address starting with http:// or https://.`);
+                break;
+            }
+            case 'pattern': {
+                let re = patterns.get(arg);
+                if (!re)
+                    patterns.set(arg, (re = new RegExp(`^(?:${arg})$`, 'u')));
+                for (const s of f.kind === 'strings' ? list : [v])
+                    if (!re.test(s))
+                        return msg(`${f.label} isn't in the expected format.`);
+                break;
+            }
+            case 'oneof': {
+                const opts = arg.split('|');
+                for (const s of f.kind === 'strings' ? list : [v])
+                    if (!opts.includes(s))
+                        return msg(`${f.label} must be one of ${joinOr(opts)}.`);
+                break;
+            }
+            case 'same':
+                if (other(arg) !== v)
+                    return msg(`${f.label} must match ${labelOf(arg).toLowerCase()}.`);
+                break;
+        }
+    }
+    return '';
+}
+/**
+ * Checks a form against its rules, as kit.FormAction will on the server:
+ *
+ * ```ts
+ * import { forms } from './$forms';
+ * const errors = validate(forms.create, new FormData(formElement));
+ * ```
+ */
+export function validate(fields, data) {
+    const read = (name) => {
+        if (data instanceof FormData)
+            return data.getAll(name).map((v) => (typeof v === 'string' ? v : v.name));
+        const v = data[name];
+        if (v === undefined || v === null || v === false)
+            return [];
+        if (v === true)
+            return ['on'];
+        return Array.isArray(v) ? v.map(String) : [String(v)];
+    };
+    const labels = new Map(fields.map((f) => [f.name, f.label]));
+    const errors = {};
+    for (const f of fields) {
+        const m = checkField(f, read(f.name), (n) => read(n)[0] ?? '', (n) => labels.get(n) ?? n);
+        if (m)
+            errors[f.name] = m;
+    }
+    return errors;
+}

package/dist/server/intl.js

@@ -15,40 +15,83 @@ class NumberFormat {
     format(value) {
         let n = Number(value);
         const o = this.#o;
-        if (!Number.isFinite(n))
-            return Number.isNaN(n) ? 'NaN' : n > 0 ? '∞' : '-∞';
+        const sign = String(o.signDisplay ?? 'auto');
+        if (!Number.isFinite(n)) {
+            if (Number.isNaN(n))
+                return 'NaN';
+            return (n < 0 ? (sign === 'never' ? '' : '-') : sign === 'always' || sign === 'exceptZero' ? '+' : '') + '∞';
+        }
+        const negative = n < 0 || Object.is(n, -0);
         let suffix = '';
         if (o.style === 'percent') {
             n *= 100;
             suffix = '%';
         }
+        const isCurrency = o.style === 'currency';
+        const explicit = o.maximumFractionDigits !== undefined || o.minimumFractionDigits !== undefined;
+        let max = o.maximumFractionDigits ?? (isCurrency ? 2 : o.style === 'percent' ? 0 : 3);
+        const min = o.minimumFractionDigits ?? (isCurrency ? 2 : 0);
+        let abs = Math.abs(n);
         if (o.notation === 'compact') {
-            const abs = Math.abs(n);
-            for (const [limit, s] of [[1e12, 'T'], [1e9, 'B'], [1e6, 'M'], [1e3, 'K']]) {
-                if (abs >= limit) {
-                    n /= limit;
-                    suffix = s + suffix;
+            const long = o.compactDisplay === 'long';
+            const units = [
+                [1e12, 'T', ' trillion'],
+                [1e9, 'B', ' billion'],
+                [1e6, 'M', ' million'],
+                [1e3, 'K', ' thousand'],
+            ];
+            // Like en-US: two significant digits, but never fewer than the
+            // integer part needs.
+            const digits = (x) => (explicit ? Math.max(min, Math.min(max, 20)) : x >= 10 || x === 0 ? 0 : Math.max(0, 1 - Math.floor(Math.log10(x))));
+            const rounded = (x) => Number(x.toFixed(digits(x)));
+            let unit = '';
+            for (let i = 0; i < units.length; i++) {
+                const [limit, short, name] = units[i];
+                if (rounded(abs) >= limit) {
+                    abs /= limit;
+                    unit = long ? name : short;
+                    // 999,999 rounds to 1000K, which is 1M.
+                    if (rounded(abs) >= 1000 && i > 0) {
+                        abs /= 1000;
+                        unit = long ? units[i - 1][2] : units[i - 1][1];
+                    }
                     break;
                 }
             }
+            suffix = unit + suffix;
+            max = digits(abs);
         }
-        const isCurrency = o.style === 'currency';
-        const max = o.maximumFractionDigits ?? (isCurrency ? 2 : o.style === 'percent' ? 0 : o.notation === 'compact' ? 1 : 3);
-        const min = o.minimumFractionDigits ?? (isCurrency ? 2 : 0);
-        let s = Math.abs(n).toFixed(Math.max(min, Math.min(max, 20)));
+        let s = abs.toFixed(o.notation === 'compact' && !explicit ? max : Math.max(min, Math.min(max, 20)));
         if (s.includes('.')) {
             let [int, frac = ''] = s.split('.');
             while (frac.length > min && frac.endsWith('0'))
                 frac = frac.slice(0, -1);
             s = frac ? `${int}.${frac}` : int;
         }
+        const zero = !/[1-9]/.test(s);
         const [int, frac] = s.split('.');
         s = (o.useGrouping === false ? int : group(int)) + (frac ? `.${frac}` : '');
         if (isCurrency) {
             const code = String(o.currency ?? 'USD').toUpperCase();
             s = (code === 'USD' ? '$' : code === 'EUR' ? '€' : code === 'GBP' ? '£' : `${code} `) + s;
         }
-        return (n < 0 ? '-' : '') + s + suffix;
+        let prefix = '';
+        switch (sign) {
+            case 'never':
+                break;
+            case 'always':
+                prefix = negative ? '-' : '+';
+                break;
+            case 'exceptZero':
+                prefix = zero ? '' : negative ? '-' : '+';
+                break;
+            case 'negative':
+                prefix = negative && !zero ? '-' : '';
+                break;
+            default:
+                prefix = negative ? '-' : '';
+        }
+        return prefix + s + suffix;
     }
     formatToParts(value) {
         return [{ type: 'literal', value: this.format(value) }];

package/dist/ui/Accordion.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	type Item = { id: string; title: string };
+	type Props = {
+		items: Item[];
+		/** The open items' ids; bind it. */
+		open?: string[];
+		/** Let several items be open at once. */
+		multiple?: boolean;
+		/** The heading level of the item titles, to fit the page's outline. */
+		level?: 2 | 3 | 4 | 5 | 6;
+		class?: string;
+		/** Renders an item's content. */
+		content: Snippet<[string]>;
+	};
+	let { items, open = $bindable([]), multiple = false, level = 3, class: klass = '', content }: Props = $props();
+	const uid = $props.id();
+
+	function toggle(id: string) {
+		if (open.includes(id)) open = open.filter((x) => x !== id);
+		else open = multiple ? [...open, id] : [id];
+	}
+</script>
+
+<div class="tern-accordion {klass}">
+	{#each items as item (item.id)}
+		{@const expanded = open.includes(item.id)}
+		<div class="item">
+			<div role="heading" aria-level={level}>
+				<button type="button" id="tern-acc-{uid}-{item.id}" aria-expanded={expanded} aria-controls="tern-acc-{uid}-{item.id}-panel" onclick={() => toggle(item.id)}>
+					{item.title}
+					<svg aria-hidden="true" viewBox="0 0 16 16" width="16" height="16"><path d="M4 6l4 4 4-4" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" /></svg>
+				</button>
+			</div>
+			<div class="panel" role="region" id="tern-acc-{uid}-{item.id}-panel" aria-labelledby="tern-acc-{uid}-{item.id}" hidden={!expanded}>
+				{#if expanded}{@render content(item.id)}{/if}
+			</div>
+		</div>
+	{/each}
+</div>
+
+<style>
+	.tern-accordion {
+		border-top: 1px solid var(--tern-border);
+	}
+	.item {
+		border-bottom: 1px solid var(--tern-border);
+	}
+	button {
+		display: flex;
+		width: 100%;
+		align-items: center;
+		justify-content: space-between;
+		gap: 1rem;
+		padding: 0.85rem 0.25rem;
+		border: 0;
+		background: transparent;
+		font: inherit;
+		font-size: 0.9375rem;
+		font-weight: 550;
+		color: var(--tern-fg);
+		text-align: start;
+		cursor: pointer;
+	}
+	button:focus-visible {
+		outline: 2px solid var(--tern-ring);
+		outline-offset: -2px;
+		border-radius: var(--tern-radius-sm);
+	}
+	svg {
+		flex: none;
+		color: var(--tern-muted);
+		transition: rotate var(--tern-duration);
+	}
+	[aria-expanded='true'] svg {
+		rotate: 180deg;
+	}
+	.panel {
+		padding: 0 0.25rem 1rem;
+		color: var(--tern-muted);
+		font-size: 0.875rem;
+	}
+</style>

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

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+type Item = {
+    id: string;
+    title: string;
+};
+type Props = {
+    items: Item[];
+    /** The open items' ids; bind it. */
+    open?: string[];
+    /** Let several items be open at once. */
+    multiple?: boolean;
+    /** The heading level of the item titles, to fit the page's outline. */
+    level?: 2 | 3 | 4 | 5 | 6;
+    class?: string;
+    /** Renders an item's content. */
+    content: Snippet<[string]>;
+};
+declare const Accordion: import("svelte").Component<Props, {}, "open">;
+type Accordion = ReturnType<typeof Accordion>;
+export default Accordion;

package/dist/ui/Alert.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	type Props = {
+		tone?: 'info' | 'success' | 'warning' | 'danger';
+		title?: string;
+		/** Announce it when it appears: true for messages shown in response to something, false for ones on the page from the start. */
+		live?: boolean;
+		class?: string;
+		children?: Snippet;
+	};
+	let { tone = 'info', title, live = false, class: klass = '', children }: Props = $props();
+	const role = $derived(live ? (tone === 'danger' || tone === 'warning' ? 'alert' : 'status') : undefined);
+	const icons = {
+		info: 'M8 7v4M8 5h.01',
+		success: 'M5 8.5l2 2 4-4.5',
+		warning: 'M8 5v3.5M8 11h.01',
+		danger: 'M6 6l4 4M10 6l-4 4'
+	};
+</script>
+
+<div class="tern-alert {tone} {klass}" {role}>
+	<svg class="icon" viewBox="0 0 16 16" width="18" height="18" aria-hidden="true">
+		<circle cx="8" cy="8" r="6.5" fill="none" stroke="currentColor" stroke-width="1.4" />
+		<path d={icons[tone]} fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
+	</svg>
+	<div class="text">
+		{#if title}<p class="title">{title}</p>{/if}
+		{#if children}<div class="body">{@render children()}</div>{/if}
+	</div>
+</div>
+
+<style>
+	.tern-alert {
+		display: flex;
+		gap: 0.7rem;
+		padding: 0.85rem 1rem;
+		border-radius: var(--tern-radius);
+		border: 1px solid;
+		font-size: 0.875rem;
+	}
+	.icon {
+		flex: none;
+		margin-top: 0.05rem;
+	}
+	.title {
+		margin: 0;
+		font-weight: 650;
+	}
+	.body {
+		color: var(--tern-fg);
+	}
+	.title + .body {
+		margin-top: 0.2rem;
+	}
+	.info {
+		background: var(--tern-accent-soft);
+		border-color: color-mix(in oklch, var(--tern-accent) 30%, transparent);
+		color: var(--tern-accent);
+	}
+	.success {
+		background: var(--tern-success-soft);
+		border-color: color-mix(in oklch, var(--tern-success) 30%, transparent);
+		color: color-mix(in oklch, var(--tern-success) 80%, var(--tern-fg));
+	}
+	.warning {
+		background: var(--tern-warning-soft);
+		border-color: color-mix(in oklch, var(--tern-warning) 35%, transparent);
+		color: color-mix(in oklch, var(--tern-warning) 55%, var(--tern-fg));
+	}
+	.danger {
+		background: var(--tern-danger-soft);
+		border-color: color-mix(in oklch, var(--tern-danger) 30%, transparent);
+		color: color-mix(in oklch, var(--tern-danger) 85%, var(--tern-fg));
+	}
+</style>

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

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    tone?: 'info' | 'success' | 'warning' | 'danger';
+    title?: string;
+    /** Announce it when it appears: true for messages shown in response to something, false for ones on the page from the start. */
+    live?: boolean;
+    class?: string;
+    children?: Snippet;
+};
+declare const Alert: import("svelte").Component<Props, {}, "">;
+type Alert = ReturnType<typeof Alert>;
+export default Alert;

package/dist/ui/AlertDialog.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+	import Button from './Button.svelte';
+	import Dialog from './Dialog.svelte';
+	import type { Snippet } from 'svelte';
+
+	type Props = {
+		/** Whether it's open; bind it. */
+		open?: boolean;
+		/** The question, such as "Delete this project?" */
+		title: string;
+		/** What happens, such as "This can't be undone." */
+		description?: string;
+		confirmLabel?: string;
+		cancelLabel?: string;
+		/** Styles the confirm button for destructive actions. */
+		danger?: boolean;
+		/** Runs on confirm. If it returns a promise, the button shows a spinner until it settles, and the dialog stays open if it rejects. */
+		onconfirm: () => void | Promise<unknown>;
+		oncancel?: () => void;
+		/** More content, such as a field to type a name into. */
+		children?: Snippet;
+		/** Disables the confirm button, for example until a name is typed. */
+		confirmDisabled?: boolean;
+		class?: string;
+	};
+	let {
+		open = $bindable(false),
+		title,
+		description,
+		confirmLabel = 'Continue',
+		cancelLabel = 'Cancel',
+		danger = false,
+		onconfirm,
+		oncancel,
+		children,
+		confirmDisabled = false,
+		class: klass = ''
+	}: Props = $props();
+
+	const uid = $props.id();
+	let busy = $state(false);
+	let confirmed = false;
+
+	async function confirm() {
+		busy = true;
+		try {
+			await onconfirm();
+			confirmed = true;
+			open = false;
+		} catch {
+			// Stay open: the caller shows what went wrong.
+		} finally {
+			busy = false;
+		}
+	}
+</script>
+
+<!-- Interrupts to confirm an action. Focus starts on Cancel, so Enter doesn't confirm by accident. -->
+<Dialog
+	bind:open
+	{title}
+	{description}
+	role="alertdialog"
+	size="sm"
+	dismissable={false}
+	closeButton={false}
+	initialFocus={() => document.getElementById(`tern-alert-${uid}-cancel`)}
+	onclose={() => {
+		if (!confirmed) oncancel?.();
+		confirmed = false;
+	}}
+	class={klass}
+	{children}
+>
+	{#snippet footer()}
+		<Button variant="secondary" id="tern-alert-{uid}-cancel" onclick={() => (open = false)} disabled={busy}>{cancelLabel}</Button>
+		<Button variant={danger ? 'danger' : 'primary'} onclick={confirm} loading={busy} disabled={confirmDisabled}>{confirmLabel}</Button>
+	{/snippet}
+</Dialog>

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

@@ -0,0 +1,24 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    /** Whether it's open; bind it. */
+    open?: boolean;
+    /** The question, such as "Delete this project?" */
+    title: string;
+    /** What happens, such as "This can't be undone." */
+    description?: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    /** Styles the confirm button for destructive actions. */
+    danger?: boolean;
+    /** Runs on confirm. If it returns a promise, the button shows a spinner until it settles, and the dialog stays open if it rejects. */
+    onconfirm: () => void | Promise<unknown>;
+    oncancel?: () => void;
+    /** More content, such as a field to type a name into. */
+    children?: Snippet;
+    /** Disables the confirm button, for example until a name is typed. */
+    confirmDisabled?: boolean;
+    class?: string;
+};
+declare const AlertDialog: import("svelte").Component<Props, {}, "open">;
+type AlertDialog = ReturnType<typeof AlertDialog>;
+export default AlertDialog;

package/dist/ui/AreaChart.svelte

@@ -0,0 +1,9 @@
+<script lang="ts" generics="Row extends object">
+	import type { ComponentProps } from 'svelte';
+	import LineChart from './LineChart.svelte';
+
+	let props: Omit<ComponentProps<typeof LineChart<Row>>, 'area'> = $props();
+</script>
+
+<!-- A LineChart with each series' area washed in under its line. -->
+<LineChart {...props} area />

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

@@ -0,0 +1,26 @@
+import type { ComponentProps } from 'svelte';
+import LineChart from './LineChart.svelte';
+declare function $$render<Row extends object>(): {
+    props: Omit<ComponentProps<typeof LineChart<Row>>, "area">;
+    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 AreaChart: $$IsomorphicComponent;
+type AreaChart<Row extends object> = InstanceType<typeof AreaChart<Row>>;
+export default AreaChart;

package/dist/ui/AspectRatio.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	type Props = {
+		/** Width over height, such as 16 / 9. */
+		ratio?: number;
+		children: Snippet;
+		class?: string;
+	};
+	let { ratio = 16 / 9, children, class: klass = '' }: Props = $props();
+</script>
+
+<!-- Keeps its content, such as an image or video, at a ratio as it resizes. -->
+<div class="tern-aspect {klass}" style:aspect-ratio={ratio}>{@render children()}</div>
+
+<style>
+	.tern-aspect {
+		position: relative;
+		width: 100%;
+		overflow: hidden;
+		border-radius: var(--tern-radius);
+	}
+	.tern-aspect > :global(img),
+	.tern-aspect > :global(video),
+	.tern-aspect > :global(iframe) {
+		position: absolute;
+		inset: 0;
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+		border: 0;
+	}
+</style>

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

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    /** Width over height, such as 16 / 9. */
+    ratio?: number;
+    children: Snippet;
+    class?: string;
+};
+declare const AspectRatio: import("svelte").Component<Props, {}, "">;
+type AspectRatio = ReturnType<typeof AspectRatio>;
+export default AspectRatio;