@thednp/color-picker 0.0.2-alpha5 → 1.0.1

package/dist/js/color-picker-element.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)
 */
@@ -21,25 +21,6 @@
     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
@@ -775,7 +756,7 @@
         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;
       }
     }
@@ -786,9 +767,6 @@
     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,
@@ -1247,27 +1225,26 @@
   /**
    * 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);
           }
-        }
-      });
+        });
+      }
     });
   }
 
@@ -1275,10 +1252,7 @@
    * 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
@@ -1296,9 +1270,7 @@
     const { size } = oneElementMap;
 
     // register listener with its options
-    if (oneElementMap) {
-      oneElementMap.set(listener, options);
-    }
+    oneElementMap.set(listener, options);
 
     // add listener last
     if (!size) {
@@ -1310,10 +1282,7 @@
    * 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
@@ -1332,6 +1301,7 @@
     if (!oneEventMap || !oneEventMap.size) delete EventRegistry[eventType];
 
     // remove listener last
+    /* istanbul ignore else */
     if (!oneElementMap || !oneElementMap.size) {
       element.removeEventListener(eventType, globalListener, eventOptions);
     }
@@ -1433,12 +1403,6 @@
    */
   const changeEvent = 'change';
 
-  /**
-   * A global namespace for `touchstart` event.
-   * @type {string}
-   */
-  const touchstartEvent = 'touchstart';
-
   /**
    * A global namespace for `touchmove` event.
    * @type {string}
@@ -1446,28 +1410,22 @@
   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.
@@ -1503,27 +1461,6 @@
     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();
@@ -1623,6 +1560,11 @@
     return !Number.isNaN(duration) ? duration : 0;
   }
 
+  /**
+   * A global array of possible `ParentNode`.
+   */
+  const parentNodes = [Document, Element, HTMLElement];
+
   /**
    * A global array with `Element` | `HTMLElement`.
    */
@@ -2266,17 +2208,16 @@
     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' : '';
@@ -2284,7 +2225,7 @@
     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`
@@ -2391,16 +2332,14 @@
       });
 
       // 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({
@@ -2437,9 +2376,7 @@
     setAttribute(input, tabIndex, '-1');
   }
 
-  var version = "0.0.2alpha5";
-
-  // @ts-ignore
+  var version = "1.0.1";
 
   const Version = version;
 
@@ -2459,7 +2396,7 @@
   // ColorPicker Static Methods
   // ==========================
 
-  /** @type {CP.GetInstance<ColorPicker>} */
+  /** @type {CP.GetInstance<ColorPicker, HTMLInputElement>} */
   const getColorPickerInstance = (element) => getInstance(element, colorPickerString);
 
   /** @type {CP.InitCallback<ColorPicker>} */
@@ -2494,17 +2431,12 @@
     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));
@@ -2514,8 +2446,8 @@
       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);
   }
@@ -2534,6 +2466,7 @@
    * @returns {void}
    */
   function removePosition(element) {
+    /* istanbul ignore else */
     if (element) {
       ['bottom', 'top'].forEach((x) => removeClass(element, x));
     }
@@ -2597,7 +2530,6 @@
     constructor(target, config) {
       const self = this;
       /** @type {HTMLInputElement} */
-      // @ts-ignore
       const input = querySelector(target);
 
       // invalidate
@@ -2608,7 +2540,6 @@
       if (!parent) throw new TypeError('ColorPicker requires a specific markup to work.');
 
       /** @type {HTMLElement} */
-      // @ts-ignore
       self.parent = parent;
 
       /** @type {number} */
@@ -2636,6 +2567,7 @@
       } = 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) {
@@ -2652,7 +2584,7 @@
         ? 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);
@@ -2661,14 +2593,14 @@
       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)) {
@@ -2701,26 +2633,20 @@
       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
@@ -2799,6 +2725,7 @@
       let colorName;
 
       // determine color appearance
+      /* istanbul ignore else */
       if (lightness === 100 && saturation === 0) {
         colorName = colorLabels.white;
       } else if (lightness === 0) {
@@ -2872,7 +2799,6 @@
      * @this {ColorPicker}
      */
     handleFocusOut({ relatedTarget }) {
-      // @ts-ignore
       if (relatedTarget && !this.parent.contains(relatedTarget)) {
         this.hide(true);
       }
@@ -2899,13 +2825,14 @@
       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();
     }
 
     /**
@@ -2915,7 +2842,6 @@
      */
     menuKeyHandler(e) {
       const { target, code } = e;
-      // @ts-ignore
       const { previousElementSibling, nextElementSibling, parentElement } = target;
       const isColorOptionsMenu = parentElement && hasClass(parentElement, 'color-options');
       const allSiblings = [...parentElement.children];
@@ -2954,20 +2880,20 @@
 
     /**
      * 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,
@@ -2979,7 +2905,9 @@
 
       self.update();
 
+      /* istanbul ignore else */
       if (currentActive !== target) {
+        /* istanbul ignore else */
         if (currentActive) {
           removeClass(currentActive, 'active');
           removeAttribute(currentActive, ariaSelected);
@@ -2997,15 +2925,13 @@
 
     /**
      * 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;
@@ -3013,11 +2939,10 @@
       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);
@@ -3041,7 +2966,7 @@
 
     /**
      * The `ColorPicker` *touchend* / *mouseup* events listener for control knobs.
-     * @param {TouchEvent} e
+     * @param {PointerEvent} e
      * @this {ColorPicker}
      */
     pointerUp({ target }) {
@@ -3050,9 +2975,8 @@
       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);
       }
@@ -3062,25 +2986,20 @@
 
     /**
      * 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);
@@ -3114,13 +3033,16 @@
       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)) {
@@ -3166,6 +3088,7 @@
       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) {
@@ -3480,6 +3403,7 @@
       const hue = roundPart(hsl.h * 360);
       let newColor;
 
+      /* istanbul ignore else */
       if (format === 'hex') {
         newColor = self.color.toHexString(true);
         i1.value = self.hex;
@@ -3580,15 +3504,15 @@
         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);
@@ -3601,7 +3525,7 @@
           focus(pickerToggle);
         }
         setAttribute(input, tabIndex, '-1');
-        if (menuToggle) {
+        if (relatedBtn === menuToggle) {
           setAttribute(menuToggle, tabIndex, '-1');
         }
       }
@@ -3639,14 +3563,76 @@
     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>
@@ -3665,61 +3651,70 @@
     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,
   });