@thednp/color-picker 0.0.2-alpha5 → 1.0.1

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

@@ -1,5 +1,5 @@
 /*!
-* ColorPickerElement v0.0.2alpha5 (http://thednp.github.io/color-picker)
+* ColorPickerElement v1.0.1 (http://thednp.github.io/color-picker)
 * Copyright 2022 © thednp
 * Licensed under MIT (https://github.com/thednp/color-picker/blob/master/LICENSE)
 */
@@ -15,25 +15,6 @@ function getDocument(node) {
   return window.document;
 }
 
-/**
- * A global array of possible `ParentNode`.
- */
-const parentNodes = [Document, Element, HTMLElement];
-
-/**
- * Shortcut for `HTMLElement.getElementsByTagName` method. Some `Node` elements
- * like `ShadowRoot` do not support `getElementsByTagName`.
- *
- * @param {string} selector the tag name
- * @param {(HTMLElement | Element | Document)=} parent optional Element to look into
- * @return {HTMLCollectionOf<HTMLElement | Element>} the 'HTMLCollection'
- */
-function getElementsByTagName(selector, parent) {
-  const lookUp = parent && parentNodes
-    .some((x) => parent instanceof x) ? parent : getDocument();
-  return lookUp.getElementsByTagName(selector);
-}
-
 /**
  * Shortcut for `Object.assign()` static method.
  * @param  {Record<string, any>} obj a target object
@@ -769,7 +750,7 @@ function inputToRGB(input) {
       format = 'hwb';
     }
     if (isValidCSSUnit(color.a)) {
-      a = color.a; // @ts-ignore -- `parseFloat` works with numbers too
+      a = color.a;
       a = isPercentage(`${a}`) || parseFloat(a) > 1 ? bound01(a, 100) : a;
     }
   }
@@ -780,9 +761,6 @@ function inputToRGB(input) {
   return {
     ok,
     format,
-    // r: Math.min(255, Math.max(rgb.r, 0)),
-    // g: Math.min(255, Math.max(rgb.g, 0)),
-    // b: Math.min(255, Math.max(rgb.b, 0)),
     r: rgb.r,
     g: rgb.g,
     b: rgb.b,
@@ -1241,27 +1219,26 @@ const EventRegistry = {};
 /**
  * The global event listener.
  *
- * @this {Element | HTMLElement | Window | Document}
- * @param {Event} e
- * @returns {void}
+ * @type {EventListener}
+ * @this {EventTarget}
  */
 function globalListener(e) {
   const that = this;
   const { type } = e;
-  const oneEvMap = EventRegistry[type] ? [...EventRegistry[type]] : [];
 
-  oneEvMap.forEach((elementsMap) => {
+  [...EventRegistry[type]].forEach((elementsMap) => {
     const [element, listenersMap] = elementsMap;
-    [...listenersMap].forEach((listenerMap) => {
-      if (element === that) {
+    /* istanbul ignore else */
+    if (element === that) {
+      [...listenersMap].forEach((listenerMap) => {
         const [listener, options] = listenerMap;
         listener.apply(element, [e]);
 
         if (options && options.once) {
           removeListener(element, type, listener, options);
         }
-      }
-    });
+      });
+    }
   });
 }
 
@@ -1269,10 +1246,7 @@ function globalListener(e) {
  * Register a new listener with its options and attach the `globalListener`
  * to the target if this is the first listener.
  *
- * @param {Element | HTMLElement | Window | Document} element
- * @param {string} eventType
- * @param {EventListenerObject['handleEvent']} listener
- * @param {AddEventListenerOptions=} options
+ * @type {Listener.ListenerAction<EventTarget>}
  */
 const addListener = (element, eventType, listener, options) => {
   // get element listeners first
@@ -1290,9 +1264,7 @@ const addListener = (element, eventType, listener, options) => {
   const { size } = oneElementMap;
 
   // register listener with its options
-  if (oneElementMap) {
-    oneElementMap.set(listener, options);
-  }
+  oneElementMap.set(listener, options);
 
   // add listener last
   if (!size) {
@@ -1304,10 +1276,7 @@ const addListener = (element, eventType, listener, options) => {
  * Remove a listener from registry and detach the `globalListener`
  * if no listeners are found in the registry.
  *
- * @param {Element | HTMLElement | Window | Document} element
- * @param {string} eventType
- * @param {EventListenerObject['handleEvent']} listener
- * @param {AddEventListenerOptions=} options
+ * @type {Listener.ListenerAction<EventTarget>}
  */
 const removeListener = (element, eventType, listener, options) => {
   // get listener first
@@ -1326,6 +1295,7 @@ const removeListener = (element, eventType, listener, options) => {
   if (!oneEventMap || !oneEventMap.size) delete EventRegistry[eventType];
 
   // remove listener last
+  /* istanbul ignore else */
   if (!oneElementMap || !oneElementMap.size) {
     element.removeEventListener(eventType, globalListener, eventOptions);
   }
@@ -1427,12 +1397,6 @@ const keydownEvent = 'keydown';
  */
 const changeEvent = 'change';
 
-/**
- * A global namespace for `touchstart` event.
- * @type {string}
- */
-const touchstartEvent = 'touchstart';
-
 /**
  * A global namespace for `touchmove` event.
  * @type {string}
@@ -1440,28 +1404,22 @@ const touchstartEvent = 'touchstart';
 const touchmoveEvent = 'touchmove';
 
 /**
- * A global namespace for `touchend` event.
+ * A global namespace for `pointerdown` event.
  * @type {string}
  */
-const touchendEvent = 'touchend';
+const pointerdownEvent = 'pointerdown';
 
 /**
- * A global namespace for `mousedown` event.
+ * A global namespace for `pointermove` event.
  * @type {string}
  */
-const mousedownEvent = 'mousedown';
+const pointermoveEvent = 'pointermove';
 
 /**
- * A global namespace for `mousemove` event.
+ * A global namespace for `pointerup` event.
  * @type {string}
  */
-const mousemoveEvent = 'mousemove';
-
-/**
- * A global namespace for `mouseup` event.
- * @type {string}
- */
-const mouseupEvent = 'mouseup';
+const pointerupEvent = 'pointerup';
 
 /**
  * A global namespace for `scroll` event.
@@ -1497,27 +1455,6 @@ function getDocumentElement(node) {
   return getDocument(node).documentElement;
 }
 
-/**
- * Returns the `Window` object of a target node.
- * @see https://github.com/floating-ui/floating-ui
- *
- * @param {(Node | HTMLElement | Element | Window)=} node target node
- * @returns {globalThis}
- */
-function getWindow(node) {
-  if (node == null) {
-    return window;
-  }
-
-  if (!(node instanceof Window)) {
-    const { ownerDocument } = node;
-    return ownerDocument ? ownerDocument.defaultView || window : window;
-  }
-
-  // @ts-ignore
-  return node;
-}
-
 let elementUID = 0;
 let elementMapUID = 0;
 const elementIDMap = new Map();
@@ -1617,6 +1554,11 @@ function getElementTransitionDuration(element) {
   return !Number.isNaN(duration) ? duration : 0;
 }
 
+/**
+ * A global array of possible `ParentNode`.
+ */
+const parentNodes = [Document, Element, HTMLElement];
+
 /**
  * A global array with `Element` | `HTMLElement`.
  */
@@ -2260,17 +2202,16 @@ function getColorMenu(self, colorsSource, menuClass) {
   const isOptionsMenu = menuClass === 'color-options';
   const isPalette = colorsSource instanceof ColorPalette;
   const menuLabel = isOptionsMenu ? presetsLabel : defaultsLabel;
-  let colorsArray = isPalette ? colorsSource.colors : colorsSource;
-  colorsArray = colorsArray instanceof Array ? colorsArray : [];
+  const colorsArray = isPalette ? colorsSource.colors : colorsSource;
   const colorsCount = colorsArray.length;
   const { lightSteps } = isPalette ? colorsSource : { lightSteps: null };
-  const fit = lightSteps || [9, 10].find((x) => colorsCount > x * 2 && !(colorsCount % x)) || 5;
+  const fit = lightSteps || [9, 10].find((x) => colorsCount >= x * 2 && !(colorsCount % x)) || 5;
   const isMultiLine = isOptionsMenu && colorsCount > fit;
   let rowCountHover = 2;
-  rowCountHover = isMultiLine && colorsCount >= fit * 2 ? 3 : rowCountHover;
-  rowCountHover = colorsCount >= fit * 3 ? 4 : rowCountHover;
-  rowCountHover = colorsCount >= fit * 4 ? 5 : rowCountHover;
-  const rowCount = rowCountHover - (colorsCount < fit * 3 ? 1 : 2);
+  rowCountHover = isMultiLine && colorsCount > fit * 2 ? 3 : rowCountHover;
+  rowCountHover = isMultiLine && colorsCount > fit * 3 ? 4 : rowCountHover;
+  rowCountHover = isMultiLine && colorsCount > fit * 4 ? 5 : rowCountHover;
+  const rowCount = rowCountHover - (colorsCount <= fit * 3 ? 1 : 2);
   const isScrollable = isMultiLine && colorsCount > rowCount * fit;
   let finalClass = menuClass;
   finalClass += isScrollable ? ' scrollable' : '';
@@ -2278,7 +2219,7 @@ function getColorMenu(self, colorsSource, menuClass) {
   const gap = isMultiLine ? '1px' : '0.25rem';
   let optionSize = isMultiLine ? 1.75 : 2;
   optionSize = fit > 5 && isMultiLine ? 1.5 : optionSize;
-  const menuHeight = `${(rowCount || 1) * optionSize}rem`;
+  const menuHeight = `${rowCount * optionSize}rem`;
   const menuHeightHover = `calc(${rowCountHover} * ${optionSize}rem + ${rowCountHover - 1} * ${gap})`;
   /** @type {HTMLUListElement} */
   // @ts-ignore -- <UL> is an `HTMLElement`
@@ -2385,16 +2326,14 @@ function setMarkup(self) {
     });
 
     // color presets
-    if ((colorPresets instanceof Array && colorPresets.length)
-      || (colorPresets instanceof ColorPalette && colorPresets.colors)) {
-      const presetsMenu = getColorMenu(self, colorPresets, 'color-options');
-      presetsDropdown.append(presetsMenu);
+    if (colorPresets) {
+      presetsDropdown.append(getColorMenu(self, colorPresets, 'color-options'));
     }
 
     // explicit defaults [reset, initial, inherit, transparent, currentColor]
+    // also custom defaults [default: #069, complementary: #930]
     if (colorKeywords && colorKeywords.length) {
-      const keywordsMenu = getColorMenu(self, colorKeywords, 'color-defaults');
-      presetsDropdown.append(keywordsMenu);
+      presetsDropdown.append(getColorMenu(self, colorKeywords, 'color-defaults'));
     }
 
     const presetsBtn = createElement({
@@ -2431,9 +2370,7 @@ function setMarkup(self) {
   setAttribute(input, tabIndex, '-1');
 }
 
-var version = "0.0.2alpha5";
-
-// @ts-ignore
+var version = "1.0.1";
 
 const Version = version;
 
@@ -2453,7 +2390,7 @@ const colorPickerDefaults = {
 // ColorPicker Static Methods
 // ==========================
 
-/** @type {CP.GetInstance<ColorPicker>} */
+/** @type {CP.GetInstance<ColorPicker, HTMLInputElement>} */
 const getColorPickerInstance = (element) => getInstance(element, colorPickerString);
 
 /** @type {CP.InitCallback<ColorPicker>} */
@@ -2488,17 +2425,12 @@ function toggleEventsOnShown(self, action) {
   const fn = action ? addListener : removeListener;
   const { input, colorMenu, parent } = self;
   const doc = getDocument(input);
-  const win = getWindow(input);
-  const pointerEvents = `on${touchstartEvent}` in doc
-    ? { down: touchstartEvent, move: touchmoveEvent, up: touchendEvent }
-    : { down: mousedownEvent, move: mousemoveEvent, up: mouseupEvent };
+  const win = doc.defaultView;
 
-  fn(self.controls, pointerEvents.down, self.pointerDown);
+  fn(self.controls, pointerdownEvent, self.pointerDown);
   self.controlKnobs.forEach((x) => fn(x, keydownEvent, self.handleKnobs));
 
-  // @ts-ignore -- this is `Window`
   fn(win, scrollEvent, self.handleScroll);
-  // @ts-ignore -- this is `Window`
   fn(win, resizeEvent, self.update);
 
   [input, ...self.inputs].forEach((x) => fn(x, changeEvent, self.changeHandler));
@@ -2508,8 +2440,8 @@ function toggleEventsOnShown(self, action) {
     fn(colorMenu, keydownEvent, self.menuKeyHandler);
   }
 
-  fn(doc, pointerEvents.move, self.pointerMove);
-  fn(doc, pointerEvents.up, self.pointerUp);
+  fn(doc, pointermoveEvent, self.pointerMove);
+  fn(doc, pointerupEvent, self.pointerUp);
   fn(parent, focusoutEvent, self.handleFocusOut);
   fn(doc, keyupEvent, self.handleDismiss);
 }
@@ -2528,6 +2460,7 @@ function firePickerChange(self) {
  * @returns {void}
  */
 function removePosition(element) {
+  /* istanbul ignore else */
   if (element) {
     ['bottom', 'top'].forEach((x) => removeClass(element, x));
   }
@@ -2591,7 +2524,6 @@ class ColorPicker {
   constructor(target, config) {
     const self = this;
     /** @type {HTMLInputElement} */
-    // @ts-ignore
     const input = querySelector(target);
 
     // invalidate
@@ -2602,7 +2534,6 @@ class ColorPicker {
     if (!parent) throw new TypeError('ColorPicker requires a specific markup to work.');
 
     /** @type {HTMLElement} */
-    // @ts-ignore
     self.parent = parent;
 
     /** @type {number} */
@@ -2630,6 +2561,7 @@ class ColorPicker {
     } = normalizeOptions(this.isCE ? parent : input, colorPickerDefaults, config || {});
 
     let translatedColorLabels = colorNames;
+    /* istanbul ignore else */
     if (colorLabels instanceof Array && colorLabels.length === 17) {
       translatedColorLabels = colorLabels;
     } else if (colorLabels && colorLabels.split(',').length === 17) {
@@ -2646,7 +2578,7 @@ class ColorPicker {
       ? JSON.parse(componentLabels) : componentLabels;
 
     /** @type {Record<string, string>} */
-    self.componentLabels = ObjectAssign(colorPickerLabels, tempComponentLabels);
+    self.componentLabels = ObjectAssign({ ...colorPickerLabels }, tempComponentLabels);
 
     /** @type {Color} */
     self.color = new Color(input.value || '#fff', format);
@@ -2655,14 +2587,14 @@ class ColorPicker {
     self.format = format;
 
     // set colour defaults
-    if (colorKeywords instanceof Array) {
+    if (colorKeywords instanceof Array && colorKeywords.length) {
       self.colorKeywords = colorKeywords;
     } else if (typeof colorKeywords === 'string' && colorKeywords.length) {
       self.colorKeywords = colorKeywords.split(',').map((x) => x.trim());
     }
 
     // set colour presets
-    if (colorPresets instanceof Array) {
+    if (colorPresets instanceof Array && colorPresets.length) {
       self.colorPresets = colorPresets;
     } else if (typeof colorPresets === 'string' && colorPresets.length) {
       if (isValidJSON(colorPresets)) {
@@ -2695,26 +2627,20 @@ class ColorPicker {
     const [colorPicker, colorMenu] = getElementsByClassName('color-dropdown', parent);
     // set main elements
     /** @type {HTMLElement} */
-    // @ts-ignore
     self.pickerToggle = querySelector('.picker-toggle', parent);
     /** @type {HTMLElement} */
-    // @ts-ignore
     self.menuToggle = querySelector('.menu-toggle', parent);
     /** @type {HTMLElement} */
-    // @ts-ignore
     self.colorPicker = colorPicker;
     /** @type {HTMLElement} */
-    // @ts-ignore
     self.colorMenu = colorMenu;
     /** @type {HTMLInputElement[]} */
-    // @ts-ignore
     self.inputs = [...getElementsByClassName('color-input', parent)];
     const [controls] = getElementsByClassName('color-controls', parent);
     self.controls = controls;
     /** @type {(HTMLElement | Element)[]} */
     self.controlKnobs = [...getElementsByClassName('knob', controls)];
     /** @type {(HTMLElement)[]} */
-    // @ts-ignore
     self.visuals = [...getElementsByClassName('visual-control', controls)];
 
     // update colour picker controls, inputs and visuals
@@ -2793,6 +2719,7 @@ class ColorPicker {
     let colorName;
 
     // determine color appearance
+    /* istanbul ignore else */
     if (lightness === 100 && saturation === 0) {
       colorName = colorLabels.white;
     } else if (lightness === 0) {
@@ -2866,7 +2793,6 @@ class ColorPicker {
    * @this {ColorPicker}
    */
   handleFocusOut({ relatedTarget }) {
-    // @ts-ignore
     if (relatedTarget && !this.parent.contains(relatedTarget)) {
       this.hide(true);
     }
@@ -2893,13 +2819,14 @@ class ColorPicker {
     const self = this;
     const { activeElement } = getDocument(self.input);
 
-    if ((e.type === touchmoveEvent && self.dragElement)
+    self.updateDropdownPosition();
+
+    /* istanbul ignore next */
+    if (([pointermoveEvent, touchmoveEvent].includes(e.type) && self.dragElement)
       || (activeElement && self.controlKnobs.includes(activeElement))) {
       e.stopPropagation();
       e.preventDefault();
     }
-
-    self.updateDropdownPosition();
   }
 
   /**
@@ -2909,7 +2836,6 @@ class ColorPicker {
    */
   menuKeyHandler(e) {
     const { target, code } = e;
-    // @ts-ignore
     const { previousElementSibling, nextElementSibling, parentElement } = target;
     const isColorOptionsMenu = parentElement && hasClass(parentElement, 'color-options');
     const allSiblings = [...parentElement.children];
@@ -2948,20 +2874,20 @@ class ColorPicker {
 
   /**
    * The `ColorPicker` click event listener for the colour menu presets / defaults.
-   * @param {Partial<Event>} e
+   * @param {Event} e
    * @this {ColorPicker}
    */
   menuClickHandler(e) {
     const self = this;
-    /** @type {*} */
     const { target } = e;
     const { colorMenu } = self;
     const newOption = (getAttribute(target, 'data-value') || '').trim();
     // invalidate for targets other than color options
     if (!newOption.length) return;
     const currentActive = querySelector('li.active', colorMenu);
-    let newColor = nonColors.includes(newOption) ? 'white' : newOption;
-    newColor = newOption === 'transparent' ? 'rgba(0,0,0,0)' : newOption;
+    let newColor = newOption;
+    newColor = nonColors.includes(newColor) ? 'white' : newColor;
+    newColor = newColor === 'transparent' ? 'rgba(0,0,0,0)' : newColor;
 
     const {
       r, g, b, a,
@@ -2973,7 +2899,9 @@ class ColorPicker {
 
     self.update();
 
+    /* istanbul ignore else */
     if (currentActive !== target) {
+      /* istanbul ignore else */
       if (currentActive) {
         removeClass(currentActive, 'active');
         removeAttribute(currentActive, ariaSelected);
@@ -2991,15 +2919,13 @@ class ColorPicker {
 
   /**
    * The `ColorPicker` *touchstart* / *mousedown* events listener for control knobs.
-   * @param {TouchEvent} e
+   * @param {PointerEvent} e
    * @this {ColorPicker}
    */
   pointerDown(e) {
     const self = this;
     /** @type {*} */
-    const {
-      type, target, touches, pageX, pageY,
-    } = e;
+    const { target, pageX, pageY } = e;
     const { colorMenu, visuals, controlKnobs } = self;
     const [v1, v2, v3] = visuals;
     const [c1, c2, c3] = controlKnobs;
@@ -3007,11 +2933,10 @@ class ColorPicker {
     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 - html.scrollLeft - visualRect.left;
-    const offsetY = Y - html.scrollTop - visualRect.top;
+    const offsetX = pageX - html.scrollLeft - visualRect.left;
+    const offsetY = pageY - html.scrollTop - visualRect.top;
 
+    /* istanbul ignore else */
     if (target === v1 || target === c1) {
       self.dragElement = visual;
       self.changeControl1(offsetX, offsetY);
@@ -3035,7 +2960,7 @@ class ColorPicker {
 
   /**
    * The `ColorPicker` *touchend* / *mouseup* events listener for control knobs.
-   * @param {TouchEvent} e
+   * @param {PointerEvent} e
    * @this {ColorPicker}
    */
   pointerUp({ target }) {
@@ -3044,9 +2969,8 @@ class ColorPicker {
     const doc = getDocument(parent);
     const currentOpen = querySelector(`${colorPickerParentSelector}.open`, doc) !== null;
     const selection = doc.getSelection();
-    // @ts-ignore
+
     if (!self.dragElement && !selection.toString().length
-      // @ts-ignore
       && !parent.contains(target)) {
       self.hide(currentOpen);
     }
@@ -3056,25 +2980,20 @@ class ColorPicker {
 
   /**
    * The `ColorPicker` *touchmove* / *mousemove* events listener for control knobs.
-   * @param {TouchEvent} e
+   * @param {PointerEvent} e
    */
   pointerMove(e) {
     const self = this;
     const { dragElement, visuals } = self;
     const [v1, v2, v3] = visuals;
-    const {
-      // @ts-ignore
-      type, touches, pageX, pageY,
-    } = e;
+    const { pageX, pageY } = e;
 
     if (!dragElement) return;
 
     const controlRect = getBoundingClientRect(dragElement);
     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;
+    const offsetX = pageX - win.scrollLeft - controlRect.left;
+    const offsetY = pageY - win.scrollTop - controlRect.top;
 
     if (dragElement === v1) {
       self.changeControl1(offsetX, offsetY);
@@ -3108,13 +3027,16 @@ class ColorPicker {
     const currentKnob = controlKnobs.find((x) => x === activeElement);
     const yRatio = offsetHeight / 360;
 
+    /* istanbul ignore else */
     if (currentKnob) {
       let offsetX = 0;
       let offsetY = 0;
 
+      /* istanbul ignore else */
       if (target === c1) {
         const xRatio = offsetWidth / 100;
 
+        /* istanbul ignore else */
         if ([keyArrowLeft, keyArrowRight].includes(code)) {
           self.controlPositions.c1x += code === keyArrowRight ? xRatio : -xRatio;
         } else if ([keyArrowUp, keyArrowDown].includes(code)) {
@@ -3160,6 +3082,7 @@ class ColorPicker {
     const isNonColorValue = self.hasNonColor && nonColors.includes(currentValue);
     const alpha = i4 ? v4 : (1 - controlPositions.c3y / offsetHeight);
 
+    /* istanbul ignore else */
     if (activeElement === input || (activeElement && inputs.includes(activeElement))) {
       if (activeElement === input) {
         if (isNonColorValue) {
@@ -3474,6 +3397,7 @@ class ColorPicker {
     const hue = roundPart(hsl.h * 360);
     let newColor;
 
+    /* istanbul ignore else */
     if (format === 'hex') {
       newColor = self.color.toHexString(true);
       i1.value = self.hex;
@@ -3574,15 +3498,15 @@ class ColorPicker {
       const relatedBtn = openPicker ? pickerToggle : menuToggle;
       const animationDuration = openDropdown && getElementTransitionDuration(openDropdown);
 
-      // if (!self.isValid) {
       self.value = self.color.toString(true);
-      // }
 
+      /* istanbul ignore else */
       if (openDropdown) {
         removeClass(openDropdown, 'show');
         setAttribute(relatedBtn, ariaExpanded, 'false');
         setTimeout(() => {
           removePosition(openDropdown);
+          /* istanbul ignore else */
           if (!querySelector('.show', parent)) {
             removeClass(parent, 'open');
             toggleEventsOnShown(self);
@@ -3595,7 +3519,7 @@ class ColorPicker {
         focus(pickerToggle);
       }
       setAttribute(input, tabIndex, '-1');
-      if (menuToggle) {
+      if (relatedBtn === menuToggle) {
         setAttribute(menuToggle, tabIndex, '-1');
       }
     }
@@ -3633,14 +3557,76 @@ ObjectAssign(ColorPicker, {
   getBoundingClientRect,
 });
 
+/**
+ * A small utility to toggle `ColorPickerElement` attributes
+ * when `connectedCallback` or `disconnectedCallback` methods
+ * are called and helps the instance keep its value and settings instact.
+ *
+ * @param {CP.ColorPickerElement} self ColorPickerElement instance
+ * @param {Function=} callback when `true`, attributes are added
+ *
+ * @example
+ * const attributes = [
+ *   // essentials
+ *   'value', 'format',
+ *   // presets menus
+ *   'color-presets', 'color-keywords',
+ *   // labels
+ *   'color-labels', 'component-labels',
+ * ];
+ */
+function toggleCEAttr(self, callback) {
+  if (callback) {
+    const { input, colorPicker } = self;
+
+    const {
+      value, format, colorPresets, colorKeywords, componentLabels, colorLabels,
+    } = colorPicker;
+
+    const { id, placeholder } = input;
+
+    setAttribute(self, 'data-id', id);
+    setAttribute(self, 'data-value', value);
+    setAttribute(self, 'data-format', format);
+    setAttribute(self, 'data-placeholder', placeholder);
+
+    if (ObjectKeys(colorPickerLabels).some((l) => colorPickerLabels[l] !== componentLabels[l])) {
+      setAttribute(self, 'data-component-labels', JSON.stringify(componentLabels));
+    }
+    if (!colorNames.every((c) => c === colorLabels[c])) {
+      setAttribute(self, 'data-color-labels', colorNames.map((n) => colorLabels[n]).join(','));
+    }
+    if (colorPresets instanceof ColorPalette) {
+      const { hue, hueSteps, lightSteps } = colorPresets;
+      setAttribute(self, 'data-color-presets', JSON.stringify({ hue, hueSteps, lightSteps }));
+    }
+    if (Array.isArray(colorPresets) && colorPresets.length) {
+      setAttribute(self, 'data-color-presets', colorPresets.join(','));
+    }
+    if (colorKeywords) {
+      setAttribute(self, 'data-color-keywords', colorKeywords.join(','));
+    }
+    setTimeout(callback, 0);
+  } else {
+    // keep id
+    // removeAttribute(self, 'data-id');
+    removeAttribute(self, 'data-value');
+    removeAttribute(self, 'data-format');
+    removeAttribute(self, 'data-placeholder');
+    removeAttribute(self, 'data-component-labels');
+    removeAttribute(self, 'data-color-labels');
+    removeAttribute(self, 'data-color-presets');
+    removeAttribute(self, 'data-color-keywords');
+  }
+}
+
 let CPID = 0;
 
 /**
  * `ColorPickerElement` Web Component.
  * @example
  * <label for="UNIQUE_ID">Label</label>
- * <color-picker>
- *   <input id="UNIQUE_ID" value="red" format="hex" class="color-preview btn-appearance">
+ * <color-picker data-id="UNIQUE_ID" data-value="red" data-format="hex">
  * </color-picker>
  * // or
  * <label for="UNIQUE_ID">Label</label>
@@ -3659,61 +3645,70 @@ class ColorPickerElement extends HTMLElement {
   get value() { return this.input && this.input.value; }
 
   connectedCallback() {
-    if (this.input) return;
+    const self = this;
+    if (self.input) return;
 
-    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');
+    let id = getAttribute(self, 'data-id');
+    const value = getAttribute(self, 'data-value') || '#fff';
+    const format = getAttribute(self, 'data-format') || 'rgb';
+    const placeholder = getAttribute(self, 'data-placeholder') || '';
 
     if (!id) {
       id = `color-picker-${format}-${CPID}`;
       CPID += 1;
     }
 
-    if (!input) {
-      input = createElement({
-        tagName: 'input',
-        type: 'text',
-        className: 'color-preview btn-appearance',
-      });
+    const input = createElement({
+      tagName: 'input',
+      type: 'text',
+      className: 'color-preview btn-appearance',
+    });
+
+    setAttribute(input, 'id', id);
+    setAttribute(input, 'name', id);
+    setAttribute(input, 'autocomplete', 'off');
+    setAttribute(input, 'spellcheck', 'false');
+    setAttribute(input, 'value', value);
+    setAttribute(input, 'placeholder', placeholder);
+    self.append(input);
 
-      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;
+    self.input = input;
 
-    // @ts-ignore - `HTMLInputElement` is `HTMLElement`
-    this.colorPicker = new ColorPicker(input);
+    self.colorPicker = new ColorPicker(input);
 
-    // @ts-ignore - `shadowRoot` is defined in the constructor
-    this.shadowRoot.append(createElement('slot'));
+    self.shadowRoot.append(createElement('slot'));
+
+    // remove Attributes
+    toggleCEAttr(self);
   }
 
   /** @this {ColorPickerElement} */
   disconnectedCallback() {
-    const { input, colorPicker, shadowRoot } = this;
-    if (colorPicker) colorPicker.dispose();
-    if (input) input.remove();
-    if (shadowRoot) shadowRoot.innerHTML = '';
-
-    ObjectAssign(this, {
-      colorPicker: undefined,
-      input: undefined,
-    });
+    const self = this;
+    const { input, colorPicker, shadowRoot } = self;
+
+    const callback = () => {
+      // remove markup
+      input.remove();
+      colorPicker.dispose();
+      shadowRoot.innerHTML = '';
+
+      ObjectAssign(self, {
+        colorPicker: undefined,
+        input: undefined,
+      });
+    };
+
+    // re-add Attributes
+    toggleCEAttr(self, callback);
   }
 }
 
 ObjectAssign(ColorPickerElement, {
   Color,
   ColorPicker,
-  ColorPalette, // @ts-ignore
+  ColorPalette,
   getInstance: ColorPicker.getInstance,
   Version,
 });