@florid-kit/components 0.7.4 → 0.7.6

package/index.mjs

@@ -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: 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) {
+const { is: Vt, defineProperty: Zt, getOwnPropertyDescriptor: qt, getOwnPropertyNames: Wt, getOwnPropertySymbols: Kt, getPrototypeOf: Gt } = Object, z = globalThis, Et = z.trustedTypes, Xt = Et ? Et.emptyScript : "", dt = z.reactiveElementPolyfillSupport, X = (o, t) => o, st = { toAttribute(o, t) {
   switch (t) {
     case Boolean:
       o = o ? Xt : null;
@@ -74,7 +74,7 @@ const { is: Vt, defineProperty: Zt, getOwnPropertyDescriptor: qt, 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());
+Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), z.litPropertyMetadata ?? (z.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
 let V = class extends HTMLElement {
   static addInitializer(t) {
     this._$Ei(), (this.l ?? (this.l = [])).push(t);
@@ -192,8 +192,8 @@ let V = 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 V = 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,15 +276,15 @@ let V = class extends HTMLElement {
   firstUpdated(t) {
   }
 };
-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");
+V.elementStyles = [], V.shadowRootOptions = { mode: "open" }, V[X("elementProperties")] = /* @__PURE__ */ new Map(), V[X("finalized")] = /* @__PURE__ */ new Map(), dt == null || dt({ ReactiveElement: V }), (z.reactiveElementVersions ?? (z.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}>`, 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);
+const J = globalThis, at = J.trustedTypes, It = at ? at.createPolicy("lit-html", { createHTML: (o) => o }) : void 0, Tt = "$lit$", B = `lit$${Math.random().toFixed(9).slice(2)}$`, jt = "?" + B, 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, H = 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;
@@ -293,11 +293,11 @@ const te = (o, t) => {
   const e = o.length - 1, n = [];
   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 === 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 === G ? 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 = H) : b[3] !== void 0 && (r = H) : r === H ? 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 ? H : b[3] === '"' ? zt : Bt) : r === zt || r === Bt ? r = H : r === Pt || r === Ot ? r = G : (r = H, i = void 0);
+    const P = r === H && o[h + 1].startsWith("/>") ? " " : "";
+    s += r === G ? c + Jt : p >= 0 ? (n.push(v), c.slice(0, p) + Tt + c.slice(p) + B + P) : c + B + (p === -2 ? h : P);
   }
   return [Nt(o, s + (o[e] || "<?>") + (t === 2 ? "</svg>" : t === 3 ? "</math>" : "")), n];
 };
@@ -306,29 +306,29 @@ class tt {
     let i;
     this.parts = [];
     let s = 0, r = 0;
-    const h = t.length - 1, l = this.parts, [v, b] = te(t, e);
+    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 = M.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(B), 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(B) && (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(B), S = p.length - 1;
+          if (S > 0) {
             i.textContent = at ? at.emptyScript : "";
-            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());
+            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(B, p + 1)) !== -1; ) c.push({ type: 7, index: s }), p += B.length - 1;
       }
       s++;
     }
@@ -358,13 +358,13 @@ class ee {
   u(t) {
     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 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 = M.nextNode(), r++);
+      r !== (c == null ? void 0 : c.index) && (s = M.nextNode(), r++);
     }
     return M.currentNode = j, i;
   }
@@ -452,8 +452,8 @@ class lt {
     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 = 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;
+      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);
   }
@@ -554,7 +554,7 @@ vt == null || vt({ LitElement: f });
  * 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);
@@ -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 D = 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);
@@ -838,24 +838,24 @@ let u = class extends Me {
       "<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"}">${D(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,7 +1075,7 @@ 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--)
@@ -1106,10 +1106,10 @@ let q = class extends f {
       "<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)}
+				${D(o)}
 			</button>
 		`;
   }
@@ -1198,16 +1198,22 @@ ct([
   a({ type: String, reflect: !0 })
 ], q.prototype, "label", 2);
 q = ct([
-  $("o-wishlist-button")
+  _("o-wishlist-button")
 ], q);
-var Ue = Object.defineProperty, Ne = Object.getOwnPropertyDescriptor, z = (o, t, e, n) => {
+/**
+ * @license
+ * Copyright 2018 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const O = (o) => o ?? d;
+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);
@@ -1216,26 +1222,27 @@ let C = class extends f {
     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, i = this.showSrLabel ? null : "icon";
+    return l`
+			${this.type === "span" ? l`
 				<span class="icon icon-button ${this.size} ${this.bgstyle} ${this.status} ${t}" ?disabled="${this.disabled}">	
-					${B(e)}
+					${D(e)}
 				</span>
-			` : c`
+			` : l`
 				<button
 					type="button"
-					aria-label="icon"
+					aria-label=${O(i)}
 					class="icon-button ${this.size} ${this.bgstyle} ${this.status} ${t}"
 					?disabled="${this.disabled}"
 				>
-					${B(e)}
+					${D(e)}
+					${n}
 				</button>
 			`}
 		`;
   }
 };
-C.styles = w`
+x.styles = w`
 		:host {
 			display: inline-flex;
 			justify-content: center;
@@ -1432,45 +1439,48 @@ 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);
-/**
- * @license
- * Copyright 2018 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-const H = (o) => o ?? d;
+], 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);
 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 S = class extends f {
+let E = class extends f {
   constructor() {
     super(...arguments), this.href = "", this.target = "", this.template = "standard", this.inverse = !1, this.endIcon = !1, this.reverseEndIcon = !1;
   }
@@ -1479,13 +1489,13 @@ let S = class extends f {
   }
   render() {
     const o = this.href || "#";
-    return c`
+    return l`
             <a 
                 href="${o}" 
-                target="${H(this.target || void 0)}"
+                target="${O(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 S = 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"}"
@@ -1508,7 +1518,7 @@ let S = class extends f {
         `;
   }
 };
-S.styles = w`
+E.styles = w`
         :host([template="standard"]) a {
             color: var(--color-content-action-secondary);
             font-size: var(--font-size-200);
@@ -1598,25 +1608,25 @@ S.styles = w`
     `;
 F([
   a({ type: String })
-], S.prototype, "href", 2);
+], E.prototype, "href", 2);
 F([
   a({ type: String })
-], S.prototype, "target", 2);
+], E.prototype, "target", 2);
 F([
   a({ type: String, reflect: !0 })
-], S.prototype, "template", 2);
+], E.prototype, "template", 2);
 F([
   a({ type: Boolean, reflect: !0 })
-], S.prototype, "inverse", 2);
+], E.prototype, "inverse", 2);
 F([
   a({ type: Boolean, reflect: !0 })
-], S.prototype, "endIcon", 2);
+], E.prototype, "endIcon", 2);
 F([
   a({ type: Boolean, reflect: !0 })
-], S.prototype, "reverseEndIcon", 2);
-S = F([
-  $("o-link")
-], S);
+], E.prototype, "reverseEndIcon", 2);
+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--)
     (r = o[s]) && (i = (n ? r(t, e, i) : r(i)) || i);
@@ -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(K[t] ?? "")}</span>`
+      (t) => l`<span class="star">${D(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,7 +1703,7 @@ ht([
   a({ type: String })
 ], W.prototype, "href", 2);
 W = ht([
-  $("o-rating")
+  _("o-rating")
 ], W);
 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--)
@@ -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, 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 E = 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 E = 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 E = 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 E = class extends f {
     `;
   }
 };
-E.styles = w`
+L.styles = w`
     :host {
       display: flex;
       gap: 5px;
@@ -2160,25 +2170,25 @@ E.styles = w`
   `;
 R([
   a({ type: Array })
-], E.prototype, "thumbnails", 2);
+], L.prototype, "thumbnails", 2);
 R([
   a({ type: Number })
-], E.prototype, "activeIndex", 2);
+], L.prototype, "activeIndex", 2);
 R([
   a({ type: Array })
-], E.prototype, "disabledIndexes", 2);
+], L.prototype, "disabledIndexes", 2);
 R([
   a({ type: String })
-], E.prototype, "maxWidth", 2);
+], L.prototype, "maxWidth", 2);
 R([
   a({ type: Object })
-], E.prototype, "swiperInstance", 2);
+], L.prototype, "swiperInstance", 2);
 R([
   N()
-], E.prototype, "focusedIndex", 2);
-E = R([
-  $("thumbnail-navigation")
-], E);
+], 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,14 +2387,14 @@ 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.menuWidth = "", this._handleOutsideClick = (o) => {
       this.contains(o.target) || (this.open = !1, this.activeIndex = -1);
@@ -2454,7 +2464,7 @@ let _ = class extends f {
       "<svg",
       '<svg aria-hidden="true" focusable="false" part="svg"'
     ), t = this.options.find((e) => e.value === this.value);
-    return c`
+    return l`
       <button
         role="combobox"
         aria-haspopup="listbox"
@@ -2475,7 +2485,7 @@ let _ = class extends f {
         </span>
       </button>
 
-      ${this.open ? c`
+      ${this.open ? l`
           <ul
             id="dropdown-listbox"
             role="listbox"
@@ -2483,7 +2493,7 @@ let _ = class extends f {
             style=${`width: ${this.width};`}
           >
             ${this.options.map(
-      (e, n) => c`                      
+      (e, n) => l`                      
                 <li
                   id="option-${n}"
                   role="option"
@@ -2492,13 +2502,13 @@ let _ = class extends f {
                   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`
+                    ${e.value === this.value ? l`<span class="check">${D(o)}</span>` : null}
+                  </a>` : l`
                     <span>${e.label}</span>
-                    ${e.value === this.value ? c`<span class="check">${B(o)}</span>` : null}`}
+                    ${e.value === this.value ? l`<span class="check">${D(o)}</span>` : null}`}
                 </li>`
     )}
           </ul>` : null}
@@ -2507,7 +2517,7 @@ let _ = class extends f {
     `;
   }
 };
-_.styles = w`
+C.styles = w`
 		:host {
 			display: inline-block;
 			position: relative;
@@ -2647,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([
+], C.prototype, "width", 2);
+I([
   N()
-], _.prototype, "open", 2);
-L([
+], C.prototype, "open", 2);
+I([
   N()
-], _.prototype, "activeIndex", 2);
-L([
+], C.prototype, "activeIndex", 2);
+I([
   N()
-], _.prototype, "menuWidth", 2);
-_ = L([
-  $("o-dropdown")
-], _);
+], 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);
@@ -2681,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`
@@ -2737,14 +2747,14 @@ 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.menuWidth = "", this._handleOutsideClick = (o) => {
       this.contains(o.target) || (this.open = !1, this.activeIndex = -1);
@@ -2814,7 +2824,7 @@ let x = class extends f {
       "<svg",
       '<svg aria-hidden="true" focusable="false" part="svg"'
     ), t = this.options.find((e) => e.value === this.value);
-    return c`
+    return l`
 			<button
 				role="combobox"
 				aria-haspopup="listbox"
@@ -2828,7 +2838,7 @@ let x = class extends f {
 				?disabled=${this.disabled}
 				class="btn-dropdown"
 			>
-				<img alt="${H(t == null ? void 0 : t.label)}" src="${H(t == null ? void 0 : t.imgurl)}" />
+				<img alt="${O(t == null ? void 0 : t.label)}" src="${O(t == null ? void 0 : t.imgurl)}" />
 				<span id="dropdown-label" class="label">
 					${t ? t.label : "Select an option"}
 				</span>
@@ -2845,7 +2855,7 @@ let x = class extends f {
 				</div>
 			</button>
 
-			${this.open ? c`
+			${this.open ? l`
 					<ul
 						id="dropdown-listbox"
 						role="listbox"
@@ -2853,7 +2863,7 @@ let x = class extends f {
 						style=${`width: ${this.width};`}
 					>
 						${this.options.map(
-      (e, n) => c`
+      (e, n) => l`
 								<li
 									id="option-${n}"
 									role="option"
@@ -2863,13 +2873,13 @@ let x = class extends f {
 									class="${n === this.activeIndex ? "active" : ""} ${e.disabled ? "disabled" : ""}"
 									@click=${() => this.selectOption(e)}
 								>
-									<a href="${H(e.url)}">
-										<img alt="${H(e.label)}" src="${H(e.imgurl)}" />
+									<a href="${O(e.url)}">
+										<img alt="${O(e.label)}" src="${O(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}
+											<span class="additional-text">${O(e.additionaltext)}</span>
+											${e.value === this.value && !e.additionaltext ? l`
+												<span class="check">${D(o)}</span>` : null}
 										</div>
 									</a>
 								</li>
@@ -2881,7 +2891,7 @@ let x = class extends f {
 		`;
   }
 };
-x.styles = w`
+$.styles = w`
 		:host {
 			display: inline-block;
 			position: relative;
@@ -3057,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([
+], $.prototype, "width", 2);
+A([
   N()
-], x.prototype, "open", 2);
-k([
+], $.prototype, "open", 2);
+A([
   N()
-], x.prototype, "activeIndex", 2);
-k([
+], $.prototype, "activeIndex", 2);
+A([
   N()
-], x.prototype, "menuWidth", 2);
-x = k([
-  $("o-dropdown-variant")
-], x);
+], $.prototype, "menuWidth", 2);
+$ = A([
+  _("o-dropdown-variant")
+], $);