@nqmcreative/ui 0.4.0 → 0.4.2

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,13 +36,12 @@
 		...rest
 	}: Props = $props();
 
-	const t = useLocale();
 	let open = $state(true);
 
 	const variants = $derived({
 		soft: `${toneSurface[tone]} border ${toneBorderSoft[tone]}`,
 		outline: `bg-bg ${edge} border ${toneBorderSoft[tone]}`,
-		accent: `${toneSurface[tone]} border-l-4 ${toneBorder[tone]}`
+		accent: `${toneSurface[tone]} border-l-2 ${toneBorder[tone]}`
 	});
 
 	function dismiss() {
@@ -72,7 +70,7 @@
 
 		<div class="flex min-w-0 flex-1 flex-col gap-1">
 			{#if title}
-				<p class="text-sm leading-snug font-semibold {toneText[tone]}">{title}</p>
+				<p class="font-heading text-sm leading-snug font-semibold {toneText[tone]}">{title}</p>
 			{/if}
 			{#if children}
 				<div class="text-[13px] leading-relaxed text-text-secondary">{@render children()}</div>
@@ -83,8 +81,8 @@
 			<button
 				type="button"
 				onclick={dismiss}
-				aria-label={t.current.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"
+				aria-label="Dismiss"
+				class="-m-1 shrink-0 rounded-xl 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">
 					<path

package/dist/styles/sprout/Avatar.svelte

@@ -47,6 +47,12 @@
 		xl: 'grid place-items-center *:size-8'
 	};
 
+	// A src that 404s left the reader with the browser's broken-image mark while
+	// the initials sat right there unused. Holding the failed URL rather than a
+	// flag means a new src is tried again on its own.
+	let failed = $state('');
+	const broken = $derived(failed !== '' && failed === src);
+
 	const initials = $derived(
 		name
 			.trim()
@@ -60,13 +66,18 @@
 
 <span
 	class="inline-flex shrink-0 items-center justify-center overflow-hidden font-sans font-semibold select-none
-		{squared ? 'rounded-2xl' : 'rounded-full'} {sizes[size]} {src
+		{squared ? 'rounded-2xl' : 'rounded-full'} {sizes[size]} {src && !broken
 		? 'bg-bg-inset'
 		: toneSoft[tone]} {className}"
 	{...rest}
 >
-	{#if src}
-		<img {src} alt={alt ?? name} class="size-full object-cover" />
+	{#if src && !broken}
+		<img
+			{src}
+			alt={alt ?? name}
+			onerror={() => (failed = src ?? '')}
+			class="size-full object-cover"
+		/>
 	{:else if fallback}
 		<span class={glyphs[size]}>{@render fallback()}</span>
 	{:else}

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">
@@ -33,7 +30,7 @@
 				{#if item.href && i < items.length - 1}
 					<a
 						href={item.href}
-						class="inline-flex items-center gap-1.5 rounded px-1 py-0.5 text-text-muted transition-colors duration-150 ease-brand-out hover:bg-bg-inset {toneHoverText[
+						class="inline-flex items-center gap-1.5 rounded-md px-1 py-0.5 text-text-muted transition-colors duration-150 ease-brand-out hover:bg-bg-inset {toneHoverText[
 							tone
 						]}"
 					>

package/dist/styles/sprout/Button.svelte

@@ -14,7 +14,7 @@
 		toneText,
 		type Tone
 	} from '../../core/tones.js';
-	import { edge, lift } from './lift.js';
+	import { lift, liftSoft } from './lift.js';
 
 	export type ButtonVariant = 'solid' | 'soft' | 'outline' | 'ghost' | 'link' | 'primary';
 	export type ButtonSize = 'sm' | 'md' | 'lg' | 'xl';
@@ -92,11 +92,11 @@
 			case 'solid':
 				return `border-transparent ${toneSolid[tone]} ${toneSolidHover[tone]} ${lift[tone]}`;
 			case 'soft':
-				return `border-transparent ${toneSoft[tone]} ${toneSoftHover[tone]} ${edge}`;
+				return `border-transparent ${toneSoft[tone]} ${toneSoftHover[tone]} ${liftSoft[tone]}`;
 			// Outline keeps its own colours on hover — swapping to a solid fill is
 			// matte's move, and it fights sprout's soft surfaces.
 			case 'outline':
-				return `bg-bg ${edge} ${toneText[tone]} ${toneBorderSoft[tone]} hover:bg-bg-alt`;
+				return `bg-bg ${liftSoft[tone]} ${toneText[tone]} ${toneBorderSoft[tone]} hover:bg-bg-alt`;
 			// Nothing raised, so nothing to sink: ghost stays flat on the page.
 			case 'ghost':
 				return `border-transparent bg-transparent ${toneText[tone]} ${toneSoftHover[tone]} active:translate-y-0`;
@@ -116,6 +116,10 @@
 	const iconClass = $derived(size === 'sm' ? iconSm : iconMd);
 
 	async function handleClick(event: MouseEvent) {
+		if (inert) {
+			event.preventDefault();
+			return;
+		}
 		const result = onclick?.(event);
 		// Anything else is a plain handler: nothing to wait for, nothing to lock.
 		if (!(result instanceof Promise)) return;
@@ -134,7 +138,7 @@
 	disabled={href ? undefined : inert}
 	aria-disabled={href && inert ? 'true' : undefined}
 	aria-busy={busy ? 'true' : undefined}
-	role={href ? 'button' : undefined}
+	tabindex={href && inert ? -1 : undefined}
 	class="{base} {focusRing} {toneRing[tone]} {variantClass} {isLink
 		? ''
 		: iconOnly

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"
 	>
@@ -192,11 +189,11 @@
 			type="button"
 			onclick={() => pick(now)}
 			disabled={blocked(now)}
-			class="self-start rounded px-1 text-[13px] font-medium transition-colors duration-150 disabled:pointer-events-none disabled:opacity-40 {toneText[
+			class="self-start rounded-md px-1 text-[13px] font-medium transition-colors duration-150 disabled:pointer-events-none disabled:opacity-40 {toneText[
 				tone
 			]} hover:underline hover:underline-offset-2 {focusRing} {toneRing[tone]}"
 		>
-			{t.current.today}
+			Today
 		</button>
 	{/if}
 </div>

package/dist/styles/sprout/Card.svelte

@@ -40,7 +40,7 @@
 		...rest
 	}: Props = $props();
 
-	// The default card is the one the style is named for: cream, a hairline, and
+	// The default card is the one the style is named for: white, a hairline, and
 	// the lip. `filled` and `tinted` stay flat on purpose — a tinted panel that
 	// also floats is two claims about the same box.
 	const variants = $derived({
@@ -52,7 +52,7 @@
 
 <div
 	class="flex flex-col rounded-[28px] {variants[variant]}
-		{accent ? `border-l-4 ${toneBorderLeft[tone]}` : ''}
+		{accent ? `border-l-2 ${toneBorderLeft[tone]}` : ''}
 		{interactive
 		? `transition-[box-shadow,transform,border-color] duration-150 ease-brand-out hover:-translate-y-0.5 ${softOnHover} ${toneHoverBorder[tone]}`
 		: ''}

package/dist/styles/sprout/Checkbox.svelte

@@ -26,6 +26,8 @@
 		...rest
 	}: Props = $props();
 
+	const uid = $props.id();
+
 	let el: HTMLInputElement | null = $state(null);
 
 	$effect(() => {
@@ -33,44 +35,61 @@
 	});
 </script>
 
-<label
-	class="group inline-flex items-start gap-2.5 font-sans text-sm
-		{disabled ? 'pointer-events-none opacity-50' : 'cursor-pointer'} {className}"
+<div
+	class="inline-block font-sans text-sm {disabled
+		? 'pointer-events-none opacity-50'
+		: ''} {className}"
 >
-	<input bind:this={el} type="checkbox" bind:checked {disabled} class="peer sr-only" {...rest} />
-	<span
-		class="mt-0.5 flex size-[18px] shrink-0 items-center justify-center rounded border border-hairline-strong bg-bg {edge} transition-colors duration-150 ease-brand-out
+	<label class="group inline-flex items-start gap-2.5 {disabled ? '' : 'cursor-pointer'}">
+		<input
+			bind:this={el}
+			type="checkbox"
+			bind:checked
+			{disabled}
+			aria-describedby={description ? `${uid}-description` : undefined}
+			class="peer sr-only"
+			{...rest}
+		/>
+		<span
+			class="mt-0.5 flex size-[18px] shrink-0 items-center justify-center rounded-md border border-hairline-strong bg-bg {edge} transition-colors duration-150 ease-brand-out
 			{tonePeerChecked[tone]} {peerFocusRing} {tonePeerFocus[tone]}"
-		aria-hidden="true"
-	>
-		{#if indeterminate}
-			<span class="h-0.5 w-2.5 rounded-full bg-text-muted"></span>
-		{:else}
-			<svg
-				class="size-3 text-text-inverse opacity-0 transition-opacity duration-150 group-has-[:checked]:opacity-100"
-				viewBox="0 0 12 12"
-				fill="none"
-			>
-				<path
-					d="m2 6 2.6 2.6L10 3.2"
-					stroke="currentColor"
-					stroke-width="2"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-				/>
-			</svg>
-		{/if}
-	</span>
-	{#if label || description || children}
-		<span class="flex flex-col gap-0.5">
-			{#if children}
-				{@render children()}
-			{:else if label}
-				<span class="leading-snug text-text">{label}</span>
-			{/if}
-			{#if description}
-				<span class="text-[13px] leading-snug text-text-muted">{description}</span>
+			aria-hidden="true"
+		>
+			{#if indeterminate}
+				<span class="h-0.5 w-2.5 rounded-full bg-text-muted"></span>
+			{:else}
+				<svg
+					class="size-3 text-text-inverse opacity-0 transition-opacity duration-150 group-has-[:checked]:opacity-100"
+					viewBox="0 0 12 12"
+					fill="none"
+				>
+					<path
+						d="m2 6 2.6 2.6L10 3.2"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					/>
+				</svg>
 			{/if}
 		</span>
+		{#if label || children}
+			<span class="flex flex-col gap-0.5">
+				{#if children}
+					{@render children()}
+				{:else if label}
+					<span class="leading-snug text-text">{label}</span>
+				{/if}
+			</span>
+		{/if}
+	</label>
+	{#if description}
+		<!-- ponytail: the indent tracks the 18px box plus the label's gap; move one, move both. -->
+		<span
+			id="{uid}-description"
+			class="mt-0.5 block pl-[28px] text-[13px] leading-snug text-text-muted"
+		>
+			{description}
+		</span>
 	{/if}
-</label>
+</div>

package/dist/styles/sprout/CheckboxGroup.svelte

@@ -51,6 +51,11 @@
 		...rest
 	}: Props = $props();
 
+	const uid = $props.id();
+	// The group's own hint and error sit outside every control in it, so the
+	// fieldset is what has to point at them.
+	const messageId = $derived(error ? `${uid}-error` : hint ? `${uid}-hint` : undefined);
+
 	const full = $derived(max > 0 && value.length >= max);
 
 	function toggle(option: CheckboxOption) {
@@ -61,11 +66,17 @@
 	}
 </script>
 
-<fieldset class="flex flex-col gap-3 border-0 p-0 {className}" {...rest}>
+<fieldset
+	aria-describedby={messageId}
+	class="flex flex-col gap-3 border-0 p-0 {className}"
+	{...rest}
+>
 	{#if legend}
 		<legend class="mb-1 font-sans text-sm font-medium text-text">
 			{legend}
-			{#if required}<span class="ml-0.5 text-danger" aria-hidden="true">*</span>{/if}
+			{#if required}<span class="ml-0.5 text-danger" aria-hidden="true">*</span><span
+					class="sr-only">(required)</span
+				>{/if}
 		</legend>
 	{/if}
 
@@ -111,8 +122,8 @@
 	</div>
 
 	{#if error}
-		<p class="font-sans text-[13px] text-danger">{error}</p>
+		<p id="{uid}-error" role="alert" class="font-sans text-[13px] text-danger">{error}</p>
 	{:else if hint}
-		<p class="font-sans text-[13px] text-text-muted">{hint}</p>
+		<p id="{uid}-hint" class="font-sans text-[13px] text-text-muted">{hint}</p>
 	{/if}
 </fieldset>

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('');
@@ -77,14 +74,14 @@
 	>
 		{#snippet prefix()}
 			<span
-				class="relative grid size-5 place-items-center overflow-hidden rounded border border-hairline-strong"
+				class="relative grid size-5 place-items-center overflow-hidden rounded-lg border border-hairline-strong"
 			>
 				<span class="absolute inset-0" style="background-color: {resolved}"></span>
 				<input
 					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

@@ -3,8 +3,14 @@
 	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 { toneFocusWithinBorder, toneSoft, toneText, type Tone } from '../../core/tones.js';
-	import { useLocale } from '../../core/locale.svelte.js';
+	import {
+		focusWithinRing,
+		toneFocusWithinBorder,
+		toneFocusWithinRing,
+		toneSoft,
+		toneText,
+		type Tone
+	} from '../../core/tones.js';
 	import { iconMd } from './icon.js';
 	import { edge, soft } from './lift.js';
 
@@ -52,8 +58,6 @@
 		class: className = ''
 	}: Props = $props();
 
-	const t = useLocale();
-
 	let open = $state(false);
 	let query = $state('');
 	let wrapper: HTMLElement | null = $state(null);
@@ -147,7 +151,9 @@
 
 <div
 	bind:this={wrapper}
-	class="relative inline-flex w-full items-center gap-2 rounded-xl border bg-bg pr-1.5 pl-3 {edge} transition-colors duration-150 ease-brand-out
+	class="relative inline-flex w-full items-center gap-2 rounded-xl border bg-bg pr-1.5 pl-3 {edge} transition-colors duration-150 ease-brand-out {focusWithinRing} {toneFocusWithinRing[
+		tone
+	]}
 		{invalid ? 'border-danger' : `border-hairline-strong ${toneFocusWithinBorder[tone]}`}
 		{disabled ? 'pointer-events-none opacity-50' : ''} {className}"
 >
@@ -162,7 +168,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,8 +186,8 @@
 		<button
 			type="button"
 			onclick={clear}
-			aria-label={t.current.clear}
-			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"
+			aria-label="Clear selection"
+			class="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-current"
 		>
 			<svg class="size-3.5" viewBox="0 0 14 14" fill="none" aria-hidden="true">
 				<path
@@ -218,7 +224,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,7 +36,7 @@
 		children
 	}: Props = $props();
 
-	const t = useLocale();
+	const uid = $props.id();
 
 	async function confirm() {
 		try {
@@ -58,6 +57,8 @@
 
 <Modal
 	bind:open
+	aria-labelledby="{uid}-title"
+	aria-describedby={description ? `${uid}-description` : undefined}
 	size="sm"
 	dismissible={!loading}
 	showClose={false}
@@ -76,9 +77,11 @@
 			{/if}
 		</span>
 		<div class="flex min-w-0 flex-1 flex-col gap-1.5">
-			<h2 class="font-heading text-base font-semibold text-text">{title}</h2>
+			<h2 id="{uid}-title" class="font-heading text-base font-semibold text-text">{title}</h2>
 			{#if description}
-				<p class="text-[13px] leading-relaxed text-text-secondary">{description}</p>
+				<p id="{uid}-description" class="text-[13px] leading-relaxed text-text-secondary">
+					{description}
+				</p>
 			{/if}
 			{#if children}
 				{@render children()}
@@ -88,10 +91,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;