@thednp/color-picker 1.0.0 → 2.0.0-alpha1

package/dist/js/color-picker.js

@@ -1,3586 +1,8 @@
-/*!
-* ColorPicker v1.0.0 (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 = typeof globalThis !== 'undefined' ? globalThis : global || self, global.ColorPicker = factory());
-})(this, (function () { 'use strict';
-
-  /** @type {Record<string, any>} */
-  const EventRegistry = {};
-
-  /**
-   * The global event listener.
-   *
-   * @type {EventListener}
-   * @this {EventTarget}
-   */
-  function globalListener(e) {
-    const that = this;
-    const { type, target } = e;
-
-    [...EventRegistry[type]].forEach((elementsMap) => {
-      const [element, listenersMap] = elementsMap;
-      /* istanbul ignore else */
-      if ([target, that].some((el) => element === el)) {
-        [...listenersMap].forEach((listenerMap) => {
-          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.
-   *
-   * @type {Listener.ListenerAction<EventTarget>}
-   */
-  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
-    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.
-   *
-   * @type {Listener.ListenerAction<EventTarget>}
-   */
-  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
-    /* istanbul ignore else */
-    if (!oneElementMap || !oneElementMap.size) {
-      element.removeEventListener(eventType, globalListener, eventOptions);
-    }
-  };
-
-  /**
-   * A global namespace for aria-description.
-   * @type {string}
-   */
-  const ariaDescription = 'aria-description';
-
-  /**
-   * 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-valuetext.
-   * @type {string}
-   */
-  const ariaValueText = 'aria-valuetext';
-
-  /**
-   * A global namespace for aria-valuenow.
-   * @type {string}
-   */
-  const ariaValueNow = 'aria-valuenow';
-
-  /**
-   * 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';
-
-  /**
-   * A global namespace for `focusin` event.
-   * @type {string}
-   */
-  const focusinEvent = 'focusin';
-
-  /**
-   * A global namespace for `click` event.
-   * @type {string}
-   */
-  const mouseclickEvent = 'click';
-
-  /**
-   * A global namespace for `keydown` event.
-   * @type {string}
-   */
-  const keydownEvent = 'keydown';
-
-  /**
-   * A global namespace for `change` event.
-   * @type {string}
-   */
-  const changeEvent = 'change';
-
-  /**
-   * A global namespace for `touchmove` event.
-   * @type {string}
-   */
-  const touchmoveEvent = 'touchmove';
-
-  /**
-   * A global namespace for `pointerdown` event.
-   * @type {string}
-   */
-  const pointerdownEvent = 'pointerdown';
-
-  /**
-   * A global namespace for `pointermove` event.
-   * @type {string}
-   */
-  const pointermoveEvent = 'pointermove';
-
-  /**
-   * A global namespace for `pointerup` event.
-   * @type {string}
-   */
-  const pointerupEvent = 'pointerup';
-
-  /**
-   * A global namespace for `scroll` event.
-   * @type {string}
-   */
-  const scrollEvent = 'scroll';
-
-  /**
-   * A global namespace for `keyup` event.
-   * @type {string}
-   */
-  const keyupEvent = 'keyup';
-
-  /**
-   * A global namespace for `resize` event.
-   * @type {string}
-   */
-  const resizeEvent = 'resize';
-
-  /**
-   * A global namespace for `focusout` event.
-   * @type {string}
-   */
-  const focusoutEvent = 'focusout';
-
-  /**
-   * 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;
-  }
-
-  /**
-   * Returns the `document.documentElement` or the `<html>` element.
-   *
-   * @param {(Node | HTMLElement | Element | globalThis)=} node
-   * @returns {HTMLElement | HTMLHtmlElement}
-   */
-  function getDocumentElement(node) {
-    return getDocument(node).documentElement;
-  }
-
-  /**
-   * 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] : '';
-  }
-
-  let elementUID = 0;
-  let elementMapUID = 0;
-  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) {
-    let result = key ? elementUID : elementMapUID;
-
-    if (key) {
-      const elID = getUID(element);
-      const elMap = elementIDMap.get(elID) || new Map();
-      if (!elementIDMap.has(elID)) {
-        elementIDMap.set(elID, elMap);
-      }
-      if (!elMap.has(key)) {
-        elMap.set(key, result);
-        elementUID += 1;
-      } else result = elMap.get(key);
-    } else {
-      const elkey = element.id || element;
-
-      if (!elementIDMap.has(elkey)) {
-        elementIDMap.set(elkey, result);
-        elementMapUID += 1;
-      } else result = elementIDMap.get(elkey);
-    }
-    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 namespace for 'transitionDuration' string.
-   * @type {string}
-   */
-  const transitionDuration = 'transitionDuration';
-
-  /**
-   * A global namespace for `transitionProperty` string for modern browsers.
-   *
-   * @type {string}
-   */
-  const transitionProperty = 'transitionProperty';
-
-  /**
-   * Utility to get the computed `transitionDuration`
-   * from Element in miliseconds.
-   *
-   * @param {HTMLElement | Element} element target
-   * @return {number} the value in miliseconds
-   */
-  function getElementTransitionDuration(element) {
-    const propertyValue = getElementStyle(element, transitionProperty);
-    const durationValue = getElementStyle(element, transitionDuration);
-    const durationScale = durationValue.includes('ms') ? 1 : 1000;
-    const duration = propertyValue && propertyValue !== 'none'
-      ? parseFloat(durationValue) * durationScale : 0;
-
-    return !Number.isNaN(duration) ? duration : 0;
-  }
-
-  /**
-   * A global array 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 `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 `HTMLElement.getElementsByClassName` method. Some `Node` elements
-   * like `ShadowRoot` do not support `getElementsByClassName`.
-   *
-   * @param {string} selector the class name
-   * @param {(HTMLElement | Element | Document)=} parent optional Element to look into
-   * @return {HTMLCollectionOf<HTMLElement | Element>} the 'HTMLCollection'
-   */
-  function getElementsByClassName(selector, parent) {
-    const lookUp = parent && parentNodes.some((x) => parent instanceof x)
-      ? parent : getDocument();
-    return lookUp.getElementsByClassName(selector);
-  }
-
-  /**
-   * 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);
-
-  /**
-   * Shortcut for `Object.assign()` static method.
-   * @param  {Record<string, any>} obj a target object
-   * @param  {Record<string, any>} source a source object
-   */
-  const ObjectAssign = (obj, source) => Object.assign(obj, source);
-
-  /** @type {Map<string, Map<HTMLElement | Element, Record<string, any>>>} */
-  const componentData = new Map();
-  /**
-   * 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);
-
-  /**
-   * 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); };
-
-  /**
-   * 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);
-
-  /**
-   * The raw value or a given component option.
-   *
-   * @typedef {string | HTMLElement | Function | number | boolean | null} niceValue
-   */
-
-  /**
-   * Utility to normalize component options
-   *
-   * @param {any} value the input value
-   * @return {niceValue} the normalized value
-   */
-  function normalizeValue(value) {
-    if (value === 'true') { // boolean
-      return true;
-    }
-
-    if (value === 'false') { // boolean
-      return false;
-    }
-
-    if (!Number.isNaN(+value)) { // number
-      return +value;
-    }
-
-    if (value === '' || value === 'null') { // null
-      return null;
-    }
-
-    // string / function / HTMLElement / object
-    return value;
-  }
-
-  /**
-   * Shortcut for `Object.keys()` static method.
-   * @param  {Record<string, any>} obj a target object
-   * @returns {string[]}
-   */
-  const ObjectKeys = (obj) => Object.keys(obj);
-
-  /**
-   * Shortcut for `String.toLowerCase()`.
-   *
-   * @param {string} source input string
-   * @returns {string} lowercase output string
-   */
-  const toLowerCase = (source) => source.toLowerCase();
-
-  /**
-   * Utility to normalize component options.
-   *
-   * @param {HTMLElement | Element} element target
-   * @param {Record<string, any>} defaultOps component default options
-   * @param {Record<string, any>} inputOps component instance options
-   * @param {string=} ns component namespace
-   * @return {Record<string, any>} normalized component options object
-   */
-  function normalizeOptions(element, defaultOps, inputOps, ns) {
-    // @ts-ignore -- our targets are always `HTMLElement`
-    const data = { ...element.dataset };
-    /** @type {Record<string, any>} */
-    const normalOps = {};
-    /** @type {Record<string, any>} */
-    const dataOps = {};
-    const title = 'title';
-
-    ObjectKeys(data).forEach((k) => {
-      const key = ns && k.includes(ns)
-        ? k.replace(ns, '').replace(/[A-Z]/, (match) => toLowerCase(match))
-        : k;
-
-      dataOps[key] = normalizeValue(data[k]);
-    });
-
-    ObjectKeys(inputOps).forEach((k) => {
-      inputOps[k] = normalizeValue(inputOps[k]);
-    });
-
-    ObjectKeys(defaultOps).forEach((k) => {
-      if (k in inputOps) {
-        normalOps[k] = inputOps[k];
-      } else if (k in dataOps) {
-        normalOps[k] = dataOps[k];
-      } else {
-        normalOps[k] = k === title
-          ? getAttribute(element, title)
-          : defaultOps[k];
-      }
-    });
-
-    return normalOps;
-  }
-
-  /**
-   * Utility to force re-paint of an `HTMLElement` target.
-   *
-   * @param {HTMLElement | Element} element is the target
-   * @return {number} the `Element.offsetHeight` value
-   */
-  // @ts-ignore
-  const reflow = (element) => element.offsetHeight;
-
-  /**
-   * Utility to focus an `HTMLElement` target.
-   *
-   * @param {HTMLElement | Element} element is the target
-   */
-  // @ts-ignore -- `Element`s resulted from querySelector can focus too
-  const focus = (element) => element.focus();
-
-  /**
-   * Check class in `HTMLElement.classList`.
-   *
-   * @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.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.removeAttribute()` method.
-   * @param  {HTMLElement | Element} element target element
-   * @param  {string} attribute attribute name
-   * @returns {void}
-   */
-  const removeAttribute = (element, attribute) => element.removeAttribute(attribute);
-
-  /**
-   * A global namespace for `document.head`.
-   */
-  const { head: documentHead } = document;
-
-  /**
-   * A list of explicit default non-color values.
-   */
-  const nonColors = ['transparent', 'currentColor', 'inherit', 'revert', 'initial'];
-
-  /**
-   * Round colour components, for all formats except HEX.
-   * @param {number} v one of the colour components
-   * @returns {number} the rounded number
-   */
-  function roundPart(v) {
-    const floor = Math.floor(v);
-    return v - floor < 0.5 ? floor : Math.round(v);
-  }
-
-  // Color supported formats
-  const COLOR_FORMAT = ['rgb', 'hex', 'hsl', 'hsv', 'hwb'];
-
-  // Hue angles
-  const ANGLES = 'deg|rad|grad|turn';
-
-  // <http://www.w3.org/TR/css3-values/#integers>
-  const CSS_INTEGER = '[-\\+]?\\d+%?';
-
-  // Include CSS3 Module
-  // <http://www.w3.org/TR/css3-values/#number-value>
-  const CSS_NUMBER = '[-\\+]?\\d*\\.\\d+%?';
-
-  // Include CSS4 Module Hue degrees unit
-  // <https://www.w3.org/TR/css3-values/#angle-value>
-  const CSS_ANGLE = `[-\\+]?\\d*\\.?\\d+(?:${ANGLES})?`;
-
-  // Allow positive/negative integer/number.  Don't capture the either/or, just the entire outcome.
-  const CSS_UNIT = `(?:${CSS_NUMBER})|(?:${CSS_INTEGER})`;
-
-  // Add angles to the mix
-  const CSS_UNIT2 = `(?:${CSS_UNIT})|(?:${CSS_ANGLE})`;
-
-  // Start & end
-  const START_MATCH = '(?:[\\s|\\(\\s|\\s\\(\\s]+)?';
-  const END_MATCH = '(?:[\\s|\\)\\s]+)?';
-  // Components separation
-  const SEP = '(?:[,|\\s]+)';
-  const SEP2 = '(?:[,|\\/\\s]*)?';
-
-  // Actual matching.
-  // Parentheses and commas are optional, but not required.
-  // Whitespace can take the place of commas or opening paren
-  const PERMISSIVE_MATCH = `${START_MATCH}(${CSS_UNIT2})${SEP}(${CSS_UNIT})${SEP}(${CSS_UNIT})${SEP2}(${CSS_UNIT})?${END_MATCH}`;
-
-  const matchers = {
-    CSS_UNIT: new RegExp(CSS_UNIT2),
-    hwb: new RegExp(`hwb${PERMISSIVE_MATCH}`),
-    rgb: new RegExp(`rgb(?:a)?${PERMISSIVE_MATCH}`),
-    hsl: new RegExp(`hsl(?:a)?${PERMISSIVE_MATCH}`),
-    hsv: new RegExp(`hsv(?:a)?${PERMISSIVE_MATCH}`),
-    hex3: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
-    hex6: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,
-    hex4: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
-    hex8: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,
-  };
-
-  /**
-   * Need to handle 1.0 as 100%, since once it is a number, there is no difference between it and 1
-   * <http://stackoverflow.com/questions/7422072/javascript-how-to-detect-number-as-a-decimal-including-1-0>
-   * @param {string} n testing number
-   * @returns {boolean} the query result
-   */
-  function isOnePointZero(n) {
-    return `${n}`.includes('.') && parseFloat(n) === 1;
-  }
-
-  /**
-   * Check to see if string passed in is a percentage
-   * @param {string} n testing number
-   * @returns {boolean} the query result
-   */
-  function isPercentage(n) {
-    return `${n}`.includes('%');
-  }
-
-  /**
-   * Check to see if string passed is a web safe colour.
-   * @see https://stackoverflow.com/a/16994164
-   * @param {string} color a colour name, EG: *red*
-   * @returns {boolean} the query result
-   */
-  function isColorName(color) {
-    if (nonColors.includes(color)
-      || ['#', ...COLOR_FORMAT].some((f) => color.includes(f))) return false;
-
-    if (['black', 'white'].includes(color)) return true;
-
-    return ['rgb(255, 255, 255)', 'rgb(0, 0, 0)'].every((c) => {
-      setElementStyle(documentHead, { color });
-      const computedColor = getElementStyle(documentHead, 'color');
-      setElementStyle(documentHead, { color: '' });
-      return computedColor !== c;
-    });
-  }
-
-  /**
-   * Check to see if it looks like a CSS unit
-   * (see `matchers` above for definition).
-   * @param {string | number} color testing value
-   * @returns {boolean} the query result
-   */
-  function isValidCSSUnit(color) {
-    return Boolean(matchers.CSS_UNIT.exec(String(color)));
-  }
-
-  /**
-   * Take input from [0, n] and return it as [0, 1]
-   * @param {*} N the input number
-   * @param {number} max the number maximum value
-   * @returns {number} the number in [0, 1] value range
-   */
-  function bound01(N, max) {
-    let n = N;
-
-    if (typeof N === 'number'
-      && Math.min(N, 0) === 0 // round values to 6 decimals Math.round(N * (10 ** 6)) / 10 ** 6
-      && Math.max(N, 1) === 1) return N;
-
-    if (isOnePointZero(N)) n = '100%';
-
-    const processPercent = isPercentage(n);
-    n = max === 360
-      ? parseFloat(n)
-      : Math.min(max, Math.max(0, parseFloat(n)));
-
-    // Automatically convert percentage into number
-    if (processPercent) n = (n * max) / 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) / max;
-    } else {
-      // If n not a hue given in degrees
-      // Convert into [0, 1] range if it isn't already.
-      n = (n % max) / max;
-    }
-    return n;
-  }
-
-  /**
-   * Return a valid alpha value [0,1] with all invalid values being set to 1.
-   * @param {string | number} a transparency value
-   * @returns {number} a transparency value in the [0, 1] range
-   */
-  function boundAlpha(a) {
-    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} v the float number
-   * @returns {number} - the resulting number
-   */
-  function clamp01(v) {
-    return Math.min(1, Math.max(0, v));
-  }
-
-  /**
-   * Returns the hexadecimal value of a web safe colour.
-   * @param {string} name
-   * @returns {string}
-   */
-  function getRGBFromName(name) {
-    setElementStyle(documentHead, { color: name });
-    const colorName = getElementStyle(documentHead, 'color');
-    setElementStyle(documentHead, { color: '' });
-    return colorName;
-  }
-
-  /**
-   * Converts a decimal value to hexadecimal.
-   * @param {number} d the input number
-   * @returns {string} - the hexadecimal value
-   */
-  function convertDecimalToHex(d) {
-    return roundPart(d * 255).toString(16);
-  }
-
-  /**
-   * Converts a hexadecimal value to decimal.
-   * @param {string} h hexadecimal value
-   * @returns {number} number in decimal format
-   */
-  function convertHexToDecimal(h) {
-    return parseIntFromHex(h) / 255;
-  }
-
-  /**
-   * Converts a base-16 hexadecimal value into a base-10 integer.
-   * @param {string} val
-   * @returns {number}
-   */
-  function parseIntFromHex(val) {
-    return parseInt(val, 16);
-  }
-
-  /**
-   * Force a hexadecimal value to have 2 characters.
-   * @param {string} c string with [0-9A-F] ranged values
-   * @returns {string} 0 => 00, a => 0a
-   */
-  function pad2(c) {
-    return c.length === 1 ? `0${c}` : String(c);
-  }
-
-  /**
-   * Converts an RGB colour value to HSL.
-   *
-   * @param {number} r Red component [0, 1]
-   * @param {number} g Green component [0, 1]
-   * @param {number} b Blue component [0, 1]
-   * @returns {CP.HSL} {h,s,l} object with [0, 1] ranged values
-   */
-  function rgbToHsl(r, g, b) {
-    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);
-      if (max === r) h = (g - b) / d + (g < b ? 6 : 0);
-      if (max === g) h = (b - r) / d + 2;
-      if (max === b) h = (r - g) / d + 4;
-
-      h /= 6;
-    }
-    return { h, s, l };
-  }
-
-  /**
-   * Returns a normalized RGB component value.
-   * @param {number} p
-   * @param {number} q
-   * @param {number} t
-   * @returns {number}
-   */
-  function hueToRgb(p, q, t) {
-    let T = t;
-    if (T < 0) T += 1;
-    if (T > 1) T -= 1;
-    if (T < 1 / 6) return p + (q - p) * (6 * T);
-    if (T < 1 / 2) return q;
-    if (T < 2 / 3) return p + (q - p) * (2 / 3 - T) * 6;
-    return p;
-  }
-
-  /**
-   * Converts an HSL colour value to RGB.
-   *
-   * @param {number} h Hue Angle [0, 1]
-   * @param {number} s Saturation [0, 1]
-   * @param {number} l Lightness Angle [0, 1]
-   * @returns {CP.RGB} {r,g,b} object with [0, 1] ranged values
-   */
-  function hslToRgb(h, s, l) {
-    let r = 0;
-    let g = 0;
-    let b = 0;
-
-    if (s === 0) {
-      // achromatic
-      g = l;
-      b = l;
-      r = l;
-    } else {
-      const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
-      const p = 2 * l - q;
-      r = hueToRgb(p, q, h + 1 / 3);
-      g = hueToRgb(p, q, h);
-      b = hueToRgb(p, q, h - 1 / 3);
-    }
-
-    return { r, g, b };
-  }
-
-  /**
-  * Returns an HWB colour object from an RGB colour object.
-  * @link https://www.w3.org/TR/css-color-4/#hwb-to-rgb
-  * @link http://alvyray.com/Papers/CG/hwb2rgb.htm
-  *
-  * @param {number} r Red component [0, 1]
-  * @param {number} g Green [0, 1]
-  * @param {number} b Blue [0, 1]
-  * @return {CP.HWB} {h,w,b} object with [0, 1] ranged values
-  */
-  function rgbToHwb(r, g, b) {
-    let f = 0;
-    let i = 0;
-    const whiteness = Math.min(r, g, b);
-    const max = Math.max(r, g, b);
-    const black = 1 - max;
-
-    if (max === whiteness) return { h: 0, w: whiteness, b: black };
-    if (r === whiteness) {
-      f = g - b;
-      i = 3;
-    } else {
-      f = g === whiteness ? b - r : r - g;
-      i = g === whiteness ? 5 : 1;
-    }
-
-    const h = (i - f / (max - whiteness)) / 6;
-    return {
-      h: h === 1 ? 0 : h,
-      w: whiteness,
-      b: black,
-    };
-  }
-
-  /**
-  * Returns an RGB colour object from an HWB colour.
-  *
-  * @param {number} H Hue Angle [0, 1]
-  * @param {number} W Whiteness [0, 1]
-  * @param {number} B Blackness [0, 1]
-  * @return {CP.RGB} {r,g,b} object with [0, 1] ranged values
-  *
-  * @link https://www.w3.org/TR/css-color-4/#hwb-to-rgb
-  * @link http://alvyray.com/Papers/CG/hwb2rgb.htm
-  */
-  function hwbToRgb(H, W, B) {
-    if (W + B >= 1) {
-      const gray = W / (W + B);
-      return { r: gray, g: gray, b: gray };
-    }
-    let { r, g, b } = hslToRgb(H, 1, 0.5);
-    [r, g, b] = [r, g, b].map((v) => v * (1 - W - B) + W);
-
-    return { r, g, b };
-  }
-
-  /**
-   * Converts an RGB colour value to HSV.
-   *
-   * @param {number} r Red component [0, 1]
-   * @param {number} g Green [0, 1]
-   * @param {number} b Blue [0, 1]
-   * @returns {CP.HSV} {h,s,v} object with [0, 1] ranged values
-   */
-  function rgbToHsv(r, g, b) {
-    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 {
-      if (r === max) h = (g - b) / d + (g < b ? 6 : 0);
-      if (g === max) h = (b - r) / d + 2;
-      if (b === max) h = (r - g) / d + 4;
-
-      h /= 6;
-    }
-    return { h, s, v };
-  }
-
-  /**
-   * Converts an HSV colour value to RGB.
-   *
-   * @param {number} H Hue Angle [0, 1]
-   * @param {number} S Saturation [0, 1]
-   * @param {number} V Brightness Angle [0, 1]
-   * @returns {CP.RGB} {r,g,b} object with [0, 1] ranged values
-   */
-  function hsvToRgb(H, S, V) {
-    const h = H * 6;
-    const s = S;
-    const v = V;
-    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, g, b };
-  }
-
-  /**
-   * Converts an RGB colour to hex
-   *
-   * Assumes r, g, and b are contained in the set [0, 255]
-   * Returns a 3 or 6 character hex
-   * @param {number} r Red component [0, 255]
-   * @param {number} g Green [0, 255]
-   * @param {number} b Blue [0, 255]
-   * @param {boolean=} allow3Char
-   * @returns {string}
-   */
-  function rgbToHex(r, g, b, allow3Char) {
-    const hex = [
-      pad2(roundPart(r).toString(16)),
-      pad2(roundPart(g).toString(16)),
-      pad2(roundPart(b).toString(16)),
-    ];
-
-    // Return a 3 character hex if possible
-    if (allow3Char && hex[0].charAt(0) === hex[0].charAt(1)
-      && hex[1].charAt(0) === hex[1].charAt(1)
-      && hex[2].charAt(0) === hex[2].charAt(1)) {
-      return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0);
-    }
-
-    return hex.join('');
-  }
-
-  /**
-   * Converts an RGBA color plus alpha transparency to hex8.
-   *
-   * @param {number} r Red component [0, 255]
-   * @param {number} g Green [0, 255]
-   * @param {number} b Blue [0, 255]
-   * @param {number} a Alpha transparency [0, 1]
-   * @param {boolean=} allow4Char when *true* it will also find hex shorthand
-   * @returns {string} a hexadecimal value with alpha transparency
-   */
-  function rgbaToHex(r, g, b, a, allow4Char) {
-    const hex = [
-      pad2(roundPart(r).toString(16)),
-      pad2(roundPart(g).toString(16)),
-      pad2(roundPart(b).toString(16)),
-      pad2(convertDecimalToHex(a)),
-    ];
-
-    // Return a 4 character hex if possible
-    if (allow4Char && hex[0].charAt(0) === hex[0].charAt(1)
-      && hex[1].charAt(0) === hex[1].charAt(1)
-      && hex[2].charAt(0) === hex[2].charAt(1)
-      && hex[3].charAt(0) === hex[3].charAt(1)) {
-      return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0) + hex[3].charAt(0);
-    }
-    return hex.join('');
-  }
-
-  /**
-   * Permissive string parsing. Take in a number of formats, and output an object
-   * based on detected format. Returns {r,g,b} or {h,s,l} or {h,s,v}
-   * @param {string} input colour value in any format
-   * @returns {Record<string, (number | string | boolean)> | false} an object matching the RegExp
-   */
-  function stringInputToObject(input) {
-    let color = toLowerCase(input.trim());
-
-    if (color.length === 0) {
-      return {
-        r: 0, g: 0, b: 0, a: 1,
-      };
-    }
-
-    if (isColorName(color)) {
-      color = getRGBFromName(color);
-    } else if (nonColors.includes(color)) {
-      const a = color === 'transparent' ? 0 : 1;
-      return {
-        r: 0, g: 0, b: 0, a, format: 'rgb', ok: true,
-      };
-    }
-
-    // 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 [, m1, m2, m3, m4] = matchers.rgb.exec(color) || [];
-    if (m1 && m2 && m3/* && m4 */) {
-      return {
-        r: m1, g: m2, b: m3, a: m4 !== undefined ? m4 : 1, format: 'rgb',
-      };
-    }
-
-    [, m1, m2, m3, m4] = matchers.hsl.exec(color) || [];
-    if (m1 && m2 && m3/* && m4 */) {
-      return {
-        h: m1, s: m2, l: m3, a: m4 !== undefined ? m4 : 1, format: 'hsl',
-      };
-    }
-
-    [, m1, m2, m3, m4] = matchers.hsv.exec(color) || [];
-    if (m1 && m2 && m3/* && m4 */) {
-      return {
-        h: m1, s: m2, v: m3, a: m4 !== undefined ? m4 : 1, format: 'hsv',
-      };
-    }
-
-    [, m1, m2, m3, m4] = matchers.hwb.exec(color) || [];
-    if (m1 && m2 && m3) {
-      return {
-        h: m1, w: m2, b: m3, a: m4 !== undefined ? m4 : 1, format: 'hwb',
-      };
-    }
-
-    [, m1, m2, m3, m4] = matchers.hex8.exec(color) || [];
-    if (m1 && m2 && m3 && m4) {
-      return {
-        r: parseIntFromHex(m1),
-        g: parseIntFromHex(m2),
-        b: parseIntFromHex(m3),
-        a: convertHexToDecimal(m4),
-        format: 'hex',
-      };
-    }
-
-    [, m1, m2, m3] = matchers.hex6.exec(color) || [];
-    if (m1 && m2 && m3) {
-      return {
-        r: parseIntFromHex(m1),
-        g: parseIntFromHex(m2),
-        b: parseIntFromHex(m3),
-        format: 'hex',
-      };
-    }
-
-    [, m1, m2, m3, m4] = matchers.hex4.exec(color) || [];
-    if (m1 && m2 && m3 && m4) {
-      return {
-        r: parseIntFromHex(m1 + m1),
-        g: parseIntFromHex(m2 + m2),
-        b: parseIntFromHex(m3 + m3),
-        a: convertHexToDecimal(m4 + m4),
-        format: 'hex',
-      };
-    }
-
-    [, m1, m2, m3] = matchers.hex3.exec(color) || [];
-    if (m1 && m2 && m3) {
-      return {
-        r: parseIntFromHex(m1 + m1),
-        g: parseIntFromHex(m2 + m2),
-        b: parseIntFromHex(m3 + m3),
-        format: '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" // CSS4 Module
-   * "rgb 255 0 0" or "rgb (255, 0, 0)"
-   * "rgb 1.0 0 0" or "rgb (1, 0, 0)"
-   * "rgba(255, 0, 0, 1)" or "rgba 255, 0, 0, 1"
-   * "rgba(1.0, 0, 0, 1)" or "rgba 1.0, 0, 0, 1"
-   * "rgb(255 0 0 / 10%)" or "rgb 255 0 0 0.1" // CSS4 Module
-   * "hsl(0, 100%, 50%)" or "hsl 0 100% 50%"
-   * "hsla(0, 100%, 50%, 1)" or "hsla 0 100% 50%, 1"
-   * "hsl(0deg 100% 50% / 50%)" or "hsl 0 100 50 50" // CSS4 Module
-   * "hsv(0, 100%, 100%)" or "hsv 0 100% 100%"
-   * "hsva(0, 100%, 100%, 0.1)" or "hsva 0 100% 100% 0.1"
-   * "hsv(0deg 100% 100% / 10%)" or "hsv 0 100 100 0.1" // CSS4 Module
-   * "hwb(0deg, 100%, 100%, 100%)" or "hwb 0 100% 100% 0.1" // CSS4 Module
-   * ```
-   * @param {string | Record<string, any>} input
-   * @returns {CP.ColorObject}
-   */
-  function inputToRGB(input) {
-    let rgb = { r: 0, g: 0, b: 0 };
-    /** @type {*} */
-    let color = input;
-    /** @type {string | number} */
-    let a = 1;
-    let s = null;
-    let v = null;
-    let l = null;
-    let w = null;
-    let b = null;
-    let h = null;
-    let r = null;
-    let g = null;
-    let ok = false;
-    const inputFormat = typeof color === 'object' && color.format;
-    let format = inputFormat && COLOR_FORMAT.includes(inputFormat) ? inputFormat : 'rgb';
-
-    if (typeof input === 'string') {
-      color = stringInputToObject(input);
-      if (color) ok = true;
-    }
-    if (typeof color === 'object') {
-      if (isValidCSSUnit(color.r) && isValidCSSUnit(color.g) && isValidCSSUnit(color.b)) {
-        ({ r, g, b } = color);
-        // RGB values now are all in [0, 1] range
-        [r, g, b] = [r, g, b].map((n) => bound01(n, isPercentage(n) ? 100 : 255));
-        rgb = { r, g, b };
-        ok = true;
-        format = color.format || 'rgb';
-      }
-      if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.v)) {
-        ({ h, s, v } = color);
-        h = bound01(h, 360); // hue can be `5deg` or a [0, 1] value
-        s = bound01(s, 100); // saturation can be `5%` or a [0, 1] value
-        v = bound01(v, 100); // brightness can be `5%` or a [0, 1] value
-        rgb = hsvToRgb(h, s, v);
-        ok = true;
-        format = 'hsv';
-      }
-      if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.l)) {
-        ({ h, s, l } = color);
-        h = bound01(h, 360); // hue can be `5deg` or a [0, 1] value
-        s = bound01(s, 100); // saturation can be `5%` or a [0, 1] value
-        l = bound01(l, 100); // lightness can be `5%` or a [0, 1] value
-        rgb = hslToRgb(h, s, l);
-        ok = true;
-        format = 'hsl';
-      }
-      if (isValidCSSUnit(color.h) && isValidCSSUnit(color.w) && isValidCSSUnit(color.b)) {
-        ({ h, w, b } = color);
-        h = bound01(h, 360); // hue can be `5deg` or a [0, 1] value
-        w = bound01(w, 100); // whiteness can be `5%` or a [0, 1] value
-        b = bound01(b, 100); // blackness can be `5%` or a [0, 1] value
-        rgb = hwbToRgb(h, w, b);
-        ok = true;
-        format = 'hwb';
-      }
-      if (isValidCSSUnit(color.a)) {
-        a = color.a; // @ts-ignore -- `parseFloat` works with numbers too
-        a = isPercentage(`${a}`) || parseFloat(a) > 1 ? bound01(a, 100) : a;
-      }
-    }
-    if (typeof color === 'undefined') {
-      ok = true;
-    }
-
-    return {
-      ok,
-      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)),
-      r: rgb.r,
-      g: rgb.g,
-      b: rgb.b,
-      a: boundAlpha(a),
-    };
-  }
-
-  /**
-   * @class
-   * Returns a new `Color` instance.
-   * @see https://github.com/bgrins/TinyColor
-   */
-  class Color {
-    /**
-     * @constructor
-     * @param {CP.ColorInput} input the given colour value
-     * @param {CP.ColorFormats=} config the given format
-     */
-    constructor(input, config) {
-      let color = input;
-      const configFormat = config && COLOR_FORMAT.includes(config)
-        ? config : '';
-
-      // If input is already a `Color`, clone its values
-      if (color instanceof Color) {
-        color = inputToRGB(color);
-      }
-
-      const {
-        r, g, b, a, ok, format,
-      } = inputToRGB(color);
-
-      // bind
-      const self = this;
-
-      /** @type {CP.ColorInput} */
-      self.originalInput = input;
-      /** @type {number} */
-      self.r = r;
-      /** @type {number} */
-      self.g = g;
-      /** @type {number} */
-      self.b = b;
-      /** @type {number} */
-      self.a = a;
-      /** @type {boolean} */
-      self.ok = ok;
-      /** @type {CP.ColorFormats} */
-      self.format = configFormat || format;
-    }
-
-    /**
-     * 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 < 120;
-    }
-
-    /**
-     * Returns the perceived luminance of a colour.
-     * @see http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
-     * @returns {number} a number in the [0, 1] range
-     */
-    get luminance() {
-      const { r, g, b } = this;
-      let R = 0;
-      let G = 0;
-      let B = 0;
-
-      if (r <= 0.03928) {
-        R = r / 12.92;
-      } else {
-        R = ((r + 0.055) / 1.055) ** 2.4;
-      }
-      if (g <= 0.03928) {
-        G = g / 12.92;
-      } else {
-        G = ((g + 0.055) / 1.055) ** 2.4;
-      }
-      if (b <= 0.03928) {
-        B = b / 12.92;
-      } else {
-        B = ((b + 0.055) / 1.055) ** 2.4;
-      }
-      return 0.2126 * R + 0.7152 * G + 0.0722 * B;
-    }
-
-    /**
-     * Returns the perceived brightness of the colour.
-     * @returns {number} a number in the [0, 255] range
-     */
-    get brightness() {
-      const { r, g, b } = this.toRgb();
-      return (r * 299 + g * 587 + b * 114) / 1000;
-    }
-
-    /**
-     * Returns the colour as an RGBA object.
-     * @returns {CP.RGBA} an {r,g,b,a} object with [0, 255] ranged values
-     */
-    toRgb() {
-      let {
-        r, g, b, a,
-      } = this;
-
-      [r, g, b] = [r, g, b].map((n) => roundPart(n * 255 * 100) / 100);
-      a = roundPart(a * 100) / 100;
-      return {
-        r, g, b, a,
-      };
-    }
-
-    /**
-     * Returns the RGBA values concatenated into a CSS3 Module string format.
-     * * rgb(255,255,255)
-     * * rgba(255,255,255,0.5)
-     * @returns {string} the CSS valid colour in RGB/RGBA format
-     */
-    toRgbString() {
-      const {
-        r, g, b, a,
-      } = this.toRgb();
-      const [R, G, B] = [r, g, b].map(roundPart);
-
-      return a === 1
-        ? `rgb(${R}, ${G}, ${B})`
-        : `rgba(${R}, ${G}, ${B}, ${a})`;
-    }
-
-    /**
-     * Returns the RGBA values concatenated into a CSS4 Module string format.
-     * * rgb(255 255 255)
-     * * rgb(255 255 255 / 50%)
-     * @returns {string} the CSS valid colour in CSS4 RGB format
-     */
-    toRgbCSS4String() {
-      const {
-        r, g, b, a,
-      } = this.toRgb();
-      const [R, G, B] = [r, g, b].map(roundPart);
-      const A = a === 1 ? '' : ` / ${roundPart(a * 100)}%`;
-
-      return `rgb(${R} ${G} ${B}${A})`;
-    }
-
-    /**
-     * Returns the hexadecimal value of the colour. When the parameter is *true*
-     * it will find a 3 characters shorthand of the decimal value.
-     *
-     * @param {boolean=} allow3Char when `true` returns shorthand HEX
-     * @returns {string} the hexadecimal colour format
-     */
-    toHex(allow3Char) {
-      const {
-        r, g, b, a,
-      } = this.toRgb();
-
-      return a === 1
-        ? rgbToHex(r, g, b, allow3Char)
-        : rgbaToHex(r, g, b, a, allow3Char);
-    }
-
-    /**
-     * Returns the CSS valid hexadecimal vaue of the colour. When the parameter is *true*
-     * it will find a 3 characters shorthand of the value.
-     *
-     * @param {boolean=} allow3Char when `true` returns shorthand HEX
-     * @returns {string} the CSS valid colour in hexadecimal format
-     */
-    toHexString(allow3Char) {
-      return `#${this.toHex(allow3Char)}`;
-    }
-
-    /**
-     * Returns the HEX8 value of the colour.
-     * @param {boolean=} allow4Char when `true` returns shorthand HEX
-     * @returns {string} the CSS valid colour in hexadecimal format
-     */
-    toHex8(allow4Char) {
-      const {
-        r, g, b, a,
-      } = this.toRgb();
-
-      return rgbaToHex(r, g, b, a, allow4Char);
-    }
-
-    /**
-     * Returns the HEX8 value of the colour.
-     * @param {boolean=} allow4Char  when `true` returns shorthand HEX
-     * @returns {string} the CSS valid colour in hexadecimal format
-     */
-    toHex8String(allow4Char) {
-      return `#${this.toHex8(allow4Char)}`;
-    }
-
-    /**
-     * Returns the colour as a HSVA object.
-     * @returns {CP.HSVA} the `{h,s,v,a}` object with [0, 1] ranged values
-     */
-    toHsv() {
-      const {
-        r, g, b, a,
-      } = this;
-      const { h, s, v } = rgbToHsv(r, g, b);
-
-      return {
-        h, s, v, a,
-      };
-    }
-
-    /**
-     * Returns the colour as an HSLA object.
-     * @returns {CP.HSLA} the `{h,s,l,a}` object with [0, 1] ranged values
-     */
-    toHsl() {
-      const {
-        r, g, b, a,
-      } = this;
-      const { h, s, l } = rgbToHsl(r, g, b);
-
-      return {
-        h, s, l, a,
-      };
-    }
-
-    /**
-     * Returns the HSLA values concatenated into a CSS3 Module format string.
-     * * `hsl(150, 100%, 50%)`
-     * * `hsla(150, 100%, 50%, 0.5)`
-     * @returns {string} the CSS valid colour in HSL/HSLA format
-     */
-    toHslString() {
-      let {
-        h, s, l, a,
-      } = this.toHsl();
-      h = roundPart(h * 360);
-      s = roundPart(s * 100);
-      l = roundPart(l * 100);
-      a = roundPart(a * 100) / 100;
-
-      return a === 1
-        ? `hsl(${h}, ${s}%, ${l}%)`
-        : `hsla(${h}, ${s}%, ${l}%, ${a})`;
-    }
-
-    /**
-     * Returns the HSLA values concatenated into a CSS4 Module format string.
-     * * `hsl(150deg 100% 50%)`
-     * * `hsl(150deg 100% 50% / 50%)`
-     * @returns {string} the CSS valid colour in CSS4 HSL format
-     */
-    toHslCSS4String() {
-      let {
-        h, s, l, a,
-      } = this.toHsl();
-      h = roundPart(h * 360);
-      s = roundPart(s * 100);
-      l = roundPart(l * 100);
-      a = roundPart(a * 100);
-      const A = a < 100 ? ` / ${roundPart(a)}%` : '';
-
-      return `hsl(${h}deg ${s}% ${l}%${A})`;
-    }
-
-    /**
-     * Returns the colour as an HWBA object.
-     * @returns {CP.HWBA} the `{h,w,b,a}` object with [0, 1] ranged values
-     */
-    toHwb() {
-      const {
-        r, g, b, a,
-      } = this;
-      const { h, w, b: bl } = rgbToHwb(r, g, b);
-      return {
-        h, w, b: bl, a,
-      };
-    }
-
-    /**
-     * Returns the HWBA values concatenated into a string.
-     * @returns {string} the CSS valid colour in HWB format
-     */
-    toHwbString() {
-      let {
-        h, w, b, a,
-      } = this.toHwb();
-      h = roundPart(h * 360);
-      w = roundPart(w * 100);
-      b = roundPart(b * 100);
-      a = roundPart(a * 100);
-      const A = a < 100 ? ` / ${roundPart(a)}%` : '';
-
-      return `hwb(${h}deg ${w}% ${b}%${A})`;
-    }
-
-    /**
-     * Sets the alpha value of the current colour.
-     * @param {number} alpha a new alpha value in the [0, 1] range.
-     * @returns {Color} the `Color` instance
-     */
-    setAlpha(alpha) {
-      const self = this;
-      if (typeof alpha !== 'number') return self;
-      self.a = boundAlpha(alpha);
-      return self;
-    }
-
-    /**
-     * Saturate the colour with a given amount.
-     * @param {number=} amount a value in the [0, 100] range
-     * @returns {Color} the `Color` instance
-     */
-    saturate(amount) {
-      const self = this;
-      if (typeof amount !== 'number') return self;
-      const { h, s, l } = self.toHsl();
-      const { r, g, b } = hslToRgb(h, clamp01(s + amount / 100), l);
-
-      ObjectAssign(self, { r, g, b });
-      return self;
-    }
-
-    /**
-     * Desaturate the colour with a given amount.
-     * @param {number=} amount a value in the [0, 100] range
-     * @returns {Color} the `Color` instance
-     */
-    desaturate(amount) {
-      return typeof amount === 'number' ? this.saturate(-amount) : this;
-    }
-
-    /**
-     * Completely desaturates a colour into greyscale.
-     * Same as calling `desaturate(100)`
-     * @returns {Color} the `Color` instance
-     */
-    greyscale() {
-      return this.saturate(-100);
-    }
-
-    /**
-     * Increase the colour lightness with a given amount.
-     * @param {number=} amount a value in the [0, 100] range
-     * @returns {Color} the `Color` instance
-     */
-    lighten(amount) {
-      const self = this;
-      if (typeof amount !== 'number') return self;
-
-      const { h, s, l } = self.toHsl();
-      const { r, g, b } = hslToRgb(h, s, clamp01(l + amount / 100));
-
-      ObjectAssign(self, { r, g, b });
-      return self;
-    }
-
-    /**
-     * Decrease the colour lightness with a given amount.
-     * @param {number=} amount a value in the [0, 100] range
-     * @returns {Color} the `Color` instance
-     */
-    darken(amount) {
-      return typeof amount === 'number' ? this.lighten(-amount) : this;
-    }
-
-    /**
-     * Spin takes a positive or negative amount within [-360, 360] indicating the change of hue.
-     * Values outside of this range will be wrapped into this range.
-     *
-     * @param {number=} amount a value in the [0, 100] range
-     * @returns {Color} the `Color` instance
-     */
-    spin(amount) {
-      const self = this;
-      if (typeof amount !== 'number') return self;
-
-      const { h, s, l } = self.toHsl();
-      const { r, g, b } = hslToRgb(clamp01(((h * 360 + amount) % 360) / 360), s, l);
-
-      ObjectAssign(self, { r, g, b });
-      return self;
-    }
-
-    /** Returns a clone of the current `Color` instance. */
-    clone() {
-      return new Color(this);
-    }
-
-    /**
-     * Returns the colour value in CSS valid string format.
-     * @param {boolean=} allowShort when *true*, HEX values can be shorthand
-     * @returns {string} the CSS valid colour in the configured format
-     */
-    toString(allowShort) {
-      const self = this;
-      const { format } = self;
-
-      if (format === 'hex') return self.toHexString(allowShort);
-      if (format === 'hsl') return self.toHslString();
-      if (format === 'hwb') return self.toHwbString();
-
-      return self.toRgbString();
-    }
-  }
-
-  ObjectAssign(Color, {
-    ANGLES,
-    CSS_ANGLE,
-    CSS_INTEGER,
-    CSS_NUMBER,
-    CSS_UNIT,
-    CSS_UNIT2,
-    PERMISSIVE_MATCH,
-    matchers,
-    isOnePointZero,
-    isPercentage,
-    isValidCSSUnit,
-    isColorName,
-    pad2,
-    clamp01,
-    bound01,
-    boundAlpha,
-    getRGBFromName,
-    convertHexToDecimal,
-    convertDecimalToHex,
-    rgbToHsl,
-    rgbToHex,
-    rgbToHsv,
-    rgbToHwb,
-    rgbaToHex,
-    hslToRgb,
-    hsvToRgb,
-    hueToRgb,
-    hwbToRgb,
-    parseIntFromHex,
-    stringInputToObject,
-    inputToRGB,
-    roundPart,
-    getElementStyle,
-    setElementStyle,
-    ObjectAssign,
-  });
-
-  /**
-   * @class
-   * Returns a color palette with a given set of parameters.
-   * @example
-   * new ColorPalette(0, 12, 10);
-   * // => { hue: 0, hueSteps: 12, lightSteps: 10, colors: Array<Color> }
-   */
-  class ColorPalette {
-    /**
-     * The `hue` parameter is optional, which would be set to 0.
-     * @param {number[]} args represeinting hue, hueSteps, lightSteps
-     * * `args.hue` the starting Hue [0, 360]
-     * * `args.hueSteps` Hue Steps Count [5, 24]
-     * * `args.lightSteps` Lightness Steps Count [5, 12]
-     */
-    constructor(...args) {
-      let hue = 0;
-      let hueSteps = 12;
-      let lightSteps = 10;
-      let lightnessArray = [0.5];
-
-      if (args.length === 3) {
-        [hue, hueSteps, lightSteps] = args;
-      } else if (args.length === 2) {
-        [hueSteps, lightSteps] = args;
-        if ([hueSteps, lightSteps].some((n) => n < 1)) {
-          throw TypeError('ColorPalette: both arguments must be higher than 0.');
-        }
-      }
-
-      /** @type {*} */
-      const colors = [];
-      const hueStep = 360 / hueSteps;
-      const half = roundPart((lightSteps - (lightSteps % 2 ? 1 : 0)) / 2);
-      const steps1To13 = [0.25, 0.2, 0.15, 0.11, 0.09, 0.075];
-      const lightSets = [[1, 2, 3], [4, 5], [6, 7], [8, 9], [10, 11], [12, 13]];
-      const closestSet = lightSets.find((set) => set.includes(lightSteps));
-
-      // find a lightStep that won't go beyond black and white
-      // something within the [10-90] range of lightness
-      const lightStep = closestSet
-        ? steps1To13[lightSets.indexOf(closestSet)]
-        : (100 / (lightSteps + (lightSteps % 2 ? 0 : 1)) / 100);
-
-      // light tints
-      for (let i = 1; i < half + 1; i += 1) {
-        lightnessArray = [...lightnessArray, (0.5 + lightStep * (i))];
-      }
-
-      // dark tints
-      for (let i = 1; i < lightSteps - half; i += 1) {
-        lightnessArray = [(0.5 - lightStep * (i)), ...lightnessArray];
-      }
-
-      // feed `colors` Array
-      for (let i = 0; i < hueSteps; i += 1) {
-        const currentHue = ((hue + i * hueStep) % 360) / 360;
-        lightnessArray.forEach((l) => {
-          colors.push(new Color({ h: currentHue, s: 1, l }));
-        });
-      }
-
-      this.hue = hue;
-      this.hueSteps = hueSteps;
-      this.lightSteps = lightSteps;
-      this.colors = colors;
-    }
-  }
-
-  ObjectAssign(ColorPalette, { Color });
-
-  /** @type {Record<string, string>} */
-  const colorPickerLabels = {
-    pickerLabel: 'Colour Picker',
-    appearanceLabel: 'Colour Appearance',
-    valueLabel: 'Colour Value',
-    toggleLabel: 'Select Colour',
-    presetsLabel: 'Colour Presets',
-    defaultsLabel: 'Colour Defaults',
-    formatLabel: 'Format',
-    alphaLabel: 'Alpha',
-    hexLabel: 'Hexadecimal',
-    hueLabel: 'Hue',
-    whitenessLabel: 'Whiteness',
-    blacknessLabel: 'Blackness',
-    saturationLabel: 'Saturation',
-    lightnessLabel: 'Lightness',
-    redLabel: 'Red',
-    greenLabel: 'Green',
-    blueLabel: 'Blue',
-  };
-
-  /**
-   * A list of 17 color names used for WAI-ARIA compliance.
-   * @type {string[]}
-   */
-  const colorNames = ['white', 'black', 'grey', 'red', 'orange', 'brown', 'gold', 'olive', 'yellow', 'lime', 'green', 'teal', 'cyan', 'blue', 'violet', 'magenta', 'pink'];
-
-  const tabIndex = 'tabindex';
-
-  /**
-   * Check if a string is valid JSON string.
-   * @param {string} str the string input
-   * @returns {boolean} the query result
-   */
-  function isValidJSON(str) {
-    try {
-      JSON.parse(str);
-    } catch (e) {
-      return false;
-    }
-    return true;
-  }
-
-  /**
-   * Shortcut for `String.toUpperCase()`.
-   *
-   * @param {string} source input string
-   * @returns {string} uppercase output string
-   */
-  const toUpperCase = (source) => source.toUpperCase();
-
-  /**
-   * A global namespace for aria-haspopup.
-   * @type {string}
-   */
-  const ariaHasPopup = 'aria-haspopup';
-
-  /**
-   * A global namespace for aria-hidden.
-   * @type {string}
-   */
-  const ariaHidden = 'aria-hidden';
-
-  /**
-   * A global namespace for aria-labelledby.
-   * @type {string}
-   */
-  const ariaLabelledBy = 'aria-labelledby';
-
-  /**
-   * This is a shortie for `document.createElement` method
-   * which allows you to create a new `HTMLElement` for a given `tagName`
-   * or based on an object with specific non-readonly attributes:
-   * `id`, `className`, `textContent`, `style`, etc.
-   * @see https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement
-   *
-   * @param {Record<string, string> | string} param `tagName` or object
-   * @return {HTMLElement | Element} a new `HTMLElement` or `Element`
-   */
-  function createElement(param) {
-    if (typeof param === 'string') {
-      return getDocument().createElement(param);
-    }
-
-    const { tagName } = param;
-    const attr = { ...param };
-    const newElement = createElement(tagName);
-    delete attr.tagName;
-    ObjectAssign(newElement, attr);
-    return newElement;
-  }
-
-  /**
-   * This is a shortie for `document.createElementNS` method
-   * which allows you to create a new `HTMLElement` for a given `tagName`
-   * or based on an object with specific non-readonly attributes:
-   * `id`, `className`, `textContent`, `style`, etc.
-   * @see https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS
-   *
-   * @param {string} namespace `namespaceURI` to associate with the new `HTMLElement`
-   * @param {Record<string, string> | string} param `tagName` or object
-   * @return {HTMLElement | Element} a new `HTMLElement` or `Element`
-   */
-  function createElementNS(namespace, param) {
-    if (typeof param === 'string') {
-      return getDocument().createElementNS(namespace, param);
-    }
-
-    const { tagName } = param;
-    const attr = { ...param };
-    const newElement = createElementNS(namespace, tagName);
-    delete attr.tagName;
-    ObjectAssign(newElement, attr);
-    return newElement;
-  }
-
-  const vHidden = 'v-hidden';
-
-  /**
-   * Returns the color form for `ColorPicker`.
-   *
-   * @param {CP.ColorPicker} self the `ColorPicker` instance
-   * @returns {HTMLElement | Element} a new `<div>` element with color component `<input>`
-   */
-  function getColorForm(self) {
-    const { format, id, componentLabels } = self;
-    const colorForm = createElement({
-      tagName: 'div',
-      className: `color-form ${format}`,
-    });
-
-    let components = ['hex'];
-    if (format === 'rgb') components = ['red', 'green', 'blue', 'alpha'];
-    else if (format === 'hsl') components = ['hue', 'saturation', 'lightness', 'alpha'];
-    else if (format === 'hwb') components = ['hue', 'whiteness', 'blackness', 'alpha'];
-
-    components.forEach((c) => {
-      const [C] = format === 'hex' ? ['#'] : toUpperCase(c).split('');
-      const cID = `color_${format}_${c}_${id}`;
-      const formatLabel = componentLabels[`${c}Label`];
-      const cInputLabel = createElement({ tagName: 'label' });
-      setAttribute(cInputLabel, 'for', cID);
-      cInputLabel.append(
-        createElement({ tagName: 'span', ariaHidden: 'true', innerText: `${C}:` }),
-        createElement({ tagName: 'span', className: vHidden, innerText: formatLabel }),
-      );
-      const cInput = createElement({
-        tagName: 'input',
-        id: cID,
-        // name: cID, - prevent saving the value to a form
-        type: format === 'hex' ? 'text' : 'number',
-        value: c === 'alpha' ? '100' : '0',
-        className: `color-input ${c}`,
-      });
-      setAttribute(cInput, 'autocomplete', 'off');
-      setAttribute(cInput, 'spellcheck', 'false');
-
-      // alpha
-      let max = '100';
-      let step = '1';
-      if (c !== 'alpha') {
-        if (format === 'rgb') {
-          max = '255'; step = '1';
-        } else if (c === 'hue') {
-          max = '360'; step = '1';
-        }
-      }
-      ObjectAssign(cInput, {
-        min: '0',
-        max,
-        step,
-      });
-      colorForm.append(cInputLabel, cInput);
-    });
-    return colorForm;
-  }
-
-  /**
-   * A global namespace for aria-label.
-   * @type {string}
-   */
-  const ariaLabel = 'aria-label';
-
-  /**
-   * A global namespace for aria-valuemin.
-   * @type {string}
-   */
-  const ariaValueMin = 'aria-valuemin';
-
-  /**
-   * A global namespace for aria-valuemax.
-   * @type {string}
-   */
-  const ariaValueMax = 'aria-valuemax';
-
-  /**
-   * Returns all color controls for `ColorPicker`.
-   *
-   * @param {CP.ColorPicker} self the `ColorPicker` instance
-   * @returns {HTMLElement | Element} color controls
-   */
-  function getColorControls(self) {
-    const { format, componentLabels } = self;
-    const {
-      hueLabel, alphaLabel, lightnessLabel, saturationLabel,
-      whitenessLabel, blacknessLabel,
-    } = componentLabels;
-
-    const max1 = format === 'hsl' ? 360 : 100;
-    const max2 = format === 'hsl' ? 100 : 360;
-    const max3 = 100;
-
-    let ctrl1Label = format === 'hsl'
-      ? `${hueLabel} & ${lightnessLabel}`
-      : `${lightnessLabel} & ${saturationLabel}`;
-
-    ctrl1Label = format === 'hwb'
-      ? `${whitenessLabel} & ${blacknessLabel}`
-      : ctrl1Label;
-
-    const ctrl2Label = format === 'hsl'
-      ? `${saturationLabel}`
-      : `${hueLabel}`;
-
-    const colorControls = createElement({
-      tagName: 'div',
-      className: `color-controls ${format}`,
-    });
-
-    const colorPointer = 'color-pointer';
-    const colorSlider = 'color-slider';
-
-    const controls = [
-      {
-        i: 1,
-        c: colorPointer,
-        l: ctrl1Label,
-        min: 0,
-        max: max1,
-      },
-      {
-        i: 2,
-        c: colorSlider,
-        l: ctrl2Label,
-        min: 0,
-        max: max2,
-      },
-      {
-        i: 3,
-        c: colorSlider,
-        l: alphaLabel,
-        min: 0,
-        max: max3,
-      },
-    ];
-
-    controls.forEach((template) => {
-      const {
-        i, c, l, min, max,
-      } = template;
-      const control = createElement({
-        tagName: 'div',
-        className: 'color-control',
-      });
-      setAttribute(control, 'role', 'presentation');
-
-      control.append(
-        createElement({
-          tagName: 'div',
-          className: `visual-control visual-control${i}`,
-        }),
-      );
-
-      const knob = createElement({
-        tagName: 'div',
-        className: `${c} knob`,
-        ariaLive: 'polite',
-      });
-
-      setAttribute(knob, ariaLabel, l);
-      setAttribute(knob, 'role', 'slider');
-      setAttribute(knob, tabIndex, '0');
-      setAttribute(knob, ariaValueMin, `${min}`);
-      setAttribute(knob, ariaValueMax, `${max}`);
-      control.append(knob);
-      colorControls.append(control);
-    });
-
-    return colorControls;
-  }
-
-  /**
-   * Helps setting CSS variables to the color-menu.
-   * @param {HTMLElement} element
-   * @param {Record<string,any>} props
-   */
-  function setCSSProperties(element, props) {
-    ObjectKeys(props).forEach((prop) => {
-      element.style.setProperty(prop, props[prop]);
-    });
-  }
-
-  /**
-   * Returns a color-defaults with given values and class.
-   * @param {CP.ColorPicker} self
-   * @param {CP.ColorPalette | string[]} colorsSource
-   * @param {string} menuClass
-   * @returns {HTMLElement | Element}
-   */
-  function getColorMenu(self, colorsSource, menuClass) {
-    const { input, format, componentLabels } = self;
-    const { defaultsLabel, presetsLabel } = componentLabels;
-    const isOptionsMenu = menuClass === 'color-options';
-    const isPalette = colorsSource instanceof ColorPalette;
-    const menuLabel = isOptionsMenu ? presetsLabel : defaultsLabel;
-    const colorsArray = isPalette ? colorsSource.colors : colorsSource;
-    const colorsCount = colorsArray.length;
-    const { lightSteps } = isPalette ? colorsSource : { lightSteps: null };
-    const fit = lightSteps || [9, 10].find((x) => colorsCount >= x * 2 && !(colorsCount % x)) || 5;
-    const isMultiLine = isOptionsMenu && colorsCount > fit;
-    let rowCountHover = 2;
-    rowCountHover = isMultiLine && colorsCount > fit * 2 ? 3 : rowCountHover;
-    rowCountHover = isMultiLine && colorsCount > fit * 3 ? 4 : rowCountHover;
-    rowCountHover = isMultiLine && colorsCount > fit * 4 ? 5 : rowCountHover;
-    const rowCount = rowCountHover - (colorsCount <= fit * 3 ? 1 : 2);
-    const isScrollable = isMultiLine && colorsCount > rowCount * fit;
-    let finalClass = menuClass;
-    finalClass += isScrollable ? ' scrollable' : '';
-    finalClass += isMultiLine ? ' multiline' : '';
-    const gap = isMultiLine ? '1px' : '0.25rem';
-    let optionSize = isMultiLine ? 1.75 : 2;
-    optionSize = fit > 5 && isMultiLine ? 1.5 : optionSize;
-    const menuHeight = `${rowCount * optionSize}rem`;
-    const menuHeightHover = `calc(${rowCountHover} * ${optionSize}rem + ${rowCountHover - 1} * ${gap})`;
-    /** @type {HTMLUListElement} */
-    // @ts-ignore -- <UL> is an `HTMLElement`
-    const menu = createElement({
-      tagName: 'ul',
-      className: finalClass,
-    });
-    setAttribute(menu, 'role', 'listbox');
-    setAttribute(menu, ariaLabel, menuLabel);
-
-    if (isScrollable) {
-      setCSSProperties(menu, {
-        '--grid-item-size': `${optionSize}rem`,
-        '--grid-fit': fit,
-        '--grid-gap': gap,
-        '--grid-height': menuHeight,
-        '--grid-hover-height': menuHeightHover,
-      });
-    }
-
-    colorsArray.forEach((x) => {
-      let [value, label] = typeof x === 'string' ? x.trim().split(':') : [];
-      if (x instanceof Color) {
-        value = x.toHexString();
-        label = value;
-      }
-      const color = new Color(x instanceof Color ? x : value, format);
-      const isActive = color.toString() === getAttribute(input, 'value');
-      const active = isActive ? ' active' : '';
-
-      const option = createElement({
-        tagName: 'li',
-        className: `color-option${active}`,
-        innerText: `${label || value}`,
-      });
-
-      setAttribute(option, tabIndex, '0');
-      setAttribute(option, 'data-value', `${value}`);
-      setAttribute(option, 'role', 'option');
-      setAttribute(option, ariaSelected, isActive ? 'true' : 'false');
-
-      if (isOptionsMenu) {
-        setElementStyle(option, { backgroundColor: value });
-      }
-
-      menu.append(option);
-    });
-    return menu;
-  }
-
-  /**
-  * Generate HTML markup and update instance properties.
-  * @param {CP.ColorPicker} self
-  */
-  function setMarkup(self) {
-    const {
-      input, parent, format, id, componentLabels, colorKeywords, colorPresets,
-    } = self;
-    const colorValue = getAttribute(input, 'value') || '#fff';
-
-    const {
-      toggleLabel, pickerLabel, formatLabel, hexLabel,
-    } = componentLabels;
-
-    // update color
-    const color = nonColors.includes(colorValue) ? '#fff' : colorValue;
-    self.color = new Color(color, format);
-
-    // set initial controls dimensions
-    const formatString = format === 'hex' ? hexLabel : toUpperCase(format);
-
-    const pickerBtn = createElement({
-      id: `picker-btn-${id}`,
-      tagName: 'button',
-      className: 'picker-toggle btn-appearance',
-    });
-    setAttribute(pickerBtn, ariaExpanded, 'false');
-    setAttribute(pickerBtn, ariaHasPopup, 'true');
-    pickerBtn.append(createElement({
-      tagName: 'span',
-      className: vHidden,
-      innerText: `${pickerLabel}. ${formatLabel}: ${formatString}`,
-    }));
-
-    const pickerDropdown = createElement({
-      tagName: 'div',
-      className: 'color-dropdown picker',
-    });
-    setAttribute(pickerDropdown, ariaLabelledBy, `picker-btn-${id}`);
-    setAttribute(pickerDropdown, 'role', 'group');
-
-    const colorControls = getColorControls(self);
-    const colorForm = getColorForm(self);
-
-    pickerDropdown.append(colorControls, colorForm);
-    input.before(pickerBtn);
-    parent.append(pickerDropdown);
-
-    // set colour key menu template
-    if (colorKeywords || colorPresets) {
-      const presetsDropdown = createElement({
-        tagName: 'div',
-        className: 'color-dropdown scrollable menu',
-      });
-
-      // color presets
-      if (colorPresets) {
-        presetsDropdown.append(getColorMenu(self, colorPresets, 'color-options'));
-      }
-
-      // explicit defaults [reset, initial, inherit, transparent, currentColor]
-      // also custom defaults [default: #069, complementary: #930]
-      if (colorKeywords && colorKeywords.length) {
-        presetsDropdown.append(getColorMenu(self, colorKeywords, 'color-defaults'));
-      }
-
-      const presetsBtn = createElement({
-        tagName: 'button',
-        className: 'menu-toggle btn-appearance',
-      });
-      setAttribute(presetsBtn, tabIndex, '-1');
-      setAttribute(presetsBtn, ariaExpanded, 'false');
-      setAttribute(presetsBtn, ariaHasPopup, 'true');
-
-      const xmlns = encodeURI('http://www.w3.org/2000/svg');
-      const presetsIcon = createElementNS(xmlns, { tagName: 'svg' });
-      setAttribute(presetsIcon, 'xmlns', xmlns);
-      setAttribute(presetsIcon, 'viewBox', '0 0 512 512');
-      setAttribute(presetsIcon, ariaHidden, 'true');
-
-      const path = createElementNS(xmlns, { tagName: 'path' });
-      setAttribute(path, 'd', 'M98,158l157,156L411,158l27,27L255,368L71,185L98,158z');
-      setAttribute(path, 'fill', '#fff');
-      presetsIcon.append(path);
-      presetsBtn.append(createElement({
-        tagName: 'span',
-        className: vHidden,
-        innerText: `${toggleLabel}`,
-      }), presetsIcon);
-
-      parent.append(presetsBtn, presetsDropdown);
-    }
-
-    // solve non-colors after settings save
-    if (colorKeywords && nonColors.includes(colorValue)) {
-      self.value = colorValue;
-    }
-    setAttribute(input, tabIndex, '-1');
-  }
-
-  var version = "1.0.0";
-
-  // @ts-ignore
-
-  const Version = version;
-
-  // ColorPicker GC
-  // ==============
-  const colorPickerString = 'color-picker';
-  const colorPickerSelector = `[data-function="${colorPickerString}"]`;
-  const colorPickerParentSelector = `.${colorPickerString},${colorPickerString}`;
-  const colorPickerDefaults = {
-    componentLabels: colorPickerLabels,
-    colorLabels: colorNames,
-    format: 'rgb',
-    colorPresets: false,
-    colorKeywords: false,
-  };
-
-  // ColorPicker Static Methods
-  // ==========================
-
-  /** @type {CP.GetInstance<ColorPicker, HTMLInputElement>} */
-  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, focusinEvent, self.showPicker);
-    fn(pickerToggle, mouseclickEvent, self.togglePicker);
-
-    if (menuToggle) {
-      fn(menuToggle, mouseclickEvent, self.toggleMenu);
-    }
-  }
-
-  /**
-   * 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 { input, colorMenu, parent } = self;
-    const doc = getDocument(input);
-    // const win = getWindow(input);
-    const win = doc.defaultView;
-
-    fn(self.controls, pointerdownEvent, self.pointerDown);
-    self.controlKnobs.forEach((x) => fn(x, keydownEvent, self.handleKnobs));
-
-    // @ts-ignore -- this is `Window`
-    fn(win, scrollEvent, self.handleScroll);
-    // @ts-ignore -- this is `Window`
-    fn(win, resizeEvent, self.update);
-
-    [input, ...self.inputs].forEach((x) => fn(x, changeEvent, self.changeHandler));
-
-    if (colorMenu) {
-      fn(colorMenu, mouseclickEvent, self.menuClickHandler);
-      fn(colorMenu, keydownEvent, self.menuKeyHandler);
-    }
-
-    fn(doc, pointermoveEvent, self.pointerMove);
-    fn(doc, pointerupEvent, self.pointerUp);
-    fn(parent, focusoutEvent, self.handleFocusOut);
-    fn(doc, keyupEvent, self.handleDismiss);
-  }
-
-  /**
-   * Triggers the `ColorPicker` original event.
-   * @param {ColorPicker} self
-   */
-  function firePickerChange(self) {
-    dispatchEvent(self.input, new CustomEvent('colorpicker.change'));
-  }
-
-  /**
-   * Hides a visible dropdown.
-   * @param {HTMLElement} element
-   * @returns {void}
-   */
-  function removePosition(element) {
-    /* istanbul ignore else */
-    if (element) {
-      ['bottom', 'top'].forEach((x) => removeClass(element, x));
-    }
-  }
-
-  /**
-   * Shows a `ColorPicker` dropdown and close the curent open dropdown.
-   * @param {ColorPicker} self
-   * @param {HTMLElement | Element} dropdown
-   */
-  function showDropdown(self, dropdown) {
-    const {
-      colorPicker, colorMenu, menuToggle, pickerToggle, parent,
-    } = self;
-    const isPicker = dropdown === colorPicker;
-    const openDropdown = isPicker ? colorMenu : colorPicker;
-    const activeBtn = isPicker ? menuToggle : pickerToggle;
-    const nextBtn = !isPicker ? menuToggle : pickerToggle;
-
-    if (!hasClass(parent, 'open')) {
-      addClass(parent, 'open');
-    }
-    if (openDropdown) {
-      removeClass(openDropdown, 'show');
-      removePosition(openDropdown);
-    }
-    addClass(dropdown, 'bottom');
-    reflow(dropdown);
-    addClass(dropdown, 'show');
-
-    if (isPicker) self.update();
-
-    if (!self.isOpen) {
-      toggleEventsOnShown(self, true);
-      self.updateDropdownPosition();
-      self.isOpen = true;
-      setAttribute(self.input, tabIndex, '0');
-      if (menuToggle) {
-        setAttribute(menuToggle, tabIndex, '0');
-      }
-    }
-
-    setAttribute(nextBtn, ariaExpanded, 'true');
-    if (activeBtn) {
-      setAttribute(activeBtn, ariaExpanded, 'false');
-    }
-  }
-
-  /**
-   * Color Picker Web Component
-   * @see http://thednp.github.io/color-picker
-   */
-  class ColorPicker {
-    /**
-     * Returns a new `ColorPicker` instance. The target of this constructor
-     * must be an `HTMLInputElement`.
-     *
-     * @param {HTMLInputElement | string} target the target `<input>` element
-     * @param {CP.ColorPickerOptions=} config instance options
-     */
-    constructor(target, config) {
-      const self = this;
-      /** @type {HTMLInputElement} */
-      // @ts-ignore
-      const input = querySelector(target);
-
-      // invalidate
-      if (!input) throw new TypeError(`ColorPicker target "${target}" cannot be found.`);
-      self.input = input;
-
-      const parent = closest(input, colorPickerParentSelector);
-      if (!parent) throw new TypeError('ColorPicker requires a specific markup to work.');
-
-      /** @type {HTMLElement} */
-      // @ts-ignore
-      self.parent = parent;
-
-      /** @type {number} */
-      self.id = getUID(input, colorPickerString);
-
-      // set initial state
-      /** @type {HTMLElement?} */
-      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 {string[]=} */
-      self.colorKeywords = undefined;
-      /** @type {(ColorPalette | string[])=} */
-      self.colorPresets = undefined;
-
-      // process options
-      const {
-        format, componentLabels, colorLabels, colorKeywords, colorPresets,
-      } = normalizeOptions(this.isCE ? parent : input, colorPickerDefaults, config || {});
-
-      let translatedColorLabels = colorNames;
-      /* istanbul ignore else */
-      if (colorLabels instanceof Array && colorLabels.length === 17) {
-        translatedColorLabels = colorLabels;
-      } else if (colorLabels && colorLabels.split(',').length === 17) {
-        translatedColorLabels = colorLabels.split(',');
-      }
-
-      // expose colour labels to all methods
-      colorNames.forEach((c, i) => {
-        self.colorLabels[c] = translatedColorLabels[i].trim();
-      });
-
-      // update and expose component labels
-      const tempComponentLabels = componentLabels && isValidJSON(componentLabels)
-        ? JSON.parse(componentLabels) : componentLabels;
-
-      /** @type {Record<string, string>} */
-      self.componentLabels = ObjectAssign({ ...colorPickerLabels }, tempComponentLabels);
-
-      /** @type {Color} */
-      self.color = new Color(input.value || '#fff', format);
-
-      /** @type {CP.ColorFormats} */
-      self.format = format;
-
-      // set colour defaults
-      if (colorKeywords instanceof Array && colorKeywords.length) {
-        self.colorKeywords = colorKeywords;
-      } else if (typeof colorKeywords === 'string' && colorKeywords.length) {
-        self.colorKeywords = colorKeywords.split(',').map((x) => x.trim());
-      }
-
-      // set colour presets
-      if (colorPresets instanceof Array && colorPresets.length) {
-        self.colorPresets = colorPresets;
-      } else if (typeof colorPresets === 'string' && colorPresets.length) {
-        if (isValidJSON(colorPresets)) {
-          const { hue, hueSteps, lightSteps } = JSON.parse(colorPresets);
-          self.colorPresets = new ColorPalette(hue, hueSteps, lightSteps);
-        } else {
-          self.colorPresets = colorPresets.split(',').map((x) => x.trim());
-        }
-      }
-
-      // bind events
-      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.update = self.update.bind(self);
-      self.handleScroll = self.handleScroll.bind(self);
-      self.handleFocusOut = self.handleFocusOut.bind(self);
-      self.changeHandler = self.changeHandler.bind(self);
-      self.handleDismiss = self.handleDismiss.bind(self);
-      self.handleKnobs = self.handleKnobs.bind(self);
-
-      // generate markup
-      setMarkup(self);
-
-      const [colorPicker, colorMenu] = getElementsByClassName('color-dropdown', parent);
-      // 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.colorPicker = colorPicker;
-      /** @type {HTMLElement} */
-      // @ts-ignore
-      self.colorMenu = colorMenu;
-      /** @type {HTMLInputElement[]} */
-      // @ts-ignore
-      self.inputs = [...getElementsByClassName('color-input', parent)];
-      const [controls] = getElementsByClassName('color-controls', parent);
-      self.controls = controls;
-      /** @type {(HTMLElement | Element)[]} */
-      self.controlKnobs = [...getElementsByClassName('knob', controls)];
-      /** @type {(HTMLElement)[]} */
-      // @ts-ignore
-      self.visuals = [...getElementsByClassName('visual-control', controls)];
-
-      // update colour picker controls, inputs and visuals
-      self.update();
-
-      // add main events listeners
-      toggleEvents(self, true);
-
-      // set component data
-      Data.set(input, colorPickerString, self);
-    }
-
-    /** Returns the current colour value */
-    get value() { return this.input.value; }
-
-    /**
-     * Sets a new colour value.
-     * @param {string} v new colour value
-     */
-    set value(v) { this.input.value = v; }
-
-    /** Check if the colour presets include any non-colour. */
-    get hasNonColor() {
-      return this.colorKeywords instanceof Array
-        && this.colorKeywords.some((x) => nonColors.includes(x));
-    }
-
-    /** Check if the parent of the target is a `ColorPickerElement` instance. */
-    get isCE() { return this.parent.localName === colorPickerString; }
-
-    /** Returns hexadecimal value of the current colour. */
-    get hex() { return this.color.toHex(true); }
-
-    /** Returns the current colour value in {h,s,v,a} object format. */
-    get hsv() { return this.color.toHsv(); }
-
-    /** Returns the current colour value in {h,s,l,a} object format. */
-    get hsl() { return this.color.toHsl(); }
-
-    /** Returns the current colour value in {h,w,b,a} object format. */
-    get hwb() { return this.color.toHwb(); }
-
-    /** Returns the current colour value in {r,g,b,a} object format. */
-    get rgb() { return this.color.toRgb(); }
-
-    /** Returns the current colour brightness. */
-    get brightness() { return this.color.brightness; }
-
-    /** Returns the current colour luminance. */
-    get luminance() { return this.color.luminance; }
-
-    /** Checks if the current colour requires a light text colour. */
-    get isDark() {
-      const { color, brightness } = this;
-      return brightness < 120 && color.a > 0.33;
-    }
-
-    /** Checks if the current input value is a valid colour. */
-    get isValid() {
-      const inputValue = this.input.value;
-      return inputValue !== '' && new Color(inputValue).isValid;
-    }
-
-    /** Returns the colour appearance, usually the closest colour name for the current value. */
-    get appearance() {
-      const {
-        colorLabels, hsl, hsv, format,
-      } = this;
-
-      const hue = roundPart(hsl.h * 360);
-      const saturationSource = format === 'hsl' ? hsl.s : hsv.s;
-      const saturation = roundPart(saturationSource * 100);
-      const lightness = roundPart(hsl.l * 100);
-      const hsvl = hsv.v * 100;
-
-      let colorName;
-
-      // determine color appearance
-      /* istanbul ignore else */
-      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;
-      }
-      return colorName;
-    }
-
-    /** Updates `ColorPicker` visuals. */
-    updateVisuals() {
-      const self = this;
-      const {
-        controlPositions, visuals,
-      } = self;
-      const [v1, v2, v3] = visuals;
-      const { offsetHeight } = v1;
-      const hue = controlPositions.c2y / offsetHeight;
-      const { r, g, b } = new Color({ h: hue, s: 1, l: 0.5 }).toRgb();
-      const whiteGrad = 'linear-gradient(rgb(255,255,255) 0%, rgb(255,255,255) 100%)';
-      const alpha = 1 - controlPositions.c3y / offsetHeight;
-      const roundA = roundPart((alpha * 100)) / 100;
-
-      const fill = new Color({
-        h: hue, s: 1, l: 0.5, a: alpha,
-      }).toRgbString();
-      const hueGradient = `linear-gradient(
+var ColorPicker=function(){"use strict";const W={},zt=o=>{const{type:t,currentTarget:e}=o;[...W[t]].forEach(([s,n])=>{e===s&&[...n].forEach(([r,i])=>{r.apply(s,[o]),typeof i=="object"&&i.once&&xt(s,t,r,i)})})},Gt=(o,t,e,s)=>{W[t]||(W[t]=new Map);const n=W[t];n.has(o)||n.set(o,new Map);const r=n.get(o),{size:i}=r;r.set(e,s),i||o.addEventListener(t,zt,s)},xt=(o,t,e,s)=>{const n=W[t],r=n&&n.get(o),i=r&&r.get(e),a=i!==void 0?i:s;r&&r.has(e)&&r.delete(e),n&&(!r||!r.size)&&n.delete(o),(!n||!n.size)&&delete W[t],(!r||!r.size)&&o.removeEventListener(t,zt,a)},Ut="aria-description",Pt="aria-expanded",Te="aria-hidden",St="aria-selected",tt="aria-valuenow",et="aria-valuetext",Re="change",De="DOMContentLoaded",Oe="focusin",Fe="focusout",_t="keydown",Ie="keyup",Ct="click",Ke="pointerdown",Wt="pointermove",Ve="pointerup",Be="resize",je="scroll",qe="touchmove",j="ArrowDown",ot="ArrowUp",ht="ArrowLeft",G="ArrowRight",ze="Enter",Ge="Escape",Xt="Space",Ue="transitionDuration",_e="transitionProperty",X="tabindex",We=navigator.userAgentData,gt=We,{userAgent:Xe}=navigator,ut=Xe,Jt=/iPhone|iPad|iPod|Android/i;gt?gt.brands.some(o=>Jt.test(o.brand)):Jt.test(ut);const Yt=/(iPhone|iPod|iPad)/;gt?gt.brands.some(o=>Yt.test(o.brand)):Yt.test(ut),ut&&ut.includes("Firefox");const{head:bt}=document;["webkitPerspective","perspective"].some(o=>o in bt.style);const Je=(o,t,e,s)=>{const n=s||!1;o.addEventListener(t,e,n)},Ye=(o,t,e,s)=>{const n=s||!1;o.removeEventListener(t,e,n)},Ze=(o,t,e,s)=>{const n=r=>{(r.target===o||r.currentTarget===o)&&(e.apply(o,[r]),Ye(o,t,n,s))};Je(o,t,n,s)},Qe=()=>{};(()=>{let o=!1;try{const t=Object.defineProperty({},"passive",{get:()=>(o=!0,o)});Ze(document,De,Qe,t)}catch{}return o})(),["webkitTransform","transform"].some(o=>o in bt.style),["webkitAnimation","animation"].some(o=>o in bt.style),["webkitTransition","transition"].some(o=>o in bt.style);const pt=(o,t)=>o.getAttribute(t),m=(o,t,e)=>o.setAttribute(t,e),Lt=(o,t)=>o.removeAttribute(t),q=(o,...t)=>{o.classList.add(...t)},D=(o,...t)=>{o.classList.remove(...t)},M=(o,t)=>o.classList.contains(t),At=o=>o!=null&&typeof o=="object"||!1,J=o=>At(o)&&typeof o.nodeType=="number"&&[1,2,3,4,5,6,7,8,9,10,11].some(t=>o.nodeType===t)||!1,st=o=>J(o)&&o.nodeType===1||!1,Y=new Map,nt={data:Y,set:(o,t,e)=>{st(o)&&(Y.has(t)||Y.set(t,new Map),Y.get(t).set(o,e))},getAllFor:o=>Y.get(o)||null,get:(o,t)=>{if(!st(o)||!t)return null;const e=nt.getAllFor(t);return o&&e&&e.get(o)||null},remove:(o,t)=>{const e=nt.getAllFor(t);!e||!st(o)||(e.delete(o),e.size===0&&Y.delete(t))}},to=(o,t)=>nt.get(o,t),V=o=>typeof o=="string"||!1,eo=o=>At(o)&&o.constructor.name==="Window"||!1,Zt=o=>J(o)&&o.nodeType===9||!1,F=o=>eo(o)?o.document:Zt(o)?o:J(o)?o.ownerDocument:window.document,B=(o,...t)=>Object.assign(o,...t),x=o=>{if(!o)return;if(V(o))return F().createElement(o);const{tagName:t}=o,e=x(t);if(!e)return;const s={...o};return delete s.tagName,B(e,s)},Ht=(o,t)=>{if(!o||!t)return;if(V(t))return F().createElementNS(o,t);const{tagName:e}=t,s=Ht(o,e);if(!s)return;const n={...t};return delete n.tagName,B(s,n)},oo=(o,t)=>o.dispatchEvent(t),Nt=(o,t)=>{const e=getComputedStyle(o),s=t.replace("webkit","Webkit").replace(/([A-Z])/g,"-$1").toLowerCase();return e.getPropertyValue(s)},so=o=>{const t=Nt(o,_e),e=Nt(o,Ue),s=e.includes("ms")?1:1e3,n=t&&t!=="none"?parseFloat(e)*s:0;return Number.isNaN(n)?0:n},U=(o,t)=>o.focus(t),Qt=o=>["true",!0].includes(o)?!0:["false",!1].includes(o)?!1:["null","",null,void 0].includes(o)?null:o!==""&&!Number.isNaN(+o)?+o:o,dt=o=>Object.entries(o),no=o=>o.toLowerCase(),ro=(o,t,e,s)=>{const n={...e},r={...o.dataset},i={...t},a={},l="title";return dt(r).forEach(([c,h])=>{const b=s&&typeof c=="string"&&c.includes(s)?c.replace(s,"").replace(/[A-Z]/g,u=>no(u)):c;a[b]=Qt(h)}),dt(n).forEach(([c,h])=>{n[c]=Qt(h)}),dt(t).forEach(([c,h])=>{c in n?i[c]=n[c]:c in a?i[c]=a[c]:i[c]=c===l?pt(o,l):h}),i},io=o=>o.offsetHeight,O=(o,t)=>{dt(t).forEach(([e,s])=>{if(s&&V(e)&&e.includes("--"))o.style.setProperty(e,s);else{const n={};n[e]=s,B(o.style,n)}})},ao=o=>At(o)&&o.constructor.name==="Map"||!1,te=o=>o.toUpperCase(),ft=(o,t)=>{const{width:e,height:s,top:n,right:r,bottom:i,left:a}=o.getBoundingClientRect();let l=1,c=1;if(t&&st(o)){const{offsetWidth:h,offsetHeight:b}=o;l=h>0?Math.round(e)/h:1,c=b>0?Math.round(s)/b:1}return{width:e/l,height:s/c,top:n/c,right:r/l,bottom:i/c,left:a/l,x:a/l,y:n/c}},Et=o=>F(o).documentElement;let ee=0,oe=0;const Z=new Map,se=(o,t)=>{let e=t?ee:oe;if(t){const s=se(o),n=Z.get(s)||new Map;Z.has(s)||Z.set(s,n),ao(n)&&!n.has(t)?(n.set(t,e),ee+=1):e=n.get(t)}else{const s=o.id||o;Z.has(s)?e=Z.get(s):(Z.set(s,e),oe+=1)}return e},lo=o=>{var t;return o?Zt(o)?o.defaultView:J(o)?(t=o?.ownerDocument)==null?void 0:t.defaultView:o:window},Mt=o=>Array.isArray(o)||!1,ne=(o,t)=>o?o.closest(t)||ne(o.getRootNode().host,t):null,_=(o,t)=>st(o)?o:(J(t)?t:F()).querySelector(o),rt=(o,t)=>(t&&J(t)?t:F()).getElementsByClassName(o),Tt=["transparent","currentColor","inherit","revert","initial"],v=o=>{const t=Math.floor(o);return o-t<.5?t:Math.round(o)},mt=[["aliceblue",{r:240,g:248,b:255}],["antiquewhite",{r:250,g:235,b:215}],["aqua",{r:0,g:255,b:255}],["aquamarine",{r:127,g:255,b:212}],["azure",{r:240,g:255,b:255}],["beige",{r:245,g:245,b:220}],["bisque",{r:255,g:228,b:196}],["black",{r:0,g:0,b:0}],["blanchedalmond",{r:255,g:235,b:205}],["blue",{r:0,g:0,b:255}],["blueviolet",{r:138,g:43,b:226}],["brown",{r:165,g:42,b:42}],["burlywood",{r:222,g:184,b:135}],["cadetblue",{r:95,g:158,b:160}],["chartreuse",{r:127,g:255,b:0}],["chocolate",{r:210,g:105,b:30}],["coral",{r:255,g:127,b:80}],["cornflowerblue",{r:100,g:149,b:237}],["cornsilk",{r:255,g:248,b:220}],["crimson",{r:220,g:20,b:60}],["cyan",{r:0,g:255,b:255}],["darkblue",{r:0,g:0,b:139}],["darkcyan",{r:0,g:139,b:139}],["darkgoldenrod",{r:184,g:134,b:11}],["darkgray",{r:169,g:169,b:169}],["darkgreen",{r:0,g:100,b:0}],["darkgrey",{r:169,g:169,b:169}],["darkkhaki",{r:189,g:183,b:107}],["darkmagenta",{r:139,g:0,b:139}],["darkolivegreen",{r:85,g:107,b:47}],["darkorange",{r:255,g:140,b:0}],["darkorchid",{r:153,g:50,b:204}],["darkred",{r:139,g:0,b:0}],["darksalmon",{r:233,g:150,b:122}],["darkseagreen",{r:143,g:188,b:143}],["darkslateblue",{r:72,g:61,b:139}],["darkslategray",{r:47,g:79,b:79}],["darkslategrey",{r:47,g:79,b:79}],["darkturquoise",{r:0,g:206,b:209}],["darkviolet",{r:148,g:0,b:211}],["deeppink",{r:255,g:20,b:147}],["deepskyblue",{r:0,g:191,b:255}],["dimgray",{r:105,g:105,b:105}],["dimgrey",{r:105,g:105,b:105}],["dodgerblue",{r:30,g:144,b:255}],["firebrick",{r:178,g:34,b:34}],["floralwhite",{r:255,g:250,b:240}],["forestgreen",{r:34,g:139,b:34}],["fuchsia",{r:255,g:0,b:255}],["gainsboro",{r:220,g:220,b:220}],["ghostwhite",{r:248,g:248,b:255}],["goldenrod",{r:218,g:165,b:32}],["gold",{r:255,g:215,b:0}],["gray",{r:128,g:128,b:128}],["green",{r:0,g:128,b:0}],["greenyellow",{r:173,g:255,b:47}],["grey",{r:128,g:128,b:128}],["honeydew",{r:240,g:255,b:240}],["hotpink",{r:255,g:105,b:180}],["indianred",{r:205,g:92,b:92}],["indigo",{r:75,g:0,b:130}],["ivory",{r:255,g:255,b:240}],["khaki",{r:240,g:230,b:140}],["lavenderblush",{r:255,g:240,b:245}],["lavender",{r:230,g:230,b:250}],["lawngreen",{r:124,g:252,b:0}],["lemonchiffon",{r:255,g:250,b:205}],["lightblue",{r:173,g:216,b:230}],["lightcoral",{r:240,g:128,b:128}],["lightcyan",{r:224,g:255,b:255}],["lightgoldenrodyellow",{r:250,g:250,b:210}],["lightgray",{r:211,g:211,b:211}],["lightgreen",{r:144,g:238,b:144}],["lightgrey",{r:211,g:211,b:211}],["lightpink",{r:255,g:182,b:193}],["lightsalmon",{r:255,g:160,b:122}],["lightseagreen",{r:32,g:178,b:170}],["lightskyblue",{r:135,g:206,b:250}],["lightslategray",{r:119,g:136,b:153}],["lightslategrey",{r:119,g:136,b:153}],["lightsteelblue",{r:176,g:196,b:222}],["lightyellow",{r:255,g:255,b:224}],["lime",{r:0,g:255,b:0}],["limegreen",{r:50,g:205,b:50}],["linen",{r:250,g:240,b:230}],["magenta",{r:255,g:0,b:255}],["maroon",{r:128,g:0,b:0}],["mediumaquamarine",{r:102,g:205,b:170}],["mediumblue",{r:0,g:0,b:205}],["mediumorchid",{r:186,g:85,b:211}],["mediumpurple",{r:147,g:112,b:219}],["mediumseagreen",{r:60,g:179,b:113}],["mediumslateblue",{r:123,g:104,b:238}],["mediumspringgreen",{r:0,g:250,b:154}],["mediumturquoise",{r:72,g:209,b:204}],["mediumvioletred",{r:199,g:21,b:133}],["midnightblue",{r:25,g:25,b:112}],["mintcream",{r:245,g:255,b:250}],["mistyrose",{r:255,g:228,b:225}],["moccasin",{r:255,g:228,b:181}],["navajowhite",{r:255,g:222,b:173}],["navy",{r:0,g:0,b:128}],["oldlace",{r:253,g:245,b:230}],["olive",{r:128,g:128,b:0}],["olivedrab",{r:107,g:142,b:35}],["orange",{r:255,g:165,b:0}],["orangered",{r:255,g:69,b:0}],["orchid",{r:218,g:112,b:214}],["palegoldenrod",{r:238,g:232,b:170}],["palegreen",{r:152,g:251,b:152}],["paleturquoise",{r:175,g:238,b:238}],["palevioletred",{r:219,g:112,b:147}],["papayawhip",{r:255,g:239,b:213}],["peachpuff",{r:255,g:218,b:185}],["peru",{r:205,g:133,b:63}],["pink",{r:255,g:192,b:203}],["plum",{r:221,g:160,b:221}],["powderblue",{r:176,g:224,b:230}],["purple",{r:128,g:0,b:128}],["rebeccapurple",{r:102,g:51,b:153}],["red",{r:255,g:0,b:0}],["rosybrown",{r:188,g:143,b:143}],["royalblue",{r:65,g:105,b:225}],["saddlebrown",{r:139,g:69,b:19}],["salmon",{r:250,g:128,b:114}],["sandybrown",{r:244,g:164,b:96}],["seagreen",{r:46,g:139,b:87}],["seashell",{r:255,g:245,b:238}],["sienna",{r:160,g:82,b:45}],["silver",{r:192,g:192,b:192}],["skyblue",{r:135,g:206,b:235}],["slateblue",{r:106,g:90,b:205}],["slategray",{r:112,g:128,b:144}],["slategrey",{r:112,g:128,b:144}],["snow",{r:255,g:250,b:250}],["springgreen",{r:0,g:255,b:127}],["steelblue",{r:70,g:130,b:180}],["tan",{r:210,g:180,b:140}],["teal",{r:0,g:128,b:128}],["thistle",{r:216,g:191,b:216}],["tomato",{r:255,g:99,b:71}],["turquoise",{r:64,g:224,b:208}],["violet",{r:238,g:130,b:238}],["wheat",{r:245,g:222,b:179}],["white",{r:255,g:255,b:255}],["whitesmoke",{r:245,g:245,b:245}],["yellow",{r:255,g:255,b:0}],["yellowgreen",{r:154,g:205,b:50}]],re="deg|rad|grad|turn",ie="[-\\+]?\\d+%?",ae="[-\\+]?\\d*\\.\\d+%?",le=`[-\\+]?\\d*\\.?\\d+(?:${re})?`,vt=`(?:${ae})|(?:${ie})`,Rt=`(?:${vt})|(?:${le}?)`,co="(?:[\\s|\\(\\s|\\s\\(\\s]+)?",ho="(?:[\\s|\\)\\s]+)?",ce="(?:[,|\\s]+)",go="(?:[,|\\/\\s]*)?",it=`${co}(${Rt})${ce}(${vt})${ce}(${vt})${go}(${vt})?${ho}`,I={CSS_UNIT:new RegExp(Rt),ANGLES:re,CSS_ANGLE:le,CSS_INTEGER:ie,CSS_NUMBER:ae,CSS_UNIT2:Rt,PERMISSIVE_MATCH:it,hwb:new RegExp(`hwb${it}`),rgb:new RegExp(`rgb(?:a)?${it}`),hsl:new RegExp(`hsl(?:a)?${it}`),hsv:new RegExp(`hsv(?:a)?${it}`),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})$/},he=o=>Tt.includes(o),at=(o,t)=>o!==null&&typeof o=="object"&&Object.keys(t).every(e=>e in o),ge=o=>`${o}`.includes(".")&&parseFloat(o)===1,wt=o=>typeof o=="string"&&o.includes("%"),L=o=>!!I.CSS_UNIT.exec(`${o}`),ue=["rgb","hex","hsl","hsv","hwb"],be=o=>Tt.includes(o)||["#",...ue].some(t=>o.includes(t))?!1:mt.some(([t])=>o===t),T=(o,t)=>{let e=o;if(typeof o=="number"&&Math.min(o,0)===0&&Math.max(o,1)===1)return o;ge(o)&&(e="100%");const s=wt(e);return e=t===360?parseFloat(e):Math.min(t,Math.max(0,parseFloat(e))),s&&(e=e*t/100),Math.abs(e-t)<1e-6?1:(t===360?e=(e<0?e%t+t:e%t)/t:e=e%t/t,e)},Dt=o=>{let t=parseFloat(o);return(Number.isNaN(t)||t<0||t>1)&&(t=1),t},$t=o=>Math.min(1,Math.max(0,o)),z=o=>o.length===1?`0${o}`:String(o),pe=o=>{const[[,t]]=mt.filter(([e])=>e===o.toLowerCase());return t},A=o=>parseInt(o,16),Ot=o=>A(o)/255,de=o=>v(o*255).toString(16),fe=(o,t,e)=>{const s=Math.max(o,t,e),n=Math.min(o,t,e);let r=0,i=0;const a=(s+n)/2;if(s===n)i=0,r=0;else{const l=s-n;i=a>.5?l/(2-s-n):l/(s+n),s===o&&(r=(t-e)/l+(t<e?6:0)),s===t&&(r=(e-o)/l+2),s===e&&(r=(o-t)/l+4),r/=6}return{h:r,s:i,l:a}},kt=(o,t,e)=>{let s=e;return s<0&&(s+=1),s>1&&(s-=1),s<1/6?o+(t-o)*(6*s):s<1/2?t:s<2/3?o+(t-o)*(2/3-s)*6:o},lt=(o,t,e)=>{let s=0,n=0,r=0;if(t===0)n=e,r=e,s=e;else if(e){const i=e<.5?e*(1+t):e+t-e*t,a=2*e-i;s=kt(a,i,o+1/3),n=kt(a,i,o),r=kt(a,i,o-1/3)}return{r:s,g:n,b:r}},me=(o,t,e)=>{let s=0,n=0;const r=Math.min(o,t,e),i=Math.max(o,t,e),a=1-i;if(i===r)return{h:0,w:r,b:a};o===r?(s=t-e,n=3):(s=t===r?e-o:o-t,n=t===r?5:1);const l=(n-s/(i-r))/6;return{h:l===1?0:l,w:r,b:a}},ve=(o,t,e)=>{if(t+e>=1){const i=t/(t+e);return{r:i,g:i,b:i}}let{r:s,g:n,b:r}=lt(o,1,.5);return[s,n,r]=[s,n,r].map(i=>i*(1-t-e)+t),{r:s,g:n,b:r}},we=(o,t,e)=>{const s=Math.max(o,t,e),n=Math.min(o,t,e);let r=0;const i=s,a=s-n,l=s===0?0:a/s;return s===n?r=0:(o===s&&(r=(t-e)/a+(t<e?6:0)),t===s&&(r=(e-o)/a+2),e===s&&(r=(o-t)/a+4),r/=6),{h:r,s:l,v:i}},Ft=(o,t,e)=>{const s=o*6,n=t,r=e,i=Math.floor(s),a=s-i,l=r*(1-n),c=r*(1-a*n),h=r*(1-(1-a)*n),b=i%6,u=[r,c,l,l,h,r][b],d=[h,r,r,c,l,l][b],g=[l,l,h,r,r,c][b];return{r:u,g:d,b:g}},$e=(o,t,e,s)=>{const n=[z(v(o).toString(16)),z(v(t).toString(16)),z(v(e).toString(16))];return s&&n[0].charAt(0)===n[0].charAt(1)&&n[1].charAt(0)===n[1].charAt(1)&&n[2].charAt(0)===n[2].charAt(1)?n[0].charAt(0)+n[1].charAt(0)+n[2].charAt(0):n.join("")},It=(o,t,e,s,n)=>{const r=[z(v(o).toString(16)),z(v(t).toString(16)),z(v(e).toString(16)),z(de(s))];return n&&r[0].charAt(0)===r[0].charAt(1)&&r[1].charAt(0)===r[1].charAt(1)&&r[2].charAt(0)===r[2].charAt(1)&&r[3].charAt(0)===r[3].charAt(1)?r[0].charAt(0)+r[1].charAt(0)+r[2].charAt(0)+r[3].charAt(0):r.join("")},ke=o=>{const t=String(o).trim().toLowerCase();if(be(t))return Object.assign(pe(t),{a:1,format:"rgb",ok:!0});if(he(t))return{r:0,g:0,b:0,a:t==="transparent"?0:1,format:"rgb",ok:!0};let[,e,s,n,r]=I.rgb.exec(t)||[];return e&&s&&n?{r:e,g:s,b:n,a:r!==void 0?r:1,format:"rgb",ok:!0}:([,e,s,n,r]=I.hsl.exec(t)||[],e&&s&&n?{h:e,s,l:n,a:r!==void 0?r:1,format:"hsl",ok:!0}:([,e,s,n,r]=I.hsv.exec(t)||[],e&&s&&n?{h:e,s,v:n,a:r!==void 0?r:1,format:"hsv",ok:!0}:([,e,s,n,r]=I.hwb.exec(t)||[],e&&s&&n?{h:e,w:s,b:n,a:r!==void 0?r:1,format:"hwb",ok:!0}:([,e,s,n,r]=I.hex8.exec(t)||[],e&&s&&n&&r?{r:A(e),g:A(s),b:A(n),a:Ot(r),format:"hex",ok:!0}:([,e,s,n]=I.hex6.exec(t)||[],e&&s&&n?{r:A(e),g:A(s),b:A(n),a:1,format:"hex",ok:!0}:([,e,s,n,r]=I.hex4.exec(t)||[],e&&s&&n&&r?{r:A(e+e),g:A(s+s),b:A(n+n),a:Ot(r+r),format:"hex",ok:!0}:([,e,s,n]=I.hex3.exec(t)||[],e&&s&&n?{r:A(e+e),g:A(s+s),b:A(n+n),a:1,format:"hex",ok:!0}:{r:0,g:0,b:0,a:1,format:"rgb",ok:!o})))))))},ye=o=>{let t={r:0,g:0,b:0},e=o,s=1,n,r,i,a,l,c,h,b,u="rgb",d=!1;return(!e||typeof e=="string")&&(e=ke(e),d=e.ok),at(e,t)&&L(e.r)&&L(e.g)&&L(e.b)&&({r:h,g:b,b:l}=e,[h,b,l]=[h,b,l].map(g=>T(g,wt(g)?100:255)),t={r:h,g:b,b:l},u="format"in e?e.format:"rgb"),at(e,{h:0,s:0,v:0})&&L(e.h)&&L(e.s)&&L(e.v)&&({h:c,s:n,v:r}=e,c=T(c,360),n=T(n,100),r=T(r,100),t=Ft(c,n,r),u="hsv"),at(e,{h:0,s:0,l:0})&&L(e.h)&&L(e.s)&&L(e.l)&&({h:c,s:n,l:i}=e,c=T(c,360),n=T(n,100),i=T(i,100),t=lt(c,n,i),u="hsl"),at(e,{h:0,w:0,b:0})&&L(e.h)&&L(e.w)&&L(e.b)&&({h:c,w:a,b:l}=e,c=T(c,360),a=T(a,100),l=T(l,100),t=ve(c,a,l),u="hwb"),L(e.a)&&(s=e.a,s=wt(s)||parseFloat(`${s}`)>1?T(s,100):s),{r:t.r,g:t.g,b:t.b,a:Dt(s),format:u,ok:d}},uo="1.0.6";class k{static matchers=I;static isOnePointZero=ge;static isPercentage=wt;static isValidCSSUnit=L;static isNonColor=he;static isColorName=be;static isColorType=at;static pad2=z;static clamp01=$t;static bound01=T;static boundAlpha=Dt;static getRGBFromName=pe;static convertHexToDecimal=Ot;static convertDecimalToHex=de;static rgbToHsl=fe;static rgbToHex=$e;static rgbToHsv=we;static rgbToHwb=me;static rgbaToHex=It;static hslToRgb=Ft;static hsvToRgb=Ft;static hueToRgb=kt;static hwbToRgb=ve;static parseIntFromHex=A;static stringInputToObject=ke;static inputToRGB=ye;static roundPart=v;static webColors=mt;static nonColors=Tt;static version=uo;r;g;b;a;format;ok;originalInput;constructor(t,e){const s=e&&ue.includes(e)?e:"",{r:n,g:r,b:i,a,ok:l,format:c}=ye(t);this.originalInput=t,this.r=n,this.g=r,this.b=i,this.a=a,this.ok=l,this.format=s||c}get isValid(){return this.ok}get isDark(){return this.brightness<120}get luminance(){const{r:t,g:e,b:s}=this;let n=0,r=0,i=0;return t<=.03928?n=t/12.92:n=((t+.055)/1.055)**2.4,e<=.03928?r=e/12.92:r=((e+.055)/1.055)**2.4,s<=.03928?i=s/12.92:i=((s+.055)/1.055)**2.4,.2126*n+.7152*r+.0722*i}get brightness(){const{r:t,g:e,b:s}=this.toRgb();return(t*299+e*587+s*114)/1e3}get name(){const{r:t,g:e,b:s}=this.toRgb(),[n]=mt.map(([r,i])=>{const a=(((i.r-t)*.3)**2+((i.g-e)*.6)**2+((i.b-s)*.1)**2)**.5;return[r,a]}).find(([,r],i,a)=>r===Math.min(...a.map(([,l])=>l)));return n}toRgb(){let{r:t,g:e,b:s,a:n}=this;return[t,e,s]=[t,e,s].map(r=>v(r*255*100)/100),n=v(n*100)/100,{r:t,g:e,b:s,a:n}}toRgbString(){const{r:t,g:e,b:s,a:n}=this.toRgb(),[r,i,a]=[t,e,s].map(v);return n===1?`rgb(${r}, ${i}, ${a})`:`rgba(${r}, ${i}, ${a}, ${n})`}toRgbCSS4String(){const{r:t,g:e,b:s,a:n}=this.toRgb(),[r,i,a]=[t,e,s].map(v),l=n===1?"":` / ${v(n*100)}%`;return`rgb(${r} ${i} ${a}${l})`}toHex(t){const{r:e,g:s,b:n,a:r}=this.toRgb();return r===1?$e(e,s,n,t):It(e,s,n,r,t)}toHexString(t){return`#${this.toHex(t)}`}toHex8(t){const{r:e,g:s,b:n,a:r}=this.toRgb();return It(e,s,n,r,t)}toHex8String(t){return`#${this.toHex8(t)}`}toHsv(){const{r:t,g:e,b:s,a:n}=this,{h:r,s:i,v:a}=we(t,e,s);return{h:r,s:i,v:a,a:n}}toHsl(){const{r:t,g:e,b:s,a:n}=this,{h:r,s:i,l:a}=fe(t,e,s);return{h:r,s:i,l:a,a:n}}toHslString(){let{h:t,s:e,l:s,a:n}=this.toHsl();return t=v(t*360),e=v(e*100),s=v(s*100),n=v(n*100)/100,n===1?`hsl(${t}, ${e}%, ${s}%)`:`hsla(${t}, ${e}%, ${s}%, ${n})`}toHslCSS4String(){let{h:t,s:e,l:s,a:n}=this.toHsl();t=v(t*360),e=v(e*100),s=v(s*100),n=v(n*100);const r=n<100?` / ${v(n)}%`:"";return`hsl(${t}deg ${e}% ${s}%${r})`}toHwb(){const{r:t,g:e,b:s,a:n}=this,{h:r,w:i,b:a}=me(t,e,s);return{h:r,w:i,b:a,a:n}}toHwbString(){let{h:t,w:e,b:s,a:n}=this.toHwb();t=v(t*360),e=v(e*100),s=v(s*100),n=v(n*100);const r=n<100?` / ${v(n)}%`:"";return`hwb(${t}deg ${e}% ${s}%${r})`}setAlpha(t){return typeof t!="number"?this:(this.a=Dt(t),this)}saturate(t){if(typeof t!="number")return this;const{h:e,s,l:n}=this.toHsl(),{r,g:i,b:a}=lt(e,$t(s+t/100),n);return Object.assign(this,{r,g:i,b:a}),this}desaturate(t){return typeof t=="number"?this.saturate(-t):this}greyscale(){return this.saturate(-100)}lighten(t){if(typeof t!="number")return this;const{h:e,s,l:n}=this.toHsl(),{r,g:i,b:a}=lt(e,s,$t(n+t/100));return Object.assign(this,{r,g:i,b:a}),this}darken(t){return typeof t=="number"?this.lighten(-t):this}spin(t){if(typeof t!="number")return this;const{h:e,s,l:n}=this.toHsl(),{r,g:i,b:a}=lt($t((e*360+t)%360/360),s,n);return Object.assign(this,{r,g:i,b:a}),this}clone(){return new k(this)}toString(t){const{format:e}=this;return e==="hex"?this.toHexString(t):e==="hsl"?this.toHslString():e==="hwb"?this.toHwbString():this.toRgbString()}}class Kt{static Color=k;hue;hueSteps;lightSteps;saturation;colors;constructor(...t){let e=0,s=12,n=10,r=[.5],i=100;if(t.length===4)[e,s,n,i]=t;else if(t.length===3)[e,s,n]=t;else if(t.length===2&&([s,n]=t,[s,n].some(g=>g<1)))throw TypeError("ColorPalette: the two minimum arguments must be numbers higher than 0.");const a=[],l=360/s,c=k.roundPart((n-(n%2?1:0))/2),h=[.25,.2,.15,.11,.09,.075],b=[[1,2,3],[4,5],[6,7],[8,9],[10,11],[12,13]],u=b.find(g=>g.includes(n)),d=u?h[b.indexOf(u)]:100/(n+(n%2?0:1))/100;for(let g=1;g<c+1;g+=1)r=[...r,.5+d*g];for(let g=1;g<n-c;g+=1)r=[.5-d*g,...r];for(let g=0;g<s;g+=1){const p=(e+g*l)%360/360;r.forEach(f=>{const w=new k({h:p,s:1,l:f});a.push(i<100?w.saturate(i-100):w)})}this.hue=e,this.hueSteps=s,this.lightSteps=n,this.saturation=i,this.colors=a}}const xe={pickerLabel:"Colour Picker",appearanceLabel:"Colour Appearance",valueLabel:"Colour Value",toggleLabel:"Select Colour",presetsLabel:"Colour Presets",defaultsLabel:"Colour Defaults",formatLabel:"Format",alphaLabel:"Alpha",hexLabel:"Hexadecimal",hueLabel:"Hue",whitenessLabel:"Whiteness",blacknessLabel:"Blackness",saturationLabel:"Saturation",lightnessLabel:"Lightness",redLabel:"Red",greenLabel:"Green",blueLabel:"Blue"},Vt=["white","black","grey","red","orange","brown","gold","olive","yellow","lime","green","teal","cyan","blue","violet","magenta","pink"],Pe=o=>{if(!V(o))return!1;try{JSON.parse(o)}catch{return!1}return!0},Bt="v-hidden",bo=o=>{const{format:t,id:e,componentLabels:s}=o,n=x({tagName:"div",className:`color-form ${t}`});let r=["hex"];return t==="rgb"?r=["red","green","blue","alpha"]:t==="hsl"?r=["hue","saturation","lightness","alpha"]:t==="hwb"&&(r=["hue","whiteness","blackness","alpha"]),r.forEach(i=>{const[a]=t==="hex"?["#"]:te(i).split(""),l=`color_${t}_${i}_${e}`,c=s[`${i}Label`],h=x({tagName:"label"});m(h,"for",l),h.append(x({tagName:"span",ariaHidden:"true",innerText:`${a}:`}),x({tagName:"span",className:Bt,innerText:c}));const b=x({tagName:"input",id:l,type:t==="hex"?"text":"number",value:i==="alpha"?"100":"0",className:`color-input ${i}`,autocomplete:"off",spellcheck:!1});let u="100",d="1";i!=="alpha"&&(t==="rgb"?(u="255",d="1"):i==="hue"&&(u="360",d="1")),B(b,{min:"0",max:u,step:d}),n.append(h,b)}),n},po=o=>{const{format:t,componentLabels:e}=o,{hueLabel:s,alphaLabel:n,lightnessLabel:r,saturationLabel:i,whitenessLabel:a,blacknessLabel:l}=e,c=t==="hsl"?360:100,h=t==="hsl"?100:360,b=100;let u=t==="hsl"?`${s} & ${r}`:`${r} & ${i}`;u=t==="hwb"?`${a} & ${l}`:u;const d=t==="hsl"?`${i}`:`${s}`,g=x({tagName:"div",className:`color-controls ${t}`}),p="color-pointer",f="color-slider";return[{i:1,c:p,l:u,min:0,max:c},{i:2,c:f,l:d,min:0,max:h},{i:3,c:f,l:n,min:0,max:b}].forEach($=>{const{i:P,c:H,l:S,min:C,max:R}=$,E=x({tagName:"div",className:"color-control",role:"presentation"});E.append(x({tagName:"div",className:`visual-control visual-control${P}`}));const N=x({tagName:"div",className:`${H} knob`,ariaLive:"polite",ariaLabel:S,role:"slider",tabIndex:0,ariaValueMin:`${C}`,ariaValueMax:`${R}`});E.append(N),g.append(E)}),g},Se=(o,t,e)=>{const{input:s,format:n,componentLabels:r}=o,{defaultsLabel:i,presetsLabel:a}=r,l=e==="color-options",c=t instanceof Kt,h=l?a:i,b=c?t.colors:t,u=b.length,{lightSteps:d}=c?t:{lightSteps:null},g=d||[9,10].find(N=>u>=N*2&&!(u%N))||5,p=l&&u>g;let f=2;f=p&&u>g*2?3:f,f=p&&u>g*3?4:f,f=p&&u>g*4?5:f;const w=f-(u<=g*3?1:2),$=p&&u>w*g;let P=e;P+=$?" scrollable":"",P+=p?" multiline":"";const H=p?"1px":"0.25rem";let S=p?1.75:2;S=g>5&&p?1.5:S;const C=`${w*S}rem`,R=`calc(${f} * ${S}rem + ${f-1} * ${H})`,E=x({tagName:"ul",className:P,role:"listbox",ariaLabel:h});return $&&O(E,{"--grid-item-size":`${S}rem`,"--grid-fit":`${g}`,"--grid-gap":H,"--grid-height":C,"--grid-hover-height":R}),b.forEach(N=>{let[K,ct]=typeof N=="string"?N.trim().split(":"):[];N instanceof k&&(K=N.toHexString(),ct=K);const Me=new k(N instanceof k?N:K,n).toString()===pt(s,"value"),qt=x({tagName:"li",className:`color-option${Me?" active":""}`,innerText:`${ct||K}`,tabIndex:0,role:"option",ariaSelected:Me?"true":"false"});m(qt,"data-value",`${K}`),l&&O(qt,{backgroundColor:K}),E.append(qt)}),E},fo=o=>{const{input:t,parent:e,format:s,id:n,componentLabels:r,colorKeywords:i,colorPresets:a}=o,l=pt(t,"value")||"#fff",{nonColors:c}=k,{toggleLabel:h,pickerLabel:b,formatLabel:u,hexLabel:d}=r,g=c.includes(l)?"#fff":l;o.color=new k(g,s);const p=s==="hex"?d:te(s),f=x({id:`picker-btn-${n}`,tagName:"button",className:"picker-toggle btn-appearance",ariaExpanded:"false",ariaHasPopup:"true"});f.append(x({tagName:"span",className:Bt,innerText:`${b}. ${u}: ${p}`}));const w=x({tagName:"div",className:"color-dropdown picker",role:"group",ariaLabelledBy:`picker-btn-${n}`}),$=po(o),P=bo(o);if(w.append($,P),t.before(f),e.append(w),i||a){const H=x({tagName:"div",className:"color-dropdown scrollable menu"});a&&H.append(Se(o,a,"color-options")),i&&i.length&&H.append(Se(o,i,"color-defaults"));const S=x({tagName:"button",className:"menu-toggle btn-appearance",tabIndex:-1,ariaExpanded:"false",ariaHasPopup:"true"}),C=encodeURI("http://www.w3.org/2000/svg"),R=Ht(C,{tagName:"svg"});m(R,"xmlns",C),m(R,"viewBox","0 0 512 512"),m(R,Te,"true");const E=Ht(C,{tagName:"path"});m(E,"d","M98,158l157,156L411,158l27,27L255,368L71,185L98,158z"),m(E,"fill","#fff"),R.append(E),S.append(x({tagName:"span",className:Bt,innerText:`${h}`}),R),e.append(S,H)}i&&c.includes(l)&&(o.value=l),m(t,X,"-1")},mo="2.0.0-alpha1",Q="color-picker",vo=`[data-function="${Q}"]`,Ce=`.${Q}`,wo={componentLabels:xe,colorLabels:Vt,format:"rgb",colorPresets:!1,colorKeywords:!1},{roundPart:y,nonColors:yt}=k,$o=o=>to(o,Q),ko=o=>new Ee(o),Le=(o,t)=>{const e=t?Gt:xt,{input:s,pickerToggle:n,menuToggle:r}=o;e(s,Oe,o.showPicker),e(n,Ct,o.togglePicker),r&&e(r,Ct,o.toggleMenu)},Ae=(o,t)=>{const e=t?Gt:xt,{input:s,colorMenu:n,parent:r}=o,i=F(s),a=lo(i);e(o.controls,Ke,o.pointerDown),o.controlKnobs.forEach(l=>e(l,_t,o.handleKnobs)),e(a,je,o.handleScroll),e(a,Be,o.update),[s,...o.inputs].forEach(l=>e(l,Re,o.changeHandler)),n&&(e(n,Ct,o.menuClickHandler),e(n,_t,o.menuKeyHandler)),e(i,Wt,o.pointerMove),e(i,Ve,o.pointerUp),e(r,Fe,o.handleFocusOut),e(i,Ie,o.handleDismiss)},He=o=>{oo(o.input,new CustomEvent("colorpicker.change"))},Ne=o=>{o&&["bottom","top"].forEach(t=>D(o,t))},jt=(o,t)=>{const{colorPicker:e,colorMenu:s,menuToggle:n,pickerToggle:r,parent:i}=o,a=t===e,l=a?s:e,c=a?n:r,h=a?r:n;M(i,"open")||q(i,"open"),l&&(D(l,"show"),Ne(l)),q(t,"bottom"),io(t),q(t,"show"),a&&o.update(),o.isOpen||(Ae(o,!0),o.updateDropdownPosition(),o.isOpen=!0,m(o.input,X,"0"),n&&m(n,X,"0")),m(h,Pt,"true"),c&&m(c,Pt,"false")};class Ee{static Color=k;static ColorPalette=Kt;static getInstance=$o;static init=ko;static selector=vo;static roundPart=y;static setElementStyle=O;static setAttribute=m;static getBoundingClientRect=ft;static version=mo;id;input;color;format="rgb";parent;dragElement;isOpen=!1;controlPositions;colorLabels={};colorKeywords;colorPresets;componentLabels;pickerToggle;menuToggle;colorPicker;colorMenu;controls;inputs;controlKnobs;visuals;constructor(t,e){const s=_(t);if(typeof t>"u")throw new TypeError("ColorPicker target not specified.");if(V(t)&&!s)throw new TypeError(`ColorPicker target "${t}" cannot be found.`);this.input=s;const n=ne(s,Ce);if(!n)throw new TypeError("ColorPicker requires a specific markup to work.");this.parent=n,this.id=se(s,Q),this.dragElement=void 0,this.isOpen=!1,this.controlPositions={c1x:0,c1y:0,c2y:0,c3y:0},this.colorLabels={},this.colorKeywords=!1,this.colorPresets=!1;const{format:r,componentLabels:i,colorLabels:a,colorKeywords:l,colorPresets:c}=ro(s,wo,e||{});let h=Vt;Mt(a)&&a.length===17?h=a:V(a)&&a.split(",").length===17&&(h=a.split(",")),Vt.forEach((p,f)=>{this.colorLabels[p]=h[f].trim()});const b=V(i)&&Pe(i)?JSON.parse(i):i;if(this.componentLabels=B({...xe},b),this.color=new k(s.value||"#fff",r),this.format=r,Mt(l)&&l.length?this.colorKeywords=l:V(l)&&l.length&&(this.colorKeywords=l.split(",").map(p=>p.trim())),Mt(c)&&c.length)this.colorPresets=c;else if(c&&Pe(c)){const{hue:p,hueSteps:f,lightSteps:w,saturation:$}=JSON.parse(c);this.colorPresets=new Kt(p,f,w,$)}else V(c)&&(this.colorPresets=c.split(",").map(p=>p.trim()));this.showPicker=this.showPicker.bind(this),this.togglePicker=this.togglePicker.bind(this),this.toggleMenu=this.toggleMenu.bind(this),this.menuClickHandler=this.menuClickHandler.bind(this),this.menuKeyHandler=this.menuKeyHandler.bind(this),this.pointerDown=this.pointerDown.bind(this),this.pointerMove=this.pointerMove.bind(this),this.pointerUp=this.pointerUp.bind(this),this.update=this.update.bind(this),this.handleScroll=this.handleScroll.bind(this),this.handleFocusOut=this.handleFocusOut.bind(this),this.changeHandler=this.changeHandler.bind(this),this.handleDismiss=this.handleDismiss.bind(this),this.handleKnobs=this.handleKnobs.bind(this),fo(this);const[u,d]=rt("color-dropdown",n);this.pickerToggle=_(".picker-toggle",n),this.menuToggle=_(".menu-toggle",n),this.colorPicker=u,this.colorMenu=d,this.inputs=[...rt("color-input",n)];const[g]=rt("color-controls",n);this.controls=g,this.controlKnobs=[...rt("knob",g)],this.visuals=[...rt("visual-control",g)],this.update(),Le(this,!0),nt.set(s,Q,this)}get value(){return this.input.value}set value(t){this.input.value=t}get hasNonColor(){return this.colorKeywords instanceof Array&&this.colorKeywords.some(t=>yt.includes(t))}get hex(){return this.color.toHex(!0)}get hsv(){return this.color.toHsv()}get hsl(){return this.color.toHsl()}get hwb(){return this.color.toHwb()}get rgb(){return this.color.toRgb()}get brightness(){return this.color.brightness}get luminance(){return this.color.luminance}get isDark(){const{color:t,brightness:e}=this;return e<120&&t.a>.33}get isValid(){const t=this.input.value;return t!==""&&new k(t).isValid}get appearance(){const{colorLabels:t,hsl:e,hsv:s,format:n}=this,r=y(e.h*360),i=n==="hsl"?e.s:s.s,a=y(i*100),l=y(e.l*100),c=s.v*100;let h="black";if(l===100&&a===0)h=t.white;else if(l===0)h=t.black;else if(a===0)h=t.grey;else if(r<15||r>=345)h=t.red;else if(r>=15&&r<45)h=c>80&&a>80?t.orange:t.brown;else if(r>=45&&r<75){const b=r>46&&r<54&&c<80&&a>90,u=r>=54&&r<75&&c<80;h=b?t.gold:t.yellow,h=u?t.olive:h}else r>=75&&r<155?h=c<68?t.green:t.lime:r>=155&&r<175?h=t.teal:r>=175&&r<195?h=t.cyan:r>=195&&r<255?h=t.blue:r>=255&&r<270?h=t.violet:r>=270&&r<295?h=t.magenta:r>=295&&r<345&&(h=t.pink);return h}updateVisuals(){const{controlPositions:t,visuals:e}=this,[s,n,r]=e,{offsetHeight:i}=s,a=t.c2y/i,{r:l,g:c,b:h}=new k({h:a,s:1,l:.5}).toRgb(),b="linear-gradient(rgb(255,255,255) 0%, rgb(255,255,255) 100%)",u=1-t.c3y/i,d=y(u*100)/100,g=new k({h:a,s:1,l:.5,a:u}).toRgbString(),p=`linear-gradient(
       rgb(255,0,0) 0%, rgb(255,255,0) 16.67%,
       rgb(0,255,0) 33.33%, rgb(0,255,255) 50%,
       rgb(0,0,255) 66.67%, rgb(255,0,255) 83.33%,
-      rgb(255,0,0) 100%)`;
-      setElementStyle(v1, {
-        background: `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,${roundA}) 100%),
-      linear-gradient(to right, rgba(255,255,255,${roundA}) 0%, ${fill} 100%),
-      ${whiteGrad}`,
-      });
-      setElementStyle(v2, { background: hueGradient });
-
-      setElementStyle(v3, {
-        background: `linear-gradient(rgba(${r},${g},${b},1) 0%,rgba(${r},${g},${b},0) 100%)`,
-      });
-    }
-
-    /**
-     * The `ColorPicker` *focusout* event listener when open.
-     * @param {FocusEvent} e
-     * @this {ColorPicker}
-     */
-    handleFocusOut({ relatedTarget }) {
-      // @ts-ignore
-      if (relatedTarget && !this.parent.contains(relatedTarget)) {
-        this.hide(true);
-      }
-    }
-
-    /**
-     * The `ColorPicker` *keyup* event listener when open.
-     * @param {KeyboardEvent} e
-     * @this {ColorPicker}
-     */
-    handleDismiss({ code }) {
-      const self = this;
-      if (self.isOpen && code === keyEscape) {
-        self.hide();
-      }
-    }
-
-    /**
-     * The `ColorPicker` *scroll* event listener when open.
-     * @param {Event} e
-     * @this {ColorPicker}
-     */
-    handleScroll(e) {
-      const self = this;
-      const { activeElement } = getDocument(self.input);
-
-      self.updateDropdownPosition();
-
-      /* istanbul ignore next */
-      if (([pointermoveEvent, touchmoveEvent].includes(e.type) && self.dragElement)
-        || (activeElement && self.controlKnobs.includes(activeElement))) {
-        e.stopPropagation();
-        e.preventDefault();
-      }
-    }
-
-    /**
-     * The `ColorPicker` keyboard event listener for menu navigation.
-     * @param {KeyboardEvent} e
-     * @this {ColorPicker}
-     */
-    menuKeyHandler(e) {
-      const { target, code } = e;
-      // @ts-ignore
-      const { previousElementSibling, nextElementSibling, parentElement } = target;
-      const isColorOptionsMenu = parentElement && hasClass(parentElement, 'color-options');
-      const allSiblings = [...parentElement.children];
-      const columnsCount = isColorOptionsMenu
-        && getElementStyle(parentElement, 'grid-template-columns').split(' ').length;
-      const currentIndex = allSiblings.indexOf(target);
-      const previousElement = currentIndex > -1
-        && columnsCount && allSiblings[currentIndex - columnsCount];
-      const nextElement = currentIndex > -1
-        && columnsCount && allSiblings[currentIndex + columnsCount];
-
-      if ([keyArrowDown, keyArrowUp, keySpace].includes(code)) {
-        // prevent scroll when navigating the menu via arrow keys / Space
-        e.preventDefault();
-      }
-      if (isColorOptionsMenu) {
-        if (previousElement && code === keyArrowUp) {
-          focus(previousElement);
-        } else if (nextElement && code === keyArrowDown) {
-          focus(nextElement);
-        } else if (previousElementSibling && code === keyArrowLeft) {
-          focus(previousElementSibling);
-        } else if (nextElementSibling && code === keyArrowRight) {
-          focus(nextElementSibling);
-        }
-      } else if (previousElementSibling && [keyArrowLeft, keyArrowUp].includes(code)) {
-        focus(previousElementSibling);
-      } else if (nextElementSibling && [keyArrowRight, keyArrowDown].includes(code)) {
-        focus(nextElementSibling);
-      }
-
-      if ([keyEnter, keySpace].includes(code)) {
-        this.menuClickHandler({ target });
-      }
-    }
-
-    /**
-     * The `ColorPicker` click event listener for the colour menu presets / defaults.
-     * @param {Partial<Event>} e
-     * @this {ColorPicker}
-     */
-    menuClickHandler(e) {
-      const self = this;
-      /** @type {*} */
-      const { target } = e;
-      const { colorMenu } = self;
-      const newOption = (getAttribute(target, 'data-value') || '').trim();
-      // invalidate for targets other than color options
-      if (!newOption.length) return;
-      const currentActive = querySelector('li.active', colorMenu);
-      let newColor = nonColors.includes(newOption) ? 'white' : newOption;
-      newColor = newOption === 'transparent' ? 'rgba(0,0,0,0)' : newOption;
-
-      const {
-        r, g, b, a,
-      } = new Color(newColor);
-
-      ObjectAssign(self.color, {
-        r, g, b, a,
-      });
-
-      self.update();
-
-      /* istanbul ignore else */
-      if (currentActive !== target) {
-        /* istanbul ignore else */
-        if (currentActive) {
-          removeClass(currentActive, 'active');
-          removeAttribute(currentActive, ariaSelected);
-        }
-
-        addClass(target, 'active');
-        setAttribute(target, ariaSelected, 'true');
-
-        if (nonColors.includes(newOption)) {
-          self.value = newOption;
-        }
-        firePickerChange(self);
-      }
-    }
-
-    /**
-     * The `ColorPicker` *touchstart* / *mousedown* events listener for control knobs.
-     * @param {PointerEvent} e
-     * @this {ColorPicker}
-     */
-    pointerDown(e) {
-      const self = this;
-      /** @type {*} */
-      const { target, pageX, pageY } = e;
-      const { colorMenu, visuals, controlKnobs } = self;
-      const [v1, v2, v3] = visuals;
-      const [c1, c2, c3] = controlKnobs;
-      /** @type {HTMLElement} */
-      const visual = controlKnobs.includes(target) ? target.previousElementSibling : target;
-      const visualRect = getBoundingClientRect(visual);
-      const html = getDocumentElement(v1);
-      const offsetX = pageX - html.scrollLeft - visualRect.left;
-      const offsetY = pageY - html.scrollTop - visualRect.top;
-
-      /* istanbul ignore else */
-      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 (target === v3 || target === c3) {
-        self.dragElement = visual;
-        self.changeAlpha(offsetY);
-      }
-
-      if (colorMenu) {
-        const currentActive = querySelector('li.active', colorMenu);
-        if (currentActive) {
-          removeClass(currentActive, 'active');
-          removeAttribute(currentActive, ariaSelected);
-        }
-      }
-      e.preventDefault();
-    }
-
-    /**
-     * The `ColorPicker` *touchend* / *mouseup* events listener for control knobs.
-     * @param {PointerEvent} e
-     * @this {ColorPicker}
-     */
-    pointerUp({ target }) {
-      const self = this;
-      const { parent } = self;
-      const doc = getDocument(parent);
-      const currentOpen = querySelector(`${colorPickerParentSelector}.open`, doc) !== null;
-      const selection = doc.getSelection();
-
-      if (!self.dragElement && !selection.toString().length
-        && !parent.contains(target)) {
-        self.hide(currentOpen);
-      }
-
-      self.dragElement = null;
-    }
-
-    /**
-     * The `ColorPicker` *touchmove* / *mousemove* events listener for control knobs.
-     * @param {PointerEvent} e
-     */
-    pointerMove(e) {
-      const self = this;
-      const { dragElement, visuals } = self;
-      const [v1, v2, v3] = visuals;
-      const { pageX, pageY } = e;
-
-      if (!dragElement) return;
-
-      const controlRect = getBoundingClientRect(dragElement);
-      const win = getDocumentElement(v1);
-      const offsetX = pageX - win.scrollLeft - controlRect.left;
-      const offsetY = pageY - win.scrollTop - controlRect.top;
-
-      if (dragElement === v1) {
-        self.changeControl1(offsetX, offsetY);
-      }
-
-      if (dragElement === v2) {
-        self.changeControl2(offsetY);
-      }
-
-      if (dragElement === v3) {
-        self.changeAlpha(offsetY);
-      }
-    }
-
-    /**
-     * The `ColorPicker` *keydown* event listener for control 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 { controlKnobs, visuals } = self;
-      const { offsetWidth, offsetHeight } = visuals[0];
-      const [c1, c2, c3] = controlKnobs;
-      const { activeElement } = getDocument(c1);
-      const currentKnob = controlKnobs.find((x) => x === activeElement);
-      const yRatio = offsetHeight / 360;
-
-      /* istanbul ignore else */
-      if (currentKnob) {
-        let offsetX = 0;
-        let offsetY = 0;
-
-        /* istanbul ignore else */
-        if (target === c1) {
-          const xRatio = offsetWidth / 100;
-
-          /* istanbul ignore else */
-          if ([keyArrowLeft, keyArrowRight].includes(code)) {
-            self.controlPositions.c1x += code === keyArrowRight ? xRatio : -xRatio;
-          } else if ([keyArrowUp, keyArrowDown].includes(code)) {
-            self.controlPositions.c1y += code === keyArrowDown ? yRatio : -yRatio;
-          }
-
-          offsetX = self.controlPositions.c1x;
-          offsetY = self.controlPositions.c1y;
-          self.changeControl1(offsetX, offsetY);
-        } else if (target === c2) {
-          self.controlPositions.c2y += [keyArrowDown, keyArrowRight].includes(code)
-            ? yRatio
-            : -yRatio;
-
-          offsetY = self.controlPositions.c2y;
-          self.changeControl2(offsetY);
-        } else if (target === c3) {
-          self.controlPositions.c3y += [keyArrowDown, keyArrowRight].includes(code)
-            ? yRatio
-            : -yRatio;
-
-          offsetY = self.controlPositions.c3y;
-          self.changeAlpha(offsetY);
-        }
-        self.handleScroll(e);
-      }
-    }
-
-    /** The event listener of the colour form inputs. */
-    changeHandler() {
-      const self = this;
-      let colorSource;
-      const {
-        inputs, format, value: currentValue, input, controlPositions, visuals,
-      } = self;
-      /** @type {*} */
-      const { activeElement } = getDocument(input);
-      const { offsetHeight } = visuals[0];
-      const [i1,,, i4] = inputs;
-      const [v1, v2, v3, v4] = format === 'rgb'
-        ? inputs.map((i) => parseFloat(i.value) / (i === i4 ? 100 : 1))
-        : inputs.map((i) => parseFloat(i.value) / (i !== i1 ? 100 : 360));
-      const isNonColorValue = self.hasNonColor && nonColors.includes(currentValue);
-      const alpha = i4 ? v4 : (1 - controlPositions.c3y / offsetHeight);
-
-      /* istanbul ignore else */
-      if (activeElement === input || (activeElement && inputs.includes(activeElement))) {
-        if (activeElement === input) {
-          if (isNonColorValue) {
-            colorSource = currentValue === 'transparent' ? 'rgba(0,0,0,0)' : 'rgb(0,0,0)';
-          } else {
-            colorSource = currentValue;
-          }
-        } else if (format === 'hex') {
-          colorSource = i1.value;
-        } else if (format === 'hsl') {
-          colorSource = {
-            h: v1, s: v2, l: v3, a: alpha,
-          };
-        } else if (format === 'hwb') {
-          colorSource = {
-            h: v1, w: v2, b: v3, a: alpha,
-          };
-        } else {
-          colorSource = {
-            r: v1, g: v2, b: v3, a: alpha,
-          };
-        }
-
-        const {
-          r, g, b, a,
-        } = new Color(colorSource);
-
-        ObjectAssign(self.color, {
-          r, g, b, a,
-        });
-        self.setControlPositions();
-        self.updateAppearance();
-        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 {number} X the X component of the offset
-     * @param {number} Y the Y component of the offset
-     */
-    changeControl1(X, Y) {
-      const self = this;
-      let [offsetX, offsetY] = [0, 0];
-      const { controlPositions, visuals } = self;
-      const { offsetHeight, offsetWidth } = visuals[0];
-
-      if (X > offsetWidth) offsetX = offsetWidth;
-      else if (X >= 0) offsetX = X;
-
-      if (Y > offsetHeight) offsetY = offsetHeight;
-      else if (Y >= 0) offsetY = Y;
-
-      const hue = controlPositions.c2y / offsetHeight;
-
-      const saturation = offsetX / offsetWidth;
-
-      const lightness = 1 - offsetY / offsetHeight;
-      const alpha = 1 - controlPositions.c3y / offsetHeight;
-
-      // new color
-      const {
-        r, g, b, a,
-      } = new Color({
-        h: hue, s: saturation, v: lightness, a: alpha,
-      });
-
-      ObjectAssign(self.color, {
-        r, g, b, a,
-      });
-
-      // new positions
-      self.controlPositions.c1x = offsetX;
-      self.controlPositions.c1y = offsetY;
-
-      // update color picker
-      self.updateAppearance();
-      self.updateInputs();
-      self.updateControls();
-      self.updateVisuals();
-    }
-
-    /**
-     * Updates `ColorPicker` second control:
-     * * `hue` for HEX/RGB/HWB;
-     * * `saturation` for HSL.
-     *
-     * @param {number} Y the Y offset
-     */
-    changeControl2(Y) {
-      const self = this;
-      const {
-        controlPositions, visuals,
-      } = self;
-      const { offsetHeight, offsetWidth } = visuals[0];
-
-      let offsetY = 0;
-
-      if (Y > offsetHeight) offsetY = offsetHeight;
-      else if (Y >= 0) offsetY = Y;
-
-      const hue = offsetY / offsetHeight;
-      const saturation = controlPositions.c1x / offsetWidth;
-      const lightness = 1 - controlPositions.c1y / offsetHeight;
-      const alpha = 1 - controlPositions.c3y / offsetHeight;
-
-      // new color
-      const {
-        r, g, b, a,
-      } = new Color({
-        h: hue, s: saturation, v: lightness, a: alpha,
-      });
-
-      ObjectAssign(self.color, {
-        r, g, b, a,
-      });
-
-      // new position
-      self.controlPositions.c2y = offsetY;
-      // update color picker
-      self.updateAppearance();
-      self.updateInputs();
-      self.updateControls();
-      self.updateVisuals();
-    }
-
-    /**
-     * Updates `ColorPicker` last control,
-     * the `alpha` channel.
-     *
-     * @param {number} Y
-     */
-    changeAlpha(Y) {
-      const self = this;
-      const { visuals } = self;
-      const { offsetHeight } = visuals[0];
-      let offsetY = 0;
-
-      if (Y > offsetHeight) offsetY = offsetHeight;
-      else if (Y >= 0) offsetY = Y;
-
-      // update color alpha
-      const alpha = 1 - offsetY / offsetHeight;
-      self.color.setAlpha(alpha);
-      // update position
-      self.controlPositions.c3y = offsetY;
-      // update color picker
-      self.updateAppearance();
-      self.updateInputs();
-      self.updateControls();
-      self.updateVisuals();
-    }
-
-    /**
-     * Updates `ColorPicker` control positions on:
-     * * initialization
-     * * window resize
-     */
-    update() {
-      const self = this;
-      self.updateDropdownPosition();
-      self.updateAppearance();
-      self.setControlPositions();
-      self.updateInputs(true);
-      self.updateControls();
-      self.updateVisuals();
-    }
-
-    /** Updates the open dropdown position on *scroll* event. */
-    updateDropdownPosition() {
-      const self = this;
-      const { input, colorPicker, colorMenu } = self;
-      const elRect = getBoundingClientRect(input);
-      const { top, bottom } = elRect;
-      const { offsetHeight: elHeight } = input;
-      const windowHeight = getDocumentElement(input).clientHeight;
-      const isPicker = hasClass(colorPicker, 'show');
-      const dropdown = isPicker ? colorPicker : colorMenu;
-      if (!dropdown) return;
-      const { offsetHeight: dropHeight } = dropdown;
-      const distanceBottom = windowHeight - bottom;
-      const distanceTop = top;
-      const bottomExceed = top + dropHeight + elHeight > windowHeight; // show
-      const topExceed = top - dropHeight < 0; // show-top
-
-      if ((hasClass(dropdown, 'bottom') || !topExceed) && distanceBottom < distanceTop && bottomExceed) {
-        removeClass(dropdown, 'bottom');
-        addClass(dropdown, 'top');
-      } else {
-        removeClass(dropdown, 'top');
-        addClass(dropdown, 'bottom');
-      }
-    }
-
-    /** Updates control knobs' positions. */
-    setControlPositions() {
-      const self = this;
-      const {
-        visuals, color, hsv,
-      } = self;
-      const { offsetHeight, offsetWidth } = visuals[0];
-      const alpha = color.a;
-      const hue = hsv.h;
-
-      const saturation = hsv.s;
-      const lightness = hsv.v;
-
-      self.controlPositions.c1x = saturation * offsetWidth;
-      self.controlPositions.c1y = (1 - lightness) * offsetHeight;
-      self.controlPositions.c2y = hue * offsetHeight;
-      self.controlPositions.c3y = (1 - alpha) * offsetHeight;
-    }
-
-    /** Update the visual appearance label and control knob labels. */
-    updateAppearance() {
-      const self = this;
-      const {
-        componentLabels, color, parent,
-        hsv, hex, format, controlKnobs,
-      } = self;
-      const {
-        appearanceLabel, hexLabel, valueLabel,
-      } = componentLabels;
-      let { r, g, b } = color.toRgb();
-      const [knob1, knob2, knob3] = controlKnobs;
-      const hue = roundPart(hsv.h * 360);
-      const alpha = color.a;
-      const saturation = roundPart(hsv.s * 100);
-      const lightness = roundPart(hsv.v * 100);
-      const colorName = self.appearance;
-
-      let colorLabel = `${hexLabel} ${hex.split('').join(' ')}`;
-
-      if (format === 'hwb') {
-        const { hwb } = self;
-        const whiteness = roundPart(hwb.w * 100);
-        const blackness = roundPart(hwb.b * 100);
-        colorLabel = `HWB: ${hue}°, ${whiteness}%, ${blackness}%`;
-        setAttribute(knob1, ariaValueText, `${whiteness}% & ${blackness}%`);
-        setAttribute(knob1, ariaValueNow, `${whiteness}`);
-        setAttribute(knob2, ariaDescription, `${valueLabel}: ${colorLabel}. ${appearanceLabel}: ${colorName}.`);
-        setAttribute(knob2, ariaValueText, `${hue}%`);
-        setAttribute(knob2, ariaValueNow, `${hue}`);
-      } else {
-        [r, g, b] = [r, g, b].map(roundPart);
-        colorLabel = format === 'hsl' ? `HSL: ${hue}°, ${saturation}%, ${lightness}%` : colorLabel;
-        colorLabel = format === 'rgb' ? `RGB: ${r}, ${g}, ${b}` : colorLabel;
-
-        setAttribute(knob1, ariaValueText, `${lightness}% & ${saturation}%`);
-        setAttribute(knob1, ariaValueNow, `${lightness}`);
-        setAttribute(knob2, ariaDescription, `${valueLabel}: ${colorLabel}. ${appearanceLabel}: ${colorName}.`);
-        setAttribute(knob2, ariaValueText, `${hue}°`);
-        setAttribute(knob2, ariaValueNow, `${hue}`);
-      }
-
-      const alphaValue = roundPart(alpha * 100);
-      setAttribute(knob3, ariaValueText, `${alphaValue}%`);
-      setAttribute(knob3, ariaValueNow, `${alphaValue}`);
-
-      // update the input backgroundColor
-      const newColor = color.toString();
-      setElementStyle(self.input, { 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, 'txt-dark')) removeClass(parent, 'txt-dark');
-        if (!hasClass(parent, 'txt-light')) addClass(parent, 'txt-light');
-      } else {
-        if (hasClass(parent, 'txt-light')) removeClass(parent, 'txt-light');
-        if (!hasClass(parent, 'txt-dark')) addClass(parent, 'txt-dark');
-      }
-    }
-
-    /** Updates the control knobs actual positions. */
-    updateControls() {
-      const { controlKnobs, controlPositions } = this;
-      let {
-        c1x, c1y, c2y, c3y,
-      } = controlPositions;
-      const [control1, control2, control3] = controlKnobs;
-      // round control positions
-      [c1x, c1y, c2y, c3y] = [c1x, c1y, c2y, c3y].map(roundPart);
-
-      setElementStyle(control1, { transform: `translate3d(${c1x - 4}px,${c1y - 4}px,0)` });
-      setElementStyle(control2, { transform: `translate3d(0,${c2y - 4}px,0)` });
-      setElementStyle(control3, { transform: `translate3d(0,${c3y - 4}px,0)` });
-    }
-
-    /**
-     * Updates all color form inputs.
-     * @param {boolean=} isPrevented when `true`, the component original event is prevented
-     */
-    updateInputs(isPrevented) {
-      const self = this;
-      const {
-        value: oldColor, format, inputs, color, hsl,
-      } = self;
-      const [i1, i2, i3, i4] = inputs;
-      const alpha = roundPart(color.a * 100);
-      const hue = roundPart(hsl.h * 360);
-      let newColor;
-
-      /* istanbul ignore else */
-      if (format === 'hex') {
-        newColor = self.color.toHexString(true);
-        i1.value = self.hex;
-      } else if (format === 'hsl') {
-        const lightness = roundPart(hsl.l * 100);
-        const saturation = roundPart(hsl.s * 100);
-        newColor = self.color.toHslString();
-        i1.value = `${hue}`;
-        i2.value = `${saturation}`;
-        i3.value = `${lightness}`;
-        i4.value = `${alpha}`;
-      } else if (format === 'hwb') {
-        const { w, b } = self.hwb;
-        const whiteness = roundPart(w * 100);
-        const blackness = roundPart(b * 100);
-
-        newColor = self.color.toHwbString();
-        i1.value = `${hue}`;
-        i2.value = `${whiteness}`;
-        i3.value = `${blackness}`;
-        i4.value = `${alpha}`;
-      } else if (format === 'rgb') {
-        let { r, g, b } = self.rgb;
-        [r, g, b] = [r, g, b].map(roundPart);
-
-        newColor = self.color.toRgbString();
-        i1.value = `${r}`;
-        i2.value = `${g}`;
-        i3.value = `${b}`;
-        i4.value = `${alpha}`;
-      }
-
-      // update the color value
-      self.value = `${newColor}`;
-
-      // don't trigger the custom event unless it's really changed
-      if (!isPrevented && newColor !== oldColor) {
-        firePickerChange(self);
-      }
-    }
-
-    /**
-     * Toggle the `ColorPicker` dropdown visibility.
-     * @param {Event=} e
-     * @this {ColorPicker}
-     */
-    togglePicker(e) {
-      if (e) e.preventDefault();
-      const self = this;
-      const { colorPicker } = self;
-
-      if (self.isOpen && hasClass(colorPicker, 'show')) {
-        self.hide(true);
-      } else {
-        showDropdown(self, colorPicker);
-      }
-    }
-
-    /** Shows the `ColorPicker` dropdown. */
-    showPicker() {
-      const self = this;
-      const { colorPicker } = self;
-
-      if (!['top', 'bottom'].some((c) => hasClass(colorPicker, c))) {
-        showDropdown(self, colorPicker);
-      }
-    }
-
-    /**
-     * Toggles the visibility of the `ColorPicker` presets menu.
-     * @param {Event=} e
-     * @this {ColorPicker}
-     */
-    toggleMenu(e) {
-      if (e) e.preventDefault();
-      const self = this;
-      const { colorMenu } = self;
-
-      if (self.isOpen && hasClass(colorMenu, 'show')) {
-        self.hide(true);
-      } else {
-        showDropdown(self, colorMenu);
-      }
-    }
-
-    /**
-     * Hides the currently open `ColorPicker` dropdown.
-     * @param {boolean=} focusPrevented
-     */
-    hide(focusPrevented) {
-      const self = this;
-      if (self.isOpen) {
-        const {
-          pickerToggle, menuToggle, colorPicker, colorMenu, parent, input,
-        } = self;
-        const openPicker = hasClass(colorPicker, 'show');
-        const openDropdown = openPicker ? colorPicker : colorMenu;
-        const relatedBtn = openPicker ? pickerToggle : menuToggle;
-        const animationDuration = openDropdown && getElementTransitionDuration(openDropdown);
-
-        self.value = self.color.toString(true);
-
-        /* istanbul ignore else */
-        if (openDropdown) {
-          removeClass(openDropdown, 'show');
-          setAttribute(relatedBtn, ariaExpanded, 'false');
-          setTimeout(() => {
-            removePosition(openDropdown);
-            /* istanbul ignore else */
-            if (!querySelector('.show', parent)) {
-              removeClass(parent, 'open');
-              toggleEventsOnShown(self);
-              self.isOpen = false;
-            }
-          }, animationDuration);
-        }
-
-        if (!focusPrevented) {
-          focus(pickerToggle);
-        }
-        setAttribute(input, tabIndex, '-1');
-        if (relatedBtn === menuToggle) {
-          setAttribute(menuToggle, tabIndex, '-1');
-        }
-      }
-    }
-
-    /** Removes `ColorPicker` from target `<input>`. */
-    dispose() {
-      const self = this;
-      const { input, parent } = self;
-      self.hide(true);
-      toggleEvents(self);
-      [...parent.children].forEach((el) => {
-        if (el !== input) el.remove();
-      });
-
-      removeAttribute(input, tabIndex);
-      setElementStyle(input, { backgroundColor: '' });
-
-      ['txt-light', 'txt-dark'].forEach((c) => removeClass(parent, c));
-      Data.remove(input, colorPickerString);
-    }
-  }
-
-  ObjectAssign(ColorPicker, {
-    Color,
-    ColorPalette,
-    Version,
-    getInstance: getColorPickerInstance,
-    init: initColorPicker,
-    selector: colorPickerSelector,
-    // utils important for render
-    roundPart,
-    setElementStyle,
-    setAttribute,
-    getBoundingClientRect,
-  });
-
-  return ColorPicker;
-
-}));
+      rgb(255,0,0) 100%)`;O(s,{background:`linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,${d}) 100%),
+      linear-gradient(to right, rgba(255,255,255,${d}) 0%, ${g} 100%),
+      ${b}`}),O(n,{background:p}),O(r,{background:`linear-gradient(rgba(${l},${c},${h},1) 0%,rgba(${l},${c},${h},0) 100%)`})}handleFocusOut({relatedTarget:t}){t&&!this.parent.contains(t)&&this.hide(!0)}handleDismiss({code:t}){this.isOpen&&t===Ge&&this.hide()}handleScroll(t){const{activeElement:e}=F(this.input);this.updateDropdownPosition(),([Wt,qe].includes(t.type)&&this.dragElement||e&&this.controlKnobs.includes(e))&&(t.stopPropagation(),t.preventDefault())}menuKeyHandler(t){const{target:e,code:s}=t,{previousElementSibling:n,nextElementSibling:r,parentElement:i}=e,a=i&&M(i,"color-options"),l=i?[...i.children]:[],c=a&&Nt(i,"grid-template-columns").split(" ").length,h=l.indexOf(e),b=h>-1&&c&&l[h-c],u=h>-1&&c&&l[h+c];[j,ot,Xt].includes(s)&&t.preventDefault(),a?b&&s===ot?U(b):u&&s===j?U(u):n&&s===ht?U(n):r&&s===G&&U(r):n&&[ht,ot].includes(s)?U(n):r&&[G,j].includes(s)&&U(r),[ze,Xt].includes(s)&&this.menuClickHandler(t)}menuClickHandler(t){const{target:e}=t,{colorMenu:s}=this,n=(pt(e,"data-value")||"").trim();if(!n.length)return;const r=_("li.active",s);let i=n;i=yt.includes(i)?"white":i,i=i==="transparent"?"rgba(0,0,0,0)":i;const{r:a,g:l,b:c,a:h}=new k(i);B(this.color,{r:a,g:l,b:c,a:h}),this.update(),r!==e&&(r&&(D(r,"active"),Lt(r,St)),q(e,"active"),m(e,St,"true"),yt.includes(n)&&(this.value=n),He(this))}pointerDown(t){const{target:e,pageX:s,pageY:n}=t,{colorMenu:r,visuals:i,controlKnobs:a}=this,[l,c,h]=i,[b,u,d]=a,g=a.includes(e)?e.previousElementSibling:e,p=ft(g),f=Et(l),w=s-f.scrollLeft-p.left,$=n-f.scrollTop-p.top;if(e===l||e===b?(this.dragElement=g,this.changeControl1(w,$)):e===c||e===u?(this.dragElement=g,this.changeControl2($)):(e===h||e===d)&&(this.dragElement=g,this.changeAlpha($)),r){const P=_("li.active",r);P&&(D(P,"active"),Lt(P,St))}t.preventDefault()}pointerUp({target:t}){const{parent:e}=this,s=F(e),n=_(`${Ce}.open`,s)!==null,r=s.getSelection();!this.dragElement&&(!r||!r.toString().length)&&!e.contains(t)&&this.hide(n),this.dragElement=void 0}pointerMove(t){const{dragElement:e,visuals:s}=this,[n,r,i]=s,{pageX:a,pageY:l}=t;if(!e)return;const c=ft(e),h=Et(n),b=a-h.scrollLeft-c.left,u=l-h.scrollTop-c.top;e===n&&this.changeControl1(b,u),e===r&&this.changeControl2(u),e===i&&this.changeAlpha(u)}handleKnobs(t){const{target:e,code:s}=t;if(![ot,j,ht,G].includes(s))return;t.preventDefault();const{controlKnobs:n,visuals:r}=this,{offsetWidth:i,offsetHeight:a}=r[0],[l,c,h]=n,{activeElement:b}=F(l),u=n.find(g=>g===b),d=a/360;if(u){let g=0,p=0;if(e===l){const f=i/100;[ht,G].includes(s)?this.controlPositions.c1x+=s===G?f:-f:[ot,j].includes(s)&&(this.controlPositions.c1y+=s===j?d:-d),g=this.controlPositions.c1x,p=this.controlPositions.c1y,this.changeControl1(g,p)}else e===c?(this.controlPositions.c2y+=[j,G].includes(s)?d:-d,p=this.controlPositions.c2y,this.changeControl2(p)):e===h&&(this.controlPositions.c3y+=[j,G].includes(s)?d:-d,p=this.controlPositions.c3y,this.changeAlpha(p));this.handleScroll(t)}}changeHandler(){let t;const{inputs:e,format:s,value:n,input:r,controlPositions:i,visuals:a}=this,{activeElement:l}=F(r),{offsetHeight:c}=a[0],[h,,,b]=e,[u,d,g,p]=s==="rgb"?e.map($=>parseFloat($.value)/($===b?100:1)):e.map($=>parseFloat($.value)/($!==h?100:360)),f=this.hasNonColor&&yt.includes(n),w=b?p:1-i.c3y/c;if(l===r||l&&e.includes(l)){l===r?f?t=n==="transparent"?"rgba(0,0,0,0)":"rgb(0,0,0)":t=n:s==="hex"?t=h.value:s==="hsl"?t={h:u,s:d,l:g,a:w}:s==="hwb"?t={h:u,w:d,b:g,a:w}:t={r:u,g:d,b:g,a:w};const{r:$,g:P,b:H,a:S}=new k(t);B(this.color,{r:$,g:P,b:H,a:S}),this.setControlPositions(),this.updateAppearance(),this.updateInputs(),this.updateControls(),this.updateVisuals(),l===r&&f&&(this.value=n)}}changeControl1(t,e){let[s,n]=[0,0];const{controlPositions:r,visuals:i}=this,{offsetHeight:a,offsetWidth:l}=i[0];t>l?s=l:t>=0&&(s=t),e>a?n=a:e>=0&&(n=e);const c=r.c2y/a,h=s/l,b=1-n/a,u=1-r.c3y/a,{r:d,g,b:p,a:f}=new k({h:c,s:h,v:b,a:u});B(this.color,{r:d,g,b:p,a:f}),this.controlPositions.c1x=s,this.controlPositions.c1y=n,this.updateAppearance(),this.updateInputs(),this.updateControls(),this.updateVisuals()}changeControl2(t){const{controlPositions:e,visuals:s}=this,{offsetHeight:n,offsetWidth:r}=s[0];let i=0;t>n?i=n:t>=0&&(i=t);const a=i/n,l=e.c1x/r,c=1-e.c1y/n,h=1-e.c3y/n,{r:b,g:u,b:d,a:g}=new k({h:a,s:l,v:c,a:h});B(this.color,{r:b,g:u,b:d,a:g}),this.controlPositions.c2y=i,this.updateAppearance(),this.updateInputs(),this.updateControls(),this.updateVisuals()}changeAlpha(t){const{visuals:e}=this,{offsetHeight:s}=e[0];let n=0;t>s?n=s:t>=0&&(n=t);const r=1-n/s;this.color.setAlpha(r),this.controlPositions.c3y=n,this.updateAppearance(),this.updateInputs(),this.updateControls(),this.updateVisuals()}update(){this.updateDropdownPosition(),this.updateAppearance(),this.setControlPositions(),this.updateInputs(!0),this.updateControls(),this.updateVisuals()}updateDropdownPosition(){const{input:t,colorPicker:e,colorMenu:s}=this,n=ft(t),{top:r,bottom:i}=n,{offsetHeight:a}=t,l=Et(t).clientHeight,h=M(e,"show")?e:s;if(!h)return;const{offsetHeight:b}=h,u=l-i,d=r,g=r+b+a>l,p=r-b<0;(M(h,"bottom")||!p)&&u<d&&g?(D(h,"bottom"),q(h,"top")):(D(h,"top"),q(h,"bottom"))}setControlPositions(){const{visuals:t,color:e,hsv:s}=this,{offsetHeight:n,offsetWidth:r}=t[0],i=e.a,a=s.h,l=s.s,c=s.v;this.controlPositions.c1x=l*r,this.controlPositions.c1y=(1-c)*n,this.controlPositions.c2y=a*n,this.controlPositions.c3y=(1-i)*n}updateAppearance(){const{componentLabels:t,color:e,parent:s,hsv:n,hex:r,format:i,controlKnobs:a}=this,{appearanceLabel:l,hexLabel:c,valueLabel:h}=t;let{r:b,g:u,b:d}=e.toRgb();const[g,p,f]=a,w=y(n.h*360),$=e.a,P=y(n.s*100),H=y(n.v*100),S=this.appearance;let C=`${c} ${r.split("").join(" ")}`;if(i==="hwb"){const{hwb:N}=this,K=y(N.w*100),ct=y(N.b*100);C=`HWB: ${w}°, ${K}%, ${ct}%`,m(g,et,`${K}% & ${ct}%`),m(g,tt,`${K}`),m(p,Ut,`${h}: ${C}. ${l}: ${S}.`),m(p,et,`${w}%`),m(p,tt,`${w}`)}else[b,u,d]=[b,u,d].map(y),C=i==="hsl"?`HSL: ${w}°, ${P}%, ${H}%`:C,C=i==="rgb"?`RGB: ${b}, ${u}, ${d}`:C,m(g,et,`${H}% & ${P}%`),m(g,tt,`${H}`),m(p,Ut,`${h}: ${C}. ${l}: ${S}.`),m(p,et,`${w}°`),m(p,tt,`${w}`);const R=y($*100);m(f,et,`${R}%`),m(f,tt,`${R}`);const E=e.toString();O(this.input,{backgroundColor:E}),this.isDark?(M(s,"txt-light")&&D(s,"txt-light"),M(s,"txt-dark")||q(s,"txt-dark")):(M(s,"txt-dark")&&D(s,"txt-dark"),M(s,"txt-light")||q(s,"txt-light"))}updateControls(){const{controlKnobs:t,controlPositions:e}=this;let{c1x:s,c1y:n,c2y:r,c3y:i}=e;const[a,l,c]=t;[s,n,r,i]=[s,n,r,i].map(y),O(a,{transform:`translate3d(${s-4}px,${n-4}px,0)`}),O(l,{transform:`translate3d(0,${r-4}px,0)`}),O(c,{transform:`translate3d(0,${i-4}px,0)`})}updateInputs(t){const{value:e,format:s,inputs:n,color:r,hsl:i}=this,[a,l,c,h]=n,b=y(r.a*100),u=y(i.h*360);let d=r.toString();if(s==="hex")d=this.color.toHexString(!0),a.value=this.hex;else if(s==="hsl"){const g=y(i.l*100),p=y(i.s*100);d=this.color.toHslString(),a.value=`${u}`,l.value=`${p}`,c.value=`${g}`,h.value=`${b}`}else if(s==="hwb"){const{w:g,b:p}=this.hwb,f=y(g*100),w=y(p*100);d=this.color.toHwbString(),a.value=`${u}`,l.value=`${f}`,c.value=`${w}`,h.value=`${b}`}else if(s==="rgb"){let{r:g,g:p,b:f}=this.rgb;[g,p,f]=[g,p,f].map(y),d=this.color.toRgbString(),a.value=`${g}`,l.value=`${p}`,c.value=`${f}`,h.value=`${b}`}this.value=d,!t&&d!==e&&He(this)}togglePicker(t){t&&t.preventDefault();const{colorPicker:e}=this;this.isOpen&&M(e,"show")?this.hide(!0):jt(this,e)}showPicker(){const{colorPicker:t}=this;["top","bottom"].some(e=>M(t,e))||jt(this,t)}toggleMenu(t){t&&t.preventDefault();const{colorMenu:e}=this;this.isOpen&&M(e,"show")?this.hide(!0):jt(this,e)}hide(t){if(this.isOpen){const{pickerToggle:e,menuToggle:s,colorPicker:n,colorMenu:r,parent:i,input:a}=this,l=M(n,"show"),c=l?n:r,h=l?e:s,b=c&&so(c);this.value=this.color.toString(!0),c&&(D(c,"show"),m(h,Pt,"false"),setTimeout(()=>{Ne(c),_(".show",i)||(D(i,"open"),Ae(this),this.isOpen=!1)},b)),t||U(e),m(a,X,"-1"),h===s&&m(s,X,"-1")}}dispose(){const{input:t,parent:e}=this;this.hide(!0),Le(this),[...e.children].forEach(s=>{s!==t&&s.remove()}),Lt(t,X),O(t,{backgroundColor:""}),["txt-light","txt-dark"].forEach(s=>D(e,s)),nt.remove(t,Q)}}return Ee}();
+//# sourceMappingURL=color-picker.js.map