@ternkit/tern 1.3.0 → 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/Resizable.svelte

@@ -0,0 +1,122 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	type Props = {
+		/** The first pane's share, in percent; bind it. */
+		size?: number;
+		min?: number;
+		max?: number;
+		direction?: 'horizontal' | 'vertical';
+		/** Names the handle, such as "Resize sidebar". */
+		label?: string;
+		first: Snippet;
+		second: Snippet;
+		class?: string;
+	};
+	let { size = $bindable(50), min = 15, max = 85, direction = 'horizontal', label = 'Resize', first, second, class: klass = '' }: Props = $props();
+
+	const uid = $props.id();
+	let root = $state<HTMLDivElement>();
+	let dragging = $state(false);
+	const clamp = (v: number) => Math.round(Math.min(max, Math.max(min, v)) * 10) / 10;
+
+	function move(e: PointerEvent) {
+		if (!dragging || !root) return;
+		const r = root.getBoundingClientRect();
+		size = clamp(direction === 'horizontal' ? ((e.clientX - r.left) / r.width) * 100 : ((e.clientY - r.top) / r.height) * 100);
+	}
+	function onkeydown(e: KeyboardEvent) {
+		const back = direction === 'horizontal' ? 'ArrowLeft' : 'ArrowUp';
+		const fwd = direction === 'horizontal' ? 'ArrowRight' : 'ArrowDown';
+		const moves: Record<string, number> = { [back]: size - 5, [fwd]: size + 5, Home: min, End: max };
+		if (!(e.key in moves)) return;
+		e.preventDefault();
+		size = clamp(moves[e.key]!);
+	}
+</script>
+
+<div bind:this={root} class="tern-resizable {direction} {klass}" class:dragging>
+	<div class="pane" id="tern-resizable-{uid}-first" style:flex-basis="{size}%">{@render first()}</div>
+	<!-- A focusable window splitter, as the ARIA pattern has it. -->
+	<!-- svelte-ignore a11y_no_noninteractive_tabindex, a11y_no_noninteractive_element_interactions -->
+	<div
+		class="handle"
+		role="separator"
+		tabindex="0"
+		aria-label={label}
+		aria-controls="tern-resizable-{uid}-first"
+		aria-orientation={direction === 'horizontal' ? 'vertical' : 'horizontal'}
+		aria-valuenow={size}
+		aria-valuemin={min}
+		aria-valuemax={max}
+		onpointerdown={(e) => {
+			dragging = true;
+			(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+		}}
+		onpointermove={move}
+		onpointerup={() => (dragging = false)}
+		onpointercancel={() => (dragging = false)}
+		{onkeydown}
+	></div>
+	<div class="pane second">{@render second()}</div>
+</div>
+
+<style>
+	.tern-resizable {
+		display: flex;
+		width: 100%;
+		height: 100%;
+		min-height: 0;
+		border: 1px solid var(--tern-border);
+		border-radius: var(--tern-radius);
+		overflow: hidden;
+	}
+	.vertical {
+		flex-direction: column;
+	}
+	.pane {
+		flex-shrink: 0;
+		min-width: 0;
+		min-height: 0;
+		overflow: auto;
+	}
+	.second {
+		flex: 1;
+	}
+	.handle {
+		position: relative;
+		flex: none;
+		background: var(--tern-border);
+		touch-action: none;
+		outline: none;
+	}
+	.horizontal > .handle {
+		width: 1px;
+		cursor: col-resize;
+	}
+	.vertical > .handle {
+		height: 1px;
+		cursor: row-resize;
+	}
+	/* A wider target than the line. */
+	.handle::before {
+		content: '';
+		position: absolute;
+		inset: -4px;
+	}
+	.handle:hover,
+	.handle:focus-visible,
+	.dragging > .handle {
+		background: var(--tern-accent);
+	}
+	.handle:focus-visible::after {
+		content: '';
+		position: absolute;
+		inset: -2px;
+		border-radius: 2px;
+		box-shadow: 0 0 0 2px var(--tern-ring);
+	}
+	.dragging {
+		user-select: none;
+	}
+</style>

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

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    /** The first pane's share, in percent; bind it. */
+    size?: number;
+    min?: number;
+    max?: number;
+    direction?: 'horizontal' | 'vertical';
+    /** Names the handle, such as "Resize sidebar". */
+    label?: string;
+    first: Snippet;
+    second: Snippet;
+    class?: string;
+};
+declare const Resizable: import("svelte").Component<Props, {}, "size">;
+type Resizable = ReturnType<typeof Resizable>;
+export default Resizable;

package/dist/ui/ScrollArea.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	type Props = {
+		/** Names the region, so keyboard and screen reader users know what scrolls. */
+		label: string;
+		/** The most it may grow before scrolling, such as "20rem". */
+		maxHeight?: string;
+		orientation?: 'vertical' | 'horizontal' | 'both';
+		children: Snippet;
+		class?: string;
+	};
+	let { label, maxHeight = '20rem', orientation = 'vertical', children, class: klass = '' }: Props = $props();
+</script>
+
+<!-- Focusable, so keyboards can scroll it, with thin scrollbars in the theme's colors. -->
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<div class="tern-scroll {orientation} {klass}" role="region" aria-label={label} tabindex="0" style:max-height={orientation === 'horizontal' ? undefined : maxHeight}>
+	{@render children()}
+</div>
+
+<style>
+	.tern-scroll {
+		scrollbar-width: thin;
+		scrollbar-color: var(--tern-border-strong) transparent;
+		border-radius: var(--tern-radius-sm);
+	}
+	.vertical {
+		overflow-y: auto;
+		overflow-x: hidden;
+	}
+	.horizontal {
+		overflow-x: auto;
+		overflow-y: hidden;
+	}
+	.both {
+		overflow: auto;
+	}
+	.tern-scroll:focus-visible {
+		outline: 2px solid var(--tern-ring);
+		outline-offset: 2px;
+	}
+</style>

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

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    /** Names the region, so keyboard and screen reader users know what scrolls. */
+    label: string;
+    /** The most it may grow before scrolling, such as "20rem". */
+    maxHeight?: string;
+    orientation?: 'vertical' | 'horizontal' | 'both';
+    children: Snippet;
+    class?: string;
+};
+declare const ScrollArea: import("svelte").Component<Props, {}, "">;
+type ScrollArea = ReturnType<typeof ScrollArea>;
+export default ScrollArea;

package/dist/ui/Select.svelte

@@ -12,8 +12,8 @@
 		placeholder?: string;
 		children?: Snippet;
 	};
-	let { value = $bindable(), options, placeholder, class: klass = '', children, ...rest }: Props = $props();
 	const field = getField();
+	let { value = $bindable(field?.value), options, placeholder, class: klass = '', children, ...rest }: Props = $props();
 </script>
 
 <span class="tern-select {klass}">
@@ -23,7 +23,8 @@
 		aria-invalid={field?.invalid || undefined}
 		required={field?.required}
 		disabled={field?.disabled}
-		{...rest}
+		name={field?.name}
+	{...rest}
 		bind:value
 	>
 		{#if placeholder}<option value="" disabled selected={value === undefined || value === ''}>{placeholder}</option>{/if}