@ternkit/tern 1.2.1 → 1.3.0

package/dist/ui/Avatar.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	type Props = {
+		/** The person's name: the image's alt text, and the initials when there is no image. */
+		name: string;
+		src?: string | null;
+		size?: string;
+		class?: string;
+	};
+	let { name, src = null, size = '2.25rem', class: klass = '' }: Props = $props();
+	let failed = $state(false);
+	const initials = $derived(
+		name
+			.split(/\s+/)
+			.filter(Boolean)
+			.slice(0, 2)
+			.map((w) => w[0]!.toUpperCase())
+			.join('')
+	);
+</script>
+
+<span class="tern-avatar {klass}" style:--size={size}>
+	{#if src && !failed}
+		<img {src} alt={name} onerror={() => (failed = true)} />
+	{:else}
+		<span role="img" aria-label={name}>{initials}</span>
+	{/if}
+</span>
+
+<style>
+	.tern-avatar {
+		display: inline-grid;
+		place-items: center;
+		width: var(--size);
+		height: var(--size);
+		border-radius: 50%;
+		overflow: hidden;
+		background: var(--tern-accent-soft);
+		color: var(--tern-accent);
+		font-size: calc(var(--size) * 0.38);
+		font-weight: 650;
+		flex: none;
+	}
+	img {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+	}
+</style>

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

@@ -0,0 +1,10 @@
+type Props = {
+    /** The person's name: the image's alt text, and the initials when there is no image. */
+    name: string;
+    src?: string | null;
+    size?: string;
+    class?: string;
+};
+declare const Avatar: import("svelte").Component<Props, {}, "">;
+type Avatar = ReturnType<typeof Avatar>;
+export default Avatar;

package/dist/ui/Badge.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	type Props = { tone?: 'neutral' | 'accent' | 'success' | 'danger' | 'warning'; dot?: boolean; class?: string; children: Snippet };
+	let { tone = 'neutral', dot = false, class: klass = '', children }: Props = $props();
+</script>
+
+<span class="tern-badge {tone} {klass}">
+	{#if dot}<span class="dot" aria-hidden="true"></span>{/if}
+	{@render children()}
+</span>
+
+<style>
+	.tern-badge {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.35rem;
+		height: 1.375rem;
+		padding: 0 0.55rem;
+		border-radius: 999px;
+		font-size: 0.75rem;
+		font-weight: 600;
+		line-height: 1;
+		white-space: nowrap;
+		border: 1px solid transparent;
+	}
+	.dot {
+		width: 0.4rem;
+		height: 0.4rem;
+		border-radius: 50%;
+		background: currentColor;
+	}
+	.neutral {
+		background: var(--tern-surface-2);
+		color: var(--tern-fg);
+		border-color: var(--tern-border);
+	}
+	.accent {
+		background: var(--tern-accent-soft);
+		color: var(--tern-accent);
+	}
+	.success {
+		background: var(--tern-success-soft);
+		color: color-mix(in oklch, var(--tern-success) 80%, var(--tern-fg));
+	}
+	.danger {
+		background: var(--tern-danger-soft);
+		color: color-mix(in oklch, var(--tern-danger) 85%, var(--tern-fg));
+	}
+	.warning {
+		background: var(--tern-warning-soft);
+		color: color-mix(in oklch, var(--tern-warning) 55%, var(--tern-fg));
+	}
+</style>

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

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    tone?: 'neutral' | 'accent' | 'success' | 'danger' | 'warning';
+    dot?: boolean;
+    class?: string;
+    children: Snippet;
+};
+declare const Badge: import("svelte").Component<Props, {}, "">;
+type Badge = ReturnType<typeof Badge>;
+export default Badge;

package/dist/ui/Button.svelte

@@ -0,0 +1,136 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
+
+	type Common = {
+		/** primary for the main action, secondary for the others, ghost for toolbars, danger for destructive actions */
+		variant?: 'primary' | 'secondary' | 'ghost' | 'danger';
+		size?: 'sm' | 'md' | 'lg';
+		/** Shows a spinner and blocks clicks, while staying focusable. */
+		loading?: boolean;
+		children?: Snippet;
+	};
+	type Props = Common & ((HTMLButtonAttributes & { href?: undefined }) | (HTMLAnchorAttributes & { href: string }));
+
+	let { variant = 'primary', size = 'md', loading = false, children, class: klass = '', ...rest }: Props = $props();
+</script>
+
+{#if rest.href !== undefined}
+	<a class="tern-btn {variant} {size} {klass}" {...rest as HTMLAnchorAttributes}>{@render children?.()}</a>
+{:else}
+	<button
+		class="tern-btn {variant} {size} {klass}"
+		type="button"
+		{...rest as HTMLButtonAttributes}
+		aria-busy={loading || undefined}
+		aria-disabled={loading || (rest as HTMLButtonAttributes).disabled || undefined}
+		onclick={(e) => {
+			if (loading) {
+				e.preventDefault();
+				return;
+			}
+			(rest as HTMLButtonAttributes).onclick?.(e as never);
+		}}
+	>
+		{#if loading}<span class="spinner" aria-hidden="true"></span>{/if}
+		{@render children?.()}
+	</button>
+{/if}
+
+<style>
+	.tern-btn {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		gap: 0.5em;
+		height: var(--tern-control-height);
+		padding: 0 1rem;
+		border-radius: var(--tern-radius-sm);
+		border: 1px solid transparent;
+		font: inherit;
+		font-size: 0.875rem;
+		font-weight: 550;
+		line-height: 1;
+		white-space: nowrap;
+		text-decoration: none;
+		cursor: pointer;
+		user-select: none;
+		transition:
+			background-color var(--tern-duration),
+			border-color var(--tern-duration),
+			box-shadow var(--tern-duration),
+			transform var(--tern-duration);
+	}
+	.tern-btn:focus-visible {
+		outline: 2px solid var(--tern-ring);
+		outline-offset: 2px;
+	}
+	.tern-btn:active:not([aria-disabled='true']) {
+		transform: translateY(0.5px);
+	}
+	.tern-btn[aria-disabled='true'],
+	.tern-btn:disabled {
+		opacity: 0.55;
+		cursor: not-allowed;
+	}
+	.tern-btn[aria-busy='true'] {
+		cursor: progress;
+	}
+	.sm {
+		height: calc(var(--tern-control-height) - 0.5rem);
+		padding: 0 0.7rem;
+		font-size: 0.8125rem;
+	}
+	.lg {
+		height: calc(var(--tern-control-height) + 0.5rem);
+		padding: 0 1.35rem;
+		font-size: 0.9375rem;
+	}
+	.primary {
+		background: var(--tern-accent);
+		color: var(--tern-accent-fg);
+		box-shadow:
+			var(--tern-shadow),
+			inset 0 1px 0 oklch(1 0 0 / 0.14);
+	}
+	.primary:hover:not([aria-disabled='true']) {
+		background: var(--tern-accent-hover);
+	}
+	.secondary {
+		background: var(--tern-surface);
+		color: var(--tern-fg);
+		border-color: var(--tern-border-strong);
+		box-shadow: var(--tern-shadow);
+	}
+	.secondary:hover:not([aria-disabled='true']) {
+		background: var(--tern-surface-2);
+	}
+	.ghost {
+		background: transparent;
+		color: var(--tern-fg);
+	}
+	.ghost:hover:not([aria-disabled='true']) {
+		background: var(--tern-surface-2);
+	}
+	.danger {
+		background: var(--tern-danger);
+		color: var(--tern-danger-fg);
+		box-shadow: var(--tern-shadow);
+	}
+	.danger:hover:not([aria-disabled='true']) {
+		background: var(--tern-danger-hover);
+	}
+	.spinner {
+		width: 1em;
+		height: 1em;
+		border-radius: 50%;
+		border: 2px solid currentColor;
+		border-right-color: transparent;
+		animation: spin 0.7s linear infinite;
+	}
+	@keyframes spin {
+		to {
+			transform: rotate(1turn);
+		}
+	}
+</style>

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

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
+type Common = {
+    /** primary for the main action, secondary for the others, ghost for toolbars, danger for destructive actions */
+    variant?: 'primary' | 'secondary' | 'ghost' | 'danger';
+    size?: 'sm' | 'md' | 'lg';
+    /** Shows a spinner and blocks clicks, while staying focusable. */
+    loading?: boolean;
+    children?: Snippet;
+};
+type Props = Common & ((HTMLButtonAttributes & {
+    href?: undefined;
+}) | (HTMLAnchorAttributes & {
+    href: string;
+}));
+declare const Button: import("svelte").Component<Props, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/dist/ui/Card.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	type Props = HTMLAttributes<HTMLElement> & {
+		/** A heading for the card. */
+		title?: string;
+		description?: string;
+		/** The heading level, to fit the page's outline. */
+		level?: 2 | 3 | 4;
+		/** The element to render: section for standalone content, article for items in a feed. */
+		as?: 'div' | 'section' | 'article';
+		children?: Snippet;
+		/** Actions in the header's corner. */
+		actions?: Snippet;
+		footer?: Snippet;
+	};
+	let { title, description, level = 3, as = 'div', class: klass = '', children, actions, footer, ...rest }: Props = $props();
+</script>
+
+<svelte:element this={as} class="tern-card {klass}" {...rest}>
+	{#if title || actions}
+		<header>
+			<div>
+				{#if title}<svelte:element this={`h${level}`} class="title">{title}</svelte:element>{/if}
+				{#if description}<p class="description">{description}</p>{/if}
+			</div>
+			{#if actions}<div class="actions">{@render actions()}</div>{/if}
+		</header>
+	{/if}
+	{#if children}<div class="body">{@render children()}</div>{/if}
+	{#if footer}<footer>{@render footer()}</footer>{/if}
+</svelte:element>
+
+<style>
+	.tern-card {
+		display: grid;
+		gap: 1rem;
+		padding: 1.25rem;
+		background: var(--tern-surface);
+		color: var(--tern-fg);
+		border: 1px solid var(--tern-border);
+		border-radius: calc(var(--tern-radius) + 2px);
+		box-shadow: var(--tern-shadow);
+	}
+	header {
+		display: flex;
+		align-items: flex-start;
+		justify-content: space-between;
+		gap: 1rem;
+	}
+	.title {
+		margin: 0;
+		font-size: 1rem;
+		font-weight: 650;
+		letter-spacing: -0.01em;
+	}
+	.description {
+		margin: 0.2rem 0 0;
+		font-size: 0.875rem;
+		color: var(--tern-muted);
+	}
+	.actions {
+		display: flex;
+		gap: 0.5rem;
+	}
+	footer {
+		display: flex;
+		justify-content: flex-end;
+		gap: 0.5rem;
+		padding-top: 1rem;
+		border-top: 1px solid var(--tern-border);
+	}
+</style>

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

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = HTMLAttributes<HTMLElement> & {
+    /** A heading for the card. */
+    title?: string;
+    description?: string;
+    /** The heading level, to fit the page's outline. */
+    level?: 2 | 3 | 4;
+    /** The element to render: section for standalone content, article for items in a feed. */
+    as?: 'div' | 'section' | 'article';
+    children?: Snippet;
+    /** Actions in the header's corner. */
+    actions?: Snippet;
+    footer?: Snippet;
+};
+declare const Card: import("svelte").Component<Props, {}, "">;
+type Card = ReturnType<typeof Card>;
+export default Card;

package/dist/ui/Checkbox.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLInputAttributes } from 'svelte/elements';
+
+	type Props = Omit<HTMLInputAttributes, 'type'> & {
+		checked?: boolean;
+		/** Shows a dash, for "some selected". */
+		indeterminate?: boolean;
+		/** The label. */
+		children?: Snippet;
+		/** Help text under the label. */
+		description?: string;
+	};
+	let { checked = $bindable(false), indeterminate = $bindable(false), children, description, class: klass = '', ...rest }: Props = $props();
+	const uid = $props.id();
+</script>
+
+<label class="tern-check {klass}">
+	<input type="checkbox" {...rest} bind:checked bind:indeterminate aria-describedby={description ? `tern-check-${uid}` : undefined} />
+	<span class="box" aria-hidden="true">
+		<svg viewBox="0 0 16 16"><path class="tick" d="M3.5 8.5l3 3 6-7" /><path class="dash" d="M4 8h8" /></svg>
+	</span>
+	<span class="text">
+		{@render children?.()}
+		{#if description}<span class="description" id="tern-check-{uid}">{description}</span>{/if}
+	</span>
+</label>
+
+<style>
+	.tern-check {
+		display: inline-flex;
+		align-items: flex-start;
+		gap: 0.6rem;
+		font-size: 0.875rem;
+		cursor: pointer;
+		position: relative;
+	}
+	input {
+		position: absolute;
+		opacity: 0;
+		width: 1.125rem;
+		height: 1.125rem;
+		margin: 0.1rem 0 0;
+		cursor: inherit;
+	}
+	.box {
+		flex: none;
+		display: grid;
+		place-items: center;
+		width: 1.125rem;
+		height: 1.125rem;
+		margin-top: 0.1rem;
+		border: 1px solid var(--tern-border-strong);
+		border-radius: 5px;
+		background: var(--tern-surface);
+		transition:
+			background-color var(--tern-duration),
+			border-color var(--tern-duration);
+	}
+	svg {
+		width: 0.8rem;
+		height: 0.8rem;
+		fill: none;
+		stroke: var(--tern-accent-fg);
+		stroke-width: 2.2;
+		stroke-linecap: round;
+		stroke-linejoin: round;
+	}
+	.tick,
+	.dash {
+		display: none;
+	}
+	input:checked + .box,
+	input:indeterminate + .box {
+		background: var(--tern-accent);
+		border-color: var(--tern-accent);
+	}
+	input:checked:not(:indeterminate) + .box .tick,
+	input:indeterminate + .box .dash {
+		display: block;
+	}
+	input:focus-visible + .box {
+		outline: 2px solid var(--tern-ring);
+		outline-offset: 2px;
+	}
+	input:disabled ~ * {
+		opacity: 0.55;
+	}
+	.tern-check:has(input:disabled) {
+		cursor: not-allowed;
+	}
+	.text {
+		display: grid;
+		gap: 0.125rem;
+	}
+	.description {
+		color: var(--tern-muted);
+		font-size: 0.8125rem;
+	}
+</style>

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

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+import type { HTMLInputAttributes } from 'svelte/elements';
+type Props = Omit<HTMLInputAttributes, 'type'> & {
+    checked?: boolean;
+    /** Shows a dash, for "some selected". */
+    indeterminate?: boolean;
+    /** The label. */
+    children?: Snippet;
+    /** Help text under the label. */
+    description?: string;
+};
+declare const Checkbox: import("svelte").Component<Props, {}, "checked" | "indeterminate">;
+type Checkbox = ReturnType<typeof Checkbox>;
+export default Checkbox;

package/dist/ui/Dialog.svelte

@@ -0,0 +1,160 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	type Props = {
+		/** Whether the dialog is open; bind it. */
+		open?: boolean;
+		/** The heading, which labels the dialog. */
+		title: string;
+		/** A sentence under the title, read when the dialog opens. */
+		description?: string;
+		/** Close when the backdrop is clicked. Escape always closes. */
+		dismissable?: boolean;
+		size?: 'sm' | 'md' | 'lg';
+		class?: string;
+		children?: Snippet;
+		/** Buttons at the bottom, such as Cancel and Save. */
+		footer?: Snippet;
+		onclose?: () => void;
+	};
+	let { open = $bindable(false), title, description, dismissable = true, size = 'md', class: klass = '', children, footer, onclose }: Props = $props();
+
+	const uid = $props.id();
+	let dialog = $state<HTMLDialogElement>();
+
+	// The native dialog traps focus, makes the page inert, closes on Escape
+	// and returns focus to what opened it.
+	$effect(() => {
+		if (!dialog) return;
+		if (open && !dialog.open) dialog.showModal();
+		else if (!open && dialog.open) dialog.close();
+	});
+
+	// Tab cycles inside the dialog instead of leaving for the browser's UI.
+	function onkeydown(e: KeyboardEvent) {
+		if (e.key !== 'Tab' || !dialog) return;
+		const focusable = Array.from(
+			dialog.querySelectorAll<HTMLElement>('a[href], button:not([disabled]), input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])')
+		).filter((el) => el.offsetParent !== null || el === document.activeElement);
+		if (focusable.length === 0) return;
+		const first = focusable[0]!;
+		const last = focusable[focusable.length - 1]!;
+		if (e.shiftKey && document.activeElement === first) {
+			e.preventDefault();
+			last.focus();
+		} else if (!e.shiftKey && document.activeElement === last) {
+			e.preventDefault();
+			first.focus();
+		}
+	}
+</script>
+
+<dialog
+	bind:this={dialog}
+	class="tern-dialog {size} {klass}"
+	aria-labelledby="tern-dialog-{uid}-title"
+	aria-describedby={description ? `tern-dialog-${uid}-description` : undefined}
+	onclose={() => {
+		open = false;
+		onclose?.();
+	}}
+	onclick={(e) => {
+		if (dismissable && e.target === dialog) open = false;
+	}}
+	{onkeydown}
+>
+	<div class="panel">
+		<header>
+			<h2 id="tern-dialog-{uid}-title">{title}</h2>
+			<button type="button" class="close" aria-label="Close" onclick={() => (open = false)}>
+				<svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" /></svg>
+			</button>
+		</header>
+		{#if description}<p class="description" id="tern-dialog-{uid}-description">{description}</p>{/if}
+		{#if children}<div class="body">{@render children()}</div>{/if}
+		{#if footer}<footer>{@render footer()}</footer>{/if}
+	</div>
+</dialog>
+
+<style>
+	.tern-dialog {
+		padding: 0;
+		border: 0;
+		background: transparent;
+		color: var(--tern-fg);
+		max-width: calc(100vw - 2rem);
+		width: 28rem;
+		overflow: visible;
+	}
+	.sm {
+		width: 22rem;
+	}
+	.lg {
+		width: 40rem;
+	}
+	.tern-dialog::backdrop {
+		background: oklch(0.2 0.02 240 / 0.45);
+		backdrop-filter: blur(2px);
+	}
+	.tern-dialog[open] .panel {
+		animation: rise var(--tern-duration) ease-out;
+	}
+	.panel {
+		display: grid;
+		gap: 1rem;
+		padding: 1.25rem 1.5rem 1.5rem;
+		background: var(--tern-surface);
+		border: 1px solid var(--tern-border);
+		border-radius: calc(var(--tern-radius) + 4px);
+		box-shadow: var(--tern-shadow-lg);
+	}
+	header {
+		display: flex;
+		align-items: flex-start;
+		justify-content: space-between;
+		gap: 1rem;
+	}
+	h2 {
+		margin: 0;
+		font-size: 1.0625rem;
+		font-weight: 650;
+		letter-spacing: -0.01em;
+	}
+	.description {
+		margin: -0.5rem 0 0;
+		color: var(--tern-muted);
+		font-size: 0.875rem;
+	}
+	.close {
+		display: grid;
+		place-items: center;
+		width: 1.75rem;
+		height: 1.75rem;
+		margin: -0.25rem -0.5rem 0 0;
+		border: 0;
+		border-radius: var(--tern-radius-sm);
+		background: transparent;
+		color: var(--tern-muted);
+		cursor: pointer;
+	}
+	.close:hover {
+		background: var(--tern-surface-2);
+		color: var(--tern-fg);
+	}
+	.close:focus-visible {
+		outline: 2px solid var(--tern-ring);
+		outline-offset: 1px;
+	}
+	footer {
+		display: flex;
+		justify-content: flex-end;
+		gap: 0.5rem;
+		margin-top: 0.25rem;
+	}
+	@keyframes rise {
+		from {
+			opacity: 0;
+			transform: translateY(6px) scale(0.985);
+		}
+	}
+</style>

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

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    /** Whether the dialog is open; bind it. */
+    open?: boolean;
+    /** The heading, which labels the dialog. */
+    title: string;
+    /** A sentence under the title, read when the dialog opens. */
+    description?: string;
+    /** Close when the backdrop is clicked. Escape always closes. */
+    dismissable?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    class?: string;
+    children?: Snippet;
+    /** Buttons at the bottom, such as Cancel and Save. */
+    footer?: Snippet;
+    onclose?: () => void;
+};
+declare const Dialog: import("svelte").Component<Props, {}, "open">;
+type Dialog = ReturnType<typeof Dialog>;
+export default Dialog;