@thednp/color-picker 0.0.1-alpha1 → 0.0.1

package/src/js/color-picker.js

@@ -1,7 +1,12 @@
 import { addListener, removeListener } from 'event-listener.js';
 
+import ariaDescription from 'shorter-js/src/strings/ariaDescription';
+// import ariaLabel from 'shorter-js/src/strings/ariaLabel';
 import ariaSelected from 'shorter-js/src/strings/ariaSelected';
 import ariaExpanded from 'shorter-js/src/strings/ariaExpanded';
+import ariaValueText from 'shorter-js/src/strings/ariaValueText';
+import ariaValueNow from 'shorter-js/src/strings/ariaValueNow';
+import ariaHasPopup from 'shorter-js/src/strings/ariaHasPopup';
 import ariaHidden from 'shorter-js/src/strings/ariaHidden';
 import ariaLabelledBy from 'shorter-js/src/strings/ariaLabelledBy';
 import keyArrowDown from 'shorter-js/src/strings/keyArrowDown';
@@ -11,62 +16,82 @@ import keyArrowRight from 'shorter-js/src/strings/keyArrowRight';
 import keyEnter from 'shorter-js/src/strings/keyEnter';
 import keySpace from 'shorter-js/src/strings/keySpace';
 import keyEscape from 'shorter-js/src/strings/keyEscape';
+import focusinEvent from 'shorter-js/src/strings/focusinEvent';
+import mouseclickEvent from 'shorter-js/src/strings/mouseclickEvent';
+import keydownEvent from 'shorter-js/src/strings/keydownEvent';
+import changeEvent from 'shorter-js/src/strings/changeEvent';
+import touchstartEvent from 'shorter-js/src/strings/touchstartEvent';
+import touchmoveEvent from 'shorter-js/src/strings/touchmoveEvent';
+import touchendEvent from 'shorter-js/src/strings/touchendEvent';
+import mousedownEvent from 'shorter-js/src/strings/mousedownEvent';
+import mousemoveEvent from 'shorter-js/src/strings/mousemoveEvent';
+import mouseupEvent from 'shorter-js/src/strings/mouseupEvent';
+import scrollEvent from 'shorter-js/src/strings/scrollEvent';
+import keyupEvent from 'shorter-js/src/strings/keyupEvent';
+import resizeEvent from 'shorter-js/src/strings/resizeEvent';
+import focusoutEvent from 'shorter-js/src/strings/focusoutEvent';
 
 import isMobile from 'shorter-js/src/boolean/isMobile';
+import getDocument from 'shorter-js/src/get/getDocument';
+import getDocumentElement from 'shorter-js/src/get/getDocumentElement';
+import getWindow from 'shorter-js/src/get/getWindow';
+import getElementStyle from 'shorter-js/src/get/getElementStyle';
 import getUID from 'shorter-js/src/get/getUID';
 import getBoundingClientRect from 'shorter-js/src/get/getBoundingClientRect';
+import getElementTransitionDuration from 'shorter-js/src/get/getElementTransitionDuration';
 import querySelector from 'shorter-js/src/selectors/querySelector';
-import querySelectorAll from 'shorter-js/src/selectors/querySelectorAll';
 import closest from 'shorter-js/src/selectors/closest';
+import getElementsByClassName from 'shorter-js/src/selectors/getElementsByClassName';
 import createElement from 'shorter-js/src/misc/createElement';
 import createElementNS from 'shorter-js/src/misc/createElementNS';
 import dispatchEvent from 'shorter-js/src/misc/dispatchEvent';
 import ObjectAssign from 'shorter-js/src/misc/ObjectAssign';
 import Data, { getInstance } from 'shorter-js/src/misc/data';
+import setElementStyle from 'shorter-js/src/misc/setElementStyle';
+import normalizeOptions from 'shorter-js/src/misc/normalizeOptions';
+import reflow from 'shorter-js/src/misc/reflow';
+import focus from 'shorter-js/src/misc/focus';
 import hasClass from 'shorter-js/src/class/hasClass';
 import addClass from 'shorter-js/src/class/addClass';
 import removeClass from 'shorter-js/src/class/removeClass';
-import hasAttribute from 'shorter-js/src/attr/hasAttribute';
 import setAttribute from 'shorter-js/src/attr/setAttribute';
 import getAttribute from 'shorter-js/src/attr/getAttribute';
 import removeAttribute from 'shorter-js/src/attr/removeAttribute';
 
+// ColorPicker Util
+// ================
+import colorPickerLabels from './util/colorPickerLabels';
+import colorNames from './util/colorNames';
+import nonColors from './util/nonColors';
 import getColorForm from './util/getColorForm';
-import getColorControl from './util/getColorControl';
+import getColorControls from './util/getColorControls';
+import getColorMenu from './util/getColorMenu';
 import vHidden from './util/vHidden';
+import tabIndex from './util/tabindex';
+import isValidJSON from './util/isValidJSON';
+import roundPart from './util/roundPart';
 import Color from './color';
+import ColorPalette from './color-palette';
+import Version from './version';
 
 // ColorPicker GC
 // ==============
 const colorPickerString = 'color-picker';
 const colorPickerSelector = `[data-function="${colorPickerString}"]`;
-const nonColors = ['transparent', 'currentColor', 'inherit', 'initial'];
-const colorNames = ['white', 'black', 'grey', 'red', 'orange', 'brown', 'gold', 'olive', 'yellow', 'lime', 'green', 'teal', 'cyan', 'blue', 'violet', 'magenta', 'pink'];
-const colorPickerLabels = {
-  pickerLabel: 'Colour Picker',
-  toggleLabel: 'Select colour',
-  menuLabel: 'Select colour preset',
-  requiredLabel: 'Required',
-  formatLabel: 'Colour Format',
-  formatHEX: 'Hexadecimal Format',
-  formatRGB: 'RGB Format',
-  formatHSL: 'HSL Format',
-  alphaLabel: 'Alpha',
-  appearanceLabel: 'Colour Appearance',
-  hexLabel: 'Hexadecimal',
-  hueLabel: 'Hue',
-  saturationLabel: 'Saturation',
-  lightnessLabel: 'Lightness',
-  redLabel: 'Red',
-  greenLabel: 'Green',
-  blueLabel: 'Blue',
+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);
+export const getColorPickerInstance = (element) => getInstance(element, colorPickerString);
 
 /** @type {CP.InitCallback<ColorPicker>} */
 const initColorPicker = (element) => new ColorPicker(element);
@@ -74,165 +99,94 @@ const initColorPicker = (element) => new ColorPicker(element);
 // ColorPicker Private Methods
 // ===========================
 
-/**
- * Add / remove `ColorPicker` main event listeners.
- * @param {ColorPicker} self
- * @param {boolean=} action
- */
-function toggleEvents(self, action) {
-  const fn = action ? addListener : removeListener;
-  const { input, pickerToggle, menuToggle } = self;
-
-  fn(input, 'focusin', self.showPicker);
-  fn(pickerToggle, 'click', self.togglePicker);
-
-  fn(input, 'keydown', self.keyHandler);
-
-  if (menuToggle) {
-    fn(menuToggle, 'click', self.toggleMenu);
-  }
-}
-
 /**
  * Generate HTML markup and update instance properties.
  * @param {ColorPicker} self
  */
 function initCallback(self) {
   const {
-    input, parent, format, id, componentLabels, keywords,
+    input, parent, format, id, componentLabels, colorKeywords, colorPresets,
   } = self;
   const colorValue = getAttribute(input, 'value') || '#fff';
 
   const {
-    toggleLabel, menuLabel, formatLabel, pickerLabel, appearanceLabel,
+    toggleLabel, pickerLabel, formatLabel, hexLabel,
   } = componentLabels;
 
   // update color
   const color = nonColors.includes(colorValue) ? '#fff' : colorValue;
-  self.color = new Color(color, { format });
+  self.color = new Color(color, format);
 
   // set initial controls dimensions
   // make the controls smaller on mobile
-  const cv1w = isMobile ? 150 : 230;
-  const cvh = isMobile ? 150 : 230;
-  const cv2w = 21;
   const dropClass = isMobile ? ' mobile' : '';
-  const ctrl1Labelledby = format === 'hsl' ? `appearance_${id} appearance1_${id}` : `appearance1_${id}`;
-  const ctrl2Labelledby = format === 'hsl' ? `appearance2_${id}` : `appearance_${id} appearance2_${id}`;
+  const formatString = format === 'hex' ? hexLabel : format.toUpperCase();
 
   const pickerBtn = createElement({
+    id: `picker-btn-${id}`,
     tagName: 'button',
-    className: 'picker-toggle button-appearance',
-    ariaExpanded: 'false',
-    ariaHasPopup: 'true',
-    ariaLive: 'polite',
+    className: 'picker-toggle btn-appearance',
   });
-  setAttribute(pickerBtn, 'tabindex', '-1');
+  setAttribute(pickerBtn, ariaExpanded, 'false');
+  setAttribute(pickerBtn, ariaHasPopup, 'true');
   pickerBtn.append(createElement({
     tagName: 'span',
     className: vHidden,
-    innerText: 'Open Color Picker',
+    innerText: `${pickerLabel}. ${formatLabel}: ${formatString}`,
   }));
 
-  const colorPickerDropdown = createElement({
+  const pickerDropdown = createElement({
     tagName: 'div',
     className: `color-dropdown picker${dropClass}`,
   });
-  setAttribute(colorPickerDropdown, ariaLabelledBy, `picker-label-${id} format-label-${id}`);
-  setAttribute(colorPickerDropdown, 'role', 'group');
-  colorPickerDropdown.append(
-    createElement({
-      tagName: 'label',
-      className: vHidden,
-      ariaHidden: 'true',
-      id: `picker-label-${id}`,
-      innerText: `${pickerLabel}`,
-    }),
-    createElement({
-      tagName: 'label',
-      className: vHidden,
-      ariaHidden: 'true',
-      id: `format-label-${id}`,
-      innerText: `${formatLabel}`,
-    }),
-    createElement({
-      tagName: 'label',
-      className: `color-appearance ${vHidden}`,
-      ariaHidden: 'true',
-      ariaLive: 'polite',
-      id: `appearance_${id}`,
-      innerText: `${appearanceLabel}`,
-    }),
-  );
-
-  const colorControls = createElement({
-    tagName: 'div',
-    className: `color-controls ${format}`,
-  });
-
-  colorControls.append(
-    getColorControl(1, id, cv1w, cvh, ctrl1Labelledby),
-    getColorControl(2, id, cv2w, cvh, ctrl2Labelledby),
-  );
-
-  if (format !== 'hex') {
-    colorControls.append(
-      getColorControl(3, id, cv2w, cvh),
-    );
-  }
+  setAttribute(pickerDropdown, ariaLabelledBy, `picker-btn-${id}`);
+  setAttribute(pickerDropdown, 'role', 'group');
 
-  // @ts-ignore
+  const colorControls = getColorControls(self);
   const colorForm = getColorForm(self);
-  colorPickerDropdown.append(colorControls, colorForm);
-  parent.append(pickerBtn, colorPickerDropdown);
 
-  // set color key menu template
-  if (keywords) {
-    const colorKeys = keywords;
+  pickerDropdown.append(colorControls, colorForm);
+  input.before(pickerBtn);
+  parent.append(pickerDropdown);
+
+  // set colour key menu template
+  if (colorKeywords || colorPresets) {
     const presetsDropdown = createElement({
       tagName: 'div',
-      className: `color-dropdown menu${dropClass}`,
-    });
-    const presetsMenu = createElement({
-      tagName: 'ul',
-      ariaLabel: `${menuLabel}`,
-      className: 'color-menu',
-    });
-    setAttribute(presetsMenu, 'role', 'listbox');
-    presetsDropdown.append(presetsMenu);
-
-    colorKeys.forEach((x) => {
-      const xKey = x.trim();
-      const xRealColor = new Color(xKey, { format }).toString();
-      const isActive = xRealColor === getAttribute(input, 'value');
-      const active = isActive ? ' active' : '';
-
-      const keyOption = createElement({
-        tagName: 'li',
-        className: `color-option${active}`,
-        ariaSelected: isActive ? 'true' : 'false',
-        innerText: `${x}`,
-      });
-      setAttribute(keyOption, 'role', 'option');
-      setAttribute(keyOption, 'tabindex', '0');
-      setAttribute(keyOption, 'data-value', `${xKey}`);
-      presetsMenu.append(keyOption);
+      className: `color-dropdown scrollable menu${dropClass}`,
     });
+
+    // color presets
+    if ((colorPresets instanceof Array && colorPresets.length)
+      || (colorPresets instanceof ColorPalette && colorPresets.colors)) {
+      const presetsMenu = getColorMenu(self, colorPresets, 'color-options');
+      presetsDropdown.append(presetsMenu);
+    }
+
+    // explicit defaults [reset, initial, inherit, transparent, currentColor]
+    if (colorKeywords && colorKeywords.length) {
+      const keywordsMenu = getColorMenu(self, colorKeywords, 'color-defaults');
+      presetsDropdown.append(keywordsMenu);
+    }
+
     const presetsBtn = createElement({
       tagName: 'button',
-      className: 'menu-toggle button-appearance',
-      ariaExpanded: 'false',
-      ariaHasPopup: 'true',
+      className: 'menu-toggle btn-appearance',
     });
+    setAttribute(presetsBtn, tabIndex, '-1');
+    setAttribute(presetsBtn, ariaExpanded, 'false');
+    setAttribute(presetsBtn, ariaHasPopup, 'true');
+
     const xmlns = encodeURI('http://www.w3.org/2000/svg');
     const presetsIcon = createElementNS(xmlns, { tagName: 'svg' });
     setAttribute(presetsIcon, 'xmlns', xmlns);
-    setAttribute(presetsIcon, ariaHidden, 'true');
     setAttribute(presetsIcon, 'viewBox', '0 0 512 512');
-    const piPath = createElementNS(xmlns, { tagName: 'path' });
-    setAttribute(piPath, 'd', 'M98,158l157,156L411,158l27,27L255,368L71,185L98,158z');
-    setAttribute(piPath, 'fill', '#fff');
-    presetsIcon.append(piPath);
+    setAttribute(presetsIcon, ariaHidden, 'true');
+
+    const path = createElementNS(xmlns, { tagName: 'path' });
+    setAttribute(path, 'd', 'M98,158l157,156L411,158l27,27L255,368L71,185L98,158z');
+    setAttribute(path, 'fill', '#fff');
+    presetsIcon.append(path);
     presetsBtn.append(createElement({
       tagName: 'span',
       className: vHidden,
@@ -243,9 +197,29 @@ function initCallback(self) {
   }
 
   // solve non-colors after settings save
-  if (keywords && nonColors.includes(colorValue)) {
+  if (colorKeywords && nonColors.includes(colorValue)) {
     self.value = colorValue;
   }
+  setAttribute(input, tabIndex, '-1');
+}
+
+/**
+ * Add / remove `ColorPicker` main event listeners.
+ * @param {ColorPicker} self
+ * @param {boolean=} action
+ */
+function toggleEvents(self, action) {
+  const fn = action ? addListener : removeListener;
+  const { input, pickerToggle, menuToggle } = self;
+
+  fn(input, focusinEvent, self.showPicker);
+  fn(pickerToggle, mouseclickEvent, self.togglePicker);
+
+  fn(input, keydownEvent, self.keyToggle);
+
+  if (menuToggle) {
+    fn(menuToggle, mouseclickEvent, self.toggleMenu);
+  }
 }
 
 /**
@@ -255,26 +229,33 @@ function initCallback(self) {
  */
 function toggleEventsOnShown(self, action) {
   const fn = action ? addListener : removeListener;
-  const pointerEvents = 'ontouchstart' in document
-    ? { down: 'touchstart', move: 'touchmove', up: 'touchend' }
-    : { down: 'mousedown', move: 'mousemove', up: 'mouseup' };
+  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 };
 
   fn(self.controls, pointerEvents.down, self.pointerDown);
-  self.controlKnobs.forEach((x) => fn(x, 'keydown', self.handleKnobs));
+  self.controlKnobs.forEach((x) => fn(x, keydownEvent, self.handleKnobs));
 
-  fn(window, 'scroll', self.handleScroll);
+  // @ts-ignore -- this is `Window`
+  fn(win, scrollEvent, self.handleScroll);
+  // @ts-ignore -- this is `Window`
+  fn(win, resizeEvent, self.update);
 
-  [self.input, ...self.inputs].forEach((x) => fn(x, 'change', self.changeHandler));
+  [input, ...self.inputs].forEach((x) => fn(x, changeEvent, self.changeHandler));
 
-  if (self.colorMenu) {
-    fn(self.colorMenu, 'click', self.menuClickHandler);
-    fn(self.colorMenu, 'keydown', self.menuKeyHandler);
+  if (colorMenu) {
+    fn(colorMenu, mouseclickEvent, self.menuClickHandler);
+    fn(colorMenu, keydownEvent, self.menuKeyHandler);
   }
 
-  fn(document, pointerEvents.move, self.pointerMove);
-  fn(document, pointerEvents.up, self.pointerUp);
-  fn(window, 'keyup', self.handleDismiss);
-  fn(self.parent, 'focusout', self.handleFocusOut);
+  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);
 }
 
 /**
@@ -286,61 +267,93 @@ function firePickerChange(self) {
 }
 
 /**
- * Toggles the visibility of a dropdown or returns false if none is visible.
+ * Hides a visible dropdown.
  * @param {HTMLElement} element
- * @param {boolean=} check
- * @returns {void | boolean}
+ * @returns {void}
  */
-function classToggle(element, check) {
-  const fn1 = !check ? 'forEach' : 'some';
-  const fn2 = !check ? removeClass : hasClass;
-
+function removePosition(element) {
   if (element) {
-    return ['show', 'show-top'][fn1]((x) => fn2(element, x));
+    ['bottom', 'top'].forEach((x) => removeClass(element, x));
   }
-
-  return false;
 }
 
 /**
- * Shows the `ColorPicker` presets menu.
+ * Shows a `ColorPicker` dropdown and close the curent open dropdown.
  * @param {ColorPicker} self
+ * @param {HTMLElement | Element} dropdown
  */
-function showMenu(self) {
-  classToggle(self.colorPicker);
-  addClass(self.colorMenu, 'show');
-  self.show();
-  setAttribute(self.menuToggle, ariaExpanded, 'true');
+function showDropdown(self, dropdown) {
+  const {
+    colorPicker, colorMenu, menuToggle, pickerToggle, parent,
+  } = self;
+  const isPicker = dropdown === colorPicker;
+  const openDropdown = isPicker ? colorMenu : colorPicker;
+  const activeBtn = isPicker ? menuToggle : pickerToggle;
+  const nextBtn = !isPicker ? menuToggle : pickerToggle;
+
+  if (!hasClass(parent, 'open')) {
+    addClass(parent, 'open');
+  }
+  if (openDropdown) {
+    removeClass(openDropdown, 'show');
+    removePosition(openDropdown);
+  }
+  addClass(dropdown, 'bottom');
+  reflow(dropdown);
+  addClass(dropdown, 'show');
+
+  if (isPicker) self.update();
+
+  if (!self.isOpen) {
+    toggleEventsOnShown(self, true);
+    self.updateDropdownPosition();
+    self.isOpen = true;
+    setAttribute(self.input, tabIndex, '0');
+    if (menuToggle) {
+      setAttribute(menuToggle, tabIndex, '0');
+    }
+  }
+
+  setAttribute(nextBtn, ariaExpanded, 'true');
+  if (activeBtn) {
+    setAttribute(activeBtn, ariaExpanded, 'false');
+  }
 }
 
 /**
- * Color Picker
+ * Color Picker Web Component
  * @see http://thednp.github.io/color-picker
  */
 export default class ColorPicker {
   /**
-   * Returns a new ColorPicker instance.
+   * Returns a new `ColorPicker` instance. The target of this constructor
+   * must be an `HTMLInputElement`.
+   *
    * @param {HTMLInputElement | string} target the target `<input>` element
+   * @param {CP.ColorPickerOptions=} config instance options
    */
-  constructor(target) {
+  constructor(target, config) {
     const self = this;
     /** @type {HTMLInputElement} */
     // @ts-ignore
-    self.input = querySelector(target);
+    const input = querySelector(target);
+
     // invalidate
-    if (!self.input) throw new TypeError(`ColorPicker target ${target} cannot be found.`);
-    const { input } = self;
+    if (!input) throw new TypeError(`ColorPicker target ${target} cannot be found.`);
+    self.input = input;
+
+    const parent = closest(input, colorPickerParentSelector);
+    if (!parent) throw new TypeError('ColorPicker requires a specific markup to work.');
 
     /** @type {HTMLElement} */
     // @ts-ignore
-    self.parent = closest(input, `.${colorPickerString},${colorPickerString}`);
-    if (!self.parent) throw new TypeError('ColorPicker requires a specific markup to work.');
+    self.parent = parent;
 
     /** @type {number} */
     self.id = getUID(input, colorPickerString);
 
     // set initial state
-    /** @type {HTMLCanvasElement?} */
+    /** @type {HTMLElement?} */
     self.dragElement = null;
     /** @type {boolean} */
     self.isOpen = false;
@@ -350,26 +363,59 @@ export default class ColorPicker {
     };
     /** @type {Record<string, string>} */
     self.colorLabels = {};
-    /** @type {Array<string> | false} */
-    self.keywords = false;
-    /** @type {Color} */
-    self.color = new Color('white', { format: self.format });
+    /** @type {string[]=} */
+    self.colorKeywords = undefined;
+    /** @type {(ColorPalette | string[])=} */
+    self.colorPresets = undefined;
+
+    // process options
+    const {
+      format, componentLabels, colorLabels, colorKeywords, colorPresets,
+    } = normalizeOptions(this.isCE ? parent : input, colorPickerDefaults, config || {});
+
+    let translatedColorLabels = colorNames;
+    if (colorLabels instanceof Array && colorLabels.length === 17) {
+      translatedColorLabels = colorLabels;
+    } else if (colorLabels && colorLabels.split(',').length === 17) {
+      translatedColorLabels = colorLabels.split(',');
+    }
+
+    // expose colour labels to all methods
+    colorNames.forEach((c, i) => {
+      self.colorLabels[c] = translatedColorLabels[i].trim();
+    });
+
+    // update and expose component labels
+    const tempLabels = ObjectAssign({}, colorPickerLabels);
+    const jsonLabels = componentLabels && isValidJSON(componentLabels)
+      ? JSON.parse(componentLabels) : componentLabels || {};
+
     /** @type {Record<string, string>} */
-    self.componentLabels = ObjectAssign({}, colorPickerLabels);
+    self.componentLabels = ObjectAssign(tempLabels, jsonLabels);
 
-    const { componentLabels, colorLabels, keywords } = input.dataset;
-    const temp = componentLabels ? JSON.parse(componentLabels) : {};
-    self.componentLabels = ObjectAssign(self.componentLabels, temp);
+    /** @type {Color} */
+    self.color = new Color('white', format);
 
-    const translatedColorLabels = colorLabels && colorLabels.split(',').length === 17
-      ? colorLabels.split(',') : colorNames;
+    /** @type {CP.ColorFormats} */
+    self.format = format;
 
-    // expose color labels to all methods
-    colorNames.forEach((c, i) => { self.colorLabels[c] = translatedColorLabels[i]; });
+    // set colour defaults
+    if (colorKeywords instanceof Array) {
+      self.colorKeywords = colorKeywords;
+    } else if (typeof colorKeywords === 'string' && colorKeywords.length) {
+      self.colorKeywords = colorKeywords.split(',');
+    }
 
     // set colour presets
-    if (keywords !== 'false') {
-      self.keywords = keywords ? keywords.split(',') : nonColors;
+    if (colorPresets instanceof Array) {
+      self.colorPresets = colorPresets;
+    } else if (typeof colorPresets === 'string' && colorPresets.length) {
+      if (isValidJSON(colorPresets)) {
+        const { hue, hueSteps, lightSteps } = JSON.parse(colorPresets);
+        self.colorPresets = new ColorPalette(hue, hueSteps, lightSteps);
+      } else {
+        self.colorPresets = colorPresets.split(',').map((x) => x.trim());
+      }
     }
 
     // bind events
@@ -381,17 +427,18 @@ export default class ColorPicker {
     self.pointerDown = self.pointerDown.bind(self);
     self.pointerMove = self.pointerMove.bind(self);
     self.pointerUp = self.pointerUp.bind(self);
+    self.update = self.update.bind(self);
     self.handleScroll = self.handleScroll.bind(self);
     self.handleFocusOut = self.handleFocusOut.bind(self);
     self.changeHandler = self.changeHandler.bind(self);
     self.handleDismiss = self.handleDismiss.bind(self);
-    self.keyHandler = self.keyHandler.bind(self);
+    self.keyToggle = self.keyToggle.bind(self);
     self.handleKnobs = self.handleKnobs.bind(self);
 
     // generate markup
     initCallback(self);
 
-    const { parent } = self;
+    const [colorPicker, colorMenu] = getElementsByClassName('color-dropdown', parent);
     // set main elements
     /** @type {HTMLElement} */
     // @ts-ignore
@@ -401,68 +448,24 @@ export default class ColorPicker {
     self.menuToggle = querySelector('.menu-toggle', parent);
     /** @type {HTMLElement} */
     // @ts-ignore
-    self.colorMenu = querySelector('.color-dropdown.menu', parent);
-    /** @type {HTMLElement} */
-    // @ts-ignore
-    self.colorPicker = querySelector('.color-dropdown.picker', parent);
+    self.colorPicker = colorPicker;
     /** @type {HTMLElement} */
     // @ts-ignore
-    self.controls = querySelector('.color-controls', parent);
+    self.colorMenu = colorMenu;
     /** @type {HTMLInputElement[]} */
     // @ts-ignore
-    self.inputs = [...querySelectorAll('.color-input', parent)];
+    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.controlKnobs = [...querySelectorAll('.knob', parent)];
-    /** @type {HTMLCanvasElement[]} */
-    // @ts-ignore
-    self.visuals = [...querySelectorAll('canvas', self.controls)];
-    /** @type {HTMLLabelElement[]} */
-    // @ts-ignore
-    self.knobLabels = [...querySelectorAll('.color-label', parent)];
-    /** @type {HTMLLabelElement} */
-    // @ts-ignore
-    self.appearance = querySelector('.color-appearance', parent);
+    self.visuals = [...getElementsByClassName('visual-control', controls)];
 
-    const [v1, v2, v3] = self.visuals;
-    // set dimensions
-    /** @type {number} */
-    self.width1 = v1.width;
-    /** @type {number} */
-    self.height1 = v1.height;
-    /** @type {number} */
-    self.width2 = v2.width;
-    /** @type {number} */
-    self.height2 = v2.height;
-    // set main controls
-    /** @type {*} */
-    self.ctx1 = v1.getContext('2d');
-    /** @type {*} */
-    self.ctx2 = v2.getContext('2d');
-    self.ctx1.rect(0, 0, self.width1, self.height1);
-    self.ctx2.rect(0, 0, self.width2, self.height2);
-
-    /** @type {number} */
-    self.width3 = 0;
-    /** @type {number} */
-    self.height3 = 0;
-
-    // set alpha control except hex
-    if (self.format !== 'hex') {
-      self.width3 = v3.width;
-      self.height3 = v3.height;
-      /** @type {*} */
-      this.ctx3 = v3.getContext('2d');
-      self.ctx3.rect(0, 0, self.width3, self.height3);
-    }
+    // update colour picker controls, inputs and visuals
+    self.update();
 
-    // update color picker controls, inputs and visuals
-    this.setControlPositions();
-    this.setColorAppearence();
-    // don't trigger change at initialization
-    this.updateInputs(true);
-    this.updateControls();
-    this.updateVisuals();
     // add main events listeners
     toggleEvents(self, true);
 
@@ -470,65 +473,52 @@ export default class ColorPicker {
     Data.set(input, colorPickerString, self);
   }
 
-  /** Returns the current color value */
+  /** Returns the current colour value */
   get value() { return this.input.value; }
 
   /**
-   * Sets a new color value.
-   * @param {string} v new color value
+   * Sets a new colour value.
+   * @param {string} v new colour value
    */
   set value(v) { this.input.value = v; }
 
-  /** Check if the input is required to have a valid value. */
-  get required() { return hasAttribute(this.input, 'required'); }
-
-  /**
-   * Returns the colour format.
-   * @returns {CP.ColorFormats | string}
-   */
-  get format() { return getAttribute(this.input, 'format') || 'hex'; }
-
-  /** Returns the input name. */
-  get name() { return getAttribute(this.input, 'name'); }
-
-  /**
-   * Returns the label associated to the input.
-   * @returns {HTMLLabelElement?}
-   */
-  // @ts-ignore
-  get label() { return querySelector(`[for="${this.input.id}"]`); }
-
-  /** Check if the color presets include any non-color. */
-  get includeNonColor() {
-    return this.keywords instanceof Array
-      && this.keywords.some((x) => nonColors.includes(x));
+  /** Check if the colour presets include any non-colour. */
+  get hasNonColor() {
+    return this.colorKeywords instanceof Array
+      && this.colorKeywords.some((x) => nonColors.includes(x));
   }
 
-  /** Returns hexadecimal value of the current color. */
-  get hex() { return this.color.toHex(); }
+  /** Check if the parent of the target is a `ColorPickerElement` instance. */
+  get isCE() { return this.parent.localName === colorPickerString; }
 
-  /** Returns the current color value in {h,s,v,a} object format. */
+  /** Returns hexadecimal value of the current colour. */
+  get hex() { return this.color.toHex(true); }
+
+  /** Returns the current colour value in {h,s,v,a} object format. */
   get hsv() { return this.color.toHsv(); }
 
-  /** Returns the current color value in {h,s,l,a} object format. */
+  /** Returns the current colour value in {h,s,l,a} object format. */
   get hsl() { return this.color.toHsl(); }
 
-  /** Returns the current color value in {r,g,b,a} object format. */
+  /** Returns the current colour value in {h,w,b,a} object format. */
+  get hwb() { return this.color.toHwb(); }
+
+  /** Returns the current colour value in {r,g,b,a} object format. */
   get rgb() { return this.color.toRgb(); }
 
-  /** Returns the current color brightness. */
+  /** Returns the current colour brightness. */
   get brightness() { return this.color.brightness; }
 
-  /** Returns the current color luminance. */
+  /** Returns the current colour luminance. */
   get luminance() { return this.color.luminance; }
 
-  /** Checks if the current colour requires a light text color. */
+  /** Checks if the current colour requires a light text colour. */
   get isDark() {
-    const { rgb, brightness } = this;
-    return brightness < 120 && rgb.a > 0.33;
+    const { color, brightness } = this;
+    return brightness < 120 && color.a > 0.33;
   }
 
-  /** Checks if the current input value is a valid color. */
+  /** Checks if the current input value is a valid colour. */
   get isValid() {
     const inputValue = this.input.value;
     return inputValue !== '' && new Color(inputValue).isValid;
@@ -538,89 +528,79 @@ export default class ColorPicker {
   updateVisuals() {
     const self = this;
     const {
-      color, format, controlPositions,
-      width1, width2, width3,
-      height1, height2, height3,
-      ctx1, ctx2, ctx3,
+      format, controlPositions, visuals,
     } = self;
-    const { r, g, b } = color;
+    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 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 hue = Math.round((controlPositions.c2y / height2) * 360);
-      ctx1.fillStyle = new Color(`hsl(${hue},100%,50%})`).toRgbString();
-      ctx1.fillRect(0, 0, width1, height1);
-
-      const whiteGrad = ctx2.createLinearGradient(0, 0, width1, 0);
-      whiteGrad.addColorStop(0, 'rgba(255,255,255,1)');
-      whiteGrad.addColorStop(1, 'rgba(255,255,255,0)');
-      ctx1.fillStyle = whiteGrad;
-      ctx1.fillRect(0, 0, width1, height1);
-
-      const blackGrad = ctx2.createLinearGradient(0, 0, 0, height1);
-      blackGrad.addColorStop(0, 'rgba(0,0,0,0)');
-      blackGrad.addColorStop(1, 'rgba(0,0,0,1)');
-      ctx1.fillStyle = blackGrad;
-      ctx1.fillRect(0, 0, width1, height1);
-
-      const hueGrad = ctx2.createLinearGradient(0, 0, 0, height1);
-      hueGrad.addColorStop(0, 'rgba(255,0,0,1)');
-      hueGrad.addColorStop(0.17, 'rgba(255,255,0,1)');
-      hueGrad.addColorStop(0.34, 'rgba(0,255,0,1)');
-      hueGrad.addColorStop(0.51, 'rgba(0,255,255,1)');
-      hueGrad.addColorStop(0.68, 'rgba(0,0,255,1)');
-      hueGrad.addColorStop(0.85, 'rgba(255,0,255,1)');
-      hueGrad.addColorStop(1, 'rgba(255,0,0,1)');
-      ctx2.fillStyle = hueGrad;
-      ctx2.fillRect(0, 0, width2, height2);
+      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 hueGrad = ctx1.createLinearGradient(0, 0, width1, 0);
-      const saturation = Math.round((1 - controlPositions.c2y / height2) * 100);
-
-      hueGrad.addColorStop(0, new Color('rgba(255,0,0,1)').desaturate(100 - saturation).toRgbString());
-      hueGrad.addColorStop(0.17, new Color('rgba(255,255,0,1)').desaturate(100 - saturation).toRgbString());
-      hueGrad.addColorStop(0.34, new Color('rgba(0,255,0,1)').desaturate(100 - saturation).toRgbString());
-      hueGrad.addColorStop(0.51, new Color('rgba(0,255,255,1)').desaturate(100 - saturation).toRgbString());
-      hueGrad.addColorStop(0.68, new Color('rgba(0,0,255,1)').desaturate(100 - saturation).toRgbString());
-      hueGrad.addColorStop(0.85, new Color('rgba(255,0,255,1)').desaturate(100 - saturation).toRgbString());
-      hueGrad.addColorStop(1, new Color('rgba(255,0,0,1)').desaturate(100 - saturation).toRgbString());
-
-      ctx1.fillStyle = hueGrad;
-      ctx1.fillRect(0, 0, width1, height1);
-
-      const whiteGrad = ctx1.createLinearGradient(0, 0, 0, height1);
-      whiteGrad.addColorStop(0, 'rgba(255,255,255,1)');
-      whiteGrad.addColorStop(0.5, 'rgba(255,255,255,0)');
-      ctx1.fillStyle = whiteGrad;
-      ctx1.fillRect(0, 0, width1, height1);
-
-      const blackGrad = ctx1.createLinearGradient(0, 0, 0, height1);
-      blackGrad.addColorStop(0.5, 'rgba(0,0,0,0)');
-      blackGrad.addColorStop(1, 'rgba(0,0,0,1)');
-      ctx1.fillStyle = blackGrad;
-      ctx1.fillRect(0, 0, width1, height1);
-
-      const saturationGrad = ctx2.createLinearGradient(0, 0, 0, height2);
-      const incolor = color.clone().greyscale().toRgb();
-
-      saturationGrad.addColorStop(0, `rgba(${r},${g},${b},1)`);
-      saturationGrad.addColorStop(1, `rgba(${incolor.r},${incolor.g},${incolor.b},1)`);
-
-      ctx2.fillStyle = saturationGrad;
-      ctx2.fillRect(0, 0, width3, height3);
-    }
-
-    if (format !== 'hex') {
-      ctx3.clearRect(0, 0, width3, height3);
-      const alphaGrad = ctx3.createLinearGradient(0, 0, 0, height3);
-      alphaGrad.addColorStop(0, `rgba(${r},${g},${b},1)`);
-      alphaGrad.addColorStop(1, `rgba(${r},${g},${b},0)`);
-      ctx3.fillStyle = alphaGrad;
-      ctx3.fillRect(0, 0, width3, height3);
+      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();
+
+      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%)`,
+    });
   }
 
   /**
-   * Handles the `focusout` listener of the `ColorPicker`.
+   * The `ColorPicker` *focusout* event listener when open.
    * @param {FocusEvent} e
    * @this {ColorPicker}
    */
@@ -632,7 +612,7 @@ export default class ColorPicker {
   }
 
   /**
-   * Handles the `focusout` listener of the `ColorPicker`.
+   * The `ColorPicker` *keyup* event listener when open.
    * @param {KeyboardEvent} e
    * @this {ColorPicker}
    */
@@ -644,14 +624,13 @@ export default class ColorPicker {
   }
 
   /**
-   * Handles the `ColorPicker` scroll listener when open.
+   * The `ColorPicker` *scroll* event listener when open.
    * @param {Event} e
    * @this {ColorPicker}
    */
   handleScroll(e) {
     const self = this;
-    /** @type {*} */
-    const { activeElement } = document;
+    const { activeElement } = getDocument(self.input);
 
     if ((isMobile && self.dragElement)
       || (activeElement && self.controlKnobs.includes(activeElement))) {
@@ -663,22 +642,51 @@ export default class ColorPicker {
   }
 
   /**
-   * Handles all `ColorPicker` click listeners.
+   * The `ColorPicker` keyboard event listener for menu navigation.
    * @param {KeyboardEvent} e
    * @this {ColorPicker}
    */
   menuKeyHandler(e) {
     const { target, code } = e;
-
-    if ([keyArrowDown, keyArrowUp].includes(code)) {
+    // @ts-ignore
+    const { previousElementSibling, nextElementSibling, parentElement } = target;
+    const isColorOptionsMenu = parentElement && hasClass(parentElement, 'color-options');
+    const allSiblings = [...parentElement.children];
+    const columnsCount = isColorOptionsMenu
+      && getElementStyle(parentElement, 'grid-template-columns').split(' ').length;
+    const currentIndex = allSiblings.indexOf(target);
+    const previousElement = currentIndex > -1
+      && columnsCount && allSiblings[currentIndex - columnsCount];
+    const nextElement = currentIndex > -1
+      && columnsCount && allSiblings[currentIndex + columnsCount];
+
+    if ([keyArrowDown, keyArrowUp, keySpace].includes(code)) {
+      // prevent scroll when navigating the menu via arrow keys / Space
       e.preventDefault();
-    } else if ([keyEnter, keySpace].includes(code)) {
+    }
+    if (isColorOptionsMenu) {
+      if (previousElement && code === keyArrowUp) {
+        focus(previousElement);
+      } else if (nextElement && code === keyArrowDown) {
+        focus(nextElement);
+      } else if (previousElementSibling && code === keyArrowLeft) {
+        focus(previousElementSibling);
+      } else if (nextElementSibling && code === keyArrowRight) {
+        focus(nextElementSibling);
+      }
+    } else if (previousElementSibling && [keyArrowLeft, keyArrowUp].includes(code)) {
+      focus(previousElementSibling);
+    } else if (nextElementSibling && [keyArrowRight, keyArrowDown].includes(code)) {
+      focus(nextElementSibling);
+    }
+
+    if ([keyEnter, keySpace].includes(code)) {
       this.menuClickHandler({ target });
     }
   }
 
   /**
-   * Handles all `ColorPicker` click listeners.
+   * The `ColorPicker` click event listener for the colour menu presets / defaults.
    * @param {Partial<Event>} e
    * @this {ColorPicker}
    */
@@ -686,51 +694,57 @@ export default class ColorPicker {
     const self = this;
     /** @type {*} */
     const { target } = e;
-    const { format } = self;
+    const { colorMenu } = self;
     const newOption = (getAttribute(target, 'data-value') || '').trim();
-    const currentActive = self.colorMenu.querySelector('li.active');
-    const newColor = nonColors.includes(newOption) ? 'white' : newOption;
-    self.color = new Color(newColor, { format });
-    self.setControlPositions();
-    self.setColorAppearence();
-    self.updateInputs(true);
-    self.updateControls();
-    self.updateVisuals();
+    // 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;
 
-    if (currentActive) {
-      removeClass(currentActive, 'active');
-      removeAttribute(currentActive, ariaSelected);
-    }
+    const {
+      r, g, b, a,
+    } = new Color(newColor);
+
+    ObjectAssign(self.color, {
+      r, g, b, a,
+    });
+
+    self.update();
 
     if (currentActive !== target) {
+      if (currentActive) {
+        removeClass(currentActive, 'active');
+        removeAttribute(currentActive, ariaSelected);
+      }
+
       addClass(target, 'active');
       setAttribute(target, ariaSelected, 'true');
 
       if (nonColors.includes(newOption)) {
         self.value = newOption;
-        firePickerChange(self);
       }
+      firePickerChange(self);
     }
   }
 
   /**
-   * Handles the `ColorPicker` touchstart / mousedown events listeners.
+   * The `ColorPicker` *touchstart* / *mousedown* events listener for control knobs.
    * @param {TouchEvent} e
    * @this {ColorPicker}
    */
   pointerDown(e) {
     const self = this;
+    /** @type {*} */
     const {
-      // @ts-ignore
       type, target, touches, pageX, pageY,
     } = e;
-    const { visuals, controlKnobs, format } = self;
+    const { colorMenu, visuals, controlKnobs } = self;
     const [v1, v2, v3] = visuals;
     const [c1, c2, c3] = controlKnobs;
-    /** @type {HTMLCanvasElement} */
-    // @ts-ignore
-    const visual = target.tagName === 'canvas' // @ts-ignore
-      ? target : querySelector('canvas', target.parentElement);
+    /** @type {HTMLElement} */
+    const visual = hasClass(target, 'visual-control')
+      ? target : querySelector('.visual-control', target.parentElement);
     const visualRect = getBoundingClientRect(visual);
     const X = type === 'touchstart' ? touches[0].pageX : pageX;
     const Y = type === 'touchstart' ? touches[0].pageY : pageY;
@@ -739,42 +753,53 @@ export default class ColorPicker {
 
     if (target === v1 || target === c1) {
       self.dragElement = visual;
-      self.changeControl1({ offsetX, offsetY });
+      self.changeControl1(offsetX, offsetY);
     } else if (target === v2 || target === c2) {
       self.dragElement = visual;
-      self.changeControl2({ offsetY });
-    } else if (format !== 'hex' && (target === v3 || target === c3)) {
+      self.changeControl2(offsetY);
+    } else if (target === v3 || target === c3) {
       self.dragElement = visual;
-      self.changeAlpha({ offsetY });
+      self.changeAlpha(offsetY);
+    }
+
+    if (colorMenu) {
+      const currentActive = querySelector('li.active', colorMenu);
+      if (currentActive) {
+        removeClass(currentActive, 'active');
+        removeAttribute(currentActive, ariaSelected);
+      }
     }
     e.preventDefault();
   }
 
   /**
-   * Handles the `ColorPicker` touchend / mouseup events listeners.
+   * The `ColorPicker` *touchend* / *mouseup* events listener for control knobs.
    * @param {TouchEvent} e
    * @this {ColorPicker}
    */
   pointerUp({ target }) {
     const self = this;
-    const selection = document.getSelection();
+    const { parent } = self;
+    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
-      && !self.parent.contains(target)) {
-      self.hide();
+      && !parent.contains(target)) {
+      self.hide(currentOpen);
     }
 
     self.dragElement = null;
   }
 
   /**
-   * Handles the `ColorPicker` touchmove / mousemove events listeners.
+   * The `ColorPicker` *touchmove* / *mousemove* events listener for control knobs.
    * @param {TouchEvent} e
    */
   pointerMove(e) {
     const self = this;
-    const { dragElement, visuals, format } = self;
+    const { dragElement, visuals } = self;
     const [v1, v2, v3] = visuals;
     const {
       // @ts-ignore
@@ -790,20 +815,20 @@ export default class ColorPicker {
     const offsetY = Y - window.pageYOffset - controlRect.top;
 
     if (dragElement === v1) {
-      self.changeControl1({ offsetX, offsetY });
+      self.changeControl1(offsetX, offsetY);
     }
 
     if (dragElement === v2) {
-      self.changeControl2({ offsetY });
+      self.changeControl2(offsetY);
     }
 
-    if (dragElement === v3 && format !== 'hex') {
-      self.changeAlpha({ offsetY });
+    if (dragElement === v3) {
+      self.changeAlpha(offsetY);
     }
   }
 
   /**
-   * Handles the `ColorPicker` events listeners associated with the color knobs.
+   * The `ColorPicker` *keydown* event listener for control knobs.
    * @param {KeyboardEvent} e
    */
   handleKnobs(e) {
@@ -814,54 +839,64 @@ export default class ColorPicker {
     if (![keyArrowUp, keyArrowDown, keyArrowLeft, keyArrowRight].includes(code)) return;
     e.preventDefault();
 
-    const { activeElement } = document;
-    const { controlKnobs } = self;
-    const currentKnob = controlKnobs.find((x) => x === activeElement);
+    const { format, 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);
 
     if (currentKnob) {
       let offsetX = 0;
       let offsetY = 0;
+
       if (target === c1) {
+        const xRatio = offsetWidth / (format === 'hsl' ? 360 : 100);
+
         if ([keyArrowLeft, keyArrowRight].includes(code)) {
-          self.controlPositions.c1x += code === keyArrowRight ? +1 : -1;
+          self.controlPositions.c1x += code === keyArrowRight ? xRatio : -xRatio;
         } else if ([keyArrowUp, keyArrowDown].includes(code)) {
-          self.controlPositions.c1y += code === keyArrowDown ? +1 : -1;
+          self.controlPositions.c1y += code === keyArrowDown ? yRatio : -yRatio;
         }
 
         offsetX = self.controlPositions.c1x;
         offsetY = self.controlPositions.c1y;
-        self.changeControl1({ offsetX, offsetY });
+        self.changeControl1(offsetX, offsetY);
       } else if (target === c2) {
-        self.controlPositions.c2y += [keyArrowDown, keyArrowRight].includes(code) ? +1 : -1;
+        self.controlPositions.c2y += [keyArrowDown, keyArrowRight].includes(code)
+          ? yRatio
+          : -yRatio;
+
         offsetY = self.controlPositions.c2y;
-        self.changeControl2({ offsetY });
+        self.changeControl2(offsetY);
       } else if (target === c3) {
-        self.controlPositions.c3y += [keyArrowDown, keyArrowRight].includes(code) ? +1 : -1;
+        self.controlPositions.c3y += [keyArrowDown, keyArrowRight].includes(code)
+          ? yRatio
+          : -yRatio;
+
         offsetY = self.controlPositions.c3y;
-        self.changeAlpha({ offsetY });
+        self.changeAlpha(offsetY);
       }
-
-      self.setColorAppearence();
-      self.updateInputs();
-      self.updateControls();
-      self.updateVisuals();
       self.handleScroll(e);
     }
   }
 
-  /** Handles the event listeners of the color form. */
+  /** The event listener of the colour form inputs. */
   changeHandler() {
     const self = this;
     let colorSource;
-    /** @type {HTMLInputElement} */
-    // @ts-ignore
-    const { activeElement } = document;
     const {
-      inputs, format, value: currentValue, input,
+      inputs, format, value: currentValue, input, controlPositions, visuals,
     } = self;
-    const [i1, i2, i3, i4] = inputs;
-    const isNonColorValue = self.includeNonColor && nonColors.includes(currentValue);
+    /** @type {*} */
+    const { activeElement } = getDocument(input);
+    const { offsetHeight } = visuals[0];
+    const [i1,,, i4] = inputs;
+    const [v1, v2, v3, v4] = format === 'rgb'
+      ? inputs.map((i) => parseFloat(i.value) / (i === i4 ? 100 : 1))
+      : inputs.map((i) => parseFloat(i.value) / (i !== i1 ? 100 : 360));
+    const isNonColorValue = self.hasNonColor && nonColors.includes(currentValue);
+    const alpha = i4 ? v4 : (1 - controlPositions.c3y / offsetHeight);
 
     if (activeElement === input || (activeElement && inputs.includes(activeElement))) {
       if (activeElement === input) {
@@ -873,14 +908,28 @@ export default class ColorPicker {
       } else if (format === 'hex') {
         colorSource = i1.value;
       } else if (format === 'hsl') {
-        colorSource = `hsla(${i1.value},${i2.value}%,${i3.value}%,${i4.value})`;
+        colorSource = {
+          h: v1, s: v2, l: v3, a: alpha,
+        };
+      } else if (format === 'hwb') {
+        colorSource = {
+          h: v1, w: v2, b: v3, a: alpha,
+        };
       } else {
-        colorSource = `rgba(${inputs.map((x) => x.value).join(',')})`;
+        colorSource = {
+          r: v1, g: v2, b: v3, a: alpha,
+        };
       }
 
-      self.color = new Color(colorSource, { format });
+      const {
+        r, g, b, a,
+      } = new Color(colorSource);
+
+      ObjectAssign(self.color, {
+        r, g, b, a,
+      });
       self.setControlPositions();
-      self.setColorAppearence();
+      self.updateAppearance();
       self.updateInputs();
       self.updateControls();
       self.updateVisuals();
@@ -897,49 +946,57 @@ export default class ColorPicker {
    * * `lightness` and `saturation` for HEX/RGB;
    * * `lightness` and `hue` for HSL.
    *
-   * @param {Record<string, number>} offsets
+   * @param {number} X the X component of the offset
+   * @param {number} Y the Y component of the offset
    */
-  changeControl1(offsets) {
+  changeControl1(X, Y) {
     const self = this;
     let [offsetX, offsetY] = [0, 0];
-    const { offsetX: X, offsetY: Y } = offsets;
     const {
-      format, controlPositions,
-      height1, height2, height3, width1,
+      format, controlPositions, visuals,
     } = self;
+    const { offsetHeight, offsetWidth } = visuals[0];
 
-    if (X > width1) {
-      offsetX = width1;
-    } else if (X >= 0) {
-      offsetX = X;
-    }
+    if (X > offsetWidth) offsetX = offsetWidth;
+    else if (X >= 0) offsetX = X;
 
-    if (Y > height1) {
-      offsetY = height1;
-    } else if (Y >= 0) {
-      offsetY = Y;
-    }
+    if (Y > offsetHeight) offsetY = offsetHeight;
+    else if (Y >= 0) offsetY = Y;
 
-    const hue = format !== 'hsl'
-      ? Math.round((controlPositions.c2y / height2) * 360)
-      : Math.round((offsetX / width1) * 360);
+    const hue = format === 'hsl'
+      ? offsetX / offsetWidth
+      : controlPositions.c2y / offsetHeight;
 
-    const saturation = format !== 'hsl'
-      ? Math.round((offsetX / width1) * 100)
-      : Math.round((1 - controlPositions.c2y / height2) * 100);
+    const saturation = format === 'hsl'
+      ? 1 - controlPositions.c2y / offsetHeight
+      : offsetX / offsetWidth;
 
-    const lightness = Math.round((1 - offsetY / height1) * 100);
-    const alpha = format !== 'hex' ? Math.round((1 - controlPositions.c3y / height3) * 100) / 100 : 1;
-    const tempFormat = format !== 'hsl' ? 'hsva' : 'hsla';
+    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
-    self.color = new Color(`${tempFormat}(${hue},${saturation}%,${lightness}%,${alpha})`, { format });
+    const {
+      r, g, b, a,
+    } = new Color(colorObject);
+
+    ObjectAssign(self.color, {
+      r, g, b, a,
+    });
+
     // new positions
     self.controlPositions.c1x = offsetX;
     self.controlPositions.c1y = offsetY;
 
     // update color picker
-    self.setColorAppearence();
+    self.updateAppearance();
     self.updateInputs();
     self.updateControls();
     self.updateVisuals();
@@ -947,37 +1004,52 @@ export default class ColorPicker {
 
   /**
    * Updates `ColorPicker` second control:
-   * * `hue` for HEX/RGB;
+   * * `hue` for HEX/RGB/HWB;
    * * `saturation` for HSL.
    *
-   * @param {Record<string, number>} offset
+   * @param {number} Y the Y offset
    */
-  changeControl2(offset) {
+  changeControl2(Y) {
     const self = this;
-    const { offsetY: Y } = offset;
     const {
-      format, width1, height1, height2, height3, controlPositions,
+      format, controlPositions, visuals,
     } = self;
-    let offsetY = 0;
+    const { offsetHeight, offsetWidth } = visuals[0];
 
-    if (Y > height2) {
-      offsetY = height2;
-    } else if (Y >= 0) {
-      offsetY = Y;
-    }
+    let offsetY = 0;
 
-    const hue = format !== 'hsl' ? Math.round((offsetY / height2) * 360) : Math.round((controlPositions.c1x / width1) * 360);
-    const saturation = format !== 'hsl' ? Math.round((controlPositions.c1x / width1) * 100) : Math.round((1 - offsetY / height2) * 100);
-    const lightness = Math.round((1 - controlPositions.c1y / height1) * 100);
-    const alpha = format !== 'hex' ? Math.round((1 - controlPositions.c3y / height3) * 100) / 100 : 1;
-    const colorFormat = format !== 'hsl' ? 'hsva' : 'hsla';
+    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 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
-    self.color = new Color(`${colorFormat}(${hue},${saturation}%,${lightness}%,${alpha})`, { format });
+    const {
+      r, g, b, a,
+    } = new Color(colorObject);
+
+    ObjectAssign(self.color, {
+      r, g, b, a,
+    });
+
     // new position
     self.controlPositions.c2y = offsetY;
     // update color picker
-    self.setColorAppearence();
+    self.updateAppearance();
     self.updateInputs();
     self.updateControls();
     self.updateVisuals();
@@ -985,95 +1057,108 @@ export default class ColorPicker {
 
   /**
    * Updates `ColorPicker` last control,
-   * the `alpha` channel for RGB/HSL.
+   * the `alpha` channel.
    *
-   * @param {Record<string, number>} offset
+   * @param {number} Y
    */
-  changeAlpha(offset) {
+  changeAlpha(Y) {
     const self = this;
-    const { height3 } = self;
-    const { offsetY: Y } = offset;
+    const { visuals } = self;
+    const { offsetHeight } = visuals[0];
     let offsetY = 0;
 
-    if (Y > height3) {
-      offsetY = height3;
-    } else if (Y >= 0) {
-      offsetY = Y;
-    }
+    if (Y > offsetHeight) offsetY = offsetHeight;
+    else if (Y >= 0) offsetY = Y;
 
     // update color alpha
-    const alpha = Math.round((1 - offsetY / height3) * 100);
-    self.color.setAlpha(alpha / 100);
+    const alpha = 1 - offsetY / offsetHeight;
+    self.color.setAlpha(alpha);
     // update position
     self.controlPositions.c3y = offsetY;
     // update color picker
+    self.updateAppearance();
     self.updateInputs();
     self.updateControls();
-    // alpha?
     self.updateVisuals();
   }
 
-  /** Update opened dropdown position on scroll. */
+  /**
+   * Updates `ColorPicker` control positions on:
+   * * initialization
+   * * window resize
+   */
+  update() {
+    const self = this;
+    self.updateDropdownPosition();
+    self.updateAppearance();
+    self.setControlPositions();
+    self.updateInputs(true);
+    self.updateControls();
+    self.updateVisuals();
+  }
+
+  /** Updates the open dropdown position on *scroll* event. */
   updateDropdownPosition() {
     const self = this;
     const { input, colorPicker, colorMenu } = self;
     const elRect = getBoundingClientRect(input);
+    const { top, bottom } = elRect;
     const { offsetHeight: elHeight } = input;
-    const windowHeight = document.documentElement.clientHeight;
-    const isPicker = classToggle(colorPicker, true);
+    const windowHeight = getDocumentElement(input).clientHeight;
+    const isPicker = hasClass(colorPicker, 'show');
     const dropdown = isPicker ? colorPicker : colorMenu;
+    if (!dropdown) return;
     const { offsetHeight: dropHeight } = dropdown;
-    const distanceBottom = windowHeight - elRect.bottom;
-    const distanceTop = elRect.top;
-    const bottomExceed = elRect.top + dropHeight + elHeight > windowHeight; // show
-    const topExceed = elRect.top - dropHeight < 0; // show-top
-
-    if (hasClass(dropdown, 'show') && distanceBottom < distanceTop && bottomExceed) {
-      removeClass(dropdown, 'show');
-      addClass(dropdown, 'show-top');
-    }
-    if (hasClass(dropdown, 'show-top') && distanceBottom > distanceTop && topExceed) {
-      removeClass(dropdown, 'show-top');
-      addClass(dropdown, 'show');
+    const distanceBottom = windowHeight - bottom;
+    const distanceTop = top;
+    const bottomExceed = top + dropHeight + elHeight > windowHeight; // show
+    const topExceed = top - dropHeight < 0; // show-top
+
+    if ((hasClass(dropdown, 'bottom') || !topExceed) && distanceBottom < distanceTop && bottomExceed) {
+      removeClass(dropdown, 'bottom');
+      addClass(dropdown, 'top');
+    } else {
+      removeClass(dropdown, 'top');
+      addClass(dropdown, 'bottom');
     }
   }
 
-  /** Update control knobs' positions. */
+  /** Updates control knobs' positions. */
   setControlPositions() {
     const self = this;
     const {
-      hsv, hsl, format, height1, height2, height3, width1,
+      format, visuals, color, hsl, hsv,
     } = self;
+    const { offsetHeight, offsetWidth } = visuals[0];
+    const alpha = color.a;
     const hue = hsl.h;
+
     const saturation = format !== 'hsl' ? hsv.s : hsl.s;
     const lightness = format !== 'hsl' ? hsv.v : hsl.l;
-    const alpha = hsv.a;
 
-    self.controlPositions.c1x = format !== 'hsl' ? saturation * width1 : (hue / 360) * width1;
-    self.controlPositions.c1y = (1 - lightness) * height1;
-    self.controlPositions.c2y = format !== 'hsl' ? (hue / 360) * height2 : (1 - saturation) * height2;
-
-    if (format !== 'hex') {
-      self.controlPositions.c3y = (1 - alpha) * height3;
-    }
+    self.controlPositions.c1x = format !== 'hsl' ? saturation * offsetWidth : hue * offsetWidth;
+    self.controlPositions.c1y = (1 - lightness) * offsetHeight;
+    self.controlPositions.c2y = format !== 'hsl' ? hue * offsetHeight : (1 - saturation) * offsetHeight;
+    self.controlPositions.c3y = (1 - alpha) * offsetHeight;
   }
 
-  /** Update the visual appearance label. */
-  setColorAppearence() {
+  /** Update the visual appearance label and control knob labels. */
+  updateAppearance() {
     const self = this;
     const {
-      componentLabels, colorLabels, hsl, hsv, hex, format, knobLabels,
+      componentLabels, colorLabels, color, parent,
+      hsl, hsv, hex, format, controlKnobs,
     } = self;
     const {
-      lightnessLabel, saturationLabel, hueLabel, alphaLabel, appearanceLabel, hexLabel,
+      appearanceLabel, hexLabel, valueLabel,
     } = componentLabels;
-    let { requiredLabel } = componentLabels;
-    const [knob1Lbl, knob2Lbl, knob3Lbl] = knobLabels;
-    const hue = Math.round(hsl.h);
-    const alpha = hsv.a;
+    const { r, g, b } = color.toRgb();
+    const [knob1, knob2, knob3] = controlKnobs;
+    const hue = roundPart(hsl.h * 360);
+    const alpha = color.a;
     const saturationSource = format === 'hsl' ? hsl.s : hsv.s;
-    const saturation = Math.round(saturationSource * 100);
-    const lightness = Math.round(hsl.l * 100);
+    const saturation = roundPart(saturationSource * 100);
+    const lightness = roundPart(hsl.l * 100);
     const hsvl = hsv.v * 100;
     let colorName;
 
@@ -1109,99 +1194,118 @@ export default class ColorPicker {
       colorName = colorLabels.pink;
     }
 
+    let colorLabel = `${hexLabel} ${hex.split('').join(' ')}`;
+
     if (format === 'hsl') {
-      knob1Lbl.innerText = `${hueLabel}: ${hue}°. ${lightnessLabel}: ${lightness}%`;
-      knob2Lbl.innerText = `${saturationLabel}: ${saturation}%`;
+      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') {
+      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, ariaValueText, `${hue}%`);
+      setAttribute(knob2, ariaValueNow, `${hue}`);
     } else {
-      knob1Lbl.innerText = `${lightnessLabel}: ${lightness}%. ${saturationLabel}: ${saturation}%`;
-      knob2Lbl.innerText = `${hueLabel}: ${hue}°`;
+      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, ariaValueText, `${hue}°`);
+      setAttribute(knob2, ariaValueNow, `${hue}`);
     }
 
-    if (format !== 'hex') {
-      const alphaValue = Math.round(alpha * 100);
-      knob3Lbl.innerText = `${alphaLabel}: ${alphaValue}%`;
-    }
+    const alphaValue = roundPart(alpha * 100);
+    setAttribute(knob3, ariaValueText, `${alphaValue}%`);
+    setAttribute(knob3, ariaValueNow, `${alphaValue}`);
 
-    // update color labels
-    self.appearance.innerText = `${appearanceLabel}: ${colorName}.`;
-    const colorLabel = format === 'hex'
-      ? `${hexLabel} ${hex.split('').join(' ')}.`
-      : self.value.toUpperCase();
+    // update the input backgroundColor
+    const newColor = color.toString();
+    setElementStyle(self.input, { backgroundColor: newColor });
 
-    if (self.label) {
-      const fieldLabel = self.label.innerText.replace('*', '').trim();
-      /** @type {HTMLSpanElement} */
-      // @ts-ignore
-      const [pickerBtnSpan] = self.pickerToggle.children;
-      requiredLabel = self.required ? ` ${requiredLabel}` : '';
-      pickerBtnSpan.innerText = `${fieldLabel}: ${colorLabel}${requiredLabel}`;
+    // toggle dark/light classes will also style the placeholder
+    // dark sets color white, light sets color black
+    // isDark ? '#000' : '#fff'
+    if (!self.isDark) {
+      if (hasClass(parent, 'txt-dark')) removeClass(parent, 'txt-dark');
+      if (!hasClass(parent, 'txt-light')) addClass(parent, 'txt-light');
+    } else {
+      if (hasClass(parent, 'txt-light')) removeClass(parent, 'txt-light');
+      if (!hasClass(parent, 'txt-dark')) addClass(parent, 'txt-dark');
     }
   }
 
-  /** Updates the control knobs positions. */
+  /** Updates the control knobs actual positions. */
   updateControls() {
-    const { format, controlKnobs, controlPositions } = this;
+    const { controlKnobs, controlPositions } = this;
+    let {
+      c1x, c1y, c2y, c3y,
+    } = controlPositions;
     const [control1, control2, control3] = controlKnobs;
-    control1.style.transform = `translate3d(${controlPositions.c1x - 3}px,${controlPositions.c1y - 3}px,0)`;
-    control2.style.transform = `translate3d(0,${controlPositions.c2y - 3}px,0)`;
+    // round control positions
+    [c1x, c1y, c2y, c3y] = [c1x, c1y, c2y, c3y].map(roundPart);
 
-    if (format !== 'hex') {
-      control3.style.transform = `translate3d(0,${controlPositions.c3y - 3}px,0)`;
-    }
+    setElementStyle(control1, { transform: `translate3d(${c1x - 4}px,${c1y - 4}px,0)` });
+    setElementStyle(control2, { transform: `translate3d(0,${c2y - 4}px,0)` });
+    setElementStyle(control3, { transform: `translate3d(0,${c3y - 4}px,0)` });
   }
 
   /**
-   * Update all color form inputs.
+   * Updates all color form inputs.
    * @param {boolean=} isPrevented when `true`, the component original event is prevented
    */
   updateInputs(isPrevented) {
     const self = this;
     const {
-      value: oldColor, rgb, hsl, hsv, format, parent, input, inputs,
+      value: oldColor, format, inputs, color, hsl,
     } = self;
     const [i1, i2, i3, i4] = inputs;
-
-    const alpha = hsl.a;
-    const hue = Math.round(hsl.h);
-    const saturation = Math.round(hsl.s * 100);
-    const lightSource = format === 'hsl' ? hsl.l : hsv.v;
-    const lightness = Math.round(lightSource * 100);
+    const alpha = roundPart(color.a * 100);
+    const hue = roundPart(hsl.h * 360);
     let newColor;
 
     if (format === 'hex') {
-      newColor = self.color.toHexString();
+      newColor = self.color.toHexString(true);
       i1.value = self.hex;
     } else if (format === 'hsl') {
+      const lightness = roundPart(hsl.l * 100);
+      const saturation = roundPart(hsl.s * 100);
       newColor = self.color.toHslString();
       i1.value = `${hue}`;
       i2.value = `${saturation}`;
       i3.value = `${lightness}`;
       i4.value = `${alpha}`;
+    } else if (format === 'hwb') {
+      const { w, b } = self.hwb;
+      const whiteness = roundPart(w * 100);
+      const blackness = roundPart(b * 100);
+
+      newColor = self.color.toHwbString();
+      i1.value = `${hue}`;
+      i2.value = `${whiteness}`;
+      i3.value = `${blackness}`;
+      i4.value = `${alpha}`;
     } else if (format === 'rgb') {
+      let { r, g, b } = self.rgb;
+      [r, g, b] = [r, g, b].map(roundPart);
+
       newColor = self.color.toRgbString();
-      i1.value = `${rgb.r}`;
-      i2.value = `${rgb.g}`;
-      i3.value = `${rgb.b}`;
+      i1.value = `${r}`;
+      i2.value = `${g}`;
+      i3.value = `${b}`;
       i4.value = `${alpha}`;
     }
 
     // update the color value
     self.value = `${newColor}`;
 
-    // update the input backgroundColor
-    ObjectAssign(input.style, { backgroundColor: newColor });
-
-    // toggle dark/light classes will also style the placeholder
-    // dark sets color white, light sets color black
-    // isDark ? '#000' : '#fff'
-    if (!self.isDark) {
-      if (hasClass(parent, 'dark')) removeClass(parent, 'dark');
-      if (!hasClass(parent, 'light')) addClass(parent, 'light');
-    } else {
-      if (hasClass(parent, 'light')) removeClass(parent, 'light');
-      if (!hasClass(parent, 'dark')) addClass(parent, 'dark');
-    }
-
     // don't trigger the custom event unless it's really changed
     if (!isPrevented && newColor !== oldColor) {
       firePickerChange(self);
@@ -1209,14 +1313,15 @@ export default class ColorPicker {
   }
 
   /**
-   * Handles the `Space` and `Enter` keys inputs.
+   * 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}
    */
-  keyHandler(e) {
+  keyToggle(e) {
     const self = this;
     const { menuToggle } = self;
-    const { activeElement } = document;
+    const { activeElement } = getDocument(menuToggle);
     const { code } = e;
 
     if ([keyEnter, keySpace].includes(code)) {
@@ -1239,80 +1344,79 @@ export default class ColorPicker {
   togglePicker(e) {
     e.preventDefault();
     const self = this;
-    const pickerIsOpen = classToggle(self.colorPicker, true);
+    const { colorPicker } = self;
 
-    if (self.isOpen && pickerIsOpen) {
+    if (self.isOpen && hasClass(colorPicker, 'show')) {
       self.hide(true);
     } else {
-      self.showPicker();
+      showDropdown(self, colorPicker);
     }
   }
 
   /** Shows the `ColorPicker` dropdown. */
   showPicker() {
     const self = this;
-    classToggle(self.colorMenu);
-    addClass(self.colorPicker, 'show');
-    self.input.focus();
-    self.show();
-    setAttribute(self.pickerToggle, ariaExpanded, 'true');
+    const { colorPicker } = self;
+
+    if (!['top', 'bottom'].some((c) => hasClass(colorPicker, c))) {
+      showDropdown(self, colorPicker);
+    }
   }
 
   /** Toggles the visibility of the `ColorPicker` presets menu. */
   toggleMenu() {
     const self = this;
-    const menuIsOpen = classToggle(self.colorMenu, true);
+    const { colorMenu } = self;
 
-    if (self.isOpen && menuIsOpen) {
+    if (self.isOpen && hasClass(colorMenu, 'show')) {
       self.hide(true);
     } else {
-      showMenu(self);
-    }
-  }
-
-  /** Show the dropdown. */
-  show() {
-    const self = this;
-    if (!self.isOpen) {
-      addClass(self.parent, 'open');
-      toggleEventsOnShown(self, true);
-      self.updateDropdownPosition();
-      self.isOpen = true;
+      showDropdown(self, colorMenu);
     }
   }
 
   /**
-   * Hides the currently opened dropdown.
+   * Hides the currently open `ColorPicker` dropdown.
    * @param {boolean=} focusPrevented
    */
   hide(focusPrevented) {
     const self = this;
     if (self.isOpen) {
-      const { pickerToggle, colorMenu } = self;
-      toggleEventsOnShown(self);
-
-      removeClass(self.parent, 'open');
-
-      classToggle(self.colorPicker);
-      setAttribute(pickerToggle, ariaExpanded, 'false');
-
-      if (colorMenu) {
-        classToggle(colorMenu);
-        setAttribute(self.menuToggle, ariaExpanded, 'false');
+      const {
+        pickerToggle, menuToggle, colorPicker, colorMenu, parent, input,
+      } = self;
+      const openPicker = hasClass(colorPicker, 'show');
+      const openDropdown = openPicker ? colorPicker : colorMenu;
+      const relatedBtn = openPicker ? pickerToggle : menuToggle;
+      const animationDuration = openDropdown && getElementTransitionDuration(openDropdown);
+
+      if (openDropdown) {
+        removeClass(openDropdown, 'show');
+        setAttribute(relatedBtn, ariaExpanded, 'false');
+        setTimeout(() => {
+          removePosition(openDropdown);
+          if (!querySelector('.show', parent)) {
+            removeClass(parent, 'open');
+            toggleEventsOnShown(self);
+            self.isOpen = false;
+          }
+        }, animationDuration);
       }
 
       if (!self.isValid) {
         self.value = self.color.toString();
       }
-
-      self.isOpen = false;
-
       if (!focusPrevented) {
-        pickerToggle.focus();
+        focus(pickerToggle);
+      }
+      setAttribute(input, tabIndex, '-1');
+      if (menuToggle) {
+        setAttribute(menuToggle, tabIndex, '-1');
       }
     }
   }
 
+  /** Removes `ColorPicker` from target `<input>`. */
   dispose() {
     const self = this;
     const { input, parent } = self;
@@ -1321,13 +1425,25 @@ export default class ColorPicker {
     [...parent.children].forEach((el) => {
       if (el !== input) el.remove();
     });
+
+    removeAttribute(input, tabIndex);
+    setElementStyle(input, { backgroundColor: '' });
+
+    ['txt-light', 'txt-dark'].forEach((c) => removeClass(parent, c));
     Data.remove(input, colorPickerString);
   }
 }
 
 ObjectAssign(ColorPicker, {
   Color,
+  ColorPalette,
+  Version,
   getInstance: getColorPickerInstance,
   init: initColorPicker,
   selector: colorPickerSelector,
+  // utils important for render
+  roundPart,
+  setElementStyle,
+  setAttribute,
+  getBoundingClientRect,
 });