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

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

Files changed (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);