@ternkit/tern 1.2.1 → 1.4.0

package/dist/ui/Slider.svelte

@@ -0,0 +1,196 @@
+<script lang="ts">
+	import { getField } from './field.js';
+
+	type Props = {
+		/** A number for one thumb, or [low, high] for a range; bind it. */
+		value?: number | [number, number];
+		min?: number;
+		max?: number;
+		step?: number;
+		/** Labels it when it isn't in a Field. */
+		label?: string;
+		/** Formats values for screen readers and the tooltip, such as (v) => `${v}%`. */
+		format?: (v: number) => string;
+		/** Posts the value (or both values) under this name. */
+		name?: string;
+		disabled?: boolean;
+		class?: string;
+		onchange?: (value: number | [number, number]) => void;
+	};
+	const field = getField();
+	let { value = $bindable(0), min = 0, max = 100, step = 1, label, format = String, name: nameProp, disabled = false, class: klass = '', onchange }: Props = $props();
+	const name = $derived(nameProp ?? field?.name);
+
+	const uid = $props.id();
+	field?.custom();
+	let track = $state<HTMLDivElement>();
+	const thumbs: HTMLElement[] = [];
+	let dragging = $state<number | null>(null);
+
+	const values = $derived<number[]>(Array.isArray(value) ? value : [value]);
+	const range = $derived(Array.isArray(value));
+	const off = $derived(disabled || !!field?.disabled);
+	const pct = (v: number) => ((v - min) / (max - min || 1)) * 100;
+
+	function snap(v: number) {
+		const s = Math.round((v - min) / step) * step + min;
+		const decimals = (String(step).split('.')[1] ?? '').length;
+		return Math.min(max, Math.max(min, Number(s.toFixed(decimals))));
+	}
+
+	function set(i: number, v: number) {
+		v = snap(v);
+		if (range) {
+			const [lo, hi] = value as [number, number];
+			const next: [number, number] = i === 0 ? [Math.min(v, hi), hi] : [lo, Math.max(v, lo)];
+			if (next[0] === lo && next[1] === hi) return;
+			value = next;
+		} else {
+			if (v === value) return;
+			value = v;
+		}
+		onchange?.(value);
+	}
+
+	function fromPointer(e: PointerEvent) {
+		const r = track!.getBoundingClientRect();
+		return min + ((e.clientX - r.left) / r.width) * (max - min);
+	}
+
+	function down(e: PointerEvent) {
+		if (off || !track) return;
+		e.preventDefault();
+		const v = fromPointer(e);
+		// The nearest thumb moves; on a tie, the one that can go that way.
+		const i = range ? (Math.abs(v - values[0]!) < Math.abs(v - values[1]!) || (v < values[0]! && values[0] === values[1]) ? 0 : 1) : 0;
+		dragging = i;
+		set(i, v);
+		thumbs[i]?.focus();
+		track.setPointerCapture(e.pointerId);
+	}
+
+	function onkeydown(e: KeyboardEvent, i: number) {
+		const big = Math.max(step, (max - min) / 10);
+		const v = values[i]!;
+		const moves: Record<string, number> = {
+			ArrowRight: v + step,
+			ArrowUp: v + step,
+			ArrowLeft: v - step,
+			ArrowDown: v - step,
+			PageUp: v + big,
+			PageDown: v - big,
+			Home: min,
+			End: max
+		};
+		if (!(e.key in moves)) return;
+		e.preventDefault();
+		set(i, moves[e.key]!);
+	}
+</script>
+
+<div class="tern-slider {klass}" class:disabled={off}>
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div
+		bind:this={track}
+		class="track"
+		onpointerdown={down}
+		onpointermove={(e) => dragging !== null && set(dragging, fromPointer(e))}
+		onpointerup={() => (dragging = null)}
+		onpointercancel={() => (dragging = null)}
+	>
+		<div class="fill" style:left="{range ? pct(values[0]!) : 0}%" style:right="{100 - pct(values[values.length - 1]!)}%"></div>
+		{#each values as v, i (i)}
+			<span
+				bind:this={thumbs[i]}
+				class="thumb"
+				class:active={dragging === i}
+				id={i === 0 ? field?.id : undefined}
+				role="slider"
+				tabindex={off ? -1 : 0}
+				style:left="{pct(v)}%"
+				aria-valuemin={range && i === 1 ? values[0] : min}
+				aria-valuemax={range && i === 0 ? values[1] : max}
+				aria-valuenow={v}
+				aria-valuetext={format(v)}
+				aria-disabled={off || undefined}
+				aria-label={field || !label ? undefined : range ? `${label}, ${i === 0 ? 'minimum' : 'maximum'}` : label}
+				aria-labelledby={field ? (range ? `${field.labelId} tern-slider-${uid}-${i}` : field.labelId) : undefined}
+				aria-describedby={field?.describedBy}
+				onkeydown={(e) => onkeydown(e, i)}
+			>
+				<span class="value" aria-hidden="true">{format(v)}</span>
+			</span>
+			{#if range && field}<span class="tern-sr-only" id="tern-slider-{uid}-{i}">{i === 0 ? 'minimum' : 'maximum'}</span>{/if}
+		{/each}
+	</div>
+	{#if name}
+		{#each values as v, i (i)}<input type="hidden" {name} value={v} />{/each}
+	{/if}
+</div>
+
+<style>
+	.tern-slider {
+		padding: 0.6rem 0.5rem;
+		touch-action: none;
+	}
+	.track {
+		position: relative;
+		height: 0.375rem;
+		border-radius: 1rem;
+		background: var(--tern-surface-2);
+		box-shadow: inset 0 0 0 1px var(--tern-border);
+		cursor: pointer;
+	}
+	.fill {
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		border-radius: inherit;
+		background: var(--tern-accent);
+	}
+	.thumb {
+		position: absolute;
+		top: 50%;
+		width: 1.125rem;
+		height: 1.125rem;
+		translate: -50% -50%;
+		border-radius: 50%;
+		background: var(--tern-surface);
+		border: 2px solid var(--tern-accent);
+		box-shadow: var(--tern-shadow);
+		cursor: grab;
+		outline: none;
+		transition: box-shadow var(--tern-duration);
+	}
+	.thumb:focus-visible,
+	.thumb.active {
+		box-shadow: 0 0 0 4px color-mix(in oklch, var(--tern-ring) 35%, transparent);
+	}
+	.value {
+		position: absolute;
+		bottom: calc(100% + 0.4rem);
+		left: 50%;
+		translate: -50% 0;
+		padding: 0.15rem 0.4rem;
+		border-radius: var(--tern-radius-sm);
+		background: var(--tern-fg);
+		color: var(--tern-bg);
+		font-size: 0.75rem;
+		white-space: nowrap;
+		opacity: 0;
+		pointer-events: none;
+		transition: opacity var(--tern-duration);
+	}
+	.thumb:focus-visible .value,
+	.thumb.active .value,
+	.thumb:hover .value {
+		opacity: 1;
+	}
+	.disabled {
+		opacity: 0.5;
+	}
+	.disabled .track,
+	.disabled .thumb {
+		cursor: not-allowed;
+	}
+</style>

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

@@ -0,0 +1,19 @@
+type Props = {
+    /** A number for one thumb, or [low, high] for a range; bind it. */
+    value?: number | [number, number];
+    min?: number;
+    max?: number;
+    step?: number;
+    /** Labels it when it isn't in a Field. */
+    label?: string;
+    /** Formats values for screen readers and the tooltip, such as (v) => `${v}%`. */
+    format?: (v: number) => string;
+    /** Posts the value (or both values) under this name. */
+    name?: string;
+    disabled?: boolean;
+    class?: string;
+    onchange?: (value: number | [number, number]) => void;
+};
+declare const Slider: import("svelte").Component<Props, {}, "value">;
+type Slider = ReturnType<typeof Slider>;
+export default Slider;

package/dist/ui/Sparkline.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	type Props = {
+		values: number[];
+		/** Describes the trend for screen readers, such as "Visits rose 12% this week". */
+		label: string;
+		width?: number;
+		height?: number;
+		class?: string;
+	};
+	let { values, label, width = 96, height = 28, class: klass = '' }: Props = $props();
+
+	const min = $derived(Math.min(...values));
+	const max = $derived(Math.max(...values));
+	const pts = $derived(values.map((v, i) => [2 + (i / Math.max(1, values.length - 1)) * (width - 6), 2 + (1 - (v - min) / (max - min || 1)) * (height - 4)] as const));
+	const d = $derived(pts.map(([x, y], i) => `${i ? 'L' : 'M'}${x.toFixed(1)},${y.toFixed(1)}`).join(''));
+	const last = $derived(pts[pts.length - 1]);
+</script>
+
+<!-- A trend at a glance: the history in a muted line, the latest point in the accent. -->
+<svg class="tern-sparkline {klass}" {width} {height} viewBox="0 0 {width} {height}" role="img" aria-label={label}>
+	<path {d} fill="none" stroke="var(--tern-border-strong)" stroke-width="1.5" stroke-linejoin="round" stroke-linecap="round" />
+	{#if last}<circle cx={last[0]} cy={last[1]} r="2.5" fill="var(--tern-accent)" />{/if}
+</svg>

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

@@ -0,0 +1,11 @@
+type Props = {
+    values: number[];
+    /** Describes the trend for screen readers, such as "Visits rose 12% this week". */
+    label: string;
+    width?: number;
+    height?: number;
+    class?: string;
+};
+declare const Sparkline: import("svelte").Component<Props, {}, "">;
+type Sparkline = ReturnType<typeof Sparkline>;
+export default Sparkline;

package/dist/ui/Spinner.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	type Props = { label?: string; size?: string; class?: string };
+	let { label = 'Loading', size = '1.25rem', class: klass = '' }: Props = $props();
+</script>
+
+<span class="tern-spinner {klass}" role="status" style:--size={size}>
+	<span class="ring" aria-hidden="true"></span>
+	<span class="tern-sr-only">{label}</span>
+</span>
+
+<style>
+	.tern-spinner {
+		display: inline-flex;
+		color: var(--tern-accent);
+	}
+	.ring {
+		width: var(--size);
+		height: var(--size);
+		border-radius: 50%;
+		border: 2px solid color-mix(in oklch, currentColor 20%, transparent);
+		border-top-color: currentColor;
+		animation: spin 0.75s linear infinite;
+	}
+	.tern-sr-only {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		overflow: hidden;
+		clip: rect(0, 0, 0, 0);
+		white-space: nowrap;
+	}
+	@keyframes spin {
+		to {
+			transform: rotate(1turn);
+		}
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.ring {
+			animation-duration: 2s;
+		}
+	}
+</style>

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

@@ -0,0 +1,8 @@
+type Props = {
+    label?: string;
+    size?: string;
+    class?: string;
+};
+declare const Spinner: import("svelte").Component<Props, {}, "">;
+type Spinner = ReturnType<typeof Spinner>;
+export default Spinner;

package/dist/ui/Stat.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+	import Sparkline from './Sparkline.svelte';
+	import { formatNumber } from './chart.js';
+
+	type Props = {
+		/** What it counts, in sentence case, such as "Unique visitors". */
+		label: string;
+		value: number;
+		/** The change, in percent, against the period named in period. */
+		delta?: number;
+		/** Such as "vs last week". */
+		period?: string;
+		/** Whether up is good (visits) or bad (errors), which picks the delta's color. */
+		upIsGood?: boolean;
+		/** Recent values, drawn as a sparkline. */
+		trend?: number[];
+		format?: (v: number) => string;
+		class?: string;
+	};
+	let { label, value, delta, period = 'vs the previous period', upIsGood = true, trend, format = (v) => formatNumber(v), class: klass = '' }: Props = $props();
+
+	const good = $derived(delta === undefined || delta === 0 ? null : delta > 0 === upIsGood);
+	const deltaText = $derived(delta === undefined ? '' : `${delta > 0 ? '+' : delta < 0 ? '−' : ''}${Math.abs(Math.round(delta * 10) / 10)}%`);
+</script>
+
+<div class="tern-stat {klass}">
+	<div class="label">{label}</div>
+	<div class="value">{format(value)}</div>
+	<div class="foot">
+		{#if delta !== undefined}
+			<span class="delta" class:good={good === true} class:bad={good === false}>
+				<span aria-hidden="true">{delta > 0 ? '↑' : delta < 0 ? '↓' : '→'}</span>
+				<span class="tern-sr-only">{delta > 0 ? 'Up' : delta < 0 ? 'Down' : 'No change'}</span>
+				{deltaText}
+			</span>
+			<span class="period">{period}</span>
+		{/if}
+		{#if trend && trend.length > 1}
+			<Sparkline values={trend} label="{label}, trend over the last {trend.length} periods" class="spark" />
+		{/if}
+	</div>
+</div>
+
+<style>
+	.tern-stat {
+		display: grid;
+		gap: 0.25rem;
+		padding: 1rem 1.125rem;
+		background: var(--tern-surface);
+		border: 1px solid var(--tern-border);
+		border-radius: var(--tern-radius);
+	}
+	.label {
+		font-size: 0.8125rem;
+		font-weight: 550;
+		color: var(--tern-muted);
+	}
+	.value {
+		font-size: 1.75rem;
+		font-weight: 650;
+		letter-spacing: -0.02em;
+		font-variant-numeric: tabular-nums;
+		color: var(--tern-fg);
+	}
+	.foot {
+		display: flex;
+		align-items: center;
+		gap: 0.4rem;
+		min-height: 1.75rem;
+		font-size: 0.8125rem;
+	}
+	.delta {
+		display: inline-flex;
+		gap: 0.15rem;
+		font-weight: 600;
+		color: var(--tern-muted);
+		font-variant-numeric: tabular-nums;
+	}
+	.delta.good {
+		color: var(--tern-success);
+	}
+	.delta.bad {
+		color: var(--tern-danger);
+	}
+	.period {
+		color: var(--tern-muted);
+	}
+	.foot :global(.spark) {
+		margin-inline-start: auto;
+	}
+</style>

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

@@ -0,0 +1,18 @@
+type Props = {
+    /** What it counts, in sentence case, such as "Unique visitors". */
+    label: string;
+    value: number;
+    /** The change, in percent, against the period named in period. */
+    delta?: number;
+    /** Such as "vs last week". */
+    period?: string;
+    /** Whether up is good (visits) or bad (errors), which picks the delta's color. */
+    upIsGood?: boolean;
+    /** Recent values, drawn as a sparkline. */
+    trend?: number[];
+    format?: (v: number) => string;
+    class?: string;
+};
+declare const Stat: import("svelte").Component<Props, {}, "">;
+type Stat = ReturnType<typeof Stat>;
+export default Stat;

package/dist/ui/Switch.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+
+	type Props = Omit<HTMLButtonAttributes, 'role'> & {
+		checked?: boolean;
+		/** The label. */
+		children?: Snippet;
+		/** Submitted with a form as on/off under this name. */
+		name?: string;
+	};
+	let { checked = $bindable(false), children, name, disabled, class: klass = '', ...rest }: Props = $props();
+	const uid = $props.id();
+</script>
+
+<span class="tern-switch {klass}">
+	<button
+		type="button"
+		role="switch"
+		aria-checked={checked}
+		aria-labelledby={children ? `tern-switch-${uid}` : undefined}
+		{disabled}
+		{...rest}
+		onclick={(e) => {
+			checked = !checked;
+			rest.onclick?.(e as never);
+		}}
+	>
+		<span class="thumb" aria-hidden="true"></span>
+	</button>
+	{#if children}
+		<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
+		<span class="label" id="tern-switch-{uid}" onclick={() => !disabled && (checked = !checked)}>{@render children()}</span>
+	{/if}
+	{#if name}<input type="hidden" {name} value={checked ? 'on' : 'off'} />{/if}
+</span>
+
+<style>
+	.tern-switch {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.6rem;
+		font-size: 0.875rem;
+	}
+	button {
+		position: relative;
+		flex: none;
+		width: 2.25rem;
+		height: 1.3rem;
+		padding: 0;
+		border-radius: 999px;
+		border: 1px solid var(--tern-border-strong);
+		background: var(--tern-surface-2);
+		cursor: pointer;
+		transition:
+			background-color var(--tern-duration),
+			border-color var(--tern-duration);
+	}
+	.thumb {
+		position: absolute;
+		top: 50%;
+		left: 0.14rem;
+		width: 0.95rem;
+		height: 0.95rem;
+		border-radius: 50%;
+		background: var(--tern-surface);
+		box-shadow: 0 1px 2px oklch(0 0 0 / 0.25);
+		translate: 0 -50%;
+		transition: left var(--tern-duration);
+	}
+	button[aria-checked='true'] {
+		background: var(--tern-accent);
+		border-color: var(--tern-accent);
+	}
+	button[aria-checked='true'] .thumb {
+		left: calc(100% - 0.14rem - 0.95rem);
+	}
+	button:focus-visible {
+		outline: 2px solid var(--tern-ring);
+		outline-offset: 2px;
+	}
+	button:disabled {
+		opacity: 0.55;
+		cursor: not-allowed;
+	}
+	.label {
+		cursor: pointer;
+		user-select: none;
+	}
+</style>

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

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+type Props = Omit<HTMLButtonAttributes, 'role'> & {
+    checked?: boolean;
+    /** The label. */
+    children?: Snippet;
+    /** Submitted with a form as on/off under this name. */
+    name?: string;
+};
+declare const Switch: import("svelte").Component<Props, {}, "checked">;
+type Switch = ReturnType<typeof Switch>;
+export default Switch;

package/dist/ui/Table.svelte

@@ -0,0 +1,70 @@
+<script lang="ts" generics="Row">
+	import type { Snippet } from 'svelte';
+	import type { Column } from './table.js';
+
+
+	type Props = {
+		columns: Column<Row>[];
+		rows: Row[];
+		/** A caption for the table; say what it lists. Hidden visually with hideCaption. */
+		caption: string;
+		hideCaption?: boolean;
+		/** A stable key for each row. */
+		key?: (row: Row) => string | number;
+		/** Shown in place of rows when there are none. */
+		empty?: string;
+		class?: string;
+	};
+	let { columns, rows, caption, hideCaption = false, key = (r) => JSON.stringify(r), empty = 'Nothing to show', class: klass = '' }: Props = $props();
+</script>
+
+<!-- A semantic table, with a caption, column headers and numeric alignment. -->
+<div class="tern-table-wrap {klass}">
+	<table class="tern-table">
+		<caption class:tern-sr-only={hideCaption}>{caption}</caption>
+		<thead>
+			<tr>
+				{#each columns as col (col.key)}<th scope="col" style:text-align={col.align} style:width={col.width}>{col.header}</th>{/each}
+			</tr>
+		</thead>
+		<tbody>
+			{#each rows as row (key(row))}
+				<tr>
+					{#each columns as col (col.key)}
+						<td style:text-align={col.align}>
+							{#if col.cell}{@render col.cell(row)}{:else}{row[col.key] ?? ''}{/if}
+						</td>
+					{/each}
+				</tr>
+			{:else}
+				<tr><td colspan={columns.length} class="empty">{empty}</td></tr>
+			{/each}
+		</tbody>
+	</table>
+</div>
+
+<style>
+	.tern-table-wrap {
+		overflow-x: auto;
+		border: 1px solid var(--tern-border);
+		border-radius: var(--tern-radius);
+		background: var(--tern-surface);
+	}
+	caption {
+		padding: 0.75rem;
+		text-align: start;
+		font-weight: 600;
+		color: var(--tern-fg);
+	}
+	td {
+		font-variant-numeric: tabular-nums;
+	}
+	.tern-table-wrap :global(tbody tr:last-child td) {
+		border-bottom: 0;
+	}
+	.empty {
+		padding: 2rem;
+		text-align: center;
+		color: var(--tern-muted);
+	}
+</style>

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

@@ -0,0 +1,36 @@
+import type { Column } from './table.js';
+declare function $$render<Row>(): {
+    props: {
+        columns: Column<Row>[];
+        rows: Row[];
+        /** A caption for the table; say what it lists. Hidden visually with hideCaption. */
+        caption: string;
+        hideCaption?: boolean;
+        /** A stable key for each row. */
+        key?: (row: Row) => string | number;
+        /** Shown in place of rows when there are none. */
+        empty?: string;
+        class?: string;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Row> {
+    props(): ReturnType<typeof $$render<Row>>['props'];
+    events(): ReturnType<typeof $$render<Row>>['events'];
+    slots(): ReturnType<typeof $$render<Row>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Row>(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>(internal: unknown, props: ReturnType<__sveltets_Render<Row>['props']> & {}): ReturnType<__sveltets_Render<Row>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Table: $$IsomorphicComponent;
+type Table<Row> = InstanceType<typeof Table<Row>>;
+export default Table;