npm - @thednp/color-picker - Versions diffs - 0.0.1-alpha3 → 0.0.2-alpha2 - Mend

@thednp/color-picker 0.0.1-alpha3 → 0.0.2-alpha2

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

Files changed (33) hide show

package/README.md +3 -1
package/dist/css/color-picker.css +3 -2
package/dist/css/color-picker.min.css +2 -2
package/dist/css/color-picker.rtl.css +3 -2
package/dist/css/color-picker.rtl.min.css +2 -2
package/dist/js/color-esm.js +1167 -0
package/dist/js/color-esm.min.js +2 -0
package/dist/js/color-palette-esm.js +1238 -0
package/dist/js/color-palette-esm.min.js +2 -0
package/dist/js/color-palette.js +1246 -0
package/dist/js/color-palette.min.js +2 -0
package/dist/js/color-picker-element-esm.js +567 -683
package/dist/js/color-picker-element-esm.min.js +2 -2
package/dist/js/color-picker-element.js +569 -685
package/dist/js/color-picker-element.min.js +2 -2
package/dist/js/color-picker-esm.js +782 -890
package/dist/js/color-picker-esm.min.js +2 -2
package/dist/js/color-picker.js +784 -892
package/dist/js/color-picker.min.js +2 -2
package/dist/js/color.js +1175 -0
package/dist/js/color.min.js +2 -0
package/package.json +22 -3
package/src/js/color-palette.js +18 -14
package/src/js/color-picker-element.js +47 -55
package/src/js/color-picker.js +155 -329
package/src/js/color.js +175 -193
package/src/js/util/getColorMenu.js +12 -7
package/src/js/util/setMarkup.js +122 -0
package/src/js/util/version.js +6 -0
package/src/scss/color-picker.scss +3 -7
package/types/cp.d.ts +64 -32
package/types/source/types.d.ts +1 -1
package/src/js/util/templates.js +0 -10

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

@@ -1,13 +1,13 @@
 /*!
-* ColorPickerElement v0.0.1alpha3 (http://thednp.github.io/color-picker)
+* ColorPickerElement v0.0.2alpha2 (http://thednp.github.io/color-picker)
 * Copyright 2022 © thednp
 * Licensed under MIT (https://github.com/thednp/color-picker/blob/master/LICENSE)
 */
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
   typeof define === 'function' && define.amd ? define(factory) :
-  (global = global || self, global.ColorPickerElement = factory());
-}(this, (function () { 'use strict';
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.ColorPickerElement = factory());
+})(this, (function () { 'use strict';
   /**
    * Returns the `document` or the `#document` element.
@@ -88,14 +88,9 @@
   const getAttribute = (element, attribute) => element.getAttribute(attribute);
   /**
-   * Returns the `document.head` or the `<head>` element.
-   *
-   * @param {(Node | HTMLElement | Element | globalThis)=} node
-   * @returns {HTMLElement | HTMLHeadElement}
+   * A global namespace for `document.head`.
    */
-  function getDocumentHead(node) {
-    return getDocument(node).head;
-  }
+  const { head: documentHead } = document;
   /**
    * Shortcut for `window.getComputedStyle(element).propertyName`
@@ -116,20 +111,21 @@
     return property in computedStyle ? computedStyle[property] : '';
   }
-  /**
-   * 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 `String.toLowerCase()`.
+   *
+   * @param {string} source input string
+   * @returns {string} lowercase output string
+   */
+  const toLowerCase = (source) => source.toLowerCase();
   /**
    * A list of explicit default non-color values.
@@ -147,7 +143,7 @@
   }
   // Color supported formats
-  const COLOR_FORMAT = ['rgb', 'hex', 'hsl', 'hsb', 'hwb'];
+  const COLOR_FORMAT = ['rgb', 'hex', 'hsl', 'hsv', 'hwb'];
   // Hue angles
   const ANGLES = 'deg|rad|grad|turn';
@@ -169,10 +165,17 @@
   // 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 = `[\\s|\\(]+(${CSS_UNIT2})[,|\\s]+(${CSS_UNIT})[,|\\s]+(${CSS_UNIT})[,|\\s|\\/\\s]*(${CSS_UNIT})?\\s*\\)?`;
+  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),
@@ -205,23 +208,24 @@
     return `${n}`.includes('%');
   }
-  /**
-   * Check to see if string passed in is an angle
-   * @param {string} n testing string
-   * @returns {boolean} the query result
-   */
-  function isAngle(n) {
-    return ANGLES.split('|').some((a) => `${n}`.includes(a));
-  }
   /**
    * Check to see if string passed is a web safe colour.
+   * @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;
+    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;
+    });
   }
   /**
@@ -242,15 +246,20 @@
    */
   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 (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%';
-    // 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) {
@@ -261,11 +270,11 @@
       // 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;
   }
@@ -300,7 +309,6 @@
    * @returns {string}
    */
   function getRGBFromName(name) {
-    const documentHead = getDocumentHead();
     setElementStyle(documentHead, { color: name });
     const colorName = getElementStyle(documentHead, 'color');
     setElementStyle(documentHead, { color: '' });
@@ -346,15 +354,12 @@
   /**
    * Converts an RGB colour value to HSL.
    *
-   * @param {number} R Red component [0, 255]
-   * @param {number} G Green component [0, 255]
-   * @param {number} B Blue component [0, 255]
+   * @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 r = R / 255;
-    const g = G / 255;
-    const b = B / 255;
+  function rgbToHsl(r, g, b) {
     const max = Math.max(r, g, b);
     const min = Math.min(r, g, b);
     let h = 0;
@@ -366,17 +371,10 @@
     } else {
       const d = max - min;
       s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
-      switch (max) {
-        case r:
-          h = (g - b) / d + (g < b ? 6 : 0);
-          break;
-        case g:
-          h = (b - r) / d + 2;
-          break;
-        case b:
-          h = (r - g) / d + 4;
-          break;
-      }
+      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 };
@@ -399,21 +397,46 @@
     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, 255]
-  * @param {number} G Green [0, 255]
-  * @param {number} B Blue [0, 255]
+  * @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) {
-    const r = R / 255;
-    const g = G / 255;
-    const b = B / 255;
+  function rgbToHwb(r, g, b) {
     let f = 0;
     let i = 0;
     const whiteness = Math.min(r, g, b);
@@ -443,50 +466,18 @@
   * @param {number} H Hue Angle [0, 1]
   * @param {number} W Whiteness [0, 1]
   * @param {number} B Blackness [0, 1]
-  * @return {CP.RGB} {r,g,b} object with [0, 255] ranged values
+  * @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)) * 255;
+      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 / 255) * (1 - W - B) + W)
-      .map((v) => v * 255);
-    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);
+    [r, g, b] = [r, g, b].map((v) => v * (1 - W - B) + W);
     return { r, g, b };
   }
@@ -494,15 +485,12 @@
   /**
    * Converts an RGB colour value to HSV.
    *
-   * @param {number} R Red component [0, 255]
-   * @param {number} G Green [0, 255]
-   * @param {number} B Blue [0, 255]
+   * @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 r = R / 255;
-    const g = G / 255;
-    const b = B / 255;
+  function rgbToHsv(r, g, b) {
     const max = Math.max(r, g, b);
     const min = Math.min(r, g, b);
     let h = 0;
@@ -512,17 +500,10 @@
     if (max === min) {
       h = 0; // achromatic
     } else {
-      switch (max) {
-        case r:
-          h = (g - b) / d + (g < b ? 6 : 0);
-          break;
-        case g:
-          h = (b - r) / d + 2;
-          break;
-        case b:
-          h = (r - g) / d + 4;
-          break;
-      }
+      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 };
@@ -549,7 +530,7 @@
     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 };
+    return { r, g, b };
   }
   /**
@@ -573,7 +554,7 @@
     // 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);
     }
@@ -601,51 +582,34 @@
     // 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;
     if (isColorName(color)) {
       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,
       };
     }
@@ -660,24 +624,28 @@
         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 {
@@ -685,19 +653,20 @@
         g: parseIntFromHex(m2),
         b: parseIntFromHex(m3),
         a: convertHexToDecimal(m4),
-        // format: named ? 'rgb' : 'hex8',
-        format: named ? 'rgb' : 'hex',
+        format: 'hex',
       };
     }
     [, m1, m2, m3] = matchers.hex6.exec(color) || [];
     if (m1 && m2 && m3) {
       return {
         r: parseIntFromHex(m1),
         g: parseIntFromHex(m2),
         b: parseIntFromHex(m3),
-        format: named ? 'rgb' : 'hex',
+        format: 'hex',
       };
     }
     [, m1, m2, m3, m4] = matchers.hex4.exec(color) || [];
     if (m1 && m2 && m3 && m4) {
       return {
@@ -705,19 +674,20 @@
         g: parseIntFromHex(m2 + m2),
         b: parseIntFromHex(m3 + m3),
         a: convertHexToDecimal(m4 + m4),
-        // format: named ? 'rgb' : 'hex8',
-        format: named ? 'rgb' : 'hex',
+        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: named ? 'rgb' : 'hex',
+        format: 'hex',
       };
     }
     return false;
   }
@@ -748,7 +718,9 @@
    */
   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;
@@ -759,58 +731,67 @@
     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
       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);
-        [r, g, b] = [...[r, g, b]]
-          .map((n) => bound01(n, isPercentage(n) ? 100 : 255) * 255).map(roundPart);
-        rgb = { r, g, b }; // RGB values now are all in [0, 255] range
+        // 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 = 'rgb';
-      } else if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.v)) {
+        format = color.format || 'rgb';
+      }
+      if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.v)) {
         ({ h, s, v } = color);
-        h = typeof h === 'number' ? h : bound01(h, 360); // hue can be `5deg` or a [0, 1] value
-        s = typeof s === 'number' ? s : bound01(s, 100); // saturation can be `5%` or a [0, 1] value
-        v = typeof v === 'number' ? v : bound01(v, 100); // brightness can be `5%` or a [0, 1] value
+        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';
-      } else if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.l)) {
+      }
+      if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.l)) {
         ({ h, s, l } = color);
-        h = typeof h === 'number' ? h : bound01(h, 360); // hue can be `5deg` or a [0, 1] value
-        s = typeof s === 'number' ? s : bound01(s, 100); // saturation can be `5%` or a [0, 1] value
-        l = typeof l === 'number' ? l : bound01(l, 100); // lightness can be `5%` or a [0, 1] value
+        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';
-      } else if (isValidCSSUnit(color.h) && isValidCSSUnit(color.w) && isValidCSSUnit(color.b)) {
+      }
+      if (isValidCSSUnit(color.h) && isValidCSSUnit(color.w) && isValidCSSUnit(color.b)) {
         ({ h, w, b } = color);
-        h = typeof h === 'number' ? h : bound01(h, 360); // hue can be `5deg` or a [0, 1] value
-        w = typeof w === 'number' ? w : bound01(w, 100); // whiteness can be `5%` or a [0, 1] value
-        b = typeof b === 'number' ? b : bound01(b, 100); // blackness can be `5%` or a [0, 1] value
+        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;
-        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,
-      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)),
+      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),
     };
   }
@@ -829,15 +810,13 @@
     constructor(input, config) {
       let color = input;
       const configFormat = config && COLOR_FORMAT.includes(config)
-        ? config : 'rgb';
+        ? config : '';
-      // If input is already a `Color`, return itself
+      // If input is already a `Color`, clone its values
       if (color instanceof Color) {
         color = inputToRGB(color);
       }
-      if (typeof color === 'number') {
-        color = numberInputToObject(color);
-      }
       const {
         r, g, b, a, ok, format,
       } = inputToRGB(color);
@@ -846,7 +825,7 @@
       const self = this;
       /** @type {CP.ColorInput} */
-      self.originalInput = color;
+      self.originalInput = input;
       /** @type {number} */
       self.r = r;
       /** @type {number} */
@@ -887,24 +866,21 @@
       let R = 0;
       let G = 0;
       let B = 0;
-      const rp = r / 255;
-      const rg = g / 255;
-      const rb = b / 255;
-      if (rp <= 0.03928) {
-        R = rp / 12.92;
+      if (r <= 0.03928) {
+        R = r / 12.92;
       } else {
-        R = ((rp + 0.055) / 1.055) ** 2.4;
+        R = ((r + 0.055) / 1.055) ** 2.4;
       }
-      if (rg <= 0.03928) {
-        G = rg / 12.92;
+      if (g <= 0.03928) {
+        G = g / 12.92;
       } else {
-        G = ((rg + 0.055) / 1.055) ** 2.4;
+        G = ((g + 0.055) / 1.055) ** 2.4;
       }
-      if (rb <= 0.03928) {
-        B = rb / 12.92;
+      if (b <= 0.03928) {
+        B = b / 12.92;
       } else {
-        B = ((rb + 0.055) / 1.055) ** 2.4;
+        B = ((b + 0.055) / 1.055) ** 2.4;
       }
       return 0.2126 * R + 0.7152 * G + 0.0722 * B;
     }
@@ -914,7 +890,7 @@
      * @returns {number} a number in the [0, 255] range
      */
     get brightness() {
-      const { r, g, b } = this;
+      const { r, g, b } = this.toRgb();
       return (r * 299 + g * 587 + b * 114) / 1000;
     }
@@ -923,16 +899,14 @@
      * @returns {CP.RGBA} an {r,g,b,a} object with [0, 255] ranged values
      */
     toRgb() {
-      const {
+      let {
         r, g, b, a,
       } = this;
-      const [R, G, B] = [r, g, b].map((x) => roundPart(x));
+      [r, g, b] = [r, g, b].map((n) => roundPart(n * 255 * 100) / 100);
+      a = roundPart(a * 100) / 100;
       return {
-        r: R,
-        g: G,
-        b: B,
-        a: roundPart(a * 100) / 100,
+        r, g, b, a,
       };
     }
@@ -946,10 +920,11 @@
       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})`;
+        ? `rgb(${R}, ${G}, ${B})`
+        : `rgba(${R}, ${G}, ${B}, ${a})`;
     }
     /**
@@ -962,9 +937,10 @@
       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})`;
+      return `rgb(${R} ${G} ${B}${A})`;
     }
     /**
@@ -1024,7 +1000,7 @@
     toHsv() {
       const {
         r, g, b, a,
-      } = this.toRgb();
+      } = this;
       const { h, s, v } = rgbToHsv(r, g, b);
       return {
@@ -1039,7 +1015,7 @@
     toHsl() {
       const {
         r, g, b, a,
-      } = this.toRgb();
+      } = this;
       const { h, s, l } = rgbToHsl(r, g, b);
       return {
@@ -1124,6 +1100,7 @@
      */
     setAlpha(alpha) {
       const self = this;
+      if (typeof alpha !== 'number') return self;
       self.a = boundAlpha(alpha);
       return self;
     }
@@ -1238,6 +1215,7 @@
     isOnePointZero,
     isPercentage,
     isValidCSSUnit,
+    isColorName,
     pad2,
     clamp01,
     bound01,
@@ -1255,10 +1233,11 @@
     hueToRgb,
     hwbToRgb,
     parseIntFromHex,
-    numberInputToObject,
     stringInputToObject,
     inputToRGB,
     roundPart,
+    getElementStyle,
+    setElementStyle,
     ObjectAssign,
   });
@@ -1388,24 +1367,6 @@
    */
   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
@@ -1532,37 +1493,6 @@
    */
   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.documentElement` or the `<html>` element.
    *
@@ -1747,30 +1677,6 @@
     return lookUp.getElementsByClassName(selector);
   }
-  /**
-   * 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.
    *
@@ -1888,12 +1794,11 @@
   }
   /**
-   * Shortcut for `String.toLowerCase()`.
-   *
-   * @param {string} source input string
-   * @returns {string} lowercase output string
+   * Shortcut for `Object.keys()` static method.
+   * @param  {Record<string, any>} obj a target object
+   * @returns {string[]}
    */
-  const toLowerCase = (source) => source.toLowerCase();
+  const ObjectKeys = (obj) => Object.keys(obj);
   /**
    * Utility to normalize component options.
@@ -1998,6 +1903,77 @@
    */
   const removeAttribute = (element, attribute) => element.removeAttribute(attribute);
+  /**
+   * @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',
@@ -2025,14 +2001,72 @@
    */
   const colorNames = ['white', 'black', 'grey', 'red', 'orange', 'brown', 'gold', 'olive', 'yellow', 'lime', 'green', 'teal', 'cyan', 'blue', 'violet', 'magenta', 'pink'];
+  const tabIndex = 'tabindex';
   /**
-   * Shortcut for `String.toUpperCase()`.
-   *
-   * @param {string} source input string
-   * @returns {string} uppercase output string
+   * 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.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';
   /**
@@ -2112,8 +2146,6 @@
    */
   const ariaValueMax = 'aria-valuemax';
-  const tabIndex = 'tabindex';
   /**
    * Returns all color controls for `ColorPicker`.
    *
@@ -2221,75 +2253,6 @@
     });
   }
-  /**
-   * @class
-   * Returns a color palette with a given set of parameters.
-   * @example
-   * new ColorPalette(0, 12, 10);
-   * // => { hue: 0, hueSteps: 12, lightSteps: 10, colors: array }
-   */
-  class ColorPalette {
-    /**
-     * The `hue` parameter is optional, which would be set to 0.
-     * @param {number[]} args represeinting hue, hueSteps, lightSteps
-     * * `args.hue` the starting Hue [0, 360]
-     * * `args.hueSteps` Hue Steps Count [5, 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;
-      } else {
-        throw TypeError('ColorPalette requires minimum 2 arguments');
-      }
-      /** @type {string[]} */
-      const colors = [];
-      const hueStep = 360 / hueSteps;
-      const half = roundPart((lightSteps - (lightSteps % 2 ? 1 : 0)) / 2);
-      const estimatedStep = 100 / (lightSteps + (lightSteps % 2 ? 0 : 1)) / 100;
-      let lightStep = 0.25;
-      lightStep = [4, 5].includes(lightSteps) ? 0.2 : lightStep;
-      lightStep = [6, 7].includes(lightSteps) ? 0.15 : lightStep;
-      lightStep = [8, 9].includes(lightSteps) ? 0.11 : lightStep;
-      lightStep = [10, 11].includes(lightSteps) ? 0.09 : lightStep;
-      lightStep = [12, 13].includes(lightSteps) ? 0.075 : lightStep;
-      lightStep = lightSteps > 13 ? estimatedStep : lightStep;
-      // 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 }).toHexString());
-        });
-      }
-      this.hue = hue;
-      this.hueSteps = hueSteps;
-      this.lightSteps = lightSteps;
-      this.colors = colors;
-    }
-  }
   /**
    * Returns a color-defaults with given values and class.
    * @param {CP.ColorPicker} self
@@ -2323,7 +2286,8 @@
     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,
@@ -2331,7 +2295,7 @@
     setAttribute(menu, 'role', 'listbox');
     setAttribute(menu, ariaLabel, menuLabel);
-    if (isScrollable) { // @ts-ignore
+    if (isScrollable) {
       setCSSProperties(menu, {
         '--grid-item-size': `${optionSize}rem`,
         '--grid-fit': fit,
@@ -2342,15 +2306,19 @@
     }
     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');
@@ -2359,7 +2327,7 @@
       setAttribute(option, ariaSelected, isActive ? 'true' : 'false');
       if (isOptionsMenu) {
-        setElementStyle(option, { backgroundColor: x });
+        setElementStyle(option, { backgroundColor: value });
       }
       menu.append(option);
@@ -2368,55 +2336,10 @@
   }
   /**
-   * 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.1alpha3";
-  // @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;
@@ -2431,9 +2354,7 @@
     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}`,
@@ -2450,7 +2371,7 @@
     const pickerDropdown = createElement({
       tagName: 'div',
-      className: `color-dropdown picker${dropClass}`,
+      className: 'color-dropdown picker',
     });
     setAttribute(pickerDropdown, ariaLabelledBy, `picker-btn-${id}`);
     setAttribute(pickerDropdown, 'role', 'group');
@@ -2466,7 +2387,7 @@
     if (colorKeywords || colorPresets) {
       const presetsDropdown = createElement({
         tagName: 'div',
-        className: `color-dropdown scrollable menu${dropClass}`,
+        className: 'color-dropdown scrollable menu',
       });
       // color presets
@@ -2516,6 +2437,37 @@
     setAttribute(input, tabIndex, '-1');
   }
+  var version = "0.0.2alpha2";
+  // @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
@@ -2528,8 +2480,6 @@
     fn(input, focusinEvent, self.showPicker);
     fn(pickerToggle, mouseclickEvent, self.togglePicker);
-    fn(input, keydownEvent, self.keyToggle);
     if (menuToggle) {
       fn(menuToggle, mouseclickEvent, self.toggleMenu);
     }
@@ -2567,8 +2517,7 @@
     fn(doc, pointerEvents.move, self.pointerMove);
     fn(doc, pointerEvents.up, self.pointerUp);
     fn(parent, focusoutEvent, self.handleFocusOut);
-    // @ts-ignore -- this is `Window`
-    fn(win, keyupEvent, self.handleDismiss);
+    fn(doc, keyupEvent, self.handleDismiss);
   }
   /**
@@ -2652,7 +2601,7 @@
       const input = querySelector(target);
       // invalidate
-      if (!input) throw new TypeError(`ColorPicker target ${target} cannot be found.`);
+      if (!input) throw new TypeError(`ColorPicker target "${target}" cannot be found.`);
       self.input = input;
       const parent = closest(input, colorPickerParentSelector);
@@ -2699,15 +2648,14 @@
       });
       // update and expose component labels
-      const tempLabels = ObjectAssign({}, colorPickerLabels);
-      const jsonLabels = componentLabels && isValidJSON(componentLabels)
-        ? JSON.parse(componentLabels) : componentLabels || {};
+      const tempComponentLabels = componentLabels && isValidJSON(componentLabels)
+        ? JSON.parse(componentLabels) : componentLabels;
       /** @type {Record<string, string>} */
-      self.componentLabels = ObjectAssign(tempLabels, jsonLabels);
+      self.componentLabels = ObjectAssign(colorPickerLabels, tempComponentLabels);
       /** @type {Color} */
-      self.color = new Color('white', format);
+      self.color = new Color(input.value || '#fff', format);
       /** @type {CP.ColorFormats} */
       self.format = format;
@@ -2716,7 +2664,7 @@
       if (colorKeywords instanceof Array) {
         self.colorKeywords = colorKeywords;
       } else if (typeof colorKeywords === 'string' && colorKeywords.length) {
-        self.colorKeywords = colorKeywords.split(',');
+        self.colorKeywords = colorKeywords.split(',').map((x) => x.trim());
       }
       // set colour presets
@@ -2745,11 +2693,10 @@
       self.handleFocusOut = self.handleFocusOut.bind(self);
       self.changeHandler = self.changeHandler.bind(self);
       self.handleDismiss = self.handleDismiss.bind(self);
-      self.keyToggle = self.keyToggle.bind(self);
       self.handleKnobs = self.handleKnobs.bind(self);
       // generate markup
-      initCallback(self);
+      setMarkup(self);
       const [colorPicker, colorMenu] = getElementsByClassName('color-dropdown', parent);
       // set main elements
@@ -2837,76 +2784,83 @@
       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
+      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 {
-        format, controlPositions, visuals,
+        controlPositions, visuals,
       } = self;
       const [v1, v2, v3] = visuals;
-      const { offsetWidth, offsetHeight } = v1;
-      const hue = format === 'hsl'
-        ? controlPositions.c1x / offsetWidth
-        : controlPositions.c2y / offsetHeight;
-      // @ts-ignore - `hslToRgb` is assigned to `Color` as static method
-      const { r, g, b } = Color.hslToRgb(hue, 1, 0.5);
+      const { 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;
-      if (format !== 'hsl') {
-        const fill = new Color({
-          h: hue, s: 1, l: 0.5, a: alpha,
-        }).toRgbString();
-        const hueGradient = `linear-gradient(
-        rgb(255,0,0) 0%, rgb(255,255,0) 16.67%,
-        rgb(0,255,0) 33.33%, rgb(0,255,255) 50%,
-        rgb(0,0,255) 66.67%, rgb(255,0,255) 83.33%,
-        rgb(255,0,0) 100%)`;
-        setElementStyle(v1, {
-          background: `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,${roundA}) 100%),
-        linear-gradient(to right, rgba(255,255,255,${roundA}) 0%, ${fill} 100%),
-        ${whiteGrad}`,
-        });
-        setElementStyle(v2, { background: hueGradient });
-      } else {
-        const saturation = roundPart((controlPositions.c2y / offsetHeight) * 100);
-        const fill0 = new Color({
-          r: 255, g: 0, b: 0, a: alpha,
-        }).saturate(-saturation).toRgbString();
-        const fill1 = new Color({
-          r: 255, g: 255, b: 0, a: alpha,
-        }).saturate(-saturation).toRgbString();
-        const fill2 = new Color({
-          r: 0, g: 255, b: 0, a: alpha,
-        }).saturate(-saturation).toRgbString();
-        const fill3 = new Color({
-          r: 0, g: 255, b: 255, a: alpha,
-        }).saturate(-saturation).toRgbString();
-        const fill4 = new Color({
-          r: 0, g: 0, b: 255, a: alpha,
-        }).saturate(-saturation).toRgbString();
-        const fill5 = new Color({
-          r: 255, g: 0, b: 255, a: alpha,
-        }).saturate(-saturation).toRgbString();
-        const fill6 = new Color({
-          r: 255, g: 0, b: 0, a: alpha,
-        }).saturate(-saturation).toRgbString();
-        const fillGradient = `linear-gradient(to right,
-        ${fill0} 0%, ${fill1} 16.67%, ${fill2} 33.33%, ${fill3} 50%,
-        ${fill4} 66.67%, ${fill5} 83.33%, ${fill6} 100%)`;
-        const lightGrad = `linear-gradient(rgba(255,255,255,${roundA}) 0%, rgba(255,255,255,0) 50%),
-        linear-gradient(rgba(0,0,0,0) 50%, rgba(0,0,0,${roundA}) 100%)`;
-        setElementStyle(v1, { background: `${lightGrad},${fillGradient},${whiteGrad}` });
-        const {
-          r: gr, g: gg, b: gb,
-        } = new Color({ r, g, b }).greyscale().toRgb();
+      const fill = new Color({
+        h: hue, s: 1, l: 0.5, a: alpha,
+      }).toRgbString();
+      const hueGradient = `linear-gradient(
+      rgb(255,0,0) 0%, rgb(255,255,0) 16.67%,
+      rgb(0,255,0) 33.33%, rgb(0,255,255) 50%,
+      rgb(0,0,255) 66.67%, rgb(255,0,255) 83.33%,
+      rgb(255,0,0) 100%)`;
+      setElementStyle(v1, {
+        background: `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,${roundA}) 100%),
+      linear-gradient(to right, rgba(255,255,255,${roundA}) 0%, ${fill} 100%),
+      ${whiteGrad}`,
+      });
+      setElementStyle(v2, { background: hueGradient });
-        setElementStyle(v2, {
-          background: `linear-gradient(rgb(${r},${g},${b}) 0%, rgb(${gr},${gg},${gb}) 100%)`,
-        });
-      }
       setElementStyle(v3, {
         background: `linear-gradient(rgba(${r},${g},${b},1) 0%,rgba(${r},${g},${b},0) 100%)`,
       });
@@ -2945,7 +2899,7 @@
       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();
@@ -3056,13 +3010,13 @@
       const [v1, v2, v3] = visuals;
       const [c1, c2, c3] = controlKnobs;
       /** @type {HTMLElement} */
-      const visual = hasClass(target, 'visual-control')
-        ? target : querySelector('.visual-control', target.parentElement);
+      const visual = controlKnobs.includes(target) ? target.previousElementSibling : target;
       const visualRect = getBoundingClientRect(visual);
+      const html = getDocumentElement(v1);
       const X = type === 'touchstart' ? touches[0].pageX : pageX;
       const Y = type === 'touchstart' ? touches[0].pageY : pageY;
-      const offsetX = X - window.pageXOffset - visualRect.left;
-      const offsetY = Y - window.pageYOffset - visualRect.top;
+      const offsetX = X - html.scrollLeft - visualRect.left;
+      const offsetY = Y - html.scrollTop - visualRect.top;
       if (target === v1 || target === c1) {
         self.dragElement = visual;
@@ -3122,10 +3076,11 @@
       if (!dragElement) return;
       const controlRect = getBoundingClientRect(dragElement);
-      const X = type === 'touchmove' ? touches[0].pageX : pageX;
-      const Y = type === 'touchmove' ? touches[0].pageY : pageY;
-      const offsetX = X - window.pageXOffset - controlRect.left;
-      const offsetY = Y - window.pageYOffset - controlRect.top;
+      const win = getDocumentElement(v1);
+      const X = type === touchmoveEvent ? touches[0].pageX : pageX;
+      const Y = type === touchmoveEvent ? touches[0].pageY : pageY;
+      const offsetX = X - win.scrollLeft - controlRect.left;
+      const offsetY = Y - win.scrollTop - controlRect.top;
       if (dragElement === v1) {
         self.changeControl1(offsetX, offsetY);
@@ -3152,30 +3107,41 @@
       if (![keyArrowUp, keyArrowDown, keyArrowLeft, keyArrowRight].includes(code)) return;
       e.preventDefault();
-      const { controlKnobs } = self;
+      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;
       if (currentKnob) {
         let offsetX = 0;
         let offsetY = 0;
         if (target === c1) {
+          const xRatio = offsetWidth / 100;
           if ([keyArrowLeft, keyArrowRight].includes(code)) {
-            self.controlPositions.c1x += code === keyArrowRight ? +1 : -1;
+            self.controlPositions.c1x += code === keyArrowRight ? xRatio : -xRatio;
           } else if ([keyArrowUp, keyArrowDown].includes(code)) {
-            self.controlPositions.c1y += code === keyArrowDown ? +1 : -1;
+            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) ? +1 : -1;
+          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) ? +1 : -1;
+          self.controlPositions.c3y += [keyArrowDown, keyArrowRight].includes(code)
+            ? yRatio
+            : -yRatio;
           offsetY = self.controlPositions.c3y;
           self.changeAlpha(offsetY);
         }
@@ -3203,7 +3169,7 @@
       if (activeElement === input || (activeElement && inputs.includes(activeElement))) {
         if (activeElement === input) {
           if (isNonColorValue) {
-            colorSource = 'white';
+            colorSource = currentValue === 'transparent' ? 'rgba(0,0,0,0)' : 'rgb(0,0,0)';
           } else {
             colorSource = currentValue;
           }
@@ -3254,9 +3220,7 @@
     changeControl1(X, Y) {
       const self = this;
       let [offsetX, offsetY] = [0, 0];
-      const {
-        format, controlPositions, visuals,
-      } = self;
+      const { controlPositions, visuals } = self;
       const { offsetHeight, offsetWidth } = visuals[0];
       if (X > offsetWidth) offsetX = offsetWidth;
@@ -3265,29 +3229,19 @@
       if (Y > offsetHeight) offsetY = offsetHeight;
       else if (Y >= 0) offsetY = Y;
-      const hue = format === 'hsl'
-        ? offsetX / offsetWidth
-        : controlPositions.c2y / offsetHeight;
+      const hue = controlPositions.c2y / offsetHeight;
-      const saturation = format === 'hsl'
-        ? 1 - controlPositions.c2y / offsetHeight
-        : offsetX / offsetWidth;
+      const saturation = offsetX / offsetWidth;
       const lightness = 1 - offsetY / offsetHeight;
       const alpha = 1 - controlPositions.c3y / offsetHeight;
-      const colorObject = format === 'hsl'
-        ? {
-          h: hue, s: saturation, l: lightness, a: alpha,
-        }
-        : {
-          h: hue, s: saturation, v: lightness, a: alpha,
-        };
       // new color
       const {
         r, g, b, a,
-      } = new Color(colorObject);
+      } = new Color({
+        h: hue, s: saturation, v: lightness, a: alpha,
+      });
       ObjectAssign(self.color, {
         r, g, b, a,
@@ -3314,7 +3268,7 @@
     changeControl2(Y) {
       const self = this;
       const {
-        format, controlPositions, visuals,
+        controlPositions, visuals,
       } = self;
       const { offsetHeight, offsetWidth } = visuals[0];
@@ -3323,26 +3277,17 @@
       if (Y > offsetHeight) offsetY = offsetHeight;
       else if (Y >= 0) offsetY = Y;
-      const hue = format === 'hsl'
-        ? controlPositions.c1x / offsetWidth
-        : offsetY / offsetHeight;
-      const saturation = format === 'hsl'
-        ? 1 - offsetY / offsetHeight
-        : controlPositions.c1x / offsetWidth;
+      const hue = offsetY / offsetHeight;
+      const saturation = controlPositions.c1x / offsetWidth;
       const lightness = 1 - controlPositions.c1y / offsetHeight;
       const alpha = 1 - controlPositions.c3y / offsetHeight;
-      const colorObject = format === 'hsl'
-        ? {
-          h: hue, s: saturation, l: lightness, a: alpha,
-        }
-        : {
-          h: hue, s: saturation, v: lightness, a: alpha,
-        };
       // new color
       const {
         r, g, b, a,
-      } = new Color(colorObject);
+      } = new Color({
+        h: hue, s: saturation, v: lightness, a: alpha,
+      });
       ObjectAssign(self.color, {
         r, g, b, a,
@@ -3429,18 +3374,18 @@
     setControlPositions() {
       const self = this;
       const {
-        format, visuals, color, hsl, hsv,
+        visuals, color, hsv,
       } = self;
       const { offsetHeight, offsetWidth } = visuals[0];
       const alpha = color.a;
-      const hue = hsl.h;
+      const hue = hsv.h;
-      const saturation = format !== 'hsl' ? hsv.s : hsl.s;
-      const lightness = format !== 'hsl' ? hsv.v : hsl.l;
+      const saturation = hsv.s;
+      const lightness = hsv.v;
-      self.controlPositions.c1x = format !== 'hsl' ? saturation * offsetWidth : hue * offsetWidth;
+      self.controlPositions.c1x = saturation * offsetWidth;
       self.controlPositions.c1y = (1 - lightness) * offsetHeight;
-      self.controlPositions.c2y = format !== 'hsl' ? hue * offsetHeight : (1 - saturation) * offsetHeight;
+      self.controlPositions.c2y = hue * offsetHeight;
       self.controlPositions.c3y = (1 - alpha) * offsetHeight;
     }
@@ -3448,78 +3393,40 @@
     updateAppearance() {
       const self = this;
       const {
-        componentLabels, colorLabels, color, parent,
-        hsl, hsv, hex, format, controlKnobs,
+        componentLabels, color, parent,
+        hsv, hex, format, controlKnobs,
       } = self;
       const {
         appearanceLabel, hexLabel, valueLabel,
       } = componentLabels;
-      const { r, g, b } = color.toRgb();
+      let { r, g, b } = color.toRgb();
       const [knob1, knob2, knob3] = controlKnobs;
-      const hue = roundPart(hsl.h * 360);
+      const hue = roundPart(hsv.h * 360);
       const alpha = color.a;
-      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
-      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;
-      }
+      const saturation = roundPart(hsv.s * 100);
+      const lightness = roundPart(hsv.v * 100);
+      const colorName = self.appearance;
       let colorLabel = `${hexLabel} ${hex.split('').join(' ')}`;
-      if (format === 'hsl') {
-        colorLabel = `HSL: ${hue}°, ${saturation}%, ${lightness}%`;
-        setAttribute(knob1, ariaDescription, `${valueLabel}: ${colorLabel}. ${appearanceLabel}: ${colorName}.`);
-        setAttribute(knob1, ariaValueText, `${hue}° & ${lightness}%`);
-        setAttribute(knob1, ariaValueNow, `${hue}`);
-        setAttribute(knob2, ariaValueText, `${saturation}%`);
-        setAttribute(knob2, ariaValueNow, `${saturation}`);
-      } else if (format === 'hwb') {
+      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, ariaDescription, `${valueLabel}: ${colorLabel}. ${appearanceLabel}: ${colorName}.`);
         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(knob2, ariaDescription, `${valueLabel}: ${colorLabel}. ${appearanceLabel}: ${colorName}.`);
         setAttribute(knob1, ariaValueText, `${lightness}% & ${saturation}%`);
         setAttribute(knob1, ariaValueNow, `${lightness}`);
+        setAttribute(knob2, ariaDescription, `${valueLabel}: ${colorLabel}. ${appearanceLabel}: ${colorName}.`);
         setAttribute(knob2, ariaValueText, `${hue}°`);
         setAttribute(knob2, ariaValueNow, `${hue}`);
       }
@@ -3547,10 +3454,12 @@
     /** Updates the control knobs actual positions. */
     updateControls() {
       const { controlKnobs, controlPositions } = this;
-      const {
+      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)` });
@@ -3593,7 +3502,8 @@
         i3.value = `${blackness}`;
         i4.value = `${alpha}`;
       } else if (format === 'rgb') {
-        const { r, g, b } = self.rgb;
+        let { r, g, b } = self.rgb;
+        [r, g, b] = [r, g, b].map(roundPart);
         newColor = self.color.toRgbString();
         i1.value = `${r}`;
@@ -3611,37 +3521,13 @@
       }
     }
-    /**
-     * The `Space` & `Enter` keys specific event listener.
-     * Toggle visibility of the `ColorPicker` / the presets menu, showing one will hide the other.
-     * @param {KeyboardEvent} e
-     * @this {ColorPicker}
-     */
-    keyToggle(e) {
-      const self = this;
-      const { menuToggle } = self;
-      const { activeElement } = getDocument(menuToggle);
-      const { code } = e;
-      if ([keyEnter, keySpace].includes(code)) {
-        if ((menuToggle && activeElement === menuToggle) || !activeElement) {
-          e.preventDefault();
-          if (!activeElement) {
-            self.togglePicker(e);
-          } else {
-            self.toggleMenu();
-          }
-        }
-      }
-    }
     /**
      * Toggle the `ColorPicker` dropdown visibility.
-     * @param {Event} e
+     * @param {Event=} e
      * @this {ColorPicker}
      */
     togglePicker(e) {
-      e.preventDefault();
+      if (e) e.preventDefault();
       const self = this;
       const { colorPicker } = self;
@@ -3662,8 +3548,13 @@
       }
     }
-    /** Toggles the visibility of the `ColorPicker` presets menu. */
-    toggleMenu() {
+    /**
+     * 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;
@@ -3689,6 +3580,10 @@
         const relatedBtn = openPicker ? pickerToggle : menuToggle;
         const animationDuration = openDropdown && getElementTransitionDuration(openDropdown);
+        // if (!self.isValid) {
+        self.value = self.color.toString(true);
+        // }
         if (openDropdown) {
           removeClass(openDropdown, 'show');
           setAttribute(relatedBtn, ariaExpanded, 'false');
@@ -3702,9 +3597,6 @@
           }, animationDuration);
         }
-        if (!self.isValid) {
-          self.value = self.color.toString();
-        }
         if (!focusPrevented) {
           focus(pickerToggle);
         }
@@ -3753,90 +3645,82 @@
    * `ColorPickerElement` Web Component.
    * @example
    * <label for="UNIQUE_ID">Label</label>
-   * <color-picker data-format="hex" data-value="#075">
-   *   <input id="UNIQUE_ID" type="text" class="color-preview btn-appearance">
+   * <color-picker>
+   *   <input id="UNIQUE_ID" value="red" format="hex" class="color-preview btn-appearance">
    * </color-picker>
+   * // or
+   * <label for="UNIQUE_ID">Label</label>
+   * <color-picker data-id="UNIQUE_ID" data-value="red" data-format="hex"></color-picker>
    */
   class ColorPickerElement extends HTMLElement {
     constructor() {
       super();
-      /** @type {boolean} */
-      this.isDisconnected = true;
       this.attachShadow({ mode: 'open' });
     }
     /**
      * Returns the current color value.
-     * @returns {string?}
+     * @returns {string | undefined}
      */
-    get value() { return this.input ? this.input.value : null; }
+    get value() { return this.input && this.input.value; }
     connectedCallback() {
-      if (this.colorPicker) {
-        if (this.isDisconnected) {
-          this.isDisconnected = false;
-        }
-        return;
-      }
+      if (this.input) return;
-      const inputs = getElementsByTagName('input', this);
+      let [input] = getElementsByTagName('input', this);
+      const value = (input && getAttribute(input, 'value')) || getAttribute(this, 'data-value') || '#fff';
+      const format = (input && getAttribute(input, 'format')) || getAttribute(this, 'data-format') || 'rgb';
+      let id = (input && getAttribute(input, 'id')) || getAttribute(this, 'data-id');
+      if (!id) {
+        id = `color-picker-${format}-${CPID}`;
+        CPID += 1;
+      }
-      if (!inputs.length) {
-        const label = getAttribute(this, 'data-label');
-        const value = getAttribute(this, 'data-value') || '#069';
-        const format = getAttribute(this, 'data-format') || 'rgb';
-        const newInput = createElement({
+      if (!input) {
+        input = createElement({
           tagName: 'input',
           type: 'text',
           className: 'color-preview btn-appearance',
         });
-        let id = getAttribute(this, 'data-id');
-        if (!id) {
-          id = `color-picker-${format}-${CPID}`;
-          CPID += 1;
-        }
-        const labelElement = createElement({ tagName: 'label', innerText: label || 'Color Picker' });
-        this.before(labelElement);
-        setAttribute(labelElement, 'for', id);
-        setAttribute(newInput, 'id', id);
-        setAttribute(newInput, 'name', id);
-        setAttribute(newInput, 'autocomplete', 'off');
-        setAttribute(newInput, 'spellcheck', 'false');
-        setAttribute(newInput, 'value', value);
-        this.append(newInput);
+        setAttribute(input, 'id', id);
+        setAttribute(input, 'name', id);
+        setAttribute(input, 'autocomplete', 'off');
+        setAttribute(input, 'spellcheck', 'false');
+        setAttribute(input, 'value', value);
+        this.append(input);
       }
+      /** @type {HTMLInputElement} */
+      // @ts-ignore - `HTMLInputElement` is `HTMLElement`
+      this.input = input;
-      const [input] = inputs;
-      if (input) {
-        /** @type {HTMLInputElement} */
-        // @ts-ignore - `HTMLInputElement` is `HTMLElement`
-        this.input = input;
-        // @ts-ignore - `HTMLInputElement` is `HTMLElement`
-        this.colorPicker = new ColorPicker(input);
-        this.color = this.colorPicker.color;
-        if (this.shadowRoot) {
-          this.shadowRoot.append(createElement('slot'));
-        }
+      // @ts-ignore - `HTMLInputElement` is `HTMLElement`
+      this.colorPicker = new ColorPicker(input);
-        this.isDisconnected = false;
-      }
+      // @ts-ignore - `shadowRoot` is defined in the constructor
+      this.shadowRoot.append(createElement('slot'));
     }
+    /** @this {ColorPickerElement} */
     disconnectedCallback() {
-      if (this.colorPicker) this.colorPicker.dispose();
-      this.isDisconnected = true;
+      const { input, colorPicker, shadowRoot } = this;
+      if (colorPicker) colorPicker.dispose();
+      if (input) input.remove();
+      if (shadowRoot) shadowRoot.innerHTML = '';
+      ObjectAssign(this, {
+        colorPicker: undefined,
+        input: undefined,
+      });
     }
   }
   ObjectAssign(ColorPickerElement, {
     Color,
     ColorPicker,
-    ColorPalette,
-    getInstance: getColorPickerInstance,
+    ColorPalette, // @ts-ignore
+    getInstance: ColorPicker.getInstance,
     Version,
   });
@@ -3844,4 +3728,4 @@
   return ColorPickerElement;
-})));
+}));