@ternkit/tern 1.5.0 → 1.6.0

package/dist/ui/Pagination.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { tb } from '../runtime/i18n.svelte.js';
 	type Props = {
 		/** The current page, from 1; bind it. */
 		page?: number;
@@ -12,7 +13,8 @@
 		class?: string;
 		onchange?: (page: number) => void;
 	};
-	let { page = $bindable(1), pages, href, siblings = 1, label = 'Pagination', class: klass = '', onchange }: Props = $props();
+	let { page = $bindable(1), pages, href, siblings = 1, label: labelProp, class: klass = '', onchange }: Props = $props();
+	const label = $derived(labelProp ?? tb('tern.ui.pagination.label'));
 
 	// 1 … 4 5 6 … 20: the ends, the current page and its siblings.
 	const shown = $derived.by(() => {
@@ -45,7 +47,7 @@
 
 <nav class="tern-pagination {klass}" aria-label={label}>
 	<ul>
-		<li>{@render link(page - 1, '‹ Previous', 'Previous page', page <= 1, 'step')}</li>
+		<li>{@render link(page - 1, tb('tern.ui.pagination.previous'), tb('tern.ui.pagination.previousLabel'), page <= 1, 'step')}</li>
 		{#each shown as p, i (i)}
 			<li>
 				{#if p === 'gap'}
@@ -55,7 +57,7 @@
 				{/if}
 			</li>
 		{/each}
-		<li>{@render link(page + 1, 'Next ›', 'Next page', page >= pages, 'step')}</li>
+		<li>{@render link(page + 1, tb('tern.ui.pagination.next'), tb('tern.ui.pagination.nextLabel'), page >= pages, 'step')}</li>
 	</ul>
 </nav>
 

package/dist/ui/Passkeys.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+	import { tb } from '../runtime/i18n.svelte.js';
+	import { invalidateAll } from '../runtime/router.svelte.js';
+	import { passkeysSupported, registerPasskey } from '../runtime/passkeys.js';
+	import Alert from './Alert.svelte';
+	import AccountSection from './AccountSection.svelte';
+	import Button from './Button.svelte';
+	import Form from './Form.svelte';
+	import { when } from './accountDates.js';
+
+	type Passkey = { id: string; name: string; createdAt: string; lastUsed: string | null };
+	type Props = {
+		title?: string;
+		description?: string;
+		level?: 2 | 3 | 4;
+		/** From acc.Passkeys. */
+		passkeys: Passkey[];
+		/** The action that calls acc.RemovePasskey with the posted id. */
+		removeAction?: string;
+		/** Where the accounts package mounts its passkey endpoints. */
+		path?: string;
+		class?: string;
+	};
+	let { title, description, level = 2, passkeys, removeAction, path, class: klass = '' }: Props = $props();
+
+	let supported = $state(true);
+	$effect(() => {
+		supported = passkeysSupported();
+	});
+	let adding = $state(false);
+	let failed = $state(false);
+	async function add() {
+		adding = true;
+		failed = false;
+		try {
+			await registerPasskey({ path });
+			await invalidateAll();
+		} catch (e) {
+			if (!(e as { cancelled?: boolean }).cancelled) failed = true;
+		} finally {
+			adding = false;
+		}
+	}
+</script>
+
+<AccountSection id="tern-passkeys-title" title={title ?? tb('tern.ui.passkeys.title')} description={description ?? tb('tern.ui.passkeys.description')} {level} class={klass}>
+	{#if failed}<Alert tone="danger" live>{tb('tern.ui.passkeys.failed')}</Alert>{/if}
+	{#if passkeys.length}
+		<ul>
+			{#each passkeys as p (p.id)}
+				<li>
+					<div class="tern-account-text">
+						<span class="tern-account-name">{p.name}</span>
+						<span class="tern-account-meta">{tb('tern.ui.passkeys.added', { when: when(p.createdAt) })}{' · '}{p.lastUsed ? tb('tern.ui.passkeys.lastUsed', { when: when(p.lastUsed) }) : tb('tern.ui.passkeys.never')}</span>
+					</div>
+					{#if removeAction}
+						<Form action={removeAction} reset={false}>
+							<input type="hidden" name="id" value={p.id} />
+							<Button type="submit" variant="ghost" size="sm">{tb('tern.ui.passkeys.remove')}</Button>
+						</Form>
+					{/if}
+				</li>
+			{/each}
+		</ul>
+	{:else}
+		<p class="tern-account-empty">{tb('tern.ui.passkeys.empty')}</p>
+	{/if}
+	{#if supported}
+		<div><Button type="button" variant="secondary" size="sm" loading={adding} onclick={add}>{tb('tern.ui.passkeys.add')}</Button></div>
+	{:else}
+		<p class="tern-account-empty">{tb('tern.ui.passkeys.unsupported')}</p>
+	{/if}
+</AccountSection>

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

@@ -0,0 +1,21 @@
+type Passkey = {
+    id: string;
+    name: string;
+    createdAt: string;
+    lastUsed: string | null;
+};
+type Props = {
+    title?: string;
+    description?: string;
+    level?: 2 | 3 | 4;
+    /** From acc.Passkeys. */
+    passkeys: Passkey[];
+    /** The action that calls acc.RemovePasskey with the posted id. */
+    removeAction?: string;
+    /** Where the accounts package mounts its passkey endpoints. */
+    path?: string;
+    class?: string;
+};
+declare const Passkeys: import("svelte").Component<Props, {}, "">;
+type Passkeys = ReturnType<typeof Passkeys>;
+export default Passkeys;

package/dist/ui/PasswordInput.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { tb } from '../runtime/i18n.svelte.js';
 	import type { HTMLInputAttributes } from 'svelte/elements';
 	import { getField } from './field.js';
 
@@ -37,7 +38,7 @@
 	<button
 		type="button"
 		class="toggle"
-		aria-label="Show password"
+		aria-label={tb('tern.ui.password.show')}
 		aria-pressed={visible}
 		aria-controls={id}
 		disabled={field?.disabled || rest.disabled}

package/dist/ui/ResetPassword.svelte

@@ -0,0 +1,54 @@
+<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 PasswordInput from './PasswordInput.svelte';
+
+	type Props = {
+		title?: string;
+		description?: string;
+		level?: 1 | 2 | 3;
+		/** The token from the email's link (?token=), posted as token. */
+		token: string;
+		/** The action that calls acc.ResetPassword with the posted token and password. */
+		action?: string;
+		/** Its rules; they also set the password hint. */
+		rules?: FormField[];
+		form?: unknown;
+		/** Ask to type the password twice, posted as confirm. */
+		confirm?: boolean;
+		/** The link has been found invalid or expired: say so instead of showing the form. */
+		invalid?: boolean;
+		/** Where to ask for a new link. */
+		forgotHref?: string;
+		class?: string;
+	};
+	let { title, description, level = 1, token, action, rules, form, confirm = true, invalid = false, forgotHref, 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>
+
+<AuthCard id="tern-reset-title" title={title ?? tb('tern.ui.resetPassword.title')} {description} {level} class={klass}>
+	{#if invalid || !token}
+		<Alert tone="danger">{tb('tern.ui.resetPassword.invalid')}</Alert>
+		{#if forgotHref}<Button variant="secondary" href={forgotHref}>{tb('tern.ui.resetPassword.again')}</Button>{/if}
+	{:else}
+		<Form {rules} {form} {action} bind:submitting reset={false}>
+			<input type="hidden" name="token" value={token} />
+			<Field label={tb('tern.ui.resetPassword.password')} name="password" description={minPassword ? tb('tern.ui.signUp.minPassword', { n: minPassword }) : undefined}>
+				<PasswordInput autocomplete="new-password" />
+			</Field>
+			{#if confirm}
+				<Field label={tb('tern.ui.resetPassword.confirm')} name="confirm">
+					<PasswordInput autocomplete="new-password" />
+				</Field>
+			{/if}
+			<Button type="submit" loading={submitting}>{tb('tern.ui.resetPassword.submit')}</Button>
+		</Form>
+	{/if}
+</AuthCard>

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

@@ -0,0 +1,23 @@
+import type { FormField } from '../runtime/validate.js';
+type Props = {
+    title?: string;
+    description?: string;
+    level?: 1 | 2 | 3;
+    /** The token from the email's link (?token=), posted as token. */
+    token: string;
+    /** The action that calls acc.ResetPassword with the posted token and password. */
+    action?: string;
+    /** Its rules; they also set the password hint. */
+    rules?: FormField[];
+    form?: unknown;
+    /** Ask to type the password twice, posted as confirm. */
+    confirm?: boolean;
+    /** The link has been found invalid or expired: say so instead of showing the form. */
+    invalid?: boolean;
+    /** Where to ask for a new link. */
+    forgotHref?: string;
+    class?: string;
+};
+declare const ResetPassword: import("svelte").Component<Props, {}, "">;
+type ResetPassword = ReturnType<typeof ResetPassword>;
+export default ResetPassword;

package/dist/ui/Resizable.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { tb } from '../runtime/i18n.svelte.js';
 	import type { Snippet } from 'svelte';
 
 	type Props = {
@@ -13,7 +14,8 @@
 		second: Snippet;
 		class?: string;
 	};
-	let { size = $bindable(50), min = 15, max = 85, direction = 'horizontal', label = 'Resize', first, second, class: klass = '' }: Props = $props();
+	let { size = $bindable(50), min = 15, max = 85, direction = 'horizontal', label: labelProp, first, second, class: klass = '' }: Props = $props();
+	const label = $derived(labelProp ?? tb('tern.ui.resizable.label'));
 
 	const uid = $props.id();
 	let root = $state<HTMLDivElement>();

package/dist/ui/SelectMenu.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, type Option } from './options.js';
@@ -18,7 +20,8 @@
 		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();
+	let { options, value = $bindable(field?.value ?? null), placeholder: placeholderProp, label, name: nameProp, disabled = false, class: klass = '', onchange }: Props = $props();
+	const placeholder = $derived(placeholderProp ?? tb('tern.ui.selectMenu.placeholder'));
 	const name = $derived(nameProp ?? field?.name);
 
 	const uid = $props.id();
@@ -158,7 +161,7 @@
 	<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}
+{#if name}<input type="hidden" {name} value={value ?? ''} use:announce={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)}

package/dist/ui/Sidebar.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { tb } from '../runtime/i18n.svelte.js';
 	import type { Snippet } from 'svelte';
 	import { page } from '../runtime/state.svelte.js';
 	import Dialog from './Dialog.svelte';
@@ -29,7 +30,8 @@
 		children: Snippet;
 		class?: string;
 	};
-	let { groups, header, footer, collapsed = $bindable(false), label = 'Main', children, class: klass = '' }: Props = $props();
+	let { groups, header, footer, collapsed = $bindable(false), label: labelProp, children, class: klass = '' }: Props = $props();
+	const label = $derived(labelProp ?? tb('tern.ui.sidebar.label'));
 
 	let mobileOpen = $state(false);
 	const path = $derived(page.url?.pathname ?? '');
@@ -85,7 +87,7 @@
 		{#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)}>
+		<button type="button" class="collapse" aria-label={tb('tern.ui.sidebar.open')} 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}
@@ -93,7 +95,7 @@
 	<div class="main">{@render children()}</div>
 </div>
 
-<Dialog bind:open={mobileOpen} title="Navigation" side="left" class="tern-sidebar-sheet">
+<Dialog bind:open={mobileOpen} title={tb('tern.ui.sidebar.title')} side="left" class="tern-sidebar-sheet">
 	{@render nav(false)}
 	{#if footer}<div class="footer">{@render footer()}</div>{/if}
 </Dialog>

package/dist/ui/SignIn.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { tb } from '../runtime/i18n.svelte.js';
 	import type { Snippet } from 'svelte';
 	import type { FormField } from '../runtime/validate.js';
 	import Alert from './Alert.svelte';
@@ -9,6 +10,8 @@
 	import Input from './Input.svelte';
 	import PasswordInput from './PasswordInput.svelte';
 	import Separator from './Separator.svelte';
+	import { goto } from '../runtime/router.svelte.js';
+	import { passkeysSupported, signInWithPasskey } from '../runtime/passkeys.js';
 
 	type Props = {
 		title?: string;
@@ -19,6 +22,10 @@
 		providers?: { name: string; label: string }[];
 		/** Where plugins/oauth lives. */
 		authPath?: string;
+		/** A "Sign in with a passkey" button, for the accounts package. */
+		passkey?: boolean;
+		/** Where the accounts package mounts its passkey endpoints. */
+		passkeyPath?: string;
 		/** Where to go after signing in, a path on this site. */
 		next?: string;
 		/** Show the email and password form, which posts to action. */
@@ -41,12 +48,14 @@
 		class?: string;
 	};
 	let {
-		title = 'Sign in',
+		title: titleProp,
 		description,
 		level = 1,
 		providers = [],
 		authPath = '/auth',
 		next,
+		passkey = false,
+		passkeyPath,
 		password = true,
 		action,
 		rules,
@@ -58,45 +67,72 @@
 		footer,
 		class: klass = ''
 	}: Props = $props();
+	const title = $derived(titleProp ?? tb('tern.ui.signIn.title'));
 
 	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.'
+		!error ? null : error === 'access_denied' ? tb('tern.ui.signIn.cancelled') : tb('tern.ui.signIn.failed')
 	);
+	let el = $state<HTMLElement>();
+	let passkeyBusy = $state(false);
+	let passkeyError = $state(false);
+	// Rendered on the server too, where passkeys can't be checked: shown
+	// once the browser says it can use them.
+	let canPasskey = $state(false);
+	$effect(() => {
+		canPasskey = passkey && passkeysSupported();
+	});
+	async function usePasskey() {
+		passkeyBusy = true;
+		passkeyError = false;
+		try {
+			const rememberMe = !!el?.querySelector<HTMLInputElement>('input[name="remember"]')?.checked;
+			await signInWithPasskey({ path: passkeyPath, remember: rememberMe });
+			await goto(next && next.startsWith('/') && !next.startsWith('//') ? next : '/', { invalidateAll: true, replaceState: true });
+		} catch (e) {
+			if (!(e as { cancelled?: boolean }).cancelled) passkeyError = true;
+		} finally {
+			passkeyBusy = false;
+		}
+	}
 	const login = (name: string) => `${authPath}/${encodeURIComponent(name)}/login${next ? `?next=${encodeURIComponent(next)}` : ''}`;
 </script>
 
-<section class="tern-auth {klass}" aria-labelledby="tern-signin-title">
+<section class="tern-auth {klass}" aria-labelledby="tern-signin-title" bind:this={el}>
 	<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}
+	{#if passkeyError}<Alert tone="danger" live>{tb('tern.ui.signIn.passkeyFailed')}</Alert>{/if}
+	{#if providers.length || canPasskey}
 		<div class="providers">
+			{#if canPasskey}
+				<Button variant="secondary" type="button" loading={passkeyBusy} onclick={usePasskey}>{tb('tern.ui.signIn.passkey')}</Button>
+			{/if}
 			{#each providers as p (p.name)}
-				<Button variant="secondary" href={login(p.name)}>Continue with {p.label}</Button>
+				<Button variant="secondary" href={login(p.name)}>{tb('tern.ui.signIn.continueWith', { provider: p.label })}</Button>
 			{/each}
 		</div>
 	{/if}
-	{#if providers.length && password}<div class="or"><Separator /><span>or</span><Separator /></div>{/if}
+	{#if (providers.length || canPasskey) && password}<div class="or"><Separator /><span>{tb('tern.ui.signIn.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">
+			<Field label={tb('tern.ui.signIn.email')} name="email">
 				<Input type="email" autocomplete="username" spellcheck="false" />
 			</Field>
-			<Field label="Password" name="password">
+			<Field label={tb('tern.ui.signIn.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}
+				{#if remember}<Checkbox name="remember">{tb('tern.ui.signIn.remember')}</Checkbox>{/if}
+				{#if forgotHref}<a href={forgotHref}>{tb('tern.ui.signIn.forgot')}</a>{/if}
 			</div>
-			<Button type="submit" loading={submitting}>Sign in</Button>
+			<Button type="submit" loading={submitting}>{tb('tern.ui.signIn.submit')}</Button>
 		</Form>
 	{/if}
-	{#if signUpHref}<p class="switch">New here? <a href={signUpHref}>Create an account</a></p>{/if}
+	{#if signUpHref}<p class="switch">{tb('tern.ui.signIn.new')} <a href={signUpHref}>{tb('tern.ui.signIn.signUp')}</a></p>{/if}
 	{#if footer}<div class="footer">{@render footer()}</div>{/if}
 </section>
 

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

@@ -12,6 +12,10 @@ type Props = {
     }[];
     /** Where plugins/oauth lives. */
     authPath?: string;
+    /** A "Sign in with a passkey" button, for the accounts package. */
+    passkey?: boolean;
+    /** Where the accounts package mounts its passkey endpoints. */
+    passkeyPath?: string;
     /** Where to go after signing in, a path on this site. */
     next?: string;
     /** Show the email and password form, which posts to action. */

package/dist/ui/SignUp.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { tb } from '../runtime/i18n.svelte.js';
 	import type { Snippet } from 'svelte';
 	import type { FormField } from '../runtime/validate.js';
 	import Button from './Button.svelte';
@@ -26,7 +27,8 @@
 		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 { title: titleProp, description, level = 1, action, rules, form, name = true, confirm = false, termsHref, signInHref, footer, class: klass = '' }: Props = $props();
+	const title = $derived(titleProp ?? tb('tern.ui.signUp.title'));
 
 	let submitting = $state(false);
 	const minPassword = $derived(rules?.find((f) => f.name === 'password')?.rules?.find((r) => r.name === 'min')?.arg);
@@ -39,21 +41,21 @@
 	</header>
 	<Form {rules} {form} {action} bind:submitting reset={false}>
 		{#if name}
-			<Field label="Name" name="name"><Input autocomplete="name" /></Field>
+			<Field label={tb('tern.ui.signUp.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}>
+		<Field label={tb('tern.ui.signUp.email')} name="email"><Input type="email" autocomplete="email" spellcheck="false" /></Field>
+		<Field label={tb('tern.ui.signUp.password')} name="password" description={minPassword ? tb('tern.ui.signUp.minPassword', { n: minPassword }) : undefined}>
 			<PasswordInput autocomplete="new-password" />
 		</Field>
 		{#if confirm}
-			<Field label="Confirm password" name="confirm"><PasswordInput autocomplete="new-password" /></Field>
+			<Field label={tb('tern.ui.signUp.confirm')} name="confirm"><PasswordInput autocomplete="new-password" /></Field>
 		{/if}
 		{#if termsHref}
-			<Checkbox name="terms">I agree to the <a href={termsHref}>terms</a></Checkbox>
+			<Checkbox name="terms">{tb('tern.ui.signUp.agree')} <a href={termsHref}>{tb('tern.ui.signUp.terms')}</a></Checkbox>
 		{/if}
-		<Button type="submit" loading={submitting}>Create account</Button>
+		<Button type="submit" loading={submitting}>{tb('tern.ui.signUp.submit')}</Button>
 	</Form>
-	{#if signInHref}<p class="switch">Already have an account? <a href={signInHref}>Sign in</a></p>{/if}
+	{#if signInHref}<p class="switch">{tb('tern.ui.signUp.haveAccount')} <a href={signInHref}>{tb('tern.ui.signUp.signIn')}</a></p>{/if}
 	{#if footer}<div class="footer">{@render footer()}</div>{/if}
 </section>
 

package/dist/ui/Slider.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { announce } from './announce.js';
 	import { getField } from './field.js';
 
 	type Props = {
@@ -88,7 +89,7 @@
 	}
 </script>
 
-<div class="tern-slider {klass}" class:disabled={off}>
+<div class="tern-slider {klass}" class:disabled={off} use:announce={value}>
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div
 		bind:this={track}

package/dist/ui/Spinner.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
+	import { tb } from '../runtime/i18n.svelte.js';
 	type Props = { label?: string; size?: string; class?: string };
-	let { label = 'Loading', size = '1.25rem', class: klass = '' }: Props = $props();
+	let { label: labelProp, size = '1.25rem', class: klass = '' }: Props = $props();
+	const label = $derived(labelProp ?? tb('tern.ui.spinner.label'));
 </script>
 
 <span class="tern-spinner {klass}" role="status" style:--size={size}>

package/dist/ui/Switch.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { announce } from './announce.js';
 	import type { Snippet } from 'svelte';
 	import type { HTMLButtonAttributes } from 'svelte/elements';
 
@@ -32,7 +33,7 @@
 		<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
 		<span class="label" id="tern-switch-{uid}" onclick={() => !disabled && (checked = !checked)}>{@render children()}</span>
 	{/if}
-	{#if name}<input type="hidden" {name} value={checked ? 'on' : 'off'} />{/if}
+	{#if name}<input type="hidden" {name} value={checked ? 'on' : 'off'} use:announce={checked} />{/if}
 </span>
 
 <style>

package/dist/ui/Table.svelte

@@ -1,4 +1,5 @@
 <script lang="ts" generics="Row">
+	import { tb } from '../runtime/i18n.svelte.js';
 	import type { Snippet } from 'svelte';
 	import type { Column } from './table.js';
 
@@ -15,7 +16,8 @@
 		empty?: string;
 		class?: string;
 	};
-	let { columns, rows, caption, hideCaption = false, key = (r) => JSON.stringify(r), empty = 'Nothing to show', class: klass = '' }: Props = $props();
+	let { columns, rows, caption, hideCaption = false, key = (r) => JSON.stringify(r), empty: emptyProp, class: klass = '' }: Props = $props();
+	const empty = $derived(emptyProp ?? tb('tern.ui.table.empty'));
 </script>
 
 <!-- A semantic table, with a caption, column headers and numeric alignment. -->

package/dist/ui/Toaster.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { tb } from '../runtime/i18n.svelte.js';
 	import { dismiss, toasts, type Toast } from './toast.svelte.js';
 
 	type Props = { position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left' };
@@ -36,14 +37,14 @@
 				<p class="message">{t.message}</p>
 				{#if t.description}<p class="description">{t.description}</p>{/if}
 			</div>
-			<button type="button" aria-label="Dismiss" onclick={() => dismiss(t.id)}>
+			<button type="button" aria-label={tb('tern.ui.toaster.dismiss')} onclick={() => dismiss(t.id)}>
 				<svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true"><path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" /></svg>
 			</button>
 		</li>
 	{/each}
 {/snippet}
 
-<section class="tern-toaster {position}" aria-label="Notifications">
+<section class="tern-toaster {position}" aria-label={tb('tern.ui.toaster.label')}>
 	<!-- Errors are announced at once; the rest when the reader is idle. -->
 	<ol aria-live="assertive" aria-relevant="additions">{@render list(urgent)}</ol>
 	<ol aria-live="polite" aria-relevant="additions">{@render list(polite)}</ol>

package/dist/ui/Toggle.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { announce } from './announce.js';
 	import type { Snippet } from 'svelte';
 	import type { HTMLButtonAttributes } from 'svelte/elements';
 
@@ -18,6 +19,7 @@
 </script>
 
 <button
+	use:announce={pressed}
 	type="button"
 	class="tern-toggle {variant} {size} {klass}"
 	aria-pressed={pressed}

package/dist/ui/ToggleGroup.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { announce } from './announce.js';
 	import type { Snippet } from 'svelte';
 	import { getField } from './field.js';
 
@@ -58,6 +59,7 @@
 </script>
 
 <div
+	use:announce={value}
 	class="tern-toggle-group {size} {klass}"
 	role={type === 'single' ? 'radiogroup' : 'group'}
 	aria-label={field ? undefined : label}

package/dist/ui/accountDates.d.ts

@@ -0,0 +1 @@
+export declare function when(iso: string | null | undefined): string;

package/dist/ui/accountDates.js

@@ -0,0 +1,15 @@
+// Dates on the account screens, in the user's locale.
+import { i18n } from '../runtime/i18n.svelte.js';
+export function when(iso) {
+    if (!iso)
+        return '';
+    const d = new Date(iso);
+    if (Number.isNaN(d.getTime()))
+        return '';
+    try {
+        return new Intl.DateTimeFormat(i18n.locale || undefined, { dateStyle: 'medium', timeStyle: 'short' }).format(d);
+    }
+    catch {
+        return d.toISOString().slice(0, 16).replace('T', ' ');
+    }
+}

package/dist/ui/announce.d.ts

@@ -0,0 +1,4 @@
+/** A Svelte action: use:announce={value} fires input when value changes. */
+export declare function announce(node: HTMLElement, _value: unknown): {
+    update(): void;
+};

package/dist/ui/announce.js

@@ -0,0 +1,14 @@
+// Controls that post through hidden inputs (Combobox, SelectMenu,
+// DatePicker, Slider, …) don't fire input events as the user changes
+// them. announce does: on the element it's on, after each change of its
+// parameter, so a Form checks the field as the user changes it.
+/** A Svelte action: use:announce={value} fires input when value changes. */
+export function announce(node, _value) {
+    return {
+        update() {
+            // After Svelte has written the new value to the DOM, which it does
+            // after calling update, so the form reads what the user chose.
+            queueMicrotask(() => node.dispatchEvent(new Event('input', { bubbles: true })));
+        }
+    };
+}