@florid-kit/components 0.7.1 → 0.7.4

package/index.mjs

@@ -35,7 +35,7 @@ const Ft = (o) => new Mt(typeof o == "string" ? o : o + "", void 0, wt), w = (o,
     const n = document.createElement("style"), i = rt.litNonce;
     i !== void 0 && n.setAttribute("nonce", i), n.textContent = e.cssText, o.appendChild(n);
   }
-}, Et = mt ? (o) => o : (o) => o instanceof CSSStyleSheet ? ((t) => {
+}, St = mt ? (o) => o : (o) => o instanceof CSSStyleSheet ? ((t) => {
   let e = "";
   for (const n of t.cssRules) e += n.cssText;
   return Ft(e);
@@ -45,7 +45,7 @@ const Ft = (o) => new Mt(typeof o == "string" ? o : o + "", void 0, wt), w = (o,
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const { is: Vt, defineProperty: Zt, getOwnPropertyDescriptor: Wt, getOwnPropertyNames: qt, getOwnPropertySymbols: Kt, getPrototypeOf: Gt } = Object, O = globalThis, St = O.trustedTypes, Xt = St ? St.emptyScript : "", dt = O.reactiveElementPolyfillSupport, X = (o, t) => o, st = { toAttribute(o, t) {
+const { is: Vt, defineProperty: Zt, getOwnPropertyDescriptor: qt, getOwnPropertyNames: Wt, getOwnPropertySymbols: Kt, getPrototypeOf: Gt } = Object, O = globalThis, Et = O.trustedTypes, Xt = Et ? Et.emptyScript : "", dt = O.reactiveElementPolyfillSupport, X = (o, t) => o, st = { toAttribute(o, t) {
   switch (t) {
     case Boolean:
       o = o ? Xt : null;
@@ -75,7 +75,7 @@ const { is: Vt, defineProperty: Zt, getOwnPropertyDescriptor: Wt, getOwnProperty
   return e;
 } }, xt = (o, t) => !Vt(o, t), Lt = { attribute: !0, type: String, converter: st, reflect: !1, useDefault: !1, hasChanged: xt };
 Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), O.litPropertyMetadata ?? (O.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
-let R = class extends HTMLElement {
+let V = class extends HTMLElement {
   static addInitializer(t) {
     this._$Ei(), (this.l ?? (this.l = [])).push(t);
   }
@@ -89,7 +89,7 @@ let R = class extends HTMLElement {
     }
   }
   static getPropertyDescriptor(t, e, n) {
-    const { get: i, set: s } = Wt(this.prototype, t) ?? { get() {
+    const { get: i, set: s } = qt(this.prototype, t) ?? { get() {
       return this[e];
     }, set(r) {
       this[e] = r;
@@ -110,7 +110,7 @@ let R = class extends HTMLElement {
   static finalize() {
     if (this.hasOwnProperty(X("finalized"))) return;
     if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(X("properties"))) {
-      const e = this.properties, n = [...qt(e), ...Kt(e)];
+      const e = this.properties, n = [...Wt(e), ...Kt(e)];
       for (const i of n) this.createProperty(i, e[i]);
     }
     const t = this[Symbol.metadata];
@@ -129,8 +129,8 @@ let R = class extends HTMLElement {
     const e = [];
     if (Array.isArray(t)) {
       const n = new Set(t.flat(1 / 0).reverse());
-      for (const i of n) e.unshift(Et(i));
-    } else t !== void 0 && e.push(Et(t));
+      for (const i of n) e.unshift(St(i));
+    } else t !== void 0 && e.push(St(t));
     return e;
   }
   static _$Eu(t, e) {
@@ -276,28 +276,28 @@ let R = class extends HTMLElement {
   firstUpdated(t) {
   }
 };
-R.elementStyles = [], R.shadowRootOptions = { mode: "open" }, R[X("elementProperties")] = /* @__PURE__ */ new Map(), R[X("finalized")] = /* @__PURE__ */ new Map(), dt == null || dt({ ReactiveElement: R }), (O.reactiveElementVersions ?? (O.reactiveElementVersions = [])).push("2.1.0");
+V.elementStyles = [], V.shadowRootOptions = { mode: "open" }, V[X("elementProperties")] = /* @__PURE__ */ new Map(), V[X("finalized")] = /* @__PURE__ */ new Map(), dt == null || dt({ ReactiveElement: V }), (O.reactiveElementVersions ?? (O.reactiveElementVersions = [])).push("2.1.0");
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const J = globalThis, at = J.trustedTypes, It = at ? at.createPolicy("lit-html", { createHTML: (o) => o }) : void 0, Tt = "$lit$", P = `lit$${Math.random().toFixed(9).slice(2)}$`, jt = "?" + P, Jt = `<${jt}>`, T = document, Y = () => T.createComment(""), Q = (o) => o === null || typeof o != "object" && typeof o != "function", $t = Array.isArray, Yt = (o) => $t(o) || typeof (o == null ? void 0 : o[Symbol.iterator]) == "function", pt = `[ 	
-\f\r]`, K = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, Pt = /-->/g, Ot = />/g, D = RegExp(`>|${pt}(?:([^\\s"'>=/]+)(${pt}*=${pt}*(?:[^ 	
-\f\r"'\`<>=]|("|')|))|$)`, "g"), Bt = /'/g, zt = /"/g, Ut = /^(?:script|style|textarea|title)$/i, Qt = (o) => (t, ...e) => ({ _$litType$: o, strings: t, values: e }), c = Qt(1), j = Symbol.for("lit-noChange"), d = Symbol.for("lit-nothing"), Dt = /* @__PURE__ */ new WeakMap(), H = T.createTreeWalker(T, 129);
+const J = globalThis, at = J.trustedTypes, It = at ? at.createPolicy("lit-html", { createHTML: (o) => o }) : void 0, Tt = "$lit$", P = `lit$${Math.random().toFixed(9).slice(2)}$`, jt = "?" + P, Jt = `<${jt}>`, j = document, Y = () => j.createComment(""), Q = (o) => o === null || typeof o != "object" && typeof o != "function", $t = Array.isArray, Yt = (o) => $t(o) || typeof (o == null ? void 0 : o[Symbol.iterator]) == "function", pt = `[ 	
+\f\r]`, G = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, Pt = /-->/g, Ot = />/g, D = RegExp(`>|${pt}(?:([^\\s"'>=/]+)(${pt}*=${pt}*(?:[^ 	
+\f\r"'\`<>=]|("|')|))|$)`, "g"), Bt = /'/g, zt = /"/g, Ut = /^(?:script|style|textarea|title)$/i, Qt = (o) => (t, ...e) => ({ _$litType$: o, strings: t, values: e }), c = Qt(1), U = Symbol.for("lit-noChange"), d = Symbol.for("lit-nothing"), Dt = /* @__PURE__ */ new WeakMap(), M = j.createTreeWalker(j, 129);
 function Nt(o, t) {
   if (!$t(o) || !o.hasOwnProperty("raw")) throw Error("invalid template strings array");
   return It !== void 0 ? It.createHTML(t) : t;
 }
 const te = (o, t) => {
   const e = o.length - 1, n = [];
-  let i, s = t === 2 ? "<svg>" : t === 3 ? "<math>" : "", r = K;
+  let i, s = t === 2 ? "<svg>" : t === 3 ? "<math>" : "", r = G;
   for (let h = 0; h < e; h++) {
     const l = o[h];
     let v, b, p = -1, A = 0;
-    for (; A < l.length && (r.lastIndex = A, b = r.exec(l), b !== null); ) A = r.lastIndex, r === K ? b[1] === "!--" ? r = Pt : b[1] !== void 0 ? r = Ot : b[2] !== void 0 ? (Ut.test(b[2]) && (i = RegExp("</" + b[2], "g")), r = D) : b[3] !== void 0 && (r = D) : r === D ? b[0] === ">" ? (r = i ?? K, p = -1) : b[1] === void 0 ? p = -2 : (p = r.lastIndex - b[2].length, v = b[1], r = b[3] === void 0 ? D : b[3] === '"' ? zt : Bt) : r === zt || r === Bt ? r = D : r === Pt || r === Ot ? r = K : (r = D, i = void 0);
+    for (; A < l.length && (r.lastIndex = A, b = r.exec(l), b !== null); ) A = r.lastIndex, r === G ? b[1] === "!--" ? r = Pt : b[1] !== void 0 ? r = Ot : b[2] !== void 0 ? (Ut.test(b[2]) && (i = RegExp("</" + b[2], "g")), r = D) : b[3] !== void 0 && (r = D) : r === D ? b[0] === ">" ? (r = i ?? G, p = -1) : b[1] === void 0 ? p = -2 : (p = r.lastIndex - b[2].length, v = b[1], r = b[3] === void 0 ? D : b[3] === '"' ? zt : Bt) : r === zt || r === Bt ? r = D : r === Pt || r === Ot ? r = G : (r = D, i = void 0);
     const I = r === D && o[h + 1].startsWith("/>") ? " " : "";
-    s += r === K ? l + Jt : p >= 0 ? (n.push(v), l.slice(0, p) + Tt + l.slice(p) + P + I) : l + P + (p === -2 ? h : I);
+    s += r === G ? l + Jt : p >= 0 ? (n.push(v), l.slice(0, p) + Tt + l.slice(p) + P + I) : l + P + (p === -2 ? h : I);
   }
   return [Nt(o, s + (o[e] || "<?>") + (t === 2 ? "</svg>" : t === 3 ? "</math>" : "")), n];
 };
@@ -307,11 +307,11 @@ class tt {
     this.parts = [];
     let s = 0, r = 0;
     const h = t.length - 1, l = this.parts, [v, b] = te(t, e);
-    if (this.el = tt.createElement(v, n), H.currentNode = this.el.content, e === 2 || e === 3) {
+    if (this.el = tt.createElement(v, n), M.currentNode = this.el.content, e === 2 || e === 3) {
       const p = this.el.content.firstChild;
       p.replaceWith(...p.childNodes);
     }
-    for (; (i = H.nextNode()) !== null && l.length < h; ) {
+    for (; (i = M.nextNode()) !== null && l.length < h; ) {
       if (i.nodeType === 1) {
         if (i.hasAttributes()) for (const p of i.getAttributeNames()) if (p.endsWith(Tt)) {
           const A = b[r++], I = i.getAttribute(p).split(P), nt = /([.?@])?(.*)/.exec(A);
@@ -321,7 +321,7 @@ class tt {
           const p = i.textContent.split(P), A = p.length - 1;
           if (A > 0) {
             i.textContent = at ? at.emptyScript : "";
-            for (let I = 0; I < A; I++) i.append(p[I], Y()), H.nextNode(), l.push({ type: 2, index: ++s });
+            for (let I = 0; I < A; I++) i.append(p[I], Y()), M.nextNode(), l.push({ type: 2, index: ++s });
             i.append(p[A], Y());
           }
         }
@@ -334,16 +334,16 @@ class tt {
     }
   }
   static createElement(t, e) {
-    const n = T.createElement("template");
+    const n = j.createElement("template");
     return n.innerHTML = t, n;
   }
 }
-function V(o, t, e = o, n) {
+function Z(o, t, e = o, n) {
   var r, h;
-  if (t === j) return t;
+  if (t === U) return t;
   let i = n !== void 0 ? (r = e._$Co) == null ? void 0 : r[n] : e._$Cl;
   const s = Q(t) ? void 0 : t._$litDirective$;
-  return (i == null ? void 0 : i.constructor) !== s && ((h = i == null ? void 0 : i._$AO) == null || h.call(i, !1), s === void 0 ? i = void 0 : (i = new s(o), i._$AT(o, e, n)), n !== void 0 ? (e._$Co ?? (e._$Co = []))[n] = i : e._$Cl = i), i !== void 0 && (t = V(o, i._$AS(o, t.values), i, n)), t;
+  return (i == null ? void 0 : i.constructor) !== s && ((h = i == null ? void 0 : i._$AO) == null || h.call(i, !1), s === void 0 ? i = void 0 : (i = new s(o), i._$AT(o, e, n)), n !== void 0 ? (e._$Co ?? (e._$Co = []))[n] = i : e._$Cl = i), i !== void 0 && (t = Z(o, i._$AS(o, t.values), i, n)), t;
 }
 class ee {
   constructor(t, e) {
@@ -356,17 +356,17 @@ class ee {
     return this._$AM._$AU;
   }
   u(t) {
-    const { el: { content: e }, parts: n } = this._$AD, i = ((t == null ? void 0 : t.creationScope) ?? T).importNode(e, !0);
-    H.currentNode = i;
-    let s = H.nextNode(), r = 0, h = 0, l = n[0];
+    const { el: { content: e }, parts: n } = this._$AD, i = ((t == null ? void 0 : t.creationScope) ?? j).importNode(e, !0);
+    M.currentNode = i;
+    let s = M.nextNode(), r = 0, h = 0, l = n[0];
     for (; l !== void 0; ) {
       if (r === l.index) {
         let v;
         l.type === 2 ? v = new it(s, s.nextSibling, this, t) : l.type === 1 ? v = new l.ctor(s, l.name, l.strings, this, t) : l.type === 6 && (v = new re(s, this, t)), this._$AV.push(v), l = n[++h];
       }
-      r !== (l == null ? void 0 : l.index) && (s = H.nextNode(), r++);
+      r !== (l == null ? void 0 : l.index) && (s = M.nextNode(), r++);
     }
-    return H.currentNode = T, i;
+    return M.currentNode = j, i;
   }
   p(t) {
     let e = 0;
@@ -393,7 +393,7 @@ class it {
     return this._$AB;
   }
   _$AI(t, e = this) {
-    t = V(this, t, e), Q(t) ? t === d || t == null || t === "" ? (this._$AH !== d && this._$AR(), this._$AH = d) : t !== this._$AH && t !== j && this._(t) : t._$litType$ !== void 0 ? this.$(t) : t.nodeType !== void 0 ? this.T(t) : Yt(t) ? this.k(t) : this._(t);
+    t = Z(this, t, e), Q(t) ? t === d || t == null || t === "" ? (this._$AH !== d && this._$AR(), this._$AH = d) : t !== this._$AH && t !== U && this._(t) : t._$litType$ !== void 0 ? this.$(t) : t.nodeType !== void 0 ? this.T(t) : Yt(t) ? this.k(t) : this._(t);
   }
   O(t) {
     return this._$AA.parentNode.insertBefore(t, this._$AB);
@@ -402,7 +402,7 @@ class it {
     this._$AH !== t && (this._$AR(), this._$AH = this.O(t));
   }
   _(t) {
-    this._$AH !== d && Q(this._$AH) ? this._$AA.nextSibling.data = t : this.T(T.createTextNode(t)), this._$AH = t;
+    this._$AH !== d && Q(this._$AH) ? this._$AA.nextSibling.data = t : this.T(j.createTextNode(t)), this._$AH = t;
   }
   $(t) {
     var s;
@@ -449,11 +449,11 @@ class lt {
   _$AI(t, e = this, n, i) {
     const s = this.strings;
     let r = !1;
-    if (s === void 0) t = V(this, t, e, 0), r = !Q(t) || t !== this._$AH && t !== j, r && (this._$AH = t);
+    if (s === void 0) t = Z(this, t, e, 0), r = !Q(t) || t !== this._$AH && t !== U, r && (this._$AH = t);
     else {
       const h = t;
       let l, v;
-      for (t = s[0], l = 0; l < s.length - 1; l++) v = V(this, h[n + l], e, l), v === j && (v = this._$AH[l]), r || (r = !Q(v) || v !== this._$AH[l]), v === d ? t = d : t !== d && (t += (v ?? "") + s[l + 1]), this._$AH[l] = v;
+      for (t = s[0], l = 0; l < s.length - 1; l++) v = Z(this, h[n + l], e, l), v === U && (v = this._$AH[l]), r || (r = !Q(v) || v !== this._$AH[l]), v === d ? t = d : t !== d && (t += (v ?? "") + s[l + 1]), this._$AH[l] = v;
     }
     r && !i && this.j(t);
   }
@@ -482,7 +482,7 @@ class ne extends lt {
     super(t, e, n, i, s), this.type = 5;
   }
   _$AI(t, e = this) {
-    if ((t = V(this, t, e, 0) ?? d) === j) return;
+    if ((t = Z(this, t, e, 0) ?? d) === U) return;
     const n = this._$AH, i = t === d && n !== d || t.capture !== n.capture || t.once !== n.once || t.passive !== n.passive, s = t !== d && (n === d || i);
     i && this.element.removeEventListener(this.name, this, n), s && this.element.addEventListener(this.name, this, t), this._$AH = t;
   }
@@ -499,7 +499,7 @@ class re {
     return this._$AM._$AU;
   }
   _$AI(t) {
-    V(this, t);
+    Z(this, t);
   }
 }
 const ut = J.litHtmlPolyfillSupport;
@@ -518,8 +518,8 @@ const se = (o, t, e) => {
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const M = globalThis;
-let f = class extends R {
+const T = globalThis;
+let f = class extends V {
   constructor() {
     super(...arguments), this.renderOptions = { host: this }, this._$Do = void 0;
   }
@@ -541,14 +541,14 @@ let f = class extends R {
     super.disconnectedCallback(), (t = this._$Do) == null || t.setConnected(!1);
   }
   render() {
-    return j;
+    return U;
   }
 };
 var Ht;
-f._$litElement$ = !0, f.finalized = !0, (Ht = M.litElementHydrateSupport) == null || Ht.call(M, { LitElement: f });
-const vt = M.litElementPolyfillSupport;
+f._$litElement$ = !0, f.finalized = !0, (Ht = T.litElementHydrateSupport) == null || Ht.call(T, { LitElement: f });
+const vt = T.litElementPolyfillSupport;
 vt == null || vt({ LitElement: f });
-(M.litElementVersions ?? (M.litElementVersions = [])).push("4.2.0");
+(T.litElementVersions ?? (T.litElementVersions = [])).push("4.2.0");
 /**
  * @license
  * Copyright 2017 Google LLC
@@ -596,7 +596,7 @@ function a(o) {
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-function U(o) {
+function N(o) {
   return a({ ...o, state: !0, attribute: !1 });
 }
 const ce = w`
@@ -715,10 +715,10 @@ const pe = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="h
 `, Ae = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M14.1218 7.43502C13.9504 7.60543 13.6735 7.60543 13.5021 7.43502L8.55961 2.49408V14.5625C8.55961 14.8041 8.36365 15 8.12192 15C7.88018 15 7.68422 14.8041 7.68422 14.5625V2.49408L2.74177 7.43502C2.57002 7.60082 2.29703 7.59845 2.1282 7.4297C1.95936 7.26094 1.95699 6.98808 2.12287 6.81642L7.81203 1.13C7.89368 1.04685 8.00535 1 8.12192 1C8.23848 1 8.35015 1.04685 8.4318 1.13L14.121 6.81642C14.2921 6.98702 14.2925 7.26395 14.1218 7.43502Z" fill="#3F2B2E"/>
 </svg>
-`, Ee = `<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+`, Se = `<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M6.33317 8.00033C6.33317 3.95024 7.52708 0.666992 8.99984 0.666992C10.4726 0.666992 11.6665 3.95024 11.6665 8.00033M5.33317 15.3337H12.6665L16.3332 6.20033C14.9582 5.76699 12.2998 5.33366 8.99984 5.33366C5.69984 5.33366 3.49984 5.76699 1.6665 6.20033L5.33317 15.3337Z" stroke="#3F2B2E"/>
 </svg>
-`, Se = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+`, Ee = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M7.99376 14.4486C7.46684 14.4486 6.93991 14.251 6.54472 13.8558C6.14953 13.4606 5.8202 12.9995 5.68847 12.4067H3.77837C2.98798 12.4067 2.59279 12.4067 2.32933 12.1433C2.13173 12.0116 2 11.7481 2 11.5505C2 11.2212 2.13173 10.826 2.52692 10.1673L2.92212 9.4428C3.31731 8.78415 3.51491 8.05963 3.64664 7.3351L3.84423 5.68847C3.97596 4.63462 4.43702 3.7125 5.22741 3.05385C6.01779 2.39519 7.00578 2 7.99376 2C8.98174 2 10.0356 2.39519 10.7601 3.05385C11.5505 3.7125 12.0116 4.70049 12.1433 5.68847L12.3409 7.26924C12.4067 8.05963 12.6702 8.78415 13.0654 9.37693L13.4606 10.1015C13.8558 10.7601 14.0534 11.0894 13.9875 11.4846C13.9875 11.7481 13.8558 11.9457 13.6582 12.0774C13.3947 12.3409 12.9995 12.3409 12.2092 12.3409H10.2991C10.1673 12.9337 9.83799 13.4606 9.4428 13.7899C9.04761 14.1851 8.52068 14.3827 7.99376 14.3827V14.4486ZM6.28126 12.4067C6.41299 12.8019 6.61058 13.1971 6.93991 13.4606C7.5327 13.9875 8.45482 13.9875 9.11347 13.4606C9.4428 13.1971 9.6404 12.8019 9.77213 12.4067H6.28126ZM7.99376 2.65865C7.13751 2.65865 6.28126 2.98798 5.6226 3.58077C4.96395 4.17356 4.56875 4.96395 4.43702 5.88606L4.23943 7.46684C4.1077 8.32309 3.84423 9.11347 3.44904 9.83799L3.05385 10.5625C2.72452 11.0894 2.59279 11.3529 2.59279 11.5505C2.59279 11.6164 2.59279 11.7481 2.72452 11.814C2.85625 11.8798 3.25144 11.8798 3.77837 11.8798H12.2092C12.7361 11.8798 13.1971 11.8798 13.263 11.814C13.3289 11.814 13.3947 11.6822 13.3947 11.5505C13.3947 11.4188 13.1971 11.0894 12.9337 10.5625L12.5385 9.83799C12.0774 9.11347 11.814 8.32309 11.7481 7.5327L11.5505 5.88606C11.4846 5.02981 11.0236 4.17356 10.3649 3.58077C9.70626 2.98798 8.85001 2.65865 7.99376 2.65865Z" fill="#3F2B2E"/>
 </svg>
 `, Le = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -730,7 +730,7 @@ const pe = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="h
 `, Pe = `<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M5.24611 10.4659C5.04705 10.4654 4.85616 10.3867 4.71465 10.2467L0.210718 5.74273C-0.0737595 5.44819 -0.0696911 4.98 0.219862 4.69045C0.509415 4.4009 0.977603 4.39683 1.27214 4.6813L5.18306 8.59071L10.6628 1.74024C10.9219 1.41646 11.3945 1.36403 11.7183 1.62314C12.042 1.88225 12.0945 2.35477 11.8354 2.67856L5.83012 10.1851C5.69763 10.3521 5.49956 10.4539 5.28665 10.4643L5.24611 10.4659Z" fill="#3F2B2E"/>
 </svg>
-`, q = {
+`, K = {
   wishlist: pe,
   playerv: ue,
   chevronRight: ve,
@@ -746,8 +746,8 @@ const pe = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="h
   search: $e,
   arrowLeft: ke,
   arrowTop: Ae,
-  cart: Ee,
-  notifyme: Se,
+  cart: Se,
+  notifyme: Ee,
   triangledown: Le,
   triangleup: Ie,
   checkstroke: Pe
@@ -785,7 +785,7 @@ class bt extends ze {
   }
   render(t) {
     if (t === d || t == null) return this._t = void 0, this.it = t;
-    if (t === j) return t;
+    if (t === U) 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;
@@ -834,7 +834,7 @@ let u = class extends Me {
   renderIcon(o) {
     const t = o === "start" ? this.startIconModel : this.endIconModel;
     if (!t) return d;
-    const e = q[t].replace(
+    const e = K[t].replace(
       "<svg",
       '<svg aria-hidden="true" focusable="false" part="svg"'
     );
@@ -1082,7 +1082,7 @@ var Te = Object.defineProperty, je = Object.getOwnPropertyDescriptor, ct = (o, t
     (r = o[s]) && (i = (n ? r(t, e, i) : r(i)) || i);
   return n && i && Te(t, e, i), i;
 };
-let Z = class extends f {
+let q = class extends f {
   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", {
@@ -1102,7 +1102,7 @@ let Z = class extends f {
     (o.key === "Enter" || o.key === " ") && (o.preventDefault(), this.toggleStatus());
   }
   render() {
-    const o = q.wishlist.replace(
+    const o = K.wishlist.replace(
       "<svg",
       '<svg aria-hidden="true" focusable="false" part="svg"'
     );
@@ -1123,7 +1123,7 @@ let Z = class extends f {
     this.label = o, this.requestUpdate();
   }
 };
-Z.styles = w`
+q.styles = w`
 		:host {
 			display: inline-flex;
 			justify-content: center;
@@ -1190,16 +1190,16 @@ Z.styles = w`
 	`;
 ct([
   a({ type: String, reflect: !0 })
-], Z.prototype, "status", 2);
+], q.prototype, "status", 2);
 ct([
   a({ type: String, reflect: !0 })
-], Z.prototype, "ariaDescribedBy", 2);
+], q.prototype, "ariaDescribedBy", 2);
 ct([
   a({ type: String, reflect: !0 })
-], Z.prototype, "label", 2);
-Z = ct([
+], q.prototype, "label", 2);
+q = ct([
   $("o-wishlist-button")
-], Z);
+], q);
 var Ue = Object.defineProperty, Ne = Object.getOwnPropertyDescriptor, z = (o, t, e, n) => {
   for (var i = n > 1 ? void 0 : n ? Ne(t, e) : t, s = o.length - 1, r; s >= 0; s--)
     (r = o[s]) && (i = (n ? r(t, e, i) : r(i)) || i);
@@ -1213,7 +1213,7 @@ let C = class extends f {
     super.updated(o), this.style.setProperty("--icon-stroke-width", this.strokewidth);
   }
   render() {
-    const o = q[this.icon] ?? "", t = `icon-${this.icon}`, e = o.replace(
+    const o = K[this.icon] ?? "", t = `icon-${this.icon}`, e = o.replace(
       "<svg",
       '<svg aria-hidden="true" focusable="false" part="svg"'
     );
@@ -1464,13 +1464,13 @@ C = z([
  * Copyright 2018 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const G = (o) => o ?? d;
-var Fe = Object.defineProperty, Re = Object.getOwnPropertyDescriptor, N = (o, t, e, n) => {
+const H = (o) => o ?? d;
+var Fe = Object.defineProperty, Re = Object.getOwnPropertyDescriptor, F = (o, t, e, n) => {
   for (var i = n > 1 ? void 0 : n ? Re(t, e) : t, s = o.length - 1, r; s >= 0; s--)
     (r = o[s]) && (i = (n ? r(t, e, i) : r(i)) || i);
   return n && i && Fe(t, e, i), i;
 };
-let E = class extends f {
+let S = class extends f {
   constructor() {
     super(...arguments), this.href = "", this.target = "", this.template = "standard", this.inverse = !1, this.endIcon = !1, this.reverseEndIcon = !1;
   }
@@ -1482,7 +1482,7 @@ let E = class extends f {
     return c`
             <a 
                 href="${o}" 
-                target="${G(this.target || void 0)}"
+                target="${H(this.target || void 0)}"
                 @click="${this._handleClick}"
             >
                 ${this.endIcon && this.reverseEndIcon ? c`
@@ -1508,7 +1508,7 @@ let E = class extends f {
         `;
   }
 };
-E.styles = w`
+S.styles = w`
         :host([template="standard"]) a {
             color: var(--color-content-action-secondary);
             font-size: var(--font-size-200);
@@ -1596,27 +1596,27 @@ E.styles = w`
         }
         /* End of underline effect */
     `;
-N([
+F([
   a({ type: String })
-], E.prototype, "href", 2);
-N([
+], S.prototype, "href", 2);
+F([
   a({ type: String })
-], E.prototype, "target", 2);
-N([
+], S.prototype, "target", 2);
+F([
   a({ type: String, reflect: !0 })
-], E.prototype, "template", 2);
-N([
+], S.prototype, "template", 2);
+F([
   a({ type: Boolean, reflect: !0 })
-], E.prototype, "inverse", 2);
-N([
+], S.prototype, "inverse", 2);
+F([
   a({ type: Boolean, reflect: !0 })
-], E.prototype, "endIcon", 2);
-N([
+], S.prototype, "endIcon", 2);
+F([
   a({ type: Boolean, reflect: !0 })
-], E.prototype, "reverseEndIcon", 2);
-E = N([
+], S.prototype, "reverseEndIcon", 2);
+S = F([
   $("o-link")
-], E);
+], S);
 var Ve = Object.defineProperty, Ze = Object.getOwnPropertyDescriptor, ht = (o, t, e, n) => {
   for (var i = n > 1 ? void 0 : n ? Ze(t, e) : t, s = o.length - 1, r; s >= 0; s--)
     (r = o[s]) && (i = (n ? r(t, e, i) : r(i)) || i);
@@ -1641,7 +1641,7 @@ let W = class extends f {
 			<div class="rating">
 			<div class="stars">
 				${o.map(
-      (t) => c`<span class="star">${B(q[t] ?? "")}</span>`
+      (t) => c`<span class="star">${B(K[t] ?? "")}</span>`
     )}
 			</div>
 			${this.reviewCount != null && this.href != null ? c`<o-link template="review" href="${this.href}">${this.reviewCount}</o-link>` : null}
@@ -1695,10 +1695,10 @@ ht([
 W = ht([
   $("o-rating")
 ], W);
-var We = Object.defineProperty, qe = Object.getOwnPropertyDescriptor, y = (o, t, e, n) => {
-  for (var i = n > 1 ? void 0 : n ? qe(t, e) : t, s = o.length - 1, r; s >= 0; s--)
+var qe = Object.defineProperty, We = Object.getOwnPropertyDescriptor, y = (o, t, e, n) => {
+  for (var i = n > 1 ? void 0 : n ? We(t, e) : t, s = o.length - 1, r; s >= 0; s--)
     (r = o[s]) && (i = (n ? r(t, e, i) : r(i)) || i);
-  return n && i && We(t, e, i), i;
+  return n && i && qe(t, e, i), i;
 };
 let g = class extends f {
   constructor() {
@@ -1988,12 +1988,12 @@ y([
 g = y([
   $("o-side-panel")
 ], g);
-var Ke = Object.defineProperty, Ge = Object.getOwnPropertyDescriptor, F = (o, t, e, n) => {
+var Ke = Object.defineProperty, Ge = Object.getOwnPropertyDescriptor, R = (o, t, e, n) => {
   for (var i = n > 1 ? void 0 : n ? Ge(t, e) : t, s = o.length - 1, r; s >= 0; s--)
     (r = o[s]) && (i = (n ? r(t, e, i) : r(i)) || i);
   return n && i && Ke(t, e, i), i;
 };
-let S = class extends f {
+let E = class extends f {
   constructor() {
     super(...arguments), this.thumbnails = [], this.activeIndex = 0, this.disabledIndexes = [], this.maxWidth = "100%", this.focusedIndex = 0, this.playerIconTemplate = c`
     <o-icon-button
@@ -2054,7 +2054,7 @@ let S = class extends f {
     `;
   }
 };
-S.styles = w`
+E.styles = w`
     :host {
       display: flex;
       gap: 5px;
@@ -2158,27 +2158,27 @@ S.styles = w`
       width: 0;
     }
   `;
-F([
+R([
   a({ type: Array })
-], S.prototype, "thumbnails", 2);
-F([
+], E.prototype, "thumbnails", 2);
+R([
   a({ type: Number })
-], S.prototype, "activeIndex", 2);
-F([
+], E.prototype, "activeIndex", 2);
+R([
   a({ type: Array })
-], S.prototype, "disabledIndexes", 2);
-F([
+], E.prototype, "disabledIndexes", 2);
+R([
   a({ type: String })
-], S.prototype, "maxWidth", 2);
-F([
+], E.prototype, "maxWidth", 2);
+R([
   a({ type: Object })
-], S.prototype, "swiperInstance", 2);
-F([
-  U()
-], S.prototype, "focusedIndex", 2);
-S = F([
+], E.prototype, "swiperInstance", 2);
+R([
+  N()
+], E.prototype, "focusedIndex", 2);
+E = R([
   $("thumbnail-navigation")
-], S);
+], E);
 var Xe = Object.defineProperty, Je = Object.getOwnPropertyDescriptor, Ct = (o, t, e, n) => {
   for (var i = n > 1 ? void 0 : n ? Je(t, e) : t, s = o.length - 1, r; s >= 0; s--)
     (r = o[s]) && (i = (n ? r(t, e, i) : r(i)) || i);
@@ -2386,9 +2386,9 @@ var to = Object.defineProperty, eo = Object.getOwnPropertyDescriptor, L = (o, t,
 };
 let _ = class extends f {
   constructor() {
-    super(...arguments), this.options = [], this.value = "", this.name = "", this.disabled = !1, this.width = "100%", this.open = !1, this.activeIndex = -1, this._handleOutsideClick = (o) => {
+    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);
-    }, this.menuWidth = "";
+    };
   }
   connectedCallback() {
     super.connectedCallback(), document.addEventListener("click", this._handleOutsideClick);
@@ -2398,13 +2398,23 @@ let _ = class extends f {
   }
   toggle() {
     var o;
-    if (!this.disabled && (this.open = !this.open, this.activeIndex = this.open ? this.options.findIndex((t) => t.value === this.value) : -1, this.open && this.width === "auto")) {
-      const t = (o = this.renderRoot) == null ? void 0 : o.querySelector("button");
-      t && (this.menuWidth = `${t.getBoundingClientRect().width}px`);
+    if (!this.disabled) {
+      if (this.open = !this.open, this.activeIndex = this.open ? this.options.findIndex((t) => t.value === this.value) : -1, this.open && this.width === "auto") {
+        const t = (o = this.renderRoot) == null ? void 0 : o.querySelector("button");
+        t && (this.menuWidth = `${t.getBoundingClientRect().width}px`);
+      }
+      this.open && this.updateComplete.then(() => {
+        this._focusActiveOption();
+      });
     }
   }
+  _focusActiveOption() {
+    var t;
+    const o = (t = this.renderRoot) == null ? void 0 : t.querySelector(`#option-${this.activeIndex}`);
+    o == null || o.focus();
+  }
   selectOption(o) {
-    this.value = o.value, this.dispatchEvent(new CustomEvent("change", { detail: { value: this.value, url: o.url } }));
+    this.value = o.value, this.dispatchEvent(new CustomEvent("change", { detail: { value: this.value, url: o.url } })), this.open = !1, this.activeIndex = -1;
   }
   handleKeydown(o) {
     if (this.disabled) {
@@ -2412,15 +2422,21 @@ let _ = class extends f {
       return;
     }
     if (!this.open) {
-      (o.key === "ArrowDown" || o.key === "ArrowUp") && (o.preventDefault(), this.open = !0, this.activeIndex = this.options.findIndex((t) => t.value === this.value));
+      (o.key === "ArrowDown" || o.key === "ArrowUp") && (o.preventDefault(), this.open = !0, this.activeIndex = this.options.findIndex((t) => t.value === this.value), this.updateComplete.then(() => this._focusActiveOption()));
       return;
     }
     switch (o.key) {
       case "ArrowDown":
-        o.preventDefault(), this.activeIndex = (this.activeIndex + 1) % this.options.length;
+        o.preventDefault(), this.activeIndex = (this.activeIndex + 1) % this.options.length, this.updateComplete.then(() => this._focusActiveOption());
         break;
       case "ArrowUp":
-        o.preventDefault(), this.activeIndex = (this.activeIndex - 1 + this.options.length) % this.options.length;
+        o.preventDefault(), this.activeIndex = (this.activeIndex - 1 + this.options.length) % this.options.length, this.updateComplete.then(() => this._focusActiveOption());
+        break;
+      case "Home":
+        o.preventDefault(), this.activeIndex = 0, this.updateComplete.then(() => this._focusActiveOption());
+        break;
+      case "End":
+        o.preventDefault(), this.activeIndex = this.options.length - 1, this.updateComplete.then(() => this._focusActiveOption());
         break;
       case "Enter":
         o.preventDefault(), this.activeIndex >= 0 && this.selectOption(this.options[this.activeIndex]);
@@ -2434,45 +2450,58 @@ let _ = class extends f {
     this.options.length > 0 && (this.options.some((e) => e.value === this.value) || (this.value = this.options[0].value));
   }
   render() {
-    const o = q.checkstroke.replace(
+    const o = K.checkstroke.replace(
       "<svg",
       '<svg aria-hidden="true" focusable="false" part="svg"'
     ), t = this.options.find((e) => e.value === this.value);
     return c`
       <button
-        @click=${this.toggle}
-        @keydown=${this.handleKeydown}
+        role="combobox"
         aria-haspopup="listbox"
+        aria-controls="dropdown-listbox"
         aria-expanded="${this.open}"
+        aria-disabled="${this.disabled ? "true" : "false"}"
+        aria-labelledby="dropdown-label"
+        @click=${this.toggle}
+        @keydown=${this.handleKeydown}
         style=${`width: ${this.width};`}
         ?disabled=${this.disabled}
       >
-          <span class="label">${t ? t.label : "Select an option"}</span>
-          <span class="arrow"><o-icon-button icon='${this.open ? "triangleup" : "triangledown"}' size="small" bgstyle="none-contrast" type="span"></o-icon-button></span>
+        <span id="dropdown-label" class="label">
+          ${t ? t.label : "Select an option"}
+        </span>
+        <span class="arrow">
+          <o-icon-button icon='${this.open ? "triangleup" : "triangledown"}' size="small" bgstyle="none-contrast" type="span"></o-icon-button>
+        </span>
       </button>
 
       ${this.open ? c`
-          <ul role="listbox" style=${`width: ${this.width};`}>
+          <ul
+            id="dropdown-listbox"
+            role="listbox"
+            aria-activedescendant="${this.activeIndex >= 0 ? "option-" + this.activeIndex : ""}"
+            style=${`width: ${this.width};`}
+          >
             ${this.options.map(
       (e, n) => c`                      
                 <li
+                  id="option-${n}"
                   role="option"
                   aria-selected="${e.value === this.value}"
+                  tabindex="${n === this.activeIndex ? "0" : "-1"}"
                   class="${n === this.activeIndex ? "active" : ""} ${e.disabled ? "disabled" : ""}"
                   @click=${() => this.selectOption(e)}
                 >
                   ${e.url ? c`
                   <a href="${e.url}">
-                      <span>${e.label}</span>
-                      ${e.value === this.value ? c`<span class="check">${B(o)}</span>` : null}
+                    <span>${e.label}</span>
+                    ${e.value === this.value ? c`<span class="check">${B(o)}</span>` : null}
                   </a>` : c`
                     <span>${e.label}</span>
                     ${e.value === this.value ? c`<span class="check">${B(o)}</span>` : null}`}
-                </li>
-              `
+                </li>`
     )}
-          </ul>
-        ` : null}
+          </ul>` : null}
 
       <input type="hidden" name="${this.name}" .value="${this.value}" />
     `;
@@ -2634,13 +2663,13 @@ L([
   a({ type: String, reflect: !0 })
 ], _.prototype, "width", 2);
 L([
-  U()
+  N()
 ], _.prototype, "open", 2);
 L([
-  U()
+  N()
 ], _.prototype, "activeIndex", 2);
 L([
-  U()
+  N()
 ], _.prototype, "menuWidth", 2);
 _ = L([
   $("o-dropdown")
@@ -2669,6 +2698,7 @@ yt.styles = w`
         border-radius: 50%;
         cursor: pointer;
         border: 1px solid var(--color-border-primary);
+        box-sizing: border-box;
         background-color: var(--color-container-action-secondary-default);
       }
     }
@@ -2716,9 +2746,9 @@ var no = Object.defineProperty, ro = Object.getOwnPropertyDescriptor, k = (o, t,
 };
 let x = class extends f {
   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._handleOutsideClick = (o) => {
+    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);
-    }, this.menuWidth = "";
+    };
   }
   connectedCallback() {
     super.connectedCallback(), document.addEventListener("click", this._handleOutsideClick);
@@ -2728,17 +2758,23 @@ let x = class extends f {
   }
   toggle() {
     var o;
-    if (!this.disabled && (this.open = !this.open, this.activeIndex = this.open ? this.options.findIndex((t) => t.value === this.value) : -1, this.open && this.width === "auto")) {
-      const t = (o = this.renderRoot) == null ? void 0 : o.querySelector("button");
-      t && (this.menuWidth = `${t.getBoundingClientRect().width}px`);
+    if (!this.disabled) {
+      if (this.open = !this.open, this.activeIndex = this.open ? this.options.findIndex((t) => t.value === this.value) : -1, this.open && this.width === "auto") {
+        const t = (o = this.renderRoot) == null ? void 0 : o.querySelector("button");
+        t && (this.menuWidth = `${t.getBoundingClientRect().width}px`);
+      }
+      this.open && this.updateComplete.then(() => this._focusActiveOption());
     }
   }
+  _focusActiveOption() {
+    var t;
+    const o = (t = this.renderRoot) == null ? void 0 : t.querySelector(`#option-${this.activeIndex}`);
+    o == null || o.focus();
+  }
   selectOption(o) {
-    this.value = o.value, this.dispatchEvent(
-      new CustomEvent("change", {
-        detail: { value: this.value, url: o.url }
-      })
-    );
+    this.value = o.value, this.dispatchEvent(new CustomEvent("change", {
+      detail: { value: this.value, url: o.url }
+    })), this.open = !1, this.activeIndex = -1;
   }
   handleKeydown(o) {
     if (this.disabled) {
@@ -2746,17 +2782,21 @@ let x = class extends f {
       return;
     }
     if (!this.open) {
-      (o.key === "ArrowDown" || o.key === "ArrowUp") && (o.preventDefault(), this.open = !0, this.activeIndex = this.options.findIndex(
-        (t) => t.value === this.value
-      ));
+      (o.key === "ArrowDown" || o.key === "ArrowUp") && (o.preventDefault(), this.open = !0, this.activeIndex = this.options.findIndex((t) => t.value === this.value), this.updateComplete.then(() => this._focusActiveOption()));
       return;
     }
     switch (o.key) {
       case "ArrowDown":
-        o.preventDefault(), this.activeIndex = (this.activeIndex + 1) % this.options.length;
+        o.preventDefault(), this.activeIndex = (this.activeIndex + 1) % this.options.length, this.updateComplete.then(() => this._focusActiveOption());
         break;
       case "ArrowUp":
-        o.preventDefault(), this.activeIndex = (this.activeIndex - 1 + this.options.length) % this.options.length;
+        o.preventDefault(), this.activeIndex = (this.activeIndex - 1 + this.options.length) % this.options.length, this.updateComplete.then(() => this._focusActiveOption());
+        break;
+      case "Home":
+        o.preventDefault(), this.activeIndex = 0, this.updateComplete.then(() => this._focusActiveOption());
+        break;
+      case "End":
+        o.preventDefault(), this.activeIndex = this.options.length - 1, this.updateComplete.then(() => this._focusActiveOption());
         break;
       case "Enter":
         o.preventDefault(), this.activeIndex >= 0 && this.selectOption(this.options[this.activeIndex]);
@@ -2766,27 +2806,32 @@ let x = class extends f {
         break;
     }
   }
-  updated(o) {
-    this.options.length > 0 && (this.options.some((e) => e.value === this.value) || (this.value = this.options[0].value));
+  updated() {
+    this.options.length > 0 && (this.options.some((t) => t.value === this.value) || (this.value = this.options[0].value));
   }
   render() {
-    const o = q.checkstroke.replace(
+    const o = K.checkstroke.replace(
       "<svg",
       '<svg aria-hidden="true" focusable="false" part="svg"'
     ), t = this.options.find((e) => e.value === this.value);
     return c`
 			<button
-			@click=${this.toggle}
-			@keydown=${this.handleKeydown}
-			aria-haspopup="listbox"
-			aria-expanded="${this.open}"
-			style=${`width: ${this.width};`}
-			?disabled=${this.disabled}
-			class="btn-dropdown"
+				role="combobox"
+				aria-haspopup="listbox"
+				aria-controls="dropdown-listbox"
+				aria-expanded="${this.open}"
+				aria-disabled="${this.disabled ? "true" : "false"}"
+				aria-labelledby="dropdown-label"
+				@click=${this.toggle}
+				@keydown=${this.handleKeydown}
+				style=${`width: ${this.width};`}
+				?disabled=${this.disabled}
+				class="btn-dropdown"
 			>
-
-				<img src="${G(t == null ? void 0 : t.imgurl)}" />
-				<span class="label">${t ? t.label : "Select an option"}</span>
+				<img alt="${H(t == null ? void 0 : t.label)}" src="${H(t == null ? void 0 : t.imgurl)}" />
+				<span id="dropdown-label" class="label">
+					${t ? t.label : "Select an option"}
+				</span>
 				<div class="right">
 					<span class="additional-text">${this.additionaltext}</span>
 					<span class="arrow">
@@ -2794,34 +2839,43 @@ let x = class extends f {
 							icon="${this.open ? "triangleup" : "triangledown"}"
 							size="small"
 							bgstyle="none-contrast"
-							type="span"
-							>
+							type="span">
 						</o-icon-button>
 					</span>
 				</div>
 			</button>
 
 			${this.open ? c`
-				<ul role="listbox" style=${`width: ${this.width};`}>
-					${this.options.map(
+					<ul
+						id="dropdown-listbox"
+						role="listbox"
+						aria-activedescendant="${this.activeIndex >= 0 ? "option-" + this.activeIndex : ""}"
+						style=${`width: ${this.width};`}
+					>
+						${this.options.map(
       (e, n) => c`
-							<li role="option" aria-selected="${e.value === this.value}" 
-								class="${n === this.activeIndex ? "active" : ""} ${e.disabled ? "disabled" : ""}"
-								@click=${() => this.selectOption(e)}
+								<li
+									id="option-${n}"
+									role="option"
+									aria-selected="${e.value === this.value}"
+									aria-disabled="${e.disabled ? "true" : "false"}"
+									tabindex="${n === this.activeIndex ? "0" : "-1"}"
+									class="${n === this.activeIndex ? "active" : ""} ${e.disabled ? "disabled" : ""}"
+									@click=${() => this.selectOption(e)}
 								>
-								<a href="${G(t == null ? void 0 : t.url)}">
-									<img src="${G(t == null ? void 0 : t.imgurl)}" />
-									<span class="label">${e.label}</span>
-									<div class="right">
-										<span class="additional-text">${G(e.additionaltext)}</span>
-										${e.value === this.value && (e.additionaltext == null || e.additionaltext == null) ? c`<span class="check">${B(o)}</span>` : null}
-									</div>
-								</a>
-							</li>
-						`
+									<a href="${H(e.url)}">
+										<img alt="${H(e.label)}" src="${H(e.imgurl)}" />
+										<span class="label">${e.label}</span>
+										<div class="right">
+											<span class="additional-text">${H(e.additionaltext)}</span>
+											${e.value === this.value && !e.additionaltext ? c`
+												<span class="check">${B(o)}</span>` : null}
+										</div>
+									</a>
+								</li>
+							`
     )}
-				</ul>
-					` : null}
+					</ul>` : null}
 
 			<input type="hidden" name="${this.name}" .value="${this.value}" />
 		`;
@@ -3022,13 +3076,13 @@ k([
   a({ type: String, reflect: !0 })
 ], x.prototype, "width", 2);
 k([
-  U()
+  N()
 ], x.prototype, "open", 2);
 k([
-  U()
+  N()
 ], x.prototype, "activeIndex", 2);
 k([
-  U()
+  N()
 ], x.prototype, "menuWidth", 2);
 x = k([
   $("o-dropdown-variant")