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

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

Files changed (38) hide show

package/LICENSE +1 -1
package/README.md +40 -19
package/dist/css/color-picker.css +481 -337
package/dist/css/color-picker.min.css +2 -0
package/dist/css/color-picker.rtl.css +506 -0
package/dist/css/color-picker.rtl.min.css +2 -0
package/dist/js/color-picker-element-esm.js +3810 -2
package/dist/js/color-picker-element-esm.min.js +2 -0
package/dist/js/color-picker-element.js +2009 -1242
package/dist/js/color-picker-element.min.js +2 -2
package/dist/js/color-picker-esm.js +3704 -0
package/dist/js/color-picker-esm.min.js +2 -0
package/dist/js/color-picker.js +1962 -1256
package/dist/js/color-picker.min.js +2 -2
package/package.json +18 -9
package/src/js/color-palette.js +62 -0
package/src/js/color-picker-element.js +55 -13
package/src/js/color-picker.js +686 -595
package/src/js/color.js +615 -349
package/src/js/index.js +0 -9
package/src/js/util/colorNames.js +2 -152
package/src/js/util/colorPickerLabels.js +22 -0
package/src/js/util/getColorControls.js +103 -0
package/src/js/util/getColorForm.js +27 -19
package/src/js/util/getColorMenu.js +95 -0
package/src/js/util/isValidJSON.js +13 -0
package/src/js/util/nonColors.js +5 -0
package/src/js/util/templates.js +1 -0
package/src/scss/color-picker.rtl.scss +23 -0
package/src/scss/color-picker.scss +430 -0
package/types/cp.d.ts +263 -160
package/types/index.d.ts +9 -2
package/types/source/source.ts +2 -1
package/types/source/types.d.ts +28 -5
package/dist/js/color-picker.esm.js +0 -2998
package/dist/js/color-picker.esm.min.js +0 -2
package/src/js/util/getColorControl.js +0 -49
package/src/js/util/init.js +0 -14

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

@@ -1,5 +1,5 @@
 /*!
-* ColorPickerElement v0.0.1alpha1 (http://thednp.github.io/color-picker)
+* ColorPickerElement v0.0.1alpha2 (http://thednp.github.io/color-picker)
 * Copyright 2022 © thednp
 * Licensed under MIT (https://github.com/thednp/color-picker/blob/master/LICENSE)
 */
@@ -27,26 +27,17 @@
   const parentNodes = [Document, Element, HTMLElement];
   /**
-   * A global array with `Element` | `HTMLElement`.
-   */
-  const elementNodes = [Element, HTMLElement];
-  /**
-   * Utility to check if target is typeof `HTMLElement`, `Element`, `Node`
-   * or find one that matches a selector.
+   * Shortcut for `HTMLElement.getElementsByTagName` method. Some `Node` elements
+   * like `ShadowRoot` do not support `getElementsByTagName`.
    *
-   * @param {HTMLElement | Element | string} selector the input selector or target element
-   * @param {(HTMLElement | Element | Document)=} parent optional node to look into
-   * @return {(HTMLElement | Element)?} the `HTMLElement` or `querySelector` result
+   * @param {string} selector the tag name
+   * @param {(HTMLElement | Element | Document)=} parent optional Element to look into
+   * @return {HTMLCollectionOf<HTMLElement | Element>} the 'HTMLCollection'
    */
-  function querySelector(selector, parent) {
-    const lookUp = parentNodes.some((x) => parent instanceof x)
-      ? parent : getDocument();
-    // @ts-ignore
-    return elementNodes.some((x) => selector instanceof x)
-      // @ts-ignore
-      ? selector : lookUp.querySelector(selector);
+  function getElementsByTagName(selector, parent) {
+    const lookUp = parent && parentNodes
+      .some((x) => parent instanceof x) ? parent : getDocument();
+    return lookUp.getElementsByTagName(selector);
   }
   /**
@@ -79,6 +70,23 @@
     return newElement;
   }
+  /**
+   * Shortcut for `HTMLElement.setAttribute()` method.
+   * @param  {HTMLElement | Element} element target element
+   * @param  {string} attribute attribute name
+   * @param  {string} value attribute value
+   * @returns {void}
+   */
+  const setAttribute = (element, attribute, value) => element.setAttribute(attribute, value);
+  /**
+   * Shortcut for `HTMLElement.getAttribute()` method.
+   * @param {HTMLElement | Element} element target element
+   * @param {string} attribute attribute name
+   * @returns {string?} attribute value
+   */
+  const getAttribute = (element, attribute) => element.getAttribute(attribute);
   /**
    * Returns the `document.head` or the `<head>` element.
    *
@@ -117,184 +125,44 @@
   const setElementStyle = (element, styles) => { ObjectAssign(element.style, styles); };
   /**
-   * A complete list of web safe colors.
-   * @see https://github.com/bahamas10/css-color-names/blob/master/css-color-names.json
-   * @type {string[]}
+   * A list of explicit default non-color values.
    */
-  const colorNames = [
-    'aliceblue',
-    'antiquewhite',
-    'aqua',
-    'aquamarine',
-    'azure',
-    'beige',
-    'bisque',
-    'black',
-    'blanchedalmond',
-    'blue',
-    'blueviolet',
-    'brown',
-    'burlywood',
-    'cadetblue',
-    'chartreuse',
-    'chocolate',
-    'coral',
-    'cornflowerblue',
-    'cornsilk',
-    'crimson',
-    'cyan',
-    'darkblue',
-    'darkcyan',
-    'darkgoldenrod',
-    'darkgray',
-    'darkgreen',
-    'darkgrey',
-    'darkkhaki',
-    'darkmagenta',
-    'darkolivegreen',
-    'darkorange',
-    'darkorchid',
-    'darkred',
-    'darksalmon',
-    'darkseagreen',
-    'darkslateblue',
-    'darkslategray',
-    'darkslategrey',
-    'darkturquoise',
-    'darkviolet',
-    'deeppink',
-    'deepskyblue',
-    'dimgray',
-    'dimgrey',
-    'dodgerblue',
-    'firebrick',
-    'floralwhite',
-    'forestgreen',
-    'fuchsia',
-    'gainsboro',
-    'ghostwhite',
-    'goldenrod',
-    'gold',
-    'gray',
-    'green',
-    'greenyellow',
-    'grey',
-    'honeydew',
-    'hotpink',
-    'indianred',
-    'indigo',
-    'ivory',
-    'khaki',
-    'lavenderblush',
-    'lavender',
-    'lawngreen',
-    'lemonchiffon',
-    'lightblue',
-    'lightcoral',
-    'lightcyan',
-    'lightgoldenrodyellow',
-    'lightgray',
-    'lightgreen',
-    'lightgrey',
-    'lightpink',
-    'lightsalmon',
-    'lightseagreen',
-    'lightskyblue',
-    'lightslategray',
-    'lightslategrey',
-    'lightsteelblue',
-    'lightyellow',
-    'lime',
-    'limegreen',
-    'linen',
-    'magenta',
-    'maroon',
-    'mediumaquamarine',
-    'mediumblue',
-    'mediumorchid',
-    'mediumpurple',
-    'mediumseagreen',
-    'mediumslateblue',
-    'mediumspringgreen',
-    'mediumturquoise',
-    'mediumvioletred',
-    'midnightblue',
-    'mintcream',
-    'mistyrose',
-    'moccasin',
-    'navajowhite',
-    'navy',
-    'oldlace',
-    'olive',
-    'olivedrab',
-    'orange',
-    'orangered',
-    'orchid',
-    'palegoldenrod',
-    'palegreen',
-    'paleturquoise',
-    'palevioletred',
-    'papayawhip',
-    'peachpuff',
-    'peru',
-    'pink',
-    'plum',
-    'powderblue',
-    'purple',
-    'rebeccapurple',
-    'red',
-    'rosybrown',
-    'royalblue',
-    'saddlebrown',
-    'salmon',
-    'sandybrown',
-    'seagreen',
-    'seashell',
-    'sienna',
-    'silver',
-    'skyblue',
-    'slateblue',
-    'slategray',
-    'slategrey',
-    'snow',
-    'springgreen',
-    'steelblue',
-    'tan',
-    'teal',
-    'thistle',
-    'tomato',
-    'turquoise',
-    'violet',
-    'wheat',
-    'white',
-    'whitesmoke',
-    'yellow',
-    'yellowgreen',
-  ];
+  const nonColors = ['transparent', 'currentColor', 'inherit', 'revert', 'initial'];
+  // 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_MATCH3 = `[\\s|\\(]+(${CSS_UNIT})[,|\\s]+(${CSS_UNIT})[,|\\s]+(${CSS_UNIT})\\s*\\)?`;
-  const PERMISSIVE_MATCH4 = `[\\s|\\(]+(${CSS_UNIT})[,|\\s]+(${CSS_UNIT})[,|\\s]+(${CSS_UNIT})[,|\\s]+(${CSS_UNIT})\\s*\\)?`;
+  const PERMISSIVE_MATCH = `[\\s|\\(]+(${CSS_UNIT2})[,|\\s]+(${CSS_UNIT})[,|\\s]+(${CSS_UNIT})[,|\\s|\\/\\s]*(${CSS_UNIT})?\\s*\\)?`;
   const matchers = {
-    CSS_UNIT: new RegExp(CSS_UNIT),
-    rgb: new RegExp(`rgb${PERMISSIVE_MATCH3}`),
-    rgba: new RegExp(`rgba${PERMISSIVE_MATCH4}`),
-    hsl: new RegExp(`hsl${PERMISSIVE_MATCH3}`),
-    hsla: new RegExp(`hsla${PERMISSIVE_MATCH4}`),
-    hsv: new RegExp(`hsv${PERMISSIVE_MATCH3}`),
-    hsva: new RegExp(`hsva${PERMISSIVE_MATCH4}`),
+    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})$/,
@@ -304,27 +172,46 @@
   /**
    * 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
-   * @returns {boolean}
+   * @param {string} n testing number
+   * @returns {boolean} the query result
    */
   function isOnePointZero(n) {
-    return typeof n === 'string' && n.includes('.') && parseFloat(n) === 1;
+    return `${n}`.includes('.') && parseFloat(n) === 1;
   }
   /**
    * Check to see if string passed in is a percentage
-   * @param {string} n
-   * @returns {boolean}
+   * @param {string} n testing number
+   * @returns {boolean} the query result
    */
   function isPercentage(n) {
-    return typeof n === 'string' && n.includes('%');
+    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
-   * @returns {boolean}
+   * @param {string | number} color testing value
+   * @returns {boolean} the query result
    */
   function isValidCSSUnit(color) {
     return Boolean(matchers.CSS_UNIT.exec(String(color)));
@@ -332,22 +219,24 @@
   /**
    * Take input from [0, n] and return it as [0, 1]
-   * @param {*} n
-   * @param {number} max
-   * @returns {number}
+   * @param {*} N the input number
+   * @param {number} max the number maximum value
+   * @returns {number} the number in [0, 1] value range
    */
-  function bound01(n, max) {
-    let N = n;
-    if (isOnePointZero(n)) N = '100%';
+  function bound01(N, max) {
+    let n = N;
+    if (isOnePointZero(n)) n = '100%';
+    n = max === 360 ? n : Math.min(max, Math.max(0, parseFloat(n)));
-    N = max === 360 ? N : Math.min(max, Math.max(0, parseFloat(N)));
+    // Handle hue angles
+    if (isAngle(N)) n = N.replace(new RegExp(ANGLES), '');
     // Automatically convert percentage into number
-    if (isPercentage(N)) {
-      N = parseInt(String(N * max), 10) / 100;
-    }
+    if (isPercentage(n)) n = parseInt(String(n * max), 10) / 100;
     // Handle floating point rounding errors
-    if (Math.abs(N - max) < 0.000001) {
+    if (Math.abs(n - max) < 0.000001) {
       return 1;
     }
     // Convert into [0, 1] range if it isn't already
@@ -355,23 +244,22 @@
       // 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) / parseFloat(String(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) / parseFloat(String(max));
     }
-    return N;
+    return n;
   }
   /**
    * Return a valid alpha value [0,1] with all invalid values being set to 1.
-   * @param {string | number} a
-   * @returns {number}
+   * @param {string | number} a transparency value
+   * @returns {number} a transparency value in the [0, 1] range
    */
   function boundAlpha(a) {
-    // @ts-ignore
-    let na = parseFloat(a);
+    let na = parseFloat(`${a}`);
     if (Number.isNaN(na) || na < 0 || na > 1) {
       na = 1;
@@ -381,12 +269,12 @@
   }
   /**
-   * Force a number between 0 and 1
-   * @param {number} val
-   * @returns {number}
+   * Force a number between 0 and 1.
+   * @param {number} v the float number
+   * @returns {number} - the resulting number
    */
-  function clamp01(val) {
-    return Math.min(1, Math.max(0, val));
+  function clamp01(v) {
+    return Math.min(1, Math.max(0, v));
   }
   /**
@@ -394,7 +282,7 @@
    * @param {string} name
    * @returns {string}
    */
-  function getHexFromColorName(name) {
+  function getRGBFromName(name) {
     const documentHead = getDocumentHead();
     setElementStyle(documentHead, { color: name });
     const colorName = getElementStyle(documentHead, 'color');
@@ -403,59 +291,53 @@
   }
   /**
-   * Replace a decimal with it's percentage value
-   * @param {number | string} n
-   * @return {string | number}
+   * Converts a decimal value to hexadecimal.
+   * @param {number} d the input number
+   * @returns {string} - the hexadecimal value
    */
-  function convertToPercentage(n) {
-    if (n <= 1) {
-      return `${Number(n) * 100}%`;
-    }
-    return n;
+  function convertDecimalToHex(d) {
+    return Math.round(d * 255).toString(16);
   }
   /**
-   * Force a hex value to have 2 characters
-   * @param {string} c
-   * @returns {string}
+   * Converts a hexadecimal value to decimal.
+   * @param {string} h hexadecimal value
+   * @returns {number} number in decimal format
    */
-  function pad2(c) {
-    return c.length === 1 ? `0${c}` : String(c);
+  function convertHexToDecimal(h) {
+    return parseIntFromHex(h) / 255;
   }
-  // `rgbToHsl`, `rgbToHsv`, `hslToRgb`, `hsvToRgb` modified from:
-  // <http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript>
   /**
-   * Handle bounds / percentage checking to conform to CSS color spec
-   * * *Assumes:* r, g, b in [0, 255] or [0, 1]
-   * * *Returns:* { r, g, b } in [0, 255]
-   * @see http://www.w3.org/TR/css3-color/
-   * @param {number | string} r
-   * @param {number | string} g
-   * @param {number | string} b
-   * @returns {CP.RGB}
+   * Converts a base-16 hexadecimal value into a base-10 integer.
+   * @param {string} val
+   * @returns {number}
    */
-  function rgbToRgb(r, g, b) {
-    return {
-      r: bound01(r, 255) * 255,
-      g: bound01(g, 255) * 255,
-      b: bound01(b, 255) * 255,
-    };
+  function parseIntFromHex(val) {
+    return parseInt(val, 16);
+  }
+  /**
+   * Force a hexadecimal value to have 2 characters.
+   * @param {string} c string with [0-9A-F] ranged values
+   * @returns {string} 0 => 00, a => 0a
+   */
+  function pad2(c) {
+    return c.length === 1 ? `0${c}` : String(c);
   }
   /**
-   * Converts an RGB color value to HSL.
-   * *Assumes:* r, g, and b are contained in [0, 255] or [0, 1]
-   * *Returns:* { h, s, l } in [0,1]
-   * @param {number} R
-   * @param {number} G
-   * @param {number} B
-   * @returns {CP.HSL}
+   * Converts an RGB colour value to HSL.
+   *
+   * @param {number} R Red component [0, 255]
+   * @param {number} G Green component [0, 255]
+   * @param {number} B Blue component [0, 255]
+   * @returns {CP.HSL} {h,s,l} object with [0, 1] ranged values
    */
   function rgbToHsl(R, G, B) {
-    const r = bound01(R, 255);
-    const g = bound01(G, 255);
-    const b = bound01(B, 255);
+    const r = R / 255;
+    const g = G / 255;
+    const b = B / 255;
     const max = Math.max(r, g, b);
     const min = Math.min(r, g, b);
     let h = 0;
@@ -485,50 +367,95 @@
   /**
    * Returns a normalized RGB component value.
-   * @param {number} P
-   * @param {number} Q
-   * @param {number} T
+   * @param {number} p
+   * @param {number} q
+   * @param {number} t
    * @returns {number}
    */
-  function hue2rgb(P, Q, T) {
-    const p = P;
-    const q = Q;
-    let t = T;
-    if (t < 0) {
-      t += 1;
-    }
-    if (t > 1) {
-      t -= 1;
-    }
-    if (t < 1 / 6) {
-      return p + (q - p) * (6 * t);
-    }
-    if (t < 1 / 2) {
-      return q;
-    }
-    if (t < 2 / 3) {
-      return p + (q - p) * (2 / 3 - t) * 6;
-    }
+  function hueToRgb(p, q, t) {
+    let T = t;
+    if (T < 0) T += 1;
+    if (T > 1) T -= 1;
+    if (T < 1 / 6) return p + (q - p) * (6 * T);
+    if (T < 1 / 2) return q;
+    if (T < 2 / 3) return p + (q - p) * (2 / 3 - T) * 6;
     return p;
   }
+  /**
+  * Returns an HWB colour object from an RGB colour object.
+  * @link https://www.w3.org/TR/css-color-4/#hwb-to-rgb
+  * @link http://alvyray.com/Papers/CG/hwb2rgb.htm
+  *
+  * @param {number} R Red component [0, 255]
+  * @param {number} G Green [0, 255]
+  * @param {number} B Blue [0, 255]
+  * @return {CP.HWB} {h,w,b} object with [0, 1] ranged values
+  */
+  function rgbToHwb(R, G, B) {
+    const r = R / 255;
+    const g = G / 255;
+    const b = B / 255;
+    let f = 0;
+    let i = 0;
+    const whiteness = Math.min(r, g, b);
+    const max = Math.max(r, g, b);
+    const black = 1 - max;
+    if (max === whiteness) return { h: 0, w: whiteness, b: black };
+    if (r === whiteness) {
+      f = g - b;
+      i = 3;
+    } else {
+      f = g === whiteness ? b - r : r - g;
+      i = g === whiteness ? 5 : 1;
+    }
+    const h = (i - f / (max - whiteness)) / 6;
+    return {
+      h: h === 1 ? 0 : h,
+      w: whiteness,
+      b: black,
+    };
+  }
+  /**
+  * Returns an RGB colour object from an HWB colour.
+  *
+  * @param {number} H Hue Angle [0, 1]
+  * @param {number} W Whiteness [0, 1]
+  * @param {number} B Blackness [0, 1]
+  * @return {CP.RGB} {r,g,b} object with [0, 255] ranged values
+  *
+  * @link https://www.w3.org/TR/css-color-4/#hwb-to-rgb
+  * @link http://alvyray.com/Papers/CG/hwb2rgb.htm
+  */
+  function hwbToRgb(H, W, B) {
+    if (W + B >= 1) {
+      const gray = (W / (W + B)) * 255;
+      return { r: gray, g: gray, b: gray };
+    }
+    let { r, g, b } = hslToRgb(H, 1, 0.5);
+    [r, g, b] = [r, g, b]
+      .map((v) => (v / 255) * (1 - W - B) + W)
+      .map((v) => v * 255);
+    return { r, g, b };
+  }
   /**
    * Converts an HSL colour value to RGB.
    *
-   * * *Assumes:* h is contained in [0, 1] or [0, 360] and s and l are contained [0, 1] or [0, 100]
-   * * *Returns:* { r, g, b } in the set [0, 255]
-   * @param {number | string} H
-   * @param {number | string} S
-   * @param {number | string} L
-   * @returns {CP.RGB}
-   */
-  function hslToRgb(H, S, L) {
+   * @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;
-    const h = bound01(H, 360);
-    const s = bound01(S, 100);
-    const l = bound01(L, 100);
     if (s === 0) {
       // achromatic
@@ -538,27 +465,27 @@
     } else {
       const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
       const p = 2 * l - q;
-      r = hue2rgb(p, q, h + 1 / 3);
-      g = hue2rgb(p, q, h);
-      b = hue2rgb(p, q, h - 1 / 3);
+      r = hueToRgb(p, q, h + 1 / 3);
+      g = hueToRgb(p, q, h);
+      b = hueToRgb(p, q, h - 1 / 3);
     }
-    return { r: r * 255, g: g * 255, b: b * 255 };
+    [r, g, b] = [r, g, b].map((x) => x * 255);
+    return { r, g, b };
   }
   /**
    * Converts an RGB colour value to HSV.
    *
-   * *Assumes:* r, g, and b are contained in the set [0, 255] or [0, 1]
-   * *Returns:* { h, s, v } in [0,1]
-   * @param {number | string} R
-   * @param {number | string} G
-   * @param {number | string} B
-   * @returns {CP.HSV}
+   * @param {number} R Red component [0, 255]
+   * @param {number} G Green [0, 255]
+   * @param {number} B Blue [0, 255]
+   * @returns {CP.HSV} {h,s,v} object with [0, 1] ranged values
    */
   function rgbToHsv(R, G, B) {
-    const r = bound01(R, 255);
-    const g = bound01(G, 255);
-    const b = bound01(B, 255);
+    const r = R / 255;
+    const g = G / 255;
+    const b = B / 255;
     const max = Math.max(r, g, b);
     const min = Math.min(r, g, b);
     let h = 0;
@@ -585,19 +512,17 @@
   }
   /**
-   * Converts an HSV color value to RGB.
+   * Converts an HSV colour value to RGB.
    *
-   * *Assumes:* h is contained in [0, 1] or [0, 360] and s and v are contained in [0, 1] or [0, 100]
-   * *Returns:* { r, g, b } in the set [0, 255]
-   * @param {number | string} H
-   * @param {number | string} S
-   * @param {number | string} V
-   * @returns {CP.RGB}
+   * @param {number} H Hue Angle [0, 1]
+   * @param {number} S Saturation [0, 1]
+   * @param {number} V Brightness Angle [0, 1]
+   * @returns {CP.RGB} {r,g,b} object with [0, 1] ranged values
    */
   function hsvToRgb(H, S, V) {
-    const h = bound01(H, 360) * 6;
-    const s = bound01(S, 100);
-    const v = bound01(V, 100);
+    const h = H * 6;
+    const s = S;
+    const v = V;
     const i = Math.floor(h);
     const f = h - i;
     const p = v * (1 - s);
@@ -611,47 +536,65 @@
   }
   /**
-   * Converts an RGB color to hex
+   * Converts an RGB colour to hex
    *
    * Assumes r, g, and b are contained in the set [0, 255]
    * Returns a 3 or 6 character hex
-   * @param {number} r
-   * @param {number} g
-   * @param {number} b
+   * @param {number} r Red component [0, 255]
+   * @param {number} g Green [0, 255]
+   * @param {number} b Blue [0, 255]
+   * @param {boolean=} allow3Char
    * @returns {string}
    */
-  function rgbToHex(r, g, b) {
+  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)),
     ];
+    // 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)) {
+      return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0);
+    }
     return hex.join('');
   }
   /**
-   * Converts a hex value to a decimal.
-   * @param {string} h
-   * @returns {number}
-   */
-  function convertHexToDecimal(h) {
-    return parseIntFromHex(h) / 255;
-  }
+   * Converts an RGBA color plus alpha transparency to hex8.
+   *
+   * @param {number} r Red component [0, 255]
+   * @param {number} g Green [0, 255]
+   * @param {number} b Blue [0, 255]
+   * @param {number} a Alpha transparency [0, 1]
+   * @param {boolean=} allow4Char when *true* it will also find hex shorthand
+   * @returns {string} a hexadecimal value with alpha transparency
+   */
+  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(convertDecimalToHex(a)),
+    ];
-  /**
-   * Parse a base-16 hex value into a base-10 integer.
-   * @param {string} val
-   * @returns {number}
-   */
-  function parseIntFromHex(val) {
-    return parseInt(val, 16);
+    // 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)) {
+      return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0) + hex[3].charAt(0);
+    }
+    return hex.join('');
   }
   /**
-   * Returns an `{r,g,b}` color object corresponding to a given number.
-   * @param {number} color
-   * @returns {CP.RGB}
+   * 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 */
@@ -664,10 +607,10 @@
   }
   /**
-   * 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
-   * @returns {Record<string, (number | string)> | false}
+   * 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
    */
   function stringInputToObject(input) {
     let color = input.trim().toLowerCase();
@@ -677,12 +620,15 @@
       };
     }
     let named = false;
-    if (colorNames.includes(color)) {
-      color = getHexFromColorName(color);
+    if (isColorName(color)) {
+      color = getRGBFromName(color);
       named = true;
-    } else if (color === 'transparent') {
+    } else if (nonColors.includes(color)) {
+      const isTransparent = color === 'transparent';
+      const rgb = isTransparent ? 0 : 255;
+      const a = isTransparent ? 0 : 1;
       return {
-        r: 0, g: 0, b: 0, a: 0, format: 'name',
+        r: rgb, g: rgb, b: rgb, a, format: 'rgb',
       };
     }
@@ -691,72 +637,68 @@
     //   don't worry about [0,1] or [0,100] or [0,360]
     // Just return an object and let the conversion functions handle that.
     // This way the result will be the same whether Color is initialized with string or object.
-    let match = matchers.rgb.exec(color);
-    if (match) {
-      return { r: match[1], g: match[2], b: match[3] };
-    }
-    match = matchers.rgba.exec(color);
-    if (match) {
+    let [, m1, m2, m3, m4] = matchers.rgb.exec(color) || [];
+    if (m1 && m2 && m3/* && m4 */) {
       return {
-        r: match[1], g: match[2], b: match[3], a: match[4],
+        r: m1, g: m2, b: m3, a: m4 !== undefined ? m4 : 1, format: 'rgb',
       };
     }
-    match = matchers.hsl.exec(color);
-    if (match) {
-      return { h: match[1], s: match[2], l: match[3] };
-    }
-    match = matchers.hsla.exec(color);
-    if (match) {
+    [, m1, m2, m3, m4] = matchers.hsl.exec(color) || [];
+    if (m1 && m2 && m3/* && m4 */) {
       return {
-        h: match[1], s: match[2], l: match[3], a: match[4],
+        h: m1, s: m2, l: m3, a: m4 !== undefined ? m4 : 1, format: 'hsl',
       };
     }
-    match = matchers.hsv.exec(color);
-    if (match) {
-      return { h: match[1], s: match[2], v: match[3] };
+    [, m1, m2, m3, m4] = matchers.hsv.exec(color) || [];
+    if (m1 && m2 && m3/* && m4 */) {
+      return {
+        h: m1, s: m2, v: m3, a: m4 !== undefined ? m4 : 1, format: 'hsv',
+      };
     }
-    match = matchers.hsva.exec(color);
-    if (match) {
+    [, m1, m2, m3, m4] = matchers.hwb.exec(color) || [];
+    if (m1 && m2 && m3) {
       return {
-        h: match[1], s: match[2], v: match[3], a: match[4],
+        h: m1, w: m2, b: m3, a: m4 !== undefined ? m4 : 1, format: 'hwb',
       };
     }
-    match = matchers.hex8.exec(color);
-    if (match) {
+    [, m1, m2, m3, m4] = matchers.hex8.exec(color) || [];
+    if (m1 && m2 && m3 && m4) {
       return {
-        r: parseIntFromHex(match[1]),
-        g: parseIntFromHex(match[2]),
-        b: parseIntFromHex(match[3]),
-        a: convertHexToDecimal(match[4]),
-        format: named ? 'name' : 'hex8',
+        r: parseIntFromHex(m1),
+        g: parseIntFromHex(m2),
+        b: parseIntFromHex(m3),
+        a: convertHexToDecimal(m4),
+        // format: named ? 'rgb' : 'hex8',
+        format: named ? 'rgb' : 'hex',
       };
     }
-    match = matchers.hex6.exec(color);
-    if (match) {
+    [, m1, m2, m3] = matchers.hex6.exec(color) || [];
+    if (m1 && m2 && m3) {
       return {
-        r: parseIntFromHex(match[1]),
-        g: parseIntFromHex(match[2]),
-        b: parseIntFromHex(match[3]),
-        format: named ? 'name' : 'hex',
+        r: parseIntFromHex(m1),
+        g: parseIntFromHex(m2),
+        b: parseIntFromHex(m3),
+        format: named ? 'rgb' : 'hex',
       };
     }
-    match = matchers.hex4.exec(color);
-    if (match) {
+    [, m1, m2, m3, m4] = matchers.hex4.exec(color) || [];
+    if (m1 && m2 && m3 && m4) {
       return {
-        r: parseIntFromHex(match[1] + match[1]),
-        g: parseIntFromHex(match[2] + match[2]),
-        b: parseIntFromHex(match[3] + match[3]),
-        a: convertHexToDecimal(match[4] + match[4]),
-        format: named ? 'name' : 'hex8',
+        r: parseIntFromHex(m1 + m1),
+        g: parseIntFromHex(m2 + m2),
+        b: parseIntFromHex(m3 + m3),
+        a: convertHexToDecimal(m4 + m4),
+        // format: named ? 'rgb' : 'hex8',
+        format: named ? 'rgb' : 'hex',
       };
     }
-    match = matchers.hex3.exec(color);
-    if (match) {
+    [, m1, m2, m3] = matchers.hex3.exec(color) || [];
+    if (m1 && m2 && m3) {
       return {
-        r: parseIntFromHex(match[1] + match[1]),
-        g: parseIntFromHex(match[2] + match[2]),
-        b: parseIntFromHex(match[3] + match[3]),
-        format: named ? 'name' : 'hex',
+        r: parseIntFromHex(m1 + m1),
+        g: parseIntFromHex(m2 + m2),
+        b: parseIntFromHex(m3 + m3),
+        format: named ? 'rgb' : 'hex',
       };
     }
     return false;
@@ -770,26 +712,33 @@
    * "red"
    * "#f00" or "f00"
    * "#ff0000" or "ff0000"
-   * "#ff000000" or "ff000000"
+   * "#ff000000" or "ff000000" // CSS4 Module
    * "rgb 255 0 0" or "rgb (255, 0, 0)"
    * "rgb 1.0 0 0" or "rgb (1, 0, 0)"
-   * "rgba (255, 0, 0, 1)" or "rgba 255, 0, 0, 1"
-   * "rgba (1.0, 0, 0, 1)" or "rgba 1.0, 0, 0, 1"
+   * "rgba(255, 0, 0, 1)" or "rgba 255, 0, 0, 1"
+   * "rgba(1.0, 0, 0, 1)" or "rgba 1.0, 0, 0, 1"
+   * "rgb(255 0 0 / 10%)" or "rgb 255 0 0 0.1" // CSS4 Module
    * "hsl(0, 100%, 50%)" or "hsl 0 100% 50%"
    * "hsla(0, 100%, 50%, 1)" or "hsla 0 100% 50%, 1"
+   * "hsl(0deg 100% 50% / 50%)" or "hsl 0 100 50 50" // CSS4 Module
    * "hsv(0, 100%, 100%)" or "hsv 0 100% 100%"
+   * "hsva(0, 100%, 100%, 0.1)" or "hsva 0 100% 100% 0.1"
+   * "hsv(0deg 100% 100% / 10%)" or "hsv 0 100 100 0.1" // CSS4 Module
+   * "hwb(0deg, 100%, 100%, 100%)" or "hwb 0 100% 100% 0.1" // CSS4 Module
    * ```
    * @param {string | Record<string, any>} input
    * @returns {CP.ColorObject}
    */
   function inputToRGB(input) {
-    /** @type {CP.RGB} */
     let rgb = { r: 0, g: 0, b: 0 };
     let color = input;
-    let a;
+    let a = 1;
     let s = null;
     let v = null;
     let l = null;
+    let w = null;
+    let b = null;
+    let h = null;
     let ok = false;
     let format = 'hex';
@@ -800,23 +749,38 @@
     }
     if (typeof color === 'object') {
       if (isValidCSSUnit(color.r) && isValidCSSUnit(color.g) && isValidCSSUnit(color.b)) {
-        rgb = rgbToRgb(color.r, color.g, color.b);
+        rgb = { r: color.r, g: color.g, b: color.b }; // RGB values in [0, 255] range
         ok = true;
-        format = `${color.r}`.slice(-1) === '%' ? 'prgb' : 'rgb';
+        format = 'rgb';
       } else if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.v)) {
-        s = convertToPercentage(color.s);
-        v = convertToPercentage(color.v);
-        rgb = hsvToRgb(color.h, s, v);
+        ({ h, s, v } = color);
+        h = typeof h === 'number' ? h : bound01(h, 360); // hue can be `5deg` or a [0, 1] value
+        s = typeof s === 'number' ? s : bound01(s, 100); // saturation can be `5%` or a [0, 1] value
+        v = typeof v === 'number' ? v : bound01(v, 100); // brightness can be `5%` or a [0, 1] value
+        rgb = hsvToRgb(h, s, v);
         ok = true;
         format = 'hsv';
       } else if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.l)) {
-        s = convertToPercentage(color.s);
-        l = convertToPercentage(color.l);
-        rgb = hslToRgb(color.h, s, l);
+        ({ h, s, l } = color);
+        h = typeof h === 'number' ? h : bound01(h, 360); // hue can be `5deg` or a [0, 1] value
+        s = typeof s === 'number' ? s : bound01(s, 100); // saturation can be `5%` or a [0, 1] value
+        l = typeof l === 'number' ? l : bound01(l, 100); // lightness can be `5%` or a [0, 1] value
+        rgb = hslToRgb(h, s, l);
         ok = true;
         format = 'hsl';
+      } else if (isValidCSSUnit(color.h) && isValidCSSUnit(color.w) && isValidCSSUnit(color.b)) {
+        ({ h, w, b } = color);
+        h = typeof h === 'number' ? h : bound01(h, 360); // hue can be `5deg` or a [0, 1] value
+        w = typeof w === 'number' ? w : bound01(w, 100); // whiteness can be `5%` or a [0, 1] value
+        b = typeof b === 'number' ? b : bound01(b, 100); // blackness can be `5%` or a [0, 1] value
+        rgb = hwbToRgb(h, w, b);
+        ok = true;
+        format = 'hwb';
+      }
+      if (isValidCSSUnit(color.a)) {
+        a = color.a;
+        a = isPercentage(`${a}`) ? bound01(a, 100) : a;
       }
-      if ('a' in color) a = color.a;
     }
     return {
@@ -829,27 +793,21 @@
     };
   }
-  /** @type {CP.ColorOptions} */
-  const colorPickerDefaults = {
-    format: 'hex',
-  };
   /**
+   * @class
    * Returns a new `Color` instance.
    * @see https://github.com/bgrins/TinyColor
-   * @class
    */
   class Color {
     /**
      * @constructor
-     * @param {CP.ColorInput} input
-     * @param {CP.ColorOptions=} config
+     * @param {CP.ColorInput} input the given colour value
+     * @param {CP.ColorFormats=} config the given format
      */
     constructor(input, config) {
       let color = input;
-      const opts = typeof config === 'object'
-        ? ObjectAssign(colorPickerDefaults, config)
-        : ObjectAssign({}, colorPickerDefaults);
+      const configFormat = config && COLOR_FORMAT.includes(config)
+        ? config : 'rgb';
       // If input is already a `Color`, return itself
       if (color instanceof Color) {
@@ -862,36 +820,31 @@
         r, g, b, a, ok, format,
       } = inputToRGB(color);
+      // bind
+      const self = this;
       /** @type {CP.ColorInput} */
-      this.originalInput = color;
+      self.originalInput = color;
       /** @type {number} */
-      this.r = r;
+      self.r = r;
       /** @type {number} */
-      this.g = g;
+      self.g = g;
       /** @type {number} */
-      this.b = b;
+      self.b = b;
       /** @type {number} */
-      this.a = a;
+      self.a = a;
       /** @type {boolean} */
-      this.ok = ok;
-      /** @type {number} */
-      this.roundA = Math.round(100 * this.a) / 100;
+      self.ok = ok;
       /** @type {CP.ColorFormats} */
-      this.format = opts.format || format;
+      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 (this.r < 1) {
-        this.r = Math.round(this.r);
-      }
-      if (this.g < 1) {
-        this.g = Math.round(this.g);
-      }
-      if (this.b < 1) {
-        this.b = Math.round(this.b);
-      }
+      if (r < 1) self.r = Math.round(r);
+      if (g < 1) self.g = Math.round(g);
+      if (b < 1) self.b = Math.round(b);
     }
     /**
@@ -911,40 +864,40 @@
     }
     /**
-     * Returns the perceived luminance of a color.
+     * Returns the perceived luminance of a colour.
      * @see http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
-     * @returns {number} a number in [0-1] range
+     * @returns {number} a number in the [0, 1] range
      */
     get luminance() {
       const { r, g, b } = this;
       let R = 0;
       let G = 0;
       let B = 0;
-      const RsRGB = r / 255;
-      const GsRGB = g / 255;
-      const BsRGB = b / 255;
+      const rp = r / 255;
+      const rg = g / 255;
+      const rb = b / 255;
-      if (RsRGB <= 0.03928) {
-        R = RsRGB / 12.92;
+      if (rp <= 0.03928) {
+        R = rp / 12.92;
       } else {
-        R = ((RsRGB + 0.055) / 1.055) ** 2.4;
+        R = ((rp + 0.055) / 1.055) ** 2.4;
       }
-      if (GsRGB <= 0.03928) {
-        G = GsRGB / 12.92;
+      if (rg <= 0.03928) {
+        G = rg / 12.92;
       } else {
-        G = ((GsRGB + 0.055) / 1.055) ** 2.4;
+        G = ((rg + 0.055) / 1.055) ** 2.4;
       }
-      if (BsRGB <= 0.03928) {
-        B = BsRGB / 12.92;
+      if (rb <= 0.03928) {
+        B = rb / 12.92;
       } else {
-        B = ((BsRGB + 0.055) / 1.055) ** 2.4;
+        B = ((rb + 0.055) / 1.055) ** 2.4;
       }
       return 0.2126 * R + 0.7152 * G + 0.0722 * B;
     }
     /**
-     * Returns the perceived brightness of the color.
-     * @returns {number} a number in [0-255] range
+     * Returns the perceived brightness of the colour.
+     * @returns {number} a number in the [0, 255] range
      */
     get brightness() {
       const { r, g, b } = this;
@@ -952,123 +905,289 @@
     }
     /**
-     * Returns the color as a RGBA object.
-     * @returns {CP.RGBA}
+     * Returns the colour as an RGBA object.
+     * @returns {CP.RGBA} an {r,g,b,a} object with [0, 255] ranged values
      */
     toRgb() {
+      const {
+        r, g, b, a,
+      } = this;
+      const [R, G, B] = [r, g, b].map((x) => Math.round(x));
       return {
-        r: Math.round(this.r),
-        g: Math.round(this.g),
-        b: Math.round(this.b),
-        a: this.a,
+        r: R,
+        g: G,
+        b: B,
+        a: Math.round(a * 100) / 100,
       };
     }
     /**
-     * Returns the RGBA values concatenated into a string.
-     * @returns {string} the CSS valid color in RGB/RGBA format
+     * Returns the RGBA values concatenated into a CSS3 Module string format.
+     * * rgb(255,255,255)
+     * * rgba(255,255,255,0.5)
+     * @returns {string} the CSS valid colour in RGB/RGBA format
      */
     toRgbString() {
-      const r = Math.round(this.r);
-      const g = Math.round(this.g);
-      const b = Math.round(this.b);
-      return this.a === 1
-        ? `rgb(${r},${g},${b})`
-        : `rgba(${r},${g},${b},${this.roundA})`;
+      const {
+        r, g, b, a,
+      } = this.toRgb();
+      return a === 1
+        ? `rgb(${r}, ${g}, ${b})`
+        : `rgba(${r}, ${g}, ${b}, ${a})`;
+    }
+    /**
+     * Returns the RGBA values concatenated into a CSS4 Module string format.
+     * * rgb(255 255 255)
+     * * rgb(255 255 255 / 50%)
+     * @returns {string} the CSS valid colour in CSS4 RGB format
+     */
+    toRgbCSS4String() {
+      const {
+        r, g, b, a,
+      } = this.toRgb();
+      const A = a === 1 ? '' : ` / ${Math.round(a * 100)}%`;
+      return `rgb(${r} ${g} ${b}${A})`;
+    }
+    /**
+     * Returns the hexadecimal value of the colour. When the parameter is *true*
+     * it will find a 3 characters shorthand of the decimal value.
+     *
+     * @param {boolean=} allow3Char when `true` returns shorthand HEX
+     * @returns {string} the hexadecimal colour format
+     */
+    toHex(allow3Char) {
+      const {
+        r, g, b, a,
+      } = this.toRgb();
+      return a === 1
+        ? rgbToHex(r, g, b, allow3Char)
+        : rgbaToHex(r, g, b, a, allow3Char);
+    }
+    /**
+     * Returns the CSS valid hexadecimal vaue of the colour. When the parameter is *true*
+     * it will find a 3 characters shorthand of the value.
+     *
+     * @param {boolean=} allow3Char when `true` returns shorthand HEX
+     * @returns {string} the CSS valid colour in hexadecimal format
+     */
+    toHexString(allow3Char) {
+      return `#${this.toHex(allow3Char)}`;
     }
     /**
-     * Returns the HEX value of the color.
-     * @returns {string} the hexadecimal color format
+     * Returns the HEX8 value of the colour.
+     * @param {boolean=} allow4Char when `true` returns shorthand HEX
+     * @returns {string} the CSS valid colour in hexadecimal format
      */
-    toHex() {
-      return rgbToHex(this.r, this.g, this.b);
+    toHex8(allow4Char) {
+      const {
+        r, g, b, a,
+      } = this.toRgb();
+      return rgbaToHex(r, g, b, a, allow4Char);
     }
     /**
-     * Returns the HEX value of the color.
-     * @returns {string} the CSS valid color in hexadecimal format
+     * Returns the HEX8 value of the colour.
+     * @param {boolean=} allow4Char  when `true` returns shorthand HEX
+     * @returns {string} the CSS valid colour in hexadecimal format
      */
-    toHexString() {
-      return `#${this.toHex()}`;
+    toHex8String(allow4Char) {
+      return `#${this.toHex8(allow4Char)}`;
     }
     /**
-     * Returns the color as a HSVA object.
-     * @returns {CP.HSVA} the `{h,s,v,a}` object
+     * Returns the colour as a HSVA object.
+     * @returns {CP.HSVA} the `{h,s,v,a}` object with [0, 1] ranged values
      */
     toHsv() {
-      const { h, s, v } = rgbToHsv(this.r, this.g, this.b);
+      const {
+        r, g, b, a,
+      } = this.toRgb();
+      const { h, s, v } = rgbToHsv(r, g, b);
       return {
-        h: h * 360, s, v, a: this.a,
+        h, s, v, a,
       };
     }
     /**
-     * Returns the color as a HSLA object.
-     * @returns {CP.HSLA}
+     * Returns the colour as an HSLA object.
+     * @returns {CP.HSLA} the `{h,s,l,a}` object with [0, 1] ranged values
      */
     toHsl() {
-      const { h, s, l } = rgbToHsl(this.r, this.g, this.b);
+      const {
+        r, g, b, a,
+      } = this.toRgb();
+      const { h, s, l } = rgbToHsl(r, g, b);
       return {
-        h: h * 360, s, l, a: this.a,
+        h, s, l, a,
       };
     }
     /**
-     * Returns the HSLA values concatenated into a string.
-     * @returns {string} the CSS valid color in HSL/HSLA format
+     * Returns the HSLA values concatenated into a CSS3 Module format string.
+     * * `hsl(150, 100%, 50%)`
+     * * `hsla(150, 100%, 50%, 0.5)`
+     * @returns {string} the CSS valid colour in HSL/HSLA format
      */
     toHslString() {
-      const hsl = this.toHsl();
-      const h = Math.round(hsl.h);
-      const s = Math.round(hsl.s * 100);
-      const l = Math.round(hsl.l * 100);
-      return this.a === 1
-        ? `hsl(${h},${s}%,${l}%)`
-        : `hsla(${h},${s}%,${l}%,${this.roundA})`;
+      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;
+      return a === 1
+        ? `hsl(${h}, ${s}%, ${l}%)`
+        : `hsla(${h}, ${s}%, ${l}%, ${a})`;
+    }
+    /**
+     * Returns the HSLA values concatenated into a CSS4 Module format string.
+     * * `hsl(150deg 100% 50%)`
+     * * `hsl(150deg 100% 50% / 50%)`
+     * @returns {string} the CSS valid colour in CSS4 HSL format
+     */
+    toHslCSS4String() {
+      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)}%` : '';
+      return `hsl(${h}deg ${s}% ${l}%${A})`;
+    }
+    /**
+     * Returns the colour as an HWBA object.
+     * @returns {CP.HWBA} the `{h,w,b,a}` object with [0, 1] ranged values
+     */
+    toHwb() {
+      const {
+        r, g, b, a,
+      } = this;
+      const { h, w, b: bl } = rgbToHwb(r, g, b);
+      return {
+        h, w, b: bl, a,
+      };
+    }
+    /**
+     * Returns the HWBA values concatenated into a string.
+     * @returns {string} the CSS valid colour in HWB format
+     */
+    toHwbString() {
+      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)}%` : '';
+      return `hwb(${h}deg ${w}% ${b}%${A})`;
     }
     /**
-     * Sets the alpha value on the current color.
-     * @param {number} alpha a new alpha value in [0-1] range.
-     * @returns {Color} a new `Color` instance
+     * Sets the alpha value of the current colour.
+     * @param {number} alpha a new alpha value in the [0, 1] range.
+     * @returns {Color} the `Color` instance
      */
     setAlpha(alpha) {
-      this.a = boundAlpha(alpha);
-      this.roundA = Math.round(100 * this.a) / 100;
-      return this;
+      const self = this;
+      self.a = boundAlpha(alpha);
+      return self;
     }
     /**
-     * Saturate the color with a given amount.
-     * @param {number=} amount a value in [0-100] range
-     * @returns {Color} a new `Color` instance
+     * Saturate the colour with a given amount.
+     * @param {number=} amount a value in the [0, 100] range
+     * @returns {Color} the `Color` instance
      */
     saturate(amount) {
-      if (!amount) return this;
-      const hsl = this.toHsl();
-      hsl.s += amount / 100;
-      hsl.s = clamp01(hsl.s);
-      return new Color(hsl);
+      const self = this;
+      if (typeof amount !== 'number') return self;
+      const { h, s, l } = self.toHsl();
+      const { r, g, b } = hslToRgb(h, clamp01(s + amount / 100), l);
+      ObjectAssign(self, { r, g, b });
+      return self;
     }
     /**
-     * Desaturate the color with a given amount.
-     * @param {number=} amount a value in [0-100] range
-     * @returns {Color} a new `Color` instance
+     * Desaturate the colour with a given amount.
+     * @param {number=} amount a value in the [0, 100] range
+     * @returns {Color} the `Color` instance
      */
     desaturate(amount) {
-      return amount ? this.saturate(-amount) : this;
+      return typeof amount === 'number' ? this.saturate(-amount) : this;
     }
     /**
-     * Completely desaturates a color into greyscale.
+     * Completely desaturates a colour into greyscale.
      * Same as calling `desaturate(100)`
-     * @returns {Color} a new `Color` instance
+     * @returns {Color} the `Color` instance
      */
     greyscale() {
-      return this.desaturate(100);
+      return this.saturate(-100);
+    }
+    /**
+     * Increase the colour lightness with a given amount.
+     * @param {number=} amount a value in the [0, 100] range
+     * @returns {Color} the `Color` instance
+     */
+    lighten(amount) {
+      const self = this;
+      if (typeof amount !== 'number') return self;
+      const { h, s, l } = self.toHsl();
+      const { r, g, b } = hslToRgb(h, s, clamp01(l + amount / 100));
+      ObjectAssign(self, { r, g, b });
+      return self;
+    }
+    /**
+     * Decrease the colour lightness with a given amount.
+     * @param {number=} amount a value in the [0, 100] range
+     * @returns {Color} the `Color` instance
+     */
+    darken(amount) {
+      return typeof amount === 'number' ? this.lighten(-amount) : this;
+    }
+    /**
+     * Spin takes a positive or negative amount within [-360, 360] indicating the change of hue.
+     * Values outside of this range will be wrapped into this range.
+     *
+     * @param {number=} amount a value in the [0, 100] range
+     * @returns {Color} the `Color` instance
+     */
+    spin(amount) {
+      const self = this;
+      if (typeof amount !== 'number') return self;
+      const { h, s, l } = self.toHsl();
+      const { r, g, b } = hslToRgb(clamp01(((h * 360 + amount) % 360) / 360), s, l);
+      ObjectAssign(self, { r, g, b });
+      return self;
     }
     /** Returns a clone of the current `Color` instance. */
@@ -1077,51 +1196,55 @@
     }
     /**
-     * Returns the color value in CSS valid string format.
-     * @returns {string}
+     * Returns the colour value in CSS valid string format.
+     * @param {boolean=} allowShort when *true*, HEX values can be shorthand
+     * @returns {string} the CSS valid colour in the configured format
      */
-    toString() {
-      const { format } = this;
+    toString(allowShort) {
+      const self = this;
+      const { format } = self;
-      if (format === 'rgb') {
-        return this.toRgbString();
-      }
-      if (format === 'hsl') {
-        return this.toHslString();
-      }
-      return this.toHexString();
+      if (format === 'hex') return self.toHexString(allowShort);
+      if (format === 'hsl') return self.toHslString();
+      if (format === 'hwb') return self.toHwbString();
+      return self.toRgbString();
     }
   }
   ObjectAssign(Color, {
-    colorNames,
+    ANGLES,
+    CSS_ANGLE,
     CSS_INTEGER,
     CSS_NUMBER,
     CSS_UNIT,
-    PERMISSIVE_MATCH3,
-    PERMISSIVE_MATCH4,
+    CSS_UNIT2,
+    PERMISSIVE_MATCH,
     matchers,
     isOnePointZero,
     isPercentage,
     isValidCSSUnit,
+    pad2,
+    clamp01,
     bound01,
     boundAlpha,
-    clamp01,
-    getHexFromColorName,
-    convertToPercentage,
+    getRGBFromName,
     convertHexToDecimal,
-    pad2,
-    rgbToRgb,
+    convertDecimalToHex,
     rgbToHsl,
     rgbToHex,
     rgbToHsv,
+    rgbToHwb,
+    rgbaToHex,
     hslToRgb,
     hsvToRgb,
-    hue2rgb,
+    hueToRgb,
+    hwbToRgb,
     parseIntFromHex,
     numberInputToObject,
     stringInputToObject,
     inputToRGB,
+    ObjectAssign,
   });
   /** @type {Record<string, any>} */
@@ -1220,6 +1343,12 @@
     }
   };
+  /**
+   * A global namespace for aria-description.
+   * @type {string}
+   */
+  const ariaDescription = 'aria-description';
   /**
    * A global namespace for aria-selected.
    * @type {string}
@@ -1232,6 +1361,24 @@
    */
   const ariaExpanded = 'aria-expanded';
+  /**
+   * A global namespace for aria-valuetext.
+   * @type {string}
+   */
+  const ariaValueText = 'aria-valuetext';
+  /**
+   * A global namespace for aria-valuenow.
+   * @type {string}
+   */
+  const ariaValueNow = 'aria-valuenow';
+  /**
+   * A global namespace for aria-haspopup.
+   * @type {string}
+   */
+  const ariaHasPopup = 'aria-haspopup';
   /**
    * A global namespace for aria-hidden.
    * @type {string}
@@ -1286,23 +1433,107 @@
    */
   const keyEscape = 'Escape';
-  // @ts-ignore
-  const { userAgentData: uaDATA } = navigator;
+  /**
+   * A global namespace for `focusin` event.
+   * @type {string}
+   */
+  const focusinEvent = 'focusin';
   /**
-   * A global namespace for `userAgentData` object.
+   * A global namespace for `click` event.
+   * @type {string}
    */
-  const userAgentData = uaDATA;
+  const mouseclickEvent = 'click';
-  const { userAgent: userAgentString } = navigator;
+  /**
+   * A global namespace for `keydown` event.
+   * @type {string}
+   */
+  const keydownEvent = 'keydown';
   /**
-   * A global namespace for `navigator.userAgent` string.
+   * A global namespace for `change` event.
+   * @type {string}
    */
-  const userAgent = userAgentString;
+  const changeEvent = 'change';
-  const mobileBrands = /iPhone|iPad|iPod|Android/i;
-  let isMobileCheck = false;
+  /**
+   * A global namespace for `touchstart` event.
+   * @type {string}
+   */
+  const touchstartEvent = 'touchstart';
+  /**
+   * A global namespace for `touchmove` event.
+   * @type {string}
+   */
+  const touchmoveEvent = 'touchmove';
+  /**
+   * A global namespace for `touchend` event.
+   * @type {string}
+   */
+  const touchendEvent = 'touchend';
+  /**
+   * A global namespace for `mousedown` event.
+   * @type {string}
+   */
+  const mousedownEvent = 'mousedown';
+  /**
+   * A global namespace for `mousemove` event.
+   * @type {string}
+   */
+  const mousemoveEvent = 'mousemove';
+  /**
+   * A global namespace for `mouseup` event.
+   * @type {string}
+   */
+  const mouseupEvent = 'mouseup';
+  /**
+   * A global namespace for `scroll` event.
+   * @type {string}
+   */
+  const scrollEvent = 'scroll';
+  /**
+   * A global namespace for `keyup` event.
+   * @type {string}
+   */
+  const keyupEvent = 'keyup';
+  /**
+   * A global namespace for `resize` event.
+   * @type {string}
+   */
+  const resizeEvent = 'resize';
+  /**
+   * A global namespace for `focusout` event.
+   * @type {string}
+   */
+  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
@@ -1317,7 +1548,39 @@
    */
   const isMobile = isMobileCheck;
-  let elementUID = 1;
+  /**
+   * Returns the `document.documentElement` or the `<html>` element.
+   *
+   * @param {(Node | HTMLElement | Element | globalThis)=} node
+   * @returns {HTMLElement | HTMLHtmlElement}
+   */
+  function getDocumentElement(node) {
+    return getDocument(node).documentElement;
+  }
+  /**
+   * Returns the `Window` object of a target node.
+   * @see https://github.com/floating-ui/floating-ui
+   *
+   * @param {(Node | HTMLElement | Element | Window)=} node target node
+   * @returns {globalThis}
+   */
+  function getWindow(node) {
+    if (node == null) {
+      return window;
+    }
+    if (!(node instanceof Window)) {
+      const { ownerDocument } = node;
+      return ownerDocument ? ownerDocument.defaultView || window : window;
+    }
+    // @ts-ignore
+    return node;
+  }
+  let elementUID = 0;
+  let elementMapUID = 0;
   const elementIDMap = new Map();
   /**
@@ -1328,27 +1591,25 @@
    * @returns {number} an existing or new unique ID
    */
   function getUID(element, key) {
-    elementUID += 1;
-    let elMap = elementIDMap.get(element);
-    let result = elementUID;
-    if (key && key.length) {
-      if (elMap) {
-        const elMapId = elMap.get(key);
-        if (!Number.isNaN(elMapId)) {
-          result = elMapId;
-        } else {
-          elMap.set(key, result);
-        }
-      } else {
-        elementIDMap.set(element, new Map());
-        elMap = elementIDMap.get(element);
-        elMap.set(key, result);
+    let result = key ? elementUID : elementMapUID;
+    if (key) {
+      const elID = getUID(element);
+      const elMap = elementIDMap.get(elID) || new Map();
+      if (!elementIDMap.has(elID)) {
+        elementIDMap.set(elID, elMap);
       }
-    } else if (!Number.isNaN(elMap)) {
-      result = elMap;
+      if (!elMap.has(key)) {
+        elMap.set(key, result);
+        elementUID += 1;
+      } else result = elMap.get(key);
     } else {
-      elementIDMap.set(element, result);
+      const elkey = element.id || element;
+      if (!elementIDMap.has(elkey)) {
+        elementIDMap.set(elkey, result);
+        elementMapUID += 1;
+      } else result = elementIDMap.get(elkey);
     }
     return result;
   }
@@ -1388,17 +1649,56 @@
   }
   /**
-   * A shortcut for `(document|Element).querySelectorAll`.
+   * A global namespace for 'transitionDuration' string.
+   * @type {string}
+   */
+  const transitionDuration = 'transitionDuration';
+  /**
+   * A global namespace for `transitionProperty` string for modern browsers.
    *
-   * @param {string} selector the input selector
-   * @param {(HTMLElement | Element | Document | Node)=} parent optional node to look into
-   * @return {NodeListOf<HTMLElement | Element>} the query result
+   * @type {string}
    */
-  function querySelectorAll(selector, parent) {
-    const lookUp = parent && parentNodes
-      .some((x) => parent instanceof x) ? parent : getDocument();
-    // @ts-ignore -- `ShadowRoot` is also a node
-    return lookUp.querySelectorAll(selector);
+  const transitionProperty = 'transitionProperty';
+  /**
+   * Utility to get the computed `transitionDuration`
+   * from Element in miliseconds.
+   *
+   * @param {HTMLElement | Element} element target
+   * @return {number} the value in miliseconds
+   */
+  function getElementTransitionDuration(element) {
+    const propertyValue = getElementStyle(element, transitionProperty);
+    const durationValue = getElementStyle(element, transitionDuration);
+    const durationScale = durationValue.includes('ms') ? 1 : 1000;
+    const duration = propertyValue && propertyValue !== 'none'
+      ? parseFloat(durationValue) * durationScale : 0;
+    return !Number.isNaN(duration) ? duration : 0;
+  }
+  /**
+   * A global array with `Element` | `HTMLElement`.
+   */
+  const elementNodes = [Element, HTMLElement];
+  /**
+   * Utility to check if target is typeof `HTMLElement`, `Element`, `Node`
+   * or find one that matches a selector.
+   *
+   * @param {HTMLElement | Element | string} selector the input selector or target element
+   * @param {(HTMLElement | Element | Document)=} parent optional node to look into
+   * @return {(HTMLElement | Element)?} the `HTMLElement` or `querySelector` result
+   */
+  function querySelector(selector, parent) {
+    const lookUp = parentNodes.some((x) => parent instanceof x)
+      ? parent : getDocument();
+    // @ts-ignore
+    return elementNodes.some((x) => selector instanceof x)
+      // @ts-ignore
+      ? selector : lookUp.querySelector(selector);
   }
   /**
@@ -1418,6 +1718,20 @@
       || closest(element.getRootNode().host, selector)) : null;
   }
+  /**
+   * Shortcut for `HTMLElement.getElementsByClassName` method. Some `Node` elements
+   * like `ShadowRoot` do not support `getElementsByClassName`.
+   *
+   * @param {string} selector the class name
+   * @param {(HTMLElement | Element | Document)=} parent optional Element to look into
+   * @return {HTMLCollectionOf<HTMLElement | Element>} the 'HTMLCollection'
+   */
+  function getElementsByClassName(selector, parent) {
+    const lookUp = parent && parentNodes.some((x) => parent instanceof x)
+      ? parent : getDocument();
+    return lookUp.getElementsByClassName(selector);
+  }
   /**
    * This is a shortie for `document.createElementNS` method
    * which allows you to create a new `HTMLElement` for a given `tagName`
@@ -1525,6 +1839,116 @@
    */
   const getInstance = (target, component) => Data.get(target, component);
+  /**
+   * The raw value or a given component option.
+   *
+   * @typedef {string | HTMLElement | Function | number | boolean | null} niceValue
+   */
+  /**
+   * Utility to normalize component options
+   *
+   * @param {any} value the input value
+   * @return {niceValue} the normalized value
+   */
+  function normalizeValue(value) {
+    if (value === 'true') { // boolean
+      return true;
+    }
+    if (value === 'false') { // boolean
+      return false;
+    }
+    if (!Number.isNaN(+value)) { // number
+      return +value;
+    }
+    if (value === '' || value === 'null') { // null
+      return null;
+    }
+    // string / function / HTMLElement / object
+    return value;
+  }
+  /**
+   * Shortcut for `Object.keys()` static method.
+   * @param  {Record<string, any>} obj a target object
+   * @returns {string[]}
+   */
+  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.
+   *
+   * @param {HTMLElement | Element} element target
+   * @param {Record<string, any>} defaultOps component default options
+   * @param {Record<string, any>} inputOps component instance options
+   * @param {string=} ns component namespace
+   * @return {Record<string, any>} normalized component options object
+   */
+  function normalizeOptions(element, defaultOps, inputOps, ns) {
+    // @ts-ignore -- our targets are always `HTMLElement`
+    const data = { ...element.dataset };
+    /** @type {Record<string, any>} */
+    const normalOps = {};
+    /** @type {Record<string, any>} */
+    const dataOps = {};
+    const title = 'title';
+    ObjectKeys(data).forEach((k) => {
+      const key = ns && k.includes(ns)
+        ? k.replace(ns, '').replace(/[A-Z]/, (match) => toLowerCase(match))
+        : k;
+      dataOps[key] = normalizeValue(data[k]);
+    });
+    ObjectKeys(inputOps).forEach((k) => {
+      inputOps[k] = normalizeValue(inputOps[k]);
+    });
+    ObjectKeys(defaultOps).forEach((k) => {
+      if (k in inputOps) {
+        normalOps[k] = inputOps[k];
+      } else if (k in dataOps) {
+        normalOps[k] = dataOps[k];
+      } else {
+        normalOps[k] = k === title
+          ? getAttribute(element, title)
+          : defaultOps[k];
+      }
+    });
+    return normalOps;
+  }
+  /**
+   * Utility to force re-paint of an `HTMLElement` target.
+   *
+   * @param {HTMLElement | Element} element is the target
+   * @return {number} the `Element.offsetHeight` value
+   */
+  // @ts-ignore
+  const reflow = (element) => element.offsetHeight;
+  /**
+   * Utility to focus an `HTMLElement` target.
+   *
+   * @param {HTMLElement | Element} element is the target
+   */
+  // @ts-ignore -- `Element`s resulted from querySelector can focus too
+  const focus = (element) => element.focus();
   /**
    * Check class in `HTMLElement.classList`.
    *
@@ -1559,37 +1983,39 @@
   }
   /**
-   * Shortcut for `HTMLElement.hasAttribute()` method.
-   * @param  {HTMLElement | Element} element target element
-   * @param  {string} attribute attribute name
-   * @returns {boolean} the query result
-   */
-  const hasAttribute = (element, attribute) => element.hasAttribute(attribute);
-  /**
-   * Shortcut for `HTMLElement.setAttribute()` method.
+   * Shortcut for `HTMLElement.removeAttribute()` method.
    * @param  {HTMLElement | Element} element target element
    * @param  {string} attribute attribute name
-   * @param  {string} value attribute value
    * @returns {void}
    */
-  const setAttribute = (element, attribute, value) => element.setAttribute(attribute, value);
+  const removeAttribute = (element, attribute) => element.removeAttribute(attribute);
-  /**
-   * Shortcut for `HTMLElement.getAttribute()` method.
-   * @param {HTMLElement | Element} element target element
-   * @param {string} attribute attribute name
-   * @returns {string?} attribute value
-   */
-  const getAttribute = (element, attribute) => element.getAttribute(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',
+  };
   /**
-   * Shortcut for `HTMLElement.removeAttribute()` method.
-   * @param  {HTMLElement | Element} element target element
-   * @param  {string} attribute attribute name
-   * @returns {void}
+   * A list of 17 color names used for WAI-ARIA compliance.
+   * @type {string[]}
    */
-  const removeAttribute = (element, attribute) => element.removeAttribute(attribute);
+  const colorNames = ['white', 'black', 'grey', 'red', 'orange', 'brown', 'gold', 'olive', 'yellow', 'lime', 'green', 'teal', 'cyan', 'blue', 'violet', 'magenta', 'pink'];
   /**
    * Shortcut for `String.toUpperCase()`.
@@ -1602,12 +2028,13 @@
   const vHidden = 'v-hidden';
   /**
-   * Returns the color form.
+   * Returns the color form for `ColorPicker`.
+   *
    * @param {CP.ColorPicker} self the `ColorPicker` instance
-   * @returns {HTMLElement | Element}
+   * @returns {HTMLElement | Element} a new `<div>` element with color component `<input>`
    */
   function getColorForm(self) {
-    const { format, id } = self;
+    const { format, id, componentLabels } = self;
     const colorForm = createElement({
       tagName: 'div',
       className: `color-form ${format}`,
@@ -1616,111 +2043,344 @@
     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: `${c}` }),
+        createElement({ tagName: 'span', className: vHidden, innerText: formatLabel }),
       );
       const cInput = createElement({
         tagName: 'input',
-        id: cID, // name: cID,
+        id: cID,
+        // name: cID, - prevent saving the value to a form
         type: format === 'hex' ? 'text' : 'number',
-        value: c === 'alpha' ? '1' : '0',
+        value: c === 'alpha' ? '100' : '0',
         className: `color-input ${c}`,
-        autocomplete: 'off',
-        spellcheck: 'false',
       });
-      if (format !== 'hex') {
-        // alpha
-        let max = '1';
-        let step = '0.01';
-        if (c !== 'alpha') {
-          if (format === 'rgb') { max = '255'; step = '1'; } else if (c === 'hue') { max = '360'; step = '1'; } else { max = '100'; step = '1'; }
+      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,
-        });
       }
+      ObjectAssign(cInput, {
+        min: '0',
+        max,
+        step,
+      });
+      // }
       colorForm.append(cInputLabel, cInput);
     });
     return colorForm;
   }
   /**
-   * Returns a new color control `HTMLElement`.
-   * @param {number} iteration
-   * @param {number} id
-   * @param {number} width
-   * @param {number} height
-   * @param {string=} labelledby
-   * @returns {HTMLElement | Element}
+   * A global namespace for aria-label.
+   * @type {string}
    */
-  function getColorControl(iteration, id, width, height, labelledby) {
-    const labelID = `appearance${iteration}_${id}`;
-    const knobClass = iteration === 1 ? 'color-pointer' : 'color-slider';
-    const control = createElement({
+  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;
+    const ctrl2Label = format === 'hsl'
+      ? `${saturationLabel}`
+      : `${hueLabel}`;
+    const colorControls = createElement({
       tagName: 'div',
-      className: 'color-control',
+      className: `color-controls ${format}`,
     });
-    setAttribute(control, 'role', 'presentation');
-    control.append(
-      createElement({
-        id: labelID,
-        tagName: 'label',
-        className: `color-label ${vHidden}`,
+    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',
-      }),
-      createElement({
-        tagName: 'canvas',
-        className: `visual-control${iteration}`,
-        ariaHidden: 'true',
-        width: `${width}`,
-        height: `${height}`,
-      }),
-    );
-    const knob = createElement({
-      tagName: 'div',
-      className: `${knobClass} knob`,
+      });
+      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;
+  }
+  /**
+   * @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];
+      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;
+    }
+  }
+  /**
+   * Returns a color-defaults with given values and class.
+   * @param {CP.ColorPicker} self
+   * @param {CP.ColorPalette | string[]} colorsSource
+   * @param {string} menuClass
+   * @returns {HTMLElement | Element}
+   */
+  function getColorMenu(self, colorsSource, menuClass) {
+    const { input, format, componentLabels } = self;
+    const { defaultsLabel, presetsLabel } = componentLabels;
+    const isOptionsMenu = menuClass === 'color-options';
+    const isPalette = colorsSource instanceof ColorPalette;
+    const menuLabel = isOptionsMenu ? presetsLabel : defaultsLabel;
+    let colorsArray = isPalette ? colorsSource.colors : colorsSource;
+    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 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 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;
+    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)`;
+    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);
+    }
+    colorsArray.forEach((x) => {
+      const [value, label] = x.trim().split(':');
+      const xRealColor = new Color(value, format).toString();
+      const isActive = xRealColor === getAttribute(input, 'value');
+      const active = isActive ? ' active' : '';
+      const option = createElement({
+        tagName: 'li',
+        className: `color-option${active}`,
+        innerText: `${label || x}`,
+      });
+      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,
+        });
+      }
+      menu.append(option);
     });
-    setAttribute(knob, ariaLabelledBy, labelledby || labelID);
-    setAttribute(knob, 'tabindex', '0');
-    control.append(knob);
-    return control;
+    return menu;
+  }
+  /**
+   * 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 nonColors = ['transparent', 'currentColor', 'inherit', 'initial'];
-  const colorNames$1 = ['white', 'black', 'grey', 'red', 'orange', 'brown', 'gold', 'olive', 'yellow', 'lime', 'green', 'teal', 'cyan', 'blue', 'violet', 'magenta', 'pink'];
-  const colorPickerLabels = {
-    pickerLabel: 'Colour Picker',
-    toggleLabel: 'Select colour',
-    menuLabel: 'Select colour preset',
-    requiredLabel: 'Required',
-    formatLabel: 'Colour Format',
-    formatHEX: 'Hexadecimal Format',
-    formatRGB: 'RGB Format',
-    formatHSL: 'HSL Format',
-    alphaLabel: 'Alpha',
-    appearanceLabel: 'Colour Appearance',
-    hexLabel: 'Hexadecimal',
-    hueLabel: 'Hue',
-    saturationLabel: 'Saturation',
-    lightnessLabel: 'Lightness',
-    redLabel: 'Red',
-    greenLabel: 'Green',
-    blueLabel: 'Blue',
+  const colorPickerParentSelector = `.${colorPickerString},${colorPickerString}`;
+  const colorPickerDefaults = {
+    componentLabels: colorPickerLabels,
+    colorLabels: colorNames,
+    format: 'rgb',
+    colorPresets: undefined,
+    colorKeywords: nonColors,
   };
   // ColorPicker Static Methods
@@ -1735,165 +2395,94 @@
   // ColorPicker Private Methods
   // ===========================
-  /**
-   * Add / remove `ColorPicker` main event listeners.
-   * @param {ColorPicker} self
-   * @param {boolean=} action
-   */
-  function toggleEvents(self, action) {
-    const fn = action ? addListener : removeListener;
-    const { input, pickerToggle, menuToggle } = self;
-    fn(input, 'focusin', self.showPicker);
-    fn(pickerToggle, 'click', self.togglePicker);
-    fn(input, 'keydown', self.keyHandler);
-    if (menuToggle) {
-      fn(menuToggle, 'click', self.toggleMenu);
-    }
-  }
   /**
    * Generate HTML markup and update instance properties.
    * @param {ColorPicker} self
    */
   function initCallback(self) {
     const {
-      input, parent, format, id, componentLabels, keywords,
+      input, parent, format, id, componentLabels, colorKeywords, colorPresets,
     } = self;
     const colorValue = getAttribute(input, 'value') || '#fff';
     const {
-      toggleLabel, menuLabel, formatLabel, pickerLabel, appearanceLabel,
+      toggleLabel, pickerLabel, formatLabel, hexLabel,
     } = componentLabels;
     // update color
     const color = nonColors.includes(colorValue) ? '#fff' : colorValue;
-    self.color = new Color(color, { format });
+    self.color = new Color(color, format);
     // set initial controls dimensions
     // make the controls smaller on mobile
-    const cv1w = isMobile ? 150 : 230;
-    const cvh = isMobile ? 150 : 230;
-    const cv2w = 21;
     const dropClass = isMobile ? ' mobile' : '';
-    const ctrl1Labelledby = format === 'hsl' ? `appearance_${id} appearance1_${id}` : `appearance1_${id}`;
-    const ctrl2Labelledby = format === 'hsl' ? `appearance2_${id}` : `appearance_${id} appearance2_${id}`;
+    const formatString = format === 'hex' ? hexLabel : format.toUpperCase();
     const pickerBtn = createElement({
+      id: `picker-btn-${id}`,
       tagName: 'button',
-      className: 'picker-toggle button-appearance',
-      ariaExpanded: 'false',
-      ariaHasPopup: 'true',
-      ariaLive: 'polite',
+      className: 'picker-toggle btn-appearance',
     });
-    setAttribute(pickerBtn, 'tabindex', '-1');
+    setAttribute(pickerBtn, ariaExpanded, 'false');
+    setAttribute(pickerBtn, ariaHasPopup, 'true');
     pickerBtn.append(createElement({
       tagName: 'span',
       className: vHidden,
-      innerText: 'Open Color Picker',
+      innerText: `${pickerLabel}. ${formatLabel}: ${formatString}`,
     }));
-    const colorPickerDropdown = createElement({
+    const pickerDropdown = createElement({
       tagName: 'div',
       className: `color-dropdown picker${dropClass}`,
     });
-    setAttribute(colorPickerDropdown, ariaLabelledBy, `picker-label-${id} format-label-${id}`);
-    setAttribute(colorPickerDropdown, 'role', 'group');
-    colorPickerDropdown.append(
-      createElement({
-        tagName: 'label',
-        className: vHidden,
-        ariaHidden: 'true',
-        id: `picker-label-${id}`,
-        innerText: `${pickerLabel}`,
-      }),
-      createElement({
-        tagName: 'label',
-        className: vHidden,
-        ariaHidden: 'true',
-        id: `format-label-${id}`,
-        innerText: `${formatLabel}`,
-      }),
-      createElement({
-        tagName: 'label',
-        className: `color-appearance ${vHidden}`,
-        ariaHidden: 'true',
-        ariaLive: 'polite',
-        id: `appearance_${id}`,
-        innerText: `${appearanceLabel}`,
-      }),
-    );
-    const colorControls = createElement({
-      tagName: 'div',
-      className: `color-controls ${format}`,
-    });
-    colorControls.append(
-      getColorControl(1, id, cv1w, cvh, ctrl1Labelledby),
-      getColorControl(2, id, cv2w, cvh, ctrl2Labelledby),
-    );
-    if (format !== 'hex') {
-      colorControls.append(
-        getColorControl(3, id, cv2w, cvh),
-      );
-    }
+    setAttribute(pickerDropdown, ariaLabelledBy, `picker-btn-${id}`);
+    setAttribute(pickerDropdown, 'role', 'group');
-    // @ts-ignore
+    const colorControls = getColorControls(self);
     const colorForm = getColorForm(self);
-    colorPickerDropdown.append(colorControls, colorForm);
-    parent.append(pickerBtn, colorPickerDropdown);
-    // set color key menu template
-    if (keywords) {
-      const colorKeys = keywords;
+    pickerDropdown.append(colorControls, colorForm);
+    input.before(pickerBtn);
+    parent.append(pickerDropdown);
+    // set colour key menu template
+    if (colorKeywords || colorPresets) {
       const presetsDropdown = createElement({
         tagName: 'div',
-        className: `color-dropdown menu${dropClass}`,
-      });
-      const presetsMenu = createElement({
-        tagName: 'ul',
-        ariaLabel: `${menuLabel}`,
-        className: 'color-menu',
-      });
-      setAttribute(presetsMenu, 'role', 'listbox');
-      presetsDropdown.append(presetsMenu);
-      colorKeys.forEach((x) => {
-        const xKey = x.trim();
-        const xRealColor = new Color(xKey, { format }).toString();
-        const isActive = xRealColor === getAttribute(input, 'value');
-        const active = isActive ? ' active' : '';
-        const keyOption = createElement({
-          tagName: 'li',
-          className: `color-option${active}`,
-          ariaSelected: isActive ? 'true' : 'false',
-          innerText: `${x}`,
-        });
-        setAttribute(keyOption, 'role', 'option');
-        setAttribute(keyOption, 'tabindex', '0');
-        setAttribute(keyOption, 'data-value', `${xKey}`);
-        presetsMenu.append(keyOption);
+        className: `color-dropdown scrollable menu${dropClass}`,
       });
+      // color presets
+      if ((colorPresets instanceof Array && colorPresets.length)
+        || (colorPresets instanceof ColorPalette && colorPresets.colors)) {
+        const presetsMenu = getColorMenu(self, colorPresets, 'color-options');
+        presetsDropdown.append(presetsMenu);
+      }
+      // explicit defaults [reset, initial, inherit, transparent, currentColor]
+      if (colorKeywords && colorKeywords.length) {
+        const keywordsMenu = getColorMenu(self, colorKeywords, 'color-defaults');
+        presetsDropdown.append(keywordsMenu);
+      }
       const presetsBtn = createElement({
         tagName: 'button',
-        className: 'menu-toggle button-appearance',
-        ariaExpanded: 'false',
-        ariaHasPopup: 'true',
+        className: 'menu-toggle btn-appearance',
       });
+      setAttribute(presetsBtn, 'tabindex', '-1');
+      setAttribute(presetsBtn, ariaExpanded, 'false');
+      setAttribute(presetsBtn, ariaHasPopup, 'true');
       const xmlns = encodeURI('http://www.w3.org/2000/svg');
       const presetsIcon = createElementNS(xmlns, { tagName: 'svg' });
       setAttribute(presetsIcon, 'xmlns', xmlns);
-      setAttribute(presetsIcon, ariaHidden, 'true');
       setAttribute(presetsIcon, 'viewBox', '0 0 512 512');
-      const piPath = createElementNS(xmlns, { tagName: 'path' });
-      setAttribute(piPath, 'd', 'M98,158l157,156L411,158l27,27L255,368L71,185L98,158z');
-      setAttribute(piPath, 'fill', '#fff');
-      presetsIcon.append(piPath);
+      setAttribute(presetsIcon, ariaHidden, 'true');
+      const path = createElementNS(xmlns, { tagName: 'path' });
+      setAttribute(path, 'd', 'M98,158l157,156L411,158l27,27L255,368L71,185L98,158z');
+      setAttribute(path, 'fill', '#fff');
+      presetsIcon.append(path);
       presetsBtn.append(createElement({
         tagName: 'span',
         className: vHidden,
@@ -1904,9 +2493,29 @@
     }
     // solve non-colors after settings save
-    if (keywords && nonColors.includes(colorValue)) {
+    if (colorKeywords && nonColors.includes(colorValue)) {
       self.value = colorValue;
     }
+    setAttribute(input, 'tabindex', '-1');
+  }
+  /**
+   * Add / remove `ColorPicker` main event listeners.
+   * @param {ColorPicker} self
+   * @param {boolean=} action
+   */
+  function toggleEvents(self, action) {
+    const fn = action ? addListener : removeListener;
+    const { input, pickerToggle, menuToggle } = self;
+    fn(input, focusinEvent, self.showPicker);
+    fn(pickerToggle, mouseclickEvent, self.togglePicker);
+    fn(input, keydownEvent, self.keyToggle);
+    if (menuToggle) {
+      fn(menuToggle, mouseclickEvent, self.toggleMenu);
+    }
   }
   /**
@@ -1916,26 +2525,33 @@
    */
   function toggleEventsOnShown(self, action) {
     const fn = action ? addListener : removeListener;
-    const pointerEvents = 'ontouchstart' in document
-      ? { down: 'touchstart', move: 'touchmove', up: 'touchend' }
-      : { down: 'mousedown', move: 'mousemove', up: 'mouseup' };
+    const { input, colorMenu, parent } = self;
+    const doc = getDocument(input);
+    const win = getWindow(input);
+    const pointerEvents = `on${touchstartEvent}` in doc
+      ? { down: touchstartEvent, move: touchmoveEvent, up: touchendEvent }
+      : { down: mousedownEvent, move: mousemoveEvent, up: mouseupEvent };
     fn(self.controls, pointerEvents.down, self.pointerDown);
-    self.controlKnobs.forEach((x) => fn(x, 'keydown', self.handleKnobs));
+    self.controlKnobs.forEach((x) => fn(x, keydownEvent, self.handleKnobs));
-    fn(window, 'scroll', self.handleScroll);
+    // @ts-ignore -- this is `Window`
+    fn(win, scrollEvent, self.handleScroll);
+    // @ts-ignore -- this is `Window`
+    fn(win, resizeEvent, self.update);
-    [self.input, ...self.inputs].forEach((x) => fn(x, 'change', self.changeHandler));
+    [input, ...self.inputs].forEach((x) => fn(x, changeEvent, self.changeHandler));
-    if (self.colorMenu) {
-      fn(self.colorMenu, 'click', self.menuClickHandler);
-      fn(self.colorMenu, 'keydown', self.menuKeyHandler);
+    if (colorMenu) {
+      fn(colorMenu, mouseclickEvent, self.menuClickHandler);
+      fn(colorMenu, keydownEvent, self.menuKeyHandler);
     }
-    fn(document, pointerEvents.move, self.pointerMove);
-    fn(document, pointerEvents.up, self.pointerUp);
-    fn(window, 'keyup', self.handleDismiss);
-    fn(self.parent, 'focusout', self.handleFocusOut);
+    fn(doc, pointerEvents.move, self.pointerMove);
+    fn(doc, pointerEvents.up, self.pointerUp);
+    fn(parent, focusoutEvent, self.handleFocusOut);
+    // @ts-ignore -- this is `Window`
+    fn(win, keyupEvent, self.handleDismiss);
   }
   /**
@@ -1947,61 +2563,82 @@
   }
   /**
-   * Toggles the visibility of a dropdown or returns false if none is visible.
+   * Hides a visible dropdown.
    * @param {HTMLElement} element
-   * @param {boolean=} check
-   * @returns {void | boolean}
+   * @returns {void}
    */
-  function classToggle(element, check) {
-    const fn1 = !check ? 'forEach' : 'some';
-    const fn2 = !check ? removeClass : hasClass;
+  function removePosition(element) {
     if (element) {
-      return ['show', 'show-top'][fn1]((x) => fn2(element, x));
+      ['bottom', 'top'].forEach((x) => removeClass(element, x));
     }
-    return false;
   }
   /**
-   * Shows the `ColorPicker` presets menu.
+   * Shows a `ColorPicker` dropdown and close the curent open dropdown.
    * @param {ColorPicker} self
+   * @param {HTMLElement | Element} dropdown
    */
-  function showMenu(self) {
-    classToggle(self.colorPicker);
-    addClass(self.colorMenu, 'show');
+  function showDropdown(self, dropdown) {
+    const {
+      colorPicker, colorMenu, menuToggle, pickerToggle, parent,
+    } = self;
+    const isPicker = dropdown === colorPicker;
+    const openDropdown = isPicker ? colorMenu : colorPicker;
+    const activeBtn = isPicker ? menuToggle : pickerToggle;
+    const nextBtn = !isPicker ? menuToggle : pickerToggle;
+    if (!hasClass(parent, 'open')) {
+      addClass(parent, 'open');
+    }
+    if (openDropdown) {
+      removeClass(openDropdown, 'show');
+      removePosition(openDropdown);
+    }
+    addClass(dropdown, 'bottom');
+    reflow(dropdown);
+    addClass(dropdown, 'show');
+    if (isPicker) self.update();
     self.show();
-    setAttribute(self.menuToggle, ariaExpanded, 'true');
+    setAttribute(nextBtn, ariaExpanded, 'true');
+    if (activeBtn) {
+      setAttribute(activeBtn, ariaExpanded, 'false');
+    }
   }
   /**
-   * Color Picker
+   * Color Picker Web Component
    * @see http://thednp.github.io/color-picker
    */
   class ColorPicker {
     /**
-     * Returns a new ColorPicker instance.
+     * Returns a new `ColorPicker` instance. The target of this constructor
+     * must be an `HTMLInputElement`.
+     *
      * @param {HTMLInputElement | string} target the target `<input>` element
+     * @param {CP.ColorPickerOptions=} config instance options
      */
-    constructor(target) {
+    constructor(target, config) {
       const self = this;
       /** @type {HTMLInputElement} */
       // @ts-ignore
-      self.input = querySelector(target);
+      const input = querySelector(target);
       // invalidate
-      if (!self.input) throw new TypeError(`ColorPicker target ${target} cannot be found.`);
-      const { input } = self;
+      if (!input) throw new TypeError(`ColorPicker target ${target} cannot be found.`);
+      self.input = input;
+      const parent = closest(input, colorPickerParentSelector);
+      if (!parent) throw new TypeError('ColorPicker requires a specific markup to work.');
       /** @type {HTMLElement} */
       // @ts-ignore
-      self.parent = closest(input, `.${colorPickerString},${colorPickerString}`);
-      if (!self.parent) throw new TypeError('ColorPicker requires a specific markup to work.');
+      self.parent = parent;
       /** @type {number} */
       self.id = getUID(input, colorPickerString);
       // set initial state
-      /** @type {HTMLCanvasElement?} */
+      /** @type {HTMLElement?} */
       self.dragElement = null;
       /** @type {boolean} */
       self.isOpen = false;
@@ -2011,26 +2648,59 @@
       };
       /** @type {Record<string, string>} */
       self.colorLabels = {};
-      /** @type {Array<string> | false} */
-      self.keywords = false;
-      /** @type {Color} */
-      self.color = new Color('white', { format: self.format });
+      /** @type {string[]=} */
+      self.colorKeywords = undefined;
+      /** @type {(ColorPalette | string[])=} */
+      self.colorPresets = undefined;
+      // process options
+      const {
+        format, componentLabels, colorLabels, colorKeywords, colorPresets,
+      } = normalizeOptions(this.isCE ? parent : input, colorPickerDefaults, config || {});
+      let translatedColorLabels = colorNames;
+      if (colorLabels instanceof Array && colorLabels.length === 17) {
+        translatedColorLabels = colorLabels;
+      } else if (colorLabels && colorLabels.split(',').length === 17) {
+        translatedColorLabels = colorLabels.split(',');
+      }
+      // expose colour labels to all methods
+      colorNames.forEach((c, i) => {
+        self.colorLabels[c] = translatedColorLabels[i].trim();
+      });
+      // update and expose component labels
+      const tempLabels = ObjectAssign({}, colorPickerLabels);
+      const jsonLabels = componentLabels && isValidJSON(componentLabels)
+        ? JSON.parse(componentLabels) : componentLabels || {};
       /** @type {Record<string, string>} */
-      self.componentLabels = ObjectAssign({}, colorPickerLabels);
+      self.componentLabels = ObjectAssign(tempLabels, jsonLabels);
-      const { componentLabels, colorLabels, keywords } = input.dataset;
-      const temp = componentLabels ? JSON.parse(componentLabels) : {};
-      self.componentLabels = ObjectAssign(self.componentLabels, temp);
+      /** @type {Color} */
+      self.color = new Color('white', format);
-      const translatedColorLabels = colorLabels && colorLabels.split(',').length === 17
-        ? colorLabels.split(',') : colorNames$1;
+      /** @type {CP.ColorFormats} */
+      self.format = format;
-      // expose color labels to all methods
-      colorNames$1.forEach((c, i) => { self.colorLabels[c] = translatedColorLabels[i]; });
+      // set colour defaults
+      if (colorKeywords instanceof Array) {
+        self.colorKeywords = colorKeywords;
+      } else if (typeof colorKeywords === 'string' && colorKeywords.length) {
+        self.colorKeywords = colorKeywords.split(',');
+      }
       // set colour presets
-      if (keywords !== 'false') {
-        self.keywords = keywords ? keywords.split(',') : nonColors;
+      if (colorPresets instanceof Array) {
+        self.colorPresets = colorPresets;
+      } else if (typeof colorPresets === 'string' && colorPresets.length) {
+        if (isValidJSON(colorPresets)) {
+          const { hue, hueSteps, lightSteps } = JSON.parse(colorPresets);
+          self.colorPresets = new ColorPalette(hue, hueSteps, lightSteps);
+        } else {
+          self.colorPresets = colorPresets.split(',').map((x) => x.trim());
+        }
       }
       // bind events
@@ -2042,17 +2712,18 @@
       self.pointerDown = self.pointerDown.bind(self);
       self.pointerMove = self.pointerMove.bind(self);
       self.pointerUp = self.pointerUp.bind(self);
+      self.update = self.update.bind(self);
       self.handleScroll = self.handleScroll.bind(self);
       self.handleFocusOut = self.handleFocusOut.bind(self);
       self.changeHandler = self.changeHandler.bind(self);
       self.handleDismiss = self.handleDismiss.bind(self);
-      self.keyHandler = self.keyHandler.bind(self);
+      self.keyToggle = self.keyToggle.bind(self);
       self.handleKnobs = self.handleKnobs.bind(self);
       // generate markup
       initCallback(self);
-      const { parent } = self;
+      const [colorPicker, colorMenu] = getElementsByClassName('color-dropdown', parent);
       // set main elements
       /** @type {HTMLElement} */
       // @ts-ignore
@@ -2062,68 +2733,24 @@
       self.menuToggle = querySelector('.menu-toggle', parent);
       /** @type {HTMLElement} */
       // @ts-ignore
-      self.colorMenu = querySelector('.color-dropdown.menu', parent);
-      /** @type {HTMLElement} */
-      // @ts-ignore
-      self.colorPicker = querySelector('.color-dropdown.picker', parent);
+      self.colorPicker = colorPicker;
       /** @type {HTMLElement} */
       // @ts-ignore
-      self.controls = querySelector('.color-controls', parent);
+      self.colorMenu = colorMenu;
       /** @type {HTMLInputElement[]} */
       // @ts-ignore
-      self.inputs = [...querySelectorAll('.color-input', parent)];
+      self.inputs = [...getElementsByClassName('color-input', parent)];
+      const [controls] = getElementsByClassName('color-controls', parent);
+      self.controls = controls;
+      /** @type {(HTMLElement | Element)[]} */
+      self.controlKnobs = [...getElementsByClassName('knob', controls)];
       /** @type {(HTMLElement)[]} */
       // @ts-ignore
-      self.controlKnobs = [...querySelectorAll('.knob', parent)];
-      /** @type {HTMLCanvasElement[]} */
-      // @ts-ignore
-      self.visuals = [...querySelectorAll('canvas', self.controls)];
-      /** @type {HTMLLabelElement[]} */
-      // @ts-ignore
-      self.knobLabels = [...querySelectorAll('.color-label', parent)];
-      /** @type {HTMLLabelElement} */
-      // @ts-ignore
-      self.appearance = querySelector('.color-appearance', parent);
-      const [v1, v2, v3] = self.visuals;
-      // set dimensions
-      /** @type {number} */
-      self.width1 = v1.width;
-      /** @type {number} */
-      self.height1 = v1.height;
-      /** @type {number} */
-      self.width2 = v2.width;
-      /** @type {number} */
-      self.height2 = v2.height;
-      // set main controls
-      /** @type {*} */
-      self.ctx1 = v1.getContext('2d');
-      /** @type {*} */
-      self.ctx2 = v2.getContext('2d');
-      self.ctx1.rect(0, 0, self.width1, self.height1);
-      self.ctx2.rect(0, 0, self.width2, self.height2);
+      self.visuals = [...getElementsByClassName('visual-control', controls)];
-      /** @type {number} */
-      self.width3 = 0;
-      /** @type {number} */
-      self.height3 = 0;
-      // set alpha control except hex
-      if (self.format !== 'hex') {
-        self.width3 = v3.width;
-        self.height3 = v3.height;
-        /** @type {*} */
-        this.ctx3 = v3.getContext('2d');
-        self.ctx3.rect(0, 0, self.width3, self.height3);
-      }
+      // update colour picker controls, inputs and visuals
+      self.update();
-      // update color picker controls, inputs and visuals
-      this.setControlPositions();
-      this.setColorAppearence();
-      // don't trigger change at initialization
-      this.updateInputs(true);
-      this.updateControls();
-      this.updateVisuals();
       // add main events listeners
       toggleEvents(self, true);
@@ -2131,65 +2758,52 @@
       Data.set(input, colorPickerString, self);
     }
-    /** Returns the current color value */
+    /** Returns the current colour value */
     get value() { return this.input.value; }
     /**
-     * Sets a new color value.
-     * @param {string} v new color value
+     * Sets a new colour value.
+     * @param {string} v new colour value
      */
     set value(v) { this.input.value = v; }
-    /** Check if the input is required to have a valid value. */
-    get required() { return hasAttribute(this.input, 'required'); }
-    /**
-     * Returns the colour format.
-     * @returns {CP.ColorFormats | string}
-     */
-    get format() { return getAttribute(this.input, 'format') || 'hex'; }
-    /** Returns the input name. */
-    get name() { return getAttribute(this.input, 'name'); }
-    /**
-     * Returns the label associated to the input.
-     * @returns {HTMLLabelElement?}
-     */
-    // @ts-ignore
-    get label() { return querySelector(`[for="${this.input.id}"]`); }
-    /** Check if the color presets include any non-color. */
+    /** Check if the colour presets include any non-colour. */
     get includeNonColor() {
-      return this.keywords instanceof Array
-        && this.keywords.some((x) => nonColors.includes(x));
+      return this.colorKeywords instanceof Array
+        && this.colorKeywords.some((x) => nonColors.includes(x));
     }
-    /** Returns hexadecimal value of the current color. */
-    get hex() { return this.color.toHex(); }
+    /** Check if the parent of the target is a `ColorPickerElement` instance. */
+    get isCE() { return this.parent.localName === colorPickerString; }
+    /** Returns hexadecimal value of the current colour. */
+    get hex() { return this.color.toHex(true); }
-    /** Returns the current color value in {h,s,v,a} object format. */
+    /** Returns the current colour value in {h,s,v,a} object format. */
     get hsv() { return this.color.toHsv(); }
-    /** Returns the current color value in {h,s,l,a} object format. */
+    /** Returns the current colour value in {h,s,l,a} object format. */
     get hsl() { return this.color.toHsl(); }
-    /** Returns the current color value in {r,g,b,a} object format. */
+    /** Returns the current colour value in {h,w,b,a} object format. */
+    get hwb() { return this.color.toHwb(); }
+    /** Returns the current colour value in {r,g,b,a} object format. */
     get rgb() { return this.color.toRgb(); }
-    /** Returns the current color brightness. */
+    /** Returns the current colour brightness. */
     get brightness() { return this.color.brightness; }
-    /** Returns the current color luminance. */
+    /** Returns the current colour luminance. */
     get luminance() { return this.color.luminance; }
-    /** Checks if the current colour requires a light text color. */
+    /** Checks if the current colour requires a light text colour. */
     get isDark() {
-      const { rgb, brightness } = this;
-      return brightness < 120 && rgb.a > 0.33;
+      const { color, brightness } = this;
+      return brightness < 120 && color.a > 0.33;
     }
-    /** Checks if the current input value is a valid color. */
+    /** Checks if the current input value is a valid colour. */
     get isValid() {
       const inputValue = this.input.value;
       return inputValue !== '' && new Color(inputValue).isValid;
@@ -2199,89 +2813,79 @@
     updateVisuals() {
       const self = this;
       const {
-        color, format, controlPositions,
-        width1, width2, width3,
-        height1, height2, height3,
-        ctx1, ctx2, ctx3,
+        format, controlPositions, visuals,
       } = self;
-      const { r, g, b } = color;
+      const [v1, v2, v3] = visuals;
+      const { offsetWidth, offsetHeight } = v1;
+      const hue = format === 'hsl'
+        ? controlPositions.c1x / offsetWidth
+        : controlPositions.c2y / offsetHeight;
+      // @ts-ignore - `hslToRgb` is assigned to `Color` as static method
+      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;
       if (format !== 'hsl') {
-        const hue = Math.round((controlPositions.c2y / height2) * 360);
-        ctx1.fillStyle = new Color(`hsl(${hue},100%,50%})`).toRgbString();
-        ctx1.fillRect(0, 0, width1, height1);
-        const whiteGrad = ctx2.createLinearGradient(0, 0, width1, 0);
-        whiteGrad.addColorStop(0, 'rgba(255,255,255,1)');
-        whiteGrad.addColorStop(1, 'rgba(255,255,255,0)');
-        ctx1.fillStyle = whiteGrad;
-        ctx1.fillRect(0, 0, width1, height1);
-        const blackGrad = ctx2.createLinearGradient(0, 0, 0, height1);
-        blackGrad.addColorStop(0, 'rgba(0,0,0,0)');
-        blackGrad.addColorStop(1, 'rgba(0,0,0,1)');
-        ctx1.fillStyle = blackGrad;
-        ctx1.fillRect(0, 0, width1, height1);
-        const hueGrad = ctx2.createLinearGradient(0, 0, 0, height1);
-        hueGrad.addColorStop(0, 'rgba(255,0,0,1)');
-        hueGrad.addColorStop(0.17, 'rgba(255,255,0,1)');
-        hueGrad.addColorStop(0.34, 'rgba(0,255,0,1)');
-        hueGrad.addColorStop(0.51, 'rgba(0,255,255,1)');
-        hueGrad.addColorStop(0.68, 'rgba(0,0,255,1)');
-        hueGrad.addColorStop(0.85, 'rgba(255,0,255,1)');
-        hueGrad.addColorStop(1, 'rgba(255,0,0,1)');
-        ctx2.fillStyle = hueGrad;
-        ctx2.fillRect(0, 0, width2, height2);
+        const fill = new Color({
+          h: hue, s: 1, l: 0.5, a: alpha,
+        }).toRgbString();
+        const hueGradient = `linear-gradient(
+        rgb(255,0,0) 0%, rgb(255,255,0) 16.67%,
+        rgb(0,255,0) 33.33%, rgb(0,255,255) 50%,
+        rgb(0,0,255) 66.67%, rgb(255,0,255) 83.33%,
+        rgb(255,0,0) 100%)`;
+        setElementStyle(v1, {
+          background: `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,${roundA}) 100%),
+        linear-gradient(to right, rgba(255,255,255,${roundA}) 0%, ${fill} 100%),
+        ${whiteGrad}`,
+        });
+        setElementStyle(v2, { background: hueGradient });
       } else {
-        const hueGrad = ctx1.createLinearGradient(0, 0, width1, 0);
-        const saturation = Math.round((1 - controlPositions.c2y / height2) * 100);
-        hueGrad.addColorStop(0, new Color('rgba(255,0,0,1)').desaturate(100 - saturation).toRgbString());
-        hueGrad.addColorStop(0.17, new Color('rgba(255,255,0,1)').desaturate(100 - saturation).toRgbString());
-        hueGrad.addColorStop(0.34, new Color('rgba(0,255,0,1)').desaturate(100 - saturation).toRgbString());
-        hueGrad.addColorStop(0.51, new Color('rgba(0,255,255,1)').desaturate(100 - saturation).toRgbString());
-        hueGrad.addColorStop(0.68, new Color('rgba(0,0,255,1)').desaturate(100 - saturation).toRgbString());
-        hueGrad.addColorStop(0.85, new Color('rgba(255,0,255,1)').desaturate(100 - saturation).toRgbString());
-        hueGrad.addColorStop(1, new Color('rgba(255,0,0,1)').desaturate(100 - saturation).toRgbString());
-        ctx1.fillStyle = hueGrad;
-        ctx1.fillRect(0, 0, width1, height1);
-        const whiteGrad = ctx1.createLinearGradient(0, 0, 0, height1);
-        whiteGrad.addColorStop(0, 'rgba(255,255,255,1)');
-        whiteGrad.addColorStop(0.5, 'rgba(255,255,255,0)');
-        ctx1.fillStyle = whiteGrad;
-        ctx1.fillRect(0, 0, width1, height1);
-        const blackGrad = ctx1.createLinearGradient(0, 0, 0, height1);
-        blackGrad.addColorStop(0.5, 'rgba(0,0,0,0)');
-        blackGrad.addColorStop(1, 'rgba(0,0,0,1)');
-        ctx1.fillStyle = blackGrad;
-        ctx1.fillRect(0, 0, width1, height1);
-        const saturationGrad = ctx2.createLinearGradient(0, 0, 0, height2);
-        const incolor = color.clone().greyscale().toRgb();
-        saturationGrad.addColorStop(0, `rgba(${r},${g},${b},1)`);
-        saturationGrad.addColorStop(1, `rgba(${incolor.r},${incolor.g},${incolor.b},1)`);
-        ctx2.fillStyle = saturationGrad;
-        ctx2.fillRect(0, 0, width3, height3);
-      }
-      if (format !== 'hex') {
-        ctx3.clearRect(0, 0, width3, height3);
-        const alphaGrad = ctx3.createLinearGradient(0, 0, 0, height3);
-        alphaGrad.addColorStop(0, `rgba(${r},${g},${b},1)`);
-        alphaGrad.addColorStop(1, `rgba(${r},${g},${b},0)`);
-        ctx3.fillStyle = alphaGrad;
-        ctx3.fillRect(0, 0, width3, height3);
+        const saturation = Math.round((controlPositions.c2y / offsetHeight) * 100);
+        const fill0 = new Color({
+          r: 255, g: 0, b: 0, a: alpha,
+        }).saturate(-saturation).toRgbString();
+        const fill1 = new Color({
+          r: 255, g: 255, b: 0, a: alpha,
+        }).saturate(-saturation).toRgbString();
+        const fill2 = new Color({
+          r: 0, g: 255, b: 0, a: alpha,
+        }).saturate(-saturation).toRgbString();
+        const fill3 = new Color({
+          r: 0, g: 255, b: 255, a: alpha,
+        }).saturate(-saturation).toRgbString();
+        const fill4 = new Color({
+          r: 0, g: 0, b: 255, a: alpha,
+        }).saturate(-saturation).toRgbString();
+        const fill5 = new Color({
+          r: 255, g: 0, b: 255, a: alpha,
+        }).saturate(-saturation).toRgbString();
+        const fill6 = new Color({
+          r: 255, g: 0, b: 0, a: alpha,
+        }).saturate(-saturation).toRgbString();
+        const fillGradient = `linear-gradient(to right,
+        ${fill0} 0%, ${fill1} 16.67%, ${fill2} 33.33%, ${fill3} 50%,
+        ${fill4} 66.67%, ${fill5} 83.33%, ${fill6} 100%)`;
+        const lightGrad = `linear-gradient(rgba(255,255,255,${roundA}) 0%, rgba(255,255,255,0) 50%),
+        linear-gradient(rgba(0,0,0,0) 50%, rgba(0,0,0,${roundA}) 100%)`;
+        setElementStyle(v1, { background: `${lightGrad},${fillGradient},${whiteGrad}` });
+        const {
+          r: gr, g: gg, b: gb,
+        } = new Color({ r, g, b }).greyscale().toRgb();
+        setElementStyle(v2, {
+          background: `linear-gradient(rgb(${r},${g},${b}) 0%, rgb(${gr},${gg},${gb}) 100%)`,
+        });
       }
+      setElementStyle(v3, {
+        background: `linear-gradient(rgba(${r},${g},${b},1) 0%,rgba(${r},${g},${b},0) 100%)`,
+      });
     }
     /**
-     * Handles the `focusout` listener of the `ColorPicker`.
+     * The `ColorPicker` *focusout* event listener when open.
      * @param {FocusEvent} e
      * @this {ColorPicker}
      */
@@ -2293,7 +2897,7 @@
     }
     /**
-     * Handles the `focusout` listener of the `ColorPicker`.
+     * The `ColorPicker` *keyup* event listener when open.
      * @param {KeyboardEvent} e
      * @this {ColorPicker}
      */
@@ -2305,14 +2909,13 @@
     }
     /**
-     * Handles the `ColorPicker` scroll listener when open.
+     * The `ColorPicker` *scroll* event listener when open.
      * @param {Event} e
      * @this {ColorPicker}
      */
     handleScroll(e) {
       const self = this;
-      /** @type {*} */
-      const { activeElement } = document;
+      const { activeElement } = getDocument(self.input);
       if ((isMobile && self.dragElement)
         || (activeElement && self.controlKnobs.includes(activeElement))) {
@@ -2324,22 +2927,51 @@
     }
     /**
-     * Handles all `ColorPicker` click listeners.
+     * The `ColorPicker` keyboard event listener for menu navigation.
      * @param {KeyboardEvent} e
      * @this {ColorPicker}
      */
     menuKeyHandler(e) {
       const { target, code } = e;
-      if ([keyArrowDown, keyArrowUp].includes(code)) {
+      // @ts-ignore
+      const { previousElementSibling, nextElementSibling, parentElement } = target;
+      const isColorOptionsMenu = parentElement && hasClass(parentElement, 'color-options');
+      const allSiblings = [...parentElement.children];
+      const columnsCount = isColorOptionsMenu
+        && getElementStyle(parentElement, 'grid-template-columns').split(' ').length;
+      const currentIndex = allSiblings.indexOf(target);
+      const previousElement = currentIndex > -1
+        && columnsCount && allSiblings[currentIndex - columnsCount];
+      const nextElement = currentIndex > -1
+        && columnsCount && allSiblings[currentIndex + columnsCount];
+      if ([keyArrowDown, keyArrowUp, keySpace].includes(code)) {
+        // prevent scroll when navigating the menu via arrow keys / Space
         e.preventDefault();
-      } else if ([keyEnter, keySpace].includes(code)) {
+      }
+      if (isColorOptionsMenu) {
+        if (previousElement && code === keyArrowUp) {
+          focus(previousElement);
+        } else if (nextElement && code === keyArrowDown) {
+          focus(nextElement);
+        } else if (previousElementSibling && code === keyArrowLeft) {
+          focus(previousElementSibling);
+        } else if (nextElementSibling && code === keyArrowRight) {
+          focus(nextElementSibling);
+        }
+      } else if (previousElementSibling && [keyArrowLeft, keyArrowUp].includes(code)) {
+        focus(previousElementSibling);
+      } else if (nextElementSibling && [keyArrowRight, keyArrowDown].includes(code)) {
+        focus(nextElementSibling);
+      }
+      if ([keyEnter, keySpace].includes(code)) {
         this.menuClickHandler({ target });
       }
     }
     /**
-     * Handles all `ColorPicker` click listeners.
+     * The `ColorPicker` click event listener for the colour menu presets / defaults.
      * @param {Partial<Event>} e
      * @this {ColorPicker}
      */
@@ -2347,16 +2979,23 @@
       const self = this;
       /** @type {*} */
       const { target } = e;
-      const { format } = self;
+      const { colorMenu } = self;
       const newOption = (getAttribute(target, 'data-value') || '').trim();
-      const currentActive = self.colorMenu.querySelector('li.active');
-      const newColor = nonColors.includes(newOption) ? 'white' : newOption;
-      self.color = new Color(newColor, { format });
-      self.setControlPositions();
-      self.setColorAppearence();
-      self.updateInputs(true);
-      self.updateControls();
-      self.updateVisuals();
+      // invalidate for targets other than color options
+      if (!newOption.length) return;
+      const currentActive = querySelector('li.active', colorMenu);
+      let newColor = nonColors.includes(newOption) ? 'white' : newOption;
+      newColor = newOption === 'transparent' ? 'rgba(0,0,0,0)' : newOption;
+      const {
+        r, g, b, a,
+      } = new Color(newColor);
+      ObjectAssign(self.color, {
+        r, g, b, a,
+      });
+      self.update();
       if (currentActive) {
         removeClass(currentActive, 'active');
@@ -2369,29 +3008,28 @@
         if (nonColors.includes(newOption)) {
           self.value = newOption;
-          firePickerChange(self);
         }
+        firePickerChange(self);
       }
     }
     /**
-     * Handles the `ColorPicker` touchstart / mousedown events listeners.
+     * The `ColorPicker` *touchstart* / *mousedown* events listener for control knobs.
      * @param {TouchEvent} e
      * @this {ColorPicker}
      */
     pointerDown(e) {
       const self = this;
+      /** @type {*} */
       const {
-        // @ts-ignore
         type, target, touches, pageX, pageY,
       } = e;
-      const { visuals, controlKnobs, format } = self;
+      const { colorMenu, visuals, controlKnobs } = self;
       const [v1, v2, v3] = visuals;
       const [c1, c2, c3] = controlKnobs;
-      /** @type {HTMLCanvasElement} */
-      // @ts-ignore
-      const visual = target.tagName === 'canvas' // @ts-ignore
-        ? target : querySelector('canvas', target.parentElement);
+      /** @type {HTMLElement} */
+      const visual = hasClass(target, 'visual-control')
+        ? target : querySelector('.visual-control', target.parentElement);
       const visualRect = getBoundingClientRect(visual);
       const X = type === 'touchstart' ? touches[0].pageX : pageX;
       const Y = type === 'touchstart' ? touches[0].pageY : pageY;
@@ -2400,42 +3038,53 @@
       if (target === v1 || target === c1) {
         self.dragElement = visual;
-        self.changeControl1({ offsetX, offsetY });
+        self.changeControl1(offsetX, offsetY);
       } else if (target === v2 || target === c2) {
         self.dragElement = visual;
-        self.changeControl2({ offsetY });
-      } else if (format !== 'hex' && (target === v3 || target === c3)) {
+        self.changeControl2(offsetY);
+      } else if (target === v3 || target === c3) {
         self.dragElement = visual;
-        self.changeAlpha({ offsetY });
+        self.changeAlpha(offsetY);
+      }
+      if (colorMenu) {
+        const currentActive = querySelector('li.active', colorMenu);
+        if (currentActive) {
+          removeClass(currentActive, 'active');
+          removeAttribute(currentActive, ariaSelected);
+        }
       }
       e.preventDefault();
     }
     /**
-     * Handles the `ColorPicker` touchend / mouseup events listeners.
+     * The `ColorPicker` *touchend* / *mouseup* events listener for control knobs.
      * @param {TouchEvent} e
      * @this {ColorPicker}
      */
     pointerUp({ target }) {
       const self = this;
-      const selection = document.getSelection();
+      const { parent } = self;
+      const doc = getDocument(parent);
+      const currentOpen = querySelector(`${colorPickerParentSelector}.open`, doc) !== null;
+      const selection = doc.getSelection();
       // @ts-ignore
       if (!self.dragElement && !selection.toString().length
         // @ts-ignore
-        && !self.parent.contains(target)) {
-        self.hide();
+        && !parent.contains(target)) {
+        self.hide(currentOpen);
       }
       self.dragElement = null;
     }
     /**
-     * Handles the `ColorPicker` touchmove / mousemove events listeners.
+     * The `ColorPicker` *touchmove* / *mousemove* events listener for control knobs.
      * @param {TouchEvent} e
      */
     pointerMove(e) {
       const self = this;
-      const { dragElement, visuals, format } = self;
+      const { dragElement, visuals } = self;
       const [v1, v2, v3] = visuals;
       const {
         // @ts-ignore
@@ -2451,20 +3100,20 @@
       const offsetY = Y - window.pageYOffset - controlRect.top;
       if (dragElement === v1) {
-        self.changeControl1({ offsetX, offsetY });
+        self.changeControl1(offsetX, offsetY);
       }
       if (dragElement === v2) {
-        self.changeControl2({ offsetY });
+        self.changeControl2(offsetY);
       }
-      if (dragElement === v3 && format !== 'hex') {
-        self.changeAlpha({ offsetY });
+      if (dragElement === v3) {
+        self.changeAlpha(offsetY);
       }
     }
     /**
-     * Handles the `ColorPicker` events listeners associated with the color knobs.
+     * The `ColorPicker` *keydown* event listener for control knobs.
      * @param {KeyboardEvent} e
      */
     handleKnobs(e) {
@@ -2475,10 +3124,10 @@
       if (![keyArrowUp, keyArrowDown, keyArrowLeft, keyArrowRight].includes(code)) return;
       e.preventDefault();
-      const { activeElement } = document;
       const { controlKnobs } = self;
-      const currentKnob = controlKnobs.find((x) => x === activeElement);
       const [c1, c2, c3] = controlKnobs;
+      const { activeElement } = getDocument(c1);
+      const currentKnob = controlKnobs.find((x) => x === activeElement);
       if (currentKnob) {
         let offsetX = 0;
@@ -2492,37 +3141,36 @@
           offsetX = self.controlPositions.c1x;
           offsetY = self.controlPositions.c1y;
-          self.changeControl1({ offsetX, offsetY });
+          self.changeControl1(offsetX, offsetY);
         } else if (target === c2) {
           self.controlPositions.c2y += [keyArrowDown, keyArrowRight].includes(code) ? +1 : -1;
           offsetY = self.controlPositions.c2y;
-          self.changeControl2({ offsetY });
+          self.changeControl2(offsetY);
         } else if (target === c3) {
           self.controlPositions.c3y += [keyArrowDown, keyArrowRight].includes(code) ? +1 : -1;
           offsetY = self.controlPositions.c3y;
-          self.changeAlpha({ offsetY });
+          self.changeAlpha(offsetY);
         }
-        self.setColorAppearence();
-        self.updateInputs();
-        self.updateControls();
-        self.updateVisuals();
         self.handleScroll(e);
       }
     }
-    /** Handles the event listeners of the color form. */
+    /** The event listener of the colour form inputs. */
     changeHandler() {
       const self = this;
       let colorSource;
-      /** @type {HTMLInputElement} */
-      // @ts-ignore
-      const { activeElement } = document;
       const {
-        inputs, format, value: currentValue, input,
+        inputs, format, value: currentValue, input, controlPositions, visuals,
       } = self;
-      const [i1, i2, i3, i4] = inputs;
+      /** @type {*} */
+      const { activeElement } = getDocument(input);
+      const { offsetHeight } = visuals[0];
+      const [i1,,, i4] = inputs;
+      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 alpha = i4 ? v4 : (1 - controlPositions.c3y / offsetHeight);
       if (activeElement === input || (activeElement && inputs.includes(activeElement))) {
         if (activeElement === input) {
@@ -2534,14 +3182,28 @@
         } else if (format === 'hex') {
           colorSource = i1.value;
         } else if (format === 'hsl') {
-          colorSource = `hsla(${i1.value},${i2.value}%,${i3.value}%,${i4.value})`;
+          colorSource = {
+            h: v1, s: v2, l: v3, a: alpha,
+          };
+        } else if (format === 'hwb') {
+          colorSource = {
+            h: v1, w: v2, b: v3, a: alpha,
+          };
         } else {
-          colorSource = `rgba(${inputs.map((x) => x.value).join(',')})`;
+          colorSource = {
+            r: v1, g: v2, b: v3, a: alpha,
+          };
         }
-        self.color = new Color(colorSource, { format });
+        const {
+          r, g, b, a,
+        } = new Color(colorSource);
+        ObjectAssign(self.color, {
+          r, g, b, a,
+        });
         self.setControlPositions();
-        self.setColorAppearence();
+        self.updateAppearance();
         self.updateInputs();
         self.updateControls();
         self.updateVisuals();
@@ -2558,49 +3220,57 @@
      * * `lightness` and `saturation` for HEX/RGB;
      * * `lightness` and `hue` for HSL.
      *
-     * @param {Record<string, number>} offsets
+     * @param {number} X the X component of the offset
+     * @param {number} Y the Y component of the offset
      */
-    changeControl1(offsets) {
+    changeControl1(X, Y) {
       const self = this;
       let [offsetX, offsetY] = [0, 0];
-      const { offsetX: X, offsetY: Y } = offsets;
       const {
-        format, controlPositions,
-        height1, height2, height3, width1,
+        format, controlPositions, visuals,
       } = self;
+      const { offsetHeight, offsetWidth } = visuals[0];
-      if (X > width1) {
-        offsetX = width1;
-      } else if (X >= 0) {
-        offsetX = X;
-      }
+      if (X > offsetWidth) offsetX = offsetWidth;
+      else if (X >= 0) offsetX = X;
-      if (Y > height1) {
-        offsetY = height1;
-      } else if (Y >= 0) {
-        offsetY = Y;
-      }
+      if (Y > offsetHeight) offsetY = offsetHeight;
+      else if (Y >= 0) offsetY = Y;
+      const hue = format === 'hsl'
+        ? offsetX / offsetWidth
+        : controlPositions.c2y / offsetHeight;
-      const hue = format !== 'hsl'
-        ? Math.round((controlPositions.c2y / height2) * 360)
-        : Math.round((offsetX / width1) * 360);
+      const saturation = format === 'hsl'
+        ? 1 - controlPositions.c2y / offsetHeight
+        : offsetX / offsetWidth;
-      const saturation = format !== 'hsl'
-        ? Math.round((offsetX / width1) * 100)
-        : Math.round((1 - controlPositions.c2y / height2) * 100);
+      const lightness = 1 - offsetY / offsetHeight;
+      const alpha = 1 - controlPositions.c3y / offsetHeight;
-      const lightness = Math.round((1 - offsetY / height1) * 100);
-      const alpha = format !== 'hex' ? Math.round((1 - controlPositions.c3y / height3) * 100) / 100 : 1;
-      const tempFormat = format !== 'hsl' ? 'hsva' : 'hsla';
+      const colorObject = format === 'hsl'
+        ? {
+          h: hue, s: saturation, l: lightness, a: alpha,
+        }
+        : {
+          h: hue, s: saturation, v: lightness, a: alpha,
+        };
       // new color
-      self.color = new Color(`${tempFormat}(${hue},${saturation}%,${lightness}%,${alpha})`, { format });
+      const {
+        r, g, b, a,
+      } = new Color(colorObject);
+      ObjectAssign(self.color, {
+        r, g, b, a,
+      });
       // new positions
       self.controlPositions.c1x = offsetX;
       self.controlPositions.c1y = offsetY;
       // update color picker
-      self.setColorAppearence();
+      self.updateAppearance();
       self.updateInputs();
       self.updateControls();
       self.updateVisuals();
@@ -2608,37 +3278,52 @@
     /**
      * Updates `ColorPicker` second control:
-     * * `hue` for HEX/RGB;
+     * * `hue` for HEX/RGB/HWB;
      * * `saturation` for HSL.
      *
-     * @param {Record<string, number>} offset
+     * @param {number} Y the Y offset
      */
-    changeControl2(offset) {
+    changeControl2(Y) {
       const self = this;
-      const { offsetY: Y } = offset;
       const {
-        format, width1, height1, height2, height3, controlPositions,
+        format, controlPositions, visuals,
       } = self;
-      let offsetY = 0;
+      const { offsetHeight, offsetWidth } = visuals[0];
-      if (Y > height2) {
-        offsetY = height2;
-      } else if (Y >= 0) {
-        offsetY = Y;
-      }
+      let offsetY = 0;
-      const hue = format !== 'hsl' ? Math.round((offsetY / height2) * 360) : Math.round((controlPositions.c1x / width1) * 360);
-      const saturation = format !== 'hsl' ? Math.round((controlPositions.c1x / width1) * 100) : Math.round((1 - offsetY / height2) * 100);
-      const lightness = Math.round((1 - controlPositions.c1y / height1) * 100);
-      const alpha = format !== 'hex' ? Math.round((1 - controlPositions.c3y / height3) * 100) / 100 : 1;
-      const colorFormat = format !== 'hsl' ? 'hsva' : 'hsla';
+      if (Y > offsetHeight) offsetY = offsetHeight;
+      else if (Y >= 0) offsetY = Y;
+      const hue = format === 'hsl'
+        ? controlPositions.c1x / offsetWidth
+        : offsetY / offsetHeight;
+      const saturation = format === 'hsl'
+        ? 1 - offsetY / offsetHeight
+        : controlPositions.c1x / offsetWidth;
+      const lightness = 1 - controlPositions.c1y / offsetHeight;
+      const alpha = 1 - controlPositions.c3y / offsetHeight;
+      const colorObject = format === 'hsl'
+        ? {
+          h: hue, s: saturation, l: lightness, a: alpha,
+        }
+        : {
+          h: hue, s: saturation, v: lightness, a: alpha,
+        };
       // new color
-      self.color = new Color(`${colorFormat}(${hue},${saturation}%,${lightness}%,${alpha})`, { format });
+      const {
+        r, g, b, a,
+      } = new Color(colorObject);
+      ObjectAssign(self.color, {
+        r, g, b, a,
+      });
       // new position
       self.controlPositions.c2y = offsetY;
       // update color picker
-      self.setColorAppearence();
+      self.updateAppearance();
       self.updateInputs();
       self.updateControls();
       self.updateVisuals();
@@ -2646,92 +3331,105 @@
     /**
      * Updates `ColorPicker` last control,
-     * the `alpha` channel for RGB/HSL.
+     * the `alpha` channel.
      *
-     * @param {Record<string, number>} offset
+     * @param {number} Y
      */
-    changeAlpha(offset) {
+    changeAlpha(Y) {
       const self = this;
-      const { height3 } = self;
-      const { offsetY: Y } = offset;
+      const { visuals } = self;
+      const { offsetHeight } = visuals[0];
       let offsetY = 0;
-      if (Y > height3) {
-        offsetY = height3;
-      } else if (Y >= 0) {
-        offsetY = Y;
-      }
+      if (Y > offsetHeight) offsetY = offsetHeight;
+      else if (Y >= 0) offsetY = Y;
       // update color alpha
-      const alpha = Math.round((1 - offsetY / height3) * 100);
-      self.color.setAlpha(alpha / 100);
+      const alpha = 1 - offsetY / offsetHeight;
+      self.color.setAlpha(alpha);
       // update position
       self.controlPositions.c3y = offsetY;
       // update color picker
+      self.updateAppearance();
       self.updateInputs();
       self.updateControls();
-      // alpha?
       self.updateVisuals();
     }
-    /** Update opened dropdown position on scroll. */
+    /**
+     * Updates `ColorPicker` control positions on:
+     * * initialization
+     * * window resize
+     */
+    update() {
+      const self = this;
+      self.updateDropdownPosition();
+      self.updateAppearance();
+      self.setControlPositions();
+      self.updateInputs(true);
+      self.updateControls();
+      self.updateVisuals();
+    }
+    /** Updates the open dropdown position on *scroll* event. */
     updateDropdownPosition() {
       const self = this;
       const { input, colorPicker, colorMenu } = self;
       const elRect = getBoundingClientRect(input);
+      const { top, bottom } = elRect;
       const { offsetHeight: elHeight } = input;
-      const windowHeight = document.documentElement.clientHeight;
-      const isPicker = classToggle(colorPicker, true);
+      const windowHeight = getDocumentElement(input).clientHeight;
+      const isPicker = hasClass(colorPicker, 'show');
       const dropdown = isPicker ? colorPicker : colorMenu;
+      if (!dropdown) return;
       const { offsetHeight: dropHeight } = dropdown;
-      const distanceBottom = windowHeight - elRect.bottom;
-      const distanceTop = elRect.top;
-      const bottomExceed = elRect.top + dropHeight + elHeight > windowHeight; // show
-      const topExceed = elRect.top - dropHeight < 0; // show-top
-      if (hasClass(dropdown, 'show') && distanceBottom < distanceTop && bottomExceed) {
-        removeClass(dropdown, 'show');
-        addClass(dropdown, 'show-top');
-      }
-      if (hasClass(dropdown, 'show-top') && distanceBottom > distanceTop && topExceed) {
-        removeClass(dropdown, 'show-top');
-        addClass(dropdown, 'show');
+      const distanceBottom = windowHeight - bottom;
+      const distanceTop = top;
+      const bottomExceed = top + dropHeight + elHeight > windowHeight; // show
+      const topExceed = top - dropHeight < 0; // show-top
+      if ((hasClass(dropdown, 'bottom') || !topExceed) && distanceBottom < distanceTop && bottomExceed) {
+        removeClass(dropdown, 'bottom');
+        addClass(dropdown, 'top');
+      } else {
+        removeClass(dropdown, 'top');
+        addClass(dropdown, 'bottom');
       }
     }
-    /** Update control knobs' positions. */
+    /** Updates control knobs' positions. */
     setControlPositions() {
       const self = this;
       const {
-        hsv, hsl, format, height1, height2, height3, width1,
+        format, visuals, color, hsl, hsv,
       } = self;
+      const { offsetHeight, offsetWidth } = visuals[0];
+      const alpha = color.a;
       const hue = hsl.h;
       const saturation = format !== 'hsl' ? hsv.s : hsl.s;
       const lightness = format !== 'hsl' ? hsv.v : hsl.l;
-      const alpha = hsv.a;
-      self.controlPositions.c1x = format !== 'hsl' ? saturation * width1 : (hue / 360) * width1;
-      self.controlPositions.c1y = (1 - lightness) * height1;
-      self.controlPositions.c2y = format !== 'hsl' ? (hue / 360) * height2 : (1 - saturation) * height2;
-      if (format !== 'hex') {
-        self.controlPositions.c3y = (1 - alpha) * height3;
-      }
+      self.controlPositions.c1x = format !== 'hsl' ? saturation * offsetWidth : hue * offsetWidth;
+      self.controlPositions.c1y = (1 - lightness) * offsetHeight;
+      self.controlPositions.c2y = format !== 'hsl' ? hue * offsetHeight : (1 - saturation) * offsetHeight;
+      self.controlPositions.c3y = (1 - alpha) * offsetHeight;
     }
-    /** Update the visual appearance label. */
-    setColorAppearence() {
+    /** Update the visual appearance label and control knob labels. */
+    updateAppearance() {
       const self = this;
       const {
-        componentLabels, colorLabels, hsl, hsv, hex, format, knobLabels,
+        componentLabels, colorLabels, color, parent,
+        hsl, hsv, hex, format, controlKnobs,
       } = self;
       const {
-        lightnessLabel, saturationLabel, hueLabel, alphaLabel, appearanceLabel, hexLabel,
+        appearanceLabel, hexLabel, valueLabel,
       } = componentLabels;
-      let { requiredLabel } = componentLabels;
-      const [knob1Lbl, knob2Lbl, knob3Lbl] = knobLabels;
-      const hue = Math.round(hsl.h);
-      const alpha = hsv.a;
+      const { r, g, b } = color.toRgb();
+      const [knob1, knob2, knob3] = controlKnobs;
+      const hue = Math.round(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);
@@ -2770,99 +3468,111 @@
         colorName = colorLabels.pink;
       }
+      let colorLabel = `${hexLabel} ${hex.split('').join(' ')}`;
       if (format === 'hsl') {
-        knob1Lbl.innerText = `${hueLabel}: ${hue}°. ${lightnessLabel}: ${lightness}%`;
-        knob2Lbl.innerText = `${saturationLabel}: ${saturation}%`;
+        colorLabel = `HSL: ${hue}°, ${saturation}%, ${lightness}%`;
+        setAttribute(knob1, ariaDescription, `${valueLabel}: ${colorLabel}. ${appearanceLabel}: ${colorName}.`);
+        setAttribute(knob1, ariaValueText, `${hue}° & ${lightness}%`);
+        setAttribute(knob1, ariaValueNow, `${hue}`);
+        setAttribute(knob2, ariaValueText, `${saturation}%`);
+        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);
+        colorLabel = `HWB: ${hue}°, ${whiteness}%, ${blackness}%`;
+        setAttribute(knob1, ariaDescription, `${valueLabel}: ${colorLabel}. ${appearanceLabel}: ${colorName}.`);
+        setAttribute(knob1, ariaValueText, `${whiteness}% & ${blackness}%`);
+        setAttribute(knob1, ariaValueNow, `${whiteness}`);
+        setAttribute(knob2, ariaValueText, `${hue}%`);
+        setAttribute(knob2, ariaValueNow, `${hue}`);
       } else {
-        knob1Lbl.innerText = `${lightnessLabel}: ${lightness}%. ${saturationLabel}: ${saturation}%`;
-        knob2Lbl.innerText = `${hueLabel}: ${hue}°`;
+        colorLabel = format === 'rgb' ? `RGB: ${r}, ${g}, ${b}` : colorLabel;
+        setAttribute(knob2, ariaDescription, `${valueLabel}: ${colorLabel}. ${appearanceLabel}: ${colorName}.`);
+        setAttribute(knob1, ariaValueText, `${lightness}% & ${saturation}%`);
+        setAttribute(knob1, ariaValueNow, `${lightness}`);
+        setAttribute(knob2, ariaValueText, `${hue}°`);
+        setAttribute(knob2, ariaValueNow, `${hue}`);
       }
-      if (format !== 'hex') {
-        const alphaValue = Math.round(alpha * 100);
-        knob3Lbl.innerText = `${alphaLabel}: ${alphaValue}%`;
-      }
+      const alphaValue = Math.round(alpha * 100);
+      setAttribute(knob3, ariaValueText, `${alphaValue}%`);
+      setAttribute(knob3, ariaValueNow, `${alphaValue}`);
-      // update color labels
-      self.appearance.innerText = `${appearanceLabel}: ${colorName}.`;
-      const colorLabel = format === 'hex'
-        ? `${hexLabel} ${hex.split('').join(' ')}.`
-        : self.value.toUpperCase();
+      // update the input backgroundColor
+      const newColor = color.toString();
+      setElementStyle(self.input, { backgroundColor: newColor });
-      if (self.label) {
-        const fieldLabel = self.label.innerText.replace('*', '').trim();
-        /** @type {HTMLSpanElement} */
-        // @ts-ignore
-        const [pickerBtnSpan] = self.pickerToggle.children;
-        requiredLabel = self.required ? ` ${requiredLabel}` : '';
-        pickerBtnSpan.innerText = `${fieldLabel}: ${colorLabel}${requiredLabel}`;
+      // toggle dark/light classes will also style the placeholder
+      // dark sets color white, light sets color black
+      // isDark ? '#000' : '#fff'
+      if (!self.isDark) {
+        if (hasClass(parent, 'txt-dark')) removeClass(parent, 'txt-dark');
+        if (!hasClass(parent, 'txt-light')) addClass(parent, 'txt-light');
+      } else {
+        if (hasClass(parent, 'txt-light')) removeClass(parent, 'txt-light');
+        if (!hasClass(parent, 'txt-dark')) addClass(parent, 'txt-dark');
       }
     }
-    /** Updates the control knobs positions. */
+    /** Updates the control knobs actual positions. */
     updateControls() {
-      const { format, controlKnobs, controlPositions } = this;
+      const { controlKnobs, controlPositions } = this;
       const [control1, control2, control3] = controlKnobs;
-      control1.style.transform = `translate3d(${controlPositions.c1x - 3}px,${controlPositions.c1y - 3}px,0)`;
-      control2.style.transform = `translate3d(0,${controlPositions.c2y - 3}px,0)`;
-      if (format !== 'hex') {
-        control3.style.transform = `translate3d(0,${controlPositions.c3y - 3}px,0)`;
-      }
+      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)` });
     }
     /**
-     * Update all color form inputs.
+     * Updates all color form inputs.
      * @param {boolean=} isPrevented when `true`, the component original event is prevented
      */
     updateInputs(isPrevented) {
       const self = this;
       const {
-        value: oldColor, rgb, hsl, hsv, format, parent, input, inputs,
+        value: oldColor, format, inputs, color, hsl,
       } = self;
       const [i1, i2, i3, i4] = inputs;
-      const alpha = hsl.a;
-      const hue = Math.round(hsl.h);
-      const saturation = Math.round(hsl.s * 100);
-      const lightSource = format === 'hsl' ? hsl.l : hsv.v;
-      const lightness = Math.round(lightSource * 100);
+      const alpha = Math.round(color.a * 100);
+      const hue = Math.round(hsl.h * 360);
       let newColor;
       if (format === 'hex') {
-        newColor = self.color.toHexString();
+        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);
         newColor = self.color.toHslString();
         i1.value = `${hue}`;
         i2.value = `${saturation}`;
         i3.value = `${lightness}`;
         i4.value = `${alpha}`;
+      } else if (format === 'hwb') {
+        const { w, b } = self.hwb;
+        const whiteness = Math.round(w * 100);
+        const blackness = Math.round(b * 100);
+        newColor = self.color.toHwbString();
+        i1.value = `${hue}`;
+        i2.value = `${whiteness}`;
+        i3.value = `${blackness}`;
+        i4.value = `${alpha}`;
       } else if (format === 'rgb') {
+        const { r, g, b } = self.rgb;
         newColor = self.color.toRgbString();
-        i1.value = `${rgb.r}`;
-        i2.value = `${rgb.g}`;
-        i3.value = `${rgb.b}`;
+        i1.value = `${r}`;
+        i2.value = `${g}`;
+        i3.value = `${b}`;
         i4.value = `${alpha}`;
       }
       // update the color value
       self.value = `${newColor}`;
-      // update the input backgroundColor
-      ObjectAssign(input.style, { backgroundColor: newColor });
-      // toggle dark/light classes will also style the placeholder
-      // dark sets color white, light sets color black
-      // isDark ? '#000' : '#fff'
-      if (!self.isDark) {
-        if (hasClass(parent, 'dark')) removeClass(parent, 'dark');
-        if (!hasClass(parent, 'light')) addClass(parent, 'light');
-      } else {
-        if (hasClass(parent, 'light')) removeClass(parent, 'light');
-        if (!hasClass(parent, 'dark')) addClass(parent, 'dark');
-      }
       // don't trigger the custom event unless it's really changed
       if (!isPrevented && newColor !== oldColor) {
         firePickerChange(self);
@@ -2870,14 +3580,15 @@
     }
     /**
-     * Handles the `Space` and `Enter` keys inputs.
+     * The `Space` & `Enter` keys specific event listener.
+     * Toggle visibility of the `ColorPicker` / the presets menu, showing one will hide the other.
      * @param {KeyboardEvent} e
      * @this {ColorPicker}
      */
-    keyHandler(e) {
+    keyToggle(e) {
       const self = this;
       const { menuToggle } = self;
-      const { activeElement } = document;
+      const { activeElement } = getDocument(menuToggle);
       const { code } = e;
       if ([keyEnter, keySpace].includes(code)) {
@@ -2900,80 +3611,94 @@
     togglePicker(e) {
       e.preventDefault();
       const self = this;
-      const pickerIsOpen = classToggle(self.colorPicker, true);
+      const { colorPicker } = self;
-      if (self.isOpen && pickerIsOpen) {
+      if (self.isOpen && hasClass(colorPicker, 'show')) {
         self.hide(true);
       } else {
-        self.showPicker();
+        showDropdown(self, colorPicker);
       }
     }
     /** Shows the `ColorPicker` dropdown. */
     showPicker() {
       const self = this;
-      classToggle(self.colorMenu);
-      addClass(self.colorPicker, 'show');
-      self.input.focus();
-      self.show();
-      setAttribute(self.pickerToggle, ariaExpanded, 'true');
+      const { colorPicker } = self;
+      if (!hasClass(colorPicker, 'show')) {
+        showDropdown(self, colorPicker);
+      }
     }
     /** Toggles the visibility of the `ColorPicker` presets menu. */
     toggleMenu() {
       const self = this;
-      const menuIsOpen = classToggle(self.colorMenu, true);
+      const { colorMenu } = self;
-      if (self.isOpen && menuIsOpen) {
+      if (self.isOpen && hasClass(colorMenu, 'show')) {
         self.hide(true);
       } else {
-        showMenu(self);
+        showDropdown(self, colorMenu);
       }
     }
-    /** Show the dropdown. */
+    /** Shows the `ColorPicker` dropdown or the presets menu. */
     show() {
       const self = this;
+      const { menuToggle } = self;
       if (!self.isOpen) {
-        addClass(self.parent, 'open');
         toggleEventsOnShown(self, true);
         self.updateDropdownPosition();
         self.isOpen = true;
+        setAttribute(self.input, 'tabindex', '0');
+        if (menuToggle) {
+          setAttribute(menuToggle, 'tabindex', '0');
+        }
       }
     }
     /**
-     * Hides the currently opened dropdown.
+     * Hides the currently open `ColorPicker` dropdown.
      * @param {boolean=} focusPrevented
      */
     hide(focusPrevented) {
       const self = this;
       if (self.isOpen) {
-        const { pickerToggle, colorMenu } = self;
-        toggleEventsOnShown(self);
-        removeClass(self.parent, 'open');
-        classToggle(self.colorPicker);
-        setAttribute(pickerToggle, ariaExpanded, 'false');
-        if (colorMenu) {
-          classToggle(colorMenu);
-          setAttribute(self.menuToggle, ariaExpanded, 'false');
+        const {
+          pickerToggle, menuToggle, colorPicker, colorMenu, parent, input,
+        } = self;
+        const openPicker = hasClass(colorPicker, 'show');
+        const openDropdown = openPicker ? colorPicker : colorMenu;
+        const relatedBtn = openPicker ? pickerToggle : menuToggle;
+        const animationDuration = openDropdown && getElementTransitionDuration(openDropdown);
+        if (openDropdown) {
+          removeClass(openDropdown, 'show');
+          setAttribute(relatedBtn, ariaExpanded, 'false');
+          setTimeout(() => {
+            removePosition(openDropdown);
+            if (!querySelector('.show', parent)) {
+              removeClass(parent, 'open');
+              toggleEventsOnShown(self);
+              self.isOpen = false;
+            }
+          }, animationDuration);
         }
         if (!self.isValid) {
           self.value = self.color.toString();
         }
-        self.isOpen = false;
         if (!focusPrevented) {
-          pickerToggle.focus();
+          focus(pickerToggle);
+        }
+        setAttribute(input, 'tabindex', '-1');
+        if (menuToggle) {
+          setAttribute(menuToggle, 'tabindex', '-1');
         }
       }
     }
+    /** Removes `ColorPicker` from target `<input>`. */
     dispose() {
       const self = this;
       const { input, parent } = self;
@@ -2982,17 +3707,22 @@
       [...parent.children].forEach((el) => {
         if (el !== input) el.remove();
       });
+      setElementStyle(input, { backgroundColor: '' });
+      ['txt-light', 'txt-dark'].forEach((c) => removeClass(parent, c));
       Data.remove(input, colorPickerString);
     }
   }
   ObjectAssign(ColorPicker, {
     Color,
+    Version,
     getInstance: getColorPickerInstance,
     init: initColorPicker,
     selector: colorPickerSelector,
   });
+  let CPID = 0;
   /**
    * `ColorPickerElement` Web Component.
    * @example
@@ -3003,19 +3733,16 @@
   class ColorPickerElement extends HTMLElement {
     constructor() {
       super();
-      /** @type {ColorPicker?} */
-      this.colorPicker = null;
-      /** @type {HTMLInputElement} */
-      // @ts-ignore - `HTMLInputElement` is also `HTMLElement`
-      this.input = querySelector('input', this);
       /** @type {boolean} */
       this.isDisconnected = true;
       this.attachShadow({ mode: 'open' });
     }
-    get value() { return this.input.value; }
-    get color() { return this.colorPicker && this.colorPicker.color; }
+    /**
+     * Returns the current color value.
+     * @returns {string?}
+     */
+    get value() { return this.input ? this.input.value : null; }
     connectedCallback() {
       if (this.colorPicker) {
@@ -3025,11 +3752,50 @@
         return;
       }
-      this.colorPicker = new ColorPicker(this.input);
-      this.isDisconnected = false;
+      const inputs = getElementsByTagName('input', this);
+      if (!inputs.length) {
+        const label = getAttribute(this, 'data-label');
+        const value = getAttribute(this, 'data-value') || '#069';
+        const format = getAttribute(this, 'data-format') || 'rgb';
+        const newInput = createElement({
+          tagName: 'input',
+          type: 'text',
+          className: 'color-preview btn-appearance',
+        });
+        let id = getAttribute(this, 'data-id');
+        if (!id) {
+          id = `color-picker-${format}-${CPID}`;
+          CPID += 1;
+        }
+        const labelElement = createElement({ tagName: 'label', innerText: label || 'Color Picker' });
+        this.before(labelElement);
+        setAttribute(labelElement, 'for', id);
+        setAttribute(newInput, 'id', id);
+        setAttribute(newInput, 'name', id);
+        setAttribute(newInput, 'autocomplete', 'off');
+        setAttribute(newInput, 'spellcheck', 'false');
+        setAttribute(newInput, 'value', value);
+        this.append(newInput);
+      }
+      const [input] = inputs;
+      if (input) {
+        /** @type {HTMLInputElement} */
+        // @ts-ignore - `HTMLInputElement` is `HTMLElement`
+        this.input = input;
+        // @ts-ignore - `HTMLInputElement` is `HTMLElement`
+        this.colorPicker = new ColorPicker(input);
+        this.color = this.colorPicker.color;
+        if (this.shadowRoot) {
+          this.shadowRoot.append(createElement('slot'));
+        }
-      if (this.shadowRoot) {
-        this.shadowRoot.append(createElement('slot'));
+        this.isDisconnected = false;
       }
     }
@@ -3042,6 +3808,7 @@
   ObjectAssign(ColorPickerElement, {
     Color,
     ColorPicker,
+    Version,
   });
   customElements.define('color-picker', ColorPickerElement);