@nqmcreative/ui 0.1.0 → 0.2.0

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

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type Tone } from '../../core/tones.js';
+export type CTAVariant = 'tinted' | 'solid' | 'outline';
+interface Props extends HTMLAttributes<HTMLElement> {
+    title: string;
+    description?: string;
+    tone?: Tone;
+    variant?: CTAVariant;
+    /** Side by side on wide screens instead of stacked and centred. */
+    inline?: boolean;
+    /** The buttons. */
+    actions?: Snippet;
+    children?: Snippet;
+}
+declare const CTASection: import("svelte").Component<Props, {}, "">;
+type CTASection = ReturnType<typeof CTASection>;
+export default CTASection;

package/dist/{components → styles/matte}/Calendar.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import {
-		addDays,
 		addMonths,
 		fromISO,
 		isOutOfRange,
@@ -10,9 +9,10 @@
 		toISO,
 		today,
 		weekdayNames
-	} from '../date.js';
-	import { useLocale } from '../locale.svelte.js';
-	import { focusRing, toneFill, toneRing, toneText, type Tone } from '../tones.js';
+	} 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 {
 		/** Bindable `YYYY-MM-DD`, or `''` for nothing selected. */
@@ -91,20 +91,10 @@
 	}
 
 	function onKeydown(event: KeyboardEvent) {
-		const moves: Record<string, () => Date> = {
-			ArrowLeft: () => addDays(focused, -1),
-			ArrowRight: () => addDays(focused, 1),
-			ArrowUp: () => addDays(focused, -7),
-			ArrowDown: () => addDays(focused, 7),
-			Home: () => addDays(focused, -((focused.getDay() - weekStart + 7) % 7)),
-			End: () => addDays(focused, 6 - ((focused.getDay() - weekStart + 7) % 7)),
-			PageUp: () => addMonths(focused, event.shiftKey ? -12 : -1),
-			PageDown: () => addMonths(focused, event.shiftKey ? 12 : 1)
-		};
-		const move = moves[event.key];
-		if (move) {
+		const next = calendarKeyMove(event.key, focused, weekStart, event.shiftKey);
+		if (next) {
 			event.preventDefault();
-			moveFocus(move());
+			moveFocus(next);
 			return;
 		}
 		if (event.key === 'Enter' || event.key === ' ') {

package/dist/{components → styles/matte}/Calendar.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type Tone } from '../tones.js';
+import { type Tone } from '../../core/tones.js';
 interface Props {
     /** Bindable `YYYY-MM-DD`, or `''` for nothing selected. */
     value?: string;

package/dist/{components → styles/matte}/Card.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { toneBorderLeft, toneHoverBorder, toneSurface, type Tone } from '../tones.js';
+	import { toneBorderLeft, toneHoverBorder, toneSurface, type Tone } from '../../core/tones.js';
 
 	export type CardVariant = 'outline' | 'filled' | 'tinted';
 

package/dist/{components → styles/matte}/Card.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-import { type Tone } from '../tones.js';
+import { type Tone } from '../../core/tones.js';
 export type CardVariant = 'outline' | 'filled' | 'tinted';
 interface Props extends HTMLAttributes<HTMLDivElement> {
     variant?: CardVariant;

package/dist/{components → styles/matte}/Checkbox.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLInputAttributes } from 'svelte/elements';
-	import { peerFocusRing, tonePeerChecked, tonePeerFocus, type Tone } from '../tones.js';
+	import { peerFocusRing, tonePeerChecked, tonePeerFocus, type Tone } from '../../core/tones.js';
 
 	interface Props extends Omit<HTMLInputAttributes, 'type' | 'size'> {
 		checked?: boolean;

package/dist/{components → styles/matte}/Checkbox.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { HTMLInputAttributes } from 'svelte/elements';
-import { type Tone } from '../tones.js';
+import { type Tone } from '../../core/tones.js';
 interface Props extends Omit<HTMLInputAttributes, 'type' | 'size'> {
     checked?: boolean;
     /** Renders the dash state — visual only, `checked` stays false. */

package/dist/{components → styles/matte}/CheckboxGroup.svelte

@@ -2,7 +2,7 @@
 	import type { Snippet } from 'svelte';
 	import type { HTMLFieldsetAttributes } from 'svelte/elements';
 	import Checkbox from './Checkbox.svelte';
-	import type { Tone } from '../tones.js';
+	import type { Tone } from '../../core/tones.js';
 
 	export interface CheckboxOption {
 		value: string;

package/dist/{components → styles/matte}/CheckboxGroup.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { HTMLFieldsetAttributes } from 'svelte/elements';
-import type { Tone } from '../tones.js';
+import type { Tone } from '../../core/tones.js';
 export interface CheckboxOption {
     value: string;
     label: string;

package/dist/{components → styles/matte}/Combobox.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
-	import { anchored } from '../actions/anchor.js';
-	import { clickOutside, portal } from '../actions/dismissable.js';
-	import { toneFocusWithinBorder, toneSoft, toneText, type Tone } from '../tones.js';
-	import { useLocale } from '../locale.svelte.js';
+	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';
 
 	export interface ComboboxOption {
 		value: string;
@@ -50,45 +51,35 @@
 
 	let open = $state(false);
 	let query = $state('');
-	let active = $state(0);
 	let wrapper: HTMLElement | null = $state(null);
 	let inputEl: HTMLInputElement | null = $state(null);
 	let listEl: HTMLElement | null = $state(null);
 
 	const selected = $derived(options.find((option) => option.value === value));
 
-	const matches = $derived.by(() => {
-		const needle = query.trim().toLowerCase();
-		if (!needle) return options;
-		return options.filter(
-			(option) =>
-				option.label.toLowerCase().includes(needle) ||
-				option.description?.toLowerCase().includes(needle)
-		);
-	});
+	const matches = $derived(
+		matchQuery(options, query, (option) => `${option.label} ${option.description ?? ''}`)
+	);
 
 	/** Options in render order, grouped when any option declares a `group`. */
-	const groups = $derived.by(() => {
-		const out: [string, ComboboxOption[]][] = [];
-		for (const option of matches) {
-			const key = option.group ?? '';
-			const bucket = out.find(([name]) => name === key);
-			if (bucket) bucket[1].push(option);
-			else out.push([key, [option]]);
-		}
-		return out;
-	});
-
+	const groups = $derived(groupItems(matches));
 	const flat = $derived(groups.flatMap(([, items]) => items));
 
+	const cursor = new ListCursor(() => flat);
+	const active = $derived(cursor.index);
+
+	/**
+	 * Set while we hand focus back to the field after a choice. Focusing fires
+	 * `focus` synchronously, and this field opens on focus — without the guard,
+	 * picking an option would immediately reopen the list it just closed.
+	 */
+	let restoring = false;
+
 	function openList() {
-		if (disabled || open) return;
+		if (disabled || open || restoring) return;
 		open = true;
 		query = '';
-		active = Math.max(
-			0,
-			flat.findIndex((option) => option.value === value)
-		);
+		cursor.reset((option) => option.value === value);
 	}
 
 	function choose(option: ComboboxOption) {
@@ -97,7 +88,9 @@
 		onchange?.(option.value);
 		open = false;
 		query = '';
+		restoring = true;
 		inputEl?.focus();
+		restoring = false;
 	}
 
 	function clear(event: MouseEvent) {
@@ -105,18 +98,14 @@
 		value = '';
 		query = '';
 		onchange?.('');
+		restoring = true;
 		inputEl?.focus();
+		restoring = false;
 	}
 
 	function move(step: number) {
-		if (flat.length === 0) return;
-		let next = active;
-		for (let i = 0; i < flat.length; i++) {
-			next = (next + step + flat.length) % flat.length;
-			if (!flat[next].disabled) break;
-		}
-		active = next;
-		listEl?.querySelector(`[data-index="${next}"]`)?.scrollIntoView({ block: 'nearest' });
+		cursor.move(step);
+		revealIndex(listEl, cursor.index);
 	}
 
 	function onKeydown(event: KeyboardEvent) {
@@ -131,9 +120,9 @@
 				if (open) move(-1);
 				break;
 			case 'Enter':
-				if (open && flat[active]) {
+				if (open && cursor.current) {
 					event.preventDefault();
-					choose(flat[active]);
+					choose(cursor.current);
 				}
 				break;
 			case 'Escape':
@@ -173,7 +162,7 @@
 		oninput={(event) => {
 			query = event.currentTarget.value;
 			open = true;
-			active = 0;
+			cursor.index = 0;
 		}}
 		onfocus={openList}
 		onkeydown={onKeydown}
@@ -239,7 +228,7 @@
 						aria-selected={option.value === value}
 						aria-disabled={option.disabled}
 						onclick={() => choose(option)}
-						onpointermove={() => (active = index)}
+						onpointermove={() => (cursor.index = index)}
 						class="flex cursor-pointer flex-col gap-0.5 px-3 py-2 text-[14px] transition-colors duration-100
 							{option.disabled ? 'pointer-events-none opacity-40' : ''}
 							{index === active ? toneSoft[tone] : 'text-text-secondary'}"

package/dist/{components → styles/matte}/Combobox.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type Tone } from '../tones.js';
+import { type Tone } from '../../core/tones.js';
 export interface ComboboxOption {
     value: string;
     label: string;

package/dist/{components → styles/matte}/CommandPalette.svelte

@@ -16,9 +16,11 @@
 </script>
 
 <script lang="ts">
-	import { focusTrap } from '../actions/dismissable.js';
-	import { useLocale } from '../locale.svelte.js';
-	import { toneSoft, type Tone } from '../tones.js';
+	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 Kbd from './Kbd.svelte';
 
 	interface Props {
@@ -53,40 +55,29 @@
 	let inputEl: HTMLInputElement | null = $state(null);
 	let listEl: HTMLElement | null = $state(null);
 	let query = $state('');
-	let active = $state(0);
 
-	const matches = $derived.by(() => {
-		const needle = query.trim().toLowerCase();
-		if (!needle) return items;
-		return items.filter((item) =>
-			`${item.label} ${item.description ?? ''} ${item.keywords ?? ''} ${item.group ?? ''}`
-				.toLowerCase()
-				.includes(needle)
-		);
-	});
-
-	const groups = $derived.by(() => {
-		const out: [string, CommandItem[]][] = [];
-		for (const item of matches) {
-			const key = item.group ?? '';
-			const bucket = out.find(([name]) => name === key);
-			if (bucket) bucket[1].push(item);
-			else out.push([key, [item]]);
-		}
-		return out;
-	});
+	const matches = $derived(
+		matchQuery(
+			items,
+			query,
+			(item) => `${item.label} ${item.description ?? ''} ${item.keywords ?? ''} ${item.group ?? ''}`
+		)
+	);
 
+	const groups = $derived(groupItems(matches));
 	const flat = $derived(groups.flatMap(([, group]) => group));
 
+	const cursor = new ListCursor(() => flat);
+	const active = $derived(cursor.index);
+
 	$effect(() => {
 		if (!dialog) return;
-		if (open && !dialog.open) {
-			dialog.showModal();
+		const wasOpen = dialog.open;
+		syncDialog(dialog, open);
+		if (open && !wasOpen) {
 			query = '';
-			active = 0;
+			cursor.reset();
 			queueMicrotask(() => inputEl?.focus());
-		} else if (!open && dialog.open) {
-			dialog.close();
 		}
 	});
 
@@ -110,14 +101,8 @@
 	}
 
 	function move(step: number) {
-		if (flat.length === 0) return;
-		let next = active;
-		for (let i = 0; i < flat.length; i++) {
-			next = (next + step + flat.length) % flat.length;
-			if (!flat[next].disabled) break;
-		}
-		active = next;
-		listEl?.querySelector(`[data-index="${next}"]`)?.scrollIntoView({ block: 'nearest' });
+		cursor.move(step);
+		revealIndex(listEl, cursor.index);
 	}
 
 	function onKeydown(event: KeyboardEvent) {
@@ -131,9 +116,9 @@
 				move(-1);
 				break;
 			case 'Enter':
-				if (flat[active]) {
+				if (cursor.current) {
 					event.preventDefault();
-					run(flat[active]);
+					run(cursor.current);
 				}
 				break;
 			case 'Escape':
@@ -166,7 +151,7 @@
 			<input
 				bind:this={inputEl}
 				bind:value={query}
-				oninput={() => (active = 0)}
+				oninput={() => cursor.reset()}
 				type="text"
 				autocomplete="off"
 				aria-label={placeholder ?? t.current.commandPlaceholder}
@@ -203,7 +188,7 @@
 							aria-selected={index === active}
 							aria-disabled={item.disabled}
 							onclick={() => run(item)}
-							onpointermove={() => (active = index)}
+							onpointermove={() => (cursor.index = index)}
 							class="flex cursor-pointer items-center gap-3 px-4 py-2.5 font-sans text-[14px] transition-colors duration-100
 								{item.disabled ? 'pointer-events-none opacity-40' : ''}
 								{index === active ? toneSoft[tone] : 'text-text-secondary'}"

package/dist/{components → styles/matte}/CommandPalette.svelte.d.ts

@@ -12,7 +12,7 @@ export interface CommandItem {
     disabled?: boolean;
     onselect?: () => void;
 }
-import { type Tone } from '../tones.js';
+import { type Tone } from '../../core/tones.js';
 interface Props {
     open?: boolean;
     items: CommandItem[];

package/dist/{components → styles/matte}/ConfirmDialog.svelte

@@ -2,8 +2,8 @@
 	import type { Snippet } from 'svelte';
 	import Button from './Button.svelte';
 	import Modal from './Modal.svelte';
-	import { useLocale } from '../locale.svelte.js';
-	import { toneSoft, type Tone } from '../tones.js';
+	import { useLocale } from '../../core/locale.svelte.js';
+	import { toneSoft, type Tone } from '../../core/tones.js';
 
 	interface Props {
 		open?: boolean;

package/dist/{components → styles/matte}/ConfirmDialog.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { Snippet } from 'svelte';
-import { type Tone } from '../tones.js';
+import { type Tone } from '../../core/tones.js';
 interface Props {
     open?: boolean;
     title: string;
@@ -17,6 +17,6 @@ interface Props {
     /** Extra content between the description and the buttons. */
     children?: Snippet;
 }
-declare const ConfirmDialog: import("svelte").Component<Props, {}, "loading" | "open">;
+declare const ConfirmDialog: import("svelte").Component<Props, {}, "open" | "loading">;
 type ConfirmDialog = ReturnType<typeof ConfirmDialog>;
 export default ConfirmDialog;

package/dist/{components → styles/matte}/ContextMenu.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import { anchored } from '../actions/anchor.js';
-	import { clickOutside, focusTrap, navigateList, portal } from '../actions/dismissable.js';
-	import { useLocale } from '../locale.svelte.js';
+	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. */
@@ -57,10 +58,7 @@
 			open = false;
 			return;
 		}
-		if (!menuEl) return;
-		navigateList(event, [
-			...menuEl.querySelectorAll<HTMLElement>('[role="menuitem"]:not([disabled])')
-		]);
+		navigateList(event, menuItems(menuEl));
 	}
 </script>
 

package/dist/{components → styles/matte}/DatePicker.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
-	import { anchored } from '../actions/anchor.js';
-	import { clickOutside, portal } from '../actions/dismissable.js';
-	import { formatISO, parseFormatted } from '../date.js';
-	import { useLocale } from '../locale.svelte.js';
-	import { toneFocusWithinBorder, type Tone } from '../tones.js';
+	import { anchored } from '../../core/actions/anchor.js';
+	import { clickOutside, portal } from '../../core/actions/dismissable.js';
+	import { dateHint } from '../../core/calendar.js';
+	import { formatISO, parseFormatted } from '../../core/date.js';
+	import { useLocale } from '../../core/locale.svelte.js';
+	import { toneFocusWithinBorder, type Tone } from '../../core/tones.js';
 	import Calendar from './Calendar.svelte';
 
 	interface Props {
@@ -53,12 +54,7 @@
 
 	/** While typing the field shows the raw text; otherwise the formatted value. */
 	const display = $derived(editing ? text : formatISO(value, t.current.dateFormat));
-	const hint = $derived(placeholder ?? formatHint());
-
-	function formatHint() {
-		const parts = { dmy: 'DD/MM/YYYY', mdy: 'MM/DD/YYYY', ymd: 'YYYY/MM/DD' };
-		return parts[t.current.dateFormat];
-	}
+	const hint = $derived(placeholder ?? dateHint(t.current.dateFormat));
 
 	function commit() {
 		editing = false;

package/dist/{components → styles/matte}/DatePicker.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type Tone } from '../tones.js';
+import { type Tone } from '../../core/tones.js';
 interface Props {
     /** Bindable `YYYY-MM-DD` — the same shape as `<input type="date">`. */
     value?: string;

package/dist/{components → styles/matte}/Drawer.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLDialogAttributes } from 'svelte/elements';
-	import { useLocale } from '../locale.svelte.js';
+	import { useLocale } from '../../core/locale.svelte.js';
+	import { isBackdropClick, syncDialog } from '../../core/dialog.svelte.js';
 
 	export type DrawerSide = 'left' | 'right' | 'top' | 'bottom';
 	export type DrawerSize = 'sm' | 'md' | 'lg' | 'full';
@@ -67,11 +68,7 @@
 		bottom: 'animate-[drawer-bottom_220ms_cubic-bezier(0.16,1,0.3,1)]'
 	};
 
-	$effect(() => {
-		if (!dialog) return;
-		if (open && !dialog.open) dialog.showModal();
-		else if (!open && dialog.open) dialog.close();
-	});
+	$effect(() => syncDialog(dialog, open));
 
 	function close() {
 		open = false;
@@ -83,7 +80,7 @@
 	bind:this={dialog}
 	onclose={close}
 	onclick={(event) => {
-		if (dismissible && event.target === dialog) close();
+		if (dismissible && isBackdropClick(event, dialog)) close();
 	}}
 	oncancel={(event) => {
 		if (!dismissible) event.preventDefault();

package/dist/{components → styles/matte}/Dropdown.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import { anchored, type Placement } from '../actions/anchor.js';
-	import { clickOutside, focusTrap, navigateList, portal } from '../actions/dismissable.js';
-	import { useLocale } from '../locale.svelte.js';
+	import { anchored, type Placement } from '../../core/actions/anchor.js';
+	import { clickOutside, focusTrap, navigateList, portal } from '../../core/actions/dismissable.js';
+	import { describeTrigger, menuItems, popupTrigger } from '../../core/trigger.js';
+	import { useLocale } from '../../core/locale.svelte.js';
 
 	interface Props {
 		/** The control that opens the menu — put a `Button` in here. */
@@ -41,34 +42,8 @@
 	let anchorEl: HTMLElement | null = $state(null);
 	let menuEl: HTMLElement | null = $state(null);
 
-	/**
-	 * Wires the consumer's own trigger element rather than wrapping it in another
-	 * button: the ARIA state belongs on the real control, not on our span.
-	 */
-	function triggerBehaviour(node: HTMLElement) {
-		const toggle = () => (open = !open);
-		const onKeydown = (event: KeyboardEvent) => {
-			if (event.key === 'ArrowDown' && !open) {
-				event.preventDefault();
-				open = true;
-			}
-		};
-		node.addEventListener('click', toggle);
-		node.addEventListener('keydown', onKeydown);
-		return {
-			destroy() {
-				node.removeEventListener('click', toggle);
-				node.removeEventListener('keydown', onKeydown);
-			}
-		};
-	}
-
-	$effect(() => {
-		const control = anchorEl?.querySelector('button, a, [role="button"]');
-		if (!control) return;
-		control.setAttribute('aria-haspopup', 'menu');
-		control.setAttribute('aria-expanded', String(open));
-	});
+	// The ARIA state goes on the consumer's own control, not on our wrapper.
+	$effect(() => describeTrigger(anchorEl, 'menu', open));
 
 	function onMenuKeydown(event: KeyboardEvent) {
 		if (event.key === 'Escape' || event.key === 'Tab') {
@@ -77,10 +52,7 @@
 			open = false;
 			return;
 		}
-		if (!menuEl) return;
-		navigateList(event, [
-			...menuEl.querySelectorAll<HTMLElement>('[role="menuitem"]:not([disabled])')
-		]);
+		navigateList(event, menuItems(menuEl));
 	}
 
 	function onMenuClick(event: MouseEvent) {
@@ -89,7 +61,17 @@
 	}
 </script>
 
-<span bind:this={anchorEl} use:triggerBehaviour class="inline-flex {triggerClass}">
+<span
+	bind:this={anchorEl}
+	use:popupTrigger={{
+		toggle: () => (open = !open),
+		open: () => (open = true),
+		close: () => (open = false),
+		arrowOpens: true,
+		isOpen: () => open
+	}}
+	class="inline-flex {triggerClass}"
+>
 	{@render trigger()}
 </span>
 

package/dist/{components → styles/matte}/Dropdown.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { Snippet } from 'svelte';
-import { type Placement } from '../actions/anchor.js';
+import { type Placement } from '../../core/actions/anchor.js';
 interface Props {
     /** The control that opens the menu — put a `Button` in here. */
     trigger: Snippet;