@adyen/bento-vue2 1.97.0 → 1.98.0

package/dist/chunks/{dropdown.CIEm6MBB.js → dropdown.NTGSuWAw.js}

@@ -1,33 +1,33 @@
-import { computed as n, ref as E, onMounted as rt, onUnmounted as ct, watch as Z, defineComponent as z, nextTick as Y, toRef as K, useSlots as Se, useAttrs as $e, toRefs as He, inject as Fe } from "vue";
-import { B as ae, d as Re } from "./typography.C8lPlsbD.js";
-import { g as le } from "./generate-uid.NJ8tVoha.js";
-import { u as oe } from "./index.B6WW_F-J.js";
-import { u as Je } from "./use-has-slot.C9lQZ6nz.js";
-import { C as dt } from "./cross-circle-fill.DTDtgLMf.js";
-import { C as ut } from "./cross-circle-fill-small.DfxDedRr.js";
-import { n as U } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
-import { s as fe } from "./events.BQOQSSb7.js";
-import { C as Xe } from "./chevron-down.eYtgv5ly.js";
-import { C as Ze } from "./chevron-up.d8cwIlA_.js";
+import { computed as n, ref as E, onMounted as dt, onUnmounted as pt, watch as te, defineComponent as U, nextTick as W, toRef as q, useSlots as Oe, useAttrs as Ve, toRefs as Qe, inject as ze } from "vue";
+import { B as ie, d as $e } from "./typography.C8lPlsbD.js";
+import { g as ne } from "./generate-uid.NJ8tVoha.js";
+import { u as de } from "./index.B6WW_F-J.js";
+import { u as et } from "./use-has-slot.C9lQZ6nz.js";
+import { C as ft } from "./cross-circle-fill.DTDtgLMf.js";
+import { C as bt } from "./cross-circle-fill-small.DfxDedRr.js";
+import { n as G } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import { s as ye } from "./events.BQOQSSb7.js";
+import { C as tt } from "./chevron-down.eYtgv5ly.js";
+import { C as lt } from "./chevron-up.d8cwIlA_.js";
 /* empty css              */
-import { u as pt } from "./aria-label.CaUURpnB.js";
-import { u as ft } from "./form-field.D_2g7vaP.js";
-import { u as bt } from "./use-form-layout-loading.CWbjZiwP.js";
-import { B as V, a as we } from "./keyboard-navigation.DWmhelVv.js";
-import { B as vt } from "./loading-indicator.PxbRzshH.js";
-import { B as mt } from "./empty-state.Dttc-ZO_.js";
-import { o as _t } from "./resize.Bqks3WUm.js";
+import { u as vt } from "./aria-label.CaUURpnB.js";
+import { u as mt } from "./form-field.D_2g7vaP.js";
+import { u as _t } from "./use-form-layout-loading.CWbjZiwP.js";
+import { B as z, a as ke } from "./keyboard-navigation.DWmhelVv.js";
+import { B as yt } from "./loading-indicator.PxbRzshH.js";
+import { B as gt } from "./empty-state.Dttc-ZO_.js";
+import { o as ht } from "./resize.Bqks3WUm.js";
 import "./index.Cl4_42j5.js";
-import { C as Te, N as yt } from "./minus-small.DJacLGTw.js";
-import { C as gt } from "./checkmark-small.DVDtD4HQ.js";
-import { B as ht } from "./chip.BFY_-VCz.js";
-import { a as St, b as Ue, h as xt, e as Ct } from "./button-actions.DKc63aCb.js";
-import { B as Ot } from "./directive.BBWhsNtO.js";
-import { F as Et } from "./field-label.CdVbAfK-.js";
-import { E as It } from "./error-message.CyERcfdt.js";
-import { P as Ge } from "./popper-container.CFYFCz6u.js";
+import { C as De, N as St } from "./minus-small.DJacLGTw.js";
+import { C as xt } from "./checkmark-small.DVDtD4HQ.js";
+import { B as Ct } from "./chip.BFY_-VCz.js";
+import { a as Ot, b as Ye, h as Et, e as It } from "./button-actions.BD4Dyp4U.js";
+import { B as Lt } from "./directive.BBWhsNtO.js";
+import { F as Tt } from "./field-label.CkMM3cXO.js";
+import { E as wt } from "./error-message.CyERcfdt.js";
+import { P as We } from "./popper-container.dxpRn9a5.js";
 import "../assets/dropdown.css";
-const Qe = (a, e, l, t) => {
+const at = (a, e, l, t) => {
   const s = n(
     () => {
       var r, v;
@@ -45,73 +45,73 @@ const Qe = (a, e, l, t) => {
     }
   };
 };
-function Lt(a, { disabled: e, itemHeight: l, overscan: t = 5, prefixHeight: s }) {
-  const o = E(null), i = E([]), r = E(0), v = E(0), u = E(0);
+function At(a, { disabled: e, itemHeight: l, overscan: t = 5, prefixHeight: s }) {
+  const o = E(null), i = E([]), r = E(0), v = E(0), d = E(0);
   let c;
-  const g = n(() => {
-    const p = typeof l == "number" ? a.value.length * l : a.value.reduce((T, O, A) => T + l(A), 0), L = typeof l == "number" ? r.value * l : a.value.slice(0, r.value).reduce((T, O, A) => T + l(A), 0);
+  const m = n(() => {
+    const b = typeof l == "number" ? a.value.length * l : a.value.reduce((T, I, w) => T + l(w), 0), L = typeof l == "number" ? r.value * l : a.value.slice(0, r.value).reduce((T, I, w) => T + l(w), 0);
     return {
       style: {
         marginTop: `${L}px`,
-        height: `${p - L}px`
+        height: `${b - L}px`
       }
     };
-  }), b = () => {
-    const p = (s == null ? void 0 : s.value) ?? 0, L = Math.max(o.value.scrollTop - p, 0);
+  }), p = () => {
+    const b = (s == null ? void 0 : s.value) ?? 0, L = Math.max(o.value.scrollTop - b, 0);
     if (typeof l == "number")
       return Math.floor(L / l);
-    let T = 0, O = 0;
-    for (let A = 0; A < a.value.length; A += 1) {
-      const M = l(A);
-      if (T += M, T >= L) {
-        O = A;
+    let T = 0, I = 0;
+    for (let w = 0; w < a.value.length; w += 1) {
+      const N = l(w);
+      if (T += N, T >= L) {
+        I = w;
         break;
       }
     }
-    return O;
+    return I;
   }, f = () => {
-    if (u.value = o.value.clientHeight, typeof l == "number")
-      return Math.ceil(u.value / l);
-    const p = r.value ?? 0;
+    if (d.value = o.value.clientHeight, typeof l == "number")
+      return Math.ceil(d.value / l);
+    const b = r.value ?? 0;
     let L = 0, T = 0;
-    for (let O = p; O < a.value.length; O += 1) {
-      const A = l(O);
-      if (L += A, T = O, L > u.value)
+    for (let I = b; I < a.value.length; I += 1) {
+      const w = l(I);
+      if (L += w, T = I, L > d.value)
         break;
     }
-    return T - p;
+    return T - b;
   }, h = () => {
     if (o.value) {
-      const p = f();
-      r.value = b(), v.value = Math.min(r.value + p + t, a.value.length), i.value = a.value.slice(r.value, v.value);
+      const b = f();
+      r.value = p(), v.value = Math.min(r.value + b + t, a.value.length), i.value = a.value.slice(r.value, v.value);
     }
   }, y = () => {
     h();
   };
-  e || (rt(() => {
-    o.value && (u.value = o.value.clientHeight, c = _t(o.value, ({ clientHeight: p }) => {
-      u.value = p, h();
+  e || (dt(() => {
+    o.value && (d.value = o.value.clientHeight, c = ht(o.value, ({ clientHeight: b }) => {
+      d.value = b, h();
     }), h());
-  }), ct(() => {
+  }), pt(() => {
     c == null || c.disconnect();
-  }), Z(
+  }), te(
     () => a.value,
     () => {
       h();
     }
   ));
-  const B = {
+  const k = {
     ref: o,
     style: { overflowY: "auto" }
-  }, R = (p) => {
+  }, B = (b) => {
     if (!o.value)
       return;
-    const L = typeof l == "number" ? p * l : a.value.slice(0, p).reduce((C, I, N) => C + l(N), 0), T = typeof l == "number" ? l : l(p), O = L + T, { scrollTop: A, clientHeight: M } = o.value, m = A + M;
-    O > m ? o.value.scrollTop = M > 0 ? O - M : L : L < A && (o.value.scrollTop = L), h();
+    const L = typeof l == "number" ? b * l : a.value.slice(0, b).reduce((g, S, R) => g + l(R), 0), T = typeof l == "number" ? l : l(b), I = L + T, { scrollTop: w, clientHeight: N } = o.value, A = w + N;
+    I > A ? o.value.scrollTop = N > 0 ? I - N : L : L < w && (o.value.scrollTop = L), h();
   };
   return e ? {
     containerRef: o,
-    containerProps: B,
+    containerProps: k,
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     onScroll: () => {
     },
@@ -122,19 +122,19 @@ function Lt(a, { disabled: e, itemHeight: l, overscan: t = 5, prefixHeight: s })
     startIndex: E(0)
   } : {
     containerRef: o,
-    containerProps: B,
+    containerProps: k,
     onScroll: y,
     list: i,
-    wrapperProps: g,
-    scrollToIndex: R,
+    wrapperProps: m,
+    scrollToIndex: B,
     startIndex: r
   };
 }
-var d = /* @__PURE__ */ ((a) => (a.SELECT = "select", a.SHOW_MORE = "show-more", a.ESCAPE = "escape-pressed", a.CLICK = "click", a.ENTER = "enter-pressed", a.SPACE = "space-pressed", a.TAB = "tab-pressed", a.CLOSE_DROPDOWN = "close-dropdown", a))(d || {}), te = /* @__PURE__ */ ((a) => (a.AUTOMATIC = "automatic", a.BUTTON = "button", a.NONE = "none", a))(te || {});
-const Tt = z({
+var u = /* @__PURE__ */ ((a) => (a.SELECT = "select", a.SHOW_MORE = "show-more", a.ESCAPE = "escape-pressed", a.CLICK = "click", a.ENTER = "enter-pressed", a.SPACE = "space-pressed", a.TAB = "tab-pressed", a.CLOSE_DROPDOWN = "close-dropdown", a))(u || {}), oe = /* @__PURE__ */ ((a) => (a.AUTOMATIC = "automatic", a.BUTTON = "button", a.NONE = "none", a))(oe || {});
+const Dt = U({
   name: "bento-listbox-static-category",
   components: {
-    BentoTypography: ae
+    BentoTypography: ie
   },
   props: {
     /**
@@ -146,18 +146,18 @@ const Tt = z({
     }
   }
 });
-var wt = function() {
+var kt = function() {
   var e = this, l = e._self._c;
   return e._self._setupProxy, l("div", { staticClass: "b-listbox-single-select-category", attrs: { role: "group", "aria-label": e.categoryLabel } }, [l("bento-typography", { staticClass: "b-listbox-single-select-category__label-text", attrs: { variant: "caption", el: "span", "aria-hidden": "true" } }, [e._v(" " + e._s(e.categoryLabel) + " ")]), l("div", [e._t("default")], 2)], 1);
-}, At = [], Dt = /* @__PURE__ */ U(
-  Tt,
-  wt,
-  At,
+}, Bt = [], Rt = /* @__PURE__ */ G(
+  Dt,
+  kt,
+  Bt,
   !1,
   null,
   "bfbc1649"
 );
-const kt = Dt.exports, Bt = z({
+const Mt = Rt.exports, Nt = U({
   name: "bento-listbox-option",
   props: {
     /**
@@ -169,7 +169,7 @@ const kt = Dt.exports, Bt = z({
      */
     selected: { type: Boolean, default: !1 }
   },
-  emits: [d.CLICK, d.ENTER, d.SPACE, d.TAB],
+  emits: [u.CLICK, u.ENTER, u.SPACE, u.TAB],
   setup(a, { emit: e }) {
     const l = n(() => ({
       "b-listbox-option--disabled": a.disabled,
@@ -177,13 +177,13 @@ const kt = Dt.exports, Bt = z({
     }));
     return {
       // Enums
-      BentoKeyboardNavigationKeyDownEvent: V,
-      BentoListboxEvent: d,
+      BentoKeyboardNavigationKeyDownEvent: z,
+      BentoListboxEvent: u,
       // Values
       conditionalClasses: l,
       // Events
       onClick: (o) => {
-        e(d.CLICK, o);
+        e(u.CLICK, o);
       },
       onOptionSelected: (o, i) => {
         e(o, i);
@@ -191,7 +191,7 @@ const kt = Dt.exports, Bt = z({
     };
   }
 });
-var Rt = function() {
+var $t = function() {
   var e = this, l = e._self._c;
   return e._self._setupProxy, l("div", e._b({ staticClass: "b-listbox-option", class: e.conditionalClasses, attrs: { role: "option" }, on: { click: e.onClick, keydown: [function(t) {
     return !t.type.indexOf("key") && e._k(t.keyCode, "enter", 13, t.key, "Enter") ? null : e.onOptionSelected(e.BentoListboxEvent.ENTER, t);
@@ -200,38 +200,38 @@ var Rt = function() {
   }, function(t) {
     return !t.type.indexOf("key") && e._k(t.keyCode, "tab", 9, t.key, "Tab") ? null : e.onOptionSelected(e.BentoListboxEvent.TAB, t);
   }] } }, "div", e.$attrs, !1), [e._t("default")], 2);
-}, Mt = [], Nt = /* @__PURE__ */ U(
-  Bt,
-  Rt,
-  Mt,
+}, Ft = [], Pt = /* @__PURE__ */ G(
+  Nt,
+  $t,
+  Ft,
   !1,
   null,
   "c345b6c0"
 );
-const Ae = Nt.exports;
-let Ke = 0;
-const $t = {
+const Be = Pt.exports;
+let je = 0;
+const Vt = {
   beforeCreate() {
-    this.uuid = Ke.toString(), Ke += 1;
+    this.uuid = je.toString(), je += 1;
   }
 };
-var Ft = function() {
+var zt = function() {
   var e = this, l = e._self._c;
   return l("svg", e._b({ staticClass: "ui-assets-icons-16", attrs: { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" } }, "svg", e.$attrs, !1), [e.$attrs["svg-title"] ? l("title", [e._v(e._s(e.$attrs["svg-title"]))]) : e._e(), l("path", { attrs: { fill: "#001222", d: "M15.0608 4.00011L14.0001 2.93945L6.00011 10.9395L2.00011 6.93945L0.939453 8.00011L6.00011 13.0608L15.0608 4.00011Z" } })]);
-}, Pt = [], Vt = /* @__PURE__ */ U(
-  $t,
-  Ft,
-  Pt,
+}, Ut = [], Gt = /* @__PURE__ */ G(
+  Vt,
+  zt,
+  Ut,
   !1,
   null,
   null
 );
-const zt = Vt.exports, Ut = z({
+const Kt = Gt.exports, qt = U({
   name: "bento-listbox-single-select-option",
   components: {
-    BentoListboxOption: Ae,
-    BentoTypography: ae,
-    CheckmarkIcon: zt
+    BentoListboxOption: Be,
+    BentoTypography: ie,
+    CheckmarkIcon: Kt
   },
   props: {
     /**
@@ -251,7 +251,7 @@ const zt = Vt.exports, Ut = z({
      */
     selected: { type: Boolean, default: !1 }
   },
-  emits: [d.ENTER, d.SELECT, d.SPACE, d.TAB],
+  emits: [u.ENTER, u.SELECT, u.SPACE, u.TAB],
   setup(a, { emit: e }) {
     const l = (i) => {
       a.disabled || e(i, a.option);
@@ -262,13 +262,13 @@ const zt = Vt.exports, Ut = z({
       ariaSelected: s,
       tabIndex: o,
       // Enums
-      BentoListboxEvent: d,
+      BentoListboxEvent: u,
       // Events
       onOptionSelected: l
     };
   }
 });
-var Gt = function() {
+var Yt = function() {
   var e = this, l = e._self._c;
   return e._self._setupProxy, l("bento-listbox-option", { staticClass: "b-listbox-single-select-option", attrs: { disabled: e.disabled, selected: e.selected, "aria-selected": e.ariaSelected, "aria-disabled": e.ariaDisabled, tabindex: e.tabIndex }, on: { click: function(t) {
     return e.onOptionSelected(e.BentoListboxEvent.SELECT);
@@ -281,15 +281,15 @@ var Gt = function() {
   } } }, [e._t("default", function() {
     return [l("span", { staticClass: "b-listbox-single-select-option__text" }, [l("bento-typography", { attrs: { el: "span" } }, [e._v(e._s(e.option.label))]), e.option.description ? l("bento-typography", { staticClass: "b-listbox-single-select-option__description", attrs: { el: "span" } }, [e._v(" " + e._s(e.option.description) + " ")]) : e._e()], 1)];
   }, null, e.option), l("span", { staticClass: "b-listbox-single-select-option__check-icon" }, [l("checkmark-icon", { directives: [{ name: "show", rawName: "v-show", value: e.selected, expression: "selected" }], attrs: { "svg-title": "selected" } })], 1)], 2);
-}, Kt = [], qt = /* @__PURE__ */ U(
-  Ut,
-  Gt,
-  Kt,
+}, Wt = [], jt = /* @__PURE__ */ G(
+  qt,
+  Yt,
+  Wt,
   !1,
   null,
   "bb14d75a"
 );
-const Yt = qt.exports, et = ({ items: a, totalItemCount: e }, l) => {
+const Ht = jt.exports, st = ({ items: a, totalItemCount: e }, l) => {
   const t = n(() => e != null && e.value ? e.value - 1 : a.value.length - 1), s = E(0), o = (f) => {
     switch (f) {
       case "increase":
@@ -302,7 +302,7 @@ const Yt = qt.exports, et = ({ items: a, totalItemCount: e }, l) => {
   }, i = ({ edgeCaseItem: f }, h) => {
     s.value !== f && (o(h), l(s.value));
   }, r = (f) => {
-    b(f), i(
+    p(f), i(
       {
         edgeCaseItem: t.value
       },
@@ -310,43 +310,43 @@ const Yt = qt.exports, et = ({ items: a, totalItemCount: e }, l) => {
       /* INCREASE */
     );
   }, v = (f) => {
-    b(f), i(
+    p(f), i(
       {
         edgeCaseItem: 0
       },
       "decrease"
       /* DECREASE */
     );
-  }, u = () => {
+  }, d = () => {
     s.value = 0, l(s.value);
   }, c = () => {
     s.value = t.value, l(s.value);
-  }, g = (f) => {
+  }, m = (f) => {
     s.value = f;
-  }, b = (f) => {
+  }, p = (f) => {
     var h;
     (h = f == null ? void 0 : f.detail) == null || h.preventDefault();
   };
   return {
-    moveToFirstElement: u,
+    moveToFirstElement: d,
     moveToLastElement: c,
     moveToNextElement: r,
     moveToPreviousElement: v,
-    setListboxFocusedIndex: g,
-    preventDefault: b,
+    setListboxFocusedIndex: m,
+    preventDefault: p,
     focusedIndex: s
   };
-}, Pe = (a, e, l = E("option"), t = !0) => {
+}, Ue = (a, e, l = E("option"), t = !0) => {
   const s = E([]), o = async () => {
     if (!a.value || a.value.nodeType === Node.COMMENT_NODE)
       return;
     const i = Array.from(a.value.querySelectorAll(`[role="${l.value}"]`));
     s.value = t ? i.filter((r) => r.checkVisibility()) : i;
   };
-  return Z(
+  return te(
     e,
     () => {
-      Y(() => {
+      W(() => {
         o();
       });
     },
@@ -355,13 +355,13 @@ const Yt = qt.exports, et = ({ items: a, totalItemCount: e }, l) => {
     visibleDomOptions: s,
     updateVisibleDomOptions: o
   };
-}, Wt = z({
+}, Jt = U({
   name: "bento-listbox-single-select",
   components: {
-    BentoListboxSingleSelectCategory: kt,
-    BentoListboxSingleSelectOption: Yt
+    BentoListboxSingleSelectCategory: Mt,
+    BentoListboxSingleSelectOption: Ht
   },
-  directives: { BentoKeyboardNavigationDirective: we },
+  directives: { BentoKeyboardNavigationDirective: ke },
   inheritAttrs: !1,
   props: {
     /**
@@ -415,71 +415,74 @@ const Yt = qt.exports, et = ({ items: a, totalItemCount: e }, l) => {
      */
     virtualScrollStartIndex: { type: Number, default: 0 }
   },
-  emits: [d.SELECT, d.ENTER, d.SPACE, d.TAB],
+  emits: [u.SELECT, u.ENTER, u.SPACE, u.TAB],
   setup(a, { emit: e, expose: l, slots: t, attrs: s }) {
     const o = E(null), i = E([]), r = n(() => {
-      var m;
-      return !!((m = a.selectedValue) != null && m.length) && a.selectedValue.at(0);
+      var g;
+      return !!((g = a.selectedValue) != null && g.length) && a.selectedValue.at(0);
     }), v = n(
       () => {
-        var m, C, I, N;
+        var g, S, R, O;
         return {
-          "aria-label": (m = s["aria-label"]) == null ? void 0 : m.toString(),
-          "aria-busy": (C = s["aria-busy"]) == null ? void 0 : C.toString(),
-          "aria-atomic": (I = s["aria-atomic"]) == null ? void 0 : I.toString(),
-          "aria-live": (N = s["aria-live"]) == null ? void 0 : N.toString()
+          "aria-label": (g = s["aria-label"]) == null ? void 0 : g.toString(),
+          "aria-busy": (S = s["aria-busy"]) == null ? void 0 : S.toString(),
+          "aria-atomic": (R = s["aria-atomic"]) == null ? void 0 : R.toString(),
+          "aria-live": (O = s["aria-live"]) == null ? void 0 : O.toString()
         };
       }
-    ), u = n(() => !!a.items.some(({ items: m }) => !!m)), c = (m) => (C) => {
-      e(m, [C]);
-    }, { visibleDomOptions: g, updateVisibleDomOptions: b } = Pe(
+    ), d = n(() => !!a.items.some(({ items: g }) => !!g)), c = (g) => (S) => {
+      e(g, [S]);
+    }, { visibleDomOptions: m, updateVisibleDomOptions: p } = Ue(
       o,
-      K(a, "items"),
+      q(a, "items"),
       E("option"),
       !1
-    ), f = n(() => a.totalItemCount > 0), h = (m) => {
+    ), f = n(() => a.totalItemCount > 0), h = (g) => {
       if (!f.value)
         return;
-      const C = m.target;
-      if (C === o.value || (C == null ? void 0 : C.getAttribute("role")) !== "option")
+      const S = g.target;
+      if (S === o.value || (S == null ? void 0 : S.getAttribute("role")) !== "option")
         return;
-      const I = g.value.indexOf(C);
-      if (I !== -1) {
-        const N = I + a.virtualScrollStartIndex;
-        O(N);
+      const R = m.value.indexOf(S);
+      if (R !== -1) {
+        const O = R + a.virtualScrollStartIndex;
+        w(O);
       }
-    }, y = async (m) => {
-      var C, I;
+    }, y = async (g) => {
+      var S, R;
       if (f.value && a.scrollToIndex) {
-        a.scrollToIndex(m), await Y(), await b();
-        const N = m - a.virtualScrollStartIndex;
-        (C = g.value[N]) == null || C.focus();
+        a.scrollToIndex(g), await W(), await p();
+        const O = g - a.virtualScrollStartIndex;
+        (S = m.value[O]) == null || S.focus();
       } else
-        (I = g.value[m]) == null || I.focus();
-    }, B = async (m) => {
-      O(m), await y(m);
+        (R = m.value[g]) == null || R.focus();
+    }, k = async (g) => {
+      w(g), await y(g);
+    }, B = async (g) => {
+      var S, R;
+      await p(), f.value && a.scrollToIndex ? a.scrollToIndex(g) : (R = (S = m.value[g]) == null ? void 0 : S.scrollIntoView) == null || R.call(S, { block: "nearest" });
     }, {
-      moveToNextElement: R,
-      moveToPreviousElement: p,
-      moveToFirstElement: L,
-      moveToLastElement: T,
-      setListboxFocusedIndex: O
-    } = et(
+      moveToNextElement: b,
+      moveToPreviousElement: L,
+      moveToFirstElement: T,
+      moveToLastElement: I,
+      setListboxFocusedIndex: w
+    } = st(
       {
-        items: g,
-        totalItemCount: K(a, "totalItemCount")
+        items: m,
+        totalItemCount: q(a, "totalItemCount")
       },
       y
-    ), A = {
-      [V.ARROW_UP]: p,
-      [V.ARROW_DOWN]: R,
-      [V.HOME]: L,
-      [V.END]: T
-    }, M = {
-      [d.SELECT]: c(d.SELECT),
-      [d.SPACE]: c(d.SPACE),
-      [d.TAB]: c(d.TAB),
-      [d.ENTER]: c(d.ENTER)
+    ), N = {
+      [z.ARROW_UP]: L,
+      [z.ARROW_DOWN]: b,
+      [z.HOME]: T,
+      [z.END]: I
+    }, A = {
+      [u.SELECT]: c(u.SELECT),
+      [u.SPACE]: c(u.SPACE),
+      [u.TAB]: c(u.TAB),
+      [u.ENTER]: c(u.ENTER)
     };
     return l({
       /**
@@ -491,15 +494,20 @@ const Yt = qt.exports, et = ({ items: a, totalItemCount: e }, l) => {
        * Method to set the index of the item to be focused on
        * Used for focus management to be kept in-sync with parent e.g. dropdowns
        */
-      setListboxFocusedIndex: O,
+      setListboxFocusedIndex: w,
       /**
        * Navigates to an item by global index, handling virtual scroll if enabled.
        * Scrolls the virtual list and focuses the item.
        */
-      navigateToItem: B
+      navigateToItem: k,
+      /**
+       * Scrolls to an item by global index without changing focus.
+       * Used when the dropdown opens via click to bring the selected option into view.
+       */
+      scrollToItem: B
     }), {
       // Enums
-      BentoListboxEvent: d,
+      BentoListboxEvent: u,
       // Values
       listboxRef: o,
       listboxItemRef: i,
@@ -507,18 +515,18 @@ const Yt = qt.exports, et = ({ items: a, totalItemCount: e }, l) => {
       slots: t,
       ariaAttributes: v,
       // Computed
-      hasCategories: u,
+      hasCategories: d,
       // Methods
       onOptionSelected: c,
       // Keyboard navigation
-      listboxListeners: A,
-      listboxOptionListeners: M,
+      listboxListeners: N,
+      listboxOptionListeners: A,
       // Virtual scroll focus management
       handleVirtualScrollingFocus: h
     };
   }
 });
-var jt = function() {
+var Xt = function() {
   var e = this, l = e._self._c;
   return e._self._setupProxy, l("div", e._g(e._b({ directives: [{ name: "bento-keyboard-navigation-directive", rawName: "v-bento-keyboard-navigation-directive" }], ref: "listboxRef", attrs: { role: "listbox" }, on: { focusin: e.handleVirtualScrollingFocus } }, "div", e.ariaAttributes, !1), e.listboxListeners), [e.hasCategories && e.staticCategories ? [e._l(e.items, function(t) {
     return [t.items && t.items.length > 0 ? l("bento-listbox-single-select-category", { key: `category-${t.value}`, attrs: { "category-label": t.label } }, e._l(t.items, function(s) {
@@ -539,34 +547,34 @@ var jt = function() {
       } };
     })], null, !0) }, e.listboxOptionListeners));
   })], 2);
-}, Ht = [], Jt = /* @__PURE__ */ U(
-  Wt,
-  jt,
-  Ht,
+}, Zt = [], Qt = /* @__PURE__ */ G(
+  Jt,
+  Xt,
+  Zt,
   !1,
   null,
   null
 );
-const Xt = Jt.exports;
-let qe = 0;
-const Zt = {
+const el = Qt.exports;
+let He = 0;
+const tl = {
   beforeCreate() {
-    this.uuid = qe.toString(), qe += 1;
+    this.uuid = He.toString(), He += 1;
   }
 };
-var Qt = function() {
+var ll = function() {
   var e = this, l = e._self._c;
   return l("svg", e._b({ staticClass: "ui-assets-icons-16", attrs: { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" } }, "svg", e.$attrs, !1), [e.$attrs["svg-title"] ? l("title", [e._v(e._s(e.$attrs["svg-title"]))]) : e._e(), l("path", { attrs: { fill: "#001222", d: "M9.69043 5.75L4.62988 10.8105L1.56934 7.75L2.62988 6.68945L4.62988 8.68945L8.62988 4.68945L9.69043 5.75Z" } }), l("path", { attrs: { fill: "#001222", d: "M13.9307 5.75L8.87012 10.8105L7.80957 9.75L12.8701 4.68945L13.9307 5.75Z" } })]);
-}, el = [], tl = /* @__PURE__ */ U(
-  Zt,
-  Qt,
-  el,
+}, al = [], sl = /* @__PURE__ */ G(
+  tl,
+  ll,
+  al,
   !1,
   null,
   null
 );
-const ll = tl.exports, al = {}, sl = /* @__PURE__ */ z({
-  ...al,
+const ol = sl.exports, nl = {}, il = /* @__PURE__ */ U({
+  ...nl,
   __name: "decorative-checkbox",
   props: {
     disabled: { type: Boolean, default: !1 },
@@ -576,29 +584,29 @@ const ll = tl.exports, al = {}, sl = /* @__PURE__ */ z({
   },
   setup(a) {
     const e = a, l = n(() => ({
-      [`b-checkbox-input--${Te.DISABLED}`]: e.disabled
+      [`b-checkbox-input--${De.DISABLED}`]: e.disabled
     })), t = n(() => ({
-      [`b-checkbox-input__outline--${Te.UNCHECKED}`]: !e.checked && !e.indeterminate && !e.allSelected,
-      [`b-checkbox-input__outline--${Te.CHECKED}`]: (e.checked || e.allSelected) && !e.indeterminate,
-      [`b-checkbox-input__outline--${Te.INDETERMINATE}`]: e.indeterminate
+      [`b-checkbox-input__outline--${De.UNCHECKED}`]: !e.checked && !e.indeterminate && !e.allSelected,
+      [`b-checkbox-input__outline--${De.CHECKED}`]: (e.checked || e.allSelected) && !e.indeterminate,
+      [`b-checkbox-input__outline--${De.INDETERMINATE}`]: e.indeterminate
     }));
-    return { __sfc: !0, props: e, conditionalClasses: l, outlineConditionalClasses: t, CheckmarkSmallIcon: gt, MinusSmallIcon: yt, DoubleCheckmarkSmallIcon: ll };
+    return { __sfc: !0, props: e, conditionalClasses: l, outlineConditionalClasses: t, CheckmarkSmallIcon: xt, MinusSmallIcon: St, DoubleCheckmarkSmallIcon: ol };
   }
 });
-var ol = function() {
+var rl = function() {
   var e = this, l = e._self._c, t = e._self._setupProxy;
   return l("div", { staticClass: "b-checkbox-input", class: t.conditionalClasses, attrs: { role: "presentation" } }, [e.indeterminate ? l(t.MinusSmallIcon, { staticClass: "b-checkbox-input__icon", attrs: { "svg-title": "", "aria-hidden": "true" } }) : e.allSelected ? l(t.DoubleCheckmarkSmallIcon, { staticClass: "b-checkbox-input__icon", attrs: { "svg-title": "", "aria-hidden": "true", "data-testid": "decorative-checkbox-double-checkmark-icon" } }) : e.checked ? l(t.CheckmarkSmallIcon, { staticClass: "b-checkbox-input__icon", attrs: { "svg-title": "", "aria-hidden": "true" } }) : e._e(), l("div", { staticClass: "b-checkbox-input__outline", class: t.outlineConditionalClasses })], 1);
-}, nl = [], il = /* @__PURE__ */ U(
-  sl,
-  ol,
-  nl,
+}, cl = [], ul = /* @__PURE__ */ G(
+  il,
+  rl,
+  cl,
   !1,
   null,
   "b87bbaf9"
 );
-const Ve = il.exports;
-var tt = /* @__PURE__ */ ((a) => (a.DISABLED = "disabled", a.STATIC_CATEGORY = "static-category", a))(tt || {}), se = /* @__PURE__ */ ((a) => (a.SELECT_CATEGORY = "select-category", a.UNSELECT_CATEGORY = "unselect-category", a.TOGGLE_CATEGORY_VISIBILITY = "toggle-category-visibility", a))(se || {});
-const rl = {
+const Ge = ul.exports;
+var ot = /* @__PURE__ */ ((a) => (a.DISABLED = "disabled", a.STATIC_CATEGORY = "static-category", a))(ot || {}), ue = /* @__PURE__ */ ((a) => (a.SELECT_CATEGORY = "select-category", a.UNSELECT_CATEGORY = "unselect-category", a.TOGGLE_CATEGORY_VISIBILITY = "toggle-category-visibility", a))(ue || {});
+const dl = {
   "de-DE": {
     categoryClosed: "{category} geschlossen",
     categoryOpened: "{category} geöffnet"
@@ -639,15 +647,15 @@ const rl = {
     categoryClosed: "{category} 已关闭",
     categoryOpened: "{category} 已打开"
   }
-}, cl = z({
-  i18n: { messages: rl },
+}, pl = U({
+  i18n: { messages: dl },
   name: "bento-listbox-multi-select-category",
   components: {
-    BentoTypography: ae,
-    BentoListboxOption: Ae,
-    ChevronDownIcon: Xe,
-    ChevronUpIcon: Ze,
-    DecorativeCheckbox: Ve
+    BentoTypography: ie,
+    BentoListboxOption: Be,
+    ChevronDownIcon: tt,
+    ChevronUpIcon: lt,
+    DecorativeCheckbox: Ge
   },
   props: {
     /**
@@ -693,75 +701,75 @@ const rl = {
     tabindex: { type: Number, default: -1 }
   },
   emits: [
-    se.SELECT_CATEGORY,
-    se.UNSELECT_CATEGORY,
-    se.TOGGLE_CATEGORY_VISIBILITY
+    ue.SELECT_CATEGORY,
+    ue.UNSELECT_CATEGORY,
+    ue.TOGGLE_CATEGORY_VISIBILITY
   ],
   setup(a, { emit: e }) {
-    const l = E(!1), { t } = oe(), s = le("category-group"), o = le("category-name"), i = (m) => a.isOptionDisabled ? a.isOptionDisabled(m) : !1, r = n(
-      () => a.category.items.every((m) => i(m))
-    ), v = K(a, "staticCategories"), u = n(() => l.value || a.staticCategories), c = n(() => ({
-      [`b-listbox-multi-select-category--${tt.DISABLED}`]: r.value
-    })), g = (m, C) => {
-      m.preventDefault(), l.value = C !== void 0 ? C : !l.value, e(se.TOGGLE_CATEGORY_VISIBILITY, a.category.value);
-    }, b = (m) => {
-      var N;
-      const C = i(m), I = ((N = a.selectedItemsList) == null ? void 0 : N.includes(m.value)) || !1;
-      return { isDisabled: C, isPreSelected: I };
+    const l = E(!1), { t } = de(), s = ne("category-group"), o = ne("category-name"), i = (A) => a.isOptionDisabled ? a.isOptionDisabled(A) : !1, r = n(
+      () => a.category.items.every((A) => i(A))
+    ), v = q(a, "staticCategories"), d = n(() => l.value || a.staticCategories), c = n(() => ({
+      [`b-listbox-multi-select-category--${ot.DISABLED}`]: r.value
+    })), m = (A, g) => {
+      A.preventDefault(), l.value = g !== void 0 ? g : !l.value, e(ue.TOGGLE_CATEGORY_VISIBILITY, a.category.value);
+    }, p = (A) => {
+      var R;
+      const g = i(A), S = ((R = a.selectedItemsList) == null ? void 0 : R.includes(A.value)) || !1;
+      return { isDisabled: g, isPreSelected: S };
     }, f = n(
-      () => a.category.items.filter((m) => {
-        const { isDisabled: C, isPreSelected: I } = b(m);
-        return C && I || !C;
+      () => a.category.items.filter((A) => {
+        const { isDisabled: g, isPreSelected: S } = p(A);
+        return g && S || !g;
       })
     ), h = n(
       () => {
-        var m;
-        return (m = f.value) == null ? void 0 : m.filter(
-          ({ value: C }) => {
-            var I;
-            return (I = a.selectedItemsList) == null ? void 0 : I.includes(C);
+        var A;
+        return (A = f.value) == null ? void 0 : A.filter(
+          ({ value: g }) => {
+            var S;
+            return (S = a.selectedItemsList) == null ? void 0 : S.includes(g);
           }
         );
       }
     ), y = n(() => {
-      const m = l.value ? "categoryOpened" : "categoryClosed";
-      return t(m, { category: a.category.label });
-    }), B = () => {
-      e(se.SELECT_CATEGORY);
-    }, R = () => {
-      e(se.UNSELECT_CATEGORY);
-    }, { isAllSelected: p, isIndeterminate: L, toggleSelectAll: T } = Qe(
+      const A = l.value ? "categoryOpened" : "categoryClosed";
+      return t(A, { category: a.category.label });
+    }), k = () => {
+      e(ue.SELECT_CATEGORY);
+    }, B = () => {
+      e(ue.UNSELECT_CATEGORY);
+    }, { isAllSelected: b, isIndeterminate: L, toggleSelectAll: T } = at(
       h,
       f,
-      B,
-      R
-    ), O = n(() => L.value ? "mixed" : `${p.value}`), A = E(p.value), M = () => {
-      A.value = !A.value, T(A.value);
+      k,
+      B
+    ), I = n(() => L.value ? "mixed" : `${b.value}`), w = E(b.value), N = () => {
+      w.value = !w.value, T(w.value);
     };
-    return Z(p, () => {
-      A.value = p.value;
+    return te(b, () => {
+      w.value = b.value;
     }), {
       // Values
       chevronTitle: y,
       conditionalClass: c,
       hasAllPropsDisabled: r,
       isOpen: l,
-      isAllSelected: p,
+      isAllSelected: b,
       isIndeterminate: L,
       isStaticCategory: v,
       categoryGroupId: s,
       categoryNameId: o,
       // Computed
-      showItemChildren: u,
-      ariaCheckedComputed: O,
+      showItemChildren: d,
+      ariaCheckedComputed: I,
       // Methods
-      handleSelectAll: M,
-      toggleOpen: g,
+      handleSelectAll: N,
+      toggleOpen: m,
       toggleSelectAll: T
     };
   }
 });
-var dl = function() {
+var fl = function() {
   var e = this, l = e._self._c;
   return e._self._setupProxy, l("div", [e.isStaticCategory ? l("div", { staticClass: "b-listbox-multi-select-category b-listbox-multi-select-category--static-category", attrs: { "aria-hidden": "true" } }, [l("span", { staticClass: "b-listbox-multi-select-category__label" }, [l("bento-typography", { staticClass: "b-listbox-multi-select-category__label-text", attrs: { el: "span", variant: "caption" } }, [e._v(" " + e._s(e.category.label) + " ")])], 1)]) : l("bento-listbox-option", { staticClass: "b-listbox-multi-select-category__option", class: e.conditionalClass, attrs: { tabindex: e.tabindex, "aria-selected": e.ariaCheckedComputed !== "false", "aria-checked": e.ariaCheckedComputed, "aria-disabled": e.hasAllPropsDisabled, "aria-expanded": `${e.isOpen}`, role: "treeitem", "aria-owns": e.categoryGroupId, "aria-labelledby": e.categoryNameId }, on: { click: e.handleSelectAll, "enter-pressed": e.handleSelectAll, "space-pressed": function(t) {
     return t.preventDefault(), e.handleSelectAll.apply(null, arguments);
@@ -772,23 +780,23 @@ var dl = function() {
   }] } }, [l("decorative-checkbox", { attrs: { indeterminate: e.isIndeterminate, disabled: e.hasAllPropsDisabled, checked: e.isAllSelected } }), l("span", { staticClass: "b-listbox-multi-select-category__label" }, [l("bento-typography", { staticClass: "b-listbox-multi-select-category__label-text", attrs: { id: e.categoryNameId, el: "span" } }, [e._v(" " + e._s(e.category.label) + " ")]), l("div", { staticClass: "b-listbox-multi-select-category__label-chevron", attrs: { "aria-hidden": "true", "data-testid": "toggle-listbox" }, on: { "!click": function(t) {
     return t.stopPropagation(), e.toggleOpen.apply(null, arguments);
   } } }, [e.isOpen ? l("chevron-up-icon", { attrs: { "svg-title": e.chevronTitle } }) : l("chevron-down-icon", { attrs: { "svg-title": e.chevronTitle } })], 1)], 1)], 1), l("div", { directives: [{ name: "show", rawName: "v-show", value: e.showItemChildren, expression: "showItemChildren" }], attrs: { id: e.categoryGroupId, role: "group", "aria-label": e.category.label } }, [e._t("default")], 2)], 1);
-}, ul = [], pl = /* @__PURE__ */ U(
-  cl,
-  dl,
-  ul,
+}, bl = [], vl = /* @__PURE__ */ G(
+  pl,
+  fl,
+  bl,
   !1,
   null,
   "00ccd708"
 );
-const fl = pl.exports;
-var X = /* @__PURE__ */ ((a) => (a.SELECT_CATEGORY = "select-category", a.TOGGLE_CHECKBOX_SELECTION = "toggle-checkbox-selection", a.UNSELECT_CATEGORY = "unselect-category", a.TOGGLE_CATEGORY_VISIBILITY = "toggle-category-visibility", a))(X || {});
-const bl = z({
+const ml = vl.exports;
+var ee = /* @__PURE__ */ ((a) => (a.SELECT_CATEGORY = "select-category", a.TOGGLE_CHECKBOX_SELECTION = "toggle-checkbox-selection", a.UNSELECT_CATEGORY = "unselect-category", a.TOGGLE_CATEGORY_VISIBILITY = "toggle-category-visibility", a))(ee || {});
+const _l = U({
   name: "listbox-multi-select-options",
   components: {
-    BentoListboxOption: Ae,
-    BentoTypography: ae,
-    ListboxMultiSelectCategory: fl,
-    DecorativeCheckbox: Ve
+    BentoListboxOption: Be,
+    BentoTypography: ie,
+    ListboxMultiSelectCategory: ml,
+    DecorativeCheckbox: Ge
   },
   inheritAttrs: !1,
   props: {
@@ -858,23 +866,23 @@ const bl = z({
     }
   },
   emits: [
-    X.TOGGLE_CHECKBOX_SELECTION,
-    X.SELECT_CATEGORY,
-    X.UNSELECT_CATEGORY,
-    X.TOGGLE_CATEGORY_VISIBILITY
+    ee.TOGGLE_CHECKBOX_SELECTION,
+    ee.SELECT_CATEGORY,
+    ee.UNSELECT_CATEGORY,
+    ee.TOGGLE_CATEGORY_VISIBILITY
   ],
   setup(a, { emit: e }) {
-    const l = (u) => {
-      a.isOptionDisabled(u) || e(X.TOGGLE_CHECKBOX_SELECTION, u);
-    }, t = (u) => !!u.items, s = (u) => {
+    const l = (d) => {
+      a.isOptionDisabled(d) || e(ee.TOGGLE_CHECKBOX_SELECTION, d);
+    }, t = (d) => !!d.items, s = (d) => {
       const c = a.isMultiLevel && a.searching;
-      return u.description && (!a.isMultiLevel || c);
-    }, o = (u) => u.items ? !!u.items.find((c) => a.selectedItemsList.includes(c.value)) : a.selectedItemsList.includes(u.value), i = (u) => {
-      if (t(u)) {
-        const c = o(u) ? X.UNSELECT_CATEGORY : X.SELECT_CATEGORY;
-        e(c, u);
+      return d.description && (!a.isMultiLevel || c);
+    }, o = (d) => d.items ? !!d.items.find((c) => a.selectedItemsList.includes(c.value)) : a.selectedItemsList.includes(d.value), i = (d) => {
+      if (t(d)) {
+        const c = o(d) ? ee.UNSELECT_CATEGORY : ee.SELECT_CATEGORY;
+        e(c, d);
       } else
-        l(u);
+        l(d);
     };
     return {
       // Values
@@ -887,14 +895,14 @@ const bl = z({
       shouldShowDescription: s,
       toggleCheckboxSelection: l,
       toggleSearchOption: i,
-      computedTabindex: (u) => a.itemsIndex[u] === a.focusedIndex ? 0 : -1,
+      computedTabindex: (d) => a.itemsIndex[d] === a.focusedIndex ? 0 : -1,
       // Enums
-      BentoListboxEvent: d,
-      ListboxMultiSelectOptionsEvent: X
+      BentoListboxEvent: u,
+      ListboxMultiSelectOptionsEvent: ee
     };
   }
 });
-var vl = function() {
+var yl = function() {
   var e = this, l = e._self._c;
   return e._self._setupProxy, l("div", e._l(e.items, function(t) {
     return l("div", { key: `selected-${t.value}` }, [e.searching && e.isMultiLevel ? [l("bento-listbox-option", { staticClass: "b-listbox-multi-select-options", class: e.conditionalClasses, attrs: { disabled: e.isOptionDisabled ? e.isOptionDisabled(t) : null, tabindex: e.computedTabindex(t.value), "aria-selected": `${e.isOptionSelected(t)}`, "aria-checked": `${e.isOptionSelected(t)}`, "aria-disabled": e.isOptionDisabled ? e.isOptionDisabled(t) : null, role: e.$attrs.role || "option" }, on: { click: function(s) {
@@ -921,15 +929,15 @@ var vl = function() {
       return [l("span", { staticClass: "b-listbox-multi-select__option-text" }, [l("bento-typography", { attrs: { el: "span" } }, [e._v(e._s(t.label))]), e.shouldShowDescription(t) ? l("bento-typography", { staticClass: "b-listbox-multi-select__option-description", attrs: { el: "span" } }, [e._v(" " + e._s(t.description) + " ")]) : e._e()], 1)];
     }, null, t)], 2)]], 2);
   }), 0);
-}, ml = [], _l = /* @__PURE__ */ U(
-  bl,
-  vl,
-  ml,
+}, gl = [], hl = /* @__PURE__ */ G(
+  _l,
+  yl,
+  gl,
   !1,
   null,
   "0985e0a4"
 );
-const yl = _l.exports, lt = (a) => {
+const Sl = hl.exports, nt = (a) => {
   const e = n(() => {
     var t;
     return !!((t = a.value) != null && t.find(({ items: s }) => !!s));
@@ -941,7 +949,7 @@ const yl = _l.exports, lt = (a) => {
     isMultiLevelSelect: e,
     flattenedItemsList: l
   };
-}, gl = {
+}, xl = {
   "de-DE": {
     allSelected: "Alle ausgewählt ({total})",
     numberOfTotalSelected: "{number} von {total} ausgewählt",
@@ -1002,8 +1010,8 @@ const yl = _l.exports, lt = (a) => {
     numbersSelected: "已选择 {number} 个",
     selectAll: "选择全部（{total}）个"
   }
-}, hl = { i18n: { messages: gl } }, Sl = /* @__PURE__ */ z({
-  ...hl,
+}, Cl = { i18n: { messages: xl } }, Ol = /* @__PURE__ */ U({
+  ...Cl,
   __name: "listbox-multi-select",
   props: {
     hasMoreItems: { type: Boolean, default: !1 },
@@ -1016,143 +1024,148 @@ const yl = _l.exports, lt = (a) => {
   },
   emits: ["select"],
   setup(a, { expose: e, emit: l }) {
-    const t = a, { t: s, n: o } = oe(), i = Se(), r = $e(), v = n(
+    const t = a, { t: s, n: o } = de(), i = Oe(), r = Ve(), v = n(
       () => {
-        var _, S, x, k;
+        var _, x, C, D;
         return {
           "aria-label": (_ = r["aria-label"]) == null ? void 0 : _.toString(),
-          "aria-busy": (S = r["aria-busy"]) == null ? void 0 : S.toString(),
-          "aria-atomic": (x = r["aria-atomic"]) == null ? void 0 : x.toString(),
-          "aria-live": (k = r["aria-live"]) == null ? void 0 : k.toString(),
+          "aria-busy": (x = r["aria-busy"]) == null ? void 0 : x.toString(),
+          "aria-atomic": (C = r["aria-atomic"]) == null ? void 0 : C.toString(),
+          "aria-live": (D = r["aria-live"]) == null ? void 0 : D.toString(),
           "aria-multiselectable": !0
         };
       }
-    ), u = E(null), c = E(null), g = E(null), b = E(null), f = n(() => t.selectedValues.map(({ value: _ }) => _)), { isMultiLevelSelect: h, flattenedItemsList: y } = lt(K(t, "items")), B = n(() => h.value && !t.staticCategories), R = n(() => B.value ? "tree" : "listbox"), p = n(() => B.value ? "treeitem" : "option"), L = (_) => {
-      var k;
-      const S = t.isOptionDisabled(_), x = ((k = f.value) == null ? void 0 : k.includes(_.value)) || !1;
-      return { isDisabled: S, isPreSelected: x };
+    ), d = E(null), c = E(null), m = E(null), p = E(null), f = n(() => t.selectedValues.map(({ value: _ }) => _)), { isMultiLevelSelect: h, flattenedItemsList: y } = nt(q(t, "items")), k = n(() => h.value && !t.staticCategories), B = n(() => k.value ? "tree" : "listbox"), b = n(() => k.value ? "treeitem" : "option"), L = (_) => {
+      var D;
+      const x = t.isOptionDisabled(_), C = ((D = f.value) == null ? void 0 : D.includes(_.value)) || !1;
+      return { isDisabled: x, isPreSelected: C };
     }, T = n(() => {
       if (t.searching && h)
         return t.items;
-      const _ = y.value.filter((S) => {
-        const { isDisabled: x, isPreSelected: k } = L(S);
-        return x && k || !x;
+      const _ = y.value.filter((x) => {
+        const { isDisabled: C, isPreSelected: D } = L(x);
+        return C && D || !C;
       });
-      return t.selectedValues.forEach((S) => {
-        _.find((x) => x.value === S.value) || _.push(S);
+      return t.selectedValues.forEach((x) => {
+        _.find((C) => C.value === x.value) || _.push(x);
       }), _;
-    }), O = n(
+    }), I = n(
       () => {
         var _;
-        return (_ = T.value) == null ? void 0 : _.filter((S) => {
-          var x;
-          return S.items && h.value && t.searching ? S.items.filter(
-            (w) => (t.selectedValues ?? []).includes(w.value)
-          ).length === S.items.length : (x = f.value) == null ? void 0 : x.includes(S.value);
+        return (_ = T.value) == null ? void 0 : _.filter((x) => {
+          var C;
+          return x.items && h.value && t.searching ? x.items.filter(
+            (M) => (t.selectedValues ?? []).includes(M.value)
+          ).length === x.items.length : (C = f.value) == null ? void 0 : C.includes(x.value);
         });
       }
-    ), A = () => h.value && !t.searching ? y.value.length : t.items.length, M = n(() => {
-      var k;
-      const _ = T.value.length, S = A(), x = ((k = O.value) == null ? void 0 : k.length) || 0;
-      return x === 0 ? s("selectAll", { total: o(_) }) : x === S ? s("allSelected", { total: o(S) }) : x <= S ? s("numberOfTotalSelected", { number: o(x), total: o(S) }) : s("numbersSelected", { number: o(x) });
-    }), m = (_) => {
-      const S = (k) => {
-        const { isDisabled: w, isPreSelected: W } = L(k);
-        return w && W || !w;
-      }, x = _.filter(S).filter((k) => !f.value.includes(k.value));
-      l("select", [...t.selectedValues, ...x]);
-    }, C = (_) => {
-      const S = (w) => {
-        const { isDisabled: W, isPreSelected: Le } = L(w);
-        return !(W && Le);
-      }, x = _.filter(S).map(({ value: w }) => w), k = t.selectedValues.filter((w) => !(x != null && x.includes(w.value)));
-      l("select", k);
-    }, I = () => {
-      m(y.value);
-    }, N = () => {
-      C(y.value);
-    }, { isAllSelected: D, isIndeterminate: $, toggleSelectAll: J } = Qe(
-      O,
-      T,
+    ), w = () => h.value && !t.searching ? y.value.length : t.items.length, N = n(() => {
+      var D;
+      const _ = T.value.length, x = w(), C = ((D = I.value) == null ? void 0 : D.length) || 0;
+      return C === 0 ? s("selectAll", { total: o(_) }) : C === x ? s("allSelected", { total: o(x) }) : C <= x ? s("numberOfTotalSelected", { number: o(C), total: o(x) }) : s("numbersSelected", { number: o(C) });
+    }), A = (_) => {
+      const x = (D) => {
+        const { isDisabled: M, isPreSelected: J } = L(D);
+        return M && J || !M;
+      }, C = _.filter(x).filter((D) => !f.value.includes(D.value));
+      l("select", [...t.selectedValues, ...C]);
+    }, g = (_) => {
+      const x = (M) => {
+        const { isDisabled: J, isPreSelected: F } = L(M);
+        return !(J && F);
+      }, C = _.filter(x).map(({ value: M }) => M), D = t.selectedValues.filter((M) => !(C != null && C.includes(M.value)));
+      l("select", D);
+    }, S = () => {
+      A(y.value);
+    }, R = () => {
+      g(y.value);
+    }, { isAllSelected: O, isIndeterminate: P, toggleSelectAll: Q } = at(
       I,
-      N
-    ), Q = n(() => $.value ? "mixed" : `${D.value}`), q = E(D.value), F = () => {
-      q.value = !q.value, J(q.value);
+      T,
+      S,
+      R
+    ), le = n(() => P.value ? "mixed" : `${O.value}`), Y = E(O.value), V = () => {
+      Y.value = !Y.value, Q(Y.value);
     };
-    Z(D, () => {
-      q.value = D.value;
+    te(O, () => {
+      Y.value = O.value;
     });
-    const ee = (_) => {
-      m(_.items);
-    }, ne = (_) => {
-      C(_.items);
-    }, ve = (_, S) => {
-      let x = !1;
-      const k = t.selectedValues.filter(({ value: w }) => S.value === w ? (x = !0, !1) : !0);
-      x || k.push(S), l(_, k);
-    }, De = n(() => {
+    const ae = (_) => {
+      A(_.items);
+    }, pe = (_) => {
+      g(_.items);
+    }, he = (_, x) => {
+      let C = !1;
+      const D = t.selectedValues.filter(({ value: M }) => x.value === M ? (C = !0, !1) : !0);
+      C || D.push(x), l(_, D);
+    }, Re = n(() => {
       if (!h.value)
         return t.selectedValues;
-      const _ = (w) => f.value.includes(w.value), S = (w) => !t.staticCategories && w.every((W) => _(W));
-      return t.items.flatMap(
-        (w) => w.items && !S(w.items) ? w.items : w
-      ).filter((w) => w.items ? !0 : _(w));
-    }), ke = n(() => {
-      var x, k, w, W;
-      const _ = ["automatic", "button"].includes(t.lazyLoadType), S = ((x = t.selectedValues) == null ? void 0 : x.length) > 0 && ((k = O.value) == null ? void 0 : k.length) !== ((w = y.value) == null ? void 0 : w.length);
-      return _ && t.hasMoreItems ? !!((W = t.selectedValues) != null && W.length) : S;
-    }), me = n(() => ["automatic", "button"].includes(t.lazyLoadType) ? !t.hasMoreItems : !0), H = E([]), { visibleDomOptions: ie, updateVisibleDomOptions: _e } = Pe(
-      u,
-      K(t, "items"),
-      p
-    ), xe = (_) => {
-      H.value.includes(_) ? H.value = H.value.filter((S) => S !== _) : H.value.push(_), Y(() => {
-        _e();
+      const _ = (F) => f.value.includes(F.value), x = (F) => !t.staticCategories && F.every((ce) => _(ce)), C = t.items.flatMap(
+        (F) => F.items && !x(F.items) ? F.items : F
+      ), D = C.filter((F) => F.items ? !0 : _(F)), M = /* @__PURE__ */ new Set();
+      C.forEach((F) => {
+        var ce;
+        M.add(F.value), (ce = F.items) == null || ce.forEach(($) => M.add($.value));
+      });
+      const J = t.selectedValues.filter((F) => !M.has(F.value));
+      return [...D, ...J];
+    }), Me = n(() => {
+      var C, D, M, J;
+      const _ = ["automatic", "button"].includes(t.lazyLoadType), x = ((C = t.selectedValues) == null ? void 0 : C.length) > 0 && ((D = I.value) == null ? void 0 : D.length) !== ((M = y.value) == null ? void 0 : M.length);
+      return _ && t.hasMoreItems ? !!((J = t.selectedValues) != null && J.length) : x;
+    }), fe = n(() => ["automatic", "button"].includes(t.lazyLoadType) ? !t.hasMoreItems : !0), H = E([]), { visibleDomOptions: re, updateVisibleDomOptions: Se } = Ue(
+      d,
+      q(t, "items"),
+      b
+    ), Ee = (_) => {
+      H.value.includes(_) ? H.value = H.value.filter((x) => x !== _) : H.value.push(_), W(() => {
+        Se();
       });
-    }, Ce = (_) => {
-      var S;
-      (S = ie.value[_]) == null || S.focus();
+    }, Ie = (_) => {
+      var x;
+      (x = re.value[_]) == null || x.focus();
     }, {
-      moveToNextElement: Oe,
-      moveToPreviousElement: re,
-      moveToFirstElement: ye,
-      moveToLastElement: ce,
-      preventDefault: de,
-      focusedIndex: ue,
-      setListboxFocusedIndex: ge
-    } = et(
+      moveToNextElement: Le,
+      moveToPreviousElement: be,
+      moveToFirstElement: xe,
+      moveToLastElement: ve,
+      preventDefault: me,
+      focusedIndex: _e,
+      setListboxFocusedIndex: Ce
+    } = st(
       {
-        items: ie
+        items: re
       },
-      Ce
-    ), Ee = {
-      [V.ARROW_UP]: (_) => re(_),
-      [V.ARROW_DOWN]: (_) => Oe(_),
-      [V.HOME]: ye,
-      [V.END]: ce
+      Ie
+    ), Te = {
+      [z.ARROW_UP]: (_) => be(_),
+      [z.ARROW_DOWN]: (_) => Le(_),
+      [z.HOME]: xe,
+      [z.END]: ve
     };
     e({
       /**
        * Method to set the index of the item to be focused on
        * Used for focus management to be kept in-sync with parent e.g. dropdowns
        */
-      setListboxFocusedIndex: ge
+      setListboxFocusedIndex: Ce
     });
-    const Be = {
-      [V.ARROW_UP]: de,
-      [V.ARROW_DOWN]: de
-    }, Ie = n(() => {
-      let _ = me.value ? 1 : 0;
-      const S = {};
-      return t.items.forEach((x) => {
-        let k = H.value.includes(x.value);
-        x.items ? (t.staticCategories ? k = !0 : S[x.value] = _++, k && x.items.forEach((w) => S[w.value] = _++)) : S[x.value] = _++;
-      }), S;
+    const Ne = {
+      [z.ARROW_UP]: me,
+      [z.ARROW_DOWN]: me
+    }, we = n(() => {
+      let _ = fe.value ? 1 : 0;
+      const x = {};
+      return t.items.forEach((C) => {
+        let D = H.value.includes(C.value);
+        C.items ? (t.staticCategories ? D = !0 : x[C.value] = _++, D && C.items.forEach((M) => x[M.value] = _++)) : x[C.value] = _++;
+      }), x;
     });
-    return { __sfc: !0, props: t, emit: l, t: s, n: o, slots: i, attrs: r, ariaAttributes: v, listboxRef: u, selectAllListboxItemsRef: c, selectedListboxItemsRef: g, listboxItemsRef: b, selectedItemsList: f, isMultiLevelSelect: h, flattenedItemsList: y, isTreePattern: B, computedRole: R, computedOptionRole: p, optionStates: L, enabledItems: T, visibleSelectedList: O, calculateTotalItems: A, selectAllCheckboxText: M, selectAll: m, unselectAll: C, selectAllItems: I, unselectAllItems: N, isAllSelected: D, isIndeterminate: $, toggleSelectAll: J, ariaCheckedComputed: Q, isSelectAllOn: q, handleSelectAll: F, selectAllCategory: ee, unselectAllCategory: ne, toggleCheckboxSelection: ve, selectedOptions: De, showSelectedItems: ke, showSelectAllCheckbox: me, expandedCategories: H, visibleDomOptions: ie, updateVisibleDomOptions: _e, toggleCategoryVisibility: xe, focusItem: Ce, moveToNextElement: Oe, moveToPreviousElement: re, moveToFirstElement: ye, moveToLastElement: ce, preventDefault: de, focusedIndex: ue, setListboxFocusedIndex: ge, listboxListeners: Ee, chipsSectionListeners: Be, computedItemsIndex: Ie, DecorativeCheckbox: Ve, BentoTypography: ae, BentoChip: ht, BentoListboxOption: Ae, ListboxMultiSelectOptions: yl, vBentoKeyboardNavigationDirective: we, BentoListboxEvent: d };
+    return { __sfc: !0, props: t, emit: l, t: s, n: o, slots: i, attrs: r, ariaAttributes: v, listboxRef: d, selectAllListboxItemsRef: c, selectedListboxItemsRef: m, listboxItemsRef: p, selectedItemsList: f, isMultiLevelSelect: h, flattenedItemsList: y, isTreePattern: k, computedRole: B, computedOptionRole: b, optionStates: L, enabledItems: T, visibleSelectedList: I, calculateTotalItems: w, selectAllCheckboxText: N, selectAll: A, unselectAll: g, selectAllItems: S, unselectAllItems: R, isAllSelected: O, isIndeterminate: P, toggleSelectAll: Q, ariaCheckedComputed: le, isSelectAllOn: Y, handleSelectAll: V, selectAllCategory: ae, unselectAllCategory: pe, toggleCheckboxSelection: he, selectedOptions: Re, showSelectedItems: Me, showSelectAllCheckbox: fe, expandedCategories: H, visibleDomOptions: re, updateVisibleDomOptions: Se, toggleCategoryVisibility: Ee, focusItem: Ie, moveToNextElement: Le, moveToPreviousElement: be, moveToFirstElement: xe, moveToLastElement: ve, preventDefault: me, focusedIndex: _e, setListboxFocusedIndex: Ce, listboxListeners: Te, chipsSectionListeners: Ne, computedItemsIndex: we, DecorativeCheckbox: Ge, BentoTypography: ie, BentoChip: Ct, BentoListboxOption: Be, ListboxMultiSelectOptions: Sl, vBentoKeyboardNavigationDirective: ke, BentoListboxEvent: u };
   }
 });
-var xl = function() {
+var El = function() {
   var e = this, l = e._self._c, t = e._self._setupProxy;
   return l("div", { ref: "listboxRef", staticClass: "b-listbox-multi-select" }, [t.showSelectedItems ? l("div", [l("ul", e._g({ directives: [{ name: "bento-keyboard-navigation-directive", rawName: "v-bento-keyboard-navigation-directive" }], staticClass: "b-listbox-multi-select__chips" }, t.chipsSectionListeners), e._l(t.selectedOptions, function(s) {
     return l("li", { key: s.value }, [l(t.BentoChip, { ref: "selectedListboxItemsRef", refInFor: !0, attrs: { disabled: e.isOptionDisabled(s), label: s.label, condensed: "" }, on: { click: function(o) {
@@ -1173,20 +1186,20 @@ var xl = function() {
       return [e._t(o, null, null, i)];
     } };
   })], null, !0) })], 1)]);
-}, Cl = [], Ol = /* @__PURE__ */ U(
-  Sl,
-  xl,
-  Cl,
+}, Il = [], Ll = /* @__PURE__ */ G(
+  Ol,
+  El,
+  Il,
   !1,
   null,
-  "b81d7402"
+  "81f4ab88"
 );
-const Ye = Ol.exports, at = (a, e = 300) => {
+const Je = Ll.exports, it = (a, e = 300) => {
   let l;
   return (...s) => {
     l && clearTimeout(l), l = setTimeout(() => a(...s), e);
   };
-}, El = {
+}, Tl = {
   "de-DE": {
     loading: "Laden",
     showMore: "Mehr anzeigen"
@@ -1227,18 +1240,18 @@ const Ye = Ol.exports, at = (a, e = 300) => {
     loading: "正在加载",
     showMore: "显示更多"
   }
-}, Il = 36, Ll = z({
+}, wl = 36, Al = U({
   name: "bento-listbox",
   components: {
-    BentoEmptyState: mt,
-    BentoListboxSingleSelect: Xt,
-    BentoListboxMultiSelect: Ye,
-    BentoTypography: ae,
-    BentoLoadingIndicator: vt,
-    BentoLoadingButton: St
-  },
-  directives: { BentoKeyboardNavigationDirective: we },
-  i18n: { messages: El },
+    BentoEmptyState: gt,
+    BentoListboxSingleSelect: el,
+    BentoListboxMultiSelect: Je,
+    BentoTypography: ie,
+    BentoLoadingIndicator: yt,
+    BentoLoadingButton: Ot
+  },
+  directives: { BentoKeyboardNavigationDirective: ke },
+  i18n: { messages: Tl },
   props: {
     /**
      * Defines a string value that labels an interactive element.
@@ -1294,8 +1307,8 @@ const Ye = Ol.exports, at = (a, e = 300) => {
      */
     lazyLoadType: {
       type: String,
-      default: te.NONE,
-      validator: (a) => Object.values(te).includes(a)
+      default: oe.NONE,
+      validator: (a) => Object.values(oe).includes(a)
     },
     /**
      * Indicates the listbox is loading filtered items.
@@ -1319,7 +1332,7 @@ const Ye = Ol.exports, at = (a, e = 300) => {
      *
      * If enabled, hides the "Select all" checkbox in "multiple" mode.
      */
-    searching: Ye.props.searching,
+    searching: Je.props.searching,
     /**
      * The `input` value.
      * Providing an empty string or empty array will select no options.
@@ -1339,108 +1352,108 @@ const Ye = Ol.exports, at = (a, e = 300) => {
     }
   },
   emits: [
-    d.SELECT,
-    d.SPACE,
-    d.SHOW_MORE,
-    d.ENTER,
-    d.ESCAPE,
-    d.TAB
+    u.SELECT,
+    u.SPACE,
+    u.SHOW_MORE,
+    u.ENTER,
+    u.ESCAPE,
+    u.TAB
   ],
   setup(a, { emit: e, slots: l }) {
-    const t = E([]), s = K(a, "items"), { t: o } = oe(), i = n(() => a.lazyLoadType !== te.AUTOMATIC), r = n(() => a.lazyLoadType === te.AUTOMATIC), v = () => {
-      var F;
-      return typeof (a == null ? void 0 : a.virtualScroll) == "object" && ((F = a == null ? void 0 : a.virtualScroll) != null && F.itemHeight) ? a.virtualScroll.itemHeight : Il;
-    }, u = !(a != null && a.multiple) && (a == null ? void 0 : a.virtualScroll) !== !1 && (a == null ? void 0 : a.lazyLoadType) === "none", {
+    const t = E([]), s = q(a, "items"), { t: o } = de(), i = n(() => a.lazyLoadType !== oe.AUTOMATIC), r = n(() => a.lazyLoadType === oe.AUTOMATIC), v = () => {
+      var V;
+      return typeof (a == null ? void 0 : a.virtualScroll) == "object" && ((V = a == null ? void 0 : a.virtualScroll) != null && V.itemHeight) ? a.virtualScroll.itemHeight : wl;
+    }, d = !(a != null && a.multiple) && (a == null ? void 0 : a.virtualScroll) !== !1 && (a == null ? void 0 : a.lazyLoadType) === "none", {
       containerRef: c,
-      containerProps: g,
-      onScroll: b,
+      containerProps: m,
+      onScroll: p,
       list: f,
       wrapperProps: h,
       scrollToIndex: y,
-      startIndex: B
-    } = Lt(s, {
+      startIndex: k
+    } = At(s, {
       itemHeight: v(),
       // Disable virtual scrolling if not enabled or if lazy loading is enabled or if multi-select
-      disabled: !u
-    }), R = n(() => u ? s.value.length : 0), p = n(
+      disabled: !d
+    }), B = n(() => d ? s.value.length : 0), b = n(
       () => a.componentLoading !== void 0 || i.value ? "true" : void 0
     ), L = n(
       () => i.value && a.loading || a.componentLoading ? "true" : "false"
     ), T = n(
       () => i.value || a.componentLoading !== void 0 ? "polite" : void 0
-    ), O = n(
+    ), I = n(
       () => ({
         "aria-label": a.ariaLabel,
         "aria-busy": L.value,
-        "aria-atomic": p.value,
+        "aria-atomic": b.value,
         "aria-live": T.value
       })
-    ), A = n(
+    ), w = n(
       () => a.componentLoading ? {
-        ...O.value,
+        ...I.value,
         role: "alert"
       } : {}
-    ), M = (F) => (ee) => {
-      e(F, ee);
-    }, m = () => {
-      e(d.SHOW_MORE);
-    }, C = at(() => {
-      const F = c.value;
-      if (!F)
+    ), N = (V) => (ae) => {
+      e(V, ae);
+    }, A = () => {
+      e(u.SHOW_MORE);
+    }, g = it(() => {
+      const V = c.value;
+      if (!V)
         return;
-      const ee = Math.round(F.scrollTop) + F.clientHeight >= F.scrollHeight;
-      a.hasMoreItems && ee && !a.loading && m();
-    }), I = () => {
-      r.value ? C() : b();
-    }, N = n(() => {
-      var F;
-      return ((F = a.items) == null ? void 0 : F.length) === 0;
-    }), D = n(
-      () => a.lazyLoadType === te.BUTTON && a.hasMoreItems
-    ), $ = n(
-      () => a.loading ? Ue.LOADING : Ue.START
-    ), J = n(() => a.loading ? o("loading") : o("showMore")), Q = n(() => ({
+      const ae = Math.round(V.scrollTop) + V.clientHeight >= V.scrollHeight;
+      a.hasMoreItems && ae && !a.loading && A();
+    }), S = () => {
+      r.value ? g() : p();
+    }, R = n(() => {
+      var V;
+      return ((V = a.items) == null ? void 0 : V.length) === 0;
+    }), O = n(
+      () => a.lazyLoadType === oe.BUTTON && a.hasMoreItems
+    ), P = n(
+      () => a.loading ? Ye.LOADING : Ye.START
+    ), Q = n(() => a.loading ? o("loading") : o("showMore")), le = n(() => ({
       ...a.emptyState,
       variant: "condensed"
-    })), q = {
-      [d.SELECT]: M(d.SELECT),
-      [d.SPACE]: M(d.SPACE),
-      [d.TAB]: M(d.TAB),
-      [d.ENTER]: M(d.ENTER)
+    })), Y = {
+      [u.SELECT]: N(u.SELECT),
+      [u.SPACE]: N(u.SPACE),
+      [u.TAB]: N(u.TAB),
+      [u.ENTER]: N(u.ENTER)
     };
     return {
       // Refs
       listboxRef: c,
       listboxItemRef: t,
       // a11y
-      ariaAttributes: O,
-      listboxContainerAttributes: A,
+      ariaAttributes: I,
+      listboxContainerAttributes: w,
       // Values
-      containerProps: g,
-      isSearchResultEmpty: N,
-      limitedEmptyStateProps: Q,
-      loadingButtonState: $,
+      containerProps: m,
+      isSearchResultEmpty: R,
+      limitedEmptyStateProps: le,
+      loadingButtonState: P,
       slots: l,
-      shouldDisplayShowMoreButton: D,
-      showMoreButtonText: J,
+      shouldDisplayShowMoreButton: O,
+      showMoreButtonText: Q,
       virtualisedItems: f,
       wrapperProps: h,
       // Virtual scroll
-      totalItemCount: R,
+      totalItemCount: B,
       scrollToIndex: y,
-      virtualScrollStartIndex: B,
+      virtualScrollStartIndex: k,
       // Enums
-      BentoKeyboardNavigationKeyDownEvent: V,
-      BentoListboxEvent: d,
+      BentoKeyboardNavigationKeyDownEvent: z,
+      BentoListboxEvent: u,
       // Methods
-      onListboxContainerScroll: I,
-      onOptionSelected: M,
-      emitShowMore: m,
-      listboxListeners: q
+      onListboxContainerScroll: S,
+      onOptionSelected: N,
+      emitShowMore: A,
+      listboxListeners: Y
     };
   }
 });
-var Tl = function() {
+var Dl = function() {
   var t;
   var e = this, l = e._self._c;
   return e._self._setupProxy, l("div", e._b({ directives: [{ name: "bento-keyboard-navigation-directive", rawName: "v-bento-keyboard-navigation-directive" }], ref: "listboxRef", staticClass: "b-listbox", style: (t = e.containerProps) == null ? void 0 : t.style, attrs: { id: e.id, tabindex: "-1", "data-testid": "listbox-container" }, on: { scroll: e.onListboxContainerScroll } }, "div", e.listboxContainerAttributes, !1), [l("div", e._b({}, "div", e.wrapperProps, !1), [e.componentLoading ? l("div", { staticClass: "b-listbox__loading-filtered-items" }, [l("bento-loading-indicator")], 1) : e.isSearchResultEmpty ? l("div", { staticClass: "b-listbox__empty-search-message" }, [e.emptyState ? l("bento-empty-state", e._b({}, "bento-empty-state", e.limitedEmptyStateProps, !1)) : l("bento-typography", { attrs: { el: "span" } }, [e._v(e._s(e.noResultsMessage))])], 1) : [e.multiple ? [l("bento-listbox-multi-select", e._g(e._b({ ref: "listboxItemRef", attrs: { "has-more-items": e.hasMoreItems, items: e.items, "lazy-load-type": e.lazyLoadType, "static-categories": e.staticCategories, "selected-values": e.selectedValue, searching: e.searching, "is-option-disabled": e.isOptionDisabled }, scopedSlots: e._u([e._l(e.slots, function(s, o) {
@@ -1454,58 +1467,58 @@ var Tl = function() {
   })], null, !0) }, "bento-listbox-single-select", e.ariaAttributes, !1), e.listboxListeners))], e.shouldDisplayShowMoreButton ? l("div", { staticClass: "b-listbox__lazy-load" }, [l("bento-loading-button", { attrs: { state: e.loadingButtonState, variant: "secondary" }, on: { "!click": function(s) {
     return e.emitShowMore.apply(null, arguments);
   } } }, [e._v(" " + e._s(e.showMoreButtonText) + " ")])], 1) : e.loading ? l("div", { staticClass: "b-listbox__lazy-load" }, [l("bento-loading-indicator")], 1) : e._e()]], 2)]);
-}, wl = [], Al = /* @__PURE__ */ U(
-  Ll,
-  Tl,
-  wl,
+}, kl = [], Bl = /* @__PURE__ */ G(
+  Al,
+  Dl,
+  kl,
   !1,
   null,
   "7819d7a2"
 );
-const Me = Al.exports, Ne = (a, e) => {
+const Fe = Bl.exports, Pe = (a, e) => {
   for (const l of a) {
     if (l.value === e)
       return l;
     if (l.items) {
-      const t = Ne(l.items, e);
+      const t = Pe(l.items, e);
       if (t)
         return t;
     }
   }
   return null;
-}, Dl = (a) => typeof a == "object" && a !== null && "value" in a && "label" in a, kl = (a, e, l, t) => {
+}, Rl = (a) => typeof a == "object" && a !== null && "value" in a && "label" in a, Ml = (a, e, l, t) => {
   const s = E([]), o = E(), i = (c) => {
-    l.value ? o.value = c.map(({ value: g }) => g) : o.value = c.length > 0 ? c[0].value : null;
+    l.value ? o.value = c.map(({ value: m }) => m) : o.value = c.length > 0 ? c[0].value : null;
   }, r = (c) => {
-    l.value ? o.value = c.map(({ value: g, label: b }) => ({ value: g, label: b })) : o.value = c.length > 0 ? { value: c[0].value, label: c[0].label } : null;
+    l.value ? o.value = c.map(({ value: m, label: p }) => ({ value: m, label: p })) : o.value = c.length > 0 ? { value: c[0].value, label: c[0].label } : null;
   }, v = (c) => {
     s.value = c, t != null && t.value ? r(c) : i(c);
-  }, u = () => {
+  }, d = () => {
     s.value = [], o.value = null;
   };
-  return Z(
+  return te(
     () => e.value,
     () => {
       if (!e.value && e.value !== 0) {
-        u();
+        d();
         return;
       }
-      const c = !Array.isArray(e.value), g = [...s.value];
-      u();
-      const b = (f) => {
-        if (Dl(f))
+      const c = !Array.isArray(e.value), m = [...s.value];
+      d();
+      const p = (f) => {
+        if (Rl(f))
           s.value.push(f);
         else {
-          let h = Ne(a.value, f);
-          h || (h = Ne(g, f)), h || (h = { value: f, label: f.toString() }), s.value.push(h);
+          let h = Pe(a.value, f);
+          h || (h = Pe(m, f)), h || (h = { value: f, label: f.toString() }), s.value.push(h);
         }
       };
       if (c) {
         const f = e.value;
-        b(f), t != null && t.value ? r(s.value) : i(s.value);
+        p(f), t != null && t.value ? r(s.value) : i(s.value);
         return;
       }
-      e.value.forEach(b), t != null && t.value ? r(s.value) : i(s.value);
+      e.value.forEach(p), t != null && t.value ? r(s.value) : i(s.value);
     },
     { immediate: !0 }
   ), {
@@ -1513,12 +1526,12 @@ const Me = Al.exports, Ne = (a, e) => {
     cachedSelectedListboxOptions: s,
     cachedListboxSelectedValues: o,
     // Methods
-    resetCache: u,
+    resetCache: d,
     setCachedValues: v
   };
 };
-var be = /* @__PURE__ */ ((a) => (a.DEFAULT = "DropdownInputDefault", a.SMALL = "DropdownInputSmall", a))(be || {});
-const Bl = {
+var ge = /* @__PURE__ */ ((a) => (a.DEFAULT = "DropdownInputDefault", a.SMALL = "DropdownInputSmall", a))(ge || {});
+const Nl = {
   "de-DE": {
     apply: "Anwenden",
     cancel: "Abbrechen",
@@ -1569,18 +1582,18 @@ const Bl = {
     cancel: "取消",
     noOptionsMatchThisSearch: "没有符合此搜索条件的选项"
   }
-}, Rl = (a, e, l, t) => {
-  const s = E(a.value), { t: o } = oe();
-  Z(a, () => {
+}, $l = (a, e, l, t) => {
+  const s = E(a.value), { t: o } = de();
+  te(a, () => {
     s.value = a.value;
   });
   const i = n(
     () => JSON.stringify(s.value) === JSON.stringify(a.value)
   ), r = () => {
-    t(d.SELECT, s.value), t(d.CLOSE_DROPDOWN);
+    t(u.SELECT, s.value), t(u.CLOSE_DROPDOWN);
   }, v = () => {
-    s.value = a.value, t(d.CLOSE_DROPDOWN);
-  }, u = () => {
+    s.value = a.value, t(u.CLOSE_DROPDOWN);
+  }, d = () => {
     l.value && e.value && (s.value = a.value);
   }, c = n(() => [
     {
@@ -1592,39 +1605,39 @@ const Bl = {
       title: o("cancel"),
       event: v
     }
-  ]), g = (p) => {
-    s.value = p, e.value || t(d.SELECT, p);
-  }, b = (p) => {
-    g(p), t(d.TAB);
-  }, f = (p) => {
-    g(p), t(d.ENTER);
-  }, h = (p) => {
-    g(p), t(d.SPACE);
+  ]), m = (b) => {
+    s.value = b, e.value || t(u.SELECT, b);
+  }, p = (b) => {
+    m(b), t(u.TAB);
+  }, f = (b) => {
+    m(b), t(u.ENTER);
+  }, h = (b) => {
+    m(b), t(u.SPACE);
   }, y = () => {
-    v(), t(d.ESCAPE);
-  }, B = () => {
-    t(d.SHOW_MORE);
-  }, R = {
-    [d.SELECT]: g,
-    [d.SHOW_MORE]: B,
-    [d.TAB]: b,
-    [d.SPACE]: h,
-    [d.ENTER]: f
+    v(), t(u.ESCAPE);
+  }, k = () => {
+    t(u.SHOW_MORE);
+  }, B = {
+    [u.SELECT]: m,
+    [u.SHOW_MORE]: k,
+    [u.TAB]: p,
+    [u.SPACE]: h,
+    [u.ENTER]: f
   };
   return {
     // Values
     actions: c,
     internalSelectedValue: s,
     // Methods
-    listeners: R,
+    listeners: B,
     onEscapeKey: y,
-    onOutsideDropdownClick: u
+    onOutsideDropdownClick: d
   };
-}, Ml = z({
-  i18n: { messages: Bl },
+}, Fl = U({
+  i18n: { messages: Nl },
   name: "bento-dropdown-options-container"
-}), Nl = /* @__PURE__ */ z({
-  ...Ml,
+}), Pl = /* @__PURE__ */ U({
+  ...Fl,
   props: {
     /**
      * Defines a string value that labels an interactive element.
@@ -1683,8 +1696,8 @@ const Bl = {
      */
     lazyLoadType: {
       type: String,
-      default: te.AUTOMATIC,
-      validator: (a) => Object.values(te).includes(a)
+      default: oe.AUTOMATIC,
+      validator: (a) => Object.values(oe).includes(a)
     },
     /**
      * Indicates if new options are lazy loading.
@@ -1714,7 +1727,7 @@ const Bl = {
      *
      * If enabled, hides the "Select all" checkbox in "multiple" mode.
      */
-    searching: Me.props.searching,
+    searching: Fe.props.searching,
     /**
      * If enabled, dropdown will display non-selectable, static categories
      */
@@ -1723,7 +1736,7 @@ const Bl = {
      * Reference to the DOM element or Vue component for positioning
      * the Dropdown container.
      */
-    targetElement: { type: Ge.props.targetElement.type, required: !0 },
+    targetElement: { type: We.props.targetElement.type, required: !0 },
     /**
      * Enables virtual scrolling if set to true or by providing an object with itemHeight function.
      * The itemHeight function is used to calculate the height of rendered item given it's index.
@@ -1735,14 +1748,14 @@ const Bl = {
   },
   emits: [],
   setup(a, { expose: e, emit: l }) {
-    const t = a, s = Se(), { selectedValue: o, multiple: i } = He(t), r = E(null), { t: v } = oe(), u = n(() => t.open && !t.disabled), c = n(() => v("noOptionsMatchThisSearch")), g = n(() => ({
+    const t = a, s = Oe(), { selectedValue: o, multiple: i } = Qe(t), r = E(null), { t: v } = de(), d = n(() => t.open && !t.disabled), c = n(() => v("noOptionsMatchThisSearch")), m = n(() => ({
       "b-dropdown-options-container--single": !(t != null && t.multiple)
-    })), b = n(() => ({
+    })), p = n(() => ({
       "b-dropdown-options-container__listbox--single": !(t != null && t.multiple)
-    })), { actions: f, internalSelectedValue: h, listeners: y, onEscapeKey: B, onOutsideDropdownClick: R } = Rl(o, i, u, l), p = n(() => t != null && t.multiple ? xt : Ge), L = n(() => {
-      var O;
+    })), { actions: f, internalSelectedValue: h, listeners: y, onEscapeKey: k, onOutsideDropdownClick: B } = $l(o, i, d, l), b = n(() => t != null && t.multiple ? Et : We), L = n(() => {
+      var I;
       const T = {
-        "min-width": `${(O = t == null ? void 0 : t.targetElement) == null ? void 0 : O.clientWidth}px`,
+        "min-width": `${(I = t == null ? void 0 : t.targetElement) == null ? void 0 : I.clientWidth}px`,
         "max-width": "min(500px, 95%)"
       };
       return t != null && t.multiple ? {
@@ -1751,7 +1764,7 @@ const Bl = {
         actions: f.value,
         divider: !0,
         fallbackPosition: ["top-start"],
-        id: le(`dropdown-options-${t.id}`),
+        id: ne(`dropdown-options-${t.id}`),
         open: t.open,
         position: "bottom-start",
         style: {
@@ -1764,18 +1777,18 @@ const Bl = {
         offset: [0, 8],
         position: "bottom-start",
         style: {
-          display: u.value ? "block" : "none",
+          display: d.value ? "block" : "none",
           ...T
         },
         targetElement: t.targetElement
       };
     });
     return e({
-      onOutsideDropdownClick: R
-    }), { __sfc: !0, slots: s, emit: l, props: t, selectedValue: o, multiple: i, dropdownOptionsListboxRef: r, t: v, isDropdownOpen: u, noResultsMessage: c, conditionalClasses: g, conditionalListboxClasses: b, actions: f, internalSelectedValue: h, listeners: y, onEscapeKey: B, onOutsideDropdownClick: R, popperContainerOrPopoverComponent: p, popperContainerOrPopoverProps: L, BentoListbox: Me };
+      onOutsideDropdownClick: B
+    }), { __sfc: !0, slots: s, emit: l, props: t, selectedValue: o, multiple: i, dropdownOptionsListboxRef: r, t: v, isDropdownOpen: d, noResultsMessage: c, conditionalClasses: m, conditionalListboxClasses: p, actions: f, internalSelectedValue: h, listeners: y, onEscapeKey: k, onOutsideDropdownClick: B, popperContainerOrPopoverComponent: b, popperContainerOrPopoverProps: L, BentoListbox: Fe };
   }
 });
-var $l = function() {
+var Vl = function() {
   var e = this, l = e._self._c, t = e._self._setupProxy;
   return t.isDropdownOpen ? l(t.popperContainerOrPopoverComponent, e._b({ tag: "component", staticClass: "b-dropdown-options-container", class: t.conditionalClasses }, "component", t.popperContainerOrPopoverProps, !1), [l("div", { on: { keydown: function(s) {
     return !s.type.indexOf("key") && e._k(s.keyCode, "esc", 27, s.key, ["Esc", "Escape"]) ? null : t.onEscapeKey.apply(null, arguments);
@@ -1784,17 +1797,17 @@ var $l = function() {
       return [e._t(o, null, null, i)];
     } };
   })], null, !0) }, t.listeners))], 1)]) : e._e();
-}, Fl = [], Pl = /* @__PURE__ */ U(
-  Nl,
-  $l,
-  Fl,
+}, zl = [], Ul = /* @__PURE__ */ G(
+  Pl,
+  Vl,
+  zl,
   !1,
   null,
   "9e0761e0"
 );
-const Vl = Pl.exports;
-var j = /* @__PURE__ */ ((a) => (a.DISABLED = "disabled", a.READONLY = "readonly", a.HAS_ITEMS = "has-items", a.OPENED = "opened", a.ERROR = "error", a))(j || {}), G = /* @__PURE__ */ ((a) => (a.OPEN = "dropdown-base-open", a.KEYDOWN = "dropdown-base-keydown", a.CLOSE = "dropdown-base-close", a.INPUT = "dropdown-base-input", a.CLEAR = "dropdown-base-clear", a))(G || {});
-const zl = /* @__PURE__ */ Symbol("dropdown small size injection key"), st = /* @__PURE__ */ Symbol("dropdown underline style injection key"), Ul = {
+const Gl = Ul.exports;
+var Z = /* @__PURE__ */ ((a) => (a.DISABLED = "disabled", a.READONLY = "readonly", a.HAS_ITEMS = "has-items", a.OPENED = "opened", a.ERROR = "error", a))(Z || {}), K = /* @__PURE__ */ ((a) => (a.OPEN = "dropdown-base-open", a.KEYDOWN = "dropdown-base-keydown", a.CLOSE = "dropdown-base-close", a.INPUT = "dropdown-base-input", a.CLEAR = "dropdown-base-clear", a))(K || {});
+const Kl = /* @__PURE__ */ Symbol("dropdown small size injection key"), rt = /* @__PURE__ */ Symbol("dropdown underline style injection key"), ql = {
   "de-DE": {
     clearSearch: "Suche löschen"
   },
@@ -1825,12 +1838,12 @@ const zl = /* @__PURE__ */ Symbol("dropdown small size injection key"), st = /*
   "zh-CN": {
     clearSearch: "清除搜索"
   }
-}, Gl = z({
-  i18n: { messages: Ul },
+}, Yl = U({
+  i18n: { messages: ql },
   name: "dropdown-base-textbox",
   inheritAttrs: !1
-}), Kl = /* @__PURE__ */ z({
-  ...Gl,
+}), Wl = /* @__PURE__ */ U({
+  ...Yl,
   props: {
     /**
      * The number of additional items that have been selected in the dropdown.
@@ -1916,22 +1929,22 @@ const zl = /* @__PURE__ */ Symbol("dropdown small size injection key"), st = /*
   },
   emits: [],
   setup(a, { expose: e, emit: l }) {
-    const t = a, { t: s } = oe(), o = $e(), i = Se(), r = Je(i), v = E(null), u = le("textbox"), c = Fe(st, !1), g = n(() => ({
-      [`b-dropdown-base-textbox--${j.DISABLED}`]: t.disabled,
-      [`b-dropdown-base-textbox--${j.READONLY}`]: t.readonly,
-      [`b-dropdown-base-textbox--${j.HAS_ITEMS}`]: !!t.additionalItemsSelected,
+    const t = a, { t: s } = de(), o = Ve(), i = Oe(), r = et(i), v = E(null), d = ne("textbox"), c = ze(rt, !1), m = n(() => ({
+      [`b-dropdown-base-textbox--${Z.DISABLED}`]: t.disabled,
+      [`b-dropdown-base-textbox--${Z.READONLY}`]: t.readonly,
+      [`b-dropdown-base-textbox--${Z.HAS_ITEMS}`]: !!t.additionalItemsSelected,
       "b-dropdown-base-textbox--underline": c
-    })), b = n(
-      () => R.value && o["aria-required"] ? "true" : null
+    })), p = n(
+      () => B.value && o["aria-required"] ? "true" : null
     ), f = n(() => ({
       "b-dropdown-base-textbox__input--dynamic-filtering": t.dynamicFiltering
     })), h = n(() => t.dynamicFiltering && !!t.value && t.open), y = n(
       () => {
-        var I;
+        var S;
         return {
           "aria-haspopup": "listbox",
           "aria-controls": t.ariaControls,
-          "aria-describedby": (I = o["aria-describedby"]) == null ? void 0 : I.toString(),
+          "aria-describedby": (S = o["aria-describedby"]) == null ? void 0 : S.toString(),
           "aria-expanded": t.ariaExpanded ? "true" : "false",
           "aria-labelledby": t.ariaLabelledby,
           "aria-label": t.ariaLabelledby ? null : t.ariaLabel,
@@ -1940,36 +1953,36 @@ const zl = /* @__PURE__ */ Symbol("dropdown small size injection key"), st = /*
           "aria-required": o["aria-required"]
         };
       }
-    ), B = n(
+    ), k = n(
       () => t.multiple ? t.selectedValueItem : []
-    ), R = n(() => t.dynamicFiltering && (t.open || t.alwaysComboboxIsInput)), p = n(() => t.selectedValueItem && !t.multiple), L = n(
-      () => t.multiple && t.selectedValueItem && B.value.length > 0 && t.showSlotContentInMultiple
+    ), B = n(() => t.dynamicFiltering && (t.open || t.alwaysComboboxIsInput)), b = n(() => t.selectedValueItem && !t.multiple), L = n(
+      () => t.multiple && t.selectedValueItem && k.value.length > 0 && t.showSlotContentInMultiple
     );
-    Z(
-      () => R.value,
+    te(
+      () => B.value,
       () => {
-        R.value && !t.alwaysComboboxIsInput && Y(() => {
+        B.value && !t.alwaysComboboxIsInput && W(() => {
           v.value.focus();
         });
       }
     );
     const T = async () => {
-      !t.disabled && !t.readonly && (l(G.OPEN), await Y(), v.value.focus());
-    }, O = () => {
-      t.open && (v.value.focus(), l(G.CLOSE));
-    }, A = (I) => t.open && I.target.tagName === "INPUT" ? null : t.open ? O() : T(), M = () => {
-      l(G.CLEAR), l(G.INPUT, ""), v.value.focus();
-    }, m = (I) => {
-      !t.readonly && !t.disabled ? l(G.INPUT, I.target.value) : (I.preventDefault(), I.stopPropagation());
-    }, C = () => {
+      !t.disabled && !t.readonly && (l(K.OPEN), await W(), v.value.focus());
+    }, I = () => {
+      t.open && (v.value.focus(), l(K.CLOSE));
+    }, w = (S) => t.open && S.target.tagName === "INPUT" ? null : t.open ? I() : T(), N = () => {
+      l(K.CLEAR), l(K.INPUT, ""), v.value.focus();
+    }, A = (S) => {
+      !t.readonly && !t.disabled ? l(K.INPUT, S.target.value) : (S.preventDefault(), S.stopPropagation());
+    }, g = () => {
       v.value.focus();
     };
     return e({
-      focus: C
-    }), { __sfc: !0, t: s, attrs: o, slots: i, hasSlot: r, props: t, emit: l, textbox: v, textboxId: u, isUnderlineStyle: c, conditionalClasses: g, showRequiredAttribute: b, comboboxConditionalClasses: f, isFiltering: h, ariaAttributes: y, selectedValueItems: B, shouldShowInput: R, shouldShowSingleSelectSlot: p, shouldShowMultipleSlot: L, onOpenDropdown: T, onCloseDropdown: O, onToggleDropdown: A, onClearSearch: M, onInputEvent: m, focus: C, BentoTypography: ae, DropdownBaseTextboxEvent: G, CrossCircleFillIcon: dt, CrossCircleFillSmallIcon: ut, BentoDropdownSize: be };
+      focus: g
+    }), { __sfc: !0, t: s, attrs: o, slots: i, hasSlot: r, props: t, emit: l, textbox: v, textboxId: d, isUnderlineStyle: c, conditionalClasses: m, showRequiredAttribute: p, comboboxConditionalClasses: f, isFiltering: h, ariaAttributes: y, selectedValueItems: k, shouldShowInput: B, shouldShowSingleSelectSlot: b, shouldShowMultipleSlot: L, onOpenDropdown: T, onCloseDropdown: I, onToggleDropdown: w, onClearSearch: N, onInputEvent: A, focus: g, BentoTypography: ie, DropdownBaseTextboxEvent: K, CrossCircleFillIcon: ft, CrossCircleFillSmallIcon: bt, BentoDropdownSize: ge };
   }
 });
-var ql = function() {
+var jl = function() {
   var e = this, l = e._self._c, t = e._self._setupProxy;
   return l("div", { class: e.$attrs.class, attrs: { "data-testid": "textbox-wrapper" }, on: { click: t.onToggleDropdown, keydown: function(s) {
     return !s.type.indexOf("key") && e._k(s.keyCode, "escape", void 0, s.key, void 0) ? null : t.onCloseDropdown.apply(null, arguments);
@@ -1990,19 +2003,19 @@ var ql = function() {
   }, keyup: function(s) {
     return !s.type.indexOf("key") && e._k(s.keyCode, "space", 32, s.key, [" ", "Spacebar"]) ? null : t.onClearSearch.apply(null, arguments);
   } } }, [e.size === t.BentoDropdownSize.SMALL ? l(t.CrossCircleFillSmallIcon, { attrs: { "svg-title": t.t("clearSearch") } }) : l(t.CrossCircleFillIcon, { attrs: { "svg-title": t.t("clearSearch") } })], 1) : e._e()])], 1);
-}, Yl = [], Wl = /* @__PURE__ */ U(
-  Kl,
-  ql,
-  Yl,
+}, Hl = [], Jl = /* @__PURE__ */ G(
+  Wl,
+  jl,
+  Hl,
   !1,
   null,
   "4d2fd594"
 );
-const ot = Wl.exports, jl = z({
+const ct = Jl.exports, Xl = U({
   name: "dropdown-default-textbox",
   inheritAttrs: !1
-}), Hl = /* @__PURE__ */ z({
-  ...jl,
+}), Zl = /* @__PURE__ */ U({
+  ...Xl,
   props: {
     /**
      * The number of additional items that have been selected in the dropdown.
@@ -2090,37 +2103,37 @@ const ot = Wl.exports, jl = z({
   },
   emits: ["clear", "close", "input", "keydown", "open"],
   setup(a, { expose: e, emit: l }) {
-    const t = a, s = Se(), o = E(null), i = n(() => ({
-      [`b-dropdown-default-textbox--${j.ERROR}`]: !t.disabled && !t.readonly && t.isInvalid,
-      [`b-dropdown-default-textbox--${j.DISABLED}`]: t.disabled,
-      [`b-dropdown-default-textbox--${j.READONLY}`]: t.readonly,
-      [`b-dropdown-default-textbox--${j.OPENED}`]: t.open,
+    const t = a, s = Oe(), o = E(null), i = n(() => ({
+      [`b-dropdown-default-textbox--${Z.ERROR}`]: !t.disabled && !t.readonly && t.isInvalid,
+      [`b-dropdown-default-textbox--${Z.DISABLED}`]: t.disabled,
+      [`b-dropdown-default-textbox--${Z.READONLY}`]: t.readonly,
+      [`b-dropdown-default-textbox--${Z.OPENED}`]: t.open,
       "b-dropdown-default-textbox--condensed": t.condensed
     })), r = n(() => t.open && !t.disabled && !t.readonly), v = (y) => {
       l("input", y);
-    }, u = (y) => {
+    }, d = (y) => {
       l("keydown", y);
     }, c = (y) => {
-      fe(y), l("open");
-    }, g = (y) => {
-      fe(y), l("close");
-    }, b = (y) => {
-      fe(y), l("clear");
+      ye(y), l("open");
+    }, m = (y) => {
+      ye(y), l("close");
+    }, p = (y) => {
+      ye(y), l("clear");
     }, f = {
-      [G.INPUT]: v,
-      [G.OPEN]: c,
-      [G.CLOSE]: g,
-      [G.CLEAR]: b,
-      [G.KEYDOWN]: u
+      [K.INPUT]: v,
+      [K.OPEN]: c,
+      [K.CLOSE]: m,
+      [K.CLEAR]: p,
+      [K.KEYDOWN]: d
     }, h = () => {
       o.value.focus();
     };
     return e({
       focus: h
-    }), { __sfc: !0, emit: l, slots: s, props: t, baseTextbox: o, conditionalClasses: i, isDropdownOpen: r, onInput: v, onKeyDown: u, openDropdown: c, closeDropdown: g, clearValue: b, listeners: f, focus: h, DropdownBaseTextbox: ot, ChevronDownIcon: Xe, ChevronUpIcon: Ze };
+    }), { __sfc: !0, emit: l, slots: s, props: t, baseTextbox: o, conditionalClasses: i, isDropdownOpen: r, onInput: v, onKeyDown: d, openDropdown: c, closeDropdown: m, clearValue: p, listeners: f, focus: h, DropdownBaseTextbox: ct, ChevronDownIcon: tt, ChevronUpIcon: lt };
   }
 });
-var Jl = function() {
+var Ql = function() {
   var e = this, l = e._self._c, t = e._self._setupProxy;
   return l("div", { staticClass: "b-dropdown-default-textbox", class: t.conditionalClasses, attrs: { "data-testid": "default-textbox" } }, [l(t.DropdownBaseTextbox, e._g(e._b({ ref: "baseTextbox", staticClass: "b-dropdown-default-textbox__textbox", attrs: { value: e.value }, scopedSlots: e._u([e._l(t.slots, function(s, o) {
     return { key: o, fn: function(i) {
@@ -2129,55 +2142,55 @@ var Jl = function() {
   }), { key: "icon", fn: function() {
     return [l("div", { staticClass: "b-dropdown-default-textbox__chevron" }, [l(t.ChevronUpIcon, { directives: [{ name: "show", rawName: "v-show", value: t.isDropdownOpen, expression: "isDropdownOpen" }], attrs: { "svg-title": "opened" } }), l(t.ChevronDownIcon, { directives: [{ name: "show", rawName: "v-show", value: !t.isDropdownOpen, expression: "!isDropdownOpen" }], attrs: { "svg-title": "closed" } })], 1)];
   }, proxy: !0 }], null, !0) }, "dropdown-base-textbox", { ...e.$attrs, ...e.$props }, !1), t.listeners))], 1);
-}, Xl = [], Zl = /* @__PURE__ */ U(
-  Hl,
-  Jl,
-  Xl,
+}, ea = [], ta = /* @__PURE__ */ G(
+  Zl,
+  Ql,
+  ea,
   !1,
   null,
   "bf2d43b0"
 );
-const Ql = Zl.exports;
-let We = 0;
-const ea = {
+const la = ta.exports;
+let Xe = 0;
+const aa = {
   beforeCreate() {
-    this.uuid = We.toString(), We += 1;
+    this.uuid = Xe.toString(), Xe += 1;
   }
 };
-var ta = function() {
+var sa = function() {
   var e = this, l = e._self._c;
   return l("svg", e._b({ staticClass: "ui-assets-icons-16", attrs: { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" } }, "svg", e.$attrs, !1), [e.$attrs["svg-title"] ? l("title", [e._v(e._s(e.$attrs["svg-title"]))]) : e._e(), l("path", { attrs: { fill: "#001222", d: "M5.00011 5.43922L8.00011 8.43922L11.0001 5.43922L12.0608 6.49988L8.00011 10.5605L3.93945 6.49988L5.00011 5.43922Z" } })]);
-}, la = [], aa = /* @__PURE__ */ U(
-  ea,
-  ta,
-  la,
+}, oa = [], na = /* @__PURE__ */ G(
+  aa,
+  sa,
+  oa,
   !1,
   null,
   null
 );
-const sa = aa.exports;
-let je = 0;
-const oa = {
+const ia = na.exports;
+let Ze = 0;
+const ra = {
   beforeCreate() {
-    this.uuid = je.toString(), je += 1;
+    this.uuid = Ze.toString(), Ze += 1;
   }
 };
-var na = function() {
+var ca = function() {
   var e = this, l = e._self._c;
   return l("svg", e._b({ staticClass: "ui-assets-icons-16", attrs: { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" } }, "svg", e.$attrs, !1), [e.$attrs["svg-title"] ? l("title", [e._v(e._s(e.$attrs["svg-title"]))]) : e._e(), l("path", { attrs: { fill: "#001222", d: "M10.9999 10.5608L7.9999 7.56077L4.9999 10.5608L3.93924 9.50011L7.9999 5.43945L12.0606 9.50011L10.9999 10.5608Z" } })]);
-}, ia = [], ra = /* @__PURE__ */ U(
-  oa,
-  na,
-  ia,
+}, ua = [], da = /* @__PURE__ */ G(
+  ra,
+  ca,
+  ua,
   !1,
   null,
   null
 );
-const ca = ra.exports, da = z({
+const pa = da.exports, fa = U({
   name: "dropdown-small-textbox",
   inheritAttrs: !1
-}), ua = /* @__PURE__ */ z({
-  ...da,
+}), ba = /* @__PURE__ */ U({
+  ...fa,
   props: {
     /**
      * The number of additional items that have been selected in the dropdown.
@@ -2234,49 +2247,49 @@ const ca = ra.exports, da = z({
   },
   emits: ["clear", "close", "input", "keydown", "open"],
   setup(a, { expose: e, emit: l }) {
-    const t = a, s = E(null), o = Fe(st, !1), i = n(() => ({
-      [`b-dropdown-small-textbox--${j.DISABLED}`]: t.disabled,
-      [`b-dropdown-small-textbox--${j.READONLY}`]: t.readonly,
-      [`b-dropdown-small-textbox--${j.OPENED}`]: t.open,
+    const t = a, s = E(null), o = ze(rt, !1), i = n(() => ({
+      [`b-dropdown-small-textbox--${Z.DISABLED}`]: t.disabled,
+      [`b-dropdown-small-textbox--${Z.READONLY}`]: t.readonly,
+      [`b-dropdown-small-textbox--${Z.OPENED}`]: t.open,
       "b-dropdown-small-textbox--underline": o
     })), r = n(() => t.open && !t.disabled && !t.readonly), v = (y) => {
       l("input", y);
-    }, u = (y) => {
+    }, d = (y) => {
       l("keydown", y);
     }, c = (y) => {
-      fe(y), l("open");
-    }, g = (y) => {
-      fe(y), l("close");
-    }, b = (y) => {
-      fe(y), l("clear");
+      ye(y), l("open");
+    }, m = (y) => {
+      ye(y), l("close");
+    }, p = (y) => {
+      ye(y), l("clear");
     }, f = {
-      [G.INPUT]: v,
-      [G.OPEN]: c,
-      [G.CLOSE]: g,
-      [G.CLEAR]: b,
-      [G.KEYDOWN]: u
+      [K.INPUT]: v,
+      [K.OPEN]: c,
+      [K.CLOSE]: m,
+      [K.CLEAR]: p,
+      [K.KEYDOWN]: d
     }, h = () => {
       s.value.focus();
     };
     return e({
       focus: h
-    }), { __sfc: !0, emit: l, props: t, baseTextbox: s, isUnderlineStyle: o, conditionalClasses: i, isDropdownOpen: r, onInput: v, onKeyDown: u, openDropdown: c, closeDropdown: g, clearValue: b, listeners: f, focus: h, BentoDropdownSize: be, DropdownBaseTextbox: ot, ChevronDownSmallIcon: sa, ChevronUpSmallIcon: ca };
+    }), { __sfc: !0, emit: l, props: t, baseTextbox: s, isUnderlineStyle: o, conditionalClasses: i, isDropdownOpen: r, onInput: v, onKeyDown: d, openDropdown: c, closeDropdown: m, clearValue: p, listeners: f, focus: h, BentoDropdownSize: ge, DropdownBaseTextbox: ct, ChevronDownSmallIcon: ia, ChevronUpSmallIcon: pa };
   }
 });
-var pa = function() {
+var va = function() {
   var e = this, l = e._self._c, t = e._self._setupProxy;
   return l("div", { staticClass: "b-dropdown-small-textbox", class: t.conditionalClasses }, [l(t.DropdownBaseTextbox, e._g(e._b({ ref: "baseTextbox", staticClass: "b-dropdown-small-textbox__textbox", attrs: { size: t.BentoDropdownSize.SMALL }, scopedSlots: e._u([{ key: "icon", fn: function() {
     return [l("div", { staticClass: "b-dropdown-small-textbox__chevron" }, [l(t.ChevronUpSmallIcon, { directives: [{ name: "show", rawName: "v-show", value: t.isDropdownOpen, expression: "isDropdownOpen" }], attrs: { "svg-title": "opened" } }), l(t.ChevronDownSmallIcon, { directives: [{ name: "show", rawName: "v-show", value: !t.isDropdownOpen, expression: "!isDropdownOpen" }], attrs: { "svg-title": "closed" } })], 1)];
   }, proxy: !0 }]) }, "dropdown-base-textbox", { ...e.$attrs, ...e.$props }, !1), t.listeners))], 1);
-}, fa = [], ba = /* @__PURE__ */ U(
-  ua,
-  pa,
-  fa,
+}, ma = [], _a = /* @__PURE__ */ G(
+  ba,
+  va,
+  ma,
   !1,
   null,
   "fa225e76"
 );
-const va = ba.exports, ma = (a, e) => e.value.reduce((l, t) => {
+const ya = _a.exports, ga = (a, e) => e.value.reduce((l, t) => {
   if (t.items) {
     const s = t.items.filter(
       (i) => a.value.find((r) => r.value === i.value)
@@ -2284,18 +2297,18 @@ const va = ba.exports, ma = (a, e) => e.value.reduce((l, t) => {
     s.length === t.items.length ? l.push(t.displayValue ?? t.label) : s.forEach(({ label: i, displayValue: r }) => l.push(r ?? i));
   }
   return a.value.find((s) => s.value === t.value) && l.push(t.displayValue ?? t.label), l;
-}, []).join(", "), _a = ({ items: a, placeholder: e, selectedValues: l, isMultiSelect: t }) => {
+}, []).join(", "), ha = ({ items: a, placeholder: e, selectedValues: l, isMultiSelect: t }) => {
   const s = n(
     () => t.value && a.value.find((i) => {
       var r;
       return (r = i.items) == null ? void 0 : r.length;
     })
   );
-  return n(() => l.value.length ? s.value ? ma(l, a) : l.value.map(({ label: i, displayValue: r }) => r ?? i).join(", ") : e.value || null);
-}, nt = (a) => {
+  return n(() => l.value.length ? s.value ? ga(l, a) : l.value.map(({ label: i, displayValue: r }) => r ?? i).join(", ") : e.value || null);
+}, ut = (a) => {
   var e;
   (e = a.value.$children) == null || e[0].$refs.textbox.focus();
-}, ya = ({
+}, Sa = ({
   inputContainerRef: a,
   optionsContainerRef: e,
   selectedValueIndex: l,
@@ -2305,78 +2318,78 @@ const va = ba.exports, ma = (a, e) => e.value.reduce((l, t) => {
   isMultiple: i,
   totalItemCount: r,
   isVirtualScroll: v
-}, u, c, g) => {
-  const b = async (D) => {
-    var $;
-    s.value && await Y(), ($ = o.value[D]) == null || $.focus();
-  }, f = async (D) => {
-    var J, Q;
-    s.value && await Y();
-    const $ = (J = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef) == null ? void 0 : J.$el.querySelectorAll(
+}, d, c, m) => {
+  const p = async (O) => {
+    var P;
+    s.value && await W(), (P = o.value[O]) == null || P.focus();
+  }, f = async (O) => {
+    var Q, le;
+    s.value && await W();
+    const P = (Q = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef) == null ? void 0 : Q.$el.querySelectorAll(
       "button"
     );
-    $ != null && $.length ? (Q = $[D]) == null || Q.focus() : b(D);
-  }, h = (D) => {
-    var $;
-    return ($ = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef) == null ? void 0 : $.setListboxFocusedIndex(
-      D
+    P != null && P.length ? (le = P[O]) == null || le.focus() : p(O);
+  }, h = (O) => {
+    var P;
+    return (P = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef) == null ? void 0 : P.setListboxFocusedIndex(
+      O
     );
-  }, y = async (D) => {
-    var $;
-    await (($ = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef) == null ? void 0 : $.navigateToItem(D));
-  }, B = (D) => {
-    Y(() => {
-      v ? y(D) : (h(D), b(D));
+  }, y = async (O) => {
+    var P;
+    await ((P = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef) == null ? void 0 : P.navigateToItem(O));
+  }, k = (O) => {
+    W(() => {
+      v ? y(O) : (h(O), p(O));
     });
-  }, R = () => {
-    t.value || c(), B(0);
-  }, p = () => {
-    t.value || c(), Y(() => {
-      B(v ? r.value - 1 : o.value.length - 1);
+  }, B = () => {
+    t.value || c(), k(0);
+  }, b = () => {
+    t.value || c(), W(() => {
+      k(v ? r.value - 1 : o.value.length - 1);
     });
-  }, L = ({ detail: D }) => {
-    D.preventDefault(), R();
-  }, T = ({ detail: D }) => {
-    D.preventDefault(), p();
-  }, O = () => {
-    R();
-  }, A = () => {
-    p();
-  }, M = ({ detail: D }) => {
-    D.preventDefault(), u(), t.value && (i ? f(0) : B(l.value));
-  }, m = ({ detail: D }) => {
-    D.preventDefault(), u(), t.value && (i ? f(0) : B(l.value));
-  }, C = () => {
-    t.value && g();
+  }, L = ({ detail: O }) => {
+    O.preventDefault(), B();
+  }, T = ({ detail: O }) => {
+    O.preventDefault(), b();
   }, I = () => {
-    t.value && (g(), nt(a));
+    B();
+  }, w = () => {
+    b();
+  }, N = ({ detail: O }) => {
+    O.preventDefault(), d(), t.value && (i ? f(0) : k(l.value));
+  }, A = ({ detail: O }) => {
+    O.preventDefault(), d(), t.value && (i ? f(0) : k(l.value));
+  }, g = () => {
+    t.value && m();
+  }, S = () => {
+    t.value && (m(), ut(a));
   };
   return n(() => ({
-    [V.ARROW_DOWN]: L,
-    [V.ARROW_UP]: T,
-    [V.HOME]: O,
-    [V.END]: A,
-    ...s.value ? {} : { [V.SPACE]: M },
-    [V.ENTER]: m,
-    ...s.value ? {} : { [V.TAB]: C },
-    [V.ESCAPE]: I
+    [z.ARROW_DOWN]: L,
+    [z.ARROW_UP]: T,
+    [z.HOME]: I,
+    [z.END]: w,
+    ...s.value ? {} : { [z.SPACE]: N },
+    [z.ENTER]: A,
+    ...s.value ? {} : { [z.TAB]: g },
+    [z.ESCAPE]: S
   }));
-}, ga = ({ inputContainerRef: a, isDropdownOpen: e }, l) => {
+}, xa = ({ inputContainerRef: a, isDropdownOpen: e }, l) => {
   const t = () => {
-    e.value && l(), Y(() => {
-      nt(a);
+    e.value && l(), W(() => {
+      ut(a);
     });
   };
   return {
-    [d.ENTER]: t,
-    [d.ESCAPE]: t,
-    [d.TAB]: t,
-    [d.SPACE]: t
+    [u.ENTER]: t,
+    [u.ESCAPE]: t,
+    [u.TAB]: t,
+    [u.SPACE]: t
   };
 };
-function ha(a, e, l, t, s) {
-  const o = E(a), i = E(e), r = (c, g = []) => g.flatMap((b) => b.label.toLocaleLowerCase().includes(c) ? t != null && t.value && b.items ? [...r(c, b.items)] : [b, ...r(c, b.items)] : b.items ? [...r(c, b.items)] : []), v = l !== void 0 ? at(() => l(o.value), s ?? 300) : void 0;
-  return Z(o, () => {
+function Ca(a, e, l, t, s) {
+  const o = E(a), i = E(e), r = (c, m = []) => m.flatMap((p) => p.label.toLocaleLowerCase().includes(c) ? t != null && t.value && p.items ? [...r(c, p.items)] : [p, ...r(c, p.items)] : p.items ? [...r(c, p.items)] : []), v = l !== void 0 ? it(() => l(o.value), s ?? 300) : void 0;
+  return te(o, () => {
     v !== void 0 && v();
   }), n(() => {
     if (!o.value || l !== void 0)
@@ -2385,7 +2398,7 @@ function ha(a, e, l, t, s) {
     return r(c, i.value);
   });
 }
-const Sa = {
+const Oa = {
   "de-DE": {
     all: "Alle",
     ariaLabelFallback: "Dropdown",
@@ -2436,16 +2449,16 @@ const Sa = {
     ariaLabelFallback: "下拉菜单",
     clearSearch: "清除筛选器"
   }
-}, xa = z({
-  i18n: { messages: Sa },
+}, Ea = U({
+  i18n: { messages: Oa },
   name: "b-dropdown",
   components: {
-    DropdownInputDefault: Ql,
-    DropdownInputSmall: va
+    DropdownInputDefault: la,
+    DropdownInputSmall: ya
   },
   model: { prop: "modelValue" }
-}), Ca = /* @__PURE__ */ z({
-  ...xa,
+}), Ia = /* @__PURE__ */ U({
+  ...Ea,
   props: {
     description: { default: null },
     disabled: { type: Boolean, default: !1 },
@@ -2466,7 +2479,7 @@ const Sa = {
     items: { default: () => [] },
     loading: { type: Boolean, default: !1 },
     componentLoading: { type: Boolean, default: !1 },
-    lazyLoadType: { default: Me.props.lazyLoadType.default },
+    lazyLoadType: { default: Fe.props.lazyLoadType.default },
     multiple: { type: Boolean, default: !1 },
     search: { default: void 0 },
     showSlotContentInMultiple: { type: Boolean, default: !1 },
@@ -2480,143 +2493,155 @@ const Sa = {
   },
   emits: ["input", "update:model-value", "show-more", "open"],
   setup(a, { expose: e, emit: l }) {
-    var W, Le;
-    const t = a, s = $e(), o = Se(), i = Je(o), { t: r } = oe(), { emitValue: v } = ft(l), u = E(null), c = E(null), g = E(null), b = E(!1), f = le("bento-dropdown-options-container"), h = le("dropdown-label"), y = le("dropdown-description"), B = le("dropdown-error"), { isReadOnly: R } = bt(K(t, "readonly")), p = n(() => t.modelValue ?? t.value), { cachedSelectedListboxOptions: L, cachedListboxSelectedValues: T, setCachedValues: O } = kl(
-      K(t, "items"),
-      p,
-      K(t, "multiple"),
-      K(t, "enableValueLabelPair")
-    ), A = E(s["aria-label"]), M = E(s["aria-describedby"]), { ariaLabel: m, label: C } = He(t), I = n(() => r("ariaLabelFallback")), N = pt({
+    var F, ce;
+    const t = a, s = Ve(), o = Oe(), i = et(o), { t: r } = de(), { emitValue: v } = mt(l), d = E(null), c = E(null), m = E(null), p = E(!1), f = ne("bento-dropdown-options-container"), h = ne("dropdown-label"), y = ne("dropdown-description"), k = ne("dropdown-error"), { isReadOnly: B } = _t(q(t, "readonly")), b = n(() => t.modelValue ?? t.value), { cachedSelectedListboxOptions: L, cachedListboxSelectedValues: T, setCachedValues: I } = Ml(
+      q(t, "items"),
+      b,
+      q(t, "multiple"),
+      q(t, "enableValueLabelPair")
+    ), w = E(s["aria-label"]), N = E(s["aria-describedby"]), { ariaLabel: A, label: g } = Qe(t), S = n(() => r("ariaLabelFallback")), R = vt({
       // TODO: take ariaLabel ref away when aria-label prop is removed
-      ariaLabel: m.value || A,
-      label: C,
-      defaultFallback: I
-    }), D = t.size === be.SMALL || Fe(zl, !1), $ = n(() => D ? be.SMALL : be.DEFAULT), J = n(() => ({
+      ariaLabel: A.value || w,
+      label: g,
+      defaultFallback: S
+    }), O = t.size === ge.SMALL || ze(Kl, !1), P = n(() => O ? ge.SMALL : ge.DEFAULT), Q = n(() => ({
       "b-dropdown--condensed": t.condensed
-    })), Q = n(() => ({
+    })), le = n(() => ({
       "b-dropdown__description--error": !!t.errorMessage
-    })), q = E(""), F = K(t, "items"), ee = K(t, "staticCategories"), ne = ha(
-      q,
-      F,
-      (W = t == null ? void 0 : t.search) == null ? void 0 : W.searchEvent,
-      ee,
-      (Le = t == null ? void 0 : t.search) == null ? void 0 : Le.debounceTime
-    ), ve = n(() => t.dynamicFiltering && !!q.value), De = _a({
-      items: F,
-      placeholder: K(t, "placeholder"),
-      isMultiSelect: K(t, "multiple"),
+    })), Y = E(""), V = q(t, "items"), ae = q(t, "staticCategories"), pe = Ca(
+      Y,
+      V,
+      (F = t == null ? void 0 : t.search) == null ? void 0 : F.searchEvent,
+      ae,
+      (ce = t == null ? void 0 : t.search) == null ? void 0 : ce.debounceTime
+    ), he = n(() => t.dynamicFiltering && !!Y.value), Re = ha({
+      items: V,
+      placeholder: q(t, "placeholder"),
+      isMultiSelect: q(t, "multiple"),
       selectedValues: L
-    }), ke = n(() => {
-      if (t != null && t.multiple && Array.isArray(p.value))
+    }), Me = n(() => {
+      if (t != null && t.multiple && Array.isArray(b.value))
         return t.items.filter(
-          ({ value: P }) => (t == null ? void 0 : t.value) && (t == null ? void 0 : t.value).includes(P)
+          ({ value: $ }) => (t == null ? void 0 : t.value) && (t == null ? void 0 : t.value).includes($)
         );
       if (!t.multiple && t.staticCategories) {
-        const P = t.items.find(
-          (he) => {
-            var ze;
-            return (ze = he.items) == null ? void 0 : ze.some((it) => it.value === p.value);
+        const $ = t.items.find(
+          (X) => {
+            var se;
+            return (se = X.items) == null ? void 0 : se.some((Ae) => Ae.value === b.value);
           }
         );
-        return (P ? P.items.find((he) => he.value === p.value) : t.items.find(({ value: he }) => he === p.value)) ?? null;
+        return ($ ? $.items.find((X) => X.value === b.value) : t.items.find(({ value: X }) => X === b.value)) ?? null;
       }
-      return t.items.find(({ value: P }) => P === p.value);
-    }), me = n(() => {
-      const P = ne.value.findIndex(({ value: pe }) => t.enableValueLabelPair ? p.value.value === pe : p.value === pe);
-      return P > -1 ? P : 0;
-    }), { isMultiLevelSelect: H, flattenedItemsList: ie } = lt(F), _e = n(() => H.value && !t.staticCategories), xe = n(() => _e.value ? "treeitem" : "option"), Ce = n(() => {
+      return t.items.find(({ value: $ }) => $ === b.value);
+    }), fe = n(() => {
+      const j = (H.value ? re.value : pe.value).findIndex(({ value: X }) => {
+        var se;
+        return t.enableValueLabelPair ? ((se = b.value) == null ? void 0 : se.value) === X : b.value === X;
+      });
+      return j > -1 ? j : 0;
+    }), { isMultiLevelSelect: H, flattenedItemsList: re } = nt(V), Se = n(() => H.value && !t.staticCategories), Ee = n(() => Se.value ? "treeitem" : "option"), Ie = n(() => {
       if (t.multiple) {
-        const P = Array.isArray(p.value) ? p.value.length : 0, pe = H.value ? ie.value.length : F.value.length;
-        return P === 0 ? null : !t.hasMoreItems && pe > 0 && pe === P ? r("all") : P;
+        const $ = Array.isArray(b.value) ? b.value.length : 0, j = H.value ? re.value.length : V.value.length;
+        return $ === 0 ? null : !t.hasMoreItems && j > 0 && j === $ ? r("all") : $;
       }
       return null;
-    }), Oe = n(
+    }), Le = n(
       () => [
         t.description ? y : null,
-        M.value,
-        t.errorMessage ? B : null
+        N.value,
+        t.errorMessage ? k : null
       ].filter(Boolean).join(" ") || null
-    ), re = n(() => {
-      var P;
-      return (P = g.value) == null ? void 0 : P.$el;
-    }), { visibleDomOptions: ye, updateVisibleDomOptions: ce } = Pe(
-      re,
-      ne,
-      xe
-    ), de = () => {
-      R.value || (b.value = !0, Y(() => {
-        ce();
+    ), be = n(() => {
+      var $;
+      return ($ = m.value) == null ? void 0 : $.$el;
+    }), { visibleDomOptions: xe, updateVisibleDomOptions: ve } = Ue(
+      be,
+      pe,
+      Ee
+    ), me = () => {
+      B.value || (p.value = !0, W(() => {
+        ve();
       }));
-    }, ue = () => {
-      b.value = !1;
-    }, ge = () => {
-      R.value || (b.value = !b.value, Y(() => {
-        ce();
-      }), ve.value && (q.value = ""));
-    }, Ee = () => {
-      ve.value && (q.value = ""), b.value && (b.value = !1, g.value.onOutsideDropdownClick());
-    }, Be = n(() => [
-      Ee,
+    }, _e = () => {
+      p.value = !1;
+    }, Ce = () => {
+      B.value || (p.value = !p.value, W(() => {
+        ve();
+      }), he.value && (Y.value = ""));
+    }, Te = () => {
+      he.value && (Y.value = ""), p.value && (p.value = !1, m.value.onOutsideDropdownClick());
+    }, Ne = n(() => [
+      Te,
       {
-        ignore: [re]
+        ignore: [be]
       }
-    ]), Ie = async (P) => {
-      t.multiple || (q.value = "", b.value = !1), O(P), v(T.value), t.multiple || (await Y(), w());
+    ]), we = async ($) => {
+      t.multiple || (Y.value = "", p.value = !1), I($), v(T.value), t.multiple || (await W(), M());
     }, _ = () => {
-      l(d.SHOW_MORE);
-    }, S = ya(
+      l(u.SHOW_MORE);
+    }, x = Sa(
       {
-        inputContainerRef: u,
-        optionsContainerRef: g,
-        selectedValueIndex: me,
-        isDropdownOpen: b,
-        isDynamicFltering: K(t, "dynamicFiltering"),
-        items: ye,
+        inputContainerRef: d,
+        optionsContainerRef: m,
+        selectedValueIndex: fe,
+        isDropdownOpen: p,
+        isDynamicFltering: q(t, "dynamicFiltering"),
+        items: xe,
         isMultiple: t.multiple,
-        totalItemCount: n(() => ne.value.length),
+        totalItemCount: n(() => pe.value.length),
         isVirtualScroll: !(t != null && t.multiple) && (t == null ? void 0 : t.virtualScroll) !== !1 && (t == null ? void 0 : t.lazyLoadType) === "none"
       },
-      ge,
-      de,
-      ue
-    ), x = ga(
+      Ce,
+      me,
+      _e
+    ), C = xa(
       {
-        inputContainerRef: u,
-        isDropdownOpen: b
+        inputContainerRef: d,
+        isDropdownOpen: p
       },
-      ue
-    ), k = {
-      [d.CLOSE_DROPDOWN]: ue,
-      [d.SELECT]: Ie,
-      [d.SHOW_MORE]: _,
-      ...x
+      _e
+    ), D = {
+      [u.CLOSE_DROPDOWN]: _e,
+      [u.SELECT]: we,
+      [u.SHOW_MORE]: _,
+      ...C
     };
-    t.error && Re(
+    t.error && $e(
       'BentoDropdown "error" property',
       `Use the BentoDropdown "errorMessage" property instead to indicate that there is a modifier error.
                             Having the field as "undefined" will hide/remove the error.
                             <bento-dropdown errorMessage="Error message text" />`,
       "2.0.0"
-    ), t.size && Re('BentoDropdown "size" property', "Do not use. Only 'default' size should be used.", "2.0.0"), t.value && Re(
+    ), t.size && $e('BentoDropdown "size" property', "Do not use. Only 'default' size should be used.", "2.0.0"), t.value && $e(
       'BentoDropdown "value" property',
       `The use of "value" prop in "BentoDropdown" is no longer supported.
                 Use the "v-model" or "model-value" property instead.`,
       "2.0.0"
     );
-    const w = () => {
-      u.value.focus();
+    const M = () => {
+      d.value.focus();
+    }, J = async () => {
+      var X, se, Ae, Ke, qe;
+      if (await W(), !p.value || t.multiple || !m.value)
+        return;
+      const $ = fe.value;
+      if ($ <= 0)
+        return;
+      const j = (Ke = (Ae = (se = (X = m.value) == null ? void 0 : X.$refs) == null ? void 0 : se.dropdownOptionsListboxRef) == null ? void 0 : Ae.$refs) == null ? void 0 : Ke.listboxItemRef;
+      (qe = j == null ? void 0 : j.scrollToItem) == null || qe.call(j, $);
     };
-    return Z(
-      () => b.value,
-      (P) => {
-        P && l("open");
+    return te(
+      () => p.value,
+      ($) => {
+        $ && (l("open"), J());
       }
     ), e({
-      focus: w
-    }), { __sfc: !0, attrs: s, slots: o, hasSlot: i, props: t, emit: l, t: r, emitValue: v, inputContainerRef: u, inputContainerRefWrapper: c, optionsContainerRef: g, isDropdownOpen: b, dropdownOptionsContainerId: f, labelId: h, descriptionId: y, errorId: B, isReadOnly: R, dropdownValue: p, cachedSelectedListboxOptions: L, cachedListboxSelectedValues: T, setCachedValues: O, ariaLabelAttribute: A, ariaDescribedByAttribute: M, ariaLabel: m, label: C, computedAriaLabelFallbackMessage: I, computedAriaLabel: N, isInputComponent: D, computedSize: $, conditionalClasses: J, descriptionConditionalClasses: Q, searchTerm: q, items: F, staticCategories: ee, filteredItems: ne, isSearching: ve, displayValue: De, selectedValueItem: ke, selectedValueIndex: me, isMultiLevelSelect: H, flattenedItemsList: ie, isTreePattern: _e, computedOptionRole: xe, additionalItemsSelected: Ce, ariaDescribedBy: Oe, listboxRef: re, visibleDomOptions: ye, updateVisibleDomOptions: ce, openDropdown: de, closeDropdown: ue, toggleDropdown: ge, clickOutsideDropdown: Ee, clickOutsideDropdownOptions: Be, onOptionSelected: Ie, emitShowMoreEvent: _, textboxKeyboardNavigationListeners: S, listboxKeyboardNavigationListeners: x, listboxListeners: k, focus: w, BentoDropdownOptionsContainer: Vl, BentoTypography: ae, ErrorMessage: It, FieldLabel: Et, BentoTeleport: Ct, vBentoClickOutsideDirective: Ot, vBentoKeyboardNavigationDirective: we };
+      focus: M
+    }), { __sfc: !0, attrs: s, slots: o, hasSlot: i, props: t, emit: l, t: r, emitValue: v, inputContainerRef: d, inputContainerRefWrapper: c, optionsContainerRef: m, isDropdownOpen: p, dropdownOptionsContainerId: f, labelId: h, descriptionId: y, errorId: k, isReadOnly: B, dropdownValue: b, cachedSelectedListboxOptions: L, cachedListboxSelectedValues: T, setCachedValues: I, ariaLabelAttribute: w, ariaDescribedByAttribute: N, ariaLabel: A, label: g, computedAriaLabelFallbackMessage: S, computedAriaLabel: R, isInputComponent: O, computedSize: P, conditionalClasses: Q, descriptionConditionalClasses: le, searchTerm: Y, items: V, staticCategories: ae, filteredItems: pe, isSearching: he, displayValue: Re, selectedValueItem: Me, selectedValueIndex: fe, isMultiLevelSelect: H, flattenedItemsList: re, isTreePattern: Se, computedOptionRole: Ee, additionalItemsSelected: Ie, ariaDescribedBy: Le, listboxRef: be, visibleDomOptions: xe, updateVisibleDomOptions: ve, openDropdown: me, closeDropdown: _e, toggleDropdown: Ce, clickOutsideDropdown: Te, clickOutsideDropdownOptions: Ne, onOptionSelected: we, emitShowMoreEvent: _, textboxKeyboardNavigationListeners: x, listboxKeyboardNavigationListeners: C, listboxListeners: D, focus: M, scrollToSelectedOption: J, BentoDropdownOptionsContainer: Gl, BentoTypography: ie, ErrorMessage: wt, FieldLabel: Tt, BentoTeleport: It, vBentoClickOutsideDirective: Lt, vBentoKeyboardNavigationDirective: ke };
   }
 });
-var Oa = function() {
+var La = function() {
   var s, o;
   var e = this, l = e._self._c, t = e._self._setupProxy;
   return l("div", { directives: [{ name: "bento-click-outside-directive", rawName: "v-bento-click-outside-directive", value: t.clickOutsideDropdownOptions, expression: "clickOutsideDropdownOptions" }], staticClass: "b-dropdown", class: t.conditionalClasses }, [t.label ? l(t.FieldLabel, { attrs: { id: t.labelId, condensed: e.condensed, label: t.label, "tooltip-text": e.tooltipText, optional: e.optional, required: e.required } }) : e._e(), l("div", e._g({ directives: [{ name: "bento-keyboard-navigation-directive", rawName: "v-bento-keyboard-navigation-directive" }], ref: "inputContainerRefWrapper" }, t.textboxKeyboardNavigationListeners), [l(t.computedSize, { ref: "inputContainerRef", tag: "component", attrs: { condensed: e.condensed, value: t.searchTerm, "additional-items-selected": t.additionalItemsSelected, "aria-controls": t.dropdownOptionsContainerId, ariaExpanded: t.isDropdownOpen, "aria-labelledby": t.label ? t.labelId : null, "aria-describedby": t.ariaDescribedBy, "aria-label": t.computedAriaLabel, "aria-readonly": t.isReadOnly, "aria-required": e.required, readonly: t.isReadOnly, disabled: e.disabled, "display-value": t.displayValue, "dynamic-filtering": e.dynamicFiltering, "is-invalid": !!e.errorMessage || e.error, multiple: e.multiple, open: t.isDropdownOpen, "selected-value-item": t.isInputComponent ? void 0 : t.selectedValueItem, "show-slot-content-in-multiple": e.showSlotContentInMultiple }, on: { input: function(i) {
@@ -2632,29 +2657,29 @@ var Oa = function() {
   })], null, !0) }, t.listboxListeners))], 1) : e._e(), e.errorMessage ? l(t.ErrorMessage, { staticClass: "b-dropdown__error-message", attrs: { id: t.errorId, "error-message": e.errorMessage } }) : e._e(), e.description || t.hasSlot("description") ? l(t.BentoTypography, { staticClass: "b-dropdown__description", class: t.descriptionConditionalClasses, attrs: { id: t.descriptionId, el: "span" } }, [e._t("description", function() {
     return [e._v(" " + e._s(e.description) + " ")];
   })], 2) : e._e()], 1);
-}, Ea = [], Ia = /* @__PURE__ */ U(
-  Ca,
-  Oa,
-  Ea,
+}, Ta = [], wa = /* @__PURE__ */ G(
+  Ia,
+  La,
+  Ta,
   !1,
   null,
-  "65b604ae"
+  "586fe267"
 );
-const ts = Ia.exports;
+const ss = wa.exports;
 export {
-  ts as B,
-  zt as C,
-  Ql as D,
-  d as a,
-  te as b,
-  be as c,
-  Me as d,
-  lt as e,
-  ha as f,
-  at as g,
-  zl as h,
-  st as i,
-  Ve as j,
-  kl as u
+  ss as B,
+  Kt as C,
+  la as D,
+  u as a,
+  oe as b,
+  ge as c,
+  Fe as d,
+  nt as e,
+  Ca as f,
+  it as g,
+  Kl as h,
+  rt as i,
+  Ge as j,
+  Ml as u
 };
-//# sourceMappingURL=dropdown.CIEm6MBB.js.map
+//# sourceMappingURL=dropdown.NTGSuWAw.js.map