@ternkit/tern 1.2.1 → 1.4.0

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

@@ -0,0 +1,18 @@
+type Link = {
+    label: string;
+    href: string;
+    description?: string;
+};
+type Entry = {
+    label: string;
+    href?: string;
+    items?: Link[];
+};
+type Props = {
+    items: Entry[];
+    label?: string;
+    class?: string;
+};
+declare const NavigationMenu: import("svelte").Component<Props, {}, "">;
+type NavigationMenu = ReturnType<typeof NavigationMenu>;
+export default NavigationMenu;

package/dist/ui/Pagination.svelte

@@ -0,0 +1,114 @@
+<script lang="ts">
+	type Props = {
+		/** The current page, from 1; bind it. */
+		page?: number;
+		/** How many pages there are. */
+		pages: number;
+		/** Makes pages links, such as (p) => `?page=${p}`, so they work without JavaScript and can be opened in new tabs. */
+		href?: (page: number) => string;
+		/** Pages shown on each side of the current one. */
+		siblings?: number;
+		label?: string;
+		class?: string;
+		onchange?: (page: number) => void;
+	};
+	let { page = $bindable(1), pages, href, siblings = 1, label = 'Pagination', class: klass = '', onchange }: Props = $props();
+
+	// 1 … 4 5 6 … 20: the ends, the current page and its siblings.
+	const shown = $derived.by(() => {
+		const out: (number | 'gap')[] = [];
+		const from = Math.max(2, page - siblings);
+		const to = Math.min(pages - 1, page + siblings);
+		out.push(1);
+		if (from > 2) out.push(from === 3 ? 2 : 'gap');
+		for (let p = from; p <= to; p++) out.push(p);
+		if (to < pages - 1) out.push(to === pages - 2 ? pages - 1 : 'gap');
+		if (pages > 1) out.push(pages);
+		return out;
+	});
+
+	function go(p: number, e?: MouseEvent) {
+		if (p < 1 || p > pages || p === page) return;
+		if (!href) e?.preventDefault();
+		page = p;
+		onchange?.(p);
+	}
+</script>
+
+{#snippet link(p: number, content: string, aria: string | undefined, disabled: boolean, cls: string)}
+	{#if href && !disabled}
+		<a href={href(p)} class={cls} aria-label={aria} aria-current={p === page && !aria ? 'page' : undefined} onclick={(e) => go(p, e)}>{content}</a>
+	{:else}
+		<button type="button" class={cls} aria-label={aria} aria-current={p === page && !aria ? 'page' : undefined} {disabled} onclick={(e) => go(p, e)}>{content}</button>
+	{/if}
+{/snippet}
+
+<nav class="tern-pagination {klass}" aria-label={label}>
+	<ul>
+		<li>{@render link(page - 1, '‹ Previous', 'Previous page', page <= 1, 'step')}</li>
+		{#each shown as p, i (i)}
+			<li>
+				{#if p === 'gap'}
+					<span class="gap" aria-hidden="true">…</span>
+				{:else}
+					{@render link(p, String(p), undefined, false, 'num')}
+				{/if}
+			</li>
+		{/each}
+		<li>{@render link(page + 1, 'Next ›', 'Next page', page >= pages, 'step')}</li>
+	</ul>
+</nav>
+
+<style>
+	ul {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: 0.25rem;
+		margin: 0;
+		padding: 0;
+		list-style: none;
+	}
+	a,
+	button {
+		display: inline-grid;
+		place-items: center;
+		min-width: 2.25rem;
+		height: 2.25rem;
+		padding: 0 0.6rem;
+		box-sizing: border-box;
+		font: inherit;
+		font-size: 0.875rem;
+		font-weight: 550;
+		font-variant-numeric: tabular-nums;
+		color: var(--tern-fg);
+		text-decoration: none;
+		background: transparent;
+		border: 1px solid transparent;
+		border-radius: var(--tern-radius-sm);
+		cursor: pointer;
+	}
+	a:hover,
+	button:hover:not(:disabled) {
+		background: var(--tern-surface-2);
+	}
+	[aria-current='page'] {
+		background: var(--tern-surface);
+		border-color: var(--tern-border-strong);
+		box-shadow: var(--tern-shadow);
+	}
+	button:disabled {
+		color: var(--tern-muted);
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+	a:focus-visible,
+	button:focus-visible {
+		outline: 2px solid var(--tern-ring);
+		outline-offset: 1px;
+	}
+	.gap {
+		padding: 0 0.25rem;
+		color: var(--tern-muted);
+	}
+</style>

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

@@ -0,0 +1,16 @@
+type Props = {
+    /** The current page, from 1; bind it. */
+    page?: number;
+    /** How many pages there are. */
+    pages: number;
+    /** Makes pages links, such as (p) => `?page=${p}`, so they work without JavaScript and can be opened in new tabs. */
+    href?: (page: number) => string;
+    /** Pages shown on each side of the current one. */
+    siblings?: number;
+    label?: string;
+    class?: string;
+    onchange?: (page: number) => void;
+};
+declare const Pagination: import("svelte").Component<Props, {}, "page">;
+type Pagination = ReturnType<typeof Pagination>;
+export default Pagination;

package/dist/ui/PasswordInput.svelte

@@ -0,0 +1,134 @@
+<script lang="ts">
+	import type { HTMLInputAttributes } from 'svelte/elements';
+	import { getField } from './field.js';
+
+	type Props = Omit<HTMLInputAttributes, 'type'> & {
+		value?: string;
+		/** Whether the password is shown; bind it. */
+		visible?: boolean;
+		/** current-password on sign-in forms, new-password where it's set, so password managers help. */
+		autocomplete?: 'current-password' | 'new-password';
+	};
+	let { value = $bindable(''), visible = $bindable(false), autocomplete = 'current-password', class: klass = '', ...rest }: Props = $props();
+
+	const uid = $props.id();
+	const field = getField();
+	const id = field?.id ?? `tern-password-${uid}`;
+	let input = $state<HTMLInputElement>();
+</script>
+
+<div class="tern-password {klass}">
+	<input
+		bind:this={input}
+		class="input"
+		{id}
+		type={visible ? 'text' : 'password'}
+		{autocomplete}
+		autocapitalize="off"
+		spellcheck="false"
+		aria-describedby={field?.describedBy}
+		aria-invalid={field?.invalid || undefined}
+		required={field?.required}
+		disabled={field?.disabled}
+		name={field?.name}
+		{...rest}
+		bind:value
+	/>
+	<button
+		type="button"
+		class="toggle"
+		aria-label="Show password"
+		aria-pressed={visible}
+		aria-controls={id}
+		disabled={field?.disabled || rest.disabled}
+		onclick={() => {
+			// Keep the caret where it was when the type changes.
+			const at = input?.selectionStart ?? null;
+			visible = !visible;
+			requestAnimationFrame(() => at !== null && input === document.activeElement && input.setSelectionRange(at, at));
+		}}
+	>
+		{#if visible}
+			<svg aria-hidden="true" viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+				<path d="M3 3l14 14" />
+				<path d="M8.6 8.6a2 2 0 002.8 2.8" />
+				<path d="M6.2 6.3C4.4 7.4 3.1 8.9 2.5 10c1.3 2.4 4.2 5 7.5 5 1.4 0 2.7-.4 3.8-1.1" />
+				<path d="M9 5.1c.3 0 .7-.1 1-.1 3.3 0 6.2 2.6 7.5 5-.4.8-1 1.6-1.7 2.4" />
+			</svg>
+		{:else}
+			<svg aria-hidden="true" viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+				<path d="M2.5 10c1.3-2.4 4.2-5 7.5-5s6.2 2.6 7.5 5c-1.3 2.4-4.2 5-7.5 5s-6.2-2.6-7.5-5z" />
+				<circle cx="10" cy="10" r="2.25" />
+			</svg>
+		{/if}
+	</button>
+</div>
+
+<style>
+	.tern-password {
+		position: relative;
+		display: flex;
+		align-items: center;
+	}
+	.input {
+		width: 100%;
+		box-sizing: border-box;
+		height: var(--tern-control-height);
+		padding: 0 2.5rem 0 0.75rem;
+		font: inherit;
+		font-size: 0.875rem;
+		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);
+	}
+	/* Browsers' own reveal buttons would sit next to ours. */
+	.input::-ms-reveal,
+	.input::-ms-clear {
+		display: none;
+	}
+	.input:hover:not(:disabled) {
+		border-color: var(--tern-muted);
+	}
+	.input:focus-visible {
+		outline: none;
+		border-color: var(--tern-accent);
+		box-shadow: 0 0 0 3px color-mix(in oklch, var(--tern-ring) 30%, transparent);
+	}
+	.input[aria-invalid='true'] {
+		border-color: var(--tern-danger);
+	}
+	.input:disabled {
+		opacity: 0.6;
+		cursor: not-allowed;
+	}
+	.toggle {
+		position: absolute;
+		right: 0.3rem;
+		display: grid;
+		place-items: center;
+		width: 1.875rem;
+		height: 1.875rem;
+		padding: 0;
+		color: var(--tern-muted);
+		background: transparent;
+		border: 0;
+		border-radius: calc(var(--tern-radius-sm) - 2px);
+		cursor: pointer;
+	}
+	.toggle:hover:not(:disabled) {
+		color: var(--tern-fg);
+		background: var(--tern-surface-2);
+	}
+	.toggle:focus-visible {
+		outline: 2px solid var(--tern-ring);
+		outline-offset: 0;
+	}
+	.toggle:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+</style>

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

@@ -0,0 +1,11 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+type Props = Omit<HTMLInputAttributes, 'type'> & {
+    value?: string;
+    /** Whether the password is shown; bind it. */
+    visible?: boolean;
+    /** current-password on sign-in forms, new-password where it's set, so password managers help. */
+    autocomplete?: 'current-password' | 'new-password';
+};
+declare const PasswordInput: import("svelte").Component<Props, {}, "value" | "visible">;
+type PasswordInput = ReturnType<typeof PasswordInput>;
+export default PasswordInput;

package/dist/ui/Popover.svelte

@@ -0,0 +1,127 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { float, focusables, type Align, type Side } from './floating.js';
+
+	export type PopoverTrigger = {
+		id: string;
+		'aria-haspopup': 'dialog';
+		'aria-expanded': boolean;
+		'aria-controls': string;
+		onclick: () => void;
+	};
+
+	type Props = {
+		/** Whether it's open; bind it. */
+		open?: boolean;
+		/** A heading shown at the top, which labels the popover. */
+		title?: string;
+		/** Labels the popover when it has no title. */
+		label?: string;
+		side?: Side;
+		align?: Align;
+		/** The button that opens it. Spread the props onto it: {#snippet trigger(props)}<Button {...props}>…</Button>{/snippet} */
+		trigger: Snippet<[PopoverTrigger]>;
+		children: Snippet;
+		class?: string;
+		/** The trigger's id, when it needs a particular one, such as a Field's. */
+		triggerId?: string;
+		onclose?: () => void;
+	};
+	let { open = $bindable(false), title, label, side = 'bottom', align = 'center', trigger, children, class: klass = '', triggerId, onclose }: Props = $props();
+
+	const uid = $props.id();
+	const id = `tern-popover-${uid}`;
+	let panel = $state<HTMLDivElement>();
+	const tid = $derived(triggerId ?? `${id}-trigger`);
+	const anchor = () => document.getElementById(tid);
+
+	function close(returnFocus: boolean) {
+		if (!open) return;
+		open = false;
+		onclose?.();
+		if (returnFocus) anchor()?.focus();
+	}
+
+	$effect(() => {
+		if (!open || !panel) return;
+		const a = anchor();
+		if (!a) return;
+		panel.showPopover?.();
+		const stop = float(panel, a, { side, align, offset: 8 });
+		(focusables(panel)[0] ?? panel).focus({ preventScroll: true });
+		const away = (e: PointerEvent) => {
+			const t = e.target as Node;
+			if (!panel?.contains(t) && !a.contains(t)) close(false);
+		};
+		document.addEventListener('pointerdown', away, true);
+		return () => {
+			stop();
+			document.removeEventListener('pointerdown', away, true);
+		};
+	});
+</script>
+
+{@render trigger({
+	id: tid,
+	'aria-haspopup': 'dialog',
+	'aria-expanded': open,
+	'aria-controls': id,
+	onclick: () => (open ? close(false) : (open = true))
+})}
+{#if open}
+	<div
+		bind:this={panel}
+		{id}
+		class="tern-popover {klass}"
+		role="dialog"
+		aria-labelledby={title ? `${id}-title` : undefined}
+		aria-label={title ? undefined : label}
+		tabindex="-1"
+		popover="manual"
+		onkeydown={(e) => {
+			if (e.key === 'Escape') {
+				e.stopPropagation();
+				close(true);
+			}
+		}}
+		onfocusout={(e) => {
+			const to = e.relatedTarget as Node | null;
+			if (to && !panel?.contains(to) && !anchor()?.contains(to)) close(false);
+		}}
+	>
+		{#if title}<h2 class="title" id="{id}-title">{title}</h2>{/if}
+		{@render children()}
+	</div>
+{/if}
+
+<style>
+	.tern-popover {
+		width: max-content;
+		max-width: min(22rem, calc(100vw - 1rem));
+		padding: 1rem;
+		color: var(--tern-fg);
+		background: var(--tern-surface);
+		border: 1px solid var(--tern-border);
+		border-radius: var(--tern-radius);
+		box-shadow: var(--tern-shadow-lg);
+		font-size: 0.875rem;
+		outline: none;
+		animation: tern-pop-in var(--tern-duration) ease-out;
+	}
+	.title {
+		margin: 0 0 0.5rem;
+		font-size: 0.9375rem;
+		font-weight: 600;
+	}
+	@keyframes tern-pop-in {
+		from {
+			opacity: 0;
+			transform: scale(0.97);
+		}
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.tern-popover {
+			animation: none;
+		}
+	}
+</style>

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

@@ -0,0 +1,29 @@
+import type { Snippet } from 'svelte';
+import { type Align, type Side } from './floating.js';
+export type PopoverTrigger = {
+    id: string;
+    'aria-haspopup': 'dialog';
+    'aria-expanded': boolean;
+    'aria-controls': string;
+    onclick: () => void;
+};
+type Props = {
+    /** Whether it's open; bind it. */
+    open?: boolean;
+    /** A heading shown at the top, which labels the popover. */
+    title?: string;
+    /** Labels the popover when it has no title. */
+    label?: string;
+    side?: Side;
+    align?: Align;
+    /** The button that opens it. Spread the props onto it: {#snippet trigger(props)}<Button {...props}>…</Button>{/snippet} */
+    trigger: Snippet<[PopoverTrigger]>;
+    children: Snippet;
+    class?: string;
+    /** The trigger's id, when it needs a particular one, such as a Field's. */
+    triggerId?: string;
+    onclose?: () => void;
+};
+declare const Popover: import("svelte").Component<Props, {}, "open">;
+type Popover = ReturnType<typeof Popover>;
+export default Popover;

package/dist/ui/Progress.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+	type Props = {
+		/** The progress, from 0 to max; leave it out while the amount is unknown. */
+		value?: number | null;
+		max?: number;
+		/** What is progressing, for screen readers and shown above the bar. */
+		label: string;
+		showLabel?: boolean;
+		class?: string;
+	};
+	let { value = null, max = 100, label, showLabel = false, class: klass = '' }: Props = $props();
+	const pct = $derived(value === null ? null : Math.max(0, Math.min(100, (value / max) * 100)));
+	const uid = $props.id();
+</script>
+
+<div class="tern-progress {klass}">
+	{#if showLabel}
+		<div class="head">
+			<span id="tern-progress-{uid}">{label}</span>
+			{#if pct !== null}<span class="pct">{Math.round(pct)}%</span>{/if}
+		</div>
+	{/if}
+	<div
+		class="track"
+		role="progressbar"
+		aria-label={showLabel ? undefined : label}
+		aria-labelledby={showLabel ? `tern-progress-${uid}` : undefined}
+		aria-valuemin={0}
+		aria-valuemax={max}
+		aria-valuenow={value ?? undefined}
+	>
+		<div class="bar" class:indeterminate={pct === null} style:width={pct === null ? undefined : `${pct}%`}></div>
+	</div>
+</div>
+
+<style>
+	.head {
+		display: flex;
+		justify-content: space-between;
+		margin-bottom: 0.35rem;
+		font-size: 0.8125rem;
+		font-weight: 550;
+	}
+	.pct {
+		color: var(--tern-muted);
+		font-variant-numeric: tabular-nums;
+	}
+	.track {
+		height: 0.5rem;
+		border-radius: 999px;
+		background: var(--tern-surface-2);
+		border: 1px solid var(--tern-border);
+		overflow: hidden;
+	}
+	.bar {
+		height: 100%;
+		border-radius: inherit;
+		background: var(--tern-accent);
+		transition: width var(--tern-duration) ease-out;
+	}
+	.indeterminate {
+		width: 35%;
+		animation: slide 1.2s ease-in-out infinite;
+	}
+	@keyframes slide {
+		from {
+			translate: -100% 0;
+		}
+		to {
+			translate: 300% 0;
+		}
+	}
+</style>

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

@@ -0,0 +1,12 @@
+type Props = {
+    /** The progress, from 0 to max; leave it out while the amount is unknown. */
+    value?: number | null;
+    max?: number;
+    /** What is progressing, for screen readers and shown above the bar. */
+    label: string;
+    showLabel?: boolean;
+    class?: string;
+};
+declare const Progress: import("svelte").Component<Props, {}, "">;
+type Progress = ReturnType<typeof Progress>;
+export default Progress;

package/dist/ui/RadioGroup.svelte

@@ -0,0 +1,105 @@
+<script lang="ts">
+	type Option = { value: string; label: string; description?: string; disabled?: boolean };
+	type Props = {
+		/** The group's label, read as the fieldset's legend. */
+		label: string;
+		name: string;
+		options: Option[];
+		value?: string;
+		/** Lay the options out in a row. */
+		inline?: boolean;
+		required?: boolean;
+		disabled?: boolean;
+		class?: string;
+	};
+	let { label, name, options, value = $bindable(), inline = false, required = false, disabled = false, class: klass = '' }: Props = $props();
+	const uid = $props.id();
+</script>
+
+<!-- Native radios: arrow keys move between options, as screen readers expect. -->
+<fieldset class="tern-radios {klass}" class:inline {disabled}>
+	<legend>{label}</legend>
+	<div class="options">
+		{#each options as o, i (o.value)}
+			<label class="option">
+				<input type="radio" {name} value={o.value} bind:group={value} disabled={o.disabled} {required} aria-describedby={o.description ? `tern-radio-${uid}-${i}` : undefined} />
+				<span class="dot" aria-hidden="true"></span>
+				<span class="text">
+					{o.label}
+					{#if o.description}<span class="description" id="tern-radio-{uid}-{i}">{o.description}</span>{/if}
+				</span>
+			</label>
+		{/each}
+	</div>
+</fieldset>
+
+<style>
+	fieldset {
+		border: 0;
+		padding: 0;
+		margin: 0;
+		min-width: 0;
+	}
+	legend {
+		font-size: 0.875rem;
+		font-weight: 550;
+		margin-bottom: 0.5rem;
+		padding: 0;
+	}
+	.options {
+		display: grid;
+		gap: 0.5rem;
+	}
+	.inline .options {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 1.25rem;
+	}
+	.option {
+		position: relative;
+		display: inline-flex;
+		align-items: flex-start;
+		gap: 0.6rem;
+		font-size: 0.875rem;
+		cursor: pointer;
+	}
+	input {
+		position: absolute;
+		opacity: 0;
+		width: 1.125rem;
+		height: 1.125rem;
+		margin: 0.1rem 0 0;
+		cursor: inherit;
+	}
+	.dot {
+		flex: none;
+		width: 1.125rem;
+		height: 1.125rem;
+		margin-top: 0.1rem;
+		box-sizing: border-box;
+		border-radius: 50%;
+		border: 1px solid var(--tern-border-strong);
+		background: var(--tern-surface);
+		transition:
+			border-width var(--tern-duration),
+			border-color var(--tern-duration);
+	}
+	input:checked + .dot {
+		border: 0.33rem solid var(--tern-accent);
+	}
+	input:focus-visible + .dot {
+		outline: 2px solid var(--tern-ring);
+		outline-offset: 2px;
+	}
+	input:disabled ~ * {
+		opacity: 0.55;
+	}
+	.text {
+		display: grid;
+		gap: 0.125rem;
+	}
+	.description {
+		color: var(--tern-muted);
+		font-size: 0.8125rem;
+	}
+</style>

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

@@ -0,0 +1,21 @@
+type Option = {
+    value: string;
+    label: string;
+    description?: string;
+    disabled?: boolean;
+};
+type Props = {
+    /** The group's label, read as the fieldset's legend. */
+    label: string;
+    name: string;
+    options: Option[];
+    value?: string;
+    /** Lay the options out in a row. */
+    inline?: boolean;
+    required?: boolean;
+    disabled?: boolean;
+    class?: string;
+};
+declare const RadioGroup: import("svelte").Component<Props, {}, "value">;
+type RadioGroup = ReturnType<typeof RadioGroup>;
+export default RadioGroup;