@ternkit/tern 1.3.0 → 1.5.0

package/dist/ui/Carousel.svelte

@@ -0,0 +1,169 @@
+<script lang="ts" generics="T">
+	import type { Snippet } from 'svelte';
+
+	type Props = {
+		items: T[];
+		/** Names the carousel, such as "Featured projects". */
+		label: string;
+		/** Draws one slide. */
+		slide: Snippet<[T, number]>;
+		/** Slides visible at once on wide screens. */
+		perView?: number;
+		/** Moves on by itself every this many milliseconds, with a pause button. Stops on hover and focus. */
+		autoplay?: number;
+		class?: string;
+	};
+	let { items, label, slide, perView = 1, autoplay, class: klass = '' }: Props = $props();
+
+	const uid = $props.id();
+	let track = $state<HTMLDivElement>();
+	let current = $state(0);
+	// svelte-ignore state_referenced_locally
+	let playing = $state(!!autoplay);
+	let paused = $state(false); // by hover or focus
+
+	function go(i: number) {
+		const n = Math.max(0, items.length - perView);
+		current = ((i % (n + 1)) + n + 1) % (n + 1);
+		const el = track?.children[current] as HTMLElement | undefined;
+		track?.scrollTo({ left: el?.offsetLeft ?? 0, behavior: matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth' });
+	}
+
+	$effect(() => {
+		if (!autoplay || !playing || paused) return;
+		const t = setInterval(() => go(current + 1), autoplay);
+		return () => clearInterval(t);
+	});
+
+	// Keep current in step when the user scrolls or swipes.
+	function onscroll() {
+		if (!track) return;
+		const w = (track.children[0] as HTMLElement | undefined)?.offsetWidth || 1;
+		current = Math.round(track.scrollLeft / w);
+	}
+</script>
+
+<section
+	class="tern-carousel {klass}"
+	aria-roledescription="carousel"
+	aria-label={label}
+	onpointerenter={() => (paused = true)}
+	onpointerleave={() => (paused = false)}
+	onfocusin={() => (paused = true)}
+	onfocusout={() => (paused = false)}
+	style:--per-view={perView}
+>
+	<div class="controls">
+		{#if autoplay}
+			<button type="button" class="control" aria-label={playing ? 'Stop slides' : 'Start slides'} onclick={() => (playing = !playing)}>
+				{#if playing}
+					<svg aria-hidden="true" viewBox="0 0 16 16" width="14" height="14"><path d="M5 3.5v9M11 3.5v9" stroke="currentColor" stroke-width="2" stroke-linecap="round" /></svg>
+				{:else}
+					<svg aria-hidden="true" viewBox="0 0 16 16" width="14" height="14"><path d="M5 3.5l7 4.5-7 4.5z" fill="currentColor" /></svg>
+				{/if}
+			</button>
+		{/if}
+		<button type="button" class="control" aria-label="Previous slide" aria-controls="tern-carousel-{uid}" onclick={() => go(current - 1)}>
+			<svg aria-hidden="true" viewBox="0 0 16 16" width="16" height="16"><path d="M10 4l-4 4 4 4" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" /></svg>
+		</button>
+		<button type="button" class="control" aria-label="Next slide" aria-controls="tern-carousel-{uid}" onclick={() => go(current + 1)}>
+			<svg aria-hidden="true" viewBox="0 0 16 16" width="16" height="16"><path d="M6 4l4 4-4 4" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" /></svg>
+		</button>
+	</div>
+	<!-- svelte-ignore a11y_no_noninteractive_tabindex, a11y_no_noninteractive_element_interactions -->
+	<div
+		bind:this={track}
+		class="track"
+		id="tern-carousel-{uid}"
+		role="group"
+		aria-label="Slides"
+		tabindex="0"
+		aria-live={playing && !paused ? 'off' : 'polite'}
+		{onscroll}
+		onkeydown={(e) => {
+			if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
+				e.preventDefault();
+				go(current + (e.key === 'ArrowRight' ? 1 : -1));
+			}
+		}}
+	>
+		{#each items as item, i (i)}
+			<div class="slide" role="group" aria-roledescription="slide" aria-label="{i + 1} of {items.length}" inert={i < current || i >= current + perView ? true : undefined}>
+				{@render slide(item, i)}
+			</div>
+		{/each}
+	</div>
+	<div class="dots" aria-hidden="true">
+		{#each { length: Math.max(1, items.length - perView + 1) }, i (i)}<span class:on={i === current}></span>{/each}
+	</div>
+</section>
+
+<style>
+	.tern-carousel {
+		display: grid;
+		gap: 0.75rem;
+	}
+	.controls {
+		display: flex;
+		justify-content: flex-end;
+		gap: 0.375rem;
+	}
+	.track {
+		display: flex;
+		gap: 1rem;
+		overflow-x: auto;
+		scroll-snap-type: x mandatory;
+		scrollbar-width: none;
+		border-radius: var(--tern-radius);
+	}
+	.track:focus-visible {
+		outline: 2px solid var(--tern-ring);
+		outline-offset: 2px;
+	}
+	.track::-webkit-scrollbar {
+		display: none;
+	}
+	.slide {
+		flex: 0 0 calc((100% - (var(--per-view) - 1) * 1rem) / var(--per-view));
+		scroll-snap-align: start;
+		min-width: 0;
+	}
+	@media (max-width: 40rem) {
+		.slide {
+			flex-basis: 85%;
+		}
+	}
+	.control {
+		display: grid;
+		place-items: center;
+		width: 2rem;
+		height: 2rem;
+		color: var(--tern-fg);
+		background: var(--tern-surface);
+		border: 1px solid var(--tern-border-strong);
+		border-radius: 50%;
+		cursor: pointer;
+	}
+	.control:hover {
+		background: var(--tern-surface-2);
+	}
+	.control:focus-visible {
+		outline: 2px solid var(--tern-ring);
+		outline-offset: 2px;
+	}
+	.dots {
+		display: flex;
+		justify-content: center;
+		gap: 0.375rem;
+	}
+	.dots span {
+		width: 0.4rem;
+		height: 0.4rem;
+		border-radius: 50%;
+		background: var(--tern-border-strong);
+		transition: background var(--tern-duration);
+	}
+	.dots span.on {
+		background: var(--tern-accent);
+	}
+</style>

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

@@ -0,0 +1,36 @@
+import type { Snippet } from 'svelte';
+declare function $$render<T>(): {
+    props: {
+        items: T[];
+        /** Names the carousel, such as "Featured projects". */
+        label: string;
+        /** Draws one slide. */
+        slide: Snippet<[T, number]>;
+        /** Slides visible at once on wide screens. */
+        perView?: number;
+        /** Moves on by itself every this many milliseconds, with a pause button. Stops on hover and focus. */
+        autoplay?: number;
+        class?: string;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Carousel: $$IsomorphicComponent;
+type Carousel<T> = InstanceType<typeof Carousel<T>>;
+export default Carousel;

package/dist/ui/ChartFrame.svelte

@@ -0,0 +1,174 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import Collapsible from './Collapsible.svelte';
+	import ScrollArea from './ScrollArea.svelte';
+
+	type Props = {
+		title: string;
+		description?: string;
+		/** The heading level, to fit the page's outline. */
+		level?: 2 | 3 | 4;
+		legend: { label: string; color: string; kind: 'line' | 'rect' }[];
+		/** The table view: every value, reachable without hovering. */
+		table: { headers: string[]; rows: string[][] };
+		/** What the live readout says for the focused point, for keyboard and screen reader users. */
+		readout: string;
+		children: Snippet;
+		class?: string;
+	};
+	let { title, description, level = 3, legend, table, readout, children, class: klass = '' }: Props = $props();
+	const uid = $props.id();
+</script>
+
+<figure class="tern-chart {klass}" aria-labelledby="tern-chart-{uid}-title">
+	<figcaption>
+		<svelte:element this={`h${level}`} class="title" id="tern-chart-{uid}-title">{title}</svelte:element>
+		{#if description}<p class="description">{description}</p>{/if}
+	</figcaption>
+	{#if legend.length >= 2}
+		<ul class="legend" aria-label="Legend">
+			{#each legend as item (item.label)}
+				<li><span class="key {item.kind}" style:background={item.color} aria-hidden="true"></span>{item.label}</li>
+			{/each}
+		</ul>
+	{/if}
+	{@render children()}
+	<p class="tern-sr-only" aria-live="polite">{readout}</p>
+	<Collapsible label="Show data">
+		<ScrollArea label="{title} data" maxHeight="16rem" class="table">
+			<table class="tern-table">
+				<caption class="tern-sr-only">{title}</caption>
+				<thead><tr>{#each table.headers as h, i (i)}<th scope="col" style:text-align={i ? 'end' : undefined}>{h}</th>{/each}</tr></thead>
+				<tbody>
+					{#each table.rows as row, r (r)}
+						<tr>{#each row as cell, i (i)}{#if i === 0}<th scope="row">{cell}</th>{:else}<td style:text-align="end">{cell}</td>{/if}{/each}</tr>
+					{/each}
+				</tbody>
+			</table>
+		</ScrollArea>
+	</Collapsible>
+</figure>
+
+<style>
+	.tern-chart {
+		display: grid;
+		grid-template-columns: minmax(0, 1fr);
+		gap: 0.5rem;
+		min-width: 0;
+		margin: 0;
+		color: var(--tern-fg);
+	}
+	.title {
+		margin: 0;
+		font-size: 0.9375rem;
+		font-weight: 600;
+	}
+	.description {
+		margin: 0.15rem 0 0;
+		font-size: 0.8125rem;
+		color: var(--tern-muted);
+	}
+	.legend {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 0.25rem 1rem;
+		margin: 0;
+		padding: 0;
+		list-style: none;
+		font-size: 0.8125rem;
+		color: var(--tern-muted);
+	}
+	.legend li {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.4rem;
+	}
+	.key.line {
+		width: 0.875rem;
+		height: 2px;
+		border-radius: 1px;
+	}
+	.key.rect {
+		width: 0.625rem;
+		height: 0.625rem;
+		border-radius: 2px;
+	}
+	.tern-chart :global(.table th[scope='row']) {
+		font-weight: 500;
+		text-transform: none;
+		letter-spacing: 0;
+		font-size: 0.875rem;
+		color: var(--tern-fg);
+	}
+	.tern-chart :global(.table td) {
+		font-variant-numeric: tabular-nums;
+	}
+	/* Shared by the charts' SVG. */
+	.tern-chart :global(.tern-plot) {
+		position: relative;
+		outline: none;
+		border-radius: var(--tern-radius-sm);
+	}
+	.tern-chart :global(.tern-plot:focus-visible) {
+		box-shadow: 0 0 0 2px var(--tern-ring);
+	}
+	.tern-chart :global(.tern-plot svg) {
+		display: block;
+		width: 100%;
+		overflow: visible;
+	}
+	.tern-chart :global(.grid) {
+		stroke: var(--tern-border);
+		stroke-width: 1;
+		shape-rendering: crispEdges;
+	}
+	.tern-chart :global(.tick) {
+		fill: var(--tern-muted);
+		font-size: 12px;
+		font-variant-numeric: tabular-nums;
+	}
+	.tern-chart :global(.direct) {
+		fill: var(--tern-fg);
+		font-size: 12px;
+		font-weight: 500;
+	}
+	.tern-chart :global(.tooltip) {
+		position: absolute;
+		top: 0;
+		z-index: 2;
+		display: grid;
+		gap: 0.2rem;
+		min-width: 8rem;
+		padding: 0.5rem 0.65rem;
+		font-size: 0.8125rem;
+		color: var(--tern-fg);
+		background: var(--tern-surface);
+		border: 1px solid var(--tern-border);
+		border-radius: var(--tern-radius-sm);
+		box-shadow: var(--tern-shadow-lg);
+		pointer-events: none;
+		white-space: nowrap;
+	}
+	.tern-chart :global(.tooltip .head) {
+		color: var(--tern-muted);
+		font-size: 0.75rem;
+	}
+	.tern-chart :global(.tooltip .row) {
+		display: flex;
+		align-items: center;
+		gap: 0.45rem;
+	}
+	.tern-chart :global(.tooltip .row strong) {
+		font-variant-numeric: tabular-nums;
+		font-weight: 650;
+	}
+	.tern-chart :global(.tooltip .row span) {
+		color: var(--tern-muted);
+	}
+	.tern-chart :global(.tooltip .swatch) {
+		width: 0.75rem;
+		height: 2px;
+		border-radius: 1px;
+		flex: none;
+	}
+</style>

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

@@ -0,0 +1,24 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    title: string;
+    description?: string;
+    /** The heading level, to fit the page's outline. */
+    level?: 2 | 3 | 4;
+    legend: {
+        label: string;
+        color: string;
+        kind: 'line' | 'rect';
+    }[];
+    /** The table view: every value, reachable without hovering. */
+    table: {
+        headers: string[];
+        rows: string[][];
+    };
+    /** What the live readout says for the focused point, for keyboard and screen reader users. */
+    readout: string;
+    children: Snippet;
+    class?: string;
+};
+declare const ChartFrame: import("svelte").Component<Props, {}, "">;
+type ChartFrame = ReturnType<typeof ChartFrame>;
+export default ChartFrame;

package/dist/ui/Checkbox.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLInputAttributes } from 'svelte/elements';
+	import { getForm } from './form.js';
 
 	type Props = Omit<HTMLInputAttributes, 'type'> & {
 		checked?: boolean;
@@ -13,16 +14,21 @@
 	};
 	let { checked = $bindable(false), indeterminate = $bindable(false), children, description, class: klass = '', ...rest }: Props = $props();
 	const uid = $props.id();
+	// In a Form, a named checkbox shows its own error, such as "Terms must be checked."
+	const form = getForm();
+	const error = $derived(typeof rest.name === 'string' ? form?.error(rest.name) : undefined);
+	const describedBy = $derived([description ? `tern-check-${uid}` : '', error ? `tern-check-${uid}-error` : ''].filter(Boolean).join(' ') || undefined);
 </script>
 
 <label class="tern-check {klass}">
-	<input type="checkbox" {...rest} bind:checked bind:indeterminate aria-describedby={description ? `tern-check-${uid}` : undefined} />
+	<input type="checkbox" {...rest} bind:checked bind:indeterminate aria-describedby={describedBy} aria-invalid={error ? true : 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}
+		{#if error}<span class="error" id="tern-check-{uid}-error" role="alert">{error}</span>{/if}
 	</span>
 </label>
 
@@ -97,4 +103,10 @@
 		color: var(--tern-muted);
 		font-size: 0.8125rem;
 	}
+	.error {
+		display: block;
+		font-size: 0.8125rem;
+		font-weight: 500;
+		color: var(--tern-danger);
+	}
 </style>

package/dist/ui/Collapsible.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	type Props = {
+		/** Whether it's open; bind it. */
+		open?: boolean;
+		/** The button's text. */
+		label: string;
+		children: Snippet;
+		class?: string;
+	};
+	let { open = $bindable(false), label, children, class: klass = '' }: Props = $props();
+	const uid = $props.id();
+</script>
+
+<!-- A button that shows and hides a region: the disclosure pattern. -->
+<div class="tern-collapsible {klass}">
+	<button type="button" aria-expanded={open} aria-controls="tern-collapsible-{uid}" onclick={() => (open = !open)}>
+		<svg aria-hidden="true" viewBox="0 0 16 16" width="14" height="14"><path d="M6 4l4 4-4 4" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" /></svg>
+		{label}
+	</button>
+	<div id="tern-collapsible-{uid}" class="content" hidden={!open}>
+		{@render children()}
+	</div>
+</div>
+
+<style>
+	button {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.375rem;
+		padding: 0.3rem 0.4rem 0.3rem 0.2rem;
+		font: inherit;
+		font-size: 0.875rem;
+		font-weight: 550;
+		color: var(--tern-fg);
+		background: transparent;
+		border: 0;
+		border-radius: var(--tern-radius-sm);
+		cursor: pointer;
+	}
+	button:hover {
+		background: var(--tern-surface-2);
+	}
+	button:focus-visible {
+		outline: 2px solid var(--tern-ring);
+		outline-offset: 1px;
+	}
+	svg {
+		color: var(--tern-muted);
+		transition: rotate var(--tern-duration);
+	}
+	[aria-expanded='true'] svg {
+		rotate: 90deg;
+	}
+	.content {
+		padding: 0.5rem 0 0 1.4rem;
+	}
+</style>

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

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    /** Whether it's open; bind it. */
+    open?: boolean;
+    /** The button's text. */
+    label: string;
+    children: Snippet;
+    class?: string;
+};
+declare const Collapsible: import("svelte").Component<Props, {}, "open">;
+type Collapsible = ReturnType<typeof Collapsible>;
+export default Collapsible;