@ruckc/truss-ui 0.0.0-stage → 1.0.0

package/dist/components/ButtonGroup.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	let { vertical = false, fill = false, children }: { vertical?: boolean; fill?: boolean; children: Snippet } = $props();
+</script>
+
+<div class="bg" role="group" data-vertical={vertical} data-fill={fill}>{@render children()}</div>
+
+<style>
+	.bg { display: inline-flex; }
+	.bg[data-fill='true'] { display: flex; }
+	.bg[data-fill='true'] > :global(.tr-btn) { flex: 1; }
+	.bg > :global(.tr-btn) { border-radius: 0; }
+	.bg:not([data-vertical='true']) > :global(.tr-btn:first-child) { border-start-start-radius: var(--tr-radius-sm); border-end-start-radius: var(--tr-radius-sm); }
+	.bg:not([data-vertical='true']) > :global(.tr-btn:last-child) { border-start-end-radius: var(--tr-radius-sm); border-end-end-radius: var(--tr-radius-sm); }
+	.bg:not([data-vertical='true']) > :global(.tr-btn + .tr-btn) { margin-left: -1px; }
+	.bg[data-vertical='true'] { flex-direction: column; }
+	.bg[data-vertical='true'] > :global(.tr-btn:first-child) { border-start-start-radius: var(--tr-radius-sm); border-start-end-radius: var(--tr-radius-sm); }
+	.bg[data-vertical='true'] > :global(.tr-btn:last-child) { border-end-start-radius: var(--tr-radius-sm); border-end-end-radius: var(--tr-radius-sm); }
+	.bg[data-vertical='true'] > :global(.tr-btn + .tr-btn) { margin-top: -1px; }
+	/* hairline seam between joined filled/tonal buttons */
+	.bg > :global(.tr-btn:hover), .bg > :global(.tr-btn:focus-visible) { z-index: 1; }
+	.bg > :global(.tr-btn[data-variant='filled'] + .tr-btn[data-variant='filled']) { box-shadow: inset 1px 0 0 color-mix(in srgb, var(--tr-surface) 35%, transparent), var(--tr-elevation-1); }
+</style>

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

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    vertical?: boolean;
+    fill?: boolean;
+    children: Snippet;
+};
+declare const ButtonGroup: import("svelte").Component<$$ComponentProps, {}, "">;
+type ButtonGroup = ReturnType<typeof ButtonGroup>;
+export default ButtonGroup;

package/dist/components/Calendar.svelte

@@ -0,0 +1,166 @@
+<script lang="ts">
+	import { tick } from 'svelte';
+	import Button from './Button.svelte';
+	import { addDays, addMonths, monthGrid, parseISO, startOfMonth, toISO, today } from '../date.js';
+	import type { DateRange } from '../types.js';
+
+	let {
+		mode = 'single',
+		value = $bindable(),
+		range = $bindable({}),
+		min,
+		max,
+		weekStart = 0,
+		locale = 'en-US',
+		disabledDate,
+		onpick,
+		onrange
+	}: {
+		mode?: 'single' | 'range';
+		value?: string;
+		range?: DateRange;
+		min?: string;
+		max?: string;
+		/** 0 = Sunday … 6 = Saturday */
+		weekStart?: number;
+		locale?: string;
+		disabledDate?: (iso: string) => boolean;
+		/** Fires when a selection is complete (single pick, or range end chosen). */
+		onpick?: () => void;
+		/** Called with every range change (including the in-progress first click), for controlled use. */
+		onrange?: (r: DateRange) => void;
+	} = $props();
+
+	const seed = () => parseISO((mode === 'range' ? range.start : value) ?? '') ?? new Date();
+	let view = $state(startOfMonth(seed()));
+	let focused = $state(toISO(seed()));
+	let pending = $state<string>();
+	let hover = $state<string>();
+	let grid: HTMLDivElement;
+
+	// Follow external changes (typed input, presets)
+	$effect(() => {
+		const d = parseISO((mode === 'range' ? range.start : value) ?? '');
+		if (d) { view = startOfMonth(d); focused = toISO(d); }
+	});
+
+	const weeks = $derived(monthGrid(view.getFullYear(), view.getMonth(), weekStart));
+	const monthLabel = $derived(new Intl.DateTimeFormat(locale, { month: 'long', year: 'numeric' }).format(view));
+	const dayLabel = $derived(new Intl.DateTimeFormat(locale, { dateStyle: 'full' }));
+	const weekdays = $derived(
+		Array.from({ length: 7 }, (_, i) =>
+			new Intl.DateTimeFormat(locale, { weekday: 'short' }).format(new Date(2023, 0, 1 + ((weekStart + i) % 7)))
+		)
+	);
+	const now = today();
+
+	const bounds = $derived.by(() => {
+		if (mode !== 'range') return { lo: undefined, hi: undefined };
+		if (pending) {
+			const o = hover ?? pending;
+			return o < pending ? { lo: o, hi: pending } : { lo: pending, hi: o };
+		}
+		return { lo: range.start, hi: range.end };
+	});
+	const isOff = (iso: string) => (!!min && iso < min) || (!!max && iso > max) || !!disabledDate?.(iso);
+
+	function pick(iso: string) {
+		if (isOff(iso)) return;
+		focused = iso;
+		if (mode === 'single') { value = iso; onpick?.(); return; }
+		if (!pending) { pending = iso; range = { start: iso }; onrange?.(range); return; }
+		const [s, e] = iso < pending ? [iso, pending] : [pending, iso];
+		range = { start: s, end: e };
+		onrange?.(range);
+		pending = hover = undefined;
+		onpick?.();
+	}
+
+	function jump(next: string, focus = false) {
+		focused = next;
+		view = startOfMonth(parseISO(next)!);
+		if (focus) tick().then(() => grid.querySelector<HTMLElement>(`[data-iso="${next}"]`)?.focus());
+	}
+	const shift = (months: number) => jump(toISO(addMonths(parseISO(focused)!, months)));
+
+	function onKey(e: KeyboardEvent) {
+		const d = parseISO(focused)!;
+		const weekOffset = (d.getDay() - weekStart + 7) % 7;
+		const moves: Record<string, Date> = {
+			ArrowLeft: addDays(d, -1), ArrowRight: addDays(d, 1), ArrowUp: addDays(d, -7), ArrowDown: addDays(d, 7),
+			Home: addDays(d, -weekOffset), End: addDays(d, 6 - weekOffset),
+			PageUp: addMonths(d, e.shiftKey ? -12 : -1), PageDown: addMonths(d, e.shiftKey ? 12 : 1)
+		};
+		if (!(e.key in moves)) return;
+		e.preventDefault();
+		jump(toISO(moves[e.key]), true);
+	}
+</script>
+
+<div class="cal">
+	<div class="head">
+		<Button variant="minimal" intent="neutral" size="sm" icon="chevrons-left" aria-label="Previous year" onclick={() => shift(-12)} />
+		<Button variant="minimal" intent="neutral" size="sm" icon="chevron-left" aria-label="Previous month" onclick={() => shift(-1)} />
+		<div class="title" aria-live="polite">{monthLabel}</div>
+		<Button variant="minimal" intent="neutral" size="sm" icon="chevron-right" aria-label="Next month" onclick={() => shift(1)} />
+		<Button variant="minimal" intent="neutral" size="sm" icon="chevrons-right" aria-label="Next year" onclick={() => shift(12)} />
+	</div>
+
+	<div class="grid" role="grid" aria-label={monthLabel} bind:this={grid} onkeydown={onKey} tabindex="-1">
+		<div class="row" role="row">
+			{#each weekdays as w}<div class="dow" role="columnheader">{w}</div>{/each}
+		</div>
+		{#each weeks as week}
+			<div class="row" role="row">
+				{#each week as iso (iso)}
+					{@const inRange = !!bounds.lo && !!bounds.hi && iso >= bounds.lo && iso <= bounds.hi}
+					{@const edge = iso === bounds.lo || iso === bounds.hi}
+					{@const sel = mode === 'single' ? iso === value : edge}
+					<div role="gridcell" aria-selected={sel}>
+						<button
+							type="button"
+							class="day"
+							data-iso={iso}
+							data-outside={iso.slice(0, 7) !== toISO(view).slice(0, 7)}
+							data-today={iso === now}
+							data-selected={sel}
+							data-range={inRange && !edge}
+							tabindex={iso === focused ? 0 : -1}
+							disabled={isOff(iso)}
+							aria-label={dayLabel.format(parseISO(iso)!)}
+							aria-current={iso === now ? 'date' : undefined}
+							onclick={() => pick(iso)}
+							onpointerenter={() => pending && (hover = iso)}
+						>{+iso.slice(8)}</button>
+					</div>
+				{/each}
+			</div>
+		{/each}
+	</div>
+
+	<div class="foot">
+		<Button variant="minimal" size="sm" onclick={() => jump(now, true)}>Today</Button>
+	</div>
+</div>
+
+<style>
+	.cal { width: 252px; padding: 8px; }
+	.head { display: flex; align-items: center; gap: 2px; margin-bottom: 6px; }
+	.title { flex: 1; text-align: center; font-weight: 600; }
+	.grid { outline: none; }
+	.row { display: grid; grid-template-columns: repeat(7, 1fr); }
+	.dow { height: 24px; display: grid; place-items: center; font-size: var(--tr-text-xs); font-weight: 700; text-transform: uppercase; color: var(--tr-on-surface-variant); }
+	[role='gridcell'] { display: contents; }
+	.day {
+		height: 32px; border: 0; background: none; color: var(--tr-on-surface); font: inherit; font-variant-numeric: tabular-nums;
+		border-radius: var(--tr-radius-sm); cursor: pointer; position: relative;
+	}
+	.day:hover:not(:disabled) { background: var(--tr-surface-container-highest); }
+	.day[data-outside='true'] { color: var(--tr-placeholder); }
+	.day[data-today='true'] { box-shadow: inset 0 0 0 1px var(--tr-outline); }
+	.day[data-range='true'] { background: var(--tr-primary-container); color: var(--tr-on-primary-container); border-radius: 0; }
+	.day[data-selected='true'] { background: var(--tr-primary); color: var(--tr-on-primary); font-weight: 700; }
+	.day:focus-visible { outline: none; box-shadow: var(--tr-focus-ring); z-index: 1; }
+	.day:disabled { opacity: 0.35; cursor: not-allowed; }
+	.foot { display: flex; justify-content: flex-end; margin-top: 4px; border-top: 1px solid var(--tr-outline-variant); padding-top: 6px; }
+</style>

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

@@ -0,0 +1,19 @@
+import type { DateRange } from '../types.js';
+type $$ComponentProps = {
+    mode?: 'single' | 'range';
+    value?: string;
+    range?: DateRange;
+    min?: string;
+    max?: string;
+    /** 0 = Sunday … 6 = Saturday */
+    weekStart?: number;
+    locale?: string;
+    disabledDate?: (iso: string) => boolean;
+    /** Fires when a selection is complete (single pick, or range end chosen). */
+    onpick?: () => void;
+    /** Called with every range change (including the in-progress first click), for controlled use. */
+    onrange?: (r: DateRange) => void;
+};
+declare const Calendar: import("svelte").Component<$$ComponentProps, {}, "value" | "range">;
+type Calendar = ReturnType<typeof Calendar>;
+export default Calendar;

package/dist/components/Callout.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import Icon from '../icons/Icon.svelte';
+	import Button from './Button.svelte';
+	import type { IconName } from '../icons/paths.js';
+
+	let {
+		intent = 'primary',
+		title,
+		icon,
+		onclose,
+		children,
+		actions
+	}: {
+		intent?: 'primary' | 'success' | 'warning' | 'danger' | 'neutral';
+		title?: string;
+		icon?: IconName;
+		/** Shows a dismiss button. */
+		onclose?: () => void;
+		children?: Snippet;
+		actions?: Snippet;
+	} = $props();
+	const glyph = { primary: 'info', success: 'success', warning: 'warning', danger: 'error', neutral: 'info' } as const;
+</script>
+
+<div class="co" data-intent={intent} role={intent === 'danger' || intent === 'warning' ? 'alert' : 'note'}>
+	<span class="ic"><Icon name={icon ?? glyph[intent]} size={20} /></span>
+	<div class="body">
+		{#if title}<div class="title">{title}</div>{/if}
+		{#if children}<div class="text">{@render children()}</div>{/if}
+		{#if actions}<div class="actions">{@render actions()}</div>{/if}
+	</div>
+	{#if onclose}<Button variant="minimal" intent="neutral" size="sm" icon="cross" aria-label="Dismiss" onclick={onclose} />{/if}
+</div>
+
+<style>
+	.co { --c: var(--tr-primary); --cc: var(--tr-primary-container); --on: var(--tr-on-primary-container); display: flex; gap: 10px; padding: 10px 10px 10px 14px; position: relative; background: var(--cc); color: var(--on); border-radius: var(--tr-radius-md); overflow: hidden; }
+	.co::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c); }
+	.co[data-intent='success'] { --c: var(--tr-success); --cc: var(--tr-success-container); --on: var(--tr-on-success-container); }
+	.co[data-intent='warning'] { --c: var(--tr-warning); --cc: var(--tr-warning-container); --on: var(--tr-on-warning-container); }
+	.co[data-intent='danger'] { --c: var(--tr-danger); --cc: var(--tr-danger-container); --on: var(--tr-on-danger-container); }
+	.co[data-intent='neutral'] { --c: var(--tr-outline); --cc: var(--tr-surface-container-high); --on: var(--tr-on-surface); }
+	.ic { flex: none; margin-top: 1px; color: var(--c); }
+	.co[data-intent='warning'] .ic, .co[data-intent='success'] .ic, .co[data-intent='danger'] .ic { color: var(--on); }
+	.body { flex: 1; min-width: 0; }
+	.title { font-weight: 700; }
+	.text { line-height: 1.45; }
+	.title + .text { margin-top: 2px; }
+	.actions { display: flex; gap: 8px; margin-top: 8px; }
+</style>

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

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+import type { IconName } from '../icons/paths.js';
+type $$ComponentProps = {
+    intent?: 'primary' | 'success' | 'warning' | 'danger' | 'neutral';
+    title?: string;
+    icon?: IconName;
+    /** Shows a dismiss button. */
+    onclose?: () => void;
+    children?: Snippet;
+    actions?: Snippet;
+};
+declare const Callout: import("svelte").Component<$$ComponentProps, {}, "">;
+type Callout = ReturnType<typeof Callout>;
+export default Callout;

package/dist/components/Card.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let {
+		padding = 'md',
+		elevation = 1,
+		href,
+		onclick,
+		header,
+		footer,
+		children
+	}: {
+		padding?: 'none' | 'sm' | 'md';
+		elevation?: 0 | 1 | 2 | 3;
+		/** Makes the card a link. */
+		href?: string;
+		/** Makes the card a button. */
+		onclick?: (e: MouseEvent) => void;
+		header?: Snippet;
+		footer?: Snippet;
+		children?: Snippet;
+	} = $props();
+	const interactive = $derived(!!href || !!onclick);
+</script>
+
+{#snippet inner()}
+	{#if header}<div class="hd">{@render header()}</div>{/if}
+	{#if children}<div class="bd" data-padding={padding}>{@render children()}</div>{/if}
+	{#if footer}<div class="ft">{@render footer()}</div>{/if}
+{/snippet}
+
+{#if href}<a class="card" {href} data-interactive="true" data-elev={elevation}>{@render inner()}</a>
+{:else if onclick}<button type="button" class="card" {onclick} data-interactive="true" data-elev={elevation}>{@render inner()}</button>
+{:else}<div class="card" data-elev={elevation}>{@render inner()}</div>{/if}
+
+<style>
+	.card { display: block; width: 100%; text-align: left; color: inherit; text-decoration: none; font: inherit; background: var(--tr-surface-container-low); border: 1px solid var(--tr-outline-variant); border-radius: var(--tr-radius-md); overflow: hidden; transition: box-shadow var(--tr-dur) var(--tr-ease), border-color var(--tr-dur) var(--tr-ease), transform var(--tr-dur-fast) var(--tr-ease); }
+	.card[data-elev='1'] { box-shadow: var(--tr-elevation-1); }
+	.card[data-elev='2'] { box-shadow: var(--tr-elevation-2); }
+	.card[data-elev='3'] { box-shadow: var(--tr-elevation-3); }
+	.card[data-interactive='true'] { cursor: pointer; }
+	.card[data-interactive='true']:hover { border-color: var(--tr-outline); box-shadow: var(--tr-elevation-2); }
+	.card[data-interactive='true']:active { transform: scale(0.995); }
+	.card[data-interactive='true']:focus-visible { outline: none; box-shadow: var(--tr-focus-ring); border-color: var(--tr-primary); }
+	.hd, .ft { padding: 8px 12px; background: var(--tr-surface-container); }
+	.hd { border-bottom: 1px solid var(--tr-outline-variant); font-weight: 700; }
+	.ft { border-top: 1px solid var(--tr-outline-variant); }
+	.bd[data-padding='md'] { padding: 16px; }
+	.bd[data-padding='sm'] { padding: 8px 12px; }
+</style>

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

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    padding?: 'none' | 'sm' | 'md';
+    elevation?: 0 | 1 | 2 | 3;
+    /** Makes the card a link. */
+    href?: string;
+    /** Makes the card a button. */
+    onclick?: (e: MouseEvent) => void;
+    header?: Snippet;
+    footer?: Snippet;
+    children?: Snippet;
+};
+declare const Card: import("svelte").Component<$$ComponentProps, {}, "">;
+type Card = ReturnType<typeof Card>;
+export default Card;

package/dist/components/Checkbox.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import Icon from '../icons/Icon.svelte';
+
+	let {
+		checked = $bindable(false),
+		indeterminate = false,
+		disabled = false,
+		hint,
+		onchange,
+		children,
+		...rest
+	}: { checked?: boolean; indeterminate?: boolean; disabled?: boolean; hint?: string; onchange?: (e: Event & { currentTarget: HTMLInputElement }) => void; children?: Snippet; 'aria-label'?: string; tabindex?: number } = $props();
+
+	let el: HTMLInputElement;
+	$effect(() => { if (el) el.indeterminate = indeterminate; });
+</script>
+
+<label class="cb" data-disabled={disabled}>
+	<input bind:this={el} type="checkbox" class="tr-visually-hidden" bind:checked {disabled} {onchange} {...rest} />
+	<span class="box" data-on={checked || indeterminate}>
+		{#if indeterminate}<Icon name="minus" />{:else if checked}<Icon name="tick" />{/if}
+	</span>
+	{#if children}<span class="text">{@render children()}{#if hint}<small>{hint}</small>{/if}</span>{/if}
+</label>
+
+<style>
+	.cb { display: inline-flex; align-items: flex-start; gap: 8px; min-height: 24px; cursor: pointer; }
+	.cb[data-disabled='true'] { opacity: 0.5; cursor: not-allowed; }
+	.box { flex: none; display: grid; place-items: center; width: 18px; height: 18px; margin-top: 3px; border: 1px solid var(--tr-outline); border-radius: var(--tr-radius-sm); background: var(--tr-surface-container-low); color: var(--tr-on-primary); transition: background-color var(--tr-dur) var(--tr-ease), box-shadow var(--tr-dur) var(--tr-ease); }
+	.box :global(svg) { width: 14px; height: 14px; }
+	.cb:hover .box { background: var(--tr-surface-container-high); }
+	.box[data-on='true'] { background: var(--tr-primary); border-color: var(--tr-primary); }
+	input:focus-visible + .box { box-shadow: var(--tr-focus-ring); }
+	.text { display: flex; flex-direction: column; padding-top: 3px; }
+	small { color: var(--tr-on-surface-variant); font-size: var(--tr-text-sm); }
+</style>

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

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    checked?: boolean;
+    indeterminate?: boolean;
+    disabled?: boolean;
+    hint?: string;
+    onchange?: (e: Event & {
+        currentTarget: HTMLInputElement;
+    }) => void;
+    children?: Snippet;
+    'aria-label'?: string;
+    tabindex?: number;
+};
+declare const Checkbox: import("svelte").Component<$$ComponentProps, {}, "checked">;
+type Checkbox = ReturnType<typeof Checkbox>;
+export default Checkbox;

package/dist/components/ColorPicker.svelte

@@ -0,0 +1,164 @@
+<script lang="ts">
+	import { untrack } from 'svelte';
+	import Button from './Button.svelte';
+	import Popover from './Popover.svelte';
+	import { clamp, hsvToRgb, parseHex, rgbToHsv, toHex, type HSV } from '../color.js';
+
+	let {
+		value = $bindable('#1f5fbf'),
+		label,
+		ariaLabel,
+		alpha = false,
+		swatches = ['#1f5fbf', '#2a78d6', '#1baf7a', '#008300', '#eda100', '#eb6834', '#e34948', '#e87ba4', '#6250d6', '#1a1c22', '#7a7f8e', '#ffffff'],
+		disabled = false,
+		error
+	}: {
+		/** #rrggbb, or #rrggbbaa when `alpha` is on and opacity < 1. */
+		value?: string;
+		label?: string;
+		/** Accessible name when no visible `label` is shown. */
+		ariaLabel?: string;
+		alpha?: boolean;
+		swatches?: string[];
+		disabled?: boolean;
+		error?: string;
+	} = $props();
+
+	const id = $props.id();
+	let open = $state(false);
+	let hsv = $state<HSV>({ h: 210, s: 0.7, v: 0.75 });
+	let a = $state(1);
+	let text = $state('');
+	let bad = $state(false);
+	let input: HTMLInputElement;
+	let sv = $state<HTMLDivElement>();
+	let hueEl = $state<HTMLDivElement>();
+	let alphaEl = $state<HTMLDivElement>();
+
+	const serialize = (h: HSV = hsv, al = a) => toHex(hsvToRgb(h), alpha ? al : undefined);
+	const rgb = $derived(hsvToRgb(hsv));
+	const solid = $derived(`rgb(${rgb.r} ${rgb.g} ${rgb.b})`);
+
+	// Follow external value changes without clobbering hue when s/v collapse (grey, black)
+	$effect(() => {
+		const v = value;
+		untrack(() => {
+			if (v && v.toLowerCase() === serialize().toLowerCase()) { text = v; return; }
+			const p = v ? parseHex(v) : null;
+			if (p) { const n = rgbToHsv(p); hsv = { h: n.s === 0 || n.v === 0 ? hsv.h : n.h, s: n.s, v: n.v }; a = p.a; text = v; bad = false; }
+		});
+	});
+	function commit(h = hsv, al = a) { hsv = h; a = al; value = serialize(h, al); text = value; bad = false; }
+
+	function drag(el: HTMLElement | undefined, e: PointerEvent, apply: (fx: number, fy: number) => void) {
+		if (!el || disabled) return;
+		el.setPointerCapture(e.pointerId);
+		const go = (ev: PointerEvent) => {
+			const r = el.getBoundingClientRect();
+			apply(clamp((ev.clientX - r.left) / r.width), clamp((ev.clientY - r.top) / r.height));
+		};
+		go(e);
+		const up = () => { el.removeEventListener('pointermove', go); el.removeEventListener('pointerup', up); };
+		el.addEventListener('pointermove', go);
+		el.addEventListener('pointerup', up);
+	}
+	const step = (e: KeyboardEvent, small: number) => (e.shiftKey ? small * 10 : small);
+
+	function svKey(e: KeyboardEvent) {
+		const d = step(e, 0.01);
+		const m: Record<string, [number, number]> = { ArrowLeft: [-d, 0], ArrowRight: [d, 0], ArrowUp: [0, d], ArrowDown: [0, -d] };
+		if (!(e.key in m)) return;
+		e.preventDefault();
+		commit({ ...hsv, s: clamp(hsv.s + m[e.key][0]), v: clamp(hsv.v + m[e.key][1]) });
+	}
+	function railKey(e: KeyboardEvent, cur: number, max: number, small: number, set: (n: number) => void) {
+		const d = e.key === 'ArrowRight' || e.key === 'ArrowUp' ? step(e, small) : e.key === 'ArrowLeft' || e.key === 'ArrowDown' ? -step(e, small) : e.key === 'Home' ? -max : e.key === 'End' ? max : 0;
+		if (!d) return;
+		e.preventDefault();
+		set(clamp(cur + d, 0, max));
+	}
+	function commitText() {
+		const p = parseHex(text);
+		if (!p) { bad = !!text.trim(); return; }
+		const n = rgbToHsv(p);
+		commit({ h: n.s === 0 || n.v === 0 ? hsv.h : n.h, s: n.s, v: n.v }, alpha ? p.a : 1);
+	}
+	const hasDropper = typeof window !== 'undefined' && 'EyeDropper' in window;
+	async function pipette() {
+		try {
+			const r = await new (window as any).EyeDropper().open();
+			const p = parseHex(r.sRGBHex);
+			if (p) { const n = rgbToHsv(p); commit({ h: n.s === 0 || n.v === 0 ? hsv.h : n.h, s: n.s, v: n.v }); }
+		} catch { /* cancelled */ }
+	}
+</script>
+
+<div class="tr-field">
+	{#if label}<label class="tr-label" for={id}>{label}</label>{/if}
+	<div class="tr-anchor">
+		<div class="tr-control" data-invalid={!!error || bad} data-disabled={disabled}>
+			<button type="button" class="sw" {disabled} aria-label="Open color picker" aria-haspopup="dialog" aria-expanded={open} onclick={() => (open = !open)}>
+				<span class="chk"></span><span class="col" style:background={value}></span>
+			</button>
+			<input class="tr-bare mono" {id} aria-label={label ? undefined : ariaLabel} bind:this={input} bind:value={text} {disabled} spellcheck="false" autocomplete="off" maxlength="9"
+				aria-invalid={bad || undefined} onblur={commitText} onkeydown={(e) => e.key === 'Enter' && commitText()} />
+		</div>
+		<Popover bind:open onclose={(r) => r && input.focus()}>
+			<div class="panel">
+				<div
+					class="sv" bind:this={sv} role="slider" tabindex="0" aria-label="Saturation and brightness"
+					aria-valuetext="saturation {Math.round(hsv.s * 100)}%, brightness {Math.round(hsv.v * 100)}%" aria-valuenow={Math.round(hsv.s * 100)}
+					style:background-color="hsl({hsv.h} 100% 50%)" onpointerdown={(e) => drag(sv, e, (x, y) => commit({ ...hsv, s: x, v: 1 - y }))} onkeydown={svKey}
+				>
+					<span class="thumb" style:left="{hsv.s * 100}%" style:top="{(1 - hsv.v) * 100}%" style:background={solid}></span>
+				</div>
+				<div
+					class="rail hue" bind:this={hueEl} role="slider" tabindex="0" aria-label="Hue" aria-valuemin="0" aria-valuemax="360" aria-valuenow={Math.round(hsv.h)}
+					onpointerdown={(e) => drag(hueEl, e, (x) => commit({ ...hsv, h: x * 360 }))} onkeydown={(e) => railKey(e, hsv.h, 360, 1, (h) => commit({ ...hsv, h }))}
+				><span class="thumb" style:left="{(hsv.h / 360) * 100}%" style:background="hsl({hsv.h} 100% 50%)"></span></div>
+				{#if alpha}
+					<div
+						class="rail alpha" bind:this={alphaEl} role="slider" tabindex="0" aria-label="Opacity" aria-valuemin="0" aria-valuemax="100" aria-valuenow={Math.round(a * 100)}
+						style:--c={solid} onpointerdown={(e) => drag(alphaEl, e, (x) => commit(hsv, Math.round(x * 100) / 100))} onkeydown={(e) => railKey(e, a, 1, 0.01, (n) => commit(hsv, n))}
+					><span class="thumb" style:left="{a * 100}%" style:background={solid}></span></div>
+				{/if}
+				<div class="row">
+					<div class="prev"><span class="chk"></span><span class="col" style:background={value}></span></div>
+					<div class="rgb">{rgb.r}, {rgb.g}, {rgb.b}{alpha ? `, ${a.toFixed(2)}` : ''}</div>
+					{#if hasDropper}<Button size="sm" variant="minimal" intent="neutral" icon="dropper" aria-label="Pick color from screen" onclick={pipette} />{/if}
+				</div>
+				{#if swatches.length}
+					<div class="swatches" role="group" aria-label="Swatches">
+						{#each swatches as s}
+							<button type="button" class="s" style:background={s} aria-label={s} aria-pressed={value?.toLowerCase().slice(0, 7) === s.toLowerCase()} onclick={() => { const p = parseHex(s)!; const n = rgbToHsv(p); commit({ h: n.s === 0 || n.v === 0 ? hsv.h : n.h, s: n.s, v: n.v }); }}></button>
+						{/each}
+					</div>
+				{/if}
+			</div>
+		</Popover>
+	</div>
+	{#if error || bad}<div class="tr-hint" data-error="true">{error ?? 'Enter a hex color like #1f5fbf'}</div>{/if}
+</div>
+
+<style>
+	.chk { position: absolute; inset: 0; background: repeating-conic-gradient(var(--tr-outline-variant) 0 25%, transparent 0 50%) 0 0 / 8px 8px; }
+	.col { position: absolute; inset: 0; }
+	.sw { position: relative; flex: none; width: 20px; height: 20px; padding: 0; border: 1px solid var(--tr-outline); border-radius: var(--tr-radius-sm); overflow: hidden; cursor: pointer; }
+	.sw:focus-visible { outline: none; box-shadow: var(--tr-focus-ring); }
+	.mono { font-family: var(--tr-font-mono); text-transform: lowercase; }
+	.panel { width: 248px; padding: 10px; display: grid; gap: 10px; }
+	.sv { position: relative; height: 150px; border-radius: var(--tr-radius-sm); cursor: crosshair; touch-action: none; outline: none; background-image: linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, transparent); }
+	.rail { position: relative; height: 12px; border-radius: 6px; cursor: pointer; touch-action: none; outline: none; }
+	.hue { background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); }
+	.alpha { background: linear-gradient(to right, transparent, var(--c)), repeating-conic-gradient(var(--tr-outline-variant) 0 25%, transparent 0 50%) 0 0 / 8px 8px; }
+	.thumb { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.45), var(--tr-elevation-1); pointer-events: none; }
+	.rail .thumb { top: 50%; }
+	.sv:focus-visible, .rail:focus-visible { box-shadow: var(--tr-focus-ring); }
+	.row { display: flex; align-items: center; gap: 8px; }
+	.prev { position: relative; width: 28px; height: 28px; border: 1px solid var(--tr-outline); border-radius: var(--tr-radius-sm); overflow: hidden; }
+	.rgb { flex: 1; font: var(--tr-text-sm) var(--tr-font-mono); color: var(--tr-on-surface-variant); }
+	.swatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
+	.s { aspect-ratio: 1; border: 1px solid var(--tr-outline-variant); border-radius: var(--tr-radius-sm); cursor: pointer; }
+	.s[aria-pressed='true'] { box-shadow: 0 0 0 2px var(--tr-surface), 0 0 0 4px var(--tr-primary); }
+	.s:focus-visible { outline: none; box-shadow: var(--tr-focus-ring); }
+</style>

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

@@ -0,0 +1,14 @@
+type $$ComponentProps = {
+    /** #rrggbb, or #rrggbbaa when `alpha` is on and opacity < 1. */
+    value?: string;
+    label?: string;
+    /** Accessible name when no visible `label` is shown. */
+    ariaLabel?: string;
+    alpha?: boolean;
+    swatches?: string[];
+    disabled?: boolean;
+    error?: string;
+};
+declare const ColorPicker: import("svelte").Component<$$ComponentProps, {}, "value">;
+type ColorPicker = ReturnType<typeof ColorPicker>;
+export default ColorPicker;