@nqmcreative/ui 0.3.0 → 0.4.1

package/dist/styles/matte/TagsInput.svelte

@@ -0,0 +1,170 @@
+<script lang="ts">
+	import { addTag, splitTags, type TagRejection } from '../../core/tags.js';
+	import { toneFocusWithinBorder, toneSoft, type Tone } from '../../core/tones.js';
+
+	interface Props {
+		/** Bindable list of tags, in the order they were added. */
+		tags?: string[];
+		placeholder?: string;
+		/** Cap on how many may be held. `0` means no limit. */
+		max?: number;
+		/** Shortest a tag may be, after trimming. */
+		minLength?: number;
+		/** Keys that commit the tag under the caret, besides Enter. */
+		separators?: string[];
+		/** Refuse a tag that differs from an existing one only in case. */
+		caseInsensitive?: boolean;
+		/** Commit whatever is half-typed when the field loses focus. */
+		commitOnBlur?: boolean;
+		disabled?: boolean;
+		invalid?: boolean;
+		tone?: Tone;
+		/** `name` for a plain form submit — one hidden field, comma-joined. */
+		name?: string;
+		onadd?: (tag: string) => void;
+		onremove?: (tag: string) => void;
+		onreject?: (reason: TagRejection, raw: string) => void;
+		class?: string;
+	}
+
+	let {
+		tags = $bindable([]),
+		placeholder,
+		max = 0,
+		minLength = 1,
+		separators = [','],
+		caseInsensitive = true,
+		commitOnBlur = true,
+		disabled = false,
+		invalid = false,
+		tone = 'brand',
+		name,
+		onadd,
+		onremove,
+		onreject,
+		class: className = ''
+	}: Props = $props();
+
+	let draft = $state('');
+	let field: HTMLInputElement | null = $state(null);
+	/** The last refusal, cleared as soon as the next keystroke lands. */
+	let refused = $state<TagRejection | null>(null);
+
+	const full = $derived(max > 0 && tags.length >= max);
+	const rules = $derived({ max, minLength, caseInsensitive });
+
+	function commit(raw: string) {
+		const { tags: next, rejected } = addTag(tags, raw, rules);
+		if (rejected) {
+			// An empty commit is the Enter key on an empty field, not a mistake.
+			if (rejected !== 'empty') {
+				refused = rejected;
+				onreject?.(rejected, raw);
+			}
+			return false;
+		}
+		tags = next;
+		onadd?.(next[next.length - 1]);
+		return true;
+	}
+
+	function remove(index: number) {
+		const [gone] = tags.slice(index, index + 1);
+		tags = tags.filter((_, at) => at !== index);
+		if (gone !== undefined) onremove?.(gone);
+	}
+
+	function onKeydown(event: KeyboardEvent) {
+		refused = null;
+
+		if (event.key === 'Enter' || separators.includes(event.key)) {
+			event.preventDefault();
+			if (commit(draft)) draft = '';
+			return;
+		}
+
+		// Empty field: Backspace peels the last chip off, the way chips behave
+		// everywhere else in this library.
+		if (event.key === 'Backspace' && draft === '' && tags.length) {
+			event.preventDefault();
+			remove(tags.length - 1);
+		}
+	}
+
+	function onPaste(event: ClipboardEvent) {
+		const text = event.clipboardData?.getData('text') ?? '';
+		const parts = splitTags(text, separators);
+		if (parts.length <= 1) return;
+
+		event.preventDefault();
+		for (const part of parts) commit(part);
+		draft = '';
+	}
+
+	function onBlur() {
+		if (commitOnBlur && draft.trim() && commit(draft)) draft = '';
+	}
+
+	const messages: Record<TagRejection, string> = $derived({
+		empty: '',
+		short: `${minLength}+`,
+		duplicate: 'Already added',
+		full: `$selected ${tags.length}/${max}`
+	});
+</script>
+
+<div class="flex w-full flex-col gap-1.5 {className}">
+	<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
+	<div
+		onclick={() => field?.focus()}
+		class="flex w-full flex-wrap items-center gap-1.5 border bg-bg py-1.5 pr-1.5 pl-2 transition-colors duration-150 ease-brand-out
+			{invalid
+			? 'border-danger focus-within:border-danger'
+			: `border-hairline ${toneFocusWithinBorder[tone]}`}
+			{disabled ? 'pointer-events-none opacity-50' : ''}"
+	>
+		{#each tags as tag, index (tag)}
+			<span
+				class="inline-flex items-center gap-1.5 rounded-full py-1 pr-1 pl-2.5 font-mono text-xs {toneSoft[
+					tone
+				]}"
+			>
+				{tag}
+				<button
+					type="button"
+					onclick={() => remove(index)}
+					aria-label="Remove {tag}"
+					class="inline-flex size-4 items-center justify-center rounded-full transition-colors duration-150 hover:bg-bg 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">
+						<path d="m1.5 1.5 7 7M8.5 1.5l-7 7" stroke="currentColor" stroke-width="1.5" />
+					</svg>
+				</button>
+			</span>
+		{/each}
+
+		<input
+			bind:this={field}
+			bind:value={draft}
+			{disabled}
+			readonly={full}
+			placeholder={tags.length === 0 ? (placeholder ?? 'Add a tag') : ''}
+			aria-label={placeholder ?? 'Add a tag'}
+			aria-invalid={invalid ? 'true' : undefined}
+			onkeydown={onKeydown}
+			onpaste={onPaste}
+			onblur={onBlur}
+			class="h-7 min-w-24 flex-1 bg-transparent font-sans text-[15px] text-text placeholder:text-text-muted focus:outline-none"
+		/>
+
+		{#if name}
+			<input type="hidden" {name} value={tags.join(',')} />
+		{/if}
+	</div>
+
+	{#if refused && messages[refused]}
+		<span class="font-mono text-xs text-danger">{messages[refused]}</span>
+	{:else if max}
+		<span class="font-mono text-xs text-text-muted">{tags.length}/{max}</span>
+	{/if}
+</div>

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

@@ -0,0 +1,29 @@
+import { type TagRejection } from '../../core/tags.js';
+import { type Tone } from '../../core/tones.js';
+interface Props {
+    /** Bindable list of tags, in the order they were added. */
+    tags?: string[];
+    placeholder?: string;
+    /** Cap on how many may be held. `0` means no limit. */
+    max?: number;
+    /** Shortest a tag may be, after trimming. */
+    minLength?: number;
+    /** Keys that commit the tag under the caret, besides Enter. */
+    separators?: string[];
+    /** Refuse a tag that differs from an existing one only in case. */
+    caseInsensitive?: boolean;
+    /** Commit whatever is half-typed when the field loses focus. */
+    commitOnBlur?: boolean;
+    disabled?: boolean;
+    invalid?: boolean;
+    tone?: Tone;
+    /** `name` for a plain form submit — one hidden field, comma-joined. */
+    name?: string;
+    onadd?: (tag: string) => void;
+    onremove?: (tag: string) => void;
+    onreject?: (reason: TagRejection, raw: string) => void;
+    class?: string;
+}
+declare const TagsInput: import("svelte").Component<Props, {}, "tags">;
+type TagsInput = ReturnType<typeof TagsInput>;
+export default TagsInput;

package/dist/styles/matte/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>
@@ -85,7 +82,7 @@
 {#if variant === 'segmented'}
 	<div
 		role="radiogroup"
-		aria-label={t.current.toggleTheme}
+		aria-label="Toggle theme"
 		class="inline-flex items-center gap-0 border border-hairline bg-bg-alt p-1 {className}"
 	>
 		{#each options as option (option.value)}
@@ -109,8 +106,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 border border-hairline transition-colors duration-150 ease-brand-out {focusRing} {toneRing[
 			tone
 		]} {toneSoft[tone]} {className}"

package/dist/styles/matte/TimeInput.svelte

@@ -0,0 +1,126 @@
+<script lang="ts">
+	import type { HTMLInputAttributes } from 'svelte/elements';
+	import { clampTime, formatTime, parseTime, stepTime } from '../../core/time.js';
+	import type { Tone } from '../../core/tones.js';
+	import Input, { type InputSize } from './Input.svelte';
+
+	interface Props extends Omit<
+		HTMLInputAttributes,
+		'size' | 'prefix' | 'suffix' | 'min' | 'max' | 'step'
+	> {
+		/** Bindable `HH:MM`, or `''` for empty. */
+		value?: string;
+		/** Inclusive bounds, `HH:MM`. */
+		min?: string;
+		max?: string;
+		/** Minutes one press of a stepper moves, and what typing snaps to. */
+		step?: number;
+		size?: InputSize;
+		tone?: Tone;
+		invalid?: boolean;
+		/** Hide the steppers and let the field be typed into only. */
+		steppers?: boolean;
+		class?: string;
+	}
+
+	let {
+		value = $bindable(''),
+		min,
+		max,
+		step = 15,
+		size = 'md',
+		tone = 'brand',
+		invalid = false,
+		disabled = false,
+		steppers = true,
+		class: className = '',
+		...rest
+	}: Props = $props();
+
+	// 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('');
+	let editing = $state(false);
+
+	$effect(() => {
+		if (!editing) text = value;
+	});
+
+	function settle() {
+		editing = false;
+		const minutes = parseTime(text);
+		value = minutes === null ? '' : formatTime(clampTime(minutes, min, max, step));
+		text = value;
+	}
+
+	function nudge(direction: 1 | -1) {
+		value = stepTime(value, direction, step, min, max);
+		text = value;
+	}
+
+	function onKeydown(event: KeyboardEvent) {
+		if (event.key === 'ArrowUp') {
+			event.preventDefault();
+			nudge(1);
+		} else if (event.key === 'ArrowDown') {
+			event.preventDefault();
+			nudge(-1);
+		} else if (event.key === 'Enter') {
+			settle();
+		}
+	}
+
+	const stepper =
+		'grid size-6 place-items-center text-text-secondary transition-colors duration-150 hover:bg-bg-inset hover:text-text focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-current';
+</script>
+
+<Input
+	bind:value={text}
+	{size}
+	{tone}
+	{invalid}
+	{disabled}
+	inputmode="numeric"
+	placeholder="--:--"
+	onfocus={() => (editing = true)}
+	onblur={settle}
+	onkeydown={onKeydown}
+	class="[&_input]:tabular-nums {className}"
+	{...rest}
+>
+	{#snippet prefix()}
+		<svg class="size-4" viewBox="0 0 20 20" fill="none" aria-hidden="true">
+			<circle cx="10" cy="10" r="6.5" stroke="currentColor" stroke-width="1.5" />
+			<path d="M10 6.5V10l2.5 1.5" stroke="currentColor" stroke-width="1.5" />
+		</svg>
+	{/snippet}
+
+	{#snippet suffix()}
+		{#if steppers}
+			<span class="-mr-2 flex flex-col">
+				<button
+					type="button"
+					class={stepper}
+					{disabled}
+					onclick={() => nudge(1)}
+					aria-label="Increase"
+				>
+					<svg class="size-3" viewBox="0 0 12 12" fill="none" aria-hidden="true">
+						<path d="m3 7.5 3-3 3 3" stroke="currentColor" stroke-width="1.5" />
+					</svg>
+				</button>
+				<button
+					type="button"
+					class={stepper}
+					{disabled}
+					onclick={() => nudge(-1)}
+					aria-label="Decrease"
+				>
+					<svg class="size-3" viewBox="0 0 12 12" fill="none" aria-hidden="true">
+						<path d="m3 4.5 3 3 3-3" stroke="currentColor" stroke-width="1.5" />
+					</svg>
+				</button>
+			</span>
+		{/if}
+	{/snippet}
+</Input>

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

@@ -0,0 +1,21 @@
+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' | 'min' | 'max' | 'step'> {
+    /** Bindable `HH:MM`, or `''` for empty. */
+    value?: string;
+    /** Inclusive bounds, `HH:MM`. */
+    min?: string;
+    max?: string;
+    /** Minutes one press of a stepper moves, and what typing snaps to. */
+    step?: number;
+    size?: InputSize;
+    tone?: Tone;
+    invalid?: boolean;
+    /** Hide the steppers and let the field be typed into only. */
+    steppers?: boolean;
+    class?: string;
+}
+declare const TimeInput: import("svelte").Component<Props, {}, "value">;
+type TimeInput = ReturnType<typeof TimeInput>;
+export default TimeInput;

package/dist/styles/matte/Toaster.svelte

@@ -6,7 +6,6 @@
 	import { toneBorderSoft, toneSurface, 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,7 +38,7 @@
 <div
 	use:portal
 	aria-live="polite"
-	aria-label={t.current.notifications}
+	aria-label="Notifications"
 	class="pointer-events-none fixed z-[100] flex w-[min(24rem,calc(100vw-2rem))] flex-col gap-3 {positions[
 		position
 	]} {fromTop ? '' : 'flex-col-reverse'} {className}"
@@ -101,7 +98,7 @@
 			<button
 				type="button"
 				onclick={() => toast.dismiss(item.id)}
-				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/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';
@@ -30,6 +29,14 @@ export type { CheckboxOption } from './CheckboxGroup.svelte';
 export { default as SegmentedControl } from './SegmentedControl.svelte';
 export type { SegmentOption, SegmentedSize } from './SegmentedControl.svelte';
 export { default as InputGroup } from './InputGroup.svelte';
+export { default as InputAddon } from './InputAddon.svelte';
+export { default as SearchInput } from './SearchInput.svelte';
+export { default as PinInput } from './PinInput.svelte';
+export { default as TagsInput } from './TagsInput.svelte';
+export { default as CurrencyInput } from './CurrencyInput.svelte';
+export { default as TimeInput } from './TimeInput.svelte';
+export { default as ColorInput } from './ColorInput.svelte';
+export { default as FileInput } from './FileInput.svelte';
 export { default as Combobox } from './Combobox.svelte';
 export type { ComboboxOption } from './Combobox.svelte';
 export { default as MultiSelect } from './MultiSelect.svelte';

package/dist/styles/matte/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';
@@ -26,6 +24,14 @@ export { default as RadioGroup } from './RadioGroup.svelte';
 export { default as CheckboxGroup } from './CheckboxGroup.svelte';
 export { default as SegmentedControl } from './SegmentedControl.svelte';
 export { default as InputGroup } from './InputGroup.svelte';
+export { default as InputAddon } from './InputAddon.svelte';
+export { default as SearchInput } from './SearchInput.svelte';
+export { default as PinInput } from './PinInput.svelte';
+export { default as TagsInput } from './TagsInput.svelte';
+export { default as CurrencyInput } from './CurrencyInput.svelte';
+export { default as TimeInput } from './TimeInput.svelte';
+export { default as ColorInput } from './ColorInput.svelte';
+export { default as FileInput } from './FileInput.svelte';
 export { default as Combobox } from './Combobox.svelte';
 export { default as MultiSelect } from './MultiSelect.svelte';
 export { default as DatePicker } from './DatePicker.svelte';

package/dist/styles/paper/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 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/paper/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/paper/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>