@florid-kit/components 0.8.41 → 0.8.44

package/index.mjs

@@ -3,7 +3,7 @@
  * Copyright 2019 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const vt = globalThis, Pt = vt.ShadowRoot && (vt.ShadyCSS === void 0 || vt.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, It = Symbol(), Vt = /* @__PURE__ */ new WeakMap();
+const ft = globalThis, Pt = ft.ShadowRoot && (ft.ShadyCSS === void 0 || ft.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, It = Symbol(), Vt = /* @__PURE__ */ new WeakMap();
 let oe = class {
   constructor(t, e, n) {
     if (this._$cssResult$ = !0, n !== It) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
@@ -22,7 +22,7 @@ let oe = class {
     return this.cssText;
   }
 };
-const ce = (o) => new oe(typeof o == "string" ? o : o + "", void 0, It), b = (o, ...t) => {
+const ce = (o) => new oe(typeof o == "string" ? o : o + "", void 0, It), y = (o, ...t) => {
   const e = o.length === 1 ? o[0] : t.reduce((n, i, r) => n + ((s) => {
     if (s._$cssResult$ === !0) return s.cssText;
     if (typeof s == "number") return s;
@@ -32,7 +32,7 @@ const ce = (o) => new oe(typeof o == "string" ? o : o + "", void 0, It), b = (o,
 }, he = (o, t) => {
   if (Pt) o.adoptedStyleSheets = t.map((e) => e instanceof CSSStyleSheet ? e : e.styleSheet);
   else for (const e of t) {
-    const n = document.createElement("style"), i = vt.litNonce;
+    const n = document.createElement("style"), i = ft.litNonce;
     i !== void 0 && n.setAttribute("nonce", i), n.textContent = e.cssText, o.appendChild(n);
   }
 }, Zt = Pt ? (o) => o : (o) => o instanceof CSSStyleSheet ? ((t) => {
@@ -45,7 +45,7 @@ const ce = (o) => new oe(typeof o == "string" ? o : o + "", void 0, It), b = (o,
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const { is: de, defineProperty: pe, getOwnPropertyDescriptor: ue, getOwnPropertyNames: ve, getOwnPropertySymbols: fe, getPrototypeOf: be } = Object, U = globalThis, qt = U.trustedTypes, ge = qt ? qt.emptyScript : "", $t = U.reactiveElementPolyfillSupport, ot = (o, t) => o, ft = { toAttribute(o, t) {
+const { is: de, defineProperty: pe, getOwnPropertyDescriptor: ue, getOwnPropertyNames: ve, getOwnPropertySymbols: fe, getPrototypeOf: be } = Object, U = globalThis, qt = U.trustedTypes, ge = qt ? qt.emptyScript : "", $t = U.reactiveElementPolyfillSupport, ot = (o, t) => o, bt = { toAttribute(o, t) {
   switch (t) {
     case Boolean:
       o = o ? ge : null;
@@ -73,7 +73,7 @@ const { is: de, defineProperty: pe, getOwnPropertyDescriptor: ue, getOwnProperty
       }
   }
   return e;
-} }, Ot = (o, t) => !de(o, t), Wt = { attribute: !0, type: String, converter: ft, reflect: !1, useDefault: !1, hasChanged: Ot };
+} }, Ot = (o, t) => !de(o, t), Wt = { attribute: !0, type: String, converter: bt, reflect: !1, useDefault: !1, hasChanged: Ot };
 Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), U.litPropertyMetadata ?? (U.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
 let J = class extends HTMLElement {
   static addInitializer(t) {
@@ -184,7 +184,7 @@ let J = class extends HTMLElement {
     var r;
     const n = this.constructor.elementProperties.get(t), i = this.constructor._$Eu(t, n);
     if (i !== void 0 && n.reflect === !0) {
-      const s = (((r = n.converter) == null ? void 0 : r.toAttribute) !== void 0 ? n.converter : ft).toAttribute(e, n.type);
+      const s = (((r = n.converter) == null ? void 0 : r.toAttribute) !== void 0 ? n.converter : bt).toAttribute(e, n.type);
       this._$Em = t, s == null ? this.removeAttribute(i) : this.setAttribute(i, s), this._$Em = null;
     }
   }
@@ -192,7 +192,7 @@ let J = class extends HTMLElement {
     var r, s;
     const n = this.constructor, i = n._$Eh.get(t);
     if (i !== void 0 && this._$Em !== i) {
-      const h = n.getPropertyOptions(i), c = typeof h.converter == "function" ? { fromAttribute: h.converter } : ((r = h.converter) == null ? void 0 : r.fromAttribute) !== void 0 ? h.converter : ft;
+      const h = n.getPropertyOptions(i), c = typeof h.converter == "function" ? { fromAttribute: h.converter } : ((r = h.converter) == null ? void 0 : r.fromAttribute) !== void 0 ? h.converter : bt;
       this._$Em = i, this[i] = c.fromAttribute(e, h.type) ?? ((s = this._$Ej) == null ? void 0 : s.get(i)) ?? null, this._$Em = null;
     }
   }
@@ -282,9 +282,9 @@ J.elementStyles = [], J.shadowRootOptions = { mode: "open" }, J[ot("elementPrope
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const it = globalThis, bt = it.trustedTypes, Kt = bt ? bt.createPolicy("lit-html", { createHTML: (o) => o }) : void 0, ie = "$lit$", j = `lit$${Math.random().toFixed(9).slice(2)}$`, ne = "?" + j, ye = `<${ne}>`, W = document, rt = () => W.createComment(""), st = (o) => o === null || typeof o != "object" && typeof o != "function", Bt = Array.isArray, me = (o) => Bt(o) || typeof (o == null ? void 0 : o[Symbol.iterator]) == "function", _t = `[ 	
+const it = globalThis, gt = it.trustedTypes, Kt = gt ? gt.createPolicy("lit-html", { createHTML: (o) => o }) : void 0, ie = "$lit$", j = `lit$${Math.random().toFixed(9).slice(2)}$`, ne = "?" + j, ye = `<${ne}>`, W = document, rt = () => W.createComment(""), st = (o) => o === null || typeof o != "object" && typeof o != "function", Bt = Array.isArray, me = (o) => Bt(o) || typeof (o == null ? void 0 : o[Symbol.iterator]) == "function", _t = `[ 	
 \f\r]`, et = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, Gt = /-->/g, Xt = />/g, V = RegExp(`>|${_t}(?:([^\\s"'>=/]+)(${_t}*=${_t}*(?:[^ 	
-\f\r"'\`<>=]|("|')|))|$)`, "g"), Jt = /'/g, Qt = /"/g, re = /^(?:script|style|textarea|title)$/i, xe = (o) => (t, ...e) => ({ _$litType$: o, strings: t, values: e }), l = xe(1), N = Symbol.for("lit-noChange"), d = Symbol.for("lit-nothing"), Yt = /* @__PURE__ */ new WeakMap(), Z = W.createTreeWalker(W, 129);
+\f\r"'\`<>=]|("|')|))|$)`, "g"), Jt = /'/g, Qt = /"/g, re = /^(?:script|style|textarea|title)$/i, xe = (o) => (t, ...e) => ({ _$litType$: o, strings: t, values: e }), l = xe(1), F = Symbol.for("lit-noChange"), d = Symbol.for("lit-nothing"), Yt = /* @__PURE__ */ new WeakMap(), Z = W.createTreeWalker(W, 129);
 function se(o, t) {
   if (!Bt(o) || !o.hasOwnProperty("raw")) throw Error("invalid template strings array");
   return Kt !== void 0 ? Kt.createHTML(t) : t;
@@ -294,10 +294,10 @@ const we = (o, t) => {
   let i, r = t === 2 ? "<svg>" : t === 3 ? "<math>" : "", s = et;
   for (let h = 0; h < e; h++) {
     const c = o[h];
-    let y, m, p = -1, B = 0;
-    for (; B < c.length && (s.lastIndex = B, m = s.exec(c), m !== null); ) B = s.lastIndex, s === et ? m[1] === "!--" ? s = Gt : m[1] !== void 0 ? s = Xt : m[2] !== void 0 ? (re.test(m[2]) && (i = RegExp("</" + m[2], "g")), s = V) : m[3] !== void 0 && (s = V) : s === V ? m[0] === ">" ? (s = i ?? et, p = -1) : m[1] === void 0 ? p = -2 : (p = s.lastIndex - m[2].length, y = m[1], s = m[3] === void 0 ? V : m[3] === '"' ? Qt : Jt) : s === Qt || s === Jt ? s = V : s === Gt || s === Xt ? s = et : (s = V, i = void 0);
-    const M = s === V && o[h + 1].startsWith("/>") ? " " : "";
-    r += s === et ? c + ye : p >= 0 ? (n.push(y), c.slice(0, p) + ie + c.slice(p) + j + M) : c + j + (p === -2 ? h : M);
+    let v, g, p = -1, $ = 0;
+    for (; $ < c.length && (s.lastIndex = $, g = s.exec(c), g !== null); ) $ = s.lastIndex, s === et ? g[1] === "!--" ? s = Gt : g[1] !== void 0 ? s = Xt : g[2] !== void 0 ? (re.test(g[2]) && (i = RegExp("</" + g[2], "g")), s = V) : g[3] !== void 0 && (s = V) : s === V ? g[0] === ">" ? (s = i ?? et, p = -1) : g[1] === void 0 ? p = -2 : (p = s.lastIndex - g[2].length, v = g[1], s = g[3] === void 0 ? V : g[3] === '"' ? Qt : Jt) : s === Qt || s === Jt ? s = V : s === Gt || s === Xt ? s = et : (s = V, i = void 0);
+    const E = s === V && o[h + 1].startsWith("/>") ? " " : "";
+    r += s === et ? c + ye : p >= 0 ? (n.push(v), c.slice(0, p) + ie + c.slice(p) + j + E) : c + j + (p === -2 ? h : E);
   }
   return [se(o, r + (o[e] || "<?>") + (t === 2 ? "</svg>" : t === 3 ? "</math>" : "")), n];
 };
@@ -306,23 +306,23 @@ class at {
     let i;
     this.parts = [];
     let r = 0, s = 0;
-    const h = t.length - 1, c = this.parts, [y, m] = we(t, e);
-    if (this.el = at.createElement(y, n), Z.currentNode = this.el.content, e === 2 || e === 3) {
+    const h = t.length - 1, c = this.parts, [v, g] = we(t, e);
+    if (this.el = at.createElement(v, n), Z.currentNode = this.el.content, e === 2 || e === 3) {
       const p = this.el.content.firstChild;
       p.replaceWith(...p.childNodes);
     }
     for (; (i = Z.nextNode()) !== null && c.length < h; ) {
       if (i.nodeType === 1) {
         if (i.hasAttributes()) for (const p of i.getAttributeNames()) if (p.endsWith(ie)) {
-          const B = m[s++], M = i.getAttribute(p).split(j), ut = /([.?@])?(.*)/.exec(B);
-          c.push({ type: 1, index: r, name: ut[2], strings: M, ctor: ut[1] === "." ? _e : ut[1] === "?" ? Ce : ut[1] === "@" ? ke : yt }), i.removeAttribute(p);
+          const $ = g[s++], E = i.getAttribute(p).split(j), vt = /([.?@])?(.*)/.exec($);
+          c.push({ type: 1, index: r, name: vt[2], strings: E, ctor: vt[1] === "." ? _e : vt[1] === "?" ? Ce : vt[1] === "@" ? ke : mt }), i.removeAttribute(p);
         } else p.startsWith(j) && (c.push({ type: 6, index: r }), i.removeAttribute(p));
         if (re.test(i.tagName)) {
-          const p = i.textContent.split(j), B = p.length - 1;
-          if (B > 0) {
-            i.textContent = bt ? bt.emptyScript : "";
-            for (let M = 0; M < B; M++) i.append(p[M], rt()), Z.nextNode(), c.push({ type: 2, index: ++r });
-            i.append(p[B], rt());
+          const p = i.textContent.split(j), $ = p.length - 1;
+          if ($ > 0) {
+            i.textContent = gt ? gt.emptyScript : "";
+            for (let E = 0; E < $; E++) i.append(p[E], rt()), Z.nextNode(), c.push({ type: 2, index: ++r });
+            i.append(p[$], rt());
           }
         }
       } else if (i.nodeType === 8) if (i.data === ne) c.push({ type: 2, index: r });
@@ -340,7 +340,7 @@ class at {
 }
 function Q(o, t, e = o, n) {
   var s, h;
-  if (t === N) return t;
+  if (t === F) return t;
   let i = n !== void 0 ? (s = e._$Co) == null ? void 0 : s[n] : e._$Cl;
   const r = st(t) ? void 0 : t._$litDirective$;
   return (i == null ? void 0 : i.constructor) !== r && ((h = i == null ? void 0 : i._$AO) == null || h.call(i, !1), r === void 0 ? i = void 0 : (i = new r(o), i._$AT(o, e, n)), n !== void 0 ? (e._$Co ?? (e._$Co = []))[n] = i : e._$Cl = i), i !== void 0 && (t = Q(o, i._$AS(o, t.values), i, n)), t;
@@ -361,8 +361,8 @@ class $e {
     let r = Z.nextNode(), s = 0, h = 0, c = n[0];
     for (; c !== void 0; ) {
       if (s === c.index) {
-        let y;
-        c.type === 2 ? y = new pt(r, r.nextSibling, this, t) : c.type === 1 ? y = new c.ctor(r, c.name, c.strings, this, t) : c.type === 6 && (y = new Ae(r, this, t)), this._$AV.push(y), c = n[++h];
+        let v;
+        c.type === 2 ? v = new pt(r, r.nextSibling, this, t) : c.type === 1 ? v = new c.ctor(r, c.name, c.strings, this, t) : c.type === 6 && (v = new Ae(r, this, t)), this._$AV.push(v), c = n[++h];
       }
       s !== (c == null ? void 0 : c.index) && (r = Z.nextNode(), s++);
     }
@@ -393,7 +393,7 @@ class pt {
     return this._$AB;
   }
   _$AI(t, e = this) {
-    t = Q(this, t, e), st(t) ? t === d || t == null || t === "" ? (this._$AH !== d && this._$AR(), this._$AH = d) : t !== this._$AH && t !== N && this._(t) : t._$litType$ !== void 0 ? this.$(t) : t.nodeType !== void 0 ? this.T(t) : me(t) ? this.k(t) : this._(t);
+    t = Q(this, t, e), st(t) ? t === d || t == null || t === "" ? (this._$AH !== d && this._$AR(), this._$AH = d) : t !== this._$AH && t !== F && this._(t) : t._$litType$ !== void 0 ? this.$(t) : t.nodeType !== void 0 ? this.T(t) : me(t) ? this.k(t) : this._(t);
   }
   O(t) {
     return this._$AA.parentNode.insertBefore(t, this._$AB);
@@ -436,7 +436,7 @@ class pt {
     this._$AM === void 0 && (this._$Cv = t, (e = this._$AP) == null || e.call(this, t));
   }
 }
-class yt {
+class mt {
   get tagName() {
     return this.element.tagName;
   }
@@ -449,11 +449,11 @@ class yt {
   _$AI(t, e = this, n, i) {
     const r = this.strings;
     let s = !1;
-    if (r === void 0) t = Q(this, t, e, 0), s = !st(t) || t !== this._$AH && t !== N, s && (this._$AH = t);
+    if (r === void 0) t = Q(this, t, e, 0), s = !st(t) || t !== this._$AH && t !== F, s && (this._$AH = t);
     else {
       const h = t;
-      let c, y;
-      for (t = r[0], c = 0; c < r.length - 1; c++) y = Q(this, h[n + c], e, c), y === N && (y = this._$AH[c]), s || (s = !st(y) || y !== this._$AH[c]), y === d ? t = d : t !== d && (t += (y ?? "") + r[c + 1]), this._$AH[c] = y;
+      let c, v;
+      for (t = r[0], c = 0; c < r.length - 1; c++) v = Q(this, h[n + c], e, c), v === F && (v = this._$AH[c]), s || (s = !st(v) || v !== this._$AH[c]), v === d ? t = d : t !== d && (t += (v ?? "") + r[c + 1]), this._$AH[c] = v;
     }
     s && !i && this.j(t);
   }
@@ -461,7 +461,7 @@ class yt {
     t === d ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, t ?? "");
   }
 }
-class _e extends yt {
+class _e extends mt {
   constructor() {
     super(...arguments), this.type = 3;
   }
@@ -469,7 +469,7 @@ class _e extends yt {
     this.element[this.name] = t === d ? void 0 : t;
   }
 }
-class Ce extends yt {
+class Ce extends mt {
   constructor() {
     super(...arguments), this.type = 4;
   }
@@ -477,12 +477,12 @@ class Ce extends yt {
     this.element.toggleAttribute(this.name, !!t && t !== d);
   }
 }
-class ke extends yt {
+class ke extends mt {
   constructor(t, e, n, i, r) {
     super(t, e, n, i, r), this.type = 5;
   }
   _$AI(t, e = this) {
-    if ((t = Q(this, t, e, 0) ?? d) === N) return;
+    if ((t = Q(this, t, e, 0) ?? d) === F) return;
     const n = this._$AH, i = t === d && n !== d || t.capture !== n.capture || t.once !== n.once || t.passive !== n.passive, r = t !== d && (n === d || i);
     i && this.element.removeEventListener(this.name, this, n), r && this.element.addEventListener(this.name, this, t), this._$AH = t;
   }
@@ -519,7 +519,7 @@ const Ee = (o, t, e) => {
  * SPDX-License-Identifier: BSD-3-Clause
  */
 const q = globalThis;
-let u = class extends J {
+let f = class extends J {
   constructor() {
     super(...arguments), this.renderOptions = { host: this }, this._$Do = void 0;
   }
@@ -541,13 +541,13 @@ let u = class extends J {
     super.disconnectedCallback(), (t = this._$Do) == null || t.setConnected(!1);
   }
   render() {
-    return N;
+    return F;
   }
 };
 var ee;
-u._$litElement$ = !0, u.finalized = !0, (ee = q.litElementHydrateSupport) == null || ee.call(q, { LitElement: u });
+f._$litElement$ = !0, f.finalized = !0, (ee = q.litElementHydrateSupport) == null || ee.call(q, { LitElement: f });
 const kt = q.litElementPolyfillSupport;
-kt == null || kt({ LitElement: u });
+kt == null || kt({ LitElement: f });
 (q.litElementVersions ?? (q.litElementVersions = [])).push("4.2.0");
 /**
  * @license
@@ -564,7 +564,7 @@ const x = (o) => (t, e) => {
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const Se = { attribute: !0, type: String, converter: ft, reflect: !1, hasChanged: Ot }, Le = (o = Se, t, e) => {
+const Se = { attribute: !0, type: String, converter: bt, reflect: !1, hasChanged: Ot }, Le = (o = Se, t, e) => {
   const { kind: n, metadata: i } = e;
   let r = globalThis.litPropertyMetadata.get(i);
   if (r === void 0 && globalThis.litPropertyMetadata.set(i, r = /* @__PURE__ */ new Map()), n === "setter" && ((o = Object.create(o)).wrapped = !0), r.set(e.name, o), n === "accessor") {
@@ -599,11 +599,11 @@ function a(o) {
 function K(o) {
   return a({ ...o, state: !0, attribute: !1 });
 }
-const mt = b`
+const ut = y`
 	outline: 1px dashed var(--color-border-primary);
 	outline-offset: 2px;
 `;
-b`
+y`
 	:host * {
 		box-sizing: border-box;
 	}
@@ -673,10 +673,10 @@ const Ie = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="h
 `, He = `<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>
-`, Te = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+`, Me = `<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>
-`, Me = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+`, Te = `<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>
 `, je = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -686,10 +686,10 @@ const Ie = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="h
 <path d="M2 2L14 14" stroke="#3F2B2E"/>
 <path d="M14 2L2 14" stroke="#3F2B2E"/>
 </svg>
-`, Ne = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+`, Fe = `<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>
-`, Re = `<?xml version="1.0" encoding="utf-8"?>
+`, Ne = `<?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">
@@ -699,7 +699,7 @@ const Ie = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="h
 <path class="st0" d="M40,20c0,0.7-0.6,1.2-1.2,1.2H21.2v17.5c0,0.7-0.6,1.2-1.2,1.2s-1.2-0.6-1.2-1.2V21.2H1.2C0.6,21.2,0,20.7,0,20
 	s0.6-1.2,1.2-1.2h17.5V1.2C18.8,0.6,19.3,0,20,0s1.2,0.6,1.2,1.2v17.5h17.5C39.4,18.8,40,19.3,40,20z"/>
 </svg>
-`, Fe = `<?xml version="1.0" encoding="utf-8"?>
+`, Re = `<?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">
@@ -747,15 +747,15 @@ const Ie = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="h
   playerv: Oe,
   chevronRight: Be,
   chevronLeft: ze,
-  icoPlus: Re,
-  icoMinus: Fe,
+  icoPlus: Ne,
+  icoMinus: Re,
   "star-0": De,
   "star-25": He,
-  "star-50": Te,
-  "star-75": Me,
+  "star-50": Me,
+  "star-75": Te,
   "star-100": je,
   cross: Ue,
-  search: Ne,
+  search: Fe,
   arrowLeft: Ve,
   arrowTop: Ze,
   cart: qe,
@@ -774,8 +774,8 @@ const Ie = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="h
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const Ht = { ATTRIBUTE: 1, CHILD: 2 }, Tt = (o) => (...t) => ({ _$litDirective$: o, values: t });
-let Mt = class {
+const Ht = { ATTRIBUTE: 1, CHILD: 2 }, Mt = (o) => (...t) => ({ _$litDirective$: o, values: t });
+let Tt = class {
   constructor(t) {
   }
   get _$AU() {
@@ -796,13 +796,13 @@ let Mt = class {
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-class Et extends Mt {
+class Et extends Tt {
   constructor(t) {
     if (super(t), this.it = d, t.type !== Ht.CHILD) throw Error(this.constructor.directiveName + "() can only be used in child bindings");
   }
   render(t) {
     if (t === d || t == null) return this._t = void 0, this.it = t;
-    if (t === N) return t;
+    if (t === F) 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;
@@ -819,14 +819,14 @@ Et.directiveName = "unsafeHTML", Et.resultType = 1;
 class St extends Et {
 }
 St.directiveName = "unsafeSVG", St.resultType = 2;
-const L = Tt(St);
+const I = Mt(St);
 var oo = Object.defineProperty, io = Object.getOwnPropertyDescriptor, w = (o, t, e, n) => {
   for (var i = n > 1 ? void 0 : n ? io(t, e) : t, r = o.length - 1, s; r >= 0; r--)
     (s = o[r]) && (i = (n ? s(t, e, i) : s(i)) || i);
   return n && i && oo(t, e, i), i;
 };
-const no = Dt(u);
-let f = class extends no {
+const no = Dt(f);
+let b = class extends no {
   constructor() {
     super(...arguments), this.type = "submit", this.value = "", this.variant = "primary", this.text = "", this.textsecond = "", this.fullwidth = !1, this.disabled = !1, this.startIconModel = "", this.endIconModel = "", this.startIcon = !1, this.endIcon = !1, this.panelTarget = "", this.href = "", this.target = "", this.underlined = !1;
   }
@@ -855,7 +855,7 @@ let f = class extends no {
       "<svg",
       '<svg aria-hidden="true" focusable="false" part="svg"'
     );
-    return l`<span class="${o === "start" ? "icon-start" : "icon-end"}">${L(e)}</span>`;
+    return l`<span class="${o === "start" ? "icon-start" : "icon-end"}">${I(e)}</span>`;
   }
   renderButton() {
     const o = this.text || this.textsecond;
@@ -889,9 +889,9 @@ let f = class extends no {
     `;
   }
 };
-Pe(f);
-f.formAssociated = !0;
-f.styles = b`
+Pe(b);
+b.formAssociated = !0;
+b.styles = y`
     :host {
       --button-border: transparent;
       cursor: pointer;
@@ -1007,7 +1007,7 @@ f.styles = b`
     }
 
     .button:focus-visible {
-      ${mt};
+      ${ut};
     }
 
     span.text + span.text::before {
@@ -1082,58 +1082,58 @@ f.styles = b`
   `;
 w([
   a()
-], f.prototype, "type", 2);
+], b.prototype, "type", 2);
 w([
   a({ reflect: !0 })
-], f.prototype, "value", 2);
+], b.prototype, "value", 2);
 w([
   a({ type: String, reflect: !0 })
-], f.prototype, "variant", 2);
+], b.prototype, "variant", 2);
 w([
   a({ type: String })
-], f.prototype, "text", 2);
+], b.prototype, "text", 2);
 w([
   a({ type: String })
-], f.prototype, "textsecond", 2);
+], b.prototype, "textsecond", 2);
 w([
   a({ type: Boolean, reflect: !0 })
-], f.prototype, "fullwidth", 2);
+], b.prototype, "fullwidth", 2);
 w([
   a({ type: Boolean, reflect: !0 })
-], f.prototype, "disabled", 2);
+], b.prototype, "disabled", 2);
 w([
   a({ type: String, reflect: !0 })
-], f.prototype, "startIconModel", 2);
+], b.prototype, "startIconModel", 2);
 w([
   a({ type: String, reflect: !0 })
-], f.prototype, "endIconModel", 2);
+], b.prototype, "endIconModel", 2);
 w([
   a({ type: Boolean, reflect: !0, attribute: "starticon" })
-], f.prototype, "startIcon", 2);
+], b.prototype, "startIcon", 2);
 w([
   a({ type: Boolean, reflect: !0, attribute: "endicon" })
-], f.prototype, "endIcon", 2);
+], b.prototype, "endIcon", 2);
 w([
   a({ type: String, attribute: "paneltarget", reflect: !0 })
-], f.prototype, "panelTarget", 2);
+], b.prototype, "panelTarget", 2);
 w([
   a({ type: String })
-], f.prototype, "href", 2);
+], b.prototype, "href", 2);
 w([
   a({ type: String })
-], f.prototype, "target", 2);
+], b.prototype, "target", 2);
 w([
   a({ type: Boolean, reflect: !0 })
-], f.prototype, "underlined", 2);
-f = w([
+], b.prototype, "underlined", 2);
+b = w([
   x("o-button")
-], f);
+], b);
 var ro = Object.defineProperty, so = Object.getOwnPropertyDescriptor, xt = (o, t, e, n) => {
   for (var i = n > 1 ? void 0 : n ? so(t, e) : t, r = o.length - 1, s; r >= 0; r--)
     (s = o[r]) && (i = (n ? s(t, e, i) : s(i)) || i);
   return n && i && ro(t, e, i), i;
 };
-let Y = class extends u {
+let Y = class extends f {
   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", {
@@ -1160,7 +1160,7 @@ let Y = class extends u {
     return l`
 			<button type="button" aria-describedby="${this.ariaDescribedBy}" class="wishlist-button">
 				<span class="sr-only">${this.label}</span>
-				${L(o)}
+				${I(o)}
 			</button>
 		`;
   }
@@ -1174,7 +1174,7 @@ let Y = class extends u {
     this.label = o, this.requestUpdate();
   }
 };
-Y.styles = b`
+Y.styles = y`
 		:host {
 			display: inline-flex;
 			justify-content: center;
@@ -1257,13 +1257,13 @@ Y = xt([
  * Copyright 2018 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const $ = (o) => o ?? d;
-var ao = Object.defineProperty, lo = Object.getOwnPropertyDescriptor, I = (o, t, e, n) => {
+const _ = (o) => o ?? d;
+var ao = Object.defineProperty, lo = Object.getOwnPropertyDescriptor, B = (o, t, e, n) => {
   for (var i = n > 1 ? void 0 : n ? lo(t, e) : t, r = o.length - 1, s; r >= 0; r--)
     (s = o[r]) && (i = (n ? s(t, e, i) : s(i)) || i);
   return n && i && ao(t, e, i), i;
 };
-let _ = class extends u {
+let C = class extends f {
   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, this.showSrLabel = !1, this.srLabel = "";
   }
@@ -1278,27 +1278,28 @@ let _ = class extends u {
     return l`
 			${this.type === "span" ? l`
 				<span class="icon icon-button ${this.size} ${this.bgstyle} ${this.status} ${t}" ?disabled="${this.disabled}">	
-					${L(e)}
+					${I(e)}
 				</span>
 			` : l`
 				<button
 					type="button"
-					aria-label=${$(i)}
+					aria-label=${_(i)}
 					class="icon-button ${this.size} ${this.bgstyle} ${this.status} ${t}"
 					?disabled="${this.disabled}"
 				>
-					${L(e)}
+					${I(e)}
 					${n}
 				</button>
 			`}
 		`;
   }
 };
-_.styles = b`
+C.styles = y`
 		:host {
 			display: inline-flex;
 			justify-content: center;
 			align-items: center;
+            outline: none !important;
 		}
 
 		.icon-button {
@@ -1498,49 +1499,49 @@ _.styles = b`
 		}
 
 		.icon-button:focus-visible {
-			outline: none;
+			${ut}
 		}
 
 		.sr-only {
 			display: none;
 		}
 	`;
-I([
+B([
   a({ type: String, reflect: !0 })
-], _.prototype, "bgstyle", 2);
-I([
+], C.prototype, "bgstyle", 2);
+B([
   a({ type: String, reflect: !0 })
-], _.prototype, "size", 2);
-I([
+], C.prototype, "size", 2);
+B([
   a({ type: String, reflect: !0 })
-], _.prototype, "status", 2);
-I([
+], C.prototype, "status", 2);
+B([
   a({ type: String, reflect: !0 })
-], _.prototype, "type", 2);
-I([
+], C.prototype, "type", 2);
+B([
   a({ type: String })
-], _.prototype, "strokewidth", 2);
-I([
+], C.prototype, "strokewidth", 2);
+B([
   a({ type: String })
-], _.prototype, "icon", 2);
-I([
+], C.prototype, "icon", 2);
+B([
   a({ type: Boolean, reflect: !0 })
-], _.prototype, "disabled", 2);
-I([
+], C.prototype, "disabled", 2);
+B([
   a({ type: Boolean })
-], _.prototype, "showSrLabel", 2);
-I([
+], C.prototype, "showSrLabel", 2);
+B([
   a({ type: String })
-], _.prototype, "srLabel", 2);
-_ = I([
+], C.prototype, "srLabel", 2);
+C = B([
   x("o-icon-button")
-], _);
+], C);
 var co = Object.defineProperty, ho = Object.getOwnPropertyDescriptor, X = (o, t, e, n) => {
   for (var i = n > 1 ? void 0 : n ? ho(t, e) : t, r = o.length - 1, s; r >= 0; r--)
     (s = o[r]) && (i = (n ? s(t, e, i) : s(i)) || i);
   return n && i && co(t, e, i), i;
 };
-let z = class extends u {
+let D = class extends f {
   constructor() {
     super(...arguments), this.href = "", this.target = "", this.template = "standard", this.inverse = !1, this.endIcon = !1, this.reverseEndIcon = !1;
   }
@@ -1552,7 +1553,7 @@ let z = class extends u {
     return l`
             <a 
                 href="${o}" 
-                target="${$(this.target || void 0)}"
+                target="${_(this.target || void 0)}"
                 @click="${this._handleClick}"
             >
                 ${this.endIcon && this.reverseEndIcon ? l`
@@ -1578,7 +1579,7 @@ let z = class extends u {
         `;
   }
 };
-z.styles = b`
+D.styles = y`
         :host([template="standard"]) a {
             color: var(--color-content-action-secondary);
             font-size: var(--font-size-200);
@@ -1668,31 +1669,31 @@ z.styles = b`
     `;
 X([
   a({ type: String })
-], z.prototype, "href", 2);
+], D.prototype, "href", 2);
 X([
   a({ type: String })
-], z.prototype, "target", 2);
+], D.prototype, "target", 2);
 X([
   a({ type: String, reflect: !0 })
-], z.prototype, "template", 2);
+], D.prototype, "template", 2);
 X([
   a({ type: Boolean, reflect: !0 })
-], z.prototype, "inverse", 2);
+], D.prototype, "inverse", 2);
 X([
   a({ type: Boolean, reflect: !0 })
-], z.prototype, "endIcon", 2);
+], D.prototype, "endIcon", 2);
 X([
   a({ type: Boolean, reflect: !0 })
-], z.prototype, "reverseEndIcon", 2);
-z = X([
+], D.prototype, "reverseEndIcon", 2);
+D = X([
   x("o-link")
-], z);
+], D);
 var po = Object.defineProperty, uo = Object.getOwnPropertyDescriptor, wt = (o, t, e, n) => {
   for (var i = n > 1 ? void 0 : n ? uo(t, e) : t, r = o.length - 1, s; r >= 0; r--)
     (s = o[r]) && (i = (n ? s(t, e, i) : s(i)) || i);
   return n && i && po(t, e, i), i;
 };
-let tt = class extends u {
+let tt = class extends f {
   constructor() {
     super(...arguments), this.rating = 0;
   }
@@ -1711,7 +1712,7 @@ let tt = class extends u {
 			<div class="rating">
 			<div class="stars">
 				${o.map(
-      (t) => l`<span class="star">${L(G[t] ?? "")}</span>`
+      (t) => l`<span class="star">${I(G[t] ?? "")}</span>`
     )}
 			</div>
 			${this.reviewCount != null && this.href != null ? l`<o-link template="review" href="${this.href}">${this.reviewCount}</o-link>` : null}
@@ -1719,7 +1720,7 @@ let tt = class extends u {
 		`;
   }
 };
-tt.styles = b`
+tt.styles = y`
 		svg {
 			width: 12px;
 			height: 12px;
@@ -1782,7 +1783,7 @@ const nt = (o, t) => {
   if (e === void 0) return !1;
   for (const i of e) (n = i._$AO) == null || n.call(i, t, !1), nt(i, t);
   return !0;
-}, gt = (o) => {
+}, yt = (o) => {
   let t, e;
   do {
     if ((t = o._$AM) === void 0) break;
@@ -1797,18 +1798,18 @@ const nt = (o, t) => {
   }
 };
 function fo(o) {
-  this._$AN !== void 0 ? (gt(this), this._$AM = o, ae(this)) : this._$AM = o;
+  this._$AN !== void 0 ? (yt(this), this._$AM = o, ae(this)) : this._$AM = o;
 }
 function bo(o, t = !1, e = 0) {
   const n = this._$AH, i = this._$AN;
-  if (i !== void 0 && i.size !== 0) if (t) if (Array.isArray(n)) for (let r = e; r < n.length; r++) nt(n[r], !1), gt(n[r]);
-  else n != null && (nt(n, !1), gt(n));
+  if (i !== void 0 && i.size !== 0) if (t) if (Array.isArray(n)) for (let r = e; r < n.length; r++) nt(n[r], !1), yt(n[r]);
+  else n != null && (nt(n, !1), yt(n));
   else nt(this, o);
 }
 const go = (o) => {
   o.type == Ht.CHILD && (o._$AP ?? (o._$AP = bo), o._$AQ ?? (o._$AQ = fo));
 };
-class yo extends Mt {
+class yo extends Tt {
   constructor() {
     super(...arguments), this._$AN = void 0;
   }
@@ -1817,7 +1818,7 @@ class yo extends Mt {
   }
   _$AO(t, e = !0) {
     var n, i;
-    t !== this.isConnected && (this.isConnected = t, t ? (n = this.reconnected) == null || n.call(this) : (i = this.disconnected) == null || i.call(this)), e && (nt(this, t), gt(this));
+    t !== this.isConnected && (this.isConnected = t, t ? (n = this.reconnected) == null || n.call(this) : (i = this.disconnected) == null || i.call(this)), e && (nt(this, t), yt(this));
   }
   setValue(t) {
     if (vo(this._$Ct)) this._$Ct._$AI(t, this);
@@ -1951,51 +1952,66 @@ class wo extends xo {
       }
   }
 }
-const te = Tt(wo);
-var $o = Object.defineProperty, _o = Object.getOwnPropertyDescriptor, g = (o, t, e, n) => {
+const te = Mt(wo);
+var $o = Object.defineProperty, _o = Object.getOwnPropertyDescriptor, m = (o, t, e, n) => {
   for (var i = n > 1 ? void 0 : n ? _o(t, e) : t, r = o.length - 1, s; r >= 0; r--)
     (s = o[r]) && (i = (n ? s(t, e, i) : s(i)) || i);
   return n && i && $o(t, e, i), i;
 };
-let v = class extends u {
+let u = class extends f {
   constructor() {
-    super(...arguments), this.open = !1, this.showHeader = !0, this.showFooter = !1, this.showHeaderStartIcon = !1, this.headerTitle = "", this.headerTitleClassName = "panel-title", this.closeButtonLabel = "Close the modal", this.firstButtonLabel = "Close", this.firstButtonVariant = "primary", this.firstButtonProps = {}, this.onFirstButtonClickClose = !1, this.secondButtonLabel = "", this.secondButtonVariant = "secondary", this.secondButtonProps = {}, this.onSecondButtonClickClose = !1, this.disablePortal = !1, this.zIndex = 99, this.initialized = !1, this.previousFocusedElement = null, this.handleKeyDown = (o) => {
+    super(...arguments), this.open = !1, this.showHeader = !0, this.showFooter = !1, this.showHeaderStartIcon = !1, this.headerTitle = "", this.headerTitleClassName = "panel-title", this.closeButtonLabel = "Close the modal", this.firstButtonLabel = "Close", this.firstButtonVariant = "primary", this.firstButtonProps = {}, this.onFirstButtonClickClose = !1, this.secondButtonLabel = "", this.secondButtonVariant = "secondary", this.secondButtonProps = {}, this.onSecondButtonClickClose = !1, this.disablePortal = !1, this.zIndex = 99, this.initialized = !1, this.previousFocusedElement = null, this.innerFocusedElement = null, this.handleKeyDown = (o) => {
       this.open && (o.key === "Escape" ? this.closePanel() : o.key === "Tab" && this.trapFocus(o));
     }, this.handleClosePanel = (o) => {
       o instanceof KeyboardEvent && o.key !== "Enter" && o.key !== " " || (o.preventDefault(), o.stopPropagation(), this.closePanel());
     };
   }
   connectedCallback() {
-    super.connectedCallback(), !this.disablePortal && this.parentElement !== document.body && document.body.appendChild(this), window.addEventListener("keydown", this.handleKeyDown), this.updateComplete.then(() => {
+    super.connectedCallback(), !this.disablePortal && this.parentElement !== document.body && document.body.appendChild(this), this.addEventListener("keydown", this.handleKeyDown), this.updateComplete.then(() => {
       this.initialized = !0;
     });
   }
   disconnectedCallback() {
-    document.body.style.overflow = "", document.body.removeAttribute("data-side-panel"), window.removeEventListener("keydown", this.handleKeyDown), super.disconnectedCallback();
+    document.body.style.overflow = "", document.body.removeAttribute("data-side-panel"), this.removeEventListener("keydown", this.handleKeyDown), super.disconnectedCallback();
   }
   trapFocus(o) {
+    var i, r, s, h, c, v, g, p, $, E;
+    this.innerFocusedElement = document.activeElement || null, this.innerFocusedElement = ((r = (i = this.innerFocusedElement) == null ? void 0 : i.shadowRoot) == null ? void 0 : r.activeElement) || this.innerFocusedElement;
     const t = this.getFocusableElements();
     if (t.length === 0) return;
     const e = t[0], n = t[t.length - 1];
-    o.shiftKey && document.activeElement === e ? (o.preventDefault(), n.focus()) : !o.shiftKey && document.activeElement === n && (o.preventDefault(), e.focus());
+    o.shiftKey && this.innerFocusedElement === e ? (o.preventDefault(), n.shadowRoot ? (c = (h = (s = n.shadowRoot) == null ? void 0 : s.querySelector(u.focusablesSelector)) == null ? void 0 : h.focus) == null || c.call(h) : (v = n.focus) == null || v.call(n)) : !o.shiftKey && this.innerFocusedElement === n && (o.preventDefault(), e.shadowRoot ? ($ = (p = (g = e.shadowRoot) == null ? void 0 : g.querySelector(u.focusablesSelector)) == null ? void 0 : p.focus) == null || $.call(p) : (E = e.focus) == null || E.call(e));
   }
   getFocusableElements() {
     const o = this.renderRoot.querySelector(".panel");
-    return o ? Array.from(
-      o.querySelectorAll(
-        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
-      )
-    ).filter((t) => !t.hasAttribute("disabled")) : [];
+    if (!o) return [];
+    function t(i) {
+      return !(i.disabled || i.hasAttribute("disabled") || i.hasAttribute("tabindex") && i.getAttribute("tabindex") === "-1");
+    }
+    function e(i) {
+      var s;
+      const r = [i.matches(u.focusablesSelector) ? i : []];
+      if (!["o-icon-button", "o-button"].includes(i.tagName.toLowerCase())) {
+        const h = Array.from(
+          i instanceof HTMLSlotElement ? i.assignedElements({ flatten: !0 }) : []
+        ).filter(t).flatMap(e), c = Array.from(
+          ((s = i.shadowRoot) == null ? void 0 : s.querySelectorAll("*")) || []
+        ).filter(t).flatMap(e);
+        r.push(...h, ...c);
+      }
+      return r.flat();
+    }
+    return Array.from(o.querySelectorAll("*")).filter(t).flatMap(e);
   }
   openPanel() {
     this.previousFocusedElement = document.activeElement, this.open = !0, document.body.style.overflow = "hidden", document.body.setAttribute("data-side-panel", "open"), this.updateComplete.then(() => {
-      var o, t, e;
+      var o, t, e, n;
       if (this.showHeader) {
-        const n = ((o = this.shadowRoot) == null ? void 0 : o.querySelector(".panel .close-btn")) || null, i = ((t = n == null ? void 0 : n.shadowRoot) == null ? void 0 : t.querySelector("button")) || null;
-        i && ((e = i.focus) == null || e.call(i));
+        const i = ((o = this.shadowRoot) == null ? void 0 : o.querySelector(".panel .close-btn")) || null, r = ((t = i == null ? void 0 : i.shadowRoot) == null ? void 0 : t.querySelector("button")) || null;
+        r && ((e = r.focus) == null || e.call(r));
       } else {
-        const n = this.getFocusableElements()[0];
-        n == null || n.focus();
+        const i = this.getFocusableElements()[0];
+        (n = i == null ? void 0 : i.focus) == null || n.call(i);
       }
     }), this.dispatchEvent(
       new CustomEvent("open", { bubbles: !0, composed: !0 })
@@ -2091,7 +2107,7 @@ let v = class extends u {
 		`;
   }
 };
-v.styles = b`
+u.styles = y`
 		:host {
 			--z-overlay: 99;
 			--z-panel: 100;
@@ -2195,7 +2211,7 @@ v.styles = b`
 		.panel:focus-visible,
 		.close-btn:focus,
 		.close-btn:focus-visible {
-			${mt}
+			${ut}
 		}
 
 		.content {
@@ -2240,69 +2256,71 @@ v.styles = b`
 			}
 		}
 	`;
-g([
+u.focusablesSelector = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"]), o-icon-button, o-button';
+u.focusablesCustomElementsSelector = "o-icon-button, o-button";
+m([
   a({ type: Boolean, reflect: !0 })
-], v.prototype, "open", 2);
-g([
+], u.prototype, "open", 2);
+m([
   a({ type: Boolean, reflect: !0 })
-], v.prototype, "showHeader", 2);
-g([
+], u.prototype, "showHeader", 2);
+m([
   a({ type: Boolean, reflect: !0 })
-], v.prototype, "showFooter", 2);
-g([
+], u.prototype, "showFooter", 2);
+m([
   a({ type: Boolean, reflect: !0 })
-], v.prototype, "showHeaderStartIcon", 2);
-g([
+], u.prototype, "showHeaderStartIcon", 2);
+m([
   a({ type: String, reflect: !0 })
-], v.prototype, "headerTitle", 2);
-g([
+], u.prototype, "headerTitle", 2);
+m([
   a({ type: String, reflect: !0 })
-], v.prototype, "headerTitleClassName", 2);
-g([
+], u.prototype, "headerTitleClassName", 2);
+m([
   a({ type: String, reflect: !0 })
-], v.prototype, "closeButtonLabel", 2);
-g([
+], u.prototype, "closeButtonLabel", 2);
+m([
   a({ type: String, reflect: !0 })
-], v.prototype, "firstButtonLabel", 2);
-g([
+], u.prototype, "firstButtonLabel", 2);
+m([
   a({ type: String, reflect: !0 })
-], v.prototype, "firstButtonVariant", 2);
-g([
+], u.prototype, "firstButtonVariant", 2);
+m([
   a({ type: Object, reflect: !0 })
-], v.prototype, "firstButtonProps", 2);
-g([
+], u.prototype, "firstButtonProps", 2);
+m([
   a({ type: Boolean, reflect: !0 })
-], v.prototype, "onFirstButtonClickClose", 2);
-g([
+], u.prototype, "onFirstButtonClickClose", 2);
+m([
   a({ type: String, reflect: !0 })
-], v.prototype, "secondButtonLabel", 2);
-g([
+], u.prototype, "secondButtonLabel", 2);
+m([
   a({ type: String, reflect: !0 })
-], v.prototype, "secondButtonVariant", 2);
-g([
+], u.prototype, "secondButtonVariant", 2);
+m([
   a({ type: Object, reflect: !0 })
-], v.prototype, "secondButtonProps", 2);
-g([
+], u.prototype, "secondButtonProps", 2);
+m([
   a({ type: Boolean, reflect: !0 })
-], v.prototype, "onSecondButtonClickClose", 2);
-g([
+], u.prototype, "onSecondButtonClickClose", 2);
+m([
   a({ type: Boolean, reflect: !0 })
-], v.prototype, "disablePortal", 2);
-g([
+], u.prototype, "disablePortal", 2);
+m([
   a({ type: Number, reflect: !0 })
-], v.prototype, "zIndex", 2);
-g([
+], u.prototype, "zIndex", 2);
+m([
   a({ type: Boolean, reflect: !0 })
-], v.prototype, "initialized", 2);
-v = g([
+], u.prototype, "initialized", 2);
+u = m([
   x("o-side-panel")
-], v);
-var Co = Object.defineProperty, ko = Object.getOwnPropertyDescriptor, R = (o, t, e, n) => {
+], u);
+var Co = Object.defineProperty, ko = Object.getOwnPropertyDescriptor, N = (o, t, e, n) => {
   for (var i = n > 1 ? void 0 : n ? ko(t, e) : t, r = o.length - 1, s; r >= 0; r--)
     (s = o[r]) && (i = (n ? s(t, e, i) : s(i)) || i);
   return n && i && Co(t, e, i), i;
 };
-let P = class extends u {
+let O = class extends f {
   constructor() {
     super(...arguments), this.thumbnails = [], this.activeIndex = 0, this.disabledIndexes = [], this.maxWidth = "100%", this.altressource = "visual", this.focusedIndex = 0, this.playerIconTemplate = l`
     <o-icon-button
@@ -2379,7 +2397,7 @@ let P = class extends u {
     `;
   }
 };
-P.styles = b`
+O.styles = y`
     :host {
       display: flex;
       gap: 5px;
@@ -2485,36 +2503,36 @@ P.styles = b`
       width: 0;
     }
   `;
-R([
+N([
   a({ type: Array })
-], P.prototype, "thumbnails", 2);
-R([
+], O.prototype, "thumbnails", 2);
+N([
   a({ type: Number })
-], P.prototype, "activeIndex", 2);
-R([
+], O.prototype, "activeIndex", 2);
+N([
   a({ type: Array })
-], P.prototype, "disabledIndexes", 2);
-R([
+], O.prototype, "disabledIndexes", 2);
+N([
   a({ type: String })
-], P.prototype, "maxWidth", 2);
-R([
+], O.prototype, "maxWidth", 2);
+N([
   a({ type: String })
-], P.prototype, "altressource", 2);
-R([
+], O.prototype, "altressource", 2);
+N([
   a({ type: Object })
-], P.prototype, "swiperInstance", 2);
-R([
+], O.prototype, "swiperInstance", 2);
+N([
   K()
-], P.prototype, "focusedIndex", 2);
-P = R([
+], O.prototype, "focusedIndex", 2);
+O = N([
   x("thumbnail-navigation")
-], P);
+], O);
 var Ao = Object.defineProperty, Eo = Object.getOwnPropertyDescriptor, jt = (o, t, e, n) => {
   for (var i = n > 1 ? void 0 : n ? Eo(t, e) : t, r = o.length - 1, s; r >= 0; r--)
     (s = o[r]) && (i = (n ? s(t, e, i) : s(i)) || i);
   return n && i && Ao(t, e, i), i;
 };
-let lt = class extends u {
+let lt = class extends f {
   constructor() {
     super(...arguments), this.type = "", this.bgstyle = "background-white";
   }
@@ -2524,7 +2542,7 @@ let lt = class extends u {
     `;
   }
 };
-lt.styles = b`
+lt.styles = y`
     .tag {
       display: inline-block;
       padding: var(--spacing-2-xs) var(--spacing-s);
@@ -2594,7 +2612,7 @@ var So = Object.defineProperty, Lo = Object.getOwnPropertyDescriptor, Ut = (o, t
     (s = o[r]) && (i = (n ? s(t, e, i) : s(i)) || i);
   return n && i && So(t, e, i), i;
 };
-let ct = class extends u {
+let ct = class extends f {
   constructor() {
     super(...arguments), this.type = "top", this.text = "";
   }
@@ -2607,7 +2625,7 @@ let ct = class extends u {
     `;
   }
 };
-ct.styles = b`
+ct.styles = y`
     .tooltip {
         position: relative;
         display: inline-block;
@@ -2709,12 +2727,12 @@ Ut([
 ct = Ut([
   x("o-tooltip")
 ], ct);
-var Po = Object.defineProperty, Io = Object.getOwnPropertyDescriptor, D = (o, t, e, n) => {
+var Po = Object.defineProperty, Io = Object.getOwnPropertyDescriptor, H = (o, t, e, n) => {
   for (var i = n > 1 ? void 0 : n ? Io(t, e) : t, r = o.length - 1, s; r >= 0; r--)
     (s = o[r]) && (i = (n ? s(t, e, i) : s(i)) || i);
   return n && i && Po(t, e, i), i;
 };
-let A = class extends u {
+let S = class extends f {
   constructor() {
     super(...arguments), this.options = [], this.value = "", this.name = "", this.disabled = !1, this.width = "100%", this.open = !1, this.activeIndex = -1, this.menuWidth = "", this._handleOutsideClick = (o) => {
       this.contains(o.target) || (this.open = !1, this.activeIndex = -1);
@@ -2825,10 +2843,10 @@ let A = class extends u {
                   ${e.url ? l`
                   <a href="${e.url}">
                     <span>${e.label}</span>
-                    ${e.value === this.value ? l`<span class="check">${L(o)}</span>` : null}
+                    ${e.value === this.value ? l`<span class="check">${I(o)}</span>` : null}
                   </a>` : l`
                     <span>${e.label}</span>
-                    ${e.value === this.value ? l`<span class="check">${L(o)}</span>` : null}`}
+                    ${e.value === this.value ? l`<span class="check">${I(o)}</span>` : null}`}
                 </li>`
     )}
           </ul>` : null}
@@ -2837,7 +2855,7 @@ let A = class extends u {
     `;
   }
 };
-A.styles = b`
+S.styles = y`
 		:host {
 			display: inline-block;
 			position: relative;
@@ -2977,44 +2995,44 @@ A.styles = b`
 			display: none;
 		}
 	`;
-D([
+H([
   a({ type: Array, reflect: !0 })
-], A.prototype, "options", 2);
-D([
+], S.prototype, "options", 2);
+H([
   a({ type: String, reflect: !0 })
-], A.prototype, "value", 2);
-D([
+], S.prototype, "value", 2);
+H([
   a({ type: String, reflect: !0 })
-], A.prototype, "name", 2);
-D([
+], S.prototype, "name", 2);
+H([
   a({ type: Boolean, reflect: !0 })
-], A.prototype, "disabled", 2);
-D([
+], S.prototype, "disabled", 2);
+H([
   a({ type: String, reflect: !0 })
-], A.prototype, "width", 2);
-D([
+], S.prototype, "width", 2);
+H([
   K()
-], A.prototype, "open", 2);
-D([
+], S.prototype, "open", 2);
+H([
   K()
-], A.prototype, "activeIndex", 2);
-D([
+], S.prototype, "activeIndex", 2);
+H([
   K()
-], A.prototype, "menuWidth", 2);
-A = D([
+], S.prototype, "menuWidth", 2);
+S = H([
   x("o-dropdown")
-], A);
+], S);
 var Oo = Object.getOwnPropertyDescriptor, Bo = (o, t, e, n) => {
   for (var i = n > 1 ? void 0 : n ? Oo(t, e) : t, r = o.length - 1, s; r >= 0; r--)
     (s = o[r]) && (i = s(i) || i);
   return i;
 };
-let Lt = class extends u {
+let Lt = class extends f {
   render() {
     return l` <span class="dots"></span> `;
   }
 };
-Lt.styles = b`
+Lt.styles = y`
     :host {
       display: flex;
       align-items: center;
@@ -3069,12 +3087,12 @@ Lt.styles = b`
 Lt = Bo([
   x("o-dots")
 ], Lt);
-var zo = Object.defineProperty, Do = Object.getOwnPropertyDescriptor, O = (o, t, e, n) => {
+var zo = Object.defineProperty, Do = Object.getOwnPropertyDescriptor, z = (o, t, e, n) => {
   for (var i = n > 1 ? void 0 : n ? Do(t, e) : t, r = o.length - 1, s; r >= 0; r--)
     (s = o[r]) && (i = (n ? s(t, e, i) : s(i)) || i);
   return n && i && zo(t, e, i), i;
 };
-let C = class extends u {
+let k = class extends f {
   constructor() {
     super(...arguments), this.options = [], this.value = "", this.name = "", this.additionaltext = "+X variant(s)", this.disabled = !1, this.width = "100%", this.open = !1, this.activeIndex = -1, this.menuWidth = "", this._handleOutsideClick = (o) => {
       this.contains(o.target) || (this.open = !1, this.activeIndex = -1);
@@ -3158,7 +3176,7 @@ let C = class extends u {
 				?disabled=${this.disabled}
 				class="btn-dropdown"
 			>
-				<img alt="${$(t == null ? void 0 : t.label)}" src="${$(t == null ? void 0 : t.imgurl)}" />
+				<img alt="${_(t == null ? void 0 : t.label)}" src="${_(t == null ? void 0 : t.imgurl)}" />
 				<span id="dropdown-label" class="label">
 					${t ? t.label : "Select an option"}
 				</span>
@@ -3193,13 +3211,13 @@ let C = class extends u {
 									class="${n === this.activeIndex ? "active" : ""} ${e.disabled ? "disabled" : ""}"
 									@click=${() => this.selectOption(e)}
 								>
-									<a href="${$(e.url)}">
-										<img alt="${$(e.label)}" src="${$(e.imgurl)}" />
+									<a href="${_(e.url)}">
+										<img alt="${_(e.label)}" src="${_(e.imgurl)}" />
 										<span class="label">${e.label}</span>
 										<div class="right">
-											<span class="additional-text">${$(e.additionaltext)}</span>
+											<span class="additional-text">${_(e.additionaltext)}</span>
 											${e.value === this.value && !e.additionaltext ? l`
-												<span class="check">${L(o)}</span>` : null}
+												<span class="check">${I(o)}</span>` : null}
 										</div>
 									</a>
 								</li>
@@ -3211,7 +3229,7 @@ let C = class extends u {
 		`;
   }
 };
-C.styles = b`
+k.styles = y`
 		:host {
 			display: inline-block;
 			position: relative;
@@ -3387,42 +3405,42 @@ C.styles = b`
 			display: none;
 		}
 	`;
-O([
+z([
   a({ type: Array, reflect: !0 })
-], C.prototype, "options", 2);
-O([
+], k.prototype, "options", 2);
+z([
   a({ type: String, reflect: !0 })
-], C.prototype, "value", 2);
-O([
+], k.prototype, "value", 2);
+z([
   a({ type: String, reflect: !0 })
-], C.prototype, "name", 2);
-O([
+], k.prototype, "name", 2);
+z([
   a({ type: String, reflect: !0 })
-], C.prototype, "additionaltext", 2);
-O([
+], k.prototype, "additionaltext", 2);
+z([
   a({ type: Boolean, reflect: !0 })
-], C.prototype, "disabled", 2);
-O([
+], k.prototype, "disabled", 2);
+z([
   a({ type: String, reflect: !0 })
-], C.prototype, "width", 2);
-O([
+], k.prototype, "width", 2);
+z([
   K()
-], C.prototype, "open", 2);
-O([
+], k.prototype, "open", 2);
+z([
   K()
-], C.prototype, "activeIndex", 2);
-O([
+], k.prototype, "activeIndex", 2);
+z([
   K()
-], C.prototype, "menuWidth", 2);
-C = O([
+], k.prototype, "menuWidth", 2);
+k = z([
   x("o-dropdown-variant")
-], C);
+], k);
 /**
  * @license
  * Copyright 2018 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const le = "important", Ho = " !" + le, To = Tt(class extends Mt {
+const le = "important", Ho = " !" + le, Mo = Mt(class extends Tt {
   constructor(o) {
     var t;
     if (super(o), o.type !== Ht.ATTRIBUTE || o.name !== "style" || ((t = o.strings) == null ? void 0 : t.length) > 2) throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.");
@@ -3445,15 +3463,15 @@ const le = "important", Ho = " !" + le, To = Tt(class extends Mt {
         n.includes("-") || r ? e.setProperty(n, r ? i.slice(0, -11) : i, r ? le : "") : e[n] = i;
       }
     }
-    return N;
+    return F;
   }
 });
-var Mo = Object.defineProperty, jo = Object.getOwnPropertyDescriptor, Nt = (o, t, e, n) => {
+var To = Object.defineProperty, jo = Object.getOwnPropertyDescriptor, Ft = (o, t, e, n) => {
   for (var i = n > 1 ? void 0 : n ? jo(t, e) : t, r = o.length - 1, s; r >= 0; r--)
     (s = o[r]) && (i = (n ? s(t, e, i) : s(i)) || i);
-  return n && i && Mo(t, e, i), i;
+  return n && i && To(t, e, i), i;
 };
-let ht = class extends u {
+let ht = class extends f {
   constructor() {
     super(...arguments), this.option = {}, this.imageSize = 64;
   }
@@ -3462,16 +3480,16 @@ let ht = class extends u {
       width: `${this.imageSize}px`,
       height: `${this.imageSize}px`
     }, e = l`
-      ${this.option.imgurl ? l`<img src="${this.option.imgurl}" alt="${$(this.option.title)}" aria-hidden="true" style=${To(t)} />` : ""}
+      ${this.option.imgurl ? l`<img src="${this.option.imgurl}" alt="${_(this.option.title)}" aria-hidden="true" style=${Mo(t)} />` : ""}
       <div class="m-reassurance-content">
-        <h3 class="a-reassurance-text">${$(this.option.title)}</h3>
-        <p class="a-reassurance-description">${$(this.option.description)}</p>
+        <h3 class="a-reassurance-text">${_(this.option.title)}</h3>
+        <p class="a-reassurance-description">${_(this.option.description)}</p>
       </div>
     `;
-    return o ? l`<a href="${$(this.option.url)}" class="reassurance-item clickable">${e}</a>` : l`<div class="reassurance-item">${e}</div>`;
+    return o ? l`<a href="${_(this.option.url)}" class="reassurance-item clickable">${e}</a>` : l`<div class="reassurance-item">${e}</div>`;
   }
 };
-ht.styles = b`
+ht.styles = y`
     :host {
       display: inline-block;
       position: relative;
@@ -3553,22 +3571,22 @@ ht.styles = b`
       }
     }
   `;
-Nt([
+Ft([
   a({ type: Object, reflect: !0 })
 ], ht.prototype, "option", 2);
-Nt([
+Ft([
   a({ type: Number, reflect: !0 })
 ], ht.prototype, "imageSize", 2);
-ht = Nt([
+ht = Ft([
   x("o-reassurance")
 ], ht);
-var Uo = Object.defineProperty, No = Object.getOwnPropertyDescriptor, H = (o, t, e, n) => {
-  for (var i = n > 1 ? void 0 : n ? No(t, e) : t, r = o.length - 1, s; r >= 0; r--)
+var Uo = Object.defineProperty, Fo = Object.getOwnPropertyDescriptor, M = (o, t, e, n) => {
+  for (var i = n > 1 ? void 0 : n ? Fo(t, e) : t, r = o.length - 1, s; r >= 0; r--)
     (s = o[r]) && (i = (n ? s(t, e, i) : s(i)) || i);
   return n && i && Uo(t, e, i), i;
 };
-const Ro = Dt(u);
-let k = class extends Ro {
+const No = Dt(f);
+let A = class extends No {
   constructor() {
     super(...arguments), this.link = "", this.name = "", this.value = "", this.text = "", this.size = "standard", this.selected = !1, this.fullwidth = !1, this.inactive = !1;
   }
@@ -3591,7 +3609,7 @@ let k = class extends Ro {
     `;
   }
 };
-k.styles = b`
+A.styles = y`
     :host {
       cursor: pointer;
       display: inline-flex;
@@ -3667,7 +3685,7 @@ k.styles = b`
       }
 
       &:focus-visible {
-        ${mt};
+        ${ut};
       }
     }
 
@@ -3681,44 +3699,44 @@ k.styles = b`
       align-items: center;
     }
   `;
-H([
+M([
   a({ type: String, reflect: !0 })
-], k.prototype, "link", 2);
-H([
+], A.prototype, "link", 2);
+M([
   a({ reflect: !0 })
-], k.prototype, "name", 2);
-H([
+], A.prototype, "name", 2);
+M([
   a({ reflect: !0 })
-], k.prototype, "value", 2);
-H([
+], A.prototype, "value", 2);
+M([
   a({ type: String })
-], k.prototype, "text", 2);
-H([
+], A.prototype, "text", 2);
+M([
   a({ type: String, reflect: !0 })
-], k.prototype, "size", 2);
-H([
+], A.prototype, "size", 2);
+M([
   a({ type: Boolean, reflect: !0 })
-], k.prototype, "selected", 2);
-H([
+], A.prototype, "selected", 2);
+M([
   a({ type: Boolean, reflect: !0 })
-], k.prototype, "fullwidth", 2);
-H([
+], A.prototype, "fullwidth", 2);
+M([
   a({ type: Boolean, reflect: !0 })
-], k.prototype, "inactive", 2);
-k = H([
+], A.prototype, "inactive", 2);
+A = M([
   x("o-chip")
-], k);
-var Fo = Object.defineProperty, Vo = Object.getOwnPropertyDescriptor, Rt = (o, t, e, n) => {
+], A);
+var Ro = Object.defineProperty, Vo = Object.getOwnPropertyDescriptor, Nt = (o, t, e, n) => {
   for (var i = n > 1 ? void 0 : n ? Vo(t, e) : t, r = o.length - 1, s; r >= 0; r--)
     (s = o[r]) && (i = (n ? s(t, e, i) : s(i)) || i);
-  return n && i && Fo(t, e, i), i;
+  return n && i && Ro(t, e, i), i;
 };
-let dt = class extends u {
+let dt = class extends f {
   constructor() {
     super(), this.name = "", this.value = "", this.addEventListener("selected", this.onChipSelected);
   }
   onChipSelected(o) {
-    const t = o.target instanceof k ? o.target : null;
+    const t = o.target instanceof A ? o.target : null;
     t != null && t.link || (this.name = (t == null ? void 0 : t.name) || "", this.value = (t == null ? void 0 : t.value) || "", this.querySelectorAll("o-chip").forEach((e) => {
       e !== t && (e.selected = !1);
     }));
@@ -3729,7 +3747,7 @@ let dt = class extends u {
     `;
   }
 };
-dt.styles = b`
+dt.styles = y`
     :host {
       display: flex;
       flex-direction: row;
@@ -3737,13 +3755,13 @@ dt.styles = b`
       gap: var(--spacing-s);
     }
   `;
-Rt([
+Nt([
   a({ reflect: !0 })
 ], dt.prototype, "name", 2);
-Rt([
+Nt([
   a({ reflect: !0 })
 ], dt.prototype, "value", 2);
-dt = Rt([
+dt = Nt([
   x("o-chipset")
 ], dt);
 var Zo = Object.defineProperty, qo = Object.getOwnPropertyDescriptor, T = (o, t, e, n) => {
@@ -3751,8 +3769,8 @@ var Zo = Object.defineProperty, qo = Object.getOwnPropertyDescriptor, T = (o, t,
     (s = o[r]) && (i = (n ? s(t, e, i) : s(i)) || i);
   return n && i && Zo(t, e, i), i;
 };
-const Wo = Dt(u);
-let E = class extends Wo {
+const Wo = Dt(f);
+let L = class extends Wo {
   constructor() {
     super(...arguments), this.name = "", this.value = "", this.type = "", this.dataHref = "", this.text = "", this.selected = !1, this.disabled = !1, this.fullwidth = !1, this.crossIconName = "cross", this.strikethroughImgName = "strikeDiagonal";
   }
@@ -3768,14 +3786,14 @@ let E = class extends Wo {
       "<svg",
       '<svg aria-hidden="true" focusable="false" part="svg"'
     ).replace(/stroke=[#"'a-z1-9]*/gi, "");
-    return l`<span class="cross-icon">${L(o)}</span>`;
+    return l`<span class="cross-icon">${I(o)}</span>`;
   }
   strikeThroughImg() {
     const o = eo[this.strikethroughImgName].replace(
       "<svg",
       '<svg aria-hidden="true" focusable="false" part="strikethrough"'
     ).replace(/stroke=[#"'a-z1-9]*/gi, "");
-    return L(o);
+    return I(o);
   }
   render() {
     const o = this.text;
@@ -3802,7 +3820,7 @@ let E = class extends Wo {
     `;
   }
 };
-E.styles = b`
+L.styles = y`
     :host {
       cursor: pointer;
       display: inline-flex;
@@ -3882,7 +3900,7 @@ E.styles = b`
     }
 
     .button:focus-visible {
-      ${mt};
+      ${ut};
     }
 
     span.text + span.text::before {
@@ -3930,37 +3948,37 @@ E.styles = b`
   `;
 T([
   a({ reflect: !0 })
-], E.prototype, "name", 2);
+], L.prototype, "name", 2);
 T([
   a({ reflect: !0 })
-], E.prototype, "value", 2);
+], L.prototype, "value", 2);
 T([
   a({ type: String, reflect: !0 })
-], E.prototype, "type", 2);
+], L.prototype, "type", 2);
 T([
   a({ type: String, reflect: !0, attribute: "data-href" })
-], E.prototype, "dataHref", 2);
+], L.prototype, "dataHref", 2);
 T([
   a({ type: String })
-], E.prototype, "text", 2);
+], L.prototype, "text", 2);
 T([
   a({ type: Boolean, reflect: !0 })
-], E.prototype, "selected", 2);
+], L.prototype, "selected", 2);
 T([
   a({ type: Boolean, reflect: !0 })
-], E.prototype, "disabled", 2);
+], L.prototype, "disabled", 2);
 T([
   a({ type: Boolean, reflect: !0 })
-], E.prototype, "fullwidth", 2);
-E = T([
+], L.prototype, "fullwidth", 2);
+L = T([
   x("o-filter-chip")
-], E);
-var Ko = Object.defineProperty, F = (o, t, e, n) => {
+], L);
+var Ko = Object.defineProperty, R = (o, t, e, n) => {
   for (var i = void 0, r = o.length - 1, s; r >= 0; r--)
     (s = o[r]) && (i = s(t, e, i) || i);
   return i && Ko(t, e, i), i;
 };
-const Ft = class Ft extends u {
+const Rt = class Rt extends f {
   constructor() {
     super(...arguments), this.type = "cart | chevron", this.titleProduct = "", this.volume = "", this.perLiter = "", this.mainPrice = "", this.imageUrl = "https://placehold.co/56x70", this.altImage = "";
   }
@@ -3995,20 +4013,18 @@ const Ft = class Ft extends u {
             ${this.imageUrl ? l`<img src="${this.imageUrl}" alt="${this.altImage || ""}" />` : ""}
             <div class="info">
                 ${this.titleProduct ? l`<div class="title">${this.titleProduct}</div>` : ""}
-                ${this.type === "cart" && (this.volume || this.mainPrice || this.perLiter) ? l`
-                    <div class="details">
-                        ${this.volume ? l`<span class="volume-info">${this.volume}</span>` : ""}
-                        ${this.mainPrice ? l`<span class="main-price">${this.mainPrice}</span>` : ""}
-                        ${this.perLiter ? l`<span class="per-liter">${this.perLiter}</span>` : ""}
-                    </div>
-                ` : ""}
+                <div class="details">
+                    ${this.volume ? l`<span class="volume-info">${this.volume}</span>` : ""}
+                    ${this.type === "cart" && this.mainPrice ? l`<span class="main-price">${this.mainPrice}</span>` : ""}
+                    ${this.type === "cart" && this.perLiter ? l`<span class="per-liter">${this.perLiter}</span>` : ""}
+                </div>
             </div>
             ${this.icons}
         </div>
     `;
   }
 };
-Ft.styles = b`
+Rt.styles = y`
     .tile {
           display: flex;
           align-items: center;
@@ -4027,6 +4043,7 @@ Ft.styles = b`
           object-fit: cover;
           width: 56px;
           height: auto;
+          background: linear-gradient(to bottom, #F9F5F0, #F7F2EA);
         }
 
         .info {
@@ -4081,29 +4098,29 @@ Ft.styles = b`
           line-height: var(--line-height-160);
         }
   `;
-let S = Ft;
-F([
+let P = Rt;
+R([
   a({ type: String })
-], S.prototype, "type");
-F([
+], P.prototype, "type");
+R([
   a({ type: String })
-], S.prototype, "titleProduct");
-F([
+], P.prototype, "titleProduct");
+R([
   a({ type: String })
-], S.prototype, "volume");
-F([
+], P.prototype, "volume");
+R([
   a({ type: String })
-], S.prototype, "perLiter");
-F([
+], P.prototype, "perLiter");
+R([
   a({ type: String })
-], S.prototype, "mainPrice");
-F([
+], P.prototype, "mainPrice");
+R([
   a({ type: String })
-], S.prototype, "imageUrl");
-F([
+], P.prototype, "imageUrl");
+R([
   a({ type: String })
-], S.prototype, "altImage");
-F([
+], P.prototype, "altImage");
+R([
   a({ type: Function })
-], S.prototype, "onClickTile");
-customElements.define("mini-tile", S);
+], P.prototype, "onClickTile");
+customElements.define("mini-tile", P);