@wwtdev/bsds-components-vue3 2.0.0 → 2.0.1

package/lib/bsds-components.js

@@ -1,4 +1,4 @@
-import { computed as b, ref as w, onMounted as O, onUnmounted as ne, defineAsyncComponent as Oe, watch as E, openBlock as s, createElementBlock as v, unref as f, createElementVNode as m, renderSlot as k, createBlock as L, resolveDynamicComponent as U, createCommentVNode as $, toDisplayString as I, createVNode as P, normalizeClass as X, useAttrs as N, mergeProps as V, withCtx as A, Fragment as R, renderList as Y, createTextVNode as W, withDirectives as Ne, Transition as me, vShow as We, inject as te, provide as ae, onDeactivated as Ge, normalizeStyle as je, isRef as Fe, nextTick as Ue, useSlots as He } from "vue";
+import { computed as p, ref as k, onMounted as N, onUnmounted as ne, defineAsyncComponent as Oe, watch as V, openBlock as u, createElementBlock as v, unref as c, createElementVNode as m, renderSlot as I, createBlock as A, resolveDynamicComponent as U, createCommentVNode as $, toDisplayString as T, createVNode as D, normalizeClass as X, useAttrs as O, mergeProps as E, withCtx as C, Fragment as R, renderList as Y, createTextVNode as W, withDirectives as Ne, Transition as me, vShow as We, inject as te, provide as ae, onDeactivated as je, normalizeStyle as Ge, isRef as Fe, nextTick as Ue, useSlots as He } from "vue";
 import { v4 as Ke } from "uuid";
 import { BsIconCaretDown as Ye, BsIconWarning as ve, BsIconClose as oe, BsIconSearch as Xe, BsIconCaretLeftDouble as Ze, BsIconCaretLeft as Je, BsIconCaretRight as Qe, BsIconCaretRightDouble as _e, BsIconActionEllipsis as et, BsIconCircleExclamation as tt, BsIconThumbsUpStroke as at } from "@wwtdev/bsds-icons-vue3";
 import { Chart as fe, BarController as nt, BarElement as lt, CategoryScale as ot, LinearScale as it, Legend as rt, Tooltip as st } from "chart.js";
@@ -8,16 +8,16 @@ const ye = {
   onClick: "button",
   type: "button"
 };
-function ge(e, a, t = "button") {
-  const l = dt(e, a, t), n = b(() => {
-    const o = l.value === "button", r = {};
-    return o ? (r.type = a.type || "button", r.autocomplete = "off", e.disabled && (r.disabled = !0)) : e.disabled && (r["aria-disabled"] = "true", r.tabindex = "-1"), r;
+function he(e, a, t = "button") {
+  const l = dt(e, a, t), n = p(() => {
+    const o = l.value === "button", d = {};
+    return o ? (d.type = a.type || "button", d.autocomplete = "off", e.disabled && (d.disabled = !0)) : e.disabled && (d["aria-disabled"] = "true", d.tabindex = "-1"), d;
   });
   return { rootTag: l, attrsToBind: n };
 }
 function dt(e, a, t) {
   const l = Object.keys(ye).find((n) => ut(e, a, n));
-  return w(ye[l] || t);
+  return k(ye[l] || t);
 }
 function ut(e, a, t) {
   return e[t] || a[t];
@@ -29,41 +29,41 @@ const ct = (e, a) => {
       return (o = n.value) == null ? void 0 : o.contains(l.target);
     }) || a(l);
   };
-  O(() => {
+  N(() => {
     document.addEventListener("click", t);
   }), ne(() => {
     document.removeEventListener("click", t);
   });
 };
 function ie(e) {
-  const a = b(() => {
+  const a = p(() => {
     var n, o;
     return ((o = (n = e.href) == null ? void 0 : n.startsWith) == null ? void 0 : o.call(n, "/")) || !1;
-  }), t = b(() => {
+  }), t = p(() => {
     var n, o;
     return a.value && ((n = e.router) == null ? void 0 : n.navigateTo) || ((o = e.router) == null ? void 0 : o.push) || null;
   });
   function l(n) {
-    var o, r, i, d, u;
+    var o, d, i, s, r;
     if (e.disabled) {
       n.preventDefault(), n.stopImmediatePropagation();
       return;
     }
-    !e.href || !t.value || ((r = (o = n.target.href) == null ? void 0 : o.endsWith) != null && r.call(o, e.href) || (u = (d = (i = n.target.closest("a")) == null ? void 0 : i.href) == null ? void 0 : d.endsWith) != null && u.call(d, e.href)) && (n.preventDefault(), t.value(e.href));
+    !e.href || !t.value || ((d = (o = n.target.href) == null ? void 0 : o.endsWith) != null && d.call(o, e.href) || (r = (s = (i = n.target.closest("a")) == null ? void 0 : i.href) == null ? void 0 : s.endsWith) != null && r.call(s, e.href)) && (n.preventDefault(), t.value(e.href));
   }
   return { onLinkClick: l };
 }
 function Be(e) {
   return e.split("-").map((l) => l.charAt(0).toUpperCase() + l.slice(1)).join("");
 }
-const le = (e) => ({ icon: b(
+const le = (e) => ({ icon: p(
   () => Oe(() => import("@wwtdev/bsds-icons-vue3").then((t) => e.startsWith("bs-") ? t[Be(e)] : t[`BsIcon${Be(e)}`]))
 ) });
 function H(e = 1) {
   const a = [];
   for (let t = 0; t < e; t++)
-    a.push(w(""));
-  return O(() => {
+    a.push(k(""));
+  return N(() => {
     a.forEach((t) => t.value = Ke());
   }), a;
 }
@@ -71,14 +71,14 @@ const re = (e, a, t = void 0) => {
   const l = (n) => {
     e.includes(n.key) && a(n);
   };
-  O(() => {
+  N(() => {
     ((t == null ? void 0 : t.value) ?? document).addEventListener("keydown", l);
   }), ne(() => {
     ((t == null ? void 0 : t.value) ?? document).removeEventListener("keydown", l);
   });
 }, ft = (e, a, t) => {
   let l = null;
-  O(() => {
+  N(() => {
     l = new MutationObserver(a), l.observe(e.value, t);
   }), ne(() => {
     l.disconnect();
@@ -88,26 +88,26 @@ function Z(e, a) {
   var o;
   const t = new Set(((o = e.passAttrs) == null ? void 0 : o.split(",")) || "");
   t.delete("");
-  const l = w({}), n = w({});
-  for (let r in a)
-    t.has(r) ? n.value[r] = a[r] : l.value[r] = a[r];
+  const l = k({}), n = k({});
+  for (let d in a)
+    t.has(d) ? n.value[d] = a[d] : l.value[d] = a[d];
   return {
     toRoot: l,
     toChild: n
   };
 }
 const se = (e) => {
-  const a = w(!1);
-  return O(() => {
+  const a = k(!1);
+  return N(() => {
     a.value = e.enterControlled || e.preloaded ? e.enterTrigger : e.shown;
-  }), E(() => e.shown, (t) => {
+  }), V(() => e.shown, (t) => {
     a.value = t;
-  }), E(() => e.enterTrigger, (t) => {
+  }), V(() => e.enterTrigger, (t) => {
     a.value = t;
-  }), E(() => e.leaveTrigger, (t) => {
+  }), V(() => e.leaveTrigger, (t) => {
     t && (a.value = !1);
   }), { transition: a };
-}, vt = ["id", "data-stacked"], gt = ["data-open"], ht = ["aria-controls", "aria-expanded"], pt = {
+}, vt = ["id", "data-stacked"], ht = ["data-open"], pt = ["aria-controls", "aria-expanded"], gt = {
   key: 0,
   "data-position": "start",
   style: { display: "inline-flex" }
@@ -127,12 +127,12 @@ const se = (e) => {
   },
   emits: ["toggled"],
   setup(e, { emit: a }) {
-    const t = e, l = a, n = w(null), o = w(!1), { icon: r } = le(t.icon), [i] = H(), d = b(() => i.value + "-content"), u = b(() => i.value + "-title"), c = b(() => t.openItemId === i.value || t.openItem === !0), g = b(() => t.controlled ? c.value : o.value);
-    function p() {
+    const t = e, l = a, n = k(null), o = k(!1), { icon: d } = le(t.icon), [i] = H(), s = p(() => i.value + "-content"), r = p(() => i.value + "-title"), f = p(() => t.openItemId && t.openItemId === i.value || t.openItem === !0), b = p(() => t.controlled ? f.value : o.value);
+    function g() {
       l("toggled", i.value), t.controlled || (o.value = !o.value);
     }
-    return (y, D) => (s(), v("div", {
-      id: f(i),
+    return (y, L) => (u(), v("div", {
+      id: c(i),
       ref_key: "containerRef",
       ref: n,
       class: "bs-accordion",
@@ -141,40 +141,40 @@ const se = (e) => {
     }, [
       m("header", {
         part: "header",
-        "data-open": g.value
+        "data-open": b.value
       }, [
         m("button", {
-          "aria-controls": d.value,
-          "aria-expanded": g.value,
+          "aria-controls": s.value,
+          "aria-expanded": b.value,
           type: "button",
-          onClick: p
+          onClick: g
         }, [
-          e.icon || y.$slots.icon ? (s(), v("span", pt, [
-            k(y.$slots, "icon", {}, () => [
-              e.icon ? (s(), L(U(f(r) ? f(r) : "span"), { key: 0 })) : $("", !0)
+          e.icon || y.$slots.icon ? (u(), v("span", gt, [
+            I(y.$slots, "icon", {}, () => [
+              e.icon ? (u(), A(U(c(d) ? c(d) : "span"), { key: 0 })) : $("", !0)
             ])
           ])) : $("", !0),
           m("span", {
-            id: u.value,
+            id: r.value,
             "aria-level": e.headingLevel,
             role: "heading"
-          }, I(e.headerText), 9, bt),
-          P(f(Ye), {
+          }, T(e.headerText), 9, bt),
+          D(c(Ye), {
             size: "md",
             "data-position": "end"
           })
-        ], 8, ht)
-      ], 8, gt),
+        ], 8, pt)
+      ], 8, ht),
       m("div", {
-        "aria-labelledby": u.value,
+        "aria-labelledby": r.value,
         class: "bs-accordion-content",
-        "data-open": g.value,
-        id: d.value,
+        "data-open": b.value,
+        id: s.value,
         part: "content",
         role: "region"
       }, [
         m("div", null, [
-          k(y.$slots, "default")
+          I(y.$slots, "default")
         ])
       ], 8, mt)
     ], 8, vt));
@@ -222,15 +222,15 @@ const se = (e) => {
     }
   },
   setup(e) {
-    const a = e, t = w(null), l = b(() => a.count === 0 ? "0" : !a.count || a.dot ? null : a.count > a.countMax ? a.countMax + "+" : a.count.toString()), n = b(() => {
-      var d, u;
-      const o = ((u = (d = t.value) == null ? void 0 : d.textContent) == null ? void 0 : u.trim()) || "", r = l.value ? l.value + " " : "";
-      if (!r && !a.dot)
+    const a = e, t = k(null), l = p(() => a.count === 0 ? "0" : !a.count || a.dot ? null : a.count > a.countMax ? a.countMax + "+" : a.count.toString()), n = p(() => {
+      var s, r;
+      const o = ((r = (s = t.value) == null ? void 0 : s.textContent) == null ? void 0 : r.trim()) || "", d = l.value ? l.value + " " : "";
+      if (!d && !a.dot)
         return o;
       const i = a.count !== 1 ? "s" : "";
-      return `${o}, ${r}${a.label}${i}`;
+      return `${o}, ${d}${a.label}${i}`;
     });
-    return (o, r) => (s(), v("span", {
+    return (o, d) => (u(), v("span", {
       ref_key: "hostRef",
       ref: t,
       class: X({ "bs-badge": e.dot || l.value }),
@@ -241,7 +241,7 @@ const se = (e) => {
       "data-show-zero": e.showZero,
       "aria-label": n.value
     }, [
-      k(o.$slots, "default")
+      I(o.$slots, "default")
     ], 10, yt));
   }
 }, Bt = {
@@ -252,24 +252,24 @@ const se = (e) => {
   __name: "BsBanner",
   emits: ["dismiss"],
   setup(e, { emit: a }) {
-    const t = a, l = w(!1);
+    const t = a, l = k(!1);
     function n() {
       l.value = !0, t("dismiss");
     }
-    return (o, r) => l.value ? $("", !0) : (s(), v("div", Bt, [
+    return (o, d) => l.value ? $("", !0) : (u(), v("div", Bt, [
       m("div", $t, [
         m("div", St, [
-          P(f(ve), { size: "lg" })
+          D(c(ve), { size: "lg" })
         ]),
         m("p", null, [
-          k(o.$slots, "default")
+          I(o.$slots, "default")
         ]),
         m("button", {
           type: "button",
           title: "Close Banner",
           onClick: n
         }, [
-          P(f(oe))
+          D(c(oe))
         ])
       ])
     ]));
@@ -286,8 +286,8 @@ const se = (e) => {
     size: { type: String, validator: (e) => !e || e === "sm" }
   },
   setup(e) {
-    const a = e, t = N(), { rootTag: l, attrsToBind: n } = ge(a, t), { onLinkClick: o } = ie(a);
-    return (r, i) => (s(), L(U(f(l)), V({
+    const a = e, t = O(), { rootTag: l, attrsToBind: n } = he(a, t), { onLinkClick: o } = ie(a);
+    return (d, i) => (u(), A(U(c(l)), E({
       class: "bs-button",
       "data-component": "bs-button",
       "data-ghost": e.ghostBtn,
@@ -295,9 +295,9 @@ const se = (e) => {
       "data-text": e.textBtn,
       "data-variant": e.variant,
       href: e.href
-    }, f(n), { onClick: f(o) }), {
-      default: A(() => [
-        k(r.$slots, "default")
+    }, c(n), { onClick: c(o) }), {
+      default: C(() => [
+        I(d.$slots, "default")
       ]),
       _: 3
     }, 16, ["data-ghost", "data-size", "data-text", "data-variant", "href", "onClick"]));
@@ -321,30 +321,30 @@ const se = (e) => {
   setup(e) {
     return (a, t) => {
       var l;
-      return s(), v("div", kt, [
+      return u(), v("div", kt, [
         m("table", { summary: e.tableTitle }, [
           m("thead", null, [
             m("tr", null, [
               m("th", {
                 colspan: ((l = e.dataIdxLabels) == null ? void 0 : l.length) + 1
-              }, I(e.tableTitle), 9, Tt)
+              }, T(e.tableTitle), 9, Tt)
             ]),
             m("tr", null, [
               xt,
-              (s(!0), v(R, null, Y(e.dataIdxLabels, (n) => (s(), v("th", {
+              (u(!0), v(R, null, Y(e.dataIdxLabels, (n) => (u(), v("th", {
                 key: n,
                 scope: "col"
-              }, I(n), 1))), 128))
+              }, T(n), 1))), 128))
             ])
           ]),
           m("tbody", null, [
-            (s(!0), v(R, null, Y(e.data, (n) => (s(), v("tr", {
+            (u(!0), v(R, null, Y(e.data, (n) => (u(), v("tr", {
               key: n.label
             }, [
-              m("th", Ct, I(n.label), 1),
-              (s(!0), v(R, null, Y(n.data, (o, r) => (s(), v("td", {
-                key: `${o}${r}`
-              }, I(o), 1))), 128))
+              m("th", Ct, T(n.label), 1),
+              (u(!0), v(R, null, Y(n.data, (o, d) => (u(), v("td", {
+                key: `${o}${d}`
+              }, T(o), 1))), 128))
             ]))), 128))
           ])
         ], 8, It)
@@ -357,13 +357,13 @@ const se = (e) => {
     e.innerHTML = "", e.style.setProperty("--legend-padding", `${a.scales.x.left}px`), a.options.plugins.legend.labels.generateLabels(a).forEach((l) => {
       const n = document.createElement("li");
       n.onclick = () => {
-        const { type: d } = a.config._config;
-        d === "pie" || d === "doughnut" ? a.toggleDataVisibility(l.index) : a.setDatasetVisibility(l.datasetIndex, !a.isDatasetVisible(l.datasetIndex)), a.update();
+        const { type: s } = a.config._config;
+        s === "pie" || s === "doughnut" ? a.toggleDataVisibility(l.index) : a.setDatasetVisibility(l.datasetIndex, !a.isDatasetVisible(l.datasetIndex)), a.update();
       };
       const o = document.createElement("span");
       o.style.setProperty("--item-box-fill", l.fillStyle), o.style.setProperty("--item-box-stroke", l.strokeStyle);
-      const r = document.createTextNode(l.text), i = document.createElement("p");
-      i.style.setProperty("--item-text-color", l.fontColor), i.style.setProperty("--item-text-decoration", l.hidden ? "line-through" : "none"), i.appendChild(r), n.appendChild(o), n.appendChild(i), e.appendChild(n);
+      const d = document.createTextNode(l.text), i = document.createElement("p");
+      i.style.setProperty("--item-text-color", l.fontColor), i.style.setProperty("--item-text-decoration", l.hidden ? "line-through" : "none"), i.appendChild(d), n.appendChild(o), n.appendChild(i), e.appendChild(n);
     });
   }
 }), Pt = ({ type: e, datasets: a, labels: t, tooltips: l }) => ({
@@ -464,16 +464,16 @@ const Et = {
     }
   },
   setup(e) {
-    const a = e, t = w(null), l = w(null);
+    const a = e, t = k(null), l = k(null);
     let n;
-    const o = b(() => {
-      const c = {
-        datasets: r.value,
+    const o = p(() => {
+      const f = {
+        datasets: d.value,
         labels: a.dataIdxLabels,
         type: "bar",
         tooltips: a.showTooltips
-      }, g = Pt(c);
-      return g.plugins = [Lt(l.value)], g.options.scales = {
+      }, b = Pt(f);
+      return b.plugins = [Lt(l.value)], b.options.scales = {
         x: {
           grid: {
             display: a.showXGrid
@@ -494,19 +494,19 @@ const Et = {
             text: a.yLabel
           }
         }
-      }, g;
-    }), r = b(() => a.data.map((c, g) => ({
-      ...c,
-      backgroundColor: Dt(g),
+      }, b;
+    }), d = p(() => a.data.map((f, b) => ({
+      ...f,
+      backgroundColor: Dt(b),
       categoryPercentage: a.data.length > 1 ? 0.5 : 0.33
-    }))), i = b(() => a.chartTitle || `${a.yLabel} / ${a.xLabel}`), d = $e(function(c, g) {
-      !n || c === g || (n.options = o.value.options, n.update());
-    }, 100), u = $e(function() {
+    }))), i = p(() => a.chartTitle || `${a.yLabel} / ${a.xLabel}`), s = $e(function(f, b) {
+      !n || f === b || (n.options = o.value.options, n.update());
+    }, 100), r = $e(function() {
       n && (n.data = o.value.data, n.update());
     }, 100);
-    return O(() => {
+    return N(() => {
       fe.register(nt, lt, ot, it, rt, st), fe.defaults.font.family = "'Roobert', sans-serif", n = new fe(t.value, o.value);
-    }), E(() => a.showLegend, d), E(() => a.showTooltips, d), E(() => a.showXGrid, d), E(() => a.showYGrid, d), E(() => a.stacked, d), E(() => a.xLabel, d), E(() => a.yLabel, d), E(() => a.data, u), E(() => a.dataIdxLabels, u), (c, g) => (s(), v("div", Et, [
+    }), V(() => a.showLegend, s), V(() => a.showTooltips, s), V(() => a.showXGrid, s), V(() => a.showYGrid, s), V(() => a.stacked, s), V(() => a.xLabel, s), V(() => a.yLabel, s), V(() => a.data, r), V(() => a.dataIdxLabels, r), (f, b) => (u(), v("div", Et, [
       m("figure", null, [
         m("div", null, [
           m("canvas", {
@@ -517,7 +517,7 @@ const Et = {
           }, null, 8, Vt)
         ]),
         m("div", null, [
-          P(At, {
+          D(At, {
             data: e.data,
             "data-idx-labels": e.dataIdxLabels,
             "table-title": i.value
@@ -589,35 +589,35 @@ const Et = {
   },
   emits: ["update:modelValue"],
   setup(e, { emit: a }) {
-    const t = e, l = N(), [n] = H(), { toChild: o, toRoot: r } = Z(t, l), i = w(null), d = b(() => t.inputId || n.value), u = b(() => t.checked || t.modelValue);
-    function c() {
-      i.value && (i.value.indeterminate = t.checkedPartially && !u.value);
+    const t = e, l = O(), [n] = H(), { toChild: o, toRoot: d } = Z(t, l), i = k(null), s = p(() => t.inputId || n.value), r = p(() => t.checked || t.modelValue);
+    function f() {
+      i.value && (i.value.indeterminate = t.checkedPartially && !r.value);
     }
-    return E(u, c), E(() => t.checkedPartially, c), (g, p) => (s(), v("div", V({
+    return V(r, f), V(() => t.checkedPartially, f), (b, g) => (u(), v("div", E({
       class: "bs-boolean",
       "data-component": "bs-checkbox",
       "data-size": e.size
-    }, f(r)), [
-      m("input", V({
+    }, c(d)), [
+      m("input", E({
         ref_key: "inputEl",
         ref: i,
-        checked: u.value,
+        checked: r.value,
         disabled: e.disabled,
-        id: d.value,
+        id: s.value,
         required: e.required,
         type: "checkbox",
         "data-error": e.error,
-        onChange: p[0] || (p[0] = (y) => g.$emit("update:modelValue", y.target.checked))
-      }, f(o)), null, 16, Mt),
-      e.label || g.$slots.label ? (s(), L(f(_), {
+        onChange: g[0] || (g[0] = (y) => b.$emit("update:modelValue", y.target.checked))
+      }, c(o)), null, 16, Mt),
+      e.label || b.$slots.label ? (u(), A(c(_), {
         key: 0,
-        for: d.value,
+        for: s.value,
         disabled: e.disabled,
         required: e.required
       }, {
-        default: A(() => [
-          k(g.$slots, "label", {}, () => [
-            W(I(e.label), 1)
+        default: C(() => [
+          I(b.$slots, "label", {}, () => [
+            W(T(e.label), 1)
           ])
         ]),
         _: 3
@@ -667,27 +667,27 @@ const Et = {
     }
   },
   setup(e) {
-    const a = e, t = N(), { rootTag: l, attrsToBind: n } = ge(a, t), { icon: o } = le(a.icon), { onLinkClick: r } = ie(a), i = b(() => a.textBtn ? {} : a.href ? { title: a.label } : { "aria-label": a.label }), d = b(() => {
+    const a = e, t = O(), { rootTag: l, attrsToBind: n } = he(a, t), { icon: o } = le(a.icon), { onLinkClick: d } = ie(a), i = p(() => a.textBtn ? {} : a.href ? { title: a.label } : { "aria-label": a.label }), s = p(() => {
       if (a.hoverEffect)
         return a.iconPosition;
-    }), u = b(() => a.textBtn && a.iconPosition !== "left"), c = b(() => a.textBtn && a.iconPosition === "left");
-    return (g, p) => (s(), L(U(f(l)), V({
+    }), r = p(() => a.textBtn && a.iconPosition !== "left"), f = p(() => a.textBtn && a.iconPosition === "left");
+    return (b, g) => (u(), A(U(c(l)), E({
       class: "bs-circle-button",
       "data-disabled": e.disabled,
-      "data-direction": d.value,
+      "data-direction": s.value,
       "data-ghost": e.ghostBtn,
       "data-size": e.size,
       "data-text": e.textBtn,
       href: e.href
-    }, { ...f(n), ...i.value }, { onClick: f(r) }), {
-      default: A(() => [
-        u.value ? (s(), v("span", Rt, I(e.label), 1)) : $("", !0),
+    }, { ...c(n), ...i.value }, { onClick: c(d) }), {
+      default: C(() => [
+        r.value ? (u(), v("span", Rt, T(e.label), 1)) : $("", !0),
         m("span", Ot, [
-          k(g.$slots, "icon", {}, () => [
-            (s(), L(U(f(o)), { size: e.size }, null, 8, ["size"]))
+          I(b.$slots, "icon", {}, () => [
+            (u(), A(U(c(o)), { size: e.size }, null, 8, ["size"]))
           ])
         ]),
-        c.value ? (s(), v("span", Nt, I(e.label), 1)) : $("", !0)
+        f.value ? (u(), v("span", Nt, T(e.label), 1)) : $("", !0)
       ]),
       _: 3
     }, 16, ["data-disabled", "data-direction", "data-ghost", "data-size", "data-text", "href", "onClick"]));
@@ -736,71 +736,71 @@ const Et = {
   ],
   setup(e, { emit: a }) {
     const t = e, l = a, n = [];
-    function o(d, u) {
-      const { duration: c, enterClass: g, enterAttribute: p } = t;
+    function o(s, r) {
+      const { duration: f, enterClass: b, enterAttribute: g } = t;
       n.push(setTimeout(() => {
-        g && d.classList.add(g), p && d.setAttribute(p, ""), n.push(setTimeout(() => {
-          u();
-        }, c)), l("enter", d);
+        b && s.classList.add(b), g && s.setAttribute(g, ""), n.push(setTimeout(() => {
+          r();
+        }, f)), l("enter", s);
       }));
     }
-    function r(d, u) {
+    function d(s, r) {
       const {
-        duration: c,
-        enterClass: g,
-        enterAttribute: p,
+        duration: f,
+        enterClass: b,
+        enterAttribute: g,
         leaveClass: y,
-        leaveAttribute: D
+        leaveAttribute: L
       } = t;
-      d.classList.remove(g), d.removeAttribute(p), y && d.classList.add(y), D && d.setAttribute(D, ""), n.push(setTimeout(() => {
-        u();
-      }, c)), l("leave", d);
+      s.classList.remove(b), s.removeAttribute(g), y && s.classList.add(y), L && s.setAttribute(L, ""), n.push(setTimeout(() => {
+        r();
+      }, f)), l("leave", s);
     }
-    function i(d) {
-      const { leaveClass: u, leaveAttribute: c } = t;
-      d.classList.remove(u), d.removeAttribute(c), l("after-leave", d);
+    function i(s) {
+      const { leaveClass: r, leaveAttribute: f } = t;
+      s.classList.remove(r), s.removeAttribute(f), l("after-leave", s);
     }
     return ne(() => {
-      n.forEach((d) => {
-        clearTimeout(d);
+      n.forEach((s) => {
+        clearTimeout(s);
       });
-    }), (d, u) => e.preloaded ? Ne((s(), L(me, {
+    }), (s, r) => e.preloaded ? Ne((u(), A(me, {
       key: 0,
       css: !1,
-      onBeforeEnter: u[0] || (u[0] = (c) => l("before-enter", c)),
+      onBeforeEnter: r[0] || (r[0] = (f) => l("before-enter", f)),
       onEnter: o,
-      onAfterEnter: u[1] || (u[1] = (c) => l("after-enter", c)),
-      onEnterCancelled: u[2] || (u[2] = (c) => l("enter-cancelled", c)),
-      onBeforeLeave: u[3] || (u[3] = (c) => l("before-leave", c)),
-      onLeave: r,
+      onAfterEnter: r[1] || (r[1] = (f) => l("after-enter", f)),
+      onEnterCancelled: r[2] || (r[2] = (f) => l("enter-cancelled", f)),
+      onBeforeLeave: r[3] || (r[3] = (f) => l("before-leave", f)),
+      onLeave: d,
       onAfterLeave: i,
-      onLeaveCancelled: u[4] || (u[4] = (c) => l("leave-cancelled", c))
+      onLeaveCancelled: r[4] || (r[4] = (f) => l("leave-cancelled", f))
     }, {
-      default: A(() => [
-        k(d.$slots, "default")
+      default: C(() => [
+        I(s.$slots, "default")
       ]),
       _: 3
     }, 512)), [
       [We, e.shown]
-    ]) : (s(), L(me, {
+    ]) : (u(), A(me, {
       key: 1,
       css: !1,
-      onBeforeEnter: u[5] || (u[5] = (c) => l("before-enter", c)),
+      onBeforeEnter: r[5] || (r[5] = (f) => l("before-enter", f)),
       onEnter: o,
-      onAfterEnter: u[6] || (u[6] = (c) => l("after-enter", c)),
-      onEnterCancelled: u[7] || (u[7] = (c) => l("enter-cancelled", c)),
-      onBeforeLeave: u[8] || (u[8] = (c) => l("before-leave", c)),
-      onLeave: r,
+      onAfterEnter: r[6] || (r[6] = (f) => l("after-enter", f)),
+      onEnterCancelled: r[7] || (r[7] = (f) => l("enter-cancelled", f)),
+      onBeforeLeave: r[8] || (r[8] = (f) => l("before-leave", f)),
+      onLeave: d,
       onAfterLeave: i,
-      onLeaveCancelled: u[9] || (u[9] = (c) => l("leave-cancelled", c))
+      onLeaveCancelled: r[9] || (r[9] = (f) => l("leave-cancelled", f))
     }, {
-      default: A(() => [
-        e.shown ? k(d.$slots, "default", { key: 0 }) : $("", !0)
+      default: C(() => [
+        e.shown ? I(s.$slots, "default", { key: 0 }) : $("", !0)
       ]),
       _: 3
     }));
   }
-}, Wt = ["data-width"], Gt = { key: 0 }, jt = { key: 0 }, Se = {
+}, Wt = ["data-width"], jt = { key: 0 }, Gt = { key: 0 }, Se = {
   __name: "BsDropdownInternal",
   props: {
     shown: {
@@ -821,11 +821,16 @@ const Et = {
       default: void 0,
       validator: (e) => ["top", "bottom", "right"].includes(e)
     },
-    anchorRef: {
+    anchorId: {
       required: !0
     },
+    containerId: {
+      type: String,
+      default: void 0
+    },
     containerRef: {
-      required: !0
+      type: Object,
+      default: void 0
     },
     helperText: {
       type: String,
@@ -843,82 +848,82 @@ const Et = {
     "after-leave"
   ],
   setup(e, { emit: a }) {
-    const t = e, l = a, n = w(null);
+    const t = e, l = a, n = k(null);
     let o = !1;
     ct([n], () => {
       o && l("close");
     }), re(["Escape"], () => {
       o && l("close");
     });
-    function r() {
-      const p = t.containerRef.getBoundingClientRect(), y = t.anchorRef.getBoundingClientRect(), D = n.value.getBoundingClientRect();
+    function d() {
+      const y = (t.containerRef || document.getElementById(t.containerId)).getBoundingClientRect(), L = document.getElementById(t.anchorId).getBoundingClientRect(), M = n.value.getBoundingClientRect();
       if (t.position === "top") {
-        const T = p.bottom - y.bottom;
-        n.value.style.setProperty("--dropdown-wscreen-top", "auto"), n.value.style.setProperty("--dropdown-wscreen-bottom", `${T + y.height + 8}px`);
+        const w = y.bottom - L.bottom;
+        n.value.style.setProperty("--dropdown-wscreen-top", "auto"), n.value.style.setProperty("--dropdown-wscreen-bottom", `${w + L.height + 8}px`);
       } else {
-        const T = y.top - p.top;
-        n.value.style.setProperty("--dropdown-wscreen-top", `${T + y.height + 8}px`), n.value.style.setProperty("--dropdown-wscreen-bottom", "auto");
+        const w = L.top - y.top;
+        n.value.style.setProperty("--dropdown-wscreen-top", `${w + L.height + 8}px`), n.value.style.setProperty("--dropdown-wscreen-bottom", "auto");
       }
-      const z = y.left - p.left;
+      const P = L.left - y.left;
       if (t.position === "center") {
-        const T = (y.width - D.width) / 2;
-        n.value.style.setProperty("--dropdown-wscreen-left", `${z + T}px`);
+        const w = (L.width - M.width) / 2;
+        n.value.style.setProperty("--dropdown-wscreen-left", `${P + w}px`);
       } else if (t.position === "right") {
-        const T = p.right - y.right;
-        n.value.style.setProperty("--dropdown-wscreen-left", "auto"), n.value.style.setProperty("--dropdown-wscreen-right", `${T}px`);
+        const w = y.right - L.right;
+        n.value.style.setProperty("--dropdown-wscreen-left", "auto"), n.value.style.setProperty("--dropdown-wscreen-right", `${w}px`);
       } else
-        n.value.style.setProperty("--dropdown-wscreen-left", `${z}px`);
+        n.value.style.setProperty("--dropdown-wscreen-left", `${P}px`);
     }
     function i() {
       if (t.width === "toggle") {
-        const p = t.anchorRef.getBoundingClientRect();
-        n.value.style.setProperty("--dropdown-wscreen-width", `${p.width}px`);
+        const g = document.getElementById(t.anchorId).getBoundingClientRect();
+        n.value.style.setProperty("--dropdown-wscreen-width", `${g.width}px`);
       } else
         n.value.style.setProperty("--dropdown-wscreen-width", "");
     }
-    function d() {
-      r(), i(), l("enter");
+    function s() {
+      d(), i(), l("enter");
     }
-    function u() {
+    function r() {
       o = !0, l("after-enter");
     }
-    function c() {
+    function f() {
       o = !1, l("after-leave");
     }
-    function g() {
+    function b() {
       return t.width === "toggle" ? void 0 : t.width;
     }
-    return (p, y) => (s(), L(f(de), {
+    return (g, y) => (u(), A(c(de), {
       shown: e.shown,
       preloaded: e.preloaded,
       duration: 75,
       "enter-attribute": "data-shown",
-      onAfterEnter: y[1] || (y[1] = (D) => u()),
-      onEnter: y[2] || (y[2] = (D) => d()),
-      onAfterLeave: y[3] || (y[3] = (D) => c())
+      onAfterEnter: y[1] || (y[1] = (L) => r()),
+      onEnter: y[2] || (y[2] = (L) => s()),
+      onAfterLeave: y[3] || (y[3] = (L) => f())
     }, {
-      default: A(() => [
-        m("div", {
+      default: C(() => [
+        m("div", E({
           ref_key: "dropdownRef",
           ref: n,
           class: "bs-dropdown",
-          "data-width": g()
-        }, [
-          e.helperText ? (s(), v("header", Gt, [
+          "data-width": b()
+        }, g.$attrs), [
+          e.helperText ? (u(), v("header", jt, [
             m("div", null, [
-              m("h3", null, I(e.helperText), 1),
-              e.helperDescription ? (s(), v("p", jt, I(e.helperDescription), 1)) : $("", !0)
+              m("h3", null, T(e.helperText), 1),
+              e.helperDescription ? (u(), v("p", Gt, T(e.helperDescription), 1)) : $("", !0)
             ]),
             m("button", {
               type: "button",
               title: "close",
               onClick: y[0] || (y[0] = () => l("close"))
             }, [
-              P(f(oe))
+              D(c(oe))
             ])
           ])) : $("", !0),
-          k(p.$slots, "default")
-        ], 8, Wt)
+          I(g.$slots, "default")
+        ], 16, Wt)
       ]),
       _: 3
     }, 8, ["shown", "preloaded"]));
@@ -1006,63 +1011,55 @@ const Et = {
     "after-leave"
   ],
   setup(e, { emit: a }) {
-    const t = e, l = a, n = w(null), o = w(null), { transition: r } = se(t);
-    O(() => {
-      t.containerId && (n.value = document.getElementById(t.containerId)), o.value = document.getElementById(i.value);
-    });
-    const i = b(() => t.toggleId ? t.toggleId : t.anchorId), d = b(() => t.top ? "top" : t.center ? "center" : t.right ? "right" : t.position);
-    return (u, c) => (s(), v(R, null, [
-      f(r) ? (s(), v("div", Ft)) : $("", !0),
-      e.containerId ? (s(), L(f(Se), {
+    const t = e, l = a, n = k(null), { transition: o } = se(t), d = p(() => t.toggleId ? t.toggleId : t.anchorId), i = p(() => t.top ? "top" : t.center ? "center" : t.right ? "right" : t.position);
+    return (s, r) => (u(), v(R, null, [
+      c(o) ? (u(), v("div", Ft)) : $("", !0),
+      e.containerId ? (u(), A(c(Se), E({
         key: 1,
-        shown: f(r),
+        shown: c(o),
         preloaded: e.preloaded,
-        "anchor-ref": o.value,
-        "container-ref": n.value,
-        "enter-controlled": e.enterControlled,
-        "enter-trigger": e.enterTrigger,
+        "anchor-id": d.value,
+        "container-id": e.containerId,
         "helper-description": e.helperDescription,
         "helper-text": e.helperText,
-        "leave-trigger": e.leaveTrigger,
-        position: d.value,
-        width: e.width,
-        onClose: c[0] || (c[0] = (g) => l("close")),
-        onAfterEnter: c[1] || (c[1] = (g) => l("after-enter")),
-        onEnter: c[2] || (c[2] = (g) => l("enter")),
-        onAfterLeave: c[3] || (c[3] = (g) => l("after-leave"))
-      }, {
-        default: A(() => [
-          k(u.$slots, "default")
+        position: i.value,
+        width: e.width
+      }, s.$attrs, {
+        onClose: r[0] || (r[0] = (f) => l("close")),
+        onAfterEnter: r[1] || (r[1] = (f) => l("after-enter")),
+        onEnter: r[2] || (r[2] = (f) => l("enter")),
+        onAfterLeave: r[3] || (r[3] = (f) => l("after-leave"))
+      }), {
+        default: C(() => [
+          I(s.$slots, "default")
         ]),
         _: 3
-      }, 8, ["shown", "preloaded", "anchor-ref", "container-ref", "enter-controlled", "enter-trigger", "helper-description", "helper-text", "leave-trigger", "position", "width"])) : (s(), v("div", {
+      }, 16, ["shown", "preloaded", "anchor-id", "container-id", "helper-description", "helper-text", "position", "width"])) : (u(), v("div", {
         key: 2,
         ref_key: "containerRef",
         ref: n,
         style: { position: "relative" }
       }, [
-        P(f(Se), {
-          shown: f(r),
+        D(c(Se), E({
+          shown: c(o),
           preloaded: e.preloaded,
-          "anchor-ref": o.value,
+          "anchor-id": d.value,
           "container-ref": n.value,
-          "enter-controlled": e.enterControlled,
-          "enter-trigger": e.enterTrigger,
           "helper-description": e.helperDescription,
           "helper-text": e.helperText,
-          "leave-trigger": e.leaveTrigger,
-          position: d.value,
-          width: e.width,
-          onClose: c[4] || (c[4] = (g) => l("close")),
-          onAfterEnter: c[5] || (c[5] = (g) => l("after-enter")),
-          onEnter: c[6] || (c[6] = (g) => l("enter")),
-          onAfterLeave: c[7] || (c[7] = (g) => l("after-leave"))
-        }, {
-          default: A(() => [
-            k(u.$slots, "default")
+          position: i.value,
+          width: e.width
+        }, s.$attrs, {
+          onClose: r[4] || (r[4] = (f) => l("close")),
+          onAfterEnter: r[5] || (r[5] = (f) => l("after-enter")),
+          onEnter: r[6] || (r[6] = (f) => l("enter")),
+          onAfterLeave: r[7] || (r[7] = (f) => l("after-leave"))
+        }), {
+          default: C(() => [
+            I(s.$slots, "default")
           ]),
           _: 3
-        }, 8, ["shown", "preloaded", "anchor-ref", "container-ref", "enter-controlled", "enter-trigger", "helper-description", "helper-text", "leave-trigger", "position", "width"])
+        }, 16, ["shown", "preloaded", "anchor-id", "container-ref", "helper-description", "helper-text", "position", "width"])
       ], 512))
     ], 64));
   }
@@ -1079,16 +1076,16 @@ const Et = {
     }
   },
   setup(e) {
-    const a = e, t = w(null), l = te("optionsId"), n = te("handleSelect"), o = b(() => `${l}-option-${a.value}`);
+    const a = e, t = k(null), l = te("optionsId"), n = te("handleSelect"), o = p(() => `${l}-option-${a.value}`);
     re([" ", "Enter", "NumpadEnter"], (i) => {
-      var d;
-      r(), (d = t.value.querySelector("a")) == null || d.click(), i.preventDefault();
+      var s;
+      d(), (s = t.value.querySelector("a")) == null || s.click(), i.preventDefault();
     }, t);
-    function r() {
+    function d() {
       var i;
       n(o.value, a.value), (i = t.value.querySelector("a")) == null || i.click();
     }
-    return (i, d) => (s(), v("li", {
+    return (i, s) => (u(), v("li", {
       "data-component": "bs-dropdown-option",
       "data-value": a.value,
       ref_key: "optionRef",
@@ -1097,9 +1094,9 @@ const Et = {
       "data-variant": e.variant || void 0,
       id: o.value,
       tabIndex: -1,
-      onClick: r
+      onClick: d
     }, [
-      k(i.$slots, "default")
+      I(i.$slots, "default")
     ], 8, Ht));
   }
 }, Yt = ["aria-activedescendant", "aria-label", "id"], Xt = {
@@ -1140,84 +1137,84 @@ const Et = {
   },
   emits: ["optselected", "update:modelValue", "close"],
   setup(e, { emit: a }) {
-    const t = e, l = a, n = w(null), o = w(null);
-    let r = null, i = -1, d = -1;
-    ae("optionsId", t.optionsId), ae("handleSelect", T);
-    function u() {
-      return r || (r = Array.from(n.value.querySelectorAll('[data-component="bs-dropdown-option"]'))), r;
-    }
-    O(() => {
-      p(), document.addEventListener("keydown", D);
-    }), Ge(() => {
-      document.removeEventListener("keydown", D);
-    }), E(() => t.visible, () => {
-      p();
-    }), E(() => t.shown, () => {
-      p();
+    const t = e, l = a, n = k(null), o = k(null);
+    let d = null, i = -1, s = -1;
+    ae("optionsId", t.optionsId), ae("handleSelect", P);
+    function r() {
+      return d || (d = Array.from(n.value.querySelectorAll('[data-component="bs-dropdown-option"]'))), d;
+    }
+    N(() => {
+      g(), document.addEventListener("keydown", L);
+    }), je(() => {
+      document.removeEventListener("keydown", L);
+    }), V(() => t.visible, () => {
+      g();
+    }), V(() => t.shown, () => {
+      g();
     });
-    const c = b(() => t.visible || t.shown), g = b(() => t.modelValue || t.selectedValue);
-    function p() {
-      var x, S, q, G, ee;
-      c.value ? (d = u().findIndex(
-        (J) => J.getAttribute("data-value") === g.value
-      ), d > -1 && ((x = u()[d]) == null || x.setAttribute("data-selected", ""), (S = u()[d]) == null || S.setAttribute("aria-selected", "true"), i = d, t.focusDelay > 0 ? setTimeout(() => {
+    const f = p(() => t.visible || t.shown), b = p(() => t.modelValue || t.selectedValue);
+    function g() {
+      var w, S, q, j, ee;
+      f.value ? (s = r().findIndex(
+        (J) => J.getAttribute("data-value") === b.value
+      ), s > -1 && ((w = r()[s]) == null || w.setAttribute("data-selected", ""), (S = r()[s]) == null || S.setAttribute("aria-selected", "true"), i = s, t.focusDelay > 0 ? setTimeout(() => {
         var J;
-        (J = u()[d]) == null || J.focus();
-      }, t.focusDelay) : (q = u()[d]) == null || q.focus())) : ((G = u()[d]) == null || G.removeAttribute("data-selected"), (ee = u()[d]) == null || ee.removeAttribute("aria-selected"));
+        (J = r()[s]) == null || J.focus();
+      }, t.focusDelay) : (q = r()[s]) == null || q.focus())) : ((j = r()[s]) == null || j.removeAttribute("data-selected"), (ee = r()[s]) == null || ee.removeAttribute("aria-selected"));
     }
     ft(
       n,
       () => {
-        r = null;
+        d = null;
       },
       { childList: !0 }
     );
     function y() {
-      var x;
-      i > -1 && ((x = u()[i]) == null || x.blur());
+      var w;
+      i > -1 && ((w = r()[i]) == null || w.blur());
     }
-    function D(x) {
-      if (c.value)
-        switch (x.key) {
+    function L(w) {
+      if (f.value)
+        switch (w.key) {
           case "ArrowDown":
-            z("down"), x.preventDefault();
+            M("down"), w.preventDefault();
             break;
           case "ArrowUp":
-            z("up"), x.preventDefault();
+            M("up"), w.preventDefault();
             break;
           case "Home":
-            z("home"), x.preventDefault();
+            M("home"), w.preventDefault();
             break;
           case "End":
-            z("end"), x.preventDefault();
+            M("end"), w.preventDefault();
             break;
           case "Tab":
-            x.preventDefault();
+            w.preventDefault();
             break;
         }
     }
-    function z(x) {
+    function M(w) {
       let S;
-      switch (x) {
+      switch (w) {
         case "up":
-          S = i - 1 < 0 ? u().length - 1 : i - 1;
+          S = i - 1 < 0 ? r().length - 1 : i - 1;
           break;
         case "down":
-          S = (i + 1) % u().length;
+          S = (i + 1) % r().length;
           break;
         case "home":
           S = 0;
           break;
         case "end":
-          S = u().length - 1;
+          S = r().length - 1;
           break;
       }
-      y(), u()[S].focus(), i = S;
+      y(), r()[S].focus(), i = S;
     }
-    function T(x, S) {
-      o.value = x, y(), l("optselected", S), l("update:modelValue", S), l("close");
+    function P(w, S) {
+      o.value = w, y(), l("optselected", S), l("update:modelValue", S), l("close");
     }
-    return (x, S) => (s(), v("ul", {
+    return (w, S) => (u(), v("ul", {
       ref_key: "optionsRef",
       ref: n,
       "aria-activedescendant": o.value || void 0,
@@ -1226,7 +1223,7 @@ const Et = {
       id: t.optionsId,
       role: "listbox"
     }, [
-      k(x.$slots, "default")
+      I(w.$slots, "default")
     ], 8, Yt));
   }
 }, Zt = {
@@ -1329,17 +1326,17 @@ const Et = {
     "after-leave"
   ],
   setup(e, { emit: a }) {
-    const t = a, l = w(!1);
+    const t = a, l = k(!1);
     function n() {
       l.value = !0;
     }
     function o(i) {
       l.value = !1, t("optselected", i), t("update:modelValue", i), t("close");
     }
-    function r() {
+    function d() {
       l.value && (l.value = !1, t("close"));
     }
-    return (i, d) => (s(), L(f(Ut), {
+    return (i, s) => (u(), A(c(Ut), {
       shown: e.shown,
       preloaded: e.preloaded,
       "anchor-id": e.anchorId,
@@ -1355,13 +1352,13 @@ const Et = {
       "toggle-id": e.toggleId,
       top: e.top,
       width: e.width,
-      onClose: r,
-      onAfterEnter: d[0] || (d[0] = (u) => t("after-enter")),
+      onClose: d,
+      onAfterEnter: s[0] || (s[0] = (r) => t("after-enter")),
       onEnter: n,
-      onAfterLeave: d[1] || (d[1] = (u) => t("after-leave"))
+      onAfterLeave: s[1] || (s[1] = (r) => t("after-leave"))
     }, {
-      default: A(() => [
-        P(f(Xt), {
+      default: C(() => [
+        D(c(Xt), {
           label: e.label,
           "model-value": e.modelValue,
           "options-id": e.optionsId,
@@ -1369,10 +1366,10 @@ const Et = {
           shown: l.value,
           onOptselected: o,
           "onUpdate:modelValue": o,
-          onClose: r
+          onClose: d
         }, {
-          default: A(() => [
-            k(i.$slots, "default")
+          default: C(() => [
+            I(i.$slots, "default")
           ]),
           _: 3
         }, 8, ["label", "model-value", "options-id", "selected-value", "shown"])
@@ -1380,49 +1377,88 @@ const Et = {
       _: 3
     }, 8, ["shown", "preloaded", "anchor-id", "center", "container-id", "enter-controlled", "enter-trigger", "helper-description", "helper-text", "leave-trigger", "position", "right", "toggle-id", "top", "width"]));
   }
-}, Jt = ["view-box"], Qt = ["id"], _t = ["offset", "stop-color"], Vn = {
+}, Jt = {
+  class: "bs-field-details",
+  "data-component": "bs-field-details"
+}, Qt = ["id", "data-error"], _t = ["data-error"], pe = {
+  __name: "BsFieldDetails",
+  props: {
+    /** The number of characters that have been entered by the user.  */
+    charCount: Number,
+    /** Pass value to show character count and set the maximum number of characters that are allowed to be submitted by the user.  */
+    charMax: Number,
+    /** Applies error styles to the helper text. */
+    error: {
+      type: Boolean,
+      default: !1
+    },
+    /** Pass error text.  Will be shown if `error` is `true`. */
+    errorMsg: String,
+    /** Pass single helper text. */
+    hint: String,
+    /** Adds an id to associate a hint to an input. */
+    hintId: String
+  },
+  setup(e) {
+    const a = e, t = p(() => a.error && a.errorMsg || a.hint);
+    return (l, n) => (u(), v("div", Jt, [
+      t.value ? (u(), v("span", {
+        key: 0,
+        id: e.hintId,
+        class: "bs-hint",
+        "data-error": e.error
+      }, T(t.value), 9, Qt)) : $("", !0),
+      e.charMax ? (u(), v("span", {
+        key: 1,
+        "aria-description": "character count over character limit for the preceding text field",
+        class: "bs-character-count",
+        "data-error": a.charCount > a.charMax
+      }, T(a.charCount || "0") + " / " + T(a.charMax), 9, _t)) : $("", !0)
+    ]));
+  }
+}, ea = ["view-box"], ta = ["id"], aa = ["offset", "stop-color"], Vn = {
   __name: "BsIconGradientWrapper",
   setup(e) {
-    const a = w(null), t = w(null), l = [
+    const a = k(null), t = k(null), l = [
       { offset: 0.1326, color: "#EE282A" },
       { offset: 0.5466, color: "#1C0087" },
       { offset: 0.9715, color: "#0086EA" }
     ], [n] = H();
-    return O(() => {
+    return N(() => {
       t.value = a.value.querySelector("svg").getAttribute("viewBox") || "0 0 0 0";
-    }), (o, r) => (s(), v(R, null, [
+    }), (o, d) => (u(), v(R, null, [
       m("span", {
         ref_key: "svgWrapperRef",
         ref: a,
         class: "bs-icon-gradient-wrapper",
-        style: je(`fill: url(#${f(n)});`)
+        style: Ge(`fill: url(#${c(n)});`)
       }, [
-        k(o.$slots, "default")
+        I(o.$slots, "default")
       ], 4),
-      (s(), v("svg", {
+      (u(), v("svg", {
         xmlns: "http://www.w3.org/2000/svg",
         "view-box": t.value,
         width: "0",
         height: "0"
       }, [
         m("linearGradient", {
-          id: f(n),
+          id: c(n),
           x1: "0",
           y1: "0",
           x2: "100%",
           y2: "100%",
           "gradient-units": "userSpaceOnUse"
         }, [
-          (s(), v(R, null, Y(l, (i) => m("stop", {
+          (u(), v(R, null, Y(l, (i) => m("stop", {
             key: i.offset,
             offset: i.offset,
             "stop-color": i.color
-          }, null, 8, _t)), 64))
-        ], 8, Qt)
-      ], 8, Jt))
+          }, null, 8, aa)), 64))
+        ], 8, ta)
+      ], 8, ea))
     ], 64));
   }
-}, ea = ["data-error", "id", "value"], we = {
+}, na = ["data-error", "id", "value"], we = {
   __name: "BsInput",
   props: {
     error: {
@@ -1437,20 +1473,20 @@ const Et = {
   },
   emits: ["update:modelValue"],
   setup(e, { emit: a }) {
-    const t = e, l = a, n = N(), o = b(() => ({ [t.error ? "aria-errormessage" : "aria-describedby"]: t.hintId }));
-    function r(i) {
-      const d = n.type === "number" ? parseInt(i.target.value) : i.target.value;
-      l("update:modelValue", d);
+    const t = e, l = a, n = O(), o = p(() => ({ [t.error ? "aria-errormessage" : "aria-describedby"]: t.hintId }));
+    function d(i) {
+      const s = n.type === "number" ? parseInt(i.target.value) : i.target.value;
+      l("update:modelValue", s);
     }
-    return (i, d) => (s(), v("input", V({
+    return (i, s) => (u(), v("input", E({
       "data-component": "bs-input",
       "data-error": e.error,
       id: i.$attrs.id || e.inputId,
       value: e.value || e.modelValue,
-      onInput: r
-    }, o.value), null, 16, ea));
+      onInput: d
+    }, o.value), null, 16, na));
   }
-}, ta = ["data-disabled", "data-error", "data-variant", "data-multifocus"], aa = {
+}, la = ["data-disabled", "data-error", "data-variant", "data-multifocus"], oa = {
   __name: "BsInputAddon",
   props: {
     disabled: { type: Boolean, default: !1 },
@@ -1459,7 +1495,7 @@ const Et = {
     variant: { type: String, validator: (e) => e === "inner-bordered" }
   },
   setup(e) {
-    return (a, t) => (s(), v("div", {
+    return (a, t) => (u(), v("div", {
       class: "bs-input-addon",
       "data-component": "bs-input-addon",
       "data-disabled": e.disabled,
@@ -1467,47 +1503,8 @@ const Et = {
       "data-variant": e.variant,
       "data-multifocus": e.multifocus
     }, [
-      k(a.$slots, "default")
-    ], 8, ta));
-  }
-}, na = {
-  class: "bs-field-details",
-  "data-component": "bs-field-details"
-}, la = ["id", "data-error"], oa = ["data-error"], he = {
-  __name: "BsFieldDetails",
-  props: {
-    /** The number of characters that have been entered by the user.  */
-    charCount: Number,
-    /** Pass value to show character count and set the maximum number of characters that are allowed to be submitted by the user.  */
-    charMax: Number,
-    /** Applies error styles to the helper text. */
-    error: {
-      type: Boolean,
-      default: !1
-    },
-    /** Pass error text.  Will be shown if `error` is `true`. */
-    errorMsg: String,
-    /** Pass single helper text. */
-    hint: String,
-    /** Adds an id to associate a hint to an input. */
-    hintId: String
-  },
-  setup(e) {
-    const a = e, t = b(() => a.error && a.errorMsg || a.hint);
-    return (l, n) => (s(), v("div", na, [
-      t.value ? (s(), v("span", {
-        key: 0,
-        id: e.hintId,
-        class: "bs-hint",
-        "data-error": e.error
-      }, I(t.value), 9, la)) : $("", !0),
-      e.charMax ? (s(), v("span", {
-        key: 1,
-        "aria-description": "character count over character limit for the preceding text field",
-        class: "bs-character-count",
-        "data-error": a.charCount > a.charMax
-      }, I(a.charCount || "0") + " / " + I(a.charMax), 9, oa)) : $("", !0)
-    ]));
+      I(a.$slots, "default")
+    ], 8, la));
   }
 }, qn = /* @__PURE__ */ Object.assign({ inheritAttrs: !1 }, {
   __name: "BsInputField",
@@ -1531,10 +1528,7 @@ const Et = {
     /** Pass id for the input element.  Will also be applied to label attribute. */
     inputId: String,
     /** Pass label text. */
-    label: {
-      type: String,
-      required: !0
-    },
+    label: { type: String },
     /** List additional attributes by name (comma-separated) to pass through to `<input>`. */
     passAttrs: {
       type: String,
@@ -1559,42 +1553,42 @@ const Et = {
   },
   emits: ["update:modelValue"],
   setup(e, { emit: a }) {
-    const t = e, l = N(), [n, o] = H(2), { toChild: r, toRoot: i } = Z(t, l), d = b(() => {
-      var g, p;
-      return ((p = (g = t.hints) == null ? void 0 : g.join) == null ? void 0 : p.call(g, `
+    const t = e, l = O(), [n, o] = H(2), { toChild: d, toRoot: i } = Z(t, l), s = p(() => {
+      var b, g;
+      return ((g = (b = t.hints) == null ? void 0 : b.join) == null ? void 0 : g.call(b, `
 `)) || t.hints;
-    }), u = b(() => t.error && t.errorMsg || t.hint || d.value || void 0), c = b(() => t.inputId || n.value);
-    return (g, p) => (s(), v("div", V({ "data-component": "bs-input-field" }, f(i)), [
-      e.label || g.$slots.label ? (s(), L(f(_), {
+    }), r = p(() => t.error && t.errorMsg || t.hint || s.value || void 0), f = p(() => t.inputId || n.value);
+    return (b, g) => (u(), v("div", E({ "data-component": "bs-input-field" }, c(i)), [
+      e.label || b.$slots.label ? (u(), A(c(_), {
         key: 0,
-        for: c.value,
+        for: f.value,
         disabled: e.disabled,
         required: e.required
       }, {
-        default: A(() => [
-          k(g.$slots, "label", {}, () => [
-            W(I(e.label), 1)
+        default: C(() => [
+          I(b.$slots, "label", {}, () => [
+            W(T(e.label), 1)
           ])
         ]),
         _: 3
       }, 8, ["for", "disabled", "required"])) : $("", !0),
-      P(f(we), V({
+      D(c(we), E({
         disabled: e.disabled,
         error: e.error,
-        "hint-id": f(o),
-        id: c.value,
+        "hint-id": c(o),
+        id: f.value,
         placeholder: e.placeholder,
         required: e.required,
         type: e.type,
         value: e.value || e.modelValue,
-        "onUpdate:modelValue": p[0] || (p[0] = (y) => g.$emit("update:modelValue", y))
-      }, f(r)), null, 16, ["disabled", "error", "hint-id", "id", "placeholder", "required", "type", "value"]),
-      u.value ? (s(), L(he, {
+        "onUpdate:modelValue": g[0] || (g[0] = (y) => b.$emit("update:modelValue", y))
+      }, c(d)), null, 16, ["disabled", "error", "hint-id", "id", "placeholder", "required", "type", "value"]),
+      r.value ? (u(), A(pe, {
         key: 1,
         error: e.error,
         "error-msg": e.errorMsg,
-        hint: e.hint || d.value,
-        "hint-id": f(o)
+        hint: e.hint || s.value,
+        "hint-id": c(o)
       }, null, 8, ["error", "error-msg", "hint", "hint-id"])) : $("", !0)
     ], 16));
   }
@@ -1631,29 +1625,29 @@ const Et = {
   },
   emits: ["clear", "update:modelValue"],
   setup(e, { emit: a }) {
-    const t = e, l = N(), { toChild: n, toRoot: o } = Z(t, l);
-    return (r, i) => (s(), L(f(aa), V({
+    const t = e, l = O(), { toChild: n, toRoot: o } = Z(t, l);
+    return (d, i) => (u(), A(c(oa), E({
       class: "bs-input-search",
       "data-component": "bs-input-search",
       disabled: e.disabled
-    }, f(o)), {
-      default: A(() => [
-        P(f(Xe)),
-        P(f(we), V({
+    }, c(o)), {
+      default: C(() => [
+        D(c(Xe)),
+        D(c(we), E({
           "data-autowidth": "",
           disabled: e.disabled,
           "input-id": e.inputId,
           placeholder: e.placeholder,
           value: e.value || e.modelValue,
-          "onUpdate:modelValue": i[0] || (i[0] = (d) => r.$emit("update:modelValue", d))
-        }, f(n)), null, 16, ["disabled", "input-id", "placeholder", "value"]),
-        e.disabled || e.hideClear ? $("", !0) : (s(), v("button", {
+          "onUpdate:modelValue": i[0] || (i[0] = (s) => d.$emit("update:modelValue", s))
+        }, c(n)), null, 16, ["disabled", "input-id", "placeholder", "value"]),
+        e.disabled || e.hideClear ? $("", !0) : (u(), v("button", {
           key: 0,
           title: "Clear",
           type: "button",
-          onClick: i[1] || (i[1] = (d) => r.$emit("clear"))
+          onClick: i[1] || (i[1] = (s) => d.$emit("clear"))
         }, [
-          P(f(oe), { size: "sm" })
+          D(c(oe), { size: "sm" })
         ]))
       ]),
       _: 1
@@ -1671,27 +1665,27 @@ const Et = {
     required: { type: Boolean, default: !1 }
   },
   setup(e) {
-    return (a, t) => (s(), v("label", {
+    return (a, t) => (u(), v("label", {
       class: X(["bs-label", e.hide ? "visually-hidden" : ""]),
       "data-component": "bs-label",
       "data-disabled": e.disabled,
       for: e.for
     }, [
       m("span", null, [
-        k(a.$slots, "default")
+        I(a.$slots, "default")
       ]),
-      e.required ? (s(), v(R, { key: 0 }, [
+      e.required ? (u(), v(R, { key: 0 }, [
         ra,
         sa
       ], 64)) : $("", !0)
     ], 10, ia));
   }
-}, da = ["data-size", "data-variant"], ua = /* @__PURE__ */ m("span", null, null, -1), ca = /* @__PURE__ */ m("span", null, null, -1), fa = /* @__PURE__ */ m("span", null, null, -1), va = /* @__PURE__ */ m("span", null, null, -1), ga = /* @__PURE__ */ m("span", { class: "visually-hidden" }, "Loading", -1), ha = [
+}, da = ["data-size", "data-variant"], ua = /* @__PURE__ */ m("span", null, null, -1), ca = /* @__PURE__ */ m("span", null, null, -1), fa = /* @__PURE__ */ m("span", null, null, -1), va = /* @__PURE__ */ m("span", null, null, -1), ha = /* @__PURE__ */ m("span", { class: "visually-hidden" }, "Loading", -1), pa = [
   ua,
   ca,
   fa,
   va,
-  ga
+  ha
 ], Mn = {
   __name: "BsLoader",
   props: {
@@ -1706,14 +1700,14 @@ const Et = {
     }
   },
   setup(e) {
-    return (a, t) => (s(), v("span", {
+    return (a, t) => (u(), v("span", {
       class: "bs-loader",
       "data-size": e.size,
       "data-variant": e.variant,
       role: "status"
-    }, ha, 8, da));
+    }, pa, 8, da));
   }
-}, pa = /* @__PURE__ */ m("div", { class: "bs-overlay" }, null, -1), ba = {
+}, ga = /* @__PURE__ */ m("div", { class: "bs-overlay" }, null, -1), ba = {
   __name: "BsOverlay",
   props: {
     shown: {
@@ -1743,16 +1737,16 @@ const Et = {
   emits: ["after-enter", "after-leave"],
   setup(e, { emit: a }) {
     const t = e, l = a, { transition: n } = se(t);
-    return (o, r) => (s(), L(f(de), {
-      shown: f(n),
+    return (o, d) => (u(), A(c(de), {
+      shown: c(n),
       preloaded: e.preloaded,
       duration: 75,
       "enter-attribute": "data-shown",
-      onAfterEnter: r[0] || (r[0] = (i) => l("after-enter")),
-      onAfterLeave: r[1] || (r[1] = (i) => l("after-leave"))
+      onAfterEnter: d[0] || (d[0] = (i) => l("after-enter")),
+      onAfterLeave: d[1] || (d[1] = (i) => l("after-leave"))
     }, {
-      default: A(() => [
-        pa
+      default: C(() => [
+        ga
       ]),
       _: 1
     }, 8, ["shown", "preloaded"]));
@@ -1809,41 +1803,41 @@ const Et = {
     let o = !1;
     return re(["Escape"], () => {
       o && l("close", t.modalId);
-    }), (r, i) => (s(), v(R, null, [
-      P(ba, {
-        shown: f(n),
+    }), (d, i) => (u(), v(R, null, [
+      D(ba, {
+        shown: c(n),
         preloaded: e.preloaded,
         "enter-controlled": e.enterControlled,
         "enter-trigger": e.enterTrigger,
         "leave-trigger": e.leaveTrigger
       }, null, 8, ["shown", "preloaded", "enter-controlled", "enter-trigger", "leave-trigger"]),
-      P(de, {
-        shown: f(n),
+      D(de, {
+        shown: c(n),
         preloaded: e.preloaded,
         duration: 75,
         "enter-attribute": "data-shown",
-        onEnter: i[1] || (i[1] = (d) => Fe(o) ? o.value = !0 : o = !0),
-        onAfterEnter: i[2] || (i[2] = (d) => l("after-enter")),
-        onAfterLeave: i[3] || (i[3] = (d) => l("after-leave"))
+        onEnter: i[1] || (i[1] = (s) => Fe(o) ? o.value = !0 : o = !0),
+        onAfterEnter: i[2] || (i[2] = (s) => l("after-enter")),
+        onAfterLeave: i[3] || (i[3] = (s) => l("after-leave"))
       }, {
-        default: A(() => [
+        default: C(() => [
           m("div", {
             id: t.modalId,
             class: "bs-modal",
             role: e.alert ? "alertdialog" : "dialog",
             "aria-modal": "true"
           }, [
-            e.closeButton ? (s(), v("div", ya, [
+            e.closeButton ? (u(), v("div", ya, [
               m("button", {
                 type: "button",
                 title: "Close Modal",
                 "aria-label": "Close Modal",
-                onClick: i[0] || (i[0] = (d) => l("close", e.modalId))
+                onClick: i[0] || (i[0] = (s) => l("close", e.modalId))
               }, [
-                P(f(oe), { class: "close-button" })
+                D(c(oe), { class: "close-button" })
               ])
             ])) : $("", !0),
-            k(r.$slots, "default")
+            I(d.$slots, "default")
           ], 8, ma)
         ]),
         _: 3
@@ -1945,124 +1939,124 @@ const Et = {
   },
   emits: ["selchange", "update:modelValue"],
   setup(e, { emit: a }) {
-    const t = e, l = a, n = w(null);
-    O(() => {
-      o.value ? n.value = o.value : t.variant === "results" ? n.value = z.value[0] : n.value = 1;
+    const t = e, l = a, n = k(null);
+    N(() => {
+      o.value ? n.value = o.value : t.variant === "results" ? n.value = M.value[0] : n.value = 1;
     });
-    const o = b(() => t.modelValue || t.selection);
-    E(() => t.selection, (T) => {
-      n.value = T;
-    }), E(() => t.modelValue, (T) => {
-      n.value = T;
-    }), E(n, (T, x) => {
-      x !== null && (l("selchange", T), l("update:modelValue", T));
+    const o = p(() => t.modelValue || t.selection);
+    V(() => t.selection, (P) => {
+      n.value = P;
+    }), V(() => t.modelValue, (P) => {
+      n.value = P;
+    }), V(n, (P, w) => {
+      w !== null && (l("selchange", P), l("update:modelValue", P));
     });
-    const r = b(() => {
+    const d = p(() => {
       if (t.variant === "group")
         return Math.ceil(t.itemsCount / t.itemsPerGroup);
       if (t.variant === "base")
         return t.pageCount;
-    }), i = b(() => t.variant === "base" ? t.centerDisplay === "text" ? "group" : void 0 : t.variant);
-    function d() {
+    }), i = p(() => t.variant === "base" ? t.centerDisplay === "text" ? "group" : void 0 : t.variant);
+    function s() {
       n.value = 1;
     }
-    function u() {
+    function r() {
       n.value = Math.max(n.value - 1, 1);
     }
-    function c() {
+    function f() {
       n.value = Math.min(
         n.value + 1,
-        r.value
+        d.value
       );
     }
-    function g() {
-      n.value = r.value;
+    function b() {
+      n.value = d.value;
     }
-    const p = b(() => {
+    const g = p(() => {
       if (t.pageCount <= t.pageRange)
         return [...Array(t.pageCount + 1).keys()].slice(1);
-      const T = [1], x = (t.pageRange - 1) / 2;
-      let S = n.value - x, q = n.value + x;
-      S < 1 && (q += 1 - S, S = 1), q > t.pageCount && (S -= q - t.pageCount, q = t.pageCount), S = Math.max(S, 2), q = Math.min(q, t.pageCount - 1), S > 2 && T.push(t.breakText);
-      for (let G = S; G <= q; G++)
-        T.push(G);
-      return q < t.pageCount - 1 && T.push(t.breakText), T.push(t.pageCount), T;
-    }), y = b(() => `${t.centerLabel ?? "Page"} ${n.value} of ${r.value}`), D = b(() => {
-      const T = (n.value - 1) * t.itemsPerGroup + 1, x = Math.min(T - 1 + t.itemsPerGroup, t.itemsCount);
-      return `${t.centerLabel ?? "Results"} ${T} - ${x} of ${t.itemsCount}`;
-    }), z = b(() => t.resultsIncrements.split(",").map((T) => parseInt(T)));
-    return (T, x) => (s(), v("div", {
+      const P = [1], w = (t.pageRange - 1) / 2;
+      let S = n.value - w, q = n.value + w;
+      S < 1 && (q += 1 - S, S = 1), q > t.pageCount && (S -= q - t.pageCount, q = t.pageCount), S = Math.max(S, 2), q = Math.min(q, t.pageCount - 1), S > 2 && P.push(t.breakText);
+      for (let j = S; j <= q; j++)
+        P.push(j);
+      return q < t.pageCount - 1 && P.push(t.breakText), P.push(t.pageCount), P;
+    }), y = p(() => `${t.centerLabel ?? "Page"} ${n.value} of ${d.value}`), L = p(() => {
+      const P = (n.value - 1) * t.itemsPerGroup + 1, w = Math.min(P - 1 + t.itemsPerGroup, t.itemsCount);
+      return `${t.centerLabel ?? "Results"} ${P} - ${w} of ${t.itemsCount}`;
+    }), M = p(() => t.resultsIncrements.split(",").map((P) => parseInt(P)));
+    return (P, w) => (u(), v("div", {
       class: "bs-pagination",
       "data-variant": i.value,
       "data-fixed": t.fixed
     }, [
-      e.variant === "base" || e.variant === "group" ? (s(), v("div", $a, [
-        e.showFirstLastButtons ? (s(), v("button", {
+      e.variant === "base" || e.variant === "group" ? (u(), v("div", $a, [
+        e.showFirstLastButtons ? (u(), v("button", {
           key: 0,
           type: "button",
           class: X(e.firstPageText ? "bs-pagination-word-caret" : void 0),
           title: e.firstPageText,
           disabled: n.value === 1,
-          onClick: d
+          onClick: s
         }, [
-          P(f(Ze)),
-          e.firstPageText ? (s(), v("span", wa, I(e.firstPageText), 1)) : $("", !0)
+          D(c(Ze)),
+          e.firstPageText ? (u(), v("span", wa, T(e.firstPageText), 1)) : $("", !0)
         ], 10, Sa)) : $("", !0),
         m("button", {
           type: "button",
           class: X(e.prevPageText ? "bs-pagination-word-caret" : void 0),
           title: e.prevPageText,
           disabled: n.value === 1,
-          onClick: u
+          onClick: r
         }, [
-          P(f(Je)),
-          e.prevPageText ? (s(), v("span", Ia, I(e.prevPageText), 1)) : $("", !0)
+          D(c(Je)),
+          e.prevPageText ? (u(), v("span", Ia, T(e.prevPageText), 1)) : $("", !0)
         ], 10, ka)
       ])) : $("", !0),
-      e.variant === "base" && e.centerDisplay === "numbers" ? (s(), v("div", Ta, [
-        (s(!0), v(R, null, Y(p.value, (S) => (s(), v("button", {
+      e.variant === "base" && e.centerDisplay === "numbers" ? (u(), v("div", Ta, [
+        (u(!0), v(R, null, Y(g.value, (S) => (u(), v("button", {
           key: `page-${S}-button`,
           type: "button",
           title: `Page ${S}`,
           "data-selected": S === n.value,
           onClick: (q) => n.value = S
-        }, I(S), 9, xa))), 128))
+        }, T(S), 9, xa))), 128))
       ])) : $("", !0),
-      t.variant === "base" && t.centerDisplay === "text" ? (s(), v("span", Ca, I(y.value), 1)) : $("", !0),
-      t.variant === "group" ? (s(), v("span", Aa, I(D.value), 1)) : $("", !0),
-      t.variant === "results" ? (s(), v(R, { key: 4 }, [
+      t.variant === "base" && t.centerDisplay === "text" ? (u(), v("span", Ca, T(y.value), 1)) : $("", !0),
+      t.variant === "group" ? (u(), v("span", Aa, T(L.value), 1)) : $("", !0),
+      t.variant === "results" ? (u(), v(R, { key: 4 }, [
         La,
         m("div", Pa, [
-          (s(!0), v(R, null, Y(z.value, (S) => (s(), v("button", {
+          (u(!0), v(R, null, Y(M.value, (S) => (u(), v("button", {
             type: "button",
             key: `results-${S}`,
             "data-selected": S === n.value,
             disabled: n.value === S,
             onClick: (q) => n.value = S
-          }, I(S), 9, Da))), 128))
+          }, T(S), 9, Da))), 128))
         ])
       ], 64)) : $("", !0),
-      e.variant === "base" || e.variant === "group" ? (s(), v("div", Ea, [
+      e.variant === "base" || e.variant === "group" ? (u(), v("div", Ea, [
         m("button", {
           type: "button",
           class: X(e.nextPageText ? "bs-pagination-word-caret" : void 0),
           title: e.nextPageText,
-          disabled: n.value === r.value,
-          onClick: c
+          disabled: n.value === d.value,
+          onClick: f
         }, [
-          e.nextPageText ? (s(), v("span", qa, I(e.nextPageText), 1)) : $("", !0),
-          P(f(Qe))
+          e.nextPageText ? (u(), v("span", qa, T(e.nextPageText), 1)) : $("", !0),
+          D(c(Qe))
         ], 10, Va),
-        e.showFirstLastButtons ? (s(), v("button", {
+        e.showFirstLastButtons ? (u(), v("button", {
           key: 0,
           type: "button",
           class: X(e.lastPageText ? "bs-pagination-word-caret" : void 0),
           title: e.lastPageText,
-          disabled: n.value === r.value,
-          onClick: g
+          disabled: n.value === d.value,
+          onClick: b
         }, [
-          e.lastPageText ? (s(), v("span", Ma, I(e.lastPageText), 1)) : $("", !0),
-          P(f(_e))
+          e.lastPageText ? (u(), v("span", Ma, T(e.lastPageText), 1)) : $("", !0),
+          D(c(_e))
         ], 10, za)) : $("", !0)
       ])) : $("", !0)
     ], 8, Ba));
@@ -2084,8 +2078,8 @@ const Et = {
     }
   },
   setup(e) {
-    const a = e, { onLinkClick: t } = ie(a), l = N(), { rootTag: n, attrsToBind: o } = ge(a, l, "span");
-    return (r, i) => (s(), L(U(f(n)), V({
+    const a = e, { onLinkClick: t } = ie(a), l = O(), { rootTag: n, attrsToBind: o } = he(a, l, "span");
+    return (d, i) => (u(), A(U(c(n)), E({
       class: "bs-pill",
       "data-active": e.active,
       "data-component": "bs-pill",
@@ -2093,9 +2087,9 @@ const Et = {
       "data-variant": e.variant || void 0,
       disabled: e.disabled,
       href: e.href
-    }, f(o), { onClick: f(t) }), {
-      default: A(() => [
-        k(r.$slots, "default")
+    }, c(o), { onClick: c(t) }), {
+      default: C(() => [
+        I(d.$slots, "default")
       ]),
       _: 3
     }, 16, ["data-active", "data-status", "data-variant", "disabled", "href", "onClick"]));
@@ -2128,21 +2122,21 @@ const Et = {
   },
   emits: ["action-toggled"],
   setup(e, { emit: a }) {
-    const t = e, l = a, { onLinkClick: n } = ie(t), o = b(() => t.href ? "a" : "div");
-    return (r, i) => (s(), L(U(o.value), {
+    const t = e, l = a, { onLinkClick: n } = ie(t), o = p(() => t.href ? "a" : "div");
+    return (d, i) => (u(), A(U(o.value), {
       class: "bs-profile",
       href: e.href,
       "data-layout": e.layout,
-      onClick: f(n)
+      onClick: c(n)
     }, {
-      default: A(() => [
-        P(f(Ka), {
+      default: C(() => [
+        D(c(Ka), {
           src: e.imageSrc,
           size: e.imageSize,
           initials: e.initials,
           "profile-name": e.profileName
         }, null, 8, ["src", "size", "initials", "profile-name"]),
-        P(f(Fa), {
+        D(c(Fa), {
           "profile-name": e.profileName,
           company: e.company,
           "job-title": e.jobTitle,
@@ -2151,13 +2145,13 @@ const Et = {
           "action-icon": e.actionIcon,
           "misc-meta": e.miscMeta,
           "misc-meta-icon": e.miscMetaIcon,
-          onActionToggled: i[0] || (i[0] = (d) => l("action-toggled"))
+          onActionToggled: i[0] || (i[0] = (s) => l("action-toggled"))
         }, {
-          action: A(() => [
-            k(r.$slots, "action")
+          action: C(() => [
+            I(d.$slots, "action")
           ]),
-          misc: A(() => [
-            k(r.$slots, "misc")
+          misc: C(() => [
+            I(d.$slots, "misc")
           ]),
           _: 3
         }, 8, ["profile-name", "company", "job-title", "email", "action", "action-icon", "misc-meta", "misc-meta-icon"])
@@ -2172,7 +2166,7 @@ const Et = {
 }, Na = {
   key: 1,
   "data-weight": "bold"
-}, Wa = { key: 2 }, Ga = { key: 3 }, ja = {
+}, Wa = { key: 2 }, ja = { key: 3 }, Ga = {
   key: 4,
   "data-icon": "true"
 }, Fa = {
@@ -2193,28 +2187,28 @@ const Et = {
   emits: ["action-toggled"],
   setup(e, { emit: a }) {
     const t = e, l = a, { icon: n } = le(t.actionIcon), { icon: o } = le(t.miscMetaIcon);
-    function r(i) {
+    function d(i) {
       i.target.tagName === "BUTTON" && (i.preventDefault(), i.stopImmediatePropagation(), l("action-toggled"));
     }
-    return (i, d) => (s(), v("div", Ra, [
-      e.action || i.$slots.action ? (s(), v("button", {
+    return (i, s) => (u(), v("div", Ra, [
+      e.action || i.$slots.action ? (u(), v("button", {
         key: 0,
         "data-icon": "true",
-        onClick: r
+        onClick: d
       }, [
-        k(i.$slots, "action", {}, () => [
-          e.actionIcon ? (s(), L(U(f(n) ? f(n) : "span"), { key: 0 })) : $("", !0),
-          W(" " + I(e.action), 1)
+        I(i.$slots, "action", {}, () => [
+          e.actionIcon ? (u(), A(U(c(n) ? c(n) : "span"), { key: 0 })) : $("", !0),
+          W(" " + T(e.action), 1)
         ])
       ])) : $("", !0),
-      m("span", Oa, I(e.profileName), 1),
-      e.company ? (s(), v("span", Na, I(e.company), 1)) : $("", !0),
-      e.jobTitle ? (s(), v("span", Wa, I(e.jobTitle), 1)) : $("", !0),
-      e.email ? (s(), v("span", Ga, I(e.email), 1)) : $("", !0),
-      e.miscMeta || i.$slots.misc ? (s(), v("span", ja, [
-        k(i.$slots, "misc", {}, () => [
-          e.miscMetaIcon ? (s(), L(U(f(o) ? f(o) : "span"), { key: 0 })) : $("", !0),
-          W(" " + I(e.miscMeta), 1)
+      m("span", Oa, T(e.profileName), 1),
+      e.company ? (u(), v("span", Na, T(e.company), 1)) : $("", !0),
+      e.jobTitle ? (u(), v("span", Wa, T(e.jobTitle), 1)) : $("", !0),
+      e.email ? (u(), v("span", ja, T(e.email), 1)) : $("", !0),
+      e.miscMeta || i.$slots.misc ? (u(), v("span", Ga, [
+        I(i.$slots, "misc", {}, () => [
+          e.miscMetaIcon ? (u(), A(U(c(o) ? c(o) : "span"), { key: 0 })) : $("", !0),
+          W(" " + T(e.miscMeta), 1)
         ])
       ])) : $("", !0)
     ]));
@@ -2234,22 +2228,22 @@ const Et = {
     }
   },
   setup(e) {
-    const a = e, t = w(!1), l = w(!!a.src);
-    return O(() => t.value = !0), (n, o) => (s(), v("div", {
+    const a = e, t = k(!1), l = k(!!a.src);
+    return N(() => t.value = !0), (n, o) => (u(), v("div", {
       class: "bs-profile-img",
       "data-img-size": e.size,
       "data-initials": e.initials,
       "data-no-img": !l.value
     }, [
-      l.value && t.value ? (s(), v("img", {
+      l.value && t.value ? (u(), v("img", {
         key: 0,
         src: e.src,
         alt: e.profileName,
-        onError: o[0] || (o[0] = (r) => l.value = !1)
+        onError: o[0] || (o[0] = (d) => l.value = !1)
       }, null, 40, Ha)) : $("", !0)
     ], 8, Ua));
   }
-}, Ya = ["data-size"], Xa = ["checked", "disabled", "id", "required", "value", "data-error"], Gn = /* @__PURE__ */ Object.assign({ inheritAttrs: !1 }, {
+}, Ya = ["data-size"], Xa = ["checked", "disabled", "id", "required", "value", "data-error"], jn = /* @__PURE__ */ Object.assign({ inheritAttrs: !1 }, {
   __name: "BsRadio",
   props: {
     label: {
@@ -2293,32 +2287,32 @@ const Et = {
   },
   emits: ["update:modelValue"],
   setup(e, { emit: a }) {
-    const t = e, l = N(), [n] = H(), { toChild: o, toRoot: r } = Z(t, l), i = b(() => t.inputId || n.value), d = b(() => t.checked || t.modelValue === t.value);
-    return (u, c) => (s(), v("div", V({
+    const t = e, l = O(), [n] = H(), { toChild: o, toRoot: d } = Z(t, l), i = p(() => t.inputId || n.value), s = p(() => t.checked || t.modelValue && t.modelValue === t.value);
+    return (r, f) => (u(), v("div", E({
       class: "bs-boolean",
       "data-component": "bs-radio",
       "data-size": e.size
-    }, f(r)), [
-      m("input", V({
-        checked: d.value,
+    }, c(d)), [
+      m("input", E({
+        checked: s.value,
         disabled: e.disabled,
         id: i.value,
         required: e.required,
         type: "radio",
         value: e.value,
         "data-error": e.error
-      }, f(o), {
-        onChange: c[0] || (c[0] = (g) => u.$emit("update:modelValue", g.target.value))
+      }, c(o), {
+        onChange: f[0] || (f[0] = (b) => r.$emit("update:modelValue", b.target.value))
       }), null, 16, Xa),
-      e.label || u.$slots.label ? (s(), L(f(_), {
+      e.label || r.$slots.label ? (u(), A(c(_), {
         key: 0,
         for: i.value,
         disabled: e.disabled,
         required: e.required
       }, {
-        default: A(() => [
-          k(u.$slots, "label", {}, () => [
-            W(I(e.label), 1)
+        default: C(() => [
+          I(r.$slots, "label", {}, () => [
+            W(T(e.label), 1)
           ])
         ]),
         _: 3
@@ -2338,8 +2332,8 @@ const Et = {
   },
   emits: ["update:modelValue"],
   setup(e, { emit: a }) {
-    const t = e, l = b(() => ({ [t.error ? "aria-errormessage" : "aria-describedby"]: t.hintId }));
-    return (n, o) => (s(), v("select", V({
+    const t = e, l = p(() => ({ [t.error ? "aria-errormessage" : "aria-describedby"]: t.hintId }));
+    return (n, o) => (u(), v("select", E({
       id: n.$attrs.id || e.inputId,
       class: "bs-select",
       "data-component": "bs-select",
@@ -2348,12 +2342,12 @@ const Et = {
       "data-error": e.error,
       value: e.value || e.modelValue
     }, l.value, {
-      onChange: o[0] || (o[0] = (r) => n.$emit("update:modelValue", r.target.value))
+      onChange: o[0] || (o[0] = (d) => n.$emit("update:modelValue", d.target.value))
     }), [
-      k(n.$slots, "default")
+      I(n.$slots, "default")
     ], 16, Za));
   }
-}, Qa = ["selected", "disabled"], _a = ["disabled", "selected", "value"], jn = /* @__PURE__ */ Object.assign({ inheritAttrs: !1 }, {
+}, Qa = ["selected", "disabled"], _a = ["disabled", "selected", "value"], Gn = /* @__PURE__ */ Object.assign({ inheritAttrs: !1 }, {
   __name: "BsSelectField",
   props: {
     data: {
@@ -2379,10 +2373,7 @@ const Et = {
     /** Pass id for the input element.  Will also be applied to label attribute. */
     inputId: String,
     /** Pass label text. */
-    label: {
-      type: String,
-      required: !0
-    },
+    label: { type: String },
     /** Placeholder attribute for `<input>`. */
     placeholder: String,
     /** Sets the required state on the input, append required* indicator to label. */
@@ -2396,56 +2387,56 @@ const Et = {
     modelValue: [String, Number]
   },
   setup(e) {
-    const a = e, t = N(), [l, n] = H(2), { toChild: o, toRoot: r } = Z(a, t), i = b(() => {
-      var g, p;
-      return ((p = (g = a.hints) == null ? void 0 : g.join) == null ? void 0 : p.call(g, `
+    const a = e, t = O(), [l, n] = H(2), { toChild: o, toRoot: d } = Z(a, t), i = p(() => {
+      var b, g;
+      return ((g = (b = a.hints) == null ? void 0 : b.join) == null ? void 0 : g.call(b, `
 `)) || a.hints;
-    }), d = b(() => a.error && a.errorMsg || a.hint || i.value || void 0), u = b(() => a.inputId || l.value), c = b(() => a.value || a.modelValue);
-    return (g, p) => (s(), v("div", V({ "data-component": "bs-select-field" }, f(r)), [
-      e.label || g.$slots.label ? (s(), L(f(_), {
+    }), s = p(() => a.error && a.errorMsg || a.hint || i.value || void 0), r = p(() => a.inputId || l.value), f = p(() => a.value || a.modelValue);
+    return (b, g) => (u(), v("div", E({ "data-component": "bs-select-field" }, c(d)), [
+      e.label || b.$slots.label ? (u(), A(c(_), {
         key: 0,
-        for: u.value,
+        for: r.value,
         disabled: e.disabled,
         required: e.required
       }, {
-        default: A(() => [
-          k(g.$slots, "label", {}, () => [
-            W(I(e.label), 1)
+        default: C(() => [
+          I(b.$slots, "label", {}, () => [
+            W(T(e.label), 1)
           ])
         ]),
         _: 3
       }, 8, ["for", "disabled", "required"])) : $("", !0),
-      P(f(Ja), V({
+      D(c(Ja), E({
         disabled: e.disabled,
         error: e.error,
-        "hint-id": f(n),
-        "input-id": u.value,
+        "hint-id": c(n),
+        "input-id": r.value,
         required: e.required,
-        value: c.value,
-        "onUpdate:modelValue": p[0] || (p[0] = (y) => g.$emit("update:modelValue", y))
-      }, f(o)), {
-        default: A(() => [
+        value: f.value,
+        "onUpdate:modelValue": g[0] || (g[0] = (y) => b.$emit("update:modelValue", y))
+      }, c(o)), {
+        default: C(() => [
           m("option", {
-            selected: !c.value,
+            selected: !f.value,
             value: "",
-            disabled: !!c.value
-          }, I(e.placeholder), 9, Qa),
-          (s(!0), v(R, null, Y(e.data, (y) => (s(), v("option", {
+            disabled: !!f.value
+          }, T(e.placeholder), 9, Qa),
+          (u(!0), v(R, null, Y(e.data, (y) => (u(), v("option", {
             key: y.value,
             disabled: y.disabled,
-            selected: g.validValue === y.value,
+            selected: f.value === y.value,
             value: y.value
-          }, I(y.label), 9, _a))), 128))
+          }, T(y.label), 9, _a))), 128))
         ]),
         _: 1
       }, 16, ["disabled", "error", "hint-id", "input-id", "required", "value"]),
-      d.value ? (s(), L(he, {
+      s.value ? (u(), A(pe, {
         key: 1,
         "data-disabled": e.disabled,
         error: e.error,
         "error-msg": e.errorMsg,
         hint: e.hint || i.value,
-        "hint-id": f(n)
+        "hint-id": c(n)
       }, null, 8, ["data-disabled", "error", "error-msg", "hint", "hint-id"])) : $("", !0)
     ], 16));
   }
@@ -2495,21 +2486,21 @@ const Et = {
   },
   emits: ["update:modelValue"],
   setup(e, { emit: a }) {
-    const t = e, l = a, n = N(), [o] = H(), { toChild: r, toRoot: i } = Z(t, n), d = b(() => t.inputId || o.value), u = b(() => t.checked || t.modelValue);
-    return (c, g) => (s(), v("div", V({
+    const t = e, l = a, n = O(), [o] = H(), { toChild: d, toRoot: i } = Z(t, n), s = p(() => t.inputId || o.value), r = p(() => t.checked || t.modelValue);
+    return (f, b) => (u(), v("div", E({
       class: "bs-boolean",
       "data-component": "bs-switch",
       "data-size": e.size
-    }, f(i)), [
-      e.label || c.$slots.label ? (s(), L(f(_), {
+    }, c(i)), [
+      e.label || f.$slots.label ? (u(), A(c(_), {
         key: 0,
-        for: d.value,
+        for: s.value,
         disabled: e.disabled,
         hide: e.hideLabel
       }, {
-        default: A(() => [
-          k(c.$slots, "label", {}, () => [
-            W(I(e.label), 1)
+        default: C(() => [
+          I(f.$slots, "label", {}, () => [
+            W(T(e.label), 1)
           ])
         ]),
         _: 3
@@ -2520,13 +2511,13 @@ const Et = {
         "data-pending": e.pending,
         "data-size": e.size
       }, [
-        m("input", V({
-          checked: u.value,
+        m("input", E({
+          checked: r.value,
           disabled: e.disabled,
-          id: d.value,
+          id: s.value,
           type: "checkbox"
-        }, f(r), {
-          onChange: g[0] || (g[0] = (p) => l("update:modelValue", p.target.checked))
+        }, c(d), {
+          onChange: b[0] || (b[0] = (g) => l("update:modelValue", g.target.checked))
         }), null, 16, an),
         m("span", {
           "aria-hidden": "true",
@@ -2553,18 +2544,18 @@ const Et = {
   },
   emits: ["tabClick"],
   setup(e, { emit: a }) {
-    const t = e, l = N(), n = w(), o = b(() => t.activeTabId === l.id), r = b(() => t.panelId || `${l.id}-panel`);
-    function i(u) {
-      (u.key === "Enter" || u.key === " ") && (u.preventDefault(), u.stopPropagation(), d());
+    const t = e, l = O(), n = k(), o = p(() => t.activeTabId === l.id), d = p(() => t.panelId || `${l.id}-panel`);
+    function i(r) {
+      (r.key === "Enter" || r.key === " ") && (r.preventDefault(), r.stopPropagation(), s());
     }
-    function d() {
+    function s() {
       if (t.activeTabId !== l.id) {
-        const u = new CustomEvent("tabClick", { detail: l.id, bubbles: !0 });
-        n.value.dispatchEvent(u);
+        const r = new CustomEvent("tabClick", { detail: l.id, bubbles: !0 });
+        n.value.dispatchEvent(r);
       }
     }
-    return (u, c) => (s(), v("div", {
-      "aria-controls": r.value,
+    return (r, f) => (u(), v("div", {
+      "aria-controls": d.value,
       "aria-selected": o.value ? "true" : "false",
       "data-hidden": e.hidden || void 0,
       "data-component": "bs-tab",
@@ -2572,10 +2563,10 @@ const Et = {
       tabindex: "0",
       ref_key: "hostEl",
       ref: n,
-      onClick: d,
+      onClick: s,
       onKeydown: i
     }, [
-      k(u.$slots, "default")
+      I(r.$slots, "default")
     ], 40, ln));
   }
 }, on = ["id", "data-resizing"], rn = ["aria-controls", "aria-expanded", "data-active", "data-hidden", "id"], sn = 73, dn = 20, un = 16, Hn = {
@@ -2589,52 +2580,52 @@ const Et = {
   },
   emits: ["tabChange", "update:modelValue"],
   setup(e, { emit: a }) {
-    const t = e, l = a, n = w(!1), o = w(!1), r = w([]), i = w(!1), d = w(!1), u = w(), c = w([]), g = w(!1), p = w([]), y = w(), D = w(), z = w(), [T, x] = H(2), S = b(() => t.activeTabId ? p.value.findIndex((h) => h.id === t.activeTabId) : 0), q = b(() => r.value.some((h) => h.id === t.activeTabId)), G = b(() => `${x.value}-options`), ee = b(() => `${x.value}-toggle`), J = b(() => {
+    const t = e, l = a, n = k(!1), o = k(!1), d = k([]), i = k(!1), s = k(!1), r = k(), f = k([]), b = k(!1), g = k([]), y = k(), L = k(), M = k(), [P, w] = H(2), S = p(() => t.activeTabId ? g.value.findIndex((h) => h.id === t.activeTabId) : 0), q = p(() => d.value.some((h) => h.id === t.activeTabId)), j = p(() => `${w.value}-options`), ee = p(() => `${w.value}-toggle`), J = p(() => {
       var h;
-      return q.value ? (h = p.value[S.value]) == null ? void 0 : h.textContent : "More";
-    }), ke = b(() => q.value ? c.value[S.value] - c.value[S.value - 1] + dn : sn), Q = b(() => {
-      var B, C;
+      return q.value ? (h = g.value[S.value]) == null ? void 0 : h.textContent : "More";
+    }), ke = p(() => q.value ? f.value[S.value] - f.value[S.value - 1] + dn : sn), Q = p(() => {
+      var B, x;
       let h = [];
       if (typeof window > "u")
         return h;
-      for (let M of p.value) {
-        if (((B = M.dataset) == null ? void 0 : B.hidden) === "true" || ((C = M.dataset) == null ? void 0 : C.hidden) === "" || M.getAttribute("tabindex") === "-1")
+      for (let z of g.value) {
+        if (((B = z.dataset) == null ? void 0 : B.hidden) === "true" || ((x = z.dataset) == null ? void 0 : x.hidden) === "" || z.getAttribute("tabindex") === "-1")
           break;
-        h.push(M);
+        h.push(z);
       }
-      return d.value && h.push(u.value.querySelector(".bs-tab-list-toggle")), h;
+      return s.value && h.push(r.value.querySelector(".bs-tab-list-toggle")), h;
     });
     function ue() {
       var K;
-      let h = !1, B, C = 0, M = !1, j = [];
-      if ((K = p.value) != null && K.length) {
-        for (let F = 0; F < p.value.length; F++) {
-          if (B = p.value[F], B.setAttribute("tabindex", "-1"), M && F !== S.value) {
-            B.dataset.hidden = "true", j.push(B);
+      let h = !1, B, x = 0, z = !1, G = [];
+      if ((K = g.value) != null && K.length) {
+        for (let F = 0; F < g.value.length; F++) {
+          if (B = g.value[F], B.setAttribute("tabindex", "-1"), z && F !== S.value) {
+            B.dataset.hidden = "true", G.push(B);
             continue;
           }
-          if (C = F < p.value.length - 1 ? z.value - ke.value : z.value, c.value[F] > C) {
-            B.dataset.hidden = "true", j.push(B), h = !0, M = !0;
+          if (x = F < g.value.length - 1 ? M.value - ke.value : M.value, f.value[F] > x) {
+            B.dataset.hidden = "true", G.push(B), h = !0, z = !0;
             continue;
           }
           B.dataset.hidden = "false", B.setAttribute("tabindex", "0");
         }
-        d.value = h, r.value = j, n.value || Ue(() => n.value = !0), setTimeout(() => {
-          Ve(), g.value = !0;
-        }, g.value ? 0 : 1e3);
+        s.value = h, d.value = G, n.value || Ue(() => n.value = !0), setTimeout(() => {
+          Ve(), b.value = !0;
+        }, b.value ? 0 : 1e3);
       }
     }
     function ce(h) {
       l("tabChange", h), l("update:modelValue", h);
     }
     function Ie(h) {
-      var M, j, K;
-      const B = (K = (j = (M = p.value[h]) == null ? void 0 : M.getBoundingClientRect) == null ? void 0 : j.call(M)) == null ? void 0 : K.width;
-      return B || (h === 0 ? c.value[0] : c.value[h] - c.value[h - 1]) || 0;
+      var z, G, K;
+      const B = (K = (G = (z = g.value[h]) == null ? void 0 : z.getBoundingClientRect) == null ? void 0 : G.call(z)) == null ? void 0 : K.width;
+      return B || (h === 0 ? f.value[0] : f.value[h] - f.value[h - 1]) || 0;
     }
     function Te() {
       var h;
-      (h = p.value[S.value]) == null || h.setAttribute("aria-selected", "true"), ue();
+      (h = g.value[S.value]) == null || h.setAttribute("aria-selected", "true"), ue();
     }
     function xe() {
       var h;
@@ -2653,113 +2644,115 @@ const Et = {
       const B = h.target.closest('[role="tab"]');
       if (!B || B.getAttribute("aria-selected") === "true")
         return;
-      const C = B.getAttribute("id");
-      ce(C);
+      const x = B.getAttribute("id");
+      ce(x);
     }
     function Pe(h) {
       if (h.key === "ArrowLeft" || h.key === "ArrowRight") {
-        const B = Q.value.findIndex((C) => C.id === h.target.id);
+        const B = Q.value.findIndex((x) => x.id === h.target.id);
         if (B === -1)
           return;
         h.preventDefault(), h.stopPropagation(), h.key === "ArrowLeft" ? Ee(B) : De(B);
       }
     }
     function De(h) {
-      var C;
+      var x;
       const B = (h + 1) % Q.value.length;
-      (C = Q.value[B]) == null || C.focus();
+      (x = Q.value[B]) == null || x.focus();
     }
     function Ee(h) {
-      var C;
+      var x;
       const B = h === 0 ? Q.value.length - 1 : h - 1;
-      (C = Q.value[B]) == null || C.focus();
+      (x = Q.value[B]) == null || x.focus();
     }
     function Ve() {
-      var K, F, pe, be;
-      const h = parseInt(u.value.style.getPropertyValue("--active-line-offset")) || 0, B = z.value;
-      let C = 300, M = ((F = (K = Q.value) == null ? void 0 : K[S.value]) == null ? void 0 : F.offsetLeft) || 0, j = Ie(S.value);
-      d.value && q.value && (M = (pe = y.value) == null ? void 0 : pe.offsetLeft, j = (be = y.value) == null ? void 0 : be.offsetWidth), C = Math.max(Math.abs((M - h) / B * 300), 100), u.value.style.setProperty("--active-line-max-width", `${B}px`), u.value.style.setProperty("--active-line-scale", `${j / B}`), u.value.style.setProperty("--active-line-offset", `${M}px`), u.value.style.setProperty("--active-line-transition-duration", `${C}ms`);
+      var K, F, ge, be;
+      const h = parseInt(r.value.style.getPropertyValue("--active-line-offset")) || 0, B = M.value;
+      let x = 300, z = ((F = (K = Q.value) == null ? void 0 : K[S.value]) == null ? void 0 : F.offsetLeft) || 0, G = Ie(S.value);
+      s.value && q.value && (z = (ge = y.value) == null ? void 0 : ge.offsetLeft, G = (be = y.value) == null ? void 0 : be.offsetWidth), x = Math.max(Math.abs((z - h) / B * 300), 100), r.value.style.setProperty("--active-line-max-width", `${B}px`), r.value.style.setProperty("--active-line-scale", `${G / B}`), r.value.style.setProperty("--active-line-offset", `${z}px`), r.value.style.setProperty("--active-line-transition-duration", `${x}ms`);
     }
     function qe() {
       var h, B;
-      (B = (h = D.value) == null ? void 0 : h.disconnect) == null || B.call(h), D.value = null;
+      (B = (h = L.value) == null ? void 0 : h.disconnect) == null || B.call(h), L.value = null;
     }
     function ze() {
-      D.value = new ResizeObserver((h) => {
+      L.value = new ResizeObserver((h) => {
         for (let B of h)
-          z.value = B.contentBoxSize[0].inlineSize;
+          M.value = B.contentBoxSize[0].inlineSize;
         ue();
-      }), D.value.observe(u.value);
+      }), L.value.observe(r.value);
     }
     function Me() {
-      p.value = Array.from(u.value.children).filter((h) => h.role === "tab");
+      g.value = Array.from(r.value.children).filter((h) => h.role === "tab");
     }
     function Re() {
       let h;
-      p.value.forEach((B, C) => {
-        h = B.getBoundingClientRect().width + un, c.value.push(C ? h + c.value[C - 1] : h);
+      g.value.forEach((B, x) => {
+        h = B.getBoundingClientRect().width + un, f.value.push(x ? h + f.value[x - 1] : h);
       });
     }
-    return E(() => t.activeTabId, Te), O(() => {
+    return V(() => t.activeTabId, Te), N(() => {
       var h;
       try {
-        Me(), Re(), ze(), z.value = u.value.getBoundingClientRect().width, ue(), t.withBsTabs || (h = p.value[S.value]) == null || h.setAttribute("aria-selected", "true");
+        Me(), Re(), ze(), M.value = r.value.getBoundingClientRect().width, ue(), t.withBsTabs || (h = g.value[S.value]) == null || h.setAttribute("aria-selected", "true");
       } catch (B) {
         console.log("tab error", B);
       }
-    }), ne(qe), (h, B) => (s(), v("div", {
+    }), ne(qe), (h, B) => (u(), v("div", {
       class: "bs-tab-list",
       "data-component": "bs-tab-list",
-      id: h.$attrs.id || f(T),
+      id: h.$attrs.id || c(P),
       ref_key: "hostEl",
-      ref: u,
+      ref: r,
       role: "tablist",
       "data-resizing": !n.value || void 0,
       onClick: Le,
-      "on:tabClick": B[0] || (B[0] = (C) => ce(C.detail)),
+      "on:tabClick": B[0] || (B[0] = (x) => ce(x.detail)),
       onKeydown: Pe
     }, [
-      k(h.$slots, "default"),
+      I(h.$slots, "default"),
       m("button", {
-        "aria-controls": f(x),
+        "aria-controls": c(w),
         "aria-expanded": i.value,
         class: "bs-tab-list-toggle",
         "data-active": q.value || void 0,
-        "data-hidden": !d.value,
+        "data-hidden": !s.value,
         id: ee.value,
         ref_key: "dropdownToggle",
         ref: y,
         onClick: Ce
       }, [
-        P(f(et), { size: "sm" }),
-        W(" " + I(J.value), 1)
+        D(c(et), { size: "sm" }),
+        W(" " + T(J.value), 1)
       ], 8, rn),
-      P(f(Zt), {
+      D(c(Zt), {
+        "anchor-id": ee.value,
+        "container-id": h.$attrs.id || c(P),
+        "helper-description": e.helperDescription || void 0,
+        "helper-text": e.helperText,
+        id: c(w),
+        "options-id": j.value,
+        position: "right",
+        preloaded: "",
         shown: i.value,
-        id: f(x),
-        class: "bs-tab-list-dropdown",
-        containerId: h.$attrs.id || f(T),
-        helperText: e.helperText,
-        helperDescription: e.helperDescription || void 0,
-        optionsId: G.value,
-        toggleId: ee.value,
+        width: "content",
         onClose: xe,
-        onOptselected: Ae
+        "onUpdate:modelValue": Ae
       }, {
-        default: A(() => [
-          (s(!0), v(R, null, Y(r.value, (C) => (s(), L(f(Kt), {
-            key: C.id,
-            value: C.id,
-            "options-id": G.value
+        default: C(() => [
+          (u(!0), v(R, null, Y(d.value, (x) => (u(), A(c(Kt), {
+            key: x.id,
+            value: x.id,
+            "options-id": j.value
           }, {
-            default: A(() => [
-              W(I(C.textContent), 1)
+            default: C(() => [
+              W(T(x.textContent), 1)
             ]),
             _: 2
           }, 1032, ["value", "options-id"]))), 128))
         ]),
         _: 1
-      }, 8, ["shown", "id", "containerId", "helperText", "helperDescription", "optionsId", "toggleId"])
+      }, 8, ["anchor-id", "container-id", "helper-description", "helper-text", "id", "options-id", "shown"])
     ], 40, on));
   }
 }, cn = ["aria-labelledby", "data-active", "id"], Kn = {
@@ -2775,15 +2768,15 @@ const Et = {
     }
   },
   setup(e) {
-    const a = e, t = N(), l = b(() => a.activeTabId && a.activeTabId === a.tabId), n = b(() => t.id || `${a.tabId}-panel`);
-    return (o, r) => (s(), v("section", {
+    const a = e, t = O(), l = p(() => a.activeTabId && a.activeTabId === a.tabId), n = p(() => t.id || `${a.tabId}-panel`);
+    return (o, d) => (u(), v("section", {
       "aria-labelledby": e.tabId,
       "data-active": l.value,
       "data-component": "bs-tab-panel",
       id: n.value,
       role: "tabpanel"
     }, [
-      k(o.$slots, "default")
+      I(o.$slots, "default")
     ], 8, cn));
   }
 }, fn = ["data-error", "id", "rows", "value"], vn = {
@@ -2801,14 +2794,14 @@ const Et = {
   },
   emits: ["update:modelValue"],
   setup(e, { emit: a }) {
-    const t = e, l = b(() => ({ [t.error ? "aria-errormessage" : "aria-describedby"]: t.hintId }));
-    return (n, o) => (s(), v("textarea", V({
+    const t = e, l = p(() => ({ [t.error ? "aria-errormessage" : "aria-describedby"]: t.hintId }));
+    return (n, o) => (u(), v("textarea", E({
       "data-component": "bs-textarea",
       "data-error": e.error,
       id: n.$attrs.id || e.inputId,
       rows: n.$attrs.rows || 6,
       value: e.value || e.modelValue,
-      onInput: o[0] || (o[0] = (r) => n.$emit("update:modelValue", r.target.value))
+      onInput: o[0] || (o[0] = (d) => n.$emit("update:modelValue", d.target.value))
     }, l.value), null, 16, fn));
   }
 }, Yn = /* @__PURE__ */ Object.assign({ inheritAttrs: !1 }, {
@@ -2835,10 +2828,7 @@ const Et = {
     /** Pass id for the input element.  Will also be applied to label attribute. */
     inputId: String,
     /** Pass label text. */
-    label: {
-      type: String,
-      required: !0
-    },
+    label: { type: String },
     /** List additional attributes by name (comma-separated) to pass through to `<textarea>`. */
     passAttrs: {
       type: String,
@@ -2853,7 +2843,7 @@ const Et = {
     },
     /** Sets the number of rows for the textarea.  Defaults to `6`. */
     rows: {
-      type: Number,
+      type: [Number, String],
       default: 6
     },
     /** Sets the textarea value - do not use if using `v-model`. */
@@ -2863,52 +2853,52 @@ const Et = {
   },
   emits: ["update:modelValue"],
   setup(e, { emit: a }) {
-    const t = e, l = N(), [n, o] = H(2), { toChild: r, toRoot: i } = Z(t, l), d = b(() => {
-      var p;
-      return ((p = t.value || t.modelValue) == null ? void 0 : p.length) || 0;
-    }), u = b(() => {
-      var p, y;
-      return ((y = (p = t.hints) == null ? void 0 : p.join) == null ? void 0 : y.call(p, `
+    const t = e, l = O(), [n, o] = H(2), { toChild: d, toRoot: i } = Z(t, l), s = p(() => {
+      var g;
+      return ((g = t.value || t.modelValue) == null ? void 0 : g.length) || 0;
+    }), r = p(() => {
+      var g, y;
+      return ((y = (g = t.hints) == null ? void 0 : g.join) == null ? void 0 : y.call(g, `
 `)) || t.hints;
-    }), c = b(() => t.error && t.errorMsg || t.hint || u.value || void 0), g = b(() => t.inputId || n.value);
-    return (p, y) => (s(), v("div", V({ "data-component": "bs-textarea-field" }, f(i)), [
-      e.label || p.$slots.label ? (s(), L(f(_), {
+    }), f = p(() => t.error && t.errorMsg || t.hint || r.value || void 0), b = p(() => t.inputId || n.value);
+    return (g, y) => (u(), v("div", E({ "data-component": "bs-textarea-field" }, c(i)), [
+      e.label || g.$slots.label ? (u(), A(c(_), {
         key: 0,
-        for: g.value,
+        for: b.value,
         disabled: e.disabled,
         required: e.required
       }, {
-        default: A(() => [
-          k(p.$slots, "label", {}, () => [
-            W(I(e.label), 1)
+        default: C(() => [
+          I(g.$slots, "label", {}, () => [
+            W(T(e.label), 1)
           ])
         ]),
         _: 3
       }, 8, ["for", "disabled", "required"])) : $("", !0),
-      P(f(vn), V({
+      D(c(vn), E({
         disabled: e.disabled,
         error: e.error,
-        "hint-id": f(o),
-        id: g.value,
+        "hint-id": c(o),
+        id: b.value,
         placeholder: e.placeholder,
         required: e.required,
         rows: e.rows,
         value: e.value || e.modelValue,
-        "onUpdate:modelValue": y[0] || (y[0] = (D) => p.$emit("update:modelValue", D))
-      }, f(r)), null, 16, ["disabled", "error", "hint-id", "id", "placeholder", "required", "rows", "value"]),
-      c.value || e.charMax ? (s(), L(he, {
+        "onUpdate:modelValue": y[0] || (y[0] = (L) => g.$emit("update:modelValue", L))
+      }, c(d)), null, 16, ["disabled", "error", "hint-id", "id", "placeholder", "required", "rows", "value"]),
+      f.value || e.charMax ? (u(), A(pe, {
         key: 1,
-        "char-count": d.value,
+        "char-count": s.value,
         "char-max": e.charMax,
         "data-disabled": e.disabled,
         error: e.error,
         "error-msg": e.errorMsg,
-        hint: e.hint || u.value,
-        "hint-id": f(o)
+        hint: e.hint || r.value,
+        "hint-id": c(o)
       }, null, 8, ["char-count", "char-max", "data-disabled", "error", "error-msg", "hint", "hint-id"])) : $("", !0)
     ], 16));
   }
-}), gn = ["data-variant", "data-stacked"], Xn = {
+}), hn = ["data-variant", "data-stacked"], Xn = {
   __name: "BsToast",
   props: {
     shown: {
@@ -2957,79 +2947,79 @@ const Et = {
     const t = e, l = a, { transition: n } = se(t);
     let o = null;
     ae("variant", t.variant), ae("handleDismiss", i);
-    const r = te("stacked", t.stacked);
+    const d = te("stacked", t.stacked);
     function i() {
       o && (clearTimeout(o), o = null), l("dismiss", t.toastId);
     }
-    function d() {
+    function s() {
       t.duration > 0 && (o = setTimeout(() => {
         i();
       }, t.duration)), l("after-enter");
     }
-    return (u, c) => (s(), L(f(de), {
-      shown: f(n),
+    return (r, f) => (u(), A(c(de), {
+      shown: c(n),
       preloaded: e.preloaded,
       duration: 200,
       "enter-attribute": "data-shown",
-      onAfterEnter: d,
-      onAfterLeave: c[0] || (c[0] = (g) => l("after-leave"))
+      onAfterEnter: s,
+      onAfterLeave: f[0] || (f[0] = (b) => l("after-leave"))
     }, {
-      default: A(() => [
+      default: C(() => [
         m("div", {
           class: "bs-toast",
           "data-variant": e.variant,
-          "data-stacked": f(r) || void 0,
+          "data-stacked": c(d) || void 0,
           "aria-role": "alert"
         }, [
-          k(u.$slots, "default")
-        ], 8, gn)
+          I(r.$slots, "default")
+        ], 8, hn)
       ]),
       _: 3
     }, 8, ["shown", "preloaded"]));
   }
-}, hn = ["data-stacked"], Zn = {
+}, pn = ["data-stacked"], Zn = {
   __name: "BsToastActions",
   setup(e) {
-    const a = w(!1);
-    O(() => {
+    const a = k(!1);
+    N(() => {
       var n;
       const l = He();
       ((n = l.default) == null ? void 0 : n.call(l).length) > 2 && (a.value = !0);
     });
     const t = te("handleDismiss");
-    return (l, n) => (s(), v("div", {
+    return (l, n) => (u(), v("div", {
       class: "bs-toast-actions",
       "data-stacked": a.value || void 0
     }, [
-      k(l.$slots, "default", {}, () => [
-        P(wt, {
+      I(l.$slots, "default", {}, () => [
+        D(wt, {
           size: "sm",
           "text-btn": "",
-          onClick: f(t)
+          onClick: c(t)
         }, {
-          default: A(() => [
+          default: C(() => [
             W(" Dismiss ")
           ]),
           _: 1
         }, 8, ["onClick"])
       ])
-    ], 8, hn));
+    ], 8, pn));
   }
-}, pn = (e, a) => {
+}, gn = (e, a) => {
   const t = e.__vccOpts || e;
   for (const [l, n] of a)
     t[l] = n;
   return t;
 }, bn = {}, mn = { class: "bs-toast-body" };
 function yn(e, a) {
-  return s(), v("div", mn, [
-    k(e.$slots, "default")
+  return u(), v("div", mn, [
+    I(e.$slots, "default")
   ]);
 }
-const Jn = /* @__PURE__ */ pn(bn, [["render", yn]]), Bn = ["data-variant"], Qn = {
+const Jn = /* @__PURE__ */ gn(bn, [["render", yn]]), Bn = ["data-variant"], Qn = {
   __name: "BsToastHeader",
   setup(e) {
-    const a = te("variant"), t = b(() => {
+    const a = te("variant"), t = p(() => {
       switch (a) {
         case "warning":
           return ve;
@@ -3041,21 +3031,21 @@ const Jn = /* @__PURE__ */ pn(bn, [["render", yn]]), Bn = ["data-variant"], Qn =
           return tt;
       }
     });
-    return (l, n) => (s(), v("div", {
+    return (l, n) => (u(), v("div", {
       class: "bs-toast-header",
-      "data-variant": f(a)
+      "data-variant": c(a)
     }, [
-      (s(), L(U(t.value), { class: "bs-toast-header-icon" })),
+      (u(), A(U(t.value), { class: "bs-toast-header-icon" })),
       m("h5", null, [
-        k(l.$slots, "default")
+        I(l.$slots, "default")
       ])
     ], 8, Bn));
   }
 }, $n = { class: "bs-toaster" }, _n = {
   __name: "BsToaster",
   setup(e) {
-    return ae("stacked", !0), (a, t) => (s(), v("div", $n, [
-      k(a.$slots, "default")
+    return ae("stacked", !0), (a, t) => (u(), v("div", $n, [
+      I(a.$slots, "default")
     ]));
   }
 }, Sn = ["data-position"], wn = ["id"], el = {
@@ -3085,7 +3075,7 @@ const Jn = /* @__PURE__ */ pn(bn, [["render", yn]]), Bn = ["data-variant"], Qn =
     }
   },
   setup(e) {
-    const a = e, t = w(!1), l = w(!1), n = b(() => {
+    const a = e, t = k(!1), l = k(!1), n = p(() => {
       let i = "bs-tooltip-text";
       return l.value && (a.position === void 0 || a.position === "top" || a.position === "bottom" ? i += " escaped-x" : a.position === "left" || a.position === "right" ? i += " escaped-y" : i += " escaped"), i;
     });
@@ -3095,25 +3085,25 @@ const Jn = /* @__PURE__ */ pn(bn, [["render", yn]]), Bn = ["data-variant"], Qn =
     function o() {
       t.value = !0;
     }
-    function r() {
+    function d() {
       t.value = !1, l.value = !1;
     }
-    return (i, d) => (s(), v("div", {
+    return (i, s) => (u(), v("div", {
       class: "bs-tooltip",
       "data-position": e.position || void 0,
       "data-component": "bs-tooltip",
       onMouseenter: o,
       onFocusin: o,
-      onMouseleave: r,
-      onFocusout: r
+      onMouseleave: d,
+      onFocusout: d
     }, [
-      k(i.$slots, "default"),
-      e.content ? (s(), v("div", {
+      I(i.$slots, "default"),
+      e.content ? (u(), v("div", {
         key: 0,
         class: X(n.value),
         id: e.tooltipId,
         role: "tooltip"
-      }, I(e.content), 11, wn)) : $("", !0)
+      }, T(e.content), 11, wn)) : $("", !0)
     ], 40, Sn));
   }
 };
@@ -3129,9 +3119,10 @@ export {
   Kt as BsDropdownOption,
   Xt as BsDropdownOptionList,
   Zt as BsDropdownWithOptions,
+  pe as BsFieldDetails,
   Vn as BsIconGradientWrapper,
   we as BsInput,
-  aa as BsInputAddon,
+  oa as BsInputAddon,
   qn as BsInputField,
   zn as BsInputSearch,
   _ as BsLabel,
@@ -3143,9 +3134,9 @@ export {
   Wn as BsProfile,
   Fa as BsProfileDetails,
   Ka as BsProfileImg,
-  Gn as BsRadio,
+  jn as BsRadio,
   Ja as BsSelect,
-  jn as BsSelectField,
+  Gn as BsSelectField,
   Fn as BsSwitch,
   Un as BsTab,
   Hn as BsTabList,