@florid-kit/components 0.3.43 → 0.4.0

package/index.mjs

@@ -3,18 +3,18 @@
  * Copyright 2019 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const G = globalThis, ct = G.ShadowRoot && (G.ShadyCSS === void 0 || G.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, ht = Symbol(), bt = /* @__PURE__ */ new WeakMap();
+const X = globalThis, ht = X.ShadowRoot && (X.ShadyCSS === void 0 || X.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, dt = Symbol(), vt = /* @__PURE__ */ new WeakMap();
 let Et = class {
   constructor(t, e, n) {
-    if (this._$cssResult$ = !0, n !== ht) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
+    if (this._$cssResult$ = !0, n !== dt) 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 (ct && t === void 0) {
+    if (ht && t === void 0) {
       const n = e !== void 0 && e.length === 1;
-      n && (t = bt.get(e)), t === void 0 && ((this.o = t = new CSSStyleSheet()).replaceSync(this.cssText), n && bt.set(e, t));
+      n && (t = vt.get(e)), t === void 0 && ((this.o = t = new CSSStyleSheet()).replaceSync(this.cssText), n && vt.set(e, t));
     }
     return t;
   }
@@ -22,33 +22,33 @@ let Et = class {
     return this.cssText;
   }
 };
-const Bt = (s) => new Et(typeof s == "string" ? s : s + "", void 0, ht), A = (s, ...t) => {
-  const e = s.length === 1 ? s[0] : t.reduce((n, o, r) => n + ((i) => {
-    if (i._$cssResult$ === !0) return i.cssText;
-    if (typeof i == "number") return i;
-    throw Error("Value passed to 'css' function must be a 'css' function result: " + i + ". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.");
-  })(o) + s[r + 1], s[0]);
-  return new Et(e, s, ht);
-}, It = (s, t) => {
-  if (ct) s.adoptedStyleSheets = t.map((e) => e instanceof CSSStyleSheet ? e : e.styleSheet);
+const It = (s) => new Et(typeof s == "string" ? s : s + "", void 0, dt), A = (s, ...t) => {
+  const e = s.length === 1 ? s[0] : t.reduce((n, o, i) => n + ((r) => {
+    if (r._$cssResult$ === !0) return r.cssText;
+    if (typeof r == "number") return r;
+    throw Error("Value passed to 'css' function must be a 'css' function result: " + r + ". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.");
+  })(o) + s[i + 1], s[0]);
+  return new Et(e, s, dt);
+}, Bt = (s, t) => {
+  if (ht) s.adoptedStyleSheets = t.map((e) => e instanceof CSSStyleSheet ? e : e.styleSheet);
   else for (const e of t) {
-    const n = document.createElement("style"), o = G.litNonce;
+    const n = document.createElement("style"), o = X.litNonce;
     o !== void 0 && n.setAttribute("nonce", o), n.textContent = e.cssText, s.appendChild(n);
   }
-}, vt = ct ? (s) => s : (s) => s instanceof CSSStyleSheet ? ((t) => {
+}, bt = ht ? (s) => s : (s) => s instanceof CSSStyleSheet ? ((t) => {
   let e = "";
   for (const n of t.cssRules) e += n.cssText;
-  return Bt(e);
+  return It(e);
 })(s) : s;
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const { is: Ot, defineProperty: Ht, getOwnPropertyDescriptor: Tt, getOwnPropertyNames: Mt, getOwnPropertySymbols: zt, getPrototypeOf: Dt } = Object, C = globalThis, gt = C.trustedTypes, Ut = gt ? gt.emptyScript : "", st = C.reactiveElementPolyfillSupport, R = (s, t) => s, X = { toAttribute(s, t) {
+const { is: Ot, defineProperty: Mt, getOwnPropertyDescriptor: Ht, getOwnPropertyNames: Tt, getOwnPropertySymbols: Dt, getPrototypeOf: Ut } = Object, C = globalThis, gt = C.trustedTypes, zt = gt ? gt.emptyScript : "", nt = C.reactiveElementPolyfillSupport, R = (s, t) => s, J = { toAttribute(s, t) {
   switch (t) {
     case Boolean:
-      s = s ? Ut : null;
+      s = s ? zt : null;
       break;
     case Object:
     case Array:
@@ -73,9 +73,9 @@ const { is: Ot, defineProperty: Ht, getOwnPropertyDescriptor: Tt, getOwnProperty
       }
   }
   return e;
-} }, dt = (s, t) => !Ot(s, t), yt = { attribute: !0, type: String, converter: X, reflect: !1, useDefault: !1, hasChanged: dt };
+} }, pt = (s, t) => !Ot(s, t), yt = { attribute: !0, type: String, converter: J, reflect: !1, useDefault: !1, hasChanged: pt };
 Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), C.litPropertyMetadata ?? (C.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
-let z = class extends HTMLElement {
+let D = class extends HTMLElement {
   static addInitializer(t) {
     this._$Ei(), (this.l ?? (this.l = [])).push(t);
   }
@@ -85,18 +85,18 @@ let z = class extends HTMLElement {
   static createProperty(t, e = yt) {
     if (e.state && (e.attribute = !1), this._$Ei(), this.prototype.hasOwnProperty(t) && ((e = Object.create(e)).wrapped = !0), this.elementProperties.set(t, e), !e.noAccessor) {
       const n = Symbol(), o = this.getPropertyDescriptor(t, n, e);
-      o !== void 0 && Ht(this.prototype, t, o);
+      o !== void 0 && Mt(this.prototype, t, o);
     }
   }
   static getPropertyDescriptor(t, e, n) {
-    const { get: o, set: r } = Tt(this.prototype, t) ?? { get() {
+    const { get: o, set: i } = Ht(this.prototype, t) ?? { get() {
       return this[e];
-    }, set(i) {
-      this[e] = i;
+    }, set(r) {
+      this[e] = r;
     } };
-    return { get: o, set(i) {
+    return { get: o, set(r) {
       const c = o == null ? void 0 : o.call(this);
-      r == null || r.call(this, i), this.requestUpdate(t, c, n);
+      i == null || i.call(this, r), this.requestUpdate(t, c, n);
     }, configurable: !0, enumerable: !0 };
   }
   static getPropertyOptions(t) {
@@ -104,13 +104,13 @@ let z = class extends HTMLElement {
   }
   static _$Ei() {
     if (this.hasOwnProperty(R("elementProperties"))) return;
-    const t = Dt(this);
+    const t = Ut(this);
     t.finalize(), t.l !== void 0 && (this.l = [...t.l]), this.elementProperties = new Map(t.elementProperties);
   }
   static finalize() {
     if (this.hasOwnProperty(R("finalized"))) return;
     if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(R("properties"))) {
-      const e = this.properties, n = [...Mt(e), ...zt(e)];
+      const e = this.properties, n = [...Tt(e), ...Dt(e)];
       for (const o of n) this.createProperty(o, e[o]);
     }
     const t = this[Symbol.metadata];
@@ -129,8 +129,8 @@ let z = class extends HTMLElement {
     const e = [];
     if (Array.isArray(t)) {
       const n = new Set(t.flat(1 / 0).reverse());
-      for (const o of n) e.unshift(vt(o));
-    } else t !== void 0 && e.push(vt(t));
+      for (const o of n) e.unshift(bt(o));
+    } else t !== void 0 && e.push(bt(t));
     return e;
   }
   static _$Eu(t, e) {
@@ -159,7 +159,7 @@ let z = class extends HTMLElement {
   }
   createRenderRoot() {
     const t = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
-    return It(t, this.constructor.elementStyles), t;
+    return Bt(t, this.constructor.elementStyles), t;
   }
   connectedCallback() {
     var t;
@@ -181,32 +181,32 @@ let z = class extends HTMLElement {
     this._$AK(t, n);
   }
   _$ET(t, e) {
-    var r;
+    var i;
     const n = this.constructor.elementProperties.get(t), o = this.constructor._$Eu(t, n);
     if (o !== void 0 && n.reflect === !0) {
-      const i = (((r = n.converter) == null ? void 0 : r.toAttribute) !== void 0 ? n.converter : X).toAttribute(e, n.type);
-      this._$Em = t, i == null ? this.removeAttribute(o) : this.setAttribute(o, i), this._$Em = null;
+      const r = (((i = n.converter) == null ? void 0 : i.toAttribute) !== void 0 ? n.converter : J).toAttribute(e, n.type);
+      this._$Em = t, r == null ? this.removeAttribute(o) : this.setAttribute(o, r), this._$Em = null;
     }
   }
   _$AK(t, e) {
-    var r, i;
+    var i, r;
     const n = this.constructor, o = n._$Eh.get(t);
     if (o !== void 0 && this._$Em !== o) {
-      const c = n.getPropertyOptions(o), l = typeof c.converter == "function" ? { fromAttribute: c.converter } : ((r = c.converter) == null ? void 0 : r.fromAttribute) !== void 0 ? c.converter : X;
-      this._$Em = o, this[o] = l.fromAttribute(e, c.type) ?? ((i = this._$Ej) == null ? void 0 : i.get(o)) ?? null, this._$Em = null;
+      const c = n.getPropertyOptions(o), l = typeof c.converter == "function" ? { fromAttribute: c.converter } : ((i = c.converter) == null ? void 0 : i.fromAttribute) !== void 0 ? c.converter : J;
+      this._$Em = o, this[o] = l.fromAttribute(e, c.type) ?? ((r = this._$Ej) == null ? void 0 : r.get(o)) ?? null, this._$Em = null;
     }
   }
   requestUpdate(t, e, n) {
     var o;
     if (t !== void 0) {
-      const r = this.constructor, i = this[t];
-      if (n ?? (n = r.getPropertyOptions(t)), !((n.hasChanged ?? dt)(i, e) || n.useDefault && n.reflect && i === ((o = this._$Ej) == null ? void 0 : o.get(t)) && !this.hasAttribute(r._$Eu(t, n)))) return;
+      const i = this.constructor, r = this[t];
+      if (n ?? (n = i.getPropertyOptions(t)), !((n.hasChanged ?? pt)(r, e) || n.useDefault && n.reflect && r === ((o = this._$Ej) == null ? void 0 : o.get(t)) && !this.hasAttribute(i._$Eu(t, n)))) return;
       this.C(t, e, n);
     }
     this.isUpdatePending === !1 && (this._$ES = this._$EP());
   }
-  C(t, e, { useDefault: n, reflect: o, wrapped: r }, i) {
-    n && !(this._$Ej ?? (this._$Ej = /* @__PURE__ */ new Map())).has(t) && (this._$Ej.set(t, i ?? e ?? this[t]), r !== !0 || i !== void 0) || (this._$AL.has(t) || (this.hasUpdated || n || (e = void 0), this._$AL.set(t, e)), o === !0 && this._$Em !== t && (this._$Eq ?? (this._$Eq = /* @__PURE__ */ new Set())).add(t));
+  C(t, e, { useDefault: n, reflect: o, wrapped: i }, r) {
+    n && !(this._$Ej ?? (this._$Ej = /* @__PURE__ */ new Map())).has(t) && (this._$Ej.set(t, r ?? e ?? this[t]), i !== !0 || r !== void 0) || (this._$AL.has(t) || (this.hasUpdated || n || (e = void 0), this._$AL.set(t, e)), o === !0 && this._$Em !== t && (this._$Eq ?? (this._$Eq = /* @__PURE__ */ new Set())).add(t));
   }
   async _$EP() {
     this.isUpdatePending = !0;
@@ -226,21 +226,21 @@ let z = class extends HTMLElement {
     if (!this.isUpdatePending) return;
     if (!this.hasUpdated) {
       if (this.renderRoot ?? (this.renderRoot = this.createRenderRoot()), this._$Ep) {
-        for (const [r, i] of this._$Ep) this[r] = i;
+        for (const [i, r] of this._$Ep) this[i] = r;
         this._$Ep = void 0;
       }
       const o = this.constructor.elementProperties;
-      if (o.size > 0) for (const [r, i] of o) {
-        const { wrapped: c } = i, l = this[r];
-        c !== !0 || this._$AL.has(r) || l === void 0 || this.C(r, void 0, i, l);
+      if (o.size > 0) for (const [i, r] of o) {
+        const { wrapped: c } = r, l = this[i];
+        c !== !0 || this._$AL.has(i) || l === void 0 || this.C(i, void 0, r, l);
       }
     }
     let t = !1;
     const e = this._$AL;
     try {
       t = this.shouldUpdate(e), t ? (this.willUpdate(e), (n = this._$EO) == null || n.forEach((o) => {
-        var r;
-        return (r = o.hostUpdate) == null ? void 0 : r.call(o);
+        var i;
+        return (i = o.hostUpdate) == null ? void 0 : i.call(o);
       }), this.update(e)) : this._$EM();
     } catch (o) {
       throw t = !1, this._$EM(), o;
@@ -276,61 +276,61 @@ let z = class extends HTMLElement {
   firstUpdated(t) {
   }
 };
-z.elementStyles = [], z.shadowRootOptions = { mode: "open" }, z[R("elementProperties")] = /* @__PURE__ */ new Map(), z[R("finalized")] = /* @__PURE__ */ new Map(), st == null || st({ ReactiveElement: z }), (C.reactiveElementVersions ?? (C.reactiveElementVersions = [])).push("2.1.0");
+D.elementStyles = [], D.shadowRootOptions = { mode: "open" }, D[R("elementProperties")] = /* @__PURE__ */ new Map(), D[R("finalized")] = /* @__PURE__ */ new Map(), nt == null || nt({ ReactiveElement: D }), (C.reactiveElementVersions ?? (C.reactiveElementVersions = [])).push("2.1.0");
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const F = globalThis, J = F.trustedTypes, mt = J ? J.createPolicy("lit-html", { createHTML: (s) => s }) : void 0, Ct = "$lit$", E = `lit$${Math.random().toFixed(9).slice(2)}$`, Lt = "?" + E, Nt = `<${Lt}>`, O = document, V = () => O.createComment(""), q = (s) => s === null || typeof s != "object" && typeof s != "function", pt = Array.isArray, jt = (s) => pt(s) || typeof (s == null ? void 0 : s[Symbol.iterator]) == "function", nt = `[ 	
-\f\r]`, j = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, $t = /-->/g, wt = />/g, k = RegExp(`>|${nt}(?:([^\\s"'>=/]+)(${nt}*=${nt}*(?:[^ 	
-\f\r"'\`<>=]|("|')|))|$)`, "g"), xt = /'/g, _t = /"/g, Pt = /^(?:script|style|textarea|title)$/i, Rt = (s) => (t, ...e) => ({ _$litType$: s, strings: t, values: e }), d = Rt(1), H = Symbol.for("lit-noChange"), h = Symbol.for("lit-nothing"), At = /* @__PURE__ */ new WeakMap(), B = O.createTreeWalker(O, 129);
+const V = globalThis, Q = V.trustedTypes, mt = Q ? Q.createPolicy("lit-html", { createHTML: (s) => s }) : void 0, Ct = "$lit$", E = `lit$${Math.random().toFixed(9).slice(2)}$`, Lt = "?" + E, Nt = `<${Lt}>`, O = document, F = () => O.createComment(""), q = (s) => s === null || typeof s != "object" && typeof s != "function", ut = Array.isArray, jt = (s) => ut(s) || typeof (s == null ? void 0 : s[Symbol.iterator]) == "function", ot = `[ 	
+\f\r]`, j = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, $t = /-->/g, wt = />/g, k = RegExp(`>|${ot}(?:([^\\s"'>=/]+)(${ot}*=${ot}*(?:[^ 	
+\f\r"'\`<>=]|("|')|))|$)`, "g"), xt = /'/g, _t = /"/g, Pt = /^(?:script|style|textarea|title)$/i, Rt = (s) => (t, ...e) => ({ _$litType$: s, strings: t, values: e }), d = Rt(1), M = Symbol.for("lit-noChange"), h = Symbol.for("lit-nothing"), At = /* @__PURE__ */ new WeakMap(), I = O.createTreeWalker(O, 129);
 function kt(s, t) {
-  if (!pt(s) || !s.hasOwnProperty("raw")) throw Error("invalid template strings array");
+  if (!ut(s) || !s.hasOwnProperty("raw")) throw Error("invalid template strings array");
   return mt !== void 0 ? mt.createHTML(t) : t;
 }
-const Ft = (s, t) => {
+const Vt = (s, t) => {
   const e = s.length - 1, n = [];
-  let o, r = t === 2 ? "<svg>" : t === 3 ? "<math>" : "", i = j;
+  let o, i = t === 2 ? "<svg>" : t === 3 ? "<math>" : "", r = j;
   for (let c = 0; c < e; c++) {
     const l = s[c];
-    let f, b, p = -1, x = 0;
-    for (; x < l.length && (i.lastIndex = x, b = i.exec(l), b !== null); ) x = i.lastIndex, i === j ? b[1] === "!--" ? i = $t : b[1] !== void 0 ? i = wt : b[2] !== void 0 ? (Pt.test(b[2]) && (o = RegExp("</" + b[2], "g")), i = k) : b[3] !== void 0 && (i = k) : i === k ? b[0] === ">" ? (i = o ?? j, p = -1) : b[1] === void 0 ? p = -2 : (p = i.lastIndex - b[2].length, f = b[1], i = b[3] === void 0 ? k : b[3] === '"' ? _t : xt) : i === _t || i === xt ? i = k : i === $t || i === wt ? i = j : (i = k, o = void 0);
-    const S = i === k && s[c + 1].startsWith("/>") ? " " : "";
-    r += i === j ? l + Nt : p >= 0 ? (n.push(f), l.slice(0, p) + Ct + l.slice(p) + E + S) : l + E + (p === -2 ? c : S);
+    let f, v, p = -1, x = 0;
+    for (; x < l.length && (r.lastIndex = x, v = r.exec(l), v !== null); ) x = r.lastIndex, r === j ? v[1] === "!--" ? r = $t : v[1] !== void 0 ? r = wt : v[2] !== void 0 ? (Pt.test(v[2]) && (o = RegExp("</" + v[2], "g")), r = k) : v[3] !== void 0 && (r = k) : r === k ? v[0] === ">" ? (r = o ?? j, p = -1) : v[1] === void 0 ? p = -2 : (p = r.lastIndex - v[2].length, f = v[1], r = v[3] === void 0 ? k : v[3] === '"' ? _t : xt) : r === _t || r === xt ? r = k : r === $t || r === wt ? r = j : (r = k, o = void 0);
+    const S = r === k && s[c + 1].startsWith("/>") ? " " : "";
+    i += r === j ? l + Nt : p >= 0 ? (n.push(f), l.slice(0, p) + Ct + l.slice(p) + E + S) : l + E + (p === -2 ? c : S);
   }
-  return [kt(s, r + (s[e] || "<?>") + (t === 2 ? "</svg>" : t === 3 ? "</math>" : "")), n];
+  return [kt(s, i + (s[e] || "<?>") + (t === 2 ? "</svg>" : t === 3 ? "</math>" : "")), n];
 };
 class Z {
   constructor({ strings: t, _$litType$: e }, n) {
     let o;
     this.parts = [];
-    let r = 0, i = 0;
-    const c = t.length - 1, l = this.parts, [f, b] = Ft(t, e);
-    if (this.el = Z.createElement(f, n), B.currentNode = this.el.content, e === 2 || e === 3) {
+    let i = 0, r = 0;
+    const c = t.length - 1, l = this.parts, [f, v] = Vt(t, e);
+    if (this.el = Z.createElement(f, n), I.currentNode = this.el.content, e === 2 || e === 3) {
       const p = this.el.content.firstChild;
       p.replaceWith(...p.childNodes);
     }
-    for (; (o = B.nextNode()) !== null && l.length < c; ) {
+    for (; (o = I.nextNode()) !== null && l.length < c; ) {
       if (o.nodeType === 1) {
         if (o.hasAttributes()) for (const p of o.getAttributeNames()) if (p.endsWith(Ct)) {
-          const x = b[i++], S = o.getAttribute(p).split(E), K = /([.?@])?(.*)/.exec(x);
-          l.push({ type: 1, index: r, name: K[2], strings: S, ctor: K[1] === "." ? qt : K[1] === "?" ? Zt : K[1] === "@" ? Wt : Y }), o.removeAttribute(p);
-        } else p.startsWith(E) && (l.push({ type: 6, index: r }), o.removeAttribute(p));
+          const x = v[r++], S = o.getAttribute(p).split(E), K = /([.?@])?(.*)/.exec(x);
+          l.push({ type: 1, index: i, name: K[2], strings: S, ctor: K[1] === "." ? qt : K[1] === "?" ? Zt : K[1] === "@" ? Wt : Y }), o.removeAttribute(p);
+        } else p.startsWith(E) && (l.push({ type: 6, index: i }), o.removeAttribute(p));
         if (Pt.test(o.tagName)) {
           const p = o.textContent.split(E), x = p.length - 1;
           if (x > 0) {
-            o.textContent = J ? J.emptyScript : "";
-            for (let S = 0; S < x; S++) o.append(p[S], V()), B.nextNode(), l.push({ type: 2, index: ++r });
-            o.append(p[x], V());
+            o.textContent = Q ? Q.emptyScript : "";
+            for (let S = 0; S < x; S++) o.append(p[S], F()), I.nextNode(), l.push({ type: 2, index: ++i });
+            o.append(p[x], F());
           }
         }
-      } else if (o.nodeType === 8) if (o.data === Lt) l.push({ type: 2, index: r });
+      } else if (o.nodeType === 8) if (o.data === Lt) l.push({ type: 2, index: i });
       else {
         let p = -1;
-        for (; (p = o.data.indexOf(E, p + 1)) !== -1; ) l.push({ type: 7, index: r }), p += E.length - 1;
+        for (; (p = o.data.indexOf(E, p + 1)) !== -1; ) l.push({ type: 7, index: i }), p += E.length - 1;
       }
-      r++;
+      i++;
     }
   }
   static createElement(t, e) {
@@ -338,14 +338,14 @@ class Z {
     return n.innerHTML = t, n;
   }
 }
-function D(s, t, e = s, n) {
-  var i, c;
-  if (t === H) return t;
-  let o = n !== void 0 ? (i = e._$Co) == null ? void 0 : i[n] : e._$Cl;
-  const r = q(t) ? void 0 : t._$litDirective$;
-  return (o == null ? void 0 : o.constructor) !== r && ((c = o == null ? void 0 : o._$AO) == null || c.call(o, !1), r === void 0 ? o = void 0 : (o = new r(s), o._$AT(s, e, n)), n !== void 0 ? (e._$Co ?? (e._$Co = []))[n] = o : e._$Cl = o), o !== void 0 && (t = D(s, o._$AS(s, t.values), o, n)), t;
+function U(s, t, e = s, n) {
+  var r, c;
+  if (t === M) return t;
+  let o = n !== void 0 ? (r = e._$Co) == null ? void 0 : r[n] : e._$Cl;
+  const i = q(t) ? void 0 : t._$litDirective$;
+  return (o == null ? void 0 : o.constructor) !== i && ((c = o == null ? void 0 : o._$AO) == null || c.call(o, !1), i === void 0 ? o = void 0 : (o = new i(s), o._$AT(s, e, n)), n !== void 0 ? (e._$Co ?? (e._$Co = []))[n] = o : e._$Cl = o), o !== void 0 && (t = U(s, o._$AS(s, t.values), o, n)), t;
 }
-class Vt {
+class Ft {
   constructor(t, e) {
     this._$AV = [], this._$AN = void 0, this._$AD = t, this._$AM = e;
   }
@@ -357,23 +357,23 @@ class Vt {
   }
   u(t) {
     const { el: { content: e }, parts: n } = this._$AD, o = ((t == null ? void 0 : t.creationScope) ?? O).importNode(e, !0);
-    B.currentNode = o;
-    let r = B.nextNode(), i = 0, c = 0, l = n[0];
+    I.currentNode = o;
+    let i = I.nextNode(), r = 0, c = 0, l = n[0];
     for (; l !== void 0; ) {
-      if (i === l.index) {
+      if (r === l.index) {
         let f;
-        l.type === 2 ? f = new W(r, r.nextSibling, this, t) : l.type === 1 ? f = new l.ctor(r, l.name, l.strings, this, t) : l.type === 6 && (f = new Kt(r, this, t)), this._$AV.push(f), l = n[++c];
+        l.type === 2 ? f = new G(i, i.nextSibling, this, t) : l.type === 1 ? f = new l.ctor(i, l.name, l.strings, this, t) : l.type === 6 && (f = new Gt(i, this, t)), this._$AV.push(f), l = n[++c];
       }
-      i !== (l == null ? void 0 : l.index) && (r = B.nextNode(), i++);
+      r !== (l == null ? void 0 : l.index) && (i = I.nextNode(), r++);
     }
-    return B.currentNode = O, o;
+    return I.currentNode = O, o;
   }
   p(t) {
     let e = 0;
     for (const n of this._$AV) n !== void 0 && (n.strings !== void 0 ? (n._$AI(t, n, e), e += n.strings.length - 2) : n._$AI(t[e])), e++;
   }
 }
-class W {
+class G {
   get _$AU() {
     var t;
     return ((t = this._$AM) == null ? void 0 : t._$AU) ?? this._$Cv;
@@ -393,7 +393,7 @@ class W {
     return this._$AB;
   }
   _$AI(t, e = this) {
-    t = D(this, t, e), q(t) ? t === h || t == null || t === "" ? (this._$AH !== h && this._$AR(), this._$AH = h) : t !== this._$AH && t !== H && this._(t) : t._$litType$ !== void 0 ? this.$(t) : t.nodeType !== void 0 ? this.T(t) : jt(t) ? this.k(t) : this._(t);
+    t = U(this, t, e), q(t) ? t === h || t == null || t === "" ? (this._$AH !== h && this._$AR(), this._$AH = h) : t !== this._$AH && t !== M && this._(t) : t._$litType$ !== void 0 ? this.$(t) : t.nodeType !== void 0 ? this.T(t) : jt(t) ? this.k(t) : this._(t);
   }
   O(t) {
     return this._$AA.parentNode.insertBefore(t, this._$AB);
@@ -405,12 +405,12 @@ class W {
     this._$AH !== h && q(this._$AH) ? this._$AA.nextSibling.data = t : this.T(O.createTextNode(t)), this._$AH = t;
   }
   $(t) {
-    var r;
+    var i;
     const { values: e, _$litType$: n } = t, o = typeof n == "number" ? this._$AC(t) : (n.el === void 0 && (n.el = Z.createElement(kt(n.h, n.h[0]), this.options)), n);
-    if (((r = this._$AH) == null ? void 0 : r._$AD) === o) this._$AH.p(e);
+    if (((i = this._$AH) == null ? void 0 : i._$AD) === o) this._$AH.p(e);
     else {
-      const i = new Vt(o, this), c = i.u(this.options);
-      i.p(e), this.T(c), this._$AH = i;
+      const r = new Ft(o, this), c = r.u(this.options);
+      r.p(e), this.T(c), this._$AH = r;
     }
   }
   _$AC(t) {
@@ -418,10 +418,10 @@ class W {
     return e === void 0 && At.set(t.strings, e = new Z(t)), e;
   }
   k(t) {
-    pt(this._$AH) || (this._$AH = [], this._$AR());
+    ut(this._$AH) || (this._$AH = [], this._$AR());
     const e = this._$AH;
     let n, o = 0;
-    for (const r of t) o === e.length ? e.push(n = new W(this.O(V()), this.O(V()), this, this.options)) : n = e[o], n._$AI(r), o++;
+    for (const i of t) o === e.length ? e.push(n = new G(this.O(F()), this.O(F()), this, this.options)) : n = e[o], n._$AI(i), o++;
     o < e.length && (this._$AR(n && n._$AB.nextSibling, o), e.length = o);
   }
   _$AR(t = this._$AA.nextSibling, e) {
@@ -443,19 +443,19 @@ class Y {
   get _$AU() {
     return this._$AM._$AU;
   }
-  constructor(t, e, n, o, r) {
-    this.type = 1, this._$AH = h, this._$AN = void 0, this.element = t, this.name = e, this._$AM = o, this.options = r, n.length > 2 || n[0] !== "" || n[1] !== "" ? (this._$AH = Array(n.length - 1).fill(new String()), this.strings = n) : this._$AH = h;
+  constructor(t, e, n, o, i) {
+    this.type = 1, this._$AH = h, this._$AN = void 0, this.element = t, this.name = e, this._$AM = o, this.options = i, n.length > 2 || n[0] !== "" || n[1] !== "" ? (this._$AH = Array(n.length - 1).fill(new String()), this.strings = n) : this._$AH = h;
   }
   _$AI(t, e = this, n, o) {
-    const r = this.strings;
-    let i = !1;
-    if (r === void 0) t = D(this, t, e, 0), i = !q(t) || t !== this._$AH && t !== H, i && (this._$AH = t);
+    const i = this.strings;
+    let r = !1;
+    if (i === void 0) t = U(this, t, e, 0), r = !q(t) || t !== this._$AH && t !== M, r && (this._$AH = t);
     else {
       const c = t;
       let l, f;
-      for (t = r[0], l = 0; l < r.length - 1; l++) f = D(this, c[n + l], e, l), f === H && (f = this._$AH[l]), i || (i = !q(f) || f !== this._$AH[l]), f === h ? t = h : t !== h && (t += (f ?? "") + r[l + 1]), this._$AH[l] = f;
+      for (t = i[0], l = 0; l < i.length - 1; l++) f = U(this, c[n + l], e, l), f === M && (f = this._$AH[l]), r || (r = !q(f) || f !== this._$AH[l]), f === h ? t = h : t !== h && (t += (f ?? "") + i[l + 1]), this._$AH[l] = f;
     }
-    i && !o && this.j(t);
+    r && !o && this.j(t);
   }
   j(t) {
     t === h ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, t ?? "");
@@ -478,20 +478,20 @@ class Zt extends Y {
   }
 }
 class Wt extends Y {
-  constructor(t, e, n, o, r) {
-    super(t, e, n, o, r), this.type = 5;
+  constructor(t, e, n, o, i) {
+    super(t, e, n, o, i), this.type = 5;
   }
   _$AI(t, e = this) {
-    if ((t = D(this, t, e, 0) ?? h) === H) return;
-    const n = this._$AH, o = t === h && n !== h || t.capture !== n.capture || t.once !== n.once || t.passive !== n.passive, r = t !== h && (n === h || o);
-    o && this.element.removeEventListener(this.name, this, n), r && this.element.addEventListener(this.name, this, t), this._$AH = t;
+    if ((t = U(this, t, e, 0) ?? h) === M) return;
+    const n = this._$AH, o = t === h && n !== h || t.capture !== n.capture || t.once !== n.once || t.passive !== n.passive, i = t !== h && (n === h || o);
+    o && this.element.removeEventListener(this.name, this, n), i && this.element.addEventListener(this.name, this, t), this._$AH = t;
   }
   handleEvent(t) {
     var e;
     typeof this._$AH == "function" ? this._$AH.call(((e = this.options) == null ? void 0 : e.host) ?? this.element, t) : this._$AH.handleEvent(t);
   }
 }
-class Kt {
+class Gt {
   constructor(t, e, n) {
     this.element = t, this.type = 6, this._$AN = void 0, this._$AM = e, this.options = n;
   }
@@ -499,17 +499,17 @@ class Kt {
     return this._$AM._$AU;
   }
   _$AI(t) {
-    D(this, t);
+    U(this, t);
   }
 }
-const ot = F.litHtmlPolyfillSupport;
-ot == null || ot(Z, W), (F.litHtmlVersions ?? (F.litHtmlVersions = [])).push("3.3.0");
-const Gt = (s, t, e) => {
+const rt = V.litHtmlPolyfillSupport;
+rt == null || rt(Z, G), (V.litHtmlVersions ?? (V.litHtmlVersions = [])).push("3.3.0");
+const Kt = (s, t, e) => {
   const n = (e == null ? void 0 : e.renderBefore) ?? t;
   let o = n._$litPart$;
   if (o === void 0) {
-    const r = (e == null ? void 0 : e.renderBefore) ?? null;
-    n._$litPart$ = o = new W(t.insertBefore(V(), r), r, void 0, e ?? {});
+    const i = (e == null ? void 0 : e.renderBefore) ?? null;
+    n._$litPart$ = o = new G(t.insertBefore(F(), i), i, void 0, e ?? {});
   }
   return o._$AI(s), o;
 };
@@ -518,8 +518,8 @@ const Gt = (s, t, e) => {
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const I = globalThis;
-let m = class extends z {
+const B = globalThis;
+let m = class extends D {
   constructor() {
     super(...arguments), this.renderOptions = { host: this }, this._$Do = void 0;
   }
@@ -530,7 +530,7 @@ let m = class extends z {
   }
   update(t) {
     const e = this.render();
-    this.hasUpdated || (this.renderOptions.isConnected = this.isConnected), super.update(t), this._$Do = Gt(e, this.renderRoot, this.renderOptions);
+    this.hasUpdated || (this.renderOptions.isConnected = this.isConnected), super.update(t), this._$Do = Kt(e, this.renderRoot, this.renderOptions);
   }
   connectedCallback() {
     var t;
@@ -541,20 +541,20 @@ let m = class extends z {
     super.disconnectedCallback(), (t = this._$Do) == null || t.setConnected(!1);
   }
   render() {
-    return H;
+    return M;
   }
 };
 var St;
-m._$litElement$ = !0, m.finalized = !0, (St = I.litElementHydrateSupport) == null || St.call(I, { LitElement: m });
-const it = I.litElementPolyfillSupport;
+m._$litElement$ = !0, m.finalized = !0, (St = B.litElementHydrateSupport) == null || St.call(B, { LitElement: m });
+const it = B.litElementPolyfillSupport;
 it == null || it({ LitElement: m });
-(I.litElementVersions ?? (I.litElementVersions = [])).push("4.2.0");
+(B.litElementVersions ?? (B.litElementVersions = [])).push("4.2.0");
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const T = (s) => (t, e) => {
+const H = (s) => (t, e) => {
   e !== void 0 ? e.addInitializer(() => {
     customElements.define(s, t);
   }) : customElements.define(s, t);
@@ -564,31 +564,31 @@ const T = (s) => (t, e) => {
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const Xt = { attribute: !0, type: String, converter: X, reflect: !1, hasChanged: dt }, Jt = (s = Xt, t, e) => {
+const Xt = { attribute: !0, type: String, converter: J, reflect: !1, hasChanged: pt }, Jt = (s = Xt, t, e) => {
   const { kind: n, metadata: o } = e;
-  let r = globalThis.litPropertyMetadata.get(o);
-  if (r === void 0 && globalThis.litPropertyMetadata.set(o, r = /* @__PURE__ */ new Map()), n === "setter" && ((s = Object.create(s)).wrapped = !0), r.set(e.name, s), n === "accessor") {
-    const { name: i } = e;
+  let i = globalThis.litPropertyMetadata.get(o);
+  if (i === void 0 && globalThis.litPropertyMetadata.set(o, i = /* @__PURE__ */ new Map()), n === "setter" && ((s = Object.create(s)).wrapped = !0), i.set(e.name, s), n === "accessor") {
+    const { name: r } = e;
     return { set(c) {
       const l = t.get.call(this);
-      t.set.call(this, c), this.requestUpdate(i, l, s);
+      t.set.call(this, c), this.requestUpdate(r, l, s);
     }, init(c) {
-      return c !== void 0 && this.C(i, void 0, s, c), c;
+      return c !== void 0 && this.C(r, void 0, s, c), c;
     } };
   }
   if (n === "setter") {
-    const { name: i } = e;
+    const { name: r } = e;
     return function(c) {
-      const l = this[i];
-      t.call(this, c), this.requestUpdate(i, l, s);
+      const l = this[r];
+      t.call(this, c), this.requestUpdate(r, l, s);
     };
   }
   throw Error("Unsupported decorator location: " + n);
 };
 function a(s) {
-  return (t, e) => typeof e == "object" ? Jt(s, t, e) : ((n, o, r) => {
-    const i = o.hasOwnProperty(r);
-    return o.constructor.createProperty(r, n), i ? Object.getOwnPropertyDescriptor(o, r) : void 0;
+  return (t, e) => typeof e == "object" ? Jt(s, t, e) : ((n, o, i) => {
+    const r = o.hasOwnProperty(i);
+    return o.constructor.createProperty(i, n), r ? Object.getOwnPropertyDescriptor(o, i) : void 0;
   })(s, t, e);
 }
 /**
@@ -614,12 +614,12 @@ A`
  * Copyright 2023 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-const ut = Symbol("internals"), rt = Symbol("privateInternals");
+const ft = Symbol("internals"), at = Symbol("privateInternals");
 function te(s) {
   var t;
   class e extends s {
-    get [(t = ut, t)]() {
-      return this[rt] || (this[rt] = this.attachInternals()), this[rt];
+    get [(t = ft, t)]() {
+      return this[at] || (this[at] = this.attachInternals()), this[at];
     }
   }
   return e;
@@ -633,15 +633,15 @@ function ee(s) {
   s.addInitializer((t) => {
     const e = t;
     e.addEventListener("click", async (n) => {
-      const { type: o, [ut]: r } = e, { form: i } = r;
-      if (!(!i || o === "button") && (await new Promise((c) => {
+      const { type: o, [ft]: i } = e, { form: r } = i;
+      if (!(!r || o === "button") && (await new Promise((c) => {
         setTimeout(c);
       }), !n.defaultPrevented)) {
         if (o === "reset") {
-          i.reset();
+          r.reset();
           return;
         }
-        i.addEventListener(
+        r.addEventListener(
           "submit",
           (c) => {
             Object.defineProperty(c, "submitter", {
@@ -651,96 +651,46 @@ function ee(s) {
             });
           },
           { capture: !0, once: !0 }
-        ), r.setFormValue(e.value), i.requestSubmit();
+        ), i.setFormValue(e.value), r.requestSubmit();
       }
     });
   });
 }
-/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-const se = { CHILD: 2 }, ne = (s) => (...t) => ({ _$litDirective$: s, values: t });
-class oe {
-  constructor(t) {
-  }
-  get _$AU() {
-    return this._$AM._$AU;
-  }
-  _$AT(t, e, n) {
-    this._$Ct = t, this._$AM = e, this._$Ci = n;
-  }
-  _$AS(t, e) {
-    return this.update(t, e);
-  }
-  update(t, e) {
-    return this.render(...e);
-  }
-}
-/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-class at extends oe {
-  constructor(t) {
-    if (super(t), this.it = h, t.type !== se.CHILD) throw Error(this.constructor.directiveName + "() can only be used in child bindings");
-  }
-  render(t) {
-    if (t === h || t == null) return this._t = void 0, this.it = t;
-    if (t === H) return t;
-    if (typeof t != "string") throw Error(this.constructor.directiveName + "() called with a non-string value");
-    if (t === this.it) return this._t;
-    this.it = t;
-    const e = [t];
-    return e.raw = e, this._t = { _$litType$: this.constructor.resultType, strings: e, values: [] };
-  }
-}
-at.directiveName = "unsafeHTML", at.resultType = 1;
-/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-class lt extends at {
-}
-lt.directiveName = "unsafeSVG", lt.resultType = 2;
-const Q = ne(lt), ie = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+const se = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M8 3.6275C7.06799 0.971489 3.25399 -0.0226278 1.67414 2.30983C0.0877404 4.65197 1.67414 6.99412 2.62598 8.33249C3.0147 8.87905 8 14 8 14C8 14 12.9853 8.87905 13.374 8.33249C14.3259 6.99412 15.9123 4.65197 14.3259 2.30983C12.746 -0.0226277 8.97167 0.971489 8 3.6275Z" stroke="#3F2B2E" stroke-linecap="round"/>
 </svg>
-`, re = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+`, ne = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M16 8L4 0V16L16 8Z" fill="#3F2B2E"/>
 </svg>
-`, ae = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+`, oe = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M12.2266 8.16162C11.0953 9.26599 8.72489 11.8788 5.11546 16L4.63062 15.7172C5.78886 13.4007 7.17607 10.8283 8.79223 8C7.17607 5.17172 5.78886 2.59933 4.63062 0.282827L5.11546 0C8.72489 4.12121 11.0953 6.73401 12.2266 7.83838V8.16162Z" fill="#3F2B2E"/>
 </svg>
-`, le = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+`, re = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M5 7.83838C6.02128 6.73401 8.16109 4.12121 11.4195 0L11.8571 0.282829C10.8116 2.59933 9.55927 5.17172 8.1003 8C9.55927 10.8283 10.8115 13.4007 11.8571 15.7172L11.4195 16C8.16109 11.8788 6.02128 9.266 5 8.16162L5 7.83838Z" fill="#3F2B2E"/>
 </svg>
-`, ce = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+`, ie = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M12.2834 14.4585L7.98873 11.3928L3.69404 14.4585L5.33977 9.4972L1 6.39639H6.36554L8 1.4585L9.63446 6.39639H15L10.6602 9.4972L12.306 14.4585H12.2834ZM7.98873 10.328L10.6602 12.2353L9.64573 9.15787L12.2721 7.28568H9.02576L8 4.17317L6.97424 7.28568H3.72786L6.35427 9.15787L5.33977 12.2353L8.01127 10.328H7.98873Z" fill="#3F2B2E"/>
 </svg>
-`, he = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+`, ae = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M15 6.43789H9.63446L8 1.5L6.36554 6.43789H1L5.33977 9.5387L3.69404 14.5L7.98873 11.4343L12.2834 14.5H12.306L10.6602 9.5387L15 6.43789ZM6.36554 11.5396V7.32718H6.97424L8 4.21467L9.02576 7.32718H12.2721L9.64573 9.19937L10.6602 12.2768L8 10.3812L6.36554 11.5513V11.5396Z" fill="#3F2B2E"/>
 </svg>
-`, de = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+`, le = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M15 6.39639H9.63446L8 1.4585L6.36554 6.39639H1L5.33977 9.4972L3.69404 14.4585L7.98873 11.3928L12.2834 14.4585L10.6377 9.4972L14.9775 6.39639H15ZM10.6715 12.2353L8.05636 10.3631V4.32528L9.03704 7.27398H12.2834L9.65701 9.14616L10.6715 12.2236V12.2353Z" fill="#3F2B2E"/>
 </svg>
-`, pe = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+`, ce = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M15 6.43789H9.63446L8 1.5L6.36554 6.43789H1L5.33977 9.5387L3.69404 14.5L7.98873 11.4343L9.46538 12.4874L12.2834 14.5H12.306L10.6602 9.5387L15 6.43789ZM9.46538 11.4226V7.32718H12.2721L9.64573 9.19937L10.6602 12.2768L9.46538 11.4226Z" fill="#3F2B2E"/>
 </svg>
-`, ue = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+`, he = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M12.2834 14.4585L7.98873 11.3928L3.69404 14.4585L5.33977 9.4972L1 6.39639H6.36554L8 1.4585L9.63446 6.39639H15L10.6602 9.4972L12.306 14.4585H12.2834Z" fill="#3F2B2E"/>
 </svg>
-`, fe = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+`, de = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M2 2L14 14" stroke="#3F2B2E"/>
 <path d="M14 2L2 14" stroke="#3F2B2E"/>
 </svg>
-`, be = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+`, pe = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M7.12506 1C10.5018 1 13.2509 3.74834 13.251 7.125C13.2511 8.59738 12.7172 10.0206 11.7491 11.1299L14.8731 14.2539C15.0433 14.4253 15.0435 14.7018 14.8731 14.873C14.7913 14.9555 14.6797 15.002 14.5635 15.002C14.4475 15.0019 14.3357 14.9554 14.254 14.873L11.1309 11.749C10.0555 12.6818 8.6564 13.251 7.12506 13.251C3.7484 13.2508 1.00006 10.5017 1.00006 7.125C1.00025 3.74846 3.74852 1.00019 7.12506 1ZM7.12506 1.875C4.22971 1.87522 1.87506 4.23058 1.87506 7.12598C1.87532 10.0212 4.22987 12.3758 7.12506 12.376C10.0204 12.376 12.3758 10.0213 12.376 7.12598C12.376 4.23044 10.0206 1.875 7.12506 1.875Z" fill="#3F2B2E"/>
 </svg>
-`, ve = `<?xml version="1.0" encoding="utf-8"?>
+`, ue = `<?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: $$$/GeneralStr/196=Adobe Illustrator 27.6.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 40 40" style="enable-background:new 0 0 40 40;" xml:space="preserve">
@@ -750,7 +700,7 @@ const Q = ne(lt), ie = `<svg width="16" height="16" viewBox="0 0 16 16" fill="no
 <path class="st0" d="M27.3,19.3h-6.7v-6.7c0-0.4-0.3-0.7-0.7-0.7s-0.7,0.3-0.7,0.7v6.7h-6.7c-0.4,0-0.7,0.3-0.7,0.7s0.3,0.7,0.7,0.7
 	h6.7v6.7c0,0.4,0.3,0.7,0.7,0.7s0.7-0.3,0.7-0.7v-6.7h6.7c0.4,0,0.7-0.3,0.7-0.7S27.7,19.3,27.3,19.3z"/>
 </svg>
-`, ge = `<?xml version="1.0" encoding="utf-8"?>
+`, fe = `<?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: $$$/GeneralStr/196=Adobe Illustrator 27.6.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 40 40" style="enable-background:new 0 0 40 40;" xml:space="preserve">
@@ -759,247 +709,81 @@ const Q = ne(lt), ie = `<svg width="16" height="16" viewBox="0 0 16 16" fill="no
 </style>
 <path class="st0" d="M27.3,20.7H12.7c-0.4,0-0.7-0.3-0.7-0.7s0.3-0.7,0.7-0.7h14.7c0.4,0,0.7,0.3,0.7,0.7S27.7,20.7,27.3,20.7z"/>
 </svg>
-`, ft = {
-  wishlist: ie,
-  playerv: re,
-  chevronRight: ae,
-  chevronLeft: le,
-  icoPlus: ve,
-  icoMinus: ge,
-  "star-0": ce,
-  "star-25": he,
-  "star-50": de,
-  "star-75": pe,
-  "star-100": ue,
-  cross: fe,
-  search: be
+`, tt = {
+  wishlist: se,
+  playerv: ne,
+  chevronRight: oe,
+  chevronLeft: re,
+  icoPlus: ue,
+  icoMinus: fe,
+  "star-0": ie,
+  "star-25": ae,
+  "star-50": le,
+  "star-75": ce,
+  "star-100": he,
+  cross: de,
+  search: pe
 };
-var ye = Object.defineProperty, me = Object.getOwnPropertyDescriptor, L = (s, t, e, n) => {
-  for (var o = n > 1 ? void 0 : n ? me(t, e) : t, r = s.length - 1, i; r >= 0; r--)
-    (i = s[r]) && (o = (n ? i(t, e, o) : i(o)) || o);
-  return n && o && ye(t, e, o), o;
-};
-let $ = class extends m {
-  constructor() {
-    super(...arguments), this.bgstyle = "background-light", this.size = "medium", this.status = "empty", this.type = "button", this.strokewidth = "1", this.icon = "wishlist", this.disabled = !1;
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const ve = { CHILD: 2 }, be = (s) => (...t) => ({ _$litDirective$: s, values: t });
+class ge {
+  constructor(t) {
   }
-  updated(s) {
-    super.updated(s), this.style.setProperty("--icon-stroke-width", this.strokewidth);
+  get _$AU() {
+    return this._$AM._$AU;
   }
-  render() {
-    const s = ft[this.icon] ?? "", t = `icon-${this.icon}`, e = s.replace(
-      "<svg",
-      '<svg aria-hidden="true" focusable="false" part="svg"'
-    );
-    return d`
-			${this.type === "span" ? d`
-				<span class="icon icon-button ${this.size} ${this.bgstyle} ${this.status} ${t}" ?disabled="${this.disabled}">	
-					${Q(e)}
-				</span>
-			` : d`
-				<button
-					type="button"
-					aria-label="icon"
-					class="icon-button ${this.size} ${this.bgstyle} ${this.status} ${t}"
-					?disabled="${this.disabled}"
-				>
-					${Q(e)}
-				</button>
-			`}
-		`;
+  _$AT(t, e, n) {
+    this._$Ct = t, this._$AM = e, this._$Ci = n;
   }
+  _$AS(t, e) {
+    return this.update(t, e);
+  }
+  update(t, e) {
+    return this.render(...e);
+  }
+}
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+class lt extends ge {
+  constructor(t) {
+    if (super(t), this.it = h, t.type !== ve.CHILD) throw Error(this.constructor.directiveName + "() can only be used in child bindings");
+  }
+  render(t) {
+    if (t === h || t == null) return this._t = void 0, this.it = t;
+    if (t === M) return t;
+    if (typeof t != "string") throw Error(this.constructor.directiveName + "() called with a non-string value");
+    if (t === this.it) return this._t;
+    this.it = t;
+    const e = [t];
+    return e.raw = e, this._t = { _$litType$: this.constructor.resultType, strings: e, values: [] };
+  }
+}
+lt.directiveName = "unsafeHTML", lt.resultType = 1;
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+class ct extends lt {
+}
+ct.directiveName = "unsafeSVG", ct.resultType = 2;
+const W = be(ct);
+var ye = Object.defineProperty, me = Object.getOwnPropertyDescriptor, g = (s, t, e, n) => {
+  for (var o = n > 1 ? void 0 : n ? me(t, e) : t, i = s.length - 1, r; i >= 0; i--)
+    (r = s[i]) && (o = (n ? r(t, e, o) : r(o)) || o);
+  return n && o && ye(t, e, o), o;
 };
-$.styles = A`
-		:host {
-			display: inline-flex;
-			justify-content: center;
-			align-items: center;
-		}
-
-		.icon-button {
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			width: 32px;
-			height: 32px;
-			border: transparent;
-			border-radius: var(--radius-full);
-			cursor: pointer;
-			position: relative;
-
-			svg {
-				path {
-					stroke: var(--color-content-action-secondary);
-					stroke-width: var(--icon-stroke-width, 1);
-				}
-			}
-		}
-
-		.icon-button.filled svg {
-			fill: var(--color-content-action-secondary);
-		}
-
-		.icon-button.small {
-			width: 20px;
-			height: 20px;
-		}
-
-		.icon-button.medium {
-			width: 32px;
-			height: 32px;
-		}
-
-		.icon-button.large {
-			width: 40px;
-			height: 40px;
-		}
-
-		.icon-button.none-light, .icon-button.none-contrast {
-			background-color: transparent;
-			width: auto;
-			height: auto;
-
-			&.small {
-				svg {
-					width: 8px;
-					height: 8px;
-				}
-			}
-
-			&.medium {
-				svg {
-					width: 16px;
-					height: 16px;
-				}
-			}
-
-			&.large {
-				svg {
-					width: 24px;
-					height: 24px;
-				}
-			}
-
-			&:disabled {
-				background-color: transparent;	
-			}
-		}
-
-		.icon-button.none-light {
-			svg {
-				path {
-					stroke: var(--color-content-action-primary);
-					fill: var(--color-content-action-primary);
-				}
-			}
-		}
-
-		.icon-button.none-light.icon-wishlist svg path {
-			fill: none;
-		}
-
-		.icon-button.background-light {
-			background-color: var(--color-alpha-light-strong);
-
-			&:hover:not(:disabled) {
-				background-color: var(--color-alpha-light-stronger);
-			}
-
-			&:active:not(:disabled) {
-				background-color: var(--color-alpha-light-strongest);
-			}
-		}
-
-		.icon-button.background-contrast {
-			background-color: var(--color-container-action-tertiary-default);
-
-			&:hover:not(:disabled) {
-				background-color: var(--color-container-action-tertiary-hover);
-			}
-
-			&:active:not(:disabled) {
-				background-color: var(--color-container-action-tertiary-pressed);
-			}
-		}
-
-		.icon-button.ghost-light {
-			background-color: transparent;
-
-			svg {
-				path {
-					stroke: var(--color-content-action-primary);
-					fill: var(--color-content-action-primary);
-				}
-			}
-
-			&:hover:not(:disabled) {
-				background-color: var(--color-alpha-light-lightest);
-			}
-
-			&:active:not(:disabled) {
-				background-color: var(--color-alpha-light-light);
-			}
-		}
-
-		.icon-button.ghost-contrast {
-			background-color: transparent;
-
-			&:hover:not(:disabled) {
-				background-color: var(--color-alpha-light-medium);
-			}
-
-			&:active:not(:disabled) {
-				background-color: var(--color-alpha-light-strongest);
-			}
-		}
-
-		.icon-button:disabled {
-			background-color: var(--color-container-disabled);
-
-			svg {
-				fill: var(--color-content-disabled);
-
-				path {
-					stroke: var(--color-content-disabled);
-					fill: var(--color-content-disabled);
-				}
-			}
-			
-		}
-	`;
-L([
-  a({ type: String, reflect: !0 })
-], $.prototype, "bgstyle", 2);
-L([
-  a({ type: String, reflect: !0 })
-], $.prototype, "size", 2);
-L([
-  a({ type: String, reflect: !0 })
-], $.prototype, "status", 2);
-L([
-  a({ type: String, reflect: !0 })
-], $.prototype, "type", 2);
-L([
-  a({ type: String })
-], $.prototype, "strokewidth", 2);
-L([
-  a({ type: String })
-], $.prototype, "icon", 2);
-L([
-  a({ type: Boolean, reflect: !0 })
-], $.prototype, "disabled", 2);
-$ = L([
-  T("o-icon-button")
-], $);
-var $e = Object.defineProperty, we = Object.getOwnPropertyDescriptor, v = (s, t, e, n) => {
-  for (var o = n > 1 ? void 0 : n ? we(t, e) : t, r = s.length - 1, i; r >= 0; r--)
-    (i = s[r]) && (o = (n ? i(t, e, o) : i(o)) || o);
-  return n && o && $e(t, e, o), o;
-};
-const xe = te(m);
-let u = class extends xe {
+const $e = te(m);
+let u = class extends $e {
   constructor() {
-    super(...arguments), this.type = "submit", this.value = "", this.variant = "primary", this.text = "", this.textsecond = "", this.fullwidth = !1, this.disabled = !1, this.iconstrokewidth = "1", this.icon = "", this.startIcon = !1, this.endIcon = !1, this.iconSize = "small", this.panelTarget = "", this.href = "", this.target = "";
+    super(...arguments), this.type = "submit", this.value = "", this.variant = "primary", this.text = "", this.textsecond = "", this.fullwidth = !1, this.disabled = !1, this.startIconModel = "search", this.endIconModel = "chevronRight", this.startIcon = !1, this.endIcon = !1, this.panelTarget = "", this.href = "", this.target = "";
   }
   get name() {
     return this.getAttribute("name") ?? "";
@@ -1008,7 +792,7 @@ let u = class extends xe {
     this.setAttribute("name", s);
   }
   get form() {
-    return this[ut].form;
+    return this[ft].form;
   }
   handleClick() {
     if (this.panelTarget) {
@@ -1020,16 +804,13 @@ let u = class extends xe {
     return this.href ? this.renderLink() : this.renderButton();
   }
   renderIcon(s) {
-    return this.icon ? d`<o-icon-button
-      class=${s === "start" ? "icon-start" : "icon-end"}
-      icon=${this.icon}
-      bgstyle="${this.variant === "primary" ? "none-light" : "none-contrast"}"
-      size="${this.iconSize}"
-      strokewidth="${this.iconstrokewidth || "1"}"
-      type="span"
-      aria-hidden="true"
-      ?disabled=${this.disabled}
-    ></o-icon-button>` : h;
+    const t = s === "start" ? this.startIconModel : this.endIconModel;
+    if (!t) return h;
+    const e = tt[t].replace(
+      "<svg",
+      '<svg aria-hidden="true" focusable="false" part="svg"'
+    );
+    return d`<span class="${s === "start" ? "icon-start" : "icon-end"}">${W(e)}</span>`;
   }
   renderButton() {
     const s = this.text || this.textsecond;
@@ -1037,8 +818,8 @@ let u = class extends xe {
       <button type=${this.type} class="button" ?disabled=${this.disabled} @click=${this.handleClick}>
           ${this.startIcon ? this.renderIcon("start") : h}
           ${s ? d`
-                ${this.text ? d`<span>${this.text}</span>` : h}
-                ${this.textsecond ? d`<span>${this.textsecond}</span>` : h}
+                ${this.text ? d`<span class="text">${this.text}</span>` : h}
+                ${this.textsecond ? d`<span class="text">${this.textsecond}</span>` : h}
               ` : d`<slot></slot>`}
           ${this.endIcon ? this.renderIcon("end") : h}
       </button>
@@ -1084,6 +865,9 @@ u.styles = A`
       --button-text-hover: var(--color-content-action-primary);
       --button-border: transparent;
       --button-border-width: var(--border-m);
+      --button-padding: var(--spacing-l, 12px) var(--spacing-3-xl, 24px);
+      --button-starticon-svg-width: 0px; /* No SVG for primary button */
+      --button-endicon-svg-width: 0px; /* No SVG for primary button */
     }
 
     :host([variant="secondary"]) {
@@ -1094,6 +878,9 @@ u.styles = A`
       --button-text-hover: var(--color-content-action-secondary);
       --button-border: var(--color-border-secondary);
       --button-border-width: var(--border-m);
+      --button-padding: var(--spacing-l, 12px) var(--spacing-3-xl, 24px);
+      --button-starticon-svg-width: 16px;
+      --button-endicon-svg-width: 0px; /* No SVG for primary button */
     }
 
     :host([variant="ghost"]) {
@@ -1103,6 +890,9 @@ u.styles = A`
       --button-text: var(--color-content-action-secondary);
       --button-text-hover: var(--color-content-action-secondary);
       --button-border-width: 0;
+      --button-padding: var(--spacing-m, 10px) var(--spacing-xl, 16px);   
+      --button-starticon-svg-width: 16px;
+      --button-endicon-svg-width: 12px; /* No SVG for primary button */
     }
 
     :host([variant="tertiary"]) {
@@ -1112,6 +902,9 @@ u.styles = A`
       --button-text: var(--color-content-body);
       --button-text-hover: var(--color-content-action-tertiary);
       --button-border-width: 0;
+      --button-padding: var(--spacing-m, 10px) var(--spacing-l, 12px); 
+      --button-starticon-svg-width: 0px;
+      --button-endicon-svg-width: 8px; /* No SVG for primary button */
     }
 
     :host([disabled]),
@@ -1142,11 +935,11 @@ u.styles = A`
       font-weight: var(--font-weight-400);
       line-height: var(--line-height-200);
       min-width: 64px;
-      padding: var(--spacing-l, 12px) var(--spacing-3-xl, 24px);
+      padding: var(--button-padding); 
       cursor: inherit;
       box-sizing: border-box;
 
-      span, o-icon-button {
+      span {
         font-family: var(--font-family-loccitane-sans);
         font-size: var(--font-size-150);
         font-weight: var(--font-weight-400);
@@ -1154,6 +947,11 @@ u.styles = A`
       }
     }
 
+    .button:hover:not([disabled]) {
+      background-color: var(--button-bg-hover);
+      color: var(--button-text-hover);
+    }
+
     .button:active:not([disabled]) {
       background-color: var(--button-bg-pressed);
     }
@@ -1162,7 +960,7 @@ u.styles = A`
       ${Yt};
     }
 
-    span + span::before {
+    span.text + span.text::before {
       content: "•";
       margin-right: 8px;
     }
@@ -1173,11 +971,10 @@ u.styles = A`
       align-items: center;
     }
 
-    :host([variant="tertiary"][fullwidth][startIcon]) .button,
     :host([variant="tertiary"][fullwidth][endIcon]) .button {
       justify-content: space-between;
-      padding-left: 12px;
-      padding-right: 8px;
+      padding-left: 8px;
+      padding-right: 12px;
     }
 
     .button span {
@@ -1191,61 +988,74 @@ u.styles = A`
       display: inline-flex;
       align-items: center;
     }
+      
+    :host([variant="tertiary"][endIcon]) .button .icon-end {
+      width: var(--button-endicon-svg-width, 8px);
+    }
+
+    //Icon movment on hover
+    :host([variant="tertiary"][endIcon]) .icon-end {
+      display: inline-flex;
+      align-items: center;
+    }
+
+    :host([variant="tertiary"][endIcon]:hover) .icon-end {
+      transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+      transform: translateX(4px);
+    }
+    //End icon movment on hover
   `;
-v([
+g([
   a()
 ], u.prototype, "type", 2);
-v([
+g([
   a({ reflect: !0 })
 ], u.prototype, "value", 2);
-v([
+g([
   a({ type: String, reflect: !0 })
 ], u.prototype, "variant", 2);
-v([
+g([
   a({ type: String })
 ], u.prototype, "text", 2);
-v([
+g([
   a({ type: String })
 ], u.prototype, "textsecond", 2);
-v([
+g([
   a({ type: Boolean, reflect: !0 })
 ], u.prototype, "fullwidth", 2);
-v([
+g([
   a({ type: Boolean, reflect: !0 })
 ], u.prototype, "disabled", 2);
-v([
-  a({ type: String, attribute: "iconstrokewidth" })
-], u.prototype, "iconstrokewidth", 2);
-v([
-  a({ type: String })
-], u.prototype, "icon", 2);
-v([
+g([
+  a({ type: String, reflect: !0 })
+], u.prototype, "startIconModel", 2);
+g([
+  a({ type: String, reflect: !0 })
+], u.prototype, "endIconModel", 2);
+g([
   a({ type: Boolean, reflect: !0, attribute: "starticon" })
 ], u.prototype, "startIcon", 2);
-v([
+g([
   a({ type: Boolean, reflect: !0, attribute: "endicon" })
 ], u.prototype, "endIcon", 2);
-v([
-  a({ type: String, reflect: !0, attribute: "iconsize" })
-], u.prototype, "iconSize", 2);
-v([
+g([
   a({ type: String, attribute: "paneltarget", reflect: !0 })
 ], u.prototype, "panelTarget", 2);
-v([
+g([
   a({ type: String })
 ], u.prototype, "href", 2);
-v([
+g([
   a({ type: String })
 ], u.prototype, "target", 2);
-u = v([
-  T("o-button")
+u = g([
+  H("o-button")
 ], u);
-var _e = Object.defineProperty, Ae = Object.getOwnPropertyDescriptor, tt = (s, t, e, n) => {
-  for (var o = n > 1 ? void 0 : n ? Ae(t, e) : t, r = s.length - 1, i; r >= 0; r--)
-    (i = s[r]) && (o = (n ? i(t, e, o) : i(o)) || o);
-  return n && o && _e(t, e, o), o;
+var we = Object.defineProperty, xe = Object.getOwnPropertyDescriptor, et = (s, t, e, n) => {
+  for (var o = n > 1 ? void 0 : n ? xe(t, e) : t, i = s.length - 1, r; i >= 0; i--)
+    (r = s[i]) && (o = (n ? r(t, e, o) : r(o)) || o);
+  return n && o && we(t, e, o), o;
 };
-let U = class extends m {
+let z = class extends m {
   constructor() {
     super(...arguments), this.status = "empty", this.ariaDescribedBy = "a-product-name", this.label = "Add to wishlist", this.toggleStatus = () => {
       this.status = this.status === "empty" ? "filled" : "empty", this.setAttribute("aria-pressed", String(this.status === "filled")), this.dispatchEvent(new CustomEvent("wishlist-toggle", {
@@ -1265,14 +1075,14 @@ let U = class extends m {
     (s.key === "Enter" || s.key === " ") && (s.preventDefault(), this.toggleStatus());
   }
   render() {
-    const s = ft.wishlist.replace(
+    const s = tt.wishlist.replace(
       "<svg",
       '<svg aria-hidden="true" focusable="false" part="svg"'
     );
     return d`
 			<button type="button" aria-describedby="${this.ariaDescribedBy}" class="wishlist-button">
 				<span class="sr-only">${this.label}</span>
-				${Q(s)}
+				${W(s)}
 			</button>
 		`;
   }
@@ -1286,7 +1096,7 @@ let U = class extends m {
     this.label = s, this.requestUpdate();
   }
 };
-U.styles = A`
+z.styles = A`
 		:host {
 			display: inline-flex;
 			justify-content: center;
@@ -1346,21 +1156,238 @@ U.styles = A`
 			white-space: nowrap !important;
 		}
 	`;
-tt([
+et([
+  a({ type: String, reflect: !0 })
+], z.prototype, "status", 2);
+et([
+  a({ type: String, reflect: !0 })
+], z.prototype, "ariaDescribedBy", 2);
+et([
+  a({ type: String, reflect: !0 })
+], z.prototype, "label", 2);
+z = et([
+  H("o-wishlist-button")
+], z);
+var _e = Object.defineProperty, Ae = Object.getOwnPropertyDescriptor, L = (s, t, e, n) => {
+  for (var o = n > 1 ? void 0 : n ? Ae(t, e) : t, i = s.length - 1, r; i >= 0; i--)
+    (r = s[i]) && (o = (n ? r(t, e, o) : r(o)) || o);
+  return n && o && _e(t, e, o), o;
+};
+let $ = class extends m {
+  constructor() {
+    super(...arguments), this.bgstyle = "background-light", this.size = "medium", this.status = "empty", this.type = "button", this.strokewidth = "1", this.icon = "wishlist", this.disabled = !1;
+  }
+  updated(s) {
+    super.updated(s), this.style.setProperty("--icon-stroke-width", this.strokewidth);
+  }
+  render() {
+    const s = tt[this.icon] ?? "", t = `icon-${this.icon}`, e = s.replace(
+      "<svg",
+      '<svg aria-hidden="true" focusable="false" part="svg"'
+    );
+    return d`
+			${this.type === "span" ? d`
+				<span class="icon icon-button ${this.size} ${this.bgstyle} ${this.status} ${t}" ?disabled="${this.disabled}">	
+					${W(e)}
+				</span>
+			` : d`
+				<button
+					type="button"
+					aria-label="icon"
+					class="icon-button ${this.size} ${this.bgstyle} ${this.status} ${t}"
+					?disabled="${this.disabled}"
+				>
+					${W(e)}
+				</button>
+			`}
+		`;
+  }
+};
+$.styles = A`
+		:host {
+			display: inline-flex;
+			justify-content: center;
+			align-items: center;
+		}
+
+		.icon-button {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			width: 32px;
+			height: 32px;
+			border: transparent;
+			border-radius: var(--radius-full);
+			cursor: pointer;
+			position: relative;
+
+			svg {
+				path {
+					stroke: var(--color-content-action-secondary);
+					stroke-width: var(--icon-stroke-width, 1);
+				}
+			}
+		}
+
+		.icon-button.filled svg {
+			fill: var(--color-content-action-secondary);
+		}
+
+		.icon-button.small {
+			width: 20px;
+			height: 20px;
+		}
+
+		.icon-button.medium {
+			width: 32px;
+			height: 32px;
+		}
+
+		.icon-button.large {
+			width: 40px;
+			height: 40px;
+		}
+
+		.icon-button.none-light, .icon-button.none-contrast {
+			background-color: transparent;
+			width: auto;
+			height: auto;
+
+			&.small {
+				svg {
+					width: 8px;
+					height: 8px;
+				}
+			}
+
+			&.medium {
+				svg {
+					width: 16px;
+					height: 16px;
+				}
+			}
+
+			&.large {
+				svg {
+					width: 24px;
+					height: 24px;
+				}
+			}
+
+			&:disabled {
+				background-color: transparent;	
+			}
+		}
+
+		.icon-button.none-light {
+			svg {
+				path {
+					stroke: var(--color-content-action-primary);
+					fill: var(--color-content-action-primary);
+				}
+			}
+		}
+
+		.icon-button.none-light.icon-wishlist svg path {
+			fill: none;
+		}
+
+		.icon-button.background-light {
+			background-color: var(--color-alpha-light-strong);
+
+			&:hover:not(:disabled) {
+				background-color: var(--color-alpha-light-stronger);
+			}
+
+			&:active:not(:disabled) {
+				background-color: var(--color-alpha-light-strongest);
+			}
+		}
+
+		.icon-button.background-contrast {
+			background-color: var(--color-container-action-tertiary-default);
+
+			&:hover:not(:disabled) {
+				background-color: var(--color-container-action-tertiary-hover);
+			}
+
+			&:active:not(:disabled) {
+				background-color: var(--color-container-action-tertiary-pressed);
+			}
+		}
+
+		.icon-button.ghost-light {
+			background-color: transparent;
+
+			svg {
+				path {
+					stroke: var(--color-content-action-primary);
+					fill: var(--color-content-action-primary);
+				}
+			}
+
+			&:hover:not(:disabled) {
+				background-color: var(--color-alpha-light-lightest);
+			}
+
+			&:active:not(:disabled) {
+				background-color: var(--color-alpha-light-light);
+			}
+		}
+
+		.icon-button.ghost-contrast {
+			background-color: transparent;
+
+			&:hover:not(:disabled) {
+				background-color: var(--color-alpha-light-medium);
+			}
+
+			&:active:not(:disabled) {
+				background-color: var(--color-alpha-light-strongest);
+			}
+		}
+
+		.icon-button:disabled {
+			background-color: var(--color-container-disabled);
+
+			svg {
+				fill: var(--color-content-disabled);
+
+				path {
+					stroke: var(--color-content-disabled);
+					fill: var(--color-content-disabled);
+				}
+			}
+			
+		}
+	`;
+L([
+  a({ type: String, reflect: !0 })
+], $.prototype, "bgstyle", 2);
+L([
   a({ type: String, reflect: !0 })
-], U.prototype, "status", 2);
-tt([
+], $.prototype, "size", 2);
+L([
   a({ type: String, reflect: !0 })
-], U.prototype, "ariaDescribedBy", 2);
-tt([
+], $.prototype, "status", 2);
+L([
   a({ type: String, reflect: !0 })
-], U.prototype, "label", 2);
-U = tt([
-  T("o-wishlist-button")
-], U);
-var Se = Object.defineProperty, Ee = Object.getOwnPropertyDescriptor, M = (s, t, e, n) => {
-  for (var o = n > 1 ? void 0 : n ? Ee(t, e) : t, r = s.length - 1, i; r >= 0; r--)
-    (i = s[r]) && (o = (n ? i(t, e, o) : i(o)) || o);
+], $.prototype, "type", 2);
+L([
+  a({ type: String })
+], $.prototype, "strokewidth", 2);
+L([
+  a({ type: String })
+], $.prototype, "icon", 2);
+L([
+  a({ type: Boolean, reflect: !0 })
+], $.prototype, "disabled", 2);
+$ = L([
+  H("o-icon-button")
+], $);
+var Se = Object.defineProperty, Ee = Object.getOwnPropertyDescriptor, T = (s, t, e, n) => {
+  for (var o = n > 1 ? void 0 : n ? Ee(t, e) : t, i = s.length - 1, r; i >= 0; i--)
+    (r = s[i]) && (o = (n ? r(t, e, o) : r(o)) || o);
   return n && o && Se(t, e, o), o;
 };
 let _ = class extends m {
@@ -1481,30 +1508,30 @@ _.styles = A`
         }
         /* End of underline effect */
     `;
-M([
+T([
   a({ type: String })
 ], _.prototype, "href", 2);
-M([
+T([
   a({ type: String })
 ], _.prototype, "target", 2);
-M([
+T([
   a({ type: String, reflect: !0 })
 ], _.prototype, "template", 2);
-M([
+T([
   a({ type: Boolean, reflect: !0 })
 ], _.prototype, "inverse", 2);
-M([
+T([
   a({ type: Boolean, reflect: !0 })
 ], _.prototype, "endIcon", 2);
-M([
+T([
   a({ type: Boolean, reflect: !0 })
 ], _.prototype, "reverseEndIcon", 2);
-_ = M([
-  T("o-link")
+_ = T([
+  H("o-link")
 ], _);
-var Ce = Object.defineProperty, Le = Object.getOwnPropertyDescriptor, et = (s, t, e, n) => {
-  for (var o = n > 1 ? void 0 : n ? Le(t, e) : t, r = s.length - 1, i; r >= 0; r--)
-    (i = s[r]) && (o = (n ? i(t, e, o) : i(o)) || o);
+var Ce = Object.defineProperty, Le = Object.getOwnPropertyDescriptor, st = (s, t, e, n) => {
+  for (var o = n > 1 ? void 0 : n ? Le(t, e) : t, i = s.length - 1, r; i >= 0; i--)
+    (r = s[i]) && (o = (n ? r(t, e, o) : r(o)) || o);
   return n && o && Ce(t, e, o), o;
 };
 let N = class extends m {
@@ -1526,7 +1553,7 @@ let N = class extends m {
 			<div class="rating">
 			<div class="stars">
 				${s.map(
-      (t) => d`<span class="star">${Q(ft[t] ?? "")}</span>`
+      (t) => d`<span class="star">${W(tt[t] ?? "")}</span>`
     )}
 			</div>
 			${this.reviewCount != null && this.href != null ? d`<o-link template="review" href="${this.href}">${this.reviewCount}</o-link>` : null}
@@ -1568,24 +1595,24 @@ N.styles = A`
 			cursor: pointer;
 		}
 	`;
-et([
+st([
   a({ type: Number })
 ], N.prototype, "rating", 2);
-et([
+st([
   a({ type: String })
 ], N.prototype, "reviewCount", 2);
-et([
+st([
   a({ type: String })
 ], N.prototype, "href", 2);
-N = et([
-  T("o-rating")
+N = st([
+  H("o-rating")
 ], N);
 var Pe = Object.defineProperty, ke = Object.getOwnPropertyDescriptor, y = (s, t, e, n) => {
-  for (var o = n > 1 ? void 0 : n ? ke(t, e) : t, r = s.length - 1, i; r >= 0; r--)
-    (i = s[r]) && (o = (n ? i(t, e, o) : i(o)) || o);
+  for (var o = n > 1 ? void 0 : n ? ke(t, e) : t, i = s.length - 1, r; i >= 0; i--)
+    (r = s[i]) && (o = (n ? r(t, e, o) : r(o)) || o);
   return n && o && Pe(t, e, o), o;
 };
-let g = class extends m {
+let b = class extends m {
   constructor() {
     super(...arguments), this.open = !1, this.showHeader = !0, this.showFooter = !1, this.headerTitle = "", this.closeButtonLabel = "Close the modal", this.firstButtonLabel = "Close", this.firstButtonVariant = "primary", this.secondaryButtonLabel = "", this.secondaryButtonVariant = "secondary", this.disablePortal = !1, this.previousFocusedElement = null, this.handleKeyDown = (s) => {
       this.open && (s.key === "Escape" ? this.closePanel() : s.key === "Tab" && this.trapFocus(s));
@@ -1675,7 +1702,7 @@ let g = class extends m {
 		`;
   }
 };
-g.styles = A`
+b.styles = A`
 		:host {
 			position: fixed;
 			top: 0;
@@ -1771,47 +1798,47 @@ g.styles = A`
 	`;
 y([
   a({ type: Boolean, reflect: !0 })
-], g.prototype, "open", 2);
+], b.prototype, "open", 2);
 y([
   a({ type: Boolean, reflect: !0 })
-], g.prototype, "showHeader", 2);
+], b.prototype, "showHeader", 2);
 y([
   a({ type: Boolean, reflect: !0 })
-], g.prototype, "showFooter", 2);
+], b.prototype, "showFooter", 2);
 y([
   a({ type: String, reflect: !0 })
-], g.prototype, "headerTitle", 2);
+], b.prototype, "headerTitle", 2);
 y([
   a({ type: String, reflect: !0 })
-], g.prototype, "closeButtonLabel", 2);
+], b.prototype, "closeButtonLabel", 2);
 y([
   a({ type: String, reflect: !0 })
-], g.prototype, "firstButtonLabel", 2);
+], b.prototype, "firstButtonLabel", 2);
 y([
   a({ type: String, reflect: !0 })
-], g.prototype, "firstButtonVariant", 2);
+], b.prototype, "firstButtonVariant", 2);
 y([
   a({ type: Function })
-], g.prototype, "onFirstButtonClick", 2);
+], b.prototype, "onFirstButtonClick", 2);
 y([
   a({ type: String, reflect: !0 })
-], g.prototype, "secondaryButtonLabel", 2);
+], b.prototype, "secondaryButtonLabel", 2);
 y([
   a({ type: String, reflect: !0 })
-], g.prototype, "secondaryButtonVariant", 2);
+], b.prototype, "secondaryButtonVariant", 2);
 y([
   a({ type: Function })
-], g.prototype, "onSecondaryButtonClick", 2);
+], b.prototype, "onSecondaryButtonClick", 2);
 y([
   a({ type: Boolean, reflect: !0 })
-], g.prototype, "disablePortal", 2);
-g = y([
-  T("o-side-panel")
-], g);
-var Be = Object.defineProperty, Ie = Object.getOwnPropertyDescriptor, P = (s, t, e, n) => {
-  for (var o = n > 1 ? void 0 : n ? Ie(t, e) : t, r = s.length - 1, i; r >= 0; r--)
-    (i = s[r]) && (o = (n ? i(t, e, o) : i(o)) || o);
-  return n && o && Be(t, e, o), o;
+], b.prototype, "disablePortal", 2);
+b = y([
+  H("o-side-panel")
+], b);
+var Ie = Object.defineProperty, Be = Object.getOwnPropertyDescriptor, P = (s, t, e, n) => {
+  for (var o = n > 1 ? void 0 : n ? Be(t, e) : t, i = s.length - 1, r; i >= 0; i--)
+    (r = s[i]) && (o = (n ? r(t, e, o) : r(o)) || o);
+  return n && o && Ie(t, e, o), o;
 };
 let w = class extends m {
   constructor() {
@@ -1960,5 +1987,5 @@ P([
   Qt()
 ], w.prototype, "focusedIndex", 2);
 w = P([
-  T("thumbnail-navigation")
+  H("thumbnail-navigation")
 ], w);