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

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;
-})));
+}));