@ternkit/tern 1.2.1 → 1.4.0

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

@@ -0,0 +1,112 @@
+<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;
+		/** 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();
+	// 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={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>
+
+<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;
+	}
+	.error {
+		display: block;
+		font-size: 0.8125rem;
+		font-weight: 500;
+		color: var(--tern-danger);
+	}
+</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/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;