@nqmcreative/ui 0.3.0 → 0.4.1

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,6 @@
 		...rest
 	}: Props = $props();
 
-	const t = useLocale();
 	let dialog: HTMLDialogElement | null = $state(null);
 
 	const closable = $derived(showClose ?? dismissible);
@@ -92,7 +90,7 @@
 					<button
 						type="button"
 						onclick={close}
-						aria-label={t.current.close}
+						aria-label="Close"
 						class="-m-1 shrink-0 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}
@@ -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">

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

@@ -0,0 +1,134 @@
+<script lang="ts">
+	import { caretIndex, clearFrom, fillFrom, sanitisePin, type PinMode } from '../../core/pin.js';
+	import { toneFocusBorder, type Tone } from '../../core/tones.js';
+
+	interface Props {
+		/** Bindable code. Shorter than `length` means still incomplete. */
+		value?: string;
+		/** How many boxes. */
+		length?: number;
+		/** What a box accepts. */
+		mode?: PinMode;
+		/** Render the characters as dots. */
+		mask?: boolean;
+		/** Draw a gap after this many boxes — `3` gives `123 456`. */
+		groupAfter?: number;
+		disabled?: boolean;
+		invalid?: boolean;
+		tone?: Tone;
+		/** `name` for a plain form submit — one hidden field holding the code. */
+		name?: string;
+		/** Fires once the last box is filled. */
+		oncomplete?: (value: string) => void;
+		class?: string;
+	}
+
+	let {
+		value = $bindable(''),
+		length = 6,
+		mode = 'numeric',
+		mask = false,
+		groupAfter = 0,
+		disabled = false,
+		invalid = false,
+		tone = 'brand',
+		name,
+		oncomplete,
+		class: className = ''
+	}: Props = $props();
+
+	let boxes: HTMLInputElement[] = $state([]);
+
+	const chars = $derived(Array.from({ length }, (_, i) => value[i] ?? ''));
+
+	function focusAt(index: number) {
+		boxes[Math.max(0, Math.min(length - 1, index))]?.focus();
+	}
+
+	/**
+	 * The DOM is written back on every keystroke, not only when the value
+	 * changed: a refused character leaves the box holding text the state never
+	 * accepted, and nothing else would clear it.
+	 */
+	function sync(box: HTMLInputElement, index: number) {
+		box.value = value[index] ?? '';
+	}
+
+	function commit(next: string, from: number) {
+		const was = value;
+		value = next;
+		if (value.length === length && was.length < length) oncomplete?.(value);
+		// Land on the first empty box, or the one after whatever was just typed.
+		focusAt(Math.min(Math.max(from, caretIndex(value, length)), length - 1));
+	}
+
+	function onInput(event: Event & { currentTarget: HTMLInputElement }, index: number) {
+		const typed = sanitisePin(event.currentTarget.value, mode);
+		if (!typed) {
+			sync(event.currentTarget, index);
+			return;
+		}
+		const next = fillFrom(value, index, typed, length, mode);
+		commit(next, index + typed.length);
+		for (const [at, box] of boxes.entries()) sync(box, at);
+	}
+
+	function onKeydown(event: KeyboardEvent, index: number) {
+		if (event.key === 'Backspace') {
+			event.preventDefault();
+			// An empty box deletes the one before it, the way a caret would.
+			const target = value[index] ? index : index - 1;
+			if (target < 0) return;
+			value = clearFrom(value, target);
+			for (const [at, box] of boxes.entries()) sync(box, at);
+			focusAt(target);
+		} else if (event.key === 'ArrowLeft') {
+			event.preventDefault();
+			focusAt(index - 1);
+		} else if (event.key === 'ArrowRight') {
+			event.preventDefault();
+			focusAt(index + 1);
+		}
+	}
+
+	function onPaste(event: ClipboardEvent, index: number) {
+		event.preventDefault();
+		const text = event.clipboardData?.getData('text') ?? '';
+		const clean = sanitisePin(text, mode);
+		if (!clean) return;
+		commit(fillFrom(value, index, clean, length, mode), index + clean.length);
+		for (const [at, box] of boxes.entries()) sync(box, at);
+	}
+</script>
+
+<div class="flex items-center gap-2 {className}">
+	{#each chars as char, index (index)}
+		{#if groupAfter && index > 0 && index % groupAfter === 0}
+			<span class="h-px w-2 bg-hairline-strong" aria-hidden="true"></span>
+		{/if}
+		<input
+			bind:this={boxes[index]}
+			value={char}
+			{disabled}
+			type={mask ? 'password' : 'text'}
+			inputmode={mode === 'numeric' ? 'numeric' : 'text'}
+			autocomplete={index === 0 ? 'one-time-code' : 'off'}
+			autocapitalize="characters"
+			spellcheck="false"
+			maxlength={length}
+			aria-label="Digit {index + 1}"
+			aria-invalid={invalid ? 'true' : undefined}
+			oninput={(event) => onInput(event, index)}
+			onkeydown={(event) => onKeydown(event, index)}
+			onpaste={(event) => onPaste(event, index)}
+			onfocus={(event) => event.currentTarget.select()}
+			class="size-11 border bg-bg text-center font-mono text-base text-text transition-colors duration-150 ease-brand-out focus:outline-none
+				{invalid ? 'border-danger' : `border-hairline ${toneFocusBorder[tone]}`}
+				{disabled ? 'pointer-events-none opacity-50' : ''}"
+		/>
+	{/each}
+
+	{#if name}
+		<input type="hidden" {name} {value} />
+	{/if}
+</div>

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

@@ -0,0 +1,25 @@
+import { type PinMode } from '../../core/pin.js';
+import { type Tone } from '../../core/tones.js';
+interface Props {
+    /** Bindable code. Shorter than `length` means still incomplete. */
+    value?: string;
+    /** How many boxes. */
+    length?: number;
+    /** What a box accepts. */
+    mode?: PinMode;
+    /** Render the characters as dots. */
+    mask?: boolean;
+    /** Draw a gap after this many boxes — `3` gives `123 456`. */
+    groupAfter?: number;
+    disabled?: boolean;
+    invalid?: boolean;
+    tone?: Tone;
+    /** `name` for a plain form submit — one hidden field holding the code. */
+    name?: string;
+    /** Fires once the last box is filled. */
+    oncomplete?: (value: string) => void;
+    class?: string;
+}
+declare const PinInput: import("svelte").Component<Props, {}, "value">;
+type PinInput = ReturnType<typeof PinInput>;
+export default PinInput;

package/dist/styles/matte/SearchInput.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLInputAttributes } from 'svelte/elements';
+	import type { Tone } from '../../core/tones.js';
+	import Input, { type InputSize } from './Input.svelte';
+
+	interface Props extends Omit<HTMLInputAttributes, 'size' | 'prefix' | 'type'> {
+		value?: string;
+		size?: InputSize;
+		tone?: Tone;
+		invalid?: boolean;
+		/**
+		 * Milliseconds to wait after the last keystroke before `onsearch` fires.
+		 * `0` fires on every one.
+		 */
+		debounce?: number;
+		/** The debounced value. The bound `value` still updates immediately. */
+		onsearch?: (value: string) => void;
+		onclear?: () => void;
+		/** Replaces the magnifier. */
+		icon?: Snippet;
+		class?: string;
+	}
+
+	let {
+		value = $bindable(''),
+		size = 'md',
+		tone = 'brand',
+		invalid = false,
+		disabled = false,
+		debounce = 0,
+		onsearch,
+		onclear,
+		icon,
+		class: className = '',
+		...rest
+	}: Props = $props();
+
+	// 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(() => {
+		const next = value;
+		if (!onsearch) return;
+		if (debounce <= 0) {
+			onsearch(next);
+			return;
+		}
+		const timer = setTimeout(() => onsearch(next), debounce);
+		return () => clearTimeout(timer);
+	});
+
+	function clear() {
+		value = '';
+		onclear?.();
+	}
+</script>
+
+<Input bind:value type="search" {size} {tone} {invalid} {disabled} class={className} {...rest}>
+	{#snippet prefix()}
+		{#if icon}
+			{@render icon()}
+		{:else}
+			<svg class="size-4" viewBox="0 0 20 20" fill="none" aria-hidden="true">
+				<circle cx="9" cy="9" r="5.5" stroke="currentColor" stroke-width="1.5" />
+				<path d="m13 13 3.5 3.5" stroke="currentColor" stroke-width="1.5" />
+			</svg>
+		{/if}
+	{/snippet}
+
+	{#snippet suffix()}
+		{#if value}
+			<button
+				type="button"
+				onclick={clear}
+				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">
+					<path d="m2 2 10 10M12 2 2 12" stroke="currentColor" stroke-width="1.5" />
+				</svg>
+			</button>
+		{/if}
+	{/snippet}
+</Input>

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

@@ -0,0 +1,24 @@
+import type { Snippet } from 'svelte';
+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' | 'type'> {
+    value?: string;
+    size?: InputSize;
+    tone?: Tone;
+    invalid?: boolean;
+    /**
+     * Milliseconds to wait after the last keystroke before `onsearch` fires.
+     * `0` fires on every one.
+     */
+    debounce?: number;
+    /** The debounced value. The bound `value` still updates immediately. */
+    onsearch?: (value: string) => void;
+    onclear?: () => void;
+    /** Replaces the magnifier. */
+    icon?: Snippet;
+    class?: string;
+}
+declare const SearchInput: import("svelte").Component<Props, {}, "value">;
+type SearchInput = ReturnType<typeof SearchInput>;
+export default SearchInput;

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/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, {}, "">;

package/dist/styles/matte/Table.svelte

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