@adyen/bento-vue3 1.2.0 → 1.3.0

package/dist/chunks/{listbox.7b5e0eee.js → listbox.0c7c4e5e.js}

@@ -1,34 +1,34 @@
-import { computed as u, defineComponent as q, openBlock as g, createElementBlock as A, mergeProps as U, withKeys as ie, renderSlot as M, toDisplayString as $, createCommentVNode as x, pushScopeId as ye, popScopeId as Ee, createElementVNode as k, resolveComponent as S, createBlock as I, toHandlerKey as w, withCtx as _, normalizeProps as K, guardReactiveProps as F, createVNode as T, createTextVNode as D, withDirectives as j, vShow as re, ref as N, onMounted as Ye, toRef as Ke, resolveDirective as de, toHandlers as J, Fragment as se, renderList as z, createSlots as Q, normalizeClass as ae, watch as Fe } from "vue";
-import { B as P, a as ce, d as He } from "./debounce.f8d92e44.js";
-import { B as ee, a as te } from "./index.ebf5f6cf.js";
+import { computed as u, defineComponent as x, openBlock as g, createElementBlock as L, mergeProps as U, withKeys as ie, renderSlot as P, toDisplayString as B, createCommentVNode as j, pushScopeId as ye, popScopeId as Ee, createElementVNode as $, resolveComponent as S, createBlock as I, toHandlerKey as w, withCtx as C, normalizeProps as K, guardReactiveProps as H, createVNode as A, createTextVNode as N, withDirectives as X, vShow as re, ref as R, onMounted as Ye, toRef as Fe, resolveDirective as de, toHandlers as J, Fragment as se, renderList as q, createSlots as Q, normalizeClass as ae, watch as Ke } from "vue";
+import { B as D, a as ce, d as He } from "./debounce.f8d92e44.js";
+import { B as ee, a as te } from "./index.222d29b0.js";
 import { BentoLoadingIndicator as We } from "../loading-indicator.js";
-import { a as ze } from "./button.1f630b6e.js";
+import { a as ze } from "./button.e1c39f66.js";
 import { u as ue } from "./i18n.6c402773.js";
-import { _ as H } from "./_plugin-vue_export-helper.dad06003.js";
-import { B as be } from "./checkbox.cfb8b8df.js";
+import { _ as W } from "./_plugin-vue_export-helper.dad06003.js";
+import { B as be } from "./checkbox.a404069b.js";
 import { C as qe, a as xe } from "./chevron-down.69bedf14.js";
-import { B as je, a as me } from "./loading-button.426d89b9.js";
+import { B as je, a as me } from "./loading-button.61d8ebe5.js";
 import "../assets/listbox.css";
-const Se = (e, t, m, v) => {
-  const i = u(
+const Se = (e, t, v, p) => {
+  const n = u(
     () => {
-      var l, o;
-      return !!((l = e.value) != null && l.length) && ((o = e.value) == null ? void 0 : o.length) === t.value.length;
+      var l, i;
+      return !!((l = e.value) != null && l.length) && ((i = e.value) == null ? void 0 : i.length) === t.value.length;
     }
-  ), p = u(() => {
+  ), b = u(() => {
     var l;
     return e.value == null || e.value.length === 0 ? !1 : ((l = e.value) == null ? void 0 : l.length) !== t.value.length;
   });
   return {
-    isAllSelected: i,
-    isIndeterminate: p,
+    isAllSelected: n,
+    isIndeterminate: b,
     toggleSelectAll: (l) => {
-      l ? m() : v();
+      l ? v() : p();
     }
   };
 };
-var n = /* @__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))(n || {}), W = /* @__PURE__ */ ((e) => (e.AUTOMATIC = "automatic", e.BUTTON = "button", e.NONE = "none", e))(W || {});
-const Xe = q({
+var o = /* @__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))(o || {}), z = /* @__PURE__ */ ((e) => (e.AUTOMATIC = "automatic", e.BUTTON = "button", e.NONE = "none", e))(z || {});
+const Xe = x({
   name: "bento-listbox-option",
   props: {
     /**
@@ -40,30 +40,30 @@ const Xe = q({
      */
     selected: { type: Boolean, default: !1 }
   },
-  emits: [n.CLICK, n.ENTER, n.SPACE, n.TAB],
+  emits: [o.CLICK, o.ENTER, o.SPACE, o.TAB],
   setup(e, { emit: t }) {
-    const m = u(() => ({
+    const v = u(() => ({
       "b-listbox-option--disabled": e.disabled,
       "b-listbox-option--selected": e.selected
     }));
     return {
       // Enums
-      BentoKeyboardNavigationKeyDownEvent: P,
-      BentoListboxEvent: n,
+      BentoKeyboardNavigationKeyDownEvent: D,
+      BentoListboxEvent: o,
       // Values
-      conditionalClasses: m,
+      conditionalClasses: v,
       // Events
-      onClick: (p) => {
-        t(n.CLICK, p);
+      onClick: (b) => {
+        t(o.CLICK, b);
       },
-      onOptionSelected: (p, r) => {
-        t(p, r);
+      onOptionSelected: (b, r) => {
+        t(b, r);
       }
     };
   }
 });
-function Ze(e, t, m, v, i, p) {
-  return g(), A("label", U({
+function Ze(e, t, v, p, n, b) {
+  return g(), L("label", U({
     class: ["b-listbox-option", e.conditionalClasses],
     role: "option"
   }, e.$attrs, {
@@ -74,33 +74,33 @@ function Ze(e, t, m, v, i, p) {
       t[3] || (t[3] = ie((r) => e.onOptionSelected(e.BentoListboxEvent.TAB, r), ["tab"]))
     ]
   }), [
-    M(e.$slots, "default", {}, void 0, !0)
+    P(e.$slots, "default", {}, void 0, !0)
   ], 16);
 }
-const le = /* @__PURE__ */ H(Xe, [["render", Ze], ["__scopeId", "data-v-18a61f5d"]]);
+const le = /* @__PURE__ */ W(Xe, [["render", Ze], ["__scopeId", "data-v-18a61f5d"]]);
 let ve = 0;
 const Je = {
   beforeCreate() {
     this.uuid = ve.toString(), ve += 1;
   }
-}, Qe = (e) => (ye("data-v-4687fbd0"), e = e(), Ee(), e), et = { key: 0 }, tt = /* @__PURE__ */ Qe(() => /* @__PURE__ */ k("path", {
+}, Qe = (e) => (ye("data-v-4687fbd0"), e = e(), Ee(), e), et = { key: 0 }, tt = /* @__PURE__ */ Qe(() => /* @__PURE__ */ $("path", {
   fill: "#00112C",
   "fill-rule": "evenodd",
   d: "M14.5303 4.53033C14.8232 4.23744 14.8232 3.76256 14.5303 3.46967C14.2374 3.17678 13.7626 3.17678 13.4697 3.46967L6 10.9393L2.53033 7.46967C2.23744 7.17678 1.76256 7.17678 1.46967 7.46967C1.17678 7.76256 1.17678 8.23744 1.46967 8.53033L5.46967 12.5303C5.50628 12.5669 5.54574 12.599 5.58732 12.6264C5.87844 12.8186 6.27405 12.7866 6.53033 12.5303L14.5303 4.53033Z",
   "clip-rule": "evenodd"
 }, null, -1));
-function st(e, t, m, v, i, p) {
-  return g(), A("svg", U({ role: "img" }, e.$attrs, {
+function st(e, t, v, p, n, b) {
+  return g(), L("svg", U({ role: "img" }, e.$attrs, {
     xmlns: "http://www.w3.org/2000/svg",
     width: "16",
     height: "16",
     fill: "none"
   }), [
-    e.$attrs["svg-title"] ? (g(), A("title", et, $(e.$attrs["svg-title"]), 1)) : x("", !0),
+    e.$attrs["svg-title"] ? (g(), L("title", et, B(e.$attrs["svg-title"]), 1)) : j("", !0),
     tt
   ], 16);
 }
-const lt = /* @__PURE__ */ H(Je, [["render", st], ["__scopeId", "data-v-4687fbd0"]]), ot = q({
+const lt = /* @__PURE__ */ W(Je, [["render", st], ["__scopeId", "data-v-4687fbd0"]]), ot = x({
   name: "bento-listbox-single-select-option",
   components: {
     BentoListboxOption: le,
@@ -125,28 +125,28 @@ const lt = /* @__PURE__ */ H(Je, [["render", st], ["__scopeId", "data-v-4687fbd0
      */
     selected: { type: Boolean, default: !1 }
   },
-  emits: [n.ENTER, n.SELECT, n.SPACE, n.TAB],
+  emits: [o.ENTER, o.SELECT, o.SPACE, o.TAB],
   setup(e, { emit: t }) {
-    const m = (r) => {
+    const v = (r) => {
       e.disabled || t(r, e.option.value);
-    }, v = u(() => e.disabled ? !0 : null), i = u(() => e.selected ? !0 : null), p = u(() => e.disabled ? -1 : 0);
+    }, p = u(() => e.disabled ? !0 : null), n = u(() => e.selected ? !0 : null), b = u(() => e.disabled ? -1 : 0);
     return {
       // Values
-      ariaDisabled: v,
-      ariaSelected: i,
-      tabIndex: p,
+      ariaDisabled: p,
+      ariaSelected: n,
+      tabIndex: b,
       // Enums
       BentoTypographyElement: te,
-      BentoListboxEvent: n,
+      BentoListboxEvent: o,
       // Events
-      onOptionSelected: m
+      onOptionSelected: v
     };
   }
 });
 const nt = { class: "b-listbox-single-select-option__text" }, it = { class: "b-listbox-single-select-option__check-icon" };
-function at(e, t, m, v, i, p) {
-  const r = S("bento-typography"), l = S("checkmark-icon"), o = S("bento-listbox-option");
-  return g(), I(o, U({
+function at(e, t, v, p, n, b) {
+  const r = S("bento-typography"), l = S("checkmark-icon"), i = S("bento-listbox-option");
+  return g(), I(i, U({
     class: "b-listbox-single-select-option",
     disabled: e.disabled,
     selected: e.selected,
@@ -161,14 +161,14 @@ function at(e, t, m, v, i, p) {
   }, {
     [w(e.BentoListboxEvent.TAB)]: t[3] || (t[3] = (d) => e.onOptionSelected(e.BentoListboxEvent.TAB))
   }), {
-    default: _(() => [
-      M(e.$slots, "default", K(F(e.option)), () => [
-        k("span", nt, [
-          T(r, {
+    default: C(() => [
+      P(e.$slots, "default", K(H(e.option)), () => [
+        $("span", nt, [
+          A(r, {
             el: e.BentoTypographyElement.SPAN
           }, {
-            default: _(() => [
-              D($(e.option.label), 1)
+            default: C(() => [
+              N(B(e.option.label), 1)
             ]),
             _: 1
           }, 8, ["el"]),
@@ -177,15 +177,15 @@ function at(e, t, m, v, i, p) {
             class: "b-listbox-single-select-option__description",
             el: e.BentoTypographyElement.SPAN
           }, {
-            default: _(() => [
-              D($(e.option.description), 1)
+            default: C(() => [
+              N(B(e.option.description), 1)
             ]),
             _: 1
-          }, 8, ["el"])) : x("", !0)
+          }, 8, ["el"])) : j("", !0)
         ])
       ], !0),
-      k("span", it, [
-        j(T(l, { "svg-title": "selected" }, null, 512), [
+      $("span", it, [
+        X(A(l, { "svg-title": "selected" }, null, 512), [
           [re, e.selected]
         ])
       ])
@@ -193,39 +193,39 @@ function at(e, t, m, v, i, p) {
     _: 3
   }, 16, ["disabled", "selected", "aria-selected", "aria-disabled", "tabindex"]);
 }
-const rt = /* @__PURE__ */ H(ot, [["render", at], ["__scopeId", "data-v-88d28e60"]]), Ce = ({ items: e, isOptionDisabled: t }, m) => {
-  const v = u(() => e.value.length - 1), i = N(0);
+const rt = /* @__PURE__ */ W(ot, [["render", at], ["__scopeId", "data-v-88d28e60"]]), Ce = ({ items: e, isOptionDisabled: t }, v) => {
+  const p = u(() => e.value.length - 1), n = R(0);
   Ye(() => {
-    t && (i.value = e.value.findIndex((b) => !t(b)));
+    t && (n.value = e.value.findIndex((m) => !t(m)));
   });
-  const p = (b) => !t || !!t && t(e.value[b]), r = (b) => !t || !!t && !t(e.value[b]), l = (b) => {
-    switch (b) {
+  const b = (m) => !t || !!t && t(e.value[m]), r = (m) => !t || !!t && !t(e.value[m]), l = (m) => {
+    switch (m) {
       case "increase":
-        i.value += 1;
+        n.value += 1;
         break;
       case "decrease":
-        i.value -= 1;
+        n.value -= 1;
         break;
     }
-  }, o = ({ edgeCaseItem: b, isItemBeforeEdgeCaseItem: O }, V, C) => {
-    i.value !== b && (O ? r(b) && l(C) : (l(C), p(i.value) && V()), m(i.value));
+  }, i = ({ edgeCaseItem: m, isItemBeforeEdgeCaseItem: O }, V, M) => {
+    n.value !== m && (O ? r(m) && l(M) : (l(M), b(n.value) && V()), v(n.value));
   }, d = () => {
-    const b = i.value === v.value - 2;
-    o(
+    const m = n.value === p.value - 2;
+    i(
       {
-        isItemBeforeEdgeCaseItem: b,
-        edgeCaseItem: v.value
+        isItemBeforeEdgeCaseItem: m,
+        edgeCaseItem: p.value
       },
       d,
       "increase"
       /* INCREASE */
     );
   }, E = () => {
-    const b = i.value === 1;
-    o(
+    const m = n.value === 1;
+    i(
       {
         edgeCaseItem: 0,
-        isItemBeforeEdgeCaseItem: b
+        isItemBeforeEdgeCaseItem: m
       },
       E,
       "decrease"
@@ -234,15 +234,15 @@ const rt = /* @__PURE__ */ H(ot, [["render", at], ["__scopeId", "data-v-88d28e60
   };
   return {
     moveToFirstElement: () => {
-      i.value = 0, p(i.value) ? d() : m(i.value);
+      n.value = 0, b(n.value) ? d() : v(n.value);
     },
     moveToLastElement: () => {
-      i.value = v.value, p(i.value) ? E() : m(i.value);
+      n.value = p.value, b(n.value) ? E() : v(n.value);
     },
     moveToNextElement: d,
     moveToPreviousElement: E
   };
-}, dt = q({
+}, dt = x({
   name: "bento-listbox-single-select",
   components: {
     BentoListboxSingleSelectOption: rt
@@ -284,57 +284,57 @@ const rt = /* @__PURE__ */ H(ot, [["render", at], ["__scopeId", "data-v-88d28e60
       default: void 0
     }
   },
-  emits: [n.SELECT, n.ENTER, n.SPACE, n.TAB],
-  setup(e, { emit: t, slots: m }) {
-    const v = N([]), i = (f) => (b) => {
-      t(f, b);
-    }, p = (f) => v.value[f].$el.focus(), { moveToNextElement: r, moveToPreviousElement: l, moveToFirstElement: o, moveToLastElement: d } = Ce(
+  emits: [o.SELECT, o.ENTER, o.SPACE, o.TAB],
+  setup(e, { emit: t, slots: v }) {
+    const p = R([]), n = (f) => (m) => {
+      t(f, m);
+    }, b = (f) => p.value[f].$el.focus(), { moveToNextElement: r, moveToPreviousElement: l, moveToFirstElement: i, moveToLastElement: d } = Ce(
       {
-        items: Ke(e, "items"),
+        items: Fe(e, "items"),
         isOptionDisabled: e.isOptionDisabled
       },
-      p
+      b
     ), E = {
-      [P.ARROW_UP]: l,
-      [P.ARROW_DOWN]: r,
-      [P.HOME]: o,
-      [P.END]: d
+      [D.ARROW_UP]: l,
+      [D.ARROW_DOWN]: r,
+      [D.HOME]: i,
+      [D.END]: d
     }, s = {
-      [n.SELECT]: i(n.SELECT),
-      [n.SPACE]: i(n.SPACE),
-      [n.TAB]: i(n.TAB),
-      [n.ENTER]: i(n.ENTER)
+      [o.SELECT]: n(o.SELECT),
+      [o.SPACE]: n(o.SPACE),
+      [o.TAB]: n(o.TAB),
+      [o.ENTER]: n(o.ENTER)
     };
     return {
       // Enums
-      BentoListboxEvent: n,
+      BentoListboxEvent: o,
       // Values
-      listboxItemRef: v,
-      slots: m,
+      listboxItemRef: p,
+      slots: v,
       // Methods
-      onOptionSelected: i,
+      onOptionSelected: n,
       // Keyboard navigation
       listboxListeners: E,
       listboxOptionListeners: s
     };
   }
 });
-function ct(e, t, m, v, i, p) {
+function ct(e, t, v, p, n, b) {
   const r = S("bento-listbox-single-select-option"), l = de("bento-keyboard-navigation-directive");
-  return j((g(), A("div", J(e.listboxListeners, !0), [
-    (g(!0), A(se, null, z(e.items, (o) => (g(), I(r, U({
-      key: o.value,
+  return X((g(), L("div", J(e.listboxListeners, !0), [
+    (g(!0), L(se, null, q(e.items, (i) => (g(), I(r, U({
+      key: i.value,
       ref_for: !0,
       ref: "listboxItemRef",
       role: "option",
-      option: o,
-      disabled: e.isOptionDisabled ? e.isOptionDisabled(o) : null,
-      selected: o.value === e.selectedValue
+      option: i,
+      disabled: e.isOptionDisabled ? e.isOptionDisabled(i) : null,
+      selected: i.value === e.selectedValue
     }, J(e.listboxOptionListeners)), Q({ _: 2 }, [
-      z(e.slots, (d, E) => ({
+      q(e.slots, (d, E) => ({
         name: E,
-        fn: _((s) => [
-          M(e.$slots, E, K(F(s)))
+        fn: C((s) => [
+          P(e.$slots, E, K(H(s)))
         ])
       }))
     ]), 1040, ["option", "disabled", "selected"]))), 128))
@@ -342,14 +342,14 @@ function ct(e, t, m, v, i, p) {
     [l]
   ]);
 }
-const ut = /* @__PURE__ */ H(dt, [["render", ct]]);
+const ut = /* @__PURE__ */ W(dt, [["render", ct]]);
 var _e = /* @__PURE__ */ ((e) => (e.DISABLED = "disabled", e))(_e || {}), Z = /* @__PURE__ */ ((e) => (e.SELECT_CATEGORY = "select-category", e.UNSELECT_CATEGORY = "unselect-category", e))(Z || {});
 const bt = {
   "en-US": {
     categoryClosed: "{category} closed",
     categoryOpened: "{category} opened"
   }
-}, mt = q({
+}, mt = x({
   i18n: { messages: bt },
   name: "bento-listbox-multi-select-category",
   components: {
@@ -396,69 +396,69 @@ const bt = {
   },
   emits: [Z.SELECT_CATEGORY, Z.UNSELECT_CATEGORY],
   setup(e, { emit: t }) {
-    const m = N(!1), { t: v } = ue(), i = u(
-      () => e.category.items.every((C) => e.isOptionDisabled(C))
-    ), p = u(() => ({
-      [`b-listbox-multi-select-category--${_e.DISABLED}`]: i.value
-    })), r = (C) => {
-      C.preventDefault(), m.value = !m.value;
-    }, l = (C) => {
-      var L;
-      const B = e.isOptionDisabled(C), R = ((L = e.selectedItemsList) == null ? void 0 : L.includes(C.value)) || !1;
-      return { isDisabled: B, isPreSelected: R };
-    }, o = u(
-      () => e.category.items.filter((C) => {
-        const { isDisabled: B, isPreSelected: R } = l(C);
-        return B && R || !B;
+    const v = R(!1), { t: p } = ue(), n = (_) => e.isOptionDisabled ? e.isOptionDisabled(_) : !1, b = u(
+      () => e.category.items.every((_) => n(_))
+    ), r = u(() => ({
+      [`b-listbox-multi-select-category--${_e.DISABLED}`]: b.value
+    })), l = (_) => {
+      _.preventDefault(), v.value = !v.value;
+    }, i = (_) => {
+      var G;
+      const k = n(_), T = ((G = e.selectedItemsList) == null ? void 0 : G.includes(_.value)) || !1;
+      return { isDisabled: k, isPreSelected: T };
+    }, d = u(
+      () => e.category.items.filter((_) => {
+        const { isDisabled: k, isPreSelected: T } = i(_);
+        return k && T || !k;
       })
-    ), d = u(
+    ), E = u(
       () => {
-        var C;
-        return (C = o.value) == null ? void 0 : C.filter(
-          ({ value: B }) => {
-            var R;
-            return (R = e.selectedItemsList) == null ? void 0 : R.includes(B);
+        var _;
+        return (_ = d.value) == null ? void 0 : _.filter(
+          ({ value: k }) => {
+            var T;
+            return (T = e.selectedItemsList) == null ? void 0 : T.includes(k);
           }
         );
       }
-    ), E = u(() => {
-      const C = m.value ? "categoryOpened" : "categoryClosed";
-      return v(C, { category: e.category.label });
-    }), s = () => {
+    ), s = u(() => {
+      const _ = v.value ? "categoryOpened" : "categoryClosed";
+      return p(_, { category: e.category.label });
+    }), f = () => {
       t(Z.SELECT_CATEGORY);
-    }, f = () => {
+    }, m = () => {
       t(Z.UNSELECT_CATEGORY);
-    }, { isAllSelected: b, isIndeterminate: O, toggleSelectAll: V } = Se(
+    }, { isAllSelected: O, isIndeterminate: V, toggleSelectAll: M } = Se(
+      E,
       d,
-      o,
-      s,
-      f
+      f,
+      m
     );
     return {
       // Values
-      chevronTitle: E,
-      conditionalClass: p,
-      hasAllPropsDisabled: i,
-      isOpen: m,
-      isAllSelected: b,
-      isIndeterminate: O,
+      chevronTitle: s,
+      conditionalClass: r,
+      hasAllPropsDisabled: b,
+      isOpen: v,
+      isAllSelected: O,
+      isIndeterminate: V,
       // Enums
       BentoTypographyElement: te,
       // Methods
-      toggleOpen: r,
-      toggleSelectAll: V
+      toggleOpen: l,
+      toggleSelectAll: M
     };
   }
 });
 const vt = { class: "b-listbox-multi-select-category__label" };
-function pt(e, t, m, v, i, p) {
-  const r = S("bento-checkbox"), l = S("bento-typography"), o = S("chevron-up-icon"), d = S("chevron-down-icon"), E = S("bento-listbox-option");
-  return g(), A("div", null, [
-    T(E, {
+function pt(e, t, v, p, n, b) {
+  const r = S("bento-checkbox"), l = S("bento-typography"), i = S("chevron-up-icon"), d = S("chevron-down-icon"), E = S("bento-listbox-option");
+  return g(), L("div", null, [
+    A(E, {
       class: ae(["b-listbox-multi-select-category__option", e.conditionalClass])
     }, {
-      default: _(() => [
-        T(r, {
+      default: C(() => [
+        A(r, {
           "model-value": e.isAllSelected,
           indeterminate: e.isIndeterminate,
           disabled: e.hasAllPropsDisabled,
@@ -466,22 +466,22 @@ function pt(e, t, m, v, i, p) {
           value: e.category.value,
           "onUpdate:modelValue": e.toggleSelectAll
         }, null, 8, ["model-value", "indeterminate", "disabled", "aria-label", "value", "onUpdate:modelValue"]),
-        k("span", vt, [
-          T(l, {
+        $("span", vt, [
+          A(l, {
             el: e.BentoTypographyElement.SPAN,
             class: "b-listbox-multi-select-category__label-text"
           }, {
-            default: _(() => [
-              D($(e.category.label), 1)
+            default: C(() => [
+              N(B(e.category.label), 1)
             ]),
             _: 1
           }, 8, ["el"]),
-          k("div", {
+          $("div", {
             class: "b-listbox-multi-select-category__label-chevron",
             "data-testid": "toggle-listbox",
             onClickCapture: t[0] || (t[0] = (...s) => e.toggleOpen && e.toggleOpen(...s))
           }, [
-            e.isOpen ? (g(), I(o, {
+            e.isOpen ? (g(), I(i, {
               key: 0,
               "svg-title": e.chevronTitle
             }, null, 8, ["svg-title"])) : (g(), I(d, {
@@ -493,16 +493,16 @@ function pt(e, t, m, v, i, p) {
       ]),
       _: 1
     }, 8, ["class"]),
-    j(k("div", null, [
-      M(e.$slots, "default", {}, void 0, !0)
+    X($("div", null, [
+      P(e.$slots, "default", {}, void 0, !0)
     ], 512), [
       [re, e.isOpen]
     ])
   ]);
 }
-const gt = /* @__PURE__ */ H(mt, [["render", pt], ["__scopeId", "data-v-d1f786a4"]]);
-var Y = /* @__PURE__ */ ((e) => (e.SELECT_CATEGORY = "select-category", e.TOGGLE_CHECKBOX_SELECTION = "toggle-checkbox-selection", e.UNSELECT_CATEGORY = "unselect-category", e))(Y || {});
-const ft = q({
+const gt = /* @__PURE__ */ W(mt, [["render", pt], ["__scopeId", "data-v-8ac8cf6b"]]);
+var F = /* @__PURE__ */ ((e) => (e.SELECT_CATEGORY = "select-category", e.TOGGLE_CHECKBOX_SELECTION = "toggle-checkbox-selection", e.UNSELECT_CATEGORY = "unselect-category", e))(F || {});
+const ft = x({
   name: "listbox-multi-select-options",
   components: {
     BentoCheckbox: be,
@@ -562,20 +562,20 @@ const ft = q({
     }
   },
   emits: [
-    Y.TOGGLE_CHECKBOX_SELECTION,
-    Y.SELECT_CATEGORY,
-    Y.UNSELECT_CATEGORY
+    F.TOGGLE_CHECKBOX_SELECTION,
+    F.SELECT_CATEGORY,
+    F.UNSELECT_CATEGORY
   ],
   setup(e, { emit: t }) {
-    const m = (o) => {
-      t(Y.TOGGLE_CHECKBOX_SELECTION, o);
-    }, v = (o) => !!o.items, i = (o) => {
+    const v = (i) => {
+      t(F.TOGGLE_CHECKBOX_SELECTION, i);
+    }, p = (i) => !!i.items, n = (i) => {
       const d = e.isMultiLevel && e.searching;
-      return o.description && (!e.isMultiLevel || d);
-    }, p = (o) => o.items ? !!o.items.find((d) => e.selectedItemsList.includes(d.value)) : e.selectedItemsList.includes(o.value), r = (o, d) => {
-      if (v(d))
-        return t(o ? Y.SELECT_CATEGORY : Y.UNSELECT_CATEGORY, d);
-      m(d.value);
+      return i.description && (!e.isMultiLevel || d);
+    }, b = (i) => i.items ? !!i.items.find((d) => e.selectedItemsList.includes(d.value)) : e.selectedItemsList.includes(i.value), r = (i, d) => {
+      if (p(d))
+        return t(i ? F.SELECT_CATEGORY : F.UNSELECT_CATEGORY, d);
+      v(d.value);
     };
     return {
       // Values
@@ -583,45 +583,45 @@ const ft = q({
         "b-listbox-multi-select-options__category-option": e.categoryItems
       })),
       // Methods
-      isCategory: v,
-      isOptionSelected: p,
-      shouldShowDescription: i,
-      toggleCheckboxSelection: m,
+      isCategory: p,
+      isOptionSelected: b,
+      shouldShowDescription: n,
+      toggleCheckboxSelection: v,
       selectSearch: r,
       // Enums
-      BentoListboxEvent: n,
+      BentoListboxEvent: o,
       BentoTypographyElement: te,
-      ListboxMultiSelectOptionsEvent: Y
+      ListboxMultiSelectOptionsEvent: F
     };
   }
 });
 const yt = { class: "b-listbox-multi-select__option-text" }, Et = { class: "b-listbox-multi-select__option-text" };
-function St(e, t, m, v, i, p) {
-  const r = S("bento-checkbox"), l = S("bento-typography"), o = S("bento-listbox-option"), d = S("listbox-multi-select-options", !0), E = S("listbox-multi-select-category");
-  return g(), A("div", null, [
-    (g(!0), A(se, null, z(e.items, (s) => (g(), A("div", {
+function St(e, t, v, p, n, b) {
+  const r = S("bento-checkbox"), l = S("bento-typography"), i = S("bento-listbox-option"), d = S("listbox-multi-select-options", !0), E = S("listbox-multi-select-category");
+  return g(), L("div", null, [
+    (g(!0), L(se, null, q(e.items, (s) => (g(), L("div", {
       key: `selected-${s.value}`
     }, [
-      e.searching && e.isMultiLevel ? (g(), I(o, {
+      e.searching && e.isMultiLevel ? (g(), I(i, {
         key: 0,
         class: ae(["b-listbox-multi-select-options", e.conditionalClasses]),
         disabled: e.isOptionDisabled ? e.isOptionDisabled(s) : null
       }, {
-        default: _(() => [
-          T(r, {
+        default: C(() => [
+          A(r, {
             "model-value": e.isOptionSelected(s),
             "aria-label": s.label,
             disabled: e.isOptionDisabled ? e.isOptionDisabled(s) : null,
             value: s.value,
             "onUpdate:modelValue": (f) => e.selectSearch(f, s)
           }, null, 8, ["model-value", "aria-label", "disabled", "value", "onUpdate:modelValue"]),
-          M(e.$slots, "default", K(F(s)), () => [
-            k("span", yt, [
-              T(l, {
+          P(e.$slots, "default", K(H(s)), () => [
+            $("span", yt, [
+              A(l, {
                 el: e.BentoTypographyElement.SPAN
               }, {
-                default: _(() => [
-                  D($(s.label), 1)
+                default: C(() => [
+                  N(B(s.label), 1)
                 ]),
                 _: 2
               }, 1032, ["el"]),
@@ -630,16 +630,16 @@ function St(e, t, m, v, i, p) {
                 class: "b-listbox-multi-select__option-description",
                 el: e.BentoTypographyElement.SPAN
               }, {
-                default: _(() => [
-                  D($(s.description), 1)
+                default: C(() => [
+                  N(B(s.description), 1)
                 ]),
                 _: 2
-              }, 1032, ["el"])) : x("", !0)
+              }, 1032, ["el"])) : j("", !0)
             ])
           ], !0)
         ]),
         _: 2
-      }, 1032, ["class", "disabled"])) : (g(), A(se, { key: 1 }, [
+      }, 1032, ["class", "disabled"])) : (g(), L(se, { key: 1 }, [
         s.items ? (g(), I(E, {
           key: 0,
           category: s,
@@ -648,8 +648,8 @@ function St(e, t, m, v, i, p) {
           onSelectCategory: (f) => e.$emit(e.ListboxMultiSelectOptionsEvent.SELECT_CATEGORY, s),
           onUnselectCategory: (f) => e.$emit(e.ListboxMultiSelectOptionsEvent.UNSELECT_CATEGORY, s)
         }, {
-          default: _(() => [
-            T(d, {
+          default: C(() => [
+            A(d, {
               "category-items": "",
               items: s.items,
               "is-option-disabled": e.isOptionDisabled,
@@ -660,26 +660,26 @@ function St(e, t, m, v, i, p) {
             }, null, 8, ["items", "is-option-disabled", "is-multi-level", "selected-items-list", "searching"])
           ]),
           _: 2
-        }, 1032, ["category", "is-option-disabled", "selected-items-list", "onSelectCategory", "onUnselectCategory"])) : (g(), I(o, {
+        }, 1032, ["category", "is-option-disabled", "selected-items-list", "onSelectCategory", "onUnselectCategory"])) : (g(), I(i, {
           key: 1,
           class: ae(["b-listbox-multi-select-options", e.conditionalClasses]),
           disabled: e.isOptionDisabled ? e.isOptionDisabled(s) : null
         }, {
-          default: _(() => [
-            T(r, {
+          default: C(() => [
+            A(r, {
               "model-value": e.selectedItemsList,
               "aria-label": s.label,
               disabled: e.isOptionDisabled ? e.isOptionDisabled(s) : null,
               value: s.value,
               "onUpdate:modelValue": (f) => e.toggleCheckboxSelection(s.value)
             }, null, 8, ["model-value", "aria-label", "disabled", "value", "onUpdate:modelValue"]),
-            M(e.$slots, "default", K(F(s)), () => [
-              k("span", Et, [
-                T(l, {
+            P(e.$slots, "default", K(H(s)), () => [
+              $("span", Et, [
+                A(l, {
                   el: e.BentoTypographyElement.SPAN
                 }, {
-                  default: _(() => [
-                    D($(s.label), 1)
+                  default: C(() => [
+                    N(B(s.label), 1)
                   ]),
                   _: 2
                 }, 1032, ["el"]),
@@ -688,11 +688,11 @@ function St(e, t, m, v, i, p) {
                   class: "b-listbox-multi-select__option-description",
                   el: e.BentoTypographyElement.SPAN
                 }, {
-                  default: _(() => [
-                    D($(s.description), 1)
+                  default: C(() => [
+                    N(B(s.description), 1)
                   ]),
                   _: 2
-                }, 1032, ["el"])) : x("", !0)
+                }, 1032, ["el"])) : j("", !0)
               ])
             ], !0)
           ]),
@@ -702,13 +702,13 @@ function St(e, t, m, v, i, p) {
     ]))), 128))
   ]);
 }
-const Ct = /* @__PURE__ */ H(ft, [["render", St], ["__scopeId", "data-v-c471c1bc"]]), pe = {
+const Ct = /* @__PURE__ */ W(ft, [["render", St], ["__scopeId", "data-v-c471c1bc"]]), pe = {
   "en-US": {
     allSelected: "All selected ({total})",
     numberOfTotalSelected: "{number} of {total} selected",
     selectAll: "Select all ({total})"
   }
-}, _t = q({
+}, _t = x({
   i18n: { messages: pe },
   name: "bento-listbox-multi-select",
   components: {
@@ -759,10 +759,10 @@ const Ct = /* @__PURE__ */ H(ft, [["render", St], ["__scopeId", "data-v-c471c1bc
       default: () => []
     }
   },
-  emits: [n.SELECT],
-  setup(e, { emit: t, slots: m }) {
-    const { t: v } = ue({ messages: pe }), i = N(null), p = N(null), r = N(null), l = N();
-    Fe(
+  emits: [o.SELECT],
+  setup(e, { emit: t, slots: v }) {
+    const { t: p } = ue({ messages: pe }), n = R(null), b = R(null), r = R(null), l = R();
+    Ke(
       () => e.selectedValues,
       () => {
         l.value = [...e.selectedValues ?? []];
@@ -771,12 +771,12 @@ const Ct = /* @__PURE__ */ H(ft, [["render", St], ["__scopeId", "data-v-c471c1bc
         immediate: !0
       }
     );
-    const o = u(() => !!e.items.find(({ items: a }) => !!a)), d = u(() => o.value ? e.items.reduce((a, c) => (c.items ? a.push(...c.items.flat()) : a.push(c), a), []) : e.items), E = (a) => {
+    const i = u(() => !!e.items.find(({ items: a }) => !!a)), d = u(() => i.value ? e.items.reduce((a, c) => (c.items ? a.push(...c.items.flat()) : a.push(c), a), []) : e.items), E = (a) => {
       var y;
       const c = e.isOptionDisabled(a), h = ((y = l.value) == null ? void 0 : y.includes(a.value)) || !1;
       return { isDisabled: c, isPreSelected: h };
     }, s = u(
-      () => e.searching && o ? e.items : d.value.filter((a) => {
+      () => e.searching && i ? e.items : d.value.filter((a) => {
         const { isDisabled: c, isPreSelected: h } = E(a);
         return c && h || !c;
       })
@@ -785,47 +785,47 @@ const Ct = /* @__PURE__ */ H(ft, [["render", St], ["__scopeId", "data-v-c471c1bc
         var a;
         return (a = s.value) == null ? void 0 : a.filter((c) => {
           var h;
-          return c.items && o.value && e.searching ? c.items.filter(
-            (G) => (e.selectedValues ?? []).includes(
-              G.value
+          return c.items && i.value && e.searching ? c.items.filter(
+            (Y) => (e.selectedValues ?? []).includes(
+              Y.value
             )
           ).length === c.items.length : (h = l.value) == null ? void 0 : h.includes(c.value);
         });
       }
-    ), b = () => o.value && !e.searching ? s.value.length : e.items.length, O = u(() => {
+    ), m = () => i.value && !e.searching ? s.value.length : e.items.length, O = u(() => {
       var h;
-      const a = b(), c = ((h = f.value) == null ? void 0 : h.length) || 0;
-      return c === 0 ? v("selectAll", { total: a }) : c === a ? v("allSelected", { total: a }) : v("numberOfTotalSelected", { number: c, total: a });
+      const a = m(), c = ((h = f.value) == null ? void 0 : h.length) || 0;
+      return c === 0 ? p("selectAll", { total: a }) : c === a ? p("allSelected", { total: a }) : p("numberOfTotalSelected", { number: c, total: a });
     }), V = (a) => {
       const c = (y) => {
-        const { isDisabled: G, isPreSelected: ne } = E(y);
-        return G && ne || !G;
+        const { isDisabled: Y, isPreSelected: ne } = E(y);
+        return Y && ne || !Y;
       }, h = a.filter(c).filter((y) => !l.value.includes(y.value)).map(({ value: y }) => y);
-      l.value = [...l.value, ...h], t(n.SELECT, l.value);
-    }, C = (a) => {
+      l.value = [...l.value, ...h], t(o.SELECT, l.value);
+    }, M = (a) => {
       const c = (y) => {
-        const { isDisabled: G, isPreSelected: ne } = E(y);
-        return !(G && ne);
+        const { isDisabled: Y, isPreSelected: ne } = E(y);
+        return !(Y && ne);
       }, h = a.filter(c).map(({ value: y }) => y);
-      l.value = l.value.filter((y) => !(h != null && h.includes(y))), t(n.SELECT, l.value);
-    }, B = () => {
+      l.value = l.value.filter((y) => !(h != null && h.includes(y))), t(o.SELECT, l.value);
+    }, _ = () => {
       V(d.value);
-    }, R = () => {
-      C(d.value);
-    }, { isAllSelected: L, isIndeterminate: X, toggleSelectAll: Te } = Se(
+    }, k = () => {
+      M(d.value);
+    }, { isAllSelected: T, isIndeterminate: G, toggleSelectAll: Te } = Se(
       f,
       s,
-      B,
-      R
+      _,
+      k
     ), Ae = (a) => {
       V(a.items);
     }, Le = (a) => {
-      C(a.items);
+      M(a.items);
     }, Oe = (a, c) => {
       let h = !1;
       l.value = l.value.filter((y) => c === y ? (h = !0, !1) : !0), h || l.value.push(c), t(a, l.value);
     }, oe = u(() => {
-      const a = (y) => l.value.includes(y.value), c = (y) => !!y.find((G) => a(G));
+      const a = (y) => l.value.includes(y.value), c = (y) => !!y.find((Y) => a(Y));
       return e.items.filter((y) => y.items && c(y.items) ? !0 : a(y));
     }), Ie = u(() => {
       var a;
@@ -836,18 +836,18 @@ const Ct = /* @__PURE__ */ H(ft, [["render", St], ["__scopeId", "data-v-c471c1bc
         return ((a = f.value) == null ? void 0 : a.length) === ((c = d.value) == null ? void 0 : c.length);
       }
     ), $e = u(
-      () => i.value ? [i.value] : []
+      () => n.value ? [n.value] : []
     ), ke = u(
       () => {
         var a, c;
-        return (c = (a = p.value) == null ? void 0 : a.$children) != null && c.length ? p.value.$children : [];
+        return (c = (a = b.value) == null ? void 0 : a.$children) != null && c.length ? b.value.$children : [];
       }
     ), Re = u(
       () => {
         var a, c;
         return (c = (a = r.value) == null ? void 0 : a.$children) != null && c.length ? r.value.$children : [];
       }
-    ), Ne = u(() => ({ label: O, value: L })), De = u(() => [
+    ), Ne = u(() => ({ label: O, value: T })), De = u(() => [
       Ne,
       ...oe.value,
       ...d.value
@@ -859,35 +859,35 @@ const Ct = /* @__PURE__ */ H(ft, [["render", St], ["__scopeId", "data-v-c471c1bc
       ][a].$el.focus();
     }, { moveToNextElement: Me, moveToPreviousElement: we, moveToFirstElement: Ue, moveToLastElement: Ve } = Ce(
       {
-        items: N(De),
+        items: R(De),
         isOptionDisabled: e.isOptionDisabled
       },
       Pe
     ), Ge = {
-      [P.ARROW_UP]: we,
-      [P.ARROW_DOWN]: Me,
-      [P.HOME]: Ue,
-      [P.END]: Ve
+      [D.ARROW_UP]: we,
+      [D.ARROW_DOWN]: Me,
+      [D.HOME]: Ue,
+      [D.END]: Ve
     };
     return {
       // Refs
-      selectAllListboxItemsRef: i,
-      selectedListboxItemsRef: p,
+      selectAllListboxItemsRef: n,
+      selectedListboxItemsRef: b,
       listboxItemsRef: r,
       // Values
-      isAllSelected: L,
+      isAllSelected: T,
       isAllItemsIncludingDisabled: Be,
       isAnOptionSelected: Ie,
-      isIndeterminate: X,
-      isMultiLevelSelect: o,
+      isIndeterminate: G,
+      isMultiLevelSelect: i,
       flattenedItemsList: d,
       selectedItemsList: l,
       selectAllCheckboxText: O,
       selectedOptions: oe,
-      slots: m,
+      slots: v,
       // Enums
       BentoTypographyElement: te,
-      BentoListboxEvent: n,
+      BentoListboxEvent: o,
       // Methods
       selectAllCategory: Ae,
       toggleCheckboxSelection: Oe,
@@ -898,35 +898,35 @@ const Ct = /* @__PURE__ */ H(ft, [["render", St], ["__scopeId", "data-v-c471c1bc
     };
   }
 });
-const he = (e) => (ye("data-v-35f1a677"), e = e(), Ee(), e), ht = { key: 0 }, Tt = /* @__PURE__ */ he(() => /* @__PURE__ */ k("hr", { class: "b-listbox-multi-select__divider" }, null, -1)), At = /* @__PURE__ */ he(() => /* @__PURE__ */ k("hr", { class: "b-listbox-multi-select__divider" }, null, -1));
-function Lt(e, t, m, v, i, p) {
-  const r = S("bento-checkbox"), l = S("bento-typography"), o = S("bento-listbox-option"), d = S("listbox-multi-select-options"), E = de("bento-keyboard-navigation-directive");
-  return j((g(), A("div", U({ class: "b-listbox-multi-select" }, J(e.listboxListeners, !0)), [
-    T(o, {
+const he = (e) => (ye("data-v-35f1a677"), e = e(), Ee(), e), ht = { key: 0 }, Tt = /* @__PURE__ */ he(() => /* @__PURE__ */ $("hr", { class: "b-listbox-multi-select__divider" }, null, -1)), At = /* @__PURE__ */ he(() => /* @__PURE__ */ $("hr", { class: "b-listbox-multi-select__divider" }, null, -1));
+function Lt(e, t, v, p, n, b) {
+  const r = S("bento-checkbox"), l = S("bento-typography"), i = S("bento-listbox-option"), d = S("listbox-multi-select-options"), E = de("bento-keyboard-navigation-directive");
+  return X((g(), L("div", U({ class: "b-listbox-multi-select" }, J(e.listboxListeners, !0)), [
+    A(i, {
       ref: "selectAllListboxItemsRef",
       class: "b-listbox-multi-select__option"
     }, {
-      default: _(() => [
-        T(r, {
+      default: C(() => [
+        A(r, {
           "aria-label": e.selectAllCheckboxText,
           "model-value": e.isAllSelected,
           indeterminate: e.isIndeterminate,
           "onUpdate:modelValue": e.toggleSelectAll
         }, null, 8, ["aria-label", "model-value", "indeterminate", "onUpdate:modelValue"]),
-        T(l, {
+        A(l, {
           el: e.BentoTypographyElement.SPAN
         }, {
-          default: _(() => [
-            D($(e.selectAllCheckboxText), 1)
+          default: C(() => [
+            N(B(e.selectAllCheckboxText), 1)
           ]),
           _: 1
         }, 8, ["el"])
       ]),
       _: 1
     }, 512),
-    e.isAnOptionSelected ? (g(), A("div", ht, [
+    e.isAnOptionSelected ? (g(), L("div", ht, [
       Tt,
-      T(d, U({
+      A(d, U({
         ref: "selectedListboxItemsRef",
         items: e.selectedOptions,
         "is-option-disabled": e.isOptionDisabled,
@@ -943,17 +943,17 @@ function Lt(e, t, m, v, i, p) {
       }, {
         [w(e.BentoListboxEvent.ENTER)]: t[3] || (t[3] = (s) => e.toggleCheckboxSelection(e.BentoListboxEvent.ENTER, s))
       }), Q({ _: 2 }, [
-        z(e.slots, (s, f) => ({
+        q(e.slots, (s, f) => ({
           name: f,
-          fn: _((b) => [
-            M(e.$slots, f, K(F(b)), void 0, !0)
+          fn: C((m) => [
+            P(e.$slots, f, K(H(m)), void 0, !0)
           ])
         }))
       ]), 1040, ["items", "is-option-disabled", "is-multi-level", "searching", "selected-items-list", "onSelectCategory", "onUnselectCategory"])
-    ])) : x("", !0),
-    j(k("div", null, [
+    ])) : j("", !0),
+    X($("div", null, [
       At,
-      T(d, U({
+      A(d, U({
         ref: "listboxItemsRef",
         items: e.items,
         "is-option-disabled": e.isOptionDisabled,
@@ -970,10 +970,10 @@ function Lt(e, t, m, v, i, p) {
       }, {
         [w(e.BentoListboxEvent.ENTER)]: t[7] || (t[7] = (s) => e.toggleCheckboxSelection(e.BentoListboxEvent.ENTER, s))
       }), Q({ _: 2 }, [
-        z(e.slots, (s, f) => ({
+        q(e.slots, (s, f) => ({
           name: f,
-          fn: _((b) => [
-            M(e.$slots, f, K(F(b)), void 0, !0)
+          fn: C((m) => [
+            P(e.$slots, f, K(H(m)), void 0, !0)
           ])
         }))
       ]), 1040, ["items", "is-option-disabled", "is-multi-level", "searching", "selected-items-list", "onSelectCategory", "onUnselectCategory"])
@@ -984,12 +984,12 @@ function Lt(e, t, m, v, i, p) {
     [E]
   ]);
 }
-const ge = /* @__PURE__ */ H(_t, [["render", Lt], ["__scopeId", "data-v-35f1a677"]]), fe = {
+const ge = /* @__PURE__ */ W(_t, [["render", Lt], ["__scopeId", "data-v-35f1a677"]]), fe = {
   "en-US": {
     showMore: "Show more",
     loading: "Loading"
   }
-}, Ot = q({
+}, Ot = x({
   name: "bento-listbox",
   components: {
     BentoListboxSingleSelect: ut,
@@ -1048,8 +1048,8 @@ const ge = /* @__PURE__ */ H(_t, [["render", Lt], ["__scopeId", "data-v-35f1a677
      */
     lazyLoadType: {
       type: String,
-      default: W.NONE,
-      validator: (e) => Object.values(W).includes(e)
+      default: z.NONE,
+      validator: (e) => Object.values(z).includes(e)
     },
     /**
      * If enabled, the user will be able to select multiple items.
@@ -1077,66 +1077,66 @@ const ge = /* @__PURE__ */ H(_t, [["render", Lt], ["__scopeId", "data-v-35f1a677
     }
   },
   emits: [
-    n.SELECT,
-    n.SPACE,
-    n.SHOW_MORE,
-    n.ENTER,
-    n.ESCAPE,
-    n.TAB
+    o.SELECT,
+    o.SPACE,
+    o.SHOW_MORE,
+    o.ENTER,
+    o.ESCAPE,
+    o.TAB
   ],
-  setup(e, { emit: t, slots: m }) {
-    const { t: v } = ue({ messages: fe }), i = N(null), p = N([]), r = u(() => e.lazyLoadType !== W.AUTOMATIC), l = u(() => e.lazyLoadType === W.AUTOMATIC), o = u(
+  setup(e, { emit: t, slots: v }) {
+    const { t: p } = ue({ messages: fe }), n = R(null), b = R([]), r = u(() => e.lazyLoadType !== z.AUTOMATIC), l = u(() => e.lazyLoadType === z.AUTOMATIC), i = u(
       () => r.value ? "true" : void 0
     ), d = u(
       () => r.value && e.loading ? "true" : "false"
     ), E = u(
       () => r.value ? "polite" : void 0
-    ), s = (L) => (X) => {
-      t(L, X);
+    ), s = (T) => (G) => {
+      t(T, G);
     }, f = () => {
-      t(n.SHOW_MORE);
-    }, b = He(() => {
-      const L = i.value, X = L.scrollTop + L.clientHeight >= L.scrollHeight;
-      e.hasMoreItems && X && !e.loading && f();
+      t(o.SHOW_MORE);
+    }, m = He(() => {
+      const T = n.value, G = T.scrollTop + T.clientHeight >= T.scrollHeight;
+      e.hasMoreItems && G && !e.loading && f();
     }), O = u(() => {
-      var L;
-      return e.searching && ((L = e.items) == null ? void 0 : L.length) === 0;
+      var T;
+      return e.searching && ((T = e.items) == null ? void 0 : T.length) === 0;
     }), V = u(
-      () => e.lazyLoadType === W.BUTTON && e.hasMoreItems
-    ), C = u(
+      () => e.lazyLoadType === z.BUTTON && e.hasMoreItems
+    ), M = u(
       () => e.loading ? me.LOADING : me.START
-    ), B = u(() => e.loading ? v("loading") : v("showMore")), R = {
-      [n.SELECT]: s(n.SELECT),
-      [n.SPACE]: s(n.SPACE),
-      [n.TAB]: s(n.TAB),
-      [n.ENTER]: s(n.ENTER)
+    ), _ = u(() => e.loading ? p("loading") : p("showMore")), k = {
+      [o.SELECT]: s(o.SELECT),
+      [o.SPACE]: s(o.SPACE),
+      [o.TAB]: s(o.TAB),
+      [o.ENTER]: s(o.ENTER)
     };
     return {
       // Refs
-      listboxRef: i,
-      listboxItemRef: p,
+      listboxRef: n,
+      listboxItemRef: b,
       // a11y
-      ariaAtomic: o,
+      ariaAtomic: i,
       ariaBusy: d,
       ariaLive: E,
       // Values
       hasAutomaticLazyLoader: l,
       isSearchResultEmpty: O,
-      loadingButtonState: C,
-      slots: m,
+      loadingButtonState: M,
+      slots: v,
       shouldDisplayShowMoreButton: V,
-      showMoreButtonText: B,
+      showMoreButtonText: _,
       // Enums
       BentoTypographyElement: te,
       BentoButtonVariant: ze,
-      BentoListboxLazyLoadType: W,
-      BentoKeyboardNavigationKeyDownEvent: P,
-      BentoListboxEvent: n,
+      BentoListboxLazyLoadType: z,
+      BentoKeyboardNavigationKeyDownEvent: D,
+      BentoListboxEvent: o,
       // Methods
       onOptionSelected: s,
-      emitShowMoreOnScrollEnd: b,
+      emitShowMoreOnScrollEnd: m,
       emitShowMore: f,
-      listboxListeners: R
+      listboxListeners: k
     };
   }
 });
@@ -1150,9 +1150,9 @@ const It = ["id", "aria-busy", "aria-atomic", "aria-label", "aria-live"], Bt = {
   key: 3,
   class: "b-listbox__lazy-load"
 };
-function Rt(e, t, m, v, i, p) {
-  const r = S("bento-typography"), l = S("bento-listbox-multi-select"), o = S("bento-listbox-single-select"), d = S("bento-loading-button"), E = S("bento-loading-indicator"), s = de("bento-keyboard-navigation-directive");
-  return j((g(), A("div", {
+function Rt(e, t, v, p, n, b) {
+  const r = S("bento-typography"), l = S("bento-listbox-multi-select"), i = S("bento-listbox-single-select"), d = S("bento-loading-button"), E = S("bento-loading-indicator"), s = de("bento-keyboard-navigation-directive");
+  return X((g(), L("div", {
     id: e.id,
     ref: "listboxRef",
     class: "b-listbox",
@@ -1164,16 +1164,16 @@ function Rt(e, t, m, v, i, p) {
     "aria-live": e.ariaLive,
     onScroll: t[0] || (t[0] = () => e.hasAutomaticLazyLoader ? e.emitShowMoreOnScrollEnd() : void 0)
   }, [
-    e.isSearchResultEmpty ? (g(), A("div", Bt, [
-      T(r, {
+    e.isSearchResultEmpty ? (g(), L("div", Bt, [
+      A(r, {
         el: e.BentoTypographyElement.SPAN
       }, {
-        default: _(() => [
-          D($(e.noResultsMessage), 1)
+        default: C(() => [
+          N(B(e.noResultsMessage), 1)
         ]),
         _: 1
       }, 8, ["el"])
-    ])) : (g(), A(se, { key: 1 }, [
+    ])) : (g(), L(se, { key: 1 }, [
       e.multiple ? (g(), I(l, U({
         key: 0,
         ref: "listboxItemRef",
@@ -1182,50 +1182,50 @@ function Rt(e, t, m, v, i, p) {
         searching: e.searching,
         "is-option-disabled": e.isOptionDisabled
       }, J(e.listboxListeners)), Q({ _: 2 }, [
-        z(e.slots, (f, b) => ({
-          name: b,
-          fn: _((O) => [
-            M(e.$slots, b, K(F(O)), void 0, !0)
+        q(e.slots, (f, m) => ({
+          name: m,
+          fn: C((O) => [
+            P(e.$slots, m, K(H(O)), void 0, !0)
           ])
         }))
-      ]), 1040, ["items", "selected-values", "searching", "is-option-disabled"])) : (g(), I(o, U({
+      ]), 1040, ["items", "selected-values", "searching", "is-option-disabled"])) : (g(), I(i, U({
         key: 1,
         ref: "listboxItemRef",
         items: e.items,
         "selected-value": e.selectedValue,
         "is-option-disabled": e.isOptionDisabled
       }, J(e.listboxListeners)), Q({ _: 2 }, [
-        z(e.slots, (f, b) => ({
-          name: b,
-          fn: _((O) => [
-            M(e.$slots, b, K(F(O)), void 0, !0)
+        q(e.slots, (f, m) => ({
+          name: m,
+          fn: C((O) => [
+            P(e.$slots, m, K(H(O)), void 0, !0)
           ])
         }))
       ]), 1040, ["items", "selected-value", "is-option-disabled"])),
-      e.shouldDisplayShowMoreButton ? (g(), A("div", $t, [
-        T(d, {
+      e.shouldDisplayShowMoreButton ? (g(), L("div", $t, [
+        A(d, {
           state: e.loadingButtonState,
           variant: e.BentoButtonVariant.SECONDARY,
           onClick: e.emitShowMore
         }, {
-          default: _(() => [
-            D($(e.showMoreButtonText), 1)
+          default: C(() => [
+            N(B(e.showMoreButtonText), 1)
           ]),
           _: 1
         }, 8, ["state", "variant", "onClick"])
-      ])) : e.loading ? (g(), A("div", kt, [
-        T(E)
-      ])) : x("", !0)
+      ])) : e.loading ? (g(), L("div", kt, [
+        A(E)
+      ])) : j("", !0)
     ], 64))
   ], 40, It)), [
     [s]
   ]);
 }
-const Ft = /* @__PURE__ */ H(Ot, [["render", Rt], ["__scopeId", "data-v-6175f9ff"]]);
+const Kt = /* @__PURE__ */ W(Ot, [["render", Rt], ["__scopeId", "data-v-6175f9ff"]]);
 export {
-  Ft as B,
+  Kt as B,
   lt as C,
-  n as a,
-  W as b
+  o as a,
+  z as b
 };
-//# sourceMappingURL=listbox.7b5e0eee.js.map
+//# sourceMappingURL=listbox.0c7c4e5e.js.map