@adyen/bento-vue2 1.2.0 → 1.3.0

package/dist/chunks/{listbox.f51e92cd.js → listbox.116ed0c1.js}

@@ -1,34 +1,34 @@
-import { computed as c, defineComponent as k, ref as h, onMounted as _e, toRef as be, watch as me } from "vue";
-import { B as P, a as $ } from "./index.175f9e2d.js";
+import { computed as r, defineComponent as N, ref as C, onMounted as _e, toRef as be, watch as me } from "vue";
+import { B as P, a as $ } from "./index.56858f4e.js";
 import { BentoLoadingIndicator as ve } from "../loading-indicator.js";
-import { a as fe } from "./button.c27a7ce2.js";
-import { u as F } from "./i18n.155748d6.js";
-import { B as T, a as U, d as ge } from "./debounce.f8d92e44.js";
-import { n as I } from "./_plugin-vue2_normalizer.71e2aa87.js";
-import { B as Y } from "./checkbox.c06daf12.js";
+import { a as fe } from "./button.d0c9527d.js";
+import { u as G } from "./i18n.155748d6.js";
+import { B as h, a as U, d as ge } from "./debounce.f8d92e44.js";
+import { n as R } from "./_plugin-vue2_normalizer.71e2aa87.js";
+import { B as Y } from "./checkbox.f8457c93.js";
 import { C as pe, a as Ee } from "./chevron-down.b851a6da.js";
-import { B as ye, a as V } from "./loading-button.6d34f66f.js";
+import { B as ye, a as V } from "./loading-button.1c201f87.js";
 import "../assets/listbox.css";
 const W = (t, e, l, s) => {
-  const n = c(
+  const n = r(
     () => {
       var u, d;
       return !!((u = t.value) != null && u.length) && ((d = t.value) == null ? void 0 : d.length) === e.value.length;
     }
-  ), r = c(() => {
+  ), c = r(() => {
     var u;
     return t.value == null || t.value.length === 0 ? !1 : ((u = t.value) == null ? void 0 : u.length) !== e.value.length;
   });
   return {
     isAllSelected: n,
-    isIndeterminate: r,
+    isIndeterminate: c,
     toggleSelectAll: (u) => {
       u ? l() : s();
     }
   };
 };
-var o = /* @__PURE__ */ ((t) => (t.SELECT = "select", t.SHOW_MORE = "show-more", t.ESCAPE = "escape-pressed", t.CLICK = "click", t.ENTER = "enter-pressed", t.SPACE = "space-pressed", t.TAB = "tab-pressed", t.CLOSE_DROPDOWN = "close-dropdown", t))(o || {}), R = /* @__PURE__ */ ((t) => (t.AUTOMATIC = "automatic", t.BUTTON = "button", t.NONE = "none", t))(R || {});
-const xe = k({
+var o = /* @__PURE__ */ ((t) => (t.SELECT = "select", t.SHOW_MORE = "show-more", t.ESCAPE = "escape-pressed", t.CLICK = "click", t.ENTER = "enter-pressed", t.SPACE = "space-pressed", t.TAB = "tab-pressed", t.CLOSE_DROPDOWN = "close-dropdown", t))(o || {}), k = /* @__PURE__ */ ((t) => (t.AUTOMATIC = "automatic", t.BUTTON = "button", t.NONE = "none", t))(k || {});
+const xe = N({
   name: "bento-listbox-option",
   props: {
     /**
@@ -42,22 +42,22 @@ const xe = k({
   },
   emits: [o.CLICK, o.ENTER, o.SPACE, o.TAB],
   setup(t, { emit: e }) {
-    const l = c(() => ({
+    const l = r(() => ({
       "b-listbox-option--disabled": t.disabled,
       "b-listbox-option--selected": t.selected
     }));
     return {
       // Enums
-      BentoKeyboardNavigationKeyDownEvent: T,
+      BentoKeyboardNavigationKeyDownEvent: h,
       BentoListboxEvent: o,
       // Values
       conditionalClasses: l,
       // Events
-      onClick: (r) => {
-        e(o.CLICK, r);
+      onClick: (c) => {
+        e(o.CLICK, c);
       },
-      onOptionSelected: (r, m) => {
-        e(r, m);
+      onOptionSelected: (c, m) => {
+        e(c, m);
       }
     };
   }
@@ -71,7 +71,7 @@ var Se = function() {
   }, function(s) {
     return !s.type.indexOf("key") && e._k(s.keyCode, "tab", 9, s.key, "Tab") ? null : e.onOptionSelected(e.BentoListboxEvent.TAB, s);
   }] } }, "label", e.$attrs, !1), [e._t("default")], 2);
-}, Ce = [], he = /* @__PURE__ */ I(
+}, Ce = [], he = /* @__PURE__ */ R(
   xe,
   Se,
   Ce,
@@ -91,17 +91,17 @@ const Te = {
 var Ae = function() {
   var e = this, l = e._self._c;
   return l("svg", e._b({ attrs: { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" } }, "svg", e.$attrs, !1), [e.$attrs["svg-title"] ? l("title", [e._v(e._s(e.$attrs["svg-title"]))]) : e._e(), l("path", { attrs: { fill: "#00112C", "fill-rule": "evenodd", d: "M14.5303 4.53033C14.8232 4.23744 14.8232 3.76256 14.5303 3.46967C14.2374 3.17678 13.7626 3.17678 13.4697 3.46967L6 10.9393L2.53033 7.46967C2.23744 7.17678 1.76256 7.17678 1.46967 7.46967C1.17678 7.76256 1.17678 8.23744 1.46967 8.53033L5.46967 12.5303C5.50628 12.5669 5.54574 12.599 5.58732 12.6264C5.87844 12.8186 6.27405 12.7866 6.53033 12.5303L14.5303 4.53033Z", "clip-rule": "evenodd" } })]);
-}, Le = [], Oe = /* @__PURE__ */ I(
+}, Oe = [], Le = /* @__PURE__ */ R(
   Te,
   Ae,
-  Le,
+  Oe,
   !1,
   null,
   "4687fbd0",
   null,
   null
 );
-const Be = Oe.exports, Ie = k({
+const Be = Le.exports, Ie = N({
   name: "bento-listbox-single-select-option",
   components: {
     BentoListboxOption: w,
@@ -130,12 +130,12 @@ const Be = Oe.exports, Ie = k({
   setup(t, { emit: e }) {
     const l = (m) => {
       t.disabled || e(m, t.option.value);
-    }, s = c(() => t.disabled ? !0 : null), n = c(() => t.selected ? !0 : null), r = c(() => t.disabled ? -1 : 0);
+    }, s = r(() => t.disabled ? !0 : null), n = r(() => t.selected ? !0 : null), c = r(() => t.disabled ? -1 : 0);
     return {
       // Values
       ariaDisabled: s,
       ariaSelected: n,
-      tabIndex: r,
+      tabIndex: c,
       // Enums
       BentoTypographyElement: $,
       BentoListboxEvent: o,
@@ -157,7 +157,7 @@ var Re = function() {
   }]) }, [e._t("default", function() {
     return [l("span", { staticClass: "b-listbox-single-select-option__text" }, [l("bento-typography", { attrs: { el: e.BentoTypographyElement.SPAN } }, [e._v(e._s(e.option.label))]), e.option.description ? l("bento-typography", { staticClass: "b-listbox-single-select-option__description", attrs: { el: e.BentoTypographyElement.SPAN } }, [e._v(" " + e._s(e.option.description) + " ")]) : e._e()], 1)];
   }, null, e.option), l("span", { staticClass: "b-listbox-single-select-option__check-icon" }, [l("checkmark-icon", { directives: [{ name: "show", rawName: "v-show", value: e.selected, expression: "selected" }], attrs: { "svg-title": "selected" } })], 1)], 2);
-}, ke = [], Ne = /* @__PURE__ */ I(
+}, ke = [], Ne = /* @__PURE__ */ R(
   Ie,
   Re,
   ke,
@@ -168,11 +168,11 @@ var Re = function() {
   null
 );
 const De = Ne.exports, q = ({ items: t, isOptionDisabled: e }, l) => {
-  const s = c(() => t.value.length - 1), n = h(0);
+  const s = r(() => t.value.length - 1), n = C(0);
   _e(() => {
     e && (n.value = t.value.findIndex((v) => !e(v)));
   });
-  const r = (v) => !e || !!e && e(t.value[v]), m = (v) => !e || !!e && !e(t.value[v]), u = (v) => {
+  const c = (v) => !e || !!e && e(t.value[v]), m = (v) => !e || !!e && !e(t.value[v]), u = (v) => {
     switch (v) {
       case "increase":
         n.value += 1;
@@ -181,8 +181,8 @@ const De = Ne.exports, q = ({ items: t, isOptionDisabled: e }, l) => {
         n.value -= 1;
         break;
     }
-  }, d = ({ edgeCaseItem: v, isItemBeforeEdgeCaseItem: A }, L, f) => {
-    n.value !== v && (A ? m(v) && u(f) : (u(f), r(n.value) && L()), l(n.value));
+  }, d = ({ edgeCaseItem: v, isItemBeforeEdgeCaseItem: A }, O, T) => {
+    n.value !== v && (A ? m(v) && u(T) : (u(T), c(n.value) && O()), l(n.value));
   }, _ = () => {
     const v = n.value === s.value - 2;
     d(
@@ -208,15 +208,15 @@ const De = Ne.exports, q = ({ items: t, isOptionDisabled: e }, l) => {
   };
   return {
     moveToFirstElement: () => {
-      n.value = 0, r(n.value) ? _() : l(n.value);
+      n.value = 0, c(n.value) ? _() : l(n.value);
     },
     moveToLastElement: () => {
-      n.value = s.value, r(n.value) ? y() : l(n.value);
+      n.value = s.value, c(n.value) ? y() : l(n.value);
     },
     moveToNextElement: _,
     moveToPreviousElement: y
   };
-}, Pe = k({
+}, Pe = N({
   name: "bento-listbox-single-select",
   components: {
     BentoListboxSingleSelectOption: De
@@ -260,20 +260,20 @@ const De = Ne.exports, q = ({ items: t, isOptionDisabled: e }, l) => {
   },
   emits: [o.SELECT, o.ENTER, o.SPACE, o.TAB],
   setup(t, { emit: e, slots: l }) {
-    const s = h([]), n = (x) => (v) => {
+    const s = C([]), n = (x) => (v) => {
       e(x, v);
-    }, r = (x) => s.value[x].$el.focus(), { moveToNextElement: m, moveToPreviousElement: u, moveToFirstElement: d, moveToLastElement: _ } = q(
+    }, c = (x) => s.value[x].$el.focus(), { moveToNextElement: m, moveToPreviousElement: u, moveToFirstElement: d, moveToLastElement: _ } = q(
       {
         items: be(t, "items"),
         isOptionDisabled: t.isOptionDisabled
       },
-      r
+      c
     ), y = {
-      [T.ARROW_UP]: u,
-      [T.ARROW_DOWN]: m,
-      [T.HOME]: d,
-      [T.END]: _
-    }, p = {
+      [h.ARROW_UP]: u,
+      [h.ARROW_DOWN]: m,
+      [h.HOME]: d,
+      [h.END]: _
+    }, E = {
       [o.SELECT]: n(o.SELECT),
       [o.SPACE]: n(o.SPACE),
       [o.TAB]: n(o.TAB),
@@ -289,20 +289,20 @@ const De = Ne.exports, q = ({ items: t, isOptionDisabled: e }, l) => {
       onOptionSelected: n,
       // Keyboard navigation
       listboxListeners: y,
-      listboxOptionListeners: p
+      listboxOptionListeners: E
     };
   }
 });
 var $e = function() {
   var e = this, l = e._self._c;
   return e._self._setupProxy, l("div", e._g({ directives: [{ name: "bento-keyboard-navigation-directive", rawName: "v-bento-keyboard-navigation-directive" }] }, e.listboxListeners), e._l(e.items, function(s) {
-    return l("bento-listbox-single-select-option", e._g({ key: s.value, ref: "listboxItemRef", refInFor: !0, attrs: { role: "option", option: s, disabled: e.isOptionDisabled ? e.isOptionDisabled(s) : null, selected: s.value === e.selectedValue }, scopedSlots: e._u([e._l(e.slots, function(n, r) {
-      return { key: r, fn: function(m) {
-        return [e._t(r, null, null, m)];
+    return l("bento-listbox-single-select-option", e._g({ key: s.value, ref: "listboxItemRef", refInFor: !0, attrs: { role: "option", option: s, disabled: e.isOptionDisabled ? e.isOptionDisabled(s) : null, selected: s.value === e.selectedValue }, scopedSlots: e._u([e._l(e.slots, function(n, c) {
+      return { key: c, fn: function(m) {
+        return [e._t(c, null, null, m)];
       } };
     })], null, !0) }, e.listboxOptionListeners));
   }), 1);
-}, we = [], Me = /* @__PURE__ */ I(
+}, we = [], Me = /* @__PURE__ */ R(
   Pe,
   $e,
   we,
@@ -312,15 +312,15 @@ var $e = function() {
   null,
   null
 );
-const Ge = Me.exports;
+const Fe = Me.exports;
 var z = /* @__PURE__ */ ((t) => (t.DISABLED = "disabled", t))(z || {}), D = /* @__PURE__ */ ((t) => (t.SELECT_CATEGORY = "select-category", t.UNSELECT_CATEGORY = "unselect-category", t))(D || {});
-const Fe = {
+const Ge = {
   "en-US": {
     categoryClosed: "{category} closed",
     categoryOpened: "{category} opened"
   }
-}, Ue = k({
-  i18n: { messages: Fe },
+}, Ue = N({
+  i18n: { messages: Ge },
   name: "bento-listbox-multi-select-category",
   components: {
     BentoCheckbox: Y,
@@ -366,57 +366,57 @@ const Fe = {
   },
   emits: [D.SELECT_CATEGORY, D.UNSELECT_CATEGORY],
   setup(t, { emit: e }) {
-    const l = h(!1), { t: s } = F(), n = c(
-      () => t.category.items.every((f) => t.isOptionDisabled(f))
-    ), r = c(() => ({
-      [`b-listbox-multi-select-category--${z.DISABLED}`]: n.value
-    })), m = (f) => {
+    const l = C(!1), { t: s } = G(), n = (f) => t.isOptionDisabled ? t.isOptionDisabled(f) : !1, c = r(
+      () => t.category.items.every((f) => n(f))
+    ), m = r(() => ({
+      [`b-listbox-multi-select-category--${z.DISABLED}`]: c.value
+    })), u = (f) => {
       f.preventDefault(), l.value = !l.value;
-    }, u = (f) => {
-      var E;
-      const S = t.isOptionDisabled(f), C = ((E = t.selectedItemsList) == null ? void 0 : E.includes(f.value)) || !1;
-      return { isDisabled: S, isPreSelected: C };
-    }, d = c(
+    }, d = (f) => {
+      var L;
+      const S = n(f), p = ((L = t.selectedItemsList) == null ? void 0 : L.includes(f.value)) || !1;
+      return { isDisabled: S, isPreSelected: p };
+    }, _ = r(
       () => t.category.items.filter((f) => {
-        const { isDisabled: S, isPreSelected: C } = u(f);
-        return S && C || !S;
+        const { isDisabled: S, isPreSelected: p } = d(f);
+        return S && p || !S;
       })
-    ), _ = c(
+    ), y = r(
       () => {
         var f;
-        return (f = d.value) == null ? void 0 : f.filter(
+        return (f = _.value) == null ? void 0 : f.filter(
           ({ value: S }) => {
-            var C;
-            return (C = t.selectedItemsList) == null ? void 0 : C.includes(S);
+            var p;
+            return (p = t.selectedItemsList) == null ? void 0 : p.includes(S);
           }
         );
       }
-    ), y = c(() => {
+    ), E = r(() => {
       const f = l.value ? "categoryOpened" : "categoryClosed";
       return s(f, { category: t.category.label });
-    }), p = () => {
+    }), x = () => {
       e(D.SELECT_CATEGORY);
-    }, x = () => {
+    }, v = () => {
       e(D.UNSELECT_CATEGORY);
-    }, { isAllSelected: v, isIndeterminate: A, toggleSelectAll: L } = W(
+    }, { isAllSelected: A, isIndeterminate: O, toggleSelectAll: T } = W(
+      y,
       _,
-      d,
-      p,
-      x
+      x,
+      v
     );
     return {
       // Values
-      chevronTitle: y,
-      conditionalClass: r,
-      hasAllPropsDisabled: n,
+      chevronTitle: E,
+      conditionalClass: m,
+      hasAllPropsDisabled: c,
       isOpen: l,
-      isAllSelected: v,
-      isIndeterminate: A,
+      isAllSelected: A,
+      isIndeterminate: O,
       // Enums
       BentoTypographyElement: $,
       // Methods
-      toggleOpen: m,
-      toggleSelectAll: L
+      toggleOpen: u,
+      toggleSelectAll: T
     };
   }
 });
@@ -425,19 +425,19 @@ var Ye = function() {
   return e._self._setupProxy, l("div", [l("bento-listbox-option", { staticClass: "b-listbox-multi-select-category__option", class: e.conditionalClass }, [l("bento-checkbox", { attrs: { "model-value": e.isAllSelected, indeterminate: e.isIndeterminate, disabled: e.hasAllPropsDisabled, "aria-label": e.category.label, value: e.category.value }, on: { "update:model-value": e.toggleSelectAll } }), l("span", { staticClass: "b-listbox-multi-select-category__label" }, [l("bento-typography", { staticClass: "b-listbox-multi-select-category__label-text", attrs: { el: e.BentoTypographyElement.SPAN } }, [e._v(" " + e._s(e.category.label) + " ")]), l("div", { staticClass: "b-listbox-multi-select-category__label-chevron", attrs: { "data-testid": "toggle-listbox" }, on: { "!click": function(s) {
     return e.toggleOpen.apply(null, arguments);
   } } }, [e.isOpen ? l("chevron-up-icon", { attrs: { "svg-title": e.chevronTitle } }) : l("chevron-down-icon", { attrs: { "svg-title": e.chevronTitle } })], 1)], 1)], 1), l("div", { directives: [{ name: "show", rawName: "v-show", value: e.isOpen, expression: "isOpen" }] }, [e._t("default")], 2)], 1);
-}, Ve = [], He = /* @__PURE__ */ I(
+}, Ve = [], He = /* @__PURE__ */ R(
   Ue,
   Ye,
   Ve,
   !1,
   null,
-  "3cf8eb6c",
+  "37db1b68",
   null,
   null
 );
 const Ke = He.exports;
-var B = /* @__PURE__ */ ((t) => (t.SELECT_CATEGORY = "select-category", t.TOGGLE_CHECKBOX_SELECTION = "toggle-checkbox-selection", t.UNSELECT_CATEGORY = "unselect-category", t))(B || {});
-const We = k({
+var I = /* @__PURE__ */ ((t) => (t.SELECT_CATEGORY = "select-category", t.TOGGLE_CHECKBOX_SELECTION = "toggle-checkbox-selection", t.UNSELECT_CATEGORY = "unselect-category", t))(I || {});
+const We = N({
   name: "listbox-multi-select-options",
   components: {
     BentoCheckbox: Y,
@@ -497,36 +497,36 @@ const We = k({
     }
   },
   emits: [
-    B.TOGGLE_CHECKBOX_SELECTION,
-    B.SELECT_CATEGORY,
-    B.UNSELECT_CATEGORY
+    I.TOGGLE_CHECKBOX_SELECTION,
+    I.SELECT_CATEGORY,
+    I.UNSELECT_CATEGORY
   ],
   setup(t, { emit: e }) {
     const l = (d) => {
-      e(B.TOGGLE_CHECKBOX_SELECTION, d);
+      e(I.TOGGLE_CHECKBOX_SELECTION, d);
     }, s = (d) => !!d.items, n = (d) => {
       const _ = t.isMultiLevel && t.searching;
       return d.description && (!t.isMultiLevel || _);
-    }, r = (d) => d.items ? !!d.items.find((_) => t.selectedItemsList.includes(_.value)) : t.selectedItemsList.includes(d.value), m = (d, _) => {
+    }, c = (d) => d.items ? !!d.items.find((_) => t.selectedItemsList.includes(_.value)) : t.selectedItemsList.includes(d.value), m = (d, _) => {
       if (s(_))
-        return e(d ? B.SELECT_CATEGORY : B.UNSELECT_CATEGORY, _);
+        return e(d ? I.SELECT_CATEGORY : I.UNSELECT_CATEGORY, _);
       l(_.value);
     };
     return {
       // Values
-      conditionalClasses: c(() => ({
+      conditionalClasses: r(() => ({
         "b-listbox-multi-select-options__category-option": t.categoryItems
       })),
       // Methods
       isCategory: s,
-      isOptionSelected: r,
+      isOptionSelected: c,
       shouldShowDescription: n,
       toggleCheckboxSelection: l,
       selectSearch: m,
       // Enums
       BentoListboxEvent: o,
       BentoTypographyElement: $,
-      ListboxMultiSelectOptionsEvent: B
+      ListboxMultiSelectOptionsEvent: I
     };
   }
 });
@@ -545,7 +545,7 @@ var qe = function() {
       return [l("span", { staticClass: "b-listbox-multi-select__option-text" }, [l("bento-typography", { attrs: { el: e.BentoTypographyElement.SPAN } }, [e._v(e._s(s.label))]), e.shouldShowDescription(s) ? l("bento-typography", { staticClass: "b-listbox-multi-select__option-description", attrs: { el: e.BentoTypographyElement.SPAN } }, [e._v(" " + e._s(s.description) + " ")]) : e._e()], 1)];
     }, null, s)], 2)]], 2);
   }), 0);
-}, ze = [], je = /* @__PURE__ */ I(
+}, ze = [], je = /* @__PURE__ */ R(
   We,
   qe,
   ze,
@@ -561,7 +561,7 @@ const Xe = je.exports, Ze = {
     numberOfTotalSelected: "{number} of {total} selected",
     selectAll: "Select all ({total})"
   }
-}, Je = k({
+}, Je = N({
   i18n: { messages: Ze },
   name: "bento-listbox-multi-select",
   components: {
@@ -614,7 +614,7 @@ const Xe = je.exports, Ze = {
   },
   emits: [o.SELECT],
   setup(t, { emit: e, slots: l }) {
-    const { t: s } = F(), n = h(null), r = h(null), m = h(null), u = h();
+    const { t: s } = G(), n = C(null), c = C(null), m = C(null), u = C();
     me(
       () => t.selectedValues,
       () => {
@@ -624,83 +624,83 @@ const Xe = je.exports, Ze = {
         immediate: !0
       }
     );
-    const d = c(() => !!t.items.find(({ items: i }) => !!i)), _ = c(() => d.value ? t.items.reduce((i, a) => (a.items ? i.push(...a.items.flat()) : i.push(a), i), []) : t.items), y = (i) => {
+    const d = r(() => !!t.items.find(({ items: i }) => !!i)), _ = r(() => d.value ? t.items.reduce((i, a) => (a.items ? i.push(...a.items.flat()) : i.push(a), i), []) : t.items), y = (i) => {
       var b;
       const a = t.isOptionDisabled(i), g = ((b = u.value) == null ? void 0 : b.includes(i.value)) || !1;
       return { isDisabled: a, isPreSelected: g };
-    }, p = c(
+    }, E = r(
       () => t.searching && d ? t.items : _.value.filter((i) => {
         const { isDisabled: a, isPreSelected: g } = y(i);
         return a && g || !a;
       })
-    ), x = c(
+    ), x = r(
       () => {
         var i;
-        return (i = p.value) == null ? void 0 : i.filter((a) => {
+        return (i = E.value) == null ? void 0 : i.filter((a) => {
           var g;
           return a.items && d.value && t.searching ? a.items.filter(
-            (O) => (t.selectedValues ?? []).includes(
-              O.value
+            (B) => (t.selectedValues ?? []).includes(
+              B.value
             )
           ).length === a.items.length : (g = u.value) == null ? void 0 : g.includes(a.value);
         });
       }
-    ), v = () => d.value && !t.searching ? p.value.length : t.items.length, A = c(() => {
+    ), v = () => d.value && !t.searching ? E.value.length : t.items.length, A = r(() => {
       var g;
       const i = v(), a = ((g = x.value) == null ? void 0 : g.length) || 0;
       return a === 0 ? s("selectAll", { total: i }) : a === i ? s("allSelected", { total: i }) : s("numberOfTotalSelected", { number: a, total: i });
-    }), L = (i) => {
+    }), O = (i) => {
       const a = (b) => {
-        const { isDisabled: O, isPreSelected: G } = y(b);
-        return O && G || !O;
+        const { isDisabled: B, isPreSelected: F } = y(b);
+        return B && F || !B;
       }, g = i.filter(a).filter((b) => !u.value.includes(b.value)).map(({ value: b }) => b);
       u.value = [...u.value, ...g], e(o.SELECT, u.value);
-    }, f = (i) => {
+    }, T = (i) => {
       const a = (b) => {
-        const { isDisabled: O, isPreSelected: G } = y(b);
-        return !(O && G);
+        const { isDisabled: B, isPreSelected: F } = y(b);
+        return !(B && F);
       }, g = i.filter(a).map(({ value: b }) => b);
       u.value = u.value.filter((b) => !(g != null && g.includes(b))), e(o.SELECT, u.value);
+    }, f = () => {
+      O(_.value);
     }, S = () => {
-      L(_.value);
-    }, C = () => {
-      f(_.value);
-    }, { isAllSelected: E, isIndeterminate: N, toggleSelectAll: j } = W(
+      T(_.value);
+    }, { isAllSelected: p, isIndeterminate: L, toggleSelectAll: j } = W(
       x,
-      p,
-      S,
-      C
+      E,
+      f,
+      S
     ), X = (i) => {
-      L(i.items);
+      O(i.items);
     }, Z = (i) => {
-      f(i.items);
+      T(i.items);
     }, J = (i, a) => {
       let g = !1;
       u.value = u.value.filter((b) => a === b ? (g = !0, !1) : !0), g || u.value.push(a), e(i, u.value);
-    }, M = c(() => {
-      const i = (b) => u.value.includes(b.value), a = (b) => !!b.find((O) => i(O));
+    }, M = r(() => {
+      const i = (b) => u.value.includes(b.value), a = (b) => !!b.find((B) => i(B));
       return t.items.filter((b) => b.items && a(b.items) ? !0 : i(b));
-    }), Q = c(() => {
+    }), Q = r(() => {
       var i;
       return ((i = M.value) == null ? void 0 : i.length) > 0;
-    }), ee = c(
+    }), ee = r(
       () => {
         var i, a;
         return ((i = x.value) == null ? void 0 : i.length) === ((a = _.value) == null ? void 0 : a.length);
       }
-    ), te = c(
+    ), te = r(
       () => n.value ? [n.value] : []
-    ), se = c(
+    ), se = r(
       () => {
         var i, a;
-        return (a = (i = r.value) == null ? void 0 : i.$children) != null && a.length ? r.value.$children : [];
+        return (a = (i = c.value) == null ? void 0 : i.$children) != null && a.length ? c.value.$children : [];
       }
-    ), le = c(
+    ), le = r(
       () => {
         var i, a;
         return (a = (i = m.value) == null ? void 0 : i.$children) != null && a.length ? m.value.$children : [];
       }
-    ), ne = c(() => ({ label: A, value: E })), oe = c(() => [
+    ), ne = r(() => ({ label: A, value: p })), oe = r(() => [
       ne,
       ...M.value,
       ..._.value
@@ -712,26 +712,26 @@ const Xe = je.exports, Ze = {
       ][i].$el.focus();
     }, { moveToNextElement: ae, moveToPreviousElement: ce, moveToFirstElement: re, moveToLastElement: ue } = q(
       {
-        items: h(oe),
+        items: C(oe),
         isOptionDisabled: t.isOptionDisabled
       },
       ie
     ), de = {
-      [T.ARROW_UP]: ce,
-      [T.ARROW_DOWN]: ae,
-      [T.HOME]: re,
-      [T.END]: ue
+      [h.ARROW_UP]: ce,
+      [h.ARROW_DOWN]: ae,
+      [h.HOME]: re,
+      [h.END]: ue
     };
     return {
       // Refs
       selectAllListboxItemsRef: n,
-      selectedListboxItemsRef: r,
+      selectedListboxItemsRef: c,
       listboxItemsRef: m,
       // Values
-      isAllSelected: E,
+      isAllSelected: p,
       isAllItemsIncludingDisabled: ee,
       isAnOptionSelected: Q,
-      isIndeterminate: N,
+      isIndeterminate: L,
       isMultiLevelSelect: d,
       flattenedItemsList: _,
       selectedItemsList: u,
@@ -762,8 +762,8 @@ var Qe = function() {
   }, e.BentoListboxEvent.ENTER, function(s) {
     return e.toggleCheckboxSelection(e.BentoListboxEvent.ENTER, s);
   }]), scopedSlots: e._u([e._l(e.slots, function(s, n) {
-    return { key: n, fn: function(r) {
-      return [e._t(n, null, null, r)];
+    return { key: n, fn: function(c) {
+      return [e._t(n, null, null, c)];
     } };
   })], null, !0) })], 1) : e._e(), l("div", { directives: [{ name: "show", rawName: "v-show", value: !e.isAllItemsIncludingDisabled, expression: "!isAllItemsIncludingDisabled" }] }, [l("hr", { staticClass: "b-listbox-multi-select__divider" }), l("listbox-multi-select-options", { ref: "listboxItemsRef", attrs: { items: e.items, "is-option-disabled": e.isOptionDisabled, "is-multi-level": e.isMultiLevelSelect, searching: e.searching, "selected-items-list": e.selectedItemsList }, on: e._d({ "toggle-checkbox-selection": function(s) {
     return e.toggleCheckboxSelection(e.BentoListboxEvent.SELECT, s);
@@ -774,11 +774,11 @@ var Qe = function() {
   }, e.BentoListboxEvent.ENTER, function(s) {
     return e.toggleCheckboxSelection(e.BentoListboxEvent.ENTER, s);
   }]), scopedSlots: e._u([e._l(e.slots, function(s, n) {
-    return { key: n, fn: function(r) {
-      return [e._t(n, null, null, r)];
+    return { key: n, fn: function(c) {
+      return [e._t(n, null, null, c)];
     } };
   })], null, !0) })], 1)], 1);
-}, et = [], tt = /* @__PURE__ */ I(
+}, et = [], tt = /* @__PURE__ */ R(
   Je,
   Qe,
   et,
@@ -793,10 +793,10 @@ const K = tt.exports, st = {
     showMore: "Show more",
     loading: "Loading"
   }
-}, lt = k({
+}, lt = N({
   name: "bento-listbox",
   components: {
-    BentoListboxSingleSelect: Ge,
+    BentoListboxSingleSelect: Fe,
     BentoListboxMultiSelect: K,
     BentoTypography: P,
     BentoLoadingIndicator: ve,
@@ -852,8 +852,8 @@ const K = tt.exports, st = {
      */
     lazyLoadType: {
       type: String,
-      default: R.NONE,
-      validator: (t) => Object.values(R).includes(t)
+      default: k.NONE,
+      validator: (t) => Object.values(k).includes(t)
     },
     /**
      * If enabled, the user will be able to select multiple items.
@@ -889,36 +889,36 @@ const K = tt.exports, st = {
     o.TAB
   ],
   setup(t, { emit: e, slots: l }) {
-    const { t: s } = F(), n = h(null), r = h([]), m = c(() => t.lazyLoadType !== R.AUTOMATIC), u = c(() => t.lazyLoadType === R.AUTOMATIC), d = c(
+    const { t: s } = G(), n = C(null), c = C([]), m = r(() => t.lazyLoadType !== k.AUTOMATIC), u = r(() => t.lazyLoadType === k.AUTOMATIC), d = r(
       () => m.value ? "true" : void 0
-    ), _ = c(
+    ), _ = r(
       () => m.value && t.loading ? "true" : "false"
-    ), y = c(
+    ), y = r(
       () => m.value ? "polite" : void 0
-    ), p = (E) => (N) => {
-      e(E, N);
+    ), E = (p) => (L) => {
+      e(p, L);
     }, x = () => {
       e(o.SHOW_MORE);
     }, v = ge(() => {
-      const E = n.value, N = E.scrollTop + E.clientHeight >= E.scrollHeight;
-      t.hasMoreItems && N && !t.loading && x();
-    }), A = c(() => {
-      var E;
-      return t.searching && ((E = t.items) == null ? void 0 : E.length) === 0;
-    }), L = c(
-      () => t.lazyLoadType === R.BUTTON && t.hasMoreItems
-    ), f = c(
+      const p = n.value, L = p.scrollTop + p.clientHeight >= p.scrollHeight;
+      t.hasMoreItems && L && !t.loading && x();
+    }), A = r(() => {
+      var p;
+      return t.searching && ((p = t.items) == null ? void 0 : p.length) === 0;
+    }), O = r(
+      () => t.lazyLoadType === k.BUTTON && t.hasMoreItems
+    ), T = r(
       () => t.loading ? V.LOADING : V.START
-    ), S = c(() => t.loading ? s("loading") : s("showMore")), C = {
-      [o.SELECT]: p(o.SELECT),
-      [o.SPACE]: p(o.SPACE),
-      [o.TAB]: p(o.TAB),
-      [o.ENTER]: p(o.ENTER)
+    ), f = r(() => t.loading ? s("loading") : s("showMore")), S = {
+      [o.SELECT]: E(o.SELECT),
+      [o.SPACE]: E(o.SPACE),
+      [o.TAB]: E(o.TAB),
+      [o.ENTER]: E(o.ENTER)
     };
     return {
       // Refs
       listboxRef: n,
-      listboxItemRef: r,
+      listboxItemRef: c,
       // a11y
       ariaAtomic: d,
       ariaBusy: _,
@@ -926,36 +926,36 @@ const K = tt.exports, st = {
       // Values
       hasAutomaticLazyLoader: u,
       isSearchResultEmpty: A,
-      loadingButtonState: f,
+      loadingButtonState: T,
       slots: l,
-      shouldDisplayShowMoreButton: L,
-      showMoreButtonText: S,
+      shouldDisplayShowMoreButton: O,
+      showMoreButtonText: f,
       // Enums
       BentoTypographyElement: $,
       BentoButtonVariant: fe,
-      BentoListboxLazyLoadType: R,
-      BentoKeyboardNavigationKeyDownEvent: T,
+      BentoListboxLazyLoadType: k,
+      BentoKeyboardNavigationKeyDownEvent: h,
       BentoListboxEvent: o,
       // Methods
-      onOptionSelected: p,
+      onOptionSelected: E,
       emitShowMoreOnScrollEnd: v,
       emitShowMore: x,
-      listboxListeners: C
+      listboxListeners: S
     };
   }
 });
 var nt = function() {
   var e = this, l = e._self._c;
   return e._self._setupProxy, l("div", { directives: [{ name: "bento-keyboard-navigation-directive", rawName: "v-bento-keyboard-navigation-directive" }], ref: "listboxRef", staticClass: "b-listbox", attrs: { id: e.id, role: "listbox", tabindex: "-1", "aria-busy": e.ariaBusy, "aria-atomic": e.ariaAtomic, "aria-label": e.ariaLabel, "aria-live": e.ariaLive }, on: { scroll: () => e.hasAutomaticLazyLoader ? e.emitShowMoreOnScrollEnd() : void 0 } }, [e.isSearchResultEmpty ? l("div", { staticClass: "b-listbox__empty-search-message" }, [l("bento-typography", { attrs: { el: e.BentoTypographyElement.SPAN } }, [e._v(e._s(e.noResultsMessage))])], 1) : [e.multiple ? [l("bento-listbox-multi-select", e._g({ ref: "listboxItemRef", attrs: { items: e.items, "selected-values": e.selectedValue, searching: e.searching, "is-option-disabled": e.isOptionDisabled }, scopedSlots: e._u([e._l(e.slots, function(s, n) {
-    return { key: n, fn: function(r) {
-      return [e._t(n, null, null, r)];
+    return { key: n, fn: function(c) {
+      return [e._t(n, null, null, c)];
     } };
   })], null, !0) }, e.listboxListeners))] : [l("bento-listbox-single-select", e._g({ ref: "listboxItemRef", attrs: { items: e.items, "selected-value": e.selectedValue, "is-option-disabled": e.isOptionDisabled }, scopedSlots: e._u([e._l(e.slots, function(s, n) {
-    return { key: n, fn: function(r) {
-      return [e._t(n, null, null, r)];
+    return { key: n, fn: function(c) {
+      return [e._t(n, null, null, c)];
     } };
   })], null, !0) }, e.listboxListeners))], e.shouldDisplayShowMoreButton ? l("div", { staticClass: "b-listbox__lazy-load" }, [l("bento-loading-button", { attrs: { state: e.loadingButtonState, variant: e.BentoButtonVariant.SECONDARY }, on: { click: e.emitShowMore } }, [e._v(" " + e._s(e.showMoreButtonText) + " ")])], 1) : e.loading ? l("div", { staticClass: "b-listbox__lazy-load" }, [l("bento-loading-indicator")], 1) : e._e()]], 2);
-}, ot = [], it = /* @__PURE__ */ I(
+}, ot = [], it = /* @__PURE__ */ R(
   lt,
   nt,
   ot,
@@ -970,6 +970,6 @@ export {
   gt as B,
   Be as C,
   o as a,
-  R as b
+  k as b
 };
-//# sourceMappingURL=listbox.f51e92cd.js.map
+//# sourceMappingURL=listbox.116ed0c1.js.map