@dolanske/vui 0.1.0 → 0.1.2

package/dist/vui.js

@@ -1234,7 +1234,7 @@ const sd = {
       ...t.data
     }, n);
   }
-}), h0 = /* @__PURE__ */ se({
+}), w0 = /* @__PURE__ */ se({
   __name: "Accordion",
   props: {
     open: { type: Boolean },
@@ -1288,8 +1288,7 @@ const sd = {
         _e(p(Xe), { icon: "ph:caret-down" })
       ])),
       le("div", {
-        ref_key: "content",
-        ref: o,
+        ref: "content",
         class: "vui-accordion-content",
         style: ze({ "max-height": l.value ? `${i.value}px` : "0px" })
       }, [
@@ -1297,13 +1296,13 @@ const sd = {
       ], 4)
     ], 2));
   }
-}), y0 = /* @__PURE__ */ se({
+}), b0 = /* @__PURE__ */ se({
   __name: "AccordionGroup",
   props: {
     single: { type: Boolean }
   },
   setup(e) {
-    const t = e, n = ft(), a = _t("accordionRefs");
+    const t = e, n = ft(), a = _t("accordion");
     function r(l) {
       !a.value || !t.single || a.value.forEach((o, i) => {
         i !== l && o.close();
@@ -1311,8 +1310,7 @@ const sd = {
     }
     return (l, o) => (h(!0), M(ke, null, Ee(n.default(), (i, s) => (h(), ie(kn(i), {
       ref_for: !0,
-      ref_key: "accordionRefs",
-      ref: a,
+      ref: "accordion",
       key: i,
       onOpen: (d) => r(s)
     }, null, 40, ["onOpen"]))), 128));
@@ -1323,7 +1321,7 @@ const sd = {
 }, dd = {
   key: 2,
   class: "vui-alert-default-content"
-}, cd = { key: 0 }, fd = { key: 1 }, g0 = /* @__PURE__ */ se({
+}, cd = { key: 0 }, fd = { key: 1 }, k0 = /* @__PURE__ */ se({
   __name: "Alert",
   props: {
     variant: { default: "neutral" },
@@ -1363,7 +1361,7 @@ const sd = {
       j(n.$slots, "end")
     ], 2));
   }
-}), vd = ["src"], pd = { key: 1 }, w0 = /* @__PURE__ */ se({
+}), vd = ["src"], pd = { key: 1 }, _0 = /* @__PURE__ */ se({
   __name: "Avatar",
   props: {
     size: { default: "m" },
@@ -1390,7 +1388,7 @@ const sd = {
       ]))
     ], 2));
   }
-}), b0 = /* @__PURE__ */ se({
+}), x0 = /* @__PURE__ */ se({
   __name: "Badge",
   props: {
     variant: { default: "neutral" },
@@ -1404,7 +1402,7 @@ const sd = {
       j(t.$slots, "default")
     ], 2));
   }
-}), md = ["href"], hd = { class: "vui-breadcrumb-text-simple" }, k0 = /* @__PURE__ */ se({
+}), md = ["href"], hd = { class: "vui-breadcrumb-text-simple" }, $0 = /* @__PURE__ */ se({
   __name: "BreadcrumbItem",
   props: {
     label: {},
@@ -1429,7 +1427,7 @@ const sd = {
 }), yd = { class: "vui-breadcrumbs" }, gd = {
   key: 1,
   class: "vui-breadcrumb-custom-separator"
-}, _0 = /* @__PURE__ */ se({
+}, D0 = /* @__PURE__ */ se({
   __name: "Breadcrumbs",
   props: {
     separator: { default: "ph:caret-right" }
@@ -1606,7 +1604,7 @@ const Dd = { class: "vui-flex" }, Pd = /* @__PURE__ */ se({
       j(d.$slots, "default", {}, void 0, !0)
     ]));
   }
-}), yn = /* @__PURE__ */ At(Pd, [["__scopeId", "data-v-2bf92df7"]]), x0 = /* @__PURE__ */ se({
+}), yn = /* @__PURE__ */ At(Pd, [["__scopeId", "data-v-2bf92df7"]]), P0 = /* @__PURE__ */ se({
   __name: "ButtonGroup",
   props: {
     vertical: { type: Boolean }
@@ -9627,7 +9625,7 @@ const kp = ({
 Object.entries(Np).forEach(([e, t]) => {
   e !== "default" && (El[e] = t);
 });
-const $0 = /* @__PURE__ */ se({
+const M0 = /* @__PURE__ */ se({
   __name: "Calendar",
   props: {
     uid: {},
@@ -9887,7 +9885,7 @@ const $0 = /* @__PURE__ */ se({
 }, Up = {
   key: 1,
   class: "vui-checkbox-content"
-}, D0 = /* @__PURE__ */ se({
+}, T0 = /* @__PURE__ */ se({
   __name: "Checkbox",
   props: /* @__PURE__ */ yt({
     label: {},
@@ -11289,7 +11287,7 @@ function Ds(e = {}) {
   );
   return y;
 }
-const P0 = /* @__PURE__ */ se({
+const A0 = /* @__PURE__ */ se({
   __name: "CopyClipboard",
   props: {
     text: {},
@@ -11307,7 +11305,7 @@ const P0 = /* @__PURE__ */ se({
     Xs(() => {
       a.value || console.error("Clipboard API is not supported. This component will not work"), e.confirm && r.confirm && console.warn("You are using the 'confirm' prop and slot. The slot will take precedence.");
     });
-    const l = _t("anchorRef"), o = _t("tooltipRef"), { floatingStyles: i } = bs(l, o, {
+    const l = _t("anchor"), o = _t("tooltip"), { floatingStyles: i } = bs(l, o, {
       whileElementsMounted: Pm,
       transform: !1,
       placement: "top",
@@ -11319,8 +11317,7 @@ const P0 = /* @__PURE__ */ se({
     });
     return (s, d) => (h(), M(ke, null, [
       le("div", {
-        ref_key: "anchorRef",
-        ref: l,
+        ref: "anchor",
         class: "vui-clipboard-copy-wrap",
         role: "button",
         onClick: d[0] || (d[0] = (u) => p(t)(s.text))
@@ -11337,8 +11334,7 @@ const P0 = /* @__PURE__ */ se({
         default: Z(() => [
           p(n) && (s.confirm || s.$slots.confirm) ? (h(), M("div", {
             key: 0,
-            ref_key: "tooltipRef",
-            ref: o,
+            ref: "tooltip",
             class: "vui-clipboard-tooltip",
             style: ze(p(i))
           }, [
@@ -11546,7 +11542,7 @@ function nh(e) {
     t.reduce((n, a) => sl(n, a, ""), {})
   );
 }
-const ah = nh(), [Os, M0] = br("ConfigProvider");
+const ah = nh(), [Os, O0] = br("ConfigProvider");
 let rh = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict", lh = (e = 21) => {
   let t = "", n = e;
   for (; n--; )
@@ -12477,7 +12473,7 @@ const Is = /* @__PURE__ */ se({
       _: 3
     }, 16, ["id"]));
   }
-}), [Ns, T0] = br("CollectionProvider");
+}), [Ns, C0] = br("CollectionProvider");
 se({
   name: "CollectionSlot",
   setup(e, { slots: t }) {
@@ -13319,7 +13315,7 @@ const ny = /* @__PURE__ */ se({
       _: 3
     }, 16, ["open"]));
   }
-}), A0 = /* @__PURE__ */ At(ly, [["__scopeId", "data-v-0e7df4c4"]]), Ls = /* @__PURE__ */ se({
+}), S0 = /* @__PURE__ */ At(ly, [["__scopeId", "data-v-0e7df4c4"]]), Ls = /* @__PURE__ */ se({
   __name: "Popout",
   props: {
     anchor: {},
@@ -13327,7 +13323,7 @@ const ny = /* @__PURE__ */ se({
     offset: { default: 8 }
   },
   setup(e) {
-    const t = e, n = _t("popoutRef"), a = Xn(t.anchor), { floatingStyles: r } = bs(a, n, {
+    const t = e, n = _t("popout"), a = Xn(t.anchor), { floatingStyles: r } = bs(a, n, {
       placement: t.placement,
       middleware: [
         ...t.placement ? [] : [Mm()],
@@ -13335,15 +13331,17 @@ const ny = /* @__PURE__ */ se({
       ]
     });
     return (l, o) => (h(), M("div", {
-      ref_key: "popoutRef",
-      ref: n,
+      ref: "popout",
       style: ze(p(r)),
       class: "vui-popout"
     }, [
       j(l.$slots, "default")
     ], 4));
   }
-}), oy = /* @__PURE__ */ se({
+}), oy = {
+  ref: "anchor",
+  class: "vui-dropdown-trigger-wrap"
+}, iy = /* @__PURE__ */ se({
   __name: "Dropdown",
   props: {
     placement: { default: "bottom-start" },
@@ -13351,7 +13349,7 @@ const ny = /* @__PURE__ */ se({
     expand: { type: Boolean }
   },
   setup(e, { expose: t }) {
-    const n = _t("anchorRef"), a = _t("dropdownRef"), r = F(!1);
+    const n = _t("anchor"), a = _t("dropdown"), r = F(!1);
     function l() {
       r.value = !0;
     }
@@ -13375,11 +13373,7 @@ const ny = /* @__PURE__ */ se({
       toggle: i,
       isOpen: r
     }), (d, u) => (h(), M(ke, null, [
-      le("div", {
-        ref_key: "anchorRef",
-        ref: n,
-        class: "vui-dropdown-trigger-wrap"
-      }, [
+      le("div", oy, [
         j(d.$slots, "trigger", {
           open: l,
           isOpen: r.value,
@@ -13394,8 +13388,7 @@ const ny = /* @__PURE__ */ se({
         default: Z(() => [
           r.value ? (h(), ie(Ls, {
             key: 0,
-            ref_key: "dropdownRef",
-            ref: a,
+            ref: "dropdown",
             anchor: p(n),
             class: "vui-dropdown",
             placement: d.placement,
@@ -13419,7 +13412,7 @@ const ny = /* @__PURE__ */ se({
       })
     ], 64));
   }
-}), iy = /* @__PURE__ */ At(oy, [["__scopeId", "data-v-dfee7e38"]]), sy = { class: "vui-dropdown-item-icon" }, uy = { class: "vui-dropdown-item-slot" }, dy = { class: "vui-dropdown-item-hint" }, cy = /* @__PURE__ */ se({
+}), sy = /* @__PURE__ */ At(iy, [["__scopeId", "data-v-a80cb9d2"]]), uy = { class: "vui-dropdown-item-icon" }, dy = { class: "vui-dropdown-item-slot" }, cy = { class: "vui-dropdown-item-hint" }, fy = /* @__PURE__ */ se({
   __name: "DropdownItem",
   props: {
     disabled: { type: Boolean },
@@ -13430,7 +13423,7 @@ const ny = /* @__PURE__ */ se({
     return (n, a) => (h(), M("button", {
       class: ge(["vui-dropdown-item", { disabled: n.disabled }])
     }, [
-      le("div", sy, [
+      le("div", uy, [
         _e(Ot, {
           name: "fade",
           appear: ""
@@ -13444,31 +13437,31 @@ const ny = /* @__PURE__ */ se({
           _: 1
         })
       ]),
-      le("div", uy, [
+      le("div", dy, [
         j(n.$slots, "default")
       ]),
-      le("div", dy, [
+      le("div", cy, [
         j(n.$slots, "hint")
       ])
     ], 2));
   }
-}), fy = {}, vy = { class: "vui-dropdown-title" }, py = {
+}), vy = {}, py = { class: "vui-dropdown-title" }, my = {
   key: 0,
   class: "vui-dropdown-title-end"
 };
-function my(e, t) {
-  return h(), M("div", vy, [
+function hy(e, t) {
+  return h(), M("div", py, [
     j(e.$slots, "default"),
-    e.$slots.end ? (h(), M("div", py, [
+    e.$slots.end ? (h(), M("div", my, [
       j(e.$slots, "end")
     ])) : H("", !0)
   ]);
 }
-const hy = /* @__PURE__ */ At(fy, [["render", my]]);
+const yy = /* @__PURE__ */ At(vy, [["render", hy]]);
 function Xo(e, t = 0) {
   return Array.from({ length: e }).map((n, a) => t + a);
 }
-function yy(e, t) {
+function gy(e, t) {
   if (!e)
     return !1;
   const n = Array.isArray(e) ? e.join(" ") : e;
@@ -13477,7 +13470,7 @@ function yy(e, t) {
 function Go(e) {
   return typeof e == "number" ? e : e.length;
 }
-function gy(e) {
+function wy(e) {
   return e == null;
 }
 function Wr(e, t) {
@@ -13486,7 +13479,7 @@ function Wr(e, t) {
 function Jo(e) {
   return new Promise((t) => setTimeout(t, e));
 }
-const wy = { class: "vui-grid" }, by = /* @__PURE__ */ se({
+const by = { class: "vui-grid" }, ky = /* @__PURE__ */ se({
   __name: "Grid",
   props: {
     inline: { type: Boolean },
@@ -13503,20 +13496,20 @@ const wy = { class: "vui-grid" }, by = /* @__PURE__ */ se({
       "432450d2": r.value
     }));
     const t = e, n = wi(t.gap), a = R(() => typeof t.columns == "number" ? Xo(t.columns).map(() => "1fr").join(" ") : t.columns ?? "none"), r = R(() => typeof t.rows == "number" ? Xo(t.rows || 1).map(() => "").join("1fr") : t.rows ?? "none"), l = R(() => t.inline ? "inline-grid" : "grid");
-    return (o, i) => (h(), M("div", wy, [
+    return (o, i) => (h(), M("div", by, [
       j(o.$slots, "default", {}, void 0, !0)
     ]));
   }
-}), O0 = /* @__PURE__ */ At(by, [["__scopeId", "data-v-66a949b7"]]), ky = { class: "vui-input" }, _y = {
+}), B0 = /* @__PURE__ */ At(ky, [["__scopeId", "data-v-66a949b7"]]), _y = { class: "vui-input" }, xy = {
   key: 0,
   for: "id"
-}, xy = {
+}, $y = {
   key: 1,
   class: "vui-input-hint"
-}, $y = ["id", "readonly", "type", "placeholder", "required", "max", "accept", "multiple", "min"], Dy = {
+}, Dy = ["id", "readonly", "type", "placeholder", "required", "max", "accept", "multiple", "min"], Py = {
   key: 0,
   class: "vui-input-limit"
-}, Py = {
+}, My = {
   key: 1,
   class: "vui-input-errors"
 }, Ra = /* @__PURE__ */ se({
@@ -13549,7 +13542,7 @@ const wy = { class: "vui-grid" }, by = /* @__PURE__ */ se({
       set(o) {
         return e.readonly || Go(o) > Number(e.limit) ? e.modelValue : o;
       }
-    }), a = la(), r = _t("inputRef");
+    }), a = la(), r = _t("input");
     Ft(() => {
       var o;
       e.focus && ((o = r.value) == null || o.focus());
@@ -13564,9 +13557,9 @@ const wy = { class: "vui-grid" }, by = /* @__PURE__ */ se({
       class: ge(["vui-input-container", { expand: o.expand, required: o.required, readonly: o.readonly, "has-errors": o.errors.length > 0 }])
     }, [
       j(o.$slots, "before"),
-      le("div", ky, [
-        o.label ? (h(), M("label", _y, Te(o.label), 1)) : H("", !0),
-        o.hint ? (h(), M("p", xy, Te(o.hint), 1)) : H("", !0),
+      le("div", _y, [
+        o.label ? (h(), M("label", xy, Te(o.label), 1)) : H("", !0),
+        o.hint ? (h(), M("p", $y, Te(o.hint), 1)) : H("", !0),
         _e(yn, {
           class: "vui-input-style",
           gap: 3,
@@ -13578,8 +13571,7 @@ const wy = { class: "vui-grid" }, by = /* @__PURE__ */ se({
             o.$slots.__internal_replace_input ? H("", !0) : tn((h(), M("input", {
               key: 0,
               id: p(a),
-              ref_key: "inputRef",
-              ref: r,
+              ref: "input",
               "onUpdate:modelValue": i[0] || (i[0] = (s) => n.value = s),
               readonly: o.readonly,
               type: o.type,
@@ -13590,7 +13582,7 @@ const wy = { class: "vui-grid" }, by = /* @__PURE__ */ se({
               accept: o.accept,
               multiple: o.multiple,
               min: o.min
-            }, null, 8, $y)), [
+            }, null, 8, Dy)), [
               [ai, n.value]
             ]),
             j(o.$slots, "end")
@@ -13598,14 +13590,14 @@ const wy = { class: "vui-grid" }, by = /* @__PURE__ */ se({
           _: 3
         })
       ]),
-      o.limit ? (h(), M("p", Dy, Te(l.value), 1)) : H("", !0),
-      o.errors.length > 0 ? (h(), M("ul", Py, [
+      o.limit ? (h(), M("p", Py, Te(l.value), 1)) : H("", !0),
+      o.errors.length > 0 ? (h(), M("ul", My, [
         (h(!0), M(ke, null, Ee(o.errors, (s) => (h(), M("li", { key: s }, Te(s), 1))), 128))
       ])) : H("", !0),
       j(o.$slots, "after")
     ], 2));
   }
-}), My = /* @__PURE__ */ se({
+}), Ty = /* @__PURE__ */ se({
   __name: "Counter",
   props: /* @__PURE__ */ yt({
     label: {},
@@ -13681,7 +13673,7 @@ const wy = { class: "vui-grid" }, by = /* @__PURE__ */ se({
       }
     ]), 1040, ["modelValue"]));
   }
-}), C0 = /* @__PURE__ */ At(My, [["__scopeId", "data-v-1361c777"]]), Ty = ["id"], Ay = ["for"], S0 = /* @__PURE__ */ se({
+}), R0 = /* @__PURE__ */ At(Ty, [["__scopeId", "data-v-1361c777"]]), Ay = ["id"], Oy = ["for"], E0 = /* @__PURE__ */ se({
   __name: "Dropzone",
   props: {
     label: {},
@@ -13703,10 +13695,9 @@ const wy = { class: "vui-grid" }, by = /* @__PURE__ */ se({
       const d = s ? i.target.files : i.dataTransfer.files;
       d.length > 0 && a("files", d);
     }
-    const o = _t("dropzoneRef");
+    const o = _t("dropzone");
     return bt(o, "dragenter", l, !1), bt(o, "dragleave", l, !1), bt(o, "dragover", l, !1), bt(o, "drop", l, !1), bt(o, "input", (i) => l(i, !0), !1), (i, s) => (h(), ie(Ra, Se(n, {
-      ref_key: "dropzoneRef",
-      ref: o,
+      ref: "dropzone",
       type: "file",
       class: ["vui-dropzone", { dragging: r.value }],
       onDragenter: s[0] || (s[0] = (d) => r.value = !0),
@@ -13716,7 +13707,7 @@ const wy = { class: "vui-grid" }, by = /* @__PURE__ */ se({
         le("input", {
           id: d,
           type: "file"
-        }, null, 8, Ty),
+        }, null, 8, Ay),
         le("label", { for: d }, [
           j(i.$slots, "default", { dragging: r.value }, () => [
             _e(yn, {
@@ -13736,12 +13727,12 @@ const wy = { class: "vui-grid" }, by = /* @__PURE__ */ se({
               _: 1
             })
           ])
-        ], 8, Ay)
+        ], 8, Oy)
       ]),
       _: 3
     }, 16, ["class"]));
   }
-}), B0 = /* @__PURE__ */ se({
+}), I0 = /* @__PURE__ */ se({
   __name: "File",
   props: {
     label: {},
@@ -13766,7 +13757,7 @@ const wy = { class: "vui-grid" }, by = /* @__PURE__ */ se({
       onInput: l[0] || (l[0] = (o) => a("files", o.target.files))
     }), null, 16));
   }
-}), Oy = /* @__PURE__ */ se({
+}), Cy = /* @__PURE__ */ se({
   __name: "Password",
   props: {
     label: {},
@@ -13811,19 +13802,19 @@ const wy = { class: "vui-grid" }, by = /* @__PURE__ */ se({
       _: 1
     }, 16, ["type"]));
   }
-}), R0 = /* @__PURE__ */ At(Oy, [["__scopeId", "data-v-1908eb1b"]]), Cy = { class: "vui-input" }, Sy = {
+}), N0 = /* @__PURE__ */ At(Cy, [["__scopeId", "data-v-1908eb1b"]]), Sy = { class: "vui-input" }, By = {
   key: 0,
   for: "id"
-}, By = {
+}, Ry = {
   key: 1,
   class: "vui-input-hint"
-}, Ry = ["id", "readonly", "placeholder", "required", "max"], Ey = {
+}, Ey = ["id", "readonly", "placeholder", "required", "max"], Iy = {
   key: 0,
   class: "vui-input-limit"
-}, Iy = {
+}, Ny = {
   key: 1,
   class: "vui-input-errors"
-}, E0 = /* @__PURE__ */ se({
+}, Y0 = /* @__PURE__ */ se({
   __name: "Textarea",
   props: /* @__PURE__ */ yt({
     label: {},
@@ -13859,9 +13850,9 @@ const wy = { class: "vui-grid" }, by = /* @__PURE__ */ se({
       class: ge(["vui-input-container", { expand: a.expand, required: a.required, readonly: a.readonly, "has-errors": a.errors.length > 0 }])
     }, [
       j(a.$slots, "before"),
-      le("div", Cy, [
-        a.label ? (h(), M("label", Sy, Te(a.label), 1)) : H("", !0),
-        a.hint ? (h(), M("p", By, Te(a.hint), 1)) : H("", !0),
+      le("div", Sy, [
+        a.label ? (h(), M("label", By, Te(a.label), 1)) : H("", !0),
+        a.hint ? (h(), M("p", Ry, Te(a.hint), 1)) : H("", !0),
         tn(le("textarea", {
           id: p(n),
           "onUpdate:modelValue": r[0] || (r[0] = (l) => t.value = l),
@@ -13875,18 +13866,18 @@ const wy = { class: "vui-grid" }, by = /* @__PURE__ */ se({
             // @ts-expect-error This is only supported in chrome for now
             "field-sizing": a.autoResize ? "content" : "auto"
           })
-        }, null, 12, Ry), [
+        }, null, 12, Ey), [
           [ai, t.value]
         ])
       ]),
-      a.limit ? (h(), M("p", Ey, Te(`${t.value.length}/${a.limit}`), 1)) : H("", !0),
-      a.errors.length > 0 ? (h(), M("ul", Iy, [
+      a.limit ? (h(), M("p", Iy, Te(`${t.value.length}/${a.limit}`), 1)) : H("", !0),
+      a.errors.length > 0 ? (h(), M("ul", Ny, [
         (h(!0), M(ke, null, Ee(a.errors, (l) => (h(), M("li", { key: l }, Te(l), 1))), 128))
       ])) : H("", !0),
       j(a.$slots, "after")
     ], 2));
   }
-}), I0 = /* @__PURE__ */ se({
+}), F0 = /* @__PURE__ */ se({
   __name: "Kbd",
   props: {
     keys: {},
@@ -13904,7 +13895,7 @@ const wy = { class: "vui-grid" }, by = /* @__PURE__ */ se({
       class: ge(["vui-kbd", { active: l.value }])
     }, Te(n.label ?? n.keys.replaceAll("+", " + ")), 3));
   }
-}), N0 = /* @__PURE__ */ se({
+}), V0 = /* @__PURE__ */ se({
   __name: "KbdGroup",
   emits: ["trigger"],
   setup(e, { emit: t }) {
@@ -13930,7 +13921,7 @@ const wy = { class: "vui-grid" }, by = /* @__PURE__ */ se({
       j(a.$slots, "default")
     ]));
   }
-}), Ny = /* @__PURE__ */ se({
+}), Yy = /* @__PURE__ */ se({
   __name: "Modal",
   props: /* @__PURE__ */ yt({
     size: { default: "m" },
@@ -14005,7 +13996,7 @@ const wy = { class: "vui-grid" }, by = /* @__PURE__ */ se({
       })
     ]));
   }
-}), Yy = /* @__PURE__ */ At(Ny, [["__scopeId", "data-v-855a3d99"]]), Fy = { class: "typeset" }, Y0 = /* @__PURE__ */ se({
+}), Fy = /* @__PURE__ */ At(Yy, [["__scopeId", "data-v-855a3d99"]]), Vy = { class: "typeset" }, L0 = /* @__PURE__ */ se({
   __name: "Confirm",
   props: /* @__PURE__ */ yt({
     title: {},
@@ -14028,12 +14019,12 @@ const wy = { class: "vui-grid" }, by = /* @__PURE__ */ se({
     const n = e, a = t, r = Pt(e, "modelValue");
     return (l, o) => (h(), M(ke, null, [
       le("pre", null, Te(l.$props), 1),
-      _e(Yy, Se(n, {
+      _e(Fy, Se(n, {
         modelValue: r.value,
         "onUpdate:modelValue": o[2] || (o[2] = (i) => r.value = i)
       }), {
         default: Z(() => [
-          le("div", Fy, [
+          le("div", Vy, [
             j(l.$slots, "default")
           ])
         ]),
@@ -14067,7 +14058,7 @@ const wy = { class: "vui-grid" }, by = /* @__PURE__ */ se({
       }, 16, ["modelValue"])
     ], 64));
   }
-}), Vy = /* @__PURE__ */ se({
+}), Ly = /* @__PURE__ */ se({
   __name: "Pagination",
   props: {
     numbers: { type: Boolean, default: !0 },
@@ -14164,7 +14155,7 @@ const wy = { class: "vui-grid" }, by = /* @__PURE__ */ se({
       _: 3
     }));
   }
-}), F0 = /* @__PURE__ */ At(Vy, [["__scopeId", "data-v-5ca7f612"]]), V0 = /* @__PURE__ */ se({
+}), H0 = /* @__PURE__ */ At(Ly, [["__scopeId", "data-v-5ca7f612"]]), j0 = /* @__PURE__ */ se({
   __name: "Progress",
   props: /* @__PURE__ */ yt({
     fake: { type: Boolean },
@@ -14183,16 +14174,15 @@ const wy = { class: "vui-grid" }, by = /* @__PURE__ */ se({
       set(r) {
         return Math.min(r, 100);
       }
-    }), n = _t("progressRef");
+    }), n = _t("progress");
     Ft(() => {
-      n.value && !gy(e.height) && n.value.style.setProperty("--vui-progress-height", `${e.height}px`);
+      n.value && !wy(e.height) && n.value.style.setProperty("--vui-progress-height", `${e.height}px`);
     });
     async function a() {
       e.fake && t.value < 100 && (t.value > 95 ? (t.value += (100 - t.value) * 0.075, await Jo(Wr(500, 3e3))) : (t.value += Wr(1, 10), await Jo(Wr(200, 1e3))), a());
     }
     return je(a), (r, l) => (h(), M("div", {
-      ref_key: "progressRef",
-      ref: n,
+      ref: "progress",
       class: ge(["vui-progress", {
         fixed: r.fixed,
         "fixed-active": t.value > 0 && t.value < 100
@@ -14207,13 +14197,13 @@ const wy = { class: "vui-grid" }, by = /* @__PURE__ */ se({
       }, null, 4)
     ], 2));
   }
-}), Ly = ["id", "value", "checked"], Hy = ["for"], jy = { class: "vui-radio-icon" }, Wy = {
+}), Hy = ["id", "value", "checked"], jy = ["for"], Wy = { class: "vui-radio-icon" }, qy = {
   key: 0,
   class: "vui-radio-content"
-}, qy = {
+}, zy = {
   key: 1,
   class: "vui-radio-content"
-}, L0 = /* @__PURE__ */ se({
+}, W0 = /* @__PURE__ */ se({
   __name: "Radio",
   props: /* @__PURE__ */ yt({
     label: {},
@@ -14235,22 +14225,22 @@ const wy = { class: "vui-grid" }, by = /* @__PURE__ */ se({
         type: "radio",
         value: l.value,
         checked: r.value
-      }, null, 8, Ly), [
+      }, null, 8, Hy), [
         [ru, n.value]
       ]),
       le("label", { for: p(a) }, [
-        le("span", jy, [
+        le("span", Wy, [
           _e(p(Xe), {
             icon: r.value ? "ph:radio-button-fill" : "ph:circle"
           }, null, 8, ["icon"])
         ]),
-        t.default ? (h(), M("div", qy, [
+        t.default ? (h(), M("div", zy, [
           j(l.$slots, "default")
-        ])) : (h(), M("p", Wy, Te(l.label || l.value), 1))
-      ], 8, Hy)
+        ])) : (h(), M("p", qy, Te(l.label || l.value), 1))
+      ], 8, jy)
     ], 2));
   }
-}), H0 = /* @__PURE__ */ se({
+}), q0 = /* @__PURE__ */ se({
   __name: "RadioGroup",
   props: /* @__PURE__ */ yt({
     disabled: { type: Boolean },
@@ -14294,16 +14284,16 @@ const wy = { class: "vui-grid" }, by = /* @__PURE__ */ se({
       _: 1
     }, 16));
   }
-}), zy = { class: "vui-input vui-select-trigger-content" }, Uy = {
+}), Uy = { class: "vui-input vui-select-trigger-content" }, Qy = {
   key: 0,
   for: "id"
-}, Qy = {
+}, Ky = {
   key: 1,
   class: "vui-input-hint"
-}, Ky = ["onClick"], Xy = {
+}, Xy = ["onClick"], Gy = {
   key: 1,
   class: "vue-select-no-results"
-}, j0 = /* @__PURE__ */ se({
+}, z0 = /* @__PURE__ */ se({
   __name: "Select",
   props: /* @__PURE__ */ yt({
     single: { type: Boolean, default: !0 },
@@ -14334,11 +14324,11 @@ const wy = { class: "vui-grid" }, by = /* @__PURE__ */ se({
       } else
         t.value ? (c = t.value) == null || c.push(s) : t.value = [s];
     }
-    const a = F(), r = R(() => !a.value || a.value.length === 0 ? e.options : e.options.filter((s) => yy(s.label, a.value))), l = R(() => !t.value || t.value.length === 0 ? e.placeholder ?? "Select an option" : e.single ? t.value[0].label : t.value.length > e.maxActiveOptions ? `${t.value.length} selected` : t.value.map((s) => s.label).join(", "));
+    const a = F(), r = R(() => !a.value || a.value.length === 0 ? e.options : e.options.filter((s) => gy(s.label, a.value))), l = R(() => !t.value || t.value.length === 0 ? e.placeholder ?? "Select an option" : e.single ? t.value[0].label : t.value.length > e.maxActiveOptions ? `${t.value.length} selected` : t.value.map((s) => s.label).join(", "));
     je(() => {
       e.readonly && e.showClear && console.warn("[Select] readonly and showClear are mutually exclusive props. The clear button will not show up if required is present.");
     });
-    const o = _t("dropdownRef");
+    const o = _t("dropdown");
     function i() {
       var s;
       t.value = void 0, (s = o.value) == null || s.close();
@@ -14346,15 +14336,14 @@ const wy = { class: "vui-grid" }, by = /* @__PURE__ */ se({
     return (s, d) => (h(), M("div", {
       class: ge(["vui-input-container vui-select", { expand: s.expand, required: s.required, readonly: s.readonly }])
     }, [
-      _e(iy, {
-        ref_key: "dropdownRef",
-        ref: o,
+      _e(sy, {
+        ref: "dropdown",
         expand: s.expand
       }, {
         trigger: Z(({ toggle: u, isOpen: c }) => [
-          le("div", zy, [
-            s.label ? (h(), M("label", Uy, Te(s.label), 1)) : H("", !0),
-            s.hint ? (h(), M("p", Qy, Te(s.hint), 1)) : H("", !0),
+          le("div", Uy, [
+            s.label ? (h(), M("label", Qy, Te(s.label), 1)) : H("", !0),
+            s.hint ? (h(), M("p", Ky, Te(s.hint), 1)) : H("", !0),
             le("button", {
               class: "vui-input-style vui-select-trigger-container",
               onClick: u
@@ -14371,11 +14360,11 @@ const wy = { class: "vui-grid" }, by = /* @__PURE__ */ se({
               _e(p(Xe), {
                 icon: c ? "ph:caret-up" : "ph:caret-down"
               }, null, 8, ["icon"])
-            ], 8, Ky)
+            ], 8, Xy)
           ])
         ]),
         default: Z(({ close: u, isOpen: c }) => [
-          s.search ? (h(), ie(hy, { key: 0 }, {
+          s.search ? (h(), ie(yy, { key: 0 }, {
             default: Z(() => [
               _e(Ra, {
                 modelValue: a.value,
@@ -14386,10 +14375,10 @@ const wy = { class: "vui-grid" }, by = /* @__PURE__ */ se({
             ]),
             _: 2
           }, 1024)) : H("", !0),
-          r.value.length === 0 ? (h(), M("p", Xy, " No results... ")) : H("", !0),
+          r.value.length === 0 ? (h(), M("p", Gy, " No results... ")) : H("", !0),
           (h(!0), M(ke, null, Ee(r.value, (f) => {
             var v, y;
-            return h(), ie(cy, {
+            return h(), ie(fy, {
               key: f.value,
               class: ge({ selected: (v = t.value) == null ? void 0 : v.find((m) => m.value === f.value) }),
               icon: (y = t.value) != null && y.find((m) => m.value === f.value) ? "ph:check-bold" : "",
@@ -14408,10 +14397,10 @@ const wy = { class: "vui-grid" }, by = /* @__PURE__ */ se({
       }, 8, ["expand"])
     ], 2));
   }
-}), Gy = { class: "vui-sheet-header" }, Jy = { style: { flex: 1 } }, Zy = {
+}), Jy = { class: "vui-sheet-header" }, Zy = { style: { flex: 1 } }, e0 = {
   key: 1,
   class: "vui-sheet-content"
-}, e0 = /* @__PURE__ */ se({
+}, t0 = /* @__PURE__ */ se({
   __name: "Sheet",
   props: /* @__PURE__ */ yt({
     position: { default: "right" },
@@ -14464,8 +14453,8 @@ const wy = { class: "vui-grid" }, by = /* @__PURE__ */ se({
                 class: ge(["vui-sheet", [`vui-sheet-position-${l.position}`]]),
                 style: ze(a.value)
               }, [
-                le("div", Gy, [
-                  le("div", Jy, [
+                le("div", Jy, [
+                  le("div", Zy, [
                     j(l.$slots, "header", { close: n }, void 0, !0)
                   ]),
                   _e(vt, {
@@ -14478,7 +14467,7 @@ const wy = { class: "vui-grid" }, by = /* @__PURE__ */ se({
                   key: 0,
                   size: 1
                 })) : H("", !0),
-                l.$slots.default ? (h(), M("div", Zy, [
+                l.$slots.default ? (h(), M("div", e0, [
                   j(l.$slots, "default", { close: n }, void 0, !0)
                 ])) : H("", !0)
               ], 6)) : H("", !0)
@@ -14490,7 +14479,7 @@ const wy = { class: "vui-grid" }, by = /* @__PURE__ */ se({
       })
     ]));
   }
-}), W0 = /* @__PURE__ */ At(e0, [["__scopeId", "data-v-cf947513"]]), Zo = "var(--border-radius-s)", q0 = /* @__PURE__ */ se({
+}), U0 = /* @__PURE__ */ At(t0, [["__scopeId", "data-v-cf947513"]]), Zo = "var(--border-radius-s)", Q0 = /* @__PURE__ */ se({
   __name: "Skeleton",
   props: {
     radius: { default: () => Zo },
@@ -14515,13 +14504,13 @@ const wy = { class: "vui-grid" }, by = /* @__PURE__ */ se({
       })
     }, null, 4));
   }
-}), t0 = ["id"], n0 = ["for"], a0 = {
+}), n0 = ["id"], a0 = ["for"], r0 = {
   key: 0,
   class: "vui-switch-content"
-}, r0 = {
+}, l0 = {
   key: 1,
   class: "vui-switch-content"
-}, z0 = /* @__PURE__ */ se({
+}, K0 = /* @__PURE__ */ se({
   __name: "Switch",
   props: /* @__PURE__ */ yt({
     label: {},
@@ -14540,20 +14529,24 @@ const wy = { class: "vui-grid" }, by = /* @__PURE__ */ se({
         id: p(a),
         "onUpdate:modelValue": l[0] || (l[0] = (o) => n.value = o),
         type: "checkbox"
-      }, null, 8, t0), [
+      }, null, 8, n0), [
         [ti, n.value]
       ]),
       le("label", { for: p(a) }, [
         l[1] || (l[1] = le("div", { class: "vui-switch-icon" }, [
           le("span", { class: "vui-switch-indicator" })
         ], -1)),
-        t.default ? (h(), M("div", r0, [
+        t.default ? (h(), M("div", l0, [
           j(r.$slots, "default")
-        ])) : (h(), M("p", a0, Te(r.label), 1))
-      ], 8, n0)
+        ])) : (h(), M("p", r0, Te(r.label), 1))
+      ], 8, a0)
     ], 2));
   }
-}), U0 = /* @__PURE__ */ se({
+}), o0 = {
+  key: 0,
+  ref: "context",
+  class: "vui-cell-context"
+}, X0 = /* @__PURE__ */ se({
   __name: "Cell",
   setup(e) {
     const t = ft(), n = _t("context"), a = R(() => {
@@ -14566,20 +14559,15 @@ const wy = { class: "vui-grid" }, by = /* @__PURE__ */ se({
       style: ze(a.value)
     }, [
       j(r.$slots, "default"),
-      r.$slots.context ? (h(), M("div", {
-        key: 0,
-        ref_key: "context",
-        ref: n,
-        class: "vui-cell-context"
-      }, [
+      r.$slots.context ? (h(), M("div", o0, [
         j(r.$slots, "context")
       ], 512)) : H("", !0)
     ], 4));
   }
-}), l0 = {
+}), i0 = {
   key: 0,
   class: "vui-table-th-content"
-}, Q0 = /* @__PURE__ */ se({
+}, G0 = /* @__PURE__ */ se({
   __name: "Header",
   props: {
     header: {},
@@ -14607,7 +14595,7 @@ const wy = { class: "vui-grid" }, by = /* @__PURE__ */ se({
         }
     });
     return (a, r) => (h(), M("th", null, [
-      t.header ? (h(), M("div", l0, [
+      t.header ? (h(), M("div", i0, [
         j(a.$slots, "default", {}, () => [
           He(Te(t.header.label), 1)
         ]),
@@ -14624,14 +14612,14 @@ const wy = { class: "vui-grid" }, by = /* @__PURE__ */ se({
       ])) : H("", !0)
     ]));
   }
-}), o0 = { class: "vui-table-row" }, K0 = /* @__PURE__ */ se({
+}), s0 = { class: "vui-table-row" }, J0 = /* @__PURE__ */ se({
   __name: "Row",
   setup(e) {
-    return (t, n) => (h(), M("tr", o0, [
+    return (t, n) => (h(), M("tr", s0, [
       j(t.$slots, "default")
     ]));
   }
-}), zl = Symbol("select-row-provide"), X0 = /* @__PURE__ */ se({
+}), zl = Symbol("select-row-provide"), Z0 = /* @__PURE__ */ se({
   __name: "SelectAll",
   setup(e) {
     const {
@@ -14651,7 +14639,7 @@ const wy = { class: "vui-grid" }, by = /* @__PURE__ */ se({
       }, null, 8, ["icon"])
     ], 2)) : H("", !0);
   }
-}), G0 = /* @__PURE__ */ se({
+}), eg = /* @__PURE__ */ se({
   __name: "SelectRow",
   props: {
     row: {}
@@ -14674,7 +14662,7 @@ const wy = { class: "vui-grid" }, by = /* @__PURE__ */ se({
       }, null, 8, ["icon"])
     ], 2)) : H("", !0);
   }
-}), i0 = { class: "vui-table-pagination-wrap" }, J0 = /* @__PURE__ */ se({
+}), u0 = { class: "vui-table-pagination-wrap" }, tg = /* @__PURE__ */ se({
   __name: "Table",
   props: {
     fixed: { type: Boolean },
@@ -14705,12 +14693,12 @@ const wy = { class: "vui-grid" }, by = /* @__PURE__ */ se({
           j(n.$slots, "body")
         ])
       ]),
-      le("div", i0, [
+      le("div", u0, [
         j(n.$slots, "pagination")
       ])
     ], 2));
   }
-}), s0 = ["data-tab-id"], Z0 = /* @__PURE__ */ se({
+}), d0 = ["data-tab-id"], ng = /* @__PURE__ */ se({
   __name: "Tab",
   props: {
     disabled: { type: Boolean },
@@ -14729,9 +14717,12 @@ const wy = { class: "vui-grid" }, by = /* @__PURE__ */ se({
         icon: t.icon
       }, null, 8, ["icon"])) : H("", !0),
       He(" " + Te(t.label), 1)
-    ], 10, s0));
+    ], 10, d0));
   }
-}), eg = /* @__PURE__ */ se({
+}), c0 = {
+  ref: "underline",
+  class: "vui-tab-underline"
+}, ag = /* @__PURE__ */ se({
   __name: "Tabs",
   props: /* @__PURE__ */ yt({
     variant: { default: "default" },
@@ -14763,8 +14754,7 @@ const wy = { class: "vui-grid" }, by = /* @__PURE__ */ se({
         }
       );
     }), bt(window, "resize", l), (o, i) => (h(), M("div", {
-      ref_key: "tabs",
-      ref: r,
+      ref: "tabs",
       class: ge(["vui-tabs", [
         { expand: o.expand, disabled: o.disabled },
         o.variant === "default" ? "" : `vui-tabs-variant-${o.variant}`
@@ -14775,16 +14765,12 @@ const wy = { class: "vui-grid" }, by = /* @__PURE__ */ se({
         class: ge({ active: s.props.id === n.value }),
         onClick: (d) => n.value = s.props.id
       }, null, 8, ["class", "onClick"]))), 128)),
-      le("div", {
-        ref_key: "underline",
-        ref: a,
-        class: "vui-tab-underline"
-      }, null, 512)
+      le("div", c0, null, 512)
     ], 2));
   }
 }), rr = F(/* @__PURE__ */ new Map());
 let Wa = 0;
-function tg(e, t) {
+function rg(e, t) {
   const n = Object.assign({
     persist: !1,
     timeout: 7e3
@@ -14802,14 +14788,14 @@ function tg(e, t) {
     rr.value.delete(r);
   }, n.timeout, Wa), Wa++, a;
 }
-function ng(e) {
+function lg(e) {
   rr.value.delete(e);
 }
-const u0 = { class: "vui-toast-wrapper" }, d0 = { class: "vui-toast-item-content" }, c0 = { key: 0 }, f0 = /* @__PURE__ */ se({
+const f0 = { class: "vui-toast-wrapper" }, v0 = { class: "vui-toast-item-content" }, p0 = { key: 0 }, m0 = /* @__PURE__ */ se({
   __name: "Toasts",
   setup(e) {
     return (t, n) => (h(), ie(Pa, { to: "body" }, [
-      le("div", u0, [
+      le("div", f0, [
         _e(lu, {
           name: "toast",
           tag: "ul",
@@ -14820,9 +14806,9 @@ const u0 = { class: "vui-toast-wrapper" }, d0 = { class: "vui-toast-item-content
               key: a,
               class: "vui-toast-item"
             }, [
-              le("div", d0, [
+              le("div", v0, [
                 le("strong", null, Te(r.title), 1),
-                r.description ? (h(), M("p", c0, Te(r.description), 1)) : H("", !0)
+                r.description ? (h(), M("p", p0, Te(r.description), 1)) : H("", !0)
               ]),
               r.action ? (h(), ie(vt, {
                 key: 0,
@@ -14840,7 +14826,7 @@ const u0 = { class: "vui-toast-wrapper" }, d0 = { class: "vui-toast-item-content
       ])
     ]));
   }
-}), ag = /* @__PURE__ */ At(f0, [["__scopeId", "data-v-d0d7691b"]]), v0 = /* @__PURE__ */ se({
+}), og = /* @__PURE__ */ At(m0, [["__scopeId", "data-v-d0d7691b"]]), h0 = /* @__PURE__ */ se({
   __name: "Tooltip",
   props: {
     placement: { default: "bottom" },
@@ -14862,8 +14848,7 @@ const u0 = { class: "vui-toast-wrapper" }, d0 = { class: "vui-toast-item-content
         clearTimeout(r), a.value = !1;
     }), (l, o) => (h(), M(ke, null, [
       le("div", {
-        ref_key: "popoutAnchor",
-        ref: t,
+        ref: "popoutAnchor",
         onMouseenter: o[0] || (o[0] = (i) => n.value = !0),
         onMouseleave: o[1] || (o[1] = (i) => n.value = !1)
       }, [
@@ -14890,60 +14875,60 @@ const u0 = { class: "vui-toast-wrapper" }, d0 = { class: "vui-toast-item-content
       })
     ], 64));
   }
-}), rg = /* @__PURE__ */ At(v0, [["__scopeId", "data-v-45aeab80"]]);
+}), ig = /* @__PURE__ */ At(h0, [["__scopeId", "data-v-3aa95006"]]);
 export {
-  h0 as Accordion,
-  y0 as AccordionGroup,
-  g0 as Alert,
-  w0 as Avatar,
+  w0 as Accordion,
+  b0 as AccordionGroup,
+  k0 as Alert,
+  _0 as Avatar,
   Hs as Backdrop,
-  b0 as Badge,
-  k0 as BreadcrumbItem,
-  _0 as Breadcrumbs,
+  x0 as Badge,
+  $0 as BreadcrumbItem,
+  D0 as Breadcrumbs,
   vt as Button,
-  x0 as ButtonGroup,
-  $0 as Calendar,
+  P0 as ButtonGroup,
+  M0 as Calendar,
   Hp as Card,
-  U0 as Cell,
-  D0 as Checkbox,
-  Y0 as Confirm,
-  P0 as CopyClipboard,
-  C0 as Counter,
+  X0 as Cell,
+  T0 as Checkbox,
+  L0 as Confirm,
+  A0 as CopyClipboard,
+  R0 as Counter,
   ll as Divider,
-  A0 as Drawer,
-  iy as Dropdown,
-  cy as DropdownItem,
-  hy as DropdownTitle,
-  S0 as Dropzone,
-  B0 as File,
+  S0 as Drawer,
+  sy as Dropdown,
+  fy as DropdownItem,
+  yy as DropdownTitle,
+  E0 as Dropzone,
+  I0 as File,
   yn as Flex,
-  O0 as Grid,
-  Q0 as Header,
+  B0 as Grid,
+  G0 as Header,
   Ra as Input,
-  I0 as Kbd,
-  N0 as KbdGroup,
-  Yy as Modal,
-  F0 as Pagination,
-  R0 as Password,
+  F0 as Kbd,
+  V0 as KbdGroup,
+  Fy as Modal,
+  H0 as Pagination,
+  N0 as Password,
   Ls as Popout,
-  V0 as Progress,
-  L0 as Radio,
-  H0 as RadioGroup,
-  K0 as Row,
-  j0 as Select,
-  X0 as SelectAll,
-  G0 as SelectRow,
-  W0 as Sheet,
-  q0 as Skeleton,
+  j0 as Progress,
+  W0 as Radio,
+  q0 as RadioGroup,
+  J0 as Row,
+  z0 as Select,
+  Z0 as SelectAll,
+  eg as SelectRow,
+  U0 as Sheet,
+  Q0 as Skeleton,
   wd as Spinner,
-  z0 as Switch,
-  Z0 as Tab,
-  J0 as Table,
-  eg as Tabs,
-  E0 as Textarea,
-  ag as Toasts,
-  rg as Tooltip,
-  tg as pushToast,
-  ng as removeToast,
-  yy as searchString
+  K0 as Switch,
+  ng as Tab,
+  tg as Table,
+  ag as Tabs,
+  Y0 as Textarea,
+  og as Toasts,
+  ig as Tooltip,
+  rg as pushToast,
+  lg as removeToast,
+  gy as searchString
 };