@ternkit/tern 1.2.0 → 1.3.0

package/dist/ui/Select.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLSelectAttributes } from 'svelte/elements';
+	import { getField } from './field.js';
+
+	type Option = { value: string; label: string; disabled?: boolean };
+	type Props = HTMLSelectAttributes & {
+		value?: unknown;
+		/** The options, or pass <option> elements as children. */
+		options?: Option[];
+		/** Shown, and not selectable, while nothing is chosen. */
+		placeholder?: string;
+		children?: Snippet;
+	};
+	let { value = $bindable(), options, placeholder, class: klass = '', children, ...rest }: Props = $props();
+	const field = getField();
+</script>
+
+<span class="tern-select {klass}">
+	<select
+		id={field?.id}
+		aria-describedby={field?.describedBy}
+		aria-invalid={field?.invalid || undefined}
+		required={field?.required}
+		disabled={field?.disabled}
+		{...rest}
+		bind:value
+	>
+		{#if placeholder}<option value="" disabled selected={value === undefined || value === ''}>{placeholder}</option>{/if}
+		{#each options ?? [] as o (o.value)}
+			<option value={o.value} disabled={o.disabled}>{o.label}</option>
+		{/each}
+		{@render children?.()}
+	</select>
+	<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>
+</span>
+
+<style>
+	.tern-select {
+		position: relative;
+		display: block;
+	}
+	select {
+		appearance: none;
+		width: 100%;
+		height: var(--tern-control-height);
+		padding: 0 2.25rem 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);
+		cursor: pointer;
+	}
+	select:focus-visible {
+		outline: none;
+		border-color: var(--tern-accent);
+		box-shadow: 0 0 0 3px color-mix(in oklch, var(--tern-ring) 30%, transparent);
+	}
+	select[aria-invalid='true'] {
+		border-color: var(--tern-danger);
+	}
+	select:disabled {
+		opacity: 0.6;
+		cursor: not-allowed;
+	}
+	svg {
+		position: absolute;
+		right: 0.7rem;
+		top: 50%;
+		translate: 0 -50%;
+		pointer-events: none;
+		color: var(--tern-muted);
+	}
+</style>

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

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+import type { HTMLSelectAttributes } from 'svelte/elements';
+type Option = {
+    value: string;
+    label: string;
+    disabled?: boolean;
+};
+type Props = HTMLSelectAttributes & {
+    value?: unknown;
+    /** The options, or pass <option> elements as children. */
+    options?: Option[];
+    /** Shown, and not selectable, while nothing is chosen. */
+    placeholder?: string;
+    children?: Snippet;
+};
+declare const Select: import("svelte").Component<Props, {}, "value">;
+type Select = ReturnType<typeof Select>;
+export default Select;

package/dist/ui/Separator.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	type Props = { vertical?: boolean; class?: string };
+	let { vertical = false, class: klass = '' }: Props = $props();
+</script>
+
+<div class="tern-separator {klass}" class:vertical role="separator" aria-orientation={vertical ? 'vertical' : 'horizontal'}></div>
+
+<style>
+	.tern-separator {
+		height: 1px;
+		width: 100%;
+		background: var(--tern-border);
+	}
+	.vertical {
+		width: 1px;
+		height: auto;
+		align-self: stretch;
+	}
+</style>

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

@@ -0,0 +1,7 @@
+type Props = {
+    vertical?: boolean;
+    class?: string;
+};
+declare const Separator: import("svelte").Component<Props, {}, "">;
+type Separator = ReturnType<typeof Separator>;
+export default Separator;

package/dist/ui/Skeleton.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	type Props = { width?: string; height?: string; radius?: string; class?: string };
+	let { width = '100%', height = '1rem', radius = 'var(--tern-radius-sm)', class: klass = '' }: Props = $props();
+</script>
+
+<!-- Decorative: pair it with a status message, such as aria-busy on the region it stands in for. -->
+<span class="tern-skeleton {klass}" aria-hidden="true" style:width style:height style:border-radius={radius}></span>
+
+<style>
+	.tern-skeleton {
+		display: block;
+		background: linear-gradient(90deg, var(--tern-surface-2) 25%, color-mix(in oklch, var(--tern-surface-2) 60%, var(--tern-border)) 50%, var(--tern-surface-2) 75%);
+		background-size: 200% 100%;
+		animation: shimmer 1.4s ease-in-out infinite;
+	}
+	@keyframes shimmer {
+		from {
+			background-position: 100% 0;
+		}
+		to {
+			background-position: -100% 0;
+		}
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.tern-skeleton {
+			animation: none;
+		}
+	}
+</style>

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

@@ -0,0 +1,9 @@
+type Props = {
+    width?: string;
+    height?: string;
+    radius?: string;
+    class?: string;
+};
+declare const Skeleton: import("svelte").Component<Props, {}, "">;
+type Skeleton = ReturnType<typeof Skeleton>;
+export default Skeleton;

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/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/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,51 @@
+<script lang="ts">
+	import type { HTMLTextareaAttributes } from 'svelte/elements';
+	import { getField } from './field.js';
+
+	type Props = HTMLTextareaAttributes & { value?: unknown };
+	let { value = $bindable(), class: klass = '', rows = 4, ...rest }: Props = $props();
+	const field = getField();
+</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}
+	{...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;