@velkymx/vibeui 0.5.4 → 0.7.0

package/dist/vibeui.es.js

@@ -1,45 +1,60 @@
-import { defineComponent as x, computed as y, openBlock as i, createElementBlock as s, normalizeClass as g, renderSlot as C, createTextVNode as w, toDisplayString as m, createCommentVNode as b, createBlock as q, resolveDynamicComponent as P, withCtx as F, createElementVNode as h, normalizeStyle as D, Fragment as M, renderList as A, reactive as oe, provide as de, unref as re, inject as Z, ref as T, watch as E, onMounted as G, onBeforeUnmount as H, useModel as Y, withDirectives as W, vModelText as ue, vModelSelect as ce, withModifiers as X, mergeModels as J } from "vue";
-const fe = /* @__PURE__ */ x({
+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({
   __name: "VibeAlert",
   props: {
     variant: { type: String, default: "primary" },
     modelValue: { type: Boolean, default: !0 },
     dismissable: { type: Boolean, default: !1 },
-    message: { type: String, required: !0 }
+    message: { type: String, required: !0 },
+    fade: { type: Boolean, default: !0 }
   },
-  emits: ["update:modelValue", "component-error"],
-  setup(e, { emit: f }) {
-    const t = e, a = f, l = y({
-      get: () => t.modelValue,
-      set: (d) => a("update:modelValue", d)
-    }), r = () => {
-      try {
-        l.value = !1;
-      } catch (d) {
-        a("component-error", {
-          message: "Dismiss failed",
-          componentName: "VibeAlert",
-          originalError: d
-        });
-      }
+  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 = () => {
+      a("close");
+    }, u = () => {
+      o.value = !1, a("update:modelValue", !1), a("closed");
     };
-    return (d, u) => l.value ? (i(), s("div", {
+    Y(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) {
+          a("component-error", {
+            message: "Bootstrap JS not loaded. Alert will use basic Vue logic.",
+            componentName: "VibeAlert",
+            originalError: b
+          });
+        }
+    }), 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;
+    });
+    const c = () => {
+      s.value ? s.value.close() : (o.value = !1, a("update:modelValue", !1), a("closed"));
+    };
+    return (b, g) => o.value ? (n(), i("div", {
       key: 0,
-      class: g(`alert alert-${e.variant}`),
+      ref_key: "alertRef",
+      ref: l,
+      class: $(["alert", `alert-${e.variant}`, { "alert-dismissible": e.dismissable, "fade show": e.fade }]),
       role: "alert"
     }, [
-      C(d.$slots, "default", {}, () => [
-        w(m(e.message), 1)
+      N(b.$slots, "default", {}, () => [
+        I(k(e.message), 1)
       ]),
-      e.dismissable ? (i(), s("button", {
+      e.dismissable ? (n(), i("button", {
         key: 0,
+        type: "button",
         class: "btn-close",
-        onClick: r,
-        "aria-label": "Close"
-      })) : b("", !0)
-    ], 2)) : b("", !0);
+        "aria-label": "Close",
+        onClick: c
+      })) : y("", !0)
+    ], 2)) : y("", !0);
   }
-}), ve = /* @__PURE__ */ x({
+}), we = /* @__PURE__ */ M({
   __name: "VibeBadge",
   props: {
     variant: { type: String, default: "primary" },
@@ -47,21 +62,21 @@ const fe = /* @__PURE__ */ x({
     tag: { type: String, default: "span" }
   },
   emits: ["component-error"],
-  setup(e, { emit: f }) {
-    const t = e, a = y(() => {
+  setup(e, { emit: v }) {
+    const t = e, a = m(() => {
       const l = ["badge", `bg-${t.variant}`];
       return t.pill && l.push("rounded-pill"), l.join(" ");
     });
-    return (l, r) => (i(), q(P(e.tag), {
-      class: g(a.value)
+    return (l, s) => (n(), z(A(e.tag), {
+      class: $(a.value)
     }, {
-      default: F(() => [
-        C(l.$slots, "default")
+      default: j(() => [
+        N(l.$slots, "default")
       ]),
       _: 3
     }, 8, ["class"]));
   }
-}), be = /* @__PURE__ */ x({
+}), Ve = /* @__PURE__ */ M({
   __name: "VibeButton",
   props: {
     variant: { type: String, default: "primary" },
@@ -74,29 +89,29 @@ const fe = /* @__PURE__ */ x({
     active: { type: Boolean, default: !1 }
   },
   emits: ["click", "component-error"],
-  setup(e, { emit: f }) {
-    const t = e, a = f, l = y(() => t.href ? "a" : t.to ? "router-link" : "button"), r = y(() => {
-      const u = ["btn"];
-      return t.outline ? u.push(`btn-outline-${t.variant}`) : u.push(`btn-${t.variant}`), t.size && u.push(`btn-${t.size}`), t.active && u.push("active"), u.join(" ");
-    }), d = (u) => {
-      t.disabled || a("click", u);
+  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);
     };
-    return (u, o) => (i(), q(P(l.value), {
-      class: g(r.value),
+    return (r, u) => (n(), z(A(l.value), {
+      class: $(s.value),
       type: e.href || e.to ? void 0 : e.type,
       href: e.href,
       to: e.to,
       disabled: e.disabled,
       "aria-disabled": e.disabled,
-      onClick: d
+      onClick: o
     }, {
-      default: F(() => [
-        C(u.$slots, "default")
+      default: j(() => [
+        N(r.$slots, "default")
       ]),
       _: 3
     }, 8, ["class", "type", "href", "to", "disabled", "aria-disabled"]));
   }
-}), me = ["role", "aria-label"], he = /* @__PURE__ */ x({
+}), Ce = ["role", "aria-label"], xe = /* @__PURE__ */ M({
   __name: "VibeButtonGroup",
   props: {
     size: { type: String, default: void 0 },
@@ -105,20 +120,20 @@ const fe = /* @__PURE__ */ x({
     ariaLabel: { type: String, default: void 0 }
   },
   emits: ["component-error"],
-  setup(e, { emit: f }) {
-    const t = e, a = y(() => {
+  setup(e, { emit: v }) {
+    const t = e, a = m(() => {
       const l = [t.vertical ? "btn-group-vertical" : "btn-group"];
       return t.size && l.push(`btn-group-${t.size}`), l.join(" ");
     });
-    return (l, r) => (i(), s("div", {
-      class: g(a.value),
+    return (l, s) => (n(), i("div", {
+      class: $(a.value),
       role: e.role,
       "aria-label": e.ariaLabel
     }, [
-      C(l.$slots, "default")
-    ], 10, me));
+      N(l.$slots, "default")
+    ], 10, Ce));
   }
-}), ye = ["disabled", "aria-label"], ge = /* @__PURE__ */ x({
+}), Be = ["disabled", "aria-label"], Le = /* @__PURE__ */ M({
   __name: "VibeCloseButton",
   props: {
     disabled: { type: Boolean, default: !1 },
@@ -126,19 +141,19 @@ const fe = /* @__PURE__ */ x({
     ariaLabel: { type: String, default: "Close" }
   },
   emits: ["click", "component-error"],
-  setup(e, { emit: f }) {
-    const t = e, a = f, l = (r) => {
-      t.disabled || a("click", r);
+  setup(e, { emit: v }) {
+    const t = e, a = v, l = (s) => {
+      t.disabled || a("click", s);
     };
-    return (r, d) => (i(), s("button", {
+    return (s, o) => (n(), i("button", {
       type: "button",
-      class: g(["btn-close", { "btn-close-white": e.white }]),
+      class: $(["btn-close", { "btn-close-white": e.white }]),
       disabled: e.disabled,
       "aria-label": e.ariaLabel,
       onClick: l
-    }, null, 10, ye));
+    }, null, 10, Be));
   }
-}), pe = { class: "visually-hidden" }, ke = /* @__PURE__ */ x({
+}), Te = { class: "visually-hidden" }, Ne = /* @__PURE__ */ M({
   __name: "VibeSpinner",
   props: {
     variant: { type: String, default: void 0 },
@@ -148,22 +163,22 @@ const fe = /* @__PURE__ */ x({
     tag: { type: String, default: "div" }
   },
   emits: ["component-error"],
-  setup(e, { emit: f }) {
-    const t = e, a = y(() => {
+  setup(e, { emit: v }) {
+    const t = e, a = m(() => {
       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, r) => (i(), q(P(e.tag), {
-      class: g(a.value),
+    return (l, s) => (n(), z(A(e.tag), {
+      class: $(a.value),
       role: "status"
     }, {
-      default: F(() => [
-        h("span", pe, m(e.label), 1)
+      default: j(() => [
+        S("span", Te, k(e.label), 1)
       ]),
       _: 1
     }, 8, ["class"]));
   }
-}), $e = /* @__PURE__ */ x({
+}), Ee = /* @__PURE__ */ M({
   __name: "VibePlaceholder",
   props: {
     variant: { type: String, default: void 0 },
@@ -173,49 +188,49 @@ const fe = /* @__PURE__ */ x({
     tag: { type: String, default: "span" }
   },
   emits: ["component-error"],
-  setup(e, { emit: f }) {
-    const t = e, a = y(() => {
-      const d = ["placeholder"];
-      return t.variant && d.push(`bg-${t.variant}`), t.size && d.push(`placeholder-${t.size}`), d.join(" ");
-    }), l = y(() => {
+  setup(e, { emit: v }) {
+    const t = e, a = m(() => {
+      const o = ["placeholder"];
+      return t.variant && o.push(`bg-${t.variant}`), t.size && o.push(`placeholder-${t.size}`), o.join(" ");
+    }), l = m(() => {
       if (t.animation) return `placeholder-${t.animation}`;
-    }), r = y(() => {
+    }), s = m(() => {
       if (t.width)
         return { width: typeof t.width == "number" ? `${t.width}%` : t.width };
     });
-    return (d, u) => (i(), q(P(e.tag), {
-      class: g(l.value)
+    return (o, r) => (n(), z(A(e.tag), {
+      class: $(l.value)
     }, {
-      default: F(() => [
-        h("span", {
-          class: g(a.value),
-          style: D(r.value)
+      default: j(() => [
+        S("span", {
+          class: $(a.value),
+          style: K(s.value)
         }, [
-          C(d.$slots, "default")
+          N(o.$slots, "default")
         ], 6)
       ]),
       _: 3
     }, 8, ["class"]));
   }
-}), Se = /* @__PURE__ */ x({
+}), Me = /* @__PURE__ */ M({
   __name: "VibeContainer",
   props: {
     fluid: { type: [Boolean, String], default: !1 },
     tag: { type: String, default: "div" }
   },
   emits: ["component-error"],
-  setup(e, { emit: f }) {
-    const t = e, a = y(() => t.fluid === !1 ? "container" : t.fluid === !0 ? "container-fluid" : `container-${t.fluid}`);
-    return (l, r) => (i(), q(P(e.tag), {
-      class: g(a.value)
+  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), {
+      class: $(a.value)
     }, {
-      default: F(() => [
-        C(l.$slots, "default")
+      default: j(() => [
+        N(l.$slots, "default")
       ]),
       _: 3
     }, 8, ["class"]));
   }
-}), Ve = /* @__PURE__ */ x({
+}), Ie = /* @__PURE__ */ M({
   __name: "VibeRow",
   props: {
     tag: { type: String, default: "div" },
@@ -251,33 +266,33 @@ const fe = /* @__PURE__ */ x({
     justifyContent: { type: String, default: void 0 }
   },
   emits: ["component-error"],
-  setup(e, { emit: f }) {
-    const t = e, a = y(() => {
+  setup(e, { emit: v }) {
+    const t = e, a = m(() => {
       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 r = ["sm", "md", "lg", "xl", "xxl"];
-      return r.forEach((d) => {
-        const u = d.charAt(0).toUpperCase() + d.slice(1), o = `gutters${u}`;
-        t[o] !== void 0 && l.push(`g-${d}-${t[o]}`);
-        const n = `guttersX${u}`;
-        t[n] !== void 0 && l.push(`gx-${d}-${t[n]}`);
-        const c = `guttersY${u}`;
-        t[c] !== void 0 && l.push(`gy-${d}-${t[c]}`);
-      }), t.rowCols !== void 0 && l.push(`row-cols-${t.rowCols}`), r.forEach((d) => {
-        const u = `rowCols${d.charAt(0).toUpperCase() + d.slice(1)}`;
-        t[u] !== void 0 && l.push(`row-cols-${d}-${t[u]}`);
+      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}`;
+        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]}`);
       }), t.alignItems && l.push(`align-items-${t.alignItems}`), t.justifyContent && l.push(`justify-content-${t.justifyContent}`), l.join(" ");
     });
-    return (l, r) => (i(), q(P(e.tag), {
-      class: g(a.value)
+    return (l, s) => (n(), z(A(e.tag), {
+      class: $(a.value)
     }, {
-      default: F(() => [
-        C(l.$slots, "default")
+      default: j(() => [
+        N(l.$slots, "default")
       ]),
       _: 3
     }, 8, ["class"]));
   }
-}), Ce = /* @__PURE__ */ x({
+}), Fe = /* @__PURE__ */ M({
   __name: "VibeCol",
   props: {
     tag: { type: String, default: "div" },
@@ -306,8 +321,8 @@ const fe = /* @__PURE__ */ x({
     alignSelf: { type: String, default: void 0 }
   },
   emits: ["component-error"],
-  setup(e, { emit: f }) {
-    const t = e, a = y(() => {
+  setup(e, { emit: v }) {
+    const t = e, a = m(() => {
       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 },
@@ -315,35 +330,35 @@ const fe = /* @__PURE__ */ x({
         { name: "lg", value: t.lg },
         { name: "xl", value: t.xl },
         { name: "xxl", value: t.xxl }
-      ].forEach(({ name: u, value: o }) => {
-        o === !0 ? l.push(`col-${u}`) : o === "auto" ? l.push(`col-${u}-auto`) : o !== void 0 && l.push(`col-${u}-${o}`);
+      ].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}`);
       })) : 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, r) => (i(), q(P(e.tag), {
-      class: g(a.value)
+    return (l, s) => (n(), z(A(e.tag), {
+      class: $(a.value)
     }, {
-      default: F(() => [
-        C(l.$slots, "default")
+      default: j(() => [
+        N(l.$slots, "default")
       ]),
       _: 3
     }, 8, ["class"]));
   }
-}), xe = ["src", "alt"], we = {
+}), Pe = ["src", "alt"], Re = {
   key: 1,
   class: "card-header"
-}, Be = {
+}, qe = {
   key: 2,
   class: "card-body"
-}, Ne = {
+}, ze = {
   key: 0,
   class: "card-title"
-}, Te = {
+}, Ae = {
   key: 1,
   class: "card-text"
-}, Me = {
+}, je = {
   key: 3,
   class: "card-footer"
-}, qe = ["src", "alt"], Pe = /* @__PURE__ */ x({
+}, Oe = ["src", "alt"], He = /* @__PURE__ */ M({
   __name: "VibeCard",
   props: {
     variant: { type: String, default: void 0 },
@@ -362,145 +377,198 @@ const fe = /* @__PURE__ */ x({
     imgBottom: { type: Boolean, default: !1 }
   },
   emits: ["component-error"],
-  setup(e, { emit: f }) {
-    const t = e, a = y(() => {
+  setup(e, { emit: v }) {
+    const t = e, a = m(() => {
       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, r) => (i(), q(P(e.tag), {
-      class: g(a.value)
+    return (l, s) => (n(), z(A(e.tag), {
+      class: $(a.value)
     }, {
-      default: F(() => [
-        e.imgSrc && e.imgTop ? (i(), s("img", {
+      default: j(() => [
+        e.imgSrc && e.imgTop ? (n(), i("img", {
           key: 0,
           src: e.imgSrc,
           alt: e.imgAlt,
           class: "card-img-top"
-        }, null, 8, xe)) : b("", !0),
-        e.header || l.$slots.header ? (i(), s("div", we, [
-          C(l.$slots, "header", {}, () => [
-            w(m(e.header), 1)
+        }, null, 8, Pe)) : y("", !0),
+        e.header || l.$slots.header ? (n(), i("div", Re, [
+          N(l.$slots, "header", {}, () => [
+            I(k(e.header), 1)
           ])
-        ])) : b("", !0),
-        e.title || e.body || l.$slots.default || l.$slots.body ? (i(), s("div", Be, [
-          e.title || l.$slots.title ? (i(), s("h5", Ne, [
-            C(l.$slots, "title", {}, () => [
-              w(m(e.title), 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", {}, () => [
+              I(k(e.title), 1)
             ])
-          ])) : b("", !0),
-          e.body || l.$slots.body ? (i(), s("p", Te, [
-            C(l.$slots, "body", {}, () => [
-              w(m(e.body), 1)
+          ])) : y("", !0),
+          e.body || l.$slots.body ? (n(), i("p", Ae, [
+            N(l.$slots, "body", {}, () => [
+              I(k(e.body), 1)
             ])
-          ])) : b("", !0),
-          C(l.$slots, "default")
-        ])) : b("", !0),
-        e.footer || l.$slots.footer ? (i(), s("div", Me, [
-          C(l.$slots, "footer", {}, () => [
-            w(m(e.footer), 1)
+          ])) : y("", !0),
+          N(l.$slots, "default")
+        ])) : y("", !0),
+        e.footer || l.$slots.footer ? (n(), i("div", je, [
+          N(l.$slots, "footer", {}, () => [
+            I(k(e.footer), 1)
           ])
-        ])) : b("", !0),
-        e.imgSrc && e.imgBottom ? (i(), s("img", {
+        ])) : y("", !0),
+        e.imgSrc && e.imgBottom ? (n(), i("img", {
           key: 4,
           src: e.imgSrc,
           alt: e.imgAlt,
           class: "card-img-bottom"
-        }, null, 8, qe)) : b("", !0)
+        }, null, 8, Oe)) : y("", !0)
       ]),
       _: 3
     }, 8, ["class"]));
   }
-}), Fe = ["aria-label"], Le = { class: "breadcrumb" }, ze = ["aria-current"], je = /* @__PURE__ */ x({
+}), De = ["aria-label"], Ge = { class: "breadcrumb" }, Xe = ["aria-current"], Ye = /* @__PURE__ */ M({
   __name: "VibeBreadcrumb",
   props: {
     ariaLabel: { type: String, default: "breadcrumb" },
     items: { type: Array, required: !0 }
   },
   emits: ["item-click", "component-error"],
-  setup(e, { emit: f }) {
-    const t = f, a = (l, r, d) => {
-      l.active || t("item-click", { item: l, index: r, event: d });
+  setup(e, { emit: v }) {
+    const t = v, a = (l, s, o) => {
+      l.active || t("item-click", { item: l, index: s, event: o });
     };
-    return (l, r) => (i(), s("nav", { "aria-label": e.ariaLabel }, [
-      h("ol", Le, [
-        (i(!0), s(M, null, A(e.items, (d, u) => (i(), s("li", {
-          key: u,
-          class: g(["breadcrumb-item", { active: d.active }]),
-          "aria-current": d.active ? "page" : void 0
+    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,
+          class: $(["breadcrumb-item", { active: o.active }]),
+          "aria-current": o.active ? "page" : void 0
         }, [
-          (i(), q(P(d.href ? "a" : d.to ? "router-link" : "span"), {
-            href: d.href,
-            to: d.to,
-            onClick: (o) => a(d, u, o)
+          (n(), z(A(o.href ? "a" : o.to ? "router-link" : "span"), {
+            href: o.href,
+            to: o.to,
+            onClick: (u) => a(o, r, u)
           }, {
-            default: F(() => [
-              C(l.$slots, "item", {
-                item: d,
-                index: u
+            default: j(() => [
+              N(l.$slots, "item", {
+                item: o,
+                index: r
               }, () => [
-                w(m(d.text), 1)
+                I(k(o.text), 1)
               ])
             ]),
             _: 2
           }, 1032, ["href", "to", "onClick"]))
-        ], 10, ze))), 128))
+        ], 10, Xe))), 128))
       ])
-    ], 8, Fe));
+    ], 8, De));
   }
-}), Ae = /* @__PURE__ */ x({
+}), Ue = { class: "dropdown-menu" }, Je = {
+  key: 0,
+  class: "dropdown-divider"
+}, Ke = {
+  key: 1,
+  class: "dropdown-header"
+}, Qe = /* @__PURE__ */ M({
   __name: "VibeNav",
   props: {
-    tabs: { type: Boolean, default: !1 },
+    items: { type: Array, required: !0 },
     pills: { type: Boolean, default: !1 },
-    fill: { type: Boolean, default: !1 },
-    justified: { type: Boolean, default: !1 },
+    tabs: { type: Boolean, default: !1 },
     vertical: { type: Boolean, default: !1 },
-    tag: { type: String, default: "ul" },
-    items: { type: Array, required: !0 }
+    justified: { type: Boolean, default: !1 },
+    fill: { type: Boolean, default: !1 },
+    tag: { type: String, default: "ul" }
   },
-  emits: ["item-click", "component-error"],
-  setup(e, { emit: f }) {
-    const t = e, a = f, l = y(() => {
-      const o = ["nav"];
-      return t.tabs && o.push("nav-tabs"), t.pills && o.push("nav-pills"), t.fill && o.push("nav-fill"), t.justified && o.push("nav-justified"), t.vertical && o.push("flex-column"), o.join(" ");
-    }), r = (o) => {
-      const n = ["nav-link"];
-      return o.active && n.push("active"), o.disabled && n.push("disabled"), n.join(" ");
-    }, d = (o) => o.href ? "a" : o.to ? "router-link" : "a", u = (o, n, c) => {
-      o.disabled || a("item-click", { item: o, index: n, event: c });
+  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)
+        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);
+            }
+          });
+        } catch (d) {
+          l("component-error", {
+            message: "Bootstrap JS not loaded. Nav will use basic Vue logic.",
+            componentName: "VibeNav",
+            originalError: d
+          });
+        }
+    };
+    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();
+      }), o.clear();
+    }), O(() => a.items, async () => {
+      await ne(), await C();
+    }, { deep: !0 });
+    const p = (d, f, h) => {
+      d.disabled || l("item-click", { item: d, index: f, event: h });
     };
-    return (o, n) => (i(), q(P(e.tag), {
-      class: g(l.value)
+    return v({ bsInstances: o, refresh: C }), (d, f) => (n(), z(A(e.tag), {
+      ref_key: "navRef",
+      ref: s,
+      class: $(r.value)
     }, {
-      default: F(() => [
-        (i(!0), s(M, null, A(e.items, (c, v) => (i(), s("li", {
-          key: v,
-          class: "nav-item"
+      default: j(() => [
+        (n(!0), i(F, null, H(e.items, (h, w) => (n(), i("li", {
+          key: w,
+          class: $(["nav-item", { dropdown: h.children && h.children.length > 0 }])
         }, [
-          (i(), q(P(d(c)), {
-            class: g(r(c)),
-            href: c.href,
-            to: c.to,
-            "aria-current": c.active ? "page" : void 0,
-            "aria-disabled": c.disabled,
-            onClick: (p) => u(c, v, p)
+          h.children && h.children.length > 0 ? (n(), i(F, { key: 0 }, [
+            S("a", {
+              class: $(["nav-link dropdown-toggle", { active: h.active, disabled: h.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"), {
+                  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
+                }, {
+                  default: j(() => [
+                    I(k(x.text), 1)
+                  ]),
+                  _: 2
+                }, 1032, ["class", "href", "to", "type"]))
+              ]))), 128))
+            ])
+          ], 64)) : (n(), z(A(h.href ? "a" : h.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)
           }, {
-            default: F(() => [
-              C(o.$slots, "item", {
-                item: c,
-                index: v
-              }, () => [
-                w(m(c.text), 1)
-              ])
+            default: j(() => [
+              I(k(h.text), 1)
             ]),
             _: 2
-          }, 1032, ["class", "href", "to", "aria-current", "aria-disabled", "onClick"]))
-        ]))), 128))
+          }, 1032, ["class", "href", "to", "type", "aria-current", "data-bs-toggle", "data-bs-target", "onClick"]))
+        ], 2))), 128))
       ]),
-      _: 3
+      _: 1
     }, 8, ["class"]));
   }
-}), Ie = /* @__PURE__ */ x({
+}), We = /* @__PURE__ */ M({
   __name: "VibeNavbar",
   props: {
     variant: { type: String, default: "light" },
@@ -511,181 +579,183 @@ const fe = /* @__PURE__ */ x({
     tag: { type: String, default: "nav" }
   },
   emits: ["component-error"],
-  setup(e, { emit: f }) {
-    const t = e, a = oe({});
-    de("vibeNavbarCollapse", { collapseStates: a, toggleCollapse: (o) => {
-      a[o] = !a[o];
+  setup(e, { emit: v }) {
+    const t = e, a = pe({});
+    ve("vibeNavbarCollapse", { collapseStates: a, toggleCollapse: (u) => {
+      a[u] = !a[u];
     } });
-    const r = y(() => {
-      const o = ["navbar"];
-      return t.expand === !0 ? o.push("navbar-expand") : typeof t.expand == "string" && o.push(`navbar-expand-${t.expand}`), o.push(`bg-${t.variant}`), t.position && o.push(t.position), o.join(" ");
-    }), d = y(() => {
+    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(() => {
       if (t.theme) return t.theme;
       if (t.variant === "dark") return "dark";
       if (t.variant === "light") return "light";
-    }), u = y(() => {
+    }), r = m(() => {
       if (t.container !== !1)
         return t.container === !0 ? "container-fluid" : `container-${t.container}`;
     });
-    return (o, n) => (i(), q(P(e.tag), {
-      class: g(r.value),
-      "data-bs-theme": d.value
+    return (u, c) => (n(), z(A(e.tag), {
+      class: $(s.value),
+      "data-bs-theme": o.value
     }, {
-      default: F(() => [
-        u.value ? (i(), s("div", {
+      default: j(() => [
+        r.value ? (n(), i("div", {
           key: 0,
-          class: g(u.value)
+          class: $(r.value)
         }, [
-          C(o.$slots, "default")
-        ], 2)) : C(o.$slots, "default", { key: 1 })
+          N(u.$slots, "default")
+        ], 2)) : N(u.$slots, "default", { key: 1 })
       ]),
       _: 3
     }, 8, ["class", "data-bs-theme"]));
   }
-}), Oe = /* @__PURE__ */ x({
+}), Ze = /* @__PURE__ */ M({
   __name: "VibeNavbarBrand",
   props: {
     href: { type: String, default: void 0 },
     to: { type: [String, Object], default: void 0 }
   },
   emits: ["component-error"],
-  setup(e, { emit: f }) {
+  setup(e, { emit: v }) {
     const t = e, a = t.href ? "a" : t.to ? "router-link" : "span";
-    return (l, r) => (i(), q(P(re(a)), {
+    return (l, s) => (n(), z(A(ye(a)), {
       class: "navbar-brand",
       href: e.href,
       to: e.to
     }, {
-      default: F(() => [
-        C(l.$slots, "default")
+      default: j(() => [
+        N(l.$slots, "default")
       ]),
       _: 3
     }, 8, ["href", "to"]));
   }
-}), De = ["aria-controls", "aria-expanded", "aria-label"], Ee = /* @__PURE__ */ x({
+}), _e = ["data-bs-target", "aria-controls", "aria-expanded", "aria-label"], et = /* @__PURE__ */ M({
   __name: "VibeNavbarToggle",
   props: {
     target: { type: String, required: !0 },
     ariaLabel: { type: String, default: "Toggle navigation" }
   },
   emits: ["component-error"],
-  setup(e, { emit: f }) {
-    const t = e, a = Z("vibeNavbarCollapse", null), l = y(() => (a == null ? void 0 : a.collapseStates[t.target]) ?? !1), r = () => {
+  setup(e, { emit: v }) {
+    const t = e, a = J("vibeNavbarCollapse", null), l = m(() => a?.collapseStates[t.target] ?? !1), s = async () => {
       a && a.toggleCollapse(t.target);
+      try {
+        const o = document.getElementById(t.target);
+        o && (await import("bootstrap")).Collapse.getOrCreateInstance(o).toggle();
+      } catch {
+      }
     };
-    return (d, u) => (i(), s("button", {
+    return (o, r) => (n(), i("button", {
       class: "navbar-toggler",
       type: "button",
+      "data-bs-target": `#${e.target}`,
+      "data-bs-toggle": "collapse",
       "aria-controls": e.target,
       "aria-expanded": l.value,
       "aria-label": e.ariaLabel,
-      onClick: r
-    }, [...u[0] || (u[0] = [
-      h("span", { class: "navbar-toggler-icon" }, null, -1)
-    ])], 8, De));
+      onClick: s
+    }, [...r[0] || (r[0] = [
+      S("span", { class: "navbar-toggler-icon" }, null, -1)
+    ])], 8, _e));
   }
-}), Re = { class: "dropdown-menu" }, Xe = { key: 0 }, Ye = { key: 1 }, Ge = { class: "dropdown-header" }, He = { key: 2 }, Ke = /* @__PURE__ */ x({
+}), tt = { class: "dropdown-menu" }, at = { key: 0 }, lt = { key: 1 }, ot = { class: "dropdown-header" }, st = { key: 2 }, nt = /* @__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: f }) {
-    const t = f, a = (n) => {
-      var v;
-      const c = ["nav-item"];
-      return (v = n.children) != null && v.length && c.push("dropdown"), c.join(" ");
-    }, l = (n) => {
-      var v;
-      const c = ["nav-link"];
-      return n.active && c.push("active"), n.disabled && c.push("disabled"), (v = n.children) != null && v.length && c.push("dropdown-toggle"), c.join(" ");
-    }, r = (n) => n.href ? "a" : n.to ? "router-link" : "a", d = (n) => {
-      const c = ["dropdown-item"];
-      return n.active && c.push("active"), n.disabled && c.push("disabled"), c.join(" ");
-    }, u = (n, c, v) => {
-      n.disabled || t("item-click", { item: n, index: c, event: v });
-    }, o = (n, c, v, p, B) => {
-      !v.disabled && !v.divider && !v.header && t("dropdown-item-click", { item: n, itemIndex: c, child: v, childIndex: p, event: B });
+  setup(e, { emit: v }) {
+    const t = v, a = (c) => {
+      const b = ["nav-item"];
+      return c.children?.length && b.push("dropdown"), b.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 });
     };
-    return (n, c) => (i(), q(P(e.tag), { class: "navbar-nav" }, {
-      default: F(() => [
-        e.items && e.items.length > 0 ? (i(!0), s(M, { key: 0 }, A(e.items, (v, p) => {
-          var B;
-          return i(), s("li", {
-            key: p,
-            class: g(a(v))
-          }, [
-            (B = v.children) != null && B.length ? (i(), s(M, { key: 0 }, [
-              h("a", {
-                class: g(l(v)),
-                href: "#",
-                role: "button",
-                "data-bs-toggle": "dropdown",
-                "aria-expanded": "false"
-              }, [
-                C(n.$slots, "item", {
-                  item: v,
-                  index: p
-                }, () => [
-                  w(m(v.text), 1)
-                ])
-              ], 2),
-              h("ul", Re, [
-                (i(!0), s(M, null, A(v.children, ($, L) => (i(), s(M, { key: L }, [
-                  $.divider ? (i(), s("li", Xe, [...c[0] || (c[0] = [
-                    h("hr", { class: "dropdown-divider" }, null, -1)
-                  ])])) : $.header ? (i(), s("li", Ye, [
-                    h("h6", Ge, m($.text), 1)
-                  ])) : (i(), s("li", He, [
-                    (i(), q(P($.href ? "a" : $.to ? "router-link" : "button"), {
-                      class: g(d($)),
-                      href: $.href,
-                      to: $.to,
-                      type: !$.href && !$.to ? "button" : void 0,
-                      onClick: (z) => o(v, p, $, L, z)
-                    }, {
-                      default: F(() => [
-                        C(n.$slots, "dropdown-item", {
-                          item: v,
-                          child: $,
-                          index: p,
-                          childIndex: L
-                        }, () => [
-                          w(m($.text), 1)
-                        ])
-                      ]),
-                      _: 2
-                    }, 1032, ["class", "href", "to", "type", "onClick"]))
-                  ]))
-                ], 64))), 128))
+    return (c, b) => (n(), z(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))
+        }, [
+          g.children?.length ? (n(), i(F, { key: 0 }, [
+            S("a", {
+              class: $(l(g)),
+              href: "#",
+              role: "button",
+              "data-bs-toggle": "dropdown",
+              "aria-expanded": "false"
+            }, [
+              N(c.$slots, "item", {
+                item: g,
+                index: C
+              }, () => [
+                I(k(g.text), 1)
               ])
-            ], 64)) : (i(), q(P(r(v)), {
-              key: 1,
-              class: g(l(v)),
-              href: v.href,
-              to: v.to,
-              "aria-current": v.active ? "page" : void 0,
-              "aria-disabled": v.disabled,
-              onClick: ($) => u(v, p, $)
-            }, {
-              default: F(() => [
-                C(n.$slots, "item", {
-                  item: v,
-                  index: p
-                }, () => [
-                  w(m(v.text), 1)
-                ])
-              ]),
-              _: 2
-            }, 1032, ["class", "href", "to", "aria-current", "aria-disabled", "onClick"]))
-          ], 2);
-        }), 128)) : C(n.$slots, "default", { key: 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("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)
+                  }, {
+                    default: j(() => [
+                      N(c.$slots, "dropdown-item", {
+                        item: g,
+                        child: p,
+                        index: C,
+                        childIndex: d
+                      }, () => [
+                        I(k(p.text), 1)
+                      ])
+                    ]),
+                    _: 2
+                  }, 1032, ["class", "href", "to", "type", "onClick"]))
+                ]))
+              ], 64))), 128))
+            ])
+          ], 64)) : (n(), z(A(s(g)), {
+            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)
+          }, {
+            default: j(() => [
+              N(c.$slots, "item", {
+                item: g,
+                index: C
+              }, () => [
+                I(k(g.text), 1)
+              ])
+            ]),
+            _: 2
+          }, 1032, ["class", "href", "to", "aria-current", "aria-disabled", "onClick"]))
+        ], 2))), 128)) : N(c.$slots, "default", { key: 1 })
       ]),
       _: 3
     }));
   }
-}), Ue = ["aria-label"], Qe = ["disabled", "aria-disabled"], We = ["aria-current", "onClick"], Je = ["disabled", "aria-disabled"], Ze = /* @__PURE__ */ x({
+}), it = ["aria-label"], rt = ["disabled", "aria-disabled"], dt = ["aria-current", "onClick"], ut = ["disabled", "aria-disabled"], ct = /* @__PURE__ */ M({
   __name: "VibePagination",
   props: {
     size: { type: String, default: void 0 },
@@ -697,71 +767,71 @@ const fe = /* @__PURE__ */ x({
     nextText: { type: String, default: "Next" }
   },
   emits: ["update:currentPage", "page-click", "component-error"],
-  setup(e, { emit: f }) {
-    const t = e, a = f, l = y(() => {
-      const n = ["pagination"];
-      return t.size && n.push(`pagination-${t.size}`), n.join(" ");
-    }), r = y(() => Array.from({ length: t.totalPages }, (n, c) => c + 1)), d = (n) => {
-      n >= 1 && n <= t.totalPages && (a("update:currentPage", n), a("page-click", n));
-    }, u = y(() => t.currentPage === 1), o = y(() => t.currentPage === t.totalPages);
-    return (n, c) => (i(), s("nav", { "aria-label": e.ariaLabel }, [
-      h("ul", {
-        class: g(l.value)
+  setup(e, { emit: v }) {
+    const t = e, a = v, l = m(() => {
+      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) => {
+      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 }, [
+      S("ul", {
+        class: $(l.value)
       }, [
-        e.showPrevNext ? (i(), s("li", {
+        e.showPrevNext ? (n(), i("li", {
           key: 0,
-          class: g(["page-item", { disabled: u.value }])
+          class: $(["page-item", { disabled: r.value }])
         }, [
-          h("button", {
+          S("button", {
             class: "page-link",
             type: "button",
-            disabled: u.value,
-            "aria-disabled": u.value,
-            onClick: c[0] || (c[0] = (v) => d(e.currentPage - 1))
+            disabled: r.value,
+            "aria-disabled": r.value,
+            onClick: b[0] || (b[0] = (g) => o(e.currentPage - 1))
           }, [
-            C(n.$slots, "prev", { disabled: u.value }, () => [
-              w(m(e.prevText), 1)
+            N(c.$slots, "prev", { disabled: r.value }, () => [
+              I(k(e.prevText), 1)
             ])
-          ], 8, Qe)
-        ], 2)) : b("", !0),
-        (i(!0), s(M, null, A(r.value, (v) => (i(), s("li", {
-          key: v,
-          class: g(["page-item", { active: v === e.currentPage }])
+          ], 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 }])
         }, [
-          h("button", {
+          S("button", {
             class: "page-link",
             type: "button",
-            "aria-current": v === e.currentPage ? "page" : void 0,
-            onClick: (p) => d(v)
+            "aria-current": g === e.currentPage ? "page" : void 0,
+            onClick: (C) => o(g)
           }, [
-            C(n.$slots, "page", {
-              page: v,
-              active: v === e.currentPage
+            N(c.$slots, "page", {
+              page: g,
+              active: g === e.currentPage
             }, () => [
-              w(m(v), 1)
+              I(k(g), 1)
             ])
-          ], 8, We)
+          ], 8, dt)
         ], 2))), 128)),
-        e.showPrevNext ? (i(), s("li", {
+        e.showPrevNext ? (n(), i("li", {
           key: 1,
-          class: g(["page-item", { disabled: o.value }])
+          class: $(["page-item", { disabled: u.value }])
         }, [
-          h("button", {
+          S("button", {
             class: "page-link",
             type: "button",
-            disabled: o.value,
-            "aria-disabled": o.value,
-            onClick: c[1] || (c[1] = (v) => d(e.currentPage + 1))
+            disabled: u.value,
+            "aria-disabled": u.value,
+            onClick: b[1] || (b[1] = (g) => o(e.currentPage + 1))
           }, [
-            C(n.$slots, "next", { disabled: o.value }, () => [
-              w(m(e.nextText), 1)
+            N(c.$slots, "next", { disabled: u.value }, () => [
+              I(k(e.nextText), 1)
             ])
-          ], 8, Je)
-        ], 2)) : b("", !0)
+          ], 8, ut)
+        ], 2)) : y("", !0)
       ], 2)
-    ], 8, Ue));
+    ], 8, it));
   }
-}), _e = ["id", "aria-labelledby"], et = /* @__PURE__ */ x({
+}), vt = ["id", "aria-labelledby"], ft = /* @__PURE__ */ M({
   __name: "VibeTabContent",
   props: {
     id: { type: String, default: void 0 },
@@ -769,37 +839,47 @@ const fe = /* @__PURE__ */ x({
     panes: { type: Array, required: !0 },
     fade: { type: Boolean, default: !0 }
   },
-  emits: ["component-error"],
-  setup(e, { emit: f }) {
-    const t = e, a = (l) => {
+  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"), l.active && r.push("show", "active"), r.join(" ");
+      return t.fade && r.push("fade"), o.active && r.push("show", "active"), r.join(" ");
     };
-    return (l, r) => (i(), q(P(e.tag), {
+    return Y(async () => {
+      if (a.value)
+        try {
+          const r = (await import("bootstrap")).Tab;
+        } catch {
+        }
+    }), X(() => {
+      l.forEach((o) => o.dispose()), l.clear();
+    }), (o, r) => (n(), z(A(e.tag), {
       id: e.id,
+      ref_key: "tabContentRef",
+      ref: a,
       class: "tab-content"
     }, {
-      default: F(() => [
-        (i(!0), s(M, null, A(e.panes, (d, u) => (i(), s("div", {
-          key: d.id,
-          id: d.id,
-          class: g(a(d)),
+      default: j(() => [
+        (n(!0), i(F, null, H(e.panes, (u, c) => (n(), i("div", {
+          key: u.id,
+          id: u.id,
+          class: $(s(u)),
           role: "tabpanel",
-          "aria-labelledby": `${d.id}-tab`,
+          "aria-labelledby": `${u.id}-tab`,
           tabindex: "0"
         }, [
-          C(l.$slots, "pane", {
-            pane: d,
-            index: u
+          N(o.$slots, "pane", {
+            pane: u,
+            index: c
           }, () => [
-            w(m(d.content), 1)
+            I(k(u.content), 1)
           ])
-        ], 10, _e))), 128))
+        ], 10, vt))), 128))
       ]),
       _: 3
     }, 8, ["id"]));
   }
-}), tt = /* @__PURE__ */ x({
+}), bt = /* @__PURE__ */ M({
   __name: "VibeListGroup",
   props: {
     flush: { type: Boolean, default: !1 },
@@ -809,35 +889,35 @@ const fe = /* @__PURE__ */ x({
     items: { type: Array, required: !0 }
   },
   emits: ["item-click", "component-error"],
-  setup(e, { emit: f }) {
-    const t = e, a = f, l = y(() => {
-      const o = ["list-group"];
-      return t.flush && o.push("list-group-flush"), t.numbered && o.push("list-group-numbered"), t.horizontal === !0 ? o.push("list-group-horizontal") : typeof t.horizontal == "string" && o.push(`list-group-horizontal-${t.horizontal}`), o.join(" ");
-    }), r = (o) => o.href ? "a" : o.to ? "router-link" : "li", d = (o) => {
-      const n = ["list-group-item"];
-      return o.active && n.push("active"), o.disabled && n.push("disabled"), o.variant && n.push(`list-group-item-${o.variant}`), n.join(" ");
-    }, u = (o, n, c) => {
-      o.disabled || a("item-click", { item: o, index: n, event: c });
+  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) => {
+      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 (o, n) => (i(), q(P(e.tag), {
-      class: g(l.value)
+    return (u, c) => (n(), z(A(e.tag), {
+      class: $(l.value)
     }, {
-      default: F(() => [
-        (i(!0), s(M, null, A(e.items, (c, v) => (i(), q(P(r(c)), {
-          key: v,
-          class: g(d(c)),
-          href: c.href,
-          to: c.to,
-          "aria-disabled": c.disabled,
-          "aria-current": c.active,
-          onClick: (p) => u(c, v, p)
+      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)
         }, {
-          default: F(() => [
-            C(o.$slots, "item", {
-              item: c,
-              index: v
+          default: j(() => [
+            N(u.$slots, "item", {
+              item: b,
+              index: g
             }, () => [
-              w(m(c.text), 1)
+              I(k(b.text), 1)
             ])
           ]),
           _: 2
@@ -846,220 +926,333 @@ const fe = /* @__PURE__ */ x({
       _: 3
     }, 8, ["class"]));
   }
-}), at = ["aria-valuenow", "aria-valuemax"], lt = /* @__PURE__ */ x({
+}), ht = ["aria-valuenow", "aria-valuemax"], mt = /* @__PURE__ */ M({
   __name: "VibeProgress",
   props: {
     height: { type: String, default: void 0 },
     bars: { type: Array, required: !0 }
   },
   emits: ["component-error"],
-  setup(e, { emit: f }) {
-    const t = e, a = y(() => {
+  setup(e, { emit: v }) {
+    const t = e, a = m(() => {
       if (t.height)
         return { height: t.height };
-    }), l = (u) => {
-      const o = ["progress-bar"];
-      return u.variant && o.push(`bg-${u.variant}`), (u.striped || u.animated) && o.push("progress-bar-striped"), u.animated && o.push("progress-bar-animated"), o.join(" ");
-    }, r = (u) => {
-      const o = u.max || 100;
-      return { width: `${Math.min(100, Math.max(0, u.value / o * 100))}%` };
-    }, d = (u) => u.label ? u.label : u.showValue ? `${u.value}%` : "";
-    return (u, o) => (i(), s("div", {
+    }), 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", {
       class: "progress",
-      style: D(a.value)
+      style: K(a.value)
     }, [
-      (i(!0), s(M, null, A(e.bars, (n, c) => (i(), s("div", {
-        key: c,
-        class: g(l(n)),
-        style: D(r(n)),
+      (n(!0), i(F, null, H(e.bars, (c, b) => (n(), i("div", {
+        key: b,
+        class: $(l(c)),
+        style: K(s(c)),
         role: "progressbar",
-        "aria-valuenow": n.value,
+        "aria-valuenow": c.value,
         "aria-valuemin": 0,
-        "aria-valuemax": n.max || 100
+        "aria-valuemax": c.max || 100
       }, [
-        C(u.$slots, "label", {
-          bar: n,
-          index: c
+        N(r.$slots, "label", {
+          bar: c,
+          index: b
         }, () => [
-          w(m(d(n)), 1)
+          I(k(o(c)), 1)
         ])
-      ], 14, at))), 128))
+      ], 14, ht))), 128))
     ], 4));
   }
-}), it = ["id"], st = { class: "accordion-header" }, nt = ["data-bs-target", "aria-expanded", "aria-controls", "onClick"], ot = ["id", "data-bs-parent"], dt = { class: "accordion-body" }, rt = /* @__PURE__ */ x({
+});
+let ce = 0;
+function G(e = "vibe") {
+  const v = ge(), t = v ? v.uid : "no-instance";
+  return ce++, `${e}-${t}-${ce}`;
+}
+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({
   __name: "VibeAccordion",
   props: {
-    id: { type: String, required: !0 },
+    id: { type: String, default: () => G("accordion") },
     flush: { type: Boolean, default: !1 },
-    items: { type: Array, required: !0 }
+    items: { type: Array, required: !0 },
+    alwaysOpen: { type: Boolean, default: !1 }
   },
-  emits: ["item-click", "component-error"],
-  setup(e, { emit: f }) {
-    const t = f, a = (l, r) => {
-      t("item-click", { item: l, index: r });
+  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)
+        try {
+          const d = (await import("bootstrap")).Collapse;
+          s.value.querySelectorAll(".accordion-collapse").forEach((h) => {
+            const w = h.id;
+            if (!o.has(w)) {
+              const x = new d(h, {
+                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();
+            }
+          });
+        } catch (p) {
+          l("component-error", {
+            message: "Bootstrap JS not loaded. Accordion will use data attributes only.",
+            componentName: "VibeAccordion",
+            originalError: p
+          });
+        }
+    };
+    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();
+      }), 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());
+      });
+    }, { deep: !0 });
+    const C = (p, d) => {
+      l("item-click", { item: p, index: d });
     };
-    return (l, r) => (i(), s("div", {
+    return v({ bsInstances: o, refresh: g }), (p, d) => (n(), i("div", {
+      ref_key: "accordionRef",
+      ref: s,
       id: e.id,
-      class: g(["accordion", { "accordion-flush": e.flush }])
+      class: $(["accordion", { "accordion-flush": e.flush }])
     }, [
-      (i(!0), s(M, null, A(e.items, (d, u) => (i(), s("div", {
-        key: d.id,
+      (n(!0), i(F, null, H(e.items, (f, h) => (n(), i("div", {
+        key: f.id,
         class: "accordion-item"
       }, [
-        h("h2", st, [
-          h("button", {
-            class: g(["accordion-button", { collapsed: !d.show }]),
+        S("h2", yt, [
+          S("button", {
+            class: $(["accordion-button", { collapsed: !f.show }]),
             type: "button",
             "data-bs-toggle": "collapse",
-            "data-bs-target": `#${d.id}`,
-            "aria-expanded": d.show,
-            "aria-controls": d.id,
-            onClick: (o) => a(d, u)
+            "data-bs-target": `#${f.id}`,
+            "aria-expanded": f.show,
+            "aria-controls": f.id,
+            onClick: (w) => C(f, h)
           }, [
-            C(l.$slots, "title", {
-              item: d,
-              index: u
+            N(p.$slots, "title", {
+              item: f,
+              index: h
             }, () => [
-              w(m(d.title), 1)
+              I(k(f.title), 1)
             ])
-          ], 10, nt)
+          ], 10, gt)
         ]),
-        h("div", {
-          id: d.id,
-          class: g(["accordion-collapse", "collapse", { show: d.show }]),
-          "data-bs-parent": `#${e.id}`
+        S("div", {
+          id: f.id,
+          class: $(["accordion-collapse", "collapse", { show: f.show }]),
+          "data-bs-parent": e.alwaysOpen ? void 0 : `#${e.id}`
         }, [
-          h("div", dt, [
-            C(l.$slots, "content", {
-              item: d,
-              index: u
+          S("div", St, [
+            N(p.$slots, "content", {
+              item: f,
+              index: h
             }, () => [
-              w(m(d.content), 1)
+              I(k(f.content), 1)
             ])
           ])
-        ], 10, ot)
+        ], 10, kt)
       ]))), 128))
-    ], 10, it));
+    ], 10, pt));
   }
-}), ut = /* @__PURE__ */ x({
+}), wt = /* @__PURE__ */ M({
   __name: "VibeCollapse",
   props: {
-    id: { type: String, required: !0 },
+    id: { type: String, default: () => G("collapse") },
     modelValue: { type: Boolean, default: !1 },
     tag: { type: String, default: "div" },
     horizontal: { type: Boolean, default: !1 },
     isNav: { type: Boolean, default: !1 }
   },
   emits: ["update:modelValue", "show", "shown", "hide", "hidden", "component-error"],
-  setup(e, { emit: f }) {
-    const t = e, a = Z("vibeNavbarCollapse", null), l = T(t.modelValue);
-    E(() => t.modelValue, (u) => {
-      l.value = u;
+  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");
+    }, c = () => {
+      a("shown"), a("update:modelValue", !0);
+    }, b = () => {
+      a("hide");
+    }, g = () => {
+      r.value = !1, a("hidden"), a("update:modelValue", !1);
+    };
+    Y(async () => {
+      if (s.value)
+        try {
+          const f = (await import("bootstrap")).Collapse;
+          o.value = new f(s.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) {
+          a("component-error", {
+            message: "Bootstrap JS not loaded. Collapse will use CSS classes only.",
+            componentName: "VibeCollapse",
+            originalError: d
+          });
+        }
+    }), 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);
+    });
+    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 r = y(() => a && t.id in a.collapseStates ? a.collapseStates[t.id] : l.value), d = y(() => {
-      const u = ["collapse"];
-      return t.isNav && u.push("navbar-collapse"), t.horizontal && u.push("collapse-horizontal"), r.value && u.push("show"), u.join(" ");
+    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(" ");
     });
-    return (u, o) => (i(), q(P(e.tag), {
+    return (d, f) => (n(), z(A(e.tag), {
+      ref_key: "collapseRef",
+      ref: s,
       id: e.id,
-      class: g(d.value)
+      class: $(p.value)
     }, {
-      default: F(() => [
-        C(u.$slots, "default")
+      default: j(() => [
+        N(d.$slots, "default")
       ]),
       _: 3
     }, 8, ["id", "class"]));
   }
-}), ct = ["id"], ft = ["aria-labelledby"], vt = { key: 0 }, bt = { key: 1 }, mt = { class: "dropdown-header" }, ht = { key: 2 }, yt = /* @__PURE__ */ x({
+}), 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({
   __name: "VibeDropdown",
   props: {
-    id: { type: String, required: !0 },
+    id: { type: String, default: () => G("dropdown") },
     text: { type: String, default: "Dropdown" },
     variant: { type: String, default: "primary" },
     size: { type: String, default: void 0 },
     split: { type: Boolean, default: !1 },
     direction: { type: String, default: "down" },
     menuEnd: { type: Boolean, default: !1 },
-    items: { type: Array, required: !0 }
+    items: { type: Array, required: !0 },
+    autoClose: { type: [Boolean, String], default: !0 }
   },
-  emits: ["item-click", "component-error"],
-  setup(e, { emit: f }) {
-    const t = e, a = f, l = y(() => t.direction === "up" ? "dropup" : t.direction === "end" ? "dropend" : t.direction === "start" ? "dropstart" : "dropdown"), r = y(() => {
-      const n = ["btn", `btn-${t.variant}`];
-      return t.size && n.push(`btn-${t.size}`), n.join(" ");
-    }), d = y(() => {
-      const n = ["dropdown-menu"];
-      return t.menuEnd && n.push("dropdown-menu-end"), n.join(" ");
-    }), u = (n) => {
-      const c = ["dropdown-item"];
-      return n.active && c.push("active"), n.disabled && c.push("disabled"), c.join(" ");
-    }, o = (n, c, v) => {
-      !n.disabled && !n.divider && !n.header && a("item-click", { item: n, index: c, event: v });
+  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)
+        try {
+          const q = (await import("bootstrap")).Dropdown, P = s.value.querySelector(".dropdown-toggle");
+          P && (o.value = new q(P, {
+            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) {
+          l("component-error", {
+            message: "Bootstrap JS not loaded. Dropdown will use data attributes only.",
+            componentName: "VibeDropdown",
+            originalError: V
+          });
+        }
+    }), 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);
+    });
+    const f = (V, q, P) => {
+      !V.disabled && !V.divider && !V.header && l("item-click", { item: V, index: q, event: P });
     };
-    return (n, c) => (i(), s("div", {
-      class: g(l.value)
+    return v({ show: () => o.value?.show(), hide: () => o.value?.hide(), toggle: () => o.value?.toggle() }), (V, q) => (n(), i("div", {
+      ref_key: "dropdownRef",
+      ref: s,
+      class: $(r.value)
     }, [
-      h("button", {
+      e.split ? (n(), i(F, { key: 1 }, [
+        S("button", {
+          class: $(u.value),
+          type: "button"
+        }, [
+          N(V.$slots, "button", {}, () => [
+            I(k(e.text), 1)
+          ])
+        ], 2),
+        S("button", {
+          id: e.id,
+          type: "button",
+          class: $([u.value, "dropdown-toggle", "dropdown-toggle-split"]),
+          "data-bs-toggle": "dropdown",
+          "aria-expanded": "false",
+          "data-bs-auto-close": e.autoClose
+        }, [...q[0] || (q[0] = [
+          S("span", { class: "visually-hidden" }, "Toggle Dropdown", -1)
+        ])], 10, Ct)
+      ], 64)) : (n(), i("button", {
+        key: 0,
         id: e.id,
-        class: g([r.value, "dropdown-toggle"]),
+        class: $([u.value, "dropdown-toggle"]),
         type: "button",
         "data-bs-toggle": "dropdown",
-        "aria-expanded": "false"
+        "aria-expanded": "false",
+        "data-bs-auto-close": e.autoClose
       }, [
-        C(n.$slots, "button", {}, () => [
-          w(m(e.text), 1)
+        N(V.$slots, "button", {}, () => [
+          I(k(e.text), 1)
         ])
-      ], 10, ct),
-      h("ul", {
-        class: g(d.value),
+      ], 10, Vt)),
+      S("ul", {
+        class: $(c.value),
         "aria-labelledby": e.id
       }, [
-        (i(!0), s(M, null, A(e.items, (v, p) => (i(), s(M, { key: p }, [
-          v.divider ? (i(), s("li", vt, [...c[0] || (c[0] = [
-            h("hr", { class: "dropdown-divider" }, null, -1)
-          ])])) : v.header ? (i(), s("li", bt, [
-            h("h6", mt, [
-              C(n.$slots, "header", {
-                item: v,
-                index: p
+        (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] = [
+            S("hr", { class: "dropdown-divider" }, null, -1)
+          ])])) : P.header ? (n(), i("li", Lt, [
+            S("h6", Tt, [
+              N(V.$slots, "header", {
+                item: P,
+                index: R
               }, () => [
-                w(m(v.text), 1)
+                I(k(P.text), 1)
               ])
             ])
-          ])) : (i(), s("li", ht, [
-            (i(), q(P(v.href ? "a" : v.to ? "router-link" : "button"), {
-              class: g(u(v)),
-              href: v.href,
-              to: v.to,
-              type: !v.href && !v.to ? "button" : void 0,
-              disabled: v.disabled,
-              onClick: (B) => o(v, p, B)
+          ])) : (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)
             }, {
-              default: F(() => [
-                C(n.$slots, "item", {
-                  item: v,
-                  index: p
+              default: j(() => [
+                N(V.$slots, "item", {
+                  item: P,
+                  index: R
                 }, () => [
-                  w(m(v.text), 1)
+                  I(k(P.text), 1)
                 ])
               ]),
               _: 2
             }, 1032, ["class", "href", "to", "type", "disabled", "onClick"]))
           ]))
         ], 64))), 128))
-      ], 10, ft)
+      ], 10, xt)
     ], 2));
   }
-}), gt = ["id", "aria-labelledby", "aria-hidden", "data-bs-backdrop", "data-bs-keyboard"], pt = { class: "modal-content" }, kt = {
+}), Mt = ["id", "aria-labelledby", "aria-hidden", "data-bs-backdrop", "data-bs-keyboard"], It = { class: "modal-content" }, Ft = {
   key: 0,
   class: "modal-header"
-}, $t = ["id"], St = { class: "modal-body" }, Vt = {
+}, Pt = ["id"], Rt = { class: "modal-body" }, qt = {
   key: 1,
   class: "modal-footer"
-}, Ct = /* @__PURE__ */ x({
+}, zt = /* @__PURE__ */ M({
   __name: "VibeModal",
   props: {
-    id: { type: String, required: !0 },
+    id: { type: String, default: () => G("modal") },
     modelValue: { type: Boolean, default: !1 },
     title: { type: String, default: "" },
     size: { type: String, default: void 0 },
@@ -1068,206 +1261,284 @@ const fe = /* @__PURE__ */ x({
     fullscreen: { type: [Boolean, String], default: !1 },
     staticBackdrop: { type: Boolean, default: !1 },
     hideHeader: { type: Boolean, default: !1 },
-    hideFooter: { type: Boolean, default: !1 }
+    hideFooter: { type: Boolean, default: !1 },
+    teleport: { type: [String, Boolean], default: "body" }
   },
   emits: ["update:modelValue", "show", "shown", "hide", "hidden", "component-error"],
-  setup(e, { emit: f }) {
-    const t = e, a = f, l = T(null), r = T(null), d = T(!1), u = y(() => {
-      const p = ["modal-dialog"];
-      return t.size && p.push(`modal-${t.size}`), t.centered && p.push("modal-dialog-centered"), t.scrollable && p.push("modal-dialog-scrollable"), t.fullscreen === !0 ? p.push("modal-fullscreen") : typeof t.fullscreen == "string" && p.push(`modal-fullscreen-${t.fullscreen}-down`), p.join(" ");
-    }), o = () => {
-      d.value = !0, a("show");
-    }, n = () => {
-      a("shown"), a("update:modelValue", !0);
-    }, c = () => {
-      a("hide");
-    }, v = () => {
-      d.value = !1, a("hidden"), a("update:modelValue", !1);
-    };
-    return G(async () => {
-      if (l.value)
+  setup(e, { expose: v, emit: t }) {
+    const a = e, l = t, s = E(null), o = E(null), r = E(!1), u = m(() => {
+      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 = () => {
+      l("shown"), l("update:modelValue", !0);
+    }, g = () => {
+      l("hide");
+    }, C = () => {
+      r.value = !1, l("hidden"), l("update:modelValue", !1);
+    }, p = async () => {
+      if (s.value) {
+        o.value && o.value.dispose();
         try {
-          const B = (await import("bootstrap")).Modal;
-          r.value = new B(l.value, {
-            backdrop: t.staticBackdrop ? "static" : !0,
-            keyboard: !t.staticBackdrop
-          }), l.value.addEventListener("show.bs.modal", o), l.value.addEventListener("shown.bs.modal", n), l.value.addEventListener("hide.bs.modal", c), l.value.addEventListener("hidden.bs.modal", v), t.modelValue && r.value.show();
-        } catch {
-          a("component-error", "Bootstrap JS not loaded. Modal will use data attributes only.");
+          const x = (await import("bootstrap")).Modal;
+          o.value = new x(s.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();
+        } catch (w) {
+          l("component-error", {
+            message: "Bootstrap JS not loaded. Modal will use data attributes only.",
+            componentName: "VibeModal",
+            originalError: w
+          });
         }
-    }), H(() => {
-      l.value && (l.value.removeEventListener("show.bs.modal", o), l.value.removeEventListener("shown.bs.modal", n), l.value.removeEventListener("hide.bs.modal", c), l.value.removeEventListener("hidden.bs.modal", v)), r.value && (r.value.dispose(), r.value = null);
-    }), E(() => t.modelValue, (p) => {
-      r.value && (p && !d.value ? r.value.show() : !p && d.value && r.value.hide());
-    }), (p, B) => (i(), s("div", {
-      ref_key: "modalRef",
-      ref: l,
-      id: e.id,
-      class: g(["modal fade", { show: d.value }]),
-      style: D(d.value ? { display: "block" } : {}),
-      tabindex: "-1",
-      "aria-labelledby": `${e.id}-label`,
-      "aria-hidden": !d.value,
-      "data-bs-backdrop": e.staticBackdrop ? "static" : void 0,
-      "data-bs-keyboard": !e.staticBackdrop
+      }
+    };
+    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);
+    }), 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, {
+      to: e.teleport === !0 ? "body" : e.teleport || void 0,
+      disabled: !e.teleport
     }, [
-      h("div", {
-        class: g(u.value)
+      S("div", {
+        ref_key: "modalRef",
+        ref: s,
+        id: e.id,
+        class: $(["modal fade", { show: r.value }]),
+        tabindex: "-1",
+        "aria-labelledby": `${e.id}-label`,
+        "aria-hidden": !r.value,
+        "data-bs-backdrop": e.staticBackdrop ? "static" : void 0,
+        "data-bs-keyboard": !e.staticBackdrop
       }, [
-        h("div", pt, [
-          e.hideHeader ? b("", !0) : (i(), s("div", kt, [
-            h("h5", {
-              id: `${e.id}-label`,
-              class: "modal-title"
-            }, [
-              C(p.$slots, "header", {}, () => [
-                w(m(e.title), 1)
-              ])
-            ], 8, $t),
-            B[0] || (B[0] = h("button", {
-              type: "button",
-              class: "btn-close",
-              "data-bs-dismiss": "modal",
-              "aria-label": "Close"
-            }, null, -1))
-          ])),
-          h("div", St, [
-            C(p.$slots, "default")
-          ]),
-          e.hideFooter ? b("", !0) : (i(), s("div", Vt, [
-            C(p.$slots, "footer", {}, () => [
-              B[1] || (B[1] = h("button", {
+        S("div", {
+          class: $(u.value)
+        }, [
+          S("div", It, [
+            e.hideHeader ? y("", !0) : (n(), i("div", Ft, [
+              S("h5", {
+                id: `${e.id}-label`,
+                class: "modal-title"
+              }, [
+                N(w.$slots, "header", {}, () => [
+                  I(k(e.title), 1)
+                ])
+              ], 8, Pt),
+              S("button", {
                 type: "button",
-                class: "btn btn-secondary",
-                "data-bs-dismiss": "modal"
-              }, "Close", -1))
-            ])
-          ]))
-        ])
-      ], 2)
-    ], 14, gt));
+                class: "btn-close",
+                "aria-label": "Close",
+                onClick: f
+              })
+            ])),
+            S("div", Rt, [
+              N(w.$slots, "default")
+            ]),
+            e.hideFooter ? y("", !0) : (n(), i("div", qt, [
+              N(w.$slots, "footer", {}, () => [
+                S("button", {
+                  type: "button",
+                  class: "btn btn-secondary",
+                  onClick: f
+                }, "Close")
+              ])
+            ]))
+          ])
+        ], 2)
+      ], 10, Mt)
+    ], 8, ["to", "disabled"]));
   }
-}), xt = ["id", "aria-labelledby", "data-bs-backdrop", "data-bs-scroll"], wt = { class: "offcanvas-header" }, Bt = ["id"], Nt = { class: "offcanvas-body" }, Tt = /* @__PURE__ */ x({
+}), At = ["id", "aria-labelledby", "data-bs-backdrop", "data-bs-scroll"], jt = { class: "offcanvas-header" }, Ot = ["id"], Ht = { class: "offcanvas-body" }, Dt = /* @__PURE__ */ M({
   __name: "VibeOffcanvas",
   props: {
-    id: { type: String, required: !0 },
+    id: { type: String, default: () => G("offcanvas") },
     modelValue: { type: Boolean, default: !1 },
     title: { type: String, default: "" },
     placement: { type: String, default: "start" },
     backdrop: { type: [Boolean, String], default: !0 },
-    scroll: { type: Boolean, default: !1 }
+    scroll: { type: Boolean, default: !1 },
+    teleport: { type: [String, Boolean], default: "body" }
   },
   emits: ["update:modelValue", "show", "shown", "hide", "hidden", "component-error"],
-  setup(e, { emit: f }) {
-    const t = e, a = y(() => `offcanvas offcanvas-${t.placement}`);
-    return (l, r) => (i(), s("div", {
-      id: e.id,
-      class: g(a.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
+  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 = () => {
+      l("shown"), l("update:modelValue", !0);
+    }, g = () => {
+      l("hide");
+    }, C = () => {
+      r.value = !1, l("hidden"), l("update:modelValue", !1);
+    }, p = async () => {
+      if (s.value) {
+        o.value && o.value.dispose();
+        try {
+          const w = (await import("bootstrap")).Offcanvas;
+          o.value = new w(s.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) {
+          l("component-error", {
+            message: "Bootstrap JS not loaded. Offcanvas will use data attributes only.",
+            componentName: "VibeOffcanvas",
+            originalError: h
+          });
+        }
+      }
+    };
+    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, {
+      to: e.teleport === !0 ? "body" : e.teleport || void 0,
+      disabled: !e.teleport
     }, [
-      h("div", wt, [
-        h("h5", {
-          id: `${e.id}-label`,
-          class: "offcanvas-title"
-        }, [
-          C(l.$slots, "header", {}, () => [
-            w(m(e.title), 1)
-          ])
-        ], 8, Bt),
-        r[0] || (r[0] = h("button", {
-          type: "button",
-          class: "btn-close",
-          "data-bs-dismiss": "offcanvas",
-          "aria-label": "Close"
-        }, null, -1))
-      ]),
-      h("div", Nt, [
-        C(l.$slots, "default")
-      ])
-    ], 10, xt));
+      S("div", {
+        ref_key: "offcanvasRef",
+        ref: s,
+        id: e.id,
+        class: $(u.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("h5", {
+            id: `${e.id}-label`,
+            class: "offcanvas-title"
+          }, [
+            N(h.$slots, "header", {}, () => [
+              I(k(e.title), 1)
+            ])
+          ], 8, Ot),
+          S("button", {
+            type: "button",
+            class: "btn-close",
+            "aria-label": "Close",
+            onClick: f
+          })
+        ]),
+        S("div", Ht, [
+          N(h.$slots, "default")
+        ])
+      ], 10, At)
+    ], 8, ["to", "disabled"]));
   }
-}), Mt = ["id", "data-bs-autohide", "data-bs-delay"], qt = {
+}), Gt = ["id", "data-bs-autohide", "data-bs-delay"], Xt = {
   key: 0,
   class: "toast-header"
-}, Pt = { class: "me-auto" }, Ft = { class: "toast-body" }, Lt = /* @__PURE__ */ x({
+}, Yt = { class: "me-auto" }, Ut = { class: "toast-body" }, Jt = /* @__PURE__ */ M({
   __name: "VibeToast",
   props: {
-    id: { type: String, default: void 0 },
+    id: { type: String, default: () => G("toast") },
     modelValue: { type: Boolean, default: !1 },
     title: { type: String, default: "" },
     variant: { type: String, default: void 0 },
     autohide: { type: Boolean, default: !0 },
-    delay: { type: Number, default: 5e3 }
+    delay: { type: Number, default: 5e3 },
+    teleport: { type: [String, Boolean], default: "body" },
+    placement: { type: String, default: "top-end" }
   },
   emits: ["update:modelValue", "show", "shown", "hide", "hidden", "component-error"],
-  setup(e, { emit: f }) {
-    const t = e, a = f, l = T(null), r = T(null), d = T(!1), u = y(() => {
-      const p = ["toast"];
-      return t.variant && p.push(`text-bg-${t.variant}`), p.join(" ");
-    }), o = () => {
-      d.value = !0, a("show");
-    }, n = () => {
-      a("shown"), a("update:modelValue", !0);
-    }, c = () => {
-      a("hide");
-    }, v = () => {
-      d.value = !1, a("hidden"), a("update:modelValue", !1);
-    };
-    return G(async () => {
-      if (l.value)
+  setup(e, { expose: v, emit: t }) {
+    const a = e, l = t, s = E(null), o = E(null), r = E(!1), u = m(() => {
+      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 = () => {
+      l("shown"), l("update:modelValue", !0);
+    }, C = () => {
+      l("hide");
+    }, p = () => {
+      r.value = !1, l("hidden"), l("update:modelValue", !1);
+    }, d = async () => {
+      if (s.value) {
+        o.value && o.value.dispose();
         try {
-          const B = (await import("bootstrap")).Toast;
-          r.value = new B(l.value, {
-            autohide: t.autohide,
-            delay: t.delay
-          }), l.value.addEventListener("show.bs.toast", o), l.value.addEventListener("shown.bs.toast", n), l.value.addEventListener("hide.bs.toast", c), l.value.addEventListener("hidden.bs.toast", v), t.modelValue && r.value.show();
-        } catch {
-          a("component-error", "Bootstrap JS not loaded. Toast will use data attributes only.");
+          const x = (await import("bootstrap")).Toast;
+          o.value = new x(s.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();
+        } catch (w) {
+          l("component-error", {
+            message: "Bootstrap JS not loaded. Toast will use data attributes only.",
+            componentName: "VibeToast",
+            originalError: w
+          });
         }
-    }), H(() => {
-      l.value && (l.value.removeEventListener("show.bs.toast", o), l.value.removeEventListener("shown.bs.toast", n), l.value.removeEventListener("hide.bs.toast", c), l.value.removeEventListener("hidden.bs.toast", v)), r.value && (r.value.dispose(), r.value = null);
-    }), E(() => t.modelValue, (p) => {
-      r.value && (p && !d.value ? r.value.show() : !p && d.value && r.value.hide());
-    }), (p, B) => (i(), s("div", {
-      ref_key: "toastRef",
-      ref: l,
-      id: e.id,
-      class: g(u.value),
-      role: "alert",
-      "aria-live": "assertive",
-      "aria-atomic": "true",
-      "data-bs-autohide": e.autohide,
-      "data-bs-delay": e.delay
+      }
+    };
+    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);
+    }), 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, {
+      to: e.teleport === !0 ? "body" : e.teleport || void 0,
+      disabled: !e.teleport
     }, [
-      e.title || p.$slots.header ? (i(), s("div", qt, [
-        C(p.$slots, "header", {}, () => [
-          h("strong", Pt, m(e.title), 1)
-        ]),
-        B[0] || (B[0] = h("button", {
-          type: "button",
-          class: "btn-close",
-          "data-bs-dismiss": "toast",
-          "aria-label": "Close"
-        }, null, -1))
-      ])) : b("", !0),
-      h("div", Ft, [
-        C(p.$slots, "default")
-      ])
-    ], 10, Mt));
+      S("div", {
+        class: $(c.value),
+        style: { "z-index": "1090" }
+      }, [
+        S("div", {
+          ref_key: "toastRef",
+          ref: s,
+          id: e.id,
+          class: $(u.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)
+            ]),
+            S("button", {
+              type: "button",
+              class: "btn-close",
+              "aria-label": "Close",
+              onClick: h
+            })
+          ])) : y("", !0),
+          S("div", Ut, [
+            N(w.$slots, "default")
+          ])
+        ], 10, Gt)
+      ], 2)
+    ], 8, ["to", "disabled"]));
   }
-}), zt = ["id", "data-bs-ride", "data-bs-interval", "data-bs-keyboard", "data-bs-pause", "data-bs-wrap", "data-bs-touch"], jt = {
+}), Kt = ["id", "data-bs-ride", "data-bs-interval", "data-bs-keyboard", "data-bs-pause", "data-bs-wrap", "data-bs-touch"], Qt = {
   key: 0,
   class: "carousel-indicators"
-}, At = ["data-bs-target", "data-bs-slide-to", "aria-current", "aria-label"], It = { class: "carousel-inner" }, Ot = ["data-bs-interval"], Dt = ["src", "alt"], Et = {
+}, Wt = ["data-bs-target", "data-bs-slide-to", "aria-current", "aria-label"], Zt = { class: "carousel-inner" }, _t = ["data-bs-interval"], ea = ["src", "alt"], ta = {
   key: 0,
   class: "carousel-caption d-none d-md-block"
-}, Rt = { key: 0 }, Xt = { key: 1 }, Yt = ["data-bs-target"], Gt = ["data-bs-target"], Ht = /* @__PURE__ */ x({
+}, aa = { key: 0 }, la = { key: 1 }, oa = ["data-bs-target"], sa = ["data-bs-target"], na = /* @__PURE__ */ M({
   __name: "VibeCarousel",
   props: {
-    id: { type: String, required: !0 },
+    id: { type: String, default: () => G("carousel") },
+    modelValue: { type: Number, default: 0 },
     controls: { type: Boolean, default: !0 },
     indicators: { type: Boolean, default: !0 },
     ride: { type: [Boolean, String], default: !1 },
@@ -1280,16 +1551,50 @@ const fe = /* @__PURE__ */ x({
     fade: { type: Boolean, default: !1 },
     items: { type: Array, required: !0 }
   },
-  emits: ["slide", "slid", "component-error"],
-  setup(e, { emit: f }) {
-    const t = e, a = y(() => {
-      const r = ["carousel", "slide"];
-      return t.dark && r.push("carousel-dark"), t.fade && r.push("carousel-fade"), r.join(" ");
-    }), l = (r, d) => r.alt ? r.alt : r.caption ? r.caption : r.captionText ? r.captionText : `Carousel slide ${d + 1}`;
-    return G(() => {
-    }), (r, d) => (i(), s("div", {
+  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) {
+        o.value && o.value.dispose();
+        try {
+          const d = (await import("bootstrap")).Carousel;
+          o.value = new d(s.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) {
+          l("component-error", {
+            message: "Bootstrap JS not loaded. Carousel will use data attributes only.",
+            componentName: "VibeCarousel",
+            originalError: p
+          });
+        }
+      }
+    };
+    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);
+    }), O(() => a.items, async () => {
+      await ne(), await g();
+    }, { 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", {
+      ref_key: "carouselRef",
+      ref: s,
       id: e.id,
-      class: g(a.value),
+      class: $(u.value),
       "data-bs-ride": e.ride === !0 ? "carousel" : e.ride,
       "data-bs-interval": e.interval,
       "data-bs-keyboard": e.keyboard,
@@ -1297,110 +1602,168 @@ const fe = /* @__PURE__ */ x({
       "data-bs-wrap": e.wrap,
       "data-bs-touch": e.touch
     }, [
-      e.indicators ? (i(), s("div", jt, [
-        (i(!0), s(M, null, A(e.items, (u, o) => (i(), s("button", {
-          key: `indicator-${u.src}-${o}`,
+      e.indicators ? (n(), i("div", Qt, [
+        (n(!0), i(F, null, H(e.items, (f, h) => (n(), i("button", {
+          key: `indicator-${h}`,
           type: "button",
           "data-bs-target": `#${e.id}`,
-          "data-bs-slide-to": o,
-          class: g({ active: u.active || o === 0 }),
-          "aria-current": u.active || o === 0,
-          "aria-label": `Slide ${o + 1}`
-        }, null, 10, At))), 128))
-      ])) : b("", !0),
-      h("div", It, [
-        (i(!0), s(M, null, A(e.items, (u, o) => (i(), s("div", {
-          key: `slide-${u.src}-${o}`,
-          class: g(["carousel-item", { active: u.active || o === 0 }]),
-          "data-bs-interval": u.interval
+          "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
         }, [
-          h("img", {
-            src: u.src,
-            alt: l(u, o),
+          S("img", {
+            src: f.src,
+            alt: C(f, h),
             class: "d-block w-100"
-          }, null, 8, Dt),
-          u.caption || u.captionText || r.$slots.caption ? (i(), s("div", Et, [
-            C(r.$slots, "caption", {
-              item: u,
-              index: o
+          }, null, 8, ea),
+          f.caption || f.captionText || p.$slots.caption ? (n(), i("div", ta, [
+            N(p.$slots, "caption", {
+              item: f,
+              index: h
             }, () => [
-              u.caption ? (i(), s("h5", Rt, m(u.caption), 1)) : b("", !0),
-              u.captionText ? (i(), s("p", Xt, m(u.captionText), 1)) : b("", !0)
+              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("", !0)
-        ], 10, Ot))), 128))
+          ])) : y("", !0)
+        ], 10, _t))), 128))
       ]),
-      e.controls ? (i(), s("button", {
-        key: 1,
-        class: "carousel-control-prev",
-        type: "button",
-        "data-bs-target": `#${e.id}`,
-        "data-bs-slide": "prev"
-      }, [...d[0] || (d[0] = [
-        h("span", {
-          class: "carousel-control-prev-icon",
-          "aria-hidden": "true"
-        }, null, -1),
-        h("span", { class: "visually-hidden" }, "Previous", -1)
-      ])], 8, Yt)) : b("", !0),
-      e.controls ? (i(), s("button", {
-        key: 2,
-        class: "carousel-control-next",
-        type: "button",
-        "data-bs-target": `#${e.id}`,
-        "data-bs-slide": "next"
-      }, [...d[1] || (d[1] = [
-        h("span", {
-          class: "carousel-control-next-icon",
-          "aria-hidden": "true"
-        }, null, -1),
-        h("span", { class: "visually-hidden" }, "Next", -1)
-      ])], 8, Gt)) : b("", !0)
-    ], 10, zt));
+      e.controls ? (n(), i(F, { key: 1 }, [
+        S("button", {
+          class: "carousel-control-prev",
+          type: "button",
+          "data-bs-target": `#${e.id}`,
+          "data-bs-slide": "prev"
+        }, [...d[0] || (d[0] = [
+          S("span", {
+            class: "carousel-control-prev-icon",
+            "aria-hidden": "true"
+          }, null, -1),
+          S("span", { class: "visually-hidden" }, "Previous", -1)
+        ])], 8, oa),
+        S("button", {
+          class: "carousel-control-next",
+          type: "button",
+          "data-bs-target": `#${e.id}`,
+          "data-bs-slide": "next"
+        }, [...d[1] || (d[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));
   }
-}), Kt = ["data-bs-placement", "data-bs-title", "data-bs-trigger", "data-bs-html"], Ut = /* @__PURE__ */ x({
+}), ia = ["data-bs-placement", "data-bs-title", "data-bs-trigger", "data-bs-html"], ra = /* @__PURE__ */ M({
   __name: "VibeTooltip",
   props: {
-    content: { type: String, required: !0 },
+    content: { type: String, default: void 0 },
+    text: { type: String, default: void 0 },
     placement: { type: String, default: "top" },
     trigger: { type: String, default: "hover focus" },
     html: { type: Boolean, default: !1 }
   },
   emits: ["component-error"],
-  setup(e, { emit: f }) {
-    return (t, a) => (i(), s("span", {
+  setup(e, { expose: v, emit: t }) {
+    const a = e, l = t, s = E(null), o = E(null), r = async () => {
+      if (s.value) {
+        o.value && o.value.dispose();
+        try {
+          const c = (await import("bootstrap")).Tooltip;
+          o.value = new c(s.value, {
+            title: a.text || a.content || "",
+            placement: a.placement,
+            trigger: a.trigger,
+            html: a.html
+          });
+        } catch (u) {
+          l("component-error", {
+            message: "Bootstrap JS not loaded. Tooltip will use data attributes only.",
+            componentName: "VibeTooltip",
+            originalError: u
+          });
+        }
+      }
+    };
+    return Y(r), X(() => {
+      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", {
+      ref_key: "tooltipRef",
+      ref: s,
       "data-bs-toggle": "tooltip",
       "data-bs-placement": e.placement,
-      "data-bs-title": e.content,
+      "data-bs-title": e.text || e.content,
       "data-bs-trigger": e.trigger,
       "data-bs-html": e.html
     }, [
-      C(t.$slots, "default")
-    ], 8, Kt));
+      N(u.$slots, "default")
+    ], 8, ia));
   }
-}), Qt = ["data-bs-placement", "data-bs-title", "data-bs-content", "data-bs-trigger", "data-bs-html"], Wt = /* @__PURE__ */ x({
+}), da = ["data-bs-placement", "data-bs-title", "data-bs-content", "data-bs-trigger", "data-bs-html"], ua = /* @__PURE__ */ M({
   __name: "VibePopover",
   props: {
     title: { type: String, default: void 0 },
-    content: { type: String, required: !0 },
+    content: { type: String, default: void 0 },
+    text: { type: String, default: void 0 },
     placement: { type: String, default: "top" },
     trigger: { type: String, default: "click" },
     html: { type: Boolean, default: !1 }
   },
   emits: ["component-error"],
-  setup(e, { emit: f }) {
-    return (t, a) => (i(), s("span", {
+  setup(e, { expose: v, emit: t }) {
+    const a = e, l = t, s = E(null), o = E(null), r = async () => {
+      if (s.value) {
+        o.value && o.value.dispose();
+        try {
+          const c = (await import("bootstrap")).Popover;
+          o.value = new c(s.value, {
+            title: a.title,
+            content: a.text || a.content || "",
+            placement: a.placement,
+            trigger: a.trigger,
+            html: a.html
+          });
+        } catch (u) {
+          l("component-error", {
+            message: "Bootstrap JS not loaded. Popover will use data attributes only.",
+            componentName: "VibePopover",
+            originalError: u
+          });
+        }
+      }
+    };
+    return Y(r), X(() => {
+      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", {
+      ref_key: "popoverRef",
+      ref: s,
       "data-bs-toggle": "popover",
       "data-bs-placement": e.placement,
       "data-bs-title": e.title,
-      "data-bs-content": e.content,
+      "data-bs-content": e.text || e.content,
       "data-bs-trigger": e.trigger,
       "data-bs-html": e.html
     }, [
-      C(t.$slots, "default")
-    ], 8, Qt));
+      N(u.$slots, "default")
+    ], 8, da));
   }
-}), Jt = /* @__PURE__ */ x({
+}), ca = /* @__PURE__ */ M({
   __name: "VibeScrollspy",
   props: {
     target: { type: String, required: !0 },
@@ -1410,22 +1773,49 @@ const fe = /* @__PURE__ */ x({
     tag: { type: String, default: "div" }
   },
   emits: ["activate", "component-error"],
-  setup(e, { emit: f }) {
-    return (t, a) => (i(), q(P(e.tag), {
+  setup(e, { expose: v, emit: t }) {
+    const a = e, l = t, s = E(null), o = E(null), r = (c) => {
+      l("activate", c);
+    };
+    return Y(async () => {
+      if (s.value)
+        try {
+          const b = (await import("bootstrap")).ScrollSpy;
+          o.value = new b(s.value, {
+            target: a.target,
+            offset: a.offset,
+            method: a.method,
+            smoothScroll: a.smoothScroll
+          }), s.value.addEventListener("activate.bs.scrollspy", r);
+        } catch (c) {
+          l("component-error", {
+            message: "Bootstrap JS not loaded. ScrollSpy will use data attributes only.",
+            componentName: "VibeScrollspy",
+            originalError: c
+          });
+        }
+    }), X(() => {
+      s.value && s.value.removeEventListener("activate.bs.scrollspy", r), o.value && (o.value.dispose(), o.value = null);
+    }), v({ refresh: () => {
+      o.value && o.value.refresh();
+    } }), (c, b) => (n(), z(A(e.tag), {
+      ref_key: "scrollspyRef",
+      ref: s,
       "data-bs-spy": "scroll",
       "data-bs-target": e.target,
       "data-bs-offset": e.offset,
       "data-bs-method": e.method,
       "data-bs-smooth-scroll": e.smoothScroll,
-      tabindex: "0"
+      tabindex: "0",
+      style: { position: "relative", height: "100%", overflow: "auto" }
     }, {
-      default: F(() => [
-        C(t.$slots, "default")
+      default: j(() => [
+        N(c.$slots, "default")
       ]),
       _: 3
     }, 8, ["data-bs-target", "data-bs-offset", "data-bs-method", "data-bs-smooth-scroll"]));
   }
-}), Zt = /* @__PURE__ */ x({
+}), va = /* @__PURE__ */ M({
   __name: "VibeIcon",
   props: {
     // Icon name (e.g., 'house', 'heart-fill', 'star')
@@ -1444,67 +1834,67 @@ const fe = /* @__PURE__ */ x({
     rotate: { type: Number, default: void 0 }
   },
   emits: ["click", "component-error"],
-  setup(e, { emit: f }) {
-    const t = e, a = f, l = y(() => {
-      const u = ["bi", `bi-${t.icon}`];
-      return t.size && (["1x", "2x", "3x", "4x", "5x"].includes(t.size) || u.push(`bi-${t.size}`)), t.customClass && u.push(t.customClass), u.join(" ");
-    }), r = y(() => {
-      const u = {};
+  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 = {};
       if (t.fontSize)
-        u.fontSize = t.fontSize;
+        r.fontSize = t.fontSize;
       else if (t.size) {
-        const n = {
+        const c = {
           "1x": "1rem",
           "2x": "2rem",
           "3x": "3rem",
           "4x": "4rem",
           "5x": "5rem"
         };
-        n[t.size] && (u.fontSize = n[t.size]);
+        c[t.size] && (r.fontSize = c[t.size]);
       }
-      t.color && (u.color = t.color);
-      const o = [];
-      return t.flipH && o.push("scaleX(-1)"), t.flipV && o.push("scaleY(-1)"), t.rotate && o.push(`rotate(${t.rotate}deg)`), o.length > 0 && (u.transform = o.join(" "), u.display = "inline-block"), Object.keys(u).length > 0 ? u : void 0;
-    }), d = (u) => {
-      a("click", u);
+      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);
     };
-    return (u, o) => (i(), s("i", {
-      class: g(l.value),
-      style: D(r.value),
+    return (r, u) => (n(), i("i", {
+      class: $(l.value),
+      style: K(s.value),
       "aria-hidden": !0,
-      onClick: d
+      onClick: o
     }, null, 6));
   }
-}), _t = { class: "vibe-datatable" }, ea = { class: "row mb-3" }, ta = {
+}), fa = { class: "vibe-datatable" }, ba = { class: "row mb-3" }, ha = {
   key: 0,
   class: "col-md-6 mb-2 mb-md-0"
-}, aa = ["placeholder"], la = {
+}, ma = ["placeholder"], pa = {
   key: 1,
   class: "col-md-6"
-}, ia = { class: "d-flex justify-content-md-end align-items-center" }, sa = ["value"], na = ["onClick"], oa = {
+}, ya = { class: "d-flex justify-content-md-end align-items-center" }, ga = ["value"], ka = ["onClick"], Sa = {
   key: 0,
   class: "ms-1"
-}, da = ["onClick"], ra = { key: 0 }, ua = ["colspan"], ca = { class: "row" }, fa = {
+}, $a = ["onClick"], wa = { key: 0 }, Va = ["colspan"], Ca = { class: "row" }, xa = {
   key: 0,
   class: "col-md-6 mb-2 mb-md-0"
-}, va = { class: "datatable-info" }, ba = {
+}, Ba = { class: "datatable-info" }, La = {
   key: 1,
   class: "col-md-6"
-}, ma = { class: "pagination justify-content-md-end mb-0" }, ha = {
+}, Ta = { class: "pagination justify-content-md-end mb-0" }, Na = {
   key: 0,
   class: "page-item"
-}, ya = {
+}, Ea = {
   key: 1,
   class: "page-item disabled"
-}, ga = ["onClick"], pa = {
+}, Ma = ["onClick"], Ia = {
   key: 2,
   class: "page-item disabled"
-}, ka = {
+}, Fa = {
   key: 3,
   class: "page-item"
-}, $a = /* @__PURE__ */ x({
+}, Pa = /* @__PURE__ */ M({
   __name: "VibeDataTable",
-  props: /* @__PURE__ */ J({
+  props: /* @__PURE__ */ ue({
     // Data
     items: { type: Array, default: () => [] },
     columns: { type: Array, required: !0 },
@@ -1543,233 +1933,233 @@ const fe = /* @__PURE__ */ x({
     sortDesc: { type: Boolean, default: !1 },
     sortDescModifiers: {}
   }),
-  emits: /* @__PURE__ */ J(["row-clicked", "component-error"], ["update:currentPage", "update:perPage", "update:sortBy", "update:sortDesc"]),
-  setup(e, { emit: f }) {
-    const t = e, a = Y(e, "currentPage"), l = Y(e, "perPage"), r = Y(e, "sortBy"), d = Y(e, "sortDesc"), u = f, o = T(""), n = T(null), c = T(""), v = (k, S) => t.rowKey && k[t.rowKey] !== void 0 ? String(k[t.rowKey]) : S;
-    E(o, (k) => {
-      n.value !== null && clearTimeout(n.value), n.value = setTimeout(() => {
-        c.value = k, a.value = 1, n.value = null;
+  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) => {
+      c.value !== null && clearTimeout(c.value), c.value = setTimeout(() => {
+        b.value = B, a.value = 1, c.value = null;
       }, t.searchDebounce);
-    }), H(() => {
-      n.value !== null && (clearTimeout(n.value), n.value = null);
+    }), X(() => {
+      c.value !== null && (clearTimeout(c.value), c.value = null);
     });
-    const p = y(() => {
-      if (!t.searchable || !c.value)
+    const C = m(() => {
+      if (!t.searchable || !b.value)
         return t.items || [];
-      const k = c.value.toLowerCase();
-      return (t.items || []).filter((S) => (t.columns || []).some((V) => {
-        if (V.searchable === !1) return !1;
-        const j = S[V.key];
-        return j == null ? !1 : String(j).toLowerCase().includes(k);
+      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);
       }));
-    }), B = (k, S, V) => {
-      if (k == null) return 1;
-      if (S == null) return -1;
-      if (typeof k == "string" && typeof S == "string") {
-        const j = k.toLowerCase(), I = S.toLowerCase();
-        return j < I ? V ? 1 : -1 : j > I ? V ? -1 : 1 : 0;
+    }), 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;
       }
-      if (typeof k == "number" && typeof S == "number")
-        return k < S ? V ? 1 : -1 : k > S ? V ? -1 : 1 : 0;
-      if (typeof k == "boolean" && typeof S == "boolean")
-        return k === S ? 0 : (k ? 1 : -1) * (V ? -1 : 1);
-      if (k instanceof Date && S instanceof Date) {
-        const j = k.getTime(), I = S.getTime();
-        return j < I ? V ? 1 : -1 : j > I ? V ? -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;
       }
       return 0;
-    }, $ = y(() => {
-      if (!t.sortable || !r.value)
-        return p.value;
-      const k = [...p.value], S = r.value;
-      return k.sort((V, j) => B(V[S], j[S], d.value)), k;
-    }), L = y(() => {
+    }, 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(() => {
       if (!t.paginated)
-        return $.value;
-      const k = (a.value - 1) * l.value, S = k + l.value;
-      return $.value.slice(k, S);
-    }), z = y(() => t.items.length), N = y(() => p.value.length), O = y(() => Math.ceil(N.value / l.value)), K = y(() => N.value === 0 ? 0 : (a.value - 1) * l.value + 1), U = y(() => {
-      const k = a.value * l.value;
-      return Math.min(k, N.value);
-    }), _ = y(() => (N.value !== z.value ? t.filteredInfoText : t.infoText).replace("{start}", String(K.value)).replace("{end}", String(U.value)).replace("{total}", String(N.value)).replace("{totalRows}", String(z.value))), ee = y(() => {
-      const k = ["table"];
-      return t.striped && k.push("table-striped"), t.bordered && k.push("table-bordered"), t.borderless && k.push("table-borderless"), t.hover && k.push("table-hover"), t.small && k.push("table-sm"), t.variant && k.push(`table-${t.variant}`), k.join(" ");
-    }), te = (k) => {
-      !t.sortable || k.sortable === !1 || (r.value === k.key ? d.value = !d.value : (r.value = k.key, d.value = !1));
-    }, R = (k) => {
-      k < 1 || k > O.value || (a.value = k);
-    }, ae = () => {
+        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 = () => {
       a.value = 1;
-    }, le = (k, S) => {
-      u("row-clicked", k, S);
-    }, ie = (k, S) => {
-      const V = k[S.key];
-      return S.formatter ? S.formatter(V, k) : V;
-    }, se = (k) => !t.sortable || k.sortable === !1 ? "" : r.value !== k.key ? "⇅" : d.value ? "↓" : "↑", ne = (k) => {
-      const S = { ...k.thStyle };
-      return t.sortable && k.sortable !== !1 && (S.cursor = "pointer"), S;
+    }, 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;
     };
-    return (k, S) => (i(), s("div", _t, [
-      h("div", ea, [
-        e.searchable ? (i(), s("div", ta, [
-          W(h("input", {
-            "onUpdate:modelValue": S[0] || (S[0] = (V) => o.value = V),
+    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),
             type: "search",
             class: "form-control",
             placeholder: e.searchPlaceholder
-          }, null, 8, aa), [
-            [ue, o.value]
+          }, null, 8, ma), [
+            [ke, u.value]
           ])
-        ])) : b("", !0),
-        e.showPerPage && e.paginated ? (i(), s("div", la, [
-          h("div", ia, [
-            S[6] || (S[6] = h("label", { class: "me-2 mb-0" }, "Show", -1)),
-            W(h("select", {
-              "onUpdate:modelValue": S[1] || (S[1] = (V) => l.value = V),
+        ])) : 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),
               class: "form-select form-select-sm",
               style: { width: "auto" },
-              onChange: ae
+              onChange: te
             }, [
-              (i(!0), s(M, null, A(e.perPageOptions, (V) => (i(), s("option", {
-                key: V,
-                value: V
-              }, m(V), 9, sa))), 128))
+              (n(!0), i(F, null, H(e.perPageOptions, (T) => (n(), i("option", {
+                key: T,
+                value: T
+              }, k(T), 9, ga))), 128))
             ], 544), [
               [
-                ce,
+                Se,
                 l.value,
                 void 0,
                 { number: !0 }
               ]
             ]),
-            S[7] || (S[7] = h("span", { class: "ms-2" }, "entries", -1))
+            L[7] || (L[7] = S("span", { class: "ms-2" }, "entries", -1))
           ])
-        ])) : b("", !0)
+        ])) : y("", !0)
       ]),
-      h("div", {
-        class: g({ "table-responsive": e.responsive })
+      S("div", {
+        class: $({ "table-responsive": e.responsive })
       }, [
-        h("table", {
-          class: g(ee.value)
+        S("table", {
+          class: $(R.value)
         }, [
-          h("thead", null, [
-            h("tr", null, [
-              (i(!0), s(M, null, A(e.columns, (V) => (i(), s("th", {
-                key: V.key,
-                class: g(V.headerClass),
-                style: D(ne(V)),
-                onClick: (j) => te(V)
+          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)
               }, [
-                w(m(V.label) + " ", 1),
-                e.sortable && V.sortable !== !1 ? (i(), s("span", oa, m(se(V)), 1)) : b("", !0)
-              ], 14, na))), 128))
+                I(k(T.label) + " ", 1),
+                e.sortable && T.sortable !== !1 ? (n(), i("span", Sa, k(he(T)), 1)) : y("", !0)
+              ], 14, ka))), 128))
             ])
           ]),
-          h("tbody", null, [
-            (i(!0), s(M, null, A(L.value, (V, j) => (i(), s("tr", {
-              key: v(V, j),
-              onClick: (I) => le(V, j),
+          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),
               style: { cursor: "pointer" }
             }, [
-              (i(!0), s(M, null, A(e.columns, (I) => (i(), s("td", {
-                key: I.key,
-                class: g(I.class),
-                style: D(I.tdStyle)
+              (n(!0), i(F, null, H(e.columns, (U) => (n(), i("td", {
+                key: U.key,
+                class: $(U.class),
+                style: K(U.tdStyle)
               }, [
-                C(k.$slots, `cell(${I.key})`, {
-                  item: V,
-                  value: V[I.key],
-                  index: j
+                N(B.$slots, `cell(${U.key})`, {
+                  item: T,
+                  value: T[U.key],
+                  index: D
                 }, () => [
-                  w(m(ie(V, I)), 1)
+                  I(k(be(T, U)), 1)
                 ], !0)
               ], 6))), 128))
-            ], 8, da))), 128)),
-            L.value.length === 0 && e.showEmpty ? (i(), s("tr", ra, [
-              h("td", {
-                colspan: e.columns.length,
+            ], 8, $a))), 128)),
+            f.value.length === 0 && e.showEmpty ? (n(), i("tr", wa, [
+              S("td", {
+                colspan: e.columns?.length || 1,
                 class: "text-center"
-              }, m(e.emptyText), 9, ua)
-            ])) : b("", !0)
+              }, k(e.emptyText), 9, Va)
+            ])) : y("", !0)
           ])
         ], 2)
       ], 2),
-      h("div", ca, [
-        e.showInfo ? (i(), s("div", fa, [
-          h("div", va, m(_.value), 1)
-        ])) : b("", !0),
-        e.paginated && O.value > 1 ? (i(), s("div", ba, [
-          h("nav", null, [
-            h("ul", ma, [
-              h("li", {
-                class: g(["page-item", { disabled: a.value === 1 }])
+      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("nav", null, [
+            S("ul", Ta, [
+              S("li", {
+                class: $(["page-item", { disabled: a.value === 1 }])
               }, [
-                h("a", {
+                S("a", {
                   class: "page-link",
                   href: "#",
-                  onClick: S[2] || (S[2] = X((V) => R(a.value - 1), ["prevent"]))
+                  onClick: L[2] || (L[2] = Z((T) => W(a.value - 1), ["prevent"]))
                 }, " Previous ")
               ], 2),
-              a.value > 3 ? (i(), s("li", ha, [
-                h("a", {
+              a.value > 3 ? (n(), i("li", Na, [
+                S("a", {
                   class: "page-link",
                   href: "#",
-                  onClick: S[3] || (S[3] = X((V) => R(1), ["prevent"]))
+                  onClick: L[3] || (L[3] = Z((T) => W(1), ["prevent"]))
                 }, "1")
-              ])) : b("", !0),
-              a.value > 4 ? (i(), s("li", ya, [...S[8] || (S[8] = [
-                h("span", { class: "page-link" }, "...", -1)
-              ])])) : b("", !0),
-              (i(!0), s(M, null, A(Array.from({ length: O.value }, (V, j) => j + 1).filter(
-                (V) => V >= a.value - 2 && V <= a.value + 2
-              ), (V) => (i(), s("li", {
-                key: V,
-                class: g(["page-item", { active: V === a.value }])
+              ])) : y("", !0),
+              a.value > 4 ? (n(), i("li", Ea, [...L[8] || (L[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 }])
               }, [
-                h("a", {
+                S("a", {
                   class: "page-link",
                   href: "#",
-                  onClick: X((j) => R(V), ["prevent"])
-                }, m(V), 9, ga)
+                  onClick: Z((D) => W(T), ["prevent"])
+                }, k(T), 9, Ma)
               ], 2))), 128)),
-              a.value < O.value - 3 ? (i(), s("li", pa, [...S[9] || (S[9] = [
-                h("span", { class: "page-link" }, "...", -1)
-              ])])) : b("", !0),
-              a.value < O.value - 2 ? (i(), s("li", ka, [
-                h("a", {
+              a.value < x.value - 3 ? (n(), i("li", Ia, [...L[9] || (L[9] = [
+                S("span", { class: "page-link" }, "...", -1)
+              ])])) : y("", !0),
+              a.value < x.value - 2 ? (n(), i("li", Fa, [
+                S("a", {
                   class: "page-link",
                   href: "#",
-                  onClick: S[4] || (S[4] = X((V) => R(O.value), ["prevent"]))
-                }, m(O.value), 1)
-              ])) : b("", !0),
-              h("li", {
-                class: g(["page-item", { disabled: a.value === O.value }])
+                  onClick: L[4] || (L[4] = Z((T) => W(x.value), ["prevent"]))
+                }, k(x.value), 1)
+              ])) : y("", !0),
+              S("li", {
+                class: $(["page-item", { disabled: a.value === x.value }])
               }, [
-                h("a", {
+                S("a", {
                   class: "page-link",
                   href: "#",
-                  onClick: S[5] || (S[5] = X((V) => R(a.value + 1), ["prevent"]))
+                  onClick: L[5] || (L[5] = Z((T) => W(a.value + 1), ["prevent"]))
                 }, " Next ")
               ], 2)
             ])
           ])
-        ])) : b("", !0)
+        ])) : y("", !0)
       ])
     ]));
   }
-}), Q = (e, f) => {
+}), re = (e, v) => {
   const t = e.__vccOpts || e;
-  for (const [a, l] of f)
+  for (const [a, l] of v)
     t[a] = l;
   return t;
-}, Sa = /* @__PURE__ */ Q($a, [["__scopeId", "data-v-25bff6a6"]]), Va = { class: "mb-3" }, Ca = ["for"], xa = {
+}, Ra = /* @__PURE__ */ re(Pa, [["__scopeId", "data-v-d5aa8072"]]), qa = ["for"], za = {
   key: 0,
   class: "text-danger"
-}, wa = ["id", "type", "value", "placeholder", "disabled", "readonly", "required", "aria-invalid", "aria-describedby"], Ba = ["id"], Na = {
-  key: 2,
+}, Aa = ["id", "type", "value", "placeholder", "disabled", "readonly", "required", "aria-invalid", "aria-describedby"], ja = ["id"], Oa = {
+  key: 0,
   class: "valid-feedback",
   style: { display: "block" }
-}, Ta = ["id"], Ma = /* @__PURE__ */ x({
+}, Ha = ["id"], Da = /* @__PURE__ */ M({
   __name: "VibeFormInput",
   props: {
     modelValue: {
@@ -1777,7 +2167,7 @@ const fe = /* @__PURE__ */ x({
       default: ""
     },
     type: { type: String, default: "text" },
-    id: { type: String, required: !0 },
+    id: { type: String, default: void 0 },
     label: { type: String, default: void 0 },
     placeholder: { type: String, default: void 0 },
     disabled: { type: Boolean, default: !1 },
@@ -1792,254 +2182,278 @@ const fe = /* @__PURE__ */ x({
     plaintext: { type: Boolean, default: !1 }
   },
   emits: ["update:modelValue", "validate", "blur", "focus", "input", "change"],
-  setup(e, { emit: f }) {
-    const t = e, a = f, l = y(() => {
-      const n = [];
-      return t.plaintext ? n.push("form-control-plaintext") : (n.push("form-control"), t.size && n.push(`form-control-${t.size}`)), t.validationState === "valid" && n.push("is-valid"), t.validationState === "invalid" && n.push("is-invalid"), n.join(" ");
-    }), r = (n) => {
-      const c = n.target, v = t.type === "number" ? c.value === "" ? "" : Number(c.value) : c.value;
-      a("update:modelValue", v), a("input", n), t.validateOn === "input" && a("validate");
-    }, d = (n) => {
-      a("change", n), t.validateOn === "change" && a("validate");
-    }, u = (n) => {
-      a("blur", n), t.validateOn === "blur" && a("validate");
-    }, o = (n) => {
-      a("focus", n);
+  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);
     };
-    return (n, c) => (i(), s("div", Va, [
-      e.label ? (i(), s("label", {
+    return (d, f) => (n(), i("div", {
+      class: $({ "mb-3": o.value || u.value || r.value })
+    }, [
+      o.value ? (n(), i("label", {
         key: 0,
-        for: e.id,
+        for: s.value,
         class: "form-label"
       }, [
-        w(m(e.label) + " ", 1),
-        e.required ? (i(), s("span", xa, "*")) : b("", !0)
-      ], 8, Ca)) : b("", !0),
-      h("input", {
-        id: e.id,
+        I(k(e.label) + " ", 1),
+        e.required ? (n(), i("span", za, "*")) : y("", !0)
+      ], 8, qa)) : y("", !0),
+      S("input", {
+        id: s.value,
         type: e.type,
-        class: g(l.value),
+        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",
-        "aria-describedby": e.validationMessage || e.helpText ? `${e.id}-feedback` : void 0,
-        onInput: r,
-        onChange: d,
-        onBlur: u,
-        onFocus: o
-      }, null, 42, wa),
-      e.helpText && !e.validationMessage ? (i(), s("div", {
+        "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", {
         key: 1,
-        id: `${e.id}-feedback`,
+        id: `${s.value}-feedback`,
         class: "form-text"
-      }, m(e.helpText), 9, Ba)) : b("", !0),
-      e.validationState === "valid" ? (i(), s("div", Na, m(e.validationMessage || "Looks good!"), 1)) : b("", !0),
-      e.validationState === "invalid" ? (i(), s("div", {
-        key: 3,
-        id: `${e.id}-feedback`,
-        class: "invalid-feedback",
-        style: { display: "block" }
-      }, m(e.validationMessage || "Please provide a valid value."), 9, Ta)) : b("", !0)
-    ]));
+      }, 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", {
+          key: 1,
+          id: `${s.value}-feedback`,
+          class: "invalid-feedback",
+          style: { display: "block" }
+        }, k(e.validationMessage || "Please provide a valid value."), 9, Ha)) : y("", !0)
+      ], 64)) : y("", !0)
+    ], 2));
   }
-}), qa = { class: "mb-3" }, Pa = ["for"], Fa = {
+}), Ga = ["for"], Xa = {
   key: 0,
   class: "text-danger"
-}, La = ["id", "value", "disabled", "required", "multiple", "size", "aria-invalid", "aria-describedby"], za = ["selected"], ja = ["value", "disabled"], Aa = ["id"], Ia = {
-  key: 2,
+}, Ya = ["id", "value", "multiple", "size", "disabled", "required", "aria-invalid", "aria-describedby"], Ua = {
+  key: 0,
+  value: "",
+  disabled: "",
+  selected: ""
+}, Ja = ["value", "disabled"], Ka = ["id"], Qa = {
+  key: 0,
   class: "valid-feedback",
   style: { display: "block" }
-}, Oa = ["id"], Da = /* @__PURE__ */ x({
+}, Wa = ["id"], Za = /* @__PURE__ */ M({
   __name: "VibeFormSelect",
   props: {
     modelValue: {
       type: [String, Number, Array],
-      default: "",
-      validator: (e) => !0
+      default: ""
     },
-    id: { type: String, required: !0 },
+    id: { type: String, default: void 0 },
     label: { type: String, default: void 0 },
     options: { type: Array, default: () => [] },
+    multiple: { type: Boolean, default: !1 },
+    selectSize: { type: Number, default: void 0 },
+    htmlSize: { type: Number, default: void 0 },
+    placeholder: { type: String, default: void 0 },
     disabled: { type: Boolean, default: !1 },
     required: { type: Boolean, default: !1 },
-    multiple: { type: Boolean, default: !1 },
     size: { type: String, default: void 0 },
-    htmlSize: { type: Number, default: void 0 },
     validationState: { type: String, default: null },
     validationMessage: { type: String, default: void 0 },
     validationRules: { type: [Array, Function], default: void 0 },
-    validateOn: { type: String, default: "blur" },
-    helpText: { type: String, default: void 0 },
-    placeholder: { type: String, default: void 0 }
+    validateOn: { type: String, default: "change" },
+    helpText: { type: String, default: void 0 }
   },
   emits: ["update:modelValue", "validate", "blur", "focus", "change"],
-  setup(e, { emit: f }) {
-    const t = e, a = f, l = y(() => {
-      const o = ["form-select"];
-      return t.size && o.push(`form-select-${t.size}`), t.validationState === "valid" && o.push("is-valid"), t.validationState === "invalid" && o.push("is-invalid"), o.join(" ");
-    }), r = (o) => {
-      const n = o.target;
-      let c;
-      t.multiple ? c = Array.from(n.selectedOptions).map((p) => p.value) : c = n.value, a("update:modelValue", c), a("change", o), t.validateOn === "change" && a("validate");
-    }, d = (o) => {
-      a("blur", o), t.validateOn === "blur" && a("validate");
-    }, u = (o) => {
-      a("focus", o);
+  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);
     };
-    return (o, n) => (i(), s("div", qa, [
-      e.label ? (i(), s("label", {
+    return (d, f) => (n(), i("div", {
+      class: $({ "mb-3": o.value || u.value || r.value })
+    }, [
+      o.value ? (n(), i("label", {
         key: 0,
-        for: e.id,
+        for: s.value,
         class: "form-label"
       }, [
-        w(m(e.label) + " ", 1),
-        e.required ? (i(), s("span", Fa, "*")) : b("", !0)
-      ], 8, Pa)) : b("", !0),
-      h("select", {
-        id: e.id,
-        class: g(l.value),
+        I(k(e.label) + " ", 1),
+        e.required ? (n(), i("span", Xa, "*")) : y("", !0)
+      ], 8, Ga)) : y("", !0),
+      S("select", {
+        id: s.value,
+        class: $(c.value),
         value: e.modelValue,
+        multiple: e.multiple,
+        size: e.htmlSize || e.selectSize,
         disabled: e.disabled,
         required: e.required,
-        multiple: e.multiple,
-        size: e.htmlSize,
         "aria-invalid": e.validationState === "invalid",
-        "aria-describedby": e.validationMessage || e.helpText ? `${e.id}-feedback` : void 0,
-        onChange: r,
-        onBlur: d,
-        onFocus: u
+        "aria-describedby": e.validationMessage || e.helpText ? `${s.value}-feedback` : void 0,
+        onInput: b,
+        onChange: g,
+        onBlur: C,
+        onFocus: p
       }, [
-        e.placeholder && !e.multiple ? (i(), s("option", {
-          key: 0,
-          value: "",
-          disabled: "",
-          selected: !e.modelValue
-        }, m(e.placeholder), 9, za)) : b("", !0),
-        (i(!0), s(M, null, A(e.options, (c) => (i(), s("option", {
-          key: c.value,
-          value: c.value,
-          disabled: c.disabled
-        }, m(c.text), 9, ja))), 128)),
-        C(o.$slots, "default")
-      ], 42, La),
-      e.helpText && !e.validationMessage ? (i(), s("div", {
+        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))
+        ])
+      ], 42, Ya),
+      u.value ? (n(), i("div", {
         key: 1,
-        id: `${e.id}-feedback`,
+        id: `${s.value}-feedback`,
         class: "form-text"
-      }, m(e.helpText), 9, Aa)) : b("", !0),
-      e.validationState === "valid" ? (i(), s("div", Ia, m(e.validationMessage || "Looks good!"), 1)) : b("", !0),
-      e.validationState === "invalid" ? (i(), s("div", {
-        key: 3,
-        id: `${e.id}-feedback`,
-        class: "invalid-feedback",
-        style: { display: "block" }
-      }, m(e.validationMessage || "Please select a valid option."), 9, Oa)) : b("", !0)
-    ]));
+      }, 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", {
+          key: 1,
+          id: `${s.value}-feedback`,
+          class: "invalid-feedback",
+          style: { display: "block" }
+        }, k(e.validationMessage || "Please select an option."), 9, Wa)) : y("", !0)
+      ], 64)) : y("", !0)
+    ], 2));
   }
-}), Ea = { class: "mb-3" }, Ra = ["for"], Xa = {
+}), _a = ["for"], el = {
   key: 0,
   class: "text-danger"
-}, Ya = ["id", "value", "placeholder", "disabled", "readonly", "required", "rows", "maxlength", "aria-invalid", "aria-describedby"], Ga = {
-  key: 1,
-  class: "form-text"
-}, Ha = ["id"], Ka = {
-  key: 3,
+}, tl = ["id", "value", "placeholder", "rows", "maxlength", "disabled", "readonly", "required", "aria-invalid", "aria-describedby"], al = ["id"], ll = {
+  key: 0,
+  class: "ms-auto"
+}, ol = {
+  key: 0,
   class: "valid-feedback",
   style: { display: "block" }
-}, Ua = ["id"], Qa = /* @__PURE__ */ x({
+}, sl = ["id"], nl = /* @__PURE__ */ M({
   __name: "VibeFormTextarea",
   props: {
     modelValue: {
       type: String,
-      default: "",
-      validator: (e) => !0
+      default: ""
     },
-    id: { type: String, required: !0 },
+    id: { type: String, default: void 0 },
     label: { type: String, default: void 0 },
     placeholder: { type: String, default: void 0 },
+    rows: { type: [Number, String], default: 3 },
+    maxlength: { type: [Number, String], default: void 0 },
     disabled: { type: Boolean, default: !1 },
     readonly: { type: Boolean, default: !1 },
     required: { type: Boolean, default: !1 },
-    rows: { type: Number, default: 3 },
-    maxlength: { type: Number, default: void 0 },
     size: { type: String, default: void 0 },
     validationState: { type: String, default: null },
     validationMessage: { type: String, default: void 0 },
     validationRules: { type: [Array, Function], default: void 0 },
     validateOn: { type: String, default: "blur" },
     helpText: { type: String, default: void 0 },
+    noResize: { type: Boolean, default: !1 },
     showCharCount: { type: Boolean, default: !1 }
   },
   emits: ["update:modelValue", "validate", "blur", "focus", "input", "change"],
-  setup(e, { emit: f }) {
-    const t = e, a = f, l = y(() => {
-      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(" ");
-    }), r = y(() => {
-      const v = typeof t.modelValue == "string" ? t.modelValue : "";
-      return v ? v.length : 0;
-    }), d = y(() => t.maxlength ? `${r.value} / ${t.maxlength}` : `${r.value}`), u = (v) => {
-      const p = v.target;
-      a("update:modelValue", p.value), a("input", v), t.validateOn === "input" && a("validate");
-    }, o = (v) => {
-      a("change", v), t.validateOn === "change" && a("validate");
-    }, n = (v) => {
-      a("blur", v), t.validateOn === "blur" && a("validate");
-    }, c = (v) => {
-      a("focus", v);
+  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(() => {
+      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);
     };
-    return (v, p) => (i(), s("div", Ea, [
-      e.label ? (i(), s("label", {
+    return (h, w) => (n(), i("div", {
+      class: $({ "mb-3": o.value || u.value || r.value })
+    }, [
+      o.value ? (n(), i("label", {
         key: 0,
-        for: e.id,
+        for: s.value,
         class: "form-label"
       }, [
-        w(m(e.label) + " ", 1),
-        e.required ? (i(), s("span", Xa, "*")) : b("", !0)
-      ], 8, Ra)) : b("", !0),
-      h("textarea", {
-        id: e.id,
-        class: g(l.value),
+        I(k(e.label) + " ", 1),
+        e.required ? (n(), i("span", el, "*")) : y("", !0)
+      ], 8, _a)) : y("", !0),
+      S("textarea", {
+        id: s.value,
+        class: $(c.value),
+        style: K(b.value),
         value: e.modelValue,
         placeholder: e.placeholder,
+        rows: e.rows,
+        maxlength: e.maxlength,
         disabled: e.disabled,
         readonly: e.readonly,
         required: e.required,
-        rows: e.rows,
-        maxlength: e.maxlength,
         "aria-invalid": e.validationState === "invalid",
-        "aria-describedby": e.validationMessage || e.helpText ? `${e.id}-feedback` : void 0,
-        onInput: u,
-        onChange: o,
-        onBlur: n,
-        onFocus: c
-      }, null, 42, Ya),
-      e.showCharCount ? (i(), s("div", Ga, m(d.value), 1)) : b("", !0),
-      e.helpText && !e.validationMessage && !e.showCharCount ? (i(), s("div", {
-        key: 2,
-        id: `${e.id}-feedback`,
-        class: "form-text"
-      }, m(e.helpText), 9, Ha)) : b("", !0),
-      e.validationState === "valid" ? (i(), s("div", Ka, m(e.validationMessage || "Looks good!"), 1)) : b("", !0),
-      e.validationState === "invalid" ? (i(), s("div", {
-        key: 4,
-        id: `${e.id}-feedback`,
-        class: "invalid-feedback",
-        style: { display: "block" }
-      }, m(e.validationMessage || "Please provide a valid value."), 9, Ua)) : b("", !0)
-    ]));
+        "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", {
+        key: 1,
+        id: `${s.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)
+          ], 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", {
+          key: 1,
+          id: `${s.value}-feedback`,
+          class: "invalid-feedback",
+          style: { display: "block" }
+        }, k(e.validationMessage || "Please provide a valid value."), 9, sl)) : y("", !0)
+      ], 64)) : y("", !0)
+    ], 2));
   }
-}), Wa = { class: "mb-3" }, Ja = ["for"], Za = {
+}), il = ["for"], rl = {
   key: 0,
   class: "text-danger"
-}, _a = ["disabled"], el = ["id", "value", "disabled", "readonly", "required", "min", "max", "step", "aria-invalid", "aria-describedby"], tl = ["disabled"], al = ["id"], ll = {
-  key: 2,
+}, dl = ["disabled"], ul = ["id", "value", "disabled", "readonly", "required", "min", "max", "step", "aria-invalid", "aria-describedby"], cl = ["disabled"], vl = ["id"], fl = {
+  key: 0,
   class: "valid-feedback",
   style: { display: "block" }
-}, il = ["id"], sl = /* @__PURE__ */ x({
+}, bl = ["id"], hl = /* @__PURE__ */ M({
   __name: "VibeFormSpinbutton",
   props: {
     modelValue: {
@@ -2047,7 +2461,7 @@ const fe = /* @__PURE__ */ x({
       default: 0,
       validator: (e) => !0
     },
-    id: { type: String, required: !0 },
+    id: { type: String, default: void 0 },
     label: { type: String, default: void 0 },
     disabled: { type: Boolean, default: !1 },
     readonly: { type: Boolean, default: !1 },
@@ -2065,57 +2479,59 @@ const fe = /* @__PURE__ */ x({
     vertical: { type: Boolean, default: !1 }
   },
   emits: ["update:modelValue", "validate", "blur", "focus", "input", "change", "increment", "decrement"],
-  setup(e, { emit: f }) {
-    const t = e, a = f, l = y(() => {
-      const $ = ["form-control"];
-      return t.size && $.push(`form-control-${t.size}`), t.validationState === "valid" && $.push("is-valid"), t.validationState === "invalid" && $.push("is-invalid"), $.join(" ");
-    }), r = y(() => {
-      const $ = ["input-group"];
-      return t.size && $.push(`input-group-${t.size}`), t.vertical && $.push("input-group-vertical"), $.join(" ");
-    }), d = y(() => t.disabled || t.readonly ? !1 : t.min === void 0 || t.wrap ? !0 : t.modelValue > t.min), u = y(() => t.disabled || t.readonly ? !1 : t.max === void 0 || t.wrap ? !0 : t.modelValue < t.max), o = ($) => {
-      const L = $.target;
-      let z = L.value === "" ? 0 : Number(L.value);
-      t.min !== void 0 && z < t.min && (z = t.min), t.max !== void 0 && z > t.max && (z = t.max), a("update:modelValue", z), a("input", $), t.validateOn === "input" && a("validate");
-    }, n = ($) => {
-      a("change", $), t.validateOn === "change" && a("validate");
-    }, c = ($) => {
-      a("blur", $), t.validateOn === "blur" && a("validate");
-    }, v = ($) => {
-      a("focus", $);
-    }, p = () => {
-      if (!u.value) return;
-      let $ = t.modelValue + t.step;
-      t.max !== void 0 && $ > t.max && ($ = t.wrap ? t.min ?? 0 : t.max), a("update:modelValue", $), a("increment", $), t.validateOn === "change" && a("validate");
-    }, B = () => {
-      if (!d.value) return;
-      let $ = t.modelValue - t.step;
-      t.min !== void 0 && $ < t.min && ($ = t.wrap ? t.max ?? 0 : t.min), a("update:modelValue", $), a("decrement", $), t.validateOn === "change" && a("validate");
+  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);
+    }, 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");
     };
-    return ($, L) => (i(), s("div", Wa, [
-      e.label ? (i(), s("label", {
+    return (V, q) => (n(), i("div", {
+      class: $({ "mb-3": o.value || u.value || r.value })
+    }, [
+      o.value ? (n(), i("label", {
         key: 0,
-        for: e.id,
+        for: s.value,
         class: "form-label"
       }, [
-        w(m(e.label) + " ", 1),
-        e.required ? (i(), s("span", Za, "*")) : b("", !0)
-      ], 8, Ja)) : b("", !0),
-      h("div", {
-        class: g(r.value)
+        I(k(e.label) + " ", 1),
+        e.required ? (n(), i("span", rl, "*")) : y("", !0)
+      ], 8, il)) : y("", !0),
+      S("div", {
+        class: $(b.value)
       }, [
-        h("button", {
+        S("button", {
           class: "btn btn-outline-secondary",
           type: "button",
-          disabled: !d.value,
-          onClick: B,
+          disabled: !g.value,
+          onClick: x,
           "aria-label": "Decrement"
-        }, [...L[0] || (L[0] = [
-          h("span", { "aria-hidden": "true" }, "−", -1)
-        ])], 8, _a),
-        h("input", {
-          id: e.id,
+        }, [...q[0] || (q[0] = [
+          S("span", { "aria-hidden": "true" }, "−", -1)
+        ])], 8, dl),
+        S("input", {
+          id: s.value,
           type: "number",
-          class: g(l.value),
+          class: $(c.value),
           value: e.modelValue,
           disabled: e.disabled,
           readonly: e.readonly,
@@ -2124,44 +2540,46 @@ const fe = /* @__PURE__ */ x({
           max: e.max,
           step: e.step,
           "aria-invalid": e.validationState === "invalid",
-          "aria-describedby": e.validationMessage || e.helpText ? `${e.id}-feedback` : void 0,
-          onInput: o,
-          onChange: n,
-          onBlur: c,
-          onFocus: v
-        }, null, 42, el),
-        h("button", {
+          "aria-describedby": e.validationMessage || e.helpText ? `${s.value}-feedback` : void 0,
+          onInput: p,
+          onChange: d,
+          onBlur: f,
+          onFocus: h
+        }, null, 42, ul),
+        S("button", {
           class: "btn btn-outline-secondary",
           type: "button",
-          disabled: !u.value,
-          onClick: p,
+          disabled: !C.value,
+          onClick: w,
           "aria-label": "Increment"
-        }, [...L[1] || (L[1] = [
-          h("span", { "aria-hidden": "true" }, "+", -1)
-        ])], 8, tl)
+        }, [...q[1] || (q[1] = [
+          S("span", { "aria-hidden": "true" }, "+", -1)
+        ])], 8, cl)
       ], 2),
-      e.helpText && !e.validationMessage ? (i(), s("div", {
+      u.value ? (n(), i("div", {
         key: 1,
-        id: `${e.id}-feedback`,
+        id: `${s.value}-feedback`,
         class: "form-text"
-      }, m(e.helpText), 9, al)) : b("", !0),
-      e.validationState === "valid" ? (i(), s("div", ll, m(e.validationMessage || "Looks good!"), 1)) : b("", !0),
-      e.validationState === "invalid" ? (i(), s("div", {
-        key: 3,
-        id: `${e.id}-feedback`,
-        class: "invalid-feedback",
-        style: { display: "block" }
-      }, m(e.validationMessage || "Please provide a valid value."), 9, il)) : b("", !0)
-    ]));
+      }, 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", {
+          key: 1,
+          id: `${s.value}-feedback`,
+          class: "invalid-feedback",
+          style: { display: "block" }
+        }, k(e.validationMessage || "Please provide a valid value."), 9, bl)) : y("", !0)
+      ], 64)) : y("", !0)
+    ], 2));
   }
-}), nl = /* @__PURE__ */ Q(sl, [["__scopeId", "data-v-fbee244e"]]), ol = { class: "mb-3" }, dl = ["for"], rl = {
+}), ml = /* @__PURE__ */ re(hl, [["__scopeId", "data-v-49746a62"]]), pl = ["for"], yl = {
   key: 0,
   class: "text-danger"
-}, ul = ["id", "type", "value", "disabled", "readonly", "required", "min", "max", "aria-invalid", "aria-describedby"], cl = ["id"], fl = {
-  key: 2,
+}, gl = ["id", "type", "value", "disabled", "readonly", "required", "min", "max", "aria-invalid", "aria-describedby"], kl = ["id"], Sl = {
+  key: 0,
   class: "valid-feedback",
   style: { display: "block" }
-}, vl = ["id"], bl = /* @__PURE__ */ x({
+}, $l = ["id"], wl = /* @__PURE__ */ M({
   __name: "VibeFormDatepicker",
   props: {
     modelValue: {
@@ -2169,7 +2587,7 @@ const fe = /* @__PURE__ */ x({
       default: "",
       validator: (e) => !0
     },
-    id: { type: String, required: !0 },
+    id: { type: String, default: void 0 },
     label: { type: String, default: void 0 },
     disabled: { type: Boolean, default: !1 },
     readonly: { type: Boolean, default: !1 },
@@ -2185,33 +2603,35 @@ const fe = /* @__PURE__ */ x({
     type: { type: String, default: "date" }
   },
   emits: ["update:modelValue", "validate", "blur", "focus", "input", "change"],
-  setup(e, { emit: f }) {
-    const t = e, a = f, l = y(() => {
-      const n = ["form-control"];
-      return t.size && n.push(`form-control-${t.size}`), t.validationState === "valid" && n.push("is-valid"), t.validationState === "invalid" && n.push("is-invalid"), n.join(" ");
-    }), r = (n) => {
-      const c = n.target;
-      a("update:modelValue", c.value), a("input", n), t.validateOn === "input" && a("validate");
-    }, d = (n) => {
-      a("change", n), t.validateOn === "change" && a("validate");
-    }, u = (n) => {
-      a("blur", n), t.validateOn === "blur" && a("validate");
-    }, o = (n) => {
-      a("focus", n);
+  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);
     };
-    return (n, c) => (i(), s("div", ol, [
-      e.label ? (i(), s("label", {
+    return (d, f) => (n(), i("div", {
+      class: $({ "mb-3": o.value || u.value || r.value })
+    }, [
+      o.value ? (n(), i("label", {
         key: 0,
-        for: e.id,
+        for: s.value,
         class: "form-label"
       }, [
-        w(m(e.label) + " ", 1),
-        e.required ? (i(), s("span", rl, "*")) : b("", !0)
-      ], 8, dl)) : b("", !0),
-      h("input", {
-        id: e.id,
+        I(k(e.label) + " ", 1),
+        e.required ? (n(), i("span", yl, "*")) : y("", !0)
+      ], 8, pl)) : y("", !0),
+      S("input", {
+        id: s.value,
         type: e.type,
-        class: g(l.value),
+        class: $(c.value),
         value: e.modelValue,
         disabled: e.disabled,
         readonly: e.readonly,
@@ -2219,293 +2639,305 @@ const fe = /* @__PURE__ */ x({
         min: e.min,
         max: e.max,
         "aria-invalid": e.validationState === "invalid",
-        "aria-describedby": e.validationMessage || e.helpText ? `${e.id}-feedback` : void 0,
-        onInput: r,
-        onChange: d,
-        onBlur: u,
-        onFocus: o
-      }, null, 42, ul),
-      e.helpText && !e.validationMessage ? (i(), s("div", {
+        "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", {
         key: 1,
-        id: `${e.id}-feedback`,
+        id: `${s.value}-feedback`,
         class: "form-text"
-      }, m(e.helpText), 9, cl)) : b("", !0),
-      e.validationState === "valid" ? (i(), s("div", fl, m(e.validationMessage || "Looks good!"), 1)) : b("", !0),
-      e.validationState === "invalid" ? (i(), s("div", {
-        key: 3,
-        id: `${e.id}-feedback`,
-        class: "invalid-feedback",
-        style: { display: "block" }
-      }, m(e.validationMessage || "Please provide a valid date."), 9, vl)) : b("", !0)
-    ]));
+      }, 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", {
+          key: 1,
+          id: `${s.value}-feedback`,
+          class: "invalid-feedback",
+          style: { display: "block" }
+        }, k(e.validationMessage || "Please provide a valid date."), 9, $l)) : y("", !0)
+      ], 64)) : y("", !0)
+    ], 2));
   }
-}), ml = ["id", "checked", "value", "disabled", "required", "indeterminate", "aria-invalid", "aria-describedby"], hl = ["for"], yl = {
+}), Vl = ["id", "checked", "disabled", "required", "indeterminate", "aria-invalid", "aria-describedby"], Cl = ["for"], xl = {
   key: 0,
   class: "text-danger"
-}, gl = ["id"], pl = {
-  key: 2,
+}, Bl = ["id"], Ll = {
+  key: 0,
   class: "valid-feedback",
   style: { display: "block" }
-}, kl = ["id"], $l = /* @__PURE__ */ x({
+}, Tl = ["id"], Nl = /* @__PURE__ */ M({
   __name: "VibeFormCheckbox",
   props: {
     modelValue: {
       type: [Boolean, Array],
-      default: !1,
-      validator: (e) => !0
+      default: !1
     },
-    id: { type: String, required: !0 },
-    label: { type: String, default: void 0 },
     value: { type: [String, Number, Boolean], default: !0 },
+    id: { type: String, default: void 0 },
+    label: { type: String, default: void 0 },
     disabled: { type: Boolean, default: !1 },
     required: { type: Boolean, default: !1 },
     inline: { type: Boolean, default: !1 },
+    indeterminate: { type: Boolean, default: !1 },
     validationState: { type: String, default: null },
     validationMessage: { type: String, default: void 0 },
     validationRules: { type: [Array, Function], default: void 0 },
-    validateOn: { type: String, default: "blur" },
+    validateOn: { type: String, default: "change" },
     helpText: { type: String, default: void 0 },
-    indeterminate: { type: Boolean, default: !1 }
+    reverse: { type: Boolean, default: !1 }
   },
   emits: ["update:modelValue", "validate", "blur", "focus", "change"],
-  setup(e, { emit: f }) {
-    const t = e, a = f, l = y(() => {
-      const c = ["form-check-input"];
-      return t.validationState === "valid" && c.push("is-valid"), t.validationState === "invalid" && c.push("is-invalid"), c.join(" ");
-    }), r = y(() => {
-      const c = ["form-check"];
-      return t.inline && c.push("form-check-inline"), c.join(" ");
-    }), d = y(() => Array.isArray(t.modelValue) ? t.modelValue.includes(t.value) : t.modelValue === t.value || t.modelValue === !0), u = (c) => {
-      const v = c.target;
-      let p;
+  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;
+      let w;
       if (Array.isArray(t.modelValue))
-        if (p = [...t.modelValue], v.checked)
-          p.includes(t.value) || p.push(t.value);
+        if (w = [...t.modelValue], h.checked)
+          w.push(t.value);
         else {
-          const B = p.indexOf(t.value);
-          B > -1 && p.splice(B, 1);
+          const x = w.indexOf(t.value);
+          x > -1 && w.splice(x, 1);
         }
       else
-        p = v.checked;
-      a("update:modelValue", p), a("change", c), t.validateOn === "change" && a("validate");
-    }, o = (c) => {
-      a("blur", c), t.validateOn === "blur" && a("validate");
-    }, n = (c) => {
-      a("focus", c);
+        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);
     };
-    return (c, v) => (i(), s("div", {
-      class: g(r.value)
+    return (f, h) => (n(), i("div", {
+      class: $([c.value, { "mb-3": o.value || u.value || r.value }])
     }, [
-      h("input", {
-        id: e.id,
+      S("input", {
+        id: s.value,
         type: "checkbox",
-        class: g(l.value),
-        checked: d.value,
-        value: e.value,
+        class: $(b.value),
+        checked: g.value,
         disabled: e.disabled,
         required: e.required,
         indeterminate: e.indeterminate,
         "aria-invalid": e.validationState === "invalid",
-        "aria-describedby": e.validationMessage || e.helpText ? `${e.id}-feedback` : void 0,
-        onChange: u,
-        onBlur: o,
-        onFocus: n
-      }, null, 42, ml),
-      e.label ? (i(), s("label", {
+        "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", {
         key: 0,
-        for: e.id,
+        for: s.value,
         class: "form-check-label"
       }, [
-        w(m(e.label) + " ", 1),
-        e.required ? (i(), s("span", yl, "*")) : b("", !0)
-      ], 8, hl)) : b("", !0),
-      e.helpText && !e.validationMessage ? (i(), s("div", {
+        I(k(e.label) + " ", 1),
+        e.required ? (n(), i("span", xl, "*")) : y("", !0)
+      ], 8, Cl)) : y("", !0),
+      u.value ? (n(), i("div", {
         key: 1,
-        id: `${e.id}-feedback`,
+        id: `${s.value}-feedback`,
         class: "form-text"
-      }, m(e.helpText), 9, gl)) : b("", !0),
-      e.validationState === "valid" ? (i(), s("div", pl, m(e.validationMessage || "Looks good!"), 1)) : b("", !0),
-      e.validationState === "invalid" ? (i(), s("div", {
-        key: 3,
-        id: `${e.id}-feedback`,
-        class: "invalid-feedback",
-        style: { display: "block" }
-      }, m(e.validationMessage || "You must check this box."), 9, kl)) : b("", !0)
+      }, 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", {
+          key: 1,
+          id: `${s.value}-feedback`,
+          class: "invalid-feedback",
+          style: { display: "block" }
+        }, k(e.validationMessage || "Please check this box."), 9, Tl)) : y("", !0)
+      ], 64)) : y("", !0)
     ], 2));
   }
-}), Sl = ["id", "checked", "value", "name", "disabled", "required", "aria-invalid", "aria-describedby"], Vl = ["for"], Cl = {
+}), El = ["id", "name", "value", "checked", "disabled", "required", "aria-invalid", "aria-describedby"], Ml = ["for"], Il = {
   key: 0,
   class: "text-danger"
-}, xl = ["id"], wl = {
-  key: 2,
+}, Fl = ["id"], Pl = {
+  key: 0,
   class: "valid-feedback",
   style: { display: "block" }
-}, Bl = ["id"], Nl = /* @__PURE__ */ x({
+}, Rl = ["id"], ql = /* @__PURE__ */ M({
   __name: "VibeFormRadio",
   props: {
     modelValue: {
       type: [String, Number, Boolean],
-      default: void 0,
-      validator: (e) => !0
+      default: ""
     },
-    id: { type: String, required: !0 },
-    label: { type: String, default: void 0 },
     value: { type: [String, Number, Boolean], required: !0 },
     name: { type: String, required: !0 },
+    id: { type: String, default: void 0 },
+    label: { type: String, default: void 0 },
     disabled: { type: Boolean, default: !1 },
     required: { type: Boolean, default: !1 },
     inline: { type: Boolean, default: !1 },
     validationState: { type: String, default: null },
     validationMessage: { type: String, default: void 0 },
     validationRules: { type: [Array, Function], default: void 0 },
-    validateOn: { type: String, default: "blur" },
-    helpText: { type: String, default: void 0 }
+    validateOn: { type: String, default: "change" },
+    helpText: { type: String, default: void 0 },
+    reverse: { type: Boolean, default: !1 }
   },
   emits: ["update:modelValue", "validate", "blur", "focus", "change"],
-  setup(e, { emit: f }) {
-    const t = e, a = f, l = y(() => {
-      const c = ["form-check-input"];
-      return t.validationState === "valid" && c.push("is-valid"), t.validationState === "invalid" && c.push("is-invalid"), c.join(" ");
-    }), r = y(() => {
-      const c = ["form-check"];
-      return t.inline && c.push("form-check-inline"), c.join(" ");
-    }), d = y(() => t.modelValue === t.value), u = (c) => {
-      c.target.checked && a("update:modelValue", t.value), a("change", c), t.validateOn === "change" && a("validate");
-    }, o = (c) => {
-      a("blur", c), t.validateOn === "blur" && a("validate");
-    }, n = (c) => {
-      a("focus", c);
+  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);
     };
-    return (c, v) => (i(), s("div", {
-      class: g(r.value)
+    return (f, h) => (n(), i("div", {
+      class: $([c.value, { "mb-3": o.value || u.value || r.value }])
     }, [
-      h("input", {
-        id: e.id,
+      S("input", {
+        id: s.value,
         type: "radio",
-        class: g(l.value),
-        checked: d.value,
-        value: e.value,
+        class: $(b.value),
         name: e.name,
+        value: e.value,
+        checked: g.value,
         disabled: e.disabled,
         required: e.required,
         "aria-invalid": e.validationState === "invalid",
-        "aria-describedby": e.validationMessage || e.helpText ? `${e.id}-feedback` : void 0,
-        onChange: u,
-        onBlur: o,
-        onFocus: n
-      }, null, 42, Sl),
-      e.label ? (i(), s("label", {
+        "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", {
         key: 0,
-        for: e.id,
+        for: s.value,
         class: "form-check-label"
       }, [
-        w(m(e.label) + " ", 1),
-        e.required ? (i(), s("span", Cl, "*")) : b("", !0)
-      ], 8, Vl)) : b("", !0),
-      e.helpText && !e.validationMessage ? (i(), s("div", {
+        I(k(e.label) + " ", 1),
+        e.required ? (n(), i("span", Il, "*")) : y("", !0)
+      ], 8, Ml)) : y("", !0),
+      u.value ? (n(), i("div", {
         key: 1,
-        id: `${e.id}-feedback`,
+        id: `${s.value}-feedback`,
         class: "form-text"
-      }, m(e.helpText), 9, xl)) : b("", !0),
-      e.validationState === "valid" ? (i(), s("div", wl, m(e.validationMessage || "Looks good!"), 1)) : b("", !0),
-      e.validationState === "invalid" ? (i(), s("div", {
-        key: 3,
-        id: `${e.id}-feedback`,
-        class: "invalid-feedback",
-        style: { display: "block" }
-      }, m(e.validationMessage || "Please select an option."), 9, Bl)) : b("", !0)
+      }, 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", {
+          key: 1,
+          id: `${s.value}-feedback`,
+          class: "invalid-feedback",
+          style: { display: "block" }
+        }, k(e.validationMessage || "Please select an option."), 9, Rl)) : y("", !0)
+      ], 64)) : y("", !0)
     ], 2));
   }
-}), Tl = { class: "form-check form-switch" }, Ml = ["id", "checked", "disabled", "required", "aria-invalid", "aria-describedby"], ql = ["for"], Pl = {
+}), zl = ["id", "checked", "disabled", "required", "aria-invalid", "aria-describedby"], Al = ["for"], jl = {
   key: 0,
   class: "text-danger"
-}, Fl = ["id"], Ll = {
-  key: 2,
+}, Ol = ["id"], Hl = {
+  key: 0,
   class: "valid-feedback",
   style: { display: "block" }
-}, zl = ["id"], jl = /* @__PURE__ */ x({
+}, Dl = ["id"], Gl = /* @__PURE__ */ M({
   __name: "VibeFormSwitch",
   props: {
     modelValue: {
       type: Boolean,
-      default: !1,
-      validator: (e) => !0
+      default: !1
     },
-    id: { type: String, required: !0 },
+    id: { type: String, default: void 0 },
     label: { type: String, default: void 0 },
     disabled: { type: Boolean, default: !1 },
     required: { type: Boolean, default: !1 },
+    inline: { type: Boolean, default: !1 },
     validationState: { type: String, default: null },
     validationMessage: { type: String, default: void 0 },
     validationRules: { type: [Array, Function], default: void 0 },
-    validateOn: { type: String, default: "blur" },
+    validateOn: { type: String, default: "change" },
     helpText: { type: String, default: void 0 }
   },
   emits: ["update:modelValue", "validate", "blur", "focus", "change"],
-  setup(e, { emit: f }) {
-    const t = e, a = f, l = y(() => {
-      const o = ["form-check-input"];
-      return t.validationState === "valid" && o.push("is-valid"), t.validationState === "invalid" && o.push("is-invalid"), o.join(" ");
-    }), r = (o) => {
-      const n = o.target;
-      a("update:modelValue", n.checked), a("change", o), t.validateOn === "change" && a("validate");
-    }, d = (o) => {
-      a("blur", o), t.validateOn === "blur" && a("validate");
-    }, u = (o) => {
-      a("focus", o);
+  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);
     };
-    return (o, n) => (i(), s("div", Tl, [
-      h("input", {
-        id: e.id,
+    return (d, f) => (n(), i("div", {
+      class: $([c.value, { "mb-3": o.value || u.value || r.value }])
+    }, [
+      S("input", {
+        id: s.value,
         type: "checkbox",
-        class: g(l.value),
+        role: "switch",
+        class: $(b.value),
         checked: e.modelValue,
         disabled: e.disabled,
         required: e.required,
         "aria-invalid": e.validationState === "invalid",
-        "aria-describedby": e.validationMessage || e.helpText ? `${e.id}-feedback` : void 0,
-        role: "switch",
-        onChange: r,
-        onBlur: d,
-        onFocus: u
-      }, null, 42, Ml),
-      e.label ? (i(), s("label", {
+        "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", {
         key: 0,
-        for: e.id,
+        for: s.value,
         class: "form-check-label"
       }, [
-        w(m(e.label) + " ", 1),
-        e.required ? (i(), s("span", Pl, "*")) : b("", !0)
-      ], 8, ql)) : b("", !0),
-      e.helpText && !e.validationMessage ? (i(), s("div", {
+        I(k(e.label) + " ", 1),
+        e.required ? (n(), i("span", jl, "*")) : y("", !0)
+      ], 8, Al)) : y("", !0),
+      u.value ? (n(), i("div", {
         key: 1,
-        id: `${e.id}-feedback`,
+        id: `${s.value}-feedback`,
         class: "form-text"
-      }, m(e.helpText), 9, Fl)) : b("", !0),
-      e.validationState === "valid" ? (i(), s("div", Ll, m(e.validationMessage || "Looks good!"), 1)) : b("", !0),
-      e.validationState === "invalid" ? (i(), s("div", {
-        key: 3,
-        id: `${e.id}-feedback`,
-        class: "invalid-feedback",
-        style: { display: "block" }
-      }, m(e.validationMessage || "You must toggle this switch."), 9, zl)) : b("", !0)
-    ]));
+      }, 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", {
+          key: 1,
+          id: `${s.value}-feedback`,
+          class: "invalid-feedback",
+          style: { display: "block" }
+        }, k(e.validationMessage || "Please toggle this switch."), 9, Dl)) : y("", !0)
+      ], 64)) : y("", !0)
+    ], 2));
   }
-}), Al = ["for"], Il = {
+}), Xl = ["for"], Yl = {
   key: 0,
   class: "text-danger"
-}, Ol = ["id"], Dl = {
+}, Ul = ["id"], Jl = {
   key: 1,
   class: "valid-feedback",
   style: { display: "block" }
-}, El = ["id"], Rl = ["for"], Xl = {
+}, Kl = ["id"], Ql = ["for"], Wl = {
   key: 0,
   class: "text-danger"
-}, Yl = ["id"], Gl = {
+}, Zl = ["id"], _l = {
   key: 2,
   class: "valid-feedback",
   style: { display: "block" }
-}, Hl = ["id"], Kl = /* @__PURE__ */ x({
+}, eo = ["id"], to = /* @__PURE__ */ M({
   __name: "VibeFormGroup",
   props: {
     label: { type: String, default: void 0 },
@@ -2520,85 +2952,93 @@ const fe = /* @__PURE__ */ x({
     labelAlign: { type: String, default: void 0 }
   },
   setup(e) {
-    const f = e, t = y(() => {
-      const d = [];
-      return f.floating ? d.push("form-floating") : f.row ? d.push("row", "mb-3") : d.push("mb-3"), d.join(" ");
-    }), a = y(() => {
-      const d = [];
-      return f.floating ? d.push("form-label") : f.row ? (d.push("col-form-label"), f.labelCols && d.push(`col-sm-${f.labelCols}`), f.labelAlign && d.push(`text-${f.labelAlign}`)) : d.push("form-label"), d.join(" ");
-    }), l = y(() => f.row && f.labelCols ? `col-sm-${12 - Number(f.labelCols)}` : ""), r = y(() => f.labelFor ? `${f.labelFor}-feedback` : void 0);
-    return (d, u) => (i(), s("div", {
-      class: g(t.value)
+    const v = e, t = m(() => v.labelFor || G("form-group")), a = E(!1);
+    ve("vibeFormGroup", {
+      id: t,
+      consumeId: () => a.value ? null : (a.value = !0, t.value),
+      hasLabel: m(() => !!v.label),
+      hasValidation: m(() => !!v.validationState),
+      hasHelp: m(() => !!v.helpText)
+    });
+    const s = m(() => {
+      const c = [];
+      return v.floating ? c.push("form-floating") : v.row ? c.push("row", "mb-3") : c.push("mb-3"), c.join(" ");
+    }), o = m(() => {
+      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)
     }, [
-      e.label && !e.floating ? (i(), s("label", {
+      e.label && !e.floating ? (n(), i("label", {
         key: 0,
-        for: e.labelFor,
-        class: g(a.value)
+        for: t.value,
+        class: $(o.value)
       }, [
-        w(m(e.label) + " ", 1),
-        e.required ? (i(), s("span", Il, "*")) : b("", !0)
-      ], 10, Al)) : b("", !0),
-      e.row && e.labelCols ? (i(), s("div", {
+        I(k(e.label) + " ", 1),
+        e.required ? (n(), i("span", Yl, "*")) : y("", !0)
+      ], 10, Xl)) : y("", !0),
+      e.row && e.labelCols ? (n(), i("div", {
         key: 1,
-        class: g(l.value)
+        class: $(r.value)
       }, [
-        C(d.$slots, "default"),
-        e.helpText && !e.validationMessage ? (i(), s("div", {
+        N(c.$slots, "default"),
+        e.helpText && !e.validationMessage ? (n(), i("div", {
           key: 0,
-          id: r.value,
+          id: u.value,
           class: "form-text"
-        }, m(e.helpText), 9, Ol)) : b("", !0),
-        e.validationState === "valid" ? (i(), s("div", Dl, m(e.validationMessage || "Looks good!"), 1)) : b("", !0),
-        e.validationState === "invalid" ? (i(), s("div", {
+        }, 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", {
           key: 2,
-          id: r.value,
+          id: u.value,
           class: "invalid-feedback",
           style: { display: "block" }
-        }, m(e.validationMessage || "Please provide a valid value."), 9, El)) : b("", !0)
-      ], 2)) : (i(), s(M, { key: 2 }, [
-        C(d.$slots, "default"),
-        e.label && e.floating ? (i(), s("label", {
+        }, 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", {
           key: 0,
-          for: e.labelFor,
-          class: g(a.value)
+          for: t.value,
+          class: $(o.value)
         }, [
-          w(m(e.label) + " ", 1),
-          e.required ? (i(), s("span", Xl, "*")) : b("", !0)
-        ], 10, Rl)) : b("", !0),
-        e.helpText && !e.validationMessage ? (i(), s("div", {
+          I(k(e.label) + " ", 1),
+          e.required ? (n(), i("span", Wl, "*")) : y("", !0)
+        ], 10, Ql)) : y("", !0),
+        e.helpText && !e.validationMessage ? (n(), i("div", {
           key: 1,
-          id: r.value,
+          id: u.value,
           class: "form-text"
-        }, m(e.helpText), 9, Yl)) : b("", !0),
-        e.validationState === "valid" ? (i(), s("div", Gl, m(e.validationMessage || "Looks good!"), 1)) : b("", !0),
-        e.validationState === "invalid" ? (i(), s("div", {
+        }, 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", {
           key: 3,
-          id: r.value,
+          id: u.value,
           class: "invalid-feedback",
           style: { display: "block" }
-        }, m(e.validationMessage || "Please provide a valid value."), 9, Hl)) : b("", !0)
+        }, k(e.validationMessage || "Please provide a valid value."), 9, eo)) : y("", !0)
       ], 64))
     ], 2));
   }
-}), Ul = { class: "mb-3" }, Ql = ["for"], Wl = {
+}), ao = ["for"], lo = {
   key: 0,
   class: "text-danger"
-}, Jl = {
+}, oo = {
   key: 1,
   class: "alert alert-warning",
   role: "alert"
-}, Zl = ["id"], _l = ["id"], ei = {
-  key: 4,
+}, so = ["id"], no = ["id"], io = {
+  key: 0,
   class: "valid-feedback",
   style: { display: "block" }
-}, ti = ["id"], ai = /* @__PURE__ */ x({
+}, ro = ["id"], uo = /* @__PURE__ */ M({
   __name: "VibeFormWysiwyg",
   props: {
     modelValue: {
       type: String,
       default: ""
     },
-    id: { type: String, required: !0 },
+    id: { type: String, default: () => G("wysiwyg") },
     label: { type: String, default: void 0 },
     placeholder: { type: String, default: "Write something..." },
     disabled: { type: Boolean, default: !1 },
@@ -2614,173 +3054,183 @@ const fe = /* @__PURE__ */ x({
     height: { type: String, default: "200px" }
   },
   emits: ["update:modelValue", "validate", "blur", "focus", "change", "ready"],
-  setup(e, { emit: f }) {
-    const t = e, a = f, l = T(null), r = T(null), d = T(!1), u = T(null), o = T(!1), n = T(null), c = T(null), v = T(null), p = y(() => {
-      const N = ["vibe-wysiwyg-container"];
-      return t.validationState === "valid" && N.push("is-valid"), t.validationState === "invalid" && N.push("is-invalid"), t.disabled && N.push("disabled"), N.join(" ");
-    }), B = [
+  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 = [
       [{ header: [1, 2, 3, !1] }],
       ["bold", "italic", "underline", "strike"],
       [{ list: "ordered" }, { list: "bullet" }],
       [{ color: [] }, { background: [] }],
       ["link", "image"],
       ["clean"]
-    ], $ = () => t.toolbar === !1 ? !1 : t.toolbar === !0 || t.toolbar === void 0 ? B : t.toolbar, L = (N) => {
-      r.value && (o.value = !0, r.value.setContents([], "silent"), N && r.value.clipboard.dangerouslyPasteHTML(N, "silent"), o.value = !1);
-    }, z = () => !r.value || r.value.getText().trim().length === 0 ? "" : r.value.getSemanticHTML();
-    return G(async () => {
+    ], 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 () => {
       try {
-        const N = await import("quill"), O = N.default || N;
-        if (await import("quill/dist/quill.snow.css"), l.value) {
-          const K = {
+        const R = await import("quill"), Q = R.default || R;
+        if (await import("quill/dist/quill.snow.css"), c.value) {
+          const W = {
             theme: t.theme,
             placeholder: t.placeholder,
             readOnly: t.readonly || t.disabled,
             modules: {
-              toolbar: $()
+              toolbar: V()
             }
           };
-          r.value = new O(l.value, K), t.modelValue && L(t.modelValue), v.value = () => {
-            if (o.value) return;
-            const U = z();
-            a("update:modelValue", U), a("change"), t.validateOn === "change" && a("validate");
-          }, r.value.on("text-change", v.value), n.value = () => {
+          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 = () => {
             a("blur"), t.validateOn === "blur" && a("validate");
-          }, r.value.root.addEventListener("blur", n.value), c.value = () => {
+          }, b.value.root.addEventListener("blur", d.value), f.value = () => {
             a("focus");
-          }, r.value.root.addEventListener("focus", c.value), d.value = !0, a("ready", r.value);
+          }, b.value.root.addEventListener("focus", f.value), g.value = !0, a("ready", b.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;
+      }
+    }), 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();
         }
-      } catch (N) {
-        console.error("Failed to load Quill editor:", N), u.value = "Failed to load WYSIWYG editor. Please install quill: npm install quill", d.value = !1;
+        b.value = null;
       }
-    }), H(() => {
-      r.value && (v.value && (r.value.off("text-change", v.value), v.value = null), n.value && (r.value.root.removeEventListener("blur", n.value), n.value = null), c.value && (r.value.root.removeEventListener("focus", c.value), c.value = null), r.value = null);
-    }), E(() => t.modelValue, (N) => {
-      if (!r.value) return;
-      z() !== (N || "") && L(N || "");
-    }), E(() => t.disabled, (N) => {
-      r.value && r.value.enable(!N);
-    }), E(() => t.readonly, (N) => {
-      r.value && r.value.enable(!N);
-    }), (N, O) => (i(), s("div", Ul, [
-      e.label ? (i(), s("label", {
+    }), 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 })
+    }, [
+      o.value ? (n(), i("label", {
         key: 0,
-        for: e.id,
+        for: s.value,
         class: "form-label"
       }, [
-        w(m(e.label) + " ", 1),
-        e.required ? (i(), s("span", Wl, "*")) : b("", !0)
-      ], 8, Ql)) : b("", !0),
-      u.value ? (i(), s("div", Jl, m(u.value), 1)) : (i(), s("div", {
+        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", {
         key: 2,
-        class: g(p.value),
-        style: D({ minHeight: e.height })
+        class: $(w.value),
+        style: K({ minHeight: e.height })
       }, [
-        h("div", {
+        S("div", {
           ref_key: "editorContainer",
-          ref: l,
-          id: e.id
-        }, null, 8, Zl)
+          ref: c,
+          id: s.value
+        }, null, 8, so)
       ], 6)),
-      e.helpText && !e.validationMessage ? (i(), s("div", {
+      u.value ? (n(), i("div", {
         key: 3,
-        id: `${e.id}-feedback`,
+        id: `${s.value}-feedback`,
         class: "form-text"
-      }, m(e.helpText), 9, _l)) : b("", !0),
-      e.validationState === "valid" ? (i(), s("div", ei, m(e.validationMessage || "Looks good!"), 1)) : b("", !0),
-      e.validationState === "invalid" ? (i(), s("div", {
-        key: 5,
-        id: `${e.id}-feedback`,
-        class: "invalid-feedback",
-        style: { display: "block" }
-      }, m(e.validationMessage || "Please provide valid content."), 9, ti)) : b("", !0)
-    ]));
+      }, 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", {
+          key: 1,
+          id: `${s.value}-feedback`,
+          class: "invalid-feedback",
+          style: { display: "block" }
+        }, k(e.validationMessage || "Please provide valid content."), 9, ro)) : y("", !0)
+      ], 64)) : y("", !0)
+    ], 2));
   }
-}), li = /* @__PURE__ */ Q(ai, [["__scopeId", "data-v-8e6e81b0"]]), si = {
+}), co = /* @__PURE__ */ re(uo, [["__scopeId", "data-v-1ed73fd7"]]), bo = {
   install(e) {
-    e.component("VibeAlert", fe), e.component("VibeBadge", ve), e.component("VibeButton", be), e.component("VibeButtonGroup", he), e.component("VibeCloseButton", ge), e.component("VibeSpinner", ke), e.component("VibePlaceholder", $e), e.component("VibeContainer", Se), e.component("VibeRow", Ve), e.component("VibeCol", Ce), e.component("VibeCard", Pe), e.component("VibeBreadcrumb", je), e.component("VibeNav", Ae), e.component("VibeNavbar", Ie), e.component("VibeNavbarBrand", Oe), e.component("VibeNavbarToggle", Ee), e.component("VibeNavbarNav", Ke), e.component("VibePagination", Ze), e.component("VibeTabContent", et), e.component("VibeListGroup", tt), e.component("VibeProgress", lt), e.component("VibeAccordion", rt), e.component("VibeCollapse", ut), e.component("VibeDropdown", yt), e.component("VibeModal", Ct), e.component("VibeOffcanvas", Tt), e.component("VibeToast", Lt), e.component("VibeCarousel", Ht), e.component("VibeTooltip", Ut), e.component("VibePopover", Wt), e.component("VibeScrollspy", Jt), e.component("VibeIcon", Zt), e.component("VibeDataTable", Sa), e.component("VibeFormInput", Ma), e.component("VibeFormSelect", Da), e.component("VibeFormTextarea", Qa), e.component("VibeFormSpinbutton", nl), e.component("VibeFormDatepicker", bl), e.component("VibeFormCheckbox", $l), e.component("VibeFormRadio", Nl), e.component("VibeFormSwitch", jl), e.component("VibeFormGroup", Kl), e.component("VibeFormWysiwyg", li);
+    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);
   }
 };
-function ni(e = "") {
-  const f = T(e), t = T(null), a = T(""), l = T(!1), r = T(!1), d = T(!1), u = async (B) => {
-    if (!B)
+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)
       return t.value = null, a.value = "", { valid: !0 };
-    d.value = !0;
+    o.value = !0;
     try {
-      const $ = Array.isArray(B) ? B : [{ validator: B }];
-      for (const L of $) {
-        const z = await L.validator(f.value);
-        if (z === !1 || typeof z == "string")
-          return t.value = "invalid", a.value = typeof z == "string" ? z : L.message || "Invalid value", d.value = !1, { valid: !1, message: a.value };
+      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 };
       }
-      return t.value = "valid", a.value = "", d.value = !1, { valid: !0 };
+      return t.value = "valid", a.value = "", o.value = !1, { valid: !0 };
     } catch {
-      return t.value = "invalid", a.value = "Validation error occurred", d.value = !1, { valid: !1, message: a.value };
+      return t.value = "invalid", a.value = "Validation error occurred", o.value = !1, { valid: !1, message: a.value };
     }
-  }, o = () => {
-    f.value = e, t.value = null, a.value = "", l.value = !1, r.value = !1, d.value = !1;
-  }, n = () => {
-    r.value = !0;
+  }, u = () => {
+    v.value = e, t.value = null, a.value = "", l.value = !1, s.value = !1, o.value = !1;
   }, c = () => {
+    s.value = !0;
+  }, b = () => {
     l.value = !0;
-  }, v = y(() => t.value === "valid"), p = y(() => t.value === "invalid");
+  }, g = m(() => t.value === "valid"), C = m(() => t.value === "invalid");
   return {
-    value: f,
+    value: v,
     validationState: t,
     validationMessage: a,
     isDirty: l,
-    isTouched: r,
-    isValidating: d,
-    isValid: v,
-    isInvalid: p,
-    validate: u,
-    reset: o,
-    markAsTouched: n,
-    markAsDirty: c
+    isTouched: s,
+    isValidating: o,
+    isValid: g,
+    isInvalid: C,
+    validate: r,
+    reset: u,
+    markAsTouched: c,
+    markAsDirty: b
   };
 }
-const oi = {
+const mo = {
   required: (e = "This field is required") => ({
-    validator: (f) => Array.isArray(f) ? f.length > 0 || e : typeof f == "string" ? f.trim().length > 0 || e : f != null && f !== "" || e,
+    validator: (v) => Array.isArray(v) ? v.length > 0 || e : typeof v == "string" ? v.trim().length > 0 || e : v != null && v !== "" || e,
     message: e
   }),
   email: (e = "Please enter a valid email address") => ({
-    validator: (f) => f ? /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(f) || e : !0,
+    validator: (v) => v ? /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v) || e : !0,
     message: e
   }),
-  minLength: (e, f) => ({
-    validator: (t) => t ? t.length >= e || f || `Minimum length is ${e} characters` : !0,
-    message: f
+  minLength: (e, v) => ({
+    validator: (t) => t ? t.length >= e || v || `Minimum length is ${e} characters` : !0,
+    message: v
   }),
-  maxLength: (e, f) => ({
-    validator: (t) => t ? t.length <= e || f || `Maximum length is ${e} characters` : !0,
-    message: f
+  maxLength: (e, v) => ({
+    validator: (t) => t ? t.length <= e || v || `Maximum length is ${e} characters` : !0,
+    message: v
   }),
-  min: (e, f) => ({
+  min: (e, v) => ({
     validator: (t) => {
       if (t == null || t === "") return !0;
       const a = Number(t);
-      return Number.isNaN(a) ? f || "Value must be a number" : a >= e || f || `Minimum value is ${e}`;
+      return Number.isNaN(a) ? v || "Value must be a number" : a >= e || v || `Minimum value is ${e}`;
     },
-    message: f
+    message: v
   }),
-  max: (e, f) => ({
+  max: (e, v) => ({
     validator: (t) => {
       if (t == null || t === "") return !0;
       const a = Number(t);
-      return Number.isNaN(a) ? f || "Value must be a number" : a <= e || f || `Maximum value is ${e}`;
+      return Number.isNaN(a) ? v || "Value must be a number" : a <= e || v || `Maximum value is ${e}`;
     },
-    message: f
+    message: v
   }),
-  pattern: (e, f = "Invalid format") => ({
-    validator: (t) => t ? e.test(t) || f : !0,
-    message: f
+  pattern: (e, v = "Invalid format") => ({
+    validator: (t) => t ? e.test(t) || v : !0,
+    message: v
   }),
   url: (e = "Please enter a valid URL") => ({
-    validator: (f) => {
-      if (!f) return !0;
+    validator: (v) => {
+      if (!v) return !0;
       try {
-        return new URL(f), !0;
+        return new URL(v), !0;
       } catch {
         return e;
       }
@@ -2791,52 +3241,104 @@ const oi = {
   async: (e) => ({
     validator: e
   })
-};
+}, ae = "vibe-color-mode", le = {
+  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);
+}
+function ee(e) {
+  se.value = e, vo(e);
+}
+ee("auto");
+function po() {
+  function e(l) {
+    if (l in le) {
+      try {
+        localStorage.setItem(ae, l);
+      } catch {
+      }
+      ee(l);
+    }
+  }
+  function v() {
+    if (oe) return;
+    let l = "auto";
+    try {
+      const s = localStorage.getItem(ae);
+      s !== null && s in le && (l = s);
+    } catch {
+    }
+    ee(l), oe = !0;
+  }
+  function t() {
+    try {
+      localStorage.removeItem(ae);
+    } catch {
+    }
+    oe = !1, ee("auto");
+  }
+  function a() {
+    e(le[se.value] ?? "auto");
+  }
+  return {
+    colorMode: se,
+    setColorMode: e,
+    toggleColorMode: a,
+    initColorMode: v,
+    clearColorMode: t
+  };
+}
 export {
-  rt as VibeAccordion,
-  fe as VibeAlert,
-  ve as VibeBadge,
-  je as VibeBreadcrumb,
-  be as VibeButton,
-  he as VibeButtonGroup,
-  Pe as VibeCard,
-  Ht as VibeCarousel,
-  ge as VibeCloseButton,
-  Ce as VibeCol,
-  ut as VibeCollapse,
-  Se as VibeContainer,
-  Sa as VibeDataTable,
-  yt as VibeDropdown,
-  $l as VibeFormCheckbox,
-  bl as VibeFormDatepicker,
-  Kl as VibeFormGroup,
-  Ma as VibeFormInput,
-  Nl as VibeFormRadio,
-  Da as VibeFormSelect,
-  nl as VibeFormSpinbutton,
-  jl as VibeFormSwitch,
-  Qa as VibeFormTextarea,
-  li as VibeFormWysiwyg,
-  Zt as VibeIcon,
-  tt as VibeListGroup,
-  Ct as VibeModal,
-  Ae as VibeNav,
-  Ie as VibeNavbar,
-  Oe as VibeNavbarBrand,
-  Ke as VibeNavbarNav,
-  Ee as VibeNavbarToggle,
-  Tt as VibeOffcanvas,
-  Ze as VibePagination,
-  $e as VibePlaceholder,
-  Wt as VibePopover,
-  lt as VibeProgress,
-  Ve as VibeRow,
-  Jt as VibeScrollspy,
-  ke as VibeSpinner,
-  et as VibeTabContent,
-  Lt as VibeToast,
-  Ut as VibeTooltip,
-  si as default,
-  ni as useFormValidation,
-  oi as validators
+  $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,
+  G as useId,
+  mo as validators
 };