@nqmcreative/ui 0.4.0 → 0.4.2

package/dist/styles/matte/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;
@@ -61,15 +61,26 @@
 											<a
 												href={item.href}
 												target={item.external ? '_blank' : undefined}
-												rel={item.external ? 'noreferrer' : undefined}
+												rel={item.external ? 'noopener noreferrer' : undefined}
 												class="inline-flex items-center gap-2 font-sans text-sm text-text-secondary transition-colors duration-150 ease-brand-out {toneHoverText[
 													tone
 												]}"
 											>
 												{#if item.icon}<span class={iconSm}>{@render item.icon()}</span
 													>{/if}{item.label}
-												{#if item.external}<span aria-hidden="true" class="text-[0.85em]">↗</span
-													>{/if}
+												{#if item.external}<svg
+														class="inline-block size-[0.85em] align-[-0.05em]"
+														viewBox="0 0 14 14"
+														fill="none"
+														aria-hidden="true"
+														><path
+															d="M5.5 2.5h6v6M11.5 2.5 3.5 10.5"
+															stroke="currentColor"
+															stroke-width="1.5"
+															stroke-linecap="round"
+															stroke-linejoin="round"
+														/></svg
+													><span class="sr-only">(opens in a new tab)</span>{/if}
 											</a>
 										</li>
 									{/each}

package/dist/styles/matte/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/matte/Input.svelte

@@ -1,7 +1,12 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLInputAttributes } from 'svelte/elements';
-	import { toneFocusWithinBorder, type Tone } from '../../core/tones.js';
+	import {
+		focusWithinRing,
+		toneFocusWithinBorder,
+		toneFocusWithinRing,
+		type Tone
+	} from '../../core/tones.js';
 
 	export type InputSize = 'sm' | 'md' | 'lg';
 
@@ -37,7 +42,9 @@
 </script>
 
 <span
-	class="inline-flex w-full items-center gap-2 border bg-bg px-3.5 transition-colors duration-150 ease-brand-out
+	class="inline-flex w-full items-center gap-2 border bg-bg px-3.5 transition-colors duration-150 ease-brand-out {focusWithinRing} {toneFocusWithinRing[
+		tone
+	]}
 		{sizes[size]}
 		{invalid
 		? 'border-danger focus-within:border-danger'

package/dist/styles/matte/Label.svelte

@@ -12,5 +12,7 @@
 
 <label class="font-sans text-sm font-medium text-text {className}" {...rest}>
 	{@render children()}
-	{#if required}<span class="text-danger" aria-hidden="true">*</span>{/if}
+	{#if required}<span class="text-danger" aria-hidden="true">*</span><span class="sr-only"
+			>(required)</span
+		>{/if}
 </label>

package/dist/styles/matte/Link.svelte

@@ -40,7 +40,7 @@
 
 <a
 	target={external ? '_blank' : undefined}
-	rel={external ? 'noreferrer' : undefined}
+	rel={external ? 'noopener noreferrer' : undefined}
 	class="inline-flex items-center gap-1 font-sans transition-colors duration-150 ease-brand-out
 		{muted ? `text-text-secondary ${toneHoverText[tone]}` : toneText[tone]}
 		{underlines[underline]} {focusRing} {toneRing[tone]} {className}"
@@ -49,5 +49,16 @@
 	{#if icon}<span class={iconSm}>{@render icon()}</span>{/if}
 	{@render children()}
 	{#if iconEnd}<span class={iconSm}>{@render iconEnd()}</span>{/if}
-	{#if external}<span aria-hidden="true" class="text-[0.85em]">↗</span>{/if}
+	{#if external}
+		<svg class="size-[0.85em] shrink-0" viewBox="0 0 14 14" fill="none" aria-hidden="true">
+			<path
+				d="M5.5 2.5h6v6M11.5 2.5 3.5 10.5"
+				stroke="currentColor"
+				stroke-width="1.5"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			/>
+		</svg>
+		<span class="sr-only">(opens in a new tab)</span>
+	{/if}
 </a>

package/dist/styles/matte/MenuItem.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLButtonAttributes } from 'svelte/elements';
-	import { toneSoftHover, toneText, type Tone } from '../../core/tones.js';
+	import { toneSoft, toneSoftHover, toneText, type Tone } from '../../core/tones.js';
 	import { iconMd } from './icon.js';
 
 	interface Props extends HTMLButtonAttributes {
@@ -28,6 +28,11 @@
 		children,
 		...rest
 	}: Props = $props();
+
+	// A chosen row speaks in the brand, the same as an active nav link — a tick
+	// alone leaves it the same grey as every row above it. An item that already
+	// carries a tone (a red `Delete`) keeps its own.
+	const chosen = $derived(toneSoft[tone === 'neutral' ? 'brand' : tone]);
 </script>
 
 <svelte:element
@@ -39,9 +44,11 @@
 	aria-disabled={disabled ? 'true' : undefined}
 	tabindex={disabled ? undefined : -1}
 	class="flex w-full items-center gap-2.5 px-3 py-1.5 text-left text-[14px] transition-colors duration-100 ease-brand-out focus:outline-none disabled:pointer-events-none disabled:opacity-40
-		{tone === 'neutral'
-		? 'text-text-secondary hover:bg-bg-inset focus-visible:bg-bg-inset'
-		: `${toneText[tone]} ${toneSoftHover[tone]}`}
+		{selected
+		? `${chosen} font-medium`
+		: tone === 'neutral'
+			? 'text-text-secondary hover:bg-bg-inset focus-visible:bg-bg-inset'
+			: `${toneText[tone]} ${toneSoftHover[tone]}`}
 		{className}"
 	{...rest}
 >

package/dist/styles/matte/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,8 @@
 		...rest
 	}: Props = $props();
 
-	const t = useLocale();
+	const uid = $props.id();
+
 	let dialog: HTMLDialogElement | null = $state(null);
 
 	const closable = $derived(showClose ?? dismissible);
@@ -66,6 +66,8 @@
 
 <dialog
 	bind:this={dialog}
+	aria-labelledby={title ? `${uid}-title` : undefined}
+	aria-describedby={description ? `${uid}-description` : undefined}
 	onclose={close}
 	onclick={onBackdrop}
 	oncancel={(event) => {
@@ -82,17 +84,21 @@
 				{#if icon}<span class={iconLg}>{@render icon()}</span>{/if}
 				<div class="flex min-w-0 flex-1 flex-col gap-1">
 					{#if title}
-						<h2 class="font-heading text-lg font-medium tracking-tight">{title}</h2>
+						<h2 id="{uid}-title" class="font-heading text-lg font-medium tracking-tight">
+							{title}
+						</h2>
 					{/if}
 					{#if description}
-						<p class="font-sans text-sm text-text-secondary">{description}</p>
+						<p id="{uid}-description" class="font-sans text-sm text-text-secondary">
+							{description}
+						</p>
 					{/if}
 				</div>
 				{#if closable}
 					<button
 						type="button"
 						onclick={close}
-						aria-label={t.current.close}
+						aria-label="Close"
 						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-brand"
 					>
 						<svg class="size-4" viewBox="0 0 14 14" fill="none" aria-hidden="true">

package/dist/styles/matte/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-full px-2.5 py-1 font-mono text-xs {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-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 14 14" fill="none" aria-hidden="true">
@@ -184,7 +181,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;
@@ -206,7 +203,7 @@
 				onchange?.([]);
 				inputEl?.focus();
 			}}
-			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">
@@ -229,7 +226,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/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, toneText, type Tone } from '../../core/tones.js';
 	import Drawer from './Drawer.svelte';
@@ -53,8 +52,6 @@
 		class: className = ''
 	}: Props = $props();
 
-	const t = useLocale();
-
 	const link =
 		'inline-flex items-center gap-2 font-sans text-[15px] transition-colors duration-150 ease-brand-out';
 </script>
@@ -64,10 +61,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}
@@ -115,7 +109,7 @@
 							class="{link} {focusRing} {toneRing[tone]} {item.active
 								? toneText[tone]
 								: 'text-text-secondary hover:text-text'} {item.disabled
-								? 'pointer-events-none opacity-50'
+								? 'pointer-events-none opacity-40'
 								: ''}"
 						>
 							{#if item.icon}<span class={iconMd}>{@render item.icon()}</span>{/if}
@@ -138,7 +132,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 text-text-secondary transition-colors duration-150 hover:text-text md:hidden {focusRing} {toneRing[
 					tone
@@ -152,7 +146,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">
 		{#each items as item (item.label)}
 			<li class="border-b border-hairline last:border-b-0">
@@ -162,7 +156,7 @@
 					aria-current={item.active ? 'page' : undefined}
 					class="flex items-center justify-between gap-3 py-3 font-sans text-[15px] {item.active
 						? toneText[tone]
-						: 'text-text-secondary'} {item.disabled ? 'pointer-events-none opacity-50' : ''}"
+						: 'text-text-secondary'} {item.disabled ? 'pointer-events-none opacity-40' : ''}"
 				>
 					<span class="flex min-w-0 items-center gap-2.5">
 						{#if item.icon}<span class={iconMd}>{@render item.icon()}</span>{/if}

package/dist/styles/matte/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 px-2 font-mono text-[13px] 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)}
 	>
 		←
@@ -71,7 +68,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)}
 	>
 		→

package/dist/styles/matte/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/matte/Radio.svelte

@@ -24,32 +24,51 @@
 		children,
 		...rest
 	}: Props = $props();
+
+	const uid = $props.id();
 </script>
 
-<label
-	class="group inline-flex items-start gap-3 font-sans text-[15px]
-		{disabled ? 'pointer-events-none opacity-50' : 'cursor-pointer'} {className}"
+<div
+	class="inline-block font-sans text-[15px] {disabled
+		? 'pointer-events-none opacity-50'
+		: ''} {className}"
 >
-	<input type="radio" bind:group {value} {disabled} class="peer sr-only" {...rest} />
-	<span
-		class="mt-0.5 flex size-[18px] shrink-0 items-center justify-center rounded-full border border-hairline-strong bg-bg transition-colors duration-150 ease-brand-out
+	<label class="group inline-flex items-start gap-3 {disabled ? '' : 'cursor-pointer'}">
+		<input
+			type="radio"
+			bind:group
+			{value}
+			{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-full border border-hairline-strong bg-bg transition-colors duration-150 ease-brand-out
 			{tonePeerChecked[tone]} {peerFocusRing} {tonePeerFocus[tone]}"
-		aria-hidden="true"
-	>
+			aria-hidden="true"
+		>
+			<span
+				class="size-1.5 rounded-full bg-text-inverse opacity-0 transition-opacity duration-150 group-has-[:checked]:opacity-100"
+			></span>
+		</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 dot plus the label's gap; move one, move both. -->
 		<span
-			class="size-1.5 rounded-full bg-text-inverse opacity-0 transition-opacity duration-150 group-has-[:checked]:opacity-100"
-		></span>
-	</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-sm leading-snug text-text-muted">{description}</span>
-			{/if}
+			id="{uid}-description"
+			class="mt-0.5 block pl-[30px] text-sm leading-snug text-text-muted"
+		>
+			{description}
 		</span>
 	{/if}
-</label>
+</div>

package/dist/styles/matte/RadioGroup.svelte

@@ -44,13 +44,24 @@
 		children,
 		...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);
 </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="text-danger" aria-hidden="true">*</span>{/if}
+			{#if required}<span class="text-danger" aria-hidden="true">*</span><span class="sr-only"
+					>(required)</span
+				>{/if}
 		</legend>
 	{/if}
 
@@ -92,8 +103,8 @@
 	</div>
 
 	{#if error}
-		<p class="font-sans text-sm text-danger">{error}</p>
+		<p id="{uid}-error" role="alert" class="font-sans text-sm text-danger">{error}</p>
 	{:else if hint}
-		<p class="font-sans text-sm text-text-muted">{hint}</p>
+		<p id="{uid}-hint" class="font-sans text-sm text-text-muted">{hint}</p>
 	{/if}
 </fieldset>

package/dist/styles/matte/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 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/Select.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLSelectAttributes } from 'svelte/elements';
-	import { toneFocusBorder, type Tone } from '../../core/tones.js';
+	import { focusRing, toneFocusBorder, toneRing, type Tone } from '../../core/tones.js';
 
 	export interface SelectOption {
 		value: string;
@@ -35,7 +35,9 @@
 	<select
 		bind:value
 		aria-invalid={invalid ? 'true' : undefined}
-		class="h-10 w-full appearance-none border bg-bg py-0 pr-10 pl-3.5 font-sans text-[15px] text-text transition-colors duration-150 ease-brand-out focus:outline-none disabled:pointer-events-none disabled:opacity-50
+		class="{focusRing} {toneRing[
+			tone
+		]} h-10 w-full appearance-none border bg-bg py-0 pr-10 pl-3.5 font-sans text-[15px] text-text transition-colors duration-150 ease-brand-out disabled:pointer-events-none disabled:opacity-50
 			{invalid ? 'border-danger' : `border-hairline ${toneFocusBorder[tone]}`} {className}"
 		{...rest}
 	>

package/dist/styles/matte/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 py-3">
+	<nav aria-label="Navigation" class="flex-1 overflow-y-auto py-3">
 		{#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 font-sans text-xs text-text-muted transition-colors duration-150 hover:text-text {focusRing} {toneRing[
 						tone
 					]}"
@@ -248,7 +245,7 @@
 							stroke-linecap="square"
 						/>
 					</svg>
-					{#if !collapsed}<span>{t.current.collapseSidebar}</span>{/if}
+					{#if !collapsed}<span>Collapse sidebar</span>{/if}
 				</button>
 			{/if}
 		</div>

package/dist/styles/matte/Skeleton.svelte

@@ -29,7 +29,7 @@
 </script>
 
 {#if variant === 'text' && lines > 1}
-	<div class="flex w-full flex-col gap-2 {className}" {...rest}>
+	<div aria-hidden="true" class="flex w-full flex-col gap-2 {className}" {...rest}>
 		{#each { length: lines }, i (i)}
 			<div
 				class="h-4 animate-pulse bg-bg-inset {i === lines - 1 ? 'w-2/3' : 'w-full'}"
@@ -39,6 +39,7 @@
 	</div>
 {:else}
 	<div
+		aria-hidden="true"
 		class="animate-pulse bg-bg-inset {variants[variant]} {className}"
 		style="{width ? `width:${width};` : ''}{height ? `height:${height};` : ''}"
 		{...rest}

package/dist/styles/matte/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 border-t-transparent
 		{sizes[size]} {tone ? toneText[tone] : ''} {className}"
 	{...rest}

package/dist/styles/matte/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, {}, "">;