@adyen/bento-vue3 1.52.0 → 1.53.0

package/dist/chunks/{use-cached-selected-values.DDP7LJoI.js → use-cached-selected-values.Chb18cq_.js}

@@ -1,4 +1,4 @@
-import { computed as v, ref as M, onMounted as Le, onUnmounted as xe, watch as Oe, defineComponent as X, resolveComponent as A, createElementBlock as L, openBlock as g, createVNode as P, createElementVNode as F, withCtx as O, createTextVNode as z, toDisplayString as G, renderSlot as Y, mergeProps as U, withKeys as be, createCommentVNode as W, createBlock as B, withModifiers as Ke, normalizeProps as te, guardReactiveProps as ie, withDirectives as ce, vShow as Ie, toRef as le, resolveDirective as Ae, toHandlers as se, Fragment as Z, renderList as x, createSlots as re, normalizeClass as ve, useSlots as We, unref as w, normalizeStyle as qe } from "vue";
+import { computed as v, ref as P, onMounted as Te, onUnmounted as xe, watch as Oe, defineComponent as X, resolveComponent as A, createElementBlock as T, openBlock as f, createVNode as D, createElementVNode as F, withCtx as O, createTextVNode as z, toDisplayString as G, renderSlot as Y, mergeProps as U, withKeys as be, createCommentVNode as W, createBlock as B, withModifiers as Ke, normalizeProps as te, guardReactiveProps as ie, withDirectives as ce, vShow as Ie, toRef as le, resolveDirective as Ae, toHandlers as se, Fragment as Z, renderList as x, createSlots as re, normalizeClass as ve, useSlots as We, unref as w, normalizeStyle as qe } from "vue";
 import { B as K, a as pe } from "./keyboard-navigation.CqgGzfZQ.js";
 import "./events.FNmSWp_P.js";
 import { B as oe } from "./typography.DN5eC5ch.js";
@@ -6,7 +6,7 @@ import { B as je } from "./loading-indicator.DEepb9Wl.js";
 import { B as He } from "./empty-state.BffIZp3a.js";
 import { u as ye } from "./i18n.D9azDLPe.js";
 import { d as Xe } from "./debounce.DUTu11PS.js";
-import { B as Se } from "./checkbox.erdZ58Kk.js";
+import { B as Se } from "./checkbox.CXZQtFhM.js";
 import { B as Je } from "./chip.3T0x6FuI.js";
 import { _ as q } from "./_plugin-vue_export-helper.CHgC5LLL.js";
 import { C as Ze, a as Qe } from "./chevron-up.-0oLlHmh.js";
@@ -33,7 +33,7 @@ const $e = (e, t, s, c) => {
   };
 };
 function st(e, { disabled: t, itemHeight: s, overscan: c = 5, prefixHeight: b }) {
-  const i = M(null), l = M([]), u = M(0), a = M(0), n = M(0);
+  const i = P(null), l = P([]), u = P(0), a = P(0), n = P(0);
   let C;
   const o = v(() => {
     const y = typeof s == "number" ? e.value.length * s : e.value.reduce((k, E, I) => k + s(I), 0), h = typeof s == "number" ? u.value * s : e.value.slice(0, u.value).reduce((k, E, I) => k + s(I), 0);
@@ -72,10 +72,10 @@ function st(e, { disabled: t, itemHeight: s, overscan: c = 5, prefixHeight: b })
       const y = R();
       u.value = S(), a.value = Math.min(u.value + y + c, e.value.length), l.value = e.value.slice(u.value, a.value);
     }
-  }, D = () => {
+  }, M = () => {
     $();
   };
-  t || (Le(() => {
+  t || (Te(() => {
     i.value && (n.value = i.value.clientHeight, C = tt(i.value, ({ clientHeight: y }) => {
       n.value = y, $();
     }), $());
@@ -101,7 +101,7 @@ function st(e, { disabled: t, itemHeight: s, overscan: c = 5, prefixHeight: b })
   } : {
     containerRef: i,
     containerProps: p,
-    onScroll: D,
+    onScroll: M,
     list: l,
     wrapperProps: o
   };
@@ -124,8 +124,8 @@ const lt = X({
 }), ot = { class: "b-listbox-single-select-category" };
 function nt(e, t, s, c, b, i) {
   const l = A("bento-typography");
-  return g(), L("div", ot, [
-    P(l, {
+  return f(), T("div", ot, [
+    D(l, {
       variant: "caption",
       el: "span",
       class: "b-listbox-single-select-category__label-text"
@@ -175,7 +175,7 @@ const at = /* @__PURE__ */ q(lt, [["render", nt], ["__scopeId", "data-v-a90eff17
   }
 });
 function rt(e, t, s, c, b, i) {
-  return g(), L("label", U({
+  return f(), T("label", U({
     class: ["b-listbox-option", e.conditionalClasses],
     role: "option"
   }, e.$attrs, {
@@ -197,14 +197,14 @@ const ct = {
   }
 }, ut = { key: 0 };
 function dt(e, t, s, c, b, i) {
-  return g(), L("svg", U({ role: "img" }, e.$attrs, {
+  return f(), T("svg", U({ role: "img" }, e.$attrs, {
     class: "ui-assets-icons-16",
     xmlns: "http://www.w3.org/2000/svg",
     width: "16",
     height: "16",
     fill: "none"
   }), [
-    e.$attrs["svg-title"] ? (g(), L("title", ut, G(e.$attrs["svg-title"]), 1)) : W("", !0),
+    e.$attrs["svg-title"] ? (f(), T("title", ut, G(e.$attrs["svg-title"]), 1)) : W("", !0),
     t[0] || (t[0] = F("path", {
       fill: "#00112C",
       d: "M15.0608 4.00011L14.0001 2.93945L6.00011 10.9395L2.00011 6.93945L0.939453 8.00011L6.00011 13.0608L15.0608 4.00011Z"
@@ -255,7 +255,7 @@ const mt = /* @__PURE__ */ q(ct, [["render", dt]]), bt = X({
 }), vt = { class: "b-listbox-single-select-option__text" }, ft = { class: "b-listbox-single-select-option__check-icon" };
 function gt(e, t, s, c, b, i) {
   const l = A("bento-typography"), u = A("checkmark-icon"), a = A("bento-listbox-option");
-  return g(), B(a, {
+  return f(), B(a, {
     class: "b-listbox-single-select-option",
     disabled: e.disabled,
     selected: e.selected,
@@ -270,13 +270,13 @@ function gt(e, t, s, c, b, i) {
     default: O(() => [
       Y(e.$slots, "default", te(ie(e.option)), () => [
         F("span", vt, [
-          P(l, { el: "span" }, {
+          D(l, { el: "span" }, {
             default: O(() => [
               z(G(e.option.label), 1)
             ]),
             _: 1
           }),
-          e.option.description ? (g(), B(l, {
+          e.option.description ? (f(), B(l, {
             key: 0,
             class: "b-listbox-single-select-option__description",
             el: "span"
@@ -289,7 +289,7 @@ function gt(e, t, s, c, b, i) {
         ])
       ], !0),
       F("span", ft, [
-        ce(P(u, { "svg-title": "selected" }, null, 512), [
+        ce(D(u, { "svg-title": "selected" }, null, 512), [
           [Ie, e.selected]
         ])
       ])
@@ -300,8 +300,8 @@ function gt(e, t, s, c, b, i) {
 const pt = /* @__PURE__ */ q(bt, [["render", gt], ["__scopeId", "data-v-226f4c84"]]), ke = ({ items: e, isOptionDisabled: t, hasStaticCategories: s }, c) => {
   const b = v(
     () => s.value ? e.value.flatMap((p) => p.items) : e.value
-  ), i = v(() => b.value.length - 1), l = M(0);
-  Le(() => {
+  ), i = v(() => b.value.length - 1), l = P(0);
+  Te(() => {
     t && (l.value = e.value.findIndex((p) => !t(p)));
   });
   const u = (p) => !t || !!t && t(e.value[p]), a = (p) => !t || !!t && !t(e.value[p]), n = (p) => {
@@ -404,7 +404,7 @@ const pt = /* @__PURE__ */ q(bt, [["render", gt], ["__scopeId", "data-v-226f4c84
   },
   emits: [d.SELECT, d.ENTER, d.SPACE, d.TAB],
   setup(e, { emit: t, expose: s, slots: c }) {
-    const b = M(null), i = M([]), l = v(() => {
+    const b = P(null), i = P([]), l = v(() => {
       var y;
       return !!((y = e.selectedValue) != null && y.length) && e.selectedValue.at(0);
     }), u = v(() => !!e.items.some(({ items: y }) => !!y)), a = (y) => (h) => {
@@ -425,7 +425,7 @@ const pt = /* @__PURE__ */ q(bt, [["render", gt], ["__scopeId", "data-v-226f4c84
         hasStaticCategories: le(e, "staticCategories")
       },
       n
-    ), D = {
+    ), M = {
       [K.ARROW_UP]: o,
       [K.ARROW_DOWN]: C,
       [K.HOME]: S,
@@ -460,21 +460,21 @@ const pt = /* @__PURE__ */ q(bt, [["render", gt], ["__scopeId", "data-v-226f4c84
       // Methods
       onOptionSelected: a,
       // Keyboard navigation
-      listboxListeners: D,
+      listboxListeners: M,
       listboxOptionListeners: p
     };
   }
 });
 function St(e, t, s, c, b, i) {
   const l = A("bento-listbox-single-select-option"), u = A("bento-listbox-single-select-category"), a = Ae("bento-keyboard-navigation-directive");
-  return ce((g(), L("div", U({ ref: "listboxRef" }, se(e.listboxListeners, !0)), [
-    e.hasCategories && e.staticCategories ? (g(!0), L(Z, { key: 0 }, x(e.items, (n) => (g(), B(u, {
+  return ce((f(), T("div", U({ ref: "listboxRef" }, se(e.listboxListeners, !0)), [
+    e.hasCategories && e.staticCategories ? (f(!0), T(Z, { key: 0 }, x(e.items, (n) => (f(), B(u, {
       key: n.value,
       "category-label": n.label,
       role: "group"
     }, {
       default: O(() => [
-        (g(!0), L(Z, null, x(n.items, (C) => (g(), B(l, U({
+        (f(!0), T(Z, null, x(n.items, (C) => (f(), B(l, U({
           key: C.value,
           ref_for: !0,
           ref: "listboxItemRef",
@@ -492,7 +492,7 @@ function St(e, t, s, c, b, i) {
         ]), 1040, ["option", "disabled", "selected"]))), 128))
       ]),
       _: 2
-    }, 1032, ["category-label"]))), 128)) : (g(!0), L(Z, { key: 1 }, x(e.items, (n) => (g(), B(l, U({
+    }, 1032, ["category-label"]))), 128)) : (f(!0), T(Z, { key: 1 }, x(e.items, (n) => (f(), B(l, U({
       key: n.value,
       ref_for: !0,
       ref: "listboxItemRef",
@@ -570,7 +570,7 @@ const Et = {
   },
   emits: [ae.SELECT_CATEGORY, ae.UNSELECT_CATEGORY],
   setup(e, { emit: t }) {
-    const s = M(!1), { t: c } = ye(), b = (E) => e.isOptionDisabled ? e.isOptionDisabled(E) : !1, i = v(
+    const s = P(!1), { t: c } = ye(), b = (E) => e.isOptionDisabled ? e.isOptionDisabled(E) : !1, i = v(
       () => e.category.items.every((E) => b(E))
     ), l = le(e, "staticCategories"), u = v(() => s.value || e.staticCategories), a = v(() => ({
       [`b-listbox-multi-select-category--${fe.DISABLED}`]: i.value,
@@ -604,14 +604,14 @@ const Et = {
         el: "span",
         variant: e.staticCategories ? "caption" : "body"
       })
-    ), D = () => {
+    ), M = () => {
       t(ae.SELECT_CATEGORY);
     }, p = () => {
       t(ae.UNSELECT_CATEGORY);
     }, { isAllSelected: y, isIndeterminate: h, toggleSelectAll: k } = $e(
       S,
       o,
-      D,
+      M,
       p
     );
     return {
@@ -632,14 +632,14 @@ const Et = {
     };
   }
 }), _t = { class: "b-listbox-multi-select-category__label" };
-function Tt(e, t, s, c, b, i) {
+function Lt(e, t, s, c, b, i) {
   const l = A("bento-checkbox"), u = A("bento-typography"), a = A("chevron-up-icon"), n = A("chevron-down-icon"), C = A("bento-listbox-option");
-  return g(), L("div", null, [
-    P(C, {
+  return f(), T("div", null, [
+    D(C, {
       class: ve(["b-listbox-multi-select-category__option", e.conditionalClass])
     }, {
       default: O(() => [
-        e.isStaticCategory ? W("", !0) : (g(), B(l, {
+        e.isStaticCategory ? W("", !0) : (f(), B(l, {
           key: 0,
           "model-value": e.isAllSelected,
           indeterminate: e.isIndeterminate,
@@ -649,22 +649,22 @@ function Tt(e, t, s, c, b, i) {
           "onUpdate:modelValue": e.toggleSelectAll
         }, null, 8, ["model-value", "indeterminate", "disabled", "aria-label", "value", "onUpdate:modelValue"])),
         F("span", _t, [
-          P(u, U(e.categoryLabelProps, { class: "b-listbox-multi-select-category__label-text" }), {
+          D(u, U(e.categoryLabelProps, { class: "b-listbox-multi-select-category__label-text" }), {
             default: O(() => [
               z(G(e.category.label), 1)
             ]),
             _: 1
           }, 16),
-          e.isStaticCategory ? W("", !0) : (g(), L("div", {
+          e.isStaticCategory ? W("", !0) : (f(), T("div", {
             key: 0,
             class: "b-listbox-multi-select-category__label-chevron",
             "data-testid": "toggle-listbox",
             onClickCapture: t[0] || (t[0] = (...o) => e.toggleOpen && e.toggleOpen(...o))
           }, [
-            e.isOpen ? (g(), B(a, {
+            e.isOpen ? (f(), B(a, {
               key: 0,
               "svg-title": e.chevronTitle
-            }, null, 8, ["svg-title"])) : (g(), B(n, {
+            }, null, 8, ["svg-title"])) : (f(), B(n, {
               key: 1,
               "svg-title": e.chevronTitle
             }, null, 8, ["svg-title"]))
@@ -680,7 +680,7 @@ function Tt(e, t, s, c, b, i) {
     ])
   ]);
 }
-const Lt = /* @__PURE__ */ q(ht, [["render", Tt], ["__scopeId", "data-v-9a00de22"]]);
+const Tt = /* @__PURE__ */ q(ht, [["render", Lt], ["__scopeId", "data-v-9a00de22"]]);
 var H = /* @__PURE__ */ ((e) => (e.SELECT_CATEGORY = "select-category", e.TOGGLE_CHECKBOX_SELECTION = "toggle-checkbox-selection", e.UNSELECT_CATEGORY = "unselect-category", e))(H || {});
 const Ot = X({
   name: "listbox-multi-select-options",
@@ -688,7 +688,7 @@ const Ot = X({
     BentoCheckbox: Se,
     BentoListboxOption: de,
     BentoTypography: oe,
-    ListboxMultiSelectCategory: Lt
+    ListboxMultiSelectCategory: Tt
   },
   props: {
     /**
@@ -780,17 +780,17 @@ const Ot = X({
 }), It = { class: "b-listbox-multi-select__option-text" }, At = { class: "b-listbox-multi-select__option-text" };
 function $t(e, t, s, c, b, i) {
   const l = A("bento-checkbox"), u = A("bento-typography"), a = A("bento-listbox-option"), n = A("listbox-multi-select-options", !0), C = A("listbox-multi-select-category");
-  return g(), L("div", null, [
-    (g(!0), L(Z, null, x(e.items, (o) => (g(), L("div", {
+  return f(), T("div", null, [
+    (f(!0), T(Z, null, x(e.items, (o) => (f(), T("div", {
       key: `selected-${o.value}`
     }, [
-      e.searching && e.isMultiLevel ? (g(), B(a, {
+      e.searching && e.isMultiLevel ? (f(), B(a, {
         key: 0,
         class: ve(["b-listbox-multi-select-options", e.conditionalClasses]),
         disabled: e.isOptionDisabled ? e.isOptionDisabled(o) : null
       }, {
         default: O(() => [
-          P(l, {
+          D(l, {
             "model-value": e.isOptionSelected(o),
             "aria-label": o.label,
             disabled: e.isOptionDisabled ? e.isOptionDisabled(o) : null,
@@ -799,13 +799,13 @@ function $t(e, t, s, c, b, i) {
           }, null, 8, ["model-value", "aria-label", "disabled", "value", "onUpdate:modelValue"]),
           Y(e.$slots, "default", U({ ref_for: !0 }, o), () => [
             F("span", It, [
-              P(u, { el: "span" }, {
+              D(u, { el: "span" }, {
                 default: O(() => [
                   z(G(o.label), 1)
                 ]),
                 _: 2
               }, 1024),
-              e.shouldShowDescription(o) ? (g(), B(u, {
+              e.shouldShowDescription(o) ? (f(), B(u, {
                 key: 0,
                 class: "b-listbox-multi-select__option-description",
                 el: "span"
@@ -819,8 +819,8 @@ function $t(e, t, s, c, b, i) {
           ], !0)
         ]),
         _: 2
-      }, 1032, ["class", "disabled"])) : (g(), L(Z, { key: 1 }, [
-        o.items ? (g(), B(C, {
+      }, 1032, ["class", "disabled"])) : (f(), T(Z, { key: 1 }, [
+        o.items ? (f(), B(C, {
           key: 0,
           category: o,
           "static-categories": e.staticCategories,
@@ -830,7 +830,7 @@ function $t(e, t, s, c, b, i) {
           onUnselectCategory: (S) => e.$emit(e.ListboxMultiSelectOptionsEvent.UNSELECT_CATEGORY, o)
         }, {
           default: O(() => [
-            P(n, {
+            D(n, {
               "category-items": "",
               items: o.items,
               "is-option-disabled": e.isOptionDisabled,
@@ -842,13 +842,13 @@ function $t(e, t, s, c, b, i) {
             }, null, 8, ["items", "is-option-disabled", "is-multi-level", "static-categories", "selected-items-list", "searching"])
           ]),
           _: 2
-        }, 1032, ["category", "static-categories", "is-option-disabled", "selected-items-list", "onSelectCategory", "onUnselectCategory"])) : (g(), B(a, {
+        }, 1032, ["category", "static-categories", "is-option-disabled", "selected-items-list", "onSelectCategory", "onUnselectCategory"])) : (f(), B(a, {
           key: 1,
           class: ve(["b-listbox-multi-select-options", e.conditionalClasses]),
           disabled: e.isOptionDisabled ? e.isOptionDisabled(o) : null
         }, {
           default: O(() => [
-            P(l, {
+            D(l, {
               "model-value": e.selectedItemsList,
               "aria-label": o.label,
               disabled: e.isOptionDisabled ? e.isOptionDisabled(o) : null,
@@ -857,13 +857,13 @@ function $t(e, t, s, c, b, i) {
             }, null, 8, ["model-value", "aria-label", "disabled", "value", "onUpdate:modelValue"]),
             Y(e.$slots, "default", U({ ref_for: !0 }, o), () => [
               F("span", At, [
-                P(u, { el: "span" }, {
+                D(u, { el: "span" }, {
                   default: O(() => [
                     z(G(o.label), 1)
                   ]),
                   _: 2
                 }, 1024),
-                e.shouldShowDescription(o) ? (g(), B(u, {
+                e.shouldShowDescription(o) ? (f(), B(u, {
                   key: 0,
                   class: "b-listbox-multi-select__option-description",
                   el: "span"
@@ -918,46 +918,46 @@ const kt = /* @__PURE__ */ q(Ot, [["render", $t], ["__scopeId", "data-v-25938a72
   },
   emits: ["select"],
   setup(e, { emit: t }) {
-    const s = e, c = t, { t: b } = ye({ messages: Be }), i = We(), l = M(null), u = M(null), a = M(null), n = v(() => s.selectedValues.map(({ value: r }) => r)), { isMultiLevelSelect: C, flattenedItemsList: o } = Bt(le(s, "items")), S = (r) => {
-      var T;
-      const f = s.isOptionDisabled(r), m = ((T = n.value) == null ? void 0 : T.includes(r.value)) || !1;
-      return { isDisabled: f, isPreSelected: m };
+    const s = e, c = t, { t: b } = ye({ messages: Be }), i = We(), l = P(null), u = P(null), a = P(null), n = v(() => s.selectedValues.map(({ value: r }) => r)), { isMultiLevelSelect: C, flattenedItemsList: o } = Bt(le(s, "items")), S = (r) => {
+      var L;
+      const g = s.isOptionDisabled(r), m = ((L = n.value) == null ? void 0 : L.includes(r.value)) || !1;
+      return { isDisabled: g, isPreSelected: m };
     }, R = v(() => {
       if (s.searching && C)
         return s.items;
-      const r = o.value.filter((f) => {
-        const { isDisabled: m, isPreSelected: T } = S(f);
-        return m && T || !m;
+      const r = o.value.filter((g) => {
+        const { isDisabled: m, isPreSelected: L } = S(g);
+        return m && L || !m;
       });
-      return s.selectedValues.forEach((f) => {
-        r.find((m) => m.value === f.value) || r.push(f);
+      return s.selectedValues.forEach((g) => {
+        r.find((m) => m.value === g.value) || r.push(g);
       }), r;
     }), $ = v(
       () => {
         var r;
-        return (r = R.value) == null ? void 0 : r.filter((f) => {
+        return (r = R.value) == null ? void 0 : r.filter((g) => {
           var m;
-          return f.items && C.value && s.searching ? f.items.filter(
+          return g.items && C.value && s.searching ? g.items.filter(
             (_) => (s.selectedValues ?? []).includes(_.value)
-          ).length === f.items.length : (m = n.value) == null ? void 0 : m.includes(f.value);
+          ).length === g.items.length : (m = n.value) == null ? void 0 : m.includes(g.value);
         });
       }
-    ), D = () => C.value && !s.searching ? o.value.length : s.items.length, p = v(() => {
-      var T;
-      const r = R.value.length, f = D(), m = ((T = $.value) == null ? void 0 : T.length) || 0;
-      return m === 0 ? b("selectAll", { total: r }) : m === f ? b("allSelected", { total: f }) : m <= f ? b("numberOfTotalSelected", { number: m, total: f }) : b("numbersSelected", { number: m });
+    ), M = () => C.value && !s.searching ? o.value.length : s.items.length, p = v(() => {
+      var L;
+      const r = R.value.length, g = M(), m = ((L = $.value) == null ? void 0 : L.length) || 0;
+      return m === 0 ? b("selectAll", { total: r }) : m === g ? b("allSelected", { total: g }) : m <= g ? b("numberOfTotalSelected", { number: m, total: g }) : b("numbersSelected", { number: m });
     }), y = (r) => {
-      const f = (T) => {
-        const { isDisabled: _, isPreSelected: j } = S(T);
+      const g = (L) => {
+        const { isDisabled: _, isPreSelected: j } = S(L);
         return _ && j || !_;
-      }, m = r.filter(f).filter((T) => !n.value.includes(T.value));
+      }, m = r.filter(g).filter((L) => !n.value.includes(L.value));
       c("select", [...s.selectedValues, ...m]);
     }, h = (r) => {
-      const f = (_) => {
+      const g = (_) => {
         const { isDisabled: j, isPreSelected: Ye } = S(_);
         return !(j && Ye);
-      }, m = r.filter(f).map(({ value: _ }) => _), T = s.selectedValues.filter((_) => !(m != null && m.includes(_.value)));
-      c("select", T);
+      }, m = r.filter(g).map(({ value: _ }) => _), L = s.selectedValues.filter((_) => !(m != null && m.includes(_.value)));
+      c("select", L);
     }, k = () => {
       y(o.value);
     }, E = () => {
@@ -971,21 +971,21 @@ const kt = /* @__PURE__ */ q(Ot, [["render", $t], ["__scopeId", "data-v-25938a72
       y(r.items);
     }, ue = (r) => {
       h(r.items);
-    }, J = (r, f) => {
+    }, J = (r, g) => {
       let m = !1;
-      const T = s.selectedValues.filter(({ value: _ }) => f.value === _ ? (m = !0, !1) : !0);
-      m || T.push(f), c(r, T);
+      const L = s.selectedValues.filter(({ value: _ }) => g.value === _ ? (m = !0, !1) : !0);
+      m || L.push(g), c(r, L);
     }, N = v(() => {
       if (!C.value)
         return s.selectedValues;
-      const r = (_) => n.value.includes(_.value), f = (_) => !s.staticCategories && _.every((j) => r(j));
+      const r = (_) => n.value.includes(_.value), g = (_) => !s.staticCategories && _.every((j) => r(j));
       return s.items.flatMap(
-        (_) => _.items && !f(_.items) ? _.items : _
+        (_) => _.items && !g(_.items) ? _.items : _
       ).filter((_) => _.items ? !0 : r(_));
     }), ne = v(() => {
-      var m, T, _, j;
-      const r = ["automatic", "button"].includes(s.lazyLoadType), f = ((m = s.selectedValues) == null ? void 0 : m.length) > 0 && ((T = $.value) == null ? void 0 : T.length) !== ((_ = o.value) == null ? void 0 : _.length);
-      return r && s.hasMoreItems ? !!((j = s.selectedValues) != null && j.length) : f;
+      var m, L, _, j;
+      const r = ["automatic", "button"].includes(s.lazyLoadType), g = ((m = s.selectedValues) == null ? void 0 : m.length) > 0 && ((L = $.value) == null ? void 0 : L.length) !== ((_ = o.value) == null ? void 0 : _.length);
+      return r && s.hasMoreItems ? !!((j = s.selectedValues) != null && j.length) : g;
     }), Ce = v(() => ["automatic", "button"].includes(s.lazyLoadType) ? !s.hasMoreItems : !0), Re = v(
       () => l.value ? [l.value] : []
     ), De = v(
@@ -995,8 +995,8 @@ const kt = /* @__PURE__ */ q(Ot, [["render", $t], ["__scopeId", "data-v-25938a72
       }
     ), Me = v(
       () => {
-        var r, f;
-        return (f = (r = a.value) == null ? void 0 : r.$children) != null && f.length ? a.value.$children : [];
+        var r, g;
+        return (g = (r = a.value) == null ? void 0 : r.$children) != null && g.length ? a.value.$children : [];
       }
     ), Pe = v(() => ({ label: p, value: I })), Ne = v(() => [
       ...N.value,
@@ -1010,7 +1010,7 @@ const kt = /* @__PURE__ */ q(Ot, [["render", $t], ["__scopeId", "data-v-25938a72
       ][r].$el.focus();
     }, { moveToNextElement: Ue, moveToPreviousElement: Ve, moveToFirstElement: Ge, moveToLastElement: ze } = ke(
       {
-        items: M(Ne),
+        items: P(Ne),
         isOptionDisabled: s.isOptionDisabled,
         hasStaticCategories: le(s, "staticCategories")
       },
@@ -1021,39 +1021,39 @@ const kt = /* @__PURE__ */ q(Ot, [["render", $t], ["__scopeId", "data-v-25938a72
       [K.HOME]: Ge,
       [K.END]: ze
     };
-    return (r, f) => ce((g(), L("div", U({ class: "b-listbox-multi-select" }, se(Fe, !0)), [
-      ne.value ? (g(), L("div", Rt, [
+    return (r, g) => ce((f(), T("div", U({ class: "b-listbox-multi-select" }, se(Fe, !0)), [
+      ne.value ? (f(), T("div", Rt, [
         F("ul", Dt, [
-          (g(!0), L(Z, null, x(N.value, (m) => (g(), L("li", {
+          (f(!0), T(Z, null, x(N.value, (m) => (f(), T("li", {
             key: m.value
           }, [
-            P(w(Je), {
+            D(w(Je), {
               ref_for: !0,
               ref_key: "selectedListboxItemsRef",
               ref: u,
               disabled: r.isOptionDisabled(m),
               label: m.label,
               condensed: "",
-              onClick: (T) => m.items ? ue(m) : J("select", m)
+              onClick: (L) => m.items ? ue(m) : J("select", m)
             }, null, 8, ["disabled", "label", "onClick"])
           ]))), 128))
         ]),
-        f[4] || (f[4] = F("hr", { class: "b-listbox-multi-select__divider" }, null, -1))
+        g[4] || (g[4] = F("hr", { class: "b-listbox-multi-select__divider" }, null, -1))
       ])) : W("", !0),
-      Ce.value ? (g(), B(w(de), {
+      Ce.value ? (f(), B(w(de), {
         key: 1,
         ref_key: "selectAllListboxItemsRef",
         ref: l,
         class: "b-listbox-multi-select__option"
       }, {
         default: O(() => [
-          P(w(Se), {
+          D(w(Se), {
             "aria-label": p.value,
             "model-value": w(I),
             indeterminate: w(V),
             "onUpdate:modelValue": w(Q)
           }, null, 8, ["aria-label", "model-value", "indeterminate", "onUpdate:modelValue"]),
-          P(w(oe), {
+          D(w(oe), {
             el: "span",
             "aria-hidden": "true"
           }, {
@@ -1065,8 +1065,8 @@ const kt = /* @__PURE__ */ q(Ot, [["render", $t], ["__scopeId", "data-v-25938a72
         ]),
         _: 1
       }, 512)) : W("", !0),
-      Ce.value ? (g(), L("hr", Mt)) : W("", !0),
-      P(w(kt), {
+      Ce.value ? (f(), T("hr", Mt)) : W("", !0),
+      D(w(kt), {
         ref_key: "listboxItemsRef",
         ref: a,
         items: r.items,
@@ -1075,17 +1075,17 @@ const kt = /* @__PURE__ */ q(Ot, [["render", $t], ["__scopeId", "data-v-25938a72
         "static-categories": r.staticCategories,
         searching: r.searching,
         "selected-items-list": n.value,
-        onToggleCheckboxSelection: f[0] || (f[0] = (m) => J("select", m)),
+        onToggleCheckboxSelection: g[0] || (g[0] = (m) => J("select", m)),
         onSelectCategory: me,
         onUnselectCategory: ue,
-        onSpacePressed: f[1] || (f[1] = (m) => J(w(d).SPACE, m)),
-        onTabPressed: f[2] || (f[2] = (m) => J(w(d).TAB, m)),
-        onEnterPressed: f[3] || (f[3] = (m) => J(w(d).ENTER, m))
+        onSpacePressed: g[1] || (g[1] = (m) => J(w(d).SPACE, m)),
+        onTabPressed: g[2] || (g[2] = (m) => J(w(d).TAB, m)),
+        onEnterPressed: g[3] || (g[3] = (m) => J(w(d).ENTER, m))
       }, re({ _: 2 }, [
-        x(w(i), (m, T) => ({
-          name: T,
+        x(w(i), (m, L) => ({
+          name: L,
           fn: O((_) => [
-            Y(r.$slots, T, te(ie(_)), void 0, !0)
+            Y(r.$slots, L, te(ie(_)), void 0, !0)
           ])
         }))
       ]), 1032, ["items", "is-option-disabled", "is-multi-level", "static-categories", "searching", "selected-items-list"])
@@ -1093,7 +1093,7 @@ const kt = /* @__PURE__ */ q(Ot, [["render", $t], ["__scopeId", "data-v-25938a72
       [w(pe)]
     ]);
   }
-}), _e = /* @__PURE__ */ q(Nt, [["__scopeId", "data-v-2d553b90"]]), Te = {
+}), _e = /* @__PURE__ */ q(Nt, [["__scopeId", "data-v-2d553b90"]]), Le = {
   "en-US": {
     loading: "Loading",
     showMore: "Show more"
@@ -1117,7 +1117,7 @@ const kt = /* @__PURE__ */ q(Ot, [["render", $t], ["__scopeId", "data-v-25938a72
     BentoLoadingButton: et
   },
   directives: { BentoKeyboardNavigationDirective: pe },
-  i18n: { messages: Te },
+  i18n: { messages: Le },
   props: {
     /**
      * Defines a string value that labels an interactive element.
@@ -1163,7 +1163,7 @@ const kt = /* @__PURE__ */ q(Ot, [["render", $t], ["__scopeId", "data-v-25938a72
       required: !0
     },
     /**
-     * Indicates if new options are loading.
+     * Indicates if new options are lazy loading.
      */
     loading: { type: Boolean, default: !1 },
     /**
@@ -1176,6 +1176,10 @@ const kt = /* @__PURE__ */ q(Ot, [["render", $t], ["__scopeId", "data-v-25938a72
       default: ee.NONE,
       validator: (e) => Object.values(ee).includes(e)
     },
+    /**
+     * Indicates the listbox is loading filtered items.
+     */
+    componentLoading: { type: Boolean, default: !1 },
     /**
      * If enabled, the user will be able to select multiple items.
      */
@@ -1222,7 +1226,7 @@ const kt = /* @__PURE__ */ q(Ot, [["render", $t], ["__scopeId", "data-v-25938a72
     d.TAB
   ],
   setup(e, { emit: t, slots: s }) {
-    const c = M([]), b = le(e, "items"), { t: i } = ye({ messages: Te }), l = v(() => e.lazyLoadType !== ee.AUTOMATIC), u = v(() => e.lazyLoadType === ee.AUTOMATIC), a = () => {
+    const c = P([]), b = le(e, "items"), { t: i } = ye({ messages: Le }), l = v(() => e.lazyLoadType !== ee.AUTOMATIC), u = v(() => e.lazyLoadType === ee.AUTOMATIC), a = () => {
       var N;
       return typeof (e == null ? void 0 : e.virtualScroll) == "object" && ((N = e == null ? void 0 : e.virtualScroll) != null && N.itemHeight) ? e.virtualScroll.itemHeight : wt;
     }, {
@@ -1236,11 +1240,11 @@ const kt = /* @__PURE__ */ q(Ot, [["render", $t], ["__scopeId", "data-v-25938a72
       // Disable virtual scrolling if not enabled or if lazy loading is enabled or if multi-select
       disabled: (e == null ? void 0 : e.multiple) || (e == null ? void 0 : e.virtualScroll) === !1 || (e == null ? void 0 : e.lazyLoadType) !== "none"
     }), $ = v(
-      () => l.value ? "true" : void 0
-    ), D = v(
-      () => l.value && e.loading ? "true" : "false"
+      () => e.componentLoading !== void 0 || l.value ? "true" : void 0
+    ), M = v(
+      () => l.value && e.loading || e.componentLoading ? "true" : "false"
     ), p = v(
-      () => l.value ? "polite" : void 0
+      () => l.value || e.componentLoading !== void 0 ? "polite" : void 0
     ), y = (N) => (ne) => {
       t(N, ne);
     }, h = () => {
@@ -1275,7 +1279,7 @@ const kt = /* @__PURE__ */ q(Ot, [["render", $t], ["__scopeId", "data-v-25938a72
       listboxItemRef: c,
       // a11y
       ariaAtomic: $,
-      ariaBusy: D,
+      ariaBusy: M,
       ariaLive: p,
       // Values
       containerProps: C,
@@ -1299,18 +1303,21 @@ const kt = /* @__PURE__ */ q(Ot, [["render", $t], ["__scopeId", "data-v-25938a72
   }
 }), Vt = ["id", "aria-busy", "aria-atomic", "aria-label", "aria-live"], Gt = {
   key: 0,
-  class: "b-listbox__empty-search-message"
+  class: "b-listbox__loading-filtered-items"
 }, zt = {
+  key: 1,
+  class: "b-listbox__empty-search-message"
+}, Ft = {
   key: 2,
   class: "b-listbox__lazy-load"
-}, Ft = {
+}, Yt = {
   key: 3,
   class: "b-listbox__lazy-load"
 };
-function Yt(e, t, s, c, b, i) {
+function xt(e, t, s, c, b, i) {
   var R;
-  const l = A("bento-empty-state"), u = A("bento-typography"), a = A("bento-listbox-multi-select"), n = A("bento-listbox-single-select"), C = A("bento-loading-button"), o = A("bento-loading-indicator"), S = Ae("bento-keyboard-navigation-directive");
-  return ce((g(), L("div", {
+  const l = A("bento-loading-indicator"), u = A("bento-empty-state"), a = A("bento-typography"), n = A("bento-listbox-multi-select"), C = A("bento-listbox-single-select"), o = A("bento-loading-button"), S = Ae("bento-keyboard-navigation-directive");
+  return ce((f(), T("div", {
     id: e.id,
     ref: "listboxRef",
     class: "b-listbox",
@@ -1324,8 +1331,10 @@ function Yt(e, t, s, c, b, i) {
     onScroll: t[0] || (t[0] = (...$) => e.onListboxContainerScroll && e.onListboxContainerScroll(...$))
   }, [
     F("div", te(ie(e.wrapperProps)), [
-      e.isSearchResultEmpty ? (g(), L("div", Gt, [
-        e.emptyState ? (g(), B(l, te(U({ key: 0 }, e.limitedEmptyStateProps)), null, 16)) : (g(), B(u, {
+      e.componentLoading ? (f(), T("div", Gt, [
+        D(l)
+      ])) : e.isSearchResultEmpty ? (f(), T("div", zt, [
+        e.emptyState ? (f(), B(u, te(U({ key: 0 }, e.limitedEmptyStateProps)), null, 16)) : (f(), B(a, {
           key: 1,
           el: "span"
         }, {
@@ -1334,8 +1343,8 @@ function Yt(e, t, s, c, b, i) {
           ]),
           _: 1
         }))
-      ])) : (g(), L(Z, { key: 1 }, [
-        e.multiple ? (g(), B(a, U({
+      ])) : (f(), T(Z, { key: 2 }, [
+        e.multiple ? (f(), B(n, U({
           key: 0,
           ref: "listboxItemRef",
           "has-more-items": e.hasMoreItems,
@@ -1346,13 +1355,13 @@ function Yt(e, t, s, c, b, i) {
           searching: e.searching,
           "is-option-disabled": e.isOptionDisabled
         }, se(e.listboxListeners)), re({ _: 2 }, [
-          x(e.slots, ($, D) => ({
-            name: D,
+          x(e.slots, ($, M) => ({
+            name: M,
             fn: O((p) => [
-              Y(e.$slots, D, te(ie(p)), void 0, !0)
+              Y(e.$slots, M, te(ie(p)), void 0, !0)
             ])
           }))
-        ]), 1040, ["has-more-items", "items", "lazy-load-type", "static-categories", "selected-values", "searching", "is-option-disabled"])) : (g(), B(n, U({
+        ]), 1040, ["has-more-items", "items", "lazy-load-type", "static-categories", "selected-values", "searching", "is-option-disabled"])) : (f(), B(C, U({
           key: 1,
           ref: "listboxItemRef",
           items: e.virtualisedItems,
@@ -1360,15 +1369,15 @@ function Yt(e, t, s, c, b, i) {
           "static-categories": e.staticCategories,
           "is-option-disabled": e.isOptionDisabled
         }, se(e.listboxListeners)), re({ _: 2 }, [
-          x(e.slots, ($, D) => ({
-            name: D,
+          x(e.slots, ($, M) => ({
+            name: M,
             fn: O((p) => [
-              Y(e.$slots, D, te(ie(p)), void 0, !0)
+              Y(e.$slots, M, te(ie(p)), void 0, !0)
             ])
           }))
         ]), 1040, ["items", "selected-value", "static-categories", "is-option-disabled"])),
-        e.shouldDisplayShowMoreButton ? (g(), L("div", zt, [
-          P(C, {
+        e.shouldDisplayShowMoreButton ? (f(), T("div", Ft, [
+          D(o, {
             state: e.loadingButtonState,
             variant: "secondary",
             onClickCapture: e.emitShowMore
@@ -1378,8 +1387,8 @@ function Yt(e, t, s, c, b, i) {
             ]),
             _: 1
           }, 8, ["state", "onClickCapture"])
-        ])) : e.loading ? (g(), L("div", Ft, [
-          P(o)
+        ])) : e.loading ? (f(), T("div", Yt, [
+          D(l)
         ])) : W("", !0)
       ], 64))
     ], 16)
@@ -1387,7 +1396,7 @@ function Yt(e, t, s, c, b, i) {
     [S]
   ]);
 }
-const ns = /* @__PURE__ */ q(Ut, [["render", Yt], ["__scopeId", "data-v-3d72f45a"]]), ge = (e, t) => {
+const as = /* @__PURE__ */ q(Ut, [["render", xt], ["__scopeId", "data-v-7b74fe4e"]]), ge = (e, t) => {
   for (const s of e) {
     if (s.value === t)
       return s;
@@ -1398,8 +1407,8 @@ const ns = /* @__PURE__ */ q(Ut, [["render", Yt], ["__scopeId", "data-v-3d72f45a
     }
   }
   return null;
-}, as = (e, t, s) => {
-  const c = M([]), b = M(), i = (a) => {
+}, is = (e, t, s) => {
+  const c = P([]), b = P(), i = (a) => {
     b.value = s.value ? a.map(({ value: n }) => n) : a[0].value;
   }, l = (a) => {
     c.value = a, i(a);
@@ -1439,8 +1448,8 @@ const ns = /* @__PURE__ */ q(Ut, [["render", Yt], ["__scopeId", "data-v-3d72f45a
 export {
   ee as B,
   d as a,
-  ns as b,
-  as as c,
+  as as b,
+  is as c,
   Bt as u
 };
-//# sourceMappingURL=use-cached-selected-values.DDP7LJoI.js.map
+//# sourceMappingURL=use-cached-selected-values.Chb18cq_.js.map