@adyen/bento-vue2 1.48.0 → 1.50.0

package/dist/chunks/{use-cached-selected-values.C24AnZ-w.js → use-cached-selected-values.a_5Iw6Dh.js}

@@ -1,10 +1,10 @@
-import { computed as c, ref as O, onMounted as te, onUnmounted as _e, watch as se, defineComponent as $, toRef as G } from "vue";
+import { computed as r, ref as O, onMounted as te, onUnmounted as _e, watch as se, defineComponent as $, toRef as G } from "vue";
 import { B as w } from "./typography.J1v_SPG3.js";
 import { B as ge } from "./loading-indicator.z8COalOc.js";
 import { B as ye } from "./empty-state.BnHTBgKG.js";
 import { u as Y } from "./i18n.BQkEbtPM.js";
 import { d as pe } from "./debounce.DUTu11PS.js";
-import { B as X } from "./checkbox.BEHpJDrF.js";
+import { B as X } from "./checkbox.BPvnJrvd.js";
 import "./index.Cl4_42j5.js";
 import { B as Ce } from "./base-button.-gx_u8Bd.js";
 import { C as Se } from "./cross-small.BLUwtRB-.js";
@@ -15,69 +15,69 @@ import { d as Ee, e as Z } from "./button-actions.BovYBINL.js";
 import { o as Le } from "./resize.Bqks3WUm.js";
 import "../assets/use-cached-selected-values.css";
 const le = (t, e, s, l) => {
-  const n = c(
+  const n = r(
     () => {
-      var r, b;
-      return !!((r = t.value) != null && r.length) && ((b = t.value) == null ? void 0 : b.length) === e.value.length;
+      var d, c;
+      return !!((d = t.value) != null && d.length) && ((c = t.value) == null ? void 0 : c.length) === e.value.length;
     }
-  ), a = c(() => {
-    var r;
-    return t.value == null || t.value.length === 0 ? !1 : ((r = t.value) == null ? void 0 : r.length) !== e.value.length;
+  ), a = r(() => {
+    var d;
+    return t.value == null || t.value.length === 0 ? !1 : ((d = t.value) == null ? void 0 : d.length) !== e.value.length;
   });
   return {
     isAllSelected: n,
     isIndeterminate: a,
-    toggleSelectAll: (r) => {
-      r ? s() : l();
+    toggleSelectAll: (d) => {
+      d ? s() : l();
     }
   };
 };
 function Oe(t, { disabled: e, itemHeight: s, overscan: l = 5, prefixHeight: n }) {
-  const a = O(null), o = O([]), r = O(0), b = O(0), m = O(0);
+  const a = O(null), o = O([]), d = O(0), c = O(0), b = O(0);
   let E;
-  const p = c(() => {
-    const _ = typeof s == "number" ? t.value.length * s : t.value.reduce((L, f, h) => L + s(h), 0), C = typeof s == "number" ? r.value * s : t.value.slice(0, r.value).reduce((L, f, h) => L + s(h), 0);
+  const C = r(() => {
+    const m = typeof s == "number" ? t.value.length * s : t.value.reduce((L, _, h) => L + s(h), 0), g = typeof s == "number" ? d.value * s : t.value.slice(0, d.value).reduce((L, _, h) => L + s(h), 0);
     return {
       style: {
-        marginTop: `${C}px`,
-        height: `${_ - C}px`
+        marginTop: `${g}px`,
+        height: `${m - g}px`
       }
     };
   }), S = () => {
-    const _ = (n == null ? void 0 : n.value) ?? 0, C = Math.max(a.value.scrollTop - _, 0);
+    const m = (n == null ? void 0 : n.value) ?? 0, g = Math.max(a.value.scrollTop - m, 0);
     if (typeof s == "number")
-      return Math.floor(C / s);
-    let L = 0, f = 0;
+      return Math.floor(g / s);
+    let L = 0, _ = 0;
     for (let h = 0; h < t.value.length; h += 1) {
       const A = s(h);
-      if (L += A, L >= C) {
-        f = h;
+      if (L += A, L >= g) {
+        _ = h;
         break;
       }
     }
-    return f;
+    return _;
   }, B = () => {
-    if (m.value = a.value.clientHeight, typeof s == "number")
-      return Math.ceil(m.value / s);
-    const _ = r.value ?? 0;
-    let C = 0, L = 0;
-    for (let f = _; f < t.value.length; f += 1) {
-      const h = s(f);
-      if (C += h, L = f, C > m.value)
+    if (b.value = a.value.clientHeight, typeof s == "number")
+      return Math.ceil(b.value / s);
+    const m = d.value ?? 0;
+    let g = 0, L = 0;
+    for (let _ = m; _ < t.value.length; _ += 1) {
+      const h = s(_);
+      if (g += h, L = _, g > b.value)
         break;
     }
-    return L - _;
+    return L - m;
   }, T = () => {
     if (a.value) {
-      const _ = B();
-      r.value = S(), b.value = Math.min(r.value + _ + l, t.value.length), o.value = t.value.slice(r.value, b.value);
+      const m = B();
+      d.value = S(), c.value = Math.min(d.value + m + l, t.value.length), o.value = t.value.slice(d.value, c.value);
     }
   }, R = () => {
     T();
   };
   e || (te(() => {
-    a.value && (m.value = a.value.clientHeight, E = Le(a.value, ({ clientHeight: _ }) => {
-      m.value = _, T();
+    a.value && (b.value = a.value.clientHeight, E = Le(a.value, ({ clientHeight: m }) => {
+      b.value = m, T();
     }), T());
   }), _e(() => {
     E == null || E.disconnect();
@@ -87,23 +87,23 @@ function Oe(t, { disabled: e, itemHeight: s, overscan: l = 5, prefixHeight: n })
       T();
     }
   ));
-  const u = {
+  const f = {
     ref: a,
     style: { overflowY: "auto" }
   };
   return e ? {
     containerRef: a,
-    containerProps: u,
+    containerProps: f,
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     onScroll: () => {
     },
     list: t
   } : {
     containerRef: a,
-    containerProps: u,
+    containerProps: f,
     onScroll: R,
     list: o,
-    wrapperProps: p
+    wrapperProps: C
   };
 }
 var i = /* @__PURE__ */ ((t) => (t.SELECT = "select", t.SHOW_MORE = "show-more", t.ESCAPE = "escape-pressed", t.CLICK = "click", t.ENTER = "enter-pressed", t.SPACE = "space-pressed", t.TAB = "tab-pressed", t.CLOSE_DROPDOWN = "close-dropdown", t))(i || {}), P = /* @__PURE__ */ ((t) => (t.AUTOMATIC = "automatic", t.BUTTON = "button", t.NONE = "none", t))(P || {});
@@ -147,7 +147,7 @@ const Be = Re.exports, ke = $({
   },
   emits: [i.CLICK, i.ENTER, i.SPACE, i.TAB],
   setup(t, { emit: e }) {
-    const s = c(() => ({
+    const s = r(() => ({
       "b-listbox-option--disabled": t.disabled,
       "b-listbox-option--selected": t.selected
     }));
@@ -231,7 +231,7 @@ const Ge = Fe.exports, Ue = $({
   setup(t, { emit: e }) {
     const s = (o) => {
       t.disabled || e(o, t.option);
-    }, l = c(() => t.disabled ? !0 : null), n = c(() => t.selected ? !0 : null), a = c(() => t.disabled ? -1 : 0);
+    }, l = r(() => t.disabled ? !0 : null), n = r(() => t.selected ? !0 : null), a = r(() => t.disabled ? -1 : 0);
     return {
       // Values
       ariaDisabled: l,
@@ -266,14 +266,14 @@ var ze = function() {
   "5a5ff36a"
 );
 const qe = Ye.exports, ne = ({ items: t, isOptionDisabled: e, hasStaticCategories: s }, l) => {
-  const n = c(
-    () => s.value ? t.value.flatMap((u) => u.items) : t.value
-  ), a = c(() => n.value.length - 1), o = O(0);
+  const n = r(
+    () => s.value ? t.value.flatMap((f) => f.items) : t.value
+  ), a = r(() => n.value.length - 1), o = O(0);
   te(() => {
-    e && (o.value = t.value.findIndex((u) => !e(u)));
+    e && (o.value = t.value.findIndex((f) => !e(f)));
   });
-  const r = (u) => !e || !!e && e(t.value[u]), b = (u) => !e || !!e && !e(t.value[u]), m = (u) => {
-    switch (u) {
+  const d = (f) => !e || !!e && e(t.value[f]), c = (f) => !e || !!e && !e(t.value[f]), b = (f) => {
+    switch (f) {
       case "increase":
         o.value += 1;
         break;
@@ -281,29 +281,29 @@ const qe = Ye.exports, ne = ({ items: t, isOptionDisabled: e, hasStaticCategorie
         o.value -= 1;
         break;
     }
-  }, E = ({ edgeCaseItem: u, isItemBeforeEdgeCaseItem: _ }, C, L) => {
-    o.value !== u && (_ ? b(u) && m(L) : (m(L), r(o.value) && C()), l(o.value));
-  }, p = (u) => {
-    var C;
-    (C = u == null ? void 0 : u.detail) == null || C.preventDefault();
-    const _ = o.value === a.value - 2;
+  }, E = ({ edgeCaseItem: f, isItemBeforeEdgeCaseItem: m }, g, L) => {
+    o.value !== f && (m ? c(f) && b(L) : (b(L), d(o.value) && g()), l(o.value));
+  }, C = (f) => {
+    var g;
+    (g = f == null ? void 0 : f.detail) == null || g.preventDefault();
+    const m = o.value === a.value - 2;
     E(
       {
-        isItemBeforeEdgeCaseItem: _,
+        isItemBeforeEdgeCaseItem: m,
         edgeCaseItem: a.value
       },
-      p,
+      C,
       "increase"
       /* INCREASE */
     );
-  }, S = (u) => {
-    var C;
-    (C = u == null ? void 0 : u.detail) == null || C.preventDefault();
-    const _ = o.value === 1;
+  }, S = (f) => {
+    var g;
+    (g = f == null ? void 0 : f.detail) == null || g.preventDefault();
+    const m = o.value === 1;
     E(
       {
         edgeCaseItem: 0,
-        isItemBeforeEdgeCaseItem: _
+        isItemBeforeEdgeCaseItem: m
       },
       S,
       "decrease"
@@ -312,15 +312,15 @@ const qe = Ye.exports, ne = ({ items: t, isOptionDisabled: e, hasStaticCategorie
   };
   return {
     moveToFirstElement: () => {
-      o.value = 0, r(o.value) ? p() : l(o.value);
+      o.value = 0, d(o.value) ? C() : l(o.value);
     },
     moveToLastElement: () => {
-      o.value = a.value, r(o.value) ? S() : l(o.value);
+      o.value = a.value, d(o.value) ? S() : l(o.value);
     },
-    moveToNextElement: p,
+    moveToNextElement: C,
     moveToPreviousElement: S,
-    setListboxFocusedIndex: (u) => {
-      o.value = u;
+    setListboxFocusedIndex: (f) => {
+      o.value = f;
     }
   };
 }, We = $({
@@ -372,17 +372,20 @@ const qe = Ye.exports, ne = ({ items: t, isOptionDisabled: e, hasStaticCategorie
   },
   emits: [i.SELECT, i.ENTER, i.SPACE, i.TAB],
   setup(t, { emit: e, expose: s, slots: l }) {
-    const n = O([]), a = c(() => {
-      var u;
-      return !!((u = t.selectedValue) != null && u.length) && t.selectedValue.at(0);
-    }), o = c(() => !!t.items.some(({ items: u }) => !!u)), r = (u) => (_) => {
-      e(u, [_]);
-    }, b = (u) => n.value[u].$el.focus(), {
-      moveToNextElement: m,
-      moveToPreviousElement: E,
-      moveToFirstElement: p,
-      moveToLastElement: S,
-      setListboxFocusedIndex: B
+    const n = O(null), a = O([]), o = r(() => {
+      var m;
+      return !!((m = t.selectedValue) != null && m.length) && t.selectedValue.at(0);
+    }), d = r(() => !!t.items.some(({ items: m }) => !!m)), c = (m) => (g) => {
+      e(m, [g]);
+    }, b = (m) => {
+      var g;
+      (g = n.value.querySelectorAll('[role="option"]')[m]) == null || g.focus();
+    }, {
+      moveToNextElement: E,
+      moveToPreviousElement: C,
+      moveToFirstElement: S,
+      moveToLastElement: B,
+      setListboxFocusedIndex: T
     } = ne(
       {
         items: G(t, "items"),
@@ -390,52 +393,53 @@ const qe = Ye.exports, ne = ({ items: t, isOptionDisabled: e, hasStaticCategorie
         hasStaticCategories: G(t, "staticCategories")
       },
       b
-    ), T = {
-      [k.ARROW_UP]: E,
-      [k.ARROW_DOWN]: m,
-      [k.HOME]: p,
-      [k.END]: S
-    }, R = {
-      [i.SELECT]: r(i.SELECT),
-      [i.SPACE]: r(i.SPACE),
-      [i.TAB]: r(i.TAB),
-      [i.ENTER]: r(i.ENTER)
+    ), R = {
+      [k.ARROW_UP]: C,
+      [k.ARROW_DOWN]: E,
+      [k.HOME]: S,
+      [k.END]: B
+    }, f = {
+      [i.SELECT]: c(i.SELECT),
+      [i.SPACE]: c(i.SPACE),
+      [i.TAB]: c(i.TAB),
+      [i.ENTER]: c(i.ENTER)
     };
     return s({
       /**
        * Reference for a single listbox item.
        * Required for keyboard navigation in dropdown as $children is removed in vue@3
        */
-      listboxItemRef: n,
+      listboxItemRef: a,
       /**
        * 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: B
+      setListboxFocusedIndex: T
     }), {
       // Enums
       BentoListboxEvent: i,
       // Values
-      listboxItemRef: n,
-      selectedItem: a,
+      listboxRef: n,
+      listboxItemRef: a,
+      selectedItem: o,
       slots: l,
       // Computed
-      hasCategories: o,
+      hasCategories: d,
       // Methods
-      onOptionSelected: r,
+      onOptionSelected: c,
       // Keyboard navigation
-      listboxListeners: T,
-      listboxOptionListeners: R
+      listboxListeners: R,
+      listboxOptionListeners: f
     };
   }
 });
 var Ke = function() {
   var e = this, s = e._self._c;
-  return e._self._setupProxy, s("div", e._g({ directives: [{ name: "bento-keyboard-navigation-directive", rawName: "v-bento-keyboard-navigation-directive" }] }, e.listboxListeners), [e.hasCategories && e.staticCategories ? e._l(e.items, function(l) {
+  return e._self._setupProxy, s("div", e._g({ directives: [{ name: "bento-keyboard-navigation-directive", rawName: "v-bento-keyboard-navigation-directive" }], ref: "listboxRef" }, e.listboxListeners), [e.hasCategories && e.staticCategories ? e._l(e.items, function(l) {
     return s("bento-listbox-single-select-category", { key: l.value, attrs: { "category-label": l.label, role: "group" } }, e._l(l.items, function(n) {
       return s("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(a, o) {
-        return { key: o, fn: function(r) {
-          return [e._t(o, null, null, r)];
+        return { key: o, fn: function(d) {
+          return [e._t(o, null, null, d)];
         } };
       })], null, !0) }, e.listboxOptionListeners));
     }), 1);
@@ -512,64 +516,64 @@ const Je = {
   },
   emits: [z.SELECT_CATEGORY, z.UNSELECT_CATEGORY],
   setup(t, { emit: e }) {
-    const s = O(!1), { t: l } = Y(), n = (f) => t.isOptionDisabled ? t.isOptionDisabled(f) : !1, a = c(
-      () => t.category.items.every((f) => n(f))
-    ), o = G(t, "staticCategories"), r = c(() => s.value || t.staticCategories), b = c(() => ({
+    const s = O(!1), { t: l } = Y(), n = (_) => t.isOptionDisabled ? t.isOptionDisabled(_) : !1, a = r(
+      () => t.category.items.every((_) => n(_))
+    ), o = G(t, "staticCategories"), d = r(() => s.value || t.staticCategories), c = r(() => ({
       [`b-listbox-multi-select-category--${j.DISABLED}`]: a.value,
       [`b-listbox-multi-select-category--${j.STATIC_CATEGORY}`]: t.staticCategories
-    })), m = (f) => {
-      f.preventDefault(), s.value = !s.value;
-    }, E = (f) => {
+    })), b = (_) => {
+      _.preventDefault(), s.value = !s.value;
+    }, E = (_) => {
       var F;
-      const h = n(f), A = ((F = t.selectedItemsList) == null ? void 0 : F.includes(f.value)) || !1;
+      const h = n(_), A = ((F = t.selectedItemsList) == null ? void 0 : F.includes(_.value)) || !1;
       return { isDisabled: h, isPreSelected: A };
-    }, p = c(
-      () => t.category.items.filter((f) => {
-        const { isDisabled: h, isPreSelected: A } = E(f);
+    }, C = r(
+      () => t.category.items.filter((_) => {
+        const { isDisabled: h, isPreSelected: A } = E(_);
         return h && A || !h;
       })
-    ), S = c(
+    ), S = r(
       () => {
-        var f;
-        return (f = p.value) == null ? void 0 : f.filter(
+        var _;
+        return (_ = C.value) == null ? void 0 : _.filter(
           ({ value: h }) => {
             var A;
             return (A = t.selectedItemsList) == null ? void 0 : A.includes(h);
           }
         );
       }
-    ), B = c(() => {
-      const f = s.value ? "categoryOpened" : "categoryClosed";
-      return l(f, { category: t.category.label });
-    }), T = c(
+    ), B = r(() => {
+      const _ = s.value ? "categoryOpened" : "categoryClosed";
+      return l(_, { category: t.category.label });
+    }), T = r(
       () => ({
         el: "span",
         variant: t.staticCategories ? "caption" : "body"
       })
     ), R = () => {
       e(z.SELECT_CATEGORY);
-    }, u = () => {
+    }, f = () => {
       e(z.UNSELECT_CATEGORY);
-    }, { isAllSelected: _, isIndeterminate: C, toggleSelectAll: L } = le(
+    }, { isAllSelected: m, isIndeterminate: g, toggleSelectAll: L } = le(
       S,
-      p,
+      C,
       R,
-      u
+      f
     );
     return {
       // Values
       chevronTitle: B,
-      conditionalClass: b,
+      conditionalClass: c,
       hasAllPropsDisabled: a,
       isOpen: s,
-      isAllSelected: _,
-      isIndeterminate: C,
+      isAllSelected: m,
+      isIndeterminate: g,
       isStaticCategory: o,
       // Computed
-      showItemChildren: r,
+      showItemChildren: d,
       categoryLabelProps: T,
       // Methods
-      toggleOpen: m,
+      toggleOpen: b,
       toggleSelectAll: L
     };
   }
@@ -658,19 +662,19 @@ const lt = $({
     N.UNSELECT_CATEGORY
   ],
   setup(t, { emit: e }) {
-    const s = (b) => {
-      e(N.TOGGLE_CHECKBOX_SELECTION, b);
-    }, l = (b) => !!b.items, n = (b) => {
-      const m = t.isMultiLevel && t.searching;
-      return b.description && (!t.isMultiLevel || m);
-    }, a = (b) => b.items ? !!b.items.find((m) => t.selectedItemsList.includes(m.value)) : t.selectedItemsList.includes(b.value), o = (b, m) => {
-      if (l(m))
-        return e(b ? N.SELECT_CATEGORY : N.UNSELECT_CATEGORY, m);
-      s(m.value);
+    const s = (c) => {
+      e(N.TOGGLE_CHECKBOX_SELECTION, c);
+    }, l = (c) => !!c.items, n = (c) => {
+      const b = t.isMultiLevel && t.searching;
+      return c.description && (!t.isMultiLevel || b);
+    }, a = (c) => c.items ? !!c.items.find((b) => t.selectedItemsList.includes(b.value)) : t.selectedItemsList.includes(c.value), o = (c, b) => {
+      if (l(b))
+        return e(c ? N.SELECT_CATEGORY : N.UNSELECT_CATEGORY, b);
+      s(b.value);
     };
     return {
       // Values
-      conditionalClasses: c(() => ({
+      conditionalClasses: r(() => ({
         "b-listbox-multi-select-options__static-category-option": t.staticCategories,
         "b-listbox-multi-select-options__category-option": t.categoryItems
       })),
@@ -766,7 +770,7 @@ var dt = function() {
   null,
   "55fb08d8"
 );
-const vt = mt.exports, ft = {
+const ft = mt.exports, vt = {
   "en-US": {
     allSelected: "All selected ({total})",
     numberOfTotalSelected: "{number} of {total} selected",
@@ -774,10 +778,10 @@ const vt = mt.exports, ft = {
     selectAll: "Select all ({total})"
   }
 }, _t = (t) => {
-  const e = c(() => {
+  const e = r(() => {
     var l;
     return !!((l = t.value) != null && l.find(({ items: n }) => !!n));
-  }), s = c(() => {
+  }), s = r(() => {
     var l;
     return e.value ? (l = t.value) == null ? void 0 : l.reduce((n, a) => (a.items ? n.push(...a.items.flat()) : n.push(a), n), []) : t.value;
   });
@@ -786,14 +790,14 @@ const vt = mt.exports, ft = {
     flattenedItemsList: s
   };
 }, gt = $({
-  i18n: { messages: ft },
+  i18n: { messages: vt },
   name: "bento-listbox-multi-select",
   components: {
     BentoCheckbox: X,
     BentoListboxOption: q,
     BentoTypography: w,
     ListboxMultiSelectOptions: it,
-    ListboxMultiSelectChips: vt
+    ListboxMultiSelectChips: ft
   },
   directives: { BentoKeyboardNavigationDirective: J },
   props: {
@@ -857,98 +861,98 @@ const vt = mt.exports, ft = {
   },
   emits: [i.SELECT],
   setup(t, { emit: e, slots: s }) {
-    const { t: l } = Y(), n = O(null), a = O(null), o = O(null), r = c(
-      () => t.selectedValues.map(({ value: d }) => d)
-    ), { isMultiLevelSelect: b, flattenedItemsList: m } = _t(G(t, "items")), E = (d) => {
+    const { t: l } = Y(), n = O(null), a = O(null), o = O(null), d = r(
+      () => t.selectedValues.map(({ value: u }) => u)
+    ), { isMultiLevelSelect: c, flattenedItemsList: b } = _t(G(t, "items")), E = (u) => {
       var x;
-      const v = t.isOptionDisabled(d), g = ((x = r.value) == null ? void 0 : x.includes(d.value)) || !1;
-      return { isDisabled: v, isPreSelected: g };
-    }, p = c(() => {
-      if (t.searching && b)
+      const v = t.isOptionDisabled(u), y = ((x = d.value) == null ? void 0 : x.includes(u.value)) || !1;
+      return { isDisabled: v, isPreSelected: y };
+    }, C = r(() => {
+      if (t.searching && c)
         return t.items;
-      const d = m.value.filter((v) => {
-        const { isDisabled: g, isPreSelected: x } = E(v);
-        return g && x || !g;
+      const u = b.value.filter((v) => {
+        const { isDisabled: y, isPreSelected: x } = E(v);
+        return y && x || !y;
       });
       return t.selectedValues.forEach((v) => {
-        d.find((g) => g.value === v.value) || d.push(v);
-      }), d;
-    }), S = c(
+        u.find((y) => y.value === v.value) || u.push(v);
+      }), u;
+    }), S = r(
       () => {
-        var d;
-        return (d = p.value) == null ? void 0 : d.filter((v) => {
-          var g;
-          return v.items && b.value && t.searching ? v.items.filter(
-            (y) => (t.selectedValues ?? []).includes(y.value)
-          ).length === v.items.length : (g = r.value) == null ? void 0 : g.includes(v.value);
+        var u;
+        return (u = C.value) == null ? void 0 : u.filter((v) => {
+          var y;
+          return v.items && c.value && t.searching ? v.items.filter(
+            (p) => (t.selectedValues ?? []).includes(p.value)
+          ).length === v.items.length : (y = d.value) == null ? void 0 : y.includes(v.value);
         });
       }
-    ), B = () => b.value && !t.searching ? m.value.length : t.items.length, T = c(() => {
+    ), B = () => c.value && !t.searching ? b.value.length : t.items.length, T = r(() => {
       var x;
-      const d = p.value.length, v = B(), g = ((x = S.value) == null ? void 0 : x.length) || 0;
-      return g === 0 ? l("selectAll", { total: d }) : g === v ? l("allSelected", { total: v }) : g <= v ? l("numberOfTotalSelected", { number: g, total: v }) : l("numbersSelected", { number: g });
-    }), R = (d) => {
+      const u = C.value.length, v = B(), y = ((x = S.value) == null ? void 0 : x.length) || 0;
+      return y === 0 ? l("selectAll", { total: u }) : y === v ? l("allSelected", { total: v }) : y <= v ? l("numberOfTotalSelected", { number: y, total: v }) : l("numbersSelected", { number: y });
+    }), R = (u) => {
       const v = (x) => {
-        const { isDisabled: y, isPreSelected: M } = E(x);
-        return y && M || !y;
-      }, g = d.filter(v).filter((x) => !r.value.includes(x.value));
-      e(i.SELECT, [...t.selectedValues, ...g]);
-    }, u = (d) => {
-      const v = (y) => {
-        const { isDisabled: M, isPreSelected: fe } = E(y);
-        return !(M && fe);
-      }, g = d.filter(v).map(({ value: y }) => y), x = t.selectedValues.filter((y) => !(g != null && g.includes(y.value)));
+        const { isDisabled: p, isPreSelected: M } = E(x);
+        return p && M || !p;
+      }, y = u.filter(v).filter((x) => !d.value.includes(x.value));
+      e(i.SELECT, [...t.selectedValues, ...y]);
+    }, f = (u) => {
+      const v = (p) => {
+        const { isDisabled: M, isPreSelected: ve } = E(p);
+        return !(M && ve);
+      }, y = u.filter(v).map(({ value: p }) => p), x = t.selectedValues.filter((p) => !(y != null && y.includes(p.value)));
       e(i.SELECT, x);
-    }, _ = () => {
-      R(m.value);
-    }, C = () => {
-      u(m.value);
-    }, { isAllSelected: L, isIndeterminate: f, toggleSelectAll: h } = le(
+    }, m = () => {
+      R(b.value);
+    }, g = () => {
+      f(b.value);
+    }, { isAllSelected: L, isIndeterminate: _, toggleSelectAll: h } = le(
       S,
-      p,
-      _,
-      C
-    ), A = (d) => {
-      R(d.items);
-    }, F = (d) => {
-      u(d.items);
-    }, W = (d, v) => {
-      let g = !1;
-      const x = t.selectedValues.filter(({ value: y }) => v.value === y ? (g = !0, !1) : !0);
-      g || x.push(v), e(d, x);
-    }, V = c(() => {
-      if (!b.value)
+      C,
+      m,
+      g
+    ), A = (u) => {
+      R(u.items);
+    }, F = (u) => {
+      f(u.items);
+    }, W = (u, v) => {
+      let y = !1;
+      const x = t.selectedValues.filter(({ value: p }) => v.value === p ? (y = !0, !1) : !0);
+      y || x.push(v), e(u, x);
+    }, V = r(() => {
+      if (!c.value)
         return t.selectedValues;
-      const d = (y) => r.value.includes(y.value), v = (y) => !t.staticCategories && y.every((M) => d(M));
+      const u = (p) => d.value.includes(p.value), v = (p) => !t.staticCategories && p.every((M) => u(M));
       return t.items.flatMap(
-        (y) => y.items && !v(y.items) ? y.items : y
-      ).filter((y) => y.items ? !0 : d(y));
-    }), K = c(() => {
-      var g, x, y, M;
-      const d = ["automatic", "button"].includes(t.lazyLoadType), v = ((g = t.selectedValues) == null ? void 0 : g.length) > 0 && ((x = S.value) == null ? void 0 : x.length) !== ((y = m.value) == null ? void 0 : y.length);
-      return d && t.hasMoreItems ? !!((M = t.selectedValues) != null && M.length) : v;
-    }), I = c(() => ["automatic", "button"].includes(t.lazyLoadType) ? !t.hasMoreItems : !0), U = c(
+        (p) => p.items && !v(p.items) ? p.items : p
+      ).filter((p) => p.items ? !0 : u(p));
+    }), K = r(() => {
+      var y, x, p, M;
+      const u = ["automatic", "button"].includes(t.lazyLoadType), v = ((y = t.selectedValues) == null ? void 0 : y.length) > 0 && ((x = S.value) == null ? void 0 : x.length) !== ((p = b.value) == null ? void 0 : p.length);
+      return u && t.hasMoreItems ? !!((M = t.selectedValues) != null && M.length) : v;
+    }), I = r(() => ["automatic", "button"].includes(t.lazyLoadType) ? !t.hasMoreItems : !0), U = r(
       () => n.value ? [n.value] : []
-    ), ae = c(
+    ), ae = r(
       () => {
-        var d, v;
-        return (v = (d = a.value) == null ? void 0 : d.$children) != null && v.length ? a.value.$children : [];
+        var u, v;
+        return (v = (u = a.value) == null ? void 0 : u.$children) != null && v.length ? a.value.$children : [];
       }
-    ), oe = c(
+    ), oe = r(
       () => {
-        var d, v;
-        return (v = (d = o.value) == null ? void 0 : d.$children) != null && v.length ? o.value.$children : [];
+        var u, v;
+        return (v = (u = o.value) == null ? void 0 : u.$children) != null && v.length ? o.value.$children : [];
       }
-    ), ie = c(() => ({ label: T, value: L })), ce = c(() => [
+    ), ie = r(() => ({ label: T, value: L })), ce = r(() => [
       ie,
       ...V.value,
-      ...m.value
-    ]), re = (d) => {
+      ...b.value
+    ]), re = (u) => {
       [
         ...U.value,
         ...ae.value,
         ...oe.value
-      ][d].$el.focus();
+      ][u].$el.focus();
     }, { moveToNextElement: ue, moveToPreviousElement: de, moveToFirstElement: be, moveToLastElement: me } = ne(
       {
         items: O(ce),
@@ -956,9 +960,9 @@ const vt = mt.exports, ft = {
         hasStaticCategories: G(t, "staticCategories")
       },
       re
-    ), ve = {
-      [k.ARROW_UP]: (d) => de(d),
-      [k.ARROW_DOWN]: (d) => ue(d),
+    ), fe = {
+      [k.ARROW_UP]: (u) => de(u),
+      [k.ARROW_DOWN]: (u) => ue(u),
       [k.HOME]: be,
       [k.END]: me
     };
@@ -970,10 +974,10 @@ const vt = mt.exports, ft = {
       // Values
       isAllSelected: L,
       showSelectedItems: K,
-      isIndeterminate: f,
-      isMultiLevelSelect: b,
-      flattenedItemsList: m,
-      selectedItemsList: r,
+      isIndeterminate: _,
+      isMultiLevelSelect: c,
+      flattenedItemsList: b,
+      selectedItemsList: d,
       selectAllCheckboxText: T,
       selectedOptions: V,
       showSelectAllCheckbox: I,
@@ -986,7 +990,7 @@ const vt = mt.exports, ft = {
       toggleSelectAll: h,
       unselectAllCategory: F,
       // Events
-      listboxListeners: ve
+      listboxListeners: fe
     };
   }
 });
@@ -1144,61 +1148,61 @@ const ee = Ct.exports, St = {
     i.TAB
   ],
   setup(t, { emit: e, slots: s }) {
-    const l = O([]), n = G(t, "items"), { t: a } = Y(), o = c(() => t.lazyLoadType !== P.AUTOMATIC), r = c(() => t.lazyLoadType === P.AUTOMATIC), b = () => {
+    const l = O([]), n = G(t, "items"), { t: a } = Y(), o = r(() => t.lazyLoadType !== P.AUTOMATIC), d = r(() => t.lazyLoadType === P.AUTOMATIC), c = () => {
       var I;
       return typeof (t == null ? void 0 : t.virtualScroll) == "object" && ((I = t == null ? void 0 : t.virtualScroll) != null && I.itemHeight) ? t.virtualScroll.itemHeight : ht;
     }, {
-      containerRef: m,
+      containerRef: b,
       containerProps: E,
-      onScroll: p,
+      onScroll: C,
       list: S,
       wrapperProps: B
     } = Oe(n, {
-      itemHeight: b(),
+      itemHeight: c(),
       // Disable virtual scrolling if not enabled or if lazy loading is enabled or if multi-select
       disabled: (t == null ? void 0 : t.multiple) || (t == null ? void 0 : t.virtualScroll) === !1 || (t == null ? void 0 : t.lazyLoadType) !== "none"
-    }), T = c(
+    }), T = r(
       () => o.value ? "true" : void 0
-    ), R = c(
+    ), R = r(
       () => o.value && t.loading ? "true" : "false"
-    ), u = c(
+    ), f = r(
       () => o.value ? "polite" : void 0
-    ), _ = (I) => (U) => {
+    ), m = (I) => (U) => {
       e(I, U);
-    }, C = () => {
+    }, g = () => {
       e(i.SHOW_MORE);
     }, L = pe(() => {
-      const I = m.value;
+      const I = b.value;
       if (!I)
         return;
       const U = Math.round(I.scrollTop) + I.clientHeight >= I.scrollHeight;
-      t.hasMoreItems && U && !t.loading && C();
-    }), f = () => {
-      r.value ? L() : p();
-    }, h = c(() => {
+      t.hasMoreItems && U && !t.loading && g();
+    }), _ = () => {
+      d.value ? L() : C();
+    }, h = r(() => {
       var I;
       return ((I = t.items) == null ? void 0 : I.length) === 0;
-    }), A = c(
+    }), A = r(
       () => t.lazyLoadType === P.BUTTON && t.hasMoreItems
-    ), F = c(
+    ), F = r(
       () => t.loading ? Z.LOADING : Z.START
-    ), W = c(() => t.loading ? a("loading") : a("showMore")), V = c(() => ({
+    ), W = r(() => t.loading ? a("loading") : a("showMore")), V = r(() => ({
       ...t.emptyState,
       variant: "condensed"
     })), K = {
-      [i.SELECT]: _(i.SELECT),
-      [i.SPACE]: _(i.SPACE),
-      [i.TAB]: _(i.TAB),
-      [i.ENTER]: _(i.ENTER)
+      [i.SELECT]: m(i.SELECT),
+      [i.SPACE]: m(i.SPACE),
+      [i.TAB]: m(i.TAB),
+      [i.ENTER]: m(i.ENTER)
     };
     return {
       // Refs
-      listboxRef: m,
+      listboxRef: b,
       listboxItemRef: l,
       // a11y
       ariaAtomic: T,
       ariaBusy: R,
-      ariaLive: u,
+      ariaLive: f,
       // Values
       containerProps: E,
       isSearchResultEmpty: h,
@@ -1213,9 +1217,9 @@ const ee = Ct.exports, St = {
       BentoKeyboardNavigationKeyDownEvent: k,
       BentoListboxEvent: i,
       // Methods
-      onListboxContainerScroll: f,
-      onOptionSelected: _,
-      emitShowMore: C,
+      onListboxContainerScroll: _,
+      onOptionSelected: m,
+      emitShowMore: g,
       listboxListeners: K
     };
   }
@@ -1254,29 +1258,29 @@ const zt = Ot.exports, H = (t, e) => {
   }
   return null;
 }, Vt = (t, e, s) => {
-  const l = O([]), n = O(), a = (b) => {
-    n.value = s.value ? b.map(({ value: m }) => m) : b[0].value;
-  }, o = (b) => {
-    l.value = b, a(b);
-  }, r = () => {
+  const l = O([]), n = O(), a = (c) => {
+    n.value = s.value ? c.map(({ value: b }) => b) : c[0].value;
+  }, o = (c) => {
+    l.value = c, a(c);
+  }, d = () => {
     l.value = [], n.value = null;
   };
   return se(
     () => e.value,
     () => {
       if (!e.value) {
-        r();
+        d();
         return;
       }
-      const b = !Array.isArray(e.value), m = [...l.value];
-      r();
-      const E = (p) => {
-        let S = H(t.value, p);
-        S || (S = H(m, p)), S || (S = { value: p, label: p.toString() }), l.value.push(S);
+      const c = !Array.isArray(e.value), b = [...l.value];
+      d();
+      const E = (C) => {
+        let S = H(t.value, C);
+        S || (S = H(b, C)), S || (S = { value: C, label: C.toString() }), l.value.push(S);
       };
-      if (b) {
-        const p = e.value;
-        E(p), a(l.value);
+      if (c) {
+        const C = e.value;
+        E(C), a(l.value);
         return;
       }
       e.value.forEach(E), a(l.value);
@@ -1287,7 +1291,7 @@ const zt = Ot.exports, H = (t, e) => {
     cachedSelectedListboxOptions: l,
     cachedListboxSelectedValues: n,
     // Methods
-    resetCache: r,
+    resetCache: d,
     setCachedValues: o
   };
 };
@@ -1298,4 +1302,4 @@ export {
   Vt as c,
   _t as u
 };
-//# sourceMappingURL=use-cached-selected-values.C24AnZ-w.js.map
+//# sourceMappingURL=use-cached-selected-values.a_5Iw6Dh.js.map