@codemonster-ru/vueforge-core 1.8.0 → 1.9.0

package/dist/vueforge-core.js

@@ -1,6 +1,6 @@
-import { r as ze, a as Pe } from "./utils-BJVEoCfQ.js";
-import { c as za, d as Pa } from "./utils-BJVEoCfQ.js";
-import { defineComponent as M, inject as xe, computed as a, ref as A, watch as ne, onMounted as me, onBeforeUnmount as se, provide as Re, renderSlot as O, toValue as X, nextTick as le, onUnmounted as Fe, openBlock as c, createElementBlock as _, createElementVNode as V, unref as y, toDisplayString as F, normalizeClass as P, createVNode as H, Transition as ce, withCtx as G, createCommentVNode as E, useAttrs as j, mergeProps as N, createTextVNode as ve, Fragment as re, renderList as ue, createBlock as q, resolveDynamicComponent as fe, normalizeStyle as U, useSlots as ye, Teleport as he, normalizeProps as Be, guardReactiveProps as Ie, resolveComponent as Ee, Comment as He, Text as Ne } from "vue";
+import { r as ze, a as Pe } from "./utils-CsZ7hQHm.js";
+import { c as za, d as Pa } from "./utils-CsZ7hQHm.js";
+import { defineComponent as M, inject as xe, computed as a, ref as A, watch as ne, onMounted as me, onBeforeUnmount as se, provide as Re, renderSlot as O, toValue as X, nextTick as le, onUnmounted as Fe, openBlock as d, createElementBlock as _, createElementVNode as V, unref as y, toDisplayString as F, normalizeClass as P, createVNode as H, Transition as de, withCtx as G, createCommentVNode as E, useAttrs as j, mergeProps as N, createTextVNode as ve, Fragment as re, renderList as ue, createBlock as q, resolveDynamicComponent as fe, normalizeStyle as U, useSlots as ye, Teleport as he, normalizeProps as Be, guardReactiveProps as Ie, resolveComponent as Ee, Comment as He, Text as Ne } from "vue";
 import { DEFAULT_STORAGE_KEY as Ke, DEFAULT_ATTRIBUTE as je, resolveTheme as qe, isThemeMode as We, vfMotionDurationsMs as Z } from "@codemonster-ru/vueforge-theme";
 import { d as Ae } from "./useScrollLock-FYdn9vRp.js";
 import { t as Fa, a as Ha, u as Na, b as Ka, c as ja, v as qa } from "./useScrollLock-FYdn9vRp.js";
@@ -46,7 +46,7 @@ const sa = Ye(), Le = Symbol("VfThemeContext"), ia = /* @__PURE__ */ M({
     function g() {
       return typeof window > "u" ? "light" : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
     }
-    const v = A(r()), T = A(g()), p = A(null), d = a(
+    const v = A(r()), T = A(g()), p = A(null), c = a(
       () => qe(v.value, T.value)
     ), m = A(!1);
     let h = null;
@@ -73,13 +73,13 @@ const sa = Ye(), Le = Symbol("VfThemeContext"), ia = /* @__PURE__ */ M({
       v.value = u;
     }
     function I() {
-      const u = d.value === "dark" ? "light" : "dark";
+      const u = c.value === "dark" ? "light" : "dark";
       v.value = u;
     }
     return ne(v, (u) => {
       typeof window > "u" || window.localStorage.setItem(o.value, u);
     }), ne(
-      d,
+      c,
       (u) => {
         L(u, { animate: m.value });
       },
@@ -91,7 +91,7 @@ const sa = Ye(), Le = Symbol("VfThemeContext"), ia = /* @__PURE__ */ M({
       (u = p.value) == null || u.removeEventListener("change", D), x();
     }), Re(Le, {
       mode: v,
-      resolvedTheme: d,
+      resolvedTheme: c,
       setTheme: R,
       toggleTheme: I
     }), (u, w) => O(u.$slots, "default");
@@ -168,7 +168,7 @@ function Te(t, n, e = {}) {
     );
     l.value = m.x, o.value = m.y, i.value = m.placement, r.value = m.middlewareData ?? {};
   }
-  function d() {
+  function c() {
     var m;
     (m = g.value) == null || m.call(g), g.value = null;
   }
@@ -177,13 +177,13 @@ function Te(t, n, e = {}) {
     async ([m]) => {
       v += 1;
       const h = v;
-      d(), !(!m || !t.value || !n.value) && (await le(), !(h !== v || X(e.enabled) === !1 || !t.value || !n.value) && (await p(), !(h !== v || X(e.enabled) === !1 || !t.value || !n.value) && (g.value = Ue(t.value, () => {
+      c(), !(!m || !t.value || !n.value) && (await le(), !(h !== v || X(e.enabled) === !1 || !t.value || !n.value) && (await p(), !(h !== v || X(e.enabled) === !1 || !t.value || !n.value) && (g.value = Ue(t.value, () => {
         p();
       }))));
     },
     { immediate: !0 }
   ), se(() => {
-    d();
+    c();
   }), {
     x: l,
     y: o,
@@ -191,7 +191,7 @@ function Te(t, n, e = {}) {
     middlewareData: r,
     styles: T,
     update: p,
-    cleanup: d
+    cleanup: c
   };
 }
 const Ge = [
@@ -251,7 +251,7 @@ function ra(t) {
     return !!X(t.disabled);
   }
   function i() {
-    var d;
+    var c;
     if (typeof window > "u" || typeof document > "u")
       return;
     if (o()) {
@@ -268,7 +268,7 @@ function ra(t) {
       n.value = void 0;
       return;
     }
-    let p = (d = T[0]) == null ? void 0 : d.id;
+    let p = (c = T[0]) == null ? void 0 : c.id;
     for (const m of T) {
       if (m.element.getBoundingClientRect().top - v <= 0) {
         p = m.id;
@@ -339,7 +339,7 @@ const et = { class: "vf-accordion" }, tt = ["id", "aria-controls", "aria-expande
     function p() {
       e.disabled || r.toggle();
     }
-    function d(I) {
+    function c(I) {
       (I.key === "Enter" || I.key === " ") && (I.preventDefault(), p());
     }
     function m(I) {
@@ -368,7 +368,7 @@ const et = { class: "vf-accordion" }, tt = ["id", "aria-controls", "aria-expande
       const u = I;
       u.style.height = "", u.style.opacity = "", u.style.overflow = "", u.style.transition = "";
     }
-    return (I, u) => (c(), _("section", et, [
+    return (I, u) => (d(), _("section", et, [
       V("button", {
         id: y(o),
         "aria-controls": y(i),
@@ -377,7 +377,7 @@ const et = { class: "vf-accordion" }, tt = ["id", "aria-controls", "aria-expande
         class: "vf-accordion__trigger",
         type: "button",
         onClick: p,
-        onKeydown: d
+        onKeydown: c
       }, [
         O(I.$slots, "trigger", { open: y(g) }, () => [
           V("span", null, F(t.title), 1)
@@ -392,7 +392,7 @@ const et = { class: "vf-accordion" }, tt = ["id", "aria-controls", "aria-expande
           }, null, 8, ["icon"])
         ], 2)
       ], 40, tt),
-      H(ce, {
+      H(de, {
         css: !1,
         onBeforeEnter: m,
         onEnter: h,
@@ -402,7 +402,7 @@ const et = { class: "vf-accordion" }, tt = ["id", "aria-controls", "aria-expande
         onAfterLeave: R
       }, {
         default: G(() => [
-          y(g) ? (c(), _("div", {
+          y(g) ? (d(), _("div", {
             key: 0,
             id: y(i),
             "aria-labelledby": y(o),
@@ -428,7 +428,7 @@ const ot = {
 }, lt = { class: "vf-alert__content" }, st = {
   key: 0,
   class: "vf-alert__title"
-}, it = { class: "vf-alert__body" }, ca = /* @__PURE__ */ M({
+}, it = { class: "vf-alert__body" }, da = /* @__PURE__ */ M({
   inheritAttrs: !1,
   __name: "VfAlert",
   props: {
@@ -439,7 +439,7 @@ const ot = {
     const n = t, e = j(), l = a(
       () => K("vf-alert", n.tone !== "primary" && `vf-alert--${n.tone}`)
     ), o = a(() => n.tone === "success" ? W.checkCircle : n.tone === "info" ? W.info : n.tone === "warn" ? W.warning : n.tone === "help" ? W.questionCircle : n.tone === "danger" ? W.warning : n.tone === "contrast" ? W.info : W.info);
-    return (i, r) => (c(), _("section", N({
+    return (i, r) => (d(), _("section", N({
       class: l.value,
       role: "alert"
     }, y(e)), [
@@ -450,7 +450,7 @@ const ot = {
         }, null, 8, ["icon"])
       ]),
       V("div", lt, [
-        n.title || i.$slots.title ? (c(), _("p", st, [
+        n.title || i.$slots.title ? (d(), _("p", st, [
           O(i.$slots, "title", {}, () => [
             ve(F(n.title), 1)
           ])
@@ -461,7 +461,7 @@ const ot = {
       ])
     ], 16));
   }
-}), da = /* @__PURE__ */ M({
+}), ca = /* @__PURE__ */ M({
   inheritAttrs: !1,
   __name: "VfBadge",
   props: {
@@ -471,11 +471,11 @@ const ot = {
     const n = t, e = j(), l = a(
       () => K("vf-badge", n.tone !== "neutral" && `vf-badge--${n.tone}`)
     );
-    return (o, i) => (c(), _("span", N({ class: l.value }, y(e)), [
+    return (o, i) => (d(), _("span", N({ class: l.value }, y(e)), [
       O(o.$slots, "default")
     ], 16));
   }
-}), rt = ["aria-label"], ut = { class: "vf-breadcrumbs__list" }, ct = ["aria-current"], dt = {
+}), rt = ["aria-label"], ut = { class: "vf-breadcrumbs__list" }, dt = ["aria-current"], ct = {
   key: 2,
   class: "vf-breadcrumbs__separator",
   "aria-hidden": "true"
@@ -491,43 +491,43 @@ const ot = {
     const n = t, e = j(), l = a(
       () => K("vf-breadcrumbs", e.class)
     ), o = a(
-      () => Object.fromEntries(Object.entries(e).filter(([d]) => d !== "class"))
+      () => Object.fromEntries(Object.entries(e).filter(([c]) => c !== "class"))
     ), i = a(
-      () => n.items.some((d) => d.current)
+      () => n.items.some((c) => c.current)
     );
-    function r(d, m) {
-      return d.current || !i.value && m === n.items.length - 1;
+    function r(c, m) {
+      return c.current || !i.value && m === n.items.length - 1;
     }
-    function g(d, m) {
-      return !d.disabled && !r(d, m) && (d.href || d.to);
+    function g(c, m) {
+      return !c.disabled && !r(c, m) && (c.href || c.to);
     }
-    function v(d) {
-      return d.rel ? d.rel : d.target === "_blank" ? "noopener noreferrer" : void 0;
+    function v(c) {
+      return c.rel ? c.rel : c.target === "_blank" ? "noopener noreferrer" : void 0;
     }
-    function T(d) {
-      return d.to !== void 0 ? n.component ?? fe("RouterLink") : "a";
+    function T(c) {
+      return c.to !== void 0 ? n.component ?? fe("RouterLink") : "a";
     }
-    function p(d) {
-      return d.to !== void 0 ? {
-        to: d.to,
-        target: d.target,
-        rel: v(d)
+    function p(c) {
+      return c.to !== void 0 ? {
+        to: c.to,
+        target: c.target,
+        rel: v(c)
       } : {
-        href: d.href,
-        target: d.target,
-        rel: v(d)
+        href: c.href,
+        target: c.target,
+        rel: v(c)
       };
     }
-    return (d, m) => (c(), _("nav", N({
+    return (c, m) => (d(), _("nav", N({
       class: l.value,
       "aria-label": n.ariaLabel
     }, o.value), [
       V("ol", ut, [
-        (c(!0), _(re, null, ue(n.items, (h, x) => (c(), _("li", {
+        (d(!0), _(re, null, ue(n.items, (h, x) => (d(), _("li", {
           key: `${h.label}-${x}`,
           class: "vf-breadcrumbs__item"
         }, [
-          g(h, x) ? (c(), q(fe(T(h)), N({
+          g(h, x) ? (d(), q(fe(T(h)), N({
             key: 0,
             ref_for: !0
           }, p(h), { class: "vf-breadcrumbs__link" }), {
@@ -535,12 +535,12 @@ const ot = {
               ve(F(h.label), 1)
             ]),
             _: 2
-          }, 1040)) : (c(), _("span", {
+          }, 1040)) : (d(), _("span", {
             key: 1,
             class: P(["vf-breadcrumbs__current", h.disabled && "vf-breadcrumbs__current--disabled"]),
             "aria-current": r(h, x) ? "page" : void 0
-          }, F(h.label), 11, ct)),
-          x < n.items.length - 1 ? (c(), _("span", dt, [
+          }, F(h.label), 11, dt)),
+          x < n.items.length - 1 ? (d(), _("span", ct, [
             H(y(J), {
               icon: y(W).chevronRight,
               size: "0.875rem"
@@ -568,7 +568,7 @@ const ot = {
         n.block && "vf-button--block"
       )
     );
-    return (o, i) => (c(), _("button", N({
+    return (o, i) => (d(), _("button", N({
       class: l.value,
       type: n.type
     }, y(e)), [
@@ -589,16 +589,16 @@ const ot = {
     const n = t, e = j(), l = a(
       () => K("vf-card", n.compact && "vf-card--compact")
     );
-    return (o, i) => (c(), _("section", N({ class: l.value }, y(e)), [
-      n.title || o.$slots.header ? (c(), _("header", vt, [
+    return (o, i) => (d(), _("section", N({ class: l.value }, y(e)), [
+      n.title || o.$slots.header ? (d(), _("header", vt, [
         O(o.$slots, "header", {}, () => [
           V("h3", mt, F(n.title), 1)
         ])
       ])) : E("", !0),
-      o.$slots.default ? (c(), _("div", pt, [
+      o.$slots.default ? (d(), _("div", pt, [
         O(o.$slots, "default")
       ])) : E("", !0),
-      o.$slots.footer ? (c(), _("footer", ht, [
+      o.$slots.footer ? (d(), _("footer", ht, [
         O(o.$slots, "footer")
       ])) : E("", !0)
     ], 16));
@@ -636,7 +636,7 @@ const ot = {
       const p = T.target.checked;
       l("update:modelValue", p), l("change", p);
     }
-    return (T, p) => (c(), _("label", {
+    return (T, p) => (d(), _("label", {
       class: P(i.value),
       style: U(r.value)
     }, [
@@ -653,7 +653,7 @@ const ot = {
       }, [
         V("span", { class: "vf-checkbox__mark" })
       ], -1)),
-      t.label || T.$slots.default ? (c(), _("span", _t, [
+      t.label || T.$slots.default ? (d(), _("span", _t, [
         O(T.$slots, "default", {}, () => [
           ve(F(t.label), 1)
         ])
@@ -677,7 +677,7 @@ const ot = {
         n.size !== "md" && `vf-icon-button--${n.size}`
       )
     ), o = a(() => n.size === "sm" ? "0.875rem" : n.size === "lg" ? "1.125rem" : "1rem");
-    return (i, r) => (c(), _("button", N({
+    return (i, r) => (d(), _("button", N({
       class: l.value,
       type: n.type
     }, y(e)), [
@@ -724,7 +724,7 @@ const ot = {
       onOpenChange: ($) => {
         l("update:open", $), l("openChange", $);
       }
-    }), p = T.isOpen, d = {
+    }), p = T.isOpen, c = {
       enter: Z.normal,
       leave: Z.normal
     };
@@ -803,17 +803,17 @@ const ot = {
     ), se(() => {
       var $;
       p.value && (($ = r.value) == null || $.focus());
-    }), ($, C) => (c(), q(he, {
+    }), ($, C) => (d(), q(he, {
       to: u.value,
       disabled: R.value
     }, [
-      H(ce, {
+      H(de, {
         name: "vf-drawer-transition",
         appear: "",
-        duration: d
+        duration: c
       }, {
         default: G(() => [
-          y(p) ? (c(), _("div", N({
+          y(p) ? (d(), _("div", N({
             key: 0,
             class: [x.value, y(o).class],
             style: L.value
@@ -832,10 +832,10 @@ const ot = {
               role: "dialog",
               tabindex: "-1"
             }, [
-              t.title || $.$slots.header ? (c(), _("header", wt, [
+              t.title || $.$slots.header ? (d(), _("header", wt, [
                 V("div", null, [
                   O($.$slots, "header", {}, () => [
-                    t.title ? (c(), _("h2", {
+                    t.title ? (d(), _("h2", {
                       key: 0,
                       id: y(v),
                       class: "vf-drawer__title"
@@ -844,7 +844,7 @@ const ot = {
                 ]),
                 V("div", $t, [
                   O($.$slots, "actions", { close: k }),
-                  e.closable ? (c(), q(Se, {
+                  e.closable ? (d(), q(Se, {
                     key: 0,
                     icon: y(W).xmark,
                     "aria-label": "Close drawer",
@@ -854,10 +854,10 @@ const ot = {
                   }, null, 8, ["icon"])) : E("", !0)
                 ])
               ])) : E("", !0),
-              $.$slots.default ? (c(), _("div", Tt, [
+              $.$slots.default ? (d(), _("div", Tt, [
                 O($.$slots, "default", { close: k })
               ])) : E("", !0),
-              $.$slots.footer ? (c(), _("footer", Vt, [
+              $.$slots.footer ? (d(), _("footer", Vt, [
                 O($.$slots, "footer", { close: k })
               ])) : E("", !0)
             ], 10, gt)
@@ -901,7 +901,7 @@ const ot = {
       onOpenChange: (s) => {
         l("update:open", s), l("openChange", s);
       }
-    }), p = T.isOpen, d = {
+    }), p = T.isOpen, c = {
       enter: Z.fast,
       leave: Z.fast
     }, m = a(
@@ -960,17 +960,17 @@ const ot = {
     ), se(() => {
       var s;
       p.value && ((s = i.value) == null || s.focus());
-    }), (s, k) => (c(), q(he, {
+    }), (s, k) => (d(), q(he, {
       to: h.value,
       disabled: m.value
     }, [
-      H(ce, {
+      H(de, {
         name: "vf-dialog-transition",
         appear: "",
-        duration: d
+        duration: c
       }, {
         default: G(() => [
-          y(p) ? (c(), _("div", Ct, [
+          y(p) ? (d(), _("div", Ct, [
             V("div", {
               class: "vf-dialog__overlay",
               "aria-hidden": "true",
@@ -986,17 +986,17 @@ const ot = {
               role: "dialog",
               tabindex: "-1"
             }, [
-              t.title || t.description || s.$slots.header || s.$slots.description ? (c(), _("header", Bt, [
+              t.title || t.description || s.$slots.header || s.$slots.description ? (d(), _("header", Bt, [
                 V("div", null, [
                   O(s.$slots, "header", {}, () => [
-                    t.title ? (c(), _("h2", {
+                    t.title ? (d(), _("h2", {
                       key: 0,
                       id: y(g),
                       class: "vf-dialog__title"
                     }, F(t.title), 9, It)) : E("", !0)
                   ]),
                   O(s.$slots, "description", {}, () => [
-                    t.description ? (c(), _("p", {
+                    t.description ? (d(), _("p", {
                       key: 0,
                       id: y(v),
                       class: "vf-dialog__description"
@@ -1005,7 +1005,7 @@ const ot = {
                 ]),
                 V("div", At, [
                   O(s.$slots, "actions", { close: u }),
-                  e.closable ? (c(), q(Se, {
+                  e.closable ? (d(), q(Se, {
                     key: 0,
                     icon: y(W).xmark,
                     "aria-label": "Close dialog",
@@ -1015,10 +1015,10 @@ const ot = {
                   }, null, 8, ["icon"])) : E("", !0)
                 ])
               ])) : E("", !0),
-              s.$slots.default ? (c(), _("div", Ot, [
+              s.$slots.default ? (d(), _("div", Ot, [
                 O(s.$slots, "default", { close: u })
               ])) : E("", !0),
-              s.$slots.footer ? (c(), _("footer", Lt, [
+              s.$slots.footer ? (d(), _("footer", Lt, [
                 O(s.$slots, "footer", { close: u })
               ])) : E("", !0)
             ], 10, xt)
@@ -1038,7 +1038,7 @@ const ot = {
     const n = t, e = j(), l = a(() => n.orientation === "vertical"), o = a(
       () => K("vf-divider", `vf-divider--${n.orientation}`)
     );
-    return (i, r) => (c(), _("div", N({
+    return (i, r) => (d(), _("div", N({
       class: o.value,
       "aria-orientation": n.orientation,
       role: l.value ? "separator" : void 0
@@ -1052,7 +1052,8 @@ const ot = {
     placement: { default: "bottom-start" },
     teleportTo: { type: [String, null, Boolean], default: void 0 },
     disableTeleport: { type: Boolean, default: !1 },
-    closeOnSelect: { type: Boolean, default: !0 }
+    closeOnSelect: { type: Boolean, default: !0 },
+    variant: { default: "default" }
   },
   emits: ["update:open", "openChange"],
   setup(t, { emit: n }) {
@@ -1061,7 +1062,7 @@ const ot = {
       leave: Z.fast
     }, p = a(
       () => e.disableTeleport || e.teleportTo === !1 || e.teleportTo === null
-    ), d = a(() => typeof e.teleportTo == "string" || typeof HTMLElement < "u" && e.teleportTo instanceof HTMLElement ? e.teleportTo : "body"), m = be({
+    ), c = a(() => typeof e.teleportTo == "string" || typeof HTMLElement < "u" && e.teleportTo instanceof HTMLElement ? e.teleportTo : "body"), m = be({
       defaultOpen: e.defaultOpen,
       open: a(() => e.open),
       onOpenChange: (b) => {
@@ -1069,6 +1070,7 @@ const ot = {
       }
     }), h = m.isOpen, x = a(() => [
       "vf-dropdown__menu",
+      `vf-dropdown__menu--${e.variant}`,
       u.value.startsWith("top") && "vf-dropdown__menu--top"
     ]), L = a(() => {
       const b = w.value.arrow;
@@ -1129,7 +1131,7 @@ const ot = {
       (b.key === "ArrowDown" || b.key === "Enter" || b.key === " ") && (b.preventDefault(), f({ focusFirstItem: !0 }));
     }
     function ie(b) {
-      var ae, te, Q, de;
+      var ae, te, Q, ce;
       const z = s(), Y = z.findIndex(
         (oe) => oe === document.activeElement
       );
@@ -1145,7 +1147,7 @@ const ot = {
         b.preventDefault(), (Q = z[0]) == null || Q.focus();
         return;
       }
-      b.key === "End" && (b.preventDefault(), (de = z[z.length - 1]) == null || de.focus());
+      b.key === "End" && (b.preventDefault(), (ce = z[z.length - 1]) == null || ce.focus());
     }
     function pe() {
       e.closeOnSelect && S();
@@ -1166,7 +1168,7 @@ const ot = {
       {
         enabled: h
       }
-    ), (b, z) => (c(), _("div", St, [
+    ), (b, z) => (d(), _("div", St, [
       V("div", {
         id: y(v),
         ref_key: "triggerRef",
@@ -1184,17 +1186,17 @@ const ot = {
           toggle: $
         })
       ], 40, Mt),
-      (c(), q(he, {
-        to: d.value,
+      (d(), q(he, {
+        to: c.value,
         disabled: p.value
       }, [
-        H(ce, {
+        H(de, {
           name: "vf-floating-transition",
           appear: "",
           duration: T
         }, {
           default: G(() => [
-            y(h) ? (c(), _("div", {
+            y(h) ? (d(), _("div", {
               key: 0,
               id: y(g),
               ref_key: "menuRef",
@@ -1244,7 +1246,7 @@ const ot = {
     function r(g) {
       l("update:modelValue", g.target.value);
     }
-    return (g, v) => (c(), _("input", N({
+    return (g, v) => (d(), _("input", N({
       class: i.value,
       value: e.modelValue,
       "aria-invalid": e.invalid || void 0
@@ -1283,7 +1285,7 @@ const ot = {
       ...g.value,
       class: r.value
     }));
-    return (T, p) => (c(), q(fe(o.value), Be(Ie(v.value)), {
+    return (T, p) => (d(), q(fe(o.value), Be(Ie(v.value)), {
       default: G(() => [
         O(T.$slots, "default")
       ]),
@@ -1332,7 +1334,7 @@ const ot = {
       () => !v.value && R(e.item, e.activeValue)
     ), p = a(
       () => o.value.every((w, B) => e.openPath[B] === w)
-    ), d = a(() => e.item.to !== void 0 ? fe("RouterLink") : "a"), m = a(() => e.item.rel ? e.item.rel : e.item.target === "_blank" ? "noopener noreferrer" : void 0), h = a(() => e.item.to !== void 0 ? {
+    ), c = a(() => e.item.to !== void 0 ? fe("RouterLink") : "a"), m = a(() => e.item.rel ? e.item.rel : e.item.target === "_blank" ? "noopener noreferrer" : void 0), h = a(() => e.item.to !== void 0 ? {
       to: e.item.to,
       target: e.item.target,
       rel: m.value
@@ -1380,7 +1382,7 @@ const ot = {
     }
     return (w, B) => {
       const s = Ee("VfMenuBarItemNode", !0);
-      return c(), _("li", {
+      return d(), _("li", {
         class: P(["vf-menu-bar__node", [
           `vf-menu-bar__node--depth-${t.depth}`,
           i.value && "vf-menu-bar__node--branch",
@@ -1388,12 +1390,12 @@ const ot = {
         ]]),
         onMouseenter: u
       }, [
-        r.value ? (c(), _("div", {
+        r.value ? (d(), _("div", {
           key: 0,
           class: "vf-menu-bar__group",
           role: "presentation",
           style: U({ "--vf-menu-bar-depth": String(t.depth) })
-        }, F(t.item.label), 5)) : i.value ? (c(), _("button", {
+        }, F(t.item.label), 5)) : i.value ? (d(), _("button", {
           key: 1,
           type: "button",
           class: P(["vf-menu-bar__item vf-menu-bar__item--branch", [
@@ -1410,7 +1412,7 @@ const ot = {
           onKeydown: I
         }, [
           V("span", Ft, [
-            t.item.leadingIcon ? (c(), _("span", Ht, [
+            t.item.leadingIcon ? (d(), _("span", Ht, [
               H(y(J), {
                 icon: t.item.leadingIcon,
                 size: "1rem"
@@ -1424,7 +1426,7 @@ const ot = {
               size: "0.875rem"
             }, null, 8, ["icon"])
           ])
-        ], 46, Rt)) : g.value ? (c(), q(fe(d.value), N({ key: 2 }, h.value, {
+        ], 46, Rt)) : g.value ? (d(), q(fe(c.value), N({ key: 2 }, h.value, {
           class: ["vf-menu-bar__item", [
             t.depth === 0 && "vf-menu-bar__item--top",
             v.value && "vf-menu-bar__item--active",
@@ -1438,7 +1440,7 @@ const ot = {
         }), {
           default: G(() => [
             V("span", jt, [
-              t.item.leadingIcon ? (c(), _("span", qt, [
+              t.item.leadingIcon ? (d(), _("span", qt, [
                 H(y(J), {
                   icon: t.item.leadingIcon,
                   size: "1rem"
@@ -1448,7 +1450,7 @@ const ot = {
             ])
           ]),
           _: 1
-        }, 16, ["class", "style", "aria-current"])) : (c(), _("button", {
+        }, 16, ["class", "style", "aria-current"])) : (d(), _("button", {
           key: 3,
           type: "button",
           class: P(["vf-menu-bar__item", [
@@ -1464,7 +1466,7 @@ const ot = {
           onClick: B[0] || (B[0] = (k) => D())
         }, [
           V("span", Xt, [
-            t.item.leadingIcon ? (c(), _("span", Yt, [
+            t.item.leadingIcon ? (d(), _("span", Yt, [
               H(y(J), {
                 icon: t.item.leadingIcon,
                 size: "1rem"
@@ -1473,12 +1475,12 @@ const ot = {
             V("span", Gt, F(t.item.label), 1)
           ])
         ], 14, Ut)),
-        H(ce, {
+        H(de, {
           name: "vf-floating-transition",
           appear: ""
         }, {
           default: G(() => [
-            i.value && p.value ? (c(), _("div", {
+            i.value && p.value ? (d(), _("div", {
               key: 0,
               class: P([
                 "vf-menu-bar__submenu",
@@ -1486,7 +1488,7 @@ const ot = {
               ])
             }, [
               V("ul", Qt, [
-                (c(!0), _(re, null, ue(t.item.children, (k) => (c(), q(s, {
+                (d(!0), _(re, null, ue(t.item.children, (k) => (d(), q(s, {
                   key: k.value,
                   item: k,
                   depth: t.depth + 1,
@@ -1514,7 +1516,8 @@ const ot = {
     items: {},
     modelValue: { default: void 0 },
     defaultValue: { default: void 0 },
-    ariaLabel: { default: "Menu bar" }
+    ariaLabel: { default: "Menu bar" },
+    variant: { default: "default" }
   },
   emits: ["update:modelValue", "change", "select"],
   setup(t, { emit: n }) {
@@ -1526,7 +1529,7 @@ const ot = {
     function p(x) {
       T(x.value), r.value = [], l("select", x);
     }
-    function d(x) {
+    function c(x) {
       h(), r.value = x;
     }
     function m() {
@@ -1560,16 +1563,16 @@ const ot = {
       { deep: !0 }
     ), se(() => {
       h();
-    }), (x, L) => (c(), _("nav", {
+    }), (x, L) => (d(), _("nav", {
       ref_key: "rootRef",
       ref: o,
-      class: "vf-menu-bar",
+      class: P(["vf-menu-bar", `vf-menu-bar--${t.variant}`]),
       "aria-label": t.ariaLabel,
       onMouseenter: h,
       onMouseleave: m
     }, [
       V("ul", en, [
-        (c(!0), _(re, null, ue(t.items, (D) => (c(), q(Jt, {
+        (d(!0), _(re, null, ue(t.items, (D) => (d(), q(Jt, {
           key: D.value,
           item: D,
           depth: 0,
@@ -1577,21 +1580,21 @@ const ot = {
           "active-value": g.value,
           "open-path": r.value,
           "hover-enabled": r.value.length > 0,
-          onOpenPathChange: d,
+          onOpenPathChange: c,
           onSelect: p
         }, null, 8, ["item", "active-value", "open-path", "hover-enabled"]))), 128))
       ])
-    ], 40, Zt));
+    ], 42, Zt));
   }
 }), tn = { class: "vf-nav-menu__node" }, nn = { class: "vf-nav-menu__item-content" }, an = { class: "vf-nav-menu__group-label" }, on = ["aria-expanded", "disabled"], ln = { class: "vf-nav-menu__item-content" }, sn = {
   key: 0,
   class: "vf-nav-menu__leading-icon",
   "aria-hidden": "true"
-}, rn = { class: "vf-nav-menu__label" }, un = { class: "vf-nav-menu__item-content" }, cn = {
+}, rn = { class: "vf-nav-menu__label" }, un = { class: "vf-nav-menu__item-content" }, dn = {
   key: 0,
   class: "vf-nav-menu__leading-icon",
   "aria-hidden": "true"
-}, dn = { class: "vf-nav-menu__label" }, fn = ["aria-current", "disabled"], vn = { class: "vf-nav-menu__item-content" }, mn = {
+}, cn = { class: "vf-nav-menu__label" }, fn = ["aria-current", "disabled"], vn = { class: "vf-nav-menu__item-content" }, mn = {
   key: 0,
   class: "vf-nav-menu__leading-icon",
   "aria-hidden": "true"
@@ -1619,14 +1622,14 @@ const ot = {
       () => !g.value && L(e.item, e.activeValue)
     ), T = a(
       () => e.item.href !== void 0 || e.item.to !== void 0
-    ), p = a(() => e.item.to !== void 0 ? fe("RouterLink") : "a"), d = a(() => e.item.rel ? e.item.rel : e.item.target === "_blank" ? "noopener noreferrer" : void 0), m = a(() => e.item.to !== void 0 ? {
+    ), p = a(() => e.item.to !== void 0 ? fe("RouterLink") : "a"), c = a(() => e.item.rel ? e.item.rel : e.item.target === "_blank" ? "noopener noreferrer" : void 0), m = a(() => e.item.to !== void 0 ? {
       to: e.item.to,
       target: e.item.target,
-      rel: d.value
+      rel: c.value
     } : {
       href: e.item.href,
       target: e.item.target,
-      rel: d.value
+      rel: c.value
     });
     function h() {
       e.item.disabled || l("toggle", {
@@ -1681,8 +1684,8 @@ const ot = {
     }
     return (k, f) => {
       const S = Ee("VfNavMenuItemNode", !0);
-      return c(), _("li", tn, [
-        i.value ? (c(), _("div", {
+      return d(), _("li", tn, [
+        i.value ? (d(), _("div", {
           key: 0,
           class: P(["vf-nav-menu__group", `vf-nav-menu__group--level-${t.level}`]),
           style: U({ "--vf-nav-menu-level": String(t.level) })
@@ -1690,7 +1693,7 @@ const ot = {
           V("span", nn, [
             V("span", an, F(t.item.label), 1)
           ])
-        ], 6)) : o.value ? (c(), _("button", {
+        ], 6)) : o.value ? (d(), _("button", {
           key: 1,
           class: P([
             "vf-nav-menu__item",
@@ -1706,7 +1709,7 @@ const ot = {
           onClick: h
         }, [
           V("span", ln, [
-            t.item.leadingIcon ? (c(), _("span", sn, [
+            t.item.leadingIcon ? (d(), _("span", sn, [
               H(y(J), {
                 icon: t.item.leadingIcon,
                 size: "1rem"
@@ -1723,7 +1726,7 @@ const ot = {
               size: "0.875rem"
             }, null, 8, ["icon"])
           ], 2)
-        ], 14, on)) : T.value ? (c(), q(fe(p.value), N({ key: 2 }, m.value, {
+        ], 14, on)) : T.value ? (d(), q(fe(p.value), N({ key: 2 }, m.value, {
           class: [
             "vf-nav-menu__item",
             !t.item.leadingIcon && "vf-nav-menu__item--icon-offset",
@@ -1737,17 +1740,17 @@ const ot = {
         }), {
           default: G(() => [
             V("span", un, [
-              t.item.leadingIcon ? (c(), _("span", cn, [
+              t.item.leadingIcon ? (d(), _("span", dn, [
                 H(y(J), {
                   icon: t.item.leadingIcon,
                   size: "1rem"
                 }, null, 8, ["icon"])
               ])) : E("", !0),
-              V("span", dn, F(t.item.label), 1)
+              V("span", cn, F(t.item.label), 1)
             ])
           ]),
           _: 1
-        }, 16, ["class", "style", "aria-current"])) : (c(), _("button", {
+        }, 16, ["class", "style", "aria-current"])) : (d(), _("button", {
           key: 3,
           class: P([
             "vf-nav-menu__item",
@@ -1763,7 +1766,7 @@ const ot = {
           onClick: f[0] || (f[0] = ($) => x())
         }, [
           V("span", vn, [
-            t.item.leadingIcon ? (c(), _("span", mn, [
+            t.item.leadingIcon ? (d(), _("span", mn, [
               H(y(J), {
                 icon: t.item.leadingIcon,
                 size: "1rem"
@@ -1772,8 +1775,8 @@ const ot = {
             V("span", pn, F(t.item.label), 1)
           ])
         ], 14, fn)),
-        o.value && i.value ? (c(), _("ul", hn, [
-          (c(!0), _(re, null, ue(t.item.children, ($) => (c(), q(S, {
+        o.value && i.value ? (d(), _("ul", hn, [
+          (d(!0), _(re, null, ue(t.item.children, ($) => (d(), q(S, {
             key: $.value,
             item: $,
             level: t.level + 1,
@@ -1783,7 +1786,7 @@ const ot = {
             onToggle: f[1] || (f[1] = (C) => l("toggle", C)),
             onSelect: f[2] || (f[2] = (C) => l("select", C))
           }, null, 8, ["item", "level", "parent-path", "active-value", "expanded-values"]))), 128))
-        ])) : o.value ? (c(), q(ce, {
+        ])) : o.value ? (d(), q(de, {
           key: 5,
           onBeforeEnter: R,
           onEnter: I,
@@ -1793,7 +1796,7 @@ const ot = {
           onAfterLeave: s
         }, {
           default: G(() => [
-            r.value ? (c(), _("div", {
+            r.value ? (d(), _("div", {
               key: 0,
               class: P([
                 "vf-nav-menu__collapse",
@@ -1801,7 +1804,7 @@ const ot = {
               ])
             }, [
               V("ul", bn, [
-                (c(!0), _(re, null, ue(t.item.children, ($) => (c(), q(S, {
+                (d(!0), _(re, null, ue(t.item.children, ($) => (d(), q(S, {
                   key: $.value,
                   item: $,
                   level: t.level + 1,
@@ -1826,7 +1829,8 @@ const ot = {
     modelValue: { default: void 0 },
     defaultValue: { default: void 0 },
     ariaLabel: { default: "Navigation" },
-    expandMode: { default: "multiple" }
+    expandMode: { default: "multiple" },
+    variant: { default: "default" }
   },
   emits: ["update:modelValue", "change", "select"],
   setup(t, { emit: n }) {
@@ -1844,7 +1848,7 @@ const ot = {
     ), T = a(
       () => g(e.items, (u) => !!u.leadingIcon)
     ), p = a(() => !v.value && !T.value);
-    function d(u) {
+    function c(u) {
       var w;
       return u.kind !== "group" && !!((w = u.children) != null && w.length);
     }
@@ -1883,7 +1887,7 @@ const ot = {
       return u.flatMap((w) => {
         var s;
         const B = (s = w.children) != null && s.length ? L(w.children) : [];
-        return d(w) ? [w.value, ...B] : B;
+        return c(w) ? [w.value, ...B] : B;
       });
     }
     function D(u) {
@@ -1906,7 +1910,7 @@ const ot = {
         return;
       }
       if (e.expandMode === "single") {
-        const k = x(e.items, B).filter((f) => f.value !== w && d(f)).flatMap((f) => L([f]));
+        const k = x(e.items, B).filter((f) => f.value !== w && c(f)).flatMap((f) => L([f]));
         r.value = r.value.filter(
           (f) => !k.includes(f)
         );
@@ -1919,12 +1923,16 @@ const ot = {
         h();
       },
       { immediate: !0, deep: !0 }
-    ), (u, w) => (c(), _("nav", {
-      class: P(["vf-nav-menu", p.value && "vf-nav-menu--simple"]),
+    ), (u, w) => (d(), _("nav", {
+      class: P([
+        "vf-nav-menu",
+        `vf-nav-menu--${t.variant}`,
+        p.value && "vf-nav-menu--simple"
+      ]),
       "aria-label": t.ariaLabel
     }, [
       V("ul", gn, [
-        (c(!0), _(re, null, ue(t.items, (B) => (c(), q(_n, {
+        (d(!0), _(re, null, ue(t.items, (B) => (d(), q(_n, {
           key: B.value,
           item: B,
           level: 0,
@@ -1948,8 +1956,8 @@ const ot = {
     const n = t, e = j(), l = a(
       () => K("vf-panel", n.subtle && "vf-panel--subtle")
     );
-    return (o, i) => (c(), _("section", N({ class: l.value }, y(e)), [
-      n.title || o.$slots.header ? (c(), _("header", wn, [
+    return (o, i) => (d(), _("section", N({ class: l.value }, y(e)), [
+      n.title || o.$slots.header ? (d(), _("header", wn, [
         O(o.$slots, "header", {}, () => [
           V("h3", kn, F(n.title), 1)
         ])
@@ -1975,7 +1983,7 @@ const ot = {
       leave: Z.fast
     }, p = a(
       () => e.disableTeleport || e.teleportTo === !1 || e.teleportTo === null
-    ), d = a(() => typeof e.teleportTo == "string" || typeof HTMLElement < "u" && e.teleportTo instanceof HTMLElement ? e.teleportTo : "body"), m = be({
+    ), c = a(() => typeof e.teleportTo == "string" || typeof HTMLElement < "u" && e.teleportTo instanceof HTMLElement ? e.teleportTo : "body"), m = be({
       defaultOpen: e.defaultOpen,
       open: a(() => e.open),
       onOpenChange: (C) => {
@@ -2060,7 +2068,7 @@ const ot = {
       {
         enabled: h
       }
-    ), (C, ie) => (c(), _("div", $n, [
+    ), (C, ie) => (d(), _("div", $n, [
       V("div", {
         id: y(v),
         ref_key: "triggerRef",
@@ -2078,17 +2086,17 @@ const ot = {
           toggle: S
         })
       ], 40, Tn),
-      (c(), q(he, {
-        to: d.value,
+      (d(), q(he, {
+        to: c.value,
         disabled: p.value
       }, [
-        H(ce, {
+        H(de, {
           name: "vf-floating-transition",
           appear: "",
           duration: T
         }, {
           default: G(() => [
-            y(h) ? (c(), _("section", {
+            y(h) ? (d(), _("section", {
               key: 0,
               id: y(g),
               ref_key: "contentRef",
@@ -2150,7 +2158,7 @@ const ot = {
     function T(p) {
       p.target.checked && (l("update:modelValue", e.value), l("change", e.value));
     }
-    return (p, d) => (c(), _("label", {
+    return (p, c) => (d(), _("label", {
       class: P(r.value),
       style: U(g.value)
     }, [
@@ -2162,13 +2170,13 @@ const ot = {
         value: e.value,
         "aria-invalid": e.invalid || void 0
       }, v.value, { onChange: T }), null, 16, Cn),
-      d[0] || (d[0] = V("span", {
+      c[0] || (c[0] = V("span", {
         class: "vf-radio__control",
         "aria-hidden": "true"
       }, [
         V("span", { class: "vf-radio__dot" })
       ], -1)),
-      t.label || p.$slots.default ? (c(), _("span", xn, [
+      t.label || p.$slots.default ? (d(), _("span", xn, [
         O(p.$slots, "default", {}, () => [
           ve(F(t.label), 1)
         ])
@@ -2197,14 +2205,14 @@ const ot = {
     const e = t, l = n, o = j(), i = A(null), r = A(null), g = ee({ prefix: "vf-select-trigger" }), v = ee({ prefix: "vf-select-listbox" }), T = {
       enter: Z.fast,
       leave: Z.fast
-    }, p = be(), d = p.isOpen, m = a(
+    }, p = be(), c = p.isOpen, m = a(
       () => e.options.find((b) => b.value === e.modelValue)
     ), h = a(
       () => K(
         "vf-select",
         e.size !== "md" && `vf-select--${e.size}`,
         e.invalid && "vf-select--invalid",
-        d.value && "vf-select--open",
+        c.value && "vf-select--open",
         !m.value && e.placeholder && "vf-select--placeholder"
       )
     ), x = a(() => m.value ? m.value.label : e.placeholder ?? ""), L = a(
@@ -2215,7 +2223,7 @@ const ot = {
       i,
       r,
       {
-        enabled: d,
+        enabled: c,
         placement: a(() => e.placement),
         middleware: a(
           () => [
@@ -2251,8 +2259,8 @@ const ot = {
         return;
       const te = r.value;
       if (te) {
-        const Q = ae.offsetTop, de = Q + ae.offsetHeight, oe = 8, Ce = te.scrollTop, Me = Ce + te.clientHeight;
-        Q - oe < Ce ? te.scrollTop = Math.max(Q - oe, 0) : de + oe > Me && (te.scrollTop = de - te.clientHeight + oe);
+        const Q = ae.offsetTop, ce = Q + ae.offsetHeight, oe = 8, Ce = te.scrollTop, Me = Ce + te.clientHeight;
+        Q - oe < Ce ? te.scrollTop = Math.max(Q - oe, 0) : ce + oe > Me && (te.scrollTop = ce - te.clientHeight + oe);
       }
       b.focus && ae.focus();
     }
@@ -2264,7 +2272,7 @@ const ot = {
       p.close(), b.restoreFocus !== !1 && ((z = i.value) == null || z.focus());
     }
     function $() {
-      if (d.value) {
+      if (c.value) {
         S();
         return;
       }
@@ -2277,7 +2285,7 @@ const ot = {
       e.disabled || (b.key === "ArrowDown" || b.key === "ArrowUp" || b.key === "Enter" || b.key === " ") && (b.preventDefault(), f({ focusSelected: !0 }));
     }
     function pe(b) {
-      var ae, te, Q, de;
+      var ae, te, Q, ce;
       const z = s(), Y = z.findIndex(
         (oe) => oe === document.activeElement
       );
@@ -2294,7 +2302,7 @@ const ot = {
         return;
       }
       if (b.key === "End") {
-        b.preventDefault(), (de = z[z.length - 1]) == null || de.focus();
+        b.preventDefault(), (ce = z[z.length - 1]) == null || ce.focus();
         return;
       }
       if (b.key === "Escape") {
@@ -2311,21 +2319,21 @@ const ot = {
     return $e(
       [i, r],
       () => {
-        d.value && S({ restoreFocus: !1 });
+        c.value && S({ restoreFocus: !1 });
       },
       {
-        enabled: d,
+        enabled: c,
         event: "click"
       }
     ), _e(
       (b) => {
-        d.value && (b.preventDefault(), S());
+        c.value && (b.preventDefault(), S());
       },
       {
-        enabled: d
+        enabled: c
       }
-    ), (b, z) => (c(), _("div", Bn, [
-      typeof y(o).name == "string" ? (c(), _("input", {
+    ), (b, z) => (d(), _("div", Bn, [
+      typeof y(o).name == "string" ? (d(), _("input", {
         key: 0,
         type: "hidden",
         name: y(o).name,
@@ -2338,7 +2346,7 @@ const ot = {
         type: "button",
         class: P(h.value),
         "aria-controls": y(v),
-        "aria-expanded": y(d),
+        "aria-expanded": y(c),
         "aria-haspopup": "listbox",
         "aria-invalid": e.invalid || void 0,
         disabled: e.disabled,
@@ -2353,17 +2361,17 @@ const ot = {
           }, null, 8, ["icon"])
         ])
       ], 42, En),
-      (c(), q(he, {
+      (d(), q(he, {
         to: D.value,
         disabled: L.value
       }, [
-        H(ce, {
+        H(de, {
           name: "vf-floating-transition",
           appear: "",
           duration: T
         }, {
           default: G(() => [
-            y(d) ? (c(), _("div", {
+            y(c) ? (d(), _("div", {
               key: 0,
               id: y(v),
               ref_key: "menuRef",
@@ -2374,7 +2382,7 @@ const ot = {
               role: "listbox",
               onKeydown: pe
             }, [
-              (c(!0), _(re, null, ue(e.options, (Y) => (c(), _("button", {
+              (d(!0), _(re, null, ue(e.options, (Y) => (d(), _("button", {
                 key: Y.value,
                 type: "button",
                 class: P(["vf-dropdown__item vf-select__option", [
@@ -2421,21 +2429,21 @@ const ot = {
       var h;
       if (e.label)
         return !0;
-      const d = ((h = i.default) == null ? void 0 : h.call(i, {})) ?? [];
+      const c = ((h = i.default) == null ? void 0 : h.call(i, {})) ?? [];
       function m(x) {
         return x.type === He ? !1 : x.type === Ne ? String(x.children ?? "").trim().length > 0 : x.type === re && Array.isArray(x.children) ? x.children.some((L) => m(L)) : !0;
       }
-      return d.some((x) => m(x));
+      return c.some((x) => m(x));
     }), T = a(
       () => Object.fromEntries(
-        Object.entries(o).filter(([d]) => d !== "class" && d !== "style")
+        Object.entries(o).filter(([c]) => c !== "class" && c !== "style")
       )
     );
-    function p(d) {
-      const m = d.target.checked;
+    function p(c) {
+      const m = c.target.checked;
       l("update:modelValue", m), l("change", m);
     }
-    return (d, m) => (c(), _("label", {
+    return (c, m) => (d(), _("label", {
       class: P(r.value),
       style: U(g.value)
     }, [
@@ -2448,13 +2456,13 @@ const ot = {
       }, T.value, { onChange: p }), null, 16, Sn),
       V("span", Mn, [
         V("span", zn, [
-          O(d.$slots, "thumb", {
+          O(c.$slots, "thumb", {
             checked: e.modelValue
           })
         ])
       ]),
-      v.value ? (c(), _("span", Pn, [
-        O(d.$slots, "default", {}, () => [
+      v.value ? (d(), _("span", Pn, [
+        O(c.$slots, "default", {}, () => [
           ve(F(t.label), 1)
         ])
       ])) : E("", !0)
@@ -2490,23 +2498,23 @@ const ot = {
         n.stickyHeader && "vf-table--sticky-header"
       )
     );
-    return (o, i) => (c(), _("div", N({ class: "vf-table-wrap" }, y(e)), [
+    return (o, i) => (d(), _("div", N({ class: "vf-table-wrap" }, y(e)), [
       V("div", Fn, [
         V("table", {
           class: P(l.value)
         }, [
-          n.caption || o.$slots.caption ? (c(), _("caption", Hn, [
+          n.caption || o.$slots.caption ? (d(), _("caption", Hn, [
             O(o.$slots, "caption", {}, () => [
               ve(F(n.caption), 1)
             ])
           ])) : E("", !0),
-          o.$slots.header ? (c(), _("thead", Nn, [
+          o.$slots.header ? (d(), _("thead", Nn, [
             O(o.$slots, "header")
           ])) : E("", !0),
-          o.$slots.default ? (c(), _("tbody", Kn, [
+          o.$slots.default ? (d(), _("tbody", Kn, [
             O(o.$slots, "default")
           ])) : E("", !0),
-          o.$slots.footer ? (c(), _("tfoot", jn, [
+          o.$slots.footer ? (d(), _("tfoot", jn, [
             O(o.$slots, "footer")
           ])) : E("", !0)
         ], 2)
@@ -2521,28 +2529,30 @@ const ot = {
     activeId: { default: void 0 },
     ariaLabel: { default: "Table of contents" },
     smooth: { type: Boolean, default: !1 },
-    scrollOffset: { default: 0 }
+    scrollOffset: { default: 0 },
+    variant: { default: "default" }
   },
   setup(t) {
     const n = t, e = j(), l = A(!1), o = a(
       () => K(
         "vf-table-of-contents",
+        `vf-table-of-contents--${n.variant}`,
         l.value && "vf-table-of-contents--ready",
         e.class
       )
     ), i = a(() => e.style), r = a(
       () => Object.fromEntries(
-        Object.entries(e).filter(([d]) => d !== "class" && d !== "style")
+        Object.entries(e).filter(([c]) => c !== "class" && c !== "style")
       )
     );
-    function g(d) {
-      return !d || d < 1 ? 1 : Math.min(d, 6);
+    function g(c) {
+      return !c || c < 1 ? 1 : Math.min(c, 6);
     }
-    function v(d) {
-      return d.href ?? `#${d.id}`;
+    function v(c) {
+      return c.href ?? `#${c.id}`;
     }
-    function T(d, m) {
-      const h = v(d);
+    function T(c, m) {
+      const h = v(c);
       if (!h.startsWith("#"))
         return;
       const x = decodeURIComponent(h.slice(1));
@@ -2560,9 +2570,9 @@ const ot = {
         behavior: n.smooth ? "smooth" : "auto"
       });
     }
-    function p(d, m) {
+    function p(c, m) {
       const h = v(m);
-      !n.smooth && n.scrollOffset <= 0 || !h.startsWith("#") || !decodeURIComponent(h.slice(1)) || (d.preventDefault(), T(m, {
+      !n.smooth && n.scrollOffset <= 0 || !h.startsWith("#") || !decodeURIComponent(h.slice(1)) || (c.preventDefault(), T(m, {
         updateHistory: !0
       }));
     }
@@ -2571,17 +2581,17 @@ const ot = {
         l.value = !0;
       }), typeof window > "u" || !window.location.hash)
         return;
-      const d = decodeURIComponent(window.location.hash), m = n.items.find((h) => v(h) === d);
+      const c = decodeURIComponent(window.location.hash), m = n.items.find((h) => v(h) === c);
       m && (await le(), requestAnimationFrame(() => {
         T(m);
       }));
-    }), (d, m) => (c(), _("nav", N({
+    }), (c, m) => (d(), _("nav", N({
       class: o.value,
       style: i.value,
       "aria-label": n.ariaLabel
     }, r.value), [
       V("ol", Wn, [
-        (c(!0), _(re, null, ue(n.items, (h) => (c(), _("li", {
+        (d(!0), _(re, null, ue(n.items, (h) => (d(), _("li", {
           key: h.id,
           class: "vf-table-of-contents__item",
           style: U({ "--vf-toc-level": String(g(h.level)) })
@@ -2628,7 +2638,7 @@ const ot = {
     }
     return se(() => {
       v !== null && typeof window < "u" && window.cancelAnimationFrame(v);
-    }), (p, d) => (c(), q(Rn, N(y(e), {
+    }), (p, c) => (d(), q(Rn, N(y(e), {
       "model-value": g.value,
       size: n.size,
       disabled: n.disabled,
@@ -2661,7 +2671,7 @@ const ot = {
     const n = t, e = j(), l = a(
       () => K("vf-tag", n.tone !== "neutral" && `vf-tag--${n.tone}`)
     );
-    return (o, i) => (c(), _("span", N({ class: l.value }, y(e)), [
+    return (o, i) => (d(), _("span", N({ class: l.value }, y(e)), [
       O(o.$slots, "default")
     ], 16));
   }
@@ -2683,7 +2693,7 @@ const ot = {
         var s;
         return (s = e.items.find((k) => !k.disabled)) == null ? void 0 : s.value;
       }
-    ), p = A(e.defaultValue ?? T.value), d = a(() => e.modelValue !== void 0), m = a(
+    ), p = A(e.defaultValue ?? T.value), c = a(() => e.modelValue !== void 0), m = a(
       () => e.modelValue ?? p.value ?? T.value
     );
     let h = null;
@@ -2697,7 +2707,7 @@ const ot = {
       { deep: !0 }
     );
     function x(s) {
-      d.value || (p.value = s), l("update:modelValue", s), l("change", s);
+      c.value || (p.value = s), l("update:modelValue", s), l("change", s);
     }
     function L(s) {
       s.disabled || x(s.value);
@@ -2778,7 +2788,7 @@ const ot = {
       }), h.observe(i.value)), typeof window < "u" && window.addEventListener("resize", B);
     }), se(() => {
       h == null || h.disconnect(), typeof window < "u" && window.removeEventListener("resize", B);
-    }), (s, k) => (c(), _("div", Xn, [
+    }), (s, k) => (d(), _("div", Xn, [
       V("div", {
         ref_key: "listRef",
         ref: i,
@@ -2786,7 +2796,7 @@ const ot = {
         role: "tablist",
         "aria-orientation": "horizontal"
       }, [
-        (c(!0), _(re, null, ue(t.items, (f, S) => (c(), _("button", {
+        (d(!0), _(re, null, ue(t.items, (f, S) => (d(), _("button", {
           id: u(f.value),
           key: f.value,
           ref_for: !0,
@@ -2809,7 +2819,7 @@ const ot = {
           style: U(v.value)
         }, null, 6)
       ], 512),
-      m.value ? (c(), _("div", {
+      m.value ? (d(), _("div", {
         key: 0,
         id: w(m.value),
         "aria-labelledby": u(m.value),
@@ -2841,7 +2851,7 @@ const ot = {
     function r(g) {
       l("update:modelValue", g.target.value);
     }
-    return (g, v) => (c(), _("textarea", N({
+    return (g, v) => (d(), _("textarea", N({
       class: i.value,
       value: e.modelValue,
       "aria-invalid": e.invalid || void 0
@@ -2863,7 +2873,7 @@ const ot = {
     }, T = a(
       () => n.disableTeleport || n.teleportTo === !1 || n.teleportTo === null
     ), p = a(() => typeof n.teleportTo == "string" || typeof HTMLElement < "u" && n.teleportTo instanceof HTMLElement ? n.teleportTo : "body"), {
-      placement: d,
+      placement: c,
       middlewareData: m,
       styles: h,
       cleanup: x
@@ -2881,8 +2891,8 @@ const ot = {
       strategy: "fixed"
     }), L = a(() => [
       "vf-tooltip__content",
-      d.value.startsWith("bottom") && "vf-tooltip__content--bottom",
-      d.value.startsWith("top") && "vf-tooltip__content--top"
+      c.value.startsWith("bottom") && "vf-tooltip__content--bottom",
+      c.value.startsWith("top") && "vf-tooltip__content--top"
     ]), D = a(() => {
       const s = m.value.arrow;
       return {
@@ -2891,8 +2901,8 @@ const ot = {
       };
     }), R = a(() => [
       "vf-tooltip__arrow",
-      d.value.startsWith("bottom") && "vf-tooltip__arrow--bottom",
-      d.value.startsWith("top") && "vf-tooltip__arrow--top"
+      c.value.startsWith("bottom") && "vf-tooltip__arrow--bottom",
+      c.value.startsWith("top") && "vf-tooltip__arrow--top"
     ]), I = a(() => ({
       left: `${D.value.x}px`,
       top: `${D.value.y}px`
@@ -2910,7 +2920,7 @@ const ot = {
     }
     return se(() => {
       u(), x();
-    }), (s, k) => (c(), _("span", {
+    }), (s, k) => (d(), _("span", {
       class: "vf-tooltip",
       onMouseenter: w,
       onMouseleave: B,
@@ -2925,17 +2935,17 @@ const ot = {
       }, [
         O(s.$slots, "default")
       ], 8, Jn),
-      (c(), q(he, {
+      (d(), q(he, {
         to: p.value,
         disabled: T.value
       }, [
-        H(ce, {
+        H(de, {
           name: "vf-floating-transition",
           appear: "",
           duration: v
         }, {
           default: G(() => [
-            e.value && (t.text || s.$slots.content) ? (c(), _("span", {
+            e.value && (t.text || s.$slots.content) ? (d(), _("span", {
               key: 0,
               id: y(l),
               ref_key: "contentRef",
@@ -2964,8 +2974,8 @@ const ot = {
 });
 export {
   ua as VfAccordion,
-  ca as VfAlert,
-  da as VfBadge,
+  da as VfAlert,
+  ca as VfBadge,
   fa as VfBreadcrumbs,
   va as VfButton,
   ma as VfCard,