@velkymx/vibeui 0.4.2 → 0.5.0

package/dist/vibeui.es.js

@@ -1,5 +1,5 @@
-import { defineComponent as p, computed as c, createElementBlock as o, createCommentVNode as u, openBlock as l, normalizeClass as h, renderSlot as $, createTextVNode as N, toDisplayString as f, createBlock as V, resolveDynamicComponent as T, withCtx as x, createElementVNode as m, normalizeStyle as R, unref as L, useSlots as D, Fragment as q, renderList as I, ref as F, watch as O, withDirectives as W, vModelText as ye, vModelSelect as he, withModifiers as Y, onMounted as ge, onBeforeUnmount as pe } from "vue";
-const $e = /* @__PURE__ */ p({
+import { defineComponent as C, computed as y, openBlock as i, createElementBlock as n, normalizeClass as g, renderSlot as V, createTextVNode as w, toDisplayString as b, createCommentVNode as v, createBlock as M, resolveDynamicComponent as q, withCtx as P, createElementVNode as h, normalizeStyle as D, Fragment as F, renderList as z, unref as se, ref as T, watch as E, onMounted as G, onBeforeUnmount as H, useModel as Y, withDirectives as W, vModelText as oe, vModelSelect as de, withModifiers as X, mergeModels as J } from "vue";
+const re = /* @__PURE__ */ C({
   __name: "VibeAlert",
   props: {
     variant: { type: String, default: "primary" },
@@ -8,38 +8,38 @@ const $e = /* @__PURE__ */ p({
     message: { type: String, required: !0 }
   },
   emits: ["update:modelValue", "component-error"],
-  setup(e, { emit: d }) {
-    const t = e, i = d, a = c({
+  setup(e, { emit: f }) {
+    const t = e, a = f, l = y({
       get: () => t.modelValue,
-      set: (r) => i("update:modelValue", r)
-    }), n = () => {
+      set: (s) => a("update:modelValue", s)
+    }), o = () => {
       try {
-        a.value = !1;
-      } catch (r) {
-        i("component-error", {
+        l.value = !1;
+      } catch (s) {
+        a("component-error", {
           message: "Dismiss failed",
           componentName: "VibeAlert",
-          originalError: r
+          originalError: s
         });
       }
     };
-    return (r, s) => a.value ? (l(), o("div", {
+    return (s, u) => l.value ? (i(), n("div", {
       key: 0,
-      class: h(`alert alert-${e.variant}`),
+      class: g(`alert alert-${e.variant}`),
       role: "alert"
     }, [
-      $(r.$slots, "default", {}, () => [
-        N(f(e.message), 1)
+      V(s.$slots, "default", {}, () => [
+        w(b(e.message), 1)
       ]),
-      e.dismissable ? (l(), o("button", {
+      e.dismissable ? (i(), n("button", {
         key: 0,
         class: "btn-close",
-        onClick: n,
+        onClick: o,
         "aria-label": "Close"
-      })) : u("", !0)
-    ], 2)) : u("", !0);
+      })) : v("", !0)
+    ], 2)) : v("", !0);
   }
-}), ke = /* @__PURE__ */ p({
+}), ue = /* @__PURE__ */ C({
   __name: "VibeBadge",
   props: {
     variant: { type: String, default: "primary" },
@@ -47,21 +47,21 @@ const $e = /* @__PURE__ */ p({
     tag: { type: String, default: "span" }
   },
   emits: ["component-error"],
-  setup(e, { emit: d }) {
-    const t = e, i = c(() => {
-      const a = ["badge", `bg-${t.variant}`];
-      return t.pill && a.push("rounded-pill"), a.join(" ");
+  setup(e, { emit: f }) {
+    const t = e, a = y(() => {
+      const l = ["badge", `bg-${t.variant}`];
+      return t.pill && l.push("rounded-pill"), l.join(" ");
     });
-    return (a, n) => (l(), V(T(e.tag), {
-      class: h(i.value)
+    return (l, o) => (i(), M(q(e.tag), {
+      class: g(a.value)
     }, {
-      default: x(() => [
-        $(a.$slots, "default")
+      default: P(() => [
+        V(l.$slots, "default")
       ]),
       _: 3
     }, 8, ["class"]));
   }
-}), Se = /* @__PURE__ */ p({
+}), ce = /* @__PURE__ */ C({
   __name: "VibeButton",
   props: {
     variant: { type: String, default: "primary" },
@@ -74,29 +74,29 @@ const $e = /* @__PURE__ */ p({
     active: { type: Boolean, default: !1 }
   },
   emits: ["click", "component-error"],
-  setup(e, { emit: d }) {
-    const t = e, i = d, a = c(() => t.href ? "a" : t.to ? "router-link" : "button"), n = c(() => {
-      const s = ["btn"];
-      return t.outline ? s.push(`btn-outline-${t.variant}`) : s.push(`btn-${t.variant}`), t.size && s.push(`btn-${t.size}`), t.active && s.push("active"), s.join(" ");
-    }), r = (s) => {
-      t.disabled || i("click", s);
+  setup(e, { emit: f }) {
+    const t = e, a = f, l = y(() => t.href ? "a" : t.to ? "router-link" : "button"), o = 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(" ");
+    }), s = (u) => {
+      t.disabled || a("click", u);
     };
-    return (s, y) => (l(), V(T(a.value), {
-      class: h(n.value),
+    return (u, d) => (i(), M(q(l.value), {
+      class: g(o.value),
       type: e.href || e.to ? void 0 : e.type,
       href: e.href,
       to: e.to,
       disabled: e.disabled,
       "aria-disabled": e.disabled,
-      onClick: r
+      onClick: s
     }, {
-      default: x(() => [
-        $(s.$slots, "default")
+      default: P(() => [
+        V(u.$slots, "default")
       ]),
       _: 3
     }, 8, ["class", "type", "href", "to", "disabled", "aria-disabled"]));
   }
-}), Ve = ["role", "aria-label"], xe = /* @__PURE__ */ p({
+}), fe = ["role", "aria-label"], ve = /* @__PURE__ */ C({
   __name: "VibeButtonGroup",
   props: {
     size: { type: String, default: void 0 },
@@ -105,20 +105,20 @@ const $e = /* @__PURE__ */ p({
     ariaLabel: { type: String, default: void 0 }
   },
   emits: ["component-error"],
-  setup(e, { emit: d }) {
-    const t = e, i = c(() => {
-      const a = [t.vertical ? "btn-group-vertical" : "btn-group"];
-      return t.size && a.push(`btn-group-${t.size}`), a.join(" ");
+  setup(e, { emit: f }) {
+    const t = e, a = y(() => {
+      const l = [t.vertical ? "btn-group-vertical" : "btn-group"];
+      return t.size && l.push(`btn-group-${t.size}`), l.join(" ");
     });
-    return (a, n) => (l(), o("div", {
-      class: h(i.value),
+    return (l, o) => (i(), n("div", {
+      class: g(a.value),
       role: e.role,
       "aria-label": e.ariaLabel
     }, [
-      $(a.$slots, "default")
-    ], 10, Ve));
+      V(l.$slots, "default")
+    ], 10, fe));
   }
-}), Ce = ["disabled", "aria-label"], Be = /* @__PURE__ */ p({
+}), be = ["disabled", "aria-label"], me = /* @__PURE__ */ C({
   __name: "VibeCloseButton",
   props: {
     disabled: { type: Boolean, default: !1 },
@@ -126,19 +126,19 @@ const $e = /* @__PURE__ */ p({
     ariaLabel: { type: String, default: "Close" }
   },
   emits: ["click", "component-error"],
-  setup(e, { emit: d }) {
-    const t = e, i = d, a = (n) => {
-      t.disabled || i("click", n);
+  setup(e, { emit: f }) {
+    const t = e, a = f, l = (o) => {
+      t.disabled || a("click", o);
     };
-    return (n, r) => (l(), o("button", {
+    return (o, s) => (i(), n("button", {
       type: "button",
-      class: h(["btn-close", { "btn-close-white": e.white }]),
+      class: g(["btn-close", { "btn-close-white": e.white }]),
       disabled: e.disabled,
       "aria-label": e.ariaLabel,
-      onClick: a
-    }, null, 10, Ce));
+      onClick: l
+    }, null, 10, be));
   }
-}), we = { class: "visually-hidden" }, Ne = /* @__PURE__ */ p({
+}), he = { class: "visually-hidden" }, ye = /* @__PURE__ */ C({
   __name: "VibeSpinner",
   props: {
     variant: { type: String, default: void 0 },
@@ -148,22 +148,22 @@ const $e = /* @__PURE__ */ p({
     tag: { type: String, default: "div" }
   },
   emits: ["component-error"],
-  setup(e, { emit: d }) {
-    const t = e, i = c(() => {
-      const a = [`spinner-${t.type}`];
-      return t.variant && a.push(`text-${t.variant}`), t.size && a.push(`spinner-${t.type}-${t.size}`), a.join(" ");
+  setup(e, { emit: f }) {
+    const t = e, a = y(() => {
+      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 (a, n) => (l(), V(T(e.tag), {
-      class: h(i.value),
+    return (l, o) => (i(), M(q(e.tag), {
+      class: g(a.value),
       role: "status"
     }, {
-      default: x(() => [
-        m("span", we, f(e.label), 1)
+      default: P(() => [
+        h("span", he, b(e.label), 1)
       ]),
       _: 1
     }, 8, ["class"]));
   }
-}), Te = /* @__PURE__ */ p({
+}), ge = /* @__PURE__ */ C({
   __name: "VibePlaceholder",
   props: {
     variant: { type: String, default: void 0 },
@@ -173,49 +173,49 @@ const $e = /* @__PURE__ */ p({
     tag: { type: String, default: "span" }
   },
   emits: ["component-error"],
-  setup(e, { emit: d }) {
-    const t = e, i = c(() => {
-      const r = ["placeholder"];
-      return t.variant && r.push(`bg-${t.variant}`), t.size && r.push(`placeholder-${t.size}`), r.join(" ");
-    }), a = c(() => {
+  setup(e, { emit: f }) {
+    const t = e, a = y(() => {
+      const s = ["placeholder"];
+      return t.variant && s.push(`bg-${t.variant}`), t.size && s.push(`placeholder-${t.size}`), s.join(" ");
+    }), l = y(() => {
       if (t.animation) return `placeholder-${t.animation}`;
-    }), n = c(() => {
+    }), o = y(() => {
       if (t.width)
         return { width: typeof t.width == "number" ? `${t.width}%` : t.width };
     });
-    return (r, s) => (l(), V(T(e.tag), {
-      class: h(a.value)
+    return (s, u) => (i(), M(q(e.tag), {
+      class: g(l.value)
     }, {
-      default: x(() => [
-        m("span", {
-          class: h(i.value),
-          style: R(n.value)
+      default: P(() => [
+        h("span", {
+          class: g(a.value),
+          style: D(o.value)
         }, [
-          $(r.$slots, "default")
+          V(s.$slots, "default")
         ], 6)
       ]),
       _: 3
     }, 8, ["class"]));
   }
-}), Me = /* @__PURE__ */ p({
+}), pe = /* @__PURE__ */ C({
   __name: "VibeContainer",
   props: {
     fluid: { type: [Boolean, String], default: !1 },
     tag: { type: String, default: "div" }
   },
   emits: ["component-error"],
-  setup(e, { emit: d }) {
-    const t = e, i = c(() => t.fluid === !1 ? "container" : t.fluid === !0 ? "container-fluid" : `container-${t.fluid}`);
-    return (a, n) => (l(), V(T(e.tag), {
-      class: h(i.value)
+  setup(e, { emit: f }) {
+    const t = e, a = y(() => t.fluid === !1 ? "container" : t.fluid === !0 ? "container-fluid" : `container-${t.fluid}`);
+    return (l, o) => (i(), M(q(e.tag), {
+      class: g(a.value)
     }, {
-      default: x(() => [
-        $(a.$slots, "default")
+      default: P(() => [
+        V(l.$slots, "default")
       ]),
       _: 3
     }, 8, ["class"]));
   }
-}), Pe = /* @__PURE__ */ p({
+}), $e = /* @__PURE__ */ C({
   __name: "VibeRow",
   props: {
     tag: { type: String, default: "div" },
@@ -251,33 +251,33 @@ const $e = /* @__PURE__ */ p({
     justifyContent: { type: String, default: void 0 }
   },
   emits: ["component-error"],
-  setup(e, { emit: d }) {
-    const t = e, i = c(() => {
-      const a = ["row"];
-      t.gutters !== void 0 && a.push(`g-${t.gutters}`), t.guttersX !== void 0 && a.push(`gx-${t.guttersX}`), t.guttersY !== void 0 && a.push(`gy-${t.guttersY}`);
-      const n = ["sm", "md", "lg", "xl", "xxl"];
-      return n.forEach((r) => {
-        const s = r.charAt(0).toUpperCase() + r.slice(1), y = `gutters${s}`;
-        t[y] !== void 0 && a.push(`g-${r}-${t[y]}`);
-        const v = `guttersX${s}`;
-        t[v] !== void 0 && a.push(`gx-${r}-${t[v]}`);
-        const b = `guttersY${s}`;
-        t[b] !== void 0 && a.push(`gy-${r}-${t[b]}`);
-      }), t.rowCols !== void 0 && a.push(`row-cols-${t.rowCols}`), n.forEach((r) => {
-        const s = `rowCols${r.charAt(0).toUpperCase() + r.slice(1)}`;
-        t[s] !== void 0 && a.push(`row-cols-${r}-${t[s]}`);
-      }), t.alignItems && a.push(`align-items-${t.alignItems}`), t.justifyContent && a.push(`justify-content-${t.justifyContent}`), a.join(" ");
+  setup(e, { emit: f }) {
+    const t = e, a = y(() => {
+      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 o = ["sm", "md", "lg", "xl", "xxl"];
+      return o.forEach((s) => {
+        const u = s.charAt(0).toUpperCase() + s.slice(1), d = `gutters${u}`;
+        t[d] !== void 0 && l.push(`g-${s}-${t[d]}`);
+        const r = `guttersX${u}`;
+        t[r] !== void 0 && l.push(`gx-${s}-${t[r]}`);
+        const c = `guttersY${u}`;
+        t[c] !== void 0 && l.push(`gy-${s}-${t[c]}`);
+      }), t.rowCols !== void 0 && l.push(`row-cols-${t.rowCols}`), o.forEach((s) => {
+        const u = `rowCols${s.charAt(0).toUpperCase() + s.slice(1)}`;
+        t[u] !== void 0 && l.push(`row-cols-${s}-${t[u]}`);
+      }), t.alignItems && l.push(`align-items-${t.alignItems}`), t.justifyContent && l.push(`justify-content-${t.justifyContent}`), l.join(" ");
     });
-    return (a, n) => (l(), V(T(e.tag), {
-      class: h(i.value)
+    return (l, o) => (i(), M(q(e.tag), {
+      class: g(a.value)
     }, {
-      default: x(() => [
-        $(a.$slots, "default")
+      default: P(() => [
+        V(l.$slots, "default")
       ]),
       _: 3
     }, 8, ["class"]));
   }
-}), qe = /* @__PURE__ */ p({
+}), ke = /* @__PURE__ */ C({
   __name: "VibeCol",
   props: {
     tag: { type: String, default: "div" },
@@ -306,283 +306,148 @@ const $e = /* @__PURE__ */ p({
     alignSelf: { type: String, default: void 0 }
   },
   emits: ["component-error"],
-  setup(e, { emit: d }) {
-    const t = e, i = c(() => {
-      const a = [];
-      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 ? a.push("col") : t.cols === "auto" ? a.push("col-auto") : t.cols && a.push(`col-${t.cols}`), [
+  setup(e, { emit: f }) {
+    const t = e, a = y(() => {
+      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 },
         { name: "md", value: t.md },
         { name: "lg", value: t.lg },
         { name: "xl", value: t.xl },
         { name: "xxl", value: t.xxl }
-      ].forEach(({ name: s, value: y }) => {
-        y === !0 ? a.push(`col-${s}`) : y === "auto" ? a.push(`col-${s}-auto`) : y !== void 0 && a.push(`col-${s}-${y}`);
-      })) : a.push("col"), t.offset !== void 0 && a.push(`offset-${t.offset}`), t.offsetSm !== void 0 && a.push(`offset-sm-${t.offsetSm}`), t.offsetMd !== void 0 && a.push(`offset-md-${t.offsetMd}`), t.offsetLg !== void 0 && a.push(`offset-lg-${t.offsetLg}`), t.offsetXl !== void 0 && a.push(`offset-xl-${t.offsetXl}`), t.offsetXxl !== void 0 && a.push(`offset-xxl-${t.offsetXxl}`), t.order !== void 0 && a.push(`order-${t.order}`), t.orderSm !== void 0 && a.push(`order-sm-${t.orderSm}`), t.orderMd !== void 0 && a.push(`order-md-${t.orderMd}`), t.orderLg !== void 0 && a.push(`order-lg-${t.orderLg}`), t.orderXl !== void 0 && a.push(`order-xl-${t.orderXl}`), t.orderXxl !== void 0 && a.push(`order-xxl-${t.orderXxl}`), t.alignSelf && a.push(`align-self-${t.alignSelf}`), a.join(" ");
+      ].forEach(({ name: u, value: d }) => {
+        d === !0 ? l.push(`col-${u}`) : d === "auto" ? l.push(`col-${u}-auto`) : d !== void 0 && l.push(`col-${u}-${d}`);
+      })) : 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 (a, n) => (l(), V(T(e.tag), {
-      class: h(i.value)
+    return (l, o) => (i(), M(q(e.tag), {
+      class: g(a.value)
     }, {
-      default: x(() => [
-        $(a.$slots, "default")
+      default: P(() => [
+        V(l.$slots, "default")
       ]),
       _: 3
     }, 8, ["class"]));
   }
-}), J = /* @__PURE__ */ p({
-  __name: "VibeCardHeader",
-  props: {
-    tag: { type: String, default: "div" }
-  },
-  emits: ["component-error"],
-  setup(e, { emit: d }) {
-    return (t, i) => (l(), V(T(e.tag), { class: "card-header" }, {
-      default: x(() => [
-        $(t.$slots, "default")
-      ]),
-      _: 3
-    }));
-  }
-}), Z = /* @__PURE__ */ p({
-  __name: "VibeCardBody",
-  props: {
-    tag: { type: String, default: "div" }
-  },
-  emits: ["component-error"],
-  setup(e, { emit: d }) {
-    return (t, i) => (l(), V(T(e.tag), { class: "card-body" }, {
-      default: x(() => [
-        $(t.$slots, "default")
-      ]),
-      _: 3
-    }));
-  }
-}), _ = /* @__PURE__ */ p({
-  __name: "VibeCardFooter",
-  props: {
-    tag: { type: String, default: "div" }
-  },
-  emits: ["component-error"],
-  setup(e, { emit: d }) {
-    return (t, i) => (l(), V(T(e.tag), { class: "card-footer" }, {
-      default: x(() => [
-        $(t.$slots, "default")
-      ]),
-      _: 3
-    }));
-  }
-}), Fe = ["src", "alt"], U = /* @__PURE__ */ p({
-  __name: "VibeCardImg",
-  props: {
-    src: { type: String, required: !0 },
-    alt: { type: String, default: "" },
-    top: { type: Boolean, default: !1 },
-    bottom: { type: Boolean, default: !1 }
-  },
-  emits: ["component-error"],
-  setup(e, { emit: d }) {
-    const t = e, i = t.top ? "card-img-top" : t.bottom ? "card-img-bottom" : "card-img";
-    return (a, n) => (l(), o("img", {
-      src: e.src,
-      alt: e.alt,
-      class: h(L(i))
-    }, null, 10, Fe));
-  }
-}), ee = /* @__PURE__ */ p({
-  __name: "VibeCardTitle",
-  props: {
-    tag: { type: String, default: "h5" }
-  },
-  emits: ["component-error"],
-  setup(e, { emit: d }) {
-    return (t, i) => (l(), V(T(e.tag), { class: "card-title" }, {
-      default: x(() => [
-        $(t.$slots, "default")
-      ]),
-      _: 3
-    }));
-  }
-}), te = /* @__PURE__ */ p({
-  __name: "VibeCardText",
-  props: {
-    tag: { type: String, default: "p" }
-  },
-  emits: ["component-error"],
-  setup(e, { emit: d }) {
-    return (t, i) => (l(), V(T(e.tag), { class: "card-text" }, {
-      default: x(() => [
-        $(t.$slots, "default")
-      ]),
-      _: 3
-    }));
-  }
-}), Ie = /* @__PURE__ */ p({
+}), Se = ["src", "alt"], Ve = {
+  key: 1,
+  class: "card-header"
+}, Ce = {
+  key: 2,
+  class: "card-body"
+}, xe = {
+  key: 0,
+  class: "card-title"
+}, we = {
+  key: 1,
+  class: "card-text"
+}, Be = {
+  key: 3,
+  class: "card-footer"
+}, Ne = ["src", "alt"], Te = /* @__PURE__ */ C({
   __name: "VibeCard",
   props: {
     variant: { type: String, default: void 0 },
     border: { type: String, default: void 0 },
     textVariant: { type: String, default: void 0 },
     tag: { type: String, default: "div" },
-    // Shorthand props for quick card creation
+    // Content props
     title: { type: String, default: void 0 },
     body: { type: String, default: void 0 },
     header: { type: String, default: void 0 },
     footer: { type: String, default: void 0 },
-    headerImage: { type: String, default: void 0 },
-    headerImageAlt: { type: String, default: "" },
-    footerImage: { type: String, default: void 0 },
-    footerImageAlt: { type: String, default: "" }
+    // Image props
+    imgSrc: { type: String, default: void 0 },
+    imgAlt: { type: String, default: "" },
+    imgTop: { type: Boolean, default: !0 },
+    imgBottom: { type: Boolean, default: !1 }
   },
   emits: ["component-error"],
-  setup(e, { emit: d }) {
-    const t = e, i = D(), a = c(() => {
-      const s = ["card"];
-      return t.variant && s.push(`bg-${t.variant}`), t.border && s.push(`border-${t.border}`), t.textVariant && s.push(`text-${t.textVariant}`), s.join(" ");
-    }), n = c(() => !!(t.title || t.body || t.header || t.footer || t.headerImage || t.footerImage)), r = c(() => !!(i.default || i.header || i.footer || i.body));
-    return (s, y) => (l(), V(T(e.tag), {
-      class: h(a.value)
+  setup(e, { emit: f }) {
+    const t = e, a = y(() => {
+      const l = ["card"];
+      return t.variant && l.push(`bg-${t.variant}`), t.border && l.push(`border-${t.border}`), t.textVariant && l.push(`text-${t.textVariant}`), l.join(" ");
+    });
+    return (l, o) => (i(), M(q(e.tag), {
+      class: g(a.value)
     }, {
-      default: x(() => [
-        n.value && !r.value ? (l(), o(q, { key: 0 }, [
-          e.headerImage ? (l(), V(U, {
-            key: 0,
-            top: "",
-            src: e.headerImage,
-            alt: e.headerImageAlt
-          }, null, 8, ["src", "alt"])) : u("", !0),
-          e.header ? (l(), V(J, { key: 1 }, {
-            default: x(() => [
-              N(f(e.header), 1)
-            ]),
-            _: 1
-          })) : u("", !0),
-          e.title || e.body ? (l(), V(Z, { key: 2 }, {
-            default: x(() => [
-              e.title ? (l(), V(ee, { key: 0 }, {
-                default: x(() => [
-                  N(f(e.title), 1)
-                ]),
-                _: 1
-              })) : u("", !0),
-              e.body ? (l(), V(te, { key: 1 }, {
-                default: x(() => [
-                  N(f(e.body), 1)
-                ]),
-                _: 1
-              })) : u("", !0)
-            ]),
-            _: 1
-          })) : u("", !0),
-          e.footer ? (l(), V(_, { key: 3 }, {
-            default: x(() => [
-              N(f(e.footer), 1)
-            ]),
-            _: 1
-          })) : u("", !0),
-          e.footerImage ? (l(), V(U, {
-            key: 4,
-            bottom: "",
-            src: e.footerImage,
-            alt: e.footerImageAlt
-          }, null, 8, ["src", "alt"])) : u("", !0)
-        ], 64)) : $(s.$slots, "default", { key: 1 })
+      default: P(() => [
+        e.imgSrc && e.imgTop ? (i(), n("img", {
+          key: 0,
+          src: e.imgSrc,
+          alt: e.imgAlt,
+          class: "card-img-top"
+        }, null, 8, Se)) : v("", !0),
+        e.header || l.$slots.header ? (i(), n("div", Ve, [
+          V(l.$slots, "header", {}, () => [
+            w(b(e.header), 1)
+          ])
+        ])) : v("", !0),
+        e.title || e.body || l.$slots.default ? (i(), n("div", Ce, [
+          e.title || l.$slots.title ? (i(), n("h5", xe, [
+            V(l.$slots, "title", {}, () => [
+              w(b(e.title), 1)
+            ])
+          ])) : v("", !0),
+          e.body || l.$slots.body ? (i(), n("p", we, [
+            V(l.$slots, "body", {}, () => [
+              w(b(e.body), 1)
+            ])
+          ])) : v("", !0),
+          V(l.$slots, "default")
+        ])) : v("", !0),
+        e.footer || l.$slots.footer ? (i(), n("div", Be, [
+          V(l.$slots, "footer", {}, () => [
+            w(b(e.footer), 1)
+          ])
+        ])) : v("", !0),
+        e.imgSrc && e.imgBottom ? (i(), n("img", {
+          key: 4,
+          src: e.imgSrc,
+          alt: e.imgAlt,
+          class: "card-img-bottom"
+        }, null, 8, Ne)) : v("", !0)
       ]),
       _: 3
     }, 8, ["class"]));
   }
-}), ze = ["aria-current"], ae = /* @__PURE__ */ p({
-  __name: "VibeBreadcrumbItem",
-  props: {
-    active: { type: Boolean, default: !1 },
-    href: { type: String, default: void 0 },
-    to: { type: [String, Object], default: void 0 }
-  },
-  emits: ["component-error"],
-  setup(e, { emit: d }) {
-    const t = e, i = t.href ? "a" : t.to ? "router-link" : "span";
-    return (a, n) => (l(), o("li", {
-      class: h(["breadcrumb-item", { active: e.active }]),
-      "aria-current": e.active ? "page" : void 0
-    }, [
-      (l(), V(T(L(i)), {
-        href: e.href,
-        to: e.to
-      }, {
-        default: x(() => [
-          $(a.$slots, "default")
-        ]),
-        _: 3
-      }, 8, ["href", "to"]))
-    ], 10, ze));
-  }
-}), Ae = ["aria-label"], je = { class: "breadcrumb" }, Le = /* @__PURE__ */ p({
+}), Me = ["aria-label"], qe = { class: "breadcrumb" }, Pe = ["aria-current"], Fe = /* @__PURE__ */ C({
   __name: "VibeBreadcrumb",
   props: {
     ariaLabel: { type: String, default: "breadcrumb" },
-    items: { type: Array, default: void 0 }
-  },
-  emits: ["component-error"],
-  setup(e, { emit: d }) {
-    const t = D();
-    return (i, a) => (l(), o("nav", { "aria-label": e.ariaLabel }, [
-      m("ol", je, [
-        e.items && e.items.length > 0 && !L(t).default ? (l(!0), o(q, { key: 0 }, I(e.items, (n, r) => (l(), V(ae, {
-          key: r,
-          href: n.href,
-          to: n.to,
-          active: n.active
-        }, {
-          default: x(() => [
-            N(f(n.text), 1)
-          ]),
-          _: 2
-        }, 1032, ["href", "to", "active"]))), 128)) : $(i.$slots, "default", { key: 1 })
-      ])
-    ], 8, Ae));
-  }
-}), Oe = ["role"], Q = /* @__PURE__ */ p({
-  __name: "VibeNavItem",
-  props: {
-    active: { type: Boolean, default: !1 },
-    disabled: { type: Boolean, default: !1 },
-    href: { type: String, default: void 0 },
-    to: { type: [String, Object], default: void 0 },
-    // Tab-specific props
-    tab: { type: Boolean, default: !1 },
-    target: { type: String, default: void 0 }
+    items: { type: Array, required: !0 }
   },
-  emits: ["click", "component-error"],
-  setup(e, { emit: d }) {
-    const t = e, i = d, a = c(() => t.tab && !t.href && !t.to ? "button" : t.href ? "a" : t.to ? "router-link" : "a"), n = c(() => {
-      const s = ["nav-link"];
-      return t.active && s.push("active"), t.disabled && s.push("disabled"), s.join(" ");
-    }), r = (s) => {
-      t.disabled || i("click", s);
+  emits: ["item-click", "component-error"],
+  setup(e, { emit: f }) {
+    const t = f, a = (l, o, s) => {
+      l.active || t("item-click", { item: l, index: o, event: s });
     };
-    return (s, y) => (l(), o("li", {
-      class: "nav-item",
-      role: e.tab ? "presentation" : void 0
-    }, [
-      (l(), V(T(a.value), {
-        class: h(n.value),
-        href: e.href,
-        to: e.to,
-        type: a.value === "button" ? "button" : void 0,
-        "data-bs-toggle": e.tab ? "tab" : void 0,
-        "data-bs-target": e.tab && e.target ? e.target : void 0,
-        role: e.tab ? "tab" : void 0,
-        "aria-current": e.active ? "page" : void 0,
-        "aria-disabled": e.disabled,
-        "aria-selected": e.tab ? e.active : void 0,
-        onClick: r
-      }, {
-        default: x(() => [
-          $(s.$slots, "default")
-        ]),
-        _: 3
-      }, 8, ["class", "href", "to", "type", "data-bs-toggle", "data-bs-target", "role", "aria-current", "aria-disabled", "aria-selected"]))
-    ], 8, Oe));
+    return (l, o) => (i(), n("nav", { "aria-label": e.ariaLabel }, [
+      h("ol", qe, [
+        (i(!0), n(F, null, z(e.items, (s, u) => (i(), n("li", {
+          key: u,
+          class: g(["breadcrumb-item", { active: s.active }]),
+          "aria-current": s.active ? "page" : void 0
+        }, [
+          (i(), M(q(s.href ? "a" : s.to ? "router-link" : "span"), {
+            href: s.href,
+            to: s.to,
+            onClick: (d) => a(s, u, d)
+          }, {
+            default: P(() => [
+              V(l.$slots, "item", {
+                item: s,
+                index: u
+              }, () => [
+                w(b(s.text), 1)
+              ])
+            ]),
+            _: 2
+          }, 1032, ["href", "to", "onClick"]))
+        ], 10, Pe))), 128))
+      ])
+    ], 8, Me));
   }
-}), De = /* @__PURE__ */ p({
+}), Le = /* @__PURE__ */ C({
   __name: "VibeNav",
   props: {
     tabs: { type: Boolean, default: !1 },
@@ -591,35 +456,51 @@ const $e = /* @__PURE__ */ p({
     justified: { type: Boolean, default: !1 },
     vertical: { type: Boolean, default: !1 },
     tag: { type: String, default: "ul" },
-    items: { type: Array, default: void 0 }
+    items: { type: Array, required: !0 }
   },
-  emits: ["component-error"],
-  setup(e, { emit: d }) {
-    const t = e, i = D(), a = c(() => {
-      const n = ["nav"];
-      return t.tabs && n.push("nav-tabs"), t.pills && n.push("nav-pills"), t.fill && n.push("nav-fill"), t.justified && n.push("nav-justified"), t.vertical && n.push("flex-column"), n.join(" ");
-    });
-    return (n, r) => (l(), V(T(e.tag), {
-      class: h(a.value)
+  emits: ["item-click", "component-error"],
+  setup(e, { emit: f }) {
+    const t = e, a = f, l = y(() => {
+      const d = ["nav"];
+      return t.tabs && d.push("nav-tabs"), t.pills && d.push("nav-pills"), t.fill && d.push("nav-fill"), t.justified && d.push("nav-justified"), t.vertical && d.push("flex-column"), d.join(" ");
+    }), o = (d) => {
+      const r = ["nav-link"];
+      return d.active && r.push("active"), d.disabled && r.push("disabled"), r.join(" ");
+    }, s = (d) => d.href ? "a" : d.to ? "router-link" : "a", u = (d, r, c) => {
+      d.disabled || a("item-click", { item: d, index: r, event: c });
+    };
+    return (d, r) => (i(), M(q(e.tag), {
+      class: g(l.value)
     }, {
-      default: x(() => [
-        e.items && e.items.length > 0 && !L(i).default ? (l(!0), o(q, { key: 0 }, I(e.items, (s, y) => (l(), V(Q, {
-          key: y,
-          href: s.href,
-          to: s.to,
-          active: s.active,
-          disabled: s.disabled
-        }, {
-          default: x(() => [
-            N(f(s.text), 1)
-          ]),
-          _: 2
-        }, 1032, ["href", "to", "active", "disabled"]))), 128)) : $(n.$slots, "default", { key: 1 })
+      default: P(() => [
+        (i(!0), n(F, null, z(e.items, (c, m) => (i(), n("li", {
+          key: m,
+          class: "nav-item"
+        }, [
+          (i(), M(q(s(c)), {
+            class: g(o(c)),
+            href: c.href,
+            to: c.to,
+            "aria-current": c.active ? "page" : void 0,
+            "aria-disabled": c.disabled,
+            onClick: (p) => u(c, m, p)
+          }, {
+            default: P(() => [
+              V(d.$slots, "item", {
+                item: c,
+                index: m
+              }, () => [
+                w(b(c.text), 1)
+              ])
+            ]),
+            _: 2
+          }, 1032, ["class", "href", "to", "aria-current", "aria-disabled", "onClick"]))
+        ]))), 128))
       ]),
       _: 3
     }, 8, ["class"]));
   }
-}), Xe = /* @__PURE__ */ p({
+}), ze = /* @__PURE__ */ C({
   __name: "VibeNavbar",
   props: {
     variant: { type: String, default: "light" },
@@ -629,57 +510,57 @@ const $e = /* @__PURE__ */ p({
     tag: { type: String, default: "nav" }
   },
   emits: ["component-error"],
-  setup(e, { emit: d }) {
-    const t = e, i = c(() => {
-      const n = ["navbar"];
-      return t.expand === !0 ? n.push("navbar-expand") : typeof t.expand == "string" && n.push(`navbar-expand-${t.expand}`), t.variant === "dark" || t.variant === "light" ? n.push(`navbar-${t.variant}`) : n.push(`bg-${t.variant}`), t.position && n.push(t.position), n.join(" ");
-    }), a = c(() => {
+  setup(e, { emit: f }) {
+    const t = e, a = y(() => {
+      const o = ["navbar"];
+      return t.expand === !0 ? o.push("navbar-expand") : typeof t.expand == "string" && o.push(`navbar-expand-${t.expand}`), t.variant === "dark" || t.variant === "light" ? o.push(`navbar-${t.variant}`) : o.push(`bg-${t.variant}`), t.position && o.push(t.position), o.join(" ");
+    }), l = y(() => {
       if (t.container !== !1)
         return t.container === !0 ? "container-fluid" : `container-${t.container}`;
     });
-    return (n, r) => (l(), V(T(e.tag), {
-      class: h(i.value)
+    return (o, s) => (i(), M(q(e.tag), {
+      class: g(a.value)
     }, {
-      default: x(() => [
-        a.value ? (l(), o("div", {
+      default: P(() => [
+        l.value ? (i(), n("div", {
           key: 0,
-          class: h(a.value)
+          class: g(l.value)
         }, [
-          $(n.$slots, "default")
-        ], 2)) : $(n.$slots, "default", { key: 1 })
+          V(o.$slots, "default")
+        ], 2)) : V(o.$slots, "default", { key: 1 })
       ]),
       _: 3
     }, 8, ["class"]));
   }
-}), Re = /* @__PURE__ */ p({
+}), Ae = /* @__PURE__ */ C({
   __name: "VibeNavbarBrand",
   props: {
     href: { type: String, default: void 0 },
     to: { type: [String, Object], default: void 0 }
   },
   emits: ["component-error"],
-  setup(e, { emit: d }) {
-    const t = e, i = t.href ? "a" : t.to ? "router-link" : "span";
-    return (a, n) => (l(), V(T(L(i)), {
+  setup(e, { emit: f }) {
+    const t = e, a = t.href ? "a" : t.to ? "router-link" : "span";
+    return (l, o) => (i(), M(q(se(a)), {
       class: "navbar-brand",
       href: e.href,
       to: e.to
     }, {
-      default: x(() => [
-        $(a.$slots, "default")
+      default: P(() => [
+        V(l.$slots, "default")
       ]),
       _: 3
     }, 8, ["href", "to"]));
   }
-}), Ge = ["data-bs-target", "aria-controls", "aria-label"], Ee = /* @__PURE__ */ p({
+}), je = ["data-bs-target", "aria-controls", "aria-label"], Ie = /* @__PURE__ */ C({
   __name: "VibeNavbarToggle",
   props: {
     target: { type: String, required: !0 },
     ariaLabel: { type: String, default: "Toggle navigation" }
   },
   emits: ["component-error"],
-  setup(e, { emit: d }) {
-    return (t, i) => (l(), o("button", {
+  setup(e, { emit: f }) {
+    return (t, a) => (i(), n("button", {
       class: "navbar-toggler",
       type: "button",
       "data-bs-toggle": "collapse",
@@ -687,353 +568,310 @@ const $e = /* @__PURE__ */ p({
       "aria-controls": e.target,
       "aria-expanded": "false",
       "aria-label": e.ariaLabel
-    }, [...i[0] || (i[0] = [
-      m("span", { class: "navbar-toggler-icon" }, null, -1)
-    ])], 8, Ge));
+    }, [...a[0] || (a[0] = [
+      h("span", { class: "navbar-toggler-icon" }, null, -1)
+    ])], 8, je));
   }
-}), Ye = /* @__PURE__ */ p({
+}), Oe = /* @__PURE__ */ C({
   __name: "VibeNavbarNav",
   props: {
     tag: { type: String, default: "ul" },
     items: { type: Array, default: void 0 }
   },
-  emits: ["component-error"],
-  setup(e, { emit: d }) {
-    const t = D();
-    return (i, a) => (l(), V(T(e.tag), { class: "navbar-nav" }, {
-      default: x(() => [
-        e.items && e.items.length > 0 && !L(t).default ? (l(!0), o(q, { key: 0 }, I(e.items, (n, r) => (l(), V(Q, {
+  emits: ["item-click", "component-error"],
+  setup(e, { emit: f }) {
+    const t = f, a = (s) => {
+      const u = ["nav-link"];
+      return s.active && u.push("active"), s.disabled && u.push("disabled"), u.join(" ");
+    }, l = (s) => s.href ? "a" : s.to ? "router-link" : "a", o = (s, u, d) => {
+      s.disabled || t("item-click", { item: s, index: u, event: d });
+    };
+    return (s, u) => (i(), M(q(e.tag), { class: "navbar-nav" }, {
+      default: P(() => [
+        e.items && e.items.length > 0 ? (i(!0), n(F, { key: 0 }, z(e.items, (d, r) => (i(), n("li", {
           key: r,
-          href: n.href,
-          to: n.to,
-          active: n.active,
-          disabled: n.disabled
-        }, {
-          default: x(() => [
-            N(f(n.text), 1)
-          ]),
-          _: 2
-        }, 1032, ["href", "to", "active", "disabled"]))), 128)) : $(i.$slots, "default", { key: 1 })
+          class: "nav-item"
+        }, [
+          (i(), M(q(l(d)), {
+            class: g(a(d)),
+            href: d.href,
+            to: d.to,
+            "aria-current": d.active ? "page" : void 0,
+            "aria-disabled": d.disabled,
+            onClick: (c) => o(d, r, c)
+          }, {
+            default: P(() => [
+              V(s.$slots, "item", {
+                item: d,
+                index: r
+              }, () => [
+                w(b(d.text), 1)
+              ])
+            ]),
+            _: 2
+          }, 1032, ["class", "href", "to", "aria-current", "aria-disabled", "onClick"]))
+        ]))), 128)) : V(s.$slots, "default", { key: 1 })
       ]),
       _: 3
     }));
   }
-}), H = /* @__PURE__ */ p({
-  __name: "VibePaginationItem",
-  props: {
-    active: { type: Boolean, default: !1 },
-    disabled: { type: Boolean, default: !1 },
-    href: { type: String, default: void 0 },
-    to: { type: [String, Object], default: void 0 }
-  },
-  emits: ["click", "component-error"],
-  setup(e, { emit: d }) {
-    const t = e, i = d, a = c(() => t.href ? "a" : t.to ? "router-link" : "button"), n = (r) => {
-      t.disabled || i("click", r);
-    };
-    return (r, s) => (l(), o("li", {
-      class: h(["page-item", { active: e.active, disabled: e.disabled }])
-    }, [
-      (l(), V(T(a.value), {
-        class: "page-link",
-        href: e.href,
-        to: e.to,
-        type: a.value === "button" ? "button" : void 0,
-        disabled: e.disabled && a.value === "button",
-        "aria-current": e.active ? "page" : void 0,
-        "aria-disabled": e.disabled,
-        onClick: n
-      }, {
-        default: x(() => [
-          $(r.$slots, "default")
-        ]),
-        _: 3
-      }, 8, ["href", "to", "type", "disabled", "aria-current", "aria-disabled"]))
-    ], 2));
-  }
-}), He = ["aria-label"], Ue = /* @__PURE__ */ p({
+}), Ee = ["aria-label"], De = ["disabled", "aria-disabled"], Re = ["aria-current", "onClick"], Xe = ["disabled", "aria-disabled"], Ye = /* @__PURE__ */ C({
   __name: "VibePagination",
   props: {
     size: { type: String, default: void 0 },
     ariaLabel: { type: String, default: "Pagination" },
-    // Shorthand props
-    totalPages: { type: Number, default: void 0 },
+    totalPages: { type: Number, required: !0 },
     currentPage: { type: Number, default: 1 },
-    showPrevNext: { type: Boolean, default: !0 }
+    showPrevNext: { type: Boolean, default: !0 },
+    prevText: { type: String, default: "Previous" },
+    nextText: { type: String, default: "Next" }
   },
-  emits: ["page-click", "component-error"],
-  setup(e, { emit: d }) {
-    const t = e, i = d, a = D(), n = c(() => {
-      const y = ["pagination"];
-      return t.size && y.push(`pagination-${t.size}`), y.join(" ");
-    }), r = c(() => t.totalPages ? Array.from({ length: t.totalPages }, (y, v) => v + 1) : []), s = (y) => {
-      y >= 1 && y <= t.totalPages && i("page-click", y);
-    };
-    return (y, v) => (l(), o("nav", { "aria-label": e.ariaLabel }, [
-      m("ul", {
-        class: h(n.value)
+  emits: ["update:currentPage", "page-click", "component-error"],
+  setup(e, { emit: f }) {
+    const t = e, a = f, l = y(() => {
+      const r = ["pagination"];
+      return t.size && r.push(`pagination-${t.size}`), r.join(" ");
+    }), o = y(() => Array.from({ length: t.totalPages }, (r, c) => c + 1)), s = (r) => {
+      r >= 1 && r <= t.totalPages && (a("update:currentPage", r), a("page-click", r));
+    }, u = y(() => t.currentPage === 1), d = y(() => t.currentPage === t.totalPages);
+    return (r, c) => (i(), n("nav", { "aria-label": e.ariaLabel }, [
+      h("ul", {
+        class: g(l.value)
       }, [
-        e.totalPages && !L(a).default ? (l(), o(q, { key: 0 }, [
-          e.showPrevNext ? (l(), V(H, {
-            key: 0,
-            disabled: e.currentPage === 1,
-            onClick: v[0] || (v[0] = (b) => s(e.currentPage - 1))
-          }, {
-            default: x(() => [...v[2] || (v[2] = [
-              N(" Previous ", -1)
-            ])]),
-            _: 1
-          }, 8, ["disabled"])) : u("", !0),
-          (l(!0), o(q, null, I(r.value, (b) => (l(), V(H, {
-            key: b,
-            active: b === e.currentPage,
-            onClick: (g) => s(b)
-          }, {
-            default: x(() => [
-              N(f(b), 1)
-            ]),
-            _: 2
-          }, 1032, ["active", "onClick"]))), 128)),
-          e.showPrevNext ? (l(), V(H, {
-            key: 1,
-            disabled: e.currentPage === e.totalPages,
-            onClick: v[1] || (v[1] = (b) => s(e.currentPage + 1))
-          }, {
-            default: x(() => [...v[3] || (v[3] = [
-              N(" Next ", -1)
-            ])]),
-            _: 1
-          }, 8, ["disabled"])) : u("", !0)
-        ], 64)) : $(y.$slots, "default", { key: 1 })
+        e.showPrevNext ? (i(), n("li", {
+          key: 0,
+          class: g(["page-item", { disabled: u.value }])
+        }, [
+          h("button", {
+            class: "page-link",
+            type: "button",
+            disabled: u.value,
+            "aria-disabled": u.value,
+            onClick: c[0] || (c[0] = (m) => s(e.currentPage - 1))
+          }, [
+            V(r.$slots, "prev", { disabled: u.value }, () => [
+              w(b(e.prevText), 1)
+            ])
+          ], 8, De)
+        ], 2)) : v("", !0),
+        (i(!0), n(F, null, z(o.value, (m) => (i(), n("li", {
+          key: m,
+          class: g(["page-item", { active: m === e.currentPage }])
+        }, [
+          h("button", {
+            class: "page-link",
+            type: "button",
+            "aria-current": m === e.currentPage ? "page" : void 0,
+            onClick: (p) => s(m)
+          }, [
+            V(r.$slots, "page", {
+              page: m,
+              active: m === e.currentPage
+            }, () => [
+              w(b(m), 1)
+            ])
+          ], 8, Re)
+        ], 2))), 128)),
+        e.showPrevNext ? (i(), n("li", {
+          key: 1,
+          class: g(["page-item", { disabled: d.value }])
+        }, [
+          h("button", {
+            class: "page-link",
+            type: "button",
+            disabled: d.value,
+            "aria-disabled": d.value,
+            onClick: c[1] || (c[1] = (m) => s(e.currentPage + 1))
+          }, [
+            V(r.$slots, "next", { disabled: d.value }, () => [
+              w(b(e.nextText), 1)
+            ])
+          ], 8, Xe)
+        ], 2)) : v("", !0)
       ], 2)
-    ], 8, He));
+    ], 8, Ee));
   }
-}), Qe = /* @__PURE__ */ p({
+}), Ge = ["id", "aria-labelledby"], He = /* @__PURE__ */ C({
   __name: "VibeTabContent",
   props: {
     id: { type: String, default: void 0 },
-    tag: { type: String, default: "div" }
+    tag: { type: String, default: "div" },
+    panes: { type: Array, required: !0 },
+    fade: { type: Boolean, default: !0 }
   },
   emits: ["component-error"],
-  setup(e, { emit: d }) {
-    return (t, i) => (l(), V(T(e.tag), {
+  setup(e, { emit: f }) {
+    const t = e, a = (l) => {
+      const o = ["tab-pane"];
+      return t.fade && o.push("fade"), l.active && o.push("show", "active"), o.join(" ");
+    };
+    return (l, o) => (i(), M(q(e.tag), {
       id: e.id,
       class: "tab-content"
     }, {
-      default: x(() => [
-        $(t.$slots, "default")
+      default: P(() => [
+        (i(!0), n(F, null, z(e.panes, (s, u) => (i(), n("div", {
+          key: s.id,
+          id: s.id,
+          class: g(a(s)),
+          role: "tabpanel",
+          "aria-labelledby": `${s.id}-tab`,
+          tabindex: "0"
+        }, [
+          V(l.$slots, "pane", {
+            pane: s,
+            index: u
+          }, () => [
+            w(b(s.content), 1)
+          ])
+        ], 10, Ge))), 128))
       ]),
       _: 3
     }, 8, ["id"]));
   }
-}), Ke = /* @__PURE__ */ p({
-  __name: "VibeTabPane",
-  props: {
-    id: { type: String, required: !0 },
-    active: { type: Boolean, default: !1 },
-    fade: { type: Boolean, default: !0 },
-    tag: { type: String, default: "div" },
-    ariaLabelledby: { type: String, default: void 0 }
-  },
-  emits: ["component-error"],
-  setup(e, { emit: d }) {
-    const t = e, i = c(() => {
-      const a = ["tab-pane"];
-      return t.fade && a.push("fade"), t.active && a.push("show", "active"), a.join(" ");
-    });
-    return (a, n) => (l(), V(T(e.tag), {
-      id: e.id,
-      class: h(i.value),
-      role: "tabpanel",
-      "aria-labelledby": e.ariaLabelledby,
-      tabindex: "0"
-    }, {
-      default: x(() => [
-        $(a.$slots, "default")
-      ]),
-      _: 3
-    }, 8, ["id", "class", "aria-labelledby"]));
-  }
-}), le = /* @__PURE__ */ p({
-  __name: "VibeListGroupItem",
-  props: {
-    active: { type: Boolean, default: !1 },
-    disabled: { type: Boolean, default: !1 },
-    variant: { type: String, default: void 0 },
-    href: { type: String, default: void 0 },
-    to: { type: [String, Object], default: void 0 },
-    tag: { type: String, default: "li" },
-    action: { type: Boolean, default: !1 }
-  },
-  emits: ["click", "component-error"],
-  setup(e, { emit: d }) {
-    const t = e, i = d, a = c(() => t.href ? "a" : t.to ? "router-link" : t.action ? "button" : t.tag), n = c(() => {
-      const s = ["list-group-item"];
-      return t.active && s.push("active"), t.disabled && s.push("disabled"), t.variant && s.push(`list-group-item-${t.variant}`), (t.action || t.href || t.to) && s.push("list-group-item-action"), s.join(" ");
-    }), r = (s) => {
-      t.disabled || i("click", s);
-    };
-    return (s, y) => (l(), V(T(a.value), {
-      class: h(n.value),
-      href: e.href,
-      to: e.to,
-      type: a.value === "button" ? "button" : void 0,
-      disabled: e.disabled,
-      "aria-disabled": e.disabled,
-      "aria-current": e.active ? "true" : void 0,
-      onClick: r
-    }, {
-      default: x(() => [
-        $(s.$slots, "default")
-      ]),
-      _: 3
-    }, 8, ["class", "href", "to", "type", "disabled", "aria-disabled", "aria-current"]));
-  }
-}), We = /* @__PURE__ */ p({
+}), Ke = /* @__PURE__ */ C({
   __name: "VibeListGroup",
   props: {
     flush: { type: Boolean, default: !1 },
     horizontal: { type: [Boolean, String], default: !1 },
     numbered: { type: Boolean, default: !1 },
     tag: { type: String, default: "ul" },
-    items: { type: Array, default: void 0 }
+    items: { type: Array, required: !0 }
   },
-  emits: ["component-error"],
-  setup(e, { emit: d }) {
-    const t = e, i = D(), a = c(() => {
-      const n = ["list-group"];
-      return t.flush && n.push("list-group-flush"), t.numbered && n.push("list-group-numbered"), t.horizontal === !0 ? n.push("list-group-horizontal") : typeof t.horizontal == "string" && n.push(`list-group-horizontal-${t.horizontal}`), n.join(" ");
-    });
-    return (n, r) => (l(), V(T(e.tag), {
-      class: h(a.value)
+  emits: ["item-click", "component-error"],
+  setup(e, { emit: f }) {
+    const t = e, a = f, l = y(() => {
+      const d = ["list-group"];
+      return t.flush && d.push("list-group-flush"), t.numbered && d.push("list-group-numbered"), t.horizontal === !0 ? d.push("list-group-horizontal") : typeof t.horizontal == "string" && d.push(`list-group-horizontal-${t.horizontal}`), d.join(" ");
+    }), o = (d) => d.href ? "a" : d.to ? "router-link" : "li", s = (d) => {
+      const r = ["list-group-item"];
+      return d.active && r.push("active"), d.disabled && r.push("disabled"), d.variant && r.push(`list-group-item-${d.variant}`), r.join(" ");
+    }, u = (d, r, c) => {
+      d.disabled || a("item-click", { item: d, index: r, event: c });
+    };
+    return (d, r) => (i(), M(q(e.tag), {
+      class: g(l.value)
     }, {
-      default: x(() => [
-        e.items && e.items.length > 0 && !L(i).default ? (l(!0), o(q, { key: 0 }, I(e.items, (s, y) => (l(), V(le, {
-          key: y,
-          href: s.href,
-          to: s.to,
-          active: s.active,
-          disabled: s.disabled,
-          variant: s.variant
+      default: P(() => [
+        (i(!0), n(F, null, z(e.items, (c, m) => (i(), M(q(o(c)), {
+          key: m,
+          class: g(s(c)),
+          href: c.href,
+          to: c.to,
+          "aria-disabled": c.disabled,
+          "aria-current": c.active,
+          onClick: (p) => u(c, m, p)
         }, {
-          default: x(() => [
-            N(f(s.text), 1)
+          default: P(() => [
+            V(d.$slots, "item", {
+              item: c,
+              index: m
+            }, () => [
+              w(b(c.text), 1)
+            ])
           ]),
           _: 2
-        }, 1032, ["href", "to", "active", "disabled", "variant"]))), 128)) : $(n.$slots, "default", { key: 1 })
+        }, 1032, ["class", "href", "to", "aria-disabled", "aria-current", "onClick"]))), 128))
       ]),
       _: 3
     }, 8, ["class"]));
   }
-}), Je = /* @__PURE__ */ p({
+}), Ue = ["aria-valuenow", "aria-valuemax"], Qe = /* @__PURE__ */ C({
   __name: "VibeProgress",
   props: {
-    height: { type: String, default: void 0 }
+    height: { type: String, default: void 0 },
+    bars: { type: Array, required: !0 }
   },
   emits: ["component-error"],
-  setup(e, { emit: d }) {
-    const t = e, i = c(() => {
+  setup(e, { emit: f }) {
+    const t = e, a = y(() => {
       if (t.height)
         return { height: t.height };
-    });
-    return (a, n) => (l(), o("div", {
+    }), l = (u) => {
+      const d = ["progress-bar"];
+      return u.variant && d.push(`bg-${u.variant}`), (u.striped || u.animated) && d.push("progress-bar-striped"), u.animated && d.push("progress-bar-animated"), d.join(" ");
+    }, o = (u) => {
+      const d = u.max || 100;
+      return { width: `${Math.min(100, Math.max(0, u.value / d * 100))}%` };
+    }, s = (u) => u.label ? u.label : u.showValue ? `${u.value}%` : "";
+    return (u, d) => (i(), n("div", {
       class: "progress",
-      style: R(i.value)
+      style: D(a.value)
     }, [
-      $(a.$slots, "default")
-    ], 4));
-  }
-}), Ze = ["aria-valuenow", "aria-valuemax"], _e = /* @__PURE__ */ p({
-  __name: "VibeProgressBar",
-  props: {
-    value: { type: Number, default: 0 },
-    max: { type: Number, default: 100 },
-    variant: { type: String, default: void 0 },
-    striped: { type: Boolean, default: !1 },
-    animated: { type: Boolean, default: !1 },
-    label: { type: String, default: void 0 },
-    showValue: { type: Boolean, default: !1 }
-  },
-  emits: ["component-error"],
-  setup(e, { emit: d }) {
-    const t = e, i = c(() => {
-      const r = ["progress-bar"];
-      return t.variant && r.push(`bg-${t.variant}`), (t.striped || t.animated) && r.push("progress-bar-striped"), t.animated && r.push("progress-bar-animated"), r.join(" ");
-    }), a = c(() => ({ width: `${Math.min(100, Math.max(0, t.value / t.max * 100))}%` })), n = c(() => t.label ? t.label : t.showValue ? `${t.value}%` : "");
-    return (r, s) => (l(), o("div", {
-      class: h(i.value),
-      style: R(a.value),
-      role: "progressbar",
-      "aria-valuenow": e.value,
-      "aria-valuemin": 0,
-      "aria-valuemax": e.max
-    }, [
-      N(f(n.value) + " ", 1),
-      $(r.$slots, "default")
-    ], 14, Ze));
-  }
-}), et = { class: "accordion-item" }, tt = { class: "accordion-header" }, at = ["data-bs-target", "aria-expanded", "aria-controls"], lt = ["id", "data-bs-parent"], it = { class: "accordion-body" }, ie = /* @__PURE__ */ p({
-  __name: "VibeAccordionItem",
-  props: {
-    id: { type: String, required: !0 },
-    title: { type: String, required: !0 },
-    parentId: { type: String, required: !0 },
-    show: { type: Boolean, default: !1 }
-  },
-  emits: ["component-error"],
-  setup(e, { emit: d }) {
-    const t = e, i = c(() => t.show ? "accordion-collapse collapse show" : "accordion-collapse collapse");
-    return (a, n) => (l(), o("div", et, [
-      m("h2", tt, [
-        m("button", {
-          class: h(["accordion-button", { collapsed: !e.show }]),
-          type: "button",
-          "data-bs-toggle": "collapse",
-          "data-bs-target": `#${e.id}`,
-          "aria-expanded": e.show,
-          "aria-controls": e.id
-        }, f(e.title), 11, at)
-      ]),
-      m("div", {
-        id: e.id,
-        class: h(i.value),
-        "data-bs-parent": `#${e.parentId}`
+      (i(!0), n(F, null, z(e.bars, (r, c) => (i(), n("div", {
+        key: c,
+        class: g(l(r)),
+        style: D(o(r)),
+        role: "progressbar",
+        "aria-valuenow": r.value,
+        "aria-valuemin": 0,
+        "aria-valuemax": r.max || 100
       }, [
-        m("div", it, [
-          $(a.$slots, "default")
+        V(u.$slots, "label", {
+          bar: r,
+          index: c
+        }, () => [
+          w(b(s(r)), 1)
         ])
-      ], 10, lt)
-    ]));
+      ], 14, Ue))), 128))
+    ], 4));
   }
-}), nt = ["id"], ot = /* @__PURE__ */ p({
+}), We = ["id"], Je = { class: "accordion-header" }, Ze = ["data-bs-target", "aria-expanded", "aria-controls", "onClick"], _e = ["id", "data-bs-parent"], et = { class: "accordion-body" }, tt = /* @__PURE__ */ C({
   __name: "VibeAccordion",
   props: {
     id: { type: String, required: !0 },
     flush: { type: Boolean, default: !1 },
-    items: { type: Array, default: void 0 }
+    items: { type: Array, required: !0 }
   },
-  emits: ["component-error"],
-  setup(e, { emit: d }) {
-    const t = D();
-    return (i, a) => (l(), o("div", {
+  emits: ["item-click", "component-error"],
+  setup(e, { emit: f }) {
+    const t = f, a = (l, o) => {
+      t("item-click", { item: l, index: o });
+    };
+    return (l, o) => (i(), n("div", {
       id: e.id,
-      class: h(["accordion", { "accordion-flush": e.flush }])
+      class: g(["accordion", { "accordion-flush": e.flush }])
     }, [
-      e.items && e.items.length > 0 && !L(t).default ? (l(!0), o(q, { key: 0 }, I(e.items, (n, r) => (l(), V(ie, {
-        key: r,
-        id: n.id,
-        "parent-id": e.id,
-        title: n.title,
-        show: n.show
-      }, {
-        default: x(() => [
-          N(f(n.content), 1)
+      (i(!0), n(F, null, z(e.items, (s, u) => (i(), n("div", {
+        key: s.id,
+        class: "accordion-item"
+      }, [
+        h("h2", Je, [
+          h("button", {
+            class: g(["accordion-button", { collapsed: !s.show }]),
+            type: "button",
+            "data-bs-toggle": "collapse",
+            "data-bs-target": `#${s.id}`,
+            "aria-expanded": s.show,
+            "aria-controls": s.id,
+            onClick: (d) => a(s, u)
+          }, [
+            V(l.$slots, "title", {
+              item: s,
+              index: u
+            }, () => [
+              w(b(s.title), 1)
+            ])
+          ], 10, Ze)
         ]),
-        _: 2
-      }, 1032, ["id", "parent-id", "title", "show"]))), 128)) : $(i.$slots, "default", { key: 1 })
-    ], 10, nt));
+        h("div", {
+          id: s.id,
+          class: g(["accordion-collapse", "collapse", { show: s.show }]),
+          "data-bs-parent": `#${e.id}`
+        }, [
+          h("div", et, [
+            V(l.$slots, "content", {
+              item: s,
+              index: u
+            }, () => [
+              w(b(s.content), 1)
+            ])
+          ])
+        ], 10, _e)
+      ]))), 128))
+    ], 10, We));
   }
-}), st = /* @__PURE__ */ p({
+}), at = /* @__PURE__ */ C({
   __name: "VibeCollapse",
   props: {
     id: { type: String, required: !0 },
@@ -1042,70 +880,26 @@ const $e = /* @__PURE__ */ p({
     horizontal: { type: Boolean, default: !1 }
   },
   emits: ["update:modelValue", "show", "shown", "hide", "hidden", "component-error"],
-  setup(e, { emit: d }) {
-    const t = e, i = F(t.modelValue);
-    O(() => t.modelValue, (n) => {
-      i.value = n;
+  setup(e, { emit: f }) {
+    const t = e, a = T(t.modelValue);
+    E(() => t.modelValue, (o) => {
+      a.value = o;
     });
-    const a = c(() => {
-      const n = ["collapse"];
-      return t.horizontal && n.push("collapse-horizontal"), i.value && n.push("show"), n.join(" ");
+    const l = y(() => {
+      const o = ["collapse"];
+      return t.horizontal && o.push("collapse-horizontal"), a.value && o.push("show"), o.join(" ");
     });
-    return (n, r) => (l(), V(T(e.tag), {
+    return (o, s) => (i(), M(q(e.tag), {
       id: e.id,
-      class: h(a.value)
+      class: g(l.value)
     }, {
-      default: x(() => [
-        $(n.$slots, "default")
+      default: P(() => [
+        V(o.$slots, "default")
       ]),
       _: 3
     }, 8, ["id", "class"]));
   }
-}), dt = { key: 0 }, ne = /* @__PURE__ */ p({
-  __name: "VibeDropdownItem",
-  props: {
-    active: { type: Boolean, default: !1 },
-    disabled: { type: Boolean, default: !1 },
-    href: { type: String, default: void 0 },
-    to: { type: [String, Object], default: void 0 },
-    divider: { type: Boolean, default: !1 },
-    header: { type: Boolean, default: !1 }
-  },
-  emits: ["click", "component-error"],
-  setup(e, { emit: d }) {
-    const t = e, i = d, a = c(() => t.divider ? "hr" : t.header ? "h6" : t.href ? "a" : t.to ? "router-link" : "button"), n = c(() => {
-      if (t.divider) return "dropdown-divider";
-      if (t.header) return "dropdown-header";
-      const s = ["dropdown-item"];
-      return t.active && s.push("active"), t.disabled && s.push("disabled"), s.join(" ");
-    }), r = (s) => {
-      !t.disabled && !t.divider && !t.header && i("click", s);
-    };
-    return (s, y) => !e.divider && !e.header ? (l(), o("li", dt, [
-      (l(), V(T(a.value), {
-        class: h(n.value),
-        href: e.href,
-        to: e.to,
-        type: a.value === "button" ? "button" : void 0,
-        disabled: e.disabled,
-        onClick: r
-      }, {
-        default: x(() => [
-          $(s.$slots, "default")
-        ]),
-        _: 3
-      }, 8, ["class", "href", "to", "type", "disabled"]))
-    ])) : (l(), V(T(a.value), {
-      key: 1,
-      class: h(n.value)
-    }, {
-      default: x(() => [
-        $(s.$slots, "default")
-      ]),
-      _: 3
-    }, 8, ["class"]));
-  }
-}), rt = ["id"], ut = ["aria-labelledby"], ct = /* @__PURE__ */ p({
+}), lt = ["id"], it = ["aria-labelledby"], nt = { key: 0 }, st = { key: 1 }, ot = { class: "dropdown-header" }, dt = { key: 2 }, rt = /* @__PURE__ */ C({
   __name: "VibeDropdown",
   props: {
     id: { type: String, required: !0 },
@@ -1115,55 +909,83 @@ const $e = /* @__PURE__ */ p({
     split: { type: Boolean, default: !1 },
     direction: { type: String, default: "down" },
     menuEnd: { type: Boolean, default: !1 },
-    items: { type: Array, default: void 0 }
+    items: { type: Array, required: !0 }
   },
-  emits: ["component-error"],
-  setup(e, { emit: d }) {
-    const t = e, i = D(), a = c(() => t.direction === "up" ? "dropup" : t.direction === "end" ? "dropend" : t.direction === "start" ? "dropstart" : "dropdown"), n = c(() => {
-      const s = ["btn", `btn-${t.variant}`];
-      return t.size && s.push(`btn-${t.size}`), s.join(" ");
-    }), r = c(() => {
-      const s = ["dropdown-menu"];
-      return t.menuEnd && s.push("dropdown-menu-end"), s.join(" ");
-    });
-    return (s, y) => (l(), o("div", {
-      class: h(a.value)
+  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"), o = y(() => {
+      const r = ["btn", `btn-${t.variant}`];
+      return t.size && r.push(`btn-${t.size}`), r.join(" ");
+    }), s = y(() => {
+      const r = ["dropdown-menu"];
+      return t.menuEnd && r.push("dropdown-menu-end"), r.join(" ");
+    }), u = (r) => {
+      const c = ["dropdown-item"];
+      return r.active && c.push("active"), r.disabled && c.push("disabled"), c.join(" ");
+    }, d = (r, c, m) => {
+      !r.disabled && !r.divider && !r.header && a("item-click", { item: r, index: c, event: m });
+    };
+    return (r, c) => (i(), n("div", {
+      class: g(l.value)
     }, [
-      m("button", {
+      h("button", {
         id: e.id,
-        class: h([n.value, "dropdown-toggle"]),
+        class: g([o.value, "dropdown-toggle"]),
         type: "button",
         "data-bs-toggle": "dropdown",
         "aria-expanded": "false"
-      }, f(e.text), 11, rt),
-      m("ul", {
-        class: h(r.value),
+      }, [
+        V(r.$slots, "button", {}, () => [
+          w(b(e.text), 1)
+        ])
+      ], 10, lt),
+      h("ul", {
+        class: g(s.value),
         "aria-labelledby": e.id
       }, [
-        e.items && e.items.length > 0 && !L(i).default ? (l(!0), o(q, { key: 0 }, I(e.items, (v, b) => (l(), V(ne, {
-          key: b,
-          href: v.href,
-          to: v.to,
-          active: v.active,
-          disabled: v.disabled,
-          divider: v.divider,
-          header: v.header
-        }, {
-          default: x(() => [
-            N(f(v.text), 1)
-          ]),
-          _: 2
-        }, 1032, ["href", "to", "active", "disabled", "divider", "header"]))), 128)) : $(s.$slots, "default", { key: 1 })
-      ], 10, ut)
+        (i(!0), n(F, null, z(e.items, (m, p) => (i(), n(F, { key: p }, [
+          m.divider ? (i(), n("li", nt, [...c[0] || (c[0] = [
+            h("hr", { class: "dropdown-divider" }, null, -1)
+          ])])) : m.header ? (i(), n("li", st, [
+            h("h6", ot, [
+              V(r.$slots, "header", {
+                item: m,
+                index: p
+              }, () => [
+                w(b(m.text), 1)
+              ])
+            ])
+          ])) : (i(), n("li", dt, [
+            (i(), M(q(m.href ? "a" : m.to ? "router-link" : "button"), {
+              class: g(u(m)),
+              href: m.href,
+              to: m.to,
+              type: !m.href && !m.to ? "button" : void 0,
+              disabled: m.disabled,
+              onClick: (B) => d(m, p, B)
+            }, {
+              default: P(() => [
+                V(r.$slots, "item", {
+                  item: m,
+                  index: p
+                }, () => [
+                  w(b(m.text), 1)
+                ])
+              ]),
+              _: 2
+            }, 1032, ["class", "href", "to", "type", "disabled", "onClick"]))
+          ]))
+        ], 64))), 128))
+      ], 10, it)
     ], 2));
   }
-}), ft = ["id", "aria-labelledby", "data-bs-backdrop", "data-bs-keyboard"], vt = { class: "modal-content" }, bt = {
+}), ut = ["id", "aria-labelledby", "aria-hidden", "data-bs-backdrop", "data-bs-keyboard"], ct = { class: "modal-content" }, ft = {
   key: 0,
   class: "modal-header"
-}, mt = ["id"], yt = { class: "modal-body" }, ht = {
+}, vt = ["id"], bt = { class: "modal-body" }, mt = {
   key: 1,
   class: "modal-footer"
-}, gt = /* @__PURE__ */ p({
+}, ht = /* @__PURE__ */ C({
   __name: "VibeModal",
   props: {
     id: { type: String, required: !0 },
@@ -1178,46 +1000,71 @@ const $e = /* @__PURE__ */ p({
     hideFooter: { type: Boolean, default: !1 }
   },
   emits: ["update:modelValue", "show", "shown", "hide", "hidden", "component-error"],
-  setup(e, { emit: d }) {
-    const t = e, i = c(() => {
-      const a = ["modal-dialog"];
-      return t.size && a.push(`modal-${t.size}`), t.centered && a.push("modal-dialog-centered"), t.scrollable && a.push("modal-dialog-scrollable"), t.fullscreen === !0 ? a.push("modal-fullscreen") : typeof t.fullscreen == "string" && a.push(`modal-fullscreen-${t.fullscreen}-down`), a.join(" ");
-    });
-    return (a, n) => (l(), o("div", {
+  setup(e, { emit: f }) {
+    const t = e, a = f, l = T(null), o = T(null), s = 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(" ");
+    }), d = () => {
+      s.value = !0, a("show");
+    }, r = () => {
+      a("shown"), a("update:modelValue", !0);
+    }, c = () => {
+      a("hide");
+    }, m = () => {
+      s.value = !1, a("hidden"), a("update:modelValue", !1);
+    };
+    return G(async () => {
+      if (l.value)
+        try {
+          const B = (await import("bootstrap")).Modal;
+          o.value = new B(l.value, {
+            backdrop: t.staticBackdrop ? "static" : !0,
+            keyboard: !t.staticBackdrop
+          }), l.value.addEventListener("show.bs.modal", d), l.value.addEventListener("shown.bs.modal", r), l.value.addEventListener("hide.bs.modal", c), l.value.addEventListener("hidden.bs.modal", m), t.modelValue && o.value.show();
+        } catch {
+          a("component-error", "Bootstrap JS not loaded. Modal will use data attributes only.");
+        }
+    }), H(() => {
+      l.value && (l.value.removeEventListener("show.bs.modal", d), l.value.removeEventListener("shown.bs.modal", r), l.value.removeEventListener("hide.bs.modal", c), l.value.removeEventListener("hidden.bs.modal", m)), o.value && (o.value.dispose(), o.value = null);
+    }), E(() => t.modelValue, (p) => {
+      o.value && (p && !s.value ? o.value.show() : !p && s.value && o.value.hide());
+    }), (p, B) => (i(), n("div", {
+      ref_key: "modalRef",
+      ref: l,
       id: e.id,
       class: "modal fade",
       tabindex: "-1",
       "aria-labelledby": `${e.id}-label`,
-      "aria-hidden": "true",
+      "aria-hidden": !s.value,
       "data-bs-backdrop": e.staticBackdrop ? "static" : void 0,
       "data-bs-keyboard": !e.staticBackdrop
     }, [
-      m("div", {
-        class: h(i.value)
+      h("div", {
+        class: g(u.value)
       }, [
-        m("div", vt, [
-          e.hideHeader ? u("", !0) : (l(), o("div", bt, [
-            m("h5", {
+        h("div", ct, [
+          e.hideHeader ? v("", !0) : (i(), n("div", ft, [
+            h("h5", {
               id: `${e.id}-label`,
               class: "modal-title"
             }, [
-              $(a.$slots, "header", {}, () => [
-                N(f(e.title), 1)
+              V(p.$slots, "header", {}, () => [
+                w(b(e.title), 1)
               ])
-            ], 8, mt),
-            n[0] || (n[0] = m("button", {
+            ], 8, vt),
+            B[0] || (B[0] = h("button", {
               type: "button",
               class: "btn-close",
               "data-bs-dismiss": "modal",
               "aria-label": "Close"
             }, null, -1))
           ])),
-          m("div", yt, [
-            $(a.$slots, "default")
+          h("div", bt, [
+            V(p.$slots, "default")
           ]),
-          e.hideFooter ? u("", !0) : (l(), o("div", ht, [
-            $(a.$slots, "footer", {}, () => [
-              n[1] || (n[1] = m("button", {
+          e.hideFooter ? v("", !0) : (i(), n("div", mt, [
+            V(p.$slots, "footer", {}, () => [
+              B[1] || (B[1] = h("button", {
                 type: "button",
                 class: "btn btn-secondary",
                 "data-bs-dismiss": "modal"
@@ -1226,9 +1073,9 @@ const $e = /* @__PURE__ */ p({
           ]))
         ])
       ], 2)
-    ], 8, ft));
+    ], 8, ut));
   }
-}), pt = ["id", "aria-labelledby", "data-bs-backdrop", "data-bs-scroll"], $t = { class: "offcanvas-header" }, kt = ["id"], St = { class: "offcanvas-body" }, Vt = /* @__PURE__ */ p({
+}), yt = ["id", "aria-labelledby", "data-bs-backdrop", "data-bs-scroll"], gt = { class: "offcanvas-header" }, pt = ["id"], $t = { class: "offcanvas-body" }, kt = /* @__PURE__ */ C({
   __name: "VibeOffcanvas",
   props: {
     id: { type: String, required: !0 },
@@ -1239,41 +1086,41 @@ const $e = /* @__PURE__ */ p({
     scroll: { type: Boolean, default: !1 }
   },
   emits: ["update:modelValue", "show", "shown", "hide", "hidden", "component-error"],
-  setup(e, { emit: d }) {
-    const t = e, i = c(() => `offcanvas offcanvas-${t.placement}`);
-    return (a, n) => (l(), o("div", {
+  setup(e, { emit: f }) {
+    const t = e, a = y(() => `offcanvas offcanvas-${t.placement}`);
+    return (l, o) => (i(), n("div", {
       id: e.id,
-      class: h(i.value),
+      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
     }, [
-      m("div", $t, [
-        m("h5", {
+      h("div", gt, [
+        h("h5", {
           id: `${e.id}-label`,
           class: "offcanvas-title"
         }, [
-          $(a.$slots, "header", {}, () => [
-            N(f(e.title), 1)
+          V(l.$slots, "header", {}, () => [
+            w(b(e.title), 1)
           ])
-        ], 8, kt),
-        n[0] || (n[0] = m("button", {
+        ], 8, pt),
+        o[0] || (o[0] = h("button", {
           type: "button",
           class: "btn-close",
           "data-bs-dismiss": "offcanvas",
           "aria-label": "Close"
         }, null, -1))
       ]),
-      m("div", St, [
-        $(a.$slots, "default")
+      h("div", $t, [
+        V(l.$slots, "default")
       ])
-    ], 10, pt));
+    ], 10, yt));
   }
-}), xt = ["id", "data-bs-autohide", "data-bs-delay"], Ct = {
+}), St = ["id", "data-bs-autohide", "data-bs-delay"], Vt = {
   key: 0,
   class: "toast-header"
-}, Bt = { class: "me-auto" }, wt = { class: "toast-body" }, Nt = /* @__PURE__ */ p({
+}, Ct = { class: "me-auto" }, xt = { class: "toast-body" }, wt = /* @__PURE__ */ C({
   __name: "VibeToast",
   props: {
     id: { type: String, default: void 0 },
@@ -1284,78 +1131,68 @@ const $e = /* @__PURE__ */ p({
     delay: { type: Number, default: 5e3 }
   },
   emits: ["update:modelValue", "show", "shown", "hide", "hidden", "component-error"],
-  setup(e, { emit: d }) {
-    const t = e, i = c(() => {
-      const a = ["toast"];
-      return t.variant && a.push(`text-bg-${t.variant}`), a.join(" ");
-    });
-    return (a, n) => (l(), o("div", {
+  setup(e, { emit: f }) {
+    const t = e, a = f, l = T(null), o = T(null), s = T(!1), u = y(() => {
+      const p = ["toast"];
+      return t.variant && p.push(`text-bg-${t.variant}`), p.join(" ");
+    }), d = () => {
+      s.value = !0, a("show");
+    }, r = () => {
+      a("shown"), a("update:modelValue", !0);
+    }, c = () => {
+      a("hide");
+    }, m = () => {
+      s.value = !1, a("hidden"), a("update:modelValue", !1);
+    };
+    return G(async () => {
+      if (l.value)
+        try {
+          const B = (await import("bootstrap")).Toast;
+          o.value = new B(l.value, {
+            autohide: t.autohide,
+            delay: t.delay
+          }), l.value.addEventListener("show.bs.toast", d), l.value.addEventListener("shown.bs.toast", r), l.value.addEventListener("hide.bs.toast", c), l.value.addEventListener("hidden.bs.toast", m), t.modelValue && o.value.show();
+        } catch {
+          a("component-error", "Bootstrap JS not loaded. Toast will use data attributes only.");
+        }
+    }), H(() => {
+      l.value && (l.value.removeEventListener("show.bs.toast", d), l.value.removeEventListener("shown.bs.toast", r), l.value.removeEventListener("hide.bs.toast", c), l.value.removeEventListener("hidden.bs.toast", m)), o.value && (o.value.dispose(), o.value = null);
+    }), E(() => t.modelValue, (p) => {
+      o.value && (p && !s.value ? o.value.show() : !p && s.value && o.value.hide());
+    }), (p, B) => (i(), n("div", {
+      ref_key: "toastRef",
+      ref: l,
       id: e.id,
-      class: h(i.value),
+      class: g(u.value),
       role: "alert",
       "aria-live": "assertive",
       "aria-atomic": "true",
       "data-bs-autohide": e.autohide,
       "data-bs-delay": e.delay
     }, [
-      e.title || a.$slots.header ? (l(), o("div", Ct, [
-        $(a.$slots, "header", {}, () => [
-          m("strong", Bt, f(e.title), 1)
+      e.title || p.$slots.header ? (i(), n("div", Vt, [
+        V(p.$slots, "header", {}, () => [
+          h("strong", Ct, b(e.title), 1)
         ]),
-        n[0] || (n[0] = m("button", {
+        B[0] || (B[0] = h("button", {
           type: "button",
           class: "btn-close",
           "data-bs-dismiss": "toast",
           "aria-label": "Close"
         }, null, -1))
-      ])) : u("", !0),
-      m("div", wt, [
-        $(a.$slots, "default")
+      ])) : v("", !0),
+      h("div", xt, [
+        V(p.$slots, "default")
       ])
-    ], 10, xt));
+    ], 10, St));
   }
-}), Tt = ["data-bs-interval"], Mt = ["src", "alt"], Pt = {
-  key: 1,
-  class: "carousel-caption d-none d-md-block"
-}, qt = { key: 0 }, Ft = { key: 1 }, oe = /* @__PURE__ */ p({
-  __name: "VibeCarouselSlide",
-  props: {
-    active: { type: Boolean, default: !1 },
-    interval: { type: Number, default: void 0 },
-    imgSrc: { type: String, default: void 0 },
-    imgAlt: { type: String, default: "" },
-    caption: { type: String, default: void 0 },
-    captionText: { type: String, default: void 0 }
-  },
-  emits: ["component-error"],
-  setup(e, { emit: d }) {
-    return (t, i) => (l(), o("div", {
-      class: h(["carousel-item", { active: e.active }]),
-      "data-bs-interval": e.interval
-    }, [
-      e.imgSrc ? (l(), o("img", {
-        key: 0,
-        src: e.imgSrc,
-        class: "d-block w-100",
-        alt: e.imgAlt
-      }, null, 8, Mt)) : u("", !0),
-      $(t.$slots, "img"),
-      e.caption || e.captionText || t.$slots.caption ? (l(), o("div", Pt, [
-        $(t.$slots, "caption", {}, () => [
-          e.caption ? (l(), o("h5", qt, f(e.caption), 1)) : u("", !0),
-          e.captionText ? (l(), o("p", Ft, f(e.captionText), 1)) : u("", !0)
-        ])
-      ])) : u("", !0),
-      $(t.$slots, "default")
-    ], 10, Tt));
-  }
-}), It = ["id", "data-bs-ride", "data-bs-interval", "data-bs-keyboard", "data-bs-pause", "data-bs-wrap", "data-bs-touch"], zt = {
+}), Bt = ["id", "data-bs-ride", "data-bs-interval", "data-bs-keyboard", "data-bs-pause", "data-bs-wrap", "data-bs-touch"], Nt = {
   key: 0,
   class: "carousel-indicators"
-}, At = ["data-bs-target", "data-bs-slide-to", "aria-current", "aria-label"], jt = { class: "carousel-inner" }, Lt = {
+}, Tt = ["data-bs-target", "data-bs-slide-to", "aria-current", "aria-label"], Mt = { class: "carousel-inner" }, qt = ["data-bs-interval"], Pt = ["src", "alt"], Ft = {
   key: 0,
-  class: "carousel-indicators"
-}, Ot = { class: "carousel-inner" }, Dt = ["data-bs-target"], Xt = ["data-bs-target"], Rt = /* @__PURE__ */ p({
+  class: "carousel-caption d-none d-md-block"
+}, Lt = { key: 0 }, zt = { key: 1 }, At = ["data-bs-target"], jt = ["data-bs-target"], It = /* @__PURE__ */ C({
   __name: "VibeCarousel",
   props: {
     id: { type: String, required: !0 },
@@ -1369,14 +1206,18 @@ const $e = /* @__PURE__ */ p({
     touch: { type: Boolean, default: !0 },
     dark: { type: Boolean, default: !1 },
     fade: { type: Boolean, default: !1 },
-    items: { type: Array, default: void 0 }
+    items: { type: Array, required: !0 }
   },
   emits: ["slide", "slid", "component-error"],
-  setup(e, { emit: d }) {
-    const t = D();
-    return (i, a) => (l(), o("div", {
+  setup(e, { emit: f }) {
+    const t = e, a = y(() => {
+      const o = ["carousel", "slide"];
+      return t.dark && o.push("carousel-dark"), t.fade && o.push("carousel-fade"), o.join(" ");
+    }), l = (o, s) => o.alt ? o.alt : o.caption ? o.caption : o.captionText ? o.captionText : `Carousel slide ${s + 1}`;
+    return G(() => {
+    }), (o, s) => (i(), n("div", {
       id: e.id,
-      class: h(["carousel", "slide", { "carousel-dark": e.dark, "carousel-fade": e.fade }]),
+      class: g(a.value),
       "data-bs-ride": e.ride === !0 ? "carousel" : e.ride,
       "data-bs-interval": e.interval,
       "data-bs-keyboard": e.keyboard,
@@ -1384,66 +1225,68 @@ const $e = /* @__PURE__ */ p({
       "data-bs-wrap": e.wrap,
       "data-bs-touch": e.touch
     }, [
-      e.items && e.items.length > 0 && !L(t).default ? (l(), o(q, { key: 0 }, [
-        e.indicators ? (l(), o("div", zt, [
-          (l(!0), o(q, null, I(e.items, (n, r) => (l(), o("button", {
-            key: `indicator-${r}`,
-            type: "button",
-            "data-bs-target": `#${e.id}`,
-            "data-bs-slide-to": r,
-            class: h({ active: n.active || r === 0 }),
-            "aria-current": n.active || r === 0,
-            "aria-label": `Slide ${r + 1}`
-          }, null, 10, At))), 128))
-        ])) : u("", !0),
-        m("div", jt, [
-          (l(!0), o(q, null, I(e.items, (n, r) => (l(), V(oe, {
-            key: r,
-            active: n.active || r === 0,
-            interval: n.interval,
-            "img-src": n.src,
-            "img-alt": n.alt,
-            caption: n.caption,
-            "caption-text": n.captionText
-          }, null, 8, ["active", "interval", "img-src", "img-alt", "caption", "caption-text"]))), 128))
-        ])
-      ], 64)) : (l(), o(q, { key: 1 }, [
-        e.indicators ? (l(), o("div", Lt, [
-          $(i.$slots, "indicators")
-        ])) : u("", !0),
-        m("div", Ot, [
-          $(i.$slots, "default")
-        ])
-      ], 64)),
-      e.controls ? (l(), o("button", {
-        key: 2,
+      e.indicators ? (i(), n("div", Nt, [
+        (i(!0), n(F, null, z(e.items, (u, d) => (i(), n("button", {
+          key: `indicator-${u.src}-${d}`,
+          type: "button",
+          "data-bs-target": `#${e.id}`,
+          "data-bs-slide-to": d,
+          class: g({ active: u.active || d === 0 }),
+          "aria-current": u.active || d === 0,
+          "aria-label": `Slide ${d + 1}`
+        }, null, 10, Tt))), 128))
+      ])) : v("", !0),
+      h("div", Mt, [
+        (i(!0), n(F, null, z(e.items, (u, d) => (i(), n("div", {
+          key: `slide-${u.src}-${d}`,
+          class: g(["carousel-item", { active: u.active || d === 0 }]),
+          "data-bs-interval": u.interval
+        }, [
+          h("img", {
+            src: u.src,
+            alt: l(u, d),
+            class: "d-block w-100"
+          }, null, 8, Pt),
+          u.caption || u.captionText || o.$slots.caption ? (i(), n("div", Ft, [
+            V(o.$slots, "caption", {
+              item: u,
+              index: d
+            }, () => [
+              u.caption ? (i(), n("h5", Lt, b(u.caption), 1)) : v("", !0),
+              u.captionText ? (i(), n("p", zt, b(u.captionText), 1)) : v("", !0)
+            ])
+          ])) : v("", !0)
+        ], 10, qt))), 128))
+      ]),
+      e.controls ? (i(), n("button", {
+        key: 1,
         class: "carousel-control-prev",
         type: "button",
         "data-bs-target": `#${e.id}`,
         "data-bs-slide": "prev"
-      }, [...a[0] || (a[0] = [
-        m("span", {
+      }, [...s[0] || (s[0] = [
+        h("span", {
           class: "carousel-control-prev-icon",
           "aria-hidden": "true"
         }, null, -1),
-        m("span", { class: "visually-hidden" }, "Previous", -1)
-      ])], 8, Dt)) : u("", !0),
-      e.controls ? (l(), o("button", {
-        key: 3,
+        h("span", { class: "visually-hidden" }, "Previous", -1)
+      ])], 8, At)) : v("", !0),
+      e.controls ? (i(), n("button", {
+        key: 2,
         class: "carousel-control-next",
         type: "button",
         "data-bs-target": `#${e.id}`,
         "data-bs-slide": "next"
-      }, [...a[1] || (a[1] = [
-        m("span", {
+      }, [...s[1] || (s[1] = [
+        h("span", {
           class: "carousel-control-next-icon",
           "aria-hidden": "true"
         }, null, -1),
-        m("span", { class: "visually-hidden" }, "Next", -1)
-      ])], 8, Xt)) : u("", !0)
-    ], 10, It));
+        h("span", { class: "visually-hidden" }, "Next", -1)
+      ])], 8, jt)) : v("", !0)
+    ], 10, Bt));
   }
-}), Gt = ["data-bs-placement", "data-bs-title", "data-bs-trigger", "data-bs-html"], Et = /* @__PURE__ */ p({
+}), Ot = ["data-bs-placement", "data-bs-title", "data-bs-trigger", "data-bs-html"], Et = /* @__PURE__ */ C({
   __name: "VibeTooltip",
   props: {
     content: { type: String, required: !0 },
@@ -1452,18 +1295,18 @@ const $e = /* @__PURE__ */ p({
     html: { type: Boolean, default: !1 }
   },
   emits: ["component-error"],
-  setup(e, { emit: d }) {
-    return (t, i) => (l(), o("span", {
+  setup(e, { emit: f }) {
+    return (t, a) => (i(), n("span", {
       "data-bs-toggle": "tooltip",
       "data-bs-placement": e.placement,
       "data-bs-title": e.content,
       "data-bs-trigger": e.trigger,
       "data-bs-html": e.html
     }, [
-      $(t.$slots, "default")
-    ], 8, Gt));
+      V(t.$slots, "default")
+    ], 8, Ot));
   }
-}), Yt = ["data-bs-placement", "data-bs-title", "data-bs-content", "data-bs-trigger", "data-bs-html"], Ht = /* @__PURE__ */ p({
+}), Dt = ["data-bs-placement", "data-bs-title", "data-bs-content", "data-bs-trigger", "data-bs-html"], Rt = /* @__PURE__ */ C({
   __name: "VibePopover",
   props: {
     title: { type: String, default: void 0 },
@@ -1473,8 +1316,8 @@ const $e = /* @__PURE__ */ p({
     html: { type: Boolean, default: !1 }
   },
   emits: ["component-error"],
-  setup(e, { emit: d }) {
-    return (t, i) => (l(), o("span", {
+  setup(e, { emit: f }) {
+    return (t, a) => (i(), n("span", {
       "data-bs-toggle": "popover",
       "data-bs-placement": e.placement,
       "data-bs-title": e.title,
@@ -1482,10 +1325,10 @@ const $e = /* @__PURE__ */ p({
       "data-bs-trigger": e.trigger,
       "data-bs-html": e.html
     }, [
-      $(t.$slots, "default")
-    ], 8, Yt));
+      V(t.$slots, "default")
+    ], 8, Dt));
   }
-}), Ut = /* @__PURE__ */ p({
+}), Xt = /* @__PURE__ */ C({
   __name: "VibeScrollspy",
   props: {
     target: { type: String, required: !0 },
@@ -1495,8 +1338,8 @@ const $e = /* @__PURE__ */ p({
     tag: { type: String, default: "div" }
   },
   emits: ["activate", "component-error"],
-  setup(e, { emit: d }) {
-    return (t, i) => (l(), V(T(e.tag), {
+  setup(e, { emit: f }) {
+    return (t, a) => (i(), M(q(e.tag), {
       "data-bs-spy": "scroll",
       "data-bs-target": e.target,
       "data-bs-offset": e.offset,
@@ -1504,13 +1347,13 @@ const $e = /* @__PURE__ */ p({
       "data-bs-smooth-scroll": e.smoothScroll,
       tabindex: "0"
     }, {
-      default: x(() => [
-        $(t.$slots, "default")
+      default: P(() => [
+        V(t.$slots, "default")
       ]),
       _: 3
     }, 8, ["data-bs-target", "data-bs-offset", "data-bs-method", "data-bs-smooth-scroll"]));
   }
-}), Qt = /* @__PURE__ */ p({
+}), Yt = /* @__PURE__ */ C({
   __name: "VibeIcon",
   props: {
     // Icon name (e.g., 'house', 'heart-fill', 'star')
@@ -1529,70 +1372,72 @@ const $e = /* @__PURE__ */ p({
     rotate: { type: Number, default: void 0 }
   },
   emits: ["click", "component-error"],
-  setup(e, { emit: d }) {
-    const t = e, i = d, a = c(() => {
-      const s = ["bi", `bi-${t.icon}`];
-      return t.size && (["1x", "2x", "3x", "4x", "5x"].includes(t.size) || s.push(`bi-${t.size}`)), t.customClass && s.push(t.customClass), s.join(" ");
-    }), n = c(() => {
-      const s = {};
+  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(" ");
+    }), o = y(() => {
+      const u = {};
       if (t.fontSize)
-        s.fontSize = t.fontSize;
+        u.fontSize = t.fontSize;
       else if (t.size) {
-        const v = {
+        const r = {
           "1x": "1rem",
           "2x": "2rem",
           "3x": "3rem",
           "4x": "4rem",
           "5x": "5rem"
         };
-        v[t.size] && (s.fontSize = v[t.size]);
+        r[t.size] && (u.fontSize = r[t.size]);
       }
-      t.color && (s.color = t.color);
-      const y = [];
-      return t.flipH && y.push("scaleX(-1)"), t.flipV && y.push("scaleY(-1)"), t.rotate && y.push(`rotate(${t.rotate}deg)`), y.length > 0 && (s.transform = y.join(" "), s.display = "inline-block"), Object.keys(s).length > 0 ? s : void 0;
-    }), r = (s) => {
-      i("click", s);
+      t.color && (u.color = t.color);
+      const d = [];
+      return t.flipH && d.push("scaleX(-1)"), t.flipV && d.push("scaleY(-1)"), t.rotate && d.push(`rotate(${t.rotate}deg)`), d.length > 0 && (u.transform = d.join(" "), u.display = "inline-block"), Object.keys(u).length > 0 ? u : void 0;
+    }), s = (u) => {
+      a("click", u);
     };
-    return (s, y) => (l(), o("i", {
-      class: h(a.value),
-      style: R(n.value),
+    return (u, d) => (i(), n("i", {
+      class: g(l.value),
+      style: D(o.value),
       "aria-hidden": !0,
-      onClick: r
+      onClick: s
     }, null, 6));
   }
-}), Kt = { class: "vibe-datatable" }, Wt = { class: "row mb-3" }, Jt = {
+}), Gt = { class: "vibe-datatable" }, Ht = { class: "row mb-3" }, Kt = {
   key: 0,
   class: "col-md-6 mb-2 mb-md-0"
-}, Zt = ["placeholder"], _t = {
+}, Ut = ["placeholder"], Qt = {
   key: 1,
   class: "col-md-6"
-}, ea = { class: "d-flex justify-content-md-end align-items-center" }, ta = ["value"], aa = ["onClick"], la = {
+}, Wt = { class: "d-flex justify-content-md-end align-items-center" }, Jt = ["value"], Zt = ["onClick"], _t = {
   key: 0,
   class: "ms-1"
-}, ia = ["onClick"], na = { key: 0 }, oa = ["colspan"], sa = { class: "row" }, da = {
+}, ea = ["onClick"], ta = { key: 0 }, aa = ["colspan"], la = { class: "row" }, ia = {
   key: 0,
   class: "col-md-6 mb-2 mb-md-0"
-}, ra = { class: "datatable-info" }, ua = {
+}, na = { class: "datatable-info" }, sa = {
   key: 1,
   class: "col-md-6"
-}, ca = { class: "pagination justify-content-md-end mb-0" }, fa = {
+}, oa = { class: "pagination justify-content-md-end mb-0" }, da = {
   key: 0,
   class: "page-item"
-}, va = {
+}, ra = {
   key: 1,
   class: "page-item disabled"
-}, ba = ["onClick"], ma = {
+}, ua = ["onClick"], ca = {
   key: 2,
   class: "page-item disabled"
-}, ya = {
+}, fa = {
   key: 3,
   class: "page-item"
-}, ha = /* @__PURE__ */ p({
+}, va = /* @__PURE__ */ C({
   __name: "VibeDataTable",
-  props: {
+  props: /* @__PURE__ */ J({
     // Data
     items: { type: Array, default: () => [] },
     columns: { type: Array, required: !0 },
+    rowKey: { type: String, default: "id" },
+    // Key to use for unique row identification
     // Table styling
     striped: { type: Boolean, default: !1 },
     bordered: { type: Boolean, default: !1 },
@@ -1608,247 +1453,256 @@ const $e = /* @__PURE__ */ p({
     // Search
     searchPlaceholder: { type: String, default: "Search..." },
     searchDebounce: { type: Number, default: 300 },
-    // Pagination
-    perPage: { type: Number, default: 10 },
-    currentPage: { type: Number, default: 1 },
-    perPageOptions: { type: Array, default: () => [5, 10, 25, 50, 100] },
-    // Sorting
-    sortBy: { type: String, default: void 0 },
-    sortDesc: { type: Boolean, default: !1 },
     // Display
     showEmpty: { type: Boolean, default: !0 },
     emptyText: { type: String, default: "No data available" },
     showPerPage: { type: Boolean, default: !0 },
     showInfo: { type: Boolean, default: !0 },
     infoText: { type: String, default: "Showing {start} to {end} of {total} entries" },
-    filteredInfoText: { type: String, default: "Showing {start} to {end} of {total} entries (filtered from {totalRows} total entries)" }
-  },
-  emits: ["update:currentPage", "update:perPage", "update:sortBy", "update:sortDesc", "row-clicked", "component-error"],
-  setup(e, { emit: d }) {
-    const t = e, i = d, a = F(""), n = F(null), r = F(""), s = F(t.currentPage), y = F(t.perPage), v = F(t.sortBy), b = F(t.sortDesc);
-    O(() => t.currentPage, (S) => {
-      s.value = S;
-    }), O(() => t.perPage, (S) => {
-      y.value = S;
-    }), O(() => t.sortBy, (S) => {
-      v.value = S;
-    }), O(() => t.sortDesc, (S) => {
-      b.value = S;
-    }), O(a, (S) => {
-      n.value && clearTimeout(n.value), n.value = window.setTimeout(() => {
-        r.value = S, s.value = 1;
+    filteredInfoText: { type: String, default: "Showing {start} to {end} of {total} entries (filtered from {totalRows} total entries)" },
+    perPageOptions: { type: Array, default: () => [5, 10, 25, 50, 100] }
+  }, {
+    currentPage: { default: 1 },
+    currentPageModifiers: {},
+    perPage: { default: 10 },
+    perPageModifiers: {},
+    sortBy: { default: void 0 },
+    sortByModifiers: {},
+    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"), o = Y(e, "sortBy"), s = Y(e, "sortDesc"), u = f, d = T(""), r = T(null), c = T(""), m = ($, k) => t.rowKey && $[t.rowKey] !== void 0 ? String($[t.rowKey]) : k;
+    E(d, ($) => {
+      r.value !== null && clearTimeout(r.value), r.value = setTimeout(() => {
+        c.value = $, a.value = 1, r.value = null;
       }, t.searchDebounce);
+    }), H(() => {
+      r.value !== null && (clearTimeout(r.value), r.value = null);
     });
-    const g = c(() => {
-      if (!t.searchable || !r.value)
+    const p = y(() => {
+      if (!t.searchable || !c.value)
         return t.items;
-      const S = r.value.toLowerCase();
-      return t.items.filter((w) => t.columns.some((C) => {
-        if (C.searchable === !1) return !1;
-        const j = w[C.key];
-        return j == null ? !1 : String(j).toLowerCase().includes(S);
+      const $ = c.value.toLowerCase();
+      return t.items.filter((k) => t.columns.some((S) => {
+        if (S.searchable === !1) return !1;
+        const L = k[S.key];
+        return L == null ? !1 : String(L).toLowerCase().includes($);
       }));
-    }), k = c(() => {
-      if (!t.sortable || !v.value)
-        return g.value;
-      const S = [...g.value], w = v.value;
-      return S.sort((C, j) => {
-        let z = C[w], G = j[w];
-        return z == null ? 1 : G == null ? -1 : (typeof z == "string" && (z = z.toLowerCase()), typeof G == "string" && (G = G.toLowerCase()), z < G ? b.value ? 1 : -1 : z > G ? b.value ? -1 : 1 : 0);
-      }), S;
-    }), M = c(() => {
+    }), B = ($, k, S) => {
+      if ($ == null) return 1;
+      if (k == null) return -1;
+      if (typeof $ == "string" && typeof k == "string") {
+        const L = $.toLowerCase(), I = k.toLowerCase();
+        return L < I ? S ? 1 : -1 : L > I ? S ? -1 : 1 : 0;
+      }
+      if (typeof $ == "number" && typeof k == "number")
+        return $ < k ? S ? 1 : -1 : $ > k ? S ? -1 : 1 : 0;
+      if (typeof $ == "boolean" && typeof k == "boolean")
+        return $ === k ? 0 : ($ ? 1 : -1) * (S ? -1 : 1);
+      if ($ instanceof Date && k instanceof Date) {
+        const L = $.getTime(), I = k.getTime();
+        return L < I ? S ? 1 : -1 : L > I ? S ? -1 : 1 : 0;
+      }
+      return 0;
+    }, x = y(() => {
+      if (!t.sortable || !o.value)
+        return p.value;
+      const $ = [...p.value], k = o.value;
+      return $.sort((S, L) => B(S[k], L[k], s.value)), $;
+    }), A = y(() => {
       if (!t.paginated)
-        return k.value;
-      const S = (s.value - 1) * y.value, w = S + y.value;
-      return k.value.slice(S, w);
-    }), A = c(() => t.items.length), B = c(() => g.value.length), P = c(() => Math.ceil(B.value / y.value)), X = c(() => B.value === 0 ? 0 : (s.value - 1) * y.value + 1), se = c(() => {
-      const S = s.value * y.value;
-      return Math.min(S, B.value);
-    }), de = c(() => (B.value !== A.value ? t.filteredInfoText : t.infoText).replace("{start}", String(X.value)).replace("{end}", String(se.value)).replace("{total}", String(B.value)).replace("{totalRows}", String(A.value))), re = c(() => {
-      const S = ["table"];
-      return t.striped && S.push("table-striped"), t.bordered && S.push("table-bordered"), t.borderless && S.push("table-borderless"), t.hover && S.push("table-hover"), t.small && S.push("table-sm"), t.variant && S.push(`table-${t.variant}`), S.join(" ");
-    }), ue = (S) => {
-      !t.sortable || S.sortable === !1 || (v.value === S.key ? b.value = !b.value : (v.value = S.key, b.value = !1), i("update:sortBy", v.value), i("update:sortDesc", b.value));
-    }, E = (S) => {
-      S < 1 || S > P.value || (s.value = S, i("update:currentPage", S));
-    }, ce = () => {
-      s.value = 1, i("update:perPage", y.value), i("update:currentPage", 1);
-    }, fe = (S, w) => {
-      i("row-clicked", S, w);
-    }, ve = (S, w) => {
-      const C = S[w.key];
-      return w.formatter ? w.formatter(C, S) : C;
-    }, be = (S) => !t.sortable || S.sortable === !1 ? "" : v.value !== S.key ? "⇅" : b.value ? "↓" : "↑", me = (S) => {
-      const w = { ...S.thStyle };
-      return t.sortable && S.sortable !== !1 && (w.cursor = "pointer"), w;
+        return x.value;
+      const $ = (a.value - 1) * l.value, k = $ + l.value;
+      return x.value.slice($, k);
+    }), j = 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 $ = a.value * l.value;
+      return Math.min($, N.value);
+    }), Z = y(() => (N.value !== j.value ? t.filteredInfoText : t.infoText).replace("{start}", String(K.value)).replace("{end}", String(U.value)).replace("{total}", String(N.value)).replace("{totalRows}", String(j.value))), _ = y(() => {
+      const $ = ["table"];
+      return t.striped && $.push("table-striped"), t.bordered && $.push("table-bordered"), t.borderless && $.push("table-borderless"), t.hover && $.push("table-hover"), t.small && $.push("table-sm"), t.variant && $.push(`table-${t.variant}`), $.join(" ");
+    }), ee = ($) => {
+      !t.sortable || $.sortable === !1 || (o.value === $.key ? s.value = !s.value : (o.value = $.key, s.value = !1));
+    }, R = ($) => {
+      $ < 1 || $ > O.value || (a.value = $);
+    }, te = () => {
+      a.value = 1;
+    }, ae = ($, k) => {
+      u("row-clicked", $, k);
+    }, le = ($, k) => {
+      const S = $[k.key];
+      return k.formatter ? k.formatter(S, $) : S;
+    }, ie = ($) => !t.sortable || $.sortable === !1 ? "" : o.value !== $.key ? "⇅" : s.value ? "↓" : "↑", ne = ($) => {
+      const k = { ...$.thStyle };
+      return t.sortable && $.sortable !== !1 && (k.cursor = "pointer"), k;
     };
-    return (S, w) => (l(), o("div", Kt, [
-      m("div", Wt, [
-        e.searchable ? (l(), o("div", Jt, [
-          W(m("input", {
-            "onUpdate:modelValue": w[0] || (w[0] = (C) => a.value = C),
+    return ($, k) => (i(), n("div", Gt, [
+      h("div", Ht, [
+        e.searchable ? (i(), n("div", Kt, [
+          W(h("input", {
+            "onUpdate:modelValue": k[0] || (k[0] = (S) => d.value = S),
             type: "search",
             class: "form-control",
             placeholder: e.searchPlaceholder
-          }, null, 8, Zt), [
-            [ye, a.value]
+          }, null, 8, Ut), [
+            [oe, d.value]
           ])
-        ])) : u("", !0),
-        e.showPerPage && e.paginated ? (l(), o("div", _t, [
-          m("div", ea, [
-            w[6] || (w[6] = m("label", { class: "me-2 mb-0" }, "Show", -1)),
-            W(m("select", {
-              "onUpdate:modelValue": w[1] || (w[1] = (C) => y.value = C),
+        ])) : v("", !0),
+        e.showPerPage && e.paginated ? (i(), n("div", Qt, [
+          h("div", Wt, [
+            k[6] || (k[6] = h("label", { class: "me-2 mb-0" }, "Show", -1)),
+            W(h("select", {
+              "onUpdate:modelValue": k[1] || (k[1] = (S) => l.value = S),
               class: "form-select form-select-sm",
               style: { width: "auto" },
-              onChange: ce
+              onChange: te
             }, [
-              (l(!0), o(q, null, I(e.perPageOptions, (C) => (l(), o("option", {
-                key: C,
-                value: C
-              }, f(C), 9, ta))), 128))
+              (i(!0), n(F, null, z(e.perPageOptions, (S) => (i(), n("option", {
+                key: S,
+                value: S
+              }, b(S), 9, Jt))), 128))
             ], 544), [
               [
-                he,
-                y.value,
+                de,
+                l.value,
                 void 0,
                 { number: !0 }
               ]
             ]),
-            w[7] || (w[7] = m("span", { class: "ms-2" }, "entries", -1))
+            k[7] || (k[7] = h("span", { class: "ms-2" }, "entries", -1))
           ])
-        ])) : u("", !0)
+        ])) : v("", !0)
       ]),
-      m("div", {
-        class: h({ "table-responsive": e.responsive })
+      h("div", {
+        class: g({ "table-responsive": e.responsive })
       }, [
-        m("table", {
-          class: h(re.value)
+        h("table", {
+          class: g(_.value)
         }, [
-          m("thead", null, [
-            m("tr", null, [
-              (l(!0), o(q, null, I(e.columns, (C) => (l(), o("th", {
-                key: C.key,
-                class: h(C.headerClass),
-                style: R(me(C)),
-                onClick: (j) => ue(C)
+          h("thead", null, [
+            h("tr", null, [
+              (i(!0), n(F, null, z(e.columns, (S) => (i(), n("th", {
+                key: S.key,
+                class: g(S.headerClass),
+                style: D(ne(S)),
+                onClick: (L) => ee(S)
               }, [
-                N(f(C.label) + " ", 1),
-                e.sortable && C.sortable !== !1 ? (l(), o("span", la, f(be(C)), 1)) : u("", !0)
-              ], 14, aa))), 128))
+                w(b(S.label) + " ", 1),
+                e.sortable && S.sortable !== !1 ? (i(), n("span", _t, b(ie(S)), 1)) : v("", !0)
+              ], 14, Zt))), 128))
             ])
           ]),
-          m("tbody", null, [
-            (l(!0), o(q, null, I(M.value, (C, j) => (l(), o("tr", {
-              key: j,
-              onClick: (z) => fe(C, j),
+          h("tbody", null, [
+            (i(!0), n(F, null, z(A.value, (S, L) => (i(), n("tr", {
+              key: m(S, L),
+              onClick: (I) => ae(S, L),
               style: { cursor: "pointer" }
             }, [
-              (l(!0), o(q, null, I(e.columns, (z) => (l(), o("td", {
-                key: z.key,
-                class: h(z.class),
-                style: R(z.tdStyle)
+              (i(!0), n(F, null, z(e.columns, (I) => (i(), n("td", {
+                key: I.key,
+                class: g(I.class),
+                style: D(I.tdStyle)
               }, [
-                $(S.$slots, `cell(${z.key})`, {
-                  item: C,
-                  value: C[z.key],
-                  index: j
+                V($.$slots, `cell(${I.key})`, {
+                  item: S,
+                  value: S[I.key],
+                  index: L
                 }, () => [
-                  N(f(ve(C, z)), 1)
+                  w(b(le(S, I)), 1)
                 ], !0)
               ], 6))), 128))
-            ], 8, ia))), 128)),
-            M.value.length === 0 && e.showEmpty ? (l(), o("tr", na, [
-              m("td", {
+            ], 8, ea))), 128)),
+            A.value.length === 0 && e.showEmpty ? (i(), n("tr", ta, [
+              h("td", {
                 colspan: e.columns.length,
                 class: "text-center"
-              }, f(e.emptyText), 9, oa)
-            ])) : u("", !0)
+              }, b(e.emptyText), 9, aa)
+            ])) : v("", !0)
           ])
         ], 2)
       ], 2),
-      m("div", sa, [
-        e.showInfo ? (l(), o("div", da, [
-          m("div", ra, f(de.value), 1)
-        ])) : u("", !0),
-        e.paginated && P.value > 1 ? (l(), o("div", ua, [
-          m("nav", null, [
-            m("ul", ca, [
-              m("li", {
-                class: h(["page-item", { disabled: s.value === 1 }])
+      h("div", la, [
+        e.showInfo ? (i(), n("div", ia, [
+          h("div", na, b(Z.value), 1)
+        ])) : v("", !0),
+        e.paginated && O.value > 1 ? (i(), n("div", sa, [
+          h("nav", null, [
+            h("ul", oa, [
+              h("li", {
+                class: g(["page-item", { disabled: a.value === 1 }])
               }, [
-                m("a", {
+                h("a", {
                   class: "page-link",
                   href: "#",
-                  onClick: w[2] || (w[2] = Y((C) => E(s.value - 1), ["prevent"]))
+                  onClick: k[2] || (k[2] = X((S) => R(a.value - 1), ["prevent"]))
                 }, " Previous ")
               ], 2),
-              s.value > 3 ? (l(), o("li", fa, [
-                m("a", {
+              a.value > 3 ? (i(), n("li", da, [
+                h("a", {
                   class: "page-link",
                   href: "#",
-                  onClick: w[3] || (w[3] = Y((C) => E(1), ["prevent"]))
+                  onClick: k[3] || (k[3] = X((S) => R(1), ["prevent"]))
                 }, "1")
-              ])) : u("", !0),
-              s.value > 4 ? (l(), o("li", va, [...w[8] || (w[8] = [
-                m("span", { class: "page-link" }, "...", -1)
-              ])])) : u("", !0),
-              (l(!0), o(q, null, I(Array.from({ length: P.value }, (C, j) => j + 1).filter(
-                (C) => C >= s.value - 2 && C <= s.value + 2
-              ), (C) => (l(), o("li", {
-                key: C,
-                class: h(["page-item", { active: C === s.value }])
+              ])) : v("", !0),
+              a.value > 4 ? (i(), n("li", ra, [...k[8] || (k[8] = [
+                h("span", { class: "page-link" }, "...", -1)
+              ])])) : v("", !0),
+              (i(!0), n(F, null, z(Array.from({ length: O.value }, (S, L) => L + 1).filter(
+                (S) => S >= a.value - 2 && S <= a.value + 2
+              ), (S) => (i(), n("li", {
+                key: S,
+                class: g(["page-item", { active: S === a.value }])
               }, [
-                m("a", {
+                h("a", {
                   class: "page-link",
                   href: "#",
-                  onClick: Y((j) => E(C), ["prevent"])
-                }, f(C), 9, ba)
+                  onClick: X((L) => R(S), ["prevent"])
+                }, b(S), 9, ua)
               ], 2))), 128)),
-              s.value < P.value - 3 ? (l(), o("li", ma, [...w[9] || (w[9] = [
-                m("span", { class: "page-link" }, "...", -1)
-              ])])) : u("", !0),
-              s.value < P.value - 2 ? (l(), o("li", ya, [
-                m("a", {
+              a.value < O.value - 3 ? (i(), n("li", ca, [...k[9] || (k[9] = [
+                h("span", { class: "page-link" }, "...", -1)
+              ])])) : v("", !0),
+              a.value < O.value - 2 ? (i(), n("li", fa, [
+                h("a", {
                   class: "page-link",
                   href: "#",
-                  onClick: w[4] || (w[4] = Y((C) => E(P.value), ["prevent"]))
-                }, f(P.value), 1)
-              ])) : u("", !0),
-              m("li", {
-                class: h(["page-item", { disabled: s.value === P.value }])
+                  onClick: k[4] || (k[4] = X((S) => R(O.value), ["prevent"]))
+                }, b(O.value), 1)
+              ])) : v("", !0),
+              h("li", {
+                class: g(["page-item", { disabled: a.value === O.value }])
               }, [
-                m("a", {
+                h("a", {
                   class: "page-link",
                   href: "#",
-                  onClick: w[5] || (w[5] = Y((C) => E(s.value + 1), ["prevent"]))
+                  onClick: k[5] || (k[5] = X((S) => R(a.value + 1), ["prevent"]))
                 }, " Next ")
               ], 2)
             ])
           ])
-        ])) : u("", !0)
+        ])) : v("", !0)
       ])
     ]));
   }
-}), K = (e, d) => {
+}), Q = (e, f) => {
   const t = e.__vccOpts || e;
-  for (const [i, a] of d)
-    t[i] = a;
+  for (const [a, l] of f)
+    t[a] = l;
   return t;
-}, ga = /* @__PURE__ */ K(ha, [["__scopeId", "data-v-48221c7b"]]), pa = { class: "mb-3" }, $a = ["for"], ka = {
+}, ba = /* @__PURE__ */ Q(va, [["__scopeId", "data-v-bafec986"]]), ma = { class: "mb-3" }, ha = ["for"], ya = {
   key: 0,
   class: "text-danger"
-}, Sa = ["id", "type", "value", "placeholder", "disabled", "readonly", "required", "aria-invalid", "aria-describedby"], Va = ["id"], xa = {
+}, ga = ["id", "type", "value", "placeholder", "disabled", "readonly", "required", "aria-invalid", "aria-describedby"], pa = ["id"], $a = {
   key: 2,
   class: "valid-feedback",
   style: { display: "block" }
-}, Ca = ["id"], Ba = /* @__PURE__ */ p({
+}, ka = ["id"], Sa = /* @__PURE__ */ C({
   __name: "VibeFormInput",
   props: {
     modelValue: {
       type: [String, Number],
-      default: "",
-      validator: (e) => !0
+      default: ""
     },
     type: { type: String, default: "text" },
     id: { type: String, required: !0 },
@@ -1866,67 +1720,67 @@ const $e = /* @__PURE__ */ p({
     plaintext: { type: Boolean, default: !1 }
   },
   emits: ["update:modelValue", "validate", "blur", "focus", "input", "change"],
-  setup(e, { emit: d }) {
-    const t = e, i = d, a = c(() => t.validationState), n = c(() => {
-      const b = [];
-      return t.plaintext ? b.push("form-control-plaintext") : (b.push("form-control"), t.size && b.push(`form-control-${t.size}`)), a.value === "valid" && b.push("is-valid"), a.value === "invalid" && b.push("is-invalid"), b.join(" ");
-    }), r = (b) => {
-      const g = b.target, k = t.type === "number" ? g.value === "" ? "" : Number(g.value) : g.value;
-      i("update:modelValue", k), i("input", b), t.validateOn === "input" && i("validate");
-    }, s = (b) => {
-      i("change", b), t.validateOn === "change" && i("validate");
-    }, y = (b) => {
-      i("blur", b), t.validateOn === "blur" && i("validate");
-    }, v = (b) => {
-      i("focus", b);
+  setup(e, { emit: f }) {
+    const t = e, a = f, l = y(() => {
+      const r = [];
+      return t.plaintext ? r.push("form-control-plaintext") : (r.push("form-control"), t.size && r.push(`form-control-${t.size}`)), t.validationState === "valid" && r.push("is-valid"), t.validationState === "invalid" && r.push("is-invalid"), r.join(" ");
+    }), o = (r) => {
+      const c = r.target, m = t.type === "number" ? c.value === "" ? "" : Number(c.value) : c.value;
+      a("update:modelValue", m), a("input", r), t.validateOn === "input" && a("validate");
+    }, s = (r) => {
+      a("change", r), t.validateOn === "change" && a("validate");
+    }, u = (r) => {
+      a("blur", r), t.validateOn === "blur" && a("validate");
+    }, d = (r) => {
+      a("focus", r);
     };
-    return (b, g) => (l(), o("div", pa, [
-      e.label ? (l(), o("label", {
+    return (r, c) => (i(), n("div", ma, [
+      e.label ? (i(), n("label", {
         key: 0,
         for: e.id,
         class: "form-label"
       }, [
-        N(f(e.label) + " ", 1),
-        e.required ? (l(), o("span", ka, "*")) : u("", !0)
-      ], 8, $a)) : u("", !0),
-      m("input", {
+        w(b(e.label) + " ", 1),
+        e.required ? (i(), n("span", ya, "*")) : v("", !0)
+      ], 8, ha)) : v("", !0),
+      h("input", {
         id: e.id,
         type: e.type,
-        class: h(n.value),
+        class: g(l.value),
         value: e.modelValue,
         placeholder: e.placeholder,
         disabled: e.disabled,
         readonly: e.readonly || e.plaintext,
         required: e.required,
-        "aria-invalid": a.value === "invalid",
+        "aria-invalid": e.validationState === "invalid",
         "aria-describedby": e.validationMessage || e.helpText ? `${e.id}-feedback` : void 0,
-        onInput: r,
+        onInput: o,
         onChange: s,
-        onBlur: y,
-        onFocus: v
-      }, null, 42, Sa),
-      e.helpText && !e.validationMessage ? (l(), o("div", {
+        onBlur: u,
+        onFocus: d
+      }, null, 42, ga),
+      e.helpText && !e.validationMessage ? (i(), n("div", {
         key: 1,
         id: `${e.id}-feedback`,
         class: "form-text"
-      }, f(e.helpText), 9, Va)) : u("", !0),
-      a.value === "valid" ? (l(), o("div", xa, f(e.validationMessage || "Looks good!"), 1)) : u("", !0),
-      a.value === "invalid" ? (l(), o("div", {
+      }, b(e.helpText), 9, pa)) : v("", !0),
+      e.validationState === "valid" ? (i(), n("div", $a, b(e.validationMessage || "Looks good!"), 1)) : v("", !0),
+      e.validationState === "invalid" ? (i(), n("div", {
         key: 3,
         id: `${e.id}-feedback`,
         class: "invalid-feedback",
         style: { display: "block" }
-      }, f(e.validationMessage || "Please provide a valid value."), 9, Ca)) : u("", !0)
+      }, b(e.validationMessage || "Please provide a valid value."), 9, ka)) : v("", !0)
     ]));
   }
-}), wa = { class: "mb-3" }, Na = ["for"], Ta = {
+}), Va = { class: "mb-3" }, Ca = ["for"], xa = {
   key: 0,
   class: "text-danger"
-}, Ma = ["id", "value", "disabled", "required", "multiple", "size", "aria-invalid", "aria-describedby"], Pa = ["selected"], qa = ["value", "disabled"], Fa = ["id"], Ia = {
+}, wa = ["id", "value", "disabled", "required", "multiple", "size", "aria-invalid", "aria-describedby"], Ba = ["selected"], Na = ["value", "disabled"], Ta = ["id"], Ma = {
   key: 2,
   class: "valid-feedback",
   style: { display: "block" }
-}, za = ["id"], Aa = /* @__PURE__ */ p({
+}, qa = ["id"], Pa = /* @__PURE__ */ C({
   __name: "VibeFormSelect",
   props: {
     modelValue: {
@@ -1950,80 +1804,80 @@ const $e = /* @__PURE__ */ p({
     placeholder: { type: String, default: void 0 }
   },
   emits: ["update:modelValue", "validate", "blur", "focus", "change"],
-  setup(e, { emit: d }) {
-    const t = e, i = d, a = c(() => t.validationState), n = c(() => {
-      const v = ["form-select"];
-      return t.size && v.push(`form-select-${t.size}`), a.value === "valid" && v.push("is-valid"), a.value === "invalid" && v.push("is-invalid"), v.join(" ");
-    }), r = (v) => {
-      const b = v.target;
-      let g;
-      t.multiple ? g = Array.from(b.selectedOptions).map((M) => M.value) : g = b.value, i("update:modelValue", g), i("change", v), t.validateOn === "change" && i("validate");
-    }, s = (v) => {
-      i("blur", v), t.validateOn === "blur" && i("validate");
-    }, y = (v) => {
-      i("focus", v);
+  setup(e, { emit: f }) {
+    const t = e, a = f, l = y(() => {
+      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(" ");
+    }), o = (d) => {
+      const r = d.target;
+      let c;
+      t.multiple ? c = Array.from(r.selectedOptions).map((p) => p.value) : c = r.value, a("update:modelValue", c), a("change", d), t.validateOn === "change" && a("validate");
+    }, s = (d) => {
+      a("blur", d), t.validateOn === "blur" && a("validate");
+    }, u = (d) => {
+      a("focus", d);
     };
-    return (v, b) => (l(), o("div", wa, [
-      e.label ? (l(), o("label", {
+    return (d, r) => (i(), n("div", Va, [
+      e.label ? (i(), n("label", {
         key: 0,
         for: e.id,
         class: "form-label"
       }, [
-        N(f(e.label) + " ", 1),
-        e.required ? (l(), o("span", Ta, "*")) : u("", !0)
-      ], 8, Na)) : u("", !0),
-      m("select", {
+        w(b(e.label) + " ", 1),
+        e.required ? (i(), n("span", xa, "*")) : v("", !0)
+      ], 8, Ca)) : v("", !0),
+      h("select", {
         id: e.id,
-        class: h(n.value),
+        class: g(l.value),
         value: e.modelValue,
         disabled: e.disabled,
         required: e.required,
         multiple: e.multiple,
         size: e.htmlSize,
-        "aria-invalid": a.value === "invalid",
+        "aria-invalid": e.validationState === "invalid",
         "aria-describedby": e.validationMessage || e.helpText ? `${e.id}-feedback` : void 0,
-        onChange: r,
+        onChange: o,
         onBlur: s,
-        onFocus: y
+        onFocus: u
       }, [
-        e.placeholder && !e.multiple ? (l(), o("option", {
+        e.placeholder && !e.multiple ? (i(), n("option", {
           key: 0,
           value: "",
           disabled: "",
           selected: !e.modelValue
-        }, f(e.placeholder), 9, Pa)) : u("", !0),
-        (l(!0), o(q, null, I(e.options, (g) => (l(), o("option", {
-          key: g.value,
-          value: g.value,
-          disabled: g.disabled
-        }, f(g.text), 9, qa))), 128)),
-        $(v.$slots, "default")
-      ], 42, Ma),
-      e.helpText && !e.validationMessage ? (l(), o("div", {
+        }, b(e.placeholder), 9, Ba)) : v("", !0),
+        (i(!0), n(F, null, z(e.options, (c) => (i(), n("option", {
+          key: c.value,
+          value: c.value,
+          disabled: c.disabled
+        }, b(c.text), 9, Na))), 128)),
+        V(d.$slots, "default")
+      ], 42, wa),
+      e.helpText && !e.validationMessage ? (i(), n("div", {
         key: 1,
         id: `${e.id}-feedback`,
         class: "form-text"
-      }, f(e.helpText), 9, Fa)) : u("", !0),
-      a.value === "valid" ? (l(), o("div", Ia, f(e.validationMessage || "Looks good!"), 1)) : u("", !0),
-      a.value === "invalid" ? (l(), o("div", {
+      }, b(e.helpText), 9, Ta)) : v("", !0),
+      e.validationState === "valid" ? (i(), n("div", Ma, b(e.validationMessage || "Looks good!"), 1)) : v("", !0),
+      e.validationState === "invalid" ? (i(), n("div", {
         key: 3,
         id: `${e.id}-feedback`,
         class: "invalid-feedback",
         style: { display: "block" }
-      }, f(e.validationMessage || "Please select a valid option."), 9, za)) : u("", !0)
+      }, b(e.validationMessage || "Please select a valid option."), 9, qa)) : v("", !0)
     ]));
   }
-}), ja = { class: "mb-3" }, La = ["for"], Oa = {
+}), Fa = { class: "mb-3" }, La = ["for"], za = {
   key: 0,
   class: "text-danger"
-}, Da = ["id", "value", "placeholder", "disabled", "readonly", "required", "rows", "maxlength", "aria-invalid", "aria-describedby"], Xa = {
+}, Aa = ["id", "value", "placeholder", "disabled", "readonly", "required", "rows", "maxlength", "aria-invalid", "aria-describedby"], ja = {
   key: 1,
   class: "form-text"
-}, Ra = ["id"], Ga = {
+}, Ia = ["id"], Oa = {
   key: 3,
   class: "valid-feedback",
   style: { display: "block" }
-}, Ea = ["id"], Ya = /* @__PURE__ */ p({
+}, Ea = ["id"], Da = /* @__PURE__ */ C({
   __name: "VibeFormTextarea",
   props: {
     modelValue: {
@@ -2048,35 +1902,35 @@ const $e = /* @__PURE__ */ p({
     showCharCount: { type: Boolean, default: !1 }
   },
   emits: ["update:modelValue", "validate", "blur", "focus", "input", "change"],
-  setup(e, { emit: d }) {
-    const t = e, i = d, a = c(() => t.validationState), n = c(() => {
-      const k = ["form-control"];
-      return t.size && k.push(`form-control-${t.size}`), a.value === "valid" && k.push("is-valid"), a.value === "invalid" && k.push("is-invalid"), k.join(" ");
-    }), r = c(() => {
-      const k = typeof t.modelValue == "string" ? t.modelValue : "";
-      return k ? k.length : 0;
-    }), s = c(() => t.maxlength ? `${r.value} / ${t.maxlength}` : `${r.value}`), y = (k) => {
-      const M = k.target;
-      i("update:modelValue", M.value), i("input", k), t.validateOn === "input" && i("validate");
-    }, v = (k) => {
-      i("change", k), t.validateOn === "change" && i("validate");
-    }, b = (k) => {
-      i("blur", k), t.validateOn === "blur" && i("validate");
-    }, g = (k) => {
-      i("focus", k);
+  setup(e, { emit: f }) {
+    const t = e, a = f, l = y(() => {
+      const m = ["form-control"];
+      return t.size && m.push(`form-control-${t.size}`), t.validationState === "valid" && m.push("is-valid"), t.validationState === "invalid" && m.push("is-invalid"), m.join(" ");
+    }), o = y(() => {
+      const m = typeof t.modelValue == "string" ? t.modelValue : "";
+      return m ? m.length : 0;
+    }), s = y(() => t.maxlength ? `${o.value} / ${t.maxlength}` : `${o.value}`), u = (m) => {
+      const p = m.target;
+      a("update:modelValue", p.value), a("input", m), t.validateOn === "input" && a("validate");
+    }, d = (m) => {
+      a("change", m), t.validateOn === "change" && a("validate");
+    }, r = (m) => {
+      a("blur", m), t.validateOn === "blur" && a("validate");
+    }, c = (m) => {
+      a("focus", m);
     };
-    return (k, M) => (l(), o("div", ja, [
-      e.label ? (l(), o("label", {
+    return (m, p) => (i(), n("div", Fa, [
+      e.label ? (i(), n("label", {
         key: 0,
         for: e.id,
         class: "form-label"
       }, [
-        N(f(e.label) + " ", 1),
-        e.required ? (l(), o("span", Oa, "*")) : u("", !0)
-      ], 8, La)) : u("", !0),
-      m("textarea", {
+        w(b(e.label) + " ", 1),
+        e.required ? (i(), n("span", za, "*")) : v("", !0)
+      ], 8, La)) : v("", !0),
+      h("textarea", {
         id: e.id,
-        class: h(n.value),
+        class: g(l.value),
         value: e.modelValue,
         placeholder: e.placeholder,
         disabled: e.disabled,
@@ -2084,36 +1938,36 @@ const $e = /* @__PURE__ */ p({
         required: e.required,
         rows: e.rows,
         maxlength: e.maxlength,
-        "aria-invalid": a.value === "invalid",
+        "aria-invalid": e.validationState === "invalid",
         "aria-describedby": e.validationMessage || e.helpText ? `${e.id}-feedback` : void 0,
-        onInput: y,
-        onChange: v,
-        onBlur: b,
-        onFocus: g
-      }, null, 42, Da),
-      e.showCharCount ? (l(), o("div", Xa, f(s.value), 1)) : u("", !0),
-      e.helpText && !e.validationMessage && !e.showCharCount ? (l(), o("div", {
+        onInput: u,
+        onChange: d,
+        onBlur: r,
+        onFocus: c
+      }, null, 42, Aa),
+      e.showCharCount ? (i(), n("div", ja, b(s.value), 1)) : v("", !0),
+      e.helpText && !e.validationMessage && !e.showCharCount ? (i(), n("div", {
         key: 2,
         id: `${e.id}-feedback`,
         class: "form-text"
-      }, f(e.helpText), 9, Ra)) : u("", !0),
-      a.value === "valid" ? (l(), o("div", Ga, f(e.validationMessage || "Looks good!"), 1)) : u("", !0),
-      a.value === "invalid" ? (l(), o("div", {
+      }, b(e.helpText), 9, Ia)) : v("", !0),
+      e.validationState === "valid" ? (i(), n("div", Oa, b(e.validationMessage || "Looks good!"), 1)) : v("", !0),
+      e.validationState === "invalid" ? (i(), n("div", {
         key: 4,
         id: `${e.id}-feedback`,
         class: "invalid-feedback",
         style: { display: "block" }
-      }, f(e.validationMessage || "Please provide a valid value."), 9, Ea)) : u("", !0)
+      }, b(e.validationMessage || "Please provide a valid value."), 9, Ea)) : v("", !0)
     ]));
   }
-}), Ha = { class: "mb-3" }, Ua = ["for"], Qa = {
+}), Ra = { class: "mb-3" }, Xa = ["for"], Ya = {
   key: 0,
   class: "text-danger"
-}, Ka = ["disabled"], Wa = ["id", "value", "disabled", "readonly", "required", "min", "max", "step", "aria-invalid", "aria-describedby"], Ja = ["disabled"], Za = ["id"], _a = {
+}, Ga = ["disabled"], Ha = ["id", "value", "disabled", "readonly", "required", "min", "max", "step", "aria-invalid", "aria-describedby"], Ka = ["disabled"], Ua = ["id"], Qa = {
   key: 2,
   class: "valid-feedback",
   style: { display: "block" }
-}, el = ["id"], tl = /* @__PURE__ */ p({
+}, Wa = ["id"], Ja = /* @__PURE__ */ C({
   __name: "VibeFormSpinbutton",
   props: {
     modelValue: {
@@ -2139,57 +1993,57 @@ const $e = /* @__PURE__ */ p({
     vertical: { type: Boolean, default: !1 }
   },
   emits: ["update:modelValue", "validate", "blur", "focus", "input", "change", "increment", "decrement"],
-  setup(e, { emit: d }) {
-    const t = e, i = d, a = c(() => t.validationState), n = c(() => {
-      const B = ["form-control"];
-      return t.size && B.push(`form-control-${t.size}`), a.value === "valid" && B.push("is-valid"), a.value === "invalid" && B.push("is-invalid"), B.join(" ");
-    }), r = c(() => {
-      const B = ["input-group"];
-      return t.size && B.push(`input-group-${t.size}`), t.vertical && B.push("input-group-vertical"), B.join(" ");
-    }), s = c(() => t.disabled || t.readonly ? !1 : t.min === void 0 || t.wrap ? !0 : t.modelValue > t.min), y = c(() => t.disabled || t.readonly ? !1 : t.max === void 0 || t.wrap ? !0 : t.modelValue < t.max), v = (B) => {
-      const P = B.target;
-      let X = P.value === "" ? 0 : Number(P.value);
-      t.min !== void 0 && X < t.min && (X = t.min), t.max !== void 0 && X > t.max && (X = t.max), i("update:modelValue", X), i("input", B), t.validateOn === "input" && i("validate");
-    }, b = (B) => {
-      i("change", B), t.validateOn === "change" && i("validate");
-    }, g = (B) => {
-      i("blur", B), t.validateOn === "blur" && i("validate");
-    }, k = (B) => {
-      i("focus", B);
-    }, M = () => {
-      if (!y.value) return;
-      let B = t.modelValue + t.step;
-      t.max !== void 0 && B > t.max && (B = t.wrap ? t.min ?? 0 : t.max), i("update:modelValue", B), i("increment", B), t.validateOn === "change" && i("validate");
-    }, A = () => {
+  setup(e, { emit: f }) {
+    const t = e, a = f, l = y(() => {
+      const x = ["form-control"];
+      return t.size && x.push(`form-control-${t.size}`), t.validationState === "valid" && x.push("is-valid"), t.validationState === "invalid" && x.push("is-invalid"), x.join(" ");
+    }), o = y(() => {
+      const x = ["input-group"];
+      return t.size && x.push(`input-group-${t.size}`), t.vertical && x.push("input-group-vertical"), x.join(" ");
+    }), s = 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), d = (x) => {
+      const A = x.target;
+      let j = A.value === "" ? 0 : Number(A.value);
+      t.min !== void 0 && j < t.min && (j = t.min), t.max !== void 0 && j > t.max && (j = t.max), a("update:modelValue", j), a("input", x), t.validateOn === "input" && a("validate");
+    }, r = (x) => {
+      a("change", x), t.validateOn === "change" && a("validate");
+    }, c = (x) => {
+      a("blur", x), t.validateOn === "blur" && a("validate");
+    }, m = (x) => {
+      a("focus", x);
+    }, p = () => {
+      if (!u.value) return;
+      let x = t.modelValue + t.step;
+      t.max !== void 0 && x > t.max && (x = t.wrap ? t.min ?? 0 : t.max), a("update:modelValue", x), a("increment", x), t.validateOn === "change" && a("validate");
+    }, B = () => {
       if (!s.value) return;
-      let B = t.modelValue - t.step;
-      t.min !== void 0 && B < t.min && (B = t.wrap ? t.max ?? 0 : t.min), i("update:modelValue", B), i("decrement", B), t.validateOn === "change" && i("validate");
+      let x = t.modelValue - t.step;
+      t.min !== void 0 && x < t.min && (x = t.wrap ? t.max ?? 0 : t.min), a("update:modelValue", x), a("decrement", x), t.validateOn === "change" && a("validate");
     };
-    return (B, P) => (l(), o("div", Ha, [
-      e.label ? (l(), o("label", {
+    return (x, A) => (i(), n("div", Ra, [
+      e.label ? (i(), n("label", {
         key: 0,
         for: e.id,
         class: "form-label"
       }, [
-        N(f(e.label) + " ", 1),
-        e.required ? (l(), o("span", Qa, "*")) : u("", !0)
-      ], 8, Ua)) : u("", !0),
-      m("div", {
-        class: h(r.value)
+        w(b(e.label) + " ", 1),
+        e.required ? (i(), n("span", Ya, "*")) : v("", !0)
+      ], 8, Xa)) : v("", !0),
+      h("div", {
+        class: g(o.value)
       }, [
-        m("button", {
+        h("button", {
           class: "btn btn-outline-secondary",
           type: "button",
           disabled: !s.value,
-          onClick: A,
+          onClick: B,
           "aria-label": "Decrement"
-        }, [...P[0] || (P[0] = [
-          m("span", { "aria-hidden": "true" }, "−", -1)
-        ])], 8, Ka),
-        m("input", {
+        }, [...A[0] || (A[0] = [
+          h("span", { "aria-hidden": "true" }, "−", -1)
+        ])], 8, Ga),
+        h("input", {
           id: e.id,
           type: "number",
-          class: h(n.value),
+          class: g(l.value),
           value: e.modelValue,
           disabled: e.disabled,
           readonly: e.readonly,
@@ -2197,45 +2051,45 @@ const $e = /* @__PURE__ */ p({
           min: e.min,
           max: e.max,
           step: e.step,
-          "aria-invalid": a.value === "invalid",
+          "aria-invalid": e.validationState === "invalid",
           "aria-describedby": e.validationMessage || e.helpText ? `${e.id}-feedback` : void 0,
-          onInput: v,
-          onChange: b,
-          onBlur: g,
-          onFocus: k
-        }, null, 42, Wa),
-        m("button", {
+          onInput: d,
+          onChange: r,
+          onBlur: c,
+          onFocus: m
+        }, null, 42, Ha),
+        h("button", {
           class: "btn btn-outline-secondary",
           type: "button",
-          disabled: !y.value,
-          onClick: M,
+          disabled: !u.value,
+          onClick: p,
           "aria-label": "Increment"
-        }, [...P[1] || (P[1] = [
-          m("span", { "aria-hidden": "true" }, "+", -1)
-        ])], 8, Ja)
+        }, [...A[1] || (A[1] = [
+          h("span", { "aria-hidden": "true" }, "+", -1)
+        ])], 8, Ka)
       ], 2),
-      e.helpText && !e.validationMessage ? (l(), o("div", {
+      e.helpText && !e.validationMessage ? (i(), n("div", {
         key: 1,
         id: `${e.id}-feedback`,
         class: "form-text"
-      }, f(e.helpText), 9, Za)) : u("", !0),
-      a.value === "valid" ? (l(), o("div", _a, f(e.validationMessage || "Looks good!"), 1)) : u("", !0),
-      a.value === "invalid" ? (l(), o("div", {
+      }, b(e.helpText), 9, Ua)) : v("", !0),
+      e.validationState === "valid" ? (i(), n("div", Qa, b(e.validationMessage || "Looks good!"), 1)) : v("", !0),
+      e.validationState === "invalid" ? (i(), n("div", {
         key: 3,
         id: `${e.id}-feedback`,
         class: "invalid-feedback",
         style: { display: "block" }
-      }, f(e.validationMessage || "Please provide a valid value."), 9, el)) : u("", !0)
+      }, b(e.validationMessage || "Please provide a valid value."), 9, Wa)) : v("", !0)
     ]));
   }
-}), al = /* @__PURE__ */ K(tl, [["__scopeId", "data-v-f7aee3b4"]]), ll = { class: "mb-3" }, il = ["for"], nl = {
+}), Za = /* @__PURE__ */ Q(Ja, [["__scopeId", "data-v-fbee244e"]]), _a = { class: "mb-3" }, el = ["for"], tl = {
   key: 0,
   class: "text-danger"
-}, ol = ["id", "type", "value", "disabled", "readonly", "required", "min", "max", "aria-invalid", "aria-describedby"], sl = ["id"], dl = {
+}, al = ["id", "type", "value", "disabled", "readonly", "required", "min", "max", "aria-invalid", "aria-describedby"], ll = ["id"], il = {
   key: 2,
   class: "valid-feedback",
   style: { display: "block" }
-}, rl = ["id"], ul = /* @__PURE__ */ p({
+}, nl = ["id"], sl = /* @__PURE__ */ C({
   __name: "VibeFormDatepicker",
   props: {
     modelValue: {
@@ -2259,68 +2113,68 @@ const $e = /* @__PURE__ */ p({
     type: { type: String, default: "date" }
   },
   emits: ["update:modelValue", "validate", "blur", "focus", "input", "change"],
-  setup(e, { emit: d }) {
-    const t = e, i = d, a = c(() => t.validationState), n = c(() => {
-      const b = ["form-control"];
-      return t.size && b.push(`form-control-${t.size}`), a.value === "valid" && b.push("is-valid"), a.value === "invalid" && b.push("is-invalid"), b.join(" ");
-    }), r = (b) => {
-      const g = b.target;
-      i("update:modelValue", g.value), i("input", b), t.validateOn === "input" && i("validate");
-    }, s = (b) => {
-      i("change", b), t.validateOn === "change" && i("validate");
-    }, y = (b) => {
-      i("blur", b), t.validateOn === "blur" && i("validate");
-    }, v = (b) => {
-      i("focus", b);
+  setup(e, { emit: f }) {
+    const t = e, a = f, l = y(() => {
+      const r = ["form-control"];
+      return t.size && r.push(`form-control-${t.size}`), t.validationState === "valid" && r.push("is-valid"), t.validationState === "invalid" && r.push("is-invalid"), r.join(" ");
+    }), o = (r) => {
+      const c = r.target;
+      a("update:modelValue", c.value), a("input", r), t.validateOn === "input" && a("validate");
+    }, s = (r) => {
+      a("change", r), t.validateOn === "change" && a("validate");
+    }, u = (r) => {
+      a("blur", r), t.validateOn === "blur" && a("validate");
+    }, d = (r) => {
+      a("focus", r);
     };
-    return (b, g) => (l(), o("div", ll, [
-      e.label ? (l(), o("label", {
+    return (r, c) => (i(), n("div", _a, [
+      e.label ? (i(), n("label", {
         key: 0,
         for: e.id,
         class: "form-label"
       }, [
-        N(f(e.label) + " ", 1),
-        e.required ? (l(), o("span", nl, "*")) : u("", !0)
-      ], 8, il)) : u("", !0),
-      m("input", {
+        w(b(e.label) + " ", 1),
+        e.required ? (i(), n("span", tl, "*")) : v("", !0)
+      ], 8, el)) : v("", !0),
+      h("input", {
         id: e.id,
         type: e.type,
-        class: h(n.value),
+        class: g(l.value),
         value: e.modelValue,
         disabled: e.disabled,
         readonly: e.readonly,
         required: e.required,
         min: e.min,
         max: e.max,
-        "aria-invalid": a.value === "invalid",
+        "aria-invalid": e.validationState === "invalid",
         "aria-describedby": e.validationMessage || e.helpText ? `${e.id}-feedback` : void 0,
-        onInput: r,
+        onInput: o,
         onChange: s,
-        onBlur: y,
-        onFocus: v
-      }, null, 42, ol),
-      e.helpText && !e.validationMessage ? (l(), o("div", {
+        onBlur: u,
+        onFocus: d
+      }, null, 42, al),
+      e.helpText && !e.validationMessage ? (i(), n("div", {
         key: 1,
         id: `${e.id}-feedback`,
         class: "form-text"
-      }, f(e.helpText), 9, sl)) : u("", !0),
-      a.value === "valid" ? (l(), o("div", dl, f(e.validationMessage || "Looks good!"), 1)) : u("", !0),
-      a.value === "invalid" ? (l(), o("div", {
+      }, b(e.helpText), 9, ll)) : v("", !0),
+      e.validationState === "valid" ? (i(), n("div", il, b(e.validationMessage || "Looks good!"), 1)) : v("", !0),
+      e.validationState === "invalid" ? (i(), n("div", {
         key: 3,
         id: `${e.id}-feedback`,
         class: "invalid-feedback",
         style: { display: "block" }
-      }, f(e.validationMessage || "Please provide a valid date."), 9, rl)) : u("", !0)
+      }, b(e.validationMessage || "Please provide a valid date."), 9, nl)) : v("", !0)
     ]));
   }
-}), cl = ["id", "checked", "value", "disabled", "required", "indeterminate", "aria-invalid", "aria-describedby"], fl = ["for"], vl = {
+}), ol = ["id", "checked", "value", "disabled", "required", "indeterminate", "aria-invalid", "aria-describedby"], dl = ["for"], rl = {
   key: 0,
   class: "text-danger"
-}, bl = ["id"], ml = {
+}, ul = ["id"], cl = {
   key: 2,
   class: "valid-feedback",
   style: { display: "block" }
-}, yl = ["id"], hl = /* @__PURE__ */ p({
+}, fl = ["id"], vl = /* @__PURE__ */ C({
   __name: "VibeFormCheckbox",
   props: {
     modelValue: {
@@ -2342,79 +2196,79 @@ const $e = /* @__PURE__ */ p({
     indeterminate: { type: Boolean, default: !1 }
   },
   emits: ["update:modelValue", "validate", "blur", "focus", "change"],
-  setup(e, { emit: d }) {
-    const t = e, i = d, a = c(() => t.validationState), n = c(() => {
-      const g = ["form-check-input"];
-      return a.value === "valid" && g.push("is-valid"), a.value === "invalid" && g.push("is-invalid"), g.join(" ");
-    }), r = c(() => {
-      const g = ["form-check"];
-      return t.inline && g.push("form-check-inline"), g.join(" ");
-    }), s = c(() => Array.isArray(t.modelValue) ? t.modelValue.includes(t.value) : t.modelValue === t.value || t.modelValue === !0), y = (g) => {
-      const k = g.target;
-      let M;
+  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(" ");
+    }), o = y(() => {
+      const c = ["form-check"];
+      return t.inline && c.push("form-check-inline"), c.join(" ");
+    }), s = y(() => Array.isArray(t.modelValue) ? t.modelValue.includes(t.value) : t.modelValue === t.value || t.modelValue === !0), u = (c) => {
+      const m = c.target;
+      let p;
       if (Array.isArray(t.modelValue))
-        if (M = [...t.modelValue], k.checked)
-          M.includes(t.value) || M.push(t.value);
+        if (p = [...t.modelValue], m.checked)
+          p.includes(t.value) || p.push(t.value);
         else {
-          const A = M.indexOf(t.value);
-          A > -1 && M.splice(A, 1);
+          const B = p.indexOf(t.value);
+          B > -1 && p.splice(B, 1);
         }
       else
-        M = k.checked;
-      i("update:modelValue", M), i("change", g), t.validateOn === "change" && i("validate");
-    }, v = (g) => {
-      i("blur", g), t.validateOn === "blur" && i("validate");
-    }, b = (g) => {
-      i("focus", g);
+        p = m.checked;
+      a("update:modelValue", p), a("change", c), t.validateOn === "change" && a("validate");
+    }, d = (c) => {
+      a("blur", c), t.validateOn === "blur" && a("validate");
+    }, r = (c) => {
+      a("focus", c);
     };
-    return (g, k) => (l(), o("div", {
-      class: h(r.value)
+    return (c, m) => (i(), n("div", {
+      class: g(o.value)
     }, [
-      m("input", {
+      h("input", {
         id: e.id,
         type: "checkbox",
-        class: h(n.value),
+        class: g(l.value),
         checked: s.value,
         value: e.value,
         disabled: e.disabled,
         required: e.required,
         indeterminate: e.indeterminate,
-        "aria-invalid": a.value === "invalid",
+        "aria-invalid": e.validationState === "invalid",
         "aria-describedby": e.validationMessage || e.helpText ? `${e.id}-feedback` : void 0,
-        onChange: y,
-        onBlur: v,
-        onFocus: b
-      }, null, 42, cl),
-      e.label ? (l(), o("label", {
+        onChange: u,
+        onBlur: d,
+        onFocus: r
+      }, null, 42, ol),
+      e.label ? (i(), n("label", {
         key: 0,
         for: e.id,
         class: "form-check-label"
       }, [
-        N(f(e.label) + " ", 1),
-        e.required ? (l(), o("span", vl, "*")) : u("", !0)
-      ], 8, fl)) : u("", !0),
-      e.helpText && !e.validationMessage ? (l(), o("div", {
+        w(b(e.label) + " ", 1),
+        e.required ? (i(), n("span", rl, "*")) : v("", !0)
+      ], 8, dl)) : v("", !0),
+      e.helpText && !e.validationMessage ? (i(), n("div", {
         key: 1,
         id: `${e.id}-feedback`,
         class: "form-text"
-      }, f(e.helpText), 9, bl)) : u("", !0),
-      a.value === "valid" ? (l(), o("div", ml, f(e.validationMessage || "Looks good!"), 1)) : u("", !0),
-      a.value === "invalid" ? (l(), o("div", {
+      }, b(e.helpText), 9, ul)) : v("", !0),
+      e.validationState === "valid" ? (i(), n("div", cl, b(e.validationMessage || "Looks good!"), 1)) : v("", !0),
+      e.validationState === "invalid" ? (i(), n("div", {
         key: 3,
         id: `${e.id}-feedback`,
         class: "invalid-feedback",
         style: { display: "block" }
-      }, f(e.validationMessage || "You must check this box."), 9, yl)) : u("", !0)
+      }, b(e.validationMessage || "You must check this box."), 9, fl)) : v("", !0)
     ], 2));
   }
-}), gl = ["id", "checked", "value", "name", "disabled", "required", "aria-invalid", "aria-describedby"], pl = ["for"], $l = {
+}), bl = ["id", "checked", "value", "name", "disabled", "required", "aria-invalid", "aria-describedby"], ml = ["for"], hl = {
   key: 0,
   class: "text-danger"
-}, kl = ["id"], Sl = {
+}, yl = ["id"], gl = {
   key: 2,
   class: "valid-feedback",
   style: { display: "block" }
-}, Vl = ["id"], xl = /* @__PURE__ */ p({
+}, pl = ["id"], $l = /* @__PURE__ */ C({
   __name: "VibeFormRadio",
   props: {
     modelValue: {
@@ -2436,68 +2290,68 @@ const $e = /* @__PURE__ */ p({
     helpText: { type: String, default: void 0 }
   },
   emits: ["update:modelValue", "validate", "blur", "focus", "change"],
-  setup(e, { emit: d }) {
-    const t = e, i = d, a = c(() => t.validationState), n = c(() => {
-      const g = ["form-check-input"];
-      return a.value === "valid" && g.push("is-valid"), a.value === "invalid" && g.push("is-invalid"), g.join(" ");
-    }), r = c(() => {
-      const g = ["form-check"];
-      return t.inline && g.push("form-check-inline"), g.join(" ");
-    }), s = c(() => t.modelValue === t.value), y = (g) => {
-      g.target.checked && i("update:modelValue", t.value), i("change", g), t.validateOn === "change" && i("validate");
-    }, v = (g) => {
-      i("blur", g), t.validateOn === "blur" && i("validate");
-    }, b = (g) => {
-      i("focus", g);
+  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(" ");
+    }), o = y(() => {
+      const c = ["form-check"];
+      return t.inline && c.push("form-check-inline"), c.join(" ");
+    }), s = y(() => t.modelValue === t.value), u = (c) => {
+      c.target.checked && a("update:modelValue", t.value), a("change", c), t.validateOn === "change" && a("validate");
+    }, d = (c) => {
+      a("blur", c), t.validateOn === "blur" && a("validate");
+    }, r = (c) => {
+      a("focus", c);
     };
-    return (g, k) => (l(), o("div", {
-      class: h(r.value)
+    return (c, m) => (i(), n("div", {
+      class: g(o.value)
     }, [
-      m("input", {
+      h("input", {
         id: e.id,
         type: "radio",
-        class: h(n.value),
+        class: g(l.value),
         checked: s.value,
         value: e.value,
         name: e.name,
         disabled: e.disabled,
         required: e.required,
-        "aria-invalid": a.value === "invalid",
+        "aria-invalid": e.validationState === "invalid",
         "aria-describedby": e.validationMessage || e.helpText ? `${e.id}-feedback` : void 0,
-        onChange: y,
-        onBlur: v,
-        onFocus: b
-      }, null, 42, gl),
-      e.label ? (l(), o("label", {
+        onChange: u,
+        onBlur: d,
+        onFocus: r
+      }, null, 42, bl),
+      e.label ? (i(), n("label", {
         key: 0,
         for: e.id,
         class: "form-check-label"
       }, [
-        N(f(e.label) + " ", 1),
-        e.required ? (l(), o("span", $l, "*")) : u("", !0)
-      ], 8, pl)) : u("", !0),
-      e.helpText && !e.validationMessage ? (l(), o("div", {
+        w(b(e.label) + " ", 1),
+        e.required ? (i(), n("span", hl, "*")) : v("", !0)
+      ], 8, ml)) : v("", !0),
+      e.helpText && !e.validationMessage ? (i(), n("div", {
         key: 1,
         id: `${e.id}-feedback`,
         class: "form-text"
-      }, f(e.helpText), 9, kl)) : u("", !0),
-      a.value === "valid" ? (l(), o("div", Sl, f(e.validationMessage || "Looks good!"), 1)) : u("", !0),
-      a.value === "invalid" ? (l(), o("div", {
+      }, b(e.helpText), 9, yl)) : v("", !0),
+      e.validationState === "valid" ? (i(), n("div", gl, b(e.validationMessage || "Looks good!"), 1)) : v("", !0),
+      e.validationState === "invalid" ? (i(), n("div", {
         key: 3,
         id: `${e.id}-feedback`,
         class: "invalid-feedback",
         style: { display: "block" }
-      }, f(e.validationMessage || "Please select an option."), 9, Vl)) : u("", !0)
+      }, b(e.validationMessage || "Please select an option."), 9, pl)) : v("", !0)
     ], 2));
   }
-}), Cl = { class: "form-check form-switch" }, Bl = ["id", "checked", "disabled", "required", "aria-invalid", "aria-describedby"], wl = ["for"], Nl = {
+}), kl = { class: "form-check form-switch" }, Sl = ["id", "checked", "disabled", "required", "aria-invalid", "aria-describedby"], Vl = ["for"], Cl = {
   key: 0,
   class: "text-danger"
-}, Tl = ["id"], Ml = {
+}, xl = ["id"], wl = {
   key: 2,
   class: "valid-feedback",
   style: { display: "block" }
-}, Pl = ["id"], ql = /* @__PURE__ */ p({
+}, Bl = ["id"], Nl = /* @__PURE__ */ C({
   __name: "VibeFormSwitch",
   props: {
     modelValue: {
@@ -2516,70 +2370,70 @@ const $e = /* @__PURE__ */ p({
     helpText: { type: String, default: void 0 }
   },
   emits: ["update:modelValue", "validate", "blur", "focus", "change"],
-  setup(e, { emit: d }) {
-    const t = e, i = d, a = c(() => t.validationState), n = c(() => {
-      const v = ["form-check-input"];
-      return a.value === "valid" && v.push("is-valid"), a.value === "invalid" && v.push("is-invalid"), v.join(" ");
-    }), r = (v) => {
-      const b = v.target;
-      i("update:modelValue", b.checked), i("change", v), t.validateOn === "change" && i("validate");
-    }, s = (v) => {
-      i("blur", v), t.validateOn === "blur" && i("validate");
-    }, y = (v) => {
-      i("focus", v);
+  setup(e, { emit: f }) {
+    const t = e, a = f, l = y(() => {
+      const d = ["form-check-input"];
+      return t.validationState === "valid" && d.push("is-valid"), t.validationState === "invalid" && d.push("is-invalid"), d.join(" ");
+    }), o = (d) => {
+      const r = d.target;
+      a("update:modelValue", r.checked), a("change", d), t.validateOn === "change" && a("validate");
+    }, s = (d) => {
+      a("blur", d), t.validateOn === "blur" && a("validate");
+    }, u = (d) => {
+      a("focus", d);
     };
-    return (v, b) => (l(), o("div", Cl, [
-      m("input", {
+    return (d, r) => (i(), n("div", kl, [
+      h("input", {
         id: e.id,
         type: "checkbox",
-        class: h(n.value),
+        class: g(l.value),
         checked: e.modelValue,
         disabled: e.disabled,
         required: e.required,
-        "aria-invalid": a.value === "invalid",
+        "aria-invalid": e.validationState === "invalid",
         "aria-describedby": e.validationMessage || e.helpText ? `${e.id}-feedback` : void 0,
         role: "switch",
-        onChange: r,
+        onChange: o,
         onBlur: s,
-        onFocus: y
-      }, null, 42, Bl),
-      e.label ? (l(), o("label", {
+        onFocus: u
+      }, null, 42, Sl),
+      e.label ? (i(), n("label", {
         key: 0,
         for: e.id,
         class: "form-check-label"
       }, [
-        N(f(e.label) + " ", 1),
-        e.required ? (l(), o("span", Nl, "*")) : u("", !0)
-      ], 8, wl)) : u("", !0),
-      e.helpText && !e.validationMessage ? (l(), o("div", {
+        w(b(e.label) + " ", 1),
+        e.required ? (i(), n("span", Cl, "*")) : v("", !0)
+      ], 8, Vl)) : v("", !0),
+      e.helpText && !e.validationMessage ? (i(), n("div", {
         key: 1,
         id: `${e.id}-feedback`,
         class: "form-text"
-      }, f(e.helpText), 9, Tl)) : u("", !0),
-      a.value === "valid" ? (l(), o("div", Ml, f(e.validationMessage || "Looks good!"), 1)) : u("", !0),
-      a.value === "invalid" ? (l(), o("div", {
+      }, b(e.helpText), 9, xl)) : v("", !0),
+      e.validationState === "valid" ? (i(), n("div", wl, b(e.validationMessage || "Looks good!"), 1)) : v("", !0),
+      e.validationState === "invalid" ? (i(), n("div", {
         key: 3,
         id: `${e.id}-feedback`,
         class: "invalid-feedback",
         style: { display: "block" }
-      }, f(e.validationMessage || "You must toggle this switch."), 9, Pl)) : u("", !0)
+      }, b(e.validationMessage || "You must toggle this switch."), 9, Bl)) : v("", !0)
     ]));
   }
-}), Fl = ["for"], Il = {
+}), Tl = ["for"], Ml = {
   key: 0,
   class: "text-danger"
-}, zl = ["id"], Al = {
+}, ql = ["id"], Pl = {
   key: 1,
   class: "valid-feedback",
   style: { display: "block" }
-}, jl = ["id"], Ll = ["for"], Ol = {
+}, Fl = ["id"], Ll = ["for"], zl = {
   key: 0,
   class: "text-danger"
-}, Dl = ["id"], Xl = {
+}, Al = ["id"], jl = {
   key: 2,
   class: "valid-feedback",
   style: { display: "block" }
-}, Rl = ["id"], Gl = /* @__PURE__ */ p({
+}, Il = ["id"], Ol = /* @__PURE__ */ C({
   __name: "VibeFormGroup",
   props: {
     label: { type: String, default: void 0 },
@@ -2594,84 +2448,83 @@ const $e = /* @__PURE__ */ p({
     labelAlign: { type: String, default: void 0 }
   },
   setup(e) {
-    const d = e, t = c(() => {
-      const r = [];
-      return d.floating ? r.push("form-floating") : d.row ? r.push("row", "mb-3") : r.push("mb-3"), r.join(" ");
-    }), i = c(() => {
-      const r = [];
-      return d.floating ? r.push("form-label") : d.row ? (r.push("col-form-label"), d.labelCols && r.push(`col-sm-${d.labelCols}`), d.labelAlign && r.push(`text-${d.labelAlign}`)) : r.push("form-label"), r.join(" ");
-    }), a = c(() => d.row && d.labelCols ? `col-sm-${12 - Number(d.labelCols)}` : ""), n = c(() => d.labelFor ? `${d.labelFor}-feedback` : void 0);
-    return (r, s) => (l(), o("div", {
-      class: h(t.value)
+    const f = e, t = y(() => {
+      const s = [];
+      return f.floating ? s.push("form-floating") : f.row ? s.push("row", "mb-3") : s.push("mb-3"), s.join(" ");
+    }), a = y(() => {
+      const s = [];
+      return f.floating ? s.push("form-label") : f.row ? (s.push("col-form-label"), f.labelCols && s.push(`col-sm-${f.labelCols}`), f.labelAlign && s.push(`text-${f.labelAlign}`)) : s.push("form-label"), s.join(" ");
+    }), l = y(() => f.row && f.labelCols ? `col-sm-${12 - Number(f.labelCols)}` : ""), o = y(() => f.labelFor ? `${f.labelFor}-feedback` : void 0);
+    return (s, u) => (i(), n("div", {
+      class: g(t.value)
     }, [
-      e.label && !e.floating ? (l(), o("label", {
+      e.label && !e.floating ? (i(), n("label", {
         key: 0,
         for: e.labelFor,
-        class: h(i.value)
+        class: g(a.value)
       }, [
-        N(f(e.label) + " ", 1),
-        e.required ? (l(), o("span", Il, "*")) : u("", !0)
-      ], 10, Fl)) : u("", !0),
-      e.row && e.labelCols ? (l(), o("div", {
+        w(b(e.label) + " ", 1),
+        e.required ? (i(), n("span", Ml, "*")) : v("", !0)
+      ], 10, Tl)) : v("", !0),
+      e.row && e.labelCols ? (i(), n("div", {
         key: 1,
-        class: h(a.value)
+        class: g(l.value)
       }, [
-        $(r.$slots, "default"),
-        e.helpText && !e.validationMessage ? (l(), o("div", {
+        V(s.$slots, "default"),
+        e.helpText && !e.validationMessage ? (i(), n("div", {
           key: 0,
-          id: n.value,
+          id: o.value,
           class: "form-text"
-        }, f(e.helpText), 9, zl)) : u("", !0),
-        e.validationState === "valid" ? (l(), o("div", Al, f(e.validationMessage || "Looks good!"), 1)) : u("", !0),
-        e.validationState === "invalid" ? (l(), o("div", {
+        }, b(e.helpText), 9, ql)) : v("", !0),
+        e.validationState === "valid" ? (i(), n("div", Pl, b(e.validationMessage || "Looks good!"), 1)) : v("", !0),
+        e.validationState === "invalid" ? (i(), n("div", {
           key: 2,
-          id: n.value,
+          id: o.value,
           class: "invalid-feedback",
           style: { display: "block" }
-        }, f(e.validationMessage || "Please provide a valid value."), 9, jl)) : u("", !0)
-      ], 2)) : (l(), o(q, { key: 2 }, [
-        $(r.$slots, "default"),
-        e.label && e.floating ? (l(), o("label", {
+        }, b(e.validationMessage || "Please provide a valid value."), 9, Fl)) : v("", !0)
+      ], 2)) : (i(), n(F, { key: 2 }, [
+        V(s.$slots, "default"),
+        e.label && e.floating ? (i(), n("label", {
           key: 0,
           for: e.labelFor,
-          class: h(i.value)
+          class: g(a.value)
         }, [
-          N(f(e.label) + " ", 1),
-          e.required ? (l(), o("span", Ol, "*")) : u("", !0)
-        ], 10, Ll)) : u("", !0),
-        e.helpText && !e.validationMessage ? (l(), o("div", {
+          w(b(e.label) + " ", 1),
+          e.required ? (i(), n("span", zl, "*")) : v("", !0)
+        ], 10, Ll)) : v("", !0),
+        e.helpText && !e.validationMessage ? (i(), n("div", {
           key: 1,
-          id: n.value,
+          id: o.value,
           class: "form-text"
-        }, f(e.helpText), 9, Dl)) : u("", !0),
-        e.validationState === "valid" ? (l(), o("div", Xl, f(e.validationMessage || "Looks good!"), 1)) : u("", !0),
-        e.validationState === "invalid" ? (l(), o("div", {
+        }, b(e.helpText), 9, Al)) : v("", !0),
+        e.validationState === "valid" ? (i(), n("div", jl, b(e.validationMessage || "Looks good!"), 1)) : v("", !0),
+        e.validationState === "invalid" ? (i(), n("div", {
           key: 3,
-          id: n.value,
+          id: o.value,
           class: "invalid-feedback",
           style: { display: "block" }
-        }, f(e.validationMessage || "Please provide a valid value."), 9, Rl)) : u("", !0)
+        }, b(e.validationMessage || "Please provide a valid value."), 9, Il)) : v("", !0)
       ], 64))
     ], 2));
   }
-}), El = { class: "mb-3" }, Yl = ["for"], Hl = {
+}), El = { class: "mb-3" }, Dl = ["for"], Rl = {
   key: 0,
   class: "text-danger"
-}, Ul = {
+}, Xl = {
   key: 1,
   class: "alert alert-warning",
   role: "alert"
-}, Ql = ["id"], Kl = ["id"], Wl = {
+}, Yl = ["id"], Gl = ["id"], Hl = {
   key: 4,
   class: "valid-feedback",
   style: { display: "block" }
-}, Jl = ["id"], Zl = /* @__PURE__ */ p({
+}, Kl = ["id"], Ul = /* @__PURE__ */ C({
   __name: "VibeFormWysiwyg",
   props: {
     modelValue: {
       type: String,
-      default: "",
-      validator: (e) => !0
+      default: ""
     },
     id: { type: String, required: !0 },
     label: { type: String, default: void 0 },
@@ -2689,232 +2542,229 @@ const $e = /* @__PURE__ */ p({
     height: { type: String, default: "200px" }
   },
   emits: ["update:modelValue", "validate", "blur", "focus", "change", "ready"],
-  setup(e, { emit: d }) {
-    const t = e, i = d, a = F(null), n = F(null), r = F(!1), s = F(null), y = c(() => t.validationState), v = c(() => {
-      const k = ["vibe-wysiwyg-container"];
-      return y.value === "valid" && k.push("is-valid"), y.value === "invalid" && k.push("is-invalid"), t.disabled && k.push("disabled"), k.join(" ");
-    }), b = [
+  setup(e, { emit: f }) {
+    const t = e, a = f, l = T(null), o = T(null), s = T(!1), u = T(null), d = T(!1), r = T(null), c = T(null), m = 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 = [
       [{ header: [1, 2, 3, !1] }],
       ["bold", "italic", "underline", "strike"],
       [{ list: "ordered" }, { list: "bullet" }],
       [{ color: [] }, { background: [] }],
       ["link", "image"],
       ["clean"]
-    ], g = () => t.toolbar === !1 ? !1 : t.toolbar === !0 || t.toolbar === void 0 ? b : t.toolbar;
-    return ge(async () => {
+    ], x = () => t.toolbar === !1 ? !1 : t.toolbar === !0 || t.toolbar === void 0 ? B : t.toolbar, A = (N) => {
+      o.value && (d.value = !0, o.value.setContents([], "silent"), N && o.value.clipboard.dangerouslyPasteHTML(N, "silent"), d.value = !1);
+    }, j = () => !o.value || o.value.getText().trim().length === 0 ? "" : o.value.getSemanticHTML();
+    return G(async () => {
       try {
-        const k = await import("quill"), M = k.default || k;
-        if (await import("quill/dist/quill.snow.css"), a.value) {
-          const A = {
+        const N = await import("quill"), O = N.default || N;
+        if (await import("quill/dist/quill.snow.css"), l.value) {
+          const K = {
             theme: t.theme,
             placeholder: t.placeholder,
             readOnly: t.readonly || t.disabled,
             modules: {
-              toolbar: g()
+              toolbar: x()
             }
           };
-          n.value = new M(a.value, A), t.modelValue && (n.value.root.innerHTML = t.modelValue), n.value.on("text-change", () => {
-            const B = n.value.root.innerHTML, P = n.value.getText().trim().length === 0;
-            i("update:modelValue", P ? "" : B), i("change"), t.validateOn === "change" && i("validate");
-          }), n.value.root.addEventListener("blur", () => {
-            i("blur"), t.validateOn === "blur" && i("validate");
-          }), n.value.root.addEventListener("focus", () => {
-            i("focus");
-          }), r.value = !0, i("ready", n.value);
+          o.value = new O(l.value, K), t.modelValue && A(t.modelValue), m.value = () => {
+            if (d.value) return;
+            const U = j();
+            a("update:modelValue", U), a("change"), t.validateOn === "change" && a("validate");
+          }, o.value.on("text-change", m.value), r.value = () => {
+            a("blur"), t.validateOn === "blur" && a("validate");
+          }, o.value.root.addEventListener("blur", r.value), c.value = () => {
+            a("focus");
+          }, o.value.root.addEventListener("focus", c.value), s.value = !0, a("ready", o.value);
         }
-      } catch (k) {
-        console.error("Failed to load Quill editor:", k), s.value = "Failed to load WYSIWYG editor. Please install quill: npm install quill", r.value = !1;
+      } catch (N) {
+        console.error("Failed to load Quill editor:", N), u.value = "Failed to load WYSIWYG editor. Please install quill: npm install quill", s.value = !1;
       }
-    }), pe(() => {
-      n.value && (n.value = null);
-    }), O(() => t.modelValue, (k) => {
-      n.value && n.value.root.innerHTML !== k && (n.value.root.innerHTML = k || "");
-    }), O(() => t.disabled, (k) => {
-      n.value && n.value.enable(!k);
-    }), O(() => t.readonly, (k) => {
-      n.value && n.value.enable(!k);
-    }), (k, M) => (l(), o("div", El, [
-      e.label ? (l(), o("label", {
+    }), H(() => {
+      o.value && (m.value && (o.value.off("text-change", m.value), m.value = null), r.value && (o.value.root.removeEventListener("blur", r.value), r.value = null), c.value && (o.value.root.removeEventListener("focus", c.value), c.value = null), o.value = null);
+    }), E(() => t.modelValue, (N) => {
+      if (!o.value) return;
+      j() !== (N || "") && A(N || "");
+    }), E(() => t.disabled, (N) => {
+      o.value && o.value.enable(!N);
+    }), E(() => t.readonly, (N) => {
+      o.value && o.value.enable(!N);
+    }), (N, O) => (i(), n("div", El, [
+      e.label ? (i(), n("label", {
         key: 0,
         for: e.id,
         class: "form-label"
       }, [
-        N(f(e.label) + " ", 1),
-        e.required ? (l(), o("span", Hl, "*")) : u("", !0)
-      ], 8, Yl)) : u("", !0),
-      s.value ? (l(), o("div", Ul, f(s.value), 1)) : (l(), o("div", {
+        w(b(e.label) + " ", 1),
+        e.required ? (i(), n("span", Rl, "*")) : v("", !0)
+      ], 8, Dl)) : v("", !0),
+      u.value ? (i(), n("div", Xl, b(u.value), 1)) : (i(), n("div", {
         key: 2,
-        class: h(v.value),
-        style: R({ minHeight: e.height })
+        class: g(p.value),
+        style: D({ minHeight: e.height })
       }, [
-        m("div", {
+        h("div", {
           ref_key: "editorContainer",
-          ref: a,
+          ref: l,
           id: e.id
-        }, null, 8, Ql)
+        }, null, 8, Yl)
       ], 6)),
-      e.helpText && !e.validationMessage ? (l(), o("div", {
+      e.helpText && !e.validationMessage ? (i(), n("div", {
         key: 3,
         id: `${e.id}-feedback`,
         class: "form-text"
-      }, f(e.helpText), 9, Kl)) : u("", !0),
-      y.value === "valid" ? (l(), o("div", Wl, f(e.validationMessage || "Looks good!"), 1)) : u("", !0),
-      y.value === "invalid" ? (l(), o("div", {
+      }, b(e.helpText), 9, Gl)) : v("", !0),
+      e.validationState === "valid" ? (i(), n("div", Hl, b(e.validationMessage || "Looks good!"), 1)) : v("", !0),
+      e.validationState === "invalid" ? (i(), n("div", {
         key: 5,
         id: `${e.id}-feedback`,
         class: "invalid-feedback",
         style: { display: "block" }
-      }, f(e.validationMessage || "Please provide valid content."), 9, Jl)) : u("", !0)
+      }, b(e.validationMessage || "Please provide valid content."), 9, Kl)) : v("", !0)
     ]));
   }
-}), _l = /* @__PURE__ */ K(Zl, [["__scopeId", "data-v-792a0bda"]]), ti = {
+}), Ql = /* @__PURE__ */ Q(Ul, [["__scopeId", "data-v-8e6e81b0"]]), Jl = {
   install(e) {
-    e.component("VibeAlert", $e), e.component("VibeBadge", ke), e.component("VibeButton", Se), e.component("VibeButtonGroup", xe), e.component("VibeCloseButton", Be), e.component("VibeSpinner", Ne), e.component("VibePlaceholder", Te), e.component("VibeContainer", Me), e.component("VibeRow", Pe), e.component("VibeCol", qe), e.component("VibeCard", Ie), e.component("VibeCardHeader", J), e.component("VibeCardBody", Z), e.component("VibeCardFooter", _), e.component("VibeCardImg", U), e.component("VibeCardTitle", ee), e.component("VibeCardText", te), e.component("VibeBreadcrumb", Le), e.component("VibeBreadcrumbItem", ae), e.component("VibeNav", De), e.component("VibeNavItem", Q), e.component("VibeNavbar", Xe), e.component("VibeNavbarBrand", Re), e.component("VibeNavbarToggle", Ee), e.component("VibeNavbarNav", Ye), e.component("VibePagination", Ue), e.component("VibePaginationItem", H), e.component("VibeTabContent", Qe), e.component("VibeTabPane", Ke), e.component("VibeListGroup", We), e.component("VibeListGroupItem", le), e.component("VibeProgress", Je), e.component("VibeProgressBar", _e), e.component("VibeAccordion", ot), e.component("VibeAccordionItem", ie), e.component("VibeCollapse", st), e.component("VibeDropdown", ct), e.component("VibeDropdownItem", ne), e.component("VibeModal", gt), e.component("VibeOffcanvas", Vt), e.component("VibeToast", Nt), e.component("VibeCarousel", Rt), e.component("VibeCarouselSlide", oe), e.component("VibeTooltip", Et), e.component("VibePopover", Ht), e.component("VibeScrollspy", Ut), e.component("VibeIcon", Qt), e.component("VibeDataTable", ga), e.component("VibeFormInput", Ba), e.component("VibeFormSelect", Aa), e.component("VibeFormTextarea", Ya), e.component("VibeFormSpinbutton", al), e.component("VibeFormDatepicker", ul), e.component("VibeFormCheckbox", hl), e.component("VibeFormRadio", xl), e.component("VibeFormSwitch", ql), e.component("VibeFormGroup", Gl), e.component("VibeFormWysiwyg", _l);
+    e.component("VibeAlert", re), e.component("VibeBadge", ue), e.component("VibeButton", ce), e.component("VibeButtonGroup", ve), e.component("VibeCloseButton", me), e.component("VibeSpinner", ye), e.component("VibePlaceholder", ge), e.component("VibeContainer", pe), e.component("VibeRow", $e), e.component("VibeCol", ke), e.component("VibeCard", Te), e.component("VibeBreadcrumb", Fe), e.component("VibeNav", Le), e.component("VibeNavbar", ze), e.component("VibeNavbarBrand", Ae), e.component("VibeNavbarToggle", Ie), e.component("VibeNavbarNav", Oe), e.component("VibePagination", Ye), e.component("VibeTabContent", He), e.component("VibeListGroup", Ke), e.component("VibeProgress", Qe), e.component("VibeAccordion", tt), e.component("VibeCollapse", at), e.component("VibeDropdown", rt), e.component("VibeModal", ht), e.component("VibeOffcanvas", kt), e.component("VibeToast", wt), e.component("VibeCarousel", It), e.component("VibeTooltip", Et), e.component("VibePopover", Rt), e.component("VibeScrollspy", Xt), e.component("VibeIcon", Yt), e.component("VibeDataTable", ba), e.component("VibeFormInput", Sa), e.component("VibeFormSelect", Pa), e.component("VibeFormTextarea", Da), e.component("VibeFormSpinbutton", Za), e.component("VibeFormDatepicker", sl), e.component("VibeFormCheckbox", vl), e.component("VibeFormRadio", $l), e.component("VibeFormSwitch", Nl), e.component("VibeFormGroup", Ol), e.component("VibeFormWysiwyg", Ql);
   }
 };
-function ai(e = "") {
-  const d = F(e), t = F(null), i = F(""), a = F(!1), n = F(!1), r = F(!1), s = async (M) => {
-    if (!M)
-      return t.value = null, i.value = "", { valid: !0 };
-    r.value = !0;
+function Zl(e = "") {
+  const f = T(e), t = T(null), a = T(""), l = T(!1), o = T(!1), s = T(!1), u = async (B) => {
+    if (!B)
+      return t.value = null, a.value = "", { valid: !0 };
+    s.value = !0;
     try {
-      const A = Array.isArray(M) ? M : [{ validator: M }];
-      for (const B of A) {
-        const P = await B.validator(d.value);
-        if (P === !1 || typeof P == "string")
-          return t.value = "invalid", i.value = typeof P == "string" ? P : B.message || "Invalid value", r.value = !1, { valid: !1, message: i.value };
+      const x = Array.isArray(B) ? B : [{ validator: B }];
+      for (const A of x) {
+        const j = await A.validator(f.value);
+        if (j === !1 || typeof j == "string")
+          return t.value = "invalid", a.value = typeof j == "string" ? j : A.message || "Invalid value", s.value = !1, { valid: !1, message: a.value };
       }
-      return t.value = "valid", i.value = "", r.value = !1, { valid: !0 };
+      return t.value = "valid", a.value = "", s.value = !1, { valid: !0 };
     } catch {
-      return t.value = "invalid", i.value = "Validation error occurred", r.value = !1, { valid: !1, message: i.value };
+      return t.value = "invalid", a.value = "Validation error occurred", s.value = !1, { valid: !1, message: a.value };
     }
-  }, y = () => {
-    d.value = e, t.value = null, i.value = "", a.value = !1, n.value = !1, r.value = !1;
-  }, v = () => {
-    n.value = !0;
-  }, b = () => {
-    a.value = !0;
-  }, g = c(() => t.value === "valid"), k = c(() => t.value === "invalid");
+  }, d = () => {
+    f.value = e, t.value = null, a.value = "", l.value = !1, o.value = !1, s.value = !1;
+  }, r = () => {
+    o.value = !0;
+  }, c = () => {
+    l.value = !0;
+  }, m = y(() => t.value === "valid"), p = y(() => t.value === "invalid");
   return {
-    value: d,
+    value: f,
     validationState: t,
-    validationMessage: i,
-    isDirty: a,
-    isTouched: n,
-    isValidating: r,
-    isValid: g,
-    isInvalid: k,
-    validate: s,
-    reset: y,
-    markAsTouched: v,
-    markAsDirty: b
+    validationMessage: a,
+    isDirty: l,
+    isTouched: o,
+    isValidating: s,
+    isValid: m,
+    isInvalid: p,
+    validate: u,
+    reset: d,
+    markAsTouched: r,
+    markAsDirty: c
   };
 }
-const li = {
+const _l = {
   required: (e = "This field is required") => ({
-    validator: (d) => Array.isArray(d) ? d.length > 0 || e : typeof d == "string" ? d.trim().length > 0 || e : d != null && d !== "" || e,
+    validator: (f) => Array.isArray(f) ? f.length > 0 || e : typeof f == "string" ? f.trim().length > 0 || e : f != null && f !== "" || e,
     message: e
   }),
   email: (e = "Please enter a valid email address") => ({
-    validator: (d) => d ? /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(d) || e : !0,
+    validator: (f) => f ? /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(f) || e : !0,
     message: e
   }),
-  minLength: (e, d) => ({
-    validator: (t) => t ? t.length >= e || d || `Minimum length is ${e} characters` : !0,
-    message: d
+  minLength: (e, f) => ({
+    validator: (t) => t ? t.length >= e || f || `Minimum length is ${e} characters` : !0,
+    message: f
   }),
-  maxLength: (e, d) => ({
-    validator: (t) => t ? t.length <= e || d || `Maximum length is ${e} characters` : !0,
-    message: d
+  maxLength: (e, f) => ({
+    validator: (t) => t ? t.length <= e || f || `Maximum length is ${e} characters` : !0,
+    message: f
   }),
-  min: (e, d) => ({
-    validator: (t) => t == null || t === "" ? !0 : Number(t) >= e || d || `Minimum value is ${e}`,
-    message: d
+  min: (e, f) => ({
+    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}`;
+    },
+    message: f
   }),
-  max: (e, d) => ({
-    validator: (t) => t == null || t === "" ? !0 : Number(t) <= e || d || `Maximum value is ${e}`,
-    message: d
+  max: (e, f) => ({
+    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}`;
+    },
+    message: f
   }),
-  pattern: (e, d = "Invalid format") => ({
-    validator: (t) => t ? e.test(t) || d : !0,
-    message: d
+  pattern: (e, f = "Invalid format") => ({
+    validator: (t) => t ? e.test(t) || f : !0,
+    message: f
   }),
   url: (e = "Please enter a valid URL") => ({
-    validator: (d) => {
-      if (!d) return !0;
+    validator: (f) => {
+      if (!f) return !0;
       try {
-        return new URL(d), !0;
+        return new URL(f), !0;
       } catch {
         return e;
       }
     },
     message: e
   }),
-  // Async validator example for API validation
+  // Async validator for API validation
   async: (e) => ({
     validator: e
   })
 };
 export {
-  ot as VibeAccordion,
-  ie as VibeAccordionItem,
-  $e as VibeAlert,
-  ke as VibeBadge,
-  Le as VibeBreadcrumb,
-  ae as VibeBreadcrumbItem,
-  Se as VibeButton,
-  xe as VibeButtonGroup,
-  Ie as VibeCard,
-  Z as VibeCardBody,
-  _ as VibeCardFooter,
-  J as VibeCardHeader,
-  U as VibeCardImg,
-  te as VibeCardText,
-  ee as VibeCardTitle,
-  Rt as VibeCarousel,
-  oe as VibeCarouselSlide,
-  Be as VibeCloseButton,
-  qe as VibeCol,
-  st as VibeCollapse,
-  Me as VibeContainer,
-  ga as VibeDataTable,
-  ct as VibeDropdown,
-  ne as VibeDropdownItem,
-  hl as VibeFormCheckbox,
-  ul as VibeFormDatepicker,
-  Gl as VibeFormGroup,
-  Ba as VibeFormInput,
-  xl as VibeFormRadio,
-  Aa as VibeFormSelect,
-  al as VibeFormSpinbutton,
-  ql as VibeFormSwitch,
-  Ya as VibeFormTextarea,
-  _l as VibeFormWysiwyg,
-  Qt as VibeIcon,
-  We as VibeListGroup,
-  le as VibeListGroupItem,
-  gt as VibeModal,
-  De as VibeNav,
-  Q as VibeNavItem,
-  Xe as VibeNavbar,
-  Re as VibeNavbarBrand,
-  Ye as VibeNavbarNav,
-  Ee as VibeNavbarToggle,
-  Vt as VibeOffcanvas,
-  Ue as VibePagination,
-  H as VibePaginationItem,
-  Te as VibePlaceholder,
-  Ht as VibePopover,
-  Je as VibeProgress,
-  _e as VibeProgressBar,
-  Pe as VibeRow,
-  Ut as VibeScrollspy,
-  Ne as VibeSpinner,
-  Qe as VibeTabContent,
-  Ke as VibeTabPane,
-  Nt as VibeToast,
+  tt as VibeAccordion,
+  re as VibeAlert,
+  ue as VibeBadge,
+  Fe as VibeBreadcrumb,
+  ce as VibeButton,
+  ve as VibeButtonGroup,
+  Te as VibeCard,
+  It as VibeCarousel,
+  me as VibeCloseButton,
+  ke as VibeCol,
+  at as VibeCollapse,
+  pe as VibeContainer,
+  ba as VibeDataTable,
+  rt as VibeDropdown,
+  vl as VibeFormCheckbox,
+  sl as VibeFormDatepicker,
+  Ol as VibeFormGroup,
+  Sa as VibeFormInput,
+  $l as VibeFormRadio,
+  Pa as VibeFormSelect,
+  Za as VibeFormSpinbutton,
+  Nl as VibeFormSwitch,
+  Da as VibeFormTextarea,
+  Ql as VibeFormWysiwyg,
+  Yt as VibeIcon,
+  Ke as VibeListGroup,
+  ht as VibeModal,
+  Le as VibeNav,
+  ze as VibeNavbar,
+  Ae as VibeNavbarBrand,
+  Oe as VibeNavbarNav,
+  Ie as VibeNavbarToggle,
+  kt as VibeOffcanvas,
+  Ye as VibePagination,
+  ge as VibePlaceholder,
+  Rt as VibePopover,
+  Qe as VibeProgress,
+  $e as VibeRow,
+  Xt as VibeScrollspy,
+  ye as VibeSpinner,
+  He as VibeTabContent,
+  wt as VibeToast,
   Et as VibeTooltip,
-  ti as default,
-  ai as useFormValidation,
-  li as validators
+  Jl as default,
+  Zl as useFormValidation,
+  _l as validators
 };