@nqmcreative/ui 0.3.0 → 0.4.1

package/dist/styles/sprout/DatePicker.svelte

@@ -2,8 +2,7 @@
 	import { anchored } from '../../core/actions/anchor.js';
 	import { clickOutside, portal } from '../../core/actions/dismissable.js';
 	import { dateHint } from '../../core/calendar.js';
-	import { formatISO, parseFormatted } from '../../core/date.js';
-	import { useLocale } from '../../core/locale.svelte.js';
+	import { formatISO, parseFormatted, type DateFormat } from '../../core/date.js';
 	import { toneFocusWithinBorder, type Tone } from '../../core/tones.js';
 	import Calendar from './Calendar.svelte';
 	import { edge, soft } from './lift.js';
@@ -16,6 +15,8 @@
 		max?: string;
 		isDisabled?: (date: Date) => boolean;
 		weekStart?: 0 | 1;
+		/** Order of the date parts the field accepts and prints. */
+		format?: DateFormat;
 		tone?: Tone;
 		invalid?: boolean;
 		disabled?: boolean;
@@ -34,6 +35,7 @@
 		max,
 		isDisabled,
 		weekStart = 1,
+		format = 'dmy',
 		tone = 'brand',
 		invalid = false,
 		disabled = false,
@@ -45,8 +47,6 @@
 		class: className = ''
 	}: Props = $props();
 
-	const t = useLocale();
-
 	let open = $state(false);
 	let text = $state('');
 	let editing = $state(false);
@@ -54,8 +54,8 @@
 	let inputEl: HTMLInputElement | null = $state(null);
 
 	/** While typing the field shows the raw text; otherwise the formatted value. */
-	const display = $derived(editing ? text : formatISO(value, t.current.dateFormat));
-	const hint = $derived(placeholder ?? dateHint(t.current.dateFormat));
+	const display = $derived(editing ? text : formatISO(value, format));
+	const hint = $derived(placeholder ?? dateHint(format));
 
 	function commit() {
 		editing = false;
@@ -66,7 +66,7 @@
 			}
 			return;
 		}
-		const parsed = parseFormatted(text, t.current.dateFormat);
+		const parsed = parseFormatted(text, format);
 		if (parsed && parsed !== value) {
 			value = parsed;
 			onchange?.(parsed);
@@ -133,7 +133,7 @@
 				onchange?.('');
 				inputEl?.focus();
 			}}
-			aria-label={t.current.clear}
+			aria-label="Clear selection"
 			class="shrink-0 rounded p-1 text-text-muted transition-colors duration-150 hover:bg-bg-inset hover:text-text focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current"
 		>
 			<svg class="size-3.5" viewBox="0 0 14 14" fill="none" aria-hidden="true">
@@ -151,7 +151,7 @@
 		type="button"
 		{disabled}
 		onclick={() => (open = !open)}
-		aria-label={t.current.selectDate}
+		aria-label="Select a date"
 		aria-expanded={open}
 		class="shrink-0 rounded p-1.5 text-text-muted transition-colors duration-150 hover:bg-bg-inset hover:text-text focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current"
 	>

package/dist/styles/sprout/DatePicker.svelte.d.ts

@@ -1,3 +1,4 @@
+import { type DateFormat } from '../../core/date.js';
 import { type Tone } from '../../core/tones.js';
 interface Props {
     /** Bindable `YYYY-MM-DD` — the same shape as `<input type="date">`. */
@@ -7,6 +8,8 @@ interface Props {
     max?: string;
     isDisabled?: (date: Date) => boolean;
     weekStart?: 0 | 1;
+    /** Order of the date parts the field accepts and prints. */
+    format?: DateFormat;
     tone?: Tone;
     invalid?: boolean;
     disabled?: boolean;

package/dist/styles/sprout/Drawer.svelte

@@ -2,7 +2,6 @@
 	import type { Snippet } from 'svelte';
 	import { iconLg } from './icon.js';
 	import type { HTMLDialogAttributes } from 'svelte/elements';
-	import { useLocale } from '../../core/locale.svelte.js';
 	import { isBackdropClick, syncDialog } from '../../core/dialog.svelte.js';
 	import { float } from './lift.js';
 
@@ -40,7 +39,6 @@
 		...rest
 	}: Props = $props();
 
-	const t = useLocale();
 	let dialog: HTMLDialogElement | null = $state(null);
 
 	const horizontal = $derived(side === 'left' || side === 'right');
@@ -110,7 +108,7 @@
 					<button
 						type="button"
 						onclick={close}
-						aria-label={t.current.close}
+						aria-label="Close"
 						class="-m-1 shrink-0 rounded-xl p-1 text-text-muted transition-colors duration-150 hover:bg-bg-inset hover:text-text focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand"
 					>
 						<svg class="size-4" viewBox="0 0 14 14" fill="none" aria-hidden="true">

package/dist/styles/sprout/Dropdown.svelte

@@ -3,7 +3,6 @@
 	import { anchored, type Placement } from '../../core/actions/anchor.js';
 	import { clickOutside, focusTrap, navigateList, portal } from '../../core/actions/dismissable.js';
 	import { describeTrigger, menuItems, popupTrigger } from '../../core/trigger.js';
-	import { useLocale } from '../../core/locale.svelte.js';
 	import { soft } from './lift.js';
 
 	interface Props {
@@ -18,7 +17,7 @@
 		matchWidth?: boolean;
 		/** Close as soon as an item inside is activated. Default true. */
 		closeOnSelect?: boolean;
-		/** Accessible name for the menu. Defaults to the locale's `menu`. */
+		/** Accessible name for the menu. Defaults to `Menu`. */
 		label?: string;
 		class?: string;
 		/** Classes for the wrapper around the trigger. */
@@ -38,8 +37,6 @@
 		triggerClass = ''
 	}: Props = $props();
 
-	const t = useLocale();
-
 	let anchorEl: HTMLElement | null = $state(null);
 	let menuEl: HTMLElement | null = $state(null);
 
@@ -86,7 +83,7 @@
 		onkeydown={onMenuKeydown}
 		onclick={onMenuClick}
 		role="menu"
-		aria-label={label ?? t.current.menu}
+		aria-label={label ?? 'Menu'}
 		tabindex="-1"
 		class="z-50 flex max-h-[min(24rem,80vh)] min-w-48 flex-col overflow-y-auto rounded-2xl border border-hairline bg-bg py-1 font-sans {soft} {className}"
 	>

package/dist/styles/sprout/Dropdown.svelte.d.ts

@@ -12,7 +12,7 @@ interface Props {
     matchWidth?: boolean;
     /** Close as soon as an item inside is activated. Default true. */
     closeOnSelect?: boolean;
-    /** Accessible name for the menu. Defaults to the locale's `menu`. */
+    /** Accessible name for the menu. Defaults to `Menu`. */
     label?: string;
     class?: string;
     /** Classes for the wrapper around the trigger. */

package/dist/styles/sprout/Dropzone.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import { toneBorder, toneSoft, toneSurface, toneText, type Tone } from '../../core/tones.js';
-	import { useLocale } from '../../core/locale.svelte.js';
 	import { formatSize as toReadableSize, sortFiles, type RejectedFile } from '../../core/files.js';
 	import { edge } from './lift.js';
 
@@ -17,7 +16,7 @@
 		maxFiles?: number;
 		disabled?: boolean;
 		tone?: Tone;
-		/** Headline inside the zone. Defaults to the locale's `dropFiles`. */
+		/** Headline inside the zone. Defaults to `Drop files here`. */
 		label?: string;
 		hint?: string;
 		/** Hide the built-in file list to render your own. */
@@ -46,15 +45,13 @@
 		class: className = ''
 	}: Props = $props();
 
-	const t = useLocale();
-
 	let input: HTMLInputElement | null = $state(null);
 	let dragging = $state(false);
 	let rejected = $state<RejectedFile[]>([]);
 	/** Nested elements fire dragleave too, so count depth instead of toggling. */
 	let depth = 0;
 
-	const formatSize = (bytes: number) => toReadableSize(bytes, t.current.byteUnits);
+	const formatSize = (bytes: number) => toReadableSize(bytes);
 
 	const defaultHint = $derived.by(() => {
 		if (hint) return hint;
@@ -97,9 +94,9 @@
 	}
 
 	const reasons = $derived({
-		type: t.current.rejectedType,
-		size: t.current.rejectedSize,
-		count: t.current.rejectedCount
+		type: 'wrong file type',
+		size: 'too large',
+		count: 'over the file limit'
 	});
 </script>
 
@@ -147,10 +144,10 @@
 			{/if}
 		</span>
 		<span class="flex flex-col gap-1">
-			<span class="text-sm font-semibold text-text">{label ?? t.current.dropFiles}</span>
+			<span class="text-sm font-semibold text-text">{label ?? 'Drop files here'}</span>
 			<span class="text-[13px] text-text-secondary">
-				{t.current.or}
-				<span class="underline underline-offset-2">{t.current.browse}</span>
+				or
+				<span class="underline underline-offset-2">browse</span>
 			</span>
 			{#if defaultHint}
 				<span class="text-xs text-text-muted">{defaultHint}</span>
@@ -192,7 +189,7 @@
 					<button
 						type="button"
 						onclick={() => remove(i)}
-						aria-label="{t.current.remove} {file.name}"
+						aria-label="Remove {file.name}"
 						class="-m-1 shrink-0 rounded p-1 text-text-muted transition-colors duration-150 hover:bg-bg-inset hover:text-danger focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-danger"
 					>
 						<svg class="size-3.5" viewBox="0 0 14 14" fill="none" aria-hidden="true">

package/dist/styles/sprout/Dropzone.svelte.d.ts

@@ -13,7 +13,7 @@ interface Props {
     maxFiles?: number;
     disabled?: boolean;
     tone?: Tone;
-    /** Headline inside the zone. Defaults to the locale's `dropFiles`. */
+    /** Headline inside the zone. Defaults to `Drop files here`. */
     label?: string;
     hint?: string;
     /** Hide the built-in file list to render your own. */

package/dist/styles/sprout/FileInput.svelte

@@ -0,0 +1,202 @@
+<script lang="ts">
+	import { formatSize as toReadableSize, sortFiles, type RejectedFile } from '../../core/files.js';
+	import { toneFocusWithinBorder, type Tone } from '../../core/tones.js';
+	import { edge } from './lift.js';
+	import type { InputSize } from './Input.svelte';
+
+	interface Props {
+		/** Bindable list of accepted files. */
+		files?: File[];
+		/** Same syntax as the input's `accept` — `'image/*,.pdf'`. */
+		accept?: string;
+		multiple?: boolean;
+		/** Per-file ceiling in bytes. `0` means no limit. */
+		maxSize?: number;
+		/** Cap on how many files may be held at once. `0` means no limit. */
+		maxFiles?: number;
+		disabled?: boolean;
+		size?: InputSize;
+		tone?: Tone;
+		invalid?: boolean;
+		/** Text on the button. Defaults to `Choose file`. */
+		label?: string;
+		/** Shown while nothing is chosen. Defaults to `No file chosen`. */
+		placeholder?: string;
+		/** Show the list of held files below the row. */
+		showList?: boolean;
+		/** The `name` the hidden input posts under, for a plain form submit. */
+		name?: string;
+		onaccept?: (files: File[]) => void;
+		onreject?: (rejected: RejectedFile[]) => void;
+		class?: string;
+	}
+
+	let {
+		files = $bindable([]),
+		accept,
+		multiple = false,
+		maxSize = 0,
+		maxFiles = 0,
+		disabled = false,
+		size = 'md',
+		tone = 'brand',
+		invalid = false,
+		label,
+		placeholder,
+		showList = true,
+		name,
+		onaccept,
+		onreject,
+		class: className = ''
+	}: Props = $props();
+
+	let input: HTMLInputElement | null = $state(null);
+	let rejected = $state<RejectedFile[]>([]);
+
+	const formatSize = (bytes: number) => toReadableSize(bytes);
+
+	/** One file reads as its name and weight; several read as a count. */
+	const summary = $derived.by(() => {
+		if (files.length === 0) return placeholder ?? 'No file chosen';
+		if (files.length === 1) return `${files[0].name} · ${formatSize(files[0].size)}`;
+		return `${files.length} $selected`;
+	});
+
+	function add(incoming: FileList | File[] | null) {
+		if (!incoming || disabled) return;
+
+		const { accepted, rejected: bad } = sortFiles(incoming, {
+			accept,
+			maxSize,
+			maxFiles,
+			multiple,
+			held: files.length
+		});
+
+		rejected = bad;
+		if (bad.length) onreject?.(bad);
+		if (accepted.length === 0) return;
+
+		files = multiple ? [...files, ...accepted] : accepted.slice(0, 1);
+		onaccept?.(accepted);
+	}
+
+	function clear() {
+		files = [];
+		rejected = [];
+		if (input) input.value = '';
+	}
+
+	const reasons: Record<RejectedFile['reason'], string> = $derived({
+		type: 'wrong file type',
+		size: 'too large',
+		count: 'over the file limit'
+	});
+
+	const sizes: Record<InputSize, string> = {
+		sm: 'h-8 text-[13px]',
+		md: 'h-10 text-sm',
+		lg: 'h-11 text-[15px]'
+	};
+
+	const buttons: Record<InputSize, string> = {
+		sm: 'h-6 px-2 text-[11px]',
+		md: 'h-7 px-2.5 text-xs',
+		lg: 'h-8 px-3 text-xs'
+	};
+</script>
+
+<div class="flex w-full flex-col gap-3 {className}">
+	<span
+		class="inline-flex w-full items-center gap-2 rounded-xl border bg-bg px-1 {edge} transition-colors duration-150 ease-brand-out
+			{sizes[size]}
+			{invalid
+			? 'border-danger focus-within:border-danger'
+			: `border-hairline-strong ${toneFocusWithinBorder[tone]}`}
+			{disabled ? 'pointer-events-none opacity-50' : ''}"
+	>
+		<button
+			type="button"
+			{disabled}
+			onclick={() => input?.click()}
+			class="shrink-0 rounded-lg border border-hairline-strong bg-bg-alt font-sans font-medium text-text-secondary transition-colors duration-150 hover:bg-bg-inset hover:text-text focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current
+				{buttons[size]}"
+		>
+			{label ?? 'Choose file'}
+		</button>
+
+		<span
+			class="min-w-0 flex-1 truncate font-sans {files.length ? 'text-text' : 'text-text-muted'}"
+		>
+			{summary}
+		</span>
+
+		{#if files.length}
+			<button
+				type="button"
+				onclick={clear}
+				aria-label="Remove"
+				class="mr-1 shrink-0 rounded p-1 text-text-muted transition-colors duration-150 hover:bg-bg-inset hover:text-danger focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-danger"
+			>
+				<svg class="size-3.5" viewBox="0 0 14 14" fill="none" aria-hidden="true">
+					<path
+						d="m2 2 10 10M12 2 2 12"
+						stroke="currentColor"
+						stroke-width="1.6"
+						stroke-linecap="round"
+					/>
+				</svg>
+			</button>
+		{/if}
+	</span>
+
+	<input
+		bind:this={input}
+		type="file"
+		{name}
+		{accept}
+		{multiple}
+		{disabled}
+		aria-invalid={invalid ? 'true' : undefined}
+		class="sr-only"
+		onchange={(event) => add(event.currentTarget.files)}
+	/>
+
+	{#if rejected.length}
+		<ul class="flex flex-col gap-1">
+			{#each rejected as item (item.file.name + item.reason)}
+				<li class="font-sans text-sm text-danger">
+					{item.file.name} — {reasons[item.reason]}
+				</li>
+			{/each}
+		</ul>
+	{/if}
+
+	{#if showList && multiple && files.length > 1}
+		<ul class="flex flex-col rounded-[20px] border border-hairline bg-bg {edge}">
+			{#each files as file, i (file.name + file.size + i)}
+				<li
+					class="flex items-center gap-3 border-b border-hairline px-4 py-2.5 font-sans last:border-b-0"
+				>
+					<span class="min-w-0 flex-1 truncate text-sm text-text">{file.name}</span>
+					<span class="shrink-0 text-xs text-text-muted tabular-nums">{formatSize(file.size)}</span>
+					<button
+						type="button"
+						onclick={() => (files = files.filter((_, at) => at !== i))}
+						aria-label="Remove {file.name}"
+						class="-m-1 shrink-0 rounded p-1 text-text-muted transition-colors duration-150 hover:bg-bg-inset hover:text-danger focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-danger"
+					>
+						<svg class="size-3.5" viewBox="0 0 14 14" fill="none" aria-hidden="true">
+							<path
+								d="m2 2 10 10M12 2 2 12"
+								stroke="currentColor"
+								stroke-width="1.6"
+								stroke-linecap="round"
+							/>
+						</svg>
+					</button>
+				</li>
+			{/each}
+		</ul>
+	{/if}
+</div>

package/dist/styles/sprout/FileInput.svelte.d.ts

@@ -0,0 +1,32 @@
+import { type RejectedFile } from '../../core/files.js';
+import { type Tone } from '../../core/tones.js';
+import type { InputSize } from './Input.svelte';
+interface Props {
+    /** Bindable list of accepted files. */
+    files?: File[];
+    /** Same syntax as the input's `accept` — `'image/*,.pdf'`. */
+    accept?: string;
+    multiple?: boolean;
+    /** Per-file ceiling in bytes. `0` means no limit. */
+    maxSize?: number;
+    /** Cap on how many files may be held at once. `0` means no limit. */
+    maxFiles?: number;
+    disabled?: boolean;
+    size?: InputSize;
+    tone?: Tone;
+    invalid?: boolean;
+    /** Text on the button. Defaults to `Choose file`. */
+    label?: string;
+    /** Shown while nothing is chosen. Defaults to `No file chosen`. */
+    placeholder?: string;
+    /** Show the list of held files below the row. */
+    showList?: boolean;
+    /** The `name` the hidden input posts under, for a plain form submit. */
+    name?: string;
+    onaccept?: (files: File[]) => void;
+    onreject?: (rejected: RejectedFile[]) => void;
+    class?: string;
+}
+declare const FileInput: import("svelte").Component<Props, {}, "files">;
+type FileInput = ReturnType<typeof FileInput>;
+export default FileInput;

package/dist/styles/sprout/Footer.svelte

@@ -22,7 +22,7 @@
 		columns?: FooterColumn[];
 		/** Logo, wordmark and a line of copy on the left. */
 		brand?: Snippet;
-		/** Right side of the bottom bar — social links, a locale picker. */
+		/** Right side of the bottom bar — social links, a language picker. */
 		bottom?: Snippet;
 		/** Left side of the bottom bar. Ignored when `bottom` covers both. */
 		copyright?: string;

package/dist/styles/sprout/Footer.svelte.d.ts

@@ -15,7 +15,7 @@ interface Props {
     columns?: FooterColumn[];
     /** Logo, wordmark and a line of copy on the left. */
     brand?: Snippet;
-    /** Right side of the bottom bar — social links, a locale picker. */
+    /** Right side of the bottom bar — social links, a language picker. */
     bottom?: Snippet;
     /** Left side of the bottom bar. Ignored when `bottom` covers both. */
     copyright?: string;

package/dist/styles/sprout/InputAddon.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { edge } from './lift.js';
+	import type { InputSize } from './Input.svelte';
+
+	interface Props extends HTMLAttributes<HTMLSpanElement> {
+		/** Match the Input it sits beside — the heights have to agree. */
+		size?: InputSize;
+		/** Paint it like a field instead of a fixed label. */
+		variant?: 'muted' | 'plain';
+		children: Snippet;
+	}
+
+	let {
+		size = 'md',
+		variant = 'muted',
+		class: className = '',
+		children,
+		...rest
+	}: Props = $props();
+
+	const sizes: Record<InputSize, string> = {
+		sm: 'h-8 px-2.5 text-[13px]',
+		md: 'h-10 px-3 text-sm',
+		lg: 'h-11 px-3 text-[15px]'
+	};
+</script>
+
+<span
+	class="inline-flex shrink-0 items-center gap-1.5 rounded-xl border border-hairline-strong font-sans whitespace-nowrap text-text-secondary {edge}
+		{sizes[size]}
+		{variant === 'muted' ? 'bg-bg-alt' : 'bg-bg'} {className}"
+	{...rest}
+>
+	{@render children()}
+</span>

package/dist/styles/sprout/InputAddon.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { InputSize } from './Input.svelte';
+interface Props extends HTMLAttributes<HTMLSpanElement> {
+    /** Match the Input it sits beside — the heights have to agree. */
+    size?: InputSize;
+    /** Paint it like a field instead of a fixed label. */
+    variant?: 'muted' | 'plain';
+    children: Snippet;
+}
+declare const InputAddon: import("svelte").Component<Props, {}, "">;
+type InputAddon = ReturnType<typeof InputAddon>;
+export default InputAddon;

package/dist/styles/sprout/Modal.svelte

@@ -2,7 +2,6 @@
 	import type { Snippet } from 'svelte';
 	import { iconLg } from './icon.js';
 	import type { HTMLDialogAttributes } from 'svelte/elements';
-	import { useLocale } from '../../core/locale.svelte.js';
 	import { isBackdropClick, syncDialog } from '../../core/dialog.svelte.js';
 	import { float } from './lift.js';
 
@@ -41,7 +40,6 @@
 		...rest
 	}: Props = $props();
 
-	const t = useLocale();
 	let dialog: HTMLDialogElement | null = $state(null);
 
 	const closable = $derived(showClose ?? dismissible);
@@ -93,7 +91,7 @@
 					<button
 						type="button"
 						onclick={close}
-						aria-label={t.current.close}
+						aria-label="Close"
 						class="-m-1 shrink-0 rounded-xl p-1 text-text-muted transition-colors duration-150 hover:bg-bg-inset hover:text-text focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand"
 					>
 						<svg class="size-4" viewBox="0 0 14 14" fill="none" aria-hidden="true">

package/dist/styles/sprout/MultiSelect.svelte

@@ -16,7 +16,6 @@
 	import { anchored } from '../../core/actions/anchor.js';
 	import { clickOutside, portal } from '../../core/actions/dismissable.js';
 	import { ListCursor, groupItems, matchQuery, revealIndex } from '../../core/list.svelte.js';
-	import { useLocale } from '../../core/locale.svelte.js';
 	import { iconMd, iconSm } from './icon.js';
 	import { toneFocusWithinBorder, toneSoft, toneText, type Tone } from '../../core/tones.js';
 	import { edge, soft } from './lift.js';
@@ -59,8 +58,6 @@
 		class: className = ''
 	}: Props = $props();
 
-	const t = useLocale();
-
 	let open = $state(false);
 	let query = $state('');
 	let wrapper: HTMLElement | null = $state(null);
@@ -150,7 +147,7 @@
 			class="inline-flex items-center rounded-xl px-2 py-0.5 text-xs font-medium {toneSoft[tone]}"
 		>
 			{chosen.length}
-			{t.current.selected}
+			selected
 		</span>
 	{:else}
 		{#each chosen as option (option.value)}
@@ -163,7 +160,7 @@
 				<button
 					type="button"
 					onclick={() => remove(option)}
-					aria-label="{t.current.removeItem} {option.label}"
+					aria-label="Remove {option.label}"
 					class="inline-flex size-4 items-center justify-center rounded transition-colors duration-150 hover:bg-bg/70 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-current"
 				>
 					<svg class="size-2.5" viewBox="0 0 14 14" fill="none" aria-hidden="true">
@@ -190,7 +187,7 @@
 		aria-expanded={open}
 		aria-controls="{id ?? 'multiselect'}-listbox"
 		aria-invalid={invalid ? 'true' : undefined}
-		placeholder={chosen.length ? '' : (placeholder ?? t.current.comboboxPlaceholder)}
+		placeholder={chosen.length ? '' : (placeholder ?? 'Search…')}
 		oninput={() => {
 			open = true;
 			cursor.index = 0;
@@ -212,7 +209,7 @@
 				onchange?.([]);
 				inputEl?.focus();
 			}}
-			aria-label={t.current.clear}
+			aria-label="Clear selection"
 			class="shrink-0 rounded p-1 text-text-muted transition-colors duration-150 hover:bg-bg-inset hover:text-text focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current"
 		>
 			<svg class="size-3.5" viewBox="0 0 14 14" fill="none" aria-hidden="true">
@@ -240,7 +237,7 @@
 	>
 		{#if flat.length === 0}
 			<p class="px-3 py-6 text-center text-sm text-text-muted">
-				{emptyText ?? t.current.noMatches}
+				{emptyText ?? 'No matches'}
 			</p>
 		{:else}
 			{#each groups as [group, items] (group)}

package/dist/styles/sprout/Navbar.svelte

@@ -16,7 +16,6 @@
 
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import { useLocale } from '../../core/locale.svelte.js';
 	import { iconMd } from './icon.js';
 	import { focusRing, toneRing, toneSoft, toneText, type Tone } from '../../core/tones.js';
 	import Drawer from './Drawer.svelte';
@@ -53,8 +52,6 @@
 		class: className = ''
 	}: Props = $props();
 
-	const t = useLocale();
-
 	// sprout gives the active link a filled pill rather than a colour change, so
 	// the current page is legible without relying on hue alone.
 	const link =
@@ -66,10 +63,7 @@
 		? 'border-b border-hairline'
 		: ''} {className}"
 >
-	<nav
-		aria-label={t.current.navigation}
-		class="mx-auto flex h-16 w-full max-w-6xl items-center gap-6 px-6"
-	>
+	<nav aria-label="Navigation" class="mx-auto flex h-16 w-full max-w-6xl items-center gap-6 px-6">
 		{#if brand}
 			<div class="flex shrink-0 items-center">{@render brand()}</div>
 		{/if}
@@ -140,7 +134,7 @@
 			<button
 				type="button"
 				onclick={() => (menuOpen = true)}
-				aria-label={t.current.openMenu}
+				aria-label="Open menu"
 				aria-expanded={menuOpen}
 				class="inline-flex size-9 items-center justify-center rounded-xl text-text-secondary transition-colors duration-150 hover:bg-bg-inset hover:text-text md:hidden {focusRing} {toneRing[
 					tone
@@ -159,7 +153,7 @@
 	</nav>
 </header>
 
-<Drawer bind:open={menuOpen} side="right" size="sm" title={t.current.navigation}>
+<Drawer bind:open={menuOpen} side="right" size="sm" title="Navigation">
 	<ul class="flex flex-col gap-0.5">
 		{#each items as item (item.label)}
 			<li>