@nqmcreative/ui 0.4.0 → 0.4.1

package/dist/styles/paper/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 type { InputSize } from './Input.svelte';
 
@@ -18,9 +17,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;
@@ -50,18 +49,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) {
@@ -90,9 +87,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> = {
@@ -124,7 +121,7 @@
 			class="shrink-0 rounded 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
@@ -137,7 +134,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">
@@ -185,7 +182,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/paper/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/paper/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/paper/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/paper/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';
 
 	export type ModalSize = 'sm' | 'md' | 'lg';
@@ -40,7 +39,6 @@
 		...rest
 	}: Props = $props();
 
-	const t = useLocale();
 	let dialog: HTMLDialogElement | null = $state(null);
 
 	const closable = $derived(showClose ?? dismissible);
@@ -92,7 +90,7 @@
 					<button
 						type="button"
 						onclick={close}
-						aria-label={t.current.close}
+						aria-label="Close"
 						class="-m-1 shrink-0 rounded-md 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/paper/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';
 
@@ -58,8 +57,6 @@
 		class: className = ''
 	}: Props = $props();
 
-	const t = useLocale();
-
 	let open = $state(false);
 	let query = $state('');
 	let wrapper: HTMLElement | null = $state(null);
@@ -149,7 +146,7 @@
 			class="inline-flex items-center rounded-md 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)}
@@ -162,7 +159,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">
@@ -189,7 +186,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;
@@ -211,7 +208,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">
@@ -239,7 +236,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/paper/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();
-
 	// paper gives the active link a 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-md 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>

package/dist/styles/paper/Pagination.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { focusRing, toneRing, toneSolid, type Tone } from '../../core/tones.js';
-	import { useLocale } from '../../core/locale.svelte.js';
 	import { pageRange } from '../../core/pagination.js';
 
 	interface Props extends Omit<HTMLAttributes<HTMLElement>, 'onchange'> {
@@ -25,8 +24,6 @@
 		...rest
 	}: Props = $props();
 
-	const t = useLocale();
-
 	const pages = $derived(pageRange(page, total, siblings));
 
 	function go(next: number) {
@@ -39,12 +36,12 @@
 	const cell = `inline-flex h-9 min-w-9 items-center justify-center rounded-md px-2 font-sans text-sm font-medium tabular-nums transition-colors duration-150 ease-brand-out disabled:opacity-40 disabled:pointer-events-none ${focusRing}`;
 </script>
 
-<nav aria-label={t.current.pagination} class="flex items-center gap-1 {className}" {...rest}>
+<nav aria-label="Pagination" class="flex items-center gap-1 {className}" {...rest}>
 	<button
 		type="button"
 		class="{cell} {toneRing[tone]} text-text-secondary hover:bg-bg-inset"
 		disabled={page <= 1}
-		aria-label={t.current.previousPage}
+		aria-label="Previous page"
 		onclick={() => go(page - 1)}
 	>
 		<svg class="size-4" viewBox="0 0 16 16" fill="none" aria-hidden="true">
@@ -73,7 +70,7 @@
 		type="button"
 		class="{cell} {toneRing[tone]} text-text-secondary hover:bg-bg-inset"
 		disabled={page >= total}
-		aria-label={t.current.nextPage}
+		aria-label="Next page"
 		onclick={() => go(page + 1)}
 	>
 		<svg class="size-4" viewBox="0 0 16 16" fill="none" aria-hidden="true">

package/dist/styles/paper/PinInput.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { useLocale } from '../../core/locale.svelte.js';
 	import { caretIndex, clearFrom, fillFrom, sanitisePin, type PinMode } from '../../core/pin.js';
 	import { toneFocusBorder, type Tone } from '../../core/tones.js';
 
@@ -38,8 +37,6 @@
 		class: className = ''
 	}: Props = $props();
 
-	const t = useLocale();
-
 	let boxes: HTMLInputElement[] = $state([]);
 
 	const chars = $derived(Array.from({ length }, (_, i) => value[i] ?? ''));
@@ -119,7 +116,7 @@
 			autocapitalize="characters"
 			spellcheck="false"
 			maxlength={length}
-			aria-label="{t.current.digit} {index + 1}"
+			aria-label="Digit {index + 1}"
 			aria-invalid={invalid ? 'true' : undefined}
 			oninput={(event) => onInput(event, index)}
 			onkeydown={(event) => onKeydown(event, index)}

package/dist/styles/paper/SearchInput.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLInputAttributes } from 'svelte/elements';
-	import { useLocale } from '../../core/locale.svelte.js';
 	import type { Tone } from '../../core/tones.js';
 	import Input, { type InputSize } from './Input.svelte';
 
@@ -37,8 +36,6 @@
 		...rest
 	}: Props = $props();
 
-	const t = useLocale();
-
 	// The timer is cleared by the effect's own teardown, so a keystroke that
 	// lands mid-wait restarts the clock rather than queueing a second call.
 	$effect(() => {
@@ -75,7 +72,7 @@
 			<button
 				type="button"
 				onclick={clear}
-				aria-label={t.current.clearSearch}
+				aria-label="Clear search"
 				class="-mr-1 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">

package/dist/styles/paper/Sidebar.svelte

@@ -35,7 +35,6 @@
 </script>
 
 <script lang="ts">
-	import { useLocale } from '../../core/locale.svelte.js';
 	import { iconMd } from './icon.js';
 	import { focusRing, toneRing, toneSoft, type Tone } from '../../core/tones.js';
 
@@ -69,8 +68,6 @@
 		class: className = ''
 	}: Props = $props();
 
-	const t = useLocale();
-
 	const keyOf = (item: SidebarItem) => item.id ?? item.href ?? item.label;
 
 	/** Groups start open when asked, or when they contain the active item. */
@@ -141,7 +138,7 @@
 		</div>
 	{/if}
 
-	<nav aria-label={t.current.navigation} class="flex-1 overflow-y-auto p-2">
+	<nav aria-label="Navigation" class="flex-1 overflow-y-auto p-2">
 		{#each sections as section, i (section.label ?? i)}
 			<div class="flex flex-col gap-0.5 {i > 0 ? 'mt-4' : ''}">
 				{#if section.label && !collapsed}
@@ -230,7 +227,7 @@
 				<button
 					type="button"
 					onclick={() => (collapsed = !collapsed)}
-					aria-label={collapsed ? t.current.expandSidebar : t.current.collapseSidebar}
+					aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
 					class="inline-flex h-8 items-center justify-center gap-2 rounded-md font-sans text-xs text-text-muted transition-colors duration-150 hover:bg-bg-inset hover:text-text {focusRing} {toneRing[
 						tone
 					]}"
@@ -248,7 +245,7 @@
 							stroke-linecap="round"
 						/>
 					</svg>
-					{#if !collapsed}<span>{t.current.collapseSidebar}</span>{/if}
+					{#if !collapsed}<span>Collapse sidebar</span>{/if}
 				</button>
 			{/if}
 		</div>

package/dist/styles/paper/Spinner.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { toneText, type Tone } from '../../core/tones.js';
-	import { useLocale } from '../../core/locale.svelte.js';
 
 	export type SpinnerSize = 'xs' | 'sm' | 'md' | 'lg';
 
@@ -9,12 +8,10 @@
 		size?: SpinnerSize;
 		/** Omit to inherit the parent's `currentColor` (e.g. inside a Button). */
 		tone?: Tone;
-		/** Defaults to the locale's loading string; pass `''` to hide it. */
+		/** Defaults to `Loading`; pass `''` to hide it. */
 		label?: string;
 	}
 
-	const t = useLocale();
-
 	let { size = 'md', tone, label, class: className = '', ...rest }: Props = $props();
 
 	const sizes: Record<SpinnerSize, string> = {
@@ -27,7 +24,7 @@
 
 <span
 	role="status"
-	aria-label={label ?? t.current.loading}
+	aria-label={label ?? 'Loading'}
 	class="inline-block shrink-0 animate-spin rounded-full border-current/25 border-t-current
 		{sizes[size]} {tone ? toneText[tone] : ''} {className}"
 	{...rest}

package/dist/styles/paper/Spinner.svelte.d.ts

@@ -5,7 +5,7 @@ interface Props extends HTMLAttributes<HTMLSpanElement> {
     size?: SpinnerSize;
     /** Omit to inherit the parent's `currentColor` (e.g. inside a Button). */
     tone?: Tone;
-    /** Defaults to the locale's loading string; pass `''` to hide it. */
+    /** Defaults to `Loading`; pass `''` to hide it. */
     label?: string;
 }
 declare const Spinner: import("svelte").Component<Props, {}, "">;

package/dist/styles/paper/Table.svelte

@@ -16,7 +16,6 @@
 	import Checkbox from './Checkbox.svelte';
 	import type { Tone } from '../../core/tones.js';
 	import { nextSort, sortRows, toggleKey, type TableSort } from '../../core/table.js';
-	import { useLocale } from '../../core/locale.svelte.js';
 
 	interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'onselect'> {
 		columns: TableColumn[];
@@ -82,8 +81,6 @@
 		...rest
 	}: Props = $props();
 
-	const t = useLocale();
-
 	const aligns = {
 		left: 'text-left',
 		center: 'text-center',
@@ -139,14 +136,14 @@
 		>
 			<span class="font-sans text-[13px] font-semibold text-text">
 				{selected.length}
-				{t.current.selected}
+				selected
 			</span>
 			<button
 				type="button"
 				onclick={clearSelection}
 				class="rounded font-sans text-[13px] font-medium text-text-muted transition-colors duration-150 hover:text-text focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current"
 			>
-				{t.current.clear}
+				Clear selection
 			</button>
 			<div class="ml-auto flex flex-wrap items-center gap-2">
 				{@render bulkActions?.({ selected, clear: clearSelection })}
@@ -176,7 +173,7 @@
 								checked={allSelected}
 								indeterminate={someSelected}
 								{tone}
-								aria-label={t.current.selectAllRows}
+								aria-label="Select all rows"
 								onchange={toggleAll}
 							/>
 						</th>
@@ -223,7 +220,7 @@
 							colspan={columns.length + (selectable ? 1 : 0)}
 							class="px-4 py-10 text-center text-sm text-text-muted"
 						>
-							{#if empty}{@render empty()}{:else}{t.current.noData}{/if}
+							{#if empty}{@render empty()}{:else}No data{/if}
 						</td>
 					</tr>
 				{:else}
@@ -240,7 +237,7 @@
 									<Checkbox
 										checked={isSelected}
 										{tone}
-										aria-label={t.current.selectRow}
+										aria-label="Select row"
 										onchange={() => toggleRow(row)}
 									/>
 								</td>

package/dist/styles/paper/TagsInput.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { useLocale } from '../../core/locale.svelte.js';
 	import { addTag, splitTags, type TagRejection } from '../../core/tags.js';
 	import { toneFocusWithinBorder, toneSoft, type Tone } from '../../core/tones.js';
 
@@ -46,8 +45,6 @@
 		class: className = ''
 	}: Props = $props();
 
-	const t = useLocale();
-
 	let draft = $state('');
 	let field: HTMLInputElement | null = $state(null);
 	/** The last refusal, cleared as soon as the next keystroke lands. */
@@ -111,8 +108,8 @@
 	const messages: Record<TagRejection, string> = $derived({
 		empty: '',
 		short: `${minLength}+`,
-		duplicate: t.current.duplicateTag,
-		full: `${t.current.selected} ${tags.length}/${max}`
+		duplicate: 'Already added',
+		full: `$selected ${tags.length}/${max}`
 	});
 </script>
 
@@ -136,7 +133,7 @@
 				<button
 					type="button"
 					onclick={() => remove(index)}
-					aria-label="{t.current.removeItem} {tag}"
+					aria-label="Remove {tag}"
 					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 10 10" fill="none" aria-hidden="true">
@@ -156,8 +153,8 @@
 			bind:value={draft}
 			{disabled}
 			readonly={full}
-			placeholder={tags.length === 0 ? (placeholder ?? t.current.addTag) : ''}
-			aria-label={placeholder ?? t.current.addTag}
+			placeholder={tags.length === 0 ? (placeholder ?? 'Add a tag') : ''}
+			aria-label={placeholder ?? 'Add a tag'}
 			aria-invalid={invalid ? 'true' : undefined}
 			onkeydown={onKeydown}
 			onpaste={onPaste}

package/dist/styles/paper/ThemeToggle.svelte

@@ -10,7 +10,6 @@
 		storedTheme,
 		type Theme
 	} from '../../core/theme.svelte.js';
-	import { useLocale } from '../../core/locale.svelte.js';
 
 	interface Props {
 		/** Bindable. `'system'` follows the OS until the visitor chooses. */
@@ -33,8 +32,6 @@
 		class: className = ''
 	}: Props = $props();
 
-	const t = useLocale();
-
 	$effect(() => {
 		applyTheme(theme);
 		if (persist) persistTheme(theme);
@@ -50,8 +47,8 @@
 	}
 
 	const options = $derived([
-		{ value: 'light' as Theme, label: t.current.lightMode },
-		{ value: 'dark' as Theme, label: t.current.darkMode },
+		{ value: 'light' as Theme, label: 'Light' },
+		{ value: 'dark' as Theme, label: 'Dark' },
 		{ value: 'system' as Theme, label: 'Auto' }
 	]);
 </script>
@@ -95,7 +92,7 @@
 {#if variant === 'segmented'}
 	<div
 		role="radiogroup"
-		aria-label={t.current.toggleTheme}
+		aria-label="Toggle theme"
 		class="inline-flex items-center gap-1 rounded-lg border border-hairline bg-bg-inset p-1 {className}"
 	>
 		{#each options as option (option.value)}
@@ -119,8 +116,8 @@
 	<button
 		type="button"
 		onclick={cycle}
-		aria-label="{t.current.toggleTheme} ({theme})"
-		title={t.current.toggleTheme}
+		aria-label="Toggle theme ({theme})"
+		title="Toggle theme"
 		class="inline-flex size-9 items-center justify-center rounded-md border border-hairline bg-bg text-text-secondary shadow-xs transition-colors duration-150 ease-brand-out hover:bg-bg-alt hover:text-text {focusRing} {toneRing[
 			tone
 		]} {className}"

package/dist/styles/paper/TimeInput.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import type { HTMLInputAttributes } from 'svelte/elements';
-	import { useLocale } from '../../core/locale.svelte.js';
 	import { clampTime, formatTime, parseTime, stepTime } from '../../core/time.js';
 	import type { Tone } from '../../core/tones.js';
 	import Input, { type InputSize } from './Input.svelte';
@@ -38,8 +37,6 @@
 		...rest
 	}: Props = $props();
 
-	const t = useLocale();
-
 	// Typed text and the bound value are separate until the field settles:
 	// `9` is a valid thing to be halfway through typing and an invalid time.
 	let text = $state('');
@@ -120,7 +117,7 @@
 					class={stepper}
 					{disabled}
 					onclick={() => nudge(1)}
-					aria-label={t.current.increase}
+					aria-label="Increase"
 				>
 					<svg class="size-3" viewBox="0 0 12 12" fill="none" aria-hidden="true">
 						<path
@@ -137,7 +134,7 @@
 					class={stepper}
 					{disabled}
 					onclick={() => nudge(-1)}
-					aria-label={t.current.decrease}
+					aria-label="Decrease"
 				>
 					<svg class="size-3" viewBox="0 0 12 12" fill="none" aria-hidden="true">
 						<path

package/dist/styles/paper/Toaster.svelte

@@ -6,7 +6,6 @@
 	import { toneText } from '../../core/tones.js';
 	import { iconMd } from './icon.js';
 	import Spinner from './Spinner.svelte';
-	import { useLocale } from '../../core/locale.svelte.js';
 
 	export type ToasterPosition =
 		'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
@@ -18,8 +17,6 @@
 
 	let { position = 'bottom-right', class: className = '' }: Props = $props();
 
-	const t = useLocale();
-
 	const positions: Record<ToasterPosition, string> = {
 		'top-left': 'top-4 left-4 items-start',
 		'top-center': 'top-4 left-1/2 -translate-x-1/2 items-center',
@@ -41,8 +38,8 @@
 <div
 	use:portal
 	aria-live="polite"
-	aria-label={t.current.notifications}
-	class="pointer-events-none fixed z-[100] flex w-[min(24rem,calc(100vw-2rem))] flex-col gap-2.5 {positions[
+	aria-label="Notifications"
+	class="pointer-events-none fixed z-100 flex w-[min(24rem,calc(100vw-2rem))] flex-col gap-2.5 {positions[
 		position
 	]} {fromTop ? '' : 'flex-col-reverse'} {className}"
 >
@@ -118,7 +115,7 @@
 			<button
 				type="button"
 				onclick={() => toast.dismiss(item.id)}
-				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-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">

package/dist/styles/paper/index.d.ts

@@ -5,9 +5,8 @@
  * `@nqmcreative/ui/core`, re-exported below so this one import covers
  * the whole style.
  */
-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';
-export type { Tone, Placement, AnchorOptions, ClickOutsideOptions, FocusTrapOptions, Toast, ToastOptions, ToastAction, Locale, Theme, DateFormat, TableSort, SortDirection, RejectedFile } from '../../core/index.js';
-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';
+export type { Tone, Placement, AnchorOptions, ClickOutsideOptions, FocusTrapOptions, Toast, ToastOptions, ToastAction, Theme, DateFormat, TableSort, SortDirection, RejectedFile } from '../../core/index.js';
 export { default as Button } from './Button.svelte';
 export type { ButtonVariant, ButtonSize } from './Button.svelte';
 export { default as Link } from './Link.svelte';