@codemonster-ru/vueforge-core 1.7.0 → 1.9.0

package/dist/vueforge-core.js

@@ -1,28 +1,28 @@
-import { r as Se, a as De } from "./utils-T2JkaeUr.js";
-import { c as oa, d as la } from "./utils-T2JkaeUr.js";
-import { defineComponent as S, inject as Te, computed as l, ref as I, watch as J, onMounted as re, onBeforeUnmount as te, provide as ze, renderSlot as C, toValue as K, nextTick as ne, onUnmounted as Me, openBlock as c, createElementBlock as _, createElementVNode as x, unref as h, toDisplayString as F, normalizeClass as R, createVNode as q, Transition as oe, withCtx as U, createCommentVNode as O, useAttrs as N, mergeProps as H, createTextVNode as le, normalizeStyle as Y, useSlots as fe, createBlock as j, Teleport as ue, resolveDynamicComponent as ae, normalizeProps as Ve, guardReactiveProps as xe, resolveComponent as Pe, Fragment as se, renderList as ie, Comment as Ne, Text as He } from "vue";
-import { resolveTheme as Re, DEFAULT_STORAGE_KEY as Fe, DEFAULT_ATTRIBUTE as Ke, isThemeMode as je, vfMotionDurationsMs as X } from "@codemonster-ru/vueforge-theme";
-import { d as Ce } from "./useScrollLock-FYdn9vRp.js";
-import { t as ia, a as ra, u as ua, b as ca, c as da, v as fa } from "./useScrollLock-FYdn9vRp.js";
-import { VueIconify as ee, icons as W } from "@codemonster-ru/vueiconify";
-import { autoUpdate as qe, computePosition as Ue, offset as pe, flip as me, shift as he, arrow as _e } from "@codemonster-ru/floater.js";
-const Be = Symbol("VueForgeConfig");
-function We() {
+import { r as ze, a as Pe } from "./utils-CsZ7hQHm.js";
+import { c as za, d as Pa } from "./utils-CsZ7hQHm.js";
+import { defineComponent as M, inject as xe, computed as a, ref as A, watch as ne, onMounted as me, onBeforeUnmount as se, provide as Re, renderSlot as O, toValue as X, nextTick as le, onUnmounted as Fe, openBlock as d, createElementBlock as _, createElementVNode as V, unref as y, toDisplayString as F, normalizeClass as P, createVNode as H, Transition as de, withCtx as G, createCommentVNode as E, useAttrs as j, mergeProps as N, createTextVNode as ve, Fragment as re, renderList as ue, createBlock as q, resolveDynamicComponent as fe, normalizeStyle as U, useSlots as ye, Teleport as he, normalizeProps as Be, guardReactiveProps as Ie, resolveComponent as Ee, Comment as He, Text as Ne } from "vue";
+import { DEFAULT_STORAGE_KEY as Ke, DEFAULT_ATTRIBUTE as je, resolveTheme as qe, isThemeMode as We, vfMotionDurationsMs as Z } from "@codemonster-ru/vueforge-theme";
+import { d as Ae } from "./useScrollLock-FYdn9vRp.js";
+import { t as Fa, a as Ha, u as Na, b as Ka, c as ja, v as qa } from "./useScrollLock-FYdn9vRp.js";
+import { VueIconify as J, icons as W } from "@codemonster-ru/vueiconify";
+import { autoUpdate as Ue, computePosition as Xe, offset as ge, flip as we, shift as ke, arrow as Ve } from "@codemonster-ru/floater.js";
+const Oe = Symbol("VueForgeConfig");
+function Ye() {
   return {
     install(n, e = {}) {
-      const i = Se(e.theme);
-      n.provide(Be, {
-        theme: i,
+      const l = ze(e.theme);
+      n.provide(Oe, {
+        theme: l,
         themeMode: {
           defaultTheme: e.defaultTheme,
           storageKey: e.themeStorageKey,
           attribute: e.themeAttribute
         }
-      }), typeof document < "u" && De(i);
+      }), typeof document < "u" && Pe(l);
     }
   };
 }
-const Bn = We(), Ee = Symbol("VfThemeContext"), En = /* @__PURE__ */ S({
+const sa = Ye(), Le = Symbol("VfThemeContext"), ia = /* @__PURE__ */ M({
   __name: "VfThemeProvider",
   props: {
     defaultTheme: {},
@@ -30,167 +30,171 @@ const Bn = We(), Ee = Symbol("VfThemeContext"), En = /* @__PURE__ */ S({
     attribute: {}
   },
   setup(t) {
-    const n = t, e = Te(Be, null), i = l(
+    const n = t, e = xe(Oe, null), l = a(
       () => n.defaultTheme ?? (e == null ? void 0 : e.themeMode.defaultTheme) ?? "system"
-    ), a = I(i.value), r = I("light"), u = I(null), v = l(
-      () => Re(a.value, r.value)
-    ), f = l(
-      () => n.storageKey ?? (e == null ? void 0 : e.themeMode.storageKey) ?? (e == null ? void 0 : e.theme.options.storageKey) ?? Fe
-    ), b = l(
-      () => n.attribute ?? (e == null ? void 0 : e.themeMode.attribute) ?? (e == null ? void 0 : e.theme.options.attribute) ?? Ke
-    ), d = I(!1);
-    let T = null;
-    function g() {
+    ), o = a(
+      () => n.storageKey ?? (e == null ? void 0 : e.themeMode.storageKey) ?? (e == null ? void 0 : e.theme.options.storageKey) ?? Ke
+    ), i = a(
+      () => n.attribute ?? (e == null ? void 0 : e.themeMode.attribute) ?? (e == null ? void 0 : e.theme.options.attribute) ?? je
+    );
+    function r() {
       if (typeof window > "u")
-        return;
-      const m = window.localStorage.getItem(f.value);
-      je(m) && (a.value = m);
+        return l.value;
+      const u = window.localStorage.getItem(o.value);
+      return We(u) ? u : l.value;
     }
-    function V() {
-      T !== null && (window.clearTimeout(T), T = null);
+    function g() {
+      return typeof window > "u" ? "light" : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+    }
+    const v = A(r()), T = A(g()), p = A(null), c = a(
+      () => qe(v.value, T.value)
+    ), m = A(!1);
+    let h = null;
+    function x() {
+      h !== null && (window.clearTimeout(h), h = null);
     }
-    function A(m, o = {}) {
+    function L(u, w = {}) {
       if (typeof document > "u")
         return;
-      const y = document.documentElement;
-      o.animate && (V(), y.classList.add("vf-theme-transitioning")), y.setAttribute(b.value, m), o.animate && (T = window.setTimeout(() => {
-        y.classList.remove("vf-theme-transitioning"), T = null;
+      const B = document.documentElement;
+      w.animate && (x(), B.classList.add("vf-theme-transitioning")), B.setAttribute(i.value, u), w.animate && (h = window.setTimeout(() => {
+        B.classList.remove("vf-theme-transitioning"), h = null;
       }, 320));
     }
-    function D(m) {
-      var o;
-      if (m) {
-        r.value = m.matches ? "dark" : "light";
+    function D(u) {
+      var w;
+      if (u) {
+        T.value = u.matches ? "dark" : "light";
         return;
       }
-      r.value = (o = u.value) != null && o.matches ? "dark" : "light";
+      T.value = (w = p.value) != null && w.matches ? "dark" : "light";
     }
-    function z(m) {
-      a.value = m;
+    function R(u) {
+      v.value = u;
     }
-    function k() {
-      const m = v.value === "dark" ? "light" : "dark";
-      a.value = m;
-    }
-    return J(a, (m) => {
-      typeof window > "u" || window.localStorage.setItem(f.value, m);
-    }), J(
-      v,
-      (m) => {
-        A(m, { animate: d.value });
+    function I() {
+      const u = c.value === "dark" ? "light" : "dark";
+      v.value = u;
+    }
+    return ne(v, (u) => {
+      typeof window > "u" || window.localStorage.setItem(o.value, u);
+    }), ne(
+      c,
+      (u) => {
+        L(u, { animate: m.value });
       },
       { immediate: !0 }
-    ), re(() => {
-      a.value = i.value, g(), u.value = window.matchMedia("(prefers-color-scheme: dark)"), D(), u.value.addEventListener("change", D), d.value = !0;
-    }), te(() => {
-      var m;
-      (m = u.value) == null || m.removeEventListener("change", D), V();
-    }), ze(Ee, {
-      mode: a,
-      resolvedTheme: v,
-      setTheme: z,
-      toggleTheme: k
-    }), (m, o) => C(m.$slots, "default");
+    ), me(() => {
+      p.value = window.matchMedia("(prefers-color-scheme: dark)"), D(), p.value.addEventListener("change", D), m.value = !0;
+    }), se(() => {
+      var u;
+      (u = p.value) == null || u.removeEventListener("change", D), x();
+    }), Re(Le, {
+      mode: v,
+      resolvedTheme: c,
+      setTheme: R,
+      toggleTheme: I
+    }), (u, w) => O(u.$slots, "default");
   }
 });
-function Oe(t, n, e = {}) {
-  const i = e.event ?? "pointerdown", a = (r) => {
-    if (K(e.enabled) === !1)
+function $e(t, n, e = {}) {
+  const l = e.event ?? "pointerdown", o = (i) => {
+    if (X(e.enabled) === !1)
       return;
-    const u = r.target;
-    if (!(u instanceof Node))
+    const r = i.target;
+    if (!(r instanceof Node))
       return;
-    const v = Array.isArray(t) ? t.map((f) => f.value).filter((f) => f instanceof HTMLElement) : [t.value].filter(
-      (f) => f instanceof HTMLElement
+    const g = Array.isArray(t) ? t.map((v) => v.value).filter((v) => v instanceof HTMLElement) : [t.value].filter(
+      (v) => v instanceof HTMLElement
     );
-    v.length === 0 || v.some((f) => f.contains(u)) || n(r);
+    g.length === 0 || g.some((v) => v.contains(r)) || n(i);
   };
-  re(() => {
-    document.addEventListener(i, a);
-  }), te(() => {
-    document.removeEventListener(i, a);
+  me(() => {
+    document.addEventListener(l, o);
+  }), se(() => {
+    document.removeEventListener(l, o);
   });
 }
-function ce(t = {}) {
-  const n = l(() => K(t.open) !== void 0), e = I(t.defaultOpen ?? !1), i = l(
-    () => n.value ? !!K(t.open) : e.value
+function be(t = {}) {
+  const n = a(() => X(t.open) !== void 0), e = A(t.defaultOpen ?? !1), l = a(
+    () => n.value ? !!X(t.open) : e.value
   );
-  J(
-    () => K(t.open),
-    (r) => {
-      r !== void 0 && (e.value = r);
+  ne(
+    () => X(t.open),
+    (i) => {
+      i !== void 0 && (e.value = i);
     }
   );
-  function a(r) {
-    var u;
-    n.value || (e.value = r), (u = t.onOpenChange) == null || u.call(t, r);
+  function o(i) {
+    var r;
+    n.value || (e.value = i), (r = t.onOpenChange) == null || r.call(t, i);
   }
   return {
-    isOpen: i,
-    open: () => a(!0),
-    close: () => a(!1),
-    toggle: () => a(!i.value),
-    setOpen: a
+    isOpen: l,
+    open: () => o(!0),
+    close: () => o(!1),
+    toggle: () => o(!l.value),
+    setOpen: o
   };
 }
-function ve(t, n = {}) {
-  const e = n.event ?? "keydown", i = (a) => {
-    K(n.enabled) === !1 || a.key !== "Escape" || t(a);
+function _e(t, n = {}) {
+  const e = n.event ?? "keydown", l = (o) => {
+    X(n.enabled) === !1 || o.key !== "Escape" || t(o);
   };
-  re(() => {
-    document.addEventListener(e, i);
-  }), te(() => {
-    document.removeEventListener(e, i);
+  me(() => {
+    document.addEventListener(e, l);
+  }), se(() => {
+    document.removeEventListener(e, l);
   });
 }
-function ye(t, n, e = {}) {
-  const i = I(0), a = I(0), r = I(K(e.placement) ?? "bottom"), u = I({}), v = I(null);
-  let f = 0;
-  const b = l(() => ({
-    left: `${i.value}px`,
-    top: `${a.value}px`
+function Te(t, n, e = {}) {
+  const l = A(0), o = A(0), i = A(X(e.placement) ?? "bottom"), r = A({}), g = A(null);
+  let v = 0;
+  const T = a(() => ({
+    left: `${l.value}px`,
+    top: `${o.value}px`
   }));
-  async function d() {
+  async function p() {
     if (!t.value || !n.value)
       return;
-    const g = await Ue(
+    const m = await Xe(
       t.value,
       n.value,
       {
-        placement: K(e.placement) ?? r.value,
-        middleware: K(e.middleware),
-        strategy: K(e.strategy)
+        placement: X(e.placement) ?? i.value,
+        middleware: X(e.middleware),
+        strategy: X(e.strategy)
       }
     );
-    i.value = g.x, a.value = g.y, r.value = g.placement, u.value = g.middlewareData ?? {};
+    l.value = m.x, o.value = m.y, i.value = m.placement, r.value = m.middlewareData ?? {};
   }
-  function T() {
-    var g;
-    (g = v.value) == null || g.call(v), v.value = null;
+  function c() {
+    var m;
+    (m = g.value) == null || m.call(g), g.value = null;
   }
-  return J(
-    [() => K(e.enabled) !== !1, t, n],
-    async ([g]) => {
-      f += 1;
-      const V = f;
-      T(), !(!g || !t.value || !n.value) && (await ne(), !(V !== f || K(e.enabled) === !1 || !t.value || !n.value) && (await d(), !(V !== f || K(e.enabled) === !1 || !t.value || !n.value) && (v.value = qe(t.value, () => {
-        d();
+  return ne(
+    [() => X(e.enabled) !== !1, t, n],
+    async ([m]) => {
+      v += 1;
+      const h = v;
+      c(), !(!m || !t.value || !n.value) && (await le(), !(h !== v || X(e.enabled) === !1 || !t.value || !n.value) && (await p(), !(h !== v || X(e.enabled) === !1 || !t.value || !n.value) && (g.value = Ue(t.value, () => {
+        p();
       }))));
     },
     { immediate: !0 }
-  ), te(() => {
-    T();
+  ), se(() => {
+    c();
   }), {
-    x: i,
-    y: a,
-    placement: r,
-    middlewareData: u,
-    styles: b,
-    update: d,
-    cleanup: T
+    x: l,
+    y: o,
+    placement: i,
+    middlewareData: r,
+    styles: T,
+    update: p,
+    cleanup: c
   };
 }
-const Ye = [
+const Ge = [
   "a[href]",
   "button:not([disabled])",
   "input:not([disabled])",
@@ -198,107 +202,107 @@ const Ye = [
   "textarea:not([disabled])",
   '[tabindex]:not([tabindex="-1"])'
 ].join(", ");
-function Xe(t) {
+function Qe(t) {
   return Array.from(
-    t.querySelectorAll(Ye)
+    t.querySelectorAll(Ge)
   ).filter(
     (n) => !n.hasAttribute("hidden") && n.getAttribute("aria-hidden") !== "true"
   );
 }
-function Ae(t, n = {}) {
-  const e = (i) => {
-    if (i.key !== "Tab" || K(n.enabled) === !1)
+function De(t, n = {}) {
+  const e = (l) => {
+    if (l.key !== "Tab" || X(n.enabled) === !1)
       return;
-    const a = t.value;
-    if (!a)
+    const o = t.value;
+    if (!o)
       return;
-    const r = Xe(a);
-    if (r.length === 0) {
-      i.preventDefault(), a.focus();
+    const i = Qe(o);
+    if (i.length === 0) {
+      l.preventDefault(), o.focus();
       return;
     }
-    const u = r[0], v = r[r.length - 1], f = document.activeElement;
-    if (i.shiftKey) {
-      (f === u || f === a) && (i.preventDefault(), v.focus());
+    const r = i[0], g = i[i.length - 1], v = document.activeElement;
+    if (l.shiftKey) {
+      (v === r || v === o) && (l.preventDefault(), g.focus());
       return;
     }
-    f === v && (i.preventDefault(), u.focus());
+    v === g && (l.preventDefault(), r.focus());
   };
-  re(() => {
+  me(() => {
     document.addEventListener("keydown", e);
-  }), te(() => {
+  }), se(() => {
     document.removeEventListener("keydown", e);
   });
 }
-let Ge = 0;
-function Q(t = {}) {
-  const n = `${t.prefix ?? "vf"}-${++Ge}`;
-  return l(() => K(t.providedId) ?? n);
+let Je = 0;
+function ee(t = {}) {
+  const n = `${t.prefix ?? "vf"}-${++Je}`;
+  return a(() => X(t.providedId) ?? n);
 }
-function On(t) {
-  const n = I(void 0);
+function ra(t) {
+  const n = A(void 0);
   function e() {
-    return K(t.items);
+    return X(t.items);
   }
-  function i() {
-    return K(t.offset) ?? 0;
+  function l() {
+    return X(t.offset) ?? 0;
   }
-  function a() {
-    return !!K(t.disabled);
+  function o() {
+    return !!X(t.disabled);
   }
-  function r() {
-    var T;
+  function i() {
+    var c;
     if (typeof window > "u" || typeof document > "u")
       return;
-    if (a()) {
+    if (o()) {
       n.value = void 0;
       return;
     }
-    const v = e(), f = i(), b = v.map((g) => ({
-      id: g.id,
-      element: document.getElementById(g.id)
+    const g = e(), v = l(), T = g.map((m) => ({
+      id: m.id,
+      element: document.getElementById(m.id)
     })).filter(
-      (g) => !!g.element
+      (m) => !!m.element
     );
-    if (!b.length) {
+    if (!T.length) {
       n.value = void 0;
       return;
     }
-    let d = (T = b[0]) == null ? void 0 : T.id;
-    for (const g of b) {
-      if (g.element.getBoundingClientRect().top - f <= 0) {
-        d = g.id;
+    let p = (c = T[0]) == null ? void 0 : c.id;
+    for (const m of T) {
+      if (m.element.getBoundingClientRect().top - v <= 0) {
+        p = m.id;
         continue;
       }
-      d || (d = g.id);
+      p || (p = m.id);
       break;
     }
-    n.value = d;
+    n.value = p;
   }
-  function u() {
-    r();
+  function r() {
+    i();
   }
-  return re(async () => {
-    await ne(), r(), window.addEventListener("scroll", u, { passive: !0 }), window.addEventListener("resize", u), window.addEventListener("hashchange", u);
-  }), Me(() => {
-    window.removeEventListener("scroll", u), window.removeEventListener("resize", u), window.removeEventListener("hashchange", u);
-  }), J(
+  return me(async () => {
+    await le(), i(), window.addEventListener("scroll", r, { passive: !0 }), window.addEventListener("resize", r), window.addEventListener("hashchange", r);
+  }), Fe(() => {
+    window.removeEventListener("scroll", r), window.removeEventListener("resize", r), window.removeEventListener("hashchange", r);
+  }), ne(
     () => [
-      e().map((v) => v.id).join("|"),
-      i(),
-      a()
+      e().map((g) => g.id).join("|"),
+      l(),
+      o()
     ],
     async () => {
-      await ne(), r();
+      await le(), i();
     },
     { immediate: !0 }
   ), {
     activeId: n,
-    updateActiveId: r
+    updateActiveId: i
   };
 }
-function Qe() {
-  const t = Te(Ee);
+function Ze() {
+  const t = xe(Le);
   if (!t)
     throw new Error("useTheme must be used inside VfThemeProvider.");
   return {
@@ -308,7 +312,7 @@ function Qe() {
     toggleTheme: t.toggleTheme
   };
 }
-const Je = { class: "vf-accordion" }, Ze = ["id", "aria-controls", "aria-expanded", "disabled"], et = ["id", "aria-labelledby"], tt = { class: "vf-accordion__content-inner" }, An = /* @__PURE__ */ S({
+const et = { class: "vf-accordion" }, tt = ["id", "aria-controls", "aria-expanded", "disabled"], nt = ["id", "aria-labelledby"], at = { class: "vf-accordion__content-inner" }, ua = /* @__PURE__ */ M({
   __name: "VfAccordion",
   props: {
     open: { type: Boolean, default: void 0 },
@@ -318,113 +322,113 @@ const Je = { class: "vf-accordion" }, Ze = ["id", "aria-controls", "aria-expande
   },
   emits: ["update:open", "openChange"],
   setup(t, { emit: n }) {
-    const e = t, i = n, a = Q({ prefix: "vf-accordion-trigger" }), r = Q({ prefix: "vf-accordion-content" }), u = ce({
+    const e = t, l = n, o = ee({ prefix: "vf-accordion-trigger" }), i = ee({ prefix: "vf-accordion-content" }), r = be({
       defaultOpen: e.defaultOpen,
-      open: l(() => e.open),
-      onOpenChange: (m) => {
-        i("update:open", m), i("openChange", m);
+      open: a(() => e.open),
+      onOpenChange: (I) => {
+        l("update:open", I), l("openChange", I);
       }
-    }), v = u.isOpen, f = [
+    }), g = r.isOpen, v = [
       "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(m) {
-      const o = m.firstElementChild;
-      return (o == null ? void 0 : o.offsetHeight) ?? m.scrollHeight;
-    }
-    function d() {
-      e.disabled || u.toggle();
-    }
-    function T(m) {
-      (m.key === "Enter" || m.key === " ") && (m.preventDefault(), d());
-    }
-    function g(m) {
-      const o = m;
-      o.style.height = "0px", o.style.opacity = "0", o.style.overflow = "hidden";
-    }
-    function V(m, o) {
-      const y = m;
-      y.style.transition = f, requestAnimationFrame(() => {
-        y.style.height = `${b(y)}px`, y.style.opacity = "1";
-      }), window.setTimeout(o, X.normal);
-    }
-    function A(m) {
-      const o = m;
-      o.style.height = "", o.style.opacity = "", o.style.overflow = "", o.style.transition = "";
-    }
-    function D(m) {
-      const o = m;
-      o.style.height = `${b(o)}px`, o.style.opacity = "1", o.style.overflow = "hidden";
-    }
-    function z(m, o) {
-      const y = m;
-      y.style.transition = f, y.offsetHeight, y.style.height = "0px", y.style.opacity = "0", window.setTimeout(o, X.normal);
-    }
-    function k(m) {
-      const o = m;
-      o.style.height = "", o.style.opacity = "", o.style.overflow = "", o.style.transition = "";
-    }
-    return (m, o) => (c(), _("section", Je, [
-      x("button", {
-        id: h(a),
-        "aria-controls": h(r),
-        "aria-expanded": h(v),
+    function T(I) {
+      const u = I.firstElementChild;
+      return (u == null ? void 0 : u.offsetHeight) ?? I.scrollHeight;
+    }
+    function p() {
+      e.disabled || r.toggle();
+    }
+    function c(I) {
+      (I.key === "Enter" || I.key === " ") && (I.preventDefault(), p());
+    }
+    function m(I) {
+      const u = I;
+      u.style.height = "0px", u.style.opacity = "0", u.style.overflow = "hidden";
+    }
+    function h(I, u) {
+      const w = I;
+      w.style.transition = v, requestAnimationFrame(() => {
+        w.style.height = `${T(w)}px`, w.style.opacity = "1";
+      }), window.setTimeout(u, Z.normal);
+    }
+    function x(I) {
+      const u = I;
+      u.style.height = "", u.style.opacity = "", u.style.overflow = "", u.style.transition = "";
+    }
+    function L(I) {
+      const u = I;
+      u.style.height = `${T(u)}px`, u.style.opacity = "1", u.style.overflow = "hidden";
+    }
+    function D(I, u) {
+      const w = I;
+      w.style.transition = v, w.offsetHeight, w.style.height = "0px", w.style.opacity = "0", window.setTimeout(u, Z.normal);
+    }
+    function R(I) {
+      const u = I;
+      u.style.height = "", u.style.opacity = "", u.style.overflow = "", u.style.transition = "";
+    }
+    return (I, u) => (d(), _("section", et, [
+      V("button", {
+        id: y(o),
+        "aria-controls": y(i),
+        "aria-expanded": y(g),
         disabled: t.disabled,
         class: "vf-accordion__trigger",
         type: "button",
-        onClick: d,
-        onKeydown: T
+        onClick: p,
+        onKeydown: c
       }, [
-        C(m.$slots, "trigger", { open: h(v) }, () => [
-          x("span", null, F(t.title), 1)
+        O(I.$slots, "trigger", { open: y(g) }, () => [
+          V("span", null, F(t.title), 1)
         ]),
-        x("span", {
+        V("span", {
           "aria-hidden": "true",
-          class: R(["vf-accordion__icon", h(v) && "vf-accordion__icon--open"])
+          class: P(["vf-accordion__icon", y(g) && "vf-accordion__icon--open"])
         }, [
-          q(h(ee), {
-            icon: h(W).chevronDown,
+          H(y(J), {
+            icon: y(W).chevronDown,
             size: "0.875rem"
           }, null, 8, ["icon"])
         ], 2)
-      ], 40, Ze),
-      q(oe, {
+      ], 40, tt),
+      H(de, {
         css: !1,
-        onBeforeEnter: g,
-        onEnter: V,
-        onAfterEnter: A,
-        onBeforeLeave: D,
-        onLeave: z,
-        onAfterLeave: k
+        onBeforeEnter: m,
+        onEnter: h,
+        onAfterEnter: x,
+        onBeforeLeave: L,
+        onLeave: D,
+        onAfterLeave: R
       }, {
-        default: U(() => [
-          h(v) ? (c(), _("div", {
+        default: G(() => [
+          y(g) ? (d(), _("div", {
             key: 0,
-            id: h(r),
-            "aria-labelledby": h(a),
+            id: y(i),
+            "aria-labelledby": y(o),
             class: "vf-accordion__content",
             role: "region"
           }, [
-            x("div", tt, [
-              C(m.$slots, "default", { open: h(v) })
+            V("div", at, [
+              O(I.$slots, "default", { open: y(g) })
             ])
-          ], 8, et)) : O("", !0)
+          ], 8, nt)) : E("", !0)
         ]),
         _: 3
       })
     ]));
   }
 });
-function P(...t) {
+function K(...t) {
   return t.filter(Boolean).join(" ");
 }
-const nt = {
+const ot = {
   class: "vf-alert__icon",
   "aria-hidden": "true"
-}, at = { class: "vf-alert__content" }, ot = {
+}, lt = { class: "vf-alert__content" }, st = {
   key: 0,
   class: "vf-alert__title"
-}, lt = { class: "vf-alert__body" }, In = /* @__PURE__ */ S({
+}, it = { class: "vf-alert__body" }, da = /* @__PURE__ */ M({
   inheritAttrs: !1,
   __name: "VfAlert",
   props: {
@@ -432,46 +436,121 @@ const nt = {
     title: { default: void 0 }
   },
   setup(t) {
-    const n = t, e = N(), i = l(
-      () => P("vf-alert", n.tone !== "primary" && `vf-alert--${n.tone}`)
-    ), a = l(() => n.tone === "success" ? W.checkCircle : n.tone === "info" ? W.info : n.tone === "warn" ? W.warning : n.tone === "help" ? W.questionCircle : n.tone === "danger" ? W.warning : n.tone === "contrast" ? W.info : W.info);
-    return (r, u) => (c(), _("section", H({
-      class: i.value,
+    const n = t, e = j(), l = a(
+      () => K("vf-alert", n.tone !== "primary" && `vf-alert--${n.tone}`)
+    ), o = a(() => n.tone === "success" ? W.checkCircle : n.tone === "info" ? W.info : n.tone === "warn" ? W.warning : n.tone === "help" ? W.questionCircle : n.tone === "danger" ? W.warning : n.tone === "contrast" ? W.info : W.info);
+    return (i, r) => (d(), _("section", N({
+      class: l.value,
       role: "alert"
-    }, h(e)), [
-      x("div", nt, [
-        q(h(ee), {
-          icon: a.value,
+    }, y(e)), [
+      V("div", ot, [
+        H(y(J), {
+          icon: o.value,
           size: "2rem"
         }, null, 8, ["icon"])
       ]),
-      x("div", at, [
-        n.title || r.$slots.title ? (c(), _("p", ot, [
-          C(r.$slots, "title", {}, () => [
-            le(F(n.title), 1)
+      V("div", lt, [
+        n.title || i.$slots.title ? (d(), _("p", st, [
+          O(i.$slots, "title", {}, () => [
+            ve(F(n.title), 1)
           ])
-        ])) : O("", !0),
-        x("div", lt, [
-          C(r.$slots, "default")
+        ])) : E("", !0),
+        V("div", it, [
+          O(i.$slots, "default")
         ])
       ])
     ], 16));
   }
-}), Ln = /* @__PURE__ */ S({
+}), ca = /* @__PURE__ */ M({
   inheritAttrs: !1,
   __name: "VfBadge",
   props: {
     tone: { default: "neutral" }
   },
   setup(t) {
-    const n = t, e = N(), i = l(
-      () => P("vf-badge", n.tone !== "neutral" && `vf-badge--${n.tone}`)
+    const n = t, e = j(), l = a(
+      () => K("vf-badge", n.tone !== "neutral" && `vf-badge--${n.tone}`)
     );
-    return (a, r) => (c(), _("span", H({ class: i.value }, h(e)), [
-      C(a.$slots, "default")
+    return (o, i) => (d(), _("span", N({ class: l.value }, y(e)), [
+      O(o.$slots, "default")
     ], 16));
   }
-}), st = ["type"], Sn = /* @__PURE__ */ S({
+}), rt = ["aria-label"], ut = { class: "vf-breadcrumbs__list" }, dt = ["aria-current"], ct = {
+  key: 2,
+  class: "vf-breadcrumbs__separator",
+  "aria-hidden": "true"
+}, fa = /* @__PURE__ */ M({
+  inheritAttrs: !1,
+  __name: "VfBreadcrumbs",
+  props: {
+    items: {},
+    ariaLabel: { default: "Breadcrumb" },
+    component: { default: void 0 }
+  },
+  setup(t) {
+    const n = t, e = j(), l = a(
+      () => K("vf-breadcrumbs", e.class)
+    ), o = a(
+      () => Object.fromEntries(Object.entries(e).filter(([c]) => c !== "class"))
+    ), i = a(
+      () => n.items.some((c) => c.current)
+    );
+    function r(c, m) {
+      return c.current || !i.value && m === n.items.length - 1;
+    }
+    function g(c, m) {
+      return !c.disabled && !r(c, m) && (c.href || c.to);
+    }
+    function v(c) {
+      return c.rel ? c.rel : c.target === "_blank" ? "noopener noreferrer" : void 0;
+    }
+    function T(c) {
+      return c.to !== void 0 ? n.component ?? fe("RouterLink") : "a";
+    }
+    function p(c) {
+      return c.to !== void 0 ? {
+        to: c.to,
+        target: c.target,
+        rel: v(c)
+      } : {
+        href: c.href,
+        target: c.target,
+        rel: v(c)
+      };
+    }
+    return (c, m) => (d(), _("nav", N({
+      class: l.value,
+      "aria-label": n.ariaLabel
+    }, o.value), [
+      V("ol", ut, [
+        (d(!0), _(re, null, ue(n.items, (h, x) => (d(), _("li", {
+          key: `${h.label}-${x}`,
+          class: "vf-breadcrumbs__item"
+        }, [
+          g(h, x) ? (d(), q(fe(T(h)), N({
+            key: 0,
+            ref_for: !0
+          }, p(h), { class: "vf-breadcrumbs__link" }), {
+            default: G(() => [
+              ve(F(h.label), 1)
+            ]),
+            _: 2
+          }, 1040)) : (d(), _("span", {
+            key: 1,
+            class: P(["vf-breadcrumbs__current", h.disabled && "vf-breadcrumbs__current--disabled"]),
+            "aria-current": r(h, x) ? "page" : void 0
+          }, F(h.label), 11, dt)),
+          x < n.items.length - 1 ? (d(), _("span", ct, [
+            H(y(J), {
+              icon: y(W).chevronRight,
+              size: "0.875rem"
+            }, null, 8, ["icon"])
+          ])) : E("", !0)
+        ]))), 128))
+      ])
+    ], 16, rt));
+  }
+}), ft = ["type"], va = /* @__PURE__ */ M({
   inheritAttrs: !1,
   __name: "VfButton",
   props: {
@@ -481,25 +560,25 @@ const nt = {
     type: { default: "button" }
   },
   setup(t) {
-    const n = t, e = N(), i = l(
-      () => P(
+    const n = t, e = j(), l = a(
+      () => K(
         "vf-button",
         `vf-button--${n.variant}`,
         n.size !== "md" && `vf-button--${n.size}`,
         n.block && "vf-button--block"
       )
     );
-    return (a, r) => (c(), _("button", H({
-      class: i.value,
+    return (o, i) => (d(), _("button", N({
+      class: l.value,
       type: n.type
-    }, h(e)), [
-      C(a.$slots, "default")
-    ], 16, st));
+    }, y(e)), [
+      O(o.$slots, "default")
+    ], 16, ft));
   }
-}), it = { key: 0 }, rt = { class: "vf-card__title" }, ut = {
+}), vt = { key: 0 }, mt = { class: "vf-card__title" }, pt = {
   key: 1,
   class: "vf-card__body"
-}, ct = { key: 2 }, Dn = /* @__PURE__ */ S({
+}, ht = { key: 2 }, ma = /* @__PURE__ */ M({
   inheritAttrs: !1,
   __name: "VfCard",
   props: {
@@ -507,27 +586,27 @@ const nt = {
     compact: { type: Boolean, default: !1 }
   },
   setup(t) {
-    const n = t, e = N(), i = l(
-      () => P("vf-card", n.compact && "vf-card--compact")
+    const n = t, e = j(), l = a(
+      () => K("vf-card", n.compact && "vf-card--compact")
     );
-    return (a, r) => (c(), _("section", H({ class: i.value }, h(e)), [
-      n.title || a.$slots.header ? (c(), _("header", it, [
-        C(a.$slots, "header", {}, () => [
-          x("h3", rt, F(n.title), 1)
+    return (o, i) => (d(), _("section", N({ class: l.value }, y(e)), [
+      n.title || o.$slots.header ? (d(), _("header", vt, [
+        O(o.$slots, "header", {}, () => [
+          V("h3", mt, F(n.title), 1)
         ])
-      ])) : O("", !0),
-      a.$slots.default ? (c(), _("div", ut, [
-        C(a.$slots, "default")
-      ])) : O("", !0),
-      a.$slots.footer ? (c(), _("footer", ct, [
-        C(a.$slots, "footer")
-      ])) : O("", !0)
+      ])) : E("", !0),
+      o.$slots.default ? (d(), _("div", pt, [
+        O(o.$slots, "default")
+      ])) : E("", !0),
+      o.$slots.footer ? (d(), _("footer", ht, [
+        O(o.$slots, "footer")
+      ])) : E("", !0)
     ], 16));
   }
-}), dt = ["checked", "disabled", "aria-invalid"], ft = {
+}), bt = ["checked", "disabled", "aria-invalid"], _t = {
   key: 0,
   class: "vf-checkbox__content"
-}, zn = /* @__PURE__ */ S({
+}, pa = /* @__PURE__ */ M({
   inheritAttrs: !1,
   __name: "VfCheckbox",
   props: {
@@ -539,49 +618,49 @@ const nt = {
   },
   emits: ["update:modelValue", "change"],
   setup(t, { emit: n }) {
-    const e = t, i = n, a = N(), r = l(
-      () => P(
+    const e = t, l = n, o = j(), i = a(
+      () => K(
         "vf-checkbox",
         `vf-checkbox--${e.size}`,
         e.modelValue && "vf-checkbox--checked",
         e.invalid && "vf-checkbox--invalid",
         e.disabled && "vf-checkbox--disabled",
-        a.class
+        o.class
       )
-    ), u = l(() => a.style), v = l(
+    ), r = a(() => o.style), g = a(
       () => Object.fromEntries(
-        Object.entries(a).filter(([b]) => b !== "class" && b !== "style")
+        Object.entries(o).filter(([T]) => T !== "class" && T !== "style")
       )
     );
-    function f(b) {
-      const d = b.target.checked;
-      i("update:modelValue", d), i("change", d);
+    function v(T) {
+      const p = T.target.checked;
+      l("update:modelValue", p), l("change", p);
     }
-    return (b, d) => (c(), _("label", {
-      class: R(r.value),
-      style: Y(u.value)
+    return (T, p) => (d(), _("label", {
+      class: P(i.value),
+      style: U(r.value)
     }, [
-      x("input", H({
+      V("input", N({
         class: "vf-checkbox__input",
         type: "checkbox",
         checked: e.modelValue,
         disabled: e.disabled,
         "aria-invalid": e.invalid || void 0
-      }, v.value, { onChange: f }), null, 16, dt),
-      d[0] || (d[0] = x("span", {
+      }, g.value, { onChange: v }), null, 16, bt),
+      p[0] || (p[0] = V("span", {
         class: "vf-checkbox__control",
         "aria-hidden": "true"
       }, [
-        x("span", { class: "vf-checkbox__mark" })
+        V("span", { class: "vf-checkbox__mark" })
       ], -1)),
-      t.label || b.$slots.default ? (c(), _("span", ft, [
-        C(b.$slots, "default", {}, () => [
-          le(F(t.label), 1)
+      t.label || T.$slots.default ? (d(), _("span", _t, [
+        O(T.$slots, "default", {}, () => [
+          ve(F(t.label), 1)
         ])
-      ])) : O("", !0)
+      ])) : E("", !0)
     ], 6));
   }
-}), vt = ["type"], Ie = /* @__PURE__ */ S({
+}), yt = ["type"], Se = /* @__PURE__ */ M({
   inheritAttrs: !1,
   __name: "VfIconButton",
   props: {
@@ -591,34 +670,34 @@ const nt = {
     type: { default: "button" }
   },
   setup(t) {
-    const n = t, e = N(), i = l(
-      () => P(
+    const n = t, e = j(), l = a(
+      () => K(
         "vf-icon-button",
-        n.variant !== "ghost" && `vf-icon-button--${n.variant}`,
+        `vf-icon-button--${n.variant}`,
         n.size !== "md" && `vf-icon-button--${n.size}`
       )
-    ), a = l(() => n.size === "sm" ? "0.875rem" : n.size === "lg" ? "1.125rem" : "1rem");
-    return (r, u) => (c(), _("button", H({
-      class: i.value,
+    ), o = a(() => n.size === "sm" ? "0.875rem" : n.size === "lg" ? "1.125rem" : "1rem");
+    return (i, r) => (d(), _("button", N({
+      class: l.value,
       type: n.type
-    }, h(e)), [
-      q(h(ee), {
+    }, y(e)), [
+      H(y(J), {
         icon: n.icon,
-        size: a.value,
+        size: o.value,
         "aria-hidden": "true"
       }, null, 8, ["icon", "size"])
-    ], 16, vt));
+    ], 16, yt));
   }
-}), pt = ["aria-labelledby"], mt = {
+}), gt = ["aria-labelledby"], wt = {
   key: 0,
   class: "vf-drawer__header"
-}, ht = ["id"], _t = { class: "vf-drawer__actions" }, yt = {
+}, kt = ["id"], $t = { class: "vf-drawer__actions" }, Tt = {
   key: 1,
   class: "vf-drawer__body"
-}, bt = {
+}, Vt = {
   key: 2,
   class: "vf-drawer__footer"
-}, Mn = /* @__PURE__ */ S({
+}, ha = /* @__PURE__ */ M({
   inheritAttrs: !1,
   __name: "VfDrawer",
   props: {
@@ -627,6 +706,7 @@ const nt = {
     title: { default: void 0 },
     size: { default: "md" },
     placement: { default: "right" },
+    rounded: { type: Boolean, default: !1 },
     offsetTop: { default: void 0 },
     bodyPadding: { default: void 0 },
     teleportTo: { type: [String, null, Boolean], default: void 0 },
@@ -638,166 +718,168 @@ const nt = {
   },
   emits: ["update:open", "openChange"],
   setup(t, { emit: n }) {
-    const e = t, i = n, a = N(), r = I(null), u = I(null), v = fe(), f = Q({ prefix: "vf-drawer-title" }), b = ce({
+    const e = t, l = n, o = j(), i = A(null), r = A(null), g = ye(), v = ee({ prefix: "vf-drawer-title" }), T = be({
       defaultOpen: e.defaultOpen,
-      open: l(() => e.open),
-      onOpenChange: (B) => {
-        i("update:open", B), i("openChange", B);
+      open: a(() => e.open),
+      onOpenChange: ($) => {
+        l("update:open", $), l("openChange", $);
       }
-    }), d = b.isOpen, T = {
-      enter: X.normal,
-      leave: X.normal
+    }), p = T.isOpen, c = {
+      enter: Z.normal,
+      leave: Z.normal
     };
-    function g(B) {
-      return typeof B == "number" ? `${B}px` : B;
-    }
-    const V = l(() => {
-      const B = {}, w = g(e.offsetTop), Z = g(e.bodyPadding);
-      return w != null && (B["--vf-drawer-offset-top"] = w), Z != null && (B["--vf-drawer-body-padding"] = Z), B;
-    }), A = l(
-      () => P(
+    function m($) {
+      return typeof $ == "number" ? `${$}px` : $;
+    }
+    const h = a(() => {
+      const $ = {}, C = m(e.offsetTop), ie = m(e.bodyPadding);
+      return C != null && ($["--vf-drawer-offset-top"] = C), ie != null && ($["--vf-drawer-body-padding"] = ie), $;
+    }), x = a(
+      () => K(
         "vf-drawer",
         `vf-drawer--${e.placement}`,
+        e.rounded && "vf-drawer--rounded",
         e.offsetTop != null && "vf-drawer--offset-top"
       )
-    ), D = l(() => [
-      V.value,
-      a.style
-    ]), z = l(() => Object.fromEntries(
-      Object.entries(a).filter(([B]) => B !== "class" && B !== "style")
-    )), k = l(
+    ), L = a(() => [
+      h.value,
+      o.style
+    ]), D = a(() => Object.fromEntries(
+      Object.entries(o).filter(([$]) => $ !== "class" && $ !== "style")
+    )), R = a(
       () => e.disableTeleport || e.teleportTo === !1 || e.teleportTo === null
-    ), m = l(() => e.scrollLockTarget === !1 ? null : e.scrollLockTarget), o = l(() => typeof e.teleportTo == "string" || typeof HTMLElement < "u" && e.teleportTo instanceof HTMLElement ? e.teleportTo : "body"), y = l(
-      () => P(
+    ), I = a(() => e.scrollLockTarget === !1 ? null : e.scrollLockTarget), u = a(() => typeof e.teleportTo == "string" || typeof HTMLElement < "u" && e.teleportTo instanceof HTMLElement ? e.teleportTo : "body"), w = a(
+      () => K(
         "vf-drawer__content",
         `vf-drawer__content--${e.placement}`,
         `vf-drawer__content--${e.size}`
       )
-    ), p = l(() => !!v.header), s = l(
-      () => e.title || p.value ? f.value : void 0
+    ), B = a(() => !!g.header), s = a(
+      () => e.title || B.value ? v.value : void 0
     );
-    function E() {
-      b.close();
+    function k() {
+      T.close();
     }
-    function L() {
-      e.closeOnOverlayClick && E();
+    function f() {
+      e.closeOnOverlayClick && k();
     }
-    function M() {
-      const B = r.value;
-      if (!B)
+    function S() {
+      const $ = i.value;
+      if (!$)
         return;
-      const w = B.querySelector(
+      const C = $.querySelector(
         "[autofocus], [data-autofocus]"
       );
-      if (w) {
-        w.focus();
+      if (C) {
+        C.focus();
         return;
       }
-      B.focus();
+      $.focus();
     }
-    return ve(
-      (B) => {
-        !e.closeOnEscape || !d.value || (B.preventDefault(), E());
+    return _e(
+      ($) => {
+        !e.closeOnEscape || !p.value || ($.preventDefault(), k());
       },
       {
-        enabled: d
+        enabled: p
       }
-    ), Ae(r, {
-      enabled: d
-    }), Ce(d, {
-      target: m
-    }), J(
-      d,
-      async (B) => {
-        var w;
+    ), De(i, {
+      enabled: p
+    }), Ae(p, {
+      target: I
+    }), ne(
+      p,
+      async ($) => {
+        var C;
         if (!(typeof document > "u")) {
-          if (B) {
-            u.value = document.activeElement instanceof HTMLElement ? document.activeElement : null, await ne(), M();
+          if ($) {
+            r.value = document.activeElement instanceof HTMLElement ? document.activeElement : null, await le(), S();
             return;
           }
-          (w = u.value) == null || w.focus();
+          (C = r.value) == null || C.focus();
         }
       },
       { immediate: !0 }
-    ), te(() => {
-      var B;
-      d.value && ((B = u.value) == null || B.focus());
-    }), (B, w) => (c(), j(ue, {
-      to: o.value,
-      disabled: k.value
+    ), se(() => {
+      var $;
+      p.value && (($ = r.value) == null || $.focus());
+    }), ($, C) => (d(), q(he, {
+      to: u.value,
+      disabled: R.value
     }, [
-      q(oe, {
+      H(de, {
         name: "vf-drawer-transition",
         appear: "",
-        duration: T
+        duration: c
       }, {
-        default: U(() => [
-          h(d) ? (c(), _("div", H({
+        default: G(() => [
+          y(p) ? (d(), _("div", N({
             key: 0,
-            class: [A.value, h(a).class],
-            style: D.value
-          }, z.value), [
-            x("div", {
+            class: [x.value, y(o).class],
+            style: L.value
+          }, D.value), [
+            V("div", {
               class: "vf-drawer__overlay",
               "aria-hidden": "true",
-              onClick: L
+              onClick: f
             }),
-            x("section", {
+            V("section", {
               ref_key: "contentRef",
-              ref: r,
-              class: R(y.value),
+              ref: i,
+              class: P(w.value),
               "aria-labelledby": s.value,
               "aria-modal": "true",
               role: "dialog",
               tabindex: "-1"
             }, [
-              t.title || B.$slots.header ? (c(), _("header", mt, [
-                x("div", null, [
-                  C(B.$slots, "header", {}, () => [
-                    t.title ? (c(), _("h2", {
+              t.title || $.$slots.header ? (d(), _("header", wt, [
+                V("div", null, [
+                  O($.$slots, "header", {}, () => [
+                    t.title ? (d(), _("h2", {
                       key: 0,
-                      id: h(f),
+                      id: y(v),
                       class: "vf-drawer__title"
-                    }, F(t.title), 9, ht)) : O("", !0)
+                    }, F(t.title), 9, kt)) : E("", !0)
                   ])
                 ]),
-                x("div", _t, [
-                  C(B.$slots, "actions", { close: E }),
-                  e.closable ? (c(), j(Ie, {
+                V("div", $t, [
+                  O($.$slots, "actions", { close: k }),
+                  e.closable ? (d(), q(Se, {
                     key: 0,
-                    icon: h(W).xmark,
+                    icon: y(W).xmark,
                     "aria-label": "Close drawer",
                     size: "sm",
-                    onClick: E
-                  }, null, 8, ["icon"])) : O("", !0)
+                    variant: "ghost",
+                    onClick: k
+                  }, null, 8, ["icon"])) : E("", !0)
                 ])
-              ])) : O("", !0),
-              B.$slots.default ? (c(), _("div", yt, [
-                C(B.$slots, "default", { close: E })
-              ])) : O("", !0),
-              B.$slots.footer ? (c(), _("footer", bt, [
-                C(B.$slots, "footer", { close: E })
-              ])) : O("", !0)
-            ], 10, pt)
-          ], 16)) : O("", !0)
+              ])) : E("", !0),
+              $.$slots.default ? (d(), _("div", Tt, [
+                O($.$slots, "default", { close: k })
+              ])) : E("", !0),
+              $.$slots.footer ? (d(), _("footer", Vt, [
+                O($.$slots, "footer", { close: k })
+              ])) : E("", !0)
+            ], 10, gt)
+          ], 16)) : E("", !0)
         ]),
         _: 3
       })
     ], 8, ["to", "disabled"]));
   }
-}), gt = {
+}), Ct = {
   key: 0,
   class: "vf-dialog"
-}, $t = ["aria-describedby", "aria-labelledby"], kt = {
+}, xt = ["aria-describedby", "aria-labelledby"], Bt = {
   key: 0,
   class: "vf-dialog__header"
-}, wt = ["id"], Tt = ["id"], Vt = { class: "vf-dialog__actions" }, xt = {
+}, It = ["id"], Et = ["id"], At = { class: "vf-dialog__actions" }, Ot = {
   key: 1,
   class: "vf-dialog__body"
-}, Ct = {
+}, Lt = {
   key: 2,
   class: "vf-dialog__footer"
-}, Pn = /* @__PURE__ */ S({
+}, ba = /* @__PURE__ */ M({
   __name: "VfDialog",
   props: {
     open: { type: Boolean, default: void 0 },
@@ -813,155 +895,156 @@ const nt = {
   },
   emits: ["update:open", "openChange"],
   setup(t, { emit: n }) {
-    const e = t, i = n, a = I(null), r = I(null), u = fe(), v = Q({ prefix: "vf-dialog-title" }), f = Q({ prefix: "vf-dialog-description" }), b = ce({
+    const e = t, l = n, o = A(null), i = A(null), r = ye(), g = ee({ prefix: "vf-dialog-title" }), v = ee({ prefix: "vf-dialog-description" }), T = be({
       defaultOpen: e.defaultOpen,
-      open: l(() => e.open),
+      open: a(() => e.open),
       onOpenChange: (s) => {
-        i("update:open", s), i("openChange", s);
+        l("update:open", s), l("openChange", s);
       }
-    }), d = b.isOpen, T = {
-      enter: X.fast,
-      leave: X.fast
-    }, g = l(
+    }), p = T.isOpen, c = {
+      enter: Z.fast,
+      leave: Z.fast
+    }, m = a(
       () => e.disableTeleport || e.teleportTo === !1 || e.teleportTo === null
-    ), V = l(() => typeof e.teleportTo == "string" || typeof HTMLElement < "u" && e.teleportTo instanceof HTMLElement ? e.teleportTo : "body"), A = l(
-      () => P(
+    ), h = a(() => typeof e.teleportTo == "string" || typeof HTMLElement < "u" && e.teleportTo instanceof HTMLElement ? e.teleportTo : "body"), x = a(
+      () => K(
         "vf-dialog__content",
         e.size !== "md" && `vf-dialog__content--${e.size}`
       )
-    ), D = l(() => !!u.header), z = l(() => !!u.description), k = l(
-      () => e.title || D.value ? v.value : void 0
-    ), m = l(
-      () => e.description || z.value ? f.value : void 0
+    ), L = a(() => !!r.header), D = a(() => !!r.description), R = a(
+      () => e.title || L.value ? g.value : void 0
+    ), I = a(
+      () => e.description || D.value ? v.value : void 0
     );
-    function o() {
-      b.close();
+    function u() {
+      T.close();
     }
-    function y() {
-      e.closeOnOverlayClick && o();
+    function w() {
+      e.closeOnOverlayClick && u();
     }
-    function p() {
-      const s = a.value;
+    function B() {
+      const s = o.value;
       if (!s)
         return;
-      const E = s.querySelector(
+      const k = s.querySelector(
         "[autofocus], [data-autofocus]"
       );
-      if (E) {
-        E.focus();
+      if (k) {
+        k.focus();
         return;
       }
       s.focus();
     }
-    return ve(
+    return _e(
       (s) => {
-        !e.closeOnEscape || !d.value || (s.preventDefault(), o());
+        !e.closeOnEscape || !p.value || (s.preventDefault(), u());
       },
       {
-        enabled: d
+        enabled: p
       }
-    ), Ae(a, {
-      enabled: d
-    }), Ce(d), J(
-      d,
+    ), De(o, {
+      enabled: p
+    }), Ae(p), ne(
+      p,
       async (s) => {
-        var E;
+        var k;
         if (!(typeof document > "u")) {
           if (s) {
-            r.value = document.activeElement instanceof HTMLElement ? document.activeElement : null, await ne(), p();
+            i.value = document.activeElement instanceof HTMLElement ? document.activeElement : null, await le(), B();
             return;
           }
-          (E = r.value) == null || E.focus();
+          (k = i.value) == null || k.focus();
         }
       },
       { immediate: !0 }
-    ), te(() => {
+    ), se(() => {
       var s;
-      d.value && ((s = r.value) == null || s.focus());
-    }), (s, E) => (c(), j(ue, {
-      to: V.value,
-      disabled: g.value
+      p.value && ((s = i.value) == null || s.focus());
+    }), (s, k) => (d(), q(he, {
+      to: h.value,
+      disabled: m.value
     }, [
-      q(oe, {
+      H(de, {
         name: "vf-dialog-transition",
         appear: "",
-        duration: T
+        duration: c
       }, {
-        default: U(() => [
-          h(d) ? (c(), _("div", gt, [
-            x("div", {
+        default: G(() => [
+          y(p) ? (d(), _("div", Ct, [
+            V("div", {
               class: "vf-dialog__overlay",
               "aria-hidden": "true",
-              onClick: y
+              onClick: w
             }),
-            x("section", {
+            V("section", {
               ref_key: "contentRef",
-              ref: a,
-              class: R(A.value),
-              "aria-describedby": m.value,
-              "aria-labelledby": k.value,
+              ref: o,
+              class: P(x.value),
+              "aria-describedby": I.value,
+              "aria-labelledby": R.value,
               "aria-modal": "true",
               role: "dialog",
               tabindex: "-1"
             }, [
-              t.title || t.description || s.$slots.header || s.$slots.description ? (c(), _("header", kt, [
-                x("div", null, [
-                  C(s.$slots, "header", {}, () => [
-                    t.title ? (c(), _("h2", {
+              t.title || t.description || s.$slots.header || s.$slots.description ? (d(), _("header", Bt, [
+                V("div", null, [
+                  O(s.$slots, "header", {}, () => [
+                    t.title ? (d(), _("h2", {
                       key: 0,
-                      id: h(v),
+                      id: y(g),
                       class: "vf-dialog__title"
-                    }, F(t.title), 9, wt)) : O("", !0)
+                    }, F(t.title), 9, It)) : E("", !0)
                   ]),
-                  C(s.$slots, "description", {}, () => [
-                    t.description ? (c(), _("p", {
+                  O(s.$slots, "description", {}, () => [
+                    t.description ? (d(), _("p", {
                       key: 0,
-                      id: h(f),
+                      id: y(v),
                       class: "vf-dialog__description"
-                    }, F(t.description), 9, Tt)) : O("", !0)
+                    }, F(t.description), 9, Et)) : E("", !0)
                   ])
                 ]),
-                x("div", Vt, [
-                  C(s.$slots, "actions", { close: o }),
-                  e.closable ? (c(), j(Ie, {
+                V("div", At, [
+                  O(s.$slots, "actions", { close: u }),
+                  e.closable ? (d(), q(Se, {
                     key: 0,
-                    icon: h(W).xmark,
+                    icon: y(W).xmark,
                     "aria-label": "Close dialog",
                     size: "sm",
-                    onClick: o
-                  }, null, 8, ["icon"])) : O("", !0)
+                    variant: "ghost",
+                    onClick: u
+                  }, null, 8, ["icon"])) : E("", !0)
                 ])
-              ])) : O("", !0),
-              s.$slots.default ? (c(), _("div", xt, [
-                C(s.$slots, "default", { close: o })
-              ])) : O("", !0),
-              s.$slots.footer ? (c(), _("footer", Ct, [
-                C(s.$slots, "footer", { close: o })
-              ])) : O("", !0)
-            ], 10, $t)
-          ])) : O("", !0)
+              ])) : E("", !0),
+              s.$slots.default ? (d(), _("div", Ot, [
+                O(s.$slots, "default", { close: u })
+              ])) : E("", !0),
+              s.$slots.footer ? (d(), _("footer", Lt, [
+                O(s.$slots, "footer", { close: u })
+              ])) : E("", !0)
+            ], 10, xt)
+          ])) : E("", !0)
         ]),
         _: 3
       })
     ], 8, ["to", "disabled"]));
   }
-}), Bt = ["aria-orientation", "role"], Nn = /* @__PURE__ */ S({
+}), Dt = ["aria-orientation", "role"], _a = /* @__PURE__ */ M({
   inheritAttrs: !1,
   __name: "VfDivider",
   props: {
     orientation: { default: "horizontal" }
   },
   setup(t) {
-    const n = t, e = N(), i = l(() => n.orientation === "vertical"), a = l(
-      () => P("vf-divider", `vf-divider--${n.orientation}`)
+    const n = t, e = j(), l = a(() => n.orientation === "vertical"), o = a(
+      () => K("vf-divider", `vf-divider--${n.orientation}`)
     );
-    return (r, u) => (c(), _("div", H({
-      class: a.value,
+    return (i, r) => (d(), _("div", N({
+      class: o.value,
       "aria-orientation": n.orientation,
-      role: i.value ? "separator" : void 0
-    }, h(e)), null, 16, Bt));
+      role: l.value ? "separator" : void 0
+    }, y(e)), null, 16, Dt));
   }
-}), Et = { class: "vf-dropdown" }, Ot = ["id", "aria-controls", "aria-expanded"], At = ["id", "aria-labelledby"], Hn = /* @__PURE__ */ S({
+}), St = { class: "vf-dropdown" }, Mt = ["id", "aria-controls", "aria-expanded"], zt = ["id", "aria-labelledby"], ya = /* @__PURE__ */ M({
   __name: "VfDropdown",
   props: {
     open: { type: Boolean, default: void 0 },
@@ -969,195 +1052,181 @@ const nt = {
     placement: { default: "bottom-start" },
     teleportTo: { type: [String, null, Boolean], default: void 0 },
     disableTeleport: { type: Boolean, default: !1 },
-    closeOnSelect: { type: Boolean, default: !0 }
+    closeOnSelect: { type: Boolean, default: !0 },
+    variant: { default: "default" }
   },
   emits: ["update:open", "openChange"],
   setup(t, { emit: n }) {
-    const e = t, i = n, a = I(null), r = I(null), u = I(null), v = Q({ prefix: "vf-dropdown-menu" }), f = Q({ prefix: "vf-dropdown-trigger" }), b = {
-      enter: X.fast,
-      leave: X.fast
-    }, d = l(
+    const e = t, l = n, o = A(null), i = A(null), r = A(null), g = ee({ prefix: "vf-dropdown-menu" }), v = ee({ prefix: "vf-dropdown-trigger" }), T = {
+      enter: Z.fast,
+      leave: Z.fast
+    }, p = a(
       () => e.disableTeleport || e.teleportTo === !1 || e.teleportTo === null
-    ), T = l(() => typeof e.teleportTo == "string" || typeof HTMLElement < "u" && e.teleportTo instanceof HTMLElement ? e.teleportTo : "body"), g = ce({
+    ), c = a(() => typeof e.teleportTo == "string" || typeof HTMLElement < "u" && e.teleportTo instanceof HTMLElement ? e.teleportTo : "body"), m = be({
       defaultOpen: e.defaultOpen,
-      open: l(() => e.open),
-      onOpenChange: ($) => {
-        i("update:open", $), i("openChange", $);
+      open: a(() => e.open),
+      onOpenChange: (b) => {
+        l("update:open", b), l("openChange", b);
       }
-    }), V = g.isOpen, A = l(() => [
+    }), h = m.isOpen, x = a(() => [
       "vf-dropdown__menu",
-      o.value.startsWith("top") && "vf-dropdown__menu--top"
-    ]), D = l(() => {
-      const $ = y.value.arrow;
+      `vf-dropdown__menu--${e.variant}`,
+      u.value.startsWith("top") && "vf-dropdown__menu--top"
+    ]), L = a(() => {
+      const b = w.value.arrow;
       return {
-        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
+        x: (b == null ? void 0 : b.x) !== void 0 && (b == null ? void 0 : b.baseX) !== void 0 ? b.x - b.baseX : 0,
+        y: (b == null ? void 0 : b.y) !== void 0 && (b == null ? void 0 : b.baseY) !== void 0 ? b.y - b.baseY : 0
       };
-    }), z = l(() => ({
-      left: `${D.value.x}px`,
-      top: `${D.value.y}px`
-    })), k = l(() => [
+    }), D = a(() => ({
+      left: `${L.value.x}px`,
+      top: `${L.value.y}px`
+    })), R = a(() => [
       "vf-dropdown__arrow",
-      o.value.startsWith("top") ? "vf-dropdown__arrow--top" : "vf-dropdown__arrow--bottom"
-    ]), m = l(
+      u.value.startsWith("top") ? "vf-dropdown__arrow--top" : "vf-dropdown__arrow--bottom"
+    ]), I = a(
       () => e.placement === "bottom-end" ? ["bottom-end", "top-end"] : ["bottom-start", "top-start"]
     ), {
-      placement: o,
-      middlewareData: y,
-      styles: p
-    } = ye(a, r, {
-      enabled: V,
-      placement: l(() => e.placement),
-      middleware: l(
+      placement: u,
+      middlewareData: w,
+      styles: B
+    } = Te(o, i, {
+      enabled: h,
+      placement: a(() => e.placement),
+      middleware: a(
         () => [
-          pe(10),
-          me({ placements: m.value }),
-          he(),
-          u.value ? _e(u.value) : void 0
-        ].filter(($) => $ !== void 0)
+          ge(10),
+          we({ placements: I.value }),
+          ke(),
+          r.value ? Ve(r.value) : void 0
+        ].filter((b) => b !== void 0)
       ),
       strategy: "fixed"
     });
     function s() {
-      var $;
+      var b;
       return Array.from(
-        (($ = r.value) == null ? void 0 : $.querySelectorAll('[role="menuitem"]')) ?? []
+        ((b = i.value) == null ? void 0 : b.querySelectorAll('[role="menuitem"]')) ?? []
       );
     }
-    async function E() {
-      var $;
-      await ne(), ($ = s()[0]) == null || $.focus();
+    async function k() {
+      var b;
+      await le(), (b = s()[0]) == null || b.focus();
     }
-    function L($ = {}) {
-      g.open(), $.focusFirstItem && E();
+    function f(b = {}) {
+      m.open(), b.focusFirstItem && k();
     }
-    function M() {
-      var $;
-      g.close(), ($ = a.value) == null || $.focus();
+    function S() {
+      var b;
+      m.close(), (b = o.value) == null || b.focus();
     }
-    function B() {
-      if (V.value) {
-        M();
+    function $() {
+      if (h.value) {
+        S();
         return;
       }
-      L();
+      f();
     }
-    function w($) {
-      ($.key === "ArrowDown" || $.key === "Enter" || $.key === " ") && ($.preventDefault(), L({ focusFirstItem: !0 }));
+    function C(b) {
+      (b.key === "ArrowDown" || b.key === "Enter" || b.key === " ") && (b.preventDefault(), f({ focusFirstItem: !0 }));
     }
-    function Z($) {
-      var ge, $e, ke, we;
-      const G = s(), be = G.findIndex(
-        (Le) => Le === document.activeElement
+    function ie(b) {
+      var ae, te, Q, ce;
+      const z = s(), Y = z.findIndex(
+        (oe) => oe === document.activeElement
       );
-      if ($.key === "ArrowDown") {
-        $.preventDefault(), (ge = G[(be + 1 + G.length) % G.length]) == null || ge.focus();
+      if (b.key === "ArrowDown") {
+        b.preventDefault(), (ae = z[(Y + 1 + z.length) % z.length]) == null || ae.focus();
         return;
       }
-      if ($.key === "ArrowUp") {
-        $.preventDefault(), ($e = G[(be - 1 + G.length) % G.length]) == null || $e.focus();
+      if (b.key === "ArrowUp") {
+        b.preventDefault(), (te = z[(Y - 1 + z.length) % z.length]) == null || te.focus();
         return;
       }
-      if ($.key === "Home") {
-        $.preventDefault(), (ke = G[0]) == null || ke.focus();
+      if (b.key === "Home") {
+        b.preventDefault(), (Q = z[0]) == null || Q.focus();
         return;
       }
-      $.key === "End" && ($.preventDefault(), (we = G[G.length - 1]) == null || we.focus());
+      b.key === "End" && (b.preventDefault(), (ce = z[z.length - 1]) == null || ce.focus());
     }
-    function de() {
-      e.closeOnSelect && M();
+    function pe() {
+      e.closeOnSelect && S();
     }
-    return Oe(
-      [a, r],
+    return $e(
+      [o, i],
       () => {
-        V.value && M();
+        h.value && S();
       },
       {
-        enabled: V,
+        enabled: h,
         event: "click"
       }
-    ), ve(
-      ($) => {
-        V.value && ($.preventDefault(), M());
+    ), _e(
+      (b) => {
+        h.value && (b.preventDefault(), S());
       },
       {
-        enabled: V
+        enabled: h
       }
-    ), ($, G) => (c(), _("div", Et, [
-      x("div", {
-        id: h(f),
+    ), (b, z) => (d(), _("div", St, [
+      V("div", {
+        id: y(v),
         ref_key: "triggerRef",
-        ref: a,
+        ref: o,
         class: "vf-dropdown__trigger",
-        "aria-controls": h(v),
-        "aria-expanded": h(V),
+        "aria-controls": y(g),
+        "aria-expanded": y(h),
         "aria-haspopup": "menu",
         tabindex: "0",
-        onClick: B,
-        onKeydown: w
+        onClick: $,
+        onKeydown: C
       }, [
-        C($.$slots, "trigger", {
-          open: h(V),
-          toggle: B
+        O(b.$slots, "trigger", {
+          open: y(h),
+          toggle: $
         })
-      ], 40, Ot),
-      (c(), j(ue, {
-        to: T.value,
-        disabled: d.value
+      ], 40, Mt),
+      (d(), q(he, {
+        to: c.value,
+        disabled: p.value
       }, [
-        q(oe, {
+        H(de, {
           name: "vf-floating-transition",
           appear: "",
-          duration: b
+          duration: T
         }, {
-          default: U(() => [
-            h(V) ? (c(), _("div", {
+          default: G(() => [
+            y(h) ? (d(), _("div", {
               key: 0,
-              id: h(v),
+              id: y(g),
               ref_key: "menuRef",
-              ref: r,
-              class: R(A.value),
-              style: Y(h(p)),
-              "aria-labelledby": h(f),
+              ref: i,
+              class: P(x.value),
+              style: U(y(B)),
+              "aria-labelledby": y(v),
               role: "menu",
-              onClick: de,
-              onKeydown: Z
+              onClick: pe,
+              onKeydown: ie
             }, [
-              x("span", {
+              V("span", {
                 ref_key: "arrowRef",
-                ref: u,
-                class: R(k.value),
-                style: Y(z.value),
+                ref: r,
+                class: P(R.value),
+                style: U(D.value),
                 "aria-hidden": "true"
               }, null, 6),
-              C($.$slots, "default", {
-                close: M,
-                open: h(V)
+              O(b.$slots, "default", {
+                close: S,
+                open: y(h)
               })
-            ], 46, At)) : O("", !0)
+            ], 46, zt)) : E("", !0)
           ]),
           _: 3
         })
       ], 8, ["to", "disabled"]))
     ]));
   }
-}), Rn = /* @__PURE__ */ S({
-  inheritAttrs: !1,
-  __name: "VfHeading",
-  props: {
-    as: { default: "h2" },
-    size: { default: "md" }
-  },
-  setup(t) {
-    const n = t, e = N(), i = l(() => P("vf-heading", `vf-heading--${n.size}`));
-    return (a, r) => (c(), j(ae(n.as), H({ class: i.value }, h(e)), {
-      default: U(() => [
-        C(a.$slots, "default")
-      ]),
-      _: 3
-    }, 16, ["class"]));
-  }
-}), It = ["value", "aria-invalid"], Fn = /* @__PURE__ */ S({
+}), Pt = ["value", "aria-invalid"], ga = /* @__PURE__ */ M({
   inheritAttrs: !1,
   __name: "VfInput",
   props: {
@@ -1167,23 +1236,23 @@ const nt = {
   },
   emits: ["update:modelValue"],
   setup(t, { emit: n }) {
-    const e = t, i = n, a = N(), r = l(
-      () => P(
+    const e = t, l = n, o = j(), i = a(
+      () => K(
         "vf-input",
         e.size !== "md" && `vf-input--${e.size}`,
         e.invalid && "vf-input--invalid"
       )
     );
-    function u(v) {
-      i("update:modelValue", v.target.value);
+    function r(g) {
+      l("update:modelValue", g.target.value);
     }
-    return (v, f) => (c(), _("input", H({
-      class: r.value,
+    return (g, v) => (d(), _("input", N({
+      class: i.value,
       value: e.modelValue,
       "aria-invalid": e.invalid || void 0
-    }, h(a), { onInput: u }), null, 16, It));
+    }, y(o), { onInput: r }), null, 16, Pt));
   }
-}), Kn = /* @__PURE__ */ S({
+}), wa = /* @__PURE__ */ M({
   inheritAttrs: !1,
   __name: "VfLink",
   props: {
@@ -1191,53 +1260,348 @@ const nt = {
     to: { default: void 0 },
     target: { default: void 0 },
     rel: { default: void 0 },
-    underline: { type: Boolean, default: !1 },
+    underline: { default: "none" },
     tone: { default: "default" },
     component: { default: void 0 }
   },
   setup(t) {
-    const n = t, e = N(), i = l(() => n.to !== void 0), a = l(() => i.value ? n.component ?? ae("RouterLink") : "a"), r = l(() => n.rel ? n.rel : n.target === "_blank" ? "noopener noreferrer" : void 0), u = l(
-      () => P(
+    const n = t, e = j(), l = a(() => n.to !== void 0), o = a(() => l.value ? n.component ?? fe("RouterLink") : "a"), i = a(() => n.rel ? n.rel : n.target === "_blank" ? "noopener noreferrer" : void 0), r = a(
+      () => K(
         "vf-link",
-        n.underline && "vf-link--underline",
+        n.underline === "hover" && "vf-link--underline-hover",
+        n.underline === "always" && "vf-link--underline-always",
         n.tone === "muted" && "vf-link--muted"
       )
-    ), v = l(() => i.value ? {
+    ), g = a(() => l.value ? {
       to: n.to,
       target: n.target,
-      rel: r.value
+      rel: i.value
     } : {
       href: n.href,
       target: n.target,
-      rel: r.value
-    }), f = l(() => ({
+      rel: i.value
+    }), v = a(() => ({
       ...e,
-      ...v.value,
-      class: u.value
+      ...g.value,
+      class: r.value
     }));
-    return (b, d) => (c(), j(ae(a.value), Ve(xe(f.value)), {
-      default: U(() => [
-        C(b.$slots, "default")
+    return (T, p) => (d(), q(fe(o.value), Be(Ie(v.value)), {
+      default: G(() => [
+        O(T.$slots, "default")
       ]),
       _: 3
     }, 16));
   }
-}), Lt = { class: "vf-nav-menu__node" }, St = { class: "vf-nav-menu__item-content" }, Dt = { class: "vf-nav-menu__group-label" }, zt = ["aria-expanded", "disabled"], Mt = { class: "vf-nav-menu__item-content" }, Pt = {
+}), Rt = ["aria-expanded", "disabled"], Ft = { class: "vf-menu-bar__item-content" }, Ht = {
+  key: 0,
+  class: "vf-menu-bar__leading-icon",
+  "aria-hidden": "true"
+}, Nt = { class: "vf-menu-bar__label" }, Kt = {
+  class: "vf-menu-bar__icon",
+  "aria-hidden": "true"
+}, jt = { class: "vf-menu-bar__item-content" }, qt = {
+  key: 0,
+  class: "vf-menu-bar__leading-icon",
+  "aria-hidden": "true"
+}, Wt = { class: "vf-menu-bar__label" }, Ut = ["aria-current", "disabled"], Xt = { class: "vf-menu-bar__item-content" }, Yt = {
+  key: 0,
+  class: "vf-menu-bar__leading-icon",
+  "aria-hidden": "true"
+}, Gt = { class: "vf-menu-bar__label" }, Qt = {
+  class: "vf-menu-bar__submenu-list",
+  role: "menu"
+}, Jt = /* @__PURE__ */ M({
+  name: "VfMenuBarItemNode",
+  __name: "VfMenuBarItemNode",
+  props: {
+    item: {},
+    depth: {},
+    parentPath: {},
+    activeValue: {},
+    openPath: {},
+    hoverEnabled: { type: Boolean }
+  },
+  emits: ["openPathChange", "select"],
+  setup(t, { emit: n }) {
+    const e = t, l = n, o = a(() => [...e.parentPath, e.item.value]), i = a(
+      () => {
+        var w;
+        return e.item.kind !== "group" && !!((w = e.item.children) != null && w.length);
+      }
+    ), r = a(() => e.item.kind === "group"), g = a(
+      () => e.item.href !== void 0 || e.item.to !== void 0
+    ), v = a(() => e.activeValue === e.item.value), T = a(
+      () => !v.value && R(e.item, e.activeValue)
+    ), p = a(
+      () => o.value.every((w, B) => e.openPath[B] === w)
+    ), c = a(() => e.item.to !== void 0 ? fe("RouterLink") : "a"), m = a(() => e.item.rel ? e.item.rel : e.item.target === "_blank" ? "noopener noreferrer" : void 0), h = a(() => e.item.to !== void 0 ? {
+      to: e.item.to,
+      target: e.item.target,
+      rel: m.value
+    } : {
+      href: e.item.href,
+      target: e.item.target,
+      rel: m.value
+    });
+    function x() {
+      !i.value || e.item.disabled || l("openPathChange", o.value);
+    }
+    function L() {
+      if (!(!i.value || e.item.disabled)) {
+        if (p.value) {
+          l("openPathChange", e.parentPath);
+          return;
+        }
+        l("openPathChange", o.value);
+      }
+    }
+    function D(w) {
+      if (e.item.disabled) {
+        w == null || w.preventDefault();
+        return;
+      }
+      l("select", e.item);
+    }
+    function R(w, B) {
+      var s;
+      return !B || !((s = w.children) != null && s.length) ? !1 : w.children.some(
+        (k) => k.value === B || R(k, B)
+      );
+    }
+    function I(w) {
+      if (i.value) {
+        if (w.key === "Enter" || w.key === " " || w.key === "ArrowDown" || e.depth > 0 && w.key === "ArrowRight") {
+          w.preventDefault(), x();
+          return;
+        }
+        (w.key === "ArrowLeft" || w.key === "Escape") && e.depth > 0 && (w.preventDefault(), l("openPathChange", e.parentPath));
+      }
+    }
+    function u() {
+      e.hoverEnabled && x();
+    }
+    return (w, B) => {
+      const s = Ee("VfMenuBarItemNode", !0);
+      return d(), _("li", {
+        class: P(["vf-menu-bar__node", [
+          `vf-menu-bar__node--depth-${t.depth}`,
+          i.value && "vf-menu-bar__node--branch",
+          p.value && "vf-menu-bar__node--open"
+        ]]),
+        onMouseenter: u
+      }, [
+        r.value ? (d(), _("div", {
+          key: 0,
+          class: "vf-menu-bar__group",
+          role: "presentation",
+          style: U({ "--vf-menu-bar-depth": String(t.depth) })
+        }, F(t.item.label), 5)) : i.value ? (d(), _("button", {
+          key: 1,
+          type: "button",
+          class: P(["vf-menu-bar__item vf-menu-bar__item--branch", [
+            t.depth === 0 && "vf-menu-bar__item--top",
+            T.value && "vf-menu-bar__item--ancestor-active",
+            p.value && "vf-menu-bar__item--open"
+          ]]),
+          style: U({ "--vf-menu-bar-depth": String(t.depth) }),
+          "aria-expanded": p.value,
+          "aria-haspopup": "menu",
+          role: "menuitem",
+          disabled: t.item.disabled,
+          onClick: L,
+          onKeydown: I
+        }, [
+          V("span", Ft, [
+            t.item.leadingIcon ? (d(), _("span", Ht, [
+              H(y(J), {
+                icon: t.item.leadingIcon,
+                size: "1rem"
+              }, null, 8, ["icon"])
+            ])) : E("", !0),
+            V("span", Nt, F(t.item.label), 1)
+          ]),
+          V("span", Kt, [
+            H(y(J), {
+              icon: t.depth === 0 ? y(W).chevronDown : p.value ? y(W).minus : y(W).plus,
+              size: "0.875rem"
+            }, null, 8, ["icon"])
+          ])
+        ], 46, Rt)) : g.value ? (d(), q(fe(c.value), N({ key: 2 }, h.value, {
+          class: ["vf-menu-bar__item", [
+            t.depth === 0 && "vf-menu-bar__item--top",
+            v.value && "vf-menu-bar__item--active",
+            T.value && "vf-menu-bar__item--ancestor-active",
+            t.item.disabled && "vf-menu-bar__item--disabled"
+          ]],
+          style: { "--vf-menu-bar-depth": String(t.depth) },
+          "aria-current": v.value ? "page" : void 0,
+          role: "menuitem",
+          onClick: D
+        }), {
+          default: G(() => [
+            V("span", jt, [
+              t.item.leadingIcon ? (d(), _("span", qt, [
+                H(y(J), {
+                  icon: t.item.leadingIcon,
+                  size: "1rem"
+                }, null, 8, ["icon"])
+              ])) : E("", !0),
+              V("span", Wt, F(t.item.label), 1)
+            ])
+          ]),
+          _: 1
+        }, 16, ["class", "style", "aria-current"])) : (d(), _("button", {
+          key: 3,
+          type: "button",
+          class: P(["vf-menu-bar__item", [
+            t.depth === 0 && "vf-menu-bar__item--top",
+            v.value && "vf-menu-bar__item--active",
+            T.value && "vf-menu-bar__item--ancestor-active",
+            t.item.disabled && "vf-menu-bar__item--disabled"
+          ]]),
+          style: U({ "--vf-menu-bar-depth": String(t.depth) }),
+          "aria-current": v.value ? "page" : void 0,
+          role: "menuitem",
+          disabled: t.item.disabled,
+          onClick: B[0] || (B[0] = (k) => D())
+        }, [
+          V("span", Xt, [
+            t.item.leadingIcon ? (d(), _("span", Yt, [
+              H(y(J), {
+                icon: t.item.leadingIcon,
+                size: "1rem"
+              }, null, 8, ["icon"])
+            ])) : E("", !0),
+            V("span", Gt, F(t.item.label), 1)
+          ])
+        ], 14, Ut)),
+        H(de, {
+          name: "vf-floating-transition",
+          appear: ""
+        }, {
+          default: G(() => [
+            i.value && p.value ? (d(), _("div", {
+              key: 0,
+              class: P([
+                "vf-menu-bar__submenu",
+                t.depth === 0 ? "vf-menu-bar__submenu--root" : "vf-menu-bar__submenu--nested"
+              ])
+            }, [
+              V("ul", Qt, [
+                (d(!0), _(re, null, ue(t.item.children, (k) => (d(), q(s, {
+                  key: k.value,
+                  item: k,
+                  depth: t.depth + 1,
+                  "parent-path": o.value,
+                  "active-value": t.activeValue,
+                  "open-path": t.openPath,
+                  "hover-enabled": !0,
+                  onOpenPathChange: B[1] || (B[1] = (f) => l("openPathChange", f)),
+                  onSelect: B[2] || (B[2] = (f) => l("select", f))
+                }, null, 8, ["item", "depth", "parent-path", "active-value", "open-path"]))), 128))
+              ])
+            ], 2)) : E("", !0)
+          ]),
+          _: 1
+        })
+      ], 34);
+    };
+  }
+}), Zt = ["aria-label"], en = {
+  class: "vf-menu-bar__list",
+  role: "menubar"
+}, ka = /* @__PURE__ */ M({
+  __name: "VfMenuBar",
+  props: {
+    items: {},
+    modelValue: { default: void 0 },
+    defaultValue: { default: void 0 },
+    ariaLabel: { default: "Menu bar" },
+    variant: { default: "default" }
+  },
+  emits: ["update:modelValue", "change", "select"],
+  setup(t, { emit: n }) {
+    const e = t, l = n, o = A(null), i = A(e.defaultValue), r = A([]), g = a(() => e.modelValue ?? i.value);
+    let v;
+    function T(x) {
+      e.modelValue === void 0 && (i.value = x), l("update:modelValue", x), l("change", x);
+    }
+    function p(x) {
+      T(x.value), r.value = [], l("select", x);
+    }
+    function c(x) {
+      h(), r.value = x;
+    }
+    function m() {
+      h(), v = setTimeout(() => {
+        r.value = [], v = void 0;
+      }, 120);
+    }
+    function h() {
+      v !== void 0 && (clearTimeout(v), v = void 0);
+    }
+    return $e(
+      o,
+      () => {
+        r.value = [];
+      },
+      {
+        enabled: a(() => r.value.length > 0)
+      }
+    ), _e(
+      (x) => {
+        r.value.length !== 0 && (x.preventDefault(), r.value = []);
+      },
+      {
+        enabled: a(() => r.value.length > 0)
+      }
+    ), ne(
+      () => e.items,
+      () => {
+        r.value = [];
+      },
+      { deep: !0 }
+    ), se(() => {
+      h();
+    }), (x, L) => (d(), _("nav", {
+      ref_key: "rootRef",
+      ref: o,
+      class: P(["vf-menu-bar", `vf-menu-bar--${t.variant}`]),
+      "aria-label": t.ariaLabel,
+      onMouseenter: h,
+      onMouseleave: m
+    }, [
+      V("ul", en, [
+        (d(!0), _(re, null, ue(t.items, (D) => (d(), q(Jt, {
+          key: D.value,
+          item: D,
+          depth: 0,
+          "parent-path": [],
+          "active-value": g.value,
+          "open-path": r.value,
+          "hover-enabled": r.value.length > 0,
+          onOpenPathChange: c,
+          onSelect: p
+        }, null, 8, ["item", "active-value", "open-path", "hover-enabled"]))), 128))
+      ])
+    ], 42, Zt));
+  }
+}), tn = { class: "vf-nav-menu__node" }, nn = { class: "vf-nav-menu__item-content" }, an = { class: "vf-nav-menu__group-label" }, on = ["aria-expanded", "disabled"], ln = { class: "vf-nav-menu__item-content" }, sn = {
   key: 0,
   class: "vf-nav-menu__leading-icon",
   "aria-hidden": "true"
-}, Nt = { class: "vf-nav-menu__label" }, Ht = { class: "vf-nav-menu__item-content" }, Rt = {
+}, rn = { class: "vf-nav-menu__label" }, un = { class: "vf-nav-menu__item-content" }, dn = {
   key: 0,
   class: "vf-nav-menu__leading-icon",
   "aria-hidden": "true"
-}, Ft = { class: "vf-nav-menu__label" }, Kt = ["aria-current", "disabled"], jt = { class: "vf-nav-menu__item-content" }, qt = {
+}, cn = { class: "vf-nav-menu__label" }, fn = ["aria-current", "disabled"], vn = { class: "vf-nav-menu__item-content" }, mn = {
   key: 0,
   class: "vf-nav-menu__leading-icon",
   "aria-hidden": "true"
-}, Ut = { class: "vf-nav-menu__label" }, Wt = {
+}, pn = { class: "vf-nav-menu__label" }, hn = {
   key: 4,
   class: "vf-nav-menu__list vf-nav-menu__list--nested"
-}, Yt = { class: "vf-nav-menu__list vf-nav-menu__list--nested" }, Xt = /* @__PURE__ */ S({
+}, bn = { class: "vf-nav-menu__list vf-nav-menu__list--nested" }, _n = /* @__PURE__ */ M({
   name: "VfNavMenuItemNode",
   __name: "VfNavMenuItemNode",
   props: {
@@ -1249,320 +1613,339 @@ const nt = {
   },
   emits: ["toggle", "select"],
   setup(t, { emit: n }) {
-    const e = t, i = n, a = l(() => {
-      var p;
-      return !!((p = e.item.children) != null && p.length);
-    }), r = l(() => e.item.kind === "group"), u = l(
+    const e = t, l = n, o = a(() => {
+      var k;
+      return !!((k = e.item.children) != null && k.length);
+    }), i = a(() => e.item.kind === "group"), r = a(
       () => e.expandedValues.includes(e.item.value)
-    ), v = l(() => e.activeValue === e.item.value), f = l(
+    ), g = a(() => e.activeValue === e.item.value), v = a(
+      () => !g.value && L(e.item, e.activeValue)
+    ), T = a(
       () => e.item.href !== void 0 || e.item.to !== void 0
-    ), b = l(() => e.item.to !== void 0 ? ae("RouterLink") : "a"), d = l(() => e.item.rel ? e.item.rel : e.item.target === "_blank" ? "noopener noreferrer" : void 0), T = l(() => e.item.to !== void 0 ? {
+    ), p = a(() => e.item.to !== void 0 ? fe("RouterLink") : "a"), c = a(() => e.item.rel ? e.item.rel : e.item.target === "_blank" ? "noopener noreferrer" : void 0), m = a(() => e.item.to !== void 0 ? {
       to: e.item.to,
       target: e.item.target,
-      rel: d.value
+      rel: c.value
     } : {
       href: e.item.href,
       target: e.item.target,
-      rel: d.value
+      rel: c.value
     });
-    function g() {
-      e.item.disabled || i("toggle", {
+    function h() {
+      e.item.disabled || l("toggle", {
         value: e.item.value,
         parentPath: e.parentPath
       });
     }
-    function V(p) {
+    function x(k) {
       if (e.item.disabled) {
-        p == null || p.preventDefault();
+        k == null || k.preventDefault();
         return;
       }
-      i("select", e.item);
+      l("select", e.item);
     }
-    function A(p) {
-      const s = p;
-      return s.style.transition = "height var(--vf-motion-duration-normal) var(--vf-motion-ease-standard), opacity var(--vf-motion-duration-normal) var(--vf-motion-ease-standard)", s;
+    function L(k, f) {
+      var S;
+      return !f || !((S = k.children) != null && S.length) ? !1 : k.children.some(
+        ($) => $.value === f || L($, f)
+      );
     }
-    function D(p) {
-      const s = A(p);
-      s.style.overflow = "hidden", s.style.height = "0", s.style.opacity = "0";
+    function D(k) {
+      const f = k;
+      return f.style.transition = "height var(--vf-motion-duration-normal) var(--vf-motion-ease-standard), opacity var(--vf-motion-duration-normal) var(--vf-motion-ease-standard)", f;
     }
-    function z(p) {
-      const s = A(p);
+    function R(k) {
+      const f = D(k);
+      f.style.overflow = "hidden", f.style.height = "0", f.style.opacity = "0";
+    }
+    function I(k) {
+      const f = D(k);
       requestAnimationFrame(() => {
-        s.style.height = `${s.scrollHeight}px`, s.style.opacity = "1";
+        f.style.height = `${f.scrollHeight}px`, f.style.opacity = "1";
       });
     }
-    function k(p) {
-      const s = p;
-      s.style.transition = "", s.style.overflow = "", s.style.height = "", s.style.opacity = "";
+    function u(k) {
+      const f = k;
+      f.style.transition = "", f.style.overflow = "", f.style.height = "", f.style.opacity = "";
     }
-    function m(p) {
-      const s = A(p);
-      s.style.overflow = "hidden", s.style.height = `${s.scrollHeight}px`, s.style.opacity = "1";
+    function w(k) {
+      const f = D(k);
+      f.style.overflow = "hidden", f.style.height = `${f.scrollHeight}px`, f.style.opacity = "1";
     }
-    function o(p) {
-      const s = p;
-      s.offsetHeight, requestAnimationFrame(() => {
-        s.style.height = "0", s.style.opacity = "0";
+    function B(k) {
+      const f = k;
+      f.offsetHeight, requestAnimationFrame(() => {
+        f.style.height = "0", f.style.opacity = "0";
       });
     }
-    function y(p) {
-      const s = p;
-      s.style.transition = "", s.style.overflow = "", s.style.height = "", s.style.opacity = "";
+    function s(k) {
+      const f = k;
+      f.style.transition = "", f.style.overflow = "", f.style.height = "", f.style.opacity = "";
     }
-    return (p, s) => {
-      const E = Pe("VfNavMenuItemNode", !0);
-      return c(), _("li", Lt, [
-        r.value ? (c(), _("div", {
+    return (k, f) => {
+      const S = Ee("VfNavMenuItemNode", !0);
+      return d(), _("li", tn, [
+        i.value ? (d(), _("div", {
           key: 0,
-          class: R(["vf-nav-menu__group", `vf-nav-menu__group--level-${t.level}`]),
-          style: Y({ "--vf-nav-menu-level": String(t.level) })
+          class: P(["vf-nav-menu__group", `vf-nav-menu__group--level-${t.level}`]),
+          style: U({ "--vf-nav-menu-level": String(t.level) })
         }, [
-          x("span", St, [
-            x("span", Dt, F(t.item.label), 1)
+          V("span", nn, [
+            V("span", an, F(t.item.label), 1)
           ])
-        ], 6)) : a.value ? (c(), _("button", {
+        ], 6)) : o.value ? (d(), _("button", {
           key: 1,
-          class: R([
+          class: P([
             "vf-nav-menu__item",
             "vf-nav-menu__item--branch",
-            u.value && "vf-nav-menu__item--expanded"
+            !t.item.leadingIcon && "vf-nav-menu__item--icon-offset",
+            v.value && "vf-nav-menu__item--ancestor-active",
+            r.value && "vf-nav-menu__item--expanded"
           ]),
-          style: Y({ "--vf-nav-menu-level": String(t.level) }),
-          "aria-expanded": u.value,
+          style: U({ "--vf-nav-menu-level": String(t.level) }),
+          "aria-expanded": r.value,
           disabled: t.item.disabled,
           type: "button",
-          onClick: g
+          onClick: h
         }, [
-          x("span", Mt, [
-            t.item.leadingIcon ? (c(), _("span", Pt, [
-              q(h(ee), {
+          V("span", ln, [
+            t.item.leadingIcon ? (d(), _("span", sn, [
+              H(y(J), {
                 icon: t.item.leadingIcon,
                 size: "1rem"
               }, null, 8, ["icon"])
-            ])) : O("", !0),
-            x("span", Nt, F(t.item.label), 1)
+            ])) : E("", !0),
+            V("span", rn, F(t.item.label), 1)
           ]),
-          x("span", {
-            class: R(["vf-nav-menu__icon", u.value && "vf-nav-menu__icon--open"]),
+          V("span", {
+            class: P(["vf-nav-menu__icon", r.value && "vf-nav-menu__icon--open"]),
             "aria-hidden": "true"
           }, [
-            q(h(ee), {
-              icon: h(W).chevronDown,
+            H(y(J), {
+              icon: y(W).chevronDown,
               size: "0.875rem"
             }, null, 8, ["icon"])
           ], 2)
-        ], 14, zt)) : f.value ? (c(), j(ae(b.value), H({ key: 2 }, T.value, {
+        ], 14, on)) : T.value ? (d(), q(fe(p.value), N({ key: 2 }, m.value, {
           class: [
             "vf-nav-menu__item",
-            v.value && "vf-nav-menu__item--active",
+            !t.item.leadingIcon && "vf-nav-menu__item--icon-offset",
+            g.value && "vf-nav-menu__item--active",
+            v.value && "vf-nav-menu__item--ancestor-active",
             t.item.disabled && "vf-nav-menu__item--disabled"
           ],
           style: { "--vf-nav-menu-level": String(t.level) },
-          "aria-current": v.value ? "page" : void 0,
-          onClick: V
+          "aria-current": g.value ? "page" : void 0,
+          onClick: x
         }), {
-          default: U(() => [
-            x("span", Ht, [
-              t.item.leadingIcon ? (c(), _("span", Rt, [
-                q(h(ee), {
+          default: G(() => [
+            V("span", un, [
+              t.item.leadingIcon ? (d(), _("span", dn, [
+                H(y(J), {
                   icon: t.item.leadingIcon,
                   size: "1rem"
                 }, null, 8, ["icon"])
-              ])) : O("", !0),
-              x("span", Ft, F(t.item.label), 1)
+              ])) : E("", !0),
+              V("span", cn, F(t.item.label), 1)
             ])
           ]),
           _: 1
-        }, 16, ["class", "style", "aria-current"])) : (c(), _("button", {
+        }, 16, ["class", "style", "aria-current"])) : (d(), _("button", {
           key: 3,
-          class: R([
+          class: P([
             "vf-nav-menu__item",
-            v.value && "vf-nav-menu__item--active",
+            !t.item.leadingIcon && "vf-nav-menu__item--icon-offset",
+            g.value && "vf-nav-menu__item--active",
+            v.value && "vf-nav-menu__item--ancestor-active",
             t.item.disabled && "vf-nav-menu__item--disabled"
           ]),
-          style: Y({ "--vf-nav-menu-level": String(t.level) }),
-          "aria-current": v.value ? "page" : void 0,
+          style: U({ "--vf-nav-menu-level": String(t.level) }),
+          "aria-current": g.value ? "page" : void 0,
           disabled: t.item.disabled,
           type: "button",
-          onClick: s[0] || (s[0] = (L) => V())
+          onClick: f[0] || (f[0] = ($) => x())
         }, [
-          x("span", jt, [
-            t.item.leadingIcon ? (c(), _("span", qt, [
-              q(h(ee), {
+          V("span", vn, [
+            t.item.leadingIcon ? (d(), _("span", mn, [
+              H(y(J), {
                 icon: t.item.leadingIcon,
                 size: "1rem"
               }, null, 8, ["icon"])
-            ])) : O("", !0),
-            x("span", Ut, F(t.item.label), 1)
+            ])) : E("", !0),
+            V("span", pn, F(t.item.label), 1)
           ])
-        ], 14, Kt)),
-        a.value && r.value ? (c(), _("ul", Wt, [
-          (c(!0), _(se, null, ie(t.item.children, (L) => (c(), j(E, {
-            key: L.value,
-            item: L,
+        ], 14, fn)),
+        o.value && i.value ? (d(), _("ul", hn, [
+          (d(!0), _(re, null, ue(t.item.children, ($) => (d(), q(S, {
+            key: $.value,
+            item: $,
             level: t.level + 1,
             "parent-path": [...t.parentPath, t.item.value],
             "active-value": t.activeValue,
             "expanded-values": t.expandedValues,
-            onToggle: s[1] || (s[1] = (M) => i("toggle", M)),
-            onSelect: s[2] || (s[2] = (M) => i("select", M))
+            onToggle: f[1] || (f[1] = (C) => l("toggle", C)),
+            onSelect: f[2] || (f[2] = (C) => l("select", C))
           }, null, 8, ["item", "level", "parent-path", "active-value", "expanded-values"]))), 128))
-        ])) : a.value ? (c(), j(oe, {
+        ])) : o.value ? (d(), q(de, {
           key: 5,
-          onBeforeEnter: D,
-          onEnter: z,
-          onAfterEnter: k,
-          onBeforeLeave: m,
-          onLeave: o,
-          onAfterLeave: y
+          onBeforeEnter: R,
+          onEnter: I,
+          onAfterEnter: u,
+          onBeforeLeave: w,
+          onLeave: B,
+          onAfterLeave: s
         }, {
-          default: U(() => [
-            u.value ? (c(), _("div", {
+          default: G(() => [
+            r.value ? (d(), _("div", {
               key: 0,
-              class: R([
+              class: P([
                 "vf-nav-menu__collapse",
                 `vf-nav-menu__collapse--level-${t.level}`
               ])
             }, [
-              x("ul", Yt, [
-                (c(!0), _(se, null, ie(t.item.children, (L) => (c(), j(E, {
-                  key: L.value,
-                  item: L,
+              V("ul", bn, [
+                (d(!0), _(re, null, ue(t.item.children, ($) => (d(), q(S, {
+                  key: $.value,
+                  item: $,
                   level: t.level + 1,
                   "parent-path": [...t.parentPath, t.item.value],
                   "active-value": t.activeValue,
                   "expanded-values": t.expandedValues,
-                  onToggle: s[3] || (s[3] = (M) => i("toggle", M)),
-                  onSelect: s[4] || (s[4] = (M) => i("select", M))
+                  onToggle: f[3] || (f[3] = (C) => l("toggle", C)),
+                  onSelect: f[4] || (f[4] = (C) => l("select", C))
                 }, null, 8, ["item", "level", "parent-path", "active-value", "expanded-values"]))), 128))
               ])
-            ], 2)) : O("", !0)
+            ], 2)) : E("", !0)
           ]),
           _: 1
-        })) : O("", !0)
+        })) : E("", !0)
       ]);
     };
   }
-}), Gt = ["aria-label"], Qt = { class: "vf-nav-menu__list" }, jn = /* @__PURE__ */ S({
+}), yn = ["aria-label"], gn = { class: "vf-nav-menu__list" }, $a = /* @__PURE__ */ M({
   __name: "VfNavMenu",
   props: {
     items: {},
     modelValue: { default: void 0 },
     defaultValue: { default: void 0 },
     ariaLabel: { default: "Navigation" },
-    expandMode: { default: "multiple" }
+    expandMode: { default: "multiple" },
+    variant: { default: "default" }
   },
   emits: ["update:modelValue", "change", "select"],
   setup(t, { emit: n }) {
-    const e = t, i = n, a = I(e.defaultValue), r = l(() => e.modelValue ?? a.value), u = I([]);
-    function v(o, y) {
-      return o.some(
-        (p) => {
+    const e = t, l = n, o = A(e.defaultValue), i = a(() => e.modelValue ?? o.value), r = A([]);
+    function g(u, w) {
+      return u.some(
+        (B) => {
           var s;
-          return y(p) || ((s = p.children) != null && s.length ? v(p.children, y) : !1);
+          return w(B) || ((s = B.children) != null && s.length ? g(B.children, w) : !1);
         }
       );
     }
-    const f = l(
-      () => v(e.items, (o) => o.kind === "group")
-    ), b = l(
-      () => v(e.items, (o) => !!o.leadingIcon)
-    ), d = l(() => !f.value && !b.value);
-    function T(o) {
-      var y;
-      return o.kind !== "group" && !!((y = o.children) != null && y.length);
+    const v = a(
+      () => g(e.items, (u) => u.kind === "group")
+    ), T = a(
+      () => g(e.items, (u) => !!u.leadingIcon)
+    ), p = a(() => !v.value && !T.value);
+    function c(u) {
+      var w;
+      return u.kind !== "group" && !!((w = u.children) != null && w.length);
     }
-    function g(o, y, p = []) {
+    function m(u, w, B = []) {
       var s;
-      if (!y)
+      if (!w)
         return [];
-      for (const E of o) {
-        if (E.value === y)
-          return p;
-        if ((s = E.children) != null && s.length) {
-          const L = g(E.children, y, [
-            ...p,
-            E.value
+      for (const k of u) {
+        if (k.value === w)
+          return B;
+        if ((s = k.children) != null && s.length) {
+          const f = m(k.children, w, [
+            ...B,
+            k.value
           ]);
-          if (L.length)
-            return L;
+          if (f.length)
+            return f;
         }
       }
       return [];
     }
-    function V() {
-      const o = g(e.items, r.value);
-      u.value = Array.from(
-        /* @__PURE__ */ new Set([...u.value, ...o])
+    function h() {
+      const u = m(e.items, i.value);
+      r.value = Array.from(
+        /* @__PURE__ */ new Set([...r.value, ...u])
       );
     }
-    function A(o, y) {
-      var L;
-      if (!y.length)
-        return o;
-      const [p, ...s] = y, E = o.find((M) => M.value === p);
-      return (L = E == null ? void 0 : E.children) != null && L.length ? A(E.children, s) : [];
+    function x(u, w) {
+      var f;
+      if (!w.length)
+        return u;
+      const [B, ...s] = w, k = u.find((S) => S.value === B);
+      return (f = k == null ? void 0 : k.children) != null && f.length ? x(k.children, s) : [];
     }
-    function D(o) {
-      return o.flatMap((y) => {
+    function L(u) {
+      return u.flatMap((w) => {
         var s;
-        const p = (s = y.children) != null && s.length ? D(y.children) : [];
-        return T(y) ? [y.value, ...p] : p;
+        const B = (s = w.children) != null && s.length ? L(w.children) : [];
+        return c(w) ? [w.value, ...B] : B;
       });
     }
-    function z(o) {
-      e.modelValue === void 0 && (a.value = o), i("update:modelValue", o), i("change", o);
+    function D(u) {
+      e.modelValue === void 0 && (o.value = u), l("update:modelValue", u), l("change", u);
     }
-    function k(o) {
-      z(o.value), u.value = Array.from(
+    function R(u) {
+      D(u.value), r.value = Array.from(
         /* @__PURE__ */ new Set([
-          ...u.value,
-          ...g(e.items, o.value)
+          ...r.value,
+          ...m(e.items, u.value)
         ])
-      ), i("select", o);
+      ), l("select", u);
     }
-    function m(o) {
-      const { value: y, parentPath: p } = o;
-      if (u.value.includes(y)) {
-        u.value = u.value.filter(
-          (s) => s !== y
+    function I(u) {
+      const { value: w, parentPath: B } = u;
+      if (r.value.includes(w)) {
+        r.value = r.value.filter(
+          (s) => s !== w
         );
         return;
       }
       if (e.expandMode === "single") {
-        const E = A(e.items, p).filter((L) => L.value !== y && T(L)).flatMap((L) => D([L]));
-        u.value = u.value.filter(
-          (L) => !E.includes(L)
+        const k = x(e.items, B).filter((f) => f.value !== w && c(f)).flatMap((f) => L([f]));
+        r.value = r.value.filter(
+          (f) => !k.includes(f)
         );
       }
-      u.value = [...u.value, y];
+      r.value = [...r.value, w];
     }
-    return J(
-      () => [e.items, r.value],
+    return ne(
+      () => [e.items, i.value],
       () => {
-        V();
+        h();
       },
       { immediate: !0, deep: !0 }
-    ), (o, y) => (c(), _("nav", {
-      class: R(["vf-nav-menu", d.value && "vf-nav-menu--simple"]),
+    ), (u, w) => (d(), _("nav", {
+      class: P([
+        "vf-nav-menu",
+        `vf-nav-menu--${t.variant}`,
+        p.value && "vf-nav-menu--simple"
+      ]),
       "aria-label": t.ariaLabel
     }, [
-      x("ul", Qt, [
-        (c(!0), _(se, null, ie(t.items, (p) => (c(), j(Xt, {
-          key: p.value,
-          item: p,
+      V("ul", gn, [
+        (d(!0), _(re, null, ue(t.items, (B) => (d(), q(_n, {
+          key: B.value,
+          item: B,
           level: 0,
           "parent-path": [],
-          "active-value": r.value,
-          "expanded-values": u.value,
-          onToggle: m,
-          onSelect: k
+          "active-value": i.value,
+          "expanded-values": r.value,
+          onToggle: I,
+          onSelect: R
         }, null, 8, ["item", "active-value", "expanded-values"]))), 128))
       ])
-    ], 10, Gt));
+    ], 10, yn));
   }
-}), Jt = { key: 0 }, Zt = { class: "vf-panel__title" }, qn = /* @__PURE__ */ S({
+}), wn = { key: 0 }, kn = { class: "vf-panel__title" }, Ta = /* @__PURE__ */ M({
   inheritAttrs: !1,
   __name: "VfPanel",
   props: {
@@ -1570,19 +1953,19 @@ const nt = {
     subtle: { type: Boolean, default: !1 }
   },
   setup(t) {
-    const n = t, e = N(), i = l(
-      () => P("vf-panel", n.subtle && "vf-panel--subtle")
+    const n = t, e = j(), l = a(
+      () => K("vf-panel", n.subtle && "vf-panel--subtle")
     );
-    return (a, r) => (c(), _("section", H({ class: i.value }, h(e)), [
-      n.title || a.$slots.header ? (c(), _("header", Jt, [
-        C(a.$slots, "header", {}, () => [
-          x("h3", Zt, F(n.title), 1)
+    return (o, i) => (d(), _("section", N({ class: l.value }, y(e)), [
+      n.title || o.$slots.header ? (d(), _("header", wn, [
+        O(o.$slots, "header", {}, () => [
+          V("h3", kn, F(n.title), 1)
         ])
-      ])) : O("", !0),
-      C(a.$slots, "default")
+      ])) : E("", !0),
+      O(o.$slots, "default")
     ], 16));
   }
-}), en = { class: "vf-popover" }, tn = ["id", "aria-controls", "aria-expanded"], nn = ["id", "aria-labelledby"], Un = /* @__PURE__ */ S({
+}), $n = { class: "vf-popover" }, Tn = ["id", "aria-controls", "aria-expanded"], Vn = ["id", "aria-labelledby"], Va = /* @__PURE__ */ M({
   __name: "VfPopover",
   props: {
     open: { type: Boolean, default: void 0 },
@@ -1595,172 +1978,157 @@ const nt = {
   },
   emits: ["update:open", "openChange"],
   setup(t, { emit: n }) {
-    const e = t, i = n, a = I(null), r = I(null), u = I(null), v = Q({ prefix: "vf-popover-content" }), f = Q({ prefix: "vf-popover-trigger" }), b = {
-      enter: X.fast,
-      leave: X.fast
-    }, d = l(
+    const e = t, l = n, o = A(null), i = A(null), r = A(null), g = ee({ prefix: "vf-popover-content" }), v = ee({ prefix: "vf-popover-trigger" }), T = {
+      enter: Z.fast,
+      leave: Z.fast
+    }, p = a(
       () => e.disableTeleport || e.teleportTo === !1 || e.teleportTo === null
-    ), T = l(() => typeof e.teleportTo == "string" || typeof HTMLElement < "u" && e.teleportTo instanceof HTMLElement ? e.teleportTo : "body"), g = ce({
+    ), c = a(() => typeof e.teleportTo == "string" || typeof HTMLElement < "u" && e.teleportTo instanceof HTMLElement ? e.teleportTo : "body"), m = be({
       defaultOpen: e.defaultOpen,
-      open: l(() => e.open),
-      onOpenChange: (w) => {
-        i("update:open", w), i("openChange", w);
+      open: a(() => e.open),
+      onOpenChange: (C) => {
+        l("update:open", C), l("openChange", C);
       }
-    }), V = g.isOpen, A = l(
+    }), h = m.isOpen, x = a(
       () => e.placement === "bottom-end" ? ["bottom-end", "top-end"] : ["bottom-start", "top-start"]
     ), {
-      placement: D,
-      middlewareData: z,
-      styles: k
-    } = ye(a, r, {
-      enabled: V,
-      placement: l(() => e.placement),
-      middleware: l(
+      placement: L,
+      middlewareData: D,
+      styles: R
+    } = Te(o, i, {
+      enabled: h,
+      placement: a(() => e.placement),
+      middleware: a(
         () => [
-          pe(10),
-          me({ placements: A.value }),
-          he(),
-          u.value ? _e(u.value) : void 0
-        ].filter((w) => w !== void 0)
+          ge(10),
+          we({ placements: x.value }),
+          ke(),
+          r.value ? Ve(r.value) : void 0
+        ].filter((C) => C !== void 0)
       ),
       strategy: "fixed"
-    }), m = l(() => [
+    }), I = a(() => [
       "vf-popover__content",
-      D.value.startsWith("top") && "vf-popover__content--top"
-    ]), o = l(() => {
-      const w = z.value.arrow;
+      L.value.startsWith("top") && "vf-popover__content--top"
+    ]), u = a(() => {
+      const C = D.value.arrow;
       return {
-        x: (w == null ? void 0 : w.x) !== void 0 && (w == null ? void 0 : w.baseX) !== void 0 ? w.x - w.baseX : 0,
-        y: (w == null ? void 0 : w.y) !== void 0 && (w == null ? void 0 : w.baseY) !== void 0 ? w.y - w.baseY : 0
+        x: (C == null ? void 0 : C.x) !== void 0 && (C == null ? void 0 : C.baseX) !== void 0 ? C.x - C.baseX : 0,
+        y: (C == null ? void 0 : C.y) !== void 0 && (C == null ? void 0 : C.baseY) !== void 0 ? C.y - C.baseY : 0
       };
-    }), y = l(() => ({
-      left: `${o.value.x}px`,
-      top: `${o.value.y}px`
-    })), p = l(() => [
+    }), w = a(() => ({
+      left: `${u.value.x}px`,
+      top: `${u.value.y}px`
+    })), B = a(() => [
       "vf-popover__arrow",
-      D.value.startsWith("top") ? "vf-popover__arrow--top" : "vf-popover__arrow--bottom"
+      L.value.startsWith("top") ? "vf-popover__arrow--top" : "vf-popover__arrow--bottom"
     ]);
     async function s() {
-      var Z, de;
-      await ne();
-      const w = (Z = r.value) == null ? void 0 : Z.querySelector(
+      var ie, pe;
+      await le();
+      const C = (ie = i.value) == null ? void 0 : ie.querySelector(
         "[autofocus], [data-autofocus]"
       );
-      if (w) {
-        w.focus();
+      if (C) {
+        C.focus();
         return;
       }
-      (de = r.value) == null || de.focus();
+      (pe = i.value) == null || pe.focus();
     }
-    function E() {
-      g.open(), s();
+    function k() {
+      m.open(), s();
     }
-    function L() {
-      var w;
-      g.close(), (w = a.value) == null || w.focus();
+    function f() {
+      var C;
+      m.close(), (C = o.value) == null || C.focus();
     }
-    function M() {
-      if (V.value) {
-        L();
+    function S() {
+      if (h.value) {
+        f();
         return;
       }
-      E();
+      k();
     }
-    function B(w) {
-      (w.key === "Enter" || w.key === " ") && (w.preventDefault(), M()), w.key === "ArrowDown" && (w.preventDefault(), E());
+    function $(C) {
+      (C.key === "Enter" || C.key === " ") && (C.preventDefault(), S()), C.key === "ArrowDown" && (C.preventDefault(), k());
     }
-    return Oe(
-      [a, r],
+    return $e(
+      [o, i],
       () => {
-        V.value && e.closeOnOutsideClick && L();
+        h.value && e.closeOnOutsideClick && f();
       },
       {
-        enabled: V,
+        enabled: h,
         event: "click"
       }
-    ), ve(
-      (w) => {
-        !V.value || !e.closeOnEscape || (w.preventDefault(), L());
+    ), _e(
+      (C) => {
+        !h.value || !e.closeOnEscape || (C.preventDefault(), f());
       },
       {
-        enabled: V
+        enabled: h
       }
-    ), (w, Z) => (c(), _("div", en, [
-      x("div", {
-        id: h(f),
+    ), (C, ie) => (d(), _("div", $n, [
+      V("div", {
+        id: y(v),
         ref_key: "triggerRef",
-        ref: a,
+        ref: o,
         class: "vf-popover__trigger",
-        "aria-controls": h(v),
-        "aria-expanded": h(V),
+        "aria-controls": y(g),
+        "aria-expanded": y(h),
         "aria-haspopup": "dialog",
         tabindex: "0",
-        onClick: M,
-        onKeydown: B
+        onClick: S,
+        onKeydown: $
       }, [
-        C(w.$slots, "trigger", {
-          open: h(V),
-          toggle: M
+        O(C.$slots, "trigger", {
+          open: y(h),
+          toggle: S
         })
-      ], 40, tn),
-      (c(), j(ue, {
-        to: T.value,
-        disabled: d.value
+      ], 40, Tn),
+      (d(), q(he, {
+        to: c.value,
+        disabled: p.value
       }, [
-        q(oe, {
+        H(de, {
           name: "vf-floating-transition",
           appear: "",
-          duration: b
+          duration: T
         }, {
-          default: U(() => [
-            h(V) ? (c(), _("section", {
+          default: G(() => [
+            y(h) ? (d(), _("section", {
               key: 0,
-              id: h(v),
+              id: y(g),
               ref_key: "contentRef",
-              ref: r,
-              class: R(m.value),
-              style: Y(h(k)),
-              "aria-labelledby": h(f),
+              ref: i,
+              class: P(I.value),
+              style: U(y(R)),
+              "aria-labelledby": y(v),
               role: "dialog",
               tabindex: "-1"
             }, [
-              x("span", {
+              V("span", {
                 ref_key: "arrowRef",
-                ref: u,
-                class: R(p.value),
-                style: Y(y.value),
+                ref: r,
+                class: P(B.value),
+                style: U(w.value),
                 "aria-hidden": "true"
               }, null, 6),
-              C(w.$slots, "default", {
-                open: h(V),
-                close: L
+              O(C.$slots, "default", {
+                open: y(h),
+                close: f
               })
-            ], 14, nn)) : O("", !0)
+            ], 14, Vn)) : E("", !0)
           ]),
           _: 3
         })
       ], 8, ["to", "disabled"]))
     ]));
   }
-}), Wn = /* @__PURE__ */ S({
-  inheritAttrs: !1,
-  __name: "VfProse",
-  props: {
-    as: { default: "article" }
-  },
-  setup(t) {
-    const n = t, e = N(), i = l(() => P("vf-prose"));
-    return (a, r) => (c(), j(ae(n.as), H({ class: i.value }, h(e)), {
-      default: U(() => [
-        C(a.$slots, "default")
-      ]),
-      _: 3
-    }, 16, ["class"]));
-  }
-}), an = ["checked", "disabled", "value", "aria-invalid"], on = {
+}), Cn = ["checked", "disabled", "value", "aria-invalid"], xn = {
   key: 0,
   class: "vf-radio__content"
-}, Yn = /* @__PURE__ */ S({
+}, Ca = /* @__PURE__ */ M({
   inheritAttrs: !1,
   __name: "VfRadio",
   props: {
@@ -1773,55 +2141,272 @@ const nt = {
   },
   emits: ["update:modelValue", "change"],
   setup(t, { emit: n }) {
-    const e = t, i = n, a = N(), r = l(() => e.modelValue === e.value), u = l(
-      () => P(
+    const e = t, l = n, o = j(), i = a(() => e.modelValue === e.value), r = a(
+      () => K(
         "vf-radio",
         `vf-radio--${e.size}`,
-        r.value && "vf-radio--checked",
+        i.value && "vf-radio--checked",
         e.invalid && "vf-radio--invalid",
         e.disabled && "vf-radio--disabled",
-        a.class
+        o.class
       )
-    ), v = l(() => a.style), f = l(
+    ), g = a(() => o.style), v = a(
       () => Object.fromEntries(
-        Object.entries(a).filter(([d]) => d !== "class" && d !== "style")
+        Object.entries(o).filter(([p]) => p !== "class" && p !== "style")
       )
     );
-    function b(d) {
-      d.target.checked && (i("update:modelValue", e.value), i("change", e.value));
+    function T(p) {
+      p.target.checked && (l("update:modelValue", e.value), l("change", e.value));
     }
-    return (d, T) => (c(), _("label", {
-      class: R(u.value),
-      style: Y(v.value)
+    return (p, c) => (d(), _("label", {
+      class: P(r.value),
+      style: U(g.value)
     }, [
-      x("input", H({
+      V("input", N({
         class: "vf-radio__input",
         type: "radio",
-        checked: r.value,
+        checked: i.value,
         disabled: e.disabled,
         value: e.value,
         "aria-invalid": e.invalid || void 0
-      }, f.value, { onChange: b }), null, 16, an),
-      T[0] || (T[0] = x("span", {
+      }, v.value, { onChange: T }), null, 16, Cn),
+      c[0] || (c[0] = V("span", {
         class: "vf-radio__control",
         "aria-hidden": "true"
       }, [
-        x("span", { class: "vf-radio__dot" })
+        V("span", { class: "vf-radio__dot" })
       ], -1)),
-      t.label || d.$slots.default ? (c(), _("span", on, [
-        C(d.$slots, "default", {}, () => [
-          le(F(t.label), 1)
+      t.label || p.$slots.default ? (d(), _("span", xn, [
+        O(p.$slots, "default", {}, () => [
+          ve(F(t.label), 1)
         ])
-      ])) : O("", !0)
+      ])) : E("", !0)
     ], 6));
   }
-}), ln = ["checked", "disabled"], sn = {
+}), Bn = { class: "vf-select-wrap" }, In = ["name", "value"], En = ["id", "aria-controls", "aria-expanded", "aria-invalid", "disabled"], An = { class: "vf-select__value" }, On = {
+  class: "vf-select__icon",
+  "aria-hidden": "true"
+}, Ln = ["id", "aria-labelledby"], Dn = ["aria-selected", "disabled", "onClick"], xa = /* @__PURE__ */ M({
+  inheritAttrs: !1,
+  __name: "VfSelect",
+  props: {
+    modelValue: { default: "" },
+    options: {},
+    size: { default: "md" },
+    invalid: { type: Boolean, default: !1 },
+    placeholder: { default: void 0 },
+    disabled: { type: Boolean, default: !1 },
+    placement: { default: "bottom-start" },
+    teleportTo: { type: [String, null, Boolean], default: void 0 },
+    disableTeleport: { type: Boolean, default: !1 }
+  },
+  emits: ["update:modelValue"],
+  setup(t, { emit: n }) {
+    const e = t, l = n, o = j(), i = A(null), r = A(null), g = ee({ prefix: "vf-select-trigger" }), v = ee({ prefix: "vf-select-listbox" }), T = {
+      enter: Z.fast,
+      leave: Z.fast
+    }, p = be(), c = p.isOpen, m = a(
+      () => e.options.find((b) => b.value === e.modelValue)
+    ), h = a(
+      () => K(
+        "vf-select",
+        e.size !== "md" && `vf-select--${e.size}`,
+        e.invalid && "vf-select--invalid",
+        c.value && "vf-select--open",
+        !m.value && e.placeholder && "vf-select--placeholder"
+      )
+    ), x = a(() => m.value ? m.value.label : e.placeholder ?? ""), L = a(
+      () => e.disableTeleport || e.teleportTo === !1 || e.teleportTo === null
+    ), D = a(() => typeof e.teleportTo == "string" || typeof HTMLElement < "u" && e.teleportTo instanceof HTMLElement ? e.teleportTo : "body"), R = a(
+      () => e.placement === "bottom-end" ? ["bottom-end", "top-end"] : ["bottom-start", "top-start"]
+    ), { placement: I, styles: u } = Te(
+      i,
+      r,
+      {
+        enabled: c,
+        placement: a(() => e.placement),
+        middleware: a(
+          () => [
+            ge(2),
+            we({ placements: R.value }),
+            ke()
+          ]
+        ),
+        strategy: "fixed"
+      }
+    ), w = a(() => [
+      "vf-dropdown__menu",
+      "vf-select__menu",
+      I.value.startsWith("top") && "vf-dropdown__menu--top"
+    ]), B = a(() => ({
+      ...u.value,
+      minWidth: i.value ? `${i.value.offsetWidth}px` : void 0
+    }));
+    function s() {
+      var b;
+      return Array.from(
+        ((b = r.value) == null ? void 0 : b.querySelectorAll('[role="option"]')) ?? []
+      );
+    }
+    async function k(b = {}) {
+      await le(), await new Promise((Q) => {
+        window.requestAnimationFrame(() => Q());
+      });
+      const z = s(), Y = e.options.findIndex(
+        (Q) => Q.value === e.modelValue && !Q.disabled
+      ), ae = z[Math.max(Y, 0)];
+      if (!ae)
+        return;
+      const te = r.value;
+      if (te) {
+        const Q = ae.offsetTop, ce = Q + ae.offsetHeight, oe = 8, Ce = te.scrollTop, Me = Ce + te.clientHeight;
+        Q - oe < Ce ? te.scrollTop = Math.max(Q - oe, 0) : ce + oe > Me && (te.scrollTop = ce - te.clientHeight + oe);
+      }
+      b.focus && ae.focus();
+    }
+    function f(b = {}) {
+      e.disabled || (p.open(), k({ focus: b.focusSelected }));
+    }
+    function S(b = {}) {
+      var z;
+      p.close(), b.restoreFocus !== !1 && ((z = i.value) == null || z.focus());
+    }
+    function $() {
+      if (c.value) {
+        S();
+        return;
+      }
+      f();
+    }
+    function C(b, z = {}) {
+      b.disabled || (l("update:modelValue", b.value), S({ restoreFocus: z.restoreFocus }));
+    }
+    function ie(b) {
+      e.disabled || (b.key === "ArrowDown" || b.key === "ArrowUp" || b.key === "Enter" || b.key === " ") && (b.preventDefault(), f({ focusSelected: !0 }));
+    }
+    function pe(b) {
+      var ae, te, Q, ce;
+      const z = s(), Y = z.findIndex(
+        (oe) => oe === document.activeElement
+      );
+      if (b.key === "ArrowDown") {
+        b.preventDefault(), (ae = z[(Y + 1 + z.length) % z.length]) == null || ae.focus();
+        return;
+      }
+      if (b.key === "ArrowUp") {
+        b.preventDefault(), (te = z[(Y - 1 + z.length) % z.length]) == null || te.focus();
+        return;
+      }
+      if (b.key === "Home") {
+        b.preventDefault(), (Q = z[0]) == null || Q.focus();
+        return;
+      }
+      if (b.key === "End") {
+        b.preventDefault(), (ce = z[z.length - 1]) == null || ce.focus();
+        return;
+      }
+      if (b.key === "Escape") {
+        b.preventDefault(), S();
+        return;
+      }
+      if (b.key === "Enter" || b.key === " ") {
+        const oe = e.options[Y];
+        if (!oe)
+          return;
+        b.preventDefault(), C(oe, { restoreFocus: !0 });
+      }
+    }
+    return $e(
+      [i, r],
+      () => {
+        c.value && S({ restoreFocus: !1 });
+      },
+      {
+        enabled: c,
+        event: "click"
+      }
+    ), _e(
+      (b) => {
+        c.value && (b.preventDefault(), S());
+      },
+      {
+        enabled: c
+      }
+    ), (b, z) => (d(), _("div", Bn, [
+      typeof y(o).name == "string" ? (d(), _("input", {
+        key: 0,
+        type: "hidden",
+        name: y(o).name,
+        value: e.modelValue
+      }, null, 8, In)) : E("", !0),
+      V("button", {
+        id: typeof y(o).id == "string" ? y(o).id : y(g),
+        ref_key: "triggerRef",
+        ref: i,
+        type: "button",
+        class: P(h.value),
+        "aria-controls": y(v),
+        "aria-expanded": y(c),
+        "aria-haspopup": "listbox",
+        "aria-invalid": e.invalid || void 0,
+        disabled: e.disabled,
+        onClick: $,
+        onKeydown: ie
+      }, [
+        V("span", An, F(x.value), 1),
+        V("span", On, [
+          H(y(J), {
+            icon: y(W).chevronDown,
+            size: "1rem"
+          }, null, 8, ["icon"])
+        ])
+      ], 42, En),
+      (d(), q(he, {
+        to: D.value,
+        disabled: L.value
+      }, [
+        H(de, {
+          name: "vf-floating-transition",
+          appear: "",
+          duration: T
+        }, {
+          default: G(() => [
+            y(c) ? (d(), _("div", {
+              key: 0,
+              id: y(v),
+              ref_key: "menuRef",
+              ref: r,
+              class: P(w.value),
+              style: U(B.value),
+              "aria-labelledby": typeof y(o).id == "string" ? y(o).id : y(g),
+              role: "listbox",
+              onKeydown: pe
+            }, [
+              (d(!0), _(re, null, ue(e.options, (Y) => (d(), _("button", {
+                key: Y.value,
+                type: "button",
+                class: P(["vf-dropdown__item vf-select__option", [
+                  Y.value === e.modelValue && "vf-select__option--selected"
+                ]]),
+                role: "option",
+                "aria-selected": Y.value === e.modelValue,
+                disabled: Y.disabled,
+                onClick: (ae) => C(Y, { restoreFocus: !1 })
+              }, F(Y.label), 11, Dn))), 128))
+            ], 46, Ln)) : E("", !0)
+          ]),
+          _: 1
+        })
+      ], 8, ["to", "disabled"]))
+    ]));
+  }
+}), Sn = ["checked", "disabled"], Mn = {
   class: "vf-switch__control",
   "aria-hidden": "true"
-}, rn = { class: "vf-switch__thumb" }, un = {
+}, zn = { class: "vf-switch__thumb" }, Pn = {
   key: 0,
   class: "vf-switch__content"
-}, cn = /* @__PURE__ */ S({
+}, Rn = /* @__PURE__ */ M({
   inheritAttrs: !1,
   __name: "VfSwitch",
   props: {
@@ -1832,135 +2417,199 @@ const nt = {
   },
   emits: ["update:modelValue", "change"],
   setup(t, { emit: n }) {
-    const e = t, i = n, a = N(), r = fe(), u = l(
-      () => P(
+    const e = t, l = n, o = j(), i = ye(), r = a(
+      () => K(
         "vf-switch",
         `vf-switch--${e.size}`,
         e.modelValue && "vf-switch--checked",
         e.disabled && "vf-switch--disabled",
-        a.class
+        o.class
       )
-    ), v = l(() => a.style), f = l(() => {
-      var V;
+    ), g = a(() => o.style), v = a(() => {
+      var h;
       if (e.label)
         return !0;
-      const T = ((V = r.default) == null ? void 0 : V.call(r, {})) ?? [];
-      function g(A) {
-        return A.type === Ne ? !1 : A.type === He ? String(A.children ?? "").trim().length > 0 : A.type === se && Array.isArray(A.children) ? A.children.some((D) => g(D)) : !0;
+      const c = ((h = i.default) == null ? void 0 : h.call(i, {})) ?? [];
+      function m(x) {
+        return x.type === He ? !1 : x.type === Ne ? String(x.children ?? "").trim().length > 0 : x.type === re && Array.isArray(x.children) ? x.children.some((L) => m(L)) : !0;
       }
-      return T.some((A) => g(A));
-    }), b = l(
+      return c.some((x) => m(x));
+    }), T = a(
       () => Object.fromEntries(
-        Object.entries(a).filter(([T]) => T !== "class" && T !== "style")
+        Object.entries(o).filter(([c]) => c !== "class" && c !== "style")
       )
     );
-    function d(T) {
-      const g = T.target.checked;
-      i("update:modelValue", g), i("change", g);
+    function p(c) {
+      const m = c.target.checked;
+      l("update:modelValue", m), l("change", m);
     }
-    return (T, g) => (c(), _("label", {
-      class: R(u.value),
-      style: Y(v.value)
+    return (c, m) => (d(), _("label", {
+      class: P(r.value),
+      style: U(g.value)
     }, [
-      x("input", H({
+      V("input", N({
         class: "vf-switch__input",
         type: "checkbox",
         role: "switch",
         checked: e.modelValue,
         disabled: e.disabled
-      }, b.value, { onChange: d }), null, 16, ln),
-      x("span", sn, [
-        x("span", rn, [
-          C(T.$slots, "thumb", {
+      }, T.value, { onChange: p }), null, 16, Sn),
+      V("span", Mn, [
+        V("span", zn, [
+          O(c.$slots, "thumb", {
             checked: e.modelValue
           })
         ])
       ]),
-      f.value ? (c(), _("span", un, [
-        C(T.$slots, "default", {}, () => [
-          le(F(t.label), 1)
+      v.value ? (d(), _("span", Pn, [
+        O(c.$slots, "default", {}, () => [
+          ve(F(t.label), 1)
         ])
-      ])) : O("", !0)
+      ])) : E("", !0)
     ], 6));
   }
-}), dn = ["aria-label"], fn = {
+}), Fn = { class: "vf-table-scroll" }, Hn = {
   key: 0,
-  class: "vf-table-of-contents__title"
-}, vn = { class: "vf-table-of-contents__list" }, pn = ["href", "aria-current"], Xn = /* @__PURE__ */ S({
+  class: "vf-table__caption"
+}, Nn = {
+  key: 1,
+  class: "vf-table__head"
+}, Kn = {
+  key: 2,
+  class: "vf-table__body"
+}, jn = {
+  key: 3,
+  class: "vf-table__foot"
+}, Ba = /* @__PURE__ */ M({
+  inheritAttrs: !1,
+  __name: "VfTable",
+  props: {
+    caption: { default: void 0 },
+    compact: { type: Boolean, default: !1 },
+    striped: { type: Boolean, default: !1 },
+    stickyHeader: { type: Boolean, default: !1 }
+  },
+  setup(t) {
+    const n = t, e = j(), l = a(
+      () => K(
+        "vf-table",
+        n.compact && "vf-table--compact",
+        n.striped && "vf-table--striped",
+        n.stickyHeader && "vf-table--sticky-header"
+      )
+    );
+    return (o, i) => (d(), _("div", N({ class: "vf-table-wrap" }, y(e)), [
+      V("div", Fn, [
+        V("table", {
+          class: P(l.value)
+        }, [
+          n.caption || o.$slots.caption ? (d(), _("caption", Hn, [
+            O(o.$slots, "caption", {}, () => [
+              ve(F(n.caption), 1)
+            ])
+          ])) : E("", !0),
+          o.$slots.header ? (d(), _("thead", Nn, [
+            O(o.$slots, "header")
+          ])) : E("", !0),
+          o.$slots.default ? (d(), _("tbody", Kn, [
+            O(o.$slots, "default")
+          ])) : E("", !0),
+          o.$slots.footer ? (d(), _("tfoot", jn, [
+            O(o.$slots, "footer")
+          ])) : E("", !0)
+        ], 2)
+      ])
+    ], 16));
+  }
+}), qn = ["aria-label"], Wn = { class: "vf-table-of-contents__list" }, Un = ["href", "aria-current", "onClick"], Ia = /* @__PURE__ */ M({
   inheritAttrs: !1,
   __name: "VfTableOfContents",
   props: {
     items: {},
     activeId: { default: void 0 },
     ariaLabel: { default: "Table of contents" },
-    label: { default: void 0 }
+    smooth: { type: Boolean, default: !1 },
+    scrollOffset: { default: 0 },
+    variant: { default: "default" }
   },
   setup(t) {
-    const n = t, e = N(), i = l(
-      () => P("vf-table-of-contents", e.class)
-    ), a = l(() => e.style), r = l(
+    const n = t, e = j(), l = A(!1), o = a(
+      () => K(
+        "vf-table-of-contents",
+        `vf-table-of-contents--${n.variant}`,
+        l.value && "vf-table-of-contents--ready",
+        e.class
+      )
+    ), i = a(() => e.style), r = a(
       () => Object.fromEntries(
-        Object.entries(e).filter(([f]) => f !== "class" && f !== "style")
+        Object.entries(e).filter(([c]) => c !== "class" && c !== "style")
       )
     );
-    function u(f) {
-      return !f || f < 1 ? 1 : Math.min(f, 6);
+    function g(c) {
+      return !c || c < 1 ? 1 : Math.min(c, 6);
     }
-    function v(f) {
-      return f.href ?? `#${f.id}`;
+    function v(c) {
+      return c.href ?? `#${c.id}`;
     }
-    return (f, b) => (c(), _("nav", H({
-      class: i.value,
-      style: a.value,
+    function T(c, m) {
+      const h = v(c);
+      if (!h.startsWith("#"))
+        return;
+      const x = decodeURIComponent(h.slice(1));
+      if (!x)
+        return;
+      const L = document.getElementById(x);
+      if (!L)
+        return;
+      const D = Math.max(
+        0,
+        window.scrollY + L.getBoundingClientRect().top - n.scrollOffset
+      );
+      m != null && m.updateHistory && window.location.hash !== h && window.history.pushState(null, "", h), window.scrollTo({
+        top: D,
+        behavior: n.smooth ? "smooth" : "auto"
+      });
+    }
+    function p(c, m) {
+      const h = v(m);
+      !n.smooth && n.scrollOffset <= 0 || !h.startsWith("#") || !decodeURIComponent(h.slice(1)) || (c.preventDefault(), T(m, {
+        updateHistory: !0
+      }));
+    }
+    return me(async () => {
+      if (requestAnimationFrame(() => {
+        l.value = !0;
+      }), typeof window > "u" || !window.location.hash)
+        return;
+      const c = decodeURIComponent(window.location.hash), m = n.items.find((h) => v(h) === c);
+      m && (await le(), requestAnimationFrame(() => {
+        T(m);
+      }));
+    }), (c, m) => (d(), _("nav", N({
+      class: o.value,
+      style: i.value,
       "aria-label": n.ariaLabel
     }, r.value), [
-      n.label || f.$slots.label ? (c(), _("p", fn, [
-        C(f.$slots, "label", {}, () => [
-          le(F(n.label), 1)
-        ])
-      ])) : O("", !0),
-      x("ol", vn, [
-        (c(!0), _(se, null, ie(n.items, (d) => (c(), _("li", {
-          key: d.id,
+      V("ol", Wn, [
+        (d(!0), _(re, null, ue(n.items, (h) => (d(), _("li", {
+          key: h.id,
           class: "vf-table-of-contents__item",
-          style: Y({ "--vf-toc-level": String(u(d.level)) })
+          style: U({ "--vf-toc-level": String(g(h.level)) })
         }, [
-          x("a", {
-            href: v(d),
-            class: R([
+          V("a", {
+            href: v(h),
+            class: P([
               "vf-table-of-contents__link",
-              n.activeId === d.id && "vf-table-of-contents__link--active"
+              n.activeId === h.id && "vf-table-of-contents__link--active"
             ]),
-            "aria-current": n.activeId === d.id ? "location" : void 0
-          }, F(d.label), 11, pn)
+            "aria-current": n.activeId === h.id ? "location" : void 0,
+            onClick: (x) => p(x, h)
+          }, F(h.label), 11, Un)
         ], 4))), 128))
       ])
-    ], 16, dn));
+    ], 16, qn));
   }
-}), Gn = /* @__PURE__ */ S({
-  inheritAttrs: !1,
-  __name: "VfText",
-  props: {
-    as: { default: "p" },
-    size: { default: "body" },
-    tone: { default: "default" }
-  },
-  setup(t) {
-    const n = t, e = N(), i = l(
-      () => P(
-        "vf-text",
-        `vf-text--${n.size}`,
-        n.tone !== "default" && `vf-text--${n.tone}`
-      )
-    );
-    return (a, r) => (c(), j(ae(n.as), H({ class: i.value }, h(e)), {
-      default: U(() => [
-        C(a.$slots, "default")
-      ]),
-      _: 3
-    }, 16, ["class"]));
-  }
-}), Qn = /* @__PURE__ */ S({
+}), Ea = /* @__PURE__ */ M({
   inheritAttrs: !1,
   __name: "VfThemeSwitch",
   props: {
@@ -1969,54 +2618,64 @@ const nt = {
     label: { default: void 0 }
   },
   setup(t) {
-    const n = t, e = N(), i = fe(), { resolvedTheme: a, setTheme: r } = Qe(), u = l(() => !!(n.label || i.default)), v = l({
-      get: () => a.value === "dark",
-      set: (f) => {
-        r(f ? "dark" : "light");
+    const n = t, e = j(), l = ye(), { resolvedTheme: o, setTheme: i } = Ze(), r = a(() => !!(n.label || l.default)), g = A(!1);
+    let v = null;
+    ne(
+      o,
+      (p) => {
+        g.value = p === "dark";
+      },
+      { immediate: !0 }
+    );
+    function T(p) {
+      if (g.value = p, typeof window > "u") {
+        i(p ? "dark" : "light");
+        return;
       }
-    });
-    return (f, b) => (c(), j(cn, H(h(e), {
-      modelValue: v.value,
-      "onUpdate:modelValue": b[0] || (b[0] = (d) => v.value = d),
+      v !== null && window.cancelAnimationFrame(v), v = window.requestAnimationFrame(() => {
+        i(p ? "dark" : "light"), v = null;
+      });
+    }
+    return se(() => {
+      v !== null && typeof window < "u" && window.cancelAnimationFrame(v);
+    }), (p, c) => (d(), q(Rn, N(y(e), {
+      "model-value": g.value,
       size: n.size,
       disabled: n.disabled,
-      label: n.label
+      label: n.label,
+      "onUpdate:modelValue": T
     }), {
-      thumb: U(({ checked: d }) => [
-        C(f.$slots, "thumb", { checked: d }, () => [
-          q(h(ee), {
-            icon: d ? h(W).moon : h(W).sun,
+      thumb: G(({ checked: m }) => [
+        O(p.$slots, "thumb", { checked: m }, () => [
+          H(y(J), {
+            icon: m ? y(W).moon : y(W).sun,
             size: "0.5rem"
           }, null, 8, ["icon"])
         ])
       ]),
-      default: U(() => [
-        u.value ? C(f.$slots, "default", { key: 0 }, () => [
-          le(F(n.label), 1)
-        ]) : O("", !0)
+      default: G(() => [
+        r.value ? O(p.$slots, "default", { key: 0 }, () => [
+          ve(F(n.label), 1)
+        ]) : E("", !0)
       ]),
       _: 3
-    }, 16, ["modelValue", "size", "disabled", "label"]));
+    }, 16, ["model-value", "size", "disabled", "label"]));
   }
-}), Jn = /* @__PURE__ */ S({
+}), Aa = /* @__PURE__ */ M({
   inheritAttrs: !1,
   __name: "VfTag",
   props: {
     tone: { default: "neutral" }
   },
   setup(t) {
-    const n = t, e = N(), i = l(
-      () => P("vf-tag", n.tone !== "neutral" && `vf-tag--${n.tone}`)
+    const n = t, e = j(), l = a(
+      () => K("vf-tag", n.tone !== "neutral" && `vf-tag--${n.tone}`)
     );
-    return (a, r) => (c(), _("span", H({ class: i.value }, h(e)), [
-      C(a.$slots, "default")
+    return (o, i) => (d(), _("span", N({ class: l.value }, y(e)), [
+      O(o.$slots, "default")
     ], 16));
   }
-}), mn = { class: "vf-tabs" }, hn = {
-  class: "vf-tabs__list",
-  role: "tablist",
-  "aria-orientation": "horizontal"
-}, _n = ["id", "aria-controls", "aria-selected", "disabled", "tabindex", "onClick", "onKeydown"], yn = ["id", "aria-labelledby"], Zn = /* @__PURE__ */ S({
+}), Xn = { class: "vf-tabs" }, Yn = ["id", "aria-controls", "aria-selected", "disabled", "tabindex", "onClick", "onKeydown"], Gn = ["id", "aria-labelledby"], Oa = /* @__PURE__ */ M({
   __name: "VfTabs",
   props: {
     items: {},
@@ -2025,106 +2684,154 @@ const nt = {
   },
   emits: ["update:modelValue", "change"],
   setup(t, { emit: n }) {
-    const e = t, i = n, a = Q({ prefix: "vf-tabs" }), r = I([]), u = l(
+    const e = t, l = n, o = ee({ prefix: "vf-tabs" }), i = A(null), r = A([]), g = A(!1), v = A({
+      opacity: "0",
+      transform: "translateX(0)",
+      width: "0px"
+    }), T = a(
       () => {
-        var k;
-        return (k = e.items.find((m) => !m.disabled)) == null ? void 0 : k.value;
+        var s;
+        return (s = e.items.find((k) => !k.disabled)) == null ? void 0 : s.value;
       }
-    ), v = I(e.defaultValue ?? u.value), f = l(() => e.modelValue !== void 0), b = l(
-      () => e.modelValue ?? v.value ?? u.value
+    ), p = A(e.defaultValue ?? T.value), c = a(() => e.modelValue !== void 0), m = a(
+      () => e.modelValue ?? p.value ?? T.value
     );
-    J(
+    let h = null;
+    ne(
       () => e.items,
-      (k) => {
-        !k.some(
-          (o) => o.value === b.value && !o.disabled
-        ) && u.value && d(u.value);
+      (s) => {
+        !s.some(
+          (f) => f.value === m.value && !f.disabled
+        ) && T.value && x(T.value);
       },
       { deep: !0 }
     );
-    function d(k) {
-      f.value || (v.value = k), i("update:modelValue", k), i("change", k);
+    function x(s) {
+      c.value || (p.value = s), l("update:modelValue", s), l("change", s);
     }
-    function T(k) {
-      k.disabled || d(k.value);
+    function L(s) {
+      s.disabled || x(s.value);
     }
-    function g() {
-      return e.items.filter((k) => !k.disabled);
+    function D() {
+      return e.items.filter((s) => !s.disabled);
     }
-    function V(k) {
-      var o;
-      const m = e.items.findIndex((y) => y.value === k);
-      (o = r.value[m]) == null || o.focus();
+    function R(s) {
+      var f;
+      const k = e.items.findIndex((S) => S.value === s);
+      (f = r.value[k]) == null || f.focus();
     }
-    function A(k, m) {
-      const o = g(), y = o.findIndex(
-        (p) => p.value === m.value
+    function I(s, k) {
+      const f = D(), S = f.findIndex(
+        ($) => $.value === k.value
       );
-      if (y !== -1) {
-        if (k.key === "ArrowRight" || k.key === "ArrowDown") {
-          k.preventDefault();
-          const p = o[(y + 1) % o.length];
-          T(p), V(p.value);
+      if (S !== -1) {
+        if (s.key === "ArrowRight" || s.key === "ArrowDown") {
+          s.preventDefault();
+          const $ = f[(S + 1) % f.length];
+          L($), R($.value);
           return;
         }
-        if (k.key === "ArrowLeft" || k.key === "ArrowUp") {
-          k.preventDefault();
-          const p = o[(y - 1 + o.length) % o.length];
-          T(p), V(p.value);
+        if (s.key === "ArrowLeft" || s.key === "ArrowUp") {
+          s.preventDefault();
+          const $ = f[(S - 1 + f.length) % f.length];
+          L($), R($.value);
           return;
         }
-        if (k.key === "Home") {
-          k.preventDefault();
-          const p = o[0];
-          T(p), V(p.value);
+        if (s.key === "Home") {
+          s.preventDefault();
+          const $ = f[0];
+          L($), R($.value);
           return;
         }
-        if (k.key === "End") {
-          k.preventDefault();
-          const p = o[o.length - 1];
-          T(p), V(p.value);
+        if (s.key === "End") {
+          s.preventDefault();
+          const $ = f[f.length - 1];
+          L($), R($.value);
         }
       }
     }
-    function D(k) {
-      return `${a.value}-tab-${k}`;
+    function u(s) {
+      return `${o.value}-tab-${s}`;
     }
-    function z(k) {
-      return `${a.value}-panel-${k}`;
+    function w(s) {
+      return `${o.value}-panel-${s}`;
+    }
+    function B() {
+      const s = e.items.findIndex(
+        (f) => f.value === m.value
+      ), k = s >= 0 ? r.value[s] : null;
+      if (!k) {
+        v.value = {
+          opacity: "0",
+          transform: "translateX(0)",
+          width: "0px"
+        };
+        return;
+      }
+      v.value = {
+        opacity: "1",
+        transform: `translateX(${k.offsetLeft}px)`,
+        width: `${k.offsetWidth}px`
+      };
     }
-    return (k, m) => (c(), _("div", mn, [
-      x("div", hn, [
-        (c(!0), _(se, null, ie(t.items, (o, y) => (c(), _("button", {
-          id: D(o.value),
-          key: o.value,
+    return ne(
+      () => [m.value, e.items],
+      async () => {
+        await le(), B();
+      },
+      { deep: !0, immediate: !0 }
+    ), me(async () => {
+      await le(), B(), requestAnimationFrame(() => {
+        g.value = !0;
+      }), typeof ResizeObserver < "u" && i.value && (h = new ResizeObserver(() => {
+        B();
+      }), h.observe(i.value)), typeof window < "u" && window.addEventListener("resize", B);
+    }), se(() => {
+      h == null || h.disconnect(), typeof window < "u" && window.removeEventListener("resize", B);
+    }), (s, k) => (d(), _("div", Xn, [
+      V("div", {
+        ref_key: "listRef",
+        ref: i,
+        class: "vf-tabs__list",
+        role: "tablist",
+        "aria-orientation": "horizontal"
+      }, [
+        (d(!0), _(re, null, ue(t.items, (f, S) => (d(), _("button", {
+          id: u(f.value),
+          key: f.value,
           ref_for: !0,
-          ref: (p) => {
-            r.value[y] = p;
+          ref: ($) => {
+            r.value[S] = $;
           },
-          "aria-controls": z(o.value),
-          "aria-selected": b.value === o.value,
-          disabled: o.disabled,
-          tabindex: b.value === o.value ? 0 : -1,
+          "aria-controls": w(f.value),
+          "aria-selected": m.value === f.value,
+          disabled: f.disabled,
+          tabindex: m.value === f.value ? 0 : -1,
           class: "vf-tabs__tab",
           role: "tab",
           type: "button",
-          onClick: (p) => T(o),
-          onKeydown: (p) => A(p, o)
-        }, F(o.label), 41, _n))), 128))
-      ]),
-      b.value ? (c(), _("div", {
+          onClick: ($) => L(f),
+          onKeydown: ($) => I($, f)
+        }, F(f.label), 41, Yn))), 128)),
+        V("span", {
+          "aria-hidden": "true",
+          class: P(["vf-tabs__indicator", g.value && "vf-tabs__indicator--ready"]),
+          style: U(v.value)
+        }, null, 6)
+      ], 512),
+      m.value ? (d(), _("div", {
         key: 0,
-        id: z(b.value),
-        "aria-labelledby": D(b.value),
+        id: w(m.value),
+        "aria-labelledby": u(m.value),
         class: "vf-tabs__panel",
         role: "tabpanel",
         tabindex: "0"
       }, [
-        C(k.$slots, "panel", Ve(xe({ activeValue: b.value })))
-      ], 8, yn)) : O("", !0)
+        O(s.$slots, "panel", Be(Ie({ activeValue: m.value })))
+      ], 8, Gn)) : E("", !0)
     ]));
   }
-}), bn = ["value", "aria-invalid"], ea = /* @__PURE__ */ S({
+}), Qn = ["value", "aria-invalid"], La = /* @__PURE__ */ M({
   inheritAttrs: !1,
   __name: "VfTextarea",
   props: {
@@ -2134,23 +2841,23 @@ const nt = {
   },
   emits: ["update:modelValue"],
   setup(t, { emit: n }) {
-    const e = t, i = n, a = N(), r = l(
-      () => P(
+    const e = t, l = n, o = j(), i = a(
+      () => K(
         "vf-textarea",
         e.size !== "md" && `vf-textarea--${e.size}`,
         e.invalid && "vf-textarea--invalid"
       )
     );
-    function u(v) {
-      i("update:modelValue", v.target.value);
+    function r(g) {
+      l("update:modelValue", g.target.value);
     }
-    return (v, f) => (c(), _("textarea", H({
-      class: r.value,
+    return (g, v) => (d(), _("textarea", N({
+      class: i.value,
       value: e.modelValue,
       "aria-invalid": e.invalid || void 0
-    }, h(a), { onInput: u }), null, 16, bn));
+    }, y(o), { onInput: r }), null, 16, Qn));
   }
-}), gn = ["aria-describedby"], $n = ["id"], ta = /* @__PURE__ */ S({
+}), Jn = ["aria-describedby"], Zn = ["id"], Da = /* @__PURE__ */ M({
   __name: "VfTooltip",
   props: {
     text: { default: void 0 },
@@ -2160,100 +2867,104 @@ const nt = {
     disableTeleport: { type: Boolean, default: !1 }
   },
   setup(t) {
-    const n = t, e = I(!1), i = Q({ prefix: "vf-tooltip" }), a = I(null), r = I(null), u = I(null), v = I(null), f = {
-      enter: X.fast,
-      leave: X.fast
-    }, b = l(
+    const n = t, e = A(!1), l = ee({ prefix: "vf-tooltip" }), o = A(null), i = A(null), r = A(null), g = A(null), v = {
+      enter: Z.fast,
+      leave: Z.fast
+    }, T = a(
       () => n.disableTeleport || n.teleportTo === !1 || n.teleportTo === null
-    ), d = l(() => typeof n.teleportTo == "string" || typeof HTMLElement < "u" && n.teleportTo instanceof HTMLElement ? n.teleportTo : "body"), {
-      placement: T,
-      middlewareData: g,
-      styles: V,
-      cleanup: A
-    } = ye(r, u, {
+    ), p = a(() => typeof n.teleportTo == "string" || typeof HTMLElement < "u" && n.teleportTo instanceof HTMLElement ? n.teleportTo : "body"), {
+      placement: c,
+      middlewareData: m,
+      styles: h,
+      cleanup: x
+    } = Te(i, r, {
       enabled: e,
-      placement: l(() => n.placement),
-      middleware: l(
+      placement: a(() => n.placement),
+      middleware: a(
         () => [
-          pe(10),
-          me({ placements: ["top", "bottom"] }),
-          he(),
-          v.value ? _e(v.value) : void 0
+          ge(10),
+          we({ placements: ["top", "bottom"] }),
+          ke(),
+          g.value ? Ve(g.value) : void 0
         ].filter((s) => s !== void 0)
       ),
       strategy: "fixed"
-    }), D = l(() => [
+    }), L = a(() => [
       "vf-tooltip__content",
-      T.value.startsWith("bottom") && "vf-tooltip__content--bottom",
-      T.value.startsWith("top") && "vf-tooltip__content--top"
-    ]), z = l(() => {
-      const s = g.value.arrow;
+      c.value.startsWith("bottom") && "vf-tooltip__content--bottom",
+      c.value.startsWith("top") && "vf-tooltip__content--top"
+    ]), D = a(() => {
+      const s = m.value.arrow;
       return {
         x: (s == null ? void 0 : s.x) !== void 0 && (s == null ? void 0 : s.baseX) !== void 0 ? s.x - s.baseX : 0,
         y: (s == null ? void 0 : s.y) !== void 0 && (s == null ? void 0 : s.baseY) !== void 0 ? s.y - s.baseY : 0
       };
-    }), k = l(() => ["vf-tooltip__arrow"]), m = l(() => ({
-      left: `${z.value.x}px`,
-      top: `${z.value.y}px`
+    }), R = a(() => [
+      "vf-tooltip__arrow",
+      c.value.startsWith("bottom") && "vf-tooltip__arrow--bottom",
+      c.value.startsWith("top") && "vf-tooltip__arrow--top"
+    ]), I = a(() => ({
+      left: `${D.value.x}px`,
+      top: `${D.value.y}px`
     }));
-    function o() {
-      a.value !== null && (window.clearTimeout(a.value), a.value = null);
+    function u() {
+      o.value !== null && (window.clearTimeout(o.value), o.value = null);
     }
-    function y() {
-      o(), a.value = window.setTimeout(() => {
+    function w() {
+      u(), o.value = window.setTimeout(() => {
         e.value = !0;
       }, n.openDelay);
     }
-    function p() {
-      o(), e.value = !1;
+    function B() {
+      u(), e.value = !1;
     }
-    return te(() => {
-      o(), A();
-    }), (s, E) => (c(), _("span", {
+    return se(() => {
+      u(), x();
+    }), (s, k) => (d(), _("span", {
       class: "vf-tooltip",
-      onMouseenter: y,
-      onMouseleave: p,
-      onFocusin: y,
-      onFocusout: p
+      onMouseenter: w,
+      onMouseleave: B,
+      onFocusin: w,
+      onFocusout: B
     }, [
-      x("span", {
+      V("span", {
         ref_key: "triggerRef",
-        ref: r,
+        ref: i,
         class: "vf-tooltip__trigger",
-        "aria-describedby": e.value ? h(i) : void 0
+        "aria-describedby": e.value ? y(l) : void 0
       }, [
-        C(s.$slots, "default")
-      ], 8, gn),
-      (c(), j(ue, {
-        to: d.value,
-        disabled: b.value
+        O(s.$slots, "default")
+      ], 8, Jn),
+      (d(), q(he, {
+        to: p.value,
+        disabled: T.value
       }, [
-        q(oe, {
+        H(de, {
           name: "vf-floating-transition",
           appear: "",
-          duration: f
+          duration: v
         }, {
-          default: U(() => [
-            e.value && (t.text || s.$slots.content) ? (c(), _("span", {
+          default: G(() => [
+            e.value && (t.text || s.$slots.content) ? (d(), _("span", {
               key: 0,
-              id: h(i),
+              id: y(l),
               ref_key: "contentRef",
-              ref: u,
-              class: R(D.value),
-              style: Y(h(V)),
+              ref: r,
+              class: P(L.value),
+              style: U(y(h)),
               role: "tooltip"
             }, [
-              C(s.$slots, "content", {}, () => [
-                le(F(t.text), 1)
+              O(s.$slots, "content", {}, () => [
+                ve(F(t.text), 1)
               ]),
-              x("span", {
+              V("span", {
                 ref_key: "arrowRef",
-                ref: v,
-                class: R(k.value),
-                style: Y(m.value),
+                ref: g,
+                class: P(R.value),
+                style: U(I.value),
                 "aria-hidden": "true"
               }, null, 6)
-            ], 14, $n)) : O("", !0)
+            ], 14, Zn)) : E("", !0)
           ]),
           _: 3
         })
@@ -2262,52 +2973,53 @@ const nt = {
   }
 });
 export {
-  An as VfAccordion,
-  In as VfAlert,
-  Ln as VfBadge,
-  Sn as VfButton,
-  Dn as VfCard,
-  zn as VfCheckbox,
-  Pn as VfDialog,
-  Nn as VfDivider,
-  Mn as VfDrawer,
-  Hn as VfDropdown,
-  Rn as VfHeading,
-  Ie as VfIconButton,
-  Fn as VfInput,
-  Kn as VfLink,
-  jn as VfNavMenu,
-  qn as VfPanel,
-  Un as VfPopover,
-  Wn as VfProse,
-  Yn as VfRadio,
-  cn as VfSwitch,
-  Xn as VfTableOfContents,
-  Zn as VfTabs,
-  Jn as VfTag,
-  Gn as VfText,
-  ea as VfTextarea,
-  En as VfThemeProvider,
-  Qn as VfThemeSwitch,
-  ta as VfTooltip,
-  Bn as VueForgeCore,
-  oa as createThemePreset,
-  We as createVueForgeCore,
-  Bn as default,
-  la as defaultThemePreset,
-  ia as toMaxWidthQuery,
-  ra as toMinWidthQuery,
-  ua as useBreakpoint,
-  ca as useBreakpointValue,
-  da as useBreakpoints,
-  Oe as useClickOutside,
-  ce as useDisclosure,
-  ve as useEscapeKey,
-  ye as useFloating,
-  Ae as useFocusTrap,
-  Q as useId,
-  Ce as useScrollLock,
-  On as useTableOfContents,
-  Qe as useTheme,
-  fa as vfBreakpoints
+  ua as VfAccordion,
+  da as VfAlert,
+  ca as VfBadge,
+  fa as VfBreadcrumbs,
+  va as VfButton,
+  ma as VfCard,
+  pa as VfCheckbox,
+  ba as VfDialog,
+  _a as VfDivider,
+  ha as VfDrawer,
+  ya as VfDropdown,
+  Se as VfIconButton,
+  ga as VfInput,
+  wa as VfLink,
+  ka as VfMenuBar,
+  $a as VfNavMenu,
+  Ta as VfPanel,
+  Va as VfPopover,
+  Ca as VfRadio,
+  xa as VfSelect,
+  Rn as VfSwitch,
+  Ba as VfTable,
+  Ia as VfTableOfContents,
+  Oa as VfTabs,
+  Aa as VfTag,
+  La as VfTextarea,
+  ia as VfThemeProvider,
+  Ea as VfThemeSwitch,
+  Da as VfTooltip,
+  sa as VueForgeCore,
+  za as createThemePreset,
+  Ye as createVueForgeCore,
+  sa as default,
+  Pa as defaultThemePreset,
+  Fa as toMaxWidthQuery,
+  Ha as toMinWidthQuery,
+  Na as useBreakpoint,
+  Ka as useBreakpointValue,
+  ja as useBreakpoints,
+  $e as useClickOutside,
+  be as useDisclosure,
+  _e as useEscapeKey,
+  Te as useFloating,
+  De as useFocusTrap,
+  ee as useId,
+  Ae as useScrollLock,
+  ra as useTableOfContents,
+  Ze as useTheme,
+  qa as vfBreakpoints
 };