@florid-kit/components 0.10.18 → 0.10.20

package/index.mjs

@@ -3,7 +3,7 @@
  * Copyright 2019 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const At = globalThis, Vt = At.ShadowRoot && (At.ShadyCSS === void 0 || At.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, Zt = Symbol(), le = /* @__PURE__ */ new WeakMap();
+const Lt = globalThis, Vt = Lt.ShadowRoot && (Lt.ShadyCSS === void 0 || Lt.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, Zt = Symbol(), le = /* @__PURE__ */ new WeakMap();
 let xe = class {
   constructor(t, e, n) {
     if (this._$cssResult$ = !0, n !== Zt) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
@@ -22,23 +22,23 @@ let xe = class {
     return this.cssText;
   }
 };
-const Le = (o) => new xe(typeof o == "string" ? o : o + "", void 0, Zt), f = (o, ...t) => {
+const Ae = (o) => new xe(typeof o == "string" ? o : o + "", void 0, Zt), v = (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;
     throw Error("Value passed to 'css' function must be a 'css' function result: " + s + ". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.");
   })(i) + o[r + 1], o[0]);
   return new xe(e, o, Zt);
-}, Ae = (o, t) => {
+}, Le = (o, t) => {
   if (Vt) o.adoptedStyleSheets = t.map((e) => e instanceof CSSStyleSheet ? e : e.styleSheet);
   else for (const e of t) {
-    const n = document.createElement("style"), i = At.litNonce;
+    const n = document.createElement("style"), i = Lt.litNonce;
     i !== void 0 && n.setAttribute("nonce", i), n.textContent = e.cssText, o.appendChild(n);
   }
 }, ce = Vt ? (o) => o : (o) => o instanceof CSSStyleSheet ? ((t) => {
   let e = "";
   for (const n of t.cssRules) e += n.cssText;
-  return Le(e);
+  return Ae(e);
 })(o) : o;
 /**
  * @license
@@ -159,7 +159,7 @@ let ct = class extends HTMLElement {
   }
   createRenderRoot() {
     const t = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
-    return Ae(t, this.constructor.elementStyles), t;
+    return Le(t, this.constructor.elementStyles), t;
   }
   connectedCallback() {
     var t;
@@ -294,10 +294,10 @@ const Fe = (o, t) => {
   let i, r = t === 2 ? "<svg>" : t === 3 ? "<math>" : "", s = ft;
   for (let c = 0; c < e; c++) {
     const h = o[c];
-    let w, _, v = -1, V = 0;
-    for (; V < h.length && (s.lastIndex = V, _ = s.exec(h), _ !== null); ) V = s.lastIndex, s === ft ? _[1] === "!--" ? s = ue : _[1] !== void 0 ? s = fe : _[2] !== void 0 ? (ke.test(_[2]) && (i = RegExp("</" + _[2], "g")), s = it) : _[3] !== void 0 && (s = it) : s === it ? _[0] === ">" ? (s = i ?? ft, v = -1) : _[1] === void 0 ? v = -2 : (v = s.lastIndex - _[2].length, w = _[1], s = _[3] === void 0 ? it : _[3] === '"' ? ge : ve) : s === ge || s === ve ? s = it : s === ue || s === fe ? s = ft : (s = it, i = void 0);
+    let f, x, g = -1, V = 0;
+    for (; V < h.length && (s.lastIndex = V, x = s.exec(h), x !== null); ) V = s.lastIndex, s === ft ? x[1] === "!--" ? s = ue : x[1] !== void 0 ? s = fe : x[2] !== void 0 ? (ke.test(x[2]) && (i = RegExp("</" + x[2], "g")), s = it) : x[3] !== void 0 && (s = it) : s === it ? x[0] === ">" ? (s = i ?? ft, g = -1) : x[1] === void 0 ? g = -2 : (g = s.lastIndex - x[2].length, f = x[1], s = x[3] === void 0 ? it : x[3] === '"' ? ge : ve) : s === ge || s === ve ? s = it : s === ue || s === fe ? s = ft : (s = it, i = void 0);
     const Y = s === it && o[c + 1].startsWith("/>") ? " " : "";
-    r += s === ft ? h + Te : v >= 0 ? (n.push(w), h.slice(0, v) + we + h.slice(v) + J + Y) : h + J + (v === -2 ? c : Y);
+    r += s === ft ? h + Te : g >= 0 ? (n.push(f), h.slice(0, g) + we + h.slice(g) + J + Y) : h + J + (g === -2 ? c : Y);
   }
   return [_e(o, r + (o[e] || "<?>") + (t === 2 ? "</svg>" : t === 3 ? "</math>" : "")), n];
 };
@@ -306,29 +306,29 @@ class xt {
     let i;
     this.parts = [];
     let r = 0, s = 0;
-    const c = t.length - 1, h = this.parts, [w, _] = Fe(t, e);
-    if (this.el = xt.createElement(w, n), nt.currentNode = this.el.content, e === 2 || e === 3) {
-      const v = this.el.content.firstChild;
-      v.replaceWith(...v.childNodes);
+    const c = t.length - 1, h = this.parts, [f, x] = Fe(t, e);
+    if (this.el = xt.createElement(f, n), nt.currentNode = this.el.content, e === 2 || e === 3) {
+      const g = this.el.content.firstChild;
+      g.replaceWith(...g.childNodes);
     }
     for (; (i = nt.nextNode()) !== null && h.length < c; ) {
       if (i.nodeType === 1) {
-        if (i.hasAttributes()) for (const v of i.getAttributeNames()) if (v.endsWith(we)) {
-          const V = _[s++], Y = i.getAttribute(v).split(J), Lt = /([.?@])?(.*)/.exec(V);
-          h.push({ type: 1, index: r, name: Lt[2], strings: Y, ctor: Lt[1] === "." ? Ue : Lt[1] === "?" ? Ne : Lt[1] === "@" ? qe : Ot }), i.removeAttribute(v);
-        } else v.startsWith(J) && (h.push({ type: 6, index: r }), i.removeAttribute(v));
+        if (i.hasAttributes()) for (const g of i.getAttributeNames()) if (g.endsWith(we)) {
+          const V = x[s++], Y = i.getAttribute(g).split(J), At = /([.?@])?(.*)/.exec(V);
+          h.push({ type: 1, index: r, name: At[2], strings: Y, ctor: At[1] === "." ? Ue : At[1] === "?" ? Ne : At[1] === "@" ? qe : Ot }), i.removeAttribute(g);
+        } else g.startsWith(J) && (h.push({ type: 6, index: r }), i.removeAttribute(g));
         if (ke.test(i.tagName)) {
-          const v = i.textContent.split(J), V = v.length - 1;
+          const g = i.textContent.split(J), V = g.length - 1;
           if (V > 0) {
             i.textContent = Bt ? Bt.emptyScript : "";
-            for (let Y = 0; Y < V; Y++) i.append(v[Y], yt()), nt.nextNode(), h.push({ type: 2, index: ++r });
-            i.append(v[V], yt());
+            for (let Y = 0; Y < V; Y++) i.append(g[Y], yt()), nt.nextNode(), h.push({ type: 2, index: ++r });
+            i.append(g[V], yt());
           }
         }
       } else if (i.nodeType === 8) if (i.data === $e) h.push({ type: 2, index: r });
       else {
-        let v = -1;
-        for (; (v = i.data.indexOf(J, v + 1)) !== -1; ) h.push({ type: 7, index: r }), v += J.length - 1;
+        let g = -1;
+        for (; (g = i.data.indexOf(J, g + 1)) !== -1; ) h.push({ type: 7, index: r }), g += J.length - 1;
       }
       r++;
     }
@@ -361,8 +361,8 @@ class Re {
     let r = nt.nextNode(), s = 0, c = 0, h = n[0];
     for (; h !== void 0; ) {
       if (s === h.index) {
-        let w;
-        h.type === 2 ? w = new Et(r, r.nextSibling, this, t) : h.type === 1 ? w = new h.ctor(r, h.name, h.strings, this, t) : h.type === 6 && (w = new Ve(r, this, t)), this._$AV.push(w), h = n[++c];
+        let f;
+        h.type === 2 ? f = new Et(r, r.nextSibling, this, t) : h.type === 1 ? f = new h.ctor(r, h.name, h.strings, this, t) : h.type === 6 && (f = new Ve(r, this, t)), this._$AV.push(f), h = n[++c];
       }
       s !== (h == null ? void 0 : h.index) && (r = nt.nextNode(), s++);
     }
@@ -452,8 +452,8 @@ class Ot {
     if (r === void 0) t = ht(this, t, e, 0), s = !mt(t) || t !== this._$AH && t !== tt, s && (this._$AH = t);
     else {
       const c = t;
-      let h, w;
-      for (t = r[0], h = 0; h < r.length - 1; h++) w = ht(this, c[n + h], e, h), w === tt && (w = this._$AH[h]), s || (s = !mt(w) || w !== this._$AH[h]), w === d ? t = d : t !== d && (t += (w ?? "") + r[h + 1]), this._$AH[h] = w;
+      let h, f;
+      for (t = r[0], h = 0; h < r.length - 1; h++) f = ht(this, c[n + h], e, h), f === tt && (f = this._$AH[h]), s || (s = !mt(f) || f !== this._$AH[h]), f === d ? t = d : t !== d && (t += (f ?? "") + r[h + 1]), this._$AH[h] = f;
     }
     s && !i && this.j(t);
   }
@@ -519,7 +519,7 @@ const Ze = (o, t, e) => {
  * SPDX-License-Identifier: BSD-3-Clause
  */
 const rt = globalThis;
-let p = class extends ct {
+let u = class extends ct {
   constructor() {
     super(...arguments), this.renderOptions = { host: this }, this._$Do = void 0;
   }
@@ -545,16 +545,16 @@ let p = class extends ct {
   }
 };
 var me;
-p._$litElement$ = !0, p.finalized = !0, (me = rt.litElementHydrateSupport) == null || me.call(rt, { LitElement: p });
+u._$litElement$ = !0, u.finalized = !0, (me = rt.litElementHydrateSupport) == null || me.call(rt, { LitElement: u });
 const jt = rt.litElementPolyfillSupport;
-jt == null || jt({ LitElement: p });
+jt == null || jt({ LitElement: u });
 (rt.litElementVersions ?? (rt.litElementVersions = [])).push("4.2.0");
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const g = (o) => (t, e) => {
+const b = (o) => (t, e) => {
   e !== void 0 ? e.addInitializer(() => {
     customElements.define(o, t);
   }) : customElements.define(o, t);
@@ -621,11 +621,11 @@ function Ce(o, t) {
     } });
   };
 }
-const at = f`
+const at = v`
 	outline: 1px dashed var(--color-border-primary);
 	outline-offset: 2px;
 `;
-f`
+v`
 	:host * {
 		box-sizing: border-box;
 	}
@@ -775,7 +775,7 @@ const Ye = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="h
 </svg>`, Eo = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M4.5 8L11.5 13L11.5 3L4.5 8Z" fill="#3F2B2E"/>
 </svg>
-`, Lo = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+`, Ao = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M11.5 8L4.5 13L4.5 3L11.5 8Z" fill="#3F2B2E"/>
 </svg>
 `, Z = {
@@ -805,8 +805,8 @@ const Ye = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="h
   backToBag: Co,
   checkbox: So,
   sliderLeftArrow: Eo,
-  sliderRightArrow: Lo
-}, Ao = {
+  sliderRightArrow: Ao
+}, Lo = {
   strikeDiagonal: xo
 }, Po = {
   success: $o,
@@ -1062,7 +1062,7 @@ var jo = Object.defineProperty, Fo = Object.getOwnPropertyDescriptor, R = (o, t,
     (s = o[r]) && (i = (n ? s(t, e, i) : s(i)) || i);
   return n && i && jo(t, e, i), i;
 };
-let B = class extends p {
+let B = 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 = "";
   }
@@ -1090,7 +1090,7 @@ let B = class extends p {
 		`;
   }
 };
-B.styles = f`
+B.styles = v`
 		:host {
 			display: inline-flex;
 			justify-content: center;
@@ -1301,14 +1301,14 @@ R([
   a({ type: String })
 ], B.prototype, "srLabel", 2);
 B = R([
-  g("o-icon-button")
+  b("o-icon-button")
 ], B);
-var Ro = Object.defineProperty, Uo = Object.getOwnPropertyDescriptor, b = (o, t, e, n) => {
+var Ro = Object.defineProperty, Uo = Object.getOwnPropertyDescriptor, y = (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 && Ro(t, e, i), i;
 };
-let u = class extends p {
+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.labelDialog = "", this.addToBagProductCount = "", this.closeButtonLabel = "Close the modal", this.goBackButtonLabel = "Go back to", 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._onOpenDetail = async (o) => {
       var e, n;
@@ -1393,14 +1393,40 @@ let u = class extends p {
     return t;
   }
   trapFocus(o) {
+    var r;
     if (o.key !== "Tab") return;
-    const t = this.getDeepActiveElement(), e = this.renderRoot.querySelector(".close-btn");
-    if (!o.shiftKey && e && e.contains(t)) {
+    const t = this.shadowRoot;
+    if (!t) return;
+    const e = this.getDeepActiveElement();
+    if (this.showDetail) {
+      const s = t.querySelector(".detail-view .return-btn"), c = t.querySelector(".detail-view .close-btn"), h = s ? this.resolveFocusable(s) : null, f = c ? this.resolveFocusable(c) : null;
+      if (o.shiftKey && h && e === h && f) {
+        o.preventDefault(), o.stopPropagation(), f.focus({ preventScroll: !0 });
+        return;
+      }
+      if (!o.shiftKey && f && e === f) {
+        o.preventDefault(), o.stopPropagation(), (((r = t.querySelector(".detail-scroller")) == null ? void 0 : r.querySelector(
+          p.focusablesSelector
+        )) ?? h ?? f).focus({ preventScroll: !0 });
+        return;
+      }
+    }
+    if (document.querySelector("#refineandsortpopin")) {
+      const s = t.querySelector(".close-btn"), c = s ? this.resolveFocusable(s) : null, h = t.querySelector(".js-clear-refinements"), f = h ? this.resolveFocusable(h) : null, x = (g) => {
+        o.preventDefault(), o.stopPropagation(), g.focus({ preventScroll: !0 });
+      };
+      if (c && f) {
+        if (!o.shiftKey && e === f) return x(c);
+        if (o.shiftKey && e === c) return x(f);
+      }
+    }
+    const i = this.renderRoot.querySelector(".close-btn");
+    if (!o.shiftKey && i && i.contains(e)) {
       o.preventDefault();
-      const n = this.renderRoot.querySelector(
+      const s = this.renderRoot.querySelector(
         ".o-whats-inside--content p"
       );
-      n == null || n.focus();
+      s == null || s.focus();
     }
   }
   getFocusableElements() {
@@ -1411,7 +1437,7 @@ let u = class extends p {
     }
     function e(i) {
       var s;
-      const r = [i.matches(u.focusablesSelector) ? i : []];
+      const r = [i.matches(p.focusablesSelector) ? i : []];
       if (!["o-icon-button", "o-button"].includes(i.tagName.toLowerCase())) {
         const c = Array.from(
           i instanceof HTMLSlotElement ? i.assignedElements({ flatten: !0 }) : []
@@ -1517,7 +1543,7 @@ let u = class extends p {
 				class="panel"
 				role="dialog"
 				aria-modal="true"
-				aria-labelledby="panel-title"
+				aria-label="panel-title"
 				style="z-index: ${this.zIndex + 1}"
 				tabindex="-1"
 			>
@@ -1568,7 +1594,7 @@ let u = class extends p {
 		`;
   }
 };
-u.styles = f`
+p.styles = v`
 		:host {
 			--z-overlay: 99;
 			--z-panel: 100;
@@ -1804,92 +1830,92 @@ u.styles = f`
 			box-sizing: border-box;
 		}
 	`;
-u.focusablesSelector = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"]), o-icon-button, o-button';
-u.focusablesCustomElementsSelector = "o-icon-button, o-button";
-u.shadowRootOptions = {
-  ...p.shadowRootOptions,
+p.focusablesSelector = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"]), o-icon-button, o-button';
+p.focusablesCustomElementsSelector = "o-icon-button, o-button";
+p.shadowRootOptions = {
+  ...u.shadowRootOptions,
   // This helps send focus into the first focusable in shadow when host is focused
   delegatesFocus: !0
 };
-b([
+y([
   a({ type: Boolean, reflect: !0 })
-], u.prototype, "open", 2);
-b([
+], p.prototype, "open", 2);
+y([
   a({ type: Boolean, reflect: !0 })
-], u.prototype, "showHeader", 2);
-b([
+], p.prototype, "showHeader", 2);
+y([
   a({ type: Boolean, reflect: !0 })
-], u.prototype, "showFooter", 2);
-b([
+], p.prototype, "showFooter", 2);
+y([
   a({ type: Boolean, reflect: !0 })
-], u.prototype, "showHeaderStartIcon", 2);
-b([
+], p.prototype, "showHeaderStartIcon", 2);
+y([
   a({ type: String, reflect: !0 })
-], u.prototype, "headerTitle", 2);
-b([
+], p.prototype, "headerTitle", 2);
+y([
   a({ type: String, reflect: !0 })
-], u.prototype, "headerTitleClassName", 2);
-b([
+], p.prototype, "headerTitleClassName", 2);
+y([
   a({ type: String, reflect: !0 })
-], u.prototype, "labelDialog", 2);
-b([
+], p.prototype, "labelDialog", 2);
+y([
   a({ type: String, reflect: !0 })
-], u.prototype, "addToBagProductCount", 2);
-b([
+], p.prototype, "addToBagProductCount", 2);
+y([
   a({ type: String, reflect: !0 })
-], u.prototype, "closeButtonLabel", 2);
-b([
+], p.prototype, "closeButtonLabel", 2);
+y([
   a({ type: String, reflect: !0 })
-], u.prototype, "goBackButtonLabel", 2);
-b([
+], p.prototype, "goBackButtonLabel", 2);
+y([
   a({ type: String, reflect: !0 })
-], u.prototype, "firstButtonLabel", 2);
-b([
+], p.prototype, "firstButtonLabel", 2);
+y([
   a({ type: String, reflect: !0 })
-], u.prototype, "firstButtonVariant", 2);
-b([
+], p.prototype, "firstButtonVariant", 2);
+y([
   a({ type: Object, reflect: !0 })
-], u.prototype, "firstButtonProps", 2);
-b([
+], p.prototype, "firstButtonProps", 2);
+y([
   a({ type: Boolean, reflect: !0 })
-], u.prototype, "onFirstButtonClickClose", 2);
-b([
+], p.prototype, "onFirstButtonClickClose", 2);
+y([
   a({ type: String, reflect: !0 })
-], u.prototype, "secondButtonLabel", 2);
-b([
+], p.prototype, "secondButtonLabel", 2);
+y([
   a({ type: String, reflect: !0 })
-], u.prototype, "secondButtonVariant", 2);
-b([
+], p.prototype, "secondButtonVariant", 2);
+y([
   a({ type: Object, reflect: !0 })
-], u.prototype, "secondButtonProps", 2);
-b([
+], p.prototype, "secondButtonProps", 2);
+y([
   a({ type: Boolean, reflect: !0 })
-], u.prototype, "onSecondButtonClickClose", 2);
-b([
+], p.prototype, "onSecondButtonClickClose", 2);
+y([
   a({ type: Boolean, reflect: !0 })
-], u.prototype, "disablePortal", 2);
-b([
+], p.prototype, "disablePortal", 2);
+y([
   a({ type: Number, reflect: !0 })
-], u.prototype, "zIndex", 2);
-b([
+], p.prototype, "zIndex", 2);
+y([
   a({ type: Boolean, reflect: !0 })
-], u.prototype, "initialized", 2);
-b([
+], p.prototype, "initialized", 2);
+y([
   a({ type: Boolean })
-], u.prototype, "showDetail", 2);
-b([
+], p.prototype, "showDetail", 2);
+y([
   a({ type: Boolean })
-], u.prototype, "isHidingDetail", 2);
-u = b([
-  g("o-side-panel")
-], u);
-var No = Object.defineProperty, qo = Object.getOwnPropertyDescriptor, k = (o, t, e, n) => {
+], p.prototype, "isHidingDetail", 2);
+p = y([
+  b("o-side-panel")
+], p);
+var No = Object.defineProperty, qo = Object.getOwnPropertyDescriptor, _ = (o, t, e, n) => {
   for (var i = n > 1 ? void 0 : n ? qo(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 && No(t, e, i), i;
 };
-const Vo = Xt(p);
-let y = class extends Vo {
+const Vo = Xt(u);
+let m = class extends Vo {
   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;
   }
@@ -1905,7 +1931,7 @@ let y = class extends Vo {
   handleClick(o) {
     if (!(o instanceof KeyboardEvent && !["Enter", " "].includes(o.key)) && this.panelTarget) {
       const t = document.getElementById(this.panelTarget);
-      t instanceof u && (t != null && t.openPanel) && typeof t.openPanel == "function" ? (o.preventDefault(), t.openPanel()) : console.warn(`[o-button] No side panel with id="${this.panelTarget}" found or it does not have an openPanel method.`);
+      t instanceof p && (t != null && t.openPanel) && typeof t.openPanel == "function" ? (o.preventDefault(), t.openPanel()) : console.warn(`[o-button] No side panel with id="${this.panelTarget}" found or it does not have an openPanel method.`);
     }
   }
   render() {
@@ -1957,9 +1983,9 @@ let y = class extends Vo {
     `;
   }
 };
-Xe(y);
-y.formAssociated = !0;
-y.styles = f`
+Xe(m);
+m.formAssociated = !0;
+m.styles = v`
     :host {
       --button-border: transparent;
       --badge-outer-width: 19px;
@@ -2166,63 +2192,63 @@ y.styles = f`
       transform: translateX(4px);
     }
   `;
-k([
+_([
   a()
-], y.prototype, "type", 2);
-k([
+], m.prototype, "type", 2);
+_([
   a()
-], y.prototype, "value", 2);
-k([
+], m.prototype, "value", 2);
+_([
   a({ type: String, reflect: !0 })
-], y.prototype, "variant", 2);
-k([
+], m.prototype, "variant", 2);
+_([
   a({ type: String })
-], y.prototype, "text", 2);
-k([
+], m.prototype, "text", 2);
+_([
   a({ type: String })
-], y.prototype, "textsecond", 2);
-k([
+], m.prototype, "textsecond", 2);
+_([
   a({ type: Boolean, reflect: !0 })
-], y.prototype, "fullwidth", 2);
-k([
+], m.prototype, "fullwidth", 2);
+_([
   a({ type: Boolean, reflect: !0 })
-], y.prototype, "disabled", 2);
-k([
+], m.prototype, "disabled", 2);
+_([
   a({ type: String })
-], y.prototype, "startIconModel", 2);
-k([
+], m.prototype, "startIconModel", 2);
+_([
   a({ type: String })
-], y.prototype, "endIconModel", 2);
-k([
+], m.prototype, "endIconModel", 2);
+_([
   a({ type: Boolean, reflect: !0, attribute: "starticon" })
-], y.prototype, "startIcon", 2);
-k([
+], m.prototype, "startIcon", 2);
+_([
   a({ type: Boolean, reflect: !0, attribute: "endicon" })
-], y.prototype, "endIcon", 2);
-k([
+], m.prototype, "endIcon", 2);
+_([
   a({ type: String, attribute: "paneltarget" })
-], y.prototype, "panelTarget", 2);
-k([
+], m.prototype, "panelTarget", 2);
+_([
   a({ type: String })
-], y.prototype, "href", 2);
-k([
+], m.prototype, "href", 2);
+_([
   a({ type: String })
-], y.prototype, "target", 2);
-k([
+], m.prototype, "target", 2);
+_([
   a({ type: Boolean, reflect: !0 })
-], y.prototype, "underlined", 2);
-k([
+], m.prototype, "underlined", 2);
+_([
   a({ type: Boolean, reflect: !0 })
-], y.prototype, "withbadge", 2);
-y = k([
-  g("o-button")
-], y);
+], m.prototype, "withbadge", 2);
+m = _([
+  b("o-button")
+], m);
 var Zo = Object.defineProperty, Ko = Object.getOwnPropertyDescriptor, It = (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 && Zo(t, e, i), i;
 };
-let dt = class extends p {
+let dt = 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", {
@@ -2263,7 +2289,7 @@ let dt = class extends p {
     this.label = o, this.requestUpdate();
   }
 };
-dt.styles = f`
+dt.styles = v`
 		:host {
 			display: inline-flex;
 			justify-content: center;
@@ -2338,14 +2364,14 @@ It([
   a({ type: String, reflect: !0 })
 ], dt.prototype, "label", 2);
 dt = It([
-  g("o-wishlist-button")
+  b("o-wishlist-button")
 ], dt);
 var Wo = Object.defineProperty, Go = Object.getOwnPropertyDescriptor, lt = (o, t, e, n) => {
   for (var i = n > 1 ? void 0 : n ? Go(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 && Wo(t, e, i), i;
 };
-let K = class extends p {
+let K = class extends u {
   constructor() {
     super(...arguments), this.href = "", this.target = "", this.template = "standard", this.inverse = !1, this.endIcon = !1, this.reverseEndIcon = !1;
   }
@@ -2383,7 +2409,7 @@ let K = class extends p {
         `;
   }
 };
-K.styles = f`
+K.styles = v`
         :host([template="standard"]) a {
             color: var(--color-content-action-secondary);
             font-size: var(--font-size-200);
@@ -2485,14 +2511,14 @@ lt([
   a({ type: Boolean, reflect: !0 })
 ], K.prototype, "reverseEndIcon", 2);
 K = lt([
-  g("o-link")
+  b("o-link")
 ], K);
 var Xo = Object.defineProperty, Yo = Object.getOwnPropertyDescriptor, Dt = (o, t, e, n) => {
   for (var i = n > 1 ? void 0 : n ? Yo(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 && Xo(t, e, i), i;
 };
-let pt = class extends p {
+let pt = class extends u {
   constructor() {
     super(...arguments), this.rating = 0;
   }
@@ -2519,7 +2545,7 @@ let pt = class extends p {
 		`;
   }
 };
-pt.styles = f`
+pt.styles = v`
 		svg {
 			width: 12px;
 			height: 12px;
@@ -2563,14 +2589,14 @@ Dt([
   a({ type: String })
 ], pt.prototype, "href", 2);
 pt = Dt([
-  g("o-rating")
+  b("o-rating")
 ], pt);
 var Jo = Object.defineProperty, Qo = Object.getOwnPropertyDescriptor, ot = (o, t, e, n) => {
   for (var i = n > 1 ? void 0 : n ? Qo(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 && Jo(t, e, i), i;
 };
-let F = class extends p {
+let F = 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
@@ -2661,7 +2687,7 @@ let F = class extends p {
     `;
   }
 };
-F.styles = f`
+F.styles = v`
     :host {
       display: flex;
       gap: 5px;
@@ -2788,14 +2814,14 @@ ot([
   W()
 ], F.prototype, "focusedIndex", 2);
 F = ot([
-  g("thumbnail-navigation")
+  b("thumbnail-navigation")
 ], F);
 var ti = Object.defineProperty, ei = Object.getOwnPropertyDescriptor, te = (o, t, e, n) => {
   for (var i = n > 1 ? void 0 : n ? ei(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 && ti(t, e, i), i;
 };
-let wt = class extends p {
+let wt = class extends u {
   constructor() {
     super(...arguments), this.type = "", this.bgstyle = "background-white";
   }
@@ -2805,7 +2831,7 @@ let wt = class extends p {
     `;
   }
 };
-wt.styles = f`
+wt.styles = v`
     .tag {
       display: inline-block;
       padding: var(--spacing-2-xs) var(--spacing-s);
@@ -2872,14 +2898,14 @@ te([
   a({ type: String, reflect: !0 })
 ], wt.prototype, "bgstyle", 2);
 wt = te([
-  g("o-tag")
+  b("o-tag")
 ], wt);
 var oi = Object.defineProperty, ii = Object.getOwnPropertyDescriptor, ee = (o, t, e, n) => {
   for (var i = n > 1 ? void 0 : n ? ii(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 && oi(t, e, i), i;
 };
-let $t = class extends p {
+let $t = class extends u {
   constructor() {
     super(...arguments), this.type = "top", this.text = "";
   }
@@ -2892,7 +2918,7 @@ let $t = class extends p {
     `;
   }
 };
-$t.styles = f`
+$t.styles = v`
     .tooltip {
         position: relative;
         display: inline-block;
@@ -2992,14 +3018,14 @@ ee([
   a({ type: String, reflect: !0 })
 ], $t.prototype, "text", 2);
 $t = ee([
-  g("o-tooltip")
+  b("o-tooltip")
 ], $t);
 var ni = Object.defineProperty, ri = Object.getOwnPropertyDescriptor, G = (o, t, e, n) => {
   for (var i = n > 1 ? void 0 : n ? ri(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 && ni(t, e, i), i;
 };
-let T = class extends p {
+let T = 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);
@@ -3122,7 +3148,7 @@ let T = class extends p {
     `;
   }
 };
-T.styles = f`
+T.styles = v`
     :host {
       display: inline-block;
       position: relative;
@@ -3286,19 +3312,19 @@ G([
   W()
 ], T.prototype, "menuWidth", 2);
 T = G([
-  g("o-dropdown")
+  b("o-dropdown")
 ], T);
 var si = Object.getOwnPropertyDescriptor, ai = (o, t, e, n) => {
   for (var i = n > 1 ? void 0 : n ? si(t, e) : t, r = o.length - 1, s; r >= 0; r--)
     (s = o[r]) && (i = s(i) || i);
   return i;
 };
-let Nt = class extends p {
+let Nt = class extends u {
   render() {
     return l` <span class="dots"></span> `;
   }
 };
-Nt.styles = f`
+Nt.styles = v`
   :host {
     display: flex;
     align-items: center;
@@ -3342,14 +3368,14 @@ Nt.styles = f`
   }
 `;
 Nt = ai([
-  g("o-dots")
+  b("o-dots")
 ], Nt);
 var li = Object.defineProperty, ci = Object.getOwnPropertyDescriptor, U = (o, t, e, n) => {
   for (var i = n > 1 ? void 0 : n ? ci(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 && li(t, e, i), i;
 };
-let z = class extends p {
+let z = 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);
@@ -3486,7 +3512,7 @@ let z = class extends p {
 		`;
   }
 };
-z.styles = f`
+z.styles = v`
 	:host {
 		display: inline-block;
 		position: relative;
@@ -3690,7 +3716,7 @@ U([
   W()
 ], z.prototype, "menuWidth", 2);
 z = U([
-  g("o-dropdown-variant")
+  b("o-dropdown-variant")
 ], z);
 /**
  * @license
@@ -3728,7 +3754,7 @@ var pi = Object.defineProperty, ui = Object.getOwnPropertyDescriptor, oe = (o, t
     (s = o[r]) && (i = (n ? s(t, e, i) : s(i)) || i);
   return n && i && pi(t, e, i), i;
 };
-let kt = class extends p {
+let kt = class extends u {
   constructor() {
     super(...arguments), this.option = {}, this.imageSize = 64;
   }
@@ -3749,7 +3775,7 @@ let kt = class extends p {
     return t ? l`<a href="${P(this.option.url)}" class="reassurance-item clickable">${r}</a>` : l`<div class="reassurance-item">${r}</div>`;
   }
 };
-kt.styles = f`
+kt.styles = v`
     :host {
       display: inline-block;
       position: relative;
@@ -3838,14 +3864,14 @@ oe([
   a({ type: Number, reflect: !0 })
 ], kt.prototype, "imageSize", 2);
 kt = oe([
-  g("o-reassurance")
+  b("o-reassurance")
 ], kt);
 var fi = Object.defineProperty, vi = Object.getOwnPropertyDescriptor, X = (o, t, e, n) => {
   for (var i = n > 1 ? void 0 : n ? vi(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 && fi(t, e, i), i;
 };
-const gi = Xt(p);
+const gi = Xt(u);
 let O = class extends gi {
   constructor() {
     super(...arguments), this.link = "", this.name = "", this.value = "", this.text = "", this.size = "standard", this.selected = !1, this.fullwidth = !1, this.inactive = !1;
@@ -3870,7 +3896,7 @@ let O = class extends gi {
     `;
   }
 };
-O.styles = f`
+O.styles = v`
     :host {
       cursor: pointer;
       display: inline-flex;
@@ -3989,14 +4015,14 @@ X([
   a({ type: Boolean, reflect: !0 })
 ], O.prototype, "inactive", 2);
 O = X([
-  g("o-chip")
+  b("o-chip")
 ], O);
 var bi = Object.defineProperty, yi = Object.getOwnPropertyDescriptor, ie = (o, t, e, n) => {
   for (var i = n > 1 ? void 0 : n ? yi(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 && bi(t, e, i), i;
 };
-let _t = class extends p {
+let _t = class extends u {
   constructor() {
     super(), this.name = "", this.value = "", this.addEventListener("selected", this.onChipSelected);
   }
@@ -4012,7 +4038,7 @@ let _t = class extends p {
     `;
   }
 };
-_t.styles = f`
+_t.styles = v`
     :host {
       display: flex;
       flex-direction: row;
@@ -4027,14 +4053,14 @@ ie([
   a({ reflect: !0 })
 ], _t.prototype, "value", 2);
 _t = ie([
-  g("o-chipset")
+  b("o-chipset")
 ], _t);
 var mi = Object.defineProperty, xi = Object.getOwnPropertyDescriptor, N = (o, t, e, n) => {
   for (var i = n > 1 ? void 0 : n ? xi(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 && mi(t, e, i), i;
 };
-const wi = Xt(p);
+const wi = Xt(u);
 let I = class extends wi {
   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";
@@ -4054,7 +4080,7 @@ let I = class extends wi {
     return l`<span class="cross-icon">${S(o)}</span>`;
   }
   strikeThroughImg() {
-    const o = Ao[this.strikethroughImgName].replace(
+    const o = Lo[this.strikethroughImgName].replace(
       "<svg",
       '<svg aria-hidden="true" focusable="false" part="strikethrough"'
     ).replace(/stroke=[#"'a-z1-9]*/gi, "");
@@ -4085,7 +4111,7 @@ let I = class extends wi {
     `;
   }
 };
-I.styles = f`
+I.styles = v`
     :host {
       cursor: pointer;
       display: inline-flex;
@@ -4236,14 +4262,14 @@ N([
   a({ type: Boolean, reflect: !0 })
 ], I.prototype, "fullwidth", 2);
 I = N([
-  g("o-filter-chip")
+  b("o-filter-chip")
 ], I);
 var $i = Object.defineProperty, M = (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 && $i(t, e, i), i;
 };
-const se = class se extends p {
+const se = class se 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, this.tagText = "";
   }
@@ -4309,7 +4335,7 @@ const se = class se extends p {
     `;
   }
 };
-se.styles = f`
+se.styles = v`
     :host {
       display: block;
       max-width: 100%;
@@ -4462,7 +4488,7 @@ var ki = Object.defineProperty, _i = Object.getOwnPropertyDescriptor, ne = (o, t
     (s = o[r]) && (i = (n ? s(t, e, i) : s(i)) || i);
   return n && i && ki(t, e, i), i;
 };
-let Ct = class extends p {
+let Ct = class extends u {
   constructor() {
     super(...arguments), this.variant = "cart", this.text = "";
   }
@@ -4474,7 +4500,7 @@ let Ct = class extends p {
     `;
   }
 };
-Ct.styles = f`
+Ct.styles = v`
     :host([variant]) {
       --badge-width: 19px;
       display: inline-block;
@@ -4516,14 +4542,14 @@ ne([
   a({ type: String })
 ], Ct.prototype, "text", 2);
 Ct = ne([
-  g("o-badge")
+  b("o-badge")
 ], Ct);
 var Ci = Object.defineProperty, Si = Object.getOwnPropertyDescriptor, H = (o, t, e, n) => {
   for (var i = n > 1 ? void 0 : n ? Si(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 && Ci(t, e, i), i;
 };
-let L = class extends p {
+let A = 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;
   }
@@ -4587,7 +4613,7 @@ let L = class extends p {
         `;
   }
 };
-L.styles = f`
+A.styles = v`
         :host {
             --vertical-offset: 24px;
             --horizontal-offset: 24px;
@@ -4667,48 +4693,48 @@ L.styles = f`
     `;
 H([
   a({ type: String, reflect: !0 })
-], L.prototype, "icon", 2);
+], A.prototype, "icon", 2);
 H([
   a({ type: String, reflect: !0 })
-], L.prototype, "text", 2);
+], A.prototype, "text", 2);
 H([
   a({ type: String, reflect: !0 })
-], L.prototype, "verticalanchor", 2);
+], A.prototype, "verticalanchor", 2);
 H([
   a({ type: String, reflect: !0 })
-], L.prototype, "horizontalanchor", 2);
+], A.prototype, "horizontalanchor", 2);
 H([
   a({ type: Number, reflect: !0 })
-], L.prototype, "verticaloffset", 2);
+], A.prototype, "verticaloffset", 2);
 H([
   a({ type: Number, reflect: !0 })
-], L.prototype, "horizontaloffset", 2);
+], A.prototype, "horizontaloffset", 2);
 H([
   a({ type: Number, reflect: !0 })
-], L.prototype, "animationduration", 2);
+], A.prototype, "animationduration", 2);
 H([
   a({ type: String, reflect: !0 })
-], L.prototype, "animationaxis", 2);
+], A.prototype, "animationaxis", 2);
 H([
   a({ type: Boolean, reflect: !0 })
-], L.prototype, "animated", 2);
+], A.prototype, "animated", 2);
 H([
   a({ type: Number, reflect: !0 })
-], L.prototype, "lifeduration", 2);
+], A.prototype, "lifeduration", 2);
 H([
   a({ type: Boolean, reflect: !0 })
-], L.prototype, "multiline", 2);
-L = H([
-  g("o-toast")
-], L);
-var Ei = Object.defineProperty, Li = Object.getOwnPropertyDescriptor, j = (o, t, e, n) => {
-  for (var i = n > 1 ? void 0 : n ? Li(t, e) : t, r = o.length - 1, s; r >= 0; r--)
+], A.prototype, "multiline", 2);
+A = H([
+  b("o-toast")
+], A);
+var Ei = Object.defineProperty, Ai = Object.getOwnPropertyDescriptor, j = (o, t, e, n) => {
+  for (var i = n > 1 ? void 0 : n ? Ai(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 && Ei(t, e, i), i;
 };
-let Ai = 0, A = class extends p {
+let Li = 0, L = 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-${++Ai}`);
+    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-${++Li}`);
   }
   toggle() {
     this.disabled || (this.indeterminate ? (this.indeterminate = !1, this.checked = !0) : this.checked = !this.checked, this.syncInput(), this.dispatchEvent(new Event("change", { bubbles: !0, composed: !0 })));
@@ -4746,7 +4772,7 @@ let Ai = 0, A = class extends p {
     `;
   }
 };
-A.styles = f`
+L.styles = v`
     :host {
       display: inline-flex;
       align-items: center;
@@ -4851,43 +4877,43 @@ A.styles = f`
   `;
 j([
   a({ type: Boolean, reflect: !0 })
-], A.prototype, "checked", 2);
+], L.prototype, "checked", 2);
 j([
   a({ type: Boolean, reflect: !0 })
-], A.prototype, "indeterminate", 2);
+], L.prototype, "indeterminate", 2);
 j([
   a({ type: Boolean, reflect: !0 })
-], A.prototype, "disabled", 2);
+], L.prototype, "disabled", 2);
 j([
   a({ type: String, reflect: !0 })
-], A.prototype, "size", 2);
+], L.prototype, "size", 2);
 j([
   a({ type: Boolean })
-], A.prototype, "showLabel", 2);
+], L.prototype, "showLabel", 2);
 j([
   a({ type: String })
-], A.prototype, "label", 2);
+], L.prototype, "label", 2);
 j([
   a({ type: String })
-], A.prototype, "name", 2);
+], L.prototype, "name", 2);
 j([
   a({ type: String })
-], A.prototype, "value", 2);
+], L.prototype, "value", 2);
 j([
   a({ type: String, reflect: !0 })
-], A.prototype, "inputId", 2);
+], L.prototype, "inputId", 2);
 j([
   Ce("input")
-], A.prototype, "inputEl", 2);
-A = j([
-  g("o-checkbox")
-], A);
+], L.prototype, "inputEl", 2);
+L = j([
+  b("o-checkbox")
+], L);
 var Pi = Object.defineProperty, Bi = Object.getOwnPropertyDescriptor, q = (o, t, e, n) => {
   for (var i = n > 1 ? void 0 : n ? Bi(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 && Pi(t, e, i), i;
 };
-let zi = 0, D = class extends p {
+let zi = 0, D = 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-${++zi}`);
   }
@@ -4921,7 +4947,7 @@ let zi = 0, D = class extends p {
     `;
   }
 };
-D.styles = f`
+D.styles = v`
     :host {
       display: inline-flex;
       align-items: center;
@@ -5039,14 +5065,14 @@ q([
   Ce("input")
 ], D.prototype, "inputEl", 2);
 D = q([
-  g("o-radio")
+  b("o-radio")
 ], D);
 var Oi = Object.getOwnPropertyDescriptor, Ii = (o, t, e, n) => {
   for (var i = n > 1 ? void 0 : n ? Oi(t, e) : t, r = o.length - 1, s; r >= 0; r--)
     (s = o[r]) && (i = s(i) || i);
   return i;
 };
-let qt = class extends p {
+let qt = class extends u {
   render() {
     return l`
             <nav aria-label="Breadcrumbs">
@@ -5057,7 +5083,7 @@ let qt = class extends p {
         `;
   }
 };
-qt.styles = f`
+qt.styles = v`
         nav {
             max-width: 144rem;
             margin: auto;
@@ -5070,14 +5096,14 @@ qt.styles = f`
         }
     `;
 qt = Ii([
-  g("o-breadcrumbs")
+  b("o-breadcrumbs")
 ], qt);
 var Di = Object.defineProperty, Hi = Object.getOwnPropertyDescriptor, re = (o, t, e, n) => {
   for (var i = n > 1 ? void 0 : n ? Hi(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 && Di(t, e, i), i;
 };
-let St = class extends p {
+let St = class extends u {
   constructor() {
     super(...arguments), this.href = "", this.active = !1;
   }
@@ -5098,7 +5124,7 @@ let St = class extends p {
         `;
   }
 };
-St.styles = f`
+St.styles = v`
         :host(:not([active]))::after {
             content: "/";
             margin: 0 0.5rem;
@@ -5145,14 +5171,14 @@ re([
   a({ type: Boolean, reflect: !0 })
 ], St.prototype, "active", 2);
 St = re([
-  g("o-breadcrumb")
+  b("o-breadcrumb")
 ], St);
 var Ti = Object.defineProperty, Mi = Object.getOwnPropertyDescriptor, ut = (o, t, e, n) => {
   for (var i = n > 1 ? void 0 : n ? Mi(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 && Ti(t, e, i), i;
 };
-let et = class extends p {
+let et = class extends u {
   constructor() {
     super(...arguments), this.imageUrl = "", this.imageAlt = "", this.hoverUrl = "", this.hoverAlt = "", this.dimmed = !1;
   }
@@ -5171,7 +5197,7 @@ let et = class extends p {
     </div>`;
   }
 };
-et.styles = f`
+et.styles = v`
     :host {
       --card-width : 175px;
       --card-height : 260px;
@@ -5260,7 +5286,7 @@ ut([
   a({ type: Boolean, reflect: !0 })
 ], et.prototype, "dimmed", 2);
 et = ut([
-  g("o-arch-image")
+  b("o-arch-image")
 ], et);
 const ji = `<?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg
@@ -5348,7 +5374,7 @@ var Fi = Object.defineProperty, Ri = Object.getOwnPropertyDescriptor, C = (o, t,
     (s = o[r]) && (i = (n ? s(t, e, i) : s(i)) || i);
   return n && i && Fi(t, e, i), i;
 };
-const ae = class ae extends p {
+const ae = class ae extends u {
   constructor() {
     super(...arguments), this.ispagedesigner = !1, this._classPopin = "", this.open = !1, this.background = "", this.backgroundUrl = "", this.closeOnEsc = !0, this.closeOnBackdrop = !0, this.lockScroll = !0, this.variant = "fullscreen", this.maxWidth = "640px", this.showBackButton = !1, this.contrast = !1, this.iconSize = "large", this.hideHeaderOnScroll = !1, this._labelId = `title-${Math.random().toString(36).slice(2)}`, this._headerHidden = !1, this._onBackdropClick = (t) => {
       var n;
@@ -5477,7 +5503,7 @@ const ae = class ae extends p {
     `;
   }
 };
-ae.styles = f`
+ae.styles = v`
     :host {
       position: fixed;
       inset: 0;
@@ -5613,62 +5639,62 @@ ae.styles = f`
       to { transform: translateY(0) scale(1); opacity: 1; }
     }
   `;
-let x = ae;
+let $ = ae;
 C([
   a({ type: Boolean, reflect: !0 })
-], x.prototype, "ispagedesigner", 2);
+], $.prototype, "ispagedesigner", 2);
 C([
   a({ type: String, reflect: !0 })
-], x.prototype, "classPopin", 1);
+], $.prototype, "classPopin", 1);
 C([
   a({ type: Boolean, reflect: !0 })
-], x.prototype, "open", 2);
+], $.prototype, "open", 2);
 C([
   a({ type: String, reflect: !0 })
-], x.prototype, "background", 2);
+], $.prototype, "background", 2);
 C([
   a({ type: String, attribute: "background-url", reflect: !0 })
-], x.prototype, "backgroundUrl", 2);
+], $.prototype, "backgroundUrl", 2);
 C([
   a({ type: Boolean, attribute: "close-on-esc" })
-], x.prototype, "closeOnEsc", 2);
+], $.prototype, "closeOnEsc", 2);
 C([
   a({ type: Boolean, attribute: "close-on-backdrop" })
-], x.prototype, "closeOnBackdrop", 2);
+], $.prototype, "closeOnBackdrop", 2);
 C([
   a({ type: Boolean, attribute: "lock-scroll" })
-], x.prototype, "lockScroll", 2);
+], $.prototype, "lockScroll", 2);
 C([
   a({ type: String, reflect: !0 })
-], x.prototype, "variant", 2);
+], $.prototype, "variant", 2);
 C([
   a({ type: String, attribute: "max-width" })
-], x.prototype, "maxWidth", 2);
+], $.prototype, "maxWidth", 2);
 C([
   a({ type: Boolean, reflect: !0 })
-], x.prototype, "showBackButton", 2);
+], $.prototype, "showBackButton", 2);
 C([
   a({ type: Boolean, reflect: !0 })
-], x.prototype, "contrast", 2);
+], $.prototype, "contrast", 2);
 C([
   a({ type: String, reflect: !0 })
-], x.prototype, "iconSize", 2);
+], $.prototype, "iconSize", 2);
 C([
   a({ type: Boolean, attribute: "hide-header-on-scroll" })
-], x.prototype, "hideHeaderOnScroll", 2);
+], $.prototype, "hideHeaderOnScroll", 2);
 C([
   W()
-], x.prototype, "_labelId", 2);
+], $.prototype, "_labelId", 2);
 C([
   W()
-], x.prototype, "_headerHidden", 2);
-customElements.define("o-popin", x);
-var Ui = Object.defineProperty, Ni = Object.getOwnPropertyDescriptor, $ = (o, t, e, n) => {
+], $.prototype, "_headerHidden", 2);
+customElements.define("o-popin", $);
+var Ui = Object.defineProperty, Ni = Object.getOwnPropertyDescriptor, k = (o, t, e, n) => {
   for (var i = n > 1 ? void 0 : n ? Ni(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 && Ui(t, e, i), i;
 };
-let m = class extends p {
+let w = class extends u {
   constructor() {
     super(...arguments), this.type = "cart | notifyme", this.titleProduct = "", this.descriptionProduct = "", this.volume = "", this.perLiter = "", this.mainPrice = "", this.salesPercentage = "", this.oldPrice = "", this.imageUrl = "https://placehold.co/112x140", this.outOfStock = !1, this.altImage = "", this.fullwidth = !1, this.current = !1, this.hideIcon = !1, this.tagText = "";
   }
@@ -5737,7 +5763,7 @@ let m = class extends p {
     `;
   }
 };
-m.styles = f`
+w.styles = v`
     :host {
       display: block;
       max-width: 100%;
@@ -5906,57 +5932,57 @@ m.styles = f`
       cursor: pointer;
     }
   `;
-$([
+k([
   a({ type: String })
-], m.prototype, "type", 2);
-$([
+], w.prototype, "type", 2);
+k([
   a({ type: String })
-], m.prototype, "titleProduct", 2);
-$([
+], w.prototype, "titleProduct", 2);
+k([
   a({ type: String })
-], m.prototype, "descriptionProduct", 2);
-$([
+], w.prototype, "descriptionProduct", 2);
+k([
   a({ type: String })
-], m.prototype, "volume", 2);
-$([
+], w.prototype, "volume", 2);
+k([
   a({ type: String })
-], m.prototype, "perLiter", 2);
-$([
+], w.prototype, "perLiter", 2);
+k([
   a({ type: String })
-], m.prototype, "mainPrice", 2);
-$([
+], w.prototype, "mainPrice", 2);
+k([
   a({ type: String })
-], m.prototype, "salesPercentage", 2);
-$([
+], w.prototype, "salesPercentage", 2);
+k([
   a({ type: String })
-], m.prototype, "oldPrice", 2);
-$([
+], w.prototype, "oldPrice", 2);
+k([
   a({ type: String })
-], m.prototype, "imageUrl", 2);
-$([
+], w.prototype, "imageUrl", 2);
+k([
   a({ type: Boolean })
-], m.prototype, "outOfStock", 2);
-$([
+], w.prototype, "outOfStock", 2);
+k([
   a({ type: String })
-], m.prototype, "altImage", 2);
-$([
+], w.prototype, "altImage", 2);
+k([
   a({ type: Boolean })
-], m.prototype, "fullwidth", 2);
-$([
+], w.prototype, "fullwidth", 2);
+k([
   a({ type: Boolean })
-], m.prototype, "current", 2);
-$([
+], w.prototype, "current", 2);
+k([
   a({ type: Boolean })
-], m.prototype, "hideIcon", 2);
-$([
+], w.prototype, "hideIcon", 2);
+k([
   a({ type: String })
-], m.prototype, "tagText", 2);
-$([
+], w.prototype, "tagText", 2);
+k([
   a({ attribute: !1 })
-], m.prototype, "onClickTile", 2);
-$([
+], w.prototype, "onClickTile", 2);
+k([
   a({ attribute: !1 })
-], m.prototype, "onClickIcon", 2);
-m = $([
-  g("o-medium-tile")
-], m);
+], w.prototype, "onClickIcon", 2);
+w = k([
+  b("o-medium-tile")
+], w);