@florid-kit/components 0.8.45 → 0.8.47

package/index.mjs

@@ -22,7 +22,7 @@ let oe = class {
     return this.cssText;
   }
 };
-const ce = (o) => new oe(typeof o == "string" ? o : o + "", void 0, It), y = (o, ...t) => {
+const ce = (o) => new oe(typeof o == "string" ? o : o + "", void 0, It), m = (o, ...t) => {
   const e = o.length === 1 ? o[0] : t.reduce((n, i, r) => n + ((s) => {
     if (s._$cssResult$ === !0) return s.cssText;
     if (typeof s == "number") return s;
@@ -284,18 +284,18 @@ J.elementStyles = [], J.shadowRootOptions = { mode: "open" }, J[ot("elementPrope
  */
 const it = globalThis, gt = it.trustedTypes, Kt = gt ? gt.createPolicy("lit-html", { createHTML: (o) => o }) : void 0, ie = "$lit$", j = `lit$${Math.random().toFixed(9).slice(2)}$`, ne = "?" + j, ye = `<${ne}>`, W = document, rt = () => W.createComment(""), st = (o) => o === null || typeof o != "object" && typeof o != "function", Bt = Array.isArray, me = (o) => Bt(o) || typeof (o == null ? void 0 : o[Symbol.iterator]) == "function", _t = `[ 	
 \f\r]`, et = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, Gt = /-->/g, Xt = />/g, V = RegExp(`>|${_t}(?:([^\\s"'>=/]+)(${_t}*=${_t}*(?:[^ 	
-\f\r"'\`<>=]|("|')|))|$)`, "g"), Jt = /'/g, Qt = /"/g, re = /^(?:script|style|textarea|title)$/i, xe = (o) => (t, ...e) => ({ _$litType$: o, strings: t, values: e }), l = xe(1), 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(), Z = W.createTreeWalker(W, 129);
 function se(o, t) {
   if (!Bt(o) || !o.hasOwnProperty("raw")) throw Error("invalid template strings array");
   return Kt !== void 0 ? Kt.createHTML(t) : t;
 }
-const we = (o, t) => {
+const xe = (o, t) => {
   const e = o.length - 1, n = [];
   let i, r = t === 2 ? "<svg>" : t === 3 ? "<math>" : "", s = et;
   for (let h = 0; h < e; h++) {
     const c = o[h];
-    let v, g, p = -1, $ = 0;
-    for (; $ < c.length && (s.lastIndex = $, g = s.exec(c), g !== null); ) $ = s.lastIndex, s === et ? g[1] === "!--" ? s = Gt : g[1] !== void 0 ? s = Xt : g[2] !== void 0 ? (re.test(g[2]) && (i = RegExp("</" + g[2], "g")), s = V) : g[3] !== void 0 && (s = V) : s === V ? g[0] === ">" ? (s = i ?? et, p = -1) : g[1] === void 0 ? p = -2 : (p = s.lastIndex - g[2].length, v = g[1], s = g[3] === void 0 ? V : g[3] === '"' ? Qt : Jt) : s === Qt || s === Jt ? s = V : s === Gt || s === Xt ? s = et : (s = V, i = void 0);
+    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);
   }
@@ -306,7 +306,7 @@ class at {
     let i;
     this.parts = [];
     let r = 0, s = 0;
-    const h = t.length - 1, c = this.parts, [v, g] = we(t, e);
+    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) {
       const p = this.el.content.firstChild;
       p.replaceWith(...p.childNodes);
@@ -314,7 +314,7 @@ class at {
     for (; (i = Z.nextNode()) !== null && c.length < h; ) {
       if (i.nodeType === 1) {
         if (i.hasAttributes()) for (const p of i.getAttributeNames()) if (p.endsWith(ie)) {
-          const $ = g[s++], E = i.getAttribute(p).split(j), vt = /([.?@])?(.*)/.exec($);
+          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));
         if (re.test(i.tagName)) {
@@ -554,7 +554,7 @@ kt == null || kt({ LitElement: f });
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const x = (o) => (t, e) => {
+const w = (o) => (t, e) => {
   e !== void 0 ? e.addInitializer(() => {
     customElements.define(o, t);
   }) : customElements.define(o, t);
@@ -599,11 +599,11 @@ function a(o) {
 function K(o) {
   return a({ ...o, state: !0, attribute: !1 });
 }
-const ut = y`
+const ut = m`
 	outline: 1px dashed var(--color-border-primary);
 	outline-offset: 2px;
 `;
-y`
+m`
 	:host * {
 		box-sizing: border-box;
 	}
@@ -820,7 +820,7 @@ class St extends Et {
 }
 St.directiveName = "unsafeSVG", St.resultType = 2;
 const I = Mt(St);
-var oo = Object.defineProperty, io = Object.getOwnPropertyDescriptor, w = (o, t, e, n) => {
+var oo = Object.defineProperty, io = Object.getOwnPropertyDescriptor, x = (o, t, e, n) => {
   for (var i = n > 1 ? void 0 : n ? io(t, e) : t, r = o.length - 1, s; r >= 0; r--)
     (s = o[r]) && (i = (n ? s(t, e, i) : s(i)) || i);
   return n && i && oo(t, e, i), i;
@@ -891,7 +891,7 @@ let b = class extends no {
 };
 Pe(b);
 b.formAssociated = !0;
-b.styles = y`
+b.styles = m`
     :host {
       --button-border: transparent;
       cursor: pointer;
@@ -1080,55 +1080,55 @@ b.styles = y`
     }
     //End icon movment on hover
   `;
-w([
+x([
   a()
 ], b.prototype, "type", 2);
-w([
+x([
   a({ reflect: !0 })
 ], b.prototype, "value", 2);
-w([
+x([
   a({ type: String, reflect: !0 })
 ], b.prototype, "variant", 2);
-w([
+x([
   a({ type: String })
 ], b.prototype, "text", 2);
-w([
+x([
   a({ type: String })
 ], b.prototype, "textsecond", 2);
-w([
+x([
   a({ type: Boolean, reflect: !0 })
 ], b.prototype, "fullwidth", 2);
-w([
+x([
   a({ type: Boolean, reflect: !0 })
 ], b.prototype, "disabled", 2);
-w([
+x([
   a({ type: String, reflect: !0 })
 ], b.prototype, "startIconModel", 2);
-w([
+x([
   a({ type: String, reflect: !0 })
 ], b.prototype, "endIconModel", 2);
-w([
+x([
   a({ type: Boolean, reflect: !0, attribute: "starticon" })
 ], b.prototype, "startIcon", 2);
-w([
+x([
   a({ type: Boolean, reflect: !0, attribute: "endicon" })
 ], b.prototype, "endIcon", 2);
-w([
+x([
   a({ type: String, attribute: "paneltarget", reflect: !0 })
 ], b.prototype, "panelTarget", 2);
-w([
+x([
   a({ type: String })
 ], b.prototype, "href", 2);
-w([
+x([
   a({ type: String })
 ], b.prototype, "target", 2);
-w([
+x([
   a({ type: Boolean, reflect: !0 })
 ], b.prototype, "underlined", 2);
-b = w([
-  x("o-button")
+b = x([
+  w("o-button")
 ], b);
-var ro = Object.defineProperty, so = Object.getOwnPropertyDescriptor, xt = (o, t, e, n) => {
+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);
   return n && i && ro(t, e, i), i;
@@ -1174,7 +1174,7 @@ let Y = class extends f {
     this.label = o, this.requestUpdate();
   }
 };
-Y.styles = y`
+Y.styles = m`
 		:host {
 			display: inline-flex;
 			justify-content: center;
@@ -1240,17 +1240,17 @@ Y.styles = y`
 			white-space: nowrap !important;
 		}
 	`;
-xt([
+wt([
   a({ type: String, reflect: !0 })
 ], Y.prototype, "status", 2);
-xt([
+wt([
   a({ type: String, reflect: !0 })
 ], Y.prototype, "ariaDescribedBy", 2);
-xt([
+wt([
   a({ type: String, reflect: !0 })
 ], Y.prototype, "label", 2);
-Y = xt([
-  x("o-wishlist-button")
+Y = wt([
+  w("o-wishlist-button")
 ], Y);
 /**
  * @license
@@ -1294,7 +1294,7 @@ let C = class extends f {
 		`;
   }
 };
-C.styles = y`
+C.styles = m`
 		:host {
 			display: inline-flex;
 			justify-content: center;
@@ -1534,7 +1534,7 @@ B([
   a({ type: String })
 ], C.prototype, "srLabel", 2);
 C = B([
-  x("o-icon-button")
+  w("o-icon-button")
 ], C);
 var co = Object.defineProperty, ho = Object.getOwnPropertyDescriptor, X = (o, t, e, n) => {
   for (var i = n > 1 ? void 0 : n ? ho(t, e) : t, r = o.length - 1, s; r >= 0; r--)
@@ -1579,7 +1579,7 @@ let D = class extends f {
         `;
   }
 };
-D.styles = y`
+D.styles = m`
         :host([template="standard"]) a {
             color: var(--color-content-action-secondary);
             font-size: var(--font-size-200);
@@ -1686,9 +1686,9 @@ X([
   a({ type: Boolean, reflect: !0 })
 ], D.prototype, "reverseEndIcon", 2);
 D = X([
-  x("o-link")
+  w("o-link")
 ], D);
-var po = Object.defineProperty, uo = Object.getOwnPropertyDescriptor, wt = (o, t, e, n) => {
+var po = Object.defineProperty, uo = Object.getOwnPropertyDescriptor, xt = (o, t, e, n) => {
   for (var i = n > 1 ? void 0 : n ? uo(t, e) : t, r = o.length - 1, s; r >= 0; r--)
     (s = o[r]) && (i = (n ? s(t, e, i) : s(i)) || i);
   return n && i && po(t, e, i), i;
@@ -1720,7 +1720,7 @@ let tt = class extends f {
 		`;
   }
 };
-tt.styles = y`
+tt.styles = m`
 		svg {
 			width: 12px;
 			height: 12px;
@@ -1754,17 +1754,17 @@ tt.styles = y`
 			cursor: pointer;
 		}
 	`;
-wt([
+xt([
   a({ type: Number })
 ], tt.prototype, "rating", 2);
-wt([
+xt([
   a({ type: String })
 ], tt.prototype, "reviewCount", 2);
-wt([
+xt([
   a({ type: String })
 ], tt.prototype, "href", 2);
-tt = wt([
-  x("o-rating")
+tt = xt([
+  w("o-rating")
 ], tt);
 /**
  * @license
@@ -1859,7 +1859,7 @@ class mo extends yo {
         (!t || !(i in t) && n[i] === e[i]) && (n[i] = void 0);
   }
 }
-class xo extends mo {
+class wo extends mo {
   constructor() {
     super(...arguments), this.eventData = {};
   }
@@ -1903,7 +1903,7 @@ class xo extends mo {
     }
   }
 }
-class wo extends xo {
+class xo extends wo {
   apply(t) {
     if (!t)
       return;
@@ -1952,15 +1952,17 @@ class wo extends xo {
       }
   }
 }
-const te = Mt(wo);
-var $o = Object.defineProperty, _o = Object.getOwnPropertyDescriptor, m = (o, t, e, n) => {
+const te = Mt(xo);
+var $o = Object.defineProperty, _o = Object.getOwnPropertyDescriptor, g = (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.previousFocusedElement = null, this.innerFocusedElement = null, this.handleKeyDown = (o) => {
+    super(...arguments), this.open = !1, this.showHeader = !0, this.showFooter = !1, this.showHeaderStartIcon = !1, this.headerTitle = "", this.headerTitleClassName = "panel-title", this.closeButtonLabel = "Close the modal", this.firstButtonLabel = "Close", this.firstButtonVariant = "primary", this.firstButtonProps = {}, this.onFirstButtonClickClose = !1, this.secondButtonLabel = "", this.secondButtonVariant = "secondary", this.secondButtonProps = {}, this.onSecondButtonClickClose = !1, this.disablePortal = !1, this.zIndex = 99, this.initialized = !1, this.showDetail = !1, this.previousFocusedElement = null, this.innerFocusedElement = null, this._onOpenDetail = () => {
+      this.showDetail = !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());
@@ -1969,18 +1971,18 @@ let u = class extends f {
   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();
+    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, g, p, $, E;
+    var i, r, s, h, c, v, y, p, $, E;
     this.innerFocusedElement = document.activeElement || null, this.innerFocusedElement = ((r = (i = this.innerFocusedElement) == null ? void 0 : i.shadowRoot) == null ? void 0 : r.activeElement) || this.innerFocusedElement;
     const t = this.getFocusableElements();
     if (t.length === 0) return;
     const e = t[0], n = t[t.length - 1];
-    o.shiftKey && this.innerFocusedElement === e ? (o.preventDefault(), n.shadowRoot ? (c = (h = (s = n.shadowRoot) == null ? void 0 : s.querySelector(u.focusablesSelector)) == null ? void 0 : h.focus) == null || c.call(h) : (v = n.focus) == null || v.call(n)) : !o.shiftKey && this.innerFocusedElement === n && (o.preventDefault(), e.shadowRoot ? ($ = (p = (g = e.shadowRoot) == null ? void 0 : g.querySelector(u.focusablesSelector)) == null ? void 0 : p.focus) == null || $.call(p) : (E = e.focus) == null || E.call(e));
+    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));
   }
   getFocusableElements() {
     const o = this.renderRoot.querySelector(".panel");
@@ -2019,7 +2021,7 @@ let u = class extends f {
   }
   closePanel() {
     var o;
-    this.open = !1, document.body.style.overflow = "", document.body.removeAttribute("data-side-panel"), (o = this.previousFocusedElement) == null || o.focus(), this.dispatchEvent(
+    this.open = !1, this.showDetail = !1, document.body.style.overflow = "", document.body.removeAttribute("data-side-panel"), (o = this.previousFocusedElement) == null || o.focus(), this.dispatchEvent(
       new CustomEvent("close", { bubbles: !0, composed: !0 })
     );
   }
@@ -2053,6 +2055,33 @@ let u = class extends f {
     this.style.setProperty("--z-overlay", `${this.zIndex || 99}`), this.style.setProperty("--z-panel", `${this.zIndex ? this.zIndex + 1 : 99}`);
   }
   render() {
+    const o = this.showHeader ? l`
+			<div class="header">
+				${this.showHeaderStartIcon ? l`
+				<o-icon-button
+					icon="arrowLeft"
+					size="small"
+					class="return-btn"
+					bgstyle="background-light"
+					@click=${this.handleClosePanel}
+					@keydown=${this.handleClosePanel}
+					aria-label="${this.closeButtonLabel}"
+				></o-icon-button>
+				` : null}
+				<h2 id="panel-title" class="${this.headerTitleClassName}">
+				${this.headerTitle}
+				</h2>
+				<o-icon-button
+				icon="cross"
+				size="small"
+				class="close-btn"
+				bgstyle="background-light"
+				@click=${this.handleClosePanel}
+				@keydown=${this.handleClosePanel}
+				aria-label="${this.closeButtonLabel}"
+				></o-icon-button>
+			</div>
+			` : null;
     return l`
 			<div class="overlay" style="z-index: ${this.zIndex}" @click=${this.handleClosePanel}></div>
 			<div
@@ -2064,18 +2093,18 @@ let u = class extends f {
 				tabindex="-1"
 			>
 
-				${this.showHeader ? l`
-					<div class="header">
-						${this.showHeaderStartIcon ? l`
-							<o-icon-button icon="arrowLeft" size="small" class="return-btn" bgstyle="background-light" @click=${this.handleClosePanel} @keydown=${this.handleClosePanel} aria-label="${this.closeButtonLabel}"></o-icon-button>
-						` : null}
-						<h2 id="panel-title" class="${this.headerTitleClassName}">${this.headerTitle}</h2>
-						<o-icon-button icon="cross" size="small" class="close-btn" bgstyle="background-light" @click=${this.handleClosePanel} @keydown=${this.handleClosePanel} aria-label="${this.closeButtonLabel}"></o-icon-button>
-					</div>
-					` : null}
+				${o}
 
-				<div class="content">
-					<slot></slot>
+				<div class="content ${this.showDetail ? "with-detail" : ""}">
+				
+				${this.showDetail ? l`
+						<div class="detail-view">
+							${o}
+							<div class="detail-content">
+								<slot name="detail"></slot>
+							</div>
+						</div>
+					` : l`<slot></slot>`}
 				</div>
 
 				${this.showFooter ? l`
@@ -2107,7 +2136,7 @@ let u = class extends f {
 		`;
   }
 };
-u.styles = y`
+u.styles = m`
 		:host {
 			--z-overlay: 99;
 			--z-panel: 100;
@@ -2218,12 +2247,23 @@ u.styles = y`
 			flex: 1 1 auto;
 			overflow-y: auto;
 			overflow-x: hidden;
-			padding: 16px;
+			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);
+			}
 		}
 
 		.footer {
 			flex: 0 0 auto;
-			padding: 16px;
+			padding: var(--spacing-xl);
 			border-top: var(--border-050) solid var(--color-border-tertiary);
 			display: flex;
     		flex-direction: column;
@@ -2255,65 +2295,84 @@ u.styles = y`
 				--line-height: var(--line-height-280);
 			}
 		}
+		
+		@keyframes slideInRight {
+			from {
+				transform: translateX(100%);
+			}
+			to {
+				transform: translateX(0%);
+			}
+		}
+		
+		.detail-view {
+			animation: slideInRight 0.3s ease-out both;
+		}
+		.detail-content {
+			padding: var(--spacing-xl);
+		}
 	`;
 u.focusablesSelector = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"]), o-icon-button, o-button';
 u.focusablesCustomElementsSelector = "o-icon-button, o-button";
-m([
+g([
   a({ type: Boolean, reflect: !0 })
 ], u.prototype, "open", 2);
-m([
+g([
   a({ type: Boolean, reflect: !0 })
 ], u.prototype, "showHeader", 2);
-m([
+g([
   a({ type: Boolean, reflect: !0 })
 ], u.prototype, "showFooter", 2);
-m([
+g([
   a({ type: Boolean, reflect: !0 })
 ], u.prototype, "showHeaderStartIcon", 2);
-m([
+g([
   a({ type: String, reflect: !0 })
 ], u.prototype, "headerTitle", 2);
-m([
+g([
   a({ type: String, reflect: !0 })
 ], u.prototype, "headerTitleClassName", 2);
-m([
+g([
   a({ type: String, reflect: !0 })
 ], u.prototype, "closeButtonLabel", 2);
-m([
+g([
   a({ type: String, reflect: !0 })
 ], u.prototype, "firstButtonLabel", 2);
-m([
+g([
   a({ type: String, reflect: !0 })
 ], u.prototype, "firstButtonVariant", 2);
-m([
+g([
   a({ type: Object, reflect: !0 })
 ], u.prototype, "firstButtonProps", 2);
-m([
+g([
   a({ type: Boolean, reflect: !0 })
 ], u.prototype, "onFirstButtonClickClose", 2);
-m([
+g([
   a({ type: String, reflect: !0 })
 ], u.prototype, "secondButtonLabel", 2);
-m([
+g([
   a({ type: String, reflect: !0 })
 ], u.prototype, "secondButtonVariant", 2);
-m([
+g([
   a({ type: Object, reflect: !0 })
 ], u.prototype, "secondButtonProps", 2);
-m([
+g([
   a({ type: Boolean, reflect: !0 })
 ], u.prototype, "onSecondButtonClickClose", 2);
-m([
+g([
   a({ type: Boolean, reflect: !0 })
 ], u.prototype, "disablePortal", 2);
-m([
+g([
   a({ type: Number, reflect: !0 })
 ], u.prototype, "zIndex", 2);
-m([
+g([
   a({ type: Boolean, reflect: !0 })
 ], u.prototype, "initialized", 2);
-u = m([
-  x("o-side-panel")
+g([
+  a({ type: Boolean })
+], u.prototype, "showDetail", 2);
+u = g([
+  w("o-side-panel")
 ], u);
 var Co = Object.defineProperty, ko = Object.getOwnPropertyDescriptor, N = (o, t, e, n) => {
   for (var i = n > 1 ? void 0 : n ? ko(t, e) : t, r = o.length - 1, s; r >= 0; r--)
@@ -2397,7 +2456,7 @@ let O = class extends f {
     `;
   }
 };
-O.styles = y`
+O.styles = m`
     :host {
       display: flex;
       gap: 5px;
@@ -2525,7 +2584,7 @@ N([
   K()
 ], O.prototype, "focusedIndex", 2);
 O = N([
-  x("thumbnail-navigation")
+  w("thumbnail-navigation")
 ], O);
 var Ao = Object.defineProperty, Eo = Object.getOwnPropertyDescriptor, jt = (o, t, e, n) => {
   for (var i = n > 1 ? void 0 : n ? Eo(t, e) : t, r = o.length - 1, s; r >= 0; r--)
@@ -2542,7 +2601,7 @@ let lt = class extends f {
     `;
   }
 };
-lt.styles = y`
+lt.styles = m`
     .tag {
       display: inline-block;
       padding: var(--spacing-2-xs) var(--spacing-s);
@@ -2590,7 +2649,7 @@ lt.styles = y`
       background-color: var(--color-content-success);
     }
 
-    :host(:not([type$="percentage"])) .tag, {
+    :host(:not([type$="percentage"])) .tag {
       @media (max-width: 375px) {
         overflow: hidden;
         white-space: nowrap;
@@ -2607,7 +2666,7 @@ jt([
   a({ type: String, reflect: !0 })
 ], lt.prototype, "bgstyle", 2);
 lt = jt([
-  x("o-tag")
+  w("o-tag")
 ], lt);
 var So = Object.defineProperty, Lo = Object.getOwnPropertyDescriptor, Ut = (o, t, e, n) => {
   for (var i = n > 1 ? void 0 : n ? Lo(t, e) : t, r = o.length - 1, s; r >= 0; r--)
@@ -2627,7 +2686,7 @@ let ct = class extends f {
     `;
   }
 };
-ct.styles = y`
+ct.styles = m`
     .tooltip {
         position: relative;
         display: inline-block;
@@ -2727,7 +2786,7 @@ Ut([
   a({ type: String, reflect: !0 })
 ], ct.prototype, "text", 2);
 ct = Ut([
-  x("o-tooltip")
+  w("o-tooltip")
 ], ct);
 var Po = Object.defineProperty, Io = Object.getOwnPropertyDescriptor, H = (o, t, e, n) => {
   for (var i = n > 1 ? void 0 : n ? Io(t, e) : t, r = o.length - 1, s; r >= 0; r--)
@@ -2857,7 +2916,7 @@ let S = class extends f {
     `;
   }
 };
-S.styles = y`
+S.styles = m`
 		:host {
 			display: inline-block;
 			position: relative;
@@ -3022,7 +3081,7 @@ H([
   K()
 ], S.prototype, "menuWidth", 2);
 S = H([
-  x("o-dropdown")
+  w("o-dropdown")
 ], S);
 var Oo = Object.getOwnPropertyDescriptor, Bo = (o, t, e, n) => {
   for (var i = n > 1 ? void 0 : n ? Oo(t, e) : t, r = o.length - 1, s; r >= 0; r--)
@@ -3034,7 +3093,7 @@ let Lt = class extends f {
     return l` <span class="dots"></span> `;
   }
 };
-Lt.styles = y`
+Lt.styles = m`
     :host {
       display: flex;
       align-items: center;
@@ -3087,7 +3146,7 @@ Lt.styles = y`
     }
   `;
 Lt = Bo([
-  x("o-dots")
+  w("o-dots")
 ], Lt);
 var zo = Object.defineProperty, Do = Object.getOwnPropertyDescriptor, z = (o, t, e, n) => {
   for (var i = n > 1 ? void 0 : n ? Do(t, e) : t, r = o.length - 1, s; r >= 0; r--)
@@ -3231,7 +3290,7 @@ let k = class extends f {
 		`;
   }
 };
-k.styles = y`
+k.styles = m`
 		:host {
 			display: inline-block;
 			position: relative;
@@ -3435,7 +3494,7 @@ z([
   K()
 ], k.prototype, "menuWidth", 2);
 k = z([
-  x("o-dropdown-variant")
+  w("o-dropdown-variant")
 ], k);
 /**
  * @license
@@ -3491,7 +3550,7 @@ let ht = class extends f {
     return o ? l`<a href="${_(this.option.url)}" class="reassurance-item clickable">${e}</a>` : l`<div class="reassurance-item">${e}</div>`;
   }
 };
-ht.styles = y`
+ht.styles = m`
     :host {
       display: inline-block;
       position: relative;
@@ -3580,7 +3639,7 @@ Ft([
   a({ type: Number, reflect: !0 })
 ], ht.prototype, "imageSize", 2);
 ht = Ft([
-  x("o-reassurance")
+  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--)
@@ -3611,7 +3670,7 @@ let A = class extends No {
     `;
   }
 };
-A.styles = y`
+A.styles = m`
     :host {
       cursor: pointer;
       display: inline-flex;
@@ -3726,7 +3785,7 @@ M([
   a({ type: Boolean, reflect: !0 })
 ], A.prototype, "inactive", 2);
 A = M([
-  x("o-chip")
+  w("o-chip")
 ], A);
 var Ro = Object.defineProperty, Vo = Object.getOwnPropertyDescriptor, Nt = (o, t, e, n) => {
   for (var i = n > 1 ? void 0 : n ? Vo(t, e) : t, r = o.length - 1, s; r >= 0; r--)
@@ -3749,7 +3808,7 @@ let dt = class extends f {
     `;
   }
 };
-dt.styles = y`
+dt.styles = m`
     :host {
       display: flex;
       flex-direction: row;
@@ -3764,7 +3823,7 @@ Nt([
   a({ reflect: !0 })
 ], dt.prototype, "value", 2);
 dt = Nt([
-  x("o-chipset")
+  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--)
@@ -3822,7 +3881,7 @@ let L = class extends Wo {
     `;
   }
 };
-L.styles = y`
+L.styles = m`
     :host {
       cursor: pointer;
       display: inline-flex;
@@ -3973,7 +4032,7 @@ T([
   a({ type: Boolean, reflect: !0 })
 ], L.prototype, "fullwidth", 2);
 L = T([
-  x("o-filter-chip")
+  w("o-filter-chip")
 ], L);
 var Ko = Object.defineProperty, R = (o, t, e, n) => {
   for (var i = void 0, r = o.length - 1, s; r >= 0; r--)
@@ -3985,7 +4044,7 @@ const Rt = class Rt extends f {
     super(...arguments), this.type = "cart | chevron", this.titleProduct = "", this.volume = "", this.perLiter = "", this.mainPrice = "", this.imageUrl = "https://placehold.co/56x70", this.altImage = "";
   }
   onClick() {
-    typeof this.onClickTile == "function" && this.onClickTile();
+    typeof this.onClickTile == "function" && this.dispatchEvent(new CustomEvent("tile-click", { bubbles: !0, composed: !0 }));
   }
   get icons() {
     return this.type === "chevron" ? l`
@@ -4026,13 +4085,13 @@ const Rt = class Rt extends f {
     `;
   }
 };
-Rt.styles = y`
+Rt.styles = m`
     .tile {
           display: flex;
           align-items: center;
           justify-content: space-between;
           border-radius: var(--radius-xs);
-          background: var(--colors-blanc-brule-500);
+          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;