@adyen/bento-vue2 1.12.0 → 1.13.1

package/dist/chunks/{listbox.23c6b393.js → listbox.e5d70b9b.js}

@@ -1,23 +1,25 @@
-import { computed as c, ref as T, onMounted as Z, onUnmounted as _e, watch as ee, defineComponent as N, toRef as Y } from "vue";
-import { B as w } from "./index.99a2184a.js";
-import { BentoLoadingIndicator as ve } from "../loading-indicator.js";
-import { BentoEmptyState as me } from "../empty-state.js";
-import { u as j } from "./i18n.eb5b985b.js";
-import { d as fe } from "./debounce.b5ef6acf.js";
-import { n as P } from "./_plugin-vue2_normalizer.71e2aa87.js";
-import { C as ge } from "./checkmark.a6ed8f47.js";
+import { computed as c, ref as L, onMounted as Z, onUnmounted as _e, watch as ee, defineComponent as D, toRef as V } from "vue";
+import { B as $ } from "./index.6ac01113.js";
+import { BentoLoadingIndicator as be } from "../loading-indicator.js";
+import { BentoEmptyState as ve } from "../empty-state.js";
+import { u as z } from "./i18n.eb5b985b.js";
+import { d as me } from "./debounce.b5ef6acf.js";
+import { n as N } from "./_plugin-vue2_normalizer.71e2aa87.js";
+import { C as fe } from "./checkmark.a6ed8f47.js";
 import { B as k, a as H } from "./keyboard-navigation.ca47dfa8.js";
-import { B as X } from "./checkbox.d8b810c7.js";
+import { B as X } from "./checkbox.51cdb397.js";
 import "./index.4c062058.js";
-import { C as ye, a as pe } from "./chevron-up.81185563.js";
-import { B as xe, a as J } from "./loading-button.44d698b9.js";
-import { o as Se } from "./resize.a041304d.js";
+import { C as ge, a as ye } from "./chevron-up.81185563.js";
+import { B as pe } from "./base-button.f9080a52.js";
+import { C as xe } from "./cross-small.e851e0de.js";
+import { B as Se, a as J } from "./loading-button.7301cc2e.js";
+import { o as Ce } from "./resize.a041304d.js";
 import "../assets/listbox.css";
-const te = (t, e, l, s) => {
+const te = (t, e, s, l) => {
   const n = c(
     () => {
-      var a, d;
-      return !!((a = t.value) != null && a.length) && ((d = t.value) == null ? void 0 : d.length) === e.value.length;
+      var a, b;
+      return !!((a = t.value) != null && a.length) && ((b = t.value) == null ? void 0 : b.length) === e.value.length;
     }
   ), o = c(() => {
     var a;
@@ -27,89 +29,89 @@ const te = (t, e, l, s) => {
     isAllSelected: n,
     isIndeterminate: o,
     toggleSelectAll: (a) => {
-      a ? l() : s();
+      a ? s() : l();
     }
   };
 };
-function Ee(t, { disabled: e, itemHeight: l, overscan: s = 5, prefixHeight: n }) {
-  const o = T(null), m = T([]), a = T(0), d = T(0), u = T(0);
-  let x;
-  const O = c(() => {
-    const g = typeof l == "number" ? t.value.length * l : t.value.reduce((S, _, y) => S + l(y), 0), C = typeof l == "number" ? a.value * l : t.value.slice(0, a.value).reduce((S, _, y) => S + l(y), 0);
+function Ee(t, { disabled: e, itemHeight: s, overscan: l = 5, prefixHeight: n }) {
+  const o = L(null), m = L([]), a = L(0), b = L(0), u = L(0);
+  let S;
+  const A = c(() => {
+    const g = typeof s == "number" ? t.value.length * s : t.value.reduce((h, v, y) => h + s(y), 0), O = typeof s == "number" ? a.value * s : t.value.slice(0, a.value).reduce((h, v, y) => h + s(y), 0);
     return {
       style: {
-        marginTop: `${C}px`,
-        height: `${g - C}px`
+        marginTop: `${O}px`,
+        height: `${g - O}px`
       }
     };
-  }), L = () => {
-    const g = (n == null ? void 0 : n.value) ?? 0, C = Math.max(o.value.scrollTop - g, 0);
-    if (typeof l == "number")
-      return Math.floor(C / l);
-    let S = 0, _ = 0;
+  }), I = () => {
+    const g = (n == null ? void 0 : n.value) ?? 0, O = Math.max(o.value.scrollTop - g, 0);
+    if (typeof s == "number")
+      return Math.floor(O / s);
+    let h = 0, v = 0;
     for (let y = 0; y < t.value.length; y += 1) {
-      const I = l(y);
-      if (S += I, S >= C) {
-        _ = y;
+      const R = s(y);
+      if (h += R, h >= O) {
+        v = y;
         break;
       }
     }
-    return _;
-  }, f = () => {
-    if (u.value = o.value.clientHeight, typeof l == "number")
-      return Math.ceil(u.value / l);
+    return v;
+  }, d = () => {
+    if (u.value = o.value.clientHeight, typeof s == "number")
+      return Math.ceil(u.value / s);
     const g = a.value ?? 0;
-    let C = 0, S = 0;
-    for (let _ = g; _ < t.value.length; _ += 1) {
-      const y = l(_);
-      if (C += y, S = _, C > u.value)
+    let O = 0, h = 0;
+    for (let v = g; v < t.value.length; v += 1) {
+      const y = s(v);
+      if (O += y, h = v, O > u.value)
         break;
     }
-    return S - g;
-  }, E = () => {
+    return h - g;
+  }, x = () => {
     if (o.value) {
-      const g = f();
-      a.value = L(), d.value = Math.min(a.value + g + s, t.value.length), m.value = t.value.slice(a.value, d.value);
+      const g = d();
+      a.value = I(), b.value = Math.min(a.value + g + l, t.value.length), m.value = t.value.slice(a.value, b.value);
     }
-  }, B = () => {
-    E();
+  }, E = () => {
+    x();
   };
   e || (Z(() => {
-    o.value && (u.value = o.value.clientHeight, x = Se(o.value, ({ clientHeight: g }) => {
-      u.value = g, E();
-    }), E());
+    o.value && (u.value = o.value.clientHeight, S = Ce(o.value, ({ clientHeight: g }) => {
+      u.value = g, x();
+    }), x());
   }), _e(() => {
-    x == null || x.disconnect();
+    S == null || S.disconnect();
   }), ee(
     () => t.value,
     () => {
-      E();
+      x();
     }
   ));
-  const A = {
+  const B = {
     ref: o,
     style: { overflowY: "auto" }
   };
   return e ? {
     containerRef: o,
-    containerProps: A,
+    containerProps: B,
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     onScroll: () => {
     },
     list: t
   } : {
     containerRef: o,
-    containerProps: A,
-    onScroll: B,
+    containerProps: B,
+    onScroll: E,
     list: m,
-    wrapperProps: O
+    wrapperProps: A
   };
 }
-var i = /* @__PURE__ */ ((t) => (t.SELECT = "select", t.SHOW_MORE = "show-more", t.ESCAPE = "escape-pressed", t.CLICK = "click", t.ENTER = "enter-pressed", t.SPACE = "space-pressed", t.TAB = "tab-pressed", t.CLOSE_DROPDOWN = "close-dropdown", t))(i || {}), $ = /* @__PURE__ */ ((t) => (t.AUTOMATIC = "automatic", t.BUTTON = "button", t.NONE = "none", t))($ || {});
-const Ce = N({
+var i = /* @__PURE__ */ ((t) => (t.SELECT = "select", t.SHOW_MORE = "show-more", t.ESCAPE = "escape-pressed", t.CLICK = "click", t.ENTER = "enter-pressed", t.SPACE = "space-pressed", t.TAB = "tab-pressed", t.CLOSE_DROPDOWN = "close-dropdown", t))(i || {}), w = /* @__PURE__ */ ((t) => (t.AUTOMATIC = "automatic", t.BUTTON = "button", t.NONE = "none", t))(w || {});
+const he = D({
   name: "bento-listbox-static-category",
   components: {
-    BentoTypography: w
+    BentoTypography: $
   },
   props: {
     /**
@@ -121,12 +123,12 @@ const Ce = N({
     }
   }
 });
-var he = function() {
-  var e = this, l = e._self._c;
-  return e._self._setupProxy, l("div", { staticClass: "b-listbox-single-select-category" }, [l("bento-typography", { staticClass: "b-listbox-single-select-category__label-text", attrs: { variant: "caption", el: "span" } }, [e._v(" " + e._s(e.categoryLabel) + " ")]), l("div", [e._t("default")], 2)], 1);
-}, Te = [], Oe = /* @__PURE__ */ P(
-  Ce,
+var Oe = function() {
+  var e = this, s = e._self._c;
+  return e._self._setupProxy, s("div", { staticClass: "b-listbox-single-select-category" }, [s("bento-typography", { staticClass: "b-listbox-single-select-category__label-text", attrs: { variant: "caption", el: "span" } }, [e._v(" " + e._s(e.categoryLabel) + " ")]), s("div", [e._t("default")], 2)], 1);
+}, Te = [], Le = /* @__PURE__ */ N(
   he,
+  Oe,
   Te,
   !1,
   null,
@@ -134,7 +136,7 @@ var he = function() {
   null,
   null
 );
-const Le = Oe.exports, Ae = N({
+const Ae = Le.exports, Ie = D({
   name: "bento-listbox-option",
   props: {
     /**
@@ -148,7 +150,7 @@ const Le = Oe.exports, Ae = N({
   },
   emits: [i.CLICK, i.ENTER, i.SPACE, i.TAB],
   setup(t, { emit: e }) {
-    const l = c(() => ({
+    const s = c(() => ({
       "b-listbox-option--disabled": t.disabled,
       "b-listbox-option--selected": t.selected
     }));
@@ -157,7 +159,7 @@ const Le = Oe.exports, Ae = N({
       BentoKeyboardNavigationKeyDownEvent: k,
       BentoListboxEvent: i,
       // Values
-      conditionalClasses: l,
+      conditionalClasses: s,
       // Events
       onClick: (o) => {
         e(i.CLICK, o);
@@ -168,31 +170,31 @@ const Le = Oe.exports, Ae = N({
     };
   }
 });
-var Ie = 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);
-  }, function(s) {
-    return !s.type.indexOf("key") && e._k(s.keyCode, "space", 32, s.key, [" ", "Spacebar"]) ? null : e.onOptionSelected(e.BentoListboxEvent.SPACE, s);
-  }, function(s) {
-    return !s.type.indexOf("key") && e._k(s.keyCode, "tab", 9, s.key, "Tab") ? null : e.onOptionSelected(e.BentoListboxEvent.TAB, s);
+var Be = function() {
+  var e = this, s = e._self._c;
+  return e._self._setupProxy, s("label", e._b({ staticClass: "b-listbox-option", class: e.conditionalClasses, attrs: { role: "option" }, on: { click: e.onClick, keydown: [function(l) {
+    return !l.type.indexOf("key") && e._k(l.keyCode, "enter", 13, l.key, "Enter") ? null : e.onOptionSelected(e.BentoListboxEvent.ENTER, l);
+  }, function(l) {
+    return !l.type.indexOf("key") && e._k(l.keyCode, "space", 32, l.key, [" ", "Spacebar"]) ? null : e.onOptionSelected(e.BentoListboxEvent.SPACE, l);
+  }, function(l) {
+    return !l.type.indexOf("key") && e._k(l.keyCode, "tab", 9, l.key, "Tab") ? null : e.onOptionSelected(e.BentoListboxEvent.TAB, l);
   }] } }, "label", e.$attrs, !1), [e._t("default")], 2);
-}, Be = [], Re = /* @__PURE__ */ P(
-  Ae,
+}, Re = [], ke = /* @__PURE__ */ N(
   Ie,
   Be,
+  Re,
   !1,
   null,
   "d7fb415c",
   null,
   null
 );
-const V = Re.exports, ke = N({
+const W = ke.exports, De = D({
   name: "bento-listbox-single-select-option",
   components: {
-    BentoListboxOption: V,
-    BentoTypography: w,
-    CheckmarkIcon: ge
+    BentoListboxOption: W,
+    BentoTypography: $,
+    CheckmarkIcon: fe
   },
   props: {
     /**
@@ -214,51 +216,51 @@ const V = Re.exports, ke = N({
   },
   emits: [i.ENTER, i.SELECT, i.SPACE, i.TAB],
   setup(t, { emit: e }) {
-    const l = (m) => {
+    const s = (m) => {
       t.disabled || e(m, t.option.value);
-    }, s = c(() => t.disabled ? !0 : null), n = c(() => t.selected ? !0 : null), o = c(() => t.disabled ? -1 : 0);
+    }, l = c(() => t.disabled ? !0 : null), n = c(() => t.selected ? !0 : null), o = c(() => t.disabled ? -1 : 0);
     return {
       // Values
-      ariaDisabled: s,
+      ariaDisabled: l,
       ariaSelected: n,
       tabIndex: o,
       // Enums
       BentoListboxEvent: i,
       // Events
-      onOptionSelected: l
+      onOptionSelected: s
     };
   }
 });
-var De = 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) {
+var Ne = function() {
+  var e = this, s = e._self._c;
+  return e._self._setupProxy, s("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(l) {
     return e.onOptionSelected(e.BentoListboxEvent.SELECT);
-  } }, [e.BentoListboxEvent.ENTER, function(s) {
+  } }, [e.BentoListboxEvent.ENTER, function(l) {
     return e.onOptionSelected(e.BentoListboxEvent.ENTER);
-  }, e.BentoListboxEvent.SPACE, function(s) {
+  }, e.BentoListboxEvent.SPACE, function(l) {
     return e.onOptionSelected(e.BentoListboxEvent.SPACE);
-  }, e.BentoListboxEvent.TAB, function(s) {
+  }, e.BentoListboxEvent.TAB, function(l) {
     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: "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);
-}, Ne = [], Pe = /* @__PURE__ */ P(
-  ke,
+    return [s("span", { staticClass: "b-listbox-single-select-option__text" }, [s("bento-typography", { attrs: { el: "span" } }, [e._v(e._s(e.option.label))]), e.option.description ? s("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), s("span", { staticClass: "b-listbox-single-select-option__check-icon" }, [s("checkmark-icon", { directives: [{ name: "show", rawName: "v-show", value: e.selected, expression: "selected" }], attrs: { "svg-title": "selected" } })], 1)], 2);
+}, Pe = [], $e = /* @__PURE__ */ N(
   De,
   Ne,
+  Pe,
   !1,
   null,
   "092ed5ee",
   null,
   null
 );
-const Me = Pe.exports, se = ({ items: t, isOptionDisabled: e }, l) => {
-  const s = c(() => t.value.length - 1), n = T(0);
+const Me = $e.exports, se = ({ items: t, isOptionDisabled: e }, s) => {
+  const l = c(() => t.value.length - 1), n = L(0);
   Z(() => {
-    e && (n.value = t.value.findIndex((f) => !e(f)));
+    e && (n.value = t.value.findIndex((d) => !e(d)));
   });
-  const o = (f) => !e || !!e && e(t.value[f]), m = (f) => !e || !!e && !e(t.value[f]), a = (f) => {
-    switch (f) {
+  const o = (d) => !e || !!e && e(t.value[d]), m = (d) => !e || !!e && !e(t.value[d]), a = (d) => {
+    switch (d) {
       case "increase":
         n.value += 1;
         break;
@@ -266,45 +268,49 @@ const Me = Pe.exports, se = ({ items: t, isOptionDisabled: e }, l) => {
         n.value -= 1;
         break;
     }
-  }, d = ({ edgeCaseItem: f, isItemBeforeEdgeCaseItem: E }, B, A) => {
-    n.value !== f && (E ? m(f) && a(A) : (a(A), o(n.value) && B()), l(n.value));
-  }, u = () => {
-    const f = n.value === s.value - 2;
-    d(
+  }, b = ({ edgeCaseItem: d, isItemBeforeEdgeCaseItem: x }, E, B) => {
+    n.value !== d && (x ? m(d) && a(B) : (a(B), o(n.value) && E()), s(n.value));
+  }, u = (d) => {
+    var E;
+    (E = d == null ? void 0 : d.detail) == null || E.preventDefault();
+    const x = n.value === l.value - 2;
+    b(
       {
-        isItemBeforeEdgeCaseItem: f,
-        edgeCaseItem: s.value
+        isItemBeforeEdgeCaseItem: x,
+        edgeCaseItem: l.value
       },
       u,
       "increase"
       /* INCREASE */
     );
-  }, x = () => {
-    const f = n.value === 1;
-    d(
+  }, S = (d) => {
+    var E;
+    (E = d == null ? void 0 : d.detail) == null || E.preventDefault();
+    const x = n.value === 1;
+    b(
       {
         edgeCaseItem: 0,
-        isItemBeforeEdgeCaseItem: f
+        isItemBeforeEdgeCaseItem: x
       },
-      x,
+      S,
       "decrease"
       /* DECREASE */
     );
   };
   return {
     moveToFirstElement: () => {
-      n.value = 0, o(n.value) ? u() : l(n.value);
+      n.value = 0, o(n.value) ? u() : s(n.value);
     },
     moveToLastElement: () => {
-      n.value = s.value, o(n.value) ? x() : l(n.value);
+      n.value = l.value, o(n.value) ? S() : s(n.value);
     },
     moveToNextElement: u,
-    moveToPreviousElement: x
+    moveToPreviousElement: S
   };
-}, $e = N({
+}, we = D({
   name: "bento-listbox-single-select",
   components: {
-    BentoListboxSingleSelectCategory: Le,
+    BentoListboxSingleSelectCategory: Ae,
     BentoListboxSingleSelectOption: Me
   },
   directives: { BentoKeyboardNavigationDirective: H },
@@ -349,21 +355,21 @@ const Me = Pe.exports, se = ({ items: t, isOptionDisabled: e }, l) => {
     staticCategories: { type: Boolean, default: !1 }
   },
   emits: [i.SELECT, i.ENTER, i.SPACE, i.TAB],
-  setup(t, { emit: e, slots: l }) {
-    const s = T([]), n = c(() => !!t.items.find(({ items: f }) => !!f)), o = (f) => (E) => {
-      e(f, E);
-    }, m = (f) => s.value[f].$el.focus(), { moveToNextElement: a, moveToPreviousElement: d, moveToFirstElement: u, moveToLastElement: x } = se(
+  setup(t, { emit: e, slots: s }) {
+    const l = L([]), n = c(() => !!t.items.find(({ items: d }) => !!d)), o = (d) => (x) => {
+      e(d, x);
+    }, m = (d) => l.value[d].$el.focus(), { moveToNextElement: a, moveToPreviousElement: b, moveToFirstElement: u, moveToLastElement: S } = se(
       {
-        items: Y(t, "items"),
+        items: V(t, "items"),
         isOptionDisabled: t.isOptionDisabled
       },
       m
-    ), O = {
-      [k.ARROW_UP]: d,
+    ), A = {
+      [k.ARROW_UP]: b,
       [k.ARROW_DOWN]: a,
       [k.HOME]: u,
-      [k.END]: x
-    }, L = {
+      [k.END]: S
+    }, I = {
       [i.SELECT]: o(i.SELECT),
       [i.SPACE]: o(i.SPACE),
       [i.TAB]: o(i.TAB),
@@ -373,38 +379,38 @@ const Me = Pe.exports, se = ({ items: t, isOptionDisabled: e }, l) => {
       // Enums
       BentoListboxEvent: i,
       // Values
-      listboxItemRef: s,
-      slots: l,
+      listboxItemRef: l,
+      slots: s,
       // Computed
       hasCategories: n,
       // Methods
       onOptionSelected: o,
       // Keyboard navigation
-      listboxListeners: O,
-      listboxOptionListeners: L
+      listboxListeners: A,
+      listboxOptionListeners: I
     };
   }
 });
-var we = 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.hasCategories && e.staticCategories ? e._l(e.items, function(s) {
-    return l("bento-listbox-single-select-category", { key: s.value, attrs: { "category-label": s.label, role: "group" } }, e._l(s.items, function(n) {
-      return l("bento-listbox-single-select-option", e._g({ key: n.value, ref: "listboxItemRef", refInFor: !0, attrs: { role: "option", option: n, disabled: e.isOptionDisabled ? e.isOptionDisabled(n) : null, selected: n.value === e.selectedValue }, scopedSlots: e._u([e._l(e.slots, function(o, m) {
+var Fe = function() {
+  var e = this, s = e._self._c;
+  return e._self._setupProxy, s("div", e._g({ directives: [{ name: "bento-keyboard-navigation-directive", rawName: "v-bento-keyboard-navigation-directive" }] }, e.listboxListeners), [e.hasCategories && e.staticCategories ? e._l(e.items, function(l) {
+    return s("bento-listbox-single-select-category", { key: l.value, attrs: { "category-label": l.label, role: "group" } }, e._l(l.items, function(n) {
+      return s("bento-listbox-single-select-option", e._g({ key: n.value, ref: "listboxItemRef", refInFor: !0, attrs: { role: "option", option: n, disabled: e.isOptionDisabled ? e.isOptionDisabled(n) : null, selected: n.value === e.selectedValue }, scopedSlots: e._u([e._l(e.slots, function(o, m) {
         return { key: m, fn: function(a) {
           return [e._t(m, null, null, a)];
         } };
       })], null, !0) }, e.listboxOptionListeners));
     }), 1);
-  }) : 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, o) {
+  }) : e._l(e.items, function(l) {
+    return s("bento-listbox-single-select-option", e._g({ key: l.value, ref: "listboxItemRef", refInFor: !0, attrs: { role: "option", option: l, disabled: e.isOptionDisabled ? e.isOptionDisabled(l) : null, selected: l.value === e.selectedValue }, scopedSlots: e._u([e._l(e.slots, function(n, o) {
       return { key: o, fn: function(m) {
         return [e._t(o, null, null, m)];
       } };
     })], null, !0) }, e.listboxOptionListeners));
   })], 2);
-}, Ge = [], Fe = /* @__PURE__ */ P(
-  $e,
+}, Ge = [], Ue = /* @__PURE__ */ N(
   we,
+  Fe,
   Ge,
   !1,
   null,
@@ -412,22 +418,22 @@ var we = function() {
   null,
   null
 );
-const Ue = Fe.exports;
-var q = /* @__PURE__ */ ((t) => (t.DISABLED = "disabled", t.STATIC_CATEGORY = "static-category", t))(q || {}), U = /* @__PURE__ */ ((t) => (t.SELECT_CATEGORY = "select-category", t.UNSELECT_CATEGORY = "unselect-category", t))(U || {});
-const Ye = {
+const Ye = Ue.exports;
+var j = /* @__PURE__ */ ((t) => (t.DISABLED = "disabled", t.STATIC_CATEGORY = "static-category", t))(j || {}), Y = /* @__PURE__ */ ((t) => (t.SELECT_CATEGORY = "select-category", t.UNSELECT_CATEGORY = "unselect-category", t))(Y || {});
+const Ve = {
   "en-US": {
     categoryClosed: "{category} closed",
     categoryOpened: "{category} opened"
   }
-}, Ve = N({
-  i18n: { messages: Ye },
+}, ze = D({
+  i18n: { messages: Ve },
   name: "bento-listbox-multi-select-category",
   components: {
     BentoCheckbox: X,
-    BentoTypography: w,
-    BentoListboxOption: V,
-    ChevronDownIcon: ye,
-    ChevronUpIcon: pe
+    BentoTypography: $,
+    BentoListboxOption: W,
+    ChevronDownIcon: ge,
+    ChevronUpIcon: ye
   },
   props: {
     /**
@@ -468,94 +474,94 @@ const Ye = {
      */
     staticCategories: { type: Boolean, default: !1 }
   },
-  emits: [U.SELECT_CATEGORY, U.UNSELECT_CATEGORY],
+  emits: [Y.SELECT_CATEGORY, Y.UNSELECT_CATEGORY],
   setup(t, { emit: e }) {
-    const l = T(!1), { t: s } = j(), n = (_) => t.isOptionDisabled ? t.isOptionDisabled(_) : !1, o = c(
-      () => t.category.items.every((_) => n(_))
-    ), m = Y(t, "staticCategories"), a = c(() => l.value || t.staticCategories), d = c(() => ({
-      [`b-listbox-multi-select-category--${q.DISABLED}`]: o.value,
-      [`b-listbox-multi-select-category--${q.STATIC_CATEGORY}`]: t.staticCategories
-    })), u = (_) => {
-      _.preventDefault(), l.value = !l.value;
-    }, x = (_) => {
+    const s = L(!1), { t: l } = z(), n = (v) => t.isOptionDisabled ? t.isOptionDisabled(v) : !1, o = c(
+      () => t.category.items.every((v) => n(v))
+    ), m = V(t, "staticCategories"), a = c(() => s.value || t.staticCategories), b = c(() => ({
+      [`b-listbox-multi-select-category--${j.DISABLED}`]: o.value,
+      [`b-listbox-multi-select-category--${j.STATIC_CATEGORY}`]: t.staticCategories
+    })), u = (v) => {
+      v.preventDefault(), s.value = !s.value;
+    }, S = (v) => {
       var M;
-      const y = n(_), I = ((M = t.selectedItemsList) == null ? void 0 : M.includes(_.value)) || !1;
-      return { isDisabled: y, isPreSelected: I };
-    }, O = c(
-      () => t.category.items.filter((_) => {
-        const { isDisabled: y, isPreSelected: I } = x(_);
-        return y && I || !y;
+      const y = n(v), R = ((M = t.selectedItemsList) == null ? void 0 : M.includes(v.value)) || !1;
+      return { isDisabled: y, isPreSelected: R };
+    }, A = c(
+      () => t.category.items.filter((v) => {
+        const { isDisabled: y, isPreSelected: R } = S(v);
+        return y && R || !y;
       })
-    ), L = c(
+    ), I = c(
       () => {
-        var _;
-        return (_ = O.value) == null ? void 0 : _.filter(
+        var v;
+        return (v = A.value) == null ? void 0 : v.filter(
           ({ value: y }) => {
-            var I;
-            return (I = t.selectedItemsList) == null ? void 0 : I.includes(y);
+            var R;
+            return (R = t.selectedItemsList) == null ? void 0 : R.includes(y);
           }
         );
       }
-    ), f = c(() => {
-      const _ = l.value ? "categoryOpened" : "categoryClosed";
-      return s(_, { category: t.category.label });
-    }), E = c(
+    ), d = c(() => {
+      const v = s.value ? "categoryOpened" : "categoryClosed";
+      return l(v, { category: t.category.label });
+    }), x = c(
       () => ({
         el: "span",
         variant: t.staticCategories ? "caption" : "body"
       })
-    ), B = () => {
-      e(U.SELECT_CATEGORY);
-    }, A = () => {
-      e(U.UNSELECT_CATEGORY);
-    }, { isAllSelected: g, isIndeterminate: C, toggleSelectAll: S } = te(
-      L,
-      O,
-      B,
-      A
+    ), E = () => {
+      e(Y.SELECT_CATEGORY);
+    }, B = () => {
+      e(Y.UNSELECT_CATEGORY);
+    }, { isAllSelected: g, isIndeterminate: O, toggleSelectAll: h } = te(
+      I,
+      A,
+      E,
+      B
     );
     return {
       // Values
-      chevronTitle: f,
-      conditionalClass: d,
+      chevronTitle: d,
+      conditionalClass: b,
       hasAllPropsDisabled: o,
-      isOpen: l,
+      isOpen: s,
       isAllSelected: g,
-      isIndeterminate: C,
+      isIndeterminate: O,
       isStaticCategory: m,
       // Computed
       showItemChildren: a,
-      categoryLabelProps: E,
+      categoryLabelProps: x,
       // Methods
       toggleOpen: u,
-      toggleSelectAll: S
+      toggleSelectAll: h
     };
   }
 });
-var ze = 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 }, [e.isStaticCategory ? e._e() : 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", e._b({ staticClass: "b-listbox-multi-select-category__label-text" }, "bento-typography", e.categoryLabelProps, !1), [e._v(" " + e._s(e.category.label) + " ")]), e.isStaticCategory ? e._e() : l("div", { staticClass: "b-listbox-multi-select-category__label-chevron", attrs: { "data-testid": "toggle-listbox" }, on: { "!click": function(s) {
+var We = function() {
+  var e = this, s = e._self._c;
+  return e._self._setupProxy, s("div", [s("bento-listbox-option", { staticClass: "b-listbox-multi-select-category__option", class: e.conditionalClass }, [e.isStaticCategory ? e._e() : s("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 } }), s("span", { staticClass: "b-listbox-multi-select-category__label" }, [s("bento-typography", e._b({ staticClass: "b-listbox-multi-select-category__label-text" }, "bento-typography", e.categoryLabelProps, !1), [e._v(" " + e._s(e.category.label) + " ")]), e.isStaticCategory ? e._e() : s("div", { staticClass: "b-listbox-multi-select-category__label-chevron", attrs: { "data-testid": "toggle-listbox" }, on: { "!click": function(l) {
     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.showItemChildren, expression: "showItemChildren" }] }, [e._t("default")], 2)], 1);
-}, We = [], Ke = /* @__PURE__ */ P(
-  Ve,
+  } } }, [e.isOpen ? s("chevron-up-icon", { attrs: { "svg-title": e.chevronTitle } }) : s("chevron-down-icon", { attrs: { "svg-title": e.chevronTitle } })], 1)], 1)], 1), s("div", { directives: [{ name: "show", rawName: "v-show", value: e.showItemChildren, expression: "showItemChildren" }] }, [e._t("default")], 2)], 1);
+}, qe = [], Ke = /* @__PURE__ */ N(
   ze,
   We,
+  qe,
   !1,
   null,
   "f360ac3d",
   null,
   null
 );
-const qe = Ke.exports;
-var D = /* @__PURE__ */ ((t) => (t.SELECT_CATEGORY = "select-category", t.TOGGLE_CHECKBOX_SELECTION = "toggle-checkbox-selection", t.UNSELECT_CATEGORY = "unselect-category", t))(D || {});
-const je = N({
+const je = Ke.exports;
+var P = /* @__PURE__ */ ((t) => (t.SELECT_CATEGORY = "select-category", t.TOGGLE_CHECKBOX_SELECTION = "toggle-checkbox-selection", t.UNSELECT_CATEGORY = "unselect-category", t))(P || {});
+const He = D({
   name: "listbox-multi-select-options",
   components: {
     BentoCheckbox: X,
-    BentoListboxOption: V,
-    BentoTypography: w,
-    ListboxMultiSelectCategory: qe
+    BentoListboxOption: W,
+    BentoTypography: $,
+    ListboxMultiSelectCategory: je
   },
   props: {
     /**
@@ -613,20 +619,20 @@ const je = N({
     staticCategories: { type: Boolean, default: !1 }
   },
   emits: [
-    D.TOGGLE_CHECKBOX_SELECTION,
-    D.SELECT_CATEGORY,
-    D.UNSELECT_CATEGORY
+    P.TOGGLE_CHECKBOX_SELECTION,
+    P.SELECT_CATEGORY,
+    P.UNSELECT_CATEGORY
   ],
   setup(t, { emit: e }) {
-    const l = (d) => {
-      e(D.TOGGLE_CHECKBOX_SELECTION, d);
-    }, s = (d) => !!d.items, n = (d) => {
+    const s = (b) => {
+      e(P.TOGGLE_CHECKBOX_SELECTION, b);
+    }, l = (b) => !!b.items, n = (b) => {
       const u = t.isMultiLevel && t.searching;
-      return d.description && (!t.isMultiLevel || u);
-    }, o = (d) => d.items ? !!d.items.find((u) => t.selectedItemsList.includes(u.value)) : t.selectedItemsList.includes(d.value), m = (d, u) => {
-      if (s(u))
-        return e(d ? D.SELECT_CATEGORY : D.UNSELECT_CATEGORY, u);
-      l(u.value);
+      return b.description && (!t.isMultiLevel || u);
+    }, o = (b) => b.items ? !!b.items.find((u) => t.selectedItemsList.includes(u.value)) : t.selectedItemsList.includes(b.value), m = (b, u) => {
+      if (l(u))
+        return e(b ? P.SELECT_CATEGORY : P.UNSELECT_CATEGORY, u);
+      s(u.value);
     };
     return {
       // Values
@@ -635,68 +641,123 @@ const je = N({
         "b-listbox-multi-select-options__category-option": t.categoryItems
       })),
       // Methods
-      isCategory: s,
+      isCategory: l,
       isOptionSelected: o,
       shouldShowDescription: n,
-      toggleCheckboxSelection: l,
+      toggleCheckboxSelection: s,
       selectSearch: m,
       // Enums
       BentoListboxEvent: i,
-      ListboxMultiSelectOptionsEvent: D
+      ListboxMultiSelectOptionsEvent: P
     };
   }
 });
-var He = 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: "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, "static-categories": e.staticCategories, "is-option-disabled": e.isOptionDisabled, "selected-items-list": e.selectedItemsList }, on: { "select-category": function(n) {
-      return e.$emit(e.ListboxMultiSelectOptionsEvent.SELECT_CATEGORY, s);
+var Xe = function() {
+  var e = this, s = e._self._c;
+  return e._self._setupProxy, s("div", e._l(e.items, function(l) {
+    return s("div", { key: `selected-${l.value}` }, [e.searching && e.isMultiLevel ? [s("bento-listbox-option", { staticClass: "b-listbox-multi-select-options", class: e.conditionalClasses, attrs: { disabled: e.isOptionDisabled ? e.isOptionDisabled(l) : null } }, [s("bento-checkbox", { attrs: { "model-value": e.isOptionSelected(l), "aria-label": l.label, disabled: e.isOptionDisabled ? e.isOptionDisabled(l) : null, value: l.value }, on: { "update:model-value": (n) => e.selectSearch(n, l) } }), e._t("default", function() {
+      return [s("span", { staticClass: "b-listbox-multi-select__option-text" }, [s("bento-typography", { attrs: { el: "span" } }, [e._v(e._s(l.label))]), e.shouldShowDescription(l) ? s("bento-typography", { staticClass: "b-listbox-multi-select__option-description", attrs: { el: "span" } }, [e._v(" " + e._s(l.description) + " ")]) : e._e()], 1)];
+    }, null, l)], 2)] : [l.items ? [s("listbox-multi-select-category", { attrs: { category: l, "static-categories": e.staticCategories, "is-option-disabled": e.isOptionDisabled, "selected-items-list": e.selectedItemsList }, on: { "select-category": function(n) {
+      return e.$emit(e.ListboxMultiSelectOptionsEvent.SELECT_CATEGORY, l);
     }, "unselect-category": function(n) {
-      return e.$emit(e.ListboxMultiSelectOptionsEvent.UNSELECT_CATEGORY, s);
-    } } }, [l("listbox-multi-select-options", { attrs: { "category-items": "", items: s.items, "is-option-disabled": e.isOptionDisabled, "is-multi-level": e.isMultiLevel, "static-categories": e.staticCategories, "selected-items-list": e.selectedItemsList, searching: e.searching }, 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);
+      return e.$emit(e.ListboxMultiSelectOptionsEvent.UNSELECT_CATEGORY, l);
+    } } }, [s("listbox-multi-select-options", { attrs: { "category-items": "", items: l.items, "is-option-disabled": e.isOptionDisabled, "is-multi-level": e.isMultiLevel, "static-categories": e.staticCategories, "selected-items-list": e.selectedItemsList, searching: e.searching }, on: { "toggle-checkbox-selection": (n) => e.toggleCheckboxSelection(n) } })], 1)] : s("bento-listbox-option", { staticClass: "b-listbox-multi-select-options", class: e.conditionalClasses, attrs: { disabled: e.isOptionDisabled ? e.isOptionDisabled(l) : null } }, [s("bento-checkbox", { attrs: { "model-value": e.selectedItemsList, "aria-label": l.label, disabled: e.isOptionDisabled ? e.isOptionDisabled(l) : null, value: l.value }, on: { "update:model-value": function(n) {
+      return e.toggleCheckboxSelection(l.value);
     } } }), e._t("default", function() {
-      return [l("span", { staticClass: "b-listbox-multi-select__option-text" }, [l("bento-typography", { attrs: { el: "span" } }, [e._v(e._s(s.label))]), e.shouldShowDescription(s) ? l("bento-typography", { staticClass: "b-listbox-multi-select__option-description", attrs: { el: "span" } }, [e._v(" " + e._s(s.description) + " ")]) : e._e()], 1)];
-    }, null, s)], 2)]], 2);
+      return [s("span", { staticClass: "b-listbox-multi-select__option-text" }, [s("bento-typography", { attrs: { el: "span" } }, [e._v(e._s(l.label))]), e.shouldShowDescription(l) ? s("bento-typography", { staticClass: "b-listbox-multi-select__option-description", attrs: { el: "span" } }, [e._v(" " + e._s(l.description) + " ")]) : e._e()], 1)];
+    }, null, l)], 2)]], 2);
   }), 0);
-}, Xe = [], Je = /* @__PURE__ */ P(
-  je,
+}, Je = [], Qe = /* @__PURE__ */ N(
   He,
   Xe,
+  Je,
   !1,
   null,
   "c9b2c61d",
   null,
   null
 );
-const Qe = Je.exports, Ze = {
+const Ze = Qe.exports, et = {
+  "en-US": {
+    remove: "Remove"
+  }
+}, tt = {
+  i18n: { messages: et }
+}, st = /* @__PURE__ */ D({
+  ...tt,
+  __name: "listbox-multi-select-chips",
+  props: {
+    /**
+     * Function that defines the options to be disabled
+     */
+    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
+    }
+  },
+  emits: ["unselect-item", "unselect-category"],
+  setup(t, { emit: e }) {
+    const { t: s } = z();
+    return { __sfc: !0, emit: e, t: s, unselectOption: (n) => n.items ? e("unselect-category", n) : e("unselect-item", n.value), BentoTypography: $, BaseButton: pe, CrossSmallIcon: xe };
+  }
+});
+var lt = function() {
+  var e = this, s = e._self._c, l = e._self._setupProxy;
+  return s("div", { staticClass: "b-listbox-multi-select-chips" }, e._l(e.items, function(n) {
+    return s("div", { key: `selected-${n.value}` }, [s(l.BaseButton, { staticClass: "b-listbox-multi-select-chips__chip", attrs: { disabled: e.isOptionDisabled ? e.isOptionDisabled(n) : null }, on: { click: function(o) {
+      return l.unselectOption(n);
+    } }, scopedSlots: e._u([{ key: "iconRight", fn: function() {
+      return [s(l.CrossSmallIcon, { attrs: { "svg-title": l.t("remove") } })];
+    }, proxy: !0 }], null, !0) }, [s(l.BentoTypography, { staticClass: "b-listbox-multi-select-chips__option-text", attrs: { el: "span", variant: "caption" } }, [e._v(e._s(n.label))])], 1)], 1);
+  }), 0);
+}, nt = [], ot = /* @__PURE__ */ N(
+  st,
+  lt,
+  nt,
+  !1,
+  null,
+  "7590db86",
+  null,
+  null
+);
+const it = ot.exports, at = {
   "en-US": {
     allSelected: "All selected ({total})",
     numberOfTotalSelected: "{number} of {total} selected",
     selectAll: "Select all ({total})"
   }
-}, et = (t) => {
+}, ct = (t) => {
   const e = c(() => {
-    var s;
-    return !!((s = t.value) != null && s.find(({ items: n }) => !!n));
-  }), l = c(() => {
-    var s;
-    return e.value ? (s = t.value) == null ? void 0 : s.reduce((n, o) => (o.items ? n.push(...o.items.flat()) : n.push(o), n), []) : t.value;
+    var l;
+    return !!((l = t.value) != null && l.find(({ items: n }) => !!n));
+  }), s = c(() => {
+    var l;
+    return e.value ? (l = t.value) == null ? void 0 : l.reduce((n, o) => (o.items ? n.push(...o.items.flat()) : n.push(o), n), []) : t.value;
   });
   return {
     isMultiLevelSelect: e,
-    flattenedItemsList: l
+    flattenedItemsList: s
   };
-}, tt = N({
-  i18n: { messages: Ze },
+}, rt = D({
+  i18n: { messages: at },
   name: "bento-listbox-multi-select",
   components: {
     BentoCheckbox: X,
-    BentoListboxOption: V,
-    BentoTypography: w,
-    ListboxMultiSelectOptions: Qe
+    BentoListboxOption: W,
+    BentoTypography: $,
+    ListboxMultiSelectOptions: Ze,
+    ListboxMultiSelectChips: it
   },
   directives: { BentoKeyboardNavigationDirective: H },
   props: {
@@ -745,8 +806,8 @@ const Qe = Je.exports, Ze = {
     staticCategories: { type: Boolean, default: !1 }
   },
   emits: [i.SELECT],
-  setup(t, { emit: e, slots: l }) {
-    const { t: s } = j(), n = T(null), o = T(null), m = T(null), a = T();
+  setup(t, { emit: e, slots: s }) {
+    const { t: l } = z(), n = L(null), o = L(null), m = L(null), a = L();
     ee(
       () => t.selectedValues,
       () => {
@@ -756,103 +817,102 @@ const Qe = Je.exports, Ze = {
         immediate: !0
       }
     );
-    const { isMultiLevelSelect: d, flattenedItemsList: u } = et(Y(t, "items")), x = (r) => {
-      var v;
-      const b = t.isOptionDisabled(r), p = ((v = a.value) == null ? void 0 : v.includes(r.value)) || !1;
-      return { isDisabled: b, isPreSelected: p };
-    }, O = c(
-      () => t.searching && d ? t.items : u.value.filter((r) => {
-        const { isDisabled: b, isPreSelected: p } = x(r);
-        return b && p || !b;
+    const { isMultiLevelSelect: b, flattenedItemsList: u } = ct(V(t, "items")), S = (r) => {
+      var p;
+      const _ = t.isOptionDisabled(r), f = ((p = a.value) == null ? void 0 : p.includes(r.value)) || !1;
+      return { isDisabled: _, isPreSelected: f };
+    }, A = c(
+      () => t.searching && b ? t.items : u.value.filter((r) => {
+        const { isDisabled: _, isPreSelected: f } = S(r);
+        return _ && f || !_;
       })
-    ), L = c(
+    ), I = c(
       () => {
         var r;
-        return (r = O.value) == null ? void 0 : r.filter((b) => {
-          var p;
-          return b.items && d.value && t.searching ? b.items.filter(
-            (R) => (t.selectedValues ?? []).includes(
-              R.value
+        return (r = A.value) == null ? void 0 : r.filter((_) => {
+          var f;
+          return _.items && b.value && t.searching ? _.items.filter(
+            (C) => (t.selectedValues ?? []).includes(
+              C.value
             )
-          ).length === b.items.length : (p = a.value) == null ? void 0 : p.includes(b.value);
+          ).length === _.items.length : (f = a.value) == null ? void 0 : f.includes(_.value);
         });
       }
-    ), f = () => d.value && !t.searching ? u.value.length : t.items.length, E = c(() => {
-      var v;
-      const r = O.value.length, b = f(), p = ((v = L.value) == null ? void 0 : v.length) || 0;
-      return p === 0 ? s("selectAll", { total: r }) : p === b ? s("allSelected", { total: b }) : s("numberOfTotalSelected", { number: p, total: b });
-    }), B = (r) => {
-      const b = (v) => {
-        const { isDisabled: R, isPreSelected: K } = x(v);
-        return R && K || !R;
-      }, p = r.filter(b).filter((v) => !a.value.includes(v.value)).map(({ value: v }) => v);
-      a.value = [...a.value, ...p], e(i.SELECT, a.value);
-    }, A = (r) => {
-      const b = (v) => {
-        const { isDisabled: R, isPreSelected: K } = x(v);
-        return !(R && K);
-      }, p = r.filter(b).map(({ value: v }) => v);
-      a.value = a.value.filter((v) => !(p != null && p.includes(v))), e(i.SELECT, a.value);
+    ), d = () => b.value && !t.searching ? u.value.length : t.items.length, x = c(() => {
+      var p;
+      const r = A.value.length, _ = d(), f = ((p = I.value) == null ? void 0 : p.length) || 0;
+      return f === 0 ? l("selectAll", { total: r }) : f === _ ? l("allSelected", { total: _ }) : l("numberOfTotalSelected", { number: f, total: _ });
+    }), E = (r) => {
+      const _ = (p) => {
+        const { isDisabled: C, isPreSelected: U } = S(p);
+        return C && U || !C;
+      }, f = r.filter(_).filter((p) => !a.value.includes(p.value)).map(({ value: p }) => p);
+      a.value = [...a.value, ...f], e(i.SELECT, a.value);
+    }, B = (r) => {
+      const _ = (p) => {
+        const { isDisabled: C, isPreSelected: U } = S(p);
+        return !(C && U);
+      }, f = r.filter(_).map(({ value: p }) => p);
+      a.value = a.value.filter((p) => !(f != null && f.includes(p))), e(i.SELECT, a.value);
     }, g = () => {
+      E(u.value);
+    }, O = () => {
       B(u.value);
-    }, C = () => {
-      A(u.value);
-    }, { isAllSelected: S, isIndeterminate: _, toggleSelectAll: y } = te(
-      L,
-      O,
+    }, { isAllSelected: h, isIndeterminate: v, toggleSelectAll: y } = te(
+      I,
+      A,
       g,
-      C
-    ), I = (r) => {
-      B(r.items);
+      O
+    ), R = (r) => {
+      E(r.items);
     }, M = (r) => {
-      A(r.items);
-    }, z = (r, b) => {
-      let p = !1;
-      a.value = a.value.filter((v) => b === v ? (p = !0, !1) : !0), p || a.value.push(b), e(r, a.value);
-    }, G = c(() => {
-      const r = (v) => a.value.includes(v.value), b = (v) => !!v.find((R) => r(R));
-      return d.value && t.staticCategories ? t.items.flatMap(({ items: R }) => R.filter(r)) : t.items.filter((v) => v.items && b(v.items) ? !0 : r(v));
-    }), W = c(() => {
-      var r;
-      return ((r = G.value) == null ? void 0 : r.length) > 0;
-    }), h = c(
+      B(r.items);
+    }, q = (r, _) => {
+      let f = !1;
+      a.value = a.value.filter((p) => _ === p ? (f = !0, !1) : !0), f || a.value.push(_), e(r, a.value);
+    }, F = c(() => {
+      const r = (C) => a.value.includes(C.value), _ = (C) => !t.staticCategories && C.every((U) => r(U));
+      return t.items.flatMap(
+        (C) => C.items && !_(C.items) ? C.items : C
+      ).filter((C) => C.items ? !0 : r(C));
+    }), K = c(
       () => {
-        var r, b;
-        return ((r = L.value) == null ? void 0 : r.length) === ((b = u.value) == null ? void 0 : b.length);
+        var r, _, f;
+        return ((r = F.value) == null ? void 0 : r.length) > 0 && ((_ = I.value) == null ? void 0 : _.length) !== ((f = u.value) == null ? void 0 : f.length);
       }
-    ), F = c(
+    ), T = c(
       () => n.value ? [n.value] : []
-    ), le = c(
+    ), G = c(
       () => {
-        var r, b;
-        return (b = (r = o.value) == null ? void 0 : r.$children) != null && b.length ? o.value.$children : [];
+        var r, _;
+        return (_ = (r = o.value) == null ? void 0 : r.$children) != null && _.length ? o.value.$children : [];
       }
-    ), ne = c(
+    ), le = c(
       () => {
-        var r, b;
-        return (b = (r = m.value) == null ? void 0 : r.$children) != null && b.length ? m.value.$children : [];
+        var r, _;
+        return (_ = (r = m.value) == null ? void 0 : r.$children) != null && _.length ? m.value.$children : [];
       }
-    ), oe = c(() => ({ label: E, value: S })), ie = c(() => [
-      oe,
-      ...G.value,
+    ), ne = c(() => ({ label: x, value: h })), oe = c(() => [
+      ne,
+      ...F.value,
       ...u.value
-    ]), ae = (r) => {
+    ]), ie = (r) => {
       [
-        ...F.value,
-        ...le.value,
-        ...ne.value
+        ...T.value,
+        ...G.value,
+        ...le.value
       ][r].$el.focus();
-    }, { moveToNextElement: ce, moveToPreviousElement: re, moveToFirstElement: ue, moveToLastElement: de } = se(
+    }, { moveToNextElement: ae, moveToPreviousElement: ce, moveToFirstElement: re, moveToLastElement: ue } = se(
       {
-        items: T(ie),
+        items: L(oe),
         isOptionDisabled: t.isOptionDisabled
       },
-      ae
-    ), be = {
-      [k.ARROW_UP]: re,
-      [k.ARROW_DOWN]: ce,
-      [k.HOME]: ue,
-      [k.END]: de
+      ie
+    ), de = {
+      [k.ARROW_UP]: (r) => ce(r),
+      [k.ARROW_DOWN]: (r) => ae(r),
+      [k.HOME]: re,
+      [k.END]: ue
     };
     return {
       // Refs
@@ -860,82 +920,71 @@ const Qe = Je.exports, Ze = {
       selectedListboxItemsRef: o,
       listboxItemsRef: m,
       // Values
-      isAllSelected: S,
-      isAllItemsIncludingDisabled: h,
-      isAnOptionSelected: W,
-      isIndeterminate: _,
-      isMultiLevelSelect: d,
+      isAllSelected: h,
+      showSelectedItems: K,
+      isIndeterminate: v,
+      isMultiLevelSelect: b,
       flattenedItemsList: u,
       selectedItemsList: a,
-      selectAllCheckboxText: E,
-      selectedOptions: G,
-      slots: l,
+      selectAllCheckboxText: x,
+      selectedOptions: F,
+      slots: s,
       // Enums
       BentoListboxEvent: i,
       // Methods
-      selectAllCategory: I,
-      toggleCheckboxSelection: z,
+      selectAllCategory: R,
+      toggleCheckboxSelection: q,
       toggleSelectAll: y,
       unselectAllCategory: M,
       // Events
-      listboxListeners: be
+      listboxListeners: de
     };
   }
 });
-var st = function() {
-  var e = this, l = e._self._c;
-  return e._self._setupProxy, l("div", e._g({ directives: [{ name: "bento-keyboard-navigation-directive", rawName: "v-bento-keyboard-navigation-directive" }], staticClass: "b-listbox-multi-select" }, e.listboxListeners), [l("bento-listbox-option", { ref: "selectAllListboxItemsRef", staticClass: "b-listbox-multi-select__option" }, [l("bento-checkbox", { attrs: { "aria-label": e.selectAllCheckboxText, "model-value": e.isAllSelected, indeterminate: e.isIndeterminate }, on: { "update:model-value": e.toggleSelectAll } }), l("bento-typography", { attrs: { el: "span" } }, [e._v(" " + e._s(e.selectAllCheckboxText) + " ")])], 1), e.isAnOptionSelected ? l("div", [l("hr", { staticClass: "b-listbox-multi-select__divider" }), l("listbox-multi-select-options", { ref: "selectedListboxItemsRef", attrs: { items: e.selectedOptions, "is-option-disabled": e.isOptionDisabled, "is-multi-level": e.isMultiLevelSelect, "static-categories": e.staticCategories, 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);
-  }, e.BentoListboxEvent.TAB, function(s) {
-    return e.toggleCheckboxSelection(e.BentoListboxEvent.TAB, s);
-  }, 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(o) {
-      return [e._t(n, null, null, o)];
-    } };
-  })], null, !0) })], 1) : e._e(), l("div", { directives: [{ name: "show", rawName: "v-show", value: !e.isAllItemsIncludingDisabled, expression: "!isAllItemsIncludingDisabled" }] }, [l("hr", { staticClass: "b-listbox-multi-select__divider" }), l("listbox-multi-select-options", { ref: "listboxItemsRef", attrs: { items: e.items, "is-option-disabled": e.isOptionDisabled, "is-multi-level": e.isMultiLevelSelect, "static-categories": e.staticCategories, searching: e.searching, "selected-items-list": e.selectedItemsList }, on: e._d({ "toggle-checkbox-selection": function(s) {
-    return e.toggleCheckboxSelection(e.BentoListboxEvent.SELECT, s);
-  }, "select-category": e.selectAllCategory, "unselect-category": e.unselectAllCategory }, [e.BentoListboxEvent.SPACE, function(s) {
-    return e.toggleCheckboxSelection(e.BentoListboxEvent.SPACE, s);
-  }, e.BentoListboxEvent.TAB, function(s) {
-    return e.toggleCheckboxSelection(e.BentoListboxEvent.TAB, s);
-  }, e.BentoListboxEvent.ENTER, function(s) {
-    return e.toggleCheckboxSelection(e.BentoListboxEvent.ENTER, s);
-  }]), scopedSlots: e._u([e._l(e.slots, function(s, n) {
+var ut = function() {
+  var e = this, s = e._self._c;
+  return e._self._setupProxy, s("div", e._g({ directives: [{ name: "bento-keyboard-navigation-directive", rawName: "v-bento-keyboard-navigation-directive" }], staticClass: "b-listbox-multi-select" }, e.listboxListeners), [s("bento-listbox-option", { ref: "selectAllListboxItemsRef", staticClass: "b-listbox-multi-select__option" }, [s("bento-checkbox", { attrs: { "aria-label": e.selectAllCheckboxText, "model-value": e.isAllSelected, indeterminate: e.isIndeterminate }, on: { "update:model-value": e.toggleSelectAll } }), s("bento-typography", { attrs: { el: "span" } }, [e._v(" " + e._s(e.selectAllCheckboxText) + " ")])], 1), e.showSelectedItems ? s("div", [s("hr", { staticClass: "b-listbox-multi-select__divider" }), s("listbox-multi-select-chips", { ref: "selectedListboxItemsRef", attrs: { items: e.selectedOptions, "is-option-disabled": e.isOptionDisabled }, on: { "unselect-category": e.unselectAllCategory, "unselect-item": function(l) {
+    return e.toggleCheckboxSelection(e.BentoListboxEvent.SELECT, l);
+  } } })], 1) : e._e(), s("hr", { staticClass: "b-listbox-multi-select__divider" }), s("listbox-multi-select-options", { ref: "listboxItemsRef", attrs: { items: e.items, "is-option-disabled": e.isOptionDisabled, "is-multi-level": e.isMultiLevelSelect, "static-categories": e.staticCategories, searching: e.searching, "selected-items-list": e.selectedItemsList }, on: e._d({ "toggle-checkbox-selection": function(l) {
+    return e.toggleCheckboxSelection(e.BentoListboxEvent.SELECT, l);
+  }, "select-category": e.selectAllCategory, "unselect-category": e.unselectAllCategory }, [e.BentoListboxEvent.SPACE, function(l) {
+    return e.toggleCheckboxSelection(e.BentoListboxEvent.SPACE, l);
+  }, e.BentoListboxEvent.TAB, function(l) {
+    return e.toggleCheckboxSelection(e.BentoListboxEvent.TAB, l);
+  }, e.BentoListboxEvent.ENTER, function(l) {
+    return e.toggleCheckboxSelection(e.BentoListboxEvent.ENTER, l);
+  }]), scopedSlots: e._u([e._l(e.slots, function(l, n) {
     return { key: n, fn: function(o) {
       return [e._t(n, null, null, o)];
     } };
-  })], null, !0) })], 1)], 1);
-}, lt = [], nt = /* @__PURE__ */ P(
-  tt,
-  st,
-  lt,
+  })], null, !0) })], 1);
+}, dt = [], _t = /* @__PURE__ */ N(
+  rt,
+  ut,
+  dt,
   !1,
   null,
-  "2a48c62f",
+  "a2c4d112",
   null,
   null
 );
-const Q = nt.exports, ot = {
+const Q = _t.exports, bt = {
   "en-US": {
     showMore: "Show more",
     loading: "Loading"
   }
-}, it = 36, at = N({
+}, vt = 36, mt = D({
   name: "bento-listbox",
   components: {
-    BentoEmptyState: me,
-    BentoListboxSingleSelect: Ue,
+    BentoEmptyState: ve,
+    BentoListboxSingleSelect: Ye,
     BentoListboxMultiSelect: Q,
-    BentoTypography: w,
-    BentoLoadingIndicator: ve,
-    BentoLoadingButton: xe
+    BentoTypography: $,
+    BentoLoadingIndicator: be,
+    BentoLoadingButton: Se
   },
   directives: { BentoKeyboardNavigationDirective: H },
-  i18n: { messages: ot },
+  i18n: { messages: bt },
   props: {
     /**
      * Defines a string value that labels an interactive element.
@@ -991,8 +1040,8 @@ const Q = nt.exports, ot = {
      */
     lazyLoadType: {
       type: String,
-      default: $.NONE,
-      validator: (t) => Object.values($).includes(t)
+      default: w.NONE,
+      validator: (t) => Object.values(w).includes(t)
     },
     /**
      * If enabled, the user will be able to select multiple items.
@@ -1039,49 +1088,49 @@ const Q = nt.exports, ot = {
     i.ESCAPE,
     i.TAB
   ],
-  setup(t, { emit: e, slots: l }) {
-    const s = T([]), n = Y(t, "items"), { t: o } = j(), m = c(() => t.lazyLoadType !== $.AUTOMATIC), a = c(() => t.lazyLoadType === $.AUTOMATIC), d = () => {
-      var h;
-      return typeof (t == null ? void 0 : t.virtualScroll) == "object" && ((h = t == null ? void 0 : t.virtualScroll) != null && h.itemHeight) ? t.virtualScroll.itemHeight : it;
+  setup(t, { emit: e, slots: s }) {
+    const l = L([]), n = V(t, "items"), { t: o } = z(), m = c(() => t.lazyLoadType !== w.AUTOMATIC), a = c(() => t.lazyLoadType === w.AUTOMATIC), b = () => {
+      var T;
+      return typeof (t == null ? void 0 : t.virtualScroll) == "object" && ((T = t == null ? void 0 : t.virtualScroll) != null && T.itemHeight) ? t.virtualScroll.itemHeight : vt;
     }, {
       containerRef: u,
-      containerProps: x,
-      onScroll: O,
-      list: L,
-      wrapperProps: f
+      containerProps: S,
+      onScroll: A,
+      list: I,
+      wrapperProps: d
     } = Ee(n, {
-      itemHeight: d(),
+      itemHeight: b(),
       // Disable virtual scrolling if not enabled or if lazy loading is enabled or if multi-select
       disabled: (t == null ? void 0 : t.multiple) || (t == null ? void 0 : t.virtualScroll) === !1 || (t == null ? void 0 : t.lazyLoadType) !== "none"
-    }), E = c(
+    }), x = c(
       () => m.value ? "true" : void 0
-    ), B = c(
+    ), E = c(
       () => m.value && t.loading ? "true" : "false"
-    ), A = c(
+    ), B = c(
       () => m.value ? "polite" : void 0
-    ), g = (h) => (F) => {
-      e(h, F);
-    }, C = () => {
+    ), g = (T) => (G) => {
+      e(T, G);
+    }, O = () => {
       e(i.SHOW_MORE);
-    }, S = fe(() => {
-      const h = u.value;
-      if (!h)
+    }, h = me(() => {
+      const T = u.value;
+      if (!T)
         return;
-      const F = Math.round(h.scrollTop) + h.clientHeight >= h.scrollHeight;
-      t.hasMoreItems && F && !t.loading && C();
-    }), _ = () => {
-      a.value ? S() : O();
+      const G = Math.round(T.scrollTop) + T.clientHeight >= T.scrollHeight;
+      t.hasMoreItems && G && !t.loading && O();
+    }), v = () => {
+      a.value ? h() : A();
     }, y = c(() => {
-      var h;
-      return t.searching && ((h = t.items) == null ? void 0 : h.length) === 0;
-    }), I = c(
-      () => t.lazyLoadType === $.BUTTON && t.hasMoreItems
+      var T;
+      return t.searching && ((T = t.items) == null ? void 0 : T.length) === 0;
+    }), R = c(
+      () => t.lazyLoadType === w.BUTTON && t.hasMoreItems
     ), M = c(
       () => t.loading ? J.LOADING : J.START
-    ), z = c(() => t.loading ? o("loading") : o("showMore")), G = c(() => ({
+    ), q = c(() => t.loading ? o("loading") : o("showMore")), F = c(() => ({
       ...t.emptyState,
       variant: "condensed"
-    })), W = {
+    })), K = {
       [i.SELECT]: g(i.SELECT),
       [i.SPACE]: g(i.SPACE),
       [i.TAB]: g(i.TAB),
@@ -1090,60 +1139,60 @@ const Q = nt.exports, ot = {
     return {
       // Refs
       listboxRef: u,
-      listboxItemRef: s,
+      listboxItemRef: l,
       // a11y
-      ariaAtomic: E,
-      ariaBusy: B,
-      ariaLive: A,
+      ariaAtomic: x,
+      ariaBusy: E,
+      ariaLive: B,
       // Values
-      containerProps: x,
+      containerProps: S,
       isSearchResultEmpty: y,
-      limitedEmptyStateProps: G,
+      limitedEmptyStateProps: F,
       loadingButtonState: M,
-      slots: l,
-      shouldDisplayShowMoreButton: I,
-      showMoreButtonText: z,
-      virtualisedItems: L,
-      wrapperProps: f,
+      slots: s,
+      shouldDisplayShowMoreButton: R,
+      showMoreButtonText: q,
+      virtualisedItems: I,
+      wrapperProps: d,
       // Enums
       BentoKeyboardNavigationKeyDownEvent: k,
       BentoListboxEvent: i,
       // Methods
-      onListboxContainerScroll: _,
+      onListboxContainerScroll: v,
       onOptionSelected: g,
-      emitShowMore: C,
-      listboxListeners: W
+      emitShowMore: O,
+      listboxListeners: K
     };
   }
 });
-var ct = function() {
-  var e = this, l = e._self._c;
-  return e._self._setupProxy, l("div", e._b({ directives: [{ name: "bento-keyboard-navigation-directive", rawName: "v-bento-keyboard-navigation-directive" }], staticClass: "b-listbox", attrs: { id: e.id, role: "listbox", tabindex: "-1", "aria-busy": e.ariaBusy, "aria-atomic": e.ariaAtomic, "aria-label": e.ariaLabel, "aria-live": e.ariaLive }, on: { scroll: e.onListboxContainerScroll } }, "div", e.containerProps, !1), [l("div", e._b({}, "div", e.wrapperProps, !1), [e.isSearchResultEmpty ? l("div", { staticClass: "b-listbox__empty-search-message" }, [e.emptyState ? l("bento-empty-state", e._b({}, "bento-empty-state", e.limitedEmptyStateProps, !1)) : l("bento-typography", { attrs: { el: "span" } }, [e._v(e._s(e.noResultsMessage))])], 1) : [e.multiple ? [l("bento-listbox-multi-select", e._g({ ref: "listboxItemRef", attrs: { items: e.items, "static-categories": e.staticCategories, "selected-values": e.selectedValue, searching: e.searching, "is-option-disabled": e.isOptionDisabled }, scopedSlots: e._u([e._l(e.slots, function(s, n) {
+var ft = function() {
+  var e = this, s = e._self._c;
+  return e._self._setupProxy, s("div", e._b({ directives: [{ name: "bento-keyboard-navigation-directive", rawName: "v-bento-keyboard-navigation-directive" }], staticClass: "b-listbox", attrs: { id: e.id, role: "listbox", tabindex: "-1", "aria-busy": e.ariaBusy, "aria-atomic": e.ariaAtomic, "aria-label": e.ariaLabel, "aria-live": e.ariaLive }, on: { scroll: e.onListboxContainerScroll } }, "div", e.containerProps, !1), [s("div", e._b({}, "div", e.wrapperProps, !1), [e.isSearchResultEmpty ? s("div", { staticClass: "b-listbox__empty-search-message" }, [e.emptyState ? s("bento-empty-state", e._b({}, "bento-empty-state", e.limitedEmptyStateProps, !1)) : s("bento-typography", { attrs: { el: "span" } }, [e._v(e._s(e.noResultsMessage))])], 1) : [e.multiple ? [s("bento-listbox-multi-select", e._g({ ref: "listboxItemRef", attrs: { items: e.items, "static-categories": e.staticCategories, "selected-values": e.selectedValue, searching: e.searching, "is-option-disabled": e.isOptionDisabled }, scopedSlots: e._u([e._l(e.slots, function(l, n) {
     return { key: n, fn: function(o) {
       return [e._t(n, null, null, o)];
     } };
-  })], null, !0) }, e.listboxListeners))] : [l("bento-listbox-single-select", e._g({ ref: "listboxItemRef", attrs: { items: e.virtualisedItems, "selected-value": e.selectedValue, "static-categories": e.staticCategories, "is-option-disabled": e.isOptionDisabled }, scopedSlots: e._u([e._l(e.slots, function(s, n) {
+  })], null, !0) }, e.listboxListeners))] : [s("bento-listbox-single-select", e._g({ ref: "listboxItemRef", attrs: { items: e.virtualisedItems, "selected-value": e.selectedValue, "static-categories": e.staticCategories, "is-option-disabled": e.isOptionDisabled }, scopedSlots: e._u([e._l(e.slots, function(l, n) {
     return { key: n, fn: function(o) {
       return [e._t(n, null, null, o)];
     } };
-  })], null, !0) }, e.listboxListeners))], e.shouldDisplayShowMoreButton ? l("div", { staticClass: "b-listbox__lazy-load" }, [l("bento-loading-button", { attrs: { state: e.loadingButtonState, variant: "secondary" }, on: { "!click": function(s) {
+  })], null, !0) }, e.listboxListeners))], e.shouldDisplayShowMoreButton ? s("div", { staticClass: "b-listbox__lazy-load" }, [s("bento-loading-button", { attrs: { state: e.loadingButtonState, variant: "secondary" }, on: { "!click": function(l) {
     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)]);
-}, rt = [], ut = /* @__PURE__ */ P(
-  at,
-  ct,
-  rt,
+  } } }, [e._v(" " + e._s(e.showMoreButtonText) + " ")])], 1) : e.loading ? s("div", { staticClass: "b-listbox__lazy-load" }, [s("bento-loading-indicator")], 1) : e._e()]], 2)]);
+}, gt = [], yt = /* @__PURE__ */ N(
+  mt,
+  ft,
+  gt,
   !1,
   null,
   "17128845",
   null,
   null
 );
-const Tt = ut.exports;
+const Pt = yt.exports;
 export {
-  Tt as B,
-  $ as a,
+  Pt as B,
+  w as a,
   i as b,
-  et as u
+  ct as u
 };
-//# sourceMappingURL=listbox.23c6b393.js.map
+//# sourceMappingURL=listbox.e5d70b9b.js.map