@adyen/bento-vue2 1.6.1 → 1.7.0

package/dist/chunks/{listbox.e7bf46e4.js → listbox.73c38f38.js}

@@ -1,34 +1,112 @@
-import { computed as r, defineComponent as k, ref as C, onMounted as de, toRef as _e, watch as be } from "vue";
-import { B as $ } from "./index.2fce7703.js";
-import { BentoLoadingIndicator as ve } from "../loading-indicator.js";
-import { u as F } from "./i18n.155748d6.js";
-import { d as me } from "./debounce.b5ef6acf.js";
-import { n as R } from "./_plugin-vue2_normalizer.71e2aa87.js";
-import { B as h, a as G } from "./keyboard-navigation.ca47dfa8.js";
-import { B as U } from "./checkbox.96ee3f71.js";
-import { C as fe, a as ge } from "./chevron-up.674ec2e5.js";
-import { B as pe, a as Y } from "./loading-button.0ad06c99.js";
+import { computed as r, ref as h, onMounted as J, onUnmounted as ve, watch as Q, defineComponent as D, toRef as Z } from "vue";
+import { B as F } from "./index.965ac1af.js";
+import { BentoLoadingIndicator as _e } from "../loading-indicator.js";
+import { BentoEmptyState as me } from "../empty-state.js";
+import { u as K } from "./i18n.155748d6.js";
+import { d as fe } from "./debounce.b5ef6acf.js";
+import { C as ge } from "./checkmark.78f3ed9c.js";
+import { B, a as q } from "./keyboard-navigation.ca47dfa8.js";
+import { n as N } from "./_plugin-vue2_normalizer.71e2aa87.js";
+import { B as j } from "./checkbox.5343e28e.js";
+import "./index.af05ced4.js";
+import { C as ye, a as Ee } from "./chevron-up.674ec2e5.js";
+import { B as Se, a as H } from "./loading-button.c65682d6.js";
+import { o as xe } from "./resize.a041304d.js";
 import "../assets/listbox.css";
-const K = (t, e, l, s) => {
+const ee = (t, e, l, s) => {
   const n = r(
     () => {
-      var u, d;
-      return !!((u = t.value) != null && u.length) && ((d = t.value) == null ? void 0 : d.length) === e.value.length;
+      var c, v;
+      return !!((c = t.value) != null && c.length) && ((v = t.value) == null ? void 0 : v.length) === e.value.length;
     }
-  ), c = r(() => {
-    var u;
-    return t.value == null || t.value.length === 0 ? !1 : ((u = t.value) == null ? void 0 : u.length) !== e.value.length;
+  ), o = r(() => {
+    var c;
+    return t.value == null || t.value.length === 0 ? !1 : ((c = t.value) == null ? void 0 : c.length) !== e.value.length;
   });
   return {
     isAllSelected: n,
-    isIndeterminate: c,
-    toggleSelectAll: (u) => {
-      u ? l() : s();
+    isIndeterminate: o,
+    toggleSelectAll: (c) => {
+      c ? l() : s();
     }
   };
 };
-var o = /* @__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))(o || {}), D = /* @__PURE__ */ ((t) => (t.AUTOMATIC = "automatic", t.BUTTON = "button", t.NONE = "none", t))(D || {});
-const Ee = k({
+function pe(t, { disabled: e, itemHeight: l, overscan: s = 5, prefixHeight: n }) {
+  const o = h(null), _ = h([]), c = h(0), v = h(0), b = h(0);
+  let S;
+  const L = r(() => {
+    const d = typeof l == "number" ? t.value.length * l : t.value.reduce((g, x, C) => g + l(C), 0), y = typeof l == "number" ? c.value * l : t.value.slice(0, c.value).reduce((g, x, C) => g + l(C), 0);
+    return {
+      style: {
+        marginTop: `${y}px`,
+        height: `${d - y}px`
+      }
+    };
+  }), p = () => {
+    const d = (n == null ? void 0 : n.value) ?? 0, y = Math.max(o.value.scrollTop - d, 0);
+    if (typeof l == "number")
+      return Math.floor(y / l);
+    let g = 0, x = 0;
+    for (let C = 0; C < t.value.length; C += 1) {
+      const M = l(C);
+      if (g += M, g >= y) {
+        x = C;
+        break;
+      }
+    }
+    return x;
+  }, f = () => {
+    if (b.value = o.value.clientHeight, typeof l == "number")
+      return Math.ceil(b.value / l);
+    const d = c.value ?? 0;
+    let y = 0, g = 0;
+    for (let x = d; x < t.value.length; x += 1) {
+      const C = l(x);
+      if (y += C, g = x, y > b.value)
+        break;
+    }
+    return g - d;
+  }, T = () => {
+    if (o.value) {
+      const d = f();
+      c.value = p(), v.value = Math.min(c.value + d + s, t.value.length), _.value = t.value.slice(c.value, v.value);
+    }
+  }, I = () => {
+    T();
+  };
+  e || (J(() => {
+    o.value && (b.value = o.value.clientHeight, S = xe(o.value, ({ clientHeight: d }) => {
+      b.value = d, T();
+    }), T());
+  }), ve(() => {
+    S == null || S.disconnect();
+  }), Q(
+    () => t.value,
+    () => {
+      T();
+    }
+  ));
+  const A = {
+    ref: o,
+    style: { overflowY: "auto" }
+  };
+  return e ? {
+    containerRef: o,
+    containerProps: A,
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onScroll: () => {
+    },
+    list: t
+  } : {
+    containerRef: o,
+    containerProps: A,
+    onScroll: I,
+    list: _,
+    wrapperProps: L
+  };
+}
+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 || {});
+const Ce = D({
   name: "bento-listbox-option",
   props: {
     /**
@@ -40,7 +118,7 @@ const Ee = k({
      */
     selected: { type: Boolean, default: !1 }
   },
-  emits: [o.CLICK, o.ENTER, o.SPACE, o.TAB],
+  emits: [i.CLICK, i.ENTER, i.SPACE, i.TAB],
   setup(t, { emit: e }) {
     const l = r(() => ({
       "b-listbox-option--disabled": t.disabled,
@@ -48,21 +126,21 @@ const Ee = k({
     }));
     return {
       // Enums
-      BentoKeyboardNavigationKeyDownEvent: h,
-      BentoListboxEvent: o,
+      BentoKeyboardNavigationKeyDownEvent: B,
+      BentoListboxEvent: i,
       // Values
       conditionalClasses: l,
       // Events
-      onClick: (c) => {
-        e(o.CLICK, c);
+      onClick: (o) => {
+        e(i.CLICK, o);
       },
-      onOptionSelected: (c, v) => {
-        e(c, v);
+      onOptionSelected: (o, _) => {
+        e(o, _);
       }
     };
   }
 });
-var xe = function() {
+var he = function() {
   var e = this, l = e._self._c;
   return e._self._setupProxy, l("label", e._b({ staticClass: "b-listbox-option", class: e.conditionalClasses, attrs: { role: "option" }, on: { click: e.onClick, keydown: [function(s) {
     return !s.type.indexOf("key") && e._k(s.keyCode, "enter", 13, s.key, "Enter") ? null : e.onOptionSelected(e.BentoListboxEvent.ENTER, s);
@@ -71,42 +149,22 @@ var xe = function() {
   }, function(s) {
     return !s.type.indexOf("key") && e._k(s.keyCode, "tab", 9, s.key, "Tab") ? null : e.onOptionSelected(e.BentoListboxEvent.TAB, s);
   }] } }, "label", e.$attrs, !1), [e._t("default")], 2);
-}, ye = [], Se = /* @__PURE__ */ R(
-  Ee,
-  xe,
-  ye,
-  !1,
-  null,
-  "d7fb415c",
-  null,
-  null
-);
-const P = Se.exports;
-let V = 0;
-const Ce = {
-  beforeCreate() {
-    this.uuid = V.toString(), V += 1;
-  }
-};
-var he = function() {
-  var e = this, l = e._self._c;
-  return l("svg", e._b({ 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: "#00112C", "fill-rule": "evenodd", d: "M14.5303 4.53033C14.8232 4.23744 14.8232 3.76256 14.5303 3.46967C14.2374 3.17678 13.7626 3.17678 13.4697 3.46967L6 10.9393L2.53033 7.46967C2.23744 7.17678 1.76256 7.17678 1.46967 7.46967C1.17678 7.76256 1.17678 8.23744 1.46967 8.53033L5.46967 12.5303C5.50628 12.5669 5.54574 12.599 5.58732 12.6264C5.87844 12.8186 6.27405 12.7866 6.53033 12.5303L14.5303 4.53033Z", "clip-rule": "evenodd" } })]);
-}, Le = [], Oe = /* @__PURE__ */ R(
+}, Te = [], Oe = /* @__PURE__ */ N(
   Ce,
   he,
-  Le,
+  Te,
   !1,
   null,
-  "4687fbd0",
+  "d7fb415c",
   null,
   null
 );
-const Te = Oe.exports, Ae = k({
+const U = Oe.exports, Le = D({
   name: "bento-listbox-single-select-option",
   components: {
-    BentoListboxOption: P,
-    BentoTypography: $,
-    CheckmarkIcon: Te
+    BentoListboxOption: U,
+    BentoTypography: F,
+    CheckmarkIcon: ge
   },
   props: {
     /**
@@ -126,24 +184,24 @@ const Te = Oe.exports, Ae = k({
      */
     selected: { type: Boolean, default: !1 }
   },
-  emits: [o.ENTER, o.SELECT, o.SPACE, o.TAB],
+  emits: [i.ENTER, i.SELECT, i.SPACE, i.TAB],
   setup(t, { emit: e }) {
-    const l = (v) => {
-      t.disabled || e(v, t.option.value);
-    }, s = r(() => t.disabled ? !0 : null), n = r(() => t.selected ? !0 : null), c = r(() => t.disabled ? -1 : 0);
+    const l = (_) => {
+      t.disabled || e(_, t.option.value);
+    }, s = r(() => t.disabled ? !0 : null), n = r(() => t.selected ? !0 : null), o = r(() => t.disabled ? -1 : 0);
     return {
       // Values
       ariaDisabled: s,
       ariaSelected: n,
-      tabIndex: c,
+      tabIndex: o,
       // Enums
-      BentoListboxEvent: o,
+      BentoListboxEvent: i,
       // Events
       onOptionSelected: l
     };
   }
 });
-var Ie = function() {
+var Ae = 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: e._d({ click: function(s) {
     return e.onOptionSelected(e.BentoListboxEvent.SELECT);
@@ -156,23 +214,23 @@ var Ie = 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);
-}, Be = [], Re = /* @__PURE__ */ R(
+}, Ie = [], Be = /* @__PURE__ */ N(
+  Le,
   Ae,
   Ie,
-  Be,
   !1,
   null,
   "092ed5ee",
   null,
   null
 );
-const ke = Re.exports, W = ({ items: t, isOptionDisabled: e }, l) => {
-  const s = r(() => t.value.length - 1), n = C(0);
-  de(() => {
-    e && (n.value = t.value.findIndex((m) => !e(m)));
+const Re = Be.exports, te = ({ items: t, isOptionDisabled: e }, l) => {
+  const s = r(() => t.value.length - 1), n = h(0);
+  J(() => {
+    e && (n.value = t.value.findIndex((f) => !e(f)));
   });
-  const c = (m) => !e || !!e && e(t.value[m]), v = (m) => !e || !!e && !e(t.value[m]), u = (m) => {
-    switch (m) {
+  const o = (f) => !e || !!e && e(t.value[f]), _ = (f) => !e || !!e && !e(t.value[f]), c = (f) => {
+    switch (f) {
       case "increase":
         n.value += 1;
         break;
@@ -180,47 +238,47 @@ const ke = Re.exports, W = ({ items: t, isOptionDisabled: e }, l) => {
         n.value -= 1;
         break;
     }
-  }, d = ({ edgeCaseItem: m, isItemBeforeEdgeCaseItem: O }, T, L) => {
-    n.value !== m && (O ? v(m) && u(L) : (u(L), c(n.value) && T()), l(n.value));
-  }, _ = () => {
-    const m = n.value === s.value - 2;
-    d(
+  }, v = ({ edgeCaseItem: f, isItemBeforeEdgeCaseItem: T }, I, A) => {
+    n.value !== f && (T ? _(f) && c(A) : (c(A), o(n.value) && I()), l(n.value));
+  }, b = () => {
+    const f = n.value === s.value - 2;
+    v(
       {
-        isItemBeforeEdgeCaseItem: m,
+        isItemBeforeEdgeCaseItem: f,
         edgeCaseItem: s.value
       },
-      _,
+      b,
       "increase"
       /* INCREASE */
     );
-  }, x = () => {
-    const m = n.value === 1;
-    d(
+  }, S = () => {
+    const f = n.value === 1;
+    v(
       {
         edgeCaseItem: 0,
-        isItemBeforeEdgeCaseItem: m
+        isItemBeforeEdgeCaseItem: f
       },
-      x,
+      S,
       "decrease"
       /* DECREASE */
     );
   };
   return {
     moveToFirstElement: () => {
-      n.value = 0, c(n.value) ? _() : l(n.value);
+      n.value = 0, o(n.value) ? b() : l(n.value);
     },
     moveToLastElement: () => {
-      n.value = s.value, c(n.value) ? x() : l(n.value);
+      n.value = s.value, o(n.value) ? S() : l(n.value);
     },
-    moveToNextElement: _,
-    moveToPreviousElement: x
+    moveToNextElement: b,
+    moveToPreviousElement: S
   };
-}, De = k({
+}, ke = D({
   name: "bento-listbox-single-select",
   components: {
-    BentoListboxSingleSelectOption: ke
+    BentoListboxSingleSelectOption: Re
   },
-  directives: { BentoKeyboardNavigationDirective: G },
+  directives: { BentoKeyboardNavigationDirective: q },
   inheritAttrs: !1,
   props: {
     /**
@@ -257,76 +315,76 @@ const ke = Re.exports, W = ({ items: t, isOptionDisabled: e }, l) => {
       default: void 0
     }
   },
-  emits: [o.SELECT, o.ENTER, o.SPACE, o.TAB],
+  emits: [i.SELECT, i.ENTER, i.SPACE, i.TAB],
   setup(t, { emit: e, slots: l }) {
-    const s = C([]), n = (y) => (m) => {
-      e(y, m);
-    }, c = (y) => s.value[y].$el.focus(), { moveToNextElement: v, moveToPreviousElement: u, moveToFirstElement: d, moveToLastElement: _ } = W(
+    const s = h([]), n = (p) => (f) => {
+      e(p, f);
+    }, o = (p) => s.value[p].$el.focus(), { moveToNextElement: _, moveToPreviousElement: c, moveToFirstElement: v, moveToLastElement: b } = te(
       {
-        items: _e(t, "items"),
+        items: Z(t, "items"),
         isOptionDisabled: t.isOptionDisabled
       },
-      c
-    ), x = {
-      [h.ARROW_UP]: u,
-      [h.ARROW_DOWN]: v,
-      [h.HOME]: d,
-      [h.END]: _
-    }, E = {
-      [o.SELECT]: n(o.SELECT),
-      [o.SPACE]: n(o.SPACE),
-      [o.TAB]: n(o.TAB),
-      [o.ENTER]: n(o.ENTER)
+      o
+    ), S = {
+      [B.ARROW_UP]: c,
+      [B.ARROW_DOWN]: _,
+      [B.HOME]: v,
+      [B.END]: b
+    }, L = {
+      [i.SELECT]: n(i.SELECT),
+      [i.SPACE]: n(i.SPACE),
+      [i.TAB]: n(i.TAB),
+      [i.ENTER]: n(i.ENTER)
     };
     return {
       // Enums
-      BentoListboxEvent: o,
+      BentoListboxEvent: i,
       // Values
       listboxItemRef: s,
       slots: l,
       // Methods
       onOptionSelected: n,
       // Keyboard navigation
-      listboxListeners: x,
-      listboxOptionListeners: E
+      listboxListeners: S,
+      listboxOptionListeners: L
     };
   }
 });
-var Ne = function() {
+var De = function() {
   var e = this, l = e._self._c;
   return e._self._setupProxy, l("div", e._g({ directives: [{ name: "bento-keyboard-navigation-directive", rawName: "v-bento-keyboard-navigation-directive" }] }, e.listboxListeners), e._l(e.items, function(s) {
-    return l("bento-listbox-single-select-option", e._g({ key: s.value, ref: "listboxItemRef", refInFor: !0, attrs: { role: "option", option: s, disabled: e.isOptionDisabled ? e.isOptionDisabled(s) : null, selected: s.value === e.selectedValue }, scopedSlots: e._u([e._l(e.slots, function(n, c) {
-      return { key: c, fn: function(v) {
-        return [e._t(c, null, null, v)];
+    return l("bento-listbox-single-select-option", e._g({ key: s.value, ref: "listboxItemRef", refInFor: !0, attrs: { role: "option", option: s, disabled: e.isOptionDisabled ? e.isOptionDisabled(s) : null, selected: s.value === e.selectedValue }, scopedSlots: e._u([e._l(e.slots, function(n, o) {
+      return { key: o, fn: function(_) {
+        return [e._t(o, null, null, _)];
       } };
     })], null, !0) }, e.listboxOptionListeners));
   }), 1);
-}, $e = [], Pe = /* @__PURE__ */ R(
+}, Ne = [], Pe = /* @__PURE__ */ N(
+  ke,
   De,
   Ne,
-  $e,
   !1,
   null,
   null,
   null,
   null
 );
-const we = Pe.exports;
-var q = /* @__PURE__ */ ((t) => (t.DISABLED = "disabled", t))(q || {}), N = /* @__PURE__ */ ((t) => (t.SELECT_CATEGORY = "select-category", t.UNSELECT_CATEGORY = "unselect-category", t))(N || {});
-const Me = {
+const Me = Pe.exports;
+var le = /* @__PURE__ */ ((t) => (t.DISABLED = "disabled", t))(le || {}), G = /* @__PURE__ */ ((t) => (t.SELECT_CATEGORY = "select-category", t.UNSELECT_CATEGORY = "unselect-category", t))(G || {});
+const $e = {
   "en-US": {
     categoryClosed: "{category} closed",
     categoryOpened: "{category} opened"
   }
-}, Fe = k({
-  i18n: { messages: Me },
+}, we = D({
+  i18n: { messages: $e },
   name: "bento-listbox-multi-select-category",
   components: {
-    BentoCheckbox: U,
-    BentoTypography: $,
-    BentoListboxOption: P,
-    ChevronDownIcon: fe,
-    ChevronUpIcon: ge
+    BentoCheckbox: j,
+    BentoTypography: F,
+    BentoListboxOption: U,
+    ChevronDownIcon: ye,
+    ChevronUpIcon: Ee
   },
   props: {
     /**
@@ -363,57 +421,57 @@ const Me = {
       default: () => []
     }
   },
-  emits: [N.SELECT_CATEGORY, N.UNSELECT_CATEGORY],
+  emits: [G.SELECT_CATEGORY, G.UNSELECT_CATEGORY],
   setup(t, { emit: e }) {
-    const l = C(!1), { t: s } = F(), n = (f) => t.isOptionDisabled ? t.isOptionDisabled(f) : !1, c = r(
-      () => t.category.items.every((f) => n(f))
-    ), v = r(() => ({
-      [`b-listbox-multi-select-category--${q.DISABLED}`]: c.value
-    })), u = (f) => {
-      f.preventDefault(), l.value = !l.value;
-    }, d = (f) => {
-      var A;
-      const S = n(f), p = ((A = t.selectedItemsList) == null ? void 0 : A.includes(f.value)) || !1;
-      return { isDisabled: S, isPreSelected: p };
-    }, _ = r(
-      () => t.category.items.filter((f) => {
-        const { isDisabled: S, isPreSelected: p } = d(f);
-        return S && p || !S;
+    const l = h(!1), { t: s } = K(), n = (d) => t.isOptionDisabled ? t.isOptionDisabled(d) : !1, o = r(
+      () => t.category.items.every((d) => n(d))
+    ), _ = r(() => ({
+      [`b-listbox-multi-select-category--${le.DISABLED}`]: o.value
+    })), c = (d) => {
+      d.preventDefault(), l.value = !l.value;
+    }, v = (d) => {
+      var x;
+      const y = n(d), g = ((x = t.selectedItemsList) == null ? void 0 : x.includes(d.value)) || !1;
+      return { isDisabled: y, isPreSelected: g };
+    }, b = r(
+      () => t.category.items.filter((d) => {
+        const { isDisabled: y, isPreSelected: g } = v(d);
+        return y && g || !y;
       })
-    ), x = r(
+    ), S = r(
       () => {
-        var f;
-        return (f = _.value) == null ? void 0 : f.filter(
-          ({ value: S }) => {
-            var p;
-            return (p = t.selectedItemsList) == null ? void 0 : p.includes(S);
+        var d;
+        return (d = b.value) == null ? void 0 : d.filter(
+          ({ value: y }) => {
+            var g;
+            return (g = t.selectedItemsList) == null ? void 0 : g.includes(y);
           }
         );
       }
-    ), E = r(() => {
-      const f = l.value ? "categoryOpened" : "categoryClosed";
-      return s(f, { category: t.category.label });
-    }), y = () => {
-      e(N.SELECT_CATEGORY);
-    }, m = () => {
-      e(N.UNSELECT_CATEGORY);
-    }, { isAllSelected: O, isIndeterminate: T, toggleSelectAll: L } = K(
-      x,
-      _,
-      y,
-      m
+    ), L = r(() => {
+      const d = l.value ? "categoryOpened" : "categoryClosed";
+      return s(d, { category: t.category.label });
+    }), p = () => {
+      e(G.SELECT_CATEGORY);
+    }, f = () => {
+      e(G.UNSELECT_CATEGORY);
+    }, { isAllSelected: T, isIndeterminate: I, toggleSelectAll: A } = ee(
+      S,
+      b,
+      p,
+      f
     );
     return {
       // Values
-      chevronTitle: E,
-      conditionalClass: v,
-      hasAllPropsDisabled: c,
+      chevronTitle: L,
+      conditionalClass: _,
+      hasAllPropsDisabled: o,
       isOpen: l,
-      isAllSelected: O,
-      isIndeterminate: T,
+      isAllSelected: T,
+      isIndeterminate: I,
       // Methods
-      toggleOpen: u,
-      toggleSelectAll: L
+      toggleOpen: c,
+      toggleSelectAll: A
     };
   }
 });
@@ -422,25 +480,25 @@ var Ge = function() {
   return e._self._setupProxy, l("div", [l("bento-listbox-option", { staticClass: "b-listbox-multi-select-category__option", class: e.conditionalClass }, [l("bento-checkbox", { attrs: { "model-value": e.isAllSelected, indeterminate: e.isIndeterminate, disabled: e.hasAllPropsDisabled, "aria-label": e.category.label, value: e.category.value }, on: { "update:model-value": e.toggleSelectAll } }), 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(s) {
     return 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.isOpen, expression: "isOpen" }] }, [e._t("default")], 2)], 1);
-}, Ue = [], Ye = /* @__PURE__ */ R(
-  Fe,
+}, Fe = [], Ue = /* @__PURE__ */ N(
+  we,
   Ge,
-  Ue,
+  Fe,
   !1,
   null,
   "360ce3ac",
   null,
   null
 );
-const Ve = Ye.exports;
-var B = /* @__PURE__ */ ((t) => (t.SELECT_CATEGORY = "select-category", t.TOGGLE_CHECKBOX_SELECTION = "toggle-checkbox-selection", t.UNSELECT_CATEGORY = "unselect-category", t))(B || {});
-const He = k({
+const Ye = Ue.exports;
+var k = /* @__PURE__ */ ((t) => (t.SELECT_CATEGORY = "select-category", t.TOGGLE_CHECKBOX_SELECTION = "toggle-checkbox-selection", t.UNSELECT_CATEGORY = "unselect-category", t))(k || {});
+const Ve = D({
   name: "listbox-multi-select-options",
   components: {
-    BentoCheckbox: U,
-    BentoListboxOption: P,
-    BentoTypography: $,
-    ListboxMultiSelectCategory: Ve
+    BentoCheckbox: j,
+    BentoListboxOption: U,
+    BentoTypography: F,
+    ListboxMultiSelectCategory: Ye
   },
   props: {
     /**
@@ -494,20 +552,20 @@ const He = k({
     }
   },
   emits: [
-    B.TOGGLE_CHECKBOX_SELECTION,
-    B.SELECT_CATEGORY,
-    B.UNSELECT_CATEGORY
+    k.TOGGLE_CHECKBOX_SELECTION,
+    k.SELECT_CATEGORY,
+    k.UNSELECT_CATEGORY
   ],
   setup(t, { emit: e }) {
-    const l = (d) => {
-      e(B.TOGGLE_CHECKBOX_SELECTION, d);
-    }, s = (d) => !!d.items, n = (d) => {
-      const _ = t.isMultiLevel && t.searching;
-      return d.description && (!t.isMultiLevel || _);
-    }, c = (d) => d.items ? !!d.items.find((_) => t.selectedItemsList.includes(_.value)) : t.selectedItemsList.includes(d.value), v = (d, _) => {
-      if (s(_))
-        return e(d ? B.SELECT_CATEGORY : B.UNSELECT_CATEGORY, _);
-      l(_.value);
+    const l = (v) => {
+      e(k.TOGGLE_CHECKBOX_SELECTION, v);
+    }, s = (v) => !!v.items, n = (v) => {
+      const b = t.isMultiLevel && t.searching;
+      return v.description && (!t.isMultiLevel || b);
+    }, o = (v) => v.items ? !!v.items.find((b) => t.selectedItemsList.includes(b.value)) : t.selectedItemsList.includes(v.value), _ = (v, b) => {
+      if (s(b))
+        return e(v ? k.SELECT_CATEGORY : k.UNSELECT_CATEGORY, b);
+      l(b.value);
     };
     return {
       // Values
@@ -516,17 +574,17 @@ const He = k({
       })),
       // Methods
       isCategory: s,
-      isOptionSelected: c,
+      isOptionSelected: o,
       shouldShowDescription: n,
       toggleCheckboxSelection: l,
-      selectSearch: v,
+      selectSearch: _,
       // Enums
-      BentoListboxEvent: o,
-      ListboxMultiSelectOptionsEvent: B
+      BentoListboxEvent: i,
+      ListboxMultiSelectOptionsEvent: k
     };
   }
 });
-var Ke = function() {
+var ze = function() {
   var e = this, l = e._self._c;
   return e._self._setupProxy, l("div", e._l(e.items, function(s) {
     return l("div", { key: `selected-${s.value}` }, [e.searching && e.isMultiLevel ? [l("bento-listbox-option", { staticClass: "b-listbox-multi-select-options", class: e.conditionalClasses, attrs: { disabled: e.isOptionDisabled ? e.isOptionDisabled(s) : null } }, [l("bento-checkbox", { attrs: { "model-value": e.isOptionSelected(s), "aria-label": s.label, disabled: e.isOptionDisabled ? e.isOptionDisabled(s) : null, value: s.value }, on: { "update:model-value": (n) => e.selectSearch(n, s) } }), e._t("default", function() {
@@ -541,9 +599,9 @@ var Ke = function() {
       return [l("span", { staticClass: "b-listbox-multi-select__option-text" }, [l("bento-typography", { attrs: { el: "span" } }, [e._v(e._s(s.label))]), e.shouldShowDescription(s) ? l("bento-typography", { staticClass: "b-listbox-multi-select__option-description", attrs: { el: "span" } }, [e._v(" " + e._s(s.description) + " ")]) : e._e()], 1)];
     }, null, s)], 2)]], 2);
   }), 0);
-}, We = [], qe = /* @__PURE__ */ R(
-  He,
-  Ke,
+}, We = [], Ke = /* @__PURE__ */ N(
+  Ve,
+  ze,
   We,
   !1,
   null,
@@ -551,22 +609,22 @@ var Ke = function() {
   null,
   null
 );
-const ze = qe.exports, je = {
+const qe = Ke.exports, je = {
   "en-US": {
     allSelected: "All selected ({total})",
     numberOfTotalSelected: "{number} of {total} selected",
     selectAll: "Select all ({total})"
   }
-}, Xe = k({
+}, He = D({
   i18n: { messages: je },
   name: "bento-listbox-multi-select",
   components: {
-    BentoCheckbox: U,
-    BentoListboxOption: P,
-    BentoTypography: $,
-    ListboxMultiSelectOptions: ze
+    BentoCheckbox: j,
+    BentoListboxOption: U,
+    BentoTypography: F,
+    ListboxMultiSelectOptions: qe
   },
-  directives: { BentoKeyboardNavigationDirective: G },
+  directives: { BentoKeyboardNavigationDirective: q },
   props: {
     /**
      * Function that allows the options to be disabled
@@ -608,145 +666,145 @@ const ze = qe.exports, je = {
       default: () => []
     }
   },
-  emits: [o.SELECT],
+  emits: [i.SELECT],
   setup(t, { emit: e, slots: l }) {
-    const { t: s } = F(), n = C(null), c = C(null), v = C(null), u = C();
-    be(
+    const { t: s } = K(), n = h(null), o = h(null), _ = h(null), c = h();
+    Q(
       () => t.selectedValues,
       () => {
-        u.value = [...t.selectedValues ?? []];
+        c.value = [...t.selectedValues ?? []];
       },
       {
         immediate: !0
       }
     );
-    const d = r(() => !!t.items.find(({ items: i }) => !!i)), _ = r(() => d.value ? t.items.reduce((i, a) => (a.items ? i.push(...a.items.flat()) : i.push(a), i), []) : t.items), x = (i) => {
-      var b;
-      const a = t.isOptionDisabled(i), g = ((b = u.value) == null ? void 0 : b.includes(i.value)) || !1;
-      return { isDisabled: a, isPreSelected: g };
-    }, E = r(
-      () => t.searching && d ? t.items : _.value.filter((i) => {
-        const { isDisabled: a, isPreSelected: g } = x(i);
-        return a && g || !a;
+    const v = r(() => !!t.items.find(({ items: a }) => !!a)), b = r(() => v.value ? t.items.reduce((a, u) => (u.items ? a.push(...u.items.flat()) : a.push(u), a), []) : t.items), S = (a) => {
+      var m;
+      const u = t.isOptionDisabled(a), E = ((m = c.value) == null ? void 0 : m.includes(a.value)) || !1;
+      return { isDisabled: u, isPreSelected: E };
+    }, L = r(
+      () => t.searching && v ? t.items : b.value.filter((a) => {
+        const { isDisabled: u, isPreSelected: E } = S(a);
+        return u && E || !u;
       })
-    ), y = r(
+    ), p = r(
       () => {
-        var i;
-        return (i = E.value) == null ? void 0 : i.filter((a) => {
-          var g;
-          return a.items && d.value && t.searching ? a.items.filter(
-            (I) => (t.selectedValues ?? []).includes(
-              I.value
+        var a;
+        return (a = L.value) == null ? void 0 : a.filter((u) => {
+          var E;
+          return u.items && v.value && t.searching ? u.items.filter(
+            (R) => (t.selectedValues ?? []).includes(
+              R.value
             )
-          ).length === a.items.length : (g = u.value) == null ? void 0 : g.includes(a.value);
+          ).length === u.items.length : (E = c.value) == null ? void 0 : E.includes(u.value);
         });
       }
-    ), m = () => d.value && !t.searching ? E.value.length : t.items.length, O = r(() => {
-      var g;
-      const i = m(), a = ((g = y.value) == null ? void 0 : g.length) || 0;
-      return a === 0 ? s("selectAll", { total: i }) : a === i ? s("allSelected", { total: i }) : s("numberOfTotalSelected", { number: a, total: i });
-    }), T = (i) => {
-      const a = (b) => {
-        const { isDisabled: I, isPreSelected: M } = x(b);
-        return I && M || !I;
-      }, g = i.filter(a).filter((b) => !u.value.includes(b.value)).map(({ value: b }) => b);
-      u.value = [...u.value, ...g], e(o.SELECT, u.value);
-    }, L = (i) => {
-      const a = (b) => {
-        const { isDisabled: I, isPreSelected: M } = x(b);
-        return !(I && M);
-      }, g = i.filter(a).map(({ value: b }) => b);
-      u.value = u.value.filter((b) => !(g != null && g.includes(b))), e(o.SELECT, u.value);
-    }, f = () => {
-      T(_.value);
-    }, S = () => {
-      L(_.value);
-    }, { isAllSelected: p, isIndeterminate: A, toggleSelectAll: z } = K(
-      y,
-      E,
-      f,
-      S
-    ), j = (i) => {
-      T(i.items);
-    }, X = (i) => {
-      L(i.items);
-    }, Z = (i, a) => {
-      let g = !1;
-      u.value = u.value.filter((b) => a === b ? (g = !0, !1) : !0), g || u.value.push(a), e(i, u.value);
-    }, w = r(() => {
-      const i = (b) => u.value.includes(b.value), a = (b) => !!b.find((I) => i(I));
-      return t.items.filter((b) => b.items && a(b.items) ? !0 : i(b));
-    }), J = r(() => {
-      var i;
-      return ((i = w.value) == null ? void 0 : i.length) > 0;
-    }), Q = r(
+    ), f = () => v.value && !t.searching ? L.value.length : t.items.length, T = r(() => {
+      var E;
+      const a = f(), u = ((E = p.value) == null ? void 0 : E.length) || 0;
+      return u === 0 ? s("selectAll", { total: a }) : u === a ? s("allSelected", { total: a }) : s("numberOfTotalSelected", { number: u, total: a });
+    }), I = (a) => {
+      const u = (m) => {
+        const { isDisabled: R, isPreSelected: W } = S(m);
+        return R && W || !R;
+      }, E = a.filter(u).filter((m) => !c.value.includes(m.value)).map(({ value: m }) => m);
+      c.value = [...c.value, ...E], e(i.SELECT, c.value);
+    }, A = (a) => {
+      const u = (m) => {
+        const { isDisabled: R, isPreSelected: W } = S(m);
+        return !(R && W);
+      }, E = a.filter(u).map(({ value: m }) => m);
+      c.value = c.value.filter((m) => !(E != null && E.includes(m))), e(i.SELECT, c.value);
+    }, d = () => {
+      I(b.value);
+    }, y = () => {
+      A(b.value);
+    }, { isAllSelected: g, isIndeterminate: x, toggleSelectAll: C } = ee(
+      p,
+      L,
+      d,
+      y
+    ), M = (a) => {
+      I(a.items);
+    }, Y = (a) => {
+      A(a.items);
+    }, V = (a, u) => {
+      let E = !1;
+      c.value = c.value.filter((m) => u === m ? (E = !0, !1) : !0), E || c.value.push(u), e(a, c.value);
+    }, $ = r(() => {
+      const a = (m) => c.value.includes(m.value), u = (m) => !!m.find((R) => a(R));
+      return t.items.filter((m) => m.items && u(m.items) ? !0 : a(m));
+    }), z = r(() => {
+      var a;
+      return ((a = $.value) == null ? void 0 : a.length) > 0;
+    }), O = r(
       () => {
-        var i, a;
-        return ((i = y.value) == null ? void 0 : i.length) === ((a = _.value) == null ? void 0 : a.length);
+        var a, u;
+        return ((a = p.value) == null ? void 0 : a.length) === ((u = b.value) == null ? void 0 : u.length);
       }
-    ), ee = r(
+    ), w = r(
       () => n.value ? [n.value] : []
-    ), te = r(
+    ), se = r(
       () => {
-        var i, a;
-        return (a = (i = c.value) == null ? void 0 : i.$children) != null && a.length ? c.value.$children : [];
+        var a, u;
+        return (u = (a = o.value) == null ? void 0 : a.$children) != null && u.length ? o.value.$children : [];
       }
-    ), se = r(
+    ), ne = r(
       () => {
-        var i, a;
-        return (a = (i = v.value) == null ? void 0 : i.$children) != null && a.length ? v.value.$children : [];
+        var a, u;
+        return (u = (a = _.value) == null ? void 0 : a.$children) != null && u.length ? _.value.$children : [];
       }
-    ), le = r(() => ({ label: O, value: p })), ne = r(() => [
-      le,
-      ...w.value,
-      ..._.value
-    ]), oe = (i) => {
+    ), oe = r(() => ({ label: T, value: g })), ie = r(() => [
+      oe,
+      ...$.value,
+      ...b.value
+    ]), ae = (a) => {
       [
-        ...ee.value,
-        ...te.value,
-        ...se.value
-      ][i].$el.focus();
-    }, { moveToNextElement: ie, moveToPreviousElement: ae, moveToFirstElement: ce, moveToLastElement: re } = W(
+        ...w.value,
+        ...se.value,
+        ...ne.value
+      ][a].$el.focus();
+    }, { moveToNextElement: ce, moveToPreviousElement: re, moveToFirstElement: ue, moveToLastElement: de } = te(
       {
-        items: C(ne),
+        items: h(ie),
         isOptionDisabled: t.isOptionDisabled
       },
-      oe
-    ), ue = {
-      [h.ARROW_UP]: ae,
-      [h.ARROW_DOWN]: ie,
-      [h.HOME]: ce,
-      [h.END]: re
+      ae
+    ), be = {
+      [B.ARROW_UP]: re,
+      [B.ARROW_DOWN]: ce,
+      [B.HOME]: ue,
+      [B.END]: de
     };
     return {
       // Refs
       selectAllListboxItemsRef: n,
-      selectedListboxItemsRef: c,
-      listboxItemsRef: v,
+      selectedListboxItemsRef: o,
+      listboxItemsRef: _,
       // Values
-      isAllSelected: p,
-      isAllItemsIncludingDisabled: Q,
-      isAnOptionSelected: J,
-      isIndeterminate: A,
-      isMultiLevelSelect: d,
-      flattenedItemsList: _,
-      selectedItemsList: u,
-      selectAllCheckboxText: O,
-      selectedOptions: w,
+      isAllSelected: g,
+      isAllItemsIncludingDisabled: O,
+      isAnOptionSelected: z,
+      isIndeterminate: x,
+      isMultiLevelSelect: v,
+      flattenedItemsList: b,
+      selectedItemsList: c,
+      selectAllCheckboxText: T,
+      selectedOptions: $,
       slots: l,
       // Enums
-      BentoListboxEvent: o,
+      BentoListboxEvent: i,
       // Methods
-      selectAllCategory: j,
-      toggleCheckboxSelection: Z,
-      toggleSelectAll: z,
-      unselectAllCategory: X,
+      selectAllCategory: M,
+      toggleCheckboxSelection: V,
+      toggleSelectAll: C,
+      unselectAllCategory: Y,
       // Events
-      listboxListeners: ue
+      listboxListeners: be
     };
   }
 });
-var Ze = function() {
+var Xe = function() {
   var e = this, l = e._self._c;
   return e._self._setupProxy, l("div", e._g({ directives: [{ name: "bento-keyboard-navigation-directive", rawName: "v-bento-keyboard-navigation-directive" }], staticClass: "b-listbox-multi-select" }, e.listboxListeners), [l("bento-listbox-option", { ref: "selectAllListboxItemsRef", staticClass: "b-listbox-multi-select__option" }, [l("bento-checkbox", { attrs: { "aria-label": e.selectAllCheckboxText, "model-value": e.isAllSelected, indeterminate: e.isIndeterminate }, on: { "update:model-value": e.toggleSelectAll } }), l("bento-typography", { attrs: { el: "span" } }, [e._v(" " + e._s(e.selectAllCheckboxText) + " ")])], 1), e.isAnOptionSelected ? l("div", [l("hr", { staticClass: "b-listbox-multi-select__divider" }), l("listbox-multi-select-options", { ref: "selectedListboxItemsRef", attrs: { items: e.selectedOptions, "is-option-disabled": e.isOptionDisabled, "is-multi-level": e.isMultiLevelSelect, searching: e.searching, "selected-items-list": e.selectedItemsList }, on: e._d({ "select-category": e.selectAllCategory, "unselect-category": e.unselectAllCategory, "toggle-checkbox-selection": function(s) {
     return e.toggleCheckboxSelection(e.BentoListboxEvent.SELECT, s);
@@ -757,8 +815,8 @@ var Ze = function() {
   }, e.BentoListboxEvent.ENTER, function(s) {
     return e.toggleCheckboxSelection(e.BentoListboxEvent.ENTER, s);
   }]), scopedSlots: e._u([e._l(e.slots, function(s, n) {
-    return { key: n, fn: function(c) {
-      return [e._t(n, null, null, c)];
+    return { key: n, fn: function(o) {
+      return [e._t(n, null, null, o)];
     } };
   })], null, !0) })], 1) : e._e(), l("div", { directives: [{ name: "show", rawName: "v-show", value: !e.isAllItemsIncludingDisabled, expression: "!isAllItemsIncludingDisabled" }] }, [l("hr", { staticClass: "b-listbox-multi-select__divider" }), l("listbox-multi-select-options", { ref: "listboxItemsRef", attrs: { items: e.items, "is-option-disabled": e.isOptionDisabled, "is-multi-level": e.isMultiLevelSelect, searching: e.searching, "selected-items-list": e.selectedItemsList }, on: e._d({ "toggle-checkbox-selection": function(s) {
     return e.toggleCheckboxSelection(e.BentoListboxEvent.SELECT, s);
@@ -769,13 +827,13 @@ var Ze = function() {
   }, e.BentoListboxEvent.ENTER, function(s) {
     return e.toggleCheckboxSelection(e.BentoListboxEvent.ENTER, s);
   }]), scopedSlots: e._u([e._l(e.slots, function(s, n) {
-    return { key: n, fn: function(c) {
-      return [e._t(n, null, null, c)];
+    return { key: n, fn: function(o) {
+      return [e._t(n, null, null, o)];
     } };
   })], null, !0) })], 1)], 1);
-}, Je = [], Qe = /* @__PURE__ */ R(
+}, Je = [], Qe = /* @__PURE__ */ N(
+  He,
   Xe,
-  Ze,
   Je,
   !1,
   null,
@@ -783,27 +841,35 @@ var Ze = function() {
   null,
   null
 );
-const H = Qe.exports, et = {
+const X = Qe.exports, Ze = {
   "en-US": {
     showMore: "Show more",
     loading: "Loading"
   }
-}, tt = k({
+}, et = 36, tt = D({
   name: "bento-listbox",
   components: {
-    BentoListboxSingleSelect: we,
-    BentoListboxMultiSelect: H,
-    BentoTypography: $,
-    BentoLoadingIndicator: ve,
-    BentoLoadingButton: pe
+    BentoEmptyState: me,
+    BentoListboxSingleSelect: Me,
+    BentoListboxMultiSelect: X,
+    BentoTypography: F,
+    BentoLoadingIndicator: _e,
+    BentoLoadingButton: Se
   },
-  directives: { BentoKeyboardNavigationDirective: G },
-  i18n: { messages: et },
+  directives: { BentoKeyboardNavigationDirective: q },
+  i18n: { messages: Ze },
   props: {
     /**
      * Defines a string value that labels an interactive element.
      */
     ariaLabel: { type: String, default: null },
+    /**
+     * Empty state props that will be used with the inner empty state component to be displayed when no search results are found.
+     */
+    emptyState: {
+      type: Object,
+      default: void 0
+    },
     /**
      * Indicates whether there are more items to load
      */
@@ -847,8 +913,8 @@ const H = Qe.exports, et = {
      */
     lazyLoadType: {
       type: String,
-      default: D.NONE,
-      validator: (t) => Object.values(D).includes(t)
+      default: P.NONE,
+      validator: (t) => Object.values(P).includes(t)
     },
     /**
      * If enabled, the user will be able to select multiple items.
@@ -864,7 +930,7 @@ const H = Qe.exports, et = {
      *
      * If enabled, hides the "Select all" checkbox in "multiple" mode.
      */
-    searching: H.props.searching,
+    searching: X.props.searching,
     /**
      * The `input` value.
      * Providing an empty string or empty array will select no options.
@@ -873,97 +939,125 @@ const H = Qe.exports, et = {
     selectedValue: {
       type: [String, Number, Array],
       default: void 0
+    },
+    /**
+     * Enables virtual scrolling if set to true or by providing an object with itemHeight function.
+     * The itemHeight function is used to calculate the height of rendered item given it's index.
+     */
+    virtualScroll: {
+      type: [Boolean, Object],
+      default: !1
     }
   },
   emits: [
-    o.SELECT,
-    o.SPACE,
-    o.SHOW_MORE,
-    o.ENTER,
-    o.ESCAPE,
-    o.TAB
+    i.SELECT,
+    i.SPACE,
+    i.SHOW_MORE,
+    i.ENTER,
+    i.ESCAPE,
+    i.TAB
   ],
   setup(t, { emit: e, slots: l }) {
-    const { t: s } = F(), n = C(null), c = C([]), v = r(() => t.lazyLoadType !== D.AUTOMATIC), u = r(() => t.lazyLoadType === D.AUTOMATIC), d = r(
-      () => v.value ? "true" : void 0
-    ), _ = r(
-      () => v.value && t.loading ? "true" : "false"
-    ), x = r(
-      () => v.value ? "polite" : void 0
-    ), E = (p) => (A) => {
-      e(p, A);
-    }, y = () => {
-      e(o.SHOW_MORE);
-    }, m = me(() => {
-      const p = n.value, A = p.scrollTop + p.clientHeight >= p.scrollHeight;
-      t.hasMoreItems && A && !t.loading && y();
-    }), O = r(() => {
-      var p;
-      return t.searching && ((p = t.items) == null ? void 0 : p.length) === 0;
+    const s = h([]), n = Z(t, "items"), { t: o } = K(), _ = r(() => t.lazyLoadType !== P.AUTOMATIC), c = r(() => t.lazyLoadType === P.AUTOMATIC), v = () => {
+      var O;
+      return typeof (t == null ? void 0 : t.virtualScroll) == "object" && ((O = t == null ? void 0 : t.virtualScroll) != null && O.itemHeight) ? t.virtualScroll.itemHeight : et;
+    }, {
+      containerRef: b,
+      containerProps: S,
+      onScroll: L,
+      list: p,
+      wrapperProps: f
+    } = pe(n, {
+      itemHeight: v(),
+      // 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 = r(
-      () => t.lazyLoadType === D.BUTTON && t.hasMoreItems
-    ), L = r(
-      () => t.loading ? Y.LOADING : Y.START
-    ), f = r(() => t.loading ? s("loading") : s("showMore")), S = {
-      [o.SELECT]: E(o.SELECT),
-      [o.SPACE]: E(o.SPACE),
-      [o.TAB]: E(o.TAB),
-      [o.ENTER]: E(o.ENTER)
+      () => _.value ? "true" : void 0
+    ), I = r(
+      () => _.value && t.loading ? "true" : "false"
+    ), A = r(
+      () => _.value ? "polite" : void 0
+    ), d = (O) => (w) => {
+      e(O, w);
+    }, y = () => {
+      e(i.SHOW_MORE);
+    }, g = fe(() => {
+      const O = b.value, w = O.scrollTop + O.clientHeight >= O.scrollHeight;
+      t.hasMoreItems && w && !t.loading && y();
+    }), x = () => {
+      c.value ? g() : L();
+    }, C = r(() => {
+      var O;
+      return t.searching && ((O = t.items) == null ? void 0 : O.length) === 0;
+    }), M = r(
+      () => t.lazyLoadType === P.BUTTON && t.hasMoreItems
+    ), Y = r(
+      () => t.loading ? H.LOADING : H.START
+    ), V = r(() => t.loading ? o("loading") : o("showMore")), $ = r(() => ({
+      ...t.emptyState,
+      variant: "condensed"
+    })), z = {
+      [i.SELECT]: d(i.SELECT),
+      [i.SPACE]: d(i.SPACE),
+      [i.TAB]: d(i.TAB),
+      [i.ENTER]: d(i.ENTER)
     };
     return {
       // Refs
-      listboxRef: n,
-      listboxItemRef: c,
+      listboxRef: b,
+      listboxItemRef: s,
       // a11y
-      ariaAtomic: d,
-      ariaBusy: _,
-      ariaLive: x,
+      ariaAtomic: T,
+      ariaBusy: I,
+      ariaLive: A,
       // Values
-      hasAutomaticLazyLoader: u,
-      isSearchResultEmpty: O,
-      loadingButtonState: L,
+      containerProps: S,
+      isSearchResultEmpty: C,
+      limitedEmptyStateProps: $,
+      loadingButtonState: Y,
       slots: l,
-      shouldDisplayShowMoreButton: T,
-      showMoreButtonText: f,
+      shouldDisplayShowMoreButton: M,
+      showMoreButtonText: V,
+      virtualisedItems: p,
+      wrapperProps: f,
       // Enums
-      BentoKeyboardNavigationKeyDownEvent: h,
-      BentoListboxEvent: o,
+      BentoKeyboardNavigationKeyDownEvent: B,
+      BentoListboxEvent: i,
       // Methods
-      onOptionSelected: E,
-      emitShowMoreOnScrollEnd: m,
+      onListboxContainerScroll: x,
+      onOptionSelected: d,
       emitShowMore: y,
-      listboxListeners: S
+      listboxListeners: z
     };
   }
 });
-var st = function() {
+var lt = function() {
   var e = this, l = e._self._c;
-  return e._self._setupProxy, l("div", { directives: [{ name: "bento-keyboard-navigation-directive", rawName: "v-bento-keyboard-navigation-directive" }], ref: "listboxRef", staticClass: "b-listbox", attrs: { id: e.id, role: "listbox", tabindex: "-1", "aria-busy": e.ariaBusy, "aria-atomic": e.ariaAtomic, "aria-label": e.ariaLabel, "aria-live": e.ariaLive }, on: { scroll: () => e.hasAutomaticLazyLoader ? e.emitShowMoreOnScrollEnd() : void 0 } }, [e.isSearchResultEmpty ? l("div", { staticClass: "b-listbox__empty-search-message" }, [l("bento-typography", { attrs: { el: "span" } }, [e._v(e._s(e.noResultsMessage))])], 1) : [e.multiple ? [l("bento-listbox-multi-select", e._g({ ref: "listboxItemRef", attrs: { items: e.items, "selected-values": e.selectedValue, searching: e.searching, "is-option-disabled": e.isOptionDisabled }, scopedSlots: e._u([e._l(e.slots, function(s, n) {
-    return { key: n, fn: function(c) {
-      return [e._t(n, null, null, c)];
+  return e._self._setupProxy, l("div", e._b({ directives: [{ name: "bento-keyboard-navigation-directive", rawName: "v-bento-keyboard-navigation-directive" }], staticClass: "b-listbox", attrs: { id: e.id, role: "listbox", tabindex: "-1", "aria-busy": e.ariaBusy, "aria-atomic": e.ariaAtomic, "aria-label": e.ariaLabel, "aria-live": e.ariaLive }, on: { scroll: e.onListboxContainerScroll } }, "div", e.containerProps, !1), [l("div", e._b({}, "div", e.wrapperProps, !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({ ref: "listboxItemRef", attrs: { items: e.items, "selected-values": e.selectedValue, searching: e.searching, "is-option-disabled": e.isOptionDisabled }, scopedSlots: e._u([e._l(e.slots, function(s, n) {
+    return { key: n, fn: function(o) {
+      return [e._t(n, null, null, o)];
     } };
-  })], null, !0) }, e.listboxListeners))] : [l("bento-listbox-single-select", e._g({ ref: "listboxItemRef", attrs: { items: e.items, "selected-value": e.selectedValue, "is-option-disabled": e.isOptionDisabled }, scopedSlots: e._u([e._l(e.slots, function(s, n) {
-    return { key: n, fn: function(c) {
-      return [e._t(n, null, null, c)];
+  })], null, !0) }, e.listboxListeners))] : [l("bento-listbox-single-select", e._g({ ref: "listboxItemRef", attrs: { items: e.virtualisedItems, "selected-value": e.selectedValue, "is-option-disabled": e.isOptionDisabled }, scopedSlots: e._u([e._l(e.slots, function(s, n) {
+    return { key: n, fn: function(o) {
+      return [e._t(n, null, null, o)];
     } };
   })], null, !0) }, e.listboxListeners))], e.shouldDisplayShowMoreButton ? l("div", { staticClass: "b-listbox__lazy-load" }, [l("bento-loading-button", { attrs: { state: e.loadingButtonState, variant: "secondary" }, on: { "!click": function(s) {
     return e.emitShowMore.apply(null, arguments);
-  } } }, [e._v(" " + e._s(e.showMoreButtonText) + " ")])], 1) : e.loading ? l("div", { staticClass: "b-listbox__lazy-load" }, [l("bento-loading-indicator")], 1) : e._e()]], 2);
-}, lt = [], nt = /* @__PURE__ */ R(
+  } } }, [e._v(" " + e._s(e.showMoreButtonText) + " ")])], 1) : e.loading ? l("div", { staticClass: "b-listbox__lazy-load" }, [l("bento-loading-indicator")], 1) : e._e()]], 2)]);
+}, st = [], nt = /* @__PURE__ */ N(
   tt,
-  st,
   lt,
+  st,
   !1,
   null,
-  "0bc89a2b",
+  "d5d56fed",
   null,
   null
 );
-const mt = nt.exports;
+const Et = nt.exports;
 export {
-  o as B,
-  Te as C,
-  D as a,
-  mt as b
+  Et as B,
+  i as a,
+  P as b
 };
-//# sourceMappingURL=listbox.e7bf46e4.js.map
+//# sourceMappingURL=listbox.73c38f38.js.map