@adyen/bento-vue2 1.65.0 → 1.66.0

package/dist/chunks/{use-cached-selected-values.DNOmzQVy.js → use-cached-selected-values.CusB5KBl.js}

@@ -1,115 +1,115 @@
-import { computed as o, ref as A, onMounted as Te, onUnmounted as Ae, watch as z, defineComponent as w, nextTick as fe, toRef as Q, useSlots as Ie, useAttrs as Le } from "vue";
+import { computed as i, ref as E, onMounted as Ne, onUnmounted as $e, watch as q, defineComponent as w, nextTick as me, toRef as j, useSlots as Me, useAttrs as we } from "vue";
 import { B as W } from "./typography.J1v_SPG3.js";
-import { B as ke } from "./loading-indicator.z8COalOc.js";
-import { B as De } from "./empty-state.mtXfb1BB.js";
-import { u as ee } from "./i18n.BQkEbtPM.js";
-import { d as Re } from "./debounce.DUTu11PS.js";
+import { B as Ge } from "./loading-indicator.z8COalOc.js";
+import { B as Pe } from "./empty-state.mtXfb1BB.js";
+import { u as se } from "./i18n.BQkEbtPM.js";
+import { d as Fe } from "./debounce.DUTu11PS.js";
 import "./index.Cl4_42j5.js";
-import { B as Be } from "./chip.OV0EWIP3.js";
-import { C as j, N as $e } from "./minus-small.DJacLGTw.js";
-import { C as Ne } from "./checkmark-small.DVDtD4HQ.js";
-import { n as N } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
-import { C as Me } from "./chevron-down.eYtgv5ly.js";
-import { C as we } from "./chevron-up.d8cwIlA_.js";
-import { B as $, a as te } from "./keyboard-navigation.pB8weElW.js";
-import { d as Ge, e as ue } from "./button-actions._OIvTdKt.js";
+import { B as Ye } from "./chip.OV0EWIP3.js";
+import { C as J, N as Ue } from "./minus-small.DJacLGTw.js";
+import { C as ze } from "./checkmark-small.DVDtD4HQ.js";
+import { n as $ } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import { C as Ve } from "./chevron-down.eYtgv5ly.js";
+import { C as We } from "./chevron-up.d8cwIlA_.js";
+import { B as N, a as le } from "./keyboard-navigation.pB8weElW.js";
+import { d as Ke, e as be } from "./button-actions._OIvTdKt.js";
 /* empty css              */
-import { o as Pe } from "./resize.Bqks3WUm.js";
+import { o as je } from "./resize.Bqks3WUm.js";
 import "../assets/use-cached-selected-values.css";
-const ve = (s, e, l, t) => {
-  const n = o(
+const _e = (s, e, l, t) => {
+  const n = i(
     () => {
-      var v, O;
-      return !!((v = s.value) != null && v.length) && ((O = s.value) == null ? void 0 : O.length) === e.value.length;
+      var f, I;
+      return !!((f = s.value) != null && f.length) && ((I = s.value) == null ? void 0 : I.length) === e.value.length;
     }
-  ), i = o(() => {
-    var v;
-    return s.value == null || s.value.length === 0 ? !1 : ((v = s.value) == null ? void 0 : v.length) !== e.value.length;
+  ), o = i(() => {
+    var f;
+    return s.value == null || s.value.length === 0 ? !1 : ((f = s.value) == null ? void 0 : f.length) !== e.value.length;
   });
   return {
     isAllSelected: n,
-    isIndeterminate: i,
-    toggleSelectAll: (v) => {
-      v ? l() : t();
+    isIndeterminate: o,
+    toggleSelectAll: (f) => {
+      f ? l() : t();
     }
   };
 };
-function Fe(s, { disabled: e, itemHeight: l, overscan: t = 5, prefixHeight: n }) {
-  const i = A(null), c = A([]), v = A(0), O = A(0), d = A(0);
-  let u;
-  const T = o(() => {
-    const C = typeof l == "number" ? s.value.length * l : s.value.reduce((E, S, m) => E + l(m), 0), I = typeof l == "number" ? v.value * l : s.value.slice(0, v.value).reduce((E, S, m) => E + l(m), 0);
+function qe(s, { disabled: e, itemHeight: l, overscan: t = 5, prefixHeight: n }) {
+  const o = E(null), r = E([]), f = E(0), I = E(0), d = E(0);
+  let b;
+  const O = i(() => {
+    const T = typeof l == "number" ? s.value.length * l : s.value.reduce((S, m, y) => S + l(y), 0), A = typeof l == "number" ? f.value * l : s.value.slice(0, f.value).reduce((S, m, y) => S + l(y), 0);
     return {
       style: {
-        marginTop: `${I}px`,
-        height: `${C - I}px`
+        marginTop: `${A}px`,
+        height: `${T - A}px`
       }
     };
-  }), b = () => {
-    const C = (n == null ? void 0 : n.value) ?? 0, I = Math.max(i.value.scrollTop - C, 0);
+  }), p = () => {
+    const T = (n == null ? void 0 : n.value) ?? 0, A = Math.max(o.value.scrollTop - T, 0);
     if (typeof l == "number")
-      return Math.floor(I / l);
-    let E = 0, S = 0;
-    for (let m = 0; m < s.value.length; m += 1) {
-      const p = l(m);
-      if (E += p, E >= I) {
-        S = m;
+      return Math.floor(A / l);
+    let S = 0, m = 0;
+    for (let y = 0; y < s.value.length; y += 1) {
+      const h = l(y);
+      if (S += h, S >= A) {
+        m = y;
         break;
       }
     }
-    return S;
+    return m;
   }, g = () => {
-    if (d.value = i.value.clientHeight, typeof l == "number")
+    if (d.value = o.value.clientHeight, typeof l == "number")
       return Math.ceil(d.value / l);
-    const C = v.value ?? 0;
-    let I = 0, E = 0;
-    for (let S = C; S < s.value.length; S += 1) {
-      const m = l(S);
-      if (I += m, E = S, I > d.value)
+    const T = f.value ?? 0;
+    let A = 0, S = 0;
+    for (let m = T; m < s.value.length; m += 1) {
+      const y = l(m);
+      if (A += y, S = m, A > d.value)
         break;
     }
-    return E - C;
-  }, h = () => {
-    if (i.value) {
-      const C = g();
-      v.value = b(), O.value = Math.min(v.value + C + t, s.value.length), c.value = s.value.slice(v.value, O.value);
+    return S - T;
+  }, C = () => {
+    if (o.value) {
+      const T = g();
+      f.value = p(), I.value = Math.min(f.value + T + t, s.value.length), r.value = s.value.slice(f.value, I.value);
     }
-  }, B = () => {
-    h();
+  }, D = () => {
+    C();
   };
-  e || (Te(() => {
-    i.value && (d.value = i.value.clientHeight, u = Pe(i.value, ({ clientHeight: C }) => {
-      d.value = C, h();
-    }), h());
-  }), Ae(() => {
-    u == null || u.disconnect();
-  }), z(
+  e || (Ne(() => {
+    o.value && (d.value = o.value.clientHeight, b = je(o.value, ({ clientHeight: T }) => {
+      d.value = T, C();
+    }), C());
+  }), $e(() => {
+    b == null || b.disconnect();
+  }), q(
     () => s.value,
     () => {
-      h();
+      C();
     }
   ));
   const L = {
-    ref: i,
+    ref: o,
     style: { overflowY: "auto" }
   };
   return e ? {
-    containerRef: i,
+    containerRef: o,
     containerProps: L,
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     onScroll: () => {
     },
     list: s
   } : {
-    containerRef: i,
+    containerRef: o,
     containerProps: L,
-    onScroll: B,
-    list: c,
-    wrapperProps: T
+    onScroll: D,
+    list: r,
+    wrapperProps: O
   };
 }
-var a = /* @__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))(a || {}), U = /* @__PURE__ */ ((s) => (s.AUTOMATIC = "automatic", s.BUTTON = "button", s.NONE = "none", s))(U || {});
-const Ye = w({
+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 || {}), V = /* @__PURE__ */ ((s) => (s.AUTOMATIC = "automatic", s.BUTTON = "button", s.NONE = "none", s))(V || {});
+const He = w({
   name: "bento-listbox-static-category",
   components: {
     BentoTypography: W
@@ -124,18 +124,18 @@ const Ye = w({
     }
   }
 });
-var Ue = function() {
+var Xe = function() {
   var e = this, l = e._self._c;
   return e._self._setupProxy, l("div", { staticClass: "b-listbox-single-select-category" }, [l("bento-typography", { staticClass: "b-listbox-single-select-category__label-text", attrs: { variant: "caption", el: "span" } }, [e._v(" " + e._s(e.categoryLabel) + " ")]), l("div", [e._t("default")], 2)], 1);
-}, ze = [], We = /* @__PURE__ */ N(
-  Ye,
-  Ue,
-  ze,
+}, Je = [], Ze = /* @__PURE__ */ $(
+  He,
+  Xe,
+  Je,
   !1,
   null,
   "4aa8cc6e"
 );
-const Ke = We.exports, Ve = w({
+const Qe = Ze.exports, et = w({
   name: "bento-listbox-option",
   props: {
     /**
@@ -147,29 +147,29 @@ const Ke = We.exports, Ve = w({
      */
     selected: { type: Boolean, default: !1 }
   },
-  emits: [a.CLICK, a.ENTER, a.SPACE, a.TAB],
+  emits: [c.CLICK, c.ENTER, c.SPACE, c.TAB],
   setup(s, { emit: e }) {
-    const l = o(() => ({
+    const l = i(() => ({
       "b-listbox-option--disabled": s.disabled,
       "b-listbox-option--selected": s.selected
     }));
     return {
       // Enums
-      BentoKeyboardNavigationKeyDownEvent: $,
-      BentoListboxEvent: a,
+      BentoKeyboardNavigationKeyDownEvent: N,
+      BentoListboxEvent: c,
       // Values
       conditionalClasses: l,
       // Events
-      onClick: (i) => {
-        e(a.CLICK, i);
+      onClick: (o) => {
+        e(c.CLICK, o);
       },
-      onOptionSelected: (i, c) => {
-        e(i, c);
+      onOptionSelected: (o, r) => {
+        e(o, r);
       }
     };
   }
 });
-var qe = function() {
+var tt = 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);
@@ -178,38 +178,38 @@ var qe = 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);
-}, je = [], He = /* @__PURE__ */ N(
-  Ve,
-  qe,
-  je,
+}, st = [], lt = /* @__PURE__ */ $(
+  et,
+  tt,
+  st,
   !1,
   null,
   "a1e9ebff"
 );
-const H = He.exports;
-let de = 0;
-const Xe = {
+const Z = lt.exports;
+let fe = 0;
+const nt = {
   beforeCreate() {
-    this.uuid = de.toString(), de += 1;
+    this.uuid = fe.toString(), fe += 1;
   }
 };
-var Je = function() {
+var ot = 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" } })]);
-}, Ze = [], Qe = /* @__PURE__ */ N(
-  Xe,
-  Je,
-  Ze,
+}, it = [], at = /* @__PURE__ */ $(
+  nt,
+  ot,
+  it,
   !1,
   null,
   null
 );
-const et = Qe.exports, tt = w({
+const ct = at.exports, rt = w({
   name: "bento-listbox-single-select-option",
   components: {
-    BentoListboxOption: H,
+    BentoListboxOption: Z,
     BentoTypography: W,
-    CheckmarkIcon: et
+    CheckmarkIcon: ct
   },
   props: {
     /**
@@ -229,24 +229,24 @@ const et = Qe.exports, tt = w({
      */
     selected: { type: Boolean, default: !1 }
   },
-  emits: [a.ENTER, a.SELECT, a.SPACE, a.TAB],
+  emits: [c.ENTER, c.SELECT, c.SPACE, c.TAB],
   setup(s, { emit: e }) {
-    const l = (c) => {
-      s.disabled || e(c, s.option);
-    }, t = o(() => s.disabled ? !0 : null), n = o(() => s.selected ? !0 : null), i = o(() => s.disabled ? -1 : 0);
+    const l = (r) => {
+      s.disabled || e(r, s.option);
+    }, t = i(() => s.disabled ? !0 : null), n = i(() => s.selected ? !0 : null), o = i(() => s.disabled ? -1 : 0);
     return {
       // Values
       ariaDisabled: t,
       ariaSelected: n,
-      tabIndex: i,
+      tabIndex: o,
       // Enums
-      BentoListboxEvent: a,
+      BentoListboxEvent: c,
       // Events
       onOptionSelected: l
     };
   }
 });
-var st = function() {
+var ut = 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);
@@ -259,17 +259,17 @@ var st = 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);
-}, lt = [], nt = /* @__PURE__ */ N(
-  tt,
-  st,
-  lt,
+}, dt = [], bt = /* @__PURE__ */ $(
+  rt,
+  ut,
+  dt,
   !1,
   null,
   "5a5ff36a"
 );
-const it = nt.exports, _e = ({ items: s }, e) => {
-  const l = o(() => s.value.length - 1), t = A(0), n = (b) => {
-    switch (b) {
+const ft = bt.exports, pe = ({ items: s }, e) => {
+  const l = i(() => s.value.length - 1), t = E(0), n = (p) => {
+    switch (p) {
       case "increase":
         t.value += 1;
         break;
@@ -277,50 +277,69 @@ const it = nt.exports, _e = ({ items: s }, e) => {
         t.value -= 1;
         break;
     }
-  }, i = ({ edgeCaseItem: b }, g) => {
-    t.value !== b && (n(g), e(t.value));
-  }, c = (b) => {
-    T(b), i(
+  }, o = ({ edgeCaseItem: p }, g) => {
+    t.value !== p && (n(g), e(t.value));
+  }, r = (p) => {
+    O(p), o(
       {
         edgeCaseItem: l.value
       },
       "increase"
       /* INCREASE */
     );
-  }, v = (b) => {
-    T(b), i(
+  }, f = (p) => {
+    O(p), o(
       {
         edgeCaseItem: 0
       },
       "decrease"
       /* DECREASE */
     );
-  }, O = () => {
+  }, I = () => {
     t.value = 0, e(t.value);
   }, d = () => {
     t.value = l.value, e(t.value);
-  }, u = (b) => {
-    t.value = b;
-  }, T = (b) => {
+  }, b = (p) => {
+    t.value = p;
+  }, O = (p) => {
     var g;
-    (g = b == null ? void 0 : b.detail) == null || g.preventDefault();
+    (g = p == null ? void 0 : p.detail) == null || g.preventDefault();
   };
   return {
-    moveToFirstElement: O,
+    moveToFirstElement: I,
     moveToLastElement: d,
-    moveToNextElement: c,
-    moveToPreviousElement: v,
-    setListboxFocusedIndex: u,
-    preventDefault: T,
+    moveToNextElement: r,
+    moveToPreviousElement: f,
+    setListboxFocusedIndex: b,
+    preventDefault: O,
     focusedIndex: t
   };
-}, ot = w({
+}, ge = (s, e, l = E("option"), t = !0) => {
+  const n = E([]), o = async () => {
+    if (!s.value || s.value.nodeType === Node.COMMENT_NODE)
+      return;
+    const r = Array.from(s.value.querySelectorAll(`[role="${l.value}"]`));
+    n.value = t ? r.filter((f) => f.checkVisibility()) : r;
+  };
+  return q(
+    e,
+    () => {
+      me(() => {
+        o();
+      });
+    },
+    { immediate: !0 }
+  ), {
+    visibleDomOptions: n,
+    updateVisibleDomOptions: o
+  };
+}, vt = w({
   name: "bento-listbox-single-select",
   components: {
-    BentoListboxSingleSelectCategory: Ke,
-    BentoListboxSingleSelectOption: it
+    BentoListboxSingleSelectCategory: Qe,
+    BentoListboxSingleSelectOption: ft
   },
-  directives: { BentoKeyboardNavigationDirective: te },
+  directives: { BentoKeyboardNavigationDirective: le },
   inheritAttrs: !1,
   props: {
     /**
@@ -361,115 +380,105 @@ const it = nt.exports, _e = ({ items: s }, e) => {
      */
     staticCategories: { type: Boolean, default: !1 }
   },
-  emits: [a.SELECT, a.ENTER, a.SPACE, a.TAB],
+  emits: [c.SELECT, c.ENTER, c.SPACE, c.TAB],
   setup(s, { emit: e, expose: l, slots: t, attrs: n }) {
-    const i = A(null), c = A([]), v = o(() => {
+    const o = E(null), r = E([]), f = i(() => {
       var m;
       return !!((m = s.selectedValue) != null && m.length) && s.selectedValue.at(0);
-    }), O = o(
+    }), I = i(
       () => {
-        var m, p, D, k;
+        var m, y, h, k;
         return {
           "aria-label": (m = n["aria-label"]) == null ? void 0 : m.toString(),
-          "aria-busy": (p = n["aria-busy"]) == null ? void 0 : p.toString(),
-          "aria-atomic": (D = n["aria-atomic"]) == null ? void 0 : D.toString(),
+          "aria-busy": (y = n["aria-busy"]) == null ? void 0 : y.toString(),
+          "aria-atomic": (h = n["aria-atomic"]) == null ? void 0 : h.toString(),
           "aria-live": (k = n["aria-live"]) == null ? void 0 : k.toString()
         };
       }
-    ), d = o(() => !!s.items.some(({ items: m }) => !!m)), u = (m) => (p) => {
-      e(m, [p]);
-    }, T = async () => {
-      await fe(), i.value && (b.value = Array.from(i.value.querySelectorAll('[role="option"]')));
-    }, b = A([]), g = (m) => {
-      var p;
-      (p = b.value[m]) == null || p.focus();
+    ), d = i(() => !!s.items.some(({ items: m }) => !!m)), b = (m) => (y) => {
+      e(m, [y]);
+    }, { visibleDomOptions: O } = ge(o, j(s, "items"), E("option"), !1), p = (m) => {
+      var y;
+      (y = O.value[m]) == null || y.focus();
     }, {
-      moveToNextElement: h,
-      moveToPreviousElement: B,
-      moveToFirstElement: L,
-      moveToLastElement: C,
-      setListboxFocusedIndex: I
-    } = _e(
+      moveToNextElement: g,
+      moveToPreviousElement: C,
+      moveToFirstElement: D,
+      moveToLastElement: L,
+      setListboxFocusedIndex: T
+    } = pe(
       {
-        items: b
-      },
-      g
-    );
-    z(
-      () => s.items,
-      () => {
-        T();
+        items: O
       },
-      { immediate: !0 }
-    );
-    const E = {
-      [$.ARROW_UP]: B,
-      [$.ARROW_DOWN]: h,
-      [$.HOME]: L,
-      [$.END]: C
+      p
+    ), A = {
+      [N.ARROW_UP]: C,
+      [N.ARROW_DOWN]: g,
+      [N.HOME]: D,
+      [N.END]: L
     }, S = {
-      [a.SELECT]: u(a.SELECT),
-      [a.SPACE]: u(a.SPACE),
-      [a.TAB]: u(a.TAB),
-      [a.ENTER]: u(a.ENTER)
+      [c.SELECT]: b(c.SELECT),
+      [c.SPACE]: b(c.SPACE),
+      [c.TAB]: b(c.TAB),
+      [c.ENTER]: b(c.ENTER)
     };
     return l({
       /**
        * Reference for a single listbox item.
        * Required for keyboard navigation in dropdown as $children is removed in vue@3
        */
-      listboxItemRef: c,
+      listboxItemRef: r,
       /**
        * 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: T
     }), {
       // Enums
-      BentoListboxEvent: a,
+      BentoListboxEvent: c,
       // Values
-      listboxRef: i,
-      listboxItemRef: c,
-      selectedItem: v,
+      listboxRef: o,
+      listboxItemRef: r,
+      selectedItem: f,
       slots: t,
-      ariaAttributes: O,
+      ariaAttributes: I,
       // Computed
       hasCategories: d,
       // Methods
-      onOptionSelected: u,
+      onOptionSelected: b,
       // Keyboard navigation
-      listboxListeners: E,
+      listboxListeners: A,
       listboxOptionListeners: S
     };
   }
 });
-var at = function() {
+var mt = 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, role: "group" } }, e._l(t.items, function(n) {
-      return l("bento-listbox-single-select-option", e._g({ key: n.value, ref: "listboxItemRef", refInFor: !0, attrs: { role: "option", option: n, disabled: e.isOptionDisabled ? e.isOptionDisabled(n) : null, selected: n.value === e.selectedItem.value }, scopedSlots: e._u([e._l(e.slots, function(i, c) {
-        return { key: c, fn: function(v) {
-          return [e._t(c, null, null, v)];
+      return l("bento-listbox-single-select-option", e._g({ key: n.value, ref: "listboxItemRef", refInFor: !0, attrs: { role: "option", option: n, disabled: e.isOptionDisabled ? e.isOptionDisabled(n) : null, selected: n.value === e.selectedItem.value }, scopedSlots: e._u([e._l(e.slots, function(o, r) {
+        return { key: r, fn: function(f) {
+          return [e._t(r, 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(n, i) {
-      return { key: i, fn: function(c) {
-        return [e._t(i, null, null, c)];
+    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(n, o) {
+      return { key: o, fn: function(r) {
+        return [e._t(o, null, null, r)];
       } };
     })], null, !0) }, e.listboxOptionListeners));
   })], 2);
-}, ct = [], rt = /* @__PURE__ */ N(
-  ot,
-  at,
-  ct,
+}, _t = [], pt = /* @__PURE__ */ $(
+  vt,
+  mt,
+  _t,
   !1,
   null,
   null
 );
-const ut = rt.exports, dt = {}, bt = /* @__PURE__ */ w({
-  ...dt,
+const gt = pt.exports, yt = {}, xt = /* @__PURE__ */ w({
+  ...yt,
   __name: "listbox-decorative-checkbox",
   props: {
     disabled: { type: Boolean, default: !1 },
@@ -477,43 +486,43 @@ const ut = rt.exports, dt = {}, bt = /* @__PURE__ */ w({
     checked: { type: Boolean, default: !1 }
   },
   setup(s) {
-    const e = s, l = o(() => ({
-      [`b-checkbox-input--${j.DISABLED}`]: e.disabled
-    })), t = o(() => ({
-      [`b-checkbox-input__outline--${j.UNCHECKED}`]: !e.checked && !e.indeterminate,
-      [`b-checkbox-input__outline--${j.CHECKED}`]: e.checked && !e.indeterminate,
-      [`b-checkbox-input__outline--${j.INDETERMINATE}`]: e.indeterminate
+    const e = s, l = i(() => ({
+      [`b-checkbox-input--${J.DISABLED}`]: e.disabled
+    })), t = i(() => ({
+      [`b-checkbox-input__outline--${J.UNCHECKED}`]: !e.checked && !e.indeterminate,
+      [`b-checkbox-input__outline--${J.CHECKED}`]: e.checked && !e.indeterminate,
+      [`b-checkbox-input__outline--${J.INDETERMINATE}`]: e.indeterminate
     }));
-    return { __sfc: !0, props: e, conditionalClasses: l, outlineConditionalClasses: t, CheckmarkSmallIcon: Ne, MinusSmallIcon: $e };
+    return { __sfc: !0, props: e, conditionalClasses: l, outlineConditionalClasses: t, CheckmarkSmallIcon: ze, MinusSmallIcon: Ue };
   }
 });
-var ft = function() {
+var ht = 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.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);
-}, vt = [], _t = /* @__PURE__ */ N(
-  bt,
-  ft,
-  vt,
+}, Ct = [], St = /* @__PURE__ */ $(
+  xt,
+  ht,
+  Ct,
   !1,
   null,
   "5dc60f05"
 );
-const se = _t.exports;
-var me = /* @__PURE__ */ ((s) => (s.DISABLED = "disabled", s.STATIC_CATEGORY = "static-category", s))(me || {}), Y = /* @__PURE__ */ ((s) => (s.SELECT_CATEGORY = "select-category", s.UNSELECT_CATEGORY = "unselect-category", s.TOGGLE_CATEGORY_VISIBILITY = "toggle-category-visibility", s))(Y || {});
-const mt = {
+const ne = St.exports;
+var ye = /* @__PURE__ */ ((s) => (s.DISABLED = "disabled", s.STATIC_CATEGORY = "static-category", s))(ye || {}), Y = /* @__PURE__ */ ((s) => (s.SELECT_CATEGORY = "select-category", s.UNSELECT_CATEGORY = "unselect-category", s.TOGGLE_CATEGORY_VISIBILITY = "toggle-category-visibility", s))(Y || {});
+const Et = {
   "en-US": {
     categoryClosed: "{category} closed",
     categoryOpened: "{category} opened"
   }
-}, pt = w({
-  i18n: { messages: mt },
+}, Ot = w({
+  i18n: { messages: Et },
   name: "bento-listbox-multi-select-category",
   components: {
     BentoTypography: W,
-    BentoListboxOption: H,
-    ChevronDownIcon: Me,
-    ChevronUpIcon: we,
-    ListboxDecorativeCheckbox: se
+    BentoListboxOption: Z,
+    ChevronDownIcon: Ve,
+    ChevronUpIcon: We,
+    ListboxDecorativeCheckbox: ne
   },
   props: {
     /**
@@ -564,92 +573,97 @@ const mt = {
     Y.TOGGLE_CATEGORY_VISIBILITY
   ],
   setup(s, { emit: e }) {
-    const l = A(!1), { t } = ee(), n = (p) => s.isOptionDisabled ? s.isOptionDisabled(p) : !1, i = o(
-      () => s.category.items.every((p) => n(p))
-    ), c = Q(s, "staticCategories"), v = o(() => l.value || s.staticCategories), O = o(() => ({
-      [`b-listbox-multi-select-category--${me.DISABLED}`]: i.value
-    })), d = (p) => {
-      p.preventDefault(), l.value = !l.value, e(Y.TOGGLE_CATEGORY_VISIBILITY);
-    }, u = (p) => {
-      var P;
-      const D = n(p), k = ((P = s.selectedItemsList) == null ? void 0 : P.includes(p.value)) || !1;
-      return { isDisabled: D, isPreSelected: k };
-    }, T = o(
-      () => s.category.items.filter((p) => {
-        const { isDisabled: D, isPreSelected: k } = u(p);
-        return D && k || !D;
+    const l = E(!1), { t } = se(), n = (h) => s.isOptionDisabled ? s.isOptionDisabled(h) : !1, o = i(
+      () => s.category.items.every((h) => n(h))
+    ), r = j(s, "staticCategories"), f = i(() => l.value || s.staticCategories), I = i(() => ({
+      [`b-listbox-multi-select-category--${ye.DISABLED}`]: o.value
+    })), d = (h, k) => {
+      h.preventDefault(), l.value = k !== void 0 ? k : !l.value, e(Y.TOGGLE_CATEGORY_VISIBILITY, s.category.value);
+    }, b = (h) => {
+      var G;
+      const k = n(h), B = ((G = s.selectedItemsList) == null ? void 0 : G.includes(h.value)) || !1;
+      return { isDisabled: k, isPreSelected: B };
+    }, O = i(
+      () => s.category.items.filter((h) => {
+        const { isDisabled: k, isPreSelected: B } = b(h);
+        return k && B || !k;
       })
-    ), b = o(
+    ), p = i(
       () => {
-        var p;
-        return (p = T.value) == null ? void 0 : p.filter(
-          ({ value: D }) => {
-            var k;
-            return (k = s.selectedItemsList) == null ? void 0 : k.includes(D);
+        var h;
+        return (h = O.value) == null ? void 0 : h.filter(
+          ({ value: k }) => {
+            var B;
+            return (B = s.selectedItemsList) == null ? void 0 : B.includes(k);
           }
         );
       }
-    ), g = o(() => {
-      const p = l.value ? "categoryOpened" : "categoryClosed";
-      return t(p, { category: s.category.label });
-    }), h = () => {
+    ), g = i(() => {
+      const h = l.value ? "categoryOpened" : "categoryClosed";
+      return t(h, { category: s.category.label });
+    }), C = () => {
       e(Y.SELECT_CATEGORY);
-    }, B = () => {
+    }, D = () => {
       e(Y.UNSELECT_CATEGORY);
-    }, { isAllSelected: L, isIndeterminate: C, toggleSelectAll: I } = ve(
-      b,
-      T,
-      h,
-      B
-    ), E = o(() => C.value ? "mixed" : `${L.value}`), S = A(L.value), m = () => {
-      S.value = !S.value, I(S.value);
+    }, { isAllSelected: L, isIndeterminate: T, toggleSelectAll: A } = _e(
+      p,
+      O,
+      C,
+      D
+    ), S = i(() => T.value ? "mixed" : `${L.value}`), m = E(L.value), y = () => {
+      m.value = !m.value, A(m.value);
     };
-    return z(L, () => {
-      S.value = L.value;
+    return q(L, () => {
+      m.value = L.value;
     }), {
       // Values
       chevronTitle: g,
-      conditionalClass: O,
-      hasAllPropsDisabled: i,
+      conditionalClass: I,
+      hasAllPropsDisabled: o,
       isOpen: l,
       isAllSelected: L,
-      isIndeterminate: C,
-      isStaticCategory: c,
+      isIndeterminate: T,
+      isStaticCategory: r,
       // Computed
-      showItemChildren: v,
-      ariaCheckedComputed: E,
+      showItemChildren: f,
+      ariaCheckedComputed: S,
       // Methods
-      handleSelectAll: m,
+      handleSelectAll: y,
       toggleOpen: d,
-      toggleSelectAll: I
+      toggleSelectAll: A
     };
   }
 });
-var gt = function() {
+var Tt = 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" }, [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-checked": e.ariaCheckedComputed, "aria-disabled": e.hasAllPropsDisabled }, on: { click: e.handleSelectAll, "enter-pressed": e.handleSelectAll, "space-pressed": function(t) {
+  return e._self._setupProxy, l("div", [e.isStaticCategory ? l("div", { staticClass: "b-listbox-multi-select-category b-listbox-multi-select-category--static-category" }, [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-checked": e.ariaCheckedComputed, "aria-disabled": e.hasAllPropsDisabled, "aria-expanded": e.isOpen, role: "treeitem" }, on: { click: e.handleSelectAll, "enter-pressed": e.handleSelectAll, "space-pressed": function(t) {
     return t.preventDefault(), e.handleSelectAll.apply(null, arguments);
-  } } }, [l("listbox-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: { el: "span" } }, [e._v(" " + e._s(e.category.label) + " ")]), l("div", { staticClass: "b-listbox-multi-select-category__label-chevron", attrs: { "data-testid": "toggle-listbox" }, on: { "!click": function(t) {
+  } }, 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("listbox-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: { el: "span" } }, [e._v(" " + e._s(e.category.label) + " ")]), l("div", { staticClass: "b-listbox-multi-select-category__label-chevron", attrs: { "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" }] }, [e._t("default")], 2)], 1);
-}, yt = [], ht = /* @__PURE__ */ N(
-  pt,
-  gt,
-  yt,
+}, It = [], At = /* @__PURE__ */ $(
+  Ot,
+  Tt,
+  It,
   !1,
   null,
-  "a2ed984e"
+  "e1e7494c"
 );
-const xt = ht.exports;
+const Lt = At.exports;
 var M = /* @__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))(M || {});
-const Ct = w({
+const kt = w({
   name: "listbox-multi-select-options",
   components: {
-    BentoListboxOption: H,
+    BentoListboxOption: Z,
     BentoTypography: W,
-    ListboxMultiSelectCategory: xt,
-    ListboxDecorativeCheckbox: se
+    ListboxMultiSelectCategory: Lt,
+    ListboxDecorativeCheckbox: ne
   },
+  inheritAttrs: !1,
   props: {
     /**
      * Indicates if the items listed are inside a category
@@ -707,7 +721,14 @@ const Ct = w({
     /**
      * If enabled, dropdown will display non-selectable, static categories
      */
-    staticCategories: { type: Boolean, default: !1 }
+    staticCategories: { type: Boolean, default: !1 },
+    /**
+     * Object with the index of each item.
+     */
+    itemsIndex: {
+      type: Object,
+      default: () => ({})
+    }
   },
   emits: [
     M.TOGGLE_CHECKBOX_SELECTION,
@@ -719,89 +740,101 @@ const Ct = w({
     const l = (d) => {
       s.isOptionDisabled(d) || e(M.TOGGLE_CHECKBOX_SELECTION, d);
     }, t = (d) => !!d.items, n = (d) => {
-      const u = s.isMultiLevel && s.searching;
-      return d.description && (!s.isMultiLevel || u);
-    }, i = (d) => d.items ? !!d.items.find((u) => s.selectedItemsList.includes(u.value)) : s.selectedItemsList.includes(d.value), c = (d) => {
+      const b = s.isMultiLevel && s.searching;
+      return d.description && (!s.isMultiLevel || b);
+    }, o = (d) => d.items ? !!d.items.find((b) => s.selectedItemsList.includes(b.value)) : s.selectedItemsList.includes(d.value), r = (d) => {
       if (t(d)) {
-        const u = i(d) ? M.UNSELECT_CATEGORY : M.SELECT_CATEGORY;
-        e(u, d);
+        const b = o(d) ? M.UNSELECT_CATEGORY : M.SELECT_CATEGORY;
+        e(b, d);
       } else
         l(d);
     };
     return {
       // Values
-      conditionalClasses: o(() => ({
+      conditionalClasses: i(() => ({
         "b-listbox-multi-select-options__static-category-option": s.staticCategories,
         "b-listbox-multi-select-options__category-option": s.categoryItems
       })),
       // Methods
-      isOptionSelected: i,
+      isOptionSelected: o,
       shouldShowDescription: n,
       toggleCheckboxSelection: l,
-      toggleSearchOption: c,
-      computedTabindex: (d) => d + 1 === s.focusedIndex ? 0 : -1,
+      toggleSearchOption: r,
+      computedTabindex: (d) => s.itemsIndex[d] === s.focusedIndex ? 0 : -1,
       // Enums
-      BentoListboxEvent: a,
+      BentoListboxEvent: c,
       ListboxMultiSelectOptionsEvent: M
     };
   }
 });
-var St = function() {
+var Rt = function() {
   var e = this, l = e._self._c;
-  return e._self._setupProxy, l("div", e._l(e.items, function(t, n) {
-    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(n), "aria-checked": `${e.isOptionSelected(t)}`, "aria-disabled": e.isOptionDisabled ? e.isOptionDisabled(t) : null }, on: { click: function(i) {
+  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-checked": `${e.isOptionSelected(t)}`, "aria-disabled": e.isOptionDisabled ? e.isOptionDisabled(t) : null, role: e.$attrs.role }, on: { click: function(n) {
       return e.toggleSearchOption(t);
-    }, "enter-pressed": function(i) {
+    }, "enter-pressed": function(n) {
       return e.toggleSearchOption(t);
-    }, "space-pressed": function(i) {
-      return i.preventDefault(), e.toggleSearchOption(t);
+    }, "space-pressed": function(n) {
+      return n.preventDefault(), e.toggleSearchOption(t);
     } } }, [l("listbox-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(n) }, on: { "select-category": function(i) {
+    }, 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(n) {
       return e.$emit(e.ListboxMultiSelectOptionsEvent.SELECT_CATEGORY, t);
-    }, "unselect-category": function(i) {
+    }, "unselect-category": function(n) {
       return e.$emit(e.ListboxMultiSelectOptionsEvent.UNSELECT_CATEGORY, t);
-    }, "toggle-category-visibility": function(i) {
-      return e.$emit(e.ListboxMultiSelectOptionsEvent.TOGGLE_CATEGORY_VISIBILITY);
-    } } }, [l("listbox-multi-select-options", { attrs: { "category-items": "", items: t.items, "is-option-disabled": e.isOptionDisabled, "focused-index": e.focusedIndex, "is-multi-level": e.isMultiLevel, "static-categories": e.staticCategories, "selected-items-list": e.selectedItemsList, searching: e.searching }, on: { "toggle-checkbox-selection": (i) => e.toggleCheckboxSelection(i) } })], 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(n), "aria-checked": `${e.isOptionSelected(t)}`, "aria-disabled": e.isOptionDisabled ? e.isOptionDisabled(t) : null }, on: { click: function(i) {
+    }, "toggle-category-visibility": function(n) {
+      return e.$emit(e.ListboxMultiSelectOptionsEvent.TOGGLE_CATEGORY_VISIBILITY, n);
+    } } }, [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 }, on: { "toggle-checkbox-selection": (n) => e.toggleCheckboxSelection(n) } })], 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-checked": `${e.isOptionSelected(t)}`, "aria-disabled": e.isOptionDisabled ? e.isOptionDisabled(t) : null, role: e.$attrs.role }, on: { click: function(n) {
       return e.toggleCheckboxSelection(t);
-    }, "enter-pressed": function(i) {
+    }, "enter-pressed": function(n) {
       return e.toggleCheckboxSelection(t);
-    }, "space-pressed": function(i) {
-      return i.preventDefault(), e.toggleCheckboxSelection(t);
+    }, "space-pressed": function(n) {
+      return n.preventDefault(), e.toggleCheckboxSelection(t);
     } } }, [l("listbox-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)]], 2);
   }), 0);
-}, Et = [], Ot = /* @__PURE__ */ N(
-  Ct,
-  St,
-  Et,
+}, Dt = [], Bt = /* @__PURE__ */ $(
+  kt,
+  Rt,
+  Dt,
   !1,
   null,
-  "e4488ed3"
+  "4c869a48"
 );
-const Tt = Ot.exports, At = (s) => {
-  const e = o(() => {
+const Nt = Bt.exports, $t = (s) => {
+  const e = i(() => {
     var t;
     return !!((t = s.value) != null && t.find(({ items: n }) => !!n));
-  }), l = o(() => {
+  }), l = i(() => {
     var t;
-    return e.value ? (t = s.value) == null ? void 0 : t.reduce((n, i) => (i.items ? n.push(...i.items.flat()) : n.push(i), n), []) : s.value;
+    return e.value ? (t = s.value) == null ? void 0 : t.reduce((n, o) => (o.items ? n.push(...o.items.flat()) : n.push(o), n), []) : s.value;
   });
   return {
     isMultiLevelSelect: e,
     flattenedItemsList: l
   };
-}, It = {
+}, Mt = {
   "en-US": {
     allSelected: "All selected ({total})",
     numberOfTotalSelected: "{number} of {total} selected",
     numbersSelected: "{number} selected",
     selectAll: "Select all ({total})"
+  },
+  "ja-JP": {
+    allSelected: "すべて選択済み ({total})",
+    numberOfTotalSelected: "{total}件中{number}件を選択済み",
+    numbersSelected: "{number}件を選択済み",
+    selectAll: "すべて選択 ({total})"
+  },
+  "pt-BR": {
+    allSelected: "Todos selecionados ({total})",
+    numberOfTotalSelected: "{number} de {total} selecionados",
+    numbersSelected: "{number} selecionados",
+    selectAll: "Selecionar todos ({total})"
   }
-}, Lt = { i18n: { messages: It } }, kt = /* @__PURE__ */ w({
-  ...Lt,
+}, wt = { i18n: { messages: Mt } }, Gt = /* @__PURE__ */ w({
+  ...wt,
   __name: "listbox-multi-select",
   props: {
     hasMoreItems: { type: Boolean, default: !1 },
@@ -814,166 +847,172 @@ const Tt = Ot.exports, At = (s) => {
   },
   emits: ["select"],
   setup(s, { expose: e, emit: l }) {
-    const t = s, { t: n } = ee(), i = Ie(), c = Le(), v = o(
+    const t = s, { t: n, n: o } = se(), r = Me(), f = we(), I = i(
       () => {
-        var r, f, _, x;
+        var a, u, v, x;
         return {
-          "aria-label": (r = c["aria-label"]) == null ? void 0 : r.toString(),
-          "aria-busy": (f = c["aria-busy"]) == null ? void 0 : f.toString(),
-          "aria-atomic": (_ = c["aria-atomic"]) == null ? void 0 : _.toString(),
-          "aria-live": (x = c["aria-live"]) == null ? void 0 : x.toString()
+          "aria-label": (a = f["aria-label"]) == null ? void 0 : a.toString(),
+          "aria-busy": (u = f["aria-busy"]) == null ? void 0 : u.toString(),
+          "aria-atomic": (v = f["aria-atomic"]) == null ? void 0 : v.toString(),
+          "aria-live": (x = f["aria-live"]) == null ? void 0 : x.toString(),
+          "aria-multiselectable": !0
         };
       }
-    ), O = A(null), d = A(null), u = A(null), T = A(null), b = o(() => t.selectedValues.map(({ value: r }) => r)), { isMultiLevelSelect: g, flattenedItemsList: h } = At(Q(t, "items")), B = (r) => {
+    ), d = E(null), b = E(null), O = E(null), p = E(null), g = i(() => t.selectedValues.map(({ value: a }) => a)), { isMultiLevelSelect: C, flattenedItemsList: D } = $t(j(t, "items")), L = i(() => C.value && !t.staticCategories), T = i(() => L.value ? "tree" : "listbox"), A = i(() => L.value ? "treeitem" : "option"), S = (a) => {
       var x;
-      const f = t.isOptionDisabled(r), _ = ((x = b.value) == null ? void 0 : x.includes(r.value)) || !1;
-      return { isDisabled: f, isPreSelected: _ };
-    }, L = o(() => {
-      if (t.searching && g)
+      const u = t.isOptionDisabled(a), v = ((x = g.value) == null ? void 0 : x.includes(a.value)) || !1;
+      return { isDisabled: u, isPreSelected: v };
+    }, m = i(() => {
+      if (t.searching && C)
         return t.items;
-      const r = h.value.filter((f) => {
-        const { isDisabled: _, isPreSelected: x } = B(f);
-        return _ && x || !_;
+      const a = D.value.filter((u) => {
+        const { isDisabled: v, isPreSelected: x } = S(u);
+        return v && x || !v;
       });
-      return t.selectedValues.forEach((f) => {
-        r.find((_) => _.value === f.value) || r.push(f);
-      }), r;
-    }), C = o(
+      return t.selectedValues.forEach((u) => {
+        a.find((v) => v.value === u.value) || a.push(u);
+      }), a;
+    }), y = i(
       () => {
-        var r;
-        return (r = L.value) == null ? void 0 : r.filter((f) => {
-          var _;
-          return f.items && g.value && t.searching ? f.items.filter(
-            (y) => (t.selectedValues ?? []).includes(y.value)
-          ).length === f.items.length : (_ = b.value) == null ? void 0 : _.includes(f.value);
+        var a;
+        return (a = m.value) == null ? void 0 : a.filter((u) => {
+          var v;
+          return u.items && C.value && t.searching ? u.items.filter(
+            (_) => (t.selectedValues ?? []).includes(_.value)
+          ).length === u.items.length : (v = g.value) == null ? void 0 : v.includes(u.value);
         });
       }
-    ), I = () => g.value && !t.searching ? h.value.length : t.items.length, E = o(() => {
+    ), h = () => C.value && !t.searching ? D.value.length : t.items.length, k = i(() => {
       var x;
-      const r = L.value.length, f = I(), _ = ((x = C.value) == null ? void 0 : x.length) || 0;
-      return _ === 0 ? n("selectAll", { total: r }) : _ === f ? n("allSelected", { total: f }) : _ <= f ? n("numberOfTotalSelected", { number: _, total: f }) : n("numbersSelected", { number: _ });
-    }), S = (r) => {
-      const f = (x) => {
-        const { isDisabled: y, isPreSelected: G } = B(x);
-        return y && G || !y;
-      }, _ = r.filter(f).filter((x) => !b.value.includes(x.value));
-      l("select", [...t.selectedValues, ..._]);
-    }, m = (r) => {
-      const f = (y) => {
-        const { isDisabled: G, isPreSelected: Oe } = B(y);
-        return !(G && Oe);
-      }, _ = r.filter(f).map(({ value: y }) => y), x = t.selectedValues.filter((y) => !(_ != null && _.includes(y.value)));
+      const a = m.value.length, u = h(), v = ((x = y.value) == null ? void 0 : x.length) || 0;
+      return v === 0 ? n("selectAll", { total: o(a) }) : v === u ? n("allSelected", { total: o(u) }) : v <= u ? n("numberOfTotalSelected", { number: o(v), total: o(u) }) : n("numbersSelected", { number: o(v) });
+    }), B = (a) => {
+      const u = (x) => {
+        const { isDisabled: _, isPreSelected: P } = S(x);
+        return _ && P || !_;
+      }, v = a.filter(u).filter((x) => !g.value.includes(x.value));
+      l("select", [...t.selectedValues, ...v]);
+    }, G = (a) => {
+      const u = (_) => {
+        const { isDisabled: P, isPreSelected: Be } = S(_);
+        return !(P && Be);
+      }, v = a.filter(u).map(({ value: _ }) => _), x = t.selectedValues.filter((_) => !(v != null && v.includes(_.value)));
       l("select", x);
-    }, p = () => {
-      S(h.value);
-    }, D = () => {
-      m(h.value);
-    }, { isAllSelected: k, isIndeterminate: P, toggleSelectAll: V } = ve(
-      C,
-      L,
-      p,
-      D
-    ), X = o(() => P.value ? "mixed" : `${k.value}`), F = A(k.value), R = () => {
-      F.value = !F.value, V(F.value);
+    }, H = () => {
+      B(D.value);
+    }, X = () => {
+      G(D.value);
+    }, { isAllSelected: F, isIndeterminate: R, toggleSelectAll: U } = _e(
+      y,
+      m,
+      H,
+      X
+    ), xe = i(() => R.value ? "mixed" : `${F.value}`), K = E(F.value), he = () => {
+      K.value = !K.value, U(K.value);
     };
-    z(k, () => {
-      F.value = k.value;
+    q(F, () => {
+      K.value = F.value;
     });
-    const K = (r) => {
-      S(r.items);
-    }, pe = (r) => {
-      m(r.items);
-    }, ge = (r, f) => {
-      let _ = !1;
-      const x = t.selectedValues.filter(({ value: y }) => f.value === y ? (_ = !0, !1) : !0);
-      _ || x.push(f), l(r, x);
-    }, ye = o(() => {
-      if (!g.value)
+    const Ce = (a) => {
+      B(a.items);
+    }, Se = (a) => {
+      G(a.items);
+    }, Ee = (a, u) => {
+      let v = !1;
+      const x = t.selectedValues.filter(({ value: _ }) => u.value === _ ? (v = !0, !1) : !0);
+      v || x.push(u), l(a, x);
+    }, Oe = i(() => {
+      if (!C.value)
         return t.selectedValues;
-      const r = (y) => b.value.includes(y.value), f = (y) => !t.staticCategories && y.every((G) => r(G));
+      const a = (_) => g.value.includes(_.value), u = (_) => !t.staticCategories && _.every((P) => a(P));
       return t.items.flatMap(
-        (y) => y.items && !f(y.items) ? y.items : y
-      ).filter((y) => y.items ? !0 : r(y));
-    }), he = o(() => {
-      var _, x, y, G;
-      const r = ["automatic", "button"].includes(t.lazyLoadType), f = ((_ = t.selectedValues) == null ? void 0 : _.length) > 0 && ((x = C.value) == null ? void 0 : x.length) !== ((y = h.value) == null ? void 0 : y.length);
-      return r && t.hasMoreItems ? !!((G = t.selectedValues) != null && G.length) : f;
-    }), xe = o(() => ["automatic", "button"].includes(t.lazyLoadType) ? !t.hasMoreItems : !0), q = A([]), le = async () => {
-      await fe(), O.value && (q.value = Array.from(
-        O.value.querySelectorAll('[role="option"]')
-      ).filter((r) => r.checkVisibility()));
-    }, ne = (r) => {
-      var f;
-      (f = q.value[r]) == null || f.focus();
+        (_) => _.items && !u(_.items) ? _.items : _
+      ).filter((_) => _.items ? !0 : a(_));
+    }), Te = i(() => {
+      var v, x, _, P;
+      const a = ["automatic", "button"].includes(t.lazyLoadType), u = ((v = t.selectedValues) == null ? void 0 : v.length) > 0 && ((x = y.value) == null ? void 0 : x.length) !== ((_ = D.value) == null ? void 0 : _.length);
+      return a && t.hasMoreItems ? !!((P = t.selectedValues) != null && P.length) : u;
+    }), Ie = i(() => ["automatic", "button"].includes(t.lazyLoadType) ? !t.hasMoreItems : !0), z = E([]), { visibleDomOptions: Q, updateVisibleDomOptions: oe } = ge(
+      d,
+      j(t, "items"),
+      A
+    ), Ae = (a) => {
+      z.value.includes(a) ? z.value = z.value.filter((u) => u !== a) : z.value.push(a), me(() => {
+        oe();
+      });
+    }, ie = (a) => {
+      var u;
+      (u = Q.value[a]) == null || u.focus();
     }, {
-      moveToNextElement: ie,
-      moveToPreviousElement: oe,
-      moveToFirstElement: ae,
-      moveToLastElement: ce,
-      preventDefault: J,
-      focusedIndex: Ce,
-      setListboxFocusedIndex: re
-    } = _e(
+      moveToNextElement: ae,
+      moveToPreviousElement: ce,
+      moveToFirstElement: re,
+      moveToLastElement: ue,
+      preventDefault: ee,
+      focusedIndex: Le,
+      setListboxFocusedIndex: de
+    } = pe(
       {
-        items: q
+        items: Q
       },
-      ne
-    ), Se = {
-      [$.ARROW_UP]: (r) => oe(r),
-      [$.ARROW_DOWN]: (r) => ie(r),
-      [$.HOME]: ae,
-      [$.END]: ce
+      ie
+    ), ke = {
+      [N.ARROW_UP]: (a) => ce(a),
+      [N.ARROW_DOWN]: (a) => ae(a),
+      [N.HOME]: re,
+      [N.END]: ue
     };
     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: re
+      setListboxFocusedIndex: de
     });
-    const Ee = {
-      [$.ARROW_UP]: J,
-      [$.ARROW_DOWN]: J
-    };
-    return z(
-      () => t.items,
-      () => {
-        le();
-      },
-      { immediate: !0 }
-    ), { __sfc: !0, props: t, emit: l, t: n, slots: i, attrs: c, ariaAttributes: v, listboxRef: O, selectAllListboxItemsRef: d, selectedListboxItemsRef: u, listboxItemsRef: T, selectedItemsList: b, isMultiLevelSelect: g, flattenedItemsList: h, optionStates: B, enabledItems: L, visibleSelectedList: C, calculateTotalItems: I, selectAllCheckboxText: E, selectAll: S, unselectAll: m, selectAllItems: p, unselectAllItems: D, isAllSelected: k, isIndeterminate: P, toggleSelectAll: V, ariaCheckedComputed: X, isSelectAllOn: F, handleSelectAll: R, selectAllCategory: K, unselectAllCategory: pe, toggleCheckboxSelection: ge, selectedOptions: ye, showSelectedItems: he, showSelectAllCheckbox: xe, visibleDomOptions: q, updateVisibleDomOptions: le, focusItem: ne, moveToNextElement: ie, moveToPreviousElement: oe, moveToFirstElement: ae, moveToLastElement: ce, preventDefault: J, focusedIndex: Ce, setListboxFocusedIndex: re, listboxListeners: Se, chipsSectionListeners: Ee, ListboxDecorativeCheckbox: se, BentoTypography: W, BentoChip: Be, BentoListboxOption: H, ListboxMultiSelectOptions: Tt, vBentoKeyboardNavigationDirective: te, BentoListboxEvent: a };
+    const Re = {
+      [N.ARROW_UP]: ee,
+      [N.ARROW_DOWN]: ee
+    }, De = i(() => {
+      let a = 1;
+      const u = {};
+      return t.items.forEach((v) => {
+        let x = z.value.includes(v.value);
+        v.items ? (t.staticCategories ? x = !0 : u[v.value] = a++, x && v.items.forEach((_) => u[_.value] = a++)) : u[v.value] = a++;
+      }), u;
+    });
+    return { __sfc: !0, props: t, emit: l, t: n, n: o, slots: r, attrs: f, ariaAttributes: I, listboxRef: d, selectAllListboxItemsRef: b, selectedListboxItemsRef: O, listboxItemsRef: p, selectedItemsList: g, isMultiLevelSelect: C, flattenedItemsList: D, isTreePattern: L, computedRole: T, computedOptionRole: A, optionStates: S, enabledItems: m, visibleSelectedList: y, calculateTotalItems: h, selectAllCheckboxText: k, selectAll: B, unselectAll: G, selectAllItems: H, unselectAllItems: X, isAllSelected: F, isIndeterminate: R, toggleSelectAll: U, ariaCheckedComputed: xe, isSelectAllOn: K, handleSelectAll: he, selectAllCategory: Ce, unselectAllCategory: Se, toggleCheckboxSelection: Ee, selectedOptions: Oe, showSelectedItems: Te, showSelectAllCheckbox: Ie, expandedCategories: z, visibleDomOptions: Q, updateVisibleDomOptions: oe, toggleCategoryVisibility: Ae, focusItem: ie, moveToNextElement: ae, moveToPreviousElement: ce, moveToFirstElement: re, moveToLastElement: ue, preventDefault: ee, focusedIndex: Le, setListboxFocusedIndex: de, listboxListeners: ke, chipsSectionListeners: Re, computedItemsIndex: De, ListboxDecorativeCheckbox: ne, BentoTypography: W, BentoChip: Ye, BentoListboxOption: Z, ListboxMultiSelectOptions: Nt, vBentoKeyboardNavigationDirective: le, BentoListboxEvent: c };
   }
 });
-var Dt = function() {
+var Pt = 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(n) {
-    return l("li", { key: n.value }, [l(t.BentoChip, { ref: "selectedListboxItemsRef", refInFor: !0, attrs: { disabled: e.isOptionDisabled(n), label: n.label, condensed: "" }, on: { click: function(i) {
+    return l("li", { key: n.value }, [l(t.BentoChip, { ref: "selectedListboxItemsRef", refInFor: !0, attrs: { disabled: e.isOptionDisabled(n), label: n.label, condensed: "" }, on: { click: function(o) {
       n.items ? t.unselectAllCategory(n) : t.toggleCheckboxSelection("select", n);
     } } })], 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: "listbox" } }, "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-checked": t.ariaCheckedComputed }, on: { click: t.handleSelectAll, "enter-pressed": t.handleSelectAll, "space-pressed": function(n) {
+  }), 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-checked": t.ariaCheckedComputed, role: t.computedOptionRole }, on: { click: t.handleSelectAll, "enter-pressed": t.handleSelectAll, "space-pressed": function(n) {
     return n.preventDefault(), t.handleSelectAll.apply(null, arguments);
-  } } }, [l(t.ListboxDecorativeCheckbox, { 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 }, on: { "toggle-checkbox-selection": function(n) {
+  } } }, [l(t.ListboxDecorativeCheckbox, { 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(n) {
     return t.toggleCheckboxSelection("select", n);
-  }, "select-category": t.selectAllCategory, "unselect-category": t.unselectAllCategory, "toggle-category-visibility": t.updateVisibleDomOptions, "space-pressed": function(n) {
+  }, "select-category": t.selectAllCategory, "unselect-category": t.unselectAllCategory, "toggle-category-visibility": t.toggleCategoryVisibility, "space-pressed": function(n) {
     return t.toggleCheckboxSelection(t.BentoListboxEvent.SPACE, n);
   }, "tab-pressed": function(n) {
     return t.toggleCheckboxSelection(t.BentoListboxEvent.TAB, n);
   }, "enter-pressed": function(n) {
     return t.toggleCheckboxSelection(t.BentoListboxEvent.ENTER, n);
-  } }, scopedSlots: e._u([e._l(t.slots, function(n, i) {
-    return { key: i, fn: function(c) {
-      return [e._t(i, null, null, c)];
+  } }, scopedSlots: e._u([e._l(t.slots, function(n, o) {
+    return { key: o, fn: function(r) {
+      return [e._t(o, null, null, r)];
     } };
   })], null, !0) })], 1)]);
-}, Rt = [], Bt = /* @__PURE__ */ N(
-  kt,
-  Dt,
-  Rt,
+}, Ft = [], Yt = /* @__PURE__ */ $(
+  Gt,
+  Pt,
+  Ft,
   !1,
   null,
-  "d866c0f0"
+  "904fc859"
 );
-const be = Bt.exports, $t = {
+const ve = Yt.exports, Ut = {
   "en-US": {
     loading: "Loading",
     showMore: "Show more"
@@ -986,18 +1025,18 @@ const be = Bt.exports, $t = {
     loading: "Carregando",
     showMore: "Mostrar mais"
   }
-}, Nt = 36, Mt = w({
+}, zt = 36, Vt = w({
   name: "bento-listbox",
   components: {
-    BentoEmptyState: De,
-    BentoListboxSingleSelect: ut,
-    BentoListboxMultiSelect: be,
+    BentoEmptyState: Pe,
+    BentoListboxSingleSelect: gt,
+    BentoListboxMultiSelect: ve,
     BentoTypography: W,
-    BentoLoadingIndicator: ke,
-    BentoLoadingButton: Ge
+    BentoLoadingIndicator: Ge,
+    BentoLoadingButton: Ke
   },
-  directives: { BentoKeyboardNavigationDirective: te },
-  i18n: { messages: $t },
+  directives: { BentoKeyboardNavigationDirective: le },
+  i18n: { messages: Ut },
   props: {
     /**
      * Defines a string value that labels an interactive element.
@@ -1053,8 +1092,8 @@ const be = Bt.exports, $t = {
      */
     lazyLoadType: {
       type: String,
-      default: U.NONE,
-      validator: (s) => Object.values(U).includes(s)
+      default: V.NONE,
+      validator: (s) => Object.values(V).includes(s)
     },
     /**
      * Indicates the listbox is loading filtered items.
@@ -1078,7 +1117,7 @@ const be = Bt.exports, $t = {
      *
      * If enabled, hides the "Select all" checkbox in "multiple" mode.
      */
-    searching: be.props.searching,
+    searching: ve.props.searching,
     /**
      * The `input` value.
      * Providing an empty string or empty array will select no options.
@@ -1098,183 +1137,184 @@ const be = Bt.exports, $t = {
     }
   },
   emits: [
-    a.SELECT,
-    a.SPACE,
-    a.SHOW_MORE,
-    a.ENTER,
-    a.ESCAPE,
-    a.TAB
+    c.SELECT,
+    c.SPACE,
+    c.SHOW_MORE,
+    c.ENTER,
+    c.ESCAPE,
+    c.TAB
   ],
   setup(s, { emit: e, slots: l }) {
-    const t = A([]), n = Q(s, "items"), { t: i } = ee(), c = o(() => s.lazyLoadType !== U.AUTOMATIC), v = o(() => s.lazyLoadType === U.AUTOMATIC), O = () => {
+    const t = E([]), n = j(s, "items"), { t: o } = se(), r = i(() => s.lazyLoadType !== V.AUTOMATIC), f = i(() => s.lazyLoadType === V.AUTOMATIC), I = () => {
       var R;
-      return typeof (s == null ? void 0 : s.virtualScroll) == "object" && ((R = s == null ? void 0 : s.virtualScroll) != null && R.itemHeight) ? s.virtualScroll.itemHeight : Nt;
+      return typeof (s == null ? void 0 : s.virtualScroll) == "object" && ((R = s == null ? void 0 : s.virtualScroll) != null && R.itemHeight) ? s.virtualScroll.itemHeight : zt;
     }, {
       containerRef: d,
-      containerProps: u,
-      onScroll: T,
-      list: b,
+      containerProps: b,
+      onScroll: O,
+      list: p,
       wrapperProps: g
-    } = Fe(n, {
-      itemHeight: O(),
+    } = qe(n, {
+      itemHeight: I(),
       // 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"
-    }), h = o(
-      () => s.componentLoading !== void 0 || c.value ? "true" : void 0
-    ), B = o(
-      () => c.value && s.loading || s.componentLoading ? "true" : "false"
-    ), L = o(
-      () => c.value || s.componentLoading !== void 0 ? "polite" : void 0
-    ), C = o(
+    }), C = i(
+      () => s.componentLoading !== void 0 || r.value ? "true" : void 0
+    ), D = i(
+      () => r.value && s.loading || s.componentLoading ? "true" : "false"
+    ), L = i(
+      () => r.value || s.componentLoading !== void 0 ? "polite" : void 0
+    ), T = i(
       () => ({
         "aria-label": s.ariaLabel,
-        "aria-busy": B.value,
-        "aria-atomic": h.value,
+        "aria-busy": D.value,
+        "aria-atomic": C.value,
         "aria-live": L.value
       })
-    ), I = o(
+    ), A = i(
       () => s.componentLoading ? {
-        ...C.value,
+        ...T.value,
         role: "alert"
       } : {}
-    ), E = (R) => (K) => {
-      e(R, K);
-    }, S = () => {
-      e(a.SHOW_MORE);
-    }, m = Re(() => {
+    ), S = (R) => (U) => {
+      e(R, U);
+    }, m = () => {
+      e(c.SHOW_MORE);
+    }, y = Fe(() => {
       const R = d.value;
       if (!R)
         return;
-      const K = Math.round(R.scrollTop) + R.clientHeight >= R.scrollHeight;
-      s.hasMoreItems && K && !s.loading && S();
-    }), p = () => {
-      v.value ? m() : T();
-    }, D = o(() => {
+      const U = Math.round(R.scrollTop) + R.clientHeight >= R.scrollHeight;
+      s.hasMoreItems && U && !s.loading && m();
+    }), h = () => {
+      f.value ? y() : O();
+    }, k = i(() => {
       var R;
       return ((R = s.items) == null ? void 0 : R.length) === 0;
-    }), k = o(
-      () => s.lazyLoadType === U.BUTTON && s.hasMoreItems
-    ), P = o(
-      () => s.loading ? ue.LOADING : ue.START
-    ), V = o(() => s.loading ? i("loading") : i("showMore")), X = o(() => ({
+    }), B = i(
+      () => s.lazyLoadType === V.BUTTON && s.hasMoreItems
+    ), G = i(
+      () => s.loading ? be.LOADING : be.START
+    ), H = i(() => s.loading ? o("loading") : o("showMore")), X = i(() => ({
       ...s.emptyState,
       variant: "condensed"
     })), F = {
-      [a.SELECT]: E(a.SELECT),
-      [a.SPACE]: E(a.SPACE),
-      [a.TAB]: E(a.TAB),
-      [a.ENTER]: E(a.ENTER)
+      [c.SELECT]: S(c.SELECT),
+      [c.SPACE]: S(c.SPACE),
+      [c.TAB]: S(c.TAB),
+      [c.ENTER]: S(c.ENTER)
     };
     return {
       // Refs
       listboxRef: d,
       listboxItemRef: t,
       // a11y
-      ariaAttributes: C,
-      listboxContainerAttributes: I,
+      ariaAttributes: T,
+      listboxContainerAttributes: A,
       // Values
-      containerProps: u,
-      isSearchResultEmpty: D,
+      containerProps: b,
+      isSearchResultEmpty: k,
       limitedEmptyStateProps: X,
-      loadingButtonState: P,
+      loadingButtonState: G,
       slots: l,
-      shouldDisplayShowMoreButton: k,
-      showMoreButtonText: V,
-      virtualisedItems: b,
+      shouldDisplayShowMoreButton: B,
+      showMoreButtonText: H,
+      virtualisedItems: p,
       wrapperProps: g,
       // Enums
-      BentoKeyboardNavigationKeyDownEvent: $,
-      BentoListboxEvent: a,
+      BentoKeyboardNavigationKeyDownEvent: N,
+      BentoListboxEvent: c,
       // Methods
-      onListboxContainerScroll: p,
-      onOptionSelected: E,
-      emitShowMore: S,
+      onListboxContainerScroll: h,
+      onOptionSelected: S,
+      emitShowMore: m,
       listboxListeners: F
     };
   }
 });
-var wt = function() {
+var Wt = 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(n, i) {
-    return { key: i, fn: function(c) {
-      return [e._t(i, null, null, 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(n, o) {
+    return { key: o, fn: function(r) {
+      return [e._t(o, null, null, r)];
     } };
-  })], 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(n, i) {
-    return { key: i, fn: function(c) {
-      return [e._t(i, 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(n, o) {
+    return { key: o, fn: function(r) {
+      return [e._t(o, null, null, r)];
     } };
   })], 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(n) {
     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)]);
-}, Gt = [], Pt = /* @__PURE__ */ N(
-  Mt,
-  wt,
-  Gt,
+}, Kt = [], jt = /* @__PURE__ */ $(
+  Vt,
+  Wt,
+  Kt,
   !1,
   null,
   "46b000a2"
 );
-const ns = Pt.exports, Z = (s, e) => {
+const bs = jt.exports, te = (s, e) => {
   for (const l of s) {
     if (l.value === e)
       return l;
     if (l.items) {
-      const t = Z(l.items, e);
+      const t = te(l.items, e);
       if (t)
         return t;
     }
   }
   return null;
-}, Ft = (s) => typeof s == "object" && s !== null && "value" in s && "label" in s, is = (s, e, l, t) => {
-  const n = A([]), i = A(), c = (u) => {
-    l.value ? i.value = u.map(({ value: T }) => T) : i.value = u.length > 0 ? u[0].value : null;
-  }, v = (u) => {
-    l.value ? i.value = u.map(({ value: T, label: b }) => ({ value: T, label: b })) : i.value = u.length > 0 ? { value: u[0].value, label: u[0].label } : null;
-  }, O = (u) => {
-    n.value = u, t != null && t.value ? v(u) : c(u);
+}, qt = (s) => typeof s == "object" && s !== null && "value" in s && "label" in s, fs = (s, e, l, t) => {
+  const n = E([]), o = E(), r = (b) => {
+    l.value ? o.value = b.map(({ value: O }) => O) : o.value = b.length > 0 ? b[0].value : null;
+  }, f = (b) => {
+    l.value ? o.value = b.map(({ value: O, label: p }) => ({ value: O, label: p })) : o.value = b.length > 0 ? { value: b[0].value, label: b[0].label } : null;
+  }, I = (b) => {
+    n.value = b, t != null && t.value ? f(b) : r(b);
   }, d = () => {
-    n.value = [], i.value = null;
+    n.value = [], o.value = null;
   };
-  return z(
+  return q(
     () => e.value,
     () => {
       if (!e.value && e.value !== 0) {
         d();
         return;
       }
-      const u = !Array.isArray(e.value), T = [...n.value];
+      const b = !Array.isArray(e.value), O = [...n.value];
       d();
-      const b = (g) => {
-        if (Ft(g))
+      const p = (g) => {
+        if (qt(g))
           n.value.push(g);
         else {
-          let h = Z(s.value, g);
-          h || (h = Z(T, g)), h || (h = { value: g, label: g.toString() }), n.value.push(h);
+          let C = te(s.value, g);
+          C || (C = te(O, g)), C || (C = { value: g, label: g.toString() }), n.value.push(C);
         }
       };
-      if (u) {
+      if (b) {
         const g = e.value;
-        b(g), t != null && t.value ? v(n.value) : c(n.value);
+        p(g), t != null && t.value ? f(n.value) : r(n.value);
         return;
       }
-      e.value.forEach(b), t != null && t.value ? v(n.value) : c(n.value);
+      e.value.forEach(p), t != null && t.value ? f(n.value) : r(n.value);
     },
     { immediate: !0 }
   ), {
     // Values
     cachedSelectedListboxOptions: n,
-    cachedListboxSelectedValues: i,
+    cachedListboxSelectedValues: o,
     // Methods
     resetCache: d,
-    setCachedValues: O
+    setCachedValues: I
   };
 };
 export {
-  U as B,
-  a,
-  ns as b,
-  is as c,
-  At as u
+  V as B,
+  c as a,
+  bs as b,
+  fs as c,
+  ge as d,
+  $t as u
 };
-//# sourceMappingURL=use-cached-selected-values.DNOmzQVy.js.map
+//# sourceMappingURL=use-cached-selected-values.CusB5KBl.js.map