@ternkit/tern 1.2.1 → 1.4.0

package/dist/ui/Tabs.svelte

@@ -0,0 +1,112 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	type Tab = { id: string; label: string; disabled?: boolean };
+	type Props = {
+		tabs: Tab[];
+		/** The selected tab's id; bind it. Defaults to the first tab. */
+		value?: string;
+		/** Names the tab list for screen readers. */
+		label?: string;
+		class?: string;
+		/** Renders the selected tab's panel. */
+		panel: Snippet<[string]>;
+	};
+	let { tabs, value = $bindable(), label, class: klass = '', panel }: Props = $props();
+	const uid = $props.id();
+	const selected = $derived(value ?? tabs.find((t) => !t.disabled)?.id);
+	const buttons: HTMLButtonElement[] = [];
+
+	// The ARIA tabs pattern: arrow keys move and select, Home and End jump.
+	function onkeydown(e: KeyboardEvent, i: number) {
+		const enabled = tabs.map((t, j) => (t.disabled ? -1 : j)).filter((j) => j >= 0);
+		const at = enabled.indexOf(i);
+		let next: number | undefined;
+		if (e.key === 'ArrowRight') next = enabled[(at + 1) % enabled.length];
+		else if (e.key === 'ArrowLeft') next = enabled[(at - 1 + enabled.length) % enabled.length];
+		else if (e.key === 'Home') next = enabled[0];
+		else if (e.key === 'End') next = enabled[enabled.length - 1];
+		if (next === undefined) return;
+		e.preventDefault();
+		value = tabs[next]!.id;
+		buttons[next]?.focus();
+	}
+</script>
+
+<div class="tern-tabs {klass}">
+	<div class="list" role="tablist" aria-label={label}>
+		{#each tabs as t, i (t.id)}
+			<button
+				bind:this={buttons[i]}
+				type="button"
+				role="tab"
+				id="tern-tab-{uid}-{t.id}"
+				aria-selected={selected === t.id}
+				aria-controls="tern-tabpanel-{uid}-{t.id}"
+				tabindex={selected === t.id ? 0 : -1}
+				disabled={t.disabled}
+				onclick={() => (value = t.id)}
+				onkeydown={(e) => onkeydown(e, i)}>{t.label}</button
+			>
+		{/each}
+	</div>
+	{#if selected}
+		<div class="panel" role="tabpanel" id="tern-tabpanel-{uid}-{selected}" aria-labelledby="tern-tab-{uid}-{selected}" tabindex="0">
+			{@render panel(selected)}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.list {
+		display: flex;
+		gap: 0.25rem;
+		border-bottom: 1px solid var(--tern-border);
+	}
+	[role='tab'] {
+		position: relative;
+		padding: 0.55rem 0.8rem;
+		margin-bottom: -1px;
+		border: 0;
+		background: transparent;
+		font: inherit;
+		font-size: 0.875rem;
+		font-weight: 550;
+		color: var(--tern-muted);
+		cursor: pointer;
+		border-radius: var(--tern-radius-sm) var(--tern-radius-sm) 0 0;
+		transition: color var(--tern-duration);
+	}
+	[role='tab']:hover:not(:disabled) {
+		color: var(--tern-fg);
+	}
+	[role='tab'][aria-selected='true'] {
+		color: var(--tern-fg);
+	}
+	[role='tab'][aria-selected='true']::after {
+		content: '';
+		position: absolute;
+		left: 0.5rem;
+		right: 0.5rem;
+		bottom: 0;
+		height: 2px;
+		border-radius: 2px;
+		background: var(--tern-accent);
+	}
+	[role='tab']:focus-visible {
+		outline: 2px solid var(--tern-ring);
+		outline-offset: -2px;
+	}
+	[role='tab']:disabled {
+		opacity: 0.45;
+		cursor: not-allowed;
+	}
+	.panel {
+		padding-top: 1rem;
+	}
+	.panel:focus-visible {
+		outline: 2px solid var(--tern-ring);
+		outline-offset: 4px;
+		border-radius: 2px;
+	}
+</style>

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

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+type Tab = {
+    id: string;
+    label: string;
+    disabled?: boolean;
+};
+type Props = {
+    tabs: Tab[];
+    /** The selected tab's id; bind it. Defaults to the first tab. */
+    value?: string;
+    /** Names the tab list for screen readers. */
+    label?: string;
+    class?: string;
+    /** Renders the selected tab's panel. */
+    panel: Snippet<[string]>;
+};
+declare const Tabs: import("svelte").Component<Props, {}, "value">;
+type Tabs = ReturnType<typeof Tabs>;
+export default Tabs;

package/dist/ui/Textarea.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+	import type { HTMLTextareaAttributes } from 'svelte/elements';
+	import { getField } from './field.js';
+
+	type Props = HTMLTextareaAttributes & { value?: unknown };
+	const field = getField();
+	let { value = $bindable(field?.value), class: klass = '', rows = 4, ...rest }: Props = $props();
+</script>
+
+<textarea
+	class="tern-textarea {klass}"
+	id={field?.id}
+	aria-describedby={field?.describedBy}
+	aria-invalid={field?.invalid || undefined}
+	required={field?.required}
+	disabled={field?.disabled}
+	{rows}
+	name={field?.name}
+	{...rest}
+	bind:value
+></textarea>
+
+<style>
+	.tern-textarea {
+		width: 100%;
+		box-sizing: border-box;
+		padding: 0.5rem 0.75rem;
+		font: inherit;
+		font-size: 0.875rem;
+		line-height: 1.5;
+		color: var(--tern-fg);
+		background: var(--tern-surface);
+		border: 1px solid var(--tern-border-strong);
+		border-radius: var(--tern-radius-sm);
+		resize: vertical;
+		transition:
+			border-color var(--tern-duration),
+			box-shadow var(--tern-duration);
+	}
+	.tern-textarea: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-textarea[aria-invalid='true'] {
+		border-color: var(--tern-danger);
+	}
+	.tern-textarea:disabled {
+		opacity: 0.6;
+		cursor: not-allowed;
+	}
+</style>

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

@@ -0,0 +1,7 @@
+import type { HTMLTextareaAttributes } from 'svelte/elements';
+type Props = HTMLTextareaAttributes & {
+    value?: unknown;
+};
+declare const Textarea: import("svelte").Component<Props, {}, "value">;
+type Textarea = ReturnType<typeof Textarea>;
+export default Textarea;

package/dist/ui/Toaster.svelte

@@ -0,0 +1,146 @@
+<script lang="ts">
+	import { dismiss, toasts, type Toast } from './toast.svelte.js';
+
+	type Props = { position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left' };
+	let { position = 'bottom-right' }: Props = $props();
+
+	// Each toast's timer pauses while it is hovered or focused.
+	function timed(node: HTMLElement, t: Toast) {
+		if (!t.duration) return;
+		let left = t.duration;
+		let started = Date.now();
+		let timer = setTimeout(() => dismiss(t.id), left);
+		const pause = () => {
+			clearTimeout(timer);
+			left -= Date.now() - started;
+		};
+		const resume = () => {
+			started = Date.now();
+			clearTimeout(timer);
+			timer = setTimeout(() => dismiss(t.id), Math.max(left, 1000));
+		};
+		node.addEventListener('pointerenter', pause);
+		node.addEventListener('pointerleave', resume);
+		node.addEventListener('focusin', pause);
+		node.addEventListener('focusout', resume);
+		return { destroy: () => clearTimeout(timer) };
+	}
+	const polite = $derived(toasts.filter((t) => t.tone !== 'danger'));
+	const urgent = $derived(toasts.filter((t) => t.tone === 'danger'));
+</script>
+
+{#snippet list(items: Toast[])}
+	{#each items as t (t.id)}
+		<li class="toast {t.tone}" use:timed={t}>
+			<div class="text">
+				<p class="message">{t.message}</p>
+				{#if t.description}<p class="description">{t.description}</p>{/if}
+			</div>
+			<button type="button" aria-label="Dismiss" onclick={() => dismiss(t.id)}>
+				<svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true"><path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" /></svg>
+			</button>
+		</li>
+	{/each}
+{/snippet}
+
+<section class="tern-toaster {position}" aria-label="Notifications">
+	<!-- Errors are announced at once; the rest when the reader is idle. -->
+	<ol aria-live="assertive" aria-relevant="additions">{@render list(urgent)}</ol>
+	<ol aria-live="polite" aria-relevant="additions">{@render list(polite)}</ol>
+</section>
+
+<style>
+	.tern-toaster {
+		position: fixed;
+		z-index: 100;
+		display: grid;
+		gap: 0.5rem;
+		width: min(22rem, calc(100vw - 2rem));
+		pointer-events: none;
+	}
+	.bottom-right {
+		right: 1rem;
+		bottom: 1rem;
+	}
+	.bottom-left {
+		left: 1rem;
+		bottom: 1rem;
+	}
+	.top-right {
+		right: 1rem;
+		top: 1rem;
+	}
+	.top-left {
+		left: 1rem;
+		top: 1rem;
+	}
+	ol {
+		display: grid;
+		gap: 0.5rem;
+		margin: 0;
+		padding: 0;
+		list-style: none;
+	}
+	.toast {
+		display: flex;
+		align-items: flex-start;
+		gap: 0.75rem;
+		padding: 0.8rem 0.9rem;
+		background: var(--tern-surface);
+		color: var(--tern-fg);
+		border: 1px solid var(--tern-border);
+		border-left: 3px solid var(--tern-border-strong);
+		border-radius: var(--tern-radius);
+		box-shadow: var(--tern-shadow-lg);
+		pointer-events: auto;
+		animation: slide var(--tern-duration) ease-out;
+	}
+	.success {
+		border-left-color: var(--tern-success);
+	}
+	.danger {
+		border-left-color: var(--tern-danger);
+	}
+	.warning {
+		border-left-color: var(--tern-warning);
+	}
+	.text {
+		flex: 1;
+		min-width: 0;
+	}
+	p {
+		margin: 0;
+	}
+	.message {
+		font-size: 0.875rem;
+		font-weight: 550;
+	}
+	.description {
+		margin-top: 0.15rem;
+		font-size: 0.8125rem;
+		color: var(--tern-muted);
+	}
+	button {
+		display: grid;
+		place-items: center;
+		width: 1.5rem;
+		height: 1.5rem;
+		border: 0;
+		border-radius: var(--tern-radius-sm);
+		background: transparent;
+		color: var(--tern-muted);
+		cursor: pointer;
+	}
+	button:hover {
+		background: var(--tern-surface-2);
+	}
+	button:focus-visible {
+		outline: 2px solid var(--tern-ring);
+	}
+	@keyframes slide {
+		from {
+			opacity: 0;
+			transform: translateY(6px);
+		}
+	}
+</style>

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

@@ -0,0 +1,6 @@
+type Props = {
+    position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+};
+declare const Toaster: import("svelte").Component<Props, {}, "">;
+type Toaster = ReturnType<typeof Toaster>;
+export default Toaster;

package/dist/ui/Toggle.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+
+	type Props = Omit<HTMLButtonAttributes, 'value'> & {
+		/** Whether it's on; bind it. */
+		pressed?: boolean;
+		variant?: 'secondary' | 'ghost';
+		size?: 'sm' | 'md';
+		/** Posts value (or "on") under this name while pressed. */
+		name?: string;
+		value?: string;
+		/** The label. For an icon alone, set aria-label. */
+		children: Snippet;
+		onchange?: (pressed: boolean) => void;
+	};
+	let { pressed = $bindable(false), variant = 'secondary', size = 'md', name, value = 'on', class: klass = '', children, onchange, ...rest }: Props = $props();
+</script>
+
+<button
+	type="button"
+	class="tern-toggle {variant} {size} {klass}"
+	aria-pressed={pressed}
+	{...rest}
+	onclick={() => {
+		pressed = !pressed;
+		onchange?.(pressed);
+	}}
+>
+	{@render children()}
+</button>
+{#if name && pressed}<input type="hidden" {name} {value} />{/if}
+
+<style>
+	.tern-toggle {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		gap: 0.4rem;
+		height: var(--tern-control-height);
+		min-width: var(--tern-control-height);
+		padding: 0 0.7rem;
+		font: inherit;
+		font-size: 0.875rem;
+		font-weight: 550;
+		color: var(--tern-muted);
+		border: 1px solid transparent;
+		border-radius: var(--tern-radius-sm);
+		background: transparent;
+		cursor: pointer;
+		transition:
+			background-color var(--tern-duration),
+			color var(--tern-duration);
+	}
+	.secondary {
+		border-color: var(--tern-border-strong);
+		background: var(--tern-surface);
+	}
+	.sm {
+		height: calc(var(--tern-control-height) - 0.5rem);
+		min-width: calc(var(--tern-control-height) - 0.5rem);
+		padding: 0 0.5rem;
+		font-size: 0.8125rem;
+	}
+	.tern-toggle:hover:not(:disabled) {
+		color: var(--tern-fg);
+		background: var(--tern-surface-2);
+	}
+	.tern-toggle[aria-pressed='true'] {
+		color: var(--tern-fg);
+		background: var(--tern-accent-soft);
+		border-color: color-mix(in oklch, var(--tern-accent) 45%, transparent);
+	}
+	.tern-toggle:focus-visible {
+		outline: 2px solid var(--tern-ring);
+		outline-offset: 2px;
+	}
+	.tern-toggle:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+</style>

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

@@ -0,0 +1,17 @@
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+type Props = Omit<HTMLButtonAttributes, 'value'> & {
+    /** Whether it's on; bind it. */
+    pressed?: boolean;
+    variant?: 'secondary' | 'ghost';
+    size?: 'sm' | 'md';
+    /** Posts value (or "on") under this name while pressed. */
+    name?: string;
+    value?: string;
+    /** The label. For an icon alone, set aria-label. */
+    children: Snippet;
+    onchange?: (pressed: boolean) => void;
+};
+declare const Toggle: import("svelte").Component<Props, {}, "pressed">;
+type Toggle = ReturnType<typeof Toggle>;
+export default Toggle;

package/dist/ui/ToggleGroup.svelte

@@ -0,0 +1,143 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { getField } from './field.js';
+
+	type Option = { value: string; label: string; disabled?: boolean; icon?: Snippet };
+	type Props = {
+		options: Option[];
+		/** single: one at a time, like radio buttons; multiple: any number, like checkboxes. */
+		type?: 'single' | 'multiple';
+		/** The chosen value (single) or values (multiple); bind it. */
+		value?: string | string[] | null;
+		/** Labels the group when it isn't in a Field. */
+		label?: string;
+		/** Show only the icons; the labels stay for screen readers. */
+		iconsOnly?: boolean;
+		/** Posts the chosen values under this name. */
+		name?: string;
+		size?: 'sm' | 'md';
+		disabled?: boolean;
+		class?: string;
+		onchange?: (value: string | string[] | null) => void;
+	};
+	const field = getField();
+	let { options, type = 'single', value = $bindable(type === 'multiple' ? [] : null), label, iconsOnly = false, name: nameProp, size = 'md', disabled = false, class: klass = '', onchange }: Props = $props();
+	const name = $derived(nameProp ?? field?.name);
+
+	field?.custom();
+	const buttons: HTMLButtonElement[] = [];
+	const chosen = (v: string) => (Array.isArray(value) ? value.includes(v) : value === v);
+	const enabled = $derived(options.map((o, i) => ({ o, i })).filter(({ o }) => !o.disabled && !disabled));
+	// Roving tabindex: the chosen item, else the first enabled one.
+	const tabStop = $derived(enabled.find(({ o }) => chosen(o.value))?.i ?? enabled[0]?.i ?? -1);
+
+	function pick(v: string) {
+		if (type === 'multiple') {
+			const list = Array.isArray(value) ? value : [];
+			value = list.includes(v) ? list.filter((x) => x !== v) : [...list, v];
+		} else value = value === v ? null : v;
+		onchange?.(value);
+	}
+
+	function onkeydown(e: KeyboardEvent, i: number) {
+		const pos = enabled.findIndex((x) => x.i === i);
+		let next: number | undefined;
+		if (e.key === 'ArrowRight' || e.key === 'ArrowDown') next = enabled[(pos + 1) % enabled.length]?.i;
+		else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') next = enabled[(pos - 1 + enabled.length) % enabled.length]?.i;
+		else if (e.key === 'Home') next = enabled[0]?.i;
+		else if (e.key === 'End') next = enabled[enabled.length - 1]?.i;
+		if (next === undefined) return;
+		e.preventDefault();
+		buttons[next]?.focus();
+		// Like radio buttons, moving selects in single mode.
+		if (type === 'single') {
+			value = options[next]!.value;
+			onchange?.(value);
+		}
+	}
+</script>
+
+<div
+	class="tern-toggle-group {size} {klass}"
+	role={type === 'single' ? 'radiogroup' : 'group'}
+	aria-label={field ? undefined : label}
+	aria-labelledby={field?.labelId}
+	aria-describedby={field?.describedBy}
+>
+	{#each options as option, i (option.value)}
+		<button
+			bind:this={buttons[i]}
+			id={i === tabStop ? field?.id : undefined}
+			type="button"
+			role={type === 'single' ? 'radio' : undefined}
+			aria-checked={type === 'single' ? chosen(option.value) : undefined}
+			aria-pressed={type === 'multiple' ? chosen(option.value) : undefined}
+			aria-label={iconsOnly ? option.label : undefined}
+			title={iconsOnly ? option.label : undefined}
+			tabindex={i === tabStop ? 0 : -1}
+			disabled={option.disabled || disabled || field?.disabled}
+			onclick={() => pick(option.value)}
+			onkeydown={(e) => onkeydown(e, i)}
+		>
+			{#if option.icon}{@render option.icon()}{/if}
+			{#if !iconsOnly}{option.label}{/if}
+		</button>
+	{/each}
+</div>
+{#if name}
+	{#each options.filter((o) => chosen(o.value)) as o (o.value)}<input type="hidden" {name} value={o.value} />{/each}
+{/if}
+
+<style>
+	.tern-toggle-group {
+		display: inline-flex;
+		gap: 0.125rem;
+		padding: 0.2rem;
+		background: var(--tern-surface-2);
+		border: 1px solid var(--tern-border);
+		border-radius: var(--tern-radius);
+		width: fit-content;
+	}
+	button {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		gap: 0.4rem;
+		height: calc(var(--tern-control-height) - 0.4rem);
+		min-width: calc(var(--tern-control-height) - 0.4rem);
+		padding: 0 0.7rem;
+		font: inherit;
+		font-size: 0.875rem;
+		font-weight: 550;
+		color: var(--tern-muted);
+		background: transparent;
+		border: 0;
+		border-radius: var(--tern-radius-sm);
+		cursor: pointer;
+		transition:
+			background-color var(--tern-duration),
+			color var(--tern-duration);
+	}
+	.sm button {
+		height: calc(var(--tern-control-height) - 0.8rem);
+		padding: 0 0.5rem;
+		font-size: 0.8125rem;
+	}
+	button:hover:not(:disabled) {
+		color: var(--tern-fg);
+	}
+	button[aria-checked='true'],
+	button[aria-pressed='true'] {
+		color: var(--tern-fg);
+		background: var(--tern-surface);
+		box-shadow: var(--tern-shadow);
+	}
+	button:focus-visible {
+		outline: 2px solid var(--tern-ring);
+		outline-offset: 1px;
+	}
+	button:disabled {
+		opacity: 0.45;
+		cursor: not-allowed;
+	}
+</style>

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

@@ -0,0 +1,27 @@
+import type { Snippet } from 'svelte';
+type Option = {
+    value: string;
+    label: string;
+    disabled?: boolean;
+    icon?: Snippet;
+};
+type Props = {
+    options: Option[];
+    /** single: one at a time, like radio buttons; multiple: any number, like checkboxes. */
+    type?: 'single' | 'multiple';
+    /** The chosen value (single) or values (multiple); bind it. */
+    value?: string | string[] | null;
+    /** Labels the group when it isn't in a Field. */
+    label?: string;
+    /** Show only the icons; the labels stay for screen readers. */
+    iconsOnly?: boolean;
+    /** Posts the chosen values under this name. */
+    name?: string;
+    size?: 'sm' | 'md';
+    disabled?: boolean;
+    class?: string;
+    onchange?: (value: string | string[] | null) => void;
+};
+declare const ToggleGroup: import("svelte").Component<Props, {}, "value">;
+type ToggleGroup = ReturnType<typeof ToggleGroup>;
+export default ToggleGroup;