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

package/dist/js/color-picker.js

@@ -1,13 +1,13 @@
 /*!
-* ColorPicker v0.0.1alpha2 (http://thednp.github.io/color-picker)
+* ColorPicker v0.0.2alpha1 (http://thednp.github.io/color-picker)
 * Copyright 2022 © thednp
 * Licensed under MIT (https://github.com/thednp/color-picker/blob/master/LICENSE)
 */
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
   typeof define === 'function' && define.amd ? define(factory) :
-  (global = global || self, global.ColorPicker = factory());
-}(this, (function () { 'use strict';
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.ColorPicker = factory());
+})(this, (function () { 'use strict';
 
   /** @type {Record<string, any>} */
   const EventRegistry = {};
@@ -135,24 +135,6 @@
    */
   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
@@ -279,37 +261,6 @@
    */
   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` or the `#document` element.
    * @see https://github.com/floating-ui/floating-ui
@@ -530,60 +481,6 @@
     return lookUp.getElementsByClassName(selector);
   }
 
-  /**
-   * Shortcut for `Object.assign()` static method.
-   * @param  {Record<string, any>} obj a target object
-   * @param  {Record<string, any>} source a source object
-   */
-  const ObjectAssign = (obj, source) => Object.assign(obj, source);
-
-  /**
-   * This is a shortie for `document.createElement` 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/createElement
-   *
-   * @param {Record<string, string> | string} param `tagName` or object
-   * @return {HTMLElement | Element} a new `HTMLElement` or `Element`
-   */
-  function createElement(param) {
-    if (typeof param === 'string') {
-      return getDocument().createElement(param);
-    }
-
-    const { tagName } = param;
-    const attr = { ...param };
-    const newElement = createElement(tagName);
-    delete attr.tagName;
-    ObjectAssign(newElement, attr);
-    return newElement;
-  }
-
-  /**
-   * 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.
    *
@@ -592,6 +489,13 @@
    */
   const dispatchEvent = (element, event) => element.dispatchEvent(event);
 
+  /**
+   * Shortcut for `Object.assign()` static method.
+   * @param  {Record<string, any>} obj a target object
+   * @param  {Record<string, any>} source a source object
+   */
+  const ObjectAssign = (obj, source) => Object.assign(obj, source);
+
   /** @type {Map<string, Map<HTMLElement | Element, Record<string, any>>>} */
   const componentData = new Map();
   /**
@@ -843,32 +747,10 @@
    */
   const removeAttribute = (element, attribute) => element.removeAttribute(attribute);
 
-  /** @type {Record<string, string>} */
-  const colorPickerLabels = {
-    pickerLabel: 'Colour Picker',
-    appearanceLabel: 'Colour Appearance',
-    valueLabel: 'Colour Value',
-    toggleLabel: 'Select Colour',
-    presetsLabel: 'Colour Presets',
-    defaultsLabel: 'Colour Defaults',
-    formatLabel: 'Format',
-    alphaLabel: 'Alpha',
-    hexLabel: 'Hexadecimal',
-    hueLabel: 'Hue',
-    whitenessLabel: 'Whiteness',
-    blacknessLabel: 'Blackness',
-    saturationLabel: 'Saturation',
-    lightnessLabel: 'Lightness',
-    redLabel: 'Red',
-    greenLabel: 'Green',
-    blueLabel: 'Blue',
-  };
-
   /**
-   * A list of 17 color names used for WAI-ARIA compliance.
-   * @type {string[]}
+   * A global namespace for `document.head`.
    */
-  const colorNames = ['white', 'black', 'grey', 'red', 'orange', 'brown', 'gold', 'olive', 'yellow', 'lime', 'green', 'teal', 'cyan', 'blue', 'violet', 'magenta', 'pink'];
+  const { head: documentHead } = document;
 
   /**
    * A list of explicit default non-color values.
@@ -876,284 +758,104 @@
   const nonColors = ['transparent', 'currentColor', 'inherit', 'revert', 'initial'];
 
   /**
-   * Shortcut for `String.toUpperCase()`.
-   *
-   * @param {string} source input string
-   * @returns {string} uppercase output string
+   * Round colour components, for all formats except HEX.
+   * @param {number} v one of the colour components
+   * @returns {number} the rounded number
    */
-  const toUpperCase = (source) => source.toUpperCase();
+  function roundPart(v) {
+    const floor = Math.floor(v);
+    return v - floor < 0.5 ? floor : Math.round(v);
+  }
 
-  const vHidden = 'v-hidden';
+  // Color supported formats
+  const COLOR_FORMAT = ['rgb', 'hex', 'hsl', 'hsv', 'hwb'];
 
-  /**
-   * Returns the color form for `ColorPicker`.
-   *
-   * @param {CP.ColorPicker} self the `ColorPicker` instance
-   * @returns {HTMLElement | Element} a new `<div>` element with color component `<input>`
-   */
-  function getColorForm(self) {
-    const { format, id, componentLabels } = self;
-    const colorForm = createElement({
-      tagName: 'div',
-      className: `color-form ${format}`,
-    });
+  // Hue angles
+  const ANGLES = 'deg|rad|grad|turn';
 
-    let components = ['hex'];
-    if (format === 'rgb') components = ['red', 'green', 'blue', 'alpha'];
-    else if (format === 'hsl') components = ['hue', 'saturation', 'lightness', 'alpha'];
-    else if (format === 'hwb') components = ['hue', 'whiteness', 'blackness', 'alpha'];
+  // <http://www.w3.org/TR/css3-values/#integers>
+  const CSS_INTEGER = '[-\\+]?\\d+%?';
 
-    components.forEach((c) => {
-      const [C] = format === 'hex' ? ['#'] : toUpperCase(c).split('');
-      const cID = `color_${format}_${c}_${id}`;
-      const formatLabel = componentLabels[`${c}Label`];
-      const cInputLabel = createElement({ tagName: 'label' });
-      setAttribute(cInputLabel, 'for', cID);
-      cInputLabel.append(
-        createElement({ tagName: 'span', ariaHidden: 'true', innerText: `${C}:` }),
-        createElement({ tagName: 'span', className: vHidden, innerText: formatLabel }),
-      );
-      const cInput = createElement({
-        tagName: 'input',
-        id: cID,
-        // name: cID, - prevent saving the value to a form
-        type: format === 'hex' ? 'text' : 'number',
-        value: c === 'alpha' ? '100' : '0',
-        className: `color-input ${c}`,
-      });
-      setAttribute(cInput, 'autocomplete', 'off');
-      setAttribute(cInput, 'spellcheck', 'false');
+  // Include CSS3 Module
+  // <http://www.w3.org/TR/css3-values/#number-value>
+  const CSS_NUMBER = '[-\\+]?\\d*\\.\\d+%?';
 
-      // alpha
-      let max = '100';
-      let step = '1';
-      if (c !== 'alpha') {
-        if (format === 'rgb') {
-          max = '255'; step = '1';
-        } else if (c === 'hue') {
-          max = '360'; step = '1';
-        }
-      }
-      ObjectAssign(cInput, {
-        min: '0',
-        max,
-        step,
-      });
-      // }
-      colorForm.append(cInputLabel, cInput);
-    });
-    return colorForm;
-  }
+  // Include CSS4 Module Hue degrees unit
+  // <https://www.w3.org/TR/css3-values/#angle-value>
+  const CSS_ANGLE = `[-\\+]?\\d*\\.?\\d+(?:${ANGLES})?`;
+
+  // Allow positive/negative integer/number.  Don't capture the either/or, just the entire outcome.
+  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 = `${START_MATCH}(${CSS_UNIT2})${SEP}(${CSS_UNIT})${SEP}(${CSS_UNIT})${SEP2}(${CSS_UNIT})?${END_MATCH}`;
+
+  const matchers = {
+    CSS_UNIT: new RegExp(CSS_UNIT2),
+    hwb: new RegExp(`hwb${PERMISSIVE_MATCH}`),
+    rgb: new RegExp(`rgb(?:a)?${PERMISSIVE_MATCH}`),
+    hsl: new RegExp(`hsl(?:a)?${PERMISSIVE_MATCH}`),
+    hsv: new RegExp(`hsv(?:a)?${PERMISSIVE_MATCH}`),
+    hex3: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
+    hex6: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,
+    hex4: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
+    hex8: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,
+  };
 
   /**
-   * A global namespace for aria-label.
-   * @type {string}
+   * Need to handle 1.0 as 100%, since once it is a number, there is no difference between it and 1
+   * <http://stackoverflow.com/questions/7422072/javascript-how-to-detect-number-as-a-decimal-including-1-0>
+   * @param {string} n testing number
+   * @returns {boolean} the query result
    */
-  const ariaLabel = 'aria-label';
+  function isOnePointZero(n) {
+    return `${n}`.includes('.') && parseFloat(n) === 1;
+  }
 
   /**
-   * A global namespace for aria-valuemin.
-   * @type {string}
+   * Check to see if string passed in is a percentage
+   * @param {string} n testing number
+   * @returns {boolean} the query result
    */
-  const ariaValueMin = 'aria-valuemin';
+  function isPercentage(n) {
+    return `${n}`.includes('%');
+  }
 
   /**
-   * A global namespace for aria-valuemax.
-   * @type {string}
+   * 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
    */
-  const ariaValueMax = 'aria-valuemax';
+  function isColorName(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;
+    });
+  }
 
   /**
-   * Returns all color controls for `ColorPicker`.
-   *
-   * @param {CP.ColorPicker} self the `ColorPicker` instance
-   * @returns {HTMLElement | Element} color controls
-   */
-  function getColorControls(self) {
-    const { format, componentLabels } = self;
-    const {
-      hueLabel, alphaLabel, lightnessLabel, saturationLabel,
-      whitenessLabel, blacknessLabel,
-    } = componentLabels;
-
-    const max1 = format === 'hsl' ? 360 : 100;
-    const max2 = format === 'hsl' ? 100 : 360;
-    const max3 = 100;
-
-    let ctrl1Label = format === 'hsl'
-      ? `${hueLabel} & ${lightnessLabel}`
-      : `${lightnessLabel} & ${saturationLabel}`;
-
-    ctrl1Label = format === 'hwb'
-      ? `${whitenessLabel} & ${blacknessLabel}`
-      : ctrl1Label;
-
-    const ctrl2Label = format === 'hsl'
-      ? `${saturationLabel}`
-      : `${hueLabel}`;
-
-    const colorControls = createElement({
-      tagName: 'div',
-      className: `color-controls ${format}`,
-    });
-
-    const colorPointer = 'color-pointer';
-    const colorSlider = 'color-slider';
-
-    const controls = [
-      {
-        i: 1,
-        c: colorPointer,
-        l: ctrl1Label,
-        min: 0,
-        max: max1,
-      },
-      {
-        i: 2,
-        c: colorSlider,
-        l: ctrl2Label,
-        min: 0,
-        max: max2,
-      },
-      {
-        i: 3,
-        c: colorSlider,
-        l: alphaLabel,
-        min: 0,
-        max: max3,
-      },
-    ];
-
-    controls.forEach((template) => {
-      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');
-
-      control.append(
-        createElement({
-          tagName: 'div',
-          className: `visual-control visual-control${i}`,
-        }),
-      );
-
-      const knob = createElement({
-        tagName: 'div',
-        className: `${c} knob`,
-        ariaLive: 'polite',
-      });
-
-      setAttribute(knob, ariaLabel, l);
-      setAttribute(knob, 'role', 'slider');
-      setAttribute(knob, 'tabindex', '0');
-      setAttribute(knob, ariaValueMin, `${min}`);
-      setAttribute(knob, ariaValueMax, `${max}`);
-      control.append(knob);
-      colorControls.append(control);
-    });
-
-    return colorControls;
-  }
-
-  /**
-   * Returns the `document.head` or the `<head>` element.
-   *
-   * @param {(Node | HTMLElement | Element | globalThis)=} node
-   * @returns {HTMLElement | HTMLHeadElement}
-   */
-  function getDocumentHead(node) {
-    return getDocument(node).head;
-  }
-
-  // Color supported formats
-  const COLOR_FORMAT = ['rgb', 'hex', 'hsl', 'hsb', 'hwb'];
-
-  // Hue angles
-  const ANGLES = 'deg|rad|grad|turn';
-
-  // <http://www.w3.org/TR/css3-values/#integers>
-  const CSS_INTEGER = '[-\\+]?\\d+%?';
-
-  // Include CSS3 Module
-  // <http://www.w3.org/TR/css3-values/#number-value>
-  const CSS_NUMBER = '[-\\+]?\\d*\\.\\d+%?';
-
-  // Include CSS4 Module Hue degrees unit
-  // <https://www.w3.org/TR/css3-values/#angle-value>
-  const CSS_ANGLE = `[-\\+]?\\d*\\.?\\d+(?:${ANGLES})?`;
-
-  // Allow positive/negative integer/number.  Don't capture the either/or, just the entire outcome.
-  const CSS_UNIT = `(?:${CSS_NUMBER})|(?:${CSS_INTEGER})`;
-
-  // Add angles to the mix
-  const CSS_UNIT2 = `(?:${CSS_UNIT})|(?:${CSS_ANGLE})`;
-
-  // 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 matchers = {
-    CSS_UNIT: new RegExp(CSS_UNIT2),
-    hwb: new RegExp(`hwb${PERMISSIVE_MATCH}`),
-    rgb: new RegExp(`rgb(?:a)?${PERMISSIVE_MATCH}`),
-    hsl: new RegExp(`hsl(?:a)?${PERMISSIVE_MATCH}`),
-    hsv: new RegExp(`hsv(?:a)?${PERMISSIVE_MATCH}`),
-    hex3: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
-    hex6: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,
-    hex4: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
-    hex8: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,
-  };
-
-  /**
-   * Need to handle 1.0 as 100%, since once it is a number, there is no difference between it and 1
-   * <http://stackoverflow.com/questions/7422072/javascript-how-to-detect-number-as-a-decimal-including-1-0>
-   * @param {string} n testing number
-   * @returns {boolean} the query result
-   */
-  function isOnePointZero(n) {
-    return `${n}`.includes('.') && parseFloat(n) === 1;
-  }
-
-  /**
-   * Check to see if string passed in is a percentage
-   * @param {string} n testing number
-   * @returns {boolean} the query result
-   */
-  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.
-   * @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);
-  }
-
-  /**
-   * Check to see if it looks like a CSS unit
-   * (see `matchers` above for definition).
-   * @param {string | number} color testing value
-   * @returns {boolean} the query result
+   * Check to see if it looks like a CSS unit
+   * (see `matchers` above for definition).
+   * @param {string | number} color testing value
+   * @returns {boolean} the query result
    */
   function isValidCSSUnit(color) {
     return Boolean(matchers.CSS_UNIT.exec(String(color)));
@@ -1167,15 +869,15 @@
    */
   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) {
@@ -1186,11 +888,11 @@
       // 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;
   }
@@ -1225,7 +927,6 @@
    * @returns {string}
    */
   function getRGBFromName(name) {
-    const documentHead = getDocumentHead();
     setElementStyle(documentHead, { color: name });
     const colorName = getElementStyle(documentHead, 'color');
     setElementStyle(documentHead, { color: '' });
@@ -1238,7 +939,7 @@
    * @returns {string} - the hexadecimal value
    */
   function convertDecimalToHex(d) {
-    return Math.round(d * 255).toString(16);
+    return roundPart(d * 255).toString(16);
   }
 
   /**
@@ -1324,6 +1025,36 @@
     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
@@ -1386,36 +1117,6 @@
     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.
    *
@@ -1471,10 +1172,11 @@
     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 };
   }
 
   /**
@@ -1490,15 +1192,15 @@
    */
   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);
     }
 
@@ -1517,48 +1219,33 @@
    */
   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;
@@ -1566,11 +1253,9 @@
       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,
       };
     }
 
@@ -1610,7 +1295,6 @@
         g: parseIntFromHex(m2),
         b: parseIntFromHex(m3),
         a: convertHexToDecimal(m4),
-        // format: named ? 'rgb' : 'hex8',
         format: named ? 'rgb' : 'hex',
       };
     }
@@ -1674,6 +1358,7 @@
   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;
@@ -1681,8 +1366,11 @@
     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
@@ -1691,7 +1379,10 @@
     }
     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)) {
@@ -1720,14 +1411,17 @@
         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)),
@@ -1756,7 +1450,8 @@
         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,
@@ -1766,7 +1461,7 @@
       const self = this;
 
       /** @type {CP.ColorInput} */
-      self.originalInput = color;
+      self.originalInput = input;
       /** @type {number} */
       self.r = r;
       /** @type {number} */
@@ -1779,14 +1474,6 @@
       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);
     }
 
     /**
@@ -1802,7 +1489,7 @@
      * @returns {boolean} the query result
      */
     get isDark() {
-      return this.brightness < 128;
+      return this.brightness < 120;
     }
 
     /**
@@ -1854,13 +1541,9 @@
       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,
       };
     }
 
@@ -1874,10 +1557,11 @@
       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})`;
     }
 
     /**
@@ -1890,9 +1574,10 @@
       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})`;
     }
 
     /**
@@ -1985,10 +1670,10 @@
       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}%)`
@@ -2005,11 +1690,11 @@
       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})`;
     }
@@ -2036,11 +1721,11 @@
       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})`;
     }
@@ -2146,108 +1831,426 @@
       const self = this;
       const { format } = self;
 
-      if (format === 'hex') return self.toHexString(allowShort);
-      if (format === 'hsl') return self.toHslString();
-      if (format === 'hwb') return self.toHwbString();
+      if (format === 'hex') return self.toHexString(allowShort);
+      if (format === 'hsl') return self.toHslString();
+      if (format === 'hwb') return self.toHwbString();
+
+      return self.toRgbString();
+    }
+  }
+
+  ObjectAssign(Color, {
+    ANGLES,
+    CSS_ANGLE,
+    CSS_INTEGER,
+    CSS_NUMBER,
+    CSS_UNIT,
+    CSS_UNIT2,
+    PERMISSIVE_MATCH,
+    matchers,
+    isOnePointZero,
+    isPercentage,
+    isValidCSSUnit,
+    isColorName,
+    pad2,
+    clamp01,
+    bound01,
+    boundAlpha,
+    getRGBFromName,
+    convertHexToDecimal,
+    convertDecimalToHex,
+    rgbToHsl,
+    rgbToHex,
+    rgbToHsv,
+    rgbToHwb,
+    rgbaToHex,
+    hslToRgb,
+    hsvToRgb,
+    hueToRgb,
+    hwbToRgb,
+    parseIntFromHex,
+    stringInputToObject,
+    inputToRGB,
+    roundPart,
+    getElementStyle,
+    setElementStyle,
+    ObjectAssign,
+  });
+
+  /**
+   * @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',
+    appearanceLabel: 'Colour Appearance',
+    valueLabel: 'Colour Value',
+    toggleLabel: 'Select Colour',
+    presetsLabel: 'Colour Presets',
+    defaultsLabel: 'Colour Defaults',
+    formatLabel: 'Format',
+    alphaLabel: 'Alpha',
+    hexLabel: 'Hexadecimal',
+    hueLabel: 'Hue',
+    whitenessLabel: 'Whiteness',
+    blacknessLabel: 'Blackness',
+    saturationLabel: 'Saturation',
+    lightnessLabel: 'Lightness',
+    redLabel: 'Red',
+    greenLabel: 'Green',
+    blueLabel: 'Blue',
+  };
+
+  /**
+   * A list of 17 color names used for WAI-ARIA compliance.
+   * @type {string[]}
+   */
+  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()`.
+   *
+   * @param {string} source input string
+   * @returns {string} uppercase output string
+   */
+  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.createElement` 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/createElement
+   *
+   * @param {Record<string, string> | string} param `tagName` or object
+   * @return {HTMLElement | Element} a new `HTMLElement` or `Element`
+   */
+  function createElement(param) {
+    if (typeof param === 'string') {
+      return getDocument().createElement(param);
+    }
+
+    const { tagName } = param;
+    const attr = { ...param };
+    const newElement = createElement(tagName);
+    delete attr.tagName;
+    ObjectAssign(newElement, attr);
+    return newElement;
+  }
+
+  /**
+   * 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';
+
+  /**
+   * Returns the color form for `ColorPicker`.
+   *
+   * @param {CP.ColorPicker} self the `ColorPicker` instance
+   * @returns {HTMLElement | Element} a new `<div>` element with color component `<input>`
+   */
+  function getColorForm(self) {
+    const { format, id, componentLabels } = self;
+    const colorForm = createElement({
+      tagName: 'div',
+      className: `color-form ${format}`,
+    });
+
+    let components = ['hex'];
+    if (format === 'rgb') components = ['red', 'green', 'blue', 'alpha'];
+    else if (format === 'hsl') components = ['hue', 'saturation', 'lightness', 'alpha'];
+    else if (format === 'hwb') components = ['hue', 'whiteness', 'blackness', 'alpha'];
+
+    components.forEach((c) => {
+      const [C] = format === 'hex' ? ['#'] : toUpperCase(c).split('');
+      const cID = `color_${format}_${c}_${id}`;
+      const formatLabel = componentLabels[`${c}Label`];
+      const cInputLabel = createElement({ tagName: 'label' });
+      setAttribute(cInputLabel, 'for', cID);
+      cInputLabel.append(
+        createElement({ tagName: 'span', ariaHidden: 'true', innerText: `${C}:` }),
+        createElement({ tagName: 'span', className: vHidden, innerText: formatLabel }),
+      );
+      const cInput = createElement({
+        tagName: 'input',
+        id: cID,
+        // name: cID, - prevent saving the value to a form
+        type: format === 'hex' ? 'text' : 'number',
+        value: c === 'alpha' ? '100' : '0',
+        className: `color-input ${c}`,
+      });
+      setAttribute(cInput, 'autocomplete', 'off');
+      setAttribute(cInput, 'spellcheck', 'false');
+
+      // alpha
+      let max = '100';
+      let step = '1';
+      if (c !== 'alpha') {
+        if (format === 'rgb') {
+          max = '255'; step = '1';
+        } else if (c === 'hue') {
+          max = '360'; step = '1';
+        }
+      }
+      ObjectAssign(cInput, {
+        min: '0',
+        max,
+        step,
+      });
+      colorForm.append(cInputLabel, cInput);
+    });
+    return colorForm;
+  }
+
+  /**
+   * A global namespace for aria-label.
+   * @type {string}
+   */
+  const ariaLabel = 'aria-label';
+
+  /**
+   * A global namespace for aria-valuemin.
+   * @type {string}
+   */
+  const ariaValueMin = 'aria-valuemin';
+
+  /**
+   * A global namespace for aria-valuemax.
+   * @type {string}
+   */
+  const ariaValueMax = 'aria-valuemax';
+
+  /**
+   * Returns all color controls for `ColorPicker`.
+   *
+   * @param {CP.ColorPicker} self the `ColorPicker` instance
+   * @returns {HTMLElement | Element} color controls
+   */
+  function getColorControls(self) {
+    const { format, componentLabels } = self;
+    const {
+      hueLabel, alphaLabel, lightnessLabel, saturationLabel,
+      whitenessLabel, blacknessLabel,
+    } = componentLabels;
+
+    const max1 = format === 'hsl' ? 360 : 100;
+    const max2 = format === 'hsl' ? 100 : 360;
+    const max3 = 100;
+
+    let ctrl1Label = format === 'hsl'
+      ? `${hueLabel} & ${lightnessLabel}`
+      : `${lightnessLabel} & ${saturationLabel}`;
+
+    ctrl1Label = format === 'hwb'
+      ? `${whitenessLabel} & ${blacknessLabel}`
+      : ctrl1Label;
 
-      return self.toRgbString();
-    }
-  }
+    const ctrl2Label = format === 'hsl'
+      ? `${saturationLabel}`
+      : `${hueLabel}`;
 
-  ObjectAssign(Color, {
-    ANGLES,
-    CSS_ANGLE,
-    CSS_INTEGER,
-    CSS_NUMBER,
-    CSS_UNIT,
-    CSS_UNIT2,
-    PERMISSIVE_MATCH,
-    matchers,
-    isOnePointZero,
-    isPercentage,
-    isValidCSSUnit,
-    pad2,
-    clamp01,
-    bound01,
-    boundAlpha,
-    getRGBFromName,
-    convertHexToDecimal,
-    convertDecimalToHex,
-    rgbToHsl,
-    rgbToHex,
-    rgbToHsv,
-    rgbToHwb,
-    rgbaToHex,
-    hslToRgb,
-    hsvToRgb,
-    hueToRgb,
-    hwbToRgb,
-    parseIntFromHex,
-    numberInputToObject,
-    stringInputToObject,
-    inputToRGB,
-    ObjectAssign,
-  });
+    const colorControls = createElement({
+      tagName: 'div',
+      className: `color-controls ${format}`,
+    });
 
-  /**
-   * @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 }
-   */
-  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];
+    const colorPointer = 'color-pointer';
+    const colorSlider = 'color-slider';
 
-      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');
-      }
+    const controls = [
+      {
+        i: 1,
+        c: colorPointer,
+        l: ctrl1Label,
+        min: 0,
+        max: max1,
+      },
+      {
+        i: 2,
+        c: colorSlider,
+        l: ctrl2Label,
+        min: 0,
+        max: max2,
+      },
+      {
+        i: 3,
+        c: colorSlider,
+        l: alphaLabel,
+        min: 0,
+        max: max3,
+      },
+    ];
 
-      /** @type {string[]} */
-      const colors = [];
+    controls.forEach((template) => {
+      const {
+        i, c, l, min, max,
+      } = template;
+      const control = createElement({
+        tagName: 'div',
+        className: 'color-control',
+      });
+      setAttribute(control, 'role', 'presentation');
 
-      const hueStep = 360 / hueSteps;
-      const lightStep = 100 / (lightSteps + (lightSteps % 2 ? 0 : 1)) / 100;
-      const half = Math.round((lightSteps - (lightSteps % 2 ? 1 : 0)) / 2);
+      control.append(
+        createElement({
+          tagName: 'div',
+          className: `visual-control visual-control${i}`,
+        }),
+      );
 
-      // light tints
-      for (let i = 0; i < half; i += 1) {
-        lightnessArray = [...lightnessArray, (0.5 + lightStep * (i + 1))];
-      }
+      const knob = createElement({
+        tagName: 'div',
+        className: `${c} knob`,
+        ariaLive: 'polite',
+      });
 
-      // dark tints
-      for (let i = 0; i < lightSteps - half - 1; i += 1) {
-        lightnessArray = [(0.5 - lightStep * (i + 1)), ...lightnessArray];
-      }
+      setAttribute(knob, ariaLabel, l);
+      setAttribute(knob, 'role', 'slider');
+      setAttribute(knob, tabIndex, '0');
+      setAttribute(knob, ariaValueMin, `${min}`);
+      setAttribute(knob, ariaValueMax, `${max}`);
+      control.append(knob);
+      colorControls.append(control);
+    });
 
-      // 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());
-        });
-      }
+    return colorControls;
+  }
 
-      this.hue = hue;
-      this.hueSteps = hueSteps;
-      this.lightSteps = lightSteps;
-      this.colors = colors;
-    }
+  /**
+   * Helps setting CSS variables to the color-menu.
+   * @param {HTMLElement} element
+   * @param {Record<string,any>} props
+   */
+  function setCSSProperties(element, props) {
+    ObjectKeys(props).forEach((prop) => {
+      element.style.setProperty(prop, props[prop]);
+    });
   }
 
   /**
@@ -2267,68 +2270,64 @@
     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);
@@ -2337,55 +2336,10 @@
   }
 
   /**
-   * 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;
@@ -2400,9 +2354,7 @@
     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}`,
@@ -2419,7 +2371,7 @@
 
     const pickerDropdown = createElement({
       tagName: 'div',
-      className: `color-dropdown picker${dropClass}`,
+      className: 'color-dropdown picker',
     });
     setAttribute(pickerDropdown, ariaLabelledBy, `picker-btn-${id}`);
     setAttribute(pickerDropdown, 'role', 'group');
@@ -2435,7 +2387,7 @@
     if (colorKeywords || colorPresets) {
       const presetsDropdown = createElement({
         tagName: 'div',
-        className: `color-dropdown scrollable menu${dropClass}`,
+        className: 'color-dropdown scrollable menu',
       });
 
       // color presets
@@ -2455,7 +2407,7 @@
         tagName: 'button',
         className: 'menu-toggle btn-appearance',
       });
-      setAttribute(presetsBtn, 'tabindex', '-1');
+      setAttribute(presetsBtn, tabIndex, '-1');
       setAttribute(presetsBtn, ariaExpanded, 'false');
       setAttribute(presetsBtn, ariaHasPopup, 'true');
 
@@ -2482,9 +2434,40 @@
     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
@@ -2583,8 +2566,19 @@
     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');
@@ -2707,7 +2701,7 @@
       self.handleKnobs = self.handleKnobs.bind(self);
 
       // generate markup
-      initCallback(self);
+      setMarkup(self);
 
       const [colorPicker, colorMenu] = getElementsByClassName('color-dropdown', parent);
       // set main elements
@@ -2754,7 +2748,7 @@
     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));
     }
@@ -2810,7 +2804,7 @@
       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({
@@ -2828,7 +2822,7 @@
         });
         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();
@@ -2903,7 +2897,7 @@
       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();
@@ -2983,12 +2977,12 @@
 
       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');
 
@@ -3110,30 +3104,41 @@
       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);
         }
@@ -3155,7 +3160,7 @@
       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))) {
@@ -3414,11 +3419,11 @@
       } = 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;
 
@@ -3465,8 +3470,8 @@
         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}%`);
@@ -3482,7 +3487,7 @@
         setAttribute(knob2, ariaValueNow, `${hue}`);
       }
 
-      const alphaValue = Math.round(alpha * 100);
+      const alphaValue = roundPart(alpha * 100);
       setAttribute(knob3, ariaValueText, `${alphaValue}%`);
       setAttribute(knob3, ariaValueNow, `${alphaValue}`);
 
@@ -3505,10 +3510,16 @@
     /** 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)` });
     }
 
     /**
@@ -3521,16 +3532,16 @@
         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}`;
@@ -3538,8 +3549,8 @@
         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}`;
@@ -3547,7 +3558,8 @@
         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}`;
@@ -3611,7 +3623,7 @@
       const self = this;
       const { colorPicker } = self;
 
-      if (!hasClass(colorPicker, 'show')) {
+      if (!['top', 'bottom'].some((c) => hasClass(colorPicker, c))) {
         showDropdown(self, colorPicker);
       }
     }
@@ -3628,21 +3640,6 @@
       }
     }
 
-    /** 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
@@ -3677,9 +3674,9 @@
         if (!focusPrevented) {
           focus(pickerToggle);
         }
-        setAttribute(input, 'tabindex', '-1');
+        setAttribute(input, tabIndex, '-1');
         if (menuToggle) {
-          setAttribute(menuToggle, 'tabindex', '-1');
+          setAttribute(menuToggle, tabIndex, '-1');
         }
       }
     }
@@ -3693,7 +3690,10 @@
       [...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);
     }
@@ -3701,12 +3701,18 @@
 
   ObjectAssign(ColorPicker, {
     Color,
+    ColorPalette,
     Version,
     getInstance: getColorPickerInstance,
     init: initColorPicker,
     selector: colorPickerSelector,
+    // utils important for render
+    roundPart,
+    setElementStyle,
+    setAttribute,
+    getBoundingClientRect,
   });
 
   return ColorPicker;
 
-})));
+}));