@ternkit/tern 1.3.0 → 1.5.0

package/dist/ui/SelectMenu.svelte

@@ -0,0 +1,301 @@
+<script lang="ts">
+	import { getField } from './field.js';
+	import { float } from './floating.js';
+	import { grouped, type Option } from './options.js';
+
+	type Props = {
+		options: Option[];
+		/** The chosen value; bind it. */
+		value?: string | null;
+		/** Shown when nothing is chosen. */
+		placeholder?: string;
+		/** Labels it when it isn't in a Field. */
+		label?: string;
+		/** Posts the value under this name. */
+		name?: string;
+		disabled?: boolean;
+		class?: string;
+		onchange?: (value: string, option: Option) => void;
+	};
+	const field = getField();
+	let { options, value = $bindable(field?.value ?? null), placeholder = 'Choose…', label, name: nameProp, disabled = false, class: klass = '', onchange }: Props = $props();
+	const name = $derived(nameProp ?? field?.name);
+
+	const uid = $props.id();
+	const id = `tern-selectmenu-${uid}`;
+	field?.custom();
+	let button = $state<HTMLButtonElement>();
+	let list = $state<HTMLDivElement>();
+	let open = $state(false);
+	let active = $state(-1);
+	let typed = '';
+	let typedTimer: ReturnType<typeof setTimeout> | undefined;
+
+	const selectedIndex = $derived(options.findIndex((o) => o.value === value));
+	const selected = $derived(options[selectedIndex]);
+	const enabledIdx = $derived(options.map((o, i) => (o.disabled ? -1 : i)).filter((i) => i >= 0));
+
+	function show() {
+		if (disabled || field?.disabled) return;
+		active = selectedIndex >= 0 && !options[selectedIndex]?.disabled ? selectedIndex : (enabledIdx[0] ?? -1);
+		open = true;
+	}
+	function choose(i: number) {
+		const o = options[i];
+		if (!o || o.disabled) return;
+		value = o.value;
+		open = false;
+		onchange?.(o.value, o);
+		button?.focus();
+	}
+	function step(by: number | 'first' | 'last') {
+		const list = enabledIdx;
+		if (!list.length) return;
+		const pos = list.indexOf(active);
+		const next = by === 'first' ? 0 : by === 'last' ? list.length - 1 : Math.max(0, Math.min(list.length - 1, (pos < 0 ? 0 : pos) + by));
+		active = list[next]!;
+		document.getElementById(`${id}-opt-${active}`)?.scrollIntoView?.({ block: 'nearest' });
+	}
+
+	function onkeydown(e: KeyboardEvent) {
+		const opening = ['ArrowDown', 'ArrowUp', 'Enter', ' ', 'Home', 'End'];
+		if (!open) {
+			if (opening.includes(e.key)) {
+				e.preventDefault();
+				show();
+				if (e.key === 'Home') step('first');
+				if (e.key === 'End') step('last');
+				return;
+			}
+		} else {
+			switch (e.key) {
+				case 'ArrowDown':
+					e.preventDefault();
+					return e.altKey ? choose(active) : step(1);
+				case 'ArrowUp':
+					e.preventDefault();
+					return e.altKey ? choose(active) : step(-1);
+				case 'Home':
+					e.preventDefault();
+					return step('first');
+				case 'End':
+					e.preventDefault();
+					return step('last');
+				case 'PageDown':
+					e.preventDefault();
+					return step(10);
+				case 'PageUp':
+					e.preventDefault();
+					return step(-10);
+				case 'Enter':
+				case ' ':
+					if (e.key === ' ' && typed) break; // a space inside a typed name
+					e.preventDefault();
+					return choose(active);
+				case 'Escape':
+					e.preventDefault();
+					e.stopPropagation();
+					open = false;
+					return;
+				case 'Tab':
+					open = false;
+					return;
+			}
+		}
+		if (e.key.length === 1 && !e.metaKey && !e.ctrlKey && !e.altKey) {
+			// Type to jump, open or closed, like a native select.
+			e.preventDefault();
+			typed += e.key.toLowerCase();
+			clearTimeout(typedTimer);
+			typedTimer = setTimeout(() => (typed = ''), 500);
+			const from = open ? active : selectedIndex;
+			const start = typed.length === 1 ? from + 1 : Math.max(from, 0);
+			const order = [...enabledIdx.filter((i) => i >= start), ...enabledIdx.filter((i) => i < start)];
+			const hit = order.find((i) => options[i]!.label.toLowerCase().startsWith(typed));
+			if (hit === undefined) return;
+			if (open) active = hit;
+			else choose(hit);
+		}
+	}
+
+	$effect(() => {
+		if (!open || !list || !button) return;
+		list.showPopover?.();
+		const stop = float(list, button, { side: 'bottom', align: 'start', offset: 4, matchWidth: true });
+		document.getElementById(`${id}-opt-${active}`)?.scrollIntoView?.({ block: 'nearest' });
+		const away = (e: PointerEvent) => {
+			const t = e.target as Node;
+			if (!list?.contains(t) && !button?.contains(t)) open = false;
+		};
+		document.addEventListener('pointerdown', away, true);
+		return () => {
+			stop();
+			document.removeEventListener('pointerdown', away, true);
+		};
+	});
+</script>
+
+<button
+	bind:this={button}
+	type="button"
+	class="tern-selectmenu {klass}"
+	role="combobox"
+	id={field?.id ?? id}
+	aria-haspopup="listbox"
+	aria-expanded={open}
+	aria-controls="{id}-list"
+	aria-activedescendant={open && active >= 0 ? `${id}-opt-${active}` : undefined}
+	aria-label={field ? undefined : label}
+	aria-labelledby={field ? `${field.labelId} ${id}-value` : undefined}
+	aria-describedby={field?.describedBy}
+	aria-invalid={field?.invalid || undefined}
+	aria-required={field?.required || undefined}
+	disabled={disabled || field?.disabled}
+	onclick={() => (open ? (open = false) : show())}
+	{onkeydown}
+	onblur={(e) => !list?.contains(e.relatedTarget as Node) && (open = false)}
+>
+	<span class="value" class:placeholder={!selected} id="{id}-value">{selected?.label ?? placeholder}</span>
+	<svg aria-hidden="true" viewBox="0 0 16 16" width="14" height="14"><path d="M5 6.5l3-3 3 3M5 9.5l3 3 3-3" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" /></svg>
+</button>
+{#if name}<input type="hidden" {name} value={value ?? ''} />{/if}
+<div bind:this={list} id="{id}-list" class="tern-selectmenu-list" class:open role="listbox" aria-label={label} aria-labelledby={field?.labelId} tabindex="-1" popover="manual">
+	{#if open}
+		{#each grouped(options) as g, gi (gi)}
+			{#snippet items()}
+				{#each g.options as o (o.value)}
+					{@const i = options.indexOf(o)}
+					<!-- svelte-ignore a11y_click_events_have_key_events -->
+					<div
+						id="{id}-opt-{i}"
+						class="option"
+						class:active={i === active}
+						role="option"
+						tabindex="-1"
+						aria-selected={o.value === value}
+						aria-disabled={o.disabled || undefined}
+						onpointerdown={(e) => e.preventDefault()}
+						onpointermove={() => !o.disabled && (active = i)}
+						onclick={() => choose(i)}
+					>
+						<span class="check" aria-hidden="true">
+							{#if o.value === value}<svg viewBox="0 0 16 16" width="14" height="14"><path d="M3.5 8.5l3 3 6-7" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" /></svg>{/if}
+						</span>
+						<span class="text">
+							<span>{o.label}</span>
+							{#if o.description}<span class="description">{o.description}</span>{/if}
+						</span>
+					</div>
+				{/each}
+			{/snippet}
+			{#if g.group}
+				<div role="group" aria-labelledby="{id}-group-{gi}">
+					<div class="heading" id="{id}-group-{gi}" role="presentation">{g.group}</div>
+					{@render items()}
+				</div>
+			{:else}
+				{@render items()}
+			{/if}
+		{/each}
+	{/if}
+</div>
+
+<style>
+	.tern-selectmenu {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 0.5rem;
+		width: 100%;
+		height: var(--tern-control-height);
+		padding: 0 0.6rem 0 0.75rem;
+		font: inherit;
+		font-size: 0.875rem;
+		color: var(--tern-fg);
+		text-align: start;
+		background: var(--tern-surface);
+		border: 1px solid var(--tern-border-strong);
+		border-radius: var(--tern-radius-sm);
+		cursor: pointer;
+		transition:
+			border-color var(--tern-duration),
+			box-shadow var(--tern-duration);
+	}
+	.tern-selectmenu svg {
+		flex: none;
+		color: var(--tern-muted);
+	}
+	.tern-selectmenu:hover:not(:disabled) {
+		border-color: var(--tern-muted);
+	}
+	.tern-selectmenu: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-selectmenu[aria-invalid='true'] {
+		border-color: var(--tern-danger);
+	}
+	.tern-selectmenu:disabled {
+		opacity: 0.6;
+		cursor: not-allowed;
+	}
+	.value {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	.placeholder {
+		color: var(--tern-muted);
+	}
+	.tern-selectmenu-list {
+		max-height: 18rem;
+		overflow: auto;
+		padding: 0.3rem;
+		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;
+	}
+	.tern-selectmenu-list:not(.open) {
+		display: none;
+	}
+	.option {
+		display: flex;
+		align-items: flex-start;
+		gap: 0.4rem;
+		padding: 0.4rem 0.6rem 0.4rem 0.35rem;
+		border-radius: calc(var(--tern-radius-sm) - 2px);
+		cursor: pointer;
+	}
+	.option.active {
+		background: var(--tern-accent-soft);
+	}
+	.option[aria-disabled='true'] {
+		opacity: 0.45;
+		cursor: not-allowed;
+	}
+	.check {
+		display: inline-flex;
+		width: 1rem;
+		padding-top: 0.15rem;
+		justify-content: center;
+		color: var(--tern-accent);
+	}
+	.text {
+		display: grid;
+	}
+	.description {
+		font-size: 0.8125rem;
+		color: var(--tern-muted);
+	}
+	.heading {
+		padding: 0.45rem 0.6rem 0.25rem 1.75rem;
+		font-size: 0.75rem;
+		font-weight: 600;
+		color: var(--tern-muted);
+	}
+</style>

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

@@ -0,0 +1,18 @@
+import { type Option } from './options.js';
+type Props = {
+    options: Option[];
+    /** The chosen value; bind it. */
+    value?: string | null;
+    /** Shown when nothing is chosen. */
+    placeholder?: string;
+    /** Labels it when it isn't in a Field. */
+    label?: string;
+    /** Posts the value under this name. */
+    name?: string;
+    disabled?: boolean;
+    class?: string;
+    onchange?: (value: string, option: Option) => void;
+};
+declare const SelectMenu: import("svelte").Component<Props, {}, "value">;
+type SelectMenu = ReturnType<typeof SelectMenu>;
+export default SelectMenu;

package/dist/ui/Sheet.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import Dialog from './Dialog.svelte';
+
+	type Props = {
+		/** Whether it's open; bind it. */
+		open?: boolean;
+		title: string;
+		description?: string;
+		/** The edge it slides in from. */
+		side?: 'left' | 'right' | 'top' | 'bottom';
+		class?: string;
+		children?: Snippet;
+		footer?: Snippet;
+		onclose?: () => void;
+	};
+	let { open = $bindable(false), side = 'right', ...rest }: Props = $props();
+</script>
+
+<!-- A modal panel against an edge of the screen, for navigation, filters or details. -->
+<Dialog bind:open {side} {...rest} />

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

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    /** Whether it's open; bind it. */
+    open?: boolean;
+    title: string;
+    description?: string;
+    /** The edge it slides in from. */
+    side?: 'left' | 'right' | 'top' | 'bottom';
+    class?: string;
+    children?: Snippet;
+    footer?: Snippet;
+    onclose?: () => void;
+};
+declare const Sheet: import("svelte").Component<Props, {}, "open">;
+type Sheet = ReturnType<typeof Sheet>;
+export default Sheet;

package/dist/ui/Sidebar.svelte

@@ -0,0 +1,263 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { page } from '../runtime/state.svelte.js';
+	import Dialog from './Dialog.svelte';
+
+	export type SidebarLink = {
+		label: string;
+		href: string;
+		/** An icon, shown alone when the sidebar is collapsed. */
+		icon?: Snippet;
+		/** A count or label after the link, such as "3". */
+		badge?: string;
+		/** Links under this one, shown while it or one of them is current. */
+		items?: { label: string; href: string }[];
+	};
+	export type SidebarGroup = { label?: string; items: SidebarLink[] };
+
+	type Props = {
+		groups: SidebarGroup[];
+		/** The app's name or logo, at the top. */
+		header?: Snippet;
+		/** Things at the bottom, such as the signed-in user. */
+		footer?: Snippet;
+		/** Show icons only on wide screens; bind it. */
+		collapsed?: boolean;
+		/** Names the navigation. */
+		label?: string;
+		/** The page's content, next to the sidebar. */
+		children: Snippet;
+		class?: string;
+	};
+	let { groups, header, footer, collapsed = $bindable(false), label = 'Main', children, class: klass = '' }: Props = $props();
+
+	let mobileOpen = $state(false);
+	const path = $derived(page.url?.pathname ?? '');
+	const isCurrent = (href: string) => path === href;
+	const inSection = (l: SidebarLink) => isCurrent(l.href) || !!l.items?.some((s) => path === s.href || path.startsWith(s.href + '/'));
+
+	// Close the mobile sheet after navigating.
+	$effect(() => {
+		void path;
+		mobileOpen = false;
+	});
+</script>
+
+{#snippet nav(compact: boolean)}
+	<nav aria-label={label} class="nav" class:compact>
+		{#each groups as group, gi (gi)}
+			<div class="group">
+				{#if group.label && !compact}<div class="group-label" id="tern-sidebar-group-{gi}">{group.label}</div>{/if}
+				<ul aria-labelledby={group.label && !compact ? `tern-sidebar-group-${gi}` : undefined}>
+					{#each group.items as link (link.href)}
+						<li>
+							<a href={link.href} class="link" aria-current={isCurrent(link.href) ? 'page' : undefined} aria-label={compact ? link.label : undefined} title={compact ? link.label : undefined}>
+								{#if link.icon}<span class="icon" aria-hidden="true">{@render link.icon()}</span>{/if}
+								{#if !compact}
+									<span class="label">{link.label}</span>
+									{#if link.badge}<span class="badge">{link.badge}</span>{/if}
+								{/if}
+							</a>
+							{#if link.items && !compact && inSection(link)}
+								<ul class="sub">
+									{#each link.items as sub (sub.href)}
+										<li><a href={sub.href} class="link" aria-current={isCurrent(sub.href) ? 'page' : undefined}>{sub.label}</a></li>
+									{/each}
+								</ul>
+							{/if}
+						</li>
+					{/each}
+				</ul>
+			</div>
+		{/each}
+	</nav>
+{/snippet}
+
+<div class="tern-sidebar-layout {klass}" class:collapsed>
+	<aside class="sidebar">
+		<div class="top">
+			{#if header && !collapsed}<div class="header">{@render header()}</div>{/if}
+			<button type="button" class="collapse" aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'} aria-pressed={collapsed} onclick={() => (collapsed = !collapsed)}>
+				<svg aria-hidden="true" viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.4"><rect x="2" y="2.5" width="12" height="11" rx="2" /><path d="M6 2.5v11" /></svg>
+			</button>
+		</div>
+		{@render nav(collapsed)}
+		{#if footer && !collapsed}<div class="footer">{@render footer()}</div>{/if}
+	</aside>
+	<div class="mobilebar">
+		<button type="button" class="collapse" aria-label="Open navigation" aria-expanded={mobileOpen} onclick={() => (mobileOpen = true)}>
+			<svg aria-hidden="true" viewBox="0 0 16 16" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M2.5 4h11M2.5 8h11M2.5 12h11" /></svg>
+		</button>
+		{#if header}<div class="header">{@render header()}</div>{/if}
+	</div>
+	<div class="main">{@render children()}</div>
+</div>
+
+<Dialog bind:open={mobileOpen} title="Navigation" side="left" class="tern-sidebar-sheet">
+	{@render nav(false)}
+	{#if footer}<div class="footer">{@render footer()}</div>{/if}
+</Dialog>
+
+<style>
+	.tern-sidebar-layout {
+		display: grid;
+		grid-template-columns: 15rem 1fr;
+		min-height: 100vh;
+	}
+	.collapsed {
+		grid-template-columns: 3.75rem 1fr;
+	}
+	.sidebar {
+		position: sticky;
+		top: 0;
+		display: flex;
+		flex-direction: column;
+		gap: 0.75rem;
+		height: 100vh;
+		box-sizing: border-box;
+		padding: 0.75rem;
+		overflow-y: auto;
+		background: var(--tern-surface);
+		border-right: 1px solid var(--tern-border);
+	}
+	.top {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 0.5rem;
+		min-height: 2.25rem;
+	}
+	.collapsed .top {
+		justify-content: center;
+	}
+	.header {
+		font-weight: 700;
+		letter-spacing: -0.01em;
+		min-width: 0;
+	}
+	.collapse {
+		display: grid;
+		place-items: center;
+		width: 2rem;
+		height: 2rem;
+		flex: none;
+		color: var(--tern-muted);
+		background: transparent;
+		border: 0;
+		border-radius: var(--tern-radius-sm);
+		cursor: pointer;
+	}
+	.collapse:hover {
+		color: var(--tern-fg);
+		background: var(--tern-surface-2);
+	}
+	.collapse:focus-visible,
+	.link:focus-visible {
+		outline: 2px solid var(--tern-ring);
+		outline-offset: -2px;
+	}
+	.nav {
+		display: grid;
+		gap: 1rem;
+		align-content: start;
+		flex: 1;
+	}
+	.group-label {
+		padding: 0 0.6rem 0.3rem;
+		font-size: 0.75rem;
+		font-weight: 600;
+		color: var(--tern-muted);
+	}
+	ul {
+		display: grid;
+		gap: 0.125rem;
+		margin: 0;
+		padding: 0;
+		list-style: none;
+	}
+	.link {
+		display: flex;
+		align-items: center;
+		gap: 0.6rem;
+		min-height: 2.125rem;
+		padding: 0 0.6rem;
+		font-size: 0.875rem;
+		font-weight: 500;
+		color: var(--tern-muted);
+		text-decoration: none;
+		border-radius: var(--tern-radius-sm);
+	}
+	.compact .link {
+		justify-content: center;
+		padding: 0;
+	}
+	.link:hover {
+		color: var(--tern-fg);
+		background: var(--tern-surface-2);
+	}
+	.link[aria-current='page'] {
+		color: var(--tern-fg);
+		background: var(--tern-accent-soft);
+		font-weight: 600;
+	}
+	.icon {
+		display: inline-flex;
+		width: 1.125rem;
+		justify-content: center;
+		flex: none;
+	}
+	.label {
+		flex: 1;
+	}
+	.badge {
+		min-width: 1.25rem;
+		padding: 0 0.35rem;
+		font-size: 0.75rem;
+		font-weight: 600;
+		text-align: center;
+		color: var(--tern-fg);
+		background: var(--tern-surface-2);
+		border-radius: 1rem;
+	}
+	.sub {
+		margin: 0.125rem 0 0.25rem 1.45rem;
+		padding-left: 0.6rem;
+		border-left: 1px solid var(--tern-border);
+	}
+	.sub .link {
+		min-height: 1.875rem;
+	}
+	.footer {
+		padding-top: 0.75rem;
+		border-top: 1px solid var(--tern-border);
+	}
+	.main {
+		min-width: 0;
+	}
+	.mobilebar {
+		display: none;
+	}
+	@media (max-width: 48rem) {
+		.tern-sidebar-layout,
+		.collapsed {
+			grid-template-columns: 1fr;
+		}
+		.sidebar {
+			display: none;
+		}
+		.mobilebar {
+			position: sticky;
+			top: 0;
+			z-index: 10;
+			display: flex;
+			align-items: center;
+			gap: 0.5rem;
+			padding: 0.5rem 0.75rem;
+			background: var(--tern-surface);
+			border-bottom: 1px solid var(--tern-border);
+		}
+	}
+	:global(.tern-sidebar-sheet.left) {
+		width: min(18rem, 100vw - 3rem);
+	}
+</style>

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

@@ -0,0 +1,35 @@
+import type { Snippet } from 'svelte';
+export type SidebarLink = {
+    label: string;
+    href: string;
+    /** An icon, shown alone when the sidebar is collapsed. */
+    icon?: Snippet;
+    /** A count or label after the link, such as "3". */
+    badge?: string;
+    /** Links under this one, shown while it or one of them is current. */
+    items?: {
+        label: string;
+        href: string;
+    }[];
+};
+export type SidebarGroup = {
+    label?: string;
+    items: SidebarLink[];
+};
+type Props = {
+    groups: SidebarGroup[];
+    /** The app's name or logo, at the top. */
+    header?: Snippet;
+    /** Things at the bottom, such as the signed-in user. */
+    footer?: Snippet;
+    /** Show icons only on wide screens; bind it. */
+    collapsed?: boolean;
+    /** Names the navigation. */
+    label?: string;
+    /** The page's content, next to the sidebar. */
+    children: Snippet;
+    class?: string;
+};
+declare const Sidebar: import("svelte").Component<Props, {}, "collapsed">;
+type Sidebar = ReturnType<typeof Sidebar>;
+export default Sidebar;