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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

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 };