@ternkit/tern 1.5.0 → 1.7.0

package/dist/ui/AccountSection.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+	// The section the account settings lists share. Internal: not exported.
+	import type { Snippet } from 'svelte';
+
+	type Props = { id: string; title: string; description?: string; level?: 2 | 3 | 4; class?: string; children: Snippet };
+	let { id, title, description, level = 2, class: klass = '', children }: Props = $props();
+</script>
+
+<section class="tern-account {klass}" aria-labelledby={id}>
+	<header>
+		<svelte:element this={`h${level}`} {id}>{title}</svelte:element>
+		{#if description}<p>{description}</p>{/if}
+	</header>
+	{@render children()}
+</section>
+
+<style>
+	.tern-account {
+		display: grid;
+		gap: 1rem;
+		color: var(--tern-fg);
+	}
+	header {
+		display: grid;
+		gap: 0.25rem;
+	}
+	:is(h2, h3, h4) {
+		margin: 0;
+		font-size: 1.0625rem;
+		font-weight: 650;
+	}
+	header p,
+	.tern-account :global(.tern-account-empty) {
+		margin: 0;
+		color: var(--tern-muted);
+		font-size: 0.875rem;
+	}
+	.tern-account :global(ul) {
+		margin: 0;
+		padding: 0;
+		list-style: none;
+		border: 1px solid var(--tern-border);
+		border-radius: var(--tern-radius);
+		background: var(--tern-surface);
+	}
+	.tern-account :global(li) {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 1rem;
+		padding: 0.75rem 1rem;
+	}
+	.tern-account :global(li + li) {
+		border-top: 1px solid var(--tern-border);
+	}
+	.tern-account :global(.tern-account-text) {
+		display: grid;
+		gap: 0.15rem;
+		min-width: 0;
+	}
+	.tern-account :global(.tern-account-name) {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		font-weight: 550;
+		overflow-wrap: anywhere;
+	}
+	.tern-account :global(.tern-account-meta) {
+		color: var(--tern-muted);
+		font-size: 0.8125rem;
+	}
+	.tern-account :global(.tern-form) {
+		display: contents;
+	}
+</style>

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

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    id: string;
+    title: string;
+    description?: string;
+    level?: 2 | 3 | 4;
+    class?: string;
+    children: Snippet;
+};
+declare const AccountSection: import("svelte").Component<Props, {}, "">;
+type AccountSection = ReturnType<typeof AccountSection>;
+export default AccountSection;

package/dist/ui/AlertDialog.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { tb } from '../runtime/i18n.svelte.js';
 	import Button from './Button.svelte';
 	import Dialog from './Dialog.svelte';
 	import type { Snippet } from 'svelte';
@@ -27,8 +28,8 @@
 		open = $bindable(false),
 		title,
 		description,
-		confirmLabel = 'Continue',
-		cancelLabel = 'Cancel',
+		confirmLabel: confirmLabelProp,
+		cancelLabel: cancelLabelProp,
 		danger = false,
 		onconfirm,
 		oncancel,
@@ -36,6 +37,8 @@
 		confirmDisabled = false,
 		class: klass = ''
 	}: Props = $props();
+	const cancelLabel = $derived(cancelLabelProp ?? tb('tern.ui.alertDialog.cancel'));
+	const confirmLabel = $derived(confirmLabelProp ?? tb('tern.ui.alertDialog.confirm'));
 
 	const uid = $props.id();
 	let busy = $state(false);

package/dist/ui/AuthCard.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+	// The card the account screens share. Internal: not exported.
+	import type { Snippet } from 'svelte';
+
+	type Props = { id: string; title: string; description?: string; level?: 1 | 2 | 3; class?: string; children: Snippet };
+	let { id, title, description, level = 1, class: klass = '', children }: Props = $props();
+</script>
+
+<section class="tern-auth {klass}" aria-labelledby={id}>
+	<header>
+		<svelte:element this={`h${level}`} {id}>{title}</svelte:element>
+		{#if description}<p>{description}</p>{/if}
+	</header>
+	{@render children()}
+</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;
+	}
+	.tern-auth :global(a) {
+		color: var(--tern-accent);
+		font-weight: 550;
+	}
+	.tern-auth :global(a:focus-visible) {
+		outline: 2px solid var(--tern-ring);
+		outline-offset: 2px;
+		border-radius: 2px;
+	}
+	.tern-auth :global(.tern-form > .tern-btn) {
+		width: 100%;
+	}
+	.tern-auth :global(.tern-auth-note) {
+		margin: 0;
+		text-align: center;
+		font-size: 0.875rem;
+		color: var(--tern-muted);
+	}
+</style>

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

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    id: string;
+    title: string;
+    description?: string;
+    level?: 1 | 2 | 3;
+    class?: string;
+    children: Snippet;
+};
+declare const AuthCard: import("svelte").Component<Props, {}, "">;
+type AuthCard = ReturnType<typeof AuthCard>;
+export default AuthCard;

package/dist/ui/BarChart.svelte

@@ -1,4 +1,5 @@
 <script lang="ts" generics="Row extends object">
+	import { tb } from '../runtime/i18n.svelte.js';
 	import ChartFrame from './ChartFrame.svelte';
 	import { lastIndex, formatNumber, niceTicks, seriesColor, textWidth, type Series } from './chart.js';
 
@@ -163,7 +164,7 @@
 				{#each series as s, k (s.key)}
 					<div class="row"><span class="swatch" style:background={seriesColor(k)}></span><strong>{format(values[active]![k]!)}</strong><span>{s.label}</span></div>
 				{/each}
-				{#if stacked && series.length > 1}<div class="row"><strong>{format(totals[active]!)}</strong><span>Total</span></div>{/if}
+				{#if stacked && series.length > 1}<div class="row"><strong>{format(totals[active]!)}</strong><span>{tb('tern.ui.barChart.total')}</span></div>{/if}
 			</div>
 		{/if}
 	</div>

package/dist/ui/Breadcrumb.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { tb } from '../runtime/i18n.svelte.js';
 	import Menu from './Menu.svelte';
 
 	type Crumb = { label: string; href?: string };
@@ -29,7 +30,7 @@
 	</li>
 {/snippet}
 
-<nav class="tern-breadcrumb {klass}" aria-label="Breadcrumb">
+<nav class="tern-breadcrumb {klass}" aria-label={tb('tern.ui.breadcrumb.label')}>
 	<ol>
 		{#each head as item, i (i)}{@render crumb(item, !collapsed && i === items.length - 1)}{/each}
 		{#if collapsed}

package/dist/ui/Calendar.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { tb } from '../runtime/i18n.svelte.js';
 	import { tick } from 'svelte';
 	import { addDays, addMonths, format, localeWeekStart, monthGrid, startOfMonth, today, type ISODate } from './dates.js';
 
@@ -108,11 +109,11 @@
 
 <div class="tern-calendar {klass}" role="group" aria-label={label}>
 	<div class="header">
-		<button type="button" class="nav" aria-label="Previous month" disabled={!canPrev} onclick={() => (focused = addMonths(focused, -1))}>
+		<button type="button" class="nav" aria-label={tb('tern.ui.calendar.previousMonth')} disabled={!canPrev} onclick={() => (focused = addMonths(focused, -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>
 		<div class="title" id="{id}-title" aria-live="polite">{format(focused, locale, { month: 'long', year: 'numeric' })}</div>
-		<button type="button" class="nav" aria-label="Next month" disabled={!canNext} onclick={() => (focused = addMonths(focused, 1))}>
+		<button type="button" class="nav" aria-label={tb('tern.ui.calendar.nextMonth')} disabled={!canNext} onclick={() => (focused = addMonths(focused, 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>

package/dist/ui/Carousel.svelte

@@ -1,4 +1,5 @@
 <script lang="ts" generics="T">
+	import { tb } from '../runtime/i18n.svelte.js';
 	import type { Snippet } from 'svelte';
 
 	type Props = {
@@ -63,10 +64,10 @@
 				{/if}
 			</button>
 		{/if}
-		<button type="button" class="control" aria-label="Previous slide" aria-controls="tern-carousel-{uid}" onclick={() => go(current - 1)}>
+		<button type="button" class="control" aria-label={tb('tern.ui.carousel.previous')} 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)}>
+		<button type="button" class="control" aria-label={tb('tern.ui.carousel.next')} 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>
@@ -76,7 +77,7 @@
 		class="track"
 		id="tern-carousel-{uid}"
 		role="group"
-		aria-label="Slides"
+		aria-label={tb('tern.ui.carousel.label')}
 		tabindex="0"
 		aria-live={playing && !paused ? 'off' : 'polite'}
 		{onscroll}

package/dist/ui/ChartFrame.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { tb } from '../runtime/i18n.svelte.js';
 	import type { Snippet } from 'svelte';
 	import Collapsible from './Collapsible.svelte';
 	import ScrollArea from './ScrollArea.svelte';
@@ -26,7 +27,7 @@
 		{#if description}<p class="description">{description}</p>{/if}
 	</figcaption>
 	{#if legend.length >= 2}
-		<ul class="legend" aria-label="Legend">
+		<ul class="legend" aria-label={tb('tern.ui.chart.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}

package/dist/ui/Combobox.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { announce } from './announce.js';
+	import { tb } from '../runtime/i18n.svelte.js';
 	import { getField } from './field.js';
 	import { float } from './floating.js';
 	import { grouped, matches, type Option } from './options.js';
@@ -31,13 +33,14 @@
 		placeholder,
 		label,
 		name: nameProp,
-		empty = 'No results',
+		empty: emptyProp,
 		onsearch,
 		debounce = 200,
 		disabled = false,
 		class: klass = '',
 		onchange
 	}: Props = $props();
+	const empty = $derived(emptyProp ?? tb('tern.ui.combobox.empty'));
 	const name = $derived(nameProp ?? field?.name);
 
 	const uid = $props.id();
@@ -202,7 +205,7 @@
 	<span class="icon" aria-hidden="true">
 		{#if searching}<Spinner size="0.875rem" label="Searching" />{:else}<svg 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>{/if}
 	</span>
-	{#if name}<input type="hidden" {name} value={value ?? ''} />{/if}
+	{#if name}<input type="hidden" {name} value={value ?? ''} use:announce={value} />{/if}
 	<div bind:this={list} id="{id}-list" class="list" role="listbox" aria-label={label} aria-labelledby={field?.labelId} popover="manual" class:open>
 		{#if open}
 			{#each grouped(shown) as g, gi (gi)}
@@ -241,7 +244,7 @@
 					{@render items()}
 				{/if}
 			{:else}
-				<div class="empty" role="status">{searching ? 'Searching…' : empty}</div>
+				<div class="empty" role="status">{searching ? tb('tern.ui.combobox.searching') : empty}</div>
 			{/each}
 		{/if}
 	</div>

package/dist/ui/Command.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { tb } from '../runtime/i18n.svelte.js';
 	import { matches } from './options.js';
 	import { trapTab } from './floating.js';
 
@@ -28,7 +29,10 @@
 		hotkey?: string;
 		class?: string;
 	};
-	let { items, label = 'Commands', placeholder = 'Type a command or search…', empty = 'No results', dialog = false, open = $bindable(false), hotkey, class: klass = '' }: Props = $props();
+	let { items, label: labelProp, placeholder: placeholderProp, empty: emptyProp, dialog = false, open = $bindable(false), hotkey, class: klass = '' }: Props = $props();
+	const empty = $derived(emptyProp ?? tb('tern.ui.command.empty'));
+	const placeholder = $derived(placeholderProp ?? tb('tern.ui.command.placeholder'));
+	const label = $derived(labelProp ?? tb('tern.ui.command.label'));
 
 	const uid = $props.id();
 	const id = `tern-command-${uid}`;

package/dist/ui/ConsentScreen.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { tb } from '../runtime/i18n.svelte.js';
 	import Avatar from './Avatar.svelte';
 	import Button from './Button.svelte';
 
@@ -17,7 +18,7 @@
 
 <!-- Asks the signed-in user to let another app use their account. The form posts back to plugins/oidc, which checks the request again. -->
 <section class="tern-consent {klass}" aria-labelledby="tern-consent-title">
-	<svelte:element this={`h${level}`} id="tern-consent-title">{consent.client} wants to access your account</svelte:element>
+	<svelte:element this={`h${level}`} id="tern-consent-title">{tb('tern.ui.consent.title', { client: consent.client })}</svelte:element>
 	{#if user}
 		<div class="user">
 			<Avatar name={user.name} size="2rem" />
@@ -25,11 +26,11 @@
 				<div class="name">{user.name}</div>
 				{#if user.email}<div class="email">{user.email}</div>{/if}
 			</div>
-			{#if switchHref}<a href={switchHref}>Not you?</a>{/if}
+			{#if switchHref}<a href={switchHref}>{tb('tern.ui.consent.notYou')}</a>{/if}
 		</div>
 	{/if}
 	<div>
-		<p id="tern-consent-scopes">It will be able to:</p>
+		<p id="tern-consent-scopes">{tb('tern.ui.consent.scopes')}</p>
 		<ul aria-labelledby="tern-consent-scopes">
 			{#each consent.scopes as scope (scope)}
 				<li>
@@ -39,11 +40,11 @@
 			{/each}
 		</ul>
 	</div>
-	<p class="note">You can take this back at any time in your account settings.</p>
+	<p class="note">{tb('tern.ui.consent.note')}</p>
 	<form method="POST" action={consent.action}>
 		{#each Object.entries(consent.params) as [k, v] (k)}<input type="hidden" name={k} value={v} />{/each}
-		<Button type="submit" name="decision" value="deny" variant="secondary">Deny</Button>
-		<Button type="submit" name="decision" value="allow">Allow</Button>
+		<Button type="submit" name="decision" value="deny" variant="secondary">{tb('tern.ui.consent.deny')}</Button>
+		<Button type="submit" name="decision" value="allow">{tb('tern.ui.consent.allow')}</Button>
 	</form>
 </section>
 

package/dist/ui/DataTable.svelte

@@ -1,4 +1,5 @@
 <script lang="ts" generics="Row">
+	import { tb } from '../runtime/i18n.svelte.js';
 	import type { Snippet } from 'svelte';
 	import Checkbox from './Checkbox.svelte';
 	import Input from './Input.svelte';
@@ -49,10 +50,11 @@
 		total,
 		toolbar,
 		actions,
-		empty = 'No rows match',
+		empty: emptyProp,
 		loading = false,
 		class: klass = ''
 	}: Props = $props();
+	const empty = $derived(emptyProp ?? tb('tern.ui.dataTable.empty'));
 
 	const uid = $props.id();
 	let sort = $state<DataQuery['sort']>(null);
@@ -115,8 +117,8 @@
 				<div class="search">
 					<Input
 						type="search"
-						placeholder="Search…"
-						aria-label="Search {caption}"
+						placeholder={tb('tern.ui.dataTable.search')}
+						aria-label={tb('tern.ui.dataTable.searchLabel', { caption })}
 						aria-controls="tern-datatable-{uid}"
 						bind:value={search}
 						oninput={() => (page = 1)}
@@ -133,7 +135,7 @@
 				<tr>
 					{#if selectable}
 						<th scope="col" class="select">
-							<Checkbox checked={allShown} indeterminate={someShown} onchange={toggleAll} aria-label="Select all rows on this page" />
+							<Checkbox checked={allShown} indeterminate={someShown} onchange={toggleAll} aria-label={tb('tern.ui.dataTable.selectAll')} />
 						</th>
 					{/if}
 					{#each columns as col (col.key)}
@@ -150,7 +152,7 @@
 							{/if}
 						</th>
 					{/each}
-					{#if actions}<th scope="col"><span class="tern-sr-only">Actions</span></th>{/if}
+					{#if actions}<th scope="col"><span class="tern-sr-only">{tb('tern.ui.dataTable.actions')}</span></th>{/if}
 				</tr>
 			</thead>
 			<tbody>

package/dist/ui/DatePicker.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { announce } from './announce.js';
+	import { tb } from '../runtime/i18n.svelte.js';
 	import Calendar, { type DateRange } from './Calendar.svelte';
 	import Popover from './Popover.svelte';
 	import { format, type ISODate } from './dates.js';
@@ -28,7 +30,7 @@
 	let {
 		mode = 'single',
 		value = $bindable(mode === 'range' ? { start: null, end: null } : null),
-		placeholder = mode === 'range' ? 'Pick dates' : 'Pick a date',
+		placeholder: placeholderProp,
 		label,
 		name: nameProp,
 		min,
@@ -41,6 +43,7 @@
 		class: klass = '',
 		onchange
 	}: Props = $props();
+	const placeholder = $derived(placeholderProp ?? (mode === 'range' ? tb('tern.ui.datePicker.placeholderRange') : tb('tern.ui.datePicker.placeholder')));
 	const name = $derived(nameProp ?? field?.name);
 
 	const uid = $props.id();
@@ -56,7 +59,7 @@
 	});
 </script>
 
-<Popover bind:open label={label ?? 'Choose a date'} align="start" {triggerId}>
+<Popover bind:open label={label ?? tb('tern.ui.datePicker.label')} align="start" {triggerId}>
 	{#snippet trigger(props)}
 		<button
 			type="button"
@@ -79,7 +82,7 @@
 		{isDisabled}
 		{locale}
 		{weekStart}
-		label={label ?? 'Choose a date'}
+		label={label ?? tb('tern.ui.datePicker.label')}
 		onselect={(v) => {
 			onchange?.(v);
 			open = false;
@@ -89,9 +92,9 @@
 </Popover>
 {#if name}
 	{#if mode === 'single'}
-		<input type="hidden" {name} value={(value as ISODate | null) ?? ''} />
+		<input type="hidden" {name} value={(value as ISODate | null) ?? ''} use:announce={value} />
 	{:else}
-		<input type="hidden" {name} value={(value as DateRange | null)?.start ?? ''} />
+		<input type="hidden" {name} value={(value as DateRange | null)?.start ?? ''} use:announce={value} />
 		<input type="hidden" name="{name}_end" value={(value as DateRange | null)?.end ?? ''} />
 	{/if}
 {/if}

package/dist/ui/Devices.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+	import { tb } from '../runtime/i18n.svelte.js';
+	import Badge from './Badge.svelte';
+	import AccountSection from './AccountSection.svelte';
+	import Button from './Button.svelte';
+	import Form from './Form.svelte';
+	import { when } from './accountDates.js';
+
+	type Session = { id: string; device: string; ip: string; createdAt: string; lastSeen: string; current: boolean };
+	type Props = {
+		title?: string;
+		description?: string;
+		level?: 2 | 3 | 4;
+		/** From acc.Sessions: the current one first. */
+		sessions: Session[];
+		/** The action that calls acc.Revoke with the posted id. */
+		action?: string;
+		/** The action that calls acc.SignOutOthers; then a button signs out every other device. */
+		othersAction?: string;
+		class?: string;
+	};
+	let { title, description, level = 2, sessions, action, othersAction, class: klass = '' }: Props = $props();
+	const others = $derived(sessions.filter((s) => !s.current).length);
+</script>
+
+<AccountSection id="tern-devices-title" title={title ?? tb('tern.ui.devices.title')} description={description ?? tb('tern.ui.devices.description')} {level} class={klass}>
+	<ul>
+		{#each sessions as s (s.id)}
+			<li>
+				<div class="tern-account-text">
+					<span class="tern-account-name">{s.device}{#if s.current}<Badge tone="success">{tb('tern.ui.devices.current')}</Badge>{/if}</span>
+					<span class="tern-account-meta">{tb('tern.ui.devices.lastSeen', { when: when(s.lastSeen) })}{s.ip ? ` · ${s.ip}` : ''}</span>
+				</div>
+				{#if action}
+					<Form {action} reset={false}>
+						<input type="hidden" name="id" value={s.id} />
+						<Button type="submit" variant={s.current ? 'secondary' : 'ghost'} size="sm">{tb('tern.ui.devices.signOut')}</Button>
+					</Form>
+				{/if}
+			</li>
+		{/each}
+	</ul>
+	{#if othersAction && others > 0}
+		<div>
+			<Form action={othersAction} reset={false}>
+				<Button type="submit" variant="danger" size="sm">{tb('tern.ui.devices.signOutOthers')}</Button>
+			</Form>
+		</div>
+	{/if}
+</AccountSection>

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

@@ -0,0 +1,23 @@
+type Session = {
+    id: string;
+    device: string;
+    ip: string;
+    createdAt: string;
+    lastSeen: string;
+    current: boolean;
+};
+type Props = {
+    title?: string;
+    description?: string;
+    level?: 2 | 3 | 4;
+    /** From acc.Sessions: the current one first. */
+    sessions: Session[];
+    /** The action that calls acc.Revoke with the posted id. */
+    action?: string;
+    /** The action that calls acc.SignOutOthers; then a button signs out every other device. */
+    othersAction?: string;
+    class?: string;
+};
+declare const Devices: import("svelte").Component<Props, {}, "">;
+type Devices = ReturnType<typeof Devices>;
+export default Devices;

package/dist/ui/Dialog.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { tb } from '../runtime/i18n.svelte.js';
 	import type { Snippet } from 'svelte';
 	import { trapTab } from './floating.js';
 
@@ -101,7 +102,7 @@
 		<header>
 			<h2 id="tern-dialog-{uid}-title">{title}</h2>
 			{#if closeButton}
-				<button type="button" class="close" aria-label="Close" onclick={() => (open = false)}>
+				<button type="button" class="close" aria-label={tb('tern.ui.dialog.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>
 			{/if}

package/dist/ui/DonutChart.svelte

@@ -1,4 +1,5 @@
 <script lang="ts" generics="Row extends object">
+	import { tb } from '../runtime/i18n.svelte.js';
 	import ChartFrame from './ChartFrame.svelte';
 	import { formatNumber, seriesColor } from './chart.js';
 
@@ -19,7 +20,8 @@
 		format?: (v: number) => string;
 		class?: string;
 	};
-	let { data, label, value, title, description, level, max = 6, totalLabel = 'total', size = 180, format = (v) => formatNumber(v), class: klass = '' }: Props = $props();
+	let { data, label, value, title, description, level, max = 6, totalLabel: totalLabelProp, size = 180, format = (v) => formatNumber(v), class: klass = '' }: Props = $props();
+	const totalLabel = $derived(totalLabelProp ?? tb('tern.ui.donutChart.total'));
 
 	let active = $state<number | null>(null);
 

package/dist/ui/Field.svelte

@@ -54,7 +54,7 @@
 	});
 </script>
 
-<div class="tern-field {klass}" class:disabled>
+<div class="tern-field {klass}" class:disabled data-tern-field={name}>
 	<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_noninteractive_element_interactions -->
 	<label for={custom ? undefined : id} id="{id}-label" onclick={custom ? () => document.getElementById(id)?.focus() : undefined}>
 		{label}

package/dist/ui/ForgotPassword.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import { tb } from '../runtime/i18n.svelte.js';
+	import type { FormField } from '../runtime/validate.js';
+	import Alert from './Alert.svelte';
+	import AuthCard from './AuthCard.svelte';
+	import Button from './Button.svelte';
+	import Field from './Field.svelte';
+	import Form from './Form.svelte';
+	import Input from './Input.svelte';
+
+	type Props = {
+		title?: string;
+		description?: string;
+		level?: 1 | 2 | 3;
+		/** The action that calls acc.RequestPasswordReset with the posted email. */
+		action?: string;
+		rules?: FormField[];
+		/** The page's form prop. An action returning { sent: true } shows that the email is on its way. */
+		form?: unknown;
+		signInHref?: string;
+		class?: string;
+	};
+	let { title, description, level = 1, action, rules, form, signInHref, class: klass = '' }: Props = $props();
+
+	let submitting = $state(false);
+	let sent = $state(false);
+	// Without JavaScript, the action returns { sent: true } and it shows through the form prop.
+	const done = $derived(sent || (!!form && typeof form === 'object' && (form as { sent?: unknown }).sent === true));
+</script>
+
+<AuthCard id="tern-forgot-title" title={title ?? tb('tern.ui.forgotPassword.title')} description={done ? undefined : (description ?? tb('tern.ui.forgotPassword.description'))} {level} class={klass}>
+	{#if done}
+		<Alert tone="success" live>{tb('tern.ui.forgotPassword.sent')}</Alert>
+	{:else}
+		<Form {rules} {form} {action} bind:submitting reset={false} onsuccess={() => (sent = true)}>
+			<Field label={tb('tern.ui.forgotPassword.email')} name="email">
+				<Input type="email" autocomplete="username" spellcheck="false" />
+			</Field>
+			<Button type="submit" loading={submitting}>{tb('tern.ui.forgotPassword.submit')}</Button>
+		</Form>
+	{/if}
+	{#if signInHref}<p class="tern-auth-note"><a href={signInHref}>{tb('tern.ui.forgotPassword.back')}</a></p>{/if}
+</AuthCard>