@nqmcreative/ui 0.4.0 → 0.4.1

package/dist/styles/paper/index.js

@@ -6,9 +6,7 @@
  * the whole style.
  */
 /* --- shared behaviour --- */
-export { TONES, focusRing, peerFocusRing, toneBorder, toneBorderLeft, toneBorderSoft, toneFill, toneFocusBorder, toneFocusWithinBorder, toneHoverBorder, toneHoverText, tonePeerChecked, tonePeerFocus, toneRing, toneSoft, toneSoftHover, toneSolid, toneSolidHover, toneSurface, toneText, anchored, clickOutside, focusTrap, focusable, navigateList, portal, toast, locale, setLocale, provideLocale, useLocale, enUS, idID, LocaleStore, applyTheme, storedTheme, toISO, fromISO, today, isSameDay, addDays, addMonths, monthGrid, weekdayNames, monthLabel, isOutOfRange, formatISO, parseFormatted } from '../../core/index.js';
-/* --- locale --- */
-export { default as LocaleProvider } from './LocaleProvider.svelte';
+export { TONES, focusRing, peerFocusRing, toneBorder, toneBorderLeft, toneBorderSoft, toneFill, toneFocusBorder, toneFocusWithinBorder, toneHoverBorder, toneHoverText, tonePeerChecked, tonePeerFocus, toneRing, toneSoft, toneSoftHover, toneSolid, toneSolidHover, toneSurface, toneText, anchored, clickOutside, focusTrap, focusable, navigateList, portal, toast, applyTheme, storedTheme, toISO, fromISO, today, isSameDay, addDays, addMonths, monthGrid, weekdayNames, monthLabel, isOutOfRange, formatISO, parseFormatted } from '../../core/index.js';
 /* --- actions --- */
 export { default as Button } from './Button.svelte';
 export { default as Link } from './Link.svelte';

package/dist/styles/sprout/Alert.svelte

@@ -8,7 +8,6 @@
 		toneText,
 		type Tone
 	} from '../../core/tones.js';
-	import { useLocale } from '../../core/locale.svelte.js';
 	import { edge } from './lift.js';
 
 	export type AlertVariant = 'soft' | 'outline' | 'accent';
@@ -37,7 +36,6 @@
 		...rest
 	}: Props = $props();
 
-	const t = useLocale();
 	let open = $state(true);
 
 	const variants = $derived({
@@ -83,7 +81,7 @@
 			<button
 				type="button"
 				onclick={dismiss}
-				aria-label={t.current.dismiss}
+				aria-label="Dismiss"
 				class="-m-1 shrink-0 rounded p-1 text-text-muted transition-colors duration-150 hover:bg-bg/60 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">

package/dist/styles/sprout/Breadcrumb.svelte

@@ -2,7 +2,6 @@
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { toneHoverText, type Tone } from '../../core/tones.js';
-	import { useLocale } from '../../core/locale.svelte.js';
 	import { iconMd } from './icon.js';
 
 	export interface BreadcrumbItem {
@@ -19,11 +18,9 @@
 	}
 
 	let { items, separator = '/', tone = 'brand', class: className = '', ...rest }: Props = $props();
-
-	const t = useLocale();
 </script>
 
-<nav aria-label={t.current.breadcrumb} class="font-sans text-sm {className}" {...rest}>
+<nav aria-label="Breadcrumb" class="font-sans text-sm {className}" {...rest}>
 	<ol class="flex flex-wrap items-center gap-1.5">
 		{#each items as item, i (item.label)}
 			<li class="flex items-center gap-1.5">

package/dist/styles/sprout/Calendar.svelte

@@ -11,7 +11,6 @@
 		weekdayNames
 	} from '../../core/date.js';
 	import { calendarKeyMove } from '../../core/calendar.js';
-	import { useLocale } from '../../core/locale.svelte.js';
 	import {
 		focusRing,
 		toneFill,
@@ -53,8 +52,6 @@
 		class: className = ''
 	}: Props = $props();
 
-	const t = useLocale();
-
 	const selected = $derived(fromISO(value));
 	const now = today();
 
@@ -71,7 +68,7 @@
 	});
 
 	const days = $derived(monthGrid(view, weekStart));
-	const weekdays = $derived(weekdayNames(t.current.dateLocale, weekStart));
+	const weekdays = $derived(weekdayNames(undefined, weekStart));
 
 	function blocked(date: Date) {
 		return isOutOfRange(date, min, max) || (isDisabled?.(date) ?? false);
@@ -119,7 +116,7 @@
 		<button
 			type="button"
 			onclick={() => show(addMonths(view, -1))}
-			aria-label={t.current.previousMonth}
+			aria-label="Previous month"
 			class="{arrow} {focusRing} {toneRing[tone]}"
 		>
 			<svg class="size-4" viewBox="0 0 16 16" fill="none" aria-hidden="true">
@@ -128,13 +125,13 @@
 		</button>
 
 		<span aria-live="polite" class="text-sm font-semibold text-text">
-			{monthLabel(view, t.current.dateLocale)}
+			{monthLabel(view)}
 		</span>
 
 		<button
 			type="button"
 			onclick={() => show(addMonths(view, 1))}
-			aria-label={t.current.nextMonth}
+			aria-label="Next month"
 			class="{arrow} {focusRing} {toneRing[tone]}"
 		>
 			<svg class="size-4" viewBox="0 0 16 16" fill="none" aria-hidden="true">
@@ -154,7 +151,7 @@
 		bind:this={grid}
 		role="grid"
 		tabindex="-1"
-		aria-label={t.current.selectDate}
+		aria-label="Select a date"
 		onkeydown={onKeydown}
 		class="grid grid-cols-7 gap-0.5 focus:outline-none"
 	>
@@ -196,7 +193,7 @@
 				tone
 			]} hover:underline hover:underline-offset-2 {focusRing} {toneRing[tone]}"
 		>
-			{t.current.today}
+			Today
 		</button>
 	{/if}
 </div>

package/dist/styles/sprout/ColorInput.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import type { HTMLInputAttributes } from 'svelte/elements';
 	import { normaliseHex } from '../../core/color.js';
-	import { useLocale } from '../../core/locale.svelte.js';
 	import type { Tone } from '../../core/tones.js';
 	import Input, { type InputSize } from './Input.svelte';
 
@@ -27,8 +26,6 @@
 		...rest
 	}: Props = $props();
 
-	const t = useLocale();
-
 	// The text can be mid-typing (`#a2`) while the swatch needs a real colour,
 	// so the swatch follows the last value that parsed rather than the field.
 	let text = $state('');
@@ -84,7 +81,7 @@
 					type="color"
 					value={resolved}
 					{disabled}
-					aria-label={t.current.pickColour}
+					aria-label="Pick a colour"
 					oninput={(event) => choose(event.currentTarget.value)}
 					class="absolute inset-0 cursor-pointer opacity-0 disabled:cursor-not-allowed"
 				/>

package/dist/styles/sprout/Combobox.svelte

@@ -4,7 +4,6 @@
 	import { clickOutside, portal } from '../../core/actions/dismissable.js';
 	import { ListCursor, groupItems, matchQuery, revealIndex } from '../../core/list.svelte.js';
 	import { toneFocusWithinBorder, toneSoft, toneText, type Tone } from '../../core/tones.js';
-	import { useLocale } from '../../core/locale.svelte.js';
 	import { iconMd } from './icon.js';
 	import { edge, soft } from './lift.js';
 
@@ -52,8 +51,6 @@
 		class: className = ''
 	}: Props = $props();
 
-	const t = useLocale();
-
 	let open = $state(false);
 	let query = $state('');
 	let wrapper: HTMLElement | null = $state(null);
@@ -162,7 +159,7 @@
 		aria-controls="{id ?? 'combobox'}-listbox"
 		aria-activedescendant={open && flat[active] ? `${id ?? 'combobox'}-opt-${active}` : undefined}
 		aria-invalid={invalid ? 'true' : undefined}
-		placeholder={selected ? selected.label : (placeholder ?? t.current.comboboxPlaceholder)}
+		placeholder={selected ? selected.label : (placeholder ?? 'Search…')}
 		value={open ? query : (selected?.label ?? '')}
 		oninput={(event) => {
 			query = event.currentTarget.value;
@@ -180,7 +177,7 @@
 		<button
 			type="button"
 			onclick={clear}
-			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">
@@ -218,7 +215,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/CommandPalette.svelte

@@ -23,7 +23,6 @@
 	import { focusTrap } from '../../core/actions/dismissable.js';
 	import { syncDialog } from '../../core/dialog.svelte.js';
 	import { ListCursor, groupItems, matchQuery, revealIndex } from '../../core/list.svelte.js';
-	import { useLocale } from '../../core/locale.svelte.js';
 	import { toneSoft, type Tone } from '../../core/tones.js';
 	import { isTypingTarget } from '../../core/trigger.js';
 	import { iconMd } from './icon.js';
@@ -62,8 +61,6 @@
 		class: className = ''
 	}: Props = $props();
 
-	const t = useLocale();
-
 	let dialog: HTMLDialogElement | null = $state(null);
 	let inputEl: HTMLInputElement | null = $state(null);
 	let listEl: HTMLElement | null = $state(null);
@@ -183,8 +180,8 @@
 				oninput={() => cursor.reset()}
 				type="text"
 				autocomplete="off"
-				aria-label={placeholder ?? t.current.commandPlaceholder}
-				placeholder={placeholder ?? t.current.commandPlaceholder}
+				aria-label={placeholder ?? 'Type a command or search…'}
+				placeholder={placeholder ?? 'Type a command or search…'}
 				class="h-12 w-full min-w-0 bg-transparent font-sans text-sm text-text placeholder:text-text-muted focus:outline-none"
 			/>
 			<Kbd>esc</Kbd>
@@ -198,7 +195,7 @@
 		>
 			{#if flat.length === 0}
 				<p class="px-4 py-10 text-center font-sans text-sm text-text-muted">
-					{emptyText ?? t.current.noResults}
+					{emptyText ?? 'No results'}
 				</p>
 			{:else}
 				{#each groups as [group, groupItems] (group)}

package/dist/styles/sprout/ConfirmDialog.svelte

@@ -2,7 +2,6 @@
 	import type { Snippet } from 'svelte';
 	import Button from './Button.svelte';
 	import Modal from './Modal.svelte';
-	import { useLocale } from '../../core/locale.svelte.js';
 	import { toneSoft, type Tone } from '../../core/tones.js';
 
 	interface Props {
@@ -37,8 +36,6 @@
 		children
 	}: Props = $props();
 
-	const t = useLocale();
-
 	async function confirm() {
 		try {
 			loading = true;
@@ -88,10 +85,10 @@
 
 	{#snippet footer()}
 		<Button variant="outline" tone="neutral" onclick={cancel} disabled={loading}>
-			{cancelLabel ?? t.current.cancel}
+			{cancelLabel ?? 'Cancel'}
 		</Button>
 		<Button {tone} onclick={confirm} {loading}>
-			{confirmLabel ?? t.current.confirm}
+			{confirmLabel ?? 'Confirm'}
 		</Button>
 	{/snippet}
 </Modal>

package/dist/styles/sprout/ContextMenu.svelte

@@ -3,7 +3,6 @@
 	import { anchored } from '../../core/actions/anchor.js';
 	import { clickOutside, focusTrap, navigateList, portal } from '../../core/actions/dismissable.js';
 	import { menuItems } from '../../core/trigger.js';
-	import { useLocale } from '../../core/locale.svelte.js';
 	import { soft } from './lift.js';
 
 	interface Props {
@@ -28,8 +27,6 @@
 		menuClass = ''
 	}: Props = $props();
 
-	const t = useLocale();
-
 	let menuEl: HTMLElement | null = $state(null);
 	/**
 	 * A 0×0 element parked at the pointer, so the same `anchored` action that
@@ -80,7 +77,7 @@
 			if ((event.target as HTMLElement).closest('[role="menuitem"]:not([disabled])')) open = false;
 		}}
 		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} {menuClass}"
 	>

package/dist/styles/sprout/CurrencyInput.svelte

@@ -20,7 +20,7 @@
 		precision?: number;
 		/** Leading mark — `Rp`, `$`, `€`. */
 		currency?: string;
-		/** Trailing mark instead, for the locales that write it that way. */
+		/** Trailing mark instead, for the regions that write it that way. */
 		unit?: string;
 		size?: InputSize;
 		tone?: Tone;

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

@@ -14,7 +14,7 @@ interface Props extends Omit<HTMLInputAttributes, 'size' | 'prefix' | 'suffix' |
     precision?: number;
     /** Leading mark — `Rp`, `$`, `€`. */
     currency?: string;
-    /** Trailing mark instead, for the locales that write it that way. */
+    /** Trailing mark instead, for the regions that write it that way. */
     unit?: string;
     size?: InputSize;
     tone?: Tone;

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

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { formatSize as toReadableSize, sortFiles, type RejectedFile } from '../../core/files.js';
-	import { useLocale } from '../../core/locale.svelte.js';
 	import { toneFocusWithinBorder, type Tone } from '../../core/tones.js';
 	import { edge } from './lift.js';
 	import type { InputSize } from './Input.svelte';
@@ -19,9 +18,9 @@
 		size?: InputSize;
 		tone?: Tone;
 		invalid?: boolean;
-		/** Text on the button. Defaults to the locale's `chooseFile`. */
+		/** Text on the button. Defaults to `Choose file`. */
 		label?: string;
-		/** Shown while nothing is chosen. Defaults to the locale's `noFile`. */
+		/** Shown while nothing is chosen. Defaults to `No file chosen`. */
 		placeholder?: string;
 		/** Show the list of held files below the row. */
 		showList?: boolean;
@@ -51,18 +50,16 @@
 		class: className = ''
 	}: Props = $props();
 
-	const t = useLocale();
-
 	let input: HTMLInputElement | null = $state(null);
 	let rejected = $state<RejectedFile[]>([]);
 
-	const formatSize = (bytes: number) => toReadableSize(bytes, t.current.byteUnits);
+	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 ?? t.current.noFile;
+		if (files.length === 0) return placeholder ?? 'No file chosen';
 		if (files.length === 1) return `${files[0].name} · ${formatSize(files[0].size)}`;
-		return `${files.length} ${t.current.selected}`;
+		return `${files.length} $selected`;
 	});
 
 	function add(incoming: FileList | File[] | null) {
@@ -91,9 +88,9 @@
 	}
 
 	const reasons: Record<RejectedFile['reason'], string> = $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'
 	});
 
 	const sizes: Record<InputSize, string> = {
@@ -125,7 +122,7 @@
 			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 ?? t.current.chooseFile}
+			{label ?? 'Choose file'}
 		</button>
 
 		<span
@@ -138,7 +135,7 @@
 			<button
 				type="button"
 				onclick={clear}
-				aria-label={t.current.remove}
+				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">
@@ -186,7 +183,7 @@
 					<button
 						type="button"
 						onclick={() => (files = files.filter((_, at) => at !== 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/FileInput.svelte.d.ts

@@ -15,9 +15,9 @@ interface Props {
     size?: InputSize;
     tone?: Tone;
     invalid?: boolean;
-    /** Text on the button. Defaults to the locale's `chooseFile`. */
+    /** Text on the button. Defaults to `Choose file`. */
     label?: string;
-    /** Shown while nothing is chosen. Defaults to the locale's `noFile`. */
+    /** Shown while nothing is chosen. Defaults to `No file chosen`. */
     placeholder?: string;
     /** Show the list of held files below the row. */
     showList?: boolean;

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;