@thednp/color-picker 2.0.1 → 2.0.3

package/dist/js/color-picker.mjs

@@ -1,147 +1,89 @@
-const _t = "aria-description", Nt = "aria-expanded", Ee = "aria-hidden", St = "aria-selected", tt = "aria-valuenow", et = "aria-valuetext", Me = "change", Te = "DOMContentLoaded", Re = "focusin", Oe = "focusout", zt = "keydown", De = "keyup", Et = "click", Fe = "pointerdown", ue = "pointermove", Ie = "pointerup", Ke = "resize", Ve = "scroll", Be = "touchmove", j = "ArrowDown", ot = "ArrowUp", ht = "ArrowLeft", U = "ArrowRight", je = "Enter", qe = "Escape", Wt = "Space", Ge = "transitionDuration", Ue = "transitionProperty", X = "tabindex", _e = navigator.userAgentData, mt = _e, { userAgent: ze } = navigator, vt = ze, Jt = /iPhone|iPad|iPod|Android/i;
-mt ? mt.brands.some((o) => Jt.test(o.brand)) : Jt.test(vt);
-const Xt = /(iPhone|iPod|iPad)/;
-mt ? mt.brands.some((o) => Xt.test(o.brand)) : (
-  /* istanbul ignore next */
-  Xt.test(vt)
-);
-vt && vt.includes("Firefox");
-const { head: kt } = document;
-["webkitPerspective", "perspective"].some((o) => o in kt.style);
-const Bt = (o, t, e, s) => {
+const jt = "aria-description", Lt = "aria-expanded", Ae = "aria-hidden", wt = "aria-selected", tt = "aria-valuenow", et = "aria-valuetext", He = "change", Ne = "focusin", Ee = "focusout", qt = "keydown", Te = "keyup", At = "click", Me = "pointerdown", ie = "pointermove", Re = "pointerup", Oe = "resize", De = "scroll", Fe = "touchmove", B = "ArrowDown", ot = "ArrowUp", ht = "ArrowLeft", W = "ArrowRight", Ie = "Enter", Ve = "Escape", Gt = "Space", Ke = "transitionDuration", Be = "transitionProperty", Z = "tabindex", ae = (o, t, e, s) => {
   const r = s || !1;
-  o.addEventListener(t, e, r);
-}, jt = (o, t, e, s) => {
+  o.addEventListener(
+    t,
+    e,
+    r
+  );
+}, le = (o, t, e, s) => {
   const r = s || !1;
-  o.removeEventListener(t, e, r);
-}, We = (o, t, e, s) => {
-  const r = (n) => {
-    (n.target === o || n.currentTarget === o) && (e.apply(o, [n]), jt(o, t, r, s));
-  };
-  Bt(o, t, r, s);
-}, Je = () => {
-};
-(() => {
-  let o = !1;
-  try {
-    const t = Object.defineProperty({}, "passive", {
-      get: () => (o = !0, o)
-    });
-    We(document, Te, Je, t);
-  } catch {
-  }
-  return o;
-})();
-["webkitTransform", "transform"].some((o) => o in kt.style);
-["webkitAnimation", "animation"].some((o) => o in kt.style);
-["webkitTransition", "transition"].some((o) => o in kt.style);
-const yt = (o, t) => o.getAttribute(t), m = (o, t, e) => o.setAttribute(t, e), Pt = (o, t) => o.removeAttribute(t), q = (o, ...t) => {
+  o.removeEventListener(
+    t,
+    e,
+    r
+  );
+}, vt = (o, t) => o.getAttribute(t), v = (o, t, e) => o.setAttribute(t, e), kt = (o, t) => o.removeAttribute(t), j = (o, ...t) => {
   o.classList.add(...t);
 }, O = (o, ...t) => {
   o.classList.remove(...t);
-}, T = (o, t) => o.classList.contains(t), qt = (o) => o != null && typeof o == "object" || !1, Z = (o) => qt(o) && typeof o.nodeType == "number" && [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].some((t) => o.nodeType === t) || !1, at = (o) => Z(o) && o.nodeType === 1 || !1, W = /* @__PURE__ */ new Map(), ct = {
-  data: W,
-  /**
-   * Sets web components data.
-   *
-   * @param element target element
-   * @param component the component's name or a unique key
-   * @param instance the component instance
-   */
+}, R = (o, t) => o.classList.contains(t), It = (o) => o != null && typeof o == "object" || !1, ct = (o) => It(o) && typeof o.nodeType == "number" && [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].some(
+  (t) => o.nodeType === t
+) || !1, z = (o) => ct(o) && o.nodeType === 1 || !1, X = /* @__PURE__ */ new Map(), lt = {
+  data: X,
   set: (o, t, e) => {
-    at(o) && (W.has(t) || W.set(t, /* @__PURE__ */ new Map()), W.get(t).set(o, e));
+    z(o) && (X.has(t) || X.set(t, /* @__PURE__ */ new Map()), X.get(t).set(o, e));
   },
-  /**
-   * Returns all instances for specified component.
-   *
-   * @param component the component's name or a unique key
-   * @returns all the component instances
-   */
-  getAllFor: (o) => W.get(o) || null,
-  /**
-   * Returns the instance associated with the target.
-   *
-   * @param element target element
-   * @param component the component's name or a unique key
-   * @returns the instance
-   */
+  getAllFor: (o) => X.get(o) || null,
   get: (o, t) => {
-    if (!at(o) || !t) return null;
-    const e = ct.getAllFor(t);
+    if (!z(o) || !t) return null;
+    const e = lt.getAllFor(t);
     return o && e && e.get(o) || null;
   },
-  /**
-   * Removes web components data.
-   *
-   * @param element target element
-   * @param component the component's name or a unique key
-   */
   remove: (o, t) => {
-    const e = ct.getAllFor(t);
-    !e || !at(o) || (e.delete(o), e.size === 0 && W.delete(t));
+    const e = lt.getAllFor(t);
+    !e || !z(o) || (e.delete(o), e.size === 0 && X.delete(t));
   }
-}, Xe = (o, t) => ct.get(o, t), B = (o) => typeof o == "string" || !1, Ye = (o) => qt(o) && o.constructor.name === "Window" || !1, be = (o) => Z(o) && o.nodeType === 9 || !1, V = (o) => Ye(o) ? o.document : be(o) ? o : Z(o) ? o.ownerDocument : window.document, K = (o, ...t) => Object.assign(o, ...t), x = (o) => {
+}, je = (o, t) => lt.get(o, t), qe = (o) => o?.trim().replace(
+  /(?:^\w|[A-Z]|\b\w)/g,
+  (t, e) => e === 0 ? t.toLowerCase() : t.toUpperCase()
+).replace(/\s+/g, ""), q = (o) => typeof o == "string" || !1, Ge = (o) => It(o) && o.constructor.name === "Window" || !1, ce = (o) => ct(o) && o.nodeType === 9 || !1, K = (o) => ce(o) ? o : ct(o) ? o.ownerDocument : Ge(o) ? o.document : globalThis.document, V = (o, ...t) => Object.assign(o, ...t), x = (o) => {
   if (!o) return;
-  if (B(o))
-    return V().createElement(o);
+  if (q(o))
+    return K().createElement(o);
   const { tagName: t } = o, e = x(t);
   if (!e) return;
   const s = { ...o };
-  return delete s.tagName, K(e, s);
-}, Mt = (o, t) => {
+  return delete s.tagName, V(e, s);
+}, Ht = (o, t) => {
   if (!o || !t) return;
-  if (B(t))
-    return V().createElementNS(o, t);
-  const { tagName: e } = t, s = Mt(o, e);
+  if (q(t))
+    return K().createElementNS(o, t);
+  const { tagName: e } = t, s = Ht(o, e);
   if (!s) return;
   const r = { ...t };
-  return delete r.tagName, K(s, r);
-}, Ze = (o, t) => o.dispatchEvent(t), Tt = (o, t) => {
-  const e = getComputedStyle(o), s = t.replace("webkit", "Webkit").replace(/([A-Z])/g, "-$1").toLowerCase();
-  return e.getPropertyValue(s);
-}, Qe = (o) => {
-  const t = Tt(o, Ue), e = Tt(o, Ge), s = e.includes("ms") ? (
-    /* istanbul ignore next */
-    1
-  ) : 1e3, r = t && t !== "none" ? parseFloat(e) * s : (
-    /* istanbul ignore next */
-    0
-  );
-  return Number.isNaN(r) ? (
-    /* istanbul ignore next */
-    0
-  ) : r;
-}, _ = (o, t) => o.focus(t), Yt = (o) => ["true", !0].includes(o) ? !0 : ["false", !1].includes(o) ? !1 : ["null", "", null, void 0].includes(o) ? null : o !== "" && !Number.isNaN(+o) ? +o : o, pt = (o) => Object.entries(o), to = (o, t, e, s) => {
+  return delete r.tagName, V(s, r);
+}, We = (o, t) => o.dispatchEvent(t), Nt = (o, t, e) => {
+  const s = getComputedStyle(o, e), r = t.replace("webkit", "Webkit").replace(/([A-Z])/g, "-$1").toLowerCase();
+  return s.getPropertyValue(r);
+}, Ue = (o) => {
+  const t = Nt(o, Be), e = Nt(o, Ke), s = e.includes("ms") ? 1 : 1e3, r = t && t !== "none" ? parseFloat(e) * s : 0;
+  return Number.isNaN(r) ? 0 : r;
+}, U = (o, t) => o.focus(t), Wt = (o) => ["true", !0].includes(o) ? !0 : ["false", !1].includes(o) ? !1 : ["null", "", null, void 0].includes(o) ? null : o !== "" && !Number.isNaN(+o) ? +o : o, pt = (o) => Object.entries(o), _e = (o, t, e, s) => {
+  if (!z(o)) return t;
   const r = { ...e }, n = { ...o.dataset }, i = { ...t }, a = {}, l = "title";
   return pt(n).forEach(([c, h]) => {
-    const b = c;
-    a[b] = Yt(h);
+    const b = qe(c);
+    a[b] = Wt(h);
   }), pt(r).forEach(([c, h]) => {
-    r[c] = Yt(h);
+    r[c] = Wt(h);
   }), pt(t).forEach(([c, h]) => {
-    c in r ? i[c] = r[c] : c in a ? i[c] = a[c] : i[c] = c === l ? yt(o, l) : h;
+    c in r ? i[c] = r[c] : c in a ? i[c] = a[c] : i[c] = c === l ? vt(o, l) : h;
   }), i;
-}, Zt = (o) => Object.fromEntries(o), eo = (o) => o.offsetHeight, D = (o, t) => {
+}, Ut = (o) => Object.fromEntries(o), ze = (o) => o.offsetHeight, D = (o, t) => {
   pt(t).forEach(([e, s]) => {
-    if (s && B(e) && e.includes("--"))
+    if (s && q(e) && e.includes("--"))
       o.style.setProperty(e, s);
     else {
       const r = {};
-      r[e] = s, K(o.style, r);
+      r[e] = s, V(o.style, r);
     }
   });
-}, oo = (o) => qt(o) && o.constructor.name === "Map" || !1, pe = (o) => o.toUpperCase(), gt = (o, t) => {
+}, Xe = (o) => It(o) && o.constructor.name === "Map" || !1, he = (o) => o.toUpperCase(), ge = (o) => z(o) && "offsetWidth" in o || !1, gt = (o, t) => {
   const { width: e, height: s, top: r, right: n, bottom: i, left: a } = o.getBoundingClientRect();
   let l = 1, c = 1;
-  if (t && at(o)) {
+  if (t && ge(o)) {
     const { offsetWidth: h, offsetHeight: b } = o;
-    l = h > 0 ? Math.round(e) / h : (
-      /* istanbul ignore next */
-      1
-    ), c = b > 0 ? Math.round(s) / b : (
-      /* istanbul ignore next */
-      1
-    );
+    l = h > 0 ? Math.round(e) / h : 1, c = b > 0 ? Math.round(s) / b : 1;
   }
   return {
     width: e / l,
@@ -153,28 +95,30 @@ const yt = (o, t) => o.getAttribute(t), m = (o, t, e) => o.setAttribute(t, e), P
     x: a / l,
     y: r / c
   };
-}, Ct = (o) => V(o).documentElement;
-let Qt = 0, te = 0;
-const J = /* @__PURE__ */ new Map(), de = (o, t) => {
-  let e = t ? Qt : te;
+}, yt = (o) => K(o).documentElement, Je = (o) => o ? ce(o) ? o.defaultView : ct(o) ? o?.ownerDocument?.defaultView : o : window;
+let _t = 0, zt = 0;
+const J = /* @__PURE__ */ new Map(), ue = (o, t) => {
+  let e = t ? _t : zt;
   if (t) {
-    const s = de(o), r = J.get(s) || /* @__PURE__ */ new Map();
-    J.has(s) || J.set(s, r), oo(r) && !r.has(t) ? (r.set(t, e), Qt += 1) : e = r.get(t);
+    const s = ue(o), r = J.get(s) || /* @__PURE__ */ new Map();
+    J.has(s) || J.set(s, r), Xe(r) && !r.has(t) ? (r.set(t, e), _t += 1) : e = r.get(t);
   } else {
     const s = o.id || o;
-    J.has(s) ? e = J.get(s) : (J.set(s, e), te += 1);
+    J.has(s) ? e = J.get(s) : (J.set(s, e), zt += 1);
   }
   return e;
-}, so = (o) => {
-  var t;
-  return o ? be(o) ? o.defaultView : Z(o) ? (t = o?.ownerDocument) == null ? void 0 : t.defaultView : o : window;
-}, Lt = (o) => Array.isArray(o) || !1, fe = (o, t) => o ? o.closest(t) || // break out of `ShadowRoot`
-fe(o.getRootNode().host, t) : null, z = (o, t) => at(o) ? o : (Z(t) ? t : V()).querySelector(o), st = (o, t) => (t && Z(t) ? t : V()).getElementsByClassName(
+}, xt = (o) => Array.isArray(o) || !1, be = (o, t) => !o || !t ? null : o.closest(t) || be(o.getRootNode().host, t) || null, _ = (o, t) => z(o) ? o : (z(t) ? t : K()).querySelector(o), st = (o, t) => (t && ct(t) ? t : K()).getElementsByClassName(
   o
-), Gt = ["transparent", "currentColor", "inherit", "revert", "initial"], v = (o) => {
+), Vt = [
+  "transparent",
+  "currentColor",
+  "inherit",
+  "revert",
+  "initial"
+], m = (o) => {
   const t = Math.floor(o);
   return o - t < 0.5 ? t : Math.round(o);
-}, wt = [
+}, mt = [
   [
     "aliceblue",
     {
@@ -1359,13 +1303,13 @@ fe(o.getRootNode().host, t) : null, z = (o, t) => at(o) ? o : (Z(t) ? t : V()).q
       b: 50
     }
   ]
-], me = "deg|rad|grad|turn", ve = "[-\\+]?\\d+%?", we = "[-\\+]?\\d*\\.\\d+%?", $e = `[-\\+]?\\d*\\.?\\d+(?:${me})?`, dt = `(?:${we})|(?:${ve})`, Rt = `(?:${dt})|(?:${$e}?)`, ro = "(?:[\\s|\\(\\s|\\s\\(\\s]+)?", no = "(?:[\\s|\\)\\s]+)?", ee = "(?:[,|\\s]+)", io = "(?:[,|\\/\\s]*)?", rt = `${ro}(${Rt})${ee}(${dt})${ee}(${dt})${io}(${dt})?${no}`, I = {
-  CSS_UNIT: new RegExp(Rt),
-  ANGLES: me,
-  CSS_ANGLE: $e,
-  CSS_INTEGER: ve,
-  CSS_NUMBER: we,
-  CSS_UNIT2: Rt,
+], pe = "deg|rad|grad|turn", de = "[-\\+]?\\d+%?", fe = "[-\\+]?\\d*\\.\\d+%?", me = `[-\\+]?\\d*\\.?\\d+(?:${pe})?`, dt = `(?:${fe})|(?:${de})`, Et = `(?:${dt})|(?:${me}?)`, Ze = "(?:[\\s|\\(\\s|\\s\\(\\s]+)?", Qe = "(?:[\\s|\\)\\s]+)?", Xt = "(?:[,|\\s]+)", Ye = "(?:[,|\\/\\s]*)?", rt = `${Ze}(${Et})${Xt}(${dt})${Xt}(${dt})${Ye}(${dt})?${Qe}`, I = {
+  CSS_UNIT: new RegExp(Et),
+  ANGLES: pe,
+  CSS_ANGLE: me,
+  CSS_INTEGER: de,
+  CSS_NUMBER: fe,
+  CSS_UNIT2: Et,
   PERMISSIVE_MATCH: rt,
   hwb: new RegExp(`hwb${rt}`),
   rgb: new RegExp(`rgb(?:a)?${rt}`),
@@ -1375,21 +1319,16 @@ fe(o.getRootNode().host, t) : null, z = (o, t) => at(o) ? o : (Z(t) ? t : V()).q
   hex6: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,
   hex4: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
   hex8: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/
-}, ke = (o) => Gt.includes(o), nt = (o, t) => o !== null && typeof o == "object" && Object.keys(t).every((e) => e in o), ye = (o) => `${o}`.includes(".") && parseFloat(o) === 1, $t = (o) => typeof o == "string" && o.includes("%"), H = (o) => !!I.CSS_UNIT.exec(`${o}`), xe = ["rgb", "hex", "hsl", "hsv", "hwb"], Se = (o) => Gt.includes(o) || ["#", ...xe].some((t) => o.includes(t)) ? !1 : wt.some(([t]) => o === t), R = (o, t) => {
+}, ve = (o) => Vt.includes(o), nt = (o, t) => o !== null && typeof o == "object" && Object.keys(t).every((e) => e in o), $e = (o) => `${o}`.includes(".") && parseFloat(o) === 1, Kt = (o) => typeof o == "string" && o.includes("%"), H = (o) => !!I.CSS_UNIT.exec(`${o}`), we = ["rgb", "hex", "hsl", "hsv", "hwb"], ke = (o) => Vt.includes(o) || ["#", ...we].some((t) => o.includes(t)) ? !1 : mt.some(([t]) => o === t), Jt = 1e-6, to = (o, t) => Math.abs(o * t - t) < Jt ? 1 : o < Jt ? 0 : o, E = (o, t) => {
   let e = o;
-  if (typeof o == "number" && Math.min(o, 0) === 0 && // round values to 6 decimals Math.round(N * (10 ** 6)) / 10 ** 6
-  Math.max(o, 1) === 1)
-    return o;
-  ye(o) && (e = "100%");
-  const s = $t(e);
-  return e = t === 360 ? parseFloat(e) : Math.min(t, Math.max(0, parseFloat(e))), s && (e = e * t / 100), Math.abs(e - t) < 1e-6 ? 1 : (t === 360 ? e = (e < 0 ? e % t + t : e % t) / t : e = e % t / t, e);
-}, Ot = (o) => {
+  return $e(o) && (e = "100%"), Kt(e) ? Number.parseFloat(e) / 100 : (e = typeof e != "number" ? Number.parseFloat(e) : e, t === 360 ? e = (e < 0 ? e % t + t : e > 360 ? e % t : e) / t : (e = Math.min(t, Math.max(0, e)), e = e / t), to(e, t));
+}, Tt = (o) => {
   let t = parseFloat(o);
   return (Number.isNaN(t) || t < 0 || t > 1) && (t = 1), t;
-}, ut = (o) => Math.min(1, Math.max(0, o)), G = (o) => o.length === 1 ? `0${o}` : String(o), Pe = (o) => {
-  const [[, t]] = wt.filter(([e]) => e === o.toLowerCase());
+}, ut = (o) => Math.min(1, Math.max(0, o)), G = (o) => o.length === 1 ? `0${o}` : String(o), ye = (o) => {
+  const [[, t]] = mt.filter(([e]) => e === o.toLowerCase());
   return t;
-}, N = (o) => parseInt(o, 16), Dt = (o) => N(o) / 255, Ce = (o) => v(o * 255).toString(16), oe = (o, t, e) => {
+}, N = (o) => parseInt(o, 16), Mt = (o) => N(o) / 255, xe = (o) => m(o * 255).toString(16), Zt = (o, t, e) => {
   const s = Math.max(o, t, e), r = Math.min(o, t, e);
   let n = 0, i = 0;
   const a = (s + r) / 2;
@@ -1403,16 +1342,16 @@ fe(o.getRootNode().host, t) : null, z = (o, t) => at(o) ? o : (Z(t) ? t : V()).q
 }, ft = (o, t, e) => {
   let s = e;
   return s < 0 && (s += 1), s > 1 && (s -= 1), s < 1 / 6 ? o + (t - o) * (6 * s) : s < 1 / 2 ? t : s < 2 / 3 ? o + (t - o) * (2 / 3 - s) * 6 : o;
-}, lt = (o, t, e) => {
+}, at = (o, t, e) => {
   let s = 0, r = 0, n = 0;
   if (t === 0)
     r = e, n = e, s = e;
-  else if (e) {
+  else {
     const i = e < 0.5 ? e * (1 + t) : e + t - e * t, a = 2 * e - i;
     s = ft(a, i, o + 1 / 3), r = ft(a, i, o), n = ft(a, i, o - 1 / 3);
   }
   return { r: s, g: r, b: n };
-}, se = (o, t, e) => {
+}, Qt = (o, t, e) => {
   let s = 0, r = 0;
   const n = Math.min(o, t, e), i = Math.max(o, t, e), a = 1 - i;
   if (i === n) return { h: 0, w: n, b: a };
@@ -1423,45 +1362,45 @@ fe(o.getRootNode().host, t) : null, z = (o, t) => at(o) ? o : (Z(t) ? t : V()).q
     w: n,
     b: a
   };
-}, Le = (o, t, e) => {
+}, Se = (o, t, e) => {
   if (t + e >= 1) {
     const i = t / (t + e);
     return { r: i, g: i, b: i };
   }
-  let { r: s, g: r, b: n } = lt(o, 1, 0.5);
+  let { r: s, g: r, b: n } = at(o, 1, 0.5);
   return [s, r, n] = [s, r, n].map((i) => i * (1 - t - e) + t), { r: s, g: r, b: n };
-}, re = (o, t, e) => {
+}, Yt = (o, t, e) => {
   const s = Math.max(o, t, e), r = Math.min(o, t, e);
   let n = 0;
   const i = s, a = s - r, l = s === 0 ? 0 : a / s;
   return s === r ? n = 0 : (o === s && (n = (t - e) / a + (t < e ? 6 : 0)), t === s && (n = (e - o) / a + 2), e === s && (n = (o - t) / a + 4), n /= 6), { h: n, s: l, v: i };
-}, Ft = (o, t, e) => {
+}, Rt = (o, t, e) => {
   const s = o * 6, r = t, n = e, i = Math.floor(s), a = s - i, l = n * (1 - r), c = n * (1 - a * r), h = n * (1 - (1 - a) * r), b = i % 6, u = [n, c, l, l, h, n][b], d = [h, n, n, c, l, l][b], g = [l, l, h, n, n, c][b];
   return { r: u, g: d, b: g };
-}, ne = (o, t, e, s) => {
+}, St = (o, t, e, s) => {
   const r = [
-    G(v(o).toString(16)),
-    G(v(t).toString(16)),
-    G(v(e).toString(16))
+    G(m(o).toString(16)),
+    G(m(t).toString(16)),
+    G(m(e).toString(16))
   ];
   return s && r[0].charAt(0) === r[0].charAt(1) && r[1].charAt(0) === r[1].charAt(1) && r[2].charAt(0) === r[2].charAt(1) ? r[0].charAt(0) + r[1].charAt(0) + r[2].charAt(0) : r.join("");
-}, At = (o, t, e, s, r) => {
+}, Ct = (o, t, e, s, r) => {
   const n = [
-    G(v(o).toString(16)),
-    G(v(t).toString(16)),
-    G(v(e).toString(16)),
-    G(Ce(s))
+    G(m(o).toString(16)),
+    G(m(t).toString(16)),
+    G(m(e).toString(16)),
+    G(xe(s))
   ];
   return r && n[0].charAt(0) === n[0].charAt(1) && n[1].charAt(0) === n[1].charAt(1) && n[2].charAt(0) === n[2].charAt(1) && n[3].charAt(0) === n[3].charAt(1) ? n[0].charAt(0) + n[1].charAt(0) + n[2].charAt(0) + n[3].charAt(0) : n.join("");
-}, Ae = (o) => {
+}, Ce = (o) => {
   const t = String(o).trim().toLowerCase();
-  if (Se(t))
-    return Object.assign(Pe(t), {
+  if (ke(t))
+    return Object.assign(ye(t), {
       a: 1,
       format: "rgb",
       ok: !0
     });
-  if (ke(t))
+  if (ve(t))
     return {
       r: 0,
       g: 0,
@@ -1503,7 +1442,7 @@ fe(o.getRootNode().host, t) : null, z = (o, t) => at(o) ? o : (Z(t) ? t : V()).q
     r: N(e),
     g: N(s),
     b: N(r),
-    a: Dt(n),
+    a: Mt(n),
     format: "hex",
     ok: !0
   } : ([, e, s, r] = I.hex6.exec(t) || [], e && s && r ? {
@@ -1517,7 +1456,7 @@ fe(o.getRootNode().host, t) : null, z = (o, t) => at(o) ? o : (Z(t) ? t : V()).q
     r: N(e + e),
     g: N(s + s),
     b: N(r + r),
-    a: Dt(n + n),
+    a: Mt(n + n),
     format: "hex",
     ok: !0
   } : ([, e, s, r] = I.hex3.exec(t) || [], e && s && r ? {
@@ -1535,49 +1474,56 @@ fe(o.getRootNode().host, t) : null, z = (o, t) => at(o) ? o : (Z(t) ? t : V()).q
     format: "rgb",
     ok: !o
   })))))));
-}, ie = (o) => {
+}, eo = (o, t, e) => ({
+  r: E(o, 255),
+  g: E(t, 255),
+  b: E(e, 255)
+}), te = (o) => {
   let t = { r: 0, g: 0, b: 0 }, e = o, s = 1, r, n, i, a, l, c, h, b, u = "rgb", d = !1;
-  return (!e || typeof e == "string") && (e = Ae(e), d = e.ok), nt(e, t) && H(e.r) && H(e.g) && H(e.b) && ({ r: h, g: b, b: l } = e, [h, b, l] = [h, b, l].map((g) => R(g, $t(g) ? 100 : 255)), t = { r: h, g: b, b: l }, u = "format" in e ? e.format : "rgb"), nt(e, { h: 0, s: 0, v: 0 }) && H(e.h) && H(e.s) && H(e.v) && ({ h: c, s: r, v: n } = e, c = R(c, 360), r = R(r, 100), n = R(n, 100), t = Ft(c, r, n), u = "hsv"), nt(e, { h: 0, s: 0, l: 0 }) && H(e.h) && H(e.s) && H(e.l) && ({ h: c, s: r, l: i } = e, c = R(c, 360), r = R(r, 100), i = R(i, 100), t = lt(c, r, i), u = "hsl"), nt(e, { h: 0, w: 0, b: 0 }) && H(e.h) && H(e.w) && H(e.b) && ({ h: c, w: a, b: l } = e, c = R(c, 360), a = R(a, 100), l = R(l, 100), t = Le(c, a, l), u = "hwb"), H(e.a) && (s = e.a, s = $t(s) || parseFloat(`${s}`) > 1 ? R(s, 100) : s), {
-    r: t.r,
-    g: t.g,
-    b: t.b,
-    a: Ot(s),
+  if ((!e || typeof e == "string") && (e = Ce(e), d = e.ok || d), nt(e, t) && H(e.r) && H(e.g) && H(e.b)) {
+    if (["format", "ok", "originalInput"].every((g) => g in e))
+      return { ...e };
+    ({ r: h, g: b, b: l } = e), t = eo(h, b, l), u = "format" in e ? e.format : "rgb";
+  }
+  return nt(e, { h: 0, s: 0, v: 0 }) && H(e.h) && H(e.s) && H(e.v) && ({ h: c, s: r, v: n } = e, c = E(c, 360), r = E(r, 100), n = E(n, 100), t = Rt(c, r, n), u = "hsv"), nt(e, { h: 0, s: 0, l: 0 }) && H(e.h) && H(e.s) && H(e.l) && ({ h: c, s: r, l: i } = e, c = E(c, 360), r = E(r, 100), i = E(i, 100), t = at(c, r, i), u = "hsl"), nt(e, { h: 0, w: 0, b: 0 }) && H(e.h) && H(e.w) && H(e.b) && ({ h: c, w: a, b: l } = e, c = E(c, 360), a = E(a, 100), l = E(l, 100), t = Se(c, a, l), u = "hwb"), H(e.a) && (s = e.a, s = Kt(s) || parseFloat(`${s}`) > 1 ? E(s, 100) : s), {
+    ...t,
+    a: Tt(s),
     format: u,
     ok: d
   };
-}, ao = "1.0.9";
+}, oo = "1.0.13";
 class y {
   // bring main utilities to front
   static matchers = I;
-  static isOnePointZero = ye;
-  static isPercentage = $t;
+  static isOnePointZero = $e;
+  static isPercentage = Kt;
   static isValidCSSUnit = H;
-  static isNonColor = ke;
-  static isColorName = Se;
+  static isNonColor = ve;
+  static isColorName = ke;
   static isColorType = nt;
   static pad2 = G;
   static clamp01 = ut;
-  static bound01 = R;
-  static boundAlpha = Ot;
-  static getRGBFromName = Pe;
-  static convertHexToDecimal = Dt;
-  static convertDecimalToHex = Ce;
-  static rgbToHsl = oe;
-  static rgbToHex = ne;
-  static rgbToHsv = re;
-  static rgbToHwb = se;
-  static rgbaToHex = At;
-  static hslToRgb = Ft;
-  static hsvToRgb = Ft;
+  static bound01 = E;
+  static boundAlpha = Tt;
+  static getRGBFromName = ye;
+  static convertHexToDecimal = Mt;
+  static convertDecimalToHex = xe;
+  static rgbToHsl = Zt;
+  static rgbToHex = St;
+  static rgbToHsv = Yt;
+  static rgbToHwb = Qt;
+  static rgbaToHex = Ct;
+  static hslToRgb = Rt;
+  static hsvToRgb = Rt;
   static hueToRgb = ft;
-  static hwbToRgb = Le;
+  static hwbToRgb = Se;
   static parseIntFromHex = N;
-  static stringInputToObject = Ae;
-  static inputToRGB = ie;
-  static roundPart = v;
-  static webColors = wt;
-  static nonColors = Gt;
-  static version = ao;
+  static stringInputToObject = Ce;
+  static inputToRGB = te;
+  static roundPart = m;
+  static webColors = mt;
+  static nonColors = Vt;
+  static version = oo;
   // main public properties
   r;
   g;
@@ -1588,7 +1534,7 @@ class y {
   originalInput;
   // main public methods
   constructor(t, e) {
-    const s = e && xe.includes(e) ? e : "", { r, g: n, b: i, a, ok: l, format: c } = ie(t);
+    const s = e && we.includes(e) ? e : "", { r, g: n, b: i, a, ok: l, format: c } = te(t);
     this.originalInput = t, this.r = r, this.g = n, this.b = i, this.a = a, this.ok = l, this.format = s || c;
   }
   /**
@@ -1624,7 +1570,7 @@ class y {
    * Returns the web colour name closest to the current colour.
    */
   get name() {
-    const { r: t, g: e, b: s } = this.toRgb(), [r] = wt.map(([n, i]) => {
+    const { r: t, g: e, b: s } = this.toRgb(), [r] = mt.map(([n, i]) => {
       const a = (
         // ((rgb.r - r) ** 2 + (rgb.g - g) ** 2 + (rgb.b - b) ** 2) ** 0.5; // standard
         (((i.r - t) * 0.3) ** 2 + ((i.g - e) * 0.6) ** 2 + ((i.b - s) * 0.1) ** 2) ** 0.5
@@ -1638,7 +1584,7 @@ class y {
    */
   toRgb() {
     let { r: t, g: e, b: s, a: r } = this;
-    return [t, e, s] = [t, e, s].map((n) => v(n * 255 * 100) / 100), r = v(r * 100) / 100, {
+    return [t, e, s] = [t, e, s].map((n) => m(n * 255 * 100) / 100), r = m(r * 100) / 100, {
       r: t,
       g: e,
       b: s,
@@ -1651,7 +1597,7 @@ class y {
    * * rgba(255,255,255,0.5)
    */
   toRgbString() {
-    const { r: t, g: e, b: s, a: r } = this.toRgb(), [n, i, a] = [t, e, s].map(v);
+    const { r: t, g: e, b: s, a: r } = this.toRgb(), [n, i, a] = [t, e, s].map(m);
     return r === 1 ? `rgb(${n}, ${i}, ${a})` : `rgba(${n}, ${i}, ${a}, ${r})`;
   }
   /**
@@ -1660,7 +1606,7 @@ class y {
    * * rgb(255 255 255 / 50%)
    */
   toRgbCSS4String() {
-    const { r: t, g: e, b: s, a: r } = this.toRgb(), [n, i, a] = [t, e, s].map(v), l = r === 1 ? "" : ` / ${v(r * 100)}%`;
+    const { r: t, g: e, b: s, a: r } = this.toRgb(), [n, i, a] = [t, e, s].map(m), l = r === 1 ? "" : ` / ${m(r * 100)}%`;
     return `rgb(${n} ${i} ${a}${l})`;
   }
   /**
@@ -1668,8 +1614,8 @@ class y {
    * it will find a 3 characters shorthand of the decimal value.
    */
   toHex(t) {
-    const { r: e, g: s, b: r, a: n } = this.toRgb();
-    return n === 1 ? ne(e, s, r, t) : At(e, s, r, n, t);
+    let { r: e, g: s, b: r, a: n } = this;
+    return [e, s, r] = [e, s, r].map((i) => m(i * 255)), n = m(n * 100) / 100, n === 1 ? St(e, s, r, t) : Ct(e, s, r, n, t);
   }
   /**
    * Returns the CSS valid hexadecimal vaue of the colour. When the parameter is *true*
@@ -1682,8 +1628,8 @@ class y {
    * Returns the HEX8 value of the colour.
    */
   toHex8(t) {
-    const { r: e, g: s, b: r, a: n } = this.toRgb();
-    return At(e, s, r, n, t);
+    let { r: e, g: s, b: r, a: n } = this;
+    return [e, s, r] = [e, s, r].map((i) => m(i * 255)), n = m(n * 100) / 100, n === 1 ? St(e, s, r, t) : Ct(e, s, r, n, t);
   }
   /**
    * Returns the HEX8 value of the colour.
@@ -1695,7 +1641,7 @@ class y {
    * Returns the colour as a HSVA object.
    */
   toHsv() {
-    const { r: t, g: e, b: s, a: r } = this, { h: n, s: i, v: a } = re(t, e, s);
+    const { r: t, g: e, b: s, a: r } = this, { h: n, s: i, v: a } = Yt(t, e, s);
     return {
       h: n,
       s: i,
@@ -1707,7 +1653,7 @@ class y {
    * Returns the colour as an HSLA object.
    */
   toHsl() {
-    const { r: t, g: e, b: s, a: r } = this, { h: n, s: i, l: a } = oe(t, e, s);
+    const { r: t, g: e, b: s, a: r } = this, { h: n, s: i, l: a } = Zt(t, e, s);
     return {
       h: n,
       s: i,
@@ -1722,7 +1668,7 @@ class y {
    */
   toHslString() {
     let { h: t, s: e, l: s, a: r } = this.toHsl();
-    return t = v(t * 360), e = v(e * 100), s = v(s * 100), r = v(r * 100) / 100, r === 1 ? `hsl(${t}, ${e}%, ${s}%)` : `hsla(${t}, ${e}%, ${s}%, ${r})`;
+    return t = m(t * 360), e = m(e * 100), s = m(s * 100), r = m(r * 100) / 100, r === 1 ? `hsl(${t}, ${e}%, ${s}%)` : `hsla(${t}, ${e}%, ${s}%, ${r})`;
   }
   /**
    * Returns the HSLA values concatenated into a CSS4 Module format string.
@@ -1731,15 +1677,15 @@ class y {
    */
   toHslCSS4String() {
     let { h: t, s: e, l: s, a: r } = this.toHsl();
-    t = v(t * 360), e = v(e * 100), s = v(s * 100), r = v(r * 100);
-    const n = r < 100 ? ` / ${v(r)}%` : "";
+    t = m(t * 360), e = m(e * 100), s = m(s * 100), r = m(r * 100);
+    const n = r < 100 ? ` / ${m(r)}%` : "";
     return `hsl(${t}deg ${e}% ${s}%${n})`;
   }
   /**
    * Returns the colour as an HWBA object.
    */
   toHwb() {
-    const { r: t, g: e, b: s, a: r } = this, { h: n, w: i, b: a } = se(t, e, s);
+    const { r: t, g: e, b: s, a: r } = this, { h: n, w: i, b: a } = Qt(t, e, s);
     return {
       h: n,
       w: i,
@@ -1752,22 +1698,22 @@ class y {
    */
   toHwbString() {
     let { h: t, w: e, b: s, a: r } = this.toHwb();
-    t = v(t * 360), e = v(e * 100), s = v(s * 100), r = v(r * 100);
-    const n = r < 100 ? ` / ${v(r)}%` : "";
+    t = m(t * 360), e = m(e * 100), s = m(s * 100), r = m(r * 100);
+    const n = r < 100 ? ` / ${m(r)}%` : "";
     return `hwb(${t}deg ${e}% ${s}%${n})`;
   }
   /**
    * Sets the alpha value of the current colour.
    */
   setAlpha(t) {
-    return typeof t != "number" ? this : (this.a = Ot(t), this);
+    return typeof t != "number" ? this : (this.a = Tt(t), this);
   }
   /**
    * Saturate the colour with a given amount.
    */
   saturate(t) {
     if (typeof t != "number") return this;
-    const { h: e, s, l: r } = this.toHsl(), { r: n, g: i, b: a } = lt(e, ut(s + t / 100), r);
+    const { h: e, s, l: r } = this.toHsl(), { r: n, g: i, b: a } = at(e, ut(s + t / 100), r);
     return Object.assign(this, { r: n, g: i, b: a }), this;
   }
   /**
@@ -1788,7 +1734,7 @@ class y {
    */
   lighten(t) {
     if (typeof t != "number") return this;
-    const { h: e, s, l: r } = this.toHsl(), { r: n, g: i, b: a } = lt(e, s, ut(r + t / 100));
+    const { h: e, s, l: r } = this.toHsl(), { r: n, g: i, b: a } = at(e, s, ut(r + t / 100));
     return Object.assign(this, { r: n, g: i, b: a }), this;
   }
   /**
@@ -1803,7 +1749,11 @@ class y {
    */
   spin(t) {
     if (typeof t != "number") return this;
-    const { h: e, s, l: r } = this.toHsl(), { r: n, g: i, b: a } = lt(ut((e * 360 + t) % 360 / 360), s, r);
+    const { h: e, s, l: r } = this.toHsl(), { r: n, g: i, b: a } = at(
+      ut((e * 360 + t) % 360 / 360),
+      s,
+      r
+    );
     return Object.assign(this, { r: n, g: i, b: a }), this;
   }
   /** Returns a clone of the current `Color` instance. */
@@ -1818,7 +1768,7 @@ class y {
     return e === "hex" ? this.toHexString(t) : e === "hsl" ? this.toHslString() : e === "hwb" ? this.toHwbString() : this.toRgbString();
   }
 }
-class It {
+class Ot {
   static Color = y;
   hue;
   hueSteps;
@@ -1839,7 +1789,9 @@ class It {
     else if (t.length === 3)
       [e, s, r] = t;
     else if (t.length === 2 && ([s, r] = t, [s, r].some((g) => g < 1)))
-      throw TypeError("ColorPalette: the two minimum arguments must be numbers higher than 0.");
+      throw TypeError(
+        "ColorPalette: the two minimum arguments must be numbers higher than 0."
+      );
     const a = [], l = 360 / s, c = y.roundPart((r - (r % 2 ? 1 : 0)) / 2), h = [0.25, 0.2, 0.15, 0.11, 0.09, 0.075], b = [
       [1, 2, 3],
       [4, 5],
@@ -1853,16 +1805,18 @@ class It {
     for (let g = 1; g < r - c; g += 1)
       n = [0.5 - d * g, ...n];
     for (let g = 0; g < s; g += 1) {
-      const p = (e + g * l) % 360 / 360;
+      const p = (e + g * l) % 360;
       n.forEach((f) => {
-        const w = new y({ h: p, s: 1, l: f });
-        a.push(i < 100 ? w.saturate(i - 100) : w);
+        const $ = new y({ h: p, s: 100, l: f * 100 });
+        a.push(
+          i < 100 ? $.saturate(i - 100) : $
+        );
       });
     }
     this.hue = e, this.hueSteps = s, this.lightSteps = r, this.saturation = i, this.colors = a;
   }
 }
-const Kt = {
+const Dt = {
   pickerLabel: "Colour Picker",
   appearanceLabel: "Colour Appearance",
   valueLabel: "Colour Value",
@@ -1898,23 +1852,23 @@ const Kt = {
   "violet",
   "magenta",
   "pink"
-], ae = (o) => {
-  if (!B(o)) return !1;
+], ee = (o) => {
+  if (!q(o)) return !1;
   try {
     JSON.parse(o);
   } catch {
     return !1;
   }
   return !0;
-}, Vt = "v-hidden", lo = (o) => {
+}, Ft = "v-hidden", so = (o) => {
   const { format: t, id: e, componentLabels: s } = o, r = x({
     tagName: "div",
     className: `color-form ${t}`
   });
   let n = ["hex"];
   return t === "rgb" ? n = ["red", "green", "blue", "alpha"] : t === "hsl" ? n = ["hue", "saturation", "lightness", "alpha"] : t === "hwb" && (n = ["hue", "whiteness", "blackness", "alpha"]), n.forEach((i) => {
-    const [a] = t === "hex" ? ["#"] : pe(i).split(""), l = `color_${t}_${i}_${e}`, c = s[`${i}Label`], h = x({ tagName: "label" });
-    m(h, "for", l), h.append(
+    const [a] = t === "hex" ? ["#"] : he(i).split(""), l = `color_${t}_${i}_${e}`, c = s[`${i}Label`], h = x({ tagName: "label" });
+    v(h, "for", l), h.append(
       x({
         tagName: "span",
         ariaHidden: "true",
@@ -1922,7 +1876,7 @@ const Kt = {
       }),
       x({
         tagName: "span",
-        className: Vt,
+        className: Ft,
         innerText: c
       })
     );
@@ -1937,14 +1891,21 @@ const Kt = {
       spellcheck: !1
     });
     let u = "100", d = "1";
-    i !== "alpha" && (t === "rgb" ? (u = "255", d = "1") : i === "hue" && (u = "360", d = "1")), K(b, {
+    i !== "alpha" && (t === "rgb" ? (u = "255", d = "1") : i === "hue" && (u = "360", d = "1")), V(b, {
       min: "0",
       max: u,
       step: d
     }), r.append(h, b);
   }), r;
-}, co = (o) => {
-  const { format: t, componentLabels: e } = o, { hueLabel: s, alphaLabel: r, lightnessLabel: n, saturationLabel: i, whitenessLabel: a, blacknessLabel: l } = e, c = t === "hsl" ? 360 : 100, h = t === "hsl" ? 100 : 360, b = 100;
+}, ro = (o) => {
+  const { format: t, componentLabels: e } = o, {
+    hueLabel: s,
+    alphaLabel: r,
+    lightnessLabel: n,
+    saturationLabel: i,
+    whitenessLabel: a,
+    blacknessLabel: l
+  } = e, c = t === "hsl" ? 360 : 100, h = t === "hsl" ? 100 : 360, b = 100;
   let u = t === "hsl" ? `${s} & ${n}` : `${n} & ${i}`;
   u = t === "hwb" ? `${a} & ${l}` : u;
   const d = t === "hsl" ? `${i}` : `${s}`, g = x({
@@ -1973,13 +1934,13 @@ const Kt = {
       min: 0,
       max: b
     }
-  ].forEach(($) => {
-    const { i: S, c: L, l: P, min: C, max: M } = $, E = x({
+  ].forEach((w) => {
+    const { i: S, c: L, l: C, min: P, max: M } = w, T = x({
       tagName: "div",
       className: "color-control",
       role: "presentation"
     });
-    E.append(
+    T.append(
       x({
         tagName: "div",
         className: `visual-control visual-control${S}`
@@ -1989,53 +1950,61 @@ const Kt = {
       tagName: "div",
       className: `${L} knob`,
       ariaLive: "polite",
-      ariaLabel: P,
+      ariaLabel: C,
       role: "slider",
       tabIndex: 0,
-      ariaValueMin: `${C}`,
+      ariaValueMin: `${P}`,
       ariaValueMax: `${M}`
     });
-    E.append(A), g.append(E);
+    T.append(A), g.append(T);
   }), g;
-}, le = (o, t, e) => {
-  const { input: s, format: r, componentLabels: n } = o, { defaultsLabel: i, presetsLabel: a } = n, l = e === "color-options", c = t instanceof It, h = l ? a : i, b = c ? t.colors : t, u = b.length, { lightSteps: d } = c ? t : { lightSteps: null }, g = d || [9, 10].find((A) => u >= A * 2 && !(u % A)) || 5, p = l && u > g;
+}, oe = (o, t, e) => {
+  const { input: s, format: r, componentLabels: n } = o, { defaultsLabel: i, presetsLabel: a } = n, l = e === "color-options", c = t instanceof Ot, h = l ? a : i, b = c ? t.colors : t, u = b.length, { lightSteps: d } = c ? t : { lightSteps: null }, g = d || [9, 10].find((A) => u >= A * 2 && !(u % A)) || 5, p = l && u > g;
   let f = 2;
   f = p && u > g * 2 ? 3 : f, f = p && u > g * 3 ? 4 : f, f = p && u > g * 4 ? 5 : f;
-  const w = f - (u <= g * 3 ? 1 : 2), $ = p && u > w * g;
+  const $ = f - (u <= g * 3 ? 1 : 2), w = p && u > $ * g;
   let S = e;
-  S += $ ? " scrollable" : "", S += p ? " multiline" : "";
+  S += w ? " scrollable" : "", S += p ? " multiline" : "";
   const L = p ? "1px" : "0.25rem";
-  let P = p ? 1.75 : 2;
-  P = g > 5 && p ? 1.5 : P;
-  const C = `${w * P}rem`, M = `calc(${f} * ${P}rem + ${f - 1} * ${L})`, E = x({
+  let C = p ? 1.75 : 2;
+  C = g > 5 && p ? 1.5 : C;
+  const P = `${$ * C}rem`, M = `calc(${f} * ${C}rem + ${f - 1} * ${L})`, T = x({
     tagName: "ul",
     className: S,
     role: "listbox",
     ariaLabel: h
   });
-  return $ && D(E, {
-    "--grid-item-size": `${P}rem`,
+  return w && D(T, {
+    "--grid-item-size": `${C}rem`,
     "--grid-fit": `${g}`,
     "--grid-gap": L,
-    "--grid-height": C,
+    "--grid-height": P,
     "--grid-hover-height": M
   }), b.forEach((A) => {
-    let [F, Q] = typeof A == "string" ? A.trim().split(":") : [];
-    A instanceof y && (F = A.toHexString(), Q = F);
-    const Ut = new y(A instanceof y ? A : F, r).toString() === yt(s, "value"), xt = x({
+    let [F, Y] = typeof A == "string" ? A.trim().split(":") : [];
+    A instanceof y && (F = A.toHexString(), Y = F);
+    const Bt = new y(A instanceof y ? A : F, r).toString() === vt(s, "value"), $t = x({
       tagName: "li",
-      className: `color-option${Ut ? " active" : ""}`,
-      innerText: `${Q || F}`,
+      className: `color-option${Bt ? " active" : ""}`,
+      innerText: `${Y || F}`,
       tabIndex: 0,
       role: "option",
-      ariaSelected: Ut ? "true" : "false"
+      ariaSelected: Bt ? "true" : "false"
     });
-    m(xt, "data-value", `${F}`), l && D(xt, { backgroundColor: F }), E.append(xt);
-  }), E;
-}, ho = (o) => {
-  const { input: t, parent: e, format: s, id: r, componentLabels: n, colorKeywords: i, colorPresets: a } = o, l = yt(t, "value") || "#fff", { nonColors: c } = y, { toggleLabel: h, pickerLabel: b, formatLabel: u, hexLabel: d } = n, g = c.includes(l) ? "#fff" : l;
+    v($t, "data-value", `${F}`), l && D($t, { backgroundColor: F }), T.append($t);
+  }), T;
+}, no = (o) => {
+  const {
+    input: t,
+    parent: e,
+    format: s,
+    id: r,
+    componentLabels: n,
+    colorKeywords: i,
+    colorPresets: a
+  } = o, l = vt(t, "value") || "#fff", { nonColors: c } = y, { toggleLabel: h, pickerLabel: b, formatLabel: u, hexLabel: d } = n, g = c.includes(l) ? "#fff" : l;
   o.color = new y(g, s);
-  const p = s === "hex" ? d : pe(s), f = x({
+  const p = s === "hex" ? d : he(s), f = x({
     id: `picker-btn-${r}`,
     tagName: "button",
     type: "button",
@@ -2046,81 +2015,91 @@ const Kt = {
   f.append(
     x({
       tagName: "span",
-      className: Vt,
+      className: Ft,
       innerText: `${b}. ${u}: ${p}`
     })
   );
-  const w = x({
-    tagName: "div",
-    className: "color-dropdown picker",
-    role: "group",
-    ariaLabelledBy: `picker-btn-${r}`
-  }), $ = co(o), S = lo(o);
-  if (w.append($, S), t.before(f), e.append(w), i || a) {
+  const $ = x(
+    {
+      tagName: "div",
+      className: "color-dropdown picker",
+      role: "group",
+      ariaLabelledBy: `picker-btn-${r}`
+    }
+  ), w = ro(o), S = so(o);
+  if ($.append(w, S), t.before(f), e.append($), i || a) {
     const L = x({
       tagName: "div",
       className: "color-dropdown scrollable menu"
     });
-    a && L.append(le(o, a, "color-options")), i && i.length && L.append(le(o, i, "color-defaults"));
-    const P = x({
+    a && L.append(oe(o, a, "color-options")), i && i.length && L.append(
+      oe(o, i, "color-defaults")
+    );
+    const C = x({
       tagName: "button",
       type: "button",
       className: "menu-toggle btn-appearance",
       tabIndex: -1,
       ariaExpanded: "false",
       ariaHasPopup: "true"
-    }), C = encodeURI("http://www.w3.org/2000/svg"), M = Mt(C, {
+    }), P = encodeURI("http://www.w3.org/2000/svg"), M = Ht(P, {
       tagName: "svg"
     });
-    m(M, "xmlns", C), m(M, "viewBox", "0 0 512 512"), m(M, Ee, "true");
-    const E = Mt(C, {
+    v(M, "xmlns", P), v(M, "viewBox", "0 0 512 512"), v(M, Ae, "true");
+    const T = Ht(P, {
       tagName: "path"
     });
-    m(E, "d", "M98,158l157,156L411,158l27,27L255,368L71,185L98,158z"), m(E, "fill", "#fff"), M.append(E), P.append(
+    v(
+      T,
+      "d",
+      "M98,158l157,156L411,158l27,27L255,368L71,185L98,158z"
+    ), v(T, "fill", "#fff"), M.append(T), C.append(
       x({
         tagName: "span",
-        className: Vt,
+        className: Ft,
         innerText: `${h}`
       }),
       M
-    ), e.append(P, L);
+    ), e.append(C, L);
   }
-  i && c.includes(l) && (o.value = l), m(t, X, "-1");
-}, go = "2.0.1", Y = "color-picker", uo = `[data-function="${Y}"]`, ce = `.${Y}`, bo = {
-  componentLabels: Kt,
+  i && c.includes(l) && (o.value = l), v(t, Z, "-1");
+}, io = "2.0.3", Q = "color-picker", ao = `[data-function="${Q}"]`, se = `.${Q}`, lo = {
+  componentLabels: Dt,
   colorLabels: it,
   format: "rgb",
   colorPresets: !1,
   colorKeywords: !1
-}, { roundPart: k, nonColors: bt } = y, po = (o) => Xe(o, Y), fo = (o) => new mo(o), he = (o, t) => {
-  const e = t ? Bt : jt, { input: s, pickerToggle: r, menuToggle: n } = o;
-  e(s, Re, o.showPicker), e(r, Et, o.togglePicker), n && e(n, Et, o.toggleMenu);
-}, He = (o, t) => {
-  const e = t ? Bt : jt, { input: s, colorMenu: r, parent: n } = o, i = V(s), a = so(i);
-  e(o.controls, Fe, o.pointerDown), o.controlKnobs.forEach((l) => e(l, zt, o.handleKnobs)), e(a, Ve, o.handleScroll), e(a, Ke, o.update), [s, ...o.inputs].forEach((l) => e(l, Me, o.changeHandler)), r && (e(r, Et, o.menuClickHandler), e(r, zt, o.menuKeyHandler)), e(i, ue, o.pointerMove), e(i, Ie, o.pointerUp), e(n, Oe, o.handleFocusOut), e(i, De, o.handleDismiss);
-}, ge = (o) => {
-  Ze(o.input, new CustomEvent("colorpicker.change"));
-}, Ne = (o) => {
+}, { roundPart: k, nonColors: bt } = y, co = (o) => je(o, Q), ho = (o) => new go(o), re = (o, t) => {
+  const e = t ? ae : le, { input: s, pickerToggle: r, menuToggle: n } = o;
+  e(s, Ne, o.showPicker), e(r, At, o.togglePicker), n && e(n, At, o.toggleMenu);
+}, Pe = (o, t) => {
+  const e = t ? ae : le, { input: s, colorMenu: r, parent: n } = o, i = K(s), a = Je(i);
+  e(o.controls, Me, o.pointerDown), o.controlKnobs.forEach((l) => e(l, qt, o.handleKnobs)), e(a, De, o.handleScroll), e(a, Oe, o.update), [s, ...o.inputs].forEach(
+    (l) => e(l, He, o.changeHandler)
+  ), r && (e(r, At, o.menuClickHandler), e(r, qt, o.menuKeyHandler)), e(i, ie, o.pointerMove), e(i, Re, o.pointerUp), e(n, Ee, o.handleFocusOut), e(i, Te, o.handleDismiss);
+}, ne = (o) => {
+  We(o.input, new CustomEvent("colorpicker.change"));
+}, Le = (o) => {
   o && ["bottom", "top"].forEach((t) => O(o, t));
-}, Ht = (o, t) => {
+}, Pt = (o, t) => {
   const { colorPicker: e, colorMenu: s, menuToggle: r, pickerToggle: n, parent: i } = o, a = t === e, l = a ? s : e, c = a ? r : n, h = a ? n : r;
-  T(i, "open") || q(i, "open"), l && (O(l, "show"), Ne(l)), q(t, "bottom"), eo(t), q(t, "show"), a && o.update(), o.isOpen || (He(o, !0), o.updateDropdownPosition(), o.isOpen = !0, m(o.input, X, "0"), r && m(r, X, "0")), m(h, Nt, "true"), c && m(c, Nt, "false");
+  R(i, "open") || j(i, "open"), l && (O(l, "show"), Le(l)), j(t, "bottom"), ze(t), j(t, "show"), a && o.update(), o.isOpen || (Pe(o, !0), o.updateDropdownPosition(), o.isOpen = !0, v(o.input, Z, "0"), r && v(r, Z, "0")), v(h, Lt, "true"), c && v(c, Lt, "false");
 };
-class mo {
+class go {
   // bring utils to staic
   static Color = y;
-  static ColorPalette = It;
-  static getInstance = po;
-  static init = fo;
-  static selector = uo;
+  static ColorPalette = Ot;
+  static getInstance = co;
+  static init = ho;
+  static selector = ao;
   // utils important for render
   static roundPart = k;
   static setElementStyle = D;
-  static setAttribute = m;
+  static setAttribute = v;
   static getBoundingClientRect = gt;
-  static version = go;
+  static version = io;
   static colorNames = it;
-  static colorPickerLabels = Kt;
+  static colorPickerLabels = Dt;
   id;
   input;
   color;
@@ -2129,7 +2108,9 @@ class mo {
   dragElement;
   isOpen = !1;
   controlPositions;
-  colorLabels = Zt(it.map((t) => [t, t]));
+  colorLabels = Ut(
+    it.map((t) => [t, t])
+  );
   colorKeywords;
   colorPresets;
   componentLabels;
@@ -2149,37 +2130,73 @@ class mo {
    * @param config instance options
    */
   constructor(t, e) {
-    const s = z(t);
-    if (typeof t > "u") throw new TypeError("ColorPicker target not specified.");
-    if (B(t) && !s) throw new TypeError(`ColorPicker target "${t}" cannot be found.`);
+    const s = _(t);
+    if (typeof t > "u")
+      throw new TypeError("ColorPicker target not specified.");
+    if (!ge(s))
+      throw new TypeError(`ColorPicker target "${t}" cannot be found.`);
     this.input = s;
-    const r = fe(s, ce);
-    if (!r) throw new TypeError("ColorPicker requires a specific markup to work.");
-    this.parent = r, this.id = de(s, Y), this.dragElement = void 0, this.isOpen = !1, this.controlPositions = {
+    const r = be(s, se);
+    if (!r)
+      throw new TypeError("ColorPicker requires a specific markup to work.");
+    this.parent = r, this.id = ue(s, Q), this.dragElement = void 0, this.isOpen = !1, this.controlPositions = {
       c1x: 0,
       c1y: 0,
       c2y: 0,
       c3y: 0
     }, this.colorKeywords = !1, this.colorPresets = !1;
-    const { format: n, componentLabels: i, colorLabels: a, colorKeywords: l, colorPresets: c } = to(
+    const {
+      format: n,
+      componentLabels: i,
+      colorLabels: a,
+      colorKeywords: l,
+      colorPresets: c
+    } = _e(
       s,
-      bo,
+      lo,
       e || {}
     );
     let h = it;
-    Lt(a) && a.length === 17 ? h = a : B(a) && a.split(",").length === 17 && (h = a.split(",")), K(this.colorLabels, Zt(h.map((p, f) => [it[f], p])));
-    const b = B(i) && ae(i) ? JSON.parse(i) : i;
-    if (this.componentLabels = K({ ...Kt }, b), this.color = new y(s.value || "#fff", n), this.format = n, Lt(l) && l.length ? this.colorKeywords = l : B(l) && l.length && (this.colorKeywords = l.split(",").map((p) => p.trim())), Lt(c) && c.length)
+    xt(a) && a.length === 17 ? h = a : q(a) && a.split(",").length === 17 && (h = a.split(",")), V(
+      this.colorLabels,
+      Ut(
+        h.map((p, f) => [it[f], p])
+      )
+    );
+    const b = q(i) && ee(i) ? JSON.parse(i) : i;
+    if (this.componentLabels = V(
+      { ...Dt },
+      b
+    ), this.color = new y(s.value || "#fff", n), this.format = n, xt(l) && l.length ? this.colorKeywords = l : q(l) && l.length && (this.colorKeywords = l.split(",").map((p) => p.trim())), xt(c) && c.length)
       this.colorPresets = c;
-    else if (c && ae(c)) {
-      const { hue: p, hueSteps: f, lightSteps: w, saturation: $ } = JSON.parse(c);
-      this.colorPresets = new It(p, f, w, $);
-    } else B(c) && (this.colorPresets = c.split(",").map((p) => p.trim()));
-    ho(this);
-    const [u, d] = st("color-dropdown", r);
-    this.pickerToggle = z(".picker-toggle", r), this.menuToggle = z(".menu-toggle", r), this.colorPicker = u, this.colorMenu = d, this.inputs = [...st("color-input", r)];
-    const [g] = st("color-controls", r);
-    this.controls = g, this.controlKnobs = [...st("knob", g)], this.visuals = [...st("visual-control", g)], this.update(), he(this, !0), ct.set(s, Y, this);
+    else if (c && ee(c)) {
+      const { hue: p, hueSteps: f, lightSteps: $, saturation: w } = JSON.parse(
+        c
+      );
+      this.colorPresets = new Ot(
+        p,
+        f,
+        $,
+        w
+      );
+    } else q(c) && (this.colorPresets = c.split(",").map((p) => p.trim()));
+    no(this);
+    const [u, d] = st(
+      "color-dropdown",
+      r
+    );
+    this.pickerToggle = _(".picker-toggle", r), this.menuToggle = _(".menu-toggle", r), this.colorPicker = u, this.colorMenu = d, this.inputs = [
+      ...st("color-input", r)
+    ];
+    const [g] = st(
+      "color-controls",
+      r
+    );
+    this.controls = g, this.controlKnobs = [
+      ...st("knob", g)
+    ], this.visuals = [
+      ...st("visual-control", g)
+    ], this.update(), re(this, !0), lt.set(s, Q, this);
   }
   /** Returns the current colour value */
   get value() {
@@ -2257,10 +2274,10 @@ class mo {
   }
   /** Updates `ColorPicker` visuals. */
   updateVisuals() {
-    const { controlPositions: t, visuals: e } = this, [s, r, n] = e, { offsetHeight: i } = s, a = t.c2y / i, { r: l, g: c, b: h } = new y({ h: a, s: 1, l: 0.5 }).toRgb(), b = "linear-gradient(rgb(255,255,255) 0%, rgb(255,255,255) 100%)", u = 1 - t.c3y / i, d = k(u * 100) / 100, g = new y({
-      h: a,
-      s: 1,
-      l: 0.5,
+    const { controlPositions: t, visuals: e } = this, [s, r, n] = e, { offsetHeight: i } = s, a = t.c2y / i, { r: l, g: c, b: h } = new y({ h: a * 360, s: 100, l: 50 }).toRgb(), b = "linear-gradient(rgb(255,255,255) 0%, rgb(255,255,255) 100%)", u = 1 - t.c3y / i, d = k(u * 100) / 100, g = new y({
+      h: a * 360,
+      s: 100,
+      l: 50,
       a: u
     }).toRgbString(), p = `linear-gradient(
       rgb(255,0,0) 0%, rgb(255,255,0) 16.67%,
@@ -2291,7 +2308,7 @@ class mo {
    * @this {ColorPicker}
    */
   handleDismiss = ({ code: t }) => {
-    this.isOpen && t === qe && this.hide();
+    this.isOpen && t === Ve && this.hide();
   };
   /**
    * The `ColorPicker` *scroll* event listener when open.
@@ -2299,8 +2316,8 @@ class mo {
    * @param e
    */
   handleScroll = (t) => {
-    const { activeElement: e } = V(this.input);
-    this.updateDropdownPosition(), ([ue, Be].includes(t.type) && this.dragElement || e && this.controlKnobs.includes(e)) && (t.stopPropagation(), t.preventDefault());
+    const { activeElement: e } = K(this.input);
+    this.updateDropdownPosition(), ([ie, Fe].includes(t.type) && this.dragElement || e && this.controlKnobs.includes(e)) && (t.stopPropagation(), t.preventDefault());
   };
   /**
    * The `ColorPicker` keyboard event listener for menu navigation.
@@ -2308,8 +2325,8 @@ class mo {
    * @param e
    */
   menuKeyHandler = (t) => {
-    const { target: e, code: s } = t, { previousElementSibling: r, nextElementSibling: n, parentElement: i } = e, a = i && T(i, "color-options"), l = i ? [...i.children] : [], c = a && Tt(i, "grid-template-columns").split(" ").length, h = l.indexOf(e), b = h > -1 && c && l[h - c], u = h > -1 && c && l[h + c];
-    [j, ot, Wt].includes(s) && t.preventDefault(), a ? b && s === ot ? _(b) : u && s === j ? _(u) : r && s === ht ? _(r) : n && s === U && _(n) : r && [ht, ot].includes(s) ? _(r) : n && [U, j].includes(s) && _(n), [je, Wt].includes(s) && this.menuClickHandler(t);
+    const { target: e, code: s } = t, { previousElementSibling: r, nextElementSibling: n, parentElement: i } = e, a = i && R(i, "color-options"), l = i ? [...i.children] : [], c = a && Number(Nt(i, "--grid-fit")), h = l.indexOf(e), b = h > -1 && c && l[h - c], u = h > -1 && c && l[h + c];
+    [B, ot, Gt].includes(s) && t.preventDefault(), a ? b && s === ot ? U(b) : u && s === B ? U(u) : r && s === ht ? U(r) : n && s === W && U(n) : r && [ht, ot].includes(s) ? U(r) : n && [W, B].includes(s) && U(n), [Ie, Gt].includes(s) && this.menuClickHandler(t);
   };
   /**
    * The `ColorPicker` click event listener for the colour menu presets / defaults.
@@ -2318,18 +2335,21 @@ class mo {
    * @this {ColorPicker}
    */
   menuClickHandler = (t) => {
-    const { target: e } = t, { colorMenu: s } = this, r = (yt(e, "data-value") || "").trim();
+    const { target: e } = t, { colorMenu: s } = this, r = (vt(
+      e,
+      "data-value"
+    ) || "").trim();
     if (!r.length) return;
-    const n = z("li.active", s);
+    const n = _("li.active", s);
     let i = r;
     i = bt.includes(i) ? "white" : i, i = i === "transparent" ? "rgba(0,0,0,0)" : i;
     const { r: a, g: l, b: c, a: h } = new y(i);
-    K(this.color, {
+    V(this.color, {
       r: a,
       g: l,
       b: c,
       a: h
-    }), this.update(), n !== e && (n && (O(n, "active"), Pt(n, St)), q(e, "active"), m(e, St, "true"), bt.includes(r) && (this.value = r), ge(this));
+    }), this.update(), n !== e && (n && (O(n, "active"), kt(n, wt)), j(e, "active"), v(e, wt, "true"), bt.includes(r) && (this.value = r), ne(this));
   };
   /**
    * The `ColorPicker` *touchstart* / *mousedown* events listener for control knobs.
@@ -2338,10 +2358,10 @@ class mo {
    */
   pointerDown = (t) => {
     if (t.button !== 0) return;
-    const { target: e, pageX: s, pageY: r } = t, { colorMenu: n, visuals: i, controlKnobs: a } = this, [l, c, h] = i, [b, u, d] = a, g = a.includes(e) ? e.previousElementSibling : e, p = gt(g), f = Ct(l), w = s - f.scrollLeft - p.left, $ = r - f.scrollTop - p.top;
-    if (e === l || e === b ? (this.dragElement = g, this.changeControl1(w, $)) : e === c || e === u ? (this.dragElement = g, this.changeControl2($)) : (e === h || e === d) && (this.dragElement = g, this.changeAlpha($)), n) {
-      const S = z("li.active", n);
-      S && (O(S, "active"), Pt(S, St));
+    const { target: e, pageX: s, pageY: r } = t, { colorMenu: n, visuals: i, controlKnobs: a } = this, [l, c, h] = i, [b, u, d] = a, g = a.includes(e) ? e.previousElementSibling : e, p = gt(g), f = yt(l), $ = s - f.scrollLeft - p.left, w = r - f.scrollTop - p.top;
+    if (e === l || e === b ? (this.dragElement = g, this.changeControl1($, w)) : e === c || e === u ? (this.dragElement = g, this.changeControl2(w)) : (e === h || e === d) && (this.dragElement = g, this.changeAlpha(w)), n) {
+      const S = _("li.active", n);
+      S && (O(S, "active"), kt(S, wt));
     }
     t.preventDefault();
   };
@@ -2352,7 +2372,7 @@ class mo {
    * @this
    */
   pointerUp = ({ target: t }) => {
-    const { parent: e } = this, s = V(e), r = z(`${ce}.open`, s) !== null, n = s.getSelection();
+    const { parent: e } = this, s = K(e), r = _(`${se}.open`, s) !== null, n = s.getSelection();
     !this.dragElement && (!n || !n.toString().length) && !e.contains(t) && this.hide(r), this.dragElement = void 0;
   };
   /**
@@ -2363,7 +2383,7 @@ class mo {
   pointerMove = (t) => {
     const { dragElement: e, visuals: s } = this, [r, n, i] = s, { pageX: a, pageY: l } = t;
     if (!e) return;
-    const c = gt(e), h = Ct(r), b = a - h.scrollLeft - c.left, u = l - h.scrollTop - c.top;
+    const c = gt(e), h = yt(r), b = a - h.scrollLeft - c.left, u = l - h.scrollTop - c.top;
     e === r && this.changeControl1(b, u), e === n && this.changeControl2(u), e === i && this.changeAlpha(u);
   };
   /**
@@ -2373,45 +2393,52 @@ class mo {
    */
   handleKnobs = (t) => {
     const { target: e, code: s } = t;
-    if (![ot, j, ht, U].includes(s)) return;
+    if (![ot, B, ht, W].includes(s)) return;
     t.preventDefault();
-    const { controlKnobs: r, visuals: n } = this, { offsetWidth: i, offsetHeight: a } = n[0], [l, c, h] = r, { activeElement: b } = V(l), u = r.find((g) => g === b), d = a / 360;
+    const { controlKnobs: r, visuals: n } = this, { offsetWidth: i, offsetHeight: a } = n[0], [l, c, h] = r, { activeElement: b } = K(l), u = r.find((g) => g === b), d = a / 360;
     if (u) {
       let g = 0, p = 0;
       if (e === l) {
         const f = i / 100;
-        [ht, U].includes(s) ? this.controlPositions.c1x += s === U ? f : -f : [ot, j].includes(s) && (this.controlPositions.c1y += s === j ? d : -d), g = this.controlPositions.c1x, p = this.controlPositions.c1y, this.changeControl1(g, p);
-      } else e === c ? (this.controlPositions.c2y += [j, U].includes(s) ? d : -d, p = this.controlPositions.c2y, this.changeControl2(p)) : e === h && (this.controlPositions.c3y += [j, U].includes(s) ? d : -d, p = this.controlPositions.c3y, this.changeAlpha(p));
+        [ht, W].includes(s) ? this.controlPositions.c1x += s === W ? f : -f : [ot, B].includes(s) && (this.controlPositions.c1y += s === B ? d : -d), g = this.controlPositions.c1x, p = this.controlPositions.c1y, this.changeControl1(g, p);
+      } else e === c ? (this.controlPositions.c2y += [B, W].includes(s) ? d : -d, p = this.controlPositions.c2y, this.changeControl2(p)) : e === h && (this.controlPositions.c3y += [B, W].includes(s) ? d : -d, p = this.controlPositions.c3y, this.changeAlpha(p));
       this.handleScroll(t);
     }
   };
   /** The event listener of the colour form inputs. */
   changeHandler = () => {
     let t;
-    const { inputs: e, format: s, value: r, input: n, controlPositions: i, visuals: a } = this, { activeElement: l } = V(n), { offsetHeight: c } = a[0], [h, , , b] = e, [u, d, g, p] = s === "rgb" ? e.map(($) => parseFloat($.value) / ($ === b ? 100 : 1)) : e.map(($) => parseFloat($.value) / ($ !== h ? 100 : 360)), f = this.hasNonColor && bt.includes(r), w = b ? p : 1 - i.c3y / c;
+    const {
+      inputs: e,
+      format: s,
+      value: r,
+      input: n,
+      controlPositions: i,
+      visuals: a
+    } = this, { activeElement: l } = K(n), { offsetHeight: c } = a[0], [h, , , b] = e, [u, d, g, p] = s === "rgb" ? e.map((w) => parseFloat(w.value) / (w === b ? 100 : 1)) : e.map((w) => parseFloat(w.value) / (w !== h ? 100 : 360)), f = this.hasNonColor && bt.includes(r), $ = b ? p : 1 - i.c3y / c;
     if (l === n || l && e.includes(l)) {
       l === n ? f ? t = r === "transparent" ? "rgba(0,0,0,0)" : "rgb(0,0,0)" : t = r : s === "hex" ? t = h.value : s === "hsl" ? t = {
         h: u,
         s: d,
         l: g,
-        a: w
+        a: $
       } : s === "hwb" ? t = {
         h: u,
         w: d,
         b: g,
-        a: w
+        a: $
       } : t = {
         r: u,
         g: d,
         b: g,
-        a: w
+        a: $
       };
-      const { r: $, g: S, b: L, a: P } = new y(t);
-      K(this.color, {
-        r: $,
+      const { r: w, g: S, b: L, a: C } = new y(t);
+      V(this.color, {
+        r: w,
         g: S,
         b: L,
-        a: P
+        a: C
       }), this.setControlPositions(), this.updateAppearance(), this.updateInputs(), this.updateControls(), this.updateVisuals(), l === n && f && (this.value = r);
     }
   };
@@ -2428,12 +2455,12 @@ class mo {
     const { controlPositions: n, visuals: i } = this, { offsetHeight: a, offsetWidth: l } = i[0];
     t > l ? s = l : t >= 0 && (s = t), e > a ? r = a : e >= 0 && (r = e);
     const c = n.c2y / a, h = s / l, b = 1 - r / a, u = 1 - n.c3y / a, { r: d, g, b: p, a: f } = new y({
-      h: c,
-      s: h,
-      v: b,
+      h: c * 360,
+      s: h * 100,
+      v: b * 100,
       a: u
     });
-    K(this.color, {
+    V(this.color, {
       r: d,
       g,
       b: p,
@@ -2452,12 +2479,12 @@ class mo {
     let i = 0;
     t > r ? i = r : t >= 0 && (i = t);
     const a = i / r, l = e.c1x / n, c = 1 - e.c1y / r, h = 1 - e.c3y / r, { r: b, g: u, b: d, a: g } = new y({
-      h: a,
-      s: l,
-      v: c,
+      h: a * 360,
+      s: l * 100,
+      v: c * 100,
       a: h
     });
-    K(this.color, {
+    V(this.color, {
       r: b,
       g: u,
       b: d,
@@ -2487,10 +2514,10 @@ class mo {
   };
   /** Updates the open dropdown position on *scroll* event. */
   updateDropdownPosition() {
-    const { input: t, colorPicker: e, colorMenu: s } = this, r = gt(t), { top: n, bottom: i } = r, { offsetHeight: a } = t, l = Ct(t).clientHeight, h = T(e, "show") ? e : s;
+    const { input: t, colorPicker: e, colorMenu: s } = this, r = gt(t), { top: n, bottom: i } = r, { offsetHeight: a } = t, l = yt(t).clientHeight, h = R(e, "show") ? e : s;
     if (!h) return;
     const { offsetHeight: b } = h, u = l - i, d = n, g = n + b + a > l, p = n - b < 0;
-    (T(h, "bottom") || !p) && u < d && g ? (O(h, "bottom"), q(h, "top")) : (O(h, "top"), q(h, "bottom"));
+    (R(h, "bottom") || !p) && u < d && g ? (O(h, "bottom"), j(h, "top")) : (O(h, "top"), j(h, "bottom"));
   }
   /** Updates control knobs' positions. */
   setControlPositions() {
@@ -2501,17 +2528,25 @@ class mo {
   updateAppearance() {
     const { componentLabels: t, color: e, parent: s, hsv: r, hex: n, format: i, controlKnobs: a } = this, { appearanceLabel: l, hexLabel: c, valueLabel: h } = t;
     let { r: b, g: u, b: d } = e.toRgb();
-    const [g, p, f] = a, w = k(r.h * 360), $ = e.a, S = k(r.s * 100), L = k(r.v * 100), P = this.appearance;
-    let C = `${c} ${n.split("").join(" ")}`;
+    const [g, p, f] = a, $ = k(r.h * 360), w = e.a, S = k(r.s * 100), L = k(r.v * 100), C = this.appearance;
+    let P = `${c} ${n.split("").join(" ")}`;
     if (i === "hwb") {
-      const { hwb: A } = this, F = k(A.w * 100), Q = k(A.b * 100);
-      C = `HWB: ${w}°, ${F}%, ${Q}%`, m(g, et, `${F}% & ${Q}%`), m(g, tt, `${F}`), m(p, _t, `${h}: ${C}. ${l}: ${P}.`), m(p, et, `${w}%`), m(p, tt, `${w}`);
+      const { hwb: A } = this, F = k(A.w * 100), Y = k(A.b * 100);
+      P = `HWB: ${$}°, ${F}%, ${Y}%`, v(g, et, `${F}% & ${Y}%`), v(g, tt, `${F}`), v(
+        p,
+        jt,
+        `${h}: ${P}. ${l}: ${C}.`
+      ), v(p, et, `${$}%`), v(p, tt, `${$}`);
     } else
-      [b, u, d] = [b, u, d].map(k), C = i === "hsl" ? `HSL: ${w}°, ${S}%, ${L}%` : C, C = i === "rgb" ? `RGB: ${b}, ${u}, ${d}` : C, m(g, et, `${L}% & ${S}%`), m(g, tt, `${L}`), m(p, _t, `${h}: ${C}. ${l}: ${P}.`), m(p, et, `${w}°`), m(p, tt, `${w}`);
-    const M = k($ * 100);
-    m(f, et, `${M}%`), m(f, tt, `${M}`);
-    const E = e.toString();
-    D(this.input, { backgroundColor: E }), this.isDark ? (T(s, "txt-light") && O(s, "txt-light"), T(s, "txt-dark") || q(s, "txt-dark")) : (T(s, "txt-dark") && O(s, "txt-dark"), T(s, "txt-light") || q(s, "txt-light"));
+      [b, u, d] = [b, u, d].map(k), P = i === "hsl" ? `HSL: ${$}°, ${S}%, ${L}%` : P, P = i === "rgb" ? `RGB: ${b}, ${u}, ${d}` : P, v(g, et, `${L}% & ${S}%`), v(g, tt, `${L}`), v(
+        p,
+        jt,
+        `${h}: ${P}. ${l}: ${C}.`
+      ), v(p, et, `${$}°`), v(p, tt, `${$}`);
+    const M = k(w * 100);
+    v(f, et, `${M}%`), v(f, tt, `${M}`);
+    const T = e.toString();
+    D(this.input, { backgroundColor: T }), this.isDark ? (R(s, "txt-light") && O(s, "txt-light"), R(s, "txt-dark") || j(s, "txt-dark")) : (R(s, "txt-dark") && O(s, "txt-dark"), R(s, "txt-light") || j(s, "txt-light"));
   }
   /** Updates the control knobs actual positions. */
   updateControls() {
@@ -2536,13 +2571,13 @@ class mo {
       const g = k(i.l * 100), p = k(i.s * 100);
       d = this.color.toHslString(), a.value = `${u}`, l.value = `${p}`, c.value = `${g}`, h.value = `${b}`;
     } else if (s === "hwb") {
-      const { w: g, b: p } = this.hwb, f = k(g * 100), w = k(p * 100);
-      d = this.color.toHwbString(), a.value = `${u}`, l.value = `${f}`, c.value = `${w}`, h.value = `${b}`;
+      const { w: g, b: p } = this.hwb, f = k(g * 100), $ = k(p * 100);
+      d = this.color.toHwbString(), a.value = `${u}`, l.value = `${f}`, c.value = `${$}`, h.value = `${b}`;
     } else if (s === "rgb") {
       let { r: g, g: p, b: f } = this.rgb;
       [g, p, f] = [g, p, f].map(k), d = this.color.toRgbString(), a.value = `${g}`, l.value = `${p}`, c.value = `${f}`, h.value = `${b}`;
     }
-    this.value = d, !t && d !== e && ge(this);
+    this.value = d, !t && d !== e && ne(this);
   }
   /**
    * Toggle the `ColorPicker` dropdown visibility.
@@ -2552,12 +2587,12 @@ class mo {
   togglePicker = (t) => {
     t && t.preventDefault();
     const { colorPicker: e } = this;
-    this.isOpen && T(e, "show") ? this.hide(!0) : Ht(this, e);
+    this.isOpen && R(e, "show") ? this.hide(!0) : Pt(this, e);
   };
   /** Shows the `ColorPicker` dropdown. */
   showPicker = () => {
     const { colorPicker: t } = this;
-    ["top", "bottom"].some((e) => T(t, e)) || Ht(this, t);
+    ["top", "bottom"].some((e) => R(t, e)) || Pt(this, t);
   };
   /**
    * Toggles the visibility of the `ColorPicker` presets menu.
@@ -2568,7 +2603,7 @@ class mo {
   toggleMenu = (t) => {
     t && t.preventDefault();
     const { colorMenu: e } = this;
-    this.isOpen && T(e, "show") ? this.hide(!0) : Ht(this, e);
+    this.isOpen && R(e, "show") ? this.hide(!0) : Pt(this, e);
   };
   /**
    * Hides the currently open `ColorPicker` dropdown.
@@ -2576,22 +2611,28 @@ class mo {
    * @param {boolean=} focusPrevented
    */
   hide(t) {
-    if (this.isOpen) {
-      const { pickerToggle: e, menuToggle: s, colorPicker: r, colorMenu: n, parent: i, input: a } = this, l = T(r, "show"), c = l ? r : n, h = l ? e : s, b = c && Qe(c);
-      this.value = this.color.toString(!0), c && (O(c, "show"), m(h, Nt, "false"), setTimeout(() => {
-        Ne(c), z(".show", i) || (O(i, "open"), He(this), this.isOpen = !1);
-      }, b)), t || _(e), m(a, X, "-1"), h === s && m(s, X, "-1");
-    }
+    if (!this.isOpen) return;
+    const {
+      pickerToggle: e,
+      menuToggle: s,
+      colorPicker: r,
+      colorMenu: n,
+      parent: i,
+      input: a
+    } = this, l = R(r, "show"), c = l ? r : n, h = l ? e : s, b = c && Ue(c);
+    this.value = this.color.toString(!0), c && (O(c, "show"), v(h, Lt, "false"), setTimeout(() => {
+      Le(c), _(".show", i) || (O(i, "open"), Pe(this), this.isOpen = !1);
+    }, b)), t || U(e), v(a, Z, "-1"), h === s && v(s, Z, "-1");
   }
   /** Removes `ColorPicker` from target `<input>`. */
   dispose() {
     const { input: t, parent: e } = this;
-    this.hide(!0), he(this), [...e.children].forEach((s) => {
+    this.hide(!0), re(this), [...e.children].forEach((s) => {
       s !== t && s.remove();
-    }), Pt(t, X), D(t, { backgroundColor: "" }), ["txt-light", "txt-dark"].forEach((s) => O(e, s)), ct.remove(t, Y);
+    }), kt(t, Z), D(t, { backgroundColor: "" }), ["txt-light", "txt-dark"].forEach((s) => O(e, s)), lt.remove(t, Q);
   }
 }
 export {
-  mo as default
+  go as default
 };
 //# sourceMappingURL=color-picker.mjs.map