@codemonster-ru/vueforge-core 1.1.1 → 1.3.0

package/dist/vueforge-core.js

@@ -1,167 +1,196 @@
-import { r as be, a as ge, b as $e, D as we, c as ke, i as Ve } from "./public-D2viaiWv.js";
-import { d as Gt, e as Jt } from "./public-D2viaiWv.js";
-import { defineComponent as D, ref as w, inject as pe, computed as r, watch as W, onMounted as Q, onBeforeUnmount as N, provide as Te, renderSlot as $, toValue as A, nextTick as G, openBlock as m, createElementBlock as h, createElementVNode as C, unref as c, toDisplayString as R, normalizeClass as M, createVNode as ee, createCommentVNode as I, useAttrs as P, mergeProps as F, createTextVNode as ve, useSlots as xe, createBlock as X, Teleport as J, normalizeStyle as U, Fragment as Ce, renderList as Oe, normalizeProps as De, guardReactiveProps as Ie } from "vue";
-import { d as Ee } from "./useScrollLock-B7pq1ybb.js";
-import { t as eo, a as to, u as oo, b as no, c as ao, v as so } from "./useScrollLock-B7pq1ybb.js";
-import { VueIconify as te, icons as H } from "@codemonster-ru/vueiconify";
-import { autoUpdate as Be, computePosition as Ae, offset as oe, flip as ne, shift as ae, arrow as se } from "@codemonster-ru/floater.js";
-const me = Symbol("VueForgeConfig");
-function Se() {
+import { resolveThemeConfig as Le, applyThemeConfig as Se, resolveTheme as ze, DEFAULT_STORAGE_KEY as Me, DEFAULT_ATTRIBUTE as Pe, isThemeMode as Ne, vfMotionDurationsMs as U } from "@codemonster-ru/vueforge-theme";
+import { createThemePreset as Wn } from "@codemonster-ru/vueforge-theme";
+import { defaultThemePreset as Fe } from "./theme-api.js";
+import { defineComponent as L, ref as A, inject as we, computed as s, watch as Z, onMounted as de, onBeforeUnmount as ee, provide as Re, renderSlot as B, toValue as K, nextTick as ae, openBlock as c, createElementBlock as m, createElementVNode as T, unref as h, toDisplayString as F, normalizeClass as P, createVNode as j, Transition as ne, withCtx as Q, createCommentVNode as O, useAttrs as R, mergeProps as H, createTextVNode as oe, normalizeStyle as W, useSlots as Te, createBlock as q, Teleport as le, resolveDynamicComponent as re, normalizeProps as Ve, guardReactiveProps as xe, resolveComponent as He, Fragment as ue, renderList as ce } from "vue";
+import { d as Ce } from "./useScrollLock-FYdn9vRp.js";
+import { t as Yn, a as Xn, u as Gn, b as Qn, c as Jn, v as Zn } from "./useScrollLock-FYdn9vRp.js";
+import { VueIconify as te, icons as X } from "@codemonster-ru/vueiconify";
+import { autoUpdate as Ke, computePosition as je, offset as ve, flip as pe, shift as me, arrow as he } from "@codemonster-ru/floater.js";
+const Be = Symbol("VueForgeConfig");
+function qe(t = {}) {
+  return Le({
+    ...t,
+    preset: t.preset ?? Fe
+  });
+}
+function We(t, n) {
+  return Se(t, n);
+}
+function Ue() {
   return {
-    install(t, e = {}) {
-      const s = be(e.theme);
-      t.provide(me, { theme: s }), typeof document < "u" && ge(s);
+    install(n, e = {}) {
+      const i = qe(e.theme);
+      n.provide(Be, { theme: i }), typeof document < "u" && We(i);
     }
   };
 }
-const It = Se(), _e = Symbol("VfThemeContext"), Et = /* @__PURE__ */ D({
+const bn = Ue(), Ee = Symbol("VfThemeContext"), $n = /* @__PURE__ */ L({
   __name: "VfThemeProvider",
   props: {
     defaultTheme: { default: "system" },
     storageKey: {},
     attribute: {}
   },
-  setup(o) {
-    const t = o, e = w(t.defaultTheme), s = w("light"), n = w(null), l = pe(me, null), d = r(() => $e(e.value, s.value)), f = r(
-      () => t.storageKey ?? (l == null ? void 0 : l.theme.options.storageKey) ?? we
-    ), _ = r(
-      () => t.attribute ?? (l == null ? void 0 : l.theme.options.attribute) ?? ke
-    );
-    function b() {
+  setup(t) {
+    const n = t, e = A(n.defaultTheme), i = A("light"), l = A(null), r = we(Be, null), u = s(
+      () => ze(e.value, i.value)
+    ), p = s(
+      () => n.storageKey ?? (r == null ? void 0 : r.theme.options.storageKey) ?? Me
+    ), g = s(
+      () => n.attribute ?? (r == null ? void 0 : r.theme.options.attribute) ?? Pe
+    ), b = A(!1);
+    let v = null;
+    function E() {
       if (typeof window > "u")
         return;
-      const y = window.localStorage.getItem(f.value);
-      Ve(y) && (e.value = y);
+      const d = window.localStorage.getItem(p.value);
+      Ne(d) && (e.value = d);
+    }
+    function V() {
+      v !== null && (window.clearTimeout(v), v = null);
     }
-    function u(y) {
-      typeof document > "u" || document.documentElement.setAttribute(_.value, y);
+    function w(d, _ = {}) {
+      if (typeof document > "u")
+        return;
+      const o = document.documentElement;
+      _.animate && (V(), o.classList.add("vf-theme-transitioning")), o.setAttribute(g.value, d), _.animate && (v = window.setTimeout(() => {
+        o.classList.remove("vf-theme-transitioning"), v = null;
+      }, 320));
     }
-    function V(y) {
-      var B;
-      if (y) {
-        s.value = y.matches ? "dark" : "light";
+    function I(d) {
+      var _;
+      if (d) {
+        i.value = d.matches ? "dark" : "light";
         return;
       }
-      s.value = (B = n.value) != null && B.matches ? "dark" : "light";
+      i.value = (_ = l.value) != null && _.matches ? "dark" : "light";
     }
-    function k(y) {
-      e.value = y;
+    function S(d) {
+      e.value = d;
     }
-    function O() {
-      const y = d.value === "dark" ? "light" : "dark";
-      e.value = y;
+    function z() {
+      const d = u.value === "dark" ? "light" : "dark";
+      e.value = d;
     }
-    return W(e, (y) => {
-      typeof window > "u" || window.localStorage.setItem(f.value, y);
-    }), W(
-      d,
-      (y) => {
-        u(y);
+    return Z(e, (d) => {
+      typeof window > "u" || window.localStorage.setItem(p.value, d);
+    }), Z(
+      u,
+      (d) => {
+        w(d, { animate: b.value });
       },
       { immediate: !0 }
-    ), Q(() => {
-      b(), n.value = window.matchMedia("(prefers-color-scheme: dark)"), V(), n.value.addEventListener("change", V);
-    }), N(() => {
-      var y;
-      (y = n.value) == null || y.removeEventListener("change", V);
-    }), Te(_e, {
+    ), de(() => {
+      E(), l.value = window.matchMedia("(prefers-color-scheme: dark)"), I(), l.value.addEventListener("change", I), b.value = !0;
+    }), ee(() => {
+      var d;
+      (d = l.value) == null || d.removeEventListener("change", I), V();
+    }), Re(Ee, {
       mode: e,
-      resolvedTheme: d,
-      setTheme: k,
-      toggleTheme: O
-    }), (y, B) => $(y.$slots, "default");
+      resolvedTheme: u,
+      setTheme: S,
+      toggleTheme: z
+    }), (d, _) => B(d.$slots, "default");
   }
 });
-function he(o, t, e = {}) {
-  const s = e.event ?? "pointerdown", n = (l) => {
-    if (A(e.enabled) === !1)
+function Oe(t, n, e = {}) {
+  const i = e.event ?? "pointerdown", l = (r) => {
+    if (K(e.enabled) === !1)
       return;
-    const d = l.target;
-    if (!(d instanceof Node))
+    const u = r.target;
+    if (!(u instanceof Node))
       return;
-    const f = Array.isArray(o) ? o.map((_) => _.value).filter((_) => _ instanceof HTMLElement) : [o.value].filter((_) => _ instanceof HTMLElement);
-    f.length === 0 || f.some((_) => _.contains(d)) || t(l);
+    const p = Array.isArray(t) ? t.map((g) => g.value).filter((g) => g instanceof HTMLElement) : [t.value].filter(
+      (g) => g instanceof HTMLElement
+    );
+    p.length === 0 || p.some((g) => g.contains(u)) || n(r);
   };
-  Q(() => {
-    document.addEventListener(s, n);
-  }), N(() => {
-    document.removeEventListener(s, n);
+  de(() => {
+    document.addEventListener(i, l);
+  }), ee(() => {
+    document.removeEventListener(i, l);
   });
 }
-function Z(o = {}) {
-  const t = r(() => A(o.open) !== void 0), e = w(o.defaultOpen ?? !1), s = r(() => t.value ? !!A(o.open) : e.value);
-  W(
-    () => A(o.open),
-    (l) => {
-      l !== void 0 && (e.value = l);
+function se(t = {}) {
+  const n = s(() => K(t.open) !== void 0), e = A(t.defaultOpen ?? !1), i = s(
+    () => n.value ? !!K(t.open) : e.value
+  );
+  Z(
+    () => K(t.open),
+    (r) => {
+      r !== void 0 && (e.value = r);
     }
   );
-  function n(l) {
-    var d;
-    t.value || (e.value = l), (d = o.onOpenChange) == null || d.call(o, l);
+  function l(r) {
+    var u;
+    n.value || (e.value = r), (u = t.onOpenChange) == null || u.call(t, r);
   }
   return {
-    isOpen: s,
-    open: () => n(!0),
-    close: () => n(!1),
-    toggle: () => n(!s.value),
-    setOpen: n
+    isOpen: i,
+    open: () => l(!0),
+    close: () => l(!1),
+    toggle: () => l(!i.value),
+    setOpen: l
   };
 }
-function le(o, t = {}) {
-  const e = t.event ?? "keydown", s = (n) => {
-    A(t.enabled) === !1 || n.key !== "Escape" || o(n);
+function fe(t, n = {}) {
+  const e = n.event ?? "keydown", i = (l) => {
+    K(n.enabled) === !1 || l.key !== "Escape" || t(l);
   };
-  Q(() => {
-    document.addEventListener(e, s);
-  }), N(() => {
-    document.removeEventListener(e, s);
+  de(() => {
+    document.addEventListener(e, i);
+  }), ee(() => {
+    document.removeEventListener(e, i);
   });
 }
-function re(o, t, e = {}) {
-  const s = w(0), n = w(0), l = w(A(e.placement) ?? "bottom"), d = w({}), f = w(null);
-  let _ = 0;
-  const b = r(() => ({
-    left: `${s.value}px`,
-    top: `${n.value}px`
+function ye(t, n, e = {}) {
+  const i = A(0), l = A(0), r = A(K(e.placement) ?? "bottom"), u = A({}), p = A(null);
+  let g = 0;
+  const b = s(() => ({
+    left: `${i.value}px`,
+    top: `${l.value}px`
   }));
-  async function u() {
-    if (!o.value || !t.value)
+  async function v() {
+    if (!t.value || !n.value)
       return;
-    const k = await Ae(o.value, t.value, {
-      placement: A(e.placement) ?? l.value,
-      middleware: A(e.middleware),
-      strategy: A(e.strategy)
-    });
-    s.value = k.x, n.value = k.y, l.value = k.placement, d.value = k.middlewareData ?? {};
+    const V = await je(
+      t.value,
+      n.value,
+      {
+        placement: K(e.placement) ?? r.value,
+        middleware: K(e.middleware),
+        strategy: K(e.strategy)
+      }
+    );
+    i.value = V.x, l.value = V.y, r.value = V.placement, u.value = V.middlewareData ?? {};
   }
-  function V() {
-    var k;
-    (k = f.value) == null || k.call(f), f.value = null;
+  function E() {
+    var V;
+    (V = p.value) == null || V.call(p), p.value = null;
   }
-  return W(
-    [() => A(e.enabled) !== !1, o, t],
-    async ([k]) => {
-      _ += 1;
-      const O = _;
-      V(), !(!k || !o.value || !t.value) && (await G(), !(O !== _ || A(e.enabled) === !1 || !o.value || !t.value) && (await u(), !(O !== _ || A(e.enabled) === !1 || !o.value || !t.value) && (f.value = Be(o.value, () => {
-        u();
+  return Z(
+    [() => K(e.enabled) !== !1, t, n],
+    async ([V]) => {
+      g += 1;
+      const w = g;
+      E(), !(!V || !t.value || !n.value) && (await ae(), !(w !== g || K(e.enabled) === !1 || !t.value || !n.value) && (await v(), !(w !== g || K(e.enabled) === !1 || !t.value || !n.value) && (p.value = Ke(t.value, () => {
+        v();
       }))));
     },
     { immediate: !0 }
-  ), N(() => {
-    V();
+  ), ee(() => {
+    E();
   }), {
-    x: s,
-    y: n,
-    placement: l,
-    middlewareData: d,
+    x: i,
+    y: l,
+    placement: r,
+    middlewareData: u,
     styles: b,
-    update: u,
-    cleanup: V
+    update: v,
+    cleanup: E
   };
 }
-const ze = [
+const Ye = [
   "a[href]",
   "button:not([disabled])",
   "input:not([disabled])",
@@ -169,53 +198,55 @@ const ze = [
   "textarea:not([disabled])",
   '[tabindex]:not([tabindex="-1"])'
 ].join(", ");
-function Pe(o) {
-  return Array.from(o.querySelectorAll(ze)).filter(
-    (t) => !t.hasAttribute("hidden") && t.getAttribute("aria-hidden") !== "true"
+function Xe(t) {
+  return Array.from(
+    t.querySelectorAll(Ye)
+  ).filter(
+    (n) => !n.hasAttribute("hidden") && n.getAttribute("aria-hidden") !== "true"
   );
 }
-function Fe(o, t = {}) {
-  const e = (s) => {
-    if (s.key !== "Tab" || A(t.enabled) === !1)
+function De(t, n = {}) {
+  const e = (i) => {
+    if (i.key !== "Tab" || K(n.enabled) === !1)
       return;
-    const n = o.value;
-    if (!n)
+    const l = t.value;
+    if (!l)
       return;
-    const l = Pe(n);
-    if (l.length === 0) {
-      s.preventDefault(), n.focus();
+    const r = Xe(l);
+    if (r.length === 0) {
+      i.preventDefault(), l.focus();
       return;
     }
-    const d = l[0], f = l[l.length - 1], _ = document.activeElement;
-    if (s.shiftKey) {
-      (_ === d || _ === n) && (s.preventDefault(), f.focus());
+    const u = r[0], p = r[r.length - 1], g = document.activeElement;
+    if (i.shiftKey) {
+      (g === u || g === l) && (i.preventDefault(), p.focus());
       return;
     }
-    _ === f && (s.preventDefault(), d.focus());
+    g === p && (i.preventDefault(), u.focus());
   };
-  Q(() => {
+  de(() => {
     document.addEventListener("keydown", e);
-  }), N(() => {
+  }), ee(() => {
     document.removeEventListener("keydown", e);
   });
 }
-let Ke = 0;
-function K(o = {}) {
-  const t = `${o.prefix ?? "vf"}-${++Ke}`;
-  return r(() => A(o.providedId) ?? t);
+let Ge = 0;
+function G(t = {}) {
+  const n = `${t.prefix ?? "vf"}-${++Ge}`;
+  return s(() => K(t.providedId) ?? n);
 }
-function Bt() {
-  const o = pe(_e);
-  if (!o)
+function kn() {
+  const t = we(Ee);
+  if (!t)
     throw new Error("useTheme must be used inside VfThemeProvider.");
   return {
-    theme: o.mode,
-    resolvedTheme: o.resolvedTheme,
-    setTheme: o.setTheme,
-    toggleTheme: o.toggleTheme
+    theme: t.mode,
+    resolvedTheme: t.resolvedTheme,
+    setTheme: t.setTheme,
+    toggleTheme: t.toggleTheme
   };
 }
-const Le = { class: "vf-accordion" }, Re = ["id", "aria-controls", "aria-expanded", "disabled"], Me = ["id", "aria-labelledby"], At = /* @__PURE__ */ D({
+const Qe = { class: "vf-accordion" }, Je = ["id", "aria-controls", "aria-expanded", "disabled"], Ze = ["id", "aria-labelledby"], et = { class: "vf-accordion__content-inner" }, wn = /* @__PURE__ */ L({
   __name: "VfAccordion",
   props: {
     open: { type: Boolean, default: void 0 },
@@ -224,113 +255,161 @@ const Le = { class: "vf-accordion" }, Re = ["id", "aria-controls", "aria-expande
     disabled: { type: Boolean, default: !1 }
   },
   emits: ["update:open", "openChange"],
-  setup(o, { emit: t }) {
-    const e = o, s = t, n = K({ prefix: "vf-accordion-trigger" }), l = K({ prefix: "vf-accordion-content" }), d = Z({
+  setup(t, { emit: n }) {
+    const e = t, i = n, l = G({ prefix: "vf-accordion-trigger" }), r = G({ prefix: "vf-accordion-content" }), u = se({
       defaultOpen: e.defaultOpen,
-      open: r(() => e.open),
-      onOpenChange: (u) => {
-        s("update:open", u), s("openChange", u);
+      open: s(() => e.open),
+      onOpenChange: (_) => {
+        i("update:open", _), i("openChange", _);
       }
-    }), f = d.isOpen;
-    function _() {
-      e.disabled || d.toggle();
-    }
-    function b(u) {
-      (u.key === "Enter" || u.key === " ") && (u.preventDefault(), _());
-    }
-    return (u, V) => (m(), h("section", Le, [
-      C("button", {
-        id: c(n),
-        "aria-controls": c(l),
-        "aria-expanded": c(f),
-        disabled: o.disabled,
+    }), p = u.isOpen, g = [
+      "height var(--vf-motion-duration-normal) var(--vf-motion-ease-standard)",
+      "opacity var(--vf-motion-duration-normal) var(--vf-motion-ease-standard)"
+    ].join(", ");
+    function b(_) {
+      const o = _.firstElementChild;
+      return (o == null ? void 0 : o.offsetHeight) ?? _.scrollHeight;
+    }
+    function v() {
+      e.disabled || u.toggle();
+    }
+    function E(_) {
+      (_.key === "Enter" || _.key === " ") && (_.preventDefault(), v());
+    }
+    function V(_) {
+      const o = _;
+      o.style.height = "0px", o.style.opacity = "0", o.style.overflow = "hidden";
+    }
+    function w(_, o) {
+      const y = _;
+      y.style.transition = g, requestAnimationFrame(() => {
+        y.style.height = `${b(y)}px`, y.style.opacity = "1";
+      }), window.setTimeout(o, U.normal);
+    }
+    function I(_) {
+      const o = _;
+      o.style.height = "", o.style.opacity = "", o.style.overflow = "", o.style.transition = "";
+    }
+    function S(_) {
+      const o = _;
+      o.style.height = `${b(o)}px`, o.style.opacity = "1", o.style.overflow = "hidden";
+    }
+    function z(_, o) {
+      const y = _;
+      y.style.transition = g, y.offsetHeight, y.style.height = "0px", y.style.opacity = "0", window.setTimeout(o, U.normal);
+    }
+    function d(_) {
+      const o = _;
+      o.style.height = "", o.style.opacity = "", o.style.overflow = "", o.style.transition = "";
+    }
+    return (_, o) => (c(), m("section", Qe, [
+      T("button", {
+        id: h(l),
+        "aria-controls": h(r),
+        "aria-expanded": h(p),
+        disabled: t.disabled,
         class: "vf-accordion__trigger",
         type: "button",
-        onClick: _,
-        onKeydown: b
+        onClick: v,
+        onKeydown: E
       }, [
-        $(u.$slots, "trigger", { open: c(f) }, () => [
-          C("span", null, R(o.title), 1)
+        B(_.$slots, "trigger", { open: h(p) }, () => [
+          T("span", null, F(t.title), 1)
         ]),
-        C("span", {
+        T("span", {
           "aria-hidden": "true",
-          class: M(["vf-accordion__icon", c(f) && "vf-accordion__icon--open"])
+          class: P(["vf-accordion__icon", h(p) && "vf-accordion__icon--open"])
         }, [
-          ee(c(te), {
-            icon: c(H).chevronDown,
+          j(h(te), {
+            icon: h(X).chevronDown,
             size: "0.875rem"
           }, null, 8, ["icon"])
         ], 2)
-      ], 40, Re),
-      c(f) ? (m(), h("div", {
-        key: 0,
-        id: c(l),
-        "aria-labelledby": c(n),
-        class: "vf-accordion__content",
-        role: "region"
-      }, [
-        $(u.$slots, "default", { open: c(f) })
-      ], 8, Me)) : I("", !0)
+      ], 40, Je),
+      j(ne, {
+        css: !1,
+        onBeforeEnter: V,
+        onEnter: w,
+        onAfterEnter: I,
+        onBeforeLeave: S,
+        onLeave: z,
+        onAfterLeave: d
+      }, {
+        default: Q(() => [
+          h(p) ? (c(), m("div", {
+            key: 0,
+            id: h(r),
+            "aria-labelledby": h(l),
+            class: "vf-accordion__content",
+            role: "region"
+          }, [
+            T("div", et, [
+              B(_.$slots, "default", { open: h(p) })
+            ])
+          ], 8, Ze)) : O("", !0)
+        ]),
+        _: 3
+      })
     ]));
   }
 });
-function S(...o) {
-  return o.filter(Boolean).join(" ");
+function N(...t) {
+  return t.filter(Boolean).join(" ");
 }
-const Ne = {
+const tt = {
   class: "vf-alert__icon",
   "aria-hidden": "true"
-}, We = { class: "vf-alert__content" }, Ue = {
+}, nt = { class: "vf-alert__content" }, at = {
   key: 0,
   class: "vf-alert__title"
-}, Ye = { class: "vf-alert__body" }, St = /* @__PURE__ */ D({
+}, ot = { class: "vf-alert__body" }, Tn = /* @__PURE__ */ L({
   inheritAttrs: !1,
   __name: "VfAlert",
   props: {
     tone: { default: "primary" },
     title: { default: void 0 }
   },
-  setup(o) {
-    const t = o, e = P(), s = r(
-      () => S("vf-alert", t.tone !== "primary" && `vf-alert--${t.tone}`)
-    ), n = r(() => t.tone === "success" ? H.checkCircle : t.tone === "danger" ? H.warning : H.info);
-    return (l, d) => (m(), h("section", F({
-      class: s.value,
+  setup(t) {
+    const n = t, e = R(), i = s(
+      () => N("vf-alert", n.tone !== "primary" && `vf-alert--${n.tone}`)
+    ), l = s(() => n.tone === "success" ? X.checkCircle : n.tone === "info" ? X.info : n.tone === "warn" ? X.warning : n.tone === "help" ? X.questionCircle : n.tone === "danger" ? X.warning : n.tone === "contrast" ? X.info : X.info);
+    return (r, u) => (c(), m("section", H({
+      class: i.value,
       role: "alert"
-    }, c(e)), [
-      C("div", Ne, [
-        ee(c(te), {
-          icon: n.value,
+    }, h(e)), [
+      T("div", tt, [
+        j(h(te), {
+          icon: l.value,
           size: "2rem"
         }, null, 8, ["icon"])
       ]),
-      C("div", We, [
-        t.title || l.$slots.title ? (m(), h("p", Ue, [
-          $(l.$slots, "title", {}, () => [
-            ve(R(t.title), 1)
+      T("div", nt, [
+        n.title || r.$slots.title ? (c(), m("p", at, [
+          B(r.$slots, "title", {}, () => [
+            oe(F(n.title), 1)
           ])
-        ])) : I("", !0),
-        C("div", Ye, [
-          $(l.$slots, "default")
+        ])) : O("", !0),
+        T("div", ot, [
+          B(r.$slots, "default")
         ])
       ])
     ], 16));
   }
-}), zt = /* @__PURE__ */ D({
+}), Vn = /* @__PURE__ */ L({
   inheritAttrs: !1,
   __name: "VfBadge",
   props: {
     tone: { default: "neutral" }
   },
-  setup(o) {
-    const t = o, e = P(), s = r(
-      () => S("vf-badge", t.tone !== "neutral" && `vf-badge--${t.tone}`)
+  setup(t) {
+    const n = t, e = R(), i = s(
+      () => N("vf-badge", n.tone !== "neutral" && `vf-badge--${n.tone}`)
     );
-    return (n, l) => (m(), h("span", F({ class: s.value }, c(e)), [
-      $(n.$slots, "default")
+    return (l, r) => (c(), m("span", H({ class: i.value }, h(e)), [
+      B(l.$slots, "default")
     ], 16));
   }
-}), He = ["type"], Pt = /* @__PURE__ */ D({
+}), lt = ["type"], xn = /* @__PURE__ */ L({
   inheritAttrs: !1,
   __name: "VfButton",
   props: {
@@ -339,49 +418,108 @@ const Ne = {
     block: { type: Boolean, default: !1 },
     type: { default: "button" }
   },
-  setup(o) {
-    const t = o, e = P(), s = r(
-      () => S(
+  setup(t) {
+    const n = t, e = R(), i = s(
+      () => N(
         "vf-button",
-        t.variant !== "primary" && `vf-button--${t.variant}`,
-        t.size !== "md" && `vf-button--${t.size}`,
-        t.block && "vf-button--block"
+        `vf-button--${n.variant}`,
+        n.size !== "md" && `vf-button--${n.size}`,
+        n.block && "vf-button--block"
       )
     );
-    return (n, l) => (m(), h("button", F({
-      class: s.value,
-      type: t.type
-    }, c(e)), [
-      $(n.$slots, "default")
-    ], 16, He));
+    return (l, r) => (c(), m("button", H({
+      class: i.value,
+      type: n.type
+    }, h(e)), [
+      B(l.$slots, "default")
+    ], 16, lt));
   }
-}), Xe = { key: 0 }, qe = { class: "vf-card__title" }, je = {
+}), st = { key: 0 }, it = { class: "vf-card__title" }, rt = {
   key: 1,
   class: "vf-card__body"
-}, Qe = { key: 2 }, Ft = /* @__PURE__ */ D({
+}, ut = { key: 2 }, Cn = /* @__PURE__ */ L({
   inheritAttrs: !1,
   __name: "VfCard",
   props: {
     title: { default: void 0 },
     compact: { type: Boolean, default: !1 }
   },
-  setup(o) {
-    const t = o, e = P(), s = r(() => S("vf-card", t.compact && "vf-card--compact"));
-    return (n, l) => (m(), h("section", F({ class: s.value }, c(e)), [
-      t.title || n.$slots.header ? (m(), h("header", Xe, [
-        $(n.$slots, "header", {}, () => [
-          C("h3", qe, R(t.title), 1)
+  setup(t) {
+    const n = t, e = R(), i = s(
+      () => N("vf-card", n.compact && "vf-card--compact")
+    );
+    return (l, r) => (c(), m("section", H({ class: i.value }, h(e)), [
+      n.title || l.$slots.header ? (c(), m("header", st, [
+        B(l.$slots, "header", {}, () => [
+          T("h3", it, F(n.title), 1)
         ])
-      ])) : I("", !0),
-      n.$slots.default ? (m(), h("div", je, [
-        $(n.$slots, "default")
-      ])) : I("", !0),
-      n.$slots.footer ? (m(), h("footer", Qe, [
-        $(n.$slots, "footer")
-      ])) : I("", !0)
+      ])) : O("", !0),
+      l.$slots.default ? (c(), m("div", rt, [
+        B(l.$slots, "default")
+      ])) : O("", !0),
+      l.$slots.footer ? (c(), m("footer", ut, [
+        B(l.$slots, "footer")
+      ])) : O("", !0)
     ], 16));
   }
-}), Ge = ["type"], Je = /* @__PURE__ */ D({
+}), ct = ["checked", "disabled", "aria-invalid"], dt = {
+  key: 0,
+  class: "vf-checkbox__content"
+}, Bn = /* @__PURE__ */ L({
+  inheritAttrs: !1,
+  __name: "VfCheckbox",
+  props: {
+    modelValue: { type: Boolean, default: !1 },
+    size: { default: "md" },
+    invalid: { type: Boolean, default: !1 },
+    disabled: { type: Boolean, default: !1 },
+    label: { default: void 0 }
+  },
+  emits: ["update:modelValue", "change"],
+  setup(t, { emit: n }) {
+    const e = t, i = n, l = R(), r = s(
+      () => N(
+        "vf-checkbox",
+        `vf-checkbox--${e.size}`,
+        e.modelValue && "vf-checkbox--checked",
+        e.invalid && "vf-checkbox--invalid",
+        e.disabled && "vf-checkbox--disabled",
+        l.class
+      )
+    ), u = s(() => l.style), p = s(
+      () => Object.fromEntries(
+        Object.entries(l).filter(([b]) => b !== "class" && b !== "style")
+      )
+    );
+    function g(b) {
+      const v = b.target.checked;
+      i("update:modelValue", v), i("change", v);
+    }
+    return (b, v) => (c(), m("label", {
+      class: P(r.value),
+      style: W(u.value)
+    }, [
+      T("input", H({
+        class: "vf-checkbox__input",
+        type: "checkbox",
+        checked: e.modelValue,
+        disabled: e.disabled,
+        "aria-invalid": e.invalid || void 0
+      }, p.value, { onChange: g }), null, 16, ct),
+      v[0] || (v[0] = T("span", {
+        class: "vf-checkbox__control",
+        "aria-hidden": "true"
+      }, [
+        T("span", { class: "vf-checkbox__mark" })
+      ], -1)),
+      t.label || b.$slots.default ? (c(), m("span", dt, [
+        B(b.$slots, "default", {}, () => [
+          oe(F(t.label), 1)
+        ])
+      ])) : O("", !0)
+    ], 6));
+  }
+}), ft = ["type"], Ae = /* @__PURE__ */ L({
   inheritAttrs: !1,
   __name: "VfIconButton",
   props: {
@@ -390,38 +528,214 @@ const Ne = {
     size: { default: "md" },
     type: { default: "button" }
   },
-  setup(o) {
-    const t = o, e = P(), s = r(
-      () => S(
+  setup(t) {
+    const n = t, e = R(), i = s(
+      () => N(
         "vf-icon-button",
-        t.variant !== "ghost" && `vf-icon-button--${t.variant}`,
-        t.size !== "md" && `vf-icon-button--${t.size}`
+        n.variant !== "ghost" && `vf-icon-button--${n.variant}`,
+        n.size !== "md" && `vf-icon-button--${n.size}`
       )
-    ), n = r(() => t.size === "sm" ? "0.875rem" : t.size === "lg" ? "1.125rem" : "1rem");
-    return (l, d) => (m(), h("button", F({
-      class: s.value,
-      type: t.type
-    }, c(e)), [
-      ee(c(te), {
-        icon: t.icon,
-        size: n.value,
+    ), l = s(() => n.size === "sm" ? "0.875rem" : n.size === "lg" ? "1.125rem" : "1rem");
+    return (r, u) => (c(), m("button", H({
+      class: i.value,
+      type: n.type
+    }, h(e)), [
+      j(h(te), {
+        icon: n.icon,
+        size: l.value,
         "aria-hidden": "true"
       }, null, 8, ["icon", "size"])
-    ], 16, Ge));
+    ], 16, ft));
+  }
+}), vt = ["aria-labelledby"], pt = {
+  key: 0,
+  class: "vf-drawer__header"
+}, mt = ["id"], ht = { class: "vf-drawer__actions" }, yt = {
+  key: 1,
+  class: "vf-drawer__body"
+}, _t = {
+  key: 2,
+  class: "vf-drawer__footer"
+}, En = /* @__PURE__ */ L({
+  inheritAttrs: !1,
+  __name: "VfDrawer",
+  props: {
+    open: { type: Boolean, default: void 0 },
+    defaultOpen: { type: Boolean, default: !1 },
+    title: { default: void 0 },
+    size: { default: "md" },
+    placement: { default: "right" },
+    offsetTop: { default: void 0 },
+    bodyPadding: { default: void 0 },
+    teleportTo: { type: [String, null, Boolean], default: void 0 },
+    disableTeleport: { type: Boolean, default: !1 },
+    scrollLockTarget: { type: [null, Boolean], default: void 0 },
+    closeOnOverlayClick: { type: Boolean, default: !0 },
+    closeOnEscape: { type: Boolean, default: !0 },
+    closable: { type: Boolean, default: !0 }
+  },
+  emits: ["update:open", "openChange"],
+  setup(t, { emit: n }) {
+    const e = t, i = n, l = R(), r = A(null), u = A(null), p = Te(), g = G({ prefix: "vf-drawer-title" }), b = se({
+      defaultOpen: e.defaultOpen,
+      open: s(() => e.open),
+      onOpenChange: (x) => {
+        i("update:open", x), i("openChange", x);
+      }
+    }), v = b.isOpen, E = {
+      enter: U.normal,
+      leave: U.normal
+    };
+    function V(x) {
+      return typeof x == "number" ? `${x}px` : x;
+    }
+    const w = s(() => {
+      const x = {}, k = V(e.offsetTop), J = V(e.bodyPadding);
+      return k != null && (x["--vf-drawer-offset-top"] = k), J != null && (x["--vf-drawer-body-padding"] = J), x;
+    }), I = s(
+      () => N(
+        "vf-drawer",
+        `vf-drawer--${e.placement}`,
+        e.offsetTop != null && "vf-drawer--offset-top"
+      )
+    ), S = s(() => [
+      w.value,
+      l.style
+    ]), z = s(() => Object.fromEntries(
+      Object.entries(l).filter(([x]) => x !== "class" && x !== "style")
+    )), d = s(
+      () => e.disableTeleport || e.teleportTo === !1 || e.teleportTo === null
+    ), _ = s(() => e.scrollLockTarget === !1 ? null : e.scrollLockTarget), o = s(() => typeof e.teleportTo == "string" || typeof HTMLElement < "u" && e.teleportTo instanceof HTMLElement ? e.teleportTo : "body"), y = s(
+      () => N(
+        "vf-drawer__content",
+        `vf-drawer__content--${e.placement}`,
+        `vf-drawer__content--${e.size}`
+      )
+    ), f = s(() => !!p.header), a = s(
+      () => e.title || f.value ? g.value : void 0
+    );
+    function C() {
+      b.close();
+    }
+    function D() {
+      e.closeOnOverlayClick && C();
+    }
+    function M() {
+      const x = r.value;
+      if (!x)
+        return;
+      const k = x.querySelector(
+        "[autofocus], [data-autofocus]"
+      );
+      if (k) {
+        k.focus();
+        return;
+      }
+      x.focus();
+    }
+    return fe(
+      (x) => {
+        !e.closeOnEscape || !v.value || (x.preventDefault(), C());
+      },
+      {
+        enabled: v
+      }
+    ), De(r, {
+      enabled: v
+    }), Ce(v, {
+      target: _
+    }), Z(
+      v,
+      async (x) => {
+        var k;
+        if (!(typeof document > "u")) {
+          if (x) {
+            u.value = document.activeElement instanceof HTMLElement ? document.activeElement : null, await ae(), M();
+            return;
+          }
+          (k = u.value) == null || k.focus();
+        }
+      },
+      { immediate: !0 }
+    ), ee(() => {
+      var x;
+      v.value && ((x = u.value) == null || x.focus());
+    }), (x, k) => (c(), q(le, {
+      to: o.value,
+      disabled: d.value
+    }, [
+      j(ne, {
+        name: "vf-drawer-transition",
+        appear: "",
+        duration: E
+      }, {
+        default: Q(() => [
+          h(v) ? (c(), m("div", H({
+            key: 0,
+            class: [I.value, h(l).class],
+            style: S.value
+          }, z.value), [
+            T("div", {
+              class: "vf-drawer__overlay",
+              "aria-hidden": "true",
+              onClick: D
+            }),
+            T("section", {
+              ref_key: "contentRef",
+              ref: r,
+              class: P(y.value),
+              "aria-labelledby": a.value,
+              "aria-modal": "true",
+              role: "dialog",
+              tabindex: "-1"
+            }, [
+              t.title || x.$slots.header ? (c(), m("header", pt, [
+                T("div", null, [
+                  B(x.$slots, "header", {}, () => [
+                    t.title ? (c(), m("h2", {
+                      key: 0,
+                      id: h(g),
+                      class: "vf-drawer__title"
+                    }, F(t.title), 9, mt)) : O("", !0)
+                  ])
+                ]),
+                T("div", ht, [
+                  B(x.$slots, "actions", { close: C }),
+                  e.closable ? (c(), q(Ae, {
+                    key: 0,
+                    icon: h(X).xmark,
+                    "aria-label": "Close drawer",
+                    size: "sm",
+                    onClick: C
+                  }, null, 8, ["icon"])) : O("", !0)
+                ])
+              ])) : O("", !0),
+              x.$slots.default ? (c(), m("div", yt, [
+                B(x.$slots, "default", { close: C })
+              ])) : O("", !0),
+              x.$slots.footer ? (c(), m("footer", _t, [
+                B(x.$slots, "footer", { close: C })
+              ])) : O("", !0)
+            ], 10, vt)
+          ], 16)) : O("", !0)
+        ]),
+        _: 3
+      })
+    ], 8, ["to", "disabled"]));
   }
-}), Ze = {
+}), gt = {
   key: 0,
   class: "vf-dialog"
-}, et = ["aria-describedby", "aria-labelledby"], tt = {
+}, bt = ["aria-describedby", "aria-labelledby"], $t = {
   key: 0,
   class: "vf-dialog__header"
-}, ot = ["id"], nt = ["id"], at = { class: "vf-dialog__actions" }, st = {
+}, kt = ["id"], wt = ["id"], Tt = { class: "vf-dialog__actions" }, Vt = {
   key: 1,
   class: "vf-dialog__body"
-}, lt = {
+}, xt = {
   key: 2,
   class: "vf-dialog__footer"
-}, Kt = /* @__PURE__ */ D({
+}, On = /* @__PURE__ */ L({
   __name: "VfDialog",
   props: {
     open: { type: Boolean, default: void 0 },
@@ -429,287 +743,343 @@ const Ne = {
     title: { default: void 0 },
     description: { default: void 0 },
     size: { default: "md" },
+    teleportTo: { type: [String, null, Boolean], default: void 0 },
+    disableTeleport: { type: Boolean, default: !1 },
     closeOnOverlayClick: { type: Boolean, default: !0 },
     closeOnEscape: { type: Boolean, default: !0 },
     closable: { type: Boolean, default: !0 }
   },
   emits: ["update:open", "openChange"],
-  setup(o, { emit: t }) {
-    const e = o, s = t, n = w(null), l = w(null), d = xe(), f = K({ prefix: "vf-dialog-title" }), _ = K({ prefix: "vf-dialog-description" }), b = Z({
+  setup(t, { emit: n }) {
+    const e = t, i = n, l = A(null), r = A(null), u = Te(), p = G({ prefix: "vf-dialog-title" }), g = G({ prefix: "vf-dialog-description" }), b = se({
       defaultOpen: e.defaultOpen,
-      open: r(() => e.open),
+      open: s(() => e.open),
       onOpenChange: (a) => {
-        s("update:open", a), s("openChange", a);
+        i("update:open", a), i("openChange", a);
       }
-    }), u = b.isOpen, V = r(
-      () => S("vf-dialog__content", e.size !== "md" && `vf-dialog__content--${e.size}`)
-    ), k = r(() => !!d.header), O = r(() => !!d.description), y = r(
-      () => e.title || k.value ? f.value : void 0
-    ), B = r(
-      () => e.description || O.value ? _.value : void 0
+    }), v = b.isOpen, E = {
+      enter: U.fast,
+      leave: U.fast
+    }, V = s(
+      () => e.disableTeleport || e.teleportTo === !1 || e.teleportTo === null
+    ), w = s(() => typeof e.teleportTo == "string" || typeof HTMLElement < "u" && e.teleportTo instanceof HTMLElement ? e.teleportTo : "body"), I = s(
+      () => N(
+        "vf-dialog__content",
+        e.size !== "md" && `vf-dialog__content--${e.size}`
+      )
+    ), S = s(() => !!u.header), z = s(() => !!u.description), d = s(
+      () => e.title || S.value ? p.value : void 0
+    ), _ = s(
+      () => e.description || z.value ? g.value : void 0
     );
-    function x() {
+    function o() {
       b.close();
     }
-    function p() {
-      e.closeOnOverlayClick && x();
+    function y() {
+      e.closeOnOverlayClick && o();
     }
-    function E() {
-      const a = n.value;
+    function f() {
+      const a = l.value;
       if (!a)
         return;
-      const T = a.querySelector("[autofocus], [data-autofocus]");
-      if (T) {
-        T.focus();
+      const C = a.querySelector(
+        "[autofocus], [data-autofocus]"
+      );
+      if (C) {
+        C.focus();
         return;
       }
       a.focus();
     }
-    return le(
+    return fe(
       (a) => {
-        !e.closeOnEscape || !u.value || (a.preventDefault(), x());
+        !e.closeOnEscape || !v.value || (a.preventDefault(), o());
       },
       {
-        enabled: u
+        enabled: v
       }
-    ), Fe(n, {
-      enabled: u
-    }), Ee(u), W(
-      u,
+    ), De(l, {
+      enabled: v
+    }), Ce(v), Z(
+      v,
       async (a) => {
-        var T;
+        var C;
         if (!(typeof document > "u")) {
           if (a) {
-            l.value = document.activeElement instanceof HTMLElement ? document.activeElement : null, await G(), E();
+            r.value = document.activeElement instanceof HTMLElement ? document.activeElement : null, await ae(), f();
             return;
           }
-          (T = l.value) == null || T.focus();
+          (C = r.value) == null || C.focus();
         }
       },
       { immediate: !0 }
-    ), N(() => {
+    ), ee(() => {
       var a;
-      u.value && ((a = l.value) == null || a.focus());
-    }), (a, T) => (m(), X(J, { to: "body" }, [
-      c(u) ? (m(), h("div", Ze, [
-        C("div", {
-          class: "vf-dialog__overlay",
-          "aria-hidden": "true",
-          onClick: p
-        }),
-        C("section", {
-          ref_key: "contentRef",
-          ref: n,
-          class: M(V.value),
-          "aria-describedby": B.value,
-          "aria-labelledby": y.value,
-          "aria-modal": "true",
-          role: "dialog",
-          tabindex: "-1"
-        }, [
-          o.title || o.description || a.$slots.header || a.$slots.description ? (m(), h("header", tt, [
-            C("div", null, [
-              $(a.$slots, "header", {}, () => [
-                o.title ? (m(), h("h2", {
-                  key: 0,
-                  id: c(f),
-                  class: "vf-dialog__title"
-                }, R(o.title), 9, ot)) : I("", !0)
-              ]),
-              $(a.$slots, "description", {}, () => [
-                o.description ? (m(), h("p", {
-                  key: 0,
-                  id: c(_),
-                  class: "vf-dialog__description"
-                }, R(o.description), 9, nt)) : I("", !0)
-              ])
-            ]),
-            C("div", at, [
-              $(a.$slots, "actions", { close: x }),
-              e.closable ? (m(), X(Je, {
-                key: 0,
-                icon: c(H).xmark,
-                "aria-label": "Close dialog",
-                size: "sm",
-                onClick: x
-              }, null, 8, ["icon"])) : I("", !0)
-            ])
-          ])) : I("", !0),
-          a.$slots.default ? (m(), h("div", st, [
-            $(a.$slots, "default", { close: x })
-          ])) : I("", !0),
-          a.$slots.footer ? (m(), h("footer", lt, [
-            $(a.$slots, "footer", { close: x })
-          ])) : I("", !0)
-        ], 10, et)
-      ])) : I("", !0)
-    ]));
+      v.value && ((a = r.value) == null || a.focus());
+    }), (a, C) => (c(), q(le, {
+      to: w.value,
+      disabled: V.value
+    }, [
+      j(ne, {
+        name: "vf-dialog-transition",
+        appear: "",
+        duration: E
+      }, {
+        default: Q(() => [
+          h(v) ? (c(), m("div", gt, [
+            T("div", {
+              class: "vf-dialog__overlay",
+              "aria-hidden": "true",
+              onClick: y
+            }),
+            T("section", {
+              ref_key: "contentRef",
+              ref: l,
+              class: P(I.value),
+              "aria-describedby": _.value,
+              "aria-labelledby": d.value,
+              "aria-modal": "true",
+              role: "dialog",
+              tabindex: "-1"
+            }, [
+              t.title || t.description || a.$slots.header || a.$slots.description ? (c(), m("header", $t, [
+                T("div", null, [
+                  B(a.$slots, "header", {}, () => [
+                    t.title ? (c(), m("h2", {
+                      key: 0,
+                      id: h(p),
+                      class: "vf-dialog__title"
+                    }, F(t.title), 9, kt)) : O("", !0)
+                  ]),
+                  B(a.$slots, "description", {}, () => [
+                    t.description ? (c(), m("p", {
+                      key: 0,
+                      id: h(g),
+                      class: "vf-dialog__description"
+                    }, F(t.description), 9, wt)) : O("", !0)
+                  ])
+                ]),
+                T("div", Tt, [
+                  B(a.$slots, "actions", { close: o }),
+                  e.closable ? (c(), q(Ae, {
+                    key: 0,
+                    icon: h(X).xmark,
+                    "aria-label": "Close dialog",
+                    size: "sm",
+                    onClick: o
+                  }, null, 8, ["icon"])) : O("", !0)
+                ])
+              ])) : O("", !0),
+              a.$slots.default ? (c(), m("div", Vt, [
+                B(a.$slots, "default", { close: o })
+              ])) : O("", !0),
+              a.$slots.footer ? (c(), m("footer", xt, [
+                B(a.$slots, "footer", { close: o })
+              ])) : O("", !0)
+            ], 10, bt)
+          ])) : O("", !0)
+        ]),
+        _: 3
+      })
+    ], 8, ["to", "disabled"]));
   }
-}), rt = ["aria-orientation", "role"], Lt = /* @__PURE__ */ D({
+}), Ct = ["aria-orientation", "role"], Dn = /* @__PURE__ */ L({
   inheritAttrs: !1,
   __name: "VfDivider",
   props: {
     orientation: { default: "horizontal" }
   },
-  setup(o) {
-    const t = o, e = P(), s = r(() => t.orientation === "vertical"), n = r(() => S("vf-divider", `vf-divider--${t.orientation}`));
-    return (l, d) => (m(), h("div", F({
-      class: n.value,
-      "aria-orientation": t.orientation,
-      role: s.value ? "separator" : void 0
-    }, c(e)), null, 16, rt));
+  setup(t) {
+    const n = t, e = R(), i = s(() => n.orientation === "vertical"), l = s(
+      () => N("vf-divider", `vf-divider--${n.orientation}`)
+    );
+    return (r, u) => (c(), m("div", H({
+      class: l.value,
+      "aria-orientation": n.orientation,
+      role: i.value ? "separator" : void 0
+    }, h(e)), null, 16, Ct));
   }
-}), it = { class: "vf-dropdown" }, ut = ["id", "aria-controls", "aria-expanded"], ct = ["id", "aria-labelledby"], Rt = /* @__PURE__ */ D({
+}), Bt = { class: "vf-dropdown" }, Et = ["id", "aria-controls", "aria-expanded"], Ot = ["id", "aria-labelledby"], An = /* @__PURE__ */ L({
   __name: "VfDropdown",
   props: {
     open: { type: Boolean, default: void 0 },
     defaultOpen: { type: Boolean, default: !1 },
     placement: { default: "bottom-start" },
+    teleportTo: { type: [String, null, Boolean], default: void 0 },
+    disableTeleport: { type: Boolean, default: !1 },
     closeOnSelect: { type: Boolean, default: !0 }
   },
   emits: ["update:open", "openChange"],
-  setup(o, { emit: t }) {
-    const e = o, s = t, n = w(null), l = w(null), d = w(null), f = K({ prefix: "vf-dropdown-menu" }), _ = K({ prefix: "vf-dropdown-trigger" }), b = Z({
+  setup(t, { emit: n }) {
+    const e = t, i = n, l = A(null), r = A(null), u = A(null), p = G({ prefix: "vf-dropdown-menu" }), g = G({ prefix: "vf-dropdown-trigger" }), b = {
+      enter: U.fast,
+      leave: U.fast
+    }, v = s(
+      () => e.disableTeleport || e.teleportTo === !1 || e.teleportTo === null
+    ), E = s(() => typeof e.teleportTo == "string" || typeof HTMLElement < "u" && e.teleportTo instanceof HTMLElement ? e.teleportTo : "body"), V = se({
       defaultOpen: e.defaultOpen,
-      open: r(() => e.open),
-      onOpenChange: (i) => {
-        s("update:open", i), s("openChange", i);
+      open: s(() => e.open),
+      onOpenChange: ($) => {
+        i("update:open", $), i("openChange", $);
       }
-    }), u = b.isOpen, V = r(() => [
+    }), w = V.isOpen, I = s(() => [
       "vf-dropdown__menu",
-      x.value.startsWith("top") && "vf-dropdown__menu--top"
-    ]), k = r(() => {
-      const i = p.value.arrow;
+      o.value.startsWith("top") && "vf-dropdown__menu--top"
+    ]), S = s(() => {
+      const $ = y.value.arrow;
       return {
-        x: (i == null ? void 0 : i.x) !== void 0 && (i == null ? void 0 : i.baseX) !== void 0 ? i.x - i.baseX : 0,
-        y: (i == null ? void 0 : i.y) !== void 0 && (i == null ? void 0 : i.baseY) !== void 0 ? i.y - i.baseY : 0
+        x: ($ == null ? void 0 : $.x) !== void 0 && ($ == null ? void 0 : $.baseX) !== void 0 ? $.x - $.baseX : 0,
+        y: ($ == null ? void 0 : $.y) !== void 0 && ($ == null ? void 0 : $.baseY) !== void 0 ? $.y - $.baseY : 0
       };
-    }), O = r(() => ({
-      left: `${k.value.x}px`,
-      top: `${k.value.y}px`
-    })), y = r(() => [
+    }), z = s(() => ({
+      left: `${S.value.x}px`,
+      top: `${S.value.y}px`
+    })), d = s(() => [
       "vf-dropdown__arrow",
-      x.value.startsWith("top") ? "vf-dropdown__arrow--top" : "vf-dropdown__arrow--bottom"
-    ]), B = r(
+      o.value.startsWith("top") ? "vf-dropdown__arrow--top" : "vf-dropdown__arrow--bottom"
+    ]), _ = s(
       () => e.placement === "bottom-end" ? ["bottom-end", "top-end"] : ["bottom-start", "top-start"]
-    ), { placement: x, middlewareData: p, styles: E } = re(n, l, {
-      enabled: u,
-      placement: r(() => e.placement),
-      middleware: r(
-        () => [oe(10), ne({ placements: B.value }), ae(), d.value ? se(d.value) : void 0].filter(
-          (i) => i !== void 0
-        )
+    ), {
+      placement: o,
+      middlewareData: y,
+      styles: f
+    } = ye(l, r, {
+      enabled: w,
+      placement: s(() => e.placement),
+      middleware: s(
+        () => [
+          ve(10),
+          pe({ placements: _.value }),
+          me(),
+          u.value ? he(u.value) : void 0
+        ].filter(($) => $ !== void 0)
       ),
       strategy: "fixed"
     });
     function a() {
-      var i;
-      return Array.from(((i = l.value) == null ? void 0 : i.querySelectorAll('[role="menuitem"]')) ?? []);
+      var $;
+      return Array.from(
+        (($ = r.value) == null ? void 0 : $.querySelectorAll('[role="menuitem"]')) ?? []
+      );
     }
-    async function T() {
-      var i;
-      await G(), (i = a()[0]) == null || i.focus();
+    async function C() {
+      var $;
+      await ae(), ($ = a()[0]) == null || $.focus();
     }
-    function g(i = {}) {
-      b.open(), i.focusFirstItem && T();
+    function D($ = {}) {
+      V.open(), $.focusFirstItem && C();
     }
-    function L() {
-      var i;
-      b.close(), (i = n.value) == null || i.focus();
+    function M() {
+      var $;
+      V.close(), ($ = l.value) == null || $.focus();
     }
-    function q() {
-      if (u.value) {
-        L();
+    function x() {
+      if (w.value) {
+        M();
         return;
       }
-      g();
+      D();
     }
-    function v(i) {
-      (i.key === "ArrowDown" || i.key === "Enter" || i.key === " ") && (i.preventDefault(), g({ focusFirstItem: !0 }));
+    function k($) {
+      ($.key === "ArrowDown" || $.key === "Enter" || $.key === " ") && ($.preventDefault(), D({ focusFirstItem: !0 }));
     }
-    function Y(i) {
-      var ue, ce, de, fe;
-      const z = a(), ie = z.findIndex((ye) => ye === document.activeElement);
-      if (i.key === "ArrowDown") {
-        i.preventDefault(), (ue = z[(ie + 1 + z.length) % z.length]) == null || ue.focus();
+    function J($) {
+      var ge, be, $e, ke;
+      const Y = a(), _e = Y.findIndex(
+        (Ie) => Ie === document.activeElement
+      );
+      if ($.key === "ArrowDown") {
+        $.preventDefault(), (ge = Y[(_e + 1 + Y.length) % Y.length]) == null || ge.focus();
         return;
       }
-      if (i.key === "ArrowUp") {
-        i.preventDefault(), (ce = z[(ie - 1 + z.length) % z.length]) == null || ce.focus();
+      if ($.key === "ArrowUp") {
+        $.preventDefault(), (be = Y[(_e - 1 + Y.length) % Y.length]) == null || be.focus();
         return;
       }
-      if (i.key === "Home") {
-        i.preventDefault(), (de = z[0]) == null || de.focus();
+      if ($.key === "Home") {
+        $.preventDefault(), ($e = Y[0]) == null || $e.focus();
         return;
       }
-      i.key === "End" && (i.preventDefault(), (fe = z[z.length - 1]) == null || fe.focus());
+      $.key === "End" && ($.preventDefault(), (ke = Y[Y.length - 1]) == null || ke.focus());
     }
-    function j() {
-      e.closeOnSelect && L();
+    function ie() {
+      e.closeOnSelect && M();
     }
-    return he(
-      [n, l],
+    return Oe(
+      [l, r],
       () => {
-        u.value && L();
+        w.value && M();
       },
       {
-        enabled: u,
+        enabled: w,
         event: "click"
       }
-    ), le(
-      (i) => {
-        u.value && (i.preventDefault(), L());
+    ), fe(
+      ($) => {
+        w.value && ($.preventDefault(), M());
       },
       {
-        enabled: u
+        enabled: w
       }
-    ), (i, z) => (m(), h("div", it, [
-      C("div", {
-        id: c(_),
+    ), ($, Y) => (c(), m("div", Bt, [
+      T("div", {
+        id: h(g),
         ref_key: "triggerRef",
-        ref: n,
+        ref: l,
         class: "vf-dropdown__trigger",
-        "aria-controls": c(f),
-        "aria-expanded": c(u),
+        "aria-controls": h(p),
+        "aria-expanded": h(w),
         "aria-haspopup": "menu",
         tabindex: "0",
-        onClick: q,
-        onKeydown: v
+        onClick: x,
+        onKeydown: k
       }, [
-        $(i.$slots, "trigger", {
-          open: c(u),
-          toggle: q
+        B($.$slots, "trigger", {
+          open: h(w),
+          toggle: x
         })
-      ], 40, ut),
-      (m(), X(J, { to: "body" }, [
-        c(u) ? (m(), h("div", {
-          key: 0,
-          id: c(f),
-          ref_key: "menuRef",
-          ref: l,
-          class: M(V.value),
-          style: U(c(E)),
-          "aria-labelledby": c(_),
-          role: "menu",
-          onClick: j,
-          onKeydown: Y
-        }, [
-          C("span", {
-            ref_key: "arrowRef",
-            ref: d,
-            class: M(y.value),
-            style: U(O.value),
-            "aria-hidden": "true"
-          }, null, 6),
-          $(i.$slots, "default", {
-            close: L,
-            open: c(u)
-          })
-        ], 46, ct)) : I("", !0)
-      ]))
+      ], 40, Et),
+      (c(), q(le, {
+        to: E.value,
+        disabled: v.value
+      }, [
+        j(ne, {
+          name: "vf-floating-transition",
+          appear: "",
+          duration: b
+        }, {
+          default: Q(() => [
+            h(w) ? (c(), m("div", {
+              key: 0,
+              id: h(p),
+              ref_key: "menuRef",
+              ref: r,
+              class: P(I.value),
+              style: W(h(f)),
+              "aria-labelledby": h(g),
+              role: "menu",
+              onClick: ie,
+              onKeydown: J
+            }, [
+              T("span", {
+                ref_key: "arrowRef",
+                ref: u,
+                class: P(d.value),
+                style: W(z.value),
+                "aria-hidden": "true"
+              }, null, 6),
+              B($.$slots, "default", {
+                close: M,
+                open: h(w)
+              })
+            ], 46, Ot)) : O("", !0)
+          ]),
+          _: 3
+        })
+      ], 8, ["to", "disabled"]))
     ]));
   }
-}), dt = ["value", "aria-invalid"], Mt = /* @__PURE__ */ D({
+}), Dt = ["value", "aria-invalid"], In = /* @__PURE__ */ L({
   inheritAttrs: !1,
   __name: "VfInput",
   props: {
@@ -718,219 +1088,714 @@ const Ne = {
     invalid: { type: Boolean, default: !1 }
   },
   emits: ["update:modelValue"],
-  setup(o, { emit: t }) {
-    const e = o, s = t, n = P(), l = r(
-      () => S(
+  setup(t, { emit: n }) {
+    const e = t, i = n, l = R(), r = s(
+      () => N(
         "vf-input",
         e.size !== "md" && `vf-input--${e.size}`,
         e.invalid && "vf-input--invalid"
       )
     );
-    function d(f) {
-      s("update:modelValue", f.target.value);
+    function u(p) {
+      i("update:modelValue", p.target.value);
     }
-    return (f, _) => (m(), h("input", F({
-      class: l.value,
+    return (p, g) => (c(), m("input", H({
+      class: r.value,
       value: e.modelValue,
       "aria-invalid": e.invalid || void 0
-    }, c(n), { onInput: d }), null, 16, dt));
+    }, h(l), { onInput: u }), null, 16, Dt));
   }
-}), ft = ["href", "target", "rel"], Nt = /* @__PURE__ */ D({
+}), Ln = /* @__PURE__ */ L({
   inheritAttrs: !1,
   __name: "VfLink",
   props: {
     href: { default: void 0 },
+    to: { default: void 0 },
     target: { default: void 0 },
     rel: { default: void 0 },
     underline: { type: Boolean, default: !1 },
-    tone: { default: "default" }
+    tone: { default: "default" },
+    component: { default: void 0 }
   },
-  setup(o) {
-    const t = o, e = P(), s = r(() => t.rel ? t.rel : t.target === "_blank" ? "noopener noreferrer" : void 0), n = r(
-      () => S(
+  setup(t) {
+    const n = t, e = R(), i = s(() => n.to !== void 0), l = s(() => i.value ? n.component ?? re("RouterLink") : "a"), r = s(() => n.rel ? n.rel : n.target === "_blank" ? "noopener noreferrer" : void 0), u = s(
+      () => N(
         "vf-link",
-        t.underline && "vf-link--underline",
-        t.tone === "muted" && "vf-link--muted"
+        n.underline && "vf-link--underline",
+        n.tone === "muted" && "vf-link--muted"
       )
-    );
-    return (l, d) => (m(), h("a", F({
-      class: n.value,
-      href: t.href,
-      target: t.target,
-      rel: s.value
-    }, c(e)), [
-      $(l.$slots, "default")
-    ], 16, ft));
+    ), p = s(() => i.value ? {
+      to: n.to,
+      target: n.target,
+      rel: r.value
+    } : {
+      href: n.href,
+      target: n.target,
+      rel: r.value
+    }), g = s(() => ({
+      ...e,
+      ...p.value,
+      class: u.value
+    }));
+    return (b, v) => (c(), q(re(l.value), Ve(xe(g.value)), {
+      default: Q(() => [
+        B(b.$slots, "default")
+      ]),
+      _: 3
+    }, 16));
   }
-}), pt = { key: 0 }, vt = { class: "vf-panel__title" }, Wt = /* @__PURE__ */ D({
+}), At = { class: "vf-nav-menu__node" }, It = { class: "vf-nav-menu__item-content" }, Lt = { class: "vf-nav-menu__group-label" }, St = ["aria-expanded", "disabled"], zt = { class: "vf-nav-menu__item-content" }, Mt = {
+  key: 0,
+  class: "vf-nav-menu__leading-icon",
+  "aria-hidden": "true"
+}, Pt = { class: "vf-nav-menu__label" }, Nt = { class: "vf-nav-menu__item-content" }, Ft = {
+  key: 0,
+  class: "vf-nav-menu__leading-icon",
+  "aria-hidden": "true"
+}, Rt = { class: "vf-nav-menu__label" }, Ht = ["aria-current", "disabled"], Kt = { class: "vf-nav-menu__item-content" }, jt = {
+  key: 0,
+  class: "vf-nav-menu__leading-icon",
+  "aria-hidden": "true"
+}, qt = { class: "vf-nav-menu__label" }, Wt = {
+  key: 4,
+  class: "vf-nav-menu__list vf-nav-menu__list--nested"
+}, Ut = { class: "vf-nav-menu__list vf-nav-menu__list--nested" }, Yt = /* @__PURE__ */ L({
+  name: "VfNavMenuItemNode",
+  __name: "VfNavMenuItemNode",
+  props: {
+    item: {},
+    level: {},
+    parentPath: {},
+    activeValue: {},
+    expandedValues: {}
+  },
+  emits: ["toggle", "select"],
+  setup(t, { emit: n }) {
+    const e = t, i = n, l = s(() => {
+      var f;
+      return !!((f = e.item.children) != null && f.length);
+    }), r = s(() => e.item.kind === "group"), u = s(
+      () => e.expandedValues.includes(e.item.value)
+    ), p = s(() => e.activeValue === e.item.value), g = s(
+      () => e.item.href !== void 0 || e.item.to !== void 0
+    ), b = s(() => e.item.to !== void 0 ? re("RouterLink") : "a"), v = s(() => e.item.rel ? e.item.rel : e.item.target === "_blank" ? "noopener noreferrer" : void 0), E = s(() => e.item.to !== void 0 ? {
+      to: e.item.to,
+      target: e.item.target,
+      rel: v.value
+    } : {
+      href: e.item.href,
+      target: e.item.target,
+      rel: v.value
+    });
+    function V() {
+      e.item.disabled || i("toggle", {
+        value: e.item.value,
+        parentPath: e.parentPath
+      });
+    }
+    function w(f) {
+      if (e.item.disabled) {
+        f == null || f.preventDefault();
+        return;
+      }
+      i("select", e.item);
+    }
+    function I(f) {
+      const a = f;
+      return a.style.transition = "height var(--vf-motion-duration-normal) var(--vf-motion-ease-standard), opacity var(--vf-motion-duration-normal) var(--vf-motion-ease-standard)", a;
+    }
+    function S(f) {
+      const a = I(f);
+      a.style.overflow = "hidden", a.style.height = "0", a.style.opacity = "0";
+    }
+    function z(f) {
+      const a = I(f);
+      requestAnimationFrame(() => {
+        a.style.height = `${a.scrollHeight}px`, a.style.opacity = "1";
+      });
+    }
+    function d(f) {
+      const a = f;
+      a.style.transition = "", a.style.overflow = "", a.style.height = "", a.style.opacity = "";
+    }
+    function _(f) {
+      const a = I(f);
+      a.style.overflow = "hidden", a.style.height = `${a.scrollHeight}px`, a.style.opacity = "1";
+    }
+    function o(f) {
+      const a = f;
+      a.offsetHeight, requestAnimationFrame(() => {
+        a.style.height = "0", a.style.opacity = "0";
+      });
+    }
+    function y(f) {
+      const a = f;
+      a.style.transition = "", a.style.overflow = "", a.style.height = "", a.style.opacity = "";
+    }
+    return (f, a) => {
+      const C = He("VfNavMenuItemNode", !0);
+      return c(), m("li", At, [
+        r.value ? (c(), m("div", {
+          key: 0,
+          class: P(["vf-nav-menu__group", `vf-nav-menu__group--level-${t.level}`]),
+          style: W({ "--vf-nav-menu-level": String(t.level) })
+        }, [
+          T("span", It, [
+            T("span", Lt, F(t.item.label), 1)
+          ])
+        ], 6)) : l.value ? (c(), m("button", {
+          key: 1,
+          class: P([
+            "vf-nav-menu__item",
+            "vf-nav-menu__item--branch",
+            u.value && "vf-nav-menu__item--expanded"
+          ]),
+          style: W({ "--vf-nav-menu-level": String(t.level) }),
+          "aria-expanded": u.value,
+          disabled: t.item.disabled,
+          type: "button",
+          onClick: V
+        }, [
+          T("span", zt, [
+            t.item.leadingIcon ? (c(), m("span", Mt, [
+              j(h(te), {
+                icon: t.item.leadingIcon,
+                size: "1rem"
+              }, null, 8, ["icon"])
+            ])) : O("", !0),
+            T("span", Pt, F(t.item.label), 1)
+          ]),
+          T("span", {
+            class: P(["vf-nav-menu__icon", u.value && "vf-nav-menu__icon--open"]),
+            "aria-hidden": "true"
+          }, [
+            j(h(te), {
+              icon: h(X).chevronDown,
+              size: "0.875rem"
+            }, null, 8, ["icon"])
+          ], 2)
+        ], 14, St)) : g.value ? (c(), q(re(b.value), H({ key: 2 }, E.value, {
+          class: [
+            "vf-nav-menu__item",
+            p.value && "vf-nav-menu__item--active",
+            t.item.disabled && "vf-nav-menu__item--disabled"
+          ],
+          style: { "--vf-nav-menu-level": String(t.level) },
+          "aria-current": p.value ? "page" : void 0,
+          onClick: w
+        }), {
+          default: Q(() => [
+            T("span", Nt, [
+              t.item.leadingIcon ? (c(), m("span", Ft, [
+                j(h(te), {
+                  icon: t.item.leadingIcon,
+                  size: "1rem"
+                }, null, 8, ["icon"])
+              ])) : O("", !0),
+              T("span", Rt, F(t.item.label), 1)
+            ])
+          ]),
+          _: 1
+        }, 16, ["class", "style", "aria-current"])) : (c(), m("button", {
+          key: 3,
+          class: P([
+            "vf-nav-menu__item",
+            p.value && "vf-nav-menu__item--active",
+            t.item.disabled && "vf-nav-menu__item--disabled"
+          ]),
+          style: W({ "--vf-nav-menu-level": String(t.level) }),
+          "aria-current": p.value ? "page" : void 0,
+          disabled: t.item.disabled,
+          type: "button",
+          onClick: a[0] || (a[0] = (D) => w())
+        }, [
+          T("span", Kt, [
+            t.item.leadingIcon ? (c(), m("span", jt, [
+              j(h(te), {
+                icon: t.item.leadingIcon,
+                size: "1rem"
+              }, null, 8, ["icon"])
+            ])) : O("", !0),
+            T("span", qt, F(t.item.label), 1)
+          ])
+        ], 14, Ht)),
+        l.value && r.value ? (c(), m("ul", Wt, [
+          (c(!0), m(ue, null, ce(t.item.children, (D) => (c(), q(C, {
+            key: D.value,
+            item: D,
+            level: t.level + 1,
+            "parent-path": [...t.parentPath, t.item.value],
+            "active-value": t.activeValue,
+            "expanded-values": t.expandedValues,
+            onToggle: a[1] || (a[1] = (M) => i("toggle", M)),
+            onSelect: a[2] || (a[2] = (M) => i("select", M))
+          }, null, 8, ["item", "level", "parent-path", "active-value", "expanded-values"]))), 128))
+        ])) : l.value ? (c(), q(ne, {
+          key: 5,
+          onBeforeEnter: S,
+          onEnter: z,
+          onAfterEnter: d,
+          onBeforeLeave: _,
+          onLeave: o,
+          onAfterLeave: y
+        }, {
+          default: Q(() => [
+            u.value ? (c(), m("div", {
+              key: 0,
+              class: P([
+                "vf-nav-menu__collapse",
+                `vf-nav-menu__collapse--level-${t.level}`
+              ])
+            }, [
+              T("ul", Ut, [
+                (c(!0), m(ue, null, ce(t.item.children, (D) => (c(), q(C, {
+                  key: D.value,
+                  item: D,
+                  level: t.level + 1,
+                  "parent-path": [...t.parentPath, t.item.value],
+                  "active-value": t.activeValue,
+                  "expanded-values": t.expandedValues,
+                  onToggle: a[3] || (a[3] = (M) => i("toggle", M)),
+                  onSelect: a[4] || (a[4] = (M) => i("select", M))
+                }, null, 8, ["item", "level", "parent-path", "active-value", "expanded-values"]))), 128))
+              ])
+            ], 2)) : O("", !0)
+          ]),
+          _: 1
+        })) : O("", !0)
+      ]);
+    };
+  }
+}), Xt = ["aria-label"], Gt = { class: "vf-nav-menu__list" }, Sn = /* @__PURE__ */ L({
+  __name: "VfNavMenu",
+  props: {
+    items: {},
+    modelValue: { default: void 0 },
+    defaultValue: { default: void 0 },
+    ariaLabel: { default: "Navigation" },
+    expandMode: { default: "multiple" }
+  },
+  emits: ["update:modelValue", "change", "select"],
+  setup(t, { emit: n }) {
+    const e = t, i = n, l = A(e.defaultValue), r = s(() => e.modelValue ?? l.value), u = A([]);
+    function p(o, y) {
+      return o.some(
+        (f) => {
+          var a;
+          return y(f) || ((a = f.children) != null && a.length ? p(f.children, y) : !1);
+        }
+      );
+    }
+    const g = s(
+      () => p(e.items, (o) => o.kind === "group")
+    ), b = s(
+      () => p(e.items, (o) => !!o.leadingIcon)
+    ), v = s(() => !g.value && !b.value);
+    function E(o) {
+      var y;
+      return o.kind !== "group" && !!((y = o.children) != null && y.length);
+    }
+    function V(o, y, f = []) {
+      var a;
+      if (!y)
+        return [];
+      for (const C of o) {
+        if (C.value === y)
+          return f;
+        if ((a = C.children) != null && a.length) {
+          const D = V(C.children, y, [
+            ...f,
+            C.value
+          ]);
+          if (D.length)
+            return D;
+        }
+      }
+      return [];
+    }
+    function w() {
+      const o = V(e.items, r.value);
+      u.value = Array.from(
+        /* @__PURE__ */ new Set([...u.value, ...o])
+      );
+    }
+    function I(o, y) {
+      var D;
+      if (!y.length)
+        return o;
+      const [f, ...a] = y, C = o.find((M) => M.value === f);
+      return (D = C == null ? void 0 : C.children) != null && D.length ? I(C.children, a) : [];
+    }
+    function S(o) {
+      return o.flatMap((y) => {
+        var a;
+        const f = (a = y.children) != null && a.length ? S(y.children) : [];
+        return E(y) ? [y.value, ...f] : f;
+      });
+    }
+    function z(o) {
+      e.modelValue === void 0 && (l.value = o), i("update:modelValue", o), i("change", o);
+    }
+    function d(o) {
+      z(o.value), u.value = Array.from(
+        /* @__PURE__ */ new Set([
+          ...u.value,
+          ...V(e.items, o.value)
+        ])
+      ), i("select", o);
+    }
+    function _(o) {
+      const { value: y, parentPath: f } = o;
+      if (u.value.includes(y)) {
+        u.value = u.value.filter(
+          (a) => a !== y
+        );
+        return;
+      }
+      if (e.expandMode === "single") {
+        const C = I(e.items, f).filter((D) => D.value !== y && E(D)).flatMap((D) => S([D]));
+        u.value = u.value.filter(
+          (D) => !C.includes(D)
+        );
+      }
+      u.value = [...u.value, y];
+    }
+    return Z(
+      () => [e.items, r.value],
+      () => {
+        w();
+      },
+      { immediate: !0, deep: !0 }
+    ), (o, y) => (c(), m("nav", {
+      class: P(["vf-nav-menu", v.value && "vf-nav-menu--simple"]),
+      "aria-label": t.ariaLabel
+    }, [
+      T("ul", Gt, [
+        (c(!0), m(ue, null, ce(t.items, (f) => (c(), q(Yt, {
+          key: f.value,
+          item: f,
+          level: 0,
+          "parent-path": [],
+          "active-value": r.value,
+          "expanded-values": u.value,
+          onToggle: _,
+          onSelect: d
+        }, null, 8, ["item", "active-value", "expanded-values"]))), 128))
+      ])
+    ], 10, Xt));
+  }
+}), Qt = { key: 0 }, Jt = { class: "vf-panel__title" }, zn = /* @__PURE__ */ L({
   inheritAttrs: !1,
   __name: "VfPanel",
   props: {
     title: { default: void 0 },
     subtle: { type: Boolean, default: !1 }
   },
-  setup(o) {
-    const t = o, e = P(), s = r(() => S("vf-panel", t.subtle && "vf-panel--subtle"));
-    return (n, l) => (m(), h("section", F({ class: s.value }, c(e)), [
-      t.title || n.$slots.header ? (m(), h("header", pt, [
-        $(n.$slots, "header", {}, () => [
-          C("h3", vt, R(t.title), 1)
+  setup(t) {
+    const n = t, e = R(), i = s(
+      () => N("vf-panel", n.subtle && "vf-panel--subtle")
+    );
+    return (l, r) => (c(), m("section", H({ class: i.value }, h(e)), [
+      n.title || l.$slots.header ? (c(), m("header", Qt, [
+        B(l.$slots, "header", {}, () => [
+          T("h3", Jt, F(n.title), 1)
         ])
-      ])) : I("", !0),
-      $(n.$slots, "default")
+      ])) : O("", !0),
+      B(l.$slots, "default")
     ], 16));
   }
-}), mt = { class: "vf-popover" }, _t = ["id", "aria-controls", "aria-expanded"], ht = ["id", "aria-labelledby"], Ut = /* @__PURE__ */ D({
+}), Zt = { class: "vf-popover" }, en = ["id", "aria-controls", "aria-expanded"], tn = ["id", "aria-labelledby"], Mn = /* @__PURE__ */ L({
   __name: "VfPopover",
   props: {
     open: { type: Boolean, default: void 0 },
     defaultOpen: { type: Boolean, default: !1 },
     placement: { default: "bottom-start" },
+    teleportTo: { type: [String, null, Boolean], default: void 0 },
+    disableTeleport: { type: Boolean, default: !1 },
     closeOnOutsideClick: { type: Boolean, default: !0 },
     closeOnEscape: { type: Boolean, default: !0 }
   },
   emits: ["update:open", "openChange"],
-  setup(o, { emit: t }) {
-    const e = o, s = t, n = w(null), l = w(null), d = w(null), f = K({ prefix: "vf-popover-content" }), _ = K({ prefix: "vf-popover-trigger" }), b = Z({
+  setup(t, { emit: n }) {
+    const e = t, i = n, l = A(null), r = A(null), u = A(null), p = G({ prefix: "vf-popover-content" }), g = G({ prefix: "vf-popover-trigger" }), b = {
+      enter: U.fast,
+      leave: U.fast
+    }, v = s(
+      () => e.disableTeleport || e.teleportTo === !1 || e.teleportTo === null
+    ), E = s(() => typeof e.teleportTo == "string" || typeof HTMLElement < "u" && e.teleportTo instanceof HTMLElement ? e.teleportTo : "body"), V = se({
       defaultOpen: e.defaultOpen,
-      open: r(() => e.open),
-      onOpenChange: (v) => {
-        s("update:open", v), s("openChange", v);
+      open: s(() => e.open),
+      onOpenChange: (k) => {
+        i("update:open", k), i("openChange", k);
       }
-    }), u = b.isOpen, V = r(
+    }), w = V.isOpen, I = s(
       () => e.placement === "bottom-end" ? ["bottom-end", "top-end"] : ["bottom-start", "top-start"]
-    ), { placement: k, middlewareData: O, styles: y } = re(n, l, {
-      enabled: u,
-      placement: r(() => e.placement),
-      middleware: r(
-        () => [oe(10), ne({ placements: V.value }), ae(), d.value ? se(d.value) : void 0].filter(
-          (v) => v !== void 0
-        )
+    ), {
+      placement: S,
+      middlewareData: z,
+      styles: d
+    } = ye(l, r, {
+      enabled: w,
+      placement: s(() => e.placement),
+      middleware: s(
+        () => [
+          ve(10),
+          pe({ placements: I.value }),
+          me(),
+          u.value ? he(u.value) : void 0
+        ].filter((k) => k !== void 0)
       ),
       strategy: "fixed"
-    }), B = r(() => [
+    }), _ = s(() => [
       "vf-popover__content",
-      k.value.startsWith("top") && "vf-popover__content--top"
-    ]), x = r(() => {
-      const v = O.value.arrow;
+      S.value.startsWith("top") && "vf-popover__content--top"
+    ]), o = s(() => {
+      const k = z.value.arrow;
       return {
-        x: (v == null ? void 0 : v.x) !== void 0 && (v == null ? void 0 : v.baseX) !== void 0 ? v.x - v.baseX : 0,
-        y: (v == null ? void 0 : v.y) !== void 0 && (v == null ? void 0 : v.baseY) !== void 0 ? v.y - v.baseY : 0
+        x: (k == null ? void 0 : k.x) !== void 0 && (k == null ? void 0 : k.baseX) !== void 0 ? k.x - k.baseX : 0,
+        y: (k == null ? void 0 : k.y) !== void 0 && (k == null ? void 0 : k.baseY) !== void 0 ? k.y - k.baseY : 0
       };
-    }), p = r(() => ({
-      left: `${x.value.x}px`,
-      top: `${x.value.y}px`
-    })), E = r(() => [
+    }), y = s(() => ({
+      left: `${o.value.x}px`,
+      top: `${o.value.y}px`
+    })), f = s(() => [
       "vf-popover__arrow",
-      k.value.startsWith("top") ? "vf-popover__arrow--top" : "vf-popover__arrow--bottom"
+      S.value.startsWith("top") ? "vf-popover__arrow--top" : "vf-popover__arrow--bottom"
     ]);
     async function a() {
-      var Y, j;
-      await G();
-      const v = (Y = l.value) == null ? void 0 : Y.querySelector("[autofocus], [data-autofocus]");
-      if (v) {
-        v.focus();
+      var J, ie;
+      await ae();
+      const k = (J = r.value) == null ? void 0 : J.querySelector(
+        "[autofocus], [data-autofocus]"
+      );
+      if (k) {
+        k.focus();
         return;
       }
-      (j = l.value) == null || j.focus();
+      (ie = r.value) == null || ie.focus();
     }
-    function T() {
-      b.open(), a();
+    function C() {
+      V.open(), a();
     }
-    function g() {
-      var v;
-      b.close(), (v = n.value) == null || v.focus();
+    function D() {
+      var k;
+      V.close(), (k = l.value) == null || k.focus();
     }
-    function L() {
-      if (u.value) {
-        g();
+    function M() {
+      if (w.value) {
+        D();
         return;
       }
-      T();
+      C();
     }
-    function q(v) {
-      (v.key === "Enter" || v.key === " ") && (v.preventDefault(), L()), v.key === "ArrowDown" && (v.preventDefault(), T());
+    function x(k) {
+      (k.key === "Enter" || k.key === " ") && (k.preventDefault(), M()), k.key === "ArrowDown" && (k.preventDefault(), C());
     }
-    return he(
-      [n, l],
+    return Oe(
+      [l, r],
       () => {
-        u.value && e.closeOnOutsideClick && g();
+        w.value && e.closeOnOutsideClick && D();
       },
       {
-        enabled: u,
+        enabled: w,
         event: "click"
       }
-    ), le(
-      (v) => {
-        !u.value || !e.closeOnEscape || (v.preventDefault(), g());
+    ), fe(
+      (k) => {
+        !w.value || !e.closeOnEscape || (k.preventDefault(), D());
       },
       {
-        enabled: u
+        enabled: w
       }
-    ), (v, Y) => (m(), h("div", mt, [
-      C("div", {
-        id: c(_),
+    ), (k, J) => (c(), m("div", Zt, [
+      T("div", {
+        id: h(g),
         ref_key: "triggerRef",
-        ref: n,
+        ref: l,
         class: "vf-popover__trigger",
-        "aria-controls": c(f),
-        "aria-expanded": c(u),
+        "aria-controls": h(p),
+        "aria-expanded": h(w),
         "aria-haspopup": "dialog",
         tabindex: "0",
-        onClick: L,
-        onKeydown: q
+        onClick: M,
+        onKeydown: x
       }, [
-        $(v.$slots, "trigger", {
-          open: c(u),
-          toggle: L
+        B(k.$slots, "trigger", {
+          open: h(w),
+          toggle: M
         })
-      ], 40, _t),
-      (m(), X(J, { to: "body" }, [
-        c(u) ? (m(), h("section", {
-          key: 0,
-          id: c(f),
-          ref_key: "contentRef",
-          ref: l,
-          class: M(B.value),
-          style: U(c(y)),
-          "aria-labelledby": c(_),
-          role: "dialog",
-          tabindex: "-1"
-        }, [
-          C("span", {
-            ref_key: "arrowRef",
-            ref: d,
-            class: M(E.value),
-            style: U(p.value),
-            "aria-hidden": "true"
-          }, null, 6),
-          $(v.$slots, "default", {
-            open: c(u),
-            close: g
-          })
-        ], 14, ht)) : I("", !0)
-      ]))
+      ], 40, en),
+      (c(), q(le, {
+        to: E.value,
+        disabled: v.value
+      }, [
+        j(ne, {
+          name: "vf-floating-transition",
+          appear: "",
+          duration: b
+        }, {
+          default: Q(() => [
+            h(w) ? (c(), m("section", {
+              key: 0,
+              id: h(p),
+              ref_key: "contentRef",
+              ref: r,
+              class: P(_.value),
+              style: W(h(d)),
+              "aria-labelledby": h(g),
+              role: "dialog",
+              tabindex: "-1"
+            }, [
+              T("span", {
+                ref_key: "arrowRef",
+                ref: u,
+                class: P(f.value),
+                style: W(y.value),
+                "aria-hidden": "true"
+              }, null, 6),
+              B(k.$slots, "default", {
+                open: h(w),
+                close: D
+              })
+            ], 14, tn)) : O("", !0)
+          ]),
+          _: 3
+        })
+      ], 8, ["to", "disabled"]))
     ]));
   }
-}), Yt = /* @__PURE__ */ D({
+}), nn = ["checked", "disabled", "value", "aria-invalid"], an = {
+  key: 0,
+  class: "vf-radio__content"
+}, Pn = /* @__PURE__ */ L({
+  inheritAttrs: !1,
+  __name: "VfRadio",
+  props: {
+    modelValue: { type: [String, Number, Boolean], default: void 0 },
+    value: { type: [String, Number, Boolean] },
+    size: { default: "md" },
+    invalid: { type: Boolean, default: !1 },
+    disabled: { type: Boolean, default: !1 },
+    label: { default: void 0 }
+  },
+  emits: ["update:modelValue", "change"],
+  setup(t, { emit: n }) {
+    const e = t, i = n, l = R(), r = s(() => e.modelValue === e.value), u = s(
+      () => N(
+        "vf-radio",
+        `vf-radio--${e.size}`,
+        r.value && "vf-radio--checked",
+        e.invalid && "vf-radio--invalid",
+        e.disabled && "vf-radio--disabled",
+        l.class
+      )
+    ), p = s(() => l.style), g = s(
+      () => Object.fromEntries(
+        Object.entries(l).filter(([v]) => v !== "class" && v !== "style")
+      )
+    );
+    function b(v) {
+      v.target.checked && (i("update:modelValue", e.value), i("change", e.value));
+    }
+    return (v, E) => (c(), m("label", {
+      class: P(u.value),
+      style: W(p.value)
+    }, [
+      T("input", H({
+        class: "vf-radio__input",
+        type: "radio",
+        checked: r.value,
+        disabled: e.disabled,
+        value: e.value,
+        "aria-invalid": e.invalid || void 0
+      }, g.value, { onChange: b }), null, 16, nn),
+      E[0] || (E[0] = T("span", {
+        class: "vf-radio__control",
+        "aria-hidden": "true"
+      }, [
+        T("span", { class: "vf-radio__dot" })
+      ], -1)),
+      t.label || v.$slots.default ? (c(), m("span", an, [
+        B(v.$slots, "default", {}, () => [
+          oe(F(t.label), 1)
+        ])
+      ])) : O("", !0)
+    ], 6));
+  }
+}), on = ["checked", "disabled"], ln = {
+  key: 0,
+  class: "vf-switch__content"
+}, Nn = /* @__PURE__ */ L({
+  inheritAttrs: !1,
+  __name: "VfSwitch",
+  props: {
+    modelValue: { type: Boolean, default: !1 },
+    size: { default: "md" },
+    disabled: { type: Boolean, default: !1 },
+    label: { default: void 0 }
+  },
+  emits: ["update:modelValue", "change"],
+  setup(t, { emit: n }) {
+    const e = t, i = n, l = R(), r = s(
+      () => N(
+        "vf-switch",
+        `vf-switch--${e.size}`,
+        e.modelValue && "vf-switch--checked",
+        e.disabled && "vf-switch--disabled",
+        l.class
+      )
+    ), u = s(() => l.style), p = s(
+      () => Object.fromEntries(
+        Object.entries(l).filter(([b]) => b !== "class" && b !== "style")
+      )
+    );
+    function g(b) {
+      const v = b.target.checked;
+      i("update:modelValue", v), i("change", v);
+    }
+    return (b, v) => (c(), m("label", {
+      class: P(r.value),
+      style: W(u.value)
+    }, [
+      T("input", H({
+        class: "vf-switch__input",
+        type: "checkbox",
+        role: "switch",
+        checked: e.modelValue,
+        disabled: e.disabled
+      }, p.value, { onChange: g }), null, 16, on),
+      v[0] || (v[0] = T("span", {
+        class: "vf-switch__control",
+        "aria-hidden": "true"
+      }, [
+        T("span", { class: "vf-switch__thumb" })
+      ], -1)),
+      t.label || b.$slots.default ? (c(), m("span", ln, [
+        B(b.$slots, "default", {}, () => [
+          oe(F(t.label), 1)
+        ])
+      ])) : O("", !0)
+    ], 6));
+  }
+}), Fn = /* @__PURE__ */ L({
   inheritAttrs: !1,
   __name: "VfTag",
   props: {
     tone: { default: "neutral" }
   },
-  setup(o) {
-    const t = o, e = P(), s = r(
-      () => S("vf-tag", t.tone !== "neutral" && `vf-tag--${t.tone}`)
+  setup(t) {
+    const n = t, e = R(), i = s(
+      () => N("vf-tag", n.tone !== "neutral" && `vf-tag--${n.tone}`)
     );
-    return (n, l) => (m(), h("span", F({ class: s.value }, c(e)), [
-      $(n.$slots, "default")
+    return (l, r) => (c(), m("span", H({ class: i.value }, h(e)), [
+      B(l.$slots, "default")
     ], 16));
   }
-}), yt = { class: "vf-tabs" }, bt = {
+}), sn = { class: "vf-tabs" }, rn = {
   class: "vf-tabs__list",
   role: "tablist",
   "aria-orientation": "horizontal"
-}, gt = ["id", "aria-controls", "aria-selected", "disabled", "tabindex", "onClick", "onKeydown"], $t = ["id", "aria-labelledby"], Ht = /* @__PURE__ */ D({
+}, un = ["id", "aria-controls", "aria-selected", "disabled", "tabindex", "onClick", "onKeydown"], cn = ["id", "aria-labelledby"], Rn = /* @__PURE__ */ L({
   __name: "VfTabs",
   props: {
     items: {},
@@ -938,99 +1803,107 @@ const Ne = {
     defaultValue: { default: void 0 }
   },
   emits: ["update:modelValue", "change"],
-  setup(o, { emit: t }) {
-    const e = o, s = t, n = K({ prefix: "vf-tabs" }), l = w([]), d = r(() => {
-      var p;
-      return (p = e.items.find((E) => !E.disabled)) == null ? void 0 : p.value;
-    }), f = w(e.defaultValue ?? d.value), _ = r(() => e.modelValue !== void 0), b = r(() => e.modelValue ?? f.value ?? d.value);
-    W(
+  setup(t, { emit: n }) {
+    const e = t, i = n, l = G({ prefix: "vf-tabs" }), r = A([]), u = s(
+      () => {
+        var d;
+        return (d = e.items.find((_) => !_.disabled)) == null ? void 0 : d.value;
+      }
+    ), p = A(e.defaultValue ?? u.value), g = s(() => e.modelValue !== void 0), b = s(
+      () => e.modelValue ?? p.value ?? u.value
+    );
+    Z(
       () => e.items,
-      (p) => {
-        !p.some((a) => a.value === b.value && !a.disabled) && d.value && u(d.value);
+      (d) => {
+        !d.some(
+          (o) => o.value === b.value && !o.disabled
+        ) && u.value && v(u.value);
       },
       { deep: !0 }
     );
-    function u(p) {
-      _.value || (f.value = p), s("update:modelValue", p), s("change", p);
+    function v(d) {
+      g.value || (p.value = d), i("update:modelValue", d), i("change", d);
     }
-    function V(p) {
-      p.disabled || u(p.value);
+    function E(d) {
+      d.disabled || v(d.value);
     }
-    function k() {
-      return e.items.filter((p) => !p.disabled);
+    function V() {
+      return e.items.filter((d) => !d.disabled);
     }
-    function O(p) {
-      var a;
-      const E = e.items.findIndex((T) => T.value === p);
-      (a = l.value[E]) == null || a.focus();
-    }
-    function y(p, E) {
-      const a = k(), T = a.findIndex((g) => g.value === E.value);
-      if (T !== -1) {
-        if (p.key === "ArrowRight" || p.key === "ArrowDown") {
-          p.preventDefault();
-          const g = a[(T + 1) % a.length];
-          V(g), O(g.value);
+    function w(d) {
+      var o;
+      const _ = e.items.findIndex((y) => y.value === d);
+      (o = r.value[_]) == null || o.focus();
+    }
+    function I(d, _) {
+      const o = V(), y = o.findIndex(
+        (f) => f.value === _.value
+      );
+      if (y !== -1) {
+        if (d.key === "ArrowRight" || d.key === "ArrowDown") {
+          d.preventDefault();
+          const f = o[(y + 1) % o.length];
+          E(f), w(f.value);
           return;
         }
-        if (p.key === "ArrowLeft" || p.key === "ArrowUp") {
-          p.preventDefault();
-          const g = a[(T - 1 + a.length) % a.length];
-          V(g), O(g.value);
+        if (d.key === "ArrowLeft" || d.key === "ArrowUp") {
+          d.preventDefault();
+          const f = o[(y - 1 + o.length) % o.length];
+          E(f), w(f.value);
           return;
         }
-        if (p.key === "Home") {
-          p.preventDefault();
-          const g = a[0];
-          V(g), O(g.value);
+        if (d.key === "Home") {
+          d.preventDefault();
+          const f = o[0];
+          E(f), w(f.value);
           return;
         }
-        if (p.key === "End") {
-          p.preventDefault();
-          const g = a[a.length - 1];
-          V(g), O(g.value);
+        if (d.key === "End") {
+          d.preventDefault();
+          const f = o[o.length - 1];
+          E(f), w(f.value);
         }
       }
     }
-    function B(p) {
-      return `${n.value}-tab-${p}`;
+    function S(d) {
+      return `${l.value}-tab-${d}`;
     }
-    function x(p) {
-      return `${n.value}-panel-${p}`;
+    function z(d) {
+      return `${l.value}-panel-${d}`;
     }
-    return (p, E) => (m(), h("div", yt, [
-      C("div", bt, [
-        (m(!0), h(Ce, null, Oe(o.items, (a, T) => (m(), h("button", {
-          id: B(a.value),
-          key: a.value,
+    return (d, _) => (c(), m("div", sn, [
+      T("div", rn, [
+        (c(!0), m(ue, null, ce(t.items, (o, y) => (c(), m("button", {
+          id: S(o.value),
+          key: o.value,
           ref_for: !0,
-          ref: (g) => {
-            l.value[T] = g;
+          ref: (f) => {
+            r.value[y] = f;
           },
-          "aria-controls": x(a.value),
-          "aria-selected": b.value === a.value,
-          disabled: a.disabled,
-          tabindex: b.value === a.value ? 0 : -1,
+          "aria-controls": z(o.value),
+          "aria-selected": b.value === o.value,
+          disabled: o.disabled,
+          tabindex: b.value === o.value ? 0 : -1,
           class: "vf-tabs__tab",
           role: "tab",
           type: "button",
-          onClick: (g) => V(a),
-          onKeydown: (g) => y(g, a)
-        }, R(a.label), 41, gt))), 128))
+          onClick: (f) => E(o),
+          onKeydown: (f) => I(f, o)
+        }, F(o.label), 41, un))), 128))
       ]),
-      b.value ? (m(), h("div", {
+      b.value ? (c(), m("div", {
         key: 0,
-        id: x(b.value),
-        "aria-labelledby": B(b.value),
+        id: z(b.value),
+        "aria-labelledby": S(b.value),
         class: "vf-tabs__panel",
         role: "tabpanel",
         tabindex: "0"
       }, [
-        $(p.$slots, "panel", De(Ie({ activeValue: b.value })))
-      ], 8, $t)) : I("", !0)
+        B(d.$slots, "panel", Ve(xe({ activeValue: b.value })))
+      ], 8, cn)) : O("", !0)
     ]));
   }
-}), wt = ["value", "aria-invalid"], Xt = /* @__PURE__ */ D({
+}), dn = ["value", "aria-invalid"], Hn = /* @__PURE__ */ L({
   inheritAttrs: !1,
   __name: "VfTextarea",
   props: {
@@ -1039,149 +1912,175 @@ const Ne = {
     invalid: { type: Boolean, default: !1 }
   },
   emits: ["update:modelValue"],
-  setup(o, { emit: t }) {
-    const e = o, s = t, n = P(), l = r(
-      () => S(
+  setup(t, { emit: n }) {
+    const e = t, i = n, l = R(), r = s(
+      () => N(
         "vf-textarea",
         e.size !== "md" && `vf-textarea--${e.size}`,
         e.invalid && "vf-textarea--invalid"
       )
     );
-    function d(f) {
-      s("update:modelValue", f.target.value);
+    function u(p) {
+      i("update:modelValue", p.target.value);
     }
-    return (f, _) => (m(), h("textarea", F({
-      class: l.value,
+    return (p, g) => (c(), m("textarea", H({
+      class: r.value,
       value: e.modelValue,
       "aria-invalid": e.invalid || void 0
-    }, c(n), { onInput: d }), null, 16, wt));
+    }, h(l), { onInput: u }), null, 16, dn));
   }
-}), kt = ["aria-describedby"], Vt = ["id"], qt = /* @__PURE__ */ D({
+}), fn = ["aria-describedby"], vn = ["id"], Kn = /* @__PURE__ */ L({
   __name: "VfTooltip",
   props: {
     text: { default: void 0 },
     placement: { default: "top" },
-    openDelay: { default: 80 }
+    openDelay: { default: 80 },
+    teleportTo: { type: [String, null, Boolean], default: void 0 },
+    disableTeleport: { type: Boolean, default: !1 }
   },
-  setup(o) {
-    const t = o, e = w(!1), s = K({ prefix: "vf-tooltip" }), n = w(null), l = w(null), d = w(null), f = w(null), { placement: _, middlewareData: b, styles: u, cleanup: V } = re(
-      l,
-      d,
-      {
-        enabled: e,
-        placement: r(() => t.placement),
-        middleware: r(
-          () => [oe(10), ne({ placements: ["top", "bottom"] }), ae(), f.value ? se(f.value) : void 0].filter(
-            (a) => a !== void 0
-          )
-        ),
-        strategy: "fixed"
-      }
-    ), k = r(
-      () => [
-        "vf-tooltip__content",
-        _.value.startsWith("bottom") && "vf-tooltip__content--bottom",
-        _.value.startsWith("top") && "vf-tooltip__content--top"
-      ]
-    ), O = r(() => {
-      const a = b.value.arrow;
+  setup(t) {
+    const n = t, e = A(!1), i = G({ prefix: "vf-tooltip" }), l = A(null), r = A(null), u = A(null), p = A(null), g = {
+      enter: U.fast,
+      leave: U.fast
+    }, b = s(
+      () => n.disableTeleport || n.teleportTo === !1 || n.teleportTo === null
+    ), v = s(() => typeof n.teleportTo == "string" || typeof HTMLElement < "u" && n.teleportTo instanceof HTMLElement ? n.teleportTo : "body"), {
+      placement: E,
+      middlewareData: V,
+      styles: w,
+      cleanup: I
+    } = ye(r, u, {
+      enabled: e,
+      placement: s(() => n.placement),
+      middleware: s(
+        () => [
+          ve(10),
+          pe({ placements: ["top", "bottom"] }),
+          me(),
+          p.value ? he(p.value) : void 0
+        ].filter((a) => a !== void 0)
+      ),
+      strategy: "fixed"
+    }), S = s(() => [
+      "vf-tooltip__content",
+      E.value.startsWith("bottom") && "vf-tooltip__content--bottom",
+      E.value.startsWith("top") && "vf-tooltip__content--top"
+    ]), z = s(() => {
+      const a = V.value.arrow;
       return {
         x: (a == null ? void 0 : a.x) !== void 0 && (a == null ? void 0 : a.baseX) !== void 0 ? a.x - a.baseX : 0,
         y: (a == null ? void 0 : a.y) !== void 0 && (a == null ? void 0 : a.baseY) !== void 0 ? a.y - a.baseY : 0
       };
-    }), y = r(() => ["vf-tooltip__arrow"]), B = r(() => ({
-      left: `${O.value.x}px`,
-      top: `${O.value.y}px`
+    }), d = s(() => ["vf-tooltip__arrow"]), _ = s(() => ({
+      left: `${z.value.x}px`,
+      top: `${z.value.y}px`
     }));
-    function x() {
-      n.value !== null && (window.clearTimeout(n.value), n.value = null);
+    function o() {
+      l.value !== null && (window.clearTimeout(l.value), l.value = null);
     }
-    function p() {
-      x(), n.value = window.setTimeout(() => {
+    function y() {
+      o(), l.value = window.setTimeout(() => {
         e.value = !0;
-      }, t.openDelay);
+      }, n.openDelay);
     }
-    function E() {
-      x(), e.value = !1;
+    function f() {
+      o(), e.value = !1;
     }
-    return N(() => {
-      x(), V();
-    }), (a, T) => (m(), h("span", {
+    return ee(() => {
+      o(), I();
+    }), (a, C) => (c(), m("span", {
       class: "vf-tooltip",
-      onMouseenter: p,
-      onMouseleave: E,
-      onFocusin: p,
-      onFocusout: E
+      onMouseenter: y,
+      onMouseleave: f,
+      onFocusin: y,
+      onFocusout: f
     }, [
-      C("span", {
+      T("span", {
         ref_key: "triggerRef",
-        ref: l,
+        ref: r,
         class: "vf-tooltip__trigger",
-        "aria-describedby": e.value ? c(s) : void 0
+        "aria-describedby": e.value ? h(i) : void 0
       }, [
-        $(a.$slots, "default")
-      ], 8, kt),
-      (m(), X(J, { to: "body" }, [
-        e.value && (o.text || a.$slots.content) ? (m(), h("span", {
-          key: 0,
-          id: c(s),
-          ref_key: "contentRef",
-          ref: d,
-          class: M(k.value),
-          style: U(c(u)),
-          role: "tooltip"
-        }, [
-          $(a.$slots, "content", {}, () => [
-            ve(R(o.text), 1)
+        B(a.$slots, "default")
+      ], 8, fn),
+      (c(), q(le, {
+        to: v.value,
+        disabled: b.value
+      }, [
+        j(ne, {
+          name: "vf-floating-transition",
+          appear: "",
+          duration: g
+        }, {
+          default: Q(() => [
+            e.value && (t.text || a.$slots.content) ? (c(), m("span", {
+              key: 0,
+              id: h(i),
+              ref_key: "contentRef",
+              ref: u,
+              class: P(S.value),
+              style: W(h(w)),
+              role: "tooltip"
+            }, [
+              B(a.$slots, "content", {}, () => [
+                oe(F(t.text), 1)
+              ]),
+              T("span", {
+                ref_key: "arrowRef",
+                ref: p,
+                class: P(d.value),
+                style: W(_.value),
+                "aria-hidden": "true"
+              }, null, 6)
+            ], 14, vn)) : O("", !0)
           ]),
-          C("span", {
-            ref_key: "arrowRef",
-            ref: f,
-            class: M(y.value),
-            style: U(B.value),
-            "aria-hidden": "true"
-          }, null, 6)
-        ], 14, Vt)) : I("", !0)
-      ]))
+          _: 3
+        })
+      ], 8, ["to", "disabled"]))
     ], 32));
   }
 });
 export {
-  At as VfAccordion,
-  St as VfAlert,
-  zt as VfBadge,
-  Pt as VfButton,
-  Ft as VfCard,
-  Kt as VfDialog,
-  Lt as VfDivider,
-  Rt as VfDropdown,
-  Je as VfIconButton,
-  Mt as VfInput,
-  Nt as VfLink,
-  Wt as VfPanel,
-  Ut as VfPopover,
-  Ht as VfTabs,
-  Yt as VfTag,
-  Xt as VfTextarea,
-  Et as VfThemeProvider,
-  qt as VfTooltip,
-  It as VueForge,
-  Gt as createThemePreset,
-  Se as createVueForge,
-  It as default,
-  Jt as defaultThemePreset,
-  eo as toMaxWidthQuery,
-  to as toMinWidthQuery,
-  oo as useBreakpoint,
-  no as useBreakpointValue,
-  ao as useBreakpoints,
-  he as useClickOutside,
-  Z as useDisclosure,
-  le as useEscapeKey,
-  re as useFloating,
-  Fe as useFocusTrap,
-  K as useId,
-  Ee as useScrollLock,
-  Bt as useTheme,
-  so as vfBreakpoints
+  wn as VfAccordion,
+  Tn as VfAlert,
+  Vn as VfBadge,
+  xn as VfButton,
+  Cn as VfCard,
+  Bn as VfCheckbox,
+  On as VfDialog,
+  Dn as VfDivider,
+  En as VfDrawer,
+  An as VfDropdown,
+  Ae as VfIconButton,
+  In as VfInput,
+  Ln as VfLink,
+  Sn as VfNavMenu,
+  zn as VfPanel,
+  Mn as VfPopover,
+  Pn as VfRadio,
+  Nn as VfSwitch,
+  Rn as VfTabs,
+  Fn as VfTag,
+  Hn as VfTextarea,
+  $n as VfThemeProvider,
+  Kn as VfTooltip,
+  bn as VueForge,
+  Wn as createThemePreset,
+  Ue as createVueForge,
+  bn as default,
+  Fe as defaultThemePreset,
+  Yn as toMaxWidthQuery,
+  Xn as toMinWidthQuery,
+  Gn as useBreakpoint,
+  Qn as useBreakpointValue,
+  Jn as useBreakpoints,
+  Oe as useClickOutside,
+  se as useDisclosure,
+  fe as useEscapeKey,
+  ye as useFloating,
+  De as useFocusTrap,
+  G as useId,
+  Ce as useScrollLock,
+  kn as useTheme,
+  Zn as vfBreakpoints
 };