@bornova/colorpicker 1.0.1 → 1.1.0

package/dist/browser/colorpicker.js

@@ -1,4 +1,4 @@
-/* @bornova/colorpicker v1.0.1 */
+/* @bornova/colorpicker v1.1.0 */
 var ColorPicker = function() {
     "use strict";
     const settings = {
@@ -41,7 +41,12 @@ var ColorPicker = function() {
     function getCtx() {
         if (!ctx && typeof document !== "undefined") {
             try {
-                ctx = document.createElement("canvas").getContext("2d");
+                const canvas = document.createElement("canvas");
+                canvas.width = 1;
+                canvas.height = 1;
+                ctx = canvas.getContext("2d", {
+                    willReadFrequently: true
+                });
             } catch {}
         }
         return ctx;
@@ -100,82 +105,71 @@ var ColorPicker = function() {
                 hue = 4 + (red - green) / chroma;
             }
         }
-        hue = Math.floor(hue * 60);
+        hue = Math.round(hue * 60);
         return {
-            h: hue < 0 ? hue + 360 : hue,
+            h: (hue + 360) % 360,
             s: Math.round(saturation * 100),
             v: Math.round(value * 100),
             a: rgba.a
         };
     }
     function strToRGBA(str) {
+        if (typeof str !== "string" || !str.trim()) {
+            return {
+                r: 0,
+                g: 0,
+                b: 0,
+                a: 1
+            };
+        }
         const regex = /^((rgba)|rgb)[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)[\D]*?([\d.]+|$)/i;
         const canvasCtx = getCtx();
-        let match, rgba;
+        let normalized = str.trim();
         if (canvasCtx) {
             canvasCtx.fillStyle = "#000";
             canvasCtx.fillStyle = str;
-            match = regex.exec(canvasCtx.fillStyle);
-            if (match) {
-                rgba = {
-                    r: Number(match[3]),
-                    g: Number(match[4]),
-                    b: Number(match[5]),
-                    a: match[6] === "" ? 1 : Number(match[6])
-                };
-            } else {
-                match = canvasCtx.fillStyle.replace("#", "").match(/.{2}/g).map(h => parseInt(h, 16));
-                rgba = {
-                    r: match[0],
-                    g: match[1],
-                    b: match[2],
-                    a: match[3] !== undefined ? Number((match[3] / 255).toFixed(2)) : 1
-                };
+            normalized = canvasCtx.fillStyle;
+        }
+        const match = regex.exec(normalized);
+        if (match) {
+            return {
+                r: Math.min(255, Math.max(0, Number(match[3]))),
+                g: Math.min(255, Math.max(0, Number(match[4]))),
+                b: Math.min(255, Math.max(0, Number(match[5]))),
+                a: match[6] === "" ? 1 : Math.min(1, Math.max(0, Number(Number(match[6]).toFixed(2))))
+            };
+        }
+        if (/^#?(?:[0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(normalized)) {
+            let hex = normalized.replace("#", "");
+            if (hex.length === 3 || hex.length === 4) {
+                hex = hex.split("").map(c => c + c).join("");
             }
-        } else {
-            match = regex.exec(str);
-            if (match) {
-                rgba = {
-                    r: Number(match[3]),
-                    g: Number(match[4]),
-                    b: Number(match[5]),
-                    a: match[6] === "" ? 1 : Number(match[6])
+            return {
+                r: parseInt(hex.slice(0, 2), 16),
+                g: parseInt(hex.slice(2, 4), 16),
+                b: parseInt(hex.slice(4, 6), 16),
+                a: hex.length === 8 ? Number((parseInt(hex.slice(6, 8), 16) / 255).toFixed(2)) : 1
+            };
+        }
+        if (canvasCtx) {
+            try {
+                canvasCtx.clearRect(0, 0, 1, 1);
+                canvasCtx.fillRect(0, 0, 1, 1);
+                const [r, g, b, a] = canvasCtx.getImageData(0, 0, 1, 1).data;
+                return {
+                    r: r,
+                    g: g,
+                    b: b,
+                    a: Number((a / 255).toFixed(2))
                 };
-            } else {
-                const hex = str.replace("#", "");
-                if (hex.length === 3 || hex.length === 4) {
-                    const r = parseInt(hex[0] + hex[0], 16);
-                    const g = parseInt(hex[1] + hex[1], 16);
-                    const b = parseInt(hex[2] + hex[2], 16);
-                    const a = hex.length === 4 ? Number((parseInt(hex[3] + hex[3], 16) / 255).toFixed(2)) : 1;
-                    rgba = {
-                        r: r,
-                        g: g,
-                        b: b,
-                        a: a
-                    };
-                } else if (hex.length === 6 || hex.length === 8) {
-                    const r = parseInt(hex.slice(0, 2), 16);
-                    const g = parseInt(hex.slice(2, 4), 16);
-                    const b = parseInt(hex.slice(4, 6), 16);
-                    const a = hex.length === 8 ? Number((parseInt(hex.slice(6, 8), 16) / 255).toFixed(2)) : 1;
-                    rgba = {
-                        r: r,
-                        g: g,
-                        b: b,
-                        a: a
-                    };
-                } else {
-                    rgba = {
-                        r: 0,
-                        g: 0,
-                        b: 0,
-                        a: 1
-                    };
-                }
-            }
+            } catch {}
         }
-        return rgba;
+        return {
+            r: 0,
+            g: 0,
+            b: 0,
+            a: 1
+        };
     }
     function RGBAToHex(rgba) {
         const R = rgba.r.toString(16).padStart(2, "0");
@@ -199,7 +193,7 @@ var ColorPicker = function() {
     function addListener(context, type, selector, fn) {
         if (typeof selector === "string") {
             context.addEventListener(type, event => {
-                if (event.target.matches(selector)) {
+                if (event.target instanceof Element && event.target.matches(selector)) {
                     fn.call(event.target, event);
                 }
             });
@@ -225,11 +219,12 @@ var ColorPicker = function() {
         v: 0,
         a: 1
     };
-    let container, picker, colorArea, colorMarker, colorPreview, colorValue, clearButton, closeButton, hueSlider, hueMarker, alphaSlider, alphaMarker, currentEl, currentFormat, oldColor, keyboardNav, colorAreaDims = {};
+    let container, picker, colorArea, colorMarker, colorPreview, colorValue, clearButton, closeButton, hueSlider, hueMarker, alphaSlider, alphaMarker, currentEl, currentFormat, oldColor, initialFormatColor, colorAreaDims = {};
     const instances = {};
     let currentInstanceId = "";
     let defaultInstance = {};
-    let hasInstance = false;
+    const boundSelectors = new Set;
+    const boundElements = new WeakSet;
     const MARKER_MOVEMENTS = {
         ArrowUp: [ 0, -1 ],
         ArrowDown: [ 0, 1 ],
@@ -237,28 +232,28 @@ var ColorPicker = function() {
         ArrowRight: [ 1, 0 ]
     };
     function configure(options) {
-        if (typeof options !== "object") {
+        if (!options || typeof options !== "object") {
             return;
         }
         for (const key of Object.keys(options)) {
             switch (key) {
               case "el":
                 bindFields(options.el);
-                if (options.wrap !== false) {
+                if (options.wrap !== false && (options.wrap || settings.wrap)) {
                     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;
+                {
+                    const newContainer = options.parent instanceof HTMLElement ? options.parent : typeof options.parent === "string" ? document.querySelector(options.parent) : null;
+                    if (newContainer) {
+                        newContainer.appendChild(picker);
+                        settings.parent = options.parent;
+                        container = newContainer === document.body ? undefined : newContainer;
                     }
+                    break;
                 }
-                break;
 
               case "themeMode":
                 settings.themeMode = options.themeMode;
@@ -267,14 +262,22 @@ var ColorPicker = function() {
                 }
 
               case "theme":
-                if (options.theme) {
-                    settings.theme = options.theme;
-                }
-                picker.className = `clr-picker clr-${settings.theme} clr-${settings.themeMode}`;
-                if (settings.inline) {
-                    updatePickerPosition();
+                {
+                    if (options.theme) {
+                        settings.theme = options.theme;
+                    }
+                    const isOpen = picker.classList.contains("clr-open");
+                    const isLeft = picker.classList.contains("clr-left");
+                    const isTop = picker.classList.contains("clr-top");
+                    picker.className = `clr-picker clr-${settings.theme} clr-${settings.themeMode}`;
+                    picker.classList.toggle("clr-open", isOpen);
+                    picker.classList.toggle("clr-left", isLeft);
+                    picker.classList.toggle("clr-top", isTop);
+                    if (settings.inline) {
+                        updatePickerPosition();
+                    }
+                    break;
                 }
-                break;
 
               case "rtl":
                 settings.rtl = !!options.rtl;
@@ -291,8 +294,9 @@ var ColorPicker = function() {
                 }
 
               case "wrap":
-                if (options.el && options.wrap) {
-                    wrapFields(options.el);
+                settings.wrap = !!options.wrap;
+                if (!("el" in options) && options.wrap) {
+                    wrapFields(settings.el);
                 }
                 break;
 
@@ -338,29 +342,16 @@ var ColorPicker = function() {
               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;
-                }
+                settings.clearButton = !!options.clearButton;
+                clearButton.style.display = settings.clearButton ? "block" : "none";
+                break;
 
               case "clearLabel":
                 settings.clearLabel = options.clearLabel;
-                clearButton.innerHTML = settings.clearLabel;
+                clearButton.textContent = settings.clearLabel;
                 break;
 
               case "closeButton":
@@ -374,14 +365,14 @@ var ColorPicker = function() {
 
               case "closeLabel":
                 settings.closeLabel = options.closeLabel;
-                closeButton.innerHTML = settings.closeLabel;
+                closeButton.textContent = settings.closeLabel;
                 break;
 
               case "a11y":
                 {
                     const labels = options.a11y;
                     let update = false;
-                    if (typeof labels === "object") {
+                    if (labels && typeof labels === "object") {
                         for (const label of Object.keys(labels)) {
                             if (labels[label] && settings.a11y[label]) {
                                 settings.a11y[label] = labels[label];
@@ -392,14 +383,19 @@ var ColorPicker = function() {
                     if (update) {
                         const openLabel = getEl("clr-open-label");
                         const swatchLabel = getEl("clr-swatch-label");
-                        openLabel.innerHTML = settings.a11y.open;
-                        swatchLabel.innerHTML = settings.a11y.swatch;
+                        const formatLegend = picker.querySelector(".clr-format legend");
+                        openLabel.textContent = settings.a11y.open;
+                        swatchLabel.textContent = settings.a11y.swatch;
+                        if (formatLegend) {
+                            formatLegend.textContent = settings.a11y.format;
+                        }
                         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);
+                        updateMarkerA11yLabel(currentColor.s, currentColor.v);
                     }
                     break;
                 }
@@ -408,43 +404,49 @@ var ColorPicker = function() {
                 settings[key] = options[key];
             }
         }
+        if (settings.formatToggle) {
+            settings.format = "auto";
+        }
+        if (settings.inline && ("inline" in options || "defaultColor" in options || "format" in options || "formatToggle" in options || "alpha" in options || "forceAlpha" in options)) {
+            const defaultColor = options.defaultColor || settings.defaultColor;
+            currentFormat = getColorFormatFromStr(defaultColor);
+            updatePickerPosition();
+            setColorFromStr(defaultColor);
+        }
     }
     function setVirtualInstance(selector, options) {
-        if (typeof selector === "string" && typeof options === "object") {
+        if (typeof selector === "string" && options && 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();
-            }
+        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 = {};
-                    const clonedOptions = {
-                        ...options
-                    };
-                    unsupportedOptions.forEach(option => delete clonedOptions[option]);
-                    for (const option of Object.keys(clonedOptions)) {
-                        defaultInstance[option] = Array.isArray(settings[option]) ? [ ...settings[option] ] : settings[option];
-                        if (option === "clearButton") {
-                            defaultInstance["clearLabel"] = settings.clearLabel;
-                        }
+        if (currentInstanceId) {
+            resetVirtualInstance();
+        }
+        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 = {};
+                const clonedOptions = {
+                    ...options
+                };
+                unsupportedOptions.forEach(option => delete clonedOptions[option]);
+                for (const option of Object.keys(clonedOptions)) {
+                    defaultInstance[option] = Array.isArray(settings[option]) ? [ ...settings[option] ] : settings[option];
+                    if (option === "formatToggle" && !("format" in clonedOptions)) {
+                        defaultInstance.format = settings.format;
                     }
-                    configure(clonedOptions);
-                    break;
                 }
+                configure(clonedOptions);
+                break;
             }
         }
     }
@@ -456,13 +458,17 @@ var ColorPicker = function() {
         }
     }
     function bindFields(selector) {
-        const fields = selector instanceof HTMLElement ? [ selector ] : selector;
+        const fields = selector instanceof HTMLElement ? [ selector ] : selector instanceof NodeList ? [ ...selector ] : selector;
         if (Array.isArray(fields)) {
             fields.forEach(field => {
-                addListener(field, "click", openPicker);
-                addListener(field, "input", updateColorPreview);
+                if (field instanceof HTMLElement && !boundElements.has(field)) {
+                    boundElements.add(field);
+                    addListener(field, "click", openPicker);
+                    addListener(field, "input", updateColorPreview);
+                }
             });
-        } else {
+        } else if (typeof fields === "string" && !boundSelectors.has(fields)) {
+            boundSelectors.add(fields);
             addListener(document, "click", fields, openPicker);
             addListener(document, "input", fields, updateColorPreview);
         }
@@ -471,6 +477,9 @@ var ColorPicker = function() {
         if (settings.inline) {
             return;
         }
+        if (currentEl && currentEl !== event.target) {
+            closePicker();
+        }
         attachVirtualInstance(event.target);
         currentEl = event.target;
         oldColor = currentEl.value;
@@ -478,6 +487,7 @@ var ColorPicker = function() {
         picker.classList.add("clr-open");
         updatePickerPosition();
         setColorFromStr(oldColor);
+        initialFormatColor = colorValue.value;
         if (settings.focusInput || settings.selectInput) {
             colorValue.focus({
                 preventScroll: true
@@ -493,7 +503,7 @@ var ColorPicker = function() {
         if (settings.selectInput) {
             colorValue.select();
         }
-        if (keyboardNav || settings.swatchesOnly) {
+        if (settings.swatchesOnly) {
             const firstFocusable = getFocusableElements().shift();
             if (firstFocusable) {
                 firstFocusable.focus();
@@ -503,32 +513,40 @@ var ColorPicker = function() {
             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
+    function updateColorAreaDims() {
+        const rect = colorArea.getBoundingClientRect();
+        colorAreaDims = {
+            width: rect.width || colorArea.offsetWidth,
+            height: rect.height || colorArea.offsetHeight,
+            x: rect.x + window.scrollX,
+            y: rect.y + window.scrollY
         };
-        if (parent) {
-            parentStyle = window.getComputedStyle(parent);
-            parentMarginTop = parseFloat(parentStyle.marginTop);
-            parentBorderTop = parseFloat(parentStyle.borderTopWidth);
-            offset = parent.getBoundingClientRect();
-            offset.y += parentBorderTop + scrollY;
+    }
+    function updatePickerPosition() {
+        if (!picker || !currentEl && !settings.inline) {
+            return;
         }
         if (!settings.inline) {
+            const parent = container;
+            const scrollX = window.scrollX;
+            const scrollY = window.scrollY;
+            const pickerWidth = picker.offsetWidth;
+            const pickerHeight = picker.offsetHeight;
+            const reposition = {
+                left: false,
+                top: false
+            };
             const coords = currentEl.getBoundingClientRect();
-            let left = coords.x;
+            let left = scrollX + coords.x;
             let top = scrollY + coords.y + coords.height + settings.margin;
             if (parent) {
+                const parentStyle = window.getComputedStyle(parent);
+                const parentMarginTop = parseFloat(parentStyle.marginTop);
+                const parentBorderTop = parseFloat(parentStyle.borderTopWidth);
+                const parentBorderLeft = parseFloat(parentStyle.borderLeftWidth);
+                const offset = parent.getBoundingClientRect();
+                offset.x += parentBorderLeft + scrollX;
+                offset.y += parentBorderTop + scrollY;
                 left -= offset.x;
                 top -= offset.y;
                 if (left + pickerWidth > parent.clientWidth) {
@@ -541,9 +559,10 @@ var ColorPicker = function() {
                         reposition.top = true;
                     }
                 }
+                left += parent.scrollLeft;
                 top += parent.scrollTop;
             } else {
-                if (left + pickerWidth > document.documentElement.clientWidth) {
+                if (left - scrollX + pickerWidth > document.documentElement.clientWidth) {
                     left += coords.width - pickerWidth;
                     reposition.left = true;
                 }
@@ -558,23 +577,16 @@ var ColorPicker = function() {
             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
-        };
+        updateColorAreaDims();
     }
     function wrapFields(selector) {
-        const fields = selector instanceof HTMLElement ? [ selector ] : Array.isArray(selector) ? selector : [ ...document.querySelectorAll(selector) ];
+        const fields = selector instanceof HTMLElement ? [ selector ] : Array.isArray(selector) || selector instanceof NodeList ? [ ...selector ] : typeof selector === "string" ? [ ...document.querySelectorAll(selector) ] : [];
         fields.forEach(wrapColorField);
     }
     function wrapColorField(field) {
-        const parentNode = field.parentNode;
-        if (!parentNode.classList.contains("clr-field")) {
+        const parentNode = field?.parentNode;
+        if (parentNode && parentNode.classList && !parentNode.classList.contains("clr-field")) {
             const wrapper = document.createElement("div");
             let classes = "clr-field";
             if (settings.rtl || field.classList.contains("clr-rtl")) {
@@ -589,7 +601,7 @@ var ColorPicker = function() {
     }
     function updateColorPreview(event) {
         const parent = event.target.parentNode;
-        if (parent.classList.contains("clr-field")) {
+        if (parent && parent.classList && parent.classList.contains("clr-field")) {
             parent.style.color = event.target.value;
         }
     }
@@ -606,13 +618,14 @@ var ColorPicker = function() {
                 }
             } else {
                 const value = colorValue.value;
-                if (value === "") {
-                    pickColor("");
-                } else {
-                    setColorFromStr(value);
-                    pickColor(colorValue.value);
+                if (value !== initialFormatColor) {
+                    if (value !== "") {
+                        setColorFromStr(value);
+                    }
+                    pickColor(value === "" ? "" : colorValue.value);
                 }
             }
+            currentEl = undefined;
             setTimeout(() => {
                 if (oldColor !== prevEl.value) {
                     prevEl.dispatchEvent(new Event("change", {
@@ -621,9 +634,7 @@ var ColorPicker = function() {
                 }
             });
             picker.classList.remove("clr-open");
-            if (hasInstance) {
-                resetVirtualInstance();
-            }
+            resetVirtualInstance();
             prevEl.dispatchEvent(new Event("close", {
                 bubbles: false
             }));
@@ -632,7 +643,6 @@ var ColorPicker = function() {
                     preventScroll: true
                 });
             }
-            currentEl = undefined;
         }
     }
     function setColorFromStr(str) {
@@ -649,11 +659,12 @@ var ColorPicker = function() {
         alphaMarker.style.left = `${hsva.a * 100}%`;
     }
     function getColorFormatFromStr(str) {
-        const fmt = str.slice(0, 3).toLowerCase();
+        const fmt = str.trim().slice(0, 3).toLowerCase();
         return fmt === "rgb" || fmt === "hsl" ? fmt : "hex";
     }
     function pickColor(color) {
         color = color ?? colorValue.value;
+        initialFormatColor = colorValue.value;
         if (currentEl) {
             currentEl.value = color;
             currentEl.dispatchEvent(new Event("input", {
@@ -686,13 +697,7 @@ var ColorPicker = function() {
         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);
+        setMarkerPosition(event.pageX - colorAreaDims.x, event.pageY - colorAreaDims.y);
         event.preventDefault();
         event.stopPropagation();
     }
@@ -707,7 +712,9 @@ var ColorPicker = function() {
         colorMarker.style.left = `${x}px`;
         colorMarker.style.top = `${y}px`;
         setColorAtPosition(x, y);
-        colorMarker.focus();
+        colorMarker.focus({
+            preventScroll: true
+        });
     }
     function updateColor(rgba = {}, hsva = {}) {
         let format = settings.format;
@@ -718,12 +725,6 @@ var ColorPicker = function() {
         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") {
@@ -742,7 +743,10 @@ var ColorPicker = function() {
             colorValue.value = HSLAToStr(HSVAtoHSLA(currentColor));
             break;
         }
-        document.querySelector(`.clr-format [value="${format}"]`).checked = true;
+        const formatRadio = picker.querySelector(`.clr-format [value="${format}"]`);
+        if (formatRadio) {
+            formatRadio.checked = true;
+        }
     }
     function setHue() {
         const hue = Number(hueSlider.value);
@@ -761,14 +765,15 @@ var ColorPicker = function() {
         pickColor();
     }
     function getFocusableElements() {
-        return [ ...picker.querySelectorAll("input, button") ].filter(node => !!node.offsetWidth);
+        return [ ...picker.querySelectorAll("input, button, [tabindex]") ].filter(node => !!node.offsetWidth && (node.type !== "radio" || node.checked));
     }
     function init() {
         container = undefined;
         picker = document.createElement("div");
         picker.setAttribute("id", "clr-picker");
+        picker.setAttribute("role", "dialog");
         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  `;
+        picker.innerHTML = `\n    <input id="clr-color-value" name="clr-color-value" class="clr-color" type="text" value="" spellcheck="false">\n    <div id="clr-color-area" class="clr-gradient" role="application">\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">\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">\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></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      </fieldset>\n    </div>\n    <div id="clr-swatches" class="clr-swatches"></div>\n    <button type="button" id="clr-clear" class="clr-clear"></button>\n    <div id="clr-color-preview" class="clr-preview">\n      <button type="button" id="clr-close" class="clr-close"></button>\n    </div>\n    <span id="clr-open-label" hidden></span>\n    <span id="clr-swatch-label" hidden></span>\n  `;
         document.body.appendChild(picker);
         colorArea = getEl("clr-color-area");
         colorMarker = getEl("clr-color-marker");
@@ -780,36 +785,36 @@ var ColorPicker = function() {
         hueMarker = getEl("clr-hue-marker");
         alphaSlider = getEl("clr-alpha-slider");
         alphaMarker = getEl("clr-alpha-marker");
+        colorValue.setAttribute("aria-label", settings.a11y.input);
+        colorArea.setAttribute("aria-label", settings.a11y.instruction);
+        hueSlider.setAttribute("aria-label", settings.a11y.hueSlider);
+        alphaSlider.setAttribute("aria-label", settings.a11y.alphaSlider);
+        clearButton.setAttribute("aria-label", settings.a11y.clear);
+        clearButton.textContent = settings.clearLabel;
+        closeButton.setAttribute("aria-label", settings.a11y.close);
+        closeButton.textContent = settings.closeLabel;
+        picker.querySelector(".clr-format legend").textContent = settings.a11y.format;
+        getEl("clr-open-label").textContent = settings.a11y.open;
+        getEl("clr-swatch-label").textContent = settings.a11y.swatch;
         bindFields(settings.el);
         wrapFields(settings.el);
-        addListener(picker, "mousedown", event => {
-            picker.classList.remove("clr-keyboard-nav");
+        addListener(picker, "pointerdown", event => {
             event.stopPropagation();
         });
-        addListener(colorArea, "mousedown", () => {
-            addListener(document, "mousemove", moveMarker);
+        addListener(colorArea, "pointerdown", () => {
+            updateColorAreaDims();
+            addListener(document, "pointermove", 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);
+                if (value !== "") {
+                    setColorFromStr(value);
+                }
+                pickColor(value === "" ? "" : colorValue.value);
             }
         });
         addListener(clearButton, "click", () => {
@@ -832,33 +837,29 @@ var ColorPicker = function() {
                 closePicker();
             }
         });
-        addListener(document, "mouseup", () => {
-            document.removeEventListener("mousemove", moveMarker);
+        addListener(document, "pointerup", () => {
+            document.removeEventListener("pointermove", moveMarker);
         });
-        addListener(document, "touchend", () => {
-            document.removeEventListener("touchmove", moveMarker);
-        });
-        addListener(document, "mousedown", () => {
-            keyboardNav = false;
-            picker.classList.remove("clr-keyboard-nav");
+        addListener(document, "pointerdown", () => {
             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);
+                if (currentEl) {
+                    closePicker(true);
+                }
                 return;
             } else if (key === "Enter" && target.tagName !== "BUTTON") {
-                closePicker();
+                if (currentEl) {
+                    event.preventDefault();
+                    closePicker();
+                }
                 return;
-            } else if (navKeys.includes(key)) {
-                keyboardNav = true;
-                picker.classList.add("clr-keyboard-nav");
             }
-            if (key === "Tab" && target.matches(".clr-picker *")) {
+            if (key === "Tab" && target instanceof Element && target.matches(".clr-picker *")) {
                 const focusables = getFocusableElements();
                 if (focusables.length > 1) {
                     const firstFocusable = focusables[0];
@@ -876,10 +877,8 @@ var ColorPicker = function() {
             }
         });
         addListener(document, "click", ".clr-field button", event => {
-            if (hasInstance) {
-                resetVirtualInstance();
-            }
-            event.target.nextElementSibling.dispatchEvent(new Event("click", {
+            resetVirtualInstance();
+            event.target.nextElementSibling?.dispatchEvent(new Event("click", {
                 bubbles: true
             }));
         });