@xtyle/core 0.5.0

package/dist/elements/color-picker.js

@@ -0,0 +1,738 @@
+import { XtyleElement, define } from "./base.js";
+import { channelModels, channelsOf, colorFromChannels, colorFormats, colorToChannels, contrast, formatColor, harmony, harmonySchemes, hsvToRgb, nearestNamedColor, nearestWebSafe, oklchToDisplay, parseColor, rgbToHsv } from "../index.js";
+import { clamp01, colorPickerHostCss, formatChannelValue, namedSnapLabel, OUT_OF_GAMUT_DESAT, PLANE_EDGE_SHADE, PLANE_H, PLANE_MAX_C, PLANE_W, } from "../markup/index.js";
+import { FragmentHost } from "./fragment-host.js";
+import { manifest, fragmentSources } from "./fragments/color-picker/source.generated.js";
+const SNAP_TARGETS = ["web-safe", "named"];
+/** The opaque hex of an HSV triple — used for the area/handle paint. */
+function hexOpaque(hsv) {
+    return formatColor(hsvToRgb({ ...hsv, alpha: 1 }), "hex");
+}
+export class XtyleColorPicker extends XtyleElement {
+    get styleMode() {
+        return "auto";
+    }
+    static formAssociated = true;
+    internals = null;
+    hsv = { h: 217, s: 0.64, v: 1 };
+    alpha = 1;
+    planeMaxC = PLANE_MAX_C;
+    lastShape = "";
+    needsWire = false;
+    fragment = new FragmentHost(this.root, manifest, fragmentSources, "color-picker", {
+        applyIntent: (intent, event) => this.applyIntent(intent, event),
+        afterApply: () => {
+            this.paint();
+            if (this.needsWire && !this.disabled) {
+                this.wireEvents();
+                this.needsWire = false;
+            }
+        },
+    });
+    static get observedAttributes() {
+        return ["value", "format", "modes", "channels", "snap", "plane", "trigger", "swatches", "harmony", "contrast-against", "alpha", "disabled", "label", "labelledby"];
+    }
+    constructor() {
+        super();
+        if (typeof this.attachInternals === "function")
+            this.internals = this.attachInternals();
+    }
+    /** The author-configurable set of readout models the format button cycles. Defaults to all. */
+    get modes() {
+        const raw = this.getAttribute("modes");
+        if (!raw)
+            return colorFormats;
+        const picked = raw
+            .split(",")
+            .map((entry) => entry.trim())
+            .filter((entry) => colorFormats.includes(entry));
+        return picked.length ? picked : colorFormats;
+    }
+    get channelModel() {
+        if (!this.hasAttribute("channels"))
+            return null;
+        const raw = this.getAttribute("channels")?.trim();
+        return raw && channelModels.includes(raw) ? raw : "rgb";
+    }
+    get snapTargets() {
+        if (!this.hasAttribute("snap"))
+            return [];
+        const raw = this.getAttribute("snap")?.trim() ?? "";
+        if (!raw)
+            return [...SNAP_TARGETS];
+        const picked = raw
+            .split(",")
+            .map((entry) => entry.trim())
+            .filter((entry) => SNAP_TARGETS.includes(entry));
+        return picked.length ? picked : [...SNAP_TARGETS];
+    }
+    /** A presence-based boolean attribute, off only when explicitly `"false"`/`"none"` (so `name="true"` from a binding still reads on). */
+    boolAttr(name) {
+        if (!this.hasAttribute(name))
+            return false;
+        const raw = this.getAttribute(name)?.trim().toLowerCase();
+        return raw !== "false" && raw !== "none";
+    }
+    /** Whether the OKLCH perceptual plane (lightness × chroma at the current hue) is shown. */
+    get planeEnabled() {
+        return this.boolAttr("plane");
+    }
+    /** Whether the picker collapses to a swatch button that opens the full UI in a popover. */
+    get triggerEnabled() {
+        return this.boolAttr("trigger");
+    }
+    get format() {
+        const raw = this.getAttribute("format");
+        const modes = this.modes;
+        return raw && modes.includes(raw) ? raw : (modes[0] ?? "hex");
+    }
+    set format(value) {
+        this.setAttribute("format", value);
+    }
+    get swatches() {
+        const raw = this.getAttribute("swatches");
+        return raw ? raw.split(",").map((entry) => entry.trim()).filter(Boolean) : [];
+    }
+    get contrastAgainst() {
+        return this.getAttribute("contrast-against");
+    }
+    /** The active harmony scheme, or null when the `harmony` attribute is unset or unknown. */
+    get harmonyScheme() {
+        const raw = this.getAttribute("harmony");
+        return raw && harmonySchemes.includes(raw) ? raw : null;
+    }
+    /** Opt-in: the alpha track and an alpha channel in the value appear only when set. */
+    get alphaEnabled() {
+        return this.hasAttribute("alpha");
+    }
+    get value() {
+        const alpha = this.alphaEnabled ? this.alpha : 1;
+        return formatColor(hsvToRgb({ ...this.hsv, alpha }), this.format);
+    }
+    set value(next) {
+        const parsed = parseColor(next);
+        if (!parsed)
+            return;
+        const { h, s, v } = rgbToHsv(parsed);
+        this.hsv = { h, s, v };
+        this.alpha = this.alphaEnabled ? parsed.alpha : 1;
+        if (this.root.firstChild)
+            this.paint();
+        this.syncForm();
+    }
+    get disabled() {
+        return this.hasAttribute("disabled");
+    }
+    set disabled(value) {
+        this.reflectBoolean("disabled", value);
+    }
+    ingest(raw) {
+        if (!raw)
+            return;
+        const parsed = parseColor(raw);
+        if (parsed) {
+            const { h, s, v } = rgbToHsv(parsed);
+            this.hsv = { h, s, v };
+            this.alpha = this.alphaEnabled ? parsed.alpha : 1;
+        }
+    }
+    attributeChangedCallback(name, _old, value) {
+        if (!this.root.firstChild)
+            return;
+        if (name === "value") {
+            this.ingest(value);
+            this.paint();
+            this.syncForm();
+        }
+        else if (name === "format") {
+            this.syncFormatButton();
+            this.paint();
+            this.syncForm();
+        }
+        else {
+            this.render();
+        }
+    }
+    syncFormatButton() {
+        const button = this.el(".xtyle-color-picker__format");
+        if (button)
+            button.textContent = this.format.toUpperCase();
+    }
+    cycleFormat() {
+        if (this.disabled)
+            return;
+        const modes = this.modes;
+        const next = modes[(modes.indexOf(this.format) + 1) % modes.length];
+        if (next)
+            this.format = next;
+    }
+    async openEyeDropper() {
+        if (this.disabled)
+            return;
+        const Ctor = window.EyeDropper;
+        if (!Ctor)
+            return;
+        try {
+            const { sRGBHex } = await new Ctor().open();
+            const parsed = parseColor(sRGBHex);
+            if (parsed) {
+                const { h, s, v } = rgbToHsv(parsed);
+                this.setColor({ h, s, v }, parsed.alpha, "change");
+            }
+        }
+        catch {
+            // the user dismissed the picker — leave the color unchanged
+        }
+    }
+    connectedCallback() {
+        this.ingest(this.getAttribute("value"));
+        super.connectedCallback();
+    }
+    syncForm() {
+        this.internals?.setFormValue(this.value);
+    }
+    emit(kind) {
+        this.dispatchEvent(new Event(kind, { bubbles: true, composed: true }));
+    }
+    setColor(hsv, alpha, kind) {
+        if (this.disabled)
+            return;
+        this.hsv = hsv;
+        this.alpha = this.alphaEnabled ? clamp01(alpha) : 1;
+        this.paint();
+        this.syncForm();
+        this.emit(kind);
+    }
+    patchHsv(patch, kind) {
+        this.setColor({ ...this.hsv, ...patch }, this.alpha, kind);
+    }
+    setAlpha(alpha, kind) {
+        this.setColor(this.hsv, alpha, kind);
+    }
+    currentAlpha() {
+        return this.alphaEnabled ? this.alpha : 1;
+    }
+    commitChannels(kind) {
+        const model = this.channelModel;
+        if (!model)
+            return;
+        const inputs = Array.from(this.root.querySelectorAll(".xtyle-color-picker__channel-input"));
+        const values = inputs.map((input) => Number(input.value));
+        const rgb = colorFromChannels(model, values, this.currentAlpha());
+        const { h, s, v } = rgbToHsv(rgb);
+        this.setColor({ h, s, v }, rgb.alpha, kind);
+    }
+    applySnap(target) {
+        if (this.disabled)
+            return;
+        const rgb = hsvToRgb({ ...this.hsv, alpha: this.currentAlpha() });
+        const snapped = target === "named" ? nearestNamedColor(rgb).color : nearestWebSafe(rgb);
+        const { h, s, v } = rgbToHsv(snapped);
+        this.setColor({ h, s, v }, snapped.alpha, "change");
+    }
+    oklchChannels() {
+        const [l = 0, c = 0, h = 0] = colorToChannels(hsvToRgb({ ...this.hsv, alpha: 1 }), "oklch");
+        return [l, c, h];
+    }
+    /** The widest in-gamut chroma at a hue, with headroom, so the plane's chroma axis fills the field. */
+    planeChromaAxis(hue) {
+        let widest = 0;
+        for (let i = 1; i <= 11; i++) {
+            const lightness = i / 12;
+            let chroma = 0;
+            for (let step = 0.02; step <= PLANE_MAX_C; step += 0.02) {
+                if (!oklchToDisplay(lightness, step, hue).inGamut)
+                    break;
+                chroma = step;
+            }
+            if (chroma > widest)
+                widest = chroma;
+        }
+        return Math.min(PLANE_MAX_C, Math.max(0.1, widest * 1.12 + 0.02));
+    }
+    /** The canvas is its own hue cache (its `dataset.hue`), so the pixels only repaint when the hue slice moves. */
+    renderPlane() {
+        const canvas = this.el(".xtyle-color-picker__plane");
+        const ctx = canvas?.getContext("2d");
+        if (!canvas || !ctx)
+            return;
+        const hue = this.oklchChannels()[2];
+        const key = hue.toFixed(2);
+        if (canvas.dataset.hue === key)
+            return;
+        this.planeMaxC = this.planeChromaAxis(hue);
+        const { width, height } = canvas;
+        const image = ctx.createImageData(width, height);
+        const data = image.data;
+        for (let y = 0; y < height; y++) {
+            const lightness = 1 - y / (height - 1);
+            let wasInGamut = true;
+            for (let x = 0; x < width; x++) {
+                const chroma = (x / (width - 1)) * this.planeMaxC;
+                const { color, inGamut } = oklchToDisplay(lightness, chroma, hue);
+                let r = color.r * 255;
+                let g = color.g * 255;
+                let b = color.b * 255;
+                if (!inGamut) {
+                    const luma = 0.3 * r + 0.59 * g + 0.11 * b;
+                    r += (luma - r) * OUT_OF_GAMUT_DESAT;
+                    g += (luma - g) * OUT_OF_GAMUT_DESAT;
+                    b += (luma - b) * OUT_OF_GAMUT_DESAT;
+                }
+                if (x > 0 && inGamut !== wasInGamut) {
+                    r *= PLANE_EDGE_SHADE;
+                    g *= PLANE_EDGE_SHADE;
+                    b *= PLANE_EDGE_SHADE;
+                }
+                wasInGamut = inGamut;
+                const offset = (y * width + x) * 4;
+                data[offset] = Math.round(r);
+                data[offset + 1] = Math.round(g);
+                data[offset + 2] = Math.round(b);
+                data[offset + 3] = 255;
+            }
+        }
+        ctx.putImageData(image, 0, 0);
+        canvas.dataset.hue = key;
+    }
+    setFromPlane(lightness, chroma, hue, kind) {
+        const rgb = colorFromChannels("oklch", [lightness, chroma, hue], this.currentAlpha());
+        const { h, s, v } = rgbToHsv(rgb);
+        this.setColor({ h, s, v }, rgb.alpha, kind);
+    }
+    dragPlane(event) {
+        const canvas = this.el(".xtyle-color-picker__plane");
+        if (!canvas)
+            return;
+        this.el(".xtyle-color-picker__plane-handle")?.focus();
+        event.target.setPointerCapture?.(event.pointerId);
+        const hue = this.oklchChannels()[2];
+        const apply = (e, kind) => this.setFromPlane(1 - this.fractionFrom(e, canvas, "y"), this.fractionFrom(e, canvas, "x") * this.planeMaxC, hue, kind);
+        apply(event, "input");
+        const move = (e) => apply(e, "input");
+        const up = (e) => {
+            canvas.removeEventListener("pointermove", move);
+            canvas.removeEventListener("pointerup", up);
+            apply(e, "change");
+        };
+        canvas.addEventListener("pointermove", move);
+        canvas.addEventListener("pointerup", up);
+    }
+    onPlaneKeydown(event) {
+        const [l, c, hue] = this.oklchChannels();
+        const lStep = event.shiftKey ? 0.1 : 0.02;
+        const cStep = event.shiftKey ? 0.05 : 0.01;
+        let nextL = l;
+        let nextC = c;
+        if (event.key === "ArrowUp")
+            nextL = clamp01(l + lStep);
+        else if (event.key === "ArrowDown")
+            nextL = clamp01(l - lStep);
+        else if (event.key === "ArrowRight")
+            nextC = Math.min(this.planeMaxC, c + cStep);
+        else if (event.key === "ArrowLeft")
+            nextC = Math.max(0, c - cStep);
+        else
+            return;
+        event.preventDefault();
+        this.setFromPlane(nextL, nextC, hue, "change");
+    }
+    el(selector) {
+        return this.root.querySelector(selector);
+    }
+    /** In-place visual update — keeps focus on the handles (no innerHTML rebuild). */
+    paint() {
+        const opaque = hexOpaque(this.hsv);
+        const css = formatColor(hsvToRgb({ ...this.hsv, alpha: this.alpha }), "hex");
+        const display = this.value;
+        const set = (selector, fn) => {
+            const el = this.el(selector);
+            if (el)
+                fn(el);
+        };
+        set(".xtyle-color-picker__area", (el) => {
+            el.style.backgroundColor = hexOpaque({ h: this.hsv.h, s: 1, v: 1 });
+        });
+        set(".xtyle-color-picker__sv-handle", (el) => {
+            el.style.insetInlineStart = `${(this.hsv.s * 100).toFixed(2)}%`;
+            el.style.insetBlockStart = `${((1 - this.hsv.v) * 100).toFixed(2)}%`;
+            el.style.backgroundColor = opaque;
+            el.setAttribute("aria-valuetext", `saturation ${Math.round(this.hsv.s * 100)}%, brightness ${Math.round(this.hsv.v * 100)}%`);
+        });
+        set(".xtyle-color-picker__hue-handle", (el) => {
+            el.style.insetInlineStart = `${((this.hsv.h / 360) * 100).toFixed(2)}%`;
+            el.setAttribute("aria-valuenow", String(Math.round(this.hsv.h)));
+        });
+        set(".xtyle-color-picker__alpha", (el) => el.style.setProperty("--cp-color", opaque));
+        set(".xtyle-color-picker__alpha-handle", (el) => {
+            el.style.insetInlineStart = `${(this.alpha * 100).toFixed(2)}%`;
+            el.style.backgroundColor = css;
+            el.setAttribute("aria-valuenow", String(Math.round(this.alpha * 100)));
+        });
+        set(".xtyle-color-picker__swatch", (el) => el.style.setProperty("--cp-color", css));
+        set(".xtyle-color-picker__trigger", (el) => el.style.setProperty("--cp-color", css));
+        this.root.querySelectorAll(".xtyle-color-picker__preset").forEach((chip) => {
+            chip.setAttribute("aria-pressed", String((chip.dataset.hex ?? "").toLowerCase() === css.toLowerCase()));
+        });
+        const against = this.contrastAgainst ? parseColor(this.contrastAgainst) : null;
+        if (against) {
+            const againstHex = formatColor(against, "hex");
+            const ratio = contrast(opaque, againstHex);
+            set(".xtyle-color-picker__contrast-sample", (el) => {
+                el.style.color = opaque;
+                el.style.backgroundColor = againstHex;
+            });
+            set(".xtyle-color-picker__contrast-ratio", (el) => {
+                el.textContent = ratio.toFixed(2);
+            });
+            const grade = (level, threshold) => set(`.xtyle-color-picker__contrast-badge[data-level="${level}"]`, (el) => {
+                const pass = ratio >= threshold;
+                el.classList.toggle("is-pass", pass);
+                el.classList.toggle("is-fail", !pass);
+                el.setAttribute("aria-label", `${level.toUpperCase()} ${pass ? "passes" : "fails"} at ${ratio.toFixed(2)} to 1`);
+            });
+            grade("aa", 4.5);
+            grade("aaa", 7);
+            const tier = ratio >= 7
+                ? { level: "aaa", text: "AAA", label: "AAA" }
+                : ratio >= 4.5
+                    ? { level: "aa", text: "AA", label: "AA" }
+                    : ratio >= 3
+                        ? { level: "a", text: "A", label: "A (large text only)" }
+                        : { level: "fail", text: "✕", label: "below AA" };
+            set(".xtyle-color-picker__trigger-badge", (el) => {
+                el.dataset.level = tier.level;
+                el.textContent = tier.text;
+            });
+            set(".xtyle-color-picker__trigger", (el) => {
+                el.setAttribute("aria-label", `Open color picker — contrast ${ratio.toFixed(2)} to 1, ${tier.label}`);
+            });
+        }
+        const harmonyEl = this.el(".xtyle-color-picker__harmony");
+        if (harmonyEl && this.harmonyScheme) {
+            const base = parseColor(opaque);
+            const related = base ? harmony(base, this.harmonyScheme) : [];
+            harmonyEl.innerHTML = related
+                .map((rc) => {
+                const hex = formatColor(rc, "hex");
+                return `<button class="xtyle-color-picker__preset xtyle-color-picker__harmony-chip" part="harmony-chip" type="button" data-color="${hex}" data-hex="${hex}" style="--cp-chip: ${hex}" aria-label="${hex}"${this.disabled ? " disabled" : ""}></button>`;
+            })
+                .join("");
+        }
+        const channelModel = this.channelModel;
+        if (channelModel) {
+            const rgb = hsvToRgb({ ...this.hsv, alpha: this.currentAlpha() });
+            const defs = channelsOf(channelModel);
+            const values = colorToChannels(rgb, channelModel);
+            this.root.querySelectorAll(".xtyle-color-picker__channel-input").forEach((input, i) => {
+                const def = defs[i];
+                const value = values[i];
+                if (!def || value === undefined)
+                    return;
+                if (input !== this.root.activeElement)
+                    input.value = String(value);
+                const formatted = formatChannelValue(value, def);
+                input.setAttribute("aria-valuetext", formatted);
+                const readout = input.closest(".xtyle-color-picker__channel")?.querySelector(".xtyle-color-picker__channel-value");
+                if (readout)
+                    readout.textContent = formatted;
+            });
+        }
+        if (this.planeEnabled) {
+            this.renderPlane();
+            const [l, c] = this.oklchChannels();
+            set(".xtyle-color-picker__plane-handle", (el) => {
+                el.style.insetInlineStart = `${(clamp01(c / this.planeMaxC) * 100).toFixed(2)}%`;
+                el.style.insetBlockStart = `${((1 - l) * 100).toFixed(2)}%`;
+                el.style.backgroundColor = opaque;
+                el.setAttribute("aria-valuetext", `lightness ${Math.round(l * 100)}%, chroma ${c.toFixed(3)}`);
+            });
+            set(".xtyle-color-picker__plane-readout", (el) => {
+                el.textContent = `L ${l.toFixed(2)} · C ${c.toFixed(3)}`;
+            });
+        }
+        const namedSnap = this.el(".xtyle-color-picker__snap--named");
+        if (namedSnap) {
+            const labels = namedSnapLabel(nearestNamedColor(hsvToRgb({ ...this.hsv, alpha: this.currentAlpha() })).name);
+            namedSnap.textContent = labels.text;
+            namedSnap.setAttribute("aria-label", labels.aria);
+        }
+        const valueInput = this.el(".xtyle-color-picker__value");
+        if (valueInput && valueInput !== this.root.activeElement)
+            valueInput.value = display;
+    }
+    fractionFrom(event, el, axis) {
+        const rect = el.getBoundingClientRect();
+        if (axis === "x")
+            return clamp01(rect.width === 0 ? 0 : (event.clientX - rect.left) / rect.width);
+        return clamp01(rect.height === 0 ? 0 : (event.clientY - rect.top) / rect.height);
+    }
+    dragTrack(event, trackSelector, handleSelector, apply) {
+        const track = this.el(trackSelector);
+        if (!track)
+            return;
+        this.el(handleSelector)?.focus();
+        event.target.setPointerCapture?.(event.pointerId);
+        const run = (e, kind) => apply(this.fractionFrom(e, track, "x"), kind);
+        run(event, "input");
+        const move = (e) => run(e, "input");
+        const up = (e) => {
+            track.removeEventListener("pointermove", move);
+            track.removeEventListener("pointerup", up);
+            run(e, "change");
+        };
+        track.addEventListener("pointermove", move);
+        track.addEventListener("pointerup", up);
+    }
+    dragArea(event) {
+        const area = this.el(".xtyle-color-picker__area");
+        if (!area)
+            return;
+        this.el(".xtyle-color-picker__sv-handle")?.focus();
+        event.target.setPointerCapture?.(event.pointerId);
+        const apply = (e, kind) => this.patchHsv({ s: this.fractionFrom(e, area, "x"), v: 1 - this.fractionFrom(e, area, "y") }, kind);
+        apply(event, "input");
+        const move = (e) => apply(e, "input");
+        const up = (e) => {
+            area.removeEventListener("pointermove", move);
+            area.removeEventListener("pointerup", up);
+            apply(e, "change");
+        };
+        area.addEventListener("pointermove", move);
+        area.addEventListener("pointerup", up);
+    }
+    onSvKeydown(event) {
+        const step = event.shiftKey ? 0.1 : 0.02;
+        let patch = null;
+        if (event.key === "ArrowRight")
+            patch = { s: clamp01(this.hsv.s + step) };
+        else if (event.key === "ArrowLeft")
+            patch = { s: clamp01(this.hsv.s - step) };
+        else if (event.key === "ArrowUp")
+            patch = { v: clamp01(this.hsv.v + step) };
+        else if (event.key === "ArrowDown")
+            patch = { v: clamp01(this.hsv.v - step) };
+        if (patch) {
+            event.preventDefault();
+            this.patchHsv(patch, "change");
+        }
+    }
+    onHueKeydown(event) {
+        const step = event.shiftKey ? 30 : 5;
+        let h = null;
+        if (event.key === "ArrowRight" || event.key === "ArrowUp")
+            h = this.hsv.h + step;
+        else if (event.key === "ArrowLeft" || event.key === "ArrowDown")
+            h = this.hsv.h - step;
+        else if (event.key === "Home")
+            h = 0;
+        else if (event.key === "End")
+            h = 360;
+        if (h !== null) {
+            event.preventDefault();
+            this.patchHsv({ h: (((h % 360) + 360) % 360) }, "change");
+        }
+    }
+    onAlphaKeydown(event) {
+        const step = event.shiftKey ? 0.1 : 0.02;
+        let a = null;
+        if (event.key === "ArrowRight" || event.key === "ArrowUp")
+            a = this.alpha + step;
+        else if (event.key === "ArrowLeft" || event.key === "ArrowDown")
+            a = this.alpha - step;
+        else if (event.key === "Home")
+            a = 0;
+        else if (event.key === "End")
+            a = 1;
+        if (a !== null) {
+            event.preventDefault();
+            this.setAlpha(a, "change");
+        }
+    }
+    onValueCommit(input) {
+        const parsed = parseColor(input.value);
+        if (parsed) {
+            const { h, s, v } = rgbToHsv(parsed);
+            this.setColor({ h, s, v }, parsed.alpha, "change");
+        }
+        else {
+            input.value = this.value;
+        }
+    }
+    render() {
+        this.adoptComponentSheet();
+        this.fragment.ensureScaffold(colorPickerHostCss);
+        const signature = this.shapeSignature();
+        const rebuilt = !this.lastShape || signature !== this.lastShape;
+        if (this.lastShape && rebuilt)
+            this.fragment.remount();
+        this.lastShape = signature;
+        if (rebuilt)
+            this.needsWire = true;
+        this.fragment.update(this.bindings);
+        this.warnIfUnnamed();
+        this.syncForm();
+        this.paint();
+    }
+    /** Wire the live-DOM interactions the fragment scaffold can't express as delegated handlers —
+     * pointer drags (need `getBoundingClientRect` / `setPointerCapture`), keyboard nav that moves
+     * focus onto handles, the popover positioning, the eyedropper, and channel/value commits. Runs
+     * only when the scaffold is freshly built (initial mount or a shape remount), so listeners never stack. */
+    wireEvents() {
+        this.el(".xtyle-color-picker__area")?.addEventListener("pointerdown", (e) => this.dragArea(e));
+        this.el(".xtyle-color-picker__sv-handle")?.addEventListener("keydown", (e) => this.onSvKeydown(e));
+        this.el(".xtyle-color-picker__hue")?.addEventListener("pointerdown", (e) => this.dragTrack(e, ".xtyle-color-picker__hue", ".xtyle-color-picker__hue-handle", (f, kind) => this.patchHsv({ h: f * 360 }, kind)));
+        this.el(".xtyle-color-picker__hue-handle")?.addEventListener("keydown", (e) => this.onHueKeydown(e));
+        this.el(".xtyle-color-picker__alpha")?.addEventListener("pointerdown", (e) => this.dragTrack(e, ".xtyle-color-picker__alpha", ".xtyle-color-picker__alpha-handle", (f, kind) => this.setAlpha(f, kind)));
+        this.el(".xtyle-color-picker__alpha-handle")?.addEventListener("keydown", (e) => this.onAlphaKeydown(e));
+        const valueInput = this.el(".xtyle-color-picker__value");
+        valueInput?.addEventListener("change", () => this.onValueCommit(valueInput));
+        valueInput?.addEventListener("keydown", (e) => {
+            if (e.key === "Enter") {
+                e.preventDefault();
+                this.onValueCommit(valueInput);
+            }
+        });
+        const trigger = this.el(".xtyle-color-picker__trigger");
+        const popover = this.el(".xtyle-color-picker__popover");
+        if (trigger && popover) {
+            popover.addEventListener("toggle", (event) => {
+                const open = event.newState === "open";
+                trigger.setAttribute("aria-expanded", String(open));
+                if (!open)
+                    return;
+                const rect = trigger.getBoundingClientRect();
+                const width = popover.offsetWidth || 256;
+                const left = Math.max(8, Math.min(rect.left, window.innerWidth - width - 8));
+                popover.style.left = `${Math.round(left)}px`;
+                popover.style.top = `${Math.round(rect.bottom + 6)}px`;
+                window.addEventListener("scroll", () => popover.hidePopover(), { passive: true, capture: true, once: true });
+            });
+        }
+        this.el(".xtyle-color-picker__plane")?.addEventListener("pointerdown", (e) => this.dragPlane(e));
+        this.el(".xtyle-color-picker__plane-handle")?.addEventListener("keydown", (e) => this.onPlaneKeydown(e));
+        const channels = this.el(".xtyle-color-picker__channels");
+        channels?.addEventListener("input", () => this.commitChannels("input"));
+        channels?.addEventListener("change", () => this.commitChannels("change"));
+        this.el(".xtyle-color-picker__snaps")?.addEventListener("click", (event) => {
+            const button = event.target.closest(".xtyle-color-picker__snap");
+            if (button?.dataset.snap)
+                this.applySnap(button.dataset.snap);
+        });
+        this.el(".xtyle-color-picker__format")?.addEventListener("click", () => this.cycleFormat());
+        this.el(".xtyle-color-picker__eyedropper")?.addEventListener("click", () => void this.openEyeDropper());
+        this.root.querySelectorAll(".xtyle-color-picker__preset").forEach((chip) => {
+            chip.addEventListener("click", () => {
+                if (this.disabled)
+                    return;
+                const parsed = parseColor(chip.dataset.color ?? "");
+                if (parsed) {
+                    const { h, s, v } = rgbToHsv(parsed);
+                    this.setColor({ h, s, v }, parsed.alpha, "change");
+                }
+            });
+        });
+        this.el(".xtyle-color-picker__harmony")?.addEventListener("click", (event) => {
+            if (this.disabled)
+                return;
+            const chip = event.target.closest(".xtyle-color-picker__harmony-chip");
+            const parsed = chip ? parseColor(chip.dataset.color ?? "") : null;
+            if (parsed) {
+                const { h, s, v } = rgbToHsv(parsed);
+                this.setColor({ h, s, v }, parsed.alpha, "change");
+            }
+        });
+    }
+    warnIfUnnamed() {
+        if (!this.getAttribute("label") && !this.getAttribute("labelledby")) {
+            console.warn("xtyle-color-picker: no accessible name. Provide a `label` or `labelledby` so the picker is announced.");
+        }
+    }
+    template() {
+        return "";
+    }
+    currentHex() {
+        return formatColor(hsvToRgb({ ...this.hsv, alpha: this.alpha }), "hex");
+    }
+    /** The color-math-derived inputs the fragment can't compute in its sandbox: the host resolves
+     * swatch hexes, channel slider values, and the named-snap label, and passes them as bindings. */
+    get bindings() {
+        const currentHex = this.currentHex();
+        const swatches = this.swatches
+            .map((entry) => {
+            const parsed = parseColor(entry);
+            if (!parsed)
+                return null;
+            const hex = formatColor(parsed, "hex");
+            return { entry, hex, pressed: hex.toLowerCase() === currentHex.toLowerCase() };
+        })
+            .filter((s) => s !== null);
+        const model = this.channelModel;
+        const channels = model
+            ? (() => {
+                const defs = channelsOf(model);
+                const values = colorToChannels(hsvToRgb({ ...this.hsv, alpha: this.currentAlpha() }), model);
+                return defs.map((def, i) => {
+                    const value = values[i] ?? def.min;
+                    return {
+                        label: def.label,
+                        name: `${def.label}${def.unit ? ` (${def.unit})` : ""}`,
+                        min: def.min,
+                        max: def.max,
+                        step: def.step,
+                        value,
+                        formatted: formatChannelValue(value, def),
+                    };
+                });
+            })()
+            : [];
+        const snapTargets = this.snapTargets;
+        const namedSnap = snapTargets.includes("named")
+            ? namedSnapLabel(nearestNamedColor(hsvToRgb({ ...this.hsv, alpha: this.currentAlpha() })).name)
+            : null;
+        return {
+            disabled: this.disabled,
+            label: this.getAttribute("label"),
+            labelledby: this.getAttribute("labelledby"),
+            elementId: this.elementId,
+            formatLabel: this.format.toUpperCase(),
+            planeEnabled: this.planeEnabled,
+            triggerEnabled: this.triggerEnabled,
+            alphaEnabled: this.alphaEnabled,
+            channelModelLabel: model ? model.toUpperCase() : null,
+            harmonyScheme: this.harmonyScheme,
+            hasContrast: !!(this.contrastAgainst && parseColor(this.contrastAgainst)),
+            hasEyeDropper: typeof window !== "undefined" && "EyeDropper" in window,
+            planeWidth: PLANE_W,
+            planeHeight: PLANE_H,
+            swatches,
+            channels,
+            snapTargets,
+            namedSnap,
+        };
+    }
+    /** Structural shape ops can't patch incrementally — any change here rebuilds the scaffold via the
+     * fragment host (a remount). Live color edits (the HSV state) are painted in place by `paint()`. */
+    shapeSignature() {
+        return [
+            this.disabled,
+            this.getAttribute("label") != null,
+            this.getAttribute("labelledby") != null,
+            this.triggerEnabled,
+            this.planeEnabled,
+            this.alphaEnabled,
+            this.channelModel ?? "",
+            this.harmonyScheme ?? "",
+            !!(this.contrastAgainst && parseColor(this.contrastAgainst)),
+            this.snapTargets.join(","),
+            this.swatches.join(","),
+        ].join("|");
+    }
+    applyIntent(intent, event) {
+        if (intent.preventDefault)
+            event.preventDefault();
+    }
+    elementId = `xtyle-color-picker-${Math.random().toString(36).slice(2, 8)}`;
+}
+define("xtyle-color-picker", XtyleColorPicker);
+//# sourceMappingURL=color-picker.js.map