@florid-kit/components 0.3.10 → 0.3.12

package/index.mjs

@@ -3,18 +3,18 @@
  * Copyright 2019 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const V = globalThis, rt = V.ShadowRoot && (V.ShadyCSS === void 0 || V.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, it = Symbol(), lt = /* @__PURE__ */ new WeakMap();
-let mt = class {
+const F = globalThis, ot = F.ShadowRoot && (F.ShadyCSS === void 0 || F.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, nt = Symbol(), dt = /* @__PURE__ */ new WeakMap();
+let At = class {
   constructor(t, e, s) {
-    if (this._$cssResult$ = !0, s !== it) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
+    if (this._$cssResult$ = !0, s !== nt) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
     this.cssText = t, this.t = e;
   }
   get styleSheet() {
     let t = this.o;
     const e = this.t;
-    if (rt && t === void 0) {
+    if (ot && t === void 0) {
       const s = e !== void 0 && e.length === 1;
-      s && (t = lt.get(e)), t === void 0 && ((this.o = t = new CSSStyleSheet()).replaceSync(this.cssText), s && lt.set(e, t));
+      s && (t = dt.get(e)), t === void 0 && ((this.o = t = new CSSStyleSheet()).replaceSync(this.cssText), s && dt.set(e, t));
     }
     return t;
   }
@@ -22,33 +22,33 @@ let mt = class {
     return this.cssText;
   }
 };
-const _t = (i) => new mt(typeof i == "string" ? i : i + "", void 0, it), I = (i, ...t) => {
+const xt = (i) => new At(typeof i == "string" ? i : i + "", void 0, nt), O = (i, ...t) => {
   const e = i.length === 1 ? i[0] : t.reduce((s, r, n) => s + ((o) => {
     if (o._$cssResult$ === !0) return o.cssText;
     if (typeof o == "number") return o;
     throw Error("Value passed to 'css' function must be a 'css' function result: " + o + ". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.");
   })(r) + i[n + 1], i[0]);
-  return new mt(e, i, it);
-}, Ct = (i, t) => {
-  if (rt) i.adoptedStyleSheets = t.map((e) => e instanceof CSSStyleSheet ? e : e.styleSheet);
+  return new At(e, i, nt);
+}, Pt = (i, t) => {
+  if (ot) i.adoptedStyleSheets = t.map((e) => e instanceof CSSStyleSheet ? e : e.styleSheet);
   else for (const e of t) {
-    const s = document.createElement("style"), r = V.litNonce;
+    const s = document.createElement("style"), r = F.litNonce;
     r !== void 0 && s.setAttribute("nonce", r), s.textContent = e.cssText, i.appendChild(s);
   }
-}, ht = rt ? (i) => i : (i) => i instanceof CSSStyleSheet ? ((t) => {
+}, pt = ot ? (i) => i : (i) => i instanceof CSSStyleSheet ? ((t) => {
   let e = "";
   for (const s of t.cssRules) e += s.cssText;
-  return _t(e);
+  return xt(e);
 })(i) : i;
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const { is: Pt, defineProperty: Ot, getOwnPropertyDescriptor: kt, getOwnPropertyNames: Ut, getOwnPropertySymbols: Mt, getPrototypeOf: Tt } = Object, _ = globalThis, ct = _.trustedTypes, It = ct ? ct.emptyScript : "", K = _.reactiveElementPolyfillSupport, z = (i, t) => i, q = { toAttribute(i, t) {
+const { is: Ot, defineProperty: Ht, getOwnPropertyDescriptor: kt, getOwnPropertyNames: Mt, getOwnPropertySymbols: Ut, getPrototypeOf: Bt } = Object, w = globalThis, ut = w.trustedTypes, Tt = ut ? ut.emptyScript : "", Q = w.reactiveElementPolyfillSupport, I = (i, t) => i, q = { toAttribute(i, t) {
   switch (t) {
     case Boolean:
-      i = i ? It : null;
+      i = i ? Tt : null;
       break;
     case Object:
     case Array:
@@ -73,19 +73,19 @@ const { is: Pt, defineProperty: Ot, getOwnPropertyDescriptor: kt, getOwnProperty
       }
   }
   return e;
-} }, ot = (i, t) => !Pt(i, t), dt = { attribute: !0, type: String, converter: q, reflect: !1, useDefault: !1, hasChanged: ot };
-Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), _.litPropertyMetadata ?? (_.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
-let U = class extends HTMLElement {
+} }, at = (i, t) => !Ot(i, t), gt = { attribute: !0, type: String, converter: q, reflect: !1, useDefault: !1, hasChanged: at };
+Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), w.litPropertyMetadata ?? (w.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
+let k = class extends HTMLElement {
   static addInitializer(t) {
     this._$Ei(), (this.l ?? (this.l = [])).push(t);
   }
   static get observedAttributes() {
     return this.finalize(), this._$Eh && [...this._$Eh.keys()];
   }
-  static createProperty(t, e = dt) {
+  static createProperty(t, e = gt) {
     if (e.state && (e.attribute = !1), this._$Ei(), this.prototype.hasOwnProperty(t) && ((e = Object.create(e)).wrapped = !0), this.elementProperties.set(t, e), !e.noAccessor) {
       const s = Symbol(), r = this.getPropertyDescriptor(t, s, e);
-      r !== void 0 && Ot(this.prototype, t, r);
+      r !== void 0 && Ht(this.prototype, t, r);
     }
   }
   static getPropertyDescriptor(t, e, s) {
@@ -100,17 +100,17 @@ let U = class extends HTMLElement {
     }, configurable: !0, enumerable: !0 };
   }
   static getPropertyOptions(t) {
-    return this.elementProperties.get(t) ?? dt;
+    return this.elementProperties.get(t) ?? gt;
   }
   static _$Ei() {
-    if (this.hasOwnProperty(z("elementProperties"))) return;
-    const t = Tt(this);
+    if (this.hasOwnProperty(I("elementProperties"))) return;
+    const t = Bt(this);
     t.finalize(), t.l !== void 0 && (this.l = [...t.l]), this.elementProperties = new Map(t.elementProperties);
   }
   static finalize() {
-    if (this.hasOwnProperty(z("finalized"))) return;
-    if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(z("properties"))) {
-      const e = this.properties, s = [...Ut(e), ...Mt(e)];
+    if (this.hasOwnProperty(I("finalized"))) return;
+    if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(I("properties"))) {
+      const e = this.properties, s = [...Mt(e), ...Ut(e)];
       for (const r of s) this.createProperty(r, e[r]);
     }
     const t = this[Symbol.metadata];
@@ -129,8 +129,8 @@ let U = class extends HTMLElement {
     const e = [];
     if (Array.isArray(t)) {
       const s = new Set(t.flat(1 / 0).reverse());
-      for (const r of s) e.unshift(ht(r));
-    } else t !== void 0 && e.push(ht(t));
+      for (const r of s) e.unshift(pt(r));
+    } else t !== void 0 && e.push(pt(t));
     return e;
   }
   static _$Eu(t, e) {
@@ -159,7 +159,7 @@ let U = class extends HTMLElement {
   }
   createRenderRoot() {
     const t = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
-    return Ct(t, this.constructor.elementStyles), t;
+    return Pt(t, this.constructor.elementStyles), t;
   }
   connectedCallback() {
     var t;
@@ -200,7 +200,7 @@ let U = class extends HTMLElement {
     var r;
     if (t !== void 0) {
       const n = this.constructor, o = this[t];
-      if (s ?? (s = n.getPropertyOptions(t)), !((s.hasChanged ?? ot)(o, e) || s.useDefault && s.reflect && o === ((r = this._$Ej) == null ? void 0 : r.get(t)) && !this.hasAttribute(n._$Eu(t, s)))) return;
+      if (s ?? (s = n.getPropertyOptions(t)), !((s.hasChanged ?? at)(o, e) || s.useDefault && s.reflect && o === ((r = this._$Ej) == null ? void 0 : r.get(t)) && !this.hasAttribute(n._$Eu(t, s)))) return;
       this.C(t, e, s);
     }
     this.isUpdatePending === !1 && (this._$ES = this._$EP());
@@ -276,76 +276,76 @@ let U = class extends HTMLElement {
   firstUpdated(t) {
   }
 };
-U.elementStyles = [], U.shadowRootOptions = { mode: "open" }, U[z("elementProperties")] = /* @__PURE__ */ new Map(), U[z("finalized")] = /* @__PURE__ */ new Map(), K == null || K({ ReactiveElement: U }), (_.reactiveElementVersions ?? (_.reactiveElementVersions = [])).push("2.1.0");
+k.elementStyles = [], k.shadowRootOptions = { mode: "open" }, k[I("elementProperties")] = /* @__PURE__ */ new Map(), k[I("finalized")] = /* @__PURE__ */ new Map(), Q == null || Q({ ReactiveElement: k }), (w.reactiveElementVersions ?? (w.reactiveElementVersions = [])).push("2.1.0");
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const B = globalThis, W = B.trustedTypes, ut = W ? W.createPolicy("lit-html", { createHTML: (i) => i }) : void 0, wt = "$lit$", m = `lit$${Math.random().toFixed(9).slice(2)}$`, At = "?" + m, Ht = `<${At}>`, P = document, L = () => P.createComment(""), N = (i) => i === null || typeof i != "object" && typeof i != "function", nt = Array.isArray, zt = (i) => nt(i) || typeof (i == null ? void 0 : i[Symbol.iterator]) == "function", X = `[ 	
-\f\r]`, H = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, pt = /-->/g, bt = />/g, E = RegExp(`>|${X}(?:([^\\s"'>=/]+)(${X}*=${X}*(?:[^ 	
-\f\r"'\`<>=]|("|')|))|$)`, "g"), ft = /'/g, gt = /"/g, xt = /^(?:script|style|textarea|title)$/i, Bt = (i) => (t, ...e) => ({ _$litType$: i, strings: t, values: e }), f = Bt(1), O = Symbol.for("lit-noChange"), d = Symbol.for("lit-nothing"), vt = /* @__PURE__ */ new WeakMap(), S = P.createTreeWalker(P, 129);
-function Et(i, t) {
-  if (!nt(i) || !i.hasOwnProperty("raw")) throw Error("invalid template strings array");
-  return ut !== void 0 ? ut.createHTML(t) : t;
+const z = globalThis, W = z.trustedTypes, ft = W ? W.createPolicy("lit-html", { createHTML: (i) => i }) : void 0, Et = "$lit$", _ = `lit$${Math.random().toFixed(9).slice(2)}$`, St = "?" + _, It = `<${St}>`, C = document, N = () => C.createComment(""), D = (i) => i === null || typeof i != "object" && typeof i != "function", lt = Array.isArray, zt = (i) => lt(i) || typeof (i == null ? void 0 : i[Symbol.iterator]) == "function", Y = `[ 	
+\f\r]`, T = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, vt = /-->/g, bt = />/g, E = RegExp(`>|${Y}(?:([^\\s"'>=/]+)(${Y}*=${Y}*(?:[^ 	
+\f\r"'\`<>=]|("|')|))|$)`, "g"), $t = /'/g, yt = /"/g, Lt = /^(?:script|style|textarea|title)$/i, Nt = (i) => (t, ...e) => ({ _$litType$: i, strings: t, values: e }), g = Nt(1), P = Symbol.for("lit-noChange"), d = Symbol.for("lit-nothing"), mt = /* @__PURE__ */ new WeakMap(), S = C.createTreeWalker(C, 129);
+function Ct(i, t) {
+  if (!lt(i) || !i.hasOwnProperty("raw")) throw Error("invalid template strings array");
+  return ft !== void 0 ? ft.createHTML(t) : t;
 }
-const Lt = (i, t) => {
+const Dt = (i, t) => {
   const e = i.length - 1, s = [];
-  let r, n = t === 2 ? "<svg>" : t === 3 ? "<math>" : "", o = H;
+  let r, n = t === 2 ? "<svg>" : t === 3 ? "<math>" : "", o = T;
   for (let l = 0; l < e; l++) {
     const a = i[l];
-    let u, p, h = -1, v = 0;
-    for (; v < a.length && (o.lastIndex = v, p = o.exec(a), p !== null); ) v = o.lastIndex, o === H ? p[1] === "!--" ? o = pt : p[1] !== void 0 ? o = bt : p[2] !== void 0 ? (xt.test(p[2]) && (r = RegExp("</" + p[2], "g")), o = E) : p[3] !== void 0 && (o = E) : o === E ? p[0] === ">" ? (o = r ?? H, h = -1) : p[1] === void 0 ? h = -2 : (h = o.lastIndex - p[2].length, u = p[1], o = p[3] === void 0 ? E : p[3] === '"' ? gt : ft) : o === gt || o === ft ? o = E : o === pt || o === bt ? o = H : (o = E, r = void 0);
-    const y = o === E && i[l + 1].startsWith("/>") ? " " : "";
-    n += o === H ? a + Ht : h >= 0 ? (s.push(u), a.slice(0, h) + wt + a.slice(h) + m + y) : a + m + (h === -2 ? l : y);
+    let p, u, c = -1, b = 0;
+    for (; b < a.length && (o.lastIndex = b, u = o.exec(a), u !== null); ) b = o.lastIndex, o === T ? u[1] === "!--" ? o = vt : u[1] !== void 0 ? o = bt : u[2] !== void 0 ? (Lt.test(u[2]) && (r = RegExp("</" + u[2], "g")), o = E) : u[3] !== void 0 && (o = E) : o === E ? u[0] === ">" ? (o = r ?? T, c = -1) : u[1] === void 0 ? c = -2 : (c = o.lastIndex - u[2].length, p = u[1], o = u[3] === void 0 ? E : u[3] === '"' ? yt : $t) : o === yt || o === $t ? o = E : o === vt || o === bt ? o = T : (o = E, r = void 0);
+    const m = o === E && i[l + 1].startsWith("/>") ? " " : "";
+    n += o === T ? a + It : c >= 0 ? (s.push(p), a.slice(0, c) + Et + a.slice(c) + _ + m) : a + _ + (c === -2 ? l : m);
   }
-  return [Et(i, n + (i[e] || "<?>") + (t === 2 ? "</svg>" : t === 3 ? "</math>" : "")), s];
+  return [Ct(i, n + (i[e] || "<?>") + (t === 2 ? "</svg>" : t === 3 ? "</math>" : "")), s];
 };
-class D {
+class R {
   constructor({ strings: t, _$litType$: e }, s) {
     let r;
     this.parts = [];
     let n = 0, o = 0;
-    const l = t.length - 1, a = this.parts, [u, p] = Lt(t, e);
-    if (this.el = D.createElement(u, s), S.currentNode = this.el.content, e === 2 || e === 3) {
-      const h = this.el.content.firstChild;
-      h.replaceWith(...h.childNodes);
+    const l = t.length - 1, a = this.parts, [p, u] = Dt(t, e);
+    if (this.el = R.createElement(p, s), S.currentNode = this.el.content, e === 2 || e === 3) {
+      const c = this.el.content.firstChild;
+      c.replaceWith(...c.childNodes);
     }
     for (; (r = S.nextNode()) !== null && a.length < l; ) {
       if (r.nodeType === 1) {
-        if (r.hasAttributes()) for (const h of r.getAttributeNames()) if (h.endsWith(wt)) {
-          const v = p[o++], y = r.getAttribute(h).split(m), j = /([.?@])?(.*)/.exec(v);
-          a.push({ type: 1, index: n, name: j[2], strings: y, ctor: j[1] === "." ? Dt : j[1] === "?" ? Rt : j[1] === "@" ? jt : F }), r.removeAttribute(h);
-        } else h.startsWith(m) && (a.push({ type: 6, index: n }), r.removeAttribute(h));
-        if (xt.test(r.tagName)) {
-          const h = r.textContent.split(m), v = h.length - 1;
-          if (v > 0) {
+        if (r.hasAttributes()) for (const c of r.getAttributeNames()) if (c.endsWith(Et)) {
+          const b = u[o++], m = r.getAttribute(c).split(_), Z = /([.?@])?(.*)/.exec(b);
+          a.push({ type: 1, index: n, name: Z[2], strings: m, ctor: Z[1] === "." ? jt : Z[1] === "?" ? Vt : Z[1] === "@" ? Zt : J }), r.removeAttribute(c);
+        } else c.startsWith(_) && (a.push({ type: 6, index: n }), r.removeAttribute(c));
+        if (Lt.test(r.tagName)) {
+          const c = r.textContent.split(_), b = c.length - 1;
+          if (b > 0) {
             r.textContent = W ? W.emptyScript : "";
-            for (let y = 0; y < v; y++) r.append(h[y], L()), S.nextNode(), a.push({ type: 2, index: ++n });
-            r.append(h[v], L());
+            for (let m = 0; m < b; m++) r.append(c[m], N()), S.nextNode(), a.push({ type: 2, index: ++n });
+            r.append(c[b], N());
           }
         }
-      } else if (r.nodeType === 8) if (r.data === At) a.push({ type: 2, index: n });
+      } else if (r.nodeType === 8) if (r.data === St) a.push({ type: 2, index: n });
       else {
-        let h = -1;
-        for (; (h = r.data.indexOf(m, h + 1)) !== -1; ) a.push({ type: 7, index: n }), h += m.length - 1;
+        let c = -1;
+        for (; (c = r.data.indexOf(_, c + 1)) !== -1; ) a.push({ type: 7, index: n }), c += _.length - 1;
       }
       n++;
     }
   }
   static createElement(t, e) {
-    const s = P.createElement("template");
+    const s = C.createElement("template");
     return s.innerHTML = t, s;
   }
 }
 function M(i, t, e = i, s) {
   var o, l;
-  if (t === O) return t;
+  if (t === P) return t;
   let r = s !== void 0 ? (o = e._$Co) == null ? void 0 : o[s] : e._$Cl;
-  const n = N(t) ? void 0 : t._$litDirective$;
+  const n = D(t) ? void 0 : t._$litDirective$;
   return (r == null ? void 0 : r.constructor) !== n && ((l = r == null ? void 0 : r._$AO) == null || l.call(r, !1), n === void 0 ? r = void 0 : (r = new n(i), r._$AT(i, e, s)), s !== void 0 ? (e._$Co ?? (e._$Co = []))[s] = r : e._$Cl = r), r !== void 0 && (t = M(i, r._$AS(i, t.values), r, s)), t;
 }
-class Nt {
+class Rt {
   constructor(t, e) {
     this._$AV = [], this._$AN = void 0, this._$AD = t, this._$AM = e;
   }
@@ -356,24 +356,24 @@ class Nt {
     return this._$AM._$AU;
   }
   u(t) {
-    const { el: { content: e }, parts: s } = this._$AD, r = ((t == null ? void 0 : t.creationScope) ?? P).importNode(e, !0);
+    const { el: { content: e }, parts: s } = this._$AD, r = ((t == null ? void 0 : t.creationScope) ?? C).importNode(e, !0);
     S.currentNode = r;
     let n = S.nextNode(), o = 0, l = 0, a = s[0];
     for (; a !== void 0; ) {
       if (o === a.index) {
-        let u;
-        a.type === 2 ? u = new R(n, n.nextSibling, this, t) : a.type === 1 ? u = new a.ctor(n, a.name, a.strings, this, t) : a.type === 6 && (u = new Vt(n, this, t)), this._$AV.push(u), a = s[++l];
+        let p;
+        a.type === 2 ? p = new j(n, n.nextSibling, this, t) : a.type === 1 ? p = new a.ctor(n, a.name, a.strings, this, t) : a.type === 6 && (p = new Ft(n, this, t)), this._$AV.push(p), a = s[++l];
       }
       o !== (a == null ? void 0 : a.index) && (n = S.nextNode(), o++);
     }
-    return S.currentNode = P, r;
+    return S.currentNode = C, r;
   }
   p(t) {
     let e = 0;
     for (const s of this._$AV) s !== void 0 && (s.strings !== void 0 ? (s._$AI(t, s, e), e += s.strings.length - 2) : s._$AI(t[e])), e++;
   }
 }
-class R {
+class j {
   get _$AU() {
     var t;
     return ((t = this._$AM) == null ? void 0 : t._$AU) ?? this._$Cv;
@@ -393,7 +393,7 @@ class R {
     return this._$AB;
   }
   _$AI(t, e = this) {
-    t = M(this, t, e), N(t) ? t === d || t == null || t === "" ? (this._$AH !== d && this._$AR(), this._$AH = d) : t !== this._$AH && t !== O && this._(t) : t._$litType$ !== void 0 ? this.$(t) : t.nodeType !== void 0 ? this.T(t) : zt(t) ? this.k(t) : this._(t);
+    t = M(this, t, e), D(t) ? t === d || t == null || t === "" ? (this._$AH !== d && this._$AR(), this._$AH = d) : t !== this._$AH && t !== P && this._(t) : t._$litType$ !== void 0 ? this.$(t) : t.nodeType !== void 0 ? this.T(t) : zt(t) ? this.k(t) : this._(t);
   }
   O(t) {
     return this._$AA.parentNode.insertBefore(t, this._$AB);
@@ -402,26 +402,26 @@ class R {
     this._$AH !== t && (this._$AR(), this._$AH = this.O(t));
   }
   _(t) {
-    this._$AH !== d && N(this._$AH) ? this._$AA.nextSibling.data = t : this.T(P.createTextNode(t)), this._$AH = t;
+    this._$AH !== d && D(this._$AH) ? this._$AA.nextSibling.data = t : this.T(C.createTextNode(t)), this._$AH = t;
   }
   $(t) {
     var n;
-    const { values: e, _$litType$: s } = t, r = typeof s == "number" ? this._$AC(t) : (s.el === void 0 && (s.el = D.createElement(Et(s.h, s.h[0]), this.options)), s);
+    const { values: e, _$litType$: s } = t, r = typeof s == "number" ? this._$AC(t) : (s.el === void 0 && (s.el = R.createElement(Ct(s.h, s.h[0]), this.options)), s);
     if (((n = this._$AH) == null ? void 0 : n._$AD) === r) this._$AH.p(e);
     else {
-      const o = new Nt(r, this), l = o.u(this.options);
+      const o = new Rt(r, this), l = o.u(this.options);
       o.p(e), this.T(l), this._$AH = o;
     }
   }
   _$AC(t) {
-    let e = vt.get(t.strings);
-    return e === void 0 && vt.set(t.strings, e = new D(t)), e;
+    let e = mt.get(t.strings);
+    return e === void 0 && mt.set(t.strings, e = new R(t)), e;
   }
   k(t) {
-    nt(this._$AH) || (this._$AH = [], this._$AR());
+    lt(this._$AH) || (this._$AH = [], this._$AR());
     const e = this._$AH;
     let s, r = 0;
-    for (const n of t) r === e.length ? e.push(s = new R(this.O(L()), this.O(L()), this, this.options)) : s = e[r], s._$AI(n), r++;
+    for (const n of t) r === e.length ? e.push(s = new j(this.O(N()), this.O(N()), this, this.options)) : s = e[r], s._$AI(n), r++;
     r < e.length && (this._$AR(s && s._$AB.nextSibling, r), e.length = r);
   }
   _$AR(t = this._$AA.nextSibling, e) {
@@ -436,7 +436,7 @@ class R {
     this._$AM === void 0 && (this._$Cv = t, (e = this._$AP) == null || e.call(this, t));
   }
 }
-class F {
+class J {
   get tagName() {
     return this.element.tagName;
   }
@@ -449,11 +449,11 @@ class F {
   _$AI(t, e = this, s, r) {
     const n = this.strings;
     let o = !1;
-    if (n === void 0) t = M(this, t, e, 0), o = !N(t) || t !== this._$AH && t !== O, o && (this._$AH = t);
+    if (n === void 0) t = M(this, t, e, 0), o = !D(t) || t !== this._$AH && t !== P, o && (this._$AH = t);
     else {
       const l = t;
-      let a, u;
-      for (t = n[0], a = 0; a < n.length - 1; a++) u = M(this, l[s + a], e, a), u === O && (u = this._$AH[a]), o || (o = !N(u) || u !== this._$AH[a]), u === d ? t = d : t !== d && (t += (u ?? "") + n[a + 1]), this._$AH[a] = u;
+      let a, p;
+      for (t = n[0], a = 0; a < n.length - 1; a++) p = M(this, l[s + a], e, a), p === P && (p = this._$AH[a]), o || (o = !D(p) || p !== this._$AH[a]), p === d ? t = d : t !== d && (t += (p ?? "") + n[a + 1]), this._$AH[a] = p;
     }
     o && !r && this.j(t);
   }
@@ -461,7 +461,7 @@ class F {
     t === d ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, t ?? "");
   }
 }
-class Dt extends F {
+class jt extends J {
   constructor() {
     super(...arguments), this.type = 3;
   }
@@ -469,7 +469,7 @@ class Dt extends F {
     this.element[this.name] = t === d ? void 0 : t;
   }
 }
-class Rt extends F {
+class Vt extends J {
   constructor() {
     super(...arguments), this.type = 4;
   }
@@ -477,12 +477,12 @@ class Rt extends F {
     this.element.toggleAttribute(this.name, !!t && t !== d);
   }
 }
-class jt extends F {
+class Zt extends J {
   constructor(t, e, s, r, n) {
     super(t, e, s, r, n), this.type = 5;
   }
   _$AI(t, e = this) {
-    if ((t = M(this, t, e, 0) ?? d) === O) return;
+    if ((t = M(this, t, e, 0) ?? d) === P) return;
     const s = this._$AH, r = t === d && s !== d || t.capture !== s.capture || t.once !== s.once || t.passive !== s.passive, n = t !== d && (s === d || r);
     r && this.element.removeEventListener(this.name, this, s), n && this.element.addEventListener(this.name, this, t), this._$AH = t;
   }
@@ -491,7 +491,7 @@ class jt extends F {
     typeof this._$AH == "function" ? this._$AH.call(((e = this.options) == null ? void 0 : e.host) ?? this.element, t) : this._$AH.handleEvent(t);
   }
 }
-class Vt {
+class Ft {
   constructor(t, e, s) {
     this.element = t, this.type = 6, this._$AN = void 0, this._$AM = e, this.options = s;
   }
@@ -502,14 +502,14 @@ class Vt {
     M(this, t);
   }
 }
-const G = B.litHtmlPolyfillSupport;
-G == null || G(D, R), (B.litHtmlVersions ?? (B.litHtmlVersions = [])).push("3.3.0");
+const tt = z.litHtmlPolyfillSupport;
+tt == null || tt(R, j), (z.litHtmlVersions ?? (z.litHtmlVersions = [])).push("3.3.0");
 const qt = (i, t, e) => {
   const s = (e == null ? void 0 : e.renderBefore) ?? t;
   let r = s._$litPart$;
   if (r === void 0) {
     const n = (e == null ? void 0 : e.renderBefore) ?? null;
-    s._$litPart$ = r = new R(t.insertBefore(L(), n), n, void 0, e ?? {});
+    s._$litPart$ = r = new j(t.insertBefore(N(), n), n, void 0, e ?? {});
   }
   return r._$AI(i), r;
 };
@@ -518,8 +518,8 @@ const qt = (i, t, e) => {
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const C = globalThis;
-let w = class extends U {
+const L = globalThis;
+let $ = class extends k {
   constructor() {
     super(...arguments), this.renderOptions = { host: this }, this._$Do = void 0;
   }
@@ -541,20 +541,20 @@ let w = class extends U {
     super.disconnectedCallback(), (t = this._$Do) == null || t.setConnected(!1);
   }
   render() {
-    return O;
+    return P;
   }
 };
-var yt;
-w._$litElement$ = !0, w.finalized = !0, (yt = C.litElementHydrateSupport) == null || yt.call(C, { LitElement: w });
-const Q = C.litElementPolyfillSupport;
-Q == null || Q({ LitElement: w });
-(C.litElementVersions ?? (C.litElementVersions = [])).push("4.2.0");
+var wt;
+$._$litElement$ = !0, $.finalized = !0, (wt = L.litElementHydrateSupport) == null || wt.call(L, { LitElement: $ });
+const et = L.litElementPolyfillSupport;
+et == null || et({ LitElement: $ });
+(L.litElementVersions ?? (L.litElementVersions = [])).push("4.2.0");
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const Z = (i) => (t, e) => {
+const V = (i) => (t, e) => {
   e !== void 0 ? e.addInitializer(() => {
     customElements.define(i, t);
   }) : customElements.define(i, t);
@@ -564,7 +564,7 @@ const Z = (i) => (t, e) => {
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const Wt = { attribute: !0, type: String, converter: q, reflect: !1, hasChanged: ot }, Ft = (i = Wt, t, e) => {
+const Wt = { attribute: !0, type: String, converter: q, reflect: !1, hasChanged: at }, Kt = (i = Wt, t, e) => {
   const { kind: s, metadata: r } = e;
   let n = globalThis.litPropertyMetadata.get(r);
   if (n === void 0 && globalThis.litPropertyMetadata.set(r, n = /* @__PURE__ */ new Map()), s === "setter" && ((i = Object.create(i)).wrapped = !0), n.set(e.name, i), s === "accessor") {
@@ -585,18 +585,18 @@ const Wt = { attribute: !0, type: String, converter: q, reflect: !1, hasChanged:
   }
   throw Error("Unsupported decorator location: " + s);
 };
-function c(i) {
-  return (t, e) => typeof e == "object" ? Ft(i, t, e) : ((s, r, n) => {
+function h(i) {
+  return (t, e) => typeof e == "object" ? Kt(i, t, e) : ((s, r, n) => {
     const o = r.hasOwnProperty(n);
     return r.constructor.createProperty(n, s), o ? Object.getOwnPropertyDescriptor(r, n) : void 0;
   })(i, t, e);
 }
-const Zt = I`
+const Jt = O`
 	outline: 1px dashed var(--button-border-color);
 	outline-offset: 2px;
 	outline: dashed black;
 `;
-I`
+O`
 	:host * {
 		box-sizing: border-box;
 	}
@@ -606,12 +606,12 @@ I`
  * Copyright 2023 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-const at = Symbol("internals"), Y = Symbol("privateInternals");
-function Jt(i) {
+const ht = Symbol("internals"), st = Symbol("privateInternals");
+function Xt(i) {
   var t;
   class e extends i {
-    get [(t = at, t)]() {
-      return this[Y] || (this[Y] = this.attachInternals()), this[Y];
+    get [(t = ht, t)]() {
+      return this[st] || (this[st] = this.attachInternals()), this[st];
     }
   }
   return e;
@@ -621,11 +621,11 @@ function Jt(i) {
  * Copyright 2023 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-function Kt(i) {
+function Gt(i) {
   i.addInitializer((t) => {
     const e = t;
     e.addEventListener("click", async (s) => {
-      const { type: r, [at]: n } = e, { form: o } = n;
+      const { type: r, [ht]: n } = e, { form: o } = n;
       if (!(!o || r === "button") && (await new Promise((l) => {
         setTimeout(l);
       }), !s.defaultPrevented)) {
@@ -648,12 +648,12 @@ function Kt(i) {
     });
   });
 }
-var Xt = Object.defineProperty, Gt = Object.getOwnPropertyDescriptor, A = (i, t, e, s) => {
-  for (var r = s > 1 ? void 0 : s ? Gt(t, e) : t, n = i.length - 1, o; n >= 0; n--)
+var Qt = Object.defineProperty, Yt = Object.getOwnPropertyDescriptor, A = (i, t, e, s) => {
+  for (var r = s > 1 ? void 0 : s ? Yt(t, e) : t, n = i.length - 1, o; n >= 0; n--)
     (o = i[n]) && (r = (s ? o(t, e, r) : o(r)) || r);
-  return s && r && Xt(t, e, r), r;
+  return s && r && Qt(t, e, r), r;
 };
-const Qt = Jt(w), $t = (i) => {
+const te = Xt($), _t = (i) => {
   const t = `
 		--button-bg-disabled: var(--color-container-disabled);
     --button-bg-pressed: var(--color-container-action-${i}-pressed);
@@ -668,9 +668,9 @@ const Qt = Jt(w), $t = (i) => {
 		--button-text-hover: var(--color-content-action-${i});
 		--button-text: var(--color-content-action-${i});
 	`;
-  return _t(t);
-}, Yt = ["primary", "secondary"];
-let b = class extends Qt {
+  return xt(t);
+}, ee = ["primary", "secondary"];
+let f = class extends te {
   constructor() {
     super(...arguments), this.type = "submit", this.value = "", this.variant = "primary", this.customclass = "", this.disabled = !1, this.href = "", this.target = "";
   }
@@ -684,13 +684,13 @@ let b = class extends Qt {
    * The associated form element with which this element's value will submit.
    */
   get form() {
-    return this[at].form;
+    return this[ht].form;
   }
   // TODO: Add aria attributes support
   // Adapt from: https://github.dev/material-components/material-web
   willUpdate() {
     const i = getComputedStyle(this).getPropertyValue("--button-variant");
-    i && Yt.some((t) => t === i) && (this.variant = i);
+    i && ee.some((t) => t === i) && (this.variant = i);
   }
   updated() {
     if (this.customclass) {
@@ -700,26 +700,26 @@ let b = class extends Qt {
   }
   render() {
     const i = this.href ? this.renderLink() : this.renderButton();
-    return f`${i}`;
+    return g`${i}`;
   }
   renderLink() {
-    return f`<a href=${this.href} target=${this.target || d} class="button" ?disabled=${this.disabled}>
+    return g`<a href=${this.href} target=${this.target || d} class="button" ?disabled=${this.disabled}>
       <slot />
     </a>`;
   }
   renderButton() {
-    return f`<button class="button" ?disabled=${this.disabled}>
+    return g`<button class="button" ?disabled=${this.disabled}>
       <slot />
     </button>`;
   }
 };
-Kt(b);
-b.formAssociated = !0;
-b.styles = I`
+Gt(f);
+f.formAssociated = !0;
+f.styles = O`
     :host {
       display: inline-flex;
       cursor: pointer;
-      ${$t("primary")};
+      ${_t("primary")};
       --button-border: transparent;
     }
 
@@ -728,7 +728,7 @@ b.styles = I`
     }
   
     :host([variant="secondary"]) {
-      ${$t("secondary")};
+      ${_t("secondary")};
     }
 
     :host([disabled]), :host([aria-disabled="true"]), :host([aria-disabled="true"]):hover {
@@ -795,44 +795,44 @@ b.styles = I`
     }
 
     .button:focus-visible {
-      ${Zt};
+      ${Jt};
     }
   `;
 A([
-  c()
-], b.prototype, "type", 2);
+  h()
+], f.prototype, "type", 2);
 A([
-  c({ reflect: !0 })
-], b.prototype, "value", 2);
+  h({ reflect: !0 })
+], f.prototype, "value", 2);
 A([
-  c({ reflect: !0 })
-], b.prototype, "variant", 2);
+  h({ reflect: !0 })
+], f.prototype, "variant", 2);
 A([
-  c({ type: String })
-], b.prototype, "customclass", 2);
+  h({ type: String })
+], f.prototype, "customclass", 2);
 A([
-  c({
+  h({
     converter: {
       fromAttribute: (i) => i === "" || i === "true"
     }
   })
-], b.prototype, "disabled", 2);
+], f.prototype, "disabled", 2);
 A([
-  c()
-], b.prototype, "href", 2);
+  h()
+], f.prototype, "href", 2);
 A([
-  c()
-], b.prototype, "target", 2);
-b = A([
-  Z("o-button")
-], b);
+  h()
+], f.prototype, "target", 2);
+f = A([
+  V("o-button")
+], f);
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const te = { CHILD: 2 }, ee = (i) => (...t) => ({ _$litDirective$: i, values: t });
-class se {
+const se = { CHILD: 2 }, re = (i) => (...t) => ({ _$litDirective$: i, values: t });
+class ie {
   constructor(t) {
   }
   get _$AU() {
@@ -853,13 +853,13 @@ class se {
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-class tt extends se {
+class rt extends ie {
   constructor(t) {
-    if (super(t), this.it = d, t.type !== te.CHILD) throw Error(this.constructor.directiveName + "() can only be used in child bindings");
+    if (super(t), this.it = d, t.type !== se.CHILD) throw Error(this.constructor.directiveName + "() can only be used in child bindings");
   }
   render(t) {
     if (t === d || t == null) return this._t = void 0, this.it = t;
-    if (t === O) return t;
+    if (t === P) 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;
@@ -867,61 +867,85 @@ class tt extends se {
     return e.raw = e, this._t = { _$litType$: this.constructor.resultType, strings: e, values: [] };
   }
 }
-tt.directiveName = "unsafeHTML", tt.resultType = 1;
+rt.directiveName = "unsafeHTML", rt.resultType = 1;
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-class et extends tt {
+class it extends rt {
 }
-et.directiveName = "unsafeSVG", et.resultType = 2;
-const st = ee(et), re = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+it.directiveName = "unsafeSVG", it.resultType = 2;
+const K = re(it), oe = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M8 3.6275C7.06799 0.971489 3.25399 -0.0226278 1.67414 2.30983C0.0877404 4.65197 1.67414 6.99412 2.62598 8.33249C3.0147 8.87905 8 14 8 14C8 14 12.9853 8.87905 13.374 8.33249C14.3259 6.99412 15.9123 4.65197 14.3259 2.30983C12.746 -0.0226277 8.97167 0.971489 8 3.6275Z" stroke="#3F2B2E" stroke-linecap="round"/>
 </svg>
-`, ie = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+`, ne = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M16 8L4 0V16L16 8Z" fill="#3F2B2E"/>
 </svg>
-`, oe = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+`, ae = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M12.2266 8.16162C11.0953 9.26599 8.72489 11.8788 5.11546 16L4.63062 15.7172C5.78886 13.4007 7.17607 10.8283 8.79223 8C7.17607 5.17172 5.78886 2.59933 4.63062 0.282827L5.11546 0C8.72489 4.12121 11.0953 6.73401 12.2266 7.83838V8.16162Z" fill="#3F2B2E"/>
 </svg>
-`, ne = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+`, le = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M5 7.83838C6.02128 6.73401 8.16109 4.12121 11.4195 0L11.8571 0.282829C10.8116 2.59933 9.55927 5.17172 8.1003 8C9.55927 10.8283 10.8115 13.4007 11.8571 15.7172L11.4195 16C8.16109 11.8788 6.02128 9.266 5 8.16162L5 7.83838Z" fill="#3F2B2E"/>
 </svg>
-`, St = {
-  wishlist: re,
-  playerv: ie,
-  chevronRight: oe,
-  chevronLeft: ne
+`, he = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.2834 14.4585L7.98873 11.3928L3.69404 14.4585L5.33977 9.4972L1 6.39639H6.36554L8 1.4585L9.63446 6.39639H15L10.6602 9.4972L12.306 14.4585H12.2834ZM7.98873 10.328L10.6602 12.2353L9.64573 9.15787L12.2721 7.28568H9.02576L8 4.17317L6.97424 7.28568H3.72786L6.35427 9.15787L5.33977 12.2353L8.01127 10.328H7.98873Z" fill="#3F2B2E"/>
+</svg>
+`, ce = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15 6.43789H9.63446L8 1.5L6.36554 6.43789H1L5.33977 9.5387L3.69404 14.5L7.98873 11.4343L12.2834 14.5H12.306L10.6602 9.5387L15 6.43789ZM6.36554 11.5396V7.32718H6.97424L8 4.21467L9.02576 7.32718H12.2721L9.64573 9.19937L10.6602 12.2768L8 10.3812L6.36554 11.5513V11.5396Z" fill="#3F2B2E"/>
+</svg>
+`, de = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15 6.39639H9.63446L8 1.4585L6.36554 6.39639H1L5.33977 9.4972L3.69404 14.4585L7.98873 11.3928L12.2834 14.4585L10.6377 9.4972L14.9775 6.39639H15ZM10.6715 12.2353L8.05636 10.3631V4.32528L9.03704 7.27398H12.2834L9.65701 9.14616L10.6715 12.2236V12.2353Z" fill="#3F2B2E"/>
+</svg>
+`, pe = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15 6.43789H9.63446L8 1.5L6.36554 6.43789H1L5.33977 9.5387L3.69404 14.5L7.98873 11.4343L9.46538 12.4874L12.2834 14.5H12.306L10.6602 9.5387L15 6.43789ZM9.46538 11.4226V7.32718H12.2721L9.64573 9.19937L10.6602 12.2768L9.46538 11.4226Z" fill="#3F2B2E"/>
+</svg>
+`, ue = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.2834 14.4585L7.98873 11.3928L3.69404 14.4585L5.33977 9.4972L1 6.39639H6.36554L8 1.4585L9.63446 6.39639H15L10.6602 9.4972L12.306 14.4585H12.2834Z" fill="#3F2B2E"/>
+</svg>
+`, ct = {
+  wishlist: oe,
+  playerv: ne,
+  chevronRight: ae,
+  chevronLeft: le,
+  "star-0": he,
+  "star-25": ce,
+  "star-50": de,
+  "star-75": pe,
+  "star-100": ue
 };
-var ae = Object.defineProperty, le = Object.getOwnPropertyDescriptor, J = (i, t, e, s) => {
-  for (var r = s > 1 ? void 0 : s ? le(t, e) : t, n = i.length - 1, o; n >= 0; n--)
+var ge = Object.defineProperty, fe = Object.getOwnPropertyDescriptor, X = (i, t, e, s) => {
+  for (var r = s > 1 ? void 0 : s ? fe(t, e) : t, n = i.length - 1, o; n >= 0; n--)
     (o = i[n]) && (r = (s ? o(t, e, r) : o(r)) || r);
-  return s && r && ae(t, e, r), r;
+  return s && r && ge(t, e, r), r;
 };
-let T = class extends w {
+let U = class extends $ {
   constructor() {
     super(...arguments), this.status = "empty", this.ariaDescribedBy = "a-product-name", this.label = "Add to wishlist";
   }
   render() {
-    const i = St.wishlist.replace(
+    const i = ct.wishlist.replace(
       "<svg",
       '<svg aria-hidden="true" focusable="false" part="svg"'
     );
-    return f`
+    return g`
             <button
                 type="button"
-                aria-label="${this.label}"
                 aria-describedby="${this.ariaDescribedBy}"
-                aria-pressed="${this.status == "filled" ? "true" : "false"}"
                 class="wishlist-button"
-                @click="${this.toggleStatus}"
+                @click="${this.handleClick}"
             >
                 <span class="sr-only">${this.label}</span>
-                ${st(i)}
+                ${K(i)}
             </button>
         `;
   }
+  handleClick(i) {
+    this.toggleStatus(), this.dispatchEvent(new MouseEvent("click", {
+      bubbles: !0,
+      composed: !0
+    }));
+  }
   toggleStatus() {
     this.status = this.status == "empty" ? "filled" : "empty";
   }
@@ -935,7 +959,7 @@ let T = class extends w {
     this.label = i, this.requestUpdate();
   }
 };
-T.styles = I`
+U.styles = O`
         :host {
 			display: inline-flex;
 			justify-content: center;
@@ -990,24 +1014,24 @@ T.styles = I`
 			fill: var(--color-alpha-light-strong);
 		}
     `;
-J([
-  c({ type: String, reflect: !0 })
-], T.prototype, "status", 2);
-J([
-  c({ type: String, reflect: !0 })
-], T.prototype, "ariaDescribedBy", 2);
-J([
-  c({ type: String, reflect: !0 })
-], T.prototype, "label", 2);
-T = J([
-  Z("o-wishlist-button")
-], T);
-var he = Object.defineProperty, ce = Object.getOwnPropertyDescriptor, x = (i, t, e, s) => {
-  for (var r = s > 1 ? void 0 : s ? ce(t, e) : t, n = i.length - 1, o; n >= 0; n--)
+X([
+  h({ type: String, reflect: !0 })
+], U.prototype, "status", 2);
+X([
+  h({ type: String, reflect: !0 })
+], U.prototype, "ariaDescribedBy", 2);
+X([
+  h({ type: String, reflect: !0 })
+], U.prototype, "label", 2);
+U = X([
+  V("o-wishlist-button")
+], U);
+var ve = Object.defineProperty, be = Object.getOwnPropertyDescriptor, x = (i, t, e, s) => {
+  for (var r = s > 1 ? void 0 : s ? be(t, e) : t, n = i.length - 1, o; n >= 0; n--)
     (o = i[n]) && (r = (s ? o(t, e, r) : o(r)) || r);
-  return s && r && he(t, e, r), r;
+  return s && r && ve(t, e, r), r;
 };
-let g = class extends w {
+let v = class extends $ {
   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;
   }
@@ -1015,29 +1039,29 @@ let g = class extends w {
     super.updated(i), this.style.setProperty("--icon-stroke-width", this.strokewidth);
   }
   render() {
-    const i = St[this.icon] ?? "", t = `icon-${this.icon}`, e = i.replace(
+    const i = ct[this.icon] ?? "", t = `icon-${this.icon}`, e = i.replace(
       "<svg",
       '<svg aria-hidden="true" focusable="false" part="svg"'
     );
-    return f`
-			${this.type === "span" ? f`
+    return g`
+			${this.type === "span" ? g`
 				<span class="icon icon-button ${this.size} ${this.bgstyle} ${this.status} ${t}" ?disabled="${this.disabled}">	
-					${st(e)}
+					${K(e)}
 				</span>
-			` : f`
+			` : g`
 				<button
 					type="button"
 					aria-label="icon"
 					class="icon-button ${this.size} ${this.bgstyle} ${this.status} ${t}"
 					?disabled="${this.disabled}"
 				>
-					${st(e)}
+					${K(e)}
 				</button>
 			`}
 		`;
   }
 };
-g.styles = I`
+v.styles = O`
 		:host {
 			display: inline-flex;
 			justify-content: center;
@@ -1196,42 +1220,42 @@ g.styles = I`
 		}
 	`;
 x([
-  c({ type: String, reflect: !0 })
-], g.prototype, "bgstyle", 2);
+  h({ type: String, reflect: !0 })
+], v.prototype, "bgstyle", 2);
 x([
-  c({ type: String, reflect: !0 })
-], g.prototype, "size", 2);
+  h({ type: String, reflect: !0 })
+], v.prototype, "size", 2);
 x([
-  c({ type: String, reflect: !0 })
-], g.prototype, "status", 2);
+  h({ type: String, reflect: !0 })
+], v.prototype, "status", 2);
 x([
-  c({ type: String, reflect: !0 })
-], g.prototype, "type", 2);
+  h({ type: String, reflect: !0 })
+], v.prototype, "type", 2);
 x([
-  c({ type: String })
-], g.prototype, "strokewidth", 2);
+  h({ type: String })
+], v.prototype, "strokewidth", 2);
 x([
-  c({ type: String })
-], g.prototype, "icon", 2);
+  h({ type: String })
+], v.prototype, "icon", 2);
 x([
-  c({ type: Boolean, reflect: !0 })
-], g.prototype, "disabled", 2);
-g = x([
-  Z("o-icon-button")
-], g);
-var de = Object.defineProperty, ue = Object.getOwnPropertyDescriptor, k = (i, t, e, s) => {
-  for (var r = s > 1 ? void 0 : s ? ue(t, e) : t, n = i.length - 1, o; n >= 0; n--)
+  h({ type: Boolean, reflect: !0 })
+], v.prototype, "disabled", 2);
+v = x([
+  V("o-icon-button")
+], v);
+var $e = Object.defineProperty, ye = Object.getOwnPropertyDescriptor, H = (i, t, e, s) => {
+  for (var r = s > 1 ? void 0 : s ? ye(t, e) : t, n = i.length - 1, o; n >= 0; n--)
     (o = i[n]) && (r = (s ? o(t, e, r) : o(r)) || r);
-  return s && r && de(t, e, r), r;
+  return s && r && $e(t, e, r), r;
 };
-let $ = class extends w {
+let y = class extends $ {
   constructor() {
     super(...arguments), this.href = "", this.target = "", this.template = "standard", this.inverse = !1, this.endIcon = !1, this.reverseEndIcon = !1;
   }
   render() {
-    return f`
+    return g`
             <a href="${this.href}" target="${this.target}">
-                ${this.endIcon && this.reverseEndIcon ? f`
+                ${this.endIcon && this.reverseEndIcon ? g`
                             <o-icon-button
                                 icon="chevronLeft"
                                 bgstyle="${this.inverse ? "none-light" : "none-contrast"}"
@@ -1241,7 +1265,7 @@ let $ = class extends w {
                             ></o-icon-button>
                     ` : null}
                 <span class="link-text"><slot></slot></span>
-                ${this.endIcon && !this.reverseEndIcon ? f`
+                ${this.endIcon && !this.reverseEndIcon ? g`
                             <o-icon-button
                                 icon="chevronRight"
                                 bgstyle="${this.inverse ? "none-light" : "none-contrast"}"
@@ -1254,7 +1278,7 @@ let $ = class extends w {
         `;
   }
 };
-$.styles = I`
+y.styles = O`
         :host([template="standard"]) a {
             color: var(--color-content-action-secondary);
             font-size: var(--font-size-200);
@@ -1352,24 +1376,102 @@ $.styles = I`
         }
         /* End of underline effect */
     `;
-k([
-  c({ type: String })
-], $.prototype, "href", 2);
-k([
-  c({ type: String })
-], $.prototype, "target", 2);
-k([
-  c({ type: String, reflect: !0 })
-], $.prototype, "template", 2);
-k([
-  c({ type: Boolean, reflect: !0 })
-], $.prototype, "inverse", 2);
-k([
-  c({ type: Boolean, reflect: !0 })
-], $.prototype, "endIcon", 2);
-k([
-  c({ type: Boolean, reflect: !0 })
-], $.prototype, "reverseEndIcon", 2);
-$ = k([
-  Z("o-link")
-], $);
+H([
+  h({ type: String })
+], y.prototype, "href", 2);
+H([
+  h({ type: String })
+], y.prototype, "target", 2);
+H([
+  h({ type: String, reflect: !0 })
+], y.prototype, "template", 2);
+H([
+  h({ type: Boolean, reflect: !0 })
+], y.prototype, "inverse", 2);
+H([
+  h({ type: Boolean, reflect: !0 })
+], y.prototype, "endIcon", 2);
+H([
+  h({ type: Boolean, reflect: !0 })
+], y.prototype, "reverseEndIcon", 2);
+y = H([
+  V("o-link")
+], y);
+var me = Object.defineProperty, _e = Object.getOwnPropertyDescriptor, G = (i, t, e, s) => {
+  for (var r = s > 1 ? void 0 : s ? _e(t, e) : t, n = i.length - 1, o; n >= 0; n--)
+    (o = i[n]) && (r = (s ? o(t, e, r) : o(r)) || r);
+  return s && r && me(t, e, r), r;
+};
+let B = class extends $ {
+  constructor() {
+    super(...arguments), this.rating = 0;
+  }
+  getStarKeys() {
+    const i = [];
+    for (let t = 0; t < 5; t++) {
+      const e = this.rating - t;
+      let s;
+      e >= 1 ? s = 100 : e <= 0 ? s = 0 : s = Math.round(e * 100 / 25) * 25, i.push(`star-${s}`);
+    }
+    return i;
+  }
+  render() {
+    const i = this.getStarKeys();
+    return g`
+			<div class="rating">
+			<div class="stars">
+				${i.map(
+      (t) => g`<span class="star">${K(ct[t] ?? "")}</span>`
+    )}
+			</div>
+			${this.reviewCount != null && this.href != null ? g`<o-link template="review" href="${this.href}">${this.reviewCount}</o-link>` : null}
+			</div>
+		`;
+  }
+};
+B.styles = O`
+		svg {
+			width: 12px;
+			height: 12px;
+		}
+		.rating {
+			display: flex;
+			align-items: center;
+		}
+
+		.stars {
+			display: flex;
+			gap: 2px;
+		}
+
+		.star {
+			display: block;
+		}
+
+		o-link {
+			margin-left: 6px;
+			font-family: var(--font-family-loccitane-sans);
+			font-weight: var(--font-weight-500);
+			font-size: var(--font-size-100);
+			line-height: var(--line-height-160);
+			letter-spacing: var(--letter-spacing-400);
+			color: var(--color-content-action-secondary);
+		}
+
+		.review-link {
+			text-decoration: underline;
+			cursor: pointer;
+		}
+	`;
+G([
+  h({ type: Number })
+], B.prototype, "rating", 2);
+G([
+  h({ type: String })
+], B.prototype, "reviewCount", 2);
+G([
+  h({ type: String })
+], B.prototype, "href", 2);
+B = G([
+  V("o-rating")
+], B);