@florid-kit/components 0.8.48 → 0.8.49

package/index.mjs

@@ -35,7 +35,7 @@ const ce = (o) => new oe(typeof o == "string" ? o : o + "", void 0, It), m = (o,
     const n = document.createElement("style"), i = ft.litNonce;
     i !== void 0 && n.setAttribute("nonce", i), n.textContent = e.cssText, o.appendChild(n);
   }
-}, Zt = Pt ? (o) => o : (o) => o instanceof CSSStyleSheet ? ((t) => {
+}, qt = Pt ? (o) => o : (o) => o instanceof CSSStyleSheet ? ((t) => {
   let e = "";
   for (const n of t.cssRules) e += n.cssText;
   return ce(e);
@@ -45,7 +45,7 @@ const ce = (o) => new oe(typeof o == "string" ? o : o + "", void 0, It), m = (o,
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const { is: de, defineProperty: pe, getOwnPropertyDescriptor: ue, getOwnPropertyNames: ve, getOwnPropertySymbols: fe, getPrototypeOf: be } = Object, U = globalThis, qt = U.trustedTypes, ge = qt ? qt.emptyScript : "", $t = U.reactiveElementPolyfillSupport, ot = (o, t) => o, bt = { toAttribute(o, t) {
+const { is: de, defineProperty: pe, getOwnPropertyDescriptor: ue, getOwnPropertyNames: ve, getOwnPropertySymbols: fe, getPrototypeOf: be } = Object, U = globalThis, Zt = U.trustedTypes, ge = Zt ? Zt.emptyScript : "", $t = U.reactiveElementPolyfillSupport, ot = (o, t) => o, bt = { toAttribute(o, t) {
   switch (t) {
     case Boolean:
       o = o ? ge : null;
@@ -129,8 +129,8 @@ let J = class extends HTMLElement {
     const e = [];
     if (Array.isArray(t)) {
       const n = new Set(t.flat(1 / 0).reverse());
-      for (const i of n) e.unshift(Zt(i));
-    } else t !== void 0 && e.push(Zt(t));
+      for (const i of n) e.unshift(qt(i));
+    } else t !== void 0 && e.push(qt(t));
     return e;
   }
   static _$Eu(t, e) {
@@ -282,9 +282,9 @@ J.elementStyles = [], J.shadowRootOptions = { mode: "open" }, J[ot("elementPrope
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const it = globalThis, gt = it.trustedTypes, Kt = gt ? gt.createPolicy("lit-html", { createHTML: (o) => o }) : void 0, ie = "$lit$", j = `lit$${Math.random().toFixed(9).slice(2)}$`, ne = "?" + j, ye = `<${ne}>`, W = document, rt = () => W.createComment(""), st = (o) => o === null || typeof o != "object" && typeof o != "function", Bt = Array.isArray, me = (o) => Bt(o) || typeof (o == null ? void 0 : o[Symbol.iterator]) == "function", _t = `[ 	
+const it = globalThis, gt = it.trustedTypes, Kt = gt ? gt.createPolicy("lit-html", { createHTML: (o) => o }) : void 0, ie = "$lit$", R = `lit$${Math.random().toFixed(9).slice(2)}$`, ne = "?" + R, ye = `<${ne}>`, W = document, rt = () => W.createComment(""), st = (o) => o === null || typeof o != "object" && typeof o != "function", Bt = Array.isArray, me = (o) => Bt(o) || typeof (o == null ? void 0 : o[Symbol.iterator]) == "function", _t = `[ 	
 \f\r]`, et = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, Gt = /-->/g, Xt = />/g, V = RegExp(`>|${_t}(?:([^\\s"'>=/]+)(${_t}*=${_t}*(?:[^ 	
-\f\r"'\`<>=]|("|')|))|$)`, "g"), Jt = /'/g, Qt = /"/g, re = /^(?:script|style|textarea|title)$/i, we = (o) => (t, ...e) => ({ _$litType$: o, strings: t, values: e }), l = we(1), F = Symbol.for("lit-noChange"), d = Symbol.for("lit-nothing"), Yt = /* @__PURE__ */ new WeakMap(), Z = W.createTreeWalker(W, 129);
+\f\r"'\`<>=]|("|')|))|$)`, "g"), Jt = /'/g, Qt = /"/g, re = /^(?:script|style|textarea|title)$/i, we = (o) => (t, ...e) => ({ _$litType$: o, strings: t, values: e }), l = we(1), F = Symbol.for("lit-noChange"), d = Symbol.for("lit-nothing"), Yt = /* @__PURE__ */ new WeakMap(), q = W.createTreeWalker(W, 129);
 function se(o, t) {
   if (!Bt(o) || !o.hasOwnProperty("raw")) throw Error("invalid template strings array");
   return Kt !== void 0 ? Kt.createHTML(t) : t;
@@ -296,8 +296,8 @@ const xe = (o, t) => {
     const c = o[h];
     let v, y, p = -1, $ = 0;
     for (; $ < c.length && (s.lastIndex = $, y = s.exec(c), y !== null); ) $ = s.lastIndex, s === et ? y[1] === "!--" ? s = Gt : y[1] !== void 0 ? s = Xt : y[2] !== void 0 ? (re.test(y[2]) && (i = RegExp("</" + y[2], "g")), s = V) : y[3] !== void 0 && (s = V) : s === V ? y[0] === ">" ? (s = i ?? et, p = -1) : y[1] === void 0 ? p = -2 : (p = s.lastIndex - y[2].length, v = y[1], s = y[3] === void 0 ? V : y[3] === '"' ? Qt : Jt) : s === Qt || s === Jt ? s = V : s === Gt || s === Xt ? s = et : (s = V, i = void 0);
-    const E = s === V && o[h + 1].startsWith("/>") ? " " : "";
-    r += s === et ? c + ye : p >= 0 ? (n.push(v), c.slice(0, p) + ie + c.slice(p) + j + E) : c + j + (p === -2 ? h : E);
+    const S = s === V && o[h + 1].startsWith("/>") ? " " : "";
+    r += s === et ? c + ye : p >= 0 ? (n.push(v), c.slice(0, p) + ie + c.slice(p) + R + S) : c + R + (p === -2 ? h : S);
   }
   return [se(o, r + (o[e] || "<?>") + (t === 2 ? "</svg>" : t === 3 ? "</math>" : "")), n];
 };
@@ -307,28 +307,28 @@ class at {
     this.parts = [];
     let r = 0, s = 0;
     const h = t.length - 1, c = this.parts, [v, y] = xe(t, e);
-    if (this.el = at.createElement(v, n), Z.currentNode = this.el.content, e === 2 || e === 3) {
+    if (this.el = at.createElement(v, n), q.currentNode = this.el.content, e === 2 || e === 3) {
       const p = this.el.content.firstChild;
       p.replaceWith(...p.childNodes);
     }
-    for (; (i = Z.nextNode()) !== null && c.length < h; ) {
+    for (; (i = q.nextNode()) !== null && c.length < h; ) {
       if (i.nodeType === 1) {
         if (i.hasAttributes()) for (const p of i.getAttributeNames()) if (p.endsWith(ie)) {
-          const $ = y[s++], E = i.getAttribute(p).split(j), vt = /([.?@])?(.*)/.exec($);
-          c.push({ type: 1, index: r, name: vt[2], strings: E, ctor: vt[1] === "." ? _e : vt[1] === "?" ? Ce : vt[1] === "@" ? ke : mt }), i.removeAttribute(p);
-        } else p.startsWith(j) && (c.push({ type: 6, index: r }), i.removeAttribute(p));
+          const $ = y[s++], S = i.getAttribute(p).split(R), vt = /([.?@])?(.*)/.exec($);
+          c.push({ type: 1, index: r, name: vt[2], strings: S, ctor: vt[1] === "." ? _e : vt[1] === "?" ? Ce : vt[1] === "@" ? ke : mt }), i.removeAttribute(p);
+        } else p.startsWith(R) && (c.push({ type: 6, index: r }), i.removeAttribute(p));
         if (re.test(i.tagName)) {
-          const p = i.textContent.split(j), $ = p.length - 1;
+          const p = i.textContent.split(R), $ = p.length - 1;
           if ($ > 0) {
             i.textContent = gt ? gt.emptyScript : "";
-            for (let E = 0; E < $; E++) i.append(p[E], rt()), Z.nextNode(), c.push({ type: 2, index: ++r });
+            for (let S = 0; S < $; S++) i.append(p[S], rt()), q.nextNode(), c.push({ type: 2, index: ++r });
             i.append(p[$], rt());
           }
         }
       } else if (i.nodeType === 8) if (i.data === ne) c.push({ type: 2, index: r });
       else {
         let p = -1;
-        for (; (p = i.data.indexOf(j, p + 1)) !== -1; ) c.push({ type: 7, index: r }), p += j.length - 1;
+        for (; (p = i.data.indexOf(R, p + 1)) !== -1; ) c.push({ type: 7, index: r }), p += R.length - 1;
       }
       r++;
     }
@@ -357,16 +357,16 @@ class $e {
   }
   u(t) {
     const { el: { content: e }, parts: n } = this._$AD, i = ((t == null ? void 0 : t.creationScope) ?? W).importNode(e, !0);
-    Z.currentNode = i;
-    let r = Z.nextNode(), s = 0, h = 0, c = n[0];
+    q.currentNode = i;
+    let r = q.nextNode(), s = 0, h = 0, c = n[0];
     for (; c !== void 0; ) {
       if (s === c.index) {
         let v;
         c.type === 2 ? v = new pt(r, r.nextSibling, this, t) : c.type === 1 ? v = new c.ctor(r, c.name, c.strings, this, t) : c.type === 6 && (v = new Ae(r, this, t)), this._$AV.push(v), c = n[++h];
       }
-      s !== (c == null ? void 0 : c.index) && (r = Z.nextNode(), s++);
+      s !== (c == null ? void 0 : c.index) && (r = q.nextNode(), s++);
     }
-    return Z.currentNode = W, i;
+    return q.currentNode = W, i;
   }
   p(t) {
     let e = 0;
@@ -518,7 +518,7 @@ const Ee = (o, t, e) => {
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const q = globalThis;
+const Z = globalThis;
 let f = class extends J {
   constructor() {
     super(...arguments), this.renderOptions = { host: this }, this._$Do = void 0;
@@ -545,10 +545,10 @@ let f = class extends J {
   }
 };
 var ee;
-f._$litElement$ = !0, f.finalized = !0, (ee = q.litElementHydrateSupport) == null || ee.call(q, { LitElement: f });
-const kt = q.litElementPolyfillSupport;
+f._$litElement$ = !0, f.finalized = !0, (ee = Z.litElementHydrateSupport) == null || ee.call(Z, { LitElement: f });
+const kt = Z.litElementPolyfillSupport;
 kt == null || kt({ LitElement: f });
-(q.litElementVersions ?? (q.litElementVersions = [])).push("4.2.0");
+(Z.litElementVersions ?? (Z.litElementVersions = [])).push("4.2.0");
 /**
  * @license
  * Copyright 2017 Google LLC
@@ -682,14 +682,14 @@ const Ie = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="h
 `, je = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M12.2834 14.4585L7.98873 11.3928L3.69404 14.4585L5.33977 9.4972L1 6.39639H6.36554L8 1.4585L9.63446 6.39639H15L10.6602 9.4972L12.306 14.4585H12.2834Z" fill="#3F2B2E"/>
 </svg>
-`, Ue = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+`, Re = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M2 2L14 14" stroke="#3F2B2E"/>
 <path d="M14 2L2 14" stroke="#3F2B2E"/>
 </svg>
-`, Fe = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+`, Ue = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M7.12506 1C10.5018 1 13.2509 3.74834 13.251 7.125C13.2511 8.59738 12.7172 10.0206 11.7491 11.1299L14.8731 14.2539C15.0433 14.4253 15.0435 14.7018 14.8731 14.873C14.7913 14.9555 14.6797 15.002 14.5635 15.002C14.4475 15.0019 14.3357 14.9554 14.254 14.873L11.1309 11.749C10.0555 12.6818 8.6564 13.251 7.12506 13.251C3.7484 13.2508 1.00006 10.5017 1.00006 7.125C1.00025 3.74846 3.74852 1.00019 7.12506 1ZM7.12506 1.875C4.22971 1.87522 1.87506 4.23058 1.87506 7.12598C1.87532 10.0212 4.22987 12.3758 7.12506 12.376C10.0204 12.376 12.3758 10.0213 12.376 7.12598C12.376 4.23044 10.0206 1.875 7.12506 1.875Z" fill="#3F2B2E"/>
 </svg>
-`, Ne = `<?xml version="1.0" encoding="utf-8"?>
+`, Fe = `<?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: $$$/GeneralStr/196=Adobe Illustrator 27.6.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 40 40" style="enable-background:new 0 0 40 40;" xml:space="preserve">
@@ -699,7 +699,7 @@ const Ie = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="h
 <path class="st0" d="M40,20c0,0.7-0.6,1.2-1.2,1.2H21.2v17.5c0,0.7-0.6,1.2-1.2,1.2s-1.2-0.6-1.2-1.2V21.2H1.2C0.6,21.2,0,20.7,0,20
 	s0.6-1.2,1.2-1.2h17.5V1.2C18.8,0.6,19.3,0,20,0s1.2,0.6,1.2,1.2v17.5h17.5C39.4,18.8,40,19.3,40,20z"/>
 </svg>
-`, Re = `<?xml version="1.0" encoding="utf-8"?>
+`, Ne = `<?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: $$$/GeneralStr/196=Adobe Illustrator 27.6.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 40 40" style="enable-background:new 0 0 40 40;" xml:space="preserve">
@@ -711,10 +711,10 @@ const Ie = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="h
 `, Ve = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M15.0009 8.12175C15.0009 8.36347 14.805 8.55943 14.5634 8.55943H2.49495L7.43502 13.5017C7.60609 13.6726 7.60628 13.9499 7.43546 14.1211C7.26464 14.2922 6.98749 14.2924 6.81642 14.1215L1.13 8.43163C1.04685 8.34998 1 8.23831 1 8.12175C1 8.00518 1.04685 7.89351 1.13 7.81187L6.81642 2.12286C6.98808 1.95699 7.26094 1.95937 7.4297 2.12819C7.59845 2.29702 7.60082 2.57001 7.43502 2.74175L2.49495 7.68406H14.5634C14.805 7.68406 15.0009 7.88002 15.0009 8.12175Z" fill="#3F2B2E"/>
 </svg>
-`, Ze = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+`, qe = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M14.1218 7.43502C13.9504 7.60543 13.6735 7.60543 13.5021 7.43502L8.55961 2.49408V14.5625C8.55961 14.8041 8.36365 15 8.12192 15C7.88018 15 7.68422 14.8041 7.68422 14.5625V2.49408L2.74177 7.43502C2.57002 7.60082 2.29703 7.59845 2.1282 7.4297C1.95936 7.26094 1.95699 6.98808 2.12287 6.81642L7.81203 1.13C7.89368 1.04685 8.00535 1 8.12192 1C8.23848 1 8.35015 1.04685 8.4318 1.13L14.121 6.81642C14.2921 6.98702 14.2925 7.26395 14.1218 7.43502Z" fill="#3F2B2E"/>
 </svg>
-`, qe = `<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+`, Ze = `<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M6.33317 8.00033C6.33317 3.95024 7.52708 0.666992 8.99984 0.666992C10.4726 0.666992 11.6665 3.95024 11.6665 8.00033M5.33317 15.3337H12.6665L16.3332 6.20033C14.9582 5.76699 12.2998 5.33366 8.99984 5.33366C5.69984 5.33366 3.49984 5.76699 1.6665 6.20033L5.33317 15.3337Z" stroke="#3F2B2E"/>
 </svg>
 `, We = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -747,18 +747,18 @@ const Ie = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="h
   playerv: Oe,
   chevronRight: Be,
   chevronLeft: ze,
-  icoPlus: Ne,
-  icoMinus: Re,
+  icoPlus: Fe,
+  icoMinus: Ne,
   "star-0": De,
   "star-25": He,
   "star-50": Me,
   "star-75": Te,
   "star-100": je,
-  cross: Ue,
-  search: Fe,
+  cross: Re,
+  search: Ue,
   arrowLeft: Ve,
-  arrowTop: Ze,
-  cart: qe,
+  arrowTop: qe,
+  cart: Ze,
   notifyme: We,
   triangledown: Ke,
   triangleup: Ge,
@@ -826,7 +826,7 @@ var oo = Object.defineProperty, io = Object.getOwnPropertyDescriptor, x = (o, t,
   return n && i && oo(t, e, i), i;
 };
 const no = Dt(f);
-let b = class extends no {
+let g = class extends no {
   constructor() {
     super(...arguments), this.type = "submit", this.value = "", this.variant = "primary", this.text = "", this.textsecond = "", this.fullwidth = !1, this.disabled = !1, this.startIconModel = "", this.endIconModel = "", this.startIcon = !1, this.endIcon = !1, this.panelTarget = "", this.href = "", this.target = "", this.underlined = !1;
   }
@@ -889,9 +889,9 @@ let b = class extends no {
     `;
   }
 };
-Pe(b);
-b.formAssociated = !0;
-b.styles = m`
+Pe(g);
+g.formAssociated = !0;
+g.styles = m`
     :host {
       --button-border: transparent;
       cursor: pointer;
@@ -1082,52 +1082,52 @@ b.styles = m`
   `;
 x([
   a()
-], b.prototype, "type", 2);
+], g.prototype, "type", 2);
 x([
   a({ reflect: !0 })
-], b.prototype, "value", 2);
+], g.prototype, "value", 2);
 x([
   a({ type: String, reflect: !0 })
-], b.prototype, "variant", 2);
+], g.prototype, "variant", 2);
 x([
   a({ type: String })
-], b.prototype, "text", 2);
+], g.prototype, "text", 2);
 x([
   a({ type: String })
-], b.prototype, "textsecond", 2);
+], g.prototype, "textsecond", 2);
 x([
   a({ type: Boolean, reflect: !0 })
-], b.prototype, "fullwidth", 2);
+], g.prototype, "fullwidth", 2);
 x([
   a({ type: Boolean, reflect: !0 })
-], b.prototype, "disabled", 2);
+], g.prototype, "disabled", 2);
 x([
   a({ type: String, reflect: !0 })
-], b.prototype, "startIconModel", 2);
+], g.prototype, "startIconModel", 2);
 x([
   a({ type: String, reflect: !0 })
-], b.prototype, "endIconModel", 2);
+], g.prototype, "endIconModel", 2);
 x([
   a({ type: Boolean, reflect: !0, attribute: "starticon" })
-], b.prototype, "startIcon", 2);
+], g.prototype, "startIcon", 2);
 x([
   a({ type: Boolean, reflect: !0, attribute: "endicon" })
-], b.prototype, "endIcon", 2);
+], g.prototype, "endIcon", 2);
 x([
   a({ type: String, attribute: "paneltarget", reflect: !0 })
-], b.prototype, "panelTarget", 2);
+], g.prototype, "panelTarget", 2);
 x([
   a({ type: String })
-], b.prototype, "href", 2);
+], g.prototype, "href", 2);
 x([
   a({ type: String })
-], b.prototype, "target", 2);
+], g.prototype, "target", 2);
 x([
   a({ type: Boolean, reflect: !0 })
-], b.prototype, "underlined", 2);
-b = x([
+], g.prototype, "underlined", 2);
+g = x([
   w("o-button")
-], b);
+], g);
 var ro = Object.defineProperty, so = Object.getOwnPropertyDescriptor, wt = (o, t, e, n) => {
   for (var i = n > 1 ? void 0 : n ? so(t, e) : t, r = o.length - 1, s; r >= 0; r--)
     (s = o[r]) && (i = (n ? s(t, e, i) : s(i)) || i);
@@ -1953,19 +1953,35 @@ class xo extends wo {
   }
 }
 const te = Mt(xo);
-var $o = Object.defineProperty, _o = Object.getOwnPropertyDescriptor, g = (o, t, e, n) => {
+var $o = Object.defineProperty, _o = Object.getOwnPropertyDescriptor, b = (o, t, e, n) => {
   for (var i = n > 1 ? void 0 : n ? _o(t, e) : t, r = o.length - 1, s; r >= 0; r--)
     (s = o[r]) && (i = (n ? s(t, e, i) : s(i)) || i);
   return n && i && $o(t, e, i), i;
 };
 let u = class extends f {
   constructor() {
-    super(...arguments), this.open = !1, this.showHeader = !0, this.showFooter = !1, this.showHeaderStartIcon = !1, this.headerTitle = "", this.headerTitleClassName = "panel-title", this.closeButtonLabel = "Close the modal", this.firstButtonLabel = "Close", this.firstButtonVariant = "primary", this.firstButtonProps = {}, this.onFirstButtonClickClose = !1, this.secondButtonLabel = "", this.secondButtonVariant = "secondary", this.secondButtonProps = {}, this.onSecondButtonClickClose = !1, this.disablePortal = !1, this.zIndex = 99, this.initialized = !1, this.showDetail = !1, this.previousFocusedElement = null, this.innerFocusedElement = null, this._onOpenDetail = () => {
-      this.showDetail = !0;
+    super(...arguments), this.open = !1, this.showHeader = !0, this.showFooter = !1, this.showHeaderStartIcon = !1, this.headerTitle = "", this.headerTitleClassName = "panel-title", this.closeButtonLabel = "Close the modal", this.firstButtonLabel = "Close", this.firstButtonVariant = "primary", this.firstButtonProps = {}, this.onFirstButtonClickClose = !1, this.secondButtonLabel = "", this.secondButtonVariant = "secondary", this.secondButtonProps = {}, this.onSecondButtonClickClose = !1, this.disablePortal = !1, this.zIndex = 99, this.initialized = !1, this.showDetail = !1, this.isHidingDetail = !1, this.previousFocusedElement = null, this.innerFocusedElement = null, this._onOpenDetail = () => {
+      this.showDetail = !0, this.showHeaderStartIcon = !0;
     }, this.handleKeyDown = (o) => {
       this.open && (o.key === "Escape" ? this.closePanel() : o.key === "Tab" && this.trapFocus(o));
     }, this.handleClosePanel = (o) => {
-      o instanceof KeyboardEvent && o.key !== "Enter" && o.key !== " " || (o.preventDefault(), o.stopPropagation(), this.closePanel());
+      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");
+        if (n) {
+          const i = () => {
+            this.showDetail = !1, this.isHidingDetail = !1, this.showHeaderStartIcon = !1, n.removeEventListener("animationend", i);
+          };
+          n.addEventListener("animationend", i);
+        } else
+          this.showDetail = !1, this.isHidingDetail = !1, this.showHeaderStartIcon = !1;
+        return;
+      }
+      this.closePanel();
     };
   }
   connectedCallback() {
@@ -1977,12 +1993,12 @@ let u = class extends f {
     document.body.style.overflow = "", document.body.removeAttribute("data-side-panel"), this.removeEventListener("keydown", this.handleKeyDown), super.disconnectedCallback(), this.removeEventListener("open-detail", this._onOpenDetail);
   }
   trapFocus(o) {
-    var i, r, s, h, c, v, y, p, $, E;
+    var i, r, s, h, c, v, y, p, $, S;
     this.innerFocusedElement = document.activeElement || null, this.innerFocusedElement = ((r = (i = this.innerFocusedElement) == null ? void 0 : i.shadowRoot) == null ? void 0 : r.activeElement) || this.innerFocusedElement;
     const t = this.getFocusableElements();
     if (t.length === 0) return;
     const e = t[0], n = t[t.length - 1];
-    o.shiftKey && this.innerFocusedElement === e ? (o.preventDefault(), n.shadowRoot ? (c = (h = (s = n.shadowRoot) == null ? void 0 : s.querySelector(u.focusablesSelector)) == null ? void 0 : h.focus) == null || c.call(h) : (v = n.focus) == null || v.call(n)) : !o.shiftKey && this.innerFocusedElement === n && (o.preventDefault(), e.shadowRoot ? ($ = (p = (y = e.shadowRoot) == null ? void 0 : y.querySelector(u.focusablesSelector)) == null ? void 0 : p.focus) == null || $.call(p) : (E = e.focus) == null || E.call(e));
+    o.shiftKey && this.innerFocusedElement === e ? (o.preventDefault(), n.shadowRoot ? (c = (h = (s = n.shadowRoot) == null ? void 0 : s.querySelector(u.focusablesSelector)) == null ? void 0 : h.focus) == null || c.call(h) : (v = n.focus) == null || v.call(n)) : !o.shiftKey && this.innerFocusedElement === n && (o.preventDefault(), e.shadowRoot ? ($ = (p = (y = e.shadowRoot) == null ? void 0 : y.querySelector(u.focusablesSelector)) == null ? void 0 : p.focus) == null || $.call(p) : (S = e.focus) == null || S.call(e));
   }
   getFocusableElements() {
     const o = this.renderRoot.querySelector(".panel");
@@ -2063,6 +2079,7 @@ let u = class extends f {
 					size="small"
 					class="return-btn"
 					bgstyle="background-light"
+					data-role="back"
 					@click=${this.handleClosePanel}
 					@keydown=${this.handleClosePanel}
 					aria-label="${this.closeButtonLabel}"
@@ -2095,7 +2112,7 @@ let u = class extends f {
 
 				${o}
 
-				<div class="content ${this.showDetail ? "with-detail" : ""}">
+				<div class="content ${this.isHidingDetail ? "slide-out-right" : ""} ${this.showDetail ? "with-detail" : ""}">
 				
 				${this.showDetail ? l`
 						<div class="detail-view">
@@ -2305,6 +2322,19 @@ u.styles = m`
 			}
 		}
 		
+		@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;
 		}
@@ -2314,64 +2344,67 @@ u.styles = m`
 	`;
 u.focusablesSelector = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"]), o-icon-button, o-button';
 u.focusablesCustomElementsSelector = "o-icon-button, o-button";
-g([
+b([
   a({ type: Boolean, reflect: !0 })
 ], u.prototype, "open", 2);
-g([
+b([
   a({ type: Boolean, reflect: !0 })
 ], u.prototype, "showHeader", 2);
-g([
+b([
   a({ type: Boolean, reflect: !0 })
 ], u.prototype, "showFooter", 2);
-g([
+b([
   a({ type: Boolean, reflect: !0 })
 ], u.prototype, "showHeaderStartIcon", 2);
-g([
+b([
   a({ type: String, reflect: !0 })
 ], u.prototype, "headerTitle", 2);
-g([
+b([
   a({ type: String, reflect: !0 })
 ], u.prototype, "headerTitleClassName", 2);
-g([
+b([
   a({ type: String, reflect: !0 })
 ], u.prototype, "closeButtonLabel", 2);
-g([
+b([
   a({ type: String, reflect: !0 })
 ], u.prototype, "firstButtonLabel", 2);
-g([
+b([
   a({ type: String, reflect: !0 })
 ], u.prototype, "firstButtonVariant", 2);
-g([
+b([
   a({ type: Object, reflect: !0 })
 ], u.prototype, "firstButtonProps", 2);
-g([
+b([
   a({ type: Boolean, reflect: !0 })
 ], u.prototype, "onFirstButtonClickClose", 2);
-g([
+b([
   a({ type: String, reflect: !0 })
 ], u.prototype, "secondButtonLabel", 2);
-g([
+b([
   a({ type: String, reflect: !0 })
 ], u.prototype, "secondButtonVariant", 2);
-g([
+b([
   a({ type: Object, reflect: !0 })
 ], u.prototype, "secondButtonProps", 2);
-g([
+b([
   a({ type: Boolean, reflect: !0 })
 ], u.prototype, "onSecondButtonClickClose", 2);
-g([
+b([
   a({ type: Boolean, reflect: !0 })
 ], u.prototype, "disablePortal", 2);
-g([
+b([
   a({ type: Number, reflect: !0 })
 ], u.prototype, "zIndex", 2);
-g([
+b([
   a({ type: Boolean, reflect: !0 })
 ], u.prototype, "initialized", 2);
-g([
+b([
   a({ type: Boolean })
 ], u.prototype, "showDetail", 2);
-u = g([
+b([
+  a({ type: Boolean })
+], u.prototype, "isHidingDetail", 2);
+u = b([
   w("o-side-panel")
 ], u);
 var Co = Object.defineProperty, ko = Object.getOwnPropertyDescriptor, N = (o, t, e, n) => {
@@ -2668,7 +2701,7 @@ jt([
 lt = jt([
   w("o-tag")
 ], lt);
-var So = Object.defineProperty, Lo = Object.getOwnPropertyDescriptor, Ut = (o, t, e, n) => {
+var So = Object.defineProperty, Lo = Object.getOwnPropertyDescriptor, Rt = (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 && So(t, e, i), i;
@@ -2779,13 +2812,13 @@ ct.styles = m`
   }
       
   `;
-Ut([
+Rt([
   a({ type: String, reflect: !0 })
 ], ct.prototype, "type", 2);
-Ut([
+Rt([
   a({ type: String, reflect: !0 })
 ], ct.prototype, "text", 2);
-ct = Ut([
+ct = Rt([
   w("o-tooltip")
 ], ct);
 var Po = Object.defineProperty, Io = Object.getOwnPropertyDescriptor, H = (o, t, e, n) => {
@@ -2793,7 +2826,7 @@ var Po = Object.defineProperty, Io = Object.getOwnPropertyDescriptor, H = (o, t,
     (s = o[r]) && (i = (n ? s(t, e, i) : s(i)) || i);
   return n && i && Po(t, e, i), i;
 };
-let S = class extends f {
+let L = class extends f {
   constructor() {
     super(...arguments), this.options = [], this.value = "", this.name = "", this.disabled = !1, this.width = "100%", this.open = !1, this.activeIndex = -1, this.menuWidth = "", this._handleOutsideClick = (o) => {
       this.contains(o.target) || (this.open = !1, this.activeIndex = -1);
@@ -2916,7 +2949,7 @@ let S = class extends f {
     `;
   }
 };
-S.styles = m`
+L.styles = m`
 		:host {
 			display: inline-block;
 			position: relative;
@@ -3058,31 +3091,31 @@ S.styles = m`
 	`;
 H([
   a({ type: Array, reflect: !0 })
-], S.prototype, "options", 2);
+], L.prototype, "options", 2);
 H([
   a({ type: String, reflect: !0 })
-], S.prototype, "value", 2);
+], L.prototype, "value", 2);
 H([
   a({ type: String, reflect: !0 })
-], S.prototype, "name", 2);
+], L.prototype, "name", 2);
 H([
   a({ type: Boolean, reflect: !0 })
-], S.prototype, "disabled", 2);
+], L.prototype, "disabled", 2);
 H([
   a({ type: String, reflect: !0 })
-], S.prototype, "width", 2);
+], L.prototype, "width", 2);
 H([
   K()
-], S.prototype, "open", 2);
+], L.prototype, "open", 2);
 H([
   K()
-], S.prototype, "activeIndex", 2);
+], L.prototype, "activeIndex", 2);
 H([
   K()
-], S.prototype, "menuWidth", 2);
-S = H([
+], L.prototype, "menuWidth", 2);
+L = H([
   w("o-dropdown")
-], S);
+], L);
 var Oo = Object.getOwnPropertyDescriptor, Bo = (o, t, e, n) => {
   for (var i = n > 1 ? void 0 : n ? Oo(t, e) : t, r = o.length - 1, s; r >= 0; r--)
     (s = o[r]) && (i = s(i) || i);
@@ -3527,7 +3560,7 @@ const le = "important", Ho = " !" + le, Mo = Mt(class extends Tt {
     return F;
   }
 });
-var To = Object.defineProperty, jo = Object.getOwnPropertyDescriptor, Ft = (o, t, e, n) => {
+var To = Object.defineProperty, jo = Object.getOwnPropertyDescriptor, Ut = (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;
@@ -3632,22 +3665,22 @@ ht.styles = m`
       }
     }
   `;
-Ft([
+Ut([
   a({ type: Object, reflect: !0 })
 ], ht.prototype, "option", 2);
-Ft([
+Ut([
   a({ type: Number, reflect: !0 })
 ], ht.prototype, "imageSize", 2);
-ht = Ft([
+ht = Ut([
   w("o-reassurance")
 ], ht);
-var Uo = Object.defineProperty, Fo = Object.getOwnPropertyDescriptor, M = (o, t, e, n) => {
-  for (var i = n > 1 ? void 0 : n ? Fo(t, e) : t, r = o.length - 1, s; r >= 0; r--)
+var Ro = Object.defineProperty, Uo = Object.getOwnPropertyDescriptor, M = (o, t, e, n) => {
+  for (var i = n > 1 ? void 0 : n ? Uo(t, e) : t, r = o.length - 1, s; r >= 0; r--)
     (s = o[r]) && (i = (n ? s(t, e, i) : s(i)) || i);
-  return n && i && Uo(t, e, i), i;
+  return n && i && Ro(t, e, i), i;
 };
-const No = Dt(f);
-let A = class extends No {
+const Fo = Dt(f);
+let A = class extends Fo {
   constructor() {
     super(...arguments), this.link = "", this.name = "", this.value = "", this.text = "", this.size = "standard", this.selected = !1, this.fullwidth = !1, this.inactive = !1;
   }
@@ -3787,10 +3820,10 @@ M([
 A = M([
   w("o-chip")
 ], A);
-var Ro = Object.defineProperty, Vo = Object.getOwnPropertyDescriptor, Nt = (o, t, e, n) => {
+var No = Object.defineProperty, Vo = Object.getOwnPropertyDescriptor, Ft = (o, t, e, n) => {
   for (var i = n > 1 ? void 0 : n ? Vo(t, e) : t, r = o.length - 1, s; r >= 0; r--)
     (s = o[r]) && (i = (n ? s(t, e, i) : s(i)) || i);
-  return n && i && Ro(t, e, i), i;
+  return n && i && No(t, e, i), i;
 };
 let dt = class extends f {
   constructor() {
@@ -3816,22 +3849,22 @@ dt.styles = m`
       gap: var(--spacing-s);
     }
   `;
-Nt([
+Ft([
   a({ reflect: !0 })
 ], dt.prototype, "name", 2);
-Nt([
+Ft([
   a({ reflect: !0 })
 ], dt.prototype, "value", 2);
-dt = Nt([
+dt = Ft([
   w("o-chipset")
 ], dt);
-var Zo = Object.defineProperty, qo = Object.getOwnPropertyDescriptor, T = (o, t, e, n) => {
-  for (var i = n > 1 ? void 0 : n ? qo(t, e) : t, r = o.length - 1, s; r >= 0; r--)
+var qo = Object.defineProperty, Zo = Object.getOwnPropertyDescriptor, T = (o, t, e, n) => {
+  for (var i = n > 1 ? void 0 : n ? Zo(t, e) : t, r = o.length - 1, s; r >= 0; r--)
     (s = o[r]) && (i = (n ? s(t, e, i) : s(i)) || i);
-  return n && i && Zo(t, e, i), i;
+  return n && i && qo(t, e, i), i;
 };
 const Wo = Dt(f);
-let L = class extends Wo {
+let P = class extends Wo {
   constructor() {
     super(...arguments), this.name = "", this.value = "", this.type = "", this.dataHref = "", this.text = "", this.selected = !1, this.disabled = !1, this.fullwidth = !1, this.crossIconName = "cross", this.strikethroughImgName = "strikeDiagonal";
   }
@@ -3881,7 +3914,7 @@ let L = class extends Wo {
     `;
   }
 };
-L.styles = m`
+P.styles = m`
     :host {
       cursor: pointer;
       display: inline-flex;
@@ -4009,39 +4042,39 @@ L.styles = m`
   `;
 T([
   a({ reflect: !0 })
-], L.prototype, "name", 2);
+], P.prototype, "name", 2);
 T([
   a({ reflect: !0 })
-], L.prototype, "value", 2);
+], P.prototype, "value", 2);
 T([
   a({ type: String, reflect: !0 })
-], L.prototype, "type", 2);
+], P.prototype, "type", 2);
 T([
   a({ type: String, reflect: !0, attribute: "data-href" })
-], L.prototype, "dataHref", 2);
+], P.prototype, "dataHref", 2);
 T([
   a({ type: String })
-], L.prototype, "text", 2);
+], P.prototype, "text", 2);
 T([
   a({ type: Boolean, reflect: !0 })
-], L.prototype, "selected", 2);
+], P.prototype, "selected", 2);
 T([
   a({ type: Boolean, reflect: !0 })
-], L.prototype, "disabled", 2);
+], P.prototype, "disabled", 2);
 T([
   a({ type: Boolean, reflect: !0 })
-], L.prototype, "fullwidth", 2);
-L = T([
+], P.prototype, "fullwidth", 2);
+P = T([
   w("o-filter-chip")
-], L);
-var Ko = Object.defineProperty, R = (o, t, e, n) => {
+], P);
+var Ko = Object.defineProperty, j = (o, t, e, n) => {
   for (var i = void 0, r = o.length - 1, s; r >= 0; r--)
     (s = o[r]) && (i = s(t, e, i) || i);
   return i && Ko(t, e, i), i;
 };
-const Rt = class Rt extends f {
+const Nt = class Nt extends f {
   constructor() {
-    super(...arguments), this.type = "cart | chevron", this.titleProduct = "", this.volume = "", this.perLiter = "", this.mainPrice = "", this.imageUrl = "https://placehold.co/56x70", this.altImage = "";
+    super(...arguments), this.type = "cart | chevron", this.titleProduct = "", this.volume = "", this.perLiter = "", this.mainPrice = "", this.imageUrl = "https://placehold.co/56x70", this.altImage = "", this.fullwidth = !1;
   }
   onClick() {
     typeof this.onClickTile == "function" && this.onClickTile();
@@ -4070,7 +4103,7 @@ const Rt = class Rt extends f {
   }
   render() {
     return l`
-        <div class="tile">
+        <div class="tile ${this.fullwidth ? "fullwidth" : ""}" @click=${this.onClick}>
             ${this.imageUrl ? l`<img src="${this.imageUrl}" alt="${this.altImage || ""}" />` : ""}
             <div class="info">
                 ${this.titleProduct ? l`<div class="title">${this.titleProduct}</div>` : ""}
@@ -4085,19 +4118,29 @@ const Rt = class Rt extends f {
     `;
   }
 };
-Rt.styles = m`
+Nt.styles = m`
+    :host {
+        display: block;
+        max-width: 100%;
+    }
+    
     .tile {
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-          border-radius: var(--radius-xs);
-          background: var(--color-container-bg-white);
-          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
-          font-family: var(--font-family-loccitane-sans);
-          height: 70px;
-          width: 356px;
-          max-width: 356px;
-          padding: var(--spacing-2-xs) var(--spacing-s) var(--spacing-2-xs) var(--spacing-2-xs);
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            border-radius: var(--radius-xs);
+            background: var(--color-container-bg-white);
+            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+            font-family: var(--font-family-loccitane-sans);
+            height: 70px;
+            width: 356px;
+            max-width: 356px;
+            padding: var(--spacing-2-xs) var(--spacing-s) var(--spacing-2-xs) var(--spacing-2-xs);
+        }
+
+        .tile.fullwidth {
+            width: 100%;
+            max-width: 100%;
         }
 
         .tile img {
@@ -4159,29 +4202,32 @@ Rt.styles = m`
           line-height: var(--line-height-160);
         }
   `;
-let P = Rt;
-R([
+let E = Nt;
+j([
   a({ type: String })
-], P.prototype, "type");
-R([
+], E.prototype, "type");
+j([
   a({ type: String })
-], P.prototype, "titleProduct");
-R([
+], E.prototype, "titleProduct");
+j([
   a({ type: String })
-], P.prototype, "volume");
-R([
+], E.prototype, "volume");
+j([
   a({ type: String })
-], P.prototype, "perLiter");
-R([
+], E.prototype, "perLiter");
+j([
   a({ type: String })
-], P.prototype, "mainPrice");
-R([
+], E.prototype, "mainPrice");
+j([
   a({ type: String })
-], P.prototype, "imageUrl");
-R([
+], E.prototype, "imageUrl");
+j([
   a({ type: String })
-], P.prototype, "altImage");
-R([
+], E.prototype, "altImage");
+j([
+  a({ type: Boolean })
+], E.prototype, "fullwidth");
+j([
   a({ type: Function })
-], P.prototype, "onClickTile");
-customElements.define("mini-tile", P);
+], E.prototype, "onClickTile");
+customElements.define("mini-tile", E);