@velkymx/vibeui 0.7.0 → 0.8.1

package/dist/vibeui.es.js

@@ -1,82 +1,87 @@
-import { defineComponent as M, ref as E, onMounted as Y, onBeforeUnmount as X, watch as O, openBlock as n, createElementBlock as i, normalizeClass as $, renderSlot as N, createTextVNode as I, toDisplayString as k, createCommentVNode as y, computed as m, createBlock as z, resolveDynamicComponent as A, withCtx as j, createElementVNode as S, normalizeStyle as K, Fragment as F, renderList as H, nextTick as ne, reactive as pe, provide as ve, unref as ye, inject as J, getCurrentInstance as ge, Teleport as ie, useModel as _, withDirectives as de, vModelText as ke, vModelSelect as Se, withModifiers as Z, mergeModels as ue } from "vue";
-const $e = /* @__PURE__ */ M({
+import { defineComponent as M, ref as L, onMounted as X, onBeforeUnmount as Y, watch as O, computed as h, openBlock as i, createElementBlock as s, normalizeClass as $, renderSlot as T, createTextVNode as I, toDisplayString as k, createCommentVNode as g, createBlock as q, resolveDynamicComponent as A, withCtx as j, createElementVNode as S, normalizeStyle as Z, Fragment as R, renderList as H, nextTick as se, reactive as Ce, provide as ge, unref as xe, inject as J, getCurrentInstance as ke, onUnmounted as Se, Teleport as fe, useModel as oe, withDirectives as he, vModelText as Be, vModelSelect as Le, withModifiers as le, mergeModels as pe } from "vue";
+const Te = /* @__PURE__ */ M({
   __name: "VibeAlert",
   props: {
     variant: { type: String, default: "primary" },
+    subtle: { type: Boolean, default: !1 },
     modelValue: { type: Boolean, default: !0 },
     dismissable: { type: Boolean, default: !1 },
     message: { type: String, required: !0 },
     fade: { type: Boolean, default: !0 }
   },
   emits: ["update:modelValue", "close", "closed", "component-error"],
-  setup(e, { emit: v }) {
-    const t = e, a = v, l = E(null), s = E(null), o = E(t.modelValue), r = () => {
+  setup(e, { emit: r }) {
+    const t = e, a = r, l = L(null), n = L(null), o = L(t.modelValue), d = () => {
       a("close");
-    }, u = () => {
+    }, v = () => {
       o.value = !1, a("update:modelValue", !1), a("closed");
     };
-    Y(async () => {
+    X(async () => {
       if (l.value)
         try {
-          const g = (await import("bootstrap")).Alert;
-          s.value = new g(l.value), l.value.addEventListener("close.bs.alert", r), l.value.addEventListener("closed.bs.alert", u);
-        } catch (b) {
+          const V = (await import("bootstrap")).Alert;
+          n.value = new V(l.value), l.value.addEventListener("close.bs.alert", d), l.value.addEventListener("closed.bs.alert", v);
+        } catch (f) {
           a("component-error", {
             message: "Bootstrap JS not loaded. Alert will use basic Vue logic.",
             componentName: "VibeAlert",
-            originalError: b
+            originalError: f
           });
         }
-    }), X(() => {
-      l.value && (l.value.removeEventListener("close.bs.alert", r), l.value.removeEventListener("closed.bs.alert", u)), s.value && (s.value.dispose(), s.value = null);
-    }), O(() => t.modelValue, (b) => {
-      b ? o.value = !0 : s.value && o.value ? s.value.close() : o.value = !1;
+    }), Y(() => {
+      l.value && (l.value.removeEventListener("close.bs.alert", d), l.value.removeEventListener("closed.bs.alert", v)), n.value && (n.value.dispose(), n.value = null);
+    }), O(() => t.modelValue, (f) => {
+      f ? o.value = !0 : n.value && o.value ? n.value.close() : o.value = !1;
     });
     const c = () => {
-      s.value ? s.value.close() : (o.value = !1, a("update:modelValue", !1), a("closed"));
-    };
-    return (b, g) => o.value ? (n(), i("div", {
+      n.value ? n.value.close() : (o.value = !1, a("update:modelValue", !1), a("closed"));
+    }, m = h(() => {
+      const f = ["alert"];
+      return t.subtle ? f.push(`bg-${t.variant}-subtle`, `text-${t.variant}-emphasis`, `border-${t.variant}-subtle`) : f.push(`alert-${t.variant}`), t.dismissable && f.push("alert-dismissible"), t.fade && f.push("fade", "show"), f.join(" ");
+    });
+    return (f, V) => o.value ? (i(), s("div", {
       key: 0,
       ref_key: "alertRef",
       ref: l,
-      class: $(["alert", `alert-${e.variant}`, { "alert-dismissible": e.dismissable, "fade show": e.fade }]),
+      class: $(m.value),
       role: "alert"
     }, [
-      N(b.$slots, "default", {}, () => [
+      T(f.$slots, "default", {}, () => [
         I(k(e.message), 1)
       ]),
-      e.dismissable ? (n(), i("button", {
+      e.dismissable ? (i(), s("button", {
         key: 0,
         type: "button",
         class: "btn-close",
         "aria-label": "Close",
         onClick: c
-      })) : y("", !0)
-    ], 2)) : y("", !0);
+      })) : g("", !0)
+    ], 2)) : g("", !0);
   }
-}), we = /* @__PURE__ */ M({
+}), Ne = /* @__PURE__ */ M({
   __name: "VibeBadge",
   props: {
     variant: { type: String, default: "primary" },
+    subtle: { type: Boolean, default: !1 },
     pill: { type: Boolean, default: !1 },
     tag: { type: String, default: "span" }
   },
   emits: ["component-error"],
-  setup(e, { emit: v }) {
-    const t = e, a = m(() => {
-      const l = ["badge", `bg-${t.variant}`];
-      return t.pill && l.push("rounded-pill"), l.join(" ");
+  setup(e, { emit: r }) {
+    const t = e, a = h(() => {
+      const l = ["badge"];
+      return t.subtle ? l.push(`bg-${t.variant}-subtle`, `text-${t.variant}-emphasis`) : l.push(`bg-${t.variant}`), t.pill && l.push("rounded-pill"), l.join(" ");
     });
-    return (l, s) => (n(), z(A(e.tag), {
+    return (l, n) => (i(), q(A(e.tag), {
       class: $(a.value)
     }, {
       default: j(() => [
-        N(l.$slots, "default")
+        T(l.$slots, "default")
       ]),
       _: 3
     }, 8, ["class"]));
   }
-}), Ve = /* @__PURE__ */ M({
+}), Ee = /* @__PURE__ */ M({
   __name: "VibeButton",
   props: {
     variant: { type: String, default: "primary" },
@@ -86,18 +91,19 @@ const $e = /* @__PURE__ */ M({
     type: { type: String, default: "button" },
     href: { type: String, default: void 0 },
     to: { type: [String, Object], default: void 0 },
-    active: { type: Boolean, default: !1 }
+    active: { type: Boolean, default: !1 },
+    focusRing: { type: Boolean, default: !1 }
   },
   emits: ["click", "component-error"],
-  setup(e, { emit: v }) {
-    const t = e, a = v, l = m(() => t.href ? "a" : t.to ? "router-link" : "button"), s = m(() => {
-      const r = ["btn"];
-      return t.outline ? r.push(`btn-outline-${t.variant}`) : r.push(`btn-${t.variant}`), t.size && r.push(`btn-${t.size}`), t.active && r.push("active"), r.join(" ");
-    }), o = (r) => {
-      t.disabled || a("click", r);
+  setup(e, { emit: r }) {
+    const t = e, a = r, l = h(() => t.href ? "a" : t.to ? "router-link" : "button"), n = h(() => {
+      const d = ["btn"];
+      return t.outline ? d.push(`btn-outline-${t.variant}`) : d.push(`btn-${t.variant}`), t.size && d.push(`btn-${t.size}`), t.active && d.push("active"), t.focusRing && d.push("focus-ring"), d.join(" ");
+    }), o = (d) => {
+      t.disabled || a("click", d);
     };
-    return (r, u) => (n(), z(A(l.value), {
-      class: $(s.value),
+    return (d, v) => (i(), q(A(l.value), {
+      class: $(n.value),
       type: e.href || e.to ? void 0 : e.type,
       href: e.href,
       to: e.to,
@@ -106,12 +112,12 @@ const $e = /* @__PURE__ */ M({
       onClick: o
     }, {
       default: j(() => [
-        N(r.$slots, "default")
+        T(d.$slots, "default")
       ]),
       _: 3
     }, 8, ["class", "type", "href", "to", "disabled", "aria-disabled"]));
   }
-}), Ce = ["role", "aria-label"], xe = /* @__PURE__ */ M({
+}), Me = ["role", "aria-label"], Ie = /* @__PURE__ */ M({
   __name: "VibeButtonGroup",
   props: {
     size: { type: String, default: void 0 },
@@ -120,20 +126,20 @@ const $e = /* @__PURE__ */ M({
     ariaLabel: { type: String, default: void 0 }
   },
   emits: ["component-error"],
-  setup(e, { emit: v }) {
-    const t = e, a = m(() => {
+  setup(e, { emit: r }) {
+    const t = e, a = h(() => {
       const l = [t.vertical ? "btn-group-vertical" : "btn-group"];
       return t.size && l.push(`btn-group-${t.size}`), l.join(" ");
     });
-    return (l, s) => (n(), i("div", {
+    return (l, n) => (i(), s("div", {
       class: $(a.value),
       role: e.role,
       "aria-label": e.ariaLabel
     }, [
-      N(l.$slots, "default")
-    ], 10, Ce));
+      T(l.$slots, "default")
+    ], 10, Me));
   }
-}), Be = ["disabled", "aria-label"], Le = /* @__PURE__ */ M({
+}), Re = ["disabled", "aria-label"], Fe = /* @__PURE__ */ M({
   __name: "VibeCloseButton",
   props: {
     disabled: { type: Boolean, default: !1 },
@@ -141,19 +147,19 @@ const $e = /* @__PURE__ */ M({
     ariaLabel: { type: String, default: "Close" }
   },
   emits: ["click", "component-error"],
-  setup(e, { emit: v }) {
-    const t = e, a = v, l = (s) => {
-      t.disabled || a("click", s);
+  setup(e, { emit: r }) {
+    const t = e, a = r, l = (n) => {
+      t.disabled || a("click", n);
     };
-    return (s, o) => (n(), i("button", {
+    return (n, o) => (i(), s("button", {
       type: "button",
       class: $(["btn-close", { "btn-close-white": e.white }]),
       disabled: e.disabled,
       "aria-label": e.ariaLabel,
       onClick: l
-    }, null, 10, Be));
+    }, null, 10, Re));
   }
-}), Te = { class: "visually-hidden" }, Ne = /* @__PURE__ */ M({
+}), Pe = { class: "visually-hidden" }, qe = /* @__PURE__ */ M({
   __name: "VibeSpinner",
   props: {
     variant: { type: String, default: void 0 },
@@ -163,22 +169,22 @@ const $e = /* @__PURE__ */ M({
     tag: { type: String, default: "div" }
   },
   emits: ["component-error"],
-  setup(e, { emit: v }) {
-    const t = e, a = m(() => {
+  setup(e, { emit: r }) {
+    const t = e, a = h(() => {
       const l = [`spinner-${t.type}`];
       return t.variant && l.push(`text-${t.variant}`), t.size && l.push(`spinner-${t.type}-${t.size}`), l.join(" ");
     });
-    return (l, s) => (n(), z(A(e.tag), {
+    return (l, n) => (i(), q(A(e.tag), {
       class: $(a.value),
       role: "status"
     }, {
       default: j(() => [
-        S("span", Te, k(e.label), 1)
+        S("span", Pe, k(e.label), 1)
       ]),
       _: 1
     }, 8, ["class"]));
   }
-}), Ee = /* @__PURE__ */ M({
+}), ze = /* @__PURE__ */ M({
   __name: "VibePlaceholder",
   props: {
     variant: { type: String, default: void 0 },
@@ -188,49 +194,49 @@ const $e = /* @__PURE__ */ M({
     tag: { type: String, default: "span" }
   },
   emits: ["component-error"],
-  setup(e, { emit: v }) {
-    const t = e, a = m(() => {
+  setup(e, { emit: r }) {
+    const t = e, a = h(() => {
       const o = ["placeholder"];
       return t.variant && o.push(`bg-${t.variant}`), t.size && o.push(`placeholder-${t.size}`), o.join(" ");
-    }), l = m(() => {
+    }), l = h(() => {
       if (t.animation) return `placeholder-${t.animation}`;
-    }), s = m(() => {
+    }), n = h(() => {
       if (t.width)
         return { width: typeof t.width == "number" ? `${t.width}%` : t.width };
     });
-    return (o, r) => (n(), z(A(e.tag), {
+    return (o, d) => (i(), q(A(e.tag), {
       class: $(l.value)
     }, {
       default: j(() => [
         S("span", {
           class: $(a.value),
-          style: K(s.value)
+          style: Z(n.value)
         }, [
-          N(o.$slots, "default")
+          T(o.$slots, "default")
         ], 6)
       ]),
       _: 3
     }, 8, ["class"]));
   }
-}), Me = /* @__PURE__ */ M({
+}), Ae = /* @__PURE__ */ M({
   __name: "VibeContainer",
   props: {
     fluid: { type: [Boolean, String], default: !1 },
     tag: { type: String, default: "div" }
   },
   emits: ["component-error"],
-  setup(e, { emit: v }) {
-    const t = e, a = m(() => t.fluid === !1 ? "container" : t.fluid === !0 ? "container-fluid" : `container-${t.fluid}`);
-    return (l, s) => (n(), z(A(e.tag), {
+  setup(e, { emit: r }) {
+    const t = e, a = h(() => t.fluid === !1 ? "container" : t.fluid === !0 ? "container-fluid" : `container-${t.fluid}`);
+    return (l, n) => (i(), q(A(e.tag), {
       class: $(a.value)
     }, {
       default: j(() => [
-        N(l.$slots, "default")
+        T(l.$slots, "default")
       ]),
       _: 3
     }, 8, ["class"]));
   }
-}), Ie = /* @__PURE__ */ M({
+}), je = /* @__PURE__ */ M({
   __name: "VibeRow",
   props: {
     tag: { type: String, default: "div" },
@@ -266,33 +272,33 @@ const $e = /* @__PURE__ */ M({
     justifyContent: { type: String, default: void 0 }
   },
   emits: ["component-error"],
-  setup(e, { emit: v }) {
-    const t = e, a = m(() => {
+  setup(e, { emit: r }) {
+    const t = e, a = h(() => {
       const l = ["row"];
       t.gutters !== void 0 && l.push(`g-${t.gutters}`), t.guttersX !== void 0 && l.push(`gx-${t.guttersX}`), t.guttersY !== void 0 && l.push(`gy-${t.guttersY}`);
-      const s = ["sm", "md", "lg", "xl", "xxl"];
-      return s.forEach((o) => {
-        const r = o.charAt(0).toUpperCase() + o.slice(1), u = `gutters${r}`;
-        t[u] !== void 0 && l.push(`g-${o}-${t[u]}`);
-        const c = `guttersX${r}`;
+      const n = ["sm", "md", "lg", "xl", "xxl"];
+      return n.forEach((o) => {
+        const d = o.charAt(0).toUpperCase() + o.slice(1), v = `gutters${d}`;
+        t[v] !== void 0 && l.push(`g-${o}-${t[v]}`);
+        const c = `guttersX${d}`;
         t[c] !== void 0 && l.push(`gx-${o}-${t[c]}`);
-        const b = `guttersY${r}`;
-        t[b] !== void 0 && l.push(`gy-${o}-${t[b]}`);
-      }), t.rowCols !== void 0 && l.push(`row-cols-${t.rowCols}`), s.forEach((o) => {
-        const r = `rowCols${o.charAt(0).toUpperCase() + o.slice(1)}`;
-        t[r] !== void 0 && l.push(`row-cols-${o}-${t[r]}`);
+        const m = `guttersY${d}`;
+        t[m] !== void 0 && l.push(`gy-${o}-${t[m]}`);
+      }), t.rowCols !== void 0 && l.push(`row-cols-${t.rowCols}`), n.forEach((o) => {
+        const d = `rowCols${o.charAt(0).toUpperCase() + o.slice(1)}`;
+        t[d] !== void 0 && l.push(`row-cols-${o}-${t[d]}`);
       }), t.alignItems && l.push(`align-items-${t.alignItems}`), t.justifyContent && l.push(`justify-content-${t.justifyContent}`), l.join(" ");
     });
-    return (l, s) => (n(), z(A(e.tag), {
+    return (l, n) => (i(), q(A(e.tag), {
       class: $(a.value)
     }, {
       default: j(() => [
-        N(l.$slots, "default")
+        T(l.$slots, "default")
       ]),
       _: 3
     }, 8, ["class"]));
   }
-}), Fe = /* @__PURE__ */ M({
+}), Oe = /* @__PURE__ */ M({
   __name: "VibeCol",
   props: {
     tag: { type: String, default: "div" },
@@ -321,8 +327,8 @@ const $e = /* @__PURE__ */ M({
     alignSelf: { type: String, default: void 0 }
   },
   emits: ["component-error"],
-  setup(e, { emit: v }) {
-    const t = e, a = m(() => {
+  setup(e, { emit: r }) {
+    const t = e, a = h(() => {
       const l = [];
       return t.cols !== void 0 || t.sm !== void 0 || t.md !== void 0 || t.lg !== void 0 || t.xl !== void 0 || t.xxl !== void 0 ? (t.cols === !0 ? l.push("col") : t.cols === "auto" ? l.push("col-auto") : t.cols && l.push(`col-${t.cols}`), [
         { name: "sm", value: t.sm },
@@ -330,35 +336,35 @@ const $e = /* @__PURE__ */ M({
         { name: "lg", value: t.lg },
         { name: "xl", value: t.xl },
         { name: "xxl", value: t.xxl }
-      ].forEach(({ name: r, value: u }) => {
-        u === !0 ? l.push(`col-${r}`) : u === "auto" ? l.push(`col-${r}-auto`) : u !== void 0 && l.push(`col-${r}-${u}`);
+      ].forEach(({ name: d, value: v }) => {
+        v === !0 ? l.push(`col-${d}`) : v === "auto" ? l.push(`col-${d}-auto`) : v !== void 0 && l.push(`col-${d}-${v}`);
       })) : l.push("col"), t.offset !== void 0 && l.push(`offset-${t.offset}`), t.offsetSm !== void 0 && l.push(`offset-sm-${t.offsetSm}`), t.offsetMd !== void 0 && l.push(`offset-md-${t.offsetMd}`), t.offsetLg !== void 0 && l.push(`offset-lg-${t.offsetLg}`), t.offsetXl !== void 0 && l.push(`offset-xl-${t.offsetXl}`), t.offsetXxl !== void 0 && l.push(`offset-xxl-${t.offsetXxl}`), t.order !== void 0 && l.push(`order-${t.order}`), t.orderSm !== void 0 && l.push(`order-sm-${t.orderSm}`), t.orderMd !== void 0 && l.push(`order-md-${t.orderMd}`), t.orderLg !== void 0 && l.push(`order-lg-${t.orderLg}`), t.orderXl !== void 0 && l.push(`order-xl-${t.orderXl}`), t.orderXxl !== void 0 && l.push(`order-xxl-${t.orderXxl}`), t.alignSelf && l.push(`align-self-${t.alignSelf}`), l.join(" ");
     });
-    return (l, s) => (n(), z(A(e.tag), {
+    return (l, n) => (i(), q(A(e.tag), {
       class: $(a.value)
     }, {
       default: j(() => [
-        N(l.$slots, "default")
+        T(l.$slots, "default")
       ]),
       _: 3
     }, 8, ["class"]));
   }
-}), Pe = ["src", "alt"], Re = {
+}), He = ["src", "alt"], De = {
   key: 1,
   class: "card-header"
-}, qe = {
+}, Ge = {
   key: 2,
   class: "card-body"
-}, ze = {
+}, Xe = {
   key: 0,
   class: "card-title"
-}, Ae = {
+}, Ye = {
   key: 1,
   class: "card-text"
-}, je = {
+}, Ue = {
   key: 3,
   class: "card-footer"
-}, Oe = ["src", "alt"], He = /* @__PURE__ */ M({
+}, Je = ["src", "alt"], Ke = /* @__PURE__ */ M({
   __name: "VibeCard",
   props: {
     variant: { type: String, default: void 0 },
@@ -377,98 +383,98 @@ const $e = /* @__PURE__ */ M({
     imgBottom: { type: Boolean, default: !1 }
   },
   emits: ["component-error"],
-  setup(e, { emit: v }) {
-    const t = e, a = m(() => {
+  setup(e, { emit: r }) {
+    const t = e, a = h(() => {
       const l = ["card"];
       return t.variant && l.push(`text-bg-${t.variant}`), t.border && l.push(`border-${t.border}`), t.textVariant && l.push(`text-${t.textVariant}`), l.join(" ");
     });
-    return (l, s) => (n(), z(A(e.tag), {
+    return (l, n) => (i(), q(A(e.tag), {
       class: $(a.value)
     }, {
       default: j(() => [
-        e.imgSrc && e.imgTop ? (n(), i("img", {
+        e.imgSrc && e.imgTop ? (i(), s("img", {
           key: 0,
           src: e.imgSrc,
           alt: e.imgAlt,
           class: "card-img-top"
-        }, null, 8, Pe)) : y("", !0),
-        e.header || l.$slots.header ? (n(), i("div", Re, [
-          N(l.$slots, "header", {}, () => [
+        }, null, 8, He)) : g("", !0),
+        e.header || l.$slots.header ? (i(), s("div", De, [
+          T(l.$slots, "header", {}, () => [
             I(k(e.header), 1)
           ])
-        ])) : y("", !0),
-        e.title || e.body || l.$slots.default || l.$slots.body ? (n(), i("div", qe, [
-          e.title || l.$slots.title ? (n(), i("h5", ze, [
-            N(l.$slots, "title", {}, () => [
+        ])) : g("", !0),
+        e.title || e.body || l.$slots.default || l.$slots.body ? (i(), s("div", Ge, [
+          e.title || l.$slots.title ? (i(), s("h5", Xe, [
+            T(l.$slots, "title", {}, () => [
               I(k(e.title), 1)
             ])
-          ])) : y("", !0),
-          e.body || l.$slots.body ? (n(), i("p", Ae, [
-            N(l.$slots, "body", {}, () => [
+          ])) : g("", !0),
+          e.body || l.$slots.body ? (i(), s("p", Ye, [
+            T(l.$slots, "body", {}, () => [
               I(k(e.body), 1)
             ])
-          ])) : y("", !0),
-          N(l.$slots, "default")
-        ])) : y("", !0),
-        e.footer || l.$slots.footer ? (n(), i("div", je, [
-          N(l.$slots, "footer", {}, () => [
+          ])) : g("", !0),
+          T(l.$slots, "default")
+        ])) : g("", !0),
+        e.footer || l.$slots.footer ? (i(), s("div", Ue, [
+          T(l.$slots, "footer", {}, () => [
             I(k(e.footer), 1)
           ])
-        ])) : y("", !0),
-        e.imgSrc && e.imgBottom ? (n(), i("img", {
+        ])) : g("", !0),
+        e.imgSrc && e.imgBottom ? (i(), s("img", {
           key: 4,
           src: e.imgSrc,
           alt: e.imgAlt,
           class: "card-img-bottom"
-        }, null, 8, Oe)) : y("", !0)
+        }, null, 8, Je)) : g("", !0)
       ]),
       _: 3
     }, 8, ["class"]));
   }
-}), De = ["aria-label"], Ge = { class: "breadcrumb" }, Xe = ["aria-current"], Ye = /* @__PURE__ */ M({
+}), We = ["aria-label"], Qe = { class: "breadcrumb" }, Ze = ["aria-current"], _e = /* @__PURE__ */ M({
   __name: "VibeBreadcrumb",
   props: {
     ariaLabel: { type: String, default: "breadcrumb" },
     items: { type: Array, required: !0 }
   },
   emits: ["item-click", "component-error"],
-  setup(e, { emit: v }) {
-    const t = v, a = (l, s, o) => {
-      l.active || t("item-click", { item: l, index: s, event: o });
+  setup(e, { emit: r }) {
+    const t = r, a = (l, n, o) => {
+      l.active || t("item-click", { item: l, index: n, event: o });
     };
-    return (l, s) => (n(), i("nav", { "aria-label": e.ariaLabel }, [
-      S("ol", Ge, [
-        (n(!0), i(F, null, H(e.items, (o, r) => (n(), i("li", {
-          key: r,
+    return (l, n) => (i(), s("nav", { "aria-label": e.ariaLabel }, [
+      S("ol", Qe, [
+        (i(!0), s(R, null, H(e.items, (o, d) => (i(), s("li", {
+          key: d,
           class: $(["breadcrumb-item", { active: o.active }]),
           "aria-current": o.active ? "page" : void 0
         }, [
-          (n(), z(A(o.href ? "a" : o.to ? "router-link" : "span"), {
+          (i(), q(A(o.href ? "a" : o.to ? "router-link" : "span"), {
             href: o.href,
             to: o.to,
-            onClick: (u) => a(o, r, u)
+            onClick: (v) => a(o, d, v)
           }, {
             default: j(() => [
-              N(l.$slots, "item", {
+              T(l.$slots, "item", {
                 item: o,
-                index: r
+                index: d
               }, () => [
                 I(k(o.text), 1)
               ])
             ]),
             _: 2
           }, 1032, ["href", "to", "onClick"]))
-        ], 10, Xe))), 128))
+        ], 10, Ze))), 128))
       ])
-    ], 8, De));
+    ], 8, We));
   }
-}), Ue = { class: "dropdown-menu" }, Je = {
+}), et = { class: "dropdown-menu" }, tt = {
   key: 0,
   class: "dropdown-divider"
-}, Ke = {
+}, at = {
   key: 1,
   class: "dropdown-header"
-}, Qe = /* @__PURE__ */ M({
+}, lt = /* @__PURE__ */ M({
   __name: "VibeNav",
   props: {
     items: { type: Array, required: !0 },
@@ -477,89 +483,90 @@ const $e = /* @__PURE__ */ M({
     vertical: { type: Boolean, default: !1 },
     justified: { type: Boolean, default: !1 },
     fill: { type: Boolean, default: !1 },
+    underline: { type: Boolean, default: !1 },
     tag: { type: String, default: "ul" }
   },
   emits: ["item-click", "show", "shown", "hide", "hidden", "component-error"],
-  setup(e, { expose: v, emit: t }) {
-    const a = e, l = t, s = E(null), o = /* @__PURE__ */ new Map(), r = m(() => {
-      const d = ["nav"];
-      return a.pills && d.push("nav-pills"), a.tabs && d.push("nav-tabs"), a.vertical && d.push("flex-column"), a.justified && d.push("nav-justified"), a.fill && d.push("nav-fill"), d.join(" ");
-    }), u = (d) => l("show", d), c = (d) => l("shown", d), b = (d) => l("hide", d), g = (d) => l("hidden", d), C = async () => {
-      if (s.value)
+  setup(e, { expose: r, emit: t }) {
+    const a = e, l = t, n = L(null), o = /* @__PURE__ */ new Map(), d = h(() => {
+      const u = ["nav"];
+      return a.pills && u.push("nav-pills"), a.tabs && u.push("nav-tabs"), a.vertical && u.push("flex-column"), a.justified && u.push("nav-justified"), a.fill && u.push("nav-fill"), a.underline && u.push("nav-underline"), u.join(" ");
+    }), v = (u) => l("show", u), c = (u) => l("shown", u), m = (u) => l("hide", u), f = (u) => l("hidden", u), V = async () => {
+      if (n.value)
         try {
-          const f = (await import("bootstrap")).Tab;
-          s.value.querySelectorAll('[data-bs-toggle="tab"], [data-bs-toggle="pill"]').forEach((w) => {
-            const x = w;
-            if (!o.has(x)) {
-              const V = new f(x);
-              o.set(x, V), x.addEventListener("show.bs.tab", u), x.addEventListener("shown.bs.tab", c), x.addEventListener("hide.bs.tab", b), x.addEventListener("hidden.bs.tab", g);
+          const b = (await import("bootstrap")).Tab;
+          n.value.querySelectorAll('[data-bs-toggle="tab"], [data-bs-toggle="pill"]').forEach((w) => {
+            const B = w;
+            if (!o.has(B)) {
+              const C = new b(B);
+              o.set(B, C), B.addEventListener("show.bs.tab", v), B.addEventListener("shown.bs.tab", c), B.addEventListener("hide.bs.tab", m), B.addEventListener("hidden.bs.tab", f);
             }
           });
-        } catch (d) {
+        } catch (u) {
           l("component-error", {
             message: "Bootstrap JS not loaded. Nav will use basic Vue logic.",
             componentName: "VibeNav",
-            originalError: d
+            originalError: u
           });
         }
     };
-    Y(C), X(() => {
-      o.forEach((d, f) => {
-        f.removeEventListener("show.bs.tab", u), f.removeEventListener("shown.bs.tab", c), f.removeEventListener("hide.bs.tab", b), f.removeEventListener("hidden.bs.tab", g), d.dispose();
+    X(V), Y(() => {
+      o.forEach((u, b) => {
+        b.removeEventListener("show.bs.tab", v), b.removeEventListener("shown.bs.tab", c), b.removeEventListener("hide.bs.tab", m), b.removeEventListener("hidden.bs.tab", f), u.dispose();
       }), o.clear();
     }), O(() => a.items, async () => {
-      await ne(), await C();
+      await se(), await V();
     }, { deep: !0 });
-    const p = (d, f, h) => {
-      d.disabled || l("item-click", { item: d, index: f, event: h });
+    const y = (u, b, p) => {
+      u.disabled || l("item-click", { item: u, index: b, event: p });
     };
-    return v({ bsInstances: o, refresh: C }), (d, f) => (n(), z(A(e.tag), {
+    return r({ bsInstances: o, refresh: V }), (u, b) => (i(), q(A(e.tag), {
       ref_key: "navRef",
-      ref: s,
-      class: $(r.value)
+      ref: n,
+      class: $(d.value)
     }, {
       default: j(() => [
-        (n(!0), i(F, null, H(e.items, (h, w) => (n(), i("li", {
+        (i(!0), s(R, null, H(e.items, (p, w) => (i(), s("li", {
           key: w,
-          class: $(["nav-item", { dropdown: h.children && h.children.length > 0 }])
+          class: $(["nav-item", { dropdown: p.children && p.children.length > 0 }])
         }, [
-          h.children && h.children.length > 0 ? (n(), i(F, { key: 0 }, [
+          p.children && p.children.length > 0 ? (i(), s(R, { key: 0 }, [
             S("a", {
-              class: $(["nav-link dropdown-toggle", { active: h.active, disabled: h.disabled }]),
+              class: $(["nav-link dropdown-toggle", { active: p.active, disabled: p.disabled }]),
               "data-bs-toggle": "dropdown",
               href: "#",
               role: "button",
               "aria-expanded": "false"
-            }, k(h.text), 3),
-            S("ul", Ue, [
-              (n(!0), i(F, null, H(h.children, (x, V) => (n(), i("li", { key: V }, [
-                x.divider ? (n(), i("hr", Je)) : x.header ? (n(), i("h6", Ke, k(x.text), 1)) : (n(), z(A(x.href ? "a" : x.to ? "router-link" : "button"), {
+            }, k(p.text), 3),
+            S("ul", et, [
+              (i(!0), s(R, null, H(p.children, (B, C) => (i(), s("li", { key: C }, [
+                B.divider ? (i(), s("hr", tt)) : B.header ? (i(), s("h6", at, k(B.text), 1)) : (i(), q(A(B.href ? "a" : B.to ? "router-link" : "button"), {
                   key: 2,
-                  class: $(["dropdown-item", { active: x.active, disabled: x.disabled }]),
-                  href: x.href,
-                  to: x.to,
-                  type: !x.href && !x.to ? "button" : void 0
+                  class: $(["dropdown-item", { active: B.active, disabled: B.disabled }]),
+                  href: B.href,
+                  to: B.to,
+                  type: !B.href && !B.to ? "button" : void 0
                 }, {
                   default: j(() => [
-                    I(k(x.text), 1)
+                    I(k(B.text), 1)
                   ]),
                   _: 2
                 }, 1032, ["class", "href", "to", "type"]))
               ]))), 128))
             ])
-          ], 64)) : (n(), z(A(h.href ? "a" : h.to ? "router-link" : "button"), {
+          ], 64)) : (i(), q(A(p.href ? "a" : p.to ? "router-link" : "button"), {
             key: 1,
-            class: $(["nav-link", { active: h.active, disabled: h.disabled }]),
-            href: h.href,
-            to: h.to,
-            type: !h.href && !h.to ? "button" : void 0,
-            "aria-current": h.active ? "page" : void 0,
-            "data-bs-toggle": (e.tabs || e.pills) && h.href && h.href.startsWith("#") ? e.tabs ? "tab" : "pill" : void 0,
-            "data-bs-target": h.href && h.href.startsWith("#") ? h.href : void 0,
-            onClick: (x) => p(h, w, x)
+            class: $(["nav-link", { active: p.active, disabled: p.disabled }]),
+            href: p.href,
+            to: p.to,
+            type: !p.href && !p.to ? "button" : void 0,
+            "aria-current": p.active ? "page" : void 0,
+            "data-bs-toggle": (e.tabs || e.pills) && p.href && p.href.startsWith("#") ? e.tabs ? "tab" : "pill" : void 0,
+            "data-bs-target": p.href && p.href.startsWith("#") ? p.href : void 0,
+            onClick: (B) => y(p, w, B)
           }, {
             default: j(() => [
-              I(k(h.text), 1)
+              I(k(p.text), 1)
             ]),
             _: 2
           }, 1032, ["class", "href", "to", "type", "aria-current", "data-bs-toggle", "data-bs-target", "onClick"]))
@@ -568,7 +575,7 @@ const $e = /* @__PURE__ */ M({
       _: 1
     }, 8, ["class"]));
   }
-}), We = /* @__PURE__ */ M({
+}), ot = /* @__PURE__ */ M({
   __name: "VibeNavbar",
   props: {
     variant: { type: String, default: "light" },
@@ -579,66 +586,71 @@ const $e = /* @__PURE__ */ M({
     tag: { type: String, default: "nav" }
   },
   emits: ["component-error"],
-  setup(e, { emit: v }) {
-    const t = e, a = pe({});
-    ve("vibeNavbarCollapse", { collapseStates: a, toggleCollapse: (u) => {
-      a[u] = !a[u];
+  setup(e, { emit: r }) {
+    const t = e, a = Ce({});
+    ge("vibeNavbarCollapse", { collapseStates: a, toggleCollapse: (v) => {
+      a[v] = !a[v];
     } });
-    const s = m(() => {
-      const u = ["navbar"];
-      return t.expand === !0 ? u.push("navbar-expand") : typeof t.expand == "string" && u.push(`navbar-expand-${t.expand}`), u.push(`bg-${t.variant}`), t.position && u.push(t.position), u.join(" ");
-    }), o = m(() => {
+    const n = h(() => {
+      const v = ["navbar"];
+      return t.expand === !0 ? v.push("navbar-expand") : typeof t.expand == "string" && v.push(`navbar-expand-${t.expand}`), v.push(`bg-${t.variant}`), t.position && v.push(t.position), v.join(" ");
+    }), o = h(() => {
       if (t.theme) return t.theme;
       if (t.variant === "dark") return "dark";
       if (t.variant === "light") return "light";
-    }), r = m(() => {
+    }), d = h(() => {
       if (t.container !== !1)
         return t.container === !0 ? "container-fluid" : `container-${t.container}`;
     });
-    return (u, c) => (n(), z(A(e.tag), {
-      class: $(s.value),
+    return (v, c) => (i(), q(A(e.tag), {
+      class: $(n.value),
       "data-bs-theme": o.value
     }, {
       default: j(() => [
-        r.value ? (n(), i("div", {
+        d.value ? (i(), s("div", {
           key: 0,
-          class: $(r.value)
+          class: $(d.value)
         }, [
-          N(u.$slots, "default")
-        ], 2)) : N(u.$slots, "default", { key: 1 })
+          T(v.$slots, "default", {}, void 0, !0)
+        ], 2)) : T(v.$slots, "default", { key: 1 }, void 0, !0)
       ]),
       _: 3
     }, 8, ["class", "data-bs-theme"]));
   }
-}), Ze = /* @__PURE__ */ M({
+}), ae = (e, r) => {
+  const t = e.__vccOpts || e;
+  for (const [a, l] of r)
+    t[a] = l;
+  return t;
+}, nt = /* @__PURE__ */ ae(ot, [["__scopeId", "data-v-8228b170"]]), it = /* @__PURE__ */ M({
   __name: "VibeNavbarBrand",
   props: {
     href: { type: String, default: void 0 },
     to: { type: [String, Object], default: void 0 }
   },
   emits: ["component-error"],
-  setup(e, { emit: v }) {
+  setup(e, { emit: r }) {
     const t = e, a = t.href ? "a" : t.to ? "router-link" : "span";
-    return (l, s) => (n(), z(A(ye(a)), {
+    return (l, n) => (i(), q(A(xe(a)), {
       class: "navbar-brand",
       href: e.href,
       to: e.to
     }, {
       default: j(() => [
-        N(l.$slots, "default")
+        T(l.$slots, "default")
       ]),
       _: 3
     }, 8, ["href", "to"]));
   }
-}), _e = ["data-bs-target", "aria-controls", "aria-expanded", "aria-label"], et = /* @__PURE__ */ M({
+}), st = ["data-bs-target", "aria-controls", "aria-expanded", "aria-label"], rt = /* @__PURE__ */ M({
   __name: "VibeNavbarToggle",
   props: {
     target: { type: String, required: !0 },
     ariaLabel: { type: String, default: "Toggle navigation" }
   },
   emits: ["component-error"],
-  setup(e, { emit: v }) {
-    const t = e, a = J("vibeNavbarCollapse", null), l = m(() => a?.collapseStates[t.target] ?? !1), s = async () => {
+  setup(e, { emit: r }) {
+    const t = e, a = J("vibeNavbarCollapse", null), l = h(() => a?.collapseStates[t.target] ?? !1), n = async () => {
       a && a.toggleCollapse(t.target);
       try {
         const o = document.getElementById(t.target);
@@ -646,7 +658,7 @@ const $e = /* @__PURE__ */ M({
       } catch {
       }
     };
-    return (o, r) => (n(), i("button", {
+    return (o, d) => (i(), s("button", {
       class: "navbar-toggler",
       type: "button",
       "data-bs-target": `#${e.target}`,
@@ -654,76 +666,76 @@ const $e = /* @__PURE__ */ M({
       "aria-controls": e.target,
       "aria-expanded": l.value,
       "aria-label": e.ariaLabel,
-      onClick: s
-    }, [...r[0] || (r[0] = [
+      onClick: n
+    }, [...d[0] || (d[0] = [
       S("span", { class: "navbar-toggler-icon" }, null, -1)
-    ])], 8, _e));
+    ])], 8, st));
   }
-}), tt = { class: "dropdown-menu" }, at = { key: 0 }, lt = { key: 1 }, ot = { class: "dropdown-header" }, st = { key: 2 }, nt = /* @__PURE__ */ M({
+}), dt = { class: "dropdown-menu" }, ut = { key: 0 }, ct = { key: 1 }, vt = { class: "dropdown-header" }, ft = { key: 2 }, bt = /* @__PURE__ */ M({
   __name: "VibeNavbarNav",
   props: {
     tag: { type: String, default: "ul" },
     items: { type: Array, default: void 0 }
   },
   emits: ["item-click", "dropdown-item-click", "component-error"],
-  setup(e, { emit: v }) {
-    const t = v, a = (c) => {
-      const b = ["nav-item"];
-      return c.children?.length && b.push("dropdown"), b.join(" ");
+  setup(e, { emit: r }) {
+    const t = r, a = (c) => {
+      const m = ["nav-item"];
+      return c.children?.length && m.push("dropdown"), m.join(" ");
     }, l = (c) => {
-      const b = ["nav-link"];
-      return c.active && b.push("active"), c.disabled && b.push("disabled"), c.children?.length && b.push("dropdown-toggle"), b.join(" ");
-    }, s = (c) => c.href ? "a" : c.to ? "router-link" : "a", o = (c) => {
-      const b = ["dropdown-item"];
-      return c.active && b.push("active"), c.disabled && b.push("disabled"), b.join(" ");
-    }, r = (c, b, g) => {
-      c.disabled || t("item-click", { item: c, index: b, event: g });
-    }, u = (c, b, g, C, p) => {
-      !g.disabled && !g.divider && !g.header && t("dropdown-item-click", { item: c, itemIndex: b, child: g, childIndex: C, event: p });
+      const m = ["nav-link"];
+      return c.active && m.push("active"), c.disabled && m.push("disabled"), c.children?.length && m.push("dropdown-toggle"), m.join(" ");
+    }, n = (c) => c.href ? "a" : c.to ? "router-link" : "a", o = (c) => {
+      const m = ["dropdown-item"];
+      return c.active && m.push("active"), c.disabled && m.push("disabled"), m.join(" ");
+    }, d = (c, m, f) => {
+      c.disabled || t("item-click", { item: c, index: m, event: f });
+    }, v = (c, m, f, V, y) => {
+      !f.disabled && !f.divider && !f.header && t("dropdown-item-click", { item: c, itemIndex: m, child: f, childIndex: V, event: y });
     };
-    return (c, b) => (n(), z(A(e.tag), { class: "navbar-nav" }, {
+    return (c, m) => (i(), q(A(e.tag), { class: "navbar-nav" }, {
       default: j(() => [
-        e.items && e.items.length > 0 ? (n(!0), i(F, { key: 0 }, H(e.items, (g, C) => (n(), i("li", {
-          key: C,
-          class: $(a(g))
+        e.items && e.items.length > 0 ? (i(!0), s(R, { key: 0 }, H(e.items, (f, V) => (i(), s("li", {
+          key: V,
+          class: $(a(f))
         }, [
-          g.children?.length ? (n(), i(F, { key: 0 }, [
+          f.children?.length ? (i(), s(R, { key: 0 }, [
             S("a", {
-              class: $(l(g)),
+              class: $(l(f)),
               href: "#",
               role: "button",
               "data-bs-toggle": "dropdown",
               "aria-expanded": "false"
             }, [
-              N(c.$slots, "item", {
-                item: g,
-                index: C
+              T(c.$slots, "item", {
+                item: f,
+                index: V
               }, () => [
-                I(k(g.text), 1)
+                I(k(f.text), 1)
               ])
             ], 2),
-            S("ul", tt, [
-              (n(!0), i(F, null, H(g.children, (p, d) => (n(), i(F, { key: d }, [
-                p.divider ? (n(), i("li", at, [...b[0] || (b[0] = [
+            S("ul", dt, [
+              (i(!0), s(R, null, H(f.children, (y, u) => (i(), s(R, { key: u }, [
+                y.divider ? (i(), s("li", ut, [...m[0] || (m[0] = [
                   S("hr", { class: "dropdown-divider" }, null, -1)
-                ])])) : p.header ? (n(), i("li", lt, [
-                  S("h6", ot, k(p.text), 1)
-                ])) : (n(), i("li", st, [
-                  (n(), z(A(p.href ? "a" : p.to ? "router-link" : "button"), {
-                    class: $(o(p)),
-                    href: p.href,
-                    to: p.to,
-                    type: !p.href && !p.to ? "button" : void 0,
-                    onClick: (f) => u(g, C, p, d, f)
+                ])])) : y.header ? (i(), s("li", ct, [
+                  S("h6", vt, k(y.text), 1)
+                ])) : (i(), s("li", ft, [
+                  (i(), q(A(y.href ? "a" : y.to ? "router-link" : "button"), {
+                    class: $(o(y)),
+                    href: y.href,
+                    to: y.to,
+                    type: !y.href && !y.to ? "button" : void 0,
+                    onClick: (b) => v(f, V, y, u, b)
                   }, {
                     default: j(() => [
-                      N(c.$slots, "dropdown-item", {
-                        item: g,
-                        child: p,
-                        index: C,
-                        childIndex: d
+                      T(c.$slots, "dropdown-item", {
+                        item: f,
+                        child: y,
+                        index: V,
+                        childIndex: u
                       }, () => [
-                        I(k(p.text), 1)
+                        I(k(y.text), 1)
                       ])
                     ]),
                     _: 2
@@ -731,31 +743,31 @@ const $e = /* @__PURE__ */ M({
                 ]))
               ], 64))), 128))
             ])
-          ], 64)) : (n(), z(A(s(g)), {
+          ], 64)) : (i(), q(A(n(f)), {
             key: 1,
-            class: $(l(g)),
-            href: g.href,
-            to: g.to,
-            "aria-current": g.active ? "page" : void 0,
-            "aria-disabled": g.disabled,
-            onClick: (p) => r(g, C, p)
+            class: $(l(f)),
+            href: f.href,
+            to: f.to,
+            "aria-current": f.active ? "page" : void 0,
+            "aria-disabled": f.disabled,
+            onClick: (y) => d(f, V, y)
           }, {
             default: j(() => [
-              N(c.$slots, "item", {
-                item: g,
-                index: C
+              T(c.$slots, "item", {
+                item: f,
+                index: V
               }, () => [
-                I(k(g.text), 1)
+                I(k(f.text), 1)
               ])
             ]),
             _: 2
           }, 1032, ["class", "href", "to", "aria-current", "aria-disabled", "onClick"]))
-        ], 2))), 128)) : N(c.$slots, "default", { key: 1 })
+        ], 2))), 128)) : T(c.$slots, "default", { key: 1 })
       ]),
       _: 3
     }));
   }
-}), it = ["aria-label"], rt = ["disabled", "aria-disabled"], dt = ["aria-current", "onClick"], ut = ["disabled", "aria-disabled"], ct = /* @__PURE__ */ M({
+}), ht = ["aria-label"], pt = ["disabled", "aria-disabled"], mt = ["aria-current", "onClick"], yt = ["disabled", "aria-disabled"], gt = /* @__PURE__ */ M({
   __name: "VibePagination",
   props: {
     size: { type: String, default: void 0 },
@@ -767,71 +779,71 @@ const $e = /* @__PURE__ */ M({
     nextText: { type: String, default: "Next" }
   },
   emits: ["update:currentPage", "page-click", "component-error"],
-  setup(e, { emit: v }) {
-    const t = e, a = v, l = m(() => {
+  setup(e, { emit: r }) {
+    const t = e, a = r, l = h(() => {
       const c = ["pagination"];
       return t.size && c.push(`pagination-${t.size}`), c.join(" ");
-    }), s = m(() => Array.from({ length: t.totalPages }, (c, b) => b + 1)), o = (c) => {
+    }), n = h(() => Array.from({ length: t.totalPages }, (c, m) => m + 1)), o = (c) => {
       c >= 1 && c <= t.totalPages && (a("update:currentPage", c), a("page-click", c));
-    }, r = m(() => t.currentPage === 1), u = m(() => t.currentPage === t.totalPages);
-    return (c, b) => (n(), i("nav", { "aria-label": e.ariaLabel }, [
+    }, d = h(() => t.currentPage === 1), v = h(() => t.currentPage === t.totalPages);
+    return (c, m) => (i(), s("nav", { "aria-label": e.ariaLabel }, [
       S("ul", {
         class: $(l.value)
       }, [
-        e.showPrevNext ? (n(), i("li", {
+        e.showPrevNext ? (i(), s("li", {
           key: 0,
-          class: $(["page-item", { disabled: r.value }])
+          class: $(["page-item", { disabled: d.value }])
         }, [
           S("button", {
             class: "page-link",
             type: "button",
-            disabled: r.value,
-            "aria-disabled": r.value,
-            onClick: b[0] || (b[0] = (g) => o(e.currentPage - 1))
+            disabled: d.value,
+            "aria-disabled": d.value,
+            onClick: m[0] || (m[0] = (f) => o(e.currentPage - 1))
           }, [
-            N(c.$slots, "prev", { disabled: r.value }, () => [
+            T(c.$slots, "prev", { disabled: d.value }, () => [
               I(k(e.prevText), 1)
             ])
-          ], 8, rt)
-        ], 2)) : y("", !0),
-        (n(!0), i(F, null, H(s.value, (g) => (n(), i("li", {
-          key: g,
-          class: $(["page-item", { active: g === e.currentPage }])
+          ], 8, pt)
+        ], 2)) : g("", !0),
+        (i(!0), s(R, null, H(n.value, (f) => (i(), s("li", {
+          key: f,
+          class: $(["page-item", { active: f === e.currentPage }])
         }, [
           S("button", {
             class: "page-link",
             type: "button",
-            "aria-current": g === e.currentPage ? "page" : void 0,
-            onClick: (C) => o(g)
+            "aria-current": f === e.currentPage ? "page" : void 0,
+            onClick: (V) => o(f)
           }, [
-            N(c.$slots, "page", {
-              page: g,
-              active: g === e.currentPage
+            T(c.$slots, "page", {
+              page: f,
+              active: f === e.currentPage
             }, () => [
-              I(k(g), 1)
+              I(k(f), 1)
             ])
-          ], 8, dt)
+          ], 8, mt)
         ], 2))), 128)),
-        e.showPrevNext ? (n(), i("li", {
+        e.showPrevNext ? (i(), s("li", {
           key: 1,
-          class: $(["page-item", { disabled: u.value }])
+          class: $(["page-item", { disabled: v.value }])
         }, [
           S("button", {
             class: "page-link",
             type: "button",
-            disabled: u.value,
-            "aria-disabled": u.value,
-            onClick: b[1] || (b[1] = (g) => o(e.currentPage + 1))
+            disabled: v.value,
+            "aria-disabled": v.value,
+            onClick: m[1] || (m[1] = (f) => o(e.currentPage + 1))
           }, [
-            N(c.$slots, "next", { disabled: u.value }, () => [
+            T(c.$slots, "next", { disabled: v.value }, () => [
               I(k(e.nextText), 1)
             ])
-          ], 8, ut)
-        ], 2)) : y("", !0)
+          ], 8, yt)
+        ], 2)) : g("", !0)
       ], 2)
-    ], 8, it));
+    ], 8, ht));
   }
-}), vt = ["id", "aria-labelledby"], ft = /* @__PURE__ */ M({
+}), kt = ["id", "aria-labelledby"], St = /* @__PURE__ */ M({
   __name: "VibeTabContent",
   props: {
     id: { type: String, default: void 0 },
@@ -840,46 +852,46 @@ const $e = /* @__PURE__ */ M({
     fade: { type: Boolean, default: !0 }
   },
   emits: ["component-error", "shown", "hide", "hidden"],
-  setup(e, { emit: v }) {
-    const t = e, a = E(null), l = /* @__PURE__ */ new Map(), s = (o) => {
-      const r = ["tab-pane"];
-      return t.fade && r.push("fade"), o.active && r.push("show", "active"), r.join(" ");
+  setup(e, { emit: r }) {
+    const t = e, a = L(null), l = /* @__PURE__ */ new Map(), n = (o) => {
+      const d = ["tab-pane"];
+      return t.fade && d.push("fade"), o.active && d.push("show", "active"), d.join(" ");
     };
-    return Y(async () => {
+    return X(async () => {
       if (a.value)
         try {
-          const r = (await import("bootstrap")).Tab;
+          const d = (await import("bootstrap")).Tab;
         } catch {
         }
-    }), X(() => {
+    }), Y(() => {
       l.forEach((o) => o.dispose()), l.clear();
-    }), (o, r) => (n(), z(A(e.tag), {
+    }), (o, d) => (i(), q(A(e.tag), {
       id: e.id,
       ref_key: "tabContentRef",
       ref: a,
       class: "tab-content"
     }, {
       default: j(() => [
-        (n(!0), i(F, null, H(e.panes, (u, c) => (n(), i("div", {
-          key: u.id,
-          id: u.id,
-          class: $(s(u)),
+        (i(!0), s(R, null, H(e.panes, (v, c) => (i(), s("div", {
+          key: v.id,
+          id: v.id,
+          class: $(n(v)),
           role: "tabpanel",
-          "aria-labelledby": `${u.id}-tab`,
+          "aria-labelledby": `${v.id}-tab`,
           tabindex: "0"
         }, [
-          N(o.$slots, "pane", {
-            pane: u,
+          T(o.$slots, "pane", {
+            pane: v,
             index: c
           }, () => [
-            I(k(u.content), 1)
+            I(k(v.content), 1)
           ])
-        ], 10, vt))), 128))
+        ], 10, kt))), 128))
       ]),
       _: 3
     }, 8, ["id"]));
   }
-}), bt = /* @__PURE__ */ M({
+}), $t = /* @__PURE__ */ M({
   __name: "VibeListGroup",
   props: {
     flush: { type: Boolean, default: !1 },
@@ -889,35 +901,35 @@ const $e = /* @__PURE__ */ M({
     items: { type: Array, required: !0 }
   },
   emits: ["item-click", "component-error"],
-  setup(e, { emit: v }) {
-    const t = e, a = v, l = m(() => {
-      const u = ["list-group"];
-      return t.flush && u.push("list-group-flush"), t.numbered && u.push("list-group-numbered"), t.horizontal === !0 ? u.push("list-group-horizontal") : typeof t.horizontal == "string" && u.push(`list-group-horizontal-${t.horizontal}`), u.join(" ");
-    }), s = (u) => u.href ? "a" : u.to ? "router-link" : "li", o = (u) => {
+  setup(e, { emit: r }) {
+    const t = e, a = r, l = h(() => {
+      const v = ["list-group"];
+      return t.flush && v.push("list-group-flush"), t.numbered && v.push("list-group-numbered"), t.horizontal === !0 ? v.push("list-group-horizontal") : typeof t.horizontal == "string" && v.push(`list-group-horizontal-${t.horizontal}`), v.join(" ");
+    }), n = (v) => v.href ? "a" : v.to ? "router-link" : "li", o = (v) => {
       const c = ["list-group-item"];
-      return u.active && c.push("active"), u.disabled && c.push("disabled"), u.variant && c.push(`list-group-item-${u.variant}`), c.join(" ");
-    }, r = (u, c, b) => {
-      u.disabled || a("item-click", { item: u, index: c, event: b });
+      return v.active && c.push("active"), v.disabled && c.push("disabled"), v.variant && c.push(`list-group-item-${v.variant}`), c.join(" ");
+    }, d = (v, c, m) => {
+      v.disabled || a("item-click", { item: v, index: c, event: m });
     };
-    return (u, c) => (n(), z(A(e.tag), {
+    return (v, c) => (i(), q(A(e.tag), {
       class: $(l.value)
     }, {
       default: j(() => [
-        (n(!0), i(F, null, H(e.items, (b, g) => (n(), z(A(s(b)), {
-          key: g,
-          class: $(o(b)),
-          href: b.href,
-          to: b.to,
-          "aria-disabled": b.disabled,
-          "aria-current": b.active,
-          onClick: (C) => r(b, g, C)
+        (i(!0), s(R, null, H(e.items, (m, f) => (i(), q(A(n(m)), {
+          key: f,
+          class: $(o(m)),
+          href: m.href,
+          to: m.to,
+          "aria-disabled": m.disabled,
+          "aria-current": m.active,
+          onClick: (V) => d(m, f, V)
         }, {
           default: j(() => [
-            N(u.$slots, "item", {
-              item: b,
-              index: g
+            T(v.$slots, "item", {
+              item: m,
+              index: f
             }, () => [
-              I(k(b.text), 1)
+              I(k(m.text), 1)
             ])
           ]),
           _: 2
@@ -926,53 +938,53 @@ const $e = /* @__PURE__ */ M({
       _: 3
     }, 8, ["class"]));
   }
-}), ht = ["aria-valuenow", "aria-valuemax"], mt = /* @__PURE__ */ M({
+}), wt = ["aria-valuenow", "aria-valuemax"], Vt = /* @__PURE__ */ M({
   __name: "VibeProgress",
   props: {
     height: { type: String, default: void 0 },
     bars: { type: Array, required: !0 }
   },
   emits: ["component-error"],
-  setup(e, { emit: v }) {
-    const t = e, a = m(() => {
+  setup(e, { emit: r }) {
+    const t = e, a = h(() => {
       if (t.height)
         return { height: t.height };
-    }), l = (r) => {
-      const u = ["progress-bar"];
-      return r.variant && u.push(`bg-${r.variant}`), (r.striped || r.animated) && u.push("progress-bar-striped"), r.animated && u.push("progress-bar-animated"), u.join(" ");
-    }, s = (r) => {
-      const u = r.max || 100;
-      return { width: `${Math.min(100, Math.max(0, r.value / u * 100))}%` };
-    }, o = (r) => r.label ? r.label : r.showValue ? `${r.value}%` : "";
-    return (r, u) => (n(), i("div", {
+    }), l = (d) => {
+      const v = ["progress-bar"];
+      return d.variant && v.push(`bg-${d.variant}`), (d.striped || d.animated) && v.push("progress-bar-striped"), d.animated && v.push("progress-bar-animated"), v.join(" ");
+    }, n = (d) => {
+      const v = d.max || 100;
+      return { width: `${Math.min(100, Math.max(0, d.value / v * 100))}%` };
+    }, o = (d) => d.label ? d.label : d.showValue ? `${d.value}%` : "";
+    return (d, v) => (i(), s("div", {
       class: "progress",
-      style: K(a.value)
+      style: Z(a.value)
     }, [
-      (n(!0), i(F, null, H(e.bars, (c, b) => (n(), i("div", {
-        key: b,
+      (i(!0), s(R, null, H(e.bars, (c, m) => (i(), s("div", {
+        key: m,
         class: $(l(c)),
-        style: K(s(c)),
+        style: Z(n(c)),
         role: "progressbar",
         "aria-valuenow": c.value,
         "aria-valuemin": 0,
         "aria-valuemax": c.max || 100
       }, [
-        N(r.$slots, "label", {
+        T(d.$slots, "label", {
           bar: c,
-          index: b
+          index: m
         }, () => [
           I(k(o(c)), 1)
         ])
-      ], 14, ht))), 128))
+      ], 14, wt))), 128))
     ], 4));
   }
 });
-let ce = 0;
+let me = 0;
 function G(e = "vibe") {
-  const v = ge(), t = v ? v.uid : "no-instance";
-  return ce++, `${e}-${t}-${ce}`;
+  const r = ke(), t = r ? r.uid : "no-instance";
+  return me++, `${e}-${t}-${me}`;
 }
-const pt = ["id"], yt = { class: "accordion-header" }, gt = ["data-bs-target", "aria-expanded", "aria-controls", "onClick"], kt = ["id", "data-bs-parent"], St = { class: "accordion-body" }, $t = /* @__PURE__ */ M({
+const Ct = ["id"], xt = { class: "accordion-header" }, Bt = ["data-bs-target", "aria-expanded", "aria-controls", "onClick"], Lt = ["id", "data-bs-parent"], Tt = { class: "accordion-body" }, Nt = /* @__PURE__ */ M({
   __name: "VibeAccordion",
   props: {
     id: { type: String, default: () => G("accordion") },
@@ -981,89 +993,89 @@ const pt = ["id"], yt = { class: "accordion-header" }, gt = ["data-bs-target", "
     alwaysOpen: { type: Boolean, default: !1 }
   },
   emits: ["item-click", "show", "shown", "hide", "hidden", "component-error"],
-  setup(e, { expose: v, emit: t }) {
-    const a = e, l = t, s = E(null), o = /* @__PURE__ */ new Map(), r = (p) => l("show", p), u = (p) => l("shown", p), c = (p) => l("hide", p), b = (p) => l("hidden", p), g = async () => {
-      if (s.value)
+  setup(e, { expose: r, emit: t }) {
+    const a = e, l = t, n = L(null), o = /* @__PURE__ */ new Map(), d = (y) => l("show", y), v = (y) => l("shown", y), c = (y) => l("hide", y), m = (y) => l("hidden", y), f = async () => {
+      if (n.value)
         try {
-          const d = (await import("bootstrap")).Collapse;
-          s.value.querySelectorAll(".accordion-collapse").forEach((h) => {
-            const w = h.id;
+          const u = (await import("bootstrap")).Collapse;
+          n.value.querySelectorAll(".accordion-collapse").forEach((p) => {
+            const w = p.id;
             if (!o.has(w)) {
-              const x = new d(h, {
+              const B = new u(p, {
                 toggle: !1,
                 parent: a.alwaysOpen ? void 0 : `#${a.id}`
               });
-              o.set(w, x), h.addEventListener("show.bs.collapse", () => r(w)), h.addEventListener("shown.bs.collapse", () => u(w)), h.addEventListener("hide.bs.collapse", () => c(w)), h.addEventListener("hidden.bs.collapse", () => b(w)), a.items.find((q) => q.id === w)?.show && x.show();
+              o.set(w, B), p.addEventListener("show.bs.collapse", () => d(w)), p.addEventListener("shown.bs.collapse", () => v(w)), p.addEventListener("hide.bs.collapse", () => c(w)), p.addEventListener("hidden.bs.collapse", () => m(w)), a.items.find((z) => z.id === w)?.show && B.show();
             }
           });
-        } catch (p) {
+        } catch (y) {
           l("component-error", {
             message: "Bootstrap JS not loaded. Accordion will use data attributes only.",
             componentName: "VibeAccordion",
-            originalError: p
+            originalError: y
           });
         }
     };
-    Y(g), X(() => {
-      o.forEach((p, d) => {
-        const f = document.getElementById(d);
-        f && (f.removeEventListener("show.bs.collapse", () => r(d)), f.removeEventListener("shown.bs.collapse", () => u(d)), f.removeEventListener("hide.bs.collapse", () => c(d)), f.removeEventListener("hidden.bs.collapse", () => b(d))), p.dispose();
+    X(f), Y(() => {
+      o.forEach((y, u) => {
+        const b = document.getElementById(u);
+        b && (b.removeEventListener("show.bs.collapse", () => d(u)), b.removeEventListener("shown.bs.collapse", () => v(u)), b.removeEventListener("hide.bs.collapse", () => c(u)), b.removeEventListener("hidden.bs.collapse", () => m(u))), y.dispose();
       }), o.clear();
-    }), O(() => a.items, async (p, d) => {
-      p.length !== d?.length && (await ne(), await g()), p.forEach((f) => {
-        const h = o.get(f.id);
-        h && (f.show ? h.show() : a.alwaysOpen || h.hide());
+    }), O(() => a.items, async (y, u) => {
+      y.length !== u?.length && (await se(), await f()), y.forEach((b) => {
+        const p = o.get(b.id);
+        p && (b.show ? p.show() : a.alwaysOpen || p.hide());
       });
     }, { deep: !0 });
-    const C = (p, d) => {
-      l("item-click", { item: p, index: d });
+    const V = (y, u) => {
+      l("item-click", { item: y, index: u });
     };
-    return v({ bsInstances: o, refresh: g }), (p, d) => (n(), i("div", {
+    return r({ bsInstances: o, refresh: f }), (y, u) => (i(), s("div", {
       ref_key: "accordionRef",
-      ref: s,
+      ref: n,
       id: e.id,
       class: $(["accordion", { "accordion-flush": e.flush }])
     }, [
-      (n(!0), i(F, null, H(e.items, (f, h) => (n(), i("div", {
-        key: f.id,
+      (i(!0), s(R, null, H(e.items, (b, p) => (i(), s("div", {
+        key: b.id,
         class: "accordion-item"
       }, [
-        S("h2", yt, [
+        S("h2", xt, [
           S("button", {
-            class: $(["accordion-button", { collapsed: !f.show }]),
+            class: $(["accordion-button", { collapsed: !b.show }]),
             type: "button",
             "data-bs-toggle": "collapse",
-            "data-bs-target": `#${f.id}`,
-            "aria-expanded": f.show,
-            "aria-controls": f.id,
-            onClick: (w) => C(f, h)
+            "data-bs-target": `#${b.id}`,
+            "aria-expanded": b.show,
+            "aria-controls": b.id,
+            onClick: (w) => V(b, p)
           }, [
-            N(p.$slots, "title", {
-              item: f,
-              index: h
+            T(y.$slots, "title", {
+              item: b,
+              index: p
             }, () => [
-              I(k(f.title), 1)
+              I(k(b.title), 1)
             ])
-          ], 10, gt)
+          ], 10, Bt)
         ]),
         S("div", {
-          id: f.id,
-          class: $(["accordion-collapse", "collapse", { show: f.show }]),
+          id: b.id,
+          class: $(["accordion-collapse", "collapse", { show: b.show }]),
           "data-bs-parent": e.alwaysOpen ? void 0 : `#${e.id}`
         }, [
-          S("div", St, [
-            N(p.$slots, "content", {
-              item: f,
-              index: h
+          S("div", Tt, [
+            T(y.$slots, "content", {
+              item: b,
+              index: p
             }, () => [
-              I(k(f.content), 1)
+              I(k(b.content), 1)
             ])
           ])
-        ], 10, kt)
+        ], 10, Lt)
       ]))), 128))
-    ], 10, pt));
+    ], 10, Ct));
   }
-}), wt = /* @__PURE__ */ M({
+}), Et = /* @__PURE__ */ M({
   __name: "VibeCollapse",
   props: {
     id: { type: String, default: () => G("collapse") },
@@ -1073,54 +1085,54 @@ const pt = ["id"], yt = { class: "accordion-header" }, gt = ["data-bs-target", "
     isNav: { type: Boolean, default: !1 }
   },
   emits: ["update:modelValue", "show", "shown", "hide", "hidden", "component-error"],
-  setup(e, { emit: v }) {
-    const t = e, a = v, l = J("vibeNavbarCollapse", null), s = E(null), o = E(null), r = E(!1), u = () => {
-      r.value = !0, a("show");
+  setup(e, { emit: r }) {
+    const t = e, a = r, l = J("vibeNavbarCollapse", null), n = L(null), o = L(null), d = L(!1), v = () => {
+      d.value = !0, a("show");
     }, c = () => {
       a("shown"), a("update:modelValue", !0);
-    }, b = () => {
+    }, m = () => {
       a("hide");
-    }, g = () => {
-      r.value = !1, a("hidden"), a("update:modelValue", !1);
+    }, f = () => {
+      d.value = !1, a("hidden"), a("update:modelValue", !1);
     };
-    Y(async () => {
-      if (s.value)
+    X(async () => {
+      if (n.value)
         try {
-          const f = (await import("bootstrap")).Collapse;
-          o.value = new f(s.value, {
+          const b = (await import("bootstrap")).Collapse;
+          o.value = new b(n.value, {
             toggle: !1
-          }), s.value.addEventListener("show.bs.collapse", u), s.value.addEventListener("shown.bs.collapse", c), s.value.addEventListener("hide.bs.collapse", b), s.value.addEventListener("hidden.bs.collapse", g), (l && t.id in l.collapseStates ? l.collapseStates[t.id] : t.modelValue) && o.value.show();
-        } catch (d) {
+          }), n.value.addEventListener("show.bs.collapse", v), n.value.addEventListener("shown.bs.collapse", c), n.value.addEventListener("hide.bs.collapse", m), n.value.addEventListener("hidden.bs.collapse", f), (l && t.id in l.collapseStates ? l.collapseStates[t.id] : t.modelValue) && o.value.show();
+        } catch (u) {
           a("component-error", {
             message: "Bootstrap JS not loaded. Collapse will use CSS classes only.",
             componentName: "VibeCollapse",
-            originalError: d
+            originalError: u
           });
         }
-    }), X(() => {
-      s.value && (s.value.removeEventListener("show.bs.collapse", u), s.value.removeEventListener("shown.bs.collapse", c), s.value.removeEventListener("hide.bs.collapse", b), s.value.removeEventListener("hidden.bs.collapse", g)), o.value && (o.value.dispose(), o.value = null);
+    }), Y(() => {
+      n.value && (n.value.removeEventListener("show.bs.collapse", v), n.value.removeEventListener("shown.bs.collapse", c), n.value.removeEventListener("hide.bs.collapse", m), n.value.removeEventListener("hidden.bs.collapse", f)), o.value && (o.value.dispose(), o.value = null);
     });
-    const C = m(() => l && t.id in l.collapseStates ? l.collapseStates[t.id] : t.modelValue);
-    O(C, (d) => {
-      o.value && (d && !r.value ? o.value.show() : !d && r.value && o.value.hide());
+    const V = h(() => l && t.id in l.collapseStates ? l.collapseStates[t.id] : t.modelValue);
+    O(V, (u) => {
+      o.value && (u && !d.value ? o.value.show() : !u && d.value && o.value.hide());
     });
-    const p = m(() => {
-      const d = ["collapse"];
-      return t.isNav && d.push("navbar-collapse"), t.horizontal && d.push("collapse-horizontal"), !o.value && C.value && d.push("show"), d.join(" ");
+    const y = h(() => {
+      const u = ["collapse"];
+      return t.isNav && u.push("navbar-collapse"), t.horizontal && u.push("collapse-horizontal"), !o.value && V.value && u.push("show"), u.join(" ");
     });
-    return (d, f) => (n(), z(A(e.tag), {
+    return (u, b) => (i(), q(A(e.tag), {
       ref_key: "collapseRef",
-      ref: s,
+      ref: n,
       id: e.id,
-      class: $(p.value)
+      class: $(y.value)
     }, {
       default: j(() => [
-        N(d.$slots, "default")
+        T(u.$slots, "default")
       ]),
       _: 3
     }, 8, ["id", "class"]));
   }
-}), Vt = ["id", "data-bs-auto-close"], Ct = ["id", "data-bs-auto-close"], xt = ["aria-labelledby"], Bt = { key: 0 }, Lt = { key: 1 }, Tt = { class: "dropdown-header" }, Nt = { key: 2 }, Et = /* @__PURE__ */ M({
+}), Mt = ["id", "data-bs-auto-close"], It = ["id", "data-bs-auto-close"], Rt = ["aria-labelledby"], Ft = { key: 0 }, Pt = { key: 1 }, qt = { class: "dropdown-header" }, zt = { key: 2 }, At = /* @__PURE__ */ M({
   __name: "VibeDropdown",
   props: {
     id: { type: String, default: () => G("dropdown") },
@@ -1134,122 +1146,138 @@ const pt = ["id"], yt = { class: "accordion-header" }, gt = ["data-bs-target", "
     autoClose: { type: [Boolean, String], default: !0 }
   },
   emits: ["item-click", "show", "shown", "hide", "hidden", "component-error"],
-  setup(e, { expose: v, emit: t }) {
-    const a = e, l = t, s = E(null), o = E(null), r = m(() => a.direction === "up" ? "dropup" : a.direction === "end" ? "dropend" : a.direction === "start" ? "dropstart" : "dropdown"), u = m(() => {
-      const V = ["btn", `btn-${a.variant}`];
-      return a.size && V.push(`btn-${a.size}`), V.join(" ");
-    }), c = m(() => {
-      const V = ["dropdown-menu"];
-      return a.menuEnd && V.push("dropdown-menu-end"), V.join(" ");
-    }), b = (V) => {
-      const q = ["dropdown-item"];
-      return V.active && q.push("active"), V.disabled && q.push("disabled"), q.join(" ");
-    }, g = () => l("show"), C = () => l("shown"), p = () => l("hide"), d = () => l("hidden");
-    Y(async () => {
-      if (s.value)
+  setup(e, { expose: r, emit: t }) {
+    const a = e, l = t, n = L(null), o = L(null), d = h(() => a.direction === "up" ? "dropup" : a.direction === "end" ? "dropend" : a.direction === "start" ? "dropstart" : "dropdown"), v = h(() => {
+      const C = ["btn", `btn-${a.variant}`];
+      return a.size && C.push(`btn-${a.size}`), C.join(" ");
+    }), c = h(() => {
+      const C = ["dropdown-menu"];
+      return a.menuEnd && C.push("dropdown-menu-end"), C.join(" ");
+    }), m = (C) => {
+      const z = ["dropdown-item"];
+      return C.active && z.push("active"), C.disabled && z.push("disabled"), z.join(" ");
+    }, f = () => l("show"), V = () => l("shown"), y = () => l("hide"), u = () => l("hidden");
+    X(async () => {
+      if (n.value)
         try {
-          const q = (await import("bootstrap")).Dropdown, P = s.value.querySelector(".dropdown-toggle");
-          P && (o.value = new q(P, {
+          const z = (await import("bootstrap")).Dropdown, F = n.value.querySelector(".dropdown-toggle");
+          F && (o.value = new z(F, {
             autoClose: a.autoClose
-          }), P.addEventListener("show.bs.dropdown", g), P.addEventListener("shown.bs.dropdown", C), P.addEventListener("hide.bs.dropdown", p), P.addEventListener("hidden.bs.dropdown", d));
-        } catch (V) {
+          }), F.addEventListener("show.bs.dropdown", f), F.addEventListener("shown.bs.dropdown", V), F.addEventListener("hide.bs.dropdown", y), F.addEventListener("hidden.bs.dropdown", u));
+        } catch (C) {
           l("component-error", {
             message: "Bootstrap JS not loaded. Dropdown will use data attributes only.",
             componentName: "VibeDropdown",
-            originalError: V
+            originalError: C
           });
         }
-    }), X(() => {
-      const V = s.value?.querySelector(".dropdown-toggle");
-      V && (V.removeEventListener("show.bs.dropdown", g), V.removeEventListener("shown.bs.dropdown", C), V.removeEventListener("hide.bs.dropdown", p), V.removeEventListener("hidden.bs.dropdown", d)), o.value && (o.value.dispose(), o.value = null);
+    }), Y(() => {
+      const C = n.value?.querySelector(".dropdown-toggle");
+      C && (C.removeEventListener("show.bs.dropdown", f), C.removeEventListener("shown.bs.dropdown", V), C.removeEventListener("hide.bs.dropdown", y), C.removeEventListener("hidden.bs.dropdown", u)), o.value && (o.value.dispose(), o.value = null);
     });
-    const f = (V, q, P) => {
-      !V.disabled && !V.divider && !V.header && l("item-click", { item: V, index: q, event: P });
+    const b = (C, z, F) => {
+      !C.disabled && !C.divider && !C.header && l("item-click", { item: C, index: z, event: F });
     };
-    return v({ show: () => o.value?.show(), hide: () => o.value?.hide(), toggle: () => o.value?.toggle() }), (V, q) => (n(), i("div", {
+    return r({ show: () => o.value?.show(), hide: () => o.value?.hide(), toggle: () => o.value?.toggle() }), (C, z) => (i(), s("div", {
       ref_key: "dropdownRef",
-      ref: s,
-      class: $(r.value)
+      ref: n,
+      class: $(d.value)
     }, [
-      e.split ? (n(), i(F, { key: 1 }, [
+      e.split ? (i(), s(R, { key: 1 }, [
         S("button", {
-          class: $(u.value),
+          class: $(v.value),
           type: "button"
         }, [
-          N(V.$slots, "button", {}, () => [
+          T(C.$slots, "button", {}, () => [
             I(k(e.text), 1)
           ])
         ], 2),
         S("button", {
           id: e.id,
           type: "button",
-          class: $([u.value, "dropdown-toggle", "dropdown-toggle-split"]),
+          class: $([v.value, "dropdown-toggle", "dropdown-toggle-split"]),
           "data-bs-toggle": "dropdown",
           "aria-expanded": "false",
           "data-bs-auto-close": e.autoClose
-        }, [...q[0] || (q[0] = [
+        }, [...z[0] || (z[0] = [
           S("span", { class: "visually-hidden" }, "Toggle Dropdown", -1)
-        ])], 10, Ct)
-      ], 64)) : (n(), i("button", {
+        ])], 10, It)
+      ], 64)) : (i(), s("button", {
         key: 0,
         id: e.id,
-        class: $([u.value, "dropdown-toggle"]),
+        class: $([v.value, "dropdown-toggle"]),
         type: "button",
         "data-bs-toggle": "dropdown",
         "aria-expanded": "false",
         "data-bs-auto-close": e.autoClose
       }, [
-        N(V.$slots, "button", {}, () => [
+        T(C.$slots, "button", {}, () => [
           I(k(e.text), 1)
         ])
-      ], 10, Vt)),
+      ], 10, Mt)),
       S("ul", {
         class: $(c.value),
         "aria-labelledby": e.id
       }, [
-        (n(!0), i(F, null, H(e.items, (P, R) => (n(), i(F, { key: R }, [
-          P.divider ? (n(), i("li", Bt, [...q[1] || (q[1] = [
+        (i(!0), s(R, null, H(e.items, (F, K) => (i(), s(R, { key: K }, [
+          F.divider ? (i(), s("li", Ft, [...z[1] || (z[1] = [
             S("hr", { class: "dropdown-divider" }, null, -1)
-          ])])) : P.header ? (n(), i("li", Lt, [
-            S("h6", Tt, [
-              N(V.$slots, "header", {
-                item: P,
-                index: R
+          ])])) : F.header ? (i(), s("li", Pt, [
+            S("h6", qt, [
+              T(C.$slots, "header", {
+                item: F,
+                index: K
               }, () => [
-                I(k(P.text), 1)
+                I(k(F.text), 1)
               ])
             ])
-          ])) : (n(), i("li", Nt, [
-            (n(), z(A(P.href ? "a" : P.to ? "router-link" : "button"), {
-              class: $(b(P)),
-              href: P.href,
-              to: P.to,
-              type: !P.href && !P.to ? "button" : void 0,
-              disabled: P.disabled,
-              onClick: (Q) => f(P, R, Q)
+          ])) : (i(), s("li", zt, [
+            (i(), q(A(F.href ? "a" : F.to ? "router-link" : "button"), {
+              class: $(m(F)),
+              href: F.href,
+              to: F.to,
+              type: !F.href && !F.to ? "button" : void 0,
+              disabled: F.disabled,
+              onClick: (_) => b(F, K, _)
             }, {
               default: j(() => [
-                N(V.$slots, "item", {
-                  item: P,
-                  index: R
+                T(C.$slots, "item", {
+                  item: F,
+                  index: K
                 }, () => [
-                  I(k(P.text), 1)
+                  I(k(F.text), 1)
                 ])
               ]),
               _: 2
             }, 1032, ["class", "href", "to", "type", "disabled", "onClick"]))
           ]))
         ], 64))), 128))
-      ], 10, xt)
+      ], 10, Rt)
     ], 2));
   }
-}), Mt = ["id", "aria-labelledby", "aria-hidden", "data-bs-backdrop", "data-bs-keyboard"], It = { class: "modal-content" }, Ft = {
+}), ee = [];
+function ye(e) {
+  if (ee.length > 0) {
+    e.preventDefault();
+    const r = ee.pop();
+    r && r();
+  }
+}
+function $e(e) {
+  X(() => {
+    ee.push(e), ee.length === 1 && typeof document < "u" && document.addEventListener("backbutton", ye);
+  }), Se(() => {
+    const r = ee.indexOf(e);
+    r !== -1 && ee.splice(r, 1), ee.length === 0 && typeof document < "u" && document.removeEventListener("backbutton", ye);
+  });
+}
+const jt = ["id", "aria-labelledby", "aria-hidden", "data-bs-backdrop", "data-bs-keyboard"], Ot = { class: "modal-content" }, Ht = {
   key: 0,
   class: "modal-header"
-}, Pt = ["id"], Rt = { class: "modal-body" }, qt = {
+}, Dt = ["id"], Gt = { class: "modal-body" }, Xt = {
   key: 1,
   class: "modal-footer"
-}, zt = /* @__PURE__ */ M({
+}, Yt = /* @__PURE__ */ M({
   __name: "VibeModal",
   props: {
     id: { type: String, default: () => G("modal") },
@@ -1265,28 +1293,28 @@ const pt = ["id"], yt = { class: "accordion-header" }, gt = ["data-bs-target", "
     teleport: { type: [String, Boolean], default: "body" }
   },
   emits: ["update:modelValue", "show", "shown", "hide", "hidden", "component-error"],
-  setup(e, { expose: v, emit: t }) {
-    const a = e, l = t, s = E(null), o = E(null), r = E(!1), u = m(() => {
+  setup(e, { expose: r, emit: t }) {
+    const a = e, l = t, n = L(null), o = L(null), d = L(!1), v = h(() => {
       const w = ["modal-dialog"];
       return a.size && w.push(`modal-${a.size}`), a.centered && w.push("modal-dialog-centered"), a.scrollable && w.push("modal-dialog-scrollable"), a.fullscreen === !0 ? w.push("modal-fullscreen") : typeof a.fullscreen == "string" && w.push(`modal-fullscreen-${a.fullscreen}-down`), w.join(" ");
     }), c = () => {
-      r.value = !0, l("show");
-    }, b = () => {
+      d.value = !0, l("show");
+    }, m = () => {
       l("shown"), l("update:modelValue", !0);
-    }, g = () => {
+    }, f = () => {
       l("hide");
-    }, C = () => {
-      r.value = !1, l("hidden"), l("update:modelValue", !1);
-    }, p = async () => {
-      if (s.value) {
+    }, V = () => {
+      d.value = !1, l("hidden"), l("update:modelValue", !1);
+    }, y = async () => {
+      if (n.value) {
         o.value && o.value.dispose();
         try {
-          const x = (await import("bootstrap")).Modal;
-          o.value = new x(s.value, {
+          const B = (await import("bootstrap")).Modal;
+          o.value = new B(n.value, {
             backdrop: a.staticBackdrop ? "static" : !0,
             keyboard: !a.staticBackdrop,
             focus: !0
-          }), s.value.addEventListener("show.bs.modal", c), s.value.addEventListener("shown.bs.modal", b), s.value.addEventListener("hide.bs.modal", g), s.value.addEventListener("hidden.bs.modal", C), a.modelValue && o.value.show();
+          }), n.value.addEventListener("show.bs.modal", c), n.value.addEventListener("shown.bs.modal", m), n.value.addEventListener("hide.bs.modal", f), n.value.addEventListener("hidden.bs.modal", V), a.modelValue && o.value.show();
         } catch (w) {
           l("component-error", {
             message: "Bootstrap JS not loaded. Modal will use data attributes only.",
@@ -1296,65 +1324,67 @@ const pt = ["id"], yt = { class: "accordion-header" }, gt = ["data-bs-target", "
         }
       }
     };
-    Y(p), X(() => {
-      s.value && (s.value.removeEventListener("show.bs.modal", c), s.value.removeEventListener("shown.bs.modal", b), s.value.removeEventListener("hide.bs.modal", g), s.value.removeEventListener("hidden.bs.modal", C)), o.value && (r.value && o.value.hide(), o.value.dispose(), o.value = null);
+    X(y), Y(() => {
+      n.value && (n.value.removeEventListener("show.bs.modal", c), n.value.removeEventListener("shown.bs.modal", m), n.value.removeEventListener("hide.bs.modal", f), n.value.removeEventListener("hidden.bs.modal", V)), o.value && (d.value && o.value.hide(), o.value.dispose(), o.value = null);
     }), O(() => a.modelValue, (w) => {
-      o.value && (w && !r.value ? o.value.show() : !w && r.value && o.value.hide());
-    }), O(() => a.staticBackdrop, p);
-    const d = () => o.value?.show(), f = () => o.value?.hide();
-    return v({ show: d, hide: f, handleUpdate: () => o.value?.handleUpdate(), bsInstance: o }), (w, x) => (n(), z(ie, {
+      o.value && (w && !d.value ? o.value.show() : !w && d.value && o.value.hide());
+    }), O(() => a.staticBackdrop, y);
+    const u = () => o.value?.show(), b = () => o.value?.hide(), p = () => o.value?.handleUpdate();
+    return $e(() => {
+      d.value && b();
+    }), r({ show: u, hide: b, handleUpdate: p, bsInstance: o }), (w, B) => (i(), q(fe, {
       to: e.teleport === !0 ? "body" : e.teleport || void 0,
       disabled: !e.teleport
     }, [
       S("div", {
         ref_key: "modalRef",
-        ref: s,
+        ref: n,
         id: e.id,
-        class: $(["modal fade", { show: r.value }]),
+        class: $(["modal fade", { show: d.value }]),
         tabindex: "-1",
         "aria-labelledby": `${e.id}-label`,
-        "aria-hidden": !r.value,
+        "aria-hidden": !d.value,
         "data-bs-backdrop": e.staticBackdrop ? "static" : void 0,
         "data-bs-keyboard": !e.staticBackdrop
       }, [
         S("div", {
-          class: $(u.value)
+          class: $(v.value)
         }, [
-          S("div", It, [
-            e.hideHeader ? y("", !0) : (n(), i("div", Ft, [
+          S("div", Ot, [
+            e.hideHeader ? g("", !0) : (i(), s("div", Ht, [
               S("h5", {
                 id: `${e.id}-label`,
                 class: "modal-title"
               }, [
-                N(w.$slots, "header", {}, () => [
+                T(w.$slots, "header", {}, () => [
                   I(k(e.title), 1)
-                ])
-              ], 8, Pt),
+                ], !0)
+              ], 8, Dt),
               S("button", {
                 type: "button",
                 class: "btn-close",
                 "aria-label": "Close",
-                onClick: f
+                onClick: b
               })
             ])),
-            S("div", Rt, [
-              N(w.$slots, "default")
+            S("div", Gt, [
+              T(w.$slots, "default", {}, void 0, !0)
             ]),
-            e.hideFooter ? y("", !0) : (n(), i("div", qt, [
-              N(w.$slots, "footer", {}, () => [
+            e.hideFooter ? g("", !0) : (i(), s("div", Xt, [
+              T(w.$slots, "footer", {}, () => [
                 S("button", {
                   type: "button",
                   class: "btn btn-secondary",
-                  onClick: f
+                  onClick: b
                 }, "Close")
-              ])
+              ], !0)
             ]))
           ])
         ], 2)
-      ], 10, Mt)
+      ], 10, jt)
     ], 8, ["to", "disabled"]));
   }
-}), At = ["id", "aria-labelledby", "data-bs-backdrop", "data-bs-scroll"], jt = { class: "offcanvas-header" }, Ot = ["id"], Ht = { class: "offcanvas-body" }, Dt = /* @__PURE__ */ M({
+}), Ut = /* @__PURE__ */ ae(Yt, [["__scopeId", "data-v-c11ac690"]]), Jt = ["id", "aria-labelledby", "data-bs-backdrop", "data-bs-scroll"], Kt = { class: "offcanvas-header" }, Wt = ["id"], Qt = { class: "offcanvas-body" }, Zt = /* @__PURE__ */ M({
   __name: "VibeOffcanvas",
   props: {
     id: { type: String, default: () => G("offcanvas") },
@@ -1366,80 +1396,82 @@ const pt = ["id"], yt = { class: "accordion-header" }, gt = ["data-bs-target", "
     teleport: { type: [String, Boolean], default: "body" }
   },
   emits: ["update:modelValue", "show", "shown", "hide", "hidden", "component-error"],
-  setup(e, { expose: v, emit: t }) {
-    const a = e, l = t, s = E(null), o = E(null), r = E(!1), u = m(() => `offcanvas offcanvas-${a.placement}`), c = () => {
-      r.value = !0, l("show");
-    }, b = () => {
+  setup(e, { expose: r, emit: t }) {
+    const a = e, l = t, n = L(null), o = L(null), d = L(!1), v = h(() => `offcanvas offcanvas-${a.placement}`), c = () => {
+      d.value = !0, l("show");
+    }, m = () => {
       l("shown"), l("update:modelValue", !0);
-    }, g = () => {
+    }, f = () => {
       l("hide");
-    }, C = () => {
-      r.value = !1, l("hidden"), l("update:modelValue", !1);
-    }, p = async () => {
-      if (s.value) {
+    }, V = () => {
+      d.value = !1, l("hidden"), l("update:modelValue", !1);
+    }, y = async () => {
+      if (n.value) {
         o.value && o.value.dispose();
         try {
           const w = (await import("bootstrap")).Offcanvas;
-          o.value = new w(s.value, {
+          o.value = new w(n.value, {
             backdrop: a.backdrop === !1 ? !1 : a.backdrop === "static" ? "static" : !0,
             scroll: a.scroll,
             keyboard: a.backdrop !== "static"
-          }), s.value.addEventListener("show.bs.offcanvas", c), s.value.addEventListener("shown.bs.offcanvas", b), s.value.addEventListener("hide.bs.offcanvas", g), s.value.addEventListener("hidden.bs.offcanvas", C), a.modelValue && o.value.show();
-        } catch (h) {
+          }), n.value.addEventListener("show.bs.offcanvas", c), n.value.addEventListener("shown.bs.offcanvas", m), n.value.addEventListener("hide.bs.offcanvas", f), n.value.addEventListener("hidden.bs.offcanvas", V), a.modelValue && o.value.show();
+        } catch (p) {
           l("component-error", {
             message: "Bootstrap JS not loaded. Offcanvas will use data attributes only.",
             componentName: "VibeOffcanvas",
-            originalError: h
+            originalError: p
           });
         }
       }
     };
-    Y(p), X(() => {
-      s.value && (s.value.removeEventListener("show.bs.offcanvas", c), s.value.removeEventListener("shown.bs.offcanvas", b), s.value.removeEventListener("hide.bs.offcanvas", g), s.value.removeEventListener("hidden.bs.offcanvas", C)), o.value && (r.value && o.value.hide(), o.value.dispose(), o.value = null);
-    }), O(() => a.modelValue, (h) => {
-      o.value && (h && !r.value ? o.value.show() : !h && r.value && o.value.hide());
-    }), O([() => a.placement, () => a.backdrop, () => a.scroll], p);
-    const d = () => o.value?.show(), f = () => o.value?.hide();
-    return v({ show: d, hide: f, bsInstance: o }), (h, w) => (n(), z(ie, {
+    X(y), Y(() => {
+      n.value && (n.value.removeEventListener("show.bs.offcanvas", c), n.value.removeEventListener("shown.bs.offcanvas", m), n.value.removeEventListener("hide.bs.offcanvas", f), n.value.removeEventListener("hidden.bs.offcanvas", V)), o.value && (d.value && o.value.hide(), o.value.dispose(), o.value = null);
+    }), O(() => a.modelValue, (p) => {
+      o.value && (p && !d.value ? o.value.show() : !p && d.value && o.value.hide());
+    }), O([() => a.placement, () => a.backdrop, () => a.scroll], y);
+    const u = () => o.value?.show(), b = () => o.value?.hide();
+    return $e(() => {
+      d.value && b();
+    }), r({ show: u, hide: b, bsInstance: o }), (p, w) => (i(), q(fe, {
       to: e.teleport === !0 ? "body" : e.teleport || void 0,
       disabled: !e.teleport
     }, [
       S("div", {
         ref_key: "offcanvasRef",
-        ref: s,
+        ref: n,
         id: e.id,
-        class: $(u.value),
+        class: $(v.value),
         tabindex: "-1",
         "aria-labelledby": `${e.id}-label`,
         "data-bs-backdrop": e.backdrop === !1 ? "false" : e.backdrop === "static" ? "static" : "true",
         "data-bs-scroll": e.scroll
       }, [
-        S("div", jt, [
+        S("div", Kt, [
           S("h5", {
             id: `${e.id}-label`,
             class: "offcanvas-title"
           }, [
-            N(h.$slots, "header", {}, () => [
+            T(p.$slots, "header", {}, () => [
               I(k(e.title), 1)
-            ])
-          ], 8, Ot),
+            ], !0)
+          ], 8, Wt),
           S("button", {
             type: "button",
             class: "btn-close",
             "aria-label": "Close",
-            onClick: f
+            onClick: b
           })
         ]),
-        S("div", Ht, [
-          N(h.$slots, "default")
+        S("div", Qt, [
+          T(p.$slots, "default", {}, void 0, !0)
         ])
-      ], 10, At)
+      ], 10, Jt)
     ], 8, ["to", "disabled"]));
   }
-}), Gt = ["id", "data-bs-autohide", "data-bs-delay"], Xt = {
+}), _t = /* @__PURE__ */ ae(Zt, [["__scopeId", "data-v-f03bd194"]]), ea = ["id", "data-bs-autohide", "data-bs-delay"], ta = {
   key: 0,
   class: "toast-header"
-}, Yt = { class: "me-auto" }, Ut = { class: "toast-body" }, Jt = /* @__PURE__ */ M({
+}, aa = { class: "me-auto" }, la = { class: "toast-body" }, oa = /* @__PURE__ */ M({
   __name: "VibeToast",
   props: {
     id: { type: String, default: () => G("toast") },
@@ -1452,30 +1484,30 @@ const pt = ["id"], yt = { class: "accordion-header" }, gt = ["data-bs-target", "
     placement: { type: String, default: "top-end" }
   },
   emits: ["update:modelValue", "show", "shown", "hide", "hidden", "component-error"],
-  setup(e, { expose: v, emit: t }) {
-    const a = e, l = t, s = E(null), o = E(null), r = E(!1), u = m(() => {
+  setup(e, { expose: r, emit: t }) {
+    const a = e, l = t, n = L(null), o = L(null), d = L(!1), v = h(() => {
       const w = ["toast"];
       return a.variant && w.push(`text-bg-${a.variant}`), w.join(" ");
-    }), c = m(() => {
-      const w = ["toast-container", "position-fixed", "p-3"], x = a.placement;
-      return x.includes("top") && w.push("top-0"), x.includes("bottom") && w.push("bottom-0"), x.includes("middle") && w.push("top-50", "start-50", "translate-middle"), x.includes("start") && w.push("start-0"), x.includes("end") && w.push("end-0"), x.includes("center") && !x.includes("middle") && w.push("start-50", "translate-middle-x"), w.join(" ");
-    }), b = () => {
-      r.value = !0, l("show");
-    }, g = () => {
+    }), c = h(() => {
+      const w = ["toast-container", "position-fixed", "p-3"], B = a.placement;
+      return B.includes("top") && w.push("top-0"), B.includes("bottom") && w.push("bottom-0"), B.includes("middle") && w.push("top-50", "start-50", "translate-middle"), B.includes("start") && w.push("start-0"), B.includes("end") && w.push("end-0"), B.includes("center") && !B.includes("middle") && w.push("start-50", "translate-middle-x"), w.join(" ");
+    }), m = () => {
+      d.value = !0, l("show");
+    }, f = () => {
       l("shown"), l("update:modelValue", !0);
-    }, C = () => {
+    }, V = () => {
       l("hide");
-    }, p = () => {
-      r.value = !1, l("hidden"), l("update:modelValue", !1);
-    }, d = async () => {
-      if (s.value) {
+    }, y = () => {
+      d.value = !1, l("hidden"), l("update:modelValue", !1);
+    }, u = async () => {
+      if (n.value) {
         o.value && o.value.dispose();
         try {
-          const x = (await import("bootstrap")).Toast;
-          o.value = new x(s.value, {
+          const B = (await import("bootstrap")).Toast;
+          o.value = new B(n.value, {
             autohide: a.autohide,
             delay: a.delay
-          }), s.value.addEventListener("show.bs.toast", b), s.value.addEventListener("shown.bs.toast", g), s.value.addEventListener("hide.bs.toast", C), s.value.addEventListener("hidden.bs.toast", p), a.modelValue && o.value.show();
+          }), n.value.addEventListener("show.bs.toast", m), n.value.addEventListener("shown.bs.toast", f), n.value.addEventListener("hide.bs.toast", V), n.value.addEventListener("hidden.bs.toast", y), a.modelValue && o.value.show();
         } catch (w) {
           l("component-error", {
             message: "Bootstrap JS not loaded. Toast will use data attributes only.",
@@ -1485,13 +1517,13 @@ const pt = ["id"], yt = { class: "accordion-header" }, gt = ["data-bs-target", "
         }
       }
     };
-    Y(d), X(() => {
-      s.value && (s.value.removeEventListener("show.bs.toast", b), s.value.removeEventListener("shown.bs.toast", g), s.value.removeEventListener("hide.bs.toast", C), s.value.removeEventListener("hidden.bs.toast", p)), o.value && (o.value.dispose(), o.value = null);
+    X(u), Y(() => {
+      n.value && (n.value.removeEventListener("show.bs.toast", m), n.value.removeEventListener("shown.bs.toast", f), n.value.removeEventListener("hide.bs.toast", V), n.value.removeEventListener("hidden.bs.toast", y)), o.value && (o.value.dispose(), o.value = null);
     }), O(() => a.modelValue, (w) => {
-      o.value && (w && !r.value ? o.value.show() : !w && r.value && o.value.hide());
-    }), O([() => a.autohide, () => a.delay], d);
-    const f = () => o.value?.show(), h = () => o.value?.hide();
-    return v({ show: f, hide: h, bsInstance: o }), (w, x) => (n(), z(ie, {
+      o.value && (w && !d.value ? o.value.show() : !w && d.value && o.value.hide());
+    }), O([() => a.autohide, () => a.delay], u);
+    const b = () => o.value?.show(), p = () => o.value?.hide();
+    return r({ show: b, hide: p, bsInstance: o }), (w, B) => (i(), q(fe, {
       to: e.teleport === !0 ? "body" : e.teleport || void 0,
       disabled: !e.teleport
     }, [
@@ -1501,40 +1533,40 @@ const pt = ["id"], yt = { class: "accordion-header" }, gt = ["data-bs-target", "
       }, [
         S("div", {
           ref_key: "toastRef",
-          ref: s,
+          ref: n,
           id: e.id,
-          class: $(u.value),
+          class: $(v.value),
           role: "alert",
           "aria-live": "assertive",
           "aria-atomic": "true",
           "data-bs-autohide": e.autohide,
           "data-bs-delay": e.delay
         }, [
-          e.title || w.$slots.header ? (n(), i("div", Xt, [
-            N(w.$slots, "header", {}, () => [
-              S("strong", Yt, k(e.title), 1)
+          e.title || w.$slots.header ? (i(), s("div", ta, [
+            T(w.$slots, "header", {}, () => [
+              S("strong", aa, k(e.title), 1)
             ]),
             S("button", {
               type: "button",
               class: "btn-close",
               "aria-label": "Close",
-              onClick: h
+              onClick: p
             })
-          ])) : y("", !0),
-          S("div", Ut, [
-            N(w.$slots, "default")
+          ])) : g("", !0),
+          S("div", la, [
+            T(w.$slots, "default")
           ])
-        ], 10, Gt)
+        ], 10, ea)
       ], 2)
     ], 8, ["to", "disabled"]));
   }
-}), Kt = ["id", "data-bs-ride", "data-bs-interval", "data-bs-keyboard", "data-bs-pause", "data-bs-wrap", "data-bs-touch"], Qt = {
+}), na = ["id", "data-bs-ride", "data-bs-interval", "data-bs-keyboard", "data-bs-pause", "data-bs-wrap", "data-bs-touch"], ia = {
   key: 0,
   class: "carousel-indicators"
-}, Wt = ["data-bs-target", "data-bs-slide-to", "aria-current", "aria-label"], Zt = { class: "carousel-inner" }, _t = ["data-bs-interval"], ea = ["src", "alt"], ta = {
+}, sa = ["data-bs-target", "data-bs-slide-to", "aria-current", "aria-label"], ra = { class: "carousel-inner" }, da = ["data-bs-interval"], ua = ["src", "alt"], ca = {
   key: 0,
   class: "carousel-caption d-none d-md-block"
-}, aa = { key: 0 }, la = { key: 1 }, oa = ["data-bs-target"], sa = ["data-bs-target"], na = /* @__PURE__ */ M({
+}, va = { key: 0 }, fa = { key: 1 }, ba = ["data-bs-target"], ha = ["data-bs-target"], pa = /* @__PURE__ */ M({
   __name: "VibeCarousel",
   props: {
     id: { type: String, default: () => G("carousel") },
@@ -1552,49 +1584,49 @@ const pt = ["id"], yt = { class: "accordion-header" }, gt = ["data-bs-target", "
     items: { type: Array, required: !0 }
   },
   emits: ["update:modelValue", "slide", "slid", "component-error"],
-  setup(e, { expose: v, emit: t }) {
-    const a = e, l = t, s = E(null), o = E(null), r = E(a.modelValue), u = m(() => {
-      const p = ["carousel", "slide"];
-      return a.dark && p.push("carousel-dark"), a.fade && p.push("carousel-fade"), p.join(" ");
-    }), c = (p) => {
-      l("slide", p);
-    }, b = (p) => {
-      r.value = p.to, l("update:modelValue", p.to), l("slid", p);
-    }, g = async () => {
-      if (s.value) {
+  setup(e, { expose: r, emit: t }) {
+    const a = e, l = t, n = L(null), o = L(null), d = L(a.modelValue), v = h(() => {
+      const y = ["carousel", "slide"];
+      return a.dark && y.push("carousel-dark"), a.fade && y.push("carousel-fade"), y.join(" ");
+    }), c = (y) => {
+      l("slide", y);
+    }, m = (y) => {
+      d.value = y.to, l("update:modelValue", y.to), l("slid", y);
+    }, f = async () => {
+      if (n.value) {
         o.value && o.value.dispose();
         try {
-          const d = (await import("bootstrap")).Carousel;
-          o.value = new d(s.value, {
+          const u = (await import("bootstrap")).Carousel;
+          o.value = new u(n.value, {
             interval: a.interval,
             keyboard: a.keyboard,
             pause: a.pause,
             ride: a.ride === !0 ? "carousel" : a.ride,
             wrap: a.wrap,
             touch: a.touch
-          }), s.value.addEventListener("slide.bs.carousel", c), s.value.addEventListener("slid.bs.carousel", b), a.modelValue !== 0 && o.value.to(a.modelValue);
-        } catch (p) {
+          }), n.value.addEventListener("slide.bs.carousel", c), n.value.addEventListener("slid.bs.carousel", m), a.modelValue !== 0 && o.value.to(a.modelValue);
+        } catch (y) {
           l("component-error", {
             message: "Bootstrap JS not loaded. Carousel will use data attributes only.",
             componentName: "VibeCarousel",
-            originalError: p
+            originalError: y
           });
         }
       }
     };
-    Y(g), X(() => {
-      s.value && (s.value.removeEventListener("slide.bs.carousel", c), s.value.removeEventListener("slid.bs.carousel", b)), o.value && (o.value.dispose(), o.value = null);
-    }), O(() => a.modelValue, (p) => {
-      o.value && p !== r.value && o.value.to(p);
+    X(f), Y(() => {
+      n.value && (n.value.removeEventListener("slide.bs.carousel", c), n.value.removeEventListener("slid.bs.carousel", m)), o.value && (o.value.dispose(), o.value = null);
+    }), O(() => a.modelValue, (y) => {
+      o.value && y !== d.value && o.value.to(y);
     }), O(() => a.items, async () => {
-      await ne(), await g();
+      await se(), await f();
     }, { deep: !0 });
-    const C = (p, d) => p.alt ? p.alt : p.caption ? p.caption : p.captionText ? p.captionText : `Carousel slide ${d + 1}`;
-    return v({ bsInstance: o, refresh: g }), (p, d) => (n(), i("div", {
+    const V = (y, u) => y.alt ? y.alt : y.caption ? y.caption : y.captionText ? y.captionText : `Carousel slide ${u + 1}`;
+    return r({ bsInstance: o, refresh: f }), (y, u) => (i(), s("div", {
       ref_key: "carouselRef",
-      ref: s,
+      ref: n,
       id: e.id,
-      class: $(u.value),
+      class: $(v.value),
       "data-bs-ride": e.ride === !0 ? "carousel" : e.ride,
       "data-bs-interval": e.interval,
       "data-bs-keyboard": e.keyboard,
@@ -1602,68 +1634,68 @@ const pt = ["id"], yt = { class: "accordion-header" }, gt = ["data-bs-target", "
       "data-bs-wrap": e.wrap,
       "data-bs-touch": e.touch
     }, [
-      e.indicators ? (n(), i("div", Qt, [
-        (n(!0), i(F, null, H(e.items, (f, h) => (n(), i("button", {
-          key: `indicator-${h}`,
+      e.indicators ? (i(), s("div", ia, [
+        (i(!0), s(R, null, H(e.items, (b, p) => (i(), s("button", {
+          key: `indicator-${p}`,
           type: "button",
           "data-bs-target": `#${e.id}`,
-          "data-bs-slide-to": h,
-          class: $({ active: h === r.value }),
-          "aria-current": h === r.value,
-          "aria-label": `Slide ${h + 1}`
-        }, null, 10, Wt))), 128))
-      ])) : y("", !0),
-      S("div", Zt, [
-        (n(!0), i(F, null, H(e.items, (f, h) => (n(), i("div", {
-          key: `slide-${h}`,
-          class: $(["carousel-item", { active: h === r.value }]),
-          "data-bs-interval": f.interval
+          "data-bs-slide-to": p,
+          class: $({ active: p === d.value }),
+          "aria-current": p === d.value,
+          "aria-label": `Slide ${p + 1}`
+        }, null, 10, sa))), 128))
+      ])) : g("", !0),
+      S("div", ra, [
+        (i(!0), s(R, null, H(e.items, (b, p) => (i(), s("div", {
+          key: `slide-${p}`,
+          class: $(["carousel-item", { active: p === d.value }]),
+          "data-bs-interval": b.interval
         }, [
           S("img", {
-            src: f.src,
-            alt: C(f, h),
+            src: b.src,
+            alt: V(b, p),
             class: "d-block w-100"
-          }, null, 8, ea),
-          f.caption || f.captionText || p.$slots.caption ? (n(), i("div", ta, [
-            N(p.$slots, "caption", {
-              item: f,
-              index: h
+          }, null, 8, ua),
+          b.caption || b.captionText || y.$slots.caption ? (i(), s("div", ca, [
+            T(y.$slots, "caption", {
+              item: b,
+              index: p
             }, () => [
-              f.caption ? (n(), i("h5", aa, k(f.caption), 1)) : y("", !0),
-              f.captionText ? (n(), i("p", la, k(f.captionText), 1)) : y("", !0)
+              b.caption ? (i(), s("h5", va, k(b.caption), 1)) : g("", !0),
+              b.captionText ? (i(), s("p", fa, k(b.captionText), 1)) : g("", !0)
             ])
-          ])) : y("", !0)
-        ], 10, _t))), 128))
+          ])) : g("", !0)
+        ], 10, da))), 128))
       ]),
-      e.controls ? (n(), i(F, { key: 1 }, [
+      e.controls ? (i(), s(R, { key: 1 }, [
         S("button", {
           class: "carousel-control-prev",
           type: "button",
           "data-bs-target": `#${e.id}`,
           "data-bs-slide": "prev"
-        }, [...d[0] || (d[0] = [
+        }, [...u[0] || (u[0] = [
           S("span", {
             class: "carousel-control-prev-icon",
             "aria-hidden": "true"
           }, null, -1),
           S("span", { class: "visually-hidden" }, "Previous", -1)
-        ])], 8, oa),
+        ])], 8, ba),
         S("button", {
           class: "carousel-control-next",
           type: "button",
           "data-bs-target": `#${e.id}`,
           "data-bs-slide": "next"
-        }, [...d[1] || (d[1] = [
+        }, [...u[1] || (u[1] = [
           S("span", {
             class: "carousel-control-next-icon",
             "aria-hidden": "true"
           }, null, -1),
           S("span", { class: "visually-hidden" }, "Next", -1)
-        ])], 8, sa)
-      ], 64)) : y("", !0)
-    ], 10, Kt));
+        ])], 8, ha)
+      ], 64)) : g("", !0)
+    ], 10, na));
   }
-}), ia = ["data-bs-placement", "data-bs-title", "data-bs-trigger", "data-bs-html"], ra = /* @__PURE__ */ M({
+}), ma = ["data-bs-placement", "data-bs-title", "data-bs-trigger", "data-bs-html"], ya = /* @__PURE__ */ M({
   __name: "VibeTooltip",
   props: {
     content: { type: String, default: void 0 },
@@ -1673,44 +1705,44 @@ const pt = ["id"], yt = { class: "accordion-header" }, gt = ["data-bs-target", "
     html: { type: Boolean, default: !1 }
   },
   emits: ["component-error"],
-  setup(e, { expose: v, emit: t }) {
-    const a = e, l = t, s = E(null), o = E(null), r = async () => {
-      if (s.value) {
+  setup(e, { expose: r, emit: t }) {
+    const a = e, l = t, n = L(null), o = L(null), d = () => typeof window < "u" && ("ontouchstart" in window || navigator.maxTouchPoints > 0), v = h(() => d() && a.trigger === "hover focus" ? "click" : a.trigger), c = async () => {
+      if (n.value) {
         o.value && o.value.dispose();
         try {
-          const c = (await import("bootstrap")).Tooltip;
-          o.value = new c(s.value, {
+          const f = (await import("bootstrap")).Tooltip;
+          o.value = new f(n.value, {
             title: a.text || a.content || "",
             placement: a.placement,
-            trigger: a.trigger,
+            trigger: v.value,
             html: a.html
           });
-        } catch (u) {
+        } catch (m) {
           l("component-error", {
             message: "Bootstrap JS not loaded. Tooltip will use data attributes only.",
             componentName: "VibeTooltip",
-            originalError: u
+            originalError: m
           });
         }
       }
     };
-    return Y(r), X(() => {
+    return X(c), Y(() => {
       o.value && (o.value.dispose(), o.value = null);
     }), O([() => a.content, () => a.text], () => {
       o.value && o.value.setContent({ ".tooltip-inner": a.text || a.content || "" });
-    }), O([() => a.placement, () => a.trigger, () => a.html], r), v({ bsInstance: o }), (u, c) => (n(), i("span", {
+    }), O([() => a.placement, () => a.trigger, () => a.html], c), r({ bsInstance: o }), (m, f) => (i(), s("span", {
       ref_key: "tooltipRef",
-      ref: s,
+      ref: n,
       "data-bs-toggle": "tooltip",
       "data-bs-placement": e.placement,
       "data-bs-title": e.text || e.content,
       "data-bs-trigger": e.trigger,
       "data-bs-html": e.html
     }, [
-      N(u.$slots, "default")
-    ], 8, ia));
+      T(m.$slots, "default")
+    ], 8, ma));
   }
-}), da = ["data-bs-placement", "data-bs-title", "data-bs-content", "data-bs-trigger", "data-bs-html"], ua = /* @__PURE__ */ M({
+}), ga = ["data-bs-placement", "data-bs-title", "data-bs-content", "data-bs-trigger", "data-bs-html"], ka = /* @__PURE__ */ M({
   __name: "VibePopover",
   props: {
     title: { type: String, default: void 0 },
@@ -1721,38 +1753,38 @@ const pt = ["id"], yt = { class: "accordion-header" }, gt = ["data-bs-target", "
     html: { type: Boolean, default: !1 }
   },
   emits: ["component-error"],
-  setup(e, { expose: v, emit: t }) {
-    const a = e, l = t, s = E(null), o = E(null), r = async () => {
-      if (s.value) {
+  setup(e, { expose: r, emit: t }) {
+    const a = e, l = t, n = L(null), o = L(null), d = () => typeof window < "u" && ("ontouchstart" in window || navigator.maxTouchPoints > 0), v = h(() => d() && a.trigger === "hover focus" ? "click" : a.trigger), c = async () => {
+      if (n.value) {
         o.value && o.value.dispose();
         try {
-          const c = (await import("bootstrap")).Popover;
-          o.value = new c(s.value, {
+          const f = (await import("bootstrap")).Popover;
+          o.value = new f(n.value, {
             title: a.title,
             content: a.text || a.content || "",
             placement: a.placement,
-            trigger: a.trigger,
+            trigger: v.value,
             html: a.html
           });
-        } catch (u) {
+        } catch (m) {
           l("component-error", {
             message: "Bootstrap JS not loaded. Popover will use data attributes only.",
             componentName: "VibePopover",
-            originalError: u
+            originalError: m
           });
         }
       }
     };
-    return Y(r), X(() => {
+    return X(c), Y(() => {
       o.value && (o.value.dispose(), o.value = null);
     }), O([() => a.content, () => a.text, () => a.title], () => {
       o.value && o.value.setContent({
         ".popover-header": a.title || "",
         ".popover-body": a.text || a.content || ""
       });
-    }), O([() => a.placement, () => a.trigger, () => a.html], r), v({ bsInstance: o }), (u, c) => (n(), i("span", {
+    }), O([() => a.placement, () => a.trigger, () => a.html], c), r({ bsInstance: o }), (m, f) => (i(), s("span", {
       ref_key: "popoverRef",
-      ref: s,
+      ref: n,
       "data-bs-toggle": "popover",
       "data-bs-placement": e.placement,
       "data-bs-title": e.title,
@@ -1760,10 +1792,10 @@ const pt = ["id"], yt = { class: "accordion-header" }, gt = ["data-bs-target", "
       "data-bs-trigger": e.trigger,
       "data-bs-html": e.html
     }, [
-      N(u.$slots, "default")
-    ], 8, da));
+      T(m.$slots, "default")
+    ], 8, ga));
   }
-}), ca = /* @__PURE__ */ M({
+}), Sa = /* @__PURE__ */ M({
   __name: "VibeScrollspy",
   props: {
     target: { type: String, required: !0 },
@@ -1773,20 +1805,20 @@ const pt = ["id"], yt = { class: "accordion-header" }, gt = ["data-bs-target", "
     tag: { type: String, default: "div" }
   },
   emits: ["activate", "component-error"],
-  setup(e, { expose: v, emit: t }) {
-    const a = e, l = t, s = E(null), o = E(null), r = (c) => {
+  setup(e, { expose: r, emit: t }) {
+    const a = e, l = t, n = L(null), o = L(null), d = (c) => {
       l("activate", c);
     };
-    return Y(async () => {
-      if (s.value)
+    return X(async () => {
+      if (n.value)
         try {
-          const b = (await import("bootstrap")).ScrollSpy;
-          o.value = new b(s.value, {
+          const m = (await import("bootstrap")).ScrollSpy;
+          o.value = new m(n.value, {
             target: a.target,
             offset: a.offset,
             method: a.method,
             smoothScroll: a.smoothScroll
-          }), s.value.addEventListener("activate.bs.scrollspy", r);
+          }), n.value.addEventListener("activate.bs.scrollspy", d);
         } catch (c) {
           l("component-error", {
             message: "Bootstrap JS not loaded. ScrollSpy will use data attributes only.",
@@ -1794,13 +1826,13 @@ const pt = ["id"], yt = { class: "accordion-header" }, gt = ["data-bs-target", "
             originalError: c
           });
         }
-    }), X(() => {
-      s.value && s.value.removeEventListener("activate.bs.scrollspy", r), o.value && (o.value.dispose(), o.value = null);
-    }), v({ refresh: () => {
+    }), Y(() => {
+      n.value && n.value.removeEventListener("activate.bs.scrollspy", d), o.value && (o.value.dispose(), o.value = null);
+    }), r({ refresh: () => {
       o.value && o.value.refresh();
-    } }), (c, b) => (n(), z(A(e.tag), {
+    } }), (c, m) => (i(), q(A(e.tag), {
       ref_key: "scrollspyRef",
-      ref: s,
+      ref: n,
       "data-bs-spy": "scroll",
       "data-bs-target": e.target,
       "data-bs-offset": e.offset,
@@ -1810,12 +1842,12 @@ const pt = ["id"], yt = { class: "accordion-header" }, gt = ["data-bs-target", "
       style: { position: "relative", height: "100%", overflow: "auto" }
     }, {
       default: j(() => [
-        N(c.$slots, "default")
+        T(c.$slots, "default")
       ]),
       _: 3
     }, 8, ["data-bs-target", "data-bs-offset", "data-bs-method", "data-bs-smooth-scroll"]));
   }
-}), va = /* @__PURE__ */ M({
+}), $a = /* @__PURE__ */ M({
   __name: "VibeIcon",
   props: {
     // Icon name (e.g., 'house', 'heart-fill', 'star')
@@ -1834,14 +1866,14 @@ const pt = ["id"], yt = { class: "accordion-header" }, gt = ["data-bs-target", "
     rotate: { type: Number, default: void 0 }
   },
   emits: ["click", "component-error"],
-  setup(e, { emit: v }) {
-    const t = e, a = v, l = m(() => {
-      const r = ["bi", `bi-${t.icon}`];
-      return t.size && (["1x", "2x", "3x", "4x", "5x"].includes(t.size) || r.push(`bi-${t.size}`)), t.customClass && r.push(t.customClass), r.join(" ");
-    }), s = m(() => {
-      const r = {};
+  setup(e, { emit: r }) {
+    const t = e, a = r, l = h(() => {
+      const d = ["bi", `bi-${t.icon}`];
+      return t.size && (["1x", "2x", "3x", "4x", "5x"].includes(t.size) || d.push(`bi-${t.size}`)), t.customClass && d.push(t.customClass), d.join(" ");
+    }), n = h(() => {
+      const d = {};
       if (t.fontSize)
-        r.fontSize = t.fontSize;
+        d.fontSize = t.fontSize;
       else if (t.size) {
         const c = {
           "1x": "1rem",
@@ -1850,51 +1882,51 @@ const pt = ["id"], yt = { class: "accordion-header" }, gt = ["data-bs-target", "
           "4x": "4rem",
           "5x": "5rem"
         };
-        c[t.size] && (r.fontSize = c[t.size]);
+        c[t.size] && (d.fontSize = c[t.size]);
       }
-      t.color && (r.color = t.color);
-      const u = [];
-      return t.flipH && u.push("scaleX(-1)"), t.flipV && u.push("scaleY(-1)"), t.rotate && u.push(`rotate(${t.rotate}deg)`), u.length > 0 && (r.transform = u.join(" "), r.display = "inline-block"), Object.keys(r).length > 0 ? r : void 0;
-    }), o = (r) => {
-      a("click", r);
+      t.color && (d.color = t.color);
+      const v = [];
+      return t.flipH && v.push("scaleX(-1)"), t.flipV && v.push("scaleY(-1)"), t.rotate && v.push(`rotate(${t.rotate}deg)`), v.length > 0 && (d.transform = v.join(" "), d.display = "inline-block"), Object.keys(d).length > 0 ? d : void 0;
+    }), o = (d) => {
+      a("click", d);
     };
-    return (r, u) => (n(), i("i", {
+    return (d, v) => (i(), s("i", {
       class: $(l.value),
-      style: K(s.value),
+      style: Z(n.value),
       "aria-hidden": !0,
       onClick: o
     }, null, 6));
   }
-}), fa = { class: "vibe-datatable" }, ba = { class: "row mb-3" }, ha = {
+}), wa = { class: "vibe-datatable" }, Va = { class: "row mb-3" }, Ca = {
   key: 0,
   class: "col-md-6 mb-2 mb-md-0"
-}, ma = ["placeholder"], pa = {
+}, xa = ["placeholder"], Ba = {
   key: 1,
   class: "col-md-6"
-}, ya = { class: "d-flex justify-content-md-end align-items-center" }, ga = ["value"], ka = ["onClick"], Sa = {
+}, La = { class: "d-flex justify-content-md-end align-items-center" }, Ta = ["value"], Na = ["onClick"], Ea = {
   key: 0,
   class: "ms-1"
-}, $a = ["onClick"], wa = { key: 0 }, Va = ["colspan"], Ca = { class: "row" }, xa = {
+}, Ma = ["onClick"], Ia = ["data-label"], Ra = { key: 0 }, Fa = ["colspan"], Pa = { class: "row" }, qa = {
   key: 0,
   class: "col-md-6 mb-2 mb-md-0"
-}, Ba = { class: "datatable-info" }, La = {
+}, za = { class: "datatable-info" }, Aa = {
   key: 1,
   class: "col-md-6"
-}, Ta = { class: "pagination justify-content-md-end mb-0" }, Na = {
+}, ja = { class: "pagination justify-content-md-end mb-0" }, Oa = {
   key: 0,
   class: "page-item"
-}, Ea = {
+}, Ha = {
   key: 1,
   class: "page-item disabled"
-}, Ma = ["onClick"], Ia = {
+}, Da = ["onClick"], Ga = {
   key: 2,
   class: "page-item disabled"
-}, Fa = {
+}, Xa = {
   key: 3,
   class: "page-item"
-}, Pa = /* @__PURE__ */ M({
+}, Ya = /* @__PURE__ */ M({
   __name: "VibeDataTable",
-  props: /* @__PURE__ */ ue({
+  props: /* @__PURE__ */ pe({
     // Data
     items: { type: Array, default: () => [] },
     columns: { type: Array, required: !0 },
@@ -1907,6 +1939,7 @@ const pt = ["id"], yt = { class: "accordion-header" }, gt = ["data-bs-target", "
     hover: { type: Boolean, default: !1 },
     small: { type: Boolean, default: !1 },
     responsive: { type: Boolean, default: !0 },
+    stack: { type: Boolean, default: !1 },
     variant: { type: String, default: void 0 },
     // Features
     searchable: { type: Boolean, default: !0 },
@@ -1933,233 +1966,229 @@ const pt = ["id"], yt = { class: "accordion-header" }, gt = ["data-bs-target", "
     sortDesc: { type: Boolean, default: !1 },
     sortDescModifiers: {}
   }),
-  emits: /* @__PURE__ */ ue(["row-clicked", "component-error"], ["update:currentPage", "update:perPage", "update:sortBy", "update:sortDesc"]),
-  setup(e, { emit: v }) {
-    const t = e, a = _(e, "currentPage"), l = _(e, "perPage"), s = _(e, "sortBy"), o = _(e, "sortDesc"), r = v, u = E(""), c = E(null), b = E(""), g = (B, L) => t.rowKey && B[t.rowKey] !== void 0 ? String(B[t.rowKey]) : L;
-    O(u, (B) => {
+  emits: /* @__PURE__ */ pe(["row-clicked", "component-error"], ["update:currentPage", "update:perPage", "update:sortBy", "update:sortDesc"]),
+  setup(e, { emit: r }) {
+    const t = e, a = oe(e, "currentPage"), l = oe(e, "perPage"), n = oe(e, "sortBy"), o = oe(e, "sortDesc"), d = r, v = L(""), c = L(null), m = L(""), f = (x, N) => t.rowKey && x[t.rowKey] !== void 0 ? String(x[t.rowKey]) : N;
+    O(v, (x) => {
       c.value !== null && clearTimeout(c.value), c.value = setTimeout(() => {
-        b.value = B, a.value = 1, c.value = null;
+        m.value = x, a.value = 1, c.value = null;
       }, t.searchDebounce);
-    }), X(() => {
+    }), Y(() => {
       c.value !== null && (clearTimeout(c.value), c.value = null);
     });
-    const C = m(() => {
-      if (!t.searchable || !b.value)
+    const V = h(() => {
+      if (!t.searchable || !m.value)
         return t.items || [];
-      const B = b.value.toLowerCase();
-      return (t.items || []).filter((L) => (t.columns || []).some((T) => {
-        if (T.searchable === !1) return !1;
-        const D = L[T.key];
-        return D == null ? !1 : String(D).toLowerCase().includes(B);
+      const x = m.value.toLowerCase();
+      return (t.items || []).filter((N) => (t.columns || []).some((E) => {
+        if (E.searchable === !1) return !1;
+        const D = N[E.key];
+        return D == null ? !1 : String(D).toLowerCase().includes(x);
       }));
-    }), p = (B, L, T) => {
-      if (B == null) return 1;
-      if (L == null) return -1;
-      if (typeof B == "string" && typeof L == "string") {
-        const D = B.toLowerCase(), U = L.toLowerCase();
-        return D < U ? T ? 1 : -1 : D > U ? T ? -1 : 1 : 0;
+    }), y = (x, N, E) => {
+      if (x == null) return 1;
+      if (N == null) return -1;
+      if (typeof x == "string" && typeof N == "string") {
+        const D = x.toLowerCase(), U = N.toLowerCase();
+        return D < U ? E ? 1 : -1 : D > U ? E ? -1 : 1 : 0;
       }
-      if (typeof B == "number" && typeof L == "number")
-        return B < L ? T ? 1 : -1 : B > L ? T ? -1 : 1 : 0;
-      if (typeof B == "boolean" && typeof L == "boolean")
-        return B === L ? 0 : (B ? 1 : -1) * (T ? -1 : 1);
-      if (B instanceof Date && L instanceof Date) {
-        const D = B.getTime(), U = L.getTime();
-        return D < U ? T ? 1 : -1 : D > U ? T ? -1 : 1 : 0;
+      if (typeof x == "number" && typeof N == "number")
+        return x < N ? E ? 1 : -1 : x > N ? E ? -1 : 1 : 0;
+      if (typeof x == "boolean" && typeof N == "boolean")
+        return x === N ? 0 : (x ? 1 : -1) * (E ? -1 : 1);
+      if (x instanceof Date && N instanceof Date) {
+        const D = x.getTime(), U = N.getTime();
+        return D < U ? E ? 1 : -1 : D > U ? E ? -1 : 1 : 0;
       }
       return 0;
-    }, d = m(() => {
-      if (!t.sortable || !s.value)
-        return C.value;
-      const B = [...C.value], L = s.value;
-      return B.sort((T, D) => p(T[L], D[L], o.value)), B;
-    }), f = m(() => {
+    }, u = h(() => {
+      if (!t.sortable || !n.value)
+        return V.value;
+      const x = [...V.value], N = n.value;
+      return x.sort((E, D) => y(E[N], D[N], o.value)), x;
+    }), b = h(() => {
       if (!t.paginated)
-        return d.value;
-      const B = (a.value - 1) * l.value, L = B + l.value;
-      return d.value.slice(B, L);
-    }), h = m(() => t.items.length), w = m(() => C.value.length), x = m(() => Math.ceil(w.value / l.value)), V = m(() => w.value === 0 ? 0 : (a.value - 1) * l.value + 1), q = m(() => {
-      const B = a.value * l.value;
-      return Math.min(B, w.value);
-    }), P = m(() => (w.value !== h.value ? t.filteredInfoText : t.infoText).replace("{start}", String(V.value)).replace("{end}", String(q.value)).replace("{total}", String(w.value)).replace("{totalRows}", String(h.value))), R = m(() => {
-      const B = ["table"];
-      return t.striped && B.push("table-striped"), t.bordered && B.push("table-bordered"), t.borderless && B.push("table-borderless"), t.hover && B.push("table-hover"), t.small && B.push("table-sm"), t.variant && B.push(`table-${t.variant}`), B.join(" ");
-    }), Q = (B) => {
-      !t.sortable || B.sortable === !1 || (s.value === B.key ? o.value = !o.value : (s.value = B.key, o.value = !1));
-    }, W = (B) => {
-      B < 1 || B > x.value || (a.value = B);
-    }, te = () => {
+        return u.value;
+      const x = (a.value - 1) * l.value, N = x + l.value;
+      return u.value.slice(x, N);
+    }), p = h(() => t.items.length), w = h(() => V.value.length), B = h(() => Math.ceil(w.value / l.value)), C = h(() => w.value === 0 ? 0 : (a.value - 1) * l.value + 1), z = h(() => {
+      const x = a.value * l.value;
+      return Math.min(x, w.value);
+    }), F = h(() => (w.value !== p.value ? t.filteredInfoText : t.infoText).replace("{start}", String(C.value)).replace("{end}", String(z.value)).replace("{total}", String(w.value)).replace("{totalRows}", String(p.value))), K = h(() => {
+      const x = ["table"];
+      return t.striped && x.push("table-striped"), t.bordered && x.push("table-bordered"), t.borderless && x.push("table-borderless"), t.hover && x.push("table-hover"), t.small && x.push("table-sm"), t.stack && x.push("vibe-table-stack"), t.variant && x.push(`table-${t.variant}`), x.join(" ");
+    }), _ = (x) => {
+      !t.sortable || x.sortable === !1 || (n.value === x.key ? o.value = !o.value : (n.value = x.key, o.value = !1));
+    }, W = (x) => {
+      x < 1 || x > B.value || (a.value = x);
+    }, P = () => {
       a.value = 1;
-    }, fe = (B, L) => {
-      r("row-clicked", B, L);
-    }, be = (B, L) => {
-      const T = B[L.key];
-      return L.formatter ? L.formatter(T, B) : T;
-    }, he = (B) => !t.sortable || B.sortable === !1 ? "" : s.value !== B.key ? "⇅" : o.value ? "↓" : "↑", me = (B) => {
-      const L = { ...B.thStyle };
-      return t.sortable && B.sortable !== !1 && (L.cursor = "pointer"), L;
+    }, Q = (x, N) => {
+      d("row-clicked", x, N);
+    }, re = (x, N) => {
+      const E = x[N.key];
+      return N.formatter ? N.formatter(E, x) : E;
+    }, de = (x) => !t.sortable || x.sortable === !1 ? "" : n.value !== x.key ? "⇅" : o.value ? "↓" : "↑", Ve = (x) => {
+      const N = { ...x.thStyle };
+      return t.sortable && x.sortable !== !1 && (N.cursor = "pointer"), N;
     };
-    return (B, L) => (n(), i("div", fa, [
-      S("div", ba, [
-        e.searchable ? (n(), i("div", ha, [
-          de(S("input", {
-            "onUpdate:modelValue": L[0] || (L[0] = (T) => u.value = T),
+    return (x, N) => (i(), s("div", wa, [
+      S("div", Va, [
+        e.searchable ? (i(), s("div", Ca, [
+          he(S("input", {
+            "onUpdate:modelValue": N[0] || (N[0] = (E) => v.value = E),
             type: "search",
             class: "form-control",
             placeholder: e.searchPlaceholder
-          }, null, 8, ma), [
-            [ke, u.value]
+          }, null, 8, xa), [
+            [Be, v.value]
           ])
-        ])) : y("", !0),
-        e.showPerPage && e.paginated ? (n(), i("div", pa, [
-          S("div", ya, [
-            L[6] || (L[6] = S("label", { class: "me-2 mb-0" }, "Show", -1)),
-            de(S("select", {
-              "onUpdate:modelValue": L[1] || (L[1] = (T) => l.value = T),
+        ])) : g("", !0),
+        e.showPerPage && e.paginated ? (i(), s("div", Ba, [
+          S("div", La, [
+            N[6] || (N[6] = S("label", { class: "me-2 mb-0" }, "Show", -1)),
+            he(S("select", {
+              "onUpdate:modelValue": N[1] || (N[1] = (E) => l.value = E),
               class: "form-select form-select-sm",
               style: { width: "auto" },
-              onChange: te
+              onChange: P
             }, [
-              (n(!0), i(F, null, H(e.perPageOptions, (T) => (n(), i("option", {
-                key: T,
-                value: T
-              }, k(T), 9, ga))), 128))
+              (i(!0), s(R, null, H(e.perPageOptions, (E) => (i(), s("option", {
+                key: E,
+                value: E
+              }, k(E), 9, Ta))), 128))
             ], 544), [
               [
-                Se,
+                Le,
                 l.value,
                 void 0,
                 { number: !0 }
               ]
             ]),
-            L[7] || (L[7] = S("span", { class: "ms-2" }, "entries", -1))
+            N[7] || (N[7] = S("span", { class: "ms-2" }, "entries", -1))
           ])
-        ])) : y("", !0)
+        ])) : g("", !0)
       ]),
       S("div", {
         class: $({ "table-responsive": e.responsive })
       }, [
         S("table", {
-          class: $(R.value)
+          class: $(K.value)
         }, [
           S("thead", null, [
             S("tr", null, [
-              (n(!0), i(F, null, H(e.columns, (T) => (n(), i("th", {
-                key: T.key,
-                class: $(T.headerClass),
-                style: K(me(T)),
-                onClick: (D) => Q(T)
+              (i(!0), s(R, null, H(e.columns, (E) => (i(), s("th", {
+                key: E.key,
+                class: $(E.headerClass),
+                style: Z(Ve(E)),
+                onClick: (D) => _(E)
               }, [
-                I(k(T.label) + " ", 1),
-                e.sortable && T.sortable !== !1 ? (n(), i("span", Sa, k(he(T)), 1)) : y("", !0)
-              ], 14, ka))), 128))
+                I(k(E.label) + " ", 1),
+                e.sortable && E.sortable !== !1 ? (i(), s("span", Ea, k(de(E)), 1)) : g("", !0)
+              ], 14, Na))), 128))
             ])
           ]),
           S("tbody", null, [
-            (n(!0), i(F, null, H(f.value, (T, D) => (n(), i("tr", {
-              key: g(T, D),
-              onClick: (U) => fe(T, D),
+            (i(!0), s(R, null, H(b.value, (E, D) => (i(), s("tr", {
+              key: f(E, D),
+              onClick: (U) => Q(E, D),
               style: { cursor: "pointer" }
             }, [
-              (n(!0), i(F, null, H(e.columns, (U) => (n(), i("td", {
+              (i(!0), s(R, null, H(e.columns, (U) => (i(), s("td", {
                 key: U.key,
                 class: $(U.class),
-                style: K(U.tdStyle)
+                style: Z(U.tdStyle),
+                "data-label": U.label
               }, [
-                N(B.$slots, `cell(${U.key})`, {
-                  item: T,
-                  value: T[U.key],
+                T(x.$slots, `cell(${U.key})`, {
+                  item: E,
+                  value: E[U.key],
                   index: D
                 }, () => [
-                  I(k(be(T, U)), 1)
+                  I(k(re(E, U)), 1)
                 ], !0)
-              ], 6))), 128))
-            ], 8, $a))), 128)),
-            f.value.length === 0 && e.showEmpty ? (n(), i("tr", wa, [
+              ], 14, Ia))), 128))
+            ], 8, Ma))), 128)),
+            b.value.length === 0 && e.showEmpty ? (i(), s("tr", Ra, [
               S("td", {
                 colspan: e.columns?.length || 1,
                 class: "text-center"
-              }, k(e.emptyText), 9, Va)
-            ])) : y("", !0)
+              }, k(e.emptyText), 9, Fa)
+            ])) : g("", !0)
           ])
         ], 2)
       ], 2),
-      S("div", Ca, [
-        e.showInfo ? (n(), i("div", xa, [
-          S("div", Ba, k(P.value), 1)
-        ])) : y("", !0),
-        e.paginated && x.value > 1 ? (n(), i("div", La, [
+      S("div", Pa, [
+        e.showInfo ? (i(), s("div", qa, [
+          S("div", za, k(F.value), 1)
+        ])) : g("", !0),
+        e.paginated && B.value > 1 ? (i(), s("div", Aa, [
           S("nav", null, [
-            S("ul", Ta, [
+            S("ul", ja, [
               S("li", {
                 class: $(["page-item", { disabled: a.value === 1 }])
               }, [
                 S("a", {
                   class: "page-link",
                   href: "#",
-                  onClick: L[2] || (L[2] = Z((T) => W(a.value - 1), ["prevent"]))
+                  onClick: N[2] || (N[2] = le((E) => W(a.value - 1), ["prevent"]))
                 }, " Previous ")
               ], 2),
-              a.value > 3 ? (n(), i("li", Na, [
+              a.value > 3 ? (i(), s("li", Oa, [
                 S("a", {
                   class: "page-link",
                   href: "#",
-                  onClick: L[3] || (L[3] = Z((T) => W(1), ["prevent"]))
+                  onClick: N[3] || (N[3] = le((E) => W(1), ["prevent"]))
                 }, "1")
-              ])) : y("", !0),
-              a.value > 4 ? (n(), i("li", Ea, [...L[8] || (L[8] = [
+              ])) : g("", !0),
+              a.value > 4 ? (i(), s("li", Ha, [...N[8] || (N[8] = [
                 S("span", { class: "page-link" }, "...", -1)
-              ])])) : y("", !0),
-              (n(!0), i(F, null, H(Array.from({ length: x.value }, (T, D) => D + 1).filter(
-                (T) => T >= a.value - 2 && T <= a.value + 2
-              ), (T) => (n(), i("li", {
-                key: T,
-                class: $(["page-item", { active: T === a.value }])
+              ])])) : g("", !0),
+              (i(!0), s(R, null, H(Array.from({ length: B.value }, (E, D) => D + 1).filter(
+                (E) => E >= a.value - 2 && E <= a.value + 2
+              ), (E) => (i(), s("li", {
+                key: E,
+                class: $(["page-item", { active: E === a.value }])
               }, [
                 S("a", {
                   class: "page-link",
                   href: "#",
-                  onClick: Z((D) => W(T), ["prevent"])
-                }, k(T), 9, Ma)
+                  onClick: le((D) => W(E), ["prevent"])
+                }, k(E), 9, Da)
               ], 2))), 128)),
-              a.value < x.value - 3 ? (n(), i("li", Ia, [...L[9] || (L[9] = [
+              a.value < B.value - 3 ? (i(), s("li", Ga, [...N[9] || (N[9] = [
                 S("span", { class: "page-link" }, "...", -1)
-              ])])) : y("", !0),
-              a.value < x.value - 2 ? (n(), i("li", Fa, [
+              ])])) : g("", !0),
+              a.value < B.value - 2 ? (i(), s("li", Xa, [
                 S("a", {
                   class: "page-link",
                   href: "#",
-                  onClick: L[4] || (L[4] = Z((T) => W(x.value), ["prevent"]))
-                }, k(x.value), 1)
-              ])) : y("", !0),
+                  onClick: N[4] || (N[4] = le((E) => W(B.value), ["prevent"]))
+                }, k(B.value), 1)
+              ])) : g("", !0),
               S("li", {
-                class: $(["page-item", { disabled: a.value === x.value }])
+                class: $(["page-item", { disabled: a.value === B.value }])
               }, [
                 S("a", {
                   class: "page-link",
                   href: "#",
-                  onClick: L[5] || (L[5] = Z((T) => W(a.value + 1), ["prevent"]))
+                  onClick: N[5] || (N[5] = le((E) => W(a.value + 1), ["prevent"]))
                 }, " Next ")
               ], 2)
             ])
           ])
-        ])) : y("", !0)
+        ])) : g("", !0)
       ])
     ]));
   }
-}), re = (e, v) => {
-  const t = e.__vccOpts || e;
-  for (const [a, l] of v)
-    t[a] = l;
-  return t;
-}, Ra = /* @__PURE__ */ re(Pa, [["__scopeId", "data-v-d5aa8072"]]), qa = ["for"], za = {
+}), Ua = /* @__PURE__ */ ae(Ya, [["__scopeId", "data-v-c496dc70"]]), Ja = ["for"], Ka = {
   key: 0,
   class: "text-danger"
-}, Aa = ["id", "type", "value", "placeholder", "disabled", "readonly", "required", "aria-invalid", "aria-describedby"], ja = ["id"], Oa = {
+}, Wa = ["id", "type", "value", "placeholder", "disabled", "readonly", "required", "aria-invalid", "aria-describedby"], Qa = ["id"], Za = {
   key: 0,
   class: "valid-feedback",
   style: { display: "block" }
-}, Ha = ["id"], Da = /* @__PURE__ */ M({
+}, _a = ["id"], el = ["id", "type", "value", "placeholder", "disabled", "readonly", "required", "aria-invalid"], tl = /* @__PURE__ */ M({
   __name: "VibeFormInput",
   props: {
     modelValue: {
@@ -2179,36 +2208,54 @@ const pt = ["id"], yt = { class: "accordion-header" }, gt = ["data-bs-target", "
     validationRules: { type: [Array, Function], default: void 0 },
     validateOn: { type: String, default: "blur" },
     helpText: { type: String, default: void 0 },
-    plaintext: { type: Boolean, default: !1 }
+    plaintext: { type: Boolean, default: !1 },
+    noWrapper: { type: Boolean, default: !1 },
+    focusRing: { type: Boolean, default: !1 }
   },
   emits: ["update:modelValue", "validate", "blur", "focus", "input", "change"],
-  setup(e, { emit: v }) {
-    const t = e, a = v, l = J("vibeFormGroup", null), s = m(() => t.id || l?.consumeId() || G("input")), o = m(() => !!t.label && !l?.hasLabel.value), r = m(() => !!t.validationState && !l?.hasValidation.value), u = m(() => !!t.helpText && !l?.hasHelp.value), c = m(() => {
-      const d = [];
-      return t.plaintext ? d.push("form-control-plaintext") : (d.push("form-control"), t.size && d.push(`form-control-${t.size}`)), t.validationState === "valid" && d.push("is-valid"), t.validationState === "invalid" && d.push("is-invalid"), d.join(" ");
-    }), b = (d) => {
-      const f = d.target, h = t.type === "number" ? f.value === "" ? "" : Number(f.value) : f.value;
-      a("update:modelValue", h), a("input", d), t.validateOn === "input" && a("validate");
-    }, g = (d) => {
-      a("change", d), t.validateOn === "change" && a("validate");
-    }, C = (d) => {
-      a("blur", d), t.validateOn === "blur" && a("validate");
-    }, p = (d) => {
-      a("focus", d);
+  setup(e, { emit: r }) {
+    const t = e, a = r, l = J("vibeFormGroup", null), n = h(() => t.id || l?.consumeId() || G("input")), o = h(() => !!t.label && !l?.hasLabel.value), d = h(() => !!t.validationState && !l?.hasValidation.value), v = h(() => !!t.helpText && !l?.hasHelp.value), c = h(() => {
+      const u = [];
+      return t.plaintext ? u.push("form-control-plaintext") : (u.push("form-control"), t.size && u.push(`form-control-${t.size}`)), t.validationState === "valid" && u.push("is-valid"), t.validationState === "invalid" && u.push("is-invalid"), t.focusRing && u.push("focus-ring"), u.join(" ");
+    }), m = (u) => {
+      const b = u.target, p = t.type === "number" ? b.value === "" ? "" : Number(b.value) : b.value;
+      a("update:modelValue", p), a("input", u), t.validateOn === "input" && a("validate");
+    }, f = (u) => {
+      a("change", u), t.validateOn === "change" && a("validate");
+    }, V = (u) => {
+      a("blur", u), t.validateOn === "blur" && a("validate");
+    }, y = (u) => {
+      a("focus", u);
     };
-    return (d, f) => (n(), i("div", {
-      class: $({ "mb-3": o.value || u.value || r.value })
+    return (u, b) => e.noWrapper ? (i(), s("input", {
+      key: 1,
+      id: n.value,
+      type: e.type,
+      class: $(c.value),
+      value: e.modelValue,
+      placeholder: e.placeholder,
+      disabled: e.disabled,
+      readonly: e.readonly || e.plaintext,
+      required: e.required,
+      "aria-invalid": e.validationState === "invalid",
+      onInput: m,
+      onChange: f,
+      onBlur: V,
+      onFocus: y
+    }, null, 42, el)) : (i(), s("div", {
+      key: 0,
+      class: $({ "mb-3": o.value || v.value || d.value })
     }, [
-      o.value ? (n(), i("label", {
+      o.value ? (i(), s("label", {
         key: 0,
-        for: s.value,
+        for: n.value,
         class: "form-label"
       }, [
         I(k(e.label) + " ", 1),
-        e.required ? (n(), i("span", za, "*")) : y("", !0)
-      ], 8, qa)) : y("", !0),
+        e.required ? (i(), s("span", Ka, "*")) : g("", !0)
+      ], 8, Ja)) : g("", !0),
       S("input", {
-        id: s.value,
+        id: n.value,
         type: e.type,
         class: $(c.value),
         value: e.modelValue,
@@ -2217,41 +2264,41 @@ const pt = ["id"], yt = { class: "accordion-header" }, gt = ["data-bs-target", "
         readonly: e.readonly || e.plaintext,
         required: e.required,
         "aria-invalid": e.validationState === "invalid",
-        "aria-describedby": e.validationMessage || e.helpText ? `${s.value}-feedback` : void 0,
-        onInput: b,
-        onChange: g,
-        onBlur: C,
-        onFocus: p
-      }, null, 42, Aa),
-      u.value ? (n(), i("div", {
+        "aria-describedby": e.validationMessage || e.helpText ? `${n.value}-feedback` : void 0,
+        onInput: m,
+        onChange: f,
+        onBlur: V,
+        onFocus: y
+      }, null, 42, Wa),
+      v.value ? (i(), s("div", {
         key: 1,
-        id: `${s.value}-feedback`,
+        id: `${n.value}-feedback`,
         class: "form-text"
-      }, k(e.helpText), 9, ja)) : y("", !0),
-      r.value ? (n(), i(F, { key: 2 }, [
-        e.validationState === "valid" ? (n(), i("div", Oa, k(e.validationMessage || "Looks good!"), 1)) : y("", !0),
-        e.validationState === "invalid" ? (n(), i("div", {
+      }, k(e.helpText), 9, Qa)) : g("", !0),
+      d.value ? (i(), s(R, { key: 2 }, [
+        e.validationState === "valid" ? (i(), s("div", Za, k(e.validationMessage || "Looks good!"), 1)) : g("", !0),
+        e.validationState === "invalid" ? (i(), s("div", {
           key: 1,
-          id: `${s.value}-feedback`,
+          id: `${n.value}-feedback`,
           class: "invalid-feedback",
           style: { display: "block" }
-        }, k(e.validationMessage || "Please provide a valid value."), 9, Ha)) : y("", !0)
-      ], 64)) : y("", !0)
+        }, k(e.validationMessage || "Please provide a valid value."), 9, _a)) : g("", !0)
+      ], 64)) : g("", !0)
     ], 2));
   }
-}), Ga = ["for"], Xa = {
+}), al = ["for"], ll = {
   key: 0,
   class: "text-danger"
-}, Ya = ["id", "value", "multiple", "size", "disabled", "required", "aria-invalid", "aria-describedby"], Ua = {
+}, ol = ["id", "value", "multiple", "size", "disabled", "required", "aria-invalid", "aria-describedby"], nl = {
   key: 0,
   value: "",
   disabled: "",
   selected: ""
-}, Ja = ["value", "disabled"], Ka = ["id"], Qa = {
+}, il = ["value", "disabled"], sl = ["id"], rl = {
   key: 0,
   class: "valid-feedback",
   style: { display: "block" }
-}, Wa = ["id"], Za = /* @__PURE__ */ M({
+}, dl = ["id"], ul = /* @__PURE__ */ M({
   __name: "VibeFormSelect",
   props: {
     modelValue: {
@@ -2275,34 +2322,34 @@ const pt = ["id"], yt = { class: "accordion-header" }, gt = ["data-bs-target", "
     helpText: { type: String, default: void 0 }
   },
   emits: ["update:modelValue", "validate", "blur", "focus", "change"],
-  setup(e, { emit: v }) {
-    const t = e, a = v, l = J("vibeFormGroup", null), s = m(() => t.id || l?.consumeId() || G("select")), o = m(() => !!t.label && !l?.hasLabel.value), r = m(() => !!t.validationState && !l?.hasValidation.value), u = m(() => !!t.helpText && !l?.hasHelp.value), c = m(() => {
-      const d = ["form-select"];
-      return t.size && d.push(`form-select-${t.size}`), t.validationState === "valid" && d.push("is-valid"), t.validationState === "invalid" && d.push("is-invalid"), d.join(" ");
-    }), b = (d) => {
-      const f = d.target;
-      let h;
-      t.multiple ? h = Array.from(f.selectedOptions).map((w) => w.value) : h = f.value, a("update:modelValue", h);
-    }, g = (d) => {
-      a("change", d), t.validateOn === "change" && a("validate");
-    }, C = (d) => {
-      a("blur", d), t.validateOn === "blur" && a("validate");
-    }, p = (d) => {
-      a("focus", d);
+  setup(e, { emit: r }) {
+    const t = e, a = r, l = J("vibeFormGroup", null), n = h(() => t.id || l?.consumeId() || G("select")), o = h(() => !!t.label && !l?.hasLabel.value), d = h(() => !!t.validationState && !l?.hasValidation.value), v = h(() => !!t.helpText && !l?.hasHelp.value), c = h(() => {
+      const u = ["form-select"];
+      return t.size && u.push(`form-select-${t.size}`), t.validationState === "valid" && u.push("is-valid"), t.validationState === "invalid" && u.push("is-invalid"), u.join(" ");
+    }), m = (u) => {
+      const b = u.target;
+      let p;
+      t.multiple ? p = Array.from(b.selectedOptions).map((w) => w.value) : p = b.value, a("update:modelValue", p);
+    }, f = (u) => {
+      a("change", u), t.validateOn === "change" && a("validate");
+    }, V = (u) => {
+      a("blur", u), t.validateOn === "blur" && a("validate");
+    }, y = (u) => {
+      a("focus", u);
     };
-    return (d, f) => (n(), i("div", {
-      class: $({ "mb-3": o.value || u.value || r.value })
+    return (u, b) => (i(), s("div", {
+      class: $({ "mb-3": o.value || v.value || d.value })
     }, [
-      o.value ? (n(), i("label", {
+      o.value ? (i(), s("label", {
         key: 0,
-        for: s.value,
+        for: n.value,
         class: "form-label"
       }, [
         I(k(e.label) + " ", 1),
-        e.required ? (n(), i("span", Xa, "*")) : y("", !0)
-      ], 8, Ga)) : y("", !0),
+        e.required ? (i(), s("span", ll, "*")) : g("", !0)
+      ], 8, al)) : g("", !0),
       S("select", {
-        id: s.value,
+        id: n.value,
         class: $(c.value),
         value: e.modelValue,
         multiple: e.multiple,
@@ -2310,48 +2357,48 @@ const pt = ["id"], yt = { class: "accordion-header" }, gt = ["data-bs-target", "
         disabled: e.disabled,
         required: e.required,
         "aria-invalid": e.validationState === "invalid",
-        "aria-describedby": e.validationMessage || e.helpText ? `${s.value}-feedback` : void 0,
-        onInput: b,
-        onChange: g,
-        onBlur: C,
-        onFocus: p
+        "aria-describedby": e.validationMessage || e.helpText ? `${n.value}-feedback` : void 0,
+        onInput: m,
+        onChange: f,
+        onBlur: V,
+        onFocus: y
       }, [
-        e.placeholder ? (n(), i("option", Ua, k(e.placeholder), 1)) : y("", !0),
-        N(d.$slots, "default", {}, () => [
-          (n(!0), i(F, null, H(e.options, (h) => (n(), i("option", {
-            key: String(h.value),
-            value: h.value,
-            disabled: h.disabled
-          }, k(h.text), 9, Ja))), 128))
+        e.placeholder ? (i(), s("option", nl, k(e.placeholder), 1)) : g("", !0),
+        T(u.$slots, "default", {}, () => [
+          (i(!0), s(R, null, H(e.options, (p) => (i(), s("option", {
+            key: String(p.value),
+            value: p.value,
+            disabled: p.disabled
+          }, k(p.text), 9, il))), 128))
         ])
-      ], 42, Ya),
-      u.value ? (n(), i("div", {
+      ], 42, ol),
+      v.value ? (i(), s("div", {
         key: 1,
-        id: `${s.value}-feedback`,
+        id: `${n.value}-feedback`,
         class: "form-text"
-      }, k(e.helpText), 9, Ka)) : y("", !0),
-      r.value ? (n(), i(F, { key: 2 }, [
-        e.validationState === "valid" ? (n(), i("div", Qa, k(e.validationMessage || "Looks good!"), 1)) : y("", !0),
-        e.validationState === "invalid" ? (n(), i("div", {
+      }, k(e.helpText), 9, sl)) : g("", !0),
+      d.value ? (i(), s(R, { key: 2 }, [
+        e.validationState === "valid" ? (i(), s("div", rl, k(e.validationMessage || "Looks good!"), 1)) : g("", !0),
+        e.validationState === "invalid" ? (i(), s("div", {
           key: 1,
-          id: `${s.value}-feedback`,
+          id: `${n.value}-feedback`,
           class: "invalid-feedback",
           style: { display: "block" }
-        }, k(e.validationMessage || "Please select an option."), 9, Wa)) : y("", !0)
-      ], 64)) : y("", !0)
+        }, k(e.validationMessage || "Please select an option."), 9, dl)) : g("", !0)
+      ], 64)) : g("", !0)
     ], 2));
   }
-}), _a = ["for"], el = {
+}), cl = ["for"], vl = {
   key: 0,
   class: "text-danger"
-}, tl = ["id", "value", "placeholder", "rows", "maxlength", "disabled", "readonly", "required", "aria-invalid", "aria-describedby"], al = ["id"], ll = {
+}, fl = ["id", "value", "placeholder", "rows", "maxlength", "disabled", "readonly", "required", "aria-invalid", "aria-describedby"], bl = ["id"], hl = {
   key: 0,
   class: "ms-auto"
-}, ol = {
+}, pl = {
   key: 0,
   class: "valid-feedback",
   style: { display: "block" }
-}, sl = ["id"], nl = /* @__PURE__ */ M({
+}, ml = ["id"], yl = /* @__PURE__ */ M({
   __name: "VibeFormTextarea",
   props: {
     modelValue: {
@@ -2376,37 +2423,37 @@ const pt = ["id"], yt = { class: "accordion-header" }, gt = ["data-bs-target", "
     showCharCount: { type: Boolean, default: !1 }
   },
   emits: ["update:modelValue", "validate", "blur", "focus", "input", "change"],
-  setup(e, { emit: v }) {
-    const t = e, a = v, l = J("vibeFormGroup", null), s = m(() => t.id || l?.consumeId() || G("textarea")), o = m(() => !!t.label && !l?.hasLabel.value), r = m(() => !!t.validationState && !l?.hasValidation.value), u = m(() => (!!t.helpText || t.showCharCount) && !l?.hasHelp.value), c = m(() => {
-      const h = ["form-control"];
-      return t.size && h.push(`form-control-${t.size}`), t.validationState === "valid" && h.push("is-valid"), t.validationState === "invalid" && h.push("is-invalid"), h.join(" ");
-    }), b = m(() => {
+  setup(e, { emit: r }) {
+    const t = e, a = r, l = J("vibeFormGroup", null), n = h(() => t.id || l?.consumeId() || G("textarea")), o = h(() => !!t.label && !l?.hasLabel.value), d = h(() => !!t.validationState && !l?.hasValidation.value), v = h(() => (!!t.helpText || t.showCharCount) && !l?.hasHelp.value), c = h(() => {
+      const p = ["form-control"];
+      return t.size && p.push(`form-control-${t.size}`), t.validationState === "valid" && p.push("is-valid"), t.validationState === "invalid" && p.push("is-invalid"), p.join(" ");
+    }), m = h(() => {
       if (t.noResize) return { resize: "none" };
-    }), g = m(() => t.modelValue?.length || 0), C = (h) => {
-      const w = h.target;
-      a("update:modelValue", w.value), a("input", h), t.validateOn === "input" && a("validate");
-    }, p = (h) => {
-      a("change", h), t.validateOn === "change" && a("validate");
-    }, d = (h) => {
-      a("blur", h), t.validateOn === "blur" && a("validate");
-    }, f = (h) => {
-      a("focus", h);
+    }), f = h(() => t.modelValue?.length || 0), V = (p) => {
+      const w = p.target;
+      a("update:modelValue", w.value), a("input", p), t.validateOn === "input" && a("validate");
+    }, y = (p) => {
+      a("change", p), t.validateOn === "change" && a("validate");
+    }, u = (p) => {
+      a("blur", p), t.validateOn === "blur" && a("validate");
+    }, b = (p) => {
+      a("focus", p);
     };
-    return (h, w) => (n(), i("div", {
-      class: $({ "mb-3": o.value || u.value || r.value })
+    return (p, w) => (i(), s("div", {
+      class: $({ "mb-3": o.value || v.value || d.value })
     }, [
-      o.value ? (n(), i("label", {
+      o.value ? (i(), s("label", {
         key: 0,
-        for: s.value,
+        for: n.value,
         class: "form-label"
       }, [
         I(k(e.label) + " ", 1),
-        e.required ? (n(), i("span", el, "*")) : y("", !0)
-      ], 8, _a)) : y("", !0),
+        e.required ? (i(), s("span", vl, "*")) : g("", !0)
+      ], 8, cl)) : g("", !0),
       S("textarea", {
-        id: s.value,
+        id: n.value,
         class: $(c.value),
-        style: K(b.value),
+        style: Z(m.value),
         value: e.modelValue,
         placeholder: e.placeholder,
         rows: e.rows,
@@ -2415,45 +2462,45 @@ const pt = ["id"], yt = { class: "accordion-header" }, gt = ["data-bs-target", "
         readonly: e.readonly,
         required: e.required,
         "aria-invalid": e.validationState === "invalid",
-        "aria-describedby": e.validationMessage || e.helpText || e.showCharCount ? `${s.value}-feedback` : void 0,
-        onInput: C,
-        onChange: p,
-        onBlur: d,
-        onFocus: f
-      }, null, 46, tl),
-      u.value ? (n(), i("div", {
+        "aria-describedby": e.validationMessage || e.helpText || e.showCharCount ? `${n.value}-feedback` : void 0,
+        onInput: V,
+        onChange: y,
+        onBlur: u,
+        onFocus: b
+      }, null, 46, fl),
+      v.value ? (i(), s("div", {
         key: 1,
-        id: `${s.value}-feedback`,
+        id: `${n.value}-feedback`,
         class: "form-text d-flex justify-content-between"
       }, [
         S("span", null, k(e.helpText), 1),
-        e.showCharCount ? (n(), i("span", ll, [
-          e.maxlength ? (n(), i(F, { key: 0 }, [
-            I(k(g.value) + " / " + k(e.maxlength), 1)
-          ], 64)) : (n(), i(F, { key: 1 }, [
-            I(k(g.value), 1)
+        e.showCharCount ? (i(), s("span", hl, [
+          e.maxlength ? (i(), s(R, { key: 0 }, [
+            I(k(f.value) + " / " + k(e.maxlength), 1)
+          ], 64)) : (i(), s(R, { key: 1 }, [
+            I(k(f.value), 1)
           ], 64))
-        ])) : y("", !0)
-      ], 8, al)) : y("", !0),
-      r.value ? (n(), i(F, { key: 2 }, [
-        e.validationState === "valid" ? (n(), i("div", ol, k(e.validationMessage || "Looks good!"), 1)) : y("", !0),
-        e.validationState === "invalid" ? (n(), i("div", {
+        ])) : g("", !0)
+      ], 8, bl)) : g("", !0),
+      d.value ? (i(), s(R, { key: 2 }, [
+        e.validationState === "valid" ? (i(), s("div", pl, k(e.validationMessage || "Looks good!"), 1)) : g("", !0),
+        e.validationState === "invalid" ? (i(), s("div", {
           key: 1,
-          id: `${s.value}-feedback`,
+          id: `${n.value}-feedback`,
           class: "invalid-feedback",
           style: { display: "block" }
-        }, k(e.validationMessage || "Please provide a valid value."), 9, sl)) : y("", !0)
-      ], 64)) : y("", !0)
+        }, k(e.validationMessage || "Please provide a valid value."), 9, ml)) : g("", !0)
+      ], 64)) : g("", !0)
     ], 2));
   }
-}), il = ["for"], rl = {
+}), gl = ["for"], kl = {
   key: 0,
   class: "text-danger"
-}, dl = ["disabled"], ul = ["id", "value", "disabled", "readonly", "required", "min", "max", "step", "aria-invalid", "aria-describedby"], cl = ["disabled"], vl = ["id"], fl = {
+}, Sl = ["disabled"], $l = ["id", "value", "disabled", "readonly", "required", "min", "max", "step", "aria-invalid", "aria-describedby"], wl = ["disabled"], Vl = ["id"], Cl = {
   key: 0,
   class: "valid-feedback",
   style: { display: "block" }
-}, bl = ["id"], hl = /* @__PURE__ */ M({
+}, xl = ["id"], Bl = /* @__PURE__ */ M({
   __name: "VibeFormSpinbutton",
   props: {
     modelValue: {
@@ -2479,57 +2526,57 @@ const pt = ["id"], yt = { class: "accordion-header" }, gt = ["data-bs-target", "
     vertical: { type: Boolean, default: !1 }
   },
   emits: ["update:modelValue", "validate", "blur", "focus", "input", "change", "increment", "decrement"],
-  setup(e, { emit: v }) {
-    const t = e, a = v, l = J("vibeFormGroup", null), s = m(() => t.id || l?.consumeId() || G("spinbutton")), o = m(() => !!t.label && !l?.hasLabel.value), r = m(() => !!t.validationState && !l?.hasValidation.value), u = m(() => !!t.helpText && !l?.hasHelp.value), c = m(() => {
-      const V = ["form-control"];
-      return t.size && V.push(`form-control-${t.size}`), t.validationState === "valid" && V.push("is-valid"), t.validationState === "invalid" && V.push("is-invalid"), V.join(" ");
-    }), b = m(() => {
-      const V = ["input-group"];
-      return t.size && V.push(`input-group-${t.size}`), t.vertical && V.push("input-group-vertical"), V.join(" ");
-    }), g = m(() => t.disabled || t.readonly ? !1 : t.min === void 0 || t.wrap ? !0 : t.modelValue > t.min), C = m(() => t.disabled || t.readonly ? !1 : t.max === void 0 || t.wrap ? !0 : t.modelValue < t.max), p = (V) => {
-      const q = V.target;
-      let P = q.value === "" ? 0 : Number(q.value);
-      t.min !== void 0 && P < t.min && (P = t.min), t.max !== void 0 && P > t.max && (P = t.max), a("update:modelValue", P), a("input", V), t.validateOn === "input" && a("validate");
-    }, d = (V) => {
-      a("change", V), t.validateOn === "change" && a("validate");
-    }, f = (V) => {
-      a("blur", V), t.validateOn === "blur" && a("validate");
-    }, h = (V) => {
-      a("focus", V);
+  setup(e, { emit: r }) {
+    const t = e, a = r, l = J("vibeFormGroup", null), n = h(() => t.id || l?.consumeId() || G("spinbutton")), o = h(() => !!t.label && !l?.hasLabel.value), d = h(() => !!t.validationState && !l?.hasValidation.value), v = h(() => !!t.helpText && !l?.hasHelp.value), c = h(() => {
+      const C = ["form-control"];
+      return t.size && C.push(`form-control-${t.size}`), t.validationState === "valid" && C.push("is-valid"), t.validationState === "invalid" && C.push("is-invalid"), C.join(" ");
+    }), m = h(() => {
+      const C = ["input-group"];
+      return t.size && C.push(`input-group-${t.size}`), t.vertical && C.push("input-group-vertical"), C.join(" ");
+    }), f = h(() => t.disabled || t.readonly ? !1 : t.min === void 0 || t.wrap ? !0 : t.modelValue > t.min), V = h(() => t.disabled || t.readonly ? !1 : t.max === void 0 || t.wrap ? !0 : t.modelValue < t.max), y = (C) => {
+      const z = C.target;
+      let F = z.value === "" ? 0 : Number(z.value);
+      t.min !== void 0 && F < t.min && (F = t.min), t.max !== void 0 && F > t.max && (F = t.max), a("update:modelValue", F), a("input", C), t.validateOn === "input" && a("validate");
+    }, u = (C) => {
+      a("change", C), t.validateOn === "change" && a("validate");
+    }, b = (C) => {
+      a("blur", C), t.validateOn === "blur" && a("validate");
+    }, p = (C) => {
+      a("focus", C);
     }, w = () => {
-      if (!C.value) return;
-      let V = t.modelValue + t.step;
-      t.max !== void 0 && V > t.max && (V = t.wrap ? t.min ?? 0 : t.max), a("update:modelValue", V), a("increment", V), t.validateOn === "change" && a("validate");
-    }, x = () => {
-      if (!g.value) return;
-      let V = t.modelValue - t.step;
-      t.min !== void 0 && V < t.min && (V = t.wrap ? t.max ?? 0 : t.min), a("update:modelValue", V), a("decrement", V), t.validateOn === "change" && a("validate");
+      if (!V.value) return;
+      let C = t.modelValue + t.step;
+      t.max !== void 0 && C > t.max && (C = t.wrap ? t.min ?? 0 : t.max), a("update:modelValue", C), a("increment", C), t.validateOn === "change" && a("validate");
+    }, B = () => {
+      if (!f.value) return;
+      let C = t.modelValue - t.step;
+      t.min !== void 0 && C < t.min && (C = t.wrap ? t.max ?? 0 : t.min), a("update:modelValue", C), a("decrement", C), t.validateOn === "change" && a("validate");
     };
-    return (V, q) => (n(), i("div", {
-      class: $({ "mb-3": o.value || u.value || r.value })
+    return (C, z) => (i(), s("div", {
+      class: $({ "mb-3": o.value || v.value || d.value })
     }, [
-      o.value ? (n(), i("label", {
+      o.value ? (i(), s("label", {
         key: 0,
-        for: s.value,
+        for: n.value,
         class: "form-label"
       }, [
         I(k(e.label) + " ", 1),
-        e.required ? (n(), i("span", rl, "*")) : y("", !0)
-      ], 8, il)) : y("", !0),
+        e.required ? (i(), s("span", kl, "*")) : g("", !0)
+      ], 8, gl)) : g("", !0),
       S("div", {
-        class: $(b.value)
+        class: $(m.value)
       }, [
         S("button", {
           class: "btn btn-outline-secondary",
           type: "button",
-          disabled: !g.value,
-          onClick: x,
+          disabled: !f.value,
+          onClick: B,
           "aria-label": "Decrement"
-        }, [...q[0] || (q[0] = [
+        }, [...z[0] || (z[0] = [
           S("span", { "aria-hidden": "true" }, "−", -1)
-        ])], 8, dl),
+        ])], 8, Sl),
         S("input", {
-          id: s.value,
+          id: n.value,
           type: "number",
           class: $(c.value),
           value: e.modelValue,
@@ -2540,46 +2587,46 @@ const pt = ["id"], yt = { class: "accordion-header" }, gt = ["data-bs-target", "
           max: e.max,
           step: e.step,
           "aria-invalid": e.validationState === "invalid",
-          "aria-describedby": e.validationMessage || e.helpText ? `${s.value}-feedback` : void 0,
-          onInput: p,
-          onChange: d,
-          onBlur: f,
-          onFocus: h
-        }, null, 42, ul),
+          "aria-describedby": e.validationMessage || e.helpText ? `${n.value}-feedback` : void 0,
+          onInput: y,
+          onChange: u,
+          onBlur: b,
+          onFocus: p
+        }, null, 42, $l),
         S("button", {
           class: "btn btn-outline-secondary",
           type: "button",
-          disabled: !C.value,
+          disabled: !V.value,
           onClick: w,
           "aria-label": "Increment"
-        }, [...q[1] || (q[1] = [
+        }, [...z[1] || (z[1] = [
           S("span", { "aria-hidden": "true" }, "+", -1)
-        ])], 8, cl)
+        ])], 8, wl)
       ], 2),
-      u.value ? (n(), i("div", {
+      v.value ? (i(), s("div", {
         key: 1,
-        id: `${s.value}-feedback`,
+        id: `${n.value}-feedback`,
         class: "form-text"
-      }, k(e.helpText), 9, vl)) : y("", !0),
-      r.value ? (n(), i(F, { key: 2 }, [
-        e.validationState === "valid" ? (n(), i("div", fl, k(e.validationMessage || "Looks good!"), 1)) : y("", !0),
-        e.validationState === "invalid" ? (n(), i("div", {
+      }, k(e.helpText), 9, Vl)) : g("", !0),
+      d.value ? (i(), s(R, { key: 2 }, [
+        e.validationState === "valid" ? (i(), s("div", Cl, k(e.validationMessage || "Looks good!"), 1)) : g("", !0),
+        e.validationState === "invalid" ? (i(), s("div", {
           key: 1,
-          id: `${s.value}-feedback`,
+          id: `${n.value}-feedback`,
           class: "invalid-feedback",
           style: { display: "block" }
-        }, k(e.validationMessage || "Please provide a valid value."), 9, bl)) : y("", !0)
-      ], 64)) : y("", !0)
+        }, k(e.validationMessage || "Please provide a valid value."), 9, xl)) : g("", !0)
+      ], 64)) : g("", !0)
     ], 2));
   }
-}), ml = /* @__PURE__ */ re(hl, [["__scopeId", "data-v-49746a62"]]), pl = ["for"], yl = {
+}), Ll = /* @__PURE__ */ ae(Bl, [["__scopeId", "data-v-49746a62"]]), Tl = ["for"], Nl = {
   key: 0,
   class: "text-danger"
-}, gl = ["id", "type", "value", "disabled", "readonly", "required", "min", "max", "aria-invalid", "aria-describedby"], kl = ["id"], Sl = {
+}, El = ["id", "type", "value", "disabled", "readonly", "required", "min", "max", "aria-invalid", "aria-describedby"], Ml = ["id"], Il = {
   key: 0,
   class: "valid-feedback",
   style: { display: "block" }
-}, $l = ["id"], wl = /* @__PURE__ */ M({
+}, Rl = ["id"], Fl = /* @__PURE__ */ M({
   __name: "VibeFormDatepicker",
   props: {
     modelValue: {
@@ -2603,33 +2650,33 @@ const pt = ["id"], yt = { class: "accordion-header" }, gt = ["data-bs-target", "
     type: { type: String, default: "date" }
   },
   emits: ["update:modelValue", "validate", "blur", "focus", "input", "change"],
-  setup(e, { emit: v }) {
-    const t = e, a = v, l = J("vibeFormGroup", null), s = m(() => t.id || l?.consumeId() || G("datepicker")), o = m(() => !!t.label && !l?.hasLabel.value), r = m(() => !!t.validationState && !l?.hasValidation.value), u = m(() => !!t.helpText && !l?.hasHelp.value), c = m(() => {
-      const d = ["form-control"];
-      return t.size && d.push(`form-control-${t.size}`), t.validationState === "valid" && d.push("is-valid"), t.validationState === "invalid" && d.push("is-invalid"), d.join(" ");
-    }), b = (d) => {
-      const f = d.target;
-      a("update:modelValue", f.value), a("input", d), t.validateOn === "input" && a("validate");
-    }, g = (d) => {
-      a("change", d), t.validateOn === "change" && a("validate");
-    }, C = (d) => {
-      a("blur", d), t.validateOn === "blur" && a("validate");
-    }, p = (d) => {
-      a("focus", d);
+  setup(e, { emit: r }) {
+    const t = e, a = r, l = J("vibeFormGroup", null), n = h(() => t.id || l?.consumeId() || G("datepicker")), o = h(() => !!t.label && !l?.hasLabel.value), d = h(() => !!t.validationState && !l?.hasValidation.value), v = h(() => !!t.helpText && !l?.hasHelp.value), c = h(() => {
+      const u = ["form-control"];
+      return t.size && u.push(`form-control-${t.size}`), t.validationState === "valid" && u.push("is-valid"), t.validationState === "invalid" && u.push("is-invalid"), u.join(" ");
+    }), m = (u) => {
+      const b = u.target;
+      a("update:modelValue", b.value), a("input", u), t.validateOn === "input" && a("validate");
+    }, f = (u) => {
+      a("change", u), t.validateOn === "change" && a("validate");
+    }, V = (u) => {
+      a("blur", u), t.validateOn === "blur" && a("validate");
+    }, y = (u) => {
+      a("focus", u);
     };
-    return (d, f) => (n(), i("div", {
-      class: $({ "mb-3": o.value || u.value || r.value })
+    return (u, b) => (i(), s("div", {
+      class: $({ "mb-3": o.value || v.value || d.value })
     }, [
-      o.value ? (n(), i("label", {
+      o.value ? (i(), s("label", {
         key: 0,
-        for: s.value,
+        for: n.value,
         class: "form-label"
       }, [
         I(k(e.label) + " ", 1),
-        e.required ? (n(), i("span", yl, "*")) : y("", !0)
-      ], 8, pl)) : y("", !0),
+        e.required ? (i(), s("span", Nl, "*")) : g("", !0)
+      ], 8, Tl)) : g("", !0),
       S("input", {
-        id: s.value,
+        id: n.value,
         type: e.type,
         class: $(c.value),
         value: e.modelValue,
@@ -2639,36 +2686,36 @@ const pt = ["id"], yt = { class: "accordion-header" }, gt = ["data-bs-target", "
         min: e.min,
         max: e.max,
         "aria-invalid": e.validationState === "invalid",
-        "aria-describedby": e.validationMessage || e.helpText ? `${s.value}-feedback` : void 0,
-        onInput: b,
-        onChange: g,
-        onBlur: C,
-        onFocus: p
-      }, null, 42, gl),
-      u.value ? (n(), i("div", {
+        "aria-describedby": e.validationMessage || e.helpText ? `${n.value}-feedback` : void 0,
+        onInput: m,
+        onChange: f,
+        onBlur: V,
+        onFocus: y
+      }, null, 42, El),
+      v.value ? (i(), s("div", {
         key: 1,
-        id: `${s.value}-feedback`,
+        id: `${n.value}-feedback`,
         class: "form-text"
-      }, k(e.helpText), 9, kl)) : y("", !0),
-      r.value ? (n(), i(F, { key: 2 }, [
-        e.validationState === "valid" ? (n(), i("div", Sl, k(e.validationMessage || "Looks good!"), 1)) : y("", !0),
-        e.validationState === "invalid" ? (n(), i("div", {
+      }, k(e.helpText), 9, Ml)) : g("", !0),
+      d.value ? (i(), s(R, { key: 2 }, [
+        e.validationState === "valid" ? (i(), s("div", Il, k(e.validationMessage || "Looks good!"), 1)) : g("", !0),
+        e.validationState === "invalid" ? (i(), s("div", {
           key: 1,
-          id: `${s.value}-feedback`,
+          id: `${n.value}-feedback`,
           class: "invalid-feedback",
           style: { display: "block" }
-        }, k(e.validationMessage || "Please provide a valid date."), 9, $l)) : y("", !0)
-      ], 64)) : y("", !0)
+        }, k(e.validationMessage || "Please provide a valid date."), 9, Rl)) : g("", !0)
+      ], 64)) : g("", !0)
     ], 2));
   }
-}), Vl = ["id", "checked", "disabled", "required", "indeterminate", "aria-invalid", "aria-describedby"], Cl = ["for"], xl = {
+}), Pl = ["id", "checked", "disabled", "required", "indeterminate", "aria-invalid", "aria-describedby"], ql = ["for"], zl = {
   key: 0,
   class: "text-danger"
-}, Bl = ["id"], Ll = {
+}, Al = ["id"], jl = {
   key: 0,
   class: "valid-feedback",
   style: { display: "block" }
-}, Tl = ["id"], Nl = /* @__PURE__ */ M({
+}, Ol = ["id"], Hl = /* @__PURE__ */ M({
   __name: "VibeFormCheckbox",
   props: {
     modelValue: {
@@ -2690,80 +2737,80 @@ const pt = ["id"], yt = { class: "accordion-header" }, gt = ["data-bs-target", "
     reverse: { type: Boolean, default: !1 }
   },
   emits: ["update:modelValue", "validate", "blur", "focus", "change"],
-  setup(e, { emit: v }) {
-    const t = e, a = v, l = J("vibeFormGroup", null), s = m(() => t.id || l?.consumeId() || G("checkbox")), o = m(() => !!t.label && !l?.hasLabel.value), r = m(() => !!t.validationState && !l?.hasValidation.value), u = m(() => !!t.helpText && !l?.hasHelp.value), c = m(() => {
-      const f = ["form-check"];
-      return t.inline && f.push("form-check-inline"), t.reverse && f.push("form-check-reverse"), f.join(" ");
-    }), b = m(() => {
-      const f = ["form-check-input"];
-      return t.validationState === "valid" && f.push("is-valid"), t.validationState === "invalid" && f.push("is-invalid"), f.join(" ");
-    }), g = m(() => Array.isArray(t.modelValue) ? t.modelValue.includes(t.value) : t.modelValue === t.value), C = (f) => {
-      const h = f.target;
+  setup(e, { emit: r }) {
+    const t = e, a = r, l = J("vibeFormGroup", null), n = h(() => t.id || l?.consumeId() || G("checkbox")), o = h(() => !!t.label && !l?.hasLabel.value), d = h(() => !!t.validationState && !l?.hasValidation.value), v = h(() => !!t.helpText && !l?.hasHelp.value), c = h(() => {
+      const b = ["form-check"];
+      return t.inline && b.push("form-check-inline"), t.reverse && b.push("form-check-reverse"), b.join(" ");
+    }), m = h(() => {
+      const b = ["form-check-input"];
+      return t.validationState === "valid" && b.push("is-valid"), t.validationState === "invalid" && b.push("is-invalid"), b.join(" ");
+    }), f = h(() => Array.isArray(t.modelValue) ? t.modelValue.includes(t.value) : t.modelValue === t.value), V = (b) => {
+      const p = b.target;
       let w;
       if (Array.isArray(t.modelValue))
-        if (w = [...t.modelValue], h.checked)
+        if (w = [...t.modelValue], p.checked)
           w.push(t.value);
         else {
-          const x = w.indexOf(t.value);
-          x > -1 && w.splice(x, 1);
+          const B = w.indexOf(t.value);
+          B > -1 && w.splice(B, 1);
         }
       else
-        w = h.checked ? t.value : t.value === !0 ? !1 : null;
-      a("update:modelValue", w), a("change", f), t.validateOn === "change" && a("validate");
-    }, p = (f) => {
-      a("blur", f), t.validateOn === "blur" && a("validate");
-    }, d = (f) => {
-      a("focus", f);
+        w = p.checked ? t.value : t.value === !0 ? !1 : null;
+      a("update:modelValue", w), a("change", b), t.validateOn === "change" && a("validate");
+    }, y = (b) => {
+      a("blur", b), t.validateOn === "blur" && a("validate");
+    }, u = (b) => {
+      a("focus", b);
     };
-    return (f, h) => (n(), i("div", {
-      class: $([c.value, { "mb-3": o.value || u.value || r.value }])
+    return (b, p) => (i(), s("div", {
+      class: $([c.value, { "mb-3": o.value || v.value || d.value }])
     }, [
       S("input", {
-        id: s.value,
+        id: n.value,
         type: "checkbox",
-        class: $(b.value),
-        checked: g.value,
+        class: $(m.value),
+        checked: f.value,
         disabled: e.disabled,
         required: e.required,
         indeterminate: e.indeterminate,
         "aria-invalid": e.validationState === "invalid",
-        "aria-describedby": e.validationMessage || e.helpText ? `${s.value}-feedback` : void 0,
-        onChange: C,
-        onBlur: p,
-        onFocus: d
-      }, null, 42, Vl),
-      o.value ? (n(), i("label", {
+        "aria-describedby": e.validationMessage || e.helpText ? `${n.value}-feedback` : void 0,
+        onChange: V,
+        onBlur: y,
+        onFocus: u
+      }, null, 42, Pl),
+      o.value ? (i(), s("label", {
         key: 0,
-        for: s.value,
+        for: n.value,
         class: "form-check-label"
       }, [
         I(k(e.label) + " ", 1),
-        e.required ? (n(), i("span", xl, "*")) : y("", !0)
-      ], 8, Cl)) : y("", !0),
-      u.value ? (n(), i("div", {
+        e.required ? (i(), s("span", zl, "*")) : g("", !0)
+      ], 8, ql)) : g("", !0),
+      v.value ? (i(), s("div", {
         key: 1,
-        id: `${s.value}-feedback`,
+        id: `${n.value}-feedback`,
         class: "form-text"
-      }, k(e.helpText), 9, Bl)) : y("", !0),
-      r.value ? (n(), i(F, { key: 2 }, [
-        e.validationState === "valid" ? (n(), i("div", Ll, k(e.validationMessage || "Looks good!"), 1)) : y("", !0),
-        e.validationState === "invalid" ? (n(), i("div", {
+      }, k(e.helpText), 9, Al)) : g("", !0),
+      d.value ? (i(), s(R, { key: 2 }, [
+        e.validationState === "valid" ? (i(), s("div", jl, k(e.validationMessage || "Looks good!"), 1)) : g("", !0),
+        e.validationState === "invalid" ? (i(), s("div", {
           key: 1,
-          id: `${s.value}-feedback`,
+          id: `${n.value}-feedback`,
           class: "invalid-feedback",
           style: { display: "block" }
-        }, k(e.validationMessage || "Please check this box."), 9, Tl)) : y("", !0)
-      ], 64)) : y("", !0)
+        }, k(e.validationMessage || "Please check this box."), 9, Ol)) : g("", !0)
+      ], 64)) : g("", !0)
     ], 2));
   }
-}), El = ["id", "name", "value", "checked", "disabled", "required", "aria-invalid", "aria-describedby"], Ml = ["for"], Il = {
+}), Dl = ["id", "name", "value", "checked", "disabled", "required", "aria-invalid", "aria-describedby"], Gl = ["for"], Xl = {
   key: 0,
   class: "text-danger"
-}, Fl = ["id"], Pl = {
+}, Yl = ["id"], Ul = {
   key: 0,
   class: "valid-feedback",
   style: { display: "block" }
-}, Rl = ["id"], ql = /* @__PURE__ */ M({
+}, Jl = ["id"], Kl = /* @__PURE__ */ M({
   __name: "VibeFormRadio",
   props: {
     modelValue: {
@@ -2785,70 +2832,70 @@ const pt = ["id"], yt = { class: "accordion-header" }, gt = ["data-bs-target", "
     reverse: { type: Boolean, default: !1 }
   },
   emits: ["update:modelValue", "validate", "blur", "focus", "change"],
-  setup(e, { emit: v }) {
-    const t = e, a = v, l = J("vibeFormGroup", null), s = m(() => t.id || l?.consumeId() || G("radio")), o = m(() => !!t.label && !l?.hasLabel.value), r = m(() => !!t.validationState && !l?.hasValidation.value), u = m(() => !!t.helpText && !l?.hasHelp.value), c = m(() => {
-      const f = ["form-check"];
-      return t.inline && f.push("form-check-inline"), t.reverse && f.push("form-check-reverse"), f.join(" ");
-    }), b = m(() => {
-      const f = ["form-check-input"];
-      return t.validationState === "valid" && f.push("is-valid"), t.validationState === "invalid" && f.push("is-invalid"), f.join(" ");
-    }), g = m(() => t.modelValue === t.value), C = (f) => {
-      a("update:modelValue", t.value), a("change", f), t.validateOn === "change" && a("validate");
-    }, p = (f) => {
-      a("blur", f), t.validateOn === "blur" && a("validate");
-    }, d = (f) => {
-      a("focus", f);
+  setup(e, { emit: r }) {
+    const t = e, a = r, l = J("vibeFormGroup", null), n = h(() => t.id || l?.consumeId() || G("radio")), o = h(() => !!t.label && !l?.hasLabel.value), d = h(() => !!t.validationState && !l?.hasValidation.value), v = h(() => !!t.helpText && !l?.hasHelp.value), c = h(() => {
+      const b = ["form-check"];
+      return t.inline && b.push("form-check-inline"), t.reverse && b.push("form-check-reverse"), b.join(" ");
+    }), m = h(() => {
+      const b = ["form-check-input"];
+      return t.validationState === "valid" && b.push("is-valid"), t.validationState === "invalid" && b.push("is-invalid"), b.join(" ");
+    }), f = h(() => t.modelValue === t.value), V = (b) => {
+      a("update:modelValue", t.value), a("change", b), t.validateOn === "change" && a("validate");
+    }, y = (b) => {
+      a("blur", b), t.validateOn === "blur" && a("validate");
+    }, u = (b) => {
+      a("focus", b);
     };
-    return (f, h) => (n(), i("div", {
-      class: $([c.value, { "mb-3": o.value || u.value || r.value }])
+    return (b, p) => (i(), s("div", {
+      class: $([c.value, { "mb-3": o.value || v.value || d.value }])
     }, [
       S("input", {
-        id: s.value,
+        id: n.value,
         type: "radio",
-        class: $(b.value),
+        class: $(m.value),
         name: e.name,
         value: e.value,
-        checked: g.value,
+        checked: f.value,
         disabled: e.disabled,
         required: e.required,
         "aria-invalid": e.validationState === "invalid",
-        "aria-describedby": e.validationMessage || e.helpText ? `${s.value}-feedback` : void 0,
-        onChange: C,
-        onBlur: p,
-        onFocus: d
-      }, null, 42, El),
-      o.value ? (n(), i("label", {
+        "aria-describedby": e.validationMessage || e.helpText ? `${n.value}-feedback` : void 0,
+        onChange: V,
+        onBlur: y,
+        onFocus: u
+      }, null, 42, Dl),
+      o.value ? (i(), s("label", {
         key: 0,
-        for: s.value,
+        for: n.value,
         class: "form-check-label"
       }, [
         I(k(e.label) + " ", 1),
-        e.required ? (n(), i("span", Il, "*")) : y("", !0)
-      ], 8, Ml)) : y("", !0),
-      u.value ? (n(), i("div", {
+        e.required ? (i(), s("span", Xl, "*")) : g("", !0)
+      ], 8, Gl)) : g("", !0),
+      v.value ? (i(), s("div", {
         key: 1,
-        id: `${s.value}-feedback`,
+        id: `${n.value}-feedback`,
         class: "form-text"
-      }, k(e.helpText), 9, Fl)) : y("", !0),
-      r.value ? (n(), i(F, { key: 2 }, [
-        e.validationState === "valid" ? (n(), i("div", Pl, k(e.validationMessage || "Looks good!"), 1)) : y("", !0),
-        e.validationState === "invalid" ? (n(), i("div", {
+      }, k(e.helpText), 9, Yl)) : g("", !0),
+      d.value ? (i(), s(R, { key: 2 }, [
+        e.validationState === "valid" ? (i(), s("div", Ul, k(e.validationMessage || "Looks good!"), 1)) : g("", !0),
+        e.validationState === "invalid" ? (i(), s("div", {
           key: 1,
-          id: `${s.value}-feedback`,
+          id: `${n.value}-feedback`,
           class: "invalid-feedback",
           style: { display: "block" }
-        }, k(e.validationMessage || "Please select an option."), 9, Rl)) : y("", !0)
-      ], 64)) : y("", !0)
+        }, k(e.validationMessage || "Please select an option."), 9, Jl)) : g("", !0)
+      ], 64)) : g("", !0)
     ], 2));
   }
-}), zl = ["id", "checked", "disabled", "required", "aria-invalid", "aria-describedby"], Al = ["for"], jl = {
+}), Wl = ["id", "checked", "disabled", "required", "aria-invalid", "aria-describedby"], Ql = ["for"], Zl = {
   key: 0,
   class: "text-danger"
-}, Ol = ["id"], Hl = {
+}, _l = ["id"], eo = {
   key: 0,
   class: "valid-feedback",
   style: { display: "block" }
-}, Dl = ["id"], Gl = /* @__PURE__ */ M({
+}, to = ["id"], ao = /* @__PURE__ */ M({
   __name: "VibeFormSwitch",
   props: {
     modelValue: {
@@ -2867,77 +2914,77 @@ const pt = ["id"], yt = { class: "accordion-header" }, gt = ["data-bs-target", "
     helpText: { type: String, default: void 0 }
   },
   emits: ["update:modelValue", "validate", "blur", "focus", "change"],
-  setup(e, { emit: v }) {
-    const t = e, a = v, l = J("vibeFormGroup", null), s = m(() => t.id || l?.consumeId() || G("switch")), o = m(() => !!t.label && !l?.hasLabel.value), r = m(() => !!t.validationState && !l?.hasValidation.value), u = m(() => !!t.helpText && !l?.hasHelp.value), c = m(() => {
-      const d = ["form-check", "form-switch"];
-      return t.inline && d.push("form-check-inline"), d.join(" ");
-    }), b = m(() => {
-      const d = ["form-check-input"];
-      return t.validationState === "valid" && d.push("is-valid"), t.validationState === "invalid" && d.push("is-invalid"), d.join(" ");
-    }), g = (d) => {
-      const f = d.target;
-      a("update:modelValue", f.checked), a("change", d), t.validateOn === "change" && a("validate");
-    }, C = (d) => {
-      a("blur", d), t.validateOn === "blur" && a("validate");
-    }, p = (d) => {
-      a("focus", d);
+  setup(e, { emit: r }) {
+    const t = e, a = r, l = J("vibeFormGroup", null), n = h(() => t.id || l?.consumeId() || G("switch")), o = h(() => !!t.label && !l?.hasLabel.value), d = h(() => !!t.validationState && !l?.hasValidation.value), v = h(() => !!t.helpText && !l?.hasHelp.value), c = h(() => {
+      const u = ["form-check", "form-switch"];
+      return t.inline && u.push("form-check-inline"), u.join(" ");
+    }), m = h(() => {
+      const u = ["form-check-input"];
+      return t.validationState === "valid" && u.push("is-valid"), t.validationState === "invalid" && u.push("is-invalid"), u.join(" ");
+    }), f = (u) => {
+      const b = u.target;
+      a("update:modelValue", b.checked), a("change", u), t.validateOn === "change" && a("validate");
+    }, V = (u) => {
+      a("blur", u), t.validateOn === "blur" && a("validate");
+    }, y = (u) => {
+      a("focus", u);
     };
-    return (d, f) => (n(), i("div", {
-      class: $([c.value, { "mb-3": o.value || u.value || r.value }])
+    return (u, b) => (i(), s("div", {
+      class: $([c.value, { "mb-3": o.value || v.value || d.value }])
     }, [
       S("input", {
-        id: s.value,
+        id: n.value,
         type: "checkbox",
         role: "switch",
-        class: $(b.value),
+        class: $(m.value),
         checked: e.modelValue,
         disabled: e.disabled,
         required: e.required,
         "aria-invalid": e.validationState === "invalid",
-        "aria-describedby": e.validationMessage || e.helpText ? `${s.value}-feedback` : void 0,
-        onChange: g,
-        onBlur: C,
-        onFocus: p
-      }, null, 42, zl),
-      o.value ? (n(), i("label", {
+        "aria-describedby": e.validationMessage || e.helpText ? `${n.value}-feedback` : void 0,
+        onChange: f,
+        onBlur: V,
+        onFocus: y
+      }, null, 42, Wl),
+      o.value ? (i(), s("label", {
         key: 0,
-        for: s.value,
+        for: n.value,
         class: "form-check-label"
       }, [
         I(k(e.label) + " ", 1),
-        e.required ? (n(), i("span", jl, "*")) : y("", !0)
-      ], 8, Al)) : y("", !0),
-      u.value ? (n(), i("div", {
+        e.required ? (i(), s("span", Zl, "*")) : g("", !0)
+      ], 8, Ql)) : g("", !0),
+      v.value ? (i(), s("div", {
         key: 1,
-        id: `${s.value}-feedback`,
+        id: `${n.value}-feedback`,
         class: "form-text"
-      }, k(e.helpText), 9, Ol)) : y("", !0),
-      r.value ? (n(), i(F, { key: 2 }, [
-        e.validationState === "valid" ? (n(), i("div", Hl, k(e.validationMessage || "Looks good!"), 1)) : y("", !0),
-        e.validationState === "invalid" ? (n(), i("div", {
+      }, k(e.helpText), 9, _l)) : g("", !0),
+      d.value ? (i(), s(R, { key: 2 }, [
+        e.validationState === "valid" ? (i(), s("div", eo, k(e.validationMessage || "Looks good!"), 1)) : g("", !0),
+        e.validationState === "invalid" ? (i(), s("div", {
           key: 1,
-          id: `${s.value}-feedback`,
+          id: `${n.value}-feedback`,
           class: "invalid-feedback",
           style: { display: "block" }
-        }, k(e.validationMessage || "Please toggle this switch."), 9, Dl)) : y("", !0)
-      ], 64)) : y("", !0)
+        }, k(e.validationMessage || "Please toggle this switch."), 9, to)) : g("", !0)
+      ], 64)) : g("", !0)
     ], 2));
   }
-}), Xl = ["for"], Yl = {
+}), lo = ["for"], oo = {
   key: 0,
   class: "text-danger"
-}, Ul = ["id"], Jl = {
+}, no = ["id"], io = {
   key: 1,
   class: "valid-feedback",
   style: { display: "block" }
-}, Kl = ["id"], Ql = ["for"], Wl = {
+}, so = ["id"], ro = ["for"], uo = {
   key: 0,
   class: "text-danger"
-}, Zl = ["id"], _l = {
+}, co = ["id"], vo = {
   key: 2,
   class: "valid-feedback",
   style: { display: "block" }
-}, eo = ["id"], to = /* @__PURE__ */ M({
+}, fo = ["id"], bo = /* @__PURE__ */ M({
   __name: "VibeFormGroup",
   props: {
     label: { type: String, default: void 0 },
@@ -2952,86 +2999,115 @@ const pt = ["id"], yt = { class: "accordion-header" }, gt = ["data-bs-target", "
     labelAlign: { type: String, default: void 0 }
   },
   setup(e) {
-    const v = e, t = m(() => v.labelFor || G("form-group")), a = E(!1);
-    ve("vibeFormGroup", {
+    const r = e, t = h(() => r.labelFor || G("form-group")), a = L(!1);
+    ge("vibeFormGroup", {
       id: t,
       consumeId: () => a.value ? null : (a.value = !0, t.value),
-      hasLabel: m(() => !!v.label),
-      hasValidation: m(() => !!v.validationState),
-      hasHelp: m(() => !!v.helpText)
+      hasLabel: h(() => !!r.label),
+      hasValidation: h(() => !!r.validationState),
+      hasHelp: h(() => !!r.helpText)
     });
-    const s = m(() => {
+    const n = h(() => {
       const c = [];
-      return v.floating ? c.push("form-floating") : v.row ? c.push("row", "mb-3") : c.push("mb-3"), c.join(" ");
-    }), o = m(() => {
+      return r.floating ? c.push("form-floating") : r.row ? c.push("row", "mb-3") : c.push("mb-3"), c.join(" ");
+    }), o = h(() => {
       const c = [];
-      return v.floating ? c.push("form-label") : v.row ? (c.push("col-form-label"), v.labelCols && c.push(`col-sm-${v.labelCols}`), v.labelAlign && c.push(`text-${v.labelAlign}`)) : c.push("form-label"), c.join(" ");
-    }), r = m(() => v.row && v.labelCols ? `col-sm-${12 - Number(v.labelCols)}` : ""), u = m(() => `${t.value}-feedback`);
-    return (c, b) => (n(), i("div", {
-      class: $(s.value)
+      return r.floating ? c.push("form-label") : r.row ? (c.push("col-form-label"), r.labelCols && c.push(`col-sm-${r.labelCols}`), r.labelAlign && c.push(`text-${r.labelAlign}`)) : c.push("form-label"), c.join(" ");
+    }), d = h(() => r.row && r.labelCols ? `col-sm-${12 - Number(r.labelCols)}` : ""), v = h(() => `${t.value}-feedback`);
+    return (c, m) => (i(), s("div", {
+      class: $(n.value)
     }, [
-      e.label && !e.floating ? (n(), i("label", {
+      e.label && !e.floating ? (i(), s("label", {
         key: 0,
         for: t.value,
         class: $(o.value)
       }, [
         I(k(e.label) + " ", 1),
-        e.required ? (n(), i("span", Yl, "*")) : y("", !0)
-      ], 10, Xl)) : y("", !0),
-      e.row && e.labelCols ? (n(), i("div", {
+        e.required ? (i(), s("span", oo, "*")) : g("", !0)
+      ], 10, lo)) : g("", !0),
+      e.row && e.labelCols ? (i(), s("div", {
         key: 1,
-        class: $(r.value)
+        class: $(d.value)
       }, [
-        N(c.$slots, "default"),
-        e.helpText && !e.validationMessage ? (n(), i("div", {
+        T(c.$slots, "default"),
+        e.helpText && !e.validationMessage ? (i(), s("div", {
           key: 0,
-          id: u.value,
+          id: v.value,
           class: "form-text"
-        }, k(e.helpText), 9, Ul)) : y("", !0),
-        e.validationState === "valid" ? (n(), i("div", Jl, k(e.validationMessage || "Looks good!"), 1)) : y("", !0),
-        e.validationState === "invalid" ? (n(), i("div", {
+        }, k(e.helpText), 9, no)) : g("", !0),
+        e.validationState === "valid" ? (i(), s("div", io, k(e.validationMessage || "Looks good!"), 1)) : g("", !0),
+        e.validationState === "invalid" ? (i(), s("div", {
           key: 2,
-          id: u.value,
+          id: v.value,
           class: "invalid-feedback",
           style: { display: "block" }
-        }, k(e.validationMessage || "Please provide a valid value."), 9, Kl)) : y("", !0)
-      ], 2)) : (n(), i(F, { key: 2 }, [
-        N(c.$slots, "default"),
-        e.label && e.floating ? (n(), i("label", {
+        }, k(e.validationMessage || "Please provide a valid value."), 9, so)) : g("", !0)
+      ], 2)) : (i(), s(R, { key: 2 }, [
+        T(c.$slots, "default"),
+        e.label && e.floating ? (i(), s("label", {
           key: 0,
           for: t.value,
           class: $(o.value)
         }, [
           I(k(e.label) + " ", 1),
-          e.required ? (n(), i("span", Wl, "*")) : y("", !0)
-        ], 10, Ql)) : y("", !0),
-        e.helpText && !e.validationMessage ? (n(), i("div", {
+          e.required ? (i(), s("span", uo, "*")) : g("", !0)
+        ], 10, ro)) : g("", !0),
+        e.helpText && !e.validationMessage ? (i(), s("div", {
           key: 1,
-          id: u.value,
+          id: v.value,
           class: "form-text"
-        }, k(e.helpText), 9, Zl)) : y("", !0),
-        e.validationState === "valid" ? (n(), i("div", _l, k(e.validationMessage || "Looks good!"), 1)) : y("", !0),
-        e.validationState === "invalid" ? (n(), i("div", {
+        }, k(e.helpText), 9, co)) : g("", !0),
+        e.validationState === "valid" ? (i(), s("div", vo, k(e.validationMessage || "Looks good!"), 1)) : g("", !0),
+        e.validationState === "invalid" ? (i(), s("div", {
           key: 3,
-          id: u.value,
+          id: v.value,
           class: "invalid-feedback",
           style: { display: "block" }
-        }, k(e.validationMessage || "Please provide a valid value."), 9, eo)) : y("", !0)
+        }, k(e.validationMessage || "Please provide a valid value."), 9, fo)) : g("", !0)
       ], 64))
     ], 2));
   }
-}), ao = ["for"], lo = {
+}), te = {
+  sm: 576,
+  md: 768,
+  lg: 992,
+  xl: 1200,
+  xxl: 1400
+};
+function ho() {
+  const e = L(!1), r = L(!1), t = L(!1), a = L(!1), l = L(!1), n = () => {
+    typeof window > "u" || (e.value = window.matchMedia(`(min-width: ${te.sm}px)`).matches, r.value = window.matchMedia(`(min-width: ${te.md}px)`).matches, t.value = window.matchMedia(`(min-width: ${te.lg}px)`).matches, a.value = window.matchMedia(`(min-width: ${te.xl}px)`).matches, l.value = window.matchMedia(`(min-width: ${te.xxl}px)`).matches);
+  };
+  n();
+  const o = h(() => !e.value), d = h(() => !r.value), v = h(() => r.value && !t.value);
+  return typeof window < "u" && Object.entries(te).forEach(([c, m]) => {
+    const f = window.matchMedia(`(min-width: ${m}px)`), V = () => {
+      n();
+    };
+    f.addEventListener("change", V), ke() && Se(() => f.removeEventListener("change", V));
+  }), {
+    isXs: o,
+    isSm: e,
+    isMd: r,
+    isLg: t,
+    isXl: a,
+    isXxl: l,
+    isMobile: d,
+    isTablet: v
+  };
+}
+const po = ["for"], mo = {
   key: 0,
   class: "text-danger"
-}, oo = {
+}, yo = {
   key: 1,
   class: "alert alert-warning",
   role: "alert"
-}, so = ["id"], no = ["id"], io = {
+}, go = ["id"], ko = ["id"], So = {
   key: 0,
   class: "valid-feedback",
   style: { display: "block" }
-}, ro = ["id"], uo = /* @__PURE__ */ M({
+}, $o = ["id"], wo = /* @__PURE__ */ M({
   __name: "VibeFormWysiwyg",
   props: {
     modelValue: {
@@ -3046,6 +3122,7 @@ const pt = ["id"], yt = { class: "accordion-header" }, gt = ["data-bs-target", "
     required: { type: Boolean, default: !1 },
     theme: { type: String, default: "snow" },
     toolbar: { type: [Array, String, Boolean], default: void 0 },
+    mobileToolbar: { type: [Array, String, Boolean], default: void 0 },
     validationState: { type: String, default: null },
     validationMessage: { type: String, default: void 0 },
     validationRules: { type: [Array, Function], default: void 0 },
@@ -3054,183 +3131,258 @@ const pt = ["id"], yt = { class: "accordion-header" }, gt = ["data-bs-target", "
     height: { type: String, default: "200px" }
   },
   emits: ["update:modelValue", "validate", "blur", "focus", "change", "ready"],
-  setup(e, { emit: v }) {
-    const t = e, a = v, l = J("vibeFormGroup", null), s = m(() => t.id || l?.id.value || G("wysiwyg")), o = m(() => !!t.label && !l?.hasLabel.value), r = m(() => !!t.validationState && !l?.hasValidation.value), u = m(() => !!t.helpText && !l?.hasHelp.value), c = E(null), b = E(null), g = E(!1), C = E(null), p = E(!1), d = E(null), f = E(null), h = E(null), w = m(() => {
-      const R = ["vibe-wysiwyg-container"];
-      return t.validationState === "valid" && R.push("is-valid"), t.validationState === "invalid" && R.push("is-invalid"), t.disabled && R.push("disabled"), R.join(" ");
-    }), x = [
+  setup(e, { emit: r }) {
+    const t = e, a = r, l = J("vibeFormGroup", null), n = h(() => t.id || l?.id.value || G("wysiwyg")), { isMobile: o } = ho(), d = h(() => !!t.label && !l?.hasLabel.value), v = h(() => !!t.validationState && !l?.hasValidation.value), c = h(() => !!t.helpText && !l?.hasHelp.value), m = L(null), f = L(null), V = L(!1), y = L(null), u = L(!1), b = L(null), p = L(null), w = L(null), B = h(() => {
+      const P = ["vibe-wysiwyg-container"];
+      return t.validationState === "valid" && P.push("is-valid"), t.validationState === "invalid" && P.push("is-invalid"), t.disabled && P.push("disabled"), P.join(" ");
+    }), C = [
       [{ header: [1, 2, 3, !1] }],
       ["bold", "italic", "underline", "strike"],
       [{ list: "ordered" }, { list: "bullet" }],
       [{ color: [] }, { background: [] }],
       ["link", "image"],
       ["clean"]
-    ], V = () => t.toolbar === !1 ? !1 : t.toolbar === !0 || t.toolbar === void 0 ? x : t.toolbar, q = (R) => {
-      b.value && (p.value = !0, b.value.setContents([], "silent"), R && b.value.clipboard.dangerouslyPasteHTML(R, "silent"), p.value = !1);
-    }, P = () => !b.value || b.value.getText().trim().length === 0 ? "" : b.value.getSemanticHTML();
-    return Y(async () => {
+    ], z = [
+      ["bold", "italic", "underline"],
+      [{ list: "ordered" }, { list: "bullet" }],
+      ["link", "clean"]
+    ], F = () => t.toolbar === !1 ? !1 : o.value ? t.mobileToolbar === !1 ? !1 : t.mobileToolbar !== void 0 ? t.mobileToolbar : z : t.toolbar === !0 || t.toolbar === void 0 ? C : t.toolbar, K = (P) => {
+      f.value && (u.value = !0, f.value.setContents([], "silent"), P && f.value.clipboard.dangerouslyPasteHTML(P, "silent"), u.value = !1);
+    }, _ = () => !f.value || f.value.getText().trim().length === 0 ? "" : f.value.getSemanticHTML(), W = async () => {
       try {
-        const R = await import("quill"), Q = R.default || R;
-        if (await import("quill/dist/quill.snow.css"), c.value) {
-          const W = {
+        const P = await import("quill"), Q = P.default || P;
+        if (await import("quill/dist/quill.snow.css"), m.value) {
+          const re = {
             theme: t.theme,
             placeholder: t.placeholder,
             readOnly: t.readonly || t.disabled,
             modules: {
-              toolbar: V()
+              toolbar: F()
             }
           };
-          b.value = new Q(c.value, W), t.modelValue && q(t.modelValue), h.value = () => {
-            if (p.value) return;
-            const te = P();
-            a("update:modelValue", te), a("change"), t.validateOn === "change" && a("validate");
-          }, b.value.on("text-change", h.value), d.value = () => {
+          f.value = new Q(m.value, re), t.modelValue && K(t.modelValue), w.value = () => {
+            if (u.value) return;
+            const de = _();
+            a("update:modelValue", de), a("change"), t.validateOn === "change" && a("validate");
+          }, f.value.on("text-change", w.value), b.value = () => {
             a("blur"), t.validateOn === "blur" && a("validate");
-          }, b.value.root.addEventListener("blur", d.value), f.value = () => {
+          }, f.value.root.addEventListener("blur", b.value), p.value = () => {
             a("focus");
-          }, b.value.root.addEventListener("focus", f.value), g.value = !0, a("ready", b.value);
+          }, f.value.root.addEventListener("focus", p.value), V.value = !0, a("ready", f.value);
         }
-      } catch (R) {
-        console.error("Failed to load Quill editor:", R), C.value = "Failed to load WYSIWYG editor. Please install quill: npm install quill", g.value = !1;
+      } catch (P) {
+        console.error("Failed to load Quill editor:", P), y.value = "Failed to load WYSIWYG editor. Please install quill: npm install quill", V.value = !1;
       }
-    }), X(() => {
-      if (b.value) {
-        if (h.value && (b.value.off("text-change", h.value), h.value = null), d.value && (b.value.root.removeEventListener("blur", d.value), d.value = null), f.value && (b.value.root.removeEventListener("focus", f.value), f.value = null), c.value) {
-          const R = c.value.parentElement?.querySelector(".ql-toolbar");
-          R && R.remove();
+    };
+    return X(W), Y(() => {
+      if (f.value) {
+        if (w.value && (f.value.off("text-change", w.value), w.value = null), b.value && (f.value.root.removeEventListener("blur", b.value), b.value = null), p.value && (f.value.root.removeEventListener("focus", p.value), p.value = null), m.value) {
+          const P = m.value.parentElement?.querySelector(".ql-toolbar");
+          P && P.remove();
         }
-        b.value = null;
+        f.value = null;
+      }
+    }), O(() => t.modelValue, (P) => {
+      if (!f.value) return;
+      _() !== (P || "") && K(P || "");
+    }), O(() => t.disabled, (P) => {
+      f.value && f.value.enable(!P);
+    }), O(() => t.readonly, (P) => {
+      f.value && f.value.enable(!P);
+    }), O(o, async () => {
+      if (f.value) {
+        const P = _();
+        w.value && f.value.off("text-change", w.value), b.value && f.value.root.removeEventListener("blur", b.value), p.value && f.value.root.removeEventListener("focus", p.value);
+        const Q = m.value?.parentElement?.querySelector(".ql-toolbar");
+        Q && Q.remove(), m.value && (m.value.innerHTML = ""), await se(), await W(), P && K(P);
       }
-    }), O(() => t.modelValue, (R) => {
-      if (!b.value) return;
-      P() !== (R || "") && q(R || "");
-    }), O(() => t.disabled, (R) => {
-      b.value && b.value.enable(!R);
-    }), O(() => t.readonly, (R) => {
-      b.value && b.value.enable(!R);
-    }), (R, Q) => (n(), i("div", {
-      class: $({ "mb-3": o.value || u.value || r.value })
+    }), (P, Q) => (i(), s("div", {
+      class: $({ "mb-3": d.value || c.value || v.value })
     }, [
-      o.value ? (n(), i("label", {
+      d.value ? (i(), s("label", {
         key: 0,
-        for: s.value,
+        for: n.value,
         class: "form-label"
       }, [
         I(k(e.label) + " ", 1),
-        e.required ? (n(), i("span", lo, "*")) : y("", !0)
-      ], 8, ao)) : y("", !0),
-      C.value ? (n(), i("div", oo, k(C.value), 1)) : (n(), i("div", {
+        e.required ? (i(), s("span", mo, "*")) : g("", !0)
+      ], 8, po)) : g("", !0),
+      y.value ? (i(), s("div", yo, k(y.value), 1)) : (i(), s("div", {
         key: 2,
-        class: $(w.value),
-        style: K({ minHeight: e.height })
+        class: $(B.value),
+        style: Z({ minHeight: e.height })
       }, [
         S("div", {
           ref_key: "editorContainer",
-          ref: c,
-          id: s.value
-        }, null, 8, so)
+          ref: m,
+          id: n.value
+        }, null, 8, go)
       ], 6)),
-      u.value ? (n(), i("div", {
+      c.value ? (i(), s("div", {
         key: 3,
-        id: `${s.value}-feedback`,
+        id: `${n.value}-feedback`,
         class: "form-text"
-      }, k(e.helpText), 9, no)) : y("", !0),
-      r.value ? (n(), i(F, { key: 4 }, [
-        e.validationState === "valid" ? (n(), i("div", io, k(e.validationMessage || "Looks good!"), 1)) : y("", !0),
-        e.validationState === "invalid" ? (n(), i("div", {
+      }, k(e.helpText), 9, ko)) : g("", !0),
+      v.value ? (i(), s(R, { key: 4 }, [
+        e.validationState === "valid" ? (i(), s("div", So, k(e.validationMessage || "Looks good!"), 1)) : g("", !0),
+        e.validationState === "invalid" ? (i(), s("div", {
           key: 1,
-          id: `${s.value}-feedback`,
+          id: `${n.value}-feedback`,
           class: "invalid-feedback",
           style: { display: "block" }
-        }, k(e.validationMessage || "Please provide valid content."), 9, ro)) : y("", !0)
-      ], 64)) : y("", !0)
+        }, k(e.validationMessage || "Please provide valid content."), 9, $o)) : g("", !0)
+      ], 64)) : g("", !0)
     ], 2));
   }
-}), co = /* @__PURE__ */ re(uo, [["__scopeId", "data-v-1ed73fd7"]]), bo = {
+}), Vo = /* @__PURE__ */ ae(wo, [["__scopeId", "data-v-952f7269"]]), Co = {
+  key: 0,
+  class: "input-group-text"
+}, xo = {
+  key: 0,
+  class: "input-group-text"
+}, Bo = /* @__PURE__ */ M({
+  __name: "VibeInputGroup",
+  props: {
+    size: { type: String, default: void 0 },
+    prepend: { type: String, default: void 0 },
+    append: { type: String, default: void 0 },
+    tag: { type: String, default: "div" }
+  },
+  setup(e) {
+    const r = e, t = h(() => {
+      const a = ["input-group"];
+      return r.size && a.push(`input-group-${r.size}`), a.join(" ");
+    });
+    return (a, l) => (i(), q(A(e.tag), {
+      class: $(t.value)
+    }, {
+      default: j(() => [
+        T(a.$slots, "prepend", {}, () => [
+          e.prepend ? (i(), s("span", Co, k(e.prepend), 1)) : g("", !0)
+        ]),
+        T(a.$slots, "default"),
+        T(a.$slots, "append", {}, () => [
+          e.append ? (i(), s("span", xo, k(e.append), 1)) : g("", !0)
+        ])
+      ]),
+      _: 3
+    }, 8, ["class"]));
+  }
+}), Lo = /* @__PURE__ */ M({
+  __name: "VibeLink",
+  props: {
+    tag: { type: String, default: "a" },
+    href: { type: String, default: void 0 },
+    to: { type: [String, Object], default: void 0 },
+    variant: { type: String, default: void 0 },
+    underline: { type: [Boolean, String], default: !0 },
+    underlineVariant: { type: String, default: void 0 },
+    underlineOpacity: { type: [String, Number], default: void 0 },
+    offset: { type: [String, Number], default: void 0 },
+    opacity: { type: [String, Number], default: void 0 },
+    focusRing: { type: Boolean, default: !1 }
+  },
+  setup(e) {
+    const r = e, t = h(() => !!r.to), a = h(() => t.value ? "router-link" : r.tag), l = h(() => {
+      const n = [];
+      return r.variant && n.push(`link-${r.variant}`), r.underline === !1 || r.underline === "0" ? n.push("link-underline-0") : typeof r.underline == "string" && ["1", "2", "3"].includes(r.underline) && n.push("link-underline", `link-underline-opacity-${r.underline}`), r.underlineVariant && n.push(`link-underline-${r.underlineVariant}`), r.underlineOpacity !== void 0 && n.push(`link-underline-opacity-${r.underlineOpacity}`), r.offset !== void 0 && n.push(`link-offset-${r.offset}`), r.opacity !== void 0 && n.push(`link-opacity-${r.opacity}`), r.focusRing && n.push("focus-ring"), n.join(" ");
+    });
+    return (n, o) => (i(), q(A(a.value), {
+      class: $(l.value),
+      href: e.href,
+      to: e.to
+    }, {
+      default: j(() => [
+        T(n.$slots, "default")
+      ]),
+      _: 3
+    }, 8, ["class", "href", "to"]));
+  }
+}), Eo = {
   install(e) {
-    e.component("VibeAlert", $e), e.component("VibeBadge", we), e.component("VibeButton", Ve), e.component("VibeButtonGroup", xe), e.component("VibeCloseButton", Le), e.component("VibeSpinner", Ne), e.component("VibePlaceholder", Ee), e.component("VibeContainer", Me), e.component("VibeRow", Ie), e.component("VibeCol", Fe), e.component("VibeCard", He), e.component("VibeBreadcrumb", Ye), e.component("VibeNav", Qe), e.component("VibeNavbar", We), e.component("VibeNavbarBrand", Ze), e.component("VibeNavbarToggle", et), e.component("VibeNavbarNav", nt), e.component("VibePagination", ct), e.component("VibeTabContent", ft), e.component("VibeListGroup", bt), e.component("VibeProgress", mt), e.component("VibeAccordion", $t), e.component("VibeCollapse", wt), e.component("VibeDropdown", Et), e.component("VibeModal", zt), e.component("VibeOffcanvas", Dt), e.component("VibeToast", Jt), e.component("VibeCarousel", na), e.component("VibeTooltip", ra), e.component("VibePopover", ua), e.component("VibeScrollspy", ca), e.component("VibeIcon", va), e.component("VibeDataTable", Ra), e.component("VibeFormInput", Da), e.component("VibeFormSelect", Za), e.component("VibeFormTextarea", nl), e.component("VibeFormSpinbutton", ml), e.component("VibeFormDatepicker", wl), e.component("VibeFormCheckbox", Nl), e.component("VibeFormRadio", ql), e.component("VibeFormSwitch", Gl), e.component("VibeFormGroup", to), e.component("VibeFormWysiwyg", co);
+    e.component("VibeAlert", Te), e.component("VibeBadge", Ne), e.component("VibeButton", Ee), e.component("VibeButtonGroup", Ie), e.component("VibeCloseButton", Fe), e.component("VibeSpinner", qe), e.component("VibePlaceholder", ze), e.component("VibeContainer", Ae), e.component("VibeRow", je), e.component("VibeCol", Oe), e.component("VibeCard", Ke), e.component("VibeBreadcrumb", _e), e.component("VibeNav", lt), e.component("VibeNavbar", nt), e.component("VibeNavbarBrand", it), e.component("VibeNavbarToggle", rt), e.component("VibeNavbarNav", bt), e.component("VibePagination", gt), e.component("VibeTabContent", St), e.component("VibeListGroup", $t), e.component("VibeProgress", Vt), e.component("VibeAccordion", Nt), e.component("VibeCollapse", Et), e.component("VibeDropdown", At), e.component("VibeModal", Ut), e.component("VibeOffcanvas", _t), e.component("VibeToast", oa), e.component("VibeCarousel", pa), e.component("VibeTooltip", ya), e.component("VibePopover", ka), e.component("VibeScrollspy", Sa), e.component("VibeIcon", $a), e.component("VibeDataTable", Ua), e.component("VibeFormInput", tl), e.component("VibeFormSelect", ul), e.component("VibeFormTextarea", yl), e.component("VibeFormSpinbutton", Ll), e.component("VibeFormDatepicker", Fl), e.component("VibeFormCheckbox", Hl), e.component("VibeFormRadio", Kl), e.component("VibeFormSwitch", ao), e.component("VibeFormGroup", bo), e.component("VibeFormWysiwyg", Vo), e.component("VibeInputGroup", Bo), e.component("VibeLink", Lo);
   }
 };
-function ho(e = "") {
-  const v = E(e), t = E(null), a = E(""), l = E(!1), s = E(!1), o = E(!1), r = async (p) => {
-    if (!p)
+function Mo(e = "") {
+  const r = L(e), t = L(null), a = L(""), l = L(!1), n = L(!1), o = L(!1), d = async (y) => {
+    if (!y)
       return t.value = null, a.value = "", { valid: !0 };
     o.value = !0;
     try {
-      const d = Array.isArray(p) ? p : [{ validator: p }];
-      for (const f of d) {
-        const h = await f.validator(v.value);
-        if (h === !1 || typeof h == "string")
-          return t.value = "invalid", a.value = typeof h == "string" ? h : f.message || "Invalid value", o.value = !1, { valid: !1, message: a.value };
+      const u = Array.isArray(y) ? y : [{ validator: y }];
+      for (const b of u) {
+        const p = await b.validator(r.value);
+        if (p === !1 || typeof p == "string")
+          return t.value = "invalid", a.value = typeof p == "string" ? p : b.message || "Invalid value", o.value = !1, { valid: !1, message: a.value };
       }
       return t.value = "valid", a.value = "", o.value = !1, { valid: !0 };
     } catch {
       return t.value = "invalid", a.value = "Validation error occurred", o.value = !1, { valid: !1, message: a.value };
     }
-  }, u = () => {
-    v.value = e, t.value = null, a.value = "", l.value = !1, s.value = !1, o.value = !1;
+  }, v = () => {
+    r.value = e, t.value = null, a.value = "", l.value = !1, n.value = !1, o.value = !1;
   }, c = () => {
-    s.value = !0;
-  }, b = () => {
+    n.value = !0;
+  }, m = () => {
     l.value = !0;
-  }, g = m(() => t.value === "valid"), C = m(() => t.value === "invalid");
+  }, f = h(() => t.value === "valid"), V = h(() => t.value === "invalid");
   return {
-    value: v,
+    value: r,
     validationState: t,
     validationMessage: a,
     isDirty: l,
-    isTouched: s,
+    isTouched: n,
     isValidating: o,
-    isValid: g,
-    isInvalid: C,
-    validate: r,
-    reset: u,
+    isValid: f,
+    isInvalid: V,
+    validate: d,
+    reset: v,
     markAsTouched: c,
-    markAsDirty: b
+    markAsDirty: m
   };
 }
-const mo = {
+const Io = {
   required: (e = "This field is required") => ({
-    validator: (v) => Array.isArray(v) ? v.length > 0 || e : typeof v == "string" ? v.trim().length > 0 || e : v != null && v !== "" || e,
+    validator: (r) => Array.isArray(r) ? r.length > 0 || e : typeof r == "string" ? r.trim().length > 0 || e : r != null && r !== "" || e,
     message: e
   }),
   email: (e = "Please enter a valid email address") => ({
-    validator: (v) => v ? /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v) || e : !0,
+    validator: (r) => r ? /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(r) || e : !0,
     message: e
   }),
-  minLength: (e, v) => ({
-    validator: (t) => t ? t.length >= e || v || `Minimum length is ${e} characters` : !0,
-    message: v
+  minLength: (e, r) => ({
+    validator: (t) => t ? t.length >= e || r || `Minimum length is ${e} characters` : !0,
+    message: r
   }),
-  maxLength: (e, v) => ({
-    validator: (t) => t ? t.length <= e || v || `Maximum length is ${e} characters` : !0,
-    message: v
+  maxLength: (e, r) => ({
+    validator: (t) => t ? t.length <= e || r || `Maximum length is ${e} characters` : !0,
+    message: r
   }),
-  min: (e, v) => ({
+  min: (e, r) => ({
     validator: (t) => {
       if (t == null || t === "") return !0;
       const a = Number(t);
-      return Number.isNaN(a) ? v || "Value must be a number" : a >= e || v || `Minimum value is ${e}`;
+      return Number.isNaN(a) ? r || "Value must be a number" : a >= e || r || `Minimum value is ${e}`;
     },
-    message: v
+    message: r
   }),
-  max: (e, v) => ({
+  max: (e, r) => ({
     validator: (t) => {
       if (t == null || t === "") return !0;
       const a = Number(t);
-      return Number.isNaN(a) ? v || "Value must be a number" : a <= e || v || `Maximum value is ${e}`;
+      return Number.isNaN(a) ? r || "Value must be a number" : a <= e || r || `Maximum value is ${e}`;
     },
-    message: v
+    message: r
   }),
-  pattern: (e, v = "Invalid format") => ({
-    validator: (t) => t ? e.test(t) || v : !0,
-    message: v
+  pattern: (e, r = "Invalid format") => ({
+    validator: (t) => t ? e.test(t) || r : !0,
+    message: r
   }),
   url: (e = "Please enter a valid URL") => ({
-    validator: (v) => {
-      if (!v) return !0;
+    validator: (r) => {
+      if (!r) return !0;
       try {
-        return new URL(v), !0;
+        return new URL(r), !0;
       } catch {
         return e;
       }
@@ -3241,104 +3393,121 @@ const mo = {
   async: (e) => ({
     validator: e
   })
-}, ae = "vibe-color-mode", le = {
+}, ue = "vibe-color-mode", ce = {
   light: "dark",
   dark: "auto",
   auto: "light"
-}, se = E("auto");
-let oe = !1;
-function vo(e) {
-  typeof document > "u" || document.documentElement.setAttribute("data-bs-theme", e);
+}, ie = L("auto");
+let ve = !1;
+const be = [];
+function To() {
+  return typeof window > "u" ? "light" : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+function we(e) {
+  if (typeof document > "u") return;
+  const r = e === "auto" ? To() : e;
+  document.documentElement.setAttribute("data-bs-theme", r);
 }
-function ee(e) {
-  se.value = e, vo(e);
+function ne(e) {
+  ie.value = e, we(e), be.forEach((r) => r(e));
 }
-ee("auto");
-function po() {
-  function e(l) {
-    if (l in le) {
+ne("auto");
+typeof window < "u" && window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", () => {
+  ie.value === "auto" && (we("auto"), be.forEach((e) => e("auto")));
+});
+function Ro() {
+  function e(n) {
+    if (n in ce) {
       try {
-        localStorage.setItem(ae, l);
+        localStorage.setItem(ue, n);
       } catch {
       }
-      ee(l);
+      ne(n);
     }
   }
-  function v() {
-    if (oe) return;
-    let l = "auto";
+  function r() {
+    if (ve) return;
+    let n = "auto";
     try {
-      const s = localStorage.getItem(ae);
-      s !== null && s in le && (l = s);
+      const o = localStorage.getItem(ue);
+      o !== null && o in ce && (n = o);
     } catch {
     }
-    ee(l), oe = !0;
+    ne(n), ve = !0;
   }
   function t() {
     try {
-      localStorage.removeItem(ae);
+      localStorage.removeItem(ue);
     } catch {
     }
-    oe = !1, ee("auto");
+    ve = !1, ne("auto");
   }
   function a() {
-    e(le[se.value] ?? "auto");
+    e(ce[ie.value] ?? "auto");
+  }
+  function l(n) {
+    be.push(n);
   }
   return {
-    colorMode: se,
+    colorMode: ie,
     setColorMode: e,
     toggleColorMode: a,
-    initColorMode: v,
-    clearColorMode: t
+    initColorMode: r,
+    clearColorMode: t,
+    onColorModeChange: l
   };
 }
 export {
-  $t as VibeAccordion,
-  $e as VibeAlert,
-  we as VibeBadge,
-  Ye as VibeBreadcrumb,
-  Ve as VibeButton,
-  xe as VibeButtonGroup,
-  He as VibeCard,
-  na as VibeCarousel,
-  Le as VibeCloseButton,
-  Fe as VibeCol,
-  wt as VibeCollapse,
-  Me as VibeContainer,
-  Ra as VibeDataTable,
-  Et as VibeDropdown,
-  Nl as VibeFormCheckbox,
-  wl as VibeFormDatepicker,
-  to as VibeFormGroup,
-  Da as VibeFormInput,
-  ql as VibeFormRadio,
-  Za as VibeFormSelect,
-  ml as VibeFormSpinbutton,
-  Gl as VibeFormSwitch,
-  nl as VibeFormTextarea,
-  co as VibeFormWysiwyg,
-  va as VibeIcon,
-  bt as VibeListGroup,
-  zt as VibeModal,
-  Qe as VibeNav,
-  We as VibeNavbar,
-  Ze as VibeNavbarBrand,
-  nt as VibeNavbarNav,
-  et as VibeNavbarToggle,
-  Dt as VibeOffcanvas,
-  ct as VibePagination,
-  Ee as VibePlaceholder,
-  ua as VibePopover,
-  mt as VibeProgress,
-  Ie as VibeRow,
-  ca as VibeScrollspy,
-  Ne as VibeSpinner,
-  ft as VibeTabContent,
-  Jt as VibeToast,
-  ra as VibeTooltip,
-  bo as default,
-  po as useColorMode,
-  ho as useFormValidation,
+  Nt as VibeAccordion,
+  Te as VibeAlert,
+  Ne as VibeBadge,
+  _e as VibeBreadcrumb,
+  Ee as VibeButton,
+  Ie as VibeButtonGroup,
+  Ke as VibeCard,
+  pa as VibeCarousel,
+  Fe as VibeCloseButton,
+  Oe as VibeCol,
+  Et as VibeCollapse,
+  Ae as VibeContainer,
+  Ua as VibeDataTable,
+  At as VibeDropdown,
+  Hl as VibeFormCheckbox,
+  Fl as VibeFormDatepicker,
+  bo as VibeFormGroup,
+  tl as VibeFormInput,
+  Kl as VibeFormRadio,
+  ul as VibeFormSelect,
+  Ll as VibeFormSpinbutton,
+  ao as VibeFormSwitch,
+  yl as VibeFormTextarea,
+  Vo as VibeFormWysiwyg,
+  $a as VibeIcon,
+  Bo as VibeInputGroup,
+  Lo as VibeLink,
+  $t as VibeListGroup,
+  Ut as VibeModal,
+  lt as VibeNav,
+  nt as VibeNavbar,
+  it as VibeNavbarBrand,
+  bt as VibeNavbarNav,
+  rt as VibeNavbarToggle,
+  _t as VibeOffcanvas,
+  gt as VibePagination,
+  ze as VibePlaceholder,
+  ka as VibePopover,
+  Vt as VibeProgress,
+  je as VibeRow,
+  Sa as VibeScrollspy,
+  qe as VibeSpinner,
+  St as VibeTabContent,
+  oa as VibeToast,
+  ya as VibeTooltip,
+  Eo as default,
+  $e as useBackButton,
+  ho as useBreakpoints,
+  Ro as useColorMode,
+  Mo as useFormValidation,
   G as useId,
-  mo as validators
+  Io as validators
 };