lit-squircle/dist/lit-squircle.js

This is an implementation of Squircle, build on top of [figma-squircle](https://figma-squircle.vercel.app/).

/**
 * @license
 * Copyright 2019 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */
const j = window, tt = j.ShadowRoot && (j.ShadyCSS === void 0 || j.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, et = Symbol(), ot = /* @__PURE__ */ new WeakMap();
let gt = class {
  constructor(t, e, i) {
    if (this._$cssResult$ = !0, i !== et)
      throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
    this.cssText = t, this.t = e;
  }
  get styleSheet() {
    let t = this.o;
    const e = this.t;
    if (tt && t === void 0) {
      const i = e !== void 0 && e.length === 1;
      i && (t = ot.get(e)), t === void 0 && ((this.o = t = new CSSStyleSheet()).replaceSync(this.cssText), i && ot.set(e, t));
    }
    return t;
  }
  toString() {
    return this.cssText;
  }
};
const m = (o) => new gt(typeof o == "string" ? o : o + "", void 0, et), B = (o, ...t) => {
  const e = o.length === 1 ? o[0] : t.reduce((i, n, r) => i + ((s) => {
    if (s._$cssResult$ === !0)
      return s.cssText;
    if (typeof s == "number")
      return s;
    throw Error("Value passed to 'css' function must be a 'css' function result: " + s + ". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.");
  })(n) + o[r + 1], o[0]);
  return new gt(e, o, et);
}, _t = (o, t) => {
  tt ? o.adoptedStyleSheets = t.map((e) => e instanceof CSSStyleSheet ? e : e.styleSheet) : t.forEach((e) => {
    const i = document.createElement("style"), n = j.litNonce;
    n !== void 0 && i.setAttribute("nonce", n), i.textContent = e.cssText, o.appendChild(i);
  });
}, nt = tt ? (o) => o : (o) => o instanceof CSSStyleSheet ? ((t) => {
  let e = "";
  for (const i of t.cssRules)
    e += i.cssText;
  return m(e);
})(o) : o;
/**
 * @license
 * Copyright 2017 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */
var q;
const I = window, st = I.trustedTypes, At = st ? st.emptyScript : "", rt = I.reactiveElementPolyfillSupport, Q = { toAttribute(o, t) {
  switch (t) {
    case Boolean:
      o = o ? At : null;
      break;
    case Object:
    case Array:
      o = o == null ? o : JSON.stringify(o);
  }
  return o;
}, fromAttribute(o, t) {
  let e = o;
  switch (t) {
    case Boolean:
      e = o !== null;
      break;
    case Number:
      e = o === null ? null : Number(o);
      break;
    case Object:
    case Array:
      try {
        e = JSON.parse(o);
      } catch {
        e = null;
      }
  }
  return e;
} }, wt = (o, t) => t !== o && (t == t || o == o), W = { attribute: !0, type: String, converter: Q, reflect: !1, hasChanged: wt }, X = "finalized";
let S = class extends HTMLElement {
  constructor() {
    super(), this._$Ei = /* @__PURE__ */ new Map(), this.isUpdatePending = !1, this.hasUpdated = !1, this._$El = null, this._$Eu();
  }
  static addInitializer(t) {
    var e;
    this.finalize(), ((e = this.h) !== null && e !== void 0 ? e : this.h = []).push(t);
  }
  static get observedAttributes() {
    this.finalize();
    const t = [];
    return this.elementProperties.forEach((e, i) => {
      const n = this._$Ep(i, e);
      n !== void 0 && (this._$Ev.set(n, i), t.push(n));
    }), t;
  }
  static createProperty(t, e = W) {
    if (e.state && (e.attribute = !1), this.finalize(), this.elementProperties.set(t, e), !e.noAccessor && !this.prototype.hasOwnProperty(t)) {
      const i = typeof t == "symbol" ? Symbol() : "__" + t, n = this.getPropertyDescriptor(t, i, e);
      n !== void 0 && Object.defineProperty(this.prototype, t, n);
    }
  }
  static getPropertyDescriptor(t, e, i) {
    return { get() {
      return this[e];
    }, set(n) {
      const r = this[t];
      this[e] = n, this.requestUpdate(t, r, i);
    }, configurable: !0, enumerable: !0 };
  }
  static getPropertyOptions(t) {
    return this.elementProperties.get(t) || W;
  }
  static finalize() {
    if (this.hasOwnProperty(X))
      return !1;
    this[X] = !0;
    const t = Object.getPrototypeOf(this);
    if (t.finalize(), t.h !== void 0 && (this.h = [...t.h]), this.elementProperties = new Map(t.elementProperties), this._$Ev = /* @__PURE__ */ new Map(), this.hasOwnProperty("properties")) {
      const e = this.properties, i = [...Object.getOwnPropertyNames(e), ...Object.getOwnPropertySymbols(e)];
      for (const n of i)
        this.createProperty(n, e[n]);
    }
    return this.elementStyles = this.finalizeStyles(this.styles), !0;
  }
  static finalizeStyles(t) {
    const e = [];
    if (Array.isArray(t)) {
      const i = new Set(t.flat(1 / 0).reverse());
      for (const n of i)
        e.unshift(nt(n));
    } else
      t !== void 0 && e.push(nt(t));
    return e;
  }
  static _$Ep(t, e) {
    const i = e.attribute;
    return i === !1 ? void 0 : typeof i == "string" ? i : typeof t == "string" ? t.toLowerCase() : void 0;
  }
  _$Eu() {
    var t;
    this._$E_ = new Promise((e) => this.enableUpdating = e), this._$AL = /* @__PURE__ */ new Map(), this._$Eg(), this.requestUpdate(), (t = this.constructor.h) === null || t === void 0 || t.forEach((e) => e(this));
  }
  addController(t) {
    var e, i;
    ((e = this._$ES) !== null && e !== void 0 ? e : this._$ES = []).push(t), this.renderRoot !== void 0 && this.isConnected && ((i = t.hostConnected) === null || i === void 0 || i.call(t));
  }
  removeController(t) {
    var e;
    (e = this._$ES) === null || e === void 0 || e.splice(this._$ES.indexOf(t) >>> 0, 1);
  }
  _$Eg() {
    this.constructor.elementProperties.forEach((t, e) => {
      this.hasOwnProperty(e) && (this._$Ei.set(e, this[e]), delete this[e]);
    });
  }
  createRenderRoot() {
    var t;
    const e = (t = this.shadowRoot) !== null && t !== void 0 ? t : this.attachShadow(this.constructor.shadowRootOptions);
    return _t(e, this.constructor.elementStyles), e;
  }
  connectedCallback() {
    var t;
    this.renderRoot === void 0 && (this.renderRoot = this.createRenderRoot()), this.enableUpdating(!0), (t = this._$ES) === null || t === void 0 || t.forEach((e) => {
      var i;
      return (i = e.hostConnected) === null || i === void 0 ? void 0 : i.call(e);
    });
  }
  enableUpdating(t) {
  }
  disconnectedCallback() {
    var t;
    (t = this._$ES) === null || t === void 0 || t.forEach((e) => {
      var i;
      return (i = e.hostDisconnected) === null || i === void 0 ? void 0 : i.call(e);
    });
  }
  attributeChangedCallback(t, e, i) {
    this._$AK(t, i);
  }
  _$EO(t, e, i = W) {
    var n;
    const r = this.constructor._$Ep(t, i);
    if (r !== void 0 && i.reflect === !0) {
      const s = (((n = i.converter) === null || n === void 0 ? void 0 : n.toAttribute) !== void 0 ? i.converter : Q).toAttribute(e, i.type);
      this._$El = t, s == null ? this.removeAttribute(r) : this.setAttribute(r, s), this._$El = null;
    }
  }
  _$AK(t, e) {
    var i;
    const n = this.constructor, r = n._$Ev.get(t);
    if (r !== void 0 && this._$El !== r) {
      const s = n.getPropertyOptions(r), h = typeof s.converter == "function" ? { fromAttribute: s.converter } : ((i = s.converter) === null || i === void 0 ? void 0 : i.fromAttribute) !== void 0 ? s.converter : Q;
      this._$El = r, this[r] = h.fromAttribute(e, s.type), this._$El = null;
    }
  }
  requestUpdate(t, e, i) {
    let n = !0;
    t !== void 0 && (((i = i || this.constructor.getPropertyOptions(t)).hasChanged || wt)(this[t], e) ? (this._$AL.has(t) || this._$AL.set(t, e), i.reflect === !0 && this._$El !== t && (this._$EC === void 0 && (this._$EC = /* @__PURE__ */ new Map()), this._$EC.set(t, i))) : n = !1), !this.isUpdatePending && n && (this._$E_ = this._$Ej());
  }
  async _$Ej() {
    this.isUpdatePending = !0;
    try {
      await this._$E_;
    } catch (e) {
      Promise.reject(e);
    }
    const t = this.scheduleUpdate();
    return t != null && await t, !this.isUpdatePending;
  }
  scheduleUpdate() {
    return this.performUpdate();
  }
  performUpdate() {
    var t;
    if (!this.isUpdatePending)
      return;
    this.hasUpdated, this._$Ei && (this._$Ei.forEach((n, r) => this[r] = n), this._$Ei = void 0);
    let e = !1;
    const i = this._$AL;
    try {
      e = this.shouldUpdate(i), e ? (this.willUpdate(i), (t = this._$ES) === null || t === void 0 || t.forEach((n) => {
        var r;
        return (r = n.hostUpdate) === null || r === void 0 ? void 0 : r.call(n);
      }), this.update(i)) : this._$Ek();
    } catch (n) {
      throw e = !1, this._$Ek(), n;
    }
    e && this._$AE(i);
  }
  willUpdate(t) {
  }
  _$AE(t) {
    var e;
    (e = this._$ES) === null || e === void 0 || e.forEach((i) => {
      var n;
      return (n = i.hostUpdated) === null || n === void 0 ? void 0 : n.call(i);
    }), this.hasUpdated || (this.hasUpdated = !0, this.firstUpdated(t)), this.updated(t);
  }
  _$Ek() {
    this._$AL = /* @__PURE__ */ new Map(), this.isUpdatePending = !1;
  }
  get updateComplete() {
    return this.getUpdateComplete();
  }
  getUpdateComplete() {
    return this._$E_;
  }
  shouldUpdate(t) {
    return !0;
  }
  update(t) {
    this._$EC !== void 0 && (this._$EC.forEach((e, i) => this._$EO(i, this[i], e)), this._$EC = void 0), this._$Ek();
  }
  updated(t) {
  }
  firstUpdated(t) {
  }
};
S[X] = !0, S.elementProperties = /* @__PURE__ */ new Map(), S.elementStyles = [], S.shadowRootOptions = { mode: "open" }, rt == null || rt({ ReactiveElement: S }), ((q = I.reactiveElementVersions) !== null && q !== void 0 ? q : I.reactiveElementVersions = []).push("1.6.3");
/**
 * @license
 * Copyright 2017 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */
var G;
const D = window, E = D.trustedTypes, at = E ? E.createPolicy("lit-html", { createHTML: (o) => o }) : void 0, Y = "$lit$", v = `lit$${(Math.random() + "").slice(9)}$`, mt = "?" + v, xt = `<${mt}>`, x = document, L = () => x.createComment(""), U = (o) => o === null || typeof o != "object" && typeof o != "function", vt = Array.isArray, St = (o) => vt(o) || typeof (o == null ? void 0 : o[Symbol.iterator]) == "function", Z = `[ 	
\f\r]`, P = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, lt = /-->/g, ht = />/g, _ = RegExp(`>|${Z}(?:([^\\s"'>=/]+)(${Z}*=${Z}*(?:[^ 	
\f\r"'\`<>=]|("|')|))|$)`, "g"), dt = /'/g, ct = /"/g, bt = /^(?:script|style|textarea|title)$/i, Et = (o) => (t, ...e) => ({ _$litType$: o, strings: t, values: e }), kt = Et(1), k = Symbol.for("lit-noChange"), $ = Symbol.for("lit-nothing"), pt = /* @__PURE__ */ new WeakMap(), A = x.createTreeWalker(x, 129, null, !1);
function yt(o, t) {
  if (!Array.isArray(o) || !o.hasOwnProperty("raw"))
    throw Error("invalid template strings array");
  return at !== void 0 ? at.createHTML(t) : t;
}
const Ct = (o, t) => {
  const e = o.length - 1, i = [];
  let n, r = t === 2 ? "<svg>" : "", s = P;
  for (let h = 0; h < e; h++) {
    const a = o[h];
    let l, d, c = -1, p = 0;
    for (; p < a.length && (s.lastIndex = p, d = s.exec(a), d !== null); )
      p = s.lastIndex, s === P ? d[1] === "!--" ? s = lt : d[1] !== void 0 ? s = ht : d[2] !== void 0 ? (bt.test(d[2]) && (n = RegExp("</" + d[2], "g")), s = _) : d[3] !== void 0 && (s = _) : s === _ ? d[0] === ">" ? (s = n ?? P, c = -1) : d[1] === void 0 ? c = -2 : (c = s.lastIndex - d[2].length, l = d[1], s = d[3] === void 0 ? _ : d[3] === '"' ? ct : dt) : s === ct || s === dt ? s = _ : s === lt || s === ht ? s = P : (s = _, n = void 0);
    const u = s === _ && o[h + 1].startsWith("/>") ? " " : "";
    r += s === P ? a + xt : c >= 0 ? (i.push(l), a.slice(0, c) + Y + a.slice(c) + v + u) : a + v + (c === -2 ? (i.push(void 0), h) : u);
  }
  return [yt(o, r + (o[e] || "<?>") + (t === 2 ? "</svg>" : "")), i];
};
class z {
  constructor({ strings: t, _$litType$: e }, i) {
    let n;
    this.parts = [];
    let r = 0, s = 0;
    const h = t.length - 1, a = this.parts, [l, d] = Ct(t, e);
    if (this.el = z.createElement(l, i), A.currentNode = this.el.content, e === 2) {
      const c = this.el.content, p = c.firstChild;
      p.remove(), c.append(...p.childNodes);
    }
    for (; (n = A.nextNode()) !== null && a.length < h; ) {
      if (n.nodeType === 1) {
        if (n.hasAttributes()) {
          const c = [];
          for (const p of n.getAttributeNames())
            if (p.endsWith(Y) || p.startsWith(v)) {
              const u = d[s++];
              if (c.push(p), u !== void 0) {
                const g = n.getAttribute(u.toLowerCase() + Y).split(v), f = /([.?@])?(.*)/.exec(u);
                a.push({ type: 1, index: r, name: f[2], strings: g, ctor: f[1] === "." ? Mt : f[1] === "?" ? Lt : f[1] === "@" ? Ut : V });
              } else
                a.push({ type: 6, index: r });
            }
          for (const p of c)
            n.removeAttribute(p);
        }
        if (bt.test(n.tagName)) {
          const c = n.textContent.split(v), p = c.length - 1;
          if (p > 0) {
            n.textContent = E ? E.emptyScript : "";
            for (let u = 0; u < p; u++)
              n.append(c[u], L()), A.nextNode(), a.push({ type: 2, index: ++r });
            n.append(c[p], L());
          }
        }
      } else if (n.nodeType === 8)
        if (n.data === mt)
          a.push({ type: 2, index: r });
        else {
          let c = -1;
          for (; (c = n.data.indexOf(v, c + 1)) !== -1; )
            a.push({ type: 7, index: r }), c += v.length - 1;
        }
      r++;
    }
  }
  static createElement(t, e) {
    const i = x.createElement("template");
    return i.innerHTML = t, i;
  }
}
function C(o, t, e = o, i) {
  var n, r, s, h;
  if (t === k)
    return t;
  let a = i !== void 0 ? (n = e._$Co) === null || n === void 0 ? void 0 : n[i] : e._$Cl;
  const l = U(t) ? void 0 : t._$litDirective$;
  return (a == null ? void 0 : a.constructor) !== l && ((r = a == null ? void 0 : a._$AO) === null || r === void 0 || r.call(a, !1), l === void 0 ? a = void 0 : (a = new l(o), a._$AT(o, e, i)), i !== void 0 ? ((s = (h = e)._$Co) !== null && s !== void 0 ? s : h._$Co = [])[i] = a : e._$Cl = a), a !== void 0 && (t = C(o, a._$AS(o, t.values), a, i)), t;
}
class Pt {
  constructor(t, e) {
    this._$AV = [], this._$AN = void 0, this._$AD = t, this._$AM = e;
  }
  get parentNode() {
    return this._$AM.parentNode;
  }
  get _$AU() {
    return this._$AM._$AU;
  }
  u(t) {
    var e;
    const { el: { content: i }, parts: n } = this._$AD, r = ((e = t == null ? void 0 : t.creationScope) !== null && e !== void 0 ? e : x).importNode(i, !0);
    A.currentNode = r;
    let s = A.nextNode(), h = 0, a = 0, l = n[0];
    for (; l !== void 0; ) {
      if (h === l.index) {
        let d;
        l.type === 2 ? d = new N(s, s.nextSibling, this, t) : l.type === 1 ? d = new l.ctor(s, l.name, l.strings, this, t) : l.type === 6 && (d = new zt(s, this, t)), this._$AV.push(d), l = n[++a];
      }
      h !== (l == null ? void 0 : l.index) && (s = A.nextNode(), h++);
    }
    return A.currentNode = x, r;
  }
  v(t) {
    let e = 0;
    for (const i of this._$AV)
      i !== void 0 && (i.strings !== void 0 ? (i._$AI(t, i, e), e += i.strings.length - 2) : i._$AI(t[e])), e++;
  }
}
class N {
  constructor(t, e, i, n) {
    var r;
    this.type = 2, this._$AH = $, this._$AN = void 0, this._$AA = t, this._$AB = e, this._$AM = i, this.options = n, this._$Cp = (r = n == null ? void 0 : n.isConnected) === null || r === void 0 || r;
  }
  get _$AU() {
    var t, e;
    return (e = (t = this._$AM) === null || t === void 0 ? void 0 : t._$AU) !== null && e !== void 0 ? e : this._$Cp;
  }
  get parentNode() {
    let t = this._$AA.parentNode;
    const e = this._$AM;
    return e !== void 0 && (t == null ? void 0 : t.nodeType) === 11 && (t = e.parentNode), t;
  }
  get startNode() {
    return this._$AA;
  }
  get endNode() {
    return this._$AB;
  }
  _$AI(t, e = this) {
    t = C(this, t, e), U(t) ? t === $ || t == null || t === "" ? (this._$AH !== $ && this._$AR(), this._$AH = $) : t !== this._$AH && t !== k && this._(t) : t._$litType$ !== void 0 ? this.g(t) : t.nodeType !== void 0 ? this.$(t) : St(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 !== $ && U(this._$AH) ? this._$AA.nextSibling.data = t : this.$(x.createTextNode(t)), this._$AH = t;
  }
  g(t) {
    var e;
    const { values: i, _$litType$: n } = t, r = typeof n == "number" ? this._$AC(t) : (n.el === void 0 && (n.el = z.createElement(yt(n.h, n.h[0]), this.options)), n);
    if (((e = this._$AH) === null || e === void 0 ? void 0 : e._$AD) === r)
      this._$AH.v(i);
    else {
      const s = new Pt(r, this), h = s.u(this.options);
      s.v(i), this.$(h), this._$AH = s;
    }
  }
  _$AC(t) {
    let e = pt.get(t.strings);
    return e === void 0 && pt.set(t.strings, e = new z(t)), e;
  }
  T(t) {
    vt(this._$AH) || (this._$AH = [], this._$AR());
    const e = this._$AH;
    let i, n = 0;
    for (const r of t)
      n === e.length ? e.push(i = new N(this.k(L()), this.k(L()), this, this.options)) : i = e[n], i._$AI(r), n++;
    n < e.length && (this._$AR(i && i._$AB.nextSibling, n), e.length = n);
  }
  _$AR(t = this._$AA.nextSibling, e) {
    var i;
    for ((i = this._$AP) === null || i === void 0 || i.call(this, !1, !0, e); t && t !== this._$AB; ) {
      const n = t.nextSibling;
      t.remove(), t = n;
    }
  }
  setConnected(t) {
    var e;
    this._$AM === void 0 && (this._$Cp = t, (e = this._$AP) === null || e === void 0 || e.call(this, t));
  }
}
class V {
  constructor(t, e, i, n, r) {
    this.type = 1, this._$AH = $, this._$AN = void 0, this.element = t, this.name = e, this._$AM = n, this.options = r, i.length > 2 || i[0] !== "" || i[1] !== "" ? (this._$AH = Array(i.length - 1).fill(new String()), this.strings = i) : this._$AH = $;
  }
  get tagName() {
    return this.element.tagName;
  }
  get _$AU() {
    return this._$AM._$AU;
  }
  _$AI(t, e = this, i, n) {
    const r = this.strings;
    let s = !1;
    if (r === void 0)
      t = C(this, t, e, 0), s = !U(t) || t !== this._$AH && t !== k, s && (this._$AH = t);
    else {
      const h = t;
      let a, l;
      for (t = r[0], a = 0; a < r.length - 1; a++)
        l = C(this, h[i + a], e, a), l === k && (l = this._$AH[a]), s || (s = !U(l) || l !== this._$AH[a]), l === $ ? t = $ : t !== $ && (t += (l ?? "") + r[a + 1]), this._$AH[a] = l;
    }
    s && !n && this.j(t);
  }
  j(t) {
    t === $ ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, t ?? "");
  }
}
class Mt extends V {
  constructor() {
    super(...arguments), this.type = 3;
  }
  j(t) {
    this.element[this.name] = t === $ ? void 0 : t;
  }
}
const Rt = E ? E.emptyScript : "";
class Lt extends V {
  constructor() {
    super(...arguments), this.type = 4;
  }
  j(t) {
    t && t !== $ ? this.element.setAttribute(this.name, Rt) : this.element.removeAttribute(this.name);
  }
}
class Ut extends V {
  constructor(t, e, i, n, r) {
    super(t, e, i, n, r), this.type = 5;
  }
  _$AI(t, e = this) {
    var i;
    if ((t = (i = C(this, t, e, 0)) !== null && i !== void 0 ? i : $) === k)
      return;
    const n = this._$AH, r = t === $ && n !== $ || t.capture !== n.capture || t.once !== n.once || t.passive !== n.passive, s = t !== $ && (n === $ || r);
    r && this.element.removeEventListener(this.name, this, n), s && this.element.addEventListener(this.name, this, t), this._$AH = t;
  }
  handleEvent(t) {
    var e, i;
    typeof this._$AH == "function" ? this._$AH.call((i = (e = this.options) === null || e === void 0 ? void 0 : e.host) !== null && i !== void 0 ? i : this.element, t) : this._$AH.handleEvent(t);
  }
}
class zt {
  constructor(t, e, i) {
    this.element = t, this.type = 6, this._$AN = void 0, this._$AM = e, this.options = i;
  }
  get _$AU() {
    return this._$AM._$AU;
  }
  _$AI(t) {
    C(this, t);
  }
}
const ut = D.litHtmlPolyfillSupport;
ut == null || ut(z, N), ((G = D.litHtmlVersions) !== null && G !== void 0 ? G : D.litHtmlVersions = []).push("2.8.0");
const Nt = (o, t, e) => {
  var i, n;
  const r = (i = e == null ? void 0 : e.renderBefore) !== null && i !== void 0 ? i : t;
  let s = r._$litPart$;
  if (s === void 0) {
    const h = (n = e == null ? void 0 : e.renderBefore) !== null && n !== void 0 ? n : null;
    r._$litPart$ = s = new N(t.insertBefore(L(), h), h, void 0, e ?? {});
  }
  return s._$AI(o), s;
};
/**
 * @license
 * Copyright 2017 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */
var F, K;
class R extends S {
  constructor() {
    super(...arguments), this.renderOptions = { host: this }, this._$Do = void 0;
  }
  createRenderRoot() {
    var t, e;
    const i = super.createRenderRoot();
    return (t = (e = this.renderOptions).renderBefore) !== null && t !== void 0 || (e.renderBefore = i.firstChild), i;
  }
  update(t) {
    const e = this.render();
    this.hasUpdated || (this.renderOptions.isConnected = this.isConnected), super.update(t), this._$Do = Nt(e, this.renderRoot, this.renderOptions);
  }
  connectedCallback() {
    var t;
    super.connectedCallback(), (t = this._$Do) === null || t === void 0 || t.setConnected(!0);
  }
  disconnectedCallback() {
    var t;
    super.disconnectedCallback(), (t = this._$Do) === null || t === void 0 || t.setConnected(!1);
  }
  render() {
    return k;
  }
}
R.finalized = !0, R._$litElement$ = !0, (F = globalThis.litElementHydrateSupport) === null || F === void 0 || F.call(globalThis, { LitElement: R });
const $t = globalThis.litElementPolyfillSupport;
$t == null || $t({ LitElement: R });
((K = globalThis.litElementVersions) !== null && K !== void 0 ? K : globalThis.litElementVersions = []).push("3.3.3");
/**
 * @license
 * Copyright 2017 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */
const Tt = (o) => (t) => typeof t == "function" ? ((e, i) => (customElements.define(e, i), i))(o, t) : ((e, i) => {
  const { kind: n, elements: r } = i;
  return { kind: n, elements: r, finisher(s) {
    customElements.define(e, s);
  } };
})(o, t);
/**
 * @license
 * Copyright 2017 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */
const Ht = (o, t) => t.kind === "method" && t.descriptor && !("value" in t.descriptor) ? { ...t, finisher(e) {
  e.createProperty(t.key, o);
} } : { kind: "field", key: Symbol(), placement: "own", descriptor: {}, originalKey: t.key, initializer() {
  typeof t.initializer == "function" && (this[t.key] = t.initializer.call(this));
}, finisher(e) {
  e.createProperty(t.key, o);
} }, Bt = (o, t, e) => {
  t.constructor.createProperty(e, o);
};
function it(o) {
  return (t, e) => e !== void 0 ? Bt(o, t, e) : Ht(o, t);
}
/**
 * @license
 * Copyright 2017 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */
function T(o) {
  return it({ ...o, state: !0 });
}
/**
 * @license
 * Copyright 2021 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */
var J;
((J = window.HTMLSlotElement) === null || J === void 0 ? void 0 : J.prototype.assignedElements) != null;
function Ot({ topLeftCornerRadius: o, topRightCornerRadius: t, bottomRightCornerRadius: e, bottomLeftCornerRadius: i, width: n, height: r }) {
  const s = {
    topLeft: -1,
    topRight: -1,
    bottomLeft: -1,
    bottomRight: -1
  }, h = {
    topLeft: o,
    topRight: t,
    bottomLeft: i,
    bottomRight: e
  };
  return Object.entries(h).sort(([, a], [, l]) => l - a).forEach(([a, l]) => {
    const d = a, c = jt[d], p = Math.min(...c.map((u) => {
      const g = h[u.corner];
      if (l === 0 && g === 0)
        return 0;
      const f = s[u.corner], H = u.side === "top" || u.side === "bottom" ? n : r;
      return f >= 0 ? H - s[u.corner] : l / (l + g) * H;
    }));
    s[d] = p, h[d] = Math.min(l, p);
  }), {
    topLeft: {
      radius: h.topLeft,
      roundingAndSmoothingBudget: s.topLeft
    },
    topRight: {
      radius: h.topRight,
      roundingAndSmoothingBudget: s.topRight
    },
    bottomLeft: {
      radius: h.bottomLeft,
      roundingAndSmoothingBudget: s.bottomLeft
    },
    bottomRight: {
      radius: h.bottomRight,
      roundingAndSmoothingBudget: s.bottomRight
    }
  };
}
const jt = {
  topLeft: [
    {
      corner: "topRight",
      side: "top"
    },
    {
      corner: "bottomLeft",
      side: "left"
    }
  ],
  topRight: [
    {
      corner: "topLeft",
      side: "top"
    },
    {
      corner: "bottomRight",
      side: "right"
    }
  ],
  bottomLeft: [
    {
      corner: "bottomRight",
      side: "bottom"
    },
    {
      corner: "topLeft",
      side: "left"
    }
  ],
  bottomRight: [
    {
      corner: "bottomLeft",
      side: "bottom"
    },
    {
      corner: "topRight",
      side: "right"
    }
  ]
};
function M({ cornerRadius: o, cornerSmoothing: t, preserveSmoothing: e, roundingAndSmoothingBudget: i }) {
  let n = (1 + t) * o;
  if (!e) {
    const g = i / o - 1;
    t = Math.min(t, g), n = Math.min(n, i);
  }
  const r = 90 * (1 - t), s = Math.sin(O(r / 2)) * o * Math.sqrt(2), h = (90 - r) / 2, a = o * Math.tan(O(h / 2)), l = 45 * t, d = a * Math.cos(O(l)), c = d * Math.tan(O(l));
  let p = (n - s - d - c) / 3, u = 2 * p;
  if (e && n > i) {
    const g = i - c - s - d, f = g / 6, H = g - f;
    p = Math.min(p, H), u = g - p, n = Math.min(n, i);
  }
  return {
    a: u,
    b: p,
    c: d,
    d: c,
    p: n,
    arcSectionLength: s,
    cornerRadius: o
  };
}
function ft({ width: o, height: t, topLeftPathParams: e, topRightPathParams: i, bottomLeftPathParams: n, bottomRightPathParams: r }) {
  return `
    M ${o - i.p} 0
    ${It(i)}
    L ${o} ${t - r.p}
    ${Dt(r)}
    L ${n.p} ${t}
    ${Vt(n)}
    L 0 ${e.p}
    ${qt(e)}
    Z
  `.replace(/[\t\s\n]+/g, " ").trim();
}
function It({ cornerRadius: o, a: t, b: e, c: i, d: n, p: r, arcSectionLength: s }) {
  return o ? b`
    c ${t} 0 ${t + e} 0 ${t + e + i} ${n}
    a ${o} ${o} 0 0 1 ${s} ${s}
    c ${n} ${i}
        ${n} ${e + i}
        ${n} ${t + e + i}` : b`l ${r} 0`;
}
function Dt({ cornerRadius: o, a: t, b: e, c: i, d: n, p: r, arcSectionLength: s }) {
  return o ? b`
    c 0 ${t}
      0 ${t + e}
      ${-n} ${t + e + i}
    a ${o} ${o} 0 0 1 -${s} ${s}
    c ${-i} ${n}
      ${-(e + i)} ${n}
      ${-(t + e + i)} ${n}` : b`l 0 ${r}`;
}
function Vt({ cornerRadius: o, a: t, b: e, c: i, d: n, p: r, arcSectionLength: s }) {
  return o ? b`
    c ${-t} 0
      ${-(t + e)} 0
      ${-(t + e + i)} ${-n}
    a ${o} ${o} 0 0 1 -${s} -${s}
    c ${-n} ${-i}
      ${-n} ${-(e + i)}
      ${-n} ${-(t + e + i)}` : b`l ${-r} 0`;
}
function qt({ cornerRadius: o, a: t, b: e, c: i, d: n, p: r, arcSectionLength: s }) {
  return o ? b`
    c 0 ${-t}
      0 ${-(t + e)}
      ${n} ${-(t + e + i)}
    a ${o} ${o} 0 0 1 ${s} -${s}
    c ${i} ${-n}
      ${e + i} ${-n}
      ${t + e + i} ${-n}` : b`l 0 ${-r}`;
}
function O(o) {
  return o * Math.PI / 180;
}
function b(o, ...t) {
  return o.reduce((e, i, n) => {
    let r = t[n];
    return typeof r == "number" ? e + i + r.toFixed(4) : e + i + (r ?? "");
  }, "");
}
function Wt({ cornerRadius: o = 0, topLeftCornerRadius: t, topRightCornerRadius: e, bottomRightCornerRadius: i, bottomLeftCornerRadius: n, cornerSmoothing: r, width: s, height: h, preserveSmoothing: a = !1 }) {
  if (t = t ?? o, e = e ?? o, n = n ?? o, i = i ?? o, t === e && e === i && i === n && n === t) {
    const u = Math.min(s, h) / 2, g = Math.min(t, u), f = M({
      cornerRadius: g,
      cornerSmoothing: r,
      preserveSmoothing: a,
      roundingAndSmoothingBudget: u
    });
    return ft({
      width: s,
      height: h,
      topLeftPathParams: f,
      topRightPathParams: f,
      bottomLeftPathParams: f,
      bottomRightPathParams: f
    });
  }
  const { topLeft: l, topRight: d, bottomLeft: c, bottomRight: p } = Ot({
    topLeftCornerRadius: t,
    topRightCornerRadius: e,
    bottomRightCornerRadius: i,
    bottomLeftCornerRadius: n,
    width: s,
    height: h
  });
  return ft({
    width: s,
    height: h,
    topLeftPathParams: M({
      cornerSmoothing: r,
      preserveSmoothing: a,
      cornerRadius: l.radius,
      roundingAndSmoothingBudget: l.roundingAndSmoothingBudget
    }),
    topRightPathParams: M({
      cornerSmoothing: r,
      preserveSmoothing: a,
      cornerRadius: d.radius,
      roundingAndSmoothingBudget: d.roundingAndSmoothingBudget
    }),
    bottomRightPathParams: M({
      cornerSmoothing: r,
      preserveSmoothing: a,
      cornerRadius: p.radius,
      roundingAndSmoothingBudget: p.roundingAndSmoothingBudget
    }),
    bottomLeftPathParams: M({
      cornerSmoothing: r,
      preserveSmoothing: a,
      cornerRadius: c.radius,
      roundingAndSmoothingBudget: c.roundingAndSmoothingBudget
    })
  });
}
const Gt = `*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.static{position:static}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.flex-shrink{flex-shrink:1}.flex-grow{flex-grow:1}.resize{resize:both}.flex-wrap{flex-wrap:wrap}.border{border-width:1px}.shadow{--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.drop-shadow{--tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / .1)) drop-shadow(0 1px 1px rgb(0 0 0 / .06));filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}
`;
var Zt = Object.defineProperty, Ft = Object.getOwnPropertyDescriptor, y = (o, t, e, i) => {
  for (var n = i > 1 ? void 0 : i ? Ft(t, e) : t, r = o.length - 1, s; r >= 0; r--)
    (s = o[r]) && (n = (i ? s(t, e, n) : s(n)) || n);
  return i && n && Zt(t, e, n), n;
};
const Kt = /linear-gradient\(\s*([^,]+)(\s*(,\s*#?\w+(\(([\.\d]+(\s*,\s*[\.\d]+)+)\))?(\s+\d+%)?)+)\)/, Jt = /(#?\w+(\(([\.\d]+(\s*,\s*[\.\d]+)+)\))?)(\s+\d+%)?/g, Qt = /(#?\w+(\(([\.\d]+(\s*,\s*[\.\d]+)+)\))?)(\s+(\d+)\w+)+/;
function Xt(o) {
  const t = o.match(Kt);
  if (!t || !t.length || !t[1] || !t[2])
    return null;
  const e = t[1].trim(), i = Array.of(...t[2].matchAll(Jt)).map((n) => ({ color: n[1], stop: (n[5] || "").trim() }));
  return { angle: e, colorStops: i };
}
function Yt(o) {
  const t = o.match(Qt);
  if (!t || !t.length)
    return null;
  const e = t[1], i = o.replace(e, "").trim().split(" ");
  return `drop-shadow(${e} ${i[0]} ${i[1]} ${i[2]})`;
}
let te = 0, w = class extends R {
  constructor() {
    super(), this.radius = 32, this.cornerSmoothing = 0.6, this.width = 0, this.height = 0, this.fill = "transparent", this.gradient = null, this.boxShadow = "", this.containerStyles = m(""), this.instanceId = `squircle-${te++}`;
  }
  updateInnerContainerSize() {
    const { width: o, height: t } = this.getBoundingClientRect();
    this.width = o, this.height = t;
  }
  firstUpdated() {
    const o = getComputedStyle(this), t = o.padding, e = o.display;
    this.fill = o.backgroundColor || "transparent", this.style.display = e === "block" || e === "flex" ? e : "block";
    let i = e;
    (e === "inline" || e === "inline-block" || e === "inline-flex") && (i = "block");
    let n = [];
    if (i === "flex" && (n = [
      o.flexGrow ? `flex-grow: ${o.flexGrow};` : "",
      o.flexShrink ? `flex-shrink: ${o.flexShrink};` : "",
      o.flexBasis ? `flex-basis: ${o.flexBasis};` : "",
      o.alignSelf ? `align-self: ${o.alignSelf};` : "",
      o.alignItems ? `align-items: ${o.alignItems};` : "",
      o.alignContent ? `align-content: ${o.alignContent};` : "",
      o.justifySelf ? `justify-self: ${o.justifySelf};` : "",
      o.justifyItems ? `justify-items: ${o.justifyItems};` : "",
      o.justifyContent ? `justify-content: ${o.justifyContent};` : "",
      o.flexDirection ? `flex-direction: ${o.flexDirection};` : "",
      o.flexWrap ? `flex-wrap: ${o.flexWrap};` : "",
      o.order ? `order: ${o.order};` : "",
      o.gap ? `gap: ${o.gap};` : ""
    ]), o.boxShadow) {
      const r = Yt(o.boxShadow);
      r && (this.style.filter = r), this.style.boxShadow = "none";
    }
    this.containerStyles = B`
      padding: ${m(t)};
      display: ${m(i)};
      ${m(n.join(`
`))}
    `, this.updateInnerContainerSize(), o.backgroundImage.indexOf("linear-gradient") !== -1 && (this.gradient = Xt(o.backgroundImage)), this.style.padding = "0", this.style.border = "0 solid transparent", this.style.background = "transparent", window.addEventListener("resize", this.updateInnerContainerSize.bind(this));
  }
  disconnectedCallback() {
    window.removeEventListener("resize", this.updateInnerContainerSize.bind(this));
  }
  render() {
    const [o, t] = [this.width, this.height], e = Wt({
      width: o,
      height: t,
      cornerRadius: this.radius,
      cornerSmoothing: this.cornerSmoothing
    });
    let i = "", n = this.fill;
    this.gradient && (i = `
        <defs>
          <linearGradient id="${this.instanceId}" gradientTransform="rotate(${this.gradient.angle})">
            ${this.gradient.colorStops.map((l) => `<stop offset="${l.stop || "100%"}" stop-color="${l.color}" />`).join(`
`)}
          </linearGradient>
        </defs>
      `, n = `url(#${this.instanceId})`);
    const r = `
      <svg width="${o}" height="${t}" viewBox="0 0 ${o} ${t}" xmlns="http://www.w3.org/2000/svg">
        ${i}
        <path d="${e}" fill="${n}" />
      </svg>
    `, s = `url('data:image/svg+xml;base64,${btoa(r)}')`, h = o !== 0 && t !== 0 ? B`width: ${o}px; height: ${t}px;` : B`width: 100%; height: 100%;`, a = B`
      ${m(h)}
      ${m(this.containerStyles)}
      background-color: transparent;
      background-image: ${m(s)};
      background-repeat: no-repeat;
    `;
    return kt`
      <div style=${a}>
        <slot></slot>
      </div>
    `;
  }
};
w.styles = m(Gt);
y([
  it({ type: Number })
], w.prototype, "radius", 2);
y([
  it({ type: Number, attribute: "corner-smoothing" })
], w.prototype, "cornerSmoothing", 2);
y([
  T()
], w.prototype, "width", 2);
y([
  T()
], w.prototype, "height", 2);
y([
  T()
], w.prototype, "fill", 2);
y([
  T()
], w.prototype, "gradient", 2);
y([
  T()
], w.prototype, "boxShadow", 2);
w = y([
  Tt("x-squircle")
], w);
export {
  w as Squircle
};