@codemonster-ru/vueforge-core 1.5.0 → 1.7.0

package/dist/vueforge-core.js

@@ -1,25 +1,16 @@
-import { resolveThemeConfig as Le, applyThemeConfig as Se, resolveTheme as ze, DEFAULT_STORAGE_KEY as Me, DEFAULT_ATTRIBUTE as Pe, isThemeMode as Ne, vfMotionDurationsMs as Y } from "@codemonster-ru/vueforge-theme";
-import { createThemePreset as Xn } from "@codemonster-ru/vueforge-theme";
-import { defaultThemePreset as Fe } from "./theme-api.js";
-import { defineComponent as L, inject as we, computed as s, ref as D, watch as ee, onMounted as ce, onBeforeUnmount as te, provide as Re, renderSlot as B, toValue as K, nextTick as oe, openBlock as d, createElementBlock as _, createElementVNode as T, unref as p, toDisplayString as N, normalizeClass as P, createVNode as j, Transition as ne, withCtx as G, createCommentVNode as O, useAttrs as R, mergeProps as H, createTextVNode as ae, normalizeStyle as W, useSlots as Te, createBlock as q, Teleport as le, resolveDynamicComponent as re, normalizeProps as Ve, guardReactiveProps as Ce, resolveComponent as He, Fragment as ue, renderList as de } from "vue";
-import { d as xe } from "./useScrollLock-FYdn9vRp.js";
-import { t as Qn, a as Jn, u as Zn, b as ea, c as ta, v as na } from "./useScrollLock-FYdn9vRp.js";
-import { VueIconify as Z, icons as U } from "@codemonster-ru/vueiconify";
-import { autoUpdate as Ke, computePosition as je, offset as ve, flip as pe, shift as me, arrow as he } from "@codemonster-ru/floater.js";
+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 qe(t = {}) {
-  return Le({
-    ...t,
-    preset: t.preset ?? Fe
-  });
-}
-function Ue(t, n) {
-  return Se(t, n);
-}
 function We() {
   return {
     install(n, e = {}) {
-      const i = qe(e.theme);
+      const i = Se(e.theme);
       n.provide(Be, {
         theme: i,
         themeMode: {
@@ -27,11 +18,11 @@ function We() {
           storageKey: e.themeStorageKey,
           attribute: e.themeAttribute
         }
-      }), typeof document < "u" && Ue(i);
+      }), typeof document < "u" && De(i);
     }
   };
 }
-const Tn = We(), Ee = Symbol("VfThemeContext"), Vn = /* @__PURE__ */ L({
+const Bn = We(), Ee = Symbol("VfThemeContext"), En = /* @__PURE__ */ S({
   __name: "VfThemeProvider",
   props: {
     defaultTheme: {},
@@ -39,130 +30,130 @@ const Tn = We(), Ee = Symbol("VfThemeContext"), Vn = /* @__PURE__ */ L({
     attribute: {}
   },
   setup(t) {
-    const n = t, e = we(Be, null), i = s(
+    const n = t, e = Te(Be, null), i = l(
       () => n.defaultTheme ?? (e == null ? void 0 : e.themeMode.defaultTheme) ?? "system"
-    ), l = D(i.value), r = D("light"), u = D(null), v = s(
-      () => ze(l.value, r.value)
-    ), y = s(
-      () => n.storageKey ?? (e == null ? void 0 : e.themeMode.storageKey) ?? (e == null ? void 0 : e.theme.options.storageKey) ?? Me
-    ), g = s(
-      () => n.attribute ?? (e == null ? void 0 : e.themeMode.attribute) ?? (e == null ? void 0 : e.theme.options.attribute) ?? Pe
-    ), m = D(!1);
-    let C = null;
-    function x() {
+    ), 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() {
       if (typeof window > "u")
         return;
-      const f = window.localStorage.getItem(y.value);
-      Ne(f) && (l.value = f);
+      const m = window.localStorage.getItem(f.value);
+      je(m) && (a.value = m);
     }
-    function w() {
-      C !== null && (window.clearTimeout(C), C = null);
+    function V() {
+      T !== null && (window.clearTimeout(T), T = null);
     }
-    function S(f, a = {}) {
+    function A(m, o = {}) {
       if (typeof document > "u")
         return;
-      const h = document.documentElement;
-      a.animate && (w(), h.classList.add("vf-theme-transitioning")), h.setAttribute(g.value, f), a.animate && (C = window.setTimeout(() => {
-        h.classList.remove("vf-theme-transitioning"), C = null;
+      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;
       }, 320));
     }
-    function I(f) {
-      var a;
-      if (f) {
-        r.value = f.matches ? "dark" : "light";
+    function D(m) {
+      var o;
+      if (m) {
+        r.value = m.matches ? "dark" : "light";
         return;
       }
-      r.value = (a = u.value) != null && a.matches ? "dark" : "light";
+      r.value = (o = u.value) != null && o.matches ? "dark" : "light";
     }
-    function z(f) {
-      l.value = f;
+    function z(m) {
+      a.value = m;
     }
-    function $() {
-      const f = v.value === "dark" ? "light" : "dark";
-      l.value = f;
+    function k() {
+      const m = v.value === "dark" ? "light" : "dark";
+      a.value = m;
     }
-    return ee(l, (f) => {
-      typeof window > "u" || window.localStorage.setItem(y.value, f);
-    }), ee(
+    return J(a, (m) => {
+      typeof window > "u" || window.localStorage.setItem(f.value, m);
+    }), J(
       v,
-      (f) => {
-        S(f, { animate: m.value });
+      (m) => {
+        A(m, { animate: d.value });
       },
       { immediate: !0 }
-    ), ce(() => {
-      l.value = i.value, x(), u.value = window.matchMedia("(prefers-color-scheme: dark)"), I(), u.value.addEventListener("change", I), m.value = !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 f;
-      (f = u.value) == null || f.removeEventListener("change", I), w();
-    }), Re(Ee, {
-      mode: l,
+      var m;
+      (m = u.value) == null || m.removeEventListener("change", D), V();
+    }), ze(Ee, {
+      mode: a,
       resolvedTheme: v,
       setTheme: z,
-      toggleTheme: $
-    }), (f, a) => B(f.$slots, "default");
+      toggleTheme: k
+    }), (m, o) => C(m.$slots, "default");
   }
 });
 function Oe(t, n, e = {}) {
-  const i = e.event ?? "pointerdown", l = (r) => {
+  const i = e.event ?? "pointerdown", a = (r) => {
     if (K(e.enabled) === !1)
       return;
     const u = r.target;
     if (!(u instanceof Node))
       return;
-    const v = Array.isArray(t) ? t.map((y) => y.value).filter((y) => y instanceof HTMLElement) : [t.value].filter(
-      (y) => y instanceof HTMLElement
+    const v = Array.isArray(t) ? t.map((f) => f.value).filter((f) => f instanceof HTMLElement) : [t.value].filter(
+      (f) => f instanceof HTMLElement
     );
-    v.length === 0 || v.some((y) => y.contains(u)) || n(r);
+    v.length === 0 || v.some((f) => f.contains(u)) || n(r);
   };
-  ce(() => {
-    document.addEventListener(i, l);
+  re(() => {
+    document.addEventListener(i, a);
   }), te(() => {
-    document.removeEventListener(i, l);
+    document.removeEventListener(i, a);
   });
 }
-function se(t = {}) {
-  const n = s(() => K(t.open) !== void 0), e = D(t.defaultOpen ?? !1), i = s(
+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
   );
-  ee(
+  J(
     () => K(t.open),
     (r) => {
       r !== void 0 && (e.value = r);
     }
   );
-  function l(r) {
+  function a(r) {
     var u;
     n.value || (e.value = r), (u = t.onOpenChange) == null || u.call(t, r);
   }
   return {
     isOpen: i,
-    open: () => l(!0),
-    close: () => l(!1),
-    toggle: () => l(!i.value),
-    setOpen: l
+    open: () => a(!0),
+    close: () => a(!1),
+    toggle: () => a(!i.value),
+    setOpen: a
   };
 }
-function fe(t, n = {}) {
-  const e = n.event ?? "keydown", i = (l) => {
-    K(n.enabled) === !1 || l.key !== "Escape" || t(l);
+function ve(t, n = {}) {
+  const e = n.event ?? "keydown", i = (a) => {
+    K(n.enabled) === !1 || a.key !== "Escape" || t(a);
   };
-  ce(() => {
+  re(() => {
     document.addEventListener(e, i);
   }), te(() => {
     document.removeEventListener(e, i);
   });
 }
 function ye(t, n, e = {}) {
-  const i = D(0), l = D(0), r = D(K(e.placement) ?? "bottom"), u = D({}), v = D(null);
-  let y = 0;
-  const g = s(() => ({
+  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: `${l.value}px`
+    top: `${a.value}px`
   }));
-  async function m() {
+  async function d() {
     if (!t.value || !n.value)
       return;
-    const x = await je(
+    const g = await Ue(
       t.value,
       n.value,
       {
@@ -171,32 +162,32 @@ function ye(t, n, e = {}) {
         strategy: K(e.strategy)
       }
     );
-    i.value = x.x, l.value = x.y, r.value = x.placement, u.value = x.middlewareData ?? {};
+    i.value = g.x, a.value = g.y, r.value = g.placement, u.value = g.middlewareData ?? {};
   }
-  function C() {
-    var x;
-    (x = v.value) == null || x.call(v), v.value = null;
+  function T() {
+    var g;
+    (g = v.value) == null || g.call(v), v.value = null;
   }
-  return ee(
+  return J(
     [() => K(e.enabled) !== !1, t, n],
-    async ([x]) => {
-      y += 1;
-      const w = y;
-      C(), !(!x || !t.value || !n.value) && (await oe(), !(w !== y || K(e.enabled) === !1 || !t.value || !n.value) && (await m(), !(w !== y || K(e.enabled) === !1 || !t.value || !n.value) && (v.value = Ke(t.value, () => {
-        m();
+    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();
       }))));
     },
     { immediate: !0 }
   ), te(() => {
-    C();
+    T();
   }), {
     x: i,
-    y: l,
+    y: a,
     placement: r,
     middlewareData: u,
-    styles: g,
-    update: m,
-    cleanup: C
+    styles: b,
+    update: d,
+    cleanup: T
   };
 }
 const Ye = [
@@ -218,22 +209,22 @@ function Ae(t, n = {}) {
   const e = (i) => {
     if (i.key !== "Tab" || K(n.enabled) === !1)
       return;
-    const l = t.value;
-    if (!l)
+    const a = t.value;
+    if (!a)
       return;
-    const r = Xe(l);
+    const r = Xe(a);
     if (r.length === 0) {
-      i.preventDefault(), l.focus();
+      i.preventDefault(), a.focus();
       return;
     }
-    const u = r[0], v = r[r.length - 1], y = document.activeElement;
+    const u = r[0], v = r[r.length - 1], f = document.activeElement;
     if (i.shiftKey) {
-      (y === u || y === l) && (i.preventDefault(), v.focus());
+      (f === u || f === a) && (i.preventDefault(), v.focus());
       return;
     }
-    y === v && (i.preventDefault(), u.focus());
+    f === v && (i.preventDefault(), u.focus());
   };
-  ce(() => {
+  re(() => {
     document.addEventListener("keydown", e);
   }), te(() => {
     document.removeEventListener("keydown", e);
@@ -242,10 +233,72 @@ function Ae(t, n = {}) {
 let Ge = 0;
 function Q(t = {}) {
   const n = `${t.prefix ?? "vf"}-${++Ge}`;
-  return s(() => K(t.providedId) ?? n);
+  return l(() => K(t.providedId) ?? n);
+}
+function On(t) {
+  const n = I(void 0);
+  function e() {
+    return K(t.items);
+  }
+  function i() {
+    return K(t.offset) ?? 0;
+  }
+  function a() {
+    return !!K(t.disabled);
+  }
+  function r() {
+    var T;
+    if (typeof window > "u" || typeof document > "u")
+      return;
+    if (a()) {
+      n.value = void 0;
+      return;
+    }
+    const v = e(), f = i(), b = v.map((g) => ({
+      id: g.id,
+      element: document.getElementById(g.id)
+    })).filter(
+      (g) => !!g.element
+    );
+    if (!b.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;
+        continue;
+      }
+      d || (d = g.id);
+      break;
+    }
+    n.value = d;
+  }
+  function u() {
+    r();
+  }
+  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(
+    () => [
+      e().map((v) => v.id).join("|"),
+      i(),
+      a()
+    ],
+    async () => {
+      await ne(), r();
+    },
+    { immediate: !0 }
+  ), {
+    activeId: n,
+    updateActiveId: r
+  };
 }
 function Qe() {
-  const t = we(Ee);
+  const t = Te(Ee);
   if (!t)
     throw new Error("useTheme must be used inside VfThemeProvider.");
   return {
@@ -255,7 +308,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" }, Cn = /* @__PURE__ */ L({
+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({
   __name: "VfAccordion",
   props: {
     open: { type: Boolean, default: void 0 },
@@ -265,95 +318,95 @@ const Je = { class: "vf-accordion" }, Ze = ["id", "aria-controls", "aria-expande
   },
   emits: ["update:open", "openChange"],
   setup(t, { emit: n }) {
-    const e = t, i = n, l = Q({ prefix: "vf-accordion-trigger" }), r = Q({ prefix: "vf-accordion-content" }), u = se({
+    const e = t, i = n, a = Q({ prefix: "vf-accordion-trigger" }), r = Q({ prefix: "vf-accordion-content" }), u = ce({
       defaultOpen: e.defaultOpen,
-      open: s(() => e.open),
-      onOpenChange: (f) => {
-        i("update:open", f), i("openChange", f);
+      open: l(() => e.open),
+      onOpenChange: (m) => {
+        i("update:open", m), i("openChange", m);
       }
-    }), v = u.isOpen, y = [
+    }), v = u.isOpen, f = [
       "height var(--vf-motion-duration-normal) var(--vf-motion-ease-standard)",
       "opacity var(--vf-motion-duration-normal) var(--vf-motion-ease-standard)"
     ].join(", ");
-    function g(f) {
-      const a = f.firstElementChild;
-      return (a == null ? void 0 : a.offsetHeight) ?? f.scrollHeight;
+    function b(m) {
+      const o = m.firstElementChild;
+      return (o == null ? void 0 : o.offsetHeight) ?? m.scrollHeight;
     }
-    function m() {
+    function d() {
       e.disabled || u.toggle();
     }
-    function C(f) {
-      (f.key === "Enter" || f.key === " ") && (f.preventDefault(), m());
-    }
-    function x(f) {
-      const a = f;
-      a.style.height = "0px", a.style.opacity = "0", a.style.overflow = "hidden";
-    }
-    function w(f, a) {
-      const h = f;
-      h.style.transition = y, requestAnimationFrame(() => {
-        h.style.height = `${g(h)}px`, h.style.opacity = "1";
-      }), window.setTimeout(a, Y.normal);
+    function T(m) {
+      (m.key === "Enter" || m.key === " ") && (m.preventDefault(), d());
     }
-    function S(f) {
-      const a = f;
-      a.style.height = "", a.style.opacity = "", a.style.overflow = "", a.style.transition = "";
-    }
-    function I(f) {
-      const a = f;
-      a.style.height = `${g(a)}px`, a.style.opacity = "1", a.style.overflow = "hidden";
-    }
-    function z(f, a) {
-      const h = f;
-      h.style.transition = y, h.offsetHeight, h.style.height = "0px", h.style.opacity = "0", window.setTimeout(a, Y.normal);
-    }
-    function $(f) {
-      const a = f;
-      a.style.height = "", a.style.opacity = "", a.style.overflow = "", a.style.transition = "";
-    }
-    return (f, a) => (d(), _("section", Je, [
-      T("button", {
-        id: p(l),
-        "aria-controls": p(r),
-        "aria-expanded": p(v),
+    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),
         disabled: t.disabled,
         class: "vf-accordion__trigger",
         type: "button",
-        onClick: m,
-        onKeydown: C
+        onClick: d,
+        onKeydown: T
       }, [
-        B(f.$slots, "trigger", { open: p(v) }, () => [
-          T("span", null, N(t.title), 1)
+        C(m.$slots, "trigger", { open: h(v) }, () => [
+          x("span", null, F(t.title), 1)
         ]),
-        T("span", {
+        x("span", {
           "aria-hidden": "true",
-          class: P(["vf-accordion__icon", p(v) && "vf-accordion__icon--open"])
+          class: R(["vf-accordion__icon", h(v) && "vf-accordion__icon--open"])
         }, [
-          j(p(Z), {
-            icon: p(U).chevronDown,
+          q(h(ee), {
+            icon: h(W).chevronDown,
             size: "0.875rem"
           }, null, 8, ["icon"])
         ], 2)
       ], 40, Ze),
-      j(ne, {
+      q(oe, {
         css: !1,
-        onBeforeEnter: x,
-        onEnter: w,
-        onAfterEnter: S,
-        onBeforeLeave: I,
+        onBeforeEnter: g,
+        onEnter: V,
+        onAfterEnter: A,
+        onBeforeLeave: D,
         onLeave: z,
-        onAfterLeave: $
+        onAfterLeave: k
       }, {
-        default: G(() => [
-          p(v) ? (d(), _("div", {
+        default: U(() => [
+          h(v) ? (c(), _("div", {
             key: 0,
-            id: p(r),
-            "aria-labelledby": p(l),
+            id: h(r),
+            "aria-labelledby": h(a),
             class: "vf-accordion__content",
             role: "region"
           }, [
-            T("div", tt, [
-              B(f.$slots, "default", { open: p(v) })
+            x("div", tt, [
+              C(m.$slots, "default", { open: h(v) })
             ])
           ], 8, et)) : O("", !0)
         ]),
@@ -362,7 +415,7 @@ const Je = { class: "vf-accordion" }, Ze = ["id", "aria-controls", "aria-expande
     ]));
   }
 });
-function F(...t) {
+function P(...t) {
   return t.filter(Boolean).join(" ");
 }
 const nt = {
@@ -371,7 +424,7 @@ const nt = {
 }, at = { class: "vf-alert__content" }, ot = {
   key: 0,
   class: "vf-alert__title"
-}, lt = { class: "vf-alert__body" }, xn = /* @__PURE__ */ L({
+}, lt = { class: "vf-alert__body" }, In = /* @__PURE__ */ S({
   inheritAttrs: !1,
   __name: "VfAlert",
   props: {
@@ -379,46 +432,46 @@ const nt = {
     title: { default: void 0 }
   },
   setup(t) {
-    const n = t, e = R(), i = s(
-      () => F("vf-alert", n.tone !== "primary" && `vf-alert--${n.tone}`)
-    ), l = s(() => n.tone === "success" ? U.checkCircle : n.tone === "info" ? U.info : n.tone === "warn" ? U.warning : n.tone === "help" ? U.questionCircle : n.tone === "danger" ? U.warning : n.tone === "contrast" ? U.info : U.info);
-    return (r, u) => (d(), _("section", H({
+    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,
       role: "alert"
-    }, p(e)), [
-      T("div", nt, [
-        j(p(Z), {
-          icon: l.value,
+    }, h(e)), [
+      x("div", nt, [
+        q(h(ee), {
+          icon: a.value,
           size: "2rem"
         }, null, 8, ["icon"])
       ]),
-      T("div", at, [
-        n.title || r.$slots.title ? (d(), _("p", ot, [
-          B(r.$slots, "title", {}, () => [
-            ae(N(n.title), 1)
+      x("div", at, [
+        n.title || r.$slots.title ? (c(), _("p", ot, [
+          C(r.$slots, "title", {}, () => [
+            le(F(n.title), 1)
           ])
         ])) : O("", !0),
-        T("div", lt, [
-          B(r.$slots, "default")
+        x("div", lt, [
+          C(r.$slots, "default")
         ])
       ])
     ], 16));
   }
-}), Bn = /* @__PURE__ */ L({
+}), Ln = /* @__PURE__ */ S({
   inheritAttrs: !1,
   __name: "VfBadge",
   props: {
     tone: { default: "neutral" }
   },
   setup(t) {
-    const n = t, e = R(), i = s(
-      () => F("vf-badge", n.tone !== "neutral" && `vf-badge--${n.tone}`)
+    const n = t, e = N(), i = l(
+      () => P("vf-badge", n.tone !== "neutral" && `vf-badge--${n.tone}`)
     );
-    return (l, r) => (d(), _("span", H({ class: i.value }, p(e)), [
-      B(l.$slots, "default")
+    return (a, r) => (c(), _("span", H({ class: i.value }, h(e)), [
+      C(a.$slots, "default")
     ], 16));
   }
-}), st = ["type"], En = /* @__PURE__ */ L({
+}), st = ["type"], Sn = /* @__PURE__ */ S({
   inheritAttrs: !1,
   __name: "VfButton",
   props: {
@@ -428,25 +481,25 @@ const nt = {
     type: { default: "button" }
   },
   setup(t) {
-    const n = t, e = R(), i = s(
-      () => F(
+    const n = t, e = N(), i = l(
+      () => P(
         "vf-button",
         `vf-button--${n.variant}`,
         n.size !== "md" && `vf-button--${n.size}`,
         n.block && "vf-button--block"
       )
     );
-    return (l, r) => (d(), _("button", H({
+    return (a, r) => (c(), _("button", H({
       class: i.value,
       type: n.type
-    }, p(e)), [
-      B(l.$slots, "default")
+    }, h(e)), [
+      C(a.$slots, "default")
     ], 16, st));
   }
 }), it = { key: 0 }, rt = { class: "vf-card__title" }, ut = {
   key: 1,
   class: "vf-card__body"
-}, dt = { key: 2 }, On = /* @__PURE__ */ L({
+}, ct = { key: 2 }, Dn = /* @__PURE__ */ S({
   inheritAttrs: !1,
   __name: "VfCard",
   props: {
@@ -454,27 +507,27 @@ const nt = {
     compact: { type: Boolean, default: !1 }
   },
   setup(t) {
-    const n = t, e = R(), i = s(
-      () => F("vf-card", n.compact && "vf-card--compact")
+    const n = t, e = N(), i = l(
+      () => P("vf-card", n.compact && "vf-card--compact")
     );
-    return (l, r) => (d(), _("section", H({ class: i.value }, p(e)), [
-      n.title || l.$slots.header ? (d(), _("header", it, [
-        B(l.$slots, "header", {}, () => [
-          T("h3", rt, N(n.title), 1)
+    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)
         ])
       ])) : O("", !0),
-      l.$slots.default ? (d(), _("div", ut, [
-        B(l.$slots, "default")
+      a.$slots.default ? (c(), _("div", ut, [
+        C(a.$slots, "default")
       ])) : O("", !0),
-      l.$slots.footer ? (d(), _("footer", dt, [
-        B(l.$slots, "footer")
+      a.$slots.footer ? (c(), _("footer", ct, [
+        C(a.$slots, "footer")
       ])) : O("", !0)
     ], 16));
   }
-}), ct = ["checked", "disabled", "aria-invalid"], ft = {
+}), dt = ["checked", "disabled", "aria-invalid"], ft = {
   key: 0,
   class: "vf-checkbox__content"
-}, An = /* @__PURE__ */ L({
+}, zn = /* @__PURE__ */ S({
   inheritAttrs: !1,
   __name: "VfCheckbox",
   props: {
@@ -486,49 +539,49 @@ const nt = {
   },
   emits: ["update:modelValue", "change"],
   setup(t, { emit: n }) {
-    const e = t, i = n, l = R(), r = s(
-      () => F(
+    const e = t, i = n, a = N(), r = l(
+      () => P(
         "vf-checkbox",
         `vf-checkbox--${e.size}`,
         e.modelValue && "vf-checkbox--checked",
         e.invalid && "vf-checkbox--invalid",
         e.disabled && "vf-checkbox--disabled",
-        l.class
+        a.class
       )
-    ), u = s(() => l.style), v = s(
+    ), u = l(() => a.style), v = l(
       () => Object.fromEntries(
-        Object.entries(l).filter(([g]) => g !== "class" && g !== "style")
+        Object.entries(a).filter(([b]) => b !== "class" && b !== "style")
       )
     );
-    function y(g) {
-      const m = g.target.checked;
-      i("update:modelValue", m), i("change", m);
+    function f(b) {
+      const d = b.target.checked;
+      i("update:modelValue", d), i("change", d);
     }
-    return (g, m) => (d(), _("label", {
-      class: P(r.value),
-      style: W(u.value)
+    return (b, d) => (c(), _("label", {
+      class: R(r.value),
+      style: Y(u.value)
     }, [
-      T("input", H({
+      x("input", H({
         class: "vf-checkbox__input",
         type: "checkbox",
         checked: e.modelValue,
         disabled: e.disabled,
         "aria-invalid": e.invalid || void 0
-      }, v.value, { onChange: y }), null, 16, ct),
-      m[0] || (m[0] = T("span", {
+      }, v.value, { onChange: f }), null, 16, dt),
+      d[0] || (d[0] = x("span", {
         class: "vf-checkbox__control",
         "aria-hidden": "true"
       }, [
-        T("span", { class: "vf-checkbox__mark" })
+        x("span", { class: "vf-checkbox__mark" })
       ], -1)),
-      t.label || g.$slots.default ? (d(), _("span", ft, [
-        B(g.$slots, "default", {}, () => [
-          ae(N(t.label), 1)
+      t.label || b.$slots.default ? (c(), _("span", ft, [
+        C(b.$slots, "default", {}, () => [
+          le(F(t.label), 1)
         ])
       ])) : O("", !0)
     ], 6));
   }
-}), vt = ["type"], De = /* @__PURE__ */ L({
+}), vt = ["type"], Ie = /* @__PURE__ */ S({
   inheritAttrs: !1,
   __name: "VfIconButton",
   props: {
@@ -538,20 +591,20 @@ const nt = {
     type: { default: "button" }
   },
   setup(t) {
-    const n = t, e = R(), i = s(
-      () => F(
+    const n = t, e = N(), i = l(
+      () => P(
         "vf-icon-button",
         n.variant !== "ghost" && `vf-icon-button--${n.variant}`,
         n.size !== "md" && `vf-icon-button--${n.size}`
       )
-    ), l = s(() => n.size === "sm" ? "0.875rem" : n.size === "lg" ? "1.125rem" : "1rem");
-    return (r, u) => (d(), _("button", H({
+    ), a = l(() => n.size === "sm" ? "0.875rem" : n.size === "lg" ? "1.125rem" : "1rem");
+    return (r, u) => (c(), _("button", H({
       class: i.value,
       type: n.type
-    }, p(e)), [
-      j(p(Z), {
+    }, h(e)), [
+      q(h(ee), {
         icon: n.icon,
-        size: l.value,
+        size: a.value,
         "aria-hidden": "true"
       }, null, 8, ["icon", "size"])
     ], 16, vt));
@@ -559,13 +612,13 @@ const nt = {
 }), pt = ["aria-labelledby"], mt = {
   key: 0,
   class: "vf-drawer__header"
-}, ht = ["id"], yt = { class: "vf-drawer__actions" }, _t = {
+}, ht = ["id"], _t = { class: "vf-drawer__actions" }, yt = {
   key: 1,
   class: "vf-drawer__body"
-}, gt = {
+}, bt = {
   key: 2,
   class: "vf-drawer__footer"
-}, Dn = /* @__PURE__ */ L({
+}, Mn = /* @__PURE__ */ S({
   inheritAttrs: !1,
   __name: "VfDrawer",
   props: {
@@ -585,145 +638,145 @@ const nt = {
   },
   emits: ["update:open", "openChange"],
   setup(t, { emit: n }) {
-    const e = t, i = n, l = R(), r = D(null), u = D(null), v = Te(), y = Q({ prefix: "vf-drawer-title" }), g = se({
+    const e = t, i = n, a = N(), r = I(null), u = I(null), v = fe(), f = Q({ prefix: "vf-drawer-title" }), b = ce({
       defaultOpen: e.defaultOpen,
-      open: s(() => e.open),
-      onOpenChange: (V) => {
-        i("update:open", V), i("openChange", V);
+      open: l(() => e.open),
+      onOpenChange: (B) => {
+        i("update:open", B), i("openChange", B);
       }
-    }), m = g.isOpen, C = {
-      enter: Y.normal,
-      leave: Y.normal
+    }), d = b.isOpen, T = {
+      enter: X.normal,
+      leave: X.normal
     };
-    function x(V) {
-      return typeof V == "number" ? `${V}px` : V;
-    }
-    const w = s(() => {
-      const V = {}, k = x(e.offsetTop), J = x(e.bodyPadding);
-      return k != null && (V["--vf-drawer-offset-top"] = k), J != null && (V["--vf-drawer-body-padding"] = J), V;
-    }), S = s(
-      () => F(
+    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(
         "vf-drawer",
         `vf-drawer--${e.placement}`,
         e.offsetTop != null && "vf-drawer--offset-top"
       )
-    ), I = s(() => [
-      w.value,
-      l.style
-    ]), z = s(() => Object.fromEntries(
-      Object.entries(l).filter(([V]) => V !== "class" && V !== "style")
-    )), $ = s(
+    ), D = l(() => [
+      V.value,
+      a.style
+    ]), z = l(() => Object.fromEntries(
+      Object.entries(a).filter(([B]) => B !== "class" && B !== "style")
+    )), k = l(
       () => e.disableTeleport || e.teleportTo === !1 || e.teleportTo === null
-    ), f = s(() => e.scrollLockTarget === !1 ? null : e.scrollLockTarget), a = s(() => typeof e.teleportTo == "string" || typeof HTMLElement < "u" && e.teleportTo instanceof HTMLElement ? e.teleportTo : "body"), h = s(
-      () => F(
+    ), 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(
         "vf-drawer__content",
         `vf-drawer__content--${e.placement}`,
         `vf-drawer__content--${e.size}`
       )
-    ), c = s(() => !!v.header), o = s(
-      () => e.title || c.value ? y.value : void 0
+    ), p = l(() => !!v.header), s = l(
+      () => e.title || p.value ? f.value : void 0
     );
     function E() {
-      g.close();
+      b.close();
     }
-    function A() {
+    function L() {
       e.closeOnOverlayClick && E();
     }
     function M() {
-      const V = r.value;
-      if (!V)
+      const B = r.value;
+      if (!B)
         return;
-      const k = V.querySelector(
+      const w = B.querySelector(
         "[autofocus], [data-autofocus]"
       );
-      if (k) {
-        k.focus();
+      if (w) {
+        w.focus();
         return;
       }
-      V.focus();
+      B.focus();
     }
-    return fe(
-      (V) => {
-        !e.closeOnEscape || !m.value || (V.preventDefault(), E());
+    return ve(
+      (B) => {
+        !e.closeOnEscape || !d.value || (B.preventDefault(), E());
       },
       {
-        enabled: m
+        enabled: d
       }
     ), Ae(r, {
-      enabled: m
-    }), xe(m, {
-      target: f
-    }), ee(
-      m,
-      async (V) => {
-        var k;
+      enabled: d
+    }), Ce(d, {
+      target: m
+    }), J(
+      d,
+      async (B) => {
+        var w;
         if (!(typeof document > "u")) {
-          if (V) {
-            u.value = document.activeElement instanceof HTMLElement ? document.activeElement : null, await oe(), M();
+          if (B) {
+            u.value = document.activeElement instanceof HTMLElement ? document.activeElement : null, await ne(), M();
             return;
           }
-          (k = u.value) == null || k.focus();
+          (w = u.value) == null || w.focus();
         }
       },
       { immediate: !0 }
     ), te(() => {
-      var V;
-      m.value && ((V = u.value) == null || V.focus());
-    }), (V, k) => (d(), q(le, {
-      to: a.value,
-      disabled: $.value
+      var B;
+      d.value && ((B = u.value) == null || B.focus());
+    }), (B, w) => (c(), j(ue, {
+      to: o.value,
+      disabled: k.value
     }, [
-      j(ne, {
+      q(oe, {
         name: "vf-drawer-transition",
         appear: "",
-        duration: C
+        duration: T
       }, {
-        default: G(() => [
-          p(m) ? (d(), _("div", H({
+        default: U(() => [
+          h(d) ? (c(), _("div", H({
             key: 0,
-            class: [S.value, p(l).class],
-            style: I.value
+            class: [A.value, h(a).class],
+            style: D.value
           }, z.value), [
-            T("div", {
+            x("div", {
               class: "vf-drawer__overlay",
               "aria-hidden": "true",
-              onClick: A
+              onClick: L
             }),
-            T("section", {
+            x("section", {
               ref_key: "contentRef",
               ref: r,
-              class: P(h.value),
-              "aria-labelledby": o.value,
+              class: R(y.value),
+              "aria-labelledby": s.value,
               "aria-modal": "true",
               role: "dialog",
               tabindex: "-1"
             }, [
-              t.title || V.$slots.header ? (d(), _("header", mt, [
-                T("div", null, [
-                  B(V.$slots, "header", {}, () => [
-                    t.title ? (d(), _("h2", {
+              t.title || B.$slots.header ? (c(), _("header", mt, [
+                x("div", null, [
+                  C(B.$slots, "header", {}, () => [
+                    t.title ? (c(), _("h2", {
                       key: 0,
-                      id: p(y),
+                      id: h(f),
                       class: "vf-drawer__title"
-                    }, N(t.title), 9, ht)) : O("", !0)
+                    }, F(t.title), 9, ht)) : O("", !0)
                   ])
                 ]),
-                T("div", yt, [
-                  B(V.$slots, "actions", { close: E }),
-                  e.closable ? (d(), q(De, {
+                x("div", _t, [
+                  C(B.$slots, "actions", { close: E }),
+                  e.closable ? (c(), j(Ie, {
                     key: 0,
-                    icon: p(U).xmark,
+                    icon: h(W).xmark,
                     "aria-label": "Close drawer",
                     size: "sm",
                     onClick: E
                   }, null, 8, ["icon"])) : O("", !0)
                 ])
               ])) : O("", !0),
-              V.$slots.default ? (d(), _("div", _t, [
-                B(V.$slots, "default", { close: E })
+              B.$slots.default ? (c(), _("div", yt, [
+                C(B.$slots, "default", { close: E })
               ])) : O("", !0),
-              V.$slots.footer ? (d(), _("footer", gt, [
-                B(V.$slots, "footer", { close: E })
+              B.$slots.footer ? (c(), _("footer", bt, [
+                C(B.$slots, "footer", { close: E })
               ])) : O("", !0)
             ], 10, pt)
           ], 16)) : O("", !0)
@@ -732,19 +785,19 @@ const nt = {
       })
     ], 8, ["to", "disabled"]));
   }
-}), bt = {
+}), gt = {
   key: 0,
   class: "vf-dialog"
 }, $t = ["aria-describedby", "aria-labelledby"], kt = {
   key: 0,
   class: "vf-dialog__header"
-}, wt = ["id"], Tt = ["id"], Vt = { class: "vf-dialog__actions" }, Ct = {
+}, wt = ["id"], Tt = ["id"], Vt = { class: "vf-dialog__actions" }, xt = {
   key: 1,
   class: "vf-dialog__body"
-}, xt = {
+}, Ct = {
   key: 2,
   class: "vf-dialog__footer"
-}, In = /* @__PURE__ */ L({
+}, Pn = /* @__PURE__ */ S({
   __name: "VfDialog",
   props: {
     open: { type: Boolean, default: void 0 },
@@ -760,62 +813,62 @@ const nt = {
   },
   emits: ["update:open", "openChange"],
   setup(t, { emit: n }) {
-    const e = t, i = n, l = D(null), r = D(null), u = Te(), v = Q({ prefix: "vf-dialog-title" }), y = Q({ prefix: "vf-dialog-description" }), g = se({
+    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({
       defaultOpen: e.defaultOpen,
-      open: s(() => e.open),
-      onOpenChange: (o) => {
-        i("update:open", o), i("openChange", o);
+      open: l(() => e.open),
+      onOpenChange: (s) => {
+        i("update:open", s), i("openChange", s);
       }
-    }), m = g.isOpen, C = {
-      enter: Y.fast,
-      leave: Y.fast
-    }, x = s(
+    }), d = b.isOpen, T = {
+      enter: X.fast,
+      leave: X.fast
+    }, g = l(
       () => e.disableTeleport || e.teleportTo === !1 || e.teleportTo === null
-    ), w = s(() => typeof e.teleportTo == "string" || typeof HTMLElement < "u" && e.teleportTo instanceof HTMLElement ? e.teleportTo : "body"), S = s(
-      () => F(
+    ), V = l(() => typeof e.teleportTo == "string" || typeof HTMLElement < "u" && e.teleportTo instanceof HTMLElement ? e.teleportTo : "body"), A = l(
+      () => P(
         "vf-dialog__content",
         e.size !== "md" && `vf-dialog__content--${e.size}`
       )
-    ), I = s(() => !!u.header), z = s(() => !!u.description), $ = s(
-      () => e.title || I.value ? v.value : void 0
-    ), f = s(
-      () => e.description || z.value ? y.value : void 0
+    ), 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
     );
-    function a() {
-      g.close();
+    function o() {
+      b.close();
     }
-    function h() {
-      e.closeOnOverlayClick && a();
+    function y() {
+      e.closeOnOverlayClick && o();
     }
-    function c() {
-      const o = l.value;
-      if (!o)
+    function p() {
+      const s = a.value;
+      if (!s)
         return;
-      const E = o.querySelector(
+      const E = s.querySelector(
         "[autofocus], [data-autofocus]"
       );
       if (E) {
         E.focus();
         return;
       }
-      o.focus();
+      s.focus();
     }
-    return fe(
-      (o) => {
-        !e.closeOnEscape || !m.value || (o.preventDefault(), a());
+    return ve(
+      (s) => {
+        !e.closeOnEscape || !d.value || (s.preventDefault(), o());
       },
       {
-        enabled: m
+        enabled: d
       }
-    ), Ae(l, {
-      enabled: m
-    }), xe(m), ee(
-      m,
-      async (o) => {
+    ), Ae(a, {
+      enabled: d
+    }), Ce(d), J(
+      d,
+      async (s) => {
         var E;
         if (!(typeof document > "u")) {
-          if (o) {
-            r.value = document.activeElement instanceof HTMLElement ? document.activeElement : null, await oe(), c();
+          if (s) {
+            r.value = document.activeElement instanceof HTMLElement ? document.activeElement : null, await ne(), p();
             return;
           }
           (E = r.value) == null || E.focus();
@@ -823,67 +876,67 @@ const nt = {
       },
       { immediate: !0 }
     ), te(() => {
-      var o;
-      m.value && ((o = r.value) == null || o.focus());
-    }), (o, E) => (d(), q(le, {
-      to: w.value,
-      disabled: x.value
+      var s;
+      d.value && ((s = r.value) == null || s.focus());
+    }), (s, E) => (c(), j(ue, {
+      to: V.value,
+      disabled: g.value
     }, [
-      j(ne, {
+      q(oe, {
         name: "vf-dialog-transition",
         appear: "",
-        duration: C
+        duration: T
       }, {
-        default: G(() => [
-          p(m) ? (d(), _("div", bt, [
-            T("div", {
+        default: U(() => [
+          h(d) ? (c(), _("div", gt, [
+            x("div", {
               class: "vf-dialog__overlay",
               "aria-hidden": "true",
-              onClick: h
+              onClick: y
             }),
-            T("section", {
+            x("section", {
               ref_key: "contentRef",
-              ref: l,
-              class: P(S.value),
-              "aria-describedby": f.value,
-              "aria-labelledby": $.value,
+              ref: a,
+              class: R(A.value),
+              "aria-describedby": m.value,
+              "aria-labelledby": k.value,
               "aria-modal": "true",
               role: "dialog",
               tabindex: "-1"
             }, [
-              t.title || t.description || o.$slots.header || o.$slots.description ? (d(), _("header", kt, [
-                T("div", null, [
-                  B(o.$slots, "header", {}, () => [
-                    t.title ? (d(), _("h2", {
+              t.title || t.description || s.$slots.header || s.$slots.description ? (c(), _("header", kt, [
+                x("div", null, [
+                  C(s.$slots, "header", {}, () => [
+                    t.title ? (c(), _("h2", {
                       key: 0,
-                      id: p(v),
+                      id: h(v),
                       class: "vf-dialog__title"
-                    }, N(t.title), 9, wt)) : O("", !0)
+                    }, F(t.title), 9, wt)) : O("", !0)
                   ]),
-                  B(o.$slots, "description", {}, () => [
-                    t.description ? (d(), _("p", {
+                  C(s.$slots, "description", {}, () => [
+                    t.description ? (c(), _("p", {
                       key: 0,
-                      id: p(y),
+                      id: h(f),
                       class: "vf-dialog__description"
-                    }, N(t.description), 9, Tt)) : O("", !0)
+                    }, F(t.description), 9, Tt)) : O("", !0)
                   ])
                 ]),
-                T("div", Vt, [
-                  B(o.$slots, "actions", { close: a }),
-                  e.closable ? (d(), q(De, {
+                x("div", Vt, [
+                  C(s.$slots, "actions", { close: o }),
+                  e.closable ? (c(), j(Ie, {
                     key: 0,
-                    icon: p(U).xmark,
+                    icon: h(W).xmark,
                     "aria-label": "Close dialog",
                     size: "sm",
-                    onClick: a
+                    onClick: o
                   }, null, 8, ["icon"])) : O("", !0)
                 ])
               ])) : O("", !0),
-              o.$slots.default ? (d(), _("div", Ct, [
-                B(o.$slots, "default", { close: a })
+              s.$slots.default ? (c(), _("div", xt, [
+                C(s.$slots, "default", { close: o })
               ])) : O("", !0),
-              o.$slots.footer ? (d(), _("footer", xt, [
-                B(o.$slots, "footer", { close: a })
+              s.$slots.footer ? (c(), _("footer", Ct, [
+                C(s.$slots, "footer", { close: o })
               ])) : O("", !0)
             ], 10, $t)
           ])) : O("", !0)
@@ -892,23 +945,23 @@ const nt = {
       })
     ], 8, ["to", "disabled"]));
   }
-}), Bt = ["aria-orientation", "role"], Ln = /* @__PURE__ */ L({
+}), Bt = ["aria-orientation", "role"], Nn = /* @__PURE__ */ S({
   inheritAttrs: !1,
   __name: "VfDivider",
   props: {
     orientation: { default: "horizontal" }
   },
   setup(t) {
-    const n = t, e = R(), i = s(() => n.orientation === "vertical"), l = s(
-      () => F("vf-divider", `vf-divider--${n.orientation}`)
+    const n = t, e = N(), i = l(() => n.orientation === "vertical"), a = l(
+      () => P("vf-divider", `vf-divider--${n.orientation}`)
     );
-    return (r, u) => (d(), _("div", H({
-      class: l.value,
+    return (r, u) => (c(), _("div", H({
+      class: a.value,
       "aria-orientation": n.orientation,
       role: i.value ? "separator" : void 0
-    }, p(e)), null, 16, Bt));
+    }, h(e)), null, 16, Bt));
   }
-}), Et = { class: "vf-dropdown" }, Ot = ["id", "aria-controls", "aria-expanded"], At = ["id", "aria-labelledby"], Sn = /* @__PURE__ */ L({
+}), Et = { class: "vf-dropdown" }, Ot = ["id", "aria-controls", "aria-expanded"], At = ["id", "aria-labelledby"], Hn = /* @__PURE__ */ S({
   __name: "VfDropdown",
   props: {
     open: { type: Boolean, default: void 0 },
@@ -920,166 +973,166 @@ const nt = {
   },
   emits: ["update:open", "openChange"],
   setup(t, { emit: n }) {
-    const e = t, i = n, l = D(null), r = D(null), u = D(null), v = Q({ prefix: "vf-dropdown-menu" }), y = Q({ prefix: "vf-dropdown-trigger" }), g = {
-      enter: Y.fast,
-      leave: Y.fast
-    }, m = s(
+    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(
       () => e.disableTeleport || e.teleportTo === !1 || e.teleportTo === null
-    ), C = s(() => typeof e.teleportTo == "string" || typeof HTMLElement < "u" && e.teleportTo instanceof HTMLElement ? e.teleportTo : "body"), x = se({
+    ), T = l(() => typeof e.teleportTo == "string" || typeof HTMLElement < "u" && e.teleportTo instanceof HTMLElement ? e.teleportTo : "body"), g = ce({
       defaultOpen: e.defaultOpen,
-      open: s(() => e.open),
-      onOpenChange: (b) => {
-        i("update:open", b), i("openChange", b);
+      open: l(() => e.open),
+      onOpenChange: ($) => {
+        i("update:open", $), i("openChange", $);
       }
-    }), w = x.isOpen, S = s(() => [
+    }), V = g.isOpen, A = l(() => [
       "vf-dropdown__menu",
-      a.value.startsWith("top") && "vf-dropdown__menu--top"
-    ]), I = s(() => {
-      const b = h.value.arrow;
+      o.value.startsWith("top") && "vf-dropdown__menu--top"
+    ]), D = l(() => {
+      const $ = y.value.arrow;
       return {
-        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
+        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
       };
-    }), z = s(() => ({
-      left: `${I.value.x}px`,
-      top: `${I.value.y}px`
-    })), $ = s(() => [
+    }), z = l(() => ({
+      left: `${D.value.x}px`,
+      top: `${D.value.y}px`
+    })), k = l(() => [
       "vf-dropdown__arrow",
-      a.value.startsWith("top") ? "vf-dropdown__arrow--top" : "vf-dropdown__arrow--bottom"
-    ]), f = s(
+      o.value.startsWith("top") ? "vf-dropdown__arrow--top" : "vf-dropdown__arrow--bottom"
+    ]), m = l(
       () => e.placement === "bottom-end" ? ["bottom-end", "top-end"] : ["bottom-start", "top-start"]
     ), {
-      placement: a,
-      middlewareData: h,
-      styles: c
-    } = ye(l, r, {
-      enabled: w,
-      placement: s(() => e.placement),
-      middleware: s(
+      placement: o,
+      middlewareData: y,
+      styles: p
+    } = ye(a, r, {
+      enabled: V,
+      placement: l(() => e.placement),
+      middleware: l(
         () => [
-          ve(10),
-          pe({ placements: f.value }),
-          me(),
-          u.value ? he(u.value) : void 0
-        ].filter((b) => b !== void 0)
+          pe(10),
+          me({ placements: m.value }),
+          he(),
+          u.value ? _e(u.value) : void 0
+        ].filter(($) => $ !== void 0)
       ),
       strategy: "fixed"
     });
-    function o() {
-      var b;
+    function s() {
+      var $;
       return Array.from(
-        ((b = r.value) == null ? void 0 : b.querySelectorAll('[role="menuitem"]')) ?? []
+        (($ = r.value) == null ? void 0 : $.querySelectorAll('[role="menuitem"]')) ?? []
       );
     }
     async function E() {
-      var b;
-      await oe(), (b = o()[0]) == null || b.focus();
+      var $;
+      await ne(), ($ = s()[0]) == null || $.focus();
     }
-    function A(b = {}) {
-      x.open(), b.focusFirstItem && E();
+    function L($ = {}) {
+      g.open(), $.focusFirstItem && E();
     }
     function M() {
-      var b;
-      x.close(), (b = l.value) == null || b.focus();
+      var $;
+      g.close(), ($ = a.value) == null || $.focus();
     }
-    function V() {
-      if (w.value) {
+    function B() {
+      if (V.value) {
         M();
         return;
       }
-      A();
+      L();
     }
-    function k(b) {
-      (b.key === "ArrowDown" || b.key === "Enter" || b.key === " ") && (b.preventDefault(), A({ focusFirstItem: !0 }));
+    function w($) {
+      ($.key === "ArrowDown" || $.key === "Enter" || $.key === " ") && ($.preventDefault(), L({ focusFirstItem: !0 }));
     }
-    function J(b) {
-      var ge, be, $e, ke;
-      const X = o(), _e = X.findIndex(
-        (Ie) => Ie === document.activeElement
+    function Z($) {
+      var ge, $e, ke, we;
+      const G = s(), be = G.findIndex(
+        (Le) => Le === document.activeElement
       );
-      if (b.key === "ArrowDown") {
-        b.preventDefault(), (ge = X[(_e + 1 + X.length) % X.length]) == null || ge.focus();
+      if ($.key === "ArrowDown") {
+        $.preventDefault(), (ge = G[(be + 1 + G.length) % G.length]) == null || ge.focus();
         return;
       }
-      if (b.key === "ArrowUp") {
-        b.preventDefault(), (be = X[(_e - 1 + X.length) % X.length]) == null || be.focus();
+      if ($.key === "ArrowUp") {
+        $.preventDefault(), ($e = G[(be - 1 + G.length) % G.length]) == null || $e.focus();
         return;
       }
-      if (b.key === "Home") {
-        b.preventDefault(), ($e = X[0]) == null || $e.focus();
+      if ($.key === "Home") {
+        $.preventDefault(), (ke = G[0]) == null || ke.focus();
         return;
       }
-      b.key === "End" && (b.preventDefault(), (ke = X[X.length - 1]) == null || ke.focus());
+      $.key === "End" && ($.preventDefault(), (we = G[G.length - 1]) == null || we.focus());
     }
-    function ie() {
+    function de() {
       e.closeOnSelect && M();
     }
     return Oe(
-      [l, r],
+      [a, r],
       () => {
-        w.value && M();
+        V.value && M();
       },
       {
-        enabled: w,
+        enabled: V,
         event: "click"
       }
-    ), fe(
-      (b) => {
-        w.value && (b.preventDefault(), M());
+    ), ve(
+      ($) => {
+        V.value && ($.preventDefault(), M());
       },
       {
-        enabled: w
+        enabled: V
       }
-    ), (b, X) => (d(), _("div", Et, [
-      T("div", {
-        id: p(y),
+    ), ($, G) => (c(), _("div", Et, [
+      x("div", {
+        id: h(f),
         ref_key: "triggerRef",
-        ref: l,
+        ref: a,
         class: "vf-dropdown__trigger",
-        "aria-controls": p(v),
-        "aria-expanded": p(w),
+        "aria-controls": h(v),
+        "aria-expanded": h(V),
         "aria-haspopup": "menu",
         tabindex: "0",
-        onClick: V,
-        onKeydown: k
+        onClick: B,
+        onKeydown: w
       }, [
-        B(b.$slots, "trigger", {
-          open: p(w),
-          toggle: V
+        C($.$slots, "trigger", {
+          open: h(V),
+          toggle: B
         })
       ], 40, Ot),
-      (d(), q(le, {
-        to: C.value,
-        disabled: m.value
+      (c(), j(ue, {
+        to: T.value,
+        disabled: d.value
       }, [
-        j(ne, {
+        q(oe, {
           name: "vf-floating-transition",
           appear: "",
-          duration: g
+          duration: b
         }, {
-          default: G(() => [
-            p(w) ? (d(), _("div", {
+          default: U(() => [
+            h(V) ? (c(), _("div", {
               key: 0,
-              id: p(v),
+              id: h(v),
               ref_key: "menuRef",
               ref: r,
-              class: P(S.value),
-              style: W(p(c)),
-              "aria-labelledby": p(y),
+              class: R(A.value),
+              style: Y(h(p)),
+              "aria-labelledby": h(f),
               role: "menu",
-              onClick: ie,
-              onKeydown: J
+              onClick: de,
+              onKeydown: Z
             }, [
-              T("span", {
+              x("span", {
                 ref_key: "arrowRef",
                 ref: u,
-                class: P($.value),
-                style: W(z.value),
+                class: R(k.value),
+                style: Y(z.value),
                 "aria-hidden": "true"
               }, null, 6),
-              B(b.$slots, "default", {
+              C($.$slots, "default", {
                 close: M,
-                open: p(w)
+                open: h(V)
               })
             ], 46, At)) : O("", !0)
           ]),
@@ -1088,7 +1141,23 @@ const nt = {
       ], 8, ["to", "disabled"]))
     ]));
   }
-}), Dt = ["value", "aria-invalid"], zn = /* @__PURE__ */ L({
+}), 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({
   inheritAttrs: !1,
   __name: "VfInput",
   props: {
@@ -1098,8 +1167,8 @@ const nt = {
   },
   emits: ["update:modelValue"],
   setup(t, { emit: n }) {
-    const e = t, i = n, l = R(), r = s(
-      () => F(
+    const e = t, i = n, a = N(), r = l(
+      () => P(
         "vf-input",
         e.size !== "md" && `vf-input--${e.size}`,
         e.invalid && "vf-input--invalid"
@@ -1108,13 +1177,13 @@ const nt = {
     function u(v) {
       i("update:modelValue", v.target.value);
     }
-    return (v, y) => (d(), _("input", H({
+    return (v, f) => (c(), _("input", H({
       class: r.value,
       value: e.modelValue,
       "aria-invalid": e.invalid || void 0
-    }, p(l), { onInput: u }), null, 16, Dt));
+    }, h(a), { onInput: u }), null, 16, It));
   }
-}), Mn = /* @__PURE__ */ L({
+}), Kn = /* @__PURE__ */ S({
   inheritAttrs: !1,
   __name: "VfLink",
   props: {
@@ -1127,13 +1196,13 @@ const nt = {
     component: { default: void 0 }
   },
   setup(t) {
-    const n = t, e = R(), i = s(() => n.to !== void 0), l = s(() => i.value ? n.component ?? re("RouterLink") : "a"), r = s(() => n.rel ? n.rel : n.target === "_blank" ? "noopener noreferrer" : void 0), u = s(
-      () => F(
+    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(
         "vf-link",
         n.underline && "vf-link--underline",
         n.tone === "muted" && "vf-link--muted"
       )
-    ), v = s(() => i.value ? {
+    ), v = l(() => i.value ? {
       to: n.to,
       target: n.target,
       rel: r.value
@@ -1141,34 +1210,34 @@ const nt = {
       href: n.href,
       target: n.target,
       rel: r.value
-    }), y = s(() => ({
+    }), f = l(() => ({
       ...e,
       ...v.value,
       class: u.value
     }));
-    return (g, m) => (d(), q(re(l.value), Ve(Ce(y.value)), {
-      default: G(() => [
-        B(g.$slots, "default")
+    return (b, d) => (c(), j(ae(a.value), Ve(xe(f.value)), {
+      default: U(() => [
+        C(b.$slots, "default")
       ]),
       _: 3
     }, 16));
   }
-}), It = { class: "vf-nav-menu__node" }, Lt = { class: "vf-nav-menu__item-content" }, St = { class: "vf-nav-menu__group-label" }, zt = ["aria-expanded", "disabled"], Mt = { class: "vf-nav-menu__item-content" }, Pt = {
+}), 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 = {
   key: 0,
   class: "vf-nav-menu__leading-icon",
   "aria-hidden": "true"
-}, Nt = { class: "vf-nav-menu__label" }, Ft = { class: "vf-nav-menu__item-content" }, Rt = {
+}, Nt = { class: "vf-nav-menu__label" }, Ht = { class: "vf-nav-menu__item-content" }, Rt = {
   key: 0,
   class: "vf-nav-menu__leading-icon",
   "aria-hidden": "true"
-}, Ht = { class: "vf-nav-menu__label" }, Kt = ["aria-current", "disabled"], jt = { class: "vf-nav-menu__item-content" }, qt = {
+}, Ft = { class: "vf-nav-menu__label" }, Kt = ["aria-current", "disabled"], jt = { class: "vf-nav-menu__item-content" }, qt = {
   key: 0,
   class: "vf-nav-menu__leading-icon",
   "aria-hidden": "true"
 }, Ut = { class: "vf-nav-menu__label" }, Wt = {
   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__ */ L({
+}, Yt = { class: "vf-nav-menu__list vf-nav-menu__list--nested" }, Xt = /* @__PURE__ */ S({
   name: "VfNavMenuItemNode",
   __name: "VfNavMenuItemNode",
   props: {
@@ -1180,110 +1249,110 @@ const nt = {
   },
   emits: ["toggle", "select"],
   setup(t, { emit: n }) {
-    const e = t, i = n, l = s(() => {
-      var c;
-      return !!((c = e.item.children) != null && c.length);
-    }), r = s(() => e.item.kind === "group"), u = s(
+    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(
       () => e.expandedValues.includes(e.item.value)
-    ), v = s(() => e.activeValue === e.item.value), y = s(
+    ), v = l(() => e.activeValue === e.item.value), f = l(
       () => e.item.href !== void 0 || e.item.to !== void 0
-    ), g = s(() => e.item.to !== void 0 ? re("RouterLink") : "a"), m = s(() => e.item.rel ? e.item.rel : e.item.target === "_blank" ? "noopener noreferrer" : void 0), C = s(() => 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 ? {
       to: e.item.to,
       target: e.item.target,
-      rel: m.value
+      rel: d.value
     } : {
       href: e.item.href,
       target: e.item.target,
-      rel: m.value
+      rel: d.value
     });
-    function x() {
+    function g() {
       e.item.disabled || i("toggle", {
         value: e.item.value,
         parentPath: e.parentPath
       });
     }
-    function w(c) {
+    function V(p) {
       if (e.item.disabled) {
-        c == null || c.preventDefault();
+        p == null || p.preventDefault();
         return;
       }
       i("select", e.item);
     }
-    function S(c) {
-      const o = c;
-      return o.style.transition = "height var(--vf-motion-duration-normal) var(--vf-motion-ease-standard), opacity var(--vf-motion-duration-normal) var(--vf-motion-ease-standard)", o;
+    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 I(c) {
-      const o = S(c);
-      o.style.overflow = "hidden", o.style.height = "0", o.style.opacity = "0";
+    function D(p) {
+      const s = A(p);
+      s.style.overflow = "hidden", s.style.height = "0", s.style.opacity = "0";
     }
-    function z(c) {
-      const o = S(c);
+    function z(p) {
+      const s = A(p);
       requestAnimationFrame(() => {
-        o.style.height = `${o.scrollHeight}px`, o.style.opacity = "1";
+        s.style.height = `${s.scrollHeight}px`, s.style.opacity = "1";
       });
     }
-    function $(c) {
-      const o = c;
-      o.style.transition = "", o.style.overflow = "", o.style.height = "", o.style.opacity = "";
+    function k(p) {
+      const s = p;
+      s.style.transition = "", s.style.overflow = "", s.style.height = "", s.style.opacity = "";
     }
-    function f(c) {
-      const o = S(c);
-      o.style.overflow = "hidden", o.style.height = `${o.scrollHeight}px`, o.style.opacity = "1";
+    function m(p) {
+      const s = A(p);
+      s.style.overflow = "hidden", s.style.height = `${s.scrollHeight}px`, s.style.opacity = "1";
     }
-    function a(c) {
-      const o = c;
-      o.offsetHeight, requestAnimationFrame(() => {
-        o.style.height = "0", o.style.opacity = "0";
+    function o(p) {
+      const s = p;
+      s.offsetHeight, requestAnimationFrame(() => {
+        s.style.height = "0", s.style.opacity = "0";
       });
     }
-    function h(c) {
-      const o = c;
-      o.style.transition = "", o.style.overflow = "", o.style.height = "", o.style.opacity = "";
+    function y(p) {
+      const s = p;
+      s.style.transition = "", s.style.overflow = "", s.style.height = "", s.style.opacity = "";
     }
-    return (c, o) => {
-      const E = He("VfNavMenuItemNode", !0);
-      return d(), _("li", It, [
-        r.value ? (d(), _("div", {
+    return (p, s) => {
+      const E = Pe("VfNavMenuItemNode", !0);
+      return c(), _("li", Lt, [
+        r.value ? (c(), _("div", {
           key: 0,
-          class: P(["vf-nav-menu__group", `vf-nav-menu__group--level-${t.level}`]),
-          style: W({ "--vf-nav-menu-level": String(t.level) })
+          class: R(["vf-nav-menu__group", `vf-nav-menu__group--level-${t.level}`]),
+          style: Y({ "--vf-nav-menu-level": String(t.level) })
         }, [
-          T("span", Lt, [
-            T("span", St, N(t.item.label), 1)
+          x("span", St, [
+            x("span", Dt, F(t.item.label), 1)
           ])
-        ], 6)) : l.value ? (d(), _("button", {
+        ], 6)) : a.value ? (c(), _("button", {
           key: 1,
-          class: P([
+          class: R([
             "vf-nav-menu__item",
             "vf-nav-menu__item--branch",
             u.value && "vf-nav-menu__item--expanded"
           ]),
-          style: W({ "--vf-nav-menu-level": String(t.level) }),
+          style: Y({ "--vf-nav-menu-level": String(t.level) }),
           "aria-expanded": u.value,
           disabled: t.item.disabled,
           type: "button",
-          onClick: x
+          onClick: g
         }, [
-          T("span", Mt, [
-            t.item.leadingIcon ? (d(), _("span", Pt, [
-              j(p(Z), {
+          x("span", Mt, [
+            t.item.leadingIcon ? (c(), _("span", Pt, [
+              q(h(ee), {
                 icon: t.item.leadingIcon,
                 size: "1rem"
               }, null, 8, ["icon"])
             ])) : O("", !0),
-            T("span", Nt, N(t.item.label), 1)
+            x("span", Nt, F(t.item.label), 1)
           ]),
-          T("span", {
-            class: P(["vf-nav-menu__icon", u.value && "vf-nav-menu__icon--open"]),
+          x("span", {
+            class: R(["vf-nav-menu__icon", u.value && "vf-nav-menu__icon--open"]),
             "aria-hidden": "true"
           }, [
-            j(p(Z), {
-              icon: p(U).chevronDown,
+            q(h(ee), {
+              icon: h(W).chevronDown,
               size: "0.875rem"
             }, null, 8, ["icon"])
           ], 2)
-        ], 14, zt)) : y.value ? (d(), q(re(g.value), H({ key: 2 }, C.value, {
+        ], 14, zt)) : f.value ? (c(), j(ae(b.value), H({ key: 2 }, T.value, {
           class: [
             "vf-nav-menu__item",
             v.value && "vf-nav-menu__item--active",
@@ -1291,81 +1360,81 @@ const nt = {
           ],
           style: { "--vf-nav-menu-level": String(t.level) },
           "aria-current": v.value ? "page" : void 0,
-          onClick: w
+          onClick: V
         }), {
-          default: G(() => [
-            T("span", Ft, [
-              t.item.leadingIcon ? (d(), _("span", Rt, [
-                j(p(Z), {
+          default: U(() => [
+            x("span", Ht, [
+              t.item.leadingIcon ? (c(), _("span", Rt, [
+                q(h(ee), {
                   icon: t.item.leadingIcon,
                   size: "1rem"
                 }, null, 8, ["icon"])
               ])) : O("", !0),
-              T("span", Ht, N(t.item.label), 1)
+              x("span", Ft, F(t.item.label), 1)
             ])
           ]),
           _: 1
-        }, 16, ["class", "style", "aria-current"])) : (d(), _("button", {
+        }, 16, ["class", "style", "aria-current"])) : (c(), _("button", {
           key: 3,
-          class: P([
+          class: R([
             "vf-nav-menu__item",
             v.value && "vf-nav-menu__item--active",
             t.item.disabled && "vf-nav-menu__item--disabled"
           ]),
-          style: W({ "--vf-nav-menu-level": String(t.level) }),
+          style: Y({ "--vf-nav-menu-level": String(t.level) }),
           "aria-current": v.value ? "page" : void 0,
           disabled: t.item.disabled,
           type: "button",
-          onClick: o[0] || (o[0] = (A) => w())
+          onClick: s[0] || (s[0] = (L) => V())
         }, [
-          T("span", jt, [
-            t.item.leadingIcon ? (d(), _("span", qt, [
-              j(p(Z), {
+          x("span", jt, [
+            t.item.leadingIcon ? (c(), _("span", qt, [
+              q(h(ee), {
                 icon: t.item.leadingIcon,
                 size: "1rem"
               }, null, 8, ["icon"])
             ])) : O("", !0),
-            T("span", Ut, N(t.item.label), 1)
+            x("span", Ut, F(t.item.label), 1)
           ])
         ], 14, Kt)),
-        l.value && r.value ? (d(), _("ul", Wt, [
-          (d(!0), _(ue, null, de(t.item.children, (A) => (d(), q(E, {
-            key: A.value,
-            item: A,
+        a.value && r.value ? (c(), _("ul", Wt, [
+          (c(!0), _(se, null, ie(t.item.children, (L) => (c(), j(E, {
+            key: L.value,
+            item: L,
             level: t.level + 1,
             "parent-path": [...t.parentPath, t.item.value],
             "active-value": t.activeValue,
             "expanded-values": t.expandedValues,
-            onToggle: o[1] || (o[1] = (M) => i("toggle", M)),
-            onSelect: o[2] || (o[2] = (M) => i("select", M))
+            onToggle: s[1] || (s[1] = (M) => i("toggle", M)),
+            onSelect: s[2] || (s[2] = (M) => i("select", M))
           }, null, 8, ["item", "level", "parent-path", "active-value", "expanded-values"]))), 128))
-        ])) : l.value ? (d(), q(ne, {
+        ])) : a.value ? (c(), j(oe, {
           key: 5,
-          onBeforeEnter: I,
+          onBeforeEnter: D,
           onEnter: z,
-          onAfterEnter: $,
-          onBeforeLeave: f,
-          onLeave: a,
-          onAfterLeave: h
+          onAfterEnter: k,
+          onBeforeLeave: m,
+          onLeave: o,
+          onAfterLeave: y
         }, {
-          default: G(() => [
-            u.value ? (d(), _("div", {
+          default: U(() => [
+            u.value ? (c(), _("div", {
               key: 0,
-              class: P([
+              class: R([
                 "vf-nav-menu__collapse",
                 `vf-nav-menu__collapse--level-${t.level}`
               ])
             }, [
-              T("ul", Yt, [
-                (d(!0), _(ue, null, de(t.item.children, (A) => (d(), q(E, {
-                  key: A.value,
-                  item: A,
+              x("ul", Yt, [
+                (c(!0), _(se, null, ie(t.item.children, (L) => (c(), j(E, {
+                  key: L.value,
+                  item: L,
                   level: t.level + 1,
                   "parent-path": [...t.parentPath, t.item.value],
                   "active-value": t.activeValue,
                   "expanded-values": t.expandedValues,
-                  onToggle: o[3] || (o[3] = (M) => i("toggle", M)),
-                  onSelect: o[4] || (o[4] = (M) => i("select", M))
+                  onToggle: s[3] || (s[3] = (M) => i("toggle", M)),
+                  onSelect: s[4] || (s[4] = (M) => i("select", M))
                 }, null, 8, ["item", "level", "parent-path", "active-value", "expanded-values"]))), 128))
               ])
             ], 2)) : O("", !0)
@@ -1375,7 +1444,7 @@ const nt = {
       ]);
     };
   }
-}), Gt = ["aria-label"], Qt = { class: "vf-nav-menu__list" }, Pn = /* @__PURE__ */ L({
+}), Gt = ["aria-label"], Qt = { class: "vf-nav-menu__list" }, jn = /* @__PURE__ */ S({
   __name: "VfNavMenu",
   props: {
     items: {},
@@ -1386,114 +1455,114 @@ const nt = {
   },
   emits: ["update:modelValue", "change", "select"],
   setup(t, { emit: n }) {
-    const e = t, i = n, l = D(e.defaultValue), r = s(() => e.modelValue ?? l.value), u = D([]);
-    function v(a, h) {
-      return a.some(
-        (c) => {
-          var o;
-          return h(c) || ((o = c.children) != null && o.length ? v(c.children, h) : !1);
+    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) => {
+          var s;
+          return y(p) || ((s = p.children) != null && s.length ? v(p.children, y) : !1);
         }
       );
     }
-    const y = s(
-      () => v(e.items, (a) => a.kind === "group")
-    ), g = s(
-      () => v(e.items, (a) => !!a.leadingIcon)
-    ), m = s(() => !y.value && !g.value);
-    function C(a) {
-      var h;
-      return a.kind !== "group" && !!((h = a.children) != null && h.length);
-    }
-    function x(a, h, c = []) {
-      var o;
-      if (!h)
+    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);
+    }
+    function g(o, y, p = []) {
+      var s;
+      if (!y)
         return [];
-      for (const E of a) {
-        if (E.value === h)
-          return c;
-        if ((o = E.children) != null && o.length) {
-          const A = x(E.children, h, [
-            ...c,
+      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
           ]);
-          if (A.length)
-            return A;
+          if (L.length)
+            return L;
         }
       }
       return [];
     }
-    function w() {
-      const a = x(e.items, r.value);
+    function V() {
+      const o = g(e.items, r.value);
       u.value = Array.from(
-        /* @__PURE__ */ new Set([...u.value, ...a])
+        /* @__PURE__ */ new Set([...u.value, ...o])
       );
     }
-    function S(a, h) {
-      var A;
-      if (!h.length)
-        return a;
-      const [c, ...o] = h, E = a.find((M) => M.value === c);
-      return (A = E == null ? void 0 : E.children) != null && A.length ? S(E.children, o) : [];
-    }
-    function I(a) {
-      return a.flatMap((h) => {
-        var o;
-        const c = (o = h.children) != null && o.length ? I(h.children) : [];
-        return C(h) ? [h.value, ...c] : c;
+    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 D(o) {
+      return o.flatMap((y) => {
+        var s;
+        const p = (s = y.children) != null && s.length ? D(y.children) : [];
+        return T(y) ? [y.value, ...p] : p;
       });
     }
-    function z(a) {
-      e.modelValue === void 0 && (l.value = a), i("update:modelValue", a), i("change", a);
+    function z(o) {
+      e.modelValue === void 0 && (a.value = o), i("update:modelValue", o), i("change", o);
     }
-    function $(a) {
-      z(a.value), u.value = Array.from(
+    function k(o) {
+      z(o.value), u.value = Array.from(
         /* @__PURE__ */ new Set([
           ...u.value,
-          ...x(e.items, a.value)
+          ...g(e.items, o.value)
         ])
-      ), i("select", a);
+      ), i("select", o);
     }
-    function f(a) {
-      const { value: h, parentPath: c } = a;
-      if (u.value.includes(h)) {
+    function m(o) {
+      const { value: y, parentPath: p } = o;
+      if (u.value.includes(y)) {
         u.value = u.value.filter(
-          (o) => o !== h
+          (s) => s !== y
         );
         return;
       }
       if (e.expandMode === "single") {
-        const E = S(e.items, c).filter((A) => A.value !== h && C(A)).flatMap((A) => I([A]));
+        const E = A(e.items, p).filter((L) => L.value !== y && T(L)).flatMap((L) => D([L]));
         u.value = u.value.filter(
-          (A) => !E.includes(A)
+          (L) => !E.includes(L)
         );
       }
-      u.value = [...u.value, h];
+      u.value = [...u.value, y];
     }
-    return ee(
+    return J(
       () => [e.items, r.value],
       () => {
-        w();
+        V();
       },
       { immediate: !0, deep: !0 }
-    ), (a, h) => (d(), _("nav", {
-      class: P(["vf-nav-menu", m.value && "vf-nav-menu--simple"]),
+    ), (o, y) => (c(), _("nav", {
+      class: R(["vf-nav-menu", d.value && "vf-nav-menu--simple"]),
       "aria-label": t.ariaLabel
     }, [
-      T("ul", Qt, [
-        (d(!0), _(ue, null, de(t.items, (c) => (d(), q(Xt, {
-          key: c.value,
-          item: c,
+      x("ul", Qt, [
+        (c(!0), _(se, null, ie(t.items, (p) => (c(), j(Xt, {
+          key: p.value,
+          item: p,
           level: 0,
           "parent-path": [],
           "active-value": r.value,
           "expanded-values": u.value,
-          onToggle: f,
-          onSelect: $
+          onToggle: m,
+          onSelect: k
         }, null, 8, ["item", "active-value", "expanded-values"]))), 128))
       ])
     ], 10, Gt));
   }
-}), Jt = { key: 0 }, Zt = { class: "vf-panel__title" }, Nn = /* @__PURE__ */ L({
+}), Jt = { key: 0 }, Zt = { class: "vf-panel__title" }, qn = /* @__PURE__ */ S({
   inheritAttrs: !1,
   __name: "VfPanel",
   props: {
@@ -1501,19 +1570,19 @@ const nt = {
     subtle: { type: Boolean, default: !1 }
   },
   setup(t) {
-    const n = t, e = R(), i = s(
-      () => F("vf-panel", n.subtle && "vf-panel--subtle")
+    const n = t, e = N(), i = l(
+      () => P("vf-panel", n.subtle && "vf-panel--subtle")
     );
-    return (l, r) => (d(), _("section", H({ class: i.value }, p(e)), [
-      n.title || l.$slots.header ? (d(), _("header", Jt, [
-        B(l.$slots, "header", {}, () => [
-          T("h3", Zt, N(n.title), 1)
+    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)
         ])
       ])) : O("", !0),
-      B(l.$slots, "default")
+      C(a.$slots, "default")
     ], 16));
   }
-}), en = { class: "vf-popover" }, tn = ["id", "aria-controls", "aria-expanded"], nn = ["id", "aria-labelledby"], Fn = /* @__PURE__ */ L({
+}), en = { class: "vf-popover" }, tn = ["id", "aria-controls", "aria-expanded"], nn = ["id", "aria-labelledby"], Un = /* @__PURE__ */ S({
   __name: "VfPopover",
   props: {
     open: { type: Boolean, default: void 0 },
@@ -1526,145 +1595,145 @@ const nt = {
   },
   emits: ["update:open", "openChange"],
   setup(t, { emit: n }) {
-    const e = t, i = n, l = D(null), r = D(null), u = D(null), v = Q({ prefix: "vf-popover-content" }), y = Q({ prefix: "vf-popover-trigger" }), g = {
-      enter: Y.fast,
-      leave: Y.fast
-    }, m = s(
+    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(
       () => e.disableTeleport || e.teleportTo === !1 || e.teleportTo === null
-    ), C = s(() => typeof e.teleportTo == "string" || typeof HTMLElement < "u" && e.teleportTo instanceof HTMLElement ? e.teleportTo : "body"), x = se({
+    ), T = l(() => typeof e.teleportTo == "string" || typeof HTMLElement < "u" && e.teleportTo instanceof HTMLElement ? e.teleportTo : "body"), g = ce({
       defaultOpen: e.defaultOpen,
-      open: s(() => e.open),
-      onOpenChange: (k) => {
-        i("update:open", k), i("openChange", k);
+      open: l(() => e.open),
+      onOpenChange: (w) => {
+        i("update:open", w), i("openChange", w);
       }
-    }), w = x.isOpen, S = s(
+    }), V = g.isOpen, A = l(
       () => e.placement === "bottom-end" ? ["bottom-end", "top-end"] : ["bottom-start", "top-start"]
     ), {
-      placement: I,
+      placement: D,
       middlewareData: z,
-      styles: $
-    } = ye(l, r, {
-      enabled: w,
-      placement: s(() => e.placement),
-      middleware: s(
+      styles: k
+    } = ye(a, r, {
+      enabled: V,
+      placement: l(() => e.placement),
+      middleware: l(
         () => [
-          ve(10),
-          pe({ placements: S.value }),
-          me(),
-          u.value ? he(u.value) : void 0
-        ].filter((k) => k !== void 0)
+          pe(10),
+          me({ placements: A.value }),
+          he(),
+          u.value ? _e(u.value) : void 0
+        ].filter((w) => w !== void 0)
       ),
       strategy: "fixed"
-    }), f = s(() => [
+    }), m = l(() => [
       "vf-popover__content",
-      I.value.startsWith("top") && "vf-popover__content--top"
-    ]), a = s(() => {
-      const k = z.value.arrow;
+      D.value.startsWith("top") && "vf-popover__content--top"
+    ]), o = l(() => {
+      const w = z.value.arrow;
       return {
-        x: (k == null ? void 0 : k.x) !== void 0 && (k == null ? void 0 : k.baseX) !== void 0 ? k.x - k.baseX : 0,
-        y: (k == null ? void 0 : k.y) !== void 0 && (k == null ? void 0 : k.baseY) !== void 0 ? k.y - k.baseY : 0
+        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
       };
-    }), h = s(() => ({
-      left: `${a.value.x}px`,
-      top: `${a.value.y}px`
-    })), c = s(() => [
+    }), y = l(() => ({
+      left: `${o.value.x}px`,
+      top: `${o.value.y}px`
+    })), p = l(() => [
       "vf-popover__arrow",
-      I.value.startsWith("top") ? "vf-popover__arrow--top" : "vf-popover__arrow--bottom"
+      D.value.startsWith("top") ? "vf-popover__arrow--top" : "vf-popover__arrow--bottom"
     ]);
-    async function o() {
-      var J, ie;
-      await oe();
-      const k = (J = r.value) == null ? void 0 : J.querySelector(
+    async function s() {
+      var Z, de;
+      await ne();
+      const w = (Z = r.value) == null ? void 0 : Z.querySelector(
         "[autofocus], [data-autofocus]"
       );
-      if (k) {
-        k.focus();
+      if (w) {
+        w.focus();
         return;
       }
-      (ie = r.value) == null || ie.focus();
+      (de = r.value) == null || de.focus();
     }
     function E() {
-      x.open(), o();
+      g.open(), s();
     }
-    function A() {
-      var k;
-      x.close(), (k = l.value) == null || k.focus();
+    function L() {
+      var w;
+      g.close(), (w = a.value) == null || w.focus();
     }
     function M() {
-      if (w.value) {
-        A();
+      if (V.value) {
+        L();
         return;
       }
       E();
     }
-    function V(k) {
-      (k.key === "Enter" || k.key === " ") && (k.preventDefault(), M()), k.key === "ArrowDown" && (k.preventDefault(), E());
+    function B(w) {
+      (w.key === "Enter" || w.key === " ") && (w.preventDefault(), M()), w.key === "ArrowDown" && (w.preventDefault(), E());
     }
     return Oe(
-      [l, r],
+      [a, r],
       () => {
-        w.value && e.closeOnOutsideClick && A();
+        V.value && e.closeOnOutsideClick && L();
       },
       {
-        enabled: w,
+        enabled: V,
         event: "click"
       }
-    ), fe(
-      (k) => {
-        !w.value || !e.closeOnEscape || (k.preventDefault(), A());
+    ), ve(
+      (w) => {
+        !V.value || !e.closeOnEscape || (w.preventDefault(), L());
       },
       {
-        enabled: w
+        enabled: V
       }
-    ), (k, J) => (d(), _("div", en, [
-      T("div", {
-        id: p(y),
+    ), (w, Z) => (c(), _("div", en, [
+      x("div", {
+        id: h(f),
         ref_key: "triggerRef",
-        ref: l,
+        ref: a,
         class: "vf-popover__trigger",
-        "aria-controls": p(v),
-        "aria-expanded": p(w),
+        "aria-controls": h(v),
+        "aria-expanded": h(V),
         "aria-haspopup": "dialog",
         tabindex: "0",
         onClick: M,
-        onKeydown: V
+        onKeydown: B
       }, [
-        B(k.$slots, "trigger", {
-          open: p(w),
+        C(w.$slots, "trigger", {
+          open: h(V),
           toggle: M
         })
       ], 40, tn),
-      (d(), q(le, {
-        to: C.value,
-        disabled: m.value
+      (c(), j(ue, {
+        to: T.value,
+        disabled: d.value
       }, [
-        j(ne, {
+        q(oe, {
           name: "vf-floating-transition",
           appear: "",
-          duration: g
+          duration: b
         }, {
-          default: G(() => [
-            p(w) ? (d(), _("section", {
+          default: U(() => [
+            h(V) ? (c(), _("section", {
               key: 0,
-              id: p(v),
+              id: h(v),
               ref_key: "contentRef",
               ref: r,
-              class: P(f.value),
-              style: W(p($)),
-              "aria-labelledby": p(y),
+              class: R(m.value),
+              style: Y(h(k)),
+              "aria-labelledby": h(f),
               role: "dialog",
               tabindex: "-1"
             }, [
-              T("span", {
+              x("span", {
                 ref_key: "arrowRef",
                 ref: u,
-                class: P(c.value),
-                style: W(h.value),
+                class: R(p.value),
+                style: Y(y.value),
                 "aria-hidden": "true"
               }, null, 6),
-              B(k.$slots, "default", {
-                open: p(w),
-                close: A
+              C(w.$slots, "default", {
+                open: h(V),
+                close: L
               })
             ], 14, nn)) : O("", !0)
           ]),
@@ -1673,10 +1742,25 @@ const nt = {
       ], 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 = {
   key: 0,
   class: "vf-radio__content"
-}, Rn = /* @__PURE__ */ L({
+}, Yn = /* @__PURE__ */ S({
   inheritAttrs: !1,
   __name: "VfRadio",
   props: {
@@ -1689,44 +1773,44 @@ const nt = {
   },
   emits: ["update:modelValue", "change"],
   setup(t, { emit: n }) {
-    const e = t, i = n, l = R(), r = s(() => e.modelValue === e.value), u = s(
-      () => F(
+    const e = t, i = n, a = N(), r = l(() => e.modelValue === e.value), u = l(
+      () => P(
         "vf-radio",
         `vf-radio--${e.size}`,
         r.value && "vf-radio--checked",
         e.invalid && "vf-radio--invalid",
         e.disabled && "vf-radio--disabled",
-        l.class
+        a.class
       )
-    ), v = s(() => l.style), y = s(
+    ), v = l(() => a.style), f = l(
       () => Object.fromEntries(
-        Object.entries(l).filter(([m]) => m !== "class" && m !== "style")
+        Object.entries(a).filter(([d]) => d !== "class" && d !== "style")
       )
     );
-    function g(m) {
-      m.target.checked && (i("update:modelValue", e.value), i("change", e.value));
+    function b(d) {
+      d.target.checked && (i("update:modelValue", e.value), i("change", e.value));
     }
-    return (m, C) => (d(), _("label", {
-      class: P(u.value),
-      style: W(v.value)
+    return (d, T) => (c(), _("label", {
+      class: R(u.value),
+      style: Y(v.value)
     }, [
-      T("input", H({
+      x("input", H({
         class: "vf-radio__input",
         type: "radio",
         checked: r.value,
         disabled: e.disabled,
         value: e.value,
         "aria-invalid": e.invalid || void 0
-      }, y.value, { onChange: g }), null, 16, an),
-      C[0] || (C[0] = T("span", {
+      }, f.value, { onChange: b }), null, 16, an),
+      T[0] || (T[0] = x("span", {
         class: "vf-radio__control",
         "aria-hidden": "true"
       }, [
-        T("span", { class: "vf-radio__dot" })
+        x("span", { class: "vf-radio__dot" })
       ], -1)),
-      t.label || m.$slots.default ? (d(), _("span", on, [
-        B(m.$slots, "default", {}, () => [
-          ae(N(t.label), 1)
+      t.label || d.$slots.default ? (c(), _("span", on, [
+        C(d.$slots, "default", {}, () => [
+          le(F(t.label), 1)
         ])
       ])) : O("", !0)
     ], 6));
@@ -1737,7 +1821,7 @@ const nt = {
 }, rn = { class: "vf-switch__thumb" }, un = {
   key: 0,
   class: "vf-switch__content"
-}, dn = /* @__PURE__ */ L({
+}, cn = /* @__PURE__ */ S({
   inheritAttrs: !1,
   __name: "VfSwitch",
   props: {
@@ -1748,49 +1832,135 @@ const nt = {
   },
   emits: ["update:modelValue", "change"],
   setup(t, { emit: n }) {
-    const e = t, i = n, l = R(), r = s(
-      () => F(
+    const e = t, i = n, a = N(), r = fe(), u = l(
+      () => P(
         "vf-switch",
         `vf-switch--${e.size}`,
         e.modelValue && "vf-switch--checked",
         e.disabled && "vf-switch--disabled",
-        l.class
+        a.class
       )
-    ), u = s(() => l.style), v = s(
+    ), v = l(() => a.style), f = l(() => {
+      var V;
+      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;
+      }
+      return T.some((A) => g(A));
+    }), b = l(
       () => Object.fromEntries(
-        Object.entries(l).filter(([g]) => g !== "class" && g !== "style")
+        Object.entries(a).filter(([T]) => T !== "class" && T !== "style")
       )
     );
-    function y(g) {
-      const m = g.target.checked;
-      i("update:modelValue", m), i("change", m);
+    function d(T) {
+      const g = T.target.checked;
+      i("update:modelValue", g), i("change", g);
     }
-    return (g, m) => (d(), _("label", {
-      class: P(r.value),
-      style: W(u.value)
+    return (T, g) => (c(), _("label", {
+      class: R(u.value),
+      style: Y(v.value)
     }, [
-      T("input", H({
+      x("input", H({
         class: "vf-switch__input",
         type: "checkbox",
         role: "switch",
         checked: e.modelValue,
         disabled: e.disabled
-      }, v.value, { onChange: y }), null, 16, ln),
-      T("span", sn, [
-        T("span", rn, [
-          B(g.$slots, "thumb", {
+      }, b.value, { onChange: d }), null, 16, ln),
+      x("span", sn, [
+        x("span", rn, [
+          C(T.$slots, "thumb", {
             checked: e.modelValue
           })
         ])
       ]),
-      t.label || g.$slots.default ? (d(), _("span", un, [
-        B(g.$slots, "default", {}, () => [
-          ae(N(t.label), 1)
+      f.value ? (c(), _("span", un, [
+        C(T.$slots, "default", {}, () => [
+          le(F(t.label), 1)
         ])
       ])) : O("", !0)
     ], 6));
   }
-}), Hn = /* @__PURE__ */ L({
+}), dn = ["aria-label"], fn = {
+  key: 0,
+  class: "vf-table-of-contents__title"
+}, vn = { class: "vf-table-of-contents__list" }, pn = ["href", "aria-current"], Xn = /* @__PURE__ */ S({
+  inheritAttrs: !1,
+  __name: "VfTableOfContents",
+  props: {
+    items: {},
+    activeId: { default: void 0 },
+    ariaLabel: { default: "Table of contents" },
+    label: { default: void 0 }
+  },
+  setup(t) {
+    const n = t, e = N(), i = l(
+      () => P("vf-table-of-contents", e.class)
+    ), a = l(() => e.style), r = l(
+      () => Object.fromEntries(
+        Object.entries(e).filter(([f]) => f !== "class" && f !== "style")
+      )
+    );
+    function u(f) {
+      return !f || f < 1 ? 1 : Math.min(f, 6);
+    }
+    function v(f) {
+      return f.href ?? `#${f.id}`;
+    }
+    return (f, b) => (c(), _("nav", H({
+      class: i.value,
+      style: a.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,
+          class: "vf-table-of-contents__item",
+          style: Y({ "--vf-toc-level": String(u(d.level)) })
+        }, [
+          x("a", {
+            href: v(d),
+            class: R([
+              "vf-table-of-contents__link",
+              n.activeId === d.id && "vf-table-of-contents__link--active"
+            ]),
+            "aria-current": n.activeId === d.id ? "location" : void 0
+          }, F(d.label), 11, pn)
+        ], 4))), 128))
+      ])
+    ], 16, dn));
+  }
+}), 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({
   inheritAttrs: !1,
   __name: "VfThemeSwitch",
   props: {
@@ -1799,54 +1969,54 @@ const nt = {
     label: { default: void 0 }
   },
   setup(t) {
-    const n = t, e = R(), { resolvedTheme: i, setTheme: l } = Qe(), r = s({
-      get: () => i.value === "dark",
-      set: (u) => {
-        l(u ? "dark" : "light");
+    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");
       }
     });
-    return (u, v) => (d(), q(dn, H(p(e), {
-      modelValue: r.value,
-      "onUpdate:modelValue": v[0] || (v[0] = (y) => r.value = y),
+    return (f, b) => (c(), j(cn, H(h(e), {
+      modelValue: v.value,
+      "onUpdate:modelValue": b[0] || (b[0] = (d) => v.value = d),
       size: n.size,
       disabled: n.disabled,
       label: n.label
     }), {
-      thumb: G(({ checked: y }) => [
-        B(u.$slots, "thumb", { checked: y }, () => [
-          j(p(Z), {
-            icon: y ? p(U).moon : p(U).sun,
+      thumb: U(({ checked: d }) => [
+        C(f.$slots, "thumb", { checked: d }, () => [
+          q(h(ee), {
+            icon: d ? h(W).moon : h(W).sun,
             size: "0.5rem"
           }, null, 8, ["icon"])
         ])
       ]),
-      default: G(() => [
-        u.$slots.default || n.label ? B(u.$slots, "default", { key: 0 }, () => [
-          ae(N(n.label), 1)
+      default: U(() => [
+        u.value ? C(f.$slots, "default", { key: 0 }, () => [
+          le(F(n.label), 1)
         ]) : O("", !0)
       ]),
       _: 3
     }, 16, ["modelValue", "size", "disabled", "label"]));
   }
-}), Kn = /* @__PURE__ */ L({
+}), Jn = /* @__PURE__ */ S({
   inheritAttrs: !1,
   __name: "VfTag",
   props: {
     tone: { default: "neutral" }
   },
   setup(t) {
-    const n = t, e = R(), i = s(
-      () => F("vf-tag", n.tone !== "neutral" && `vf-tag--${n.tone}`)
+    const n = t, e = N(), i = l(
+      () => P("vf-tag", n.tone !== "neutral" && `vf-tag--${n.tone}`)
     );
-    return (l, r) => (d(), _("span", H({ class: i.value }, p(e)), [
-      B(l.$slots, "default")
+    return (a, r) => (c(), _("span", H({ class: i.value }, h(e)), [
+      C(a.$slots, "default")
     ], 16));
   }
-}), cn = { class: "vf-tabs" }, fn = {
+}), mn = { class: "vf-tabs" }, hn = {
   class: "vf-tabs__list",
   role: "tablist",
   "aria-orientation": "horizontal"
-}, vn = ["id", "aria-controls", "aria-selected", "disabled", "tabindex", "onClick", "onKeydown"], pn = ["id", "aria-labelledby"], jn = /* @__PURE__ */ L({
+}, _n = ["id", "aria-controls", "aria-selected", "disabled", "tabindex", "onClick", "onKeydown"], yn = ["id", "aria-labelledby"], Zn = /* @__PURE__ */ S({
   __name: "VfTabs",
   props: {
     items: {},
@@ -1855,106 +2025,106 @@ const nt = {
   },
   emits: ["update:modelValue", "change"],
   setup(t, { emit: n }) {
-    const e = t, i = n, l = Q({ prefix: "vf-tabs" }), r = D([]), u = s(
+    const e = t, i = n, a = Q({ prefix: "vf-tabs" }), r = I([]), u = l(
       () => {
-        var $;
-        return ($ = e.items.find((f) => !f.disabled)) == null ? void 0 : $.value;
+        var k;
+        return (k = e.items.find((m) => !m.disabled)) == null ? void 0 : k.value;
       }
-    ), v = D(e.defaultValue ?? u.value), y = s(() => e.modelValue !== void 0), g = s(
+    ), v = I(e.defaultValue ?? u.value), f = l(() => e.modelValue !== void 0), b = l(
       () => e.modelValue ?? v.value ?? u.value
     );
-    ee(
+    J(
       () => e.items,
-      ($) => {
-        !$.some(
-          (a) => a.value === g.value && !a.disabled
-        ) && u.value && m(u.value);
+      (k) => {
+        !k.some(
+          (o) => o.value === b.value && !o.disabled
+        ) && u.value && d(u.value);
       },
       { deep: !0 }
     );
-    function m($) {
-      y.value || (v.value = $), i("update:modelValue", $), i("change", $);
+    function d(k) {
+      f.value || (v.value = k), i("update:modelValue", k), i("change", k);
     }
-    function C($) {
-      $.disabled || m($.value);
+    function T(k) {
+      k.disabled || d(k.value);
     }
-    function x() {
-      return e.items.filter(($) => !$.disabled);
+    function g() {
+      return e.items.filter((k) => !k.disabled);
     }
-    function w($) {
-      var a;
-      const f = e.items.findIndex((h) => h.value === $);
-      (a = r.value[f]) == null || a.focus();
+    function V(k) {
+      var o;
+      const m = e.items.findIndex((y) => y.value === k);
+      (o = r.value[m]) == null || o.focus();
     }
-    function S($, f) {
-      const a = x(), h = a.findIndex(
-        (c) => c.value === f.value
+    function A(k, m) {
+      const o = g(), y = o.findIndex(
+        (p) => p.value === m.value
       );
-      if (h !== -1) {
-        if ($.key === "ArrowRight" || $.key === "ArrowDown") {
-          $.preventDefault();
-          const c = a[(h + 1) % a.length];
-          C(c), w(c.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);
           return;
         }
-        if ($.key === "ArrowLeft" || $.key === "ArrowUp") {
-          $.preventDefault();
-          const c = a[(h - 1 + a.length) % a.length];
-          C(c), w(c.value);
+        if (k.key === "ArrowLeft" || k.key === "ArrowUp") {
+          k.preventDefault();
+          const p = o[(y - 1 + o.length) % o.length];
+          T(p), V(p.value);
           return;
         }
-        if ($.key === "Home") {
-          $.preventDefault();
-          const c = a[0];
-          C(c), w(c.value);
+        if (k.key === "Home") {
+          k.preventDefault();
+          const p = o[0];
+          T(p), V(p.value);
           return;
         }
-        if ($.key === "End") {
-          $.preventDefault();
-          const c = a[a.length - 1];
-          C(c), w(c.value);
+        if (k.key === "End") {
+          k.preventDefault();
+          const p = o[o.length - 1];
+          T(p), V(p.value);
         }
       }
     }
-    function I($) {
-      return `${l.value}-tab-${$}`;
+    function D(k) {
+      return `${a.value}-tab-${k}`;
     }
-    function z($) {
-      return `${l.value}-panel-${$}`;
+    function z(k) {
+      return `${a.value}-panel-${k}`;
     }
-    return ($, f) => (d(), _("div", cn, [
-      T("div", fn, [
-        (d(!0), _(ue, null, de(t.items, (a, h) => (d(), _("button", {
-          id: I(a.value),
-          key: a.value,
+    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,
           ref_for: !0,
-          ref: (c) => {
-            r.value[h] = c;
+          ref: (p) => {
+            r.value[y] = p;
           },
-          "aria-controls": z(a.value),
-          "aria-selected": g.value === a.value,
-          disabled: a.disabled,
-          tabindex: g.value === a.value ? 0 : -1,
+          "aria-controls": z(o.value),
+          "aria-selected": b.value === o.value,
+          disabled: o.disabled,
+          tabindex: b.value === o.value ? 0 : -1,
           class: "vf-tabs__tab",
           role: "tab",
           type: "button",
-          onClick: (c) => C(a),
-          onKeydown: (c) => S(c, a)
-        }, N(a.label), 41, vn))), 128))
+          onClick: (p) => T(o),
+          onKeydown: (p) => A(p, o)
+        }, F(o.label), 41, _n))), 128))
       ]),
-      g.value ? (d(), _("div", {
+      b.value ? (c(), _("div", {
         key: 0,
-        id: z(g.value),
-        "aria-labelledby": I(g.value),
+        id: z(b.value),
+        "aria-labelledby": D(b.value),
         class: "vf-tabs__panel",
         role: "tabpanel",
         tabindex: "0"
       }, [
-        B($.$slots, "panel", Ve(Ce({ activeValue: g.value })))
-      ], 8, pn)) : O("", !0)
+        C(k.$slots, "panel", Ve(xe({ activeValue: b.value })))
+      ], 8, yn)) : O("", !0)
     ]));
   }
-}), mn = ["value", "aria-invalid"], qn = /* @__PURE__ */ L({
+}), bn = ["value", "aria-invalid"], ea = /* @__PURE__ */ S({
   inheritAttrs: !1,
   __name: "VfTextarea",
   props: {
@@ -1964,8 +2134,8 @@ const nt = {
   },
   emits: ["update:modelValue"],
   setup(t, { emit: n }) {
-    const e = t, i = n, l = R(), r = s(
-      () => F(
+    const e = t, i = n, a = N(), r = l(
+      () => P(
         "vf-textarea",
         e.size !== "md" && `vf-textarea--${e.size}`,
         e.invalid && "vf-textarea--invalid"
@@ -1974,13 +2144,13 @@ const nt = {
     function u(v) {
       i("update:modelValue", v.target.value);
     }
-    return (v, y) => (d(), _("textarea", H({
+    return (v, f) => (c(), _("textarea", H({
       class: r.value,
       value: e.modelValue,
       "aria-invalid": e.invalid || void 0
-    }, p(l), { onInput: u }), null, 16, mn));
+    }, h(a), { onInput: u }), null, 16, bn));
   }
-}), hn = ["aria-describedby"], yn = ["id"], Un = /* @__PURE__ */ L({
+}), gn = ["aria-describedby"], $n = ["id"], ta = /* @__PURE__ */ S({
   __name: "VfTooltip",
   props: {
     text: { default: void 0 },
@@ -1990,100 +2160,100 @@ const nt = {
     disableTeleport: { type: Boolean, default: !1 }
   },
   setup(t) {
-    const n = t, e = D(!1), i = Q({ prefix: "vf-tooltip" }), l = D(null), r = D(null), u = D(null), v = D(null), y = {
-      enter: Y.fast,
-      leave: Y.fast
-    }, g = s(
+    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(
       () => n.disableTeleport || n.teleportTo === !1 || n.teleportTo === null
-    ), m = s(() => typeof n.teleportTo == "string" || typeof HTMLElement < "u" && n.teleportTo instanceof HTMLElement ? n.teleportTo : "body"), {
-      placement: C,
-      middlewareData: x,
-      styles: w,
-      cleanup: S
+    ), 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, {
       enabled: e,
-      placement: s(() => n.placement),
-      middleware: s(
+      placement: l(() => n.placement),
+      middleware: l(
         () => [
-          ve(10),
-          pe({ placements: ["top", "bottom"] }),
-          me(),
-          v.value ? he(v.value) : void 0
-        ].filter((o) => o !== void 0)
+          pe(10),
+          me({ placements: ["top", "bottom"] }),
+          he(),
+          v.value ? _e(v.value) : void 0
+        ].filter((s) => s !== void 0)
       ),
       strategy: "fixed"
-    }), I = s(() => [
+    }), D = l(() => [
       "vf-tooltip__content",
-      C.value.startsWith("bottom") && "vf-tooltip__content--bottom",
-      C.value.startsWith("top") && "vf-tooltip__content--top"
-    ]), z = s(() => {
-      const o = x.value.arrow;
+      T.value.startsWith("bottom") && "vf-tooltip__content--bottom",
+      T.value.startsWith("top") && "vf-tooltip__content--top"
+    ]), z = l(() => {
+      const s = g.value.arrow;
       return {
-        x: (o == null ? void 0 : o.x) !== void 0 && (o == null ? void 0 : o.baseX) !== void 0 ? o.x - o.baseX : 0,
-        y: (o == null ? void 0 : o.y) !== void 0 && (o == null ? void 0 : o.baseY) !== void 0 ? o.y - o.baseY : 0
+        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
       };
-    }), $ = s(() => ["vf-tooltip__arrow"]), f = s(() => ({
+    }), k = l(() => ["vf-tooltip__arrow"]), m = l(() => ({
       left: `${z.value.x}px`,
       top: `${z.value.y}px`
     }));
-    function a() {
-      l.value !== null && (window.clearTimeout(l.value), l.value = null);
+    function o() {
+      a.value !== null && (window.clearTimeout(a.value), a.value = null);
     }
-    function h() {
-      a(), l.value = window.setTimeout(() => {
+    function y() {
+      o(), a.value = window.setTimeout(() => {
         e.value = !0;
       }, n.openDelay);
     }
-    function c() {
-      a(), e.value = !1;
+    function p() {
+      o(), e.value = !1;
     }
     return te(() => {
-      a(), S();
-    }), (o, E) => (d(), _("span", {
+      o(), A();
+    }), (s, E) => (c(), _("span", {
       class: "vf-tooltip",
-      onMouseenter: h,
-      onMouseleave: c,
-      onFocusin: h,
-      onFocusout: c
+      onMouseenter: y,
+      onMouseleave: p,
+      onFocusin: y,
+      onFocusout: p
     }, [
-      T("span", {
+      x("span", {
         ref_key: "triggerRef",
         ref: r,
         class: "vf-tooltip__trigger",
-        "aria-describedby": e.value ? p(i) : void 0
+        "aria-describedby": e.value ? h(i) : void 0
       }, [
-        B(o.$slots, "default")
-      ], 8, hn),
-      (d(), q(le, {
-        to: m.value,
-        disabled: g.value
+        C(s.$slots, "default")
+      ], 8, gn),
+      (c(), j(ue, {
+        to: d.value,
+        disabled: b.value
       }, [
-        j(ne, {
+        q(oe, {
           name: "vf-floating-transition",
           appear: "",
-          duration: y
+          duration: f
         }, {
-          default: G(() => [
-            e.value && (t.text || o.$slots.content) ? (d(), _("span", {
+          default: U(() => [
+            e.value && (t.text || s.$slots.content) ? (c(), _("span", {
               key: 0,
-              id: p(i),
+              id: h(i),
               ref_key: "contentRef",
               ref: u,
-              class: P(I.value),
-              style: W(p(w)),
+              class: R(D.value),
+              style: Y(h(V)),
               role: "tooltip"
             }, [
-              B(o.$slots, "content", {}, () => [
-                ae(N(t.text), 1)
+              C(s.$slots, "content", {}, () => [
+                le(F(t.text), 1)
               ]),
-              T("span", {
+              x("span", {
                 ref_key: "arrowRef",
                 ref: v,
-                class: P($.value),
-                style: W(f.value),
+                class: R(k.value),
+                style: Y(m.value),
                 "aria-hidden": "true"
               }, null, 6)
-            ], 14, yn)) : O("", !0)
+            ], 14, $n)) : O("", !0)
           ]),
           _: 3
         })
@@ -2092,47 +2262,52 @@ const nt = {
   }
 });
 export {
-  Cn as VfAccordion,
-  xn as VfAlert,
-  Bn as VfBadge,
-  En as VfButton,
-  On as VfCard,
-  An as VfCheckbox,
-  In as VfDialog,
-  Ln as VfDivider,
-  Dn as VfDrawer,
-  Sn as VfDropdown,
-  De as VfIconButton,
-  zn as VfInput,
-  Mn as VfLink,
-  Pn as VfNavMenu,
-  Nn as VfPanel,
-  Fn as VfPopover,
-  Rn as VfRadio,
-  dn as VfSwitch,
-  jn as VfTabs,
-  Kn as VfTag,
-  qn as VfTextarea,
-  Vn as VfThemeProvider,
-  Hn as VfThemeSwitch,
-  Un as VfTooltip,
-  Tn as VueForgeCore,
-  Xn as createThemePreset,
+  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,
-  Tn as default,
-  Fe as defaultThemePreset,
-  Qn as toMaxWidthQuery,
-  Jn as toMinWidthQuery,
-  Zn as useBreakpoint,
-  ea as useBreakpointValue,
-  ta as useBreakpoints,
+  Bn as default,
+  la as defaultThemePreset,
+  ia as toMaxWidthQuery,
+  ra as toMinWidthQuery,
+  ua as useBreakpoint,
+  ca as useBreakpointValue,
+  da as useBreakpoints,
   Oe as useClickOutside,
-  se as useDisclosure,
-  fe as useEscapeKey,
+  ce as useDisclosure,
+  ve as useEscapeKey,
   ye as useFloating,
   Ae as useFocusTrap,
   Q as useId,
-  xe as useScrollLock,
+  Ce as useScrollLock,
+  On as useTableOfContents,
   Qe as useTheme,
-  na as vfBreakpoints
+  fa as vfBreakpoints
 };