revotech-ui-kit 0.0.46 → 0.0.48

package/dist/revotech-ui-kit.js

@@ -1,8 +1,8 @@
 import { LitElement as u, css as p, svg as Oe, html as l, nothing as w } from "lit";
-import { property as n, customElement as d, state as m, queryAssignedElements as Js } from "lit/decorators.js";
+import { property as n, customElement as d, state as v, queryAssignedElements as Js } from "lit/decorators.js";
 import { css as Mr, html as nt, nothing as Qs, LitElement as eo } from "lit-element";
 import { nothing as to } from "lit/html.js";
-import { directive as Rr } from "lit/directive.js";
+import { directive as Br } from "lit/directive.js";
 import { AsyncDirective as ro } from "lit/async-directive.js";
 function _s(e) {
   var t, s, o = "";
@@ -23,14 +23,14 @@ function so() {
     (e = arguments[s]) && (t = _s(e)) && (o && (o += " "), o += t);
   return o;
 }
-const Br = "-", oo = (e) => {
+const Rr = "-", oo = (e) => {
   const t = ao(e), {
     conflictingClassGroups: s,
     conflictingClassGroupModifiers: o
   } = e;
   return {
     getClassGroupId: (a) => {
-      const h = a.split(Br);
+      const h = a.split(Rr);
       return h[0] === "" && h.length !== 1 && h.shift(), $s(h, t) || io(a);
     },
     getConflictingClassGroupIds: (a, h) => {
@@ -47,13 +47,13 @@ const Br = "-", oo = (e) => {
     return r;
   if (t.validators.length === 0)
     return;
-  const i = e.join(Br);
+  const i = e.join(Rr);
   return (a = t.validators.find(({
     validator: h
   }) => h(i))) == null ? void 0 : a.classGroupId;
-}, vs = /^\[(.+)\]$/, io = (e) => {
-  if (vs.test(e)) {
-    const t = vs.exec(e)[1], s = t == null ? void 0 : t.substring(0, t.indexOf(":"));
+}, ms = /^\[(.+)\]$/, io = (e) => {
+  if (ms.test(e)) {
+    const t = ms.exec(e)[1], s = t == null ? void 0 : t.substring(0, t.indexOf(":"));
     if (s)
       return "arbitrary.." + s;
   }
@@ -71,7 +71,7 @@ const Br = "-", oo = (e) => {
 }, ar = (e, t, s, o) => {
   e.forEach((r) => {
     if (typeof r == "string") {
-      const i = r === "" ? t : ms(t, r);
+      const i = r === "" ? t : vs(t, r);
       i.classGroupId = s;
       return;
     }
@@ -87,12 +87,12 @@ const Br = "-", oo = (e) => {
       return;
     }
     Object.entries(r).forEach(([i, a]) => {
-      ar(a, ms(t, i), s, o);
+      ar(a, vs(t, i), s, o);
     });
   });
-}, ms = (e, t) => {
+}, vs = (e, t) => {
   let s = e;
-  return t.split(Br).forEach((o) => {
+  return t.split(Rr).forEach((o) => {
     s.nextPart.has(o) || s.nextPart.set(o, {
       nextPart: /* @__PURE__ */ new Map(),
       validators: []
@@ -131,10 +131,10 @@ const Br = "-", oo = (e) => {
     experimentalParseClassName: s
   } = e, o = t.length === 1, r = t[0], i = t.length, a = (h) => {
     const y = [];
-    let v = 0, b = 0, E;
+    let m = 0, b = 0, E;
     for (let x = 0; x < h.length; x++) {
       let k = h[x];
-      if (v === 0) {
+      if (m === 0) {
         if (k === r && (o || h.slice(x, x + i) === t)) {
           y.push(h.slice(b, x)), b = x + i;
           continue;
@@ -144,7 +144,7 @@ const Br = "-", oo = (e) => {
           continue;
         }
       }
-      k === "[" ? v++ : k === "]" && v--;
+      k === "[" ? m++ : k === "]" && m--;
     }
     const S = y.length === 0 ? h : h.substring(b), V = S.startsWith(Os), D = V ? S.substring(1) : S, P = E && E > b ? E - b : void 0;
     return {
@@ -178,20 +178,20 @@ const Br = "-", oo = (e) => {
   } = t, i = [], a = e.trim().split(go);
   let h = "";
   for (let y = a.length - 1; y >= 0; y -= 1) {
-    const v = a[y], {
+    const m = a[y], {
       modifiers: b,
       hasImportantModifier: E,
       baseClassName: S,
       maybePostfixModifierPosition: V
-    } = s(v);
+    } = s(m);
     let D = !!V, P = o(D ? S.substring(0, V) : S);
     if (!P) {
       if (!D) {
-        h = v + (h.length > 0 ? " " + h : h);
+        h = m + (h.length > 0 ? " " + h : h);
         continue;
       }
       if (P = o(S), !P) {
-        h = v + (h.length > 0 ? " " + h : h);
+        h = m + (h.length > 0 ? " " + h : h);
         continue;
       }
       D = !1;
@@ -205,11 +205,11 @@ const Br = "-", oo = (e) => {
       const St = st[Ee];
       i.push(k + St);
     }
-    h = v + (h.length > 0 ? " " + h : h);
+    h = m + (h.length > 0 ? " " + h : h);
   }
   return h;
 };
-function vo() {
+function mo() {
   let e = 0, t, s, o = "";
   for (; e < arguments.length; )
     (t = arguments[e++]) && (s = Cs(t)) && (o && (o += " "), o += s);
@@ -223,21 +223,21 @@ const Cs = (e) => {
     e[o] && (t = Cs(e[o])) && (s && (s += " "), s += t);
   return s;
 };
-function mo(e, ...t) {
+function vo(e, ...t) {
   let s, o, r, i = a;
   function a(y) {
-    const v = t.reduce((b, E) => E(b), e());
-    return s = ho(v), o = s.cache.get, r = s.cache.set, i = h, h(y);
+    const m = t.reduce((b, E) => E(b), e());
+    return s = ho(m), o = s.cache.get, r = s.cache.set, i = h, h(y);
   }
   function h(y) {
-    const v = o(y);
-    if (v)
-      return v;
+    const m = o(y);
+    if (m)
+      return m;
     const b = fo(y, s);
     return r(y, b), b;
   }
   return function() {
-    return i(vo.apply(null, arguments));
+    return i(mo.apply(null, arguments));
   };
 }
 const _ = (e) => {
@@ -252,7 +252,7 @@ const _ = (e) => {
   // I could also use lookbehind assertion in `lengthUnitRegex` but that isn't supported widely enough.
   xo.test(e) && !_o.test(e)
 ), Es = () => !1, Lo = (e) => $o.test(e), Io = (e) => Oo.test(e), zo = () => {
-  const e = _("colors"), t = _("spacing"), s = _("blur"), o = _("brightness"), r = _("borderColor"), i = _("borderRadius"), a = _("borderSpacing"), h = _("borderWidth"), y = _("contrast"), v = _("grayscale"), b = _("hueRotate"), E = _("invert"), S = _("gap"), V = _("gradientColorStops"), D = _("gradientColorStopPositions"), P = _("inset"), x = _("margin"), k = _("opacity"), A = _("padding"), st = _("saturate"), Ee = _("scale"), St = _("sepia"), ds = _("skew"), cs = _("space"), ps = _("translate"), tr = () => ["auto", "contain", "none"], rr = () => ["auto", "hidden", "clip", "visible", "scroll"], sr = () => ["auto", f, t], O = () => [f, t], us = () => ["", J, ce], kt = () => ["auto", Ge, f], hs = () => ["bottom", "center", "left", "left-bottom", "left-top", "right", "right-bottom", "right-top", "top"], jt = () => ["solid", "dashed", "dotted", "double", "none"], gs = () => ["normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"], or = () => ["start", "end", "center", "between", "around", "evenly", "stretch"], ot = () => ["", "0", f], fs = () => ["auto", "avoid", "all", "avoid-page", "page", "left", "right", "column"], Z = () => [Ge, f];
+  const e = _("colors"), t = _("spacing"), s = _("blur"), o = _("brightness"), r = _("borderColor"), i = _("borderRadius"), a = _("borderSpacing"), h = _("borderWidth"), y = _("contrast"), m = _("grayscale"), b = _("hueRotate"), E = _("invert"), S = _("gap"), V = _("gradientColorStops"), D = _("gradientColorStopPositions"), P = _("inset"), x = _("margin"), k = _("opacity"), A = _("padding"), st = _("saturate"), Ee = _("scale"), St = _("sepia"), ds = _("skew"), cs = _("space"), ps = _("translate"), tr = () => ["auto", "contain", "none"], rr = () => ["auto", "hidden", "clip", "visible", "scroll"], sr = () => ["auto", f, t], O = () => [f, t], us = () => ["", J, ce], kt = () => ["auto", Ge, f], hs = () => ["bottom", "center", "left", "left-bottom", "left-top", "right", "right-bottom", "right-top", "top"], jt = () => ["solid", "dashed", "dotted", "double", "none"], gs = () => ["normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"], or = () => ["start", "end", "center", "between", "around", "evenly", "stretch"], ot = () => ["", "0", f], fs = () => ["auto", "avoid", "all", "avoid-page", "page", "left", "right", "column"], Z = () => [Ge, f];
   return {
     cacheSize: 500,
     separator: ":",
@@ -1683,7 +1683,7 @@ const _ = (e) => {
        * @see https://tailwindcss.com/docs/grayscale
        */
       grayscale: [{
-        grayscale: [v]
+        grayscale: [m]
       }],
       /**
        * Hue Rotate
@@ -1747,7 +1747,7 @@ const _ = (e) => {
        * @see https://tailwindcss.com/docs/backdrop-grayscale
        */
       "backdrop-grayscale": [{
-        "backdrop-grayscale": [v]
+        "backdrop-grayscale": [m]
       }],
       /**
        * Backdrop Hue Rotate
@@ -2266,7 +2266,7 @@ const _ = (e) => {
       "font-size": ["leading"]
     }
   };
-}, Mo = /* @__PURE__ */ mo(zo);
+}, Mo = /* @__PURE__ */ vo(zo);
 function g(...e) {
   return Mo(so(e));
 }
@@ -5164,7 +5164,7 @@ class ks extends ro {
         (!t || !(r in t) && o[r] === s[r]) && (o[r] = void 0);
   }
 }
-Rr(ks);
+Br(ks);
 class js extends ks {
   constructor() {
     super(...arguments), this.eventData = {};
@@ -5209,8 +5209,8 @@ class js extends ks {
     }
   }
 }
-Rr(js);
-class Ro extends js {
+Br(js);
+class Bo extends js {
   apply(t) {
     if (!t)
       return;
@@ -5259,11 +5259,11 @@ class Ro extends js {
       }
   }
 }
-const C = Rr(Ro);
-var Bo = Object.defineProperty, To = Object.getOwnPropertyDescriptor, Tr = (e, t, s, o) => {
+const C = Br(Bo);
+var Ro = Object.defineProperty, To = Object.getOwnPropertyDescriptor, Tr = (e, t, s, o) => {
   for (var r = o > 1 ? void 0 : o ? To(t, s) : t, i = e.length - 1, a; i >= 0; i--)
     (a = e[i]) && (r = (o ? a(t, s, r) : a(r)) || r);
-  return o && r && Bo(t, s, r), r;
+  return o && r && Ro(t, s, r), r;
 };
 let Se = class extends $ {
   constructor() {
@@ -5575,7 +5575,7 @@ qr([
   n({ type: String })
 ], lt.prototype, "value", 2);
 qr([
-  m()
+  v()
 ], lt.prototype, "selectedValue", 2);
 lt = qr([
   d("rtg-accordion-content")
@@ -5673,16 +5673,16 @@ const bs = (e) => typeof e == "boolean" ? "".concat(e) : e === 0 ? "0" : e, ws =
   var o;
   if ((t == null ? void 0 : t.variants) == null)
     return ws(e, s == null ? void 0 : s.class, s == null ? void 0 : s.className);
-  const { variants: r, defaultVariants: i } = t, a = Object.keys(r).map((v) => {
-    const b = s == null ? void 0 : s[v], E = i == null ? void 0 : i[v];
+  const { variants: r, defaultVariants: i } = t, a = Object.keys(r).map((m) => {
+    const b = s == null ? void 0 : s[m], E = i == null ? void 0 : i[m];
     if (b === null)
       return null;
     const S = bs(b) || bs(E);
-    return r[v][S];
-  }), h = s && Object.entries(s).reduce((v, b) => {
+    return r[m][S];
+  }), h = s && Object.entries(s).reduce((m, b) => {
     let [E, S] = b;
-    return S === void 0 || (v[E] = S), v;
-  }, {}), y = t == null || (o = t.compoundVariants) === null || o === void 0 ? void 0 : o.reduce((v, b) => {
+    return S === void 0 || (m[E] = S), m;
+  }, {}), y = t == null || (o = t.compoundVariants) === null || o === void 0 ? void 0 : o.reduce((m, b) => {
     let { class: E, className: S, ...V } = b;
     return Object.entries(V).every((D) => {
       let [P, x] = D;
@@ -5694,10 +5694,10 @@ const bs = (e) => typeof e == "boolean" ? "".concat(e) : e === 0 ? "0" : e, ws =
         ...h
       }[P] === x;
     }) ? [
-      ...v,
+      ...m,
       E,
       S
-    ] : v;
+    ] : m;
   }, []);
   return ws(e, a, y, s == null ? void 0 : s.class, s == null ? void 0 : s.className);
 }, zs = le("p-4 rounded-sm text-sm font-medium", {
@@ -5912,10 +5912,10 @@ dr.styles = [p``, c];
 dr = fi([
   d("rtg-avatar-fallback")
 ], dr);
-var vi = Object.defineProperty, mi = Object.getOwnPropertyDescriptor, Fr = (e, t, s, o) => {
-  for (var r = o > 1 ? void 0 : o ? mi(t, s) : t, i = e.length - 1, a; i >= 0; i--)
+var mi = Object.defineProperty, vi = Object.getOwnPropertyDescriptor, Fr = (e, t, s, o) => {
+  for (var r = o > 1 ? void 0 : o ? vi(t, s) : t, i = e.length - 1, a; i >= 0; i--)
     (a = e[i]) && (r = (o ? a(t, s, r) : a(r)) || r);
-  return o && r && vi(t, s, r), r;
+  return o && r && mi(t, s, r), r;
 };
 let ct = class extends u {
   constructor() {
@@ -6171,8 +6171,8 @@ hr.styles = [p``, c];
 hr = zi([
   d("rtg-card-description")
 ], hr);
-var Mi = Object.defineProperty, Ri = Object.getOwnPropertyDescriptor, Bi = (e, t, s, o) => {
-  for (var r = o > 1 ? void 0 : o ? Ri(t, s) : t, i = e.length - 1, a; i >= 0; i--)
+var Mi = Object.defineProperty, Bi = Object.getOwnPropertyDescriptor, Ri = (e, t, s, o) => {
+  for (var r = o > 1 ? void 0 : o ? Bi(t, s) : t, i = e.length - 1, a; i >= 0; i--)
     (a = e[i]) && (r = (o ? a(t, s, r) : a(r)) || r);
   return o && r && Mi(t, s, r), r;
 };
@@ -6182,7 +6182,7 @@ let gr = class extends u {
   }
 };
 gr.styles = [p``, c];
-gr = Bi([
+gr = Ri([
   d("rtg-card-content")
 ], gr);
 var Ti = Object.defineProperty, Ni = Object.getOwnPropertyDescriptor, qi = (e, t, s, o) => {
@@ -6210,7 +6210,7 @@ var Vi = Object.defineProperty, Ui = Object.getOwnPropertyDescriptor, Fi = (e, t
     (a = e[i]) && (r = (o ? a(t, s, r) : a(r)) || r);
   return o && r && Vi(t, s, r), r;
 };
-let vr = class extends $ {
+let mr = class extends $ {
   getAttributesToExclude() {
     return [""];
   }
@@ -6237,16 +6237,16 @@ let vr = class extends $ {
     `;
   }
 };
-vr.styles = [p``, c];
-vr = Fi([
+mr.styles = [p``, c];
+mr = Fi([
   d("rtg-collapsible-trigger")
-], vr);
+], mr);
 var Gi = Object.defineProperty, Xi = Object.getOwnPropertyDescriptor, Hi = (e, t, s, o) => {
   for (var r = o > 1 ? void 0 : o ? Xi(t, s) : t, i = e.length - 1, a; i >= 0; i--)
     (a = e[i]) && (r = (o ? a(t, s, r) : a(r)) || r);
   return o && r && Gi(t, s, r), r;
 };
-let mr = class extends $ {
+let vr = class extends $ {
   getAttributesToExclude() {
     return [""];
   }
@@ -6264,10 +6264,10 @@ let mr = class extends $ {
     `;
   }
 };
-mr.styles = [p``, c];
-mr = Hi([
+vr.styles = [p``, c];
+vr = Hi([
   d("rtg-collapsible-content")
-], mr);
+], vr);
 var Yi = Object.defineProperty, Ki = Object.getOwnPropertyDescriptor, Ut = (e, t, s, o) => {
   for (var r = o > 1 ? void 0 : o ? Ki(t, s) : t, i = e.length - 1, a; i >= 0; i--)
     (a = e[i]) && (r = (o ? a(t, s, r) : a(r)) || r);
@@ -6435,7 +6435,7 @@ Gr([
   n({ attribute: "data-state", type: String })
 ], Xe.prototype, "state", 2);
 Gr([
-  m()
+  v()
 ], Xe.prototype, "isOpen", 2);
 Xe = Gr([
   d("rtg-context-menu-content")
@@ -6664,7 +6664,7 @@ $t([
 F = $t([
   d("rtg-context-menu-item")
 ], F);
-var la = Object.defineProperty, da = Object.getOwnPropertyDescriptor, Re = (e, t, s, o) => {
+var la = Object.defineProperty, da = Object.getOwnPropertyDescriptor, Be = (e, t, s, o) => {
   for (var r = o > 1 ? void 0 : o ? da(t, s) : t, i = e.length - 1, a; i >= 0; i--)
     (a = e[i]) && (r = (o ? a(t, s, r) : a(r)) || r);
   return o && r && la(t, s, r), r;
@@ -6736,25 +6736,25 @@ z.styles = [
     `,
   c
 ];
-Re([
+Be([
   n({ type: String })
 ], z.prototype, "_id", 2);
-Re([
+Be([
   n({ attribute: "aria-hidden", type: String })
 ], z.prototype, "_hidden", 2);
-Re([
+Be([
   n({ attribute: "data-value", type: String })
 ], z.prototype, "value", 1);
-Re([
+Be([
   n({ type: Boolean })
 ], z.prototype, "selected", 2);
-Re([
+Be([
   n({ type: Boolean })
 ], z.prototype, "checked", 2);
-Re([
+Be([
   n({ type: Boolean })
 ], z.prototype, "disabled", 2);
-z = Re([
+z = Be([
   d("rtg-context-menu-radio-item")
 ], z);
 var ca = Object.defineProperty, pa = Object.getOwnPropertyDescriptor, Xr = (e, t, s, o) => {
@@ -6819,8 +6819,8 @@ br.styles = [p``, c];
 br = ga([
   d("rtg-context-menu-shortcut")
 ], br);
-var fa = Object.defineProperty, va = Object.getOwnPropertyDescriptor, Rs = (e, t, s, o) => {
-  for (var r = o > 1 ? void 0 : o ? va(t, s) : t, i = e.length - 1, a; i >= 0; i--)
+var fa = Object.defineProperty, ma = Object.getOwnPropertyDescriptor, Bs = (e, t, s, o) => {
+  for (var r = o > 1 ? void 0 : o ? ma(t, s) : t, i = e.length - 1, a; i >= 0; i--)
     (a = e[i]) && (r = (o ? a(t, s, r) : a(r)) || r);
   return o && r && fa(t, s, r), r;
 };
@@ -6880,16 +6880,16 @@ let pt = class extends u {
   }
 };
 pt.styles = [p``, c];
-Rs([
-  m()
+Bs([
+  v()
 ], pt.prototype, "isOpen", 2);
-pt = Rs([
+pt = Bs([
   d("rtg-context-menu")
 ], pt);
-var ma = Object.defineProperty, ba = Object.getOwnPropertyDescriptor, Hr = (e, t, s, o) => {
+var va = Object.defineProperty, ba = Object.getOwnPropertyDescriptor, Hr = (e, t, s, o) => {
   for (var r = o > 1 ? void 0 : o ? ba(t, s) : t, i = e.length - 1, a; i >= 0; i--)
     (a = e[i]) && (r = (o ? a(t, s, r) : a(r)) || r);
-  return o && r && ma(t, s, r), r;
+  return o && r && va(t, s, r), r;
 };
 let ut = class extends u {
   constructor() {
@@ -7043,7 +7043,7 @@ let ht = class extends u {
         "rtg-command-list > rtg-command-group"
       );
       s && s.forEach((r) => {
-        var y, v;
+        var y, m;
         let i = !0;
         const a = r.querySelectorAll("rtg-command-item");
         a && a.forEach((b) => {
@@ -7057,7 +7057,7 @@ let ht = class extends u {
           )) === "true" ? "true" : "false"
         ), h = r.nextElementSibling, h && h.setAttribute(
           "aria-hidden",
-          i || ((v = h.nextElementSibling) == null ? void 0 : v.getAttribute("aria-hidden")) === "true" ? "true" : "false"
+          i || ((m = h.nextElementSibling) == null ? void 0 : m.getAttribute("aria-hidden")) === "true" ? "true" : "false"
         );
       });
       const o = e.querySelector("rtg-command-empty");
@@ -7150,7 +7150,7 @@ let G = class extends u {
           <div
             part="command-item"
             class="${g(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 hover:bg-gray-100",
       this.className
     )}"
             @mouseover="${this.handleMouseEvent}"
@@ -7228,7 +7228,7 @@ var ja = Object.defineProperty, Da = Object.getOwnPropertyDescriptor, Wr = (e, t
     (a = e[i]) && (r = (o ? a(t, s, r) : a(r)) || r);
   return o && r && ja(t, s, r), r;
 };
-let ve = class extends u {
+let me = class extends u {
   constructor() {
     super(...arguments), this._id = "", this._hidden = "";
   }
@@ -7237,7 +7237,7 @@ let ve = class extends u {
     if (this._id !== "")
       return this._id;
     const e = (s = (t = this.parentElement) == null ? void 0 : t.shadowRoot) == null ? void 0 : s.querySelector("div[rtgcmd-list]");
-    return e ? this._id = `${e.getAttribute("id")}s${ve._counter++}` : this._id = `rtgcmdrxlxs${ve._counter++}`, this._id;
+    return e ? this._id = `${e.getAttribute("id")}s${me._counter++}` : this._id = `rtgcmdrxlxs${me._counter++}`, this._id;
   }
   render() {
     return l`${this._hidden === "true" ? w : l`
@@ -7251,17 +7251,17 @@ let ve = class extends u {
         `}`;
   }
 };
-ve._counter = 0;
-ve.styles = [p``, c];
+me._counter = 0;
+me.styles = [p``, c];
 Wr([
   n({ type: String })
-], ve.prototype, "_id", 2);
+], me.prototype, "_id", 2);
 Wr([
   n({ attribute: "aria-hidden", type: String })
-], ve.prototype, "_hidden", 2);
-ve = Wr([
+], me.prototype, "_hidden", 2);
+me = Wr([
   d("rtg-command-separator")
-], ve);
+], me);
 var Aa = Object.defineProperty, La = Object.getOwnPropertyDescriptor, Ia = (e, t, s, o) => {
   for (var r = o > 1 ? void 0 : o ? La(t, s) : t, i = e.length - 1, a; i >= 0; i--)
     (a = e[i]) && (r = (o ? a(t, s, r) : a(r)) || r);
@@ -7324,7 +7324,7 @@ yr.styles = [p``, c];
 yr = Ia([
   d("rtg-combo-box-trigger")
 ], yr);
-var za = Object.defineProperty, Ma = Object.getOwnPropertyDescriptor, Bs = (e, t, s, o) => {
+var za = Object.defineProperty, Ma = Object.getOwnPropertyDescriptor, Rs = (e, t, s, o) => {
   for (var r = o > 1 ? void 0 : o ? Ma(t, s) : t, i = e.length - 1, a; i >= 0; i--)
     (a = e[i]) && (r = (o ? a(t, s, r) : a(r)) || r);
   return o && r && za(t, s, r), r;
@@ -7381,16 +7381,16 @@ let It = class extends u {
   }
 };
 It.styles = [p``, c];
-Bs([
+Rs([
   n({ type: String })
 ], It.prototype, "placeholder", 2);
-It = Bs([
+It = Rs([
   d("rtg-combo-box-value")
 ], It);
-var Ra = Object.defineProperty, Ba = Object.getOwnPropertyDescriptor, Ht = (e, t, s, o) => {
-  for (var r = o > 1 ? void 0 : o ? Ba(t, s) : t, i = e.length - 1, a; i >= 0; i--)
+var Ba = Object.defineProperty, Ra = Object.getOwnPropertyDescriptor, Ht = (e, t, s, o) => {
+  for (var r = o > 1 ? void 0 : o ? Ra(t, s) : t, i = e.length - 1, a; i >= 0; i--)
     (a = e[i]) && (r = (o ? a(t, s, r) : a(r)) || r);
-  return o && r && Ra(t, s, r), r;
+  return o && r && Ba(t, s, r), r;
 };
 let De = class extends u {
   constructor() {
@@ -7500,13 +7500,13 @@ let De = class extends u {
 };
 De.styles = [p``, c];
 Ht([
-  m()
+  v()
 ], De.prototype, "searchKey", 2);
 Ht([
-  m()
+  v()
 ], De.prototype, "focusedIndex", 2);
 Ht([
-  m()
+  v()
 ], De.prototype, "selectedValue", 2);
 De = Ht([
   d("rtg-combo-box-group")
@@ -7654,7 +7654,7 @@ Yt([
   n({ type: String })
 ], He.prototype, "twClass", 2);
 Yt([
-  m()
+  v()
 ], He.prototype, "searchValue", 2);
 He = Yt([
   d("rtg-combo-box-input")
@@ -7743,22 +7743,22 @@ let j = class extends u {
 };
 j.styles = [p``, c];
 de([
-  m()
+  v()
 ], j.prototype, "isOpen", 2);
 de([
-  m()
+  v()
 ], j.prototype, "selectedValue", 2);
 de([
-  m()
+  v()
 ], j.prototype, "searchTerm", 2);
 de([
-  m()
+  v()
 ], j.prototype, "focusedIndex", 2);
 de([
-  m()
+  v()
 ], j.prototype, "filteredItems", 2);
 de([
-  m()
+  v()
 ], j.prototype, "uuid", 2);
 de([
   n({ type: String })
@@ -8007,10 +8007,10 @@ var gn = Object.defineProperty, fn = Object.getOwnPropertyDescriptor, Ns = (e, t
     (a = e[i]) && (r = (o ? a(t, s, r) : a(r)) || r);
   return o && r && gn(t, s, r), r;
 };
-const vn = "open", mn = "closed";
+const mn = "open", vn = "closed";
 let Ae = class extends u {
   constructor() {
-    super(...arguments), this.state = mn;
+    super(...arguments), this.state = vn;
   }
   get _content() {
     var s;
@@ -8030,7 +8030,7 @@ let Ae = class extends u {
   render() {
     return l`
       <div rtgdlg-root part="dialog">
-        ${this.state === vn ? l` <rtg-dialog-overlay></rtg-dialog-overlay>` : w}
+        ${this.state === mn ? l` <rtg-dialog-overlay></rtg-dialog-overlay>` : w}
         <slot></slot>
       </div>
     `;
@@ -8054,7 +8054,7 @@ let Ye = class extends u {
   }
   get _dropdownMenu() {
     let e = this.parentElement;
-    for (; e && !(e instanceof vt); )
+    for (; e && !(e instanceof mt); )
       e = e.parentElement;
     return e;
   }
@@ -8078,7 +8078,7 @@ let Ye = class extends u {
     return l`
       <div
         part="dropdown-menu-content"
-        class="flex h-full flex-col max-h-[300px] overflow-y-auto overflow-x-hidden rounded-md bg-popover text-popover-foreground border shadow-md"
+        class="absolute flex h-full flex-col max-h-[300px] overflow-y-auto overflow-x-hidden rounded-md bg-popover text-popover-foreground border shadow-md"
         style="display: ${this.isOpen ? "block" : "none"};width:260px"
       >
         <slot></slot>
@@ -8091,7 +8091,7 @@ Jr([
   n({ attribute: "data-state", type: String })
 ], Ye.prototype, "state", 2);
 Jr([
-  m()
+  v()
 ], Ye.prototype, "isOpen", 2);
 Ye = Jr([
   d("rtg-dropdown-menu-content")
@@ -8160,12 +8160,12 @@ Ct([
 X = Ct([
   d("rtg-dropdown-menu-item")
 ], X);
-var _n = Object.defineProperty, $n = Object.getOwnPropertyDescriptor, Be = (e, t, s, o) => {
+var _n = Object.defineProperty, $n = Object.getOwnPropertyDescriptor, Re = (e, t, s, o) => {
   for (var r = o > 1 ? void 0 : o ? $n(t, s) : t, i = e.length - 1, a; i >= 0; i--)
     (a = e[i]) && (r = (o ? a(t, s, r) : a(r)) || r);
   return o && r && _n(t, s, r), r;
 };
-let R = class extends u {
+let B = class extends u {
   constructor() {
     super(...arguments), this._id = "", this._hidden = "", this.selected = !1, this.checked = !1, this.disabled = !1;
   }
@@ -8176,7 +8176,7 @@ let R = class extends u {
     const e = (s = (t = this.parentElement) == null ? void 0 : t.shadowRoot) == null ? void 0 : s.querySelector("div[rtgcmd-group]");
     return e ? this._id = `${e.getAttribute(
       "id"
-    )}li${R._counter++}` : this._id = `rtgcmdrxgxli${R._counter++}`, this._id;
+    )}li${B._counter++}` : this._id = `rtgcmdrxgxli${B._counter++}`, this._id;
   }
   get value() {
     var e;
@@ -8221,8 +8221,8 @@ let R = class extends u {
     `;
   }
 };
-R._counter = 0;
-R.styles = [
+B._counter = 0;
+B.styles = [
   p`
       .icon-space {
         width: 16px; /* Fixed width to reserve space for the check icon */
@@ -8232,33 +8232,33 @@ R.styles = [
     `,
   c
 ];
-Be([
+Re([
   n({ type: String })
-], R.prototype, "_id", 2);
-Be([
+], B.prototype, "_id", 2);
+Re([
   n({ attribute: "aria-hidden", type: String })
-], R.prototype, "_hidden", 2);
-Be([
+], B.prototype, "_hidden", 2);
+Re([
   n({ attribute: "data-value", type: String })
-], R.prototype, "value", 1);
-Be([
+], B.prototype, "value", 1);
+Re([
   n({ type: Boolean })
-], R.prototype, "selected", 2);
-Be([
+], B.prototype, "selected", 2);
+Re([
   n({ type: Boolean })
-], R.prototype, "checked", 2);
-Be([
+], B.prototype, "checked", 2);
+Re([
   n({ type: Boolean })
-], R.prototype, "disabled", 2);
-R = Be([
+], B.prototype, "disabled", 2);
+B = Re([
   d("rtg-dropdown-menu-radio-item")
-], R);
+], B);
 var On = Object.defineProperty, Cn = Object.getOwnPropertyDescriptor, Qr = (e, t, s, o) => {
   for (var r = o > 1 ? void 0 : o ? Cn(t, s) : t, i = e.length - 1, a; i >= 0; i--)
     (a = e[i]) && (r = (o ? a(t, s, r) : a(r)) || r);
   return o && r && On(t, s, r), r;
 };
-let me = class extends u {
+let ve = class extends u {
   constructor() {
     super(...arguments), this._id = "", this._hidden = "";
   }
@@ -8269,7 +8269,7 @@ let me = class extends u {
     const e = (s = (t = this.parentElement) == null ? void 0 : t.shadowRoot) == null ? void 0 : s.querySelector("div[rtgcmd-list]");
     return e ? this._id = `${e.getAttribute(
       "id"
-    )}s${me._counter++}` : this._id = `rtgcmdrxlxs${me._counter++}`, this._id;
+    )}s${ve._counter++}` : this._id = `rtgcmdrxlxs${ve._counter++}`, this._id;
   }
   render() {
     return l`${this._hidden === "true" ? w : l`
@@ -8283,23 +8283,23 @@ let me = class extends u {
         `}`;
   }
 };
-me._counter = 0;
-me.styles = [p``, c];
+ve._counter = 0;
+ve.styles = [p``, c];
 Qr([
   n({ type: String })
-], me.prototype, "_id", 2);
+], ve.prototype, "_id", 2);
 Qr([
   n({ attribute: "aria-hidden", type: String })
-], me.prototype, "_hidden", 2);
-me = Qr([
+], ve.prototype, "_hidden", 2);
+ve = Qr([
   d("rtg-dropdown-menu-separator")
-], me);
+], ve);
 var Pn = Object.defineProperty, En = Object.getOwnPropertyDescriptor, Te = (e, t, s, o) => {
   for (var r = o > 1 ? void 0 : o ? En(t, s) : t, i = e.length - 1, a; i >= 0; i--)
     (a = e[i]) && (r = (o ? a(t, s, r) : a(r)) || r);
   return o && r && Pn(t, s, r), r;
 };
-let B = class extends u {
+let R = class extends u {
   constructor() {
     super(...arguments), this._id = "", this._hidden = "", this.selected = !1, this.checked = !1, this.disabled = !1;
   }
@@ -8310,7 +8310,7 @@ let B = class extends u {
     const e = (s = (t = this.parentElement) == null ? void 0 : t.shadowRoot) == null ? void 0 : s.querySelector("div[rtgcmd-group]");
     return e ? this._id = `${e.getAttribute(
       "id"
-    )}li${B._counter++}` : this._id = `rtgcmdrxgxli${B._counter++}`, this._id;
+    )}li${R._counter++}` : this._id = `rtgcmdrxgxli${R._counter++}`, this._id;
   }
   get value() {
     var e;
@@ -8364,8 +8364,8 @@ let B = class extends u {
     `;
   }
 };
-B._counter = 0;
-B.styles = [
+R._counter = 0;
+R.styles = [
   p`
       .icon-space {
         width: 16px; /* Fixed width to reserve space for the check icon */
@@ -8377,25 +8377,25 @@ B.styles = [
 ];
 Te([
   n({ type: String })
-], B.prototype, "_id", 2);
+], R.prototype, "_id", 2);
 Te([
   n({ attribute: "aria-hidden", type: String })
-], B.prototype, "_hidden", 2);
+], R.prototype, "_hidden", 2);
 Te([
   n({ attribute: "data-value", type: String })
-], B.prototype, "value", 1);
+], R.prototype, "value", 1);
 Te([
   n({ type: Boolean })
-], B.prototype, "selected", 2);
+], R.prototype, "selected", 2);
 Te([
   n({ type: Boolean })
-], B.prototype, "checked", 2);
+], R.prototype, "checked", 2);
 Te([
   n({ type: Boolean })
-], B.prototype, "disabled", 2);
-B = Te([
+], R.prototype, "disabled", 2);
+R = Te([
   d("rtg-dropdown-menu-checkbox-item")
-], B);
+], R);
 var Sn = Object.defineProperty, kn = Object.getOwnPropertyDescriptor, Kt = (e, t, s, o) => {
   for (var r = o > 1 ? void 0 : o ? kn(t, s) : t, i = e.length - 1, a; i >= 0; i--)
     (a = e[i]) && (r = (o ? a(t, s, r) : a(r)) || r);
@@ -8459,7 +8459,7 @@ var jn = Object.defineProperty, Dn = Object.getOwnPropertyDescriptor, qs = (e, t
     (a = e[i]) && (r = (o ? a(t, s, r) : a(r)) || r);
   return o && r && jn(t, s, r), r;
 };
-let vt = class extends u {
+let mt = class extends u {
   constructor() {
     super(...arguments), this.isOpen = !1, this.handleClickOutside = (e) => {
       var s;
@@ -8509,13 +8509,13 @@ let vt = class extends u {
     `;
   }
 };
-vt.styles = [p``, c];
+mt.styles = [p``, c];
 qs([
-  m()
-], vt.prototype, "isOpen", 2);
-vt = qs([
+  v()
+], mt.prototype, "isOpen", 2);
+mt = qs([
   d("rtg-dropdown-menu")
-], vt);
+], mt);
 var An = Object.defineProperty, Ln = Object.getOwnPropertyDescriptor, Wt = (e, t, s, o) => {
   for (var r = o > 1 ? void 0 : o ? Ln(t, s) : t, i = e.length - 1, a; i >= 0; i--)
     (a = e[i]) && (r = (o ? a(t, s, r) : a(r)) || r);
@@ -8544,7 +8544,7 @@ let Le = class extends u {
       <div
         part="hover-card-content"
         class="${g(
-      "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "absolute z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       this.twClass
     )}"
         style="display: ${this.isOpen ? "block" : "none"};width:360px"
@@ -8562,7 +8562,7 @@ Wt([
   n({ attribute: "data-state", type: String })
 ], Le.prototype, "state", 2);
 Wt([
-  m()
+  v()
 ], Le.prototype, "isOpen", 2);
 Le = Wt([
   d("rtg-hover-card-content")
@@ -8572,7 +8572,7 @@ var In = Object.defineProperty, zn = Object.getOwnPropertyDescriptor, es = (e, t
     (a = e[i]) && (r = (o ? a(t, s, r) : a(r)) || r);
   return o && r && In(t, s, r), r;
 };
-let mt = class extends u {
+let vt = class extends u {
   constructor() {
     super(...arguments), this.twClass = "", this.isOpen = !1;
   }
@@ -8619,21 +8619,21 @@ let mt = class extends u {
     `;
   }
 };
-mt.styles = [p``, c];
+vt.styles = [p``, c];
 es([
   n({ type: String })
-], mt.prototype, "twClass", 2);
+], vt.prototype, "twClass", 2);
 es([
-  m()
-], mt.prototype, "isOpen", 2);
-mt = es([
+  v()
+], vt.prototype, "isOpen", 2);
+vt = es([
   d("rtg-hover-card")
-], mt);
+], vt);
 const Mn = "flex h-8 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:opacity-50 input-base";
-var Rn = Object.defineProperty, Bn = Object.getOwnPropertyDescriptor, Ne = (e, t, s, o) => {
-  for (var r = o > 1 ? void 0 : o ? Bn(t, s) : t, i = e.length - 1, a; i >= 0; i--)
+var Bn = Object.defineProperty, Rn = Object.getOwnPropertyDescriptor, Ne = (e, t, s, o) => {
+  for (var r = o > 1 ? void 0 : o ? Rn(t, s) : t, i = e.length - 1, a; i >= 0; i--)
     (a = e[i]) && (r = (o ? a(t, s, r) : a(r)) || r);
-  return o && r && Rn(t, s, r), r;
+  return o && r && Bn(t, s, r), r;
 };
 let se = class extends $ {
   constructor() {
@@ -8922,7 +8922,7 @@ let We = class extends u {
 };
 We.styles = [p``, c];
 Us([
-  m()
+  v()
 ], We.prototype, "isOpen", 2);
 We = Us([
   d("rtg-popover")
@@ -9144,7 +9144,7 @@ rs([
   n({ attribute: "data-state", type: String })
 ], wt.prototype, "state", 2);
 rs([
-  m()
+  v()
 ], wt.prototype, "isOpen", 2);
 wt = rs([
   d("rtg-select-list")
@@ -9372,18 +9372,18 @@ let yt = class extends u {
 };
 yt.styles = [p``, c];
 os([
-  m()
+  v()
 ], yt.prototype, "focusedIndex", 2);
 os([
-  m()
+  v()
 ], yt.prototype, "selectedValue", 2);
 yt = os([
   d("rtg-select-group")
 ], yt);
-var vl = Object.defineProperty, ml = Object.getOwnPropertyDescriptor, Gs = (e, t, s, o) => {
-  for (var r = o > 1 ? void 0 : o ? ml(t, s) : t, i = e.length - 1, a; i >= 0; i--)
+var ml = Object.defineProperty, vl = Object.getOwnPropertyDescriptor, Gs = (e, t, s, o) => {
+  for (var r = o > 1 ? void 0 : o ? vl(t, s) : t, i = e.length - 1, a; i >= 0; i--)
     (a = e[i]) && (r = (o ? a(t, s, r) : a(r)) || r);
-  return o && r && vl(t, s, r), r;
+  return o && r && ml(t, s, r), r;
 };
 let Mt = class extends u {
   constructor() {
@@ -9482,13 +9482,13 @@ let oe = class extends u {
 };
 oe.styles = [p``, c];
 Zt([
-  m()
+  v()
 ], oe.prototype, "isOpen", 2);
 Zt([
-  m()
+  v()
 ], oe.prototype, "selectedValue", 2);
 Zt([
-  m()
+  v()
 ], oe.prototype, "uuid", 2);
 oe = Zt([
   d("rtg-select")
@@ -9779,7 +9779,7 @@ ns([
   n({ type: String })
 ], _t.prototype, "twClass", 2);
 ns([
-  m()
+  v()
 ], _t.prototype, "isOpen", 2);
 _t = ns([
   d("rtg-toast")
@@ -9869,7 +9869,7 @@ qe([
 U = qe([
   d("rtg-toggle")
 ], U);
-const Rl = le(
+const Bl = le(
   "inline-flex items-center justify-center rounded-sm text-sm font-medium  ",
   {
     variants: {
@@ -9894,10 +9894,10 @@ const Rl = le(
     }
   }
 );
-var Bl = Object.defineProperty, Tl = Object.getOwnPropertyDescriptor, et = (e, t, s, o) => {
+var Rl = Object.defineProperty, Tl = Object.getOwnPropertyDescriptor, et = (e, t, s, o) => {
   for (var r = o > 1 ? void 0 : o ? Tl(t, s) : t, i = e.length - 1, a; i >= 0; i--)
     (a = e[i]) && (r = (o ? a(t, s, r) : a(r)) || r);
-  return o && r && Bl(t, s, r), r;
+  return o && r && Rl(t, s, r), r;
 };
 let ie = class extends u {
   constructor() {
@@ -9905,7 +9905,109 @@ let ie = class extends u {
     }, this.disabled = !1, this.isCustomClass = !1, this.variant = "default", this.size = "default";
   }
   render() {
-    return l` 
+    return l`
+    <main>
+    <rtg-dropdown-menu class="w-full max-w-md">
+      <rtg-button> open </rtg-button>
+      <rtg-dropdown-menu-content>
+        <rtg-dropdown-menu-shortcut style="margin-left:8px">My Account</rtg-dropdown-menu-shortcut>
+        <rtg-dropdown-menu-separator></rtg-dropdown-menu-separator>
+        <rtg-dropdown-menu-group>
+          <rtg-dropdown-menu-item>
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2 h-4 w-4">
+              <rect width="18" height="18" x="3" y="4" rx="2" ry="2"></rect>
+              <line x1="16" x2="16" y1="2" y2="6"></line>
+              <line x1="8" x2="8" y1="2" y2="6"></line>
+              <line x1="3" x2="21" y1="10" y2="10"></line>
+            </svg>
+            <span>Calendar</span>
+          </rtg-dropdown-menu-item>
+          <rtg-dropdown-menu-item>
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2 h-4 w-4">
+              <circle cx="12" cy="12" r="10"></circle>
+              <path d="M8 14s1.5 2 4 2 4-2 4-2"></path>
+              <line x1="9" x2="9.01" y1="9" y2="9"></line>
+              <line x1="15" x2="15.01" y1="9" y2="9"></line>
+            </svg>
+            <span>Search Emoji</span>
+          </rtg-dropdown-menu-item>
+          <rtg-dropdown-menu-item>
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2 h-4 w-4">
+              <rect width="16" height="20" x="4" y="2" rx="2"></rect>
+              <line x1="8" x2="16" y1="6" y2="6"></line>
+              <line x1="16" x2="16" y1="14" y2="18"></line>
+              <path d="M16 10h.01"></path>
+              <path d="M12 10h.01"></path>
+              <path d="M8 10h.01"></path>
+              <path d="M12 14h.01"></path>
+              <path d="M8 14h.01"></path>
+              <path d="M12 18h.01"></path>
+              <path d="M8 18h.01"></path>
+            </svg>
+            <span>Calculator</span>
+          </rtg-dropdown-menu-item>
+        </rtg-dropdown-menu-group>
+
+        <rtg-dropdown-menu-separator></rtg-dropdown-menu-separator>
+        <rtg-dropdown-menu-group>
+          <rtg-dropdown-menu-item onclick="javascript:alert('Profile Clicked!')">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2 h-4 w-4">
+              <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path>
+              <circle cx="12" cy="7" r="4"></circle>
+            </svg>
+            <span>Profile</span>
+            <span class="ml-auto text-xs tracking-widest text-muted-foreground">⌘P</span>
+          </rtg-dropdown-menu-item>
+          <rtg-dropdown-menu-item>
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2 h-4 w-4">
+              <rect width="20" height="14" x="2" y="5" rx="2"></rect>
+              <line x1="2" x2="22" y1="10" y2="10"></line>
+            </svg>
+            <span>Billing</span><span class="ml-auto text-xs tracking-widest text-muted-foreground">⌘B</span>
+          </rtg-dropdown-menu-item>
+          <rtg-dropdown-menu-item>
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2 h-4 w-4">
+              <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"></path>
+              <circle cx="12" cy="12" r="3"></circle>
+            </svg>
+            <span>Settings</span>
+            <span class="ml-auto text-xs tracking-widest text-muted-foreground">
+              ⌘S</span>
+          </rtg-dropdown-menu-item>
+        </rtg-dropdown-menu-group></rtg-dropdown-menu-content>
+    </rtg-dropdown-menu>
+    </main> 
+    <main>
+    <rtg-hover-card>
+      <rtg-button variant="ghost">
+        @nextjs
+      </rtg-button>
+      <rtg-hover-card-content>
+        <div class="flex items-start gap-4">
+          <!-- Avatar -->
+          <rtg-avatar>
+            <rtg-avatar-image src="https://github.com/vercel.png"></rtg-avatar-image>
+          </rtg-avatar>
+          <!-- Content -->
+          <div class="space-y-2">
+            <h4 class="text-sm font-semibold">@nextjs</h4>
+            <p class="text-sm text-muted-foreground">
+              The React Framework – created and maintained by @vercel.
+            </p>
+            <div class="flex items-center pt-2 text-xs">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar mr-2 h-4 w-4 opacity-70">
+                <path d="M8 2v4"></path>
+                <path d="M16 2v4"></path>
+                <rect width="18" height="18" x="3" y="4" rx="2"></rect>
+                <path d="M3 10h18"></path>
+              </svg>
+              <span>Joined December 2021</span>
+            </div>
+          </div>
+        </div>
+      </rtg-hover-card-content>
+    </rtg-hover-card>
+    </main>
     <main>
  <div class="flex flex-nowrap">
     sample demo
@@ -9961,7 +10063,7 @@ let ie = class extends u {
     `;
   }
 };
-ie.buttonVariants = Rl;
+ie.buttonVariants = Bl;
 ie.styles = [
   c,
   p`
@@ -10098,16 +10200,16 @@ let ae = class extends u {
 };
 ae.styles = [p``, c];
 tt([
-  m()
+  v()
 ], ae.prototype, "isOpen", 2);
 tt([
-  m()
+  v()
 ], ae.prototype, "uniqueIds", 2);
 tt([
-  m()
+  v()
 ], ae.prototype, "selectedMenu", 2);
 tt([
-  m()
+  v()
 ], ae.prototype, "isHovering", 2);
 tt([
   n({ type: String })
@@ -10177,7 +10279,7 @@ Pt([
   n({ type: String })
 ], xe.prototype, "side", 2);
 Pt([
-  m()
+  v()
 ], xe.prototype, "isOpen", 2);
 xe = Pt([
   d("rtg-menubar-content")
@@ -10560,7 +10662,7 @@ var sd = Object.defineProperty, od = Object.getOwnPropertyDescriptor, Ys = (e, t
     (a = e[i]) && (r = (o ? a(t, s, r) : a(r)) || r);
   return o && r && sd(t, s, r), r;
 };
-let Rt = class extends u {
+let Bt = class extends u {
   constructor() {
     super(...arguments), this.twCLass = "";
   }
@@ -10582,13 +10684,13 @@ let Rt = class extends u {
     `;
   }
 };
-Rt.styles = [p``, c];
+Bt.styles = [p``, c];
 Ys([
   n({ type: String })
-], Rt.prototype, "twCLass", 2);
-Rt = Ys([
+], Bt.prototype, "twCLass", 2);
+Bt = Ys([
   d("rtg-menubar")
-], Rt);
+], Bt);
 const id = "inline-flex items-center gap-1.5", ad = "transition-colors hover:text-foreground", nd = "font-normal text-foreground", ld = "[&>svg]:size-3.5", dd = "flex h-9 w-9 items-center justify-center", cd = "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5";
 var pd = Object.defineProperty, ud = Object.getOwnPropertyDescriptor, hd = (e, t, s, o) => {
   for (var r = o > 1 ? void 0 : o ? ud(t, s) : t, i = e.length - 1, a; i >= 0; i--)
@@ -10630,7 +10732,7 @@ jr.styles = [p``, c];
 jr = hd([
   d("rtg-bread-crumb-ellipsis")
 ], jr);
-var gd = Object.defineProperty, fd = Object.getOwnPropertyDescriptor, vd = (e, t, s, o) => {
+var gd = Object.defineProperty, fd = Object.getOwnPropertyDescriptor, md = (e, t, s, o) => {
   for (var r = o > 1 ? void 0 : o ? fd(t, s) : t, i = e.length - 1, a; i >= 0; i--)
     (a = e[i]) && (r = (o ? a(t, s, r) : a(r)) || r);
   return o && r && gd(t, s, r), r;
@@ -10654,13 +10756,13 @@ let Dr = class extends $ {
   }
 };
 Dr.styles = [p``, c];
-Dr = vd([
+Dr = md([
   d("rtg-bread-crumb-item")
 ], Dr);
-var md = Object.defineProperty, bd = Object.getOwnPropertyDescriptor, wd = (e, t, s, o) => {
+var vd = Object.defineProperty, bd = Object.getOwnPropertyDescriptor, wd = (e, t, s, o) => {
   for (var r = o > 1 ? void 0 : o ? bd(t, s) : t, i = e.length - 1, a; i >= 0; i--)
     (a = e[i]) && (r = (o ? a(t, s, r) : a(r)) || r);
-  return o && r && md(t, s, r), r;
+  return o && r && vd(t, s, r), r;
 };
 let Ar = class extends $ {
   getAttributesToExclude() {
@@ -10788,7 +10890,7 @@ var kd = Object.defineProperty, jd = Object.getOwnPropertyDescriptor, Ks = (e, t
     (a = e[i]) && (r = (o ? a(t, s, r) : a(r)) || r);
   return o && r && kd(t, s, r), r;
 };
-let Bt = class extends $ {
+let Rt = class extends $ {
   constructor() {
     super(...arguments), this.href = "/";
   }
@@ -10810,13 +10912,13 @@ let Bt = class extends $ {
     `;
   }
 };
-Bt.styles = [p``, c];
+Rt.styles = [p``, c];
 Ks([
   n({ type: String })
-], Bt.prototype, "href", 2);
-Bt = Ks([
+], Rt.prototype, "href", 2);
+Rt = Ks([
   d("rtg-bread-crumb-link")
-], Bt);
+], Rt);
 var Dd = Object.defineProperty, Ad = Object.getOwnPropertyDescriptor, er = (e, t, s, o) => {
   for (var r = o > 1 ? void 0 : o ? Ad(t, s) : t, i = e.length - 1, a; i >= 0; i--)
     (a = e[i]) && (r = (o ? a(t, s, r) : a(r)) || r);
@@ -10911,10 +11013,10 @@ Zs([
 Nt = Zs([
   d("rtg-input-otp-separator")
 ], Nt);
-var Rd = Object.defineProperty, Bd = Object.getOwnPropertyDescriptor, rt = (e, t, s, o) => {
-  for (var r = o > 1 ? void 0 : o ? Bd(t, s) : t, i = e.length - 1, a; i >= 0; i--)
+var Bd = Object.defineProperty, Rd = Object.getOwnPropertyDescriptor, rt = (e, t, s, o) => {
+  for (var r = o > 1 ? void 0 : o ? Rd(t, s) : t, i = e.length - 1, a; i >= 0; i--)
     (a = e[i]) && (r = (o ? a(t, s, r) : a(r)) || r);
-  return o && r && Rd(t, s, r), r;
+  return o && r && Bd(t, s, r), r;
 };
 let $e = class extends $ {
   constructor() {
@@ -11075,15 +11177,15 @@ export {
   $r as DialogFooter,
   ft as DialogHeader,
   Or as DialogOverlay,
-  vt as DropdownMenu,
-  B as DropdownMenuCheckboxItem,
+  mt as DropdownMenu,
+  R as DropdownMenuCheckboxItem,
   Ye as DropdownMenuContent,
   re as DropdownMenuGroup,
   X as DropdownMenuItem,
-  R as DropdownMenuRadioItem,
-  me as DropdownMenuSeparator,
+  B as DropdownMenuRadioItem,
+  ve as DropdownMenuSeparator,
   se as Input,
-  Rt as Menubar,
+  Bt as Menubar,
   q as MenubarCheckboxItem,
   xe as MenubarContent,
   ne as MenubarGroup,