npm - @thednp/color-picker - Versions diffs - 0.0.1-alpha2 → 0.0.2-alpha1 - Mend

@thednp/color-picker 0.0.1-alpha2 → 0.0.2-alpha1

Files changed (37) hide show

package/README.md +32 -15
package/dist/css/color-picker.css +38 -15
package/dist/css/color-picker.min.css +2 -2
package/dist/css/color-picker.rtl.css +38 -15
package/dist/css/color-picker.rtl.min.css +2 -2
package/dist/js/color-esm.js +1178 -0
package/dist/js/color-esm.min.js +2 -0
package/dist/js/color-palette-esm.js +1252 -0
package/dist/js/color-palette-esm.min.js +2 -0
package/dist/js/color-palette.js +1260 -0
package/dist/js/color-palette.min.js +2 -0
package/dist/js/color-picker-element-esm.js +433 -424
package/dist/js/color-picker-element-esm.min.js +2 -2
package/dist/js/color-picker-element.js +435 -426
package/dist/js/color-picker-element.min.js +2 -2
package/dist/js/color-picker-esm.js +745 -739
package/dist/js/color-picker-esm.min.js +2 -2
package/dist/js/color-picker.js +747 -741
package/dist/js/color-picker.min.js +2 -2
package/dist/js/color.js +1186 -0
package/dist/js/color.min.js +2 -0
package/package.json +19 -3
package/src/js/color-palette.js +28 -12
package/src/js/color-picker-element.js +8 -4
package/src/js/color-picker.js +84 -172
package/src/js/color.js +125 -131
package/src/js/util/getColorControls.js +3 -3
package/src/js/util/getColorForm.js +0 -1
package/src/js/util/getColorMenu.js +31 -33
package/src/js/util/roundPart.js +9 -0
package/src/js/util/setCSSProperties.js +12 -0
package/src/js/util/setMarkup.js +122 -0
package/src/js/util/tabindex.js +3 -0
package/src/js/util/version.js +6 -0
package/src/scss/color-picker.scss +35 -16
package/types/cp.d.ts +48 -20
package/src/js/util/templates.js +0 -10

package/dist/js/color-picker-element-esm.js CHANGED Viewed

@@ -1,5 +1,5 @@
 /*!
-* ColorPickerElement v0.0.1alpha2 (http://thednp.github.io/color-picker)
+* ColorPickerElement v0.0.2alpha1 (http://thednp.github.io/color-picker)
 * Copyright 2022 © thednp
 * Licensed under MIT (https://github.com/thednp/color-picker/blob/master/LICENSE)
 */
@@ -82,14 +82,9 @@ const setAttribute = (element, attribute, value) => element.setAttribute(attribu
 const getAttribute = (element, attribute) => element.getAttribute(attribute);
 /**
- * Returns the `document.head` or the `<head>` element.
- *
- * @param {(Node | HTMLElement | Element | globalThis)=} node
- * @returns {HTMLElement | HTMLHeadElement}
+ * A global namespace for `document.head`.
  */
-function getDocumentHead(node) {
-  return getDocument(node).head;
-}
+const { head: documentHead } = document;
 /**
  * Shortcut for `window.getComputedStyle(element).propertyName`
@@ -118,13 +113,31 @@ function getElementStyle(element, property) {
 // @ts-ignore
 const setElementStyle = (element, styles) => { ObjectAssign(element.style, styles); };
+/**
+ * Shortcut for `String.toLowerCase()`.
+ *
+ * @param {string} source input string
+ * @returns {string} lowercase output string
+ */
+const toLowerCase = (source) => source.toLowerCase();
 /**
  * A list of explicit default non-color values.
  */
 const nonColors = ['transparent', 'currentColor', 'inherit', 'revert', 'initial'];
+/**
+ * Round colour components, for all formats except HEX.
+ * @param {number} v one of the colour components
+ * @returns {number} the rounded number
+ */
+function roundPart(v) {
+  const floor = Math.floor(v);
+  return v - floor < 0.5 ? floor : Math.round(v);
+}
 // Color supported formats
-const COLOR_FORMAT = ['rgb', 'hex', 'hsl', 'hsb', 'hwb'];
+const COLOR_FORMAT = ['rgb', 'hex', 'hsl', 'hsv', 'hwb'];
 // Hue angles
 const ANGLES = 'deg|rad|grad|turn';
@@ -146,10 +159,17 @@ const CSS_UNIT = `(?:${CSS_NUMBER})|(?:${CSS_INTEGER})`;
 // Add angles to the mix
 const CSS_UNIT2 = `(?:${CSS_UNIT})|(?:${CSS_ANGLE})`;
+// Start & end
+const START_MATCH = '(?:[\\s|\\(\\s|\\s\\(\\s]+)?';
+const END_MATCH = '(?:[\\s|\\)\\s]+)?';
+// Components separation
+const SEP = '(?:[,|\\s]+)';
+const SEP2 = '(?:[,|\\/\\s]*)?';
 // Actual matching.
 // Parentheses and commas are optional, but not required.
 // Whitespace can take the place of commas or opening paren
-const PERMISSIVE_MATCH = `[\\s|\\(]+(${CSS_UNIT2})[,|\\s]+(${CSS_UNIT})[,|\\s]+(${CSS_UNIT})[,|\\s|\\/\\s]*(${CSS_UNIT})?\\s*\\)?`;
+const PERMISSIVE_MATCH = `${START_MATCH}(${CSS_UNIT2})${SEP}(${CSS_UNIT})${SEP}(${CSS_UNIT})${SEP2}(${CSS_UNIT})?${END_MATCH}`;
 const matchers = {
   CSS_UNIT: new RegExp(CSS_UNIT2),
@@ -182,23 +202,22 @@ function isPercentage(n) {
   return `${n}`.includes('%');
 }
-/**
- * Check to see if string passed in is an angle
- * @param {string} n testing string
- * @returns {boolean} the query result
- */
-function isAngle(n) {
-  return ANGLES.split('|').some((a) => `${n}`.includes(a));
-}
 /**
  * Check to see if string passed is a web safe colour.
+ * @see https://stackoverflow.com/a/16994164
  * @param {string} color a colour name, EG: *red*
  * @returns {boolean} the query result
  */
 function isColorName(color) {
-  return !['#', ...COLOR_FORMAT].some((s) => color.includes(s))
-    && !/[0-9]/.test(color);
+  if (nonColors.includes(color)
+    || ['#', ...COLOR_FORMAT].some((f) => color.includes(f))) return false;
+  return ['rgb(255, 255, 255)', 'rgb(0, 0, 0)'].every((c) => {
+    setElementStyle(documentHead, { color });
+    const computedColor = getElementStyle(documentHead, 'color');
+    setElementStyle(documentHead, { color: '' });
+    return computedColor !== c;
+  });
 }
 /**
@@ -219,15 +238,15 @@ function isValidCSSUnit(color) {
  */
 function bound01(N, max) {
   let n = N;
-  if (isOnePointZero(n)) n = '100%';
-  n = max === 360 ? n : Math.min(max, Math.max(0, parseFloat(n)));
+  if (isOnePointZero(N)) n = '100%';
-  // Handle hue angles
-  if (isAngle(N)) n = N.replace(new RegExp(ANGLES), '');
+  const processPercent = isPercentage(n);
+  n = max === 360
+    ? parseFloat(n)
+    : Math.min(max, Math.max(0, parseFloat(n)));
   // Automatically convert percentage into number
-  if (isPercentage(n)) n = parseInt(String(n * max), 10) / 100;
+  if (processPercent) n = (n * max) / 100;
   // Handle floating point rounding errors
   if (Math.abs(n - max) < 0.000001) {
@@ -238,11 +257,11 @@ function bound01(N, max) {
     // If n is a hue given in degrees,
     // wrap around out-of-range values into [0, 360] range
     // then convert into [0, 1].
-    n = (n < 0 ? (n % max) + max : n % max) / parseFloat(String(max));
+    n = (n < 0 ? (n % max) + max : n % max) / max;
   } else {
     // If n not a hue given in degrees
     // Convert into [0, 1] range if it isn't already.
-    n = (n % max) / parseFloat(String(max));
+    n = (n % max) / max;
   }
   return n;
 }
@@ -277,7 +296,6 @@ function clamp01(v) {
  * @returns {string}
  */
 function getRGBFromName(name) {
-  const documentHead = getDocumentHead();
   setElementStyle(documentHead, { color: name });
   const colorName = getElementStyle(documentHead, 'color');
   setElementStyle(documentHead, { color: '' });
@@ -290,7 +308,7 @@ function getRGBFromName(name) {
  * @returns {string} - the hexadecimal value
  */
 function convertDecimalToHex(d) {
-  return Math.round(d * 255).toString(16);
+  return roundPart(d * 255).toString(16);
 }
 /**
@@ -376,6 +394,36 @@ function hueToRgb(p, q, t) {
   return p;
 }
+/**
+ * Converts an HSL colour value to RGB.
+ *
+ * @param {number} h Hue Angle [0, 1]
+ * @param {number} s Saturation [0, 1]
+ * @param {number} l Lightness Angle [0, 1]
+ * @returns {CP.RGB} {r,g,b} object with [0, 255] ranged values
+ */
+function hslToRgb(h, s, l) {
+  let r = 0;
+  let g = 0;
+  let b = 0;
+  if (s === 0) {
+    // achromatic
+    g = l;
+    b = l;
+    r = l;
+  } else {
+    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+    const p = 2 * l - q;
+    r = hueToRgb(p, q, h + 1 / 3);
+    g = hueToRgb(p, q, h);
+    b = hueToRgb(p, q, h - 1 / 3);
+  }
+  [r, g, b] = [r, g, b].map((x) => x * 255);
+  return { r, g, b };
+}
 /**
 * Returns an HWB colour object from an RGB colour object.
 * @link https://www.w3.org/TR/css-color-4/#hwb-to-rgb
@@ -438,36 +486,6 @@ function hwbToRgb(H, W, B) {
   return { r, g, b };
 }
-/**
- * Converts an HSL colour value to RGB.
- *
- * @param {number} h Hue Angle [0, 1]
- * @param {number} s Saturation [0, 1]
- * @param {number} l Lightness Angle [0, 1]
- * @returns {CP.RGB} {r,g,b} object with [0, 255] ranged values
- */
-function hslToRgb(h, s, l) {
-  let r = 0;
-  let g = 0;
-  let b = 0;
-  if (s === 0) {
-    // achromatic
-    g = l;
-    b = l;
-    r = l;
-  } else {
-    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
-    const p = 2 * l - q;
-    r = hueToRgb(p, q, h + 1 / 3);
-    g = hueToRgb(p, q, h);
-    b = hueToRgb(p, q, h - 1 / 3);
-  }
-  [r, g, b] = [r, g, b].map((x) => x * 255);
-  return { r, g, b };
-}
 /**
  * Converts an RGB colour value to HSV.
  *
@@ -523,10 +541,11 @@ function hsvToRgb(H, S, V) {
   const q = v * (1 - f * s);
   const t = v * (1 - (1 - f) * s);
   const mod = i % 6;
-  const r = [v, q, p, p, t, v][mod];
-  const g = [t, v, v, q, p, p][mod];
-  const b = [p, p, t, v, v, q][mod];
-  return { r: r * 255, g: g * 255, b: b * 255 };
+  let r = [v, q, p, p, t, v][mod];
+  let g = [t, v, v, q, p, p][mod];
+  let b = [p, p, t, v, v, q][mod];
+  [r, g, b] = [r, g, b].map((n) => n * 255);
+  return { r, g, b };
 }
 /**
@@ -542,15 +561,15 @@ function hsvToRgb(H, S, V) {
  */
 function rgbToHex(r, g, b, allow3Char) {
   const hex = [
-    pad2(Math.round(r).toString(16)),
-    pad2(Math.round(g).toString(16)),
-    pad2(Math.round(b).toString(16)),
+    pad2(roundPart(r).toString(16)),
+    pad2(roundPart(g).toString(16)),
+    pad2(roundPart(b).toString(16)),
   ];
   // Return a 3 character hex if possible
   if (allow3Char && hex[0].charAt(0) === hex[0].charAt(1)
     && hex[1].charAt(0) === hex[1].charAt(1)
-      && hex[2].charAt(0) === hex[2].charAt(1)) {
+    && hex[2].charAt(0) === hex[2].charAt(1)) {
     return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0);
   }
@@ -569,48 +588,33 @@ function rgbToHex(r, g, b, allow3Char) {
  */
 function rgbaToHex(r, g, b, a, allow4Char) {
   const hex = [
-    pad2(Math.round(r).toString(16)),
-    pad2(Math.round(g).toString(16)),
-    pad2(Math.round(b).toString(16)),
+    pad2(roundPart(r).toString(16)),
+    pad2(roundPart(g).toString(16)),
+    pad2(roundPart(b).toString(16)),
     pad2(convertDecimalToHex(a)),
   ];
   // Return a 4 character hex if possible
   if (allow4Char && hex[0].charAt(0) === hex[0].charAt(1)
     && hex[1].charAt(0) === hex[1].charAt(1)
-      && hex[2].charAt(0) === hex[2].charAt(1)
-        && hex[3].charAt(0) === hex[3].charAt(1)) {
+    && hex[2].charAt(0) === hex[2].charAt(1)
+    && hex[3].charAt(0) === hex[3].charAt(1)) {
     return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0) + hex[3].charAt(0);
   }
   return hex.join('');
 }
-/**
- * Returns a colour object corresponding to a given number.
- * @param {number} color input number
- * @returns {CP.RGB} {r,g,b} object with [0, 255] ranged values
- */
-function numberInputToObject(color) {
-  /* eslint-disable no-bitwise */
-  return {
-    r: color >> 16,
-    g: (color & 0xff00) >> 8,
-    b: color & 0xff,
-  };
-  /* eslint-enable no-bitwise */
-}
 /**
  * Permissive string parsing. Take in a number of formats, and output an object
  * based on detected format. Returns {r,g,b} or {h,s,l} or {h,s,v}
  * @param {string} input colour value in any format
- * @returns {Record<string, (number | string)> | false} an object matching the RegExp
+ * @returns {Record<string, (number | string | boolean)> | false} an object matching the RegExp
  */
 function stringInputToObject(input) {
-  let color = input.trim().toLowerCase();
+  let color = toLowerCase(input.trim());
   if (color.length === 0) {
     return {
-      r: 0, g: 0, b: 0, a: 0,
+      r: 0, g: 0, b: 0, a: 1,
     };
   }
   let named = false;
@@ -618,11 +622,9 @@ function stringInputToObject(input) {
     color = getRGBFromName(color);
     named = true;
   } else if (nonColors.includes(color)) {
-    const isTransparent = color === 'transparent';
-    const rgb = isTransparent ? 0 : 255;
-    const a = isTransparent ? 0 : 1;
+    const a = color === 'transparent' ? 0 : 1;
     return {
-      r: rgb, g: rgb, b: rgb, a, format: 'rgb',
+      r: 0, g: 0, b: 0, a, format: 'rgb', ok: true,
     };
   }
@@ -662,7 +664,6 @@ function stringInputToObject(input) {
       g: parseIntFromHex(m2),
       b: parseIntFromHex(m3),
       a: convertHexToDecimal(m4),
-      // format: named ? 'rgb' : 'hex8',
       format: named ? 'rgb' : 'hex',
     };
   }
@@ -726,6 +727,7 @@ function stringInputToObject(input) {
 function inputToRGB(input) {
   let rgb = { r: 0, g: 0, b: 0 };
   let color = input;
+  /** @type {string | number} */
   let a = 1;
   let s = null;
   let v = null;
@@ -733,8 +735,11 @@ function inputToRGB(input) {
   let w = null;
   let b = null;
   let h = null;
+  let r = null;
+  let g = null;
   let ok = false;
-  let format = 'hex';
+  const inputFormat = typeof color === 'object' && color.format;
+  let format = inputFormat && COLOR_FORMAT.includes(inputFormat) ? inputFormat : 'rgb';
   if (typeof input === 'string') {
     // @ts-ignore -- this now is converted to object
@@ -743,7 +748,10 @@ function inputToRGB(input) {
   }
   if (typeof color === 'object') {
     if (isValidCSSUnit(color.r) && isValidCSSUnit(color.g) && isValidCSSUnit(color.b)) {
-      rgb = { r: color.r, g: color.g, b: color.b }; // RGB values in [0, 255] range
+      ({ r, g, b } = color);
+      // RGB values now are all in [0, 255] range
+      [r, g, b] = [r, g, b].map((n) => bound01(n, isPercentage(n) ? 100 : 255) * 255);
+      rgb = { r, g, b };
       ok = true;
       format = 'rgb';
     } else if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.v)) {
@@ -772,14 +780,17 @@ function inputToRGB(input) {
       format = 'hwb';
     }
     if (isValidCSSUnit(color.a)) {
-      a = color.a;
-      a = isPercentage(`${a}`) ? bound01(a, 100) : a;
+      a = color.a; // @ts-ignore -- `parseFloat` works with numbers too
+      a = isPercentage(`${a}`) || parseFloat(a) > 1 ? bound01(a, 100) : a;
     }
   }
+  if (typeof color === 'undefined') {
+    ok = true;
+  }
   return {
-    ok, // @ts-ignore
-    format: color.format || format,
+    ok,
+    format,
     r: Math.min(255, Math.max(rgb.r, 0)),
     g: Math.min(255, Math.max(rgb.g, 0)),
     b: Math.min(255, Math.max(rgb.b, 0)),
@@ -808,7 +819,8 @@ class Color {
       color = inputToRGB(color);
     }
     if (typeof color === 'number') {
-      color = numberInputToObject(color);
+      const len = `${color}`.length;
+      color = `#${(len === 2 ? '0' : '00')}${color}`;
     }
     const {
       r, g, b, a, ok, format,
@@ -818,7 +830,7 @@ class Color {
     const self = this;
     /** @type {CP.ColorInput} */
-    self.originalInput = color;
+    self.originalInput = input;
     /** @type {number} */
     self.r = r;
     /** @type {number} */
@@ -831,14 +843,6 @@ class Color {
     self.ok = ok;
     /** @type {CP.ColorFormats} */
     self.format = configFormat || format;
-    // Don't let the range of [0,255] come back in [0,1].
-    // Potentially lose a little bit of precision here, but will fix issues where
-    // .5 gets interpreted as half of the total, instead of half of 1
-    // If it was supposed to be 128, this was already taken care of by `inputToRgb`
-    if (r < 1) self.r = Math.round(r);
-    if (g < 1) self.g = Math.round(g);
-    if (b < 1) self.b = Math.round(b);
   }
   /**
@@ -854,7 +858,7 @@ class Color {
    * @returns {boolean} the query result
    */
   get isDark() {
-    return this.brightness < 128;
+    return this.brightness < 120;
   }
   /**
@@ -906,13 +910,9 @@ class Color {
     const {
       r, g, b, a,
     } = this;
-    const [R, G, B] = [r, g, b].map((x) => Math.round(x));
     return {
-      r: R,
-      g: G,
-      b: B,
-      a: Math.round(a * 100) / 100,
+      r, g, b, a: roundPart(a * 100) / 100,
     };
   }
@@ -926,10 +926,11 @@ class Color {
     const {
       r, g, b, a,
     } = this.toRgb();
+    const [R, G, B] = [r, g, b].map(roundPart);
     return a === 1
-      ? `rgb(${r}, ${g}, ${b})`
-      : `rgba(${r}, ${g}, ${b}, ${a})`;
+      ? `rgb(${R}, ${G}, ${B})`
+      : `rgba(${R}, ${G}, ${B}, ${a})`;
   }
   /**
@@ -942,9 +943,10 @@ class Color {
     const {
       r, g, b, a,
     } = this.toRgb();
-    const A = a === 1 ? '' : ` / ${Math.round(a * 100)}%`;
+    const [R, G, B] = [r, g, b].map(roundPart);
+    const A = a === 1 ? '' : ` / ${roundPart(a * 100)}%`;
-    return `rgb(${r} ${g} ${b}${A})`;
+    return `rgb(${R} ${G} ${B}${A})`;
   }
   /**
@@ -1037,10 +1039,10 @@ class Color {
     let {
       h, s, l, a,
     } = this.toHsl();
-    h = Math.round(h * 360);
-    s = Math.round(s * 100);
-    l = Math.round(l * 100);
-    a = Math.round(a * 100) / 100;
+    h = roundPart(h * 360);
+    s = roundPart(s * 100);
+    l = roundPart(l * 100);
+    a = roundPart(a * 100) / 100;
     return a === 1
       ? `hsl(${h}, ${s}%, ${l}%)`
@@ -1057,11 +1059,11 @@ class Color {
     let {
       h, s, l, a,
     } = this.toHsl();
-    h = Math.round(h * 360);
-    s = Math.round(s * 100);
-    l = Math.round(l * 100);
-    a = Math.round(a * 100);
-    const A = a < 100 ? ` / ${Math.round(a)}%` : '';
+    h = roundPart(h * 360);
+    s = roundPart(s * 100);
+    l = roundPart(l * 100);
+    a = roundPart(a * 100);
+    const A = a < 100 ? ` / ${roundPart(a)}%` : '';
     return `hsl(${h}deg ${s}% ${l}%${A})`;
   }
@@ -1088,11 +1090,11 @@ class Color {
     let {
       h, w, b, a,
     } = this.toHwb();
-    h = Math.round(h * 360);
-    w = Math.round(w * 100);
-    b = Math.round(b * 100);
-    a = Math.round(a * 100);
-    const A = a < 100 ? ` / ${Math.round(a)}%` : '';
+    h = roundPart(h * 360);
+    w = roundPart(w * 100);
+    b = roundPart(b * 100);
+    a = roundPart(a * 100);
+    const A = a < 100 ? ` / ${roundPart(a)}%` : '';
     return `hwb(${h}deg ${w}% ${b}%${A})`;
   }
@@ -1218,6 +1220,7 @@ ObjectAssign(Color, {
   isOnePointZero,
   isPercentage,
   isValidCSSUnit,
+  isColorName,
   pad2,
   clamp01,
   bound01,
@@ -1235,9 +1238,11 @@ ObjectAssign(Color, {
   hueToRgb,
   hwbToRgb,
   parseIntFromHex,
-  numberInputToObject,
   stringInputToObject,
   inputToRGB,
+  roundPart,
+  getElementStyle,
+  setElementStyle,
   ObjectAssign,
 });
@@ -1367,24 +1372,6 @@ const ariaValueText = 'aria-valuetext';
  */
 const ariaValueNow = 'aria-valuenow';
-/**
- * A global namespace for aria-haspopup.
- * @type {string}
- */
-const ariaHasPopup = 'aria-haspopup';
-/**
- * A global namespace for aria-hidden.
- * @type {string}
- */
-const ariaHidden = 'aria-hidden';
-/**
- * A global namespace for aria-labelledby.
- * @type {string}
- */
-const ariaLabelledBy = 'aria-labelledby';
 /**
  * A global namespace for `ArrowDown` key.
  * @type {string} e.which = 40 equivalent
@@ -1511,37 +1498,6 @@ const resizeEvent = 'resize';
  */
 const focusoutEvent = 'focusout';
-// @ts-ignore
-const { userAgentData: uaDATA } = navigator;
-/**
- * A global namespace for `userAgentData` object.
- */
-const userAgentData = uaDATA;
-const { userAgent: userAgentString } = navigator;
-/**
- * A global namespace for `navigator.userAgent` string.
- */
-const userAgent = userAgentString;
-const mobileBrands = /iPhone|iPad|iPod|Android/i;
-let isMobileCheck = false;
-if (userAgentData) {
-  isMobileCheck = userAgentData.brands
-    .some((/** @type {Record<String, any>} */x) => mobileBrands.test(x.brand));
-} else {
-  isMobileCheck = mobileBrands.test(userAgent);
-}
-/**
- * A global `boolean` for mobile detection.
- * @type {boolean}
- */
-const isMobile = isMobileCheck;
 /**
  * Returns the `document.documentElement` or the `<html>` element.
  *
@@ -1726,30 +1682,6 @@ function getElementsByClassName(selector, parent) {
   return lookUp.getElementsByClassName(selector);
 }
-/**
- * This is a shortie for `document.createElementNS` method
- * which allows you to create a new `HTMLElement` for a given `tagName`
- * or based on an object with specific non-readonly attributes:
- * `id`, `className`, `textContent`, `style`, etc.
- * @see https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS
- *
- * @param {string} namespace `namespaceURI` to associate with the new `HTMLElement`
- * @param {Record<string, string> | string} param `tagName` or object
- * @return {HTMLElement | Element} a new `HTMLElement` or `Element`
- */
-function createElementNS(namespace, param) {
-  if (typeof param === 'string') {
-    return getDocument().createElementNS(namespace, param);
-  }
-  const { tagName } = param;
-  const attr = { ...param };
-  const newElement = createElementNS(namespace, tagName);
-  delete attr.tagName;
-  ObjectAssign(newElement, attr);
-  return newElement;
-}
 /**
  * Shortcut for the `Element.dispatchEvent(Event)` method.
  *
@@ -1873,14 +1805,6 @@ function normalizeValue(value) {
  */
 const ObjectKeys = (obj) => Object.keys(obj);
-/**
- * Shortcut for `String.toLowerCase()`.
- *
- * @param {string} source input string
- * @returns {string} lowercase output string
- */
-const toLowerCase = (source) => source.toLowerCase();
 /**
  * Utility to normalize component options.
  *
@@ -1984,6 +1908,80 @@ function removeClass(element, classNAME) {
  */
 const removeAttribute = (element, attribute) => element.removeAttribute(attribute);
+/**
+ * @class
+ * Returns a color palette with a given set of parameters.
+ * @example
+ * new ColorPalette(0, 12, 10);
+ * // => { hue: 0, hueSteps: 12, lightSteps: 10, colors: Array<Color> }
+ */
+class ColorPalette {
+  /**
+   * The `hue` parameter is optional, which would be set to 0.
+   * @param {number[]} args represeinting hue, hueSteps, lightSteps
+   * * `args.hue` the starting Hue [0, 360]
+   * * `args.hueSteps` Hue Steps Count [5, 24]
+   * * `args.lightSteps` Lightness Steps Count [5, 12]
+   */
+  constructor(...args) {
+    let hue = 0;
+    let hueSteps = 12;
+    let lightSteps = 10;
+    let lightnessArray = [0.5];
+    if (args.length === 3) {
+      [hue, hueSteps, lightSteps] = args;
+    } else if (args.length === 2) {
+      [hueSteps, lightSteps] = args;
+      if ([hueSteps, lightSteps].some((n) => n < 1)) {
+        throw TypeError('ColorPalette: when 2 arguments used, both must be larger than 0.');
+      }
+    } else {
+      throw TypeError('ColorPalette requires minimum 2 arguments');
+    }
+    /** @type {Color[]} */
+    const colors = [];
+    const hueStep = 360 / hueSteps;
+    const half = roundPart((lightSteps - (lightSteps % 2 ? 1 : 0)) / 2);
+    const estimatedStep = 100 / (lightSteps + (lightSteps % 2 ? 0 : 1)) / 100;
+    let lightStep = 0.25;
+    lightStep = [4, 5].includes(lightSteps) ? 0.2 : lightStep;
+    lightStep = [6, 7].includes(lightSteps) ? 0.15 : lightStep;
+    lightStep = [8, 9].includes(lightSteps) ? 0.11 : lightStep;
+    lightStep = [10, 11].includes(lightSteps) ? 0.09 : lightStep;
+    lightStep = [12, 13].includes(lightSteps) ? 0.075 : lightStep;
+    lightStep = lightSteps > 13 ? estimatedStep : lightStep;
+    // light tints
+    for (let i = 1; i < half + 1; i += 1) {
+      lightnessArray = [...lightnessArray, (0.5 + lightStep * (i))];
+    }
+    // dark tints
+    for (let i = 1; i < lightSteps - half; i += 1) {
+      lightnessArray = [(0.5 - lightStep * (i)), ...lightnessArray];
+    }
+    // feed `colors` Array
+    for (let i = 0; i < hueSteps; i += 1) {
+      const currentHue = ((hue + i * hueStep) % 360) / 360;
+      lightnessArray.forEach((l) => {
+        colors.push(new Color({ h: currentHue, s: 1, l }));
+      });
+    }
+    this.hue = hue;
+    this.hueSteps = hueSteps;
+    this.lightSteps = lightSteps;
+    this.colors = colors;
+  }
+}
+ObjectAssign(ColorPalette, { Color });
 /** @type {Record<string, string>} */
 const colorPickerLabels = {
   pickerLabel: 'Colour Picker',
@@ -2011,6 +2009,22 @@ const colorPickerLabels = {
  */
 const colorNames = ['white', 'black', 'grey', 'red', 'orange', 'brown', 'gold', 'olive', 'yellow', 'lime', 'green', 'teal', 'cyan', 'blue', 'violet', 'magenta', 'pink'];
+const tabIndex = 'tabindex';
+/**
+ * Check if a string is valid JSON string.
+ * @param {string} str the string input
+ * @returns {boolean} the query result
+ */
+function isValidJSON(str) {
+  try {
+    JSON.parse(str);
+  } catch (e) {
+    return false;
+  }
+  return true;
+}
 /**
  * Shortcut for `String.toUpperCase()`.
  *
@@ -2019,6 +2033,48 @@ const colorNames = ['white', 'black', 'grey', 'red', 'orange', 'brown', 'gold',
  */
 const toUpperCase = (source) => source.toUpperCase();
+/**
+ * A global namespace for aria-haspopup.
+ * @type {string}
+ */
+const ariaHasPopup = 'aria-haspopup';
+/**
+ * A global namespace for aria-hidden.
+ * @type {string}
+ */
+const ariaHidden = 'aria-hidden';
+/**
+ * A global namespace for aria-labelledby.
+ * @type {string}
+ */
+const ariaLabelledBy = 'aria-labelledby';
+/**
+ * This is a shortie for `document.createElementNS` method
+ * which allows you to create a new `HTMLElement` for a given `tagName`
+ * or based on an object with specific non-readonly attributes:
+ * `id`, `className`, `textContent`, `style`, etc.
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS
+ *
+ * @param {string} namespace `namespaceURI` to associate with the new `HTMLElement`
+ * @param {Record<string, string> | string} param `tagName` or object
+ * @return {HTMLElement | Element} a new `HTMLElement` or `Element`
+ */
+function createElementNS(namespace, param) {
+  if (typeof param === 'string') {
+    return getDocument().createElementNS(namespace, param);
+  }
+  const { tagName } = param;
+  const attr = { ...param };
+  const newElement = createElementNS(namespace, tagName);
+  delete attr.tagName;
+  ObjectAssign(newElement, attr);
+  return newElement;
+}
 const vHidden = 'v-hidden';
 /**
@@ -2075,7 +2131,6 @@ function getColorForm(self) {
       max,
       step,
     });
-    // }
     colorForm.append(cInputLabel, cInput);
   });
   return colorForm;
@@ -2164,10 +2219,8 @@ function getColorControls(self) {
     const {
       i, c, l, min, max,
     } = template;
-    // const hidden = i === 2 && format === 'hwb' ? ' v-hidden' : '';
     const control = createElement({
       tagName: 'div',
-      // className: `color-control${hidden}`,
       className: 'color-control',
     });
     setAttribute(control, 'role', 'presentation');
@@ -2187,7 +2240,7 @@ function getColorControls(self) {
     setAttribute(knob, ariaLabel, l);
     setAttribute(knob, 'role', 'slider');
-    setAttribute(knob, 'tabindex', '0');
+    setAttribute(knob, tabIndex, '0');
     setAttribute(knob, ariaValueMin, `${min}`);
     setAttribute(knob, ariaValueMax, `${max}`);
     control.append(knob);
@@ -2198,64 +2251,14 @@ function getColorControls(self) {
 }
 /**
- * @class
- * Returns a color palette with a given set of parameters.
- * @example
- * new ColorPalette(0, 12, 10);
- * // => { hue: 0, hueSteps: 12, lightSteps: 10, colors: array }
+ * Helps setting CSS variables to the color-menu.
+ * @param {HTMLElement} element
+ * @param {Record<string,any>} props
  */
-class ColorPalette {
-  /**
-   * The `hue` parameter is optional, which would be set to 0.
-   * @param {number[]} args represeinting hue, hueSteps, lightSteps
-   * * `args.hue` the starting Hue [0, 360]
-   * * `args.hueSteps` Hue Steps Count [5, 13]
-   * * `args.lightSteps` Lightness Steps Count [8, 10]
-   */
-  constructor(...args) {
-    let hue = 0;
-    let hueSteps = 12;
-    let lightSteps = 10;
-    let lightnessArray = [0.5];
-    if (args.length === 3) {
-      [hue, hueSteps, lightSteps] = args;
-    } else if (args.length === 2) {
-      [hueSteps, lightSteps] = args;
-    } else {
-      throw TypeError('The ColorPalette requires minimum 2 arguments');
-    }
-    /** @type {string[]} */
-    const colors = [];
-    const hueStep = 360 / hueSteps;
-    const lightStep = 100 / (lightSteps + (lightSteps % 2 ? 0 : 1)) / 100;
-    const half = Math.round((lightSteps - (lightSteps % 2 ? 1 : 0)) / 2);
-    // light tints
-    for (let i = 0; i < half; i += 1) {
-      lightnessArray = [...lightnessArray, (0.5 + lightStep * (i + 1))];
-    }
-    // dark tints
-    for (let i = 0; i < lightSteps - half - 1; i += 1) {
-      lightnessArray = [(0.5 - lightStep * (i + 1)), ...lightnessArray];
-    }
-    // feed `colors` Array
-    for (let i = 0; i < hueSteps; i += 1) {
-      const currentHue = ((hue + i * hueStep) % 360) / 360;
-      lightnessArray.forEach((l) => {
-        colors.push(new Color({ h: currentHue, s: 1, l }).toHexString());
-      });
-    }
-    this.hue = hue;
-    this.hueSteps = hueSteps;
-    this.lightSteps = lightSteps;
-    this.colors = colors;
-  }
+function setCSSProperties(element, props) {
+  ObjectKeys(props).forEach((prop) => {
+    element.style.setProperty(prop, props[prop]);
+  });
 }
 /**
@@ -2275,68 +2278,64 @@ function getColorMenu(self, colorsSource, menuClass) {
   colorsArray = colorsArray instanceof Array ? colorsArray : [];
   const colorsCount = colorsArray.length;
   const { lightSteps } = isPalette ? colorsSource : { lightSteps: null };
-  let fit = lightSteps
-    || Math.max(...[5, 6, 7, 8, 9, 10].filter((x) => colorsCount > (x * 2) && !(colorsCount % x)));
-  fit = Number.isFinite(fit) ? fit : 5;
+  const fit = lightSteps || [9, 10].find((x) => colorsCount > x * 2 && !(colorsCount % x)) || 5;
   const isMultiLine = isOptionsMenu && colorsCount > fit;
-  let rowCountHover = 1;
-  rowCountHover = isMultiLine && colorsCount < 27 ? 2 : rowCountHover;
-  rowCountHover = colorsCount >= 27 ? 3 : rowCountHover;
-  rowCountHover = colorsCount >= 36 ? 4 : rowCountHover;
-  rowCountHover = colorsCount >= 45 ? 5 : rowCountHover;
-  const rowCount = rowCountHover - (colorsCount < 27 ? 1 : 2);
-  const isScrollable = isMultiLine && colorsCount > rowCountHover * fit;
+  let rowCountHover = 2;
+  rowCountHover = isMultiLine && colorsCount >= fit * 2 ? 3 : rowCountHover;
+  rowCountHover = colorsCount >= fit * 3 ? 4 : rowCountHover;
+  rowCountHover = colorsCount >= fit * 4 ? 5 : rowCountHover;
+  const rowCount = rowCountHover - (colorsCount < fit * 3 ? 1 : 2);
+  const isScrollable = isMultiLine && colorsCount > rowCount * fit;
   let finalClass = menuClass;
   finalClass += isScrollable ? ' scrollable' : '';
   finalClass += isMultiLine ? ' multiline' : '';
   const gap = isMultiLine ? '1px' : '0.25rem';
   let optionSize = isMultiLine ? 1.75 : 2;
-  optionSize = !(colorsCount % 10) && isMultiLine ? 1.5 : optionSize;
+  optionSize = fit > 5 && isMultiLine ? 1.5 : optionSize;
   const menuHeight = `${(rowCount || 1) * optionSize}rem`;
   const menuHeightHover = `calc(${rowCountHover} * ${optionSize}rem + ${rowCountHover - 1} * ${gap})`;
-  const gridTemplateColumns = `repeat(${fit}, ${optionSize}rem)`;
-  const gridTemplateRows = `repeat(auto-fill, ${optionSize}rem)`;
+  /** @type {HTMLUListElement} */
+  // @ts-ignore -- <UL> is an `HTMLElement`
   const menu = createElement({
     tagName: 'ul',
     className: finalClass,
   });
   setAttribute(menu, 'role', 'listbox');
-  setAttribute(menu, ariaLabel, `${menuLabel}`);
-  if (isOptionsMenu) {
-    if (isScrollable) {
-      const styleText = 'this.style.height=';
-      setAttribute(menu, 'onmouseout', `${styleText}'${menuHeight}'`);
-      setAttribute(menu, 'onmouseover', `${styleText}'${menuHeightHover}'`);
-    }
-    const menuStyle = {
-      height: isScrollable ? menuHeight : '', gridTemplateColumns, gridTemplateRows, gap,
-    };
-    setElementStyle(menu, menuStyle);
+  setAttribute(menu, ariaLabel, menuLabel);
+  if (isScrollable) {
+    setCSSProperties(menu, {
+      '--grid-item-size': `${optionSize}rem`,
+      '--grid-fit': fit,
+      '--grid-gap': gap,
+      '--grid-height': menuHeight,
+      '--grid-hover-height': menuHeightHover,
+    });
   }
   colorsArray.forEach((x) => {
-    const [value, label] = x.trim().split(':');
-    const xRealColor = new Color(value, format).toString();
-    const isActive = xRealColor === getAttribute(input, 'value');
+    let [value, label] = typeof x === 'string' ? x.trim().split(':') : [];
+    if (x instanceof Color) {
+      value = x.toHexString();
+      label = value;
+    }
+    const color = new Color(x instanceof Color ? x : value, format);
+    const isActive = color.toString() === getAttribute(input, 'value');
     const active = isActive ? ' active' : '';
     const option = createElement({
       tagName: 'li',
       className: `color-option${active}`,
-      innerText: `${label || x}`,
+      innerText: `${label || value}`,
     });
-    setAttribute(option, 'tabindex', '0');
+    setAttribute(option, tabIndex, '0');
     setAttribute(option, 'data-value', `${value}`);
     setAttribute(option, 'role', 'option');
     setAttribute(option, ariaSelected, isActive ? 'true' : 'false');
     if (isOptionsMenu) {
-      setElementStyle(option, {
-        width: `${optionSize}rem`, height: `${optionSize}rem`, backgroundColor: x,
-      });
+      setElementStyle(option, { backgroundColor: value });
     }
     menu.append(option);
@@ -2345,55 +2344,10 @@ function getColorMenu(self, colorsSource, menuClass) {
 }
 /**
- * Check if a string is valid JSON string.
- * @param {string} str the string input
- * @returns {boolean} the query result
- */
-function isValidJSON(str) {
-  try {
-    JSON.parse(str);
-  } catch (e) {
-    return false;
-  }
-  return true;
-}
-var version = "0.0.1alpha2";
-// @ts-ignore
-const Version = version;
-// ColorPicker GC
-// ==============
-const colorPickerString = 'color-picker';
-const colorPickerSelector = `[data-function="${colorPickerString}"]`;
-const colorPickerParentSelector = `.${colorPickerString},${colorPickerString}`;
-const colorPickerDefaults = {
-  componentLabels: colorPickerLabels,
-  colorLabels: colorNames,
-  format: 'rgb',
-  colorPresets: undefined,
-  colorKeywords: nonColors,
-};
-// ColorPicker Static Methods
-// ==========================
-/** @type {CP.GetInstance<ColorPicker>} */
-const getColorPickerInstance = (element) => getInstance(element, colorPickerString);
-/** @type {CP.InitCallback<ColorPicker>} */
-const initColorPicker = (element) => new ColorPicker(element);
-// ColorPicker Private Methods
-// ===========================
-/**
- * Generate HTML markup and update instance properties.
- * @param {ColorPicker} self
- */
-function initCallback(self) {
+* Generate HTML markup and update instance properties.
+* @param {CP.ColorPicker} self
+*/
+function setMarkup(self) {
   const {
     input, parent, format, id, componentLabels, colorKeywords, colorPresets,
   } = self;
@@ -2408,9 +2362,7 @@ function initCallback(self) {
   self.color = new Color(color, format);
   // set initial controls dimensions
-  // make the controls smaller on mobile
-  const dropClass = isMobile ? ' mobile' : '';
-  const formatString = format === 'hex' ? hexLabel : format.toUpperCase();
+  const formatString = format === 'hex' ? hexLabel : toUpperCase(format);
   const pickerBtn = createElement({
     id: `picker-btn-${id}`,
@@ -2427,7 +2379,7 @@ function initCallback(self) {
   const pickerDropdown = createElement({
     tagName: 'div',
-    className: `color-dropdown picker${dropClass}`,
+    className: 'color-dropdown picker',
   });
   setAttribute(pickerDropdown, ariaLabelledBy, `picker-btn-${id}`);
   setAttribute(pickerDropdown, 'role', 'group');
@@ -2443,7 +2395,7 @@ function initCallback(self) {
   if (colorKeywords || colorPresets) {
     const presetsDropdown = createElement({
       tagName: 'div',
-      className: `color-dropdown scrollable menu${dropClass}`,
+      className: 'color-dropdown scrollable menu',
     });
     // color presets
@@ -2463,7 +2415,7 @@ function initCallback(self) {
       tagName: 'button',
       className: 'menu-toggle btn-appearance',
     });
-    setAttribute(presetsBtn, 'tabindex', '-1');
+    setAttribute(presetsBtn, tabIndex, '-1');
     setAttribute(presetsBtn, ariaExpanded, 'false');
     setAttribute(presetsBtn, ariaHasPopup, 'true');
@@ -2490,9 +2442,40 @@ function initCallback(self) {
   if (colorKeywords && nonColors.includes(colorValue)) {
     self.value = colorValue;
   }
-  setAttribute(input, 'tabindex', '-1');
+  setAttribute(input, tabIndex, '-1');
 }
+var version = "0.0.2alpha1";
+// @ts-ignore
+const Version = version;
+// ColorPicker GC
+// ==============
+const colorPickerString = 'color-picker';
+const colorPickerSelector = `[data-function="${colorPickerString}"]`;
+const colorPickerParentSelector = `.${colorPickerString},${colorPickerString}`;
+const colorPickerDefaults = {
+  componentLabels: colorPickerLabels,
+  colorLabels: colorNames,
+  format: 'rgb',
+  colorPresets: false,
+  colorKeywords: false,
+};
+// ColorPicker Static Methods
+// ==========================
+/** @type {CP.GetInstance<ColorPicker>} */
+const getColorPickerInstance = (element) => getInstance(element, colorPickerString);
+/** @type {CP.InitCallback<ColorPicker>} */
+const initColorPicker = (element) => new ColorPicker(element);
+// ColorPicker Private Methods
+// ===========================
 /**
  * Add / remove `ColorPicker` main event listeners.
  * @param {ColorPicker} self
@@ -2591,8 +2574,19 @@ function showDropdown(self, dropdown) {
   addClass(dropdown, 'bottom');
   reflow(dropdown);
   addClass(dropdown, 'show');
   if (isPicker) self.update();
-  self.show();
+  if (!self.isOpen) {
+    toggleEventsOnShown(self, true);
+    self.updateDropdownPosition();
+    self.isOpen = true;
+    setAttribute(self.input, tabIndex, '0');
+    if (menuToggle) {
+      setAttribute(menuToggle, tabIndex, '0');
+    }
+  }
   setAttribute(nextBtn, ariaExpanded, 'true');
   if (activeBtn) {
     setAttribute(activeBtn, ariaExpanded, 'false');
@@ -2715,7 +2709,7 @@ class ColorPicker {
     self.handleKnobs = self.handleKnobs.bind(self);
     // generate markup
-    initCallback(self);
+    setMarkup(self);
     const [colorPicker, colorMenu] = getElementsByClassName('color-dropdown', parent);
     // set main elements
@@ -2762,7 +2756,7 @@ class ColorPicker {
   set value(v) { this.input.value = v; }
   /** Check if the colour presets include any non-colour. */
-  get includeNonColor() {
+  get hasNonColor() {
     return this.colorKeywords instanceof Array
       && this.colorKeywords.some((x) => nonColors.includes(x));
   }
@@ -2818,7 +2812,7 @@ class ColorPicker {
     const { r, g, b } = Color.hslToRgb(hue, 1, 0.5);
     const whiteGrad = 'linear-gradient(rgb(255,255,255) 0%, rgb(255,255,255) 100%)';
     const alpha = 1 - controlPositions.c3y / offsetHeight;
-    const roundA = Math.round((alpha * 100)) / 100;
+    const roundA = roundPart((alpha * 100)) / 100;
     if (format !== 'hsl') {
       const fill = new Color({
@@ -2836,7 +2830,7 @@ class ColorPicker {
       });
       setElementStyle(v2, { background: hueGradient });
     } else {
-      const saturation = Math.round((controlPositions.c2y / offsetHeight) * 100);
+      const saturation = roundPart((controlPositions.c2y / offsetHeight) * 100);
       const fill0 = new Color({
         r: 255, g: 0, b: 0, a: alpha,
       }).saturate(-saturation).toRgbString();
@@ -2911,7 +2905,7 @@ class ColorPicker {
     const self = this;
     const { activeElement } = getDocument(self.input);
-    if ((isMobile && self.dragElement)
+    if ((e.type === touchmoveEvent && self.dragElement)
       || (activeElement && self.controlKnobs.includes(activeElement))) {
       e.stopPropagation();
       e.preventDefault();
@@ -2991,12 +2985,12 @@ class ColorPicker {
     self.update();
-    if (currentActive) {
-      removeClass(currentActive, 'active');
-      removeAttribute(currentActive, ariaSelected);
-    }
     if (currentActive !== target) {
+      if (currentActive) {
+        removeClass(currentActive, 'active');
+        removeAttribute(currentActive, ariaSelected);
+      }
       addClass(target, 'active');
       setAttribute(target, ariaSelected, 'true');
@@ -3118,30 +3112,41 @@ class ColorPicker {
     if (![keyArrowUp, keyArrowDown, keyArrowLeft, keyArrowRight].includes(code)) return;
     e.preventDefault();
-    const { controlKnobs } = self;
+    const { format, controlKnobs, visuals } = self;
+    const { offsetWidth, offsetHeight } = visuals[0];
     const [c1, c2, c3] = controlKnobs;
     const { activeElement } = getDocument(c1);
     const currentKnob = controlKnobs.find((x) => x === activeElement);
+    const yRatio = offsetHeight / (format === 'hsl' ? 100 : 360);
     if (currentKnob) {
       let offsetX = 0;
       let offsetY = 0;
       if (target === c1) {
+        const xRatio = offsetWidth / (format === 'hsl' ? 360 : 100);
         if ([keyArrowLeft, keyArrowRight].includes(code)) {
-          self.controlPositions.c1x += code === keyArrowRight ? +1 : -1;
+          self.controlPositions.c1x += code === keyArrowRight ? xRatio : -xRatio;
         } else if ([keyArrowUp, keyArrowDown].includes(code)) {
-          self.controlPositions.c1y += code === keyArrowDown ? +1 : -1;
+          self.controlPositions.c1y += code === keyArrowDown ? yRatio : -yRatio;
         }
         offsetX = self.controlPositions.c1x;
         offsetY = self.controlPositions.c1y;
         self.changeControl1(offsetX, offsetY);
       } else if (target === c2) {
-        self.controlPositions.c2y += [keyArrowDown, keyArrowRight].includes(code) ? +1 : -1;
+        self.controlPositions.c2y += [keyArrowDown, keyArrowRight].includes(code)
+          ? yRatio
+          : -yRatio;
         offsetY = self.controlPositions.c2y;
         self.changeControl2(offsetY);
       } else if (target === c3) {
-        self.controlPositions.c3y += [keyArrowDown, keyArrowRight].includes(code) ? +1 : -1;
+        self.controlPositions.c3y += [keyArrowDown, keyArrowRight].includes(code)
+          ? yRatio
+          : -yRatio;
         offsetY = self.controlPositions.c3y;
         self.changeAlpha(offsetY);
       }
@@ -3163,7 +3168,7 @@ class ColorPicker {
     const [v1, v2, v3, v4] = format === 'rgb'
       ? inputs.map((i) => parseFloat(i.value) / (i === i4 ? 100 : 1))
       : inputs.map((i) => parseFloat(i.value) / (i !== i1 ? 100 : 360));
-    const isNonColorValue = self.includeNonColor && nonColors.includes(currentValue);
+    const isNonColorValue = self.hasNonColor && nonColors.includes(currentValue);
     const alpha = i4 ? v4 : (1 - controlPositions.c3y / offsetHeight);
     if (activeElement === input || (activeElement && inputs.includes(activeElement))) {
@@ -3422,11 +3427,11 @@ class ColorPicker {
     } = componentLabels;
     const { r, g, b } = color.toRgb();
     const [knob1, knob2, knob3] = controlKnobs;
-    const hue = Math.round(hsl.h * 360);
+    const hue = roundPart(hsl.h * 360);
     const alpha = color.a;
     const saturationSource = format === 'hsl' ? hsl.s : hsv.s;
-    const saturation = Math.round(saturationSource * 100);
-    const lightness = Math.round(hsl.l * 100);
+    const saturation = roundPart(saturationSource * 100);
+    const lightness = roundPart(hsl.l * 100);
     const hsvl = hsv.v * 100;
     let colorName;
@@ -3473,8 +3478,8 @@ class ColorPicker {
       setAttribute(knob2, ariaValueNow, `${saturation}`);
     } else if (format === 'hwb') {
       const { hwb } = self;
-      const whiteness = Math.round(hwb.w * 100);
-      const blackness = Math.round(hwb.b * 100);
+      const whiteness = roundPart(hwb.w * 100);
+      const blackness = roundPart(hwb.b * 100);
       colorLabel = `HWB: ${hue}°, ${whiteness}%, ${blackness}%`;
       setAttribute(knob1, ariaDescription, `${valueLabel}: ${colorLabel}. ${appearanceLabel}: ${colorName}.`);
       setAttribute(knob1, ariaValueText, `${whiteness}% & ${blackness}%`);
@@ -3490,7 +3495,7 @@ class ColorPicker {
       setAttribute(knob2, ariaValueNow, `${hue}`);
     }
-    const alphaValue = Math.round(alpha * 100);
+    const alphaValue = roundPart(alpha * 100);
     setAttribute(knob3, ariaValueText, `${alphaValue}%`);
     setAttribute(knob3, ariaValueNow, `${alphaValue}`);
@@ -3513,10 +3518,16 @@ class ColorPicker {
   /** Updates the control knobs actual positions. */
   updateControls() {
     const { controlKnobs, controlPositions } = this;
+    let {
+      c1x, c1y, c2y, c3y,
+    } = controlPositions;
     const [control1, control2, control3] = controlKnobs;
-    setElementStyle(control1, { transform: `translate3d(${controlPositions.c1x - 4}px,${controlPositions.c1y - 4}px,0)` });
-    setElementStyle(control2, { transform: `translate3d(0,${controlPositions.c2y - 4}px,0)` });
-    setElementStyle(control3, { transform: `translate3d(0,${controlPositions.c3y - 4}px,0)` });
+    // round control positions
+    [c1x, c1y, c2y, c3y] = [c1x, c1y, c2y, c3y].map(roundPart);
+    setElementStyle(control1, { transform: `translate3d(${c1x - 4}px,${c1y - 4}px,0)` });
+    setElementStyle(control2, { transform: `translate3d(0,${c2y - 4}px,0)` });
+    setElementStyle(control3, { transform: `translate3d(0,${c3y - 4}px,0)` });
   }
   /**
@@ -3529,16 +3540,16 @@ class ColorPicker {
       value: oldColor, format, inputs, color, hsl,
     } = self;
     const [i1, i2, i3, i4] = inputs;
-    const alpha = Math.round(color.a * 100);
-    const hue = Math.round(hsl.h * 360);
+    const alpha = roundPart(color.a * 100);
+    const hue = roundPart(hsl.h * 360);
     let newColor;
     if (format === 'hex') {
       newColor = self.color.toHexString(true);
       i1.value = self.hex;
     } else if (format === 'hsl') {
-      const lightness = Math.round(hsl.l * 100);
-      const saturation = Math.round(hsl.s * 100);
+      const lightness = roundPart(hsl.l * 100);
+      const saturation = roundPart(hsl.s * 100);
       newColor = self.color.toHslString();
       i1.value = `${hue}`;
       i2.value = `${saturation}`;
@@ -3546,8 +3557,8 @@ class ColorPicker {
       i4.value = `${alpha}`;
     } else if (format === 'hwb') {
       const { w, b } = self.hwb;
-      const whiteness = Math.round(w * 100);
-      const blackness = Math.round(b * 100);
+      const whiteness = roundPart(w * 100);
+      const blackness = roundPart(b * 100);
       newColor = self.color.toHwbString();
       i1.value = `${hue}`;
@@ -3555,7 +3566,8 @@ class ColorPicker {
       i3.value = `${blackness}`;
       i4.value = `${alpha}`;
     } else if (format === 'rgb') {
-      const { r, g, b } = self.rgb;
+      let { r, g, b } = self.rgb;
+      [r, g, b] = [r, g, b].map(roundPart);
       newColor = self.color.toRgbString();
       i1.value = `${r}`;
@@ -3619,7 +3631,7 @@ class ColorPicker {
     const self = this;
     const { colorPicker } = self;
-    if (!hasClass(colorPicker, 'show')) {
+    if (!['top', 'bottom'].some((c) => hasClass(colorPicker, c))) {
       showDropdown(self, colorPicker);
     }
   }
@@ -3636,21 +3648,6 @@ class ColorPicker {
     }
   }
-  /** Shows the `ColorPicker` dropdown or the presets menu. */
-  show() {
-    const self = this;
-    const { menuToggle } = self;
-    if (!self.isOpen) {
-      toggleEventsOnShown(self, true);
-      self.updateDropdownPosition();
-      self.isOpen = true;
-      setAttribute(self.input, 'tabindex', '0');
-      if (menuToggle) {
-        setAttribute(menuToggle, 'tabindex', '0');
-      }
-    }
-  }
   /**
    * Hides the currently open `ColorPicker` dropdown.
    * @param {boolean=} focusPrevented
@@ -3685,9 +3682,9 @@ class ColorPicker {
       if (!focusPrevented) {
         focus(pickerToggle);
       }
-      setAttribute(input, 'tabindex', '-1');
+      setAttribute(input, tabIndex, '-1');
       if (menuToggle) {
-        setAttribute(menuToggle, 'tabindex', '-1');
+        setAttribute(menuToggle, tabIndex, '-1');
       }
     }
   }
@@ -3701,7 +3698,10 @@ class ColorPicker {
     [...parent.children].forEach((el) => {
       if (el !== input) el.remove();
     });
+    removeAttribute(input, tabIndex);
     setElementStyle(input, { backgroundColor: '' });
     ['txt-light', 'txt-dark'].forEach((c) => removeClass(parent, c));
     Data.remove(input, colorPickerString);
   }
@@ -3709,10 +3709,16 @@ class ColorPicker {
 ObjectAssign(ColorPicker, {
   Color,
+  ColorPalette,
   Version,
   getInstance: getColorPickerInstance,
   init: initColorPicker,
   selector: colorPickerSelector,
+  // utils important for render
+  roundPart,
+  setElementStyle,
+  setAttribute,
+  getBoundingClientRect,
 });
 let CPID = 0;
@@ -3720,8 +3726,9 @@ let CPID = 0;
 /**
  * `ColorPickerElement` Web Component.
  * @example
- * <color-picker>
- *   <input type="text">
+ * <label for="UNIQUE_ID">Label</label>
+ * <color-picker data-format="hex" data-value="#075">
+ *   <input id="UNIQUE_ID" type="text" class="color-preview btn-appearance">
  * </color-picker>
  */
 class ColorPickerElement extends HTMLElement {
@@ -3802,9 +3809,11 @@ class ColorPickerElement extends HTMLElement {
 ObjectAssign(ColorPickerElement, {
   Color,
   ColorPicker,
+  ColorPalette,
+  getInstance: getColorPickerInstance,
   Version,
 });
 customElements.define('color-picker', ColorPickerElement);
-export default ColorPickerElement;
+export { ColorPickerElement as default };