@ternkit/tern 1.3.0 → 1.5.0

package/dist/ui/SignIn.svelte

@@ -0,0 +1,182 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { FormField } from '../runtime/validate.js';
+	import Alert from './Alert.svelte';
+	import Button from './Button.svelte';
+	import Checkbox from './Checkbox.svelte';
+	import Field from './Field.svelte';
+	import Form from './Form.svelte';
+	import Input from './Input.svelte';
+	import PasswordInput from './PasswordInput.svelte';
+	import Separator from './Separator.svelte';
+
+	type Props = {
+		title?: string;
+		description?: string;
+		/** The heading level; 1 when this is the page's main content. */
+		level?: 1 | 2 | 3;
+		/** Providers from plugins/oauth, such as plugin.Providers(): each links to /auth/<name>/login. */
+		providers?: { name: string; label: string }[];
+		/** Where plugins/oauth lives. */
+		authPath?: string;
+		/** Where to go after signing in, a path on this site. */
+		next?: string;
+		/** Show the email and password form, which posts to action. */
+		password?: boolean;
+		action?: string;
+		/** The sign-in action's rules, from ./$forms. */
+		rules?: FormField[];
+		/** The page's form prop, for the server's errors. */
+		form?: unknown;
+		/** The ?error= code plugins/oauth sends back after a failed sign-in. */
+		error?: string | null;
+		/** A "Keep me signed in" checkbox, posted as remember. */
+		remember?: boolean;
+		/** Where to reset a forgotten password. */
+		forgotHref?: string;
+		/** Where to create an account. */
+		signUpHref?: string;
+		/** More content under the form, such as legal text. */
+		footer?: Snippet;
+		class?: string;
+	};
+	let {
+		title = 'Sign in',
+		description,
+		level = 1,
+		providers = [],
+		authPath = '/auth',
+		next,
+		password = true,
+		action,
+		rules,
+		form,
+		error,
+		remember = false,
+		forgotHref,
+		signUpHref,
+		footer,
+		class: klass = ''
+	}: Props = $props();
+
+	let submitting = $state(false);
+	const errorText = $derived(
+		!error ? null : error === 'access_denied' ? 'You cancelled the sign-in. Try again when you’re ready.' : 'Signing in didn’t work. Try again, or choose another way.'
+	);
+	const login = (name: string) => `${authPath}/${encodeURIComponent(name)}/login${next ? `?next=${encodeURIComponent(next)}` : ''}`;
+</script>
+
+<section class="tern-auth {klass}" aria-labelledby="tern-signin-title">
+	<header>
+		<svelte:element this={`h${level}`} id="tern-signin-title">{title}</svelte:element>
+		{#if description}<p>{description}</p>{/if}
+	</header>
+	{#if errorText}<Alert tone="danger" live>{errorText}</Alert>{/if}
+	{#if providers.length}
+		<div class="providers">
+			{#each providers as p (p.name)}
+				<Button variant="secondary" href={login(p.name)}>Continue with {p.label}</Button>
+			{/each}
+		</div>
+	{/if}
+	{#if providers.length && password}<div class="or"><Separator /><span>or</span><Separator /></div>{/if}
+	{#if password}
+		<Form {rules} {form} {action} bind:submitting reset={false}>
+			{#if next}<input type="hidden" name="next" value={next} />{/if}
+			<Field label="Email" name="email">
+				<Input type="email" autocomplete="username" spellcheck="false" />
+			</Field>
+			<Field label="Password" name="password">
+				<PasswordInput autocomplete="current-password" />
+			</Field>
+			<div class="row">
+				{#if remember}<Checkbox name="remember">Keep me signed in</Checkbox>{/if}
+				{#if forgotHref}<a href={forgotHref}>Forgot your password?</a>{/if}
+			</div>
+			<Button type="submit" loading={submitting}>Sign in</Button>
+		</Form>
+	{/if}
+	{#if signUpHref}<p class="switch">New here? <a href={signUpHref}>Create an account</a></p>{/if}
+	{#if footer}<div class="footer">{@render footer()}</div>{/if}
+</section>
+
+<style>
+	.tern-auth {
+		display: grid;
+		gap: 1.25rem;
+		width: 100%;
+		max-width: 24rem;
+		box-sizing: border-box;
+		padding: 2rem;
+		color: var(--tern-fg);
+		background: var(--tern-surface);
+		border: 1px solid var(--tern-border);
+		border-radius: calc(var(--tern-radius) + 4px);
+		box-shadow: var(--tern-shadow);
+	}
+	header {
+		display: grid;
+		gap: 0.35rem;
+	}
+	:is(h1, h2, h3) {
+		margin: 0;
+		font-size: 1.375rem;
+		font-weight: 650;
+		letter-spacing: -0.02em;
+	}
+	header p {
+		margin: 0;
+		color: var(--tern-muted);
+		font-size: 0.875rem;
+	}
+	.providers {
+		display: grid;
+		gap: 0.5rem;
+	}
+	.providers :global(.tern-btn) {
+		width: 100%;
+	}
+	.or {
+		display: flex;
+		align-items: center;
+		gap: 0.75rem;
+		color: var(--tern-muted);
+		font-size: 0.8125rem;
+	}
+	.or :global(.tern-separator) {
+		flex: 1;
+	}
+	.row {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		justify-content: space-between;
+		gap: 0.5rem;
+		font-size: 0.875rem;
+	}
+	.row:empty {
+		display: none;
+	}
+	a {
+		color: var(--tern-accent);
+		font-weight: 550;
+	}
+	a:focus-visible {
+		outline: 2px solid var(--tern-ring);
+		outline-offset: 2px;
+		border-radius: 2px;
+	}
+	.switch {
+		margin: 0;
+		text-align: center;
+		font-size: 0.875rem;
+		color: var(--tern-muted);
+	}
+	.footer {
+		font-size: 0.8125rem;
+		color: var(--tern-muted);
+	}
+	.tern-auth :global(.tern-form > .tern-btn) {
+		width: 100%;
+	}
+</style>

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

@@ -0,0 +1,38 @@
+import type { Snippet } from 'svelte';
+import type { FormField } from '../runtime/validate.js';
+type Props = {
+    title?: string;
+    description?: string;
+    /** The heading level; 1 when this is the page's main content. */
+    level?: 1 | 2 | 3;
+    /** Providers from plugins/oauth, such as plugin.Providers(): each links to /auth/<name>/login. */
+    providers?: {
+        name: string;
+        label: string;
+    }[];
+    /** Where plugins/oauth lives. */
+    authPath?: string;
+    /** Where to go after signing in, a path on this site. */
+    next?: string;
+    /** Show the email and password form, which posts to action. */
+    password?: boolean;
+    action?: string;
+    /** The sign-in action's rules, from ./$forms. */
+    rules?: FormField[];
+    /** The page's form prop, for the server's errors. */
+    form?: unknown;
+    /** The ?error= code plugins/oauth sends back after a failed sign-in. */
+    error?: string | null;
+    /** A "Keep me signed in" checkbox, posted as remember. */
+    remember?: boolean;
+    /** Where to reset a forgotten password. */
+    forgotHref?: string;
+    /** Where to create an account. */
+    signUpHref?: string;
+    /** More content under the form, such as legal text. */
+    footer?: Snippet;
+    class?: string;
+};
+declare const SignIn: import("svelte").Component<Props, {}, "">;
+type SignIn = ReturnType<typeof SignIn>;
+export default SignIn;

package/dist/ui/SignUp.svelte

@@ -0,0 +1,106 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { FormField } from '../runtime/validate.js';
+	import Button from './Button.svelte';
+	import Checkbox from './Checkbox.svelte';
+	import Field from './Field.svelte';
+	import Form from './Form.svelte';
+	import Input from './Input.svelte';
+	import PasswordInput from './PasswordInput.svelte';
+
+	type Props = {
+		title?: string;
+		description?: string;
+		level?: 1 | 2 | 3;
+		action?: string;
+		/** The sign-up action's rules, from ./$forms; they also set the password hint. */
+		rules?: FormField[];
+		form?: unknown;
+		/** Ask for a name, posted as name. */
+		name?: boolean;
+		/** Ask to type the password twice, posted as confirm. */
+		confirm?: boolean;
+		/** Links to the terms; then a checkbox, posted as terms, must be checked. */
+		termsHref?: string;
+		signInHref?: string;
+		footer?: Snippet;
+		class?: string;
+	};
+	let { title = 'Create an account', description, level = 1, action, rules, form, name = true, confirm = false, termsHref, signInHref, footer, class: klass = '' }: Props = $props();
+
+	let submitting = $state(false);
+	const minPassword = $derived(rules?.find((f) => f.name === 'password')?.rules?.find((r) => r.name === 'min')?.arg);
+</script>
+
+<section class="tern-auth {klass}" aria-labelledby="tern-signup-title">
+	<header>
+		<svelte:element this={`h${level}`} id="tern-signup-title">{title}</svelte:element>
+		{#if description}<p>{description}</p>{/if}
+	</header>
+	<Form {rules} {form} {action} bind:submitting reset={false}>
+		{#if name}
+			<Field label="Name" name="name"><Input autocomplete="name" /></Field>
+		{/if}
+		<Field label="Email" name="email"><Input type="email" autocomplete="email" spellcheck="false" /></Field>
+		<Field label="Password" name="password" description={minPassword ? `At least ${minPassword} characters.` : undefined}>
+			<PasswordInput autocomplete="new-password" />
+		</Field>
+		{#if confirm}
+			<Field label="Confirm password" name="confirm"><PasswordInput autocomplete="new-password" /></Field>
+		{/if}
+		{#if termsHref}
+			<Checkbox name="terms">I agree to the <a href={termsHref}>terms</a></Checkbox>
+		{/if}
+		<Button type="submit" loading={submitting}>Create account</Button>
+	</Form>
+	{#if signInHref}<p class="switch">Already have an account? <a href={signInHref}>Sign in</a></p>{/if}
+	{#if footer}<div class="footer">{@render footer()}</div>{/if}
+</section>
+
+<style>
+	.tern-auth {
+		display: grid;
+		gap: 1.25rem;
+		width: 100%;
+		max-width: 24rem;
+		box-sizing: border-box;
+		padding: 2rem;
+		color: var(--tern-fg);
+		background: var(--tern-surface);
+		border: 1px solid var(--tern-border);
+		border-radius: calc(var(--tern-radius) + 4px);
+		box-shadow: var(--tern-shadow);
+	}
+	header {
+		display: grid;
+		gap: 0.35rem;
+	}
+	:is(h1, h2, h3) {
+		margin: 0;
+		font-size: 1.375rem;
+		font-weight: 650;
+		letter-spacing: -0.02em;
+	}
+	header p {
+		margin: 0;
+		color: var(--tern-muted);
+		font-size: 0.875rem;
+	}
+	a {
+		color: var(--tern-accent);
+		font-weight: 550;
+	}
+	.switch {
+		margin: 0;
+		text-align: center;
+		font-size: 0.875rem;
+		color: var(--tern-muted);
+	}
+	.footer {
+		font-size: 0.8125rem;
+		color: var(--tern-muted);
+	}
+	.tern-auth :global(.tern-form > .tern-btn) {
+		width: 100%;
+	}
+</style>

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

@@ -0,0 +1,23 @@
+import type { Snippet } from 'svelte';
+import type { FormField } from '../runtime/validate.js';
+type Props = {
+    title?: string;
+    description?: string;
+    level?: 1 | 2 | 3;
+    action?: string;
+    /** The sign-up action's rules, from ./$forms; they also set the password hint. */
+    rules?: FormField[];
+    form?: unknown;
+    /** Ask for a name, posted as name. */
+    name?: boolean;
+    /** Ask to type the password twice, posted as confirm. */
+    confirm?: boolean;
+    /** Links to the terms; then a checkbox, posted as terms, must be checked. */
+    termsHref?: string;
+    signInHref?: string;
+    footer?: Snippet;
+    class?: string;
+};
+declare const SignUp: import("svelte").Component<Props, {}, "">;
+type SignUp = ReturnType<typeof SignUp>;
+export default SignUp;

package/dist/ui/Slider.svelte

@@ -0,0 +1,196 @@
+<script lang="ts">
+	import { getField } from './field.js';
+
+	type Props = {
+		/** A number for one thumb, or [low, high] for a range; bind it. */
+		value?: number | [number, number];
+		min?: number;
+		max?: number;
+		step?: number;
+		/** Labels it when it isn't in a Field. */
+		label?: string;
+		/** Formats values for screen readers and the tooltip, such as (v) => `${v}%`. */
+		format?: (v: number) => string;
+		/** Posts the value (or both values) under this name. */
+		name?: string;
+		disabled?: boolean;
+		class?: string;
+		onchange?: (value: number | [number, number]) => void;
+	};
+	const field = getField();
+	let { value = $bindable(0), min = 0, max = 100, step = 1, label, format = String, name: nameProp, disabled = false, class: klass = '', onchange }: Props = $props();
+	const name = $derived(nameProp ?? field?.name);
+
+	const uid = $props.id();
+	field?.custom();
+	let track = $state<HTMLDivElement>();
+	const thumbs: HTMLElement[] = [];
+	let dragging = $state<number | null>(null);
+
+	const values = $derived<number[]>(Array.isArray(value) ? value : [value]);
+	const range = $derived(Array.isArray(value));
+	const off = $derived(disabled || !!field?.disabled);
+	const pct = (v: number) => ((v - min) / (max - min || 1)) * 100;
+
+	function snap(v: number) {
+		const s = Math.round((v - min) / step) * step + min;
+		const decimals = (String(step).split('.')[1] ?? '').length;
+		return Math.min(max, Math.max(min, Number(s.toFixed(decimals))));
+	}
+
+	function set(i: number, v: number) {
+		v = snap(v);
+		if (range) {
+			const [lo, hi] = value as [number, number];
+			const next: [number, number] = i === 0 ? [Math.min(v, hi), hi] : [lo, Math.max(v, lo)];
+			if (next[0] === lo && next[1] === hi) return;
+			value = next;
+		} else {
+			if (v === value) return;
+			value = v;
+		}
+		onchange?.(value);
+	}
+
+	function fromPointer(e: PointerEvent) {
+		const r = track!.getBoundingClientRect();
+		return min + ((e.clientX - r.left) / r.width) * (max - min);
+	}
+
+	function down(e: PointerEvent) {
+		if (off || !track) return;
+		e.preventDefault();
+		const v = fromPointer(e);
+		// The nearest thumb moves; on a tie, the one that can go that way.
+		const i = range ? (Math.abs(v - values[0]!) < Math.abs(v - values[1]!) || (v < values[0]! && values[0] === values[1]) ? 0 : 1) : 0;
+		dragging = i;
+		set(i, v);
+		thumbs[i]?.focus();
+		track.setPointerCapture(e.pointerId);
+	}
+
+	function onkeydown(e: KeyboardEvent, i: number) {
+		const big = Math.max(step, (max - min) / 10);
+		const v = values[i]!;
+		const moves: Record<string, number> = {
+			ArrowRight: v + step,
+			ArrowUp: v + step,
+			ArrowLeft: v - step,
+			ArrowDown: v - step,
+			PageUp: v + big,
+			PageDown: v - big,
+			Home: min,
+			End: max
+		};
+		if (!(e.key in moves)) return;
+		e.preventDefault();
+		set(i, moves[e.key]!);
+	}
+</script>
+
+<div class="tern-slider {klass}" class:disabled={off}>
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div
+		bind:this={track}
+		class="track"
+		onpointerdown={down}
+		onpointermove={(e) => dragging !== null && set(dragging, fromPointer(e))}
+		onpointerup={() => (dragging = null)}
+		onpointercancel={() => (dragging = null)}
+	>
+		<div class="fill" style:left="{range ? pct(values[0]!) : 0}%" style:right="{100 - pct(values[values.length - 1]!)}%"></div>
+		{#each values as v, i (i)}
+			<span
+				bind:this={thumbs[i]}
+				class="thumb"
+				class:active={dragging === i}
+				id={i === 0 ? field?.id : undefined}
+				role="slider"
+				tabindex={off ? -1 : 0}
+				style:left="{pct(v)}%"
+				aria-valuemin={range && i === 1 ? values[0] : min}
+				aria-valuemax={range && i === 0 ? values[1] : max}
+				aria-valuenow={v}
+				aria-valuetext={format(v)}
+				aria-disabled={off || undefined}
+				aria-label={field || !label ? undefined : range ? `${label}, ${i === 0 ? 'minimum' : 'maximum'}` : label}
+				aria-labelledby={field ? (range ? `${field.labelId} tern-slider-${uid}-${i}` : field.labelId) : undefined}
+				aria-describedby={field?.describedBy}
+				onkeydown={(e) => onkeydown(e, i)}
+			>
+				<span class="value" aria-hidden="true">{format(v)}</span>
+			</span>
+			{#if range && field}<span class="tern-sr-only" id="tern-slider-{uid}-{i}">{i === 0 ? 'minimum' : 'maximum'}</span>{/if}
+		{/each}
+	</div>
+	{#if name}
+		{#each values as v, i (i)}<input type="hidden" {name} value={v} />{/each}
+	{/if}
+</div>
+
+<style>
+	.tern-slider {
+		padding: 0.6rem 0.5rem;
+		touch-action: none;
+	}
+	.track {
+		position: relative;
+		height: 0.375rem;
+		border-radius: 1rem;
+		background: var(--tern-surface-2);
+		box-shadow: inset 0 0 0 1px var(--tern-border);
+		cursor: pointer;
+	}
+	.fill {
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		border-radius: inherit;
+		background: var(--tern-accent);
+	}
+	.thumb {
+		position: absolute;
+		top: 50%;
+		width: 1.125rem;
+		height: 1.125rem;
+		translate: -50% -50%;
+		border-radius: 50%;
+		background: var(--tern-surface);
+		border: 2px solid var(--tern-accent);
+		box-shadow: var(--tern-shadow);
+		cursor: grab;
+		outline: none;
+		transition: box-shadow var(--tern-duration);
+	}
+	.thumb:focus-visible,
+	.thumb.active {
+		box-shadow: 0 0 0 4px color-mix(in oklch, var(--tern-ring) 35%, transparent);
+	}
+	.value {
+		position: absolute;
+		bottom: calc(100% + 0.4rem);
+		left: 50%;
+		translate: -50% 0;
+		padding: 0.15rem 0.4rem;
+		border-radius: var(--tern-radius-sm);
+		background: var(--tern-fg);
+		color: var(--tern-bg);
+		font-size: 0.75rem;
+		white-space: nowrap;
+		opacity: 0;
+		pointer-events: none;
+		transition: opacity var(--tern-duration);
+	}
+	.thumb:focus-visible .value,
+	.thumb.active .value,
+	.thumb:hover .value {
+		opacity: 1;
+	}
+	.disabled {
+		opacity: 0.5;
+	}
+	.disabled .track,
+	.disabled .thumb {
+		cursor: not-allowed;
+	}
+</style>

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

@@ -0,0 +1,19 @@
+type Props = {
+    /** A number for one thumb, or [low, high] for a range; bind it. */
+    value?: number | [number, number];
+    min?: number;
+    max?: number;
+    step?: number;
+    /** Labels it when it isn't in a Field. */
+    label?: string;
+    /** Formats values for screen readers and the tooltip, such as (v) => `${v}%`. */
+    format?: (v: number) => string;
+    /** Posts the value (or both values) under this name. */
+    name?: string;
+    disabled?: boolean;
+    class?: string;
+    onchange?: (value: number | [number, number]) => void;
+};
+declare const Slider: import("svelte").Component<Props, {}, "value">;
+type Slider = ReturnType<typeof Slider>;
+export default Slider;

package/dist/ui/Sparkline.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	type Props = {
+		values: number[];
+		/** Describes the trend for screen readers, such as "Visits rose 12% this week". */
+		label: string;
+		width?: number;
+		height?: number;
+		class?: string;
+	};
+	let { values, label, width = 96, height = 28, class: klass = '' }: Props = $props();
+
+	const min = $derived(Math.min(...values));
+	const max = $derived(Math.max(...values));
+	const pts = $derived(values.map((v, i) => [2 + (i / Math.max(1, values.length - 1)) * (width - 6), 2 + (1 - (v - min) / (max - min || 1)) * (height - 4)] as const));
+	const d = $derived(pts.map(([x, y], i) => `${i ? 'L' : 'M'}${x.toFixed(1)},${y.toFixed(1)}`).join(''));
+	const last = $derived(pts[pts.length - 1]);
+</script>
+
+<!-- A trend at a glance: the history in a muted line, the latest point in the accent. -->
+<svg class="tern-sparkline {klass}" {width} {height} viewBox="0 0 {width} {height}" role="img" aria-label={label}>
+	<path {d} fill="none" stroke="var(--tern-border-strong)" stroke-width="1.5" stroke-linejoin="round" stroke-linecap="round" />
+	{#if last}<circle cx={last[0]} cy={last[1]} r="2.5" fill="var(--tern-accent)" />{/if}
+</svg>

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

@@ -0,0 +1,11 @@
+type Props = {
+    values: number[];
+    /** Describes the trend for screen readers, such as "Visits rose 12% this week". */
+    label: string;
+    width?: number;
+    height?: number;
+    class?: string;
+};
+declare const Sparkline: import("svelte").Component<Props, {}, "">;
+type Sparkline = ReturnType<typeof Sparkline>;
+export default Sparkline;

package/dist/ui/Stat.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+	import Sparkline from './Sparkline.svelte';
+	import { formatNumber } from './chart.js';
+
+	type Props = {
+		/** What it counts, in sentence case, such as "Unique visitors". */
+		label: string;
+		value: number;
+		/** The change, in percent, against the period named in period. */
+		delta?: number;
+		/** Such as "vs last week". */
+		period?: string;
+		/** Whether up is good (visits) or bad (errors), which picks the delta's color. */
+		upIsGood?: boolean;
+		/** Recent values, drawn as a sparkline. */
+		trend?: number[];
+		format?: (v: number) => string;
+		class?: string;
+	};
+	let { label, value, delta, period = 'vs the previous period', upIsGood = true, trend, format = (v) => formatNumber(v), class: klass = '' }: Props = $props();
+
+	const good = $derived(delta === undefined || delta === 0 ? null : delta > 0 === upIsGood);
+	const deltaText = $derived(delta === undefined ? '' : `${delta > 0 ? '+' : delta < 0 ? '−' : ''}${Math.abs(Math.round(delta * 10) / 10)}%`);
+</script>
+
+<div class="tern-stat {klass}">
+	<div class="label">{label}</div>
+	<div class="value">{format(value)}</div>
+	<div class="foot">
+		{#if delta !== undefined}
+			<span class="delta" class:good={good === true} class:bad={good === false}>
+				<span aria-hidden="true">{delta > 0 ? '↑' : delta < 0 ? '↓' : '→'}</span>
+				<span class="tern-sr-only">{delta > 0 ? 'Up' : delta < 0 ? 'Down' : 'No change'}</span>
+				{deltaText}
+			</span>
+			<span class="period">{period}</span>
+		{/if}
+		{#if trend && trend.length > 1}
+			<Sparkline values={trend} label="{label}, trend over the last {trend.length} periods" class="spark" />
+		{/if}
+	</div>
+</div>
+
+<style>
+	.tern-stat {
+		display: grid;
+		gap: 0.25rem;
+		padding: 1rem 1.125rem;
+		background: var(--tern-surface);
+		border: 1px solid var(--tern-border);
+		border-radius: var(--tern-radius);
+	}
+	.label {
+		font-size: 0.8125rem;
+		font-weight: 550;
+		color: var(--tern-muted);
+	}
+	.value {
+		font-size: 1.75rem;
+		font-weight: 650;
+		letter-spacing: -0.02em;
+		font-variant-numeric: tabular-nums;
+		color: var(--tern-fg);
+	}
+	.foot {
+		display: flex;
+		align-items: center;
+		gap: 0.4rem;
+		min-height: 1.75rem;
+		font-size: 0.8125rem;
+	}
+	.delta {
+		display: inline-flex;
+		gap: 0.15rem;
+		font-weight: 600;
+		color: var(--tern-muted);
+		font-variant-numeric: tabular-nums;
+	}
+	.delta.good {
+		color: var(--tern-success);
+	}
+	.delta.bad {
+		color: var(--tern-danger);
+	}
+	.period {
+		color: var(--tern-muted);
+	}
+	.foot :global(.spark) {
+		margin-inline-start: auto;
+	}
+</style>