/**
 * @license
 * Copyright 2019 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */
const t$2 = globalThis,
  e$3 = t$2.ShadowRoot && (void 0 === t$2.ShadyCSS || t$2.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype,
  s$3 = Symbol(),
  o$3 = new WeakMap();
let n$3 = class n {
  constructor(t, e, o) {
    if (this._$cssResult$ = !0, o !== s$3) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
    this.cssText = t, this.t = e;
  }
  get styleSheet() {
    let t = this.o;
    const s = this.t;
    if (e$3 && void 0 === t) {
      const e = void 0 !== s && 1 === s.length;
      e && (t = o$3.get(s)), void 0 === t && ((this.o = t = new CSSStyleSheet()).replaceSync(this.cssText), e && o$3.set(s, t));
    }
    return t;
  }
  toString() {
    return this.cssText;
  }
};
const r$4 = t => new n$3("string" == typeof t ? t : t + "", void 0, s$3),
  S$2 = (s, o) => {
    if (e$3) s.adoptedStyleSheets = o.map(t => t instanceof CSSStyleSheet ? t : t.styleSheet);else for (const e of o) {
      const o = document.createElement("style"),
        n = t$2.litNonce;
      void 0 !== n && o.setAttribute("nonce", n), o.textContent = e.cssText, s.appendChild(o);
    }
  },
  c$3 = e$3 ? t => t : t => t instanceof CSSStyleSheet ? (t => {
    let e = "";
    for (const s of t.cssRules) e += s.cssText;
    return r$4(e);
  })(t) : t;

/**
 * @license
 * Copyright 2017 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */
const {
    is: i$2,
    defineProperty: e$2,
    getOwnPropertyDescriptor: r$3,
    getOwnPropertyNames: h$2,
    getOwnPropertySymbols: o$2,
    getPrototypeOf: n$2
  } = Object,
  a$2 = globalThis,
  c$2 = a$2.trustedTypes,
  l$2 = c$2 ? c$2.emptyScript : "",
  p$2 = a$2.reactiveElementPolyfillSupport,
  d$2 = (t, s) => t,
  u$2 = {
    toAttribute(t, s) {
      switch (s) {
        case Boolean:
          t = t ? l$2 : null;
          break;
        case Object:
        case Array:
          t = null == t ? t : JSON.stringify(t);
      }
      return t;
    },
    fromAttribute(t, s) {
      let i = t;
      switch (s) {
        case Boolean:
          i = null !== t;
          break;
        case Number:
          i = null === t ? null : Number(t);
          break;
        case Object:
        case Array:
          try {
            i = JSON.parse(t);
          } catch (t) {
            i = null;
          }
      }
      return i;
    }
  },
  f$2 = (t, s) => !i$2(t, s),
  y$1 = {
    attribute: !0,
    type: String,
    converter: u$2,
    reflect: !1,
    hasChanged: f$2
  };
Symbol.metadata ??= Symbol("metadata"), a$2.litPropertyMetadata ??= new WeakMap();
class b extends HTMLElement {
  static addInitializer(t) {
    this._$Ei(), (this.l ??= []).push(t);
  }
  static get observedAttributes() {
    return this.finalize(), this._$Eh && [...this._$Eh.keys()];
  }
  static createProperty(t, s = y$1) {
    if (s.state && (s.attribute = !1), this._$Ei(), this.elementProperties.set(t, s), !s.noAccessor) {
      const i = Symbol(),
        r = this.getPropertyDescriptor(t, i, s);
      void 0 !== r && e$2(this.prototype, t, r);
    }
  }
  static getPropertyDescriptor(t, s, i) {
    const {
      get: e,
      set: h
    } = r$3(this.prototype, t) ?? {
      get() {
        return this[s];
      },
      set(t) {
        this[s] = t;
      }
    };
    return {
      get() {
        return e?.call(this);
      },
      set(s) {
        const r = e?.call(this);
        h.call(this, s), this.requestUpdate(t, r, i);
      },
      configurable: !0,
      enumerable: !0
    };
  }
  static getPropertyOptions(t) {
    return this.elementProperties.get(t) ?? y$1;
  }
  static _$Ei() {
    if (this.hasOwnProperty(d$2("elementProperties"))) return;
    const t = n$2(this);
    t.finalize(), void 0 !== t.l && (this.l = [...t.l]), this.elementProperties = new Map(t.elementProperties);
  }
  static finalize() {
    if (this.hasOwnProperty(d$2("finalized"))) return;
    if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(d$2("properties"))) {
      const t = this.properties,
        s = [...h$2(t), ...o$2(t)];
      for (const i of s) this.createProperty(i, t[i]);
    }
    const t = this[Symbol.metadata];
    if (null !== t) {
      const s = litPropertyMetadata.get(t);
      if (void 0 !== s) for (const [t, i] of s) this.elementProperties.set(t, i);
    }
    this._$Eh = new Map();
    for (const [t, s] of this.elementProperties) {
      const i = this._$Eu(t, s);
      void 0 !== i && this._$Eh.set(i, t);
    }
    this.elementStyles = this.finalizeStyles(this.styles);
  }
  static finalizeStyles(s) {
    const i = [];
    if (Array.isArray(s)) {
      const e = new Set(s.flat(1 / 0).reverse());
      for (const s of e) i.unshift(c$3(s));
    } else void 0 !== s && i.push(c$3(s));
    return i;
  }
  static _$Eu(t, s) {
    const i = s.attribute;
    return !1 === i ? void 0 : "string" == typeof i ? i : "string" == typeof t ? t.toLowerCase() : void 0;
  }
  constructor() {
    super(), this._$Ep = void 0, this.isUpdatePending = !1, this.hasUpdated = !1, this._$Em = null, this._$Ev();
  }
  _$Ev() {
    this._$Eg = new Promise(t => this.enableUpdating = t), this._$AL = new Map(), this._$E_(), this.requestUpdate(), this.constructor.l?.forEach(t => t(this));
  }
  addController(t) {
    (this._$ES ??= []).push(t), void 0 !== this.renderRoot && this.isConnected && t.hostConnected?.();
  }
  removeController(t) {
    this._$ES?.splice(this._$ES.indexOf(t) >>> 0, 1);
  }
  _$E_() {
    const t = new Map(),
      s = this.constructor.elementProperties;
    for (const i of s.keys()) this.hasOwnProperty(i) && (t.set(i, this[i]), delete this[i]);
    t.size > 0 && (this._$Ep = t);
  }
  createRenderRoot() {
    const t = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
    return S$2(t, this.constructor.elementStyles), t;
  }
  connectedCallback() {
    this.renderRoot ??= this.createRenderRoot(), this.enableUpdating(!0), this._$ES?.forEach(t => t.hostConnected?.());
  }
  enableUpdating(t) {}
  disconnectedCallback() {
    this._$ES?.forEach(t => t.hostDisconnected?.());
  }
  attributeChangedCallback(t, s, i) {
    this._$AK(t, i);
  }
  _$EO(t, s) {
    const i = this.constructor.elementProperties.get(t),
      e = this.constructor._$Eu(t, i);
    if (void 0 !== e && !0 === i.reflect) {
      const r = (void 0 !== i.converter?.toAttribute ? i.converter : u$2).toAttribute(s, i.type);
      this._$Em = t, null == r ? this.removeAttribute(e) : this.setAttribute(e, r), this._$Em = null;
    }
  }
  _$AK(t, s) {
    const i = this.constructor,
      e = i._$Eh.get(t);
    if (void 0 !== e && this._$Em !== e) {
      const t = i.getPropertyOptions(e),
        r = "function" == typeof t.converter ? {
          fromAttribute: t.converter
        } : void 0 !== t.converter?.fromAttribute ? t.converter : u$2;
      this._$Em = e, this[e] = r.fromAttribute(s, t.type), this._$Em = null;
    }
  }
  requestUpdate(t, s, i, e = !1, r) {
    if (void 0 !== t) {
      if (i ??= this.constructor.getPropertyOptions(t), !(i.hasChanged ?? f$2)(e ? r : this[t], s)) return;
      this.C(t, s, i);
    }
    !1 === this.isUpdatePending && (this._$Eg = this._$EP());
  }
  C(t, s, i) {
    this._$AL.has(t) || this._$AL.set(t, s), !0 === i.reflect && this._$Em !== t && (this._$Ej ??= new Set()).add(t);
  }
  async _$EP() {
    this.isUpdatePending = !0;
    try {
      await this._$Eg;
    } catch (t) {
      Promise.reject(t);
    }
    const t = this.scheduleUpdate();
    return null != t && (await t), !this.isUpdatePending;
  }
  scheduleUpdate() {
    return this.performUpdate();
  }
  performUpdate() {
    if (!this.isUpdatePending) return;
    if (!this.hasUpdated) {
      if (this._$Ep) {
        for (const [t, s] of this._$Ep) this[t] = s;
        this._$Ep = void 0;
      }
      const t = this.constructor.elementProperties;
      if (t.size > 0) for (const [s, i] of t) !0 !== i.wrapped || this._$AL.has(s) || void 0 === this[s] || this.C(s, this[s], i);
    }
    let t = !1;
    const s = this._$AL;
    try {
      t = this.shouldUpdate(s), t ? (this.willUpdate(s), this._$ES?.forEach(t => t.hostUpdate?.()), this.update(s)) : this._$ET();
    } catch (s) {
      throw t = !1, this._$ET(), s;
    }
    t && this._$AE(s);
  }
  willUpdate(t) {}
  _$AE(t) {
    this._$ES?.forEach(t => t.hostUpdated?.()), this.hasUpdated || (this.hasUpdated = !0, this.firstUpdated(t)), this.updated(t);
  }
  _$ET() {
    this._$AL = new Map(), this.isUpdatePending = !1;
  }
  get updateComplete() {
    return this.getUpdateComplete();
  }
  getUpdateComplete() {
    return this._$Eg;
  }
  shouldUpdate(t) {
    return !0;
  }
  update(t) {
    this._$Ej &&= this._$Ej.forEach(t => this._$EO(t, this[t])), this._$ET();
  }
  updated(t) {}
  firstUpdated(t) {}
}
b.elementStyles = [], b.shadowRootOptions = {
  mode: "open"
}, b[d$2("elementProperties")] = new Map(), b[d$2("finalized")] = new Map(), p$2?.({
  ReactiveElement: b
}), (a$2.reactiveElementVersions ??= []).push("2.0.0");

/**
 * @license
 * Copyright 2017 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */
const t$1 = globalThis,
  i$1 = t$1.trustedTypes,
  s$2 = i$1 ? i$1.createPolicy("lit-html", {
    createHTML: t => t
  }) : void 0,
  e$1 = "$lit$",
  h$1 = `lit$${(Math.random() + "").slice(9)}$`,
  o$1 = "?" + h$1,
  n$1 = `<${o$1}>`,
  r$2 = document,
  l$1 = () => r$2.createComment(""),
  c$1 = t => null === t || "object" != typeof t && "function" != typeof t,
  a$1 = Array.isArray,
  u$1 = t => a$1(t) || "function" == typeof t?.[Symbol.iterator],
  d$1 = "[ \t\n\f\r]",
  f$1 = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,
  v$1 = /-->/g,
  _$1 = />/g,
  m$1 = RegExp(`>|${d$1}(?:([^\\s"'>=/]+)(${d$1}*=${d$1}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`, "g"),
  p$1 = /'/g,
  g$1 = /"/g,
  $$1 = /^(?:script|style|textarea|title)$/i,
  w$1 = Symbol.for("lit-noChange"),
  T$1 = Symbol.for("lit-nothing"),
  A$1 = new WeakMap(),
  E$1 = r$2.createTreeWalker(r$2, 129);
function C$1(t, i) {
  if (!Array.isArray(t) || !t.hasOwnProperty("raw")) throw Error("invalid template strings array");
  return void 0 !== s$2 ? s$2.createHTML(i) : i;
}
const P$1 = (t, i) => {
  const s = t.length - 1,
    o = [];
  let r,
    l = 2 === i ? "<svg>" : "",
    c = f$1;
  for (let i = 0; i < s; i++) {
    const s = t[i];
    let a,
      u,
      d = -1,
      y = 0;
    for (; y < s.length && (c.lastIndex = y, u = c.exec(s), null !== u);) y = c.lastIndex, c === f$1 ? "!--" === u[1] ? c = v$1 : void 0 !== u[1] ? c = _$1 : void 0 !== u[2] ? ($$1.test(u[2]) && (r = RegExp("</" + u[2], "g")), c = m$1) : void 0 !== u[3] && (c = m$1) : c === m$1 ? ">" === u[0] ? (c = r ?? f$1, d = -1) : void 0 === u[1] ? d = -2 : (d = c.lastIndex - u[2].length, a = u[1], c = void 0 === u[3] ? m$1 : '"' === u[3] ? g$1 : p$1) : c === g$1 || c === p$1 ? c = m$1 : c === v$1 || c === _$1 ? c = f$1 : (c = m$1, r = void 0);
    const x = c === m$1 && t[i + 1].startsWith("/>") ? " " : "";
    l += c === f$1 ? s + n$1 : d >= 0 ? (o.push(a), s.slice(0, d) + e$1 + s.slice(d) + h$1 + x) : s + h$1 + (-2 === d ? i : x);
  }
  return [C$1(t, l + (t[s] || "<?>") + (2 === i ? "</svg>" : "")), o];
};
let V$1 = class V {
  constructor({
    strings: t,
    _$litType$: s
  }, n) {
    let r;
    this.parts = [];
    let c = 0,
      a = 0;
    const u = t.length - 1,
      d = this.parts,
      [f, v] = P$1(t, s);
    if (this.el = V.createElement(f, n), E$1.currentNode = this.el.content, 2 === s) {
      const t = this.el.content.firstChild;
      t.replaceWith(...t.childNodes);
    }
    for (; null !== (r = E$1.nextNode()) && d.length < u;) {
      if (1 === r.nodeType) {
        if (r.hasAttributes()) for (const t of r.getAttributeNames()) if (t.endsWith(e$1)) {
          const i = v[a++],
            s = r.getAttribute(t).split(h$1),
            e = /([.?@])?(.*)/.exec(i);
          d.push({
            type: 1,
            index: c,
            name: e[2],
            strings: s,
            ctor: "." === e[1] ? k$1 : "?" === e[1] ? H$1 : "@" === e[1] ? I$1 : R$1
          }), r.removeAttribute(t);
        } else t.startsWith(h$1) && (d.push({
          type: 6,
          index: c
        }), r.removeAttribute(t));
        if ($$1.test(r.tagName)) {
          const t = r.textContent.split(h$1),
            s = t.length - 1;
          if (s > 0) {
            r.textContent = i$1 ? i$1.emptyScript : "";
            for (let i = 0; i < s; i++) r.append(t[i], l$1()), E$1.nextNode(), d.push({
              type: 2,
              index: ++c
            });
            r.append(t[s], l$1());
          }
        }
      } else if (8 === r.nodeType) if (r.data === o$1) d.push({
        type: 2,
        index: c
      });else {
        let t = -1;
        for (; -1 !== (t = r.data.indexOf(h$1, t + 1));) d.push({
          type: 7,
          index: c
        }), t += h$1.length - 1;
      }
      c++;
    }
  }
  static createElement(t, i) {
    const s = r$2.createElement("template");
    return s.innerHTML = t, s;
  }
};
function N$1(t, i, s = t, e) {
  if (i === w$1) return i;
  let h = void 0 !== e ? s._$Co?.[e] : s._$Cl;
  const o = c$1(i) ? void 0 : i._$litDirective$;
  return h?.constructor !== o && (h?._$AO?.(!1), void 0 === o ? h = void 0 : (h = new o(t), h._$AT(t, s, e)), void 0 !== e ? (s._$Co ??= [])[e] = h : s._$Cl = h), void 0 !== h && (i = N$1(t, h._$AS(t, i.values), h, e)), i;
}
let S$1 = class S {
  constructor(t, i) {
    this._$AV = [], this._$AN = void 0, this._$AD = t, this._$AM = i;
  }
  get parentNode() {
    return this._$AM.parentNode;
  }
  get _$AU() {
    return this._$AM._$AU;
  }
  u(t) {
    const {
        el: {
          content: i
        },
        parts: s
      } = this._$AD,
      e = (t?.creationScope ?? r$2).importNode(i, !0);
    E$1.currentNode = e;
    let h = E$1.nextNode(),
      o = 0,
      n = 0,
      l = s[0];
    for (; void 0 !== l;) {
      if (o === l.index) {
        let i;
        2 === l.type ? i = new M$1(h, h.nextSibling, this, t) : 1 === l.type ? i = new l.ctor(h, l.name, l.strings, this, t) : 6 === l.type && (i = new L$1(h, this, t)), this._$AV.push(i), l = s[++n];
      }
      o !== l?.index && (h = E$1.nextNode(), o++);
    }
    return E$1.currentNode = r$2, e;
  }
  p(t) {
    let i = 0;
    for (const s of this._$AV) void 0 !== s && (void 0 !== s.strings ? (s._$AI(t, s, i), i += s.strings.length - 2) : s._$AI(t[i])), i++;
  }
};
let M$1 = class M {
  get _$AU() {
    return this._$AM?._$AU ?? this._$Cv;
  }
  constructor(t, i, s, e) {
    this.type = 2, this._$AH = T$1, this._$AN = void 0, this._$AA = t, this._$AB = i, this._$AM = s, this.options = e, this._$Cv = e?.isConnected ?? !0;
  }
  get parentNode() {
    let t = this._$AA.parentNode;
    const i = this._$AM;
    return void 0 !== i && 11 === t?.nodeType && (t = i.parentNode), t;
  }
  get startNode() {
    return this._$AA;
  }
  get endNode() {
    return this._$AB;
  }
  _$AI(t, i = this) {
    t = N$1(this, t, i), c$1(t) ? t === T$1 || null == t || "" === t ? (this._$AH !== T$1 && this._$AR(), this._$AH = T$1) : t !== this._$AH && t !== w$1 && this._(t) : void 0 !== t._$litType$ ? this.g(t) : void 0 !== t.nodeType ? this.$(t) : u$1(t) ? this.T(t) : this._(t);
  }
  k(t) {
    return this._$AA.parentNode.insertBefore(t, this._$AB);
  }
  $(t) {
    this._$AH !== t && (this._$AR(), this._$AH = this.k(t));
  }
  _(t) {
    this._$AH !== T$1 && c$1(this._$AH) ? this._$AA.nextSibling.data = t : this.$(r$2.createTextNode(t)), this._$AH = t;
  }
  g(t) {
    const {
        values: i,
        _$litType$: s
      } = t,
      e = "number" == typeof s ? this._$AC(t) : (void 0 === s.el && (s.el = V$1.createElement(C$1(s.h, s.h[0]), this.options)), s);
    if (this._$AH?._$AD === e) this._$AH.p(i);else {
      const t = new S$1(e, this),
        s = t.u(this.options);
      t.p(i), this.$(s), this._$AH = t;
    }
  }
  _$AC(t) {
    let i = A$1.get(t.strings);
    return void 0 === i && A$1.set(t.strings, i = new V$1(t)), i;
  }
  T(t) {
    a$1(this._$AH) || (this._$AH = [], this._$AR());
    const i = this._$AH;
    let s,
      e = 0;
    for (const h of t) e === i.length ? i.push(s = new M(this.k(l$1()), this.k(l$1()), this, this.options)) : s = i[e], s._$AI(h), e++;
    e < i.length && (this._$AR(s && s._$AB.nextSibling, e), i.length = e);
  }
  _$AR(t = this._$AA.nextSibling, i) {
    for (this._$AP?.(!1, !0, i); t && t !== this._$AB;) {
      const i = t.nextSibling;
      t.remove(), t = i;
    }
  }
  setConnected(t) {
    void 0 === this._$AM && (this._$Cv = t, this._$AP?.(t));
  }
};
let R$1 = class R {
  get tagName() {
    return this.element.tagName;
  }
  get _$AU() {
    return this._$AM._$AU;
  }
  constructor(t, i, s, e, h) {
    this.type = 1, this._$AH = T$1, this._$AN = void 0, this.element = t, this.name = i, this._$AM = e, this.options = h, s.length > 2 || "" !== s[0] || "" !== s[1] ? (this._$AH = Array(s.length - 1).fill(new String()), this.strings = s) : this._$AH = T$1;
  }
  _$AI(t, i = this, s, e) {
    const h = this.strings;
    let o = !1;
    if (void 0 === h) t = N$1(this, t, i, 0), o = !c$1(t) || t !== this._$AH && t !== w$1, o && (this._$AH = t);else {
      const e = t;
      let n, r;
      for (t = h[0], n = 0; n < h.length - 1; n++) r = N$1(this, e[s + n], i, n), r === w$1 && (r = this._$AH[n]), o ||= !c$1(r) || r !== this._$AH[n], r === T$1 ? t = T$1 : t !== T$1 && (t += (r ?? "") + h[n + 1]), this._$AH[n] = r;
    }
    o && !e && this.j(t);
  }
  j(t) {
    t === T$1 ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, t ?? "");
  }
};
let k$1 = class k extends R$1 {
  constructor() {
    super(...arguments), this.type = 3;
  }
  j(t) {
    this.element[this.name] = t === T$1 ? void 0 : t;
  }
};
let H$1 = class H extends R$1 {
  constructor() {
    super(...arguments), this.type = 4;
  }
  j(t) {
    this.element.toggleAttribute(this.name, !!t && t !== T$1);
  }
};
let I$1 = class I extends R$1 {
  constructor(t, i, s, e, h) {
    super(t, i, s, e, h), this.type = 5;
  }
  _$AI(t, i = this) {
    if ((t = N$1(this, t, i, 0) ?? T$1) === w$1) return;
    const s = this._$AH,
      e = t === T$1 && s !== T$1 || t.capture !== s.capture || t.once !== s.once || t.passive !== s.passive,
      h = t !== T$1 && (s === T$1 || e);
    e && this.element.removeEventListener(this.name, this, s), h && this.element.addEventListener(this.name, this, t), this._$AH = t;
  }
  handleEvent(t) {
    "function" == typeof this._$AH ? this._$AH.call(this.options?.host ?? this.element, t) : this._$AH.handleEvent(t);
  }
};
let L$1 = class L {
  constructor(t, i, s) {
    this.element = t, this.type = 6, this._$AN = void 0, this._$AM = i, this.options = s;
  }
  get _$AU() {
    return this._$AM._$AU;
  }
  _$AI(t) {
    N$1(this, t);
  }
};
const Z$1 = t$1.litHtmlPolyfillSupport;
Z$1?.(V$1, M$1), (t$1.litHtmlVersions ??= []).push("3.0.0");

/**
 * @license
 * Copyright 2017 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */
const t = globalThis,
  i = t.trustedTypes,
  s$1 = i ? i.createPolicy("lit-html", {
    createHTML: t => t
  }) : void 0,
  e = "$lit$",
  h = `lit$${(Math.random() + "").slice(9)}$`,
  o = "?" + h,
  n = `<${o}>`,
  r$1 = document,
  l = () => r$1.createComment(""),
  c = t => null === t || "object" != typeof t && "function" != typeof t,
  a = Array.isArray,
  u = t => a(t) || "function" == typeof t?.[Symbol.iterator],
  d = "[ \t\n\f\r]",
  f = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,
  v = /-->/g,
  _ = />/g,
  m = RegExp(`>|${d}(?:([^\\s"'>=/]+)(${d}*=${d}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`, "g"),
  p = /'/g,
  g = /"/g,
  $ = /^(?:script|style|textarea|title)$/i,
  y = t => (i, ...s) => ({
    _$litType$: t,
    strings: i,
    values: s
  }),
  x = y(1),
  w = Symbol.for("lit-noChange"),
  T = Symbol.for("lit-nothing"),
  A = new WeakMap(),
  E = r$1.createTreeWalker(r$1, 129);
function C(t, i) {
  if (!Array.isArray(t) || !t.hasOwnProperty("raw")) throw Error("invalid template strings array");
  return void 0 !== s$1 ? s$1.createHTML(i) : i;
}
const P = (t, i) => {
  const s = t.length - 1,
    o = [];
  let r,
    l = 2 === i ? "<svg>" : "",
    c = f;
  for (let i = 0; i < s; i++) {
    const s = t[i];
    let a,
      u,
      d = -1,
      y = 0;
    for (; y < s.length && (c.lastIndex = y, u = c.exec(s), null !== u);) y = c.lastIndex, c === f ? "!--" === u[1] ? c = v : void 0 !== u[1] ? c = _ : void 0 !== u[2] ? ($.test(u[2]) && (r = RegExp("</" + u[2], "g")), c = m) : void 0 !== u[3] && (c = m) : c === m ? ">" === u[0] ? (c = r ?? f, d = -1) : void 0 === u[1] ? d = -2 : (d = c.lastIndex - u[2].length, a = u[1], c = void 0 === u[3] ? m : '"' === u[3] ? g : p) : c === g || c === p ? c = m : c === v || c === _ ? c = f : (c = m, r = void 0);
    const x = c === m && t[i + 1].startsWith("/>") ? " " : "";
    l += c === f ? s + n : d >= 0 ? (o.push(a), s.slice(0, d) + e + s.slice(d) + h + x) : s + h + (-2 === d ? i : x);
  }
  return [C(t, l + (t[s] || "<?>") + (2 === i ? "</svg>" : "")), o];
};
class V {
  constructor({
    strings: t,
    _$litType$: s
  }, n) {
    let r;
    this.parts = [];
    let c = 0,
      a = 0;
    const u = t.length - 1,
      d = this.parts,
      [f, v] = P(t, s);
    if (this.el = V.createElement(f, n), E.currentNode = this.el.content, 2 === s) {
      const t = this.el.content.firstChild;
      t.replaceWith(...t.childNodes);
    }
    for (; null !== (r = E.nextNode()) && d.length < u;) {
      if (1 === r.nodeType) {
        if (r.hasAttributes()) for (const t of r.getAttributeNames()) if (t.endsWith(e)) {
          const i = v[a++],
            s = r.getAttribute(t).split(h),
            e = /([.?@])?(.*)/.exec(i);
          d.push({
            type: 1,
            index: c,
            name: e[2],
            strings: s,
            ctor: "." === e[1] ? k : "?" === e[1] ? H : "@" === e[1] ? I : R
          }), r.removeAttribute(t);
        } else t.startsWith(h) && (d.push({
          type: 6,
          index: c
        }), r.removeAttribute(t));
        if ($.test(r.tagName)) {
          const t = r.textContent.split(h),
            s = t.length - 1;
          if (s > 0) {
            r.textContent = i ? i.emptyScript : "";
            for (let i = 0; i < s; i++) r.append(t[i], l()), E.nextNode(), d.push({
              type: 2,
              index: ++c
            });
            r.append(t[s], l());
          }
        }
      } else if (8 === r.nodeType) if (r.data === o) d.push({
        type: 2,
        index: c
      });else {
        let t = -1;
        for (; -1 !== (t = r.data.indexOf(h, t + 1));) d.push({
          type: 7,
          index: c
        }), t += h.length - 1;
      }
      c++;
    }
  }
  static createElement(t, i) {
    const s = r$1.createElement("template");
    return s.innerHTML = t, s;
  }
}
function N(t, i, s = t, e) {
  if (i === w) return i;
  let h = void 0 !== e ? s._$Co?.[e] : s._$Cl;
  const o = c(i) ? void 0 : i._$litDirective$;
  return h?.constructor !== o && (h?._$AO?.(!1), void 0 === o ? h = void 0 : (h = new o(t), h._$AT(t, s, e)), void 0 !== e ? (s._$Co ??= [])[e] = h : s._$Cl = h), void 0 !== h && (i = N(t, h._$AS(t, i.values), h, e)), i;
}
class S {
  constructor(t, i) {
    this._$AV = [], this._$AN = void 0, this._$AD = t, this._$AM = i;
  }
  get parentNode() {
    return this._$AM.parentNode;
  }
  get _$AU() {
    return this._$AM._$AU;
  }
  u(t) {
    const {
        el: {
          content: i
        },
        parts: s
      } = this._$AD,
      e = (t?.creationScope ?? r$1).importNode(i, !0);
    E.currentNode = e;
    let h = E.nextNode(),
      o = 0,
      n = 0,
      l = s[0];
    for (; void 0 !== l;) {
      if (o === l.index) {
        let i;
        2 === l.type ? i = new M(h, h.nextSibling, this, t) : 1 === l.type ? i = new l.ctor(h, l.name, l.strings, this, t) : 6 === l.type && (i = new L(h, this, t)), this._$AV.push(i), l = s[++n];
      }
      o !== l?.index && (h = E.nextNode(), o++);
    }
    return E.currentNode = r$1, e;
  }
  p(t) {
    let i = 0;
    for (const s of this._$AV) void 0 !== s && (void 0 !== s.strings ? (s._$AI(t, s, i), i += s.strings.length - 2) : s._$AI(t[i])), i++;
  }
}
class M {
  get _$AU() {
    return this._$AM?._$AU ?? this._$Cv;
  }
  constructor(t, i, s, e) {
    this.type = 2, this._$AH = T, this._$AN = void 0, this._$AA = t, this._$AB = i, this._$AM = s, this.options = e, this._$Cv = e?.isConnected ?? !0;
  }
  get parentNode() {
    let t = this._$AA.parentNode;
    const i = this._$AM;
    return void 0 !== i && 11 === t?.nodeType && (t = i.parentNode), t;
  }
  get startNode() {
    return this._$AA;
  }
  get endNode() {
    return this._$AB;
  }
  _$AI(t, i = this) {
    t = N(this, t, i), c(t) ? t === T || null == t || "" === t ? (this._$AH !== T && this._$AR(), this._$AH = T) : t !== this._$AH && t !== w && this._(t) : void 0 !== t._$litType$ ? this.g(t) : void 0 !== t.nodeType ? this.$(t) : u(t) ? this.T(t) : this._(t);
  }
  k(t) {
    return this._$AA.parentNode.insertBefore(t, this._$AB);
  }
  $(t) {
    this._$AH !== t && (this._$AR(), this._$AH = this.k(t));
  }
  _(t) {
    this._$AH !== T && c(this._$AH) ? this._$AA.nextSibling.data = t : this.$(r$1.createTextNode(t)), this._$AH = t;
  }
  g(t) {
    const {
        values: i,
        _$litType$: s
      } = t,
      e = "number" == typeof s ? this._$AC(t) : (void 0 === s.el && (s.el = V.createElement(C(s.h, s.h[0]), this.options)), s);
    if (this._$AH?._$AD === e) this._$AH.p(i);else {
      const t = new S(e, this),
        s = t.u(this.options);
      t.p(i), this.$(s), this._$AH = t;
    }
  }
  _$AC(t) {
    let i = A.get(t.strings);
    return void 0 === i && A.set(t.strings, i = new V(t)), i;
  }
  T(t) {
    a(this._$AH) || (this._$AH = [], this._$AR());
    const i = this._$AH;
    let s,
      e = 0;
    for (const h of t) e === i.length ? i.push(s = new M(this.k(l()), this.k(l()), this, this.options)) : s = i[e], s._$AI(h), e++;
    e < i.length && (this._$AR(s && s._$AB.nextSibling, e), i.length = e);
  }
  _$AR(t = this._$AA.nextSibling, i) {
    for (this._$AP?.(!1, !0, i); t && t !== this._$AB;) {
      const i = t.nextSibling;
      t.remove(), t = i;
    }
  }
  setConnected(t) {
    void 0 === this._$AM && (this._$Cv = t, this._$AP?.(t));
  }
}
class R {
  get tagName() {
    return this.element.tagName;
  }
  get _$AU() {
    return this._$AM._$AU;
  }
  constructor(t, i, s, e, h) {
    this.type = 1, this._$AH = T, this._$AN = void 0, this.element = t, this.name = i, this._$AM = e, this.options = h, s.length > 2 || "" !== s[0] || "" !== s[1] ? (this._$AH = Array(s.length - 1).fill(new String()), this.strings = s) : this._$AH = T;
  }
  _$AI(t, i = this, s, e) {
    const h = this.strings;
    let o = !1;
    if (void 0 === h) t = N(this, t, i, 0), o = !c(t) || t !== this._$AH && t !== w, o && (this._$AH = t);else {
      const e = t;
      let n, r;
      for (t = h[0], n = 0; n < h.length - 1; n++) r = N(this, e[s + n], i, n), r === w && (r = this._$AH[n]), o ||= !c(r) || r !== this._$AH[n], r === T ? t = T : t !== T && (t += (r ?? "") + h[n + 1]), this._$AH[n] = r;
    }
    o && !e && this.j(t);
  }
  j(t) {
    t === T ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, t ?? "");
  }
}
class k extends R {
  constructor() {
    super(...arguments), this.type = 3;
  }
  j(t) {
    this.element[this.name] = t === T ? void 0 : t;
  }
}
class H extends R {
  constructor() {
    super(...arguments), this.type = 4;
  }
  j(t) {
    this.element.toggleAttribute(this.name, !!t && t !== T);
  }
}
class I extends R {
  constructor(t, i, s, e, h) {
    super(t, i, s, e, h), this.type = 5;
  }
  _$AI(t, i = this) {
    if ((t = N(this, t, i, 0) ?? T) === w) return;
    const s = this._$AH,
      e = t === T && s !== T || t.capture !== s.capture || t.once !== s.once || t.passive !== s.passive,
      h = t !== T && (s === T || e);
    e && this.element.removeEventListener(this.name, this, s), h && this.element.addEventListener(this.name, this, t), this._$AH = t;
  }
  handleEvent(t) {
    "function" == typeof this._$AH ? this._$AH.call(this.options?.host ?? this.element, t) : this._$AH.handleEvent(t);
  }
}
class L {
  constructor(t, i, s) {
    this.element = t, this.type = 6, this._$AN = void 0, this._$AM = i, this.options = s;
  }
  get _$AU() {
    return this._$AM._$AU;
  }
  _$AI(t) {
    N(this, t);
  }
}
const Z = t.litHtmlPolyfillSupport;
Z?.(V, M), (t.litHtmlVersions ??= []).push("3.0.0");
const j = (t, i, s) => {
  const e = s?.renderBefore ?? i;
  let h = e._$litPart$;
  if (void 0 === h) {
    const t = s?.renderBefore ?? null;
    e._$litPart$ = h = new M(i.insertBefore(l(), t), t, void 0, s ?? {});
  }
  return h._$AI(t), h;
};

/**
 * @license
 * Copyright 2017 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */
class s extends b {
  constructor() {
    super(...arguments), this.renderOptions = {
      host: this
    }, this._$Do = void 0;
  }
  createRenderRoot() {
    const t = super.createRenderRoot();
    return this.renderOptions.renderBefore ??= t.firstChild, t;
  }
  update(t) {
    const i = this.render();
    this.hasUpdated || (this.renderOptions.isConnected = this.isConnected), super.update(t), this._$Do = j(i, this.renderRoot, this.renderOptions);
  }
  connectedCallback() {
    super.connectedCallback(), this._$Do?.setConnected(!0);
  }
  disconnectedCallback() {
    super.disconnectedCallback(), this._$Do?.setConnected(!1);
  }
  render() {
    return w;
  }
}
s._$litElement$ = !0, s[("finalized")] = !0, globalThis.litElementHydrateSupport?.({
  LitElement: s
});
const r = globalThis.litElementPolyfillSupport;
r?.({
  LitElement: s
});
(globalThis.litElementVersions ??= []).push("4.0.0");

/* 
Tool Cool Color Picker
Version: 1.0.15
Documentation: https://github.com/mzusin/toolcool-color-picker
Author: Miriam Zusin
License: MIT License                                   
*/
(() => {
  var Mt = Object.defineProperty;
  var kt = (o, e, t) => e in o ? Mt(o, e, {
    enumerable: !0,
    configurable: !0,
    writable: !0,
    value: t
  }) : o[e] = t;
  var h = (o, e, t) => (kt(o, typeof e != "symbol" ? e + "" : e, t), t);
  var ot = ":root{--tool-cool-color-picker-btn-bg:#fff;--tool-cool-color-picker-btn-border-color:#cecece;--tool-cool-color-picker-btn-border-color-inner:#626262;--tool-cool-color-picker-btn-border-radius:.25rem;--tool-cool-color-picker-btn-border-radius-inner:0}.color-picker{position:relative}.button{width:3rem;height:1.5rem;padding:.25rem;background:var(--tool-cool-color-picker-btn-bg,#fff);border-radius:var(--tool-cool-color-picker-btn-border-radius,0.25rem);border-width:1px;border-style:solid;border-color:var(--tool-cool-color-picker-btn-border-color,#cecece);cursor:pointer;box-sizing:border-box}.button-color{display:block;width:100%;height:100%;border-width:1px;border-style:solid;border-color:var(--tool-cool-color-picker-btn-border-color-inner,#626262);background:#000;box-sizing:border-box;border-radius:var(--tool-cool-color-picker-btn-border-radius-inner,0)}";
  var it = ":root{--tool-cool-color-picker-popup-bg:#fff;--tool-cool-color-picker-popup-border-color:#cecece;--tool-cool-color-picker-popup-width:214px}.popup{position:absolute;left:0;top:calc(100% - 1px);z-index:50;width:var(--tool-cool-color-picker-popup-width,214px);box-shadow:0 1px 3px 0 rgba(0,0,0,0.1),0 1px 2px -1px rgba(0,0,0,0.1);padding:.5rem;background:var(--tool-cool-color-picker-popup-bg,#fff);border-width:1px;border-style:solid;border-color:var(--tool-cool-color-picker-popup-border-color,#cecece);border-radius:.25rem}.popup.right{right:0;left:auto}";
  var rt = ".saturation{touch-action:none;overflow:hidden;width:100%;height:9rem;position:relative}.box{width:100%;height:100%;position:absolute}.white{background:linear-gradient(90deg,#fff,hsla(0,0%,100%,0))}.black{background:linear-gradient(0,#000,transparent)}.pointer{top:34.902%;left:18.6747%;cursor:pointer;position:absolute;outline:0}.handler{box-shadow:0 0 0 1.5px #fff,inset 0 0 1px 1px rgb(0,0,0,0.3),0 0 1px 2px rgb(0,0,0,0.4);-webkit-transform:translate(-2px,-2px);transform:translate(-2px,-2px);border-radius:100%;width:.25rem;height:.25rem;outline:0}";
  var p = "tc-hsv-changed",
    f = "tc-hue-changed",
    m = "tc-alpha-changed",
    D = "tc-button-clicked",
    nt = o => {
      !o || document.dispatchEvent(new CustomEvent(D, {
        detail: {
          cid: o
        }
      }));
    },
    M = (o, e) => {
      !o || document.dispatchEvent(new CustomEvent(m, {
        detail: {
          a: e,
          cid: o
        }
      }));
    },
    b = (o, e, t, i) => {
      !o || document.dispatchEvent(new CustomEvent(p, {
        detail: {
          h: e,
          s: t,
          v: i,
          cid: o
        }
      }));
    },
    st = (o, e) => {
      !o || document.dispatchEvent(new CustomEvent(f, {
        detail: {
          h: e,
          cid: o
        }
      }));
    };
  function u(o, e) {
    St(o) && (o = "100%");
    var t = Tt(o);
    return o = e === 360 ? o : Math.min(e, Math.max(0, parseFloat(o))), t && (o = parseInt(String(o * e), 10) / 100), Math.abs(o - e) < 1e-6 ? 1 : (e === 360 ? o = (o < 0 ? o % e + e : o % e) / parseFloat(String(e)) : o = o % e / parseFloat(String(e)), o);
  }
  function k(o) {
    return Math.min(1, Math.max(0, o));
  }
  function St(o) {
    return typeof o == "string" && o.indexOf(".") !== -1 && parseFloat(o) === 1;
  }
  function Tt(o) {
    return typeof o == "string" && o.indexOf("%") !== -1;
  }
  function _(o) {
    return o = parseFloat(o), (isNaN(o) || o < 0 || o > 1) && (o = 1), o;
  }
  function L(o) {
    return o <= 1 ? "".concat(Number(o) * 100, "%") : o;
  }
  function C(o) {
    return o.length === 1 ? "0" + o : String(o);
  }
  function at(o, e, t) {
    return {
      r: u(o, 255) * 255,
      g: u(e, 255) * 255,
      b: u(t, 255) * 255
    };
  }
  function U(o, e, t) {
    o = u(o, 255), e = u(e, 255), t = u(t, 255);
    var i = Math.max(o, e, t),
      r = Math.min(o, e, t),
      n = 0,
      s = 0,
      a = (i + r) / 2;
    if (i === r) s = 0, n = 0;else {
      var d = i - r;
      switch (s = a > .5 ? d / (2 - i - r) : d / (i + r), i) {
        case o:
          n = (e - t) / d + (e < t ? 6 : 0);
          break;
        case e:
          n = (t - o) / d + 2;
          break;
        case t:
          n = (o - e) / d + 4;
          break;
      }
      n /= 6;
    }
    return {
      h: n,
      s,
      l: a
    };
  }
  function O(o, e, t) {
    return t < 0 && (t += 1), t > 1 && (t -= 1), t < 1 / 6 ? o + (e - o) * (6 * t) : t < 1 / 2 ? e : t < 2 / 3 ? o + (e - o) * (2 / 3 - t) * 6 : o;
  }
  function ht(o, e, t) {
    var i, r, n;
    if (o = u(o, 360), e = u(e, 100), t = u(t, 100), e === 0) r = t, n = t, i = t;else {
      var s = t < .5 ? t * (1 + e) : t + e - t * e,
        a = 2 * t - s;
      i = O(a, s, o + 1 / 3), r = O(a, s, o), n = O(a, s, o - 1 / 3);
    }
    return {
      r: i * 255,
      g: r * 255,
      b: n * 255
    };
  }
  function N(o, e, t) {
    o = u(o, 255), e = u(e, 255), t = u(t, 255);
    var i = Math.max(o, e, t),
      r = Math.min(o, e, t),
      n = 0,
      s = i,
      a = i - r,
      d = i === 0 ? 0 : a / i;
    if (i === r) n = 0;else {
      switch (i) {
        case o:
          n = (e - t) / a + (e < t ? 6 : 0);
          break;
        case e:
          n = (t - o) / a + 2;
          break;
        case t:
          n = (o - e) / a + 4;
          break;
      }
      n /= 6;
    }
    return {
      h: n,
      s: d,
      v: s
    };
  }
  function lt(o, e, t) {
    o = u(o, 360) * 6, e = u(e, 100), t = u(t, 100);
    var i = Math.floor(o),
      r = o - i,
      n = t * (1 - e),
      s = t * (1 - r * e),
      a = t * (1 - (1 - r) * e),
      d = i % 6,
      w = [t, s, n, n, a, t][d],
      x = [a, t, t, s, n, n][d],
      R = [n, n, a, t, t, s][d];
    return {
      r: w * 255,
      g: x * 255,
      b: R * 255
    };
  }
  function K(o, e, t, i) {
    var r = [C(Math.round(o).toString(16)), C(Math.round(e).toString(16)), C(Math.round(t).toString(16))];
    return i && r[0].startsWith(r[0].charAt(1)) && r[1].startsWith(r[1].charAt(1)) && r[2].startsWith(r[2].charAt(1)) ? r[0].charAt(0) + r[1].charAt(0) + r[2].charAt(0) : r.join("");
  }
  function dt(o, e, t, i, r) {
    var n = [C(Math.round(o).toString(16)), C(Math.round(e).toString(16)), C(Math.round(t).toString(16)), C(Rt(i))];
    return r && n[0].startsWith(n[0].charAt(1)) && n[1].startsWith(n[1].charAt(1)) && n[2].startsWith(n[2].charAt(1)) && n[3].startsWith(n[3].charAt(1)) ? n[0].charAt(0) + n[1].charAt(0) + n[2].charAt(0) + n[3].charAt(0) : n.join("");
  }
  function Rt(o) {
    return Math.round(parseFloat(o) * 255).toString(16);
  }
  function V(o) {
    return g(o) / 255;
  }
  function g(o) {
    return parseInt(o, 16);
  }
  function ut(o) {
    return {
      r: o >> 16,
      g: (o & 65280) >> 8,
      b: o & 255
    };
  }
  var A = {
    aliceblue: "#f0f8ff",
    antiquewhite: "#faebd7",
    aqua: "#00ffff",
    aquamarine: "#7fffd4",
    azure: "#f0ffff",
    beige: "#f5f5dc",
    bisque: "#ffe4c4",
    black: "#000000",
    blanchedalmond: "#ffebcd",
    blue: "#0000ff",
    blueviolet: "#8a2be2",
    brown: "#a52a2a",
    burlywood: "#deb887",
    cadetblue: "#5f9ea0",
    chartreuse: "#7fff00",
    chocolate: "#d2691e",
    coral: "#ff7f50",
    cornflowerblue: "#6495ed",
    cornsilk: "#fff8dc",
    crimson: "#dc143c",
    cyan: "#00ffff",
    darkblue: "#00008b",
    darkcyan: "#008b8b",
    darkgoldenrod: "#b8860b",
    darkgray: "#a9a9a9",
    darkgreen: "#006400",
    darkgrey: "#a9a9a9",
    darkkhaki: "#bdb76b",
    darkmagenta: "#8b008b",
    darkolivegreen: "#556b2f",
    darkorange: "#ff8c00",
    darkorchid: "#9932cc",
    darkred: "#8b0000",
    darksalmon: "#e9967a",
    darkseagreen: "#8fbc8f",
    darkslateblue: "#483d8b",
    darkslategray: "#2f4f4f",
    darkslategrey: "#2f4f4f",
    darkturquoise: "#00ced1",
    darkviolet: "#9400d3",
    deeppink: "#ff1493",
    deepskyblue: "#00bfff",
    dimgray: "#696969",
    dimgrey: "#696969",
    dodgerblue: "#1e90ff",
    firebrick: "#b22222",
    floralwhite: "#fffaf0",
    forestgreen: "#228b22",
    fuchsia: "#ff00ff",
    gainsboro: "#dcdcdc",
    ghostwhite: "#f8f8ff",
    goldenrod: "#daa520",
    gold: "#ffd700",
    gray: "#808080",
    green: "#008000",
    greenyellow: "#adff2f",
    grey: "#808080",
    honeydew: "#f0fff0",
    hotpink: "#ff69b4",
    indianred: "#cd5c5c",
    indigo: "#4b0082",
    ivory: "#fffff0",
    khaki: "#f0e68c",
    lavenderblush: "#fff0f5",
    lavender: "#e6e6fa",
    lawngreen: "#7cfc00",
    lemonchiffon: "#fffacd",
    lightblue: "#add8e6",
    lightcoral: "#f08080",
    lightcyan: "#e0ffff",
    lightgoldenrodyellow: "#fafad2",
    lightgray: "#d3d3d3",
    lightgreen: "#90ee90",
    lightgrey: "#d3d3d3",
    lightpink: "#ffb6c1",
    lightsalmon: "#ffa07a",
    lightseagreen: "#20b2aa",
    lightskyblue: "#87cefa",
    lightslategray: "#778899",
    lightslategrey: "#778899",
    lightsteelblue: "#b0c4de",
    lightyellow: "#ffffe0",
    lime: "#00ff00",
    limegreen: "#32cd32",
    linen: "#faf0e6",
    magenta: "#ff00ff",
    maroon: "#800000",
    mediumaquamarine: "#66cdaa",
    mediumblue: "#0000cd",
    mediumorchid: "#ba55d3",
    mediumpurple: "#9370db",
    mediumseagreen: "#3cb371",
    mediumslateblue: "#7b68ee",
    mediumspringgreen: "#00fa9a",
    mediumturquoise: "#48d1cc",
    mediumvioletred: "#c71585",
    midnightblue: "#191970",
    mintcream: "#f5fffa",
    mistyrose: "#ffe4e1",
    moccasin: "#ffe4b5",
    navajowhite: "#ffdead",
    navy: "#000080",
    oldlace: "#fdf5e6",
    olive: "#808000",
    olivedrab: "#6b8e23",
    orange: "#ffa500",
    orangered: "#ff4500",
    orchid: "#da70d6",
    palegoldenrod: "#eee8aa",
    palegreen: "#98fb98",
    paleturquoise: "#afeeee",
    palevioletred: "#db7093",
    papayawhip: "#ffefd5",
    peachpuff: "#ffdab9",
    peru: "#cd853f",
    pink: "#ffc0cb",
    plum: "#dda0dd",
    powderblue: "#b0e0e6",
    purple: "#800080",
    rebeccapurple: "#663399",
    red: "#ff0000",
    rosybrown: "#bc8f8f",
    royalblue: "#4169e1",
    saddlebrown: "#8b4513",
    salmon: "#fa8072",
    sandybrown: "#f4a460",
    seagreen: "#2e8b57",
    seashell: "#fff5ee",
    sienna: "#a0522d",
    silver: "#c0c0c0",
    skyblue: "#87ceeb",
    slateblue: "#6a5acd",
    slategray: "#708090",
    slategrey: "#708090",
    snow: "#fffafa",
    springgreen: "#00ff7f",
    steelblue: "#4682b4",
    tan: "#d2b48c",
    teal: "#008080",
    thistle: "#d8bfd8",
    tomato: "#ff6347",
    turquoise: "#40e0d0",
    violet: "#ee82ee",
    wheat: "#f5deb3",
    white: "#ffffff",
    whitesmoke: "#f5f5f5",
    yellow: "#ffff00",
    yellowgreen: "#9acd32"
  };
  function ct(o) {
    var e = {
        r: 0,
        g: 0,
        b: 0
      },
      t = 1,
      i = null,
      r = null,
      n = null,
      s = !1,
      a = !1;
    return typeof o == "string" && (o = Pt(o)), typeof o == "object" && (E(o.r) && E(o.g) && E(o.b) ? (e = at(o.r, o.g, o.b), s = !0, a = String(o.r).substr(-1) === "%" ? "prgb" : "rgb") : E(o.h) && E(o.s) && E(o.v) ? (i = L(o.s), r = L(o.v), e = lt(o.h, i, r), s = !0, a = "hsv") : E(o.h) && E(o.s) && E(o.l) && (i = L(o.s), n = L(o.l), e = ht(o.h, i, n), s = !0, a = "hsl"), Object.prototype.hasOwnProperty.call(o, "a") && (t = o.a)), t = _(t), {
      ok: s,
      format: o.format || a,
      r: Math.min(255, Math.max(e.r, 0)),
      g: Math.min(255, Math.max(e.g, 0)),
      b: Math.min(255, Math.max(e.b, 0)),
      a: t
    };
  }
  var Dt = "[-\\+]?\\d+%?",
    _t = "[-\\+]?\\d*\\.\\d+%?",
    y = "(?:".concat(_t, ")|(?:").concat(Dt, ")"),
    G = "[\\s|\\(]+(".concat(y, ")[,|\\s]+(").concat(y, ")[,|\\s]+(").concat(y, ")\\s*\\)?"),
    F = "[\\s|\\(]+(".concat(y, ")[,|\\s]+(").concat(y, ")[,|\\s]+(").concat(y, ")[,|\\s]+(").concat(y, ")\\s*\\)?"),
    v = {
      CSS_UNIT: new RegExp(y),
      rgb: new RegExp("rgb" + G),
      rgba: new RegExp("rgba" + F),
      hsl: new RegExp("hsl" + G),
      hsla: new RegExp("hsla" + F),
      hsv: new RegExp("hsv" + G),
      hsva: new RegExp("hsva" + F),
      hex3: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
      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})$/
    };
  function Pt(o) {
    if (o = o.trim().toLowerCase(), o.length === 0) return !1;
    var e = !1;
    if (A[o]) o = A[o], e = !0;else if (o === "transparent") return {
      r: 0,
      g: 0,
      b: 0,
      a: 0,
      format: "name"
    };
    var t = v.rgb.exec(o);
    return t ? {
      r: t[1],
      g: t[2],
      b: t[3]
    } : (t = v.rgba.exec(o), t ? {
      r: t[1],
      g: t[2],
      b: t[3],
      a: t[4]
    } : (t = v.hsl.exec(o), t ? {
      h: t[1],
      s: t[2],
      l: t[3]
    } : (t = v.hsla.exec(o), t ? {
      h: t[1],
      s: t[2],
      l: t[3],
      a: t[4]
    } : (t = v.hsv.exec(o), t ? {
      h: t[1],
      s: t[2],
      v: t[3]
    } : (t = v.hsva.exec(o), t ? {
      h: t[1],
      s: t[2],
      v: t[3],
      a: t[4]
    } : (t = v.hex8.exec(o), t ? {
      r: g(t[1]),
      g: g(t[2]),
      b: g(t[3]),
      a: V(t[4]),
      format: e ? "name" : "hex8"
    } : (t = v.hex6.exec(o), t ? {
      r: g(t[1]),
      g: g(t[2]),
      b: g(t[3]),
      format: e ? "name" : "hex"
    } : (t = v.hex4.exec(o), t ? {
      r: g(t[1] + t[1]),
      g: g(t[2] + t[2]),
      b: g(t[3] + t[3]),
      a: V(t[4] + t[4]),
      format: e ? "name" : "hex8"
    } : (t = v.hex3.exec(o), t ? {
      r: g(t[1] + t[1]),
      g: g(t[2] + t[2]),
      b: g(t[3] + t[3]),
      format: e ? "name" : "hex"
    } : !1)))))))));
  }
  function E(o) {
    return Boolean(v.CSS_UNIT.exec(String(o)));
  }
  var l = function () {
    function o(e, t) {
      e === void 0 && (e = ""), t === void 0 && (t = {});
      var i;
      if (e instanceof o) return e;
      typeof e == "number" && (e = ut(e)), this.originalInput = e;
      var r = ct(e);
      this.originalInput = e, this.r = r.r, this.g = r.g, this.b = r.b, this.a = r.a, this.roundA = Math.round(100 * this.a) / 100, this.format = (i = t.format) !== null && i !== void 0 ? i : r.format, this.gradientType = t.gradientType, this.r < 1 && (this.r = Math.round(this.r)), this.g < 1 && (this.g = Math.round(this.g)), this.b < 1 && (this.b = Math.round(this.b)), this.isValid = r.ok;
    }
    return o.prototype.isDark = function () {
      return this.getBrightness() < 128;
    }, o.prototype.isLight = function () {
      return !this.isDark();
    }, o.prototype.getBrightness = function () {
      var e = this.toRgb();
      return (e.r * 299 + e.g * 587 + e.b * 114) / 1e3;
    }, o.prototype.getLuminance = function () {
      var e = this.toRgb(),
        t,
        i,
        r,
        n = e.r / 255,
        s = e.g / 255,
        a = e.b / 255;
      return n <= .03928 ? t = n / 12.92 : t = Math.pow((n + .055) / 1.055, 2.4), s <= .03928 ? i = s / 12.92 : i = Math.pow((s + .055) / 1.055, 2.4), a <= .03928 ? r = a / 12.92 : r = Math.pow((a + .055) / 1.055, 2.4), .2126 * t + .7152 * i + .0722 * r;
    }, o.prototype.getAlpha = function () {
      return this.a;
    }, o.prototype.setAlpha = function (e) {
      return this.a = _(e), this.roundA = Math.round(100 * this.a) / 100, this;
    }, o.prototype.toHsv = function () {
      var e = N(this.r, this.g, this.b);
      return {
        h: e.h * 360,
        s: e.s,
        v: e.v,
        a: this.a
      };
    }, o.prototype.toHsvString = function () {
      var e = N(this.r, this.g, this.b),
        t = Math.round(e.h * 360),
        i = Math.round(e.s * 100),
        r = Math.round(e.v * 100);
      return this.a === 1 ? "hsv(".concat(t, ", ").concat(i, "%, ").concat(r, "%)") : "hsva(".concat(t, ", ").concat(i, "%, ").concat(r, "%, ").concat(this.roundA, ")");
    }, o.prototype.toHsl = function () {
      var e = U(this.r, this.g, this.b);
      return {
        h: e.h * 360,
        s: e.s,
        l: e.l,
        a: this.a
      };
    }, o.prototype.toHslString = function () {
      var e = U(this.r, this.g, this.b),
        t = Math.round(e.h * 360),
        i = Math.round(e.s * 100),
        r = Math.round(e.l * 100);
      return this.a === 1 ? "hsl(".concat(t, ", ").concat(i, "%, ").concat(r, "%)") : "hsla(".concat(t, ", ").concat(i, "%, ").concat(r, "%, ").concat(this.roundA, ")");
    }, o.prototype.toHex = function (e) {
      return e === void 0 && (e = !1), K(this.r, this.g, this.b, e);
    }, o.prototype.toHexString = function (e) {
      return e === void 0 && (e = !1), "#" + this.toHex(e);
    }, o.prototype.toHex8 = function (e) {
      return e === void 0 && (e = !1), dt(this.r, this.g, this.b, this.a, e);
    }, o.prototype.toHex8String = function (e) {
      return e === void 0 && (e = !1), "#" + this.toHex8(e);
    }, o.prototype.toRgb = function () {
      return {
        r: Math.round(this.r),
        g: Math.round(this.g),
        b: Math.round(this.b),
        a: this.a
      };
    }, o.prototype.toRgbString = function () {
      var e = Math.round(this.r),
        t = Math.round(this.g),
        i = Math.round(this.b);
      return this.a === 1 ? "rgb(".concat(e, ", ").concat(t, ", ").concat(i, ")") : "rgba(".concat(e, ", ").concat(t, ", ").concat(i, ", ").concat(this.roundA, ")");
    }, o.prototype.toPercentageRgb = function () {
      var e = function (t) {
        return "".concat(Math.round(u(t, 255) * 100), "%");
      };
      return {
        r: e(this.r),
        g: e(this.g),
        b: e(this.b),
        a: this.a
      };
    }, o.prototype.toPercentageRgbString = function () {
      var e = function (t) {
        return Math.round(u(t, 255) * 100);
      };
      return this.a === 1 ? "rgb(".concat(e(this.r), "%, ").concat(e(this.g), "%, ").concat(e(this.b), "%)") : "rgba(".concat(e(this.r), "%, ").concat(e(this.g), "%, ").concat(e(this.b), "%, ").concat(this.roundA, ")");
    }, o.prototype.toName = function () {
      if (this.a === 0) return "transparent";
      if (this.a < 1) return !1;
      for (var e = "#" + K(this.r, this.g, this.b, !1), t = 0, i = Object.entries(A); t < i.length; t++) {
        var r = i[t],
          n = r[0],
          s = r[1];
        if (e === s) return n;
      }
      return !1;
    }, o.prototype.toString = function (e) {
      var t = Boolean(e);
      e = e != null ? e : this.format;
      var i = !1,
        r = this.a < 1 && this.a >= 0,
        n = !t && r && (e.startsWith("hex") || e === "name");
      return n ? e === "name" && this.a === 0 ? this.toName() : this.toRgbString() : (e === "rgb" && (i = this.toRgbString()), e === "prgb" && (i = this.toPercentageRgbString()), (e === "hex" || e === "hex6") && (i = this.toHexString()), e === "hex3" && (i = this.toHexString(!0)), e === "hex4" && (i = this.toHex8String(!0)), e === "hex8" && (i = this.toHex8String()), e === "name" && (i = this.toName()), e === "hsl" && (i = this.toHslString()), e === "hsv" && (i = this.toHsvString()), i || this.toHexString());
    }, o.prototype.toNumber = function () {
      return (Math.round(this.r) << 16) + (Math.round(this.g) << 8) + Math.round(this.b);
    }, o.prototype.clone = function () {
      return new o(this.toString());
    }, o.prototype.lighten = function (e) {
      e === void 0 && (e = 10);
      var t = this.toHsl();
      return t.l += e / 100, t.l = k(t.l), new o(t);
    }, o.prototype.brighten = function (e) {
      e === void 0 && (e = 10);
      var t = this.toRgb();
      return t.r = Math.max(0, Math.min(255, t.r - Math.round(255 * -(e / 100)))), t.g = Math.max(0, Math.min(255, t.g - Math.round(255 * -(e / 100)))), t.b = Math.max(0, Math.min(255, t.b - Math.round(255 * -(e / 100)))), new o(t);
    }, o.prototype.darken = function (e) {
      e === void 0 && (e = 10);
      var t = this.toHsl();
      return t.l -= e / 100, t.l = k(t.l), new o(t);
    }, o.prototype.tint = function (e) {
      return e === void 0 && (e = 10), this.mix("white", e);
    }, o.prototype.shade = function (e) {
      return e === void 0 && (e = 10), this.mix("black", e);
    }, o.prototype.desaturate = function (e) {
      e === void 0 && (e = 10);
      var t = this.toHsl();
      return t.s -= e / 100, t.s = k(t.s), new o(t);
    }, o.prototype.saturate = function (e) {
      e === void 0 && (e = 10);
      var t = this.toHsl();
      return t.s += e / 100, t.s = k(t.s), new o(t);
    }, o.prototype.greyscale = function () {
      return this.desaturate(100);
    }, o.prototype.spin = function (e) {
      var t = this.toHsl(),
        i = (t.h + e) % 360;
      return t.h = i < 0 ? 360 + i : i, new o(t);
    }, o.prototype.mix = function (e, t) {
      t === void 0 && (t = 50);
      var i = this.toRgb(),
        r = new o(e).toRgb(),
        n = t / 100,
        s = {
          r: (r.r - i.r) * n + i.r,
          g: (r.g - i.g) * n + i.g,
          b: (r.b - i.b) * n + i.b,
          a: (r.a - i.a) * n + i.a
        };
      return new o(s);
    }, o.prototype.analogous = function (e, t) {
      e === void 0 && (e = 6), t === void 0 && (t = 30);
      var i = this.toHsl(),
        r = 360 / t,
        n = [this];
      for (i.h = (i.h - (r * e >> 1) + 720) % 360; --e;) i.h = (i.h + r) % 360, n.push(new o(i));
      return n;
    }, o.prototype.complement = function () {
      var e = this.toHsl();
      return e.h = (e.h + 180) % 360, new o(e);
    }, o.prototype.monochromatic = function (e) {
      e === void 0 && (e = 6);
      for (var t = this.toHsv(), i = t.h, r = t.s, n = t.v, s = [], a = 1 / e; e--;) s.push(new o({
        h: i,
        s: r,
        v: n
      })), n = (n + a) % 1;
      return s;
    }, o.prototype.splitcomplement = function () {
      var e = this.toHsl(),
        t = e.h;
      return [this, new o({
        h: (t + 72) % 360,
        s: e.s,
        l: e.l
      }), new o({
        h: (t + 216) % 360,
        s: e.s,
        l: e.l
      })];
    }, o.prototype.onBackground = function (e) {
      var t = this.toRgb(),
        i = new o(e).toRgb();
      return new o({
        r: i.r + (t.r - i.r) * t.a,
        g: i.g + (t.g - i.g) * t.a,
        b: i.b + (t.b - i.b) * t.a
      });
    }, o.prototype.triad = function () {
      return this.polyad(3);
    }, o.prototype.tetrad = function () {
      return this.polyad(4);
    }, o.prototype.polyad = function (e) {
      for (var t = this.toHsl(), i = t.h, r = [this], n = 360 / e, s = 1; s < e; s++) r.push(new o({
        h: (i + s * n) % 360,
        s: t.s,
        l: t.l
      }));
      return r;
    }, o.prototype.equals = function (e) {
      return this.toRgbString() === new o(e).toRgbString();
    }, o;
  }();
  var $ = () => Math.random().toString(16).slice(2),
    P = o => Math.round((o + Number.EPSILON) * 100) / 100;
  var H = .01,
    q = o => (o < 0 && (o = 0), o > 360 && (o = 360), `hsl(${Math.round(o)}, 100%, 50%)`),
    z = o => {
      let e = o.toRgb();
      return `linear-gradient(to right, rgba(${e.r},${e.g},${e.b}, 0) 0%, rgba(${e.r},${e.g},${e.b}, 1) 100%)`;
    },
    S = o => {
      let e = o.toRgb();
      return `rgba(${e.r}, ${e.g}, ${e.b}, ${P(e.a)})`;
    },
    pt = o => {
      let e = o.toHsl();
      return `hsla(${Math.round(e.h)}, ${Math.round(e.s * 100)}%, ${Math.round(e.l * 100)}%, ${P(e.a)})`;
    },
    gt = o => {
      let e = o.toHsv();
      return `hsva(${Math.round(e.h)}, ${Math.round(e.s * 100)}%, ${Math.round(e.v * 100)}%, ${P(e.a)})`;
    },
    W = o => (o < 0 && (o = 0), o > 1 && (o = 1), `${(-(o * 100) + 100).toFixed(2)}%`),
    X = o => (o < 0 && (o = 0), o > 1 && (o = 1), `${(o * 100).toFixed(2)}%`),
    T = o => {
      o < 0 && (o = 0), o > 360 && (o = 360);
      let e = o * 100 / 360,
        t = Math.round(e * 100) / 100;
      return t < 0 && (t = 0), t > 100 && (t = 100), t;
    },
    B = o => 360 * o / 100,
    I = o => {
      let e = Number(o) || 0;
      return e = Math.round(e), e = Math.max(0, e), e = Math.min(255, e), e;
    },
    ft = o => {
      let e = Number(o) || 100;
      return e = Math.round(e), e = Math.max(0, e), e = Math.min(100, e), e;
    },
    c = o => {
      let e = new l(o || "#000");
      return e.setAlpha(e.getAlpha()), e;
    };
  var j = class extends HTMLElement {
      constructor() {
        super();
        h(this, "cid");
        h(this, "$saturation");
        h(this, "$color");
        h(this, "$pointer");
        h(this, "hue", 0);
        h(this, "saturation", 0);
        h(this, "value", 0);
        this.attachShadow({
          mode: "open"
        }), this.onMouseDown = this.onMouseDown.bind(this), this.onMouseUp = this.onMouseUp.bind(this), this.onChange = this.onChange.bind(this), this.onPointerKeyDown = this.onPointerKeyDown.bind(this), this.hsvChanged = this.hsvChanged.bind(this), this.hueChanged = this.hueChanged.bind(this);
      }
      static get observedAttributes() {
        return ["color"];
      }
      render(t = !0) {
        this.$pointer && (this.$pointer.style.left = X(this.saturation), this.$pointer.style.top = W(this.value)), this.$color && this.$color.setAttribute("style", `background: ${q(this.hue)}`), t && b(this.cid, this.hue, this.saturation, this.value);
      }
      onChange(t) {
        if (!this.$saturation) return;
        let {
          width: i,
          height: r,
          left: n,
          top: s
        } = this.$saturation.getBoundingClientRect();
        if (i === 0 || r === 0) return;
        let a = typeof t.clientX == "number" ? t.clientX : t.touches[0].clientX,
          d = typeof t.clientY == "number" ? t.clientY : t.touches[0].clientY,
          w = Math.min(Math.max(0, a - n), i),
          x = Math.min(Math.max(0, d - s), r);
        this.saturation = w / i, this.value = 1 - x / r, this.render();
      }
      onPointerKeyDown(t) {
        switch (t.key) {
          case "ArrowLeft":
            {
              this.saturation = Math.max(0, this.saturation - H), this.render();
              break;
            }
          case "ArrowRight":
            {
              this.saturation = Math.min(1, this.saturation + H), this.render();
              break;
            }
          case "ArrowUp":
            {
              this.value = Math.min(1, this.value + H), this.render();
              break;
            }
          case "ArrowDown":
            {
              t.preventDefault(), this.value = Math.max(0, this.value - H), this.render();
              break;
            }
        }
      }
      onMouseDown(t) {
        t.preventDefault && t.preventDefault(), this.onChange(t), window.addEventListener("mousemove", this.onChange), window.addEventListener("mouseup", this.onMouseUp), window.setTimeout(() => {
          var i;
          (i = this.$pointer) == null || i.focus();
        }, 0);
      }
      onMouseUp() {
        window.removeEventListener("mousemove", this.onChange), window.removeEventListener("mouseup", this.onChange);
      }
      hsvChanged(t) {
        if (!t || !t.detail || !t.detail.cid || t.detail.cid !== this.cid) return;
        let i = !1;
        this.hue !== t.detail.h && (this.hue = t.detail.h, i = !0), this.saturation !== t.detail.s && (this.saturation = t.detail.s, i = !0), this.value !== t.detail.v && (this.value = t.detail.v, i = !0), i && this.render(!1);
      }
      hueChanged(t) {
        !t || !t.detail || !t.detail.cid || t.detail.cid === this.cid && (this.hue = t.detail.h, this.render());
      }
      connectedCallback() {
        var s, a, d, w, x;
        if (!this.shadowRoot) return;
        this.cid = this.getAttribute("cid") || "";
        let i = c(this.getAttribute("color")).toHsv();
        this.hue = i.h, this.saturation = i.s, this.value = i.v;
        let r = W(this.value),
          n = X(this.saturation);
        this.shadowRoot.innerHTML = `
           <style>${rt}</style>
           <div class="saturation">
                <div class="box" style="background: ${q(this.hue)}">
                    <div class="white box">
                        <div class="black box"></div>
                        
                        <div class="pointer" tabindex="0" style="top: ${r}; left: ${n};">
                            <div class="handler"></div>
                        </div>
                    </div>
                </div>
           </div>
        `, this.$saturation = this.shadowRoot.querySelector(".saturation"), this.$color = this.shadowRoot.querySelector(".box"), this.$pointer = this.shadowRoot.querySelector(".pointer"), (s = this.$pointer) == null || s.addEventListener("keydown", this.onPointerKeyDown), (a = this.$saturation) == null || a.addEventListener("mousedown", this.onMouseDown), (d = this.$saturation) == null || d.addEventListener("mouseup", this.onMouseUp), (w = this.$saturation) == null || w.addEventListener("touchmove", this.onChange), (x = this.$saturation) == null || x.addEventListener("touchstart", this.onChange), document.addEventListener(p, this.hsvChanged), document.addEventListener(f, this.hueChanged);
      }
      disconnectedCallback() {
        var t, i, r, n, s;
        (t = this.$saturation) == null || t.removeEventListener("mousedown", this.onMouseDown), (i = this.$saturation) == null || i.removeEventListener("mouseup", this.onMouseUp), (r = this.$saturation) == null || r.removeEventListener("touchmove", this.onChange), (n = this.$saturation) == null || n.removeEventListener("touchstart", this.onChange), (s = this.$pointer) == null || s.removeEventListener("keydown", this.onPointerKeyDown), document.removeEventListener(p, this.hsvChanged), document.removeEventListener(f, this.hueChanged);
      }
      attributeChangedCallback(t, i, r) {
        let s = c(r).toHsv();
        this.hue = s.h, this.saturation = s.s, this.value = s.v, this.render(!1);
      }
    },
    bt = j;
  var vt = ".hue{overflow:hidden;height:.625rem;margin-bottom:.25rem;margin-top:.25rem;position:relative}.box{width:100%;height:100%;position:absolute}.hue-v{background:linear-gradient(0,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.hue-h{background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red);width:100%;height:100%;position:relative}.pointer-box{left:87%;position:absolute;outline:0}.handler{background:#fff;box-shadow:0 0 2px rgb(0 0 0 / 60%);box-sizing:border-box;border:1px solid hsla(0,0%,88%,.5);height:8px;margin-top:1px;-webkit-transform:translateX(-4px);transform:translateX(-4px);width:8px;cursor:pointer;outline:0}.pointer-box:focus .handler{border:2px solid hsla(0,0%,88%,1)}";
  var Y = class extends HTMLElement {
      constructor() {
        super();
        h(this, "cid");
        h(this, "$hue");
        h(this, "$pointer");
        h(this, "hue", 0);
        this.attachShadow({
          mode: "open"
        }), this.onMouseDown = this.onMouseDown.bind(this), this.onMouseUp = this.onMouseUp.bind(this), this.onChange = this.onChange.bind(this), this.onKeyDown = this.onKeyDown.bind(this), this.hsvChanged = this.hsvChanged.bind(this);
      }
      static get observedAttributes() {
        return ["color"];
      }
      render() {
        this.$pointer && (this.$pointer.style.left = `${T(this.hue)}%`), st(this.cid, this.hue);
      }
      hsvChanged(t) {
        !t || !t.detail || !t.detail.cid || t.detail.cid === this.cid && this.hue !== t.detail.h && (this.hue = t.detail.h, this.render());
      }
      onChange(t) {
        if (!this.$hue) return;
        t.preventDefault && t.preventDefault();
        let {
          width: i,
          left: r
        } = this.$hue.getBoundingClientRect();
        if (i === 0) return;
        let n = typeof t.clientX == "number" ? t.clientX : t.touches[0].clientX,
          s = Math.min(Math.max(0, n - r), i),
          a = Math.min(Math.max(0, Math.round(s * 100 / i)), 100);
        this.hue = B(a), this.render();
      }
      onKeyDown(t) {
        var i;
        switch ((i = this.$pointer) == null || i.focus(), t.key) {
          case "ArrowLeft":
            {
              let r = T(this.hue);
              r = Math.max(0, r - 1), this.hue = B(r), this.render();
              break;
            }
          case "ArrowRight":
            {
              let r = T(this.hue);
              r = Math.min(100, r + 1), this.hue = B(r), this.render();
              break;
            }
        }
      }
      onMouseDown(t) {
        t.preventDefault && t.preventDefault(), this.onChange(t), window.addEventListener("mousemove", this.onChange), window.addEventListener("mouseup", this.onMouseUp), window.setTimeout(() => {
          var i;
          (i = this.$pointer) == null || i.focus();
        }, 0);
      }
      onMouseUp() {
        window.removeEventListener("mousemove", this.onChange), window.removeEventListener("mouseup", this.onChange);
      }
      connectedCallback() {
        var i, r, n, s, a;
        if (!this.shadowRoot) return;
        this.cid = this.getAttribute("cid") || "";
        let t = c(this.getAttribute("color"));
        this.hue = t.toHsv().h, this.shadowRoot.innerHTML = `
           <style>${vt}</style>
           <div class="hue">
                <div class="box">
                    <div class="hue-v box">
                        <div class="hue-h"></div>
                    </div>
                    
                    <div class="pointer box">
                        <div class="pointer-box" tabindex="0" style="left: ${T(this.hue)}%">
                            <div class="handler"></div>
                        </div>
                    </div>
                </div>
           </div>
        `, this.$hue = this.shadowRoot.querySelector(".hue"), this.$pointer = this.shadowRoot.querySelector(".pointer-box"), (i = this.$hue) == null || i.addEventListener("mousedown", this.onMouseDown), (r = this.$hue) == null || r.addEventListener("mouseup", this.onMouseUp), (n = this.$hue) == null || n.addEventListener("touchmove", this.onChange), (s = this.$hue) == null || s.addEventListener("touchstart", this.onChange), (a = this.$pointer) == null || a.addEventListener("keydown", this.onKeyDown), document.addEventListener(p, this.hsvChanged);
      }
      disconnectedCallback() {
        var t, i, r, n, s;
        (t = this.$hue) == null || t.removeEventListener("mousedown", this.onMouseDown), (i = this.$hue) == null || i.removeEventListener("mouseup", this.onMouseUp), (r = this.$hue) == null || r.removeEventListener("touchmove", this.onChange), (n = this.$hue) == null || n.removeEventListener("touchstart", this.onChange), (s = this.$pointer) == null || s.removeEventListener("keydown", this.onKeyDown), document.removeEventListener(p, this.hsvChanged);
      }
      attributeChangedCallback(t, i, r) {
        let s = c(r).toHsv();
        this.hue = s.h, this.render();
      }
    },
    mt = Y;
  var wt = ".alpha{overflow:hidden;height:.625rem;position:relative;background:#fff}.box{width:100%;height:100%;position:absolute}.transparent-bg{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=);overflow:hidden}.pointer-box{left:100%;position:absolute;outline:0}.handler{background:#fff;box-shadow:0 0 2px rgb(0 0 0 / 60%);box-sizing:border-box;border:1px solid hsla(0,0%,88%,.5);height:8px;margin-top:1px;-webkit-transform:translateX(-4px);transform:translateX(-4px);width:8px;cursor:pointer;outline:0}.alpha-pointer-box:focus .alpha-pointer-handler{border:2px solid hsla(0,0%,88%,1)}";
  var Q = class extends HTMLElement {
      constructor() {
        super();
        h(this, "cid");
        h(this, "$alpha");
        h(this, "$color");
        h(this, "$pointer");
        h(this, "alpha", 1);
        h(this, "hue", 0);
        h(this, "saturation", 0);
        h(this, "value", 0);
        this.attachShadow({
          mode: "open"
        }), this.onMouseDown = this.onMouseDown.bind(this), this.onMouseUp = this.onMouseUp.bind(this), this.onChange = this.onChange.bind(this), this.onKeyDown = this.onKeyDown.bind(this), this.hsvChanged = this.hsvChanged.bind(this), this.hueChanged = this.hueChanged.bind(this), this.alphaChanged = this.alphaChanged.bind(this);
      }
      static get observedAttributes() {
        return ["color"];
      }
      render(t = !0) {
        if (this.$pointer && (this.$pointer.style.left = `${this.alpha * 100}%`), this.$color) {
          let i = new l({
            h: this.hue,
            s: this.saturation,
            v: this.value,
            a: this.alpha
          });
          this.$color.style.background = z(i);
        }
        t && M(this.cid, this.alpha);
      }
      onChange(t) {
        if (!this.$alpha) return;
        t.preventDefault && t.preventDefault();
        let {
          width: i,
          left: r
        } = this.$alpha.getBoundingClientRect();
        if (i === 0) return;
        let n = typeof t.clientX == "number" ? t.clientX : t.touches[0].clientX,
          s = Math.min(Math.max(0, n - r), i),
          a = Math.min(Math.max(0, s * 100 / i), 100);
        this.alpha = a / 100, this.render();
      }
      onKeyDown(t) {
        var i;
        switch ((i = this.$pointer) == null || i.focus(), t.key) {
          case "ArrowLeft":
            {
              let r = this.alpha * 100;
              r = Math.max(0, r - 1), this.alpha = r / 100, this.render();
              break;
            }
          case "ArrowRight":
            {
              let r = this.alpha * 100;
              r = Math.min(100, r + 1), this.alpha = r / 100, this.render();
              break;
            }
        }
      }
      hsvChanged(t) {
        !t || !t.detail || !t.detail.cid || t.detail.cid === this.cid && (this.saturation = t.detail.h, this.hue = t.detail.s, this.value = t.detail.v, this.render(!1));
      }
      hueChanged(t) {
        !t || !t.detail || !t.detail.cid || t.detail.cid === this.cid && (this.hue = t.detail.h, this.render(!1));
      }
      alphaChanged(t) {
        !t || !t.detail || !t.detail.cid || t.detail.cid === this.cid && this.alpha !== t.detail.a && (this.alpha = t.detail.a, this.render());
      }
      onMouseDown(t) {
        t.preventDefault && t.preventDefault(), this.onChange(t), window.addEventListener("mousemove", this.onChange), window.addEventListener("mouseup", this.onMouseUp), window.setTimeout(() => {
          var i;
          (i = this.$pointer) == null || i.focus();
        }, 0);
      }
      onMouseUp() {
        window.removeEventListener("mousemove", this.onChange), window.removeEventListener("mouseup", this.onChange);
      }
      connectedCallback() {
        var r, n, s, a, d;
        if (!this.shadowRoot) return;
        this.cid = this.getAttribute("cid") || "";
        let t = c(this.getAttribute("color")),
          i = t.toHsv();
        this.alpha = i.a, this.hue = i.h, this.saturation = i.s, this.value = i.v, this.shadowRoot.innerHTML = `
           <style>${wt}</style>
           <div class="alpha">
                <div class="box">
                    <div class="transparent-bg box"></div>
                    <div class="color-bg box" style="background: ${z(t)}"></div>
                    
                    <div class="pointer box">
                        <div class="pointer-box" tabindex="0" style="left: ${this.alpha * 100}%;" >
                            <div class="handler"></div>
                        </div>
                    </div>
                </div>
           </div>
        `, this.$alpha = this.shadowRoot.querySelector(".alpha"), this.$color = this.shadowRoot.querySelector(".color-bg"), this.$pointer = this.shadowRoot.querySelector(".pointer-box"), (r = this.$alpha) == null || r.addEventListener("mousedown", this.onMouseDown), (n = this.$alpha) == null || n.addEventListener("mouseup", this.onMouseUp), (s = this.$alpha) == null || s.addEventListener("touchmove", this.onChange), (a = this.$alpha) == null || a.addEventListener("touchstart", this.onChange), (d = this.$pointer) == null || d.addEventListener("keydown", this.onKeyDown), document.addEventListener(p, this.hsvChanged), document.addEventListener(f, this.hueChanged), document.addEventListener(m, this.alphaChanged);
      }
      disconnectedCallback() {
        var t, i, r, n, s;
        (t = this.$alpha) == null || t.removeEventListener("mousedown", this.onMouseDown), (i = this.$alpha) == null || i.removeEventListener("mouseup", this.onMouseUp), (r = this.$alpha) == null || r.removeEventListener("touchmove", this.onChange), (n = this.$alpha) == null || n.removeEventListener("touchstart", this.onChange), (s = this.$pointer) == null || s.removeEventListener("keydown", this.onKeyDown), document.removeEventListener(p, this.hsvChanged), document.removeEventListener(f, this.hueChanged), document.removeEventListener(m, this.alphaChanged);
      }
      attributeChangedCallback(t, i, r) {
        let s = c(r).toHsv();
        this.alpha = s.a, this.hue = s.h, this.saturation = s.s, this.value = s.v, this.render();
      }
    },
    xt = Q;
  var Et = ":root{--tool-cool-color-picker-field-border-color:#cecece;--tool-cool-color-picker-field-label-color:#000}.fields{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-size:11px;grid-template-columns:60px 35px 35px 35px 34px;text-align:center;display:grid;gap:.25rem;margin-top:.25rem;color:var(--tool-cool-color-picker-field-label-color,#000)}.fields input{background:#fff;border-width:1px;border-style:solid;border-color:var(--tool-cool-color-picker-field-border-color,#cecece);padding:1px 3px;border-radius:2px;color:#000;font-family:inherit;font-size:100%;line-height:inherit;margin:0;box-sizing:border-box}";
  var J = class extends HTMLElement {
      constructor() {
        super();
        h(this, "cid");
        h(this, "color", new l("#000"));
        h(this, "$hex");
        h(this, "$r");
        h(this, "$g");
        h(this, "$b");
        h(this, "$a");
        h(this, "hex", "");
        h(this, "r", 0);
        h(this, "g", 0);
        h(this, "b", 0);
        h(this, "a", 1);
        this.attachShadow({
          mode: "open"
        }), this.hsvChanged = this.hsvChanged.bind(this), this.hueChanged = this.hueChanged.bind(this), this.alphaChanged = this.alphaChanged.bind(this), this.onHexChange = this.onHexChange.bind(this), this.render = this.render.bind(this), this.onRedChange = this.onRedChange.bind(this), this.onGreenChange = this.onGreenChange.bind(this), this.onBlueChange = this.onBlueChange.bind(this), this.onAlphaChange = this.onAlphaChange.bind(this), this.onRedKeyDown = this.onRedKeyDown.bind(this), this.onBlueKeyDown = this.onBlueKeyDown.bind(this), this.onGreenKeyDown = this.onGreenKeyDown.bind(this), this.onAlphaKeyDown = this.onAlphaKeyDown.bind(this);
      }
      static get observedAttributes() {
        return ["color"];
      }
      hueChanged(t) {
        if (!t || !t.detail || !t.detail.cid || t.detail.cid !== this.cid) return;
        let i = this.color.toHsv();
        this.color = new l({
          h: Number(t.detail.h),
          s: i.s,
          v: i.v,
          a: i.a
        }), this.render();
      }
      alphaChanged(t) {
        if (!t || !t.detail || !t.detail.cid || t.detail.cid !== this.cid) return;
        let i = this.color.toRgb();
        i.a = t.detail.a, this.color = new l(i), this.render();
      }
      hsvChanged(t) {
        !t || !t.detail || !t.detail.cid || t.detail.cid === this.cid && (this.color = new l({
          h: t.detail.h,
          s: t.detail.s,
          v: t.detail.v,
          a: this.color.toHsv().a
        }), this.render());
      }
      render() {
        var i, r, n, s, a;
        let t = this.color.toRgb();
        this.r = t.r, this.g = t.g, this.b = t.b, this.a = t.a, this.hex = this.color.toHex(), this.$hex && ((i = this.shadowRoot) == null ? void 0 : i.activeElement) !== this.$hex && (this.$hex.value = this.hex.toUpperCase()), this.$r && ((r = this.shadowRoot) == null ? void 0 : r.activeElement) !== this.$r && (this.$r.value = this.r.toString()), this.$g && ((n = this.shadowRoot) == null ? void 0 : n.activeElement) !== this.$g && (this.$g.value = this.g.toString()), this.$b && ((s = this.shadowRoot) == null ? void 0 : s.activeElement) !== this.$b && (this.$b.value = this.b.toString()), this.$a && ((a = this.shadowRoot) == null ? void 0 : a.activeElement) !== this.$a && (this.$a.value = Math.round(this.a * 100).toString());
      }
      onFieldKeyDown(t, i) {
        var n, s;
        let r = this.color.toRgb();
        switch (t.key) {
          case "ArrowUp":
            {
              if (i === "r") {
                this.r = Math.min(255, r.r + 1), r.r = this.r;
                let a = new l(r).toHsv();
                b(this.cid, a.h, a.s, a.v), this.$r.value = this.r.toString(), this.render();
              }
              if (i === "g") {
                this.g = Math.min(255, r.g + 1), r.g = this.g;
                let a = new l(r).toHsv();
                b(this.cid, a.h, a.s, a.v), this.$g.value = this.g.toString(), this.render();
              }
              if (i === "b") {
                this.b = Math.min(255, r.b + 1), r.b = this.b;
                let a = new l(r).toHsv();
                b(this.cid, a.h, a.s, a.v), this.$b.value = this.b.toString(), this.render();
              }
              if (i === "a") {
                this.a = Math.max(0, Math.min(this.a + .01, 1)), this.$a.value = Math.round(this.a * 100).toString();
                let a = this.color.toRgb();
                a.a = this.a, this.color = new l(a), this.render(), M(this.cid, this.a);
              }
              break;
            }
          case "ArrowDown":
            {
              if (i === "r") {
                this.r = Math.max(0, r.r - 1), r.r = this.r;
                let a = new l(r).toHsv();
                b(this.cid, a.h, a.s, a.v), this.$r.value = this.r.toString(), this.render();
              }
              if (i === "g") {
                this.g = Math.max(0, r.g - 1), r.g = this.g;
                let a = new l(r).toHsv();
                b(this.cid, a.h, a.s, a.v), this.$g.value = this.g.toString(), this.render();
              }
              if (i === "b") {
                this.b = Math.max(0, r.b - 1), r.b = this.b;
                let a = new l(r).toHsv();
                b(this.cid, a.h, a.s, a.v), this.$b.value = this.b.toString(), this.render();
              }
              if (i === "a") {
                this.a = Math.max(0, this.a - .01), this.$a.value = Math.round(this.a * 100).toString();
                let a = this.color.toRgb();
                a.a = this.a, this.color = new l(a), this.render(), M(this.cid, this.a);
              }
              break;
            }
          case "Escape":
            {
              (n = this.shadowRoot) != null && n.activeElement && this.shadowRoot.activeElement.blur(), this.render();
              break;
            }
          case "Enter":
            {
              (s = this.shadowRoot) != null && s.activeElement && this.shadowRoot.activeElement.blur(), this.render();
              break;
            }
        }
      }
      onRedKeyDown(t) {
        this.onFieldKeyDown(t, "r");
      }
      onGreenKeyDown(t) {
        this.onFieldKeyDown(t, "g");
      }
      onBlueKeyDown(t) {
        this.onFieldKeyDown(t, "b");
      }
      onAlphaKeyDown(t) {
        this.onFieldKeyDown(t, "a");
      }
      onHexChange(t) {
        let i = t.target;
        if (i.value.length !== 6) return;
        let r = new l(`#${i.value}`);
        if (r.isValid) {
          this.color = r;
          let n = this.color.toHsv();
          b(this.cid, n.h, n.s, n.v);
        }
      }
      onRedChange(t) {
        let i = t.target,
          r = I(i.value);
        if (r.toString() === i.value) {
          let n = this.color.toRgb();
          n.r = r;
          let s = new l(n).toHsv();
          b(this.cid, s.h, s.s, s.v);
        }
      }
      onGreenChange(t) {
        let i = t.target,
          r = I(i.value);
        if (r.toString() === i.value) {
          let n = this.color.toRgb();
          n.g = r;
          let s = new l(n).toHsv();
          b(this.cid, s.h, s.s, s.v);
        }
      }
      onBlueChange(t) {
        let i = t.target,
          r = I(i.value);
        if (r.toString() === i.value) {
          let n = this.color.toRgb();
          n.b = r;
          let s = new l(n).toHsv();
          b(this.cid, s.h, s.s, s.v);
        }
      }
      onAlphaChange(t) {
        let i = t.target,
          r = ft(i.value);
        r.toString() === i.value && M(this.cid, r / 100);
      }
      connectedCallback() {
        if (!this.shadowRoot) return;
        this.cid = this.getAttribute("cid") || "", this.color = c(this.getAttribute("color"));
        let t = this.color.toRgb();
        this.r = t.r, this.g = t.g, this.b = t.b, this.a = t.a, this.hex = this.color.toHex();
        let i = $(),
          r = $(),
          n = $(),
          s = $(),
          a = $();
        this.shadowRoot.innerHTML = `
           <style>${Et}</style>
           <div class="fields">
               <input id="hex-${i}" type="text" value="${this.hex.toUpperCase()}" data-type="hex" />
               <input id="r-${r}" type="text" value="${this.r}" data-type="r" />
               <input id="g-${n}" type="text" value="${this.g}" data-type="g" />
               <input id="b-${s}" type="text" value="${this.b}" data-type="b" />
               <input id="a-${a}" type="text" value="${Math.round(this.a * 100)}" data-type="a" />
               
               <label for="hex-${i}">Hex</label>
               <label for="r-${r}">R</label>
               <label for="g-${n}">G</label>
               <label for="b-${s}">B</label>
               <label for="a-${a}">A</label>
           </div>
        `, this.$hex = this.shadowRoot.getElementById(`hex-${i}`), this.$r = this.shadowRoot.getElementById(`r-${r}`), this.$g = this.shadowRoot.getElementById(`g-${n}`), this.$b = this.shadowRoot.getElementById(`b-${s}`), this.$a = this.shadowRoot.getElementById(`a-${a}`), document.addEventListener(p, this.hsvChanged), document.addEventListener(f, this.hueChanged), document.addEventListener(m, this.alphaChanged), this.$hex.addEventListener("input", this.onHexChange), this.$r.addEventListener("input", this.onRedChange), this.$g.addEventListener("input", this.onGreenChange), this.$b.addEventListener("input", this.onBlueChange), this.$a.addEventListener("input", this.onAlphaChange), this.$hex.addEventListener("blur", this.render), this.$r.addEventListener("blur", this.render), this.$g.addEventListener("blur", this.render), this.$b.addEventListener("blur", this.render), this.$a.addEventListener("blur", this.render), this.$r.addEventListener("keydown", this.onRedKeyDown), this.$g.addEventListener("keydown", this.onGreenKeyDown), this.$b.addEventListener("keydown", this.onBlueKeyDown), this.$a.addEventListener("keydown", this.onAlphaKeyDown);
      }
      disconnectedCallback() {
        document.removeEventListener(p, this.hsvChanged), document.removeEventListener(f, this.hueChanged), document.removeEventListener(m, this.alphaChanged), this.$hex.removeEventListener("input", this.onHexChange), this.$r.removeEventListener("input", this.onRedChange), this.$g.removeEventListener("input", this.onGreenChange), this.$b.removeEventListener("input", this.onBlueChange), this.$a.removeEventListener("input", this.onAlphaChange), this.$hex.removeEventListener("blur", this.render), this.$r.removeEventListener("blur", this.render), this.$g.removeEventListener("blur", this.render), this.$b.removeEventListener("blur", this.render), this.$a.removeEventListener("blur", this.render), this.$r.removeEventListener("keydown", this.onRedKeyDown), this.$g.removeEventListener("keydown", this.onGreenKeyDown), this.$b.removeEventListener("keydown", this.onBlueKeyDown), this.$a.removeEventListener("keydown", this.onAlphaKeyDown);
      }
      attributeChangedCallback(t, i, r) {
        this.color = c(r), this.render();
      }
    },
    Ct = J;
  var Z = class extends HTMLElement {
      constructor() {
        super();
        h(this, "cid");
        h(this, "popupPosition", "left");
        h(this, "$popup");
        h(this, "color", "#000");
        customElements.get("toolcool-color-picker-saturation") || customElements.define("toolcool-color-picker-saturation", bt), customElements.get("toolcool-color-picker-hue") || customElements.define("toolcool-color-picker-hue", mt), customElements.get("toolcool-color-picker-alpha") || customElements.define("toolcool-color-picker-alpha", xt), customElements.get("toolcool-color-picker-fields") || customElements.define("toolcool-color-picker-fields", Ct), this.cid = this.getAttribute("cid") || "", this.prevent = this.prevent.bind(this), this.attachShadow({
          mode: "open"
        });
      }
      static get observedAttributes() {
        return ["color", "popup-position"];
      }
      prevent(t) {
        t.stopPropagation();
      }
      connectedCallback() {
        var t, i;
        !this.shadowRoot || (this.color = this.getAttribute("color") || "#000", this.popupPosition = this.getAttribute("popup-position") || "left", this.shadowRoot.innerHTML = `
           <style>${it}</style>
           <div class="popup">
                <toolcool-color-picker-saturation color="${this.color}" cid="${this.cid}"></toolcool-color-picker-saturation>
                <toolcool-color-picker-hue color="${this.color}" cid="${this.cid}"></toolcool-color-picker-hue>
                <toolcool-color-picker-alpha color="${this.color}" cid="${this.cid}"></toolcool-color-picker-alpha>
                <toolcool-color-picker-fields color="${this.color}" cid="${this.cid}"></toolcool-color-picker-fields>
           </div>
        `, this.$popup = this.shadowRoot.querySelector(".popup"), (t = this.$popup) == null || t.addEventListener("mousedown", this.prevent), (i = this.$popup) == null || i.classList.toggle("right", this.popupPosition === "right"));
      }
      disconnectedCallback() {
        var t;
        (t = this.$popup) == null || t.removeEventListener("mousedown", this.prevent);
      }
      attributeChangedCallback(t, i, r) {
        var n, s, a, d;
        if (t === "popup-position" && (this.popupPosition = r, this.$popup && this.$popup.classList.toggle("right", this.popupPosition === "right")), t === "color") {
          this.color = r;
          let w = (n = this.shadowRoot) == null ? void 0 : n.querySelector("toolcool-color-picker-saturation"),
            x = (s = this.shadowRoot) == null ? void 0 : s.querySelector("toolcool-color-picker-hue"),
            R = (a = this.shadowRoot) == null ? void 0 : a.querySelector("toolcool-color-picker-alpha"),
            et = (d = this.shadowRoot) == null ? void 0 : d.querySelector("toolcool-color-picker-fields");
          w && w.setAttribute("color", this.color), x && x.setAttribute("color", this.color), R && R.setAttribute("color", this.color), et && et.setAttribute("color", this.color);
        }
      }
    },
    yt = Z;
  var Ut = {
      sm: "0.875rem",
      md: "1.2rem",
      lg: "1.5rem",
      xl: "2.25rem",
      "2xl": "3rem",
      "3xl": "3.75rem",
      "4xl": "4.5rem"
    },
    tt = class extends HTMLElement {
      constructor() {
        super();
        h(this, "cid");
        h(this, "$button");
        h(this, "$buttonColor");
        h(this, "$popupBox");
        h(this, "stateDefaults", {
          isPopupVisible: !1,
          popupPosition: "left",
          initialColor: new l("#000"),
          color: new l("#000"),
          buttonWidth: null,
          buttonHeight: null,
          buttonPadding: null
        });
        h(this, "state");
        this.cid = $(), customElements.get("toolcool-color-picker-popup") || customElements.define("toolcool-color-picker-popup", yt), this.attachShadow({
          mode: "open"
        }), this.toggle = this.toggle.bind(this), this.onKeyDown = this.onKeyDown.bind(this), this.clickedOutside = this.clickedOutside.bind(this), this.stopPropagation = this.stopPropagation.bind(this), this.hsvChanged = this.hsvChanged.bind(this), this.hueChanged = this.hueChanged.bind(this), this.alphaChanged = this.alphaChanged.bind(this), this.buttonClicked = this.buttonClicked.bind(this), this.formatButtonSize = this.formatButtonSize.bind(this), this.initState();
      }
      static get observedAttributes() {
        return ["color", "popup-position", "button-width", "button-height", "button-padding"];
      }
      set color(t) {
        this.state.color = new l(t);
      }
      get color() {
        return this.state.color;
      }
      get hex() {
        return this.state.color.toHexString().toUpperCase();
      }
      get hex8() {
        return this.state.color.toHex8String().toUpperCase();
      }
      get rgb() {
        return this.state.color.toRgbString();
      }
      get rgba() {
        return S(this.state.color);
      }
      get hsl() {
        return this.state.color.toHslString();
      }
      get hsla() {
        return pt(this.state.color);
      }
      get hsv() {
        return this.state.color.toHsvString();
      }
      get hsva() {
        return gt(this.state.color);
      }
      get opened() {
        return this.state.isPopupVisible;
      }
      set opened(t) {
        this.state.isPopupVisible = t;
      }
      initState() {
        let t = this;
        this.state = new Proxy(t.stateDefaults, {
          set(i, r, n, s) {
            return i[r] = n, r === "isPopupVisible" && t.onPopupVisibilityChange(), r === "popupPosition" && t.onPopupPosChange(), r === "initialColor" && t.onInitialColorChange(), r === "color" && t.onColorChange(), (r === "buttonWidth" || r === "buttonHeight" || r === "buttonPadding") && t.setButtonSize(), !0;
          }
        });
      }
      onPopupVisibilityChange() {
        !this.$popupBox || (this.$popupBox.innerHTML = this.state.isPopupVisible ? `<toolcool-color-picker-popup color="${this.state.color.toRgbString()}" cid="${this.cid}" popup-position="${this.state.popupPosition}" />` : "");
      }
      onPopupPosChange() {
        if (!this.$popupBox) return;
        let t = this.$popupBox.querySelector("toolcool-color-picker-popup");
        !t || t.setAttribute("popup-position", this.state.popupPosition);
      }
      onInitialColorChange() {
        var r;
        let t = S(this.state.color);
        this.$buttonColor && (this.$buttonColor.style.backgroundColor = t);
        let i = (r = this.shadowRoot) == null ? void 0 : r.querySelector("toolcool-color-picker-popup");
        i && i.setAttribute("color", t);
      }
      setButtonSize() {
        !this.$button || (this.state.buttonWidth && (this.$button.style.width = this.formatButtonSize(this.state.buttonWidth)), this.state.buttonHeight && (this.$button.style.height = this.formatButtonSize(this.state.buttonHeight)), this.state.buttonPadding && (this.$button.style.padding = this.state.buttonPadding));
      }
      onColorChange() {
        this.$buttonColor && (this.$buttonColor.style.backgroundColor = S(this.state.color)), this.dispatchEvent(new CustomEvent("change", {
          detail: {
            hex: this.hex,
            hex8: this.hex8,
            rgb: this.rgb,
            rgba: this.rgba,
            hsl: this.hsl,
            hsla: this.hsla,
            hsv: this.hsv,
            hsva: this.hsva,
            color: this.color
          }
        }));
      }
      hsvChanged(t) {
        !t || !t.detail || !t.detail.cid || t.detail.cid === this.cid && (this.state.color = new l({
          h: t.detail.h,
          s: t.detail.s,
          v: t.detail.v,
          a: this.state.color.toHsv().a
        }));
      }
      hueChanged(t) {
        if (!t || !t.detail || !t.detail.cid || t.detail.cid !== this.cid) return;
        let i = this.state.color.toHsv();
        this.state.color = new l({
          h: t.detail.h,
          s: i.s,
          v: i.v,
          a: i.a
        });
      }
      alphaChanged(t) {
        if (!t || !t.detail || !t.detail.cid || t.detail.cid !== this.cid) return;
        let i = this.state.color.toRgb();
        i.a = t.detail.a, this.state.color = new l(i);
      }
      buttonClicked(t) {
        !t || !t.detail || !t.detail.cid || t.detail.cid !== this.cid && (this.state.isPopupVisible = !1);
      }
      clickedOutside() {
        this.state.isPopupVisible = !1;
      }
      toggle() {
        let t = this.state.isPopupVisible;
        window.setTimeout(() => {
          this.state.isPopupVisible = !t, nt(this.cid);
        }, 0);
      }
      onKeyDown(t) {
        t.key === "Escape" && (this.state.isPopupVisible = !1);
      }
      stopPropagation(t) {
        t.stopPropagation();
      }
      formatButtonSize(t) {
        var i;
        return (i = Ut[t]) != null ? i : t;
      }
      connectedCallback() {
        var t, i, r;
        !this.shadowRoot || (this.state.initialColor = c(this.getAttribute("color")), this.state.color = c(this.getAttribute("color")), this.state.popupPosition = this.getAttribute("popup-position") || "left", this.state.buttonWidth = this.getAttribute("button-width"), this.state.buttonHeight = this.getAttribute("button-height"), this.state.buttonPadding = this.getAttribute("button-padding"), this.shadowRoot.innerHTML = `
            <style>
                ${ot} 
            </style>
            <div class="color-picker" >
                <button
                    type="button"
                    tabIndex="0"
                    class="button"
                    title="Select Color">
                    <span class="button-color" style="background: ${S(this.state.color)};"></span>
                </button>
                <div data-popup-box></div>
            </div>
        `, this.$button = this.shadowRoot.querySelector(".button"), this.$buttonColor = this.shadowRoot.querySelector(".button-color"), (t = this.$button) == null || t.addEventListener("click", this.toggle), (i = this.$button) == null || i.addEventListener("keydown", this.onKeyDown), (r = this.$button) == null || r.addEventListener("mousedown", this.stopPropagation), this.$popupBox = this.shadowRoot.querySelector("[data-popup-box]"), this.setButtonSize(), document.addEventListener("mousedown", this.clickedOutside), document.addEventListener(p, this.hsvChanged), document.addEventListener(f, this.hueChanged), document.addEventListener(m, this.alphaChanged), document.addEventListener(D, this.buttonClicked));
      }
      disconnectedCallback() {
        var t, i, r;
        (t = this.$button) == null || t.removeEventListener("click", this.toggle), (i = this.$button) == null || i.removeEventListener("keydown", this.onKeyDown), (r = this.$button) == null || r.removeEventListener("mousedown", this.stopPropagation), document.removeEventListener("mousedown", this.clickedOutside), document.removeEventListener(p, this.hsvChanged), document.removeEventListener(f, this.hueChanged), document.removeEventListener(m, this.alphaChanged), document.removeEventListener(D, this.buttonClicked);
      }
      attributeChangedCallback(t) {
        switch (t) {
          case "color":
            {
              this.state.initialColor = c(this.getAttribute("color")), this.state.color = c(this.getAttribute("color")), this.onInitialColorChange();
              break;
            }
          case "popup-position":
            {
              this.state.popupPosition = this.getAttribute("popup-position") || "left", this.onPopupPosChange();
              break;
            }
          case "button-width":
            {
              this.state.buttonWidth = this.getAttribute("button-width"), this.setButtonSize();
              break;
            }
          case "button-height":
            {
              this.state.buttonHeight = this.getAttribute("button-height"), this.setButtonSize();
              break;
            }
          case "button-padding":
            {
              this.state.buttonPadding = this.getAttribute("button-padding"), this.setButtonSize();
              break;
            }
        }
      }
    },
    $t = tt;
  customElements.get("toolcool-color-picker") || customElements.define("toolcool-color-picker", $t);
})();

var hue = "214";
var fallbackJson = {
	"bs-primary": "#5087E0",
	"bs-link-color": "#5087E0",
	"link-color": "#5087E0",
	"bs-primary-rgb": "80,135,224",
	"bs-link-color-rgb": "80,135,224",
	"link-color-rgb": "80,135,224",
	"bs-link-hover-color": "#144AAB",
	"link-hover-color": "#144AAB",
	"template-link-hover-color": "#144AAB",
	"bs-link-hover-color-rgb": "20, 74, 171",
	"template-link-color": "#5087E0",
	"template-special-color": "#5087E0",
	"link-hover-color-rgb": "20, 74, 171",
	"template-contrast": "#144AAB",
	hue: hue,
	"template-bg-light": "#f0f4fb",
	"template-text-dark": "#495057",
	"template-text-light": "#fff",
	"template-sidebar-bg": "var(--template-bg-dark-80)",
	"template-sidebar-font-color": "#fff",
	"template-sidebar-link-color": "#fff",
	"template-bg-dark": "hsl(var(--hue), 40%, 20%)",
	"template-bg-dark-3": "hsl(var(--hue), 40%, 97%)",
	"template-bg-dark-5": "hsl(var(--hue), 40%, 95%)",
	"template-bg-dark-7": "hsl(var(--hue), 40%, 93%)",
	"template-bg-dark-10": "hsl(var(--hue), 40%, 90%)",
	"template-bg-dark-15": "hsl(var(--hue), 40%, 85%)",
	"template-bg-dark-20": "hsl(var(--hue), 40%, 80%)",
	"template-bg-dark-30": "hsl(var(--hue), 40%, 70%)",
	"template-bg-dark-40": "hsl(var(--hue), 40%, 60%)",
	"template-bg-dark-50": "hsl(var(--hue), 40%, 50%)",
	"template-bg-dark-60": "hsl(var(--hue), 40%, 40%)",
	"template-bg-dark-65": "hsl(var(--hue), 40%, 35%)",
	"template-bg-dark-70": "hsl(var(--hue), 40%, 30%)",
	"template-bg-dark-75": "hsl(var(--hue), 40%, 25%)",
	"template-bg-dark-80": "hsl(var(--hue), 40%, 20%)",
	"template-bg-dark-90": "hsl(var(--hue), 40%, 10%)"
};

var colors = [
	{
		type: "hue",
		cssVariableName: "hue",
		label: "TPL_MUTA_COLORS_HUE"
	},
	{
		type: "picker",
		cssVariableName: "bs-link-color",
		label: "TPL_MUTA_COLORS_SETTINGS_LINK_COLOR_LABEL"
	},
	{
		type: "picker",
		cssVariableName: "bs-link-hover-color",
		label: "TPL_MUTA_COLORS_SETTINGS_LINK_HOVER_COLOR_LABEL"
	},
	{
		type: "calculated",
		cssVariableName: "bs-primary",
		label: ""
	},
	{
		type: "calculated",
		cssVariableName: "bs-primary-rgb",
		label: ""
	},
	{
		type: "calculated",
		cssVariableName: "link-color",
		label: ""
	},
	{
		type: "calculated",
		cssVariableName: "link-color-rgb",
		label: ""
	},
	{
		type: "calculated",
		cssVariableName: "bs-link-color-rgb",
		label: ""
	},
	{
		type: "calculated",
		cssVariableName: "bs-link-hover-color-rgb",
		label: ""
	},
	{
		type: "calculated",
		cssVariableName: "template-bg-light",
		label: ""
	},
	{
		type: "calculated",
		cssVariableName: "template-text-dark",
		label: ""
	},
	{
		type: "calculated",
		cssVariableName: "template-text-light",
		label: ""
	},
	{
		type: "calculated",
		cssVariableName: "template-link-color",
		label: ""
	},
	{
		type: "calculated",
		cssVariableName: "template-link-hover-color",
		label: ""
	},
	{
		type: "calculated",
		cssVariableName: "template-special-color",
		label: ""
	},
	{
		type: "calculated",
		cssVariableName: "template-sidebar-bg",
		label: ""
	},
	{
		type: "calculated",
		cssVariableName: "template-sidebar-font-color",
		label: ""
	},
	{
		type: "calculated",
		cssVariableName: "template-sidebar-link-color",
		label: ""
	},
	{
		type: "calculated",
		cssVariableName: "template-bg-light",
		label: ""
	},
	{
		type: "calculated",
		cssVariableName: "template-text-light",
		label: ""
	},
	{
		type: "calculated",
		cssVariableName: "template-contrast",
		label: ""
	},
	{
		type: "calculated",
		cssVariableName: "template-bg-dark",
		label: ""
	},
	{
		type: "calculated",
		cssVariableName: "template-bg-dark-3",
		label: ""
	},
	{
		type: "calculated",
		cssVariableName: "template-bg-dark-5",
		label: ""
	},
	{
		type: "calculated",
		cssVariableName: "template-bg-dark-7",
		label: ""
	},
	{
		type: "calculated",
		cssVariableName: "template-bg-dark-10",
		label: ""
	},
	{
		type: "calculated",
		cssVariableName: "template-bg-dark-15",
		label: ""
	},
	{
		type: "calculated",
		cssVariableName: "template-bg-dark-20",
		label: ""
	},
	{
		type: "calculated",
		cssVariableName: "template-bg-dark-30",
		label: ""
	},
	{
		type: "calculated",
		cssVariableName: "template-bg-dark-40",
		label: ""
	},
	{
		type: "calculated",
		cssVariableName: "template-bg-dark-50",
		label: ""
	},
	{
		type: "calculated",
		cssVariableName: "template-bg-dark-60",
		label: ""
	},
	{
		type: "calculated",
		cssVariableName: "template-bg-dark-65",
		label: ""
	},
	{
		type: "calculated",
		cssVariableName: "template-bg-dark-70",
		label: ""
	},
	{
		type: "calculated",
		cssVariableName: "template-bg-dark-75",
		label: ""
	},
	{
		type: "calculated",
		cssVariableName: "template-bg-dark-80",
		label: ""
	},
	{
		type: "calculated",
		cssVariableName: "template-bg-dark-90",
		label: ""
	}
];
var blueprint = {
	colors: colors
};

/** Remove the inline help button and shenanigans  */
document.querySelectorAll('.hide-aware-inline-help.d-none').forEach(el => el.classList.remove('hide-aware-inline-help', 'd-none'));
const inlineHelp = document.getElementById('toolbar-inlinehelp');
if (inlineHelp) inlineHelp.remove();
const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
const forced = () => document.documentElement.hasAttribute('data-forced-theme');
document.querySelectorAll('input[name="jform[params][forcedColorScheme]"]').forEach(el => el.addEventListener('click', () => {
  if (el.checked && el.value === '0') {
    if (!forced()) {
      document.cookie = 'mutaPrefersColorScheme=light;expires=Thu, 01 Jan 1970 00:00:01 GMT';
    } else {
      document.cookie = 'mutaPrefersColorScheme=light;expires=Thu, 01 Jan 1970 00:00:01 GMT';
    }
  }
  if (el.checked && el.value === '1') {
    const oneYearFromNow = new Date();
    oneYearFromNow.setFullYear(oneYearFromNow.getFullYear() + 1);
    if (!forced()) {
      document.cookie = 'mutaPrefersColorScheme=light;expires=Thu, 01 Jan 1970 00:00:01 GMT';
    } else {
      document.cookie = `mutaPrefersColorScheme=${darkModeMediaQuery.matches ? 'dark' : 'light'};expires=${oneYearFromNow.toGMTString()}`;
    }
  }
}));
class DgColor extends s {
  static get properties() {
    return {
      value: {
        type: Object,
        value: {}
      },
      name: {
        type: String,
        value: 'muta-colors'
      },
      initValue: {
        type: Object,
        value: {}
      }
    };
  }
  constructor() {
    super();
    try {
      this.value = JSON.parse(this.getAttribute('value'));
      this.initValue = this.value;
    } catch (e) {
      this.value = fallbackJson;
      this.initValue = fallbackJson;
    }
    if (!this.value.length) this.value = fallbackJson;
    this.applyColors = this.applyColors.bind(this);
  }
  createRenderRoot() {
    return this; // Disable shadow DOM.
  }

  connectedCallback() {
    super.connectedCallback();
    this.fields = blueprint.colors.filter(x => !x.cssVariableName.endsWith('-rgb'));
    this.sliderValue = this.value.hue;
  }
  firstUpdated() {
    this.querySelector('input[type="hidden"]')?.remove();
  }
  reset() {
    this.sliderValue = this.initValue.hue;
    this.requestUpdate();
  }
  renderDetails() {
    return x`
    <details><summary>CSS Variables:</summary>
      ${blueprint.colors.map(field => x`
        <pre>
          <code>--${field.cssVariableName}: ${this.value?.[field.cssVariableName]};</code>
        </pre>
      `)}
    </details>
    <input type="hidden" name="${this.name}" .value='${JSON.stringify(this.value)}'>`;
  }
  render() {
    this.applyColors();
    return x`${this.fields.map(field => {
      if (field.type === 'picker') return this.createColorField(field);
      if (field.type === 'hue') return this.createHueField();
      return '';
    })}
    <button class="btn btn-warning" type="button" @click=${this.reset}>${Joomla.Text._('JRESET')}</button>
    <p></p>${this.renderDetails()}`;
  }
  createHueField() {
    /* eslint-disable max-len */
    return x`<div class="control-group">
    <div class="control-label"><label id="jform_params_hue-lbl" for="jform_params_hue">Choose your hue value for the dark template colour</label></div>

    <div class="controls">
      <label for="slider-input" class="visually-hidden">Selected Colour Value</label>
      <input type="text" class="form-control" id="slider-input" pattern="[0-9]{1,3}" style="border: 2px solid rgb(19, 47, 83);" .value=${this.sliderValue} @input=${e => {
      this.sliderValue = e.target.value;
      this.value.hue = e.target.value;
      this.requestUpdate();
    }}>
      <label for="hue-slider" class="visually-hidden">Hue Slider</label>
      <input type="range" min="0" step="1" max="360" class="form-control color-slider" .value=${this.sliderValue} @input=${e => {
      this.sliderValue = e.target.value;
      this.value.hue = e.target.value;
      this.requestUpdate();
    }} style="background-image: linear-gradient(90deg, rgb(83, 19, 19), rgb(83, 19, 19), rgb(83, 38, 19), rgb(83, 57, 19), rgb(83, 77, 19), rgb(70, 83, 19), rgb(51, 83, 19), rgb(32, 83, 19), rgb(19, 83, 25), rgb(19, 83, 45), rgb(19, 83, 64), rgb(19, 83, 83), rgb(19, 64, 83), rgb(19, 45, 83), rgb(19, 25, 83), rgb(32, 19, 83), rgb(51, 19, 83), rgb(70, 19, 83), rgb(83, 19, 77), rgb(83, 19, 57), rgb(83, 19, 38), rgb(83, 19, 19), rgb(83, 19, 19)); appearance: none;">
      </div>
    </div>
</div>`; /* eslint-enable max-len */
  }

  createColorField(field) {
    return x`<div class="control-group">
    <div class="control-label"><label for=${field.cssVariableName}>${Joomla.Text._(field.label)}</label></div>
    <div class="controls">
      <toolcool-color-picker id=${field.cssVariableName} color=${this.value?.[field.cssVariableName]} @change=${e => {
      this.value[`${field.cssVariableName}-rgb`] = e.detail.rgb.replace('rgb(', '').replace(')', '');
      if (field.cssVariableName === 'bs-link-color') {
        this.value['template-link-color'] = e.detail.rgb;
        this.value['link-color'] = e.detail.rgb;
        this.value['bs-primary'] = e.detail.rgb;
      }
      if (field.cssVariableName === 'bs-link-hover-color') {
        this.value['template-link-hover-color'] = e.detail.rgb;
        this.value['link-hover-color'] = e.detail.rgb;
        this.value['bs-primary-rgb'] = e.detail.rgb;
      }
      this.value[`${field.cssVariableName}`] = e.detail.hex;
      this.value[`${field.cssVariableName}-rgb`] = e.detail.rgb.replace('rgb(', '').replace(')', '');
      this.requestUpdate();
      /* eslint-disable max-len */
    }} button-width="8rem" button-height="3rem" button-padding="2px" style="--tool-cool-color-picker-popup-bg: var(--bs-body-bg); --tool-cool-color-picker-field-label-color: var(--bs-body-color)"></toolcool-color-picker>
    </div>
  </div>`;
    /* eslint-enable max-len */
  }

  applyColors() {
    /* eslint-disable-next-line no-restricted-syntax */
    for (const [key, value] of Object.entries(this.value)) {
      document.documentElement.style.setProperty(`--${key}`, value);
    }
    document.documentElement.style.setProperty('accent-color', this.value?.['bs-link-color']);
  }
}
customElements.define('dg-color-field', DgColor);
