@thednp/color-picker 0.0.1-alpha1 → 0.0.1

package/dist/js/color-picker.esm.js

@@ -1,2998 +0,0 @@
-/*!
-* ColorPicker v0.0.1alpha1 (http://thednp.github.io/color-picker)
-* Copyright 2022 © thednp
-* Licensed under MIT (https://github.com/thednp/color-picker/blob/master/LICENSE)
-*/
-/**
- * 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 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);
-}
-
-/** @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 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 `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;
-}
-
-/**
- * Shortcut for `Object.assign()` static method.
- * @param  {Record<string, any>} obj a target object
- * @param  {Record<string, any>} source a source object
- */
-const ObjectAssign = (obj, source) => Object.assign(obj, source);
-
-/**
- * This is a shortie for `document.createElement` method
- * which allows you to create a new `HTMLElement` for a given `tagName`
- * or based on an object with specific non-readonly attributes:
- * `id`, `className`, `textContent`, `style`, etc.
- * @see https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement
- *
- * @param {Record<string, string> | string} param `tagName` or object
- * @return {HTMLElement | Element} a new `HTMLElement` or `Element`
- */
-function createElement(param) {
-  if (typeof param === 'string') {
-    return getDocument().createElement(param);
-  }
-
-  const { tagName } = param;
-  const attr = { ...param };
-  const newElement = createElement(tagName);
-  delete attr.tagName;
-  ObjectAssign(newElement, attr);
-  return newElement;
-}
-
-/**
- * This is a shortie for `document.createElementNS` method
- * which allows you to create a new `HTMLElement` for a given `tagName`
- * or based on an object with specific non-readonly attributes:
- * `id`, `className`, `textContent`, `style`, etc.
- * @see https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS
- *
- * @param {string} namespace `namespaceURI` to associate with the new `HTMLElement`
- * @param {Record<string, string> | string} param `tagName` or object
- * @return {HTMLElement | Element} a new `HTMLElement` or `Element`
- */
-function createElementNS(namespace, param) {
-  if (typeof param === 'string') {
-    return getDocument().createElementNS(namespace, param);
-  }
-
-  const { tagName } = param;
-  const attr = { ...param };
-  const newElement = createElementNS(namespace, tagName);
-  delete attr.tagName;
-  ObjectAssign(newElement, attr);
-  return newElement;
-}
-
-/**
- * Shortcut for the `Element.dispatchEvent(Event)` method.
- *
- * @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;
-}
-
-/**
- * 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,
-});
-
-// 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,
-});
-
-function initCallBack() {
-  const { init, selector } = ColorPicker;
-  [...querySelectorAll(selector)].forEach(init);
-}
-
-if (document.body) initCallBack();
-else document.addEventListener('DOMContentLoaded', initCallBack, { once: true });
-
-export default ColorPicker;