@nqmcreative/ui 0.1.0 → 0.2.0

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

@@ -9,10 +9,11 @@
 </script>
 
 <script lang="ts">
-	import { anchored } from '../actions/anchor.js';
-	import { clickOutside, portal } from '../actions/dismissable.js';
-	import { useLocale } from '../locale.svelte.js';
-	import { toneFocusWithinBorder, toneSoft, toneText, type Tone } from '../tones.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 { useLocale } from '../../core/locale.svelte.js';
+	import { toneFocusWithinBorder, toneSoft, toneText, type Tone } from '../../core/tones.js';
 
 	interface Props {
 		/** Bindable — the `value` of every chosen option. */
@@ -56,7 +57,6 @@
 
 	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);
@@ -67,29 +67,16 @@
 	const full = $derived(max > 0 && value.length >= max);
 	const collapsed = $derived(maxChips > 0 && chosen.length > maxChips);
 
-	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 groups = $derived.by(() => {
-		const out: [string, MultiSelectOption[]][] = [];
-		for (const option of matches) {
-			const key = option.group ?? '';
-			const bucket = out.find(([n]) => n === key);
-			if (bucket) bucket[1].push(option);
-			else out.push([key, [option]]);
-		}
-		return out;
-	});
+	const matches = $derived(
+		matchQuery(options, query, (option) => `${option.label} ${option.description ?? ''}`)
+	);
 
+	const groups = $derived(groupItems(matches));
 	const flat = $derived(groups.flatMap(([, items]) => items));
 
+	const cursor = new ListCursor(() => flat);
+	const active = $derived(cursor.index);
+
 	function toggle(option: MultiSelectOption) {
 		const has = value.includes(option.value);
 		if (option.disabled || (!has && full)) return;
@@ -103,14 +90,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) {
@@ -125,9 +106,9 @@
 				if (open) move(-1);
 				break;
 			case 'Enter':
-				if (open && flat[active]) {
+				if (open && cursor.current) {
 					event.preventDefault();
-					toggle(flat[active]);
+					toggle(cursor.current);
 				}
 				break;
 			case 'Backspace':
@@ -201,7 +182,7 @@
 		placeholder={chosen.length ? '' : (placeholder ?? t.current.comboboxPlaceholder)}
 		oninput={() => {
 			open = true;
-			active = 0;
+			cursor.index = 0;
 		}}
 		onfocus={() => (open = true)}
 		onkeydown={onKeydown}
@@ -263,7 +244,7 @@
 						aria-selected={checked}
 						aria-disabled={option.disabled || (full && !checked)}
 						onclick={() => toggle(option)}
-						onpointermove={() => (active = index)}
+						onpointermove={() => (cursor.index = index)}
 						class="flex cursor-pointer items-start gap-2.5 px-3 py-2 text-[14px] transition-colors duration-100
 							{option.disabled || (full && !checked) ? 'pointer-events-none opacity-40' : ''}
 							{index === active ? toneSoft[tone] : 'text-text-secondary'}"

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

@@ -5,7 +5,7 @@ export interface MultiSelectOption {
     disabled?: boolean;
     group?: string;
 }
-import { type Tone } from '../tones.js';
+import { type Tone } from '../../core/tones.js';
 interface Props {
     /** Bindable — the `value` of every chosen option. */
     value?: string[];

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

@@ -14,8 +14,8 @@
 
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import { useLocale } from '../locale.svelte.js';
-	import { focusRing, toneRing, toneText, type Tone } from '../tones.js';
+	import { useLocale } from '../../core/locale.svelte.js';
+	import { focusRing, toneRing, toneText, type Tone } from '../../core/tones.js';
 	import Drawer from './Drawer.svelte';
 	import Dropdown from './Dropdown.svelte';
 	import MenuItem from './MenuItem.svelte';

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

@@ -10,7 +10,7 @@ export interface NavItem {
     badge?: string | number;
 }
 import type { Snippet } from 'svelte';
-import { type Tone } from '../tones.js';
+import { type Tone } from '../../core/tones.js';
 interface Props {
     items?: NavItem[];
     /** Logo or wordmark on the left. */

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

@@ -1,7 +1,8 @@
 <script lang="ts">
 	import type { HTMLInputAttributes } from 'svelte/elements';
-	import { toneFocusWithinBorder, type Tone } from '../tones.js';
-	import { useLocale } from '../locale.svelte.js';
+	import { toneFocusWithinBorder, type Tone } from '../../core/tones.js';
+	import { useLocale } from '../../core/locale.svelte.js';
+	import { clampToStep } from '../../core/number.js';
 
 	interface Props extends Omit<HTMLInputAttributes, 'size' | 'type' | 'value' | 'min' | 'max'> {
 		value?: number;
@@ -29,12 +30,7 @@
 
 	const t = useLocale();
 
-	const decimals = $derived((String(step).split('.')[1] ?? '').length);
-
-	function clamp(next: number) {
-		if (Number.isNaN(next)) return min === -Infinity ? 0 : min;
-		return Number(Math.min(max, Math.max(min, next)).toFixed(decimals));
-	}
+	const clamp = (next: number) => clampToStep(next, min, max, step);
 
 	function nudge(direction: 1 | -1) {
 		value = clamp(value + direction * step);

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

@@ -1,5 +1,5 @@
 import type { HTMLInputAttributes } from 'svelte/elements';
-import { type Tone } from '../tones.js';
+import { type Tone } from '../../core/tones.js';
 interface Props extends Omit<HTMLInputAttributes, 'size' | 'type' | 'value' | 'min' | 'max'> {
     value?: number;
     min?: number;

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

@@ -1,7 +1,8 @@
 <script lang="ts">
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { focusRing, toneRing, toneSolid, type Tone } from '../tones.js';
-	import { useLocale } from '../locale.svelte.js';
+	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'> {
 		/** Bindable, 1-based. */
@@ -26,19 +27,7 @@
 
 	const t = useLocale();
 
-	const pages = $derived.by<(number | '…')[]>(() => {
-		if (total <= 5 + siblings * 2) {
-			return Array.from({ length: total }, (_, i) => i + 1);
-		}
-		const start = Math.max(2, page - siblings);
-		const end = Math.min(total - 1, page + siblings);
-		const out: (number | '…')[] = [1];
-		if (start > 2) out.push('…');
-		for (let i = start; i <= end; i++) out.push(i);
-		if (end < total - 1) out.push('…');
-		out.push(total);
-		return out;
-	});
+	const pages = $derived(pageRange(page, total, siblings));
 
 	function go(next: number) {
 		const clamped = Math.min(total, Math.max(1, next));

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

@@ -1,5 +1,5 @@
 import type { HTMLAttributes } from 'svelte/elements';
-import { type Tone } from '../tones.js';
+import { type Tone } from '../../core/tones.js';
 interface Props extends Omit<HTMLAttributes<HTMLElement>, 'onchange'> {
     /** Bindable, 1-based. */
     page?: number;

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

@@ -1,7 +1,8 @@
 <script lang="ts">
 	import type { HTMLInputAttributes } from 'svelte/elements';
-	import { toneFocusWithinBorder, type Tone } from '../tones.js';
-	import { useLocale } from '../locale.svelte.js';
+	import { toneFocusWithinBorder, type Tone } from '../../core/tones.js';
+	import { useLocale } from '../../core/locale.svelte.js';
+	import { passwordScore } from '../../core/password.js';
 
 	interface Props extends Omit<HTMLInputAttributes, 'size' | 'type'> {
 		value?: string;
@@ -25,17 +26,7 @@
 
 	let visible = $state(false);
 
-	/** Deliberately simple: length plus character variety, four buckets. */
-	const score = $derived.by(() => {
-		if (!value) return 0;
-		let points = 0;
-		if (value.length >= 8) points++;
-		if (value.length >= 12) points++;
-		if (/[a-z]/.test(value) && /[A-Z]/.test(value)) points++;
-		if (/\d/.test(value)) points++;
-		if (/[^\w\s]/.test(value)) points++;
-		return Math.min(4, points);
-	});
+	const score = $derived(passwordScore(value));
 
 	const bars = ['bg-danger', 'bg-danger', 'bg-warning', 'bg-info', 'bg-success'];
 	const texts = ['text-danger', 'text-danger', 'text-warning', 'text-info', 'text-success'];

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

@@ -1,5 +1,5 @@
 import type { HTMLInputAttributes } from 'svelte/elements';
-import { type Tone } from '../tones.js';
+import { type Tone } from '../../core/tones.js';
 interface Props extends Omit<HTMLInputAttributes, 'size' | 'type'> {
     value?: string;
     tone?: Tone;

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

@@ -1,7 +1,8 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import { anchored, type Placement } from '../actions/anchor.js';
-	import { clickOutside, focusTrap, portal } from '../actions/dismissable.js';
+	import { anchored, type Placement } from '../../core/actions/anchor.js';
+	import { clickOutside, focusTrap, portal } from '../../core/actions/dismissable.js';
+	import { HOVER_GRACE, describeTrigger, popupTrigger } from '../../core/trigger.js';
 
 	interface Props {
 		trigger: Snippet;
@@ -32,45 +33,10 @@
 	}: Props = $props();
 
 	let anchorEl: HTMLElement | null = $state(null);
+	/** Held so the panel itself can cancel the hover close it inherited. */
 	let closeTimer: ReturnType<typeof setTimeout> | undefined;
 
-	function triggerBehaviour(node: HTMLElement) {
-		const toggle = () => (open = !open);
-		const show = () => {
-			clearTimeout(closeTimer);
-			open = true;
-		};
-		const hide = () => {
-			closeTimer = setTimeout(() => (open = false), 120);
-		};
-
-		if (on === 'click') {
-			node.addEventListener('click', toggle);
-		} else {
-			node.addEventListener('pointerenter', show);
-			node.addEventListener('pointerleave', hide);
-			node.addEventListener('focusin', show);
-			node.addEventListener('focusout', hide);
-		}
-
-		return {
-			destroy() {
-				clearTimeout(closeTimer);
-				node.removeEventListener('click', toggle);
-				node.removeEventListener('pointerenter', show);
-				node.removeEventListener('pointerleave', hide);
-				node.removeEventListener('focusin', show);
-				node.removeEventListener('focusout', hide);
-			}
-		};
-	}
-
-	$effect(() => {
-		const control = anchorEl?.querySelector('button, a, [role="button"]');
-		if (!control) return;
-		control.setAttribute('aria-haspopup', 'dialog');
-		control.setAttribute('aria-expanded', String(open));
-	});
+	$effect(() => describeTrigger(anchorEl, 'dialog', open));
 
 	function onKeydown(event: KeyboardEvent) {
 		if (event.key !== 'Escape') return;
@@ -80,7 +46,16 @@
 	}
 </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),
+		on
+	}}
+	class="inline-flex {triggerClass}"
+>
 	{@render trigger()}
 </span>
 
@@ -97,7 +72,7 @@
 		onkeydown={onKeydown}
 		onpointerenter={() => clearTimeout(closeTimer)}
 		onpointerleave={() => {
-			if (on === 'hover') closeTimer = setTimeout(() => (open = false), 120);
+			if (on === 'hover') closeTimer = setTimeout(() => (open = false), HOVER_GRACE);
 		}}
 		role="dialog"
 		aria-label={title}

package/dist/{components → styles/matte}/Popover.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 {
     trigger: Snippet;
     children: Snippet;

package/dist/styles/matte/PricingCard.svelte

@@ -0,0 +1,107 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { toneBorder, toneFill, toneSoft, toneText, type Tone } from '../../core/tones.js';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		name: string;
+		/** Already formatted — the component does not do currency. */
+		price: string;
+		/** `/ month`, `per seat`, whatever follows the figure. */
+		period?: string;
+		description?: string;
+		/** One line each. Rendered with a tick. */
+		features?: string[];
+		/** Pill in the top corner, e.g. "Most popular". */
+		badge?: string;
+		/** Thicker border and a tinted header — for the plan you want chosen. */
+		featured?: boolean;
+		tone?: Tone;
+		/** The button. */
+		action?: Snippet;
+		/** Extra content under the feature list. */
+		children?: Snippet;
+	}
+
+	let {
+		name,
+		price,
+		period,
+		description,
+		features = [],
+		badge,
+		featured = false,
+		tone = 'brand',
+		action,
+		class: className = '',
+		children,
+		...rest
+	}: Props = $props();
+</script>
+
+<div
+	class="flex flex-col bg-bg {featured
+		? `border-2 ${toneBorder[tone]}`
+		: 'border border-hairline'} {className}"
+	{...rest}
+>
+	<div class="flex flex-col gap-4 p-6 {featured ? toneSoft[tone] : ''}">
+		<div class="flex items-start justify-between gap-3">
+			<h3 class="font-heading text-lg font-medium tracking-tight {featured ? '' : 'text-text'}">
+				{name}
+			</h3>
+			{#if badge}
+				<span
+					class="shrink-0 rounded-full px-2.5 py-1 font-mono text-[10px] tracking-wide {featured
+						? `${toneFill[tone]} text-text-inverse`
+						: toneSoft[tone]}"
+				>
+					{badge}
+				</span>
+			{/if}
+		</div>
+
+		<div class="flex items-baseline gap-1.5">
+			<span
+				class="font-heading text-4xl font-medium tracking-tight {featured
+					? toneText[tone]
+					: 'text-text'}"
+			>
+				{price}
+			</span>
+			{#if period}
+				<span class="font-sans text-sm text-text-muted">{period}</span>
+			{/if}
+		</div>
+
+		{#if description}
+			<p class="font-sans text-sm leading-relaxed text-text-secondary">{description}</p>
+		{/if}
+	</div>
+
+	{#if features.length}
+		<ul class="flex flex-1 flex-col gap-3 border-t border-hairline p-6">
+			{#each features as feature (feature)}
+				<li class="flex items-start gap-3 font-sans text-sm text-text-secondary">
+					<svg
+						class="mt-0.5 size-4 shrink-0 {toneText[tone]}"
+						viewBox="0 0 16 16"
+						fill="none"
+						aria-hidden="true"
+					>
+						<path d="m3 8 3.2 3.2L13 4.4" stroke="currentColor" stroke-width="1.6" />
+					</svg>
+					<span class="leading-snug">{feature}</span>
+				</li>
+			{/each}
+		</ul>
+	{/if}
+
+	{#if children}
+		<div class="px-6 pb-2">{@render children()}</div>
+	{/if}
+
+	{#if action}
+		<div class="p-6 pt-2">{@render action()}</div>
+	{/if}
+</div>

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

@@ -0,0 +1,25 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type Tone } from '../../core/tones.js';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    name: string;
+    /** Already formatted — the component does not do currency. */
+    price: string;
+    /** `/ month`, `per seat`, whatever follows the figure. */
+    period?: string;
+    description?: string;
+    /** One line each. Rendered with a tick. */
+    features?: string[];
+    /** Pill in the top corner, e.g. "Most popular". */
+    badge?: string;
+    /** Thicker border and a tinted header — for the plan you want chosen. */
+    featured?: boolean;
+    tone?: Tone;
+    /** The button. */
+    action?: Snippet;
+    /** Extra content under the feature list. */
+    children?: Snippet;
+}
+declare const PricingCard: import("svelte").Component<Props, {}, "">;
+type PricingCard = ReturnType<typeof PricingCard>;
+export default PricingCard;

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

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { toneFill, type Tone } from '../tones.js';
+	import { toneFill, type Tone } from '../../core/tones.js';
+	import { percentOf } from '../../core/number.js';
 
 	export type ProgressSize = 'sm' | 'md' | 'lg';
 
@@ -29,7 +30,7 @@
 	}: Props = $props();
 
 	const sizes: Record<ProgressSize, string> = { sm: 'h-1', md: 'h-2', lg: 'h-3' };
-	const pct = $derived(Math.min(100, Math.max(0, (value / max) * 100)));
+	const pct = $derived(percentOf(value, 0, max));
 </script>
 
 <div class="flex w-full flex-col gap-2 {className}" {...rest}>

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

@@ -1,5 +1,5 @@
 import type { HTMLAttributes } from 'svelte/elements';
-import { type Tone } from '../tones.js';
+import { type Tone } from '../../core/tones.js';
 export type ProgressSize = 'sm' | 'md' | 'lg';
 interface Props extends HTMLAttributes<HTMLDivElement> {
     value?: number;

package/dist/{components → styles/matte}/Radio.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'> {
 		/** Bind the same variable across a set of radios. */

package/dist/{components → styles/matte}/Radio.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'> {
     /** Bind the same variable across a set of radios. */
     group?: string;

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

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

package/dist/{components → styles/matte}/RadioGroup.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 RadioOption {
     value: string;
     label: string;

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

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { focusRing, toneRing, toneSoft, type Tone } from '../tones.js';
+	import { focusRing, toneRing, toneSoft, type Tone } from '../../core/tones.js';
 
 	export interface SegmentOption {
 		value: string;

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

@@ -1,5 +1,5 @@
 import type { HTMLAttributes } from 'svelte/elements';
-import { type Tone } from '../tones.js';
+import { type Tone } from '../../core/tones.js';
 export interface SegmentOption {
     value: string;
     label: string;

package/dist/{components → 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 '../tones.js';
+	import { toneFocusBorder, type Tone } from '../../core/tones.js';
 
 	export interface SelectOption {
 		value: string;

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

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

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

@@ -21,8 +21,8 @@
 
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import { useLocale } from '../locale.svelte.js';
-	import { focusRing, toneRing, toneSoft, type Tone } from '../tones.js';
+	import { useLocale } from '../../core/locale.svelte.js';
+	import { focusRing, toneRing, toneSoft, type Tone } from '../../core/tones.js';
 
 	interface Props {
 		sections: SidebarSection[];

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

@@ -16,7 +16,7 @@ export interface SidebarSection {
     items: SidebarItem[];
 }
 import type { Snippet } from 'svelte';
-import { type Tone } from '../tones.js';
+import { type Tone } from '../../core/tones.js';
 interface Props {
     sections: SidebarSection[];
     /** Bindable — the `id` (or `href`) of the current item. */

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

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { HTMLInputAttributes } from 'svelte/elements';
-	import { toneText, type Tone } from '../tones.js';
+	import { toneText, type Tone } from '../../core/tones.js';
+	import { percentOf } from '../../core/number.js';
 
 	interface Props extends Omit<HTMLInputAttributes, 'size' | 'type' | 'value' | 'min' | 'max'> {
 		value?: number;
@@ -32,7 +33,7 @@
 		...rest
 	}: Props = $props();
 
-	const pct = $derived(Math.min(100, Math.max(0, ((value - min) / (max - min)) * 100)));
+	const pct = $derived(percentOf(value, min, max));
 
 	// The filled part of the track and the thumb both paint with `currentColor`,
 	// so a single tone class on the input drives every vendor pseudo-element.

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

@@ -1,5 +1,5 @@
 import type { HTMLInputAttributes } from 'svelte/elements';
-import { type Tone } from '../tones.js';
+import { type Tone } from '../../core/tones.js';
 interface Props extends Omit<HTMLInputAttributes, 'size' | 'type' | 'value' | 'min' | 'max'> {
     value?: number;
     min?: number;

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { toneText, type Tone } from '../tones.js';
-	import { useLocale } from '../locale.svelte.js';
+	import { toneText, type Tone } from '../../core/tones.js';
+	import { useLocale } from '../../core/locale.svelte.js';
 
 	export type SpinnerSize = 'xs' | 'sm' | 'md' | 'lg';
 

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

@@ -1,5 +1,5 @@
 import type { HTMLAttributes } from 'svelte/elements';
-import { type Tone } from '../tones.js';
+import { type Tone } from '../../core/tones.js';
 export type SpinnerSize = 'xs' | 'sm' | 'md' | 'lg';
 interface Props extends HTMLAttributes<HTMLSpanElement> {
     size?: SpinnerSize;