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

@thednp/color-picker 0.0.1-alpha2 → 0.0.1-alpha3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (26) hide show

package/README.md +31 -15
package/dist/css/color-picker.css +37 -15
package/dist/css/color-picker.min.css +2 -2
package/dist/css/color-picker.rtl.css +37 -15
package/dist/css/color-picker.rtl.min.css +2 -2
package/dist/js/color-picker-element-esm.js +164 -135
package/dist/js/color-picker-element-esm.min.js +2 -2
package/dist/js/color-picker-element.js +164 -135
package/dist/js/color-picker-element.min.js +2 -2
package/dist/js/color-picker-esm.js +159 -133
package/dist/js/color-picker-esm.min.js +2 -2
package/dist/js/color-picker.js +159 -133
package/dist/js/color-picker.min.js +2 -2
package/package.json +1 -1
package/src/js/color-palette.js +18 -9
package/src/js/color-picker-element.js +7 -3
package/src/js/color-picker.js +59 -48
package/src/js/color.js +33 -34
package/src/js/util/getColorControls.js +3 -3
package/src/js/util/getColorForm.js +0 -1
package/src/js/util/getColorMenu.js +21 -28
package/src/js/util/roundPart.js +9 -0
package/src/js/util/setCSSProperties.js +12 -0
package/src/js/util/tabindex.js +3 -0
package/src/scss/color-picker.scss +35 -12
package/types/cp.d.ts +1 -3

package/dist/js/color-picker.js CHANGED Viewed

@@ -1,5 +1,5 @@
 /*!
-* ColorPicker v0.0.1alpha2 (http://thednp.github.io/color-picker)
+* ColorPicker v0.0.1alpha3 (http://thednp.github.io/color-picker)
 * Copyright 2022 © thednp
 * Licensed under MIT (https://github.com/thednp/color-picker/blob/master/LICENSE)
 */
@@ -667,13 +667,20 @@
    */
   const getInstance = (target, component) => Data.get(target, component);
+  /**
+   * Shortcut for `Object.keys()` static method.
+   * @param  {Record<string, any>} obj a target object
+   * @returns {string[]}
+   */
+  const ObjectKeys = (obj) => Object.keys(obj);
   /**
    * Shortcut for multiple uses of `HTMLElement.style.propertyName` method.
    * @param  {HTMLElement | Element} element target element
    * @param  {Partial<CSSStyleDeclaration>} styles attribute value
    */
   // @ts-ignore
-  const setElementStyle = (element, styles) => { ObjectAssign(element.style, styles); };
+  const setElementStyle = (element, styles) => ObjectAssign(element.style, styles);
   /**
    * Shortcut for `HTMLElement.getAttribute()` method.
@@ -716,13 +723,6 @@
     return value;
   }
-  /**
-   * Shortcut for `Object.keys()` static method.
-   * @param  {Record<string, any>} obj a target object
-   * @returns {string[]}
-   */
-  const ObjectKeys = (obj) => Object.keys(obj);
   /**
    * Shortcut for `String.toLowerCase()`.
    *
@@ -939,7 +939,6 @@
         max,
         step,
       });
-      // }
       colorForm.append(cInputLabel, cInput);
     });
     return colorForm;
@@ -963,6 +962,8 @@
    */
   const ariaValueMax = 'aria-valuemax';
+  const tabIndex = 'tabindex';
   /**
    * Returns all color controls for `ColorPicker`.
    *
@@ -1028,10 +1029,8 @@
       const {
         i, c, l, min, max,
       } = template;
-      // const hidden = i === 2 && format === 'hwb' ? ' v-hidden' : '';
       const control = createElement({
         tagName: 'div',
-        // className: `color-control${hidden}`,
         className: 'color-control',
       });
       setAttribute(control, 'role', 'presentation');
@@ -1051,7 +1050,7 @@
       setAttribute(knob, ariaLabel, l);
       setAttribute(knob, 'role', 'slider');
-      setAttribute(knob, 'tabindex', '0');
+      setAttribute(knob, tabIndex, '0');
       setAttribute(knob, ariaValueMin, `${min}`);
       setAttribute(knob, ariaValueMax, `${max}`);
       control.append(knob);
@@ -1061,6 +1060,17 @@
     return colorControls;
   }
+  /**
+   * Helps setting CSS variables to the color-menu.
+   * @param {HTMLElement} element
+   * @param {Record<string,any>} props
+   */
+  function setCSSProperties(element, props) {
+    ObjectKeys(props).forEach((prop) => {
+      element.style.setProperty(prop, props[prop]);
+    });
+  }
   /**
    * Returns the `document.head` or the `<head>` element.
    *
@@ -1071,6 +1081,16 @@
     return getDocument(node).head;
   }
+  /**
+   * Round colour components, for all formats except HEX.
+   * @param {number} v one of the colour components
+   * @returns {number} the rounded number
+   */
+  function roundPart(v) {
+    const floor = Math.floor(v);
+    return v - floor < 0.5 ? floor : Math.round(v);
+  }
   // Color supported formats
   const COLOR_FORMAT = ['rgb', 'hex', 'hsl', 'hsb', 'hwb'];
@@ -1238,7 +1258,7 @@
    * @returns {string} - the hexadecimal value
    */
   function convertDecimalToHex(d) {
-    return Math.round(d * 255).toString(16);
+    return roundPart(d * 255).toString(16);
   }
   /**
@@ -1490,9 +1510,9 @@
    */
   function rgbToHex(r, g, b, allow3Char) {
     const hex = [
-      pad2(Math.round(r).toString(16)),
-      pad2(Math.round(g).toString(16)),
-      pad2(Math.round(b).toString(16)),
+      pad2(roundPart(r).toString(16)),
+      pad2(roundPart(g).toString(16)),
+      pad2(roundPart(b).toString(16)),
     ];
     // Return a 3 character hex if possible
@@ -1517,9 +1537,9 @@
    */
   function rgbaToHex(r, g, b, a, allow4Char) {
     const hex = [
-      pad2(Math.round(r).toString(16)),
-      pad2(Math.round(g).toString(16)),
-      pad2(Math.round(b).toString(16)),
+      pad2(roundPart(r).toString(16)),
+      pad2(roundPart(g).toString(16)),
+      pad2(roundPart(b).toString(16)),
       pad2(convertDecimalToHex(a)),
     ];
@@ -1681,6 +1701,8 @@
     let w = null;
     let b = null;
     let h = null;
+    let r = null;
+    let g = null;
     let ok = false;
     let format = 'hex';
@@ -1691,7 +1713,10 @@
     }
     if (typeof color === 'object') {
       if (isValidCSSUnit(color.r) && isValidCSSUnit(color.g) && isValidCSSUnit(color.b)) {
-        rgb = { r: color.r, g: color.g, b: color.b }; // RGB values in [0, 255] range
+        ({ r, g, b } = color);
+        [r, g, b] = [...[r, g, b]]
+          .map((n) => bound01(n, isPercentage(n) ? 100 : 255) * 255).map(roundPart);
+        rgb = { r, g, b }; // RGB values now are all in [0, 255] range
         ok = true;
         format = 'rgb';
       } else if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.v)) {
@@ -1779,14 +1804,6 @@
       self.ok = ok;
       /** @type {CP.ColorFormats} */
       self.format = configFormat || format;
-      // Don't let the range of [0,255] come back in [0,1].
-      // Potentially lose a little bit of precision here, but will fix issues where
-      // .5 gets interpreted as half of the total, instead of half of 1
-      // If it was supposed to be 128, this was already taken care of by `inputToRgb`
-      if (r < 1) self.r = Math.round(r);
-      if (g < 1) self.g = Math.round(g);
-      if (b < 1) self.b = Math.round(b);
     }
     /**
@@ -1802,7 +1819,7 @@
      * @returns {boolean} the query result
      */
     get isDark() {
-      return this.brightness < 128;
+      return this.brightness < 120;
     }
     /**
@@ -1854,13 +1871,13 @@
       const {
         r, g, b, a,
       } = this;
-      const [R, G, B] = [r, g, b].map((x) => Math.round(x));
+      const [R, G, B] = [r, g, b].map((x) => roundPart(x));
       return {
         r: R,
         g: G,
         b: B,
-        a: Math.round(a * 100) / 100,
+        a: roundPart(a * 100) / 100,
       };
     }
@@ -1890,7 +1907,7 @@
       const {
         r, g, b, a,
       } = this.toRgb();
-      const A = a === 1 ? '' : ` / ${Math.round(a * 100)}%`;
+      const A = a === 1 ? '' : ` / ${roundPart(a * 100)}%`;
       return `rgb(${r} ${g} ${b}${A})`;
     }
@@ -1985,10 +2002,10 @@
       let {
         h, s, l, a,
       } = this.toHsl();
-      h = Math.round(h * 360);
-      s = Math.round(s * 100);
-      l = Math.round(l * 100);
-      a = Math.round(a * 100) / 100;
+      h = roundPart(h * 360);
+      s = roundPart(s * 100);
+      l = roundPart(l * 100);
+      a = roundPart(a * 100) / 100;
       return a === 1
         ? `hsl(${h}, ${s}%, ${l}%)`
@@ -2005,11 +2022,11 @@
       let {
         h, s, l, a,
       } = this.toHsl();
-      h = Math.round(h * 360);
-      s = Math.round(s * 100);
-      l = Math.round(l * 100);
-      a = Math.round(a * 100);
-      const A = a < 100 ? ` / ${Math.round(a)}%` : '';
+      h = roundPart(h * 360);
+      s = roundPart(s * 100);
+      l = roundPart(l * 100);
+      a = roundPart(a * 100);
+      const A = a < 100 ? ` / ${roundPart(a)}%` : '';
       return `hsl(${h}deg ${s}% ${l}%${A})`;
     }
@@ -2036,11 +2053,11 @@
       let {
         h, w, b, a,
       } = this.toHwb();
-      h = Math.round(h * 360);
-      w = Math.round(w * 100);
-      b = Math.round(b * 100);
-      a = Math.round(a * 100);
-      const A = a < 100 ? ` / ${Math.round(a)}%` : '';
+      h = roundPart(h * 360);
+      w = roundPart(w * 100);
+      b = roundPart(b * 100);
+      a = roundPart(a * 100);
+      const A = a < 100 ? ` / ${roundPart(a)}%` : '';
       return `hwb(${h}deg ${w}% ${b}%${A})`;
     }
@@ -2186,6 +2203,7 @@
     numberInputToObject,
     stringInputToObject,
     inputToRGB,
+    roundPart,
     ObjectAssign,
   });
@@ -2201,8 +2219,8 @@
      * The `hue` parameter is optional, which would be set to 0.
      * @param {number[]} args represeinting hue, hueSteps, lightSteps
      * * `args.hue` the starting Hue [0, 360]
-     * * `args.hueSteps` Hue Steps Count [5, 13]
-     * * `args.lightSteps` Lightness Steps Count [8, 10]
+     * * `args.hueSteps` Hue Steps Count [5, 24]
+     * * `args.lightSteps` Lightness Steps Count [5, 12]
      */
     constructor(...args) {
       let hue = 0;
@@ -2215,24 +2233,32 @@
       } else if (args.length === 2) {
         [hueSteps, lightSteps] = args;
       } else {
-        throw TypeError('The ColorPalette requires minimum 2 arguments');
+        throw TypeError('ColorPalette requires minimum 2 arguments');
       }
       /** @type {string[]} */
       const colors = [];
       const hueStep = 360 / hueSteps;
-      const lightStep = 100 / (lightSteps + (lightSteps % 2 ? 0 : 1)) / 100;
-      const half = Math.round((lightSteps - (lightSteps % 2 ? 1 : 0)) / 2);
+      const half = roundPart((lightSteps - (lightSteps % 2 ? 1 : 0)) / 2);
+      const estimatedStep = 100 / (lightSteps + (lightSteps % 2 ? 0 : 1)) / 100;
+      let lightStep = 0.25;
+      lightStep = [4, 5].includes(lightSteps) ? 0.2 : lightStep;
+      lightStep = [6, 7].includes(lightSteps) ? 0.15 : lightStep;
+      lightStep = [8, 9].includes(lightSteps) ? 0.11 : lightStep;
+      lightStep = [10, 11].includes(lightSteps) ? 0.09 : lightStep;
+      lightStep = [12, 13].includes(lightSteps) ? 0.075 : lightStep;
+      lightStep = lightSteps > 13 ? estimatedStep : lightStep;
       // light tints
-      for (let i = 0; i < half; i += 1) {
-        lightnessArray = [...lightnessArray, (0.5 + lightStep * (i + 1))];
+      for (let i = 1; i < half + 1; i += 1) {
+        lightnessArray = [...lightnessArray, (0.5 + lightStep * (i))];
       }
       // dark tints
-      for (let i = 0; i < lightSteps - half - 1; i += 1) {
-        lightnessArray = [(0.5 - lightStep * (i + 1)), ...lightnessArray];
+      for (let i = 1; i < lightSteps - half; i += 1) {
+        lightnessArray = [(0.5 - lightStep * (i)), ...lightnessArray];
       }
       // feed `colors` Array
@@ -2267,45 +2293,38 @@
     colorsArray = colorsArray instanceof Array ? colorsArray : [];
     const colorsCount = colorsArray.length;
     const { lightSteps } = isPalette ? colorsSource : { lightSteps: null };
-    let fit = lightSteps
-      || Math.max(...[5, 6, 7, 8, 9, 10].filter((x) => colorsCount > (x * 2) && !(colorsCount % x)));
-    fit = Number.isFinite(fit) ? fit : 5;
+    const fit = lightSteps || [9, 10].find((x) => colorsCount > x * 2 && !(colorsCount % x)) || 5;
     const isMultiLine = isOptionsMenu && colorsCount > fit;
-    let rowCountHover = 1;
-    rowCountHover = isMultiLine && colorsCount < 27 ? 2 : rowCountHover;
-    rowCountHover = colorsCount >= 27 ? 3 : rowCountHover;
-    rowCountHover = colorsCount >= 36 ? 4 : rowCountHover;
-    rowCountHover = colorsCount >= 45 ? 5 : rowCountHover;
-    const rowCount = rowCountHover - (colorsCount < 27 ? 1 : 2);
-    const isScrollable = isMultiLine && colorsCount > rowCountHover * 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);
+    const isScrollable = isMultiLine && colorsCount > rowCount * fit;
     let finalClass = menuClass;
     finalClass += isScrollable ? ' scrollable' : '';
     finalClass += isMultiLine ? ' multiline' : '';
     const gap = isMultiLine ? '1px' : '0.25rem';
     let optionSize = isMultiLine ? 1.75 : 2;
-    optionSize = !(colorsCount % 10) && isMultiLine ? 1.5 : optionSize;
+    optionSize = fit > 5 && isMultiLine ? 1.5 : optionSize;
     const menuHeight = `${(rowCount || 1) * optionSize}rem`;
     const menuHeightHover = `calc(${rowCountHover} * ${optionSize}rem + ${rowCountHover - 1} * ${gap})`;
-    const gridTemplateColumns = `repeat(${fit}, ${optionSize}rem)`;
-    const gridTemplateRows = `repeat(auto-fill, ${optionSize}rem)`;
     const menu = createElement({
       tagName: 'ul',
       className: finalClass,
     });
     setAttribute(menu, 'role', 'listbox');
-    setAttribute(menu, ariaLabel, `${menuLabel}`);
-    if (isOptionsMenu) {
-      if (isScrollable) {
-        const styleText = 'this.style.height=';
-        setAttribute(menu, 'onmouseout', `${styleText}'${menuHeight}'`);
-        setAttribute(menu, 'onmouseover', `${styleText}'${menuHeightHover}'`);
-      }
-      const menuStyle = {
-        height: isScrollable ? menuHeight : '', gridTemplateColumns, gridTemplateRows, gap,
-      };
-      setElementStyle(menu, menuStyle);
+    setAttribute(menu, ariaLabel, menuLabel);
+    if (isScrollable) { // @ts-ignore
+      setCSSProperties(menu, {
+        '--grid-item-size': `${optionSize}rem`,
+        '--grid-fit': fit,
+        '--grid-gap': gap,
+        '--grid-height': menuHeight,
+        '--grid-hover-height': menuHeightHover,
+      });
     }
     colorsArray.forEach((x) => {
@@ -2320,15 +2339,13 @@
         innerText: `${label || x}`,
       });
-      setAttribute(option, 'tabindex', '0');
+      setAttribute(option, tabIndex, '0');
       setAttribute(option, 'data-value', `${value}`);
       setAttribute(option, 'role', 'option');
       setAttribute(option, ariaSelected, isActive ? 'true' : 'false');
       if (isOptionsMenu) {
-        setElementStyle(option, {
-          width: `${optionSize}rem`, height: `${optionSize}rem`, backgroundColor: x,
-        });
+        setElementStyle(option, { backgroundColor: x });
       }
       menu.append(option);
@@ -2350,7 +2367,7 @@
     return true;
   }
-  var version = "0.0.1alpha2";
+  var version = "0.0.1alpha3";
   // @ts-ignore
@@ -2365,8 +2382,8 @@
     componentLabels: colorPickerLabels,
     colorLabels: colorNames,
     format: 'rgb',
-    colorPresets: undefined,
-    colorKeywords: nonColors,
+    colorPresets: false,
+    colorKeywords: false,
   };
   // ColorPicker Static Methods
@@ -2455,7 +2472,7 @@
         tagName: 'button',
         className: 'menu-toggle btn-appearance',
       });
-      setAttribute(presetsBtn, 'tabindex', '-1');
+      setAttribute(presetsBtn, tabIndex, '-1');
       setAttribute(presetsBtn, ariaExpanded, 'false');
       setAttribute(presetsBtn, ariaHasPopup, 'true');
@@ -2482,7 +2499,7 @@
     if (colorKeywords && nonColors.includes(colorValue)) {
       self.value = colorValue;
     }
-    setAttribute(input, 'tabindex', '-1');
+    setAttribute(input, tabIndex, '-1');
   }
   /**
@@ -2583,8 +2600,19 @@
     addClass(dropdown, 'bottom');
     reflow(dropdown);
     addClass(dropdown, 'show');
     if (isPicker) self.update();
-    self.show();
+    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');
@@ -2754,7 +2782,7 @@
     set value(v) { this.input.value = v; }
     /** Check if the colour presets include any non-colour. */
-    get includeNonColor() {
+    get hasNonColor() {
       return this.colorKeywords instanceof Array
         && this.colorKeywords.some((x) => nonColors.includes(x));
     }
@@ -2810,7 +2838,7 @@
       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 = Math.round((alpha * 100)) / 100;
+      const roundA = roundPart((alpha * 100)) / 100;
       if (format !== 'hsl') {
         const fill = new Color({
@@ -2828,7 +2856,7 @@
         });
         setElementStyle(v2, { background: hueGradient });
       } else {
-        const saturation = Math.round((controlPositions.c2y / offsetHeight) * 100);
+        const saturation = roundPart((controlPositions.c2y / offsetHeight) * 100);
         const fill0 = new Color({
           r: 255, g: 0, b: 0, a: alpha,
         }).saturate(-saturation).toRgbString();
@@ -2983,12 +3011,12 @@
       self.update();
-      if (currentActive) {
-        removeClass(currentActive, 'active');
-        removeAttribute(currentActive, ariaSelected);
-      }
       if (currentActive !== target) {
+        if (currentActive) {
+          removeClass(currentActive, 'active');
+          removeAttribute(currentActive, ariaSelected);
+        }
         addClass(target, 'active');
         setAttribute(target, ariaSelected, 'true');
@@ -3155,7 +3183,7 @@
       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.includeNonColor && nonColors.includes(currentValue);
+      const isNonColorValue = self.hasNonColor && nonColors.includes(currentValue);
       const alpha = i4 ? v4 : (1 - controlPositions.c3y / offsetHeight);
       if (activeElement === input || (activeElement && inputs.includes(activeElement))) {
@@ -3414,11 +3442,11 @@
       } = componentLabels;
       const { r, g, b } = color.toRgb();
       const [knob1, knob2, knob3] = controlKnobs;
-      const hue = Math.round(hsl.h * 360);
+      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;
@@ -3465,8 +3493,8 @@
         setAttribute(knob2, ariaValueNow, `${saturation}`);
       } else if (format === 'hwb') {
         const { hwb } = self;
-        const whiteness = Math.round(hwb.w * 100);
-        const blackness = Math.round(hwb.b * 100);
+        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}%`);
@@ -3482,7 +3510,7 @@
         setAttribute(knob2, ariaValueNow, `${hue}`);
       }
-      const alphaValue = Math.round(alpha * 100);
+      const alphaValue = roundPart(alpha * 100);
       setAttribute(knob3, ariaValueText, `${alphaValue}%`);
       setAttribute(knob3, ariaValueNow, `${alphaValue}`);
@@ -3505,10 +3533,14 @@
     /** Updates the control knobs actual positions. */
     updateControls() {
       const { controlKnobs, controlPositions } = this;
+      const {
+        c1x, c1y, c2y, c3y,
+      } = controlPositions;
       const [control1, control2, control3] = controlKnobs;
-      setElementStyle(control1, { transform: `translate3d(${controlPositions.c1x - 4}px,${controlPositions.c1y - 4}px,0)` });
-      setElementStyle(control2, { transform: `translate3d(0,${controlPositions.c2y - 4}px,0)` });
-      setElementStyle(control3, { transform: `translate3d(0,${controlPositions.c3y - 4}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)` });
     }
     /**
@@ -3521,16 +3553,16 @@
         value: oldColor, format, inputs, color, hsl,
       } = self;
       const [i1, i2, i3, i4] = inputs;
-      const alpha = Math.round(color.a * 100);
-      const hue = Math.round(hsl.h * 360);
+      const alpha = roundPart(color.a * 100);
+      const hue = roundPart(hsl.h * 360);
       let newColor;
       if (format === 'hex') {
         newColor = self.color.toHexString(true);
         i1.value = self.hex;
       } else if (format === 'hsl') {
-        const lightness = Math.round(hsl.l * 100);
-        const saturation = Math.round(hsl.s * 100);
+        const lightness = roundPart(hsl.l * 100);
+        const saturation = roundPart(hsl.s * 100);
         newColor = self.color.toHslString();
         i1.value = `${hue}`;
         i2.value = `${saturation}`;
@@ -3538,8 +3570,8 @@
         i4.value = `${alpha}`;
       } else if (format === 'hwb') {
         const { w, b } = self.hwb;
-        const whiteness = Math.round(w * 100);
-        const blackness = Math.round(b * 100);
+        const whiteness = roundPart(w * 100);
+        const blackness = roundPart(b * 100);
         newColor = self.color.toHwbString();
         i1.value = `${hue}`;
@@ -3611,7 +3643,7 @@
       const self = this;
       const { colorPicker } = self;
-      if (!hasClass(colorPicker, 'show')) {
+      if (!['top', 'bottom'].some((c) => hasClass(colorPicker, c))) {
         showDropdown(self, colorPicker);
       }
     }
@@ -3628,21 +3660,6 @@
       }
     }
-    /** Shows the `ColorPicker` dropdown or the presets menu. */
-    show() {
-      const self = this;
-      const { menuToggle } = self;
-      if (!self.isOpen) {
-        toggleEventsOnShown(self, true);
-        self.updateDropdownPosition();
-        self.isOpen = true;
-        setAttribute(self.input, 'tabindex', '0');
-        if (menuToggle) {
-          setAttribute(menuToggle, 'tabindex', '0');
-        }
-      }
-    }
     /**
      * Hides the currently open `ColorPicker` dropdown.
      * @param {boolean=} focusPrevented
@@ -3677,9 +3694,9 @@
         if (!focusPrevented) {
           focus(pickerToggle);
         }
-        setAttribute(input, 'tabindex', '-1');
+        setAttribute(input, tabIndex, '-1');
         if (menuToggle) {
-          setAttribute(menuToggle, 'tabindex', '-1');
+          setAttribute(menuToggle, tabIndex, '-1');
         }
       }
     }
@@ -3693,7 +3710,10 @@
       [...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);
     }
@@ -3701,10 +3721,16 @@
   ObjectAssign(ColorPicker, {
     Color,
+    ColorPalette,
     Version,
     getInstance: getColorPickerInstance,
     init: initColorPicker,
     selector: colorPickerSelector,
+    // utils important for render
+    roundPart,
+    setElementStyle,
+    setAttribute,
+    getBoundingClientRect,
   });
   return ColorPicker;