@ternkit/tern 1.2.1 → 1.3.0

package/dist/ui/Field.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { setField } from './field.js';
+
+	type Props = {
+		/** The visible label. */
+		label: string;
+		/** Help text under the control, read by screen readers with it. */
+		description?: string;
+		/** An error message; marks the control invalid and announces the message. */
+		error?: string | null;
+		required?: boolean;
+		disabled?: boolean;
+		class?: string;
+		/** The control, such as an Input, Textarea or Select. */
+		children: Snippet;
+	};
+	let { label, description, error = null, required = false, disabled = false, class: klass = '', children }: Props = $props();
+
+	const uid = $props.id();
+	const id = `tern-field-${uid}`;
+	setField({
+		id,
+		get describedBy() {
+			return [description ? `${id}-description` : '', error ? `${id}-error` : ''].filter(Boolean).join(' ') || undefined;
+		},
+		get invalid() {
+			return !!error;
+		},
+		get required() {
+			return required;
+		},
+		get disabled() {
+			return disabled;
+		}
+	});
+</script>
+
+<div class="tern-field {klass}" class:disabled>
+	<label for={id}>
+		{label}
+		{#if required}<span class="required" aria-hidden="true">*</span>{/if}
+	</label>
+	{@render children()}
+	{#if description}<p class="description" id="{id}-description">{description}</p>{/if}
+	{#if error}<p class="error" id="{id}-error" role="alert">{error}</p>{/if}
+</div>
+
+<style>
+	.tern-field {
+		display: grid;
+		gap: 0.375rem;
+	}
+	label {
+		font-size: 0.875rem;
+		font-weight: 550;
+		color: var(--tern-fg);
+	}
+	.required {
+		color: var(--tern-danger);
+		margin-inline-start: 0.125rem;
+	}
+	.description {
+		margin: 0;
+		font-size: 0.8125rem;
+		color: var(--tern-muted);
+	}
+	.error {
+		margin: 0;
+		font-size: 0.8125rem;
+		color: var(--tern-danger);
+		font-weight: 500;
+	}
+	.disabled label {
+		opacity: 0.6;
+	}
+</style>

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

@@ -0,0 +1,17 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    /** The visible label. */
+    label: string;
+    /** Help text under the control, read by screen readers with it. */
+    description?: string;
+    /** An error message; marks the control invalid and announces the message. */
+    error?: string | null;
+    required?: boolean;
+    disabled?: boolean;
+    class?: string;
+    /** The control, such as an Input, Textarea or Select. */
+    children: Snippet;
+};
+declare const Field: import("svelte").Component<Props, {}, "">;
+type Field = ReturnType<typeof Field>;
+export default Field;

package/dist/ui/Input.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+	import type { HTMLInputAttributes } from 'svelte/elements';
+	import { getField } from './field.js';
+
+	type Props = HTMLInputAttributes & { value?: unknown };
+	let { value = $bindable(), class: klass = '', ...rest }: Props = $props();
+	const field = getField();
+</script>
+
+<input
+	class="tern-input {klass}"
+	id={field?.id}
+	aria-describedby={field?.describedBy}
+	aria-invalid={field?.invalid || undefined}
+	required={field?.required}
+	disabled={field?.disabled}
+	{...rest}
+	bind:value
+/>
+
+<style>
+	.tern-input {
+		width: 100%;
+		box-sizing: border-box;
+		height: var(--tern-control-height);
+		padding: 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);
+		box-shadow: inset 0 1px 1px oklch(0.24 0.02 240 / 0.04);
+		transition:
+			border-color var(--tern-duration),
+			box-shadow var(--tern-duration);
+	}
+	.tern-input::placeholder {
+		color: var(--tern-muted);
+		opacity: 0.8;
+	}
+	.tern-input:hover:not(:disabled) {
+		border-color: var(--tern-muted);
+	}
+	.tern-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);
+	}
+	.tern-input[aria-invalid='true'] {
+		border-color: var(--tern-danger);
+	}
+	.tern-input[aria-invalid='true']:focus-visible {
+		box-shadow: 0 0 0 3px color-mix(in oklch, var(--tern-danger) 25%, transparent);
+	}
+	.tern-input:disabled {
+		opacity: 0.6;
+		cursor: not-allowed;
+		background: var(--tern-surface-2);
+	}
+</style>

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

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

package/dist/ui/Kbd.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	let { children }: { children: Snippet } = $props();
+</script>
+
+<kbd class="tern-kbd">{@render children()}</kbd>
+
+<style>
+	.tern-kbd {
+		display: inline-flex;
+		align-items: center;
+		min-width: 1.4em;
+		height: 1.4em;
+		padding: 0 0.35em;
+		justify-content: center;
+		border: 1px solid var(--tern-border-strong);
+		border-bottom-width: 2px;
+		border-radius: 5px;
+		background: var(--tern-surface);
+		font-family: var(--tern-font-mono);
+		font-size: 0.75em;
+		color: var(--tern-fg);
+	}
+</style>

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

@@ -0,0 +1,7 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    children: Snippet;
+};
+declare const Kbd: import("svelte").Component<$$ComponentProps, {}, "">;
+type Kbd = ReturnType<typeof Kbd>;
+export default Kbd;

package/dist/ui/Menu.svelte

@@ -0,0 +1,232 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	type Item = { label: string; onselect?: () => void; href?: string; danger?: boolean; disabled?: boolean; separator?: boolean };
+	type Props = {
+		/** The items; an item with separator: true draws a line. */
+		items: Item[];
+		/** The button's content. */
+		children: Snippet;
+		/** Opens to the start or end edge of the button. */
+		align?: 'start' | 'end';
+		variant?: 'secondary' | 'ghost';
+		class?: string;
+	};
+	let { items, children, align = 'start', variant = 'secondary', class: klass = '' }: Props = $props();
+
+	const uid = $props.id();
+	let open = $state(false);
+	let button = $state<HTMLButtonElement>();
+	let menu = $state<HTMLDivElement>();
+	let typed = '';
+	let typedTimer: ReturnType<typeof setTimeout> | undefined;
+
+	const entries = () => Array.from(menu?.querySelectorAll<HTMLElement>('[role="menuitem"]:not([aria-disabled="true"])') ?? []);
+
+	async function show(focus: 'first' | 'last') {
+		open = true;
+		await Promise.resolve();
+		requestAnimationFrame(() => {
+			const list = entries();
+			(focus === 'first' ? list[0] : list[list.length - 1])?.focus();
+		});
+	}
+
+	function hide(returnFocus = true) {
+		open = false;
+		if (returnFocus) button?.focus();
+	}
+
+	function select(item: Item) {
+		if (item.disabled) return;
+		hide();
+		item.onselect?.();
+	}
+
+	// The ARIA menu button pattern.
+	function onmenukey(e: KeyboardEvent) {
+		const list = entries();
+		const i = list.indexOf(document.activeElement as HTMLElement);
+		const move = (j: number) => {
+			e.preventDefault();
+			list[(j + list.length) % list.length]?.focus();
+		};
+		switch (e.key) {
+			case 'ArrowDown':
+				return move(i + 1);
+			case 'ArrowUp':
+				return move(i - 1);
+			case 'Home':
+				return move(0);
+			case 'End':
+				return move(list.length - 1);
+			case 'Escape':
+				e.preventDefault();
+				return hide();
+			case 'Tab':
+				return hide(false);
+		}
+		if (e.key.length === 1 && /\S/.test(e.key)) {
+			// Type to jump to an item.
+			typed += e.key.toLowerCase();
+			clearTimeout(typedTimer);
+			typedTimer = setTimeout(() => (typed = ''), 500);
+			const start = typed.length === 1 ? i + 1 : i;
+			const order = [...list.slice(start), ...list.slice(0, start)];
+			order.find((el) => el.textContent?.trim().toLowerCase().startsWith(typed))?.focus();
+		}
+	}
+
+	$effect(() => {
+		if (!open) return;
+		const away = (e: PointerEvent) => {
+			if (!menu?.contains(e.target as Node) && !button?.contains(e.target as Node)) hide(false);
+		};
+		document.addEventListener('pointerdown', away);
+		return () => document.removeEventListener('pointerdown', away);
+	});
+</script>
+
+<div class="tern-menu {klass}">
+	<button
+		bind:this={button}
+		type="button"
+		class="trigger {variant}"
+		id="tern-menu-{uid}-button"
+		aria-haspopup="menu"
+		aria-expanded={open}
+		aria-controls={open ? `tern-menu-${uid}` : undefined}
+		onclick={() => (open ? hide() : show('first'))}
+		onkeydown={(e) => {
+			if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') {
+				e.preventDefault();
+				show('first');
+			} else if (e.key === 'ArrowUp') {
+				e.preventDefault();
+				show('last');
+			}
+		}}
+	>
+		{@render children()}
+		<svg aria-hidden="true" viewBox="0 0 16 16" width="14" height="14"><path d="M4 6l4 4 4-4" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" /></svg>
+	</button>
+	{#if open}
+		<div bind:this={menu} class="menu {align}" role="menu" id="tern-menu-{uid}" aria-labelledby="tern-menu-{uid}-button" tabindex="-1" onkeydown={onmenukey}>
+			{#each items as item, i (i)}
+				{#if item.separator}
+					<div class="separator" role="separator"></div>
+				{:else if item.href && !item.disabled}
+					<a role="menuitem" tabindex="-1" class:danger={item.danger} href={item.href} onclick={() => hide(false)}>{item.label}</a>
+				{:else}
+					<div
+						role="menuitem"
+						tabindex="-1"
+						class:danger={item.danger}
+						aria-disabled={item.disabled || undefined}
+						onclick={() => select(item)}
+						onkeydown={(e) => {
+							if (e.key === 'Enter' || e.key === ' ') {
+								e.preventDefault();
+								select(item);
+							}
+						}}
+					>
+						{item.label}
+					</div>
+				{/if}
+			{/each}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.tern-menu {
+		position: relative;
+		display: inline-block;
+	}
+	.trigger {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.4rem;
+		height: var(--tern-control-height);
+		padding: 0 0.75rem 0 0.9rem;
+		font: inherit;
+		font-size: 0.875rem;
+		font-weight: 550;
+		color: var(--tern-fg);
+		border-radius: var(--tern-radius-sm);
+		cursor: pointer;
+	}
+	.secondary {
+		background: var(--tern-surface);
+		border: 1px solid var(--tern-border-strong);
+		box-shadow: var(--tern-shadow);
+	}
+	.ghost {
+		background: transparent;
+		border: 1px solid transparent;
+	}
+	.trigger:hover,
+	.trigger[aria-expanded='true'] {
+		background: var(--tern-surface-2);
+	}
+	.trigger:focus-visible {
+		outline: 2px solid var(--tern-ring);
+		outline-offset: 2px;
+	}
+	.menu {
+		position: absolute;
+		top: calc(100% + 0.375rem);
+		z-index: 50;
+		min-width: 11rem;
+		padding: 0.3rem;
+		background: var(--tern-surface);
+		border: 1px solid var(--tern-border);
+		border-radius: var(--tern-radius);
+		box-shadow: var(--tern-shadow-lg);
+		animation: pop var(--tern-duration) ease-out;
+	}
+	.start {
+		left: 0;
+	}
+	.end {
+		right: 0;
+	}
+	[role='menuitem'] {
+		display: block;
+		padding: 0.45rem 0.65rem;
+		border-radius: calc(var(--tern-radius-sm) - 2px);
+		font-size: 0.875rem;
+		color: var(--tern-fg);
+		text-decoration: none;
+		cursor: pointer;
+		outline: none;
+	}
+	[role='menuitem']:hover,
+	[role='menuitem']:focus {
+		background: var(--tern-accent-soft);
+	}
+	[role='menuitem'].danger {
+		color: var(--tern-danger);
+	}
+	[role='menuitem'].danger:hover,
+	[role='menuitem'].danger:focus {
+		background: var(--tern-danger-soft);
+	}
+	[role='menuitem'][aria-disabled='true'] {
+		opacity: 0.45;
+		cursor: not-allowed;
+		background: none;
+	}
+	.separator {
+		height: 1px;
+		margin: 0.3rem 0.2rem;
+		background: var(--tern-border);
+	}
+	@keyframes pop {
+		from {
+			opacity: 0;
+			transform: translateY(-4px);
+		}
+	}
+</style>

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

@@ -0,0 +1,22 @@
+import type { Snippet } from 'svelte';
+type Item = {
+    label: string;
+    onselect?: () => void;
+    href?: string;
+    danger?: boolean;
+    disabled?: boolean;
+    separator?: boolean;
+};
+type Props = {
+    /** The items; an item with separator: true draws a line. */
+    items: Item[];
+    /** The button's content. */
+    children: Snippet;
+    /** Opens to the start or end edge of the button. */
+    align?: 'start' | 'end';
+    variant?: 'secondary' | 'ghost';
+    class?: string;
+};
+declare const Menu: import("svelte").Component<Props, {}, "">;
+type Menu = ReturnType<typeof Menu>;
+export default Menu;

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;