@adyen/bento-vue3 1.52.0 → 1.54.0

package/dist/chunks/{use-cached-selected-values.DDP7LJoI.js → use-cached-selected-values.DmW8XRgJ.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,34 +6,34 @@ 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.Z2Jeglk-.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";
-import { d as et, e as Ee } from "./button-actions.BvGAE7sw.js";
+import { d as et, e as Ee } from "./button-actions.CdlXZ29B.js";
 /* empty css              */
 import { o as tt } from "./resize.Bqks3WUm.js";
 import "../assets/use-cached-selected-values.css";
 const $e = (e, t, s, c) => {
-  const b = v(
+  const m = v(
     () => {
-      var u, a;
-      return !!((u = e.value) != null && u.length) && ((a = e.value) == null ? void 0 : a.length) === t.value.length;
+      var u, n;
+      return !!((u = e.value) != null && u.length) && ((n = e.value) == null ? void 0 : n.length) === t.value.length;
     }
   ), i = v(() => {
     var u;
     return e.value == null || e.value.length === 0 ? !1 : ((u = e.value) == null ? void 0 : u.length) !== t.value.length;
   });
   return {
-    isAllSelected: b,
+    isAllSelected: m,
     isIndeterminate: i,
     toggleSelectAll: (u) => {
       u ? 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);
+function st(e, { disabled: t, itemHeight: s, overscan: c = 5, prefixHeight: m }) {
+  const i = P(null), l = P([]), u = P(0), n = P(0), a = 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);
@@ -44,7 +44,7 @@ function st(e, { disabled: t, itemHeight: s, overscan: c = 5, prefixHeight: b })
       }
     };
   }), S = () => {
-    const y = (b == null ? void 0 : b.value) ?? 0, h = Math.max(i.value.scrollTop - y, 0);
+    const y = (m == null ? void 0 : m.value) ?? 0, h = Math.max(i.value.scrollTop - y, 0);
     if (typeof s == "number")
       return Math.floor(h / s);
     let k = 0, E = 0;
@@ -57,27 +57,27 @@ function st(e, { disabled: t, itemHeight: s, overscan: c = 5, prefixHeight: b })
     }
     return E;
   }, R = () => {
-    if (n.value = i.value.clientHeight, typeof s == "number")
-      return Math.ceil(n.value / s);
+    if (a.value = i.value.clientHeight, typeof s == "number")
+      return Math.ceil(a.value / s);
     const y = u.value ?? 0;
     let h = 0, k = 0;
     for (let E = y; E < e.value.length; E += 1) {
       const I = s(E);
-      if (h += I, k = E, h > n.value)
+      if (h += I, k = E, h > a.value)
         break;
     }
     return k - y;
   }, $ = () => {
     if (i.value) {
       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);
+      u.value = S(), n.value = Math.min(u.value + y + c, e.value.length), l.value = e.value.slice(u.value, n.value);
     }
-  }, D = () => {
+  }, M = () => {
     $();
   };
-  t || (Le(() => {
-    i.value && (n.value = i.value.clientHeight, C = tt(i.value, ({ clientHeight: y }) => {
-      n.value = y, $();
+  t || (Te(() => {
+    i.value && (a.value = i.value.clientHeight, C = tt(i.value, ({ clientHeight: y }) => {
+      a.value = y, $();
     }), $());
   }), xe(() => {
     C == null || C.disconnect();
@@ -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
   };
@@ -122,10 +122,10 @@ const lt = X({
     }
   }
 }), ot = { class: "b-listbox-single-select-category" };
-function nt(e, t, s, c, b, i) {
+function nt(e, t, s, c, m, 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"
@@ -174,8 +174,8 @@ const at = /* @__PURE__ */ q(lt, [["render", nt], ["__scopeId", "data-v-a90eff17
     };
   }
 });
-function rt(e, t, s, c, b, i) {
-  return g(), L("label", U({
+function rt(e, t, s, c, m, i) {
+  return f(), T("label", U({
     class: ["b-listbox-option", e.conditionalClasses],
     role: "option"
   }, e.$attrs, {
@@ -196,15 +196,15 @@ const ct = {
     this.uuid = he.toString(), he += 1;
   }
 }, ut = { key: 0 };
-function dt(e, t, s, c, b, i) {
-  return g(), L("svg", U({ role: "img" }, e.$attrs, {
+function dt(e, t, s, c, m, i) {
+  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"
@@ -240,11 +240,11 @@ const mt = /* @__PURE__ */ q(ct, [["render", dt]]), bt = X({
   setup(e, { emit: t }) {
     const s = (l) => {
       e.disabled || t(l, e.option);
-    }, c = v(() => e.disabled ? !0 : null), b = v(() => e.selected ? !0 : null), i = v(() => e.disabled ? -1 : 0);
+    }, c = v(() => e.disabled ? !0 : null), m = v(() => e.selected ? !0 : null), i = v(() => e.disabled ? -1 : 0);
     return {
       // Values
       ariaDisabled: c,
-      ariaSelected: b,
+      ariaSelected: m,
       tabIndex: i,
       // Enums
       BentoListboxEvent: d,
@@ -253,30 +253,30 @@ 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, {
+function gt(e, t, s, c, m, i) {
+  const l = A("bento-typography"), u = A("checkmark-icon"), n = A("bento-listbox-option");
+  return f(), B(n, {
     class: "b-listbox-single-select-option",
     disabled: e.disabled,
     selected: e.selected,
     "aria-selected": e.ariaSelected,
     "aria-disabled": e.ariaDisabled,
     tabindex: e.tabIndex,
-    onClick: t[0] || (t[0] = (n) => e.onOptionSelected(e.BentoListboxEvent.SELECT)),
-    onEnterPressed: t[1] || (t[1] = (n) => e.onOptionSelected(e.BentoListboxEvent.ENTER)),
-    onSpacePressed: t[2] || (t[2] = Ke((n) => e.onOptionSelected(e.BentoListboxEvent.SPACE), ["prevent"])),
-    onTabPressed: t[3] || (t[3] = (n) => e.onOptionSelected(e.BentoListboxEvent.TAB))
+    onClick: t[0] || (t[0] = (a) => e.onOptionSelected(e.BentoListboxEvent.SELECT)),
+    onEnterPressed: t[1] || (t[1] = (a) => e.onOptionSelected(e.BentoListboxEvent.ENTER)),
+    onSpacePressed: t[2] || (t[2] = Ke((a) => e.onOptionSelected(e.BentoListboxEvent.SPACE), ["prevent"])),
+    onTabPressed: t[3] || (t[3] = (a) => e.onOptionSelected(e.BentoListboxEvent.TAB))
   }, {
     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]
         ])
       ])
@@ -298,13 +298,13 @@ function gt(e, t, s, c, b, i) {
   }, 8, ["disabled", "selected", "aria-selected", "aria-disabled", "tabindex"]);
 }
 const pt = /* @__PURE__ */ q(bt, [["render", gt], ["__scopeId", "data-v-226f4c84"]]), ke = ({ items: e, isOptionDisabled: t, hasStaticCategories: s }, c) => {
-  const b = v(
+  const m = v(
     () => s.value ? e.value.flatMap((p) => p.items) : e.value
-  ), i = v(() => b.value.length - 1), l = M(0);
-  Le(() => {
+  ), i = v(() => m.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) => {
+  const u = (p) => !t || !!t && t(e.value[p]), n = (p) => !t || !!t && !t(e.value[p]), a = (p) => {
     switch (p) {
       case "increase":
         l.value += 1;
@@ -314,7 +314,7 @@ const pt = /* @__PURE__ */ q(bt, [["render", gt], ["__scopeId", "data-v-226f4c84
         break;
     }
   }, C = ({ edgeCaseItem: p, isItemBeforeEdgeCaseItem: y }, h, k) => {
-    l.value !== p && (y ? a(p) && n(k) : (n(k), u(l.value) && h()), c(l.value));
+    l.value !== p && (y ? n(p) && a(k) : (a(k), u(l.value) && h()), c(l.value));
   }, o = (p) => {
     var h;
     (h = p == null ? void 0 : p.detail) == null || h.preventDefault();
@@ -404,14 +404,14 @@ 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 m = 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) => {
+    }), u = v(() => !!e.items.some(({ items: y }) => !!y)), n = (y) => (h) => {
       t(y, [h]);
-    }, n = (y) => {
+    }, a = (y) => {
       var h;
-      (h = b.value.querySelectorAll('[role="option"]')[y]) == null || h.focus();
+      (h = m.value.querySelectorAll('[role="option"]')[y]) == null || h.focus();
     }, {
       moveToNextElement: C,
       moveToPreviousElement: o,
@@ -424,17 +424,17 @@ const pt = /* @__PURE__ */ q(bt, [["render", gt], ["__scopeId", "data-v-226f4c84
         isOptionDisabled: e.isOptionDisabled,
         hasStaticCategories: le(e, "staticCategories")
       },
-      n
-    ), D = {
+      a
+    ), M = {
       [K.ARROW_UP]: o,
       [K.ARROW_DOWN]: C,
       [K.HOME]: S,
       [K.END]: R
     }, p = {
-      [d.SELECT]: a(d.SELECT),
-      [d.SPACE]: a(d.SPACE),
-      [d.TAB]: a(d.TAB),
-      [d.ENTER]: a(d.ENTER)
+      [d.SELECT]: n(d.SELECT),
+      [d.SPACE]: n(d.SPACE),
+      [d.TAB]: n(d.TAB),
+      [d.ENTER]: n(d.ENTER)
     };
     return s({
       /**
@@ -451,30 +451,30 @@ const pt = /* @__PURE__ */ q(bt, [["render", gt], ["__scopeId", "data-v-226f4c84
       // Enums
       BentoListboxEvent: d,
       // Values
-      listboxRef: b,
+      listboxRef: m,
       listboxItemRef: i,
       selectedItem: l,
       slots: c,
       // Computed
       hasCategories: u,
       // Methods
-      onOptionSelected: a,
+      onOptionSelected: n,
       // 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, {
-      key: n.value,
-      "category-label": n.label,
+function St(e, t, s, c, m, i) {
+  const l = A("bento-listbox-single-select-option"), u = A("bento-listbox-single-select-category"), n = Ae("bento-keyboard-navigation-directive");
+  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, (a) => (f(), B(u, {
+      key: a.value,
+      "category-label": a.label,
       role: "group"
     }, {
       default: O(() => [
-        (g(!0), L(Z, null, x(n.items, (C) => (g(), B(l, U({
+        (f(!0), T(Z, null, x(a.items, (C) => (f(), B(l, U({
           key: C.value,
           ref_for: !0,
           ref: "listboxItemRef",
@@ -492,14 +492,14 @@ 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({
-      key: n.value,
+    }, 1032, ["category-label"]))), 128)) : (f(!0), T(Z, { key: 1 }, x(e.items, (a) => (f(), B(l, U({
+      key: a.value,
       ref_for: !0,
       ref: "listboxItemRef",
       role: "option",
-      option: n,
-      disabled: e.isOptionDisabled ? e.isOptionDisabled(n) : null,
-      selected: n.value === e.selectedItem.value
+      option: a,
+      disabled: e.isOptionDisabled ? e.isOptionDisabled(a) : null,
+      selected: a.value === e.selectedItem.value
     }, se(e.listboxOptionListeners)), re({ _: 2 }, [
       x(e.slots, (C, o) => ({
         name: o,
@@ -509,7 +509,7 @@ function St(e, t, s, c, b, i) {
       }))
     ]), 1040, ["option", "disabled", "selected"]))), 128))
   ], 16)), [
-    [a]
+    [n]
   ]);
 }
 const Ct = /* @__PURE__ */ q(yt, [["render", St]]);
@@ -570,16 +570,16 @@ 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(
-      () => e.category.items.every((E) => b(E))
-    ), l = le(e, "staticCategories"), u = v(() => s.value || e.staticCategories), a = v(() => ({
+    const s = P(!1), { t: c } = ye(), m = (E) => e.isOptionDisabled ? e.isOptionDisabled(E) : !1, i = v(
+      () => e.category.items.every((E) => m(E))
+    ), l = le(e, "staticCategories"), u = v(() => s.value || e.staticCategories), n = v(() => ({
       [`b-listbox-multi-select-category--${fe.DISABLED}`]: i.value,
       [`b-listbox-multi-select-category--${fe.STATIC_CATEGORY}`]: e.staticCategories
-    })), n = (E) => {
+    })), a = (E) => {
       E.preventDefault(), s.value = !s.value;
     }, C = (E) => {
       var Q;
-      const I = b(E), V = ((Q = e.selectedItemsList) == null ? void 0 : Q.includes(E.value)) || !1;
+      const I = m(E), V = ((Q = e.selectedItemsList) == null ? void 0 : Q.includes(E.value)) || !1;
       return { isDisabled: I, isPreSelected: V };
     }, o = v(
       () => e.category.items.filter((E) => {
@@ -604,20 +604,20 @@ 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 {
       // Values
       chevronTitle: R,
-      conditionalClass: a,
+      conditionalClass: n,
       hasAllPropsDisabled: i,
       isOpen: s,
       isAllSelected: y,
@@ -627,19 +627,19 @@ const Et = {
       showItemChildren: u,
       categoryLabelProps: $,
       // Methods
-      toggleOpen: n,
+      toggleOpen: a,
       toggleSelectAll: k
     };
   }
 }), _t = { class: "b-listbox-multi-select-category__label" };
-function Tt(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, {
+function Lt(e, t, s, c, m, i) {
+  const l = A("bento-checkbox"), u = A("bento-typography"), n = A("chevron-up-icon"), a = A("chevron-down-icon"), C = A("bento-listbox-option");
+  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(n, {
               key: 0,
               "svg-title": e.chevronTitle
-            }, null, 8, ["svg-title"])) : (g(), B(n, {
+            }, null, 8, ["svg-title"])) : (f(), B(a, {
               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: {
     /**
@@ -751,15 +751,15 @@ const Ot = X({
     H.UNSELECT_CATEGORY
   ],
   setup(e, { emit: t }) {
-    const s = (a) => {
-      t(H.TOGGLE_CHECKBOX_SELECTION, a);
-    }, c = (a) => !!a.items, b = (a) => {
-      const n = e.isMultiLevel && e.searching;
-      return a.description && (!e.isMultiLevel || n);
-    }, i = (a) => a.items ? !!a.items.find((n) => e.selectedItemsList.includes(n.value)) : e.selectedItemsList.includes(a.value), l = (a, n) => {
-      if (c(n))
-        return t(a ? H.SELECT_CATEGORY : H.UNSELECT_CATEGORY, n);
-      s(n.value);
+    const s = (n) => {
+      t(H.TOGGLE_CHECKBOX_SELECTION, n);
+    }, c = (n) => !!n.items, m = (n) => {
+      const a = e.isMultiLevel && e.searching;
+      return n.description && (!e.isMultiLevel || a);
+    }, i = (n) => n.items ? !!n.items.find((a) => e.selectedItemsList.includes(a.value)) : e.selectedItemsList.includes(n.value), l = (n, a) => {
+      if (c(a))
+        return t(n ? H.SELECT_CATEGORY : H.UNSELECT_CATEGORY, a);
+      s(a.value);
     };
     return {
       // Values
@@ -769,7 +769,7 @@ const Ot = X({
       })),
       // Methods
       isOptionSelected: i,
-      shouldShowDescription: b,
+      shouldShowDescription: m,
       toggleCheckboxSelection: s,
       selectSearch: l,
       // Enums
@@ -778,19 +778,19 @@ 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", {
+function $t(e, t, s, c, m, i) {
+  const l = A("bento-checkbox"), u = A("bento-typography"), n = A("bento-listbox-option"), a = A("listbox-multi-select-options", !0), C = A("listbox-multi-select-category");
+  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(n, {
         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(a, {
               "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(n, {
           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"
@@ -885,10 +885,10 @@ function $t(e, t, s, c, b, i) {
 const kt = /* @__PURE__ */ q(Ot, [["render", $t], ["__scopeId", "data-v-25938a72"]]), Bt = (e) => {
   const t = v(() => {
     var c;
-    return !!((c = e.value) != null && c.find(({ items: b }) => !!b));
+    return !!((c = e.value) != null && c.find(({ items: m }) => !!m));
   }), s = v(() => {
     var c;
-    return t.value ? (c = e.value) == null ? void 0 : c.reduce((b, i) => (i.items ? b.push(...i.items.flat()) : b.push(i), b), []) : e.value;
+    return t.value ? (c = e.value) == null ? void 0 : c.reduce((m, i) => (i.items ? m.push(...i.items.flat()) : m.push(i), m), []) : e.value;
   });
   return {
     isMultiLevelSelect: t,
@@ -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: m } = ye({ messages: Be }), i = We(), l = P(null), u = P(null), n = P(null), a = v(() => s.selectedValues.map(({ value: r }) => r)), { isMultiLevelSelect: C, flattenedItemsList: o } = Bt(le(s, "items")), S = (r) => {
+      var L;
+      const g = s.isOptionDisabled(r), b = ((L = a.value) == null ? void 0 : L.includes(r.value)) || !1;
+      return { isDisabled: g, isPreSelected: b };
     }, 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: b, isPreSelected: L } = S(g);
+        return b && L || !b;
       });
-      return s.selectedValues.forEach((f) => {
-        r.find((m) => m.value === f.value) || r.push(f);
+      return s.selectedValues.forEach((g) => {
+        r.find((b) => b.value === g.value) || r.push(g);
       }), r;
     }), $ = v(
       () => {
         var r;
-        return (r = R.value) == null ? void 0 : r.filter((f) => {
-          var m;
-          return f.items && C.value && s.searching ? f.items.filter(
+        return (r = R.value) == null ? void 0 : r.filter((g) => {
+          var b;
+          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 : (b = a.value) == null ? void 0 : b.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(), b = ((L = $.value) == null ? void 0 : L.length) || 0;
+      return b === 0 ? m("selectAll", { total: r }) : b === g ? m("allSelected", { total: g }) : b <= g ? m("numberOfTotalSelected", { number: b, total: g }) : m("numbersSelected", { number: b });
     }), 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));
-      c("select", [...s.selectedValues, ...m]);
+      }, b = r.filter(g).filter((L) => !a.value.includes(L.value));
+      c("select", [...s.selectedValues, ...b]);
     }, 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);
+      }, b = r.filter(g).map(({ value: _ }) => _), L = s.selectedValues.filter((_) => !(b != null && b.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) => {
-      let m = !1;
-      const T = s.selectedValues.filter(({ value: _ }) => f.value === _ ? (m = !0, !1) : !0);
-      m || T.push(f), c(r, T);
+    }, J = (r, g) => {
+      let b = !1;
+      const L = s.selectedValues.filter(({ value: _ }) => g.value === _ ? (b = !0, !1) : !0);
+      b || 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 = (_) => a.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 b, L, _, j;
+      const r = ["automatic", "button"].includes(s.lazyLoadType), g = ((b = s.selectedValues) == null ? void 0 : b.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 = n.value) == null ? void 0 : r.$children) != null && g.length ? n.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", {
-            key: m.value
+          (f(!0), T(Z, null, x(N.value, (b) => (f(), T("li", {
+            key: b.value
           }, [
-            P(w(Je), {
+            D(w(Je), {
               ref_for: !0,
               ref_key: "selectedListboxItemsRef",
               ref: u,
-              disabled: r.isOptionDisabled(m),
-              label: m.label,
+              disabled: r.isOptionDisabled(b),
+              label: b.label,
               condensed: "",
-              onClick: (T) => m.items ? ue(m) : J("select", m)
+              onClick: (L) => b.items ? ue(b) : J("select", b)
             }, 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,27 +1065,27 @@ 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,
+        ref: n,
         items: r.items,
         "is-option-disabled": r.isOptionDisabled,
         "is-multi-level": w(C),
         "static-categories": r.staticCategories,
         searching: r.searching,
-        "selected-items-list": n.value,
-        onToggleCheckboxSelection: f[0] || (f[0] = (m) => J("select", m)),
+        "selected-items-list": a.value,
+        onToggleCheckboxSelection: g[0] || (g[0] = (b) => J("select", b)),
         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] = (b) => J(w(d).SPACE, b)),
+        onTabPressed: g[2] || (g[2] = (b) => J(w(d).TAB, b)),
+        onEnterPressed: g[3] || (g[3] = (b) => J(w(d).ENTER, b))
       }, re({ _: 2 }, [
-        x(w(i), (m, T) => ({
-          name: T,
+        x(w(i), (b, 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,31 +1226,31 @@ 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([]), m = le(e, "items"), { t: i } = ye({ messages: Le }), l = v(() => e.lazyLoadType !== ee.AUTOMATIC), u = v(() => e.lazyLoadType === ee.AUTOMATIC), n = () => {
       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;
     }, {
-      containerRef: n,
+      containerRef: a,
       containerProps: C,
       onScroll: o,
       list: S,
       wrapperProps: R
-    } = st(b, {
-      itemHeight: a(),
+    } = st(m, {
+      itemHeight: n(),
       // 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 = () => {
       t(d.SHOW_MORE);
     }, k = Xe(() => {
-      const N = n.value;
+      const N = a.value;
       if (!N)
         return;
       const ne = Math.round(N.scrollTop) + N.clientHeight >= N.scrollHeight;
@@ -1271,11 +1275,11 @@ const kt = /* @__PURE__ */ q(Ot, [["render", $t], ["__scopeId", "data-v-25938a72
     };
     return {
       // Refs
-      listboxRef: n,
+      listboxRef: a,
       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, m, 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"), n = A("bento-typography"), a = 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(n, {
           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(a, 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,28 +1407,28 @@ const ns = /* @__PURE__ */ q(Ut, [["render", Yt], ["__scopeId", "data-v-3d72f45a
     }
   }
   return null;
-}, as = (e, t, s) => {
-  const c = M([]), b = M(), i = (a) => {
-    b.value = s.value ? a.map(({ value: n }) => n) : a[0].value;
-  }, l = (a) => {
-    c.value = a, i(a);
+}, is = (e, t, s) => {
+  const c = P([]), m = P(), i = (n) => {
+    s.value ? m.value = n.map(({ value: a }) => a) : m.value = n.length > 0 ? n[0].value : null;
+  }, l = (n) => {
+    c.value = n, i(n);
   }, u = () => {
-    c.value = [], b.value = null;
+    c.value = [], m.value = null;
   };
   return Oe(
     () => t.value,
     () => {
-      if (!t.value) {
+      if (!t.value && t.value !== 0) {
         u();
         return;
       }
-      const a = !Array.isArray(t.value), n = [...c.value];
+      const n = !Array.isArray(t.value), a = [...c.value];
       u();
       const C = (o) => {
         let S = ge(e.value, o);
-        S || (S = ge(n, o)), S || (S = { value: o, label: o.toString() }), c.value.push(S);
+        S || (S = ge(a, o)), S || (S = { value: o, label: o.toString() }), c.value.push(S);
       };
-      if (a) {
+      if (n) {
         const o = t.value;
         C(o), i(c.value);
         return;
@@ -1430,7 +1439,7 @@ const ns = /* @__PURE__ */ q(Ut, [["render", Yt], ["__scopeId", "data-v-3d72f45a
   ), {
     // Values
     cachedSelectedListboxOptions: c,
-    cachedListboxSelectedValues: b,
+    cachedListboxSelectedValues: m,
     // Methods
     resetCache: u,
     setCachedValues: l
@@ -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.DmW8XRgJ.js.map