@florid-kit/components 0.9.7 → 0.9.9

package/index.mjs

@@ -95,8 +95,8 @@ let it = class extends HTMLElement {
       this[e] = s;
     } };
     return { get: i, set(s) {
-      const c = i == null ? void 0 : i.call(this);
-      n == null || n.call(this, s), this.requestUpdate(t, c, r);
+      const h = i == null ? void 0 : i.call(this);
+      n == null || n.call(this, s), this.requestUpdate(t, h, r);
     }, configurable: !0, enumerable: !0 };
   }
   static getPropertyOptions(t) {
@@ -192,8 +192,8 @@ let it = class extends HTMLElement {
     var n, s;
     const r = this.constructor, i = r._$Eh.get(t);
     if (i !== void 0 && this._$Em !== i) {
-      const c = r.getPropertyOptions(i), h = typeof c.converter == "function" ? { fromAttribute: c.converter } : ((n = c.converter) == null ? void 0 : n.fromAttribute) !== void 0 ? c.converter : Ct;
-      this._$Em = i, this[i] = h.fromAttribute(e, c.type) ?? ((s = this._$Ej) == null ? void 0 : s.get(i)) ?? null, this._$Em = null;
+      const h = r.getPropertyOptions(i), c = typeof h.converter == "function" ? { fromAttribute: h.converter } : ((n = h.converter) == null ? void 0 : n.fromAttribute) !== void 0 ? h.converter : Ct;
+      this._$Em = i, this[i] = c.fromAttribute(e, h.type) ?? ((s = this._$Ej) == null ? void 0 : s.get(i)) ?? null, this._$Em = null;
     }
   }
   requestUpdate(t, e, r) {
@@ -231,8 +231,8 @@ let it = class extends HTMLElement {
       }
       const i = this.constructor.elementProperties;
       if (i.size > 0) for (const [n, s] of i) {
-        const { wrapped: c } = s, h = this[n];
-        c !== !0 || this._$AL.has(n) || h === void 0 || this.C(n, void 0, s, h);
+        const { wrapped: h } = s, c = this[n];
+        h !== !0 || this._$AL.has(n) || c === void 0 || this.C(n, void 0, s, c);
       }
     }
     let t = !1;
@@ -292,12 +292,12 @@ function ve(o, t) {
 const Ie = (o, t) => {
   const e = o.length - 1, r = [];
   let i, n = t === 2 ? "<svg>" : t === 3 ? "<math>" : "", s = at;
-  for (let c = 0; c < e; c++) {
-    const h = o[c];
-    let b, x, p = -1, k = 0;
-    for (; k < h.length && (s.lastIndex = k, x = s.exec(h), x !== null); ) k = s.lastIndex, s === at ? x[1] === "!--" ? s = ie : x[1] !== void 0 ? s = re : x[2] !== void 0 ? (ue.test(x[2]) && (i = RegExp("</" + x[2], "g")), s = J) : x[3] !== void 0 && (s = J) : s === J ? x[0] === ">" ? (s = i ?? at, p = -1) : x[1] === void 0 ? p = -2 : (p = s.lastIndex - x[2].length, b = x[1], s = x[3] === void 0 ? J : x[3] === '"' ? se : ne) : s === se || s === ne ? s = J : s === ie || s === re ? s = at : (s = J, i = void 0);
-    const B = s === J && o[c + 1].startsWith("/>") ? " " : "";
-    n += s === at ? h + Ee : p >= 0 ? (r.push(b), h.slice(0, p) + de + h.slice(p) + K + B) : h + K + (p === -2 ? c : B);
+  for (let h = 0; h < e; h++) {
+    const c = o[h];
+    let m, w, v = -1, R = 0;
+    for (; R < c.length && (s.lastIndex = R, w = s.exec(c), w !== null); ) R = s.lastIndex, s === at ? w[1] === "!--" ? s = ie : w[1] !== void 0 ? s = re : w[2] !== void 0 ? (ue.test(w[2]) && (i = RegExp("</" + w[2], "g")), s = J) : w[3] !== void 0 && (s = J) : s === J ? w[0] === ">" ? (s = i ?? at, v = -1) : w[1] === void 0 ? v = -2 : (v = s.lastIndex - w[2].length, m = w[1], s = w[3] === void 0 ? J : w[3] === '"' ? se : ne) : s === se || s === ne ? s = J : s === ie || s === re ? s = at : (s = J, i = void 0);
+    const q = s === J && o[h + 1].startsWith("/>") ? " " : "";
+    n += s === at ? c + Ee : v >= 0 ? (r.push(m), c.slice(0, v) + de + c.slice(v) + K + q) : c + K + (v === -2 ? h : q);
   }
   return [ve(o, n + (o[e] || "<?>") + (t === 2 ? "</svg>" : t === 3 ? "</math>" : "")), r];
 };
@@ -306,29 +306,29 @@ class ut {
     let i;
     this.parts = [];
     let n = 0, s = 0;
-    const c = t.length - 1, h = this.parts, [b, x] = Ie(t, e);
-    if (this.el = ut.createElement(b, r), Q.currentNode = this.el.content, e === 2 || e === 3) {
-      const p = this.el.content.firstChild;
-      p.replaceWith(...p.childNodes);
+    const h = t.length - 1, c = this.parts, [m, w] = Ie(t, e);
+    if (this.el = ut.createElement(m, r), Q.currentNode = this.el.content, e === 2 || e === 3) {
+      const v = this.el.content.firstChild;
+      v.replaceWith(...v.childNodes);
     }
-    for (; (i = Q.nextNode()) !== null && h.length < c; ) {
+    for (; (i = Q.nextNode()) !== null && c.length < h; ) {
       if (i.nodeType === 1) {
-        if (i.hasAttributes()) for (const p of i.getAttributeNames()) if (p.endsWith(de)) {
-          const k = x[s++], B = i.getAttribute(p).split(K), wt = /([.?@])?(.*)/.exec(k);
-          h.push({ type: 1, index: n, name: wt[2], strings: B, ctor: wt[1] === "." ? Oe : wt[1] === "?" ? ze : wt[1] === "@" ? Be : St }), i.removeAttribute(p);
-        } else p.startsWith(K) && (h.push({ type: 6, index: n }), i.removeAttribute(p));
+        if (i.hasAttributes()) for (const v of i.getAttributeNames()) if (v.endsWith(de)) {
+          const R = w[s++], q = i.getAttribute(v).split(K), wt = /([.?@])?(.*)/.exec(R);
+          c.push({ type: 1, index: n, name: wt[2], strings: q, ctor: wt[1] === "." ? Oe : wt[1] === "?" ? ze : wt[1] === "@" ? Be : St }), i.removeAttribute(v);
+        } else v.startsWith(K) && (c.push({ type: 6, index: n }), i.removeAttribute(v));
         if (ue.test(i.tagName)) {
-          const p = i.textContent.split(K), k = p.length - 1;
-          if (k > 0) {
+          const v = i.textContent.split(K), R = v.length - 1;
+          if (R > 0) {
             i.textContent = _t ? _t.emptyScript : "";
-            for (let B = 0; B < k; B++) i.append(p[B], dt()), Q.nextNode(), h.push({ type: 2, index: ++n });
-            i.append(p[k], dt());
+            for (let q = 0; q < R; q++) i.append(v[q], dt()), Q.nextNode(), c.push({ type: 2, index: ++n });
+            i.append(v[R], dt());
           }
         }
-      } else if (i.nodeType === 8) if (i.data === pe) h.push({ type: 2, index: n });
+      } else if (i.nodeType === 8) if (i.data === pe) c.push({ type: 2, index: n });
       else {
-        let p = -1;
-        for (; (p = i.data.indexOf(K, p + 1)) !== -1; ) h.push({ type: 7, index: n }), p += K.length - 1;
+        let v = -1;
+        for (; (v = i.data.indexOf(K, v + 1)) !== -1; ) c.push({ type: 7, index: n }), v += K.length - 1;
       }
       n++;
     }
@@ -339,11 +339,11 @@ class ut {
   }
 }
 function rt(o, t, e = o, r) {
-  var s, c;
+  var s, h;
   if (t === G) return t;
   let i = r !== void 0 ? (s = e._$Co) == null ? void 0 : s[r] : e._$Cl;
   const n = pt(t) ? void 0 : t._$litDirective$;
-  return (i == null ? void 0 : i.constructor) !== n && ((c = i == null ? void 0 : i._$AO) == null || c.call(i, !1), n === void 0 ? i = void 0 : (i = new n(o), i._$AT(o, e, r)), r !== void 0 ? (e._$Co ?? (e._$Co = []))[r] = i : e._$Cl = i), i !== void 0 && (t = rt(o, i._$AS(o, t.values), i, r)), t;
+  return (i == null ? void 0 : i.constructor) !== n && ((h = i == null ? void 0 : i._$AO) == null || h.call(i, !1), n === void 0 ? i = void 0 : (i = new n(o), i._$AT(o, e, r)), r !== void 0 ? (e._$Co ?? (e._$Co = []))[r] = i : e._$Cl = i), i !== void 0 && (t = rt(o, i._$AS(o, t.values), i, r)), t;
 }
 class Pe {
   constructor(t, e) {
@@ -358,13 +358,13 @@ class Pe {
   u(t) {
     const { el: { content: e }, parts: r } = this._$AD, i = ((t == null ? void 0 : t.creationScope) ?? tt).importNode(e, !0);
     Q.currentNode = i;
-    let n = Q.nextNode(), s = 0, c = 0, h = r[0];
-    for (; h !== void 0; ) {
-      if (s === h.index) {
-        let b;
-        h.type === 2 ? b = new mt(n, n.nextSibling, this, t) : h.type === 1 ? b = new h.ctor(n, h.name, h.strings, this, t) : h.type === 6 && (b = new De(n, this, t)), this._$AV.push(b), h = r[++c];
+    let n = Q.nextNode(), s = 0, h = 0, c = r[0];
+    for (; c !== void 0; ) {
+      if (s === c.index) {
+        let m;
+        c.type === 2 ? m = new mt(n, n.nextSibling, this, t) : c.type === 1 ? m = new c.ctor(n, c.name, c.strings, this, t) : c.type === 6 && (m = new De(n, this, t)), this._$AV.push(m), c = r[++h];
       }
-      s !== (h == null ? void 0 : h.index) && (n = Q.nextNode(), s++);
+      s !== (c == null ? void 0 : c.index) && (n = Q.nextNode(), s++);
     }
     return Q.currentNode = tt, i;
   }
@@ -409,8 +409,8 @@ class mt {
     const { values: e, _$litType$: r } = t, i = typeof r == "number" ? this._$AC(t) : (r.el === void 0 && (r.el = ut.createElement(ve(r.h, r.h[0]), this.options)), r);
     if (((n = this._$AH) == null ? void 0 : n._$AD) === i) this._$AH.p(e);
     else {
-      const s = new Pe(i, this), c = s.u(this.options);
-      s.p(e), this.T(c), this._$AH = s;
+      const s = new Pe(i, this), h = s.u(this.options);
+      s.p(e), this.T(h), this._$AH = s;
     }
   }
   _$AC(t) {
@@ -451,9 +451,9 @@ class St {
     let s = !1;
     if (n === void 0) t = rt(this, t, e, 0), s = !pt(t) || t !== this._$AH && t !== G, s && (this._$AH = t);
     else {
-      const c = t;
-      let h, b;
-      for (t = n[0], h = 0; h < n.length - 1; h++) b = rt(this, c[r + h], e, h), b === G && (b = this._$AH[h]), s || (s = !pt(b) || b !== this._$AH[h]), b === d ? t = d : t !== d && (t += (b ?? "") + n[h + 1]), this._$AH[h] = b;
+      const h = t;
+      let c, m;
+      for (t = n[0], c = 0; c < n.length - 1; c++) m = rt(this, h[r + c], e, c), m === G && (m = this._$AH[c]), s || (s = !pt(m) || m !== this._$AH[c]), m === d ? t = d : t !== d && (t += (m ?? "") + n[c + 1]), this._$AH[c] = m;
     }
     s && !i && this.j(t);
   }
@@ -519,7 +519,7 @@ const He = (o, t, e) => {
  * SPDX-License-Identifier: BSD-3-Clause
  */
 const Y = globalThis;
-let v = class extends it {
+let u = class extends it {
   constructor() {
     super(...arguments), this.renderOptions = { host: this }, this._$Do = void 0;
   }
@@ -545,16 +545,16 @@ let v = class extends it {
   }
 };
 var ce;
-v._$litElement$ = !0, v.finalized = !0, (ce = Y.litElementHydrateSupport) == null || ce.call(Y, { LitElement: v });
+u._$litElement$ = !0, u.finalized = !0, (ce = Y.litElementHydrateSupport) == null || ce.call(Y, { LitElement: u });
 const Ot = Y.litElementPolyfillSupport;
-Ot == null || Ot({ LitElement: v });
+Ot == null || Ot({ LitElement: u });
 (Y.litElementVersions ?? (Y.litElementVersions = [])).push("4.2.0");
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const m = (o) => (t, e) => {
+const y = (o) => (t, e) => {
   e !== void 0 ? e.addInitializer(() => {
     customElements.define(o, t);
   }) : customElements.define(o, t);
@@ -569,18 +569,18 @@ const Me = { attribute: !0, type: String, converter: Ct, reflect: !1, hasChanged
   let n = globalThis.litPropertyMetadata.get(i);
   if (n === void 0 && globalThis.litPropertyMetadata.set(i, n = /* @__PURE__ */ new Map()), r === "setter" && ((o = Object.create(o)).wrapped = !0), n.set(e.name, o), r === "accessor") {
     const { name: s } = e;
-    return { set(c) {
-      const h = t.get.call(this);
-      t.set.call(this, c), this.requestUpdate(s, h, o);
-    }, init(c) {
-      return c !== void 0 && this.C(s, void 0, o, c), c;
+    return { set(h) {
+      const c = t.get.call(this);
+      t.set.call(this, h), this.requestUpdate(s, c, o);
+    }, init(h) {
+      return h !== void 0 && this.C(s, void 0, o, h), h;
     } };
   }
   if (r === "setter") {
     const { name: s } = e;
-    return function(c) {
-      const h = this[s];
-      t.call(this, c), this.requestUpdate(s, h, o);
+    return function(h) {
+      const c = this[s];
+      t.call(this, h), this.requestUpdate(s, c, o);
     };
   }
   throw Error("Unsupported decorator location: " + r);
@@ -613,8 +613,8 @@ const je = (o, t, e) => (e.configurable = !0, e.enumerable = !0, Reflect.decorat
 function fe(o, t) {
   return (e, r, i) => {
     const n = (s) => {
-      var c;
-      return ((c = s.renderRoot) == null ? void 0 : c.querySelector(o)) ?? null;
+      var h;
+      return ((h = s.renderRoot) == null ? void 0 : h.querySelector(o)) ?? null;
     };
     return je(e, r, { get() {
       return n(this);
@@ -636,7 +636,7 @@ f`
  * SPDX-License-Identifier: Apache-2.0
  */
 const Nt = Symbol("internals"), zt = Symbol("privateInternals");
-function Ft(o) {
+function Ut(o) {
   var t;
   class e extends o {
     get [(t = Nt, t)]() {
@@ -655,8 +655,8 @@ function Re(o) {
     const e = t;
     e.addEventListener("click", async (r) => {
       const { type: i, [Nt]: n } = e, { form: s } = n;
-      if (!(!s || i === "button") && (await new Promise((c) => {
-        setTimeout(c);
+      if (!(!s || i === "button") && (await new Promise((h) => {
+        setTimeout(h);
       }), !r.defaultPrevented)) {
         if (i === "reset") {
           s.reset();
@@ -664,8 +664,8 @@ function Re(o) {
         }
         s.addEventListener(
           "submit",
-          (c) => {
-            Object.defineProperty(c, "submitter", {
+          (h) => {
+            Object.defineProperty(h, "submitter", {
               configurable: !0,
               enumerable: !0,
               get: () => e
@@ -680,10 +680,10 @@ function Re(o) {
 const Ne = `<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>
-`, Fe = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+`, Ue = `<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>
-`, Ue = `<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="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>
 `, Ve = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -772,10 +772,10 @@ const Ne = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="h
 </svg>
 `, bo = `<svg xmlns="http://www.w3.org/2000/svg" width="10" height="8" viewBox="0 0 10 8" fill="none">
 <path d="M1 4.5415L3 6.5415L9 0.541504" stroke="#FBF9F6" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>`, F = {
+</svg>`, N = {
   wishlist: Ne,
-  playerv: Fe,
-  chevronRight: Ue,
+  playerv: Ue,
+  chevronRight: Fe,
   chevronLeft: Ve,
   icoPlus: Qe,
   icoMinus: Ye,
@@ -810,7 +810,7 @@ const Ne = `<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 Ut = { ATTRIBUTE: 1, CHILD: 2 }, Vt = (o) => (...t) => ({ _$litDirective$: o, values: t });
+const Ft = { ATTRIBUTE: 1, CHILD: 2 }, Vt = (o) => (...t) => ({ _$litDirective$: o, values: t });
 let Zt = class {
   constructor(t) {
   }
@@ -834,7 +834,7 @@ let Zt = class {
  */
 class Bt extends Zt {
   constructor(t) {
-    if (super(t), this.it = d, t.type !== Ut.CHILD) throw Error(this.constructor.directiveName + "() can only be used in child bindings");
+    if (super(t), this.it = d, t.type !== Ft.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;
@@ -856,13 +856,13 @@ class Dt extends Bt {
 }
 Dt.directiveName = "unsafeSVG", Dt.resultType = 2;
 const C = Vt(Dt);
-var mo = Object.defineProperty, xo = Object.getOwnPropertyDescriptor, w = (o, t, e, r) => {
+var mo = Object.defineProperty, xo = Object.getOwnPropertyDescriptor, x = (o, t, e, r) => {
   for (var i = r > 1 ? void 0 : r ? xo(t, e) : t, n = o.length - 1, s; n >= 0; n--)
     (s = o[n]) && (i = (r ? s(t, e, i) : s(i)) || i);
   return r && i && mo(t, e, i), i;
 };
-const wo = Ft(v);
-let g = class extends wo {
+const wo = Ut(u);
+let b = class extends wo {
   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, this.withbadge = !1;
   }
@@ -887,7 +887,7 @@ let g = class extends wo {
   renderIcon(o) {
     const t = o === "start" ? this.startIconModel : this.endIconModel;
     if (!t) return d;
-    const e = F[t].replace(
+    const e = N[t].replace(
       "<svg",
       '<svg aria-hidden="true" focusable="false" part="svg"'
     );
@@ -926,9 +926,9 @@ let g = class extends wo {
     `;
   }
 };
-Re(g);
-g.formAssociated = !0;
-g.styles = f`
+Re(b);
+b.formAssociated = !0;
+b.styles = f`
     :host {
       --button-border: transparent;
       --badge-outer-width: 19px;
@@ -1130,63 +1130,63 @@ g.styles = f`
     }
     //End icon movment on hover
   `;
-w([
+x([
   a()
-], g.prototype, "type", 2);
-w([
+], b.prototype, "type", 2);
+x([
   a({ reflect: !0 })
-], g.prototype, "value", 2);
-w([
+], b.prototype, "value", 2);
+x([
   a({ type: String, reflect: !0 })
-], g.prototype, "variant", 2);
-w([
+], b.prototype, "variant", 2);
+x([
   a({ type: String })
-], g.prototype, "text", 2);
-w([
+], b.prototype, "text", 2);
+x([
   a({ type: String })
-], g.prototype, "textsecond", 2);
-w([
+], b.prototype, "textsecond", 2);
+x([
   a({ type: Boolean, reflect: !0 })
-], g.prototype, "fullwidth", 2);
-w([
+], b.prototype, "fullwidth", 2);
+x([
   a({ type: Boolean, reflect: !0 })
-], g.prototype, "disabled", 2);
-w([
+], b.prototype, "disabled", 2);
+x([
   a({ type: String, reflect: !0 })
-], g.prototype, "startIconModel", 2);
-w([
+], b.prototype, "startIconModel", 2);
+x([
   a({ type: String, reflect: !0 })
-], g.prototype, "endIconModel", 2);
-w([
+], b.prototype, "endIconModel", 2);
+x([
   a({ type: Boolean, reflect: !0, attribute: "starticon" })
-], g.prototype, "startIcon", 2);
-w([
+], b.prototype, "startIcon", 2);
+x([
   a({ type: Boolean, reflect: !0, attribute: "endicon" })
-], g.prototype, "endIcon", 2);
-w([
+], b.prototype, "endIcon", 2);
+x([
   a({ type: String, attribute: "paneltarget", reflect: !0 })
-], g.prototype, "panelTarget", 2);
-w([
+], b.prototype, "panelTarget", 2);
+x([
   a({ type: String })
-], g.prototype, "href", 2);
-w([
+], b.prototype, "href", 2);
+x([
   a({ type: String })
-], g.prototype, "target", 2);
-w([
+], b.prototype, "target", 2);
+x([
   a({ type: Boolean, reflect: !0 })
-], g.prototype, "underlined", 2);
-w([
+], b.prototype, "underlined", 2);
+x([
   a({ type: Boolean, reflect: !0 })
-], g.prototype, "withbadge", 2);
-g = w([
-  m("o-button")
-], g);
+], b.prototype, "withbadge", 2);
+b = x([
+  y("o-button")
+], b);
 var $o = Object.defineProperty, Co = Object.getOwnPropertyDescriptor, Et = (o, t, e, r) => {
   for (var i = r > 1 ? void 0 : r ? Co(t, e) : t, n = o.length - 1, s; n >= 0; n--)
     (s = o[n]) && (i = (r ? s(t, e, i) : s(i)) || i);
   return r && i && $o(t, e, i), i;
 };
-let nt = class extends v {
+let nt = class extends u {
   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", {
@@ -1206,7 +1206,7 @@ let nt = class extends v {
     (o.key === "Enter" || o.key === " ") && (o.preventDefault(), this.toggleStatus());
   }
   render() {
-    const o = F.wishlist.replace(
+    const o = N.wishlist.replace(
       "<svg",
       '<svg aria-hidden="true" focusable="false" part="svg"'
     );
@@ -1303,20 +1303,20 @@ Et([
   a({ type: String, reflect: !0 })
 ], nt.prototype, "label", 2);
 nt = Et([
-  m("o-wishlist-button")
+  y("o-wishlist-button")
 ], nt);
 /**
  * @license
  * Copyright 2018 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const S = (o) => o ?? d;
-var _o = Object.defineProperty, ko = Object.getOwnPropertyDescriptor, T = (o, t, e, r) => {
+const k = (o) => o ?? d;
+var _o = Object.defineProperty, ko = Object.getOwnPropertyDescriptor, H = (o, t, e, r) => {
   for (var i = r > 1 ? void 0 : r ? ko(t, e) : t, n = o.length - 1, s; n >= 0; n--)
     (s = o[n]) && (i = (r ? s(t, e, i) : s(i)) || i);
   return r && i && _o(t, e, i), i;
 };
-let E = class extends v {
+let S = class extends u {
   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 = "";
   }
@@ -1324,7 +1324,7 @@ let E = class extends v {
     super.updated(o), this.style.setProperty("--icon-stroke-width", this.strokewidth);
   }
   render() {
-    const o = F[this.icon] ?? "", t = `icon-${this.icon}`, e = o.replace("<svg", '<svg aria-hidden="true" focusable="false" part="svg"').replace(/<path\b/g, '<path part="icon-path"').replace(/<g\b/g, '<g part="icon-group"').replace(/<circle\b/g, '<circle part="icon-circle"'), r = this.showSrLabel ? l`<span class="sr-only">${this.srLabel}</span>` : null, i = this.showSrLabel ? null : "icon";
+    const o = N[this.icon] ?? "", t = `icon-${this.icon}`, e = o.replace("<svg", '<svg aria-hidden="true" focusable="false" part="svg"').replace(/<path\b/g, '<path part="icon-path"').replace(/<g\b/g, '<g part="icon-group"').replace(/<circle\b/g, '<circle part="icon-circle"'), r = this.showSrLabel ? l`<span class="sr-only">${this.srLabel}</span>` : null, i = this.showSrLabel ? null : "icon";
     return l`
 			${this.type === "span" ? l`
 				<span class="icon icon-button ${this.size} ${this.bgstyle} ${this.status} ${t}" ?disabled="${this.disabled}">	
@@ -1333,7 +1333,7 @@ let E = class extends v {
 			` : l`
 				<button
 					type="button"
-					aria-label=${S(i)}
+					aria-label=${k(i)}
 					class="icon-button ${this.size} ${this.bgstyle} ${this.status} ${t}"
 					?disabled="${this.disabled}"
 				>
@@ -1344,7 +1344,7 @@ let E = class extends v {
 		`;
   }
 };
-E.styles = f`
+S.styles = f`
 		:host {
 			display: inline-flex;
 			justify-content: center;
@@ -1556,42 +1556,42 @@ E.styles = f`
 			display: none;
 		}
 	`;
-T([
+H([
   a({ type: String, reflect: !0 })
-], E.prototype, "bgstyle", 2);
-T([
+], S.prototype, "bgstyle", 2);
+H([
   a({ type: String, reflect: !0 })
-], E.prototype, "size", 2);
-T([
+], S.prototype, "size", 2);
+H([
   a({ type: String, reflect: !0 })
-], E.prototype, "status", 2);
-T([
+], S.prototype, "status", 2);
+H([
   a({ type: String, reflect: !0 })
-], E.prototype, "type", 2);
-T([
+], S.prototype, "type", 2);
+H([
   a({ type: String })
-], E.prototype, "strokewidth", 2);
-T([
+], S.prototype, "strokewidth", 2);
+H([
   a({ type: String })
-], E.prototype, "icon", 2);
-T([
+], S.prototype, "icon", 2);
+H([
   a({ type: Boolean, reflect: !0 })
-], E.prototype, "disabled", 2);
-T([
+], S.prototype, "disabled", 2);
+H([
   a({ type: Boolean })
-], E.prototype, "showSrLabel", 2);
-T([
+], S.prototype, "showSrLabel", 2);
+H([
   a({ type: String })
-], E.prototype, "srLabel", 2);
-E = T([
-  m("o-icon-button")
-], E);
+], S.prototype, "srLabel", 2);
+S = H([
+  y("o-icon-button")
+], S);
 var So = Object.defineProperty, Eo = Object.getOwnPropertyDescriptor, ot = (o, t, e, r) => {
   for (var i = r > 1 ? void 0 : r ? Eo(t, e) : t, n = o.length - 1, s; n >= 0; n--)
     (s = o[n]) && (i = (r ? s(t, e, i) : s(i)) || i);
   return r && i && So(t, e, i), i;
 };
-let U = class extends v {
+let U = class extends u {
   constructor() {
     super(...arguments), this.href = "", this.target = "", this.template = "standard", this.inverse = !1, this.endIcon = !1, this.reverseEndIcon = !1;
   }
@@ -1603,7 +1603,7 @@ let U = class extends v {
     return l`
             <a 
                 href="${o}" 
-                target="${S(this.target || void 0)}"
+                target="${k(this.target || void 0)}"
                 @click="${this._handleClick}"
             >
                 ${this.endIcon && this.reverseEndIcon ? l`
@@ -1736,14 +1736,14 @@ ot([
   a({ type: Boolean, reflect: !0 })
 ], U.prototype, "reverseEndIcon", 2);
 U = ot([
-  m("o-link")
+  y("o-link")
 ], U);
 var Ao = Object.defineProperty, Lo = Object.getOwnPropertyDescriptor, At = (o, t, e, r) => {
   for (var i = r > 1 ? void 0 : r ? Lo(t, e) : t, n = o.length - 1, s; n >= 0; n--)
     (s = o[n]) && (i = (r ? s(t, e, i) : s(i)) || i);
   return r && i && Ao(t, e, i), i;
 };
-let st = class extends v {
+let st = class extends u {
   constructor() {
     super(...arguments), this.rating = 0;
   }
@@ -1762,7 +1762,7 @@ let st = class extends v {
 			<div class="rating">
 			<div class="stars">
 				${o.map(
-      (t) => l`<span class="star">${C(F[t] ?? "")}</span>`
+      (t) => l`<span class="star">${C(N[t] ?? "")}</span>`
     )}
 			</div>
 			${this.reviewCount != null && this.href != null ? l`<o-link template="review" href="${this.href}">${this.reviewCount}</o-link>` : null}
@@ -1814,7 +1814,7 @@ At([
   a({ type: String })
 ], st.prototype, "href", 2);
 st = At([
-  m("o-rating")
+  y("o-rating")
 ], st);
 /**
  * @license
@@ -1857,7 +1857,7 @@ function Oo(o, t = !1, e = 0) {
   else ht(this, o);
 }
 const zo = (o) => {
-  o.type == Ut.CHILD && (o._$AP ?? (o._$AP = Oo), o._$AQ ?? (o._$AQ = Po));
+  o.type == Ft.CHILD && (o._$AP ?? (o._$AP = Oo), o._$AQ ?? (o._$AQ = Po));
 };
 class Bo extends Zt {
   constructor() {
@@ -2003,12 +2003,12 @@ class Mo extends Ho {
   }
 }
 const le = Vt(Mo);
-var To = Object.defineProperty, jo = Object.getOwnPropertyDescriptor, y = (o, t, e, r) => {
+var To = Object.defineProperty, jo = Object.getOwnPropertyDescriptor, g = (o, t, e, r) => {
   for (var i = r > 1 ? void 0 : r ? jo(t, e) : t, n = o.length - 1, s; n >= 0; n--)
     (s = o[n]) && (i = (r ? s(t, e, i) : s(i)) || i);
   return r && i && To(t, e, i), i;
 };
-let u = class extends v {
+let p = class extends u {
   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.showDetail = !1, this.isHidingDetail = !1, this.previousFocusedElement = null, this.innerFocusedElement = null, this._onOpenDetail = () => {
       this.showDetail = !0, this.showHeaderStartIcon = !0;
@@ -2043,13 +2043,22 @@ let u = class extends v {
   disconnectedCallback() {
     document.body.style.overflow = "", document.body.removeAttribute("data-side-panel"), this.removeEventListener("keydown", this.handleKeyDown), super.disconnectedCallback(), this.removeEventListener("open-detail", this._onOpenDetail);
   }
+  getDeepActiveElement(o = this.shadowRoot) {
+    let t = o.activeElement;
+    for (; t && t.shadowRoot && t.shadowRoot.activeElement; )
+      t = t.shadowRoot.activeElement;
+    return t;
+  }
   trapFocus(o) {
-    var i, n, s, c, h, b, x, p, k, B;
-    this.innerFocusedElement = document.activeElement || null, this.innerFocusedElement = ((n = (i = this.innerFocusedElement) == null ? void 0 : i.shadowRoot) == null ? void 0 : n.activeElement) || this.innerFocusedElement;
-    const t = this.getFocusableElements();
-    if (t.length === 0) return;
-    const e = t[0], r = t[t.length - 1];
-    o.shiftKey && this.innerFocusedElement === e ? (o.preventDefault(), r.shadowRoot ? (h = (c = (s = r.shadowRoot) == null ? void 0 : s.querySelector(u.focusablesSelector)) == null ? void 0 : c.focus) == null || h.call(c) : (b = r.focus) == null || b.call(r)) : !o.shiftKey && this.innerFocusedElement === r && (o.preventDefault(), e.shadowRoot ? (k = (p = (x = e.shadowRoot) == null ? void 0 : x.querySelector(u.focusablesSelector)) == null ? void 0 : p.focus) == null || k.call(p) : (B = e.focus) == null || B.call(e));
+    if (o.key !== "Tab") return;
+    const t = this.getDeepActiveElement(), e = this.renderRoot.querySelector(".close-btn");
+    if (!o.shiftKey && e && e.contains(t)) {
+      o.preventDefault();
+      const r = this.renderRoot.querySelector(
+        ".o-whats-inside--content p"
+      );
+      r == null || r.focus();
+    }
   }
   getFocusableElements() {
     const o = this.renderRoot.querySelector(".panel");
@@ -2059,36 +2068,40 @@ let u = class extends v {
     }
     function e(i) {
       var s;
-      const n = [i.matches(u.focusablesSelector) ? i : []];
+      const n = [i.matches(p.focusablesSelector) ? i : []];
       if (!["o-icon-button", "o-button"].includes(i.tagName.toLowerCase())) {
-        const c = Array.from(
+        const h = Array.from(
           i instanceof HTMLSlotElement ? i.assignedElements({ flatten: !0 }) : []
-        ).filter(t).flatMap(e), h = Array.from(
+        ).filter(t).flatMap(e), c = Array.from(
           ((s = i.shadowRoot) == null ? void 0 : s.querySelectorAll("*")) || []
         ).filter(t).flatMap(e);
-        n.push(...c, ...h);
+        n.push(...h, ...c);
       }
       return n.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, r;
+    this.removeAttribute("hidden"), this.getBoundingClientRect(), this.previousFocusedElement = document.activeElement, this.open = !0, document.body.style.overflow = "hidden", document.body.setAttribute("data-side-panel", "open");
+    const o = this.renderRoot.querySelector(".panel");
+    o && o.setAttribute("aria-modal", "true"), this.updateComplete.then(() => {
+      var t, e, r, i;
       if (this.showHeader) {
-        const i = ((o = this.shadowRoot) == null ? void 0 : o.querySelector(".panel .close-btn")) || null, n = ((t = i == null ? void 0 : i.shadowRoot) == null ? void 0 : t.querySelector("button")) || null;
-        n && ((e = n.focus) == null || e.call(n));
+        const n = ((t = this.shadowRoot) == null ? void 0 : t.querySelector(".panel .close-btn")) || null, s = ((e = n == null ? void 0 : n.shadowRoot) == null ? void 0 : e.querySelector("button")) || null;
+        s && ((r = s.focus) == null || r.call(s));
       } else {
-        const i = this.getFocusableElements()[0];
-        (r = i == null ? void 0 : i.focus) == null || r.call(i);
+        const n = this.getFocusableElements()[0];
+        (i = n == null ? void 0 : n.focus) == null || i.call(n);
       }
     }), this.dispatchEvent(
       new CustomEvent("open", { bubbles: !0, composed: !0 })
     );
   }
   closePanel() {
-    var o, t, e, r, i;
-    this.open = !1, this.showDetail = !1, document.body.style.overflow = "", document.body.removeAttribute("data-side-panel"), ((o = this.previousFocusedElement) == null ? void 0 : o.tagName.toLowerCase()) === "o-button" ? (r = (e = (t = this.previousFocusedElement.shadowRoot) == null ? void 0 : t.querySelector(".button")) == null ? void 0 : e.focus) == null || r.call(e) : (i = this.previousFocusedElement) == null || i.focus(), this.dispatchEvent(
+    var t, e, r, i, n;
+    this.open = !1, this.showDetail = !1, document.body.style.overflow = "", document.body.removeAttribute("data-side-panel"), ((t = this.previousFocusedElement) == null ? void 0 : t.tagName.toLowerCase()) === "o-button" ? (i = (r = (e = this.previousFocusedElement.shadowRoot) == null ? void 0 : e.querySelector(".button")) == null ? void 0 : r.focus) == null || i.call(r) : (n = this.previousFocusedElement) == null || n.focus();
+    const o = this.renderRoot.querySelector(".panel");
+    o && o.removeAttribute("aria-modal"), this.dispatchEvent(
       new CustomEvent("close", { bubbles: !0, composed: !0 })
     );
   }
@@ -2119,7 +2132,9 @@ let u = class extends v {
     ));
   }
   updated() {
-    this.style.setProperty("--z-overlay", `${this.zIndex || 99}`), this.style.setProperty("--z-panel", `${this.zIndex ? this.zIndex + 1 : 99}`);
+    this.style.setProperty("--z-overlay", `${this.zIndex || 99}`), this.style.setProperty("--z-panel", `${this.zIndex ? this.zIndex + 1 : 99}`), this.open || setTimeout(() => {
+      this.setAttribute("hidden", "hidden");
+    }, 500);
   }
   render() {
     const o = this.showHeader ? l`
@@ -2136,9 +2151,9 @@ let u = class extends v {
 					aria-label="${this.closeButtonLabel}"
 				></o-icon-button>
 				` : null}
-				<h2 id="panel-title" class="${this.headerTitleClassName}">
+				<p role="heading" aria-level="1" id="panel-title" class="${this.headerTitleClassName}">
 				${this.headerTitle}
-				</h2>
+				</p>
 				<o-icon-button
 				icon="cross"
 				size="small"
@@ -2148,6 +2163,8 @@ let u = class extends v {
 				@keydown=${this.handleClosePanel}
 				aria-label="${this.closeButtonLabel}"
 				aria-describedby="panel-title"
+				srlabel="${this.closeButtonLabel}"
+        		showsrlabel="true"
 				></o-icon-button>
 			</div>
 			` : null;
@@ -2161,51 +2178,52 @@ let u = class extends v {
 				style="z-index: ${this.zIndex + 1}"
 				tabindex="-1"
 			>
-
-				${o}
-
-				<div class="content ${this.isHidingDetail ? "slide-out-right" : ""} ${this.showDetail ? "with-detail" : ""}">
-				
-				${this.showDetail ? l`
-						<div class="detail-view">
-							${o}
-							<div class="detail-content">
-								<slot name="detail"></slot>
+				<div role="document">
+					${o}
+
+					<div class="content ${this.isHidingDetail ? "slide-out-right" : ""} ${this.showDetail ? "with-detail" : ""}">
+					
+					${this.showDetail ? l`
+							<div class="detail-view">
+								${o}
+								<div class="detail-content">
+									<slot name="detail"></slot>
+								</div>
 							</div>
-						</div>
-					` : l`<slot></slot>`}
-				</div>
-
-				${this.showFooter ? l`
-							<div class="footer">
-								${this.firstButtonVariant && this.firstButtonLabel ? l`
-							<o-button
-								variant="${this.firstButtonVariant}"
-								@click=${this.handleFirstClick}
-								@keydown=${this.handleFirstClick}
-								${le(this.firstButtonProps)}
-							>
-								${this.firstButtonLabel}
-							</o-button>
-						` : null}
-
-								${this.secondButtonVariant && this.secondButtonLabel ? l`
-							<o-button
-								variant="${this.secondButtonVariant}"
-								@click=${this.handleSecondClick}
-								@keydown=${this.handleSecondClick}
-								${le(this.secondButtonProps)}
-							>
-								${this.secondButtonLabel}
-							</o-button>
+						` : l`<slot></slot>`}
+					</div>
+
+					${this.showFooter ? l`
+								<div class="footer">
+									${this.firstButtonVariant && this.firstButtonLabel ? l`
+								<o-button
+									variant="${this.firstButtonVariant}"
+									@click=${this.handleFirstClick}
+									@keydown=${this.handleFirstClick}
+									${le(this.firstButtonProps)}
+								>
+									${this.firstButtonLabel}
+								</o-button>
+							` : null}
+
+									${this.secondButtonVariant && this.secondButtonLabel ? l`
+								<o-button
+									variant="${this.secondButtonVariant}"
+									@click=${this.handleSecondClick}
+									@keydown=${this.handleSecondClick}
+									${le(this.secondButtonProps)}
+								>
+									${this.secondButtonLabel}
+								</o-button>
+							` : null}
+								</div>
 						` : null}
-							</div>
-					` : null}
+				</div>
 			</div>
 		`;
   }
 };
-u.styles = f`
+p.styles = f`
 		:host {
 			--z-overlay: 99;
 			--z-panel: 100;
@@ -2305,9 +2323,7 @@ u.styles = f`
 			}
 		}
 
-		.panel:focus,
 		.panel:focus-visible,
-		.close-btn:focus,
 		.close-btn:focus-visible {
 			${xt}
 		}
@@ -2394,77 +2410,77 @@ u.styles = f`
 			padding: var(--spacing-xl);
 		}
 	`;
-u.focusablesSelector = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"]), o-icon-button, o-button';
-u.focusablesCustomElementsSelector = "o-icon-button, o-button";
-y([
+p.focusablesSelector = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"]), o-icon-button, o-button';
+p.focusablesCustomElementsSelector = "o-icon-button, o-button";
+g([
   a({ type: Boolean, reflect: !0 })
-], u.prototype, "open", 2);
-y([
+], p.prototype, "open", 2);
+g([
   a({ type: Boolean, reflect: !0 })
-], u.prototype, "showHeader", 2);
-y([
+], p.prototype, "showHeader", 2);
+g([
   a({ type: Boolean, reflect: !0 })
-], u.prototype, "showFooter", 2);
-y([
+], p.prototype, "showFooter", 2);
+g([
   a({ type: Boolean, reflect: !0 })
-], u.prototype, "showHeaderStartIcon", 2);
-y([
+], p.prototype, "showHeaderStartIcon", 2);
+g([
   a({ type: String, reflect: !0 })
-], u.prototype, "headerTitle", 2);
-y([
+], p.prototype, "headerTitle", 2);
+g([
   a({ type: String, reflect: !0 })
-], u.prototype, "headerTitleClassName", 2);
-y([
+], p.prototype, "headerTitleClassName", 2);
+g([
   a({ type: String, reflect: !0 })
-], u.prototype, "closeButtonLabel", 2);
-y([
+], p.prototype, "closeButtonLabel", 2);
+g([
   a({ type: String, reflect: !0 })
-], u.prototype, "firstButtonLabel", 2);
-y([
+], p.prototype, "firstButtonLabel", 2);
+g([
   a({ type: String, reflect: !0 })
-], u.prototype, "firstButtonVariant", 2);
-y([
+], p.prototype, "firstButtonVariant", 2);
+g([
   a({ type: Object, reflect: !0 })
-], u.prototype, "firstButtonProps", 2);
-y([
+], p.prototype, "firstButtonProps", 2);
+g([
   a({ type: Boolean, reflect: !0 })
-], u.prototype, "onFirstButtonClickClose", 2);
-y([
+], p.prototype, "onFirstButtonClickClose", 2);
+g([
   a({ type: String, reflect: !0 })
-], u.prototype, "secondButtonLabel", 2);
-y([
+], p.prototype, "secondButtonLabel", 2);
+g([
   a({ type: String, reflect: !0 })
-], u.prototype, "secondButtonVariant", 2);
-y([
+], p.prototype, "secondButtonVariant", 2);
+g([
   a({ type: Object, reflect: !0 })
-], u.prototype, "secondButtonProps", 2);
-y([
+], p.prototype, "secondButtonProps", 2);
+g([
   a({ type: Boolean, reflect: !0 })
-], u.prototype, "onSecondButtonClickClose", 2);
-y([
+], p.prototype, "onSecondButtonClickClose", 2);
+g([
   a({ type: Boolean, reflect: !0 })
-], u.prototype, "disablePortal", 2);
-y([
+], p.prototype, "disablePortal", 2);
+g([
   a({ type: Number, reflect: !0 })
-], u.prototype, "zIndex", 2);
-y([
+], p.prototype, "zIndex", 2);
+g([
   a({ type: Boolean, reflect: !0 })
-], u.prototype, "initialized", 2);
-y([
+], p.prototype, "initialized", 2);
+g([
   a({ type: Boolean })
-], u.prototype, "showDetail", 2);
-y([
+], p.prototype, "showDetail", 2);
+g([
   a({ type: Boolean })
-], u.prototype, "isHidingDetail", 2);
-u = y([
-  m("o-side-panel")
-], u);
+], p.prototype, "isHidingDetail", 2);
+p = g([
+  y("o-side-panel")
+], p);
 var Ro = Object.defineProperty, No = Object.getOwnPropertyDescriptor, X = (o, t, e, r) => {
   for (var i = r > 1 ? void 0 : r ? No(t, e) : t, n = o.length - 1, s; n >= 0; n--)
     (s = o[n]) && (i = (r ? s(t, e, i) : s(i)) || i);
   return r && i && Ro(t, e, i), i;
 };
-let M = class extends v {
+let D = class extends u {
   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
@@ -2555,7 +2571,7 @@ let M = class extends v {
     `;
   }
 };
-M.styles = f`
+D.styles = f`
     :host {
       display: flex;
       gap: 5px;
@@ -2663,34 +2679,34 @@ M.styles = f`
   `;
 X([
   a({ type: Array })
-], M.prototype, "thumbnails", 2);
+], D.prototype, "thumbnails", 2);
 X([
   a({ type: Number })
-], M.prototype, "activeIndex", 2);
+], D.prototype, "activeIndex", 2);
 X([
   a({ type: Array })
-], M.prototype, "disabledIndexes", 2);
+], D.prototype, "disabledIndexes", 2);
 X([
   a({ type: String })
-], M.prototype, "maxWidth", 2);
+], D.prototype, "maxWidth", 2);
 X([
   a({ type: String })
-], M.prototype, "altressource", 2);
+], D.prototype, "altressource", 2);
 X([
   a({ type: Object })
-], M.prototype, "swiperInstance", 2);
+], D.prototype, "swiperInstance", 2);
 X([
   et()
-], M.prototype, "focusedIndex", 2);
-M = X([
-  m("thumbnail-navigation")
-], M);
-var Fo = Object.defineProperty, Uo = Object.getOwnPropertyDescriptor, qt = (o, t, e, r) => {
-  for (var i = r > 1 ? void 0 : r ? Uo(t, e) : t, n = o.length - 1, s; n >= 0; n--)
+], D.prototype, "focusedIndex", 2);
+D = X([
+  y("thumbnail-navigation")
+], D);
+var Uo = Object.defineProperty, Fo = Object.getOwnPropertyDescriptor, qt = (o, t, e, r) => {
+  for (var i = r > 1 ? void 0 : r ? Fo(t, e) : t, n = o.length - 1, s; n >= 0; n--)
     (s = o[n]) && (i = (r ? s(t, e, i) : s(i)) || i);
-  return r && i && Fo(t, e, i), i;
+  return r && i && Uo(t, e, i), i;
 };
-let vt = class extends v {
+let vt = class extends u {
   constructor() {
     super(...arguments), this.type = "", this.bgstyle = "background-white";
   }
@@ -2765,14 +2781,14 @@ qt([
   a({ type: String, reflect: !0 })
 ], vt.prototype, "bgstyle", 2);
 vt = qt([
-  m("o-tag")
+  y("o-tag")
 ], vt);
 var Vo = Object.defineProperty, Zo = Object.getOwnPropertyDescriptor, Kt = (o, t, e, r) => {
   for (var i = r > 1 ? void 0 : r ? Zo(t, e) : t, n = o.length - 1, s; n >= 0; n--)
     (s = o[n]) && (i = (r ? s(t, e, i) : s(i)) || i);
   return r && i && Vo(t, e, i), i;
 };
-let ft = class extends v {
+let ft = class extends u {
   constructor() {
     super(...arguments), this.type = "top", this.text = "";
   }
@@ -2885,14 +2901,14 @@ Kt([
   a({ type: String, reflect: !0 })
 ], ft.prototype, "text", 2);
 ft = Kt([
-  m("o-tooltip")
+  y("o-tooltip")
 ], ft);
-var qo = Object.defineProperty, Ko = Object.getOwnPropertyDescriptor, V = (o, t, e, r) => {
+var qo = Object.defineProperty, Ko = Object.getOwnPropertyDescriptor, F = (o, t, e, r) => {
   for (var i = r > 1 ? void 0 : r ? Ko(t, e) : t, n = o.length - 1, s; n >= 0; n--)
     (s = o[n]) && (i = (r ? s(t, e, i) : s(i)) || i);
   return r && i && qo(t, e, i), i;
 };
-let D = class extends v {
+let z = class extends u {
   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);
@@ -2958,7 +2974,7 @@ let D = class extends v {
     this.options.length > 0 && (this.options.some((e) => e.value === this.value) || (this.value = this.options[0].value));
   }
   render() {
-    const o = F.checkstroke.replace(
+    const o = N.checkstroke.replace(
       "<svg",
       '<svg aria-hidden="true" focusable="false" part="svg"'
     ), t = this.options.find((e) => e.value === this.value);
@@ -3015,7 +3031,7 @@ let D = class extends v {
     `;
   }
 };
-D.styles = f`
+z.styles = f`
 		:host {
 			display: inline-block;
 			position: relative;
@@ -3155,39 +3171,39 @@ D.styles = f`
 			display: none;
 		}
 	`;
-V([
+F([
   a({ type: Array, reflect: !0 })
-], D.prototype, "options", 2);
-V([
+], z.prototype, "options", 2);
+F([
   a({ type: String, reflect: !0 })
-], D.prototype, "value", 2);
-V([
+], z.prototype, "value", 2);
+F([
   a({ type: String, reflect: !0 })
-], D.prototype, "name", 2);
-V([
+], z.prototype, "name", 2);
+F([
   a({ type: Boolean, reflect: !0 })
-], D.prototype, "disabled", 2);
-V([
+], z.prototype, "disabled", 2);
+F([
   a({ type: String, reflect: !0 })
-], D.prototype, "width", 2);
-V([
+], z.prototype, "width", 2);
+F([
   et()
-], D.prototype, "open", 2);
-V([
+], z.prototype, "open", 2);
+F([
   et()
-], D.prototype, "activeIndex", 2);
-V([
+], z.prototype, "activeIndex", 2);
+F([
   et()
-], D.prototype, "menuWidth", 2);
-D = V([
-  m("o-dropdown")
-], D);
+], z.prototype, "menuWidth", 2);
+z = F([
+  y("o-dropdown")
+], z);
 var Wo = Object.getOwnPropertyDescriptor, Go = (o, t, e, r) => {
   for (var i = r > 1 ? void 0 : r ? Wo(t, e) : t, n = o.length - 1, s; n >= 0; n--)
     (s = o[n]) && (i = s(i) || i);
   return i;
 };
-let Ht = class extends v {
+let Ht = class extends u {
   render() {
     return l` <span class="dots"></span> `;
   }
@@ -3245,14 +3261,14 @@ Ht.styles = f`
     }
   `;
 Ht = Go([
-  m("o-dots")
+  y("o-dots")
 ], Ht);
-var Xo = Object.defineProperty, Jo = Object.getOwnPropertyDescriptor, j = (o, t, e, r) => {
+var Xo = Object.defineProperty, Jo = Object.getOwnPropertyDescriptor, M = (o, t, e, r) => {
   for (var i = r > 1 ? void 0 : r ? Jo(t, e) : t, n = o.length - 1, s; n >= 0; n--)
     (s = o[n]) && (i = (r ? s(t, e, i) : s(i)) || i);
   return r && i && Xo(t, e, i), i;
 };
-let A = class extends v {
+let E = class extends u {
   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);
@@ -3318,7 +3334,7 @@ let A = class extends v {
     this.options.length > 0 && (this.options.some((t) => t.value === this.value) || (this.value = this.options[0].value));
   }
   render() {
-    const o = F.checkstroke.replace(
+    const o = N.checkstroke.replace(
       "<svg",
       '<svg aria-hidden="true" focusable="false" part="svg"'
     ), t = this.options.find((e) => e.value === this.value);
@@ -3336,7 +3352,7 @@ let A = class extends v {
 				?disabled=${this.disabled}
 				class="btn-dropdown"
 			>
-				<img alt="${S(t == null ? void 0 : t.label)}" src="${S(t == null ? void 0 : t.imgurl)}" />
+				<img alt="${k(t == null ? void 0 : t.label)}" src="${k(t == null ? void 0 : t.imgurl)}" />
 				<span id="dropdown-label" class="label">
 					${t ? t.label : "Select an option"}
 				</span>
@@ -3371,11 +3387,11 @@ let A = class extends v {
 									class="${r === this.activeIndex ? "active" : ""} ${e.disabled ? "disabled" : ""}"
 									@click=${() => this.selectOption(e)}
 								>
-									<a href="${S(e.url)}">
-										<img alt="${S(e.label)}" src="${S(e.imgurl)}" />
+									<a href="${k(e.url)}">
+										<img alt="${k(e.label)}" src="${k(e.imgurl)}" />
 										<span class="label">${e.label}</span>
 										<div class="right">
-											<span class="additional-text">${S(e.additionaltext)}</span>
+											<span class="additional-text">${k(e.additionaltext)}</span>
 											${e.value === this.value && !e.additionaltext ? l`
 												<span class="check">${C(o)}</span>` : null}
 										</div>
@@ -3389,7 +3405,7 @@ let A = class extends v {
 		`;
   }
 };
-A.styles = f`
+E.styles = f`
 		:host {
 			display: inline-block;
 			position: relative;
@@ -3565,36 +3581,36 @@ A.styles = f`
 			display: none;
 		}
 	`;
-j([
+M([
   a({ type: Array, reflect: !0 })
-], A.prototype, "options", 2);
-j([
+], E.prototype, "options", 2);
+M([
   a({ type: String, reflect: !0 })
-], A.prototype, "value", 2);
-j([
+], E.prototype, "value", 2);
+M([
   a({ type: String, reflect: !0 })
-], A.prototype, "name", 2);
-j([
+], E.prototype, "name", 2);
+M([
   a({ type: String, reflect: !0 })
-], A.prototype, "additionaltext", 2);
-j([
+], E.prototype, "additionaltext", 2);
+M([
   a({ type: Boolean, reflect: !0 })
-], A.prototype, "disabled", 2);
-j([
+], E.prototype, "disabled", 2);
+M([
   a({ type: String, reflect: !0 })
-], A.prototype, "width", 2);
-j([
+], E.prototype, "width", 2);
+M([
   et()
-], A.prototype, "open", 2);
-j([
+], E.prototype, "open", 2);
+M([
   et()
-], A.prototype, "activeIndex", 2);
-j([
+], E.prototype, "activeIndex", 2);
+M([
   et()
-], A.prototype, "menuWidth", 2);
-A = j([
-  m("o-dropdown-variant")
-], A);
+], E.prototype, "menuWidth", 2);
+E = M([
+  y("o-dropdown-variant")
+], E);
 /**
  * @license
  * Copyright 2018 Google LLC
@@ -3603,7 +3619,7 @@ A = j([
 const ge = "important", Qo = " !" + ge, Yo = Vt(class extends Zt {
   constructor(o) {
     var t;
-    if (super(o), o.type !== Ut.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.");
+    if (super(o), o.type !== Ft.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.");
   }
   render(o) {
     return Object.keys(o).reduce((t, e) => {
@@ -3631,7 +3647,7 @@ var ti = Object.defineProperty, ei = Object.getOwnPropertyDescriptor, Wt = (o, t
     (s = o[n]) && (i = (r ? s(t, e, i) : s(i)) || i);
   return r && i && ti(t, e, i), i;
 };
-let bt = class extends v {
+let bt = class extends u {
   constructor() {
     super(...arguments), this.option = {}, this.imageSize = 64;
   }
@@ -3640,13 +3656,13 @@ let bt = class extends v {
       width: `${this.imageSize}px`,
       height: `${this.imageSize}px`
     }, e = l`
-      ${this.option.imgurl ? l`<img src="${this.option.imgurl}" alt="${S(this.option.title)}" aria-hidden="true" style=${Yo(t)} />` : ""}
+      ${this.option.imgurl ? l`<img src="${this.option.imgurl}" alt="${k(this.option.title)}" aria-hidden="true" style=${Yo(t)} />` : ""}
       <div class="m-reassurance-content">
-        <h3 class="a-reassurance-text">${S(this.option.title)}</h3>
-        <p class="a-reassurance-description">${S(this.option.description)}</p>
+        <h3 class="a-reassurance-text">${k(this.option.title)}</h3>
+        <p class="a-reassurance-description">${k(this.option.description)}</p>
       </div>
     `;
-    return o ? l`<a href="${S(this.option.url)}" class="reassurance-item clickable">${e}</a>` : l`<div class="reassurance-item">${e}</div>`;
+    return o ? l`<a href="${k(this.option.url)}" class="reassurance-item clickable">${e}</a>` : l`<div class="reassurance-item">${e}</div>`;
   }
 };
 bt.styles = f`
@@ -3738,15 +3754,15 @@ Wt([
   a({ type: Number, reflect: !0 })
 ], bt.prototype, "imageSize", 2);
 bt = Wt([
-  m("o-reassurance")
+  y("o-reassurance")
 ], bt);
-var oi = Object.defineProperty, ii = Object.getOwnPropertyDescriptor, Z = (o, t, e, r) => {
+var oi = Object.defineProperty, ii = Object.getOwnPropertyDescriptor, V = (o, t, e, r) => {
   for (var i = r > 1 ? void 0 : r ? ii(t, e) : t, n = o.length - 1, s; n >= 0; n--)
     (s = o[n]) && (i = (r ? s(t, e, i) : s(i)) || i);
   return r && i && oi(t, e, i), i;
 };
-const ri = Ft(v);
-let L = class extends ri {
+const ri = Ut(u);
+let A = class extends ri {
   constructor() {
     super(...arguments), this.link = "", this.name = "", this.value = "", this.text = "", this.size = "standard", this.selected = !1, this.fullwidth = !1, this.inactive = !1;
   }
@@ -3769,7 +3785,7 @@ let L = class extends ri {
     `;
   }
 };
-L.styles = f`
+A.styles = f`
     :host {
       cursor: pointer;
       display: inline-flex;
@@ -3859,44 +3875,44 @@ L.styles = f`
       align-items: center;
     }
   `;
-Z([
+V([
   a({ type: String, reflect: !0 })
-], L.prototype, "link", 2);
-Z([
+], A.prototype, "link", 2);
+V([
   a({ reflect: !0 })
-], L.prototype, "name", 2);
-Z([
+], A.prototype, "name", 2);
+V([
   a({ reflect: !0 })
-], L.prototype, "value", 2);
-Z([
+], A.prototype, "value", 2);
+V([
   a({ type: String })
-], L.prototype, "text", 2);
-Z([
+], A.prototype, "text", 2);
+V([
   a({ type: String, reflect: !0 })
-], L.prototype, "size", 2);
-Z([
+], A.prototype, "size", 2);
+V([
   a({ type: Boolean, reflect: !0 })
-], L.prototype, "selected", 2);
-Z([
+], A.prototype, "selected", 2);
+V([
   a({ type: Boolean, reflect: !0 })
-], L.prototype, "fullwidth", 2);
-Z([
+], A.prototype, "fullwidth", 2);
+V([
   a({ type: Boolean, reflect: !0 })
-], L.prototype, "inactive", 2);
-L = Z([
-  m("o-chip")
-], L);
+], A.prototype, "inactive", 2);
+A = V([
+  y("o-chip")
+], A);
 var ni = Object.defineProperty, si = Object.getOwnPropertyDescriptor, Gt = (o, t, e, r) => {
   for (var i = r > 1 ? void 0 : r ? si(t, e) : t, n = o.length - 1, s; n >= 0; n--)
     (s = o[n]) && (i = (r ? s(t, e, i) : s(i)) || i);
   return r && i && ni(t, e, i), i;
 };
-let gt = class extends v {
+let gt = class extends u {
   constructor() {
     super(), this.name = "", this.value = "", this.addEventListener("selected", this.onChipSelected);
   }
   onChipSelected(o) {
-    const t = o.target instanceof L ? 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);
     }));
@@ -3922,15 +3938,15 @@ Gt([
   a({ reflect: !0 })
 ], gt.prototype, "value", 2);
 gt = Gt([
-  m("o-chipset")
+  y("o-chipset")
 ], gt);
-var ai = Object.defineProperty, li = Object.getOwnPropertyDescriptor, R = (o, t, e, r) => {
+var ai = Object.defineProperty, li = Object.getOwnPropertyDescriptor, T = (o, t, e, r) => {
   for (var i = r > 1 ? void 0 : r ? li(t, e) : t, n = o.length - 1, s; n >= 0; n--)
     (s = o[n]) && (i = (r ? s(t, e, i) : s(i)) || i);
   return r && i && ai(t, e, i), i;
 };
-const ci = Ft(v);
-let I = class extends ci {
+const ci = Ut(u);
+let L = class extends ci {
   constructor() {
     super(...arguments), this.name = "", this.value = "", this.type = "", this.text = "", this.selected = !1, this.disabled = !1, this.fullwidth = !1, this.crossIconName = "cross", this.strikethroughImgName = "strikeDiagonal";
   }
@@ -3942,7 +3958,7 @@ let I = class extends ci {
     this.dispatchEvent(e), e.defaultPrevented && o.preventDefault(), this.selected = t.selected;
   }
   crossIcon() {
-    const o = F[this.crossIconName].replace(
+    const o = N[this.crossIconName].replace(
       "<svg",
       '<svg aria-hidden="true" focusable="false" part="svg"'
     ).replace(/stroke=[#"'a-z1-9]*/gi, "");
@@ -3980,7 +3996,7 @@ let I = class extends ci {
     `;
   }
 };
-I.styles = f`
+L.styles = f`
     :host {
       cursor: pointer;
       display: inline-flex;
@@ -4106,42 +4122,42 @@ I.styles = f`
       }
     }
   `;
-R([
+T([
   a({ reflect: !0 })
-], I.prototype, "name", 2);
-R([
+], L.prototype, "name", 2);
+T([
   a({ reflect: !0 })
-], I.prototype, "value", 2);
-R([
+], L.prototype, "value", 2);
+T([
   a({ type: String, reflect: !0 })
-], I.prototype, "type", 2);
-R([
+], L.prototype, "type", 2);
+T([
   a({ type: String, reflect: !0 })
-], I.prototype, "href", 2);
-R([
+], L.prototype, "href", 2);
+T([
   a({ type: String, reflect: !0, attribute: "data-href" })
-], I.prototype, "dataHref", 2);
-R([
+], L.prototype, "dataHref", 2);
+T([
   a({ type: String })
-], I.prototype, "text", 2);
-R([
+], L.prototype, "text", 2);
+T([
   a({ type: Boolean, reflect: !0 })
-], I.prototype, "selected", 2);
-R([
+], L.prototype, "selected", 2);
+T([
   a({ type: Boolean, reflect: !0 })
-], I.prototype, "disabled", 2);
-R([
+], L.prototype, "disabled", 2);
+T([
   a({ type: Boolean, reflect: !0 })
-], I.prototype, "fullwidth", 2);
-I = R([
-  m("o-filter-chip")
-], I);
-var hi = Object.defineProperty, q = (o, t, e, r) => {
+], L.prototype, "fullwidth", 2);
+L = T([
+  y("o-filter-chip")
+], L);
+var hi = Object.defineProperty, Z = (o, t, e, r) => {
   for (var i = void 0, n = o.length - 1, s; n >= 0; n--)
     (s = o[n]) && (i = s(t, e, i) || i);
   return i && hi(t, e, i), i;
 };
-const Jt = class Jt extends v {
+const Jt = class Jt extends u {
   constructor() {
     super(...arguments), this.type = "cart | chevron", this.titleProduct = "", this.volume = "", this.perLiter = "", this.mainPrice = "", this.imageUrl = "https://placehold.co/56x70", this.altImage = "", this.fullwidth = !1;
   }
@@ -4158,6 +4174,8 @@ const Jt = class Jt extends v {
                     type="span"
                     status="filled"
                     strokewidth="0"
+                    aria-hidden="true"
+                    tabindex="-1"
                 ></o-icon-button>
             ` : l`
             <o-icon-button
@@ -4172,18 +4190,19 @@ const Jt = class Jt extends v {
   }
   render() {
     return l`
-        <div class="tile ${this.fullwidth ? "fullwidth" : ""} ${this.type === "chevron" ? "fullpointer" : ""}" @click=${this.onClick}>
-            ${this.imageUrl ? l`<img src="${this.imageUrl}" alt="${this.altImage || ""}" />` : ""}
-            <div class="info">
-                ${this.titleProduct ? l`<div class="title">${this.titleProduct}</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>` : ""}
+            <button type="button"
+                class="tile ${this.fullwidth ? "fullwidth" : ""} ${this.type === "chevron" ? "fullpointer" : ""}" @click=${this.onClick}>
+                ${this.imageUrl ? l`<img src="${this.imageUrl}" alt="${this.altImage || ""}" />` : ""}
+                <div class="info">
+                    ${this.titleProduct ? l`<div class="title">${this.titleProduct}</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>
-            </div>
-            ${this.icons}
-        </div>
+                ${this.icons}
+            </button>
     `;
   }
 };
@@ -4205,6 +4224,9 @@ Jt.styles = f`
             width: 356px;
             max-width: 356px;
             padding: var(--spacing-2-xs) var(--spacing-s) var(--spacing-2-xs) var(--spacing-2-xs);
+            margin: 0;
+            border: 0 none;
+            box-sizing: content-box;
         }
 
         .tile.fullwidth {
@@ -4231,6 +4253,7 @@ Jt.styles = f`
             color: var(--colors-noir-des-terres-500);
             line-height: var(--line-height-160);
             letter-spacing: var(--letter-spacing-100);
+            text-align: left;
 
             +.details {
                 padding-top: var(--spacing-s);}
@@ -4275,41 +4298,41 @@ Jt.styles = f`
             cursor: pointer;
         }
   `;
-let P = Jt;
-q([
+let I = Jt;
+Z([
   a({ type: String })
-], P.prototype, "type");
-q([
+], I.prototype, "type");
+Z([
   a({ type: String })
-], P.prototype, "titleProduct");
-q([
+], I.prototype, "titleProduct");
+Z([
   a({ type: String })
-], P.prototype, "volume");
-q([
+], I.prototype, "volume");
+Z([
   a({ type: String })
-], P.prototype, "perLiter");
-q([
+], I.prototype, "perLiter");
+Z([
   a({ type: String })
-], P.prototype, "mainPrice");
-q([
+], I.prototype, "mainPrice");
+Z([
   a({ type: String })
-], P.prototype, "imageUrl");
-q([
+], I.prototype, "imageUrl");
+Z([
   a({ type: String })
-], P.prototype, "altImage");
-q([
+], I.prototype, "altImage");
+Z([
   a({ type: Boolean })
-], P.prototype, "fullwidth");
-q([
+], I.prototype, "fullwidth");
+Z([
   a({ type: Function })
-], P.prototype, "onClickTile");
-customElements.define("mini-tile", P);
+], I.prototype, "onClickTile");
+customElements.define("mini-tile", I);
 var di = Object.defineProperty, pi = Object.getOwnPropertyDescriptor, Xt = (o, t, e, r) => {
   for (var i = r > 1 ? void 0 : r ? pi(t, e) : t, n = o.length - 1, s; n >= 0; n--)
     (s = o[n]) && (i = (r ? s(t, e, i) : s(i)) || i);
   return r && i && di(t, e, i), i;
 };
-let yt = class extends v {
+let yt = class extends u {
   constructor() {
     super(...arguments), this.variant = "cart", this.text = "";
   }
@@ -4363,14 +4386,14 @@ Xt([
   a({ type: String })
 ], yt.prototype, "text", 2);
 yt = Xt([
-  m("o-badge")
+  y("o-badge")
 ], yt);
-var ui = Object.defineProperty, vi = Object.getOwnPropertyDescriptor, z = (o, t, e, r) => {
+var ui = Object.defineProperty, vi = Object.getOwnPropertyDescriptor, O = (o, t, e, r) => {
   for (var i = r > 1 ? void 0 : r ? vi(t, e) : t, n = o.length - 1, s; n >= 0; n--)
     (s = o[n]) && (i = (r ? s(t, e, i) : s(i)) || i);
   return r && i && ui(t, e, i), i;
 };
-let $ = class extends v {
+let $ = class extends u {
   constructor() {
     super(...arguments), this.icon = "info", this.text = "Sample text", this.verticalanchor = "top", this.horizontalanchor = "right", this.verticaloffset = 24, this.horizontaloffset = 24, this.animationduration = 500, this.animationaxis = "horizontal", this.animated = !0, this.lifeduration = 5e3, this.multiline = !1;
   }
@@ -4406,8 +4429,8 @@ let $ = class extends v {
     var o = this;
     const t = (r = this.renderRoot) == null ? void 0 : r.querySelector("o-icon-button"), e = (i = this.renderRoot) == null ? void 0 : i.querySelector(".o-toast-text");
     if (e != null) {
-      const n = window.getComputedStyle(e), s = parseInt(n.getPropertyValue("line-height").replace("px", "")), c = parseInt(n.getPropertyValue("height").replace("px", ""));
-      !isNaN(s) && !isNaN(c) && c > s && (this.multiline = !0);
+      const n = window.getComputedStyle(e), s = parseInt(n.getPropertyValue("line-height").replace("px", "")), h = parseInt(n.getPropertyValue("height").replace("px", ""));
+      !isNaN(s) && !isNaN(h) && h > s && (this.multiline = !0);
     }
     t != null && t.addEventListener("click", function() {
       o.remove();
@@ -4504,7 +4527,6 @@ $.styles = f`
             color: var(--color-content-body);
             padding: 0 12px;
             width: max-content;
-            text-align: center;
             line-height: 20px;
             max-width: 65vw;
         }
@@ -4513,48 +4535,48 @@ $.styles = f`
             height: 16px;
         }
     `;
-z([
+O([
   a({ type: String, reflect: !0 })
 ], $.prototype, "icon", 2);
-z([
+O([
   a({ type: String, reflect: !0 })
 ], $.prototype, "text", 2);
-z([
+O([
   a({ type: String, reflect: !0 })
 ], $.prototype, "verticalanchor", 2);
-z([
+O([
   a({ type: String, reflect: !0 })
 ], $.prototype, "horizontalanchor", 2);
-z([
+O([
   a({ type: Number, reflect: !0 })
 ], $.prototype, "verticaloffset", 2);
-z([
+O([
   a({ type: Number, reflect: !0 })
 ], $.prototype, "horizontaloffset", 2);
-z([
+O([
   a({ type: Number, reflect: !0 })
 ], $.prototype, "animationduration", 2);
-z([
+O([
   a({ type: String, reflect: !0 })
 ], $.prototype, "animationaxis", 2);
-z([
+O([
   a({ type: Boolean, reflect: !0 })
 ], $.prototype, "animated", 2);
-z([
+O([
   a({ type: Number, reflect: !0 })
 ], $.prototype, "lifeduration", 2);
-z([
+O([
   a({ type: Boolean, reflect: !0 })
 ], $.prototype, "multiline", 2);
-$ = z([
-  m("o-toast")
+$ = O([
+  y("o-toast")
 ], $);
-var fi = Object.defineProperty, bi = Object.getOwnPropertyDescriptor, H = (o, t, e, r) => {
+var fi = Object.defineProperty, bi = Object.getOwnPropertyDescriptor, B = (o, t, e, r) => {
   for (var i = r > 1 ? void 0 : r ? bi(t, e) : t, n = o.length - 1, s; n >= 0; n--)
     (s = o[n]) && (i = (r ? s(t, e, i) : s(i)) || i);
   return r && i && fi(t, e, i), i;
 };
-let gi = 0, _ = class extends v {
+let gi = 0, _ = class extends u {
   constructor() {
     super(), this.checked = !1, this.indeterminate = !1, this.disabled = !1, this.size = "S", this.showLabel = !0, this.label = "Checkbox", this.name = "", this.value = "on", this.inputId = "", this.inputId || (this.inputId = `o-checkbox-${++gi}`);
   }
@@ -4571,7 +4593,7 @@ let gi = 0, _ = class extends v {
     this.disabled || (o.key === " " || o.key === "Enter") && (o.preventDefault(), this.toggle());
   }
   render() {
-    const o = C(F.checkbox.replace("<svg", '<svg aria-hidden="true" focusable="false" part="svg"')), t = C(F.icoMinus.replace("<svg", '<svg class="indeterminate" aria-hidden="true" focusable="false" part="svg"'));
+    const o = C(N.checkbox.replace("<svg", '<svg aria-hidden="true" focusable="false" part="svg"')), t = C(N.icoMinus.replace("<svg", '<svg class="indeterminate" aria-hidden="true" focusable="false" part="svg"'));
     return l`
       <input
         type="checkbox"
@@ -4691,45 +4713,45 @@ _.styles = f`
       stroke: var(--color-border-white);
     }
   `;
-H([
+B([
   a({ type: Boolean, reflect: !0 })
 ], _.prototype, "checked", 2);
-H([
+B([
   a({ type: Boolean, reflect: !0 })
 ], _.prototype, "indeterminate", 2);
-H([
+B([
   a({ type: Boolean, reflect: !0 })
 ], _.prototype, "disabled", 2);
-H([
+B([
   a({ type: String, reflect: !0 })
 ], _.prototype, "size", 2);
-H([
+B([
   a({ type: Boolean })
 ], _.prototype, "showLabel", 2);
-H([
+B([
   a({ type: String })
 ], _.prototype, "label", 2);
-H([
+B([
   a({ type: String })
 ], _.prototype, "name", 2);
-H([
+B([
   a({ type: String })
 ], _.prototype, "value", 2);
-H([
+B([
   a({ type: String, reflect: !0 })
 ], _.prototype, "inputId", 2);
-H([
+B([
   fe("input")
 ], _.prototype, "inputEl", 2);
-_ = H([
-  m("o-checkbox")
+_ = B([
+  y("o-checkbox")
 ], _);
-var yi = Object.defineProperty, mi = Object.getOwnPropertyDescriptor, N = (o, t, e, r) => {
+var yi = Object.defineProperty, mi = Object.getOwnPropertyDescriptor, j = (o, t, e, r) => {
   for (var i = r > 1 ? void 0 : r ? mi(t, e) : t, n = o.length - 1, s; n >= 0; n--)
     (s = o[n]) && (i = (r ? s(t, e, i) : s(i)) || i);
   return r && i && yi(t, e, i), i;
 };
-let xi = 0, O = class extends v {
+let xi = 0, P = class extends u {
   constructor() {
     super(), this.checked = !1, this.disabled = !1, this.size = "S", this.showLabel = !0, this.label = "Radio button", this.name = "", this.value = "on", this.inputId = "", this.inputId || (this.inputId = `o-radio-${++xi}`);
   }
@@ -4763,7 +4785,7 @@ let xi = 0, O = class extends v {
     `;
   }
 };
-O.styles = f`
+P.styles = f`
     :host {
       display: inline-flex;
       align-items: center;
@@ -4846,33 +4868,33 @@ O.styles = f`
       height: 0;
     }
   `;
-N([
+j([
   a({ type: Boolean, reflect: !0 })
-], O.prototype, "checked", 2);
-N([
+], P.prototype, "checked", 2);
+j([
   a({ type: Boolean, reflect: !0 })
-], O.prototype, "disabled", 2);
-N([
+], P.prototype, "disabled", 2);
+j([
   a({ type: String, reflect: !0 })
-], O.prototype, "size", 2);
-N([
+], P.prototype, "size", 2);
+j([
   a({ type: Boolean })
-], O.prototype, "showLabel", 2);
-N([
+], P.prototype, "showLabel", 2);
+j([
   a({ type: String })
-], O.prototype, "label", 2);
-N([
+], P.prototype, "label", 2);
+j([
   a({ type: String })
-], O.prototype, "name", 2);
-N([
+], P.prototype, "name", 2);
+j([
   a({ type: String })
-], O.prototype, "value", 2);
-N([
+], P.prototype, "value", 2);
+j([
   a({ type: String, reflect: !0 })
-], O.prototype, "inputId", 2);
-N([
+], P.prototype, "inputId", 2);
+j([
   fe("input")
-], O.prototype, "inputEl", 2);
-O = N([
-  m("o-radio")
-], O);
+], P.prototype, "inputEl", 2);
+P = j([
+  y("o-radio")
+], P);