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

@thednp/color-picker 0.0.1-alpha1

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

Files changed (26) hide show

package/LICENSE +21 -0
package/README.md +89 -0
package/dist/css/color-picker.css +338 -0
package/dist/js/color-picker-element-esm.js +2 -0
package/dist/js/color-picker-element.js +3051 -0
package/dist/js/color-picker-element.min.js +2 -0
package/dist/js/color-picker.esm.js +2998 -0
package/dist/js/color-picker.esm.min.js +2 -0
package/dist/js/color-picker.js +3006 -0
package/dist/js/color-picker.min.js +2 -0
package/package.json +79 -0
package/src/js/color-picker-element.js +61 -0
package/src/js/color-picker.js +1333 -0
package/src/js/color.js +860 -0
package/src/js/index.js +12 -0
package/src/js/util/colorNames.js +156 -0
package/src/js/util/getColorControl.js +49 -0
package/src/js/util/getColorForm.js +58 -0
package/src/js/util/init.js +14 -0
package/src/js/util/templates.js +9 -0
package/src/js/util/vHidden.js +2 -0
package/src/js/version.js +6 -0
package/types/cp.d.ts +411 -0
package/types/index.d.ts +41 -0
package/types/source/source.ts +4 -0
package/types/source/types.d.ts +67 -0

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

@@ -0,0 +1,3051 @@
+/*!
+* ColorPickerElement v0.0.1alpha1 (http://thednp.github.io/color-picker)
+* Copyright 2022 © thednp
+* Licensed under MIT (https://github.com/thednp/color-picker/blob/master/LICENSE)
+*/
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+  typeof define === 'function' && define.amd ? define(factory) :
+  (global = global || self, global.ColorPickerElement = factory());
+}(this, (function () { 'use strict';
+  /**
+   * Returns the `document` or the `#document` element.
+   * @see https://github.com/floating-ui/floating-ui
+   * @param {(Node | HTMLElement | Element | globalThis)=} node
+   * @returns {Document}
+   */
+  function getDocument(node) {
+    if (node instanceof HTMLElement) return node.ownerDocument;
+    if (node instanceof Window) return node.document;
+    return window.document;
+  }
+  /**
+   * A global array of possible `ParentNode`.
+   */
+  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.
+   *
+   * @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);
+  }
+  /**
+   * Shortcut for `Object.assign()` static method.
+   * @param  {Record<string, any>} obj a target object
+   * @param  {Record<string, any>} source a source object
+   */
+  const ObjectAssign = (obj, source) => Object.assign(obj, source);
+  /**
+   * This is a shortie for `document.createElement` method
+   * which allows you to create a new `HTMLElement` for a given `tagName`
+   * or based on an object with specific non-readonly attributes:
+   * `id`, `className`, `textContent`, `style`, etc.
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement
+   *
+   * @param {Record<string, string> | string} param `tagName` or object
+   * @return {HTMLElement | Element} a new `HTMLElement` or `Element`
+   */
+  function createElement(param) {
+    if (typeof param === 'string') {
+      return getDocument().createElement(param);
+    }
+    const { tagName } = param;
+    const attr = { ...param };
+    const newElement = createElement(tagName);
+    delete attr.tagName;
+    ObjectAssign(newElement, attr);
+    return newElement;
+  }
+  /**
+   * Returns the `document.head` or the `<head>` element.
+   *
+   * @param {(Node | HTMLElement | Element | globalThis)=} node
+   * @returns {HTMLElement | HTMLHeadElement}
+   */
+  function getDocumentHead(node) {
+    return getDocument(node).head;
+  }
+  /**
+   * Shortcut for `window.getComputedStyle(element).propertyName`
+   * static method.
+   *
+   * * If `element` parameter is not an `HTMLElement`, `getComputedStyle`
+   * throws a `ReferenceError`.
+   *
+   * @param {HTMLElement | Element} element target
+   * @param {string} property the css property
+   * @return {string} the css property value
+   */
+  function getElementStyle(element, property) {
+    const computedStyle = getComputedStyle(element);
+    // @ts-ignore -- must use camelcase strings,
+    // or non-camelcase strings with `getPropertyValue`
+    return property in computedStyle ? computedStyle[property] : '';
+  }
+  /**
+   * Shortcut for multiple uses of `HTMLElement.style.propertyName` method.
+   * @param  {HTMLElement | Element} element target element
+   * @param  {Partial<CSSStyleDeclaration>} styles attribute value
+   */
+  // @ts-ignore
+  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[]}
+   */
+  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',
+  ];
+  // <http://www.w3.org/TR/css3-values/#integers>
+  const CSS_INTEGER = '[-\\+]?\\d+%?';
+  // <http://www.w3.org/TR/css3-values/#number-value>
+  const CSS_NUMBER = '[-\\+]?\\d*\\.\\d+%?';
+  // Allow positive/negative integer/number.  Don't capture the either/or, just the entire outcome.
+  const CSS_UNIT = `(?:${CSS_NUMBER})|(?:${CSS_INTEGER})`;
+  // 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 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}`),
+    hex3: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
+    hex6: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,
+    hex4: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
+    hex8: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,
+  };
+  /**
+   * Need to handle 1.0 as 100%, since once it is a number, there is no difference between it and 1
+   * <http://stackoverflow.com/questions/7422072/javascript-how-to-detect-number-as-a-decimal-including-1-0>
+   * @param {string} n
+   * @returns {boolean}
+   */
+  function isOnePointZero(n) {
+    return typeof n === 'string' && n.includes('.') && parseFloat(n) === 1;
+  }
+  /**
+   * Check to see if string passed in is a percentage
+   * @param {string} n
+   * @returns {boolean}
+   */
+  function isPercentage(n) {
+    return typeof n === 'string' && n.includes('%');
+  }
+  /**
+   * Check to see if it looks like a CSS unit
+   * (see `matchers` above for definition).
+   * @param {string | number} color
+   * @returns {boolean}
+   */
+  function isValidCSSUnit(color) {
+    return Boolean(matchers.CSS_UNIT.exec(String(color)));
+  }
+  /**
+   * Take input from [0, n] and return it as [0, 1]
+   * @param {*} n
+   * @param {number} max
+   * @returns {number}
+   */
+  function bound01(n, max) {
+    let N = n;
+    if (isOnePointZero(n)) N = '100%';
+    N = max === 360 ? N : Math.min(max, Math.max(0, parseFloat(N)));
+    // Automatically convert percentage into number
+    if (isPercentage(N)) {
+      N = parseInt(String(N * max), 10) / 100;
+    }
+    // Handle floating point rounding errors
+    if (Math.abs(N - max) < 0.000001) {
+      return 1;
+    }
+    // Convert into [0, 1] range if it isn't already
+    if (max === 360) {
+      // 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));
+    } 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));
+    }
+    return N;
+  }
+  /**
+   * Return a valid alpha value [0,1] with all invalid values being set to 1.
+   * @param {string | number} a
+   * @returns {number}
+   */
+  function boundAlpha(a) {
+    // @ts-ignore
+    let na = parseFloat(a);
+    if (Number.isNaN(na) || na < 0 || na > 1) {
+      na = 1;
+    }
+    return na;
+  }
+  /**
+   * Force a number between 0 and 1
+   * @param {number} val
+   * @returns {number}
+   */
+  function clamp01(val) {
+    return Math.min(1, Math.max(0, val));
+  }
+  /**
+   * Returns the hexadecimal value of a web safe colour.
+   * @param {string} name
+   * @returns {string}
+   */
+  function getHexFromColorName(name) {
+    const documentHead = getDocumentHead();
+    setElementStyle(documentHead, { color: name });
+    const colorName = getElementStyle(documentHead, 'color');
+    setElementStyle(documentHead, { color: '' });
+    return colorName;
+  }
+  /**
+   * Replace a decimal with it's percentage value
+   * @param {number | string} n
+   * @return {string | number}
+   */
+  function convertToPercentage(n) {
+    if (n <= 1) {
+      return `${Number(n) * 100}%`;
+    }
+    return n;
+  }
+  /**
+   * Force a hex value to have 2 characters
+   * @param {string} c
+   * @returns {string}
+   */
+  function pad2(c) {
+    return c.length === 1 ? `0${c}` : String(c);
+  }
+  // `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}
+   */
+  function rgbToRgb(r, g, b) {
+    return {
+      r: bound01(r, 255) * 255,
+      g: bound01(g, 255) * 255,
+      b: bound01(b, 255) * 255,
+    };
+  }
+  /**
+   * 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}
+   */
+  function rgbToHsl(R, G, B) {
+    const r = bound01(R, 255);
+    const g = bound01(G, 255);
+    const b = bound01(B, 255);
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    let h = 0;
+    let s = 0;
+    const l = (max + min) / 2;
+    if (max === min) {
+      s = 0;
+      h = 0; // achromatic
+    } else {
+      const d = max - min;
+      s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+      switch (max) {
+        case r:
+          h = (g - b) / d + (g < b ? 6 : 0);
+          break;
+        case g:
+          h = (b - r) / d + 2;
+          break;
+        case b:
+          h = (r - g) / d + 4;
+          break;
+      }
+      h /= 6;
+    }
+    return { h, s, l };
+  }
+  /**
+   * Returns a normalized RGB component value.
+   * @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;
+    }
+    return p;
+  }
+  /**
+   * 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) {
+    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
+      g = l;
+      b = l;
+      r = l;
+    } else {
+      const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+      const p = 2 * l - q;
+      r = hue2rgb(p, q, h + 1 / 3);
+      g = hue2rgb(p, q, h);
+      b = hue2rgb(p, q, h - 1 / 3);
+    }
+    return { r: r * 255, g: g * 255, b: b * 255 };
+  }
+  /**
+   * 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}
+   */
+  function rgbToHsv(R, G, B) {
+    const r = bound01(R, 255);
+    const g = bound01(G, 255);
+    const b = bound01(B, 255);
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    let h = 0;
+    const v = max;
+    const d = max - min;
+    const s = max === 0 ? 0 : d / max;
+    if (max === min) {
+      h = 0; // achromatic
+    } else {
+      switch (max) {
+        case r:
+          h = (g - b) / d + (g < b ? 6 : 0);
+          break;
+        case g:
+          h = (b - r) / d + 2;
+          break;
+        case b:
+          h = (r - g) / d + 4;
+          break;
+      }
+      h /= 6;
+    }
+    return { h, s, v };
+  }
+  /**
+   * Converts an HSV color 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}
+   */
+  function hsvToRgb(H, S, V) {
+    const h = bound01(H, 360) * 6;
+    const s = bound01(S, 100);
+    const v = bound01(V, 100);
+    const i = Math.floor(h);
+    const f = h - i;
+    const p = v * (1 - s);
+    const q = v * (1 - f * s);
+    const t = v * (1 - (1 - f) * s);
+    const mod = i % 6;
+    const r = [v, q, p, p, t, v][mod];
+    const g = [t, v, v, q, p, p][mod];
+    const b = [p, p, t, v, v, q][mod];
+    return { r: r * 255, g: g * 255, b: b * 255 };
+  }
+  /**
+   * Converts an RGB color 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
+   * @returns {string}
+   */
+  function rgbToHex(r, g, b) {
+    const hex = [
+      pad2(Math.round(r).toString(16)),
+      pad2(Math.round(g).toString(16)),
+      pad2(Math.round(b).toString(16)),
+    ];
+    return hex.join('');
+  }
+  /**
+   * Converts a hex value to a decimal.
+   * @param {string} h
+   * @returns {number}
+   */
+  function convertHexToDecimal(h) {
+    return parseIntFromHex(h) / 255;
+  }
+  /**
+   * Parse a base-16 hex value into a base-10 integer.
+   * @param {string} val
+   * @returns {number}
+   */
+  function parseIntFromHex(val) {
+    return parseInt(val, 16);
+  }
+  /**
+   * Returns an `{r,g,b}` color object corresponding to a given number.
+   * @param {number} color
+   * @returns {CP.RGB}
+   */
+  function numberInputToObject(color) {
+    /* eslint-disable no-bitwise */
+    return {
+      r: color >> 16,
+      g: (color & 0xff00) >> 8,
+      b: color & 0xff,
+    };
+    /* eslint-enable no-bitwise */
+  }
+  /**
+   * Permissive string parsing.  Take in a number of formats, and output an object
+   * based on detected format.  Returns `{ r, g, b }` or `{ h, s, l }` or `{ h, s, v}`
+   * @param {string} input
+   * @returns {Record<string, (number | string)> | false}
+   */
+  function stringInputToObject(input) {
+    let color = input.trim().toLowerCase();
+    if (color.length === 0) {
+      return {
+        r: 0, g: 0, b: 0, a: 0,
+      };
+    }
+    let named = false;
+    if (colorNames.includes(color)) {
+      color = getHexFromColorName(color);
+      named = true;
+    } else if (color === 'transparent') {
+      return {
+        r: 0, g: 0, b: 0, a: 0, format: 'name',
+      };
+    }
+    // Try to match string input using regular expressions.
+    // Keep most of the number bounding out of this function,
+    //   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) {
+      return {
+        r: match[1], g: match[2], b: match[3], a: match[4],
+      };
+    }
+    match = matchers.hsl.exec(color);
+    if (match) {
+      return { h: match[1], s: match[2], l: match[3] };
+    }
+    match = matchers.hsla.exec(color);
+    if (match) {
+      return {
+        h: match[1], s: match[2], l: match[3], a: match[4],
+      };
+    }
+    match = matchers.hsv.exec(color);
+    if (match) {
+      return { h: match[1], s: match[2], v: match[3] };
+    }
+    match = matchers.hsva.exec(color);
+    if (match) {
+      return {
+        h: match[1], s: match[2], v: match[3], a: match[4],
+      };
+    }
+    match = matchers.hex8.exec(color);
+    if (match) {
+      return {
+        r: parseIntFromHex(match[1]),
+        g: parseIntFromHex(match[2]),
+        b: parseIntFromHex(match[3]),
+        a: convertHexToDecimal(match[4]),
+        format: named ? 'name' : 'hex8',
+      };
+    }
+    match = matchers.hex6.exec(color);
+    if (match) {
+      return {
+        r: parseIntFromHex(match[1]),
+        g: parseIntFromHex(match[2]),
+        b: parseIntFromHex(match[3]),
+        format: named ? 'name' : 'hex',
+      };
+    }
+    match = matchers.hex4.exec(color);
+    if (match) {
+      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',
+      };
+    }
+    match = matchers.hex3.exec(color);
+    if (match) {
+      return {
+        r: parseIntFromHex(match[1] + match[1]),
+        g: parseIntFromHex(match[2] + match[2]),
+        b: parseIntFromHex(match[3] + match[3]),
+        format: named ? 'name' : 'hex',
+      };
+    }
+    return false;
+  }
+  /**
+   * Given a string or object, convert that input to RGB
+   *
+   * Possible string inputs:
+   * ```
+   * "red"
+   * "#f00" or "f00"
+   * "#ff0000" or "ff0000"
+   * "#ff000000" or "ff000000"
+   * "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"
+   * "hsl(0, 100%, 50%)" or "hsl 0 100% 50%"
+   * "hsla(0, 100%, 50%, 1)" or "hsla 0 100% 50%, 1"
+   * "hsv(0, 100%, 100%)" or "hsv 0 100% 100%"
+   * ```
+   * @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 s = null;
+    let v = null;
+    let l = null;
+    let ok = false;
+    let format = 'hex';
+    if (typeof input === 'string') {
+      // @ts-ignore -- this now is converted to object
+      color = stringInputToObject(input);
+      if (color) ok = true;
+    }
+    if (typeof color === 'object') {
+      if (isValidCSSUnit(color.r) && isValidCSSUnit(color.g) && isValidCSSUnit(color.b)) {
+        rgb = rgbToRgb(color.r, color.g, color.b);
+        ok = true;
+        format = `${color.r}`.slice(-1) === '%' ? 'prgb' : '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);
+        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);
+        ok = true;
+        format = 'hsl';
+      }
+      if ('a' in color) a = color.a;
+    }
+    return {
+      ok, // @ts-ignore
+      format: color.format || format,
+      r: Math.min(255, Math.max(rgb.r, 0)),
+      g: Math.min(255, Math.max(rgb.g, 0)),
+      b: Math.min(255, Math.max(rgb.b, 0)),
+      a: boundAlpha(a),
+    };
+  }
+  /** @type {CP.ColorOptions} */
+  const colorPickerDefaults = {
+    format: 'hex',
+  };
+  /**
+   * Returns a new `Color` instance.
+   * @see https://github.com/bgrins/TinyColor
+   * @class
+   */
+  class Color {
+    /**
+     * @constructor
+     * @param {CP.ColorInput} input
+     * @param {CP.ColorOptions=} config
+     */
+    constructor(input, config) {
+      let color = input;
+      const opts = typeof config === 'object'
+        ? ObjectAssign(colorPickerDefaults, config)
+        : ObjectAssign({}, colorPickerDefaults);
+      // If input is already a `Color`, return itself
+      if (color instanceof Color) {
+        color = inputToRGB(color);
+      }
+      if (typeof color === 'number') {
+        color = numberInputToObject(color);
+      }
+      const {
+        r, g, b, a, ok, format,
+      } = inputToRGB(color);
+      /** @type {CP.ColorInput} */
+      this.originalInput = color;
+      /** @type {number} */
+      this.r = r;
+      /** @type {number} */
+      this.g = g;
+      /** @type {number} */
+      this.b = b;
+      /** @type {number} */
+      this.a = a;
+      /** @type {boolean} */
+      this.ok = ok;
+      /** @type {number} */
+      this.roundA = Math.round(100 * this.a) / 100;
+      /** @type {CP.ColorFormats} */
+      this.format = opts.format || 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);
+      }
+    }
+    /**
+     * Checks if the current input value is a valid colour.
+     * @returns {boolean} the query result
+     */
+    get isValid() {
+      return this.ok;
+    }
+    /**
+     * Checks if the current colour requires a light text colour.
+     * @returns {boolean} the query result
+     */
+    get isDark() {
+      return this.brightness < 128;
+    }
+    /**
+     * Returns the perceived luminance of a color.
+     * @see http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
+     * @returns {number} a number in [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;
+      if (RsRGB <= 0.03928) {
+        R = RsRGB / 12.92;
+      } else {
+        R = ((RsRGB + 0.055) / 1.055) ** 2.4;
+      }
+      if (GsRGB <= 0.03928) {
+        G = GsRGB / 12.92;
+      } else {
+        G = ((GsRGB + 0.055) / 1.055) ** 2.4;
+      }
+      if (BsRGB <= 0.03928) {
+        B = BsRGB / 12.92;
+      } else {
+        B = ((BsRGB + 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
+     */
+    get brightness() {
+      const { r, g, b } = this;
+      return (r * 299 + g * 587 + b * 114) / 1000;
+    }
+    /**
+     * Returns the color as a RGBA object.
+     * @returns {CP.RGBA}
+     */
+    toRgb() {
+      return {
+        r: Math.round(this.r),
+        g: Math.round(this.g),
+        b: Math.round(this.b),
+        a: this.a,
+      };
+    }
+    /**
+     * Returns the RGBA values concatenated into a string.
+     * @returns {string} the CSS valid color 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})`;
+    }
+    /**
+     * Returns the HEX value of the color.
+     * @returns {string} the hexadecimal color format
+     */
+    toHex() {
+      return rgbToHex(this.r, this.g, this.b);
+    }
+    /**
+     * Returns the HEX value of the color.
+     * @returns {string} the CSS valid color in hexadecimal format
+     */
+    toHexString() {
+      return `#${this.toHex()}`;
+    }
+    /**
+     * Returns the color as a HSVA object.
+     * @returns {CP.HSVA} the `{h,s,v,a}` object
+     */
+    toHsv() {
+      const { h, s, v } = rgbToHsv(this.r, this.g, this.b);
+      return {
+        h: h * 360, s, v, a: this.a,
+      };
+    }
+    /**
+     * Returns the color as a HSLA object.
+     * @returns {CP.HSLA}
+     */
+    toHsl() {
+      const { h, s, l } = rgbToHsl(this.r, this.g, this.b);
+      return {
+        h: h * 360, s, l, a: this.a,
+      };
+    }
+    /**
+     * Returns the HSLA values concatenated into a string.
+     * @returns {string} the CSS valid color 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})`;
+    }
+    /**
+     * 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
+     */
+    setAlpha(alpha) {
+      this.a = boundAlpha(alpha);
+      this.roundA = Math.round(100 * this.a) / 100;
+      return this;
+    }
+    /**
+     * Saturate the color with a given amount.
+     * @param {number=} amount a value in [0-100] range
+     * @returns {Color} a new `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);
+    }
+    /**
+     * Desaturate the color with a given amount.
+     * @param {number=} amount a value in [0-100] range
+     * @returns {Color} a new `Color` instance
+     */
+    desaturate(amount) {
+      return amount ? this.saturate(-amount) : this;
+    }
+    /**
+     * Completely desaturates a color into greyscale.
+     * Same as calling `desaturate(100)`
+     * @returns {Color} a new `Color` instance
+     */
+    greyscale() {
+      return this.desaturate(100);
+    }
+    /** Returns a clone of the current `Color` instance. */
+    clone() {
+      return new Color(this);
+    }
+    /**
+     * Returns the color value in CSS valid string format.
+     * @returns {string}
+     */
+    toString() {
+      const { format } = this;
+      if (format === 'rgb') {
+        return this.toRgbString();
+      }
+      if (format === 'hsl') {
+        return this.toHslString();
+      }
+      return this.toHexString();
+    }
+  }
+  ObjectAssign(Color, {
+    colorNames,
+    CSS_INTEGER,
+    CSS_NUMBER,
+    CSS_UNIT,
+    PERMISSIVE_MATCH3,
+    PERMISSIVE_MATCH4,
+    matchers,
+    isOnePointZero,
+    isPercentage,
+    isValidCSSUnit,
+    bound01,
+    boundAlpha,
+    clamp01,
+    getHexFromColorName,
+    convertToPercentage,
+    convertHexToDecimal,
+    pad2,
+    rgbToRgb,
+    rgbToHsl,
+    rgbToHex,
+    rgbToHsv,
+    hslToRgb,
+    hsvToRgb,
+    hue2rgb,
+    parseIntFromHex,
+    numberInputToObject,
+    stringInputToObject,
+    inputToRGB,
+  });
+  /** @type {Record<string, any>} */
+  const EventRegistry = {};
+  /**
+   * The global event listener.
+   *
+   * @this {Element | HTMLElement | Window | Document}
+   * @param {Event} e
+   * @returns {void}
+   */
+  function globalListener(e) {
+    const that = this;
+    const { type } = e;
+    const oneEvMap = EventRegistry[type] ? [...EventRegistry[type]] : [];
+    oneEvMap.forEach((elementsMap) => {
+      const [element, listenersMap] = elementsMap;
+      [...listenersMap].forEach((listenerMap) => {
+        if (element === that) {
+          const [listener, options] = listenerMap;
+          listener.apply(element, [e]);
+          if (options && options.once) {
+            removeListener(element, type, listener, options);
+          }
+        }
+      });
+    });
+  }
+  /**
+   * Register a new listener with its options and attach the `globalListener`
+   * to the target if this is the first listener.
+   *
+   * @param {Element | HTMLElement | Window | Document} element
+   * @param {string} eventType
+   * @param {EventListenerObject['handleEvent']} listener
+   * @param {AddEventListenerOptions=} options
+   */
+  const addListener = (element, eventType, listener, options) => {
+    // get element listeners first
+    if (!EventRegistry[eventType]) {
+      EventRegistry[eventType] = new Map();
+    }
+    const oneEventMap = EventRegistry[eventType];
+    if (!oneEventMap.has(element)) {
+      oneEventMap.set(element, new Map());
+    }
+    const oneElementMap = oneEventMap.get(element);
+    // get listeners size
+    const { size } = oneElementMap;
+    // register listener with its options
+    if (oneElementMap) {
+      oneElementMap.set(listener, options);
+    }
+    // add listener last
+    if (!size) {
+      element.addEventListener(eventType, globalListener, options);
+    }
+  };
+  /**
+   * Remove a listener from registry and detach the `globalListener`
+   * if no listeners are found in the registry.
+   *
+   * @param {Element | HTMLElement | Window | Document} element
+   * @param {string} eventType
+   * @param {EventListenerObject['handleEvent']} listener
+   * @param {AddEventListenerOptions=} options
+   */
+  const removeListener = (element, eventType, listener, options) => {
+    // get listener first
+    const oneEventMap = EventRegistry[eventType];
+    const oneElementMap = oneEventMap && oneEventMap.get(element);
+    const savedOptions = oneElementMap && oneElementMap.get(listener);
+    // also recover initial options
+    const { options: eventOptions } = savedOptions !== undefined
+      ? savedOptions
+      : { options };
+    // unsubscribe second, remove from registry
+    if (oneElementMap && oneElementMap.has(listener)) oneElementMap.delete(listener);
+    if (oneEventMap && (!oneElementMap || !oneElementMap.size)) oneEventMap.delete(element);
+    if (!oneEventMap || !oneEventMap.size) delete EventRegistry[eventType];
+    // remove listener last
+    if (!oneElementMap || !oneElementMap.size) {
+      element.removeEventListener(eventType, globalListener, eventOptions);
+    }
+  };
+  /**
+   * A global namespace for aria-selected.
+   * @type {string}
+   */
+  const ariaSelected = 'aria-selected';
+  /**
+   * A global namespace for aria-expanded.
+   * @type {string}
+   */
+  const ariaExpanded = 'aria-expanded';
+  /**
+   * A global namespace for aria-hidden.
+   * @type {string}
+   */
+  const ariaHidden = 'aria-hidden';
+  /**
+   * A global namespace for aria-labelledby.
+   * @type {string}
+   */
+  const ariaLabelledBy = 'aria-labelledby';
+  /**
+   * A global namespace for `ArrowDown` key.
+   * @type {string} e.which = 40 equivalent
+   */
+  const keyArrowDown = 'ArrowDown';
+  /**
+   * A global namespace for `ArrowUp` key.
+   * @type {string} e.which = 38 equivalent
+   */
+  const keyArrowUp = 'ArrowUp';
+  /**
+   * A global namespace for `ArrowLeft` key.
+   * @type {string} e.which = 37 equivalent
+   */
+  const keyArrowLeft = 'ArrowLeft';
+  /**
+   * A global namespace for `ArrowRight` key.
+   * @type {string} e.which = 39 equivalent
+   */
+  const keyArrowRight = 'ArrowRight';
+  /**
+   * A global namespace for `Enter` key.
+   * @type {string} e.which = 13 equivalent
+   */
+  const keyEnter = 'Enter';
+  /**
+   * A global namespace for `Space` key.
+   * @type {string} e.which = 32 equivalent
+   */
+  const keySpace = 'Space';
+  /**
+   * A global namespace for `Escape` key.
+   * @type {string} e.which = 27 equivalent
+   */
+  const keyEscape = 'Escape';
+  // @ts-ignore
+  const { userAgentData: uaDATA } = navigator;
+  /**
+   * A global namespace for `userAgentData` object.
+   */
+  const userAgentData = uaDATA;
+  const { userAgent: userAgentString } = navigator;
+  /**
+   * A global namespace for `navigator.userAgent` string.
+   */
+  const userAgent = userAgentString;
+  const mobileBrands = /iPhone|iPad|iPod|Android/i;
+  let isMobileCheck = false;
+  if (userAgentData) {
+    isMobileCheck = userAgentData.brands
+      .some((/** @type {Record<String, any>} */x) => mobileBrands.test(x.brand));
+  } else {
+    isMobileCheck = mobileBrands.test(userAgent);
+  }
+  /**
+   * A global `boolean` for mobile detection.
+   * @type {boolean}
+   */
+  const isMobile = isMobileCheck;
+  let elementUID = 1;
+  const elementIDMap = new Map();
+  /**
+   * Returns a unique identifier for popover, tooltip, scrollspy.
+   *
+   * @param {HTMLElement | Element} element target element
+   * @param {string=} key predefined key
+   * @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);
+      }
+    } else if (!Number.isNaN(elMap)) {
+      result = elMap;
+    } else {
+      elementIDMap.set(element, result);
+    }
+    return result;
+  }
+  /**
+   * Returns the bounding client rect of a target `HTMLElement`.
+   *
+   * @see https://github.com/floating-ui/floating-ui
+   *
+   * @param {HTMLElement | Element} element event.target
+   * @param {boolean=} includeScale when *true*, the target scale is also computed
+   * @returns {SHORTER.BoundingClientRect} the bounding client rect object
+   */
+  function getBoundingClientRect(element, includeScale) {
+    const {
+      width, height, top, right, bottom, left,
+    } = element.getBoundingClientRect();
+    let scaleX = 1;
+    let scaleY = 1;
+    if (includeScale && element instanceof HTMLElement) {
+      const { offsetWidth, offsetHeight } = element;
+      scaleX = offsetWidth > 0 ? Math.round(width) / offsetWidth || 1 : 1;
+      scaleY = offsetHeight > 0 ? Math.round(height) / offsetHeight || 1 : 1;
+    }
+    return {
+      width: width / scaleX,
+      height: height / scaleY,
+      top: top / scaleY,
+      right: right / scaleX,
+      bottom: bottom / scaleY,
+      left: left / scaleX,
+      x: left / scaleX,
+      y: top / scaleY,
+    };
+  }
+  /**
+   * A shortcut for `(document|Element).querySelectorAll`.
+   *
+   * @param {string} selector the input selector
+   * @param {(HTMLElement | Element | Document | Node)=} parent optional node to look into
+   * @return {NodeListOf<HTMLElement | Element>} the query result
+   */
+  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);
+  }
+  /**
+   * Shortcut for `HTMLElement.closest` method which also works
+   * with children of `ShadowRoot`. The order of the parameters
+   * is intentional since they're both required.
+   *
+   * @see https://stackoverflow.com/q/54520554/803358
+   *
+   * @param {HTMLElement | Element} element Element to look into
+   * @param {string} selector the selector name
+   * @return {(HTMLElement | Element)?} the query result
+   */
+  function closest(element, selector) {
+    return element ? (element.closest(selector)
+      // @ts-ignore -- break out of `ShadowRoot`
+      || closest(element.getRootNode().host, selector)) : null;
+  }
+  /**
+   * This is a shortie for `document.createElementNS` method
+   * which allows you to create a new `HTMLElement` for a given `tagName`
+   * or based on an object with specific non-readonly attributes:
+   * `id`, `className`, `textContent`, `style`, etc.
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS
+   *
+   * @param {string} namespace `namespaceURI` to associate with the new `HTMLElement`
+   * @param {Record<string, string> | string} param `tagName` or object
+   * @return {HTMLElement | Element} a new `HTMLElement` or `Element`
+   */
+  function createElementNS(namespace, param) {
+    if (typeof param === 'string') {
+      return getDocument().createElementNS(namespace, param);
+    }
+    const { tagName } = param;
+    const attr = { ...param };
+    const newElement = createElementNS(namespace, tagName);
+    delete attr.tagName;
+    ObjectAssign(newElement, attr);
+    return newElement;
+  }
+  /**
+   * Shortcut for the `Element.dispatchEvent(Event)` method.
+   *
+   * @param {HTMLElement | Element} element is the target
+   * @param {Event} event is the `Event` object
+   */
+  const dispatchEvent = (element, event) => element.dispatchEvent(event);
+  /** @type {Map<string, Map<HTMLElement | Element, Record<string, any>>>} */
+  const componentData = new Map();
+  /**
+   * An interface for web components background data.
+   * @see https://github.com/thednp/bootstrap.native/blob/master/src/components/base-component.js
+   */
+  const Data = {
+    /**
+     * Sets web components data.
+     * @param {HTMLElement | Element | string} target target element
+     * @param {string} component the component's name or a unique key
+     * @param {Record<string, any>} instance the component instance
+     */
+    set: (target, component, instance) => {
+      const element = querySelector(target);
+      if (!element) return;
+      if (!componentData.has(component)) {
+        componentData.set(component, new Map());
+      }
+      const instanceMap = componentData.get(component);
+      // @ts-ignore - not undefined, but defined right above
+      instanceMap.set(element, instance);
+    },
+    /**
+     * Returns all instances for specified component.
+     * @param {string} component the component's name or a unique key
+     * @returns {Map<HTMLElement | Element, Record<string, any>>?} all the component instances
+     */
+    getAllFor: (component) => {
+      const instanceMap = componentData.get(component);
+      return instanceMap || null;
+    },
+    /**
+     * Returns the instance associated with the target.
+     * @param {HTMLElement | Element | string} target target element
+     * @param {string} component the component's name or a unique key
+     * @returns {Record<string, any>?} the instance
+     */
+    get: (target, component) => {
+      const element = querySelector(target);
+      const allForC = Data.getAllFor(component);
+      const instance = element && allForC && allForC.get(element);
+      return instance || null;
+    },
+    /**
+     * Removes web components data.
+     * @param {HTMLElement | Element | string} target target element
+     * @param {string} component the component's name or a unique key
+     */
+    remove: (target, component) => {
+      const element = querySelector(target);
+      const instanceMap = componentData.get(component);
+      if (!instanceMap || !element) return;
+      instanceMap.delete(element);
+      if (instanceMap.size === 0) {
+        componentData.delete(component);
+      }
+    },
+  };
+  /**
+   * An alias for `Data.get()`.
+   * @type {SHORTER.getInstance<any>}
+   */
+  const getInstance = (target, component) => Data.get(target, component);
+  /**
+   * Check class in `HTMLElement.classList`.
+   *
+   * @param {HTMLElement | Element} element target
+   * @param {string} classNAME to check
+   * @returns {boolean}
+   */
+  function hasClass(element, classNAME) {
+    return element.classList.contains(classNAME);
+  }
+  /**
+   * Add class to `HTMLElement.classList`.
+   *
+   * @param {HTMLElement | Element} element target
+   * @param {string} classNAME to add
+   * @returns {void}
+   */
+  function addClass(element, classNAME) {
+    element.classList.add(classNAME);
+  }
+  /**
+   * Remove class from `HTMLElement.classList`.
+   *
+   * @param {HTMLElement | Element} element target
+   * @param {string} classNAME to remove
+   * @returns {void}
+   */
+  function removeClass(element, classNAME) {
+    element.classList.remove(classNAME);
+  }
+  /**
+   * 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.
+   * @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);
+  /**
+   * Shortcut for `HTMLElement.removeAttribute()` method.
+   * @param  {HTMLElement | Element} element target element
+   * @param  {string} attribute attribute name
+   * @returns {void}
+   */
+  const removeAttribute = (element, attribute) => element.removeAttribute(attribute);
+  /**
+   * Shortcut for `String.toUpperCase()`.
+   *
+   * @param {string} source input string
+   * @returns {string} uppercase output string
+   */
+  const toUpperCase = (source) => source.toUpperCase();
+  const vHidden = 'v-hidden';
+  /**
+   * Returns the color form.
+   * @param {CP.ColorPicker} self the `ColorPicker` instance
+   * @returns {HTMLElement | Element}
+   */
+  function getColorForm(self) {
+    const { format, id } = self;
+    const colorForm = createElement({
+      tagName: 'div',
+      className: `color-form ${format}`,
+    });
+    let components = ['hex'];
+    if (format === 'rgb') components = ['red', 'green', 'blue', 'alpha'];
+    else if (format === 'hsl') components = ['hue', 'saturation', 'lightness', 'alpha'];
+    components.forEach((c) => {
+      const [C] = format === 'hex' ? ['#'] : toUpperCase(c).split('');
+      const cID = `color_${format}_${c}_${id}`;
+      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}` }),
+      );
+      const cInput = createElement({
+        tagName: 'input',
+        id: cID, // name: cID,
+        type: format === 'hex' ? 'text' : 'number',
+        value: c === 'alpha' ? '1' : '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'; }
+        }
+        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}
+   */
+  function getColorControl(iteration, id, width, height, labelledby) {
+    const labelID = `appearance${iteration}_${id}`;
+    const knobClass = iteration === 1 ? 'color-pointer' : 'color-slider';
+    const control = createElement({
+      tagName: 'div',
+      className: 'color-control',
+    });
+    setAttribute(control, 'role', 'presentation');
+    control.append(
+      createElement({
+        id: labelID,
+        tagName: 'label',
+        className: `color-label ${vHidden}`,
+        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, ariaLabelledBy, labelledby || labelID);
+    setAttribute(knob, 'tabindex', '0');
+    control.append(knob);
+    return control;
+  }
+  // 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',
+  };
+  // ColorPicker Static Methods
+  // ==========================
+  /** @type {CP.GetInstance<ColorPicker>} */
+  const getColorPickerInstance = (element) => getInstance(element, colorPickerString);
+  /** @type {CP.InitCallback<ColorPicker>} */
+  const initColorPicker = (element) => new ColorPicker(element);
+  // ColorPicker Private Methods
+  // ===========================
+  /**
+   * Add / remove `ColorPicker` main event listeners.
+   * @param {ColorPicker} self
+   * @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,
+    } = self;
+    const colorValue = getAttribute(input, 'value') || '#fff';
+    const {
+      toggleLabel, menuLabel, formatLabel, pickerLabel, appearanceLabel,
+    } = componentLabels;
+    // update color
+    const color = nonColors.includes(colorValue) ? '#fff' : colorValue;
+    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 pickerBtn = createElement({
+      tagName: 'button',
+      className: 'picker-toggle button-appearance',
+      ariaExpanded: 'false',
+      ariaHasPopup: 'true',
+      ariaLive: 'polite',
+    });
+    setAttribute(pickerBtn, 'tabindex', '-1');
+    pickerBtn.append(createElement({
+      tagName: 'span',
+      className: vHidden,
+      innerText: 'Open Color Picker',
+    }));
+    const colorPickerDropdown = 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),
+      );
+    }
+    // @ts-ignore
+    const colorForm = getColorForm(self);
+    colorPickerDropdown.append(colorControls, colorForm);
+    parent.append(pickerBtn, colorPickerDropdown);
+    // set color key menu template
+    if (keywords) {
+      const colorKeys = keywords;
+      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);
+      });
+      const presetsBtn = createElement({
+        tagName: 'button',
+        className: 'menu-toggle button-appearance',
+        ariaExpanded: 'false',
+        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);
+      presetsBtn.append(createElement({
+        tagName: 'span',
+        className: vHidden,
+        innerText: `${toggleLabel}`,
+      }), presetsIcon);
+      parent.append(presetsBtn, presetsDropdown);
+    }
+    // solve non-colors after settings save
+    if (keywords && nonColors.includes(colorValue)) {
+      self.value = colorValue;
+    }
+  }
+  /**
+   * Add / remove `ColorPicker` event listeners active only when open.
+   * @param {ColorPicker} self
+   * @param {boolean=} action
+   */
+  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' };
+    fn(self.controls, pointerEvents.down, self.pointerDown);
+    self.controlKnobs.forEach((x) => fn(x, 'keydown', self.handleKnobs));
+    fn(window, 'scroll', self.handleScroll);
+    [self.input, ...self.inputs].forEach((x) => fn(x, 'change', self.changeHandler));
+    if (self.colorMenu) {
+      fn(self.colorMenu, 'click', self.menuClickHandler);
+      fn(self.colorMenu, 'keydown', 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);
+  }
+  /**
+   * Triggers the `ColorPicker` original event.
+   * @param {ColorPicker} self
+   */
+  function firePickerChange(self) {
+    dispatchEvent(self.input, new CustomEvent('colorpicker.change'));
+  }
+  /**
+   * Toggles the visibility of a dropdown or returns false if none is visible.
+   * @param {HTMLElement} element
+   * @param {boolean=} check
+   * @returns {void | boolean}
+   */
+  function classToggle(element, check) {
+    const fn1 = !check ? 'forEach' : 'some';
+    const fn2 = !check ? removeClass : hasClass;
+    if (element) {
+      return ['show', 'show-top'][fn1]((x) => fn2(element, x));
+    }
+    return false;
+  }
+  /**
+   * Shows the `ColorPicker` presets menu.
+   * @param {ColorPicker} self
+   */
+  function showMenu(self) {
+    classToggle(self.colorPicker);
+    addClass(self.colorMenu, 'show');
+    self.show();
+    setAttribute(self.menuToggle, ariaExpanded, 'true');
+  }
+  /**
+   * Color Picker
+   * @see http://thednp.github.io/color-picker
+   */
+  class ColorPicker {
+    /**
+     * Returns a new ColorPicker instance.
+     * @param {HTMLInputElement | string} target the target `<input>` element
+     */
+    constructor(target) {
+      const self = this;
+      /** @type {HTMLInputElement} */
+      // @ts-ignore
+      self.input = querySelector(target);
+      // invalidate
+      if (!self.input) throw new TypeError(`ColorPicker target ${target} cannot be found.`);
+      const { input } = self;
+      /** @type {HTMLElement} */
+      // @ts-ignore
+      self.parent = closest(input, `.${colorPickerString},${colorPickerString}`);
+      if (!self.parent) throw new TypeError('ColorPicker requires a specific markup to work.');
+      /** @type {number} */
+      self.id = getUID(input, colorPickerString);
+      // set initial state
+      /** @type {HTMLCanvasElement?} */
+      self.dragElement = null;
+      /** @type {boolean} */
+      self.isOpen = false;
+      /** @type {Record<string, number>} */
+      self.controlPositions = {
+        c1x: 0, c1y: 0, c2y: 0, c3y: 0,
+      };
+      /** @type {Record<string, string>} */
+      self.colorLabels = {};
+      /** @type {Array<string> | false} */
+      self.keywords = false;
+      /** @type {Color} */
+      self.color = new Color('white', { format: self.format });
+      /** @type {Record<string, string>} */
+      self.componentLabels = ObjectAssign({}, colorPickerLabels);
+      const { componentLabels, colorLabels, keywords } = input.dataset;
+      const temp = componentLabels ? JSON.parse(componentLabels) : {};
+      self.componentLabels = ObjectAssign(self.componentLabels, temp);
+      const translatedColorLabels = colorLabels && colorLabels.split(',').length === 17
+        ? colorLabels.split(',') : colorNames$1;
+      // expose color labels to all methods
+      colorNames$1.forEach((c, i) => { self.colorLabels[c] = translatedColorLabels[i]; });
+      // set colour presets
+      if (keywords !== 'false') {
+        self.keywords = keywords ? keywords.split(',') : nonColors;
+      }
+      // bind events
+      self.showPicker = self.showPicker.bind(self);
+      self.togglePicker = self.togglePicker.bind(self);
+      self.toggleMenu = self.toggleMenu.bind(self);
+      self.menuClickHandler = self.menuClickHandler.bind(self);
+      self.menuKeyHandler = self.menuKeyHandler.bind(self);
+      self.pointerDown = self.pointerDown.bind(self);
+      self.pointerMove = self.pointerMove.bind(self);
+      self.pointerUp = self.pointerUp.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.handleKnobs = self.handleKnobs.bind(self);
+      // generate markup
+      initCallback(self);
+      const { parent } = self;
+      // set main elements
+      /** @type {HTMLElement} */
+      // @ts-ignore
+      self.pickerToggle = querySelector('.picker-toggle', parent);
+      /** @type {HTMLElement} */
+      // @ts-ignore
+      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);
+      /** @type {HTMLElement} */
+      // @ts-ignore
+      self.controls = querySelector('.color-controls', parent);
+      /** @type {HTMLInputElement[]} */
+      // @ts-ignore
+      self.inputs = [...querySelectorAll('.color-input', parent)];
+      /** @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);
+      /** @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 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);
+      // set component data
+      Data.set(input, colorPickerString, self);
+    }
+    /** Returns the current color value */
+    get value() { return this.input.value; }
+    /**
+     * Sets a new color value.
+     * @param {string} v new color 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. */
+    get includeNonColor() {
+      return this.keywords instanceof Array
+        && this.keywords.some((x) => nonColors.includes(x));
+    }
+    /** Returns hexadecimal value of the current color. */
+    get hex() { return this.color.toHex(); }
+    /** Returns the current color 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. */
+    get hsl() { return this.color.toHsl(); }
+    /** Returns the current color value in {r,g,b,a} object format. */
+    get rgb() { return this.color.toRgb(); }
+    /** Returns the current color brightness. */
+    get brightness() { return this.color.brightness; }
+    /** Returns the current color luminance. */
+    get luminance() { return this.color.luminance; }
+    /** Checks if the current colour requires a light text color. */
+    get isDark() {
+      const { rgb, brightness } = this;
+      return brightness < 120 && rgb.a > 0.33;
+    }
+    /** Checks if the current input value is a valid color. */
+    get isValid() {
+      const inputValue = this.input.value;
+      return inputValue !== '' && new Color(inputValue).isValid;
+    }
+    /** Updates `ColorPicker` visuals. */
+    updateVisuals() {
+      const self = this;
+      const {
+        color, format, controlPositions,
+        width1, width2, width3,
+        height1, height2, height3,
+        ctx1, ctx2, ctx3,
+      } = self;
+      const { r, g, b } = color;
+      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);
+      } 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);
+      }
+    }
+    /**
+     * Handles the `focusout` listener of the `ColorPicker`.
+     * @param {FocusEvent} e
+     * @this {ColorPicker}
+     */
+    handleFocusOut({ relatedTarget }) {
+      // @ts-ignore
+      if (relatedTarget && !this.parent.contains(relatedTarget)) {
+        this.hide(true);
+      }
+    }
+    /**
+     * Handles the `focusout` listener of the `ColorPicker`.
+     * @param {KeyboardEvent} e
+     * @this {ColorPicker}
+     */
+    handleDismiss({ code }) {
+      const self = this;
+      if (self.isOpen && code === keyEscape) {
+        self.hide();
+      }
+    }
+    /**
+     * Handles the `ColorPicker` scroll listener when open.
+     * @param {Event} e
+     * @this {ColorPicker}
+     */
+    handleScroll(e) {
+      const self = this;
+      /** @type {*} */
+      const { activeElement } = document;
+      if ((isMobile && self.dragElement)
+        || (activeElement && self.controlKnobs.includes(activeElement))) {
+        e.stopPropagation();
+        e.preventDefault();
+      }
+      self.updateDropdownPosition();
+    }
+    /**
+     * Handles all `ColorPicker` click listeners.
+     * @param {KeyboardEvent} e
+     * @this {ColorPicker}
+     */
+    menuKeyHandler(e) {
+      const { target, code } = e;
+      if ([keyArrowDown, keyArrowUp].includes(code)) {
+        e.preventDefault();
+      } else if ([keyEnter, keySpace].includes(code)) {
+        this.menuClickHandler({ target });
+      }
+    }
+    /**
+     * Handles all `ColorPicker` click listeners.
+     * @param {Partial<Event>} e
+     * @this {ColorPicker}
+     */
+    menuClickHandler(e) {
+      const self = this;
+      /** @type {*} */
+      const { target } = e;
+      const { format } = 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();
+      if (currentActive) {
+        removeClass(currentActive, 'active');
+        removeAttribute(currentActive, ariaSelected);
+      }
+      if (currentActive !== target) {
+        addClass(target, 'active');
+        setAttribute(target, ariaSelected, 'true');
+        if (nonColors.includes(newOption)) {
+          self.value = newOption;
+          firePickerChange(self);
+        }
+      }
+    }
+    /**
+     * Handles the `ColorPicker` touchstart / mousedown events listeners.
+     * @param {TouchEvent} e
+     * @this {ColorPicker}
+     */
+    pointerDown(e) {
+      const self = this;
+      const {
+        // @ts-ignore
+        type, target, touches, pageX, pageY,
+      } = e;
+      const { visuals, controlKnobs, format } = 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);
+      const visualRect = getBoundingClientRect(visual);
+      const X = type === 'touchstart' ? touches[0].pageX : pageX;
+      const Y = type === 'touchstart' ? touches[0].pageY : pageY;
+      const offsetX = X - window.pageXOffset - visualRect.left;
+      const offsetY = Y - window.pageYOffset - visualRect.top;
+      if (target === v1 || target === c1) {
+        self.dragElement = visual;
+        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.dragElement = visual;
+        self.changeAlpha({ offsetY });
+      }
+      e.preventDefault();
+    }
+    /**
+     * Handles the `ColorPicker` touchend / mouseup events listeners.
+     * @param {TouchEvent} e
+     * @this {ColorPicker}
+     */
+    pointerUp({ target }) {
+      const self = this;
+      const selection = document.getSelection();
+      // @ts-ignore
+      if (!self.dragElement && !selection.toString().length
+        // @ts-ignore
+        && !self.parent.contains(target)) {
+        self.hide();
+      }
+      self.dragElement = null;
+    }
+    /**
+     * Handles the `ColorPicker` touchmove / mousemove events listeners.
+     * @param {TouchEvent} e
+     */
+    pointerMove(e) {
+      const self = this;
+      const { dragElement, visuals, format } = self;
+      const [v1, v2, v3] = visuals;
+      const {
+        // @ts-ignore
+        type, touches, pageX, pageY,
+      } = e;
+      if (!dragElement) return;
+      const controlRect = getBoundingClientRect(dragElement);
+      const X = type === 'touchmove' ? touches[0].pageX : pageX;
+      const Y = type === 'touchmove' ? touches[0].pageY : pageY;
+      const offsetX = X - window.pageXOffset - controlRect.left;
+      const offsetY = Y - window.pageYOffset - controlRect.top;
+      if (dragElement === v1) {
+        self.changeControl1({ offsetX, offsetY });
+      }
+      if (dragElement === v2) {
+        self.changeControl2({ offsetY });
+      }
+      if (dragElement === v3 && format !== 'hex') {
+        self.changeAlpha({ offsetY });
+      }
+    }
+    /**
+     * Handles the `ColorPicker` events listeners associated with the color knobs.
+     * @param {KeyboardEvent} e
+     */
+    handleKnobs(e) {
+      const { target, code } = e;
+      const self = this;
+      // only react to arrow buttons
+      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;
+      if (currentKnob) {
+        let offsetX = 0;
+        let offsetY = 0;
+        if (target === c1) {
+          if ([keyArrowLeft, keyArrowRight].includes(code)) {
+            self.controlPositions.c1x += code === keyArrowRight ? +1 : -1;
+          } else if ([keyArrowUp, keyArrowDown].includes(code)) {
+            self.controlPositions.c1y += code === keyArrowDown ? +1 : -1;
+          }
+          offsetX = self.controlPositions.c1x;
+          offsetY = self.controlPositions.c1y;
+          self.changeControl1({ offsetX, offsetY });
+        } else if (target === c2) {
+          self.controlPositions.c2y += [keyArrowDown, keyArrowRight].includes(code) ? +1 : -1;
+          offsetY = self.controlPositions.c2y;
+          self.changeControl2({ offsetY });
+        } else if (target === c3) {
+          self.controlPositions.c3y += [keyArrowDown, keyArrowRight].includes(code) ? +1 : -1;
+          offsetY = self.controlPositions.c3y;
+          self.changeAlpha({ offsetY });
+        }
+        self.setColorAppearence();
+        self.updateInputs();
+        self.updateControls();
+        self.updateVisuals();
+        self.handleScroll(e);
+      }
+    }
+    /** Handles the event listeners of the color form. */
+    changeHandler() {
+      const self = this;
+      let colorSource;
+      /** @type {HTMLInputElement} */
+      // @ts-ignore
+      const { activeElement } = document;
+      const {
+        inputs, format, value: currentValue, input,
+      } = self;
+      const [i1, i2, i3, i4] = inputs;
+      const isNonColorValue = self.includeNonColor && nonColors.includes(currentValue);
+      if (activeElement === input || (activeElement && inputs.includes(activeElement))) {
+        if (activeElement === input) {
+          if (isNonColorValue) {
+            colorSource = 'white';
+          } else {
+            colorSource = currentValue;
+          }
+        } else if (format === 'hex') {
+          colorSource = i1.value;
+        } else if (format === 'hsl') {
+          colorSource = `hsla(${i1.value},${i2.value}%,${i3.value}%,${i4.value})`;
+        } else {
+          colorSource = `rgba(${inputs.map((x) => x.value).join(',')})`;
+        }
+        self.color = new Color(colorSource, { format });
+        self.setControlPositions();
+        self.setColorAppearence();
+        self.updateInputs();
+        self.updateControls();
+        self.updateVisuals();
+        // set non-color keyword
+        if (activeElement === input && isNonColorValue) {
+          self.value = currentValue;
+        }
+      }
+    }
+    /**
+     * Updates `ColorPicker` first control:
+     * * `lightness` and `saturation` for HEX/RGB;
+     * * `lightness` and `hue` for HSL.
+     *
+     * @param {Record<string, number>} offsets
+     */
+    changeControl1(offsets) {
+      const self = this;
+      let [offsetX, offsetY] = [0, 0];
+      const { offsetX: X, offsetY: Y } = offsets;
+      const {
+        format, controlPositions,
+        height1, height2, height3, width1,
+      } = self;
+      if (X > width1) {
+        offsetX = width1;
+      } else if (X >= 0) {
+        offsetX = X;
+      }
+      if (Y > height1) {
+        offsetY = height1;
+      } else if (Y >= 0) {
+        offsetY = Y;
+      }
+      const hue = format !== 'hsl'
+        ? Math.round((controlPositions.c2y / height2) * 360)
+        : Math.round((offsetX / width1) * 360);
+      const saturation = format !== 'hsl'
+        ? Math.round((offsetX / width1) * 100)
+        : Math.round((1 - controlPositions.c2y / height2) * 100);
+      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';
+      // new color
+      self.color = new Color(`${tempFormat}(${hue},${saturation}%,${lightness}%,${alpha})`, { format });
+      // new positions
+      self.controlPositions.c1x = offsetX;
+      self.controlPositions.c1y = offsetY;
+      // update color picker
+      self.setColorAppearence();
+      self.updateInputs();
+      self.updateControls();
+      self.updateVisuals();
+    }
+    /**
+     * Updates `ColorPicker` second control:
+     * * `hue` for HEX/RGB;
+     * * `saturation` for HSL.
+     *
+     * @param {Record<string, number>} offset
+     */
+    changeControl2(offset) {
+      const self = this;
+      const { offsetY: Y } = offset;
+      const {
+        format, width1, height1, height2, height3, controlPositions,
+      } = self;
+      let offsetY = 0;
+      if (Y > height2) {
+        offsetY = height2;
+      } else if (Y >= 0) {
+        offsetY = Y;
+      }
+      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';
+      // new color
+      self.color = new Color(`${colorFormat}(${hue},${saturation}%,${lightness}%,${alpha})`, { format });
+      // new position
+      self.controlPositions.c2y = offsetY;
+      // update color picker
+      self.setColorAppearence();
+      self.updateInputs();
+      self.updateControls();
+      self.updateVisuals();
+    }
+    /**
+     * Updates `ColorPicker` last control,
+     * the `alpha` channel for RGB/HSL.
+     *
+     * @param {Record<string, number>} offset
+     */
+    changeAlpha(offset) {
+      const self = this;
+      const { height3 } = self;
+      const { offsetY: Y } = offset;
+      let offsetY = 0;
+      if (Y > height3) {
+        offsetY = height3;
+      } else if (Y >= 0) {
+        offsetY = Y;
+      }
+      // update color alpha
+      const alpha = Math.round((1 - offsetY / height3) * 100);
+      self.color.setAlpha(alpha / 100);
+      // update position
+      self.controlPositions.c3y = offsetY;
+      // update color picker
+      self.updateInputs();
+      self.updateControls();
+      // alpha?
+      self.updateVisuals();
+    }
+    /** Update opened dropdown position on scroll. */
+    updateDropdownPosition() {
+      const self = this;
+      const { input, colorPicker, colorMenu } = self;
+      const elRect = getBoundingClientRect(input);
+      const { offsetHeight: elHeight } = input;
+      const windowHeight = document.documentElement.clientHeight;
+      const isPicker = classToggle(colorPicker, true);
+      const dropdown = isPicker ? colorPicker : colorMenu;
+      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');
+      }
+    }
+    /** Update control knobs' positions. */
+    setControlPositions() {
+      const self = this;
+      const {
+        hsv, hsl, format, height1, height2, height3, width1,
+      } = self;
+      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;
+      }
+    }
+    /** Update the visual appearance label. */
+    setColorAppearence() {
+      const self = this;
+      const {
+        componentLabels, colorLabels, hsl, hsv, hex, format, knobLabels,
+      } = self;
+      const {
+        lightnessLabel, saturationLabel, hueLabel, alphaLabel, appearanceLabel, hexLabel,
+      } = componentLabels;
+      let { requiredLabel } = componentLabels;
+      const [knob1Lbl, knob2Lbl, knob3Lbl] = knobLabels;
+      const hue = Math.round(hsl.h);
+      const alpha = hsv.a;
+      const saturationSource = format === 'hsl' ? hsl.s : hsv.s;
+      const saturation = Math.round(saturationSource * 100);
+      const lightness = Math.round(hsl.l * 100);
+      const hsvl = hsv.v * 100;
+      let colorName;
+      // determine color appearance
+      if (lightness === 100 && saturation === 0) {
+        colorName = colorLabels.white;
+      } else if (lightness === 0) {
+        colorName = colorLabels.black;
+      } else if (saturation === 0) {
+        colorName = colorLabels.grey;
+      } else if (hue < 15 || hue >= 345) {
+        colorName = colorLabels.red;
+      } else if (hue >= 15 && hue < 45) {
+        colorName = hsvl > 80 && saturation > 80 ? colorLabels.orange : colorLabels.brown;
+      } else if (hue >= 45 && hue < 75) {
+        const isGold = hue > 46 && hue < 54 && hsvl < 80 && saturation > 90;
+        const isOlive = hue >= 54 && hue < 75 && hsvl < 80;
+        colorName = isGold ? colorLabels.gold : colorLabels.yellow;
+        colorName = isOlive ? colorLabels.olive : colorName;
+      } else if (hue >= 75 && hue < 155) {
+        colorName = hsvl < 68 ? colorLabels.green : colorLabels.lime;
+      } else if (hue >= 155 && hue < 175) {
+        colorName = colorLabels.teal;
+      } else if (hue >= 175 && hue < 195) {
+        colorName = colorLabels.cyan;
+      } else if (hue >= 195 && hue < 255) {
+        colorName = colorLabels.blue;
+      } else if (hue >= 255 && hue < 270) {
+        colorName = colorLabels.violet;
+      } else if (hue >= 270 && hue < 295) {
+        colorName = colorLabels.magenta;
+      } else if (hue >= 295 && hue < 345) {
+        colorName = colorLabels.pink;
+      }
+      if (format === 'hsl') {
+        knob1Lbl.innerText = `${hueLabel}: ${hue}°. ${lightnessLabel}: ${lightness}%`;
+        knob2Lbl.innerText = `${saturationLabel}: ${saturation}%`;
+      } else {
+        knob1Lbl.innerText = `${lightnessLabel}: ${lightness}%. ${saturationLabel}: ${saturation}%`;
+        knob2Lbl.innerText = `${hueLabel}: ${hue}°`;
+      }
+      if (format !== 'hex') {
+        const alphaValue = Math.round(alpha * 100);
+        knob3Lbl.innerText = `${alphaLabel}: ${alphaValue}%`;
+      }
+      // update color labels
+      self.appearance.innerText = `${appearanceLabel}: ${colorName}.`;
+      const colorLabel = format === 'hex'
+        ? `${hexLabel} ${hex.split('').join(' ')}.`
+        : self.value.toUpperCase();
+      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}`;
+      }
+    }
+    /** Updates the control knobs positions. */
+    updateControls() {
+      const { format, 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)`;
+      }
+    }
+    /**
+     * Update 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,
+      } = 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);
+      let newColor;
+      if (format === 'hex') {
+        newColor = self.color.toHexString();
+        i1.value = self.hex;
+      } else if (format === 'hsl') {
+        newColor = self.color.toHslString();
+        i1.value = `${hue}`;
+        i2.value = `${saturation}`;
+        i3.value = `${lightness}`;
+        i4.value = `${alpha}`;
+      } else if (format === 'rgb') {
+        newColor = self.color.toRgbString();
+        i1.value = `${rgb.r}`;
+        i2.value = `${rgb.g}`;
+        i3.value = `${rgb.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);
+      }
+    }
+    /**
+     * Handles the `Space` and `Enter` keys inputs.
+     * @param {KeyboardEvent} e
+     * @this {ColorPicker}
+     */
+    keyHandler(e) {
+      const self = this;
+      const { menuToggle } = self;
+      const { activeElement } = document;
+      const { code } = e;
+      if ([keyEnter, keySpace].includes(code)) {
+        if ((menuToggle && activeElement === menuToggle) || !activeElement) {
+          e.preventDefault();
+          if (!activeElement) {
+            self.togglePicker(e);
+          } else {
+            self.toggleMenu();
+          }
+        }
+      }
+    }
+    /**
+     * Toggle the `ColorPicker` dropdown visibility.
+     * @param {Event} e
+     * @this {ColorPicker}
+     */
+    togglePicker(e) {
+      e.preventDefault();
+      const self = this;
+      const pickerIsOpen = classToggle(self.colorPicker, true);
+      if (self.isOpen && pickerIsOpen) {
+        self.hide(true);
+      } else {
+        self.showPicker();
+      }
+    }
+    /** 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');
+    }
+    /** Toggles the visibility of the `ColorPicker` presets menu. */
+    toggleMenu() {
+      const self = this;
+      const menuIsOpen = classToggle(self.colorMenu, true);
+      if (self.isOpen && menuIsOpen) {
+        self.hide(true);
+      } else {
+        showMenu(self);
+      }
+    }
+    /** Show the dropdown. */
+    show() {
+      const self = this;
+      if (!self.isOpen) {
+        addClass(self.parent, 'open');
+        toggleEventsOnShown(self, true);
+        self.updateDropdownPosition();
+        self.isOpen = true;
+      }
+    }
+    /**
+     * Hides the currently opened 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');
+        }
+        if (!self.isValid) {
+          self.value = self.color.toString();
+        }
+        self.isOpen = false;
+        if (!focusPrevented) {
+          pickerToggle.focus();
+        }
+      }
+    }
+    dispose() {
+      const self = this;
+      const { input, parent } = self;
+      self.hide(true);
+      toggleEvents(self);
+      [...parent.children].forEach((el) => {
+        if (el !== input) el.remove();
+      });
+      Data.remove(input, colorPickerString);
+    }
+  }
+  ObjectAssign(ColorPicker, {
+    Color,
+    getInstance: getColorPickerInstance,
+    init: initColorPicker,
+    selector: colorPickerSelector,
+  });
+  /**
+   * `ColorPickerElement` Web Component.
+   * @example
+   * <color-picker>
+   *   <input type="text">
+   * </color-picker>
+   */
+  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; }
+    connectedCallback() {
+      if (this.colorPicker) {
+        if (this.isDisconnected) {
+          this.isDisconnected = false;
+        }
+        return;
+      }
+      this.colorPicker = new ColorPicker(this.input);
+      this.isDisconnected = false;
+      if (this.shadowRoot) {
+        this.shadowRoot.append(createElement('slot'));
+      }
+    }
+    disconnectedCallback() {
+      if (this.colorPicker) this.colorPicker.dispose();
+      this.isDisconnected = true;
+    }
+  }
+  ObjectAssign(ColorPickerElement, {
+    Color,
+    ColorPicker,
+  });
+  customElements.define('color-picker', ColorPickerElement);
+  return ColorPickerElement;
+})));