@melloware/coloris - npm Package Compare versions

Comparing version 0.21.1 to 0.22.0

dist/esm/coloris.js

@@ -1,2 +0,2 @@
-var Coloris = function () {
+const Coloris = (() => {
   /*!
@@ -10,6 +10,6 @@ * Copyright (c) 2021-2023 Momo Bassit.
 
-  return function (window, document, Math, undefined) {
-    var ctx = document.createElement('canvas').getContext('2d');
-    var currentColor = { r: 0, g: 0, b: 0, h: 0, s: 0, v: 0, a: 1 };
-    var container,picker,colorArea,colorMarker,colorPreview,colorValue,clearButton,closeButton,
+  return ((window, document, Math, undefined) => {
+    const ctx = document.createElement('canvas').getContext('2d');
+    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,
@@ -19,3 +19,3 @@ colorAreaDims = {};
     // Default settings
-    var settings = {
+    const settings = {
       el: '[data-coloris]',
@@ -42,3 +42,3 @@ parent: 'body',
       closeLabel: 'Close',
-      onChange: function onChange() {return undefined;},
+      onChange: () => undefined,
       a11y: {
@@ -59,6 +59,6 @@ open: 'Open color picker',
     // Virtual instances cache
-    var instances = {};
-    var currentInstanceId = '';
-    var defaultInstance = {};
-    var hasInstance = false;
+    const instances = {};
+    let currentInstanceId = '';
+    let defaultInstance = {};
+    let hasInstance = false;
 
@@ -72,5 +72,5 @@ /**
         return;
-      }var _loop = function _loop()
+      }
 
-      {
+      for (const key in options) {
         switch (key) {
@@ -107,3 +107,3 @@ case 'el':
             // Set the theme and color scheme
-            picker.className = "clr-picker clr-" + settings.theme + " clr-" + settings.themeMode;
+            picker.className = `clr-picker clr-${settings.theme} clr-${settings.themeMode}`;
 
@@ -117,3 +117,3 @@ // Update the color picker's position if inline mode is in use
             settings.rtl = !!options.rtl;
-            document.querySelectorAll('.clr-field').forEach(function (field) {return field.classList.toggle('clr-rtl', settings.rtl);});
+            document.querySelectorAll('.clr-field').forEach((field) => field.classList.toggle('clr-rtl', settings.rtl));
             break;
@@ -138,9 +138,9 @@ case 'margin':
             if (Array.isArray(options.swatches)) {
-              var swatches = [];
+              const swatches = [];
 
-              options.swatches.forEach(function (swatch, i) {
-                swatches.push("<button type=\"button\" id=\"clr-swatch-" + i + "\" aria-labelledby=\"clr-swatch-label clr-swatch-" + i + "\" style=\"color: " + swatch + ";\">" + swatch + "</button>");
+              options.swatches.forEach((swatch, i) => {
+                swatches.push(`<button type="button" id="clr-swatch-${i}" aria-labelledby="clr-swatch-label clr-swatch-${i}" style="color: ${swatch};">${swatch}</button>`);
               });
 
-              getEl('clr-swatches').innerHTML = swatches.length ? "<div>" + swatches.join('') + "</div>" : '';
+              getEl('clr-swatches').innerHTML = swatches.length ? `<div>${swatches.join('')}</div>` : '';
               settings.swatches = options.swatches.slice();
@@ -162,3 +162,3 @@ }
             if (settings.inline) {
-              var defaultColor = options.defaultColor || settings.defaultColor;
+              const defaultColor = options.defaultColor || settings.defaultColor;
 
@@ -203,7 +203,7 @@ currentFormat = getColorFormatFromStr(defaultColor);
           case 'a11y':
-            var labels = options.a11y;
-            var update = false;
+            const labels = options.a11y;
+            let update = false;
 
             if (typeof labels === 'object') {
-              for (var label in labels) {
+              for (const label in labels) {
                 if (labels[label] && settings.a11y[label]) {
@@ -217,4 +217,4 @@ settings.a11y[label] = labels[label];
             if (update) {
-              var openLabel = getEl('clr-open-label');
-              var swatchLabel = getEl('clr-swatch-label');
+              const openLabel = getEl('clr-open-label');
+              const swatchLabel = getEl('clr-swatch-label');
 
@@ -234,3 +234,3 @@ openLabel.innerHTML = settings.a11y.open;
         }
-      };for (var key in options) {_loop();}
+      }
     }
@@ -273,6 +273,6 @@
         // These options can only be set globally, not per instance
-        var unsupportedOptions = ['el', 'wrap', 'rtl', 'inline', 'defaultColor', 'a11y'];var _loop2 = function _loop2()
+        const unsupportedOptions = ['el', 'wrap', 'rtl', 'inline', 'defaultColor', 'a11y'];
 
-        {
-          var options = instances[selector];
+        for (let selector in instances) {
+          const options = instances[selector];
 
@@ -285,6 +285,6 @@ // If the element matches an instance's CSS selector
             // Delete unsupported options
-            unsupportedOptions.forEach(function (option) {return delete options[option];});
+            unsupportedOptions.forEach((option) => delete options[option]);
 
             // Back up the default options so we can restore them later
-            for (var option in options) {
+            for (let option in options) {
               defaultInstance[option] = Array.isArray(settings[option]) ? settings[option].slice() : settings[option];
@@ -294,6 +294,6 @@ }
             // Set the instance's options
-            configure(options);return "break";
-
+            configure(options);
+            break;
           }
-        };for (var selector in instances) {var _ret = _loop2();if (_ret === "break") break;}
+        }
       }
@@ -319,3 +319,3 @@ }
       // Show the color picker on click on the input fields that match the selector
-      addListener(document, 'click', selector, function (event) {
+      addListener(document, 'click', selector, (event) => {
         // Skip if inline mode is in use
@@ -356,4 +356,4 @@ if (settings.inline) {
       // Update the color preview of the input fields that match the selector
-      addListener(document, 'input', selector, function (event) {
-        var parent = event.target.parentNode;
+      addListener(document, 'input', selector, (event) => {
+        const parent = event.target.parentNode;
 
@@ -372,9 +372,9 @@ // Only update the preview if the field has been previously wrapped
       if (!picker || !currentEl && !settings.inline) return; //** DO NOT REMOVE: in case called before initialized
-      var parent = container;
-      var scrollY = window.scrollY;
-      var pickerWidth = picker.offsetWidth;
-      var pickerHeight = picker.offsetHeight;
-      var reposition = { left: false, top: false };
-      var parentStyle, parentMarginTop, parentBorderTop;
-      var offset = { x: 0, y: 0 };
+      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 };
 
@@ -391,5 +391,5 @@ if (parent) {
       if (!settings.inline) {
-        var coords = currentEl.getBoundingClientRect();
-        var left = coords.x;
-        var top = scrollY + coords.y + coords.height + settings.margin;
+        const coords = currentEl.getBoundingClientRect();
+        let left = coords.x;
+        let top = scrollY + coords.y + coords.height + settings.margin;
 
@@ -433,4 +433,4 @@ // If the color picker is inside a custom container
         picker.classList.toggle('clr-top', reposition.top);
-        picker.style.left = left + "px";
-        picker.style.top = top + "px";
+        picker.style.left = `${left}px`;
+        picker.style.top = `${top}px`;
         offset.x += picker.offsetLeft;
@@ -453,8 +453,8 @@ offset.y += picker.offsetTop;
     function wrapFields(selector) {
-      document.querySelectorAll(selector).forEach(function (field) {
-        var parentNode = field.parentNode;
+      document.querySelectorAll(selector).forEach((field) => {
+        const parentNode = field.parentNode;
 
         if (!parentNode.classList.contains('clr-field')) {
-          var wrapper = document.createElement('div');
-          var classes = 'clr-field';
+          const wrapper = document.createElement('div');
+          let classes = 'clr-field';
 
@@ -465,3 +465,3 @@ if (settings.rtl || field.classList.contains('clr-rtl')) {
 
-          wrapper.innerHTML = "<button type=\"button\" aria-labelledby=\"clr-open-label\"></button>";
+          wrapper.innerHTML = `<button type="button" aria-labelledby="clr-open-label"></button>`;
           parentNode.insertBefore(wrapper, field);
@@ -481,3 +481,3 @@ wrapper.setAttribute('class', classes);
       if (currentEl && !settings.inline) {
-        var prevEl = currentEl;
+        const prevEl = currentEl;
 
@@ -498,3 +498,3 @@ // Revert the color to the original value if needed
         // Trigger a "change" event if needed
-        setTimeout(function () {// Add this to the end of the event loop
+        setTimeout(() => {// Add this to the end of the event loop
           if (oldColor !== prevEl.value) {
@@ -530,4 +530,4 @@ prevEl.dispatchEvent(new Event('change', { bubbles: true }));
     function setColorFromStr(str) {
-      var rgba = strToRGBA(str);
-      var hsva = RGBAtoHSVA(rgba);
+      const rgba = strToRGBA(str);
+      const hsva = RGBAtoHSVA(rgba);
 
@@ -539,10 +539,10 @@ updateMarkerA11yLabel(hsva.s, hsva.v);
       hueSlider.value = hsva.h;
-      picker.style.color = "hsl(" + hsva.h + ", 100%, 50%)";
-      hueMarker.style.left = hsva.h / 360 * 100 + "%";
+      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";
+      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 + "%";
+      alphaMarker.style.left = `${hsva.a * 100}%`;
     }
@@ -556,3 +556,3 @@
     function getColorFormatFromStr(str) {
-      var format = str.substring(0, 3).toLowerCase();
+      const format = str.substring(0, 3).toLowerCase();
 
@@ -582,3 +582,3 @@ if (format === 'rgb' || format === 'hsl') {
 
-      document.dispatchEvent(new CustomEvent('coloris:pick', { detail: { color: color, currentEl: currentEl } }));
+      document.dispatchEvent(new CustomEvent('coloris:pick', { detail: { color, currentEl } }));
     }
@@ -592,3 +592,3 @@
     function setColorAtPosition(x, y) {
-      var hsva = {
+      const hsva = {
         h: hueSlider.value * 1,
@@ -599,3 +599,3 @@ s: x / colorAreaDims.width * 100,
       };
-      var rgba = HSVAtoRGBA(hsva);
+      const rgba = HSVAtoRGBA(hsva);
 
@@ -613,3 +613,3 @@ updateMarkerA11yLabel(hsva.s, hsva.v);
     function updateMarkerA11yLabel(saturation, value) {
-      var label = settings.a11y.marker;
+      let label = settings.a11y.marker;
 
@@ -641,5 +641,5 @@ saturation = saturation.toFixed(1) * 1;
     function moveMarker(event) {
-      var pointer = getPointerPosition(event);
-      var x = pointer.pageX - colorAreaDims.x;
-      var y = pointer.pageY - colorAreaDims.y;
+      const pointer = getPointerPosition(event);
+      let x = pointer.pageX - colorAreaDims.x;
+      let y = pointer.pageY - colorAreaDims.y;
 
@@ -663,4 +663,4 @@ if (container) {
     function moveMarkerOnKeydown(offsetX, offsetY) {
-      var x = colorMarker.style.left.replace('px', '') * 1 + offsetX;
-      var y = colorMarker.style.top.replace('px', '') * 1 + offsetY;
+      let x = colorMarker.style.left.replace('px', '') * 1 + offsetX;
+      let y = colorMarker.style.top.replace('px', '') * 1 + offsetY;
 
@@ -681,4 +681,4 @@ setMarkerPosition(x, y);
       // Set the position
-      colorMarker.style.left = x + "px";
-      colorMarker.style.top = y + "px";
+      colorMarker.style.left = `${x}px`;
+      colorMarker.style.top = `${y}px`;
 
@@ -698,14 +698,14 @@ // Update the color
     function updateColor(rgba, hsva) {if (rgba === void 0) {rgba = {};}if (hsva === void 0) {hsva = {};}
-      var format = settings.format;
+      let format = settings.format;
 
-      for (var key in rgba) {
+      for (const key in rgba) {
         currentColor[key] = rgba[key];
       }
 
-      for (var _key in hsva) {
-        currentColor[_key] = hsva[_key];
+      for (const key in hsva) {
+        currentColor[key] = hsva[key];
       }
 
-      var hex = RGBAToHex(currentColor);
-      var opaqueHex = hex.substring(0, 7);
+      const hex = RGBAToHex(currentColor);
+      const opaqueHex = hex.substring(0, 7);
 
@@ -744,3 +744,3 @@ colorMarker.style.color = opaqueHex;
       // Select the current format in the format switcher
-      document.querySelector(".clr-format [value=\"" + format + "\"]").checked = true;
+      document.querySelector(`.clr-format [value="${format}"]`).checked = true;
     }
@@ -752,8 +752,8 @@
     function setHue() {
-      var hue = hueSlider.value * 1;
-      var x = colorMarker.style.left.replace('px', '') * 1;
-      var y = colorMarker.style.top.replace('px', '') * 1;
+      const hue = hueSlider.value * 1;
+      const x = colorMarker.style.left.replace('px', '') * 1;
+      const y = colorMarker.style.top.replace('px', '') * 1;
 
-      picker.style.color = "hsl(" + hue + ", 100%, 50%)";
-      hueMarker.style.left = hue / 360 * 100 + "%";
+      picker.style.color = `hsl(${hue}, 100%, 50%)`;
+      hueMarker.style.left = `${hue / 360 * 100}%`;
 
@@ -767,5 +767,5 @@ setColorAtPosition(x, y);
     function setAlpha() {
-      var alpha = alphaSlider.value / 100;
+      const alpha = alphaSlider.value / 100;
 
-      alphaMarker.style.left = alpha * 100 + "%";
+      alphaMarker.style.left = `${alpha * 100}%`;
       updateColor({ a: alpha });
@@ -781,8 +781,8 @@ pickColor();
     function HSVAtoRGBA(hsva) {
-      var saturation = hsva.s / 100;
-      var value = hsva.v / 100;
-      var chroma = saturation * value;
-      var hueBy60 = hsva.h / 60;
-      var x = chroma * (1 - Math.abs(hueBy60 % 2 - 1));
-      var m = value - chroma;
+      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;
 
@@ -792,6 +792,6 @@ chroma = chroma + m;
 
-      var index = Math.floor(hueBy60) % 6;
-      var red = [chroma, x, m, m, x, chroma][index];
-      var green = [x, chroma, chroma, x, m, m][index];
-      var blue = [m, m, x, chroma, chroma, x][index];
+      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];
 
@@ -812,5 +812,5 @@ return {
     function HSVAtoHSLA(hsva) {
-      var value = hsva.v / 100;
-      var lightness = value * (1 - hsva.s / 100 / 2);
-      var saturation;
+      const value = hsva.v / 100;
+      const lightness = value * (1 - hsva.s / 100 / 2);
+      let saturation;
 
@@ -835,11 +835,11 @@ if (lightness > 0 && lightness < 1) {
     function RGBAtoHSVA(rgba) {
-      var red = rgba.r / 255;
-      var green = rgba.g / 255;
-      var blue = rgba.b / 255;
-      var xmax = Math.max(red, green, blue);
-      var xmin = Math.min(red, green, blue);
-      var chroma = xmax - xmin;
-      var value = xmax;
-      var hue = 0;
-      var saturation = 0;
+      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;
 
@@ -869,4 +869,4 @@ if (chroma) {
     function strToRGBA(str) {
-      var regex = /^((rgba)|rgb)[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)[\D]*?([\d.]+|$)/i;
-      var match, rgba;
+      const regex = /^((rgba)|rgb)[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)[\D]*?([\d.]+|$)/i;
+      let match, rgba;
 
@@ -892,3 +892,3 @@ // Default to black for invalid color strings
       } else {
-        match = ctx.fillStyle.replace('#', '').match(/.{2}/g).map(function (h) {return parseInt(h, 16);});
+        match = ctx.fillStyle.replace('#', '').match(/.{2}/g).map((h) => parseInt(h, 16));
         rgba = {
@@ -911,6 +911,6 @@ r: match[0],
     function RGBAToHex(rgba) {
-      var R = rgba.r.toString(16);
-      var G = rgba.g.toString(16);
-      var B = rgba.b.toString(16);
-      var A = '';
+      let R = rgba.r.toString(16);
+      let G = rgba.g.toString(16);
+      let B = rgba.b.toString(16);
+      let A = '';
 
@@ -930,3 +930,3 @@ if (rgba.r < 16) {
       if (settings.alpha && (rgba.a < 1 || settings.forceAlpha)) {
-        var alpha = rgba.a * 255 | 0;
+        const alpha = rgba.a * 255 | 0;
         A = alpha.toString(16);
@@ -949,5 +949,5 @@
       if (!settings.alpha || rgba.a === 1 && !settings.forceAlpha) {
-        return "rgb(" + rgba.r + ", " + rgba.g + ", " + rgba.b + ")";
+        return `rgb(${rgba.r}, ${rgba.g}, ${rgba.b})`;
       } else {
-        return "rgba(" + rgba.r + ", " + rgba.g + ", " + rgba.b + ", " + rgba.a + ")";
+        return `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${rgba.a})`;
       }
@@ -963,5 +963,5 @@ }
       if (!settings.alpha || hsla.a === 1 && !settings.forceAlpha) {
-        return "hsl(" + hsla.h + ", " + hsla.s + "%, " + hsla.l + "%)";
+        return `hsl(${hsla.h}, ${hsla.s}%, ${hsla.l}%)`;
       } else {
-        return "hsla(" + hsla.h + ", " + hsla.s + "%, " + hsla.l + "%, " + hsla.a + ")";
+        return `hsla(${hsla.h}, ${hsla.s}%, ${hsla.l}%, ${hsla.a})`;
       }
@@ -981,12 +981,12 @@ }
       picker.innerHTML =
-      "<input id=\"clr-color-value\" name=\"clr-color-value\" class=\"clr-color\" type=\"text\" value=\"\" spellcheck=\"false\" aria-label=\"" + settings.a11y.input + "\">" + ("<div id=\"clr-color-area\" class=\"clr-gradient\" role=\"application\" aria-label=\"" +
-      settings.a11y.instruction + "\">") +
+      `<input id="clr-color-value" name="clr-color-value" class="clr-color" type="text" value="" spellcheck="false" aria-label="${settings.a11y.input}">` +
+      `<div id="clr-color-area" class="clr-gradient" role="application" aria-label="${settings.a11y.instruction}">` +
       '<div id="clr-color-marker" class="clr-marker" tabindex="0"></div>' +
       '</div>' +
-      '<div class="clr-hue">' + ("<input id=\"clr-hue-slider\" name=\"clr-hue-slider\" type=\"range\" min=\"0\" max=\"360\" step=\"1\" aria-label=\"" +
-      settings.a11y.hueSlider + "\">") +
+      '<div class="clr-hue">' +
+      `<input id="clr-hue-slider" name="clr-hue-slider" type="range" min="0" max="360" step="1" aria-label="${settings.a11y.hueSlider}">` +
       '<div id="clr-hue-marker"></div>' +
       '</div>' +
-      '<div class="clr-alpha">' + ("<input id=\"clr-alpha-slider\" name=\"clr-alpha-slider\" type=\"range\" min=\"0\" max=\"100\" step=\"1\" aria-label=\"" +
-      settings.a11y.alphaSlider + "\">") +
+      '<div class="clr-alpha">' +
+      `<input id="clr-alpha-slider" name="clr-alpha-slider" type="range" min="0" max="100" step="1" aria-label="${settings.a11y.alphaSlider}">` +
       '<div id="clr-alpha-marker"></div>' +
@@ -996,4 +996,4 @@ '<span></span>' +
       '<div id="clr-format" class="clr-format">' +
-      '<fieldset class="clr-segmented">' + ("<legend>" +
-      settings.a11y.format + "</legend>") +
+      '<fieldset class="clr-segmented">' +
+      `<legend>${settings.a11y.format}</legend>` +
       '<input id="clr-f1" type="radio" name="clr-format" value="hex">' +
@@ -1008,9 +1008,9 @@ '<label for="clr-f1">Hex</label>' +
       '</div>' +
-      '<div id="clr-swatches" class="clr-swatches"></div>' + ("<button type=\"button\" id=\"clr-clear\" class=\"clr-clear\" aria-label=\"" +
-      settings.a11y.clear + "\">" + settings.clearLabel + "</button>") +
-      '<div id="clr-color-preview" class="clr-preview">' + ("<button type=\"button\" id=\"clr-close\" class=\"clr-close\" aria-label=\"" +
-      settings.a11y.close + "\">" + settings.closeLabel + "</button>") +
-      '</div>' + ("<span id=\"clr-open-label\" hidden>" +
-      settings.a11y.open + "</span>") + ("<span id=\"clr-swatch-label\" hidden>" +
-      settings.a11y.swatch + "</span>");
+      '<div id="clr-swatches" class="clr-swatches"></div>' +
+      `<button type="button" id="clr-clear" class="clr-clear" aria-label="${settings.a11y.clear}">${settings.clearLabel}</button>` +
+      '<div id="clr-color-preview" class="clr-preview">' +
+      `<button type="button" id="clr-close" class="clr-close" aria-label="${settings.a11y.close}">${settings.closeLabel}</button>` +
+      '</div>' +
+      `<span id="clr-open-label" hidden>${settings.a11y.open}</span>` +
+      `<span id="clr-swatch-label" hidden>${settings.a11y.swatch}</span>`;
 
@@ -1036,3 +1036,3 @@ // Append the color picker to the DOM
 
-      addListener(picker, 'mousedown', function (event) {
+      addListener(picker, 'mousedown', (event) => {
         picker.classList.remove('clr-keyboard-nav');
@@ -1042,23 +1042,23 @@ event.stopPropagation();
 
-      addListener(colorArea, 'mousedown', function (event) {
+      addListener(colorArea, 'mousedown', (event) => {
         addListener(document, 'mousemove', moveMarker);
       });
 
-      addListener(colorArea, 'touchstart', function (event) {
+      addListener(colorArea, 'touchstart', (event) => {
         document.addEventListener('touchmove', moveMarker, { passive: false });
       });
 
-      addListener(colorMarker, 'mousedown', function (event) {
+      addListener(colorMarker, 'mousedown', (event) => {
         addListener(document, 'mousemove', moveMarker);
       });
 
-      addListener(colorMarker, 'touchstart', function (event) {
+      addListener(colorMarker, 'touchstart', (event) => {
         document.addEventListener('touchmove', moveMarker, { passive: false });
       });
 
-      addListener(colorValue, 'change', function (event) {
-        var value = colorValue.value;
+      addListener(colorValue, 'change', (event) => {
+        const value = colorValue.value;
 
         if (currentEl || settings.inline) {
-          var color = value === '' ? value : setColorFromStr(value);
+          const color = value === '' ? value : setColorFromStr(value);
           pickColor(color);
@@ -1068,3 +1068,3 @@ }
 
-      addListener(clearButton, 'click', function (event) {
+      addListener(clearButton, 'click', (event) => {
         pickColor('');
@@ -1074,3 +1074,3 @@ closePicker();
 
-      addListener(closeButton, 'click', function (event) {
+      addListener(closeButton, 'click', (event) => {
         pickColor();
@@ -1080,3 +1080,3 @@ closePicker();
 
-      addListener(getEl('clr-format'), 'click', '.clr-format input', function (event) {
+      addListener(getEl('clr-format'), 'click', '.clr-format input', (event) => {
         currentFormat = event.target.value;
@@ -1087,3 +1087,3 @@ updateColor();
 
-      addListener(picker, 'click', '.clr-swatches button', function (event) {
+      addListener(picker, 'click', '.clr-swatches button', (event) => {
         setColorFromStr(event.target.textContent);
@@ -1097,11 +1097,11 @@ pickColor();
 
-      addListener(document, 'mouseup', function (event) {
+      addListener(document, 'mouseup', (event) => {
         document.removeEventListener('mousemove', moveMarker);
       });
 
-      addListener(document, 'touchend', function (event) {
+      addListener(document, 'touchend', (event) => {
         document.removeEventListener('touchmove', moveMarker);
       });
 
-      addListener(document, 'mousedown', function (event) {
+      addListener(document, 'mousedown', (event) => {
         keyboardNav = false;
@@ -1112,7 +1112,7 @@ picker.classList.remove('clr-keyboard-nav');
 
-      addListener(document, 'keydown', function (event) {
-        var key = event.key;
-        var target = event.target;
-        var shiftKey = event.shiftKey;
-        var navKeys = ['Tab', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
+      addListener(document, 'keydown', (event) => {
+        const key = event.key;
+        const target = event.target;
+        const shiftKey = event.shiftKey;
+        const navKeys = ['Tab', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
 
@@ -1130,5 +1130,5 @@ if (key === 'Escape') {
         if (key === 'Tab' && target.matches('.clr-picker *')) {
-          var focusables = getFocusableElements();
-          var firstFocusable = focusables.shift();
-          var lastFocusable = focusables.pop();
+          const focusables = getFocusableElements();
+          const firstFocusable = focusables.shift();
+          const lastFocusable = focusables.pop();
 
@@ -1145,3 +1145,3 @@ if (shiftKey && target === firstFocusable) {
 
-      addListener(document, 'click', '.clr-field button', function (event) {
+      addListener(document, 'click', '.clr-field button', (event) => {
         // Reset any previously set per-instance options
@@ -1156,4 +1156,4 @@ if (hasInstance) {
 
-      addListener(colorMarker, 'keydown', function (event) {
-        var movements = {
+      addListener(colorMarker, 'keydown', (event) => {
+        const movements = {
           ArrowUp: [0, -1],
@@ -1166,3 +1166,3 @@ ArrowDown: [0, 1],
         if (Object.keys(movements).includes(event.key)) {
-          moveMarkerOnKeydown.apply(void 0, movements[event.key]);
+          moveMarkerOnKeydown(...movements[event.key]);
           event.preventDefault();
@@ -1182,4 +1182,4 @@ }
     function getFocusableElements() {
-      var controls = Array.from(picker.querySelectorAll('input, button'));
-      var focusables = controls.filter(function (node) {return !!node.offsetWidth;});
+      const controls = Array.from(picker.querySelectorAll('input, button'));
+      const focusables = controls.filter((node) => !!node.offsetWidth);
 
@@ -1206,7 +1206,7 @@ return focusables;
     function addListener(context, type, selector, fn) {
-      var matches = Element.prototype.matches || Element.prototype.msMatchesSelector;
+      const matches = Element.prototype.matches || Element.prototype.msMatchesSelector;
 
       // Delegate event to the target of the selector
       if (typeof selector === 'string') {
-        context.addEventListener(type, function (event) {
+        context.addEventListener(type, (event) => {
           if (matches.call(event.target, selector)) {
@@ -1234,6 +1234,6 @@ fn.call(event.target, event);
       if (document.readyState !== 'loading') {
-        fn.apply(void 0, args);
+        fn(...args);
       } else {
-        document.addEventListener('DOMContentLoaded', function () {
-          fn.apply(void 0, args);
+        document.addEventListener('DOMContentLoaded', () => {
+          fn(...args);
         });
@@ -1271,4 +1271,4 @@ }
     // Expose the color picker to the global scope
-    var Coloris = function () {
-      var methods = {
+    const Coloris = (() => {
+      const methods = {
         init: init,
@@ -1281,7 +1281,8 @@ set: configure,
         removeInstance: removeVirtualInstance,
-        updatePosition: updatePickerPosition
+        updatePosition: updatePickerPosition,
+        ready: DOMReady
       };
 
       function Coloris(options) {
-        DOMReady(function () {
+        DOMReady(() => {
           if (options) {
@@ -1295,18 +1296,18 @@ if (typeof options === 'string') {
         });
-      }var _loop3 = function _loop3(key)
+      }
 
-      {
-        Coloris[key] = function () {for (var _len = arguments.length, args = new Array(_len), _key2 = 0; _key2 < _len; _key2++) {args[_key2] = arguments[_key2];}
+      for (const key in methods) {
+        Coloris[key] = function () {for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}
           DOMReady(methods[key], args);
         };
-      };for (var key in methods) {_loop3(key);}
+      }
 
       // handle window resize events re-aligning the panel
-      DOMReady(function () {
-        window.addEventListener('resize', function (event) {Coloris.updatePosition();});
-        window.addEventListener('scroll', function (event) {Coloris.updatePosition();});
+      DOMReady(() => {
+        window.addEventListener('resize', (event) => {Coloris.updatePosition();});
+        window.addEventListener('scroll', (event) => {Coloris.updatePosition();});
       });
 
       return Coloris;
-    }();
+    })();
 
@@ -1319,13 +1320,13 @@ // Ensure init function is available not only as as a default import
 
-  }(window, document, Math);
-}();
+  })(window, document, Math);
+})();
 
-var _coloris = Coloris.coloris;
-var _init = Coloris.init;
-var _set = Coloris.set;
-var _wrap = Coloris.wrap;
-var _close = Coloris.close;
-var _setInstance = Coloris.setInstance;
-var _removeInstance = Coloris.removeInstance;
-var _updatePosition = Coloris.updatePosition;
+const _coloris = Coloris.coloris;
+const _init = Coloris.init;
+const _set = Coloris.set;
+const _wrap = Coloris.wrap;
+const _close = Coloris.close;
+const _setInstance = Coloris.setInstance;
+const _removeInstance = Coloris.removeInstance;
+const _updatePosition = Coloris.updatePosition;
 export default Coloris;
@@ -1332,0 +1333,0 @@ export {

dist/esm/coloris.min.js

@@ -1,9 +0,1 @@
-var Coloris=function(){
-/*!
-  * Copyright (c) 2021-2023 Momo Bassit.
-  * Licensed under the MIT License (MIT)
-  * https://github.com/mdbassit/Coloris
-  * Version: 0.21.1
-  * NPM: https://github.com/melloware/coloris-npm
-  */
-return h=window,b=document,v=Math,r=b.createElement("canvas").getContext("2d"),_={el:"[data-coloris]",parent:"body",theme:"default",themeMode:"light",rtl:!(H={}),wrap:!0,margin:2,format:"hex",formatToggle:!(I={r:0,g:0,b:0,h:0,s:0,v:0,a:1}),swatches:[],swatchesOnly:!1,alpha:!0,forceAlpha:!1,focusInput:!0,selectInput:!1,inline:!1,defaultColor:"#000000",clearButton:!1,clearLabel:"Clear",closeButton:!1,closeLabel:"Close",onChange:function(){return y},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."}},i={},O="",N=!(D={}),NodeList!==y&&NodeList.prototype&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach),(Z=function(){var r={init:G,set:n,wrap:s,close:o,setInstance:P,setColor:J,removeInstance:j,updatePosition:c};function t(e){$(function(){e&&("string"==typeof e?q:n)(e)})}for(var e in r)!function(l){t[l]=function(){for(var e=arguments.length,t=new Array(e),a=0;a<e;a++)t[a]=arguments[a];$(r[l],t)}}(e);return $(function(){h.addEventListener("resize",function(e){t.updatePosition()}),h.addEventListener("scroll",function(e){t.updatePosition()})}),t}()).coloris=Z;function n(o){if("object"==typeof o)for(var i in o)!function(){switch(i){case"el":q(o.el),!1!==o.wrap&&s(o.el);break;case"parent":(g=b.querySelector(o.parent))&&(g.appendChild(m),_.parent=o.parent,g===b.body)&&(g=y);break;case"themeMode":_.themeMode=o.themeMode,"auto"===o.themeMode&&h.matchMedia&&h.matchMedia("(prefers-color-scheme: dark)").matches&&(_.themeMode="dark");case"theme":o.theme&&(_.theme=o.theme),m.className="clr-picker clr-"+_.theme+" clr-"+_.themeMode,_.inline&&c();break;case"rtl":_.rtl=!!o.rtl,b.querySelectorAll(".clr-field").forEach(function(e){return e.classList.toggle("clr-rtl",_.rtl)});break;case"margin":o.margin*=1,_.margin=(isNaN(o.margin)?_:o).margin;break;case"wrap":o.el&&o.wrap&&s(o.el);break;case"formatToggle":_.formatToggle=!!o.formatToggle,f("clr-format").style.display=_.formatToggle?"block":"none",_.formatToggle&&(_.format="auto");break;case"swatches":var a;Array.isArray(o.swatches)&&(a=[],o.swatches.forEach(function(e,t){a.push('<button type="button" id="clr-swatch-'+t+'" aria-labelledby="clr-swatch-label clr-swatch-'+t+'" style="color: '+e+';">'+e+"</button>")}),f("clr-swatches").innerHTML=a.length?"<div>"+a.join("")+"</div>":"",_.swatches=o.swatches.slice());break;case"swatchesOnly":_.swatchesOnly=!!o.swatchesOnly,m.setAttribute("data-minimal",_.swatchesOnly);break;case"alpha":_.alpha=!!o.alpha,m.setAttribute("data-alpha",_.alpha);break;case"inline":_.inline=!!o.inline,m.setAttribute("data-inline",_.inline),_.inline&&(e=o.defaultColor||_.defaultColor,M=F(e),c(),u(e));break;case"clearButton":"object"==typeof o.clearButton&&(o.clearButton.label&&(_.clearLabel=o.clearButton.label,x.innerHTML=_.clearLabel),o.clearButton=o.clearButton.show),_.clearButton=!!o.clearButton,x.style.display=_.clearButton?"block":"none";break;case"clearLabel":_.clearLabel=o.clearLabel,x.innerHTML=_.clearLabel;break;case"closeButton":_.closeButton=!!o.closeButton,_.closeButton?m.insertBefore(C,L):L.appendChild(C);break;case"closeLabel":_.closeLabel=o.closeLabel,C.innerHTML=_.closeLabel;break;case"a11y":var e,t,l=o.a11y,r=!1;if("object"==typeof l)for(var n in l)l[n]&&_.a11y[n]&&(_.a11y[n]=l[n],r=!0);r&&(e=f("clr-open-label"),t=f("clr-swatch-label"),e.innerHTML=_.a11y.open,t.innerHTML=_.a11y.swatch,C.setAttribute("aria-label",_.a11y.close),x.setAttribute("aria-label",_.a11y.clear),A.setAttribute("aria-label",_.a11y.hueSlider),S.setAttribute("aria-label",_.a11y.alphaSlider),E.setAttribute("aria-label",_.a11y.input),w.setAttribute("aria-label",_.a11y.instruction));break;default:_[i]=o[i]}}()}function P(e,t){"string"==typeof e&&"object"==typeof t&&(i[e]=t,N=!0)}function j(e){delete i[e],0===Object.keys(i).length&&(N=!1,e===O)&&W()}function R(a){if(N){var l,r=["el","wrap","rtl","inline","defaultColor","a11y"];for(l in i)if("break"===function(){var t=i[l];if(a.matches(l)){for(var e in O=l,D={},r.forEach(function(e){return delete t[e]}),t)D[e]=Array.isArray(_[e])?_[e].slice():_[e];return n(t),"break"}}())break}}function W(){0<Object.keys(D).length&&(n(D),O="",D={})}function q(e){a(b,"click",e,function(e){_.inline||(R(e.target),B=e.target,l=B.value,M=F(l),m.classList.add("clr-open"),c(),u(l),(_.focusInput||_.selectInput)&&(E.focus({preventScroll:!0}),E.setSelectionRange(B.selectionStart,B.selectionEnd)),_.selectInput&&E.select(),(V||_.swatchesOnly)&&K().shift().focus(),B.dispatchEvent(new Event("open",{bubbles:!0})))}),a(b,"input",e,function(e){var t=e.target.parentNode;t.classList.contains("clr-field")&&(t.style.color=e.target.value)})}function c(){var e,t,a,l,r,n,o,i,c,s;m&&(B||_.inline)&&(e=g,t=h.scrollY,a=m.offsetWidth,l=m.offsetHeight,r={left:!1,top:!1},o={x:0,y:0},e&&(i=h.getComputedStyle(e),n=parseFloat(i.marginTop),i=parseFloat(i.borderTopWidth),(o=e.getBoundingClientRect()).y+=i+t),_.inline||(c=(i=B.getBoundingClientRect()).x,s=t+i.y+i.height+_.margin,e?(c-=o.x,s-=o.y,c+a>e.clientWidth&&(c+=i.width-a,r.left=!0),s+l>e.clientHeight-n&&l+_.margin<=i.top-(o.y-t)&&(s-=i.height+l+2*_.margin,r.top=!0),s+=e.scrollTop):(c+a>b.documentElement.clientWidth&&(c+=i.width-a,r.left=!0),s+l-t>b.documentElement.clientHeight&&l+_.margin<=i.top&&(s=t+i.y-l-_.margin,r.top=!0)),m.classList.toggle("clr-left",r.left),m.classList.toggle("clr-top",r.top),m.style.left=c+"px",m.style.top=s+"px",o.x+=m.offsetLeft,o.y+=m.offsetTop),H={width:w.offsetWidth,height:w.offsetHeight,x:w.offsetLeft+o.x,y:w.offsetTop+o.y})}function s(e){b.querySelectorAll(e).forEach(function(e){var t,a,l=e.parentNode;l.classList.contains("clr-field")||(t=b.createElement("div"),a="clr-field",(_.rtl||e.classList.contains("clr-rtl"))&&(a+=" clr-rtl"),t.innerHTML='<button type="button" aria-labelledby="clr-open-label"></button>',l.insertBefore(t,e),t.setAttribute("class",a),t.style.color=e.value,t.appendChild(e))})}function o(e){var t;B&&!_.inline&&(t=B,e&&(B=y,l!==t.value)&&(t.value=l,t.dispatchEvent(new Event("input",{bubbles:!0}))),setTimeout(function(){l!==t.value&&t.dispatchEvent(new Event("change",{bubbles:!0}))}),m.classList.remove("clr-open"),N&&W(),t.dispatchEvent(new Event("close",{bubbles:!0})),_.focusInput&&t.focus({preventScroll:!0}),B=y)}function u(e){var e=function(e){var t;r.fillStyle="#000",r.fillStyle=e,(e=/^((rgba)|rgb)[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)[\D]*?([\d.]+|$)/i.exec(r.fillStyle))?(t={r:+e[3],g:+e[4],b:+e[5],a:+e[6]}).a=+t.a.toFixed(2):(e=r.fillStyle.replace("#","").match(/.{2}/g).map(function(e){return parseInt(e,16)}),t={r:e[0],g:e[1],b:e[2],a:1});return t}(e),t=function(e){var t=e.r/255,a=e.g/255,l=e.b/255,r=v.max(t,a,l),n=v.min(t,a,l),n=r-n,o=r,i=0,c=0;n&&(r===t&&(i=(a-l)/n),r===a&&(i=2+(l-t)/n),r===l&&(i=4+(t-a)/n),r)&&(c=n/r);return{h:(i=v.floor(60*i))<0?i+360:i,s:v.round(100*c),v:v.round(100*o),a:e.a}}(e);U(t.s,t.v),d(e,t),A.value=t.h,m.style.color="hsl("+t.h+", 100%, 50%)",Q.style.left=t.h/360*100+"%",k.style.left=H.width*t.s/100+"px",k.style.top=H.height-H.height*t.v/100+"px",S.value=100*t.a,T.style.left=100*t.a+"%"}function F(e){e=e.substring(0,3).toLowerCase();return"rgb"===e||"hsl"===e?e:"hex"}function p(e){e=e!==y?e:E.value,B&&(B.value=e,B.dispatchEvent(new Event("input",{bubbles:!0}))),_.onChange&&_.onChange.call(h,e,B),b.dispatchEvent(new CustomEvent("coloris:pick",{detail:{color:e,currentEl:B}}))}function Y(e,t){var a,l,r,n,o,e={h:+A.value,s:e/H.width*100,v:100-t/H.height*100,a:S.value/100},i=(i=(t=e).s/100,a=t.v/100,i*=a,l=t.h/60,r=i*(1-v.abs(l%2-1)),i+=a-=i,r+=a,l=v.floor(l)%6,n=[i,r,a,a,r,i][l],o=[r,i,i,r,a,a][l],a=[a,a,r,i,i,r][l],{r:v.round(255*n),g:v.round(255*o),b:v.round(255*a),a:t.a});U(e.s,e.v),d(i,e),p()}function U(e,t){var a=_.a11y.marker;e=+e.toFixed(1),t=+t.toFixed(1),a=(a=a.replace("{s}",e)).replace("{v}",t),k.setAttribute("aria-label",a)}function t(e){var t={pageX:((t=e).changedTouches?t.changedTouches[0]:t).pageX,pageY:(t.changedTouches?t.changedTouches[0]:t).pageY},a=t.pageX-H.x,t=t.pageY-H.y;g&&(t+=g.scrollTop),X(a,t),e.preventDefault(),e.stopPropagation()}function X(e,t){e=e<0?0:e>H.width?H.width:e,t=t<0?0:t>H.height?H.height:t,k.style.left=e+"px",k.style.top=t+"px",Y(e,t),k.focus()}function d(e,t){void 0===t&&(t={});var a,l,r=_.format;for(a in e=void 0===e?{}:e)I[a]=e[a];for(l in t)I[l]=t[l];var n,o=function(e){var t=e.r.toString(16),a=e.g.toString(16),l=e.b.toString(16),r="";e.r<16&&(t="0"+t);e.g<16&&(a="0"+a);e.b<16&&(l="0"+l);_.alpha&&(e.a<1||_.forceAlpha)&&(e=255*e.a|0,r=e.toString(16),e<16)&&(r="0"+r);return"#"+t+a+l+r}(I),i=o.substring(0,7);switch(k.style.color=i,T.parentNode.style.color=i,T.style.color=o,L.style.color=o,w.style.display="none",w.offsetHeight,w.style.display="",T.nextElementSibling.style.display="none",T.nextElementSibling.offsetHeight,T.nextElementSibling.style.display="","mixed"===r?r=1===I.a?"hex":"rgb":"auto"===r&&(r=M),r){case"hex":E.value=o;break;case"rgb":E.value=(n=I,!_.alpha||1===n.a&&!_.forceAlpha?"rgb("+n.r+", "+n.g+", "+n.b+")":"rgba("+n.r+", "+n.g+", "+n.b+", "+n.a+")");break;case"hsl":E.value=(n=function(e){var t,a=e.v/100,l=a*(1-e.s/100/2);0<l&&l<1&&(t=v.round((a-l)/v.min(l,1-l)*100));return{h:e.h,s:t||0,l:v.round(100*l),a:e.a}}(I),!_.alpha||1===n.a&&!_.forceAlpha?"hsl("+n.h+", "+n.s+"%, "+n.l+"%)":"hsla("+n.h+", "+n.s+"%, "+n.l+"%, "+n.a+")")}b.querySelector('.clr-format [value="'+r+'"]').checked=!0}function e(){var e=+A.value,t=+k.style.left.replace("px",""),a=+k.style.top.replace("px","");m.style.color="hsl("+e+", 100%, 50%)",Q.style.left=e/360*100+"%",Y(t,a)}function z(){var e=S.value/100;T.style.left=100*e+"%",d({a:e}),p()}function G(){b.getElementById("clr-picker")||(g=y,(m=b.createElement("div")).setAttribute("id","clr-picker"),m.className="clr-picker",m.innerHTML='<input id="clr-color-value" name="clr-color-value" class="clr-color" type="text" value="" spellcheck="false" aria-label="'+_.a11y.input+'"><div id="clr-color-area" class="clr-gradient" role="application" aria-label="'+_.a11y.instruction+'"><div id="clr-color-marker" class="clr-marker" tabindex="0"></div></div><div class="clr-hue"><input id="clr-hue-slider" name="clr-hue-slider" type="range" min="0" max="360" step="1" aria-label="'+_.a11y.hueSlider+'"><div id="clr-hue-marker"></div></div><div class="clr-alpha"><input id="clr-alpha-slider" name="clr-alpha-slider" type="range" min="0" max="100" step="1" aria-label="'+_.a11y.alphaSlider+'"><div id="clr-alpha-marker"></div><span></span></div><div id="clr-format" class="clr-format"><fieldset class="clr-segmented"><legend>'+_.a11y.format+'</legend><input id="clr-f1" type="radio" name="clr-format" value="hex"><label for="clr-f1">Hex</label><input id="clr-f2" type="radio" name="clr-format" value="rgb"><label for="clr-f2">RGB</label><input id="clr-f3" type="radio" name="clr-format" value="hsl"><label for="clr-f3">HSL</label><span></span></fieldset></div><div id="clr-swatches" class="clr-swatches"></div><button type="button" id="clr-clear" class="clr-clear" aria-label="'+_.a11y.clear+'">'+_.clearLabel+'</button><div id="clr-color-preview" class="clr-preview"><button type="button" id="clr-close" class="clr-close" aria-label="'+_.a11y.close+'">'+_.closeLabel+'</button></div><span id="clr-open-label" hidden>'+_.a11y.open+'</span><span id="clr-swatch-label" hidden>'+_.a11y.swatch+"</span>",b.body.appendChild(m),w=f("clr-color-area"),k=f("clr-color-marker"),x=f("clr-clear"),C=f("clr-close"),L=f("clr-color-preview"),E=f("clr-color-value"),A=f("clr-hue-slider"),Q=f("clr-hue-marker"),S=f("clr-alpha-slider"),T=f("clr-alpha-marker"),q(_.el),s(_.el),a(m,"mousedown",function(e){m.classList.remove("clr-keyboard-nav"),e.stopPropagation()}),a(w,"mousedown",function(e){a(b,"mousemove",t)}),a(w,"touchstart",function(e){b.addEventListener("touchmove",t,{passive:!1})}),a(k,"mousedown",function(e){a(b,"mousemove",t)}),a(k,"touchstart",function(e){b.addEventListener("touchmove",t,{passive:!1})}),a(E,"change",function(e){var t=E.value;(B||_.inline)&&p(""===t?t:u(t))}),a(x,"click",function(e){p(""),o()}),a(C,"click",function(e){p(),o()}),a(f("clr-format"),"click",".clr-format input",function(e){M=e.target.value,d(),p()}),a(m,"click",".clr-swatches button",function(e){u(e.target.textContent),p(),_.swatchesOnly&&o()}),a(b,"mouseup",function(e){b.removeEventListener("mousemove",t)}),a(b,"touchend",function(e){b.removeEventListener("touchmove",t)}),a(b,"mousedown",function(e){V=!1,m.classList.remove("clr-keyboard-nav"),o()}),a(b,"keydown",function(e){var t,a=e.key,l=e.target,r=e.shiftKey;"Escape"===a?o(!0):["Tab","ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].includes(a)&&(V=!0,m.classList.add("clr-keyboard-nav")),"Tab"===a&&l.matches(".clr-picker *")&&(t=(a=K()).shift(),a=a.pop(),r&&l===t?(a.focus(),e.preventDefault()):r||l!==a||(t.focus(),e.preventDefault()))}),a(b,"click",".clr-field button",function(e){N&&W(),e.target.nextElementSibling.dispatchEvent(new Event("click",{bubbles:!0}))}),a(k,"keydown",function(e){var t={ArrowUp:[0,-1],ArrowDown:[0,1],ArrowLeft:[-1,0],ArrowRight:[1,0]};Object.keys(t).includes(e.key)&&(!function(e,t){X(+k.style.left.replace("px","")+e,+k.style.top.replace("px","")+t)}.apply(void 0,t[e.key]),e.preventDefault())}),a(w,"click",t),a(A,"input",e),a(S,"input",z))}function K(){return Array.from(m.querySelectorAll("input, button")).filter(function(e){return!!e.offsetWidth})}function f(e){return b.getElementById(e)}function a(e,t,a,l){var r=Element.prototype.matches||Element.prototype.msMatchesSelector;"string"==typeof a?e.addEventListener(t,function(e){r.call(e.target,a)&&l.call(e.target,e)}):(l=a,e.addEventListener(t,l))}function $(e,t){t=t!==y?t:[],"loading"!==b.readyState?e.apply(void 0,t):b.addEventListener("DOMContentLoaded",function(){e.apply(void 0,t)})}function J(e,t){l=(B=t).value,R(t),M=F(e),c(),u(e),p(),l!==e&&B.dispatchEvent(new Event("change",{bubbles:!0}))}var h,b,v,y,g,m,w,k,L,E,x,C,A,Q,S,T,B,M,l,V,r,I,H,_,i,O,D,N,Z}(),_coloris=Coloris.coloris,_init=Coloris.init,_set=Coloris.set,_wrap=Coloris.wrap,_close=Coloris.close,_setInstance=Coloris.setInstance,_removeInstance=Coloris.removeInstance,_updatePosition=Coloris.updatePosition;export default Coloris;export{_coloris as coloris,_close as close,_init as init,_set as set,_wrap as wrap,_setInstance as setInstance,_removeInstance as removeInstance,_updatePosition as updatePosition};
+const Coloris=(()=>{{var E=window,x=document,C=Math,$=void 0;const J=x.createElement("canvas").getContext("2d"),Q={r:0,g:0,b:0,h:0,s:0,v:0,a:1};let u,d,p,c,i,h,f,b,v,a,y,g,m,w,l,o,k={};const V={el:"[data-coloris]",parent:"body",theme:"default",themeMode:"light",rtl:!1,wrap:!0,margin:2,format:"hex",formatToggle:!1,swatches:[],swatchesOnly:!1,alpha:!0,forceAlpha:!1,focusInput:!0,selectInput:!1,inline:!1,defaultColor:"#000000",clearButton:!1,clearLabel:"Clear",closeButton:!1,closeLabel:"Close",onChange:()=>$,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."}},Z={};let n="",s={},L=!1;function A(t){if("object"==typeof t)for(const o in t)switch(o){case"el":B(t.el),!1!==t.wrap&&I(t.el);break;case"parent":(u=x.querySelector(t.parent))&&(u.appendChild(d),V.parent=t.parent,u===x.body)&&(u=$);break;case"themeMode":V.themeMode=t.themeMode,"auto"===t.themeMode&&E.matchMedia&&E.matchMedia("(prefers-color-scheme: dark)").matches&&(V.themeMode="dark");case"theme":t.theme&&(V.theme=t.theme),d.className=`clr-picker clr-${V.theme} clr-`+V.themeMode,V.inline&&M();break;case"rtl":V.rtl=!!t.rtl,x.querySelectorAll(".clr-field").forEach(e=>e.classList.toggle("clr-rtl",V.rtl));break;case"margin":t.margin*=1,V.margin=(isNaN(t.margin)?V:t).margin;break;case"wrap":t.el&&t.wrap&&I(t.el);break;case"formatToggle":V.formatToggle=!!t.formatToggle,U("clr-format").style.display=V.formatToggle?"block":"none",V.formatToggle&&(V.format="auto");break;case"swatches":if(Array.isArray(t.swatches)){const n=[];t.swatches.forEach((e,t)=>{n.push(`<button type="button" id="clr-swatch-${t}" aria-labelledby="clr-swatch-label clr-swatch-${t}" style="color: ${e};">${e}</button>`)}),U("clr-swatches").innerHTML=n.length?`<div>${n.join("")}</div>`:"",V.swatches=t.swatches.slice()}break;case"swatchesOnly":V.swatchesOnly=!!t.swatchesOnly,d.setAttribute("data-minimal",V.swatchesOnly);break;case"alpha":V.alpha=!!t.alpha,d.setAttribute("data-alpha",V.alpha);break;case"inline":V.inline=!!t.inline,d.setAttribute("data-inline",V.inline),V.inline&&(l=t.defaultColor||V.defaultColor,w=O(l),M(),_(l));break;case"clearButton":"object"==typeof t.clearButton&&(t.clearButton.label&&(V.clearLabel=t.clearButton.label,f.innerHTML=V.clearLabel),t.clearButton=t.clearButton.show),V.clearButton=!!t.clearButton,f.style.display=V.clearButton?"block":"none";break;case"clearLabel":V.clearLabel=t.clearLabel,f.innerHTML=V.clearLabel;break;case"closeButton":V.closeButton=!!t.closeButton,V.closeButton?d.insertBefore(b,i):i.appendChild(b);break;case"closeLabel":V.closeLabel=t.closeLabel,b.innerHTML=V.closeLabel;break;case"a11y":var l,a,r=t.a11y;let e=!1;if("object"==typeof r)for(const s in r)r[s]&&V.a11y[s]&&(V.a11y[s]=r[s],e=!0);e&&(l=U("clr-open-label"),a=U("clr-swatch-label"),l.innerHTML=V.a11y.open,a.innerHTML=V.a11y.swatch,b.setAttribute("aria-label",V.a11y.close),f.setAttribute("aria-label",V.a11y.clear),v.setAttribute("aria-label",V.a11y.hueSlider),y.setAttribute("aria-label",V.a11y.alphaSlider),h.setAttribute("aria-label",V.a11y.input),p.setAttribute("aria-label",V.a11y.instruction));break;default:V[o]=t[o]}}function e(e,t){"string"==typeof e&&"object"==typeof t&&(Z[e]=t,L=!0)}function S(e){delete Z[e],0===Object.keys(Z).length&&(L=!1,e===n)&&T()}function r(e){if(L){var t,l=["el","wrap","rtl","inline","defaultColor","a11y"];for(t in Z){const r=Z[t];if(e.matches(t)){for(var a in n=t,s={},l.forEach(e=>delete r[e]),r)s[a]=Array.isArray(V[a])?V[a].slice():V[a];A(r);break}}}}function T(){0<Object.keys(s).length&&(A(s),n="",s={})}function B(e){X(x,"click",e,e=>{V.inline||(r(e.target),m=e.target,l=m.value,w=O(l),d.classList.add("clr-open"),M(),_(l),(V.focusInput||V.selectInput)&&(h.focus({preventScroll:!0}),h.setSelectionRange(m.selectionStart,m.selectionEnd)),V.selectInput&&h.select(),(o||V.swatchesOnly)&&Y().shift().focus(),m.dispatchEvent(new Event("open",{bubbles:!0})))}),X(x,"input",e,e=>{var t=e.target.parentNode;t.classList.contains("clr-field")&&(t.style.color=e.target.value)})}function M(){if(d&&(m||V.inline)){var r=u,o=E.scrollY,n=d.offsetWidth,s=d.offsetHeight,c={left:!1,top:!1};let e,l,t,a={x:0,y:0};if(r&&(e=E.getComputedStyle(r),l=parseFloat(e.marginTop),t=parseFloat(e.borderTopWidth),(a=r.getBoundingClientRect()).y+=t+o),!V.inline){var i=m.getBoundingClientRect();let e=i.x,t=o+i.y+i.height+V.margin;r?(e-=a.x,t-=a.y,e+n>r.clientWidth&&(e+=i.width-n,c.left=!0),t+s>r.clientHeight-l&&s+V.margin<=i.top-(a.y-o)&&(t-=i.height+s+2*V.margin,c.top=!0),t+=r.scrollTop):(e+n>x.documentElement.clientWidth&&(e+=i.width-n,c.left=!0),t+s-o>x.documentElement.clientHeight&&s+V.margin<=i.top&&(t=o+i.y-s-V.margin,c.top=!0)),d.classList.toggle("clr-left",c.left),d.classList.toggle("clr-top",c.top),d.style.left=e+"px",d.style.top=t+"px",a.x+=d.offsetLeft,a.y+=d.offsetTop}k={width:p.offsetWidth,height:p.offsetHeight,x:p.offsetLeft+a.x,y:p.offsetTop+a.y}}}function I(e){x.querySelectorAll(e).forEach(t=>{var l=t.parentNode;if(!l.classList.contains("clr-field")){var a=x.createElement("div");let e="clr-field";(V.rtl||t.classList.contains("clr-rtl"))&&(e+=" clr-rtl"),a.innerHTML='<button type="button" aria-labelledby="clr-open-label"></button>',l.insertBefore(a,t),a.setAttribute("class",e),a.style.color=t.value,a.appendChild(t)}})}function H(e){if(m&&!V.inline){const t=m;e&&(m=$,l!==t.value)&&(t.value=l,t.dispatchEvent(new Event("input",{bubbles:!0}))),setTimeout(()=>{l!==t.value&&t.dispatchEvent(new Event("change",{bubbles:!0}))}),d.classList.remove("clr-open"),L&&T(),t.dispatchEvent(new Event("close",{bubbles:!0})),V.focusInput&&t.focus({preventScroll:!0}),m=$}}function _(e){var e=function(e){let t,l;J.fillStyle="#000",J.fillStyle=e,(t=/^((rgba)|rgb)[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)[\D]*?([\d.]+|$)/i.exec(J.fillStyle))?(l={r:+t[3],g:+t[4],b:+t[5],a:+t[6]}).a=+l.a.toFixed(2):(t=J.fillStyle.replace("#","").match(/.{2}/g).map(e=>parseInt(e,16)),l={r:t[0],g:t[1],b:t[2],a:1});return l}(e),t=function(e){var t=e.r/255,l=e.g/255,a=e.b/255,r=C.max(t,l,a),o=C.min(t,l,a),o=r-o,n=r;let s=0,c=0;o&&(r===t&&(s=(l-a)/o),r===l&&(s=2+(a-t)/o),r===a&&(s=4+(t-l)/o),r)&&(c=o/r);return{h:(s=C.floor(60*s))<0?s+360:s,s:C.round(100*c),v:C.round(100*n),a:e.a}}(e);P(t.s,t.v),R(e,t),v.value=t.h,d.style.color=`hsl(${t.h}, 100%, 50%)`,a.style.left=t.h/360*100+"%",c.style.left=k.width*t.s/100+"px",c.style.top=k.height-k.height*t.v/100+"px",y.value=100*t.a,g.style.left=100*t.a+"%"}function O(e){e=e.substring(0,3).toLowerCase();return"rgb"===e||"hsl"===e?e:"hex"}function D(e){e=e!==$?e:h.value,m&&(m.value=e,m.dispatchEvent(new Event("input",{bubbles:!0}))),V.onChange&&V.onChange.call(E,e,m),x.dispatchEvent(new CustomEvent("coloris:pick",{detail:{color:e,currentEl:m}}))}function N(e,t){var l,a,r,o,n,e={h:+v.value,s:e/k.width*100,v:100-t/k.height*100,a:y.value/100},s=(s=(t=e).s/100,l=t.v/100,s*=l,a=t.h/60,r=s*(1-C.abs(a%2-1)),s+=l-=s,r+=l,a=C.floor(a)%6,o=[s,r,l,l,r,s][a],n=[r,s,s,r,l,l][a],l=[l,l,r,s,s,r][a],{r:C.round(255*o),g:C.round(255*n),b:C.round(255*l),a:t.a});P(e.s,e.v),R(s,e),D()}function P(e,t){let l=V.a11y.marker;e=+e.toFixed(1),t=+t.toFixed(1),l=(l=l.replace("{s}",e)).replace("{v}",t),c.setAttribute("aria-label",l)}function t(e){var t={pageX:((t=e).changedTouches?t.changedTouches[0]:t).pageX,pageY:(t.changedTouches?t.changedTouches[0]:t).pageY},l=t.pageX-k.x;let a=t.pageY-k.y;u&&(a+=u.scrollTop),j(l,a),e.preventDefault(),e.stopPropagation()}function j(e,t){e=e<0?0:e>k.width?k.width:e,t=t<0?0:t>k.height?k.height:t,c.style.left=e+"px",c.style.top=t+"px",N(e,t),c.focus()}function R(e,t){void 0===e&&(e={}),void 0===t&&(t={});let l=V.format;for(const n in e)Q[n]=e[n];for(const s in t)Q[s]=t[s];var a,r=function(e){let t=e.r.toString(16),l=e.g.toString(16),a=e.b.toString(16),r="";e.r<16&&(t="0"+t);e.g<16&&(l="0"+l);e.b<16&&(a="0"+a);V.alpha&&(e.a<1||V.forceAlpha)&&(e=255*e.a|0,r=e.toString(16),e<16)&&(r="0"+r);return"#"+t+l+a+r}(Q),o=r.substring(0,7);switch(c.style.color=o,g.parentNode.style.color=o,g.style.color=r,i.style.color=r,p.style.display="none",p.offsetHeight,p.style.display="",g.nextElementSibling.style.display="none",g.nextElementSibling.offsetHeight,g.nextElementSibling.style.display="","mixed"===l?l=1===Q.a?"hex":"rgb":"auto"===l&&(l=w),l){case"hex":h.value=r;break;case"rgb":h.value=(a=Q,!V.alpha||1===a.a&&!V.forceAlpha?`rgb(${a.r}, ${a.g}, ${a.b})`:`rgba(${a.r}, ${a.g}, ${a.b}, ${a.a})`);break;case"hsl":h.value=(a=function(e){var t=e.v/100,l=t*(1-e.s/100/2);let a;0<l&&l<1&&(a=C.round((t-l)/C.min(l,1-l)*100));return{h:e.h,s:a||0,l:C.round(100*l),a:e.a}}(Q),!V.alpha||1===a.a&&!V.forceAlpha?`hsl(${a.h}, ${a.s}%, ${a.l}%)`:`hsla(${a.h}, ${a.s}%, ${a.l}%, ${a.a})`)}x.querySelector(`.clr-format [value="${l}"]`).checked=!0}function W(){var e=+v.value,t=+c.style.left.replace("px",""),l=+c.style.top.replace("px","");d.style.color=`hsl(${e}, 100%, 50%)`,a.style.left=e/360*100+"%",N(t,l)}function q(){var e=y.value/100;g.style.left=100*e+"%",R({a:e}),D()}function F(){x.getElementById("clr-picker")||(u=$,(d=x.createElement("div")).setAttribute("id","clr-picker"),d.className="clr-picker",d.innerHTML=`<input id="clr-color-value" name="clr-color-value" class="clr-color" type="text" value="" spellcheck="false" aria-label="${V.a11y.input}">`+`<div id="clr-color-area" class="clr-gradient" role="application" aria-label="${V.a11y.instruction}">`+'<div id="clr-color-marker" class="clr-marker" tabindex="0"></div></div><div class="clr-hue">'+`<input id="clr-hue-slider" name="clr-hue-slider" type="range" min="0" max="360" step="1" aria-label="${V.a11y.hueSlider}">`+'<div id="clr-hue-marker"></div></div><div class="clr-alpha">'+`<input id="clr-alpha-slider" name="clr-alpha-slider" type="range" min="0" max="100" step="1" aria-label="${V.a11y.alphaSlider}">`+'<div id="clr-alpha-marker"></div><span></span></div><div id="clr-format" class="clr-format"><fieldset class="clr-segmented">'+`<legend>${V.a11y.format}</legend>`+'<input id="clr-f1" type="radio" name="clr-format" value="hex"><label for="clr-f1">Hex</label><input id="clr-f2" type="radio" name="clr-format" value="rgb"><label for="clr-f2">RGB</label><input id="clr-f3" type="radio" name="clr-format" value="hsl"><label for="clr-f3">HSL</label><span></span></fieldset></div><div id="clr-swatches" class="clr-swatches"></div>'+`<button type="button" id="clr-clear" class="clr-clear" aria-label="${V.a11y.clear}">${V.clearLabel}</button>`+'<div id="clr-color-preview" class="clr-preview">'+`<button type="button" id="clr-close" class="clr-close" aria-label="${V.a11y.close}">${V.closeLabel}</button>`+"</div>"+`<span id="clr-open-label" hidden>${V.a11y.open}</span>`+`<span id="clr-swatch-label" hidden>${V.a11y.swatch}</span>`,x.body.appendChild(d),p=U("clr-color-area"),c=U("clr-color-marker"),f=U("clr-clear"),b=U("clr-close"),i=U("clr-color-preview"),h=U("clr-color-value"),v=U("clr-hue-slider"),a=U("clr-hue-marker"),y=U("clr-alpha-slider"),g=U("clr-alpha-marker"),B(V.el),I(V.el),X(d,"mousedown",e=>{d.classList.remove("clr-keyboard-nav"),e.stopPropagation()}),X(p,"mousedown",e=>{X(x,"mousemove",t)}),X(p,"touchstart",e=>{x.addEventListener("touchmove",t,{passive:!1})}),X(c,"mousedown",e=>{X(x,"mousemove",t)}),X(c,"touchstart",e=>{x.addEventListener("touchmove",t,{passive:!1})}),X(h,"change",e=>{var t=h.value;(m||V.inline)&&D(""===t?t:_(t))}),X(f,"click",e=>{D(""),H()}),X(b,"click",e=>{D(),H()}),X(U("clr-format"),"click",".clr-format input",e=>{w=e.target.value,R(),D()}),X(d,"click",".clr-swatches button",e=>{_(e.target.textContent),D(),V.swatchesOnly&&H()}),X(x,"mouseup",e=>{x.removeEventListener("mousemove",t)}),X(x,"touchend",e=>{x.removeEventListener("touchmove",t)}),X(x,"mousedown",e=>{o=!1,d.classList.remove("clr-keyboard-nav"),H()}),X(x,"keydown",e=>{var t,l=e.key,a=e.target,r=e.shiftKey;"Escape"===l?H(!0):["Tab","ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].includes(l)&&(o=!0,d.classList.add("clr-keyboard-nav")),"Tab"===l&&a.matches(".clr-picker *")&&(t=(l=Y()).shift(),l=l.pop(),r&&a===t?(l.focus(),e.preventDefault()):r||a!==l||(t.focus(),e.preventDefault()))}),X(x,"click",".clr-field button",e=>{L&&T(),e.target.nextElementSibling.dispatchEvent(new Event("click",{bubbles:!0}))}),X(c,"keydown",e=>{var t,l={ArrowUp:[0,-1],ArrowDown:[0,1],ArrowLeft:[-1,0],ArrowRight:[1,0]};Object.keys(l).includes(e.key)&&([l,t]=[...l[e.key]],j(+c.style.left.replace("px","")+l,+c.style.top.replace("px","")+t),e.preventDefault())}),X(p,"click",t),X(v,"input",W),X(y,"input",q))}function Y(){return Array.from(d.querySelectorAll("input, button")).filter(e=>!!e.offsetWidth)}function U(e){return x.getElementById(e)}function X(e,t,l,a){const r=Element.prototype.matches||Element.prototype.msMatchesSelector;"string"==typeof l?e.addEventListener(t,e=>{r.call(e.target,l)&&a.call(e.target,e)}):(a=l,e.addEventListener(t,a))}function z(e,t){t=t!==$?t:[],"loading"!==x.readyState?e(...t):x.addEventListener("DOMContentLoaded",()=>{e(...t)})}function G(e,t){m=t,l=m.value,r(t),w=O(e),M(),_(e),D(),l!==e&&m.dispatchEvent(new Event("change",{bubbles:!0}))}NodeList!==$&&NodeList.prototype&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach);var K=(()=>{const a={init:F,set:A,wrap:I,close:H,setInstance:e,setColor:G,removeInstance:S,updatePosition:M,ready:z};function t(e){z(()=>{e&&("string"==typeof e?B:A)(e)})}for(const r in a)t[r]=function(){for(var e=arguments.length,t=new Array(e),l=0;l<e;l++)t[l]=arguments[l];z(a[r],t)};return z(()=>{E.addEventListener("resize",e=>{t.updatePosition()}),E.addEventListener("scroll",e=>{t.updatePosition()})}),t})();return K.coloris=K}})(),_coloris=Coloris.coloris,_init=Coloris.init,_set=Coloris.set,_wrap=Coloris.wrap,_close=Coloris.close,_setInstance=Coloris.setInstance,_removeInstance=Coloris.removeInstance,_updatePosition=Coloris.updatePosition;export default Coloris;export{_coloris as coloris,_close as close,_init as init,_set as set,_wrap as wrap,_setInstance as setInstance,_removeInstance as removeInstance,_updatePosition as updatePosition};

dist/umd/coloris.js

@@ -51,6 +51,6 @@ // https://github.com/umdjs/umd/blob/master/templates/returnExports.js
 
-  return function (window, document, Math, undefined) {
-    var ctx = document.createElement('canvas').getContext('2d');
-    var currentColor = { r: 0, g: 0, b: 0, h: 0, s: 0, v: 0, a: 1 };
-    var container,picker,colorArea,colorMarker,colorPreview,colorValue,clearButton,closeButton,
+  return ((window, document, Math, undefined) => {
+    const ctx = document.createElement('canvas').getContext('2d');
+    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,
@@ -60,3 +60,3 @@ colorAreaDims = {};
     // Default settings
-    var settings = {
+    const settings = {
       el: '[data-coloris]',
@@ -83,3 +83,3 @@ parent: 'body',
       closeLabel: 'Close',
-      onChange: function onChange() {return undefined;},
+      onChange: () => undefined,
       a11y: {
@@ -100,6 +100,6 @@ open: 'Open color picker',
     // Virtual instances cache
-    var instances = {};
-    var currentInstanceId = '';
-    var defaultInstance = {};
-    var hasInstance = false;
+    const instances = {};
+    let currentInstanceId = '';
+    let defaultInstance = {};
+    let hasInstance = false;
 
@@ -113,5 +113,5 @@ /**
         return;
-      }var _loop = function _loop()
+      }
 
-      {
+      for (const key in options) {
         switch (key) {
@@ -148,3 +148,3 @@ case 'el':
             // Set the theme and color scheme
-            picker.className = "clr-picker clr-" + settings.theme + " clr-" + settings.themeMode;
+            picker.className = `clr-picker clr-${settings.theme} clr-${settings.themeMode}`;
 
@@ -158,3 +158,3 @@ // Update the color picker's position if inline mode is in use
             settings.rtl = !!options.rtl;
-            document.querySelectorAll('.clr-field').forEach(function (field) {return field.classList.toggle('clr-rtl', settings.rtl);});
+            document.querySelectorAll('.clr-field').forEach((field) => field.classList.toggle('clr-rtl', settings.rtl));
             break;
@@ -179,9 +179,9 @@ case 'margin':
             if (Array.isArray(options.swatches)) {
-              var swatches = [];
+              const swatches = [];
 
-              options.swatches.forEach(function (swatch, i) {
-                swatches.push("<button type=\"button\" id=\"clr-swatch-" + i + "\" aria-labelledby=\"clr-swatch-label clr-swatch-" + i + "\" style=\"color: " + swatch + ";\">" + swatch + "</button>");
+              options.swatches.forEach((swatch, i) => {
+                swatches.push(`<button type="button" id="clr-swatch-${i}" aria-labelledby="clr-swatch-label clr-swatch-${i}" style="color: ${swatch};">${swatch}</button>`);
               });
 
-              getEl('clr-swatches').innerHTML = swatches.length ? "<div>" + swatches.join('') + "</div>" : '';
+              getEl('clr-swatches').innerHTML = swatches.length ? `<div>${swatches.join('')}</div>` : '';
               settings.swatches = options.swatches.slice();
@@ -203,3 +203,3 @@ }
             if (settings.inline) {
-              var defaultColor = options.defaultColor || settings.defaultColor;
+              const defaultColor = options.defaultColor || settings.defaultColor;
 
@@ -244,7 +244,7 @@ currentFormat = getColorFormatFromStr(defaultColor);
           case 'a11y':
-            var labels = options.a11y;
-            var update = false;
+            const labels = options.a11y;
+            let update = false;
 
             if (typeof labels === 'object') {
-              for (var label in labels) {
+              for (const label in labels) {
                 if (labels[label] && settings.a11y[label]) {
@@ -258,4 +258,4 @@ settings.a11y[label] = labels[label];
             if (update) {
-              var openLabel = getEl('clr-open-label');
-              var swatchLabel = getEl('clr-swatch-label');
+              const openLabel = getEl('clr-open-label');
+              const swatchLabel = getEl('clr-swatch-label');
 
@@ -275,3 +275,3 @@ openLabel.innerHTML = settings.a11y.open;
         }
-      };for (var key in options) {_loop();}
+      }
     }
@@ -314,6 +314,6 @@
         // These options can only be set globally, not per instance
-        var unsupportedOptions = ['el', 'wrap', 'rtl', 'inline', 'defaultColor', 'a11y'];var _loop2 = function _loop2()
+        const unsupportedOptions = ['el', 'wrap', 'rtl', 'inline', 'defaultColor', 'a11y'];
 
-        {
-          var options = instances[selector];
+        for (let selector in instances) {
+          const options = instances[selector];
 
@@ -326,6 +326,6 @@ // If the element matches an instance's CSS selector
             // Delete unsupported options
-            unsupportedOptions.forEach(function (option) {return delete options[option];});
+            unsupportedOptions.forEach((option) => delete options[option]);
 
             // Back up the default options so we can restore them later
-            for (var option in options) {
+            for (let option in options) {
               defaultInstance[option] = Array.isArray(settings[option]) ? settings[option].slice() : settings[option];
@@ -335,6 +335,6 @@ }
             // Set the instance's options
-            configure(options);return "break";
-
+            configure(options);
+            break;
           }
-        };for (var selector in instances) {var _ret = _loop2();if (_ret === "break") break;}
+        }
       }
@@ -360,3 +360,3 @@ }
       // Show the color picker on click on the input fields that match the selector
-      addListener(document, 'click', selector, function (event) {
+      addListener(document, 'click', selector, (event) => {
         // Skip if inline mode is in use
@@ -397,4 +397,4 @@ if (settings.inline) {
       // Update the color preview of the input fields that match the selector
-      addListener(document, 'input', selector, function (event) {
-        var parent = event.target.parentNode;
+      addListener(document, 'input', selector, (event) => {
+        const parent = event.target.parentNode;
 
@@ -413,9 +413,9 @@ // Only update the preview if the field has been previously wrapped
       if (!picker || !currentEl && !settings.inline) return; //** DO NOT REMOVE: in case called before initialized
-      var parent = container;
-      var scrollY = window.scrollY;
-      var pickerWidth = picker.offsetWidth;
-      var pickerHeight = picker.offsetHeight;
-      var reposition = { left: false, top: false };
-      var parentStyle, parentMarginTop, parentBorderTop;
-      var offset = { x: 0, y: 0 };
+      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 };
 
@@ -432,5 +432,5 @@ if (parent) {
       if (!settings.inline) {
-        var coords = currentEl.getBoundingClientRect();
-        var left = coords.x;
-        var top = scrollY + coords.y + coords.height + settings.margin;
+        const coords = currentEl.getBoundingClientRect();
+        let left = coords.x;
+        let top = scrollY + coords.y + coords.height + settings.margin;
 
@@ -474,4 +474,4 @@ // If the color picker is inside a custom container
         picker.classList.toggle('clr-top', reposition.top);
-        picker.style.left = left + "px";
-        picker.style.top = top + "px";
+        picker.style.left = `${left}px`;
+        picker.style.top = `${top}px`;
         offset.x += picker.offsetLeft;
@@ -494,8 +494,8 @@ offset.y += picker.offsetTop;
     function wrapFields(selector) {
-      document.querySelectorAll(selector).forEach(function (field) {
-        var parentNode = field.parentNode;
+      document.querySelectorAll(selector).forEach((field) => {
+        const parentNode = field.parentNode;
 
         if (!parentNode.classList.contains('clr-field')) {
-          var wrapper = document.createElement('div');
-          var classes = 'clr-field';
+          const wrapper = document.createElement('div');
+          let classes = 'clr-field';
 
@@ -506,3 +506,3 @@ if (settings.rtl || field.classList.contains('clr-rtl')) {
 
-          wrapper.innerHTML = "<button type=\"button\" aria-labelledby=\"clr-open-label\"></button>";
+          wrapper.innerHTML = `<button type="button" aria-labelledby="clr-open-label"></button>`;
           parentNode.insertBefore(wrapper, field);
@@ -522,3 +522,3 @@ wrapper.setAttribute('class', classes);
       if (currentEl && !settings.inline) {
-        var prevEl = currentEl;
+        const prevEl = currentEl;
 
@@ -539,3 +539,3 @@ // Revert the color to the original value if needed
         // Trigger a "change" event if needed
-        setTimeout(function () {// Add this to the end of the event loop
+        setTimeout(() => {// Add this to the end of the event loop
           if (oldColor !== prevEl.value) {
@@ -571,4 +571,4 @@ prevEl.dispatchEvent(new Event('change', { bubbles: true }));
     function setColorFromStr(str) {
-      var rgba = strToRGBA(str);
-      var hsva = RGBAtoHSVA(rgba);
+      const rgba = strToRGBA(str);
+      const hsva = RGBAtoHSVA(rgba);
 
@@ -580,10 +580,10 @@ updateMarkerA11yLabel(hsva.s, hsva.v);
       hueSlider.value = hsva.h;
-      picker.style.color = "hsl(" + hsva.h + ", 100%, 50%)";
-      hueMarker.style.left = hsva.h / 360 * 100 + "%";
+      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";
+      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 + "%";
+      alphaMarker.style.left = `${hsva.a * 100}%`;
     }
@@ -597,3 +597,3 @@
     function getColorFormatFromStr(str) {
-      var format = str.substring(0, 3).toLowerCase();
+      const format = str.substring(0, 3).toLowerCase();
 
@@ -623,3 +623,3 @@ if (format === 'rgb' || format === 'hsl') {
 
-      document.dispatchEvent(new CustomEvent('coloris:pick', { detail: { color: color, currentEl: currentEl } }));
+      document.dispatchEvent(new CustomEvent('coloris:pick', { detail: { color, currentEl } }));
     }
@@ -633,3 +633,3 @@
     function setColorAtPosition(x, y) {
-      var hsva = {
+      const hsva = {
         h: hueSlider.value * 1,
@@ -640,3 +640,3 @@ s: x / colorAreaDims.width * 100,
       };
-      var rgba = HSVAtoRGBA(hsva);
+      const rgba = HSVAtoRGBA(hsva);
 
@@ -654,3 +654,3 @@ updateMarkerA11yLabel(hsva.s, hsva.v);
     function updateMarkerA11yLabel(saturation, value) {
-      var label = settings.a11y.marker;
+      let label = settings.a11y.marker;
 
@@ -682,5 +682,5 @@ saturation = saturation.toFixed(1) * 1;
     function moveMarker(event) {
-      var pointer = getPointerPosition(event);
-      var x = pointer.pageX - colorAreaDims.x;
-      var y = pointer.pageY - colorAreaDims.y;
+      const pointer = getPointerPosition(event);
+      let x = pointer.pageX - colorAreaDims.x;
+      let y = pointer.pageY - colorAreaDims.y;
 
@@ -704,4 +704,4 @@ if (container) {
     function moveMarkerOnKeydown(offsetX, offsetY) {
-      var x = colorMarker.style.left.replace('px', '') * 1 + offsetX;
-      var y = colorMarker.style.top.replace('px', '') * 1 + offsetY;
+      let x = colorMarker.style.left.replace('px', '') * 1 + offsetX;
+      let y = colorMarker.style.top.replace('px', '') * 1 + offsetY;
 
@@ -722,4 +722,4 @@ setMarkerPosition(x, y);
       // Set the position
-      colorMarker.style.left = x + "px";
-      colorMarker.style.top = y + "px";
+      colorMarker.style.left = `${x}px`;
+      colorMarker.style.top = `${y}px`;
 
@@ -739,14 +739,14 @@ // Update the color
     function updateColor(rgba, hsva) {if (rgba === void 0) {rgba = {};}if (hsva === void 0) {hsva = {};}
-      var format = settings.format;
+      let format = settings.format;
 
-      for (var key in rgba) {
+      for (const key in rgba) {
         currentColor[key] = rgba[key];
       }
 
-      for (var _key in hsva) {
-        currentColor[_key] = hsva[_key];
+      for (const key in hsva) {
+        currentColor[key] = hsva[key];
       }
 
-      var hex = RGBAToHex(currentColor);
-      var opaqueHex = hex.substring(0, 7);
+      const hex = RGBAToHex(currentColor);
+      const opaqueHex = hex.substring(0, 7);
 
@@ -785,3 +785,3 @@ colorMarker.style.color = opaqueHex;
       // Select the current format in the format switcher
-      document.querySelector(".clr-format [value=\"" + format + "\"]").checked = true;
+      document.querySelector(`.clr-format [value="${format}"]`).checked = true;
     }
@@ -793,8 +793,8 @@
     function setHue() {
-      var hue = hueSlider.value * 1;
-      var x = colorMarker.style.left.replace('px', '') * 1;
-      var y = colorMarker.style.top.replace('px', '') * 1;
+      const hue = hueSlider.value * 1;
+      const x = colorMarker.style.left.replace('px', '') * 1;
+      const y = colorMarker.style.top.replace('px', '') * 1;
 
-      picker.style.color = "hsl(" + hue + ", 100%, 50%)";
-      hueMarker.style.left = hue / 360 * 100 + "%";
+      picker.style.color = `hsl(${hue}, 100%, 50%)`;
+      hueMarker.style.left = `${hue / 360 * 100}%`;
 
@@ -808,5 +808,5 @@ setColorAtPosition(x, y);
     function setAlpha() {
-      var alpha = alphaSlider.value / 100;
+      const alpha = alphaSlider.value / 100;
 
-      alphaMarker.style.left = alpha * 100 + "%";
+      alphaMarker.style.left = `${alpha * 100}%`;
       updateColor({ a: alpha });
@@ -822,8 +822,8 @@ pickColor();
     function HSVAtoRGBA(hsva) {
-      var saturation = hsva.s / 100;
-      var value = hsva.v / 100;
-      var chroma = saturation * value;
-      var hueBy60 = hsva.h / 60;
-      var x = chroma * (1 - Math.abs(hueBy60 % 2 - 1));
-      var m = value - chroma;
+      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;
 
@@ -833,6 +833,6 @@ chroma = chroma + m;
 
-      var index = Math.floor(hueBy60) % 6;
-      var red = [chroma, x, m, m, x, chroma][index];
-      var green = [x, chroma, chroma, x, m, m][index];
-      var blue = [m, m, x, chroma, chroma, x][index];
+      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];
 
@@ -853,5 +853,5 @@ return {
     function HSVAtoHSLA(hsva) {
-      var value = hsva.v / 100;
-      var lightness = value * (1 - hsva.s / 100 / 2);
-      var saturation;
+      const value = hsva.v / 100;
+      const lightness = value * (1 - hsva.s / 100 / 2);
+      let saturation;
 
@@ -876,11 +876,11 @@ if (lightness > 0 && lightness < 1) {
     function RGBAtoHSVA(rgba) {
-      var red = rgba.r / 255;
-      var green = rgba.g / 255;
-      var blue = rgba.b / 255;
-      var xmax = Math.max(red, green, blue);
-      var xmin = Math.min(red, green, blue);
-      var chroma = xmax - xmin;
-      var value = xmax;
-      var hue = 0;
-      var saturation = 0;
+      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;
 
@@ -910,4 +910,4 @@ if (chroma) {
     function strToRGBA(str) {
-      var regex = /^((rgba)|rgb)[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)[\D]*?([\d.]+|$)/i;
-      var match, rgba;
+      const regex = /^((rgba)|rgb)[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)[\D]*?([\d.]+|$)/i;
+      let match, rgba;
 
@@ -933,3 +933,3 @@ // Default to black for invalid color strings
       } else {
-        match = ctx.fillStyle.replace('#', '').match(/.{2}/g).map(function (h) {return parseInt(h, 16);});
+        match = ctx.fillStyle.replace('#', '').match(/.{2}/g).map((h) => parseInt(h, 16));
         rgba = {
@@ -952,6 +952,6 @@ r: match[0],
     function RGBAToHex(rgba) {
-      var R = rgba.r.toString(16);
-      var G = rgba.g.toString(16);
-      var B = rgba.b.toString(16);
-      var A = '';
+      let R = rgba.r.toString(16);
+      let G = rgba.g.toString(16);
+      let B = rgba.b.toString(16);
+      let A = '';
 
@@ -971,3 +971,3 @@ if (rgba.r < 16) {
       if (settings.alpha && (rgba.a < 1 || settings.forceAlpha)) {
-        var alpha = rgba.a * 255 | 0;
+        const alpha = rgba.a * 255 | 0;
         A = alpha.toString(16);
@@ -990,5 +990,5 @@
       if (!settings.alpha || rgba.a === 1 && !settings.forceAlpha) {
-        return "rgb(" + rgba.r + ", " + rgba.g + ", " + rgba.b + ")";
+        return `rgb(${rgba.r}, ${rgba.g}, ${rgba.b})`;
       } else {
-        return "rgba(" + rgba.r + ", " + rgba.g + ", " + rgba.b + ", " + rgba.a + ")";
+        return `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${rgba.a})`;
       }
@@ -1004,5 +1004,5 @@ }
       if (!settings.alpha || hsla.a === 1 && !settings.forceAlpha) {
-        return "hsl(" + hsla.h + ", " + hsla.s + "%, " + hsla.l + "%)";
+        return `hsl(${hsla.h}, ${hsla.s}%, ${hsla.l}%)`;
       } else {
-        return "hsla(" + hsla.h + ", " + hsla.s + "%, " + hsla.l + "%, " + hsla.a + ")";
+        return `hsla(${hsla.h}, ${hsla.s}%, ${hsla.l}%, ${hsla.a})`;
       }
@@ -1022,12 +1022,12 @@ }
       picker.innerHTML =
-      "<input id=\"clr-color-value\" name=\"clr-color-value\" class=\"clr-color\" type=\"text\" value=\"\" spellcheck=\"false\" aria-label=\"" + settings.a11y.input + "\">" + ("<div id=\"clr-color-area\" class=\"clr-gradient\" role=\"application\" aria-label=\"" +
-      settings.a11y.instruction + "\">") +
+      `<input id="clr-color-value" name="clr-color-value" class="clr-color" type="text" value="" spellcheck="false" aria-label="${settings.a11y.input}">` +
+      `<div id="clr-color-area" class="clr-gradient" role="application" aria-label="${settings.a11y.instruction}">` +
       '<div id="clr-color-marker" class="clr-marker" tabindex="0"></div>' +
       '</div>' +
-      '<div class="clr-hue">' + ("<input id=\"clr-hue-slider\" name=\"clr-hue-slider\" type=\"range\" min=\"0\" max=\"360\" step=\"1\" aria-label=\"" +
-      settings.a11y.hueSlider + "\">") +
+      '<div class="clr-hue">' +
+      `<input id="clr-hue-slider" name="clr-hue-slider" type="range" min="0" max="360" step="1" aria-label="${settings.a11y.hueSlider}">` +
       '<div id="clr-hue-marker"></div>' +
       '</div>' +
-      '<div class="clr-alpha">' + ("<input id=\"clr-alpha-slider\" name=\"clr-alpha-slider\" type=\"range\" min=\"0\" max=\"100\" step=\"1\" aria-label=\"" +
-      settings.a11y.alphaSlider + "\">") +
+      '<div class="clr-alpha">' +
+      `<input id="clr-alpha-slider" name="clr-alpha-slider" type="range" min="0" max="100" step="1" aria-label="${settings.a11y.alphaSlider}">` +
       '<div id="clr-alpha-marker"></div>' +
@@ -1037,4 +1037,4 @@ '<span></span>' +
       '<div id="clr-format" class="clr-format">' +
-      '<fieldset class="clr-segmented">' + ("<legend>" +
-      settings.a11y.format + "</legend>") +
+      '<fieldset class="clr-segmented">' +
+      `<legend>${settings.a11y.format}</legend>` +
       '<input id="clr-f1" type="radio" name="clr-format" value="hex">' +
@@ -1049,9 +1049,9 @@ '<label for="clr-f1">Hex</label>' +
       '</div>' +
-      '<div id="clr-swatches" class="clr-swatches"></div>' + ("<button type=\"button\" id=\"clr-clear\" class=\"clr-clear\" aria-label=\"" +
-      settings.a11y.clear + "\">" + settings.clearLabel + "</button>") +
-      '<div id="clr-color-preview" class="clr-preview">' + ("<button type=\"button\" id=\"clr-close\" class=\"clr-close\" aria-label=\"" +
-      settings.a11y.close + "\">" + settings.closeLabel + "</button>") +
-      '</div>' + ("<span id=\"clr-open-label\" hidden>" +
-      settings.a11y.open + "</span>") + ("<span id=\"clr-swatch-label\" hidden>" +
-      settings.a11y.swatch + "</span>");
+      '<div id="clr-swatches" class="clr-swatches"></div>' +
+      `<button type="button" id="clr-clear" class="clr-clear" aria-label="${settings.a11y.clear}">${settings.clearLabel}</button>` +
+      '<div id="clr-color-preview" class="clr-preview">' +
+      `<button type="button" id="clr-close" class="clr-close" aria-label="${settings.a11y.close}">${settings.closeLabel}</button>` +
+      '</div>' +
+      `<span id="clr-open-label" hidden>${settings.a11y.open}</span>` +
+      `<span id="clr-swatch-label" hidden>${settings.a11y.swatch}</span>`;
 
@@ -1077,3 +1077,3 @@ // Append the color picker to the DOM
 
-      addListener(picker, 'mousedown', function (event) {
+      addListener(picker, 'mousedown', (event) => {
         picker.classList.remove('clr-keyboard-nav');
@@ -1083,23 +1083,23 @@ event.stopPropagation();
 
-      addListener(colorArea, 'mousedown', function (event) {
+      addListener(colorArea, 'mousedown', (event) => {
         addListener(document, 'mousemove', moveMarker);
       });
 
-      addListener(colorArea, 'touchstart', function (event) {
+      addListener(colorArea, 'touchstart', (event) => {
         document.addEventListener('touchmove', moveMarker, { passive: false });
       });
 
-      addListener(colorMarker, 'mousedown', function (event) {
+      addListener(colorMarker, 'mousedown', (event) => {
         addListener(document, 'mousemove', moveMarker);
       });
 
-      addListener(colorMarker, 'touchstart', function (event) {
+      addListener(colorMarker, 'touchstart', (event) => {
         document.addEventListener('touchmove', moveMarker, { passive: false });
       });
 
-      addListener(colorValue, 'change', function (event) {
-        var value = colorValue.value;
+      addListener(colorValue, 'change', (event) => {
+        const value = colorValue.value;
 
         if (currentEl || settings.inline) {
-          var color = value === '' ? value : setColorFromStr(value);
+          const color = value === '' ? value : setColorFromStr(value);
           pickColor(color);
@@ -1109,3 +1109,3 @@ }
 
-      addListener(clearButton, 'click', function (event) {
+      addListener(clearButton, 'click', (event) => {
         pickColor('');
@@ -1115,3 +1115,3 @@ closePicker();
 
-      addListener(closeButton, 'click', function (event) {
+      addListener(closeButton, 'click', (event) => {
         pickColor();
@@ -1121,3 +1121,3 @@ closePicker();
 
-      addListener(getEl('clr-format'), 'click', '.clr-format input', function (event) {
+      addListener(getEl('clr-format'), 'click', '.clr-format input', (event) => {
         currentFormat = event.target.value;
@@ -1128,3 +1128,3 @@ updateColor();
 
-      addListener(picker, 'click', '.clr-swatches button', function (event) {
+      addListener(picker, 'click', '.clr-swatches button', (event) => {
         setColorFromStr(event.target.textContent);
@@ -1138,11 +1138,11 @@ pickColor();
 
-      addListener(document, 'mouseup', function (event) {
+      addListener(document, 'mouseup', (event) => {
         document.removeEventListener('mousemove', moveMarker);
       });
 
-      addListener(document, 'touchend', function (event) {
+      addListener(document, 'touchend', (event) => {
         document.removeEventListener('touchmove', moveMarker);
       });
 
-      addListener(document, 'mousedown', function (event) {
+      addListener(document, 'mousedown', (event) => {
         keyboardNav = false;
@@ -1153,7 +1153,7 @@ picker.classList.remove('clr-keyboard-nav');
 
-      addListener(document, 'keydown', function (event) {
-        var key = event.key;
-        var target = event.target;
-        var shiftKey = event.shiftKey;
-        var navKeys = ['Tab', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
+      addListener(document, 'keydown', (event) => {
+        const key = event.key;
+        const target = event.target;
+        const shiftKey = event.shiftKey;
+        const navKeys = ['Tab', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
 
@@ -1171,5 +1171,5 @@ if (key === 'Escape') {
         if (key === 'Tab' && target.matches('.clr-picker *')) {
-          var focusables = getFocusableElements();
-          var firstFocusable = focusables.shift();
-          var lastFocusable = focusables.pop();
+          const focusables = getFocusableElements();
+          const firstFocusable = focusables.shift();
+          const lastFocusable = focusables.pop();
 
@@ -1186,3 +1186,3 @@ if (shiftKey && target === firstFocusable) {
 
-      addListener(document, 'click', '.clr-field button', function (event) {
+      addListener(document, 'click', '.clr-field button', (event) => {
         // Reset any previously set per-instance options
@@ -1197,4 +1197,4 @@ if (hasInstance) {
 
-      addListener(colorMarker, 'keydown', function (event) {
-        var movements = {
+      addListener(colorMarker, 'keydown', (event) => {
+        const movements = {
           ArrowUp: [0, -1],
@@ -1207,3 +1207,3 @@ ArrowDown: [0, 1],
         if (Object.keys(movements).includes(event.key)) {
-          moveMarkerOnKeydown.apply(void 0, movements[event.key]);
+          moveMarkerOnKeydown(...movements[event.key]);
           event.preventDefault();
@@ -1223,4 +1223,4 @@ }
     function getFocusableElements() {
-      var controls = Array.from(picker.querySelectorAll('input, button'));
-      var focusables = controls.filter(function (node) {return !!node.offsetWidth;});
+      const controls = Array.from(picker.querySelectorAll('input, button'));
+      const focusables = controls.filter((node) => !!node.offsetWidth);
 
@@ -1247,7 +1247,7 @@ return focusables;
     function addListener(context, type, selector, fn) {
-      var matches = Element.prototype.matches || Element.prototype.msMatchesSelector;
+      const matches = Element.prototype.matches || Element.prototype.msMatchesSelector;
 
       // Delegate event to the target of the selector
       if (typeof selector === 'string') {
-        context.addEventListener(type, function (event) {
+        context.addEventListener(type, (event) => {
           if (matches.call(event.target, selector)) {
@@ -1275,6 +1275,6 @@ fn.call(event.target, event);
       if (document.readyState !== 'loading') {
-        fn.apply(void 0, args);
+        fn(...args);
       } else {
-        document.addEventListener('DOMContentLoaded', function () {
-          fn.apply(void 0, args);
+        document.addEventListener('DOMContentLoaded', () => {
+          fn(...args);
         });
@@ -1312,4 +1312,4 @@ }
     // Expose the color picker to the global scope
-    var Coloris = function () {
-      var methods = {
+    const Coloris = (() => {
+      const methods = {
         init: init,
@@ -1322,7 +1322,8 @@ set: configure,
         removeInstance: removeVirtualInstance,
-        updatePosition: updatePickerPosition
+        updatePosition: updatePickerPosition,
+        ready: DOMReady
       };
 
       function Coloris(options) {
-        DOMReady(function () {
+        DOMReady(() => {
           if (options) {
@@ -1336,18 +1337,18 @@ if (typeof options === 'string') {
         });
-      }var _loop3 = function _loop3(key)
+      }
 
-      {
-        Coloris[key] = function () {for (var _len = arguments.length, args = new Array(_len), _key2 = 0; _key2 < _len; _key2++) {args[_key2] = arguments[_key2];}
+      for (const key in methods) {
+        Coloris[key] = function () {for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}
           DOMReady(methods[key], args);
         };
-      };for (var key in methods) {_loop3(key);}
+      }
 
       // handle window resize events re-aligning the panel
-      DOMReady(function () {
-        window.addEventListener('resize', function (event) {Coloris.updatePosition();});
-        window.addEventListener('scroll', function (event) {Coloris.updatePosition();});
+      DOMReady(() => {
+        window.addEventListener('resize', (event) => {Coloris.updatePosition();});
+        window.addEventListener('scroll', (event) => {Coloris.updatePosition();});
       });
 
       return Coloris;
-    }();
+    })();
 
@@ -1360,3 +1361,3 @@ // Ensure init function is available not only as as a default import
 
-  }(window, document, Math);
+  })(window, document, Math);
 });

dist/umd/coloris.min.js

@@ -1,9 +0,1 @@
-!function(e,t){"function"==typeof define&&define.amd?define([],t):"object"==typeof module&&module.exports?module.exports=t():(e.Coloris=t(),"object"==typeof window&&e.Coloris.init())}("undefined"!=typeof self?self:void 0,function(){
-/*!
-  * Copyright (c) 2021-2023 Momo Bassit.
-  * Licensed under the MIT License (MIT)
-  * https://github.com/mdbassit/Coloris
-  * Version: 0.21.1
-  * NPM: https://github.com/melloware/coloris-npm
-  */
-return h=window,b=document,v=Math,r=b.createElement("canvas").getContext("2d"),D={el:"[data-coloris]",parent:"body",theme:"default",themeMode:"light",rtl:!(O={}),wrap:!0,margin:2,format:"hex",formatToggle:!(H={r:0,g:0,b:0,h:0,s:0,v:0,a:1}),swatches:[],swatchesOnly:!1,alpha:!0,forceAlpha:!1,focusInput:!0,selectInput:!1,inline:!1,defaultColor:"#000000",clearButton:!1,clearLabel:"Clear",closeButton:!1,closeLabel:"Close",onChange:function(){return y},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."}},c={},I="",j=!(N={}),NodeList!==y&&NodeList.prototype&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach),(_=function(){var r={init:K,set:n,wrap:s,close:o,setInstance:R,setColor:Q,removeInstance:W,updatePosition:i};function t(e){J(function(){e&&("string"==typeof e?P:n)(e)})}for(var e in r)!function(l){t[l]=function(){for(var e=arguments.length,t=new Array(e),a=0;a<e;a++)t[a]=arguments[a];J(r[l],t)}}(e);return J(function(){h.addEventListener("resize",function(e){t.updatePosition()}),h.addEventListener("scroll",function(e){t.updatePosition()})}),t}()).coloris=_;function n(o){if("object"==typeof o)for(var c in o)!function(){switch(c){case"el":P(o.el),!1!==o.wrap&&s(o.el);break;case"parent":(g=b.querySelector(o.parent))&&(g.appendChild(m),D.parent=o.parent,g===b.body)&&(g=y);break;case"themeMode":D.themeMode=o.themeMode,"auto"===o.themeMode&&h.matchMedia&&h.matchMedia("(prefers-color-scheme: dark)").matches&&(D.themeMode="dark");case"theme":o.theme&&(D.theme=o.theme),m.className="clr-picker clr-"+D.theme+" clr-"+D.themeMode,D.inline&&i();break;case"rtl":D.rtl=!!o.rtl,b.querySelectorAll(".clr-field").forEach(function(e){return e.classList.toggle("clr-rtl",D.rtl)});break;case"margin":o.margin*=1,D.margin=(isNaN(o.margin)?D:o).margin;break;case"wrap":o.el&&o.wrap&&s(o.el);break;case"formatToggle":D.formatToggle=!!o.formatToggle,f("clr-format").style.display=D.formatToggle?"block":"none",D.formatToggle&&(D.format="auto");break;case"swatches":var a;Array.isArray(o.swatches)&&(a=[],o.swatches.forEach(function(e,t){a.push('<button type="button" id="clr-swatch-'+t+'" aria-labelledby="clr-swatch-label clr-swatch-'+t+'" style="color: '+e+';">'+e+"</button>")}),f("clr-swatches").innerHTML=a.length?"<div>"+a.join("")+"</div>":"",D.swatches=o.swatches.slice());break;case"swatchesOnly":D.swatchesOnly=!!o.swatchesOnly,m.setAttribute("data-minimal",D.swatchesOnly);break;case"alpha":D.alpha=!!o.alpha,m.setAttribute("data-alpha",D.alpha);break;case"inline":D.inline=!!o.inline,m.setAttribute("data-inline",D.inline),D.inline&&(e=o.defaultColor||D.defaultColor,M=Y(e),i(),u(e));break;case"clearButton":"object"==typeof o.clearButton&&(o.clearButton.label&&(D.clearLabel=o.clearButton.label,x.innerHTML=D.clearLabel),o.clearButton=o.clearButton.show),D.clearButton=!!o.clearButton,x.style.display=D.clearButton?"block":"none";break;case"clearLabel":D.clearLabel=o.clearLabel,x.innerHTML=D.clearLabel;break;case"closeButton":D.closeButton=!!o.closeButton,D.closeButton?m.insertBefore(A,L):L.appendChild(A);break;case"closeLabel":D.closeLabel=o.closeLabel,A.innerHTML=D.closeLabel;break;case"a11y":var e,t,l=o.a11y,r=!1;if("object"==typeof l)for(var n in l)l[n]&&D.a11y[n]&&(D.a11y[n]=l[n],r=!0);r&&(e=f("clr-open-label"),t=f("clr-swatch-label"),e.innerHTML=D.a11y.open,t.innerHTML=D.a11y.swatch,A.setAttribute("aria-label",D.a11y.close),x.setAttribute("aria-label",D.a11y.clear),S.setAttribute("aria-label",D.a11y.hueSlider),C.setAttribute("aria-label",D.a11y.alphaSlider),E.setAttribute("aria-label",D.a11y.input),w.setAttribute("aria-label",D.a11y.instruction));break;default:D[c]=o[c]}}()}function R(e,t){"string"==typeof e&&"object"==typeof t&&(c[e]=t,j=!0)}function W(e){delete c[e],0===Object.keys(c).length&&(j=!1,e===I)&&F()}function q(a){if(j){var l,r=["el","wrap","rtl","inline","defaultColor","a11y"];for(l in c)if("break"===function(){var t=c[l];if(a.matches(l)){for(var e in I=l,N={},r.forEach(function(e){return delete t[e]}),t)N[e]=Array.isArray(D[e])?D[e].slice():D[e];return n(t),"break"}}())break}}function F(){0<Object.keys(N).length&&(n(N),I="",N={})}function P(e){a(b,"click",e,function(e){D.inline||(q(e.target),B=e.target,l=B.value,M=Y(l),m.classList.add("clr-open"),i(),u(l),(D.focusInput||D.selectInput)&&(E.focus({preventScroll:!0}),E.setSelectionRange(B.selectionStart,B.selectionEnd)),D.selectInput&&E.select(),(Z||D.swatchesOnly)&&$().shift().focus(),B.dispatchEvent(new Event("open",{bubbles:!0})))}),a(b,"input",e,function(e){var t=e.target.parentNode;t.classList.contains("clr-field")&&(t.style.color=e.target.value)})}function i(){var e,t,a,l,r,n,o,c,i,s;m&&(B||D.inline)&&(e=g,t=h.scrollY,a=m.offsetWidth,l=m.offsetHeight,r={left:!1,top:!1},o={x:0,y:0},e&&(c=h.getComputedStyle(e),n=parseFloat(c.marginTop),c=parseFloat(c.borderTopWidth),(o=e.getBoundingClientRect()).y+=c+t),D.inline||(i=(c=B.getBoundingClientRect()).x,s=t+c.y+c.height+D.margin,e?(i-=o.x,s-=o.y,i+a>e.clientWidth&&(i+=c.width-a,r.left=!0),s+l>e.clientHeight-n&&l+D.margin<=c.top-(o.y-t)&&(s-=c.height+l+2*D.margin,r.top=!0),s+=e.scrollTop):(i+a>b.documentElement.clientWidth&&(i+=c.width-a,r.left=!0),s+l-t>b.documentElement.clientHeight&&l+D.margin<=c.top&&(s=t+c.y-l-D.margin,r.top=!0)),m.classList.toggle("clr-left",r.left),m.classList.toggle("clr-top",r.top),m.style.left=i+"px",m.style.top=s+"px",o.x+=m.offsetLeft,o.y+=m.offsetTop),O={width:w.offsetWidth,height:w.offsetHeight,x:w.offsetLeft+o.x,y:w.offsetTop+o.y})}function s(e){b.querySelectorAll(e).forEach(function(e){var t,a,l=e.parentNode;l.classList.contains("clr-field")||(t=b.createElement("div"),a="clr-field",(D.rtl||e.classList.contains("clr-rtl"))&&(a+=" clr-rtl"),t.innerHTML='<button type="button" aria-labelledby="clr-open-label"></button>',l.insertBefore(t,e),t.setAttribute("class",a),t.style.color=e.value,t.appendChild(e))})}function o(e){var t;B&&!D.inline&&(t=B,e&&(B=y,l!==t.value)&&(t.value=l,t.dispatchEvent(new Event("input",{bubbles:!0}))),setTimeout(function(){l!==t.value&&t.dispatchEvent(new Event("change",{bubbles:!0}))}),m.classList.remove("clr-open"),j&&F(),t.dispatchEvent(new Event("close",{bubbles:!0})),D.focusInput&&t.focus({preventScroll:!0}),B=y)}function u(e){var e=function(e){var t;r.fillStyle="#000",r.fillStyle=e,(e=/^((rgba)|rgb)[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)[\D]*?([\d.]+|$)/i.exec(r.fillStyle))?(t={r:+e[3],g:+e[4],b:+e[5],a:+e[6]}).a=+t.a.toFixed(2):(e=r.fillStyle.replace("#","").match(/.{2}/g).map(function(e){return parseInt(e,16)}),t={r:e[0],g:e[1],b:e[2],a:1});return t}(e),t=function(e){var t=e.r/255,a=e.g/255,l=e.b/255,r=v.max(t,a,l),n=v.min(t,a,l),n=r-n,o=r,c=0,i=0;n&&(r===t&&(c=(a-l)/n),r===a&&(c=2+(l-t)/n),r===l&&(c=4+(t-a)/n),r)&&(i=n/r);return{h:(c=v.floor(60*c))<0?c+360:c,s:v.round(100*i),v:v.round(100*o),a:e.a}}(e);X(t.s,t.v),p(e,t),S.value=t.h,m.style.color="hsl("+t.h+", 100%, 50%)",V.style.left=t.h/360*100+"%",k.style.left=O.width*t.s/100+"px",k.style.top=O.height-O.height*t.v/100+"px",C.value=100*t.a,T.style.left=100*t.a+"%"}function Y(e){e=e.substring(0,3).toLowerCase();return"rgb"===e||"hsl"===e?e:"hex"}function d(e){e=e!==y?e:E.value,B&&(B.value=e,B.dispatchEvent(new Event("input",{bubbles:!0}))),D.onChange&&D.onChange.call(h,e,B),b.dispatchEvent(new CustomEvent("coloris:pick",{detail:{color:e,currentEl:B}}))}function U(e,t){var a,l,r,n,o,e={h:+S.value,s:e/O.width*100,v:100-t/O.height*100,a:C.value/100},c=(c=(t=e).s/100,a=t.v/100,c*=a,l=t.h/60,r=c*(1-v.abs(l%2-1)),c+=a-=c,r+=a,l=v.floor(l)%6,n=[c,r,a,a,r,c][l],o=[r,c,c,r,a,a][l],a=[a,a,r,c,c,r][l],{r:v.round(255*n),g:v.round(255*o),b:v.round(255*a),a:t.a});X(e.s,e.v),p(c,e),d()}function X(e,t){var a=D.a11y.marker;e=+e.toFixed(1),t=+t.toFixed(1),a=(a=a.replace("{s}",e)).replace("{v}",t),k.setAttribute("aria-label",a)}function t(e){var t={pageX:((t=e).changedTouches?t.changedTouches[0]:t).pageX,pageY:(t.changedTouches?t.changedTouches[0]:t).pageY},a=t.pageX-O.x,t=t.pageY-O.y;g&&(t+=g.scrollTop),z(a,t),e.preventDefault(),e.stopPropagation()}function z(e,t){e=e<0?0:e>O.width?O.width:e,t=t<0?0:t>O.height?O.height:t,k.style.left=e+"px",k.style.top=t+"px",U(e,t),k.focus()}function p(e,t){void 0===t&&(t={});var a,l,r=D.format;for(a in e=void 0===e?{}:e)H[a]=e[a];for(l in t)H[l]=t[l];var n,o=function(e){var t=e.r.toString(16),a=e.g.toString(16),l=e.b.toString(16),r="";e.r<16&&(t="0"+t);e.g<16&&(a="0"+a);e.b<16&&(l="0"+l);D.alpha&&(e.a<1||D.forceAlpha)&&(e=255*e.a|0,r=e.toString(16),e<16)&&(r="0"+r);return"#"+t+a+l+r}(H),c=o.substring(0,7);switch(k.style.color=c,T.parentNode.style.color=c,T.style.color=o,L.style.color=o,w.style.display="none",w.offsetHeight,w.style.display="",T.nextElementSibling.style.display="none",T.nextElementSibling.offsetHeight,T.nextElementSibling.style.display="","mixed"===r?r=1===H.a?"hex":"rgb":"auto"===r&&(r=M),r){case"hex":E.value=o;break;case"rgb":E.value=(n=H,!D.alpha||1===n.a&&!D.forceAlpha?"rgb("+n.r+", "+n.g+", "+n.b+")":"rgba("+n.r+", "+n.g+", "+n.b+", "+n.a+")");break;case"hsl":E.value=(n=function(e){var t,a=e.v/100,l=a*(1-e.s/100/2);0<l&&l<1&&(t=v.round((a-l)/v.min(l,1-l)*100));return{h:e.h,s:t||0,l:v.round(100*l),a:e.a}}(H),!D.alpha||1===n.a&&!D.forceAlpha?"hsl("+n.h+", "+n.s+"%, "+n.l+"%)":"hsla("+n.h+", "+n.s+"%, "+n.l+"%, "+n.a+")")}b.querySelector('.clr-format [value="'+r+'"]').checked=!0}function e(){var e=+S.value,t=+k.style.left.replace("px",""),a=+k.style.top.replace("px","");m.style.color="hsl("+e+", 100%, 50%)",V.style.left=e/360*100+"%",U(t,a)}function G(){var e=C.value/100;T.style.left=100*e+"%",p({a:e}),d()}function K(){b.getElementById("clr-picker")||(g=y,(m=b.createElement("div")).setAttribute("id","clr-picker"),m.className="clr-picker",m.innerHTML='<input id="clr-color-value" name="clr-color-value" class="clr-color" type="text" value="" spellcheck="false" aria-label="'+D.a11y.input+'"><div id="clr-color-area" class="clr-gradient" role="application" aria-label="'+D.a11y.instruction+'"><div id="clr-color-marker" class="clr-marker" tabindex="0"></div></div><div class="clr-hue"><input id="clr-hue-slider" name="clr-hue-slider" type="range" min="0" max="360" step="1" aria-label="'+D.a11y.hueSlider+'"><div id="clr-hue-marker"></div></div><div class="clr-alpha"><input id="clr-alpha-slider" name="clr-alpha-slider" type="range" min="0" max="100" step="1" aria-label="'+D.a11y.alphaSlider+'"><div id="clr-alpha-marker"></div><span></span></div><div id="clr-format" class="clr-format"><fieldset class="clr-segmented"><legend>'+D.a11y.format+'</legend><input id="clr-f1" type="radio" name="clr-format" value="hex"><label for="clr-f1">Hex</label><input id="clr-f2" type="radio" name="clr-format" value="rgb"><label for="clr-f2">RGB</label><input id="clr-f3" type="radio" name="clr-format" value="hsl"><label for="clr-f3">HSL</label><span></span></fieldset></div><div id="clr-swatches" class="clr-swatches"></div><button type="button" id="clr-clear" class="clr-clear" aria-label="'+D.a11y.clear+'">'+D.clearLabel+'</button><div id="clr-color-preview" class="clr-preview"><button type="button" id="clr-close" class="clr-close" aria-label="'+D.a11y.close+'">'+D.closeLabel+'</button></div><span id="clr-open-label" hidden>'+D.a11y.open+'</span><span id="clr-swatch-label" hidden>'+D.a11y.swatch+"</span>",b.body.appendChild(m),w=f("clr-color-area"),k=f("clr-color-marker"),x=f("clr-clear"),A=f("clr-close"),L=f("clr-color-preview"),E=f("clr-color-value"),S=f("clr-hue-slider"),V=f("clr-hue-marker"),C=f("clr-alpha-slider"),T=f("clr-alpha-marker"),P(D.el),s(D.el),a(m,"mousedown",function(e){m.classList.remove("clr-keyboard-nav"),e.stopPropagation()}),a(w,"mousedown",function(e){a(b,"mousemove",t)}),a(w,"touchstart",function(e){b.addEventListener("touchmove",t,{passive:!1})}),a(k,"mousedown",function(e){a(b,"mousemove",t)}),a(k,"touchstart",function(e){b.addEventListener("touchmove",t,{passive:!1})}),a(E,"change",function(e){var t=E.value;(B||D.inline)&&d(""===t?t:u(t))}),a(x,"click",function(e){d(""),o()}),a(A,"click",function(e){d(),o()}),a(f("clr-format"),"click",".clr-format input",function(e){M=e.target.value,p(),d()}),a(m,"click",".clr-swatches button",function(e){u(e.target.textContent),d(),D.swatchesOnly&&o()}),a(b,"mouseup",function(e){b.removeEventListener("mousemove",t)}),a(b,"touchend",function(e){b.removeEventListener("touchmove",t)}),a(b,"mousedown",function(e){Z=!1,m.classList.remove("clr-keyboard-nav"),o()}),a(b,"keydown",function(e){var t,a=e.key,l=e.target,r=e.shiftKey;"Escape"===a?o(!0):["Tab","ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].includes(a)&&(Z=!0,m.classList.add("clr-keyboard-nav")),"Tab"===a&&l.matches(".clr-picker *")&&(t=(a=$()).shift(),a=a.pop(),r&&l===t?(a.focus(),e.preventDefault()):r||l!==a||(t.focus(),e.preventDefault()))}),a(b,"click",".clr-field button",function(e){j&&F(),e.target.nextElementSibling.dispatchEvent(new Event("click",{bubbles:!0}))}),a(k,"keydown",function(e){var t={ArrowUp:[0,-1],ArrowDown:[0,1],ArrowLeft:[-1,0],ArrowRight:[1,0]};Object.keys(t).includes(e.key)&&(!function(e,t){z(+k.style.left.replace("px","")+e,+k.style.top.replace("px","")+t)}.apply(void 0,t[e.key]),e.preventDefault())}),a(w,"click",t),a(S,"input",e),a(C,"input",G))}function $(){return Array.from(m.querySelectorAll("input, button")).filter(function(e){return!!e.offsetWidth})}function f(e){return b.getElementById(e)}function a(e,t,a,l){var r=Element.prototype.matches||Element.prototype.msMatchesSelector;"string"==typeof a?e.addEventListener(t,function(e){r.call(e.target,a)&&l.call(e.target,e)}):(l=a,e.addEventListener(t,l))}function J(e,t){t=t!==y?t:[],"loading"!==b.readyState?e.apply(void 0,t):b.addEventListener("DOMContentLoaded",function(){e.apply(void 0,t)})}function Q(e,t){l=(B=t).value,q(t),M=Y(e),i(),u(e),d(),l!==e&&B.dispatchEvent(new Event("change",{bubbles:!0}))}var h,b,v,y,g,m,w,k,L,E,x,A,S,V,C,T,B,M,l,Z,r,H,O,D,c,I,N,j,_});
+!function(e,t){"function"==typeof define&&define.amd?define([],t):"object"==typeof module&&module.exports?module.exports=t():(e.Coloris=t(),"object"==typeof window&&e.Coloris.init())}("undefined"!=typeof self?self:void 0,function(){{var E=window,x=document,$=Math,A=void 0;const Q=x.createElement("canvas").getContext("2d"),V={r:0,g:0,b:0,h:0,s:0,v:0,a:1};let d,u,p,i,s,h,f,b,y,a,v,g,m,w,l,o,k={};const Z={el:"[data-coloris]",parent:"body",theme:"default",themeMode:"light",rtl:!1,wrap:!0,margin:2,format:"hex",formatToggle:!1,swatches:[],swatchesOnly:!1,alpha:!0,forceAlpha:!1,focusInput:!0,selectInput:!1,inline:!1,defaultColor:"#000000",clearButton:!1,clearLabel:"Clear",closeButton:!1,closeLabel:"Close",onChange:()=>A,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."}},_={};let n="",c={},L=!1;function S(t){if("object"==typeof t)for(const o in t)switch(o){case"el":B(t.el),!1!==t.wrap&&H(t.el);break;case"parent":(d=x.querySelector(t.parent))&&(d.appendChild(u),Z.parent=t.parent,d===x.body)&&(d=A);break;case"themeMode":Z.themeMode=t.themeMode,"auto"===t.themeMode&&E.matchMedia&&E.matchMedia("(prefers-color-scheme: dark)").matches&&(Z.themeMode="dark");case"theme":t.theme&&(Z.theme=t.theme),u.className=`clr-picker clr-${Z.theme} clr-`+Z.themeMode,Z.inline&&M();break;case"rtl":Z.rtl=!!t.rtl,x.querySelectorAll(".clr-field").forEach(e=>e.classList.toggle("clr-rtl",Z.rtl));break;case"margin":t.margin*=1,Z.margin=(isNaN(t.margin)?Z:t).margin;break;case"wrap":t.el&&t.wrap&&H(t.el);break;case"formatToggle":Z.formatToggle=!!t.formatToggle,X("clr-format").style.display=Z.formatToggle?"block":"none",Z.formatToggle&&(Z.format="auto");break;case"swatches":if(Array.isArray(t.swatches)){const n=[];t.swatches.forEach((e,t)=>{n.push(`<button type="button" id="clr-swatch-${t}" aria-labelledby="clr-swatch-label clr-swatch-${t}" style="color: ${e};">${e}</button>`)}),X("clr-swatches").innerHTML=n.length?`<div>${n.join("")}</div>`:"",Z.swatches=t.swatches.slice()}break;case"swatchesOnly":Z.swatchesOnly=!!t.swatchesOnly,u.setAttribute("data-minimal",Z.swatchesOnly);break;case"alpha":Z.alpha=!!t.alpha,u.setAttribute("data-alpha",Z.alpha);break;case"inline":Z.inline=!!t.inline,u.setAttribute("data-inline",Z.inline),Z.inline&&(l=t.defaultColor||Z.defaultColor,w=I(l),M(),D(l));break;case"clearButton":"object"==typeof t.clearButton&&(t.clearButton.label&&(Z.clearLabel=t.clearButton.label,f.innerHTML=Z.clearLabel),t.clearButton=t.clearButton.show),Z.clearButton=!!t.clearButton,f.style.display=Z.clearButton?"block":"none";break;case"clearLabel":Z.clearLabel=t.clearLabel,f.innerHTML=Z.clearLabel;break;case"closeButton":Z.closeButton=!!t.closeButton,Z.closeButton?u.insertBefore(b,s):s.appendChild(b);break;case"closeLabel":Z.closeLabel=t.closeLabel,b.innerHTML=Z.closeLabel;break;case"a11y":var l,a,r=t.a11y;let e=!1;if("object"==typeof r)for(const c in r)r[c]&&Z.a11y[c]&&(Z.a11y[c]=r[c],e=!0);e&&(l=X("clr-open-label"),a=X("clr-swatch-label"),l.innerHTML=Z.a11y.open,a.innerHTML=Z.a11y.swatch,b.setAttribute("aria-label",Z.a11y.close),f.setAttribute("aria-label",Z.a11y.clear),y.setAttribute("aria-label",Z.a11y.hueSlider),v.setAttribute("aria-label",Z.a11y.alphaSlider),h.setAttribute("aria-label",Z.a11y.input),p.setAttribute("aria-label",Z.a11y.instruction));break;default:Z[o]=t[o]}}function e(e,t){"string"==typeof e&&"object"==typeof t&&(_[e]=t,L=!0)}function C(e){delete _[e],0===Object.keys(_).length&&(L=!1,e===n)&&T()}function r(e){if(L){var t,l=["el","wrap","rtl","inline","defaultColor","a11y"];for(t in _){const r=_[t];if(e.matches(t)){for(var a in n=t,c={},l.forEach(e=>delete r[e]),r)c[a]=Array.isArray(Z[a])?Z[a].slice():Z[a];S(r);break}}}}function T(){0<Object.keys(c).length&&(S(c),n="",c={})}function B(e){z(x,"click",e,e=>{Z.inline||(r(e.target),m=e.target,l=m.value,w=I(l),u.classList.add("clr-open"),M(),D(l),(Z.focusInput||Z.selectInput)&&(h.focus({preventScroll:!0}),h.setSelectionRange(m.selectionStart,m.selectionEnd)),Z.selectInput&&h.select(),(o||Z.swatchesOnly)&&U().shift().focus(),m.dispatchEvent(new Event("open",{bubbles:!0})))}),z(x,"input",e,e=>{var t=e.target.parentNode;t.classList.contains("clr-field")&&(t.style.color=e.target.value)})}function M(){if(u&&(m||Z.inline)){var r=d,o=E.scrollY,n=u.offsetWidth,c=u.offsetHeight,i={left:!1,top:!1};let e,l,t,a={x:0,y:0};if(r&&(e=E.getComputedStyle(r),l=parseFloat(e.marginTop),t=parseFloat(e.borderTopWidth),(a=r.getBoundingClientRect()).y+=t+o),!Z.inline){var s=m.getBoundingClientRect();let e=s.x,t=o+s.y+s.height+Z.margin;r?(e-=a.x,t-=a.y,e+n>r.clientWidth&&(e+=s.width-n,i.left=!0),t+c>r.clientHeight-l&&c+Z.margin<=s.top-(a.y-o)&&(t-=s.height+c+2*Z.margin,i.top=!0),t+=r.scrollTop):(e+n>x.documentElement.clientWidth&&(e+=s.width-n,i.left=!0),t+c-o>x.documentElement.clientHeight&&c+Z.margin<=s.top&&(t=o+s.y-c-Z.margin,i.top=!0)),u.classList.toggle("clr-left",i.left),u.classList.toggle("clr-top",i.top),u.style.left=e+"px",u.style.top=t+"px",a.x+=u.offsetLeft,a.y+=u.offsetTop}k={width:p.offsetWidth,height:p.offsetHeight,x:p.offsetLeft+a.x,y:p.offsetTop+a.y}}}function H(e){x.querySelectorAll(e).forEach(t=>{var l=t.parentNode;if(!l.classList.contains("clr-field")){var a=x.createElement("div");let e="clr-field";(Z.rtl||t.classList.contains("clr-rtl"))&&(e+=" clr-rtl"),a.innerHTML='<button type="button" aria-labelledby="clr-open-label"></button>',l.insertBefore(a,t),a.setAttribute("class",e),a.style.color=t.value,a.appendChild(t)}})}function O(e){if(m&&!Z.inline){const t=m;e&&(m=A,l!==t.value)&&(t.value=l,t.dispatchEvent(new Event("input",{bubbles:!0}))),setTimeout(()=>{l!==t.value&&t.dispatchEvent(new Event("change",{bubbles:!0}))}),u.classList.remove("clr-open"),L&&T(),t.dispatchEvent(new Event("close",{bubbles:!0})),Z.focusInput&&t.focus({preventScroll:!0}),m=A}}function D(e){var e=function(e){let t,l;Q.fillStyle="#000",Q.fillStyle=e,(t=/^((rgba)|rgb)[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)[\D]*?([\d.]+|$)/i.exec(Q.fillStyle))?(l={r:+t[3],g:+t[4],b:+t[5],a:+t[6]}).a=+l.a.toFixed(2):(t=Q.fillStyle.replace("#","").match(/.{2}/g).map(e=>parseInt(e,16)),l={r:t[0],g:t[1],b:t[2],a:1});return l}(e),t=function(e){var t=e.r/255,l=e.g/255,a=e.b/255,r=$.max(t,l,a),o=$.min(t,l,a),o=r-o,n=r;let c=0,i=0;o&&(r===t&&(c=(l-a)/o),r===l&&(c=2+(a-t)/o),r===a&&(c=4+(t-l)/o),r)&&(i=o/r);return{h:(c=$.floor(60*c))<0?c+360:c,s:$.round(100*i),v:$.round(100*n),a:e.a}}(e);R(t.s,t.v),q(e,t),y.value=t.h,u.style.color=`hsl(${t.h}, 100%, 50%)`,a.style.left=t.h/360*100+"%",i.style.left=k.width*t.s/100+"px",i.style.top=k.height-k.height*t.v/100+"px",v.value=100*t.a,g.style.left=100*t.a+"%"}function I(e){e=e.substring(0,3).toLowerCase();return"rgb"===e||"hsl"===e?e:"hex"}function N(e){e=e!==A?e:h.value,m&&(m.value=e,m.dispatchEvent(new Event("input",{bubbles:!0}))),Z.onChange&&Z.onChange.call(E,e,m),x.dispatchEvent(new CustomEvent("coloris:pick",{detail:{color:e,currentEl:m}}))}function j(e,t){var l,a,r,o,n,e={h:+y.value,s:e/k.width*100,v:100-t/k.height*100,a:v.value/100},c=(c=(t=e).s/100,l=t.v/100,c*=l,a=t.h/60,r=c*(1-$.abs(a%2-1)),c+=l-=c,r+=l,a=$.floor(a)%6,o=[c,r,l,l,r,c][a],n=[r,c,c,r,l,l][a],l=[l,l,r,c,c,r][a],{r:$.round(255*o),g:$.round(255*n),b:$.round(255*l),a:t.a});R(e.s,e.v),q(c,e),N()}function R(e,t){let l=Z.a11y.marker;e=+e.toFixed(1),t=+t.toFixed(1),l=(l=l.replace("{s}",e)).replace("{v}",t),i.setAttribute("aria-label",l)}function t(e){var t={pageX:((t=e).changedTouches?t.changedTouches[0]:t).pageX,pageY:(t.changedTouches?t.changedTouches[0]:t).pageY},l=t.pageX-k.x;let a=t.pageY-k.y;d&&(a+=d.scrollTop),W(l,a),e.preventDefault(),e.stopPropagation()}function W(e,t){e=e<0?0:e>k.width?k.width:e,t=t<0?0:t>k.height?k.height:t,i.style.left=e+"px",i.style.top=t+"px",j(e,t),i.focus()}function q(e,t){void 0===e&&(e={}),void 0===t&&(t={});let l=Z.format;for(const n in e)V[n]=e[n];for(const c in t)V[c]=t[c];var a,r=function(e){let t=e.r.toString(16),l=e.g.toString(16),a=e.b.toString(16),r="";e.r<16&&(t="0"+t);e.g<16&&(l="0"+l);e.b<16&&(a="0"+a);Z.alpha&&(e.a<1||Z.forceAlpha)&&(e=255*e.a|0,r=e.toString(16),e<16)&&(r="0"+r);return"#"+t+l+a+r}(V),o=r.substring(0,7);switch(i.style.color=o,g.parentNode.style.color=o,g.style.color=r,s.style.color=r,p.style.display="none",p.offsetHeight,p.style.display="",g.nextElementSibling.style.display="none",g.nextElementSibling.offsetHeight,g.nextElementSibling.style.display="","mixed"===l?l=1===V.a?"hex":"rgb":"auto"===l&&(l=w),l){case"hex":h.value=r;break;case"rgb":h.value=(a=V,!Z.alpha||1===a.a&&!Z.forceAlpha?`rgb(${a.r}, ${a.g}, ${a.b})`:`rgba(${a.r}, ${a.g}, ${a.b}, ${a.a})`);break;case"hsl":h.value=(a=function(e){var t=e.v/100,l=t*(1-e.s/100/2);let a;0<l&&l<1&&(a=$.round((t-l)/$.min(l,1-l)*100));return{h:e.h,s:a||0,l:$.round(100*l),a:e.a}}(V),!Z.alpha||1===a.a&&!Z.forceAlpha?`hsl(${a.h}, ${a.s}%, ${a.l}%)`:`hsla(${a.h}, ${a.s}%, ${a.l}%, ${a.a})`)}x.querySelector(`.clr-format [value="${l}"]`).checked=!0}function F(){var e=+y.value,t=+i.style.left.replace("px",""),l=+i.style.top.replace("px","");u.style.color=`hsl(${e}, 100%, 50%)`,a.style.left=e/360*100+"%",j(t,l)}function P(){var e=v.value/100;g.style.left=100*e+"%",q({a:e}),N()}function Y(){x.getElementById("clr-picker")||(d=A,(u=x.createElement("div")).setAttribute("id","clr-picker"),u.className="clr-picker",u.innerHTML=`<input id="clr-color-value" name="clr-color-value" class="clr-color" type="text" value="" spellcheck="false" aria-label="${Z.a11y.input}">`+`<div id="clr-color-area" class="clr-gradient" role="application" aria-label="${Z.a11y.instruction}">`+'<div id="clr-color-marker" class="clr-marker" tabindex="0"></div></div><div class="clr-hue">'+`<input id="clr-hue-slider" name="clr-hue-slider" type="range" min="0" max="360" step="1" aria-label="${Z.a11y.hueSlider}">`+'<div id="clr-hue-marker"></div></div><div class="clr-alpha">'+`<input id="clr-alpha-slider" name="clr-alpha-slider" type="range" min="0" max="100" step="1" aria-label="${Z.a11y.alphaSlider}">`+'<div id="clr-alpha-marker"></div><span></span></div><div id="clr-format" class="clr-format"><fieldset class="clr-segmented">'+`<legend>${Z.a11y.format}</legend>`+'<input id="clr-f1" type="radio" name="clr-format" value="hex"><label for="clr-f1">Hex</label><input id="clr-f2" type="radio" name="clr-format" value="rgb"><label for="clr-f2">RGB</label><input id="clr-f3" type="radio" name="clr-format" value="hsl"><label for="clr-f3">HSL</label><span></span></fieldset></div><div id="clr-swatches" class="clr-swatches"></div>'+`<button type="button" id="clr-clear" class="clr-clear" aria-label="${Z.a11y.clear}">${Z.clearLabel}</button>`+'<div id="clr-color-preview" class="clr-preview">'+`<button type="button" id="clr-close" class="clr-close" aria-label="${Z.a11y.close}">${Z.closeLabel}</button>`+"</div>"+`<span id="clr-open-label" hidden>${Z.a11y.open}</span>`+`<span id="clr-swatch-label" hidden>${Z.a11y.swatch}</span>`,x.body.appendChild(u),p=X("clr-color-area"),i=X("clr-color-marker"),f=X("clr-clear"),b=X("clr-close"),s=X("clr-color-preview"),h=X("clr-color-value"),y=X("clr-hue-slider"),a=X("clr-hue-marker"),v=X("clr-alpha-slider"),g=X("clr-alpha-marker"),B(Z.el),H(Z.el),z(u,"mousedown",e=>{u.classList.remove("clr-keyboard-nav"),e.stopPropagation()}),z(p,"mousedown",e=>{z(x,"mousemove",t)}),z(p,"touchstart",e=>{x.addEventListener("touchmove",t,{passive:!1})}),z(i,"mousedown",e=>{z(x,"mousemove",t)}),z(i,"touchstart",e=>{x.addEventListener("touchmove",t,{passive:!1})}),z(h,"change",e=>{var t=h.value;(m||Z.inline)&&N(""===t?t:D(t))}),z(f,"click",e=>{N(""),O()}),z(b,"click",e=>{N(),O()}),z(X("clr-format"),"click",".clr-format input",e=>{w=e.target.value,q(),N()}),z(u,"click",".clr-swatches button",e=>{D(e.target.textContent),N(),Z.swatchesOnly&&O()}),z(x,"mouseup",e=>{x.removeEventListener("mousemove",t)}),z(x,"touchend",e=>{x.removeEventListener("touchmove",t)}),z(x,"mousedown",e=>{o=!1,u.classList.remove("clr-keyboard-nav"),O()}),z(x,"keydown",e=>{var t,l=e.key,a=e.target,r=e.shiftKey;"Escape"===l?O(!0):["Tab","ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].includes(l)&&(o=!0,u.classList.add("clr-keyboard-nav")),"Tab"===l&&a.matches(".clr-picker *")&&(t=(l=U()).shift(),l=l.pop(),r&&a===t?(l.focus(),e.preventDefault()):r||a!==l||(t.focus(),e.preventDefault()))}),z(x,"click",".clr-field button",e=>{L&&T(),e.target.nextElementSibling.dispatchEvent(new Event("click",{bubbles:!0}))}),z(i,"keydown",e=>{var t,l={ArrowUp:[0,-1],ArrowDown:[0,1],ArrowLeft:[-1,0],ArrowRight:[1,0]};Object.keys(l).includes(e.key)&&([l,t]=[...l[e.key]],W(+i.style.left.replace("px","")+l,+i.style.top.replace("px","")+t),e.preventDefault())}),z(p,"click",t),z(y,"input",F),z(v,"input",P))}function U(){return Array.from(u.querySelectorAll("input, button")).filter(e=>!!e.offsetWidth)}function X(e){return x.getElementById(e)}function z(e,t,l,a){const r=Element.prototype.matches||Element.prototype.msMatchesSelector;"string"==typeof l?e.addEventListener(t,e=>{r.call(e.target,l)&&a.call(e.target,e)}):(a=l,e.addEventListener(t,a))}function G(e,t){t=t!==A?t:[],"loading"!==x.readyState?e(...t):x.addEventListener("DOMContentLoaded",()=>{e(...t)})}function K(e,t){m=t,l=m.value,r(t),w=I(e),M(),D(e),N(),l!==e&&m.dispatchEvent(new Event("change",{bubbles:!0}))}NodeList!==A&&NodeList.prototype&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach);var J=(()=>{const a={init:Y,set:S,wrap:H,close:O,setInstance:e,setColor:K,removeInstance:C,updatePosition:M,ready:G};function t(e){G(()=>{e&&("string"==typeof e?B:S)(e)})}for(const r in a)t[r]=function(){for(var e=arguments.length,t=new Array(e),l=0;l<e;l++)t[l]=arguments[l];G(a[r],t)};return G(()=>{E.addEventListener("resize",e=>{t.updatePosition()}),E.addEventListener("scroll",e=>{t.updatePosition()})}),t})();return J.coloris=J}});

package.json

 {
   "name": "@melloware/coloris",
-  "version": "0.21.1",
+  "version": "0.22.0",
   "description": "A lightweight and elegant color picker.",
@@ -5,0 +5,0 @@ "author": "Momo Bassit",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

152440

decreased by-1.43%

Lines of code

3112

decreased by-0.38%

No dependency changes