@florid-kit/components 0.10.40 → 0.10.42

package/index.mjs

@@ -45,7 +45,7 @@ const Pe = (o) => new we(typeof o == "string" ? o : o + "", void 0, Kt), f = (o,
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const { is: ze, defineProperty: Oe, getOwnPropertyDescriptor: Ie, getOwnPropertyNames: De, getOwnPropertySymbols: He, getPrototypeOf: Te } = Object, J = globalThis, de = J.trustedTypes, Me = de ? de.emptyScript : "", Tt = J.reactiveElementPolyfillSupport, gt = (o, t) => o, Pt = { toAttribute(o, t) {
+const { is: Oe, defineProperty: ze, getOwnPropertyDescriptor: Ie, getOwnPropertyNames: De, getOwnPropertySymbols: He, getPrototypeOf: Te } = Object, Q = globalThis, de = Q.trustedTypes, Me = de ? de.emptyScript : "", Tt = Q.reactiveElementPolyfillSupport, gt = (o, t) => o, Pt = { toAttribute(o, t) {
   switch (t) {
     case Boolean:
       o = o ? Me : null;
@@ -73,9 +73,9 @@ const { is: ze, defineProperty: Oe, getOwnPropertyDescriptor: Ie, getOwnProperty
       }
   }
   return e;
-} }, Wt = (o, t) => !ze(o, t), pe = { attribute: !0, type: String, converter: Pt, reflect: !1, useDefault: !1, hasChanged: Wt };
-Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), J.litPropertyMetadata ?? (J.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
-let ct = class extends HTMLElement {
+} }, Wt = (o, t) => !Oe(o, t), pe = { attribute: !0, type: String, converter: Pt, reflect: !1, useDefault: !1, hasChanged: Wt };
+Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), Q.litPropertyMetadata ?? (Q.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
+let ht = class extends HTMLElement {
   static addInitializer(t) {
     this._$Ei(), (this.l ?? (this.l = [])).push(t);
   }
@@ -85,7 +85,7 @@ let ct = class extends HTMLElement {
   static createProperty(t, e = pe) {
     if (e.state && (e.attribute = !1), this._$Ei(), this.prototype.hasOwnProperty(t) && ((e = Object.create(e)).wrapped = !0), this.elementProperties.set(t, e), !e.noAccessor) {
       const n = Symbol(), i = this.getPropertyDescriptor(t, n, e);
-      i !== void 0 && Oe(this.prototype, t, i);
+      i !== void 0 && ze(this.prototype, t, i);
     }
   }
   static getPropertyDescriptor(t, e, n) {
@@ -276,15 +276,15 @@ let ct = class extends HTMLElement {
   firstUpdated(t) {
   }
 };
-ct.elementStyles = [], ct.shadowRootOptions = { mode: "open" }, ct[gt("elementProperties")] = /* @__PURE__ */ new Map(), ct[gt("finalized")] = /* @__PURE__ */ new Map(), Tt == null || Tt({ ReactiveElement: ct }), (J.reactiveElementVersions ?? (J.reactiveElementVersions = [])).push("2.1.0");
+ht.elementStyles = [], ht.shadowRootOptions = { mode: "open" }, ht[gt("elementProperties")] = /* @__PURE__ */ new Map(), ht[gt("finalized")] = /* @__PURE__ */ new Map(), Tt == null || Tt({ ReactiveElement: ht }), (Q.reactiveElementVersions ?? (Q.reactiveElementVersions = [])).push("2.1.0");
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const bt = globalThis, Bt = bt.trustedTypes, ue = Bt ? Bt.createPolicy("lit-html", { createHTML: (o) => o }) : void 0, $e = "$lit$", Y = `lit$${Math.random().toFixed(9).slice(2)}$`, ke = "?" + Y, je = `<${ke}>`, st = document, mt = () => st.createComment(""), xt = (o) => o === null || typeof o != "object" && typeof o != "function", Gt = Array.isArray, Fe = (o) => Gt(o) || typeof (o == null ? void 0 : o[Symbol.iterator]) == "function", Mt = `[ 	
+const bt = globalThis, Bt = bt.trustedTypes, ue = Bt ? Bt.createPolicy("lit-html", { createHTML: (o) => o }) : void 0, $e = "$lit$", J = `lit$${Math.random().toFixed(9).slice(2)}$`, ke = "?" + J, je = `<${ke}>`, st = document, mt = () => st.createComment(""), xt = (o) => o === null || typeof o != "object" && typeof o != "function", Gt = Array.isArray, Fe = (o) => Gt(o) || typeof (o == null ? void 0 : o[Symbol.iterator]) == "function", Mt = `[ 	
 \f\r]`, vt = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, fe = /-->/g, ve = />/g, it = RegExp(`>|${Mt}(?:([^\\s"'>=/]+)(${Mt}*=${Mt}*(?:[^ 	
-\f\r"'\`<>=]|("|')|))|$)`, "g"), ge = /'/g, be = /"/g, _e = /^(?:script|style|textarea|title)$/i, Re = (o) => (t, ...e) => ({ _$litType$: o, strings: t, values: e }), l = Re(1), Q = Symbol.for("lit-noChange"), d = Symbol.for("lit-nothing"), ye = /* @__PURE__ */ new WeakMap(), nt = st.createTreeWalker(st, 129);
+\f\r"'\`<>=]|("|')|))|$)`, "g"), ge = /'/g, be = /"/g, _e = /^(?:script|style|textarea|title)$/i, Re = (o) => (t, ...e) => ({ _$litType$: o, strings: t, values: e }), l = Re(1), tt = Symbol.for("lit-noChange"), d = Symbol.for("lit-nothing"), ye = /* @__PURE__ */ new WeakMap(), nt = st.createTreeWalker(st, 129);
 function Ce(o, t) {
   if (!Gt(o) || !o.hasOwnProperty("raw")) throw Error("invalid template strings array");
   return ue !== void 0 ? ue.createHTML(t) : t;
@@ -296,8 +296,8 @@ const Ue = (o, t) => {
     const h = o[c];
     let v, w, g = -1, V = 0;
     for (; V < h.length && (s.lastIndex = V, w = s.exec(h), w !== null); ) V = s.lastIndex, s === vt ? w[1] === "!--" ? s = fe : w[1] !== void 0 ? s = ve : w[2] !== void 0 ? (_e.test(w[2]) && (i = RegExp("</" + w[2], "g")), s = it) : w[3] !== void 0 && (s = it) : s === it ? w[0] === ">" ? (s = i ?? vt, g = -1) : w[1] === void 0 ? g = -2 : (g = s.lastIndex - w[2].length, v = w[1], s = w[3] === void 0 ? it : w[3] === '"' ? be : ge) : s === be || s === ge ? s = it : s === fe || s === ve ? s = vt : (s = it, i = void 0);
-    const X = s === it && o[c + 1].startsWith("/>") ? " " : "";
-    r += s === vt ? h + je : g >= 0 ? (n.push(v), h.slice(0, g) + $e + h.slice(g) + Y + X) : h + Y + (g === -2 ? c : X);
+    const Y = s === it && o[c + 1].startsWith("/>") ? " " : "";
+    r += s === vt ? h + je : g >= 0 ? (n.push(v), h.slice(0, g) + $e + h.slice(g) + J + Y) : h + J + (g === -2 ? c : Y);
   }
   return [Ce(o, r + (o[e] || "<?>") + (t === 2 ? "</svg>" : t === 3 ? "</math>" : "")), n];
 };
@@ -314,21 +314,21 @@ class wt {
     for (; (i = nt.nextNode()) !== null && h.length < c; ) {
       if (i.nodeType === 1) {
         if (i.hasAttributes()) for (const g of i.getAttributeNames()) if (g.endsWith($e)) {
-          const V = w[s++], X = i.getAttribute(g).split(Y), At = /([.?@])?(.*)/.exec(V);
-          h.push({ type: 1, index: r, name: At[2], strings: X, ctor: At[1] === "." ? qe : At[1] === "?" ? Ve : At[1] === "@" ? Ze : Ot }), i.removeAttribute(g);
-        } else g.startsWith(Y) && (h.push({ type: 6, index: r }), i.removeAttribute(g));
+          const V = w[s++], Y = i.getAttribute(g).split(J), At = /([.?@])?(.*)/.exec(V);
+          h.push({ type: 1, index: r, name: At[2], strings: Y, ctor: At[1] === "." ? qe : At[1] === "?" ? Ve : At[1] === "@" ? Ze : zt }), i.removeAttribute(g);
+        } else g.startsWith(J) && (h.push({ type: 6, index: r }), i.removeAttribute(g));
         if (_e.test(i.tagName)) {
-          const g = i.textContent.split(Y), V = g.length - 1;
+          const g = i.textContent.split(J), V = g.length - 1;
           if (V > 0) {
             i.textContent = Bt ? Bt.emptyScript : "";
-            for (let X = 0; X < V; X++) i.append(g[X], mt()), nt.nextNode(), h.push({ type: 2, index: ++r });
+            for (let Y = 0; Y < V; Y++) i.append(g[Y], mt()), nt.nextNode(), h.push({ type: 2, index: ++r });
             i.append(g[V], mt());
           }
         }
       } else if (i.nodeType === 8) if (i.data === ke) h.push({ type: 2, index: r });
       else {
         let g = -1;
-        for (; (g = i.data.indexOf(Y, g + 1)) !== -1; ) h.push({ type: 7, index: r }), g += Y.length - 1;
+        for (; (g = i.data.indexOf(J, g + 1)) !== -1; ) h.push({ type: 7, index: r }), g += J.length - 1;
       }
       r++;
     }
@@ -338,12 +338,12 @@ class wt {
     return n.innerHTML = t, n;
   }
 }
-function ht(o, t, e = o, n) {
+function dt(o, t, e = o, n) {
   var s, c;
-  if (t === Q) return t;
+  if (t === tt) return t;
   let i = n !== void 0 ? (s = e._$Co) == null ? void 0 : s[n] : e._$Cl;
   const r = xt(t) ? void 0 : t._$litDirective$;
-  return (i == null ? void 0 : i.constructor) !== r && ((c = i == null ? void 0 : i._$AO) == null || c.call(i, !1), r === void 0 ? i = void 0 : (i = new r(o), i._$AT(o, e, n)), n !== void 0 ? (e._$Co ?? (e._$Co = []))[n] = i : e._$Cl = i), i !== void 0 && (t = ht(o, i._$AS(o, t.values), i, n)), t;
+  return (i == null ? void 0 : i.constructor) !== r && ((c = i == null ? void 0 : i._$AO) == null || c.call(i, !1), r === void 0 ? i = void 0 : (i = new r(o), i._$AT(o, e, n)), n !== void 0 ? (e._$Co ?? (e._$Co = []))[n] = i : e._$Cl = i), i !== void 0 && (t = dt(o, i._$AS(o, t.values), i, n)), t;
 }
 class Ne {
   constructor(t, e) {
@@ -393,7 +393,7 @@ class Et {
     return this._$AB;
   }
   _$AI(t, e = this) {
-    t = ht(this, t, e), xt(t) ? t === d || t == null || t === "" ? (this._$AH !== d && this._$AR(), this._$AH = d) : t !== this._$AH && t !== Q && this._(t) : t._$litType$ !== void 0 ? this.$(t) : t.nodeType !== void 0 ? this.T(t) : Fe(t) ? this.k(t) : this._(t);
+    t = dt(this, t, e), xt(t) ? t === d || t == null || t === "" ? (this._$AH !== d && this._$AR(), this._$AH = d) : t !== this._$AH && t !== tt && this._(t) : t._$litType$ !== void 0 ? this.$(t) : t.nodeType !== void 0 ? this.T(t) : Fe(t) ? this.k(t) : this._(t);
   }
   O(t) {
     return this._$AA.parentNode.insertBefore(t, this._$AB);
@@ -436,7 +436,7 @@ class Et {
     this._$AM === void 0 && (this._$Cv = t, (e = this._$AP) == null || e.call(this, t));
   }
 }
-class Ot {
+class zt {
   get tagName() {
     return this.element.tagName;
   }
@@ -449,11 +449,11 @@ class Ot {
   _$AI(t, e = this, n, i) {
     const r = this.strings;
     let s = !1;
-    if (r === void 0) t = ht(this, t, e, 0), s = !xt(t) || t !== this._$AH && t !== Q, s && (this._$AH = t);
+    if (r === void 0) t = dt(this, t, e, 0), s = !xt(t) || t !== this._$AH && t !== tt, s && (this._$AH = t);
     else {
       const c = t;
       let h, v;
-      for (t = r[0], h = 0; h < r.length - 1; h++) v = ht(this, c[n + h], e, h), v === Q && (v = this._$AH[h]), s || (s = !xt(v) || v !== this._$AH[h]), v === d ? t = d : t !== d && (t += (v ?? "") + r[h + 1]), this._$AH[h] = v;
+      for (t = r[0], h = 0; h < r.length - 1; h++) v = dt(this, c[n + h], e, h), v === tt && (v = this._$AH[h]), s || (s = !xt(v) || v !== this._$AH[h]), v === d ? t = d : t !== d && (t += (v ?? "") + r[h + 1]), this._$AH[h] = v;
     }
     s && !i && this.j(t);
   }
@@ -461,7 +461,7 @@ class Ot {
     t === d ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, t ?? "");
   }
 }
-class qe extends Ot {
+class qe extends zt {
   constructor() {
     super(...arguments), this.type = 3;
   }
@@ -469,7 +469,7 @@ class qe extends Ot {
     this.element[this.name] = t === d ? void 0 : t;
   }
 }
-class Ve extends Ot {
+class Ve extends zt {
   constructor() {
     super(...arguments), this.type = 4;
   }
@@ -477,12 +477,12 @@ class Ve extends Ot {
     this.element.toggleAttribute(this.name, !!t && t !== d);
   }
 }
-class Ze extends Ot {
+class Ze extends zt {
   constructor(t, e, n, i, r) {
     super(t, e, n, i, r), this.type = 5;
   }
   _$AI(t, e = this) {
-    if ((t = ht(this, t, e, 0) ?? d) === Q) return;
+    if ((t = dt(this, t, e, 0) ?? d) === tt) return;
     const n = this._$AH, i = t === d && n !== d || t.capture !== n.capture || t.once !== n.once || t.passive !== n.passive, r = t !== d && (n === d || i);
     i && this.element.removeEventListener(this.name, this, n), r && this.element.addEventListener(this.name, this, t), this._$AH = t;
   }
@@ -499,7 +499,7 @@ class Ke {
     return this._$AM._$AU;
   }
   _$AI(t) {
-    ht(this, t);
+    dt(this, t);
   }
 }
 const jt = bt.litHtmlPolyfillSupport;
@@ -519,7 +519,7 @@ const We = (o, t, e) => {
  * SPDX-License-Identifier: BSD-3-Clause
  */
 const rt = globalThis;
-let u = class extends ct {
+let u = class extends ht {
   constructor() {
     super(...arguments), this.renderOptions = { host: this }, this._$Do = void 0;
   }
@@ -541,7 +541,7 @@ let u = class extends ct {
     super.disconnectedCallback(), (t = this._$Do) == null || t.setConnected(!1);
   }
   render() {
-    return Q;
+    return tt;
   }
 };
 var xe;
@@ -596,7 +596,7 @@ function a(o) {
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-function K(o) {
+function W(o) {
   return a({ ...o, state: !0, attribute: !1 });
 }
 /**
@@ -824,14 +824,14 @@ const Qe = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="h
   small: 12,
   medium: 16,
   large: 24
-}, zo = (o, { size: t, bgstyle: e }) => {
+}, Oo = (o, { size: t, bgstyle: e }) => {
   const n = Bo[t], i = e === "none-light" || e === "none-contrast";
   return {
     svg: Ee[o] ?? "",
     pixelSize: n,
     shouldApplyLogicalSize: i
   };
-}, tt = Ee, Oo = {
+}, et = Ee, zo = {
   strikeDiagonal: $o
 }, Io = {
   success: _o,
@@ -871,7 +871,7 @@ class Ut extends ee {
   }
   render(t) {
     if (t === d || t == null) return this._t = void 0, this.it = t;
-    if (t === Q) return t;
+    if (t === tt) return t;
     if (typeof t != "string") throw Error(this.constructor.directiveName + "() called with a non-string value");
     if (t === this.it) return this._t;
     this.it = t;
@@ -888,7 +888,7 @@ Ut.directiveName = "unsafeHTML", Ut.resultType = 1;
 class Nt extends Ut {
 }
 Nt.directiveName = "unsafeSVG", Nt.resultType = 2;
-const S = te(Nt);
+const E = te(Nt);
 /**
  * @license
  * Copyright 2020 Google LLC
@@ -906,7 +906,7 @@ const yt = (o, t) => {
   if (e === void 0) return !1;
   for (const i of e) (n = i._$AO) == null || n.call(i, t, !1), yt(i, t);
   return !0;
-}, zt = (o) => {
+}, Ot = (o) => {
   let t, e;
   do {
     if ((t = o._$AM) === void 0) break;
@@ -921,12 +921,12 @@ const yt = (o, t) => {
   }
 };
 function Ho(o) {
-  this._$AN !== void 0 ? (zt(this), this._$AM = o, Ae(this)) : this._$AM = o;
+  this._$AN !== void 0 ? (Ot(this), this._$AM = o, Ae(this)) : this._$AM = o;
 }
 function To(o, t = !1, e = 0) {
   const n = this._$AH, i = this._$AN;
-  if (i !== void 0 && i.size !== 0) if (t) if (Array.isArray(n)) for (let r = e; r < n.length; r++) yt(n[r], !1), zt(n[r]);
-  else n != null && (yt(n, !1), zt(n));
+  if (i !== void 0 && i.size !== 0) if (t) if (Array.isArray(n)) for (let r = e; r < n.length; r++) yt(n[r], !1), Ot(n[r]);
+  else n != null && (yt(n, !1), Ot(n));
   else yt(this, o);
 }
 const Mo = (o) => {
@@ -941,7 +941,7 @@ class jo extends ee {
   }
   _$AO(t, e = !0) {
     var n, i;
-    t !== this.isConnected && (this.isConnected = t, t ? (n = this.reconnected) == null || n.call(this) : (i = this.disconnected) == null || i.call(this)), e && (yt(this, t), zt(this));
+    t !== this.isConnected && (this.isConnected = t, t ? (n = this.reconnected) == null || n.call(this) : (i = this.disconnected) == null || i.call(this)), e && (yt(this, t), Ot(this));
   }
   setValue(t) {
     if (Do(this._$Ct)) this._$Ct._$AI(t, this);
@@ -1097,14 +1097,14 @@ let B = class extends u {
   render() {
     if (!this.icon)
       return d;
-    const { svg: o, pixelSize: t, shouldApplyLogicalSize: e } = zo(this.icon, {
+    const { svg: o, pixelSize: t, shouldApplyLogicalSize: e } = Oo(this.icon, {
       size: this.size,
       bgstyle: this.bgstyle
     }), n = `icon-${this.icon}`, i = e ? ` width="${t}" height="${t}"` : "", r = o.replace("<svg", `<svg aria-hidden="true" focusable="false" part="svg"${i}`).replace(/<path\b/g, '<path part="icon-path"').replace(/<g\b/g, '<g part="icon-group"').replace(/<circle\b/g, '<circle part="icon-circle"'), s = this.showSrLabel ? l`<span class="sr-only">${this.srLabel}</span>` : null, c = this.showSrLabel ? null : "icon";
     return l`
 			${this.type === "span" ? l`
 				<span class="icon icon-button ${this.size} ${this.bgstyle} ${this.status} ${n}" ?disabled="${this.disabled}">	
-					${S(r)}
+					${E(r)}
 				</span>
 			` : l`
 				<button
@@ -1114,7 +1114,7 @@ let B = class extends u {
 					class="icon-button ${this.size} ${this.bgstyle} ${this.status} ${n}"
 					?disabled="${this.disabled}"
 				>
-					${S(r)}
+					${E(r)}
 					${s}
 				</button>
 			`}
@@ -1978,11 +1978,11 @@ let m = class extends Go {
   renderIcon(o) {
     const t = o === "start" ? this.startIconModel : this.endIconModel;
     if (!t) return d;
-    const e = tt[t].replace(
+    const e = et[t].replace(
       "<svg",
       '<svg aria-hidden="true" focusable="false" part="svg"'
     );
-    return l`<span class="${o === "start" ? "icon-start" : "icon-end"}">${S(e)}</span>`;
+    return l`<span class="${o === "start" ? "icon-start" : "icon-end"}">${E(e)}</span>`;
   }
   renderButton() {
     const o = this.text || this.textsecond;
@@ -2290,7 +2290,7 @@ var Xo = Object.defineProperty, Yo = Object.getOwnPropertyDescriptor, It = (o, t
     (s = o[r]) && (i = (n ? s(t, e, i) : s(i)) || i);
   return n && i && Xo(t, e, i), i;
 };
-let dt = class extends u {
+let pt = class extends u {
   constructor() {
     super(...arguments), this.status = "empty", this.ariaDescribedBy = "a-product-name", this.label = "Add to wishlist", this.toggleStatus = () => {
       this.status = this.status === "empty" ? "filled" : "empty", this.setAttribute("aria-pressed", String(this.status === "filled")), this.dispatchEvent(new CustomEvent("wishlist-toggle", {
@@ -2310,14 +2310,14 @@ let dt = class extends u {
     (o.key === "Enter" || o.key === " ") && (o.preventDefault(), this.toggleStatus());
   }
   render() {
-    const o = tt.wishlist.replace(
+    const o = et.wishlist.replace(
       "<svg",
       '<svg aria-hidden="true" focusable="false" part="svg"'
     );
     return l`
 			<button type="button" aria-describedby="${this.ariaDescribedBy}" class="wishlist-button">
 				<span class="sr-only">${this.label}</span>
-				${S(o)}
+				${E(o)}
 			</button>
 		`;
   }
@@ -2331,7 +2331,7 @@ let dt = class extends u {
     this.label = o, this.requestUpdate();
   }
 };
-dt.styles = f`
+pt.styles = f`
 		:host {
 			display: inline-flex;
 			justify-content: center;
@@ -2388,16 +2388,16 @@ dt.styles = f`
 	`;
 It([
   a({ type: String, reflect: !0 })
-], dt.prototype, "status", 2);
+], pt.prototype, "status", 2);
 It([
   a({ type: String, reflect: !0 })
-], dt.prototype, "ariaDescribedBy", 2);
+], pt.prototype, "ariaDescribedBy", 2);
 It([
   a({ type: String, reflect: !0 })
-], dt.prototype, "label", 2);
-dt = It([
+], pt.prototype, "label", 2);
+pt = It([
   y("o-wishlist-button")
-], dt);
+], pt);
 var Jo = Object.defineProperty, Qo = Object.getOwnPropertyDescriptor, lt = (o, t, e, n) => {
   for (var i = n > 1 ? void 0 : n ? Qo(t, e) : t, r = o.length - 1, s; r >= 0; r--)
     (s = o[r]) && (i = (n ? s(t, e, i) : s(i)) || i);
@@ -2557,7 +2557,7 @@ var ti = Object.defineProperty, ei = Object.getOwnPropertyDescriptor, Dt = (o, t
     (s = o[r]) && (i = (n ? s(t, e, i) : s(i)) || i);
   return n && i && ti(t, e, i), i;
 };
-let pt = class extends u {
+let ut = class extends u {
   constructor() {
     super(...arguments), this.rating = 0;
   }
@@ -2576,7 +2576,7 @@ let pt = class extends u {
 			<div class="rating">
 			<div class="stars">
 				${o.map(
-      (t) => l`<span class="star">${S(tt[t] ?? "")}</span>`
+      (t) => l`<span class="star">${E(et[t] ?? "")}</span>`
     )}
 			</div>
 			${this.reviewCount != null && this.href != null ? l`<o-link template="review" href="${this.href}">${this.reviewCount}</o-link>` : null}
@@ -2584,7 +2584,7 @@ let pt = class extends u {
 		`;
   }
 };
-pt.styles = f`
+ut.styles = f`
 		svg {
 			width: 12px;
 			height: 12px;
@@ -2620,16 +2620,16 @@ pt.styles = f`
 	`;
 Dt([
   a({ type: Number })
-], pt.prototype, "rating", 2);
+], ut.prototype, "rating", 2);
 Dt([
   a({ type: String })
-], pt.prototype, "reviewCount", 2);
+], ut.prototype, "reviewCount", 2);
 Dt([
   a({ type: String })
-], pt.prototype, "href", 2);
-pt = Dt([
+], ut.prototype, "href", 2);
+ut = Dt([
   y("o-rating")
-], pt);
+], ut);
 var oi = Object.defineProperty, ii = Object.getOwnPropertyDescriptor, ot = (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);
@@ -2850,7 +2850,7 @@ ot([
   a({ type: Object })
 ], F.prototype, "swiperInstance", 2);
 ot([
-  K()
+  W()
 ], F.prototype, "focusedIndex", 2);
 F = ot([
   y("thumbnail-navigation")
@@ -3056,12 +3056,12 @@ ie([
 kt = ie([
   y("o-tooltip")
 ], kt);
-var li = Object.defineProperty, ci = Object.getOwnPropertyDescriptor, W = (o, t, e, n) => {
+var li = Object.defineProperty, ci = Object.getOwnPropertyDescriptor, G = (o, t, e, n) => {
   for (var i = n > 1 ? void 0 : n ? ci(t, e) : t, r = o.length - 1, s; r >= 0; r--)
     (s = o[r]) && (i = (n ? s(t, e, i) : s(i)) || i);
   return n && i && li(t, e, i), i;
 };
-let T = class extends u {
+let M = class extends u {
   constructor() {
     super(...arguments), this.options = [], this.value = "", this.name = "", this.disabled = !1, this.width = "100%", this.open = !1, this.activeIndex = -1, this.menuWidth = "", this._handleOutsideClick = (o) => {
       this.contains(o.target) || (this.open = !1, this.activeIndex = -1);
@@ -3127,7 +3127,7 @@ let T = class extends u {
     this.options.length > 0 && (this.options.some((e) => e.value === this.value) || (this.value = this.options[0].value));
   }
   render() {
-    const o = tt.checkstroke.replace(
+    const o = et.checkstroke.replace(
       "<svg",
       '<svg aria-hidden="true" focusable="false" part="svg"'
     ), t = this.options.find((e) => e.value === this.value);
@@ -3172,10 +3172,10 @@ let T = class extends u {
                   ${e.url ? l`
                   <a href="${e.url}">
                     <span>${e.label}</span>
-                    ${e.value === this.value ? l`<span class="check">${S(o)}</span>` : null}
+                    ${e.value === this.value ? l`<span class="check">${E(o)}</span>` : null}
                   </a>` : l`
                     <span>${e.label}</span>
-                    ${e.value === this.value ? l`<span class="check">${S(o)}</span>` : null}`}
+                    ${e.value === this.value ? l`<span class="check">${E(o)}</span>` : null}`}
                 </li>`
     )}
           </ul>` : null}
@@ -3184,7 +3184,7 @@ let T = class extends u {
     `;
   }
 };
-T.styles = f`
+M.styles = f`
     :host {
       display: inline-block;
       position: relative;
@@ -3323,33 +3323,33 @@ T.styles = f`
       display: none;
     }
   `;
-W([
+G([
   a({ type: Array, reflect: !0 })
-], T.prototype, "options", 2);
-W([
+], M.prototype, "options", 2);
+G([
   a({ type: String, reflect: !0 })
-], T.prototype, "value", 2);
-W([
+], M.prototype, "value", 2);
+G([
   a({ type: String, reflect: !0 })
-], T.prototype, "name", 2);
-W([
+], M.prototype, "name", 2);
+G([
   a({ type: Boolean, reflect: !0 })
-], T.prototype, "disabled", 2);
-W([
+], M.prototype, "disabled", 2);
+G([
   a({ type: String, reflect: !0 })
-], T.prototype, "width", 2);
-W([
-  K()
-], T.prototype, "open", 2);
-W([
-  K()
-], T.prototype, "activeIndex", 2);
-W([
-  K()
-], T.prototype, "menuWidth", 2);
-T = W([
+], M.prototype, "width", 2);
+G([
+  W()
+], M.prototype, "open", 2);
+G([
+  W()
+], M.prototype, "activeIndex", 2);
+G([
+  W()
+], M.prototype, "menuWidth", 2);
+M = G([
   y("o-dropdown")
-], T);
+], M);
 var hi = Object.getOwnPropertyDescriptor, di = (o, t, e, n) => {
   for (var i = n > 1 ? void 0 : n ? hi(t, e) : t, r = o.length - 1, s; r >= 0; r--)
     (s = o[r]) && (i = s(i) || i);
@@ -3411,7 +3411,7 @@ var pi = Object.defineProperty, ui = Object.getOwnPropertyDescriptor, U = (o, t,
     (s = o[r]) && (i = (n ? s(t, e, i) : s(i)) || i);
   return n && i && pi(t, e, i), i;
 };
-let z = class extends u {
+let O = 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);
@@ -3477,7 +3477,7 @@ let z = class extends u {
     this.options.length > 0 && (this.options.some((t) => t.value === this.value) || (this.value = this.options[0].value));
   }
   render() {
-    const o = tt.checkstroke.replace(
+    const o = et.checkstroke.replace(
       "<svg",
       '<svg aria-hidden="true" focusable="false" part="svg"'
     ), t = this.options.find((e) => e.value === this.value);
@@ -3536,7 +3536,7 @@ let z = class extends u {
 										<div class="right">
 											<span class="additional-text">${P(e.additionaltext)}</span>
 											${e.value === this.value && !e.additionaltext ? l`
-												<span class="check">${S(o)}</span>` : null}
+												<span class="check">${E(o)}</span>` : null}
 										</div>
 									</a>
 								</li>
@@ -3548,7 +3548,7 @@ let z = class extends u {
 		`;
   }
 };
-z.styles = f`
+O.styles = f`
 	:host {
 		display: inline-block;
 		position: relative;
@@ -3727,34 +3727,34 @@ z.styles = f`
 	`;
 U([
   a({ type: Array, reflect: !0 })
-], z.prototype, "options", 2);
+], O.prototype, "options", 2);
 U([
   a({ type: String, reflect: !0 })
-], z.prototype, "value", 2);
+], O.prototype, "value", 2);
 U([
   a({ type: String, reflect: !0 })
-], z.prototype, "name", 2);
+], O.prototype, "name", 2);
 U([
   a({ type: String, reflect: !0 })
-], z.prototype, "additionaltext", 2);
+], O.prototype, "additionaltext", 2);
 U([
   a({ type: Boolean, reflect: !0 })
-], z.prototype, "disabled", 2);
+], O.prototype, "disabled", 2);
 U([
   a({ type: String, reflect: !0 })
-], z.prototype, "width", 2);
+], O.prototype, "width", 2);
 U([
-  K()
-], z.prototype, "open", 2);
+  W()
+], O.prototype, "open", 2);
 U([
-  K()
-], z.prototype, "activeIndex", 2);
+  W()
+], O.prototype, "activeIndex", 2);
 U([
-  K()
-], z.prototype, "menuWidth", 2);
-z = U([
+  W()
+], O.prototype, "menuWidth", 2);
+O = U([
   y("o-dropdown-variant")
-], z);
+], O);
 /**
  * @license
  * Copyright 2018 Google LLC
@@ -3783,7 +3783,7 @@ const Le = "important", fi = " !" + Le, vi = te(class extends ee {
         n.includes("-") || r ? e.setProperty(n, r ? i.slice(0, -11) : i, r ? Le : "") : e[n] = i;
       }
     }
-    return Q;
+    return tt;
   }
 });
 var gi = Object.defineProperty, bi = Object.getOwnPropertyDescriptor, ne = (o, t, e, n) => {
@@ -3903,13 +3903,13 @@ ne([
 _t = ne([
   y("o-reassurance")
 ], _t);
-var yi = Object.defineProperty, mi = Object.getOwnPropertyDescriptor, G = (o, t, e, n) => {
+var yi = Object.defineProperty, mi = Object.getOwnPropertyDescriptor, X = (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;
 };
 const xi = Jt(u);
-let O = class extends xi {
+let z = class extends xi {
   constructor() {
     super(...arguments), this.link = "", this.name = "", this.value = "", this.text = "", this.size = "standard", this.selected = !1, this.fullwidth = !1, this.inactive = !1;
   }
@@ -3933,7 +3933,7 @@ let O = class extends xi {
     `;
   }
 };
-O.styles = f`
+z.styles = f`
     :host {
       cursor: pointer;
       display: inline-flex;
@@ -4027,33 +4027,33 @@ O.styles = f`
       align-items: center;
     }
   `;
-G([
+X([
   a({ type: String, reflect: !0 })
-], O.prototype, "link", 2);
-G([
+], z.prototype, "link", 2);
+X([
   a({ reflect: !0 })
-], O.prototype, "name", 2);
-G([
+], z.prototype, "name", 2);
+X([
   a({ reflect: !0 })
-], O.prototype, "value", 2);
-G([
+], z.prototype, "value", 2);
+X([
   a({ type: String })
-], O.prototype, "text", 2);
-G([
+], z.prototype, "text", 2);
+X([
   a({ type: String, reflect: !0 })
-], O.prototype, "size", 2);
-G([
+], z.prototype, "size", 2);
+X([
   a({ type: Boolean, reflect: !0 })
-], O.prototype, "selected", 2);
-G([
+], z.prototype, "selected", 2);
+X([
   a({ type: Boolean, reflect: !0 })
-], O.prototype, "fullwidth", 2);
-G([
+], z.prototype, "fullwidth", 2);
+X([
   a({ type: Boolean, reflect: !0 })
-], O.prototype, "inactive", 2);
-O = G([
+], z.prototype, "inactive", 2);
+z = X([
   y("o-chip")
-], O);
+], z);
 var wi = Object.defineProperty, $i = Object.getOwnPropertyDescriptor, re = (o, t, e, n) => {
   for (var i = n > 1 ? void 0 : n ? $i(t, e) : t, r = o.length - 1, s; r >= 0; r--)
     (s = o[r]) && (i = (n ? s(t, e, i) : s(i)) || i);
@@ -4064,7 +4064,7 @@ let Ct = class extends u {
     super(), this.name = "", this.value = "", this.addEventListener("selected", this.onChipSelected);
   }
   onChipSelected(o) {
-    const t = o.target instanceof O ? o.target : null;
+    const t = o.target instanceof z ? 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);
     }));
@@ -4110,18 +4110,18 @@ let I = class extends Ci {
     this.dispatchEvent(e), e.defaultPrevented && o.preventDefault(), this.selected = t.selected;
   }
   crossIcon() {
-    const o = tt[this.crossIconName].replace(
+    const o = et[this.crossIconName].replace(
       "<svg",
       '<svg aria-hidden="true" focusable="false" part="svg"'
     ).replace(/stroke=[#"'a-z1-9]*/gi, "");
-    return l`<span class="cross-icon">${S(o)}</span>`;
+    return l`<span class="cross-icon">${E(o)}</span>`;
   }
   strikeThroughImg() {
-    const o = Oo[this.strikethroughImgName].replace(
+    const o = zo[this.strikethroughImgName].replace(
       "<svg",
       '<svg aria-hidden="true" focusable="false" part="strikethrough"'
     ).replace(/stroke=[#"'a-z1-9]*/gi, "");
-    return S(o);
+    return E(o);
   }
   render() {
     const o = this.text;
@@ -4301,19 +4301,19 @@ N([
 I = N([
   y("o-filter-chip")
 ], I);
-var Si = Object.defineProperty, M = (o, t, e, n) => {
+var Si = Object.defineProperty, H = (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 && Si(t, e, i), i;
 };
 const ae = class ae extends u {
   constructor() {
-    super(...arguments), this.type = "cart | chevron", this.titleProduct = "", this.volume = "", this.perLiter = "", this.mainPrice = "", this.imageUrl = "https://placehold.co/56x70", this.altImage = "", this.fullwidth = !1, this.tagText = "";
+    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 = "", this.outOfStock = !1;
   }
   onClick(t) {
-    var n, i;
+    var n, i, r;
     const e = t.target;
-    (n = e == null ? void 0 : e.classList) != null && n.contains("add-to-bag") || ((i = this.onClickTile) == null || i.call(this), this.dispatchEvent(
+    (n = e == null ? void 0 : e.classList) != null && n.contains("add-to-bag") || (i = e == null ? void 0 : e.classList) != null && i.contains("js-availability-notify-details-cart") || ((r = this.onClickTile) == null || r.call(this), this.dispatchEvent(
       new CustomEvent("tile-click", { bubbles: !0, composed: !0 })
     ));
   }
@@ -4340,13 +4340,13 @@ const ae = class ae extends u {
       ` : l`
       <o-icon-button
         @click=${this.onClickIcons}
-        icon="cart"
+        icon=${this.outOfStock ? "notifyme" : "cart"}
         size="small"
         bgstyle="background-contrast"
         type="span"
         status="empty"
         strokewidth="0"
-        class="add-to-bag"
+        class=${this.outOfStock ? "js-availability-notify-details-cart" : "add-to-bag"}
       ></o-icon-button>
     `;
   }
@@ -4359,7 +4359,9 @@ const ae = class ae extends u {
       >
         ${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.outOfStock ? l`<o-tag type="nostock" role="status" aria-live="polite"
+              >${this.tagText}</o-tag
+            >` : 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>` : ""}
@@ -4485,47 +4487,50 @@ ae.styles = f`
       cursor: pointer;
     }
   `;
-let E = ae;
-M([
+let S = ae;
+H([
   a({ type: String })
-], E.prototype, "type");
-M([
+], S.prototype, "type");
+H([
   a({ type: String })
-], E.prototype, "titleProduct");
-M([
+], S.prototype, "titleProduct");
+H([
   a({ type: String })
-], E.prototype, "volume");
-M([
+], S.prototype, "volume");
+H([
   a({ type: String })
-], E.prototype, "perLiter");
-M([
+], S.prototype, "perLiter");
+H([
   a({ type: String })
-], E.prototype, "mainPrice");
-M([
+], S.prototype, "mainPrice");
+H([
   a({ type: String })
-], E.prototype, "imageUrl");
-M([
+], S.prototype, "imageUrl");
+H([
   a({ type: String })
-], E.prototype, "altImage");
-M([
+], S.prototype, "altImage");
+H([
   a({ type: Boolean })
-], E.prototype, "fullwidth");
-M([
+], S.prototype, "fullwidth");
+H([
   a({ type: String })
-], E.prototype, "tagText");
-M([
+], S.prototype, "tagText");
+H([
+  a({ type: Boolean })
+], S.prototype, "outOfStock");
+H([
   a({ attribute: !1 })
-], E.prototype, "onClickTile");
-M([
+], S.prototype, "onClickTile");
+H([
   a({ attribute: !1 })
-], E.prototype, "onClickIcon");
-customElements.define("mini-tile", E);
+], S.prototype, "onClickIcon");
+customElements.define("mini-tile", S);
 var Ei = Object.defineProperty, Ai = Object.getOwnPropertyDescriptor, Ht = (o, t, e, n) => {
   for (var i = n > 1 ? void 0 : n ? Ai(t, e) : t, r = o.length - 1, s; r >= 0; r--)
     (s = o[r]) && (i = (n ? s(t, e, i) : s(i)) || i);
   return n && i && Ei(t, e, i), i;
 };
-let ut = class extends u {
+let ft = class extends u {
   constructor() {
     super(...arguments), this.variant = "cart", this.text = 0, this.srlabel = "";
   }
@@ -4537,7 +4542,7 @@ let ut = class extends u {
     `;
   }
 };
-ut.styles = f`
+ft.styles = f`
     :host([variant]) {
       --badge-width: 19px;
       display: inline-block;
@@ -4577,17 +4582,17 @@ ut.styles = f`
   `;
 Ht([
   a({ type: String, reflect: !0 })
-], ut.prototype, "variant", 2);
+], ft.prototype, "variant", 2);
 Ht([
   a({ type: Number })
-], ut.prototype, "text", 2);
+], ft.prototype, "text", 2);
 Ht([
   a({ type: String })
-], ut.prototype, "srlabel", 2);
-ut = Ht([
+], ft.prototype, "srlabel", 2);
+ft = Ht([
   y("o-badge")
-], ut);
-var Li = Object.defineProperty, Pi = Object.getOwnPropertyDescriptor, H = (o, t, e, n) => {
+], ft);
+var Li = Object.defineProperty, Pi = Object.getOwnPropertyDescriptor, T = (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);
   return n && i && Li(t, e, i), i;
@@ -4640,7 +4645,7 @@ let A = class extends u {
     return l`
             <div class="o-toast">
                 <div class="o-toast-icon">
-                    ${S(t)}
+                    ${E(t)}
                 </div>
                 <div class="o-toast-text">
                     ${this.text}
@@ -4734,50 +4739,50 @@ A.styles = f`
             height: 16px;
         }
     `;
-H([
+T([
   a({ type: String, reflect: !0 })
 ], A.prototype, "icon", 2);
-H([
+T([
   a({ type: String, reflect: !0 })
 ], A.prototype, "text", 2);
-H([
+T([
   a({ type: String, reflect: !0 })
 ], A.prototype, "verticalanchor", 2);
-H([
+T([
   a({ type: String, reflect: !0 })
 ], A.prototype, "horizontalanchor", 2);
-H([
+T([
   a({ type: Number, reflect: !0 })
 ], A.prototype, "verticaloffset", 2);
-H([
+T([
   a({ type: Number, reflect: !0 })
 ], A.prototype, "horizontaloffset", 2);
-H([
+T([
   a({ type: Number, reflect: !0 })
 ], A.prototype, "animationduration", 2);
-H([
+T([
   a({ type: String, reflect: !0 })
 ], A.prototype, "animationaxis", 2);
-H([
+T([
   a({ type: Boolean, reflect: !0 })
 ], A.prototype, "animated", 2);
-H([
+T([
   a({ type: Number, reflect: !0 })
 ], A.prototype, "lifeduration", 2);
-H([
+T([
   a({ type: Boolean, reflect: !0 })
 ], A.prototype, "multiline", 2);
-A = H([
+A = T([
   y("o-toast")
 ], A);
-var Bi = Object.defineProperty, zi = Object.getOwnPropertyDescriptor, j = (o, t, e, n) => {
-  for (var i = n > 1 ? void 0 : n ? zi(t, e) : t, r = o.length - 1, s; r >= 0; r--)
+var Bi = Object.defineProperty, Oi = Object.getOwnPropertyDescriptor, j = (o, t, e, n) => {
+  for (var i = n > 1 ? void 0 : n ? Oi(t, e) : t, r = o.length - 1, s; r >= 0; r--)
     (s = o[r]) && (i = (n ? s(t, e, i) : s(i)) || i);
   return n && i && Bi(t, e, i), i;
 };
-let Oi = 0, L = class extends u {
+let zi = 0, L = class extends u {
   constructor() {
-    super(), this.checked = !1, this.indeterminate = !1, this.disabled = !1, this.size = "S", this.showLabel = !0, this.label = "Checkbox", this.name = "", this.value = "on", this.inputId = "", this.inputId || (this.inputId = `o-checkbox-${++Oi}`);
+    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-${++zi}`);
   }
   toggle() {
     this.disabled || (this.indeterminate ? (this.indeterminate = !1, this.checked = !0) : this.checked = !this.checked, this.syncInput(), this.dispatchEvent(new Event("change", { bubbles: !0, composed: !0 })));
@@ -4792,7 +4797,7 @@ let Oi = 0, L = class extends u {
     this.disabled || (o.key === " " || o.key === "Enter") && (o.preventDefault(), this.toggle());
   }
   render() {
-    const o = S(tt.checkbox.replace("<svg", '<svg aria-hidden="true" focusable="false" part="svg"')), t = S(tt.icoMinus.replace("<svg", '<svg class="indeterminate" aria-hidden="true" focusable="false" part="svg"'));
+    const o = E(et.checkbox.replace("<svg", '<svg aria-hidden="true" focusable="false" part="svg"')), t = E(et.icoMinus.replace("<svg", '<svg class="indeterminate" aria-hidden="true" focusable="false" part="svg"'));
     return l`
       <input
         type="checkbox"
@@ -5218,14 +5223,14 @@ se([
 St = se([
   y("o-breadcrumb")
 ], St);
-var Ri = Object.defineProperty, Ui = Object.getOwnPropertyDescriptor, ft = (o, t, e, n) => {
+var Ri = Object.defineProperty, Ui = Object.getOwnPropertyDescriptor, ct = (o, t, e, n) => {
   for (var i = n > 1 ? void 0 : n ? Ui(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 && Ri(t, e, i), i;
 };
-let et = class extends u {
+let K = class extends u {
   constructor() {
-    super(...arguments), this.imageUrl = "", this.imageAlt = "", this.hoverUrl = "", this.hoverAlt = "", this.dimmed = !1;
+    super(...arguments), this.imageUrl = "", this.imageAlt = "", this.hoverUrl = "", this.hoverAlt = "", this.dimmed = !1, this.showHover = !1;
   }
   render() {
     return l`<div class="card">
@@ -5242,7 +5247,7 @@ let et = class extends u {
     </div>`;
   }
 };
-et.styles = f`
+K.styles = f`
     :host {
       --card-width : 175px;
       --card-height : 260px;
@@ -5289,6 +5294,18 @@ et.styles = f`
       z-index: 2;
     }
 
+    .card-img.base {
+      z-index: 1;
+    }
+
+    :host([showhover]) .card-img.hover {
+      opacity: 1;
+    }
+
+    :host([showhover]) .card-img.base {
+      opacity: 0;
+    }
+
     @media (hover: hover) and (pointer: fine) {
       .card:hover .card-img.hover {
         opacity: 1;
@@ -5315,24 +5332,27 @@ et.styles = f`
       opacity: var(--overlay-opacity, 1);
     }
   `;
-ft([
+ct([
   a({ type: String })
-], et.prototype, "imageUrl", 2);
-ft([
+], K.prototype, "imageUrl", 2);
+ct([
   a({ type: String })
-], et.prototype, "imageAlt", 2);
-ft([
+], K.prototype, "imageAlt", 2);
+ct([
   a({ type: String })
-], et.prototype, "hoverUrl", 2);
-ft([
+], K.prototype, "hoverUrl", 2);
+ct([
   a({ type: String })
-], et.prototype, "hoverAlt", 2);
-ft([
+], K.prototype, "hoverAlt", 2);
+ct([
   a({ type: Boolean, reflect: !0 })
-], et.prototype, "dimmed", 2);
-et = ft([
+], K.prototype, "dimmed", 2);
+ct([
+  a({ type: Boolean, reflect: !0, attribute: "showhover" })
+], K.prototype, "showHover", 2);
+K = ct([
   y("o-arch-image")
-], et);
+], K);
 const Ni = `<?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg
    xmlns:dc="http://purl.org/dc/elements/1.1/"
@@ -5536,7 +5556,7 @@ const le = class le extends u {
           <header part="header" class="${e}">
             ${this.showBackButton ? this._renderBackButton() : null}
             <div class="brand">
-              <span slot="logo${this.contrast ? "-contrast" : ""}">${S(Ni)}</span>
+              <span slot="logo${this.contrast ? "-contrast" : ""}">${E(Ni)}</span>
             </div>
             <div part="close${this.contrast ? "-contrast" : ""}">${this._renderCloseButton()}</div>
           </header>
@@ -5728,10 +5748,10 @@ C([
   a({ type: Boolean, attribute: "hide-header-on-scroll" })
 ], $.prototype, "hideHeaderOnScroll", 2);
 C([
-  K()
+  W()
 ], $.prototype, "_labelId", 2);
 C([
-  K()
+  W()
 ], $.prototype, "_headerHidden", 2);
 customElements.define("o-popin", $);
 var Zi = Object.defineProperty, Ki = Object.getOwnPropertyDescriptor, k = (o, t, e, n) => {