@adyen/bento-vue3 1.6.1 → 1.7.0

package/dist/chunks/listbox.f6e5a11d.js

@@ -0,0 +1,1306 @@
+import { computed as b, ref as R, onMounted as Te, onUnmounted as Ge, watch as he, defineComponent as H, openBlock as S, createElementBlock as B, mergeProps as U, withKeys as be, renderSlot as Y, resolveComponent as C, createBlock as D, toHandlerKey as F, withCtx as T, normalizeProps as w, guardReactiveProps as K, createElementVNode as M, createVNode as A, createTextVNode as V, toDisplayString as G, createCommentVNode as le, withDirectives as J, vShow as ve, toRef as Oe, resolveDirective as ge, toHandlers as se, Fragment as ie, renderList as q, createSlots as oe, normalizeClass as me, pushScopeId as xe, popScopeId as Ye } from "vue";
+import { B as x, a as pe } from "./keyboard-navigation.ca47dfa8.js";
+import { B as ne } from "./index.2bd3812b.js";
+import { BentoLoadingIndicator as Fe } from "../loading-indicator.js";
+import { BentoEmptyState as Ke } from "../empty-state.js";
+import { u as fe } from "./i18n.6c402773.js";
+import { d as ze } from "./debounce.b5ef6acf.js";
+import { C as We } from "./checkmark.83e4f1e0.js";
+import { _ as j } from "./_plugin-vue_export-helper.dad06003.js";
+import { B as ye } from "./checkbox.3cdbdd52.js";
+import { C as qe, a as He } from "./chevron-up.9bf21068.js";
+import { B as je, a as Se } from "./loading-button.746b7fa1.js";
+import { o as Xe } from "./resize.a041304d.js";
+import "../assets/listbox.css";
+const Le = (e, t, d, p) => {
+  const n = b(
+    () => {
+      var s, o;
+      return !!((s = e.value) != null && s.length) && ((o = e.value) == null ? void 0 : o.length) === t.value.length;
+    }
+  ), u = b(() => {
+    var s;
+    return e.value == null || e.value.length === 0 ? !1 : ((s = e.value) == null ? void 0 : s.length) !== t.value.length;
+  });
+  return {
+    isAllSelected: n,
+    isIndeterminate: u,
+    toggleSelectAll: (s) => {
+      s ? d() : p();
+    }
+  };
+};
+function Je(e, { disabled: t, itemHeight: d, overscan: p = 5, prefixHeight: n }) {
+  const u = R(null), r = R([]), s = R(0), o = R(0), i = R(0);
+  let f;
+  const l = b(() => {
+    const v = typeof d == "number" ? e.value.length * d : e.value.reduce((_, I, k) => _ + d(k), 0), h = typeof d == "number" ? s.value * d : e.value.slice(0, s.value).reduce((_, I, k) => _ + d(k), 0);
+    return {
+      style: {
+        marginTop: `${h}px`,
+        height: `${v - h}px`
+      }
+    };
+  }), y = () => {
+    const v = (n == null ? void 0 : n.value) ?? 0, h = Math.max(u.value.scrollTop - v, 0);
+    if (typeof d == "number")
+      return Math.floor(h / d);
+    let _ = 0, I = 0;
+    for (let k = 0; k < e.value.length; k += 1) {
+      const Q = d(k);
+      if (_ += Q, _ >= h) {
+        I = k;
+        break;
+      }
+    }
+    return I;
+  }, g = () => {
+    if (i.value = u.value.clientHeight, typeof d == "number")
+      return Math.ceil(i.value / d);
+    const v = s.value ?? 0;
+    let h = 0, _ = 0;
+    for (let I = v; I < e.value.length; I += 1) {
+      const k = d(I);
+      if (h += k, _ = I, h > i.value)
+        break;
+    }
+    return _ - v;
+  }, O = () => {
+    if (u.value) {
+      const v = g();
+      s.value = y(), o.value = Math.min(s.value + v + p, e.value.length), r.value = e.value.slice(s.value, o.value);
+    }
+  }, $ = () => {
+    O();
+  };
+  t || (Te(() => {
+    u.value && (i.value = u.value.clientHeight, f = Xe(u.value, ({ clientHeight: v }) => {
+      i.value = v, O();
+    }), O());
+  }), Ge(() => {
+    f == null || f.disconnect();
+  }), he(
+    () => e.value,
+    () => {
+      O();
+    }
+  ));
+  const P = {
+    ref: u,
+    style: { overflowY: "auto" }
+  };
+  return t ? {
+    containerRef: u,
+    containerProps: P,
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onScroll: () => {
+    },
+    list: e
+  } : {
+    containerRef: u,
+    containerProps: P,
+    onScroll: $,
+    list: r,
+    wrapperProps: l
+  };
+}
+var a = /* @__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))(a || {}), X = /* @__PURE__ */ ((e) => (e.AUTOMATIC = "automatic", e.BUTTON = "button", e.NONE = "none", e))(X || {});
+const Qe = H({
+  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: [a.CLICK, a.ENTER, a.SPACE, a.TAB],
+  setup(e, { emit: t }) {
+    const d = b(() => ({
+      "b-listbox-option--disabled": e.disabled,
+      "b-listbox-option--selected": e.selected
+    }));
+    return {
+      // Enums
+      BentoKeyboardNavigationKeyDownEvent: x,
+      BentoListboxEvent: a,
+      // Values
+      conditionalClasses: d,
+      // Events
+      onClick: (u) => {
+        t(a.CLICK, u);
+      },
+      onOptionSelected: (u, r) => {
+        t(u, r);
+      }
+    };
+  }
+});
+function Ze(e, t, d, p, n, u) {
+  return S(), B("label", U({
+    class: ["b-listbox-option", e.conditionalClasses],
+    role: "option"
+  }, e.$attrs, {
+    onClick: t[0] || (t[0] = (...r) => e.onClick && e.onClick(...r)),
+    onKeydown: [
+      t[1] || (t[1] = be((r) => e.onOptionSelected(e.BentoListboxEvent.ENTER, r), ["enter"])),
+      t[2] || (t[2] = be((r) => e.onOptionSelected(e.BentoListboxEvent.SPACE, r), ["space"])),
+      t[3] || (t[3] = be((r) => e.onOptionSelected(e.BentoListboxEvent.TAB, r), ["tab"]))
+    ]
+  }), [
+    Y(e.$slots, "default", {}, void 0, !0)
+  ], 16);
+}
+const ae = /* @__PURE__ */ j(Qe, [["render", Ze], ["__scopeId", "data-v-18a61f5d"]]), et = H({
+  name: "bento-listbox-single-select-option",
+  components: {
+    BentoListboxOption: ae,
+    BentoTypography: ne,
+    CheckmarkIcon: We
+  },
+  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: [a.ENTER, a.SELECT, a.SPACE, a.TAB],
+  setup(e, { emit: t }) {
+    const d = (r) => {
+      e.disabled || t(r, e.option.value);
+    }, p = b(() => e.disabled ? !0 : null), n = b(() => e.selected ? !0 : null), u = b(() => e.disabled ? -1 : 0);
+    return {
+      // Values
+      ariaDisabled: p,
+      ariaSelected: n,
+      tabIndex: u,
+      // Enums
+      BentoListboxEvent: a,
+      // Events
+      onOptionSelected: d
+    };
+  }
+});
+const tt = { class: "b-listbox-single-select-option__text" }, lt = { class: "b-listbox-single-select-option__check-icon" };
+function st(e, t, d, p, n, u) {
+  const r = C("bento-typography"), s = C("checkmark-icon"), o = C("bento-listbox-option");
+  return S(), D(o, 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] = (i) => e.onOptionSelected(e.BentoListboxEvent.SELECT))
+  }, {
+    [F(e.BentoListboxEvent.ENTER)]: t[1] || (t[1] = (i) => e.onOptionSelected(e.BentoListboxEvent.ENTER))
+  }, {
+    [F(e.BentoListboxEvent.SPACE)]: t[2] || (t[2] = (i) => e.onOptionSelected(e.BentoListboxEvent.SPACE))
+  }, {
+    [F(e.BentoListboxEvent.TAB)]: t[3] || (t[3] = (i) => e.onOptionSelected(e.BentoListboxEvent.TAB))
+  }), {
+    default: T(() => [
+      Y(e.$slots, "default", w(K(e.option)), () => [
+        M("span", tt, [
+          A(r, { el: "span" }, {
+            default: T(() => [
+              V(G(e.option.label), 1)
+            ]),
+            _: 1
+          }),
+          e.option.description ? (S(), D(r, {
+            key: 0,
+            class: "b-listbox-single-select-option__description",
+            el: "span"
+          }, {
+            default: T(() => [
+              V(G(e.option.description), 1)
+            ]),
+            _: 1
+          })) : le("", !0)
+        ])
+      ], !0),
+      M("span", lt, [
+        J(A(s, { "svg-title": "selected" }, null, 512), [
+          [ve, e.selected]
+        ])
+      ])
+    ]),
+    _: 3
+  }, 16, ["disabled", "selected", "aria-selected", "aria-disabled", "tabindex"]);
+}
+const ot = /* @__PURE__ */ j(et, [["render", st], ["__scopeId", "data-v-d112952c"]]), Ae = ({ items: e, isOptionDisabled: t }, d) => {
+  const p = b(() => e.value.length - 1), n = R(0);
+  Te(() => {
+    t && (n.value = e.value.findIndex((g) => !t(g)));
+  });
+  const u = (g) => !t || !!t && t(e.value[g]), r = (g) => !t || !!t && !t(e.value[g]), s = (g) => {
+    switch (g) {
+      case "increase":
+        n.value += 1;
+        break;
+      case "decrease":
+        n.value -= 1;
+        break;
+    }
+  }, o = ({ edgeCaseItem: g, isItemBeforeEdgeCaseItem: O }, $, P) => {
+    n.value !== g && (O ? r(g) && s(P) : (s(P), u(n.value) && $()), d(n.value));
+  }, i = () => {
+    const g = n.value === p.value - 2;
+    o(
+      {
+        isItemBeforeEdgeCaseItem: g,
+        edgeCaseItem: p.value
+      },
+      i,
+      "increase"
+      /* INCREASE */
+    );
+  }, f = () => {
+    const g = n.value === 1;
+    o(
+      {
+        edgeCaseItem: 0,
+        isItemBeforeEdgeCaseItem: g
+      },
+      f,
+      "decrease"
+      /* DECREASE */
+    );
+  };
+  return {
+    moveToFirstElement: () => {
+      n.value = 0, u(n.value) ? i() : d(n.value);
+    },
+    moveToLastElement: () => {
+      n.value = p.value, u(n.value) ? f() : d(n.value);
+    },
+    moveToNextElement: i,
+    moveToPreviousElement: f
+  };
+}, nt = H({
+  name: "bento-listbox-single-select",
+  components: {
+    BentoListboxSingleSelectOption: ot
+  },
+  directives: { BentoKeyboardNavigationDirective: pe },
+  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
+    }
+  },
+  emits: [a.SELECT, a.ENTER, a.SPACE, a.TAB],
+  setup(e, { emit: t, slots: d }) {
+    const p = R([]), n = (y) => (g) => {
+      t(y, g);
+    }, u = (y) => p.value[y].$el.focus(), { moveToNextElement: r, moveToPreviousElement: s, moveToFirstElement: o, moveToLastElement: i } = Ae(
+      {
+        items: Oe(e, "items"),
+        isOptionDisabled: e.isOptionDisabled
+      },
+      u
+    ), f = {
+      [x.ARROW_UP]: s,
+      [x.ARROW_DOWN]: r,
+      [x.HOME]: o,
+      [x.END]: i
+    }, l = {
+      [a.SELECT]: n(a.SELECT),
+      [a.SPACE]: n(a.SPACE),
+      [a.TAB]: n(a.TAB),
+      [a.ENTER]: n(a.ENTER)
+    };
+    return {
+      // Enums
+      BentoListboxEvent: a,
+      // Values
+      listboxItemRef: p,
+      slots: d,
+      // Methods
+      onOptionSelected: n,
+      // Keyboard navigation
+      listboxListeners: f,
+      listboxOptionListeners: l
+    };
+  }
+});
+function it(e, t, d, p, n, u) {
+  const r = C("bento-listbox-single-select-option"), s = ge("bento-keyboard-navigation-directive");
+  return J((S(), B("div", se(e.listboxListeners, !0), [
+    (S(!0), B(ie, null, q(e.items, (o) => (S(), D(r, 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
+    }, se(e.listboxOptionListeners)), oe({ _: 2 }, [
+      q(e.slots, (i, f) => ({
+        name: f,
+        fn: T((l) => [
+          Y(e.$slots, f, w(K(l)))
+        ])
+      }))
+    ]), 1040, ["option", "disabled", "selected"]))), 128))
+  ], 16)), [
+    [s]
+  ]);
+}
+const at = /* @__PURE__ */ j(nt, [["render", it]]);
+var Ie = /* @__PURE__ */ ((e) => (e.DISABLED = "disabled", e))(Ie || {}), te = /* @__PURE__ */ ((e) => (e.SELECT_CATEGORY = "select-category", e.UNSELECT_CATEGORY = "unselect-category", e))(te || {});
+const rt = {
+  "en-US": {
+    categoryClosed: "{category} closed",
+    categoryOpened: "{category} opened"
+  }
+}, ct = H({
+  i18n: { messages: rt },
+  name: "bento-listbox-multi-select-category",
+  components: {
+    BentoCheckbox: ye,
+    BentoTypography: ne,
+    BentoListboxOption: ae,
+    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: () => []
+    }
+  },
+  emits: [te.SELECT_CATEGORY, te.UNSELECT_CATEGORY],
+  setup(e, { emit: t }) {
+    const d = R(!1), { t: p } = fe(), n = (v) => e.isOptionDisabled ? e.isOptionDisabled(v) : !1, u = b(
+      () => e.category.items.every((v) => n(v))
+    ), r = b(() => ({
+      [`b-listbox-multi-select-category--${Ie.DISABLED}`]: u.value
+    })), s = (v) => {
+      v.preventDefault(), d.value = !d.value;
+    }, o = (v) => {
+      var I;
+      const h = n(v), _ = ((I = e.selectedItemsList) == null ? void 0 : I.includes(v.value)) || !1;
+      return { isDisabled: h, isPreSelected: _ };
+    }, i = b(
+      () => e.category.items.filter((v) => {
+        const { isDisabled: h, isPreSelected: _ } = o(v);
+        return h && _ || !h;
+      })
+    ), f = b(
+      () => {
+        var v;
+        return (v = i.value) == null ? void 0 : v.filter(
+          ({ value: h }) => {
+            var _;
+            return (_ = e.selectedItemsList) == null ? void 0 : _.includes(h);
+          }
+        );
+      }
+    ), l = b(() => {
+      const v = d.value ? "categoryOpened" : "categoryClosed";
+      return p(v, { category: e.category.label });
+    }), y = () => {
+      t(te.SELECT_CATEGORY);
+    }, g = () => {
+      t(te.UNSELECT_CATEGORY);
+    }, { isAllSelected: O, isIndeterminate: $, toggleSelectAll: P } = Le(
+      f,
+      i,
+      y,
+      g
+    );
+    return {
+      // Values
+      chevronTitle: l,
+      conditionalClass: r,
+      hasAllPropsDisabled: u,
+      isOpen: d,
+      isAllSelected: O,
+      isIndeterminate: $,
+      // Methods
+      toggleOpen: s,
+      toggleSelectAll: P
+    };
+  }
+});
+const dt = { class: "b-listbox-multi-select-category__label" };
+function ut(e, t, d, p, n, u) {
+  const r = C("bento-checkbox"), s = C("bento-typography"), o = C("chevron-up-icon"), i = C("chevron-down-icon"), f = C("bento-listbox-option");
+  return S(), B("div", null, [
+    A(f, {
+      class: me(["b-listbox-multi-select-category__option", e.conditionalClass])
+    }, {
+      default: T(() => [
+        A(r, {
+          "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"]),
+        M("span", dt, [
+          A(s, {
+            el: "span",
+            class: "b-listbox-multi-select-category__label-text"
+          }, {
+            default: T(() => [
+              V(G(e.category.label), 1)
+            ]),
+            _: 1
+          }),
+          M("div", {
+            class: "b-listbox-multi-select-category__label-chevron",
+            "data-testid": "toggle-listbox",
+            onClickCapture: t[0] || (t[0] = (...l) => e.toggleOpen && e.toggleOpen(...l))
+          }, [
+            e.isOpen ? (S(), D(o, {
+              key: 0,
+              "svg-title": e.chevronTitle
+            }, null, 8, ["svg-title"])) : (S(), D(i, {
+              key: 1,
+              "svg-title": e.chevronTitle
+            }, null, 8, ["svg-title"]))
+          ], 32)
+        ])
+      ]),
+      _: 1
+    }, 8, ["class"]),
+    J(M("div", null, [
+      Y(e.$slots, "default", {}, void 0, !0)
+    ], 512), [
+      [ve, e.isOpen]
+    ])
+  ]);
+}
+const bt = /* @__PURE__ */ j(ct, [["render", ut], ["__scopeId", "data-v-69a9679a"]]);
+var W = /* @__PURE__ */ ((e) => (e.SELECT_CATEGORY = "select-category", e.TOGGLE_CHECKBOX_SELECTION = "toggle-checkbox-selection", e.UNSELECT_CATEGORY = "unselect-category", e))(W || {});
+const mt = H({
+  name: "listbox-multi-select-options",
+  components: {
+    BentoCheckbox: ye,
+    BentoListboxOption: ae,
+    BentoTypography: ne,
+    ListboxMultiSelectCategory: bt
+  },
+  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: () => []
+    }
+  },
+  emits: [
+    W.TOGGLE_CHECKBOX_SELECTION,
+    W.SELECT_CATEGORY,
+    W.UNSELECT_CATEGORY
+  ],
+  setup(e, { emit: t }) {
+    const d = (o) => {
+      t(W.TOGGLE_CHECKBOX_SELECTION, o);
+    }, p = (o) => !!o.items, n = (o) => {
+      const i = e.isMultiLevel && e.searching;
+      return o.description && (!e.isMultiLevel || i);
+    }, u = (o) => o.items ? !!o.items.find((i) => e.selectedItemsList.includes(i.value)) : e.selectedItemsList.includes(o.value), r = (o, i) => {
+      if (p(i))
+        return t(o ? W.SELECT_CATEGORY : W.UNSELECT_CATEGORY, i);
+      d(i.value);
+    };
+    return {
+      // Values
+      conditionalClasses: b(() => ({
+        "b-listbox-multi-select-options__category-option": e.categoryItems
+      })),
+      // Methods
+      isCategory: p,
+      isOptionSelected: u,
+      shouldShowDescription: n,
+      toggleCheckboxSelection: d,
+      selectSearch: r,
+      // Enums
+      BentoListboxEvent: a,
+      ListboxMultiSelectOptionsEvent: W
+    };
+  }
+});
+const vt = { class: "b-listbox-multi-select__option-text" }, gt = { class: "b-listbox-multi-select__option-text" };
+function pt(e, t, d, p, n, u) {
+  const r = C("bento-checkbox"), s = C("bento-typography"), o = C("bento-listbox-option"), i = C("listbox-multi-select-options", !0), f = C("listbox-multi-select-category");
+  return S(), B("div", null, [
+    (S(!0), B(ie, null, q(e.items, (l) => (S(), B("div", {
+      key: `selected-${l.value}`
+    }, [
+      e.searching && e.isMultiLevel ? (S(), D(o, {
+        key: 0,
+        class: me(["b-listbox-multi-select-options", e.conditionalClasses]),
+        disabled: e.isOptionDisabled ? e.isOptionDisabled(l) : null
+      }, {
+        default: T(() => [
+          A(r, {
+            "model-value": e.isOptionSelected(l),
+            "aria-label": l.label,
+            disabled: e.isOptionDisabled ? e.isOptionDisabled(l) : null,
+            value: l.value,
+            "onUpdate:modelValue": (y) => e.selectSearch(y, l)
+          }, null, 8, ["model-value", "aria-label", "disabled", "value", "onUpdate:modelValue"]),
+          Y(e.$slots, "default", w(K(l)), () => [
+            M("span", vt, [
+              A(s, { el: "span" }, {
+                default: T(() => [
+                  V(G(l.label), 1)
+                ]),
+                _: 2
+              }, 1024),
+              e.shouldShowDescription(l) ? (S(), D(s, {
+                key: 0,
+                class: "b-listbox-multi-select__option-description",
+                el: "span"
+              }, {
+                default: T(() => [
+                  V(G(l.description), 1)
+                ]),
+                _: 2
+              }, 1024)) : le("", !0)
+            ])
+          ], !0)
+        ]),
+        _: 2
+      }, 1032, ["class", "disabled"])) : (S(), B(ie, { key: 1 }, [
+        l.items ? (S(), D(f, {
+          key: 0,
+          category: l,
+          "is-option-disabled": e.isOptionDisabled,
+          "selected-items-list": e.selectedItemsList,
+          onSelectCategory: (y) => e.$emit(e.ListboxMultiSelectOptionsEvent.SELECT_CATEGORY, l),
+          onUnselectCategory: (y) => e.$emit(e.ListboxMultiSelectOptionsEvent.UNSELECT_CATEGORY, l)
+        }, {
+          default: T(() => [
+            A(i, {
+              "category-items": "",
+              items: l.items,
+              "is-option-disabled": e.isOptionDisabled,
+              "is-multi-level": e.isMultiLevel,
+              "selected-items-list": e.selectedItemsList,
+              searching: e.searching,
+              onToggleCheckboxSelection: t[0] || (t[0] = (y) => e.toggleCheckboxSelection(y))
+            }, null, 8, ["items", "is-option-disabled", "is-multi-level", "selected-items-list", "searching"])
+          ]),
+          _: 2
+        }, 1032, ["category", "is-option-disabled", "selected-items-list", "onSelectCategory", "onUnselectCategory"])) : (S(), D(o, {
+          key: 1,
+          class: me(["b-listbox-multi-select-options", e.conditionalClasses]),
+          disabled: e.isOptionDisabled ? e.isOptionDisabled(l) : null
+        }, {
+          default: T(() => [
+            A(r, {
+              "model-value": e.selectedItemsList,
+              "aria-label": l.label,
+              disabled: e.isOptionDisabled ? e.isOptionDisabled(l) : null,
+              value: l.value,
+              "onUpdate:modelValue": (y) => e.toggleCheckboxSelection(l.value)
+            }, null, 8, ["model-value", "aria-label", "disabled", "value", "onUpdate:modelValue"]),
+            Y(e.$slots, "default", w(K(l)), () => [
+              M("span", gt, [
+                A(s, { el: "span" }, {
+                  default: T(() => [
+                    V(G(l.label), 1)
+                  ]),
+                  _: 2
+                }, 1024),
+                e.shouldShowDescription(l) ? (S(), D(s, {
+                  key: 0,
+                  class: "b-listbox-multi-select__option-description",
+                  el: "span"
+                }, {
+                  default: T(() => [
+                    V(G(l.description), 1)
+                  ]),
+                  _: 2
+                }, 1024)) : le("", !0)
+              ])
+            ], !0)
+          ]),
+          _: 2
+        }, 1032, ["class", "disabled"]))
+      ], 64))
+    ]))), 128))
+  ]);
+}
+const ft = /* @__PURE__ */ j(mt, [["render", pt], ["__scopeId", "data-v-55a6d406"]]), Ee = {
+  "en-US": {
+    allSelected: "All selected ({total})",
+    numberOfTotalSelected: "{number} of {total} selected",
+    selectAll: "Select all ({total})"
+  }
+}, yt = H({
+  i18n: { messages: Ee },
+  name: "bento-listbox-multi-select",
+  components: {
+    BentoCheckbox: ye,
+    BentoListboxOption: ae,
+    BentoTypography: ne,
+    ListboxMultiSelectOptions: ft
+  },
+  directives: { BentoKeyboardNavigationDirective: pe },
+  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: () => []
+    }
+  },
+  emits: [a.SELECT],
+  setup(e, { emit: t, slots: d }) {
+    const { t: p } = fe({ messages: Ee }), n = R(null), u = R(null), r = R(null), s = R();
+    he(
+      () => e.selectedValues,
+      () => {
+        s.value = [...e.selectedValues ?? []];
+      },
+      {
+        immediate: !0
+      }
+    );
+    const o = b(() => !!e.items.find(({ items: c }) => !!c)), i = b(() => o.value ? e.items.reduce((c, m) => (m.items ? c.push(...m.items.flat()) : c.push(m), c), []) : e.items), f = (c) => {
+      var E;
+      const m = e.isOptionDisabled(c), L = ((E = s.value) == null ? void 0 : E.includes(c.value)) || !1;
+      return { isDisabled: m, isPreSelected: L };
+    }, l = b(
+      () => e.searching && o ? e.items : i.value.filter((c) => {
+        const { isDisabled: m, isPreSelected: L } = f(c);
+        return m && L || !m;
+      })
+    ), y = b(
+      () => {
+        var c;
+        return (c = l.value) == null ? void 0 : c.filter((m) => {
+          var L;
+          return m.items && o.value && e.searching ? m.items.filter(
+            (z) => (e.selectedValues ?? []).includes(
+              z.value
+            )
+          ).length === m.items.length : (L = s.value) == null ? void 0 : L.includes(m.value);
+        });
+      }
+    ), g = () => o.value && !e.searching ? l.value.length : e.items.length, O = b(() => {
+      var L;
+      const c = g(), m = ((L = y.value) == null ? void 0 : L.length) || 0;
+      return m === 0 ? p("selectAll", { total: c }) : m === c ? p("allSelected", { total: c }) : p("numberOfTotalSelected", { number: m, total: c });
+    }), $ = (c) => {
+      const m = (E) => {
+        const { isDisabled: z, isPreSelected: ue } = f(E);
+        return z && ue || !z;
+      }, L = c.filter(m).filter((E) => !s.value.includes(E.value)).map(({ value: E }) => E);
+      s.value = [...s.value, ...L], t(a.SELECT, s.value);
+    }, P = (c) => {
+      const m = (E) => {
+        const { isDisabled: z, isPreSelected: ue } = f(E);
+        return !(z && ue);
+      }, L = c.filter(m).map(({ value: E }) => E);
+      s.value = s.value.filter((E) => !(L != null && L.includes(E))), t(a.SELECT, s.value);
+    }, v = () => {
+      $(i.value);
+    }, h = () => {
+      P(i.value);
+    }, { isAllSelected: _, isIndeterminate: I, toggleSelectAll: k } = Le(
+      y,
+      l,
+      v,
+      h
+    ), Q = (c) => {
+      $(c.items);
+    }, re = (c) => {
+      P(c.items);
+    }, ce = (c, m) => {
+      let L = !1;
+      s.value = s.value.filter((E) => m === E ? (L = !0, !1) : !0), L || s.value.push(m), t(c, s.value);
+    }, Z = b(() => {
+      const c = (E) => s.value.includes(E.value), m = (E) => !!E.find((z) => c(z));
+      return e.items.filter((E) => E.items && m(E.items) ? !0 : c(E));
+    }), de = b(() => {
+      var c;
+      return ((c = Z.value) == null ? void 0 : c.length) > 0;
+    }), N = b(
+      () => {
+        var c, m;
+        return ((c = y.value) == null ? void 0 : c.length) === ((m = i.value) == null ? void 0 : m.length);
+      }
+    ), ee = b(
+      () => n.value ? [n.value] : []
+    ), $e = b(
+      () => {
+        var c, m;
+        return (m = (c = u.value) == null ? void 0 : c.$children) != null && m.length ? u.value.$children : [];
+      }
+    ), ke = b(
+      () => {
+        var c, m;
+        return (m = (c = r.value) == null ? void 0 : c.$children) != null && m.length ? r.value.$children : [];
+      }
+    ), Re = b(() => ({ label: O, value: _ })), De = b(() => [
+      Re,
+      ...Z.value,
+      ...i.value
+    ]), Ne = (c) => {
+      [
+        ...ee.value,
+        ...$e.value,
+        ...ke.value
+      ][c].$el.focus();
+    }, { moveToNextElement: Pe, moveToPreviousElement: Me, moveToFirstElement: Ue, moveToLastElement: we } = Ae(
+      {
+        items: R(De),
+        isOptionDisabled: e.isOptionDisabled
+      },
+      Ne
+    ), Ve = {
+      [x.ARROW_UP]: Me,
+      [x.ARROW_DOWN]: Pe,
+      [x.HOME]: Ue,
+      [x.END]: we
+    };
+    return {
+      // Refs
+      selectAllListboxItemsRef: n,
+      selectedListboxItemsRef: u,
+      listboxItemsRef: r,
+      // Values
+      isAllSelected: _,
+      isAllItemsIncludingDisabled: N,
+      isAnOptionSelected: de,
+      isIndeterminate: I,
+      isMultiLevelSelect: o,
+      flattenedItemsList: i,
+      selectedItemsList: s,
+      selectAllCheckboxText: O,
+      selectedOptions: Z,
+      slots: d,
+      // Enums
+      BentoListboxEvent: a,
+      // Methods
+      selectAllCategory: Q,
+      toggleCheckboxSelection: ce,
+      toggleSelectAll: k,
+      unselectAllCategory: re,
+      // Events
+      listboxListeners: Ve
+    };
+  }
+});
+const Be = (e) => (xe("data-v-8c62bb32"), e = e(), Ye(), e), St = { key: 0 }, Et = /* @__PURE__ */ Be(() => /* @__PURE__ */ M("hr", { class: "b-listbox-multi-select__divider" }, null, -1)), Ct = /* @__PURE__ */ Be(() => /* @__PURE__ */ M("hr", { class: "b-listbox-multi-select__divider" }, null, -1));
+function _t(e, t, d, p, n, u) {
+  const r = C("bento-checkbox"), s = C("bento-typography"), o = C("bento-listbox-option"), i = C("listbox-multi-select-options"), f = ge("bento-keyboard-navigation-directive");
+  return J((S(), B("div", U({ class: "b-listbox-multi-select" }, se(e.listboxListeners, !0)), [
+    A(o, {
+      ref: "selectAllListboxItemsRef",
+      class: "b-listbox-multi-select__option"
+    }, {
+      default: T(() => [
+        A(r, {
+          "aria-label": e.selectAllCheckboxText,
+          "model-value": e.isAllSelected,
+          indeterminate: e.isIndeterminate,
+          "onUpdate:modelValue": e.toggleSelectAll
+        }, null, 8, ["aria-label", "model-value", "indeterminate", "onUpdate:modelValue"]),
+        A(s, { el: "span" }, {
+          default: T(() => [
+            V(G(e.selectAllCheckboxText), 1)
+          ]),
+          _: 1
+        })
+      ]),
+      _: 1
+    }, 512),
+    e.isAnOptionSelected ? (S(), B("div", St, [
+      Et,
+      A(i, U({
+        ref: "selectedListboxItemsRef",
+        items: e.selectedOptions,
+        "is-option-disabled": e.isOptionDisabled,
+        "is-multi-level": e.isMultiLevelSelect,
+        searching: e.searching,
+        "selected-items-list": e.selectedItemsList,
+        onSelectCategory: e.selectAllCategory,
+        onUnselectCategory: e.unselectAllCategory,
+        onToggleCheckboxSelection: t[0] || (t[0] = (l) => e.toggleCheckboxSelection(e.BentoListboxEvent.SELECT, l))
+      }, {
+        [F(e.BentoListboxEvent.SPACE)]: t[1] || (t[1] = (l) => e.toggleCheckboxSelection(e.BentoListboxEvent.SPACE, l))
+      }, {
+        [F(e.BentoListboxEvent.TAB)]: t[2] || (t[2] = (l) => e.toggleCheckboxSelection(e.BentoListboxEvent.TAB, l))
+      }, {
+        [F(e.BentoListboxEvent.ENTER)]: t[3] || (t[3] = (l) => e.toggleCheckboxSelection(e.BentoListboxEvent.ENTER, l))
+      }), oe({ _: 2 }, [
+        q(e.slots, (l, y) => ({
+          name: y,
+          fn: T((g) => [
+            Y(e.$slots, y, w(K(g)), void 0, !0)
+          ])
+        }))
+      ]), 1040, ["items", "is-option-disabled", "is-multi-level", "searching", "selected-items-list", "onSelectCategory", "onUnselectCategory"])
+    ])) : le("", !0),
+    J(M("div", null, [
+      Ct,
+      A(i, U({
+        ref: "listboxItemsRef",
+        items: e.items,
+        "is-option-disabled": e.isOptionDisabled,
+        "is-multi-level": e.isMultiLevelSelect,
+        searching: e.searching,
+        "selected-items-list": e.selectedItemsList,
+        onToggleCheckboxSelection: t[4] || (t[4] = (l) => e.toggleCheckboxSelection(e.BentoListboxEvent.SELECT, l)),
+        onSelectCategory: e.selectAllCategory,
+        onUnselectCategory: e.unselectAllCategory
+      }, {
+        [F(e.BentoListboxEvent.SPACE)]: t[5] || (t[5] = (l) => e.toggleCheckboxSelection(e.BentoListboxEvent.SPACE, l))
+      }, {
+        [F(e.BentoListboxEvent.TAB)]: t[6] || (t[6] = (l) => e.toggleCheckboxSelection(e.BentoListboxEvent.TAB, l))
+      }, {
+        [F(e.BentoListboxEvent.ENTER)]: t[7] || (t[7] = (l) => e.toggleCheckboxSelection(e.BentoListboxEvent.ENTER, l))
+      }), oe({ _: 2 }, [
+        q(e.slots, (l, y) => ({
+          name: y,
+          fn: T((g) => [
+            Y(e.$slots, y, w(K(g)), void 0, !0)
+          ])
+        }))
+      ]), 1040, ["items", "is-option-disabled", "is-multi-level", "searching", "selected-items-list", "onSelectCategory", "onUnselectCategory"])
+    ], 512), [
+      [ve, !e.isAllItemsIncludingDisabled]
+    ])
+  ], 16)), [
+    [f]
+  ]);
+}
+const Ce = /* @__PURE__ */ j(yt, [["render", _t], ["__scopeId", "data-v-8c62bb32"]]), _e = {
+  "en-US": {
+    showMore: "Show more",
+    loading: "Loading"
+  }
+}, Tt = 36, ht = H({
+  name: "bento-listbox",
+  components: {
+    BentoEmptyState: Ke,
+    BentoListboxSingleSelect: at,
+    BentoListboxMultiSelect: Ce,
+    BentoTypography: ne,
+    BentoLoadingIndicator: Fe,
+    BentoLoadingButton: je
+  },
+  directives: { BentoKeyboardNavigationDirective: pe },
+  i18n: { messages: _e },
+  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: X.NONE,
+      validator: (e) => Object.values(X).includes(e)
+    },
+    /**
+     * If enabled, the user will be able to select multiple items.
+     */
+    multiple: { 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: Ce.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: [
+    a.SELECT,
+    a.SPACE,
+    a.SHOW_MORE,
+    a.ENTER,
+    a.ESCAPE,
+    a.TAB
+  ],
+  setup(e, { emit: t, slots: d }) {
+    const p = R([]), n = Oe(e, "items"), { t: u } = fe({ messages: _e }), r = b(() => e.lazyLoadType !== X.AUTOMATIC), s = b(() => e.lazyLoadType === X.AUTOMATIC), o = () => {
+      var N;
+      return typeof (e == null ? void 0 : e.virtualScroll) == "object" && ((N = e == null ? void 0 : e.virtualScroll) != null && N.itemHeight) ? e.virtualScroll.itemHeight : Tt;
+    }, {
+      containerRef: i,
+      containerProps: f,
+      onScroll: l,
+      list: y,
+      wrapperProps: g
+    } = Je(n, {
+      itemHeight: o(),
+      // 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"
+    }), O = b(
+      () => r.value ? "true" : void 0
+    ), $ = b(
+      () => r.value && e.loading ? "true" : "false"
+    ), P = b(
+      () => r.value ? "polite" : void 0
+    ), v = (N) => (ee) => {
+      t(N, ee);
+    }, h = () => {
+      t(a.SHOW_MORE);
+    }, _ = ze(() => {
+      const N = i.value, ee = N.scrollTop + N.clientHeight >= N.scrollHeight;
+      e.hasMoreItems && ee && !e.loading && h();
+    }), I = () => {
+      s.value ? _() : l();
+    }, k = b(() => {
+      var N;
+      return e.searching && ((N = e.items) == null ? void 0 : N.length) === 0;
+    }), Q = b(
+      () => e.lazyLoadType === X.BUTTON && e.hasMoreItems
+    ), re = b(
+      () => e.loading ? Se.LOADING : Se.START
+    ), ce = b(() => e.loading ? u("loading") : u("showMore")), Z = b(() => ({
+      ...e.emptyState,
+      variant: "condensed"
+    })), de = {
+      [a.SELECT]: v(a.SELECT),
+      [a.SPACE]: v(a.SPACE),
+      [a.TAB]: v(a.TAB),
+      [a.ENTER]: v(a.ENTER)
+    };
+    return {
+      // Refs
+      listboxRef: i,
+      listboxItemRef: p,
+      // a11y
+      ariaAtomic: O,
+      ariaBusy: $,
+      ariaLive: P,
+      // Values
+      containerProps: f,
+      isSearchResultEmpty: k,
+      limitedEmptyStateProps: Z,
+      loadingButtonState: re,
+      slots: d,
+      shouldDisplayShowMoreButton: Q,
+      showMoreButtonText: ce,
+      virtualisedItems: y,
+      wrapperProps: g,
+      // Enums
+      BentoKeyboardNavigationKeyDownEvent: x,
+      BentoListboxEvent: a,
+      // Methods
+      onListboxContainerScroll: I,
+      onOptionSelected: v,
+      emitShowMore: h,
+      listboxListeners: de
+    };
+  }
+});
+const Ot = ["id", "aria-busy", "aria-atomic", "aria-label", "aria-live"], Lt = {
+  key: 0,
+  class: "b-listbox__empty-search-message"
+}, At = {
+  key: 2,
+  class: "b-listbox__lazy-load"
+}, It = {
+  key: 3,
+  class: "b-listbox__lazy-load"
+};
+function Bt(e, t, d, p, n, u) {
+  const r = C("bento-empty-state"), s = C("bento-typography"), o = C("bento-listbox-multi-select"), i = C("bento-listbox-single-select"), f = C("bento-loading-button"), l = C("bento-loading-indicator"), y = ge("bento-keyboard-navigation-directive");
+  return J((S(), B("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] = (...g) => e.onListboxContainerScroll && e.onListboxContainerScroll(...g))
+  }), [
+    M("div", w(K(e.wrapperProps)), [
+      e.isSearchResultEmpty ? (S(), B("div", Lt, [
+        e.emptyState ? (S(), D(r, w(U({ key: 0 }, e.limitedEmptyStateProps)), null, 16)) : (S(), D(s, {
+          key: 1,
+          el: "span"
+        }, {
+          default: T(() => [
+            V(G(e.noResultsMessage), 1)
+          ]),
+          _: 1
+        }))
+      ])) : (S(), B(ie, { key: 1 }, [
+        e.multiple ? (S(), D(o, U({
+          key: 0,
+          ref: "listboxItemRef",
+          items: e.items,
+          "selected-values": e.selectedValue,
+          searching: e.searching,
+          "is-option-disabled": e.isOptionDisabled
+        }, se(e.listboxListeners)), oe({ _: 2 }, [
+          q(e.slots, (g, O) => ({
+            name: O,
+            fn: T(($) => [
+              Y(e.$slots, O, w(K($)), void 0, !0)
+            ])
+          }))
+        ]), 1040, ["items", "selected-values", "searching", "is-option-disabled"])) : (S(), D(i, U({
+          key: 1,
+          ref: "listboxItemRef",
+          items: e.virtualisedItems,
+          "selected-value": e.selectedValue,
+          "is-option-disabled": e.isOptionDisabled
+        }, se(e.listboxListeners)), oe({ _: 2 }, [
+          q(e.slots, (g, O) => ({
+            name: O,
+            fn: T(($) => [
+              Y(e.$slots, O, w(K($)), void 0, !0)
+            ])
+          }))
+        ]), 1040, ["items", "selected-value", "is-option-disabled"])),
+        e.shouldDisplayShowMoreButton ? (S(), B("div", At, [
+          A(f, {
+            state: e.loadingButtonState,
+            variant: "secondary",
+            onClickCapture: e.emitShowMore
+          }, {
+            default: T(() => [
+              V(G(e.showMoreButtonText), 1)
+            ]),
+            _: 1
+          }, 8, ["state", "onClickCapture"])
+        ])) : e.loading ? (S(), B("div", It, [
+          A(l)
+        ])) : le("", !0)
+      ], 64))
+    ], 16)
+  ], 16, Ot)), [
+    [y]
+  ]);
+}
+const Ft = /* @__PURE__ */ j(ht, [["render", Bt], ["__scopeId", "data-v-fe2709d5"]]);
+export {
+  Ft as B,
+  a,
+  X as b
+};
+//# sourceMappingURL=listbox.f6e5a11d.js.map