@adyen/bento-vue3 1.9.0 → 1.10.0

package/dist/chunks/listbox.963589af.js

@@ -0,0 +1,1419 @@
+import { computed as u, ref as N, onMounted as Oe, onUnmounted as Ge, watch as Le, defineComponent as j, resolveComponent as C, openBlock as g, createElementBlock as A, createVNode as I, withCtx as _, createTextVNode as V, toDisplayString as G, createElementVNode as F, renderSlot as w, mergeProps as U, withKeys as me, createBlock as B, toHandlerKey as q, normalizeProps as Y, guardReactiveProps as x, createCommentVNode as J, withDirectives as se, vShow as pe, toRef as re, resolveDirective as fe, toHandlers as ee, Fragment as te, renderList as z, createSlots as le, normalizeClass as ve, pushScopeId as Ye, popScopeId as Fe } from "vue";
+import { B as W, a as ye } from "./keyboard-navigation.ca47dfa8.js";
+import { B as oe } from "./index.10c545e2.js";
+import { BentoLoadingIndicator as Ke } from "../loading-indicator.js";
+import { BentoEmptyState as ze } from "../empty-state.js";
+import { u as Se } from "./i18n.6c402773.js";
+import { d as We } from "./debounce.b5ef6acf.js";
+import { _ as X } from "./_plugin-vue_export-helper.dad06003.js";
+import { C as xe } from "./checkmark.eb3c7a06.js";
+import { B as Ee } from "./checkbox.979b1aa4.js";
+import { C as qe, a as He } from "./chevron-up.46afb34c.js";
+import { B as je, a as Ce } from "./loading-button.09fa0115.js";
+import { o as Xe } from "./resize.a041304d.js";
+import "../assets/listbox.css";
+const Ae = (e, t, r, b) => {
+  const i = u(
+    () => {
+      var l, d;
+      return !!((l = e.value) != null && l.length) && ((d = e.value) == null ? void 0 : d.length) === t.value.length;
+    }
+  ), n = u(() => {
+    var l;
+    return e.value == null || e.value.length === 0 ? !1 : ((l = e.value) == null ? void 0 : l.length) !== t.value.length;
+  });
+  return {
+    isAllSelected: i,
+    isIndeterminate: n,
+    toggleSelectAll: (l) => {
+      l ? r() : b();
+    }
+  };
+};
+function Je(e, { disabled: t, itemHeight: r, overscan: b = 5, prefixHeight: i }) {
+  const n = N(null), a = N([]), l = N(0), d = N(0), o = N(0);
+  let p;
+  const s = u(() => {
+    const T = typeof r == "number" ? e.value.length * r : e.value.reduce(($, S, O) => $ + r(O), 0), k = typeof r == "number" ? l.value * r : e.value.slice(0, l.value).reduce(($, S, O) => $ + r(O), 0);
+    return {
+      style: {
+        marginTop: `${k}px`,
+        height: `${T - k}px`
+      }
+    };
+  }), f = () => {
+    const T = (i == null ? void 0 : i.value) ?? 0, k = Math.max(n.value.scrollTop - T, 0);
+    if (typeof r == "number")
+      return Math.floor(k / r);
+    let $ = 0, S = 0;
+    for (let O = 0; O < e.value.length; O += 1) {
+      const M = r(O);
+      if ($ += M, $ >= k) {
+        S = O;
+        break;
+      }
+    }
+    return S;
+  }, m = () => {
+    if (o.value = n.value.clientHeight, typeof r == "number")
+      return Math.ceil(o.value / r);
+    const T = l.value ?? 0;
+    let k = 0, $ = 0;
+    for (let S = T; S < e.value.length; S += 1) {
+      const O = r(S);
+      if (k += O, $ = S, k > o.value)
+        break;
+    }
+    return $ - T;
+  }, h = () => {
+    if (n.value) {
+      const T = m();
+      l.value = f(), d.value = Math.min(l.value + T + b, e.value.length), a.value = e.value.slice(l.value, d.value);
+    }
+  }, R = () => {
+    h();
+  };
+  t || (Oe(() => {
+    n.value && (o.value = n.value.clientHeight, p = Xe(n.value, ({ clientHeight: T }) => {
+      o.value = T, h();
+    }), h());
+  }), Ge(() => {
+    p == null || p.disconnect();
+  }), Le(
+    () => e.value,
+    () => {
+      h();
+    }
+  ));
+  const P = {
+    ref: n,
+    style: { overflowY: "auto" }
+  };
+  return t ? {
+    containerRef: n,
+    containerProps: P,
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onScroll: () => {
+    },
+    list: e
+  } : {
+    containerRef: n,
+    containerProps: P,
+    onScroll: R,
+    list: a,
+    wrapperProps: s
+  };
+}
+var c = /* @__PURE__ */ ((e) => (e.SELECT = "select", e.SHOW_MORE = "show-more", e.ESCAPE = "escape-pressed", e.CLICK = "click", e.ENTER = "enter-pressed", e.SPACE = "space-pressed", e.TAB = "tab-pressed", e.CLOSE_DROPDOWN = "close-dropdown", e))(c || {}), Z = /* @__PURE__ */ ((e) => (e.AUTOMATIC = "automatic", e.BUTTON = "button", e.NONE = "none", e))(Z || {});
+const Qe = j({
+  name: "bento-listbox-static-category",
+  components: {
+    BentoTypography: oe
+  },
+  props: {
+    /**
+     * Category label text
+     */
+    categoryLabel: {
+      type: String,
+      required: !0
+    }
+  }
+});
+const Ze = { class: "b-listbox-single-select-category" };
+function et(e, t, r, b, i, n) {
+  const a = C("bento-typography");
+  return g(), A("div", Ze, [
+    I(a, {
+      variant: "caption",
+      el: "span",
+      class: "b-listbox-single-select-category__label-text"
+    }, {
+      default: _(() => [
+        V(G(e.categoryLabel), 1)
+      ]),
+      _: 1
+    }),
+    F("div", null, [
+      w(e.$slots, "default", {}, void 0, !0)
+    ])
+  ]);
+}
+const tt = /* @__PURE__ */ X(Qe, [["render", et], ["__scopeId", "data-v-a90eff17"]]), st = j({
+  name: "bento-listbox-option",
+  props: {
+    /**
+     * Setting this property to true will disable the option.
+     */
+    disabled: { type: Boolean, default: !1 },
+    /**
+     * Indicates if the value is selected. Only one element can be selected at a time.
+     */
+    selected: { type: Boolean, default: !1 }
+  },
+  emits: [c.CLICK, c.ENTER, c.SPACE, c.TAB],
+  setup(e, { emit: t }) {
+    const r = u(() => ({
+      "b-listbox-option--disabled": e.disabled,
+      "b-listbox-option--selected": e.selected
+    }));
+    return {
+      // Enums
+      BentoKeyboardNavigationKeyDownEvent: W,
+      BentoListboxEvent: c,
+      // Values
+      conditionalClasses: r,
+      // Events
+      onClick: (n) => {
+        t(c.CLICK, n);
+      },
+      onOptionSelected: (n, a) => {
+        t(n, a);
+      }
+    };
+  }
+});
+function lt(e, t, r, b, i, n) {
+  return g(), A("label", U({
+    class: ["b-listbox-option", e.conditionalClasses],
+    role: "option"
+  }, e.$attrs, {
+    onClick: t[0] || (t[0] = (...a) => e.onClick && e.onClick(...a)),
+    onKeydown: [
+      t[1] || (t[1] = me((a) => e.onOptionSelected(e.BentoListboxEvent.ENTER, a), ["enter"])),
+      t[2] || (t[2] = me((a) => e.onOptionSelected(e.BentoListboxEvent.SPACE, a), ["space"])),
+      t[3] || (t[3] = me((a) => e.onOptionSelected(e.BentoListboxEvent.TAB, a), ["tab"]))
+    ]
+  }), [
+    w(e.$slots, "default", {}, void 0, !0)
+  ], 16);
+}
+const ce = /* @__PURE__ */ X(st, [["render", lt], ["__scopeId", "data-v-18a61f5d"]]), ot = j({
+  name: "bento-listbox-single-select-option",
+  components: {
+    BentoListboxOption: ce,
+    BentoTypography: oe,
+    CheckmarkIcon: xe
+  },
+  props: {
+    /**
+     * Setting this property to true will disable the option.
+     */
+    disabled: { type: Boolean, default: !1 },
+    /**
+     * The option item that contains all the option item's data.
+     * @type {BentoListboxOptionItem}
+     */
+    option: {
+      type: Object,
+      required: !0
+    },
+    /**
+     * Indicates if the value is selected. Only one element can be selected at a time.
+     */
+    selected: { type: Boolean, default: !1 }
+  },
+  emits: [c.ENTER, c.SELECT, c.SPACE, c.TAB],
+  setup(e, { emit: t }) {
+    const r = (a) => {
+      e.disabled || t(a, e.option.value);
+    }, b = u(() => e.disabled ? !0 : null), i = u(() => e.selected ? !0 : null), n = u(() => e.disabled ? -1 : 0);
+    return {
+      // Values
+      ariaDisabled: b,
+      ariaSelected: i,
+      tabIndex: n,
+      // Enums
+      BentoListboxEvent: c,
+      // Events
+      onOptionSelected: r
+    };
+  }
+});
+const nt = { class: "b-listbox-single-select-option__text" }, it = { class: "b-listbox-single-select-option__check-icon" };
+function at(e, t, r, b, i, n) {
+  const a = C("bento-typography"), l = C("checkmark-icon"), d = C("bento-listbox-option");
+  return g(), B(d, U({
+    class: "b-listbox-single-select-option",
+    disabled: e.disabled,
+    selected: e.selected,
+    "aria-selected": e.ariaSelected,
+    "aria-disabled": e.ariaDisabled,
+    tabindex: e.tabIndex,
+    onClick: t[0] || (t[0] = (o) => e.onOptionSelected(e.BentoListboxEvent.SELECT))
+  }, {
+    [q(e.BentoListboxEvent.ENTER)]: t[1] || (t[1] = (o) => e.onOptionSelected(e.BentoListboxEvent.ENTER))
+  }, {
+    [q(e.BentoListboxEvent.SPACE)]: t[2] || (t[2] = (o) => e.onOptionSelected(e.BentoListboxEvent.SPACE))
+  }, {
+    [q(e.BentoListboxEvent.TAB)]: t[3] || (t[3] = (o) => e.onOptionSelected(e.BentoListboxEvent.TAB))
+  }), {
+    default: _(() => [
+      w(e.$slots, "default", Y(x(e.option)), () => [
+        F("span", nt, [
+          I(a, { el: "span" }, {
+            default: _(() => [
+              V(G(e.option.label), 1)
+            ]),
+            _: 1
+          }),
+          e.option.description ? (g(), B(a, {
+            key: 0,
+            class: "b-listbox-single-select-option__description",
+            el: "span"
+          }, {
+            default: _(() => [
+              V(G(e.option.description), 1)
+            ]),
+            _: 1
+          })) : J("", !0)
+        ])
+      ], !0),
+      F("span", it, [
+        se(I(l, { "svg-title": "selected" }, null, 512), [
+          [pe, e.selected]
+        ])
+      ])
+    ]),
+    _: 3
+  }, 16, ["disabled", "selected", "aria-selected", "aria-disabled", "tabindex"]);
+}
+const rt = /* @__PURE__ */ X(ot, [["render", at], ["__scopeId", "data-v-d112952c"]]), Ie = ({ items: e, isOptionDisabled: t }, r) => {
+  const b = u(() => e.value.length - 1), i = N(0);
+  Oe(() => {
+    t && (i.value = e.value.findIndex((m) => !t(m)));
+  });
+  const n = (m) => !t || !!t && t(e.value[m]), a = (m) => !t || !!t && !t(e.value[m]), l = (m) => {
+    switch (m) {
+      case "increase":
+        i.value += 1;
+        break;
+      case "decrease":
+        i.value -= 1;
+        break;
+    }
+  }, d = ({ edgeCaseItem: m, isItemBeforeEdgeCaseItem: h }, R, P) => {
+    i.value !== m && (h ? a(m) && l(P) : (l(P), n(i.value) && R()), r(i.value));
+  }, o = () => {
+    const m = i.value === b.value - 2;
+    d(
+      {
+        isItemBeforeEdgeCaseItem: m,
+        edgeCaseItem: b.value
+      },
+      o,
+      "increase"
+      /* INCREASE */
+    );
+  }, p = () => {
+    const m = i.value === 1;
+    d(
+      {
+        edgeCaseItem: 0,
+        isItemBeforeEdgeCaseItem: m
+      },
+      p,
+      "decrease"
+      /* DECREASE */
+    );
+  };
+  return {
+    moveToFirstElement: () => {
+      i.value = 0, n(i.value) ? o() : r(i.value);
+    },
+    moveToLastElement: () => {
+      i.value = b.value, n(i.value) ? p() : r(i.value);
+    },
+    moveToNextElement: o,
+    moveToPreviousElement: p
+  };
+}, ct = j({
+  name: "bento-listbox-single-select",
+  components: {
+    BentoListboxSingleSelectCategory: tt,
+    BentoListboxSingleSelectOption: rt
+  },
+  directives: { BentoKeyboardNavigationDirective: ye },
+  inheritAttrs: !1,
+  props: {
+    /**
+     * Function that allows the options to be disabled
+     *
+     * @type {BentoListboxIsOptionDisabled}
+     * @param {BentoListboxOptionItem} option - listbox option object
+     * @param {string} option.label - Option's label text
+     * @param {string|number} option.value - Option's value
+     * @param {unknown} option.data - Option's extra data to be passed to the default slot
+     */
+    isOptionDisabled: {
+      type: Function,
+      default: () => !1
+    },
+    /**
+     * The option elements to populate the listbox with.
+     * It must be an array of {@see BentoListboxOptionItem }.
+     *
+     * @property {string} value.label - Text to be displayed in the option
+     * @property {string,number} value.value - Value of the option
+     */
+    items: {
+      type: Array,
+      required: !0
+    },
+    /**
+     * The `input` value.
+     * Providing an empty string will select no options.
+     * Set to an empty string `''` if you don't want any of the available options to be selected
+     */
+    selectedValue: {
+      type: [String, Number],
+      default: void 0
+    },
+    /**
+     * If enabled, dropdown will display non-selectable, static categories
+     */
+    staticCategories: { type: Boolean, default: !1 }
+  },
+  emits: [c.SELECT, c.ENTER, c.SPACE, c.TAB],
+  setup(e, { emit: t, slots: r }) {
+    const b = N([]), i = u(() => !!e.items.find(({ items: m }) => !!m)), n = (m) => (h) => {
+      t(m, h);
+    }, a = (m) => b.value[m].$el.focus(), { moveToNextElement: l, moveToPreviousElement: d, moveToFirstElement: o, moveToLastElement: p } = Ie(
+      {
+        items: re(e, "items"),
+        isOptionDisabled: e.isOptionDisabled
+      },
+      a
+    ), s = {
+      [W.ARROW_UP]: d,
+      [W.ARROW_DOWN]: l,
+      [W.HOME]: o,
+      [W.END]: p
+    }, f = {
+      [c.SELECT]: n(c.SELECT),
+      [c.SPACE]: n(c.SPACE),
+      [c.TAB]: n(c.TAB),
+      [c.ENTER]: n(c.ENTER)
+    };
+    return {
+      // Enums
+      BentoListboxEvent: c,
+      // Values
+      listboxItemRef: b,
+      slots: r,
+      // Computed
+      hasCategories: i,
+      // Methods
+      onOptionSelected: n,
+      // Keyboard navigation
+      listboxListeners: s,
+      listboxOptionListeners: f
+    };
+  }
+});
+function dt(e, t, r, b, i, n) {
+  const a = C("bento-listbox-single-select-option"), l = C("bento-listbox-single-select-category"), d = fe("bento-keyboard-navigation-directive");
+  return se((g(), A("div", ee(e.listboxListeners, !0), [
+    e.hasCategories && e.staticCategories ? (g(!0), A(te, { key: 0 }, z(e.items, (o) => (g(), B(l, {
+      key: o.value,
+      "category-label": o.label,
+      role: "group"
+    }, {
+      default: _(() => [
+        (g(!0), A(te, null, z(o.items, (p) => (g(), B(a, U({
+          key: p.value,
+          ref_for: !0,
+          ref: "listboxItemRef",
+          role: "option",
+          option: p,
+          disabled: e.isOptionDisabled ? e.isOptionDisabled(p) : null,
+          selected: p.value === e.selectedValue
+        }, ee(e.listboxOptionListeners)), le({ _: 2 }, [
+          z(e.slots, (s, f) => ({
+            name: f,
+            fn: _((m) => [
+              w(e.$slots, f, Y(x(m)))
+            ])
+          }))
+        ]), 1040, ["option", "disabled", "selected"]))), 128))
+      ]),
+      _: 2
+    }, 1032, ["category-label"]))), 128)) : (g(!0), A(te, { key: 1 }, z(e.items, (o) => (g(), B(a, U({
+      key: o.value,
+      ref_for: !0,
+      ref: "listboxItemRef",
+      role: "option",
+      option: o,
+      disabled: e.isOptionDisabled ? e.isOptionDisabled(o) : null,
+      selected: o.value === e.selectedValue
+    }, ee(e.listboxOptionListeners)), le({ _: 2 }, [
+      z(e.slots, (p, s) => ({
+        name: s,
+        fn: _((f) => [
+          w(e.$slots, s, Y(x(f)))
+        ])
+      }))
+    ]), 1040, ["option", "disabled", "selected"]))), 128))
+  ], 16)), [
+    [d]
+  ]);
+}
+const ut = /* @__PURE__ */ X(ct, [["render", dt]]);
+var ge = /* @__PURE__ */ ((e) => (e.DISABLED = "disabled", e.STATIC_CATEGORY = "static-category", e))(ge || {}), ae = /* @__PURE__ */ ((e) => (e.SELECT_CATEGORY = "select-category", e.UNSELECT_CATEGORY = "unselect-category", e))(ae || {});
+const bt = {
+  "en-US": {
+    categoryClosed: "{category} closed",
+    categoryOpened: "{category} opened"
+  }
+}, mt = j({
+  i18n: { messages: bt },
+  name: "bento-listbox-multi-select-category",
+  components: {
+    BentoCheckbox: Ee,
+    BentoTypography: oe,
+    BentoListboxOption: ce,
+    ChevronDownIcon: qe,
+    ChevronUpIcon: He
+  },
+  props: {
+    /**
+     * The option elements to populate the listbox with.
+     * It must be an array of {@see BentoListboxOptionItem }.
+     *
+     * @property {string} value.label - Text to be displayed in the option
+     * @property {string,number} value.value - Value of the option
+     * @property {BentoListboxOptionItem} value.items - Category items list
+     */
+    category: {
+      type: Object,
+      required: !0
+    },
+    /**
+     * Function that allows the options to be disabled
+     *
+     * @type {BentoListboxIsOptionDisabled}
+     * @param {BentoListboxOptionItem} option - listbox option object
+     * @param {string} option.label - Option's label text
+     * @param {string|number} option.value - Option's value
+     * @param {unknown} option.data - Option's extra data to be passed to the default slot
+     */
+    isOptionDisabled: {
+      type: [Function],
+      default: () => !1
+    },
+    /**
+     * The `input` value.
+     * Providing an empty array will select no options.
+     */
+    selectedItemsList: {
+      type: Array,
+      default: () => []
+    },
+    /**
+     * If enabled, dropdown will display non-selectable, static categories
+     */
+    staticCategories: { type: Boolean, default: !1 }
+  },
+  emits: [ae.SELECT_CATEGORY, ae.UNSELECT_CATEGORY],
+  setup(e, { emit: t }) {
+    const r = N(!1), { t: b } = Se(), i = (S) => e.isOptionDisabled ? e.isOptionDisabled(S) : !1, n = u(
+      () => e.category.items.every((S) => i(S))
+    ), a = re(e, "staticCategories"), l = u(() => r.value || e.staticCategories), d = u(() => ({
+      [`b-listbox-multi-select-category--${ge.DISABLED}`]: n.value,
+      [`b-listbox-multi-select-category--${ge.STATIC_CATEGORY}`]: e.staticCategories
+    })), o = (S) => {
+      S.preventDefault(), r.value = !r.value;
+    }, p = (S) => {
+      var Q;
+      const O = i(S), M = ((Q = e.selectedItemsList) == null ? void 0 : Q.includes(S.value)) || !1;
+      return { isDisabled: O, isPreSelected: M };
+    }, s = u(
+      () => e.category.items.filter((S) => {
+        const { isDisabled: O, isPreSelected: M } = p(S);
+        return O && M || !O;
+      })
+    ), f = u(
+      () => {
+        var S;
+        return (S = s.value) == null ? void 0 : S.filter(
+          ({ value: O }) => {
+            var M;
+            return (M = e.selectedItemsList) == null ? void 0 : M.includes(O);
+          }
+        );
+      }
+    ), m = u(() => {
+      const S = r.value ? "categoryOpened" : "categoryClosed";
+      return b(S, { category: e.category.label });
+    }), h = u(
+      () => ({
+        el: "span",
+        variant: e.staticCategories ? "caption" : "body"
+      })
+    ), R = () => {
+      t(ae.SELECT_CATEGORY);
+    }, P = () => {
+      t(ae.UNSELECT_CATEGORY);
+    }, { isAllSelected: T, isIndeterminate: k, toggleSelectAll: $ } = Ae(
+      f,
+      s,
+      R,
+      P
+    );
+    return {
+      // Values
+      chevronTitle: m,
+      conditionalClass: d,
+      hasAllPropsDisabled: n,
+      isOpen: r,
+      isAllSelected: T,
+      isIndeterminate: k,
+      isStaticCategory: a,
+      // Computed
+      showItemChildren: l,
+      categoryLabelProps: h,
+      // Methods
+      toggleOpen: o,
+      toggleSelectAll: $
+    };
+  }
+});
+const vt = { class: "b-listbox-multi-select-category__label" };
+function gt(e, t, r, b, i, n) {
+  const a = C("bento-checkbox"), l = C("bento-typography"), d = C("chevron-up-icon"), o = C("chevron-down-icon"), p = C("bento-listbox-option");
+  return g(), A("div", null, [
+    I(p, {
+      class: ve(["b-listbox-multi-select-category__option", e.conditionalClass])
+    }, {
+      default: _(() => [
+        e.isStaticCategory ? J("", !0) : (g(), B(a, {
+          key: 0,
+          "model-value": e.isAllSelected,
+          indeterminate: e.isIndeterminate,
+          disabled: e.hasAllPropsDisabled,
+          "aria-label": e.category.label,
+          value: e.category.value,
+          "onUpdate:modelValue": e.toggleSelectAll
+        }, null, 8, ["model-value", "indeterminate", "disabled", "aria-label", "value", "onUpdate:modelValue"])),
+        F("span", vt, [
+          I(l, U(e.categoryLabelProps, { class: "b-listbox-multi-select-category__label-text" }), {
+            default: _(() => [
+              V(G(e.category.label), 1)
+            ]),
+            _: 1
+          }, 16),
+          e.isStaticCategory ? J("", !0) : (g(), A("div", {
+            key: 0,
+            class: "b-listbox-multi-select-category__label-chevron",
+            "data-testid": "toggle-listbox",
+            onClickCapture: t[0] || (t[0] = (...s) => e.toggleOpen && e.toggleOpen(...s))
+          }, [
+            e.isOpen ? (g(), B(d, {
+              key: 0,
+              "svg-title": e.chevronTitle
+            }, null, 8, ["svg-title"])) : (g(), B(o, {
+              key: 1,
+              "svg-title": e.chevronTitle
+            }, null, 8, ["svg-title"]))
+          ], 32))
+        ])
+      ]),
+      _: 1
+    }, 8, ["class"]),
+    se(F("div", null, [
+      w(e.$slots, "default", {}, void 0, !0)
+    ], 512), [
+      [pe, e.showItemChildren]
+    ])
+  ]);
+}
+const pt = /* @__PURE__ */ X(mt, [["render", gt], ["__scopeId", "data-v-9a00de22"]]);
+var H = /* @__PURE__ */ ((e) => (e.SELECT_CATEGORY = "select-category", e.TOGGLE_CHECKBOX_SELECTION = "toggle-checkbox-selection", e.UNSELECT_CATEGORY = "unselect-category", e))(H || {});
+const ft = j({
+  name: "listbox-multi-select-options",
+  components: {
+    BentoCheckbox: Ee,
+    BentoListboxOption: ce,
+    BentoTypography: oe,
+    ListboxMultiSelectCategory: pt
+  },
+  props: {
+    /**
+     * Indicates if the items listed are inside a category
+     * so they can be padded to right by one level in recursion.
+     * Items of categories are automatically defined as "categoryItems"
+     */
+    categoryItems: { type: Boolean, default: !1 },
+    /**
+     * Function that allows the options to be disabled
+     *
+     * @type {BentoListboxIsOptionDisabled}
+     * @param {BentoListboxOptionItem} option - listbox option object
+     * @param {string} option.label - Option's label text
+     * @param {string|number} option.value - Option's value
+     * @param {unknown} option.data - Option's extra data to be passed to the default slot
+     */
+    isOptionDisabled: {
+      type: Function,
+      default: () => !1
+    },
+    /**
+     * The option elements to populate the listbox with.
+     * It must be an array of {@see BentoListboxOptionItem }.
+     *
+     * @property {string} value.label - Text to be displayed in the option
+     * @property {string,number} value.value - Value of the option
+     */
+    items: {
+      type: Array,
+      required: !0
+    },
+    /**
+     * Indicates if the elements options are inside a multi-level category
+     */
+    isMultiLevel: { type: Boolean, default: !1 },
+    /**
+     * Flag that indicates that an external search it's being made
+     * to filter out the items inside the the multi-select listbox
+     *
+     * If enabled, hides the "Select all" checkbox in "multiple" mode.
+     */
+    searching: { type: Boolean, default: !1 },
+    /**
+     * List of selected items.
+     * Providing an empty array will select no options.
+     */
+    selectedItemsList: {
+      type: Array,
+      default: () => []
+    },
+    /**
+     * If enabled, dropdown will display non-selectable, static categories
+     */
+    staticCategories: { type: Boolean, default: !1 }
+  },
+  emits: [
+    H.TOGGLE_CHECKBOX_SELECTION,
+    H.SELECT_CATEGORY,
+    H.UNSELECT_CATEGORY
+  ],
+  setup(e, { emit: t }) {
+    const r = (d) => {
+      t(H.TOGGLE_CHECKBOX_SELECTION, d);
+    }, b = (d) => !!d.items, i = (d) => {
+      const o = e.isMultiLevel && e.searching;
+      return d.description && (!e.isMultiLevel || o);
+    }, n = (d) => d.items ? !!d.items.find((o) => e.selectedItemsList.includes(o.value)) : e.selectedItemsList.includes(d.value), a = (d, o) => {
+      if (b(o))
+        return t(d ? H.SELECT_CATEGORY : H.UNSELECT_CATEGORY, o);
+      r(o.value);
+    };
+    return {
+      // Values
+      conditionalClasses: u(() => ({
+        "b-listbox-multi-select-options__static-category-option": e.staticCategories,
+        "b-listbox-multi-select-options__category-option": e.categoryItems
+      })),
+      // Methods
+      isCategory: b,
+      isOptionSelected: n,
+      shouldShowDescription: i,
+      toggleCheckboxSelection: r,
+      selectSearch: a,
+      // Enums
+      BentoListboxEvent: c,
+      ListboxMultiSelectOptionsEvent: H
+    };
+  }
+});
+const yt = { class: "b-listbox-multi-select__option-text" }, St = { class: "b-listbox-multi-select__option-text" };
+function Et(e, t, r, b, i, n) {
+  const a = C("bento-checkbox"), l = C("bento-typography"), d = C("bento-listbox-option"), o = C("listbox-multi-select-options", !0), p = C("listbox-multi-select-category");
+  return g(), A("div", null, [
+    (g(!0), A(te, null, z(e.items, (s) => (g(), A("div", {
+      key: `selected-${s.value}`
+    }, [
+      e.searching && e.isMultiLevel ? (g(), B(d, {
+        key: 0,
+        class: ve(["b-listbox-multi-select-options", e.conditionalClasses]),
+        disabled: e.isOptionDisabled ? e.isOptionDisabled(s) : null
+      }, {
+        default: _(() => [
+          I(a, {
+            "model-value": e.isOptionSelected(s),
+            "aria-label": s.label,
+            disabled: e.isOptionDisabled ? e.isOptionDisabled(s) : null,
+            value: s.value,
+            "onUpdate:modelValue": (f) => e.selectSearch(f, s)
+          }, null, 8, ["model-value", "aria-label", "disabled", "value", "onUpdate:modelValue"]),
+          w(e.$slots, "default", Y(x(s)), () => [
+            F("span", yt, [
+              I(l, { el: "span" }, {
+                default: _(() => [
+                  V(G(s.label), 1)
+                ]),
+                _: 2
+              }, 1024),
+              e.shouldShowDescription(s) ? (g(), B(l, {
+                key: 0,
+                class: "b-listbox-multi-select__option-description",
+                el: "span"
+              }, {
+                default: _(() => [
+                  V(G(s.description), 1)
+                ]),
+                _: 2
+              }, 1024)) : J("", !0)
+            ])
+          ], !0)
+        ]),
+        _: 2
+      }, 1032, ["class", "disabled"])) : (g(), A(te, { key: 1 }, [
+        s.items ? (g(), B(p, {
+          key: 0,
+          category: s,
+          "static-categories": e.staticCategories,
+          "is-option-disabled": e.isOptionDisabled,
+          "selected-items-list": e.selectedItemsList,
+          onSelectCategory: (f) => e.$emit(e.ListboxMultiSelectOptionsEvent.SELECT_CATEGORY, s),
+          onUnselectCategory: (f) => e.$emit(e.ListboxMultiSelectOptionsEvent.UNSELECT_CATEGORY, s)
+        }, {
+          default: _(() => [
+            I(o, {
+              "category-items": "",
+              items: s.items,
+              "is-option-disabled": e.isOptionDisabled,
+              "is-multi-level": e.isMultiLevel,
+              "static-categories": e.staticCategories,
+              "selected-items-list": e.selectedItemsList,
+              searching: e.searching,
+              onToggleCheckboxSelection: t[0] || (t[0] = (f) => e.toggleCheckboxSelection(f))
+            }, null, 8, ["items", "is-option-disabled", "is-multi-level", "static-categories", "selected-items-list", "searching"])
+          ]),
+          _: 2
+        }, 1032, ["category", "static-categories", "is-option-disabled", "selected-items-list", "onSelectCategory", "onUnselectCategory"])) : (g(), B(d, {
+          key: 1,
+          class: ve(["b-listbox-multi-select-options", e.conditionalClasses]),
+          disabled: e.isOptionDisabled ? e.isOptionDisabled(s) : null
+        }, {
+          default: _(() => [
+            I(a, {
+              "model-value": e.selectedItemsList,
+              "aria-label": s.label,
+              disabled: e.isOptionDisabled ? e.isOptionDisabled(s) : null,
+              value: s.value,
+              "onUpdate:modelValue": (f) => e.toggleCheckboxSelection(s.value)
+            }, null, 8, ["model-value", "aria-label", "disabled", "value", "onUpdate:modelValue"]),
+            w(e.$slots, "default", Y(x(s)), () => [
+              F("span", St, [
+                I(l, { el: "span" }, {
+                  default: _(() => [
+                    V(G(s.label), 1)
+                  ]),
+                  _: 2
+                }, 1024),
+                e.shouldShowDescription(s) ? (g(), B(l, {
+                  key: 0,
+                  class: "b-listbox-multi-select__option-description",
+                  el: "span"
+                }, {
+                  default: _(() => [
+                    V(G(s.description), 1)
+                  ]),
+                  _: 2
+                }, 1024)) : J("", !0)
+              ])
+            ], !0)
+          ]),
+          _: 2
+        }, 1032, ["class", "disabled"]))
+      ], 64))
+    ]))), 128))
+  ]);
+}
+const Ct = /* @__PURE__ */ X(ft, [["render", Et], ["__scopeId", "data-v-ade259b2"]]), _e = {
+  "en-US": {
+    allSelected: "All selected ({total})",
+    numberOfTotalSelected: "{number} of {total} selected",
+    selectAll: "Select all ({total})"
+  }
+}, _t = (e) => {
+  const t = u(() => {
+    var b;
+    return !!((b = e.value) != null && b.find(({ items: i }) => !!i));
+  }), r = u(() => {
+    var b;
+    return t.value ? (b = e.value) == null ? void 0 : b.reduce((i, n) => (n.items ? i.push(...n.items.flat()) : i.push(n), i), []) : e.value;
+  });
+  return {
+    isMultiLevelSelect: t,
+    flattenedItemsList: r
+  };
+}, ht = j({
+  i18n: { messages: _e },
+  name: "bento-listbox-multi-select",
+  components: {
+    BentoCheckbox: Ee,
+    BentoListboxOption: ce,
+    BentoTypography: oe,
+    ListboxMultiSelectOptions: Ct
+  },
+  directives: { BentoKeyboardNavigationDirective: ye },
+  props: {
+    /**
+     * Function that allows the options to be disabled
+     *
+     * @type {BentoListboxIsOptionDisabled}
+     * @param {BentoListboxOptionItem} option - listbox option object
+     * @param {string} option.label - Option's label text
+     * @param {string|number} option.value - Option's value
+     * @param {unknown} option.data - Option's extra data to be passed to the default slot
+     */
+    isOptionDisabled: {
+      type: Function,
+      default: () => !1
+    },
+    /**
+     * The option elements to populate the listbox with.
+     * It must be an array of {@see BentoListboxOptionItem }.
+     *
+     * @property {string} value.label - Text to be displayed in the option
+     * @property {string,number} value.value - Value of the option
+     */
+    items: {
+      type: Array,
+      required: !0
+    },
+    /**
+     * Flag that indicates that an external search it's being made
+     * to filter out the items inside the the multi-select listbox
+     *
+     * If enabled, hides the "Select all" checkbox in "multiple" mode.
+     */
+    searching: { type: Boolean, default: !1 },
+    /**
+     * The `input` value.
+     * Providing an empty array will select no options.
+     */
+    selectedValues: {
+      type: Array,
+      default: () => []
+    },
+    /**
+     * If enabled, dropdown will display non-selectable, static categories
+     */
+    staticCategories: { type: Boolean, default: !1 }
+  },
+  emits: [c.SELECT],
+  setup(e, { emit: t, slots: r }) {
+    const { t: b } = Se({ messages: _e }), i = N(null), n = N(null), a = N(null), l = N();
+    Le(
+      () => e.selectedValues,
+      () => {
+        l.value = [...e.selectedValues ?? []];
+      },
+      {
+        immediate: !0
+      }
+    );
+    const { isMultiLevelSelect: d, flattenedItemsList: o } = _t(re(e, "items")), p = (v) => {
+      var E;
+      const y = e.isOptionDisabled(v), L = ((E = l.value) == null ? void 0 : E.includes(v.value)) || !1;
+      return { isDisabled: y, isPreSelected: L };
+    }, s = u(
+      () => e.searching && d ? e.items : o.value.filter((v) => {
+        const { isDisabled: y, isPreSelected: L } = p(v);
+        return y && L || !y;
+      })
+    ), f = u(
+      () => {
+        var v;
+        return (v = s.value) == null ? void 0 : v.filter((y) => {
+          var L;
+          return y.items && d.value && e.searching ? y.items.filter(
+            (K) => (e.selectedValues ?? []).includes(
+              K.value
+            )
+          ).length === y.items.length : (L = l.value) == null ? void 0 : L.includes(y.value);
+        });
+      }
+    ), m = () => d.value && !e.searching ? o.value.length : e.items.length, h = u(() => {
+      var E;
+      const v = s.value.length, y = m(), L = ((E = f.value) == null ? void 0 : E.length) || 0;
+      return L === 0 ? b("selectAll", { total: v }) : L === y ? b("allSelected", { total: y }) : b("numberOfTotalSelected", { number: L, total: y });
+    }), R = (v) => {
+      const y = (E) => {
+        const { isDisabled: K, isPreSelected: be } = p(E);
+        return K && be || !K;
+      }, L = v.filter(y).filter((E) => !l.value.includes(E.value)).map(({ value: E }) => E);
+      l.value = [...l.value, ...L], t(c.SELECT, l.value);
+    }, P = (v) => {
+      const y = (E) => {
+        const { isDisabled: K, isPreSelected: be } = p(E);
+        return !(K && be);
+      }, L = v.filter(y).map(({ value: E }) => E);
+      l.value = l.value.filter((E) => !(L != null && L.includes(E))), t(c.SELECT, l.value);
+    }, T = () => {
+      R(o.value);
+    }, k = () => {
+      P(o.value);
+    }, { isAllSelected: $, isIndeterminate: S, toggleSelectAll: O } = Ae(
+      f,
+      s,
+      T,
+      k
+    ), M = (v) => {
+      R(v.items);
+    }, Q = (v) => {
+      P(v.items);
+    }, de = (v, y) => {
+      let L = !1;
+      l.value = l.value.filter((E) => y === E ? (L = !0, !1) : !0), L || l.value.push(y), t(v, l.value);
+    }, ne = u(() => {
+      const v = (E) => l.value.includes(E.value), y = (E) => !!E.find((K) => v(K));
+      return d.value && e.staticCategories ? e.items.flatMap(({ items: K }) => K.filter(v)) : e.items.filter((E) => E.items && y(E.items) ? !0 : v(E));
+    }), ue = u(() => {
+      var v;
+      return ((v = ne.value) == null ? void 0 : v.length) > 0;
+    }), D = u(
+      () => {
+        var v, y;
+        return ((v = f.value) == null ? void 0 : v.length) === ((y = o.value) == null ? void 0 : y.length);
+      }
+    ), ie = u(
+      () => i.value ? [i.value] : []
+    ), $e = u(
+      () => {
+        var v, y;
+        return (y = (v = n.value) == null ? void 0 : v.$children) != null && y.length ? n.value.$children : [];
+      }
+    ), ke = u(
+      () => {
+        var v, y;
+        return (y = (v = a.value) == null ? void 0 : v.$children) != null && y.length ? a.value.$children : [];
+      }
+    ), Re = u(() => ({ label: h, value: $ })), De = u(() => [
+      Re,
+      ...ne.value,
+      ...o.value
+    ]), Ne = (v) => {
+      [
+        ...ie.value,
+        ...$e.value,
+        ...ke.value
+      ][v].$el.focus();
+    }, { moveToNextElement: Pe, moveToPreviousElement: Me, moveToFirstElement: Ue, moveToLastElement: we } = Ie(
+      {
+        items: N(De),
+        isOptionDisabled: e.isOptionDisabled
+      },
+      Ne
+    ), Ve = {
+      [W.ARROW_UP]: Me,
+      [W.ARROW_DOWN]: Pe,
+      [W.HOME]: Ue,
+      [W.END]: we
+    };
+    return {
+      // Refs
+      selectAllListboxItemsRef: i,
+      selectedListboxItemsRef: n,
+      listboxItemsRef: a,
+      // Values
+      isAllSelected: $,
+      isAllItemsIncludingDisabled: D,
+      isAnOptionSelected: ue,
+      isIndeterminate: S,
+      isMultiLevelSelect: d,
+      flattenedItemsList: o,
+      selectedItemsList: l,
+      selectAllCheckboxText: h,
+      selectedOptions: ne,
+      slots: r,
+      // Enums
+      BentoListboxEvent: c,
+      // Methods
+      selectAllCategory: M,
+      toggleCheckboxSelection: de,
+      toggleSelectAll: O,
+      unselectAllCategory: Q,
+      // Events
+      listboxListeners: Ve
+    };
+  }
+});
+const Be = (e) => (Ye("data-v-1ba4ab3d"), e = e(), Fe(), e), Tt = { key: 0 }, Ot = /* @__PURE__ */ Be(() => /* @__PURE__ */ F("hr", { class: "b-listbox-multi-select__divider" }, null, -1)), Lt = /* @__PURE__ */ Be(() => /* @__PURE__ */ F("hr", { class: "b-listbox-multi-select__divider" }, null, -1));
+function At(e, t, r, b, i, n) {
+  const a = C("bento-checkbox"), l = C("bento-typography"), d = C("bento-listbox-option"), o = C("listbox-multi-select-options"), p = fe("bento-keyboard-navigation-directive");
+  return se((g(), A("div", U({ class: "b-listbox-multi-select" }, ee(e.listboxListeners, !0)), [
+    I(d, {
+      ref: "selectAllListboxItemsRef",
+      class: "b-listbox-multi-select__option"
+    }, {
+      default: _(() => [
+        I(a, {
+          "aria-label": e.selectAllCheckboxText,
+          "model-value": e.isAllSelected,
+          indeterminate: e.isIndeterminate,
+          "onUpdate:modelValue": e.toggleSelectAll
+        }, null, 8, ["aria-label", "model-value", "indeterminate", "onUpdate:modelValue"]),
+        I(l, { el: "span" }, {
+          default: _(() => [
+            V(G(e.selectAllCheckboxText), 1)
+          ]),
+          _: 1
+        })
+      ]),
+      _: 1
+    }, 512),
+    e.isAnOptionSelected ? (g(), A("div", Tt, [
+      Ot,
+      I(o, U({
+        ref: "selectedListboxItemsRef",
+        items: e.selectedOptions,
+        "is-option-disabled": e.isOptionDisabled,
+        "is-multi-level": e.isMultiLevelSelect,
+        "static-categories": e.staticCategories,
+        searching: e.searching,
+        "selected-items-list": e.selectedItemsList,
+        onSelectCategory: e.selectAllCategory,
+        onUnselectCategory: e.unselectAllCategory,
+        onToggleCheckboxSelection: t[0] || (t[0] = (s) => e.toggleCheckboxSelection(e.BentoListboxEvent.SELECT, s))
+      }, {
+        [q(e.BentoListboxEvent.SPACE)]: t[1] || (t[1] = (s) => e.toggleCheckboxSelection(e.BentoListboxEvent.SPACE, s))
+      }, {
+        [q(e.BentoListboxEvent.TAB)]: t[2] || (t[2] = (s) => e.toggleCheckboxSelection(e.BentoListboxEvent.TAB, s))
+      }, {
+        [q(e.BentoListboxEvent.ENTER)]: t[3] || (t[3] = (s) => e.toggleCheckboxSelection(e.BentoListboxEvent.ENTER, s))
+      }), le({ _: 2 }, [
+        z(e.slots, (s, f) => ({
+          name: f,
+          fn: _((m) => [
+            w(e.$slots, f, Y(x(m)), void 0, !0)
+          ])
+        }))
+      ]), 1040, ["items", "is-option-disabled", "is-multi-level", "static-categories", "searching", "selected-items-list", "onSelectCategory", "onUnselectCategory"])
+    ])) : J("", !0),
+    se(F("div", null, [
+      Lt,
+      I(o, U({
+        ref: "listboxItemsRef",
+        items: e.items,
+        "is-option-disabled": e.isOptionDisabled,
+        "is-multi-level": e.isMultiLevelSelect,
+        "static-categories": e.staticCategories,
+        searching: e.searching,
+        "selected-items-list": e.selectedItemsList,
+        onToggleCheckboxSelection: t[4] || (t[4] = (s) => e.toggleCheckboxSelection(e.BentoListboxEvent.SELECT, s)),
+        onSelectCategory: e.selectAllCategory,
+        onUnselectCategory: e.unselectAllCategory
+      }, {
+        [q(e.BentoListboxEvent.SPACE)]: t[5] || (t[5] = (s) => e.toggleCheckboxSelection(e.BentoListboxEvent.SPACE, s))
+      }, {
+        [q(e.BentoListboxEvent.TAB)]: t[6] || (t[6] = (s) => e.toggleCheckboxSelection(e.BentoListboxEvent.TAB, s))
+      }, {
+        [q(e.BentoListboxEvent.ENTER)]: t[7] || (t[7] = (s) => e.toggleCheckboxSelection(e.BentoListboxEvent.ENTER, s))
+      }), le({ _: 2 }, [
+        z(e.slots, (s, f) => ({
+          name: f,
+          fn: _((m) => [
+            w(e.$slots, f, Y(x(m)), void 0, !0)
+          ])
+        }))
+      ]), 1040, ["items", "is-option-disabled", "is-multi-level", "static-categories", "searching", "selected-items-list", "onSelectCategory", "onUnselectCategory"])
+    ], 512), [
+      [pe, !e.isAllItemsIncludingDisabled]
+    ])
+  ], 16)), [
+    [p]
+  ]);
+}
+const he = /* @__PURE__ */ X(ht, [["render", At], ["__scopeId", "data-v-1ba4ab3d"]]), Te = {
+  "en-US": {
+    showMore: "Show more",
+    loading: "Loading"
+  }
+}, It = 36, Bt = j({
+  name: "bento-listbox",
+  components: {
+    BentoEmptyState: ze,
+    BentoListboxSingleSelect: ut,
+    BentoListboxMultiSelect: he,
+    BentoTypography: oe,
+    BentoLoadingIndicator: Ke,
+    BentoLoadingButton: je
+  },
+  directives: { BentoKeyboardNavigationDirective: ye },
+  i18n: { messages: Te },
+  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
+     */
+    hasMoreItems: { type: Boolean, default: !1 },
+    /**
+     *  Identifies the listbox whose contents are controlled by the the combobox on which the aria-controls attribute is set.
+     */
+    id: { type: String, required: !0 },
+    /**
+     * Function that allows the options to be disabled
+     *
+     * @type {BentoListboxIsOptionDisabled}
+     * @param {BentoListboxOptionItem} option - Listbox option object
+     * @param {string} option.label - Option's label text
+     * @param {string|number} option.value - Option's value
+     * @param {unknown} option.data - Option's extra data to be passed to the default slot
+     */
+    isOptionDisabled: {
+      type: Function,
+      default: () => {
+      }
+    },
+    /**
+     * The option elements to populate the listbox with.
+     * It must be an array of {@see BentoListboxOptionItem }
+     *  * @property {string} value.label - Text to be displayed in the option
+     *  * @property {string,number} value.value - Value of the option
+     */
+    items: {
+      type: Array,
+      required: !0
+    },
+    /**
+     * Indicates if new options are loading.
+     */
+    loading: { type: Boolean, default: !1 },
+    /**
+     * The type of `Lazy Load`.
+     * Type "automatic" will enable infinite scrolling
+     * Type "button" will enable lazy loading with "Show more" button
+     */
+    lazyLoadType: {
+      type: String,
+      default: Z.NONE,
+      validator: (e) => Object.values(Z).includes(e)
+    },
+    /**
+     * If enabled, the user will be able to select multiple items.
+     */
+    multiple: { type: Boolean, default: !1 },
+    /**
+     * If enabled, dropdown will display non-selectable, static categories
+     */
+    staticCategories: { type: Boolean, default: !1 },
+    /**
+     * Messaged displayed when no items are listed in the listbox
+     */
+    noResultsMessage: { type: String, required: !0 },
+    /**
+     * Flag that indicates that an external search it's being made
+     * to filter out the items inside the the multi-select listbox
+     *
+     * If enabled, hides the "Select all" checkbox in "multiple" mode.
+     */
+    searching: he.props.searching,
+    /**
+     * The `input` value.
+     * Providing an empty string or empty array will select no options.
+     * Set to an empty string `''` if you don't want any of the available options to be selected for single select
+     */
+    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: [
+    c.SELECT,
+    c.SPACE,
+    c.SHOW_MORE,
+    c.ENTER,
+    c.ESCAPE,
+    c.TAB
+  ],
+  setup(e, { emit: t, slots: r }) {
+    const b = N([]), i = re(e, "items"), { t: n } = Se({ messages: Te }), a = u(() => e.lazyLoadType !== Z.AUTOMATIC), l = u(() => e.lazyLoadType === Z.AUTOMATIC), d = () => {
+      var D;
+      return typeof (e == null ? void 0 : e.virtualScroll) == "object" && ((D = e == null ? void 0 : e.virtualScroll) != null && D.itemHeight) ? e.virtualScroll.itemHeight : It;
+    }, {
+      containerRef: o,
+      containerProps: p,
+      onScroll: s,
+      list: f,
+      wrapperProps: m
+    } = Je(i, {
+      itemHeight: d(),
+      // Disable virtual scrolling if not enabled or if lazy loading is enabled or if multi-select
+      disabled: (e == null ? void 0 : e.multiple) || (e == null ? void 0 : e.virtualScroll) === !1 || (e == null ? void 0 : e.lazyLoadType) !== "none"
+    }), h = u(
+      () => a.value ? "true" : void 0
+    ), R = u(
+      () => a.value && e.loading ? "true" : "false"
+    ), P = u(
+      () => a.value ? "polite" : void 0
+    ), T = (D) => (ie) => {
+      t(D, ie);
+    }, k = () => {
+      t(c.SHOW_MORE);
+    }, $ = We(() => {
+      const D = o.value;
+      if (!D)
+        return;
+      const ie = Math.round(D.scrollTop) + D.clientHeight >= D.scrollHeight;
+      e.hasMoreItems && ie && !e.loading && k();
+    }), S = () => {
+      l.value ? $() : s();
+    }, O = u(() => {
+      var D;
+      return e.searching && ((D = e.items) == null ? void 0 : D.length) === 0;
+    }), M = u(
+      () => e.lazyLoadType === Z.BUTTON && e.hasMoreItems
+    ), Q = u(
+      () => e.loading ? Ce.LOADING : Ce.START
+    ), de = u(() => e.loading ? n("loading") : n("showMore")), ne = u(() => ({
+      ...e.emptyState,
+      variant: "condensed"
+    })), ue = {
+      [c.SELECT]: T(c.SELECT),
+      [c.SPACE]: T(c.SPACE),
+      [c.TAB]: T(c.TAB),
+      [c.ENTER]: T(c.ENTER)
+    };
+    return {
+      // Refs
+      listboxRef: o,
+      listboxItemRef: b,
+      // a11y
+      ariaAtomic: h,
+      ariaBusy: R,
+      ariaLive: P,
+      // Values
+      containerProps: p,
+      isSearchResultEmpty: O,
+      limitedEmptyStateProps: ne,
+      loadingButtonState: Q,
+      slots: r,
+      shouldDisplayShowMoreButton: M,
+      showMoreButtonText: de,
+      virtualisedItems: f,
+      wrapperProps: m,
+      // Enums
+      BentoKeyboardNavigationKeyDownEvent: W,
+      BentoListboxEvent: c,
+      // Methods
+      onListboxContainerScroll: S,
+      onOptionSelected: T,
+      emitShowMore: k,
+      listboxListeners: ue
+    };
+  }
+});
+const $t = ["id", "aria-busy", "aria-atomic", "aria-label", "aria-live"], kt = {
+  key: 0,
+  class: "b-listbox__empty-search-message"
+}, Rt = {
+  key: 2,
+  class: "b-listbox__lazy-load"
+}, Dt = {
+  key: 3,
+  class: "b-listbox__lazy-load"
+};
+function Nt(e, t, r, b, i, n) {
+  const a = C("bento-empty-state"), l = C("bento-typography"), d = C("bento-listbox-multi-select"), o = C("bento-listbox-single-select"), p = C("bento-loading-button"), s = C("bento-loading-indicator"), f = fe("bento-keyboard-navigation-directive");
+  return se((g(), A("div", U({ id: e.id }, e.containerProps, {
+    class: "b-listbox",
+    role: "listbox",
+    tabindex: "-1",
+    "aria-busy": e.ariaBusy,
+    "aria-atomic": e.ariaAtomic,
+    "aria-label": e.ariaLabel,
+    "aria-live": e.ariaLive,
+    onScroll: t[0] || (t[0] = (...m) => e.onListboxContainerScroll && e.onListboxContainerScroll(...m))
+  }), [
+    F("div", Y(x(e.wrapperProps)), [
+      e.isSearchResultEmpty ? (g(), A("div", kt, [
+        e.emptyState ? (g(), B(a, Y(U({ key: 0 }, e.limitedEmptyStateProps)), null, 16)) : (g(), B(l, {
+          key: 1,
+          el: "span"
+        }, {
+          default: _(() => [
+            V(G(e.noResultsMessage), 1)
+          ]),
+          _: 1
+        }))
+      ])) : (g(), A(te, { key: 1 }, [
+        e.multiple ? (g(), B(d, U({
+          key: 0,
+          ref: "listboxItemRef",
+          items: e.items,
+          "static-categories": e.staticCategories,
+          "selected-values": e.selectedValue,
+          searching: e.searching,
+          "is-option-disabled": e.isOptionDisabled
+        }, ee(e.listboxListeners)), le({ _: 2 }, [
+          z(e.slots, (m, h) => ({
+            name: h,
+            fn: _((R) => [
+              w(e.$slots, h, Y(x(R)), void 0, !0)
+            ])
+          }))
+        ]), 1040, ["items", "static-categories", "selected-values", "searching", "is-option-disabled"])) : (g(), B(o, U({
+          key: 1,
+          ref: "listboxItemRef",
+          items: e.virtualisedItems,
+          "selected-value": e.selectedValue,
+          "static-categories": e.staticCategories,
+          "is-option-disabled": e.isOptionDisabled
+        }, ee(e.listboxListeners)), le({ _: 2 }, [
+          z(e.slots, (m, h) => ({
+            name: h,
+            fn: _((R) => [
+              w(e.$slots, h, Y(x(R)), void 0, !0)
+            ])
+          }))
+        ]), 1040, ["items", "selected-value", "static-categories", "is-option-disabled"])),
+        e.shouldDisplayShowMoreButton ? (g(), A("div", Rt, [
+          I(p, {
+            state: e.loadingButtonState,
+            variant: "secondary",
+            onClickCapture: e.emitShowMore
+          }, {
+            default: _(() => [
+              V(G(e.showMoreButtonText), 1)
+            ]),
+            _: 1
+          }, 8, ["state", "onClickCapture"])
+        ])) : e.loading ? (g(), A("div", Dt, [
+          I(s)
+        ])) : J("", !0)
+      ], 64))
+    ], 16)
+  ], 16, $t)), [
+    [f]
+  ]);
+}
+const Ht = /* @__PURE__ */ X(Bt, [["render", Nt], ["__scopeId", "data-v-4110c0cb"]]);
+export {
+  Ht as B,
+  c as a,
+  Z as b,
+  _t as u
+};
+//# sourceMappingURL=listbox.963589af.js.map