@bornova/colorpicker 1.0.0

package/dist/browser/colorpicker.js

@@ -0,0 +1,836 @@
+/* @bornova/colorpicker v1.0.0 */
+var ColorPicker = function() {
+    "use strict";
+    const settings = {
+        el: "[data-colorpicker]",
+        parent: "body",
+        theme: "default",
+        themeMode: "light",
+        rtl: false,
+        wrap: true,
+        margin: 2,
+        format: "hex",
+        formatToggle: false,
+        swatches: [],
+        swatchesOnly: false,
+        alpha: true,
+        forceAlpha: false,
+        focusInput: true,
+        selectInput: false,
+        inline: false,
+        defaultColor: "#000000",
+        clearButton: false,
+        clearLabel: "Clear",
+        closeButton: false,
+        closeLabel: "Close",
+        onChange: () => undefined,
+        a11y: {
+            open: "Open color picker",
+            close: "Close color picker",
+            clear: "Clear the selected color",
+            marker: "Saturation: {s}. Brightness: {v}.",
+            hueSlider: "Hue slider",
+            alphaSlider: "Opacity slider",
+            input: "Color value field",
+            format: "Color format",
+            swatch: "Color swatch",
+            instruction: "Saturation and brightness selector. Use up, down, left and right arrow keys to select."
+        }
+    };
+    const ctx = document.createElement("canvas").getContext("2d");
+    function HSVAtoRGBA(hsva) {
+        const saturation = hsva.s / 100;
+        const value = hsva.v / 100;
+        let chroma = saturation * value;
+        let hueBy60 = hsva.h / 60;
+        let x = chroma * (1 - Math.abs(hueBy60 % 2 - 1));
+        let m = value - chroma;
+        chroma += m;
+        x += m;
+        const index = Math.floor(hueBy60) % 6;
+        const red = [ chroma, x, m, m, x, chroma ][index];
+        const green = [ x, chroma, chroma, x, m, m ][index];
+        const blue = [ m, m, x, chroma, chroma, x ][index];
+        return {
+            r: Math.round(red * 255),
+            g: Math.round(green * 255),
+            b: Math.round(blue * 255),
+            a: hsva.a
+        };
+    }
+    function HSVAtoHSLA(hsva) {
+        const value = hsva.v / 100;
+        const lightness = value * (1 - hsva.s / 100 / 2);
+        let saturation;
+        if (lightness > 0 && lightness < 1) {
+            saturation = Math.round((value - lightness) / Math.min(lightness, 1 - lightness) * 100);
+        }
+        return {
+            h: hsva.h,
+            s: saturation || 0,
+            l: Math.round(lightness * 100),
+            a: hsva.a
+        };
+    }
+    function RGBAtoHSVA(rgba) {
+        const red = rgba.r / 255;
+        const green = rgba.g / 255;
+        const blue = rgba.b / 255;
+        const xmax = Math.max(red, green, blue);
+        const xmin = Math.min(red, green, blue);
+        const chroma = xmax - xmin;
+        const value = xmax;
+        let hue = 0;
+        let saturation = 0;
+        if (chroma) {
+            saturation = chroma / xmax;
+            if (xmax === red) {
+                hue = (green - blue) / chroma;
+            } else if (xmax === green) {
+                hue = 2 + (blue - red) / chroma;
+            } else {
+                hue = 4 + (red - green) / chroma;
+            }
+        }
+        hue = Math.floor(hue * 60);
+        return {
+            h: hue < 0 ? hue + 360 : hue,
+            s: Math.round(saturation * 100),
+            v: Math.round(value * 100),
+            a: rgba.a
+        };
+    }
+    function strToRGBA(str) {
+        const regex = /^((rgba)|rgb)[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)[\D]*?([\d.]+|$)/i;
+        let match, rgba;
+        ctx.fillStyle = "#000";
+        ctx.fillStyle = str;
+        match = regex.exec(ctx.fillStyle);
+        if (match) {
+            rgba = {
+                r: Number(match[3]),
+                g: Number(match[4]),
+                b: Number(match[5]),
+                a: Number(match[6])
+            };
+        } else {
+            match = ctx.fillStyle.replace("#", "").match(/.{2}/g).map(h => parseInt(h, 16));
+            rgba = {
+                r: match[0],
+                g: match[1],
+                b: match[2],
+                a: 1
+            };
+        }
+        return rgba;
+    }
+    function RGBAToHex(rgba) {
+        const R = rgba.r.toString(16).padStart(2, "0");
+        const G = rgba.g.toString(16).padStart(2, "0");
+        const B = rgba.b.toString(16).padStart(2, "0");
+        let A = "";
+        if (settings.alpha && (rgba.a < 1 || settings.forceAlpha)) {
+            A = (rgba.a * 255 | 0).toString(16).padStart(2, "0");
+        }
+        return "#" + R + G + B + A;
+    }
+    function RGBAToStr(rgba) {
+        return !settings.alpha || rgba.a === 1 && !settings.forceAlpha ? `rgb(${rgba.r}, ${rgba.g}, ${rgba.b})` : `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${rgba.a})`;
+    }
+    function HSLAToStr(hsla) {
+        return !settings.alpha || hsla.a === 1 && !settings.forceAlpha ? `hsl(${hsla.h}, ${hsla.s}%, ${hsla.l}%)` : `hsla(${hsla.h}, ${hsla.s}%, ${hsla.l}%, ${hsla.a})`;
+    }
+    function getEl(id) {
+        return document.getElementById(id);
+    }
+    function addListener(context, type, selector, fn) {
+        if (typeof selector === "string") {
+            context.addEventListener(type, event => {
+                if (event.target.matches(selector)) {
+                    fn.call(event.target, event);
+                }
+            });
+        } else {
+            context.addEventListener(type, selector);
+        }
+    }
+    function DOMReady(fn, args = []) {
+        if (document.readyState !== "loading") {
+            fn(...args);
+        } else {
+            document.addEventListener("DOMContentLoaded", () => {
+                fn(...args);
+            });
+        }
+    }
+    const currentColor = {
+        r: 0,
+        g: 0,
+        b: 0,
+        h: 0,
+        s: 0,
+        v: 0,
+        a: 1
+    };
+    let container, picker, colorArea, colorMarker, colorPreview, colorValue, clearButton, closeButton, hueSlider, hueMarker, alphaSlider, alphaMarker, currentEl, currentFormat, oldColor, keyboardNav, colorAreaDims = {};
+    const instances = {};
+    let currentInstanceId = "";
+    let defaultInstance = {};
+    let hasInstance = false;
+    const MARKER_MOVEMENTS = {
+        ArrowUp: [ 0, -1 ],
+        ArrowDown: [ 0, 1 ],
+        ArrowLeft: [ -1, 0 ],
+        ArrowRight: [ 1, 0 ]
+    };
+    function configure(options) {
+        if (typeof options !== "object") {
+            return;
+        }
+        for (const key of Object.keys(options)) {
+            switch (key) {
+              case "el":
+                bindFields(options.el);
+                if (options.wrap !== false) {
+                    wrapFields(options.el);
+                }
+                break;
+
+              case "parent":
+                container = options.parent instanceof HTMLElement ? options.parent : document.querySelector(options.parent);
+                if (container) {
+                    container.appendChild(picker);
+                    settings.parent = options.parent;
+                    if (container === document.body) {
+                        container = undefined;
+                    }
+                }
+                break;
+
+              case "themeMode":
+                settings.themeMode = options.themeMode;
+                if (options.themeMode === "auto" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
+                    settings.themeMode = "dark";
+                }
+
+              case "theme":
+                if (options.theme) {
+                    settings.theme = options.theme;
+                }
+                picker.className = `clr-picker clr-${settings.theme} clr-${settings.themeMode}`;
+                if (settings.inline) {
+                    updatePickerPosition();
+                }
+                break;
+
+              case "rtl":
+                settings.rtl = !!options.rtl;
+                for (const field of document.getElementsByClassName("clr-field")) {
+                    field.classList.toggle("clr-rtl", settings.rtl);
+                }
+                break;
+
+              case "margin":
+                {
+                    const margin = Number(options.margin);
+                    settings.margin = !isNaN(margin) ? margin : settings.margin;
+                    break;
+                }
+
+              case "wrap":
+                if (options.el && options.wrap) {
+                    wrapFields(options.el);
+                }
+                break;
+
+              case "formatToggle":
+                settings.formatToggle = !!options.formatToggle;
+                getEl("clr-format").style.display = settings.formatToggle ? "block" : "none";
+                if (settings.formatToggle) {
+                    settings.format = "auto";
+                }
+                break;
+
+              case "swatches":
+                if (Array.isArray(options.swatches)) {
+                    const swatchesContainer = getEl("clr-swatches");
+                    swatchesContainer.textContent = "";
+                    if (options.swatches.length) {
+                        const swatches = document.createElement("div");
+                        options.swatches.forEach((swatch, i) => {
+                            const button = document.createElement("button");
+                            button.setAttribute("type", "button");
+                            button.setAttribute("id", `clr-swatch-${i}`);
+                            button.setAttribute("aria-labelledby", `clr-swatch-label clr-swatch-${i}`);
+                            button.style.color = swatch;
+                            button.textContent = swatch;
+                            swatches.appendChild(button);
+                        });
+                        swatchesContainer.appendChild(swatches);
+                    }
+                    settings.swatches = [ ...options.swatches ];
+                }
+                break;
+
+              case "swatchesOnly":
+                settings.swatchesOnly = !!options.swatchesOnly;
+                picker.setAttribute("data-minimal", settings.swatchesOnly);
+                break;
+
+              case "alpha":
+                settings.alpha = !!options.alpha;
+                picker.setAttribute("data-alpha", settings.alpha);
+                break;
+
+              case "inline":
+                settings.inline = !!options.inline;
+                picker.setAttribute("data-inline", settings.inline);
+                if (settings.inline) {
+                    const defaultColor = options.defaultColor || settings.defaultColor;
+                    currentFormat = getColorFormatFromStr(defaultColor);
+                    updatePickerPosition();
+                    setColorFromStr(defaultColor);
+                }
+                break;
+
+              case "clearButton":
+                {
+                    if (typeof options.clearButton === "object" && options.clearButton.label) {
+                        settings.clearLabel = options.clearButton.label;
+                        clearButton.innerHTML = settings.clearLabel;
+                    }
+                    const show = typeof options.clearButton === "object" ? options.clearButton.show : options.clearButton;
+                    settings.clearButton = !!show;
+                    clearButton.style.display = settings.clearButton ? "block" : "none";
+                    break;
+                }
+
+              case "clearLabel":
+                settings.clearLabel = options.clearLabel;
+                clearButton.innerHTML = settings.clearLabel;
+                break;
+
+              case "closeButton":
+                settings.closeButton = !!options.closeButton;
+                if (settings.closeButton) {
+                    picker.insertBefore(closeButton, colorPreview);
+                } else {
+                    colorPreview.appendChild(closeButton);
+                }
+                break;
+
+              case "closeLabel":
+                settings.closeLabel = options.closeLabel;
+                closeButton.innerHTML = settings.closeLabel;
+                break;
+
+              case "a11y":
+                {
+                    const labels = options.a11y;
+                    let update = false;
+                    if (typeof labels === "object") {
+                        for (const label of Object.keys(labels)) {
+                            if (labels[label] && settings.a11y[label]) {
+                                settings.a11y[label] = labels[label];
+                                update = true;
+                            }
+                        }
+                    }
+                    if (update) {
+                        const openLabel = getEl("clr-open-label");
+                        const swatchLabel = getEl("clr-swatch-label");
+                        openLabel.innerHTML = settings.a11y.open;
+                        swatchLabel.innerHTML = settings.a11y.swatch;
+                        closeButton.setAttribute("aria-label", settings.a11y.close);
+                        clearButton.setAttribute("aria-label", settings.a11y.clear);
+                        hueSlider.setAttribute("aria-label", settings.a11y.hueSlider);
+                        alphaSlider.setAttribute("aria-label", settings.a11y.alphaSlider);
+                        colorValue.setAttribute("aria-label", settings.a11y.input);
+                        colorArea.setAttribute("aria-label", settings.a11y.instruction);
+                    }
+                    break;
+                }
+
+              default:
+                settings[key] = options[key];
+            }
+        }
+    }
+    function setVirtualInstance(selector, options) {
+        if (typeof selector === "string" && typeof options === "object") {
+            instances[selector] = options;
+            hasInstance = true;
+        }
+    }
+    function removeVirtualInstance(selector) {
+        delete instances[selector];
+        if (Object.keys(instances).length === 0) {
+            hasInstance = false;
+            if (selector === currentInstanceId) {
+                resetVirtualInstance();
+            }
+        }
+    }
+    function attachVirtualInstance(element) {
+        if (hasInstance) {
+            const unsupportedOptions = [ "el", "wrap", "rtl", "inline", "defaultColor", "a11y" ];
+            for (const selector of Object.keys(instances)) {
+                const options = instances[selector];
+                if (element.matches(selector)) {
+                    currentInstanceId = selector;
+                    defaultInstance = {};
+                    unsupportedOptions.forEach(option => delete options[option]);
+                    for (const option of Object.keys(options)) {
+                        defaultInstance[option] = Array.isArray(settings[option]) ? [ ...settings[option] ] : settings[option];
+                    }
+                    configure(options);
+                    break;
+                }
+            }
+        }
+    }
+    function resetVirtualInstance() {
+        if (Object.keys(defaultInstance).length > 0) {
+            configure(defaultInstance);
+            currentInstanceId = "";
+            defaultInstance = {};
+        }
+    }
+    function bindFields(selector) {
+        const fields = selector instanceof HTMLElement ? [ selector ] : selector;
+        if (Array.isArray(fields)) {
+            fields.forEach(field => {
+                addListener(field, "click", openPicker);
+                addListener(field, "input", updateColorPreview);
+            });
+        } else {
+            addListener(document, "click", fields, openPicker);
+            addListener(document, "input", fields, updateColorPreview);
+        }
+    }
+    function openPicker(event) {
+        if (settings.inline) {
+            return;
+        }
+        attachVirtualInstance(event.target);
+        currentEl = event.target;
+        oldColor = currentEl.value;
+        currentFormat = getColorFormatFromStr(oldColor);
+        picker.classList.add("clr-open");
+        updatePickerPosition();
+        setColorFromStr(oldColor);
+        if (settings.focusInput || settings.selectInput) {
+            colorValue.focus({
+                preventScroll: true
+            });
+            colorValue.setSelectionRange(currentEl.selectionStart, currentEl.selectionEnd);
+        }
+        if (settings.selectInput) {
+            colorValue.select();
+        }
+        if (keyboardNav || settings.swatchesOnly) {
+            getFocusableElements().shift().focus();
+        }
+        currentEl.dispatchEvent(new Event("open", {
+            bubbles: false
+        }));
+    }
+    function updatePickerPosition() {
+        const parent = container;
+        const scrollY = window.scrollY;
+        const pickerWidth = picker.offsetWidth;
+        const pickerHeight = picker.offsetHeight;
+        const reposition = {
+            left: false,
+            top: false
+        };
+        let parentStyle, parentMarginTop, parentBorderTop;
+        let offset = {
+            x: 0,
+            y: 0
+        };
+        if (parent) {
+            parentStyle = window.getComputedStyle(parent);
+            parentMarginTop = parseFloat(parentStyle.marginTop);
+            parentBorderTop = parseFloat(parentStyle.borderTopWidth);
+            offset = parent.getBoundingClientRect();
+            offset.y += parentBorderTop + scrollY;
+        }
+        if (!settings.inline) {
+            const coords = currentEl.getBoundingClientRect();
+            let left = coords.x;
+            let top = scrollY + coords.y + coords.height + settings.margin;
+            if (parent) {
+                left -= offset.x;
+                top -= offset.y;
+                if (left + pickerWidth > parent.clientWidth) {
+                    left += coords.width - pickerWidth;
+                    reposition.left = true;
+                }
+                if (top + pickerHeight > parent.clientHeight - parentMarginTop) {
+                    if (pickerHeight + settings.margin <= coords.top - (offset.y - scrollY)) {
+                        top -= coords.height + pickerHeight + settings.margin * 2;
+                        reposition.top = true;
+                    }
+                }
+                top += parent.scrollTop;
+            } else {
+                if (left + pickerWidth > document.documentElement.clientWidth) {
+                    left += coords.width - pickerWidth;
+                    reposition.left = true;
+                }
+                if (top + pickerHeight - scrollY > document.documentElement.clientHeight) {
+                    if (pickerHeight + settings.margin <= coords.top) {
+                        top = scrollY + coords.y - pickerHeight - settings.margin;
+                        reposition.top = true;
+                    }
+                }
+            }
+            picker.classList.toggle("clr-left", reposition.left);
+            picker.classList.toggle("clr-top", reposition.top);
+            picker.style.left = `${left}px`;
+            picker.style.top = `${top}px`;
+            offset.x += picker.offsetLeft;
+            offset.y += picker.offsetTop;
+        }
+        colorAreaDims = {
+            width: colorArea.offsetWidth,
+            height: colorArea.offsetHeight,
+            x: colorArea.offsetLeft + offset.x,
+            y: colorArea.offsetTop + offset.y
+        };
+    }
+    function wrapFields(selector) {
+        const fields = selector instanceof HTMLElement ? [ selector ] : Array.isArray(selector) ? selector : [ ...document.querySelectorAll(selector) ];
+        fields.forEach(wrapColorField);
+    }
+    function wrapColorField(field) {
+        const parentNode = field.parentNode;
+        if (!parentNode.classList.contains("clr-field")) {
+            const wrapper = document.createElement("div");
+            let classes = "clr-field";
+            if (settings.rtl || field.classList.contains("clr-rtl")) {
+                classes += " clr-rtl";
+            }
+            wrapper.innerHTML = '<button type="button" aria-labelledby="clr-open-label"></button>';
+            parentNode.insertBefore(wrapper, field);
+            wrapper.className = classes;
+            wrapper.style.color = field.value;
+            wrapper.appendChild(field);
+        }
+    }
+    function updateColorPreview(event) {
+        const parent = event.target.parentNode;
+        if (parent.classList.contains("clr-field")) {
+            parent.style.color = event.target.value;
+        }
+    }
+    function closePicker(revert) {
+        if (currentEl && !settings.inline) {
+            const prevEl = currentEl;
+            if (revert) {
+                currentEl = undefined;
+                if (oldColor !== prevEl.value) {
+                    prevEl.value = oldColor;
+                    prevEl.dispatchEvent(new Event("input", {
+                        bubbles: true
+                    }));
+                }
+            }
+            setTimeout(() => {
+                if (oldColor !== prevEl.value) {
+                    prevEl.dispatchEvent(new Event("change", {
+                        bubbles: true
+                    }));
+                }
+            });
+            picker.classList.remove("clr-open");
+            if (hasInstance) {
+                resetVirtualInstance();
+            }
+            prevEl.dispatchEvent(new Event("close", {
+                bubbles: false
+            }));
+            if (settings.focusInput) {
+                prevEl.focus({
+                    preventScroll: true
+                });
+            }
+            currentEl = undefined;
+        }
+    }
+    function setColorFromStr(str) {
+        const rgba = strToRGBA(str);
+        const hsva = RGBAtoHSVA(rgba);
+        updateMarkerA11yLabel(hsva.s, hsva.v);
+        updateColor(rgba, hsva);
+        hueSlider.value = hsva.h;
+        picker.style.color = `hsl(${hsva.h}, 100%, 50%)`;
+        hueMarker.style.left = `${hsva.h / 360 * 100}%`;
+        colorMarker.style.left = `${colorAreaDims.width * hsva.s / 100}px`;
+        colorMarker.style.top = `${colorAreaDims.height - colorAreaDims.height * hsva.v / 100}px`;
+        alphaSlider.value = hsva.a * 100;
+        alphaMarker.style.left = `${hsva.a * 100}%`;
+    }
+    function getColorFormatFromStr(str) {
+        const fmt = str.slice(0, 3).toLowerCase();
+        return fmt === "rgb" || fmt === "hsl" ? fmt : "hex";
+    }
+    function pickColor(color) {
+        color = color ?? colorValue.value;
+        if (currentEl) {
+            currentEl.value = color;
+            currentEl.dispatchEvent(new Event("input", {
+                bubbles: true
+            }));
+        }
+        if (settings.onChange) {
+            settings.onChange.call(window, color, currentEl);
+        }
+        document.dispatchEvent(new CustomEvent("colorpicker:pick", {
+            detail: {
+                color: color,
+                currentEl: currentEl
+            }
+        }));
+    }
+    function setColorAtPosition(x, y) {
+        const hsva = {
+            h: Number(hueSlider.value),
+            s: x / colorAreaDims.width * 100,
+            v: 100 - y / colorAreaDims.height * 100,
+            a: alphaSlider.value / 100
+        };
+        const rgba = HSVAtoRGBA(hsva);
+        updateMarkerA11yLabel(hsva.s, hsva.v);
+        updateColor(rgba, hsva);
+        pickColor();
+    }
+    function updateMarkerA11yLabel(saturation, value) {
+        colorMarker.setAttribute("aria-label", settings.a11y.marker.replace("{s}", Number(saturation.toFixed(1))).replace("{v}", Number(value.toFixed(1))));
+    }
+    function moveMarker(event) {
+        const touch = event.changedTouches?.[0];
+        let x = (touch?.pageX ?? event.pageX) - colorAreaDims.x;
+        let y = (touch?.pageY ?? event.pageY) - colorAreaDims.y;
+        if (container) {
+            y += container.scrollTop;
+        }
+        setMarkerPosition(x, y);
+        event.preventDefault();
+        event.stopPropagation();
+    }
+    function moveMarkerOnKeydown(offsetX, offsetY) {
+        const x = parseFloat(colorMarker.style.left) + offsetX;
+        const y = parseFloat(colorMarker.style.top) + offsetY;
+        setMarkerPosition(x, y);
+    }
+    function setMarkerPosition(x, y) {
+        x = Math.max(0, Math.min(x, colorAreaDims.width));
+        y = Math.max(0, Math.min(y, colorAreaDims.height));
+        colorMarker.style.left = `${x}px`;
+        colorMarker.style.top = `${y}px`;
+        setColorAtPosition(x, y);
+        colorMarker.focus();
+    }
+    function updateColor(rgba = {}, hsva = {}) {
+        let format = settings.format;
+        Object.assign(currentColor, rgba, hsva);
+        const hex = RGBAToHex(currentColor);
+        const opaqueHex = hex.substring(0, 7);
+        colorMarker.style.color = opaqueHex;
+        alphaMarker.parentNode.style.color = opaqueHex;
+        alphaMarker.style.color = hex;
+        colorPreview.style.color = hex;
+        colorArea.style.display = "none";
+        colorArea.offsetHeight;
+        colorArea.style.display = "";
+        alphaMarker.nextElementSibling.style.display = "none";
+        alphaMarker.nextElementSibling.offsetHeight;
+        alphaMarker.nextElementSibling.style.display = "";
+        if (format === "mixed") {
+            format = currentColor.a === 1 ? "hex" : "rgb";
+        } else if (format === "auto") {
+            format = currentFormat;
+        }
+        switch (format) {
+          case "hex":
+            colorValue.value = hex;
+            break;
+
+          case "rgb":
+            colorValue.value = RGBAToStr(currentColor);
+            break;
+
+          case "hsl":
+            colorValue.value = HSLAToStr(HSVAtoHSLA(currentColor));
+            break;
+        }
+        document.querySelector(`.clr-format [value="${format}"]`).checked = true;
+    }
+    function setHue() {
+        const hue = Number(hueSlider.value);
+        const x = parseFloat(colorMarker.style.left);
+        const y = parseFloat(colorMarker.style.top);
+        picker.style.color = `hsl(${hue}, 100%, 50%)`;
+        hueMarker.style.left = `${hue / 360 * 100}%`;
+        setColorAtPosition(x, y);
+    }
+    function setAlpha() {
+        const alpha = alphaSlider.value / 100;
+        alphaMarker.style.left = `${alpha * 100}%`;
+        updateColor({
+            a: alpha
+        });
+        pickColor();
+    }
+    function getFocusableElements() {
+        return [ ...picker.querySelectorAll("input, button") ].filter(node => !!node.offsetWidth);
+    }
+    function init() {
+        container = undefined;
+        picker = document.createElement("div");
+        picker.setAttribute("id", "clr-picker");
+        picker.className = "clr-picker";
+        picker.innerHTML = `\n    <input id="clr-color-value" name="clr-color-value" class="clr-color" type="text" value="" spellcheck="false" aria-label="${settings.a11y.input}">\n    <div id="clr-color-area" class="clr-gradient" role="application" aria-label="${settings.a11y.instruction}">\n      <div id="clr-color-marker" class="clr-marker" tabindex="0"></div>\n    </div>\n    <div class="clr-hue">\n      <input id="clr-hue-slider" name="clr-hue-slider" type="range" min="0" max="360" step="1" aria-label="${settings.a11y.hueSlider}">\n      <div id="clr-hue-marker"></div>\n    </div>\n    <div class="clr-alpha">\n      <input id="clr-alpha-slider" name="clr-alpha-slider" type="range" min="0" max="100" step="1" aria-label="${settings.a11y.alphaSlider}">\n      <div id="clr-alpha-marker"></div>\n      <span></span>\n    </div>\n    <div id="clr-format" class="clr-format">\n      <fieldset class="clr-segmented">\n        <legend>${settings.a11y.format}</legend>\n        <input id="clr-f1" type="radio" name="clr-format" value="hex">\n        <label for="clr-f1">Hex</label>\n        <input id="clr-f2" type="radio" name="clr-format" value="rgb">\n        <label for="clr-f2">RGB</label>\n        <input id="clr-f3" type="radio" name="clr-format" value="hsl">\n        <label for="clr-f3">HSL</label>\n        <span></span>\n      </fieldset>\n    </div>\n    <div id="clr-swatches" class="clr-swatches"></div>\n    <button type="button" id="clr-clear" class="clr-clear" aria-label="${settings.a11y.clear}">${settings.clearLabel}</button>\n    <div id="clr-color-preview" class="clr-preview">\n      <button type="button" id="clr-close" class="clr-close" aria-label="${settings.a11y.close}">${settings.closeLabel}</button>\n    </div>\n    <span id="clr-open-label" hidden>${settings.a11y.open}</span>\n    <span id="clr-swatch-label" hidden>${settings.a11y.swatch}</span>\n  `;
+        document.body.appendChild(picker);
+        colorArea = getEl("clr-color-area");
+        colorMarker = getEl("clr-color-marker");
+        clearButton = getEl("clr-clear");
+        closeButton = getEl("clr-close");
+        colorPreview = getEl("clr-color-preview");
+        colorValue = getEl("clr-color-value");
+        hueSlider = getEl("clr-hue-slider");
+        hueMarker = getEl("clr-hue-marker");
+        alphaSlider = getEl("clr-alpha-slider");
+        alphaMarker = getEl("clr-alpha-marker");
+        bindFields(settings.el);
+        wrapFields(settings.el);
+        addListener(picker, "mousedown", event => {
+            picker.classList.remove("clr-keyboard-nav");
+            event.stopPropagation();
+        });
+        addListener(colorArea, "mousedown", () => {
+            addListener(document, "mousemove", moveMarker);
+        });
+        addListener(colorArea, "contextmenu", event => {
+            event.preventDefault();
+        });
+        addListener(colorArea, "touchstart", () => {
+            document.addEventListener("touchmove", moveMarker, {
+                passive: false
+            });
+        });
+        addListener(colorMarker, "mousedown", () => {
+            addListener(document, "mousemove", moveMarker);
+        });
+        addListener(colorMarker, "touchstart", () => {
+            document.addEventListener("touchmove", moveMarker, {
+                passive: false
+            });
+        });
+        addListener(colorValue, "change", () => {
+            const value = colorValue.value;
+            if (currentEl || settings.inline) {
+                const color = value === "" ? value : setColorFromStr(value);
+                pickColor(color);
+            }
+        });
+        addListener(clearButton, "click", () => {
+            pickColor("");
+            closePicker();
+        });
+        addListener(closeButton, "click", () => {
+            pickColor();
+            closePicker();
+        });
+        addListener(getEl("clr-format"), "click", ".clr-format input", event => {
+            currentFormat = event.target.value;
+            updateColor();
+            pickColor();
+        });
+        addListener(picker, "click", ".clr-swatches button", event => {
+            setColorFromStr(event.target.textContent);
+            pickColor();
+            if (settings.swatchesOnly) {
+                closePicker();
+            }
+        });
+        addListener(document, "mouseup", () => {
+            document.removeEventListener("mousemove", moveMarker);
+        });
+        addListener(document, "touchend", () => {
+            document.removeEventListener("touchmove", moveMarker);
+        });
+        addListener(document, "mousedown", () => {
+            keyboardNav = false;
+            picker.classList.remove("clr-keyboard-nav");
+            closePicker();
+        });
+        addListener(document, "keydown", event => {
+            const key = event.key;
+            const target = event.target;
+            const shiftKey = event.shiftKey;
+            const navKeys = [ "Tab", "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight" ];
+            if (key === "Escape") {
+                closePicker(true);
+                return;
+            } else if (key === "Enter" && target.tagName !== "BUTTON") {
+                closePicker();
+                return;
+            } else if (navKeys.includes(key)) {
+                keyboardNav = true;
+                picker.classList.add("clr-keyboard-nav");
+            }
+            if (key === "Tab" && target.matches(".clr-picker *")) {
+                const focusables = getFocusableElements();
+                const firstFocusable = focusables.shift();
+                const lastFocusable = focusables.pop();
+                if (shiftKey && target === firstFocusable) {
+                    lastFocusable.focus();
+                    event.preventDefault();
+                } else if (!shiftKey && target === lastFocusable) {
+                    firstFocusable.focus();
+                    event.preventDefault();
+                }
+            }
+        });
+        addListener(document, "click", ".clr-field button", event => {
+            if (hasInstance) {
+                resetVirtualInstance();
+            }
+            event.target.nextElementSibling.dispatchEvent(new Event("click", {
+                bubbles: true
+            }));
+        });
+        addListener(colorMarker, "keydown", event => {
+            if (event.key in MARKER_MOVEMENTS) {
+                moveMarkerOnKeydown(...MARKER_MOVEMENTS[event.key]);
+                event.preventDefault();
+            }
+        });
+        addListener(colorArea, "click", moveMarker);
+        addListener(hueSlider, "input", setHue);
+        addListener(alphaSlider, "input", setAlpha);
+    }
+    function ColorPicker(options) {
+        DOMReady(() => {
+            if (options) {
+                if (typeof options === "string") {
+                    bindFields(options);
+                } else {
+                    configure(options);
+                }
+            }
+        });
+    }
+    ColorPicker.set = (...args) => DOMReady(configure, args);
+    ColorPicker.wrap = (...args) => DOMReady(wrapFields, args);
+    ColorPicker.close = (...args) => DOMReady(closePicker, args);
+    ColorPicker.setInstance = (...args) => DOMReady(setVirtualInstance, args);
+    ColorPicker.removeInstance = (...args) => DOMReady(removeVirtualInstance, args);
+    ColorPicker.updatePosition = (...args) => DOMReady(updatePickerPosition, args);
+    ColorPicker.ready = DOMReady;
+    DOMReady(init);
+    return ColorPicker;
+}();