@adyen/bento-vue2 1.3.0 → 1.4.0

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

@@ -1,15 +1,14 @@
-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 { computed as r, defineComponent as k, ref as C, onMounted as de, toRef as _e, watch as be } from "vue";
+import { B as $ } from "./index.45295dd3.js";
 import { BentoLoadingIndicator as ve } from "../loading-indicator.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 { u as F } from "./i18n.155748d6.js";
+import { B as h, a as G, d as me } 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.1c201f87.js";
+import { B as U } from "./checkbox.c7d791ed.js";
+import { C as fe, a as ge } from "./chevron-up.674ec2e5.js";
+import { B as pe, a as Y } from "./loading-button.429c8416.js";
 import "../assets/listbox.css";
-const W = (t, e, l, s) => {
+const K = (t, e, l, s) => {
   const n = r(
     () => {
       var u, d;
@@ -27,8 +26,8 @@ const W = (t, e, 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 || {}), k = /* @__PURE__ */ ((t) => (t.AUTOMATIC = "automatic", t.BUTTON = "button", t.NONE = "none", t))(k || {});
-const xe = N({
+var o = /* @__PURE__ */ ((t) => (t.SELECT = "select", t.SHOW_MORE = "show-more", t.ESCAPE = "escape-pressed", t.CLICK = "click", t.ENTER = "enter-pressed", t.SPACE = "space-pressed", t.TAB = "tab-pressed", t.CLOSE_DROPDOWN = "close-dropdown", t))(o || {}), D = /* @__PURE__ */ ((t) => (t.AUTOMATIC = "automatic", t.BUTTON = "button", t.NONE = "none", t))(D || {});
+const Ee = k({
   name: "bento-listbox-option",
   props: {
     /**
@@ -56,13 +55,13 @@ const xe = N({
       onClick: (c) => {
         e(o.CLICK, c);
       },
-      onOptionSelected: (c, m) => {
-        e(c, m);
+      onOptionSelected: (c, v) => {
+        e(c, v);
       }
     };
   }
 });
-var Se = function() {
+var xe = function() {
   var e = this, l = e._self._c;
   return e._self._setupProxy, l("label", e._b({ staticClass: "b-listbox-option", class: e.conditionalClasses, attrs: { role: "option" }, on: { click: e.onClick, keydown: [function(s) {
     return !s.type.indexOf("key") && e._k(s.keyCode, "enter", 13, s.key, "Enter") ? null : e.onOptionSelected(e.BentoListboxEvent.ENTER, s);
@@ -71,42 +70,42 @@ 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__ */ R(
+}, ye = [], Se = /* @__PURE__ */ R(
+  Ee,
   xe,
-  Se,
-  Ce,
+  ye,
   !1,
   null,
   "d7fb415c",
   null,
   null
 );
-const w = he.exports;
-let H = 0;
-const Te = {
+const P = Se.exports;
+let V = 0;
+const Ce = {
   beforeCreate() {
-    this.uuid = H.toString(), H += 1;
+    this.uuid = V.toString(), V += 1;
   }
 };
-var Ae = function() {
+var he = function() {
   var e = this, l = e._self._c;
   return l("svg", e._b({ attrs: { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" } }, "svg", e.$attrs, !1), [e.$attrs["svg-title"] ? l("title", [e._v(e._s(e.$attrs["svg-title"]))]) : e._e(), l("path", { attrs: { fill: "#00112C", "fill-rule": "evenodd", d: "M14.5303 4.53033C14.8232 4.23744 14.8232 3.76256 14.5303 3.46967C14.2374 3.17678 13.7626 3.17678 13.4697 3.46967L6 10.9393L2.53033 7.46967C2.23744 7.17678 1.76256 7.17678 1.46967 7.46967C1.17678 7.76256 1.17678 8.23744 1.46967 8.53033L5.46967 12.5303C5.50628 12.5669 5.54574 12.599 5.58732 12.6264C5.87844 12.8186 6.27405 12.7866 6.53033 12.5303L14.5303 4.53033Z", "clip-rule": "evenodd" } })]);
-}, Oe = [], Le = /* @__PURE__ */ R(
-  Te,
-  Ae,
-  Oe,
+}, Le = [], Oe = /* @__PURE__ */ R(
+  Ce,
+  he,
+  Le,
   !1,
   null,
   "4687fbd0",
   null,
   null
 );
-const Be = Le.exports, Ie = N({
+const Te = Oe.exports, Ae = k({
   name: "bento-listbox-single-select-option",
   components: {
-    BentoListboxOption: w,
-    BentoTypography: P,
-    CheckmarkIcon: Be
+    BentoListboxOption: P,
+    BentoTypography: $,
+    CheckmarkIcon: Te
   },
   props: {
     /**
@@ -128,8 +127,8 @@ const Be = Le.exports, Ie = N({
   },
   emits: [o.ENTER, o.SELECT, o.SPACE, o.TAB],
   setup(t, { emit: e }) {
-    const l = (m) => {
-      t.disabled || e(m, t.option.value);
+    const l = (v) => {
+      t.disabled || e(v, t.option.value);
     }, s = r(() => t.disabled ? !0 : null), n = r(() => t.selected ? !0 : null), c = r(() => t.disabled ? -1 : 0);
     return {
       // Values
@@ -137,14 +136,13 @@ const Be = Le.exports, Ie = N({
       ariaSelected: n,
       tabIndex: c,
       // Enums
-      BentoTypographyElement: $,
       BentoListboxEvent: o,
       // Events
       onOptionSelected: l
     };
   }
 });
-var Re = function() {
+var Ie = function() {
   var e = this, l = e._self._c;
   return e._self._setupProxy, l("bento-listbox-option", { staticClass: "b-listbox-single-select-option", attrs: { disabled: e.disabled, selected: e.selected, "aria-selected": e.ariaSelected, "aria-disabled": e.ariaDisabled, tabindex: e.tabIndex }, on: e._d({ click: function(s) {
     return e.onOptionSelected(e.BentoListboxEvent.SELECT);
@@ -155,25 +153,25 @@ var Re = function() {
   }, e.BentoListboxEvent.TAB, function(s) {
     return e.onOptionSelected(e.BentoListboxEvent.TAB);
   }]) }, [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)];
+    return [l("span", { staticClass: "b-listbox-single-select-option__text" }, [l("bento-typography", { attrs: { el: "span" } }, [e._v(e._s(e.option.label))]), e.option.description ? l("bento-typography", { staticClass: "b-listbox-single-select-option__description", attrs: { el: "span" } }, [e._v(" " + e._s(e.option.description) + " ")]) : e._e()], 1)];
   }, null, e.option), l("span", { staticClass: "b-listbox-single-select-option__check-icon" }, [l("checkmark-icon", { directives: [{ name: "show", rawName: "v-show", value: e.selected, expression: "selected" }], attrs: { "svg-title": "selected" } })], 1)], 2);
-}, ke = [], Ne = /* @__PURE__ */ R(
+}, Be = [], Re = /* @__PURE__ */ R(
+  Ae,
   Ie,
-  Re,
-  ke,
+  Be,
   !1,
   null,
-  "cd2f2938",
+  "092ed5ee",
   null,
   null
 );
-const De = Ne.exports, q = ({ items: t, isOptionDisabled: e }, l) => {
+const ke = Re.exports, W = ({ items: t, isOptionDisabled: e }, l) => {
   const s = r(() => t.value.length - 1), n = C(0);
-  _e(() => {
-    e && (n.value = t.value.findIndex((v) => !e(v)));
+  de(() => {
+    e && (n.value = t.value.findIndex((m) => !e(m)));
   });
-  const c = (v) => !e || !!e && e(t.value[v]), m = (v) => !e || !!e && !e(t.value[v]), u = (v) => {
-    switch (v) {
+  const c = (m) => !e || !!e && e(t.value[m]), v = (m) => !e || !!e && !e(t.value[m]), u = (m) => {
+    switch (m) {
       case "increase":
         n.value += 1;
         break;
@@ -181,27 +179,27 @@ const De = Ne.exports, q = ({ items: t, isOptionDisabled: e }, l) => {
         n.value -= 1;
         break;
     }
-  }, d = ({ edgeCaseItem: v, isItemBeforeEdgeCaseItem: A }, O, T) => {
-    n.value !== v && (A ? m(v) && u(T) : (u(T), c(n.value) && O()), l(n.value));
+  }, d = ({ edgeCaseItem: m, isItemBeforeEdgeCaseItem: O }, T, L) => {
+    n.value !== m && (O ? v(m) && u(L) : (u(L), c(n.value) && T()), l(n.value));
   }, _ = () => {
-    const v = n.value === s.value - 2;
+    const m = n.value === s.value - 2;
     d(
       {
-        isItemBeforeEdgeCaseItem: v,
+        isItemBeforeEdgeCaseItem: m,
         edgeCaseItem: s.value
       },
       _,
       "increase"
       /* INCREASE */
     );
-  }, y = () => {
-    const v = n.value === 1;
+  }, x = () => {
+    const m = n.value === 1;
     d(
       {
         edgeCaseItem: 0,
-        isItemBeforeEdgeCaseItem: v
+        isItemBeforeEdgeCaseItem: m
       },
-      y,
+      x,
       "decrease"
       /* DECREASE */
     );
@@ -211,17 +209,17 @@ const De = Ne.exports, q = ({ items: t, isOptionDisabled: e }, l) => {
       n.value = 0, c(n.value) ? _() : l(n.value);
     },
     moveToLastElement: () => {
-      n.value = s.value, c(n.value) ? y() : l(n.value);
+      n.value = s.value, c(n.value) ? x() : l(n.value);
     },
     moveToNextElement: _,
-    moveToPreviousElement: y
+    moveToPreviousElement: x
   };
-}, Pe = N({
+}, De = k({
   name: "bento-listbox-single-select",
   components: {
-    BentoListboxSingleSelectOption: De
+    BentoListboxSingleSelectOption: ke
   },
-  directives: { BentoKeyboardNavigationDirective: U },
+  directives: { BentoKeyboardNavigationDirective: G },
   inheritAttrs: !1,
   props: {
     /**
@@ -260,17 +258,17 @@ 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 = C([]), n = (x) => (v) => {
-      e(x, v);
-    }, c = (x) => s.value[x].$el.focus(), { moveToNextElement: m, moveToPreviousElement: u, moveToFirstElement: d, moveToLastElement: _ } = q(
+    const s = C([]), n = (y) => (m) => {
+      e(y, m);
+    }, c = (y) => s.value[y].$el.focus(), { moveToNextElement: v, moveToPreviousElement: u, moveToFirstElement: d, moveToLastElement: _ } = W(
       {
-        items: be(t, "items"),
+        items: _e(t, "items"),
         isOptionDisabled: t.isOptionDisabled
       },
       c
-    ), y = {
+    ), x = {
       [h.ARROW_UP]: u,
-      [h.ARROW_DOWN]: m,
+      [h.ARROW_DOWN]: v,
       [h.HOME]: d,
       [h.END]: _
     }, E = {
@@ -288,46 +286,46 @@ const De = Ne.exports, q = ({ items: t, isOptionDisabled: e }, l) => {
       // Methods
       onOptionSelected: n,
       // Keyboard navigation
-      listboxListeners: y,
+      listboxListeners: x,
       listboxOptionListeners: E
     };
   }
 });
-var $e = function() {
+var Ne = function() {
   var e = this, l = e._self._c;
   return e._self._setupProxy, l("div", e._g({ directives: [{ name: "bento-keyboard-navigation-directive", rawName: "v-bento-keyboard-navigation-directive" }] }, e.listboxListeners), e._l(e.items, function(s) {
     return l("bento-listbox-single-select-option", e._g({ key: s.value, ref: "listboxItemRef", refInFor: !0, attrs: { role: "option", option: s, disabled: e.isOptionDisabled ? e.isOptionDisabled(s) : null, selected: s.value === e.selectedValue }, scopedSlots: e._u([e._l(e.slots, function(n, c) {
-      return { key: c, fn: function(m) {
-        return [e._t(c, null, null, m)];
+      return { key: c, fn: function(v) {
+        return [e._t(c, null, null, v)];
       } };
     })], null, !0) }, e.listboxOptionListeners));
   }), 1);
-}, we = [], Me = /* @__PURE__ */ R(
-  Pe,
+}, $e = [], Pe = /* @__PURE__ */ R(
+  De,
+  Ne,
   $e,
-  we,
   !1,
   null,
   null,
   null,
   null
 );
-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 Ge = {
+const we = Pe.exports;
+var q = /* @__PURE__ */ ((t) => (t.DISABLED = "disabled", t))(q || {}), N = /* @__PURE__ */ ((t) => (t.SELECT_CATEGORY = "select-category", t.UNSELECT_CATEGORY = "unselect-category", t))(N || {});
+const Me = {
   "en-US": {
     categoryClosed: "{category} closed",
     categoryOpened: "{category} opened"
   }
-}, Ue = N({
-  i18n: { messages: Ge },
+}, Fe = k({
+  i18n: { messages: Me },
   name: "bento-listbox-multi-select-category",
   components: {
-    BentoCheckbox: Y,
-    BentoTypography: P,
-    BentoListboxOption: w,
-    ChevronDownIcon: pe,
-    ChevronUpIcon: Ee
+    BentoCheckbox: U,
+    BentoTypography: $,
+    BentoListboxOption: P,
+    ChevronDownIcon: fe,
+    ChevronUpIcon: ge
   },
   props: {
     /**
@@ -364,24 +362,24 @@ const Ge = {
       default: () => []
     }
   },
-  emits: [D.SELECT_CATEGORY, D.UNSELECT_CATEGORY],
+  emits: [N.SELECT_CATEGORY, N.UNSELECT_CATEGORY],
   setup(t, { emit: e }) {
-    const l = C(!1), { t: s } = G(), n = (f) => t.isOptionDisabled ? t.isOptionDisabled(f) : !1, c = r(
+    const l = C(!1), { t: s } = F(), 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
+    ), v = r(() => ({
+      [`b-listbox-multi-select-category--${q.DISABLED}`]: c.value
     })), u = (f) => {
       f.preventDefault(), l.value = !l.value;
     }, d = (f) => {
-      var L;
-      const S = n(f), p = ((L = t.selectedItemsList) == null ? void 0 : L.includes(f.value)) || !1;
+      var A;
+      const S = n(f), p = ((A = t.selectedItemsList) == null ? void 0 : A.includes(f.value)) || !1;
       return { isDisabled: S, isPreSelected: p };
     }, _ = r(
       () => t.category.items.filter((f) => {
         const { isDisabled: S, isPreSelected: p } = d(f);
         return S && p || !S;
       })
-    ), y = r(
+    ), x = r(
       () => {
         var f;
         return (f = _.value) == null ? void 0 : f.filter(
@@ -394,56 +392,54 @@ const Ge = {
     ), E = r(() => {
       const f = l.value ? "categoryOpened" : "categoryClosed";
       return s(f, { category: t.category.label });
-    }), x = () => {
-      e(D.SELECT_CATEGORY);
-    }, v = () => {
-      e(D.UNSELECT_CATEGORY);
-    }, { isAllSelected: A, isIndeterminate: O, toggleSelectAll: T } = W(
-      y,
-      _,
+    }), y = () => {
+      e(N.SELECT_CATEGORY);
+    }, m = () => {
+      e(N.UNSELECT_CATEGORY);
+    }, { isAllSelected: O, isIndeterminate: T, toggleSelectAll: L } = K(
       x,
-      v
+      _,
+      y,
+      m
     );
     return {
       // Values
       chevronTitle: E,
-      conditionalClass: m,
+      conditionalClass: v,
       hasAllPropsDisabled: c,
       isOpen: l,
-      isAllSelected: A,
-      isIndeterminate: O,
-      // Enums
-      BentoTypographyElement: $,
+      isAllSelected: O,
+      isIndeterminate: T,
       // Methods
       toggleOpen: u,
-      toggleSelectAll: T
+      toggleSelectAll: L
     };
   }
 });
-var Ye = function() {
+var Ge = function() {
   var e = this, l = e._self._c;
-  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._self._setupProxy, l("div", [l("bento-listbox-option", { staticClass: "b-listbox-multi-select-category__option", class: e.conditionalClass }, [l("bento-checkbox", { attrs: { "model-value": e.isAllSelected, indeterminate: e.isIndeterminate, disabled: e.hasAllPropsDisabled, "aria-label": e.category.label, value: e.category.value }, on: { "update:model-value": e.toggleSelectAll } }), l("span", { staticClass: "b-listbox-multi-select-category__label" }, [l("bento-typography", { staticClass: "b-listbox-multi-select-category__label-text", attrs: { el: "span" } }, [e._v(" " + e._s(e.category.label) + " ")]), l("div", { staticClass: "b-listbox-multi-select-category__label-chevron", attrs: { "data-testid": "toggle-listbox" }, on: { "!click": function(s) {
     return e.toggleOpen.apply(null, arguments);
   } } }, [e.isOpen ? l("chevron-up-icon", { attrs: { "svg-title": e.chevronTitle } }) : l("chevron-down-icon", { attrs: { "svg-title": e.chevronTitle } })], 1)], 1)], 1), l("div", { directives: [{ name: "show", rawName: "v-show", value: e.isOpen, expression: "isOpen" }] }, [e._t("default")], 2)], 1);
-}, Ve = [], He = /* @__PURE__ */ R(
+}, Ue = [], Ye = /* @__PURE__ */ R(
+  Fe,
+  Ge,
   Ue,
-  Ye,
-  Ve,
   !1,
   null,
-  "37db1b68",
+  "360ce3ac",
   null,
   null
 );
-const Ke = He.exports;
-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({
+const Ve = Ye.exports;
+var B = /* @__PURE__ */ ((t) => (t.SELECT_CATEGORY = "select-category", t.TOGGLE_CHECKBOX_SELECTION = "toggle-checkbox-selection", t.UNSELECT_CATEGORY = "unselect-category", t))(B || {});
+const He = k({
   name: "listbox-multi-select-options",
   components: {
-    BentoCheckbox: Y,
-    BentoListboxOption: w,
-    BentoTypography: P,
-    ListboxMultiSelectCategory: Ke
+    BentoCheckbox: U,
+    BentoListboxOption: P,
+    BentoTypography: $,
+    ListboxMultiSelectCategory: Ve
   },
   props: {
     /**
@@ -497,19 +493,19 @@ const We = N({
     }
   },
   emits: [
-    I.TOGGLE_CHECKBOX_SELECTION,
-    I.SELECT_CATEGORY,
-    I.UNSELECT_CATEGORY
+    B.TOGGLE_CHECKBOX_SELECTION,
+    B.SELECT_CATEGORY,
+    B.UNSELECT_CATEGORY
   ],
   setup(t, { emit: e }) {
     const l = (d) => {
-      e(I.TOGGLE_CHECKBOX_SELECTION, d);
+      e(B.TOGGLE_CHECKBOX_SELECTION, d);
     }, s = (d) => !!d.items, n = (d) => {
       const _ = t.isMultiLevel && t.searching;
       return d.description && (!t.isMultiLevel || _);
-    }, c = (d) => d.items ? !!d.items.find((_) => t.selectedItemsList.includes(_.value)) : t.selectedItemsList.includes(d.value), m = (d, _) => {
+    }, c = (d) => d.items ? !!d.items.find((_) => t.selectedItemsList.includes(_.value)) : t.selectedItemsList.includes(d.value), v = (d, _) => {
       if (s(_))
-        return e(d ? I.SELECT_CATEGORY : I.UNSELECT_CATEGORY, _);
+        return e(d ? B.SELECT_CATEGORY : B.UNSELECT_CATEGORY, _);
       l(_.value);
     };
     return {
@@ -522,19 +518,18 @@ const We = N({
       isOptionSelected: c,
       shouldShowDescription: n,
       toggleCheckboxSelection: l,
-      selectSearch: m,
+      selectSearch: v,
       // Enums
       BentoListboxEvent: o,
-      BentoTypographyElement: $,
-      ListboxMultiSelectOptionsEvent: I
+      ListboxMultiSelectOptionsEvent: B
     };
   }
 });
-var qe = function() {
+var Ke = function() {
   var e = this, l = e._self._c;
   return e._self._setupProxy, l("div", e._l(e.items, function(s) {
     return l("div", { key: `selected-${s.value}` }, [e.searching && e.isMultiLevel ? [l("bento-listbox-option", { staticClass: "b-listbox-multi-select-options", class: e.conditionalClasses, attrs: { disabled: e.isOptionDisabled ? e.isOptionDisabled(s) : null } }, [l("bento-checkbox", { attrs: { "model-value": e.isOptionSelected(s), "aria-label": s.label, disabled: e.isOptionDisabled ? e.isOptionDisabled(s) : null, value: s.value }, on: { "update:model-value": (n) => e.selectSearch(n, s) } }), e._t("default", function() {
-      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)];
+      return [l("span", { staticClass: "b-listbox-multi-select__option-text" }, [l("bento-typography", { attrs: { el: "span" } }, [e._v(e._s(s.label))]), e.shouldShowDescription(s) ? l("bento-typography", { staticClass: "b-listbox-multi-select__option-description", attrs: { el: "span" } }, [e._v(" " + e._s(s.description) + " ")]) : e._e()], 1)];
     }, null, s)], 2)] : [s.items ? [l("listbox-multi-select-category", { attrs: { category: s, "is-option-disabled": e.isOptionDisabled, "selected-items-list": e.selectedItemsList }, on: { "select-category": function(n) {
       return e.$emit(e.ListboxMultiSelectOptionsEvent.SELECT_CATEGORY, s);
     }, "unselect-category": function(n) {
@@ -542,35 +537,35 @@ var qe = function() {
     } } }, [l("listbox-multi-select-options", { attrs: { "category-items": "", items: s.items, "is-option-disabled": e.isOptionDisabled, "is-multi-level": e.isMultiLevel, "selected-items-list": e.selectedItemsList, searching: e.searching }, on: { "toggle-checkbox-selection": (n) => e.toggleCheckboxSelection(n) } })], 1)] : l("bento-listbox-option", { staticClass: "b-listbox-multi-select-options", class: e.conditionalClasses, attrs: { disabled: e.isOptionDisabled ? e.isOptionDisabled(s) : null } }, [l("bento-checkbox", { attrs: { "model-value": e.selectedItemsList, "aria-label": s.label, disabled: e.isOptionDisabled ? e.isOptionDisabled(s) : null, value: s.value }, on: { "update:model-value": function(n) {
       return e.toggleCheckboxSelection(s.value);
     } } }), e._t("default", 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)];
+      return [l("span", { staticClass: "b-listbox-multi-select__option-text" }, [l("bento-typography", { attrs: { el: "span" } }, [e._v(e._s(s.label))]), e.shouldShowDescription(s) ? l("bento-typography", { staticClass: "b-listbox-multi-select__option-description", attrs: { el: "span" } }, [e._v(" " + e._s(s.description) + " ")]) : e._e()], 1)];
     }, null, s)], 2)]], 2);
   }), 0);
-}, ze = [], je = /* @__PURE__ */ R(
+}, We = [], qe = /* @__PURE__ */ R(
+  He,
+  Ke,
   We,
-  qe,
-  ze,
   !1,
   null,
-  "e5e8e294",
+  "23f75bdb",
   null,
   null
 );
-const Xe = je.exports, Ze = {
+const ze = qe.exports, je = {
   "en-US": {
     allSelected: "All selected ({total})",
     numberOfTotalSelected: "{number} of {total} selected",
     selectAll: "Select all ({total})"
   }
-}, Je = N({
-  i18n: { messages: Ze },
+}, Xe = k({
+  i18n: { messages: je },
   name: "bento-listbox-multi-select",
   components: {
-    BentoCheckbox: Y,
-    BentoListboxOption: w,
-    BentoTypography: P,
-    ListboxMultiSelectOptions: Xe
+    BentoCheckbox: U,
+    BentoListboxOption: P,
+    BentoTypography: $,
+    ListboxMultiSelectOptions: ze
   },
-  directives: { BentoKeyboardNavigationDirective: U },
+  directives: { BentoKeyboardNavigationDirective: G },
   props: {
     /**
      * Function that allows the options to be disabled
@@ -614,8 +609,8 @@ const Xe = je.exports, Ze = {
   },
   emits: [o.SELECT],
   setup(t, { emit: e, slots: l }) {
-    const { t: s } = G(), n = C(null), c = C(null), m = C(null), u = C();
-    me(
+    const { t: s } = F(), n = C(null), c = C(null), v = C(null), u = C();
+    be(
       () => t.selectedValues,
       () => {
         u.value = [...t.selectedValues ?? []];
@@ -624,136 +619,135 @@ const Xe = je.exports, Ze = {
         immediate: !0
       }
     );
-    const d = r(() => !!t.items.find(({ items: i }) => !!i)), _ = r(() => d.value ? t.items.reduce((i, a) => (a.items ? i.push(...a.items.flat()) : i.push(a), i), []) : t.items), 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), x = (i) => {
       var b;
       const a = t.isOptionDisabled(i), g = ((b = u.value) == null ? void 0 : b.includes(i.value)) || !1;
       return { isDisabled: a, isPreSelected: g };
     }, E = r(
       () => t.searching && d ? t.items : _.value.filter((i) => {
-        const { isDisabled: a, isPreSelected: g } = y(i);
+        const { isDisabled: a, isPreSelected: g } = x(i);
         return a && g || !a;
       })
-    ), x = r(
+    ), y = r(
       () => {
         var i;
         return (i = E.value) == null ? void 0 : i.filter((a) => {
           var g;
           return a.items && d.value && t.searching ? a.items.filter(
-            (B) => (t.selectedValues ?? []).includes(
-              B.value
+            (I) => (t.selectedValues ?? []).includes(
+              I.value
             )
           ).length === a.items.length : (g = u.value) == null ? void 0 : g.includes(a.value);
         });
       }
-    ), v = () => d.value && !t.searching ? E.value.length : t.items.length, A = r(() => {
+    ), m = () => d.value && !t.searching ? E.value.length : t.items.length, O = r(() => {
       var g;
-      const i = v(), a = ((g = x.value) == null ? void 0 : g.length) || 0;
+      const i = m(), a = ((g = y.value) == null ? void 0 : g.length) || 0;
       return a === 0 ? s("selectAll", { total: i }) : a === i ? s("allSelected", { total: i }) : s("numberOfTotalSelected", { number: a, total: i });
-    }), O = (i) => {
+    }), T = (i) => {
       const a = (b) => {
-        const { isDisabled: B, isPreSelected: F } = y(b);
-        return B && F || !B;
+        const { isDisabled: I, isPreSelected: M } = x(b);
+        return I && M || !I;
       }, g = i.filter(a).filter((b) => !u.value.includes(b.value)).map(({ value: b }) => b);
       u.value = [...u.value, ...g], e(o.SELECT, u.value);
-    }, T = (i) => {
+    }, L = (i) => {
       const a = (b) => {
-        const { isDisabled: B, isPreSelected: F } = y(b);
-        return !(B && F);
+        const { isDisabled: I, isPreSelected: M } = x(b);
+        return !(I && M);
       }, g = i.filter(a).map(({ value: b }) => b);
       u.value = u.value.filter((b) => !(g != null && g.includes(b))), e(o.SELECT, u.value);
     }, f = () => {
-      O(_.value);
-    }, S = () => {
       T(_.value);
-    }, { isAllSelected: p, isIndeterminate: L, toggleSelectAll: j } = W(
-      x,
+    }, S = () => {
+      L(_.value);
+    }, { isAllSelected: p, isIndeterminate: A, toggleSelectAll: z } = K(
+      y,
       E,
       f,
       S
-    ), X = (i) => {
-      O(i.items);
-    }, Z = (i) => {
+    ), j = (i) => {
       T(i.items);
-    }, J = (i, a) => {
+    }, X = (i) => {
+      L(i.items);
+    }, Z = (i, a) => {
       let g = !1;
       u.value = u.value.filter((b) => a === b ? (g = !0, !1) : !0), g || u.value.push(a), e(i, u.value);
-    }, M = r(() => {
-      const i = (b) => u.value.includes(b.value), a = (b) => !!b.find((B) => i(B));
+    }, w = r(() => {
+      const i = (b) => u.value.includes(b.value), a = (b) => !!b.find((I) => i(I));
       return t.items.filter((b) => b.items && a(b.items) ? !0 : i(b));
-    }), Q = r(() => {
+    }), J = r(() => {
       var i;
-      return ((i = M.value) == null ? void 0 : i.length) > 0;
-    }), ee = r(
+      return ((i = w.value) == null ? void 0 : i.length) > 0;
+    }), Q = r(
       () => {
         var i, a;
-        return ((i = x.value) == null ? void 0 : i.length) === ((a = _.value) == null ? void 0 : a.length);
+        return ((i = y.value) == null ? void 0 : i.length) === ((a = _.value) == null ? void 0 : a.length);
       }
-    ), te = r(
+    ), ee = r(
       () => n.value ? [n.value] : []
-    ), se = r(
+    ), te = r(
       () => {
         var i, a;
         return (a = (i = c.value) == null ? void 0 : i.$children) != null && a.length ? c.value.$children : [];
       }
-    ), le = r(
+    ), se = r(
       () => {
         var i, a;
-        return (a = (i = m.value) == null ? void 0 : i.$children) != null && a.length ? m.value.$children : [];
+        return (a = (i = v.value) == null ? void 0 : i.$children) != null && a.length ? v.value.$children : [];
       }
-    ), ne = r(() => ({ label: A, value: p })), oe = r(() => [
-      ne,
-      ...M.value,
+    ), le = r(() => ({ label: O, value: p })), ne = r(() => [
+      le,
+      ...w.value,
       ..._.value
-    ]), ie = (i) => {
+    ]), oe = (i) => {
       [
+        ...ee.value,
         ...te.value,
-        ...se.value,
-        ...le.value
+        ...se.value
       ][i].$el.focus();
-    }, { moveToNextElement: ae, moveToPreviousElement: ce, moveToFirstElement: re, moveToLastElement: ue } = q(
+    }, { moveToNextElement: ie, moveToPreviousElement: ae, moveToFirstElement: ce, moveToLastElement: re } = W(
       {
-        items: C(oe),
+        items: C(ne),
         isOptionDisabled: t.isOptionDisabled
       },
-      ie
-    ), de = {
-      [h.ARROW_UP]: ce,
-      [h.ARROW_DOWN]: ae,
-      [h.HOME]: re,
-      [h.END]: ue
+      oe
+    ), ue = {
+      [h.ARROW_UP]: ae,
+      [h.ARROW_DOWN]: ie,
+      [h.HOME]: ce,
+      [h.END]: re
     };
     return {
       // Refs
       selectAllListboxItemsRef: n,
       selectedListboxItemsRef: c,
-      listboxItemsRef: m,
+      listboxItemsRef: v,
       // Values
       isAllSelected: p,
-      isAllItemsIncludingDisabled: ee,
-      isAnOptionSelected: Q,
-      isIndeterminate: L,
+      isAllItemsIncludingDisabled: Q,
+      isAnOptionSelected: J,
+      isIndeterminate: A,
       isMultiLevelSelect: d,
       flattenedItemsList: _,
       selectedItemsList: u,
-      selectAllCheckboxText: A,
-      selectedOptions: M,
+      selectAllCheckboxText: O,
+      selectedOptions: w,
       slots: l,
       // Enums
-      BentoTypographyElement: $,
       BentoListboxEvent: o,
       // Methods
-      selectAllCategory: X,
-      toggleCheckboxSelection: J,
-      toggleSelectAll: j,
-      unselectAllCategory: Z,
+      selectAllCategory: j,
+      toggleCheckboxSelection: Z,
+      toggleSelectAll: z,
+      unselectAllCategory: X,
       // Events
-      listboxListeners: de
+      listboxListeners: ue
     };
   }
 });
-var Qe = function() {
+var Ze = function() {
   var e = this, l = e._self._c;
-  return e._self._setupProxy, l("div", e._g({ directives: [{ name: "bento-keyboard-navigation-directive", rawName: "v-bento-keyboard-navigation-directive" }], staticClass: "b-listbox-multi-select" }, e.listboxListeners), [l("bento-listbox-option", { ref: "selectAllListboxItemsRef", staticClass: "b-listbox-multi-select__option" }, [l("bento-checkbox", { attrs: { "aria-label": e.selectAllCheckboxText, "model-value": e.isAllSelected, indeterminate: e.isIndeterminate }, on: { "update:model-value": e.toggleSelectAll } }), l("bento-typography", { attrs: { el: e.BentoTypographyElement.SPAN } }, [e._v(" " + e._s(e.selectAllCheckboxText) + " ")])], 1), e.isAnOptionSelected ? l("div", [l("hr", { staticClass: "b-listbox-multi-select__divider" }), l("listbox-multi-select-options", { ref: "selectedListboxItemsRef", attrs: { items: e.selectedOptions, "is-option-disabled": e.isOptionDisabled, "is-multi-level": e.isMultiLevelSelect, searching: e.searching, "selected-items-list": e.selectedItemsList }, on: e._d({ "select-category": e.selectAllCategory, "unselect-category": e.unselectAllCategory, "toggle-checkbox-selection": function(s) {
+  return e._self._setupProxy, l("div", e._g({ directives: [{ name: "bento-keyboard-navigation-directive", rawName: "v-bento-keyboard-navigation-directive" }], staticClass: "b-listbox-multi-select" }, e.listboxListeners), [l("bento-listbox-option", { ref: "selectAllListboxItemsRef", staticClass: "b-listbox-multi-select__option" }, [l("bento-checkbox", { attrs: { "aria-label": e.selectAllCheckboxText, "model-value": e.isAllSelected, indeterminate: e.isIndeterminate }, on: { "update:model-value": e.toggleSelectAll } }), l("bento-typography", { attrs: { el: "span" } }, [e._v(" " + e._s(e.selectAllCheckboxText) + " ")])], 1), e.isAnOptionSelected ? l("div", [l("hr", { staticClass: "b-listbox-multi-select__divider" }), l("listbox-multi-select-options", { ref: "selectedListboxItemsRef", attrs: { items: e.selectedOptions, "is-option-disabled": e.isOptionDisabled, "is-multi-level": e.isMultiLevelSelect, searching: e.searching, "selected-items-list": e.selectedItemsList }, on: e._d({ "select-category": e.selectAllCategory, "unselect-category": e.unselectAllCategory, "toggle-checkbox-selection": function(s) {
     return e.toggleCheckboxSelection(e.BentoListboxEvent.SELECT, s);
   } }, [e.BentoListboxEvent.SPACE, function(s) {
     return e.toggleCheckboxSelection(e.BentoListboxEvent.SPACE, s);
@@ -778,32 +772,32 @@ var Qe = function() {
       return [e._t(n, null, null, c)];
     } };
   })], null, !0) })], 1)], 1);
-}, et = [], tt = /* @__PURE__ */ R(
+}, Je = [], Qe = /* @__PURE__ */ R(
+  Xe,
+  Ze,
   Je,
-  Qe,
-  et,
   !1,
   null,
-  "011ec278",
+  "70173dcf",
   null,
   null
 );
-const K = tt.exports, st = {
+const H = Qe.exports, et = {
   "en-US": {
     showMore: "Show more",
     loading: "Loading"
   }
-}, lt = N({
+}, tt = k({
   name: "bento-listbox",
   components: {
-    BentoListboxSingleSelect: Fe,
-    BentoListboxMultiSelect: K,
-    BentoTypography: P,
+    BentoListboxSingleSelect: we,
+    BentoListboxMultiSelect: H,
+    BentoTypography: $,
     BentoLoadingIndicator: ve,
-    BentoLoadingButton: ye
+    BentoLoadingButton: pe
   },
-  directives: { BentoKeyboardNavigationDirective: U },
-  i18n: { messages: st },
+  directives: { BentoKeyboardNavigationDirective: G },
+  i18n: { messages: et },
   props: {
     /**
      * Defines a string value that labels an interactive element.
@@ -852,8 +846,8 @@ const K = tt.exports, st = {
      */
     lazyLoadType: {
       type: String,
-      default: k.NONE,
-      validator: (t) => Object.values(k).includes(t)
+      default: D.NONE,
+      validator: (t) => Object.values(D).includes(t)
     },
     /**
      * If enabled, the user will be able to select multiple items.
@@ -869,7 +863,7 @@ const K = tt.exports, st = {
      *
      * If enabled, hides the "Select all" checkbox in "multiple" mode.
      */
-    searching: K.props.searching,
+    searching: H.props.searching,
     /**
      * The `input` value.
      * Providing an empty string or empty array will select no options.
@@ -889,26 +883,26 @@ const K = tt.exports, st = {
     o.TAB
   ],
   setup(t, { emit: e, slots: l }) {
-    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
+    const { t: s } = F(), n = C(null), c = C([]), v = r(() => t.lazyLoadType !== D.AUTOMATIC), u = r(() => t.lazyLoadType === D.AUTOMATIC), d = r(
+      () => v.value ? "true" : void 0
     ), _ = r(
-      () => m.value && t.loading ? "true" : "false"
-    ), y = r(
-      () => m.value ? "polite" : void 0
-    ), E = (p) => (L) => {
-      e(p, L);
-    }, x = () => {
+      () => v.value && t.loading ? "true" : "false"
+    ), x = r(
+      () => v.value ? "polite" : void 0
+    ), E = (p) => (A) => {
+      e(p, A);
+    }, y = () => {
       e(o.SHOW_MORE);
-    }, v = ge(() => {
-      const p = n.value, L = p.scrollTop + p.clientHeight >= p.scrollHeight;
-      t.hasMoreItems && L && !t.loading && x();
-    }), A = r(() => {
+    }, m = me(() => {
+      const p = n.value, A = p.scrollTop + p.clientHeight >= p.scrollHeight;
+      t.hasMoreItems && A && !t.loading && y();
+    }), O = r(() => {
       var p;
       return t.searching && ((p = t.items) == null ? void 0 : p.length) === 0;
-    }), O = r(
-      () => t.lazyLoadType === k.BUTTON && t.hasMoreItems
-    ), T = r(
-      () => t.loading ? V.LOADING : V.START
+    }), T = r(
+      () => t.lazyLoadType === D.BUTTON && t.hasMoreItems
+    ), L = r(
+      () => t.loading ? Y.LOADING : Y.START
     ), f = r(() => t.loading ? s("loading") : s("showMore")), S = {
       [o.SELECT]: E(o.SELECT),
       [o.SPACE]: E(o.SPACE),
@@ -922,31 +916,28 @@ const K = tt.exports, st = {
       // a11y
       ariaAtomic: d,
       ariaBusy: _,
-      ariaLive: y,
+      ariaLive: x,
       // Values
       hasAutomaticLazyLoader: u,
-      isSearchResultEmpty: A,
-      loadingButtonState: T,
+      isSearchResultEmpty: O,
+      loadingButtonState: L,
       slots: l,
-      shouldDisplayShowMoreButton: O,
+      shouldDisplayShowMoreButton: T,
       showMoreButtonText: f,
       // Enums
-      BentoTypographyElement: $,
-      BentoButtonVariant: fe,
-      BentoListboxLazyLoadType: k,
       BentoKeyboardNavigationKeyDownEvent: h,
       BentoListboxEvent: o,
       // Methods
       onOptionSelected: E,
-      emitShowMoreOnScrollEnd: v,
-      emitShowMore: x,
+      emitShowMoreOnScrollEnd: m,
+      emitShowMore: y,
       listboxListeners: S
     };
   }
 });
-var nt = function() {
+var st = 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 e._self._setupProxy, l("div", { directives: [{ name: "bento-keyboard-navigation-directive", rawName: "v-bento-keyboard-navigation-directive" }], ref: "listboxRef", staticClass: "b-listbox", attrs: { id: e.id, role: "listbox", tabindex: "-1", "aria-busy": e.ariaBusy, "aria-atomic": e.ariaAtomic, "aria-label": e.ariaLabel, "aria-live": e.ariaLive }, on: { scroll: () => e.hasAutomaticLazyLoader ? e.emitShowMoreOnScrollEnd() : void 0 } }, [e.isSearchResultEmpty ? l("div", { staticClass: "b-listbox__empty-search-message" }, [l("bento-typography", { attrs: { el: "span" } }, [e._v(e._s(e.noResultsMessage))])], 1) : [e.multiple ? [l("bento-listbox-multi-select", e._g({ ref: "listboxItemRef", attrs: { items: e.items, "selected-values": e.selectedValue, searching: e.searching, "is-option-disabled": e.isOptionDisabled }, scopedSlots: e._u([e._l(e.slots, function(s, n) {
     return { key: n, fn: function(c) {
       return [e._t(n, null, null, c)];
     } };
@@ -954,22 +945,24 @@ var nt = function() {
     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__ */ R(
+  })], null, !0) }, e.listboxListeners))], e.shouldDisplayShowMoreButton ? l("div", { staticClass: "b-listbox__lazy-load" }, [l("bento-loading-button", { attrs: { state: e.loadingButtonState, variant: "secondary" }, on: { "!click": function(s) {
+    return e.emitShowMore.apply(null, arguments);
+  } } }, [e._v(" " + e._s(e.showMoreButtonText) + " ")])], 1) : e.loading ? l("div", { staticClass: "b-listbox__lazy-load" }, [l("bento-loading-indicator")], 1) : e._e()]], 2);
+}, lt = [], nt = /* @__PURE__ */ R(
+  tt,
+  st,
   lt,
-  nt,
-  ot,
   !1,
   null,
-  "62a0d103",
+  "0bc89a2b",
   null,
   null
 );
-const gt = it.exports;
+const vt = nt.exports;
 export {
-  gt as B,
-  Be as C,
+  vt as B,
+  Te as C,
   o as a,
-  k as b
+  D as b
 };
-//# sourceMappingURL=listbox.116ed0c1.js.map
+//# sourceMappingURL=listbox.e792d2d6.js.map