@florid-kit/components 0.7.2 → 0.7.5

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, B = globalThis, Et = B.trustedTypes, Xt = Et ? Et.emptyScript : "", dt = B.reactiveElementPolyfillSupport, X = (o, t) => o, st = { toAttribute(o, t) {
   switch (t) {
     case Boolean:
       o = o ? Xt : null;
@@ -74,8 +74,8 @@ 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 {
+Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), B.litPropertyMetadata ?? (B.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
+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) {
@@ -192,8 +192,8 @@ let R = class extends HTMLElement {
     var s, r;
     const n = this.constructor, i = n._$Eh.get(t);
     if (i !== void 0 && this._$Em !== i) {
-      const h = n.getPropertyOptions(i), l = typeof h.converter == "function" ? { fromAttribute: h.converter } : ((s = h.converter) == null ? void 0 : s.fromAttribute) !== void 0 ? h.converter : st;
-      this._$Em = i, this[i] = l.fromAttribute(e, h.type) ?? ((r = this._$Ej) == null ? void 0 : r.get(i)) ?? null, this._$Em = null;
+      const h = n.getPropertyOptions(i), c = typeof h.converter == "function" ? { fromAttribute: h.converter } : ((s = h.converter) == null ? void 0 : s.fromAttribute) !== void 0 ? h.converter : st;
+      this._$Em = i, this[i] = c.fromAttribute(e, h.type) ?? ((r = this._$Ej) == null ? void 0 : r.get(i)) ?? null, this._$Em = null;
     }
   }
   requestUpdate(t, e, n) {
@@ -231,8 +231,8 @@ let R = class extends HTMLElement {
       }
       const i = this.constructor.elementProperties;
       if (i.size > 0) for (const [s, r] of i) {
-        const { wrapped: h } = r, l = this[s];
-        h !== !0 || this._$AL.has(s) || l === void 0 || this.C(s, void 0, r, l);
+        const { wrapped: h } = r, c = this[s];
+        h !== !0 || this._$AL.has(s) || c === void 0 || this.C(s, void 0, r, c);
       }
     }
     let t = !1;
@@ -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 }), (B.reactiveElementVersions ?? (B.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$", O = `lit$${Math.random().toFixed(9).slice(2)}$`, jt = "?" + O, 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 }), l = 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);
-    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);
+    const c = o[h];
+    let v, b, p = -1, S = 0;
+    for (; S < c.length && (r.lastIndex = S, b = r.exec(c), b !== null); ) S = 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 P = r === D && o[h + 1].startsWith("/>") ? " " : "";
+    s += r === G ? c + Jt : p >= 0 ? (n.push(v), c.slice(0, p) + Tt + c.slice(p) + O + P) : c + O + (p === -2 ? h : P);
   }
   return [Nt(o, s + (o[e] || "<?>") + (t === 2 ? "</svg>" : t === 3 ? "</math>" : "")), n];
 };
@@ -306,44 +306,44 @@ class tt {
     let i;
     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) {
+    const h = t.length - 1, c = this.parts, [v, b] = te(t, e);
+    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 && c.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);
-          l.push({ type: 1, index: s, name: nt[2], strings: I, ctor: nt[1] === "." ? oe : nt[1] === "?" ? ie : nt[1] === "@" ? ne : lt }), i.removeAttribute(p);
-        } else p.startsWith(P) && (l.push({ type: 6, index: s }), i.removeAttribute(p));
+          const S = b[r++], P = i.getAttribute(p).split(O), nt = /([.?@])?(.*)/.exec(S);
+          c.push({ type: 1, index: s, name: nt[2], strings: P, ctor: nt[1] === "." ? oe : nt[1] === "?" ? ie : nt[1] === "@" ? ne : lt }), i.removeAttribute(p);
+        } else p.startsWith(O) && (c.push({ type: 6, index: s }), i.removeAttribute(p));
         if (Ut.test(i.tagName)) {
-          const p = i.textContent.split(P), A = p.length - 1;
-          if (A > 0) {
+          const p = i.textContent.split(O), S = p.length - 1;
+          if (S > 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 });
-            i.append(p[A], Y());
+            for (let P = 0; P < S; P++) i.append(p[P], Y()), M.nextNode(), c.push({ type: 2, index: ++s });
+            i.append(p[S], Y());
           }
         }
-      } else if (i.nodeType === 8) if (i.data === jt) l.push({ type: 2, index: s });
+      } else if (i.nodeType === 8) if (i.data === jt) c.push({ type: 2, index: s });
       else {
         let p = -1;
-        for (; (p = i.data.indexOf(P, p + 1)) !== -1; ) l.push({ type: 7, index: s }), p += P.length - 1;
+        for (; (p = i.data.indexOf(O, p + 1)) !== -1; ) c.push({ type: 7, index: s }), p += O.length - 1;
       }
       s++;
     }
   }
   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];
-    for (; l !== void 0; ) {
-      if (r === l.index) {
+    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, c = n[0];
+    for (; c !== void 0; ) {
+      if (r === c.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];
+        c.type === 2 ? v = new it(s, s.nextSibling, this, t) : c.type === 1 ? v = new c.ctor(s, c.name, c.strings, this, t) : c.type === 6 && (v = new re(s, this, t)), this._$AV.push(v), c = n[++h];
       }
-      r !== (l == null ? void 0 : l.index) && (s = H.nextNode(), r++);
+      r !== (c == null ? void 0 : c.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;
+      let c, v;
+      for (t = s[0], c = 0; c < s.length - 1; c++) v = Z(this, h[n + c], e, c), v === U && (v = this._$AH[c]), r || (r = !Q(v) || v !== this._$AH[c]), v === d ? t = d : t !== d && (t += (v ?? "") + s[c + 1]), this._$AH[c] = 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,20 +541,20 @@ 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
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const $ = (o) => (t, e) => {
+const _ = (o) => (t, e) => {
   e !== void 0 ? e.addInitializer(() => {
     customElements.define(o, t);
   }) : customElements.define(o, t);
@@ -570,8 +570,8 @@ const ae = { attribute: !0, type: String, converter: st, reflect: !1, hasChanged
   if (s === void 0 && globalThis.litPropertyMetadata.set(i, s = /* @__PURE__ */ new Map()), n === "setter" && ((o = Object.create(o)).wrapped = !0), s.set(e.name, o), n === "accessor") {
     const { name: r } = e;
     return { set(h) {
-      const l = t.get.call(this);
-      t.set.call(this, h), this.requestUpdate(r, l, o);
+      const c = t.get.call(this);
+      t.set.call(this, h), this.requestUpdate(r, c, o);
     }, init(h) {
       return h !== void 0 && this.C(r, void 0, o, h), h;
     } };
@@ -579,8 +579,8 @@ const ae = { attribute: !0, type: String, converter: st, reflect: !1, hasChanged
   if (n === "setter") {
     const { name: r } = e;
     return function(h) {
-      const l = this[r];
-      t.call(this, h), this.requestUpdate(r, l, o);
+      const c = this[r];
+      t.call(this, h), this.requestUpdate(r, c, o);
     };
   }
   throw Error("Unsupported decorator location: " + n);
@@ -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;
@@ -802,7 +802,7 @@ bt.directiveName = "unsafeHTML", bt.resultType = 1;
 class ft extends bt {
 }
 ft.directiveName = "unsafeSVG", ft.resultType = 2;
-const B = Be(ft);
+const z = Be(ft);
 var De = Object.defineProperty, He = Object.getOwnPropertyDescriptor, m = (o, t, e, n) => {
   for (var i = n > 1 ? void 0 : n ? He(t, e) : t, s = o.length - 1, r; s >= 0; s--)
     (r = o[s]) && (i = (n ? r(t, e, i) : r(i)) || i);
@@ -834,28 +834,28 @@ 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"'
     );
-    return c`<span class="${o === "start" ? "icon-start" : "icon-end"}">${B(e)}</span>`;
+    return l`<span class="${o === "start" ? "icon-start" : "icon-end"}">${z(e)}</span>`;
   }
   renderButton() {
     const o = this.text || this.textsecond;
-    return c`
+    return l`
       <button type=${this.type} class="button" ?disabled=${this.disabled} @click=${this.handleClick}>
           ${this.startIcon ? this.renderIcon("start") : d}
-          ${o ? c`
-                ${this.text ? c`<span class="text">${this.text}</span>` : d}
-                ${this.textsecond ? c`<span class="text">${this.textsecond}</span>` : d}
-              ` : c`<slot></slot>`}
+          ${o ? l`
+                ${this.text ? l`<span class="text">${this.text}</span>` : d}
+                ${this.textsecond ? l`<span class="text">${this.textsecond}</span>` : d}
+              ` : l`<slot></slot>`}
           ${this.endIcon ? this.renderIcon("end") : d}
       </button>
     `;
   }
   renderLink() {
     const o = this.text || this.textsecond;
-    return c`
+    return l`
       <a
         href=${this.href}
         target=${this.target || d}
@@ -863,10 +863,10 @@ let u = class extends Me {
         ?disabled=${this.disabled}
       >
           ${this.startIcon ? this.renderIcon("start") : d}
-          ${o ? c`
-                ${this.text ? c`<span>${this.text}</span>` : d}
-                ${this.textsecond ? c`<span>${this.textsecond}</span>` : d}
-              ` : c`<slot></slot>`}
+          ${o ? l`
+                ${this.text ? l`<span>${this.text}</span>` : d}
+                ${this.textsecond ? l`<span>${this.textsecond}</span>` : d}
+              ` : l`<slot></slot>`}
           ${this.endIcon ? this.renderIcon("end") : d}
       </a>
     `;
@@ -1075,14 +1075,14 @@ m([
   a({ type: String })
 ], u.prototype, "target", 2);
 u = m([
-  $("o-button")
+  _("o-button")
 ], u);
 var Te = 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);
   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,14 +1102,14 @@ 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"'
     );
-    return c`
+    return l`
 			<button type="button" aria-describedby="${this.ariaDescribedBy}" class="wishlist-button">
 				<span class="sr-only">${this.label}</span>
-				${B(o)}
+				${z(o)}
 			</button>
 		`;
   }
@@ -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,52 +1190,53 @@ 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([
-  $("o-wishlist-button")
-], Z);
-var Ue = Object.defineProperty, Ne = Object.getOwnPropertyDescriptor, z = (o, t, e, n) => {
+], q.prototype, "label", 2);
+q = ct([
+  _("o-wishlist-button")
+], q);
+var Ue = Object.defineProperty, Ne = Object.getOwnPropertyDescriptor, k = (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);
   return n && i && Ue(t, e, i), i;
 };
-let C = class extends f {
+let x = class extends f {
   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;
+    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 = "";
   }
   updated(o) {
     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"'
-    );
-    return c`
-			${this.type === "span" ? c`
+    ), n = this.showSrLabel ? l`<span class="sr-only">${this.srLabel}</span>` : null;
+    return l`
+			${this.type === "span" ? l`
 				<span class="icon icon-button ${this.size} ${this.bgstyle} ${this.status} ${t}" ?disabled="${this.disabled}">	
-					${B(e)}
+					${z(e)}
 				</span>
-			` : c`
+			` : l`
 				<button
 					type="button"
 					aria-label="icon"
 					class="icon-button ${this.size} ${this.bgstyle} ${this.status} ${t}"
 					?disabled="${this.disabled}"
 				>
-					${B(e)}
+					${z(e)}
+					${n}
 				</button>
 			`}
 		`;
   }
 };
-C.styles = w`
+x.styles = w`
 		:host {
 			display: inline-flex;
 			justify-content: center;
@@ -1432,40 +1433,49 @@ C.styles = w`
 					fill: var(--color-content-disabled);
 				}
 			}
-			
+		}
+
+		.sr-only {
+			display: none;
 		}
 	`;
-z([
+k([
   a({ type: String, reflect: !0 })
-], C.prototype, "bgstyle", 2);
-z([
+], x.prototype, "bgstyle", 2);
+k([
   a({ type: String, reflect: !0 })
-], C.prototype, "size", 2);
-z([
+], x.prototype, "size", 2);
+k([
   a({ type: String, reflect: !0 })
-], C.prototype, "status", 2);
-z([
+], x.prototype, "status", 2);
+k([
   a({ type: String, reflect: !0 })
-], C.prototype, "type", 2);
-z([
+], x.prototype, "type", 2);
+k([
   a({ type: String })
-], C.prototype, "strokewidth", 2);
-z([
+], x.prototype, "strokewidth", 2);
+k([
   a({ type: String })
-], C.prototype, "icon", 2);
-z([
+], x.prototype, "icon", 2);
+k([
   a({ type: Boolean, reflect: !0 })
-], C.prototype, "disabled", 2);
-C = z([
-  $("o-icon-button")
-], C);
+], x.prototype, "disabled", 2);
+k([
+  a({ type: Boolean })
+], x.prototype, "showSrLabel", 2);
+k([
+  a({ type: String })
+], x.prototype, "srLabel", 2);
+x = k([
+  _("o-icon-button")
+], x);
 /**
  * @license
  * 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;
@@ -1479,13 +1489,13 @@ let E = class extends f {
   }
   render() {
     const o = this.href || "#";
-    return c`
+    return l`
             <a 
                 href="${o}" 
-                target="${G(this.target || void 0)}"
+                target="${H(this.target || void 0)}"
                 @click="${this._handleClick}"
             >
-                ${this.endIcon && this.reverseEndIcon ? c`
+                ${this.endIcon && this.reverseEndIcon ? l`
                             <o-icon-button
                                 icon="chevronLeft"
                                 bgstyle="${this.inverse ? "none-light" : "none-contrast"}"
@@ -1495,7 +1505,7 @@ let E = class extends f {
                             ></o-icon-button>
                     ` : null}
                 <span class="link-text"><slot></slot></span>
-                ${this.endIcon && !this.reverseEndIcon ? c`
+                ${this.endIcon && !this.reverseEndIcon ? l`
                             <o-icon-button
                                 icon="chevronRight"
                                 bgstyle="${this.inverse ? "none-light" : "none-contrast"}"
@@ -1596,26 +1606,26 @@ E.styles = w`
         }
         /* End of underline effect */
     `;
-N([
+F([
   a({ type: String })
 ], E.prototype, "href", 2);
-N([
+F([
   a({ type: String })
 ], E.prototype, "target", 2);
-N([
+F([
   a({ type: String, reflect: !0 })
 ], E.prototype, "template", 2);
-N([
+F([
   a({ type: Boolean, reflect: !0 })
 ], E.prototype, "inverse", 2);
-N([
+F([
   a({ type: Boolean, reflect: !0 })
 ], E.prototype, "endIcon", 2);
-N([
+F([
   a({ type: Boolean, reflect: !0 })
 ], E.prototype, "reverseEndIcon", 2);
-E = N([
-  $("o-link")
+E = F([
+  _("o-link")
 ], E);
 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--)
@@ -1637,14 +1647,14 @@ let W = class extends f {
   }
   render() {
     const o = this.getStarKeys();
-    return c`
+    return l`
 			<div class="rating">
 			<div class="stars">
 				${o.map(
-      (t) => c`<span class="star">${B(q[t] ?? "")}</span>`
+      (t) => l`<span class="star">${z(K[t] ?? "")}</span>`
     )}
 			</div>
-			${this.reviewCount != null && this.href != null ? c`<o-link template="review" href="${this.href}">${this.reviewCount}</o-link>` : null}
+			${this.reviewCount != null && this.href != null ? l`<o-link template="review" href="${this.href}">${this.reviewCount}</o-link>` : null}
 			</div>
 		`;
   }
@@ -1693,12 +1703,12 @@ ht([
   a({ type: String })
 ], W.prototype, "href", 2);
 W = ht([
-  $("o-rating")
+  _("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() {
@@ -1750,7 +1760,7 @@ let g = class extends f {
     this.style.setProperty("--z-overlay", `${this.zIndex}`), this.style.setProperty("--z-panel", `${this.zIndex + 1}`);
   }
   render() {
-    return c`
+    return l`
 			<div class="overlay" style="z-index: ${this.zIndex}" @click=${this.closePanel}></div>
 			<div
 				class="panel"
@@ -1760,9 +1770,9 @@ let g = class extends f {
 				style="z-index: ${this.zIndex + 1}"
 			>
 
-				${this.showHeader ? c`
+				${this.showHeader ? l`
 					<div class="header">
-						${this.showHeaderStartIcon ? c`
+						${this.showHeaderStartIcon ? l`
 							<o-icon-button icon="arrowLeft" size="small" class="return-btn" bgstyle="background-light" @click=${this.closePanel} aria-label="${this.closeButtonLabel}"></o-icon-button>
 						` : null}
 						<span id="panel-title" class="panel-title">${this.headerTitle}</span>
@@ -1774,9 +1784,9 @@ let g = class extends f {
 					<slot></slot>
 				</div>
 
-				${this.showFooter ? c`
+				${this.showFooter ? l`
 							<div class="footer">
-								${this.firstButtonVariant && this.firstButtonLabel ? c`
+								${this.firstButtonVariant && this.firstButtonLabel ? l`
 							<o-button
 								variant="${this.firstButtonVariant}"
 								@click=${this.handleFirstClick}
@@ -1785,7 +1795,7 @@ let g = class extends f {
 							</o-button>
 						` : null}
 
-								${this.secondaryButtonVariant && this.secondaryButtonLabel ? c`
+								${this.secondaryButtonVariant && this.secondaryButtonLabel ? l`
 							<o-button
 								variant="${this.secondaryButtonVariant}"
 								@click=${this.handleSecondaryClick}
@@ -1986,16 +1996,16 @@ y([
   a({ type: Boolean, reflect: !0 })
 ], g.prototype, "initialized", 2);
 g = y([
-  $("o-side-panel")
+  _("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 L = class extends f {
   constructor() {
-    super(...arguments), this.thumbnails = [], this.activeIndex = 0, this.disabledIndexes = [], this.maxWidth = "100%", this.focusedIndex = 0, this.playerIconTemplate = c`
+    super(...arguments), this.thumbnails = [], this.activeIndex = 0, this.disabledIndexes = [], this.maxWidth = "100%", this.focusedIndex = 0, this.playerIconTemplate = l`
     <o-icon-button
       icon="playerv"
       size="xsmall"
@@ -2029,11 +2039,11 @@ let S = class extends f {
     this.disabledIndexes.includes(o) || (this.activeIndex = o, this.swiperInstance && typeof this.swiperInstance.slideTo == "function" && this.swiperInstance.slideTo(o), this.dispatchEvent(new CustomEvent("thumbnail-select", { detail: { index: o } })));
   }
   render() {
-    return c`
+    return l`
       <div class="scroll-container" style="max-width: ${this.maxWidth};">
         ${this.thumbnails.map((o, t) => {
       const e = this.disabledIndexes.includes(t), n = this.activeIndex === t, i = o.type === "video";
-      return c`
+      return l`
             <div class="thumb-wrapper">
               <button
                 class="thumb"
@@ -2046,7 +2056,7 @@ let S = class extends f {
               >
                 <img src="${o.src}" />
               </button>
-              ${i ? c`<div class="play-icon-wrapper">${this.playerIconTemplate}</div>` : null}
+              ${i ? l`<div class="play-icon-wrapper">${this.playerIconTemplate}</div>` : null}
             </div>
           `;
     })}
@@ -2054,7 +2064,7 @@ let S = class extends f {
     `;
   }
 };
-S.styles = w`
+L.styles = w`
     :host {
       display: flex;
       gap: 5px;
@@ -2158,27 +2168,27 @@ S.styles = w`
       width: 0;
     }
   `;
-F([
+R([
   a({ type: Array })
-], S.prototype, "thumbnails", 2);
-F([
+], L.prototype, "thumbnails", 2);
+R([
   a({ type: Number })
-], S.prototype, "activeIndex", 2);
-F([
+], L.prototype, "activeIndex", 2);
+R([
   a({ type: Array })
-], S.prototype, "disabledIndexes", 2);
-F([
+], L.prototype, "disabledIndexes", 2);
+R([
   a({ type: String })
-], S.prototype, "maxWidth", 2);
-F([
+], L.prototype, "maxWidth", 2);
+R([
   a({ type: Object })
-], S.prototype, "swiperInstance", 2);
-F([
-  U()
-], S.prototype, "focusedIndex", 2);
-S = F([
-  $("thumbnail-navigation")
-], S);
+], L.prototype, "swiperInstance", 2);
+R([
+  N()
+], L.prototype, "focusedIndex", 2);
+L = R([
+  _("thumbnail-navigation")
+], L);
 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);
@@ -2189,7 +2199,7 @@ let et = class extends f {
     super(...arguments), this.type = "", this.bgstyle = "background-white";
   }
   render() {
-    return c`
+    return l`
       <span class="tag ${this.bgstyle}"><slot></slot></span>
     `;
   }
@@ -2257,7 +2267,7 @@ Ct([
   a({ type: String, reflect: !0 })
 ], et.prototype, "bgstyle", 2);
 et = Ct([
-  $("o-tag")
+  _("o-tag")
 ], et);
 var Ye = Object.defineProperty, Qe = Object.getOwnPropertyDescriptor, kt = (o, t, e, n) => {
   for (var i = n > 1 ? void 0 : n ? Qe(t, e) : t, s = o.length - 1, r; s >= 0; s--)
@@ -2269,7 +2279,7 @@ let ot = class extends f {
     super(...arguments), this.type = "top", this.text = "";
   }
   render() {
-    return c`
+    return l`
       <div class="tooltip">
         <span class="tooltiptext">${this.text}</span>
         <slot></slot>
@@ -2377,18 +2387,18 @@ kt([
   a({ type: String, reflect: !0 })
 ], ot.prototype, "text", 2);
 ot = kt([
-  $("o-tooltip")
+  _("o-tooltip")
 ], ot);
-var to = Object.defineProperty, eo = Object.getOwnPropertyDescriptor, L = (o, t, e, n) => {
+var to = Object.defineProperty, eo = Object.getOwnPropertyDescriptor, I = (o, t, e, n) => {
   for (var i = n > 1 ? void 0 : n ? eo(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 && to(t, e, i), i;
 };
-let _ = class extends f {
+let C = 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 +2408,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 +2432,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,51 +2460,64 @@ 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`
+    return l`
       <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};`}>
+      ${this.open ? l`
+          <ul
+            id="dropdown-listbox"
+            role="listbox"
+            aria-activedescendant="${this.activeIndex >= 0 ? "option-" + this.activeIndex : ""}"
+            style=${`width: ${this.width};`}
+          >
             ${this.options.map(
-      (e, n) => c`                      
+      (e, n) => l`                      
                 <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`
+                  ${e.url ? l`
                   <a href="${e.url}">
-                      <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>
-              `
+                    ${e.value === this.value ? l`<span class="check">${z(o)}</span>` : null}
+                  </a>` : l`
+                    <span>${e.label}</span>
+                    ${e.value === this.value ? l`<span class="check">${z(o)}</span>` : null}`}
+                </li>`
     )}
-          </ul>
-        ` : null}
+          </ul>` : null}
 
       <input type="hidden" name="${this.name}" .value="${this.value}" />
     `;
   }
 };
-_.styles = w`
+C.styles = w`
 		:host {
 			display: inline-block;
 			position: relative;
@@ -2618,33 +2657,33 @@ _.styles = w`
 			display: none;
 		}
 	`;
-L([
+I([
   a({ type: Array, reflect: !0 })
-], _.prototype, "options", 2);
-L([
+], C.prototype, "options", 2);
+I([
   a({ type: String, reflect: !0 })
-], _.prototype, "value", 2);
-L([
+], C.prototype, "value", 2);
+I([
   a({ type: String, reflect: !0 })
-], _.prototype, "name", 2);
-L([
+], C.prototype, "name", 2);
+I([
   a({ type: Boolean, reflect: !0 })
-], _.prototype, "disabled", 2);
-L([
+], C.prototype, "disabled", 2);
+I([
   a({ type: String, reflect: !0 })
-], _.prototype, "width", 2);
-L([
-  U()
-], _.prototype, "open", 2);
-L([
-  U()
-], _.prototype, "activeIndex", 2);
-L([
-  U()
-], _.prototype, "menuWidth", 2);
-_ = L([
-  $("o-dropdown")
-], _);
+], C.prototype, "width", 2);
+I([
+  N()
+], C.prototype, "open", 2);
+I([
+  N()
+], C.prototype, "activeIndex", 2);
+I([
+  N()
+], C.prototype, "menuWidth", 2);
+C = I([
+  _("o-dropdown")
+], C);
 var oo = Object.getOwnPropertyDescriptor, io = (o, t, e, n) => {
   for (var i = n > 1 ? void 0 : n ? oo(t, e) : t, s = o.length - 1, r; s >= 0; s--)
     (r = o[s]) && (i = r(i) || i);
@@ -2652,7 +2691,7 @@ var oo = Object.getOwnPropertyDescriptor, io = (o, t, e, n) => {
 };
 let yt = class extends f {
   render() {
-    return c` <span class="dots"></span> `;
+    return l` <span class="dots"></span> `;
   }
 };
 yt.styles = w`
@@ -2708,18 +2747,18 @@ yt.styles = w`
     }
   `;
 yt = io([
-  $("o-dots")
+  _("o-dots")
 ], yt);
-var no = Object.defineProperty, ro = Object.getOwnPropertyDescriptor, k = (o, t, e, n) => {
+var no = Object.defineProperty, ro = Object.getOwnPropertyDescriptor, A = (o, t, e, n) => {
   for (var i = n > 1 ? void 0 : n ? ro(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 && no(t, e, i), i;
 };
-let x = class extends f {
+let $ = 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);
@@ -2729,17 +2768,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) {
@@ -2747,17 +2792,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]);
@@ -2767,27 +2816,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`
+    return l`
 			<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">
@@ -2795,40 +2849,49 @@ 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(
-      (e, n) => c`
-							<li role="option" aria-selected="${e.value === this.value}" 
-								class="${n === this.activeIndex ? "active" : ""} ${e.disabled ? "disabled" : ""}"
-								@click=${() => this.selectOption(e)}
+			${this.open ? l`
+					<ul
+						id="dropdown-listbox"
+						role="listbox"
+						aria-activedescendant="${this.activeIndex >= 0 ? "option-" + this.activeIndex : ""}"
+						style=${`width: ${this.width};`}
+					>
+						${this.options.map(
+      (e, n) => l`
+								<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 ? l`
+												<span class="check">${z(o)}</span>` : null}
+										</div>
+									</a>
+								</li>
+							`
     )}
-				</ul>
-					` : null}
+					</ul>` : null}
 
 			<input type="hidden" name="${this.name}" .value="${this.value}" />
 		`;
   }
 };
-x.styles = w`
+$.styles = w`
 		:host {
 			display: inline-block;
 			position: relative;
@@ -3004,33 +3067,33 @@ x.styles = w`
 			display: none;
 		}
 	`;
-k([
+A([
   a({ type: Array, reflect: !0 })
-], x.prototype, "options", 2);
-k([
+], $.prototype, "options", 2);
+A([
   a({ type: String, reflect: !0 })
-], x.prototype, "value", 2);
-k([
+], $.prototype, "value", 2);
+A([
   a({ type: String, reflect: !0 })
-], x.prototype, "name", 2);
-k([
+], $.prototype, "name", 2);
+A([
   a({ type: String, reflect: !0 })
-], x.prototype, "additionaltext", 2);
-k([
+], $.prototype, "additionaltext", 2);
+A([
   a({ type: Boolean, reflect: !0 })
-], x.prototype, "disabled", 2);
-k([
+], $.prototype, "disabled", 2);
+A([
   a({ type: String, reflect: !0 })
-], x.prototype, "width", 2);
-k([
-  U()
-], x.prototype, "open", 2);
-k([
-  U()
-], x.prototype, "activeIndex", 2);
-k([
-  U()
-], x.prototype, "menuWidth", 2);
-x = k([
-  $("o-dropdown-variant")
-], x);
+], $.prototype, "width", 2);
+A([
+  N()
+], $.prototype, "open", 2);
+A([
+  N()
+], $.prototype, "activeIndex", 2);
+A([
+  N()
+], $.prototype, "menuWidth", 2);
+$ = A([
+  _("o-dropdown-variant")
+], $);