@lostgradient/cinder 0.6.0 → 0.8.0

package/src/components/color-picker/color-picker.svelte

@@ -0,0 +1,629 @@
+<script lang="ts" module>
+export {};
+</script>
+
+<script lang="ts">
+import { untrack } from 'svelte';
+import { classNames } from '../../utilities/class-names.ts';
+import { parseColor } from '../../utilities/color-luminance.ts';
+import ColorSwatchPicker from '../color-swatch-picker/color-swatch-picker.svelte';
+const pickerId = $props.id();
+let { value = $bindable(), defaultValue, alpha = false, name, swatches, disabled = false, class: className, label = 'Color picker', onchange, oninput, } = $props();
+const gradientId = `${pickerId}-gradient`;
+const hueId = `${pickerId}-hue`;
+const alphaId = `${pickerId}-alpha`;
+const previewId = `${pickerId}-preview`;
+// Internal canonical state is HSLA. We only round-trip to RGB/hex at the edges.
+let hue = $state(0); // 0–360
+let saturation = $state(100); // 0–100 (HSL saturation at the gradient corner)
+let lightnessValue = $state(50); // 0–100
+let alphaValue = $state(1); // 0–1
+let internalValue = $state('');
+// Plain (non-reactive) coordination var: holds the most recent value the component
+// wrote out to `value`. The controlled-sync effect uses this to skip its own echo.
+let lastEmittedHex = '';
+let isDragging = $state(false);
+function clamp(n, min, max) {
+    return Math.max(min, Math.min(max, n));
+}
+function toHex2(n) {
+    return clamp(Math.round(n), 0, 255).toString(16).padStart(2, '0');
+}
+function normalizeHue(h) {
+    return Math.min(((h % 360) + 360) % 360, 359);
+}
+function rgbToHsl(r, g, b) {
+    const rn = r / 255;
+    const gn = g / 255;
+    const bn = b / 255;
+    const max = Math.max(rn, gn, bn);
+    const min = Math.min(rn, gn, bn);
+    const l = (max + min) / 2;
+    if (max === min)
+        return { h: 0, s: 0, l: l * 100 };
+    const d = max - min;
+    const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    let h = 0;
+    if (max === rn)
+        h = ((gn - bn) / d + (gn < bn ? 6 : 0)) * 60;
+    else if (max === gn)
+        h = ((bn - rn) / d + 2) * 60;
+    else
+        h = ((rn - gn) / d + 4) * 60;
+    return { h, s: s * 100, l: l * 100 };
+}
+function hslToRgb(h, s, l) {
+    const sn = clamp(s, 0, 100) / 100;
+    const ln = clamp(l, 0, 100) / 100;
+    const hn = (((h % 360) + 360) % 360) / 360;
+    if (sn === 0) {
+        const v = Math.round(ln * 255);
+        return { r: v, g: v, b: v };
+    }
+    const q = ln < 0.5 ? ln * (1 + sn) : ln + sn - ln * sn;
+    const p = 2 * ln - q;
+    const hueToRgb = (t) => {
+        let tn = t;
+        if (tn < 0)
+            tn += 1;
+        if (tn > 1)
+            tn -= 1;
+        if (tn < 1 / 6)
+            return p + (q - p) * 6 * tn;
+        if (tn < 1 / 2)
+            return q;
+        if (tn < 2 / 3)
+            return p + (q - p) * (2 / 3 - tn) * 6;
+        return p;
+    };
+    return {
+        r: Math.round(hueToRgb(hn + 1 / 3) * 255),
+        g: Math.round(hueToRgb(hn) * 255),
+        b: Math.round(hueToRgb(hn - 1 / 3) * 255),
+    };
+}
+function formatHex(h, s, l, a, withAlpha) {
+    const { r, g, b } = hslToRgb(h, s, l);
+    const base = `#${toHex2(r)}${toHex2(g)}${toHex2(b)}`;
+    if (!withAlpha)
+        return base;
+    return base + toHex2(a * 255);
+}
+function parseToHsla(input) {
+    const parsed = parseColor(input);
+    if (!parsed)
+        return null;
+    const { h, s, l } = rgbToHsl(parsed.r, parsed.g, parsed.b);
+    return { h: normalizeHue(h), s, l, a: parsed.a };
+}
+function applyHsla(next) {
+    hue = next.h;
+    saturation = next.s;
+    lightnessValue = next.l;
+    alphaValue = alpha ? next.a : 1;
+}
+// Snapshot the seed props once. Initialization reads only the mount-time
+// values; the controlled-sync effect (below) handles later `value` changes.
+const initialValue = untrack(() => value);
+const initialDefaultValue = untrack(() => defaultValue);
+const initialAlpha = untrack(() => alpha);
+// Initialize from defaultValue (only when uncontrolled).
+if (initialValue === undefined && initialDefaultValue) {
+    const parsed = parseToHsla(initialDefaultValue);
+    if (parsed) {
+        applyHsla(parsed);
+        internalValue = formatHex(parsed.h, parsed.s, parsed.l, parsed.a, initialAlpha);
+    }
+    else {
+        hue = 0;
+        saturation = 0;
+        lightnessValue = 0;
+        alphaValue = 1;
+        internalValue = '';
+        lastEmittedHex = '';
+    }
+}
+else if (initialValue !== undefined) {
+    const parsed = parseToHsla(initialValue);
+    if (parsed) {
+        applyHsla(parsed);
+        internalValue = formatHex(parsed.h, parsed.s, parsed.l, parsed.a, initialAlpha);
+    }
+    else {
+        hue = 0;
+        saturation = 0;
+        lightnessValue = 0;
+        alphaValue = 1;
+        internalValue = '';
+        lastEmittedHex = '';
+    }
+}
+// Sync incoming `value` (controlled) to internal HSLA, but skip the echo of our
+// own writes. We compare against `lastEmittedHex` rather than using a one-shot
+// suppression flag so a parent that normalizes or rejects the emitted value
+// (and writes a different one back) is not ignored.
+$effect(() => {
+    if (value === undefined)
+        return;
+    if (value !== '' && value === lastEmittedHex)
+        return;
+    const parsed = value === '' ? null : parseToHsla(value);
+    if (parsed === null) {
+        hue = 0;
+        saturation = 0;
+        lightnessValue = 0;
+        alphaValue = 1;
+        internalValue = '';
+        lastEmittedHex = '';
+        return;
+    }
+    applyHsla(parsed);
+    internalValue = formatHex(parsed.h, parsed.s, parsed.l, parsed.a, alpha);
+});
+// Re-normalize internal value when the `alpha` mode toggles after mount so
+// hidden input / bound value reflect the new emit format immediately.
+$effect(() => {
+    void alpha;
+    if (internalValue === '')
+        return;
+    const hex = formatHex(hue, saturation, lightnessValue, alphaValue, alpha);
+    if (hex === internalValue)
+        return;
+    internalValue = hex;
+    lastEmittedHex = hex;
+    if (value !== undefined && value !== hex)
+        value = hex;
+});
+function emit(reason) {
+    const hex = formatHex(hue, saturation, lightnessValue, alphaValue, alpha);
+    internalValue = hex;
+    lastEmittedHex = hex;
+    if (value !== undefined)
+        value = hex;
+    // Every value mutation fires `oninput`; `onchange` additionally fires on commit.
+    oninput?.(hex);
+    if (reason === 'change')
+        onchange?.(hex);
+}
+function commitFromHsla(next, reason) {
+    applyHsla(next);
+    emit(reason);
+}
+function commitCurrentValueChange() {
+    const hex = formatHex(hue, saturation, lightnessValue, alphaValue, alpha);
+    internalValue = hex;
+    lastEmittedHex = hex;
+    if (value !== undefined)
+        value = hex;
+    onchange?.(hex);
+}
+// ── Gradient handling ──────────────────────────────────────────────────
+let gradientElement = $state(null);
+/**
+ * Map a pointer event to (saturation, lightness) using the HSV-style square
+ * common to color pickers: x = saturation 0→100, y = value 100→0. We convert
+ * HSV to HSL on the way out so internal state stays HSL.
+ */
+function pointerToHsl(event) {
+    const target = gradientElement;
+    if (!target)
+        return { s: saturation, l: lightnessValue };
+    const rect = target.getBoundingClientRect();
+    const x = clamp(event.clientX - rect.left, 0, rect.width);
+    const y = clamp(event.clientY - rect.top, 0, rect.height);
+    const sv = rect.width === 0 ? 0 : x / rect.width; // 0–1 HSV saturation
+    const vv = rect.height === 0 ? 1 : 1 - y / rect.height; // 0–1 HSV value
+    // HSV → HSL
+    const l = vv * (1 - sv / 2);
+    const s = l === 0 || l === 1 ? 0 : (vv - l) / Math.min(l, 1 - l);
+    return { s: s * 100, l: l * 100 };
+}
+function handleGradientPointerDown(event) {
+    if (disabled)
+        return;
+    event.preventDefault();
+    gradientElement?.setPointerCapture(event.pointerId);
+    isDragging = true;
+    const { s, l } = pointerToHsl(event);
+    commitFromHsla({ h: hue, s, l, a: alphaValue }, 'input');
+}
+function handleGradientPointerMove(event) {
+    if (!isDragging || disabled)
+        return;
+    const { s, l } = pointerToHsl(event);
+    commitFromHsla({ h: hue, s, l, a: alphaValue }, 'input');
+}
+function handleGradientPointerUp(event) {
+    if (!isDragging)
+        return;
+    isDragging = false;
+    gradientElement?.releasePointerCapture(event.pointerId);
+    commitCurrentValueChange();
+}
+function handleGradientPointerCancel(event) {
+    if (!isDragging)
+        return;
+    isDragging = false;
+    gradientElement?.releasePointerCapture(event.pointerId);
+}
+// ── Slider pointer handling ─────────────────────────────────────────────
+// bind:this refs use $state so teardown sees the latest element references;
+// the drag discriminator is read only inside event handlers.
+let hueElement = $state(null);
+let alphaElement = $state(null);
+let draggingSlider = null;
+function pointerToFraction(event, element) {
+    const rect = element.getBoundingClientRect();
+    const x = clamp(event.clientX - rect.left, 0, rect.width);
+    return rect.width === 0 ? 0 : x / rect.width;
+}
+function handleHuePointerDown(event) {
+    if (disabled || !hueElement)
+        return;
+    event.preventDefault();
+    hueElement.setPointerCapture(event.pointerId);
+    draggingSlider = 'hue';
+    const fraction = pointerToFraction(event, hueElement);
+    commitFromHsla({ h: fraction * 359, s: saturation, l: lightnessValue, a: alphaValue }, 'input');
+}
+function handleHuePointerMove(event) {
+    if (draggingSlider !== 'hue' || disabled || !hueElement)
+        return;
+    const fraction = pointerToFraction(event, hueElement);
+    commitFromHsla({ h: fraction * 359, s: saturation, l: lightnessValue, a: alphaValue }, 'input');
+}
+function handleHuePointerUp(event) {
+    if (draggingSlider !== 'hue')
+        return;
+    draggingSlider = null;
+    hueElement?.releasePointerCapture(event.pointerId);
+    commitCurrentValueChange();
+}
+function handleHuePointerCancel(event) {
+    if (draggingSlider !== 'hue')
+        return;
+    draggingSlider = null;
+    hueElement?.releasePointerCapture(event.pointerId);
+}
+function handleAlphaPointerDown(event) {
+    if (disabled || !alphaElement)
+        return;
+    event.preventDefault();
+    alphaElement.setPointerCapture(event.pointerId);
+    draggingSlider = 'alpha';
+    const fraction = pointerToFraction(event, alphaElement);
+    commitFromHsla({ h: hue, s: saturation, l: lightnessValue, a: fraction }, 'input');
+}
+function handleAlphaPointerMove(event) {
+    if (draggingSlider !== 'alpha' || disabled || !alphaElement)
+        return;
+    const fraction = pointerToFraction(event, alphaElement);
+    commitFromHsla({ h: hue, s: saturation, l: lightnessValue, a: fraction }, 'input');
+}
+function handleAlphaPointerUp(event) {
+    if (draggingSlider !== 'alpha')
+        return;
+    draggingSlider = null;
+    alphaElement?.releasePointerCapture(event.pointerId);
+    commitCurrentValueChange();
+}
+function handleAlphaPointerCancel(event) {
+    if (draggingSlider !== 'alpha')
+        return;
+    draggingSlider = null;
+    alphaElement?.releasePointerCapture(event.pointerId);
+}
+// ── Slider keyboard handling ────────────────────────────────────────────
+function adjustHue(delta) {
+    const next = (((hue + delta) % 360) + 360) % 360;
+    commitFromHsla({ h: next, s: saturation, l: lightnessValue, a: alphaValue }, 'change');
+}
+function adjustAlpha(delta) {
+    const next = clamp(alphaValue + delta, 0, 1);
+    commitFromHsla({ h: hue, s: saturation, l: lightnessValue, a: next }, 'change');
+}
+function handleHueKeydown(event) {
+    if (disabled)
+        return;
+    const step = event.shiftKey ? 10 : 1;
+    switch (event.key) {
+        case 'ArrowLeft':
+        case 'ArrowDown':
+            event.preventDefault();
+            adjustHue(-step);
+            break;
+        case 'ArrowRight':
+        case 'ArrowUp':
+            event.preventDefault();
+            adjustHue(step);
+            break;
+        case 'Home':
+            event.preventDefault();
+            commitFromHsla({ h: 0, s: saturation, l: lightnessValue, a: alphaValue }, 'change');
+            break;
+        case 'End':
+            event.preventDefault();
+            commitFromHsla({ h: 359, s: saturation, l: lightnessValue, a: alphaValue }, 'change');
+            break;
+        case 'PageUp':
+            event.preventDefault();
+            adjustHue(36);
+            break;
+        case 'PageDown':
+            event.preventDefault();
+            adjustHue(-36);
+            break;
+    }
+}
+function handleAlphaKeydown(event) {
+    if (disabled)
+        return;
+    const step = event.shiftKey ? 0.1 : 0.01;
+    switch (event.key) {
+        case 'ArrowLeft':
+        case 'ArrowDown':
+            event.preventDefault();
+            adjustAlpha(-step);
+            break;
+        case 'ArrowRight':
+        case 'ArrowUp':
+            event.preventDefault();
+            adjustAlpha(step);
+            break;
+        case 'Home':
+            event.preventDefault();
+            commitFromHsla({ h: hue, s: saturation, l: lightnessValue, a: 0 }, 'change');
+            break;
+        case 'End':
+            event.preventDefault();
+            commitFromHsla({ h: hue, s: saturation, l: lightnessValue, a: 1 }, 'change');
+            break;
+        case 'PageUp':
+            event.preventDefault();
+            adjustAlpha(0.1);
+            break;
+        case 'PageDown':
+            event.preventDefault();
+            adjustAlpha(-0.1);
+            break;
+    }
+}
+// Gradient region keyboard arrow keys also nudge saturation/lightness so the
+// region is at least partially keyboard-operable, even though the underlying
+// 2D selection is inherently pointer-friendly. Documented in a11y memo.
+function handleGradientKeydown(event) {
+    if (disabled)
+        return;
+    const step = event.shiftKey ? 10 : 1;
+    let nextS = saturation;
+    let nextL = lightnessValue;
+    let handled = false;
+    switch (event.key) {
+        case 'ArrowLeft':
+            nextS = clamp(saturation - step, 0, 100);
+            handled = true;
+            break;
+        case 'ArrowRight':
+            nextS = clamp(saturation + step, 0, 100);
+            handled = true;
+            break;
+        case 'ArrowUp':
+            nextL = clamp(lightnessValue + step, 0, 100);
+            handled = true;
+            break;
+        case 'ArrowDown':
+            nextL = clamp(lightnessValue - step, 0, 100);
+            handled = true;
+            break;
+    }
+    if (handled) {
+        event.preventDefault();
+        commitFromHsla({ h: hue, s: nextS, l: nextL, a: alphaValue }, 'change');
+    }
+}
+// ── Swatch composition ──────────────────────────────────────────────────
+/**
+ * Canonicalize a swatch string to the same hex format the picker emits, so
+ * value-matching in ColorSwatchPicker works regardless of input syntax
+ * (#0f0 vs #00ff00 vs rgb()). Returns null when the swatch is unparseable.
+ */
+function normalizeSwatch(swatch) {
+    const parsed = parseToHsla(swatch);
+    if (!parsed)
+        return null;
+    return formatHex(parsed.h, parsed.s, parsed.l, parsed.a, alpha).toLowerCase();
+}
+/**
+ * Pre-normalized swatches mapped to the ColorSwatch shape that ColorSwatchPicker
+ * expects. Entries that fail `normalizeSwatch` keep their original string as the
+ * color: a CSS-valid-but-non-normalizable value still paints its swatch background,
+ * while a truly invalid value (e.g. `not-a-color`) paints nothing — either way it
+ * never matches the selected value, so it can never show as selected or be committed.
+ */
+const normalizedSwatchColors = $derived((swatches ?? []).map((swatch) => ({
+    color: normalizeSwatch(swatch) ?? swatch,
+})));
+const currentHex = $derived(formatHex(hue, saturation, lightnessValue, alphaValue, alpha));
+function handleSwatchChange(selectedColor) {
+    if (disabled)
+        return;
+    const parsed = parseToHsla(selectedColor);
+    if (!parsed)
+        return;
+    commitFromHsla(parsed, 'change');
+}
+// ── Form reset ──────────────────────────────────────────────────────────
+let hiddenInput = $state(null);
+$effect(() => {
+    const input = hiddenInput;
+    if (input === null)
+        return;
+    // Use input.form (not closest('form')): HTMLInputElement.form honors the `form`
+    // attribute association, so a hidden input linked to a non-ancestor form via
+    // <input form="id"> still wires up its reset listener.
+    const form = input.form;
+    if (form === null)
+        return;
+    function resetToDefault() {
+        const fallback = defaultValue ?? '';
+        const parsed = fallback === '' ? null : parseToHsla(fallback);
+        if (parsed === null) {
+            hue = 0;
+            saturation = 0;
+            lightnessValue = 0;
+            alphaValue = 1;
+            internalValue = '';
+            lastEmittedHex = '';
+            if (value !== undefined)
+                value = '';
+            return;
+        }
+        applyHsla(parsed);
+        const hex = formatHex(parsed.h, parsed.s, parsed.l, parsed.a, alpha);
+        internalValue = hex;
+        lastEmittedHex = hex;
+        if (value !== undefined)
+            value = hex;
+    }
+    form.addEventListener('reset', resetToDefault);
+    return () => {
+        form.removeEventListener('reset', resetToDefault);
+    };
+});
+// ── Visual derived data ─────────────────────────────────────────────────
+const hueColor = $derived(`hsl(${hue}, 100%, 50%)`);
+const previewColor = $derived(internalValue === ''
+    ? 'transparent'
+    : alpha
+        ? `hsla(${hue}, ${saturation}%, ${lightnessValue}%, ${alphaValue})`
+        : `hsl(${hue}, ${saturation}%, ${lightnessValue}%)`);
+// HSV position of the gradient handle (x = HSV saturation, y = HSV value).
+const handlePosition = $derived.by(() => {
+    const ln = lightnessValue / 100;
+    const sn = saturation / 100;
+    const v = ln + sn * Math.min(ln, 1 - ln);
+    const svFromHsl = v === 0 ? 0 : 2 * (1 - ln / v);
+    return { x: svFromHsl * 100, y: (1 - v) * 100 };
+});
+const hueAriaValue = $derived(Math.round(hue));
+const alphaAriaValue = $derived(Math.round(alphaValue * 100));
+</script>
+
+<div
+  class={classNames('cinder-color-picker', className)}
+  data-cinder-disabled={disabled ? '' : undefined}
+  data-cinder-alpha={alpha ? '' : undefined}
+  aria-label={label}
+  role="group"
+  id={pickerId}
+>
+  <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+  <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+  <div
+    bind:this={gradientElement}
+    id={gradientId}
+    role="application"
+    aria-label="Color saturation and lightness. Use a pointer to select; arrow keys provide coarse keyboard adjustment."
+    aria-describedby={previewId}
+    aria-disabled={disabled ? 'true' : undefined}
+    class="cinder-color-picker__gradient"
+    style="--cinder-color-picker-hue: {hueColor};"
+    tabindex={disabled ? -1 : 0}
+    onpointerdown={handleGradientPointerDown}
+    onpointermove={handleGradientPointerMove}
+    onpointerup={handleGradientPointerUp}
+    onpointercancel={handleGradientPointerCancel}
+    onkeydown={handleGradientKeydown}
+  >
+    <div
+      class="cinder-color-picker__gradient-handle"
+      style="left: {handlePosition.x}%; top: {handlePosition.y}%;"
+      aria-hidden="true"
+    ></div>
+  </div>
+
+  <div
+    bind:this={hueElement}
+    id={hueId}
+    role="slider"
+    aria-label="Hue"
+    aria-valuemin={0}
+    aria-valuemax={359}
+    aria-valuenow={hueAriaValue}
+    aria-disabled={disabled ? 'true' : undefined}
+    tabindex={disabled ? -1 : 0}
+    class="cinder-color-picker__hue"
+    onkeydown={handleHueKeydown}
+    onpointerdown={handleHuePointerDown}
+    onpointermove={handleHuePointerMove}
+    onpointerup={handleHuePointerUp}
+    onpointercancel={handleHuePointerCancel}
+  >
+    <div
+      class="cinder-color-picker__hue-thumb"
+      style="left: {(hue / 359) * 100}%;"
+      aria-hidden="true"
+    ></div>
+  </div>
+
+  {#if alpha}
+    <div
+      bind:this={alphaElement}
+      id={alphaId}
+      role="slider"
+      aria-label="Alpha"
+      aria-valuemin={0}
+      aria-valuemax={100}
+      aria-valuenow={alphaAriaValue}
+      aria-valuetext="{alphaAriaValue}%"
+      aria-disabled={disabled ? 'true' : undefined}
+      tabindex={disabled ? -1 : 0}
+      class="cinder-color-picker__alpha"
+      style="--cinder-color-picker-base: hsl({hue}, {saturation}%, {lightnessValue}%);"
+      onkeydown={handleAlphaKeydown}
+      onpointerdown={handleAlphaPointerDown}
+      onpointermove={handleAlphaPointerMove}
+      onpointerup={handleAlphaPointerUp}
+      onpointercancel={handleAlphaPointerCancel}
+    >
+      <div
+        class="cinder-color-picker__alpha-thumb"
+        style="left: {alphaValue * 100}%;"
+        aria-hidden="true"
+      ></div>
+    </div>
+  {/if}
+
+  <!-- Footer row: preview chip + current hex value -->
+  <div class="cinder-color-picker__footer">
+    <div
+      id={previewId}
+      role="img"
+      class="cinder-color-picker__preview"
+      data-cinder-alpha={alpha ? '' : undefined}
+      aria-label={internalValue ? `Selected color: ${internalValue}` : 'Selected color: none'}
+      style="--cinder-color-picker-preview: {previewColor};"
+    ></div>
+    <span class="cinder-color-picker__hex-value" aria-hidden="true">
+      {internalValue || '—'}
+    </span>
+  </div>
+
+  {#if normalizedSwatchColors.length > 0}
+    <ColorSwatchPicker
+      colors={normalizedSwatchColors}
+      value={internalValue !== '' ? currentHex.toLowerCase() : ''}
+      label="Color swatches"
+      size="sm"
+      {disabled}
+      class="cinder-color-picker__swatches"
+      onchange={handleSwatchChange}
+    />
+  {/if}
+
+  {#if name}
+    <input bind:this={hiddenInput} type="hidden" {name} value={internalValue} />
+  {:else}
+    <input bind:this={hiddenInput} type="hidden" value={internalValue} hidden />
+  {/if}
+</div>

package/src/components/color-picker/color-picker.types.ts

@@ -0,0 +1,27 @@
+/** Props for ColorPicker. */
+export type ColorPickerProps = {
+  /**
+   * Bindable value. Reading the value yields a hex string (`#rrggbb`, or
+   * `#rrggbbaa` when `alpha` is true). Setting the value accepts hex, `rgb()`,
+   * `rgba()`, `hsl()`, or `hsla()` input; invalid input is normalized to `''`.
+   */
+  value?: string;
+  /** Initial color when `value` is not bound. Same input formats as `value`. */
+  defaultValue?: string;
+  /** Enable the alpha slider and emit `#rrggbbaa`. Default `false`. */
+  alpha?: boolean;
+  /** Form field name. When set, a hidden input mirrors the current value for form submission. */
+  name?: string;
+  /** Optional palette of preset colors rendered below the picker. */
+  swatches?: string[];
+  /** Disable interaction across the picker. */
+  disabled?: boolean;
+  /** Additional classes merged onto the root element. */
+  class?: string;
+  /** Accessible label for the picker. Default `'Color picker'`. */
+  label?: string;
+  /** Fired on commit (pointer up, swatch click, slider key). */
+  onchange?: (color: string) => void;
+  /** Fired on every intermediate update (drag, slider key, swatch click). */
+  oninput?: (color: string) => void;
+};

package/src/components/color-picker/color-picker.variables.ts

@@ -0,0 +1,3 @@
+const variables: readonly string[] = [];
+
+export default variables;

package/src/components/color-picker/index.ts

@@ -0,0 +1,6 @@
+import './color-picker.css';
+import ColorPicker from './color-picker.svelte';
+
+export default ColorPicker;
+export type { ColorPickerProps } from './color-picker.types.ts';
+export { ColorPicker };