@nqmcreative/ui 0.3.0 → 0.4.1

package/dist/core/pin.d.ts

@@ -0,0 +1,23 @@
+/**
+ * One-time codes: what a character box accepts, and where a paste lands.
+ *
+ * The value is a plain compact string — `'0421'` means the first four boxes
+ * are filled and the rest are empty. Holes are impossible by construction,
+ * which is what lets the component always know which box to focus next.
+ */
+export type PinMode = 'numeric' | 'alphanumeric';
+/** Strips whatever the mode refuses, then trims to `length` characters. */
+export declare function sanitisePin(text: string, mode?: PinMode, length?: number): string;
+/**
+ * Writes `text` into the boxes from `index` on.
+ *
+ * One keystroke replaces one box and leaves the tail alone; a six-character
+ * paste into the first box fills all six. Anything past `length` is dropped
+ * rather than wrapped, because the extra characters were never part of a code
+ * this long.
+ */
+export declare function fillFrom(value: string, index: number, text: string, length: number, mode?: PinMode): string;
+/** Clears one box and everything after it — what Backspace on a filled box does. */
+export declare function clearFrom(value: string, index: number): string;
+/** The box the caret belongs in: the first empty one, or the last. */
+export declare function caretIndex(value: string, length: number): number;

package/dist/core/pin.js

@@ -0,0 +1,38 @@
+/**
+ * One-time codes: what a character box accepts, and where a paste lands.
+ *
+ * The value is a plain compact string — `'0421'` means the first four boxes
+ * are filled and the rest are empty. Holes are impossible by construction,
+ * which is what lets the component always know which box to focus next.
+ */
+const ALLOWED = {
+    numeric: /[^0-9]/g,
+    alphanumeric: /[^0-9a-zA-Z]/g
+};
+/** Strips whatever the mode refuses, then trims to `length` characters. */
+export function sanitisePin(text, mode = 'numeric', length = Infinity) {
+    return text.replace(ALLOWED[mode], '').slice(0, length);
+}
+/**
+ * Writes `text` into the boxes from `index` on.
+ *
+ * One keystroke replaces one box and leaves the tail alone; a six-character
+ * paste into the first box fills all six. Anything past `length` is dropped
+ * rather than wrapped, because the extra characters were never part of a code
+ * this long.
+ */
+export function fillFrom(value, index, text, length, mode = 'numeric') {
+    const head = value.slice(0, index);
+    const clean = sanitisePin(text, mode, length - head.length);
+    if (!clean)
+        return value;
+    return (head + clean + value.slice(index + clean.length)).slice(0, length);
+}
+/** Clears one box and everything after it — what Backspace on a filled box does. */
+export function clearFrom(value, index) {
+    return value.slice(0, index);
+}
+/** The box the caret belongs in: the first empty one, or the last. */
+export function caretIndex(value, length) {
+    return Math.min(value.length, length - 1);
+}

package/dist/core/tags.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Free-text tokens: what counts as a new tag, and why one was turned away.
+ *
+ * The rejection is returned rather than thrown or swallowed, so the component
+ * can say *why* nothing happened — a silent no-op on a duplicate reads like a
+ * broken field.
+ */
+export type TagRejection = 'empty' | 'short' | 'duplicate' | 'full';
+export interface TagRules {
+    /** Trim the ends and collapse inner runs of whitespace. Default `true`. */
+    trim?: boolean;
+    /** Ignore case when refusing duplicates. Default `true`. */
+    caseInsensitive?: boolean;
+    /** Cap on how many tags may be held. `0` means no limit. */
+    max?: number;
+    /** Shortest a tag may be, after trimming. */
+    minLength?: number;
+}
+/**
+ * Sorts one commit into the next list, or the reason there isn't one.
+ *
+ * Order matters, the way it does in `sortFiles`: a tag is judged on being
+ * present, then long enough, then unique, then whether there is room — so the
+ * message a user sees is the first rule they actually broke.
+ */
+export declare function addTag(tags: string[], raw: string, rules?: TagRules): {
+    tags: string[];
+    rejected?: TagRejection;
+};
+/**
+ * Splits pasted text so one paste can commit several tags.
+ *
+ * Scanned character by character rather than with a RegExp: the separators are
+ * the app's to choose, and building a character class out of them means
+ * escaping every one that happens to be a metacharacter.
+ */
+export declare function splitTags(text: string, separators?: readonly string[]): string[];

package/dist/core/tags.js

@@ -0,0 +1,51 @@
+/**
+ * Free-text tokens: what counts as a new tag, and why one was turned away.
+ *
+ * The rejection is returned rather than thrown or swallowed, so the component
+ * can say *why* nothing happened — a silent no-op on a duplicate reads like a
+ * broken field.
+ */
+/**
+ * Sorts one commit into the next list, or the reason there isn't one.
+ *
+ * Order matters, the way it does in `sortFiles`: a tag is judged on being
+ * present, then long enough, then unique, then whether there is room — so the
+ * message a user sees is the first rule they actually broke.
+ */
+export function addTag(tags, raw, rules = {}) {
+    const { trim = true, caseInsensitive = true, max = 0, minLength = 1 } = rules;
+    const value = trim ? raw.trim().replace(/\s+/g, ' ') : raw;
+    if (!value)
+        return { tags, rejected: 'empty' };
+    if (value.length < minLength)
+        return { tags, rejected: 'short' };
+    const fold = (text) => (caseInsensitive ? text.toLowerCase() : text);
+    if (tags.some((tag) => fold(tag) === fold(value)))
+        return { tags, rejected: 'duplicate' };
+    if (max && tags.length >= max)
+        return { tags, rejected: 'full' };
+    return { tags: [...tags, value] };
+}
+/**
+ * Splits pasted text so one paste can commit several tags.
+ *
+ * Scanned character by character rather than with a RegExp: the separators are
+ * the app's to choose, and building a character class out of them means
+ * escaping every one that happens to be a metacharacter.
+ */
+export function splitTags(text, separators = [',']) {
+    const marks = new Set([...separators, '\n', '\r', '\t']);
+    const found = [];
+    let current = '';
+    for (const char of text) {
+        if (marks.has(char)) {
+            found.push(current);
+            current = '';
+        }
+        else {
+            current += char;
+        }
+    }
+    found.push(current);
+    return found.map((tag) => tag.trim()).filter(Boolean);
+}

package/dist/core/time.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Clock times as `HH:MM` strings — the shape `<input type="time">` uses, so a
+ * form posts exactly what the browser would have posted.
+ *
+ * Everything here works in minutes since midnight. A day is 1440 of them, and
+ * nothing in this module crosses that boundary: stepping past 23:59 stops
+ * there rather than wrapping into a day this module cannot name.
+ */
+export declare const MINUTES_IN_DAY = 1440;
+/**
+ * Reads `9:5`, `09:05`, `0905` or `09:05:30` into minutes since midnight.
+ * Returns `null` for anything that is not a time, including 24:00 and 12:60.
+ */
+export declare function parseTime(text: string): number | null;
+/** Minutes since midnight back to `HH:MM`, always four digits and a colon. */
+export declare function formatTime(minutes: number): string;
+/** Clamps into `min…max` and snaps to the nearest multiple of `step` minutes. */
+export declare function clampTime(minutes: number, min?: string, max?: string, step?: number): number;
+/**
+ * Moves by whole steps. Stops at the bounds instead of wrapping — a stepper
+ * that rolls 23:55 round to 00:00 turns a late meeting into an early one.
+ */
+export declare function stepTime(value: string, direction: 1 | -1, step?: number, min?: string, max?: string): string;
+/**
+ * `13:05` as the locale writes it — `1:05 PM` in en-US, `13.05` in id-ID.
+ *
+ * Display only. The bound value stays `HH:MM` whatever this returns, because a
+ * localised string is not something a form can post.
+ */
+export declare function formatClock(value: string, locale: string, hour12?: boolean): string;

package/dist/core/time.js

@@ -0,0 +1,78 @@
+/**
+ * Clock times as `HH:MM` strings — the shape `<input type="time">` uses, so a
+ * form posts exactly what the browser would have posted.
+ *
+ * Everything here works in minutes since midnight. A day is 1440 of them, and
+ * nothing in this module crosses that boundary: stepping past 23:59 stops
+ * there rather than wrapping into a day this module cannot name.
+ */
+export const MINUTES_IN_DAY = 1440;
+/**
+ * Reads `9:5`, `09:05`, `0905` or `09:05:30` into minutes since midnight.
+ * Returns `null` for anything that is not a time, including 24:00 and 12:60.
+ */
+export function parseTime(text) {
+    const trimmed = text.trim();
+    // Digits and colons only: `9a` and `later` are refusals, not a hint that
+    // someone meant 09:00. Without this a bare `Number('')` reads as midnight.
+    if (!trimmed || !/^[0-9:]+$/.test(trimmed))
+        return null;
+    const digits = trimmed.replace(/[^0-9]/g, '');
+    if (!digits)
+        return null;
+    let hours;
+    let minutes;
+    if (trimmed.includes(':')) {
+        const [rawHours, rawMinutes = '0'] = trimmed.split(':');
+        hours = Number(rawHours);
+        minutes = Number(rawMinutes);
+    }
+    else if (digits.length <= 2) {
+        // A bare number is an hour: `9` means 09:00.
+        hours = Number(digits);
+        minutes = 0;
+    }
+    else {
+        hours = Number(digits.slice(0, digits.length - 2));
+        minutes = Number(digits.slice(-2));
+    }
+    if (!Number.isInteger(hours) || !Number.isInteger(minutes))
+        return null;
+    if (hours < 0 || hours > 23 || minutes < 0 || minutes > 59)
+        return null;
+    return hours * 60 + minutes;
+}
+/** Minutes since midnight back to `HH:MM`, always four digits and a colon. */
+export function formatTime(minutes) {
+    const total = Math.max(0, Math.min(MINUTES_IN_DAY - 1, Math.round(minutes)));
+    const hours = Math.floor(total / 60);
+    return `${String(hours).padStart(2, '0')}:${String(total % 60).padStart(2, '0')}`;
+}
+/** Clamps into `min…max` and snaps to the nearest multiple of `step` minutes. */
+export function clampTime(minutes, min, max, step = 1) {
+    const floor = min ? (parseTime(min) ?? 0) : 0;
+    const ceiling = max ? (parseTime(max) ?? MINUTES_IN_DAY - 1) : MINUTES_IN_DAY - 1;
+    const snapped = step > 1 ? Math.round(minutes / step) * step : minutes;
+    return Math.max(floor, Math.min(ceiling, snapped));
+}
+/**
+ * Moves by whole steps. Stops at the bounds instead of wrapping — a stepper
+ * that rolls 23:55 round to 00:00 turns a late meeting into an early one.
+ */
+export function stepTime(value, direction, step = 1, min, max) {
+    const current = parseTime(value) ?? clampTime(0, min, max, step);
+    return formatTime(clampTime(current + direction * step, min, max, step));
+}
+/**
+ * `13:05` as the locale writes it — `1:05 PM` in en-US, `13.05` in id-ID.
+ *
+ * Display only. The bound value stays `HH:MM` whatever this returns, because a
+ * localised string is not something a form can post.
+ */
+export function formatClock(value, locale, hour12) {
+    const minutes = parseTime(value);
+    if (minutes === null)
+        return '';
+    const date = new Date(2000, 0, 1, Math.floor(minutes / 60), minutes % 60);
+    return new Intl.DateTimeFormat(locale, { hour: '2-digit', minute: '2-digit', hour12 }).format(date);
+}

package/dist/styles/matte/Alert.svelte

@@ -8,7 +8,6 @@
 		toneText,
 		type Tone
 	} from '../../core/tones.js';
-	import { useLocale } from '../../core/locale.svelte.js';
 
 	export type AlertVariant = 'soft' | 'outline' | 'accent';
 
@@ -36,7 +35,6 @@
 		...rest
 	}: Props = $props();
 
-	const t = useLocale();
 	let open = $state(true);
 
 	const variants = $derived({
@@ -82,7 +80,7 @@
 			<button
 				type="button"
 				onclick={dismiss}
-				aria-label={t.current.dismiss}
+				aria-label="Dismiss"
 				class="-m-1 shrink-0 p-1 text-text-muted transition-colors duration-150 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/matte/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-2">
 		{#each items as item, i (item.label)}
 			<li class="flex items-center gap-2">

package/dist/styles/matte/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, toneRing, toneText, type Tone } from '../../core/tones.js';
 
 	interface Props {
@@ -46,8 +45,6 @@
 		class: className = ''
 	}: Props = $props();
 
-	const t = useLocale();
-
 	const selected = $derived(fromISO(value));
 	const now = today();
 
@@ -64,7 +61,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);
@@ -109,7 +106,7 @@
 		<button
 			type="button"
 			onclick={() => show(addMonths(view, -1))}
-			aria-label={t.current.previousMonth}
+			aria-label="Previous month"
 			class="inline-flex size-8 items-center justify-center text-text-secondary transition-colors duration-150 hover:bg-bg-inset hover:text-text {focusRing} {toneRing[
 				tone
 			]}"
@@ -120,13 +117,13 @@
 		</button>
 
 		<span aria-live="polite" class="text-sm font-medium 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="inline-flex size-8 items-center justify-center text-text-secondary transition-colors duration-150 hover:bg-bg-inset hover:text-text {focusRing} {toneRing[
 				tone
 			]}"
@@ -148,7 +145,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-px focus:outline-none"
 	>
@@ -190,7 +187,7 @@
 				tone
 			]} hover:underline hover:underline-offset-4 {focusRing} {toneRing[tone]}"
 		>
-			{t.current.today}
+			Today
 		</button>
 	{/if}
 </div>

package/dist/styles/matte/ColorInput.svelte

@@ -0,0 +1,107 @@
+<script lang="ts">
+	import type { HTMLInputAttributes } from 'svelte/elements';
+	import { normaliseHex } from '../../core/color.js';
+	import type { Tone } from '../../core/tones.js';
+	import Input, { type InputSize } from './Input.svelte';
+
+	interface Props extends Omit<HTMLInputAttributes, 'size' | 'prefix' | 'suffix' | 'type'> {
+		/** Bindable `#rrggbb`. Shorthand and alpha are normalised away on blur. */
+		value?: string;
+		size?: InputSize;
+		tone?: Tone;
+		invalid?: boolean;
+		/** Fixed choices under the field. Empty hides the row. */
+		swatches?: string[];
+		class?: string;
+	}
+
+	let {
+		value = $bindable('#000000'),
+		size = 'md',
+		tone = 'brand',
+		invalid = false,
+		disabled = false,
+		swatches = [],
+		class: className = '',
+		...rest
+	}: Props = $props();
+
+	// 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('');
+	let editing = $state(false);
+
+	$effect(() => {
+		if (!editing) text = value;
+	});
+
+	const resolved = $derived(normaliseHex(text) ?? normaliseHex(value) ?? '#000000');
+
+	// Same reason as CurrencyInput: at input time the bound `text` is one
+	// keystroke behind, so the element is the only current source.
+	function onText(event: Event & { currentTarget: HTMLInputElement }) {
+		const hex = normaliseHex(event.currentTarget.value);
+		if (hex) value = hex;
+	}
+
+	function settle() {
+		editing = false;
+		value = normaliseHex(text) ?? value;
+		text = value;
+	}
+
+	function choose(hex: string) {
+		value = normaliseHex(hex) ?? value;
+		text = value;
+	}
+</script>
+
+<div class="flex w-full flex-col gap-2 {className}">
+	<Input
+		bind:value={text}
+		{size}
+		{tone}
+		{invalid}
+		{disabled}
+		spellcheck="false"
+		autocapitalize="none"
+		placeholder="#000000"
+		oninput={onText}
+		onfocus={() => (editing = true)}
+		onblur={settle}
+		class="[&_input]:font-mono [&_input]:uppercase"
+		{...rest}
+	>
+		{#snippet prefix()}
+			<span class="relative grid size-5 place-items-center border border-hairline">
+				<span class="absolute inset-0" style="background-color: {resolved}"></span>
+				<input
+					type="color"
+					value={resolved}
+					{disabled}
+					aria-label="Pick a colour"
+					oninput={(event) => choose(event.currentTarget.value)}
+					class="absolute inset-0 cursor-pointer opacity-0 disabled:cursor-not-allowed"
+				/>
+			</span>
+		{/snippet}
+	</Input>
+
+	{#if swatches.length}
+		<div class="flex flex-wrap gap-1.5">
+			{#each swatches as swatch (swatch)}
+				<button
+					type="button"
+					{disabled}
+					onclick={() => choose(swatch)}
+					title={swatch}
+					aria-label={swatch}
+					aria-pressed={resolved === normaliseHex(swatch)}
+					class="size-6 border transition-transform duration-150 hover:-translate-y-0.5 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current disabled:pointer-events-none disabled:opacity-50
+						{resolved === normaliseHex(swatch) ? 'border-text' : 'border-hairline'}"
+					style="background-color: {swatch}"
+				></button>
+			{/each}
+		</div>
+	{/if}
+</div>

package/dist/styles/matte/ColorInput.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+import type { Tone } from '../../core/tones.js';
+import { type InputSize } from './Input.svelte';
+interface Props extends Omit<HTMLInputAttributes, 'size' | 'prefix' | 'suffix' | 'type'> {
+    /** Bindable `#rrggbb`. Shorthand and alpha are normalised away on blur. */
+    value?: string;
+    size?: InputSize;
+    tone?: Tone;
+    invalid?: boolean;
+    /** Fixed choices under the field. Empty hides the row. */
+    swatches?: string[];
+    class?: string;
+}
+declare const ColorInput: import("svelte").Component<Props, {}, "value">;
+type ColorInput = ReturnType<typeof ColorInput>;
+export default ColorInput;

package/dist/styles/matte/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';
 
 	export interface ComboboxOption {
@@ -51,8 +50,6 @@
 		class: className = ''
 	}: Props = $props();
 
-	const t = useLocale();
-
 	let open = $state(false);
 	let query = $state('');
 	let wrapper: HTMLElement | null = $state(null);
@@ -161,7 +158,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;
@@ -179,7 +176,7 @@
 		<button
 			type="button"
 			onclick={clear}
-			aria-label={t.current.clear}
+			aria-label="Clear selection"
 			class="shrink-0 p-1.5 text-text-muted transition-colors duration-150 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">
@@ -212,7 +209,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/matte/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';
@@ -61,8 +60,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);
@@ -182,8 +179,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-11 w-full min-w-0 bg-transparent font-sans text-[15px] text-text placeholder:text-text-muted focus:outline-none"
 			/>
 			<Kbd>esc</Kbd>
@@ -197,7 +194,7 @@
 		>
 			{#if flat.length === 0}
 				<p class="px-3.5 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/matte/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="ghost" 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/matte/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';
 
 	interface Props {
 		/** The region that responds to a right-click. */
@@ -27,8 +26,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
@@ -79,7 +76,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-44 flex-col overflow-y-auto border border-hairline bg-bg py-1 font-sans {menuClass}"
 	>