@esportsplus/ui 0.56.4 → 0.57.0

package/build/components/color-picker/index.js

@@ -1,11 +1,18 @@
 import * as template_u1 from '@esportsplus/template';
+import { component } from '@esportsplus/template';
 import * as reactivity_u0 from '@esportsplus/reactivity';
-import { effect, onCleanup, untrack } from '@esportsplus/reactivity';
+import { effect } from '@esportsplus/reactivity';
+import { measure, slides, timing } from '../../shared/animation.js';
+import { clamp } from '../../shared/clamp.js';
+import { keystep } from '../../shared/keystep.js';
+import copy from '../copy/index.js';
 import input from '../input/index.js';
 import range from '../range/index.js';
 import './scss/index.scss';
-const template_0zt12vj6 = template_u1.template(`<div class='color-picker'><div aria-label='Saturation and brightness' aria-roledescription='2D slider' aria-valuemax='100' aria-valuemin='0' class='color-picker-pad' role='slider' tabindex='0'><span class='color-picker-thumb'></span></div><div class='color-picker-channels'><div class='color-picker-sliders'><!--$--></div><span aria-hidden='true' class='color-picker-preview'></span></div><div class='color-picker-fields'><label class='color-picker-hex '><span class='color-picker-hash'>#</span></label><span aria-hidden='true' class='color-picker-alpha'></span><span aria-live='polite' class='color-picker-status'></span></div><div class='color-picker-recent'><p class='color-picker-recent-label'>Recent</p><div class='color-picker-swatches' role='group'>`);
-const template_0zt12vji = template_u1.template(`<button class='color-picker-swatch' style=';' type='button'>`);
+const template_0zt12vj6 = template_u1.template(`<div class='color-picker'><div aria-label='Saturation and brightness' aria-roledescription='2D slider' aria-valuemax='100' aria-valuemin='0' class='color-picker-pad' role='slider' tabindex='0'><span class='color-picker-thumb'></span></div><div class='color-picker-channels'><div class='color-picker-sliders'><!--$--></div><span aria-hidden='true' class='color-picker-preview'></span></div><div class='color-picker-fields'><div class='color-picker-field'><!--$--></div><span aria-hidden='true' class='color-picker-alpha'></span><span aria-live='polite' class='color-picker-status'>`);
+const template_0zt12vjh = template_u1.template(`<div class='color-picker-recent'><p class='color-picker-recent-label'>Recent</p><div class='color-picker-swatches' role='group'><!--$-->`);
+const template_0zt12vjn = template_u1.template(`<button class='color-picker-swatch' style=';' type='button'>`);
+const template_0zt12vjq = template_u1.template(`<span aria-hidden='true' class='color-picker-swatch color-picker-swatch--leaving' style=';;;'>`);
 class ReactiveObject_0zt12vj0 extends reactivity_u0.ReactiveObject {
     #error = this[reactivity_u0.SIGNAL]('');
     #value = this[reactivity_u0.SIGNAL]('');
@@ -135,23 +142,11 @@ class ReactiveObject_0zt12vj4 extends reactivity_u0.ReactiveObject {
         reactivity_u0.write(this.#invalid, _v1);
     }
 }
+const HEX_PREFIX = /^#/;
+const HEX_COLOR = /^([0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i;
 const COLOR_PICKER_SWATCH = Symbol.for('@esportsplus/ui/color-picker.swatch');
-const DEFAULT_RECENT = ['#E5484D', '#F5A524', '#30A46C', '#0090FF', '#8E4EC6'];
-const DEFAULT_VALUE = '#5B8DEF';
 const MAX_RECENT = 8;
-const SWATCH = {
-    duration: 300,
-    easing: 'linear(0, 0.058, 0.18, 0.321, 0.455, 0.573, 0.671, 0.75, 0.812, 0.86, 0.897, 0.924, 0.944, 0.96, 0.971, 0.979, 0.985, 0.989, 0.992, 0.994, 0.996, 0.997, 0.998, 0.999, 1)'
-};
-const SWATCH_EXIT = {
-    duration: 150,
-    easing: 'cubic-bezier(0.23, 1, 0.32, 1)',
-    fill: 'forwards'
-};
 let uid = 0;
-function clamp(n) {
-    return Math.min(Math.max(n, 0), 1);
-}
 function fromHex(hex, previous) {
     let rgba = parse(hex);
     if (!rgba) {
@@ -159,29 +154,9 @@ function fromHex(hex, previous) {
     }
     return { ...toHsv(rgba.r, rgba.g, rgba.b, previous), a: rgba.a };
 }
-function keystep(e, step) {
-    let big = step * 10, unit = e.shiftKey ? big : step;
-    switch (e.key) {
-        case 'ArrowRight':
-        case 'ArrowUp':
-            return unit;
-        case 'ArrowDown':
-        case 'ArrowLeft':
-            return -unit;
-        case 'End':
-            return Infinity;
-        case 'Home':
-            return -Infinity;
-        case 'PageDown':
-            return -big;
-        case 'PageUp':
-            return big;
-    }
-    return null;
-}
 function parse(value) {
-    let hex = value.trim().replace(/^#/, '');
-    if (!/^([0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(hex)) {
+    let hex = value.trim().replace(HEX_PREFIX, '');
+    if (!HEX_COLOR.test(hex)) {
         return null;
     }
     let full = hex.length <= 4 ? [...hex].map((c) => c + c).join('') : hex;
@@ -195,9 +170,6 @@ function parse(value) {
         r: byte(0)
     };
 }
-function reduced() {
-    return matchMedia('(prefers-reduced-motion: reduce)').matches;
-}
 function rgb({ h, s, v }) {
     function f(n) {
         let k = (n + h / 60) % 6;
@@ -224,8 +196,12 @@ function toHsv(r, g, b, previous) {
     }
     return { h, s: max === 0 ? previous.s : d / max, v: max };
 }
-function template({ recent: initial = DEFAULT_RECENT, value = DEFAULT_VALUE, state = new ReactiveObject_0zt12vj0(), ...attributes } = {}) {
-    let start = fromHex(state.value || value, { a: 1, h: 0, s: 0, v: 0 }) ?? { a: 1, h: 220, s: 0.6, v: 0.9 }, alpha = new ReactiveObject_0zt12vj1(Math.round(start.a * 100)), color = new ReactiveObject_0zt12vj2(start.a, start.h, start.s, start.v), dirty = { alpha: false, hue: false, pad: false }, hue = new ReactiveObject_0zt12vj3(Math.round(start.h)), id = `color-picker-${++uid}`, parts = {}, picker = new ReactiveObject_0zt12vj4(), pointer = { alpha: false, hue: false, pad: -1 }, recent = reactivity_u0.reactive(initial.map((hex) => hex.toUpperCase()));
+function template({ recent: initial = [], state = new ReactiveObject_0zt12vj0(), value, ...attributes }) {
+    let start = fromHex(state.value || value, { a: 1, h: 0, s: 0, v: 0 });
+    if (!start) {
+        throw new Error(`Color picker: '${state.value || value}' is not a valid hex color`);
+    }
+    let alpha = new ReactiveObject_0zt12vj1(Math.round(start.a * 100)), color = new ReactiveObject_0zt12vj2(start.a, start.h, start.s, start.v), dirty = { alpha: false, hue: false, pad: false }, history = initial !== false, hue = new ReactiveObject_0zt12vj3(Math.round(start.h)), id = `color-picker-${++uid}`, leaving = new reactivity_u0.ReactiveArray(), parts = {}, picker = new ReactiveObject_0zt12vj4(), pointer = { alpha: false, hue: false, pad: -1 }, recent = reactivity_u0.reactive((initial || []).map((hex) => hex.toUpperCase()));
     state.value = toHex(color);
     function apply(leaving) {
         let field = parts.hex;
@@ -235,7 +211,7 @@ function template({ recent: initial = DEFAULT_RECENT, value = DEFAULT_VALUE, sta
         let next = fromHex(field.value, read());
         if (!next) {
             if (leaving) {
-                field.value = toHex(read()).slice(1);
+                field.value = toHex(read());
             }
             picker.invalid = !leaving;
             return;
@@ -243,7 +219,7 @@ function template({ recent: initial = DEFAULT_RECENT, value = DEFAULT_VALUE, sta
         let changed = toHex(next) !== toHex(read());
         picker.invalid = false;
         update(next);
-        field.value = toHex(next).slice(1);
+        field.value = toHex(next);
         if (changed) {
             commit();
         }
@@ -251,16 +227,15 @@ function template({ recent: initial = DEFAULT_RECENT, value = DEFAULT_VALUE, sta
     function commit() {
         let hex = toHex(read());
         picker.active = hex;
-        if (recent[0] === hex) {
+        if (!history || recent[0] === hex) {
             return;
         }
-        let container = parts.swatches, dropped = [], first = new Map(), index = recent.indexOf(hex), kept = recent.filter((c) => c !== hex).slice(0, MAX_RECENT - 1);
+        let container = parts.swatches, dropped = [], index = recent.indexOf(hex), kept = recent.filter((c) => c !== hex).slice(0, MAX_RECENT - 1);
         if (container) {
-            for (let element of container.querySelectorAll('.color-picker-swatch')) {
-                let key = element.dataset.hex ?? '', rect = element.getBoundingClientRect();
-                first.set(key, rect);
-                if (key !== hex && !kept.includes(key)) {
-                    dropped.push({ node: element.cloneNode(true), rect });
+            measure(container.children);
+            for (let i = 0, n = recent.$length; i < n; i++) {
+                if (recent[i] !== hex && !kept.includes(recent[i])) {
+                    dropped.push({ hex: recent[i], rect: container.children[i].getBoundingClientRect() });
                 }
             }
         }
@@ -272,45 +247,40 @@ function template({ recent: initial = DEFAULT_RECENT, value = DEFAULT_VALUE, sta
             recent.splice(MAX_RECENT);
         }
         if (container) {
-            requestAnimationFrame(() => flip(container, first, dropped));
+            requestAnimationFrame(() => flip(container, dropped));
         }
     }
     function css() {
         let [r, g, b] = rgb(read());
         return `--alpha: ${color.a}; --hue: ${color.h}; --rgb: ${r} ${g} ${b};`;
     }
-    function flip(container, first, dropped) {
-        let box = container.getBoundingClientRect(), still = reduced();
-        for (let element of container.querySelectorAll('.color-picker-swatch')) {
-            let previous = first.get(element.dataset.hex ?? '');
-            if (!previous) {
-                element.animate(still
-                    ? [{ opacity: 0 }, { opacity: 1 }]
-                    : [{ filter: 'blur(4px)', opacity: 0, scale: '0.6' }, { filter: 'blur(0px)', opacity: 1, scale: '1' }], SWATCH);
-                continue;
+    function flip(container, dropped) {
+        let box = container.getBoundingClientRect(), computed = getComputedStyle(container), enter = timing(computed, 'swatch'), from = {
+            filter: `blur(${computed.getPropertyValue('--swatch-blur').trim()})`,
+            opacity: 0,
+            scale: computed.getPropertyValue('--swatch-scale').trim()
+        }, move = timing(computed, 'swatch-shift');
+        slides([...container.children].slice(0, recent.$length), move, (element) => {
+            if (enter) {
+                element.animate([from, { filter: 'blur(0px)', opacity: 1, scale: '1' }], enter);
             }
-            let x = previous.left - element.getBoundingClientRect().left;
-            if (x !== 0 && !still) {
-                element.animate([{ translate: `${x}px 0` }, { translate: '0 0' }], SWATCH);
-            }
-        }
-        for (let { node, rect } of dropped) {
-            node.classList.add('--leaving');
-            node.removeAttribute('aria-pressed');
-            node.setAttribute('aria-hidden', 'true');
-            node.style.left = `${rect.left - box.left}px`;
-            node.style.top = `${rect.top - box.top}px`;
-            container.append(node);
-            node.animate(still
-                ? [{ opacity: 1 }, { opacity: 0 }]
-                : [{ filter: 'blur(0px)', opacity: 1, scale: '1' }, { filter: 'blur(4px)', opacity: 0, scale: '0.6' }], SWATCH_EXIT).onfinish = () => node.remove();
+        });
+        for (let { hex, rect } of dropped) {
+            leaving.push({ hex, left: rect.left - box.left, top: rect.top - box.top });
         }
     }
+    function pick(pad, e) {
+        let rect = pad.getBoundingClientRect();
+        update({
+            s: clamp((e.clientX - rect.left) / rect.width, 0, 1),
+            v: 1 - clamp((e.clientY - rect.top) / rect.height, 0, 1)
+        });
+    }
     function read() {
         return { a: color.a, h: color.h, s: color.s, v: color.v };
     }
     function slide(channel, e) {
-        let element = e.currentTarget, max = Number(element.max), delta = keystep(e, 1);
+        let delta = keystep(e, 1), target = channel === 'hue' ? hue : alpha;
         pointer[channel] = false;
         if (delta === null) {
             return;
@@ -320,22 +290,14 @@ function template({ recent: initial = DEFAULT_RECENT, value = DEFAULT_VALUE, sta
             return;
         }
         e.preventDefault();
-        let next = Math.min(Math.max(element.valueAsNumber + delta, 0), max);
-        element.value = String(next);
-        (channel === 'hue' ? hue : alpha).value = next;
+        target.value = clamp(target.value + delta, 0, Number(e.currentTarget.max));
     }
-    function sync() {
-        let { alpha: a, hex, hue: h } = parts;
+    function sync(hex) {
+        let field = parts.hex;
         alpha.value = Math.round(color.a * 100);
         hue.value = Math.round(color.h);
-        if (a && a.valueAsNumber !== alpha.value) {
-            a.value = String(alpha.value);
-        }
-        if (h && h.valueAsNumber !== hue.value) {
-            h.value = String(hue.value);
-        }
-        if (hex && document.activeElement !== hex) {
-            hex.value = toHex(read()).slice(1);
+        if (field && document.activeElement !== field) {
+            field.value = hex;
         }
     }
     function update(patch) {
@@ -356,102 +318,26 @@ function template({ recent: initial = DEFAULT_RECENT, value = DEFAULT_VALUE, sta
             picker.active = '';
         }
         state.value = hex;
-        sync();
-    }
-    let disposers = [
-        effect(() => {
-            let next = alpha.value;
-            untrack(() => {
-                if (Math.round(color.a * 100) !== next) {
-                    update({ a: next / 100 });
-                }
-            });
-        }),
-        effect(() => {
-            let next = hue.value;
-            untrack(() => {
-                if (Math.round(color.h) !== next) {
-                    update({ h: next });
-                }
-            });
-        }),
-        effect(() => {
-            let next = state.value;
-            untrack(() => {
-                let parsed = next && toHex(read()) !== next.toUpperCase() ? fromHex(next, read()) : null;
-                if (parsed) {
-                    update(parsed);
-                }
-            });
-        })
-    ];
-    onCleanup(() => {
-        for (let i = 0, n = disposers.length; i < n; i++) {
-            disposers[i]();
+        sync(hex);
+    }
+    effect(() => alpha.value, (next) => {
+        if (Math.round(color.a * 100) !== next) {
+            update({ a: next / 100 });
+        }
+    });
+    effect(() => hue.value, (next) => {
+        if (Math.round(color.h) !== next) {
+            update({ h: next });
+        }
+    });
+    effect(() => state.value, (next) => {
+        let parsed = next && toHex(read()) !== next.toUpperCase() ? fromHex(next, read()) : null;
+        if (parsed) {
+            update(parsed);
         }
     });
     return (() => {
-        let root_0zt12vj5 = template_0zt12vj6(), element_0zt12vj7 = root_0zt12vj5.firstChild, element_0zt12vj8 = element_0zt12vj7.firstElementChild, element_0zt12vj9 = element_0zt12vj8.firstElementChild, element_0zt12vja = element_0zt12vj8.nextElementSibling.firstElementChild.firstChild, element_0zt12vjb = element_0zt12vj8.nextElementSibling.firstElementChild, element_0zt12vjc = element_0zt12vj8.nextElementSibling.nextElementSibling.firstElementChild, element_0zt12vjd = element_0zt12vjc.nextElementSibling, element_0zt12vje = element_0zt12vjd.nextElementSibling, element_0zt12vjf = element_0zt12vj8.nextElementSibling.nextElementSibling.nextElementSibling.firstElementChild, element_0zt12vjg = element_0zt12vjf.nextElementSibling;
-        template_u1.setProperties(element_0zt12vj7, this?.attributes);
-        template_u1.setProperties(element_0zt12vj7, attributes);
-        template_u1.setList(element_0zt12vj7, 'style', css);
-        template_u1.setProperty(element_0zt12vj8, 'aria-valuenow', () => Math.round(color.s * 100));
-        template_u1.setProperty(element_0zt12vj8, 'aria-valuetext', () => `Saturation ${Math.round(color.s * 100)}%, brightness ${Math.round(color.v * 100)}%`);
-        template_u1.on(element_0zt12vj8, 'blur', () => {
-            if (dirty.pad) {
-                commit();
-            }
-            dirty.pad = false;
-        });
-        template_u1.delegate(element_0zt12vj8, 'keydown', (e) => {
-            let delta = keystep(e, 0.01);
-            if (delta === null) {
-                return;
-            }
-            e.preventDefault();
-            dirty.pad = true;
-            if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
-                update({ s: clamp(color.s + delta) });
-            }
-            else {
-                update({ v: clamp(color.v + delta) });
-            }
-        });
-        template_u1.delegate(element_0zt12vj8, 'pointercancel', (e) => {
-            if (e.pointerId === pointer.pad) {
-                pointer.pad = -1;
-                commit();
-            }
-        });
-        template_u1.delegate(element_0zt12vj8, 'pointerdown', function (e) {
-            if (pointer.pad !== -1 || (e.pointerType === 'mouse' && e.button !== 0)) {
-                return;
-            }
-            pointer.pad = e.pointerId;
-            this.setPointerCapture(e.pointerId);
-            let rect = this.getBoundingClientRect();
-            update({
-                s: clamp((e.clientX - rect.left) / rect.width),
-                v: 1 - clamp((e.clientY - rect.top) / rect.height)
-            });
-        });
-        template_u1.delegate(element_0zt12vj8, 'pointermove', function (e) {
-            if (e.pointerId !== pointer.pad) {
-                return;
-            }
-            let rect = this.getBoundingClientRect();
-            update({
-                s: clamp((e.clientX - rect.left) / rect.width),
-                v: 1 - clamp((e.clientY - rect.top) / rect.height)
-            });
-        });
-        template_u1.delegate(element_0zt12vj8, 'pointerup', (e) => {
-            if (e.pointerId === pointer.pad) {
-                pointer.pad = -1;
-                commit();
-            }
-        });
-        template_u1.setList(element_0zt12vj9, 'style', () => `left: ${color.s * 100}%; top: ${(1 - color.v) * 100}%;`);
+        let root_0zt12vj5 = template_0zt12vj6(), element_0zt12vj7 = root_0zt12vj5.firstChild, element_0zt12vj8 = element_0zt12vj7.firstElementChild, element_0zt12vj9 = element_0zt12vj8.firstElementChild, element_0zt12vja = element_0zt12vj8.nextElementSibling.firstElementChild.firstChild, element_0zt12vjb = element_0zt12vj8.nextElementSibling.firstElementChild, element_0zt12vjc = element_0zt12vj8.nextElementSibling.nextElementSibling.firstElementChild.firstChild, element_0zt12vjd = element_0zt12vj8.nextElementSibling.nextElementSibling.firstElementChild, element_0zt12vje = element_0zt12vjd.nextElementSibling, element_0zt12vjf = element_0zt12vje.nextElementSibling;
         template_u1.slot(element_0zt12vja, range({
             'aria-label': 'Hue',
             'aria-valuetext': () => `${hue.value} degrees`,
@@ -469,9 +355,6 @@ function template({ recent: initial = DEFAULT_RECENT, value = DEFAULT_VALUE, sta
                     commit();
                 }
             },
-            onconnect: (element) => {
-                parts.hue = element;
-            },
             onkeydown: (e) => slide('hue', e),
             onpointerdown: () => {
                 pointer.hue = true;
@@ -496,9 +379,6 @@ function template({ recent: initial = DEFAULT_RECENT, value = DEFAULT_VALUE, sta
                     commit();
                 }
             },
-            onconnect: (element) => {
-                parts.alpha = element;
-            },
             onkeydown: (e) => slide('alpha', e),
             onpointerdown: () => {
                 pointer.alpha = true;
@@ -506,18 +386,17 @@ function template({ recent: initial = DEFAULT_RECENT, value = DEFAULT_VALUE, sta
             state: alpha,
             step: 1
         }), 2);
-        template_u1.setList(element_0zt12vjc, 'class', () => picker.invalid && '--invalid');
         template_u1.slot(element_0zt12vjc, input({
             'aria-invalid': () => picker.invalid ? 'true' : 'false',
             'aria-label': 'Hex color',
             autocapitalize: 'characters',
             autocomplete: 'off',
-            class: 'color-picker-hex-input',
+            class: 'color-picker-hex',
             maxlength: 9,
             onblur: () => apply(true),
             onconnect: (element) => {
                 parts.hex = element;
-                element.value = toHex(read()).slice(1);
+                element.value = toHex(read());
             },
             onfocus: function () {
                 this.select();
@@ -530,40 +409,114 @@ function template({ recent: initial = DEFAULT_RECENT, value = DEFAULT_VALUE, sta
                     apply(false);
                 }
                 else if (e.key === 'Escape') {
-                    this.value = toHex(read()).slice(1);
+                    this.value = toHex(read());
                     picker.invalid = false;
                 }
             },
             spellcheck: false
+        }));
+        template_u1.slot(element_0zt12vjd, copy({
+            class: 'color-picker-copy',
+            label: 'Copy hex color',
+            success: 'Hex color copied',
+            value: () => toHex(read())
         }), 2);
-        new template_u1.EffectSlot(element_0zt12vjd, () => `${Math.round(color.a * 100)}%`, 1);
-        new template_u1.EffectSlot(element_0zt12vje, () => picker.invalid ? 'Not a valid hex color' : '', 1);
-        template_u1.setProperty(element_0zt12vjf, 'id', template_u1.interpolate([(id), "-recent"]));
-        template_u1.setProperty(element_0zt12vjg, 'aria-labelledby', template_u1.interpolate([(id), "-recent"]));
-        template_u1.onrender(element_0zt12vjg, (element) => {
-            parts.swatches = element;
-        });
-        element_0zt12vjg.appendChild(new template_u1.ArraySlot(recent, (hex) => {
-            let root_0zt12vjh = template_0zt12vji(), element_0zt12vjj = root_0zt12vjh.firstChild;
-            template_u1.setProperty(element_0zt12vjj, 'aria-label', template_u1.interpolate(["Use ", (hex)]));
-            template_u1.setProperty(element_0zt12vjj, 'data-hex', hex);
-            template_u1.setList(element_0zt12vjj, 'style', template_u1.interpolate(["--swatch: ", (hex)]));
-            template_u1.setProperties(element_0zt12vjj, this?.attributes?.[COLOR_PICKER_SWATCH]);
-            template_u1.setProperties(element_0zt12vjj, attributes[COLOR_PICKER_SWATCH]);
-            template_u1.setProperty(element_0zt12vjj, 'aria-pressed', () => picker.active === hex ? 'true' : 'false');
-            template_u1.setList(element_0zt12vjj, 'class', () => picker.active === hex && '--active');
-            template_u1.delegate(element_0zt12vjj, 'click', () => {
-                let next = fromHex(hex, read());
-                if (!next) {
-                    return;
-                }
-                update(next);
-                picker.active = hex;
-                picker.invalid = false;
+        new template_u1.EffectSlot(element_0zt12vje, () => `${Math.round(color.a * 100)}%`, 1);
+        new template_u1.EffectSlot(element_0zt12vjf, () => picker.invalid && 'Not a valid hex color', 1);
+        template_u1.slot(element_0zt12vj7, history && (() => {
+            let root_0zt12vjg = template_0zt12vjh(), element_0zt12vji = root_0zt12vjg.firstChild, element_0zt12vjj = element_0zt12vji.firstElementChild, element_0zt12vjk = element_0zt12vjj.nextElementSibling, element_0zt12vjl = element_0zt12vjk.firstChild;
+            element_0zt12vjl.parentNode.insertBefore(new template_u1.ArraySlot(recent, (hex) => {
+                let root_0zt12vjm = template_0zt12vjn(), element_0zt12vjo = root_0zt12vjm.firstChild;
+                template_u1.setProperty(element_0zt12vjo, 'aria-label', template_u1.interpolate(["Use ", (hex)]));
+                template_u1.setList(element_0zt12vjo, 'style', template_u1.interpolate(["--swatch: ", (hex)]));
+                template_u1.setProperties(element_0zt12vjo, this?.attributes?.[COLOR_PICKER_SWATCH]);
+                template_u1.setProperties(element_0zt12vjo, attributes[COLOR_PICKER_SWATCH]);
+                template_u1.setProperty(element_0zt12vjo, 'aria-pressed', () => picker.active === hex ? 'true' : 'false');
+                template_u1.setList(element_0zt12vjo, 'class', () => picker.active === hex && '--active');
+                template_u1.delegate(element_0zt12vjo, 'click', () => {
+                    let next = fromHex(hex, read());
+                    if (!next) {
+                        return;
+                    }
+                    update(next);
+                    picker.active = hex;
+                    picker.invalid = false;
+                });
+                return root_0zt12vjm;
+            }).fragment, element_0zt12vjl);
+            element_0zt12vjk.appendChild(new template_u1.ArraySlot(leaving, (ghost) => {
+                let root_0zt12vjp = template_0zt12vjq(), element_0zt12vjr = root_0zt12vjp.firstChild;
+                template_u1.setList(element_0zt12vjr, 'style', template_u1.interpolate(["--swatch: ", (ghost.hex)]));
+                template_u1.setList(element_0zt12vjr, 'style', template_u1.interpolate([" left: ", (ghost.left), "px"]));
+                template_u1.setList(element_0zt12vjr, 'style', template_u1.interpolate([" top: ", (ghost.top), "px"]));
+                template_u1.delegate(element_0zt12vjr, 'animationend', () => {
+                    let at = leaving.indexOf(ghost);
+                    if (at !== -1) {
+                        leaving.splice(at, 1);
+                    }
+                });
+                return root_0zt12vjp;
+            }).fragment);
+            template_u1.setProperty(element_0zt12vjk, 'aria-labelledby', template_u1.interpolate([(id), "-recent"]));
+            template_u1.onconnect(element_0zt12vjk, (element) => {
+                parts.swatches = element;
             });
-            return root_0zt12vjh;
-        }, true).fragment);
+            template_u1.setProperty(element_0zt12vjj, 'id', template_u1.interpolate([(id), "-recent"]));
+            template_u1.setProperty(element_0zt12vji, 'hidden', () => recent.$length === 0);
+            return root_0zt12vjg;
+        })(), 2);
+        template_u1.setList(element_0zt12vj9, 'style', () => `left: ${color.s * 100}%; top: ${(1 - color.v) * 100}%;`);
+        template_u1.setProperty(element_0zt12vj8, 'aria-valuenow', () => Math.round(color.s * 100));
+        template_u1.setProperty(element_0zt12vj8, 'aria-valuetext', () => `Saturation ${Math.round(color.s * 100)}%, brightness ${Math.round(color.v * 100)}%`);
+        template_u1.on(element_0zt12vj8, 'blur', () => {
+            if (dirty.pad) {
+                commit();
+            }
+            dirty.pad = false;
+        });
+        template_u1.delegate(element_0zt12vj8, 'keydown', (e) => {
+            let delta = keystep(e, 0.01);
+            if (delta === null) {
+                return;
+            }
+            e.preventDefault();
+            dirty.pad = true;
+            if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
+                update({ s: clamp(color.s + delta, 0, 1) });
+            }
+            else {
+                update({ v: clamp(color.v + delta, 0, 1) });
+            }
+        });
+        template_u1.delegate(element_0zt12vj8, 'pointercancel', (e) => {
+            if (e.pointerId === pointer.pad) {
+                pointer.pad = -1;
+                commit();
+            }
+        });
+        template_u1.delegate(element_0zt12vj8, 'pointerdown', function (e) {
+            if (pointer.pad !== -1 || (e.pointerType === 'mouse' && e.button !== 0)) {
+                return;
+            }
+            pointer.pad = e.pointerId;
+            this.setPointerCapture(e.pointerId);
+            pick(this, e);
+        });
+        template_u1.delegate(element_0zt12vj8, 'pointermove', function (e) {
+            if (e.pointerId === pointer.pad) {
+                pick(this, e);
+            }
+        });
+        template_u1.delegate(element_0zt12vj8, 'pointerup', (e) => {
+            if (e.pointerId === pointer.pad) {
+                pointer.pad = -1;
+                commit();
+            }
+        });
+        template_u1.setProperties(element_0zt12vj7, this?.attributes);
+        template_u1.setProperties(element_0zt12vj7, attributes);
+        template_u1.setList(element_0zt12vj7, 'style', css);
         return root_0zt12vj5;
     })();
 }
-export default Object.assign(template, { swatch: COLOR_PICKER_SWATCH });
+export default component(template, { swatch: COLOR_PICKER_SWATCH });

package/build/components/color-picker/scss/index.scss

@@ -1,2 +1,2 @@
-@layer components {.color-picker{--background:var(--color-white-300);--border-color:var(--color-border-300);--border-radius:20px;--box-shadow:0 0 0 1px oklch(from var(--color-black-500) l c h / .06), 0 1px 2px oklch(from var(--color-black-500) l c h / .06), 0 6px 16px -6px oklch(from var(--color-black-500) l c h / .12);--checker:repeating-conic-gradient(var(--color-border-300) 0 25%, var(--color-white-300) 0 50%) 0 0 / 8px 8px;--color:var(--color-text-500);--color-invalid:var(--color-red-400);--color-muted:var(--color-text-300);--control-border-radius:var(--border-radius-400);--control-height:36px;--focus-width:var(--border-width-500);--font-family-mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;--font-size:calc(var(--font-size-400) * .875);--hairline:inset 0 0 0 1px color-mix(in oklch, var(--color) 10%, transparent);--pad-height:176px;--padding:12px;--preview-size:44px;--spacing:12px;--swatch-size:28px;--thumb-border:2px solid var(--color-white-300);--thumb-shadow:0 0 0 1px oklch(from var(--color-black-500) l c h / .12), 0 1px 3px oklch(from var(--color-black-500) l c h / .3);--thumb-size:20px;--track-height:12px;--transition-duration:.15s;--transition-timing-function:ease-out;--width:min(320px, 100%);background:var(--background);border-radius:var(--border-radius);box-shadow:var(--box-shadow);color:var(--color);font-size:var(--font-size);gap:var(--spacing);padding:var(--padding);width:var(--width);flex-direction:column;display:flex}.color-picker-alpha{border:1px solid var(--border-color);border-radius:var(--control-border-radius);color:var(--color-muted);font-family:var(--font-family-mono);font-variant-numeric:tabular-nums;height:var(--control-height);-webkit-user-select:none;user-select:none;flex:0 0 56px;justify-content:center;align-items:center;display:flex}.color-picker .color-picker-channel{appearance:none;cursor:pointer;touch-action:none;background:0 0;border:0;border-radius:999px;outline:none;width:100%;height:28px;margin:0;display:block}.color-picker .color-picker-channel:focus-visible{outline:var(--focus-width) solid var(--color);outline-offset:1px}.color-picker .color-picker-channel::-webkit-slider-runnable-track{background:var(--track);box-shadow:var(--hairline);height:var(--track-height);border-radius:999px}.color-picker .color-picker-channel::-moz-range-track{background:var(--track);box-shadow:var(--hairline);height:var(--track-height);border-radius:999px}.color-picker .color-picker-channel::-webkit-slider-thumb{background:var(--thumb);border:var(--thumb-border);box-shadow:var(--thumb-shadow);box-sizing:border-box;cursor:pointer;height:var(--thumb-size);transition:scale var(--transition-duration) var(--transition-timing-function);width:var(--thumb-size);appearance:none;margin-top:calc((var(--track-height) - var(--thumb-size)) / 2);border-radius:50%}.color-picker .color-picker-channel::-moz-range-thumb{background:var(--thumb);border:var(--thumb-border);box-shadow:var(--thumb-shadow);box-sizing:border-box;cursor:pointer;height:var(--thumb-size);transition:scale var(--transition-duration) var(--transition-timing-function);width:var(--thumb-size);border-radius:50%}.color-picker .color-picker-channel:active::-webkit-slider-thumb{scale:1.1}.color-picker .color-picker-channel:active::-moz-range-thumb{scale:1.1}.color-picker .color-picker-channel--alpha{--thumb:linear-gradient(rgb(var(--rgb) / var(--alpha)), rgb(var(--rgb) / var(--alpha))), var(--checker);--track:linear-gradient(to right, rgb(var(--rgb) / 0), rgb(var(--rgb))), var(--checker)}.color-picker .color-picker-channel--hue{--thumb:hsl(var(--hue) 100% 50%);--track:linear-gradient(to right, red, #ff0, #0f0, #0ff, #00f, #f0f, red)}.color-picker-channels{align-items:center;gap:var(--spacing);display:flex}.color-picker-fields{gap:var(--size-100);display:flex}.color-picker-hash{color:var(--color-muted);transition:color var(--transition-duration) var(--transition-timing-function);-webkit-user-select:none;user-select:none}.color-picker-hex{background:var(--background);border:1px solid var(--border-color);border-radius:var(--control-border-radius);cursor:text;font-family:var(--font-family-mono);height:var(--control-height);min-width:0;transition:border-color var(--transition-duration) var(--transition-timing-function);flex:1;align-items:center;padding:0 10px;display:flex}.color-picker-hex:focus-within{outline:var(--focus-width) solid var(--color);outline-offset:-1px}.color-picker-hex.--invalid{border-color:var(--color-invalid)}.color-picker-hex.--invalid:focus-within{outline-color:var(--color-invalid)}.color-picker-hex.--invalid .color-picker-hash{color:var(--color-invalid)}.color-picker-hex .input{--background-default:transparent;--color-default:var(--color-text-500);--font-size:inherit;--padding-horizontal:0px;--padding-vertical:0px;--size:0px;text-transform:uppercase;outline:none;flex:1;min-width:0;padding-left:2px;font-family:inherit}.color-picker-pad{background-color:hsl(var(--hue), 100%, 50%);border-radius:var(--control-border-radius);cursor:crosshair;height:var(--pad-height);touch-action:none;-webkit-user-select:none;user-select:none;background-image:linear-gradient(#0000,#000),linear-gradient(90deg,#fff,#0000);outline:none;position:relative}.color-picker-pad:after{border-radius:inherit;box-shadow:var(--hairline);content:"";pointer-events:none;position:absolute;inset:0}.color-picker-pad:focus-visible{outline:var(--focus-width) solid var(--color);outline-offset:2px}.color-picker-pad:active .color-picker-thumb{scale:1.1}.color-picker-preview{background:linear-gradient(rgb(var(--rgb)/var(--alpha)), rgb(var(--rgb)/var(--alpha))), var(--checker);border-radius:var(--control-border-radius);box-shadow:var(--hairline);height:var(--preview-size);width:var(--preview-size);flex:none}.color-picker-recent{border-top:1px solid var(--border-color);padding-top:var(--spacing)}.color-picker-recent-label{color:var(--color-muted);font-size:var(--font-size-300);margin:0 0 var(--size-100);-webkit-user-select:none;user-select:none}.color-picker-sliders{flex-direction:column;flex:1;gap:4px;min-width:0;display:flex}.color-picker-status{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.color-picker-swatch{background:linear-gradient(var(--swatch), var(--swatch)), var(--checker);box-shadow:var(--hairline), 0 0 0 0 var(--background), 0 0 0 0 var(--color);cursor:pointer;height:var(--swatch-size);touch-action:manipulation;transition:box-shadow var(--transition-duration) var(--transition-timing-function), scale var(--transition-duration) var(--transition-timing-function);-webkit-user-select:none;user-select:none;width:var(--swatch-size);border:0;border-radius:50%;outline:none;flex:none;margin:0;padding:0;position:relative}.color-picker-swatch:after{content:"";border-radius:50%;position:absolute;inset:-4px}.color-picker-swatch:active{scale:.96}.color-picker-swatch:focus-visible{outline:var(--focus-width) solid var(--color);outline-offset:4px}.color-picker-swatch.--active{box-shadow:var(--hairline), 0 0 0 2px var(--background), 0 0 0 4px var(--color)}.color-picker-swatch.--leaving{pointer-events:none;position:absolute}.color-picker-swatches{gap:var(--size-100);height:var(--swatch-size);display:flex;position:relative}.color-picker-thumb{background:rgb(var(--rgb));border:var(--thumb-border);box-shadow:var(--thumb-shadow);box-sizing:border-box;height:var(--thumb-size);pointer-events:none;transition:scale var(--transition-duration) var(--transition-timing-function);width:var(--thumb-size);z-index:1;border-radius:50%;position:absolute;translate:-50% -50%}@media (prefers-reduced-motion:reduce){.color-picker .color-picker-channel::-webkit-slider-thumb{transition:none}.color-picker .color-picker-channel::-moz-range-thumb{transition:none}.color-picker .color-picker-channel:active::-webkit-slider-thumb{scale:1}.color-picker .color-picker-channel:active::-moz-range-thumb{scale:1}.color-picker-pad:active .color-picker-thumb,.color-picker-swatch:active{scale:1}.color-picker-swatch{transition:box-shadow var(--transition-duration) var(--transition-timing-function)}.color-picker-thumb{transition:none}}}
+@layer components{.color-picker-pad:after{position:absolute;inset:0}.color-picker-status{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.color-picker-pad:after{border-radius:inherit;pointer-events:none}.color-picker{--checker:repeating-conic-gradient(var(--color-border-300) 0 25%, var(--color-white-300) 0 50%) 0 0 / 8px 8px;--color:var(--color-text-500);--color-invalid:var(--color-red-400);--color-muted:var(--color-text-300);--control-border-color:var(--color-border-300);--control-border-radius:var(--border-radius-400);--control-height:36px;--copy-inset:4px;--focus-width:var(--border-width-500);--font-size:calc(var(--font-size-400) * .875);--hairline:inset 0 0 0 1px color-mix(in oklch, var(--color) 10%, transparent);--pad-height:176px;--preview-size:44px;--ring-offset-color:var(--color-white-300);--spacing:12px;--swatch-blur:4px;--swatch-duration:.3s;--swatch-easing:linear(0, .058, .18, .321, .455, .573, .671, .75, .812, .86, .897, .924, .944, .96, .971, .979, .985, .989, .992, .994, .996, .997, .998, .999, 1);--swatch-exit-duration:.15s;--swatch-exit-easing:cubic-bezier(.23, 1, .32, 1);--swatch-scale:.6;--swatch-shift-duration:var(--swatch-duration);--swatch-shift-easing:var(--swatch-easing);--swatch-size:28px;--thumb-border:2px solid var(--color-white-300);--thumb-scale:none;--thumb-scale-pressed:1.1;--thumb-shadow:0 0 0 1px oklch(from var(--color-black-500) l c h / .12), 0 1px 3px oklch(from var(--color-black-500) l c h / .3);--thumb-size:20px;--track-height:12px;--transition-duration:.15s;--transition-timing-function:ease-out}@media (prefers-reduced-motion:reduce){.color-picker{--swatch-blur:0px;--swatch-scale:1;--swatch-shift-duration:0s;--thumb-scale-pressed:1}}.color-picker-channel--alpha{--thumb:linear-gradient(rgb(var(--rgb) / var(--alpha)), rgb(var(--rgb) / var(--alpha))), var(--checker);--track:linear-gradient(to right, rgb(var(--rgb) / 0), rgb(var(--rgb))), var(--checker)}.color-picker-channel--hue{--thumb:hsl(var(--hue) 100% 50%);--track:linear-gradient(to right, red, #ff0, #0f0, #0ff, #00f, #f0f, red)}.color-picker .color-picker-copy{--border-radius:calc(var(--control-border-radius) - var(--copy-inset));--color-default:var(--color-muted);--color-hover:var(--color);--size:calc(var(--control-height) - var(--copy-inset) * 2)}.color-picker-fields .color-picker-hex{--border-color-active:var(--control-border-color);--border-color-default:var(--control-border-color);--border-color-hover:var(--control-border-color);--border-color-pressed:var(--control-border-color);--border-radius:var(--control-border-radius);--border-width:1px;--color-default:currentColor;--font-size:inherit;--padding-horizontal:10px;--padding-vertical:0px;--size:var(--control-height)}.color-picker-fields .color-picker-hex[aria-invalid=true]{--control-border-color:var(--color-invalid)}.color-picker-pad:active{--thumb-scale:var(--thumb-scale-pressed)}.color-picker{font-size:var(--font-size);gap:var(--spacing);flex-direction:column;display:flex}.color-picker-alpha{border:1px solid var(--control-border-color);border-radius:var(--control-border-radius);color:var(--color-muted);font-family:var(--font-family-mono);font-variant-numeric:tabular-nums;height:var(--control-height);-webkit-user-select:none;user-select:none;flex:0 0 56px;justify-content:center;align-items:center;display:flex}.color-picker .color-picker-channel{appearance:none;cursor:pointer;touch-action:none;background:0 0;border:0;border-radius:999px;outline:none;width:100%;height:28px;margin:0;display:block}.color-picker .color-picker-channel:focus-visible{outline:var(--focus-width) solid var(--color);outline-offset:1px}.color-picker .color-picker-channel::-webkit-slider-runnable-track{background:var(--track);box-shadow:var(--hairline);height:var(--track-height);border-radius:999px}.color-picker .color-picker-channel::-moz-range-track{background:var(--track);box-shadow:var(--hairline);height:var(--track-height);border-radius:999px}.color-picker .color-picker-channel::-webkit-slider-thumb{background:var(--thumb);border:var(--thumb-border);box-shadow:var(--thumb-shadow);box-sizing:border-box;cursor:pointer;height:var(--thumb-size);transition:scale var(--transition-duration) var(--transition-timing-function);width:var(--thumb-size);appearance:none;margin-top:calc((var(--track-height) - var(--thumb-size)) / 2);border-radius:50%}.color-picker .color-picker-channel::-moz-range-thumb{background:var(--thumb);border:var(--thumb-border);box-shadow:var(--thumb-shadow);box-sizing:border-box;cursor:pointer;height:var(--thumb-size);transition:scale var(--transition-duration) var(--transition-timing-function);width:var(--thumb-size);border-radius:50%}.color-picker .color-picker-channel:active::-webkit-slider-thumb{scale:var(--thumb-scale-pressed)}.color-picker .color-picker-channel:active::-moz-range-thumb{scale:var(--thumb-scale-pressed)}.color-picker-channels{align-items:center;gap:var(--spacing);display:flex}.color-picker .color-picker-copy{right:var(--copy-inset);position:absolute;top:50%;translate:0 -50%}.color-picker-field{flex:auto;min-width:0;display:flex;position:relative}.color-picker-field>.color-picker-hex{padding-inline-end:calc(var(--control-height) - var(--copy-inset))}.color-picker-fields{gap:var(--size-100);display:flex}.color-picker-hex{font-family:var(--font-family-mono);text-transform:uppercase;outline:none}.color-picker-hex:focus{outline:var(--focus-width) solid var(--color);outline-offset:-1px}.color-picker-hex[aria-invalid=true]:focus{outline-color:var(--color-invalid)}.color-picker-pad{background-color:hsl(var(--hue), 100%, 50%);border-radius:var(--control-border-radius);cursor:crosshair;height:var(--pad-height);touch-action:none;-webkit-user-select:none;user-select:none;background-image:linear-gradient(#0000,#000),linear-gradient(90deg,#fff,#0000);outline:none;position:relative}.color-picker-pad:after{box-shadow:var(--hairline);content:""}.color-picker-pad:focus-visible{outline:var(--focus-width) solid var(--color);outline-offset:2px}.color-picker-preview{background:linear-gradient(rgb(var(--rgb)/var(--alpha)), rgb(var(--rgb)/var(--alpha))), var(--checker);border-radius:var(--control-border-radius);box-shadow:var(--hairline);height:var(--preview-size);width:var(--preview-size);flex:none}.color-picker-recent{border-top:1px solid var(--control-border-color);padding-top:var(--spacing)}.color-picker-recent-label{color:var(--color-muted);font-size:var(--font-size-300);margin:0 0 var(--size-100);-webkit-user-select:none;user-select:none}.color-picker-sliders{flex-direction:column;flex:1;gap:4px;min-width:0;display:flex}.color-picker-swatch{background:linear-gradient(var(--swatch), var(--swatch)), var(--checker);box-shadow:var(--hairline), 0 0 0 0 var(--ring-offset-color), 0 0 0 0 var(--color);cursor:pointer;height:var(--swatch-size);touch-action:manipulation;transition:box-shadow var(--transition-duration) var(--transition-timing-function), scale var(--transition-duration) var(--transition-timing-function);-webkit-user-select:none;user-select:none;width:var(--swatch-size);border:0;border-radius:50%;outline:none;flex:none;margin:0;padding:0;position:relative}.color-picker-swatch:after{content:"";border-radius:50%;position:absolute;inset:-4px}.color-picker-swatch:active{scale:.96}.color-picker-swatch:focus-visible{outline:var(--focus-width) solid var(--color);outline-offset:4px}.color-picker-swatch.--active{box-shadow:var(--hairline), 0 0 0 2px var(--ring-offset-color), 0 0 0 4px var(--color)}.color-picker-swatch--leaving{animation:color-picker-swatch-leave var(--swatch-exit-duration) var(--swatch-exit-easing) forwards;pointer-events:none;position:absolute}.color-picker-swatches{gap:var(--size-100);height:var(--swatch-size);display:flex;position:relative}.color-picker-thumb{background:rgb(var(--rgb));border:var(--thumb-border);box-shadow:var(--thumb-shadow);box-sizing:border-box;height:var(--thumb-size);pointer-events:none;scale:var(--thumb-scale);transition:scale var(--transition-duration) var(--transition-timing-function);width:var(--thumb-size);z-index:1;border-radius:50%;position:absolute;translate:-50% -50%}@media (prefers-reduced-motion:reduce){.color-picker .color-picker-channel::-webkit-slider-thumb{transition:none}.color-picker .color-picker-channel::-moz-range-thumb{transition:none}.color-picker-swatch:active{scale:1}.color-picker-swatch{transition:box-shadow var(--transition-duration) var(--transition-timing-function)}.color-picker-thumb{transition:none}}@keyframes color-picker-swatch-leave{to{filter:blur(var(--swatch-blur));opacity:0;scale:var(--swatch-scale)}}}
 /*$vite$:1*/