@thednp/color-picker 2.0.0-alpha1 → 2.0.0-alpha10

package/dist/js/color-picker.mjs

@@ -1,21 +1,5 @@
-const J = {}, he = (o) => {
-  const { type: t, currentTarget: e } = o;
-  [...J[t]].forEach(([s, n]) => {
-    e === s && [...n].forEach(([r, i]) => {
-      r.apply(s, [o]), typeof i == "object" && i.once && Bt(s, t, r, i);
-    });
-  });
-}, ge = (o, t, e, s) => {
-  J[t] || (J[t] = /* @__PURE__ */ new Map());
-  const n = J[t];
-  n.has(o) || n.set(o, /* @__PURE__ */ new Map());
-  const r = n.get(o), { size: i } = r;
-  r.set(e, s), i || o.addEventListener(t, he, s);
-}, Bt = (o, t, e, s) => {
-  const n = J[t], r = n && n.get(o), i = r && r.get(e), a = i !== void 0 ? i : s;
-  r && r.has(e) && r.delete(e), n && (!r || !r.size) && n.delete(o), (!n || !n.size) && delete J[t], (!r || !r.size) && o.removeEventListener(t, he, a);
-}, Gt = "aria-description", Nt = "aria-expanded", Me = "aria-hidden", Pt = "aria-selected", et = "aria-valuenow", ot = "aria-valuetext", Te = "change", Re = "DOMContentLoaded", De = "focusin", Oe = "focusout", Ut = "keydown", Fe = "keyup", Et = "click", Ie = "pointerdown", ue = "pointermove", Ke = "pointerup", Ve = "resize", Be = "scroll", je = "touchmove", j = "ArrowDown", st = "ArrowUp", ht = "ArrowLeft", G = "ArrowRight", qe = "Enter", ze = "Escape", _t = "Space", Ge = "transitionDuration", Ue = "transitionProperty", Y = "tabindex", _e = navigator.userAgentData, mt = _e, { userAgent: We } = navigator, vt = We, Wt = /iPhone|iPad|iPod|Android/i;
-mt ? mt.brands.some((o) => Wt.test(o.brand)) : Wt.test(vt);
+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 */
@@ -24,18 +8,18 @@ mt ? mt.brands.some((o) => Xt.test(o.brand)) : (
 vt && vt.includes("Firefox");
 const { head: kt } = document;
 ["webkitPerspective", "perspective"].some((o) => o in kt.style);
-const Xe = (o, t, e, s) => {
-  const n = s || !1;
-  o.addEventListener(t, e, n);
-}, Je = (o, t, e, s) => {
-  const n = s || !1;
-  o.removeEventListener(t, e, n);
-}, Ye = (o, t, e, s) => {
-  const n = (r) => {
-    (r.target === o || r.currentTarget === o) && (e.apply(o, [r]), Je(o, t, n, s));
+const Bt = (o, t, e, s) => {
+  const r = s || !1;
+  o.addEventListener(t, e, r);
+}, jt = (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));
   };
-  Xe(o, t, n, s);
-}, Ze = () => {
+  Bt(o, t, r, s);
+}, Je = () => {
 };
 (() => {
   let o = !1;
@@ -43,7 +27,7 @@ const Xe = (o, t, e, s) => {
     const t = Object.defineProperty({}, "passive", {
       get: () => (o = !0, o)
     });
-    Ye(document, Re, Ze, t);
+    We(document, Te, Je, t);
   } catch {
   }
   return o;
@@ -51,11 +35,11 @@ const Xe = (o, t, e, s) => {
 ["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), St = (o, t) => o.removeAttribute(t), q = (o, ...t) => {
+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.classList.add(...t);
-}, D = (o, ...t) => {
+}, O = (o, ...t) => {
   o.classList.remove(...t);
-}, T = (o, t) => o.classList.contains(t), jt = (o) => o != null && typeof o == "object" || !1, Q = (o) => jt(o) && typeof o.nodeType == "number" && [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].some((t) => o.nodeType === t) || !1, at = (o) => Q(o) && o.nodeType === 1 || !1, W = /* @__PURE__ */ new Map(), ct = {
+}, T = (o, t) => o.classList.contains(t), qt = (o) => o != null && typeof o == "object" || !1, Y = (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) => Y(o) && o.nodeType === 1 || !1, W = /* @__PURE__ */ new Map(), ct = {
   data: W,
   /**
    * Sets web components data.
@@ -97,62 +81,62 @@ const yt = (o, t) => o.getAttribute(t), m = (o, t, e) => o.setAttribute(t, e), S
     const e = ct.getAllFor(t);
     !e || !at(o) || (e.delete(o), e.size === 0 && W.delete(t));
   }
-}, Qe = (o, t) => ct.get(o, t), V = (o) => typeof o == "string" || !1, to = (o) => jt(o) && o.constructor.name === "Window" || !1, be = (o) => Q(o) && o.nodeType === 9 || !1, K = (o) => to(o) ? o.document : be(o) ? o : Q(o) ? o.ownerDocument : window.document, B = (o, ...t) => Object.assign(o, ...t), x = (o) => {
+}, Xe = (o, t) => ct.get(o, t), B = (o) => typeof o == "string" || !1, Ze = (o) => qt(o) && o.constructor.name === "Window" || !1, be = (o) => Y(o) && o.nodeType === 9 || !1, V = (o) => Ze(o) ? o.document : be(o) ? o : Y(o) ? o.ownerDocument : window.document, K = (o, ...t) => Object.assign(o, ...t), x = (o) => {
   if (!o)
     return;
-  if (V(o))
-    return K().createElement(o);
+  if (B(o))
+    return V().createElement(o);
   const { tagName: t } = o, e = x(t);
   if (!e)
     return;
   const s = { ...o };
-  return delete s.tagName, B(e, s);
+  return delete s.tagName, K(e, s);
 }, Mt = (o, t) => {
   if (!o || !t)
     return;
-  if (V(t))
-    return K().createElementNS(o, t);
+  if (B(t))
+    return V().createElementNS(o, t);
   const { tagName: e } = t, s = Mt(o, e);
   if (!s)
     return;
-  const n = { ...t };
-  return delete n.tagName, B(s, n);
-}, eo = (o, t) => o.dispatchEvent(t), Tt = (o, t) => {
+  const r = { ...t };
+  return delete r.tagName, K(s, r);
+}, Ye = (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);
-}, oo = (o) => {
+}, Qe = (o) => {
   const t = Tt(o, Ue), e = Tt(o, Ge), s = e.includes("ms") ? (
     /* istanbul ignore next */
     1
-  ) : 1e3, n = t && t !== "none" ? parseFloat(e) * s : (
+  ) : 1e3, r = t && t !== "none" ? parseFloat(e) * s : (
     /* istanbul ignore next */
     0
   );
-  return Number.isNaN(n) ? (
+  return Number.isNaN(r) ? (
     /* istanbul ignore next */
     0
-  ) : n;
-}, U = (o, t) => o.focus(t), Jt = (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), so = (o) => o.toLowerCase(), no = (o, t, e, s) => {
-  const n = { ...e }, r = { ...o.dataset }, i = { ...t }, a = {}, l = "title";
-  return pt(r).forEach(([c, h]) => {
-    const b = s && typeof c == "string" && c.includes(s) ? c.replace(s, "").replace(/[A-Z]/g, (u) => so(u)) : c;
-    a[b] = Jt(h);
-  }), pt(n).forEach(([c, h]) => {
-    n[c] = Jt(h);
+  ) : r;
+}, _ = (o, t) => o.focus(t), Zt = (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) => o.toLowerCase(), eo = (o, t, e, s) => {
+  const r = { ...e }, n = { ...o.dataset }, i = { ...t }, a = {}, l = "title";
+  return pt(n).forEach(([c, h]) => {
+    const b = s && typeof c == "string" && c.includes(s) ? c.replace(s, "").replace(/[A-Z]/g, (u) => to(u)) : c;
+    a[b] = Zt(h);
+  }), pt(r).forEach(([c, h]) => {
+    r[c] = Zt(h);
   }), pt(t).forEach(([c, h]) => {
-    c in n ? i[c] = n[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 ? yt(o, l) : h;
   }), i;
-}, ro = (o) => o.offsetHeight, O = (o, t) => {
+}, Yt = (o) => Object.fromEntries(o), oo = (o) => o.offsetHeight, D = (o, t) => {
   pt(t).forEach(([e, s]) => {
-    if (s && V(e) && e.includes("--"))
+    if (s && B(e) && e.includes("--"))
       o.style.setProperty(e, s);
     else {
-      const n = {};
-      n[e] = s, B(o.style, n);
+      const r = {};
+      r[e] = s, K(o.style, r);
     }
   });
-}, io = (o) => jt(o) && o.constructor.name === "Map" || !1, pe = (o) => o.toUpperCase(), gt = (o, t) => {
-  const { width: e, height: s, top: n, right: r, bottom: i, left: a } = o.getBoundingClientRect();
+}, so = (o) => qt(o) && o.constructor.name === "Map" || !1, pe = (o) => o.toUpperCase(), 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)) {
     const { offsetWidth: h, offsetHeight: b } = o;
@@ -167,32 +151,32 @@ const yt = (o, t) => o.getAttribute(t), m = (o, t, e) => o.setAttribute(t, e), S
   return {
     width: e / l,
     height: s / c,
-    top: n / c,
-    right: r / l,
+    top: r / c,
+    right: n / l,
     bottom: i / c,
     left: a / l,
     x: a / l,
-    y: n / c
+    y: r / c
   };
-}, Ct = (o) => K(o).documentElement;
-let Yt = 0, Zt = 0;
-const X = /* @__PURE__ */ new Map(), de = (o, t) => {
-  let e = t ? Yt : Zt;
+}, Ct = (o) => V(o).documentElement;
+let Qt = 0, te = 0;
+const J = /* @__PURE__ */ new Map(), de = (o, t) => {
+  let e = t ? Qt : te;
   if (t) {
-    const s = de(o), n = X.get(s) || /* @__PURE__ */ new Map();
-    X.has(s) || X.set(s, n), io(n) && !n.has(t) ? (n.set(t, e), Yt += 1) : e = n.get(t);
+    const s = de(o), r = J.get(s) || /* @__PURE__ */ new Map();
+    J.has(s) || J.set(s, r), so(r) && !r.has(t) ? (r.set(t, e), Qt += 1) : e = r.get(t);
   } else {
     const s = o.id || o;
-    X.has(s) ? e = X.get(s) : (X.set(s, e), Zt += 1);
+    J.has(s) ? e = J.get(s) : (J.set(s, e), te += 1);
   }
   return e;
-}, ao = (o) => {
+}, ro = (o) => {
   var t;
-  return o ? be(o) ? o.defaultView : Q(o) ? (t = o?.ownerDocument) == null ? void 0 : t.defaultView : o : window;
+  return o ? be(o) ? o.defaultView : Y(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, _ = (o, t) => at(o) ? o : (Q(t) ? t : K()).querySelector(o), nt = (o, t) => (t && Q(t) ? t : K()).getElementsByClassName(
+fe(o.getRootNode().host, t) : null, z = (o, t) => at(o) ? o : (Y(t) ? t : V()).querySelector(o), st = (o, t) => (t && Y(t) ? t : V()).getElementsByClassName(
   o
-), qt = ["transparent", "currentColor", "inherit", "revert", "initial"], v = (o) => {
+), Gt = ["transparent", "currentColor", "inherit", "revert", "initial"], v = (o) => {
   const t = Math.floor(o);
   return o - t < 0.5 ? t : Math.round(o);
 }, wt = [
@@ -1380,7 +1364,7 @@ fe(o.getRootNode().host, t) : null, _ = (o, t) => at(o) ? o : (Q(t) ? t : K()).q
       b: 50
     }
   ]
-], me = "deg|rad|grad|turn", ve = "[-\\+]?\\d+%?", we = "[-\\+]?\\d*\\.\\d+%?", $e = `[-\\+]?\\d*\\.?\\d+(?:${me})?`, dt = `(?:${we})|(?:${ve})`, Rt = `(?:${dt})|(?:${$e}?)`, lo = "(?:[\\s|\\(\\s|\\s\\(\\s]+)?", co = "(?:[\\s|\\)\\s]+)?", Qt = "(?:[,|\\s]+)", ho = "(?:[,|\\/\\s]*)?", rt = `${lo}(${Rt})${Qt}(${dt})${Qt}(${dt})${ho}(${dt})?${co}`, I = {
+], me = "deg|rad|grad|turn", ve = "[-\\+]?\\d+%?", we = "[-\\+]?\\d*\\.\\d+%?", $e = `[-\\+]?\\d*\\.?\\d+(?:${me})?`, dt = `(?:${we})|(?:${ve})`, Rt = `(?:${dt})|(?:${$e}?)`, no = "(?:[\\s|\\(\\s|\\s\\(\\s]+)?", io = "(?:[\\s|\\)\\s]+)?", ee = "(?:[,|\\s]+)", ao = "(?:[,|\\/\\s]*)?", rt = `${no}(${Rt})${ee}(${dt})${ee}(${dt})${ao}(${dt})?${io}`, I = {
   CSS_UNIT: new RegExp(Rt),
   ANGLES: me,
   CSS_ANGLE: $e,
@@ -1396,7 +1380,7 @@ fe(o.getRootNode().host, t) : null, _ = (o, t) => at(o) ? o : (Q(t) ? t : K()).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) => qt.includes(o), it = (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"], Pe = (o) => qt.includes(o) || ["#", ...xe].some((t) => o.includes(t)) ? !1 : wt.some(([t]) => o === t), R = (o, t) => {
+}, 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) => {
   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)
@@ -1404,45 +1388,45 @@ fe(o.getRootNode().host, t) : null, _ = (o, t) => at(o) ? o : (Q(t) ? t : K()).q
   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);
-}, Dt = (o) => {
+}, Ot = (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)), z = (o) => o.length === 1 ? `0${o}` : String(o), Se = (o) => {
+}, 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());
   return t;
-}, N = (o) => parseInt(o, 16), Ot = (o) => N(o) / 255, Ce = (o) => v(o * 255).toString(16), te = (o, t, e) => {
-  const s = Math.max(o, t, e), n = Math.min(o, t, e);
-  let r = 0, i = 0;
-  const a = (s + n) / 2;
-  if (s === n)
-    i = 0, r = 0;
+}, N = (o) => parseInt(o, 16), Dt = (o) => N(o) / 255, Ce = (o) => v(o * 255).toString(16), oe = (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;
+  if (s === r)
+    i = 0, n = 0;
   else {
-    const l = s - n;
-    i = a > 0.5 ? l / (2 - s - n) : l / (s + n), s === o && (r = (t - e) / l + (t < e ? 6 : 0)), s === t && (r = (e - o) / l + 2), s === e && (r = (o - t) / l + 4), r /= 6;
+    const l = s - r;
+    i = a > 0.5 ? l / (2 - s - r) : l / (s + r), s === o && (n = (t - e) / l + (t < e ? 6 : 0)), s === t && (n = (e - o) / l + 2), s === e && (n = (o - t) / l + 4), n /= 6;
   }
-  return { h: r, s: i, l: a };
+  return { h: n, s: i, l: a };
 }, 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) => {
-  let s = 0, n = 0, r = 0;
+  let s = 0, r = 0, n = 0;
   if (t === 0)
-    n = e, r = e, s = e;
+    r = e, n = e, s = e;
   else if (e) {
     const i = e < 0.5 ? e * (1 + t) : e + t - e * t, a = 2 * e - i;
-    s = ft(a, i, o + 1 / 3), n = ft(a, i, o), r = ft(a, i, o - 1 / 3);
-  }
-  return { r: s, g: n, b: r };
-}, ee = (o, t, e) => {
-  let s = 0, n = 0;
-  const r = Math.min(o, t, e), i = Math.max(o, t, e), a = 1 - i;
-  if (i === r)
-    return { h: 0, w: r, b: a };
-  o === r ? (s = t - e, n = 3) : (s = t === r ? e - o : o - t, n = t === r ? 5 : 1);
-  const l = (n - s / (i - r)) / 6;
+    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) => {
+  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 };
+  o === n ? (s = t - e, r = 3) : (s = t === n ? e - o : o - t, r = t === n ? 5 : 1);
+  const l = (r - s / (i - n)) / 6;
   return {
     h: l === 1 ? 0 : l,
-    w: r,
+    w: n,
     b: a
   };
 }, Le = (o, t, e) => {
@@ -1450,35 +1434,35 @@ fe(o.getRootNode().host, t) : null, _ = (o, t) => at(o) ? o : (Q(t) ? t : K()).q
     const i = t / (t + e);
     return { r: i, g: i, b: i };
   }
-  let { r: s, g: n, b: r } = lt(o, 1, 0.5);
-  return [s, n, r] = [s, n, r].map((i) => i * (1 - t - e) + t), { r: s, g: n, b: r };
-}, oe = (o, t, e) => {
-  const s = Math.max(o, t, e), n = Math.min(o, t, e);
-  let r = 0;
-  const i = s, a = s - n, l = s === 0 ? 0 : a / s;
-  return s === n ? r = 0 : (o === s && (r = (t - e) / a + (t < e ? 6 : 0)), t === s && (r = (e - o) / a + 2), e === s && (r = (o - t) / a + 4), r /= 6), { h: r, s: l, v: i };
+  let { r: s, g: r, b: n } = lt(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) => {
+  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) => {
-  const s = o * 6, n = t, r = e, i = Math.floor(s), a = s - i, l = r * (1 - n), c = r * (1 - a * n), h = r * (1 - (1 - a) * n), b = i % 6, u = [r, c, l, l, h, r][b], d = [h, r, r, c, l, l][b], g = [l, l, h, r, r, c][b];
+  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 };
-}, se = (o, t, e, s) => {
-  const n = [
-    z(v(o).toString(16)),
-    z(v(t).toString(16)),
-    z(v(e).toString(16))
-  ];
-  return s && 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[0].charAt(0) + n[1].charAt(0) + n[2].charAt(0) : n.join("");
-}, At = (o, t, e, s, n) => {
+}, ne = (o, t, e, s) => {
   const r = [
-    z(v(o).toString(16)),
-    z(v(t).toString(16)),
-    z(v(e).toString(16)),
-    z(Ce(s))
+    G(v(o).toString(16)),
+    G(v(t).toString(16)),
+    G(v(e).toString(16))
   ];
-  return n && 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[3].charAt(0) === r[3].charAt(1) ? r[0].charAt(0) + r[1].charAt(0) + r[2].charAt(0) + r[3].charAt(0) : r.join("");
+  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) => {
+  const n = [
+    G(v(o).toString(16)),
+    G(v(t).toString(16)),
+    G(v(e).toString(16)),
+    G(Ce(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) => {
   const t = String(o).trim().toLowerCase();
-  if (Pe(t))
-    return Object.assign(Se(t), {
+  if (Se(t))
+    return Object.assign(Pe(t), {
       a: 1,
       format: "rgb",
       ok: !0
@@ -1492,60 +1476,60 @@ fe(o.getRootNode().host, t) : null, _ = (o, t) => at(o) ? o : (Q(t) ? t : K()).q
       format: "rgb",
       ok: !0
     };
-  let [, e, s, n, r] = I.rgb.exec(t) || [];
-  return e && s && n ? {
+  let [, e, s, r, n] = I.rgb.exec(t) || [];
+  return e && s && r ? {
     r: e,
     g: s,
-    b: n,
-    a: r !== void 0 ? r : 1,
+    b: r,
+    a: n !== void 0 ? n : 1,
     format: "rgb",
     ok: !0
-  } : ([, e, s, n, r] = I.hsl.exec(t) || [], e && s && n ? {
+  } : ([, e, s, r, n] = I.hsl.exec(t) || [], e && s && r ? {
     h: e,
     s,
-    l: n,
-    a: r !== void 0 ? r : 1,
+    l: r,
+    a: n !== void 0 ? n : 1,
     format: "hsl",
     ok: !0
-  } : ([, e, s, n, r] = I.hsv.exec(t) || [], e && s && n ? {
+  } : ([, e, s, r, n] = I.hsv.exec(t) || [], e && s && r ? {
     h: e,
     s,
-    v: n,
-    a: r !== void 0 ? r : 1,
+    v: r,
+    a: n !== void 0 ? n : 1,
     format: "hsv",
     ok: !0
-  } : ([, e, s, n, r] = I.hwb.exec(t) || [], e && s && n ? {
+  } : ([, e, s, r, n] = I.hwb.exec(t) || [], e && s && r ? {
     h: e,
     w: s,
-    b: n,
-    a: r !== void 0 ? r : 1,
+    b: r,
+    a: n !== void 0 ? n : 1,
     format: "hwb",
     ok: !0
-  } : ([, e, s, n, r] = I.hex8.exec(t) || [], e && s && n && r ? {
+  } : ([, e, s, r, n] = I.hex8.exec(t) || [], e && s && r && n ? {
     r: N(e),
     g: N(s),
-    b: N(n),
-    a: Ot(r),
+    b: N(r),
+    a: Dt(n),
     format: "hex",
     ok: !0
-  } : ([, e, s, n] = I.hex6.exec(t) || [], e && s && n ? {
+  } : ([, e, s, r] = I.hex6.exec(t) || [], e && s && r ? {
     r: N(e),
     g: N(s),
-    b: N(n),
+    b: N(r),
     a: 1,
     format: "hex",
     ok: !0
-  } : ([, e, s, n, r] = I.hex4.exec(t) || [], e && s && n && r ? {
+  } : ([, e, s, r, n] = I.hex4.exec(t) || [], e && s && r && n ? {
     r: N(e + e),
     g: N(s + s),
-    b: N(n + n),
-    a: Ot(r + r),
+    b: N(r + r),
+    a: Dt(n + n),
     format: "hex",
     ok: !0
-  } : ([, e, s, n] = I.hex3.exec(t) || [], e && s && n ? {
+  } : ([, e, s, r] = I.hex3.exec(t) || [], e && s && r ? {
     r: N(e + e),
     g: N(s + s),
-    b: N(n + n),
+    b: N(r + r),
     a: 1,
     format: "hex",
     ok: !0
@@ -1557,17 +1541,17 @@ fe(o.getRootNode().host, t) : null, _ = (o, t) => at(o) ? o : (Q(t) ? t : K()).q
     format: "rgb",
     ok: !o
   })))))));
-}, ne = (o) => {
-  let t = { r: 0, g: 0, b: 0 }, e = o, s = 1, n, r, i, a, l, c, h, b, u = "rgb", d = !1;
-  return (!e || typeof e == "string") && (e = Ae(e), d = e.ok), it(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"), it(e, { h: 0, s: 0, v: 0 }) && H(e.h) && H(e.s) && H(e.v) && ({ h: c, s: n, v: r } = e, c = R(c, 360), n = R(n, 100), r = R(r, 100), t = Ft(c, n, r), u = "hsv"), it(e, { h: 0, s: 0, l: 0 }) && H(e.h) && H(e.s) && H(e.l) && ({ h: c, s: n, l: i } = e, c = R(c, 360), n = R(n, 100), i = R(i, 100), t = lt(c, n, i), u = "hsl"), it(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), {
+}, ie = (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: Dt(s),
+    a: Ot(s),
     format: u,
     ok: d
   };
-}, go = "1.0.6";
+}, lo = "1.0.8";
 class y {
   // bring main utilities to front
   static matchers = I;
@@ -1575,19 +1559,19 @@ class y {
   static isPercentage = $t;
   static isValidCSSUnit = H;
   static isNonColor = ke;
-  static isColorName = Pe;
-  static isColorType = it;
-  static pad2 = z;
+  static isColorName = Se;
+  static isColorType = nt;
+  static pad2 = G;
   static clamp01 = ut;
   static bound01 = R;
-  static boundAlpha = Dt;
-  static getRGBFromName = Se;
-  static convertHexToDecimal = Ot;
+  static boundAlpha = Ot;
+  static getRGBFromName = Pe;
+  static convertHexToDecimal = Dt;
   static convertDecimalToHex = Ce;
-  static rgbToHsl = te;
-  static rgbToHex = se;
-  static rgbToHsv = oe;
-  static rgbToHwb = ee;
+  static rgbToHsl = oe;
+  static rgbToHex = ne;
+  static rgbToHsv = re;
+  static rgbToHwb = se;
   static rgbaToHex = At;
   static hslToRgb = Ft;
   static hsvToRgb = Ft;
@@ -1595,11 +1579,11 @@ class y {
   static hwbToRgb = Le;
   static parseIntFromHex = N;
   static stringInputToObject = Ae;
-  static inputToRGB = ne;
+  static inputToRGB = ie;
   static roundPart = v;
   static webColors = wt;
-  static nonColors = qt;
-  static version = go;
+  static nonColors = Gt;
+  static version = lo;
   // main public properties
   r;
   g;
@@ -1610,8 +1594,8 @@ class y {
   originalInput;
   // main public methods
   constructor(t, e) {
-    const s = e && xe.includes(e) ? e : "", { r: n, g: r, b: i, a, ok: l, format: c } = ne(t);
-    this.originalInput = t, this.r = n, this.g = r, this.b = i, this.a = a, this.ok = l, this.format = s || c;
+    const s = e && xe.includes(e) ? e : "", { r, g: n, b: i, a, ok: l, format: c } = ie(t);
+    this.originalInput = t, this.r = r, this.g = n, this.b = i, this.a = a, this.ok = l, this.format = s || c;
   }
   /**
    * Checks if the current input value is a valid colour.
@@ -1632,8 +1616,8 @@ class y {
    */
   get luminance() {
     const { r: t, g: e, b: s } = this;
-    let n = 0, r = 0, i = 0;
-    return t <= 0.03928 ? n = t / 12.92 : n = ((t + 0.055) / 1.055) ** 2.4, e <= 0.03928 ? r = e / 12.92 : r = ((e + 0.055) / 1.055) ** 2.4, s <= 0.03928 ? i = s / 12.92 : i = ((s + 0.055) / 1.055) ** 2.4, 0.2126 * n + 0.7152 * r + 0.0722 * i;
+    let r = 0, n = 0, i = 0;
+    return t <= 0.03928 ? r = t / 12.92 : r = ((t + 0.055) / 1.055) ** 2.4, e <= 0.03928 ? n = e / 12.92 : n = ((e + 0.055) / 1.055) ** 2.4, s <= 0.03928 ? i = s / 12.92 : i = ((s + 0.055) / 1.055) ** 2.4, 0.2126 * r + 0.7152 * n + 0.0722 * i;
   }
   /**
    * Returns the perceived brightness of the colour.
@@ -1646,25 +1630,25 @@ class y {
    * Returns the web colour name closest to the current colour.
    */
   get name() {
-    const { r: t, g: e, b: s } = this.toRgb(), [n] = wt.map(([r, i]) => {
+    const { r: t, g: e, b: s } = this.toRgb(), [r] = wt.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
       );
-      return [r, a];
-    }).find(([, r], i, a) => r === Math.min(...a.map(([, l]) => l)));
-    return n;
+      return [n, a];
+    }).find(([, n], i, a) => n === Math.min(...a.map(([, l]) => l)));
+    return r;
   }
   /**
    * Returns the colour as an RGBA object.
    */
   toRgb() {
-    let { r: t, g: e, b: s, a: n } = this;
-    return [t, e, s] = [t, e, s].map((r) => v(r * 255 * 100) / 100), n = v(n * 100) / 100, {
+    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, {
       r: t,
       g: e,
       b: s,
-      a: n
+      a: r
     };
   }
   /**
@@ -1673,8 +1657,8 @@ class y {
    * * rgba(255,255,255,0.5)
    */
   toRgbString() {
-    const { r: t, g: e, b: s, a: n } = this.toRgb(), [r, i, a] = [t, e, s].map(v);
-    return n === 1 ? `rgb(${r}, ${i}, ${a})` : `rgba(${r}, ${i}, ${a}, ${n})`;
+    const { r: t, g: e, b: s, a: r } = this.toRgb(), [n, i, a] = [t, e, s].map(v);
+    return r === 1 ? `rgb(${n}, ${i}, ${a})` : `rgba(${n}, ${i}, ${a}, ${r})`;
   }
   /**
    * Returns the RGBA values concatenated into a CSS4 Module string format.
@@ -1682,16 +1666,16 @@ class y {
    * * rgb(255 255 255 / 50%)
    */
   toRgbCSS4String() {
-    const { r: t, g: e, b: s, a: n } = this.toRgb(), [r, i, a] = [t, e, s].map(v), l = n === 1 ? "" : ` / ${v(n * 100)}%`;
-    return `rgb(${r} ${i} ${a}${l})`;
+    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)}%`;
+    return `rgb(${n} ${i} ${a}${l})`;
   }
   /**
    * Returns the hexadecimal value of the colour. When the parameter is *true*
    * it will find a 3 characters shorthand of the decimal value.
    */
   toHex(t) {
-    const { r: e, g: s, b: n, a: r } = this.toRgb();
-    return r === 1 ? se(e, s, n, t) : At(e, s, n, r, 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);
   }
   /**
    * Returns the CSS valid hexadecimal vaue of the colour. When the parameter is *true*
@@ -1704,8 +1688,8 @@ class y {
    * Returns the HEX8 value of the colour.
    */
   toHex8(t) {
-    const { r: e, g: s, b: n, a: r } = this.toRgb();
-    return At(e, s, n, r, t);
+    const { r: e, g: s, b: r, a: n } = this.toRgb();
+    return At(e, s, r, n, t);
   }
   /**
    * Returns the HEX8 value of the colour.
@@ -1717,24 +1701,24 @@ class y {
    * Returns the colour as a HSVA object.
    */
   toHsv() {
-    const { r: t, g: e, b: s, a: n } = this, { h: r, s: i, v: a } = oe(t, e, s);
+    const { r: t, g: e, b: s, a: r } = this, { h: n, s: i, v: a } = re(t, e, s);
     return {
-      h: r,
+      h: n,
       s: i,
       v: a,
-      a: n
+      a: r
     };
   }
   /**
    * Returns the colour as an HSLA object.
    */
   toHsl() {
-    const { r: t, g: e, b: s, a: n } = this, { h: r, s: i, l: a } = te(t, e, s);
+    const { r: t, g: e, b: s, a: r } = this, { h: n, s: i, l: a } = oe(t, e, s);
     return {
-      h: r,
+      h: n,
       s: i,
       l: a,
-      a: n
+      a: r
     };
   }
   /**
@@ -1743,8 +1727,8 @@ class y {
    * * `hsla(150, 100%, 50%, 0.5)`
    */
   toHslString() {
-    let { h: t, s: e, l: s, a: n } = this.toHsl();
-    return t = v(t * 360), e = v(e * 100), s = v(s * 100), n = v(n * 100) / 100, n === 1 ? `hsl(${t}, ${e}%, ${s}%)` : `hsla(${t}, ${e}%, ${s}%, ${n})`;
+    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})`;
   }
   /**
    * Returns the HSLA values concatenated into a CSS4 Module format string.
@@ -1752,37 +1736,37 @@ class y {
    * * `hsl(150deg 100% 50% / 50%)`
    */
   toHslCSS4String() {
-    let { h: t, s: e, l: s, a: n } = this.toHsl();
-    t = v(t * 360), e = v(e * 100), s = v(s * 100), n = v(n * 100);
-    const r = n < 100 ? ` / ${v(n)}%` : "";
-    return `hsl(${t}deg ${e}% ${s}%${r})`;
+    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)}%` : "";
+    return `hsl(${t}deg ${e}% ${s}%${n})`;
   }
   /**
    * Returns the colour as an HWBA object.
    */
   toHwb() {
-    const { r: t, g: e, b: s, a: n } = this, { h: r, w: i, b: a } = ee(t, e, s);
+    const { r: t, g: e, b: s, a: r } = this, { h: n, w: i, b: a } = se(t, e, s);
     return {
-      h: r,
+      h: n,
       w: i,
       b: a,
-      a: n
+      a: r
     };
   }
   /**
    * Returns the HWBA values concatenated into a string.
    */
   toHwbString() {
-    let { h: t, w: e, b: s, a: n } = this.toHwb();
-    t = v(t * 360), e = v(e * 100), s = v(s * 100), n = v(n * 100);
-    const r = n < 100 ? ` / ${v(n)}%` : "";
-    return `hwb(${t}deg ${e}% ${s}%${r})`;
+    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)}%` : "";
+    return `hwb(${t}deg ${e}% ${s}%${n})`;
   }
   /**
    * Sets the alpha value of the current colour.
    */
   setAlpha(t) {
-    return typeof t != "number" ? this : (this.a = Dt(t), this);
+    return typeof t != "number" ? this : (this.a = Ot(t), this);
   }
   /**
    * Saturate the colour with a given amount.
@@ -1790,8 +1774,8 @@ class y {
   saturate(t) {
     if (typeof t != "number")
       return this;
-    const { h: e, s, l: n } = this.toHsl(), { r, g: i, b: a } = lt(e, ut(s + t / 100), n);
-    return Object.assign(this, { r, g: i, b: a }), this;
+    const { h: e, s, l: r } = this.toHsl(), { r: n, g: i, b: a } = lt(e, ut(s + t / 100), r);
+    return Object.assign(this, { r: n, g: i, b: a }), this;
   }
   /**
    * Desaturate the colour with a given amount.
@@ -1812,8 +1796,8 @@ class y {
   lighten(t) {
     if (typeof t != "number")
       return this;
-    const { h: e, s, l: n } = this.toHsl(), { r, g: i, b: a } = lt(e, s, ut(n + t / 100));
-    return Object.assign(this, { r, g: i, b: a }), this;
+    const { h: e, s, l: r } = this.toHsl(), { r: n, g: i, b: a } = lt(e, s, ut(r + t / 100));
+    return Object.assign(this, { r: n, g: i, b: a }), this;
   }
   /**
    * Decrease the colour lightness with a given amount.
@@ -1828,8 +1812,8 @@ class y {
   spin(t) {
     if (typeof t != "number")
       return this;
-    const { h: e, s, l: n } = this.toHsl(), { r, g: i, b: a } = lt(ut((e * 360 + t) % 360 / 360), s, n);
-    return Object.assign(this, { r, g: i, b: a }), this;
+    const { h: e, s, l: r } = this.toHsl(), { r: n, g: i, b: a } = lt(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. */
   clone() {
@@ -1858,36 +1842,36 @@ class It {
    * * `args.saturation` Saturation [0, 100]
    */
   constructor(...t) {
-    let e = 0, s = 12, n = 10, r = [0.5], i = 100;
+    let e = 0, s = 12, r = 10, n = [0.5], i = 100;
     if (t.length === 4)
-      [e, s, n, i] = t;
+      [e, s, r, i] = t;
     else if (t.length === 3)
-      [e, s, n] = t;
-    else if (t.length === 2 && ([s, n] = t, [s, n].some((g) => g < 1)))
+      [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.");
-    const a = [], l = 360 / s, c = y.roundPart((n - (n % 2 ? 1 : 0)) / 2), h = [0.25, 0.2, 0.15, 0.11, 0.09, 0.075], b = [
+    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],
       [6, 7],
       [8, 9],
       [10, 11],
       [12, 13]
-    ], u = b.find((g) => g.includes(n)), d = u ? h[b.indexOf(u)] : 100 / (n + (n % 2 ? 0 : 1)) / 100;
+    ], u = b.find((g) => g.includes(r)), d = u ? h[b.indexOf(u)] : 100 / (r + (r % 2 ? 0 : 1)) / 100;
     for (let g = 1; g < c + 1; g += 1)
-      r = [...r, 0.5 + d * g];
-    for (let g = 1; g < n - c; g += 1)
-      r = [0.5 - d * g, ...r];
+      n = [...n, 0.5 + d * g];
+    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;
-      r.forEach((f) => {
+      n.forEach((f) => {
         const w = new y({ h: p, s: 1, l: f });
         a.push(i < 100 ? w.saturate(i - 100) : w);
       });
     }
-    this.hue = e, this.hueSteps = s, this.lightSteps = n, this.saturation = i, this.colors = a;
+    this.hue = e, this.hueSteps = s, this.lightSteps = r, this.saturation = i, this.colors = a;
   }
 }
-const He = {
+const Kt = {
   pickerLabel: "Colour Picker",
   appearanceLabel: "Colour Appearance",
   valueLabel: "Colour Value",
@@ -1905,7 +1889,7 @@ const He = {
   redLabel: "Red",
   greenLabel: "Green",
   blueLabel: "Blue"
-}, Kt = [
+}, it = [
   "white",
   "black",
   "grey",
@@ -1923,8 +1907,8 @@ const He = {
   "violet",
   "magenta",
   "pink"
-], re = (o) => {
-  if (!V(o))
+], ae = (o) => {
+  if (!B(o))
     return !1;
   try {
     JSON.parse(o);
@@ -1932,13 +1916,13 @@ const He = {
     return !1;
   }
   return !0;
-}, Vt = "v-hidden", uo = (o) => {
-  const { format: t, id: e, componentLabels: s } = o, n = x({
+}, Vt = "v-hidden", co = (o) => {
+  const { format: t, id: e, componentLabels: s } = o, r = x({
     tagName: "div",
     className: `color-form ${t}`
   });
-  let r = ["hex"];
-  return t === "rgb" ? r = ["red", "green", "blue", "alpha"] : t === "hsl" ? r = ["hue", "saturation", "lightness", "alpha"] : t === "hwb" && (r = ["hue", "whiteness", "blackness", "alpha"]), r.forEach((i) => {
+  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(
       x({
@@ -1963,15 +1947,15 @@ const He = {
       spellcheck: !1
     });
     let u = "100", d = "1";
-    i !== "alpha" && (t === "rgb" ? (u = "255", d = "1") : i === "hue" && (u = "360", d = "1")), B(b, {
+    i !== "alpha" && (t === "rgb" ? (u = "255", d = "1") : i === "hue" && (u = "360", d = "1")), K(b, {
       min: "0",
       max: u,
       step: d
-    }), n.append(h, b);
-  }), n;
-}, bo = (o) => {
-  const { format: t, componentLabels: e } = o, { hueLabel: s, alphaLabel: n, lightnessLabel: r, saturationLabel: i, whitenessLabel: a, blacknessLabel: l } = e, c = t === "hsl" ? 360 : 100, h = t === "hsl" ? 100 : 360, b = 100;
-  let u = t === "hsl" ? `${s} & ${r}` : `${r} & ${i}`;
+    }), r.append(h, b);
+  }), r;
+}, ho = (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({
     tagName: "div",
@@ -1995,12 +1979,12 @@ const He = {
     {
       i: 3,
       c: f,
-      l: n,
+      l: r,
       min: 0,
       max: b
     }
   ].forEach(($) => {
-    const { i: P, c: L, l: S, min: C, max: M } = $, E = x({
+    const { i: S, c: L, l: P, min: C, max: M } = $, E = x({
       tagName: "div",
       className: "color-control",
       role: "presentation"
@@ -2008,14 +1992,14 @@ const He = {
     E.append(
       x({
         tagName: "div",
-        className: `visual-control visual-control${P}`
+        className: `visual-control visual-control${S}`
       })
     );
     const A = x({
       tagName: "div",
       className: `${L} knob`,
       ariaLive: "polite",
-      ariaLabel: S,
+      ariaLabel: P,
       role: "slider",
       tabIndex: 0,
       ariaValueMin: `${C}`,
@@ -2023,47 +2007,48 @@ const He = {
     });
     E.append(A), g.append(E);
   }), g;
-}, ie = (o, t, e) => {
-  const { input: s, format: n, componentLabels: r } = o, { defaultsLabel: i, presetsLabel: a } = r, 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;
+}, 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;
   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;
-  let P = e;
-  P += $ ? " scrollable" : "", P += p ? " multiline" : "";
+  let S = e;
+  S += $ ? " scrollable" : "", S += p ? " multiline" : "";
   const L = p ? "1px" : "0.25rem";
-  let S = p ? 1.75 : 2;
-  S = g > 5 && p ? 1.5 : S;
-  const C = `${w * S}rem`, M = `calc(${f} * ${S}rem + ${f - 1} * ${L})`, E = x({
+  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({
     tagName: "ul",
-    className: P,
+    className: S,
     role: "listbox",
     ariaLabel: h
   });
-  return $ && O(E, {
-    "--grid-item-size": `${S}rem`,
+  return $ && D(E, {
+    "--grid-item-size": `${P}rem`,
     "--grid-fit": `${g}`,
     "--grid-gap": L,
     "--grid-height": C,
     "--grid-hover-height": M
   }), b.forEach((A) => {
-    let [F, tt] = typeof A == "string" ? A.trim().split(":") : [];
-    A instanceof y && (F = A.toHexString(), tt = F);
-    const zt = new y(A instanceof y ? A : F, n).toString() === yt(s, "value"), xt = x({
+    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({
       tagName: "li",
-      className: `color-option${zt ? " active" : ""}`,
-      innerText: `${tt || F}`,
+      className: `color-option${Ut ? " active" : ""}`,
+      innerText: `${Q || F}`,
       tabIndex: 0,
       role: "option",
-      ariaSelected: zt ? "true" : "false"
+      ariaSelected: Ut ? "true" : "false"
     });
-    m(xt, "data-value", `${F}`), l && O(xt, { backgroundColor: F }), E.append(xt);
+    m(xt, "data-value", `${F}`), l && D(xt, { backgroundColor: F }), E.append(xt);
   }), E;
-}, po = (o) => {
-  const { input: t, parent: e, format: s, id: n, componentLabels: r, colorKeywords: i, colorPresets: a } = o, l = yt(t, "value") || "#fff", { nonColors: c } = y, { toggleLabel: h, pickerLabel: b, formatLabel: u, hexLabel: d } = r, g = c.includes(l) ? "#fff" : l;
+}, go = (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;
   o.color = new y(g, s);
   const p = s === "hex" ? d : pe(s), f = x({
-    id: `picker-btn-${n}`,
+    id: `picker-btn-${r}`,
     tagName: "button",
+    type: "button",
     className: "picker-toggle btn-appearance",
     ariaExpanded: "false",
     ariaHasPopup: "true"
@@ -2079,16 +2064,17 @@ const He = {
     tagName: "div",
     className: "color-dropdown picker",
     role: "group",
-    ariaLabelledBy: `picker-btn-${n}`
-  }), $ = bo(o), P = uo(o);
-  if (w.append($, P), t.before(f), e.append(w), i || a) {
+    ariaLabelledBy: `picker-btn-${r}`
+  }), $ = ho(o), S = co(o);
+  if (w.append($, S), t.before(f), e.append(w), i || a) {
     const L = x({
       tagName: "div",
       className: "color-dropdown scrollable menu"
     });
-    a && L.append(ie(o, a, "color-options")), i && i.length && L.append(ie(o, i, "color-defaults"));
-    const S = x({
+    a && L.append(le(o, a, "color-options")), i && i.length && L.append(le(o, i, "color-defaults"));
+    const P = x({
       tagName: "button",
+      type: "button",
       className: "menu-toggle btn-appearance",
       tabIndex: -1,
       ariaExpanded: "false",
@@ -2096,53 +2082,55 @@ const He = {
     }), C = encodeURI("http://www.w3.org/2000/svg"), M = Mt(C, {
       tagName: "svg"
     });
-    m(M, "xmlns", C), m(M, "viewBox", "0 0 512 512"), m(M, Me, "true");
+    m(M, "xmlns", C), m(M, "viewBox", "0 0 512 512"), m(M, Ee, "true");
     const E = Mt(C, {
       tagName: "path"
     });
-    m(E, "d", "M98,158l157,156L411,158l27,27L255,368L71,185L98,158z"), m(E, "fill", "#fff"), M.append(E), S.append(
+    m(E, "d", "M98,158l157,156L411,158l27,27L255,368L71,185L98,158z"), m(E, "fill", "#fff"), M.append(E), P.append(
       x({
         tagName: "span",
         className: Vt,
         innerText: `${h}`
       }),
       M
-    ), e.append(S, L);
+    ), e.append(P, L);
   }
-  i && c.includes(l) && (o.value = l), m(t, Y, "-1");
-}, fo = "2.0.0-alpha1", Z = "color-picker", mo = `[data-function="${Z}"]`, ae = `.${Z}`, vo = {
-  componentLabels: He,
-  colorLabels: Kt,
+  i && c.includes(l) && (o.value = l), m(t, X, "-1");
+}, uo = "2.0.0-alpha10", Z = "color-picker", bo = `[data-function="${Z}"]`, ce = `.${Z}`, po = {
+  componentLabels: Kt,
+  colorLabels: it,
   format: "rgb",
   colorPresets: !1,
   colorKeywords: !1
-}, { roundPart: k, nonColors: bt } = y, wo = (o) => Qe(o, Z), $o = (o) => new ko(o), le = (o, t) => {
-  const e = t ? ge : Bt, { input: s, pickerToggle: n, menuToggle: r } = o;
-  e(s, De, o.showPicker), e(n, Et, o.togglePicker), r && e(r, Et, o.toggleMenu);
-}, Ne = (o, t) => {
-  const e = t ? ge : Bt, { input: s, colorMenu: n, parent: r } = o, i = K(s), a = ao(i);
-  e(o.controls, Ie, o.pointerDown), o.controlKnobs.forEach((l) => e(l, Ut, o.handleKnobs)), e(a, Be, o.handleScroll), e(a, Ve, o.update), [s, ...o.inputs].forEach((l) => e(l, Te, o.changeHandler)), n && (e(n, Et, o.menuClickHandler), e(n, Ut, o.menuKeyHandler)), e(i, ue, o.pointerMove), e(i, Ke, o.pointerUp), e(r, Oe, o.handleFocusOut), e(i, Fe, o.handleDismiss);
-}, ce = (o) => {
-  eo(o.input, new CustomEvent("colorpicker.change"));
-}, Ee = (o) => {
-  o && ["bottom", "top"].forEach((t) => D(o, t));
+}, { roundPart: k, nonColors: bt } = y, fo = (o) => Xe(o, Z), mo = (o) => new vo(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 = ro(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) => {
+  Ye(o.input, new CustomEvent("colorpicker.change"));
+}, Ne = (o) => {
+  o && ["bottom", "top"].forEach((t) => O(o, t));
 }, Ht = (o, t) => {
-  const { colorPicker: e, colorMenu: s, menuToggle: n, pickerToggle: r, parent: i } = o, a = t === e, l = a ? s : e, c = a ? n : r, h = a ? r : n;
-  T(i, "open") || q(i, "open"), l && (D(l, "show"), Ee(l)), q(t, "bottom"), ro(t), q(t, "show"), a && o.update(), o.isOpen || (Ne(o, !0), o.updateDropdownPosition(), o.isOpen = !0, m(o.input, Y, "0"), n && m(n, Y, "0")), m(h, Nt, "true"), c && m(c, Nt, "false");
+  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"), oo(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");
 };
-class ko {
+class vo {
   // bring utils to staic
   static Color = y;
   static ColorPalette = It;
-  static getInstance = wo;
-  static init = $o;
-  static selector = mo;
+  static getInstance = fo;
+  static init = mo;
+  static selector = bo;
   // utils important for render
   static roundPart = k;
-  static setElementStyle = O;
+  static setElementStyle = D;
   static setAttribute = m;
   static getBoundingClientRect = gt;
-  static version = fo;
+  static version = uo;
+  static colorNames = it;
+  static colorPickerLabels = Kt;
   id;
   input;
   color;
@@ -2151,7 +2139,7 @@ class ko {
   dragElement;
   isOpen = !1;
   controlPositions;
-  colorLabels = {};
+  colorLabels = Yt(it.map((t) => [t, t]));
   colorKeywords;
   colorPresets;
   componentLabels;
@@ -2171,43 +2159,41 @@ class ko {
    * @param config instance options
    */
   constructor(t, e) {
-    const s = _(t);
+    const s = z(t);
     if (typeof t > "u")
       throw new TypeError("ColorPicker target not specified.");
-    if (V(t) && !s)
+    if (B(t) && !s)
       throw new TypeError(`ColorPicker target "${t}" cannot be found.`);
     this.input = s;
-    const n = fe(s, ae);
-    if (!n)
+    const r = fe(s, ce);
+    if (!r)
       throw new TypeError("ColorPicker requires a specific markup to work.");
-    this.parent = n, this.id = de(s, Z), this.dragElement = void 0, this.isOpen = !1, this.controlPositions = {
+    this.parent = r, this.id = de(s, Z), this.dragElement = void 0, this.isOpen = !1, this.controlPositions = {
       c1x: 0,
       c1y: 0,
       c2y: 0,
       c3y: 0
-    }, this.colorLabels = {}, this.colorKeywords = !1, this.colorPresets = !1;
-    const { format: r, componentLabels: i, colorLabels: a, colorKeywords: l, colorPresets: c } = no(
+    }, this.colorKeywords = !1, this.colorPresets = !1;
+    const { format: n, componentLabels: i, colorLabels: a, colorKeywords: l, colorPresets: c } = eo(
       s,
-      vo,
+      po,
       e || {}
     );
-    let h = Kt;
-    Lt(a) && a.length === 17 ? h = a : V(a) && a.split(",").length === 17 && (h = a.split(",")), Kt.forEach((p, f) => {
-      this.colorLabels[p] = h[f].trim();
-    });
-    const b = V(i) && re(i) ? JSON.parse(i) : i;
-    if (this.componentLabels = B({ ...He }, b), this.color = new y(s.value || "#fff", r), this.format = r, Lt(l) && l.length ? this.colorKeywords = l : V(l) && l.length && (this.colorKeywords = l.split(",").map((p) => p.trim())), Lt(c) && c.length)
+    let h = it;
+    Lt(a) && a.length === 17 ? h = a : B(a) && a.split(",").length === 17 && (h = a.split(",")), K(this.colorLabels, Yt(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)
       this.colorPresets = c;
-    else if (c && re(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
-      V(c) && (this.colorPresets = c.split(",").map((p) => p.trim()));
-    this.showPicker = this.showPicker.bind(this), this.togglePicker = this.togglePicker.bind(this), this.toggleMenu = this.toggleMenu.bind(this), this.menuClickHandler = this.menuClickHandler.bind(this), this.menuKeyHandler = this.menuKeyHandler.bind(this), this.pointerDown = this.pointerDown.bind(this), this.pointerMove = this.pointerMove.bind(this), this.pointerUp = this.pointerUp.bind(this), this.update = this.update.bind(this), this.handleScroll = this.handleScroll.bind(this), this.handleFocusOut = this.handleFocusOut.bind(this), this.changeHandler = this.changeHandler.bind(this), this.handleDismiss = this.handleDismiss.bind(this), this.handleKnobs = this.handleKnobs.bind(this), po(this);
-    const [u, d] = nt("color-dropdown", n);
-    this.pickerToggle = _(".picker-toggle", n), this.menuToggle = _(".menu-toggle", n), this.colorPicker = u, this.colorMenu = d, this.inputs = [...nt("color-input", n)];
-    const [g] = nt("color-controls", n);
-    this.controls = g, this.controlKnobs = [...nt("knob", g)], this.visuals = [...nt("visual-control", g)], this.update(), le(this, !0), ct.set(s, Z, this);
+      B(c) && (this.colorPresets = c.split(",").map((p) => p.trim()));
+    go(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, Z, this);
   }
   /** Returns the current colour value */
   get value() {
@@ -2265,7 +2251,7 @@ class ko {
   }
   /** Returns the colour appearance, usually the closest colour name for the current value. */
   get appearance() {
-    const { colorLabels: t, hsl: e, hsv: s, format: n } = this, r = k(e.h * 360), i = n === "hsl" ? e.s : s.s, a = k(i * 100), l = k(e.l * 100), c = s.v * 100;
+    const { colorLabels: t, hsl: e, hsv: s, format: r } = this, n = k(e.h * 360), i = r === "hsl" ? e.s : s.s, a = k(i * 100), l = k(e.l * 100), c = s.v * 100;
     let h = "black";
     if (l === 100 && a === 0)
       h = t.white;
@@ -2273,20 +2259,20 @@ class ko {
       h = t.black;
     else if (a === 0)
       h = t.grey;
-    else if (r < 15 || r >= 345)
+    else if (n < 15 || n >= 345)
       h = t.red;
-    else if (r >= 15 && r < 45)
+    else if (n >= 15 && n < 45)
       h = c > 80 && a > 80 ? t.orange : t.brown;
-    else if (r >= 45 && r < 75) {
-      const b = r > 46 && r < 54 && c < 80 && a > 90, u = r >= 54 && r < 75 && c < 80;
+    else if (n >= 45 && n < 75) {
+      const b = n > 46 && n < 54 && c < 80 && a > 90, u = n >= 54 && n < 75 && c < 80;
       h = b ? t.gold : t.yellow, h = u ? t.olive : h;
     } else
-      r >= 75 && r < 155 ? h = c < 68 ? t.green : t.lime : r >= 155 && r < 175 ? h = t.teal : r >= 175 && r < 195 ? h = t.cyan : r >= 195 && r < 255 ? h = t.blue : r >= 255 && r < 270 ? h = t.violet : r >= 270 && r < 295 ? h = t.magenta : r >= 295 && r < 345 && (h = t.pink);
+      n >= 75 && n < 155 ? h = c < 68 ? t.green : t.lime : n >= 155 && n < 175 ? h = t.teal : n >= 175 && n < 195 ? h = t.cyan : n >= 195 && n < 255 ? h = t.blue : n >= 255 && n < 270 ? h = t.violet : n >= 270 && n < 295 ? h = t.magenta : n >= 295 && n < 345 && (h = t.pink);
     return h;
   }
   /** Updates `ColorPicker` visuals. */
   updateVisuals() {
-    const { controlPositions: t, visuals: e } = this, [s, n, r] = 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({
+    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,
@@ -2296,11 +2282,11 @@ class ko {
       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%)`;
-    O(s, {
+    D(s, {
       background: `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,${d}) 100%),
       linear-gradient(to right, rgba(255,255,255,${d}) 0%, ${g} 100%),
       ${b}`
-    }), O(n, { background: p }), O(r, {
+    }), D(r, { background: p }), D(n, {
       background: `linear-gradient(rgba(${l},${c},${h},1) 0%,rgba(${l},${c},${h},0) 100%)`
     });
   }
@@ -2310,120 +2296,121 @@ class ko {
    * @param e
    * @this {ColorPicker}
    */
-  handleFocusOut({ relatedTarget: t }) {
+  handleFocusOut = ({ relatedTarget: t }) => {
     t && !this.parent.contains(t) && this.hide(!0);
-  }
+  };
   /**
    * The `ColorPicker` *keyup* event listener when open.
    *
    * @param e
    * @this {ColorPicker}
    */
-  handleDismiss({ code: t }) {
-    this.isOpen && t === ze && this.hide();
-  }
+  handleDismiss = ({ code: t }) => {
+    this.isOpen && t === qe && this.hide();
+  };
   /**
    * The `ColorPicker` *scroll* event listener when open.
    *
    * @param e
-   * @this {ColorPicker}
    */
-  handleScroll(t) {
-    const { activeElement: e } = K(this.input);
-    this.updateDropdownPosition(), ([ue, je].includes(t.type) && this.dragElement || e && this.controlKnobs.includes(e)) && (t.stopPropagation(), t.preventDefault());
-  }
+  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());
+  };
   /**
    * The `ColorPicker` keyboard event listener for menu navigation.
    *
    * @param e
    */
-  menuKeyHandler(t) {
-    const { target: e, code: s } = t, { previousElementSibling: n, nextElementSibling: r, 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, st, _t].includes(s) && t.preventDefault(), a ? b && s === st ? U(b) : u && s === j ? U(u) : n && s === ht ? U(n) : r && s === G && U(r) : n && [ht, st].includes(s) ? U(n) : r && [G, j].includes(s) && U(r), [qe, _t].includes(s) && this.menuClickHandler(t);
-  }
+  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);
+  };
   /**
    * The `ColorPicker` click event listener for the colour menu presets / defaults.
    *
    * @param e
    * @this {ColorPicker}
    */
-  menuClickHandler(t) {
-    const { target: e } = t, { colorMenu: s } = this, n = (yt(e, "data-value") || "").trim();
-    if (!n.length)
+  menuClickHandler = (t) => {
+    const { target: e } = t, { colorMenu: s } = this, r = (yt(e, "data-value") || "").trim();
+    if (!r.length)
       return;
-    const r = _("li.active", s);
-    let i = n;
+    const n = z("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);
-    B(this.color, {
+    K(this.color, {
       r: a,
       g: l,
       b: c,
       a: h
-    }), this.update(), r !== e && (r && (D(r, "active"), St(r, Pt)), q(e, "active"), m(e, Pt, "true"), bt.includes(n) && (this.value = n), ce(this));
-  }
+    }), 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));
+  };
   /**
    * The `ColorPicker` *touchstart* / *mousedown* events listener for control knobs.
    *
    * @param e
    */
-  pointerDown(t) {
-    const { target: e, pageX: s, pageY: n } = t, { colorMenu: r, 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, $ = n - 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($)), r) {
-      const P = _("li.active", r);
-      P && (D(P, "active"), St(P, Pt));
+  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));
     }
     t.preventDefault();
-  }
+  };
   /**
    * The `ColorPicker` *touchend* / *mouseup* events listener for control knobs.
    *
    * @param e
    * @this
    */
-  pointerUp({ target: t }) {
-    const { parent: e } = this, s = K(e), n = _(`${ae}.open`, s) !== null, r = s.getSelection();
-    !this.dragElement && (!r || !r.toString().length) && !e.contains(t) && this.hide(n), this.dragElement = void 0;
-  }
+  pointerUp = ({ target: t }) => {
+    const { parent: e } = this, s = V(e), r = z(`${ce}.open`, s) !== null, n = s.getSelection();
+    !this.dragElement && (!n || !n.toString().length) && !e.contains(t) && this.hide(r), this.dragElement = void 0;
+  };
   /**
    * The `ColorPicker` *touchmove* / *mousemove* events listener for control knobs.
    *
    * @param {PointerEvent} e
    */
-  pointerMove(t) {
-    const { dragElement: e, visuals: s } = this, [n, r, i] = s, { pageX: a, pageY: l } = t;
+  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(n), b = a - h.scrollLeft - c.left, u = l - h.scrollTop - c.top;
-    e === n && this.changeControl1(b, u), e === r && this.changeControl2(u), e === i && this.changeAlpha(u);
-  }
+    const c = gt(e), h = Ct(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);
+  };
   /**
    * The `ColorPicker` *keydown* event listener for control knobs.
    *
    * @param e
    */
-  handleKnobs(t) {
+  handleKnobs = (t) => {
     const { target: e, code: s } = t;
-    if (![st, j, ht, G].includes(s))
+    if (![ot, j, ht, U].includes(s))
       return;
     t.preventDefault();
-    const { controlKnobs: n, visuals: r } = this, { offsetWidth: i, offsetHeight: a } = r[0], [l, c, h] = n, { activeElement: b } = K(l), u = n.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 } = V(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, G].includes(s) ? this.controlPositions.c1x += s === G ? f : -f : [st, j].includes(s) && (this.controlPositions.c1y += s === j ? d : -d), g = this.controlPositions.c1x, p = this.controlPositions.c1y, this.changeControl1(g, p);
+        [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, G].includes(s) ? d : -d, p = this.controlPositions.c2y, this.changeControl2(p)) : e === h && (this.controlPositions.c3y += [j, G].includes(s) ? d : -d, p = this.controlPositions.c3y, this.changeAlpha(p));
+        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));
       this.handleScroll(t);
     }
-  }
+  };
   /** The event listener of the colour form inputs. */
-  changeHandler() {
+  changeHandler = () => {
     let t;
-    const { inputs: e, format: s, value: n, input: r, controlPositions: i, visuals: a } = this, { activeElement: l } = K(r), { 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(n), w = b ? p : 1 - i.c3y / c;
-    if (l === r || l && e.includes(l)) {
-      l === r ? f ? t = n === "transparent" ? "rgba(0,0,0,0)" : "rgb(0,0,0)" : t = n : s === "hex" ? t = h.value : s === "hsl" ? 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;
+    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,
@@ -2439,15 +2426,15 @@ class ko {
         b: g,
         a: w
       };
-      const { r: $, g: P, b: L, a: S } = new y(t);
-      B(this.color, {
+      const { r: $, g: S, b: L, a: P } = new y(t);
+      K(this.color, {
         r: $,
-        g: P,
+        g: S,
         b: L,
-        a: S
-      }), this.setControlPositions(), this.updateAppearance(), this.updateInputs(), this.updateControls(), this.updateVisuals(), l === r && f && (this.value = n);
+        a: P
+      }), this.setControlPositions(), this.updateAppearance(), this.updateInputs(), this.updateControls(), this.updateVisuals(), l === n && f && (this.value = r);
     }
-  }
+  };
   /**
    * Updates `ColorPicker` first control:
    * * `lightness` and `saturation` for HEX/RGB;
@@ -2457,21 +2444,21 @@ class ko {
    * @param Y the Y component of the offset
    */
   changeControl1(t, e) {
-    let [s, n] = [0, 0];
-    const { controlPositions: r, visuals: i } = this, { offsetHeight: a, offsetWidth: l } = i[0];
-    t > l ? s = l : t >= 0 && (s = t), e > a ? n = a : e >= 0 && (n = e);
-    const c = r.c2y / a, h = s / l, b = 1 - n / a, u = 1 - r.c3y / a, { r: d, g, b: p, a: f } = new y({
+    let [s, r] = [0, 0];
+    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,
       a: u
     });
-    B(this.color, {
+    K(this.color, {
       r: d,
       g,
       b: p,
       a: f
-    }), this.controlPositions.c1x = s, this.controlPositions.c1y = n, this.updateAppearance(), this.updateInputs(), this.updateControls(), this.updateVisuals();
+    }), this.controlPositions.c1x = s, this.controlPositions.c1y = r, this.updateAppearance(), this.updateInputs(), this.updateControls(), this.updateVisuals();
   }
   /**
    * Updates `ColorPicker` second control:
@@ -2481,16 +2468,16 @@ class ko {
    * @param Y the Y offset
    */
   changeControl2(t) {
-    const { controlPositions: e, visuals: s } = this, { offsetHeight: n, offsetWidth: r } = s[0];
+    const { controlPositions: e, visuals: s } = this, { offsetHeight: r, offsetWidth: n } = s[0];
     let i = 0;
-    t > n ? i = n : t >= 0 && (i = t);
-    const a = i / n, l = e.c1x / r, c = 1 - e.c1y / n, h = 1 - e.c3y / n, { r: b, g: u, b: d, a: g } = new y({
+    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,
       a: h
     });
-    B(this.color, {
+    K(this.color, {
       r: b,
       g: u,
       b: d,
@@ -2505,56 +2492,56 @@ class ko {
    */
   changeAlpha(t) {
     const { visuals: e } = this, { offsetHeight: s } = e[0];
-    let n = 0;
-    t > s ? n = s : t >= 0 && (n = t);
-    const r = 1 - n / s;
-    this.color.setAlpha(r), this.controlPositions.c3y = n, this.updateAppearance(), this.updateInputs(), this.updateControls(), this.updateVisuals();
+    let r = 0;
+    t > s ? r = s : t >= 0 && (r = t);
+    const n = 1 - r / s;
+    this.color.setAlpha(n), this.controlPositions.c3y = r, this.updateAppearance(), this.updateInputs(), this.updateControls(), this.updateVisuals();
   }
   /**
    * Updates `ColorPicker` control positions on:
    * * initialization
    * * window resize
    */
-  update() {
+  update = () => {
     this.updateDropdownPosition(), this.updateAppearance(), this.setControlPositions(), this.updateInputs(!0), this.updateControls(), this.updateVisuals();
-  }
+  };
   /** Updates the open dropdown position on *scroll* event. */
   updateDropdownPosition() {
-    const { input: t, colorPicker: e, colorMenu: s } = this, n = gt(t), { top: r, bottom: i } = n, { 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 = Ct(t).clientHeight, h = T(e, "show") ? e : s;
     if (!h)
       return;
-    const { offsetHeight: b } = h, u = l - i, d = r, g = r + b + a > l, p = r - b < 0;
-    (T(h, "bottom") || !p) && u < d && g ? (D(h, "bottom"), q(h, "top")) : (D(h, "top"), q(h, "bottom"));
+    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"));
   }
   /** Updates control knobs' positions. */
   setControlPositions() {
-    const { visuals: t, color: e, hsv: s } = this, { offsetHeight: n, offsetWidth: r } = t[0], i = e.a, a = s.h, l = s.s, c = s.v;
-    this.controlPositions.c1x = l * r, this.controlPositions.c1y = (1 - c) * n, this.controlPositions.c2y = a * n, this.controlPositions.c3y = (1 - i) * n;
+    const { visuals: t, color: e, hsv: s } = this, { offsetHeight: r, offsetWidth: n } = t[0], i = e.a, a = s.h, l = s.s, c = s.v;
+    this.controlPositions.c1x = l * n, this.controlPositions.c1y = (1 - c) * r, this.controlPositions.c2y = a * r, this.controlPositions.c3y = (1 - i) * r;
   }
   /** Update the visual appearance label and control knob labels. */
   updateAppearance() {
-    const { componentLabels: t, color: e, parent: s, hsv: n, hex: r, format: i, controlKnobs: a } = this, { appearanceLabel: l, hexLabel: c, valueLabel: h } = t;
+    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(n.h * 360), $ = e.a, P = k(n.s * 100), L = k(n.v * 100), S = this.appearance;
-    let C = `${c} ${r.split("").join(" ")}`;
+    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(" ")}`;
     if (i === "hwb") {
-      const { hwb: A } = this, F = k(A.w * 100), tt = k(A.b * 100);
-      C = `HWB: ${w}°, ${F}%, ${tt}%`, m(g, ot, `${F}% & ${tt}%`), m(g, et, `${F}`), m(p, Gt, `${h}: ${C}. ${l}: ${S}.`), m(p, ot, `${w}%`), m(p, et, `${w}`);
+      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}`);
     } else
-      [b, u, d] = [b, u, d].map(k), C = i === "hsl" ? `HSL: ${w}°, ${P}%, ${L}%` : C, C = i === "rgb" ? `RGB: ${b}, ${u}, ${d}` : C, m(g, ot, `${L}% & ${P}%`), m(g, et, `${L}`), m(p, Gt, `${h}: ${C}. ${l}: ${S}.`), m(p, ot, `${w}°`), m(p, et, `${w}`);
+      [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, ot, `${M}%`), m(f, et, `${M}`);
+    m(f, et, `${M}%`), m(f, tt, `${M}`);
     const E = e.toString();
-    O(this.input, { backgroundColor: E }), this.isDark ? (T(s, "txt-light") && D(s, "txt-light"), T(s, "txt-dark") || q(s, "txt-dark")) : (T(s, "txt-dark") && D(s, "txt-dark"), T(s, "txt-light") || q(s, "txt-light"));
+    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"));
   }
   /** Updates the control knobs actual positions. */
   updateControls() {
     const { controlKnobs: t, controlPositions: e } = this;
-    let { c1x: s, c1y: n, c2y: r, c3y: i } = e;
+    let { c1x: s, c1y: r, c2y: n, c3y: i } = e;
     const [a, l, c] = t;
-    [s, n, r, i] = [s, n, r, i].map(k), O(a, {
-      transform: `translate3d(${s - 4}px,${n - 4}px,0)`
-    }), O(l, { transform: `translate3d(0,${r - 4}px,0)` }), O(c, { transform: `translate3d(0,${i - 4}px,0)` });
+    [s, r, n, i] = [s, r, n, i].map(k), D(a, {
+      transform: `translate3d(${s - 4}px,${r - 4}px,0)`
+    }), D(l, { transform: `translate3d(0,${n - 4}px,0)` }), D(c, { transform: `translate3d(0,${i - 4}px,0)` });
   }
   /**
    * Updates all color form inputs.
@@ -2562,8 +2549,8 @@ class ko {
    * @param isPrevented when `true`, the component original event is prevented
    */
   updateInputs(t) {
-    const { value: e, format: s, inputs: n, color: r, hsl: i } = this, [a, l, c, h] = n, b = k(r.a * 100), u = k(i.h * 360);
-    let d = r.toString();
+    const { value: e, format: s, inputs: r, color: n, hsl: i } = this, [a, l, c, h] = r, b = k(n.a * 100), u = k(i.h * 360);
+    let d = n.toString();
     if (s === "hex")
       d = this.color.toHexString(!0), a.value = this.hex;
     else if (s === "hsl") {
@@ -2576,34 +2563,34 @@ class ko {
       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 && ce(this);
+    this.value = d, !t && d !== e && ge(this);
   }
   /**
    * Toggle the `ColorPicker` dropdown visibility.
    *
    * @param e
    */
-  togglePicker(t) {
+  togglePicker = (t) => {
     t && t.preventDefault();
     const { colorPicker: e } = this;
     this.isOpen && T(e, "show") ? this.hide(!0) : Ht(this, e);
-  }
+  };
   /** Shows the `ColorPicker` dropdown. */
-  showPicker() {
+  showPicker = () => {
     const { colorPicker: t } = this;
     ["top", "bottom"].some((e) => T(t, e)) || Ht(this, t);
-  }
+  };
   /**
    * Toggles the visibility of the `ColorPicker` presets menu.
    *
    * @param e
    * @this {ColorPicker}
    */
-  toggleMenu(t) {
+  toggleMenu = (t) => {
     t && t.preventDefault();
     const { colorMenu: e } = this;
     this.isOpen && T(e, "show") ? this.hide(!0) : Ht(this, e);
-  }
+  };
   /**
    * Hides the currently open `ColorPicker` dropdown.
    *
@@ -2611,21 +2598,21 @@ class ko {
    */
   hide(t) {
     if (this.isOpen) {
-      const { pickerToggle: e, menuToggle: s, colorPicker: n, colorMenu: r, parent: i, input: a } = this, l = T(n, "show"), c = l ? n : r, h = l ? e : s, b = c && oo(c);
-      this.value = this.color.toString(!0), c && (D(c, "show"), m(h, Nt, "false"), setTimeout(() => {
-        Ee(c), _(".show", i) || (D(i, "open"), Ne(this), this.isOpen = !1);
-      }, b)), t || U(e), m(a, Y, "-1"), h === s && m(s, Y, "-1");
+      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");
     }
   }
   /** Removes `ColorPicker` from target `<input>`. */
   dispose() {
     const { input: t, parent: e } = this;
-    this.hide(!0), le(this), [...e.children].forEach((s) => {
+    this.hide(!0), he(this), [...e.children].forEach((s) => {
       s !== t && s.remove();
-    }), St(t, Y), O(t, { backgroundColor: "" }), ["txt-light", "txt-dark"].forEach((s) => D(e, s)), ct.remove(t, Z);
+    }), Pt(t, X), D(t, { backgroundColor: "" }), ["txt-light", "txt-dark"].forEach((s) => O(e, s)), ct.remove(t, Z);
   }
 }
 export {
-  ko as default
+  vo as default
 };
 //# sourceMappingURL=color-picker.mjs.map