@sepale/components 0.0.0-stage → 0.1.0

package/dist/components/Checkbox.svelte

@@ -0,0 +1,48 @@
+<script module lang="ts">
+	/** What .checkbox is made of, classified. The props follow the
+	    families the project registers (variants.ts, ADR 0015). */
+	export const PREFIX = 'checkbox';
+
+	export const AXES = {
+		color: ['primary', 'secondary', 'accent', 'neutral', 'info', 'success', 'warning', 'error'],
+		size: ['xs', 'sm', 'md', 'lg', 'xl'],
+		/* A square checkbox where the family rounds them, and the other way round. */
+		shape: ['square'],
+		variant: ['outline']
+	} as const;
+
+	export const FLAGS = {} as const;
+	export const PARTS = [] as const;
+</script>
+
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLInputAttributes } from 'svelte/elements';
+	import { applyAxes, cx, type AxisProps } from '../variants.js';
+
+	interface Props extends AxisProps<typeof AXES, typeof FLAGS, typeof PREFIX>, Omit<HTMLInputAttributes, 'size' | 'color' | 'type'> {
+		/** Colour the control by its own validity and reveal `hint` when invalid. */
+		validator?: boolean;
+		/** Shown below once invalid. It must be the control's next sibling for the
+		    CSS to reach it, which is why it is a prop rather than your markup. */
+		hint?: Snippet;
+		class?: string;
+		checked?: boolean;
+	}
+
+	// The axes are deliberately NOT destructured: they travel in `axes` and are
+	// resolved by name, so an axis a family drops changes nothing down here.
+	let {
+		validator = false,
+		hint,
+		checked = $bindable(false),
+		class: klass = '',
+		...axes
+	}: Props = $props();
+
+	let applied = $derived(applyAxes(PREFIX, AXES, FLAGS, axes));
+	let classes = $derived(cx(PREFIX, applied.classes, validator && 'validator', klass));
+</script>
+
+<input type="checkbox" {...applied.rest} class={classes} bind:checked />
+{#if hint}<p class="validator-hint">{@render hint()}</p>{/if}

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

@@ -0,0 +1,26 @@
+/** What .checkbox is made of, classified. The props follow the
+    families the project registers (variants.ts, ADR 0015). */
+export declare const PREFIX = "checkbox";
+export declare const AXES: {
+    readonly color: readonly ["primary", "secondary", "accent", "neutral", "info", "success", "warning", "error"];
+    readonly size: readonly ["xs", "sm", "md", "lg", "xl"];
+    readonly shape: readonly ["square"];
+    readonly variant: readonly ["outline"];
+};
+export declare const FLAGS: {};
+export declare const PARTS: readonly [];
+import type { Snippet } from 'svelte';
+import type { HTMLInputAttributes } from 'svelte/elements';
+import { type AxisProps } from '../variants.js';
+interface Props extends AxisProps<typeof AXES, typeof FLAGS, typeof PREFIX>, Omit<HTMLInputAttributes, 'size' | 'color' | 'type'> {
+    /** Colour the control by its own validity and reveal `hint` when invalid. */
+    validator?: boolean;
+    /** Shown below once invalid. It must be the control's next sibling for the
+        CSS to reach it, which is why it is a prop rather than your markup. */
+    hint?: Snippet;
+    class?: string;
+    checked?: boolean;
+}
+declare const Checkbox: import("svelte").Component<Props, {}, "checked">;
+type Checkbox = ReturnType<typeof Checkbox>;
+export default Checkbox;

package/dist/components/Chip.svelte

@@ -0,0 +1,60 @@
+<script module lang="ts">
+	/** What .chip is made of, classified. The props follow the
+	    families the project registers (variants.ts, ADR 0015). */
+	export const PREFIX = 'chip';
+
+	export const AXES = {
+		color: ['primary', 'secondary', 'accent', 'neutral', 'info', 'success', 'warning', 'error'],
+		size: ['xs', 'sm', 'md', 'lg', 'xl'],
+		/* Fill and border treatments. The family ships them as flat combinations
+		   rather than orthogonal axes, so they are one axis — and `variant` is the
+		   name kept for an exclusive group with no better one. */
+		variant: ['outline', 'dash', 'soft', 'ghost']
+	} as const;
+
+	export const FLAGS = {} as const;
+	export const PARTS = ['remove'] as const;
+</script>
+
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { applyAxes, cx, type AxisProps } from '../variants.js';
+
+	interface Props extends AxisProps<typeof AXES, typeof FLAGS, typeof PREFIX>, Omit<HTMLAttributes<HTMLSpanElement>, 'color'> {
+		/** Draw a remove button after the content, calling this. */
+		onRemove?: () => void;
+		/** The remove button's accessible name. */
+		removeLabel?: string;
+		/** Keep the remove button out of reach (it is hidden). */
+		disabled?: boolean;
+		class?: string;
+		children?: Snippet;
+	}
+
+	// The axes are deliberately NOT destructured: they travel in `axes` and are
+	// resolved by name, so an axis a family drops changes nothing down here.
+	let {
+		onRemove,
+		removeLabel = 'Remove',
+		disabled = false,
+		class: klass = '',
+		children,
+		...axes
+	}: Props = $props();
+
+	let applied = $derived(applyAxes(PREFIX, AXES, FLAGS, axes));
+	let classes = $derived(cx(PREFIX, applied.classes, klass));
+</script>
+
+<span {...applied.rest} class={classes}
+	>{@render children?.()}{#if onRemove}<button
+			type="button"
+			class="chip-remove"
+			aria-label={removeLabel}
+			{disabled}
+			onclick={onRemove}
+		>
+			<svg viewBox="0 0 24 24" width="0.9em" height="0.9em" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="m6 6 12 12M18 6 6 18" /></svg>
+		</button>{/if}</span
+>

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

@@ -0,0 +1,26 @@
+/** What .chip is made of, classified. The props follow the
+    families the project registers (variants.ts, ADR 0015). */
+export declare const PREFIX = "chip";
+export declare const AXES: {
+    readonly color: readonly ["primary", "secondary", "accent", "neutral", "info", "success", "warning", "error"];
+    readonly size: readonly ["xs", "sm", "md", "lg", "xl"];
+    readonly variant: readonly ["outline", "dash", "soft", "ghost"];
+};
+export declare const FLAGS: {};
+export declare const PARTS: readonly ["remove"];
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type AxisProps } from '../variants.js';
+interface Props extends AxisProps<typeof AXES, typeof FLAGS, typeof PREFIX>, Omit<HTMLAttributes<HTMLSpanElement>, 'color'> {
+    /** Draw a remove button after the content, calling this. */
+    onRemove?: () => void;
+    /** The remove button's accessible name. */
+    removeLabel?: string;
+    /** Keep the remove button out of reach (it is hidden). */
+    disabled?: boolean;
+    class?: string;
+    children?: Snippet;
+}
+declare const Chip: import("svelte").Component<Props, {}, "">;
+type Chip = ReturnType<typeof Chip>;
+export default Chip;

package/dist/components/ChipsInput.svelte

@@ -0,0 +1,158 @@
+<script module lang="ts">
+	/** What .chips-input is made of, classified. The props follow the
+	    families the project registers (variants.ts, ADR 0015). */
+	export const PREFIX = 'chips-input';
+
+	export const AXES = {
+		size: ['xs', 'sm', 'md', 'lg', 'xl'],
+		/* Where the list sits next to the field. Below by default. */
+		side: ['top', 'bottom', 'start', 'end']
+	} as const;
+
+	export const FLAGS = {} as const;
+	export const PARTS = ['list', 'remove'] as const;
+
+	/** What the `field` snippet receives: call `add` when the field commits a value. */
+	export interface ChipsInputField {
+		add: (value: string) => void;
+		/** Whether a value is already in the list. */
+		has: (value: string) => boolean;
+		/** `required` and no value yet: the field should say so to its form. */
+		missing: boolean;
+	}
+</script>
+
+<script lang="ts">
+	/**
+	 * A field that feeds a list of chips. A utility: the field is any
+	 * component — an Input, a Select, a Combobox — given `add` and calling it
+	 * when it commits a value; the values pile up as chips in a list next to
+	 * it (`side`), never inside it.
+	 *
+	 * Without `field`, a plain `.input` adds on Enter or a comma.
+	 *
+	 * `values` is bindable. Each one is also a hidden `name[]` input, so a
+	 * form submits them.
+	 */
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { applyAxes, cx, type AxisProps } from '../variants.js';
+
+	interface Props extends AxisProps<typeof AXES, typeof FLAGS, typeof PREFIX>, Omit<HTMLAttributes<HTMLDivElement>, 'onchange'> {
+		/** The values. Bindable. */
+		values?: string[];
+		/** For a form: one hidden `name[]` input per value. */
+		name?: string;
+		/** Refuse a value already there. */
+		unique?: boolean;
+		/** The default field's placeholder. */
+		placeholder?: string;
+		disabled?: boolean;
+		/** At least one value. The default field is then `required` while the list is empty. */
+		required?: boolean;
+		/** The default field's longest value. */
+		maxlength?: number;
+		/** Colour the default field by its validity, as Input's `validator`. */
+		validator?: boolean;
+		/** The field, given `add`. Defaults to a plain input (Enter or comma adds). */
+		field?: Snippet<[ChipsInputField]>;
+		/** How one chip reads. Defaults to the value. */
+		chip?: Snippet<[string]>;
+		/** After every addition or removal. */
+		onChange?: (values: string[]) => void;
+		/** A remove button's accessible name. */
+		removeLabel?: (value: string) => string;
+		/** The list's accessible name. */
+		listLabel?: string;
+		/** Classes on each chip: `chip-primary`, `chip-soft`… */
+		chipClass?: string;
+		class?: string;
+	}
+
+	// The axes are deliberately NOT destructured: they travel in `axes` and are
+	// resolved by name, so an axis a family drops changes nothing down here.
+	let {
+		values = $bindable([]),
+		name,
+		unique = true,
+		placeholder,
+		disabled = false,
+		required = false,
+		maxlength,
+		validator = false,
+		field,
+		chip,
+		onChange,
+		removeLabel = (v: string) => `Remove ${v}`,
+		listLabel,
+		chipClass = '',
+		class: klass = '',
+		...axes
+	}: Props = $props();
+
+	let applied = $derived(applyAxes(PREFIX, AXES, FLAGS, axes));
+	let classes = $derived(cx(PREFIX, applied.classes, klass));
+
+	let draft = $state('');
+
+	function add(value: string) {
+		const v = `${value ?? ''}`.trim();
+		if (!v || disabled || (unique && values.includes(v))) return;
+		values = [...values, v];
+		onChange?.(values);
+	}
+	const has = (value: string) => values.includes(`${value ?? ''}`.trim());
+	let missing = $derived(required && values.length === 0);
+
+	function remove(i: number) {
+		values = values.filter((_, n) => n !== i);
+		onChange?.(values);
+	}
+
+	function draftKeydown(e: KeyboardEvent) {
+		if (e.key === 'Enter' || e.key === ',') {
+			e.preventDefault();
+			add(draft);
+			draft = '';
+		} else if (e.key === 'Backspace' && draft === '' && values.length && !disabled) {
+			/* Backspace in the empty default field: the last chip goes. */
+			remove(values.length - 1);
+		}
+	}
+</script>
+
+<div {...applied.rest} class={classes}>
+	{#if field}
+		{@render field({ add, has, missing })}
+	{:else}
+		<input
+			class={cx('input', validator && 'validator')}
+			bind:value={draft}
+			{placeholder}
+			{disabled}
+			{maxlength}
+			required={missing}
+			onkeydown={draftKeydown}
+			onblur={() => (add(draft), (draft = ''))}
+		/>
+	{/if}
+	<ul class="chips-input-list" aria-label={listLabel}>
+		{#each values as v, i (v + i)}
+			<li class={cx('chip', chipClass)}>
+				{#if chip}{@render chip(v)}{:else}{v}{/if}
+				<button
+					type="button"
+					class="chips-input-remove"
+					aria-label={removeLabel(v)}
+					{disabled}
+					onclick={() => remove(i)}
+				>
+					<svg viewBox="0 0 24 24" width="0.9em" height="0.9em" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="m6 6 12 12M18 6 6 18" /></svg>
+				</button>
+			</li>
+		{/each}
+	</ul>
+	{#if name}
+		{#each values as v, i (v + i)}<input type="hidden" name="{name}[]" value={v} />{/each}
+	{/if}
+</div>

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

@@ -0,0 +1,64 @@
+/** What .chips-input is made of, classified. The props follow the
+    families the project registers (variants.ts, ADR 0015). */
+export declare const PREFIX = "chips-input";
+export declare const AXES: {
+    readonly size: readonly ["xs", "sm", "md", "lg", "xl"];
+    readonly side: readonly ["top", "bottom", "start", "end"];
+};
+export declare const FLAGS: {};
+export declare const PARTS: readonly ["list", "remove"];
+/** What the `field` snippet receives: call `add` when the field commits a value. */
+export interface ChipsInputField {
+    add: (value: string) => void;
+    /** Whether a value is already in the list. */
+    has: (value: string) => boolean;
+    /** `required` and no value yet: the field should say so to its form. */
+    missing: boolean;
+}
+/**
+     * A field that feeds a list of chips. A utility: the field is any
+     * component — an Input, a Select, a Combobox — given `add` and calling it
+     * when it commits a value; the values pile up as chips in a list next to
+     * it (`side`), never inside it.
+     *
+     * Without `field`, a plain `.input` adds on Enter or a comma.
+     *
+     * `values` is bindable. Each one is also a hidden `name[]` input, so a
+     * form submits them.
+     */
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type AxisProps } from '../variants.js';
+interface Props extends AxisProps<typeof AXES, typeof FLAGS, typeof PREFIX>, Omit<HTMLAttributes<HTMLDivElement>, 'onchange'> {
+    /** The values. Bindable. */
+    values?: string[];
+    /** For a form: one hidden `name[]` input per value. */
+    name?: string;
+    /** Refuse a value already there. */
+    unique?: boolean;
+    /** The default field's placeholder. */
+    placeholder?: string;
+    disabled?: boolean;
+    /** At least one value. The default field is then `required` while the list is empty. */
+    required?: boolean;
+    /** The default field's longest value. */
+    maxlength?: number;
+    /** Colour the default field by its validity, as Input's `validator`. */
+    validator?: boolean;
+    /** The field, given `add`. Defaults to a plain input (Enter or comma adds). */
+    field?: Snippet<[ChipsInputField]>;
+    /** How one chip reads. Defaults to the value. */
+    chip?: Snippet<[string]>;
+    /** After every addition or removal. */
+    onChange?: (values: string[]) => void;
+    /** A remove button's accessible name. */
+    removeLabel?: (value: string) => string;
+    /** The list's accessible name. */
+    listLabel?: string;
+    /** Classes on each chip: `chip-primary`, `chip-soft`… */
+    chipClass?: string;
+    class?: string;
+}
+declare const ChipsInput: import("svelte").Component<Props, {}, "values">;
+type ChipsInput = ReturnType<typeof ChipsInput>;
+export default ChipsInput;

package/dist/components/Collapse.svelte

@@ -0,0 +1,101 @@
+<script module lang="ts">
+	/** What .collapse is made of, classified. The props follow the
+	    families the project registers (variants.ts, ADR 0015). */
+	export const PREFIX = 'collapse';
+
+	export const AXES = {
+		size: ['xs', 'sm', 'md', 'lg', 'xl'],
+		/* Draw no frame: the trigger and the content sit on the page. */
+		variant: ['ghost']
+	} as const;
+
+	export const FLAGS = {
+		arrow: 'Draw a chevron that turns when open.',
+		plus: 'Draw a plus that becomes a minus when open.'
+	} as const;
+	export const PARTS = ['trigger', 'panel', 'inner'] as const;
+</script>
+
+<script lang="ts">
+	/**
+	 * A panel that folds under its trigger.
+	 *
+	 * A button and a region rather than <details>: the height animates, and the
+	 * state is the button's `aria-expanded`, which the stylesheet reads. The
+	 * closed panel is `inert`, so nothing inside it can be focused.
+	 *
+	 * `open` is where it starts. To drive it from outside, use the methods —
+	 * `bind:this={c}` then `c.show()`, `c.hide()`, `c.toggle()` — and listen
+	 * with `onToggle`. Inside an exclusive Accordion, opening one closes the
+	 * others.
+	 */
+	import { untrack, type Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { getAccordion } from './accordion-context.js';
+	import { applyAxes, cx, type AxisProps } from '../variants.js';
+
+	interface Props extends AxisProps<typeof AXES, typeof FLAGS, typeof PREFIX>, Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+		/** The trigger's text. */
+		title?: string;
+		/** The trigger's content, as markup. Wins over `title`. */
+		trigger?: Snippet;
+		/** Whether it starts open. Not bound: use the methods to drive it. */
+		open?: boolean;
+		/** After every change, with the new state. */
+		onToggle?: (open: boolean) => void;
+		class?: string;
+		children?: Snippet;
+	}
+
+	// The axes are deliberately NOT destructured: they travel in `axes` and are
+	// resolved by name, so an axis a family drops changes nothing down here.
+	let {
+		title,
+		trigger,
+		open: initial = false,
+		onToggle,
+		class: klass = '',
+		children,
+		...axes
+	}: Props = $props();
+
+	let applied = $derived(applyAxes(PREFIX, AXES, FLAGS, axes));
+	let classes = $derived(cx(PREFIX, applied.classes, klass));
+
+	/* Where it starts, read once: afterwards the methods own it. */
+	let isOpen = $state(untrack(() => initial));
+	const id = `collapse-${Math.random().toString(36).slice(2, 9)}`;
+
+	const group = getAccordion();
+	const closeFromGroup = () => set(false);
+	if (group) {
+		const leave = group.join(closeFromGroup);
+		$effect(() => leave);
+	}
+
+	function set(next: boolean) {
+		if (next === isOpen) return;
+		isOpen = next;
+		if (next) group?.opened(closeFromGroup);
+		onToggle?.(next);
+	}
+
+	export function show() {
+		set(true);
+	}
+	export function hide() {
+		set(false);
+	}
+	export function toggle() {
+		set(!isOpen);
+	}
+</script>
+
+<div {...applied.rest} class={classes}>
+	<button type="button" class="collapse-trigger" aria-expanded={isOpen} aria-controls={id} onclick={toggle}>
+		{#if trigger}{@render trigger()}{:else}{title}{/if}
+	</button>
+	<div class="collapse-panel" {id} role="region" inert={!isOpen}>
+		<div class="collapse-inner">{@render children?.()}</div>
+	</div>
+</div>

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

@@ -0,0 +1,46 @@
+/** What .collapse is made of, classified. The props follow the
+    families the project registers (variants.ts, ADR 0015). */
+export declare const PREFIX = "collapse";
+export declare const AXES: {
+    readonly size: readonly ["xs", "sm", "md", "lg", "xl"];
+    readonly variant: readonly ["ghost"];
+};
+export declare const FLAGS: {
+    readonly arrow: "Draw a chevron that turns when open.";
+    readonly plus: "Draw a plus that becomes a minus when open.";
+};
+export declare const PARTS: readonly ["trigger", "panel", "inner"];
+/**
+     * A panel that folds under its trigger.
+     *
+     * A button and a region rather than <details>: the height animates, and the
+     * state is the button's `aria-expanded`, which the stylesheet reads. The
+     * closed panel is `inert`, so nothing inside it can be focused.
+     *
+     * `open` is where it starts. To drive it from outside, use the methods —
+     * `bind:this={c}` then `c.show()`, `c.hide()`, `c.toggle()` — and listen
+     * with `onToggle`. Inside an exclusive Accordion, opening one closes the
+     * others.
+     */
+import { type Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type AxisProps } from '../variants.js';
+interface Props extends AxisProps<typeof AXES, typeof FLAGS, typeof PREFIX>, Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** The trigger's text. */
+    title?: string;
+    /** The trigger's content, as markup. Wins over `title`. */
+    trigger?: Snippet;
+    /** Whether it starts open. Not bound: use the methods to drive it. */
+    open?: boolean;
+    /** After every change, with the new state. */
+    onToggle?: (open: boolean) => void;
+    class?: string;
+    children?: Snippet;
+}
+declare const Collapse: import("svelte").Component<Props, {
+    show: () => void;
+    hide: () => void;
+    toggle: () => void;
+}, "">;
+type Collapse = ReturnType<typeof Collapse>;
+export default Collapse;

package/dist/components/ColorPicker.svelte

@@ -0,0 +1,135 @@
+<script module lang="ts">
+	/** What .color-picker is made of, classified. The props follow the
+	    families the project registers (variants.ts, ADR 0015). */
+	export const PREFIX = 'color-picker';
+
+	export const AXES = {
+		size: ['xs', 'sm', 'md', 'lg', 'xl']
+	} as const;
+
+	export const FLAGS = {
+		flat: 'No box of its own: the host — a dropdown, a card — draws it.'
+	} as const;
+	export const PARTS = ['head', 'preview', 'value', 'channel', 'track', 'presets'] as const;
+</script>
+
+<script lang="ts">
+	/**
+	 * One colour, edited in OKLCH: lightness, chroma, hue, each a slider
+	 * whose track is the gradient it moves along, plus the raw value for
+	 * anything the sliders cannot say (`color-mix(…)`, a `var()`).
+	 *
+	 * A panel, not a popover: put it in a Dropdown to float it.
+	 *
+	 * The three numbers are state, seeded from `value` and then only written:
+	 * reading them back from the colour on every drag goes through a lossy
+	 * conversion, and moving the hue would nudge the lightness.
+	 */
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { oklchToCss, toOklch, type Oklch } from './color.js';
+	import { applyAxes, cx, type AxisProps } from '../variants.js';
+
+	interface Props extends AxisProps<typeof AXES, typeof FLAGS, typeof PREFIX>, Omit<HTMLAttributes<HTMLDivElement>, 'onchange'> {
+		/** Any CSS colour. Bindable; written back as `oklch(…)`. */
+		value?: string;
+		/** Colours one click away, drawn as swatches. */
+		presets?: string[];
+		/** Hide the raw value field. */
+		noInput?: boolean;
+		/** The channels' accessible names. */
+		labels?: { l?: string; c?: string; h?: string; value?: string };
+		/** After every change. */
+		onChange?: (value: string) => void;
+		class?: string;
+	}
+
+	// The axes are deliberately NOT destructured: they travel in `axes` and are
+	// resolved by name, so an axis a family drops changes nothing down here.
+	let {
+		value = $bindable('oklch(62% 0.19 260)'),
+		presets = [],
+		noInput = false,
+		labels = {},
+		onChange,
+		class: klass = '',
+		...axes
+	}: Props = $props();
+
+	let applied = $derived(applyAxes(PREFIX, AXES, FLAGS, axes));
+	let classes = $derived(cx(PREFIX, applied.classes, klass));
+
+	let lch = $state<Oklch>({ l: 0.62, c: 0.19, h: 260 });
+	/* The value this component last wrote: a different one came from outside. */
+	let written = '';
+	$effect.pre(() => {
+		if (value !== written && typeof document !== 'undefined') lch = toOklch(value);
+	});
+
+	function emit(v: string) {
+		written = v;
+		value = v;
+		onChange?.(v);
+	}
+	function set(part: Partial<Oklch>) {
+		lch = { ...lch, ...part };
+		emit(oklchToCss(lch));
+	}
+	function pick(v: string) {
+		lch = toOklch(v);
+		emit(v);
+	}
+
+	const ramp = (vals: number[], key: 'l' | 'c' | 'h') =>
+		`linear-gradient(to right, ${vals.map((v) => oklchToCss({ ...lch, [key]: v })).join(', ')})`;
+	let channels = $derived([
+		{ key: 'l' as const, short: 'L', name: labels.l ?? 'Lightness', min: 0, max: 1, step: 0.005, track: ramp([0, 0.25, 0.5, 0.75, 1], 'l'), shown: Math.round(lch.l * 100) },
+		{ key: 'c' as const, short: 'C', name: labels.c ?? 'Chroma', min: 0, max: 0.37, step: 0.005, track: ramp([0, 0.1, 0.2, 0.3, 0.37], 'c'), shown: Math.round(lch.c * 100) / 100 },
+		{ key: 'h' as const, short: 'H', name: labels.h ?? 'Hue', min: 0, max: 360, step: 1, track: ramp(Array.from({ length: 13 }, (_, i) => i * 30), 'h'), shown: Math.round(lch.h) }
+	]);
+</script>
+
+<div {...applied.rest} class={classes} style:--color-picker-value={value}>
+	<div class="{PREFIX}-head">
+		<span class="{PREFIX}-preview"></span>
+		{#if !noInput}
+			<input
+				class="input input-sm {PREFIX}-value"
+				aria-label={labels.value ?? 'Value'}
+				spellcheck="false"
+				{value}
+				onchange={(e) => pick(e.currentTarget.value)}
+			/>
+		{/if}
+	</div>
+	{#each channels as ch (ch.key)}
+		<label class="{PREFIX}-channel">
+			<span title={ch.name}>{ch.short}</span>
+			<input
+				type="range"
+				class="{PREFIX}-track"
+				aria-label={ch.name}
+				min={ch.min}
+				max={ch.max}
+				step={ch.step}
+				value={lch[ch.key]}
+				style:--color-picker-track={ch.track}
+				oninput={(e) => set({ [ch.key]: Number(e.currentTarget.value) })}
+			/>
+			<output>{ch.shown}</output>
+		</label>
+	{/each}
+	{#if presets.length}
+		<div class="{PREFIX}-presets">
+			{#each presets as p (p)}
+				<button
+					type="button"
+					class={cx('swatch', 'swatch-sm', p === value && 'swatch-active')}
+					style:--swatch-color={p}
+					aria-label={p}
+					title={p}
+					onclick={() => pick(p)}
+				></button>
+			{/each}
+		</div>
+	{/if}
+</div>