@florid-kit/components 0.9.14 → 0.9.16

package/index.mjs

@@ -282,7 +282,7 @@ it.elementStyles = [], it.shadowRootOptions = { mode: "open" }, it[ct("elementPr
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const ht = globalThis, _t = ht.trustedTypes, oe = _t ? _t.createPolicy("lit-html", { createHTML: (o) => o }) : void 0, de = "$lit$", K = `lit$${Math.random().toFixed(9).slice(2)}$`, pe = "?" + K, Ee = `<${pe}>`, tt = document, pt = () => tt.createComment(""), ut = (o) => o === null || typeof o != "object" && typeof o != "function", Rt = Array.isArray, Ae = (o) => Rt(o) || typeof (o == null ? void 0 : o[Symbol.iterator]) == "function", Pt = `[ 	
+const ht = globalThis, _t = ht.trustedTypes, oe = _t ? _t.createPolicy("lit-html", { createHTML: (o) => o }) : void 0, de = "$lit$", K = `lit$${Math.random().toFixed(9).slice(2)}$`, pe = "?" + K, Ae = `<${pe}>`, tt = document, pt = () => tt.createComment(""), ut = (o) => o === null || typeof o != "object" && typeof o != "function", Rt = Array.isArray, Ee = (o) => Rt(o) || typeof (o == null ? void 0 : o[Symbol.iterator]) == "function", Pt = `[ 	
 \f\r]`, lt = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, ie = /-->/g, ne = />/g, J = RegExp(`>|${Pt}(?:([^\\s"'>=/]+)(${Pt}*=${Pt}*(?:[^ 	
 \f\r"'\`<>=]|("|')|))|$)`, "g"), re = /'/g, se = /"/g, ue = /^(?:script|style|textarea|title)$/i, Le = (o) => (t, ...e) => ({ _$litType$: o, strings: t, values: e }), l = Le(1), G = Symbol.for("lit-noChange"), d = Symbol.for("lit-nothing"), ae = /* @__PURE__ */ new WeakMap(), Q = tt.createTreeWalker(tt, 129);
 function ve(o, t) {
@@ -297,7 +297,7 @@ const Pe = (o, t) => {
     let m, w, v = -1, R = 0;
     for (; R < c.length && (s.lastIndex = R, w = s.exec(c), w !== null); ) R = s.lastIndex, s === lt ? w[1] === "!--" ? s = ie : w[1] !== void 0 ? s = ne : 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 ?? lt, 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 : re) : s === se || s === re ? s = J : s === ie || s === ne ? s = lt : (s = J, i = void 0);
     const Z = s === J && o[h + 1].startsWith("/>") ? " " : "";
-    r += s === lt ? c + Ee : v >= 0 ? (n.push(m), c.slice(0, v) + de + c.slice(v) + K + Z) : c + K + (v === -2 ? h : Z);
+    r += s === lt ? c + Ae : v >= 0 ? (n.push(m), c.slice(0, v) + de + c.slice(v) + K + Z) : c + K + (v === -2 ? h : Z);
   }
   return [ve(o, r + (o[e] || "<?>") + (t === 2 ? "</svg>" : t === 3 ? "</math>" : "")), n];
 };
@@ -393,7 +393,7 @@ class xt {
     return this._$AB;
   }
   _$AI(t, e = this) {
-    t = nt(this, t, e), ut(t) ? t === d || t == null || t === "" ? (this._$AH !== d && this._$AR(), this._$AH = d) : t !== this._$AH && t !== G && this._(t) : t._$litType$ !== void 0 ? this.$(t) : t.nodeType !== void 0 ? this.T(t) : Ae(t) ? this.k(t) : this._(t);
+    t = nt(this, t, e), ut(t) ? t === d || t == null || t === "" ? (this._$AH !== d && this._$AR(), this._$AH = d) : t !== this._$AH && t !== G && this._(t) : t._$litType$ !== void 0 ? this.$(t) : t.nodeType !== void 0 ? this.T(t) : Ee(t) ? this.k(t) : this._(t);
   }
   O(t) {
     return this._$AA.parentNode.insertBefore(t, this._$AB);
@@ -856,715 +856,451 @@ class Dt extends Bt {
 }
 Dt.directiveName = "unsafeSVG", Dt.resultType = 2;
 const C = Vt(Dt);
-var mo = Object.defineProperty, xo = Object.getOwnPropertyDescriptor, x = (o, t, e, n) => {
-  for (var i = n > 1 ? void 0 : n ? xo(t, e) : t, r = o.length - 1, s; r >= 0; r--)
-    (s = o[r]) && (i = (n ? s(t, e, i) : s(i)) || i);
-  return n && i && mo(t, e, i), i;
+/**
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const mo = (o) => o.strings === void 0;
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const dt = (o, t) => {
+  var n;
+  const e = o._$AN;
+  if (e === void 0) return !1;
+  for (const i of e) (n = i._$AO) == null || n.call(i, t, !1), dt(i, t);
+  return !0;
+}, kt = (o) => {
+  let t, e;
+  do {
+    if ((t = o._$AM) === void 0) break;
+    e = t._$AN, e.delete(o), o = t;
+  } while ((e == null ? void 0 : e.size) === 0);
+}, be = (o) => {
+  for (let t; t = o._$AM; o = t) {
+    let e = t._$AN;
+    if (e === void 0) t._$AN = e = /* @__PURE__ */ new Set();
+    else if (e.has(o)) break;
+    e.add(o), $o(t);
+  }
+};
+function xo(o) {
+  this._$AN !== void 0 ? (kt(this), this._$AM = o, be(this)) : this._$AM = o;
+}
+function wo(o, t = !1, e = 0) {
+  const n = this._$AH, i = this._$AN;
+  if (i !== void 0 && i.size !== 0) if (t) if (Array.isArray(n)) for (let r = e; r < n.length; r++) dt(n[r], !1), kt(n[r]);
+  else n != null && (dt(n, !1), kt(n));
+  else dt(this, o);
+}
+const $o = (o) => {
+  o.type == Ut.CHILD && (o._$AP ?? (o._$AP = wo), o._$AQ ?? (o._$AQ = xo));
 };
-const wo = Ft(u);
-let b = class extends wo {
+class Co extends qt {
   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;
-  }
-  get name() {
-    return this.getAttribute("name") ?? "";
+    super(...arguments), this._$AN = void 0;
   }
-  set name(o) {
-    this.setAttribute("name", o);
+  _$AT(t, e, n) {
+    super._$AT(t, e, n), be(this), this.isConnected = t._$AU;
   }
-  get form() {
-    return this[Nt].form;
+  _$AO(t, e = !0) {
+    var n, i;
+    t !== this.isConnected && (this.isConnected = t, t ? (n = this.reconnected) == null || n.call(this) : (i = this.disconnected) == null || i.call(this)), e && (dt(this, t), kt(this));
   }
-  handleClick(o) {
-    if (!(o instanceof KeyboardEvent && !["Enter", " "].includes(o.key)) && this.panelTarget) {
-      const t = document.getElementById(this.panelTarget);
-      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.`);
+  setValue(t) {
+    if (mo(this._$Ct)) this._$Ct._$AI(t, this);
+    else {
+      const e = [...this._$Ct._$AH];
+      e[this._$Ci] = t, this._$Ct._$AI(e, this, 0);
     }
   }
-  render() {
-    return this.href ? this.renderLink() : this.renderButton();
+  disconnected() {
   }
-  renderIcon(o) {
-    const t = o === "start" ? this.startIconModel : this.endIconModel;
-    if (!t) return d;
-    const e = N[t].replace(
-      "<svg",
-      '<svg aria-hidden="true" focusable="false" part="svg"'
-    );
-    return l`<span class="${o === "start" ? "icon-start" : "icon-end"}">${C(e)}</span>`;
+  reconnected() {
   }
-  renderButton() {
-    const o = this.text || this.textsecond;
-    return l`
-      <button type=${this.type} class="button" ?disabled=${this.disabled} @click=${this.handleClick} @keydown=${this.handleClick}>
-          ${this.startIcon ? this.renderIcon("start") : d}
-          ${o ? l`
-                ${this.text ? l`<span class="text">${this.text}</span>` : d}
-                ${this.textsecond ? l`<span class="text">${this.textsecond}</span>` : d}
-                ${this.withbadge ? l`<slot></slot>` : d}
-              ` : l`<slot></slot>`}
-          ${this.endIcon ? this.renderIcon("end") : d}
-      </button>
-    `;
+}
+class _o extends Co {
+  constructor() {
+    super(...arguments), this.prevData = {};
   }
-  renderLink() {
-    const o = this.text || this.textsecond;
-    return l`
-      <a
-        href=${this.href}
-        target=${this.target || d}
-        class="button"
-        ?disabled=${this.disabled}
-        role="button"
-        @click=${this.handleClick}
-        @keydown=${this.handleClick}
-      >
-          ${this.startIcon ? this.renderIcon("start") : d}
-          ${o ? l`
-                ${this.text ? l`<span>${this.text}</span>` : d}
-                ${this.textsecond ? l`<span>${this.textsecond}</span>` : d}
-              ` : l`<slot></slot>`}
-          ${this.endIcon ? this.renderIcon("end") : d}
-      </a>
-    `;
+  render(t) {
+    return d;
   }
-};
-Re(b);
-b.formAssociated = !0;
-b.styles = f`
-    :host {
-      --button-border: transparent;
-      --badge-outer-width: 19px;
-      cursor: pointer;
-      display: inline-flex;
-    }
-
-    :host(.a--tabfocus) {
-      outline: none !important;
-    }
-
-    :host([fullwidth]) {
-      width: 100%;
-    }
-
-    :host([variant="primary"]) {
-      --button-bg: var(--color-container-action-primary-default);
-      --button-bg-hover: var(--color-container-action-primary-hover);
-      --button-bg-pressed: var(--color-container-action-primary-pressed);
-      --button-text: var(--color-content-action-primary);
-      --button-text-hover: var(--color-content-action-primary);
-      --button-border: transparent;
-      --button-border-width: var(--border-m);
-      --button-padding: var(--spacing-l, 12px) var(--spacing-3-xl, 24px);
-      --button-starticon-svg-width: 0px; /* No starticon SVG for primary button */
-      --button-endicon-svg-width: 0px; /* No endicon SVG for primary button */
+  update(t, [e]) {
+    var n;
+    this.element !== t.element && (this.element = t.element), this.host = ((n = t.options) === null || n === void 0 ? void 0 : n.host) || this.element, this.apply(e), this.groom(e), this.prevData = { ...e };
+  }
+  apply(t) {
+    if (!t)
+      return;
+    const { prevData: e, element: n } = this;
+    for (const i in t) {
+      const r = t[i];
+      r !== e[i] && (n[i] = r);
     }
-
-    :host([variant="secondary"]) {
-      --button-bg: var(--color-container-action-secondary-default);
-      --button-bg-hover: var(--color-container-action-secondary-hover);
-      --button-bg-pressed: var(--color-container-action-secondary-pressed);
-      --button-text: var(--color-content-action-secondary);
-      --button-text-hover: var(--color-content-action-secondary);
-      --button-border: var(--color-border-secondary);
-      --button-border-width: var(--border-m);
-      --button-padding: var(--spacing-l, 12px) var(--spacing-3-xl, 24px);
-      --button-starticon-svg-width: 16px;
-      --button-endicon-svg-width: 0px; /* No endicon SVG for secondary button */
+  }
+  groom(t) {
+    const { prevData: e, element: n } = this;
+    if (e)
+      for (const i in e)
+        (!t || !(i in t) && n[i] === e[i]) && (n[i] = void 0);
+  }
+}
+class ko extends _o {
+  constructor() {
+    super(...arguments), this.eventData = {};
+  }
+  apply(t) {
+    if (t)
+      for (const e in t) {
+        const n = t[e];
+        n !== this.eventData[e] && this.applyEvent(e, n);
+      }
+  }
+  applyEvent(t, e) {
+    const { prevData: n, element: i } = this;
+    this.eventData[t] = e, n[t] && i.removeEventListener(t, this, e), i.addEventListener(t, this, e);
+  }
+  groom(t) {
+    const { prevData: e, element: n } = this;
+    if (e)
+      for (const i in e)
+        (!t || !(i in t) && n[i] === e[i]) && this.groomEvent(i, e[i]);
+  }
+  groomEvent(t, e) {
+    const { element: n } = this;
+    delete this.eventData[t], n.removeEventListener(t, this, e);
+  }
+  handleEvent(t) {
+    const e = this.eventData[t.type];
+    typeof e == "function" ? e.call(this.host, t) : e.handleEvent(t);
+  }
+  disconnected() {
+    const { eventData: t, element: e } = this;
+    for (const n in t) {
+      const i = n.slice(1), r = t[n];
+      e.removeEventListener(i, this, r);
     }
-
-    :host([variant="ghost"]) {
-      --button-bg: transparent;
-      --button-bg-hover: var(--color-alpha-dark-lightest);
-      --button-bg-pressed: var(--color-alpha-dark-lighter);
-      --button-text: var(--color-content-action-secondary);
-      --button-text-hover: var(--color-content-action-secondary);
-      --button-border-width: 0;
-      --button-padding: var(--spacing-m, 10px) var(--spacing-xl, 16px);   
-      --button-starticon-svg-width: 16px;
-      --button-endicon-svg-width: 12px;
+  }
+  reconnected() {
+    const { eventData: t, element: e } = this;
+    for (const n in t) {
+      const i = n.slice(1), r = t[n];
+      e.addEventListener(i, this, r);
     }
-
-    :host([variant="tertiary"]) {
-      --button-bg: var(--color-container-action-tertiary-default);
-      --button-bg-hover: var(--color-container-action-tertiary-hover);
-      --button-bg-pressed: var(--color-container-action-tertiary-pressed);
-      --button-text: var(--color-content-body);
-      --button-text-hover: var(--color-content-action-tertiary);
-      --button-border-width: 0;
-      --button-padding: var(--spacing-m, 10px) var(--spacing-l, 12px); 
-      --button-starticon-svg-width: 0px; /* No starticon SVG for tertiary button */
-      --button-endicon-svg-width: 8px; 
-    }
-
-    :host([disabled]),
-    :host([aria-disabled="true"]),
-    :host([aria-disabled="true"]:hover) {
-      --button-bg: var(--color-container-disabled);
-      --button-text: var(--color-content-disabled);
-      --button-border: transparent;
+  }
+}
+class So extends ko {
+  apply(t) {
+    if (!t)
+      return;
+    const { prevData: e, element: n } = this;
+    for (const i in t) {
+      const r = t[i];
+      if (r === e[i])
+        continue;
+      const s = i.slice(1);
+      switch (i[0]) {
+        case "@":
+          this.eventData[s] = r, this.applyEvent(s, r);
+          break;
+        case ".":
+          n[s] = r;
+          break;
+        case "?":
+          r ? n.setAttribute(s, "") : n.removeAttribute(s);
+          break;
+        default:
+          r != null ? n.setAttribute(i, String(r)) : n.removeAttribute(i);
+          break;
+      }
     }
+  }
+  groom(t) {
+    const { prevData: e, element: n } = this;
+    if (e)
+      for (const i in e) {
+        const r = i.slice(1);
+        if (!t || !(i in t) && n[r] === e[i])
+          switch (i[0]) {
+            case "@":
+              this.groomEvent(r, e[i]);
+              break;
+            case ".":
+              n[r] = void 0;
+              break;
+            case "?":
+              n.removeAttribute(r);
+              break;
+            default:
+              n.removeAttribute(i);
+              break;
+          }
+      }
+  }
+}
+const le = Vt(So);
+/**
+ * @license
+ * Copyright 2018 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const k = (o) => o ?? d;
+var Ao = Object.defineProperty, Eo = Object.getOwnPropertyDescriptor, H = (o, t, e, n) => {
+  for (var i = n > 1 ? void 0 : n ? Eo(t, e) : t, r = o.length - 1, s; r >= 0; r--)
+    (s = o[r]) && (i = (n ? s(t, e, i) : s(i)) || i);
+  return n && i && Ao(t, e, i), i;
+};
+let 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 = "";
+  }
+  updated(o) {
+    super.updated(o), this.style.setProperty("--icon-stroke-width", this.strokewidth);
+  }
+  render() {
+    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"'), n = 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}">	
+					${C(e)}
+				</span>
+			` : l`
+				<button
+					type="button"
+					aria-label=${k(i)}
+					class="icon-button ${this.size} ${this.bgstyle} ${this.status} ${t}"
+					?disabled="${this.disabled}"
+				>
+					${C(e)}
+					${n}
+				</button>
+			`}
+		`;
+  }
+};
+S.styles = f`
+		:host {
+			display: inline-flex;
+			justify-content: center;
+			align-items: center;
+            outline: none !important;
+		}
 
-    :host([disabled][variant="secondary"]) {
-      --button-border: var(--color-border-secondary);
-    }
+		.icon-button {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			width: 32px;
+			height: 32px;
+			border: transparent;
+			border-radius: var(--radius-full);
+			cursor: pointer;
+			position: relative;
 
-    .button {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      width: 100%;
-      gap: var(--spacing-s, 8px);
-      height: 100%;
-      background-color: var(--button-bg);
-      color: var(--button-text);
-      border: var(--button-border-width, var(--border-m)) solid var(--button-border);
-      border-radius: var(--radius-m);
-      font-family: var(--font-family-loccitane-sans);
-      font-size: var(--font-size-150);
-      font-weight: var(--font-weight-400);
-      line-height: var(--line-height-200);
-      min-width: 64px;
-      padding: var(--button-padding);
-      text-decoration: none;
-      cursor: inherit;
-      box-sizing: border-box;
+			&.icon-wishlist {
+				svg {
+					path {
+						stroke: var(--color-content-action-secondary);
+						stroke-width: var(--icon-stroke-width, 1);
+					}
+				}
+			}
+		}
 
-      span {
-        font-family: var(--font-family-loccitane-sans);
-        font-size: var(--font-size-150);
-        font-weight: var(--font-weight-400);
-        line-height: var(--line-height-200);
-      }
-    }
+		.icon-button.filled svg {
+			fill: var(--color-content-action-secondary);
+		}
 
-    .button:hover:not([disabled]) {
-      background-color: var(--button-bg-hover);
-      color: var(--button-text-hover);
-    }
+		.icon-button.xsmall {
+			width: 20px;
+			height: 20px;
 
-    .button:active:not([disabled]) {
-      background-color: var(--button-bg-pressed);
-    }
+			&:not(.icon-wishlist) {
+				svg {
+					width: 8px;
+					height: 8px;
+				}
+			}
+		}
 
-    .button:focus-visible {
-      ${at};
-    }
+		.icon-button.small {
+			width: 32px;
+			height: 32px;
 
-    span.text + span.text::before {
-      content: "•";
-      margin-right: 8px;
-    }
+			&:not(.icon-wishlist) {
+				svg {
+					width: 16px;
+					height: 16px;
+				}
+			}
+		}
 
-    .icon-start,
-    .icon-end {
-      display: inline-flex;
-      align-items: center;
+		.icon-button.medium {
+			width: 40px;
+			height: 40px;
 
-      svg {
-        max-height: 20px;
-      }
-      svg[x] {
-        width: 15px;
-      }
-      path[fill],
-      path[class] {
-        fill: var(--button-text) !important;
-      }
-      path[stroke] {
-        stroke: var(--button-text) !important;
-      }
-    }
+			&:not(.icon-wishlist) {
+				svg {
+					width: 16px;
+					height: 16px;
+				}
+			}
+		}
 
-    :host([variant="tertiary"][fullwidth][endIcon]) .button {
-      justify-content: space-between;
-    }
+		.icon-button.large {
+			width: 40px;
+			height: 40px;
 
-    .button span {
-      display: inline-flex;
-      align-items: center;
-    }
+			&:not(.icon-wishlist) {
+				svg {
+					width: 24px;
+					height: 24px;
+				}
+			}
+		}
 
-    .button slot {
-      display: inline-flex;
-      align-items: center;
-    }
-      
-    :host([variant="tertiary"][endIcon]) .button .icon-end {
-      width: var(--button-endicon-svg-width, 8px);
-    }
+		.icon-button.none-light, .icon-button.none-contrast {
+			background-color: transparent;
+			width: auto;
+			height: auto;
 
-    :host([underlined]) span:not([class*="icon-"]),
-    :host([underlined]) .text,
-    :host([underlined]:not([text])) .button slot {
-      position: relative;
+			&.xsmall {
+				svg {
+					width: 8px;
+					height: 8px;
+				}
+			}
 
-      &::after {
-        content: "";
-        display: block;
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        width: 100%;
-        border-bottom: var(--border-M, 1px) solid var(--button-text);
-      }
-    }
+			&.small {
+				svg {
+					width: 16px;
+					height: 16px;
+				}
+			}
 
-    :host([underlined]:not([text])) .button slot {
-      display: inline-flex;
-      gap: 8px;
-    }
+			&.medium {
+				svg {
+					width: 16px;
+					height: 16px;
+				}
+			}
 
-    :host([underlined][withbadge]:not([text])) .button slot {
-      &::after {
-        width: calc(100% - var(--badge-outer-width, 19px) - var(--spacing-s, 8px))
-      }
-    }
-
-    //Icon movement on hover
-    :host([variant="tertiary"][endIcon]) .icon-end {
-      display: inline-flex;
-      align-items: center;
-    }
+			&.large {
+				svg {
+					width: 24px;
+					height: 24px;
+				}
+			}
 
-    :host([variant="tertiary"][endIcon]:hover) .icon-end {
-      transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-      transform: translateX(4px);
-    }
-    //End icon movment on hover
-  `;
-x([
-  a()
-], b.prototype, "type", 2);
-x([
-  a({ reflect: !0 })
-], b.prototype, "value", 2);
-x([
-  a({ type: String, reflect: !0 })
-], b.prototype, "variant", 2);
-x([
-  a({ type: String })
-], b.prototype, "text", 2);
-x([
-  a({ type: String })
-], b.prototype, "textsecond", 2);
-x([
-  a({ type: Boolean, reflect: !0 })
-], b.prototype, "fullwidth", 2);
-x([
-  a({ type: Boolean, reflect: !0 })
-], b.prototype, "disabled", 2);
-x([
-  a({ type: String, reflect: !0 })
-], b.prototype, "startIconModel", 2);
-x([
-  a({ type: String, reflect: !0 })
-], b.prototype, "endIconModel", 2);
-x([
-  a({ type: Boolean, reflect: !0, attribute: "starticon" })
-], b.prototype, "startIcon", 2);
-x([
-  a({ type: Boolean, reflect: !0, attribute: "endicon" })
-], b.prototype, "endIcon", 2);
-x([
-  a({ type: String, attribute: "paneltarget", reflect: !0 })
-], b.prototype, "panelTarget", 2);
-x([
-  a({ type: String })
-], b.prototype, "href", 2);
-x([
-  a({ type: String })
-], b.prototype, "target", 2);
-x([
-  a({ type: Boolean, reflect: !0 })
-], b.prototype, "underlined", 2);
-x([
-  a({ type: Boolean, reflect: !0 })
-], b.prototype, "withbadge", 2);
-b = x([
-  y("o-button")
-], b);
-var $o = Object.defineProperty, Co = Object.getOwnPropertyDescriptor, Et = (o, t, e, n) => {
-  for (var i = n > 1 ? void 0 : n ? Co(t, e) : t, r = o.length - 1, s; r >= 0; r--)
-    (s = o[r]) && (i = (n ? s(t, e, i) : s(i)) || i);
-  return n && i && $o(t, e, i), i;
-};
-let rt = 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", {
-        detail: { status: this.status },
-        bubbles: !0,
-        composed: !0
-      }));
-    };
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.setAttribute("role", "button"), this.setAttribute("aria-pressed", String(this.status === "filled"));
-  }
-  firstUpdated() {
-    this.addEventListener("click", this.toggleStatus), this.addEventListener("keydown", this.handleKeydown);
-  }
-  handleKeydown(o) {
-    (o.key === "Enter" || o.key === " ") && (o.preventDefault(), this.toggleStatus());
-  }
-  render() {
-    const o = N.wishlist.replace(
-      "<svg",
-      '<svg aria-hidden="true" focusable="false" part="svg"'
-    );
-    return l`
-			<button type="button" aria-describedby="${this.ariaDescribedBy}" class="wishlist-button">
-				<span class="sr-only">${this.label}</span>
-				${C(o)}
-			</button>
-		`;
-  }
-  setStatus(o) {
-    this.status = o, this.setAttribute("aria-pressed", String(this.status === "filled")), this.requestUpdate();
-  }
-  setAriaDescribedBy(o) {
-    this.ariaDescribedBy = o, this.requestUpdate();
-  }
-  setLabel(o) {
-    this.label = o, this.requestUpdate();
-  }
-};
-rt.styles = f`
-		:host {
-			display: inline-flex;
-			justify-content: center;
-			align-items: center;
-			outline: none !important;
+			&:disabled {
+				background-color: transparent;	
+			}
 		}
 
-		.wishlist-button {
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			width: 40px;
-			height: 40px;
-			border: transparent;
-			border-radius: var(--radius-full);
-			background-color: var(--color-alpha-light-strong);
-			position: relative;
-			cursor: pointer;
+		.icon-button.none-light {
+			svg {
+				path {
+					stroke: var(--color-content-action-primary);
+					fill: var(--color-content-action-primary);
+				}
+			}
 		}
 
-		.wishlist-button:hover {
-			background-color: var(--color-alpha-light-stronger);
+		.icon-button.none-light.icon-wishlist svg path {
+			fill: none;
 		}
 
-		.wishlist-button:active {
-			background-color: var(--color-alpha-light-strongest);
+		:host([status="filled"]) .icon-button.none-light.icon-wishlist svg path {
+			fill: var(--color-content-action-primary);
 		}
 
-		.wishlist-button:focus-visible {
-			${at};
+		.icon-button.background-light {
+			background-color: var(--color-alpha-light-strong);
+
+			&:hover:not(:disabled) {
+				background-color: var(--color-alpha-light-stronger);
+			}
+
+			&:active:not(:disabled) {
+				background-color: var(--color-alpha-light-strongest);
+			}
 		}
 
-		.wishlist-button:hover svg path {
-			fill: var(--color-content-action-secondary);
+		.icon-button.background-contrast {
+			background-color: var(--color-container-action-tertiary-default);
+
+			&:hover:not(:disabled) {
+				background-color: var(--color-container-action-tertiary-hover);
+			}
+
+			&:active:not(:disabled) {
+				background-color: var(--color-container-action-tertiary-pressed);
+			}
 		}
 
-		:host([status="filled"]) .wishlist-button svg path {
-			fill: var(--color-content-action-secondary);
+		.icon-button.ghost-light {
+			background-color: transparent;
+
+			svg {
+				path {
+					stroke: var(--color-content-action-primary);
+					fill: var(--color-content-action-primary);
+				}
+			}
+
+			&:hover:not(:disabled) {
+				background-color: var(--color-alpha-light-lightest);
+			}
+
+			&:active:not(:disabled) {
+				background-color: var(--color-alpha-light-light);
+			}
 		}
 
-		:host([status="empty"]) .wishlist-button svg path {
-			fill: var(--color-alpha-light-strong);
+		.icon-button.ghost-contrast {
+			background-color: transparent;
+
+			&:hover:not(:disabled) {
+				background-color: var(--color-alpha-light-medium);
+			}
+
+			&:active:not(:disabled) {
+				background-color: var(--color-alpha-light-strongest);
+			}
 		}
 
-		@media (hover: hover) and (pointer: fine) {
-			:host([status="empty"]) .wishlist-button:hover svg path {
-				fill: var(--color-content-action-secondary);
+		.icon-button:disabled {
+			background-color: var(--color-container-disabled);
+			cursor: default;
+
+			svg {
+				fill: var(--color-content-disabled);
+
+				path {
+					fill: var(--color-content-disabled);
+				}
 			}
 		}
 
+		.icon-button:focus-visible {
+			${at}
+		}
+
 		.sr-only {
-			border: 0 !important;
-			clip: rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;
-			-webkit-clip-path: inset(50%) !important;
-			clip-path: inset(50%) !important;
-			height: 0.1rem !important;
-			margin: -0.1rem !important;
-			overflow: hidden !important;
-			padding: 0 !important;
-			position: absolute !important;
-			width: 0.1rem !important;
-			white-space: nowrap !important;
+			display: none;
 		}
 	`;
-Et([
+H([
   a({ type: String, reflect: !0 })
-], rt.prototype, "status", 2);
-Et([
+], S.prototype, "bgstyle", 2);
+H([
   a({ type: String, reflect: !0 })
-], rt.prototype, "ariaDescribedBy", 2);
-Et([
-  a({ type: String, reflect: !0 })
-], rt.prototype, "label", 2);
-rt = Et([
-  y("o-wishlist-button")
-], rt);
-/**
- * @license
- * Copyright 2018 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-const k = (o) => o ?? d;
-var _o = Object.defineProperty, ko = Object.getOwnPropertyDescriptor, H = (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 && _o(t, e, i), i;
-};
-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 = "";
-  }
-  updated(o) {
-    super.updated(o), this.style.setProperty("--icon-stroke-width", this.strokewidth);
-  }
-  render() {
-    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"'), n = 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}">	
-					${C(e)}
-				</span>
-			` : l`
-				<button
-					type="button"
-					aria-label=${k(i)}
-					class="icon-button ${this.size} ${this.bgstyle} ${this.status} ${t}"
-					?disabled="${this.disabled}"
-				>
-					${C(e)}
-					${n}
-				</button>
-			`}
-		`;
-  }
-};
-S.styles = f`
-		:host {
-			display: inline-flex;
-			justify-content: center;
-			align-items: center;
-            outline: none !important;
-		}
-
-		.icon-button {
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			width: 32px;
-			height: 32px;
-			border: transparent;
-			border-radius: var(--radius-full);
-			cursor: pointer;
-			position: relative;
-
-			&.icon-wishlist {
-				svg {
-					path {
-						stroke: var(--color-content-action-secondary);
-						stroke-width: var(--icon-stroke-width, 1);
-					}
-				}
-			}
-		}
-
-		.icon-button.filled svg {
-			fill: var(--color-content-action-secondary);
-		}
-
-		.icon-button.xsmall {
-			width: 20px;
-			height: 20px;
-
-			&:not(.icon-wishlist) {
-				svg {
-					width: 8px;
-					height: 8px;
-				}
-			}
-		}
-
-		.icon-button.small {
-			width: 32px;
-			height: 32px;
-
-			&:not(.icon-wishlist) {
-				svg {
-					width: 16px;
-					height: 16px;
-				}
-			}
-		}
-
-		.icon-button.medium {
-			width: 40px;
-			height: 40px;
-
-			&:not(.icon-wishlist) {
-				svg {
-					width: 16px;
-					height: 16px;
-				}
-			}
-		}
-
-		.icon-button.large {
-			width: 40px;
-			height: 40px;
-
-			&:not(.icon-wishlist) {
-				svg {
-					width: 24px;
-					height: 24px;
-				}
-			}
-		}
-
-		.icon-button.none-light, .icon-button.none-contrast {
-			background-color: transparent;
-			width: auto;
-			height: auto;
-
-			&.xsmall {
-				svg {
-					width: 8px;
-					height: 8px;
-				}
-			}
-
-			&.small {
-				svg {
-					width: 16px;
-					height: 16px;
-				}
-			}
-
-			&.medium {
-				svg {
-					width: 16px;
-					height: 16px;
-				}
-			}
-
-			&.large {
-				svg {
-					width: 24px;
-					height: 24px;
-				}
-			}
-
-			&:disabled {
-				background-color: transparent;	
-			}
-		}
-
-		.icon-button.none-light {
-			svg {
-				path {
-					stroke: var(--color-content-action-primary);
-					fill: var(--color-content-action-primary);
-				}
-			}
-		}
-
-		.icon-button.none-light.icon-wishlist svg path {
-			fill: none;
-		}
-
-		:host([status="filled"]) .icon-button.none-light.icon-wishlist svg path {
-			fill: var(--color-content-action-primary);
-		}
-
-		.icon-button.background-light {
-			background-color: var(--color-alpha-light-strong);
-
-			&:hover:not(:disabled) {
-				background-color: var(--color-alpha-light-stronger);
-			}
-
-			&:active:not(:disabled) {
-				background-color: var(--color-alpha-light-strongest);
-			}
-		}
-
-		.icon-button.background-contrast {
-			background-color: var(--color-container-action-tertiary-default);
-
-			&:hover:not(:disabled) {
-				background-color: var(--color-container-action-tertiary-hover);
-			}
-
-			&:active:not(:disabled) {
-				background-color: var(--color-container-action-tertiary-pressed);
-			}
-		}
-
-		.icon-button.ghost-light {
-			background-color: transparent;
-
-			svg {
-				path {
-					stroke: var(--color-content-action-primary);
-					fill: var(--color-content-action-primary);
-				}
-			}
-
-			&:hover:not(:disabled) {
-				background-color: var(--color-alpha-light-lightest);
-			}
-
-			&:active:not(:disabled) {
-				background-color: var(--color-alpha-light-light);
-			}
-		}
-
-		.icon-button.ghost-contrast {
-			background-color: transparent;
-
-			&:hover:not(:disabled) {
-				background-color: var(--color-alpha-light-medium);
-			}
-
-			&:active:not(:disabled) {
-				background-color: var(--color-alpha-light-strongest);
-			}
-		}
-
-		.icon-button:disabled {
-			background-color: var(--color-container-disabled);
-			cursor: default;
-
-			svg {
-				fill: var(--color-content-disabled);
-
-				path {
-					fill: var(--color-content-disabled);
-				}
-			}
-		}
-
-		.icon-button:focus-visible {
-			${at}
-		}
-
-		.sr-only {
-			display: none;
-		}
-	`;
-H([
-  a({ type: String, reflect: !0 })
-], S.prototype, "bgstyle", 2);
-H([
-  a({ type: String, reflect: !0 })
-], S.prototype, "size", 2);
-H([
+], S.prototype, "size", 2);
+H([
   a({ type: String, reflect: !0 })
 ], S.prototype, "status", 2);
 H([
@@ -1588,940 +1324,1205 @@ H([
 S = H([
   y("o-icon-button")
 ], S);
-var So = Object.defineProperty, Eo = Object.getOwnPropertyDescriptor, ot = (o, t, e, n) => {
-  for (var i = n > 1 ? void 0 : n ? Eo(t, e) : t, r = o.length - 1, s; r >= 0; r--)
+var Lo = Object.defineProperty, Po = Object.getOwnPropertyDescriptor, g = (o, t, e, n) => {
+  for (var i = n > 1 ? void 0 : n ? Po(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 && So(t, e, i), i;
+  return n && i && Lo(t, e, i), i;
 };
-let F = class extends u {
+let p = class extends u {
   constructor() {
-    super(...arguments), this.href = "", this.target = "", this.template = "standard", this.inverse = !1, this.endIcon = !1, this.reverseEndIcon = !1;
-  }
-  _handleClick(o) {
-    (!this.href || this.href === "#") && o.preventDefault();
-  }
-  render() {
-    const o = this.href || "#";
-    return l`
-            <a 
-                href="${o}" 
-                target="${k(this.target || void 0)}"
-                @click="${this._handleClick}"
-            >
-                ${this.endIcon && this.reverseEndIcon ? l`
-                            <o-icon-button
-                                icon="chevronLeft"
-                                bgstyle="${this.inverse ? "none-light" : "none-contrast"}"
-                                size="xsmall"
-                                aria-hidden="true"
-                                type="span"
-                            ></o-icon-button>
-                    ` : null}
-                <span class="link-text"><slot></slot></span>
-                ${this.endIcon && !this.reverseEndIcon ? l`
-                            <o-icon-button
-                                icon="chevronRight"
-                                bgstyle="${this.inverse ? "none-light" : "none-contrast"}"
-                                size="xsmall"
-                                aria-hidden="true"
-                                type="span"
-                            ></o-icon-button>
-                    ` : null}
-            </a>
-        `;
+    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._onOpenDetail = async (o) => {
+      var e, n;
+      const t = ((e = o.detail) == null ? void 0 : e.origin) ?? document.activeElement;
+      if (this._detailOriginEl = t, this._detailOriginClass = (t == null ? void 0 : t.className) ?? "", this.showDetail = !0, this.showHeaderStartIcon = !0, await this.updateComplete, this._detailOriginClass) {
+        const i = (n = this.shadowRoot) == null ? void 0 : n.querySelector(".detail-view");
+        i && i.setAttribute("fromelement", this._detailOriginClass);
+      }
+      this._setPriceTabindex(), await this.focusDetailReturnBtn();
+    }, this._detailOriginEl = null, this._detailOriginClass = "", this.handleKeyDown = (o) => {
+      this.open && (o.key === "Escape" ? this.closePanel() : o.key === "Tab" && this.trapFocus(o));
+    }, this.handleClosePanel = (o) => {
+      if (o instanceof KeyboardEvent && o.key !== "Enter" && o.key !== " ")
+        return;
+      o.preventDefault(), o.stopPropagation();
+      const t = o.currentTarget, e = (t == null ? void 0 : t.getAttribute("data-role")) === "back";
+      if (this.showDetail && e) {
+        this.isHidingDetail = !0;
+        const n = this.renderRoot.querySelector(".content"), i = async () => {
+          this.showDetail = !1, this.isHidingDetail = !1, this.showHeaderStartIcon = !1, await this.updateComplete, this._restoreFocusToOrigin();
+        };
+        if (n) {
+          this.showHeaderStartIcon = !1;
+          const r = () => {
+            this.showDetail = !1, this.isHidingDetail = !1, n.removeEventListener("animationend", r), i();
+          };
+          n.addEventListener("animationend", r);
+        } else
+          this.showDetail = !1, this.isHidingDetail = !1, this.showHeaderStartIcon = !1;
+        return;
+      }
+      this.closePanel();
+    }, this._onDetailSlotChange = (o) => {
+      const n = o.target.assignedElements({ flatten: !0 }).flatMap((i) => Array.from(i.querySelectorAll("img")))[0];
+      n == null || n.setAttribute("tabindex", "0");
+    };
   }
-};
-F.styles = f`
-        :host([template="standard"]) a {
-            color: var(--color-content-action-secondary);
-            font-size: var(--font-size-200);
-            font-weight: var(--font-weight-400);
-            line-height: var(--line-height-240);
-            letter-spacing: var(--letter-spacing-400);
-            font-family: var(--font-family-loccitane-serif);
-        }
-
-        :host([template="discret"]) a {
-            color: var(--color-content-action-secondary);
-            font-size: var(--font-size-100);
-            font-weight: var(--font-weight-400);
-            line-height: var(--line-height-160);
-            letter-spacing: var(--letter-spacing-400);
-            font-family: var(--font-family-loccitane-sans);
-        }
-
-        :host([template="review"]) a {
-            color: var(--color-content-action-secondary);
-            font-size: var(--font-size-100);
-            font-weight: var(--font-weight-500);
-            line-height: var(--line-height-160);
-            letter-spacing: var(--letter-spacing-400);
-            font-family: var(--font-family-loccitane-sans);
-            text-transform: uppercase;
-        }
-
-        :host([inverse]) a {
-            color: var(--color-container-action-tertiary-default);
-        }
-
-        :host([endIcon]) a o-icon-button {
-            margin-left: 2px;
-            transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-        }
-
-        :host([endIcon][reverseEndIcon]) a o-icon-button {
-            margin-right: 2px;
-            transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-        }
-
-        :host([endIcon]) a {
-            &:hover {
-                o-icon-button {
-                    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-                    :host(:not([reverseEndIcon])) & {
-                        transform: translateX(4px);
-                    }
-
-                    :host([reverseEndIcon]) & {
-                        transform: translateX(-4px);
-                    }
-                }
-            }
-        }
-
-        :host a {
-            position: relative;
-            text-decoration: none;
-            color: inherit;
-        }
-
-        .link-text {
-            position: relative;
-            display: inline-block;
-        }
-
-        .link-text::after {
-            content: "";
-            position: absolute;
-            left: 0;
-            bottom: 0;
-            width: 100%;
-            opacity: 1;
-            height: 1px;
-            background-color: currentColor;
-            transition: opacity 0.3s ease, height 0.3s ease;
-            pointer-events: none;
+  connectedCallback() {
+    super.connectedCallback(), !this.disablePortal && this.parentElement !== document.body && document.body.appendChild(this), this.addEventListener("keydown", this.handleKeyDown), this.updateComplete.then(() => {
+      this.initialized = !0;
+    }), this.addEventListener("open-detail", this._onOpenDetail);
+  }
+  disconnectedCallback() {
+    document.body.style.overflow = "", document.body.removeAttribute("data-side-panel"), this.removeEventListener("keydown", this.handleKeyDown), super.disconnectedCallback(), this.removeEventListener("open-detail", this._onOpenDetail);
+  }
+  async focusDetailReturnBtn() {
+    var n, i, r, s;
+    await this.updateComplete;
+    const o = this.getDeepActiveElement(document);
+    if (o && o !== document.body)
+      try {
+        o.blur();
+      } catch {
+      }
+    await new Promise(requestAnimationFrame);
+    const t = (n = this.shadowRoot) == null ? void 0 : n.querySelector(".detail-view .return-btn");
+    if (!t) return;
+    t.updateComplete && await t.updateComplete, (s = (r = ((i = t.shadowRoot) == null ? void 0 : i.querySelector("button")) ?? t) == null ? void 0 : r.focus) == null || s.call(r, { preventScroll: !0 });
+  }
+  _setPriceTabindex() {
+    var n;
+    const o = (n = this.shadowRoot) == null ? void 0 : n.querySelector('slot[name="detail"]');
+    if (!o) return;
+    const e = o.assignedElements({ flatten: !0 }).flatMap(
+      (i) => Array.from(i.querySelectorAll(".m-product-price-standard"))
+    );
+    for (const i of e)
+      i.hasAttribute("tabindex") || i.setAttribute("tabindex", "0");
+  }
+  _restoreFocusToOrigin() {
+    var t, e;
+    const o = this._detailOriginEl;
+    !o || !document.contains(o) || ((e = (t = document.activeElement) == null ? void 0 : t.blur) == null || e.call(t), requestAnimationFrame(() => {
+      var i;
+      o.classList.add("a--tabfocus"), (((i = o.shadowRoot) == null ? void 0 : i.querySelector('button, .button, [tabindex]:not([tabindex="-1"])')) ?? null ?? o).focus({ preventScroll: !0 });
+    }));
+  }
+  getDeepActiveElement(o = this.shadowRoot) {
+    let t = o.activeElement;
+    for (; t && t.shadowRoot && t.shadowRoot.activeElement; )
+      t = t.shadowRoot.activeElement;
+    return t;
+  }
+  trapFocus(o) {
+    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 n = this.renderRoot.querySelector(
+        ".o-whats-inside--content p"
+      );
+      n == null || n.focus();
+    }
+  }
+  getFocusableElements() {
+    const o = this.renderRoot.querySelector(".panel");
+    if (!o) return [];
+    function t(i) {
+      return !(i.disabled || i.hasAttribute("disabled") || i.hasAttribute("tabindex") && i.getAttribute("tabindex") === "-1");
+    }
+    function e(i) {
+      var s;
+      const r = [i.matches(p.focusablesSelector) ? i : []];
+      if (!["o-icon-button", "o-button"].includes(i.tagName.toLowerCase())) {
+        const h = Array.from(
+          i instanceof HTMLSlotElement ? i.assignedElements({ flatten: !0 }) : []
+        ).filter(t).flatMap(e), c = Array.from(
+          ((s = i.shadowRoot) == null ? void 0 : s.querySelectorAll("*")) || []
+        ).filter(t).flatMap(e);
+        r.push(...h, ...c);
+      }
+      return r.flat();
+    }
+    return Array.from(o.querySelectorAll("*")).filter(t).flatMap(e);
+  }
+  openPanel() {
+    this.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, n, i;
+      if (this.showHeader) {
+        const r = ((t = this.shadowRoot) == null ? void 0 : t.querySelector(".panel .close-btn")) || null, s = ((e = r == null ? void 0 : r.shadowRoot) == null ? void 0 : e.querySelector("button")) || null;
+        s && ((n = s.focus) == null || n.call(s));
+      } else {
+        const r = this.getFocusableElements()[0];
+        (i = r == null ? void 0 : r.focus) == null || i.call(r);
+      }
+    }), this.dispatchEvent(
+      new CustomEvent("open", { bubbles: !0, composed: !0 })
+    );
+  }
+  closePanel() {
+    var t, e, n, i, r;
+    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 = (n = (e = this.previousFocusedElement.shadowRoot) == null ? void 0 : e.querySelector(".button")) == null ? void 0 : n.focus) == null || i.call(n) : (r = this.previousFocusedElement) == null || r.focus();
+    const o = this.renderRoot.querySelector(".panel");
+    o && o.removeAttribute("aria-modal"), this.dispatchEvent(
+      new CustomEvent("close", { bubbles: !0, composed: !0 })
+    );
+  }
+  handleFirstClick(o) {
+    o instanceof KeyboardEvent && o.key !== "Enter" && o.key !== " " || (o.preventDefault(), o.stopPropagation(), this.onFirstButtonClickClose && this.closePanel(), this.dispatchEvent(
+      new CustomEvent("firstbuttonclick", {
+        bubbles: !0,
+        composed: !0,
+        cancelable: !0,
+        detail: {
+          button: "first",
+          target: o.target
         }
-
-        :host a:hover .link-text::after {
-            opacity: 0;
-            height: 1px;
+      })
+    ));
+  }
+  handleSecondClick(o) {
+    o instanceof KeyboardEvent && o.key !== "Enter" && o.key !== " " || (o.preventDefault(), o.stopPropagation(), this.onSecondButtonClickClose && this.closePanel(), this.dispatchEvent(
+      new CustomEvent("secondbuttonclick", {
+        bubbles: !0,
+        composed: !0,
+        cancelable: !0,
+        detail: {
+          button: "second",
+          target: o.target
         }
-        /* End of underline effect */
-    `;
-ot([
-  a({ type: String })
-], F.prototype, "href", 2);
-ot([
-  a({ type: String })
-], F.prototype, "target", 2);
-ot([
-  a({ type: String, reflect: !0 })
-], F.prototype, "template", 2);
-ot([
-  a({ type: Boolean, reflect: !0 })
-], F.prototype, "inverse", 2);
-ot([
-  a({ type: Boolean, reflect: !0 })
-], F.prototype, "endIcon", 2);
-ot([
-  a({ type: Boolean, reflect: !0 })
-], F.prototype, "reverseEndIcon", 2);
-F = ot([
-  y("o-link")
-], F);
-var Ao = Object.defineProperty, Lo = Object.getOwnPropertyDescriptor, At = (o, t, e, n) => {
-  for (var i = n > 1 ? void 0 : n ? Lo(t, e) : t, r = o.length - 1, s; r >= 0; r--)
-    (s = o[r]) && (i = (n ? s(t, e, i) : s(i)) || i);
-  return n && i && Ao(t, e, i), i;
-};
-let st = class extends u {
-  constructor() {
-    super(...arguments), this.rating = 0;
+      })
+    ));
   }
-  getStarKeys() {
-    const o = [];
-    for (let t = 0; t < 5; t++) {
-      const e = this.rating - t;
-      let n;
-      e >= 1 ? n = 100 : e <= 0 ? n = 0 : n = Math.round(e * 100 / 25) * 25, o.push(`star-${n}`);
-    }
-    return o;
+  updated() {
+    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.getStarKeys();
-    return l`
-			<div class="rating">
-			<div class="stars">
-				${o.map(
-      (t) => l`<span class="star">${C(N[t] ?? "")}</span>`
-    )}
+    const o = this.showHeader ? l`
+			<div tabindex="-1" class="header">
+				${this.showHeaderStartIcon ? l`
+				<o-icon-button
+					icon="arrowLeft"
+					size="small"
+					class="return-btn"
+					bgstyle="background-light"
+					data-role="back"
+					@click=${this.handleClosePanel}
+					@keydown=${this.handleClosePanel}
+					aria-label="${this.closeButtonLabel}"
+					srlabel="${this.closeButtonLabel}"
+        			showsrlabel="true"
+				></o-icon-button>
+				` : null}
+				<p role="heading" aria-level="1" id="panel-title" class="${this.headerTitleClassName}">
+				${this.headerTitle}
+				</p>
+				<o-icon-button
+				icon="cross"
+				size="small"
+				class="close-btn"
+				bgstyle="background-light"
+				@click=${this.handleClosePanel}
+				@keydown=${this.handleClosePanel}
+				aria-label="${this.closeButtonLabel}"
+				aria-describedby="panel-title"
+				srlabel="${this.closeButtonLabel}"
+        		showsrlabel="true"
+				></o-icon-button>
 			</div>
-			${this.reviewCount != null && this.href != null ? l`<o-link template="review" href="${this.href}">${this.reviewCount}</o-link>` : null}
+			` : null;
+    return l`
+			<div class="overlay" style="z-index: ${this.zIndex}" @click=${this.handleClosePanel}></div>
+			<div
+				class="panel"
+				role="dialog"
+				aria-modal="true"
+				aria-labelledby="panel-title"
+				style="z-index: ${this.zIndex + 1}"
+				tabindex="-1"
+			>
+				<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" @slotchange=${this._onDetailSlotChange}></slot>
+								</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>
+							` : null}
+								</div>
+						` : null}
+				</div>
 			</div>
 		`;
   }
 };
-st.styles = f`
-		svg {
-			width: 12px;
-			height: 12px;
+p.styles = f`
+		:host {
+			--z-overlay: 99;
+			--z-panel: 100;
+			position: fixed;
+			top: 0;
+			right: 0;
+			height: 100%;
+			width: 100%;
+			pointer-events: none;
+			z-index: var(--z-overlay);
+			--side-panel-width: 100%;
+			--side-panel-max-width: 416px;
+			--font-size: var(--font-size-300);
+			--line-height: var(--line-height-240);
 		}
-		.rating {
+
+		/* Hide content until it is initialized */
+		:host(:not([initialized])) .content {
+			display: none;
+		}
+
+		/* hide the host completely until its initialized */
+		:host(:not([initialized])) {
+			display: none !important;
+		}
+
+		.overlay {
+			position: absolute;
+			inset: 0;
+			backdrop-filter: blur(4px);
+			background-color: rgba(0, 0, 0, 0.3);
+			opacity: 0;
+			transition: opacity 0.3s ease;
+			pointer-events: none;
+			z-index: var(--z-overlay);
+		}
+
+		:host([open]) .overlay {
+			opacity: 1;
+			pointer-events: auto;
+		}
+
+		.panel {
+			position: absolute;
+			top: 0;
+			right: 0;
+			width: var(--side-panel-width);
+			max-width: var(--side-panel-max-width);
+			height: 100%;
+			background: white;
+			box-shadow: var(--colors-alpha-dark-60);
+			transform: translateX(100%);
+			transition: transform 0.3s ease;
 			display: flex;
-			align-items: center;
+			flex-direction: column;
+			pointer-events: auto;
+			z-index: var(--z-panel);
 		}
 
-		.stars {
+		:host([open]) .panel {
+			transform: translateX(0%);
+		}
+
+		.header {
+			flex: 0 0 auto;
 			display: flex;
-			gap: 2px;
+			justify-content: space-between;
+			padding: 20px 16px;
+			border-bottom: var(--border-050) solid var(--color-border-tertiary);
+
+			.panel-title {
+				font-family: var(--font-family-loccitane-serif);
+				font-size: var(--font-size);
+				font-weight: var(--font-weight-400);
+				line-height: var(--line-height);
+				font-style: italic;
+				display: -webkit-box;
+				-webkit-line-clamp: 2;
+				-webkit-box-orient: vertical;
+				height: auto;
+				margin-top: auto;
+				margin-bottom: auto;
+				overflow: hidden;
+				width: 100%;
+				color: var(--color-content-heading);
+			}
+
+			.close-btn {
+				margin-left: 8px;
+				margin-top: 0;
+				flex-direction: column;
+				justify-content: start;
+			}
+
+			.return-btn {
+				margin-right: 8px;
+			}
 		}
 
-		.star {
-			display: block;
+		.panel:focus-visible,
+		.close-btn:focus-visible {
+			${at}
 		}
 
-		o-link {
-			margin-left: 6px;
-			font-family: var(--font-family-loccitane-sans);
-			font-weight: var(--font-weight-500);
-			font-size: var(--font-size-100);
-			line-height: var(--line-height-160);
-			letter-spacing: var(--letter-spacing-400);
-			color: var(--color-content-action-secondary);
+		.content {
+			flex: 1 1 auto;
+			overflow-y: auto;
+			overflow-x: hidden;
+			padding: var(--spacing-xl);
+
+			&.with-detail {
+				width: 100%;
+				height: 100%;
+				position: absolute;
+				top: 0;
+				left: 0;
+				background: var(--color-container-bg-white);
+				z-index: 3;
+				padding: var(--spacing-4-xs);
+			}
 		}
 
-		.review-link {
-			text-decoration: underline;
-			cursor: pointer;
+		.footer {
+			flex: 0 0 auto;
+			padding: var(--spacing-xl);
+			border-top: var(--border-050) solid var(--color-border-tertiary);
+			display: flex;
+    		flex-direction: column;
+			gap: var(--spacing-l);
+			justify-content: flex-start;
 		}
-	`;
-At([
-  a({ type: Number })
-], st.prototype, "rating", 2);
-At([
-  a({ type: String })
-], st.prototype, "reviewCount", 2);
-At([
-  a({ type: String })
-], st.prototype, "href", 2);
-st = At([
-  y("o-rating")
-], st);
-/**
- * @license
- * Copyright 2020 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-const Po = (o) => o.strings === void 0;
-/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-const dt = (o, t) => {
-  var n;
-  const e = o._$AN;
-  if (e === void 0) return !1;
-  for (const i of e) (n = i._$AO) == null || n.call(i, t, !1), dt(i, t);
-  return !0;
-}, kt = (o) => {
-  let t, e;
-  do {
-    if ((t = o._$AM) === void 0) break;
-    e = t._$AN, e.delete(o), o = t;
-  } while ((e == null ? void 0 : e.size) === 0);
-}, be = (o) => {
-  for (let t; t = o._$AM; o = t) {
-    let e = t._$AN;
-    if (e === void 0) t._$AN = e = /* @__PURE__ */ new Set();
-    else if (e.has(o)) break;
-    e.add(o), zo(t);
-  }
-};
-function Io(o) {
-  this._$AN !== void 0 ? (kt(this), this._$AM = o, be(this)) : this._$AM = o;
-}
-function Oo(o, t = !1, e = 0) {
-  const n = this._$AH, i = this._$AN;
-  if (i !== void 0 && i.size !== 0) if (t) if (Array.isArray(n)) for (let r = e; r < n.length; r++) dt(n[r], !1), kt(n[r]);
-  else n != null && (dt(n, !1), kt(n));
-  else dt(this, o);
-}
-const zo = (o) => {
-  o.type == Ut.CHILD && (o._$AP ?? (o._$AP = Oo), o._$AQ ?? (o._$AQ = Io));
+
+		/* Mobile */
+		@media (max-width: 767px) {
+			:host {
+				--side-panel-width: 100%;
+				--side-panel-max-width: none;
+			}
+		}
+
+		/* Tablet */
+		@media (min-width: 768px) and (max-width: 1024px) {
+			:host {
+				--side-panel-width: 375px;
+				--side-panel-max-width: 375px;
+			}
+		}
+
+		@media (min-width: 1025px) {
+			:host {
+				--side-panel-width: 100%;
+				--side-panel-max-width: 416px;
+				--font-size: var(--font-size-400);
+				--line-height: var(--line-height-280);
+			}
+		}
+		
+		@keyframes slideInRight {
+			from {
+				transform: translateX(100%);
+			}
+			to {
+				transform: translateX(0%);
+			}
+		}
+		
+		@keyframes slideOutRight {
+			from {
+				transform: translateX(0%);
+			}
+			to {
+				transform: translateX(100%);
+			}
+		}
+
+		.slide-out-right {
+			animation: slideOutRight 0.3s ease-in forwards;
+		}
+		
+		.detail-view {
+			animation: slideInRight 0.3s ease-out both;
+		}
+		.detail-content {
+			padding: var(--spacing-xl);
+		}
+	`;
+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 })
+], p.prototype, "open", 2);
+g([
+  a({ type: Boolean, reflect: !0 })
+], p.prototype, "showHeader", 2);
+g([
+  a({ type: Boolean, reflect: !0 })
+], p.prototype, "showFooter", 2);
+g([
+  a({ type: Boolean, reflect: !0 })
+], p.prototype, "showHeaderStartIcon", 2);
+g([
+  a({ type: String, reflect: !0 })
+], p.prototype, "headerTitle", 2);
+g([
+  a({ type: String, reflect: !0 })
+], p.prototype, "headerTitleClassName", 2);
+g([
+  a({ type: String, reflect: !0 })
+], p.prototype, "closeButtonLabel", 2);
+g([
+  a({ type: String, reflect: !0 })
+], p.prototype, "firstButtonLabel", 2);
+g([
+  a({ type: String, reflect: !0 })
+], p.prototype, "firstButtonVariant", 2);
+g([
+  a({ type: Object, reflect: !0 })
+], p.prototype, "firstButtonProps", 2);
+g([
+  a({ type: Boolean, reflect: !0 })
+], p.prototype, "onFirstButtonClickClose", 2);
+g([
+  a({ type: String, reflect: !0 })
+], p.prototype, "secondButtonLabel", 2);
+g([
+  a({ type: String, reflect: !0 })
+], p.prototype, "secondButtonVariant", 2);
+g([
+  a({ type: Object, reflect: !0 })
+], p.prototype, "secondButtonProps", 2);
+g([
+  a({ type: Boolean, reflect: !0 })
+], p.prototype, "onSecondButtonClickClose", 2);
+g([
+  a({ type: Boolean, reflect: !0 })
+], p.prototype, "disablePortal", 2);
+g([
+  a({ type: Number, reflect: !0 })
+], p.prototype, "zIndex", 2);
+g([
+  a({ type: Boolean, reflect: !0 })
+], p.prototype, "initialized", 2);
+g([
+  a({ type: Boolean })
+], p.prototype, "showDetail", 2);
+g([
+  a({ type: Boolean })
+], p.prototype, "isHidingDetail", 2);
+p = g([
+  y("o-side-panel")
+], p);
+var Io = Object.defineProperty, Oo = Object.getOwnPropertyDescriptor, x = (o, t, e, n) => {
+  for (var i = n > 1 ? void 0 : n ? Oo(t, e) : t, r = o.length - 1, s; r >= 0; r--)
+    (s = o[r]) && (i = (n ? s(t, e, i) : s(i)) || i);
+  return n && i && Io(t, e, i), i;
 };
-class Bo extends qt {
+const zo = Ft(u);
+let b = class extends zo {
   constructor() {
-    super(...arguments), this._$AN = void 0;
-  }
-  _$AT(t, e, n) {
-    super._$AT(t, e, n), be(this), this.isConnected = t._$AU;
-  }
-  _$AO(t, e = !0) {
-    var n, i;
-    t !== this.isConnected && (this.isConnected = t, t ? (n = this.reconnected) == null || n.call(this) : (i = this.disconnected) == null || i.call(this)), e && (dt(this, t), kt(this));
-  }
-  setValue(t) {
-    if (Po(this._$Ct)) this._$Ct._$AI(t, this);
-    else {
-      const e = [...this._$Ct._$AH];
-      e[this._$Ci] = t, this._$Ct._$AI(e, this, 0);
-    }
-  }
-  disconnected() {
-  }
-  reconnected() {
+    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;
   }
-}
-class Do extends Bo {
-  constructor() {
-    super(...arguments), this.prevData = {};
+  get name() {
+    return this.getAttribute("name") ?? "";
   }
-  render(t) {
-    return d;
+  set name(o) {
+    this.setAttribute("name", o);
   }
-  update(t, [e]) {
-    var n;
-    this.element !== t.element && (this.element = t.element), this.host = ((n = t.options) === null || n === void 0 ? void 0 : n.host) || this.element, this.apply(e), this.groom(e), this.prevData = { ...e };
+  get form() {
+    return this[Nt].form;
   }
-  apply(t) {
-    if (!t)
-      return;
-    const { prevData: e, element: n } = this;
-    for (const i in t) {
-      const r = t[i];
-      r !== e[i] && (n[i] = r);
+  handleClick(o) {
+    if (!(o instanceof KeyboardEvent && !["Enter", " "].includes(o.key)) && this.panelTarget) {
+      const t = document.getElementById(this.panelTarget);
+      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.`);
     }
   }
-  groom(t) {
-    const { prevData: e, element: n } = this;
-    if (e)
-      for (const i in e)
-        (!t || !(i in t) && n[i] === e[i]) && (n[i] = void 0);
-  }
-}
-class Ho extends Do {
-  constructor() {
-    super(...arguments), this.eventData = {};
-  }
-  apply(t) {
-    if (t)
-      for (const e in t) {
-        const n = t[e];
-        n !== this.eventData[e] && this.applyEvent(e, n);
-      }
-  }
-  applyEvent(t, e) {
-    const { prevData: n, element: i } = this;
-    this.eventData[t] = e, n[t] && i.removeEventListener(t, this, e), i.addEventListener(t, this, e);
+  render() {
+    return this.href ? this.renderLink() : this.renderButton();
   }
-  groom(t) {
-    const { prevData: e, element: n } = this;
-    if (e)
-      for (const i in e)
-        (!t || !(i in t) && n[i] === e[i]) && this.groomEvent(i, e[i]);
+  renderIcon(o) {
+    const t = o === "start" ? this.startIconModel : this.endIconModel;
+    if (!t) return d;
+    const e = N[t].replace(
+      "<svg",
+      '<svg aria-hidden="true" focusable="false" part="svg"'
+    );
+    return l`<span class="${o === "start" ? "icon-start" : "icon-end"}">${C(e)}</span>`;
   }
-  groomEvent(t, e) {
-    const { element: n } = this;
-    delete this.eventData[t], n.removeEventListener(t, this, e);
+  renderButton() {
+    const o = this.text || this.textsecond;
+    return l`
+      <button type=${this.type} class="button" ?disabled=${this.disabled} @click=${this.handleClick} @keydown=${this.handleClick}>
+          ${this.startIcon ? this.renderIcon("start") : d}
+          ${o ? l`
+                ${this.text ? l`<span class="text">${this.text}</span>` : d}
+                ${this.textsecond ? l`<span class="text">${this.textsecond}</span>` : d}
+                ${this.withbadge ? l`<slot></slot>` : d}
+              ` : l`<slot></slot>`}
+          ${this.endIcon ? this.renderIcon("end") : d}
+      </button>
+    `;
   }
-  handleEvent(t) {
-    const e = this.eventData[t.type];
-    typeof e == "function" ? e.call(this.host, t) : e.handleEvent(t);
+  renderLink() {
+    const o = this.text || this.textsecond;
+    return l`
+      <a
+        href=${this.href}
+        target=${this.target || d}
+        class="button"
+        ?disabled=${this.disabled}
+        role="button"
+        @click=${this.handleClick}
+        @keydown=${this.handleClick}
+        aria-describedby=${this.getAttribute("aria-describedby") || d}
+      >
+          ${this.startIcon ? this.renderIcon("start") : d}
+          ${o ? l`
+                ${this.text ? l`<span>${this.text}</span>` : d}
+                ${this.textsecond ? l`<span>${this.textsecond}</span>` : d}
+              ` : l`<slot></slot>`}
+          ${this.endIcon ? this.renderIcon("end") : d}
+      </a>
+    `;
   }
-  disconnected() {
-    const { eventData: t, element: e } = this;
-    for (const n in t) {
-      const i = n.slice(1), r = t[n];
-      e.removeEventListener(i, this, r);
+};
+Re(b);
+b.formAssociated = !0;
+b.styles = f`
+    :host {
+      --button-border: transparent;
+      --badge-outer-width: 19px;
+      cursor: pointer;
+      display: inline-flex;
+    }
+
+    :host(.a--tabfocus) {
+      outline: none !important;
+    }
+
+    :host([fullwidth]) {
+      width: 100%;
+    }
+
+    :host([variant="primary"]) {
+      --button-bg: var(--color-container-action-primary-default);
+      --button-bg-hover: var(--color-container-action-primary-hover);
+      --button-bg-pressed: var(--color-container-action-primary-pressed);
+      --button-text: var(--color-content-action-primary);
+      --button-text-hover: var(--color-content-action-primary);
+      --button-border: transparent;
+      --button-border-width: var(--border-m);
+      --button-padding: var(--spacing-l, 12px) var(--spacing-3-xl, 24px);
+      --button-starticon-svg-width: 0px; /* No starticon SVG for primary button */
+      --button-endicon-svg-width: 0px; /* No endicon SVG for primary button */
+    }
+
+    :host([variant="secondary"]) {
+      --button-bg: var(--color-container-action-secondary-default);
+      --button-bg-hover: var(--color-container-action-secondary-hover);
+      --button-bg-pressed: var(--color-container-action-secondary-pressed);
+      --button-text: var(--color-content-action-secondary);
+      --button-text-hover: var(--color-content-action-secondary);
+      --button-border: var(--color-border-secondary);
+      --button-border-width: var(--border-m);
+      --button-padding: var(--spacing-l, 12px) var(--spacing-3-xl, 24px);
+      --button-starticon-svg-width: 16px;
+      --button-endicon-svg-width: 0px; /* No endicon SVG for secondary button */
+    }
+
+    :host([variant="ghost"]) {
+      --button-bg: transparent;
+      --button-bg-hover: var(--color-alpha-dark-lightest);
+      --button-bg-pressed: var(--color-alpha-dark-lighter);
+      --button-text: var(--color-content-action-secondary);
+      --button-text-hover: var(--color-content-action-secondary);
+      --button-border-width: 0;
+      --button-padding: var(--spacing-m, 10px) var(--spacing-xl, 16px);   
+      --button-starticon-svg-width: 16px;
+      --button-endicon-svg-width: 12px;
     }
-  }
-  reconnected() {
-    const { eventData: t, element: e } = this;
-    for (const n in t) {
-      const i = n.slice(1), r = t[n];
-      e.addEventListener(i, this, r);
+
+    :host([variant="tertiary"]) {
+      --button-bg: var(--color-container-action-tertiary-default);
+      --button-bg-hover: var(--color-container-action-tertiary-hover);
+      --button-bg-pressed: var(--color-container-action-tertiary-pressed);
+      --button-text: var(--color-content-body);
+      --button-text-hover: var(--color-content-action-tertiary);
+      --button-border-width: 0;
+      --button-padding: var(--spacing-m, 10px) var(--spacing-l, 12px); 
+      --button-starticon-svg-width: 0px; /* No starticon SVG for tertiary button */
+      --button-endicon-svg-width: 8px; 
     }
-  }
-}
-class Mo extends Ho {
-  apply(t) {
-    if (!t)
-      return;
-    const { prevData: e, element: n } = this;
-    for (const i in t) {
-      const r = t[i];
-      if (r === e[i])
-        continue;
-      const s = i.slice(1);
-      switch (i[0]) {
-        case "@":
-          this.eventData[s] = r, this.applyEvent(s, r);
-          break;
-        case ".":
-          n[s] = r;
-          break;
-        case "?":
-          r ? n.setAttribute(s, "") : n.removeAttribute(s);
-          break;
-        default:
-          r != null ? n.setAttribute(i, String(r)) : n.removeAttribute(i);
-          break;
+
+    :host([disabled]),
+    :host([aria-disabled="true"]),
+    :host([aria-disabled="true"]:hover) {
+      --button-bg: var(--color-container-disabled);
+      --button-text: var(--color-content-disabled);
+      --button-border: transparent;
+    }
+
+    :host([disabled][variant="secondary"]) {
+      --button-border: var(--color-border-secondary);
+    }
+
+    .button {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      gap: var(--spacing-s, 8px);
+      height: 100%;
+      background-color: var(--button-bg);
+      color: var(--button-text);
+      border: var(--button-border-width, var(--border-m)) solid var(--button-border);
+      border-radius: var(--radius-m);
+      font-family: var(--font-family-loccitane-sans);
+      font-size: var(--font-size-150);
+      font-weight: var(--font-weight-400);
+      line-height: var(--line-height-200);
+      min-width: 64px;
+      padding: var(--button-padding);
+      text-decoration: none;
+      cursor: inherit;
+      box-sizing: border-box;
+
+      span {
+        font-family: var(--font-family-loccitane-sans);
+        font-size: var(--font-size-150);
+        font-weight: var(--font-weight-400);
+        line-height: var(--line-height-200);
       }
     }
-  }
-  groom(t) {
-    const { prevData: e, element: n } = this;
-    if (e)
-      for (const i in e) {
-        const r = i.slice(1);
-        if (!t || !(i in t) && n[r] === e[i])
-          switch (i[0]) {
-            case "@":
-              this.groomEvent(r, e[i]);
-              break;
-            case ".":
-              n[r] = void 0;
-              break;
-            case "?":
-              n.removeAttribute(r);
-              break;
-            default:
-              n.removeAttribute(i);
-              break;
-          }
+
+    .button:hover:not([disabled]) {
+      background-color: var(--button-bg-hover);
+      color: var(--button-text-hover);
+    }
+
+    .button:active:not([disabled]) {
+      background-color: var(--button-bg-pressed);
+    }
+
+    .button:focus-visible {
+      ${at};
+    }
+
+    span.text + span.text::before {
+      content: "•";
+      margin-right: 8px;
+    }
+
+    .icon-start,
+    .icon-end {
+      display: inline-flex;
+      align-items: center;
+
+      svg {
+        max-height: 20px;
       }
-  }
-}
-const le = Vt(Mo);
-var To = Object.defineProperty, jo = Object.getOwnPropertyDescriptor, g = (o, t, e, n) => {
-  for (var i = n > 1 ? void 0 : n ? jo(t, e) : t, r = o.length - 1, s; r >= 0; r--)
-    (s = o[r]) && (i = (n ? s(t, e, i) : s(i)) || i);
-  return n && i && To(t, e, i), i;
-};
-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._onOpenDetail = async (o) => {
-      var e, n;
-      const t = ((e = o.detail) == null ? void 0 : e.origin) ?? document.activeElement;
-      if (this._detailOriginEl = t, this._detailOriginClass = (t == null ? void 0 : t.className) ?? "", this.showDetail = !0, this.showHeaderStartIcon = !0, await this.updateComplete, this._detailOriginClass) {
-        const i = (n = this.shadowRoot) == null ? void 0 : n.querySelector(".detail-view");
-        i && i.setAttribute("fromelement", this._detailOriginClass);
+      svg[x] {
+        width: 15px;
       }
-      this._setPriceTabindex(), await this.focusDetailReturnBtn();
-    }, this._detailOriginEl = null, this._detailOriginClass = "", this.handleKeyDown = (o) => {
-      this.open && (o.key === "Escape" ? this.closePanel() : o.key === "Tab" && this.trapFocus(o));
-    }, this.handleClosePanel = (o) => {
-      if (o instanceof KeyboardEvent && o.key !== "Enter" && o.key !== " ")
-        return;
-      o.preventDefault(), o.stopPropagation();
-      const t = o.currentTarget, e = (t == null ? void 0 : t.getAttribute("data-role")) === "back";
-      if (this.showDetail && e) {
-        this.isHidingDetail = !0;
-        const n = this.renderRoot.querySelector(".content"), i = async () => {
-          this.showDetail = !1, this.isHidingDetail = !1, this.showHeaderStartIcon = !1, await this.updateComplete, this._restoreFocusToOrigin();
-        };
-        if (n) {
-          this.showHeaderStartIcon = !1;
-          const r = () => {
-            this.showDetail = !1, this.isHidingDetail = !1, n.removeEventListener("animationend", r), i();
-          };
-          n.addEventListener("animationend", r);
-        } else
-          this.showDetail = !1, this.isHidingDetail = !1, this.showHeaderStartIcon = !1;
-        return;
+      path[fill],
+      path[class] {
+        fill: var(--button-text) !important;
       }
-      this.closePanel();
-    }, this._onDetailSlotChange = (o) => {
-      const n = o.target.assignedElements({ flatten: !0 }).flatMap((i) => Array.from(i.querySelectorAll("img")))[0];
-      n == null || n.setAttribute("tabindex", "0");
-    };
-  }
-  connectedCallback() {
-    super.connectedCallback(), !this.disablePortal && this.parentElement !== document.body && document.body.appendChild(this), this.addEventListener("keydown", this.handleKeyDown), this.updateComplete.then(() => {
-      this.initialized = !0;
-    }), this.addEventListener("open-detail", this._onOpenDetail);
-  }
-  disconnectedCallback() {
-    document.body.style.overflow = "", document.body.removeAttribute("data-side-panel"), this.removeEventListener("keydown", this.handleKeyDown), super.disconnectedCallback(), this.removeEventListener("open-detail", this._onOpenDetail);
-  }
-  async focusDetailReturnBtn() {
-    var n, i, r, s;
-    await this.updateComplete;
-    const o = this.getDeepActiveElement(document);
-    if (o && o !== document.body)
-      try {
-        o.blur();
-      } catch {
+      path[stroke] {
+        stroke: var(--button-text) !important;
+      }
+    }
+
+    :host([variant="tertiary"][fullwidth][endIcon]) .button {
+      justify-content: space-between;
+    }
+
+    .button span {
+      display: inline-flex;
+      align-items: center;
+    }
+
+    .button slot {
+      display: inline-flex;
+      align-items: center;
+    }
+      
+    :host([variant="tertiary"][endIcon]) .button .icon-end {
+      width: var(--button-endicon-svg-width, 8px);
+    }
+
+    :host([underlined]) span:not([class*="icon-"]),
+    :host([underlined]) .text,
+    :host([underlined]:not([text])) .button slot {
+      position: relative;
+
+      &::after {
+        content: "";
+        display: block;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        border-bottom: var(--border-M, 1px) solid var(--button-text);
       }
-    await new Promise(requestAnimationFrame);
-    const t = (n = this.shadowRoot) == null ? void 0 : n.querySelector(".detail-view .return-btn");
-    if (!t) return;
-    t.updateComplete && await t.updateComplete, (s = (r = ((i = t.shadowRoot) == null ? void 0 : i.querySelector("button")) ?? t) == null ? void 0 : r.focus) == null || s.call(r, { preventScroll: !0 });
-  }
-  _setPriceTabindex() {
-    var n;
-    const o = (n = this.shadowRoot) == null ? void 0 : n.querySelector('slot[name="detail"]');
-    if (!o) return;
-    const e = o.assignedElements({ flatten: !0 }).flatMap(
-      (i) => Array.from(i.querySelectorAll(".m-product-price-standard"))
-    );
-    for (const i of e)
-      i.hasAttribute("tabindex") || i.setAttribute("tabindex", "0");
-  }
-  _restoreFocusToOrigin() {
-    var t, e;
-    const o = this._detailOriginEl;
-    !o || !document.contains(o) || ((e = (t = document.activeElement) == null ? void 0 : t.blur) == null || e.call(t), requestAnimationFrame(() => {
-      var i;
-      o.classList.add("a--tabfocus"), (((i = o.shadowRoot) == null ? void 0 : i.querySelector('button, .button, [tabindex]:not([tabindex="-1"])')) ?? null ?? o).focus({ preventScroll: !0 });
-    }));
-  }
-  getDeepActiveElement(o = this.shadowRoot) {
-    let t = o.activeElement;
-    for (; t && t.shadowRoot && t.shadowRoot.activeElement; )
-      t = t.shadowRoot.activeElement;
-    return t;
-  }
-  trapFocus(o) {
-    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 n = this.renderRoot.querySelector(
-        ".o-whats-inside--content p"
-      );
-      n == null || n.focus();
     }
-  }
-  getFocusableElements() {
-    const o = this.renderRoot.querySelector(".panel");
-    if (!o) return [];
-    function t(i) {
-      return !(i.disabled || i.hasAttribute("disabled") || i.hasAttribute("tabindex") && i.getAttribute("tabindex") === "-1");
+
+    :host([underlined]:not([text])) .button slot {
+      display: inline-flex;
+      gap: 8px;
     }
-    function e(i) {
-      var s;
-      const r = [i.matches(p.focusablesSelector) ? i : []];
-      if (!["o-icon-button", "o-button"].includes(i.tagName.toLowerCase())) {
-        const h = Array.from(
-          i instanceof HTMLSlotElement ? i.assignedElements({ flatten: !0 }) : []
-        ).filter(t).flatMap(e), c = Array.from(
-          ((s = i.shadowRoot) == null ? void 0 : s.querySelectorAll("*")) || []
-        ).filter(t).flatMap(e);
-        r.push(...h, ...c);
+
+    :host([underlined][withbadge]:not([text])) .button slot {
+      &::after {
+        width: calc(100% - var(--badge-outer-width, 19px) - var(--spacing-s, 8px))
       }
-      return r.flat();
     }
-    return Array.from(o.querySelectorAll("*")).filter(t).flatMap(e);
-  }
-  openPanel() {
-    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, n, i;
-      if (this.showHeader) {
-        const r = ((t = this.shadowRoot) == null ? void 0 : t.querySelector(".panel .close-btn")) || null, s = ((e = r == null ? void 0 : r.shadowRoot) == null ? void 0 : e.querySelector("button")) || null;
-        s && ((n = s.focus) == null || n.call(s));
-      } else {
-        const r = this.getFocusableElements()[0];
-        (i = r == null ? void 0 : r.focus) == null || i.call(r);
-      }
-    }), this.dispatchEvent(
-      new CustomEvent("open", { bubbles: !0, composed: !0 })
-    );
-  }
-  closePanel() {
-    var t, e, n, i, r;
-    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 = (n = (e = this.previousFocusedElement.shadowRoot) == null ? void 0 : e.querySelector(".button")) == null ? void 0 : n.focus) == null || i.call(n) : (r = this.previousFocusedElement) == null || r.focus();
-    const o = this.renderRoot.querySelector(".panel");
-    o && o.removeAttribute("aria-modal"), this.dispatchEvent(
-      new CustomEvent("close", { bubbles: !0, composed: !0 })
-    );
-  }
-  handleFirstClick(o) {
-    o instanceof KeyboardEvent && o.key !== "Enter" && o.key !== " " || (o.preventDefault(), o.stopPropagation(), this.onFirstButtonClickClose && this.closePanel(), this.dispatchEvent(
-      new CustomEvent("firstbuttonclick", {
+
+    //Icon movement on hover
+    :host([variant="tertiary"][endIcon]) .icon-end {
+      display: inline-flex;
+      align-items: center;
+    }
+
+    :host([variant="tertiary"][endIcon]:hover) .icon-end {
+      transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+      transform: translateX(4px);
+    }
+    //End icon movment on hover
+  `;
+x([
+  a()
+], b.prototype, "type", 2);
+x([
+  a()
+], b.prototype, "value", 2);
+x([
+  a({ type: String, reflect: !0 })
+], b.prototype, "variant", 2);
+x([
+  a({ type: String })
+], b.prototype, "text", 2);
+x([
+  a({ type: String })
+], b.prototype, "textsecond", 2);
+x([
+  a({ type: Boolean, reflect: !0 })
+], b.prototype, "fullwidth", 2);
+x([
+  a({ type: Boolean, reflect: !0 })
+], b.prototype, "disabled", 2);
+x([
+  a({ type: String })
+], b.prototype, "startIconModel", 2);
+x([
+  a({ type: String })
+], b.prototype, "endIconModel", 2);
+x([
+  a({ type: Boolean, reflect: !0, attribute: "starticon" })
+], b.prototype, "startIcon", 2);
+x([
+  a({ type: Boolean, reflect: !0, attribute: "endicon" })
+], b.prototype, "endIcon", 2);
+x([
+  a({ type: String, attribute: "paneltarget" })
+], b.prototype, "panelTarget", 2);
+x([
+  a({ type: String })
+], b.prototype, "href", 2);
+x([
+  a({ type: String })
+], b.prototype, "target", 2);
+x([
+  a({ type: Boolean, reflect: !0 })
+], b.prototype, "underlined", 2);
+x([
+  a({ type: Boolean, reflect: !0 })
+], b.prototype, "withbadge", 2);
+b = x([
+  y("o-button")
+], b);
+var Bo = Object.defineProperty, Do = Object.getOwnPropertyDescriptor, At = (o, t, e, n) => {
+  for (var i = n > 1 ? void 0 : n ? Do(t, e) : t, r = o.length - 1, s; r >= 0; r--)
+    (s = o[r]) && (i = (n ? s(t, e, i) : s(i)) || i);
+  return n && i && Bo(t, e, i), i;
+};
+let rt = 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", {
+        detail: { status: this.status },
         bubbles: !0,
-        composed: !0,
-        cancelable: !0,
-        detail: {
-          button: "first",
-          target: o.target
-        }
-      })
-    ));
+        composed: !0
+      }));
+    };
   }
-  handleSecondClick(o) {
-    o instanceof KeyboardEvent && o.key !== "Enter" && o.key !== " " || (o.preventDefault(), o.stopPropagation(), this.onSecondButtonClickClose && this.closePanel(), this.dispatchEvent(
-      new CustomEvent("secondbuttonclick", {
-        bubbles: !0,
-        composed: !0,
-        cancelable: !0,
-        detail: {
-          button: "second",
-          target: o.target
-        }
-      })
-    ));
+  connectedCallback() {
+    super.connectedCallback(), this.setAttribute("role", "button"), this.setAttribute("aria-pressed", String(this.status === "filled"));
   }
-  updated() {
-    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);
+  firstUpdated() {
+    this.addEventListener("click", this.toggleStatus), this.addEventListener("keydown", this.handleKeydown);
+  }
+  handleKeydown(o) {
+    (o.key === "Enter" || o.key === " ") && (o.preventDefault(), this.toggleStatus());
   }
   render() {
-    const o = this.showHeader ? l`
-			<div tabindex="-1" class="header">
-				${this.showHeaderStartIcon ? l`
-				<o-icon-button
-					icon="arrowLeft"
-					size="small"
-					class="return-btn"
-					bgstyle="background-light"
-					data-role="back"
-					@click=${this.handleClosePanel}
-					@keydown=${this.handleClosePanel}
-					aria-label="${this.closeButtonLabel}"
-					srlabel="${this.closeButtonLabel}"
-        			showsrlabel="true"
-				></o-icon-button>
-				` : null}
-				<p role="heading" aria-level="1" id="panel-title" class="${this.headerTitleClassName}">
-				${this.headerTitle}
-				</p>
-				<o-icon-button
-				icon="cross"
-				size="small"
-				class="close-btn"
-				bgstyle="background-light"
-				@click=${this.handleClosePanel}
-				@keydown=${this.handleClosePanel}
-				aria-label="${this.closeButtonLabel}"
-				aria-describedby="panel-title"
-				srlabel="${this.closeButtonLabel}"
-        		showsrlabel="true"
-				></o-icon-button>
-			</div>
-			` : null;
+    const o = N.wishlist.replace(
+      "<svg",
+      '<svg aria-hidden="true" focusable="false" part="svg"'
+    );
     return l`
-			<div class="overlay" style="z-index: ${this.zIndex}" @click=${this.handleClosePanel}></div>
-			<div
-				class="panel"
-				role="dialog"
-				aria-modal="true"
-				aria-labelledby="panel-title"
-				style="z-index: ${this.zIndex + 1}"
-				tabindex="-1"
-			>
-				<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" @slotchange=${this._onDetailSlotChange}></slot>
-								</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>
-							` : null}
-								</div>
-						` : null}
-				</div>
-			</div>
+			<button type="button" aria-describedby="${this.ariaDescribedBy}" class="wishlist-button">
+				<span class="sr-only">${this.label}</span>
+				${C(o)}
+			</button>
 		`;
   }
+  setStatus(o) {
+    this.status = o, this.setAttribute("aria-pressed", String(this.status === "filled")), this.requestUpdate();
+  }
+  setAriaDescribedBy(o) {
+    this.ariaDescribedBy = o, this.requestUpdate();
+  }
+  setLabel(o) {
+    this.label = o, this.requestUpdate();
+  }
 };
-p.styles = f`
+rt.styles = f`
 		:host {
-			--z-overlay: 99;
-			--z-panel: 100;
-			position: fixed;
-			top: 0;
-			right: 0;
-			height: 100%;
-			width: 100%;
-			pointer-events: none;
-			z-index: var(--z-overlay);
-			--side-panel-width: 100%;
-			--side-panel-max-width: 416px;
-			--font-size: var(--font-size-300);
-			--line-height: var(--line-height-240);
+			display: inline-flex;
+			justify-content: center;
+			align-items: center;
+			outline: none !important;
 		}
 
-		/* Hide content until it is initialized */
-		:host(:not([initialized])) .content {
-			display: none;
+		.wishlist-button {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			width: 40px;
+			height: 40px;
+			border: transparent;
+			border-radius: var(--radius-full);
+			background-color: var(--color-alpha-light-strong);
+			position: relative;
+			cursor: pointer;
 		}
 
-		/* hide the host completely until its initialized */
-		:host(:not([initialized])) {
-			display: none !important;
+		.wishlist-button:hover {
+			background-color: var(--color-alpha-light-stronger);
 		}
 
-		.overlay {
-			position: absolute;
-			inset: 0;
-			backdrop-filter: blur(4px);
-			background-color: rgba(0, 0, 0, 0.3);
-			opacity: 0;
-			transition: opacity 0.3s ease;
-			pointer-events: none;
-			z-index: var(--z-overlay);
+		.wishlist-button:active {
+			background-color: var(--color-alpha-light-strongest);
 		}
 
-		:host([open]) .overlay {
-			opacity: 1;
-			pointer-events: auto;
+		.wishlist-button:focus-visible {
+			${at};
 		}
 
-		.panel {
-			position: absolute;
-			top: 0;
-			right: 0;
-			width: var(--side-panel-width);
-			max-width: var(--side-panel-max-width);
-			height: 100%;
-			background: white;
-			box-shadow: var(--colors-alpha-dark-60);
-			transform: translateX(100%);
-			transition: transform 0.3s ease;
-			display: flex;
-			flex-direction: column;
-			pointer-events: auto;
-			z-index: var(--z-panel);
+		.wishlist-button:hover svg path {
+			fill: var(--color-content-action-secondary);
 		}
 
-		:host([open]) .panel {
-			transform: translateX(0%);
+		:host([status="filled"]) .wishlist-button svg path {
+			fill: var(--color-content-action-secondary);
 		}
 
-		.header {
-			flex: 0 0 auto;
-			display: flex;
-			justify-content: space-between;
-			padding: 20px 16px;
-			border-bottom: var(--border-050) solid var(--color-border-tertiary);
-
-			.panel-title {
-				font-family: var(--font-family-loccitane-serif);
-				font-size: var(--font-size);
-				font-weight: var(--font-weight-400);
-				line-height: var(--line-height);
-				font-style: italic;
-				display: -webkit-box;
-				-webkit-line-clamp: 2;
-				-webkit-box-orient: vertical;
-				height: auto;
-				margin-top: auto;
-				margin-bottom: auto;
-				overflow: hidden;
-				width: 100%;
-				color: var(--color-content-heading);
-			}
-
-			.close-btn {
-				margin-left: 8px;
-				margin-top: 0;
-				flex-direction: column;
-				justify-content: start;
-			}
+		:host([status="empty"]) .wishlist-button svg path {
+			fill: var(--color-alpha-light-strong);
+		}
 
-			.return-btn {
-				margin-right: 8px;
+		@media (hover: hover) and (pointer: fine) {
+			:host([status="empty"]) .wishlist-button:hover svg path {
+				fill: var(--color-content-action-secondary);
 			}
 		}
 
-		.panel:focus-visible,
-		.close-btn:focus-visible {
-			${at}
+		.sr-only {
+			border: 0 !important;
+			clip: rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;
+			-webkit-clip-path: inset(50%) !important;
+			clip-path: inset(50%) !important;
+			height: 0.1rem !important;
+			margin: -0.1rem !important;
+			overflow: hidden !important;
+			padding: 0 !important;
+			position: absolute !important;
+			width: 0.1rem !important;
+			white-space: nowrap !important;
 		}
+	`;
+At([
+  a({ type: String, reflect: !0 })
+], rt.prototype, "status", 2);
+At([
+  a({ type: String, reflect: !0 })
+], rt.prototype, "ariaDescribedBy", 2);
+At([
+  a({ type: String, reflect: !0 })
+], rt.prototype, "label", 2);
+rt = At([
+  y("o-wishlist-button")
+], rt);
+var Ho = Object.defineProperty, Mo = Object.getOwnPropertyDescriptor, ot = (o, t, e, n) => {
+  for (var i = n > 1 ? void 0 : n ? Mo(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 && Ho(t, e, i), i;
+};
+let F = class extends u {
+  constructor() {
+    super(...arguments), this.href = "", this.target = "", this.template = "standard", this.inverse = !1, this.endIcon = !1, this.reverseEndIcon = !1;
+  }
+  _handleClick(o) {
+    (!this.href || this.href === "#") && o.preventDefault();
+  }
+  render() {
+    const o = this.href || "#";
+    return l`
+            <a 
+                href="${o}" 
+                target="${k(this.target || void 0)}"
+                @click="${this._handleClick}"
+            >
+                ${this.endIcon && this.reverseEndIcon ? l`
+                            <o-icon-button
+                                icon="chevronLeft"
+                                bgstyle="${this.inverse ? "none-light" : "none-contrast"}"
+                                size="xsmall"
+                                aria-hidden="true"
+                                type="span"
+                            ></o-icon-button>
+                    ` : null}
+                <span class="link-text"><slot></slot></span>
+                ${this.endIcon && !this.reverseEndIcon ? l`
+                            <o-icon-button
+                                icon="chevronRight"
+                                bgstyle="${this.inverse ? "none-light" : "none-contrast"}"
+                                size="xsmall"
+                                aria-hidden="true"
+                                type="span"
+                            ></o-icon-button>
+                    ` : null}
+            </a>
+        `;
+  }
+};
+F.styles = f`
+        :host([template="standard"]) a {
+            color: var(--color-content-action-secondary);
+            font-size: var(--font-size-200);
+            font-weight: var(--font-weight-400);
+            line-height: var(--line-height-240);
+            letter-spacing: var(--letter-spacing-400);
+            font-family: var(--font-family-loccitane-serif);
+        }
+
+        :host([template="discret"]) a {
+            color: var(--color-content-action-secondary);
+            font-size: var(--font-size-100);
+            font-weight: var(--font-weight-400);
+            line-height: var(--line-height-160);
+            letter-spacing: var(--letter-spacing-400);
+            font-family: var(--font-family-loccitane-sans);
+        }
+
+        :host([template="review"]) a {
+            color: var(--color-content-action-secondary);
+            font-size: var(--font-size-100);
+            font-weight: var(--font-weight-500);
+            line-height: var(--line-height-160);
+            letter-spacing: var(--letter-spacing-400);
+            font-family: var(--font-family-loccitane-sans);
+            text-transform: uppercase;
+        }
+
+        :host([inverse]) a {
+            color: var(--color-container-action-tertiary-default);
+        }
+
+        :host([endIcon]) a o-icon-button {
+            margin-left: 2px;
+            transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+
+        :host([endIcon][reverseEndIcon]) a o-icon-button {
+            margin-right: 2px;
+            transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+
+        :host([endIcon]) a {
+            &:hover {
+                o-icon-button {
+                    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+                    :host(:not([reverseEndIcon])) & {
+                        transform: translateX(4px);
+                    }
+
+                    :host([reverseEndIcon]) & {
+                        transform: translateX(-4px);
+                    }
+                }
+            }
+        }
+
+        :host a {
+            position: relative;
+            text-decoration: none;
+            color: inherit;
+        }
+
+        .link-text {
+            position: relative;
+            display: inline-block;
+        }
 
-		.content {
-			flex: 1 1 auto;
-			overflow-y: auto;
-			overflow-x: hidden;
-			padding: var(--spacing-xl);
+        .link-text::after {
+            content: "";
+            position: absolute;
+            left: 0;
+            bottom: 0;
+            width: 100%;
+            opacity: 1;
+            height: 1px;
+            background-color: currentColor;
+            transition: opacity 0.3s ease, height 0.3s ease;
+            pointer-events: none;
+        }
 
-			&.with-detail {
-				width: 100%;
-				height: 100%;
-				position: absolute;
-				top: 0;
-				left: 0;
-				background: var(--color-container-bg-white);
-				z-index: 3;
-				padding: var(--spacing-4-xs);
-			}
+        :host a:hover .link-text::after {
+            opacity: 0;
+            height: 1px;
+        }
+        /* End of underline effect */
+    `;
+ot([
+  a({ type: String })
+], F.prototype, "href", 2);
+ot([
+  a({ type: String })
+], F.prototype, "target", 2);
+ot([
+  a({ type: String, reflect: !0 })
+], F.prototype, "template", 2);
+ot([
+  a({ type: Boolean, reflect: !0 })
+], F.prototype, "inverse", 2);
+ot([
+  a({ type: Boolean, reflect: !0 })
+], F.prototype, "endIcon", 2);
+ot([
+  a({ type: Boolean, reflect: !0 })
+], F.prototype, "reverseEndIcon", 2);
+F = ot([
+  y("o-link")
+], F);
+var To = Object.defineProperty, jo = Object.getOwnPropertyDescriptor, Et = (o, t, e, n) => {
+  for (var i = n > 1 ? void 0 : n ? jo(t, e) : t, r = o.length - 1, s; r >= 0; r--)
+    (s = o[r]) && (i = (n ? s(t, e, i) : s(i)) || i);
+  return n && i && To(t, e, i), i;
+};
+let st = class extends u {
+  constructor() {
+    super(...arguments), this.rating = 0;
+  }
+  getStarKeys() {
+    const o = [];
+    for (let t = 0; t < 5; t++) {
+      const e = this.rating - t;
+      let n;
+      e >= 1 ? n = 100 : e <= 0 ? n = 0 : n = Math.round(e * 100 / 25) * 25, o.push(`star-${n}`);
+    }
+    return o;
+  }
+  render() {
+    const o = this.getStarKeys();
+    return l`
+			<div class="rating">
+			<div class="stars">
+				${o.map(
+      (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}
+			</div>
+		`;
+  }
+};
+st.styles = f`
+		svg {
+			width: 12px;
+			height: 12px;
 		}
-
-		.footer {
-			flex: 0 0 auto;
-			padding: var(--spacing-xl);
-			border-top: var(--border-050) solid var(--color-border-tertiary);
+		.rating {
 			display: flex;
-    		flex-direction: column;
-			gap: var(--spacing-l);
-			justify-content: flex-start;
+			align-items: center;
 		}
 
-		/* Mobile */
-		@media (max-width: 767px) {
-			:host {
-				--side-panel-width: 100%;
-				--side-panel-max-width: none;
-			}
+		.stars {
+			display: flex;
+			gap: 2px;
 		}
 
-		/* Tablet */
-		@media (min-width: 768px) and (max-width: 1024px) {
-			:host {
-				--side-panel-width: 375px;
-				--side-panel-max-width: 375px;
-			}
+		.star {
+			display: block;
 		}
 
-		@media (min-width: 1025px) {
-			:host {
-				--side-panel-width: 100%;
-				--side-panel-max-width: 416px;
-				--font-size: var(--font-size-400);
-				--line-height: var(--line-height-280);
-			}
-		}
-		
-		@keyframes slideInRight {
-			from {
-				transform: translateX(100%);
-			}
-			to {
-				transform: translateX(0%);
-			}
-		}
-		
-		@keyframes slideOutRight {
-			from {
-				transform: translateX(0%);
-			}
-			to {
-				transform: translateX(100%);
-			}
+		o-link {
+			margin-left: 6px;
+			font-family: var(--font-family-loccitane-sans);
+			font-weight: var(--font-weight-500);
+			font-size: var(--font-size-100);
+			line-height: var(--line-height-160);
+			letter-spacing: var(--letter-spacing-400);
+			color: var(--color-content-action-secondary);
 		}
 
-		.slide-out-right {
-			animation: slideOutRight 0.3s ease-in forwards;
-		}
-		
-		.detail-view {
-			animation: slideInRight 0.3s ease-out both;
-		}
-		.detail-content {
-			padding: var(--spacing-xl);
+		.review-link {
+			text-decoration: underline;
+			cursor: pointer;
 		}
 	`;
-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 })
-], p.prototype, "open", 2);
-g([
-  a({ type: Boolean, reflect: !0 })
-], p.prototype, "showHeader", 2);
-g([
-  a({ type: Boolean, reflect: !0 })
-], p.prototype, "showFooter", 2);
-g([
-  a({ type: Boolean, reflect: !0 })
-], p.prototype, "showHeaderStartIcon", 2);
-g([
-  a({ type: String, reflect: !0 })
-], p.prototype, "headerTitle", 2);
-g([
-  a({ type: String, reflect: !0 })
-], p.prototype, "headerTitleClassName", 2);
-g([
-  a({ type: String, reflect: !0 })
-], p.prototype, "closeButtonLabel", 2);
-g([
-  a({ type: String, reflect: !0 })
-], p.prototype, "firstButtonLabel", 2);
-g([
-  a({ type: String, reflect: !0 })
-], p.prototype, "firstButtonVariant", 2);
-g([
-  a({ type: Object, reflect: !0 })
-], p.prototype, "firstButtonProps", 2);
-g([
-  a({ type: Boolean, reflect: !0 })
-], p.prototype, "onFirstButtonClickClose", 2);
-g([
-  a({ type: String, reflect: !0 })
-], p.prototype, "secondButtonLabel", 2);
-g([
-  a({ type: String, reflect: !0 })
-], p.prototype, "secondButtonVariant", 2);
-g([
-  a({ type: Object, reflect: !0 })
-], p.prototype, "secondButtonProps", 2);
-g([
-  a({ type: Boolean, reflect: !0 })
-], p.prototype, "onSecondButtonClickClose", 2);
-g([
-  a({ type: Boolean, reflect: !0 })
-], p.prototype, "disablePortal", 2);
-g([
-  a({ type: Number, reflect: !0 })
-], p.prototype, "zIndex", 2);
-g([
-  a({ type: Boolean, reflect: !0 })
-], p.prototype, "initialized", 2);
-g([
-  a({ type: Boolean })
-], p.prototype, "showDetail", 2);
-g([
-  a({ type: Boolean })
-], p.prototype, "isHidingDetail", 2);
-p = g([
-  y("o-side-panel")
-], p);
+Et([
+  a({ type: Number })
+], st.prototype, "rating", 2);
+Et([
+  a({ type: String })
+], st.prototype, "reviewCount", 2);
+Et([
+  a({ type: String })
+], st.prototype, "href", 2);
+st = Et([
+  y("o-rating")
+], st);
 var Ro = Object.defineProperty, No = Object.getOwnPropertyDescriptor, X = (o, t, e, n) => {
   for (var i = n > 1 ? void 0 : n ? No(t, e) : t, r = o.length - 1, s; r >= 0; r--)
     (s = o[r]) && (i = (n ? s(t, e, i) : s(i)) || i);
@@ -3315,7 +3316,7 @@ var Xo = Object.defineProperty, Jo = Object.getOwnPropertyDescriptor, M = (o, t,
     (s = o[r]) && (i = (n ? s(t, e, i) : s(i)) || i);
   return n && i && Xo(t, e, i), i;
 };
-let E = class extends u {
+let A = 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);
@@ -3452,7 +3453,7 @@ let E = class extends u {
 		`;
   }
 };
-E.styles = f`
+A.styles = f`
 		:host {
 			display: inline-block;
 			position: relative;
@@ -3630,34 +3631,34 @@ E.styles = f`
 	`;
 M([
   a({ type: Array, reflect: !0 })
-], E.prototype, "options", 2);
+], A.prototype, "options", 2);
 M([
   a({ type: String, reflect: !0 })
-], E.prototype, "value", 2);
+], A.prototype, "value", 2);
 M([
   a({ type: String, reflect: !0 })
-], E.prototype, "name", 2);
+], A.prototype, "name", 2);
 M([
   a({ type: String, reflect: !0 })
-], E.prototype, "additionaltext", 2);
+], A.prototype, "additionaltext", 2);
 M([
   a({ type: Boolean, reflect: !0 })
-], E.prototype, "disabled", 2);
+], A.prototype, "disabled", 2);
 M([
   a({ type: String, reflect: !0 })
-], E.prototype, "width", 2);
+], A.prototype, "width", 2);
 M([
   et()
-], E.prototype, "open", 2);
+], A.prototype, "open", 2);
 M([
   et()
-], E.prototype, "activeIndex", 2);
+], A.prototype, "activeIndex", 2);
 M([
   et()
-], E.prototype, "menuWidth", 2);
-E = M([
+], A.prototype, "menuWidth", 2);
+A = M([
   y("o-dropdown-variant")
-], E);
+], A);
 /**
  * @license
  * Copyright 2018 Google LLC
@@ -3809,7 +3810,7 @@ var oi = Object.defineProperty, ii = Object.getOwnPropertyDescriptor, V = (o, t,
   return n && i && oi(t, e, i), i;
 };
 const ni = Ft(u);
-let A = class extends ni {
+let E = class extends ni {
   constructor() {
     super(...arguments), this.link = "", this.name = "", this.value = "", this.text = "", this.size = "standard", this.selected = !1, this.fullwidth = !1, this.inactive = !1;
   }
@@ -3832,7 +3833,7 @@ let A = class extends ni {
     `;
   }
 };
-A.styles = f`
+E.styles = f`
     :host {
       cursor: pointer;
       display: inline-flex;
@@ -3924,31 +3925,31 @@ A.styles = f`
   `;
 V([
   a({ type: String, reflect: !0 })
-], A.prototype, "link", 2);
+], E.prototype, "link", 2);
 V([
   a({ reflect: !0 })
-], A.prototype, "name", 2);
+], E.prototype, "name", 2);
 V([
   a({ reflect: !0 })
-], A.prototype, "value", 2);
+], E.prototype, "value", 2);
 V([
   a({ type: String })
-], A.prototype, "text", 2);
+], E.prototype, "text", 2);
 V([
   a({ type: String, reflect: !0 })
-], A.prototype, "size", 2);
+], E.prototype, "size", 2);
 V([
   a({ type: Boolean, reflect: !0 })
-], A.prototype, "selected", 2);
+], E.prototype, "selected", 2);
 V([
   a({ type: Boolean, reflect: !0 })
-], A.prototype, "fullwidth", 2);
+], E.prototype, "fullwidth", 2);
 V([
   a({ type: Boolean, reflect: !0 })
-], A.prototype, "inactive", 2);
-A = V([
+], E.prototype, "inactive", 2);
+E = V([
   y("o-chip")
-], A);
+], E);
 var ri = Object.defineProperty, si = Object.getOwnPropertyDescriptor, Gt = (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);
@@ -3959,7 +3960,7 @@ let yt = class extends u {
     super(), this.name = "", this.value = "", this.addEventListener("selected", this.onChipSelected);
   }
   onChipSelected(o) {
-    const t = o.target instanceof A ? o.target : null;
+    const t = o.target instanceof E ? 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);
     }));