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

@thednp/color-picker 0.0.1 → 0.0.2-alpha3

Files changed (32) hide show

package/README.md +3 -1
package/dist/css/color-picker.css +1 -1
package/dist/css/color-picker.min.css +1 -1
package/dist/css/color-picker.rtl.css +1 -1
package/dist/css/color-picker.rtl.min.css +1 -1
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 +543 -671
package/dist/js/color-picker-element-esm.min.js +2 -2
package/dist/js/color-picker-element.js +545 -673
package/dist/js/color-picker-element.min.js +2 -2
package/dist/js/color-picker-esm.js +758 -878
package/dist/js/color-picker-esm.min.js +2 -2
package/dist/js/color-picker.js +760 -880
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 +137 -325
package/src/js/color.js +169 -185
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/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-esm.js CHANGED Viewed

@@ -1,5 +1,5 @@
 /*!
-* ColorPickerElement v0.0.1 (http://thednp.github.io/color-picker)
+* ColorPickerElement v0.0.2alpha3 (http://thednp.github.io/color-picker)
 * Copyright 2022 © thednp
 * Licensed under MIT (https://github.com/thednp/color-picker/blob/master/LICENSE)
 */
@@ -82,14 +82,9 @@ const setAttribute = (element, attribute, value) => element.setAttribute(attribu
 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`
@@ -110,20 +105,21 @@ function getElementStyle(element, property) {
   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.
@@ -141,7 +137,7 @@ function roundPart(v) {
 }
 // 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';
@@ -163,10 +159,17 @@ const CSS_UNIT = `(?:${CSS_NUMBER})|(?:${CSS_INTEGER})`;
 // Add angles to the mix
 const CSS_UNIT2 = `(?:${CSS_UNIT})|(?:${CSS_ANGLE})`;
+// Start & end
+const START_MATCH = '(?:[\\s|\\(\\s|\\s\\(\\s]+)?';
+const END_MATCH = '(?:[\\s|\\)\\s]+)?';
+// Components separation
+const SEP = '(?:[,|\\s]+)';
+const SEP2 = '(?:[,|\\/\\s]*)?';
 // Actual matching.
 // Parentheses and commas are optional, but not required.
 // Whitespace can take the place of commas or opening paren
-const PERMISSIVE_MATCH = `[\\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),
@@ -199,23 +202,24 @@ function isPercentage(n) {
   return `${n}`.includes('%');
 }
-/**
- * Check to see if string passed in is an angle
- * @param {string} n testing string
- * @returns {boolean} the query result
- */
-function isAngle(n) {
-  return ANGLES.split('|').some((a) => `${n}`.includes(a));
-}
 /**
  * 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;
+  });
 }
 /**
@@ -236,15 +240,20 @@ function isValidCSSUnit(color) {
  */
 function bound01(N, max) {
   let n = N;
-  if (isOnePointZero(n)) n = '100%';
-  n = max === 360 ? n : Math.min(max, Math.max(0, parseFloat(n)));
+  if (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) {
@@ -255,11 +264,11 @@ function bound01(N, max) {
     // If n is a hue given in degrees,
     // wrap around out-of-range values into [0, 360] range
     // then convert into [0, 1].
-    n = (n < 0 ? (n % max) + max : n % max) / parseFloat(String(max));
+    n = (n < 0 ? (n % max) + max : n % max) / max;
   } else {
     // If n not a hue given in degrees
     // Convert into [0, 1] range if it isn't already.
-    n = (n % max) / parseFloat(String(max));
+    n = (n % max) / max;
   }
   return n;
 }
@@ -294,7 +303,6 @@ function clamp01(v) {
  * @returns {string}
  */
 function getRGBFromName(name) {
-  const documentHead = getDocumentHead();
   setElementStyle(documentHead, { color: name });
   const colorName = getElementStyle(documentHead, 'color');
   setElementStyle(documentHead, { color: '' });
@@ -340,15 +348,12 @@ function pad2(c) {
 /**
  * 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;
@@ -360,17 +365,10 @@ function rgbToHsl(R, G, B) {
   } 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 };
@@ -393,21 +391,46 @@ function hueToRgb(p, q, t) {
   return p;
 }
+/**
+ * Converts an HSL colour value to RGB.
+ *
+ * @param {number} h Hue Angle [0, 1]
+ * @param {number} s Saturation [0, 1]
+ * @param {number} l Lightness Angle [0, 1]
+ * @returns {CP.RGB} {r,g,b} object with [0, 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);
@@ -437,50 +460,18 @@ function rgbToHwb(R, G, B) {
 * @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 };
 }
@@ -488,15 +479,12 @@ function hslToRgb(h, s, l) {
 /**
  * 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;
@@ -506,17 +494,10 @@ function rgbToHsv(R, G, B) {
   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 };
@@ -543,7 +524,7 @@ function hsvToRgb(H, S, V) {
   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 };
 }
 /**
@@ -567,7 +548,7 @@ function rgbToHex(r, g, b, allow3Char) {
   // Return a 3 character hex if possible
   if (allow3Char && hex[0].charAt(0) === hex[0].charAt(1)
     && hex[1].charAt(0) === hex[1].charAt(1)
-      && hex[2].charAt(0) === hex[2].charAt(1)) {
+    && hex[2].charAt(0) === hex[2].charAt(1)) {
     return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0);
   }
@@ -595,51 +576,34 @@ function rgbaToHex(r, g, b, a, allow4Char) {
   // Return a 4 character hex if possible
   if (allow4Char && hex[0].charAt(0) === hex[0].charAt(1)
     && hex[1].charAt(0) === hex[1].charAt(1)
-      && hex[2].charAt(0) === hex[2].charAt(1)
-        && hex[3].charAt(0) === hex[3].charAt(1)) {
+    && hex[2].charAt(0) === hex[2].charAt(1)
+    && hex[3].charAt(0) === hex[3].charAt(1)) {
     return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0) + hex[3].charAt(0);
   }
   return hex.join('');
 }
-/**
- * Returns a colour object corresponding to a given number.
- * @param {number} color input number
- * @returns {CP.RGB} {r,g,b} object with [0, 255] ranged values
- */
-function numberInputToObject(color) {
-  /* eslint-disable no-bitwise */
-  return {
-    r: color >> 16,
-    g: (color & 0xff00) >> 8,
-    b: color & 0xff,
-  };
-  /* eslint-enable no-bitwise */
-}
 /**
  * Permissive string parsing. Take in a number of formats, and output an object
  * based on detected format. Returns {r,g,b} or {h,s,l} or {h,s,v}
  * @param {string} input colour value in any format
- * @returns {Record<string, (number | string)> | false} an object matching the RegExp
+ * @returns {Record<string, (number | string | boolean)> | false} an object matching the RegExp
  */
 function stringInputToObject(input) {
-  let color = input.trim().toLowerCase();
+  let color = toLowerCase(input.trim());
   if (color.length === 0) {
     return {
-      r: 0, g: 0, b: 0, a: 0,
+      r: 0, g: 0, b: 0, a: 1,
     };
   }
-  let named = false;
   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,
     };
   }
@@ -654,24 +618,28 @@ function stringInputToObject(input) {
       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 {
@@ -679,19 +647,20 @@ function stringInputToObject(input) {
       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 {
@@ -699,19 +668,20 @@ function stringInputToObject(input) {
       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;
 }
@@ -742,7 +712,9 @@ function stringInputToObject(input) {
  */
 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;
@@ -753,58 +725,67 @@ function inputToRGB(input) {
   let r = null;
   let g = null;
   let ok = false;
-  let format = 'hex';
+  const inputFormat = typeof color === 'object' && color.format;
+  let format = inputFormat && COLOR_FORMAT.includes(inputFormat) ? inputFormat : 'rgb';
   if (typeof input === 'string') {
-    // @ts-ignore -- this now is converted to object
     color = stringInputToObject(input);
     if (color) ok = true;
   }
   if (typeof color === 'object') {
     if (isValidCSSUnit(color.r) && isValidCSSUnit(color.g) && isValidCSSUnit(color.b)) {
       ({ r, g, b } = color);
-      // RGB values now are all in [0, 255] range
-      [r, g, b] = [r, g, b].map((n) => bound01(n, isPercentage(n) ? 100 : 255) * 255);
+      // 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),
   };
 }
@@ -823,15 +804,13 @@ class Color {
   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);
@@ -840,7 +819,7 @@ class Color {
     const self = this;
     /** @type {CP.ColorInput} */
-    self.originalInput = color;
+    self.originalInput = input;
     /** @type {number} */
     self.r = r;
     /** @type {number} */
@@ -881,24 +860,21 @@ class Color {
     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;
   }
@@ -908,7 +884,7 @@ class Color {
    * @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;
   }
@@ -917,12 +893,14 @@ class Color {
    * @returns {CP.RGBA} an {r,g,b,a} object with [0, 255] ranged values
    */
   toRgb() {
-    const {
+    let {
       r, g, b, a,
     } = this;
+    [r, g, b] = [r, g, b].map((n) => roundPart(n * 255 * 100) / 100);
+    a = roundPart(a * 100) / 100;
     return {
-      r, g, b, a: roundPart(a * 100) / 100,
+      r, g, b, a,
     };
   }
@@ -1016,7 +994,7 @@ class Color {
   toHsv() {
     const {
       r, g, b, a,
-    } = this.toRgb();
+    } = this;
     const { h, s, v } = rgbToHsv(r, g, b);
     return {
@@ -1031,7 +1009,7 @@ class Color {
   toHsl() {
     const {
       r, g, b, a,
-    } = this.toRgb();
+    } = this;
     const { h, s, l } = rgbToHsl(r, g, b);
     return {
@@ -1116,6 +1094,7 @@ class Color {
    */
   setAlpha(alpha) {
     const self = this;
+    if (typeof alpha !== 'number') return self;
     self.a = boundAlpha(alpha);
     return self;
   }
@@ -1230,6 +1209,7 @@ ObjectAssign(Color, {
   isOnePointZero,
   isPercentage,
   isValidCSSUnit,
+  isColorName,
   pad2,
   clamp01,
   bound01,
@@ -1247,10 +1227,11 @@ ObjectAssign(Color, {
   hueToRgb,
   hwbToRgb,
   parseIntFromHex,
-  numberInputToObject,
   stringInputToObject,
   inputToRGB,
   roundPart,
+  getElementStyle,
+  setElementStyle,
   ObjectAssign,
 });
@@ -1380,24 +1361,6 @@ const ariaValueText = 'aria-valuetext';
  */
 const ariaValueNow = 'aria-valuenow';
-/**
- * A global namespace for aria-haspopup.
- * @type {string}
- */
-const ariaHasPopup = 'aria-haspopup';
-/**
- * A global namespace for aria-hidden.
- * @type {string}
- */
-const ariaHidden = 'aria-hidden';
-/**
- * A global namespace for aria-labelledby.
- * @type {string}
- */
-const ariaLabelledBy = 'aria-labelledby';
 /**
  * A global namespace for `ArrowDown` key.
  * @type {string} e.which = 40 equivalent
@@ -1524,37 +1487,6 @@ const resizeEvent = 'resize';
  */
 const focusoutEvent = 'focusout';
-// @ts-ignore
-const { userAgentData: uaDATA } = navigator;
-/**
- * A global namespace for `userAgentData` object.
- */
-const userAgentData = uaDATA;
-const { userAgent: userAgentString } = navigator;
-/**
- * A global namespace for `navigator.userAgent` string.
- */
-const userAgent = userAgentString;
-const mobileBrands = /iPhone|iPad|iPod|Android/i;
-let isMobileCheck = false;
-if (userAgentData) {
-  isMobileCheck = userAgentData.brands
-    .some((/** @type {Record<String, any>} */x) => mobileBrands.test(x.brand));
-} else {
-  isMobileCheck = mobileBrands.test(userAgent);
-}
-/**
- * A global `boolean` for mobile detection.
- * @type {boolean}
- */
-const isMobile = isMobileCheck;
 /**
  * Returns the `document.documentElement` or the `<html>` element.
  *
@@ -1739,30 +1671,6 @@ function getElementsByClassName(selector, parent) {
   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.
  *
@@ -1880,12 +1788,11 @@ function normalizeValue(value) {
 }
 /**
- * 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.
@@ -1990,6 +1897,77 @@ function removeClass(element, classNAME) {
  */
 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',
@@ -2017,14 +1995,72 @@ const colorPickerLabels = {
  */
 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';
 /**
@@ -2104,8 +2140,6 @@ const ariaValueMin = 'aria-valuemin';
  */
 const ariaValueMax = 'aria-valuemax';
-const tabIndex = 'tabindex';
 /**
  * Returns all color controls for `ColorPicker`.
  *
@@ -2213,75 +2247,6 @@ function setCSSProperties(element, props) {
   });
 }
-/**
- * @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
@@ -2315,7 +2280,8 @@ function getColorMenu(self, colorsSource, menuClass) {
   optionSize = fit > 5 && isMultiLine ? 1.5 : optionSize;
   const menuHeight = `${(rowCount || 1) * optionSize}rem`;
   const menuHeightHover = `calc(${rowCountHover} * ${optionSize}rem + ${rowCountHover - 1} * ${gap})`;
+  /** @type {HTMLUListElement} */
+  // @ts-ignore -- <UL> is an `HTMLElement`
   const menu = createElement({
     tagName: 'ul',
     className: finalClass,
@@ -2323,7 +2289,7 @@ function getColorMenu(self, colorsSource, menuClass) {
   setAttribute(menu, 'role', 'listbox');
   setAttribute(menu, ariaLabel, menuLabel);
-  if (isScrollable) { // @ts-ignore
+  if (isScrollable) {
     setCSSProperties(menu, {
       '--grid-item-size': `${optionSize}rem`,
       '--grid-fit': fit,
@@ -2334,15 +2300,19 @@ function getColorMenu(self, colorsSource, menuClass) {
   }
   colorsArray.forEach((x) => {
-    const [value, label] = x.trim().split(':');
-    const xRealColor = new Color(value, format).toString();
-    const isActive = xRealColor === getAttribute(input, 'value');
+    let [value, label] = typeof x === 'string' ? x.trim().split(':') : [];
+    if (x instanceof Color) {
+      value = x.toHexString();
+      label = value;
+    }
+    const color = new Color(x instanceof Color ? x : value, format);
+    const isActive = color.toString() === getAttribute(input, 'value');
     const active = isActive ? ' active' : '';
     const option = createElement({
       tagName: 'li',
       className: `color-option${active}`,
-      innerText: `${label || x}`,
+      innerText: `${label || value}`,
     });
     setAttribute(option, tabIndex, '0');
@@ -2351,7 +2321,7 @@ function getColorMenu(self, colorsSource, menuClass) {
     setAttribute(option, ariaSelected, isActive ? 'true' : 'false');
     if (isOptionsMenu) {
-      setElementStyle(option, { backgroundColor: x });
+      setElementStyle(option, { backgroundColor: value });
     }
     menu.append(option);
@@ -2360,55 +2330,10 @@ function getColorMenu(self, colorsSource, menuClass) {
 }
 /**
- * Check if a string is valid JSON string.
- * @param {string} str the string input
- * @returns {boolean} the query result
- */
-function isValidJSON(str) {
-  try {
-    JSON.parse(str);
-  } catch (e) {
-    return false;
-  }
-  return true;
-}
-var version = "0.0.1";
-// @ts-ignore
-const Version = version;
-// ColorPicker GC
-// ==============
-const colorPickerString = 'color-picker';
-const colorPickerSelector = `[data-function="${colorPickerString}"]`;
-const colorPickerParentSelector = `.${colorPickerString},${colorPickerString}`;
-const colorPickerDefaults = {
-  componentLabels: colorPickerLabels,
-  colorLabels: colorNames,
-  format: 'rgb',
-  colorPresets: false,
-  colorKeywords: false,
-};
-// ColorPicker Static Methods
-// ==========================
-/** @type {CP.GetInstance<ColorPicker>} */
-const getColorPickerInstance = (element) => getInstance(element, colorPickerString);
-/** @type {CP.InitCallback<ColorPicker>} */
-const initColorPicker = (element) => new ColorPicker(element);
-// ColorPicker Private Methods
-// ===========================
-/**
- * Generate HTML markup and update instance properties.
- * @param {ColorPicker} self
- */
-function initCallback(self) {
+* Generate HTML markup and update instance properties.
+* @param {CP.ColorPicker} self
+*/
+function setMarkup(self) {
   const {
     input, parent, format, id, componentLabels, colorKeywords, colorPresets,
   } = self;
@@ -2423,9 +2348,7 @@ function initCallback(self) {
   self.color = new Color(color, format);
   // set initial controls dimensions
-  // make the controls smaller on mobile
-  const dropClass = isMobile ? ' mobile' : '';
-  const formatString = format === 'hex' ? hexLabel : format.toUpperCase();
+  const formatString = format === 'hex' ? hexLabel : toUpperCase(format);
   const pickerBtn = createElement({
     id: `picker-btn-${id}`,
@@ -2442,7 +2365,7 @@ function initCallback(self) {
   const pickerDropdown = createElement({
     tagName: 'div',
-    className: `color-dropdown picker${dropClass}`,
+    className: 'color-dropdown picker',
   });
   setAttribute(pickerDropdown, ariaLabelledBy, `picker-btn-${id}`);
   setAttribute(pickerDropdown, 'role', 'group');
@@ -2458,7 +2381,7 @@ function initCallback(self) {
   if (colorKeywords || colorPresets) {
     const presetsDropdown = createElement({
       tagName: 'div',
-      className: `color-dropdown scrollable menu${dropClass}`,
+      className: 'color-dropdown scrollable menu',
     });
     // color presets
@@ -2508,6 +2431,37 @@ function initCallback(self) {
   setAttribute(input, tabIndex, '-1');
 }
+var version = "0.0.2alpha3";
+// @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
@@ -2520,8 +2474,6 @@ function toggleEvents(self, action) {
   fn(input, focusinEvent, self.showPicker);
   fn(pickerToggle, mouseclickEvent, self.togglePicker);
-  fn(input, keydownEvent, self.keyToggle);
   if (menuToggle) {
     fn(menuToggle, mouseclickEvent, self.toggleMenu);
   }
@@ -2559,8 +2511,7 @@ function toggleEventsOnShown(self, action) {
   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);
 }
 /**
@@ -2644,7 +2595,7 @@ class ColorPicker {
     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);
@@ -2691,15 +2642,14 @@ class ColorPicker {
     });
     // 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;
@@ -2708,7 +2658,7 @@ class ColorPicker {
     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
@@ -2737,11 +2687,10 @@ class ColorPicker {
     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
@@ -2829,76 +2778,83 @@ class ColorPicker {
     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%)`,
     });
@@ -2937,7 +2893,7 @@ class ColorPicker {
     const self = this;
     const { activeElement } = getDocument(self.input);
-    if ((isMobile && self.dragElement)
+    if ((e.type === touchmoveEvent && self.dragElement)
       || (activeElement && self.controlKnobs.includes(activeElement))) {
       e.stopPropagation();
       e.preventDefault();
@@ -3048,13 +3004,13 @@ class ColorPicker {
     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;
@@ -3114,10 +3070,11 @@ class ColorPicker {
     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);
@@ -3144,19 +3101,19 @@ class ColorPicker {
     if (![keyArrowUp, keyArrowDown, keyArrowLeft, keyArrowRight].includes(code)) return;
     e.preventDefault();
-    const { format, controlKnobs, visuals } = 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 / (format === 'hsl' ? 100 : 360);
+    const yRatio = offsetHeight / 360;
     if (currentKnob) {
       let offsetX = 0;
       let offsetY = 0;
       if (target === c1) {
-        const xRatio = offsetWidth / (format === 'hsl' ? 360 : 100);
+        const xRatio = offsetWidth / 100;
         if ([keyArrowLeft, keyArrowRight].includes(code)) {
           self.controlPositions.c1x += code === keyArrowRight ? xRatio : -xRatio;
@@ -3206,7 +3163,7 @@ class ColorPicker {
     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;
         }
@@ -3257,9 +3214,7 @@ class ColorPicker {
   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;
@@ -3268,29 +3223,19 @@ class ColorPicker {
     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,
@@ -3317,7 +3262,7 @@ class ColorPicker {
   changeControl2(Y) {
     const self = this;
     const {
-      format, controlPositions, visuals,
+      controlPositions, visuals,
     } = self;
     const { offsetHeight, offsetWidth } = visuals[0];
@@ -3326,26 +3271,17 @@ class ColorPicker {
     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,
@@ -3432,18 +3368,18 @@ class ColorPicker {
   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;
   }
@@ -3451,78 +3387,40 @@ class ColorPicker {
   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}`);
     }
@@ -3617,37 +3515,13 @@ class ColorPicker {
     }
   }
-  /**
-   * 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;
@@ -3668,8 +3542,13 @@ class ColorPicker {
     }
   }
-  /** 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;
@@ -3695,6 +3574,10 @@ class ColorPicker {
       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');
@@ -3708,9 +3591,6 @@ class ColorPicker {
         }, animationDuration);
       }
-      if (!self.isValid) {
-        self.value = self.color.toString();
-      }
       if (!focusPrevented) {
         focus(pickerToggle);
       }
@@ -3759,93 +3639,85 @@ let CPID = 0;
  * `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,
 });
 customElements.define('color-picker', ColorPickerElement);
-export default ColorPickerElement;
+export { ColorPickerElement as default };