@bornova/colorpicker 1.0.0

package/dist/esm/colorpicker.js

@@ -0,0 +1,886 @@
+/* @bornova/colorpicker v1.0.0 */
+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);
+
+export { ColorPicker as default };