@nqmcreative/ui 0.2.3 → 0.4.0

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

@@ -0,0 +1,21 @@
+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' | 'suffix' | 'min' | 'max' | 'step'> {
+    /** Bindable `HH:MM`, or `''` for empty. */
+    value?: string;
+    /** Inclusive bounds, `HH:MM`. */
+    min?: string;
+    max?: string;
+    /** Minutes one press of a stepper moves, and what typing snaps to. */
+    step?: number;
+    size?: InputSize;
+    tone?: Tone;
+    invalid?: boolean;
+    /** Hide the steppers and let the field be typed into only. */
+    steppers?: boolean;
+    class?: string;
+}
+declare const TimeInput: import("svelte").Component<Props, {}, "value">;
+type TimeInput = ReturnType<typeof TimeInput>;
+export default TimeInput;

package/dist/styles/matte/Toaster.svelte

@@ -4,6 +4,7 @@
 	import { portal } from '../../core/actions/dismissable.js';
 	import { toast } from '../../core/toast.svelte.js';
 	import { toneBorderSoft, toneSurface, toneText } from '../../core/tones.js';
+	import { iconMd } from './icon.js';
 	import Spinner from './Spinner.svelte';
 	import { useLocale } from '../../core/locale.svelte.js';
 
@@ -57,6 +58,8 @@
 			<span class="mt-0.5 shrink-0 {toneText[item.tone]}">
 				{#if item.loading}
 					<Spinner size="sm" label="" />
+				{:else if item.icon}
+					<span class={iconMd}>{@render item.icon()}</span>
 				{:else if item.tone === 'success'}
 					<svg class="size-4" viewBox="0 0 16 16" fill="none" aria-hidden="true">
 						<path d="m3 8.5 3.2 3.2L13 5" stroke="currentColor" stroke-width="1.6" />

package/dist/styles/matte/icon.d.ts

@@ -0,0 +1,21 @@
+/**
+ * The box a consumer-supplied icon renders into.
+ *
+ * Every icon in the library is a `Snippet` the app writes — the package ships
+ * no icon set and no runtime dependency — so the component has to size the
+ * glyph rather than trust it. The `*:` variant hits the snippet's own element,
+ * which is what keeps a bare `<svg viewBox="0 0 16 16">` from laying out at its
+ * intrinsic 300×150.
+ *
+ * Kept per style rather than in `core/`: an app only `@source`s the style
+ * folder it installed, so a class string living outside it would never be
+ * generated by Tailwind.
+ */
+/** 14px — menu rows, chips, anything sitting on one line of small text. */
+export declare const iconSm = "grid size-3.5 shrink-0 place-items-center *:size-3.5";
+/** 16px — the default: nav items, tabs, buttons, list rows. */
+export declare const iconMd = "grid size-4 shrink-0 place-items-center *:size-4";
+/** 20px — headers, stats, anything sitting beside a heading. */
+export declare const iconLg = "grid size-5 shrink-0 place-items-center *:size-5";
+/** 24px — dialog and empty-state marks. */
+export declare const iconXl = "grid size-6 shrink-0 place-items-center *:size-6";

package/dist/styles/matte/icon.js

@@ -0,0 +1,21 @@
+/**
+ * The box a consumer-supplied icon renders into.
+ *
+ * Every icon in the library is a `Snippet` the app writes — the package ships
+ * no icon set and no runtime dependency — so the component has to size the
+ * glyph rather than trust it. The `*:` variant hits the snippet's own element,
+ * which is what keeps a bare `<svg viewBox="0 0 16 16">` from laying out at its
+ * intrinsic 300×150.
+ *
+ * Kept per style rather than in `core/`: an app only `@source`s the style
+ * folder it installed, so a class string living outside it would never be
+ * generated by Tailwind.
+ */
+/** 14px — menu rows, chips, anything sitting on one line of small text. */
+export const iconSm = 'grid size-3.5 shrink-0 place-items-center *:size-3.5';
+/** 16px — the default: nav items, tabs, buttons, list rows. */
+export const iconMd = 'grid size-4 shrink-0 place-items-center *:size-4';
+/** 20px — headers, stats, anything sitting beside a heading. */
+export const iconLg = 'grid size-5 shrink-0 place-items-center *:size-5';
+/** 24px — dialog and empty-state marks. */
+export const iconXl = 'grid size-6 shrink-0 place-items-center *:size-6';

package/dist/styles/matte/index.d.ts

@@ -22,8 +22,6 @@ export { default as Switch } from './Switch.svelte';
 export type { SwitchSize } from './Switch.svelte';
 export { default as Field } from './Field.svelte';
 export { default as Label } from './Label.svelte';
-export { default as PasswordInput } from './PasswordInput.svelte';
-export { default as NumberInput } from './NumberInput.svelte';
 export { default as Slider } from './Slider.svelte';
 export { default as RadioGroup } from './RadioGroup.svelte';
 export type { RadioOption } from './RadioGroup.svelte';
@@ -32,6 +30,14 @@ export type { CheckboxOption } from './CheckboxGroup.svelte';
 export { default as SegmentedControl } from './SegmentedControl.svelte';
 export type { SegmentOption, SegmentedSize } from './SegmentedControl.svelte';
 export { default as InputGroup } from './InputGroup.svelte';
+export { default as InputAddon } from './InputAddon.svelte';
+export { default as SearchInput } from './SearchInput.svelte';
+export { default as PinInput } from './PinInput.svelte';
+export { default as TagsInput } from './TagsInput.svelte';
+export { default as CurrencyInput } from './CurrencyInput.svelte';
+export { default as TimeInput } from './TimeInput.svelte';
+export { default as ColorInput } from './ColorInput.svelte';
+export { default as FileInput } from './FileInput.svelte';
 export { default as Combobox } from './Combobox.svelte';
 export type { ComboboxOption } from './Combobox.svelte';
 export { default as MultiSelect } from './MultiSelect.svelte';

package/dist/styles/matte/index.js

@@ -21,13 +21,19 @@ export { default as Radio } from './Radio.svelte';
 export { default as Switch } from './Switch.svelte';
 export { default as Field } from './Field.svelte';
 export { default as Label } from './Label.svelte';
-export { default as PasswordInput } from './PasswordInput.svelte';
-export { default as NumberInput } from './NumberInput.svelte';
 export { default as Slider } from './Slider.svelte';
 export { default as RadioGroup } from './RadioGroup.svelte';
 export { default as CheckboxGroup } from './CheckboxGroup.svelte';
 export { default as SegmentedControl } from './SegmentedControl.svelte';
 export { default as InputGroup } from './InputGroup.svelte';
+export { default as InputAddon } from './InputAddon.svelte';
+export { default as SearchInput } from './SearchInput.svelte';
+export { default as PinInput } from './PinInput.svelte';
+export { default as TagsInput } from './TagsInput.svelte';
+export { default as CurrencyInput } from './CurrencyInput.svelte';
+export { default as TimeInput } from './TimeInput.svelte';
+export { default as ColorInput } from './ColorInput.svelte';
+export { default as FileInput } from './FileInput.svelte';
 export { default as Combobox } from './Combobox.svelte';
 export { default as MultiSelect } from './MultiSelect.svelte';
 export { default as DatePicker } from './DatePicker.svelte';

package/dist/styles/paper/AccordionItem.svelte

@@ -2,6 +2,7 @@
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { toneText, type Tone } from '../../core/tones.js';
+	import { iconMd } from './icon.js';
 
 	interface Props extends HTMLAttributes<HTMLDetailsElement> {
 		title: string;
@@ -9,6 +10,8 @@
 		tone?: Tone;
 		/** Short text on the right of the summary row. */
 		meta?: string;
+		/** Leading icon on the summary row. */
+		icon?: Snippet;
 		children: Snippet;
 	}
 
@@ -17,6 +20,7 @@
 		open = $bindable(false),
 		tone = 'brand',
 		meta,
+		icon,
 		class: className = '',
 		children,
 		...rest
@@ -27,6 +31,7 @@
 	<summary
 		class="flex cursor-pointer list-none items-center gap-4 px-4 py-3.5 font-sans text-sm font-medium text-text transition-colors duration-150 ease-brand-out select-none hover:bg-bg-alt focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-current [&::-webkit-details-marker]:hidden"
 	>
+		{#if icon}<span class={iconMd}>{@render icon()}</span>{/if}
 		<span class="flex-1">{title}</span>
 		{#if meta}<span class="text-[13px] font-normal text-text-muted">{meta}</span>{/if}
 		<svg

package/dist/styles/paper/AccordionItem.svelte.d.ts

@@ -7,6 +7,8 @@ interface Props extends HTMLAttributes<HTMLDetailsElement> {
     tone?: Tone;
     /** Short text on the right of the summary row. */
     meta?: string;
+    /** Leading icon on the summary row. */
+    icon?: Snippet;
     children: Snippet;
 }
 declare const AccordionItem: import("svelte").Component<Props, {}, "open">;

package/dist/styles/paper/Avatar.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { toneSoft, type Tone } from '../../core/tones.js';
 
@@ -13,6 +14,8 @@
 		tone?: Tone;
 		/** Rounded square instead of the default circle. */
 		squared?: boolean;
+		/** Drawn instead of the initials when there is no `src` — a user mark. */
+		fallback?: Snippet;
 	}
 
 	let {
@@ -22,6 +25,7 @@
 		size = 'md',
 		tone = 'brand',
 		squared = false,
+		fallback,
 		class: className = '',
 		...rest
 	}: Props = $props();
@@ -34,6 +38,15 @@
 		xl: 'size-16 text-lg'
 	};
 
+	// The mark tracks the initials: about half the circle, whatever the size.
+	const glyphs: Record<AvatarSize, string> = {
+		xs: 'grid place-items-center *:size-3',
+		sm: 'grid place-items-center *:size-4',
+		md: 'grid place-items-center *:size-5',
+		lg: 'grid place-items-center *:size-6',
+		xl: 'grid place-items-center *:size-8'
+	};
+
 	const initials = $derived(
 		name
 			.trim()
@@ -54,6 +67,8 @@
 >
 	{#if src}
 		<img {src} alt={alt ?? name} class="size-full object-cover" />
+	{:else if fallback}
+		<span class={glyphs[size]}>{@render fallback()}</span>
 	{:else}
 		{initials}
 	{/if}

package/dist/styles/paper/Avatar.svelte.d.ts

@@ -1,3 +1,4 @@
+import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 import { type Tone } from '../../core/tones.js';
 export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
@@ -10,6 +11,8 @@ interface Props extends HTMLAttributes<HTMLSpanElement> {
     tone?: Tone;
     /** Rounded square instead of the default circle. */
     squared?: boolean;
+    /** Drawn instead of the initials when there is no `src` — a user mark. */
+    fallback?: Snippet;
 }
 declare const Avatar: import("svelte").Component<Props, {}, "">;
 type Avatar = ReturnType<typeof Avatar>;

package/dist/styles/paper/Badge.svelte

@@ -9,6 +9,7 @@
 		toneText,
 		type Tone
 	} from '../../core/tones.js';
+	import { iconSm } from './icon.js';
 
 	export type BadgeVariant = 'soft' | 'solid' | 'outline';
 	export type BadgeSize = 'sm' | 'md';
@@ -19,6 +20,8 @@
 		size?: BadgeSize;
 		/** Small filled circle before the label. */
 		dot?: boolean;
+		/** Leading icon, 14px — sits where the dot would. */
+		icon?: Snippet;
 		children: Snippet;
 	}
 
@@ -27,6 +30,7 @@
 		variant = 'soft',
 		size = 'md',
 		dot = false,
+		icon,
 		class: className = '',
 		children,
 		...rest
@@ -54,5 +58,6 @@
 			class="size-1.5 shrink-0 rounded-full {variant === 'solid' ? 'bg-current' : toneFill[tone]}"
 		></span>
 	{/if}
+	{#if icon}<span class={iconSm}>{@render icon()}</span>{/if}
 	{@render children()}
 </span>

package/dist/styles/paper/Badge.svelte.d.ts

@@ -9,6 +9,8 @@ interface Props extends HTMLAttributes<HTMLSpanElement> {
     size?: BadgeSize;
     /** Small filled circle before the label. */
     dot?: boolean;
+    /** Leading icon, 14px — sits where the dot would. */
+    icon?: Snippet;
     children: Snippet;
 }
 declare const Badge: import("svelte").Component<Props, {}, "">;

package/dist/styles/paper/Breadcrumb.svelte

@@ -1,11 +1,15 @@
 <script lang="ts">
+	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { toneHoverText, type Tone } from '../../core/tones.js';
 	import { useLocale } from '../../core/locale.svelte.js';
+	import { iconMd } from './icon.js';
 
 	export interface BreadcrumbItem {
 		label: string;
 		href?: string;
+		/** Leading icon — a home mark on the first crumb, say. */
+		icon?: Snippet;
 	}
 
 	interface Props extends HTMLAttributes<HTMLElement> {
@@ -29,18 +33,18 @@
 				{#if item.href && i < items.length - 1}
 					<a
 						href={item.href}
-						class="rounded px-1 py-0.5 text-text-muted transition-colors duration-150 ease-brand-out hover:bg-bg-inset {toneHoverText[
+						class="inline-flex items-center gap-1.5 rounded px-1 py-0.5 text-text-muted transition-colors duration-150 ease-brand-out hover:bg-bg-inset {toneHoverText[
 							tone
 						]}"
 					>
-						{item.label}
+						{#if item.icon}<span class={iconMd}>{@render item.icon()}</span>{/if}{item.label}
 					</a>
 				{:else}
 					<span
-						class="px-1 py-0.5 font-medium text-text"
+						class="inline-flex items-center gap-1.5 px-1 py-0.5 font-medium text-text"
 						aria-current={i === items.length - 1 ? 'page' : undefined}
 					>
-						{item.label}
+						{#if item.icon}<span class={iconMd}>{@render item.icon()}</span>{/if}{item.label}
 					</span>
 				{/if}
 			</li>

package/dist/styles/paper/Breadcrumb.svelte.d.ts

@@ -1,8 +1,11 @@
+import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 import { type Tone } from '../../core/tones.js';
 export interface BreadcrumbItem {
     label: string;
     href?: string;
+    /** Leading icon — a home mark on the first crumb, say. */
+    icon?: Snippet;
 }
 interface Props extends HTMLAttributes<HTMLElement> {
     items: BreadcrumbItem[];

package/dist/styles/paper/Button.svelte

@@ -2,6 +2,7 @@
 	import type { Snippet } from 'svelte';
 	import type { HTMLButtonAttributes } from 'svelte/elements';
 	import Spinner from './Spinner.svelte';
+	import { iconMd, iconSm } from './icon.js';
 	import {
 		focusRing,
 		toneBorderSoft,
@@ -17,7 +18,7 @@
 	export type ButtonVariant = 'solid' | 'soft' | 'outline' | 'ghost' | 'link' | 'primary';
 	export type ButtonSize = 'sm' | 'md' | 'lg' | 'xl';
 
-	interface Props extends HTMLButtonAttributes {
+	interface Props extends Omit<HTMLButtonAttributes, 'onclick'> {
 		variant?: ButtonVariant;
 		tone?: Tone;
 		size?: ButtonSize;
@@ -28,7 +29,19 @@
 		loading?: boolean;
 		/** Stretch to the container's full width. */
 		block?: boolean;
-		children: Snippet;
+		/** Leading icon. The spinner takes its place while the button is busy. */
+		icon?: Snippet;
+		/** Trailing icon. */
+		iconEnd?: Snippet;
+		/** Square button with no label — pass an `aria-label`. */
+		iconOnly?: boolean;
+		/**
+		 * Return a promise — a save, a submit, a fetch — and the button spins and
+		 * locks itself until it settles, without any state in the parent. It
+		 * unlocks on a rejection too, so catch failures inside the handler.
+		 */
+		onclick?: (event: MouseEvent) => unknown;
+		children?: Snippet;
 	}
 
 	let {
@@ -38,6 +51,10 @@
 		href,
 		loading = false,
 		block = false,
+		icon,
+		iconEnd,
+		iconOnly = false,
+		onclick,
 		disabled = false,
 		type = 'button',
 		class: className = '',
@@ -55,6 +72,13 @@
 		xl: 'h-12 px-6 text-base'
 	};
 
+	const squares: Record<ButtonSize, string> = {
+		sm: 'size-8',
+		md: 'size-10',
+		lg: 'size-11',
+		xl: 'size-12'
+	};
+
 	const variantClass = $derived.by(() => {
 		switch (variant) {
 			case 'primary':
@@ -74,7 +98,24 @@
 	});
 
 	const isLink = $derived(variant === 'link');
-	const inert = $derived(disabled || loading);
+
+	/** Set by an `onclick` that returned a promise, on top of the `loading` prop. */
+	let pending = $state(false);
+	const busy = $derived(loading || pending);
+	const inert = $derived(disabled || busy);
+
+	const iconClass = $derived(size === 'sm' ? iconSm : iconMd);
+
+	async function handleClick(event: MouseEvent) {
+		const result = onclick?.(event);
+		// Anything else is a plain handler: nothing to wait for, nothing to lock.
+		if (!(result instanceof Promise)) return;
+		pending = true;
+		// The handler owns its own errors — catch them there to show a message.
+		// All the button needs to know is that the work has settled.
+		await result.catch(() => {});
+		pending = false;
+	}
 </script>
 
 <svelte:element
@@ -83,14 +124,24 @@
 	type={href ? undefined : type}
 	disabled={href ? undefined : inert}
 	aria-disabled={href && inert ? 'true' : undefined}
-	aria-busy={loading ? 'true' : undefined}
+	aria-busy={busy ? 'true' : undefined}
 	role={href ? 'button' : undefined}
-	class="{base} {focusRing} {toneRing[tone]} {variantClass} {isLink ? '' : sizes[size]}
+	class="{base} {focusRing} {toneRing[tone]} {variantClass} {isLink
+		? ''
+		: iconOnly
+			? squares[size]
+			: sizes[size]}
 		{block ? 'w-full' : ''} {className}"
 	{...rest}
+	onclick={handleClick}
 >
-	{#if loading}
+	{#if busy}
 		<Spinner size={size === 'sm' ? 'xs' : 'sm'} label="" />
+	{:else if icon}
+		<span class={iconClass} aria-hidden="true">{@render icon()}</span>
+	{/if}
+	{@render children?.()}
+	{#if iconEnd && !iconOnly}
+		<span class={iconClass} aria-hidden="true">{@render iconEnd()}</span>
 	{/if}
-	{@render children()}
 </svelte:element>

package/dist/styles/paper/Button.svelte.d.ts

@@ -3,7 +3,7 @@ import type { HTMLButtonAttributes } from 'svelte/elements';
 import { type Tone } from '../../core/tones.js';
 export type ButtonVariant = 'solid' | 'soft' | 'outline' | 'ghost' | 'link' | 'primary';
 export type ButtonSize = 'sm' | 'md' | 'lg' | 'xl';
-interface Props extends HTMLButtonAttributes {
+interface Props extends Omit<HTMLButtonAttributes, 'onclick'> {
     variant?: ButtonVariant;
     tone?: Tone;
     size?: ButtonSize;
@@ -14,7 +14,19 @@ interface Props extends HTMLButtonAttributes {
     loading?: boolean;
     /** Stretch to the container's full width. */
     block?: boolean;
-    children: Snippet;
+    /** Leading icon. The spinner takes its place while the button is busy. */
+    icon?: Snippet;
+    /** Trailing icon. */
+    iconEnd?: Snippet;
+    /** Square button with no label — pass an `aria-label`. */
+    iconOnly?: boolean;
+    /**
+     * Return a promise — a save, a submit, a fetch — and the button spins and
+     * locks itself until it settles, without any state in the parent. It
+     * unlocks on a rejection too, so catch failures inside the handler.
+     */
+    onclick?: (event: MouseEvent) => unknown;
+    children?: Snippet;
 }
 declare const Button: import("svelte").Component<Props, {}, "">;
 type Button = ReturnType<typeof Button>;

package/dist/styles/paper/Card.svelte

@@ -2,6 +2,7 @@
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { toneBorderLeft, toneHoverBorder, toneSurface, type Tone } from '../../core/tones.js';
+	import { iconLg } from './icon.js';
 
 	export type CardVariant = 'outline' | 'filled' | 'tinted';
 
@@ -15,6 +16,8 @@
 		padded?: boolean;
 		title?: string;
 		eyebrow?: string;
+		/** Leading icon above the title. Ignored when you pass `header`. */
+		icon?: Snippet;
 		header?: Snippet;
 		footer?: Snippet;
 		children: Snippet;
@@ -28,6 +31,7 @@
 		padded = true,
 		title,
 		eyebrow,
+		icon,
 		header,
 		footer,
 		class: className = '',
@@ -51,11 +55,12 @@
 		{className}"
 	{...rest}
 >
-	{#if header || title || eyebrow}
+	{#if header || title || eyebrow || icon}
 		<div class="flex flex-col gap-1 {padded ? 'px-5 pt-5' : ''}">
 			{#if header}
 				{@render header()}
 			{:else}
+				{#if icon}<span class={iconLg}>{@render icon()}</span>{/if}
 				{#if eyebrow}
 					<span class="font-sans text-xs font-semibold text-text-muted">{eyebrow}</span>
 				{/if}

package/dist/styles/paper/Card.svelte.d.ts

@@ -12,6 +12,8 @@ interface Props extends HTMLAttributes<HTMLDivElement> {
     padded?: boolean;
     title?: string;
     eyebrow?: string;
+    /** Leading icon above the title. Ignored when you pass `header`. */
+    icon?: Snippet;
     header?: Snippet;
     footer?: Snippet;
     children: Snippet;

package/dist/styles/paper/CheckboxGroup.svelte

@@ -3,10 +3,13 @@
 	import type { HTMLFieldsetAttributes } from 'svelte/elements';
 	import Checkbox from './Checkbox.svelte';
 	import { toneBorder, toneSurface, type Tone } from '../../core/tones.js';
+	import { iconLg } from './icon.js';
 
 	export interface CheckboxOption {
 		value: string;
 		label: string;
+		/** Leading icon, 20px. Drawn in `boxed` mode only. */
+		icon?: Snippet;
 		description?: string;
 		disabled?: boolean;
 	}
@@ -78,6 +81,9 @@
 							: 'border-hairline bg-bg hover:border-hairline-strong'}
 							{disabled ? 'pointer-events-none opacity-50' : ''}"
 					>
+						{#if option.icon}
+							<span class={iconLg}>{@render option.icon()}</span>
+						{/if}
 						<Checkbox
 							{checked}
 							{disabled}

package/dist/styles/paper/CheckboxGroup.svelte.d.ts

@@ -4,6 +4,8 @@ import { type Tone } from '../../core/tones.js';
 export interface CheckboxOption {
     value: string;
     label: string;
+    /** Leading icon, 20px. Drawn in `boxed` mode only. */
+    icon?: Snippet;
     description?: string;
     disabled?: boolean;
 }

package/dist/styles/paper/ColorInput.svelte

@@ -0,0 +1,112 @@
+<script lang="ts">
+	import type { HTMLInputAttributes } from 'svelte/elements';
+	import { normaliseHex } from '../../core/color.js';
+	import { useLocale } from '../../core/locale.svelte.js';
+	import type { Tone } from '../../core/tones.js';
+	import Input, { type InputSize } from './Input.svelte';
+
+	interface Props extends Omit<HTMLInputAttributes, 'size' | 'prefix' | 'suffix' | 'type'> {
+		/** Bindable `#rrggbb`. Shorthand and alpha are normalised away on blur. */
+		value?: string;
+		size?: InputSize;
+		tone?: Tone;
+		invalid?: boolean;
+		/** Fixed choices under the field. Empty hides the row. */
+		swatches?: string[];
+		class?: string;
+	}
+
+	let {
+		value = $bindable('#000000'),
+		size = 'md',
+		tone = 'brand',
+		invalid = false,
+		disabled = false,
+		swatches = [],
+		class: className = '',
+		...rest
+	}: Props = $props();
+
+	const t = useLocale();
+
+	// The text can be mid-typing (`#a2`) while the swatch needs a real colour,
+	// so the swatch follows the last value that parsed rather than the field.
+	let text = $state('');
+	let editing = $state(false);
+
+	$effect(() => {
+		if (!editing) text = value;
+	});
+
+	const resolved = $derived(normaliseHex(text) ?? normaliseHex(value) ?? '#000000');
+
+	// Same reason as CurrencyInput: at input time the bound `text` is one
+	// keystroke behind, so the element is the only current source.
+	function onText(event: Event & { currentTarget: HTMLInputElement }) {
+		const hex = normaliseHex(event.currentTarget.value);
+		if (hex) value = hex;
+	}
+
+	function settle() {
+		editing = false;
+		value = normaliseHex(text) ?? value;
+		text = value;
+	}
+
+	function choose(hex: string) {
+		value = normaliseHex(hex) ?? value;
+		text = value;
+	}
+</script>
+
+<div class="flex w-full flex-col gap-2 {className}">
+	<Input
+		bind:value={text}
+		{size}
+		{tone}
+		{invalid}
+		{disabled}
+		spellcheck="false"
+		autocapitalize="none"
+		placeholder="#000000"
+		oninput={onText}
+		onfocus={() => (editing = true)}
+		onblur={settle}
+		class="[&_input]:uppercase [&_input]:tabular-nums"
+		{...rest}
+	>
+		{#snippet prefix()}
+			<span
+				class="relative grid size-5 place-items-center overflow-hidden rounded border border-hairline-strong"
+			>
+				<span class="absolute inset-0" style="background-color: {resolved}"></span>
+				<input
+					type="color"
+					value={resolved}
+					{disabled}
+					aria-label={t.current.pickColour}
+					oninput={(event) => choose(event.currentTarget.value)}
+					class="absolute inset-0 cursor-pointer opacity-0 disabled:cursor-not-allowed"
+				/>
+			</span>
+		{/snippet}
+	</Input>
+
+	{#if swatches.length}
+		<div class="flex flex-wrap gap-1.5">
+			{#each swatches as swatch (swatch)}
+				<button
+					type="button"
+					{disabled}
+					onclick={() => choose(swatch)}
+					title={swatch}
+					aria-label={swatch}
+					aria-pressed={resolved === normaliseHex(swatch)}
+					class="size-6 rounded-md border transition-transform duration-150 hover:-translate-y-0.5 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current disabled:pointer-events-none disabled:opacity-50
+						{resolved === normaliseHex(swatch) ? 'border-text' : 'border-hairline-strong'}"
+					style="background-color: {swatch}"
+				></button>
+			{/each}
+		</div>
+	{/if}
+</div>