revotech-ui-kit 0.0.22 → 0.0.24

package/dist/revotech-ui-kit.js

@@ -1,4 +1,4 @@
-import { LitElement as h, css as p, html as l, nothing as C, svg as ve } from "lit";
+import { LitElement as h, css as p, html as l, nothing as C, svg as me } from "lit";
 import { property as n, customElement as d, queryAssignedElements as no, state as S } from "lit/decorators.js";
 import { nothing as lo } from "lit/html.js";
 import { directive as Qt } from "lit/directive.js";
@@ -35,8 +35,8 @@ const tr = "-", go = (e) => {
       return u[0] === "" && u.length !== 1 && u.shift(), Ar(u, t) || fo(a);
     },
     getConflictingClassGroupIds: (a, u) => {
-      const m = o[a] || [];
-      return u && s[a] ? [...m, ...s[a]] : m;
+      const v = o[a] || [];
+      return u && s[a] ? [...v, ...s[a]] : v;
     }
   };
 }, Ar = (e, t) => {
@@ -66,7 +66,7 @@ const tr = "-", go = (e) => {
     nextPart: /* @__PURE__ */ new Map(),
     validators: []
   };
-  return mo(Object.entries(e.classGroups), o).forEach(([i, a]) => {
+  return vo(Object.entries(e.classGroups), o).forEach(([i, a]) => {
     kt(a, s, i, t);
   }), s;
 }, kt = (e, t, o, s) => {
@@ -77,7 +77,7 @@ const tr = "-", go = (e) => {
       return;
     }
     if (typeof r == "function") {
-      if (vo(r)) {
+      if (mo(r)) {
         kt(r(s), t, o, s);
         return;
       }
@@ -99,7 +99,7 @@ const tr = "-", go = (e) => {
       validators: []
     }), o = o.nextPart.get(s);
   }), o;
-}, vo = (e) => e.isThemeGetter, mo = (e, t) => t ? e.map(([o, s]) => {
+}, mo = (e) => e.isThemeGetter, vo = (e, t) => t ? e.map(([o, s]) => {
   const r = s.map((i) => typeof i == "string" ? t + i : typeof i == "object" ? Object.fromEntries(Object.entries(i).map(([a, u]) => [t + a, u])) : i);
   return [o, r];
 }) : e, wo = (e) => {
@@ -131,13 +131,13 @@ const tr = "-", go = (e) => {
     separator: t,
     experimentalParseClassName: o
   } = e, s = t.length === 1, r = t[0], i = t.length, a = (u) => {
-    const m = [];
-    let b = 0, v = 0, P;
+    const v = [];
+    let b = 0, m = 0, P;
     for (let w = 0; w < u.length; w++) {
       let j = u[w];
       if (b === 0) {
         if (j === r && (s || u.slice(w, w + i) === t)) {
-          m.push(u.slice(v, w)), v = w + i;
+          v.push(u.slice(m, w)), m = w + i;
           continue;
         }
         if (j === "/") {
@@ -147,9 +147,9 @@ const tr = "-", go = (e) => {
       }
       j === "[" ? b++ : j === "]" && b--;
     }
-    const k = m.length === 0 ? u : u.substring(v), N = k.startsWith(zr), D = N ? k.substring(1) : k, $ = P && P > v ? P - v : void 0;
+    const k = v.length === 0 ? u : u.substring(m), N = k.startsWith(zr), D = N ? k.substring(1) : k, $ = P && P > m ? P - m : void 0;
     return {
-      modifiers: m,
+      modifiers: v,
       hasImportantModifier: N,
       baseClassName: D,
       maybePostfixModifierPosition: $
@@ -178,9 +178,9 @@ const tr = "-", go = (e) => {
     getConflictingClassGroupIds: r
   } = t, i = [], a = e.trim().split($o);
   let u = "";
-  for (let m = a.length - 1; m >= 0; m -= 1) {
-    const b = a[m], {
-      modifiers: v,
+  for (let v = a.length - 1; v >= 0; v -= 1) {
+    const b = a[v], {
+      modifiers: m,
       hasImportantModifier: P,
       baseClassName: k,
       maybePostfixModifierPosition: N
@@ -197,7 +197,7 @@ const tr = "-", go = (e) => {
       }
       D = !1;
     }
-    const w = xo(v).join(":"), j = P ? w + zr : w, A = j + $;
+    const w = xo(m).join(":"), j = P ? w + zr : w, A = j + $;
     if (i.includes(A))
       continue;
     i.push(A);
@@ -226,16 +226,16 @@ const Ir = (e) => {
 };
 function Po(e, ...t) {
   let o, s, r, i = a;
-  function a(m) {
-    const b = t.reduce((v, P) => P(v), e());
-    return o = _o(b), s = o.cache.get, r = o.cache.set, i = u, u(m);
+  function a(v) {
+    const b = t.reduce((m, P) => P(m), e());
+    return o = _o(b), s = o.cache.get, r = o.cache.set, i = u, u(v);
   }
-  function u(m) {
-    const b = s(m);
+  function u(v) {
+    const b = s(v);
     if (b)
       return b;
-    const v = Oo(m, o);
-    return r(m, v), v;
+    const m = Oo(v, o);
+    return r(v, m), m;
   }
   return function() {
     return i(Co.apply(null, arguments));
@@ -244,7 +244,7 @@ function Po(e, ...t) {
 const y = (e) => {
   const t = (o) => o[e] || [];
   return t.isThemeGetter = !0, t;
-}, Lr = /^\[(?:([a-z-]+):)?(.+)\]$/i, ko = /^\d+\/\d+$/, So = /* @__PURE__ */ new Set(["px", "full", "screen"]), Eo = /^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/, jo = /\d+(%|px|r?em|[sdl]?v([hwib]|min|max)|pt|pc|in|cm|mm|cap|ch|ex|r?lh|cq(w|h|i|b|min|max))|\b(calc|min|max|clamp)\(.+\)|^0$/, Do = /^(rgba?|hsla?|hwb|(ok)?(lab|lch))\(.+\)$/, Ao = /^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/, zo = /^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/, H = (e) => Oe(e) || So.has(e) || ko.test(e), Q = (e) => Me(e, "length", Fo), Oe = (e) => !!e && !Number.isNaN(Number(e)), Pt = (e) => Me(e, "number", Oe), Ue = (e) => !!e && Number.isInteger(Number(e)), Io = (e) => e.endsWith("%") && Oe(e.slice(0, -1)), f = (e) => Lr.test(e), ee = (e) => Eo.test(e), Lo = /* @__PURE__ */ new Set(["length", "size", "percentage"]), Mo = (e) => Me(e, Lo, Mr), To = (e) => Me(e, "position", Mr), No = /* @__PURE__ */ new Set(["image", "url"]), Ro = (e) => Me(e, No, qo), Bo = (e) => Me(e, "", Vo), Ge = () => !0, Me = (e, t, o) => {
+}, Lr = /^\[(?:([a-z-]+):)?(.+)\]$/i, ko = /^\d+\/\d+$/, So = /* @__PURE__ */ new Set(["px", "full", "screen"]), Eo = /^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/, jo = /\d+(%|px|r?em|[sdl]?v([hwib]|min|max)|pt|pc|in|cm|mm|cap|ch|ex|r?lh|cq(w|h|i|b|min|max))|\b(calc|min|max|clamp)\(.+\)|^0$/, Do = /^(rgba?|hsla?|hwb|(ok)?(lab|lch))\(.+\)$/, Ao = /^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/, zo = /^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/, K = (e) => Oe(e) || So.has(e) || ko.test(e), Q = (e) => Me(e, "length", Fo), Oe = (e) => !!e && !Number.isNaN(Number(e)), Pt = (e) => Me(e, "number", Oe), Ue = (e) => !!e && Number.isInteger(Number(e)), Io = (e) => e.endsWith("%") && Oe(e.slice(0, -1)), f = (e) => Lr.test(e), ee = (e) => Eo.test(e), Lo = /* @__PURE__ */ new Set(["length", "size", "percentage"]), Mo = (e) => Me(e, Lo, Mr), To = (e) => Me(e, "position", Mr), No = /* @__PURE__ */ new Set(["image", "url"]), Ro = (e) => Me(e, No, qo), Bo = (e) => Me(e, "", Vo), Ge = () => !0, Me = (e, t, o) => {
   const s = Lr.exec(e);
   return s ? s[1] ? typeof t == "string" ? s[1] === t : t.has(s[1]) : o(s[2]) : !1;
 }, Fo = (e) => (
@@ -253,34 +253,34 @@ const y = (e) => {
   // I could also use lookbehind assertion in `lengthUnitRegex` but that isn't supported widely enough.
   jo.test(e) && !Do.test(e)
 ), Mr = () => !1, Vo = (e) => Ao.test(e), qo = (e) => zo.test(e), Uo = () => {
-  const e = y("colors"), t = y("spacing"), o = y("blur"), s = y("brightness"), r = y("borderColor"), i = y("borderRadius"), a = y("borderSpacing"), u = y("borderWidth"), m = y("contrast"), b = y("grayscale"), v = y("hueRotate"), P = y("invert"), k = y("gap"), N = y("gradientColorStops"), D = y("gradientColorStopPositions"), $ = y("inset"), w = y("margin"), j = y("opacity"), A = y("padding"), Ve = y("saturate"), be = y("scale"), nt = y("sepia"), wr = y("skew"), yr = y("space"), xr = y("translate"), _t = () => ["auto", "contain", "none"], $t = () => ["auto", "hidden", "clip", "visible", "scroll"], Ot = () => ["auto", f, t], x = () => [f, t], _r = () => ["", H, Q], lt = () => ["auto", Oe, f], $r = () => ["bottom", "center", "left", "left-bottom", "left-top", "right", "right-bottom", "right-top", "top"], dt = () => ["solid", "dashed", "dotted", "double", "none"], Or = () => ["normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"], Ct = () => ["start", "end", "center", "between", "around", "evenly", "stretch"], qe = () => ["", "0", f], Cr = () => ["auto", "avoid", "all", "avoid-page", "page", "left", "right", "column"], K = () => [Oe, f];
+  const e = y("colors"), t = y("spacing"), o = y("blur"), s = y("brightness"), r = y("borderColor"), i = y("borderRadius"), a = y("borderSpacing"), u = y("borderWidth"), v = y("contrast"), b = y("grayscale"), m = y("hueRotate"), P = y("invert"), k = y("gap"), N = y("gradientColorStops"), D = y("gradientColorStopPositions"), $ = y("inset"), w = y("margin"), j = y("opacity"), A = y("padding"), Ve = y("saturate"), be = y("scale"), nt = y("sepia"), wr = y("skew"), yr = y("space"), xr = y("translate"), _t = () => ["auto", "contain", "none"], $t = () => ["auto", "hidden", "clip", "visible", "scroll"], Ot = () => ["auto", f, t], x = () => [f, t], _r = () => ["", K, Q], lt = () => ["auto", Oe, f], $r = () => ["bottom", "center", "left", "left-bottom", "left-top", "right", "right-bottom", "right-top", "top"], dt = () => ["solid", "dashed", "dotted", "double", "none"], Or = () => ["normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"], Ct = () => ["start", "end", "center", "between", "around", "evenly", "stretch"], qe = () => ["", "0", f], Cr = () => ["auto", "avoid", "all", "avoid-page", "page", "left", "right", "column"], Y = () => [Oe, f];
   return {
     cacheSize: 500,
     separator: ":",
     theme: {
       colors: [Ge],
-      spacing: [H, Q],
+      spacing: [K, Q],
       blur: ["none", "", ee, f],
-      brightness: K(),
+      brightness: Y(),
       borderColor: [e],
       borderRadius: ["none", "", "full", ee, f],
       borderSpacing: x(),
       borderWidth: _r(),
-      contrast: K(),
+      contrast: Y(),
       grayscale: qe(),
-      hueRotate: K(),
+      hueRotate: Y(),
       invert: qe(),
       gap: x(),
       gradientColorStops: [e],
       gradientColorStopPositions: [Io, Q],
       inset: Ot(),
       margin: Ot(),
-      opacity: K(),
+      opacity: Y(),
       padding: x(),
-      saturate: K(),
-      scale: K(),
+      saturate: Y(),
+      scale: Y(),
       sepia: qe(),
-      skew: K(),
+      skew: Y(),
       space: x(),
       translate: x()
     },
@@ -999,7 +999,7 @@ const y = (e) => {
        * @see https://tailwindcss.com/docs/line-height
        */
       leading: [{
-        leading: ["none", "tight", "snug", "normal", "relaxed", "loose", H, f]
+        leading: ["none", "tight", "snug", "normal", "relaxed", "loose", K, f]
       }],
       /**
        * List Style Image
@@ -1075,14 +1075,14 @@ const y = (e) => {
        * @see https://tailwindcss.com/docs/text-decoration-thickness
        */
       "text-decoration-thickness": [{
-        decoration: ["auto", "from-font", H, Q]
+        decoration: ["auto", "from-font", K, Q]
       }],
       /**
        * Text Underline Offset
        * @see https://tailwindcss.com/docs/text-underline-offset
        */
       "underline-offset": [{
-        "underline-offset": ["auto", H, f]
+        "underline-offset": ["auto", K, f]
       }],
       /**
        * Text Decoration Color
@@ -1550,14 +1550,14 @@ const y = (e) => {
        * @see https://tailwindcss.com/docs/outline-offset
        */
       "outline-offset": [{
-        "outline-offset": [H, f]
+        "outline-offset": [K, f]
       }],
       /**
        * Outline Width
        * @see https://tailwindcss.com/docs/outline-width
        */
       "outline-w": [{
-        outline: [H, Q]
+        outline: [K, Q]
       }],
       /**
        * Outline Color
@@ -1597,7 +1597,7 @@ const y = (e) => {
        * @see https://tailwindcss.com/docs/ring-offset-width
        */
       "ring-offset-w": [{
-        "ring-offset": [H, Q]
+        "ring-offset": [K, Q]
       }],
       /**
        * Ring Offset Color
@@ -1670,7 +1670,7 @@ const y = (e) => {
        * @see https://tailwindcss.com/docs/contrast
        */
       contrast: [{
-        contrast: [m]
+        contrast: [v]
       }],
       /**
        * Drop Shadow
@@ -1691,7 +1691,7 @@ const y = (e) => {
        * @see https://tailwindcss.com/docs/hue-rotate
        */
       "hue-rotate": [{
-        "hue-rotate": [v]
+        "hue-rotate": [m]
       }],
       /**
        * Invert
@@ -1741,7 +1741,7 @@ const y = (e) => {
        * @see https://tailwindcss.com/docs/backdrop-contrast
        */
       "backdrop-contrast": [{
-        "backdrop-contrast": [m]
+        "backdrop-contrast": [v]
       }],
       /**
        * Backdrop Grayscale
@@ -1755,7 +1755,7 @@ const y = (e) => {
        * @see https://tailwindcss.com/docs/backdrop-hue-rotate
        */
       "backdrop-hue-rotate": [{
-        "backdrop-hue-rotate": [v]
+        "backdrop-hue-rotate": [m]
       }],
       /**
        * Backdrop Invert
@@ -1841,7 +1841,7 @@ const y = (e) => {
        * @see https://tailwindcss.com/docs/transition-duration
        */
       duration: [{
-        duration: K()
+        duration: Y()
       }],
       /**
        * Transition Timing Function
@@ -1855,7 +1855,7 @@ const y = (e) => {
        * @see https://tailwindcss.com/docs/transition-delay
        */
       delay: [{
-        delay: K()
+        delay: Y()
       }],
       /**
        * Animation
@@ -2192,7 +2192,7 @@ const y = (e) => {
        * @see https://tailwindcss.com/docs/stroke-width
        */
       "stroke-w": [{
-        stroke: [H, Q, Pt]
+        stroke: [K, Q, Pt]
       }],
       /**
        * Stroke
@@ -2315,16 +2315,16 @@ const Sr = (e) => typeof e == "boolean" ? "".concat(e) : e === 0 ? "0" : e, Er =
   if ((t == null ? void 0 : t.variants) == null)
     return Er(e, o == null ? void 0 : o.class, o == null ? void 0 : o.className);
   const { variants: r, defaultVariants: i } = t, a = Object.keys(r).map((b) => {
-    const v = o == null ? void 0 : o[b], P = i == null ? void 0 : i[b];
-    if (v === null)
+    const m = o == null ? void 0 : o[b], P = i == null ? void 0 : i[b];
+    if (m === null)
       return null;
-    const k = Sr(v) || Sr(P);
+    const k = Sr(m) || Sr(P);
     return r[b][k];
-  }), u = o && Object.entries(o).reduce((b, v) => {
-    let [P, k] = v;
+  }), u = o && Object.entries(o).reduce((b, m) => {
+    let [P, k] = m;
     return k === void 0 || (b[P] = k), b;
-  }, {}), m = t == null || (s = t.compoundVariants) === null || s === void 0 ? void 0 : s.reduce((b, v) => {
-    let { class: P, className: k, ...N } = v;
+  }, {}), v = t == null || (s = t.compoundVariants) === null || s === void 0 ? void 0 : s.reduce((b, m) => {
+    let { class: P, className: k, ...N } = m;
     return Object.entries(N).every((D) => {
       let [$, w] = D;
       return Array.isArray(w) ? w.includes({
@@ -2340,7 +2340,7 @@ const Sr = (e) => typeof e == "boolean" ? "".concat(e) : e === 0 ? "0" : e, Er =
       k
     ] : b;
   }, []);
-  return Er(e, a, m, o == null ? void 0 : o.class, o == null ? void 0 : o.className);
+  return Er(e, a, v, o == null ? void 0 : o.class, o == null ? void 0 : o.className);
 }, Yo = de(
   "inline-flex items-center justify-center whitespace-nowrap rounded-sm text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
   {
@@ -5501,12 +5501,12 @@ jt.styles = [p``, c];
 jt = fs([
   d("rtg-dialog-overlay")
 ], jt);
-var bs = Object.defineProperty, vs = Object.getOwnPropertyDescriptor, Fr = (e, t, o, s) => {
-  for (var r = s > 1 ? void 0 : s ? vs(t, o) : t, i = e.length - 1, a; i >= 0; i--)
+var bs = Object.defineProperty, ms = Object.getOwnPropertyDescriptor, Fr = (e, t, o, s) => {
+  for (var r = s > 1 ? void 0 : s ? ms(t, o) : t, i = e.length - 1, a; i >= 0; i--)
     (a = e[i]) && (r = (s ? a(t, o, r) : a(r)) || r);
   return s && r && bs(t, o, r), r;
 };
-const ms = "open", ws = "closed";
+const vs = "open", ws = "closed";
 let Ce = class extends h {
   constructor() {
     super(...arguments), this.state = ws;
@@ -5529,7 +5529,7 @@ let Ce = class extends h {
   render() {
     return l`
       <div rtgdlg-root>
-        ${this.state === ms ? l` <rtg-dialog-overlay></rtg-dialog-overlay>` : C}
+        ${this.state === vs ? l` <rtg-dialog-overlay></rtg-dialog-overlay>` : C}
         <slot></slot>
       </div>
     `;
@@ -5736,7 +5736,7 @@ var js = Object.defineProperty, Ds = Object.getOwnPropertyDescriptor, bt = (e, t
     (a = e[i]) && (r = (s ? a(t, o, r) : a(r)) || r);
   return s && r && js(t, o, r), r;
 };
-let W = class extends h {
+let H = class extends h {
   constructor() {
     super(...arguments), this.heading = "", this._id = "", this._hidden = "";
   }
@@ -5745,7 +5745,7 @@ let W = class extends h {
     if (this._id !== "")
       return this._id;
     const e = (o = (t = this.parentElement) == null ? void 0 : t.shadowRoot) == null ? void 0 : o.querySelector("div[rtgcmd-list]");
-    return e ? this._id = `${e.getAttribute("id")}g${W._counter++}` : this._id = `rtgcmdrxlxg${W._counter++}`, this._id;
+    return e ? this._id = `${e.getAttribute("id")}g${H._counter++}` : this._id = `rtgcmdrxlxg${H._counter++}`, this._id;
   }
   render() {
     const e = "overflow-hidden p-1 text-foreground [&_[rtgcmd-group-heading]]:px-2 [&_[rtgcmd-group-heading]]:py-1.5 [&_[rtgcmd-group-heading]]:text-xs [&_[rtgcmd-group-heading]]:font-medium [&_[rtgcmd-group-heading]]:text-muted-foreground";
@@ -5774,20 +5774,20 @@ let W = class extends h {
         `}`;
   }
 };
-W._counter = 0;
-W.styles = [p``, c];
+H._counter = 0;
+H.styles = [p``, c];
 bt([
   n({ type: String })
-], W.prototype, "heading", 2);
+], H.prototype, "heading", 2);
 bt([
   n({ attribute: "id", type: String })
-], W.prototype, "_id", 2);
+], H.prototype, "_id", 2);
 bt([
   n({ attribute: "aria-hidden", type: String })
-], W.prototype, "_hidden", 2);
-W = bt([
+], H.prototype, "_hidden", 2);
+H = bt([
   d("rtg-command-group")
-], W);
+], H);
 var As = Object.defineProperty, zs = Object.getOwnPropertyDescriptor, sr = (e, t, o, s) => {
   for (var r = s > 1 ? void 0 : s ? zs(t, o) : t, i = e.length - 1, a; i >= 0; i--)
     (a = e[i]) && (r = (s ? a(t, o, r) : a(r)) || r);
@@ -5810,16 +5810,16 @@ let He = class extends h {
         "rtg-command-list > rtg-command-group"
       );
       o && o.forEach((r) => {
-        var m, b;
+        var v, b;
         let i = !0;
         const a = r.querySelectorAll("rtg-command-item");
-        a && a.forEach((v) => {
-          ((v == null ? void 0 : v.value) || "").toLowerCase().includes(this._value.toLowerCase()) ? (i = !1, t = !1, v.setAttribute("aria-hidden", "false")) : v.setAttribute("aria-hidden", "true");
+        a && a.forEach((m) => {
+          ((m == null ? void 0 : m.value) || "").toLowerCase().includes(this._value.toLowerCase()) ? (i = !1, t = !1, m.setAttribute("aria-hidden", "false")) : m.setAttribute("aria-hidden", "true");
         }), r.setAttribute("aria-hidden", i ? "true" : "false");
         let u = r.previousElementSibling;
         u && u.setAttribute(
           "aria-hidden",
-          i || ((m = u.previousElementSibling) == null ? void 0 : m.getAttribute(
+          i || ((v = u.previousElementSibling) == null ? void 0 : v.getAttribute(
             "aria-hidden"
           )) === "true" ? "true" : "false"
         ), u = r.nextElementSibling, u && u.setAttribute(
@@ -6327,10 +6327,10 @@ Rt.styles = p`
 Rt = bi([
   d("rtg-alert-title")
 ], Rt);
-var vi = Object.defineProperty, mi = Object.getOwnPropertyDescriptor, wi = (e, t, o, s) => {
-  for (var r = s > 1 ? void 0 : s ? mi(t, o) : t, i = e.length - 1, a; i >= 0; i--)
+var mi = Object.defineProperty, vi = Object.getOwnPropertyDescriptor, wi = (e, t, o, s) => {
+  for (var r = s > 1 ? void 0 : s ? vi(t, o) : t, i = e.length - 1, a; i >= 0; i--)
     (a = e[i]) && (r = (s ? a(t, o, r) : a(r)) || r);
-  return s && r && vi(t, o, r), r;
+  return s && r && mi(t, o, r), r;
 };
 let Bt = class extends h {
   render() {
@@ -6451,7 +6451,7 @@ Ee = Xr([
   d("rtg-badge")
 ], Ee);
 function Yr() {
-  return ve` <svg
+  return me` <svg
   class="shrink-0 size-3.5 text-gray-500 dark:text-neutral-500"
   xmlns="http://www.w3.org/2000/svg"
   width="24"
@@ -6469,7 +6469,7 @@ function Yr() {
   `;
 }
 function Kr() {
-  return ve`
+  return me`
              <svg
                 class="shrink-0 size-3.5 text-blue-600 dark:text-blue-500"
                 xmlns="http://www.w3.org/2000/svg"
@@ -6487,7 +6487,7 @@ function Kr() {
   `;
 }
 function Hr() {
-  return ve` <svg 
+  return me` <svg 
     xmlns="http://www.w3.org/2000/svg" 
     width = "24" 
     height = "24" 
@@ -6504,7 +6504,7 @@ function Hr() {
   `;
 }
 function Wr() {
-  return ve` <svg
+  return me` <svg
     xmlns="http://www.w3.org/2000/svg"
     width="24"
     height="24"
@@ -6521,11 +6521,11 @@ function Wr() {
   `;
 }
 function Ci() {
-  return ve` <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-chevron-down h-4 w-4 shrink-0 transition-transform duration-200"><path d="m6 9 6 6 6-6"></path></svg>
+  return me` <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-chevron-down h-4 w-4 shrink-0 transition-transform duration-200"><path d="m6 9 6 6 6-6"></path></svg>
   `;
 }
 function Pi() {
-  return ve` <svg
+  return me` <svg
     xmlns="http://www.w3.org/2000/svg"
     width="24"
     height="24"
@@ -6542,9 +6542,9 @@ function Pi() {
   `;
 }
 function ki() {
-  return ve`<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-dot " > <circle cx="12.1" cy = "12.1" r = "1" > </circle></svg >`;
+  return me`<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-dot " > <circle cx="12.1" cy = "12.1" r = "1" > </circle></svg >`;
 }
-var Si = Object.defineProperty, Ei = Object.getOwnPropertyDescriptor, vt = (e, t, o, s) => {
+var Si = Object.defineProperty, Ei = Object.getOwnPropertyDescriptor, mt = (e, t, o, s) => {
   for (var r = s > 1 ? void 0 : s ? Ei(t, o) : t, i = e.length - 1, a; i >= 0; i--)
     (a = e[i]) && (r = (s ? a(t, o, r) : a(r)) || r);
   return s && r && Si(t, o, r), r;
@@ -6577,16 +6577,16 @@ let je = class extends h {
   }
 };
 je.styles = [p``, c];
-vt([
+mt([
   n({ type: String })
 ], je.prototype, "value", 2);
-vt([
+mt([
   n({ type: Function })
 ], je.prototype, "handleClick", 2);
-vt([
+mt([
   n({ type: Function })
 ], je.prototype, "handleKeyDown", 2);
-je = vt([
+je = mt([
   d("rtg-combo-box-input")
 ], je);
 var ji = Object.defineProperty, Di = Object.getOwnPropertyDescriptor, pe = (e, t, o, s) => {
@@ -6663,7 +6663,7 @@ pe([
 F = pe([
   d("rtg-combo-box-item")
 ], F);
-const Ai = "open", mt = "closed";
+const Ai = "open", vt = "closed";
 var zi = Object.defineProperty, Ii = Object.getOwnPropertyDescriptor, lr = (e, t, o, s) => {
   for (var r = s > 1 ? void 0 : s ? Ii(t, o) : t, i = e.length - 1, a; i >= 0; i--)
     (a = e[i]) && (r = (s ? a(t, o, r) : a(r)) || r);
@@ -6671,7 +6671,7 @@ var zi = Object.defineProperty, Ii = Object.getOwnPropertyDescriptor, lr = (e, t
 };
 let Ze = class extends h {
   constructor() {
-    super(...arguments), this.state = mt, this.isOpen = !1;
+    super(...arguments), this.state = vt, this.isOpen = !1;
   }
   get _popover() {
     let e = this.parentElement;
@@ -6724,18 +6724,34 @@ var Li = Object.defineProperty, Mi = Object.getOwnPropertyDescriptor, ue = (e, t
 };
 let R = class extends h {
   constructor() {
-    super(...arguments), this.isOpen = !1, this.selectedValue = "", this.searchTerm = "", this.focusedIndex = -1, this.filteredItems = [], this.label = "Select an item", this.items = [];
+    super(...arguments), this.isOpen = !1, this.selectedValue = "", this.searchTerm = "", this.focusedIndex = -1, this.filteredItems = [], this.label = "Select an item", this.items = [], this.handleClickOutside = (e) => {
+      var r, i;
+      const t = e.target, o = (r = this.shadowRoot) == null ? void 0 : r.querySelector(
+        "[data-hs-combo-box]"
+      );
+      if (console.log("target", t), console.log("this.shadowRoot", this.shadowRoot), !this.shadowRoot || !(t instanceof HTMLElement)) {
+        console.log("Invalid target or shadow root");
+        return;
+      }
+      const s = (i = t.shadowRoot) == null ? void 0 : i.firstElementChild;
+      if (!s) {
+        this.isOpen = !1;
+        return;
+      }
+      (!o || !o.contains(s)) && console.log(
+        "!dropdownContainer || !dropdownContainer.contains(firstChild)"
+      );
+    };
   }
   firstUpdated(e) {
-    console.log("this. items firstUpdated", this.items), this.items && this.items.length > 0 && (this.filteredItems = this.items.filter(
+    this.items && this.items.length > 0 && (this.filteredItems = this.items.filter(
       (t) => t.toLowerCase().includes(this.searchTerm)
     ));
   }
   toggleDropdown() {
-    this.isOpen = !this.isOpen, this.focusedIndex = -1, console.log("toggleDropdown", this.isOpen);
+    this.isOpen = !this.isOpen, this.focusedIndex = -1;
   }
   selectItem(e) {
-    console.log("selectItem");
     const t = e.target;
     if (t instanceof HTMLElement) {
       const o = t.closest(
@@ -6746,15 +6762,13 @@ let R = class extends h {
       console.log("Event target is not an HTMLElement");
   }
   handleInputClick() {
-    console.log("-----handleInputClick------"), this.toggleDropdown();
+    this.toggleDropdown();
   }
   handleSearch(e) {
-    console.log("handleSearch");
     const t = e.target;
     this.searchTerm = t.value, this.filteredItems = this.items.filter((o) => o.toLowerCase().includes(this.searchTerm.toLowerCase()));
   }
   handleKeyDown(e) {
-    console.log("handleKeyDown");
     const t = this.filteredItems.length;
     switch (e.key) {
       case "ArrowDown":
@@ -6769,45 +6783,50 @@ let R = class extends h {
     }
   }
   handleMouseOver(e, t) {
-    console.log("handleMouseOver"), e.preventDefault(), this.focusedIndex = t;
+    e.preventDefault(), this.focusedIndex = t;
   }
   connectedCallback() {
     var e, t, o, s;
-    super.connectedCallback(), console.log("connectedCallback"), document.addEventListener("click", this.handleClickOutside.bind(this)), console.log("connectedCallback click"), (t = (e = this.shadowRoot) == null ? void 0 : e.querySelector("input")) == null || t.addEventListener("focus", () => {
-      this.isOpen = !0, console.log("connectedCallback focus", this.isOpen);
+    super.connectedCallback(), document.addEventListener("click", this.handleClickOutside.bind(this)), (t = (e = this.shadowRoot) == null ? void 0 : e.querySelector("input")) == null || t.addEventListener("focus", () => {
+      this.isOpen = !0;
     }), (s = (o = this.shadowRoot) == null ? void 0 : o.querySelector("input")) == null || s.addEventListener("blur", () => {
-      this.isOpen && (this.isOpen = !1, console.log("connectedCallback blur", this.isOpen));
+      this.isOpen && (this.isOpen = !1);
     });
   }
   disconnectedCallback() {
     var e, t, o, s;
-    console.log("disconnectedCallback"), super.disconnectedCallback(), document.removeEventListener("click", this.handleClickOutside), (t = (e = this.shadowRoot) == null ? void 0 : e.querySelector("input")) == null || t.removeEventListener("focus", () => {
+    super.disconnectedCallback(), document.removeEventListener("click", this.handleClickOutside), (t = (e = this.shadowRoot) == null ? void 0 : e.querySelector("input")) == null || t.removeEventListener("focus", () => {
     }), (s = (o = this.shadowRoot) == null ? void 0 : o.querySelector("input")) == null || s.removeEventListener("blur", () => {
     });
   }
-  handleClickOutside(e) {
-    console.log("handleClickOutside");
-  }
   updateFocus() {
-    if (console.log("updateFocus"), !this.shadowRoot)
+    if (!this.shadowRoot)
       return;
     this.shadowRoot.querySelectorAll("rtg-combo-box-item").forEach((t, o) => {
       o === this.focusedIndex ? t.classList.add("bg-gray-100") : t.classList.remove("bg-gray-100");
     });
   }
   render() {
-    return console.log("render ", this.isOpen), l`
+    return l`
       <div class="relative" data-hs-combo-box="">
-        isopen:${this.isOpen}
         <div>
-          <input part="combobox" class="inline-flex justify-between items-center
-          w-full h-10 px-4 py-2 whitespace-nowrap rounded-md text-sm font-medium
-          border border-input cursor-pointer ring-offset-background
-          transition-colors disabled:pointer-events-none disabled:opacity-50
-          bg-background hover:bg-accent hover:text-accent-foreground
-          outline-none" role="combobox" aria-expanded=${this.isOpen} readonly
-          .value=${this.selectedValue || this.label} //
-          @click="${this.handleInputClick}" @keydown="${this.handleKeyDown}" />
+          <input
+            part="combobox"
+            class="inline-flex justify-between items-center w-full h-10 px-4 py-2 whitespace-nowrap rounded-md 
+              text-sm font-medium border border-input cursor-pointer
+              ring-offset-background 
+              transition-colors disabled:pointer-events-none 
+              disabled:opacity-50  
+              bg-background hover:bg-accent 
+              hover:text-accent-foreground
+              outline-none"
+            role="combobox"
+            aria-expanded=${this.isOpen}
+            readonly
+            .value=${this.selectedValue || this.label}
+            @click="${this.handleInputClick}"
+            @keydown="${this.handleKeyDown}"
+          />
           <div
             class="absolute top-1/2 end-3 -translate-y-1/2 cursor-pointer"
             aria-expanded=${this.isOpen}
@@ -6898,7 +6917,7 @@ var Ti = Object.defineProperty, Ni = Object.getOwnPropertyDescriptor, dr = (e, t
 };
 let De = class extends h {
   constructor() {
-    super(...arguments), this.state = mt, this.isOpen = !1;
+    super(...arguments), this.state = vt, this.isOpen = !1;
   }
   get _dropdownMenu() {
     let e = this.parentElement;
@@ -7006,7 +7025,7 @@ it([
 V = it([
   d("rtg-dropdown-menu-item")
 ], V);
-var Fi = Object.defineProperty, Vi = Object.getOwnPropertyDescriptor, me = (e, t, o, s) => {
+var Fi = Object.defineProperty, Vi = Object.getOwnPropertyDescriptor, ve = (e, t, o, s) => {
   for (var r = s > 1 ? void 0 : s ? Vi(t, o) : t, i = e.length - 1, a; i >= 0; i--)
     (a = e[i]) && (r = (s ? a(t, o, r) : a(r)) || r);
   return s && r && Fi(t, o, r), r;
@@ -7077,25 +7096,25 @@ I.styles = [
     `,
   c
 ];
-me([
+ve([
   n({ type: String })
 ], I.prototype, "_id", 2);
-me([
+ve([
   n({ attribute: "aria-hidden", type: String })
 ], I.prototype, "_hidden", 2);
-me([
+ve([
   n({ attribute: "data-value", type: String })
 ], I.prototype, "value", 1);
-me([
+ve([
   n({ type: Boolean })
 ], I.prototype, "selected", 2);
-me([
+ve([
   n({ type: Boolean })
 ], I.prototype, "checked", 2);
-me([
+ve([
   n({ type: Boolean })
 ], I.prototype, "disabled", 2);
-I = me([
+I = ve([
   d("rtg-dropdown-menu-radio-item")
 ], I);
 var qi = Object.defineProperty, Ui = Object.getOwnPropertyDescriptor, cr = (e, t, o, s) => {
@@ -7244,7 +7263,7 @@ var Yi = Object.defineProperty, Ki = Object.getOwnPropertyDescriptor, wt = (e, t
     (a = e[i]) && (r = (s ? a(t, o, r) : a(r)) || r);
   return s && r && Yi(t, o, r), r;
 };
-let Z = class extends h {
+let W = class extends h {
   constructor() {
     super(...arguments), this.heading = "", this._id = "", this._hidden = "";
   }
@@ -7253,7 +7272,7 @@ let Z = class extends h {
     if (this._id !== "")
       return this._id;
     const e = (o = (t = this.parentElement) == null ? void 0 : t.shadowRoot) == null ? void 0 : o.querySelector("div[rtgcmd-list]");
-    return e ? this._id = `${e.getAttribute("id")}g${Z._counter++}` : this._id = `rtgcmdrxlxg${Z._counter++}`, this._id;
+    return e ? this._id = `${e.getAttribute("id")}g${W._counter++}` : this._id = `rtgcmdrxlxg${W._counter++}`, this._id;
   }
   render() {
     const e = "overflow-hidden p-1 text-foreground [&_[rtgcmd-group-heading]]:px-2 [&_[rtgcmd-group-heading]]:py-1.5 [&_[rtgcmd-group-heading]]:text-xs [&_[rtgcmd-group-heading]]:font-medium [&_[rtgcmd-group-heading]]:text-muted-foreground";
@@ -7282,20 +7301,20 @@ let Z = class extends h {
         `}`;
   }
 };
-Z._counter = 0;
-Z.styles = [p``, c];
+W._counter = 0;
+W.styles = [p``, c];
 wt([
   n({ type: String })
-], Z.prototype, "heading", 2);
+], W.prototype, "heading", 2);
 wt([
   n({ attribute: "id", type: String })
-], Z.prototype, "_id", 2);
+], W.prototype, "_id", 2);
 wt([
   n({ attribute: "aria-hidden", type: String })
-], Z.prototype, "_hidden", 2);
-Z = wt([
+], W.prototype, "_hidden", 2);
+W = wt([
   d("rtg-dropdown-menu-group")
-], Z);
+], W);
 var Hi = Object.defineProperty, Wi = Object.getOwnPropertyDescriptor, Zr = (e, t, o, s) => {
   for (var r = s > 1 ? void 0 : s ? Wi(t, o) : t, i = e.length - 1, a; i >= 0; i--)
     (a = e[i]) && (r = (s ? a(t, o, r) : a(r)) || r);
@@ -7446,7 +7465,7 @@ var ea = Object.defineProperty, ta = Object.getOwnPropertyDescriptor, pr = (e, t
 };
 let Ae = class extends h {
   constructor() {
-    super(...arguments), this.state = mt, this.isOpen = !1;
+    super(...arguments), this.state = vt, this.isOpen = !1;
   }
   get _contextMenu() {
     let e = this.parentElement;
@@ -7598,7 +7617,7 @@ var sa = Object.defineProperty, ia = Object.getOwnPropertyDescriptor, yt = (e, t
     (a = e[i]) && (r = (s ? a(t, o, r) : a(r)) || r);
   return s && r && sa(t, o, r), r;
 };
-let J = class extends h {
+let Z = class extends h {
   constructor() {
     super(...arguments), this.heading = "", this._id = "", this._hidden = "";
   }
@@ -7607,7 +7626,7 @@ let J = class extends h {
     if (this._id !== "")
       return this._id;
     const e = (o = (t = this.parentElement) == null ? void 0 : t.shadowRoot) == null ? void 0 : o.querySelector("div[rtgcmd-list]");
-    return e ? this._id = `${e.getAttribute("id")}g${J._counter++}` : this._id = `rtgcmdrxlxg${J._counter++}`, this._id;
+    return e ? this._id = `${e.getAttribute("id")}g${Z._counter++}` : this._id = `rtgcmdrxlxg${Z._counter++}`, this._id;
   }
   render() {
     const e = "overflow-hidden p-1 text-foreground [&_[rtgcmd-group-heading]]:px-2 [&_[rtgcmd-group-heading]]:py-1.5 [&_[rtgcmd-group-heading]]:text-xs [&_[rtgcmd-group-heading]]:font-medium [&_[rtgcmd-group-heading]]:text-muted-foreground";
@@ -7636,20 +7655,20 @@ let J = class extends h {
         `}`;
   }
 };
-J._counter = 0;
-J.styles = [p``, c];
+Z._counter = 0;
+Z.styles = [p``, c];
 yt([
   n({ type: String })
-], J.prototype, "heading", 2);
+], Z.prototype, "heading", 2);
 yt([
   n({ attribute: "id", type: String })
-], J.prototype, "_id", 2);
+], Z.prototype, "_id", 2);
 yt([
   n({ attribute: "aria-hidden", type: String })
-], J.prototype, "_hidden", 2);
-J = yt([
+], Z.prototype, "_hidden", 2);
+Z = yt([
   d("rtg-context-menu-group")
-], J);
+], Z);
 var aa = Object.defineProperty, na = Object.getOwnPropertyDescriptor, at = (e, t, o, s) => {
   for (var r = s > 1 ? void 0 : s ? na(t, o) : t, i = e.length - 1, a; i >= 0; i--)
     (a = e[i]) && (r = (s ? a(t, o, r) : a(r)) || r);
@@ -7930,10 +7949,10 @@ eo([
 Qe = eo([
   d("rtg-context-menu")
 ], Qe);
-var va = Object.defineProperty, ma = Object.getOwnPropertyDescriptor, he = (e, t, o, s) => {
-  for (var r = s > 1 ? void 0 : s ? ma(t, o) : t, i = e.length - 1, a; i >= 0; i--)
+var ma = Object.defineProperty, va = Object.getOwnPropertyDescriptor, he = (e, t, o, s) => {
+  for (var r = s > 1 ? void 0 : s ? va(t, o) : t, i = e.length - 1, a; i >= 0; i--)
     (a = e[i]) && (r = (s ? a(t, o, r) : a(r)) || r);
-  return s && r && va(t, o, r), r;
+  return s && r && ma(t, o, r), r;
 };
 let G = class extends h {
   constructor() {
@@ -8013,7 +8032,7 @@ var wa = Object.defineProperty, ya = Object.getOwnPropertyDescriptor, hr = (e, t
 };
 let et = class extends h {
   constructor() {
-    super(...arguments), this.state = mt, this.isOpen = !1;
+    super(...arguments), this.state = vt, this.isOpen = !1;
   }
   render() {
     return l`
@@ -8491,7 +8510,7 @@ xt([
 ze = xt([
   d("rtg-accordion-trigger")
 ], ze);
-var Ba = Object.defineProperty, Fa = Object.getOwnPropertyDescriptor, vr = (e, t, o, s) => {
+var Ba = Object.defineProperty, Fa = Object.getOwnPropertyDescriptor, mr = (e, t, o, s) => {
   for (var r = s > 1 ? void 0 : s ? Fa(t, o) : t, i = e.length - 1, a; i >= 0; i--)
     (a = e[i]) && (r = (s ? a(t, o, r) : a(r)) || r);
   return s && r && Ba(t, o, r), r;
@@ -8530,13 +8549,13 @@ let ot = class extends uo {
   }
 };
 ot.styles = [er``, c];
-vr([
+mr([
   n({ type: String })
 ], ot.prototype, "value", 2);
-vr([
+mr([
   S()
 ], ot.prototype, "selectedValue", 2);
-ot = vr([
+ot = mr([
   d("rtg-accordion-content")
 ], ot);
 var $e = /* @__PURE__ */ ((e) => (e.MULTIPLE = "multiple", e.SINGLE = "single", e))($e || {}), Va = Object.defineProperty, qa = Object.getOwnPropertyDescriptor, to = (e, t, o, s) => {
@@ -8667,31 +8686,149 @@ var Ya = Object.defineProperty, Ka = Object.getOwnPropertyDescriptor, Fe = (e, t
     (a = e[i]) && (r = (s ? a(t, o, r) : a(r)) || r);
   return s && r && Ya(t, o, r), r;
 };
-let Y = class extends h {
+let J = class extends h {
   constructor() {
     super(...arguments), this.click = () => {
     }, this.disabled = !1, this.isCustomClass = !1, this.variant = "default", this.size = "default";
   }
   render() {
     return l`
-      <div
-        class="${g(
-      Y.buttonVariants({
-        variant: this.variant,
-        size: this.size,
-        className: this.className
-      })
-    )}  ${this.isCustomClass ? "rtg-sample-demo-custom-class" : ""}"
-      >
-        <div part="tab active">Tab A</div>
-        <div class="px-4" part="tab">Tab B</div>
-        <div part="tab">Tab C</div>
-      </div>
+      <rtg-card class="rounded block w-96" data-testid="card-id">
+        <cardheader data-testid="card-header-id">
+          <cardtitle data-testid="card-title-id">
+            <h3 class="text-white font-bold">Payment Method</h3>
+          </cardtitle>
+          <carddescription data-testid="card-description-id">
+            <p class="text-sm text-gray-400 mt-1">
+              Add a new payment method to your account.
+            </p>
+          </carddescription>
+        </cardheader>
+        <cardcontent data-testid="card-content-id">
+          <div class="grid grid-cols-3 gap-3 mt-7">
+            <div
+              class="flex flex-col border-2 border-white rounded-lg p-4 text-center"
+            >
+              <span>Card</span>
+              <span>test</span>
+            </div>
+            <div
+              class="flex flex-col border-2 border-white rounded-lg p-4 text-center"
+            >
+              <span>Card</span>
+              <span>test</span>
+            </div>
+            <div
+              class="flex flex-col border-2 border-white rounded-lg p-4 text-center"
+            >
+              <span>Card</span>
+              <span>test</span>
+            </div>
+          </div>
+          <div class="mt-6">
+            <span class="block text-sm mb-1 font-bold">Name</span>
+            <rtg-input
+              data-testid="input-id"
+              data-testchild="children-id"
+              id=""
+              type="text"
+              placeholder="Enter text"
+            ></rtg-input>
+          </div>
+          <div class="mt-4">
+            <span class="block text-sm mb-1 font-bold">Card Number</span>
+            <rtg-input type="text"></rtg-input>
+          </div>
+          <div class="grid grid-cols-3 gap-3 mt-6 mb-6">
+            <div>
+              <span class="block text-sm mb-1 font-bold">Expires</span>
+              <rtg-combo-box
+                label="Month"
+                .items='["next.js", "sveltekit", "nuxt.js", "remix", "astro"]'
+              >
+                <rtg-combo-box-list>
+                  <rtg-combo-box-item
+                    data-hs-combo-box-value="next.js"
+                    tabindex="0"
+                  ></rtg-combo-box-item>
+                  <rtg-combo-box-item
+                    data-hs-combo-box-value="sveltekit"
+                    tabindex="1"
+                  ></rtg-combo-box-item>
+                  <rtg-combo-box-item
+                    data-hs-combo-box-value="nuxt.js"
+                    tabindex="2"
+                  ></rtg-combo-box-item>
+                  <rtg-combo-box-item
+                    data-hs-combo-box-value="remix"
+                    tabindex="3"
+                  ></rtg-combo-box-item>
+                  <rtg-combo-box-item
+                    data-hs-combo-box-value="astro"
+                    tabindex="4"
+                  ></rtg-combo-box-item>
+                </rtg-combo-box-list>
+              </rtg-combo-box>
+            </div>
+            <div>
+              <span class="block text-sm mb-1 font-bold">Year</span>
+              <rtg-combo-box
+                label="Year"
+                items='["next.js", "sveltekit", "nuxt.js", "remix", "astro"]'
+              >
+                <rtg-combo-box-list>
+                  <rtg-combo-box-item
+                    data-hs-combo-box-value="next.js"
+                    tabindex="0"
+                  ></rtg-combo-box-item>
+                  <rtg-combo-box-item
+                    data-hs-combo-box-value="sveltekit"
+                    tabindex="1"
+                  ></rtg-combo-box-item>
+                  <rtg-combo-box-item
+                    data-hs-combo-box-value="nuxt.js"
+                    tabindex="2"
+                  ></rtg-combo-box-item>
+                  <rtg-combo-box-item
+                    data-hs-combo-box-value="remix"
+                    tabindex="3"
+                  ></rtg-combo-box-item>
+                  <rtg-combo-box-item
+                    data-hs-combo-box-value="astro"
+                    tabindex="4"
+                  ></rtg-combo-box-item>
+                </rtg-combo-box-list>
+              </rtg-combo-box>
+            </div>
+            <div>
+              <span class="block text-sm mb-1 font-bold">CVC</span>
+              <rtg-input
+                data-testid="input-id"
+                data-testchild="children-id"
+                id=""
+                type="text"
+                placeholder="Enter text"
+              ></rtg-input>
+            </div>
+          </div>
+        </cardcontent>
+        <cardfooter data-testid="card-footer-id">
+          <rtg-button
+            class="w-full text-black bg-white py-2 rounded-lg"
+            method="post"
+            data-testid="btn-id"
+            data-testchild="children-id"
+            variant="default"
+            size="default"
+            >Continue</rtg-button
+          >
+        </cardfooter>
+      </rtg-card>
     `;
   }
 };
-Y.buttonVariants = Xa;
-Y.styles = [
+J.buttonVariants = Xa;
+J.styles = [
   c,
   p`
       :host {
@@ -8710,22 +8847,22 @@ Y.styles = [
 ];
 Fe([
   n({ type: Function })
-], Y.prototype, "click", 2);
+], J.prototype, "click", 2);
 Fe([
   n({ type: Boolean })
-], Y.prototype, "disabled", 2);
+], J.prototype, "disabled", 2);
 Fe([
   n({ type: String })
-], Y.prototype, "isCustomClass", 2);
+], J.prototype, "isCustomClass", 2);
 Fe([
   n({ type: String })
-], Y.prototype, "variant", 2);
+], J.prototype, "variant", 2);
 Fe([
   n({ type: String })
-], Y.prototype, "size", 2);
-Y = Fe([
+], J.prototype, "size", 2);
+J = Fe([
   d("rtg-sample-demo")
-], Y);
+], J);
 var Ha = Object.defineProperty, Wa = Object.getOwnPropertyDescriptor, Za = (e, t, o, s) => {
   for (var r = s > 1 ? void 0 : s ? Wa(t, o) : t, i = e.length - 1, a; i >= 0; i--)
     (a = e[i]) && (r = (s ? a(t, o, r) : a(r)) || r);
@@ -8784,7 +8921,7 @@ Xt.styles = [p``, c];
 Xt = en([
   d("rtg-collapsible-content")
 ], Xt);
-var tn = Object.defineProperty, rn = Object.getOwnPropertyDescriptor, mr = (e, t, o, s) => {
+var tn = Object.defineProperty, rn = Object.getOwnPropertyDescriptor, vr = (e, t, o, s) => {
   for (var r = s > 1 ? void 0 : s ? rn(t, o) : t, i = e.length - 1, a; i >= 0; i--)
     (a = e[i]) && (r = (s ? a(t, o, r) : a(r)) || r);
   return s && r && tn(t, o, r), r;
@@ -8808,13 +8945,13 @@ let Le = class extends _ {
   }
 };
 Le.styles = [p``, c];
-mr([
+vr([
   n({ type: Boolean })
 ], Le.prototype, "open", 2);
-mr([
+vr([
   n({ type: Function })
 ], Le.prototype, "onOpenChange", 2);
-Le = mr([
+Le = vr([
   d("rtg-collapsible")
 ], Le);
 const on = "inline-flex items-center gap-1.5", sn = "transition-colors hover:text-foreground", an = "font-normal text-foreground", nn = "[&>svg]:size-3.5", ln = "flex h-9 w-9 items-center justify-center", dn = "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5";
@@ -8883,8 +9020,8 @@ Kt.styles = [p``, c];
 Kt = fn([
   d("rtg-bread-crumb-item")
 ], Kt);
-var bn = Object.defineProperty, vn = Object.getOwnPropertyDescriptor, mn = (e, t, o, s) => {
-  for (var r = s > 1 ? void 0 : s ? vn(t, o) : t, i = e.length - 1, a; i >= 0; i--)
+var bn = Object.defineProperty, mn = Object.getOwnPropertyDescriptor, vn = (e, t, o, s) => {
+  for (var r = s > 1 ? void 0 : s ? mn(t, o) : t, i = e.length - 1, a; i >= 0; i--)
     (a = e[i]) && (r = (s ? a(t, o, r) : a(r)) || r);
   return s && r && bn(t, o, r), r;
 };
@@ -8906,7 +9043,7 @@ let Ht = class extends _ {
   }
 };
 Ht.styles = [p``, c];
-Ht = mn([
+Ht = vn([
   d("rtg-bread-crumb-list")
 ], Ht);
 var wn = Object.defineProperty, yn = Object.getOwnPropertyDescriptor, xn = (e, t, o, s) => {
@@ -9274,7 +9411,7 @@ export {
   Qe as ContextMenu,
   M as ContextMenuCheckboxItem,
   Ae as ContextMenuContent,
-  J as ContextMenuGroup,
+  Z as ContextMenuGroup,
   U as ContextMenuItem,
   T as ContextMenuRadioItem,
   ae as ContextMenuSeparator,
@@ -9288,7 +9425,7 @@ export {
   Je as DropdownMenu,
   L as DropdownMenuCheckboxItem,
   De as DropdownMenuContent,
-  Z as DropdownMenuGroup,
+  W as DropdownMenuGroup,
   V as DropdownMenuItem,
   I as DropdownMenuRadioItem,
   ie as DropdownMenuSeparator,