@wwtdev/bsds-components-vue3 2.0.7 → 2.0.9

package/lib/bsds-components.js

@@ -1,4 +1,4 @@
-import { computed as p, ref as k, onMounted as O, onUnmounted as ne, shallowRef as Ne, watch as E, defineAsyncComponent as Oe, openBlock as u, createElementBlock as f, unref as v, 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 N, mergeProps as V, withCtx as C, Fragment as R, renderList as Y, createTextVNode as W, withDirectives as We, Transition as me, vShow as je, inject as te, provide as ae, onDeactivated as Ge, normalizeStyle as Fe, isRef as Ue, nextTick as He, useSlots as Ke } from "vue";
+import { computed as p, ref as k, onMounted as O, onUnmounted as ne, shallowRef as Ne, watch as E, defineAsyncComponent as Oe, openBlock as d, createElementBlock as f, unref as v, 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 N, mergeProps as V, withCtx as C, Fragment as R, renderList as Y, createTextVNode as W, withDirectives as We, Transition as me, vShow as je, inject as te, provide as ae, onDeactivated as Ge, normalizeStyle as Fe, isRef as Ue, nextTick as He, useSlots as Ke } from "vue";
 import { v4 as Ye } from "uuid";
 import { BsIconCaretDown as Xe, BsIconWarning as ve, BsIconClose as oe, BsIconSearch as Ze, BsIconCaretLeftDouble as Je, BsIconCaretLeft as Qe, BsIconCaretRight as _e, BsIconCaretRightDouble as et, BsIconActionEllipsis as tt, BsIconCircleExclamation as at, BsIconThumbsUpStroke as nt } from "@wwtdev/bsds-icons-vue3";
 import { Chart as fe, BarController as lt, BarElement as ot, CategoryScale as it, LinearScale as rt, Legend as st, Tooltip as dt } from "chart.js";
@@ -10,8 +10,8 @@ const ye = {
 };
 function he(e, a, t = "button") {
   const l = ut(e, a, t), n = p(() => {
-    const o = l.value === "button", s = {};
-    return o ? (s.type = a.type || "button", s.autocomplete = "off", e.disabled && (s.disabled = !0)) : e.disabled && (s["aria-disabled"] = "true", s.tabindex = "-1"), s;
+    const o = l.value === "button", u = {};
+    return o ? (u.type = a.type || "button", u.autocomplete = "off", e.disabled && (u.disabled = !0)) : e.disabled && (u["aria-disabled"] = "true", u.tabindex = "-1"), u;
   });
   return { rootTag: l, attrsToBind: n };
 }
@@ -44,12 +44,12 @@ function ie(e) {
     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, s, i, d, r;
+    var o, u, i, s, r;
     if (e.disabled) {
       n.preventDefault(), n.stopImmediatePropagation();
       return;
     }
-    !e.href || !t.value || ((s = (o = n.target.href) == null ? void 0 : o.endsWith) != null && s.call(o, e.href) || (r = (d = (i = n.target.closest("a")) == null ? void 0 : i.href) == null ? void 0 : d.endsWith) != null && r.call(d, e.href)) && (n.preventDefault(), t.value(e.href));
+    !e.href || !t.value || ((u = (o = n.target.href) == null ? void 0 : o.endsWith) != null && u.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 };
 }
@@ -62,8 +62,8 @@ const le = (e, a) => {
       return null;
     const o = n.startsWith("bs-") ? Be(n) : `BsIcon${Be(n)}`;
     return Oe(async () => {
-      const { [o]: s } = await import("@wwtdev/bsds-icons-vue3");
-      return s;
+      const { [o]: u } = await import("@wwtdev/bsds-icons-vue3");
+      return u;
     });
   }
   const l = Ne();
@@ -94,16 +94,16 @@ const re = (e, a, t = void 0) => {
     l.disconnect();
   });
 };
-function Z(e, a) {
-  var o;
-  const t = new Set(((o = e.passAttrs) == null ? void 0 : o.split(",")) || "");
-  t.delete("");
-  const l = k({}), n = k({});
-  for (let s in a)
-    t.has(s) ? n.value[s] = a[s] : l.value[s] = a[s];
+function Z(e, a, t = []) {
+  var i, s;
+  const l = ((s = (i = e.passAttrs) == null ? void 0 : i.split) == null ? void 0 : s.call(i, ",")) || [], n = /* @__PURE__ */ new Set([...l, ...t]);
+  n.delete("");
+  const o = k({}), u = k({});
+  for (let r in a)
+    n.has(r) ? u.value[r] = a[r] : o.value[r] = a[r];
   return {
-    toRoot: l,
-    toChild: n
+    toRoot: o,
+    toChild: u
   };
 }
 const se = (e) => {
@@ -137,11 +137,11 @@ const se = (e) => {
   },
   emits: ["toggled"],
   setup(e, { emit: a }) {
-    const t = e, l = a, n = k(null), o = k(!1), { icon: s } = le(t, "icon"), [i] = H(), d = p(() => i.value + "-content"), r = p(() => i.value + "-title"), c = p(() => t.openItemId && t.openItemId === i.value || t.openItem === !0), b = p(() => t.controlled ? c.value : o.value);
+    const t = e, l = a, n = k(null), o = k(!1), { icon: u } = le(t, "icon"), [i] = H(), s = p(() => i.value + "-content"), r = p(() => i.value + "-title"), c = p(() => t.openItemId && t.openItemId === i.value || t.openItem === !0), b = p(() => t.controlled ? c.value : o.value);
     function g() {
       l("toggled", i.value), t.controlled || (o.value = !o.value);
     }
-    return (y, L) => (u(), f("div", {
+    return (y, L) => (d(), f("div", {
       id: v(i),
       ref_key: "containerRef",
       ref: n,
@@ -154,14 +154,14 @@ const se = (e) => {
         "data-open": b.value
       }, [
         m("button", {
-          "aria-controls": d.value,
+          "aria-controls": s.value,
           "aria-expanded": b.value,
           type: "button",
           onClick: g
         }, [
-          e.icon || y.$slots.icon ? (u(), f("span", bt, [
+          e.icon || y.$slots.icon ? (d(), f("span", bt, [
             I(y.$slots, "icon", {}, () => [
-              e.icon ? (u(), A(U(v(s) ? v(s) : "span"), { key: 0 })) : $("", !0)
+              e.icon ? (d(), A(U(v(u) ? v(u) : "span"), { key: 0 })) : $("", !0)
             ])
           ])) : $("", !0),
           m("span", {
@@ -179,7 +179,7 @@ const se = (e) => {
         "aria-labelledby": r.value,
         class: "bs-accordion-content",
         "data-open": b.value,
-        id: d.value,
+        id: s.value,
         part: "content",
         role: "region"
       }, [
@@ -233,14 +233,14 @@ const se = (e) => {
   },
   setup(e) {
     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 d, r;
-      const o = ((r = (d = t.value) == null ? void 0 : d.textContent) == null ? void 0 : r.trim()) || "", s = l.value ? l.value + " " : "";
-      if (!s && !a.dot)
+      var s, r;
+      const o = ((r = (s = t.value) == null ? void 0 : s.textContent) == null ? void 0 : r.trim()) || "", u = l.value ? l.value + " " : "";
+      if (!u && !a.dot)
         return o;
       const i = a.count !== 1 ? "s" : "";
-      return `${o}, ${s}${a.label}${i}`;
+      return `${o}, ${u}${a.label}${i}`;
     });
-    return (o, s) => (u(), f("span", {
+    return (o, u) => (d(), f("span", {
       ref_key: "hostRef",
       ref: t,
       class: X({ "bs-badge": e.dot || l.value }),
@@ -266,7 +266,7 @@ const se = (e) => {
     function n() {
       l.value = !0, t("dismiss");
     }
-    return (o, s) => l.value ? $("", !0) : (u(), f("div", $t, [
+    return (o, u) => l.value ? $("", !0) : (d(), f("div", $t, [
       m("div", St, [
         m("div", wt, [
           D(v(ve), { size: "lg" })
@@ -297,7 +297,7 @@ const se = (e) => {
   },
   setup(e) {
     const a = e, t = N(), { rootTag: l, attrsToBind: n } = he(a, t), { onLinkClick: o } = ie(a);
-    return (s, i) => (u(), A(U(v(l)), V({
+    return (u, i) => (d(), A(U(v(l)), V({
       class: "bs-button",
       "data-component": "bs-button",
       "data-ghost": e.ghostBtn,
@@ -307,7 +307,7 @@ const se = (e) => {
       href: e.href
     }, v(n), { onClick: v(o) }), {
       default: C(() => [
-        I(s.$slots, "default")
+        I(u.$slots, "default")
       ]),
       _: 3
     }, 16, ["data-ghost", "data-size", "data-text", "data-variant", "href", "onClick"]));
@@ -331,7 +331,7 @@ const se = (e) => {
   setup(e) {
     return (a, t) => {
       var l;
-      return u(), f("div", It, [
+      return d(), f("div", It, [
         m("table", { summary: e.tableTitle }, [
           m("thead", null, [
             m("tr", null, [
@@ -341,19 +341,19 @@ const se = (e) => {
             ]),
             m("tr", null, [
               Ct,
-              (u(!0), f(R, null, Y(e.dataIdxLabels, (n) => (u(), f("th", {
+              (d(!0), f(R, null, Y(e.dataIdxLabels, (n) => (d(), f("th", {
                 key: n,
                 scope: "col"
               }, T(n), 1))), 128))
             ])
           ]),
           m("tbody", null, [
-            (u(!0), f(R, null, Y(e.data, (n) => (u(), f("tr", {
+            (d(!0), f(R, null, Y(e.data, (n) => (d(), f("tr", {
               key: n.label
             }, [
               m("th", At, T(n.label), 1),
-              (u(!0), f(R, null, Y(n.data, (o, s) => (u(), f("td", {
-                key: `${o}${s}`
+              (d(!0), f(R, null, Y(n.data, (o, u) => (d(), f("td", {
+                key: `${o}${u}`
               }, T(o), 1))), 128))
             ]))), 128))
           ])
@@ -367,13 +367,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 s = 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(s), n.appendChild(o), n.appendChild(i), e.appendChild(n);
+      const u = 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(u), n.appendChild(o), n.appendChild(i), e.appendChild(n);
     });
   }
 }), Dt = ({ type: e, datasets: a, labels: t, tooltips: l }) => ({
@@ -478,7 +478,7 @@ const Et = {
     let n;
     const o = p(() => {
       const c = {
-        datasets: s.value,
+        datasets: u.value,
         labels: a.dataIdxLabels,
         type: "bar",
         tooltips: a.showTooltips
@@ -505,18 +505,18 @@ const Et = {
           }
         }
       }, b;
-    }), s = p(() => a.data.map((c, b) => ({
+    }), u = p(() => a.data.map((c, b) => ({
       ...c,
       backgroundColor: Vt(b),
       categoryPercentage: a.data.length > 1 ? 0.5 : 0.33
-    }))), i = p(() => a.chartTitle || `${a.yLabel} / ${a.xLabel}`), d = $e(function(c, b) {
+    }))), i = p(() => a.chartTitle || `${a.yLabel} / ${a.xLabel}`), s = $e(function(c, b) {
       !n || c === b || (n.options = o.value.options, n.update());
     }, 100), r = $e(function() {
       n && (n.data = o.value.data, n.update());
     }, 100);
     return O(() => {
       fe.register(lt, ot, it, rt, st, dt), 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, r), E(() => a.dataIdxLabels, r), (c, b) => (u(), f("div", Et, [
+    }), E(() => a.showLegend, s), E(() => a.showTooltips, s), E(() => a.showXGrid, s), E(() => a.showYGrid, s), E(() => a.stacked, s), E(() => a.xLabel, s), E(() => a.yLabel, s), E(() => a.data, r), E(() => a.dataIdxLabels, r), (c, b) => (d(), f("div", Et, [
       m("figure", null, [
         m("div", null, [
           m("canvas", {
@@ -556,7 +556,7 @@ const Et = {
     required: { type: Boolean, default: !1 }
   },
   setup(e) {
-    return (a, t) => (u(), f("label", {
+    return (a, t) => (d(), f("label", {
       class: X(["bs-label", e.hide ? "visually-hidden" : ""]),
       "data-component": "bs-label",
       "data-disabled": e.disabled,
@@ -565,7 +565,7 @@ const Et = {
       m("span", null, [
         I(a.$slots, "default")
       ]),
-      e.required ? (u(), f(R, { key: 0 }, [
+      e.required ? (d(), f(R, { key: 0 }, [
         Rt,
         Nt
       ], 64)) : $("", !0)
@@ -626,29 +626,29 @@ const Et = {
   },
   emits: ["update:modelValue"],
   setup(e, { emit: a }) {
-    const t = e, l = N(), [n] = H(), { toChild: o, toRoot: s } = Z(t, l), i = k(null), d = p(() => t.inputId || n.value), r = p(() => t.checked || t.modelValue);
+    const t = e, l = N(), [n] = H(), { toChild: o, toRoot: u } = Z(t, l, ["name", "value"]), i = k(null), s = p(() => t.inputId || n.value), r = p(() => t.checked || t.modelValue);
     function c() {
       i.value && (i.value.indeterminate = t.checkedPartially && !r.value);
     }
-    return E(r, c), E(() => t.checkedPartially, c), (b, g) => (u(), f("div", V({
+    return E(r, c), E(() => t.checkedPartially, c), (b, g) => (d(), f("div", V({
       class: "bs-boolean",
       "data-component": "bs-checkbox",
       "data-size": e.size
-    }, v(s)), [
+    }, v(u)), [
       m("input", V({
         ref_key: "inputEl",
         ref: i,
         checked: r.value,
         disabled: e.disabled,
-        id: d.value,
+        id: s.value,
         required: e.required,
         type: "checkbox",
         "data-error": e.error,
         onChange: g[0] || (g[0] = (y) => b.$emit("update:modelValue", y.target.checked))
       }, v(o)), null, 16, Wt),
-      e.label || b.$slots.label ? (u(), A(_, {
+      e.label || b.$slots.label ? (d(), A(_, {
         key: 0,
-        for: d.value,
+        for: s.value,
         disabled: e.disabled,
         required: e.required
       }, {
@@ -704,27 +704,27 @@ const Et = {
     }
   },
   setup(e) {
-    const a = e, t = N(), { rootTag: l, attrsToBind: n } = he(a, t), { icon: o } = le(a, "icon"), { onLinkClick: s } = ie(a), i = p(() => a.textBtn ? {} : a.href ? { title: a.label } : { "aria-label": a.label }), d = p(() => {
+    const a = e, t = N(), { rootTag: l, attrsToBind: n } = he(a, t), { icon: o } = le(a, "icon"), { onLinkClick: u } = ie(a), i = p(() => a.textBtn ? {} : a.href ? { title: a.label } : { "aria-label": a.label }), s = p(() => {
       if (a.hoverEffect)
         return a.iconPosition;
     }), r = p(() => a.textBtn && a.iconPosition !== "left"), c = p(() => a.textBtn && a.iconPosition === "left");
-    return (b, g) => (u(), A(U(v(l)), V({
+    return (b, g) => (d(), A(U(v(l)), V({
       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
-    }, { ...v(n), ...i.value }, { onClick: v(s) }), {
+    }, { ...v(n), ...i.value }, { onClick: v(u) }), {
       default: C(() => [
-        r.value ? (u(), f("span", jt, T(e.label), 1)) : $("", !0),
+        r.value ? (d(), f("span", jt, T(e.label), 1)) : $("", !0),
         m("span", Gt, [
           I(b.$slots, "icon", {}, () => [
-            (u(), A(U(v(o)), { size: e.size }, null, 8, ["size"]))
+            (d(), A(U(v(o)), { size: e.size }, null, 8, ["size"]))
           ])
         ]),
-        c.value ? (u(), f("span", Ft, T(e.label), 1)) : $("", !0)
+        c.value ? (d(), f("span", Ft, T(e.label), 1)) : $("", !0)
       ]),
       _: 3
     }, 16, ["data-disabled", "data-direction", "data-ghost", "data-size", "data-text", "href", "onClick"]));
@@ -773,15 +773,15 @@ const Et = {
   ],
   setup(e, { emit: a }) {
     const t = e, l = a, n = [];
-    function o(d, r) {
+    function o(s, r) {
       const { duration: c, enterClass: b, enterAttribute: g } = t;
       n.push(setTimeout(() => {
-        b && d.classList.add(b), g && d.setAttribute(g, ""), n.push(setTimeout(() => {
+        b && s.classList.add(b), g && s.setAttribute(g, ""), n.push(setTimeout(() => {
           r();
-        }, c)), l("enter", d);
+        }, c)), l("enter", s);
       }));
     }
-    function s(d, r) {
+    function u(s, r) {
       const {
         duration: c,
         enterClass: b,
@@ -789,19 +789,19 @@ const Et = {
         leaveClass: y,
         leaveAttribute: L
       } = t;
-      d.classList.remove(b), d.removeAttribute(g), y && d.classList.add(y), L && d.setAttribute(L, ""), n.push(setTimeout(() => {
+      s.classList.remove(b), s.removeAttribute(g), y && s.classList.add(y), L && s.setAttribute(L, ""), n.push(setTimeout(() => {
         r();
-      }, c)), l("leave", d);
+      }, c)), l("leave", s);
     }
-    function i(d) {
+    function i(s) {
       const { leaveClass: r, leaveAttribute: c } = t;
-      d.classList.remove(r), d.removeAttribute(c), l("after-leave", d);
+      s.classList.remove(r), s.removeAttribute(c), l("after-leave", s);
     }
     return ne(() => {
-      n.forEach((d) => {
-        clearTimeout(d);
+      n.forEach((s) => {
+        clearTimeout(s);
       });
-    }), (d, r) => e.preloaded ? We((u(), A(me, {
+    }), (s, r) => e.preloaded ? We((d(), A(me, {
       key: 0,
       css: !1,
       onBeforeEnter: r[0] || (r[0] = (c) => l("before-enter", c)),
@@ -809,17 +809,17 @@ const Et = {
       onAfterEnter: r[1] || (r[1] = (c) => l("after-enter", c)),
       onEnterCancelled: r[2] || (r[2] = (c) => l("enter-cancelled", c)),
       onBeforeLeave: r[3] || (r[3] = (c) => l("before-leave", c)),
-      onLeave: s,
+      onLeave: u,
       onAfterLeave: i,
       onLeaveCancelled: r[4] || (r[4] = (c) => l("leave-cancelled", c))
     }, {
       default: C(() => [
-        I(d.$slots, "default")
+        I(s.$slots, "default")
       ]),
       _: 3
     }, 512)), [
       [je, e.shown]
-    ]) : (u(), A(me, {
+    ]) : (d(), A(me, {
       key: 1,
       css: !1,
       onBeforeEnter: r[5] || (r[5] = (c) => l("before-enter", c)),
@@ -827,12 +827,12 @@ const Et = {
       onAfterEnter: r[6] || (r[6] = (c) => l("after-enter", c)),
       onEnterCancelled: r[7] || (r[7] = (c) => l("enter-cancelled", c)),
       onBeforeLeave: r[8] || (r[8] = (c) => l("before-leave", c)),
-      onLeave: s,
+      onLeave: u,
       onAfterLeave: i,
       onLeaveCancelled: r[9] || (r[9] = (c) => l("leave-cancelled", c))
     }, {
       default: C(() => [
-        e.shown ? I(d.$slots, "default", { key: 0 }) : $("", !0)
+        e.shown ? I(s.$slots, "default", { key: 0 }) : $("", !0)
       ]),
       _: 3
     }));
@@ -856,7 +856,7 @@ const Et = {
     position: {
       type: String,
       default: void 0,
-      validator: (e) => ["top", "bottom", "right"].includes(e)
+      validator: (e) => ["top", "center", "right"].includes(e)
     },
     anchorId: {
       required: !0
@@ -892,7 +892,7 @@ const Et = {
     }), re(["Escape"], () => {
       o && l("close");
     });
-    function s() {
+    function u() {
       const y = (t.containerRef || document.getElementById(t.containerId)).getBoundingClientRect(), L = document.getElementById(t.anchorId).getBoundingClientRect(), M = n.value.getBoundingClientRect();
       if (t.position === "top") {
         const w = y.bottom - L.bottom;
@@ -918,8 +918,8 @@ const Et = {
       } else
         n.value.style.setProperty("--dropdown-wscreen-width", "");
     }
-    function d() {
-      s(), i(), l("enter");
+    function s() {
+      u(), i(), l("enter");
     }
     function r() {
       o = !0, l("after-enter");
@@ -930,13 +930,13 @@ const Et = {
     function b() {
       return t.width === "toggle" ? void 0 : t.width;
     }
-    return (g, y) => (u(), A(v(de), {
+    return (g, y) => (d(), A(v(de), {
       shown: e.shown,
       preloaded: e.preloaded,
       duration: 75,
       "enter-attribute": "data-shown",
       onAfterEnter: y[1] || (y[1] = (L) => r()),
-      onEnter: y[2] || (y[2] = (L) => d()),
+      onEnter: y[2] || (y[2] = (L) => s()),
       onAfterLeave: y[3] || (y[3] = (L) => c())
     }, {
       default: C(() => [
@@ -946,10 +946,10 @@ const Et = {
           class: "bs-dropdown",
           "data-width": b()
         }, g.$attrs), [
-          e.helperText ? (u(), f("header", Ht, [
+          e.helperText ? (d(), f("header", Ht, [
             m("div", null, [
               m("h3", null, T(e.helperText), 1),
-              e.helperDescription ? (u(), f("p", Kt, T(e.helperDescription), 1)) : $("", !0)
+              e.helperDescription ? (d(), f("p", Kt, T(e.helperDescription), 1)) : $("", !0)
             ]),
             m("button", {
               type: "button",
@@ -1048,30 +1048,30 @@ const Et = {
     "after-leave"
   ],
   setup(e, { emit: a }) {
-    const t = e, l = a, n = k(null), { transition: o } = se(t), s = p(() => t.toggleId ? t.toggleId : t.anchorId), i = p(() => t.top ? "top" : t.center ? "center" : t.right ? "right" : t.position);
-    return (d, r) => (u(), f(R, null, [
-      v(o) ? (u(), f("div", Yt)) : $("", !0),
-      e.containerId ? (u(), A(v(Se), V({
+    const t = e, l = a, n = k(null), { transition: o } = se(t), u = p(() => t.toggleId ? t.toggleId : t.anchorId), i = p(() => t.top ? "top" : t.center ? "center" : t.right ? "right" : t.position);
+    return (s, r) => (d(), f(R, null, [
+      v(o) ? (d(), f("div", Yt)) : $("", !0),
+      e.containerId ? (d(), A(v(Se), V({
         key: 1,
         shown: v(o),
         preloaded: e.preloaded,
-        "anchor-id": s.value,
+        "anchor-id": u.value,
         "container-id": e.containerId,
         "helper-description": e.helperDescription,
         "helper-text": e.helperText,
         position: i.value,
         width: e.width
-      }, d.$attrs, {
+      }, s.$attrs, {
         onClose: r[0] || (r[0] = (c) => l("close")),
         onAfterEnter: r[1] || (r[1] = (c) => l("after-enter")),
         onEnter: r[2] || (r[2] = (c) => l("enter")),
         onAfterLeave: r[3] || (r[3] = (c) => l("after-leave"))
       }), {
         default: C(() => [
-          I(d.$slots, "default")
+          I(s.$slots, "default")
         ]),
         _: 3
-      }, 16, ["shown", "preloaded", "anchor-id", "container-id", "helper-description", "helper-text", "position", "width"])) : (u(), f("div", {
+      }, 16, ["shown", "preloaded", "anchor-id", "container-id", "helper-description", "helper-text", "position", "width"])) : (d(), f("div", {
         key: 2,
         ref_key: "containerRef",
         ref: n,
@@ -1080,20 +1080,20 @@ const Et = {
         D(v(Se), V({
           shown: v(o),
           preloaded: e.preloaded,
-          "anchor-id": s.value,
+          "anchor-id": u.value,
           "container-ref": n.value,
           "helper-description": e.helperDescription,
           "helper-text": e.helperText,
           position: i.value,
           width: e.width
-        }, d.$attrs, {
+        }, s.$attrs, {
           onClose: r[4] || (r[4] = (c) => l("close")),
           onAfterEnter: r[5] || (r[5] = (c) => l("after-enter")),
           onEnter: r[6] || (r[6] = (c) => l("enter")),
           onAfterLeave: r[7] || (r[7] = (c) => l("after-leave"))
         }), {
           default: C(() => [
-            I(d.$slots, "default")
+            I(s.$slots, "default")
           ]),
           _: 3
         }, 16, ["shown", "preloaded", "anchor-id", "container-ref", "helper-description", "helper-text", "position", "width"])
@@ -1115,14 +1115,14 @@ const Et = {
   setup(e) {
     const a = e, t = k(null), l = te("optionsId"), n = te("handleSelect"), o = p(() => `${l}-option-${a.value}`);
     re([" ", "Enter", "NumpadEnter"], (i) => {
-      var d;
-      s(), (d = t.value.querySelector("a")) == null || d.click(), i.preventDefault();
+      var s;
+      u(), (s = t.value.querySelector("a")) == null || s.click(), i.preventDefault();
     }, t);
-    function s() {
+    function u() {
       var i;
       n(o.value, a.value), (i = t.value.querySelector("a")) == null || i.click();
     }
-    return (i, d) => (u(), f("li", {
+    return (i, s) => (d(), f("li", {
       "data-component": "bs-dropdown-option",
       "data-value": a.value,
       ref_key: "optionRef",
@@ -1131,7 +1131,7 @@ const Et = {
       "data-variant": e.variant || void 0,
       id: o.value,
       tabIndex: -1,
-      onClick: s
+      onClick: u
     }, [
       I(i.$slots, "default")
     ], 8, Zt));
@@ -1175,10 +1175,10 @@ const Et = {
   emits: ["optselected", "update:modelValue", "close"],
   setup(e, { emit: a }) {
     const t = e, l = a, n = k(null), o = k(null);
-    let s = null, i = -1, d = -1;
+    let u = null, i = -1, s = -1;
     ae("optionsId", t.optionsId), ae("handleSelect", P);
     function r() {
-      return s || (s = Array.from(n.value.querySelectorAll('[data-component="bs-dropdown-option"]'))), s;
+      return u || (u = Array.from(n.value.querySelectorAll('[data-component="bs-dropdown-option"]'))), u;
     }
     O(() => {
       g(), document.addEventListener("keydown", L);
@@ -1192,17 +1192,17 @@ const Et = {
     const c = p(() => t.visible || t.shown), b = p(() => t.modelValue || t.selectedValue);
     function g() {
       var w, S, q, j, ee;
-      c.value ? (d = r().findIndex(
+      c.value ? (s = r().findIndex(
         (J) => J.getAttribute("data-value") === String(b.value)
-      ), d > -1 && ((w = r()[d]) == null || w.setAttribute("data-selected", ""), (S = r()[d]) == null || S.setAttribute("aria-selected", "true"), i = d, t.focusDelay > 0 ? setTimeout(() => {
+      ), 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 = r()[d]) == null || J.focus();
-      }, t.focusDelay) : (q = r()[d]) == null || q.focus())) : ((j = r()[d]) == null || j.removeAttribute("data-selected"), (ee = r()[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"));
     }
     vt(
       n,
       () => {
-        s = null;
+        u = null;
       },
       { childList: !0 }
     );
@@ -1251,7 +1251,7 @@ const Et = {
     function P(w, S) {
       o.value = w, y(), l("optselected", S), l("update:modelValue", S), l("close");
     }
-    return (w, S) => (u(), f("ul", {
+    return (w, S) => (d(), f("ul", {
       ref_key: "optionsRef",
       ref: n,
       "aria-activedescendant": o.value || void 0,
@@ -1370,10 +1370,10 @@ const Et = {
     function o(i) {
       l.value = !1, t("optselected", i), t("update:modelValue", i), t("close");
     }
-    function s() {
+    function u() {
       l.value && (l.value = !1, t("close"));
     }
-    return (i, d) => (u(), A(v(Xt), {
+    return (i, s) => (d(), A(v(Xt), {
       shown: e.shown,
       preloaded: e.preloaded,
       "anchor-id": e.anchorId,
@@ -1389,10 +1389,10 @@ const Et = {
       "toggle-id": e.toggleId,
       top: e.top,
       width: e.width,
-      onClose: s,
-      onAfterEnter: d[0] || (d[0] = (r) => t("after-enter")),
+      onClose: u,
+      onAfterEnter: s[0] || (s[0] = (r) => t("after-enter")),
       onEnter: n,
-      onAfterLeave: d[1] || (d[1] = (r) => t("after-leave"))
+      onAfterLeave: s[1] || (s[1] = (r) => t("after-leave"))
     }, {
       default: C(() => [
         D(v(_t), {
@@ -1402,7 +1402,7 @@ const Et = {
           "selected-value": e.selectedValue,
           shown: l.value,
           "onUpdate:modelValue": o,
-          onClose: s
+          onClose: u
         }, {
           default: C(() => [
             I(i.$slots, "default")
@@ -1437,14 +1437,14 @@ const Et = {
   },
   setup(e) {
     const a = e, t = p(() => a.error && a.errorMsg || a.hint);
-    return (l, n) => (u(), f("div", ta, [
-      t.value ? (u(), f("span", {
+    return (l, n) => (d(), f("div", ta, [
+      t.value ? (d(), f("span", {
         key: 0,
         id: e.hintId,
         class: "bs-hint",
         "data-error": e.error
       }, T(t.value), 9, aa)) : $("", !0),
-      e.charMax ? (u(), f("span", {
+      e.charMax ? (d(), f("span", {
         key: 1,
         "aria-description": "character count over character limit for the preceding text field",
         class: "bs-character-count",
@@ -1462,7 +1462,7 @@ const Et = {
     ], [n] = H();
     return O(() => {
       t.value = a.value.querySelector("svg").getAttribute("viewBox") || "0 0 0 0";
-    }), (o, s) => (u(), f(R, null, [
+    }), (o, u) => (d(), f(R, null, [
       m("span", {
         ref_key: "svgWrapperRef",
         ref: a,
@@ -1471,7 +1471,7 @@ const Et = {
       }, [
         I(o.$slots, "default")
       ], 4),
-      (u(), f("svg", {
+      (d(), f("svg", {
         xmlns: "http://www.w3.org/2000/svg",
         "view-box": t.value,
         width: "0",
@@ -1485,7 +1485,7 @@ const Et = {
           y2: "100%",
           "gradient-units": "userSpaceOnUse"
         }, [
-          (u(), f(R, null, Y(l, (i) => m("stop", {
+          (d(), f(R, null, Y(l, (i) => m("stop", {
             key: i.offset,
             offset: i.offset,
             "stop-color": i.color
@@ -1510,17 +1510,17 @@ const Et = {
   emits: ["update:modelValue"],
   setup(e, { emit: a }) {
     const t = e, l = a, n = N(), o = p(() => ({ [t.error ? "aria-errormessage" : "aria-describedby"]: t.hintId }));
-    function s(i) {
-      const d = n.type === "number" ? parseInt(i.target.value) : i.target.value;
-      l("update:modelValue", d);
+    function u(i) {
+      const s = n.type === "number" ? parseInt(i.target.value) : i.target.value;
+      l("update:modelValue", s);
     }
-    return (i, d) => (u(), f("input", V({
+    return (i, s) => (d(), f("input", V({
       class: "bs-input",
       "data-component": "bs-input",
       "data-error": e.error,
       id: i.$attrs.id || e.inputId,
       value: e.value || e.modelValue,
-      onInput: s
+      onInput: u
     }, o.value), null, 16, ra));
   }
 }, sa = ["data-disabled", "data-error", "data-variant", "data-multifocus"], da = {
@@ -1532,7 +1532,7 @@ const Et = {
     variant: { type: String, validator: (e) => e === "inner-bordered" }
   },
   setup(e) {
-    return (a, t) => (u(), f("div", {
+    return (a, t) => (d(), f("div", {
       class: "bs-input-addon",
       "data-component": "bs-input-addon",
       "data-disabled": e.disabled,
@@ -1590,13 +1590,20 @@ const Et = {
   },
   emits: ["update:modelValue"],
   setup(e, { emit: a }) {
-    const t = e, l = N(), [n, o] = H(2), { toChild: s, toRoot: i } = Z(t, l), d = p(() => {
+    const t = e, l = N(), [n, o] = H(2), { toChild: u, toRoot: i } = Z(t, l, [
+      "autocomplete",
+      "max",
+      "maxlength",
+      "min",
+      "minlength",
+      "name"
+    ]), s = p(() => {
       var b, g;
       return ((g = (b = t.hints) == null ? void 0 : b.join) == null ? void 0 : g.call(b, `
 `)) || t.hints;
-    }), r = p(() => t.error && t.errorMsg || t.hint || d.value || void 0), c = p(() => t.inputId || n.value);
-    return (b, g) => (u(), f("div", V({ "data-component": "bs-input-field" }, v(i)), [
-      e.label || b.$slots.label ? (u(), A(_, {
+    }), r = p(() => t.error && t.errorMsg || t.hint || s.value || void 0), c = p(() => t.inputId || n.value);
+    return (b, g) => (d(), f("div", V({ "data-component": "bs-input-field" }, v(i)), [
+      e.label || b.$slots.label ? (d(), A(_, {
         key: 0,
         for: c.value,
         disabled: e.disabled,
@@ -1619,12 +1626,12 @@ const Et = {
         type: e.type,
         value: e.value || e.modelValue,
         "onUpdate:modelValue": g[0] || (g[0] = (y) => b.$emit("update:modelValue", y))
-      }, v(s)), null, 16, ["disabled", "error", "hint-id", "id", "placeholder", "required", "type", "value"]),
-      r.value ? (u(), A(pe, {
+      }, v(u)), null, 16, ["disabled", "error", "hint-id", "id", "placeholder", "required", "type", "value"]),
+      r.value ? (d(), A(pe, {
         key: 1,
         error: e.error,
         "error-msg": e.errorMsg,
-        hint: e.hint || d.value,
+        hint: e.hint || s.value,
         "hint-id": v(o)
       }, null, 8, ["error", "error-msg", "hint", "hint-id"])) : $("", !0)
     ], 16));
@@ -1662,8 +1669,13 @@ const Et = {
   },
   emits: ["clear", "update:modelValue"],
   setup(e, { emit: a }) {
-    const t = e, l = N(), { toChild: n, toRoot: o } = Z(t, l);
-    return (s, i) => (u(), A(da, V({
+    const t = e, l = N(), { toChild: n, toRoot: o } = Z(t, l, [
+      "autocomplete",
+      "maxlength",
+      "minlength",
+      "name"
+    ]);
+    return (u, i) => (d(), A(da, V({
       class: "bs-input-search",
       "data-component": "bs-input-search",
       disabled: e.disabled
@@ -1676,13 +1688,13 @@ const Et = {
           "input-id": e.inputId,
           placeholder: e.placeholder,
           value: e.value || e.modelValue,
-          "onUpdate:modelValue": i[0] || (i[0] = (d) => s.$emit("update:modelValue", d))
+          "onUpdate:modelValue": i[0] || (i[0] = (s) => u.$emit("update:modelValue", s))
         }, v(n)), null, 16, ["disabled", "input-id", "placeholder", "value"]),
-        e.disabled || e.hideClear ? $("", !0) : (u(), f("button", {
+        e.disabled || e.hideClear ? $("", !0) : (d(), f("button", {
           key: 0,
           title: "Clear",
           type: "button",
-          onClick: i[1] || (i[1] = (d) => s.$emit("clear"))
+          onClick: i[1] || (i[1] = (s) => u.$emit("clear"))
         }, [
           D(v(oe), { size: "sm" })
         ]))
@@ -1710,7 +1722,7 @@ const Et = {
     }
   },
   setup(e) {
-    return (a, t) => (u(), f("span", {
+    return (a, t) => (d(), f("span", {
       class: "bs-loader",
       "data-size": e.size,
       "data-variant": e.variant,
@@ -1747,13 +1759,13 @@ const Et = {
   emits: ["after-enter", "after-leave"],
   setup(e, { emit: a }) {
     const t = e, l = a, { transition: n } = se(t);
-    return (o, s) => (u(), A(v(de), {
+    return (o, u) => (d(), A(v(de), {
       shown: v(n),
       preloaded: e.preloaded,
       duration: 75,
       "enter-attribute": "data-shown",
-      onAfterEnter: s[0] || (s[0] = (i) => l("after-enter")),
-      onAfterLeave: s[1] || (s[1] = (i) => l("after-leave"))
+      onAfterEnter: u[0] || (u[0] = (i) => l("after-enter")),
+      onAfterLeave: u[1] || (u[1] = (i) => l("after-leave"))
     }, {
       default: C(() => [
         ba
@@ -1813,7 +1825,7 @@ const Et = {
     let o = !1;
     return re(["Escape"], () => {
       o && l("close", t.modalId);
-    }), (s, i) => (u(), f(R, null, [
+    }), (u, i) => (d(), f(R, null, [
       D(ma, {
         shown: v(n),
         preloaded: e.preloaded,
@@ -1826,9 +1838,9 @@ const Et = {
         preloaded: e.preloaded,
         duration: 75,
         "enter-attribute": "data-shown",
-        onEnter: i[1] || (i[1] = (d) => Ue(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) => Ue(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: C(() => [
           m("div", {
@@ -1837,17 +1849,17 @@ const Et = {
             role: e.alert ? "alertdialog" : "dialog",
             "aria-modal": "true"
           }, [
-            e.closeButton ? (u(), f("div", Ba, [
+            e.closeButton ? (d(), f("div", Ba, [
               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))
               }, [
                 D(v(oe), { class: "close-button" })
               ])
             ])) : $("", !0),
-            I(s.$slots, "default")
+            I(u.$slots, "default")
           ], 8, ya)
         ]),
         _: 3
@@ -1961,13 +1973,13 @@ const Et = {
     }), E(n, (P, w) => {
       w !== null && (l("selchange", P), l("update:modelValue", P));
     });
-    const s = p(() => {
+    const u = p(() => {
       if (t.variant === "group")
         return Math.ceil(t.itemsCount / t.itemsPerGroup);
       if (t.variant === "base")
         return t.pageCount;
     }), i = p(() => t.variant === "base" ? t.centerDisplay === "text" ? "group" : void 0 : t.variant);
-    function d() {
+    function s() {
       n.value = 1;
     }
     function r() {
@@ -1976,11 +1988,11 @@ const Et = {
     function c() {
       n.value = Math.min(
         n.value + 1,
-        s.value
+        u.value
       );
     }
     function b() {
-      n.value = s.value;
+      n.value = u.value;
     }
     const g = p(() => {
       if (t.pageCount <= t.pageRange)
@@ -1991,26 +2003,26 @@ const Et = {
       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 ${s.value}`), L = p(() => {
+    }), y = p(() => `${t.centerLabel ?? "Page"} ${n.value} of ${u.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(), f("div", {
+    return (P, w) => (d(), f("div", {
       class: "bs-pagination",
       "data-variant": i.value,
       "data-fixed": t.fixed
     }, [
-      e.variant === "base" || e.variant === "group" ? (u(), f("div", Sa, [
-        e.showFirstLastButtons ? (u(), f("button", {
+      e.variant === "base" || e.variant === "group" ? (d(), f("div", Sa, [
+        e.showFirstLastButtons ? (d(), f("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
         }, [
           D(v(Je)),
-          e.firstPageText ? (u(), f("span", ka, T(e.firstPageText), 1)) : $("", !0)
+          e.firstPageText ? (d(), f("span", ka, T(e.firstPageText), 1)) : $("", !0)
         ], 10, wa)) : $("", !0),
         m("button", {
           type: "button",
@@ -2020,11 +2032,11 @@ const Et = {
           onClick: r
         }, [
           D(v(Qe)),
-          e.prevPageText ? (u(), f("span", Ta, T(e.prevPageText), 1)) : $("", !0)
+          e.prevPageText ? (d(), f("span", Ta, T(e.prevPageText), 1)) : $("", !0)
         ], 10, Ia)
       ])) : $("", !0),
-      e.variant === "base" && e.centerDisplay === "numbers" ? (u(), f("div", xa, [
-        (u(!0), f(R, null, Y(g.value, (S) => (u(), f("button", {
+      e.variant === "base" && e.centerDisplay === "numbers" ? (d(), f("div", xa, [
+        (d(!0), f(R, null, Y(g.value, (S) => (d(), f("button", {
           key: `page-${S}-button`,
           type: "button",
           title: `Page ${S}`,
@@ -2032,12 +2044,12 @@ const Et = {
           onClick: (q) => n.value = S
         }, T(S), 9, Ca))), 128))
       ])) : $("", !0),
-      t.variant === "base" && t.centerDisplay === "text" ? (u(), f("span", Aa, T(y.value), 1)) : $("", !0),
-      t.variant === "group" ? (u(), f("span", La, T(L.value), 1)) : $("", !0),
-      t.variant === "results" ? (u(), f(R, { key: 4 }, [
+      t.variant === "base" && t.centerDisplay === "text" ? (d(), f("span", Aa, T(y.value), 1)) : $("", !0),
+      t.variant === "group" ? (d(), f("span", La, T(L.value), 1)) : $("", !0),
+      t.variant === "results" ? (d(), f(R, { key: 4 }, [
         Pa,
         m("div", Da, [
-          (u(!0), f(R, null, Y(M.value, (S) => (u(), f("button", {
+          (d(!0), f(R, null, Y(M.value, (S) => (d(), f("button", {
             type: "button",
             key: `results-${S}`,
             "data-selected": S === n.value,
@@ -2046,26 +2058,26 @@ const Et = {
           }, T(S), 9, Va))), 128))
         ])
       ], 64)) : $("", !0),
-      e.variant === "base" || e.variant === "group" ? (u(), f("div", Ea, [
+      e.variant === "base" || e.variant === "group" ? (d(), f("div", Ea, [
         m("button", {
           type: "button",
           class: X(e.nextPageText ? "bs-pagination-word-caret" : void 0),
           title: e.nextPageText,
-          disabled: n.value === s.value,
+          disabled: n.value === u.value,
           onClick: c
         }, [
-          e.nextPageText ? (u(), f("span", za, T(e.nextPageText), 1)) : $("", !0),
+          e.nextPageText ? (d(), f("span", za, T(e.nextPageText), 1)) : $("", !0),
           D(v(_e))
         ], 10, qa),
-        e.showFirstLastButtons ? (u(), f("button", {
+        e.showFirstLastButtons ? (d(), f("button", {
           key: 0,
           type: "button",
           class: X(e.lastPageText ? "bs-pagination-word-caret" : void 0),
           title: e.lastPageText,
-          disabled: n.value === s.value,
+          disabled: n.value === u.value,
           onClick: b
         }, [
-          e.lastPageText ? (u(), f("span", Ra, T(e.lastPageText), 1)) : $("", !0),
+          e.lastPageText ? (d(), f("span", Ra, T(e.lastPageText), 1)) : $("", !0),
           D(v(et))
         ], 10, Ma)) : $("", !0)
       ])) : $("", !0)
@@ -2080,7 +2092,8 @@ const Et = {
     router: {},
     status: {
       type: String,
-      validator: (e) => ["active", "complete", "inactive", "error", "warning", "positive"].includes(e)
+      /** option 'inactive' is DEPRECATED */
+      validator: (e) => ["active", "complete", "disabled", "inactive", "error", "warning", "positive"].includes(e)
     },
     truncate: {
       type: Boolean,
@@ -2088,12 +2101,12 @@ const Et = {
     },
     variant: {
       type: String,
-      validator: (e) => ["filter", "filter-add", "filter-remove", "live"].includes(e)
+      validator: (e) => ["filter", "filter-add", "filter-remove", "inactive", "live"].includes(e)
     }
   },
   setup(e) {
     const a = e, { onLinkClick: t } = ie(a), l = N(), { rootTag: n, attrsToBind: o } = he(a, l, "span");
-    return (s, i) => (u(), A(U(v(n)), V({
+    return (u, i) => (d(), A(U(v(n)), V({
       class: "bs-pill",
       "data-active": e.active,
       "data-component": "bs-pill",
@@ -2104,7 +2117,7 @@ const Et = {
     }, v(o), { onClick: v(t) }), {
       default: C(() => [
         m("span", { "data-truncate": e.truncate }, [
-          I(s.$slots, "default")
+          I(u.$slots, "default")
         ], 8, Na)
       ]),
       _: 3
@@ -2138,17 +2151,17 @@ 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 s(i) {
+    function u(i) {
       i.target.tagName === "BUTTON" && (i.preventDefault(), i.stopImmediatePropagation(), l("action-toggled"));
     }
-    return (i, d) => (u(), f("div", Oa, [
-      e.action || i.$slots.action ? (u(), f("button", {
+    return (i, s) => (d(), f("div", Oa, [
+      e.action || i.$slots.action ? (d(), f("button", {
         key: 0,
         "data-icon": "true",
-        onClick: s
+        onClick: u
       }, [
         I(i.$slots, "action", {}, () => [
-          e.actionIcon ? (u(), A(U(v(n) ? v(n) : "span"), {
+          e.actionIcon ? (d(), A(U(v(n) ? v(n) : "span"), {
             key: 0,
             class: "bs-icon"
           })) : $("", !0),
@@ -2156,12 +2169,12 @@ const Et = {
         ])
       ])) : $("", !0),
       m("span", Wa, T(e.profileName), 1),
-      e.company ? (u(), f("span", ja, T(e.company), 1)) : $("", !0),
-      e.jobTitle ? (u(), f("span", Ga, T(e.jobTitle), 1)) : $("", !0),
-      e.email ? (u(), f("span", Fa, T(e.email), 1)) : $("", !0),
-      e.miscMeta || i.$slots.misc ? (u(), f("span", Ua, [
+      e.company ? (d(), f("span", ja, T(e.company), 1)) : $("", !0),
+      e.jobTitle ? (d(), f("span", Ga, T(e.jobTitle), 1)) : $("", !0),
+      e.email ? (d(), f("span", Fa, T(e.email), 1)) : $("", !0),
+      e.miscMeta || i.$slots.misc ? (d(), f("span", Ua, [
         I(i.$slots, "misc", {}, () => [
-          e.miscMetaIcon ? (u(), A(U(v(o) ? v(o) : "span"), {
+          e.miscMetaIcon ? (d(), A(U(v(o) ? v(o) : "span"), {
             key: 0,
             class: "bs-icon"
           })) : $("", !0),
@@ -2186,17 +2199,17 @@ const Et = {
   },
   setup(e) {
     const a = e, t = k(!1), l = k(!!a.src);
-    return O(() => t.value = !0), (n, o) => (u(), f("div", {
+    return O(() => t.value = !0), (n, o) => (d(), f("div", {
       class: "bs-profile-img",
       "data-img-size": e.size,
       "data-initials": e.initials,
       "data-no-img": !l.value
     }, [
-      l.value && t.value ? (u(), f("img", {
+      l.value && t.value ? (d(), f("img", {
         key: 0,
         src: e.src,
         alt: e.profileName,
-        onError: o[0] || (o[0] = (s) => l.value = !1)
+        onError: o[0] || (o[0] = (u) => l.value = !1)
       }, null, 40, Ya)) : $("", !0)
     ], 8, Ka));
   }
@@ -2229,7 +2242,7 @@ const Et = {
   emits: ["action-toggled"],
   setup(e, { emit: a }) {
     const t = e, l = a, { onLinkClick: n } = ie(t), o = p(() => t.href ? "a" : "div");
-    return (s, i) => (u(), A(U(o.value), {
+    return (u, i) => (d(), A(U(o.value), {
       class: "bs-profile",
       href: e.href,
       "data-layout": e.layout,
@@ -2251,13 +2264,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: C(() => [
-            I(s.$slots, "action")
+            I(u.$slots, "action")
           ]),
           misc: C(() => [
-            I(s.$slots, "misc")
+            I(u.$slots, "misc")
           ]),
           _: 3
         }, 8, ["profile-name", "company", "job-title", "email", "action", "action-icon", "misc-meta", "misc-meta-icon"])
@@ -2309,14 +2322,14 @@ const Et = {
   },
   emits: ["update:modelValue"],
   setup(e, { emit: a }) {
-    const t = e, l = N(), [n] = H(), { toChild: o, toRoot: s } = Z(t, l), i = p(() => t.inputId || n.value), d = p(() => t.checked || t.modelValue && t.modelValue === t.value);
-    return (r, c) => (u(), f("div", V({
+    const t = e, l = N(), [n] = H(), { toChild: o, toRoot: u } = Z(t, l, ["name"]), i = p(() => t.inputId || n.value), s = p(() => t.checked || t.modelValue && t.modelValue === t.value);
+    return (r, c) => (d(), f("div", V({
       class: "bs-boolean",
       "data-component": "bs-radio",
       "data-size": e.size
-    }, v(s)), [
+    }, v(u)), [
       m("input", V({
-        checked: d.value,
+        checked: s.value,
         disabled: e.disabled,
         id: i.value,
         required: e.required,
@@ -2326,7 +2339,7 @@ const Et = {
       }, v(o), {
         onChange: c[0] || (c[0] = (b) => r.$emit("update:modelValue", b.target.value))
       }), null, 16, Ja),
-      e.label || r.$slots.label ? (u(), A(_, {
+      e.label || r.$slots.label ? (d(), A(_, {
         key: 0,
         for: i.value,
         disabled: e.disabled,
@@ -2355,7 +2368,7 @@ const Et = {
   emits: ["update:modelValue"],
   setup(e, { emit: a }) {
     const t = e, l = p(() => ({ [t.error ? "aria-errormessage" : "aria-describedby"]: t.hintId }));
-    return (n, o) => (u(), f("select", V({
+    return (n, o) => (d(), f("select", V({
       id: n.$attrs.id || e.inputId,
       class: "bs-select",
       "data-component": "bs-select",
@@ -2364,7 +2377,7 @@ const Et = {
       "data-error": e.error,
       value: e.value || e.modelValue
     }, l.value, {
-      onChange: o[0] || (o[0] = (s) => n.$emit("update:modelValue", s.target.value))
+      onChange: o[0] || (o[0] = (u) => n.$emit("update:modelValue", u.target.value))
     }), [
       I(n.$slots, "default")
     ], 16, Qa));
@@ -2396,6 +2409,10 @@ const Et = {
     inputId: String,
     /** Pass label text. */
     label: { type: String },
+    passAttrs: {
+      type: String,
+      default: ""
+    },
     /** Placeholder attribute for `<input>`. */
     placeholder: String,
     /** Sets the required state on the input, append required* indicator to label. */
@@ -2409,13 +2426,16 @@ const Et = {
     modelValue: [String, Number]
   },
   setup(e) {
-    const a = e, t = N(), [l, n] = H(2), { toChild: o, toRoot: s } = Z(a, t), i = p(() => {
+    const a = e, t = N(), [l, n] = H(2), { toChild: o, toRoot: u } = Z(a, t, [
+      "autofocus",
+      "name"
+    ]), i = p(() => {
       var b, g;
       return ((g = (b = a.hints) == null ? void 0 : b.join) == null ? void 0 : g.call(b, `
 `)) || a.hints;
-    }), d = p(() => a.error && a.errorMsg || a.hint || i.value || void 0), r = p(() => a.inputId || l.value), c = p(() => a.value || a.modelValue);
-    return (b, g) => (u(), f("div", V({ "data-component": "bs-select-field" }, v(s)), [
-      e.label || b.$slots.label ? (u(), A(_, {
+    }), s = p(() => a.error && a.errorMsg || a.hint || i.value || void 0), r = p(() => a.inputId || l.value), c = p(() => a.value || a.modelValue);
+    return (b, g) => (d(), f("div", V({ "data-component": "bs-select-field" }, v(u)), [
+      e.label || b.$slots.label ? (d(), A(_, {
         key: 0,
         for: r.value,
         disabled: e.disabled,
@@ -2443,7 +2463,7 @@ const Et = {
             value: "",
             disabled: !!c.value
           }, T(e.placeholder), 9, en),
-          (u(!0), f(R, null, Y(e.data, (y) => (u(), f("option", {
+          (d(!0), f(R, null, Y(e.data, (y) => (d(), f("option", {
             key: y.value,
             disabled: y.disabled,
             selected: c.value === y.value,
@@ -2452,7 +2472,7 @@ const Et = {
         ]),
         _: 1
       }, 16, ["disabled", "error", "hint-id", "input-id", "required", "value"]),
-      d.value ? (u(), A(pe, {
+      s.value ? (d(), A(pe, {
         key: 1,
         "data-disabled": e.disabled,
         error: e.error,
@@ -2508,15 +2528,15 @@ const Et = {
   },
   emits: ["update:modelValue"],
   setup(e, { emit: a }) {
-    const t = e, l = a, n = N(), [o] = H(), { toChild: s, toRoot: i } = Z(t, n), d = p(() => t.inputId || o.value), r = p(() => t.checked || t.modelValue);
-    return (c, b) => (u(), f("div", V({
+    const t = e, l = a, n = N(), [o] = H(), { toChild: u, toRoot: i } = Z(t, n, ["name", "value"]), s = p(() => t.inputId || o.value), r = p(() => t.checked || t.modelValue);
+    return (c, b) => (d(), f("div", V({
       class: "bs-boolean",
       "data-component": "bs-switch",
       "data-size": e.size
     }, v(i)), [
-      e.label || c.$slots.label ? (u(), A(_, {
+      e.label || c.$slots.label ? (d(), A(_, {
         key: 0,
-        for: d.value,
+        for: s.value,
         disabled: e.disabled,
         hide: e.hideLabel
       }, {
@@ -2536,9 +2556,9 @@ const Et = {
         m("input", V({
           checked: r.value,
           disabled: e.disabled,
-          id: d.value,
+          id: s.value,
           type: "checkbox"
-        }, v(s), {
+        }, v(u), {
           onChange: b[0] || (b[0] = (g) => l("update:modelValue", g.target.checked))
         }), null, 16, ln),
         m("span", {
@@ -2566,18 +2586,18 @@ const Et = {
   },
   emits: ["tabClick"],
   setup(e, { emit: a }) {
-    const t = e, l = N(), n = k(), o = p(() => t.activeTabId === l.id), s = p(() => t.panelId || `${l.id}-panel`);
+    const t = e, l = N(), n = k(), o = p(() => t.activeTabId === l.id), u = p(() => t.panelId || `${l.id}-panel`);
     function i(r) {
-      (r.key === "Enter" || r.key === " ") && (r.preventDefault(), r.stopPropagation(), d());
+      (r.key === "Enter" || r.key === " ") && (r.preventDefault(), r.stopPropagation(), s());
     }
-    function d() {
+    function s() {
       if (t.activeTabId !== l.id) {
         const r = new CustomEvent("tabClick", { detail: l.id, bubbles: !0 });
         n.value.dispatchEvent(r);
       }
     }
-    return (r, c) => (u(), f("div", {
-      "aria-controls": s.value,
+    return (r, c) => (d(), f("div", {
+      "aria-controls": u.value,
       "aria-selected": o.value ? "true" : "false",
       "data-hidden": e.hidden || void 0,
       "data-component": "bs-tab",
@@ -2585,7 +2605,7 @@ const Et = {
       tabindex: "0",
       ref_key: "hostEl",
       ref: n,
-      onClick: d,
+      onClick: s,
       onKeydown: i
     }, [
       I(r.$slots, "default")
@@ -2602,7 +2622,7 @@ const Et = {
   },
   emits: ["tabChange", "update:modelValue"],
   setup(e, { emit: a }) {
-    const t = e, l = a, n = k(!1), o = k(!1), s = k([]), i = k(!1), d = k(!1), r = k(), c = 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(() => s.value.some((h) => h.id === t.activeTabId)), j = p(() => `${w.value}-options`), ee = p(() => `${w.value}-toggle`), J = p(() => {
+    const t = e, l = a, n = k(!1), o = k(!1), u = k([]), i = k(!1), s = k(!1), r = k(), c = 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(() => u.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 = g.value[S.value]) == null ? void 0 : h.textContent : "More";
     }), ke = p(() => q.value ? c.value[S.value] - c.value[S.value - 1] + cn : un), Q = p(() => {
@@ -2615,7 +2635,7 @@ const Et = {
           break;
         h.push(z);
       }
-      return d.value && h.push(r.value.querySelector(".bs-tab-list-toggle")), h;
+      return s.value && h.push(r.value.querySelector(".bs-tab-list-toggle")), h;
     });
     function ue() {
       var K;
@@ -2632,7 +2652,7 @@ const Et = {
           }
           B.dataset.hidden = "false", B.setAttribute("tabindex", "0");
         }
-        d.value = h, s.value = G, n.value || He(() => n.value = !0), setTimeout(() => {
+        s.value = h, u.value = G, n.value || He(() => n.value = !0), setTimeout(() => {
           Ee(), b.value = !0;
         }, b.value ? 0 : 1e3);
       }
@@ -2691,7 +2711,7 @@ const Et = {
       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);
-      d.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`);
+      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;
@@ -2720,7 +2740,7 @@ const Et = {
       } catch (B) {
         console.log("tab error", B);
       }
-    }), ne(qe), (h, B) => (u(), f("div", {
+    }), ne(qe), (h, B) => (d(), f("div", {
       class: "bs-tab-list",
       "data-component": "bs-tab-list",
       id: h.$attrs.id || v(P),
@@ -2738,7 +2758,7 @@ const Et = {
         "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,
@@ -2762,7 +2782,7 @@ const Et = {
         "onUpdate:modelValue": Ae
       }, {
         default: C(() => [
-          (u(!0), f(R, null, Y(s.value, (x) => (u(), A(Jt, {
+          (d(!0), f(R, null, Y(u.value, (x) => (d(), A(Jt, {
             key: x.id,
             value: x.id,
             "options-id": j.value
@@ -2791,7 +2811,7 @@ const Et = {
   },
   setup(e) {
     const a = e, t = N(), l = p(() => a.activeTabId && a.activeTabId === a.tabId), n = p(() => t.id || `${a.tabId}-panel`);
-    return (o, s) => (u(), f("section", {
+    return (o, u) => (d(), f("section", {
       "aria-labelledby": e.tabId,
       "data-active": l.value,
       "data-component": "bs-tab-panel",
@@ -2817,14 +2837,14 @@ const Et = {
   emits: ["update:modelValue"],
   setup(e, { emit: a }) {
     const t = e, l = p(() => ({ [t.error ? "aria-errormessage" : "aria-describedby"]: t.hintId }));
-    return (n, o) => (u(), f("textarea", V({
+    return (n, o) => (d(), f("textarea", V({
       class: "bs-textarea",
       "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] = (s) => n.$emit("update:modelValue", s.target.value))
+      onInput: o[0] || (o[0] = (u) => n.$emit("update:modelValue", u.target.value))
     }, l.value), null, 16, hn));
   }
 }, Zn = /* @__PURE__ */ Object.assign({ inheritAttrs: !1 }, {
@@ -2876,7 +2896,13 @@ const Et = {
   },
   emits: ["update:modelValue"],
   setup(e, { emit: a }) {
-    const t = e, l = N(), [n, o] = H(2), { toChild: s, toRoot: i } = Z(t, l), d = p(() => {
+    const t = e, l = N(), [n, o] = H(2), { toChild: u, toRoot: i } = Z(t, l, [
+      "autocomplete",
+      "cols",
+      "maxlength",
+      "minlength",
+      "name"
+    ]), s = p(() => {
       var g;
       return ((g = t.value || t.modelValue) == null ? void 0 : g.length) || 0;
     }), r = p(() => {
@@ -2884,8 +2910,8 @@ const Et = {
       return ((y = (g = t.hints) == null ? void 0 : g.join) == null ? void 0 : y.call(g, `
 `)) || t.hints;
     }), c = p(() => t.error && t.errorMsg || t.hint || r.value || void 0), b = p(() => t.inputId || n.value);
-    return (g, y) => (u(), f("div", V({ "data-component": "bs-textarea-field" }, v(i)), [
-      e.label || g.$slots.label ? (u(), A(_, {
+    return (g, y) => (d(), f("div", V({ "data-component": "bs-textarea-field" }, v(i)), [
+      e.label || g.$slots.label ? (d(), A(_, {
         key: 0,
         for: b.value,
         disabled: e.disabled,
@@ -2908,10 +2934,10 @@ const Et = {
         rows: e.rows,
         value: e.value || e.modelValue,
         "onUpdate:modelValue": y[0] || (y[0] = (L) => g.$emit("update:modelValue", L))
-      }, v(s)), null, 16, ["disabled", "error", "hint-id", "id", "placeholder", "required", "rows", "value"]),
-      c.value || e.charMax ? (u(), A(pe, {
+      }, v(u)), null, 16, ["disabled", "error", "hint-id", "id", "placeholder", "required", "rows", "value"]),
+      c.value || e.charMax ? (d(), A(pe, {
         key: 1,
-        "char-count": d.value,
+        "char-count": s.value,
         "char-max": e.charMax,
         "data-disabled": e.disabled,
         error: e.error,
@@ -2970,28 +2996,28 @@ const Et = {
     const t = e, l = a, { transition: n } = se(t);
     let o = null;
     ae("variant", t.variant), ae("handleDismiss", i);
-    const s = te("stacked", t.stacked);
+    const u = 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 (r, c) => (u(), A(v(de), {
+    return (r, c) => (d(), A(v(de), {
       shown: v(n),
       preloaded: e.preloaded,
       duration: 200,
       "enter-attribute": "data-shown",
-      onAfterEnter: d,
+      onAfterEnter: s,
       onAfterLeave: c[0] || (c[0] = (b) => l("after-leave"))
     }, {
       default: C(() => [
         m("div", {
           class: "bs-toast",
           "data-variant": e.variant,
-          "data-stacked": v(s) || void 0,
+          "data-stacked": v(u) || void 0,
           "aria-role": "alert"
         }, [
           I(r.$slots, "default")
@@ -3010,7 +3036,7 @@ const Et = {
       ((n = l.default) == null ? void 0 : n.call(l).length) > 2 && (a.value = !0);
     });
     const t = te("handleDismiss");
-    return (l, n) => (u(), f("div", {
+    return (l, n) => (d(), f("div", {
       class: "bs-toast-actions",
       "data-stacked": a.value || void 0
     }, [
@@ -3035,7 +3061,7 @@ const Et = {
   return t;
 }, yn = {}, Bn = { class: "bs-toast-body" };
 function $n(e, a) {
-  return u(), f("div", Bn, [
+  return d(), f("div", Bn, [
     I(e.$slots, "default")
   ]);
 }
@@ -3054,11 +3080,11 @@ const _n = /* @__PURE__ */ mn(yn, [["render", $n]]), Sn = ["data-variant"], el =
           return at;
       }
     });
-    return (l, n) => (u(), f("div", {
+    return (l, n) => (d(), f("div", {
       class: "bs-toast-header",
       "data-variant": v(a)
     }, [
-      (u(), A(U(t.value), { class: "bs-toast-header-icon" })),
+      (d(), A(U(t.value), { class: "bs-toast-header-icon" })),
       m("h5", null, [
         I(l.$slots, "default")
       ])
@@ -3067,7 +3093,7 @@ const _n = /* @__PURE__ */ mn(yn, [["render", $n]]), Sn = ["data-variant"], el =
 }, wn = { class: "bs-toaster" }, tl = {
   __name: "BsToaster",
   setup(e) {
-    return ae("stacked", !0), (a, t) => (u(), f("div", wn, [
+    return ae("stacked", !0), (a, t) => (d(), f("div", wn, [
       I(a.$slots, "default")
     ]));
   }
@@ -3108,20 +3134,20 @@ const _n = /* @__PURE__ */ mn(yn, [["render", $n]]), Sn = ["data-variant"], el =
     function o() {
       t.value = !0;
     }
-    function s() {
+    function u() {
       t.value = !1, l.value = !1;
     }
-    return (i, d) => (u(), f("div", {
+    return (i, s) => (d(), f("div", {
       class: "bs-tooltip",
       "data-position": e.position || void 0,
       "data-component": "bs-tooltip",
       onMouseenter: o,
       onFocusin: o,
-      onMouseleave: s,
-      onFocusout: s
+      onMouseleave: u,
+      onFocusout: u
     }, [
       I(i.$slots, "default"),
-      e.content ? (u(), f("div", {
+      e.content ? (d(), f("div", {
         key: 0,
         class: X(n.value),
         id: e.tooltipId,