@bornova/colorpicker 1.0.0 → 1.1.0

package/dist/esm/colorpicker.js

@@ -1,4 +1,4 @@
-/* @bornova/colorpicker v1.0.0 */
+/* @bornova/colorpicker v1.1.0 */
 const settings = {
     el: "[data-colorpicker]",
     parent: "body",
@@ -36,7 +36,21 @@ const settings = {
     }
 };
 
-const ctx = document.createElement("canvas").getContext("2d");
+let ctx;
+
+function getCtx() {
+    if (!ctx && typeof document !== "undefined") {
+        try {
+            const canvas = document.createElement("canvas");
+            canvas.width = 1;
+            canvas.height = 1;
+            ctx = canvas.getContext("2d", {
+                willReadFrequently: true
+            });
+        } catch {}
+    }
+    return ctx;
+}
 
 function HSVAtoRGBA(hsva) {
     const saturation = hsva.s / 100;
@@ -94,9 +108,9 @@ function RGBAtoHSVA(rgba) {
             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
@@ -104,28 +118,62 @@ function RGBAtoHSVA(rgba) {
 }
 
 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;
-    let match, rgba;
-    ctx.fillStyle = "#000";
-    ctx.fillStyle = str;
-    match = regex.exec(ctx.fillStyle);
+    const canvasCtx = getCtx();
+    let normalized = str.trim();
+    if (canvasCtx) {
+        canvasCtx.fillStyle = "#000";
+        canvasCtx.fillStyle = str;
+        normalized = canvasCtx.fillStyle;
+    }
+    const match = regex.exec(normalized);
     if (match) {
-        rgba = {
-            r: Number(match[3]),
-            g: Number(match[4]),
-            b: Number(match[5]),
-            a: Number(match[6])
+        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))))
         };
-    } 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
+    }
+    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("");
+        }
+        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
         };
     }
-    return rgba;
+    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))
+            };
+        } catch {}
+    }
+    return {
+        r: 0,
+        g: 0,
+        b: 0,
+        a: 1
+    };
 }
 
 function RGBAToHex(rgba) {
@@ -134,7 +182,7 @@ function RGBAToHex(rgba) {
     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");
+        A = Math.round(rgba.a * 255).toString(16).padStart(2, "0");
     }
     return "#" + R + G + B + A;
 }
@@ -154,7 +202,7 @@ function getEl(id) {
 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);
             }
         });
@@ -183,7 +231,7 @@ const currentColor = {
     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 = {};
 
@@ -191,7 +239,9 @@ let currentInstanceId = "";
 
 let defaultInstance = {};
 
-let hasInstance = false;
+const boundSelectors = new Set;
+
+const boundElements = new WeakSet;
 
 const MARKER_MOVEMENTS = {
     ArrowUp: [ 0, -1 ],
@@ -201,28 +251,28 @@ const MARKER_MOVEMENTS = {
 };
 
 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;
@@ -231,14 +281,22 @@ function configure(options) {
             }
 
           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;
@@ -255,8 +313,9 @@ function configure(options) {
             }
 
           case "wrap":
-            if (options.el && options.wrap) {
-                wrapFields(options.el);
+            settings.wrap = !!options.wrap;
+            if (!("el" in options) && options.wrap) {
+                wrapFields(settings.el);
             }
             break;
 
@@ -302,29 +361,16 @@ function configure(options) {
           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":
@@ -338,14 +384,14 @@ function configure(options) {
 
           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];
@@ -356,14 +402,19 @@ function configure(options) {
                 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;
             }
@@ -372,40 +423,52 @@ function configure(options) {
             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 = {};
-                unsupportedOptions.forEach(option => delete options[option]);
-                for (const option of Object.keys(options)) {
-                    defaultInstance[option] = Array.isArray(settings[option]) ? [ ...settings[option] ] : settings[option];
+    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(options);
-                break;
             }
+            configure(clonedOptions);
+            break;
         }
     }
 }
@@ -419,13 +482,17 @@ function resetVirtualInstance() {
 }
 
 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);
     }
@@ -435,6 +502,9 @@ function openPicker(event) {
     if (settings.inline) {
         return;
     }
+    if (currentEl && currentEl !== event.target) {
+        closePicker();
+    }
     attachVirtualInstance(event.target);
     currentEl = event.target;
     oldColor = currentEl.value;
@@ -442,49 +512,68 @@ function openPicker(event) {
     picker.classList.add("clr-open");
     updatePickerPosition();
     setColorFromStr(oldColor);
+    initialFormatColor = colorValue.value;
     if (settings.focusInput || settings.selectInput) {
         colorValue.focus({
             preventScroll: true
         });
-        colorValue.setSelectionRange(currentEl.selectionStart, currentEl.selectionEnd);
+        let selectionStart = 0;
+        let selectionEnd = 0;
+        try {
+            selectionStart = currentEl.selectionStart;
+            selectionEnd = currentEl.selectionEnd;
+        } catch {}
+        colorValue.setSelectionRange(selectionStart, selectionEnd);
     }
     if (settings.selectInput) {
         colorValue.select();
     }
-    if (keyboardNav || settings.swatchesOnly) {
-        getFocusableElements().shift().focus();
+    if (settings.swatchesOnly) {
+        const firstFocusable = getFocusableElements().shift();
+        if (firstFocusable) {
+            firstFocusable.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
+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) {
@@ -497,9 +586,10 @@ function updatePickerPosition() {
                     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;
             }
@@ -514,25 +604,18 @@ function updatePickerPosition() {
         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")) {
@@ -548,7 +631,7 @@ function wrapColorField(field) {
 
 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;
     }
 }
@@ -564,7 +647,16 @@ function closePicker(revert) {
                     bubbles: true
                 }));
             }
+        } else {
+            const value = 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", {
@@ -573,9 +665,7 @@ function closePicker(revert) {
             }
         });
         picker.classList.remove("clr-open");
-        if (hasInstance) {
-            resetVirtualInstance();
-        }
+        resetVirtualInstance();
         prevEl.dispatchEvent(new Event("close", {
             bubbles: false
         }));
@@ -584,7 +674,6 @@ function closePicker(revert) {
                 preventScroll: true
             });
         }
-        currentEl = undefined;
     }
 }
 
@@ -603,12 +692,13 @@ function setColorFromStr(str) {
 }
 
 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", {
@@ -644,13 +734,7 @@ function updateMarkerA11yLabel(saturation, value) {
 }
 
 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();
 }
@@ -667,7 +751,9 @@ function setMarkerPosition(x, y) {
     colorMarker.style.left = `${x}px`;
     colorMarker.style.top = `${y}px`;
     setColorAtPosition(x, y);
-    colorMarker.focus();
+    colorMarker.focus({
+        preventScroll: true
+    });
 }
 
 function updateColor(rgba = {}, hsva = {}) {
@@ -679,12 +765,6 @@ function updateColor(rgba = {}, hsva = {}) {
     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") {
@@ -703,7 +783,10 @@ function updateColor(rgba = {}, hsva = {}) {
         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() {
@@ -725,15 +808,16 @@ function setAlpha() {
 }
 
 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");
@@ -745,36 +829,36 @@ function init() {
     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", () => {
@@ -797,50 +881,48 @@ function init() {
             closePicker();
         }
     });
-    addListener(document, "mouseup", () => {
-        document.removeEventListener("mousemove", moveMarker);
-    });
-    addListener(document, "touchend", () => {
-        document.removeEventListener("touchmove", moveMarker);
+    addListener(document, "pointerup", () => {
+        document.removeEventListener("pointermove", 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();
-            const firstFocusable = focusables.shift();
-            const lastFocusable = focusables.pop();
-            if (shiftKey && target === firstFocusable) {
-                lastFocusable.focus();
-                event.preventDefault();
-            } else if (!shiftKey && target === lastFocusable) {
-                firstFocusable.focus();
+            if (focusables.length > 1) {
+                const firstFocusable = focusables[0];
+                const lastFocusable = focusables[focusables.length - 1];
+                if (shiftKey && target === firstFocusable) {
+                    lastFocusable.focus();
+                    event.preventDefault();
+                } else if (!shiftKey && target === lastFocusable) {
+                    firstFocusable.focus();
+                    event.preventDefault();
+                }
+            } else if (focusables.length === 1) {
                 event.preventDefault();
             }
         }
     });
     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
         }));
     });