@thednp/color-picker 0.0.1 → 0.0.2-alpha1

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

@@ -1,5 +1,5 @@
 /*!
-* ColorPicker v0.0.1 (http://thednp.github.io/color-picker)
+* ColorPicker v0.0.2alpha1 (http://thednp.github.io/color-picker)
 * Copyright 2022 © thednp
 * Licensed under MIT (https://github.com/thednp/color-picker/blob/master/LICENSE)
 */
@@ -129,24 +129,6 @@ const ariaValueText = 'aria-valuetext';
  */
 const ariaValueNow = 'aria-valuenow';
 
-/**
- * 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';
-
 /**
  * A global namespace for `ArrowDown` key.
  * @type {string} e.which = 40 equivalent
@@ -273,37 +255,6 @@ const resizeEvent = 'resize';
  */
 const focusoutEvent = 'focusout';
 
-// @ts-ignore
-const { userAgentData: uaDATA } = navigator;
-
-/**
- * A global namespace for `userAgentData` object.
- */
-const userAgentData = uaDATA;
-
-const { userAgent: userAgentString } = navigator;
-
-/**
- * A global namespace for `navigator.userAgent` string.
- */
-const userAgent = userAgentString;
-
-const mobileBrands = /iPhone|iPad|iPod|Android/i;
-let isMobileCheck = false;
-
-if (userAgentData) {
-  isMobileCheck = userAgentData.brands
-    .some((/** @type {Record<String, any>} */x) => mobileBrands.test(x.brand));
-} else {
-  isMobileCheck = mobileBrands.test(userAgent);
-}
-
-/**
- * A global `boolean` for mobile detection.
- * @type {boolean}
- */
-const isMobile = isMobileCheck;
-
 /**
  * Returns the `document` or the `#document` element.
  * @see https://github.com/floating-ui/floating-ui
@@ -524,60 +475,6 @@ function getElementsByClassName(selector, parent) {
   return lookUp.getElementsByClassName(selector);
 }
 
-/**
- * Shortcut for `Object.assign()` static method.
- * @param  {Record<string, any>} obj a target object
- * @param  {Record<string, any>} source a source object
- */
-const ObjectAssign = (obj, source) => Object.assign(obj, source);
-
-/**
- * This is a shortie for `document.createElement` method
- * which allows you to create a new `HTMLElement` for a given `tagName`
- * or based on an object with specific non-readonly attributes:
- * `id`, `className`, `textContent`, `style`, etc.
- * @see https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement
- *
- * @param {Record<string, string> | string} param `tagName` or object
- * @return {HTMLElement | Element} a new `HTMLElement` or `Element`
- */
-function createElement(param) {
-  if (typeof param === 'string') {
-    return getDocument().createElement(param);
-  }
-
-  const { tagName } = param;
-  const attr = { ...param };
-  const newElement = createElement(tagName);
-  delete attr.tagName;
-  ObjectAssign(newElement, attr);
-  return newElement;
-}
-
-/**
- * This is a shortie for `document.createElementNS` method
- * which allows you to create a new `HTMLElement` for a given `tagName`
- * or based on an object with specific non-readonly attributes:
- * `id`, `className`, `textContent`, `style`, etc.
- * @see https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS
- *
- * @param {string} namespace `namespaceURI` to associate with the new `HTMLElement`
- * @param {Record<string, string> | string} param `tagName` or object
- * @return {HTMLElement | Element} a new `HTMLElement` or `Element`
- */
-function createElementNS(namespace, param) {
-  if (typeof param === 'string') {
-    return getDocument().createElementNS(namespace, param);
-  }
-
-  const { tagName } = param;
-  const attr = { ...param };
-  const newElement = createElementNS(namespace, tagName);
-  delete attr.tagName;
-  ObjectAssign(newElement, attr);
-  return newElement;
-}
-
 /**
  * Shortcut for the `Element.dispatchEvent(Event)` method.
  *
@@ -586,6 +483,13 @@ function createElementNS(namespace, param) {
  */
 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();
 /**
@@ -661,20 +565,13 @@ const Data = {
  */
 const getInstance = (target, component) => Data.get(target, component);
 
-/**
- * Shortcut for `Object.keys()` static method.
- * @param  {Record<string, any>} obj a target object
- * @returns {string[]}
- */
-const ObjectKeys = (obj) => Object.keys(obj);
-
 /**
  * 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);
+const setElementStyle = (element, styles) => { ObjectAssign(element.style, styles); };
 
 /**
  * Shortcut for `HTMLElement.getAttribute()` method.
@@ -717,6 +614,13 @@ function normalizeValue(value) {
   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()`.
  *
@@ -837,32 +741,10 @@ const setAttribute = (element, attribute, value) => element.setAttribute(attribu
  */
 const removeAttribute = (element, attribute) => element.removeAttribute(attribute);
 
-/** @type {Record<string, string>} */
-const colorPickerLabels = {
-  pickerLabel: 'Colour Picker',
-  appearanceLabel: 'Colour Appearance',
-  valueLabel: 'Colour Value',
-  toggleLabel: 'Select Colour',
-  presetsLabel: 'Colour Presets',
-  defaultsLabel: 'Colour Defaults',
-  formatLabel: 'Format',
-  alphaLabel: 'Alpha',
-  hexLabel: 'Hexadecimal',
-  hueLabel: 'Hue',
-  whitenessLabel: 'Whiteness',
-  blacknessLabel: 'Blackness',
-  saturationLabel: 'Saturation',
-  lightnessLabel: 'Lightness',
-  redLabel: 'Red',
-  greenLabel: 'Green',
-  blueLabel: 'Blue',
-};
-
 /**
- * A list of 17 color names used for WAI-ARIA compliance.
- * @type {string[]}
+ * A global namespace for `document.head`.
  */
-const colorNames = ['white', 'black', 'grey', 'red', 'orange', 'brown', 'gold', 'olive', 'yellow', 'lime', 'green', 'teal', 'cyan', 'blue', 'violet', 'magenta', 'pink'];
+const { head: documentHead } = document;
 
 /**
  * A list of explicit default non-color values.
@@ -870,297 +752,97 @@ const colorNames = ['white', 'black', 'grey', 'red', 'orange', 'brown', 'gold',
 const nonColors = ['transparent', 'currentColor', 'inherit', 'revert', 'initial'];
 
 /**
- * Shortcut for `String.toUpperCase()`.
- *
- * @param {string} source input string
- * @returns {string} uppercase output string
+ * Round colour components, for all formats except HEX.
+ * @param {number} v one of the colour components
+ * @returns {number} the rounded number
  */
-const toUpperCase = (source) => source.toUpperCase();
+function roundPart(v) {
+  const floor = Math.floor(v);
+  return v - floor < 0.5 ? floor : Math.round(v);
+}
 
-const vHidden = 'v-hidden';
+// Color supported formats
+const COLOR_FORMAT = ['rgb', 'hex', 'hsl', 'hsv', 'hwb'];
 
-/**
- * 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}`,
-  });
+// Hue angles
+const ANGLES = 'deg|rad|grad|turn';
 
-  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'];
+// <http://www.w3.org/TR/css3-values/#integers>
+const CSS_INTEGER = '[-\\+]?\\d+%?';
 
-  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');
+// Include CSS3 Module
+// <http://www.w3.org/TR/css3-values/#number-value>
+const CSS_NUMBER = '[-\\+]?\\d*\\.\\d+%?';
 
-    // 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;
-}
+// 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})$/,
+};
 
 /**
- * A global namespace for aria-label.
- * @type {string}
+ * 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
  */
-const ariaLabel = 'aria-label';
+function isOnePointZero(n) {
+  return `${n}`.includes('.') && parseFloat(n) === 1;
+}
 
 /**
- * A global namespace for aria-valuemin.
- * @type {string}
+ * Check to see if string passed in is a percentage
+ * @param {string} n testing number
+ * @returns {boolean} the query result
  */
-const ariaValueMin = 'aria-valuemin';
-
-/**
- * A global namespace for aria-valuemax.
- * @type {string}
- */
-const ariaValueMax = 'aria-valuemax';
-
-const tabIndex = 'tabindex';
-
-/**
- * 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 the `document.head` or the `<head>` element.
- *
- * @param {(Node | HTMLElement | Element | globalThis)=} node
- * @returns {HTMLElement | HTMLHeadElement}
- */
-function getDocumentHead(node) {
-  return getDocument(node).head;
-}
-
-/**
- * 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', 'hsb', 'hwb'];
-
-// Hue angles
-const ANGLES = 'deg|rad|grad|turn';
-
-// <http://www.w3.org/TR/css3-values/#integers>
-const CSS_INTEGER = '[-\\+]?\\d+%?';
-
-// Include CSS3 Module
-// <http://www.w3.org/TR/css3-values/#number-value>
-const CSS_NUMBER = '[-\\+]?\\d*\\.\\d+%?';
-
-// Include CSS4 Module Hue degrees unit
-// <https://www.w3.org/TR/css3-values/#angle-value>
-const CSS_ANGLE = `[-\\+]?\\d*\\.?\\d+(?:${ANGLES})?`;
-
-// Allow positive/negative integer/number.  Don't capture the either/or, just the entire outcome.
-const CSS_UNIT = `(?:${CSS_NUMBER})|(?:${CSS_INTEGER})`;
-
-// Add angles to the mix
-const CSS_UNIT2 = `(?:${CSS_UNIT})|(?:${CSS_ANGLE})`;
-
-// Actual matching.
-// Parentheses and commas are optional, but not required.
-// Whitespace can take the place of commas or opening paren
-const PERMISSIVE_MATCH = `[\\s|\\(]+(${CSS_UNIT2})[,|\\s]+(${CSS_UNIT})[,|\\s]+(${CSS_UNIT})[,|\\s|\\/\\s]*(${CSS_UNIT})?\\s*\\)?`;
-
-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 in is an angle
- * @param {string} n testing string
- * @returns {boolean} the query result
- */
-function isAngle(n) {
-  return ANGLES.split('|').some((a) => `${n}`.includes(a));
-}
+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) {
-  return !['#', ...COLOR_FORMAT].some((s) => color.includes(s))
-    && !/[0-9]/.test(color);
+  if (nonColors.includes(color)
+    || ['#', ...COLOR_FORMAT].some((f) => color.includes(f))) return false;
+
+  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;
+  });
 }
 
 /**
@@ -1181,15 +863,15 @@ function isValidCSSUnit(color) {
  */
 function bound01(N, max) {
   let n = N;
-  if (isOnePointZero(n)) n = '100%';
-
-  n = max === 360 ? n : Math.min(max, Math.max(0, parseFloat(n)));
+  if (isOnePointZero(N)) n = '100%';
 
-  // Handle hue angles
-  if (isAngle(N)) n = N.replace(new RegExp(ANGLES), '');
+  const processPercent = isPercentage(n);
+  n = max === 360
+    ? parseFloat(n)
+    : Math.min(max, Math.max(0, parseFloat(n)));
 
   // Automatically convert percentage into number
-  if (isPercentage(n)) n = parseInt(String(n * max), 10) / 100;
+  if (processPercent) n = (n * max) / 100;
 
   // Handle floating point rounding errors
   if (Math.abs(n - max) < 0.000001) {
@@ -1200,11 +882,11 @@ function bound01(N, max) {
     // If n is a hue given in degrees,
     // wrap around out-of-range values into [0, 360] range
     // then convert into [0, 1].
-    n = (n < 0 ? (n % max) + max : n % max) / parseFloat(String(max));
+    n = (n < 0 ? (n % max) + max : n % max) / max;
   } else {
     // If n not a hue given in degrees
     // Convert into [0, 1] range if it isn't already.
-    n = (n % max) / parseFloat(String(max));
+    n = (n % max) / max;
   }
   return n;
 }
@@ -1239,7 +921,6 @@ function clamp01(v) {
  * @returns {string}
  */
 function getRGBFromName(name) {
-  const documentHead = getDocumentHead();
   setElementStyle(documentHead, { color: name });
   const colorName = getElementStyle(documentHead, 'color');
   setElementStyle(documentHead, { color: '' });
@@ -1338,6 +1019,36 @@ function hueToRgb(p, q, t) {
   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, 255] 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);
+  }
+  [r, g, b] = [r, g, b].map((x) => x * 255);
+
+  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
@@ -1400,36 +1111,6 @@ function hwbToRgb(H, W, B) {
   return { r, g, b };
 }
 
-/**
- * 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, 255] 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);
-  }
-  [r, g, b] = [r, g, b].map((x) => x * 255);
-
-  return { r, g, b };
-}
-
 /**
  * Converts an RGB colour value to HSV.
  *
@@ -1485,10 +1166,11 @@ function hsvToRgb(H, S, V) {
   const q = v * (1 - f * s);
   const t = v * (1 - (1 - f) * s);
   const mod = i % 6;
-  const r = [v, q, p, p, t, v][mod];
-  const g = [t, v, v, q, p, p][mod];
-  const b = [p, p, t, v, v, q][mod];
-  return { r: r * 255, g: g * 255, b: b * 255 };
+  let r = [v, q, p, p, t, v][mod];
+  let g = [t, v, v, q, p, p][mod];
+  let b = [p, p, t, v, v, q][mod];
+  [r, g, b] = [r, g, b].map((n) => n * 255);
+  return { r, g, b };
 }
 
 /**
@@ -1512,7 +1194,7 @@ function rgbToHex(r, g, b, allow3Char) {
   // 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)) {
+    && hex[2].charAt(0) === hex[2].charAt(1)) {
     return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0);
   }
 
@@ -1540,39 +1222,24 @@ function rgbaToHex(r, g, b, a, allow4Char) {
   // 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)) {
+    && hex[2].charAt(0) === hex[2].charAt(1)
+    && hex[3].charAt(0) === hex[3].charAt(1)) {
     return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0) + hex[3].charAt(0);
   }
   return hex.join('');
 }
 
-/**
- * Returns a colour object corresponding to a given number.
- * @param {number} color input number
- * @returns {CP.RGB} {r,g,b} object with [0, 255] ranged values
- */
-function numberInputToObject(color) {
-  /* eslint-disable no-bitwise */
-  return {
-    r: color >> 16,
-    g: (color & 0xff00) >> 8,
-    b: color & 0xff,
-  };
-  /* eslint-enable no-bitwise */
-}
-
 /**
  * Permissive string parsing. Take in a number of formats, and output an object
  * based on detected format. Returns {r,g,b} or {h,s,l} or {h,s,v}
  * @param {string} input colour value in any format
- * @returns {Record<string, (number | string)> | false} an object matching the RegExp
+ * @returns {Record<string, (number | string | boolean)> | false} an object matching the RegExp
  */
 function stringInputToObject(input) {
-  let color = input.trim().toLowerCase();
+  let color = toLowerCase(input.trim());
   if (color.length === 0) {
     return {
-      r: 0, g: 0, b: 0, a: 0,
+      r: 0, g: 0, b: 0, a: 1,
     };
   }
   let named = false;
@@ -1580,11 +1247,9 @@ function stringInputToObject(input) {
     color = getRGBFromName(color);
     named = true;
   } else if (nonColors.includes(color)) {
-    const isTransparent = color === 'transparent';
-    const rgb = isTransparent ? 0 : 255;
-    const a = isTransparent ? 0 : 1;
+    const a = color === 'transparent' ? 0 : 1;
     return {
-      r: rgb, g: rgb, b: rgb, a, format: 'rgb',
+      r: 0, g: 0, b: 0, a, format: 'rgb', ok: true,
     };
   }
 
@@ -1624,7 +1289,6 @@ function stringInputToObject(input) {
       g: parseIntFromHex(m2),
       b: parseIntFromHex(m3),
       a: convertHexToDecimal(m4),
-      // format: named ? 'rgb' : 'hex8',
       format: named ? 'rgb' : 'hex',
     };
   }
@@ -1688,6 +1352,7 @@ function stringInputToObject(input) {
 function inputToRGB(input) {
   let rgb = { r: 0, g: 0, b: 0 };
   let color = input;
+  /** @type {string | number} */
   let a = 1;
   let s = null;
   let v = null;
@@ -1698,7 +1363,8 @@ function inputToRGB(input) {
   let r = null;
   let g = null;
   let ok = false;
-  let format = 'hex';
+  const inputFormat = typeof color === 'object' && color.format;
+  let format = inputFormat && COLOR_FORMAT.includes(inputFormat) ? inputFormat : 'rgb';
 
   if (typeof input === 'string') {
     // @ts-ignore -- this now is converted to object
@@ -1739,14 +1405,17 @@ function inputToRGB(input) {
       format = 'hwb';
     }
     if (isValidCSSUnit(color.a)) {
-      a = color.a;
-      a = isPercentage(`${a}`) ? bound01(a, 100) : 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, // @ts-ignore
-    format: color.format || format,
+    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)),
@@ -1775,7 +1444,8 @@ class Color {
       color = inputToRGB(color);
     }
     if (typeof color === 'number') {
-      color = numberInputToObject(color);
+      const len = `${color}`.length;
+      color = `#${(len === 2 ? '0' : '00')}${color}`;
     }
     const {
       r, g, b, a, ok, format,
@@ -1785,7 +1455,7 @@ class Color {
     const self = this;
 
     /** @type {CP.ColorInput} */
-    self.originalInput = color;
+    self.originalInput = input;
     /** @type {number} */
     self.r = r;
     /** @type {number} */
@@ -2175,6 +1845,7 @@ ObjectAssign(Color, {
   isOnePointZero,
   isPercentage,
   isValidCSSUnit,
+  isColorName,
   pad2,
   clamp01,
   bound01,
@@ -2192,10 +1863,11 @@ ObjectAssign(Color, {
   hueToRgb,
   hwbToRgb,
   parseIntFromHex,
-  numberInputToObject,
   stringInputToObject,
   inputToRGB,
   roundPart,
+  getElementStyle,
+  setElementStyle,
   ObjectAssign,
 });
 
@@ -2204,7 +1876,7 @@ ObjectAssign(Color, {
  * Returns a color palette with a given set of parameters.
  * @example
  * new ColorPalette(0, 12, 10);
- * // => { hue: 0, hueSteps: 12, lightSteps: 10, colors: array }
+ * // => { hue: 0, hueSteps: 12, lightSteps: 10, colors: Array<Color> }
  */
 class ColorPalette {
   /**
@@ -2224,11 +1896,14 @@ class ColorPalette {
       [hue, hueSteps, lightSteps] = args;
     } else if (args.length === 2) {
       [hueSteps, lightSteps] = args;
+      if ([hueSteps, lightSteps].some((n) => n < 1)) {
+        throw TypeError('ColorPalette: when 2 arguments used, both must be larger than 0.');
+      }
     } else {
       throw TypeError('ColorPalette requires minimum 2 arguments');
     }
 
-    /** @type {string[]} */
+    /** @type {Color[]} */
     const colors = [];
 
     const hueStep = 360 / hueSteps;
@@ -2257,7 +1932,7 @@ class ColorPalette {
     for (let i = 0; i < hueSteps; i += 1) {
       const currentHue = ((hue + i * hueStep) % 360) / 360;
       lightnessArray.forEach((l) => {
-        colors.push(new Color({ h: currentHue, s: 1, l }).toHexString());
+        colors.push(new Color({ h: currentHue, s: 1, l }));
       });
     }
 
@@ -2268,6 +1943,310 @@ class ColorPalette {
   }
 }
 
+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
@@ -2301,7 +2280,8 @@ function getColorMenu(self, colorsSource, menuClass) {
   optionSize = fit > 5 && isMultiLine ? 1.5 : optionSize;
   const menuHeight = `${(rowCount || 1) * 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,
@@ -2309,7 +2289,7 @@ function getColorMenu(self, colorsSource, menuClass) {
   setAttribute(menu, 'role', 'listbox');
   setAttribute(menu, ariaLabel, menuLabel);
 
-  if (isScrollable) { // @ts-ignore
+  if (isScrollable) {
     setCSSProperties(menu, {
       '--grid-item-size': `${optionSize}rem`,
       '--grid-fit': fit,
@@ -2320,15 +2300,19 @@ function getColorMenu(self, colorsSource, menuClass) {
   }
 
   colorsArray.forEach((x) => {
-    const [value, label] = x.trim().split(':');
-    const xRealColor = new Color(value, format).toString();
-    const isActive = xRealColor === getAttribute(input, 'value');
+    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 || x}`,
+      innerText: `${label || value}`,
     });
 
     setAttribute(option, tabIndex, '0');
@@ -2337,7 +2321,7 @@ function getColorMenu(self, colorsSource, menuClass) {
     setAttribute(option, ariaSelected, isActive ? 'true' : 'false');
 
     if (isOptionsMenu) {
-      setElementStyle(option, { backgroundColor: x });
+      setElementStyle(option, { backgroundColor: value });
     }
 
     menu.append(option);
@@ -2346,55 +2330,10 @@ function getColorMenu(self, colorsSource, menuClass) {
 }
 
 /**
- * Check if a string is valid JSON string.
- * @param {string} str the string input
- * @returns {boolean} the query result
- */
-function isValidJSON(str) {
-  try {
-    JSON.parse(str);
-  } catch (e) {
-    return false;
-  }
-  return true;
-}
-
-var version = "0.0.1";
-
-// @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>} */
-const getColorPickerInstance = (element) => getInstance(element, colorPickerString);
-
-/** @type {CP.InitCallback<ColorPicker>} */
-const initColorPicker = (element) => new ColorPicker(element);
-
-// ColorPicker Private Methods
-// ===========================
-
-/**
- * Generate HTML markup and update instance properties.
- * @param {ColorPicker} self
- */
-function initCallback(self) {
+* Generate HTML markup and update instance properties.
+* @param {CP.ColorPicker} self
+*/
+function setMarkup(self) {
   const {
     input, parent, format, id, componentLabels, colorKeywords, colorPresets,
   } = self;
@@ -2409,9 +2348,7 @@ function initCallback(self) {
   self.color = new Color(color, format);
 
   // set initial controls dimensions
-  // make the controls smaller on mobile
-  const dropClass = isMobile ? ' mobile' : '';
-  const formatString = format === 'hex' ? hexLabel : format.toUpperCase();
+  const formatString = format === 'hex' ? hexLabel : toUpperCase(format);
 
   const pickerBtn = createElement({
     id: `picker-btn-${id}`,
@@ -2428,7 +2365,7 @@ function initCallback(self) {
 
   const pickerDropdown = createElement({
     tagName: 'div',
-    className: `color-dropdown picker${dropClass}`,
+    className: 'color-dropdown picker',
   });
   setAttribute(pickerDropdown, ariaLabelledBy, `picker-btn-${id}`);
   setAttribute(pickerDropdown, 'role', 'group');
@@ -2444,7 +2381,7 @@ function initCallback(self) {
   if (colorKeywords || colorPresets) {
     const presetsDropdown = createElement({
       tagName: 'div',
-      className: `color-dropdown scrollable menu${dropClass}`,
+      className: 'color-dropdown scrollable menu',
     });
 
     // color presets
@@ -2494,6 +2431,37 @@ function initCallback(self) {
   setAttribute(input, tabIndex, '-1');
 }
 
+var version = "0.0.2alpha1";
+
+// @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>} */
+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
@@ -2727,7 +2695,7 @@ class ColorPicker {
     self.handleKnobs = self.handleKnobs.bind(self);
 
     // generate markup
-    initCallback(self);
+    setMarkup(self);
 
     const [colorPicker, colorMenu] = getElementsByClassName('color-dropdown', parent);
     // set main elements
@@ -2923,7 +2891,7 @@ class ColorPicker {
     const self = this;
     const { activeElement } = getDocument(self.input);
 
-    if ((isMobile && self.dragElement)
+    if ((e.type === touchmoveEvent && self.dragElement)
       || (activeElement && self.controlKnobs.includes(activeElement))) {
       e.stopPropagation();
       e.preventDefault();
@@ -3739,4 +3707,4 @@ ObjectAssign(ColorPicker, {
   getBoundingClientRect,
 });
 
-export default ColorPicker;
+export { ColorPicker as default };