@adyen/bento-vue2 1.91.0 → 1.92.0

package/dist/chunks/{use-cached-selected-values.BJbWbkEQ.js → use-cached-selected-values.Du8-wWR2.js}

@@ -1,118 +1,129 @@
-import { computed as n, ref as x, onMounted as Ne, onUnmounted as we, watch as X, defineComponent as G, nextTick as pe, toRef as H, useSlots as Ge, useAttrs as Pe } from "vue";
-import { B as M, a as se } from "./keyboard-navigation.DWmhelVv.js";
-import { B as j } from "./typography.C8lPlsbD.js";
+import { computed as n, ref as T, onMounted as $e, onUnmounted as Ne, watch as H, defineComponent as F, nextTick as ae, toRef as j, useSlots as Ge, useAttrs as Pe } from "vue";
+import { B as $, a as ne } from "./keyboard-navigation.DWmhelVv.js";
+import { B as q } from "./typography.C8lPlsbD.js";
 import { B as Fe } from "./loading-indicator.PxbRzshH.js";
 import { B as Ye } from "./empty-state.DMV23IZy.js";
-import { u as le } from "./index.B6WW_F-J.js";
+import { u as ie } from "./index.B6WW_F-J.js";
 import { o as ze } from "./resize.Bqks3WUm.js";
 import "./index.Cl4_42j5.js";
-import { C as J, N as Ue } from "./minus-small.DJacLGTw.js";
+import { C as Q, N as Ue } from "./minus-small.DJacLGTw.js";
 import { C as Ve } from "./checkmark-small.DVDtD4HQ.js";
 /* empty css              */
 import { n as N } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import { B as We } from "./chip.BFY_-VCz.js";
 import { C as Ke } from "./chevron-down.eYtgv5ly.js";
 import { C as je } from "./chevron-up.d8cwIlA_.js";
-import { g as me } from "./generate-uid.NJ8tVoha.js";
-import { a as qe, b as fe } from "./button-actions.Bdbu0bvt.js";
+import { g as _e } from "./generate-uid.NJ8tVoha.js";
+import { a as qe, b as pe } from "./button-actions.CXD6_9qN.js";
 import "../assets/use-cached-selected-values.css";
-const ye = (s, e, l, t) => {
+const Ce = (l, e, s, t) => {
   const o = n(
     () => {
-      var m, A;
-      return !!((m = s.value) != null && m.length) && ((A = s.value) == null ? void 0 : A.length) === e.value.length;
+      var f, L;
+      return !!((f = l.value) != null && f.length) && ((L = l.value) == null ? void 0 : L.length) === e.value.length;
     }
   ), a = n(() => {
-    var m;
-    return s.value == null || s.value.length === 0 ? !1 : ((m = s.value) == null ? void 0 : m.length) !== e.value.length;
+    var f;
+    return l.value == null || l.value.length === 0 ? !1 : ((f = l.value) == null ? void 0 : f.length) !== e.value.length;
   });
   return {
     isAllSelected: o,
     isIndeterminate: a,
-    toggleSelectAll: (m) => {
-      m ? l() : t();
+    toggleSelectAll: (f) => {
+      f ? s() : t();
     }
   };
 };
-function He(s, { disabled: e, itemHeight: l, overscan: t = 5, prefixHeight: o }) {
-  const a = x(null), r = x([]), m = x(0), A = x(0), d = x(0);
-  let b;
-  const T = n(() => {
-    const I = typeof l == "number" ? s.value.length * l : s.value.reduce((S, v, y) => S + l(y), 0), O = typeof l == "number" ? m.value * l : s.value.slice(0, m.value).reduce((S, v, y) => S + l(y), 0);
+function Xe(l, { disabled: e, itemHeight: s, overscan: t = 5, prefixHeight: o }) {
+  const a = T(null), c = T([]), f = T(0), L = T(0), m = T(0);
+  let d;
+  const A = n(() => {
+    const h = typeof s == "number" ? l.value.length * s : l.value.reduce((E, C, O) => E + s(O), 0), x = typeof s == "number" ? f.value * s : l.value.slice(0, f.value).reduce((E, C, O) => E + s(O), 0);
     return {
       style: {
-        marginTop: `${O}px`,
-        height: `${I - O}px`
+        marginTop: `${x}px`,
+        height: `${h - x}px`
       }
     };
-  }), _ = () => {
-    const I = (o == null ? void 0 : o.value) ?? 0, O = Math.max(a.value.scrollTop - I, 0);
-    if (typeof l == "number")
-      return Math.floor(O / l);
-    let S = 0, v = 0;
-    for (let y = 0; y < s.value.length; y += 1) {
-      const D = l(y);
-      if (S += D, S >= O) {
-        v = y;
+  }), k = () => {
+    const h = (o == null ? void 0 : o.value) ?? 0, x = Math.max(a.value.scrollTop - h, 0);
+    if (typeof s == "number")
+      return Math.floor(x / s);
+    let E = 0, C = 0;
+    for (let O = 0; O < l.value.length; O += 1) {
+      const D = s(O);
+      if (E += D, E >= x) {
+        C = O;
         break;
       }
     }
-    return v;
-  }, p = () => {
-    if (d.value = a.value.clientHeight, typeof l == "number")
-      return Math.ceil(d.value / l);
-    const I = m.value ?? 0;
-    let O = 0, S = 0;
-    for (let v = I; v < s.value.length; v += 1) {
-      const y = l(v);
-      if (O += y, S = v, O > d.value)
+    return C;
+  }, v = () => {
+    if (m.value = a.value.clientHeight, typeof s == "number")
+      return Math.ceil(m.value / s);
+    const h = f.value ?? 0;
+    let x = 0, E = 0;
+    for (let C = h; C < l.value.length; C += 1) {
+      const O = s(C);
+      if (x += O, E = C, x > m.value)
         break;
     }
-    return S - I;
-  }, C = () => {
+    return E - h;
+  }, p = () => {
     if (a.value) {
-      const I = p();
-      m.value = _(), A.value = Math.min(m.value + I + t, s.value.length), r.value = s.value.slice(m.value, A.value);
+      const h = v();
+      f.value = k(), L.value = Math.min(f.value + h + t, l.value.length), c.value = l.value.slice(f.value, L.value);
     }
   }, R = () => {
-    C();
+    p();
   };
-  e || (Ne(() => {
-    a.value && (d.value = a.value.clientHeight, b = ze(a.value, ({ clientHeight: I }) => {
-      d.value = I, C();
-    }), C());
-  }), we(() => {
-    b == null || b.disconnect();
-  }), X(
-    () => s.value,
+  e || ($e(() => {
+    a.value && (m.value = a.value.clientHeight, d = ze(a.value, ({ clientHeight: h }) => {
+      m.value = h, p();
+    }), p());
+  }), Ne(() => {
+    d == null || d.disconnect();
+  }), H(
+    () => l.value,
     () => {
-      C();
+      p();
     }
   ));
-  const B = {
+  const M = {
     ref: a,
     style: { overflowY: "auto" }
+  }, G = (h) => {
+    if (!a.value)
+      return;
+    const x = typeof s == "number" ? h * s : l.value.slice(0, h).reduce((_, I, B) => _ + s(B), 0), E = typeof s == "number" ? s : s(h), C = x + E, { scrollTop: O, clientHeight: D } = a.value, r = O + D;
+    C > r ? a.value.scrollTop = D > 0 ? C - D : x : x < O && (a.value.scrollTop = x), p();
   };
   return e ? {
     containerRef: a,
-    containerProps: B,
+    containerProps: M,
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     onScroll: () => {
     },
-    list: s
+    list: l,
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    scrollToIndex: () => {
+    },
+    startIndex: T(0)
   } : {
     containerRef: a,
-    containerProps: B,
+    containerProps: M,
     onScroll: R,
-    list: r,
-    wrapperProps: T
+    list: c,
+    wrapperProps: A,
+    scrollToIndex: G,
+    startIndex: f
   };
 }
-var c = /* @__PURE__ */ ((s) => (s.SELECT = "select", s.SHOW_MORE = "show-more", s.ESCAPE = "escape-pressed", s.CLICK = "click", s.ENTER = "enter-pressed", s.SPACE = "space-pressed", s.TAB = "tab-pressed", s.CLOSE_DROPDOWN = "close-dropdown", s))(c || {}), K = /* @__PURE__ */ ((s) => (s.AUTOMATIC = "automatic", s.BUTTON = "button", s.NONE = "none", s))(K || {});
-const Xe = G({
+var u = /* @__PURE__ */ ((l) => (l.SELECT = "select", l.SHOW_MORE = "show-more", l.ESCAPE = "escape-pressed", l.CLICK = "click", l.ENTER = "enter-pressed", l.SPACE = "space-pressed", l.TAB = "tab-pressed", l.CLOSE_DROPDOWN = "close-dropdown", l))(u || {}), K = /* @__PURE__ */ ((l) => (l.AUTOMATIC = "automatic", l.BUTTON = "button", l.NONE = "none", l))(K || {});
+const He = F({
   name: "bento-listbox-static-category",
   components: {
-    BentoTypography: j
+    BentoTypography: q
   },
   props: {
     /**
@@ -125,17 +136,17 @@ const Xe = G({
   }
 });
 var Je = 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);
+  var e = this, s = e._self._c;
+  return e._self._setupProxy, s("div", { staticClass: "b-listbox-single-select-category", attrs: { role: "group", "aria-label": e.categoryLabel } }, [s("bento-typography", { staticClass: "b-listbox-single-select-category__label-text", attrs: { variant: "caption", el: "span", "aria-hidden": "true" } }, [e._v(" " + e._s(e.categoryLabel) + " ")]), s("div", [e._t("default")], 2)], 1);
 }, Ze = [], Qe = /* @__PURE__ */ N(
-  Xe,
+  He,
   Je,
   Ze,
   !1,
   null,
   "bfbc1649"
 );
-const et = Qe.exports, tt = G({
+const et = Qe.exports, tt = F({
   name: "bento-listbox-option",
   props: {
     /**
@@ -147,55 +158,55 @@ const et = Qe.exports, tt = G({
      */
     selected: { type: Boolean, default: !1 }
   },
-  emits: [c.CLICK, c.ENTER, c.SPACE, c.TAB],
-  setup(s, { emit: e }) {
-    const l = n(() => ({
-      "b-listbox-option--disabled": s.disabled,
-      "b-listbox-option--selected": s.selected
+  emits: [u.CLICK, u.ENTER, u.SPACE, u.TAB],
+  setup(l, { emit: e }) {
+    const s = n(() => ({
+      "b-listbox-option--disabled": l.disabled,
+      "b-listbox-option--selected": l.selected
     }));
     return {
       // Enums
-      BentoKeyboardNavigationKeyDownEvent: M,
-      BentoListboxEvent: c,
+      BentoKeyboardNavigationKeyDownEvent: $,
+      BentoListboxEvent: u,
       // Values
-      conditionalClasses: l,
+      conditionalClasses: s,
       // Events
       onClick: (a) => {
-        e(c.CLICK, a);
+        e(u.CLICK, a);
       },
-      onOptionSelected: (a, r) => {
-        e(a, r);
+      onOptionSelected: (a, c) => {
+        e(a, c);
       }
     };
   }
 });
-var st = 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) {
+var lt = function() {
+  var e = this, s = e._self._c;
+  return e._self._setupProxy, s("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);
   }, function(t) {
     return !t.type.indexOf("key") && e._k(t.keyCode, "space", 32, t.key, [" ", "Spacebar"]) ? null : e.onOptionSelected(e.BentoListboxEvent.SPACE, t);
   }, 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);
-}, lt = [], ot = /* @__PURE__ */ N(
+}, st = [], ot = /* @__PURE__ */ N(
   tt,
-  st,
   lt,
+  st,
   !1,
   null,
   "c345b6c0"
 );
-const Z = ot.exports;
-let ve = 0;
+const ee = ot.exports;
+let ye = 0;
 const at = {
   beforeCreate() {
-    this.uuid = ve.toString(), ve += 1;
+    this.uuid = ye.toString(), ye += 1;
   }
 };
 var nt = 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" } })]);
+  var e = this, s = e._self._c;
+  return s("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"] ? s("title", [e._v(e._s(e.$attrs["svg-title"]))]) : e._e(), s("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" } })]);
 }, it = [], ct = /* @__PURE__ */ N(
   at,
   nt,
@@ -204,11 +215,11 @@ var nt = function() {
   null,
   null
 );
-const rt = ct.exports, ut = G({
+const rt = ct.exports, ut = F({
   name: "bento-listbox-single-select-option",
   components: {
-    BentoListboxOption: Z,
-    BentoTypography: j,
+    BentoListboxOption: ee,
+    BentoTypography: q,
     CheckmarkIcon: rt
   },
   props: {
@@ -229,26 +240,26 @@ const rt = ct.exports, ut = G({
      */
     selected: { type: Boolean, default: !1 }
   },
-  emits: [c.ENTER, c.SELECT, c.SPACE, c.TAB],
-  setup(s, { emit: e }) {
-    const l = (r) => {
-      s.disabled || e(r, s.option);
-    }, t = n(() => s.disabled ? !0 : null), o = n(() => s.selected ? !0 : null), a = n(() => s.disabled ? -1 : 0);
+  emits: [u.ENTER, u.SELECT, u.SPACE, u.TAB],
+  setup(l, { emit: e }) {
+    const s = (c) => {
+      l.disabled || e(c, l.option);
+    }, t = n(() => l.disabled ? !0 : null), o = n(() => l.selected ? !0 : null), a = n(() => l.disabled ? -1 : 0);
     return {
       // Values
       ariaDisabled: t,
       ariaSelected: o,
       tabIndex: a,
       // Enums
-      BentoListboxEvent: c,
+      BentoListboxEvent: u,
       // Events
-      onOptionSelected: l
+      onOptionSelected: s
     };
   }
 });
 var dt = 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) {
+  var e = this, s = e._self._c;
+  return e._self._setupProxy, s("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);
   }, "enter-pressed": function(t) {
     return e.onOptionSelected(e.BentoListboxEvent.ENTER);
@@ -257,9 +268,9 @@ var dt = function() {
   }, "tab-pressed": function(t) {
     return e.onOptionSelected(e.BentoListboxEvent.TAB);
   } } }, [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);
-}, bt = [], mt = /* @__PURE__ */ N(
+    return [s("span", { staticClass: "b-listbox-single-select-option__text" }, [s("bento-typography", { attrs: { el: "span" } }, [e._v(e._s(e.option.label))]), e.option.description ? s("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), s("span", { staticClass: "b-listbox-single-select-option__check-icon" }, [s("checkmark-icon", { directives: [{ name: "show", rawName: "v-show", value: e.selected, expression: "selected" }], attrs: { "svg-title": "selected" } })], 1)], 2);
+}, bt = [], ft = /* @__PURE__ */ N(
   ut,
   dt,
   bt,
@@ -267,64 +278,64 @@ var dt = function() {
   null,
   "bb14d75a"
 );
-const ft = mt.exports, he = ({ items: s }, e) => {
-  const l = n(() => s.value.length - 1), t = x(0), o = (_) => {
-    switch (_) {
+const mt = ft.exports, xe = ({ items: l, totalItemCount: e }, s) => {
+  const t = n(() => e != null && e.value ? e.value - 1 : l.value.length - 1), o = T(0), a = (v) => {
+    switch (v) {
       case "increase":
-        t.value += 1;
+        o.value += 1;
         break;
       case "decrease":
-        t.value -= 1;
+        o.value -= 1;
         break;
     }
-  }, a = ({ edgeCaseItem: _ }, p) => {
-    t.value !== _ && (o(p), e(t.value));
-  }, r = (_) => {
-    T(_), a(
+  }, c = ({ edgeCaseItem: v }, p) => {
+    o.value !== v && (a(p), s(o.value));
+  }, f = (v) => {
+    k(v), c(
       {
-        edgeCaseItem: l.value
+        edgeCaseItem: t.value
       },
       "increase"
       /* INCREASE */
     );
-  }, m = (_) => {
-    T(_), a(
+  }, L = (v) => {
+    k(v), c(
       {
         edgeCaseItem: 0
       },
       "decrease"
       /* DECREASE */
     );
-  }, A = () => {
-    t.value = 0, e(t.value);
+  }, m = () => {
+    o.value = 0, s(o.value);
   }, d = () => {
-    t.value = l.value, e(t.value);
-  }, b = (_) => {
-    t.value = _;
-  }, T = (_) => {
+    o.value = t.value, s(o.value);
+  }, A = (v) => {
+    o.value = v;
+  }, k = (v) => {
     var p;
-    (p = _ == null ? void 0 : _.detail) == null || p.preventDefault();
+    (p = v == null ? void 0 : v.detail) == null || p.preventDefault();
   };
   return {
-    moveToFirstElement: A,
+    moveToFirstElement: m,
     moveToLastElement: d,
-    moveToNextElement: r,
-    moveToPreviousElement: m,
-    setListboxFocusedIndex: b,
-    preventDefault: T,
-    focusedIndex: t
+    moveToNextElement: f,
+    moveToPreviousElement: L,
+    setListboxFocusedIndex: A,
+    preventDefault: k,
+    focusedIndex: o
   };
-}, Se = (s, e, l = x("option"), t = !0) => {
-  const o = x([]), a = async () => {
-    if (!s.value || s.value.nodeType === Node.COMMENT_NODE)
+}, Oe = (l, e, s = T("option"), t = !0) => {
+  const o = T([]), a = async () => {
+    if (!l.value || l.value.nodeType === Node.COMMENT_NODE)
       return;
-    const r = Array.from(s.value.querySelectorAll(`[role="${l.value}"]`));
-    o.value = t ? r.filter((m) => m.checkVisibility()) : r;
+    const c = Array.from(l.value.querySelectorAll(`[role="${s.value}"]`));
+    o.value = t ? c.filter((f) => f.checkVisibility()) : c;
   };
-  return X(
+  return H(
     e,
     () => {
-      pe(() => {
+      ae(() => {
         a();
       });
     },
@@ -333,13 +344,13 @@ const ft = mt.exports, he = ({ items: s }, e) => {
     visibleDomOptions: o,
     updateVisibleDomOptions: a
   };
-}, vt = G({
+}, vt = F({
   name: "bento-listbox-single-select",
   components: {
     BentoListboxSingleSelectCategory: et,
-    BentoListboxSingleSelectOption: ft
+    BentoListboxSingleSelectOption: mt
   },
-  directives: { BentoKeyboardNavigationDirective: se },
+  directives: { BentoKeyboardNavigationDirective: ne },
   inheritAttrs: !1,
   props: {
     /**
@@ -378,94 +389,142 @@ const ft = mt.exports, he = ({ items: s }, e) => {
     /**
      * If enabled, dropdown will display non-selectable, static categories
      */
-    staticCategories: { type: Boolean, default: !1 }
+    staticCategories: { type: Boolean, default: !1 },
+    /**
+     * Total number of items in the full list (used for virtual scroll keyboard navigation).
+     * When greater than 0, virtual scroll keyboard navigation is enabled.
+     */
+    totalItemCount: { type: Number, default: 0 },
+    /**
+     * Function to scroll the virtual list container to a given item index.
+     */
+    scrollToIndex: { type: Function, default: void 0 },
+    /**
+     * The start index of the currently rendered virtual scroll slice.
+     */
+    virtualScrollStartIndex: { type: Number, default: 0 }
   },
-  emits: [c.SELECT, c.ENTER, c.SPACE, c.TAB],
-  setup(s, { emit: e, expose: l, slots: t, attrs: o }) {
-    const a = x(null), r = x([]), m = n(() => {
-      var v;
-      return !!((v = s.selectedValue) != null && v.length) && s.selectedValue.at(0);
-    }), A = n(
+  emits: [u.SELECT, u.ENTER, u.SPACE, u.TAB],
+  setup(l, { emit: e, expose: s, slots: t, attrs: o }) {
+    const a = T(null), c = T([]), f = n(() => {
+      var r;
+      return !!((r = l.selectedValue) != null && r.length) && l.selectedValue.at(0);
+    }), L = n(
       () => {
-        var v, y, D, P;
+        var r, _, I, B;
         return {
-          "aria-label": (v = o["aria-label"]) == null ? void 0 : v.toString(),
-          "aria-busy": (y = o["aria-busy"]) == null ? void 0 : y.toString(),
-          "aria-atomic": (D = o["aria-atomic"]) == null ? void 0 : D.toString(),
-          "aria-live": (P = o["aria-live"]) == null ? void 0 : P.toString()
+          "aria-label": (r = o["aria-label"]) == null ? void 0 : r.toString(),
+          "aria-busy": (_ = o["aria-busy"]) == null ? void 0 : _.toString(),
+          "aria-atomic": (I = o["aria-atomic"]) == null ? void 0 : I.toString(),
+          "aria-live": (B = o["aria-live"]) == null ? void 0 : B.toString()
         };
       }
-    ), d = n(() => !!s.items.some(({ items: v }) => !!v)), b = (v) => (y) => {
-      e(v, [y]);
-    }, { visibleDomOptions: T } = Se(a, H(s, "items"), x("option"), !1), _ = (v) => {
-      var y;
-      (y = T.value[v]) == null || y.focus();
+    ), m = n(() => !!l.items.some(({ items: r }) => !!r)), d = (r) => (_) => {
+      e(r, [_]);
+    }, { visibleDomOptions: A, updateVisibleDomOptions: k } = Oe(
+      a,
+      j(l, "items"),
+      T("option"),
+      !1
+    ), v = n(() => l.totalItemCount > 0), p = (r) => {
+      if (!v.value)
+        return;
+      const _ = r.target;
+      if (_ === a.value || (_ == null ? void 0 : _.getAttribute("role")) !== "option")
+        return;
+      const I = A.value.indexOf(_);
+      if (I !== -1) {
+        const B = I + l.virtualScrollStartIndex;
+        C(B);
+      }
+    }, R = async (r) => {
+      var _, I;
+      if (v.value && l.scrollToIndex) {
+        l.scrollToIndex(r), await ae(), await k();
+        const B = r - l.virtualScrollStartIndex;
+        (_ = A.value[B]) == null || _.focus();
+      } else
+        (I = A.value[r]) == null || I.focus();
+    }, M = async (r) => {
+      C(r), await R(r);
     }, {
-      moveToNextElement: p,
-      moveToPreviousElement: C,
-      moveToFirstElement: R,
-      moveToLastElement: B,
-      setListboxFocusedIndex: I
-    } = he(
+      moveToNextElement: G,
+      moveToPreviousElement: h,
+      moveToFirstElement: x,
+      moveToLastElement: E,
+      setListboxFocusedIndex: C
+    } = xe(
       {
-        items: T
+        items: A,
+        totalItemCount: j(l, "totalItemCount")
       },
-      _
+      R
     ), O = {
-      [M.ARROW_UP]: C,
-      [M.ARROW_DOWN]: p,
-      [M.HOME]: R,
-      [M.END]: B
-    }, S = {
-      [c.SELECT]: b(c.SELECT),
-      [c.SPACE]: b(c.SPACE),
-      [c.TAB]: b(c.TAB),
-      [c.ENTER]: b(c.ENTER)
+      [$.ARROW_UP]: h,
+      [$.ARROW_DOWN]: G,
+      [$.HOME]: x,
+      [$.END]: E
+    }, D = {
+      [u.SELECT]: d(u.SELECT),
+      [u.SPACE]: d(u.SPACE),
+      [u.TAB]: d(u.TAB),
+      [u.ENTER]: d(u.ENTER)
     };
-    return l({
+    return s({
       /**
        * Reference for a single listbox item.
        * Required for keyboard navigation in dropdown as $children is removed in vue@3
        */
-      listboxItemRef: r,
+      listboxItemRef: c,
       /**
        * 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: I
+      setListboxFocusedIndex: C,
+      /**
+       * Navigates to an item by global index, handling virtual scroll if enabled.
+       * Scrolls the virtual list and focuses the item.
+       */
+      navigateToItem: M
     }), {
       // Enums
-      BentoListboxEvent: c,
+      BentoListboxEvent: u,
       // Values
       listboxRef: a,
-      listboxItemRef: r,
-      selectedItem: m,
+      listboxItemRef: c,
+      selectedItem: f,
       slots: t,
-      ariaAttributes: A,
+      ariaAttributes: L,
       // Computed
-      hasCategories: d,
+      hasCategories: m,
       // Methods
-      onOptionSelected: b,
+      onOptionSelected: d,
       // Keyboard navigation
       listboxListeners: O,
-      listboxOptionListeners: S
+      listboxOptionListeners: D,
+      // Virtual scroll focus management
+      handleVirtualScrollingFocus: p
     };
   }
 });
 var gt = 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" } }, "div", e.ariaAttributes, !1), e.listboxListeners), [e.hasCategories && e.staticCategories ? e._l(e.items, function(t) {
-    return l("bento-listbox-single-select-category", { key: t.value, attrs: { "category-label": t.label } }, e._l(t.items, function(o) {
-      return l("bento-listbox-single-select-option", e._g({ key: o.value, ref: "listboxItemRef", refInFor: !0, attrs: { role: "option", option: o, disabled: e.isOptionDisabled ? e.isOptionDisabled(o) : null, selected: o.value === e.selectedItem.value }, scopedSlots: e._u([e._l(e.slots, function(a, r) {
-        return { key: r, fn: function(m) {
-          return [e._t(r, null, null, m)];
+  var e = this, s = e._self._c;
+  return e._self._setupProxy, s("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 ? s("bento-listbox-single-select-category", { key: `category-${t.value}`, attrs: { "category-label": t.label } }, e._l(t.items, function(o) {
+      return s("bento-listbox-single-select-option", e._g({ key: o.value, ref: "listboxItemRef", refInFor: !0, attrs: { role: "option", option: o, disabled: e.isOptionDisabled ? e.isOptionDisabled(o) : null, selected: o.value === e.selectedItem.value }, scopedSlots: e._u([e._l(e.slots, function(a, c) {
+        return { key: c, fn: function(f) {
+          return [e._t(c, null, null, f)];
         } };
       })], null, !0) }, e.listboxOptionListeners));
-    }), 1);
-  }) : e._l(e.items, function(t) {
-    return l("bento-listbox-single-select-option", e._g({ key: t.value, ref: "listboxItemRef", refInFor: !0, attrs: { role: "option", option: t, disabled: e.isOptionDisabled ? e.isOptionDisabled(t) : null, selected: t.value === e.selectedItem.value }, scopedSlots: e._u([e._l(e.slots, function(o, a) {
-      return { key: a, fn: function(r) {
-        return [e._t(a, null, null, r)];
+    }), 1) : s("bento-listbox-single-select-option", e._g({ key: `option-${t.value}`, ref: "listboxItemRef", refInFor: !0, attrs: { role: "option", option: t, disabled: e.isOptionDisabled ? e.isOptionDisabled(t) : null, selected: t.value === e.selectedItem.value }, scopedSlots: e._u([e._l(e.slots, function(o, a) {
+      return { key: a, fn: function(c) {
+        return [e._t(a, null, null, c)];
+      } };
+    })], null, !0) }, e.listboxOptionListeners))];
+  })] : e._l(e.items, function(t) {
+    return s("bento-listbox-single-select-option", e._g({ key: t.value, ref: "listboxItemRef", refInFor: !0, attrs: { role: "option", option: t, disabled: e.isOptionDisabled ? e.isOptionDisabled(t) : null, selected: t.value === e.selectedItem.value }, scopedSlots: e._u([e._l(e.slots, function(o, a) {
+      return { key: a, fn: function(c) {
+        return [e._t(a, null, null, c)];
       } };
     })], null, !0) }, e.listboxOptionListeners));
   })], 2);
@@ -478,15 +537,15 @@ var gt = function() {
   null
 );
 const yt = pt.exports;
-let ge = 0;
+let he = 0;
 const ht = {
   beforeCreate() {
-    this.uuid = ge.toString(), ge += 1;
+    this.uuid = he.toString(), he += 1;
   }
 };
 var St = 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" } })]);
+  var e = this, s = e._self._c;
+  return s("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"] ? s("title", [e._v(e._s(e.$attrs["svg-title"]))]) : e._e(), s("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" } }), s("path", { attrs: { fill: "#001222", d: "M13.9307 5.75L8.87012 10.8105L7.80957 9.75L12.8701 4.68945L13.9307 5.75Z" } })]);
 }, Ct = [], xt = /* @__PURE__ */ N(
   ht,
   St,
@@ -495,7 +554,7 @@ var St = function() {
   null,
   null
 );
-const Ot = xt.exports, Et = {}, Tt = /* @__PURE__ */ G({
+const Ot = xt.exports, Et = {}, Tt = /* @__PURE__ */ F({
   ...Et,
   __name: "decorative-checkbox",
   props: {
@@ -504,20 +563,20 @@ const Ot = xt.exports, Et = {}, Tt = /* @__PURE__ */ G({
     checked: { type: Boolean, default: !1 },
     allSelected: { type: Boolean, default: !1 }
   },
-  setup(s) {
-    const e = s, l = n(() => ({
-      [`b-checkbox-input--${J.DISABLED}`]: e.disabled
+  setup(l) {
+    const e = l, s = n(() => ({
+      [`b-checkbox-input--${Q.DISABLED}`]: e.disabled
     })), t = n(() => ({
-      [`b-checkbox-input__outline--${J.UNCHECKED}`]: !e.checked && !e.indeterminate && !e.allSelected,
-      [`b-checkbox-input__outline--${J.CHECKED}`]: (e.checked || e.allSelected) && !e.indeterminate,
-      [`b-checkbox-input__outline--${J.INDETERMINATE}`]: e.indeterminate
+      [`b-checkbox-input__outline--${Q.UNCHECKED}`]: !e.checked && !e.indeterminate && !e.allSelected,
+      [`b-checkbox-input__outline--${Q.CHECKED}`]: (e.checked || e.allSelected) && !e.indeterminate,
+      [`b-checkbox-input__outline--${Q.INDETERMINATE}`]: e.indeterminate
     }));
-    return { __sfc: !0, props: e, conditionalClasses: l, outlineConditionalClasses: t, CheckmarkSmallIcon: Ve, MinusSmallIcon: Ue, DoubleCheckmarkSmallIcon: Ot };
+    return { __sfc: !0, props: e, conditionalClasses: s, outlineConditionalClasses: t, CheckmarkSmallIcon: Ve, MinusSmallIcon: Ue, DoubleCheckmarkSmallIcon: Ot };
   }
 });
 var It = 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);
+  var e = this, s = e._self._c, t = e._self._setupProxy;
+  return s("div", { staticClass: "b-checkbox-input", class: t.conditionalClasses, attrs: { role: "presentation" } }, [e.indeterminate ? s(t.MinusSmallIcon, { staticClass: "b-checkbox-input__icon", attrs: { "svg-title": "", "aria-hidden": "true" } }) : e.allSelected ? s(t.DoubleCheckmarkSmallIcon, { staticClass: "b-checkbox-input__icon", attrs: { "svg-title": "", "aria-hidden": "true", "data-testid": "decorative-checkbox-double-checkmark-icon" } }) : e.checked ? s(t.CheckmarkSmallIcon, { staticClass: "b-checkbox-input__icon", attrs: { "svg-title": "", "aria-hidden": "true" } }) : e._e(), s("div", { staticClass: "b-checkbox-input__outline", class: t.outlineConditionalClasses })], 1);
 }, At = [], Lt = /* @__PURE__ */ N(
   Tt,
   It,
@@ -526,8 +585,8 @@ var It = function() {
   null,
   "b87bbaf9"
 );
-const oe = Lt.exports;
-var Ce = /* @__PURE__ */ ((s) => (s.DISABLED = "disabled", s.STATIC_CATEGORY = "static-category", s))(Ce || {}), U = /* @__PURE__ */ ((s) => (s.SELECT_CATEGORY = "select-category", s.UNSELECT_CATEGORY = "unselect-category", s.TOGGLE_CATEGORY_VISIBILITY = "toggle-category-visibility", s))(U || {});
+const ce = Lt.exports;
+var Ee = /* @__PURE__ */ ((l) => (l.DISABLED = "disabled", l.STATIC_CATEGORY = "static-category", l))(Ee || {}), V = /* @__PURE__ */ ((l) => (l.SELECT_CATEGORY = "select-category", l.UNSELECT_CATEGORY = "unselect-category", l.TOGGLE_CATEGORY_VISIBILITY = "toggle-category-visibility", l))(V || {});
 const kt = {
   "de-DE": {
     categoryClosed: "{category} geschlossen",
@@ -569,15 +628,15 @@ const kt = {
     categoryClosed: "{category} 已关闭",
     categoryOpened: "{category} 已打开"
   }
-}, Rt = G({
+}, Dt = F({
   i18n: { messages: kt },
   name: "bento-listbox-multi-select-category",
   components: {
-    BentoTypography: j,
-    BentoListboxOption: Z,
+    BentoTypography: q,
+    BentoListboxOption: ee,
     ChevronDownIcon: Ke,
     ChevronUpIcon: je,
-    DecorativeCheckbox: oe
+    DecorativeCheckbox: ce
   },
   props: {
     /**
@@ -623,102 +682,102 @@ const kt = {
     tabindex: { type: Number, default: -1 }
   },
   emits: [
-    U.SELECT_CATEGORY,
-    U.UNSELECT_CATEGORY,
-    U.TOGGLE_CATEGORY_VISIBILITY
+    V.SELECT_CATEGORY,
+    V.UNSELECT_CATEGORY,
+    V.TOGGLE_CATEGORY_VISIBILITY
   ],
-  setup(s, { emit: e }) {
-    const l = x(!1), { t } = le(), o = me("category-group"), a = me("category-name"), r = (E) => s.isOptionDisabled ? s.isOptionDisabled(E) : !1, m = n(
-      () => s.category.items.every((E) => r(E))
-    ), A = H(s, "staticCategories"), d = n(() => l.value || s.staticCategories), b = n(() => ({
-      [`b-listbox-multi-select-category--${Ce.DISABLED}`]: m.value
-    })), T = (E, L) => {
-      E.preventDefault(), l.value = L !== void 0 ? L : !l.value, e(U.TOGGLE_CATEGORY_VISIBILITY, s.category.value);
-    }, _ = (E) => {
-      var Y;
-      const L = r(E), $ = ((Y = s.selectedItemsList) == null ? void 0 : Y.includes(E.value)) || !1;
-      return { isDisabled: L, isPreSelected: $ };
-    }, p = n(
-      () => s.category.items.filter((E) => {
-        const { isDisabled: L, isPreSelected: $ } = _(E);
-        return L && $ || !L;
+  setup(l, { emit: e }) {
+    const s = T(!1), { t } = ie(), o = _e("category-group"), a = _e("category-name"), c = (r) => l.isOptionDisabled ? l.isOptionDisabled(r) : !1, f = n(
+      () => l.category.items.every((r) => c(r))
+    ), L = j(l, "staticCategories"), m = n(() => s.value || l.staticCategories), d = n(() => ({
+      [`b-listbox-multi-select-category--${Ee.DISABLED}`]: f.value
+    })), A = (r, _) => {
+      r.preventDefault(), s.value = _ !== void 0 ? _ : !s.value, e(V.TOGGLE_CATEGORY_VISIBILITY, l.category.value);
+    }, k = (r) => {
+      var B;
+      const _ = c(r), I = ((B = l.selectedItemsList) == null ? void 0 : B.includes(r.value)) || !1;
+      return { isDisabled: _, isPreSelected: I };
+    }, v = n(
+      () => l.category.items.filter((r) => {
+        const { isDisabled: _, isPreSelected: I } = k(r);
+        return _ && I || !_;
       })
-    ), C = n(
+    ), p = n(
       () => {
-        var E;
-        return (E = p.value) == null ? void 0 : E.filter(
-          ({ value: L }) => {
-            var $;
-            return ($ = s.selectedItemsList) == null ? void 0 : $.includes(L);
+        var r;
+        return (r = v.value) == null ? void 0 : r.filter(
+          ({ value: _ }) => {
+            var I;
+            return (I = l.selectedItemsList) == null ? void 0 : I.includes(_);
           }
         );
       }
     ), R = n(() => {
-      const E = l.value ? "categoryOpened" : "categoryClosed";
-      return t(E, { category: s.category.label });
-    }), B = () => {
-      e(U.SELECT_CATEGORY);
-    }, I = () => {
-      e(U.UNSELECT_CATEGORY);
-    }, { isAllSelected: O, isIndeterminate: S, toggleSelectAll: v } = ye(
-      C,
+      const r = s.value ? "categoryOpened" : "categoryClosed";
+      return t(r, { category: l.category.label });
+    }), M = () => {
+      e(V.SELECT_CATEGORY);
+    }, G = () => {
+      e(V.UNSELECT_CATEGORY);
+    }, { isAllSelected: h, isIndeterminate: x, toggleSelectAll: E } = Ce(
       p,
-      B,
-      I
-    ), y = n(() => S.value ? "mixed" : `${O.value}`), D = x(O.value), P = () => {
-      D.value = !D.value, v(D.value);
+      v,
+      M,
+      G
+    ), C = n(() => x.value ? "mixed" : `${h.value}`), O = T(h.value), D = () => {
+      O.value = !O.value, E(O.value);
     };
-    return X(O, () => {
-      D.value = O.value;
+    return H(h, () => {
+      O.value = h.value;
     }), {
       // Values
       chevronTitle: R,
-      conditionalClass: b,
-      hasAllPropsDisabled: m,
-      isOpen: l,
-      isAllSelected: O,
-      isIndeterminate: S,
-      isStaticCategory: A,
+      conditionalClass: d,
+      hasAllPropsDisabled: f,
+      isOpen: s,
+      isAllSelected: h,
+      isIndeterminate: x,
+      isStaticCategory: L,
       categoryGroupId: o,
       categoryNameId: a,
       // Computed
-      showItemChildren: d,
-      ariaCheckedComputed: y,
+      showItemChildren: m,
+      ariaCheckedComputed: C,
       // Methods
-      handleSelectAll: P,
-      toggleOpen: T,
-      toggleSelectAll: v
+      handleSelectAll: D,
+      toggleOpen: A,
+      toggleSelectAll: E
     };
   }
 });
-var Dt = 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) {
+var Rt = function() {
+  var e = this, s = e._self._c;
+  return e._self._setupProxy, s("div", [e.isStaticCategory ? s("div", { staticClass: "b-listbox-multi-select-category b-listbox-multi-select-category--static-category", attrs: { "aria-hidden": "true" } }, [s("span", { staticClass: "b-listbox-multi-select-category__label" }, [s("bento-typography", { staticClass: "b-listbox-multi-select-category__label-text", attrs: { el: "span", variant: "caption" } }, [e._v(" " + e._s(e.category.label) + " ")])], 1)]) : s("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);
   } }, nativeOn: { keydown: [function(t) {
     return !t.type.indexOf("key") && e._k(t.keyCode, "arrow-left", void 0, t.key, void 0) ? null : e.toggleOpen(t, !1);
   }, function(t) {
     return !t.type.indexOf("key") && e._k(t.keyCode, "arrow-right", void 0, t.key, void 0) ? null : e.toggleOpen(t, !0);
-  }] } }, [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) {
+  }] } }, [s("decorative-checkbox", { attrs: { indeterminate: e.isIndeterminate, disabled: e.hasAllPropsDisabled, checked: e.isAllSelected } }), s("span", { staticClass: "b-listbox-multi-select-category__label" }, [s("bento-typography", { staticClass: "b-listbox-multi-select-category__label-text", attrs: { id: e.categoryNameId, el: "span" } }, [e._v(" " + e._s(e.category.label) + " ")]), s("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);
-}, Bt = [], Mt = /* @__PURE__ */ N(
-  Rt,
+  } } }, [e.isOpen ? s("chevron-up-icon", { attrs: { "svg-title": e.chevronTitle } }) : s("chevron-down-icon", { attrs: { "svg-title": e.chevronTitle } })], 1)], 1)], 1), s("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);
+}, Bt = [], wt = /* @__PURE__ */ N(
   Dt,
+  Rt,
   Bt,
   !1,
   null,
   "00ccd708"
 );
-const $t = Mt.exports;
-var w = /* @__PURE__ */ ((s) => (s.SELECT_CATEGORY = "select-category", s.TOGGLE_CHECKBOX_SELECTION = "toggle-checkbox-selection", s.UNSELECT_CATEGORY = "unselect-category", s.TOGGLE_CATEGORY_VISIBILITY = "toggle-category-visibility", s))(w || {});
-const Nt = G({
+const Mt = wt.exports;
+var P = /* @__PURE__ */ ((l) => (l.SELECT_CATEGORY = "select-category", l.TOGGLE_CHECKBOX_SELECTION = "toggle-checkbox-selection", l.UNSELECT_CATEGORY = "unselect-category", l.TOGGLE_CATEGORY_VISIBILITY = "toggle-category-visibility", l))(P || {});
+const $t = F({
   name: "listbox-multi-select-options",
   components: {
-    BentoListboxOption: Z,
-    BentoTypography: j,
-    ListboxMultiSelectCategory: $t,
-    DecorativeCheckbox: oe
+    BentoListboxOption: ee,
+    BentoTypography: q,
+    ListboxMultiSelectCategory: Mt,
+    DecorativeCheckbox: ce
   },
   inheritAttrs: !1,
   props: {
@@ -788,88 +847,88 @@ const Nt = G({
     }
   },
   emits: [
-    w.TOGGLE_CHECKBOX_SELECTION,
-    w.SELECT_CATEGORY,
-    w.UNSELECT_CATEGORY,
-    w.TOGGLE_CATEGORY_VISIBILITY
+    P.TOGGLE_CHECKBOX_SELECTION,
+    P.SELECT_CATEGORY,
+    P.UNSELECT_CATEGORY,
+    P.TOGGLE_CATEGORY_VISIBILITY
   ],
-  setup(s, { emit: e }) {
-    const l = (d) => {
-      s.isOptionDisabled(d) || e(w.TOGGLE_CHECKBOX_SELECTION, d);
-    }, t = (d) => !!d.items, o = (d) => {
-      const b = s.isMultiLevel && s.searching;
-      return d.description && (!s.isMultiLevel || b);
-    }, a = (d) => d.items ? !!d.items.find((b) => s.selectedItemsList.includes(b.value)) : s.selectedItemsList.includes(d.value), r = (d) => {
-      if (t(d)) {
-        const b = a(d) ? w.UNSELECT_CATEGORY : w.SELECT_CATEGORY;
-        e(b, d);
+  setup(l, { emit: e }) {
+    const s = (m) => {
+      l.isOptionDisabled(m) || e(P.TOGGLE_CHECKBOX_SELECTION, m);
+    }, t = (m) => !!m.items, o = (m) => {
+      const d = l.isMultiLevel && l.searching;
+      return m.description && (!l.isMultiLevel || d);
+    }, a = (m) => m.items ? !!m.items.find((d) => l.selectedItemsList.includes(d.value)) : l.selectedItemsList.includes(m.value), c = (m) => {
+      if (t(m)) {
+        const d = a(m) ? P.UNSELECT_CATEGORY : P.SELECT_CATEGORY;
+        e(d, m);
       } else
-        l(d);
+        s(m);
     };
     return {
       // Values
       conditionalClasses: n(() => ({
-        "b-listbox-multi-select-options__static-category-option": s.staticCategories,
-        "b-listbox-multi-select-options__category-option": s.categoryItems
+        "b-listbox-multi-select-options__static-category-option": l.staticCategories,
+        "b-listbox-multi-select-options__category-option": l.categoryItems
       })),
       // Methods
       isOptionSelected: a,
       shouldShowDescription: o,
-      toggleCheckboxSelection: l,
-      toggleSearchOption: r,
-      computedTabindex: (d) => s.itemsIndex[d] === s.focusedIndex ? 0 : -1,
+      toggleCheckboxSelection: s,
+      toggleSearchOption: c,
+      computedTabindex: (m) => l.itemsIndex[m] === l.focusedIndex ? 0 : -1,
       // Enums
-      BentoListboxEvent: c,
-      ListboxMultiSelectOptionsEvent: w
+      BentoListboxEvent: u,
+      ListboxMultiSelectOptionsEvent: P
     };
   }
 });
-var wt = 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(o) {
+var Nt = function() {
+  var e = this, s = e._self._c;
+  return e._self._setupProxy, s("div", e._l(e.items, function(t) {
+    return s("div", { key: `selected-${t.value}` }, [e.searching && e.isMultiLevel ? [s("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(o) {
       return e.toggleSearchOption(t);
     }, "enter-pressed": function(o) {
       return e.toggleSearchOption(t);
     }, "space-pressed": function(o) {
       return o.preventDefault(), e.toggleSearchOption(t);
-    } } }, [l("decorative-checkbox", { attrs: { disabled: e.isOptionDisabled ? e.isOptionDisabled(t) : null, checked: e.isOptionSelected(t) } }), e._t("default", 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)] : [t.items ? [l("listbox-multi-select-category", { attrs: { category: t, "static-categories": e.staticCategories, "is-option-disabled": e.isOptionDisabled, "selected-items-list": e.selectedItemsList, tabindex: e.computedTabindex(t.value) }, on: { "select-category": function(o) {
+    } } }, [s("decorative-checkbox", { attrs: { disabled: e.isOptionDisabled ? e.isOptionDisabled(t) : null, checked: e.isOptionSelected(t) } }), e._t("default", function() {
+      return [s("span", { staticClass: "b-listbox-multi-select__option-text" }, [s("bento-typography", { attrs: { el: "span" } }, [e._v(e._s(t.label))]), e.shouldShowDescription(t) ? s("bento-typography", { staticClass: "b-listbox-multi-select__option-description", attrs: { el: "span" } }, [e._v(" " + e._s(t.description) + " ")]) : e._e()], 1)];
+    }, null, t)], 2)] : [t.items ? [s("listbox-multi-select-category", { attrs: { category: t, "static-categories": e.staticCategories, "is-option-disabled": e.isOptionDisabled, "selected-items-list": e.selectedItemsList, tabindex: e.computedTabindex(t.value) }, on: { "select-category": function(o) {
       return e.$emit(e.ListboxMultiSelectOptionsEvent.SELECT_CATEGORY, t);
     }, "unselect-category": function(o) {
       return e.$emit(e.ListboxMultiSelectOptionsEvent.UNSELECT_CATEGORY, t);
     }, "toggle-category-visibility": function(o) {
       return e.$emit(e.ListboxMultiSelectOptionsEvent.TOGGLE_CATEGORY_VISIBILITY, o);
-    } } }, [l("listbox-multi-select-options", { attrs: { "category-items": "", items: t.items, "is-option-disabled": e.isOptionDisabled, "items-index": e.itemsIndex, "focused-index": e.focusedIndex, "is-multi-level": e.isMultiLevel, "static-categories": e.staticCategories, "selected-items-list": e.selectedItemsList, searching: e.searching, role: e.$attrs.role || "option" }, on: { "toggle-checkbox-selection": (o) => e.toggleCheckboxSelection(o) } })], 1)] : 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(o) {
+    } } }, [s("listbox-multi-select-options", { attrs: { "category-items": "", items: t.items, "is-option-disabled": e.isOptionDisabled, "items-index": e.itemsIndex, "focused-index": e.focusedIndex, "is-multi-level": e.isMultiLevel, "static-categories": e.staticCategories, "selected-items-list": e.selectedItemsList, searching: e.searching, role: e.$attrs.role || "option" }, on: { "toggle-checkbox-selection": (o) => e.toggleCheckboxSelection(o) } })], 1)] : s("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(o) {
       return e.toggleCheckboxSelection(t);
     }, "enter-pressed": function(o) {
       return e.toggleCheckboxSelection(t);
     }, "space-pressed": function(o) {
       return o.preventDefault(), e.toggleCheckboxSelection(t);
-    } } }, [l("decorative-checkbox", { attrs: { disabled: e.isOptionDisabled ? e.isOptionDisabled(t) : null, checked: e.isOptionSelected(t) } }), e._t("default", 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)];
+    } } }, [s("decorative-checkbox", { attrs: { disabled: e.isOptionDisabled ? e.isOptionDisabled(t) : null, checked: e.isOptionSelected(t) } }), e._t("default", function() {
+      return [s("span", { staticClass: "b-listbox-multi-select__option-text" }, [s("bento-typography", { attrs: { el: "span" } }, [e._v(e._s(t.label))]), e.shouldShowDescription(t) ? s("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);
 }, Gt = [], Pt = /* @__PURE__ */ N(
+  $t,
   Nt,
-  wt,
   Gt,
   !1,
   null,
   "0985e0a4"
 );
-const Ft = Pt.exports, Yt = (s) => {
+const Ft = Pt.exports, Yt = (l) => {
   const e = n(() => {
     var t;
-    return !!((t = s.value) != null && t.find(({ items: o }) => !!o));
-  }), l = n(() => {
+    return !!((t = l.value) != null && t.find(({ items: o }) => !!o));
+  }), s = n(() => {
     var t;
-    return e.value ? (t = s.value) == null ? void 0 : t.reduce((o, a) => (a.items ? o.push(...a.items.flat()) : o.push(a), o), []) : s.value;
+    return e.value ? (t = l.value) == null ? void 0 : t.reduce((o, a) => (a.items ? o.push(...a.items.flat()) : o.push(a), o), []) : l.value;
   });
   return {
     isMultiLevelSelect: e,
-    flattenedItemsList: l
+    flattenedItemsList: s
   };
 }, zt = {
   "de-DE": {
@@ -932,7 +991,7 @@ const Ft = Pt.exports, Yt = (s) => {
     numbersSelected: "已选择 {number} 个",
     selectAll: "选择全部（{total}）个"
   }
-}, Ut = { i18n: { messages: zt } }, Vt = /* @__PURE__ */ G({
+}, Ut = { i18n: { messages: zt } }, Vt = /* @__PURE__ */ F({
   ...Ut,
   __name: "listbox-multi-select",
   props: {
@@ -945,152 +1004,152 @@ const Ft = Pt.exports, Yt = (s) => {
     staticCategories: { type: Boolean, default: !1 }
   },
   emits: ["select"],
-  setup(s, { expose: e, emit: l }) {
-    const t = s, { t: o, n: a } = le(), r = Ge(), m = Pe(), A = n(
+  setup(l, { expose: e, emit: s }) {
+    const t = l, { t: o, n: a } = ie(), c = Ge(), f = Pe(), L = n(
       () => {
-        var i, u, f, h;
+        var i, b, g, S;
         return {
-          "aria-label": (i = m["aria-label"]) == null ? void 0 : i.toString(),
-          "aria-busy": (u = m["aria-busy"]) == null ? void 0 : u.toString(),
-          "aria-atomic": (f = m["aria-atomic"]) == null ? void 0 : f.toString(),
-          "aria-live": (h = m["aria-live"]) == null ? void 0 : h.toString(),
+          "aria-label": (i = f["aria-label"]) == null ? void 0 : i.toString(),
+          "aria-busy": (b = f["aria-busy"]) == null ? void 0 : b.toString(),
+          "aria-atomic": (g = f["aria-atomic"]) == null ? void 0 : g.toString(),
+          "aria-live": (S = f["aria-live"]) == null ? void 0 : S.toString(),
           "aria-multiselectable": !0
         };
       }
-    ), d = x(null), b = x(null), T = x(null), _ = x(null), p = n(() => t.selectedValues.map(({ value: i }) => i)), { isMultiLevelSelect: C, flattenedItemsList: R } = Yt(H(t, "items")), B = n(() => C.value && !t.staticCategories), I = n(() => B.value ? "tree" : "listbox"), O = n(() => B.value ? "treeitem" : "option"), S = (i) => {
-      var h;
-      const u = t.isOptionDisabled(i), f = ((h = p.value) == null ? void 0 : h.includes(i.value)) || !1;
-      return { isDisabled: u, isPreSelected: f };
-    }, v = n(() => {
-      if (t.searching && C)
+    ), m = T(null), d = T(null), A = T(null), k = T(null), v = n(() => t.selectedValues.map(({ value: i }) => i)), { isMultiLevelSelect: p, flattenedItemsList: R } = Yt(j(t, "items")), M = n(() => p.value && !t.staticCategories), G = n(() => M.value ? "tree" : "listbox"), h = n(() => M.value ? "treeitem" : "option"), x = (i) => {
+      var S;
+      const b = t.isOptionDisabled(i), g = ((S = v.value) == null ? void 0 : S.includes(i.value)) || !1;
+      return { isDisabled: b, isPreSelected: g };
+    }, E = n(() => {
+      if (t.searching && p)
         return t.items;
-      const i = R.value.filter((u) => {
-        const { isDisabled: f, isPreSelected: h } = S(u);
-        return f && h || !f;
+      const i = R.value.filter((b) => {
+        const { isDisabled: g, isPreSelected: S } = x(b);
+        return g && S || !g;
       });
-      return t.selectedValues.forEach((u) => {
-        i.find((f) => f.value === u.value) || i.push(u);
+      return t.selectedValues.forEach((b) => {
+        i.find((g) => g.value === b.value) || i.push(b);
       }), i;
-    }), y = n(
+    }), C = n(
       () => {
         var i;
-        return (i = v.value) == null ? void 0 : i.filter((u) => {
-          var f;
-          return u.items && C.value && t.searching ? u.items.filter(
-            (g) => (t.selectedValues ?? []).includes(g.value)
-          ).length === u.items.length : (f = p.value) == null ? void 0 : f.includes(u.value);
+        return (i = E.value) == null ? void 0 : i.filter((b) => {
+          var g;
+          return b.items && p.value && t.searching ? b.items.filter(
+            (y) => (t.selectedValues ?? []).includes(y.value)
+          ).length === b.items.length : (g = v.value) == null ? void 0 : g.includes(b.value);
         });
       }
-    ), D = () => C.value && !t.searching ? R.value.length : t.items.length, P = n(() => {
-      var h;
-      const i = v.value.length, u = D(), f = ((h = y.value) == null ? void 0 : h.length) || 0;
-      return f === 0 ? o("selectAll", { total: a(i) }) : f === u ? o("allSelected", { total: a(u) }) : f <= u ? o("numberOfTotalSelected", { number: a(f), total: a(u) }) : o("numbersSelected", { number: a(f) });
-    }), E = (i) => {
-      const u = (h) => {
-        const { isDisabled: g, isPreSelected: F } = S(h);
-        return g && F || !g;
-      }, f = i.filter(u).filter((h) => !p.value.includes(h.value));
-      l("select", [...t.selectedValues, ...f]);
-    }, L = (i) => {
-      const u = (g) => {
-        const { isDisabled: F, isPreSelected: $e } = S(g);
-        return !(F && $e);
-      }, f = i.filter(u).map(({ value: g }) => g), h = t.selectedValues.filter((g) => !(f != null && f.includes(g.value)));
-      l("select", h);
-    }, $ = () => {
-      E(R.value);
-    }, Y = () => {
-      L(R.value);
-    }, { isAllSelected: z, isIndeterminate: k, toggleSelectAll: V } = ye(
-      y,
-      v,
-      $,
-      Y
-    ), xe = n(() => k.value ? "mixed" : `${z.value}`), q = x(z.value), Oe = () => {
-      q.value = !q.value, V(q.value);
+    ), O = () => p.value && !t.searching ? R.value.length : t.items.length, D = n(() => {
+      var S;
+      const i = E.value.length, b = O(), g = ((S = C.value) == null ? void 0 : S.length) || 0;
+      return g === 0 ? o("selectAll", { total: a(i) }) : g === b ? o("allSelected", { total: a(b) }) : g <= b ? o("numberOfTotalSelected", { number: a(g), total: a(b) }) : o("numbersSelected", { number: a(g) });
+    }), r = (i) => {
+      const b = (S) => {
+        const { isDisabled: y, isPreSelected: Y } = x(S);
+        return y && Y || !y;
+      }, g = i.filter(b).filter((S) => !v.value.includes(S.value));
+      s("select", [...t.selectedValues, ...g]);
+    }, _ = (i) => {
+      const b = (y) => {
+        const { isDisabled: Y, isPreSelected: Me } = x(y);
+        return !(Y && Me);
+      }, g = i.filter(b).map(({ value: y }) => y), S = t.selectedValues.filter((y) => !(g != null && g.includes(y.value)));
+      s("select", S);
+    }, I = () => {
+      r(R.value);
+    }, B = () => {
+      _(R.value);
+    }, { isAllSelected: z, isIndeterminate: J, toggleSelectAll: Z } = Ce(
+      C,
+      E,
+      I,
+      B
+    ), te = n(() => J.value ? "mixed" : `${z.value}`), U = T(z.value), w = () => {
+      U.value = !U.value, Z(U.value);
     };
-    X(z, () => {
-      q.value = z.value;
+    H(z, () => {
+      U.value = z.value;
     });
-    const Ee = (i) => {
-      E(i.items);
+    const X = (i) => {
+      r(i.items);
     }, Te = (i) => {
-      L(i.items);
-    }, Ie = (i, u) => {
-      let f = !1;
-      const h = t.selectedValues.filter(({ value: g }) => u.value === g ? (f = !0, !1) : !0);
-      f || h.push(u), l(i, h);
+      _(i.items);
+    }, Ie = (i, b) => {
+      let g = !1;
+      const S = t.selectedValues.filter(({ value: y }) => b.value === y ? (g = !0, !1) : !0);
+      g || S.push(b), s(i, S);
     }, Ae = n(() => {
-      if (!C.value)
+      if (!p.value)
         return t.selectedValues;
-      const i = (g) => p.value.includes(g.value), u = (g) => !t.staticCategories && g.every((F) => i(F));
+      const i = (y) => v.value.includes(y.value), b = (y) => !t.staticCategories && y.every((Y) => i(Y));
       return t.items.flatMap(
-        (g) => g.items && !u(g.items) ? g.items : g
-      ).filter((g) => g.items ? !0 : i(g));
+        (y) => y.items && !b(y.items) ? y.items : y
+      ).filter((y) => y.items ? !0 : i(y));
     }), Le = n(() => {
-      var f, h, g, F;
-      const i = ["automatic", "button"].includes(t.lazyLoadType), u = ((f = t.selectedValues) == null ? void 0 : f.length) > 0 && ((h = y.value) == null ? void 0 : h.length) !== ((g = R.value) == null ? void 0 : g.length);
-      return i && t.hasMoreItems ? !!((F = t.selectedValues) != null && F.length) : u;
-    }), ae = n(() => ["automatic", "button"].includes(t.lazyLoadType) ? !t.hasMoreItems : !0), W = x([]), { visibleDomOptions: Q, updateVisibleDomOptions: ne } = Se(
-      d,
-      H(t, "items"),
-      O
+      var g, S, y, Y;
+      const i = ["automatic", "button"].includes(t.lazyLoadType), b = ((g = t.selectedValues) == null ? void 0 : g.length) > 0 && ((S = C.value) == null ? void 0 : S.length) !== ((y = R.value) == null ? void 0 : y.length);
+      return i && t.hasMoreItems ? !!((Y = t.selectedValues) != null && Y.length) : b;
+    }), re = n(() => ["automatic", "button"].includes(t.lazyLoadType) ? !t.hasMoreItems : !0), W = T([]), { visibleDomOptions: le, updateVisibleDomOptions: ue } = Oe(
+      m,
+      j(t, "items"),
+      h
     ), ke = (i) => {
-      W.value.includes(i) ? W.value = W.value.filter((u) => u !== i) : W.value.push(i), pe(() => {
-        ne();
+      W.value.includes(i) ? W.value = W.value.filter((b) => b !== i) : W.value.push(i), ae(() => {
+        ue();
       });
-    }, ie = (i) => {
-      var u;
-      (u = Q.value[i]) == null || u.focus();
+    }, de = (i) => {
+      var b;
+      (b = le.value[i]) == null || b.focus();
     }, {
-      moveToNextElement: ce,
-      moveToPreviousElement: re,
-      moveToFirstElement: ue,
-      moveToLastElement: de,
-      preventDefault: ee,
-      focusedIndex: Re,
-      setListboxFocusedIndex: be
-    } = he(
+      moveToNextElement: be,
+      moveToPreviousElement: fe,
+      moveToFirstElement: me,
+      moveToLastElement: ve,
+      preventDefault: se,
+      focusedIndex: De,
+      setListboxFocusedIndex: ge
+    } = xe(
       {
-        items: Q
+        items: le
       },
-      ie
-    ), De = {
-      [M.ARROW_UP]: (i) => re(i),
-      [M.ARROW_DOWN]: (i) => ce(i),
-      [M.HOME]: ue,
-      [M.END]: de
+      de
+    ), Re = {
+      [$.ARROW_UP]: (i) => fe(i),
+      [$.ARROW_DOWN]: (i) => be(i),
+      [$.HOME]: me,
+      [$.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: be
+      setListboxFocusedIndex: ge
     });
     const Be = {
-      [M.ARROW_UP]: ee,
-      [M.ARROW_DOWN]: ee
-    }, Me = n(() => {
-      let i = ae.value ? 1 : 0;
-      const u = {};
-      return t.items.forEach((f) => {
-        let h = W.value.includes(f.value);
-        f.items ? (t.staticCategories ? h = !0 : u[f.value] = i++, h && f.items.forEach((g) => u[g.value] = i++)) : u[f.value] = i++;
-      }), u;
+      [$.ARROW_UP]: se,
+      [$.ARROW_DOWN]: se
+    }, we = n(() => {
+      let i = re.value ? 1 : 0;
+      const b = {};
+      return t.items.forEach((g) => {
+        let S = W.value.includes(g.value);
+        g.items ? (t.staticCategories ? S = !0 : b[g.value] = i++, S && g.items.forEach((y) => b[y.value] = i++)) : b[g.value] = i++;
+      }), b;
     });
-    return { __sfc: !0, props: t, emit: l, t: o, n: a, slots: r, attrs: m, ariaAttributes: A, listboxRef: d, selectAllListboxItemsRef: b, selectedListboxItemsRef: T, listboxItemsRef: _, selectedItemsList: p, isMultiLevelSelect: C, flattenedItemsList: R, isTreePattern: B, computedRole: I, computedOptionRole: O, optionStates: S, enabledItems: v, visibleSelectedList: y, calculateTotalItems: D, selectAllCheckboxText: P, selectAll: E, unselectAll: L, selectAllItems: $, unselectAllItems: Y, isAllSelected: z, isIndeterminate: k, toggleSelectAll: V, ariaCheckedComputed: xe, isSelectAllOn: q, handleSelectAll: Oe, selectAllCategory: Ee, unselectAllCategory: Te, toggleCheckboxSelection: Ie, selectedOptions: Ae, showSelectedItems: Le, showSelectAllCheckbox: ae, expandedCategories: W, visibleDomOptions: Q, updateVisibleDomOptions: ne, toggleCategoryVisibility: ke, focusItem: ie, moveToNextElement: ce, moveToPreviousElement: re, moveToFirstElement: ue, moveToLastElement: de, preventDefault: ee, focusedIndex: Re, setListboxFocusedIndex: be, listboxListeners: De, chipsSectionListeners: Be, computedItemsIndex: Me, DecorativeCheckbox: oe, BentoTypography: j, BentoChip: We, BentoListboxOption: Z, ListboxMultiSelectOptions: Ft, vBentoKeyboardNavigationDirective: se, BentoListboxEvent: c };
+    return { __sfc: !0, props: t, emit: s, t: o, n: a, slots: c, attrs: f, ariaAttributes: L, listboxRef: m, selectAllListboxItemsRef: d, selectedListboxItemsRef: A, listboxItemsRef: k, selectedItemsList: v, isMultiLevelSelect: p, flattenedItemsList: R, isTreePattern: M, computedRole: G, computedOptionRole: h, optionStates: x, enabledItems: E, visibleSelectedList: C, calculateTotalItems: O, selectAllCheckboxText: D, selectAll: r, unselectAll: _, selectAllItems: I, unselectAllItems: B, isAllSelected: z, isIndeterminate: J, toggleSelectAll: Z, ariaCheckedComputed: te, isSelectAllOn: U, handleSelectAll: w, selectAllCategory: X, unselectAllCategory: Te, toggleCheckboxSelection: Ie, selectedOptions: Ae, showSelectedItems: Le, showSelectAllCheckbox: re, expandedCategories: W, visibleDomOptions: le, updateVisibleDomOptions: ue, toggleCategoryVisibility: ke, focusItem: de, moveToNextElement: be, moveToPreviousElement: fe, moveToFirstElement: me, moveToLastElement: ve, preventDefault: se, focusedIndex: De, setListboxFocusedIndex: ge, listboxListeners: Re, chipsSectionListeners: Be, computedItemsIndex: we, DecorativeCheckbox: ce, BentoTypography: q, BentoChip: We, BentoListboxOption: ee, ListboxMultiSelectOptions: Ft, vBentoKeyboardNavigationDirective: ne, BentoListboxEvent: u };
   }
 });
 var Wt = 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(o) {
-    return l("li", { key: o.value }, [l(t.BentoChip, { ref: "selectedListboxItemsRef", refInFor: !0, attrs: { disabled: e.isOptionDisabled(o), label: o.label, condensed: "" }, on: { click: function(a) {
+  var e = this, s = e._self._c, t = e._self._setupProxy;
+  return s("div", { ref: "listboxRef", staticClass: "b-listbox-multi-select" }, [t.showSelectedItems ? s("div", [s("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(o) {
+    return s("li", { key: o.value }, [s(t.BentoChip, { ref: "selectedListboxItemsRef", refInFor: !0, attrs: { disabled: e.isOptionDisabled(o), label: o.label, condensed: "" }, on: { click: function(a) {
       o.items ? t.unselectAllCategory(o) : t.toggleCheckboxSelection("select", o);
     } } })], 1);
-  }), 0), l("hr", { staticClass: "b-listbox-multi-select__divider", attrs: { "aria-hidden": "true" } })]) : e._e(), l("div", e._g(e._b({ directives: [{ name: "bento-keyboard-navigation-directive", rawName: "v-bento-keyboard-navigation-directive" }], attrs: { role: t.computedRole } }, "div", t.ariaAttributes, !1), t.listboxListeners), [t.showSelectAllCheckbox ? l(t.BentoListboxOption, { ref: "selectAllListboxItemsRef", staticClass: "b-listbox-multi-select__option", attrs: { tabindex: t.focusedIndex === 0 ? 0 : -1, "aria-selected": t.ariaCheckedComputed !== "false", "aria-checked": t.ariaCheckedComputed, role: t.computedOptionRole }, on: { click: t.handleSelectAll, "enter-pressed": t.handleSelectAll, "space-pressed": function(o) {
+  }), 0), s("hr", { staticClass: "b-listbox-multi-select__divider", attrs: { "aria-hidden": "true" } })]) : e._e(), s("div", e._g(e._b({ directives: [{ name: "bento-keyboard-navigation-directive", rawName: "v-bento-keyboard-navigation-directive" }], attrs: { role: t.computedRole } }, "div", t.ariaAttributes, !1), t.listboxListeners), [t.showSelectAllCheckbox ? s(t.BentoListboxOption, { ref: "selectAllListboxItemsRef", staticClass: "b-listbox-multi-select__option", attrs: { tabindex: t.focusedIndex === 0 ? 0 : -1, "aria-selected": t.ariaCheckedComputed !== "false", "aria-checked": t.ariaCheckedComputed, role: t.computedOptionRole }, on: { click: t.handleSelectAll, "enter-pressed": t.handleSelectAll, "space-pressed": function(o) {
     return o.preventDefault(), t.handleSelectAll.apply(null, arguments);
-  } } }, [l(t.DecorativeCheckbox, { attrs: { checked: t.isAllSelected, indeterminate: t.isIndeterminate } }), l(t.BentoTypography, { attrs: { el: "span" } }, [e._v(" " + e._s(t.selectAllCheckboxText) + " ")])], 1) : e._e(), t.showSelectAllCheckbox ? l("hr", { staticClass: "b-listbox-multi-select__divider", attrs: { "aria-hidden": "true" } }) : e._e(), l(t.ListboxMultiSelectOptions, { ref: "listboxItemsRef", attrs: { items: e.items, "is-option-disabled": e.isOptionDisabled, "is-multi-level": t.isMultiLevelSelect, "static-categories": e.staticCategories, searching: e.searching, "selected-items-list": t.selectedItemsList, "focused-index": t.focusedIndex, "items-index": t.computedItemsIndex, role: t.computedOptionRole }, on: { "toggle-checkbox-selection": function(o) {
+  } } }, [s(t.DecorativeCheckbox, { attrs: { checked: t.isAllSelected, indeterminate: t.isIndeterminate } }), s(t.BentoTypography, { attrs: { el: "span" } }, [e._v(" " + e._s(t.selectAllCheckboxText) + " ")])], 1) : e._e(), t.showSelectAllCheckbox ? s("hr", { staticClass: "b-listbox-multi-select__divider", attrs: { "aria-hidden": "true" } }) : e._e(), s(t.ListboxMultiSelectOptions, { ref: "listboxItemsRef", attrs: { items: e.items, "is-option-disabled": e.isOptionDisabled, "is-multi-level": t.isMultiLevelSelect, "static-categories": e.staticCategories, searching: e.searching, "selected-items-list": t.selectedItemsList, "focused-index": t.focusedIndex, "items-index": t.computedItemsIndex, role: t.computedOptionRole }, on: { "toggle-checkbox-selection": function(o) {
     return t.toggleCheckboxSelection("select", o);
   }, "select-category": t.selectAllCategory, "unselect-category": t.unselectAllCategory, "toggle-category-visibility": t.toggleCategoryVisibility, "space-pressed": function(o) {
     return t.toggleCheckboxSelection(t.BentoListboxEvent.SPACE, o);
@@ -1099,8 +1158,8 @@ var Wt = function() {
   }, "enter-pressed": function(o) {
     return t.toggleCheckboxSelection(t.BentoListboxEvent.ENTER, o);
   } }, scopedSlots: e._u([e._l(t.slots, function(o, a) {
-    return { key: a, fn: function(r) {
-      return [e._t(a, null, null, r)];
+    return { key: a, fn: function(c) {
+      return [e._t(a, null, null, c)];
     } };
   })], null, !0) })], 1)]);
 }, Kt = [], jt = /* @__PURE__ */ N(
@@ -1111,12 +1170,12 @@ var Wt = function() {
   null,
   "b81d7402"
 );
-const _e = jt.exports, qt = (s, e = 300) => {
-  let l;
+const Se = jt.exports, qt = (l, e = 300) => {
+  let s;
   return (...o) => {
-    l && clearTimeout(l), l = setTimeout(() => s(...o), e);
+    s && clearTimeout(s), s = setTimeout(() => l(...o), e);
   };
-}, Ht = {
+}, Xt = {
   "de-DE": {
     loading: "Laden",
     showMore: "Mehr anzeigen"
@@ -1157,18 +1216,18 @@ const _e = jt.exports, qt = (s, e = 300) => {
     loading: "正在加载",
     showMore: "显示更多"
   }
-}, Xt = 36, Jt = G({
+}, Ht = 36, Jt = F({
   name: "bento-listbox",
   components: {
     BentoEmptyState: Ye,
     BentoListboxSingleSelect: yt,
-    BentoListboxMultiSelect: _e,
-    BentoTypography: j,
+    BentoListboxMultiSelect: Se,
+    BentoTypography: q,
     BentoLoadingIndicator: Fe,
     BentoLoadingButton: qe
   },
-  directives: { BentoKeyboardNavigationDirective: se },
-  i18n: { messages: Ht },
+  directives: { BentoKeyboardNavigationDirective: ne },
+  i18n: { messages: Xt },
   props: {
     /**
      * Defines a string value that labels an interactive element.
@@ -1225,7 +1284,7 @@ const _e = jt.exports, qt = (s, e = 300) => {
     lazyLoadType: {
       type: String,
       default: K.NONE,
-      validator: (s) => Object.values(K).includes(s)
+      validator: (l) => Object.values(K).includes(l)
     },
     /**
      * Indicates the listbox is loading filtered items.
@@ -1249,7 +1308,7 @@ const _e = jt.exports, qt = (s, e = 300) => {
      *
      * If enabled, hides the "Select all" checkbox in "multiple" mode.
      */
-    searching: _e.props.searching,
+    searching: Se.props.searching,
     /**
      * The `input` value.
      * Providing an empty string or empty array will select no options.
@@ -1269,167 +1328,173 @@ const _e = jt.exports, qt = (s, e = 300) => {
     }
   },
   emits: [
-    c.SELECT,
-    c.SPACE,
-    c.SHOW_MORE,
-    c.ENTER,
-    c.ESCAPE,
-    c.TAB
+    u.SELECT,
+    u.SPACE,
+    u.SHOW_MORE,
+    u.ENTER,
+    u.ESCAPE,
+    u.TAB
   ],
-  setup(s, { emit: e, slots: l }) {
-    const t = x([]), o = H(s, "items"), { t: a } = le(), r = n(() => s.lazyLoadType !== K.AUTOMATIC), m = n(() => s.lazyLoadType === K.AUTOMATIC), A = () => {
-      var k;
-      return typeof (s == null ? void 0 : s.virtualScroll) == "object" && ((k = s == null ? void 0 : s.virtualScroll) != null && k.itemHeight) ? s.virtualScroll.itemHeight : Xt;
-    }, {
+  setup(l, { emit: e, slots: s }) {
+    const t = T([]), o = j(l, "items"), { t: a } = ie(), c = n(() => l.lazyLoadType !== K.AUTOMATIC), f = n(() => l.lazyLoadType === K.AUTOMATIC), L = () => {
+      var w;
+      return typeof (l == null ? void 0 : l.virtualScroll) == "object" && ((w = l == null ? void 0 : l.virtualScroll) != null && w.itemHeight) ? l.virtualScroll.itemHeight : Ht;
+    }, m = !(l != null && l.multiple) && (l == null ? void 0 : l.virtualScroll) !== !1 && (l == null ? void 0 : l.lazyLoadType) === "none", {
       containerRef: d,
-      containerProps: b,
-      onScroll: T,
-      list: _,
-      wrapperProps: p
-    } = He(o, {
-      itemHeight: A(),
+      containerProps: A,
+      onScroll: k,
+      list: v,
+      wrapperProps: p,
+      scrollToIndex: R,
+      startIndex: M
+    } = Xe(o, {
+      itemHeight: L(),
       // Disable virtual scrolling if not enabled or if lazy loading is enabled or if multi-select
-      disabled: (s == null ? void 0 : s.multiple) || (s == null ? void 0 : s.virtualScroll) === !1 || (s == null ? void 0 : s.lazyLoadType) !== "none"
-    }), C = n(
-      () => s.componentLoading !== void 0 || r.value ? "true" : void 0
-    ), R = n(
-      () => r.value && s.loading || s.componentLoading ? "true" : "false"
-    ), B = n(
-      () => r.value || s.componentLoading !== void 0 ? "polite" : void 0
-    ), I = n(
+      disabled: !m
+    }), G = n(() => m ? o.value.length : 0), h = n(
+      () => l.componentLoading !== void 0 || c.value ? "true" : void 0
+    ), x = n(
+      () => c.value && l.loading || l.componentLoading ? "true" : "false"
+    ), E = n(
+      () => c.value || l.componentLoading !== void 0 ? "polite" : void 0
+    ), C = n(
       () => ({
-        "aria-label": s.ariaLabel,
-        "aria-busy": R.value,
-        "aria-atomic": C.value,
-        "aria-live": B.value
+        "aria-label": l.ariaLabel,
+        "aria-busy": x.value,
+        "aria-atomic": h.value,
+        "aria-live": E.value
       })
     ), O = n(
-      () => s.componentLoading ? {
-        ...I.value,
+      () => l.componentLoading ? {
+        ...C.value,
         role: "alert"
       } : {}
-    ), S = (k) => (V) => {
-      e(k, V);
-    }, v = () => {
-      e(c.SHOW_MORE);
-    }, y = qt(() => {
-      const k = d.value;
-      if (!k)
+    ), D = (w) => (X) => {
+      e(w, X);
+    }, r = () => {
+      e(u.SHOW_MORE);
+    }, _ = qt(() => {
+      const w = d.value;
+      if (!w)
         return;
-      const V = Math.round(k.scrollTop) + k.clientHeight >= k.scrollHeight;
-      s.hasMoreItems && V && !s.loading && v();
-    }), D = () => {
-      m.value ? y() : T();
-    }, P = n(() => {
-      var k;
-      return ((k = s.items) == null ? void 0 : k.length) === 0;
-    }), E = n(
-      () => s.lazyLoadType === K.BUTTON && s.hasMoreItems
-    ), L = n(
-      () => s.loading ? fe.LOADING : fe.START
-    ), $ = n(() => s.loading ? a("loading") : a("showMore")), Y = n(() => ({
-      ...s.emptyState,
+      const X = Math.round(w.scrollTop) + w.clientHeight >= w.scrollHeight;
+      l.hasMoreItems && X && !l.loading && r();
+    }), I = () => {
+      f.value ? _() : k();
+    }, B = n(() => {
+      var w;
+      return ((w = l.items) == null ? void 0 : w.length) === 0;
+    }), z = n(
+      () => l.lazyLoadType === K.BUTTON && l.hasMoreItems
+    ), J = n(
+      () => l.loading ? pe.LOADING : pe.START
+    ), Z = n(() => l.loading ? a("loading") : a("showMore")), te = n(() => ({
+      ...l.emptyState,
       variant: "condensed"
-    })), z = {
-      [c.SELECT]: S(c.SELECT),
-      [c.SPACE]: S(c.SPACE),
-      [c.TAB]: S(c.TAB),
-      [c.ENTER]: S(c.ENTER)
+    })), U = {
+      [u.SELECT]: D(u.SELECT),
+      [u.SPACE]: D(u.SPACE),
+      [u.TAB]: D(u.TAB),
+      [u.ENTER]: D(u.ENTER)
     };
     return {
       // Refs
       listboxRef: d,
       listboxItemRef: t,
       // a11y
-      ariaAttributes: I,
+      ariaAttributes: C,
       listboxContainerAttributes: O,
       // Values
-      containerProps: b,
-      isSearchResultEmpty: P,
-      limitedEmptyStateProps: Y,
-      loadingButtonState: L,
-      slots: l,
-      shouldDisplayShowMoreButton: E,
-      showMoreButtonText: $,
-      virtualisedItems: _,
+      containerProps: A,
+      isSearchResultEmpty: B,
+      limitedEmptyStateProps: te,
+      loadingButtonState: J,
+      slots: s,
+      shouldDisplayShowMoreButton: z,
+      showMoreButtonText: Z,
+      virtualisedItems: v,
       wrapperProps: p,
+      // Virtual scroll
+      totalItemCount: G,
+      scrollToIndex: R,
+      virtualScrollStartIndex: M,
       // Enums
-      BentoKeyboardNavigationKeyDownEvent: M,
-      BentoListboxEvent: c,
+      BentoKeyboardNavigationKeyDownEvent: $,
+      BentoListboxEvent: u,
       // Methods
-      onListboxContainerScroll: D,
-      onOptionSelected: S,
-      emitShowMore: v,
-      listboxListeners: z
+      onListboxContainerScroll: I,
+      onOptionSelected: D,
+      emitShowMore: r,
+      listboxListeners: U
     };
   }
 });
 var Zt = 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(o, a) {
-    return { key: a, fn: function(r) {
-      return [e._t(a, null, null, r)];
+  var e = this, s = e._self._c;
+  return e._self._setupProxy, s("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), [s("div", e._b({}, "div", e.wrapperProps, !1), [e.componentLoading ? s("div", { staticClass: "b-listbox__loading-filtered-items" }, [s("bento-loading-indicator")], 1) : e.isSearchResultEmpty ? s("div", { staticClass: "b-listbox__empty-search-message" }, [e.emptyState ? s("bento-empty-state", e._b({}, "bento-empty-state", e.limitedEmptyStateProps, !1)) : s("bento-typography", { attrs: { el: "span" } }, [e._v(e._s(e.noResultsMessage))])], 1) : [e.multiple ? [s("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(o, a) {
+    return { key: a, fn: function(c) {
+      return [e._t(a, null, null, c)];
     } };
-  })], null, !0) }, "bento-listbox-multi-select", e.ariaAttributes, !1), e.listboxListeners))] : [l("bento-listbox-single-select", e._g(e._b({ ref: "listboxItemRef", attrs: { items: e.virtualisedItems, "selected-value": e.selectedValue, "static-categories": e.staticCategories, "is-option-disabled": e.isOptionDisabled }, scopedSlots: e._u([e._l(e.slots, function(o, a) {
-    return { key: a, fn: function(r) {
-      return [e._t(a, null, null, r)];
+  })], null, !0) }, "bento-listbox-multi-select", e.ariaAttributes, !1), e.listboxListeners))] : [s("bento-listbox-single-select", e._g(e._b({ ref: "listboxItemRef", attrs: { items: e.virtualisedItems, "total-item-count": e.totalItemCount, "scroll-to-index": e.scrollToIndex, "virtual-scroll-start-index": e.virtualScrollStartIndex, "selected-value": e.selectedValue, "static-categories": e.staticCategories, "is-option-disabled": e.isOptionDisabled }, scopedSlots: e._u([e._l(e.slots, function(o, a) {
+    return { key: a, fn: function(c) {
+      return [e._t(a, null, null, c)];
     } };
-  })], 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(o) {
+  })], null, !0) }, "bento-listbox-single-select", e.ariaAttributes, !1), e.listboxListeners))], e.shouldDisplayShowMoreButton ? s("div", { staticClass: "b-listbox__lazy-load" }, [s("bento-loading-button", { attrs: { state: e.loadingButtonState, variant: "secondary" }, on: { "!click": function(o) {
     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)]);
-}, Qt = [], es = /* @__PURE__ */ N(
+  } } }, [e._v(" " + e._s(e.showMoreButtonText) + " ")])], 1) : e.loading ? s("div", { staticClass: "b-listbox__lazy-load" }, [s("bento-loading-indicator")], 1) : e._e()]], 2)]);
+}, Qt = [], el = /* @__PURE__ */ N(
   Jt,
   Zt,
   Qt,
   !1,
   null,
-  "35cb3605"
+  "7819d7a2"
 );
-const ys = es.exports, te = (s, e) => {
-  for (const l of s) {
-    if (l.value === e)
-      return l;
-    if (l.items) {
-      const t = te(l.items, e);
+const yl = el.exports, oe = (l, e) => {
+  for (const s of l) {
+    if (s.value === e)
+      return s;
+    if (s.items) {
+      const t = oe(s.items, e);
       if (t)
         return t;
     }
   }
   return null;
-}, ts = (s) => typeof s == "object" && s !== null && "value" in s && "label" in s, hs = (s, e, l, t) => {
-  const o = x([]), a = x(), r = (b) => {
-    l.value ? a.value = b.map(({ value: T }) => T) : a.value = b.length > 0 ? b[0].value : null;
-  }, m = (b) => {
-    l.value ? a.value = b.map(({ value: T, label: _ }) => ({ value: T, label: _ })) : a.value = b.length > 0 ? { value: b[0].value, label: b[0].label } : null;
-  }, A = (b) => {
-    o.value = b, t != null && t.value ? m(b) : r(b);
-  }, d = () => {
+}, tl = (l) => typeof l == "object" && l !== null && "value" in l && "label" in l, hl = (l, e, s, t) => {
+  const o = T([]), a = T(), c = (d) => {
+    s.value ? a.value = d.map(({ value: A }) => A) : a.value = d.length > 0 ? d[0].value : null;
+  }, f = (d) => {
+    s.value ? a.value = d.map(({ value: A, label: k }) => ({ value: A, label: k })) : a.value = d.length > 0 ? { value: d[0].value, label: d[0].label } : null;
+  }, L = (d) => {
+    o.value = d, t != null && t.value ? f(d) : c(d);
+  }, m = () => {
     o.value = [], a.value = null;
   };
-  return X(
+  return H(
     () => e.value,
     () => {
       if (!e.value && e.value !== 0) {
-        d();
+        m();
         return;
       }
-      const b = !Array.isArray(e.value), T = [...o.value];
-      d();
-      const _ = (p) => {
-        if (ts(p))
-          o.value.push(p);
+      const d = !Array.isArray(e.value), A = [...o.value];
+      m();
+      const k = (v) => {
+        if (tl(v))
+          o.value.push(v);
         else {
-          let C = te(s.value, p);
-          C || (C = te(T, p)), C || (C = { value: p, label: p.toString() }), o.value.push(C);
+          let p = oe(l.value, v);
+          p || (p = oe(A, v)), p || (p = { value: v, label: v.toString() }), o.value.push(p);
         }
       };
-      if (b) {
-        const p = e.value;
-        _(p), t != null && t.value ? m(o.value) : r(o.value);
+      if (d) {
+        const v = e.value;
+        k(v), t != null && t.value ? f(o.value) : c(o.value);
         return;
       }
-      e.value.forEach(_), t != null && t.value ? m(o.value) : r(o.value);
+      e.value.forEach(k), t != null && t.value ? f(o.value) : c(o.value);
     },
     { immediate: !0 }
   ), {
@@ -1437,19 +1502,19 @@ const ys = es.exports, te = (s, e) => {
     cachedSelectedListboxOptions: o,
     cachedListboxSelectedValues: a,
     // Methods
-    resetCache: d,
-    setCachedValues: A
+    resetCache: m,
+    setCachedValues: L
   };
 };
 export {
-  c as B,
+  u as B,
   rt as C,
-  oe as D,
+  ce as D,
   K as a,
-  ys as b,
+  yl as b,
   Yt as c,
   qt as d,
-  Se as e,
-  hs as u
+  Oe as e,
+  hl as u
 };
-//# sourceMappingURL=use-cached-selected-values.BJbWbkEQ.js.map
+//# sourceMappingURL=use-cached-selected-values.Du8-wWR2.js.map