@adyen/bento-vue2 2.1.0 → 2.2.0

package/dist/chunks/{dropdown.CpZQYisR.js → dropdown.Dd8RNGXv.js}

@@ -1,110 +1,110 @@
-import { computed as n, ref as x, onMounted as ut, onUnmounted as dt, watch as Q, defineComponent as V, getCurrentInstance as Me, nextTick as Z, toRef as H, useSlots as Se, useAttrs as ze, toRefs as pt, inject as Ge } from "vue";
-import { B as ue } from "./typography.Cd386LC_.js";
-import { g as ce } from "./generate-uid.DBWe4g6T.js";
-import { u as de } from "./index.CPOlyau9.js";
-import { s as be } from "./events.BQOQSSb7.js";
-import { u as He } from "./use-has-slot.C9lQZ6nz.js";
-import { C as ft } from "./cross-circle-fill.D3dEmLeQ.js";
-import { C as bt } from "./cross-circle-fill-small.CZN966bc.js";
-import { n as W } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
-import { C as Je } from "./chevron-down.B_QiVCoO.js";
-import { C as Xe } from "./chevron-up.YQRo8uKs.js";
+import { computed as n, ref as y, onMounted as dt, onUnmounted as pt, watch as Q, defineComponent as W, getCurrentInstance as Ne, nextTick as j, toRef as J, useSlots as xe, useAttrs as Ge, toRefs as ft, inject as Ue } from "vue";
+import { B as pe } from "./typography.Cd386LC_.js";
+import { g as re } from "./generate-uid.DBWe4g6T.js";
+import { u as fe } from "./index.CPOlyau9.js";
+import { s as _e } from "./events.BQOQSSb7.js";
+import { u as Je } from "./use-has-slot.C9lQZ6nz.js";
+import { C as bt } from "./cross-circle-fill.D3dEmLeQ.js";
+import { C as vt } from "./cross-circle-fill-small.CZN966bc.js";
+import { n as q } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import { C as Xe } from "./chevron-down.B_QiVCoO.js";
+import { C as Ze } from "./chevron-up.YQRo8uKs.js";
 /* empty css              */
-import { u as vt } from "./form-field.B60VsF8d.js";
-import { u as mt } from "./use-form-layout-loading.CWbjZiwP.js";
-import { B as U, a as Ne } from "./keyboard-navigation.DWmhelVv.js";
-import { B as Ze } from "./loading-indicator.PxbRzshH.js";
-import { B as Qe } from "./empty-state.L3DTfiY7.js";
-import { o as _t } from "./resize.Bqks3WUm.js";
+import { u as mt } from "./form-field.B60VsF8d.js";
+import { u as _t } from "./use-form-layout-loading.CWbjZiwP.js";
+import { B as K, a as $e } from "./keyboard-navigation.DWmhelVv.js";
+import { B as Qe } from "./loading-indicator.PxbRzshH.js";
+import { B as et } from "./empty-state.jbVOuwyN.js";
+import { o as yt } from "./resize.Bqks3WUm.js";
 import "./index.Cl4_42j5.js";
-import { B as Be, N as yt } from "./minus-small.CAycYt5H.js";
-import { C as gt } from "./checkmark-small.BlvuuCsU.js";
-import { B as ht } from "./chip.Cc4f2vws.js";
-import { b as Re, a as St, h as xt, e as Ct } from "./button-actions.CdetBz3J.js";
-import { B as It } from "./directive.D1-d-C2K.js";
-import { F as Ot } from "./field-label.BQaDr37D.js";
-import { E as Lt } from "./error-message.B-n8wzFo.js";
-import { P as Ye } from "./popper-container.Cj3AWXSd.js";
+import { B as Re, N as gt } from "./minus-small.CAycYt5H.js";
+import { C as ht } from "./checkmark-small.BlvuuCsU.js";
+import { B as St } from "./chip.Cc4f2vws.js";
+import { b as Me, a as xt, h as Ct, e as It } from "./button-actions.B332AjJp.js";
+import { B as Lt } from "./directive.D1-d-C2K.js";
+import { F as Ot } from "./field-label.Bz2PGQ-8.js";
+import { E as Et } from "./error-message.B-n8wzFo.js";
+import { P as je } from "./popper-container.Co4j6qME.js";
 import "../assets/dropdown.css";
-const et = (a, e, l, t) => {
+const tt = (a, e, l, t) => {
   const s = n(
     () => !!a.value?.length && a.value?.length === e.value.length
   ), o = n(() => a.value == null || a.value.length === 0 ? !1 : a.value?.length !== e.value.length);
   return {
     isAllSelected: s,
     isIndeterminate: o,
-    toggleSelectAll: (f) => {
-      f ? l() : t();
+    toggleSelectAll: (v) => {
+      v ? l() : t();
     }
   };
 };
-function Et(a, { disabled: e, itemHeight: l, overscan: t = 5, prefixHeight: s }) {
-  const o = x(null), i = x([]), f = x(0), v = x(0), d = x(0);
+function wt(a, { disabled: e, itemHeight: l, overscan: t = 5, prefixHeight: s }) {
+  const o = y(null), i = y([]), v = y(0), b = y(0), u = y(0);
   let r;
   const m = n(() => {
-    const S = typeof l == "number" ? a.value.length * l : a.value.reduce((_, E, O) => _ + l(O), 0), A = typeof l == "number" ? f.value * l : a.value.slice(0, f.value).reduce((_, E, O) => _ + l(O), 0);
+    const S = typeof l == "number" ? a.value.length * l : a.value.reduce((g, A, k) => g + l(k), 0), B = typeof l == "number" ? v.value * l : a.value.slice(0, v.value).reduce((g, A, k) => g + l(k), 0);
     return {
       style: {
-        marginTop: `${A}px`,
-        height: `${S - A}px`
+        marginTop: `${B}px`,
+        height: `${S - B}px`
       }
     };
-  }), b = () => {
-    const S = s?.value ?? 0, A = Math.max(o.value.scrollTop - S, 0);
+  }), d = () => {
+    const S = s?.value ?? 0, B = Math.max(o.value.scrollTop - S, 0);
     if (typeof l == "number")
-      return Math.floor(A / l);
-    let _ = 0, E = 0;
-    for (let O = 0; O < a.value.length; O += 1) {
-      const w = l(O);
-      if (_ += w, _ >= A) {
-        E = O;
+      return Math.floor(B / l);
+    let g = 0, A = 0;
+    for (let k = 0; k < a.value.length; k += 1) {
+      const $ = l(k);
+      if (g += $, g >= B) {
+        A = k;
         break;
       }
     }
-    return E;
+    return A;
   }, c = () => {
-    if (d.value = o.value.clientHeight, typeof l == "number")
-      return Math.ceil(d.value / l);
-    const S = f.value ?? 0;
-    let A = 0, _ = 0;
-    for (let E = S; E < a.value.length; E += 1) {
-      const O = l(E);
-      if (A += O, _ = E, A > d.value)
+    if (u.value = o.value.clientHeight, typeof l == "number")
+      return Math.ceil(u.value / l);
+    const S = v.value ?? 0;
+    let B = 0, g = 0;
+    for (let A = S; A < a.value.length; A += 1) {
+      const k = l(A);
+      if (B += k, g = A, B > u.value)
         break;
     }
-    return _ - S;
-  }, y = () => {
+    return g - S;
+  }, _ = () => {
     if (o.value) {
       const S = c();
-      f.value = b(), v.value = Math.min(f.value + S + t, a.value.length), i.value = a.value.slice(f.value, v.value);
+      v.value = d(), b.value = Math.min(v.value + S + t, a.value.length), i.value = a.value.slice(v.value, b.value);
     }
-  }, I = () => {
-    y();
+  }, R = () => {
+    _();
   };
-  e || (ut(() => {
-    o.value && (d.value = o.value.clientHeight, r = _t(o.value, ({ clientHeight: S }) => {
-      d.value = S, y();
-    }), y());
-  }), dt(() => {
+  e || (dt(() => {
+    o.value && (u.value = o.value.clientHeight, r = yt(o.value, ({ clientHeight: S }) => {
+      u.value = S, _();
+    }), _());
+  }), pt(() => {
     r?.disconnect();
   }), Q(
     () => a.value,
     () => {
-      y();
+      _();
     }
   ));
-  const T = {
+  const L = {
     ref: o,
     style: { overflowY: "auto" }
-  }, F = (S) => {
+  }, O = (S) => {
     if (!o.value)
       return;
-    const A = typeof l == "number" ? S * l : a.value.slice(0, S).reduce((J, z, L) => J + l(L), 0), _ = typeof l == "number" ? l : l(S), E = A + _, { scrollTop: O, clientHeight: w } = o.value, $ = O + w;
-    E > $ ? o.value.scrollTop = w > 0 ? E - w : A : A < O && (o.value.scrollTop = A), y();
+    const B = typeof l == "number" ? S * l : a.value.slice(0, S).reduce((Y, V, C) => Y + l(C), 0), g = typeof l == "number" ? l : l(S), A = B + g, { scrollTop: k, clientHeight: $ } = o.value, E = k + $;
+    A > E ? o.value.scrollTop = $ > 0 ? A - $ : B : B < k && (o.value.scrollTop = B), _();
   };
   return e ? {
     containerRef: o,
-    containerProps: T,
+    containerProps: L,
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     onScroll: () => {
     },
@@ -112,22 +112,22 @@ function Et(a, { disabled: e, itemHeight: l, overscan: t = 5, prefixHeight: s })
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     scrollToIndex: () => {
     },
-    startIndex: x(0)
+    startIndex: y(0)
   } : {
     containerRef: o,
-    containerProps: T,
-    onScroll: I,
+    containerProps: L,
+    onScroll: R,
     list: i,
     wrapperProps: m,
-    scrollToIndex: F,
-    startIndex: f
+    scrollToIndex: O,
+    startIndex: v
   };
 }
-var u = /* @__PURE__ */ ((a) => (a.SELECT = "select", a.SHOW_MORE = "show-more", a.ESCAPE = "escape-pressed", a.CLICK = "click", a.ENTER = "enter-pressed", a.SPACE = "space-pressed", a.TAB = "tab-pressed", a.CLOSE_DROPDOWN = "close-dropdown", a))(u || {}), ie = /* @__PURE__ */ ((a) => (a.AUTOMATIC = "automatic", a.BUTTON = "button", a.NONE = "none", a))(ie || {});
-const wt = V({
+var p = /* @__PURE__ */ ((a) => (a.SELECT = "select", a.SHOW_MORE = "show-more", a.ESCAPE = "escape-pressed", a.CLICK = "click", a.ENTER = "enter-pressed", a.SPACE = "space-pressed", a.TAB = "tab-pressed", a.CLOSE_DROPDOWN = "close-dropdown", a))(p || {}), ne = /* @__PURE__ */ ((a) => (a.AUTOMATIC = "automatic", a.BUTTON = "button", a.NONE = "none", a))(ne || {});
+const Tt = W({
   name: "bento-listbox-static-category",
   components: {
-    BentoTypography: ue
+    BentoTypography: pe
   },
   props: {
     /**
@@ -139,18 +139,18 @@ const wt = V({
     }
   }
 });
-var Tt = function() {
+var At = function() {
   var e = this, l = e._self._c;
   return e._self._setupProxy, l("div", { staticClass: "b-listbox-single-select-category", attrs: { role: "group", "aria-label": e.categoryLabel } }, [l("bento-typography", { staticClass: "b-listbox-single-select-category__label-text", attrs: { variant: "caption", el: "span", "aria-hidden": "true" } }, [e._v(" " + e._s(e.categoryLabel) + " ")]), l("div", [e._t("default")], 2)], 1);
-}, At = [], kt = /* @__PURE__ */ W(
-  wt,
+}, Dt = [], kt = /* @__PURE__ */ q(
   Tt,
   At,
+  Dt,
   !1,
   null,
   "bfbc1649"
 );
-const Dt = kt.exports, Bt = V({
+const Bt = kt.exports, Rt = W({
   name: "bento-listbox-option",
   props: {
     /**
@@ -166,7 +166,7 @@ const Dt = kt.exports, Bt = V({
      */
     selected: { type: Boolean, default: !1 }
   },
-  emits: [u.CLICK, u.ENTER, u.SPACE, u.TAB],
+  emits: [p.CLICK, p.ENTER, p.SPACE, p.TAB],
   setup(a, { emit: e }) {
     const l = n(() => ({
       "b-listbox-option--active": a.active,
@@ -175,13 +175,13 @@ const Dt = kt.exports, Bt = V({
     }));
     return {
       // Enums
-      BentoKeyboardNavigationKeyDownEvent: U,
-      BentoListboxEvent: u,
+      BentoKeyboardNavigationKeyDownEvent: K,
+      BentoListboxEvent: p,
       // Values
       conditionalClasses: l,
       // Events
       onClick: (o) => {
-        e(u.CLICK, o);
+        e(p.CLICK, o);
       },
       onOptionSelected: (o, i) => {
         e(o, i);
@@ -189,7 +189,7 @@ const Dt = kt.exports, Bt = V({
     };
   }
 });
-var Rt = function() {
+var Mt = function() {
   var e = this, l = e._self._c;
   return e._self._setupProxy, l("div", e._b({ staticClass: "b-listbox-option", class: e.conditionalClasses, attrs: { role: "option" }, on: { click: e.onClick, keydown: [function(t) {
     return !t.type.indexOf("key") && e._k(t.keyCode, "enter", 13, t.key, "Enter") ? null : e.onOptionSelected(e.BentoListboxEvent.ENTER, t);
@@ -198,38 +198,38 @@ var Rt = function() {
   }, function(t) {
     return !t.type.indexOf("key") && e._k(t.keyCode, "tab", 9, t.key, "Tab") ? null : e.onOptionSelected(e.BentoListboxEvent.TAB, t);
   }] } }, "div", e.$attrs, !1), [e._t("default")], 2);
-}, Mt = [], Nt = /* @__PURE__ */ W(
-  Bt,
+}, Nt = [], $t = /* @__PURE__ */ q(
   Rt,
   Mt,
+  Nt,
   !1,
   null,
   "6722b88d"
 );
-const $e = Nt.exports, $t = {
+const Pe = $t.exports, Pt = {
   __name: "checkmark",
   setup(a) {
-    const e = Me(), l = String(e?.uid ?? e?.proxy?._uid);
+    const e = Ne(), l = String(e?.uid ?? e?.proxy?._uid);
     return { __sfc: !0, instance: e, uuid: l };
   }
 };
-var Pt = function() {
+var Ft = function() {
   var e = this, l = e._self._c;
   return e._self._setupProxy, l("svg", e._b({ staticClass: "ui-assets-icons-16", attrs: { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" } }, "svg", e.$attrs, !1), [e.$attrs["svg-title"] ? l("title", [e._v(e._s(e.$attrs["svg-title"]))]) : e._e(), l("path", { attrs: { 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" } })]);
-}, Ft = [], Vt = /* @__PURE__ */ W(
-  $t,
+}, zt = [], Vt = /* @__PURE__ */ q(
   Pt,
   Ft,
+  zt,
   !1,
   null,
   null
 );
-const zt = Vt.exports, Gt = V({
+const Gt = Vt.exports, Ut = W({
   name: "bento-listbox-single-select-option",
   components: {
-    BentoListboxOption: $e,
-    BentoTypography: ue,
-    CheckmarkIcon: zt
+    BentoListboxOption: Pe,
+    BentoTypography: pe,
+    CheckmarkIcon: Gt
   },
   props: {
     /**
@@ -253,7 +253,7 @@ const zt = Vt.exports, Gt = V({
      */
     selected: { type: Boolean, default: !1 }
   },
-  emits: [u.ENTER, u.SELECT, u.SPACE, u.TAB],
+  emits: [p.ENTER, p.SELECT, p.SPACE, p.TAB],
   setup(a, { emit: e }) {
     const l = (i) => {
       a.disabled || e(i, a.option);
@@ -264,13 +264,13 @@ const zt = Vt.exports, Gt = V({
       ariaSelected: s,
       tabIndex: o,
       // Enums
-      BentoListboxEvent: u,
+      BentoListboxEvent: p,
       // Events
       onOptionSelected: l
     };
   }
 });
-var Ut = function() {
+var Wt = function() {
   var e = this, l = e._self._c;
   return e._self._setupProxy, l("bento-listbox-option", { staticClass: "b-listbox-single-select-option", attrs: { active: e.active, disabled: e.disabled, selected: e.selected, "aria-selected": e.ariaSelected, "aria-disabled": e.ariaDisabled, tabindex: e.tabIndex }, on: { click: function(t) {
     return e.onOptionSelected(e.BentoListboxEvent.SELECT);
@@ -283,16 +283,16 @@ var Ut = function() {
   } } }, [e._t("default", function() {
     return [l("span", { staticClass: "b-listbox-single-select-option__text" }, [l("bento-typography", { attrs: { el: "span" } }, [e._v(e._s(e.option.label))]), e.option.description ? l("bento-typography", { staticClass: "b-listbox-single-select-option__description", attrs: { el: "span" } }, [e._v(" " + e._s(e.option.description) + " ")]) : e._e()], 1)];
   }, null, e.option), l("span", { staticClass: "b-listbox-single-select-option__check-icon" }, [l("checkmark-icon", { directives: [{ name: "show", rawName: "v-show", value: e.selected, expression: "selected" }], attrs: { "svg-title": "selected" } })], 1)], 2);
-}, Wt = [], Kt = /* @__PURE__ */ W(
-  Gt,
+}, Kt = [], qt = /* @__PURE__ */ q(
   Ut,
   Wt,
+  Kt,
   !1,
   null,
   "232e0377"
 );
-const qt = Kt.exports, tt = ({ items: a, totalItemCount: e }, l) => {
-  const t = n(() => e?.value ? e.value - 1 : a.value.length - 1), s = x(0), o = (c) => {
+const Yt = qt.exports, lt = ({ items: a, totalItemCount: e }, l) => {
+  const t = n(() => e?.value ? e.value - 1 : a.value.length - 1), s = y(0), o = (c) => {
     switch (c) {
       case "increase":
         s.value += 1;
@@ -301,53 +301,53 @@ const qt = Kt.exports, tt = ({ items: a, totalItemCount: e }, l) => {
         s.value -= 1;
         break;
     }
-  }, i = ({ edgeCaseItem: c }, y) => {
-    s.value !== c && (o(y), l(s.value));
-  }, f = (c) => {
-    b(c), i(
+  }, i = ({ edgeCaseItem: c }, _) => {
+    s.value !== c && (o(_), l(s.value));
+  }, v = (c) => {
+    d(c), i(
       {
         edgeCaseItem: t.value
       },
       "increase"
       /* INCREASE */
     );
-  }, v = (c) => {
-    b(c), i(
+  }, b = (c) => {
+    d(c), i(
       {
         edgeCaseItem: 0
       },
       "decrease"
       /* DECREASE */
     );
-  }, d = (c) => {
-    b(c), s.value = 0, l(s.value);
+  }, u = (c) => {
+    d(c), s.value = 0, l(s.value);
   }, r = (c) => {
-    b(c), s.value = t.value, l(s.value);
+    d(c), s.value = t.value, l(s.value);
   }, m = (c) => {
     s.value = c;
-  }, b = (c) => {
+  }, d = (c) => {
     c?.detail?.preventDefault(), c?.detail?.stopPropagation();
   };
   return {
-    moveToFirstElement: d,
+    moveToFirstElement: u,
     moveToLastElement: r,
-    moveToNextElement: f,
-    moveToPreviousElement: v,
+    moveToNextElement: v,
+    moveToPreviousElement: b,
     setListboxFocusedIndex: m,
-    preventDefault: b,
+    preventDefault: d,
     focusedIndex: s
   };
-}, Ue = (a, e, l = x("option"), t = !0) => {
-  const s = x([]), o = async () => {
+}, We = (a, e, l = y("option"), t = !0) => {
+  const s = y([]), o = async () => {
     if (!a.value || a.value.nodeType === Node.COMMENT_NODE)
       return;
     const i = Array.from(a.value.querySelectorAll(`[role="${l.value}"]`));
-    s.value = t ? i.filter((f) => f.checkVisibility()) : i;
+    s.value = t ? i.filter((v) => v.checkVisibility()) : i;
   };
   return Q(
     e,
     () => {
-      Z(() => {
+      j(() => {
         o();
       });
     },
@@ -356,13 +356,13 @@ const qt = Kt.exports, tt = ({ items: a, totalItemCount: e }, l) => {
     visibleDomOptions: s,
     updateVisibleDomOptions: o
   };
-}, lt = (a, e) => `${a}-option-${encodeURIComponent(String(e))}`, Yt = V({
+}, at = (a, e) => `${a}-option-${encodeURIComponent(String(e))}`, jt = W({
   name: "bento-listbox-single-select",
   components: {
-    BentoListboxSingleSelectCategory: Dt,
-    BentoListboxSingleSelectOption: qt
+    BentoListboxSingleSelectCategory: Bt,
+    BentoListboxSingleSelectOption: Yt
   },
-  directives: { BentoKeyboardNavigationDirective: Ne },
+  directives: { BentoKeyboardNavigationDirective: $e },
   inheritAttrs: !1,
   props: {
     /**
@@ -424,71 +424,69 @@ const qt = Kt.exports, tt = ({ items: a, totalItemCount: e }, l) => {
      */
     virtualScrollStartIndex: { type: Number, default: 0 }
   },
-  emits: [u.SELECT, u.ENTER, u.SPACE, u.TAB],
+  emits: [p.SELECT, p.ENTER, p.SPACE, p.TAB],
   setup(a, { emit: e, expose: l, slots: t, attrs: s }) {
-    const o = x(), i = x([]), f = n(() => !!a.selectedValue?.length && a.selectedValue.at(0)), v = n(
+    const o = y(), i = y([]), v = n(() => !!a.selectedValue?.length && a.selectedValue.at(0)), b = n(
       () => ({
         "aria-label": s["aria-label"]?.toString(),
-        "aria-busy": s["aria-busy"]?.toString(),
-        "aria-atomic": s["aria-atomic"]?.toString(),
-        "aria-live": s["aria-live"]?.toString()
+        "aria-busy": s["aria-busy"]?.toString()
       })
-    ), d = n(() => !!a.items.some(({ items: L }) => !!L)), r = (L) => (C) => {
-      e(L, [C]);
-    }, m = (L) => lt(a.optionIdBase, L.value), { visibleDomOptions: b, updateVisibleDomOptions: c } = Ue(
+    ), u = n(() => !!a.items.some(({ items: C }) => !!C)), r = (C) => (z) => {
+      e(C, [z]);
+    }, m = (C) => at(a.optionIdBase, C.value), { visibleDomOptions: d, updateVisibleDomOptions: c } = We(
       o,
-      H(a, "items"),
-      x("option"),
+      J(a, "items"),
+      y("option"),
       !1
-    ), y = n(() => a.totalItemCount > 0), I = (L) => {
-      if (!y.value)
+    ), _ = n(() => a.totalItemCount > 0), R = (C) => {
+      if (!_.value)
         return;
-      const C = L.target;
-      if (C === o.value || C?.getAttribute("role") !== "option")
+      const z = C.target;
+      if (z === o.value || z?.getAttribute("role") !== "option")
         return;
-      const N = b.value.indexOf(C);
-      if (N !== -1) {
-        const D = N + a.virtualScrollStartIndex;
-        $(D);
+      const w = d.value.indexOf(z);
+      if (w !== -1) {
+        const x = w + a.virtualScrollStartIndex;
+        E(x);
       }
-    }, T = async (L) => {
-      if (y.value && a.scrollToIndex) {
-        a.scrollToIndex(L), await Z(), await c();
-        const C = L - a.virtualScrollStartIndex;
-        b.value[C]?.focus();
+    }, L = async (C) => {
+      if (_.value && a.scrollToIndex) {
+        a.scrollToIndex(C), await j(), await c();
+        const z = C - a.virtualScrollStartIndex;
+        d.value[z]?.focus();
       } else
-        b.value[L]?.focus();
-    }, F = async (L) => {
-      $(L), await T(L);
-    }, S = (L, C) => {
-      if (!L || !C)
+        d.value[C]?.focus();
+    }, O = async (C) => {
+      E(C), await L(C);
+    }, S = (C, z) => {
+      if (!C || !z)
         return;
-      const N = L.getBoundingClientRect(), D = C, K = D.getBoundingClientRect();
-      N.top < K.top ? D.scrollTop -= K.top - N.top : N.bottom > K.bottom && (D.scrollTop += N.bottom - K.bottom);
-    }, A = async (L, C) => {
-      await c(), y.value && a.scrollToIndex ? a.scrollToIndex(L) : S(b.value[L], C);
+      const w = C.getBoundingClientRect(), x = z, P = x.getBoundingClientRect();
+      w.top < P.top ? x.scrollTop -= P.top - w.top : w.bottom > P.bottom && (x.scrollTop += w.bottom - P.bottom);
+    }, B = async (C, z) => {
+      await c(), _.value && a.scrollToIndex ? a.scrollToIndex(C) : S(d.value[C], z);
     }, {
-      moveToNextElement: _,
-      moveToPreviousElement: E,
-      moveToFirstElement: O,
-      moveToLastElement: w,
-      setListboxFocusedIndex: $
-    } = tt(
+      moveToNextElement: g,
+      moveToPreviousElement: A,
+      moveToFirstElement: k,
+      moveToLastElement: $,
+      setListboxFocusedIndex: E
+    } = lt(
       {
-        items: b,
-        totalItemCount: H(a, "totalItemCount")
+        items: d,
+        totalItemCount: J(a, "totalItemCount")
       },
-      T
-    ), J = {
-      [U.ARROW_UP]: E,
-      [U.ARROW_DOWN]: _,
-      [U.HOME]: O,
-      [U.END]: w
-    }, z = {
-      [u.SELECT]: r(u.SELECT),
-      [u.SPACE]: r(u.SPACE),
-      [u.TAB]: r(u.TAB),
-      [u.ENTER]: r(u.ENTER)
+      L
+    ), Y = {
+      [K.ARROW_UP]: A,
+      [K.ARROW_DOWN]: g,
+      [K.HOME]: k,
+      [K.END]: $
+    }, V = {
+      [p.SELECT]: r(p.SELECT),
+      [p.SPACE]: r(p.SPACE),
+      [p.TAB]: r(p.TAB),
+      [p.ENTER]: r(p.ENTER)
     };
     return l({
       /**
@@ -500,46 +498,46 @@ const qt = Kt.exports, tt = ({ items: a, totalItemCount: e }, l) => {
        * Method to set the index of the item to be focused on
        * Used for focus management to be kept in-sync with parent e.g. dropdowns
        */
-      setListboxFocusedIndex: $,
+      setListboxFocusedIndex: E,
       /**
        * Navigates to an item by global index, handling virtual scroll if enabled.
        * Scrolls the virtual list and focuses the item.
        */
-      navigateToItem: F,
+      navigateToItem: O,
       /**
        * Scrolls to an item by global index without changing focus.
        * Used when the dropdown opens via click to bring the selected option into view.
        */
-      scrollToItem: A
+      scrollToItem: B
     }), {
       // Enums
-      BentoListboxEvent: u,
+      BentoListboxEvent: p,
       // Values
       listboxRef: o,
       listboxItemRef: i,
-      selectedItem: f,
+      selectedItem: v,
       slots: t,
-      ariaAttributes: v,
+      ariaAttributes: b,
       getOptionId: m,
       // Computed
-      hasCategories: d,
+      hasCategories: u,
       // Methods
       onOptionSelected: r,
       // Keyboard navigation
-      listboxListeners: J,
-      listboxOptionListeners: z,
+      listboxListeners: Y,
+      listboxOptionListeners: V,
       // Virtual scroll focus management
-      handleVirtualScrollingFocus: I
+      handleVirtualScrollingFocus: R
     };
   }
 });
-var jt = function() {
+var Ht = function() {
   var e = this, l = e._self._c;
   return e._self._setupProxy, l("div", e._g(e._b({ directives: [{ name: "bento-keyboard-navigation-directive", rawName: "v-bento-keyboard-navigation-directive" }], ref: "listboxRef", attrs: { role: "listbox" }, on: { focusin: e.handleVirtualScrollingFocus } }, "div", e.ariaAttributes, !1), e.listboxListeners), [e.hasCategories && e.staticCategories ? [e._l(e.items, function(t) {
     return [t.items && t.items.length > 0 ? l("bento-listbox-single-select-category", { key: `category-${t.value}`, attrs: { "category-label": t.label } }, e._l(t.items, function(s) {
       return l("bento-listbox-single-select-option", e._g({ key: s.value, ref: "listboxItemRef", refInFor: !0, attrs: { id: e.getOptionId(s), role: "option", active: e.activeDescendantId === e.getOptionId(s), option: s, disabled: e.isOptionDisabled ? e.isOptionDisabled(s) : null, selected: s.value === e.selectedItem.value }, scopedSlots: e._u([e._l(e.slots, function(o, i) {
-        return { key: i, fn: function(f) {
-          return [e._t(i, null, null, f)];
+        return { key: i, fn: function(v) {
+          return [e._t(i, null, null, v)];
         } };
       })], null, !0) }, e.listboxOptionListeners));
     }), 1) : l("bento-listbox-single-select-option", e._g({ key: `option-${t.value}`, ref: "listboxItemRef", refInFor: !0, attrs: { id: e.getOptionId(t), role: "option", active: e.activeDescendantId === e.getOptionId(t), option: t, disabled: e.isOptionDisabled ? e.isOptionDisabled(t) : null, selected: t.value === e.selectedItem.value }, scopedSlots: e._u([e._l(e.slots, function(s, o) {
@@ -554,34 +552,34 @@ var jt = function() {
       } };
     })], null, !0) }, e.listboxOptionListeners));
   })], 2);
-}, Ht = [], Jt = /* @__PURE__ */ W(
-  Yt,
+}, Jt = [], Xt = /* @__PURE__ */ q(
   jt,
   Ht,
+  Jt,
   !1,
   null,
   null
 );
-const Xt = Jt.exports, Zt = {
+const Zt = Xt.exports, Qt = {
   __name: "double-checkmark-small",
   setup(a) {
-    const e = Me(), l = String(e?.uid ?? e?.proxy?._uid);
+    const e = Ne(), l = String(e?.uid ?? e?.proxy?._uid);
     return { __sfc: !0, instance: e, uuid: l };
   }
 };
-var Qt = function() {
+var el = function() {
   var e = this, l = e._self._c;
   return e._self._setupProxy, l("svg", e._b({ staticClass: "ui-assets-icons-16", attrs: { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" } }, "svg", e.$attrs, !1), [e.$attrs["svg-title"] ? l("title", [e._v(e._s(e.$attrs["svg-title"]))]) : e._e(), l("path", { attrs: { 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" } }), l("path", { attrs: { fill: "#001222", d: "M13.9307 5.75L8.87012 10.8105L7.80957 9.75L12.8701 4.68945L13.9307 5.75Z" } })]);
-}, el = [], tl = /* @__PURE__ */ W(
-  Zt,
+}, tl = [], ll = /* @__PURE__ */ q(
   Qt,
   el,
+  tl,
   !1,
   null,
   null
 );
-const ll = tl.exports, al = {}, sl = /* @__PURE__ */ V({
-  ...al,
+const al = ll.exports, sl = {}, ol = /* @__PURE__ */ W({
+  ...sl,
   __name: "decorative-checkbox",
   props: {
     disabled: { type: Boolean, default: !1 },
@@ -591,29 +589,29 @@ const ll = tl.exports, al = {}, sl = /* @__PURE__ */ V({
   },
   setup(a) {
     const e = a, l = n(() => ({
-      [`b-checkbox-input--${Be.DISABLED}`]: e.disabled
+      [`b-checkbox-input--${Re.DISABLED}`]: e.disabled
     })), t = n(() => ({
-      [`b-checkbox-input__outline--${Be.UNCHECKED}`]: !e.checked && !e.indeterminate && !e.allSelected,
-      [`b-checkbox-input__outline--${Be.CHECKED}`]: (e.checked || e.allSelected) && !e.indeterminate,
-      [`b-checkbox-input__outline--${Be.INDETERMINATE}`]: e.indeterminate
+      [`b-checkbox-input__outline--${Re.UNCHECKED}`]: !e.checked && !e.indeterminate && !e.allSelected,
+      [`b-checkbox-input__outline--${Re.CHECKED}`]: (e.checked || e.allSelected) && !e.indeterminate,
+      [`b-checkbox-input__outline--${Re.INDETERMINATE}`]: e.indeterminate
     }));
-    return { __sfc: !0, props: e, conditionalClasses: l, outlineConditionalClasses: t, CheckmarkSmallIcon: gt, MinusSmallIcon: yt, DoubleCheckmarkSmallIcon: ll };
+    return { __sfc: !0, props: e, conditionalClasses: l, outlineConditionalClasses: t, CheckmarkSmallIcon: ht, MinusSmallIcon: gt, DoubleCheckmarkSmallIcon: al };
   }
 });
-var ol = function() {
+var nl = function() {
   var e = this, l = e._self._c, t = e._self._setupProxy;
   return l("div", { staticClass: "b-checkbox-input", class: t.conditionalClasses, attrs: { role: "presentation" } }, [e.indeterminate ? l(t.MinusSmallIcon, { staticClass: "b-checkbox-input__icon", attrs: { "svg-title": "", "aria-hidden": "true" } }) : e.allSelected ? l(t.DoubleCheckmarkSmallIcon, { staticClass: "b-checkbox-input__icon", attrs: { "svg-title": "", "aria-hidden": "true", "data-testid": "decorative-checkbox-double-checkmark-icon" } }) : e.checked ? l(t.CheckmarkSmallIcon, { staticClass: "b-checkbox-input__icon", attrs: { "svg-title": "", "aria-hidden": "true" } }) : e._e(), l("div", { staticClass: "b-checkbox-input__outline", class: t.outlineConditionalClasses })], 1);
-}, nl = [], il = /* @__PURE__ */ W(
-  sl,
+}, il = [], rl = /* @__PURE__ */ q(
   ol,
   nl,
+  il,
   !1,
   null,
   "f89ecb37"
 );
-const We = il.exports;
-var at = /* @__PURE__ */ ((a) => (a.DISABLED = "disabled", a.STATIC_CATEGORY = "static-category", a))(at || {}), fe = /* @__PURE__ */ ((a) => (a.SELECT_CATEGORY = "select-category", a.UNSELECT_CATEGORY = "unselect-category", a.TOGGLE_CATEGORY_VISIBILITY = "toggle-category-visibility", a))(fe || {});
-const rl = {
+const Ke = rl.exports;
+var st = /* @__PURE__ */ ((a) => (a.DISABLED = "disabled", a.STATIC_CATEGORY = "static-category", a))(st || {}), me = /* @__PURE__ */ ((a) => (a.SELECT_CATEGORY = "select-category", a.UNSELECT_CATEGORY = "unselect-category", a.TOGGLE_CATEGORY_VISIBILITY = "toggle-category-visibility", a))(me || {});
+const cl = {
   "de-DE": { loading: "Laden", showMore: "Mehr anzeigen" },
   "en-GB": { loading: "Loading", showMore: "Show more" },
   "en-US": { loading: "Loading", showMore: "Show more" },
@@ -625,11 +623,11 @@ const rl = {
   "ja-JP": { loading: "読み込み中", showMore: "さらに表示" },
   "pt-BR": { loading: "Carregando", showMore: "Mostrar mais" },
   "zh-CN": { loading: "正在加载", showMore: "显示更多" }
-}, cl = {
+}, ul = {
   name: "listbox-lazy-load",
-  i18n: { messages: rl }
-}, ul = /* @__PURE__ */ V({
-  ...cl,
+  i18n: { messages: cl }
+}, dl = /* @__PURE__ */ W({
+  ...ul,
   props: {
     condensed: { type: Boolean, default: !1 },
     hasMoreItems: { type: Boolean, default: !1 },
@@ -639,31 +637,31 @@ const rl = {
   },
   emits: ["show-more"],
   setup(a) {
-    const e = a, { t: l } = de(), t = n(
-      () => e.type === ie.BUTTON && e.hasMoreItems
+    const e = a, { t: l } = fe(), t = n(
+      () => e.type === ne.BUTTON && e.hasMoreItems
     ), s = n(
-      () => e.loading ? Re.LOADING : Re.START
+      () => e.loading ? Me.LOADING : Me.START
     ), o = n(() => e.loading ? l("loading") : l("showMore"));
-    return { __sfc: !0, t: l, props: e, shouldDisplayShowMoreButton: t, loadingButtonState: s, showMoreButtonText: o, BentoLoadingIndicator: Ze, BentoLoadingButton: St };
+    return { __sfc: !0, t: l, props: e, shouldDisplayShowMoreButton: t, loadingButtonState: s, showMoreButtonText: o, BentoListboxLazyLoadType: ne, BentoLoadingIndicator: Qe, BentoLoadingButton: xt };
   }
 });
-var dl = function() {
+var pl = function() {
   var e = this, l = e._self._c, t = e._self._setupProxy;
-  return t.shouldDisplayShowMoreButton || e.loading ? l("div", { staticClass: "b-listbox-lazy-load" }, [t.shouldDisplayShowMoreButton ? l(t.BentoLoadingButton, { attrs: { state: t.loadingButtonState, tabindex: e.tabindex, condensed: e.condensed, variant: "secondary" }, on: { "!click": function(s) {
+  return t.shouldDisplayShowMoreButton || e.loading ? l("div", { staticClass: "b-listbox-lazy-load" }, [l("div", { staticClass: "b-listbox-lazy-load__announcement", attrs: { role: "status", "aria-live": "polite", "aria-atomic": "true" } }, [e.type === t.BentoListboxLazyLoadType.AUTOMATIC && e.loading ? [e._v(" " + e._s(t.t("loading")) + " ")] : e._e()], 2), t.shouldDisplayShowMoreButton ? l(t.BentoLoadingButton, { attrs: { state: t.loadingButtonState, tabindex: e.tabindex, condensed: e.condensed, variant: "secondary" }, on: { "!click": function(s) {
     return e.$emit("show-more", s);
   } } }, [e._v(" " + e._s(t.showMoreButtonText) + " ")]) : e.loading ? l(t.BentoLoadingIndicator) : e._e()], 1) : e._e();
-}, pl = [], fl = /* @__PURE__ */ W(
-  ul,
+}, fl = [], bl = /* @__PURE__ */ q(
   dl,
   pl,
+  fl,
   !1,
   null,
-  "d86387ad"
+  "c2e191fb"
 );
-const st = fl.exports, bl = {
+const ot = bl.exports, vl = {
   "de-DE": { thereWasAnErrorLoadingNewItems: "Beim Laden neuer Artikel ist ein Fehler aufgetreten." },
   "en-GB": { thereWasAnErrorLoadingNewItems: "There was an error loading new items." },
-  "en-US": { thereWasAnErrorLoadingNewItems: "There was an error loading new items." },
+  "en-US": { loadMoreItemsForCategory: "Load more items for {category}.", loadingItemsForCategory: "Loading items for {category}.", pressEnterOrSpaceToLoadMoreItems: "Press Enter or Space to load more items.", thereWasAnErrorLoadingNewItems: "There was an error loading new items." },
   "es-419": { thereWasAnErrorLoadingNewItems: "Se produjo un error al cargar los nuevos elementos." },
   "es-ES": { thereWasAnErrorLoadingNewItems: "Se produjo un error al cargar los nuevos elementos." },
   "fr-FR": { thereWasAnErrorLoadingNewItems: "Une erreur s'est produite lors du chargement des nouveaux éléments." },
@@ -671,27 +669,31 @@ const st = fl.exports, bl = {
   "ja-JP": { thereWasAnErrorLoadingNewItems: "新しいアイテムの読み込みにエラーが発生しました。" },
   "pt-BR": { thereWasAnErrorLoadingNewItems: "Ocorreu um erro ao carregar novos itens." },
   "zh-CN": { thereWasAnErrorLoadingNewItems: "加载新项目时出错。" }
-}, vl = {
+}, ml = {
   name: "listbox-multi-select-nested-lazy-load",
-  i18n: { messages: bl }
-}, ml = /* @__PURE__ */ V({
-  ...vl,
+  i18n: { messages: vl }
+}, _l = /* @__PURE__ */ W({
+  ...ml,
   props: {
     index: null,
     option: null
   },
   setup(a, { expose: e }) {
-    const l = a, t = x(!1), s = x(!1), { t: o } = de();
-    async function i(f) {
-      if (f.stopImmediatePropagation(), !t.value) {
-        s.value = !1, t.value = !0;
+    const l = a, t = y(!1), s = y(!1), o = y(""), i = y(null), v = re("nested-lazy-load-name");
+    let b = !1;
+    const { t: u } = fe();
+    async function r(m) {
+      if (m.stopImmediatePropagation(), !(t.value || b)) {
+        b = !0, await j(), i.value?.focus(), s.value = !1, t.value = !0, o.value = u("loadingItemsForCategory", { category: l.option.label }), b = !1;
         try {
           await l.option.lazyLoad?.lazyLoadEvent({
             value: l.option.value,
             index: l.index
-          });
+          }), o.value = "";
         } catch {
-          s.value = !0;
+          s.value = !0, o.value = `${u("thereWasAnErrorLoadingNewItems")} ${u(
+            "pressEnterOrSpaceToLoadMoreItems"
+          )}`;
         }
         t.value = !1;
       }
@@ -700,29 +702,31 @@ const st = fl.exports, bl = {
       /**
        * Trigger the lazy load event programmatically.
        */
-      showMore: i
-    }), { __sfc: !0, loading: t, failedAndRetry: s, t: o, props: l, showMore: i, BentoEmptyState: Qe, BentoListboxLazyLoad: st };
+      showMore: r
+    }), { __sfc: !0, loading: t, failedAndRetry: s, announcementMessage: o, nestedLazyLoadRef: i, accessibleNameId: v, pendingFocus: b, t: u, props: l, showMore: r, BentoEmptyState: et, BentoListboxLazyLoad: ot };
   }
 });
-var _l = function() {
+var yl = function() {
   var e = this, l = e._self._c, t = e._self._setupProxy;
-  return l("div", { attrs: { role: "treeitem", tabindex: 0 }, on: { keydown: [function(s) {
+  return l("div", { ref: "nestedLazyLoadRef", attrs: { role: "treeitem", tabindex: 0, "aria-labelledby": t.accessibleNameId }, on: { keydown: [function(s) {
     return !s.type.indexOf("key") && e._k(s.keyCode, "enter", 13, s.key, "Enter") ? null : (s.preventDefault(), t.showMore.apply(null, arguments));
   }, function(s) {
     return !s.type.indexOf("key") && e._k(s.keyCode, "space", 32, s.key, [" ", "Spacebar"]) ? null : (s.preventDefault(), t.showMore.apply(null, arguments));
-  }] } }, [t.failedAndRetry ? l(t.BentoEmptyState, { staticClass: "b-listbox-multi-select-nested-lazy-load__error-message", attrs: { variant: "basic" } }, [e._v(" " + e._s(t.t("thereWasAnErrorLoadingNewItems")) + " ")]) : e._e(), l(t.BentoListboxLazyLoad, { attrs: { type: "button", tabindex: -1, condensed: "", "has-more-items": e.option.lazyLoad?.hasMoreItems, loading: t.loading }, on: { "show-more": t.showMore } })], 1);
-}, yl = [], gl = /* @__PURE__ */ W(
-  ml,
+  }] } }, [l("span", { staticClass: "b-listbox-multi-select-nested-lazy-load__visually-hidden", attrs: { id: t.accessibleNameId } }, [e._v(" " + e._s(t.t("loadMoreItemsForCategory", { category: e.option.label })) + " ")]), l("div", { staticClass: "b-listbox-multi-select-nested-lazy-load__visually-hidden", attrs: { role: "status", "aria-live": "polite", "aria-atomic": "true" } }, [e._v(" " + e._s(t.announcementMessage) + " ")]), l("div", { attrs: { "aria-hidden": "true" }, on: { mousedown: function(s) {
+    s.preventDefault();
+  } } }, [t.failedAndRetry ? l(t.BentoEmptyState, { staticClass: "b-listbox-multi-select-nested-lazy-load__error-message", attrs: { variant: "basic" } }, [e._v(" " + e._s(t.t("thereWasAnErrorLoadingNewItems")) + " ")]) : e._e(), l(t.BentoListboxLazyLoad, { attrs: { type: "button", tabindex: -1, condensed: "", "has-more-items": e.option.lazyLoad?.hasMoreItems, loading: t.loading }, on: { "show-more": t.showMore } })], 1)]);
+}, gl = [], hl = /* @__PURE__ */ q(
   _l,
   yl,
+  gl,
   !1,
   null,
-  "b7c84651"
+  "7df9b0cd"
 );
-const hl = gl.exports, Sl = {
+const Sl = hl.exports, xl = {
   "de-DE": { categoryClosed: "{category} geschlossen", categoryOpened: "{category} geöffnet" },
   "en-GB": { categoryClosed: "{category} closed", categoryOpened: "{category} opened" },
-  "en-US": { categoryClosed: "{category} closed", categoryOpened: "{category} opened" },
+  "en-US": { allItemsForCategoryAreLoaded: "All items for {category} are loaded.", categoryClosed: "{category} closed", categoryOpened: "{category} opened" },
   "es-419": { categoryClosed: "{category} cerrado", categoryOpened: "{category} abierta" },
   "es-ES": { categoryClosed: "{category} cerrado", categoryOpened: "{category} abierto" },
   "es-MX": { categoryClosed: "{category} cerrado", categoryOpened: "{category} abierto" },
@@ -731,16 +735,16 @@ const hl = gl.exports, Sl = {
   "ja-JP": { categoryClosed: "{category}を閉じました", categoryOpened: "{category}を開きました" },
   "pt-BR": { categoryClosed: "{category} fechada", categoryOpened: "{categoria} aberta" },
   "zh-CN": { categoryClosed: "{category} 已关闭", categoryOpened: "{category} 已打开" }
-}, xl = V({
-  i18n: { messages: Sl },
+}, Cl = W({
+  i18n: { messages: xl },
   name: "bento-listbox-multi-select-category",
   components: {
-    BentoTypography: ue,
-    BentoListboxOption: $e,
-    BentoListboxMultiSelectNestedLazyLoad: hl,
-    ChevronDownIcon: Je,
-    ChevronUpIcon: Xe,
-    DecorativeCheckbox: We
+    BentoTypography: pe,
+    BentoListboxOption: Pe,
+    BentoListboxMultiSelectNestedLazyLoad: Sl,
+    ChevronDownIcon: Xe,
+    ChevronUpIcon: Ze,
+    DecorativeCheckbox: Ke
   },
   props: {
     /**
@@ -793,67 +797,73 @@ const hl = gl.exports, Sl = {
     tabindex: { type: Number, default: -1 }
   },
   emits: [
-    fe.SELECT_CATEGORY,
-    fe.UNSELECT_CATEGORY,
-    fe.TOGGLE_CATEGORY_VISIBILITY
+    me.SELECT_CATEGORY,
+    me.UNSELECT_CATEGORY,
+    me.TOGGLE_CATEGORY_VISIBILITY
   ],
   setup(a, { emit: e }) {
-    const l = x(!1), { t } = de(), s = ce("category-group"), o = ce("category-name"), i = x(null), f = (C) => a.isOptionDisabled ? a.isOptionDisabled(C) : !1, v = n(() => a.category.lazyLoad && a.category.items?.length === 0 ? !1 : a.category.items.every((C) => f(C))), d = H(a, "staticCategories"), r = n(() => l.value || a.staticCategories), m = n(() => ({
-      [`b-listbox-multi-select-category--${at.DISABLED}`]: v.value
-    })), b = (C, N) => {
-      C.preventDefault(), a.category.lazyLoad && a.category.items?.length === 0 && i.value.showMore(C), l.value = N !== void 0 ? N : !l.value, e(fe.TOGGLE_CATEGORY_VISIBILITY, a.category.value);
-    }, c = (C) => {
-      const N = f(C), D = a.selectedItemsList?.includes(C.value) || !1;
-      return { isDisabled: N, isPreSelected: D };
-    }, y = n(
-      () => a.category.items.filter((C) => {
-        const { isDisabled: N, isPreSelected: D } = c(C);
-        return N && D || !N;
+    const l = y(!1), { t } = fe(), s = re("category-group"), o = re("category-name"), i = y(null), v = y(""), b = (w) => a.isOptionDisabled ? a.isOptionDisabled(w) : !1, u = n(() => a.category.lazyLoad && a.category.items?.length === 0 ? !1 : a.category.items.every((w) => b(w))), r = J(a, "staticCategories"), m = n(() => l.value || a.staticCategories), d = n(() => ({
+      [`b-listbox-multi-select-category--${st.DISABLED}`]: u.value
+    })), c = (w, x) => {
+      w.preventDefault(), a.category.lazyLoad && a.category.items?.length === 0 && i.value.showMore(w), l.value = x !== void 0 ? x : !l.value, e(me.TOGGLE_CATEGORY_VISIBILITY, a.category.value);
+    }, _ = (w) => {
+      const x = b(w), P = a.selectedItemsList?.includes(w.value) || !1;
+      return { isDisabled: x, isPreSelected: P };
+    }, R = n(
+      () => a.category.items.filter((w) => {
+        const { isDisabled: x, isPreSelected: P } = _(w);
+        return x && P || !x;
       })
-    ), I = n(
-      () => y.value?.filter(({ value: C }) => a.selectedItemsList?.includes(C))
-    ), T = n(() => {
-      const C = l.value ? "categoryOpened" : "categoryClosed";
-      return t(C, { category: a.category.label });
-    }), F = () => {
-      e(fe.SELECT_CATEGORY);
-    }, S = () => {
-      e(fe.UNSELECT_CATEGORY);
-    }, A = n(
+    ), L = n(
+      () => R.value?.filter(({ value: w }) => a.selectedItemsList?.includes(w))
+    ), O = n(() => {
+      const w = l.value ? "categoryOpened" : "categoryClosed";
+      return t(w, { category: a.category.label });
+    }), S = () => {
+      e(me.SELECT_CATEGORY);
+    }, B = () => {
+      e(me.UNSELECT_CATEGORY);
+    }, g = n(
       () => !!a.category.lazyLoad && a.selectedItemsList.includes(a.category.value)
     ), {
-      isAllSelected: _,
-      isIndeterminate: E,
-      toggleSelectAll: O
-    } = et(I, y, F, S), w = n(() => A.value || _.value), $ = n(() => !A.value && E.value), J = n(() => $.value ? "mixed" : `${w.value}`), z = x(w.value), L = () => {
-      z.value = !z.value, O(z.value);
+      isAllSelected: A,
+      isIndeterminate: k,
+      toggleSelectAll: $
+    } = tt(L, R, S, B), E = n(() => g.value || A.value), Y = n(() => !g.value && k.value), V = n(() => Y.value ? "mixed" : `${E.value}`), C = y(E.value), z = () => {
+      C.value = !C.value, $(C.value);
     };
-    return Q(w, () => {
-      z.value = w.value;
-    }), {
+    return Q(E, () => {
+      C.value = E.value;
+    }), Q(
+      () => a.category.lazyLoad?.hasMoreItems,
+      (w, x) => {
+        v.value = x === !0 && w === !1 ? t("allItemsForCategoryAreLoaded", { category: a.category.label }) : "";
+      }
+    ), {
       // Refs
       lazyLoadRef: i,
       // Values
-      chevronTitle: T,
-      conditionalClass: m,
-      hasAllPropsDisabled: v,
+      chevronTitle: O,
+      conditionalClass: d,
+      hasAllPropsDisabled: u,
       isOpen: l,
-      isAllSelected: w,
-      isIndeterminate: $,
-      isStaticCategory: d,
+      isAllSelected: E,
+      isIndeterminate: Y,
+      isStaticCategory: r,
       categoryGroupId: s,
       categoryNameId: o,
+      lazyLoadAnnouncement: v,
       // Computed
-      showItemChildren: r,
-      ariaCheckedComputed: J,
+      showItemChildren: m,
+      ariaCheckedComputed: V,
       // Methods
-      handleSelectAll: L,
-      toggleOpen: b,
-      toggleSelectAll: O
+      handleSelectAll: z,
+      toggleOpen: c,
+      toggleSelectAll: $
     };
   }
 });
-var Cl = function() {
+var Il = function() {
   var e = this, l = e._self._c;
   return e._self._setupProxy, l("div", [e.isStaticCategory ? l("div", { staticClass: "b-listbox-multi-select-category b-listbox-multi-select-category--static-category", attrs: { "aria-hidden": "true" } }, [l("span", { staticClass: "b-listbox-multi-select-category__label" }, [l("bento-typography", { staticClass: "b-listbox-multi-select-category__label-text", attrs: { el: "span", variant: "caption" } }, [e._v(" " + e._s(e.category.label) + " ")])], 1)]) : l("bento-listbox-option", { staticClass: "b-listbox-multi-select-category__option", class: e.conditionalClass, attrs: { tabindex: e.tabindex, "aria-selected": e.ariaCheckedComputed !== "false", "aria-checked": e.ariaCheckedComputed, "aria-disabled": e.hasAllPropsDisabled, "aria-expanded": `${e.isOpen}`, role: "treeitem", "aria-owns": e.categoryGroupId, "aria-labelledby": e.categoryNameId }, on: { click: e.handleSelectAll, "enter-pressed": e.handleSelectAll, "space-pressed": function(t) {
     return t.preventDefault(), e.handleSelectAll.apply(null, arguments);
@@ -863,24 +873,24 @@ var Cl = function() {
     return !t.type.indexOf("key") && e._k(t.keyCode, "arrow-right", void 0, t.key, void 0) ? null : e.toggleOpen(t, !0);
   }] } }, [l("decorative-checkbox", { attrs: { indeterminate: e.isIndeterminate, disabled: e.hasAllPropsDisabled, checked: e.isAllSelected } }), l("span", { staticClass: "b-listbox-multi-select-category__label" }, [l("bento-typography", { staticClass: "b-listbox-multi-select-category__label-text", attrs: { id: e.categoryNameId, el: "span" } }, [e._v(" " + e._s(e.category.label) + " ")]), l("div", { staticClass: "b-listbox-multi-select-category__label-chevron", attrs: { "aria-hidden": "true", "data-testid": "toggle-listbox" }, on: { "!click": function(t) {
     return t.stopPropagation(), e.toggleOpen.apply(null, arguments);
-  } } }, [e.isOpen ? l("chevron-up-icon", { attrs: { "svg-title": e.chevronTitle } }) : l("chevron-down-icon", { attrs: { "svg-title": e.chevronTitle } })], 1)], 1)], 1), l("div", { directives: [{ name: "show", rawName: "v-show", value: e.showItemChildren, expression: "showItemChildren" }], attrs: { id: e.categoryGroupId, role: "group", "aria-label": e.category.label } }, [e._t("default"), e.category.lazyLoad?.hasMoreItems ? [l("bento-listbox-multi-select-nested-lazy-load", { ref: "lazyLoadRef", attrs: { option: e.category, index: e.optionIndex } })] : e._e()], 2)], 1);
-}, Il = [], Ol = /* @__PURE__ */ W(
-  xl,
+  } } }, [e.isOpen ? l("chevron-up-icon", { attrs: { "svg-title": e.chevronTitle } }) : l("chevron-down-icon", { attrs: { "svg-title": e.chevronTitle } })], 1)], 1), l("div", { staticClass: "b-listbox-multi-select-category__announcement", attrs: { role: "status", "aria-live": "polite", "aria-atomic": "true" } }, [e._v(" " + e._s(e.lazyLoadAnnouncement) + " ")])], 1), l("div", { directives: [{ name: "show", rawName: "v-show", value: e.showItemChildren, expression: "showItemChildren" }], attrs: { id: e.categoryGroupId, role: "group", "aria-label": e.category.label } }, [e._t("default"), e.category.lazyLoad?.hasMoreItems ? [l("bento-listbox-multi-select-nested-lazy-load", { ref: "lazyLoadRef", attrs: { option: e.category, index: e.optionIndex } })] : e._e()], 2)], 1);
+}, Ll = [], Ol = /* @__PURE__ */ q(
   Cl,
   Il,
+  Ll,
   !1,
   null,
-  "0ff00400"
+  "95ee6c93"
 );
-const Ll = Ol.exports;
-var ne = /* @__PURE__ */ ((a) => (a.SELECT_CATEGORY = "select-category", a.TOGGLE_CHECKBOX_SELECTION = "toggle-checkbox-selection", a.UNSELECT_CATEGORY = "unselect-category", a.TOGGLE_CATEGORY_VISIBILITY = "toggle-category-visibility", a))(ne || {});
-const El = V({
+const El = Ol.exports;
+var ie = /* @__PURE__ */ ((a) => (a.SELECT_CATEGORY = "select-category", a.TOGGLE_CHECKBOX_SELECTION = "toggle-checkbox-selection", a.UNSELECT_CATEGORY = "unselect-category", a.TOGGLE_CATEGORY_VISIBILITY = "toggle-category-visibility", a))(ie || {});
+const wl = W({
   name: "listbox-multi-select-options",
   components: {
-    BentoListboxOption: $e,
-    BentoTypography: ue,
-    ListboxMultiSelectCategory: Ll,
-    DecorativeCheckbox: We
+    BentoListboxOption: Pe,
+    BentoTypography: pe,
+    ListboxMultiSelectCategory: El,
+    DecorativeCheckbox: Ke
   },
   inheritAttrs: !1,
   props: {
@@ -957,30 +967,30 @@ const El = V({
     }
   },
   emits: [
-    ne.TOGGLE_CHECKBOX_SELECTION,
-    ne.SELECT_CATEGORY,
-    ne.UNSELECT_CATEGORY,
-    ne.TOGGLE_CATEGORY_VISIBILITY
+    ie.TOGGLE_CHECKBOX_SELECTION,
+    ie.SELECT_CATEGORY,
+    ie.UNSELECT_CATEGORY,
+    ie.TOGGLE_CATEGORY_VISIBILITY
   ],
   setup(a, { emit: e }) {
-    const l = (d) => {
-      a.isOptionDisabled(d) || e(ne.TOGGLE_CHECKBOX_SELECTION, d);
-    }, t = (d) => !!d.items, s = (d) => {
+    const l = (u) => {
+      a.isOptionDisabled(u) || e(ie.TOGGLE_CHECKBOX_SELECTION, u);
+    }, t = (u) => !!u.items, s = (u) => {
       const r = a.isMultiLevel && a.searching;
-      return d.description && (!a.isMultiLevel || r);
-    }, o = (d) => {
+      return u.description && (!a.isMultiLevel || r);
+    }, o = (u) => {
       const r = !!a.parentCategory?.lazyLoad && a.selectedItemsList.includes(a.parentCategory.value);
-      if (d.items) {
-        const m = !!d.lazyLoad && a.selectedItemsList.includes(d.value);
-        return r || m || !!d.items.find((b) => a.selectedItemsList.includes(b.value));
+      if (u.items) {
+        const m = !!u.lazyLoad && a.selectedItemsList.includes(u.value);
+        return r || m || !!u.items.find((d) => a.selectedItemsList.includes(d.value));
       }
-      return r || a.selectedItemsList.includes(d.value);
-    }, i = (d) => {
-      if (t(d)) {
-        const r = o(d) ? ne.UNSELECT_CATEGORY : ne.SELECT_CATEGORY;
-        e(r, d);
+      return r || a.selectedItemsList.includes(u.value);
+    }, i = (u) => {
+      if (t(u)) {
+        const r = o(u) ? ie.UNSELECT_CATEGORY : ie.SELECT_CATEGORY;
+        e(r, u);
       } else
-        l(d);
+        l(u);
     };
     return {
       // Values
@@ -993,14 +1003,14 @@ const El = V({
       shouldShowDescription: s,
       toggleCheckboxSelection: l,
       toggleSearchOption: i,
-      computedTabindex: (d) => a.itemsIndex[d] === a.focusedIndex ? 0 : -1,
+      computedTabindex: (u) => a.itemsIndex[u] === a.focusedIndex ? 0 : -1,
       // Enums
-      BentoListboxEvent: u,
-      ListboxMultiSelectOptionsEvent: ne
+      BentoListboxEvent: p,
+      ListboxMultiSelectOptionsEvent: ie
     };
   }
 });
-var wl = function() {
+var Tl = function() {
   var e = this, l = e._self._c;
   return e._self._setupProxy, l("div", e._l(e.items, function(t) {
     return l("div", { key: `selected-${t.value}` }, [e.searching && e.isMultiLevel ? [l("bento-listbox-option", { staticClass: "b-listbox-multi-select-options", class: e.conditionalClasses, attrs: { disabled: e.isOptionDisabled ? e.isOptionDisabled(t) : null, tabindex: e.computedTabindex(t.value), "aria-selected": `${e.isOptionSelected(t)}`, "aria-checked": `${e.isOptionSelected(t)}`, "aria-disabled": e.isOptionDisabled ? e.isOptionDisabled(t) : null, role: e.$attrs.role || "option" }, on: { click: function(s) {
@@ -1027,21 +1037,21 @@ var wl = function() {
       return [l("span", { staticClass: "b-listbox-multi-select__option-text" }, [l("bento-typography", { attrs: { el: "span" } }, [e._v(e._s(t.label))]), e.shouldShowDescription(t) ? l("bento-typography", { staticClass: "b-listbox-multi-select__option-description", attrs: { el: "span" } }, [e._v(" " + e._s(t.description) + " ")]) : e._e()], 1)];
     }, null, t)], 2)]], 2);
   }), 0);
-}, Tl = [], Al = /* @__PURE__ */ W(
-  El,
+}, Al = [], Dl = /* @__PURE__ */ q(
   wl,
   Tl,
+  Al,
   !1,
   null,
   "1cf47b26"
 );
-const kl = Al.exports, ot = (a) => {
+const kl = Dl.exports, nt = (a) => {
   const e = n(() => !!a.value?.find(({ items: t }) => !!t)), l = n(() => e.value ? a.value?.reduce((t, s) => (s.items ? t.push(...s.items.flat()) : t.push(s), t), []) : a.value);
   return {
     isMultiLevelSelect: e,
     flattenedItemsList: l
   };
-}, Dl = {
+}, Bl = {
   "de-DE": { allSelected: "Alle ausgewählt ({total})", numberOfTotalSelected: "{number} von {total} ausgewählt", numbersSelected: "{number} ausgewählt", selectAll: "Alle auswählen ({total})" },
   "en-GB": { allSelected: "All selected ({total})", numberOfTotalSelected: "{number} of {total} selected", numbersSelected: "{number} selected", selectAll: "Select all ({total})" },
   "en-US": { allSelected: "All selected ({total})", numberOfTotalSelected: "{number} of {total} selected", numbersSelected: "{number} selected", selectAll: "Select all ({total})" },
@@ -1053,8 +1063,8 @@ const kl = Al.exports, ot = (a) => {
   "ja-JP": { allSelected: "すべて選択 ({total})", numberOfTotalSelected: "{total}件中{number}件を選択済み", 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}）个" }
-}, Bl = { i18n: { messages: Dl } }, Rl = /* @__PURE__ */ V({
-  ...Bl,
+}, Rl = { i18n: { messages: Bl } }, Ml = /* @__PURE__ */ W({
+  ...Rl,
   __name: "listbox-multi-select",
   props: {
     hasMoreItems: { type: Boolean, default: !1 },
@@ -1067,157 +1077,155 @@ const kl = Al.exports, ot = (a) => {
   },
   emits: ["select"],
   setup(a, { expose: e, emit: l }) {
-    const t = a, { t: s, n: o } = de(), i = Se(), f = ze(), v = n(
+    const t = a, { t: s, n: o } = fe(), i = xe(), v = Ge(), b = n(
       () => ({
-        "aria-label": f["aria-label"]?.toString(),
-        "aria-busy": f["aria-busy"]?.toString(),
-        "aria-atomic": f["aria-atomic"]?.toString(),
-        "aria-live": f["aria-live"]?.toString(),
+        "aria-label": v["aria-label"]?.toString(),
+        "aria-busy": v["aria-busy"]?.toString(),
         "aria-multiselectable": !0
       })
-    ), d = x(null), r = x(null), m = x(null), b = x(null), c = n(() => t.selectedValues.map(({ value: p }) => p)), { isMultiLevelSelect: y, flattenedItemsList: I } = ot(H(t, "items")), T = n(() => t.items.some((p) => p.items && p.lazyLoad)), F = n(() => y.value ? t.items.reduce((p, h) => (h.items ? h.lazyLoad ? p.push(h) : p.push(...h.items) : p.push(h), p), []) : t.items), S = n(() => y.value && !t.staticCategories), A = n(() => S.value ? "tree" : "listbox"), _ = n(() => S.value ? "treeitem" : "option"), E = (p) => {
-      const h = t.isOptionDisabled(p), k = c.value?.includes(p.value) || !1;
-      return { isDisabled: h, isPreSelected: k };
-    }, O = n(() => {
-      if (t.searching && y)
+    ), u = y(null), r = y(null), m = y(null), d = y(null), c = n(() => t.selectedValues.map(({ value: f }) => f)), { isMultiLevelSelect: _, flattenedItemsList: R } = nt(J(t, "items")), L = n(() => t.items.some((f) => f.items && f.lazyLoad)), O = n(() => _.value ? t.items.reduce((f, h) => (h.items ? h.lazyLoad ? f.push(h) : f.push(...h.items) : f.push(h), f), []) : t.items), S = n(() => _.value && !t.staticCategories), B = n(() => S.value ? "tree" : "listbox"), g = n(() => S.value ? "treeitem" : "option"), A = (f) => {
+      const h = t.isOptionDisabled(f), D = c.value?.includes(f.value) || !1;
+      return { isDisabled: h, isPreSelected: D };
+    }, k = n(() => {
+      if (t.searching && _)
         return t.items;
-      const p = F.value.filter((h) => {
+      const f = O.value.filter((h) => {
         if (h.lazyLoad)
           return !0;
-        const { isDisabled: k, isPreSelected: P } = E(h);
-        return k && P || !k;
+        const { isDisabled: D, isPreSelected: F } = A(h);
+        return D && F || !D;
       });
       return t.selectedValues.forEach((h) => {
-        p.find((k) => k.value === h.value) || p.push(h);
-      }), p;
-    }), w = n(
-      () => O.value?.filter((p) => c.value?.includes(p.value))
-    ), $ = () => y.value && !t.searching ? I.value.length : t.items.length, J = n(() => {
-      const p = O.value.length, h = $(), k = w.value?.length || 0;
-      return k === 0 ? s("selectAll", { total: o(p) }) : k === h ? s("allSelected", { total: o(h) }) : k <= h ? s("numberOfTotalSelected", { number: o(k), total: o(h) }) : s("numbersSelected", { number: o(k) });
-    }), z = (p) => {
-      const h = (P) => {
-        const { isDisabled: G, isPreSelected: j } = E(P);
-        return G && j || !G;
-      }, k = p.filter(h).filter((P) => !c.value.includes(P.value));
-      l("select", [...t.selectedValues, ...k]);
-    }, L = (p) => {
+        f.find((D) => D.value === h.value) || f.push(h);
+      }), f;
+    }), $ = n(
+      () => k.value?.filter((f) => c.value?.includes(f.value))
+    ), E = () => _.value && !t.searching ? R.value.length : t.items.length, Y = n(() => {
+      const f = k.value.length, h = E(), D = $.value?.length || 0;
+      return D === 0 ? s("selectAll", { total: o(f) }) : D === h ? s("allSelected", { total: o(h) }) : D <= h ? s("numberOfTotalSelected", { number: o(D), total: o(h) }) : s("numbersSelected", { number: o(D) });
+    }), V = (f) => {
+      const h = (F) => {
+        const { isDisabled: G, isPreSelected: Z } = A(F);
+        return G && Z || !G;
+      }, D = f.filter(h).filter((F) => !c.value.includes(F.value));
+      l("select", [...t.selectedValues, ...D]);
+    }, C = (f) => {
       const h = (G) => {
-        const { isDisabled: j, isPreSelected: R } = E(G);
-        return !(j && R);
-      }, k = p.filter(h).map(({ value: G }) => G), P = t.selectedValues.filter((G) => !k?.includes(G.value));
-      l("select", P);
-    }, C = () => {
-      z(I.value);
-    }, N = () => {
-      L(I.value);
-    }, { isAllSelected: D, isIndeterminate: K, toggleSelectAll: Y } = et(
-      w,
-      O,
-      C,
-      N
-    ), X = n(() => K.value ? "mixed" : `${D.value}`), g = x(D.value), ee = () => {
-      g.value = !g.value, Y(g.value);
+        const { isDisabled: Z, isPreSelected: M } = A(G);
+        return !(Z && M);
+      }, D = f.filter(h).map(({ value: G }) => G), F = t.selectedValues.filter((G) => !D?.includes(G.value));
+      l("select", F);
+    }, z = () => {
+      V(R.value);
+    }, w = () => {
+      C(R.value);
+    }, { isAllSelected: x, isIndeterminate: P, toggleSelectAll: se } = tt(
+      $,
+      k,
+      z,
+      w
+    ), ee = n(() => P.value ? "mixed" : `${x.value}`), X = y(x.value), I = () => {
+      X.value = !X.value, se(X.value);
     };
-    Q(D, () => {
-      g.value = D.value;
+    Q(x, () => {
+      X.value = x.value;
     });
-    const ve = (p) => {
-      if (p.lazyLoad) {
-        const h = (p.items ?? []).map(({ value: P }) => P), k = t.selectedValues.filter(({ value: P }) => !h.includes(P));
-        l("select", [...k, p]);
+    const te = (f) => {
+      if (f.lazyLoad) {
+        const h = (f.items ?? []).map(({ value: F }) => F), D = t.selectedValues.filter(({ value: F }) => !h.includes(F));
+        l("select", [...D, f]);
       } else
-        z(p.items);
-    }, B = (p) => {
-      p.lazyLoad ? l(
+        V(f.items);
+    }, be = (f) => {
+      f.lazyLoad ? l(
         "select",
-        t.selectedValues.filter(({ value: h }) => h !== p.value)
-      ) : L(p.items);
-    }, oe = (p, h) => {
-      let k = !1, P = t.selectedValues.filter(({ value: j }) => h.value === j ? (k = !0, !1) : !0);
-      if (k) {
-        l(p, P);
+        t.selectedValues.filter(({ value: h }) => h !== f.value)
+      ) : C(f.items);
+    }, ce = (f, h) => {
+      let D = !1, F = t.selectedValues.filter(({ value: Z }) => h.value === Z ? (D = !0, !1) : !0);
+      if (D) {
+        l(f, F);
         return;
       }
       const G = t.items.find(
-        (j) => j.items?.some((R) => R.value === h.value) && j.lazyLoad && c.value.includes(j.value)
+        (Z) => Z.items?.some((M) => M.value === h.value) && Z.lazyLoad && c.value.includes(Z.value)
       );
       if (G) {
-        P = P.filter(({ value: R }) => R !== G.value);
-        const j = G.items.filter(
-          (R) => R.value !== h.value
+        F = F.filter(({ value: M }) => M !== G.value);
+        const Z = G.items.filter(
+          (M) => M.value !== h.value
         );
-        P.push(...j);
+        F.push(...Z);
       } else
-        P.push(h);
-      l(p, P);
-    }, me = n(() => {
-      if (!y.value)
+        F.push(h);
+      l(f, F);
+    }, ue = n(() => {
+      if (!_.value)
         return t.selectedValues;
-      const p = (R) => c.value.includes(R.value), h = (R) => R.lazyLoad && p(R) ? !0 : !t.staticCategories && R.items.length > 0 && R.items.every((pe) => p(pe)), k = t.items.flatMap(
-        (R) => R.items && !h(R) ? R.items : R
-      ), P = k.filter((R) => R.items ? !0 : p(R)), G = /* @__PURE__ */ new Set();
-      k.forEach((R) => {
-        G.add(R.value), R.items?.forEach((pe) => G.add(pe.value));
+      const f = (M) => c.value.includes(M.value), h = (M) => M.lazyLoad && f(M) ? !0 : !t.staticCategories && M.items.length > 0 && M.items.every((Le) => f(Le)), D = t.items.flatMap(
+        (M) => M.items && !h(M) ? M.items : M
+      ), F = D.filter((M) => M.items ? !0 : f(M)), G = /* @__PURE__ */ new Set();
+      D.forEach((M) => {
+        G.add(M.value), M.items?.forEach((Le) => G.add(Le.value));
       });
-      const j = t.selectedValues.filter((R) => !G.has(R.value));
-      return [...P, ...j];
-    }), we = n(() => {
-      if (!me.value?.length)
+      const Z = t.selectedValues.filter((M) => !G.has(M.value));
+      return [...F, ...Z];
+    }), ye = n(() => {
+      if (!ue.value?.length)
         return !1;
-      const p = ["automatic", "button"].includes(t.lazyLoadType), h = t.selectedValues?.length > 0 && w.value?.length !== O.value?.length;
-      return p && t.hasMoreItems ? !!t.selectedValues?.length : h;
-    }), xe = n(() => T.value ? !1 : ["automatic", "button"].includes(t.lazyLoadType) ? !t.hasMoreItems : !0), re = x([]), { visibleDomOptions: te, updateVisibleDomOptions: _e } = Ue(
-      d,
-      H(t, "items"),
-      _
-    ), Pe = (p) => {
-      re.value.includes(p) ? re.value = re.value.filter((h) => h !== p) : re.value.push(p), Z(() => {
-        _e();
+      const f = ["automatic", "button"].includes(t.lazyLoadType), h = t.selectedValues?.length > 0 && $.value?.length !== k.value?.length;
+      return f && t.hasMoreItems ? !!t.selectedValues?.length : h;
+    }), de = n(() => L.value ? !1 : ["automatic", "button"].includes(t.lazyLoadType) ? !t.hasMoreItems : !0), T = y([]), { visibleDomOptions: H, updateVisibleDomOptions: ge } = We(
+      u,
+      J(t, "items"),
+      g
+    ), Fe = (f) => {
+      T.value.includes(f) ? T.value = T.value.filter((h) => h !== f) : T.value.push(f), j(() => {
+        ge();
       });
-    }, Ce = (p) => {
-      te.value[p]?.focus();
+    }, Ce = (f) => {
+      H.value[f]?.focus();
     }, {
       moveToNextElement: Ie,
-      moveToPreviousElement: Te,
-      moveToFirstElement: Ae,
-      moveToLastElement: ye,
-      preventDefault: ge,
-      focusedIndex: Oe,
-      setListboxFocusedIndex: Le
-    } = tt(
+      moveToPreviousElement: Ee,
+      moveToFirstElement: we,
+      moveToLastElement: Te,
+      preventDefault: ve,
+      focusedIndex: Ae,
+      setListboxFocusedIndex: he
+    } = lt(
       {
-        items: te
+        items: H
       },
       Ce
-    ), he = {
-      [U.ARROW_UP]: (p) => Te(p),
-      [U.ARROW_DOWN]: (p) => Ie(p),
-      [U.HOME]: Ae,
-      [U.END]: ye
+    ), De = {
+      [K.ARROW_UP]: (f) => Ee(f),
+      [K.ARROW_DOWN]: (f) => Ie(f),
+      [K.HOME]: we,
+      [K.END]: Te
     };
     e({
       /**
        * Method to set the index of the item to be focused on
        * Used for focus management to be kept in-sync with parent e.g. dropdowns
        */
-      setListboxFocusedIndex: Le
+      setListboxFocusedIndex: he
     });
-    const ke = {
-      [U.ARROW_UP]: ge,
-      [U.ARROW_DOWN]: ge
-    }, De = n(() => {
-      let p = xe.value ? 1 : 0;
+    const Se = {
+      [K.ARROW_UP]: ve,
+      [K.ARROW_DOWN]: ve
+    }, ke = n(() => {
+      let f = de.value ? 1 : 0;
       const h = {};
-      return t.items.forEach((k) => {
-        let P = re.value.includes(k.value);
-        k.items ? (t.staticCategories ? P = !0 : h[k.value] = p++, P && k.items.forEach((G) => h[G.value] = p++)) : h[k.value] = p++;
+      return t.items.forEach((D) => {
+        let F = T.value.includes(D.value);
+        D.items ? (t.staticCategories ? F = !0 : h[D.value] = f++, F && D.items.forEach((G) => h[G.value] = f++)) : h[D.value] = f++;
       }), h;
     });
-    return { __sfc: !0, props: t, emit: l, t: s, n: o, slots: i, attrs: f, ariaAttributes: v, listboxRef: d, selectAllListboxItemsRef: r, selectedListboxItemsRef: m, listboxItemsRef: b, selectedItemsList: c, isMultiLevelSelect: y, flattenedItemsList: I, hasLazyLoadCategory: T, lazyLoadAwareFlattenedItems: F, isTreePattern: S, computedRole: A, computedOptionRole: _, optionStates: E, enabledItems: O, visibleSelectedList: w, calculateTotalItems: $, selectAllCheckboxText: J, selectAll: z, unselectAll: L, selectAllItems: C, unselectAllItems: N, isAllSelected: D, isIndeterminate: K, toggleSelectAll: Y, ariaCheckedComputed: X, isSelectAllOn: g, handleSelectAll: ee, selectAllCategory: ve, unselectAllCategory: B, toggleCheckboxSelection: oe, selectedOptions: me, showSelectedItems: we, showSelectAllCheckbox: xe, expandedCategories: re, visibleDomOptions: te, updateVisibleDomOptions: _e, toggleCategoryVisibility: Pe, focusItem: Ce, moveToNextElement: Ie, moveToPreviousElement: Te, moveToFirstElement: Ae, moveToLastElement: ye, preventDefault: ge, focusedIndex: Oe, setListboxFocusedIndex: Le, listboxListeners: he, chipsSectionListeners: ke, computedItemsIndex: De, DecorativeCheckbox: We, BentoTypography: ue, BentoChip: ht, BentoListboxOption: $e, ListboxMultiSelectOptions: kl, vBentoKeyboardNavigationDirective: Ne, BentoListboxEvent: u };
+    return { __sfc: !0, props: t, emit: l, t: s, n: o, slots: i, attrs: v, ariaAttributes: b, listboxRef: u, selectAllListboxItemsRef: r, selectedListboxItemsRef: m, listboxItemsRef: d, selectedItemsList: c, isMultiLevelSelect: _, flattenedItemsList: R, hasLazyLoadCategory: L, lazyLoadAwareFlattenedItems: O, isTreePattern: S, computedRole: B, computedOptionRole: g, optionStates: A, enabledItems: k, visibleSelectedList: $, calculateTotalItems: E, selectAllCheckboxText: Y, selectAll: V, unselectAll: C, selectAllItems: z, unselectAllItems: w, isAllSelected: x, isIndeterminate: P, toggleSelectAll: se, ariaCheckedComputed: ee, isSelectAllOn: X, handleSelectAll: I, selectAllCategory: te, unselectAllCategory: be, toggleCheckboxSelection: ce, selectedOptions: ue, showSelectedItems: ye, showSelectAllCheckbox: de, expandedCategories: T, visibleDomOptions: H, updateVisibleDomOptions: ge, toggleCategoryVisibility: Fe, focusItem: Ce, moveToNextElement: Ie, moveToPreviousElement: Ee, moveToFirstElement: we, moveToLastElement: Te, preventDefault: ve, focusedIndex: Ae, setListboxFocusedIndex: he, listboxListeners: De, chipsSectionListeners: Se, computedItemsIndex: ke, DecorativeCheckbox: Ke, BentoTypography: pe, BentoChip: St, BentoListboxOption: Pe, ListboxMultiSelectOptions: kl, vBentoKeyboardNavigationDirective: $e, BentoListboxEvent: p };
   }
 });
-var Ml = function() {
+var Nl = function() {
   var e = this, l = e._self._c, t = e._self._setupProxy;
   return l("div", { ref: "listboxRef", staticClass: "b-listbox-multi-select" }, [t.showSelectedItems ? l("div", [l("ul", e._g({ directives: [{ name: "bento-keyboard-navigation-directive", rawName: "v-bento-keyboard-navigation-directive" }], staticClass: "b-listbox-multi-select__chips" }, t.chipsSectionListeners), e._l(t.selectedOptions, function(s) {
     return l("li", { key: s.value }, [l(t.BentoChip, { ref: "selectedListboxItemsRef", refInFor: !0, attrs: { disabled: e.isOptionDisabled(s), label: s.label, condensed: "" }, on: { click: function(o) {
@@ -1238,30 +1246,30 @@ var Ml = function() {
       return [e._t(o, null, null, i)];
     } };
   })], null, !0) })], 1)]);
-}, Nl = [], $l = /* @__PURE__ */ W(
-  Rl,
+}, $l = [], Pl = /* @__PURE__ */ q(
   Ml,
   Nl,
+  $l,
   !1,
   null,
-  "78b94290"
+  "09ffd30d"
 );
-const je = $l.exports, nt = (a, e = 300) => {
+const He = Pl.exports, it = (a, e = 300) => {
   let l;
   return (...s) => {
     l && clearTimeout(l), l = setTimeout(() => a(...s), e);
   };
-}, Pl = 36, Fl = V({
+}, Fl = 36, zl = W({
   name: "bento-listbox",
   components: {
-    BentoEmptyState: Qe,
-    BentoListboxSingleSelect: Xt,
-    BentoListboxMultiSelect: je,
-    BentoTypography: ue,
-    BentoLoadingIndicator: Ze,
-    BentoListboxLazyLoad: st
+    BentoEmptyState: et,
+    BentoListboxSingleSelect: Zt,
+    BentoListboxMultiSelect: He,
+    BentoTypography: pe,
+    BentoLoadingIndicator: Qe,
+    BentoListboxLazyLoad: ot
   },
-  directives: { BentoKeyboardNavigationDirective: Ne },
+  directives: { BentoKeyboardNavigationDirective: $e },
   props: {
     /**
      * Defines a string value that labels an interactive element.
@@ -1321,8 +1329,8 @@ const je = $l.exports, nt = (a, e = 300) => {
      */
     lazyLoadType: {
       type: String,
-      default: ie.NONE,
-      validator: (a) => Object.values(ie).includes(a)
+      default: ne.NONE,
+      validator: (a) => Object.values(ne).includes(a)
     },
     /**
      * Indicates the listbox is loading filtered items.
@@ -1346,7 +1354,7 @@ const je = $l.exports, nt = (a, e = 300) => {
      *
      * If enabled, hides the "Select all" checkbox in "multiple" mode.
      */
-    searching: je.props.searching,
+    searching: He.props.searching,
     /**
      * The `input` value.
      * Providing an empty string or empty array will select no options.
@@ -1366,97 +1374,91 @@ const je = $l.exports, nt = (a, e = 300) => {
     }
   },
   emits: [
-    u.SELECT,
-    u.SPACE,
-    u.SHOW_MORE,
-    u.ENTER,
-    u.ESCAPE,
-    u.TAB
+    p.SELECT,
+    p.SPACE,
+    p.SHOW_MORE,
+    p.ENTER,
+    p.ESCAPE,
+    p.TAB
   ],
   setup(a, { emit: e, slots: l, expose: t }) {
-    const s = x([]), o = H(a, "items"), i = n(() => a.lazyLoadType !== ie.AUTOMATIC), f = n(() => a.lazyLoadType === ie.AUTOMATIC), v = () => typeof a?.virtualScroll == "object" && a?.virtualScroll?.itemHeight ? a.virtualScroll.itemHeight : Pl, d = !a?.multiple && a?.virtualScroll !== !1 && a?.lazyLoadType === "none", {
+    const s = y([]), o = J(a, "items"), i = n(() => a.lazyLoadType !== ne.AUTOMATIC), v = n(() => a.lazyLoadType === ne.AUTOMATIC), b = () => typeof a?.virtualScroll == "object" && a?.virtualScroll?.itemHeight ? a.virtualScroll.itemHeight : Fl, u = !a?.multiple && a?.virtualScroll !== !1 && a?.lazyLoadType === "none", {
       containerRef: r,
       containerProps: m,
-      onScroll: b,
+      onScroll: d,
       list: c,
-      wrapperProps: y,
-      scrollToIndex: I,
-      startIndex: T
-    } = Et(o, {
-      itemHeight: v(),
+      wrapperProps: _,
+      scrollToIndex: R,
+      startIndex: L
+    } = wt(o, {
+      itemHeight: b(),
       // Disable virtual scrolling if not enabled or if lazy loading is enabled or if multi-select
-      disabled: !d
-    }), F = n(() => d ? o.value.length : 0), S = n(
-      () => a.componentLoading !== void 0 || i.value ? "true" : void 0
-    ), A = n(
+      disabled: !u
+    }), O = n(() => u ? o.value.length : 0), S = n(
       () => i.value && a.loading || a.componentLoading ? "true" : "false"
-    ), _ = n(
-      () => i.value || a.componentLoading !== void 0 ? "polite" : void 0
-    ), E = n(
+    ), B = n(
       () => ({
         "aria-label": a.ariaLabel,
-        "aria-busy": A.value,
-        "aria-atomic": S.value,
-        "aria-live": _.value
+        "aria-busy": S.value
       })
-    ), O = n(
+    ), g = n(
       () => a.componentLoading ? {
-        ...E.value,
+        ...B.value,
         role: "alert"
       } : {}
-    ), w = (Y) => (X) => {
-      e(Y, X);
-    }, $ = () => {
-      e(u.SHOW_MORE);
-    }, J = nt(() => {
-      const Y = r.value;
-      if (!Y)
+    ), A = (x) => (P) => {
+      e(x, P);
+    }, k = () => {
+      e(p.SHOW_MORE);
+    }, $ = it(() => {
+      const x = r.value;
+      if (!x)
         return;
-      const X = Math.round(Y.scrollTop) + Y.clientHeight >= Y.scrollHeight;
-      a.hasMoreItems && X && !a.loading && $();
-    }), z = () => {
-      f.value ? J() : b();
-    }, L = n(() => a.items?.length === 0), C = n(
-      () => a.lazyLoadType === ie.BUTTON && a.hasMoreItems
-    ), N = n(
-      () => a.loading ? Re.LOADING : Re.START
-    ), D = n(() => ({
+      const P = Math.round(x.scrollTop) + x.clientHeight >= x.scrollHeight;
+      a.hasMoreItems && P && !a.loading && k();
+    }), E = () => {
+      v.value ? $() : d();
+    }, Y = n(() => a.items?.length === 0), V = n(
+      () => a.lazyLoadType === ne.BUTTON && a.hasMoreItems
+    ), C = n(
+      () => a.loading ? Me.LOADING : Me.START
+    ), z = n(() => ({
       ...a.emptyState,
       variant: "condensed"
-    })), K = {
-      [u.SELECT]: w(u.SELECT),
-      [u.SPACE]: w(u.SPACE),
-      [u.TAB]: w(u.TAB),
-      [u.ENTER]: w(u.ENTER)
+    })), w = {
+      [p.SELECT]: A(p.SELECT),
+      [p.SPACE]: A(p.SPACE),
+      [p.TAB]: A(p.TAB),
+      [p.ENTER]: A(p.ENTER)
     };
     return t({ listboxRef: r, listboxItemRef: s }), {
       // Refs
       listboxRef: r,
       listboxItemRef: s,
       // a11y
-      ariaAttributes: E,
-      listboxContainerAttributes: O,
+      ariaAttributes: B,
+      listboxContainerAttributes: g,
       // Values
       containerProps: m,
-      isSearchResultEmpty: L,
-      limitedEmptyStateProps: D,
-      loadingButtonState: N,
+      isSearchResultEmpty: Y,
+      limitedEmptyStateProps: z,
+      loadingButtonState: C,
       slots: l,
-      shouldDisplayShowMoreButton: C,
+      shouldDisplayShowMoreButton: V,
       virtualisedItems: c,
-      wrapperProps: y,
+      wrapperProps: _,
       // Virtual scroll
-      totalItemCount: F,
-      scrollToIndex: I,
-      virtualScrollStartIndex: T,
+      totalItemCount: O,
+      scrollToIndex: R,
+      virtualScrollStartIndex: L,
       // Enums
-      BentoKeyboardNavigationKeyDownEvent: U,
-      BentoListboxEvent: u,
+      BentoKeyboardNavigationKeyDownEvent: K,
+      BentoListboxEvent: p,
       // Methods
-      onListboxContainerScroll: z,
-      onOptionSelected: w,
-      emitShowMore: $,
-      listboxListeners: K
+      onListboxContainerScroll: E,
+      onOptionSelected: A,
+      emitShowMore: k,
+      listboxListeners: w
     };
   }
 });
@@ -1471,15 +1473,15 @@ var Vl = function() {
       return [e._t(s, null, null, o)];
     } };
   })], null, !0) }, "bento-listbox-single-select", e.ariaAttributes, !1), e.listboxListeners))], e.lazyLoadType !== "none" ? l("bento-listbox-lazy-load", { attrs: { "has-more-items": e.hasMoreItems, loading: e.loading, type: e.lazyLoadType }, on: { "show-more": e.emitShowMore } }) : e._e()]], 2)]);
-}, zl = [], Gl = /* @__PURE__ */ W(
-  Fl,
-  Vl,
+}, Gl = [], Ul = /* @__PURE__ */ q(
   zl,
+  Vl,
+  Gl,
   !1,
   null,
-  "74907ba1"
+  "023e82d8"
 );
-const Fe = Gl.exports, Ve = (a, e) => {
+const ze = Ul.exports, Ve = (a, e) => {
   for (const l of a) {
     if (l.value === e)
       return l;
@@ -1490,39 +1492,39 @@ const Fe = Gl.exports, Ve = (a, e) => {
     }
   }
   return null;
-}, Ul = (a) => typeof a == "object" && a !== null && "value" in a && "label" in a, Wl = (a, e, l, t) => {
-  const s = x([]), o = x(), i = (r) => {
+}, Wl = (a) => typeof a == "object" && a !== null && "value" in a && "label" in a, Kl = (a, e, l, t) => {
+  const s = y([]), o = y(), i = (r) => {
     l.value ? o.value = r.map(({ value: m }) => m) : o.value = r.length > 0 ? r[0].value : null;
-  }, f = (r) => {
-    l.value ? o.value = r.map(({ value: m, label: b }) => ({ value: m, label: b })) : o.value = r.length > 0 ? { value: r[0].value, label: r[0].label } : null;
   }, v = (r) => {
-    s.value = r, t?.value ? f(r) : i(r);
-  }, d = () => {
+    l.value ? o.value = r.map(({ value: m, label: d }) => ({ value: m, label: d })) : o.value = r.length > 0 ? { value: r[0].value, label: r[0].label } : null;
+  }, b = (r) => {
+    s.value = r, t?.value ? v(r) : i(r);
+  }, u = () => {
     s.value = [], o.value = null;
   };
   return Q(
     () => e.value,
     () => {
       if (!e.value && e.value !== 0) {
-        d();
+        u();
         return;
       }
       const r = !Array.isArray(e.value), m = [...s.value];
-      d();
-      const b = (c) => {
-        if (Ul(c))
+      u();
+      const d = (c) => {
+        if (Wl(c))
           s.value.push(c);
         else {
-          let y = Ve(a.value, c);
-          y || (y = Ve(m, c)), y || (y = { value: c, label: c.toString() }), s.value.push(y);
+          let _ = Ve(a.value, c);
+          _ || (_ = Ve(m, c)), _ || (_ = { value: c, label: c.toString() }), s.value.push(_);
         }
       };
       if (r) {
         const c = e.value;
-        b(c), t?.value ? f(s.value) : i(s.value);
+        d(c), t?.value ? v(s.value) : i(s.value);
         return;
       }
-      e.value.forEach(b), t?.value ? f(s.value) : i(s.value);
+      e.value.forEach(d), t?.value ? v(s.value) : i(s.value);
     },
     { immediate: !0 }
   ), {
@@ -1530,12 +1532,12 @@ const Fe = Gl.exports, Ve = (a, e) => {
     cachedSelectedListboxOptions: s,
     cachedListboxSelectedValues: o,
     // Methods
-    resetCache: d,
-    setCachedValues: v
+    resetCache: u,
+    setCachedValues: b
   };
 };
-var Ee = /* @__PURE__ */ ((a) => (a.DEFAULT = "DropdownInputDefault", a.SMALL = "DropdownInputSmall", a))(Ee || {});
-const Kl = {
+var Oe = /* @__PURE__ */ ((a) => (a.DEFAULT = "DropdownInputDefault", a.SMALL = "DropdownInputSmall", a))(Oe || {});
+const ql = {
   "de-DE": { apply: "Anwenden", cancel: "Abbrechen", noOptionsMatchThisSearch: "Für diese Suche wurden keine Ergebnisse gefunden." },
   "en-GB": { apply: "Apply", cancel: "Cancel", noOptionsMatchThisSearch: "No options match this search" },
   "en-US": { apply: "Apply", cancel: "Cancel", noOptionsMatchThisSearch: "No options match this search" },
@@ -1547,62 +1549,62 @@ const Kl = {
   "ja-JP": { apply: "適用", cancel: "キャンセル", noOptionsMatchThisSearch: "この検索に一致するオプションはありません" },
   "pt-BR": { apply: "Aplicar", cancel: "Cancelar", noOptionsMatchThisSearch: "Nenhuma opção corresponde a esta busca" },
   "zh-CN": { apply: "应用", cancel: "取消", noOptionsMatchThisSearch: "没有符合此搜索条件的选项" }
-}, ql = (a, e, l, t) => {
-  const s = x(a.value), { t: o } = de();
+}, Yl = (a, e, l, t) => {
+  const s = y(a.value), { t: o } = fe();
   Q(a, () => {
     s.value = a.value;
   });
   const i = n(
     () => JSON.stringify(s.value) === JSON.stringify(a.value)
-  ), f = () => {
-    t(u.SELECT, s.value), t(u.CLOSE_DROPDOWN);
-  }, v = () => {
-    s.value = a.value, t(u.CLOSE_DROPDOWN);
-  }, d = () => {
+  ), v = () => {
+    t(p.SELECT, s.value), t(p.CLOSE_DROPDOWN);
+  }, b = () => {
+    s.value = a.value, t(p.CLOSE_DROPDOWN);
+  }, u = () => {
     l.value && e.value && (s.value = a.value);
   }, r = n(() => [
     {
       title: o("apply"),
-      event: f,
+      event: v,
       disabled: i.value
     },
     {
       title: o("cancel"),
-      event: v
+      event: b
     }
   ]), m = (S) => {
-    s.value = S, e.value || t(u.SELECT, S);
-  }, b = (S) => {
-    m(S), t(u.TAB);
+    s.value = S, e.value || t(p.SELECT, S);
+  }, d = (S) => {
+    m(S), t(p.TAB);
   }, c = (S) => {
-    m(S), t(u.ENTER);
-  }, y = (S) => {
-    m(S), t(u.SPACE);
-  }, I = () => {
-    v(), t(u.ESCAPE);
-  }, T = () => {
-    t(u.SHOW_MORE);
-  }, F = {
-    [u.SELECT]: m,
-    [u.SHOW_MORE]: T,
-    [u.TAB]: b,
-    [u.SPACE]: y,
-    [u.ENTER]: c
+    m(S), t(p.ENTER);
+  }, _ = (S) => {
+    m(S), t(p.SPACE);
+  }, R = () => {
+    b(), t(p.ESCAPE);
+  }, L = () => {
+    t(p.SHOW_MORE);
+  }, O = {
+    [p.SELECT]: m,
+    [p.SHOW_MORE]: L,
+    [p.TAB]: d,
+    [p.SPACE]: _,
+    [p.ENTER]: c
   };
   return {
     // Values
     actions: r,
     internalSelectedValue: s,
     // Methods
-    listeners: F,
-    onEscapeKey: I,
-    onOutsideDropdownClick: d
+    listeners: O,
+    onEscapeKey: R,
+    onOutsideDropdownClick: u
   };
-}, Yl = V({
-  i18n: { messages: Kl },
+}, jl = W({
+  i18n: { messages: ql },
   name: "bento-dropdown-options-container"
-}), jl = /* @__PURE__ */ V({
-  ...Yl,
+}), Hl = /* @__PURE__ */ W({
+  ...jl,
   props: {
     /**
      * Defines a string value that labels an interactive element.
@@ -1665,8 +1667,8 @@ const Kl = {
      */
     lazyLoadType: {
       type: String,
-      default: ie.AUTOMATIC,
-      validator: (a) => Object.values(ie).includes(a)
+      default: ne.AUTOMATIC,
+      validator: (a) => Object.values(ne).includes(a)
     },
     /**
      * Indicates if new options are lazy loading.
@@ -1696,7 +1698,7 @@ const Kl = {
      *
      * If enabled, hides the "Select all" checkbox in "multiple" mode.
      */
-    searching: Fe.props.searching,
+    searching: ze.props.searching,
     /**
      * If enabled, dropdown will display non-selectable, static categories
      */
@@ -1705,7 +1707,7 @@ const Kl = {
      * Reference to the DOM element or Vue component for positioning
      * the Dropdown container.
      */
-    targetElement: { type: Ye.props.targetElement.type, required: !0 },
+    targetElement: { type: je.props.targetElement.type, required: !0 },
     /**
      * Enables virtual scrolling if set to true or by providing an object with itemHeight function.
      * The itemHeight function is used to calculate the height of rendered item given it's index.
@@ -1717,12 +1719,12 @@ const Kl = {
   },
   emits: [],
   setup(a, { expose: e, emit: l }) {
-    const t = a, s = Se(), { selectedValue: o, multiple: i } = pt(t), f = x(null), { t: v } = de(), d = n(() => t.open && !t.disabled), r = n(() => v("noOptionsMatchThisSearch")), m = n(() => ({
+    const t = a, s = xe(), { selectedValue: o, multiple: i } = ft(t), v = y(null), { t: b } = fe(), u = n(() => t.open && !t.disabled), r = n(() => b("noOptionsMatchThisSearch")), m = n(() => ({
       "b-dropdown-options-container--single": !t?.multiple
-    })), b = n(() => ({
+    })), d = n(() => ({
       "b-dropdown-options-container__listbox--single": !t?.multiple
-    })), { actions: c, internalSelectedValue: y, listeners: I, onEscapeKey: T, onOutsideDropdownClick: F } = ql(o, i, d, l), S = n(() => t?.multiple ? xt : Ye), A = n(() => {
-      const _ = {
+    })), { actions: c, internalSelectedValue: _, listeners: R, onEscapeKey: L, onOutsideDropdownClick: O } = Yl(o, i, u, l), S = n(() => t?.multiple ? Ct : je), B = n(() => {
+      const g = {
         "min-width": `${t?.targetElement?.clientWidth}px`,
         "max-width": "min(500px, 95%)"
       };
@@ -1732,12 +1734,12 @@ const Kl = {
         actions: c.value,
         divider: !0,
         fallbackPosition: ["top-start"],
-        id: ce(`dropdown-options-${t.id}`),
+        id: re(`dropdown-options-${t.id}`),
         open: t.open,
         position: "bottom-start",
         style: {
           width: "auto",
-          ..._
+          ...g
         },
         targetElement: t.targetElement
       } : {
@@ -1745,19 +1747,19 @@ const Kl = {
         offset: [0, 8],
         position: "bottom-start",
         style: {
-          display: d.value ? "block" : "none",
-          ..._
+          display: u.value ? "block" : "none",
+          ...g
         },
         targetElement: t.targetElement
       };
     });
     return e({
-      onOutsideDropdownClick: F,
-      dropdownOptionsListboxRef: f
-    }), { __sfc: !0, slots: s, emit: l, props: t, selectedValue: o, multiple: i, dropdownOptionsListboxRef: f, t: v, isDropdownOpen: d, noResultsMessage: r, conditionalClasses: m, conditionalListboxClasses: b, actions: c, internalSelectedValue: y, listeners: I, onEscapeKey: T, onOutsideDropdownClick: F, popperContainerOrPopoverComponent: S, popperContainerOrPopoverProps: A, BentoListbox: Fe };
+      onOutsideDropdownClick: O,
+      dropdownOptionsListboxRef: v
+    }), { __sfc: !0, slots: s, emit: l, props: t, selectedValue: o, multiple: i, dropdownOptionsListboxRef: v, t: b, isDropdownOpen: u, noResultsMessage: r, conditionalClasses: m, conditionalListboxClasses: d, actions: c, internalSelectedValue: _, listeners: R, onEscapeKey: L, onOutsideDropdownClick: O, popperContainerOrPopoverComponent: S, popperContainerOrPopoverProps: B, BentoListbox: ze };
   }
 });
-var Hl = function() {
+var Jl = function() {
   var e = this, l = e._self._c, t = e._self._setupProxy;
   return t.isDropdownOpen ? l(t.popperContainerOrPopoverComponent, e._b({ tag: "component", staticClass: "b-dropdown-options-container", class: t.conditionalClasses }, "component", t.popperContainerOrPopoverProps, !1), [l("div", { on: { keydown: [function(s) {
     s.stopPropagation();
@@ -1768,20 +1770,20 @@ var Hl = function() {
       return [e._t(o, null, null, i)];
     } };
   })], null, !0) }, t.listeners))], 1)]) : e._e();
-}, Jl = [], Xl = /* @__PURE__ */ W(
-  jl,
+}, Xl = [], Zl = /* @__PURE__ */ q(
   Hl,
   Jl,
+  Xl,
   !1,
   null,
   "94ce85b4"
 );
-const Zl = Xl.exports;
-var q = /* @__PURE__ */ ((a) => (a.OPEN = "dropdown-base-open", a.KEYDOWN = "dropdown-base-keydown", a.CLOSE = "dropdown-base-close", a.INPUT = "dropdown-base-input", a.CLEAR = "dropdown-base-clear", a))(q || {}), ae = /* @__PURE__ */ ((a) => (a.DISABLED = "disabled", a.READONLY = "readonly", a.HAS_ITEMS = "has-items", a.OPENED = "opened", a.ERROR = "error", a))(ae || {});
-const Ql = /* @__PURE__ */ Symbol("dropdown small size injection key"), it = /* @__PURE__ */ Symbol("dropdown underline style injection key"), ea = {
+const Ql = Zl.exports;
+var U = /* @__PURE__ */ ((a) => (a.OPEN = "dropdown-base-open", a.KEYDOWN = "dropdown-base-keydown", a.CLOSE = "dropdown-base-close", a.INPUT = "dropdown-base-input", a.CLEAR = "dropdown-base-clear", a.CLEAR_SELECTION = "dropdown-base-clear-selection", a))(U || {}), ae = /* @__PURE__ */ ((a) => (a.DISABLED = "disabled", a.READONLY = "readonly", a.HAS_ITEMS = "has-items", a.OPENED = "opened", a.ERROR = "error", a))(ae || {});
+const ea = /* @__PURE__ */ Symbol("dropdown small size injection key"), rt = /* @__PURE__ */ Symbol("dropdown underline style injection key"), ta = {
   "de-DE": { clearSearch: "Suche löschen" },
   "en-GB": { clearSearch: "Clear search" },
-  "en-US": { clearSearch: "Clear search" },
+  "en-US": { clearSearch: "Clear search", clearSelection: "Clear selection" },
   "es-419": { clearSearch: "Borrar búsqueda" },
   "es-ES": { clearSearch: "Borrar búsqueda" },
   "es-MX": { clearSearch: "Borrar búsqueda" },
@@ -1790,17 +1792,21 @@ const Ql = /* @__PURE__ */ Symbol("dropdown small size injection key"), it = /*
   "ja-JP": { clearSearch: "検索をクリア" },
   "pt-BR": { clearSearch: "Limpar busca" },
   "zh-CN": { clearSearch: "清除搜索" }
-}, ta = V({
-  i18n: { messages: ea },
+}, la = W({
+  i18n: { messages: ta },
   name: "dropdown-base-textbox",
   inheritAttrs: !1
-}), la = /* @__PURE__ */ V({
-  ...ta,
+}), aa = /* @__PURE__ */ W({
+  ...la,
   props: {
     /**
      * The number of additional items that have been selected in the dropdown.
      */
     additionalItemsSelected: { type: [Number, String], default: 0 },
+    /**
+     * Allows the selected value to be cleared in a single-select dropdown.
+     */
+    clearable: { type: Boolean, default: !1 },
     /**
      * If the combobox DOM element should be an `input` element.
      */
@@ -1889,16 +1895,20 @@ const Ql = /* @__PURE__ */ Symbol("dropdown small size injection key"), it = /*
   },
   emits: [],
   setup(a, { expose: e, emit: l }) {
-    const t = a, { t: s } = de(), o = ze(), i = Se(), f = He(i), v = x(null), d = ce("textbox"), r = x(!1), m = x(t.value), b = Ge(it, !1), c = n(() => ({
+    const t = a, { t: s } = fe(), o = Ge(), i = xe(), v = Je(i), b = y(null), u = y(null), r = re("textbox"), m = y(!1), d = y(t.value), c = Ue(rt, !1), _ = n(() => ({
       [`b-dropdown-base-textbox--${ae.DISABLED}`]: t.disabled,
       [`b-dropdown-base-textbox--${ae.READONLY}`]: t.readonly,
       [`b-dropdown-base-textbox--${ae.HAS_ITEMS}`]: !!t.additionalItemsSelected,
-      "b-dropdown-base-textbox--underline": b
-    })), y = n(
-      () => O.value && o["aria-required"] ? "true" : null
-    ), I = n(() => ({
+      "b-dropdown-base-textbox--underline": c
+    })), R = n(
+      () => V.value && o["aria-required"] ? "true" : null
+    ), L = n(() => ({
       "b-dropdown-base-textbox__input--dynamic-filtering": t.dynamicFiltering
-    })), T = n(() => t.dynamicFiltering && !!t.value && t.open), F = (B) => O.value && !t.multiple && !!t.value && B, S = n(
+    })), O = n(() => t.dynamicFiltering && !!t.value && t.open), S = n(
+      () => t.clearable && t.open && !t.multiple && t.hasSelectedValue
+    ), B = n(
+      () => !t.disabled && !t.readonly && (O.value || S.value)
+    ), g = n(() => O.value ? s("clearSearch") : s("clearSelection")), A = (T) => V.value && !t.multiple && !!t.value && T, k = n(
       () => ({
         "aria-haspopup": "listbox",
         "aria-controls": t.ariaControls,
@@ -1911,63 +1921,75 @@ const Ql = /* @__PURE__ */ Symbol("dropdown small size injection key"), it = /*
         "aria-disabled": t.disabled ? !0 : null,
         "aria-required": o["aria-required"]
       })
-    ), A = n(
+    ), $ = n(
       () => t.multiple ? t.selectedValueItem : []
-    ), _ = n(
-      () => t.dynamicFiltering && !t.multiple && !t.alwaysComboboxIsInput
     ), E = n(
-      () => t.open || t.alwaysComboboxIsInput || _.value && r.value
-    ), O = n(() => t.dynamicFiltering && E.value), w = () => !t.value && t.hasSelectedValue && _.value ? t.displayValue ?? "" : t.value, $ = n(() => !E.value || t.alwaysComboboxIsInput && !t.open ? t.displayValue : _.value ? m.value : t.value), J = n(() => t.selectedValueItem && !t.multiple), z = n(
-      () => t.multiple && t.selectedValueItem && A.value.length > 0 && t.showSlotContentInMultiple
+      () => t.dynamicFiltering && !t.multiple && !t.alwaysComboboxIsInput
+    ), Y = n(
+      () => t.open || t.alwaysComboboxIsInput || E.value && m.value
+    ), V = n(() => t.dynamicFiltering && Y.value), C = () => !t.value && t.hasSelectedValue && E.value ? t.displayValue ?? "" : t.value, z = n(() => !Y.value || t.alwaysComboboxIsInput && !t.open ? t.displayValue : E.value ? d.value : t.value), w = n(() => t.selectedValueItem && !t.multiple), x = n(
+      () => t.multiple && t.selectedValueItem && $.value.length > 0 && t.showSlotContentInMultiple
     );
     Q(
-      () => O.value,
-      (B, oe) => {
-        B ? !oe && _.value && (m.value = w()) : m.value = t.value, B && !t.alwaysComboboxIsInput && Z(() => {
-          v.value?.focus(), v.value?.select();
+      () => V.value,
+      (T, H) => {
+        T ? !H && E.value && (d.value = C()) : d.value = t.value, T && !t.alwaysComboboxIsInput && j(() => {
+          b.value?.focus(), b.value?.select();
         });
       }
     ), Q(
       () => t.value,
-      (B) => {
-        (!_.value || B !== m.value) && (m.value = B);
+      (T) => {
+        (!E.value || T !== d.value) && (d.value = T);
       }
     ), Q(
       () => t.displayValue,
       () => {
-        _.value && t.hasSelectedValue && (m.value = w());
+        E.value && t.hasSelectedValue && (d.value = C());
+      }
+    ), Q(
+      () => t.hasSelectedValue,
+      (T) => {
+        E.value && !T && (d.value = t.value);
       }
     ), Q(
       () => t.open,
-      (B) => {
-        B || (r.value = !1);
+      (T) => {
+        T || (m.value = !1);
       }
     );
-    const L = async () => {
-      !t.disabled && !t.readonly && (l(q.OPEN), await Z(), v.value.focus());
-    }, C = (B) => {
-      t.open && (B && be(B), v.value.focus(), l(q.CLOSE));
-    }, N = (B) => t.open && B.target.tagName === "INPUT" ? null : t.open ? C() : L(), D = (B) => t.dynamicFiltering ? null : N(B), K = () => {
-      l(q.CLEAR), l(q.INPUT, ""), v.value.focus();
-    }, Y = () => {
-      r.value = !0;
-    }, X = () => {
-      r.value = !1;
-    }, g = (B) => {
-      !_.value || t.open || t.readonly || t.disabled || (B.preventDefault(), B.stopPropagation());
-    }, ee = (B) => {
-      !t.readonly && !t.disabled ? (_.value && (m.value = B.target.value), t.dynamicFiltering && !t.open && l(q.OPEN), l(q.INPUT, B.target.value), Z(() => {
-        O.value && v.value?.focus();
-      })) : (B.preventDefault(), B.stopPropagation());
-    }, ve = () => {
-      v.value.focus();
+    const P = async () => {
+      !t.disabled && !t.readonly && (l(U.OPEN), await j(), b.value.focus());
+    }, se = (T) => {
+      t.open && (T && _e(T), b.value.focus(), l(U.CLOSE));
+    }, ee = (T) => t.open && T.target.tagName === "INPUT" ? null : t.open ? se() : P(), X = (T) => t.dynamicFiltering ? null : ee(T), I = () => {
+      l(U.CLEAR), l(U.INPUT, ""), b.value.focus();
+    }, te = () => {
+      if (O.value) {
+        I();
+        return;
+      }
+      l(U.CLEAR_SELECTION);
+    }, be = () => {
+      m.value = !0;
+    }, ce = () => {
+      m.value = !1;
+    }, ue = (T) => {
+      !E.value || t.open || t.readonly || t.disabled || (T.preventDefault(), T.stopPropagation());
+    }, ye = (T) => {
+      !t.readonly && !t.disabled ? (E.value && (d.value = T.target.value), t.dynamicFiltering && !t.open && l(U.OPEN), l(U.INPUT, T.target.value), j(() => {
+        V.value && b.value?.focus();
+      })) : (T.preventDefault(), T.stopPropagation());
+    }, de = (T = "textbox") => {
+      const H = T === "clear-action" ? u.value : b.value;
+      return H?.focus(), !!H;
     };
     return e({
-      focus: ve
-    }), { __sfc: !0, t: s, attrs: o, slots: i, hasSlot: f, props: t, emit: l, textbox: v, textboxId: d, isTextboxFocused: r, localInputValue: m, isUnderlineStyle: b, conditionalClasses: c, showRequiredAttribute: y, comboboxConditionalClasses: I, isFiltering: T, shouldShowAutocompleteSuggestion: F, ariaAttributes: S, selectedValueItems: A, shouldUseDynamicFilteringInputMode: _, shouldShowSearchValue: E, shouldShowInput: O, getInitialInputValue: w, inputValue: $, shouldShowSingleSelectSlot: J, shouldShowMultipleSlot: z, onOpenDropdown: L, onCloseDropdown: C, onToggleDropdown: N, onTextboxEnterKey: D, onClearSearch: K, onTextboxFocus: Y, onTextboxBlur: X, onClosedComboboxMouseDown: g, onInputEvent: ee, focus: ve, BentoTypography: ue, DropdownBaseTextboxEvent: q, CrossCircleFillIcon: ft, CrossCircleFillSmallIcon: bt, BentoDropdownSize: Ee };
+      focus: de
+    }), { __sfc: !0, t: s, attrs: o, slots: i, hasSlot: v, props: t, emit: l, textbox: b, clearAction: u, textboxId: r, isTextboxFocused: m, localInputValue: d, isUnderlineStyle: c, conditionalClasses: _, showRequiredAttribute: R, comboboxConditionalClasses: L, isFiltering: O, showClearSelection: S, showClearAction: B, clearActionLabel: g, shouldShowAutocompleteSuggestion: A, ariaAttributes: k, selectedValueItems: $, shouldUseDynamicFilteringInputMode: E, shouldShowSearchValue: Y, shouldShowInput: V, getInitialInputValue: C, inputValue: z, shouldShowSingleSelectSlot: w, shouldShowMultipleSlot: x, onOpenDropdown: P, onCloseDropdown: se, onToggleDropdown: ee, onTextboxEnterKey: X, onClearSearch: I, onClearAction: te, onTextboxFocus: be, onTextboxBlur: ce, onClosedComboboxMouseDown: ue, onInputEvent: ye, focus: de, BentoTypography: pe, DropdownBaseTextboxEvent: U, CrossCircleFillIcon: bt, CrossCircleFillSmallIcon: vt, BentoDropdownSize: Oe };
   }
 });
-var aa = function() {
+var sa = function() {
   var e = this, l = e._self._c, t = e._self._setupProxy;
   return l("div", { class: e.$attrs.class, attrs: { "data-testid": "textbox-wrapper" }, on: { click: t.onToggleDropdown, keydown: function(s) {
     return !s.type.indexOf("key") && e._k(s.keyCode, "escape", void 0, s.key, void 0) ? null : t.onCloseDropdown.apply(null, arguments);
@@ -1981,26 +2003,26 @@ var aa = function() {
     return l("div", { key: s.value }, [l("div", { staticClass: "b-dropdown-base-textbox__input-selected-element" }, [e._t("default", function() {
       return [e._v(" " + e._s(e.displayValue) + " ")];
     }, null, s)], 2)]);
-  }), 0)] : [e._v(e._s(e.displayValue))]], 2), e.additionalItemsSelected ? l("span", { staticClass: "b-dropdown-base-textbox__additional-items" }, [e._v(" " + e._s(e.additionalItemsSelected) + " ")]) : e._e(), t.hasSlot("icon") && !t.isFiltering ? l("span", { staticClass: "b-dropdown-base-textbox__icon", attrs: { "aria-hidden": "true" } }, [e._t("icon")], 2) : e._e(), t.isFiltering ? l("span", { staticClass: "b-dropdown-base-textbox__clear-search", attrs: { tabindex: e.disabled ? -1 : 0, "data-testid": "clear-search-button" }, on: { click: function(s) {
-    return s.stopPropagation(), t.onClearSearch.apply(null, arguments);
-  }, keydown: function(s) {
-    return !s.type.indexOf("key") && e._k(s.keyCode, "enter", 13, s.key, "Enter") ? null : (s.stopPropagation(), t.onClearSearch.apply(null, arguments));
-  }, keyup: function(s) {
-    return !s.type.indexOf("key") && e._k(s.keyCode, "space", 32, s.key, [" ", "Spacebar"]) ? null : t.onClearSearch.apply(null, arguments);
-  } } }, [e.size === t.BentoDropdownSize.SMALL ? l(t.CrossCircleFillSmallIcon, { attrs: { "svg-title": t.t("clearSearch") } }) : l(t.CrossCircleFillIcon, { attrs: { "svg-title": t.t("clearSearch") } })], 1) : e._e()])], 1);
-}, sa = [], oa = /* @__PURE__ */ W(
-  la,
+  }), 0)] : [e._v(e._s(e.displayValue))]], 2), e.additionalItemsSelected ? l("span", { staticClass: "b-dropdown-base-textbox__additional-items" }, [e._v(" " + e._s(e.additionalItemsSelected) + " ")]) : e._e(), t.hasSlot("icon") && !t.showClearAction ? l("span", { staticClass: "b-dropdown-base-textbox__icon", attrs: { "aria-hidden": "true" } }, [e._t("icon")], 2) : e._e(), t.showClearAction ? l("span", { ref: "clearAction", staticClass: "b-dropdown-base-textbox__clear-action", attrs: { tabindex: e.disabled ? -1 : 0, role: "button", "aria-label": t.clearActionLabel, title: t.clearActionLabel, "data-testid": t.isFiltering ? "clear-search-button" : "clear-selection-button" }, on: { click: function(s) {
+    return s.stopPropagation(), t.onClearAction.apply(null, arguments);
+  }, keydown: [function(s) {
+    return !s.type.indexOf("key") && e._k(s.keyCode, "enter", 13, s.key, "Enter") ? null : (s.stopPropagation(), t.onClearAction.apply(null, arguments));
+  }, function(s) {
+    return !s.type.indexOf("key") && e._k(s.keyCode, "space", 32, s.key, [" ", "Spacebar"]) ? null : (s.preventDefault(), s.stopPropagation(), t.onClearAction.apply(null, arguments));
+  }] } }, [e.size === t.BentoDropdownSize.SMALL ? l(t.CrossCircleFillSmallIcon, { attrs: { "aria-hidden": "true" } }) : l(t.CrossCircleFillIcon, { attrs: { "aria-hidden": "true" } })], 1) : e._e()])], 1);
+}, oa = [], na = /* @__PURE__ */ q(
   aa,
   sa,
+  oa,
   !1,
   null,
-  "d5bca42f"
+  "1d0dcd4b"
 );
-const rt = oa.exports, na = V({
+const ct = na.exports, ia = W({
   name: "dropdown-default-textbox",
   inheritAttrs: !1
-}), ia = /* @__PURE__ */ V({
-  ...na,
+}), ra = /* @__PURE__ */ W({
+  ...ia,
   props: {
     /**
      * The number of additional items that have been selected in the dropdown.
@@ -2045,6 +2067,10 @@ const rt = oa.exports, na = V({
      * Renders the dropdown with a condensed style.
      */
     condensed: { type: Boolean, default: !1 },
+    /**
+     * Allows the selected value to be cleared in a single-select dropdown.
+     */
+    clearable: { type: Boolean, default: !1 },
     /**
      * Disables any textbox functionality
      */
@@ -2093,39 +2119,40 @@ const rt = oa.exports, na = V({
      */
     multiple: { type: Boolean, default: !1 }
   },
-  emits: ["clear", "close", "input", "keydown", "open"],
+  emits: ["clear", "clear-selection", "close", "input", "keydown", "open"],
   setup(a, { expose: e, emit: l }) {
-    const t = a, s = Se(), o = x(null), i = n(() => ({
+    const t = a, s = xe(), o = y(null), i = n(() => ({
       [`b-dropdown-default-textbox--${ae.ERROR}`]: !t.disabled && !t.readonly && t.isInvalid,
       [`b-dropdown-default-textbox--${ae.DISABLED}`]: t.disabled,
       [`b-dropdown-default-textbox--${ae.READONLY}`]: t.readonly,
       [`b-dropdown-default-textbox--${ae.OPENED}`]: t.open,
       "b-dropdown-default-textbox--condensed": t.condensed
-    })), f = n(() => t.open && !t.disabled && !t.readonly), v = (I) => {
-      l("input", I);
-    }, d = (I) => {
-      l("keydown", I);
-    }, r = (I) => {
-      be(I), l("open");
-    }, m = (I) => {
-      be(I), l("close");
-    }, b = (I) => {
-      be(I), l("clear");
-    }, c = {
-      [q.INPUT]: v,
-      [q.OPEN]: r,
-      [q.CLOSE]: m,
-      [q.CLEAR]: b,
-      [q.KEYDOWN]: d
-    }, y = () => {
-      o.value.focus();
-    };
+    })), v = n(() => t.open && !t.disabled && !t.readonly), b = (L) => {
+      l("input", L);
+    }, u = (L) => {
+      l("keydown", L);
+    }, r = (L) => {
+      _e(L), l("open");
+    }, m = (L) => {
+      _e(L), l("close");
+    }, d = (L) => {
+      _e(L), l("clear");
+    }, c = () => {
+      l("clear-selection");
+    }, _ = {
+      [U.INPUT]: b,
+      [U.OPEN]: r,
+      [U.CLOSE]: m,
+      [U.CLEAR]: d,
+      [U.CLEAR_SELECTION]: c,
+      [U.KEYDOWN]: u
+    }, R = (L) => o.value.focus(L);
     return e({
-      focus: y
-    }), { __sfc: !0, emit: l, slots: s, props: t, baseTextbox: o, conditionalClasses: i, isDropdownOpen: f, onInput: v, onKeyDown: d, openDropdown: r, closeDropdown: m, clearValue: b, listeners: c, focus: y, DropdownBaseTextbox: rt, ChevronDownIcon: Je, ChevronUpIcon: Xe };
+      focus: R
+    }), { __sfc: !0, emit: l, slots: s, props: t, baseTextbox: o, conditionalClasses: i, isDropdownOpen: v, onInput: b, onKeyDown: u, openDropdown: r, closeDropdown: m, clearValue: d, clearSelection: c, listeners: _, focus: R, DropdownBaseTextbox: ct, ChevronDownIcon: Xe, ChevronUpIcon: Ze };
   }
 });
-var ra = function() {
+var ca = function() {
   var e = this, l = e._self._c, t = e._self._setupProxy;
   return l("div", { staticClass: "b-dropdown-default-textbox", class: t.conditionalClasses, attrs: { "data-testid": "default-textbox" } }, [l(t.DropdownBaseTextbox, e._g(e._b({ ref: "baseTextbox", staticClass: "b-dropdown-default-textbox__textbox", attrs: { value: e.value }, scopedSlots: e._u([e._l(t.slots, function(s, o) {
     return { key: o, fn: function(i) {
@@ -2134,55 +2161,55 @@ var ra = function() {
   }), { key: "icon", fn: function() {
     return [l("div", { staticClass: "b-dropdown-default-textbox__chevron" }, [l(t.ChevronUpIcon, { directives: [{ name: "show", rawName: "v-show", value: t.isDropdownOpen, expression: "isDropdownOpen" }], attrs: { "svg-title": "opened" } }), l(t.ChevronDownIcon, { directives: [{ name: "show", rawName: "v-show", value: !t.isDropdownOpen, expression: "!isDropdownOpen" }], attrs: { "svg-title": "closed" } })], 1)];
   }, proxy: !0 }], null, !0) }, "dropdown-base-textbox", { ...e.$attrs, ...e.$props }, !1), t.listeners))], 1);
-}, ca = [], ua = /* @__PURE__ */ W(
-  ia,
+}, ua = [], da = /* @__PURE__ */ q(
   ra,
   ca,
+  ua,
   !1,
   null,
-  "707a8da2"
+  "39335cee"
 );
-const da = ua.exports, pa = {
+const pa = da.exports, fa = {
   __name: "chevron-down-small",
   setup(a) {
-    const e = Me(), l = String(e?.uid ?? e?.proxy?._uid);
+    const e = Ne(), l = String(e?.uid ?? e?.proxy?._uid);
     return { __sfc: !0, instance: e, uuid: l };
   }
 };
-var fa = function() {
+var ba = function() {
   var e = this, l = e._self._c;
   return e._self._setupProxy, l("svg", e._b({ staticClass: "ui-assets-icons-16", attrs: { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" } }, "svg", e.$attrs, !1), [e.$attrs["svg-title"] ? l("title", [e._v(e._s(e.$attrs["svg-title"]))]) : e._e(), l("path", { attrs: { fill: "#001222", d: "M5.00011 5.43922L8.00011 8.43922L11.0001 5.43922L12.0608 6.49988L8.00011 10.5605L3.93945 6.49988L5.00011 5.43922Z" } })]);
-}, ba = [], va = /* @__PURE__ */ W(
-  pa,
+}, va = [], ma = /* @__PURE__ */ q(
   fa,
   ba,
+  va,
   !1,
   null,
   null
 );
-const ma = va.exports, _a = {
+const _a = ma.exports, ya = {
   __name: "chevron-up-small",
   setup(a) {
-    const e = Me(), l = String(e?.uid ?? e?.proxy?._uid);
+    const e = Ne(), l = String(e?.uid ?? e?.proxy?._uid);
     return { __sfc: !0, instance: e, uuid: l };
   }
 };
-var ya = function() {
+var ga = function() {
   var e = this, l = e._self._c;
   return e._self._setupProxy, l("svg", e._b({ staticClass: "ui-assets-icons-16", attrs: { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" } }, "svg", e.$attrs, !1), [e.$attrs["svg-title"] ? l("title", [e._v(e._s(e.$attrs["svg-title"]))]) : e._e(), l("path", { attrs: { fill: "#001222", d: "M10.9999 10.5608L7.9999 7.56077L4.9999 10.5608L3.93924 9.50011L7.9999 5.43945L12.0606 9.50011L10.9999 10.5608Z" } })]);
-}, ga = [], ha = /* @__PURE__ */ W(
-  _a,
+}, ha = [], Sa = /* @__PURE__ */ q(
   ya,
   ga,
+  ha,
   !1,
   null,
   null
 );
-const Sa = ha.exports, xa = V({
+const xa = Sa.exports, Ca = W({
   name: "dropdown-small-textbox",
   inheritAttrs: !1
-}), Ca = /* @__PURE__ */ V({
-  ...xa,
+}), Ia = /* @__PURE__ */ W({
+  ...Ca,
   props: {
     /**
      * The number of additional items that have been selected in the dropdown.
@@ -2215,6 +2242,10 @@ const Sa = ha.exports, xa = V({
      * Disables any textbox functionality
      */
     disabled: { type: Boolean, default: !1 },
+    /**
+     * Allows the selected value to be cleared in a single-select dropdown.
+     */
+    clearable: { type: Boolean, default: !1 },
     /**
      * Selected option's label
      */
@@ -2241,38 +2272,39 @@ const Sa = ha.exports, xa = V({
      */
     value: { type: String, default: "" }
   },
-  emits: ["clear", "close", "input", "keydown", "open"],
+  emits: ["clear", "clear-selection", "close", "input", "keydown", "open"],
   setup(a, { expose: e, emit: l }) {
-    const t = a, s = Se(), o = x(null), i = Ge(it, !1), f = n(() => ({
+    const t = a, s = xe(), o = y(null), i = Ue(rt, !1), v = n(() => ({
       [`b-dropdown-small-textbox--${ae.DISABLED}`]: t.disabled,
       [`b-dropdown-small-textbox--${ae.READONLY}`]: t.readonly,
       [`b-dropdown-small-textbox--${ae.OPENED}`]: t.open,
       "b-dropdown-small-textbox--underline": i
-    })), v = n(() => t.open && !t.disabled && !t.readonly), d = (T) => {
-      l("input", T);
-    }, r = (T) => {
-      l("keydown", T);
-    }, m = (T) => {
-      be(T), l("open");
-    }, b = (T) => {
-      be(T), l("close");
-    }, c = (T) => {
-      be(T), l("clear");
-    }, y = {
-      [q.INPUT]: d,
-      [q.OPEN]: m,
-      [q.CLOSE]: b,
-      [q.CLEAR]: c,
-      [q.KEYDOWN]: r
-    }, I = () => {
-      o.value.focus();
-    };
+    })), b = n(() => t.open && !t.disabled && !t.readonly), u = (O) => {
+      l("input", O);
+    }, r = (O) => {
+      l("keydown", O);
+    }, m = (O) => {
+      _e(O), l("open");
+    }, d = (O) => {
+      _e(O), l("close");
+    }, c = (O) => {
+      _e(O), l("clear");
+    }, _ = () => {
+      l("clear-selection");
+    }, R = {
+      [U.INPUT]: u,
+      [U.OPEN]: m,
+      [U.CLOSE]: d,
+      [U.CLEAR]: c,
+      [U.CLEAR_SELECTION]: _,
+      [U.KEYDOWN]: r
+    }, L = (O) => o.value.focus(O);
     return e({
-      focus: I
-    }), { __sfc: !0, emit: l, slots: s, props: t, baseTextbox: o, isUnderlineStyle: i, conditionalClasses: f, isDropdownOpen: v, onInput: d, onKeyDown: r, openDropdown: m, closeDropdown: b, clearValue: c, listeners: y, focus: I, BentoDropdownSize: Ee, DropdownBaseTextbox: rt, ChevronDownSmallIcon: ma, ChevronUpSmallIcon: Sa };
+      focus: L
+    }), { __sfc: !0, emit: l, slots: s, props: t, baseTextbox: o, isUnderlineStyle: i, conditionalClasses: v, isDropdownOpen: b, onInput: u, onKeyDown: r, openDropdown: m, closeDropdown: d, clearValue: c, clearSelection: _, listeners: R, focus: L, BentoDropdownSize: Oe, DropdownBaseTextbox: ct, ChevronDownSmallIcon: _a, ChevronUpSmallIcon: xa };
   }
 });
-var Ia = function() {
+var La = function() {
   var e = this, l = e._self._c, t = e._self._setupProxy;
   return l("div", { staticClass: "b-dropdown-small-textbox", class: t.conditionalClasses }, [l(t.DropdownBaseTextbox, e._g(e._b({ ref: "baseTextbox", staticClass: "b-dropdown-small-textbox__textbox", attrs: { size: t.BentoDropdownSize.SMALL }, scopedSlots: e._u([e._l(t.slots, function(s, o) {
     return { key: o, fn: function(i) {
@@ -2281,25 +2313,25 @@ var Ia = function() {
   }), { key: "icon", fn: function() {
     return [l("div", { staticClass: "b-dropdown-small-textbox__chevron" }, [l(t.ChevronUpSmallIcon, { directives: [{ name: "show", rawName: "v-show", value: t.isDropdownOpen, expression: "isDropdownOpen" }], attrs: { "svg-title": "opened" } }), l(t.ChevronDownSmallIcon, { directives: [{ name: "show", rawName: "v-show", value: !t.isDropdownOpen, expression: "!isDropdownOpen" }], attrs: { "svg-title": "closed" } })], 1)];
   }, proxy: !0 }], null, !0) }, "dropdown-base-textbox", { ...e.$attrs, ...e.$props }, !1), t.listeners))], 1);
-}, Oa = [], La = /* @__PURE__ */ W(
-  Ca,
+}, Oa = [], Ea = /* @__PURE__ */ q(
   Ia,
+  La,
   Oa,
   !1,
   null,
-  "c04eadff"
+  "039a291b"
 );
-const Ea = La.exports, wa = (a, e) => {
+const wa = Ea.exports, Ta = (a, e) => {
   const l = /* @__PURE__ */ new Set(), t = new Set(a.value.map((o) => o.value)), s = e.value.reduce((o, i) => {
     if (i.items)
       if (t.has(i.value))
-        o.push(i.displayValue ?? i.label), l.add(i.value), i.items.forEach((v) => l.add(v.value));
+        o.push(i.displayValue ?? i.label), l.add(i.value), i.items.forEach((b) => l.add(b.value));
       else {
-        const v = i.items.filter(
+        const b = i.items.filter(
           (r) => t.has(r.value)
         );
-        v.length > 0 && v.length === i.items.length ? (o.push(i.displayValue ?? i.label), l.add(i.value), i.items.forEach((r) => l.add(r.value))) : v.forEach(({ label: r, displayValue: m, value: b }) => {
-          o.push(m ?? r), l.add(b);
+        b.length > 0 && b.length === i.items.length ? (o.push(i.displayValue ?? i.label), l.add(i.value), i.items.forEach((r) => l.add(r.value))) : b.forEach(({ label: r, displayValue: m, value: d }) => {
+          o.push(m ?? r), l.add(d);
         });
       }
     else
@@ -2309,14 +2341,14 @@ const Ea = La.exports, wa = (a, e) => {
   return a.value.forEach((o) => {
     l.has(o.value) || s.push(o.displayValue ?? o.label);
   }), s.join(", ");
-}, Ta = ({ items: a, placeholder: e, selectedValues: l, isMultiSelect: t }) => {
+}, Aa = ({ items: a, placeholder: e, selectedValues: l, isMultiSelect: t }) => {
   const s = n(
     () => t.value && a.value.find((i) => i.items?.length)
   );
-  return n(() => l.value.length ? s.value ? wa(l, a) : l.value.map(({ label: i, displayValue: f }) => f ?? i).join(", ") : e.value || null);
-}, ct = (a) => {
+  return n(() => l.value.length ? s.value ? Ta(l, a) : l.value.map(({ label: i, displayValue: v }) => v ?? i).join(", ") : e.value || null);
+}, ut = (a) => {
   a.value.$children?.[0].$refs.textbox.focus();
-}, Aa = ({
+}, Da = ({
   inputContainerRef: a,
   optionsContainerRef: e,
   selectedValueIndex: l,
@@ -2324,99 +2356,109 @@ const Ea = La.exports, wa = (a, e) => {
   isDynamicFltering: s,
   items: o,
   isMultiple: i,
-  isSearching: f,
-  activeDescendantIndex: v,
-  selectFirstMatchedOption: d,
+  isSearching: v,
+  activeDescendantIndex: b,
+  selectFirstMatchedOption: u,
   totalItemCount: r,
   isVirtualScroll: m,
-  removeActiveDescendant: b
-}, c, y, I) => {
-  const T = async (g) => {
-    s.value && await Z(), o.value[g]?.focus();
-  }, F = async (g) => {
-    s.value && await Z();
-    const ee = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef?.$el.querySelectorAll(
+  removeActiveDescendant: d
+}, c, _, R) => {
+  const L = async (I) => {
+    s.value && await j(), o.value[I]?.focus();
+  }, O = async (I) => {
+    s.value && await j();
+    const te = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef?.$el.querySelectorAll(
       "button"
     );
-    ee?.length ? ee[g]?.focus() : T(g);
-  }, S = (g) => e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef?.setListboxFocusedIndex(
-    g
-  ), A = async (g) => {
-    await e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef?.navigateToItem(g);
-  }, _ = (g) => {
-    b?.(), !(g < 0) && Z(() => {
-      m ? A(g) : (S(g), T(g));
+    te?.length ? te[I]?.focus() : L(I);
+  }, S = (I) => e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef?.setListboxFocusedIndex(
+    I
+  ), B = async (I) => {
+    await e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef?.navigateToItem(I);
+  }, g = (I) => {
+    d?.(), !(I < 0) && j(() => {
+      m ? B(I) : (S(I), L(I));
     });
-  }, E = () => {
-    t.value || y(), _(0);
-  }, O = () => {
-    t.value || y();
-    const g = m ? r.value - 1 : o.value.length - 1, ee = Math.min((v?.value ?? -1) + 1, g);
-    _(ee);
-  }, w = () => {
-    t.value || y(), Z(() => {
-      _(m ? r.value - 1 : o.value.length - 1);
+  }, A = () => {
+    t.value || _(), g(0);
+  }, k = () => {
+    t.value || _();
+    const I = m ? r.value - 1 : o.value.length - 1, te = Math.min((b?.value ?? -1) + 1, I);
+    g(te);
+  }, $ = () => {
+    t.value || _(), j(() => {
+      g(m ? r.value - 1 : o.value.length - 1);
     });
-  }, $ = (g) => {
-    g.preventDefault(), g.stopPropagation();
-  }, J = ({ detail: g }) => {
-    if ($(g), v?.value !== void 0 && v.value >= 0) {
-      O();
+  }, E = (I) => {
+    I.preventDefault(), I.stopPropagation();
+  }, Y = ({ detail: I }) => {
+    if (E(I), b?.value !== void 0 && b.value >= 0) {
+      k();
       return;
     }
-    E();
-  }, z = ({ detail: g }) => {
-    $(g), w();
-  }, L = ({ detail: g }) => {
-    $(g), E();
-  }, C = ({ detail: g }) => {
-    $(g), w();
-  }, N = ({ detail: g }) => {
-    $(g), c(), t.value && (i.value ? F(0) : _(l.value));
-  }, D = async ({ detail: g }) => {
-    if ($(g), s.value && !i.value)
-      return t.value && f.value && await d(), void 0;
-    c(), t.value && (i.value ? F(0) : _(l.value));
-  }, K = ({ detail: g }) => {
-    g.stopPropagation(), t.value && I();
-  }, Y = ({ detail: g }) => {
-    g.stopPropagation(), t.value && (I(), ct(a));
+    A();
+  }, V = ({ detail: I }) => {
+    E(I), $();
+  }, C = ({ detail: I }) => {
+    E(I), A();
+  }, z = ({ detail: I }) => {
+    E(I), $();
+  }, w = () => {
+    if (t.value) {
+      if (i.value) {
+        O(0);
+        return;
+      }
+      j(() => {
+        a.value.focus("clear-action") || g(l.value);
+      });
+    }
+  }, x = ({ detail: I }) => {
+    E(I), c(), w();
+  }, P = async ({ detail: I }) => {
+    if (E(I), s.value && !i.value)
+      return t.value && v.value && await u(), void 0;
+    c(), w();
+  }, se = ({ detail: I }) => {
+    I.stopPropagation(), t.value && R();
+  }, ee = ({ detail: I }) => {
+    I.stopPropagation(), t.value && (R(), ut(a));
   };
   return n(() => ({
-    [U.ARROW_DOWN]: J,
-    [U.ARROW_UP]: z,
-    [U.HOME]: L,
-    [U.END]: C,
-    ...s.value ? {} : { [U.SPACE]: N },
-    [U.ENTER]: D,
-    ...s.value ? {} : { [U.TAB]: K },
-    [U.ESCAPE]: Y
+    [K.ARROW_DOWN]: Y,
+    [K.ARROW_UP]: V,
+    [K.HOME]: C,
+    [K.END]: z,
+    ...s.value ? {} : { [K.SPACE]: x },
+    [K.ENTER]: P,
+    ...s.value ? {} : { [K.TAB]: se },
+    [K.ESCAPE]: ee
   }));
 }, ka = ({ inputContainerRef: a, isDropdownOpen: e }, l) => {
   const t = () => {
-    e.value && l(), Z(() => {
-      ct(a);
+    e.value && l(), j(() => {
+      ut(a);
     });
   };
   return {
-    [u.ENTER]: t,
-    [u.ESCAPE]: t,
-    [u.TAB]: t,
-    [u.SPACE]: t
+    [p.ENTER]: t,
+    [p.ESCAPE]: t,
+    [p.TAB]: t,
+    [p.SPACE]: t
   };
 };
-function Da(a, e, l, t, s) {
-  const o = x(a), i = x(e), f = (r, m = []) => m.flatMap((b) => b.label.toLocaleLowerCase().includes(r) ? t?.value && b.items ? [...f(r, b.items)] : [b, ...f(r, b.items)] : b.items ? [...f(r, b.items)] : []), v = l !== void 0 ? nt(() => l(o.value), s ?? 300) : void 0;
+function Ba(a, e, l, t, s) {
+  const o = y(a), i = y(e), v = (r, m = []) => m.flatMap((d) => d.label.toLocaleLowerCase().includes(r) ? t?.value && d.items ? [...v(r, d.items)] : [d, ...v(r, d.items)] : d.items ? [...v(r, d.items)] : []), b = l !== void 0 ? it(() => l(o.value), s ?? 300) : void 0;
   return Q(o, () => {
-    v !== void 0 && v();
+    b !== void 0 && b();
   }), n(() => {
     if (!o.value || l !== void 0)
       return i.value;
     const r = o.value.toLocaleLowerCase();
-    return f(r, i.value);
+    return v(r, i.value);
   });
 }
-const Ba = {
+const Ra = {
   "de-DE": { all: "Alle", ariaLabelFallback: "Dropdown", clearSearch: "Filter löschen" },
   "en-GB": { all: "All", ariaLabelFallback: "Dropdown", clearSearch: "Clear filter" },
   "en-US": { all: "All", ariaLabelFallback: "Dropdown", clearSearch: "Clear filter" },
@@ -2428,17 +2470,17 @@ const Ba = {
   "ja-JP": { all: "すべて", ariaLabelFallback: "ドロップダウン", clearSearch: "フィルターをクリア" },
   "pt-BR": { all: "Todos", ariaLabelFallback: "Menu suspenso", clearSearch: "Limpar filtro" },
   "zh-CN": { all: "全部", ariaLabelFallback: "下拉菜单", clearSearch: "清除筛选器" }
-}, Ra = V({
-  i18n: { messages: Ba },
+}, Ma = W({
+  i18n: { messages: Ra },
   name: "bento-dropdown",
   components: {
-    DropdownInputDefault: da,
-    DropdownInputSmall: Ea
+    DropdownInputDefault: pa,
+    DropdownInputSmall: wa
   },
   inheritAttrs: !1,
   model: { prop: "modelValue", event: "update:model-value" }
-}), Ma = /* @__PURE__ */ V({
-  ...Ra,
+}), Na = /* @__PURE__ */ W({
+  ...Ma,
   props: {
     description: { default: null },
     disabled: { type: Boolean, default: !1 },
@@ -2449,6 +2491,7 @@ const Ba = {
     readonly: { type: Boolean, default: !1 },
     required: { type: Boolean, default: !1 },
     tooltipText: { default: null },
+    clearable: { type: Boolean, default: !1 },
     condensed: { type: Boolean, default: !1 },
     emptyState: { default: void 0 },
     dynamicFiltering: { type: Boolean, default: !1 },
@@ -2457,7 +2500,7 @@ const Ba = {
     items: { default: () => [] },
     loading: { type: Boolean, default: !1 },
     componentLoading: { type: Boolean, default: !1 },
-    lazyLoadType: { default: Fe.props.lazyLoadType.default },
+    lazyLoadType: { default: ze.props.lazyLoadType.default },
     multiple: { type: Boolean, default: !1 },
     search: { default: void 0 },
     showSlotContentInMultiple: { type: Boolean, default: !1 },
@@ -2469,145 +2512,147 @@ const Ba = {
   },
   emits: ["update:model-value", "show-more", "open"],
   setup(a, { expose: e, emit: l }) {
-    const t = a, s = ze(), o = Se(), i = (M) => Object.fromEntries(Object.entries(M).filter(([le]) => !le.startsWith("aria-"))), f = He(o), { t: v } = de(), { emitValue: d } = vt(l), r = x(null), m = x(null), b = x(null), c = x(!1), y = x(!1), I = ce("bento-dropdown-options-container"), T = ce("dropdown-label"), F = ce("dropdown-description"), S = ce("dropdown-error"), { isReadOnly: A } = mt(H(t, "readonly")), _ = n(() => t.modelValue), { cachedSelectedListboxOptions: E, cachedListboxSelectedValues: O, setCachedValues: w } = Wl(
-      H(t, "items"),
-      _,
-      H(t, "multiple"),
-      H(t, "enableValueLabelPair")
-    ), $ = x(s["aria-describedby"]), J = n(() => v("ariaLabelFallback")), z = Ge(Ql, !1), L = n(() => z ? Ee.SMALL : Ee.DEFAULT), C = n(() => ({
+    const t = a, s = Ge(), o = xe(), i = (N) => Object.fromEntries(Object.entries(N).filter(([le]) => !le.startsWith("aria-"))), v = Je(o), { t: b } = fe(), { emitValue: u } = mt(l), r = y(null), m = y(null), d = y(null), c = y(!1), _ = y(!1), R = re("bento-dropdown-options-container"), L = re("dropdown-label"), O = re("dropdown-description"), S = re("dropdown-error"), { isReadOnly: B } = _t(J(t, "readonly")), g = n(() => t.modelValue), { cachedSelectedListboxOptions: A, cachedListboxSelectedValues: k, setCachedValues: $ } = Kl(
+      J(t, "items"),
+      g,
+      J(t, "multiple"),
+      J(t, "enableValueLabelPair")
+    ), E = y(s["aria-describedby"]), Y = n(() => b("ariaLabelFallback")), V = Ue(ea, !1), C = n(() => V ? Oe.SMALL : Oe.DEFAULT), z = n(() => ({
       "b-dropdown--condensed": t.condensed
-    })), N = n(() => ({
+    })), w = n(() => ({
       "b-dropdown__description--error": !!t.errorMessage
-    })), D = x(""), K = H(t, "items"), Y = H(t, "staticCategories"), X = Da(
-      D,
-      K,
+    })), x = y(""), P = J(t, "items"), se = J(t, "staticCategories"), ee = Ba(
+      x,
+      P,
       t?.search?.searchEvent,
-      Y,
+      se,
       t?.search?.debounceTime
-    ), g = n(() => t.dynamicFiltering && !!D.value), ee = Ta({
-      items: K,
-      placeholder: H(t, "placeholder"),
-      isMultiSelect: H(t, "multiple"),
-      selectedValues: E
-    }), ve = n(() => {
-      if (t?.multiple && Array.isArray(_.value))
+    ), X = n(() => t.dynamicFiltering && !!x.value), I = Aa({
+      items: P,
+      placeholder: J(t, "placeholder"),
+      isMultiSelect: J(t, "multiple"),
+      selectedValues: A
+    }), te = n(() => {
+      if (t?.multiple && Array.isArray(g.value))
         return t.items.filter(
-          ({ value: M }) => _.value.includes(M)
+          ({ value: N }) => g.value.includes(N)
         );
       if (!t.multiple && t.staticCategories) {
-        const M = t.items.find(
-          (se) => se.items?.some((qe) => qe.value === _.value)
+        const N = t.items.find(
+          (oe) => oe.items?.some((Ye) => Ye.value === g.value)
         );
-        return (M ? M.items.find((se) => se.value === _.value) : t.items.find(({ value: se }) => se === _.value)) ?? null;
+        return (N ? N.items.find((oe) => oe.value === g.value) : t.items.find(({ value: oe }) => oe === g.value)) ?? null;
       }
-      return t.items.find(({ value: M }) => M === _.value);
-    }), B = n(() => {
-      const le = (oe.value ? me.value : X.value).findIndex(({ value: se }) => t.enableValueLabelPair ? _.value?.value === se : _.value === se);
+      return t.items.find(({ value: N }) => N === g.value);
+    }), be = n(() => {
+      const le = (ce.value ? ue.value : ee.value).findIndex(({ value: oe }) => t.enableValueLabelPair ? g.value?.value === oe : g.value === oe);
       return le > -1 ? le : 0;
-    }), { isMultiLevelSelect: oe, flattenedItemsList: me } = ot(K), we = n(() => oe.value && !t.staticCategories), xe = n(() => we.value ? "treeitem" : "option"), re = n(() => {
+    }), { isMultiLevelSelect: ce, flattenedItemsList: ue } = nt(P), ye = n(() => ce.value && !t.staticCategories), de = n(() => ye.value ? "treeitem" : "option"), T = n(() => {
       if (t.multiple) {
-        const M = Array.isArray(_.value) ? _.value.length : 0, le = oe.value ? me.value.length : K.value.length;
-        return M === 0 ? null : !t.hasMoreItems && le > 0 && le === M ? v("all") : M;
+        const N = Array.isArray(g.value) ? g.value.length : 0, le = ce.value ? ue.value.length : P.value.length;
+        return N === 0 ? null : !t.hasMoreItems && le > 0 && le === N ? b("all") : N;
       }
       return null;
-    }), te = n(
-      () => X.value.find((M) => !t.isOptionDisabled?.(M))
-    ), _e = n(() => t.multiple || !g.value || !y.value ? "" : te.value?.label ?? ""), Pe = n(() => _e.value.toLocaleLowerCase().startsWith(D.value.toLocaleLowerCase()) ? _e.value.slice(D.value.length) : ""), Ce = n(
-      () => !t.multiple && c.value && g.value && y.value && te.value ? lt(I, te.value.value) : null
+    }), H = n(
+      () => ee.value.find((N) => !t.isOptionDisabled?.(N))
+    ), ge = n(() => t.multiple || !X.value || !_.value ? "" : H.value?.label ?? ""), Fe = n(() => ge.value.toLocaleLowerCase().startsWith(x.value.toLocaleLowerCase()) ? ge.value.slice(x.value.length) : ""), Ce = n(
+      () => !t.multiple && c.value && X.value && _.value && H.value ? at(R, H.value.value) : null
     ), Ie = n(
-      () => Ce.value ? X.value.findIndex(({ value: M }) => M === te.value?.value) : -1
-    ), Te = (M) => {
-      D.value = M, y.value = !0;
-    }, Ae = n(
+      () => Ce.value ? ee.value.findIndex(({ value: N }) => N === H.value?.value) : -1
+    ), Ee = (N) => {
+      x.value = N, _.value = !0;
+    }, we = async () => {
+      $([]), u(null), await j(), Be();
+    }, Te = n(
       () => [
-        t.description ? F : null,
-        $.value,
+        t.description ? O : null,
+        E.value,
         t.errorMessage ? S : null
       ].filter(Boolean).join(" ") || null
-    ), ye = n(() => {
-      const M = b.value?.dropdownOptionsListboxRef;
-      return M?.listboxRef?.value ?? M?.listboxRef;
-    }), { visibleDomOptions: ge, updateVisibleDomOptions: Oe } = Ue(
-      ye,
-      X,
-      xe
-    ), Le = () => {
-      A.value || (c.value = !0, Z(() => {
-        Oe();
+    ), ve = n(() => {
+      const N = d.value?.dropdownOptionsListboxRef;
+      return N?.listboxRef?.value ?? N?.listboxRef;
+    }), { visibleDomOptions: Ae, updateVisibleDomOptions: he } = We(
+      ve,
+      ee,
+      de
+    ), De = () => {
+      B.value || (c.value = !0, j(() => {
+        he();
       }));
-    }, he = () => {
+    }, Se = () => {
       c.value = !1;
     }, ke = () => {
-      A.value || (c.value = !c.value, Z(() => {
-        Oe();
-      }), g.value && (D.value = ""));
-    }, De = () => {
-      g.value && (D.value = ""), c.value && (c.value = !1, b.value.onOutsideDropdownClick());
-    }, p = n(() => [
-      De,
+      B.value || (c.value = !c.value, j(() => {
+        he();
+      }), X.value && (x.value = ""));
+    }, f = () => {
+      X.value && (x.value = ""), c.value && (c.value = !1, d.value.onOutsideDropdownClick());
+    }, h = n(() => [
+      f,
       {
-        ignore: [ye]
+        ignore: [ve]
       }
-    ]), h = async (M) => {
-      t.multiple || (D.value = "", c.value = !1), w(M), d(O.value), t.multiple || (await Z(), pe());
-    }, k = async () => te.value ? (await h([te.value]), !0) : !1, P = () => {
-      l(u.SHOW_MORE);
-    }, G = Aa(
+    ]), D = async (N) => {
+      t.multiple || (x.value = "", c.value = !1), $(N), u(k.value), t.multiple || (await j(), Be());
+    }, F = async () => H.value ? (await D([H.value]), !0) : !1, G = () => {
+      l(p.SHOW_MORE);
+    }, Z = Da(
       {
         inputContainerRef: r,
-        optionsContainerRef: b,
-        selectedValueIndex: B,
+        optionsContainerRef: d,
+        selectedValueIndex: be,
         isDropdownOpen: c,
-        isDynamicFltering: H(t, "dynamicFiltering"),
-        items: ge,
-        isMultiple: H(t, "multiple"),
-        isSearching: g,
+        isDynamicFltering: J(t, "dynamicFiltering"),
+        items: Ae,
+        isMultiple: J(t, "multiple"),
+        isSearching: X,
         activeDescendantIndex: Ie,
-        selectFirstMatchedOption: k,
-        totalItemCount: n(() => X.value.length),
+        selectFirstMatchedOption: F,
+        totalItemCount: n(() => ee.value.length),
         isVirtualScroll: !t?.multiple && t?.virtualScroll !== !1 && t?.lazyLoadType === "none",
         removeActiveDescendant: () => {
-          y.value = !1;
+          _.value = !1;
         }
       },
       ke,
-      Le,
-      he
-    ), j = ka(
+      De,
+      Se
+    ), M = ka(
       {
         inputContainerRef: r,
         isDropdownOpen: c
       },
-      he
-    ), R = {
-      [u.CLOSE_DROPDOWN]: he,
-      [u.SELECT]: h,
-      [u.SHOW_MORE]: P,
-      ...j
-    }, pe = () => {
+      Se
+    ), Le = {
+      [p.CLOSE_DROPDOWN]: Se,
+      [p.SELECT]: D,
+      [p.SHOW_MORE]: G,
+      ...M
+    }, Be = () => {
       r.value?.focus();
-    }, Ke = async () => {
-      if (await Z(), !c.value || t.multiple || !b.value)
+    }, qe = async () => {
+      if (await j(), !c.value || t.multiple || !d.value)
         return;
-      const M = B.value;
-      if (M <= 0)
+      const N = be.value;
+      if (N <= 0)
         return;
-      const le = b.value.dropdownOptionsListboxRef, se = le?.listboxRef;
-      le?.listboxItemRef?.scrollToItem?.(M, se);
+      const le = d.value.dropdownOptionsListboxRef, oe = le?.listboxRef;
+      le?.listboxItemRef?.scrollToItem?.(N, oe);
     };
     return Q(
       () => c.value,
-      (M) => {
-        M && (l("open"), Ke());
+      (N) => {
+        N && (l("open"), qe());
       }
     ), e({
-      focus: pe
-    }), { __sfc: !0, attrs: s, slots: o, getRootAttributes: i, hasSlot: f, props: t, emit: l, t: v, emitValue: d, inputContainerRef: r, inputContainerRefWrapper: m, optionsContainerRef: b, isDropdownOpen: c, shouldShowActiveDescendant: y, dropdownOptionsContainerId: I, labelId: T, descriptionId: F, errorId: S, isReadOnly: A, dropdownValue: _, cachedSelectedListboxOptions: E, cachedListboxSelectedValues: O, setCachedValues: w, ariaDescribedByAttribute: $, computedAriaLabelFallbackMessage: J, isInputComponent: z, computedSize: L, conditionalClasses: C, descriptionConditionalClasses: N, searchTerm: D, items: K, staticCategories: Y, filteredItems: X, isSearching: g, displayValue: ee, selectedValueItem: ve, selectedValueIndex: B, isMultiLevelSelect: oe, flattenedItemsList: me, isTreePattern: we, computedOptionRole: xe, additionalItemsSelected: re, firstEnabledFilteredItem: te, autocompleteSuggestion: _e, autocompleteSuggestionSuffix: Pe, activeDescendantId: Ce, activeDescendantIndex: Ie, onSearchTermInput: Te, ariaDescribedBy: Ae, listboxRef: ye, visibleDomOptions: ge, updateVisibleDomOptions: Oe, openDropdown: Le, closeDropdown: he, toggleDropdown: ke, clickOutsideDropdown: De, clickOutsideDropdownOptions: p, onOptionSelected: h, selectFirstMatchedOption: k, emitShowMoreEvent: P, textboxKeyboardNavigationListeners: G, listboxKeyboardNavigationListeners: j, listboxListeners: R, focus: pe, scrollToSelectedOption: Ke, BentoDropdownOptionsContainer: Zl, BentoTypography: ue, ErrorMessage: Lt, FieldLabel: Ot, BentoTeleport: Ct, vBentoClickOutsideDirective: It, vBentoKeyboardNavigationDirective: Ne };
+      focus: Be
+    }), { __sfc: !0, attrs: s, slots: o, getRootAttributes: i, hasSlot: v, props: t, emit: l, t: b, emitValue: u, inputContainerRef: r, inputContainerRefWrapper: m, optionsContainerRef: d, isDropdownOpen: c, shouldShowActiveDescendant: _, dropdownOptionsContainerId: R, labelId: L, descriptionId: O, errorId: S, isReadOnly: B, dropdownValue: g, cachedSelectedListboxOptions: A, cachedListboxSelectedValues: k, setCachedValues: $, ariaDescribedByAttribute: E, computedAriaLabelFallbackMessage: Y, isInputComponent: V, computedSize: C, conditionalClasses: z, descriptionConditionalClasses: w, searchTerm: x, items: P, staticCategories: se, filteredItems: ee, isSearching: X, displayValue: I, selectedValueItem: te, selectedValueIndex: be, isMultiLevelSelect: ce, flattenedItemsList: ue, isTreePattern: ye, computedOptionRole: de, additionalItemsSelected: T, firstEnabledFilteredItem: H, autocompleteSuggestion: ge, autocompleteSuggestionSuffix: Fe, activeDescendantId: Ce, activeDescendantIndex: Ie, onSearchTermInput: Ee, onClearSelection: we, ariaDescribedBy: Te, listboxRef: ve, visibleDomOptions: Ae, updateVisibleDomOptions: he, openDropdown: De, closeDropdown: Se, toggleDropdown: ke, clickOutsideDropdown: f, clickOutsideDropdownOptions: h, onOptionSelected: D, selectFirstMatchedOption: F, emitShowMoreEvent: G, textboxKeyboardNavigationListeners: Z, listboxKeyboardNavigationListeners: M, listboxListeners: Le, focus: Be, scrollToSelectedOption: qe, BentoDropdownOptionsContainer: Ql, BentoTypography: pe, ErrorMessage: Et, FieldLabel: Ot, BentoTeleport: It, vBentoClickOutsideDirective: Lt, vBentoKeyboardNavigationDirective: $e };
   }
 });
-var Na = function() {
+var $a = function() {
   var e = this, l = e._self._c, t = e._self._setupProxy;
-  return l("div", e._b({ directives: [{ name: "bento-click-outside-directive", rawName: "v-bento-click-outside-directive", value: t.clickOutsideDropdownOptions, expression: "clickOutsideDropdownOptions" }], staticClass: "b-dropdown", class: t.conditionalClasses }, "div", t.getRootAttributes(e.$attrs), !1), [e.label ? l(t.FieldLabel, { attrs: { id: t.labelId, condensed: e.condensed, label: e.label, "tooltip-text": e.tooltipText, optional: e.optional, required: e.required } }) : e._e(), l("div", e._g({ directives: [{ name: "bento-keyboard-navigation-directive", rawName: "v-bento-keyboard-navigation-directive" }], ref: "inputContainerRefWrapper" }, t.textboxKeyboardNavigationListeners), [l(t.computedSize, { ref: "inputContainerRef", tag: "component", attrs: { condensed: e.condensed, value: t.searchTerm, "additional-items-selected": t.additionalItemsSelected, "aria-controls": t.dropdownOptionsContainerId, "aria-active-descendant": t.activeDescendantId, ariaExpanded: t.isDropdownOpen, "aria-labelledby": e.label ? t.labelId : null, "aria-describedby": t.ariaDescribedBy, "aria-label": e.$attrs["aria-label"] ?? e.label ?? t.computedAriaLabelFallbackMessage, "aria-readonly": t.isReadOnly, "aria-required": e.required, readonly: t.isReadOnly, disabled: e.disabled, "display-value": t.displayValue, "dynamic-filtering": e.dynamicFiltering, "has-selected-value": t.cachedSelectedListboxOptions.length > 0, "is-invalid": !!e.errorMessage, multiple: e.multiple, open: t.isDropdownOpen, "selected-value-item": t.isInputComponent ? void 0 : t.selectedValueItem, "show-slot-content-in-multiple": e.showSlotContentInMultiple }, on: { input: t.onSearchTermInput, open: t.toggleDropdown, close: t.toggleDropdown }, scopedSlots: e._u([{ key: "autocomplete-suggestion", fn: function() {
+  return l("div", e._b({ directives: [{ name: "bento-click-outside-directive", rawName: "v-bento-click-outside-directive", value: t.clickOutsideDropdownOptions, expression: "clickOutsideDropdownOptions" }], staticClass: "b-dropdown", class: t.conditionalClasses }, "div", t.getRootAttributes(e.$attrs), !1), [e.label ? l(t.FieldLabel, { attrs: { id: t.labelId, condensed: e.condensed, label: e.label, "tooltip-text": e.tooltipText, optional: e.optional, required: e.required } }) : e._e(), l("div", e._g({ directives: [{ name: "bento-keyboard-navigation-directive", rawName: "v-bento-keyboard-navigation-directive" }], ref: "inputContainerRefWrapper" }, t.textboxKeyboardNavigationListeners), [l(t.computedSize, { ref: "inputContainerRef", tag: "component", attrs: { condensed: e.condensed, value: t.searchTerm, "additional-items-selected": t.additionalItemsSelected, "aria-controls": t.dropdownOptionsContainerId, "aria-active-descendant": t.activeDescendantId, ariaExpanded: t.isDropdownOpen, "aria-labelledby": e.label ? t.labelId : null, "aria-describedby": t.ariaDescribedBy, "aria-label": e.$attrs["aria-label"] ?? e.label ?? t.computedAriaLabelFallbackMessage, "aria-readonly": t.isReadOnly, "aria-required": e.required, clearable: e.clearable && !e.required, readonly: t.isReadOnly, disabled: e.disabled, "display-value": t.displayValue, "dynamic-filtering": e.dynamicFiltering, "has-selected-value": t.cachedSelectedListboxOptions.length > 0, "is-invalid": !!e.errorMessage, multiple: e.multiple, open: t.isDropdownOpen, "selected-value-item": t.isInputComponent ? void 0 : t.selectedValueItem, "show-slot-content-in-multiple": e.showSlotContentInMultiple }, on: { input: t.onSearchTermInput, open: t.toggleDropdown, close: t.toggleDropdown, "clear-selection": t.onClearSelection }, scopedSlots: e._u([{ key: "autocomplete-suggestion", fn: function() {
     return [t.autocompleteSuggestionSuffix ? [l("span", { staticClass: "b-dropdown__autocomplete-hidden-prefix" }, [e._v(e._s(t.searchTerm))]), e._v(e._s(t.autocompleteSuggestionSuffix) + " ")] : e._e()];
   }, proxy: !0 }, e._l(t.slots, function(s, o) {
     return { key: o, fn: function(i) {
@@ -2620,29 +2665,29 @@ var Na = function() {
   })], null, !0) }, t.listboxListeners))], 1) : e._e(), e.errorMessage ? l(t.ErrorMessage, { staticClass: "b-dropdown__error-message", attrs: { id: t.errorId, "error-message": e.errorMessage } }) : e._e(), e.description || t.hasSlot("description") ? l(t.BentoTypography, { staticClass: "b-dropdown__description", class: t.descriptionConditionalClasses, attrs: { id: t.descriptionId, el: "span" } }, [e._t("description", function() {
     return [e._v(" " + e._s(e.description) + " ")];
   })], 2) : e._e()], 1);
-}, $a = [], Pa = /* @__PURE__ */ W(
-  Ma,
+}, Pa = [], Fa = /* @__PURE__ */ q(
   Na,
   $a,
+  Pa,
   !1,
   null,
-  "041b1436"
+  "5ac84d18"
 );
-const ps = Pa.exports;
+const fs = Fa.exports;
 export {
-  ps as B,
-  zt as C,
-  da as D,
-  u as a,
-  ie as b,
-  Ee as c,
-  Fe as d,
-  ot as e,
-  Da as f,
-  nt as g,
-  Ql as h,
-  it as i,
-  We as j,
-  Wl as u
+  fs as B,
+  Gt as C,
+  pa as D,
+  p as a,
+  ne as b,
+  Oe as c,
+  ze as d,
+  nt as e,
+  Ba as f,
+  it as g,
+  ea as h,
+  rt as i,
+  Ke as j,
+  Kl as u
 };
-//# sourceMappingURL=dropdown.CpZQYisR.js.map
+//# sourceMappingURL=dropdown.Dd8RNGXv.js.map