@adyen/bento-vue3 1.90.0 → 1.91.0

package/dist/chunks/{use-cached-selected-values.DIbfa5F1.js → use-cached-selected-values.Bx8uuky9.js}

@@ -3,33 +3,32 @@ import { B as F, a as he } from "./keyboard-navigation.DWmhelVv.js";
 import { B as ie } from "./typography.B3J6_tYk.js";
 import { B as gt } from "./loading-indicator.BPol9I84.js";
 import { B as vt } from "./empty-state.DT4sFyjB.js";
-import { u as Ie } from "./index.B875RXHM.js";
-import { d as ft } from "./debounce.DUTu11PS.js";
-import { o as yt } from "./resize.Bqks3WUm.js";
-import { C as Se, N as St } from "./minus-small.CnYLTuSv.js";
-import { C as ht } from "./checkmark-small.CRuZauJc.js";
+import { u as _e } from "./index.B875RXHM.js";
+import { C as Se, N as ft } from "./minus-small.CnYLTuSv.js";
+import { C as yt } from "./checkmark-small.CRuZauJc.js";
 /* empty css              */
 import { _ as H } from "./_plugin-vue_export-helper.CHgC5LLL.js";
-import { B as Ct } from "./chip.DFldnqfz.js";
-import { C as Et } from "./chevron-down.XeE-LBV_.js";
-import { C as Ot } from "./chevron-up.Cmgl2a3x.js";
+import { B as St } from "./chip.DFldnqfz.js";
+import { C as ht } from "./chevron-down.XeE-LBV_.js";
+import { C as Ct } from "./chevron-up.Cmgl2a3x.js";
 import { g as Me } from "./generate-uid.DBWe4g6T.js";
-import { a as Tt, b as Pe } from "./button-actions.Bh_PZ_fV.js";
+import { a as Et, b as Pe } from "./button-actions.DLiM8KZL.js";
+import { o as Ot } from "./resize.Bqks3WUm.js";
 import "../assets/use-cached-selected-values.css";
 const Fe = (e, t, o, s) => {
-  const r = b(
+  const i = b(
     () => !!e.value?.length && e.value?.length === t.value.length
-  ), i = b(() => e.value == null || e.value.length === 0 ? !1 : e.value?.length !== t.value.length);
+  ), r = b(() => e.value == null || e.value.length === 0 ? !1 : e.value?.length !== t.value.length);
   return {
-    isAllSelected: r,
-    isIndeterminate: i,
+    isAllSelected: i,
+    isIndeterminate: r,
     toggleSelectAll: (f) => {
       f ? o() : s();
     }
   };
 };
-function Lt(e, { disabled: t, itemHeight: o, overscan: s = 5, prefixHeight: r }) {
-  const i = I(null), a = I([]), f = I(0), S = I(0), n = I(0);
+function Tt(e, { disabled: t, itemHeight: o, overscan: s = 5, prefixHeight: i }) {
+  const r = I(null), a = I([]), f = I(0), S = I(0), n = I(0);
   let u;
   const l = b(() => {
     const k = typeof o == "number" ? e.value.length * o : e.value.reduce((T, O, D) => T + o(D), 0), $ = typeof o == "number" ? f.value * o : e.value.slice(0, f.value).reduce((T, O, D) => T + o(D), 0);
@@ -40,7 +39,7 @@ function Lt(e, { disabled: t, itemHeight: o, overscan: s = 5, prefixHeight: r })
       }
     };
   }), m = () => {
-    const k = r?.value ?? 0, $ = Math.max(i.value.scrollTop - k, 0);
+    const k = i?.value ?? 0, $ = Math.max(r.value.scrollTop - k, 0);
     if (typeof o == "number")
       return Math.floor($ / o);
     let T = 0, O = 0;
@@ -53,7 +52,7 @@ function Lt(e, { disabled: t, itemHeight: o, overscan: s = 5, prefixHeight: r })
     }
     return O;
   }, C = () => {
-    if (n.value = i.value.clientHeight, typeof o == "number")
+    if (n.value = r.value.clientHeight, typeof o == "number")
       return Math.ceil(n.value / o);
     const k = f.value ?? 0;
     let $ = 0, T = 0;
@@ -64,7 +63,7 @@ function Lt(e, { disabled: t, itemHeight: o, overscan: s = 5, prefixHeight: r })
     }
     return T - k;
   }, h = () => {
-    if (i.value) {
+    if (r.value) {
       const k = C();
       f.value = m(), S.value = Math.min(f.value + k + s, e.value.length), a.value = e.value.slice(f.value, S.value);
     }
@@ -72,7 +71,7 @@ function Lt(e, { disabled: t, itemHeight: o, overscan: s = 5, prefixHeight: r })
     h();
   };
   t || (ut(() => {
-    i.value && (n.value = i.value.clientHeight, u = yt(i.value, ({ clientHeight: k }) => {
+    r.value && (n.value = r.value.clientHeight, u = Ot(r.value, ({ clientHeight: k }) => {
       n.value = k, h();
     }), h());
   }), bt(() => {
@@ -84,18 +83,18 @@ function Lt(e, { disabled: t, itemHeight: o, overscan: s = 5, prefixHeight: r })
     }
   ));
   const x = {
-    ref: i,
+    ref: r,
     style: { overflowY: "auto" }
   };
   return t ? {
-    containerRef: i,
+    containerRef: r,
     containerProps: x,
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     onScroll: () => {
     },
     list: e
   } : {
-    containerRef: i,
+    containerRef: r,
     containerProps: x,
     onScroll: R,
     list: a,
@@ -103,7 +102,7 @@ function Lt(e, { disabled: t, itemHeight: o, overscan: s = 5, prefixHeight: r })
   };
 }
 var p = /* @__PURE__ */ ((e) => (e.SELECT = "select", e.SHOW_MORE = "show-more", e.ESCAPE = "escape-pressed", e.CLICK = "click", e.ENTER = "enter-pressed", e.SPACE = "space-pressed", e.TAB = "tab-pressed", e.CLOSE_DROPDOWN = "close-dropdown", e))(p || {}), le = /* @__PURE__ */ ((e) => (e.AUTOMATIC = "automatic", e.BUTTON = "button", e.NONE = "none", e))(le || {});
-const It = J({
+const Lt = J({
   name: "bento-listbox-static-category",
   components: {
     BentoTypography: ie
@@ -117,8 +116,8 @@ const It = J({
       required: !0
     }
   }
-}), _t = ["aria-label"];
-function At(e, t, o, s, r, i) {
+}), It = ["aria-label"];
+function _t(e, t, o, s, i, r) {
   const a = _("bento-typography");
   return d(), y("div", {
     class: "b-listbox-single-select-category",
@@ -139,9 +138,9 @@ function At(e, t, o, s, r, i) {
     G("div", null, [
       W(e.$slots, "default", {}, void 0, !0)
     ])
-  ], 8, _t);
+  ], 8, It);
 }
-const kt = /* @__PURE__ */ H(It, [["render", At], ["__scopeId", "data-v-27c4e09a"]]), $t = J({
+const At = /* @__PURE__ */ H(Lt, [["render", _t], ["__scopeId", "data-v-27c4e09a"]]), kt = J({
   name: "bento-listbox-option",
   props: {
     /**
@@ -166,16 +165,16 @@ const kt = /* @__PURE__ */ H(It, [["render", At], ["__scopeId", "data-v-27c4e09a
       // Values
       conditionalClasses: o,
       // Events
-      onClick: (i) => {
-        t(p.CLICK, i);
+      onClick: (r) => {
+        t(p.CLICK, r);
       },
-      onOptionSelected: (i, a) => {
-        t(i, a);
+      onOptionSelected: (r, a) => {
+        t(r, a);
       }
     };
   }
 });
-function Dt(e, t, o, s, r, i) {
+function $t(e, t, o, s, i, r) {
   return d(), y("div", w({
     class: ["b-listbox-option", e.conditionalClasses],
     role: "option"
@@ -190,14 +189,14 @@ function Dt(e, t, o, s, r, i) {
     W(e.$slots, "default", {}, void 0, !0)
   ], 16);
 }
-const Ce = /* @__PURE__ */ H($t, [["render", Dt], ["__scopeId", "data-v-1495b1db"]]);
+const Ce = /* @__PURE__ */ H(kt, [["render", $t], ["__scopeId", "data-v-1495b1db"]]);
 let Ne = 0;
-const Bt = {
+const Dt = {
   beforeCreate() {
     this.uuid = Ne.toString(), Ne += 1;
   }
-}, Rt = { key: 0 };
-function Mt(e, t, o, s, r, i) {
+}, Bt = { key: 0 };
+function Rt(e, t, o, s, i, r) {
   return d(), y("svg", w({ role: "img" }, e.$attrs, {
     class: "ui-assets-icons-16",
     xmlns: "http://www.w3.org/2000/svg",
@@ -205,19 +204,19 @@ function Mt(e, t, o, s, r, i) {
     height: "16",
     fill: "none"
   }), [
-    e.$attrs["svg-title"] ? (d(), y("title", Rt, V(e.$attrs["svg-title"]), 1)) : q("", !0),
+    e.$attrs["svg-title"] ? (d(), y("title", Bt, V(e.$attrs["svg-title"]), 1)) : q("", !0),
     t[0] || (t[0] = G("path", {
       fill: "#001222",
       d: "M15.0608 4.00011L14.0001 2.93945L6.00011 10.9395L2.00011 6.93945L0.939453 8.00011L6.00011 13.0608L15.0608 4.00011Z"
     }, null, -1))
   ], 16);
 }
-const Pt = /* @__PURE__ */ H(Bt, [["render", Mt]]), Nt = J({
+const Mt = /* @__PURE__ */ H(Dt, [["render", Rt]]), Pt = J({
   name: "bento-listbox-single-select-option",
   components: {
     BentoListboxOption: Ce,
     BentoTypography: ie,
-    CheckmarkIcon: Pt
+    CheckmarkIcon: Mt
   },
   props: {
     /**
@@ -241,20 +240,20 @@ const Pt = /* @__PURE__ */ H(Bt, [["render", Mt]]), Nt = J({
   setup(e, { emit: t }) {
     const o = (a) => {
       e.disabled || t(a, e.option);
-    }, s = b(() => e.disabled ? !0 : null), r = b(() => e.selected ? !0 : null), i = b(() => e.disabled ? -1 : 0);
+    }, s = b(() => e.disabled ? !0 : null), i = b(() => e.selected ? !0 : null), r = b(() => e.disabled ? -1 : 0);
     return {
       // Values
       ariaDisabled: s,
-      ariaSelected: r,
-      tabIndex: i,
+      ariaSelected: i,
+      tabIndex: r,
       // Enums
       BentoListboxEvent: p,
       // Events
       onOptionSelected: o
     };
   }
-}), wt = { class: "b-listbox-single-select-option__text" }, Gt = { class: "b-listbox-single-select-option__check-icon" };
-function xt(e, t, o, s, r, i) {
+}), Nt = { class: "b-listbox-single-select-option__text" }, wt = { class: "b-listbox-single-select-option__check-icon" };
+function Gt(e, t, o, s, i, r) {
   const a = _("bento-typography"), f = _("checkmark-icon"), S = _("bento-listbox-option");
   return d(), A(S, {
     class: "b-listbox-single-select-option",
@@ -270,7 +269,7 @@ function xt(e, t, o, s, r, i) {
   }, {
     default: L(() => [
       W(e.$slots, "default", oe(me(e.option)), () => [
-        G("span", wt, [
+        G("span", Nt, [
           N(a, { el: "span" }, {
             default: L(() => [
               K(V(e.option.label), 1)
@@ -289,7 +288,7 @@ function xt(e, t, o, s, r, i) {
           })) : q("", !0)
         ])
       ], !0),
-      G("span", Gt, [
+      G("span", wt, [
         ne(N(f, { "svg-title": "selected" }, null, 512), [
           [ze, e.selected]
         ])
@@ -298,8 +297,8 @@ function xt(e, t, o, s, r, i) {
     _: 3
   }, 8, ["disabled", "selected", "aria-selected", "aria-disabled", "tabindex"]);
 }
-const Vt = /* @__PURE__ */ H(Nt, [["render", xt], ["__scopeId", "data-v-4f41af07"]]), Ke = ({ items: e }, t) => {
-  const o = b(() => e.value.length - 1), s = I(0), r = (m) => {
+const xt = /* @__PURE__ */ H(Pt, [["render", Gt], ["__scopeId", "data-v-4f41af07"]]), Ke = ({ items: e }, t) => {
+  const o = b(() => e.value.length - 1), s = I(0), i = (m) => {
     switch (m) {
       case "increase":
         s.value += 1;
@@ -308,10 +307,10 @@ const Vt = /* @__PURE__ */ H(Nt, [["render", xt], ["__scopeId", "data-v-4f41af07
         s.value -= 1;
         break;
     }
-  }, i = ({ edgeCaseItem: m }, C) => {
-    s.value !== m && (r(C), t(s.value));
+  }, r = ({ edgeCaseItem: m }, C) => {
+    s.value !== m && (i(C), t(s.value));
   }, a = (m) => {
-    l(m), i(
+    l(m), r(
       {
         edgeCaseItem: o.value
       },
@@ -319,7 +318,7 @@ const Vt = /* @__PURE__ */ H(Nt, [["render", xt], ["__scopeId", "data-v-4f41af07
       /* INCREASE */
     );
   }, f = (m) => {
-    l(m), i(
+    l(m), r(
       {
         edgeCaseItem: 0
       },
@@ -345,29 +344,29 @@ const Vt = /* @__PURE__ */ H(Nt, [["render", xt], ["__scopeId", "data-v-4f41af07
     focusedIndex: s
   };
 }, We = (e, t, o = I("option"), s = !0) => {
-  const r = I([]), i = async () => {
+  const i = I([]), r = async () => {
     if (!e.value || e.value.nodeType === Node.COMMENT_NODE)
       return;
     const a = Array.from(e.value.querySelectorAll(`[role="${o.value}"]`));
-    r.value = s ? a.filter((f) => f.checkVisibility()) : a;
+    i.value = s ? a.filter((f) => f.checkVisibility()) : a;
   };
   return fe(
     t,
     () => {
       Ye(() => {
-        i();
+        r();
       });
     },
     { immediate: !0 }
   ), {
-    visibleDomOptions: r,
-    updateVisibleDomOptions: i
+    visibleDomOptions: i,
+    updateVisibleDomOptions: r
   };
-}, zt = J({
+}, Vt = J({
   name: "bento-listbox-single-select",
   components: {
-    BentoListboxSingleSelectCategory: kt,
-    BentoListboxSingleSelectOption: Vt
+    BentoListboxSingleSelectCategory: At,
+    BentoListboxSingleSelectOption: xt
   },
   directives: { BentoKeyboardNavigationDirective: he },
   inheritAttrs: !1,
@@ -411,17 +410,17 @@ const Vt = /* @__PURE__ */ H(Nt, [["render", xt], ["__scopeId", "data-v-4f41af07
     staticCategories: { type: Boolean, default: !1 }
   },
   emits: [p.SELECT, p.ENTER, p.SPACE, p.TAB],
-  setup(e, { emit: t, expose: o, slots: s, attrs: r }) {
-    const i = I(null), a = I([]), f = b(() => !!e.selectedValue?.length && e.selectedValue.at(0)), S = b(
+  setup(e, { emit: t, expose: o, slots: s, attrs: i }) {
+    const r = I(null), a = I([]), f = b(() => !!e.selectedValue?.length && e.selectedValue.at(0)), S = b(
       () => ({
-        "aria-label": r["aria-label"]?.toString(),
-        "aria-busy": r["aria-busy"]?.toString(),
-        "aria-atomic": r["aria-atomic"]?.toString(),
-        "aria-live": r["aria-live"]?.toString()
+        "aria-label": i["aria-label"]?.toString(),
+        "aria-busy": i["aria-busy"]?.toString(),
+        "aria-atomic": i["aria-atomic"]?.toString(),
+        "aria-live": i["aria-live"]?.toString()
       })
     ), n = b(() => !!e.items.some(({ items: O }) => !!O)), u = (O) => (D) => {
       t(O, [D]);
-    }, { visibleDomOptions: l } = We(i, pe(e, "items"), I("option"), !1), m = (O) => {
+    }, { visibleDomOptions: l } = We(r, pe(e, "items"), I("option"), !1), m = (O) => {
       l.value[O]?.focus();
     }, {
       moveToNextElement: C,
@@ -460,7 +459,7 @@ const Vt = /* @__PURE__ */ H(Nt, [["render", xt], ["__scopeId", "data-v-4f41af07
       // Enums
       BentoListboxEvent: p,
       // Values
-      listboxRef: i,
+      listboxRef: r,
       listboxItemRef: a,
       selectedItem: f,
       slots: s,
@@ -475,7 +474,7 @@ const Vt = /* @__PURE__ */ H(Nt, [["render", xt], ["__scopeId", "data-v-4f41af07
     };
   }
 });
-function Yt(e, t, o, s, r, i) {
+function zt(e, t, o, s, i, r) {
   const a = _("bento-listbox-single-select-option"), f = _("bento-listbox-single-select-category"), S = Ue("bento-keyboard-navigation-directive");
   return ne((d(), y("div", w({ ref: "listboxRef" }, e.ariaAttributes, { role: "listbox" }, ee(e.listboxListeners, !0)), [
     e.hasCategories && e.staticCategories ? (d(!0), y(te, { key: 0 }, j(e.items, (n) => (d(), A(f, {
@@ -521,14 +520,14 @@ function Yt(e, t, o, s, r, i) {
     [S]
   ]);
 }
-const Ut = /* @__PURE__ */ H(zt, [["render", Yt]]);
+const Yt = /* @__PURE__ */ H(Vt, [["render", zt]]);
 let we = 0;
-const Ft = {
+const Ut = {
   beforeCreate() {
     this.uuid = we.toString(), we += 1;
   }
-}, Kt = { key: 0 };
-function Wt(e, t, o, s, r, i) {
+}, Ft = { key: 0 };
+function Kt(e, t, o, s, i, r) {
   return d(), y("svg", w({ role: "img" }, e.$attrs, {
     class: "ui-assets-icons-16",
     xmlns: "http://www.w3.org/2000/svg",
@@ -536,7 +535,7 @@ function Wt(e, t, o, s, r, i) {
     height: "16",
     fill: "none"
   }), [
-    e.$attrs["svg-title"] ? (d(), y("title", Kt, V(e.$attrs["svg-title"]), 1)) : q("", !0),
+    e.$attrs["svg-title"] ? (d(), y("title", Ft, V(e.$attrs["svg-title"]), 1)) : q("", !0),
     t[0] || (t[0] = G("path", {
       fill: "#001222",
       d: "M9.69043 5.75L4.62988 10.8105L1.56934 7.75L2.62988 6.68945L4.62988 8.68945L8.62988 4.68945L9.69043 5.75Z"
@@ -547,8 +546,8 @@ function Wt(e, t, o, s, r, i) {
     }, null, -1))
   ], 16);
 }
-const Ht = /* @__PURE__ */ H(Ft, [["render", Wt]]), jt = {}, qt = /* @__PURE__ */ J({
-  ...jt,
+const Wt = /* @__PURE__ */ H(Ut, [["render", Kt]]), Ht = {}, jt = /* @__PURE__ */ J({
+  ...Ht,
   __name: "decorative-checkbox",
   props: {
     disabled: { type: Boolean, default: !1 },
@@ -564,22 +563,22 @@ const Ht = /* @__PURE__ */ H(Ft, [["render", Wt]]), jt = {}, qt = /* @__PURE__ *
       [`b-checkbox-input__outline--${Se.CHECKED}`]: (t.checked || t.allSelected) && !t.indeterminate,
       [`b-checkbox-input__outline--${Se.INDETERMINATE}`]: t.indeterminate
     }));
-    return (r, i) => (d(), y("div", {
+    return (i, r) => (d(), y("div", {
       class: ve(["b-checkbox-input", o.value]),
       role: "presentation"
     }, [
-      r.indeterminate ? (d(), A(B(St), {
+      i.indeterminate ? (d(), A(B(ft), {
         key: 0,
         class: "b-checkbox-input__icon",
         "svg-title": "",
         "aria-hidden": "true"
-      })) : r.allSelected ? (d(), A(B(Ht), {
+      })) : i.allSelected ? (d(), A(B(Wt), {
         key: 1,
         class: "b-checkbox-input__icon",
         "svg-title": "",
         "aria-hidden": "true",
         "data-testid": "decorative-checkbox-double-checkmark-icon"
-      })) : r.checked ? (d(), A(B(ht), {
+      })) : i.checked ? (d(), A(B(yt), {
         key: 2,
         class: "b-checkbox-input__icon",
         "svg-title": "",
@@ -590,7 +589,7 @@ const Ht = /* @__PURE__ */ H(Ft, [["render", Wt]]), jt = {}, qt = /* @__PURE__ *
       }, null, 2)
     ], 2));
   }
-}), _e = /* @__PURE__ */ H(qt, [["__scopeId", "data-v-08d3142e"]]);
+}), Ae = /* @__PURE__ */ H(jt, [["__scopeId", "data-v-08d3142e"]]);
 var He = /* @__PURE__ */ ((e) => (e.DISABLED = "disabled", e.STATIC_CATEGORY = "static-category", e))(He || {}), Q = /* @__PURE__ */ ((e) => (e.SELECT_CATEGORY = "select-category", e.UNSELECT_CATEGORY = "unselect-category", e.TOGGLE_CATEGORY_VISIBILITY = "toggle-category-visibility", e))(Q || {});
 const Ge = {
   "de-DE": { categoryClosed: "{category} geschlossen", categoryOpened: "{category} geöffnet" },
@@ -603,15 +602,15 @@ const Ge = {
   "ja-JP": { categoryClosed: "{category}を閉じました", categoryOpened: "{category}を開きました" },
   "pt-BR": { categoryClosed: "{category} fechada", categoryOpened: "{categoria} aberta" },
   "zh-CN": { categoryClosed: "{category} 已关闭", categoryOpened: "{category} 已打开" }
-}, Xt = J({
+}, qt = J({
   i18n: { messages: Ge },
   name: "bento-listbox-multi-select-category",
   components: {
     BentoTypography: ie,
     BentoListboxOption: Ce,
-    ChevronDownIcon: Et,
-    ChevronUpIcon: Ot,
-    DecorativeCheckbox: _e
+    ChevronDownIcon: ht,
+    ChevronUpIcon: Ct,
+    DecorativeCheckbox: Ae
   },
   props: {
     /**
@@ -662,7 +661,7 @@ const Ge = {
     Q.TOGGLE_CATEGORY_VISIBILITY
   ],
   setup(e, { emit: t }) {
-    const o = I(!1), { t: s } = Ie({ messages: Ge }), r = Me("category-group"), i = Me("category-name"), a = (M) => e.isOptionDisabled ? e.isOptionDisabled(M) : !1, f = b(
+    const o = I(!1), { t: s } = _e({ messages: Ge }), i = Me("category-group"), r = Me("category-name"), a = (M) => e.isOptionDisabled ? e.isOptionDisabled(M) : !1, f = b(
       () => e.category.items.every((M) => a(M))
     ), S = pe(e, "staticCategories"), n = b(() => o.value || e.staticCategories), u = b(() => ({
       [`b-listbox-multi-select-category--${He.DISABLED}`]: f.value
@@ -706,8 +705,8 @@ const Ge = {
       isAllSelected: $,
       isIndeterminate: T,
       isStaticCategory: S,
-      categoryGroupId: r,
-      categoryNameId: i,
+      categoryGroupId: i,
+      categoryNameId: r,
       // Computed
       showItemChildren: n,
       ariaCheckedComputed: D,
@@ -717,16 +716,16 @@ const Ge = {
       toggleSelectAll: O
     };
   }
-}), Jt = { class: "b-listbox-multi-select-category__label" }, Zt = {
+}), Xt = { class: "b-listbox-multi-select-category__label" }, Jt = {
   key: 1,
   class: "b-listbox-multi-select-category b-listbox-multi-select-category--static-category",
   "aria-hidden": "true"
-}, Qt = { class: "b-listbox-multi-select-category__label" }, es = ["id", "aria-label"];
-function ts(e, t, o, s, r, i) {
+}, Zt = { class: "b-listbox-multi-select-category__label" }, Qt = ["id", "aria-label"];
+function es(e, t, o, s, i, r) {
   const a = _("decorative-checkbox"), f = _("bento-typography"), S = _("chevron-up-icon"), n = _("chevron-down-icon"), u = _("bento-listbox-option");
   return d(), y("div", null, [
-    e.isStaticCategory ? (d(), y("div", Zt, [
-      G("span", Qt, [
+    e.isStaticCategory ? (d(), y("div", Jt, [
+      G("span", Zt, [
         N(f, {
           el: "span",
           variant: "caption",
@@ -763,7 +762,7 @@ function ts(e, t, o, s, r, i) {
           disabled: e.hasAllPropsDisabled,
           checked: e.isAllSelected
         }, null, 8, ["indeterminate", "disabled", "checked"]),
-        G("span", Jt, [
+        G("span", Xt, [
           N(f, {
             id: e.categoryNameId,
             el: "span",
@@ -798,20 +797,20 @@ function ts(e, t, o, s, r, i) {
       "aria-label": e.category.label
     }, [
       W(e.$slots, "default", {}, void 0, !0)
-    ], 8, es), [
+    ], 8, Qt), [
       [ze, e.showItemChildren]
     ])
   ]);
 }
-const ss = /* @__PURE__ */ H(Xt, [["render", ts], ["__scopeId", "data-v-60c04867"]]);
+const ts = /* @__PURE__ */ H(qt, [["render", es], ["__scopeId", "data-v-60c04867"]]);
 var X = /* @__PURE__ */ ((e) => (e.SELECT_CATEGORY = "select-category", e.TOGGLE_CHECKBOX_SELECTION = "toggle-checkbox-selection", e.UNSELECT_CATEGORY = "unselect-category", e.TOGGLE_CATEGORY_VISIBILITY = "toggle-category-visibility", e))(X || {});
-const ls = J({
+const ss = J({
   name: "listbox-multi-select-options",
   components: {
     BentoListboxOption: Ce,
     BentoTypography: ie,
-    ListboxMultiSelectCategory: ss,
-    DecorativeCheckbox: _e
+    ListboxMultiSelectCategory: ts,
+    DecorativeCheckbox: Ae
   },
   inheritAttrs: !1,
   props: {
@@ -889,12 +888,12 @@ const ls = J({
   setup(e, { emit: t }) {
     const o = (n) => {
       e.isOptionDisabled(n) || t(X.TOGGLE_CHECKBOX_SELECTION, n);
-    }, s = (n) => !!n.items, r = (n) => {
+    }, s = (n) => !!n.items, i = (n) => {
       const u = e.isMultiLevel && e.searching;
       return n.description && (!e.isMultiLevel || u);
-    }, i = (n) => n.items ? !!n.items.find((u) => e.selectedItemsList.includes(u.value)) : e.selectedItemsList.includes(n.value), a = (n) => {
+    }, r = (n) => n.items ? !!n.items.find((u) => e.selectedItemsList.includes(u.value)) : e.selectedItemsList.includes(n.value), a = (n) => {
       if (s(n)) {
-        const u = i(n) ? X.UNSELECT_CATEGORY : X.SELECT_CATEGORY;
+        const u = r(n) ? X.UNSELECT_CATEGORY : X.SELECT_CATEGORY;
         t(u, n);
       } else
         o(n);
@@ -906,8 +905,8 @@ const ls = J({
         "b-listbox-multi-select-options__category-option": e.categoryItems
       })),
       // Methods
-      isOptionSelected: i,
-      shouldShowDescription: r,
+      isOptionSelected: r,
+      shouldShowDescription: i,
       toggleCheckboxSelection: o,
       toggleSearchOption: a,
       computedTabindex: (n) => e.itemsIndex[n] === e.focusedIndex ? 0 : -1,
@@ -916,8 +915,8 @@ const ls = J({
       ListboxMultiSelectOptionsEvent: X
     };
   }
-}), os = { class: "b-listbox-multi-select__option-text" }, as = { class: "b-listbox-multi-select__option-text" };
-function ns(e, t, o, s, r, i) {
+}), ls = { class: "b-listbox-multi-select__option-text" }, os = { class: "b-listbox-multi-select__option-text" };
+function as(e, t, o, s, i, r) {
   const a = _("decorative-checkbox"), f = _("bento-typography"), S = _("bento-listbox-option"), n = _("listbox-multi-select-options", !0), u = _("listbox-multi-select-category");
   return d(), y("div", null, [
     (d(!0), y(te, null, j(e.items, (l) => (d(), y("div", {
@@ -942,7 +941,7 @@ function ns(e, t, o, s, r, i) {
             checked: e.isOptionSelected(l)
           }, null, 8, ["disabled", "checked"]),
           W(e.$slots, "default", w({ ref_for: !0 }, l), () => [
-            G("span", os, [
+            G("span", ls, [
               N(f, { el: "span" }, {
                 default: L(() => [
                   K(V(l.label), 1)
@@ -1010,7 +1009,7 @@ function ns(e, t, o, s, r, i) {
               checked: e.isOptionSelected(l)
             }, null, 8, ["disabled", "checked"]),
             W(e.$slots, "default", w({ ref_for: !0 }, l), () => [
-              G("span", as, [
+              G("span", os, [
                 N(f, { el: "span" }, {
                   default: L(() => [
                     K(V(l.label), 1)
@@ -1036,8 +1035,8 @@ function ns(e, t, o, s, r, i) {
     ]))), 128))
   ]);
 }
-const is = /* @__PURE__ */ H(ls, [["render", ns], ["__scopeId", "data-v-237dfc58"]]), rs = (e) => {
-  const t = b(() => !!e.value?.find(({ items: s }) => !!s)), o = b(() => t.value ? e.value?.reduce((s, r) => (r.items ? s.push(...r.items.flat()) : s.push(r), s), []) : e.value);
+const ns = /* @__PURE__ */ H(ss, [["render", as], ["__scopeId", "data-v-237dfc58"]]), is = (e) => {
+  const t = b(() => !!e.value?.find(({ items: s }) => !!s)), o = b(() => t.value ? e.value?.reduce((s, i) => (i.items ? s.push(...i.items.flat()) : s.push(i), s), []) : e.value);
   return {
     isMultiLevelSelect: t,
     flattenedItemsList: o
@@ -1053,12 +1052,12 @@ const is = /* @__PURE__ */ H(ls, [["render", ns], ["__scopeId", "data-v-237dfc58
   "ja-JP": { allSelected: "すべて選択 ({total})", numberOfTotalSelected: "{number}/{total}件が選択されました", numbersSelected: "{number}件選択済み", selectAll: "すべて選択 ({total})" },
   "pt-BR": { allSelected: "Todos os selecionados ({total})", numberOfTotalSelected: "{number} de {total} selecionados", numbersSelected: "{number} selecionados", selectAll: "Selecionar tudo ({total})" },
   "zh-CN": { allSelected: "全部已选 ({total})", numberOfTotalSelected: "已选择 {number} 个，共 {total} 个", numbersSelected: "已选择 {number} 个", selectAll: "选择全部（{total}）个" }
-}, cs = { key: 0 }, ds = ["role"], us = {
+}, rs = { key: 0 }, cs = ["role"], ds = {
   key: 1,
   class: "b-listbox-multi-select__divider",
   "aria-hidden": "true"
-}, bs = { i18n: { messages: je } }, ms = /* @__PURE__ */ J({
-  ...bs,
+}, us = { i18n: { messages: je } }, bs = /* @__PURE__ */ J({
+  ...us,
   __name: "listbox-multi-select",
   props: {
     hasMoreItems: { type: Boolean, default: !1 },
@@ -1071,7 +1070,7 @@ const is = /* @__PURE__ */ H(ls, [["render", ns], ["__scopeId", "data-v-237dfc58
   },
   emits: ["select"],
   setup(e, { expose: t, emit: o }) {
-    const s = e, r = o, { t: i, n: a } = Ie({ messages: je }), f = mt(), S = pt(), n = b(
+    const s = e, i = o, { t: r, n: a } = _e({ messages: je }), f = mt(), S = pt(), n = b(
       () => ({
         "aria-label": S["aria-label"]?.toString(),
         "aria-busy": S["aria-busy"]?.toString(),
@@ -1079,7 +1078,7 @@ const is = /* @__PURE__ */ H(ls, [["render", ns], ["__scopeId", "data-v-237dfc58
         "aria-live": S["aria-live"]?.toString(),
         "aria-multiselectable": !0
       })
-    ), u = I(null), l = I(null), m = I(null), C = I(null), h = b(() => s.selectedValues.map(({ value: c }) => c)), { isMultiLevelSelect: R, flattenedItemsList: x } = rs(pe(s, "items")), k = b(() => R.value && !s.staticCategories), $ = b(() => k.value ? "tree" : "listbox"), T = b(() => k.value ? "treeitem" : "option"), O = (c) => {
+    ), u = I(null), l = I(null), m = I(null), C = I(null), h = b(() => s.selectedValues.map(({ value: c }) => c)), { isMultiLevelSelect: R, flattenedItemsList: x } = is(pe(s, "items")), k = b(() => R.value && !s.staticCategories), $ = b(() => k.value ? "tree" : "listbox"), T = b(() => k.value ? "treeitem" : "option"), O = (c) => {
       const v = s.isOptionDisabled(c), g = h.value?.includes(c.value) || !1;
       return { isDisabled: v, isPreSelected: g };
     }, D = b(() => {
@@ -1098,19 +1097,19 @@ const is = /* @__PURE__ */ H(ls, [["render", ns], ["__scopeId", "data-v-237dfc58
       ).length === c.items.length : h.value?.includes(c.value))
     ), re = () => R.value && !s.searching ? x.value.length : s.items.length, M = b(() => {
       const c = D.value.length, v = re(), g = z.value?.length || 0;
-      return g === 0 ? i("selectAll", { total: a(c) }) : g === v ? i("allSelected", { total: a(v) }) : g <= v ? i("numberOfTotalSelected", { number: a(g), total: a(v) }) : i("numbersSelected", { number: a(g) });
+      return g === 0 ? r("selectAll", { total: a(c) }) : g === v ? r("allSelected", { total: a(v) }) : g <= v ? r("numberOfTotalSelected", { number: a(g), total: a(v) }) : r("numbersSelected", { number: a(g) });
     }), Y = (c) => {
       const v = (P) => {
         const { isDisabled: E, isPreSelected: ue } = O(P);
         return E && ue || !E;
       }, g = c.filter(v).filter((P) => !h.value.includes(P.value));
-      r("select", [...s.selectedValues, ...g]);
+      i("select", [...s.selectedValues, ...g]);
     }, Z = (c) => {
       const v = (E) => {
         const { isDisabled: ue, isPreSelected: dt } = O(E);
         return !(ue && dt);
       }, g = c.filter(v).map(({ value: E }) => E), P = s.selectedValues.filter((E) => !g?.includes(E.value));
-      r("select", P);
+      i("select", P);
     }, Ee = () => {
       Y(x.value);
     }, Oe = () => {
@@ -1120,7 +1119,7 @@ const is = /* @__PURE__ */ H(ls, [["render", ns], ["__scopeId", "data-v-237dfc58
       D,
       Ee,
       Oe
-    ), Ae = b(() => se.value ? "mixed" : `${U.value}`), ye = I(U.value), Te = () => {
+    ), ke = b(() => se.value ? "mixed" : `${U.value}`), ye = I(U.value), Te = () => {
       ye.value = !ye.value, qe(ye.value);
     };
     fe(U, () => {
@@ -1128,12 +1127,12 @@ const is = /* @__PURE__ */ H(ls, [["render", ns], ["__scopeId", "data-v-237dfc58
     });
     const Xe = (c) => {
       Y(c.items);
-    }, ke = (c) => {
+    }, $e = (c) => {
       Z(c.items);
     }, ce = (c, v) => {
       let g = !1;
       const P = s.selectedValues.filter(({ value: E }) => v.value === E ? (g = !0, !1) : !0);
-      g || P.push(v), r(c, P);
+      g || P.push(v), i(c, P);
     }, Je = b(() => {
       if (!R.value)
         return s.selectedValues;
@@ -1144,7 +1143,7 @@ const is = /* @__PURE__ */ H(ls, [["render", ns], ["__scopeId", "data-v-237dfc58
     }), Ze = b(() => {
       const c = ["automatic", "button"].includes(s.lazyLoadType), v = s.selectedValues?.length > 0 && z.value?.length !== x.value?.length;
       return c && s.hasMoreItems ? !!s.selectedValues?.length : v;
-    }), $e = b(() => ["automatic", "button"].includes(s.lazyLoadType) ? !s.hasMoreItems : !0), de = I([]), { visibleDomOptions: De, updateVisibleDomOptions: Qe } = We(
+    }), Le = b(() => ["automatic", "button"].includes(s.lazyLoadType) ? !s.hasMoreItems : !0), de = I([]), { visibleDomOptions: De, updateVisibleDomOptions: Qe } = We(
       u,
       pe(s, "items"),
       T
@@ -1184,7 +1183,7 @@ const is = /* @__PURE__ */ H(ls, [["render", ns], ["__scopeId", "data-v-237dfc58
       [F.ARROW_UP]: Be,
       [F.ARROW_DOWN]: Be
     }, ct = b(() => {
-      let c = 1;
+      let c = Le.value ? 1 : 0;
       const v = {};
       return s.items.forEach((g) => {
         let P = de.value.includes(g.value);
@@ -1196,19 +1195,19 @@ const is = /* @__PURE__ */ H(ls, [["render", ns], ["__scopeId", "data-v-237dfc58
       ref: u,
       class: "b-listbox-multi-select"
     }, [
-      Ze.value ? (d(), y("div", cs, [
+      Ze.value ? (d(), y("div", rs, [
         ne((d(), y("ul", w({ class: "b-listbox-multi-select__chips" }, ee(rt, !0)), [
           (d(!0), y(te, null, j(Je.value, (g) => (d(), y("li", {
             key: g.value
           }, [
-            N(B(Ct), {
+            N(B(St), {
               ref_for: !0,
               ref_key: "selectedListboxItemsRef",
               ref: m,
               disabled: c.isOptionDisabled(g),
               label: g.label,
               condensed: "",
-              onClick: (P) => g.items ? ke(g) : ce("select", g)
+              onClick: (P) => g.items ? $e(g) : ce("select", g)
             }, null, 8, ["disabled", "label", "onClick"])
           ]))), 128))
         ], 16)), [
@@ -1220,21 +1219,21 @@ const is = /* @__PURE__ */ H(ls, [["render", ns], ["__scopeId", "data-v-237dfc58
         }, null, -1))
       ])) : q("", !0),
       ne((d(), y("div", w(n.value, { role: $.value }, ee(it, !0)), [
-        $e.value ? (d(), A(B(Ce), {
+        Le.value ? (d(), A(B(Ce), {
           key: 0,
           ref_key: "selectAllListboxItemsRef",
           ref: l,
           class: "b-listbox-multi-select__option",
           tabindex: B(Re) === 0 ? 0 : -1,
-          "aria-selected": Ae.value !== "false",
-          "aria-checked": Ae.value,
+          "aria-selected": ke.value !== "false",
+          "aria-checked": ke.value,
           role: T.value,
           onClick: Te,
           onEnterPressed: Te,
           onSpacePressed: ae(Te, ["prevent"])
         }, {
           default: L(() => [
-            N(B(_e), {
+            N(B(Ae), {
               checked: B(U),
               indeterminate: B(se)
             }, null, 8, ["checked", "indeterminate"]),
@@ -1247,8 +1246,8 @@ const is = /* @__PURE__ */ H(ls, [["render", ns], ["__scopeId", "data-v-237dfc58
           ]),
           _: 1
         }, 8, ["tabindex", "aria-selected", "aria-checked", "role"])) : q("", !0),
-        $e.value ? (d(), y("hr", us)) : q("", !0),
-        N(B(is), {
+        Le.value ? (d(), y("hr", ds)) : q("", !0),
+        N(B(ns), {
           ref_key: "listboxItemsRef",
           ref: C,
           items: c.items,
@@ -1262,7 +1261,7 @@ const is = /* @__PURE__ */ H(ls, [["render", ns], ["__scopeId", "data-v-237dfc58
           role: T.value,
           onToggleCheckboxSelection: v[0] || (v[0] = (g) => ce("select", g)),
           onSelectCategory: Xe,
-          onUnselectCategory: ke,
+          onUnselectCategory: $e,
           onToggleCategoryVisibility: et,
           onSpacePressed: v[1] || (v[1] = (g) => ce(B(p).SPACE, g)),
           onTabPressed: v[2] || (v[2] = (g) => ce(B(p).TAB, g)),
@@ -1275,12 +1274,17 @@ const is = /* @__PURE__ */ H(ls, [["render", ns], ["__scopeId", "data-v-237dfc58
             ])
           }))
         ]), 1032, ["items", "is-option-disabled", "is-multi-level", "static-categories", "searching", "selected-items-list", "focused-index", "items-index", "role"])
-      ], 16, ds)), [
+      ], 16, cs)), [
         [B(he)]
       ])
     ], 512));
   }
-}), xe = /* @__PURE__ */ H(ms, [["__scopeId", "data-v-d170602c"]]), Ve = {
+}), xe = /* @__PURE__ */ H(bs, [["__scopeId", "data-v-4abd31b6"]]), ms = (e, t = 300) => {
+  let o;
+  return (...i) => {
+    o && clearTimeout(o), o = setTimeout(() => e(...i), t);
+  };
+}, Ve = {
   "de-DE": { loading: "Laden", showMore: "Mehr anzeigen" },
   "en-GB": { loading: "Loading", showMore: "Show more" },
   "en-US": { loading: "Loading", showMore: "Show more" },
@@ -1295,11 +1299,11 @@ const is = /* @__PURE__ */ H(ls, [["render", ns], ["__scopeId", "data-v-237dfc58
   name: "bento-listbox",
   components: {
     BentoEmptyState: vt,
-    BentoListboxSingleSelect: Ut,
+    BentoListboxSingleSelect: Yt,
     BentoListboxMultiSelect: xe,
     BentoTypography: ie,
     BentoLoadingIndicator: gt,
-    BentoLoadingButton: Tt
+    BentoLoadingButton: Et
   },
   directives: { BentoKeyboardNavigationDirective: he },
   i18n: { messages: Ve },
@@ -1411,13 +1415,13 @@ const is = /* @__PURE__ */ H(ls, [["render", ns], ["__scopeId", "data-v-237dfc58
     p.TAB
   ],
   setup(e, { emit: t, slots: o }) {
-    const s = I([]), r = pe(e, "items"), { t: i } = Ie({ messages: Ve }), a = b(() => e.lazyLoadType !== le.AUTOMATIC), f = b(() => e.lazyLoadType === le.AUTOMATIC), S = () => typeof e?.virtualScroll == "object" && e?.virtualScroll?.itemHeight ? e.virtualScroll.itemHeight : ps, {
+    const s = I([]), i = pe(e, "items"), { t: r } = _e({ messages: Ve }), a = b(() => e.lazyLoadType !== le.AUTOMATIC), f = b(() => e.lazyLoadType === le.AUTOMATIC), S = () => typeof e?.virtualScroll == "object" && e?.virtualScroll?.itemHeight ? e.virtualScroll.itemHeight : ps, {
       containerRef: n,
       containerProps: u,
       onScroll: l,
       list: m,
       wrapperProps: C
-    } = Lt(r, {
+    } = Tt(i, {
       itemHeight: S(),
       // Disable virtual scrolling if not enabled or if lazy loading is enabled or if multi-select
       disabled: e?.multiple || e?.virtualScroll === !1 || e?.lazyLoadType !== "none"
@@ -1443,7 +1447,7 @@ const is = /* @__PURE__ */ H(ls, [["render", ns], ["__scopeId", "data-v-237dfc58
       t(U, se);
     }, O = () => {
       t(p.SHOW_MORE);
-    }, D = ft(() => {
+    }, D = ms(() => {
       const U = n.value;
       if (!U)
         return;
@@ -1455,7 +1459,7 @@ const is = /* @__PURE__ */ H(ls, [["render", ns], ["__scopeId", "data-v-237dfc58
       () => e.lazyLoadType === le.BUTTON && e.hasMoreItems
     ), Y = b(
       () => e.loading ? Pe.LOADING : Pe.START
-    ), Z = b(() => e.loading ? i("loading") : i("showMore")), Ee = b(() => ({
+    ), Z = b(() => e.loading ? r("loading") : r("showMore")), Ee = b(() => ({
       ...e.emptyState,
       variant: "condensed"
     })), Oe = {
@@ -1504,7 +1508,7 @@ const is = /* @__PURE__ */ H(ls, [["render", ns], ["__scopeId", "data-v-237dfc58
   key: 3,
   class: "b-listbox__lazy-load"
 };
-function Cs(e, t, o, s, r, i) {
+function Cs(e, t, o, s, i, r) {
   const a = _("bento-loading-indicator"), f = _("bento-empty-state"), S = _("bento-typography"), n = _("bento-listbox-multi-select"), u = _("bento-listbox-single-select"), l = _("bento-loading-button"), m = Ue("bento-keyboard-navigation-directive");
   return ne((d(), y("div", w({
     id: e.id,
@@ -1584,26 +1588,26 @@ function Cs(e, t, o, s, r, i) {
     [m]
   ]);
 }
-const Vs = /* @__PURE__ */ H(gs, [["render", Cs], ["__scopeId", "data-v-ef1c27fa"]]), Le = (e, t) => {
+const xs = /* @__PURE__ */ H(gs, [["render", Cs], ["__scopeId", "data-v-ef1c27fa"]]), Ie = (e, t) => {
   for (const o of e) {
     if (o.value === t)
       return o;
     if (o.items) {
-      const s = Le(o.items, t);
+      const s = Ie(o.items, t);
       if (s)
         return s;
     }
   }
   return null;
-}, Es = (e) => typeof e == "object" && e !== null && "value" in e && "label" in e, zs = (e, t, o, s) => {
-  const r = I([]), i = I(), a = (u) => {
-    o.value ? i.value = u.map(({ value: l }) => l) : i.value = u.length > 0 ? u[0].value : null;
+}, Es = (e) => typeof e == "object" && e !== null && "value" in e && "label" in e, Vs = (e, t, o, s) => {
+  const i = I([]), r = I(), a = (u) => {
+    o.value ? r.value = u.map(({ value: l }) => l) : r.value = u.length > 0 ? u[0].value : null;
   }, f = (u) => {
-    o.value ? i.value = u.map(({ value: l, label: m }) => ({ value: l, label: m })) : i.value = u.length > 0 ? { value: u[0].value, label: u[0].label } : null;
+    o.value ? r.value = u.map(({ value: l, label: m }) => ({ value: l, label: m })) : r.value = u.length > 0 ? { value: u[0].value, label: u[0].label } : null;
   }, S = (u) => {
-    r.value = u, s?.value ? f(u) : a(u);
+    i.value = u, s?.value ? f(u) : a(u);
   }, n = () => {
-    r.value = [], i.value = null;
+    i.value = [], r.value = null;
   };
   return fe(
     () => t.value,
@@ -1612,28 +1616,28 @@ const Vs = /* @__PURE__ */ H(gs, [["render", Cs], ["__scopeId", "data-v-ef1c27fa
         n();
         return;
       }
-      const u = !Array.isArray(t.value), l = [...r.value];
+      const u = !Array.isArray(t.value), l = [...i.value];
       n();
       const m = (C) => {
         if (Es(C))
-          r.value.push(C);
+          i.value.push(C);
         else {
-          let h = Le(e.value, C);
-          h || (h = Le(l, C)), h || (h = { value: C, label: C.toString() }), r.value.push(h);
+          let h = Ie(e.value, C);
+          h || (h = Ie(l, C)), h || (h = { value: C, label: C.toString() }), i.value.push(h);
         }
       };
       if (u) {
         const C = t.value;
-        m(C), s?.value ? f(r.value) : a(r.value);
+        m(C), s?.value ? f(i.value) : a(i.value);
         return;
       }
-      t.value.forEach(m), s?.value ? f(r.value) : a(r.value);
+      t.value.forEach(m), s?.value ? f(i.value) : a(i.value);
     },
     { immediate: !0 }
   ), {
     // Values
-    cachedSelectedListboxOptions: r,
-    cachedListboxSelectedValues: i,
+    cachedSelectedListboxOptions: i,
+    cachedListboxSelectedValues: r,
     // Methods
     resetCache: n,
     setCachedValues: S
@@ -1641,12 +1645,13 @@ const Vs = /* @__PURE__ */ H(gs, [["render", Cs], ["__scopeId", "data-v-ef1c27fa
 };
 export {
   p as B,
-  Pt as C,
-  _e as D,
+  Mt as C,
+  Ae as D,
   le as a,
-  Vs as b,
-  rs as c,
-  We as d,
-  zs as u
+  xs as b,
+  is as c,
+  ms as d,
+  We as e,
+  Vs as u
 };
-//# sourceMappingURL=use-cached-selected-values.DIbfa5F1.js.map
+//# sourceMappingURL=use-cached-selected-values.Bx8uuky9.js.map