@nqmcreative/ui 0.1.0

package/dist/actions/dismissable.js

@@ -0,0 +1,147 @@
+/**
+ * Behaviour shared by every dismissable overlay: click outside, Escape, focus
+ * containment, and returning focus where it came from.
+ *
+ * They live in one file because overlays always need them together, and the
+ * ordering between them matters — Escape must beat click-outside, and focus is
+ * only returned once, on teardown.
+ */
+export function clickOutside(node, options = {}) {
+    let opts = options;
+    const handle = (event) => {
+        if (opts.enabled === false)
+            return;
+        const target = event.target;
+        if (!target || node.contains(target))
+            return;
+        if (opts.ignore?.some((el) => el?.contains(target)))
+            return;
+        opts.onoutside?.();
+    };
+    // `pointerdown` rather than `click`, so a press that starts outside and ends
+    // inside (a drag off a scrollbar, say) still counts as leaving.
+    document.addEventListener('pointerdown', handle, true);
+    return {
+        update(next) {
+            opts = next;
+        },
+        destroy() {
+            document.removeEventListener('pointerdown', handle, true);
+        }
+    };
+}
+const FOCUSABLE = [
+    'a[href]',
+    'button:not([disabled])',
+    'input:not([disabled]):not([type="hidden"])',
+    'select:not([disabled])',
+    'textarea:not([disabled])',
+    '[tabindex]:not([tabindex="-1"])'
+].join(',');
+/** Every focusable descendant, in tab order, skipping hidden ones. */
+export function focusable(container) {
+    return [...container.querySelectorAll(FOCUSABLE)].filter((el) => el.offsetWidth > 0 || el.offsetHeight > 0 || el === document.activeElement);
+}
+export function focusTrap(node, options = {}) {
+    let opts = { autofocus: true, restore: true, enabled: true, ...options };
+    const previous = document.activeElement;
+    const handle = (event) => {
+        if (!opts.enabled || event.key !== 'Tab')
+            return;
+        const items = focusable(node);
+        if (items.length === 0) {
+            event.preventDefault();
+            return;
+        }
+        const first = items[0];
+        const last = items[items.length - 1];
+        const active = document.activeElement;
+        if (event.shiftKey && (active === first || !node.contains(active))) {
+            event.preventDefault();
+            last.focus();
+        }
+        else if (!event.shiftKey && active === last) {
+            event.preventDefault();
+            first.focus();
+        }
+    };
+    if (opts.enabled && opts.autofocus) {
+        queueMicrotask(() => {
+            if (node.contains(document.activeElement))
+                return;
+            (focusable(node)[0] ?? node).focus();
+        });
+    }
+    node.addEventListener('keydown', handle);
+    return {
+        update(next) {
+            opts = { autofocus: true, restore: true, enabled: true, ...next };
+        },
+        destroy() {
+            node.removeEventListener('keydown', handle);
+            if (opts.restore && previous?.isConnected)
+                previous.focus();
+        }
+    };
+}
+/** Moves the node to `document.body` (or any selector/element) on mount. */
+export function portal(node, target = 'body') {
+    let mount = null;
+    const attach = (to) => {
+        mount = typeof to === 'string' ? document.querySelector(to) : to;
+        mount?.appendChild(node);
+    };
+    attach(target);
+    return {
+        update: attach,
+        destroy() {
+            node.remove();
+        }
+    };
+}
+/**
+ * Roving focus for menus and listboxes: Arrow keys move, Home/End jump,
+ * printable characters type-ahead. Returns whether the key was handled.
+ */
+export function navigateList(event, items, options = {}) {
+    if (items.length === 0)
+        return false;
+    const loop = options.loop ?? true;
+    const index = items.indexOf(document.activeElement);
+    const focusAt = (next) => {
+        const clamped = loop
+            ? (next + items.length) % items.length
+            : Math.min(Math.max(0, next), items.length - 1);
+        items[clamped]?.focus();
+    };
+    switch (event.key) {
+        case 'ArrowDown':
+            event.preventDefault();
+            focusAt(index + 1);
+            return true;
+        case 'ArrowUp':
+            event.preventDefault();
+            focusAt(index - 1);
+            return true;
+        case 'Home':
+            event.preventDefault();
+            focusAt(0);
+            return true;
+        case 'End':
+            event.preventDefault();
+            focusAt(items.length - 1);
+            return true;
+    }
+    if (event.key.length === 1 && /\S/.test(event.key) && !event.ctrlKey && !event.metaKey) {
+        const needle = event.key.toLowerCase();
+        const from = index + 1;
+        const ordered = [...items.slice(from), ...items.slice(0, from)];
+        const match = ordered.find((el) => el.textContent?.trim().toLowerCase().startsWith(needle));
+        if (match) {
+            event.preventDefault();
+            match.focus();
+            return true;
+        }
+    }
+    return false;
+}

package/dist/components/Accordion.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		children: Snippet;
+	}
+
+	let { class: className = '', children, ...rest }: Props = $props();
+</script>
+
+<div class="flex flex-col border-t border-hairline {className}" {...rest}>
+	{@render children()}
+</div>

package/dist/components/Accordion.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    children: Snippet;
+}
+declare const Accordion: import("svelte").Component<Props, {}, "">;
+type Accordion = ReturnType<typeof Accordion>;
+export default Accordion;

package/dist/components/AccordionItem.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { toneText, type Tone } from '../tones.js';
+
+	interface Props extends HTMLAttributes<HTMLDetailsElement> {
+		title: string;
+		open?: boolean;
+		tone?: Tone;
+		/** Short text on the right of the summary row. */
+		meta?: string;
+		children: Snippet;
+	}
+
+	let {
+		title,
+		open = $bindable(false),
+		tone = 'brand',
+		meta,
+		class: className = '',
+		children,
+		...rest
+	}: Props = $props();
+</script>
+
+<details bind:open class="group border-b border-hairline {className}" {...rest}>
+	<summary
+		class="flex cursor-pointer list-none items-center gap-4 py-4 font-sans text-[15px] text-text transition-colors duration-150 ease-brand-out select-none hover:text-text-secondary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current [&::-webkit-details-marker]:hidden"
+	>
+		<span class="flex-1 font-medium">{title}</span>
+		{#if meta}<span class="font-mono text-xs text-text-muted">{meta}</span>{/if}
+		<svg
+			class="size-4 shrink-0 transition-transform duration-200 ease-brand-out group-open:rotate-45 {toneText[
+				tone
+			]}"
+			viewBox="0 0 16 16"
+			fill="none"
+			aria-hidden="true"
+		>
+			<path d="M8 3v10M3 8h10" stroke="currentColor" stroke-width="1.5" />
+		</svg>
+	</summary>
+	<div class="pb-5 font-sans text-[15px] leading-relaxed text-text-secondary">
+		{@render children()}
+	</div>
+</details>

package/dist/components/AccordionItem.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type Tone } from '../tones.js';
+interface Props extends HTMLAttributes<HTMLDetailsElement> {
+    title: string;
+    open?: boolean;
+    tone?: Tone;
+    /** Short text on the right of the summary row. */
+    meta?: string;
+    children: Snippet;
+}
+declare const AccordionItem: import("svelte").Component<Props, {}, "open">;
+type AccordionItem = ReturnType<typeof AccordionItem>;
+export default AccordionItem;

package/dist/components/Alert.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { toneBorder, toneBorderSoft, toneSurface, toneText, type Tone } from '../tones.js';
+	import { useLocale } from '../locale.svelte.js';
+
+	export type AlertVariant = 'soft' | 'outline' | 'accent';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		tone?: Tone;
+		variant?: AlertVariant;
+		title?: string;
+		/** Shows a close button and fires `ondismiss`. */
+		dismissible?: boolean;
+		ondismiss?: () => void;
+		/** Replaces the built-in status glyph. */
+		icon?: Snippet;
+		children?: Snippet;
+	}
+
+	let {
+		tone = 'info',
+		variant = 'soft',
+		title,
+		dismissible = false,
+		ondismiss,
+		icon,
+		class: className = '',
+		children,
+		...rest
+	}: Props = $props();
+
+	const t = useLocale();
+	let open = $state(true);
+
+	const variants = $derived({
+		soft: `${toneSurface[tone]} border ${toneBorderSoft[tone]}`,
+		outline: `bg-bg border ${toneBorderSoft[tone]}`,
+		accent: `${toneSurface[tone]} border-l-2 ${toneBorder[tone]}`
+	});
+
+	function dismiss() {
+		open = false;
+		ondismiss?.();
+	}
+</script>
+
+{#if open}
+	<div
+		role={tone === 'danger' ? 'alert' : 'status'}
+		class="flex items-start gap-3 p-4 font-sans {variants[variant]} {className}"
+		{...rest}
+	>
+		<span class="mt-0.5 shrink-0 {toneText[tone]}">
+			{#if icon}
+				{@render icon()}
+			{:else}
+				<svg class="size-4" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+					<circle cx="8" cy="8" r="7" stroke="currentColor" stroke-width="1.5" />
+					<path d="M8 4.5v4.5" stroke="currentColor" stroke-width="1.5" />
+					<circle cx="8" cy="11.5" r="0.9" fill="currentColor" />
+				</svg>
+			{/if}
+		</span>
+
+		<div class="flex min-w-0 flex-1 flex-col gap-1">
+			{#if title}
+				<p class="text-[15px] leading-snug font-medium {toneText[tone]}">{title}</p>
+			{/if}
+			{#if children}
+				<div class="text-sm leading-relaxed text-text-secondary">{@render children()}</div>
+			{/if}
+		</div>
+
+		{#if dismissible}
+			<button
+				type="button"
+				onclick={dismiss}
+				aria-label={t.current.dismiss}
+				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-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}
+	</div>
+{/if}

package/dist/components/Alert.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type Tone } from '../tones.js';
+export type AlertVariant = 'soft' | 'outline' | 'accent';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    tone?: Tone;
+    variant?: AlertVariant;
+    title?: string;
+    /** Shows a close button and fires `ondismiss`. */
+    dismissible?: boolean;
+    ondismiss?: () => void;
+    /** Replaces the built-in status glyph. */
+    icon?: Snippet;
+    children?: Snippet;
+}
+declare const Alert: import("svelte").Component<Props, {}, "">;
+type Alert = ReturnType<typeof Alert>;
+export default Alert;

package/dist/components/Avatar.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { toneSoft, type Tone } from '../tones.js';
+
+	export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+	interface Props extends HTMLAttributes<HTMLSpanElement> {
+		src?: string;
+		alt?: string;
+		/** Falls back to the initials of this name when there is no `src`. */
+		name?: string;
+		size?: AvatarSize;
+		tone?: Tone;
+		/** Square instead of the default circle. */
+		squared?: boolean;
+	}
+
+	let {
+		src,
+		alt,
+		name = '',
+		size = 'md',
+		tone = 'brand',
+		squared = false,
+		class: className = '',
+		...rest
+	}: Props = $props();
+
+	const sizes: Record<AvatarSize, string> = {
+		xs: 'size-6 text-[10px]',
+		sm: 'size-8 text-xs',
+		md: 'size-10 text-sm',
+		lg: 'size-12 text-base',
+		xl: 'size-16 text-lg'
+	};
+
+	const initials = $derived(
+		name
+			.trim()
+			.split(/\s+/)
+			.slice(0, 2)
+			.map((part) => part[0] ?? '')
+			.join('')
+			.toUpperCase()
+	);
+</script>
+
+<span
+	class="inline-flex shrink-0 items-center justify-center overflow-hidden font-mono font-medium select-none
+		{squared ? '' : 'rounded-full'} {sizes[size]} {src ? 'bg-bg-inset' : toneSoft[tone]} {className}"
+	{...rest}
+>
+	{#if src}
+		<img {src} alt={alt ?? name} class="size-full object-cover" />
+	{:else}
+		{initials}
+	{/if}
+</span>

package/dist/components/Avatar.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type Tone } from '../tones.js';
+export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+interface Props extends HTMLAttributes<HTMLSpanElement> {
+    src?: string;
+    alt?: string;
+    /** Falls back to the initials of this name when there is no `src`. */
+    name?: string;
+    size?: AvatarSize;
+    tone?: Tone;
+    /** Square instead of the default circle. */
+    squared?: boolean;
+}
+declare const Avatar: import("svelte").Component<Props, {}, "">;
+type Avatar = ReturnType<typeof Avatar>;
+export default Avatar;

package/dist/components/AvatarGroup.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		children: Snippet;
+	}
+
+	let { class: className = '', children, ...rest }: Props = $props();
+</script>
+
+<div
+	class="flex items-center *:-ml-2 *:ring-2 *:ring-bg [&>*:first-child]:ml-0 {className}"
+	{...rest}
+>
+	{@render children()}
+</div>

package/dist/components/AvatarGroup.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    children: Snippet;
+}
+declare const AvatarGroup: import("svelte").Component<Props, {}, "">;
+type AvatarGroup = ReturnType<typeof AvatarGroup>;
+export default AvatarGroup;

package/dist/components/Badge.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { toneBorderSoft, toneFill, toneSoft, toneSolid, toneText, type Tone } from '../tones.js';
+
+	/** @deprecated use `Tone` — kept so existing `tone="brand" | "neutral"` still type-checks. */
+	export type BadgeTone = Tone;
+	export type BadgeVariant = 'soft' | 'solid' | 'outline';
+	export type BadgeSize = 'sm' | 'md';
+
+	interface Props extends HTMLAttributes<HTMLSpanElement> {
+		tone?: Tone;
+		variant?: BadgeVariant;
+		size?: BadgeSize;
+		/** Small filled circle before the label. */
+		dot?: boolean;
+		children: Snippet;
+	}
+
+	let {
+		tone = 'brand',
+		variant = 'soft',
+		size = 'md',
+		dot = false,
+		class: className = '',
+		children,
+		...rest
+	}: Props = $props();
+
+	const variants: Record<BadgeVariant, string> = $derived({
+		soft: toneSoft[tone],
+		solid: toneSolid[tone],
+		outline: `border ${toneBorderSoft[tone]} ${toneText[tone]} bg-bg`
+	});
+
+	const sizes: Record<BadgeSize, string> = {
+		sm: 'px-2.5 py-0.5 text-[10px]',
+		md: 'px-3 py-1 text-xs'
+	};
+</script>
+
+<span
+	class="inline-flex items-center gap-1.5 rounded-full font-mono font-medium tracking-wide
+		{variants[variant]} {sizes[size]} {className}"
+	{...rest}
+>
+	{#if dot}
+		<span
+			class="size-1.5 shrink-0 rounded-full {variant === 'solid' ? 'bg-current' : toneFill[tone]}"
+		></span>
+	{/if}
+	{@render children()}
+</span>

package/dist/components/Badge.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type Tone } from '../tones.js';
+/** @deprecated use `Tone` — kept so existing `tone="brand" | "neutral"` still type-checks. */
+export type BadgeTone = Tone;
+export type BadgeVariant = 'soft' | 'solid' | 'outline';
+export type BadgeSize = 'sm' | 'md';
+interface Props extends HTMLAttributes<HTMLSpanElement> {
+    tone?: Tone;
+    variant?: BadgeVariant;
+    size?: BadgeSize;
+    /** Small filled circle before the label. */
+    dot?: boolean;
+    children: Snippet;
+}
+declare const Badge: import("svelte").Component<Props, {}, "">;
+type Badge = ReturnType<typeof Badge>;
+export default Badge;

package/dist/components/Breadcrumb.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { toneHoverText, type Tone } from '../tones.js';
+	import { useLocale } from '../locale.svelte.js';
+
+	export interface BreadcrumbItem {
+		label: string;
+		href?: string;
+	}
+
+	interface Props extends HTMLAttributes<HTMLElement> {
+		items: BreadcrumbItem[];
+		separator?: string;
+		tone?: Tone;
+	}
+
+	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}>
+	<ol class="flex flex-wrap items-center gap-2">
+		{#each items as item, i (item.label)}
+			<li class="flex items-center gap-2">
+				{#if i > 0}
+					<span class="text-text-muted select-none" aria-hidden="true">{separator}</span>
+				{/if}
+				{#if item.href && i < items.length - 1}
+					<a
+						href={item.href}
+						class="text-text-secondary transition-colors duration-150 ease-brand-out {toneHoverText[
+							tone
+						]}"
+					>
+						{item.label}
+					</a>
+				{:else}
+					<span class="text-text" aria-current={i === items.length - 1 ? 'page' : undefined}>
+						{item.label}
+					</span>
+				{/if}
+			</li>
+		{/each}
+	</ol>
+</nav>

package/dist/components/Breadcrumb.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type Tone } from '../tones.js';
+export interface BreadcrumbItem {
+    label: string;
+    href?: string;
+}
+interface Props extends HTMLAttributes<HTMLElement> {
+    items: BreadcrumbItem[];
+    separator?: string;
+    tone?: Tone;
+}
+declare const Breadcrumb: import("svelte").Component<Props, {}, "">;
+type Breadcrumb = ReturnType<typeof Breadcrumb>;
+export default Breadcrumb;

package/dist/components/Button.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import Spinner from './Spinner.svelte';
+	import {
+		focusRing,
+		toneBorder,
+		toneRing,
+		toneSoft,
+		toneSoftHover,
+		toneSolid,
+		toneSolidHover,
+		toneText,
+		type Tone
+	} from '../tones.js';
+
+	export type ButtonVariant = 'solid' | 'soft' | 'outline' | 'ghost' | 'link' | 'primary';
+	export type ButtonSize = 'sm' | 'md' | 'lg' | 'xl';
+
+	interface Props extends HTMLButtonAttributes {
+		variant?: ButtonVariant;
+		tone?: Tone;
+		size?: ButtonSize;
+		/** Renders an `<a>` instead of a `<button>`. */
+		href?: string;
+		target?: string;
+		rel?: string;
+		loading?: boolean;
+		/** Stretch to the container's full width. */
+		block?: boolean;
+		children: Snippet;
+	}
+
+	let {
+		variant = 'solid',
+		tone = 'brand',
+		size = 'md',
+		href,
+		loading = false,
+		block = false,
+		disabled = false,
+		type = 'button',
+		class: className = '',
+		children,
+		...rest
+	}: Props = $props();
+
+	const base =
+		'inline-flex items-center justify-center gap-2 border font-sans font-medium whitespace-nowrap transition-all duration-150 ease-brand-out disabled:opacity-50 disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:pointer-events-none';
+
+	const sizes: Record<ButtonSize, string> = {
+		sm: 'h-9 px-4 text-[13px]',
+		md: 'h-11 px-7 text-[15px]',
+		lg: 'h-12 px-8 text-base',
+		xl: 'h-14 px-10 text-base'
+	};
+
+	const variantClass = $derived.by(() => {
+		switch (variant) {
+			case 'primary':
+			case 'solid':
+				return `border-transparent ${toneSolid[tone]} ${toneSolidHover[tone]}`;
+			case 'soft':
+				return `border-transparent ${toneSoft[tone]} ${toneSoftHover[tone]}`;
+			case 'outline':
+				return `bg-transparent ${toneText[tone]} ${toneBorder[tone]} ${toneSolidHover[tone]} hover:text-text-inverse`;
+			case 'ghost':
+				return `border-transparent bg-transparent ${toneText[tone]} ${toneSoftHover[tone]}`;
+			case 'link':
+				return `border-transparent ${toneText[tone]} h-auto p-0 text-sm hover:gap-3`;
+		}
+	});
+
+	const isLink = $derived(variant === 'link');
+	const inert = $derived(disabled || loading);
+</script>
+
+<svelte:element
+	this={href ? 'a' : 'button'}
+	{href}
+	type={href ? undefined : type}
+	disabled={href ? undefined : inert}
+	aria-disabled={href && inert ? 'true' : undefined}
+	aria-busy={loading ? 'true' : undefined}
+	role={href ? 'button' : undefined}
+	class="{base} {focusRing} {toneRing[tone]} {variantClass} {isLink ? '' : sizes[size]}
+		{block ? 'w-full' : ''} {className}"
+	{...rest}
+>
+	{#if loading}
+		<Spinner size={size === 'sm' ? 'xs' : 'sm'} label="" />
+	{/if}
+	{@render children()}
+</svelte:element>