@florid-kit/components 0.9.18 → 0.9.19

package/index.mjs

@@ -3,16 +3,16 @@
  * Copyright 2019 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const $t = globalThis, Mt = $t.ShadowRoot && ($t.ShadyCSS === void 0 || $t.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, Tt = Symbol(), Qt = /* @__PURE__ */ new WeakMap();
+const $t = globalThis, Tt = $t.ShadowRoot && ($t.ShadyCSS === void 0 || $t.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, Mt = Symbol(), Qt = /* @__PURE__ */ new WeakMap();
 let he = class {
   constructor(t, e, n) {
-    if (this._$cssResult$ = !0, n !== Tt) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
+    if (this._$cssResult$ = !0, n !== Mt) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
     this.cssText = t, this.t = e;
   }
   get styleSheet() {
     let t = this.o;
     const e = this.t;
-    if (Mt && t === void 0) {
+    if (Tt && t === void 0) {
       const n = e !== void 0 && e.length === 1;
       n && (t = Qt.get(e)), t === void 0 && ((this.o = t = new CSSStyleSheet()).replaceSync(this.cssText), n && Qt.set(e, t));
     }
@@ -22,20 +22,20 @@ let he = class {
     return this.cssText;
   }
 };
-const ye = (o) => new he(typeof o == "string" ? o : o + "", void 0, Tt), f = (o, ...t) => {
+const ye = (o) => new he(typeof o == "string" ? o : o + "", void 0, Mt), f = (o, ...t) => {
   const e = o.length === 1 ? o[0] : t.reduce((n, i, r) => n + ((s) => {
     if (s._$cssResult$ === !0) return s.cssText;
     if (typeof s == "number") return s;
     throw Error("Value passed to 'css' function must be a 'css' function result: " + s + ". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.");
   })(i) + o[r + 1], o[0]);
-  return new he(e, o, Tt);
+  return new he(e, o, Mt);
 }, me = (o, t) => {
-  if (Mt) o.adoptedStyleSheets = t.map((e) => e instanceof CSSStyleSheet ? e : e.styleSheet);
+  if (Tt) o.adoptedStyleSheets = t.map((e) => e instanceof CSSStyleSheet ? e : e.styleSheet);
   else for (const e of t) {
     const n = document.createElement("style"), i = $t.litNonce;
     i !== void 0 && n.setAttribute("nonce", i), n.textContent = e.cssText, o.appendChild(n);
   }
-}, Yt = Mt ? (o) => o : (o) => o instanceof CSSStyleSheet ? ((t) => {
+}, Yt = Tt ? (o) => o : (o) => o instanceof CSSStyleSheet ? ((t) => {
   let e = "";
   for (const n of t.cssRules) e += n.cssText;
   return ye(e);
@@ -294,8 +294,8 @@ const Pe = (o, t) => {
   let i, r = t === 2 ? "<svg>" : t === 3 ? "<math>" : "", s = lt;
   for (let h = 0; h < e; h++) {
     const c = o[h];
-    let m, w, v = -1, R = 0;
-    for (; R < c.length && (s.lastIndex = R, w = s.exec(c), w !== null); ) R = s.lastIndex, s === 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);
+    let m, w, v = -1, N = 0;
+    for (; N < c.length && (s.lastIndex = N, w = s.exec(c), w !== null); ) N = 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 + Ae : v >= 0 ? (n.push(m), c.slice(0, v) + de + c.slice(v) + K + Z) : c + K + (v === -2 ? h : Z);
   }
@@ -314,15 +314,15 @@ class vt {
     for (; (i = Q.nextNode()) !== null && c.length < h; ) {
       if (i.nodeType === 1) {
         if (i.hasAttributes()) for (const v of i.getAttributeNames()) if (v.endsWith(de)) {
-          const R = w[s++], Z = i.getAttribute(v).split(K), wt = /([.?@])?(.*)/.exec(R);
+          const N = w[s++], Z = i.getAttribute(v).split(K), wt = /([.?@])?(.*)/.exec(N);
           c.push({ type: 1, index: r, name: wt[2], strings: Z, ctor: wt[1] === "." ? Oe : wt[1] === "?" ? ze : wt[1] === "@" ? Be : St }), i.removeAttribute(v);
         } else v.startsWith(K) && (c.push({ type: 6, index: r }), i.removeAttribute(v));
         if (ue.test(i.tagName)) {
-          const v = i.textContent.split(K), R = v.length - 1;
-          if (R > 0) {
+          const v = i.textContent.split(K), N = v.length - 1;
+          if (N > 0) {
             i.textContent = _t ? _t.emptyScript : "";
-            for (let Z = 0; Z < R; Z++) i.append(v[Z], pt()), Q.nextNode(), c.push({ type: 2, index: ++r });
-            i.append(v[R], pt());
+            for (let Z = 0; Z < N; Z++) i.append(v[Z], pt()), Q.nextNode(), c.push({ type: 2, index: ++r });
+            i.append(v[N], pt());
           }
         }
       } else if (i.nodeType === 8) if (i.data === pe) c.push({ type: 2, index: r });
@@ -564,7 +564,7 @@ const y = (o) => (t, e) => {
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const Me = { attribute: !0, type: String, converter: Ct, reflect: !1, hasChanged: jt }, Te = (o = Me, t, e) => {
+const Te = { attribute: !0, type: String, converter: Ct, reflect: !1, hasChanged: jt }, Me = (o = Te, t, e) => {
   const { kind: n, metadata: i } = e;
   let r = globalThis.litPropertyMetadata.get(i);
   if (r === void 0 && globalThis.litPropertyMetadata.set(i, r = /* @__PURE__ */ new Map()), n === "setter" && ((o = Object.create(o)).wrapped = !0), r.set(e.name, o), n === "accessor") {
@@ -586,7 +586,7 @@ const Me = { attribute: !0, type: String, converter: Ct, reflect: !1, hasChanged
   throw Error("Unsupported decorator location: " + n);
 };
 function a(o) {
-  return (t, e) => typeof e == "object" ? Te(o, t, e) : ((n, i, r) => {
+  return (t, e) => typeof e == "object" ? Me(o, t, e) : ((n, i, r) => {
     const s = i.hasOwnProperty(r);
     return i.constructor.createProperty(r, n), s ? Object.getOwnPropertyDescriptor(i, r) : void 0;
   })(o, t, e);
@@ -772,7 +772,7 @@ const Ne = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="h
 </svg>
 `, bo = `<svg xmlns="http://www.w3.org/2000/svg" width="10" height="8" viewBox="0 0 10 8" fill="none">
 <path d="M1 4.5415L3 6.5415L9 0.541504" stroke="#FBF9F6" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>`, N = {
+</svg>`, F = {
   wishlist: Ne,
   playerv: Fe,
   chevronRight: Ue,
@@ -1048,13 +1048,13 @@ const le = Vt(So);
  * Copyright 2018 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const k = (o) => o ?? d;
+const S = (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 {
+let A = 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 = "";
   }
@@ -1062,7 +1062,7 @@ let S = class extends u {
     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";
+    const o = F[this.icon] ?? "", t = `icon-${this.icon}`, e = o.replace("<svg", '<svg aria-hidden="true" focusable="false" part="svg"').replace(/<path\b/g, '<path part="icon-path"').replace(/<g\b/g, '<g part="icon-group"').replace(/<circle\b/g, '<circle part="icon-circle"'), 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}">	
@@ -1071,7 +1071,7 @@ let S = class extends u {
 			` : l`
 				<button
 					type="button"
-					aria-label=${k(i)}
+					aria-label=${S(i)}
 					class="icon-button ${this.size} ${this.bgstyle} ${this.status} ${t}"
 					?disabled="${this.disabled}"
 				>
@@ -1082,7 +1082,7 @@ let S = class extends u {
 		`;
   }
 };
-S.styles = f`
+A.styles = f`
 		:host {
 			display: inline-flex;
 			justify-content: center;
@@ -1296,34 +1296,34 @@ S.styles = f`
 	`;
 H([
   a({ type: String, reflect: !0 })
-], S.prototype, "bgstyle", 2);
+], A.prototype, "bgstyle", 2);
 H([
   a({ type: String, reflect: !0 })
-], S.prototype, "size", 2);
+], A.prototype, "size", 2);
 H([
   a({ type: String, reflect: !0 })
-], S.prototype, "status", 2);
+], A.prototype, "status", 2);
 H([
   a({ type: String, reflect: !0 })
-], S.prototype, "type", 2);
+], A.prototype, "type", 2);
 H([
   a({ type: String })
-], S.prototype, "strokewidth", 2);
+], A.prototype, "strokewidth", 2);
 H([
   a({ type: String })
-], S.prototype, "icon", 2);
+], A.prototype, "icon", 2);
 H([
   a({ type: Boolean, reflect: !0 })
-], S.prototype, "disabled", 2);
+], A.prototype, "disabled", 2);
 H([
   a({ type: Boolean })
-], S.prototype, "showSrLabel", 2);
+], A.prototype, "showSrLabel", 2);
 H([
   a({ type: String })
-], S.prototype, "srLabel", 2);
-S = H([
+], A.prototype, "srLabel", 2);
+A = H([
   y("o-icon-button")
-], S);
+], A);
 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);
@@ -1875,7 +1875,7 @@ let b = class extends zo {
   renderIcon(o) {
     const t = o === "start" ? this.startIconModel : this.endIconModel;
     if (!t) return d;
-    const e = N[t].replace(
+    const e = F[t].replace(
       "<svg",
       '<svg aria-hidden="true" focusable="false" part="svg"'
     );
@@ -2198,7 +2198,7 @@ let rt = class extends u {
     (o.key === "Enter" || o.key === " ") && (o.preventDefault(), this.toggleStatus());
   }
   render() {
-    const o = N.wishlist.replace(
+    const o = F.wishlist.replace(
       "<svg",
       '<svg aria-hidden="true" focusable="false" part="svg"'
     );
@@ -2296,12 +2296,12 @@ At([
 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--)
+var Ho = Object.defineProperty, To = Object.getOwnPropertyDescriptor, ot = (o, t, e, n) => {
+  for (var i = n > 1 ? void 0 : n ? To(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 {
+let U = class extends u {
   constructor() {
     super(...arguments), this.href = "", this.target = "", this.template = "standard", this.inverse = !1, this.endIcon = !1, this.reverseEndIcon = !1;
   }
@@ -2313,7 +2313,7 @@ let F = class extends u {
     return l`
             <a 
                 href="${o}" 
-                target="${k(this.target || void 0)}"
+                target="${S(this.target || void 0)}"
                 @click="${this._handleClick}"
             >
                 ${this.endIcon && this.reverseEndIcon ? l`
@@ -2339,7 +2339,7 @@ let F = class extends u {
         `;
   }
 };
-F.styles = f`
+U.styles = f`
         :host([template="standard"]) a {
             color: var(--color-content-action-secondary);
             font-size: var(--font-size-200);
@@ -2429,29 +2429,29 @@ F.styles = f`
     `;
 ot([
   a({ type: String })
-], F.prototype, "href", 2);
+], U.prototype, "href", 2);
 ot([
   a({ type: String })
-], F.prototype, "target", 2);
+], U.prototype, "target", 2);
 ot([
   a({ type: String, reflect: !0 })
-], F.prototype, "template", 2);
+], U.prototype, "template", 2);
 ot([
   a({ type: Boolean, reflect: !0 })
-], F.prototype, "inverse", 2);
+], U.prototype, "inverse", 2);
 ot([
   a({ type: Boolean, reflect: !0 })
-], F.prototype, "endIcon", 2);
+], U.prototype, "endIcon", 2);
 ot([
   a({ type: Boolean, reflect: !0 })
-], F.prototype, "reverseEndIcon", 2);
-F = ot([
+], U.prototype, "reverseEndIcon", 2);
+U = ot([
   y("o-link")
-], F);
-var To = Object.defineProperty, jo = Object.getOwnPropertyDescriptor, Et = (o, t, e, n) => {
+], U);
+var Mo = 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;
+  return n && i && Mo(t, e, i), i;
 };
 let st = class extends u {
   constructor() {
@@ -2472,7 +2472,7 @@ let st = class extends u {
 			<div class="rating">
 			<div class="stars">
 				${o.map(
-      (t) => l`<span class="star">${C(N[t] ?? "")}</span>`
+      (t) => l`<span class="star">${C(F[t] ?? "")}</span>`
     )}
 			</div>
 			${this.reviewCount != null && this.href != null ? l`<o-link template="review" href="${this.href}">${this.reviewCount}</o-link>` : null}
@@ -2954,7 +2954,7 @@ Kt([
 bt = Kt([
   y("o-tooltip")
 ], bt);
-var Zo = Object.defineProperty, Ko = Object.getOwnPropertyDescriptor, U = (o, t, e, n) => {
+var Zo = Object.defineProperty, Ko = Object.getOwnPropertyDescriptor, V = (o, t, e, n) => {
   for (var i = n > 1 ? void 0 : n ? Ko(t, e) : t, r = o.length - 1, s; r >= 0; r--)
     (s = o[r]) && (i = (n ? s(t, e, i) : s(i)) || i);
   return n && i && Zo(t, e, i), i;
@@ -3025,7 +3025,7 @@ let z = class extends u {
     this.options.length > 0 && (this.options.some((e) => e.value === this.value) || (this.value = this.options[0].value));
   }
   render() {
-    const o = N.checkstroke.replace(
+    const o = F.checkstroke.replace(
       "<svg",
       '<svg aria-hidden="true" focusable="false" part="svg"'
     ), t = this.options.find((e) => e.value === this.value);
@@ -3222,31 +3222,31 @@ z.styles = f`
 			display: none;
 		}
 	`;
-U([
+V([
   a({ type: Array, reflect: !0 })
 ], z.prototype, "options", 2);
-U([
+V([
   a({ type: String, reflect: !0 })
 ], z.prototype, "value", 2);
-U([
+V([
   a({ type: String, reflect: !0 })
 ], z.prototype, "name", 2);
-U([
+V([
   a({ type: Boolean, reflect: !0 })
 ], z.prototype, "disabled", 2);
-U([
+V([
   a({ type: String, reflect: !0 })
 ], z.prototype, "width", 2);
-U([
+V([
   et()
 ], z.prototype, "open", 2);
-U([
+V([
   et()
 ], z.prototype, "activeIndex", 2);
-U([
+V([
   et()
 ], z.prototype, "menuWidth", 2);
-z = U([
+z = V([
   y("o-dropdown")
 ], z);
 var Wo = Object.getOwnPropertyDescriptor, Go = (o, t, e, n) => {
@@ -3314,12 +3314,12 @@ Ht.styles = f`
 Ht = Go([
   y("o-dots")
 ], Ht);
-var Xo = Object.defineProperty, Jo = Object.getOwnPropertyDescriptor, M = (o, t, e, n) => {
+var Xo = Object.defineProperty, Jo = Object.getOwnPropertyDescriptor, T = (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 && Xo(t, e, i), i;
 };
-let A = class extends u {
+let E = class extends u {
   constructor() {
     super(...arguments), this.options = [], this.value = "", this.name = "", this.additionaltext = "+X variant(s)", this.disabled = !1, this.width = "100%", this.open = !1, this.activeIndex = -1, this.menuWidth = "", this._handleOutsideClick = (o) => {
       this.contains(o.target) || (this.open = !1, this.activeIndex = -1);
@@ -3385,7 +3385,7 @@ let A = class extends u {
     this.options.length > 0 && (this.options.some((t) => t.value === this.value) || (this.value = this.options[0].value));
   }
   render() {
-    const o = N.checkstroke.replace(
+    const o = F.checkstroke.replace(
       "<svg",
       '<svg aria-hidden="true" focusable="false" part="svg"'
     ), t = this.options.find((e) => e.value === this.value);
@@ -3403,7 +3403,7 @@ let A = class extends u {
 				?disabled=${this.disabled}
 				class="btn-dropdown"
 			>
-				<img alt="${k(t == null ? void 0 : t.label)}" src="${k(t == null ? void 0 : t.imgurl)}" />
+				<img alt="${S(t == null ? void 0 : t.label)}" src="${S(t == null ? void 0 : t.imgurl)}" />
 				<span id="dropdown-label" class="label">
 					${t ? t.label : "Select an option"}
 				</span>
@@ -3438,11 +3438,11 @@ let A = class extends u {
 									class="${n === this.activeIndex ? "active" : ""} ${e.disabled ? "disabled" : ""}"
 									@click=${() => this.selectOption(e)}
 								>
-									<a href="${k(e.url)}">
-										<img alt="${k(e.label)}" src="${k(e.imgurl)}" />
+									<a href="${S(e.url)}">
+										<img alt="${S(e.label)}" src="${S(e.imgurl)}" />
 										<span class="label">${e.label}</span>
 										<div class="right">
-											<span class="additional-text">${k(e.additionaltext)}</span>
+											<span class="additional-text">${S(e.additionaltext)}</span>
 											${e.value === this.value && !e.additionaltext ? l`
 												<span class="check">${C(o)}</span>` : null}
 										</div>
@@ -3456,7 +3456,7 @@ let A = class extends u {
 		`;
   }
 };
-A.styles = f`
+E.styles = f`
 		:host {
 			display: inline-block;
 			position: relative;
@@ -3632,36 +3632,36 @@ A.styles = f`
 			display: none;
 		}
 	`;
-M([
+T([
   a({ type: Array, reflect: !0 })
-], A.prototype, "options", 2);
-M([
+], E.prototype, "options", 2);
+T([
   a({ type: String, reflect: !0 })
-], A.prototype, "value", 2);
-M([
+], E.prototype, "value", 2);
+T([
   a({ type: String, reflect: !0 })
-], A.prototype, "name", 2);
-M([
+], E.prototype, "name", 2);
+T([
   a({ type: String, reflect: !0 })
-], A.prototype, "additionaltext", 2);
-M([
+], E.prototype, "additionaltext", 2);
+T([
   a({ type: Boolean, reflect: !0 })
-], A.prototype, "disabled", 2);
-M([
+], E.prototype, "disabled", 2);
+T([
   a({ type: String, reflect: !0 })
-], A.prototype, "width", 2);
-M([
+], E.prototype, "width", 2);
+T([
   et()
-], A.prototype, "open", 2);
-M([
+], E.prototype, "open", 2);
+T([
   et()
-], A.prototype, "activeIndex", 2);
-M([
+], E.prototype, "activeIndex", 2);
+T([
   et()
-], A.prototype, "menuWidth", 2);
-A = M([
+], E.prototype, "menuWidth", 2);
+E = T([
   y("o-dropdown-variant")
-], A);
+], E);
 /**
  * @license
  * Copyright 2018 Google LLC
@@ -3707,13 +3707,13 @@ let gt = class extends u {
       width: `${this.imageSize}px`,
       height: `${this.imageSize}px`
     }, e = l`
-      ${this.option.imgurl ? l`<img src="${this.option.imgurl}" alt="${k(this.option.title)}" aria-hidden="true" style=${Yo(t)} />` : ""}
+      ${this.option.imgurl ? l`<img src="${this.option.imgurl}" alt="${S(this.option.title)}" aria-hidden="true" style=${Yo(t)} />` : ""}
       <div class="m-reassurance-content">
-        <h3 class="a-reassurance-text">${k(this.option.title)}</h3>
-        <p class="a-reassurance-description">${k(this.option.description)}</p>
+        <h3 class="a-reassurance-text">${S(this.option.title)}</h3>
+        <p class="a-reassurance-description">${S(this.option.description)}</p>
       </div>
     `;
-    return o ? l`<a href="${k(this.option.url)}" class="reassurance-item clickable">${e}</a>` : l`<div class="reassurance-item">${e}</div>`;
+    return o ? l`<a href="${S(this.option.url)}" class="reassurance-item clickable">${e}</a>` : l`<div class="reassurance-item">${e}</div>`;
   }
 };
 gt.styles = f`
@@ -3807,13 +3807,13 @@ Wt([
 gt = Wt([
   y("o-reassurance")
 ], gt);
-var oi = Object.defineProperty, ii = Object.getOwnPropertyDescriptor, V = (o, t, e, n) => {
+var oi = Object.defineProperty, ii = Object.getOwnPropertyDescriptor, q = (o, t, e, n) => {
   for (var i = n > 1 ? void 0 : n ? ii(t, e) : t, r = o.length - 1, s; r >= 0; r--)
     (s = o[r]) && (i = (n ? s(t, e, i) : s(i)) || i);
   return n && i && oi(t, e, i), i;
 };
 const ni = Ft(u);
-let E = class extends ni {
+let L = 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;
   }
@@ -3836,7 +3836,7 @@ let E = class extends ni {
     `;
   }
 };
-E.styles = f`
+L.styles = f`
     :host {
       cursor: pointer;
       display: inline-flex;
@@ -3926,33 +3926,33 @@ E.styles = f`
       align-items: center;
     }
   `;
-V([
+q([
   a({ type: String, reflect: !0 })
-], E.prototype, "link", 2);
-V([
+], L.prototype, "link", 2);
+q([
   a({ reflect: !0 })
-], E.prototype, "name", 2);
-V([
+], L.prototype, "name", 2);
+q([
   a({ reflect: !0 })
-], E.prototype, "value", 2);
-V([
+], L.prototype, "value", 2);
+q([
   a({ type: String })
-], E.prototype, "text", 2);
-V([
+], L.prototype, "text", 2);
+q([
   a({ type: String, reflect: !0 })
-], E.prototype, "size", 2);
-V([
+], L.prototype, "size", 2);
+q([
   a({ type: Boolean, reflect: !0 })
-], E.prototype, "selected", 2);
-V([
+], L.prototype, "selected", 2);
+q([
   a({ type: Boolean, reflect: !0 })
-], E.prototype, "fullwidth", 2);
-V([
+], L.prototype, "fullwidth", 2);
+q([
   a({ type: Boolean, reflect: !0 })
-], E.prototype, "inactive", 2);
-E = V([
+], L.prototype, "inactive", 2);
+L = q([
   y("o-chip")
-], E);
+], L);
 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);
@@ -3963,7 +3963,7 @@ let yt = class extends u {
     super(), this.name = "", this.value = "", this.addEventListener("selected", this.onChipSelected);
   }
   onChipSelected(o) {
-    const t = o.target instanceof E ? o.target : null;
+    const t = o.target instanceof L ? 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);
     }));
@@ -3991,13 +3991,13 @@ Gt([
 yt = Gt([
   y("o-chipset")
 ], yt);
-var ai = Object.defineProperty, li = Object.getOwnPropertyDescriptor, T = (o, t, e, n) => {
+var ai = Object.defineProperty, li = Object.getOwnPropertyDescriptor, M = (o, t, e, n) => {
   for (var i = n > 1 ? void 0 : n ? li(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 && ai(t, e, i), i;
 };
 const ci = Ft(u);
-let L = class extends ci {
+let P = class extends ci {
   constructor() {
     super(...arguments), this.name = "", this.value = "", this.type = "", this.text = "", this.selected = !1, this.disabled = !1, this.fullwidth = !1, this.crossIconName = "cross", this.strikethroughImgName = "strikeDiagonal";
   }
@@ -4009,7 +4009,7 @@ let L = class extends ci {
     this.dispatchEvent(e), e.defaultPrevented && o.preventDefault(), this.selected = t.selected;
   }
   crossIcon() {
-    const o = N[this.crossIconName].replace(
+    const o = F[this.crossIconName].replace(
       "<svg",
       '<svg aria-hidden="true" focusable="false" part="svg"'
     ).replace(/stroke=[#"'a-z1-9]*/gi, "");
@@ -4047,7 +4047,7 @@ let L = class extends ci {
     `;
   }
 };
-L.styles = f`
+P.styles = f`
     :host {
       cursor: pointer;
       display: inline-flex;
@@ -4173,44 +4173,44 @@ L.styles = f`
       }
     }
   `;
-T([
+M([
   a({ reflect: !0 })
-], L.prototype, "name", 2);
-T([
+], P.prototype, "name", 2);
+M([
   a({ reflect: !0 })
-], L.prototype, "value", 2);
-T([
+], P.prototype, "value", 2);
+M([
   a({ type: String, reflect: !0 })
-], L.prototype, "type", 2);
-T([
+], P.prototype, "type", 2);
+M([
   a({ type: String, reflect: !0 })
-], L.prototype, "href", 2);
-T([
+], P.prototype, "href", 2);
+M([
   a({ type: String, reflect: !0, attribute: "data-href" })
-], L.prototype, "dataHref", 2);
-T([
+], P.prototype, "dataHref", 2);
+M([
   a({ type: String })
-], L.prototype, "text", 2);
-T([
+], P.prototype, "text", 2);
+M([
   a({ type: Boolean, reflect: !0 })
-], L.prototype, "selected", 2);
-T([
+], P.prototype, "selected", 2);
+M([
   a({ type: Boolean, reflect: !0 })
-], L.prototype, "disabled", 2);
-T([
+], P.prototype, "disabled", 2);
+M([
   a({ type: Boolean, reflect: !0 })
-], L.prototype, "fullwidth", 2);
-L = T([
+], P.prototype, "fullwidth", 2);
+P = M([
   y("o-filter-chip")
-], L);
-var hi = Object.defineProperty, q = (o, t, e, n) => {
+], P);
+var hi = 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 && hi(t, e, i), i;
 };
 const Jt = class Jt extends u {
   constructor() {
-    super(...arguments), this.type = "cart | chevron", this.titleProduct = "", this.volume = "", this.perLiter = "", this.mainPrice = "", this.imageUrl = "https://placehold.co/56x70", this.altImage = "", this.fullwidth = !1;
+    super(...arguments), this.type = "cart | chevron", this.titleProduct = "", this.volume = "", this.perLiter = "", this.mainPrice = "", this.imageUrl = "https://placehold.co/56x70", this.altImage = "", this.fullwidth = !1, this.tagText = "";
   }
   onClick() {
     typeof this.onClickTile == "function" && this.onClickTile();
@@ -4245,6 +4245,7 @@ const Jt = class Jt extends u {
                 class="tile ${this.fullwidth ? "fullwidth" : ""} ${this.type === "chevron" ? "fullpointer" : ""}" @click=${this.onClick}>
                 ${this.imageUrl ? l`<img src="${this.imageUrl}" alt="${this.altImage || ""}" />` : ""}
                 <div class="info">
+                    ${this.tagText ? l`<o-tag bgstyle="background-emphasis">${this.tagText}</o-tag>` : ""}
                     ${this.titleProduct ? l`<div class="title">${this.titleProduct}</div>` : ""}
                     <div class="details">
                         ${this.volume ? l`<span class="volume-info">${this.volume}</span>` : ""}
@@ -4330,6 +4331,11 @@ Jt.styles = f`
             }
         }
 
+        .info o-tag {
+            margin-bottom: var(--spacing-xs);
+            display: flex;
+        }
+
         .main-price {
           font-family: var(--font-family-loccitane-sans);
           color: var(--colors-noir-des-terres-500);
@@ -4349,35 +4355,38 @@ Jt.styles = f`
             cursor: pointer;
         }
   `;
-let P = Jt;
-q([
+let _ = Jt;
+j([
   a({ type: String })
-], P.prototype, "type");
-q([
+], _.prototype, "type");
+j([
   a({ type: String })
-], P.prototype, "titleProduct");
-q([
+], _.prototype, "titleProduct");
+j([
   a({ type: String })
-], P.prototype, "volume");
-q([
+], _.prototype, "volume");
+j([
   a({ type: String })
-], P.prototype, "perLiter");
-q([
+], _.prototype, "perLiter");
+j([
   a({ type: String })
-], P.prototype, "mainPrice");
-q([
+], _.prototype, "mainPrice");
+j([
   a({ type: String })
-], P.prototype, "imageUrl");
-q([
+], _.prototype, "imageUrl");
+j([
   a({ type: String })
-], P.prototype, "altImage");
-q([
+], _.prototype, "altImage");
+j([
   a({ type: Boolean })
-], P.prototype, "fullwidth");
-q([
+], _.prototype, "fullwidth");
+j([
+  a({ type: String })
+], _.prototype, "tagText");
+j([
   a({ type: Function })
-], P.prototype, "onClickTile");
-customElements.define("mini-tile", P);
+], _.prototype, "onClickTile");
+customElements.define("mini-tile", _);
 var di = Object.defineProperty, pi = Object.getOwnPropertyDescriptor, Xt = (o, t, e, n) => {
   for (var i = n > 1 ? void 0 : n ? pi(t, e) : t, r = o.length - 1, s; r >= 0; r--)
     (s = o[r]) && (i = (n ? s(t, e, i) : s(i)) || i);
@@ -4627,7 +4636,7 @@ var fi = Object.defineProperty, bi = Object.getOwnPropertyDescriptor, B = (o, t,
     (s = o[r]) && (i = (n ? s(t, e, i) : s(i)) || i);
   return n && i && fi(t, e, i), i;
 };
-let gi = 0, _ = class extends u {
+let gi = 0, k = class extends u {
   constructor() {
     super(), this.checked = !1, this.indeterminate = !1, this.disabled = !1, this.size = "S", this.showLabel = !0, this.label = "Checkbox", this.name = "", this.value = "on", this.inputId = "", this.inputId || (this.inputId = `o-checkbox-${++gi}`);
   }
@@ -4644,7 +4653,7 @@ let gi = 0, _ = class extends u {
     this.disabled || (o.key === " " || o.key === "Enter") && (o.preventDefault(), this.toggle());
   }
   render() {
-    const o = C(N.checkbox.replace("<svg", '<svg aria-hidden="true" focusable="false" part="svg"')), t = C(N.icoMinus.replace("<svg", '<svg class="indeterminate" aria-hidden="true" focusable="false" part="svg"'));
+    const o = C(F.checkbox.replace("<svg", '<svg aria-hidden="true" focusable="false" part="svg"')), t = C(F.icoMinus.replace("<svg", '<svg class="indeterminate" aria-hidden="true" focusable="false" part="svg"'));
     return l`
       <input
         type="checkbox"
@@ -4667,7 +4676,7 @@ let gi = 0, _ = class extends u {
     `;
   }
 };
-_.styles = f`
+k.styles = f`
     :host {
       display: inline-flex;
       align-items: center;
@@ -4773,38 +4782,38 @@ _.styles = f`
   `;
 B([
   a({ type: Boolean, reflect: !0 })
-], _.prototype, "checked", 2);
+], k.prototype, "checked", 2);
 B([
   a({ type: Boolean, reflect: !0 })
-], _.prototype, "indeterminate", 2);
+], k.prototype, "indeterminate", 2);
 B([
   a({ type: Boolean, reflect: !0 })
-], _.prototype, "disabled", 2);
+], k.prototype, "disabled", 2);
 B([
   a({ type: String, reflect: !0 })
-], _.prototype, "size", 2);
+], k.prototype, "size", 2);
 B([
   a({ type: Boolean })
-], _.prototype, "showLabel", 2);
+], k.prototype, "showLabel", 2);
 B([
   a({ type: String })
-], _.prototype, "label", 2);
+], k.prototype, "label", 2);
 B([
   a({ type: String })
-], _.prototype, "name", 2);
+], k.prototype, "name", 2);
 B([
   a({ type: String })
-], _.prototype, "value", 2);
+], k.prototype, "value", 2);
 B([
   a({ type: String, reflect: !0 })
-], _.prototype, "inputId", 2);
+], k.prototype, "inputId", 2);
 B([
   fe("input")
-], _.prototype, "inputEl", 2);
-_ = B([
+], k.prototype, "inputEl", 2);
+k = B([
   y("o-checkbox")
-], _);
-var yi = Object.defineProperty, mi = Object.getOwnPropertyDescriptor, j = (o, t, e, n) => {
+], k);
+var yi = Object.defineProperty, mi = Object.getOwnPropertyDescriptor, R = (o, t, e, n) => {
   for (var i = n > 1 ? void 0 : n ? mi(t, e) : t, r = o.length - 1, s; r >= 0; r--)
     (s = o[r]) && (i = (n ? s(t, e, i) : s(i)) || i);
   return n && i && yi(t, e, i), i;
@@ -4933,33 +4942,33 @@ I.styles = f`
       height: 0;
     }
   `;
-j([
+R([
   a({ type: Boolean, reflect: !0 })
 ], I.prototype, "checked", 2);
-j([
+R([
   a({ type: Boolean, reflect: !0 })
 ], I.prototype, "disabled", 2);
-j([
+R([
   a({ type: String, reflect: !0 })
 ], I.prototype, "size", 2);
-j([
+R([
   a({ type: Boolean })
 ], I.prototype, "showLabel", 2);
-j([
+R([
   a({ type: String })
 ], I.prototype, "label", 2);
-j([
+R([
   a({ type: String })
 ], I.prototype, "name", 2);
-j([
+R([
   a({ type: String })
 ], I.prototype, "value", 2);
-j([
+R([
   a({ type: String, reflect: !0 })
 ], I.prototype, "inputId", 2);
-j([
+R([
   fe("input")
 ], I.prototype, "inputEl", 2);
-I = j([
+I = R([
   y("o-radio")
 ], I);