@adyen/bento-vue2 1.103.0 → 1.104.0

package/dist/chunks/{dropdown.Ce2P9MZ-.js → dropdown.D1HNF4S9.js}

@@ -1,111 +1,111 @@
-import { computed as n, ref as L, onMounted as ct, onUnmounted as dt, watch as Q, defineComponent as F, nextTick as Y, toRef as q, useSlots as Se, useAttrs as Pe, toRefs as je, inject as Fe } from "vue";
-import { B as le, d as Me } from "./typography.D1OZJbEa.js";
-import { g as te } from "./generate-uid.DBWe4g6T.js";
-import { u as ae } from "./index.CPOlyau9.js";
-import { s as ne } from "./events.BQOQSSb7.js";
-import { u as He } from "./use-has-slot.C9lQZ6nz.js";
-import { C as ut } from "./cross-circle-fill.DTDtgLMf.js";
-import { C as pt } from "./cross-circle-fill-small.DfxDedRr.js";
-import { n as V } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
-import { C as Je } from "./chevron-down.eYtgv5ly.js";
-import { C as Xe } from "./chevron-up.d8cwIlA_.js";
+import { computed as n, ref as x, onMounted as _t, onUnmounted as gt, watch as ee, defineComponent as z, nextTick as Z, toRef as H, useSlots as he, useAttrs as Ge, toRefs as tt, inject as Ue } from "vue";
+import { B as ue, d as Fe } from "./typography.D1OZJbEa.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 lt } from "./use-has-slot.C9lQZ6nz.js";
+import { C as ht } from "./cross-circle-fill.DTDtgLMf.js";
+import { C as St } from "./cross-circle-fill-small.DfxDedRr.js";
+import { n as W } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import { C as at } from "./chevron-down.eYtgv5ly.js";
+import { C as ot } from "./chevron-up.d8cwIlA_.js";
 /* empty css              */
-import { u as ft } from "./aria-label.CaUURpnB.js";
-import { u as bt } from "./form-field.D_2g7vaP.js";
-import { u as mt } from "./use-form-layout-loading.CWbjZiwP.js";
-import { B as z, a as Te } from "./keyboard-navigation.DWmhelVv.js";
-import { B as Ze } from "./loading-indicator.PxbRzshH.js";
-import { B as Qe } from "./empty-state.fziM-yAC.js";
-import { o as vt } from "./resize.Bqks3WUm.js";
+import { u as xt } from "./aria-label.CaUURpnB.js";
+import { u as Ct } from "./form-field.D_2g7vaP.js";
+import { u as It } from "./use-form-layout-loading.CWbjZiwP.js";
+import { B as U, a as Re } from "./keyboard-navigation.DWmhelVv.js";
+import { B as st } from "./loading-indicator.PxbRzshH.js";
+import { B as nt } from "./empty-state.fziM-yAC.js";
+import { o as Lt } from "./resize.Bqks3WUm.js";
 import "./index.Cl4_42j5.js";
-import { C as Ee, N as yt } from "./minus-small.DJacLGTw.js";
-import { C as _t } from "./checkmark-small.DVDtD4HQ.js";
-import { B as gt } from "./chip.wgEnbEPw.js";
-import { b as we, a as ht, h as St, e as xt } from "./button-actions.CxX7lK7z.js";
-import { B as Ct } from "./directive.D1-d-C2K.js";
-import { F as Lt } from "./field-label.CgdTst2l.js";
-import { E as Ot } from "./error-message.BEHBfjmn.js";
-import { P as Ge } from "./popper-container.D08eTt4B.js";
+import { C as ke, N as Ot } from "./minus-small.DJacLGTw.js";
+import { C as Et } from "./checkmark-small.DVDtD4HQ.js";
+import { B as wt } from "./chip.wgEnbEPw.js";
+import { b as Be, a as Tt, h as At, e as Dt } from "./button-actions.CxX7lK7z.js";
+import { B as kt } from "./directive.D1-d-C2K.js";
+import { F as Bt } from "./field-label.CgdTst2l.js";
+import { E as Rt } from "./error-message.BEHBfjmn.js";
+import { P as He } from "./popper-container.D08eTt4B.js";
 import "../assets/dropdown.css";
-const et = (a, e, l, t) => {
-  const s = n(
+const it = (a, e, l, t) => {
+  const o = 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);
+  ), s = n(() => a.value == null || a.value.length === 0 ? !1 : a.value?.length !== e.value.length);
   return {
-    isAllSelected: s,
-    isIndeterminate: o,
-    toggleSelectAll: (p) => {
-      p ? l() : t();
+    isAllSelected: o,
+    isIndeterminate: s,
+    toggleSelectAll: (b) => {
+      b ? l() : t();
     }
   };
 };
-function It(a, { disabled: e, itemHeight: l, overscan: t = 5, prefixHeight: s }) {
-  const o = L(null), i = L([]), p = L(0), _ = L(0), c = L(0);
+function Mt(a, { disabled: e, itemHeight: l, overscan: t = 5, prefixHeight: o }) {
+  const s = x(null), i = x([]), b = x(0), m = x(0), d = x(0);
   let r;
-  const m = n(() => {
-    const v = typeof l == "number" ? a.value.length * l : a.value.reduce((D, A, w) => D + l(w), 0), I = typeof l == "number" ? p.value * l : a.value.slice(0, p.value).reduce((D, A, w) => D + l(w), 0);
+  const v = n(() => {
+    const h = typeof l == "number" ? a.value.length * l : a.value.reduce((S, T, E) => S + l(E), 0), C = typeof l == "number" ? b.value * l : a.value.slice(0, b.value).reduce((S, T, E) => S + l(E), 0);
     return {
       style: {
-        marginTop: `${I}px`,
-        height: `${v - I}px`
+        marginTop: `${C}px`,
+        height: `${h - C}px`
       }
     };
-  }), u = () => {
-    const v = s?.value ?? 0, I = Math.max(o.value.scrollTop - v, 0);
+  }), c = () => {
+    const h = o?.value ?? 0, C = Math.max(s.value.scrollTop - h, 0);
     if (typeof l == "number")
-      return Math.floor(I / l);
-    let D = 0, A = 0;
-    for (let w = 0; w < a.value.length; w += 1) {
-      const T = l(w);
-      if (D += T, D >= I) {
-        A = w;
+      return Math.floor(C / l);
+    let S = 0, T = 0;
+    for (let E = 0; E < a.value.length; E += 1) {
+      const A = l(E);
+      if (S += A, S >= C) {
+        T = E;
         break;
       }
     }
-    return A;
-  }, b = () => {
-    if (c.value = o.value.clientHeight, typeof l == "number")
-      return Math.ceil(c.value / l);
-    const v = p.value ?? 0;
-    let I = 0, D = 0;
-    for (let A = v; A < a.value.length; A += 1) {
-      const w = l(A);
-      if (I += w, D = A, I > c.value)
+    return T;
+  }, p = () => {
+    if (d.value = s.value.clientHeight, typeof l == "number")
+      return Math.ceil(d.value / l);
+    const h = b.value ?? 0;
+    let C = 0, S = 0;
+    for (let T = h; T < a.value.length; T += 1) {
+      const E = l(T);
+      if (C += E, S = T, C > d.value)
         break;
     }
-    return D - v;
-  }, x = () => {
-    if (o.value) {
-      const v = b();
-      p.value = u(), _.value = Math.min(p.value + v + t, a.value.length), i.value = a.value.slice(p.value, _.value);
+    return S - h;
+  }, _ = () => {
+    if (s.value) {
+      const h = p();
+      b.value = c(), m.value = Math.min(b.value + h + t, a.value.length), i.value = a.value.slice(b.value, m.value);
     }
-  }, g = () => {
-    x();
+  }, O = () => {
+    _();
   };
-  e || (ct(() => {
-    o.value && (c.value = o.value.clientHeight, r = vt(o.value, ({ clientHeight: v }) => {
-      c.value = v, x();
-    }), x());
-  }), dt(() => {
+  e || (_t(() => {
+    s.value && (d.value = s.value.clientHeight, r = Lt(s.value, ({ clientHeight: h }) => {
+      d.value = h, _();
+    }), _());
+  }), gt(() => {
     r?.disconnect();
-  }), Q(
+  }), ee(
     () => a.value,
     () => {
-      x();
+      _();
     }
   ));
-  const M = {
-    ref: o,
+  const w = {
+    ref: s,
     style: { overflowY: "auto" }
-  }, B = (v) => {
-    if (!o.value)
+  }, P = (h) => {
+    if (!s.value)
       return;
-    const I = typeof l == "number" ? v * l : a.value.slice(0, v).reduce((U, h, R) => U + l(R), 0), D = typeof l == "number" ? l : l(v), A = I + D, { scrollTop: w, clientHeight: T } = o.value, G = w + T;
-    A > G ? o.value.scrollTop = T > 0 ? A - T : I : I < w && (o.value.scrollTop = I), x();
+    const C = typeof l == "number" ? h * l : a.value.slice(0, h).reduce((Y, G, L) => Y + l(L), 0), S = typeof l == "number" ? l : l(h), T = C + S, { scrollTop: E, clientHeight: A } = s.value, N = E + A;
+    T > N ? s.value.scrollTop = A > 0 ? T - A : C : C < E && (s.value.scrollTop = C), _();
   };
   return e ? {
-    containerRef: o,
-    containerProps: M,
+    containerRef: s,
+    containerProps: w,
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     onScroll: () => {
     },
@@ -113,22 +113,22 @@ function It(a, { disabled: e, itemHeight: l, overscan: t = 5, prefixHeight: s })
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     scrollToIndex: () => {
     },
-    startIndex: L(0)
+    startIndex: x(0)
   } : {
-    containerRef: o,
-    containerProps: M,
-    onScroll: g,
+    containerRef: s,
+    containerProps: w,
+    onScroll: O,
     list: i,
-    wrapperProps: m,
-    scrollToIndex: B,
-    startIndex: p
+    wrapperProps: v,
+    scrollToIndex: P,
+    startIndex: b
   };
 }
-var d = /* @__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))(d || {}), Z = /* @__PURE__ */ ((a) => (a.AUTOMATIC = "automatic", a.BUTTON = "button", a.NONE = "none", a))(Z || {});
-const Et = F({
+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 || {}), re = /* @__PURE__ */ ((a) => (a.AUTOMATIC = "automatic", a.BUTTON = "button", a.NONE = "none", a))(re || {});
+const Nt = z({
   name: "bento-listbox-static-category",
   components: {
-    BentoTypography: le
+    BentoTypography: ue
   },
   props: {
     /**
@@ -140,20 +140,24 @@ const Et = F({
     }
   }
 });
-var wt = function() {
+var $t = 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);
-}, Tt = [], At = /* @__PURE__ */ V(
-  Et,
-  wt,
-  Tt,
+}, Pt = [], Ft = /* @__PURE__ */ W(
+  Nt,
+  $t,
+  Pt,
   !1,
   null,
   "bfbc1649"
 );
-const kt = At.exports, Dt = F({
+const Vt = Ft.exports, zt = z({
   name: "bento-listbox-option",
   props: {
+    /**
+     * Indicates if the option is active.
+     */
+    active: { type: Boolean, default: !1 },
     /**
      * Setting this property to true will disable the option.
      */
@@ -163,29 +167,30 @@ const kt = At.exports, Dt = F({
      */
     selected: { type: Boolean, default: !1 }
   },
-  emits: [d.CLICK, d.ENTER, d.SPACE, d.TAB],
+  emits: [u.CLICK, u.ENTER, u.SPACE, u.TAB],
   setup(a, { emit: e }) {
     const l = n(() => ({
+      "b-listbox-option--active": a.active,
       "b-listbox-option--disabled": a.disabled,
       "b-listbox-option--selected": a.selected
     }));
     return {
       // Enums
-      BentoKeyboardNavigationKeyDownEvent: z,
-      BentoListboxEvent: d,
+      BentoKeyboardNavigationKeyDownEvent: U,
+      BentoListboxEvent: u,
       // Values
       conditionalClasses: l,
       // Events
-      onClick: (o) => {
-        e(d.CLICK, o);
+      onClick: (s) => {
+        e(u.CLICK, s);
       },
-      onOptionSelected: (o, i) => {
-        e(o, i);
+      onOptionSelected: (s, i) => {
+        e(s, i);
       }
     };
   }
 });
-var Bt = function() {
+var Gt = 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);
@@ -194,40 +199,44 @@ var Bt = 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);
-}, Rt = [], Mt = /* @__PURE__ */ V(
-  Dt,
-  Bt,
-  Rt,
+}, Ut = [], Wt = /* @__PURE__ */ W(
+  zt,
+  Gt,
+  Ut,
   !1,
   null,
-  "c345b6c0"
+  "6722b88d"
 );
-const Ae = Mt.exports;
-let Ue = 0;
-const Nt = {
+const Me = Wt.exports;
+let Je = 0;
+const Kt = {
   beforeCreate() {
-    this.uuid = Ue.toString(), Ue += 1;
+    this.uuid = Je.toString(), Je += 1;
   }
 };
-var $t = function() {
+var qt = function() {
   var e = this, l = e._self._c;
   return 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" } })]);
-}, Pt = [], Ft = /* @__PURE__ */ V(
-  Nt,
-  $t,
-  Pt,
+}, Yt = [], jt = /* @__PURE__ */ W(
+  Kt,
+  qt,
+  Yt,
   !1,
   null,
   null
 );
-const zt = Ft.exports, Vt = F({
+const Ht = jt.exports, Jt = z({
   name: "bento-listbox-single-select-option",
   components: {
-    BentoListboxOption: Ae,
-    BentoTypography: le,
-    CheckmarkIcon: zt
+    BentoListboxOption: Me,
+    BentoTypography: ue,
+    CheckmarkIcon: Ht
   },
   props: {
+    /**
+     * Indicates if the option is active.
+     */
+    active: { type: Boolean, default: !1 },
     /**
      * Setting this property to true will disable the option.
      */
@@ -245,26 +254,26 @@ const zt = Ft.exports, Vt = F({
      */
     selected: { type: Boolean, default: !1 }
   },
-  emits: [d.ENTER, d.SELECT, d.SPACE, d.TAB],
+  emits: [u.ENTER, u.SELECT, u.SPACE, u.TAB],
   setup(a, { emit: e }) {
     const l = (i) => {
       a.disabled || e(i, a.option);
-    }, t = n(() => a.disabled ? !0 : null), s = n(() => a.selected ? !0 : null), o = n(() => a.disabled ? -1 : 0);
+    }, t = n(() => a.disabled ? !0 : null), o = n(() => a.selected ? !0 : null), s = n(() => a.disabled ? -1 : 0);
     return {
       // Values
       ariaDisabled: t,
-      ariaSelected: s,
-      tabIndex: o,
+      ariaSelected: o,
+      tabIndex: s,
       // Enums
-      BentoListboxEvent: d,
+      BentoListboxEvent: u,
       // Events
       onOptionSelected: l
     };
   }
 });
-var Gt = function() {
+var Xt = function() {
   var e = this, l = e._self._c;
-  return e._self._setupProxy, l("bento-listbox-option", { staticClass: "b-listbox-single-select-option", attrs: { disabled: e.disabled, selected: e.selected, "aria-selected": e.ariaSelected, "aria-disabled": e.ariaDisabled, tabindex: e.tabIndex }, on: { click: function(t) {
+  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);
   }, "enter-pressed": function(t) {
     return e.onOptionSelected(e.BentoListboxEvent.ENTER);
@@ -275,86 +284,86 @@ var Gt = 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);
-}, Ut = [], Wt = /* @__PURE__ */ V(
-  Vt,
-  Gt,
-  Ut,
+}, Zt = [], Qt = /* @__PURE__ */ W(
+  Jt,
+  Xt,
+  Zt,
   !1,
   null,
-  "bb14d75a"
+  "232e0377"
 );
-const Kt = Wt.exports, tt = ({ items: a, totalItemCount: e }, l) => {
-  const t = n(() => e?.value ? e.value - 1 : a.value.length - 1), s = L(0), o = (b) => {
-    switch (b) {
+const el = Qt.exports, rt = ({ items: a, totalItemCount: e }, l) => {
+  const t = n(() => e?.value ? e.value - 1 : a.value.length - 1), o = x(0), s = (p) => {
+    switch (p) {
       case "increase":
-        s.value += 1;
+        o.value += 1;
         break;
       case "decrease":
-        s.value -= 1;
+        o.value -= 1;
         break;
     }
-  }, i = ({ edgeCaseItem: b }, x) => {
-    s.value !== b && (o(x), l(s.value));
-  }, p = (b) => {
-    u(b), i(
+  }, i = ({ edgeCaseItem: p }, _) => {
+    o.value !== p && (s(_), l(o.value));
+  }, b = (p) => {
+    c(p), i(
       {
         edgeCaseItem: t.value
       },
       "increase"
       /* INCREASE */
     );
-  }, _ = (b) => {
-    u(b), i(
+  }, m = (p) => {
+    c(p), i(
       {
         edgeCaseItem: 0
       },
       "decrease"
       /* DECREASE */
     );
-  }, c = (b) => {
-    u(b), s.value = 0, l(s.value);
-  }, r = (b) => {
-    u(b), s.value = t.value, l(s.value);
-  }, m = (b) => {
-    s.value = b;
-  }, u = (b) => {
-    b?.detail?.preventDefault(), b?.detail?.stopPropagation();
+  }, d = (p) => {
+    c(p), o.value = 0, l(o.value);
+  }, r = (p) => {
+    c(p), o.value = t.value, l(o.value);
+  }, v = (p) => {
+    o.value = p;
+  }, c = (p) => {
+    p?.detail?.preventDefault(), p?.detail?.stopPropagation();
   };
   return {
-    moveToFirstElement: c,
+    moveToFirstElement: d,
     moveToLastElement: r,
-    moveToNextElement: p,
-    moveToPreviousElement: _,
-    setListboxFocusedIndex: m,
-    preventDefault: u,
-    focusedIndex: s
+    moveToNextElement: b,
+    moveToPreviousElement: m,
+    setListboxFocusedIndex: v,
+    preventDefault: c,
+    focusedIndex: o
   };
-}, ze = (a, e, l = L("option"), t = !0) => {
-  const s = L([]), o = async () => {
+}, We = (a, e, l = x("option"), t = !0) => {
+  const o = x([]), s = 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((p) => p.checkVisibility()) : i;
+    o.value = t ? i.filter((b) => b.checkVisibility()) : i;
   };
-  return Q(
+  return ee(
     e,
     () => {
-      Y(() => {
-        o();
+      Z(() => {
+        s();
       });
     },
     { immediate: !0, deep: !0 }
   ), {
-    visibleDomOptions: s,
-    updateVisibleDomOptions: o
+    visibleDomOptions: o,
+    updateVisibleDomOptions: s
   };
-}, qt = F({
+}, ct = (a, e) => `${a}-option-${encodeURIComponent(String(e))}`, tl = z({
   name: "bento-listbox-single-select",
   components: {
-    BentoListboxSingleSelectCategory: kt,
-    BentoListboxSingleSelectOption: Kt
+    BentoListboxSingleSelectCategory: Vt,
+    BentoListboxSingleSelectOption: el
   },
-  directives: { BentoKeyboardNavigationDirective: Te },
+  directives: { BentoKeyboardNavigationDirective: Re },
   inheritAttrs: !1,
   props: {
     /**
@@ -370,6 +379,10 @@ const Kt = Wt.exports, tt = ({ items: a, totalItemCount: e }, l) => {
       type: Function,
       default: () => !1
     },
+    /**
+     * Identifies the currently active option in the listbox.
+     */
+    activeDescendantId: { type: String, default: null },
     /**
      * The option elements to populate the listbox with.
      * It must be an array of {@see BentoListboxOptionItem }.
@@ -381,6 +394,10 @@ const Kt = Wt.exports, tt = ({ items: a, totalItemCount: e }, l) => {
       type: Array,
       required: !0
     },
+    /**
+     * Prefix used to generate stable option IDs.
+     */
+    optionIdBase: { type: String, required: !0 },
     /**
      * The `input` value.
      * Providing an empty string will select no options.
@@ -408,71 +425,71 @@ const Kt = Wt.exports, tt = ({ items: a, totalItemCount: e }, l) => {
      */
     virtualScrollStartIndex: { type: Number, default: 0 }
   },
-  emits: [d.SELECT, d.ENTER, d.SPACE, d.TAB],
-  setup(a, { emit: e, expose: l, slots: t, attrs: s }) {
-    const o = L(), i = L([]), p = n(() => !!a.selectedValue?.length && a.selectedValue.at(0)), _ = n(
+  emits: [u.SELECT, u.ENTER, u.SPACE, u.TAB],
+  setup(a, { emit: e, expose: l, slots: t, attrs: o }) {
+    const s = x(), i = x([]), b = n(() => !!a.selectedValue?.length && a.selectedValue.at(0)), m = 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-label": o["aria-label"]?.toString(),
+        "aria-busy": o["aria-busy"]?.toString(),
+        "aria-atomic": o["aria-atomic"]?.toString(),
+        "aria-live": o["aria-live"]?.toString()
       })
-    ), c = n(() => !!a.items.some(({ items: h }) => !!h)), r = (h) => (R) => {
-      e(h, [R]);
-    }, { visibleDomOptions: m, updateVisibleDomOptions: u } = ze(
-      o,
-      q(a, "items"),
-      L("option"),
+    ), d = n(() => !!a.items.some(({ items: L }) => !!L)), r = (L) => (I) => {
+      e(L, [I]);
+    }, v = (L) => ct(a.optionIdBase, L.value), { visibleDomOptions: c, updateVisibleDomOptions: p } = We(
+      s,
+      H(a, "items"),
+      x("option"),
       !1
-    ), b = n(() => a.totalItemCount > 0), x = (h) => {
-      if (!b.value)
+    ), _ = n(() => a.totalItemCount > 0), O = (L) => {
+      if (!_.value)
         return;
-      const R = h.target;
-      if (R === o.value || R?.getAttribute("role") !== "option")
+      const I = L.target;
+      if (I === s.value || I?.getAttribute("role") !== "option")
         return;
-      const k = m.value.indexOf(R);
-      if (k !== -1) {
-        const y = k + a.virtualScrollStartIndex;
-        T(y);
+      const R = c.value.indexOf(I);
+      if (R !== -1) {
+        const F = R + a.virtualScrollStartIndex;
+        N(F);
       }
-    }, g = async (h) => {
-      if (b.value && a.scrollToIndex) {
-        a.scrollToIndex(h), await Y(), await u();
-        const R = h - a.virtualScrollStartIndex;
-        m.value[R]?.focus();
+    }, w = async (L) => {
+      if (_.value && a.scrollToIndex) {
+        a.scrollToIndex(L), await Z(), await p();
+        const I = L - a.virtualScrollStartIndex;
+        c.value[I]?.focus();
       } else
-        m.value[h]?.focus();
-    }, M = async (h) => {
-      T(h), await g(h);
-    }, B = (h, R) => {
-      if (!h || !R)
+        c.value[L]?.focus();
+    }, P = async (L) => {
+      N(L), await w(L);
+    }, h = (L, I) => {
+      if (!L || !I)
         return;
-      const k = h.getBoundingClientRect(), y = R, P = y.getBoundingClientRect();
-      k.top < P.top ? y.scrollTop -= P.top - k.top : k.bottom > P.bottom && (y.scrollTop += k.bottom - P.bottom);
-    }, v = async (h, R) => {
-      await u(), b.value && a.scrollToIndex ? a.scrollToIndex(h) : B(m.value[h], R);
+      const R = L.getBoundingClientRect(), F = I, J = F.getBoundingClientRect();
+      R.top < J.top ? F.scrollTop -= J.top - R.top : R.bottom > J.bottom && (F.scrollTop += R.bottom - J.bottom);
+    }, C = async (L, I) => {
+      await p(), _.value && a.scrollToIndex ? a.scrollToIndex(L) : h(c.value[L], I);
     }, {
-      moveToNextElement: I,
-      moveToPreviousElement: D,
-      moveToFirstElement: A,
-      moveToLastElement: w,
-      setListboxFocusedIndex: T
-    } = tt(
+      moveToNextElement: S,
+      moveToPreviousElement: T,
+      moveToFirstElement: E,
+      moveToLastElement: A,
+      setListboxFocusedIndex: N
+    } = rt(
       {
-        items: m,
-        totalItemCount: q(a, "totalItemCount")
+        items: c,
+        totalItemCount: H(a, "totalItemCount")
       },
-      g
-    ), G = {
-      [z.ARROW_UP]: D,
-      [z.ARROW_DOWN]: I,
-      [z.HOME]: A,
-      [z.END]: w
-    }, U = {
-      [d.SELECT]: r(d.SELECT),
-      [d.SPACE]: r(d.SPACE),
-      [d.TAB]: r(d.TAB),
-      [d.ENTER]: r(d.ENTER)
+      w
+    ), Y = {
+      [U.ARROW_UP]: T,
+      [U.ARROW_DOWN]: S,
+      [U.HOME]: E,
+      [U.END]: A
+    }, G = {
+      [u.SELECT]: r(u.SELECT),
+      [u.SPACE]: r(u.SPACE),
+      [u.TAB]: r(u.TAB),
+      [u.ENTER]: r(u.ENTER)
     };
     return l({
       /**
@@ -484,87 +501,88 @@ const Kt = Wt.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: T,
+      setListboxFocusedIndex: N,
       /**
        * Navigates to an item by global index, handling virtual scroll if enabled.
        * Scrolls the virtual list and focuses the item.
        */
-      navigateToItem: M,
+      navigateToItem: P,
       /**
        * 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: v
+      scrollToItem: C
     }), {
       // Enums
-      BentoListboxEvent: d,
+      BentoListboxEvent: u,
       // Values
-      listboxRef: o,
+      listboxRef: s,
       listboxItemRef: i,
-      selectedItem: p,
+      selectedItem: b,
       slots: t,
-      ariaAttributes: _,
+      ariaAttributes: m,
+      getOptionId: v,
       // Computed
-      hasCategories: c,
+      hasCategories: d,
       // Methods
       onOptionSelected: r,
       // Keyboard navigation
-      listboxListeners: G,
-      listboxOptionListeners: U,
+      listboxListeners: Y,
+      listboxOptionListeners: G,
       // Virtual scroll focus management
-      handleVirtualScrollingFocus: x
+      handleVirtualScrollingFocus: O
     };
   }
 });
-var Yt = function() {
+var ll = 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: { role: "option", 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(p) {
-          return [e._t(i, null, null, p)];
+    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(o) {
+      return l("bento-listbox-single-select-option", e._g({ key: o.value, ref: "listboxItemRef", refInFor: !0, attrs: { id: e.getOptionId(o), role: "option", active: e.activeDescendantId === e.getOptionId(o), option: o, disabled: e.isOptionDisabled ? e.isOptionDisabled(o) : null, selected: o.value === e.selectedItem.value }, scopedSlots: e._u([e._l(e.slots, function(s, i) {
+        return { key: i, fn: function(b) {
+          return [e._t(i, null, null, b)];
         } };
       })], null, !0) }, e.listboxOptionListeners));
-    }), 1) : l("bento-listbox-single-select-option", e._g({ key: `option-${t.value}`, ref: "listboxItemRef", refInFor: !0, attrs: { role: "option", 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) {
-      return { key: o, fn: function(i) {
-        return [e._t(o, null, null, i)];
+    }), 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(o, s) {
+      return { key: s, fn: function(i) {
+        return [e._t(s, null, null, i)];
       } };
     })], null, !0) }, e.listboxOptionListeners))];
   })] : e._l(e.items, function(t) {
-    return l("bento-listbox-single-select-option", e._g({ key: t.value, ref: "listboxItemRef", refInFor: !0, attrs: { role: "option", 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) {
-      return { key: o, fn: function(i) {
-        return [e._t(o, null, null, i)];
+    return l("bento-listbox-single-select-option", e._g({ key: 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(o, s) {
+      return { key: s, fn: function(i) {
+        return [e._t(s, null, null, i)];
       } };
     })], null, !0) }, e.listboxOptionListeners));
   })], 2);
-}, jt = [], Ht = /* @__PURE__ */ V(
-  qt,
-  Yt,
-  jt,
+}, al = [], ol = /* @__PURE__ */ W(
+  tl,
+  ll,
+  al,
   !1,
   null,
   null
 );
-const Jt = Ht.exports;
-let We = 0;
-const Xt = {
+const sl = ol.exports;
+let Xe = 0;
+const nl = {
   beforeCreate() {
-    this.uuid = We.toString(), We += 1;
+    this.uuid = Xe.toString(), Xe += 1;
   }
 };
-var Zt = function() {
+var il = function() {
   var e = this, l = e._self._c;
   return 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" } })]);
-}, Qt = [], el = /* @__PURE__ */ V(
-  Xt,
-  Zt,
-  Qt,
+}, rl = [], cl = /* @__PURE__ */ W(
+  nl,
+  il,
+  rl,
   !1,
   null,
   null
 );
-const tl = el.exports, ll = {}, al = /* @__PURE__ */ F({
-  ...ll,
+const ul = cl.exports, dl = {}, pl = /* @__PURE__ */ z({
+  ...dl,
   __name: "decorative-checkbox",
   props: {
     disabled: { type: Boolean, default: !1 },
@@ -574,29 +592,29 @@ const tl = el.exports, ll = {}, al = /* @__PURE__ */ F({
   },
   setup(a) {
     const e = a, l = n(() => ({
-      [`b-checkbox-input--${Ee.DISABLED}`]: e.disabled
+      [`b-checkbox-input--${ke.DISABLED}`]: e.disabled
     })), t = n(() => ({
-      [`b-checkbox-input__outline--${Ee.UNCHECKED}`]: !e.checked && !e.indeterminate && !e.allSelected,
-      [`b-checkbox-input__outline--${Ee.CHECKED}`]: (e.checked || e.allSelected) && !e.indeterminate,
-      [`b-checkbox-input__outline--${Ee.INDETERMINATE}`]: e.indeterminate
+      [`b-checkbox-input__outline--${ke.UNCHECKED}`]: !e.checked && !e.indeterminate && !e.allSelected,
+      [`b-checkbox-input__outline--${ke.CHECKED}`]: (e.checked || e.allSelected) && !e.indeterminate,
+      [`b-checkbox-input__outline--${ke.INDETERMINATE}`]: e.indeterminate
     }));
-    return { __sfc: !0, props: e, conditionalClasses: l, outlineConditionalClasses: t, CheckmarkSmallIcon: _t, MinusSmallIcon: yt, DoubleCheckmarkSmallIcon: tl };
+    return { __sfc: !0, props: e, conditionalClasses: l, outlineConditionalClasses: t, CheckmarkSmallIcon: Et, MinusSmallIcon: Ot, DoubleCheckmarkSmallIcon: ul };
   }
 });
-var sl = function() {
+var fl = 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);
-}, ol = [], nl = /* @__PURE__ */ V(
-  al,
-  sl,
-  ol,
+}, bl = [], vl = /* @__PURE__ */ W(
+  pl,
+  fl,
+  bl,
   !1,
   null,
   "b87bbaf9"
 );
-const Ve = nl.exports;
-var lt = /* @__PURE__ */ ((a) => (a.DISABLED = "disabled", a.STATIC_CATEGORY = "static-category", a))(lt || {}), oe = /* @__PURE__ */ ((a) => (a.SELECT_CATEGORY = "select-category", a.UNSELECT_CATEGORY = "unselect-category", a.TOGGLE_CATEGORY_VISIBILITY = "toggle-category-visibility", a))(oe || {});
-const il = {
+const Ke = vl.exports;
+var ut = /* @__PURE__ */ ((a) => (a.DISABLED = "disabled", a.STATIC_CATEGORY = "static-category", a))(ut || {}), fe = /* @__PURE__ */ ((a) => (a.SELECT_CATEGORY = "select-category", a.UNSELECT_CATEGORY = "unselect-category", a.TOGGLE_CATEGORY_VISIBILITY = "toggle-category-visibility", a))(fe || {});
+const ml = {
   "de-DE": { loading: "Laden", showMore: "Mehr anzeigen" },
   "en-GB": { loading: "Loading", showMore: "Show more" },
   "en-US": { loading: "Loading", showMore: "Show more" },
@@ -608,11 +626,11 @@ const il = {
   "ja-JP": { loading: "読み込み中", showMore: "さらに表示" },
   "pt-BR": { loading: "Carregando", showMore: "Mostrar mais" },
   "zh-CN": { loading: "正在加载", showMore: "显示更多" }
-}, rl = {
+}, yl = {
   name: "listbox-lazy-load",
-  i18n: { messages: il }
-}, cl = /* @__PURE__ */ F({
-  ...rl,
+  i18n: { messages: ml }
+}, _l = /* @__PURE__ */ z({
+  ...yl,
   props: {
     condensed: { type: Boolean, default: !1 },
     hasMoreItems: { type: Boolean, default: !1 },
@@ -622,28 +640,28 @@ const il = {
   },
   emits: ["show-more"],
   setup(a) {
-    const e = a, { t: l } = ae(), t = n(
-      () => e.type === Z.BUTTON && e.hasMoreItems
-    ), s = n(
-      () => e.loading ? we.LOADING : we.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: ht };
+    const e = a, { t: l } = de(), t = n(
+      () => e.type === re.BUTTON && e.hasMoreItems
+    ), o = n(
+      () => e.loading ? Be.LOADING : Be.START
+    ), s = n(() => e.loading ? l("loading") : l("showMore"));
+    return { __sfc: !0, t: l, props: e, shouldDisplayShowMoreButton: t, loadingButtonState: o, showMoreButtonText: s, BentoLoadingIndicator: st, BentoLoadingButton: Tt };
   }
 });
-var dl = function() {
+var gl = 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 e.$emit("show-more", s);
+  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(o) {
+    return e.$emit("show-more", o);
   } } }, [e._v(" " + e._s(t.showMoreButtonText) + " ")]) : e.loading ? l(t.BentoLoadingIndicator) : e._e()], 1) : e._e();
-}, ul = [], pl = /* @__PURE__ */ V(
-  cl,
-  dl,
-  ul,
+}, hl = [], Sl = /* @__PURE__ */ W(
+  _l,
+  gl,
+  hl,
   !1,
   null,
   "d86387ad"
 );
-const at = pl.exports, fl = {
+const dt = Sl.exports, xl = {
   "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." },
@@ -654,27 +672,27 @@ const at = pl.exports, fl = {
   "ja-JP": { thereWasAnErrorLoadingNewItems: "新しいアイテムの読み込みにエラーが発生しました。" },
   "pt-BR": { thereWasAnErrorLoadingNewItems: "Ocorreu um erro ao carregar novos itens." },
   "zh-CN": { thereWasAnErrorLoadingNewItems: "加载新项目时出错。" }
-}, bl = {
+}, Cl = {
   name: "listbox-multi-select-nested-lazy-load",
-  i18n: { messages: fl }
-}, ml = /* @__PURE__ */ F({
-  ...bl,
+  i18n: { messages: xl }
+}, Il = /* @__PURE__ */ z({
+  ...Cl,
   props: {
     index: null,
     option: null
   },
   setup(a, { expose: e }) {
-    const l = a, t = L(!1), s = L(!1), { t: o } = ae();
-    async function i(p) {
-      if (p.stopImmediatePropagation(), !t.value) {
-        s.value = !1, t.value = !0;
+    const l = a, t = x(!1), o = x(!1), { t: s } = de();
+    async function i(b) {
+      if (b.stopImmediatePropagation(), !t.value) {
+        o.value = !1, t.value = !0;
         try {
           await l.option.lazyLoad?.lazyLoadEvent({
             value: l.option.value,
             index: l.index
           });
         } catch {
-          s.value = !0;
+          o.value = !0;
         }
         t.value = !1;
       }
@@ -684,25 +702,25 @@ const at = pl.exports, fl = {
        * Trigger the lazy load event programmatically.
        */
       showMore: i
-    }), { __sfc: !0, loading: t, failedAndRetry: s, t: o, props: l, showMore: i, BentoEmptyState: Qe, BentoListboxLazyLoad: at };
+    }), { __sfc: !0, loading: t, failedAndRetry: o, t: s, props: l, showMore: i, BentoEmptyState: nt, BentoListboxLazyLoad: dt };
   }
 });
-var vl = function() {
+var Ll = 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 !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));
+  return l("div", { attrs: { role: "treeitem", tabindex: 0 }, on: { keydown: [function(o) {
+    return !o.type.indexOf("key") && e._k(o.keyCode, "enter", 13, o.key, "Enter") ? null : (o.preventDefault(), t.showMore.apply(null, arguments));
+  }, function(o) {
+    return !o.type.indexOf("key") && e._k(o.keyCode, "space", 32, o.key, [" ", "Spacebar"]) ? null : (o.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 = [], _l = /* @__PURE__ */ V(
-  ml,
-  vl,
-  yl,
+}, Ol = [], El = /* @__PURE__ */ W(
+  Il,
+  Ll,
+  Ol,
   !1,
   null,
   "b7c84651"
 );
-const gl = _l.exports, hl = {
+const wl = El.exports, Tl = {
   "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" },
@@ -714,16 +732,16 @@ const gl = _l.exports, hl = {
   "ja-JP": { categoryClosed: "{category}を閉じました", categoryOpened: "{category}を開きました" },
   "pt-BR": { categoryClosed: "{category} fechada", categoryOpened: "{categoria} aberta" },
   "zh-CN": { categoryClosed: "{category} 已关闭", categoryOpened: "{category} 已打开" }
-}, Sl = F({
-  i18n: { messages: hl },
+}, Al = z({
+  i18n: { messages: Tl },
   name: "bento-listbox-multi-select-category",
   components: {
-    BentoTypography: le,
-    BentoListboxOption: Ae,
-    BentoListboxMultiSelectNestedLazyLoad: gl,
-    ChevronDownIcon: Je,
-    ChevronUpIcon: Xe,
-    DecorativeCheckbox: Ve
+    BentoTypography: ue,
+    BentoListboxOption: Me,
+    BentoListboxMultiSelectNestedLazyLoad: wl,
+    ChevronDownIcon: at,
+    ChevronUpIcon: ot,
+    DecorativeCheckbox: Ke
   },
   props: {
     /**
@@ -776,67 +794,67 @@ const gl = _l.exports, hl = {
     tabindex: { type: Number, default: -1 }
   },
   emits: [
-    oe.SELECT_CATEGORY,
-    oe.UNSELECT_CATEGORY,
-    oe.TOGGLE_CATEGORY_VISIBILITY
+    fe.SELECT_CATEGORY,
+    fe.UNSELECT_CATEGORY,
+    fe.TOGGLE_CATEGORY_VISIBILITY
   ],
   setup(a, { emit: e }) {
-    const l = L(!1), { t } = ae(), s = te("category-group"), o = te("category-name"), i = L(null), p = (k) => a.isOptionDisabled ? a.isOptionDisabled(k) : !1, _ = n(() => a.category.lazyLoad && a.category.items?.length === 0 ? !1 : a.category.items.every((k) => p(k))), c = q(a, "staticCategories"), r = n(() => l.value || a.staticCategories), m = n(() => ({
-      [`b-listbox-multi-select-category--${lt.DISABLED}`]: _.value
-    })), u = (k, y) => {
-      k.preventDefault(), a.category.lazyLoad && a.category.items?.length === 0 && i.value.showMore(k), l.value = y !== void 0 ? y : !l.value, e(oe.TOGGLE_CATEGORY_VISIBILITY, a.category.value);
-    }, b = (k) => {
-      const y = p(k), P = a.selectedItemsList?.includes(k.value) || !1;
-      return { isDisabled: y, isPreSelected: P };
-    }, x = n(
-      () => a.category.items.filter((k) => {
-        const { isDisabled: y, isPreSelected: P } = b(k);
-        return y && P || !y;
+    const l = x(!1), { t } = de(), o = ce("category-group"), s = ce("category-name"), i = x(null), b = (I) => a.isOptionDisabled ? a.isOptionDisabled(I) : !1, m = n(() => a.category.lazyLoad && a.category.items?.length === 0 ? !1 : a.category.items.every((I) => b(I))), d = H(a, "staticCategories"), r = n(() => l.value || a.staticCategories), v = n(() => ({
+      [`b-listbox-multi-select-category--${ut.DISABLED}`]: m.value
+    })), c = (I, R) => {
+      I.preventDefault(), a.category.lazyLoad && a.category.items?.length === 0 && i.value.showMore(I), l.value = R !== void 0 ? R : !l.value, e(fe.TOGGLE_CATEGORY_VISIBILITY, a.category.value);
+    }, p = (I) => {
+      const R = b(I), F = a.selectedItemsList?.includes(I.value) || !1;
+      return { isDisabled: R, isPreSelected: F };
+    }, _ = n(
+      () => a.category.items.filter((I) => {
+        const { isDisabled: R, isPreSelected: F } = p(I);
+        return R && F || !R;
       })
-    ), g = n(
-      () => x.value?.filter(({ value: k }) => a.selectedItemsList?.includes(k))
-    ), M = n(() => {
-      const k = l.value ? "categoryOpened" : "categoryClosed";
-      return t(k, { category: a.category.label });
-    }), B = () => {
-      e(oe.SELECT_CATEGORY);
-    }, v = () => {
-      e(oe.UNSELECT_CATEGORY);
-    }, I = n(
+    ), O = n(
+      () => _.value?.filter(({ value: I }) => a.selectedItemsList?.includes(I))
+    ), w = n(() => {
+      const I = l.value ? "categoryOpened" : "categoryClosed";
+      return t(I, { category: a.category.label });
+    }), P = () => {
+      e(fe.SELECT_CATEGORY);
+    }, h = () => {
+      e(fe.UNSELECT_CATEGORY);
+    }, C = n(
       () => !!a.category.lazyLoad && a.selectedItemsList.includes(a.category.value)
     ), {
-      isAllSelected: D,
-      isIndeterminate: A,
-      toggleSelectAll: w
-    } = et(g, x, B, v), T = n(() => I.value || D.value), G = n(() => !I.value && A.value), U = n(() => G.value ? "mixed" : `${T.value}`), h = L(T.value), R = () => {
-      h.value = !h.value, w(h.value);
+      isAllSelected: S,
+      isIndeterminate: T,
+      toggleSelectAll: E
+    } = it(O, _, P, h), A = n(() => C.value || S.value), N = n(() => !C.value && T.value), Y = n(() => N.value ? "mixed" : `${A.value}`), G = x(A.value), L = () => {
+      G.value = !G.value, E(G.value);
     };
-    return Q(T, () => {
-      h.value = T.value;
+    return ee(A, () => {
+      G.value = A.value;
     }), {
       // Refs
       lazyLoadRef: i,
       // Values
-      chevronTitle: M,
-      conditionalClass: m,
-      hasAllPropsDisabled: _,
+      chevronTitle: w,
+      conditionalClass: v,
+      hasAllPropsDisabled: m,
       isOpen: l,
-      isAllSelected: T,
-      isIndeterminate: G,
-      isStaticCategory: c,
-      categoryGroupId: s,
-      categoryNameId: o,
+      isAllSelected: A,
+      isIndeterminate: N,
+      isStaticCategory: d,
+      categoryGroupId: o,
+      categoryNameId: s,
       // Computed
       showItemChildren: r,
-      ariaCheckedComputed: U,
+      ariaCheckedComputed: Y,
       // Methods
-      handleSelectAll: R,
-      toggleOpen: u,
-      toggleSelectAll: w
+      handleSelectAll: L,
+      toggleOpen: c,
+      toggleSelectAll: E
     };
   }
 });
-var xl = function() {
+var Dl = 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);
@@ -847,23 +865,23 @@ var xl = function() {
   }] } }, [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);
-}, Cl = [], Ll = /* @__PURE__ */ V(
-  Sl,
-  xl,
-  Cl,
+}, kl = [], Bl = /* @__PURE__ */ W(
+  Al,
+  Dl,
+  kl,
   !1,
   null,
   "b493449e"
 );
-const Ol = Ll.exports;
-var X = /* @__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))(X || {});
-const Il = F({
+const Rl = Bl.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 Ml = z({
   name: "listbox-multi-select-options",
   components: {
-    BentoListboxOption: Ae,
-    BentoTypography: le,
-    ListboxMultiSelectCategory: Ol,
-    DecorativeCheckbox: Ve
+    BentoListboxOption: Me,
+    BentoTypography: ue,
+    ListboxMultiSelectCategory: Rl,
+    DecorativeCheckbox: Ke
   },
   inheritAttrs: !1,
   props: {
@@ -940,30 +958,30 @@ const Il = F({
     }
   },
   emits: [
-    X.TOGGLE_CHECKBOX_SELECTION,
-    X.SELECT_CATEGORY,
-    X.UNSELECT_CATEGORY,
-    X.TOGGLE_CATEGORY_VISIBILITY
+    ie.TOGGLE_CHECKBOX_SELECTION,
+    ie.SELECT_CATEGORY,
+    ie.UNSELECT_CATEGORY,
+    ie.TOGGLE_CATEGORY_VISIBILITY
   ],
   setup(a, { emit: e }) {
-    const l = (c) => {
-      a.isOptionDisabled(c) || e(X.TOGGLE_CHECKBOX_SELECTION, c);
-    }, t = (c) => !!c.items, s = (c) => {
+    const l = (d) => {
+      a.isOptionDisabled(d) || e(ie.TOGGLE_CHECKBOX_SELECTION, d);
+    }, t = (d) => !!d.items, o = (d) => {
       const r = a.isMultiLevel && a.searching;
-      return c.description && (!a.isMultiLevel || r);
-    }, o = (c) => {
+      return d.description && (!a.isMultiLevel || r);
+    }, s = (d) => {
       const r = !!a.parentCategory?.lazyLoad && a.selectedItemsList.includes(a.parentCategory.value);
-      if (c.items) {
-        const m = !!c.lazyLoad && a.selectedItemsList.includes(c.value);
-        return r || m || !!c.items.find((u) => a.selectedItemsList.includes(u.value));
+      if (d.items) {
+        const v = !!d.lazyLoad && a.selectedItemsList.includes(d.value);
+        return r || v || !!d.items.find((c) => a.selectedItemsList.includes(c.value));
       }
-      return r || a.selectedItemsList.includes(c.value);
-    }, i = (c) => {
-      if (t(c)) {
-        const r = o(c) ? X.UNSELECT_CATEGORY : X.SELECT_CATEGORY;
-        e(r, c);
+      return r || a.selectedItemsList.includes(d.value);
+    }, i = (d) => {
+      if (t(d)) {
+        const r = s(d) ? ie.UNSELECT_CATEGORY : ie.SELECT_CATEGORY;
+        e(r, d);
       } else
-        l(c);
+        l(d);
     };
     return {
       // Values
@@ -972,59 +990,59 @@ const Il = F({
         "b-listbox-multi-select-options__category-option": a.categoryItems
       })),
       // Methods
-      isOptionSelected: o,
-      shouldShowDescription: s,
+      isOptionSelected: s,
+      shouldShowDescription: o,
       toggleCheckboxSelection: l,
       toggleSearchOption: i,
-      computedTabindex: (c) => a.itemsIndex[c] === a.focusedIndex ? 0 : -1,
+      computedTabindex: (d) => a.itemsIndex[d] === a.focusedIndex ? 0 : -1,
       // Enums
-      BentoListboxEvent: d,
-      ListboxMultiSelectOptionsEvent: X
+      BentoListboxEvent: u,
+      ListboxMultiSelectOptionsEvent: ie
     };
   }
 });
-var El = function() {
+var Nl = 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) {
+    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(o) {
       return e.toggleSearchOption(t);
-    }, "enter-pressed": function(s) {
+    }, "enter-pressed": function(o) {
       return e.toggleSearchOption(t);
-    }, "space-pressed": function(s) {
-      return s.preventDefault(), e.toggleSearchOption(t);
+    }, "space-pressed": function(o) {
+      return o.preventDefault(), e.toggleSearchOption(t);
     } } }, [l("decorative-checkbox", { attrs: { disabled: e.isOptionDisabled ? e.isOptionDisabled(t) : null, checked: e.isOptionSelected(t) } }), e._t("default", 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)] : [t.items ? [l("listbox-multi-select-category", { attrs: { category: t, "static-categories": e.staticCategories, "is-option-disabled": e.isOptionDisabled, "selected-items-list": e.selectedItemsList, "option-index": e.itemsIndex[t.value], tabindex: e.computedTabindex(t.value) }, on: { "select-category": function(s) {
+    }, null, t)], 2)] : [t.items ? [l("listbox-multi-select-category", { attrs: { category: t, "static-categories": e.staticCategories, "is-option-disabled": e.isOptionDisabled, "selected-items-list": e.selectedItemsList, "option-index": e.itemsIndex[t.value], tabindex: e.computedTabindex(t.value) }, on: { "select-category": function(o) {
       return e.$emit(e.ListboxMultiSelectOptionsEvent.SELECT_CATEGORY, t);
-    }, "unselect-category": function(s) {
+    }, "unselect-category": function(o) {
       return e.$emit(e.ListboxMultiSelectOptionsEvent.UNSELECT_CATEGORY, t);
-    }, "toggle-category-visibility": function(s) {
-      return e.$emit(e.ListboxMultiSelectOptionsEvent.TOGGLE_CATEGORY_VISIBILITY, s);
-    } } }, [l("listbox-multi-select-options", { attrs: { "category-items": "", items: t.items, "is-option-disabled": e.isOptionDisabled, "items-index": e.itemsIndex, "focused-index": e.focusedIndex, "is-multi-level": e.isMultiLevel, "static-categories": e.staticCategories, "selected-items-list": e.selectedItemsList, searching: e.searching, "parent-category": t, role: e.$attrs.role || "option" }, on: { "toggle-checkbox-selection": (s) => e.toggleCheckboxSelection(s) } })], 1)] : 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) {
+    }, "toggle-category-visibility": function(o) {
+      return e.$emit(e.ListboxMultiSelectOptionsEvent.TOGGLE_CATEGORY_VISIBILITY, o);
+    } } }, [l("listbox-multi-select-options", { attrs: { "category-items": "", items: t.items, "is-option-disabled": e.isOptionDisabled, "items-index": e.itemsIndex, "focused-index": e.focusedIndex, "is-multi-level": e.isMultiLevel, "static-categories": e.staticCategories, "selected-items-list": e.selectedItemsList, searching: e.searching, "parent-category": t, role: e.$attrs.role || "option" }, on: { "toggle-checkbox-selection": (o) => e.toggleCheckboxSelection(o) } })], 1)] : 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(o) {
       return e.toggleCheckboxSelection(t);
-    }, "enter-pressed": function(s) {
+    }, "enter-pressed": function(o) {
       return e.toggleCheckboxSelection(t);
-    }, "space-pressed": function(s) {
-      return s.preventDefault(), e.toggleCheckboxSelection(t);
+    }, "space-pressed": function(o) {
+      return o.preventDefault(), e.toggleCheckboxSelection(t);
     } } }, [l("decorative-checkbox", { attrs: { disabled: e.isOptionDisabled ? e.isOptionDisabled(t) : null, checked: e.isOptionSelected(t) } }), e._t("default", 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);
-}, wl = [], Tl = /* @__PURE__ */ V(
-  Il,
-  El,
-  wl,
+}, $l = [], Pl = /* @__PURE__ */ W(
+  Ml,
+  Nl,
+  $l,
   !1,
   null,
   "1cf47b26"
 );
-const Al = Tl.exports, st = (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);
+const Fl = Pl.exports, pt = (a) => {
+  const e = n(() => !!a.value?.find(({ items: t }) => !!t)), l = n(() => e.value ? a.value?.reduce((t, o) => (o.items ? t.push(...o.items.flat()) : t.push(o), t), []) : a.value);
   return {
     isMultiLevelSelect: e,
     flattenedItemsList: l
   };
-}, kl = {
+}, Vl = {
   "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})" },
@@ -1036,8 +1054,8 @@ const Al = Tl.exports, st = (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}）个" }
-}, Dl = { i18n: { messages: kl } }, Bl = /* @__PURE__ */ F({
-  ...Dl,
+}, zl = { i18n: { messages: Vl } }, Gl = /* @__PURE__ */ z({
+  ...zl,
   __name: "listbox-multi-select",
   props: {
     hasMoreItems: { type: Boolean, default: !1 },
@@ -1050,206 +1068,210 @@ const Al = Tl.exports, st = (a) => {
   },
   emits: ["select"],
   setup(a, { expose: e, emit: l }) {
-    const t = a, { t: s, n: o } = ae(), i = Se(), p = Pe(), _ = n(
+    const t = a, { t: o, n: s } = de(), i = he(), b = Ge(), m = n(
       () => ({
-        "aria-label": p["aria-label"]?.toString(),
-        "aria-busy": p["aria-busy"]?.toString(),
-        "aria-atomic": p["aria-atomic"]?.toString(),
-        "aria-live": p["aria-live"]?.toString(),
+        "aria-label": b["aria-label"]?.toString(),
+        "aria-busy": b["aria-busy"]?.toString(),
+        "aria-atomic": b["aria-atomic"]?.toString(),
+        "aria-live": b["aria-live"]?.toString(),
         "aria-multiselectable": !0
       })
-    ), c = L(null), r = L(null), m = L(null), u = L(null), b = n(() => t.selectedValues.map(({ value: f }) => f)), { isMultiLevelSelect: x, flattenedItemsList: g } = st(q(t, "items")), M = n(() => t.items.some((f) => f.items && f.lazyLoad)), B = n(() => x.value ? t.items.reduce((f, S) => (S.items ? S.lazyLoad ? f.push(S) : f.push(...S.items) : f.push(S), f), []) : t.items), v = n(() => x.value && !t.staticCategories), I = n(() => v.value ? "tree" : "listbox"), D = n(() => v.value ? "treeitem" : "option"), A = (f) => {
-      const S = t.isOptionDisabled(f), E = b.value?.includes(f.value) || !1;
-      return { isDisabled: S, isPreSelected: E };
-    }, w = n(() => {
-      if (t.searching && x)
+    ), d = x(null), r = x(null), v = x(null), c = x(null), p = n(() => t.selectedValues.map(({ value: f }) => f)), { isMultiLevelSelect: _, flattenedItemsList: O } = pt(H(t, "items")), w = n(() => t.items.some((f) => f.items && f.lazyLoad)), P = n(() => _.value ? t.items.reduce((f, g) => (g.items ? g.lazyLoad ? f.push(g) : f.push(...g.items) : f.push(g), f), []) : t.items), h = n(() => _.value && !t.staticCategories), C = n(() => h.value ? "tree" : "listbox"), S = n(() => h.value ? "treeitem" : "option"), T = (f) => {
+      const g = t.isOptionDisabled(f), k = p.value?.includes(f.value) || !1;
+      return { isDisabled: g, isPreSelected: k };
+    }, E = n(() => {
+      if (t.searching && _)
         return t.items;
-      const f = B.value.filter((S) => {
-        if (S.lazyLoad)
+      const f = P.value.filter((g) => {
+        if (g.lazyLoad)
           return !0;
-        const { isDisabled: E, isPreSelected: N } = A(S);
-        return E && N || !E;
+        const { isDisabled: k, isPreSelected: $ } = T(g);
+        return k && $ || !k;
       });
-      return t.selectedValues.forEach((S) => {
-        f.find((E) => E.value === S.value) || f.push(S);
+      return t.selectedValues.forEach((g) => {
+        f.find((k) => k.value === g.value) || f.push(g);
       }), f;
-    }), T = n(
-      () => w.value?.filter((f) => b.value?.includes(f.value))
-    ), G = () => x.value && !t.searching ? g.value.length : t.items.length, U = n(() => {
-      const f = w.value.length, S = G(), E = T.value?.length || 0;
-      return E === 0 ? s("selectAll", { total: o(f) }) : E === S ? s("allSelected", { total: o(S) }) : E <= S ? s("numberOfTotalSelected", { number: o(E), total: o(S) }) : s("numbersSelected", { number: o(E) });
-    }), h = (f) => {
-      const S = (N) => {
-        const { isDisabled: C, isPreSelected: $ } = A(N);
-        return C && $ || !C;
-      }, E = f.filter(S).filter((N) => !b.value.includes(N.value));
-      l("select", [...t.selectedValues, ...E]);
-    }, R = (f) => {
-      const S = (C) => {
-        const { isDisabled: $, isPreSelected: O } = A(C);
-        return !($ && O);
-      }, E = f.filter(S).map(({ value: C }) => C), N = t.selectedValues.filter((C) => !E?.includes(C.value));
-      l("select", N);
-    }, k = () => {
-      h(g.value);
-    }, y = () => {
-      R(g.value);
-    }, { isAllSelected: P, isIndeterminate: ie, toggleSelectAll: K } = et(
-      T,
-      w,
-      k,
-      y
-    ), j = n(() => ie.value ? "mixed" : `${P.value}`), ee = L(P.value), re = () => {
-      ee.value = !ee.value, K(ee.value);
+    }), A = n(
+      () => E.value?.filter((f) => p.value?.includes(f.value))
+    ), N = () => _.value && !t.searching ? O.value.length : t.items.length, Y = n(() => {
+      const f = E.value.length, g = N(), k = A.value?.length || 0;
+      return k === 0 ? o("selectAll", { total: s(f) }) : k === g ? o("allSelected", { total: s(g) }) : k <= g ? o("numberOfTotalSelected", { number: s(k), total: s(g) }) : o("numbersSelected", { number: s(k) });
+    }), G = (f) => {
+      const g = ($) => {
+        const { isDisabled: V, isPreSelected: j } = T($);
+        return V && j || !V;
+      }, k = f.filter(g).filter(($) => !p.value.includes($.value));
+      l("select", [...t.selectedValues, ...k]);
+    }, L = (f) => {
+      const g = (V) => {
+        const { isDisabled: j, isPreSelected: B } = T(V);
+        return !(j && B);
+      }, k = f.filter(g).map(({ value: V }) => V), $ = t.selectedValues.filter((V) => !k?.includes(V.value));
+      l("select", $);
+    }, I = () => {
+      G(O.value);
+    }, R = () => {
+      L(O.value);
+    }, { isAllSelected: F, isIndeterminate: J, toggleSelectAll: X } = it(
+      A,
+      E,
+      I,
+      R
+    ), q = n(() => J.value ? "mixed" : `${F.value}`), y = x(F.value), Q = () => {
+      y.value = !y.value, X(y.value);
     };
-    Q(P, () => {
-      ee.value = P.value;
+    ee(F, () => {
+      y.value = F.value;
     });
-    const _e = (f) => {
+    const te = (f) => {
       if (f.lazyLoad) {
-        const S = (f.items ?? []).map(({ value: N }) => N), E = t.selectedValues.filter(({ value: N }) => !S.includes(N));
-        l("select", [...E, f]);
+        const g = (f.items ?? []).map(({ value: $ }) => $), k = t.selectedValues.filter(({ value: $ }) => !g.includes($));
+        l("select", [...k, f]);
       } else
-        h(f.items);
-    }, ke = (f) => {
+        G(f.items);
+    }, D = (f) => {
       f.lazyLoad ? l(
         "select",
-        t.selectedValues.filter(({ value: S }) => S !== f.value)
-      ) : R(f.items);
-    }, De = (f, S) => {
-      let E = !1, N = t.selectedValues.filter(({ value: $ }) => S.value === $ ? (E = !0, !1) : !0);
-      if (E) {
-        l(f, N);
+        t.selectedValues.filter(({ value: g }) => g !== f.value)
+      ) : L(f.items);
+    }, ve = (f, g) => {
+      let k = !1, $ = t.selectedValues.filter(({ value: j }) => g.value === j ? (k = !0, !1) : !0);
+      if (k) {
+        l(f, $);
         return;
       }
-      const C = t.items.find(
-        ($) => $.items?.some((O) => O.value === S.value) && $.lazyLoad && b.value.includes($.value)
+      const V = t.items.find(
+        (j) => j.items?.some((B) => B.value === g.value) && j.lazyLoad && p.value.includes(j.value)
       );
-      if (C) {
-        N = N.filter(({ value: O }) => O !== C.value);
-        const $ = C.items.filter(
-          (O) => O.value !== S.value
+      if (V) {
+        $ = $.filter(({ value: B }) => B !== V.value);
+        const j = V.items.filter(
+          (B) => B.value !== g.value
         );
-        N.push(...$);
+        $.push(...j);
       } else
-        N.push(S);
-      l(f, N);
-    }, ce = n(() => {
-      if (!x.value)
+        $.push(g);
+      l(f, $);
+    }, we = n(() => {
+      if (!_.value)
         return t.selectedValues;
-      const f = (O) => b.value.includes(O.value), S = (O) => O.lazyLoad && f(O) ? !0 : !t.staticCategories && O.items.length > 0 && O.items.every((ve) => f(ve)), E = t.items.flatMap(
-        (O) => O.items && !S(O) ? O.items : O
-      ), N = E.filter((O) => O.items ? !0 : f(O)), C = /* @__PURE__ */ new Set();
-      E.forEach((O) => {
-        C.add(O.value), O.items?.forEach((ve) => C.add(ve.value));
+      const f = (B) => p.value.includes(B.value), g = (B) => B.lazyLoad && f(B) ? !0 : !t.staticCategories && B.items.length > 0 && B.items.every((Ee) => f(Ee)), k = t.items.flatMap(
+        (B) => B.items && !g(B) ? B.items : B
+      ), $ = k.filter((B) => B.items ? !0 : f(B)), V = /* @__PURE__ */ new Set();
+      k.forEach((B) => {
+        V.add(B.value), B.items?.forEach((Ee) => V.add(Ee.value));
       });
-      const $ = t.selectedValues.filter((O) => !C.has(O.value));
-      return [...N, ...$];
-    }), de = n(() => {
-      if (!ce.value?.length)
+      const j = t.selectedValues.filter((B) => !V.has(B.value));
+      return [...$, ...j];
+    }), Se = n(() => {
+      if (!we.value?.length)
         return !1;
-      const f = ["automatic", "button"].includes(t.lazyLoadType), S = t.selectedValues?.length > 0 && T.value?.length !== w.value?.length;
-      return f && t.hasMoreItems ? !!t.selectedValues?.length : S;
-    }), ue = n(() => M.value ? !1 : ["automatic", "button"].includes(t.lazyLoadType) ? !t.hasMoreItems : !0), J = L([]), { visibleDomOptions: pe, updateVisibleDomOptions: xe } = ze(
-      c,
-      q(t, "items"),
-      D
-    ), Be = (f) => {
-      J.value.includes(f) ? J.value = J.value.filter((S) => S !== f) : J.value.push(f), Y(() => {
+      const f = ["automatic", "button"].includes(t.lazyLoadType), g = t.selectedValues?.length > 0 && A.value?.length !== E.value?.length;
+      return f && t.hasMoreItems ? !!t.selectedValues?.length : g;
+    }), pe = n(() => w.value ? !1 : ["automatic", "button"].includes(t.lazyLoadType) ? !t.hasMoreItems : !0), ae = x([]), { visibleDomOptions: me, updateVisibleDomOptions: xe } = We(
+      d,
+      H(t, "items"),
+      S
+    ), Ne = (f) => {
+      ae.value.includes(f) ? ae.value = ae.value.filter((g) => g !== f) : ae.value.push(f), Z(() => {
         xe();
       });
-    }, fe = (f) => {
-      pe.value[f]?.focus();
+    }, oe = (f) => {
+      me.value[f]?.focus();
     }, {
-      moveToNextElement: ge,
-      moveToPreviousElement: be,
-      moveToFirstElement: he,
-      moveToLastElement: se,
-      preventDefault: me,
-      focusedIndex: Ce,
-      setListboxFocusedIndex: Le
-    } = tt(
+      moveToNextElement: ye,
+      moveToPreviousElement: Te,
+      moveToFirstElement: Ce,
+      moveToLastElement: Ie,
+      preventDefault: Le,
+      focusedIndex: $e,
+      setListboxFocusedIndex: _e
+    } = rt(
       {
-        items: pe
+        items: me
       },
-      fe
-    ), Oe = {
-      [z.ARROW_UP]: (f) => be(f),
-      [z.ARROW_DOWN]: (f) => ge(f),
-      [z.HOME]: he,
-      [z.END]: se
+      oe
+    ), Ae = {
+      [U.ARROW_UP]: (f) => Te(f),
+      [U.ARROW_DOWN]: (f) => ye(f),
+      [U.HOME]: Ce,
+      [U.END]: Ie
     };
     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: _e
     });
-    const Ie = {
-      [z.ARROW_UP]: me,
-      [z.ARROW_DOWN]: me
-    }, Re = n(() => {
-      let f = ue.value ? 1 : 0;
-      const S = {};
-      return t.items.forEach((E) => {
-        let N = J.value.includes(E.value);
-        E.items ? (t.staticCategories ? N = !0 : S[E.value] = f++, N && E.items.forEach((C) => S[C.value] = f++)) : S[E.value] = f++;
-      }), S;
+    const Oe = {
+      [U.ARROW_UP]: Le,
+      [U.ARROW_DOWN]: Le
+    }, De = n(() => {
+      let f = pe.value ? 1 : 0;
+      const g = {};
+      return t.items.forEach((k) => {
+        let $ = ae.value.includes(k.value);
+        k.items ? (t.staticCategories ? $ = !0 : g[k.value] = f++, $ && k.items.forEach((V) => g[V.value] = f++)) : g[k.value] = f++;
+      }), g;
     });
-    return { __sfc: !0, props: t, emit: l, t: s, n: o, slots: i, attrs: p, ariaAttributes: _, listboxRef: c, selectAllListboxItemsRef: r, selectedListboxItemsRef: m, listboxItemsRef: u, selectedItemsList: b, isMultiLevelSelect: x, flattenedItemsList: g, hasLazyLoadCategory: M, lazyLoadAwareFlattenedItems: B, isTreePattern: v, computedRole: I, computedOptionRole: D, optionStates: A, enabledItems: w, visibleSelectedList: T, calculateTotalItems: G, selectAllCheckboxText: U, selectAll: h, unselectAll: R, selectAllItems: k, unselectAllItems: y, isAllSelected: P, isIndeterminate: ie, toggleSelectAll: K, ariaCheckedComputed: j, isSelectAllOn: ee, handleSelectAll: re, selectAllCategory: _e, unselectAllCategory: ke, toggleCheckboxSelection: De, selectedOptions: ce, showSelectedItems: de, showSelectAllCheckbox: ue, expandedCategories: J, visibleDomOptions: pe, updateVisibleDomOptions: xe, toggleCategoryVisibility: Be, focusItem: fe, moveToNextElement: ge, moveToPreviousElement: be, moveToFirstElement: he, moveToLastElement: se, preventDefault: me, focusedIndex: Ce, setListboxFocusedIndex: Le, listboxListeners: Oe, chipsSectionListeners: Ie, computedItemsIndex: Re, DecorativeCheckbox: Ve, BentoTypography: le, BentoChip: gt, BentoListboxOption: Ae, ListboxMultiSelectOptions: Al, vBentoKeyboardNavigationDirective: Te, BentoListboxEvent: d };
+    return { __sfc: !0, props: t, emit: l, t: o, n: s, slots: i, attrs: b, ariaAttributes: m, listboxRef: d, selectAllListboxItemsRef: r, selectedListboxItemsRef: v, listboxItemsRef: c, selectedItemsList: p, isMultiLevelSelect: _, flattenedItemsList: O, hasLazyLoadCategory: w, lazyLoadAwareFlattenedItems: P, isTreePattern: h, computedRole: C, computedOptionRole: S, optionStates: T, enabledItems: E, visibleSelectedList: A, calculateTotalItems: N, selectAllCheckboxText: Y, selectAll: G, unselectAll: L, selectAllItems: I, unselectAllItems: R, isAllSelected: F, isIndeterminate: J, toggleSelectAll: X, ariaCheckedComputed: q, isSelectAllOn: y, handleSelectAll: Q, selectAllCategory: te, unselectAllCategory: D, toggleCheckboxSelection: ve, selectedOptions: we, showSelectedItems: Se, showSelectAllCheckbox: pe, expandedCategories: ae, visibleDomOptions: me, updateVisibleDomOptions: xe, toggleCategoryVisibility: Ne, focusItem: oe, moveToNextElement: ye, moveToPreviousElement: Te, moveToFirstElement: Ce, moveToLastElement: Ie, preventDefault: Le, focusedIndex: $e, setListboxFocusedIndex: _e, listboxListeners: Ae, chipsSectionListeners: Oe, computedItemsIndex: De, DecorativeCheckbox: Ke, BentoTypography: ue, BentoChip: wt, BentoListboxOption: Me, ListboxMultiSelectOptions: Fl, vBentoKeyboardNavigationDirective: Re, BentoListboxEvent: u };
   }
 });
-var Rl = function() {
+var Ul = 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) {
-      s.items ? t.unselectAllCategory(s) : t.toggleCheckboxSelection("select", s);
+  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(o) {
+    return l("li", { key: o.value }, [l(t.BentoChip, { ref: "selectedListboxItemsRef", refInFor: !0, attrs: { disabled: e.isOptionDisabled(o), label: o.label, condensed: "" }, on: { click: function(s) {
+      o.items ? t.unselectAllCategory(o) : t.toggleCheckboxSelection("select", o);
     } } })], 1);
-  }), 0), l("hr", { staticClass: "b-listbox-multi-select__divider", attrs: { "aria-hidden": "true" } })]) : e._e(), l("div", e._g(e._b({ directives: [{ name: "bento-keyboard-navigation-directive", rawName: "v-bento-keyboard-navigation-directive" }], attrs: { role: t.computedRole } }, "div", t.ariaAttributes, !1), t.listboxListeners), [t.showSelectAllCheckbox ? l(t.BentoListboxOption, { ref: "selectAllListboxItemsRef", staticClass: "b-listbox-multi-select__option", attrs: { tabindex: t.focusedIndex === 0 ? 0 : -1, "aria-selected": t.ariaCheckedComputed !== "false", "aria-checked": t.ariaCheckedComputed, role: t.computedOptionRole }, on: { click: t.handleSelectAll, "enter-pressed": t.handleSelectAll, "space-pressed": function(s) {
-    return s.preventDefault(), t.handleSelectAll.apply(null, arguments);
-  } } }, [l(t.DecorativeCheckbox, { attrs: { checked: t.isAllSelected, indeterminate: t.isIndeterminate } }), l(t.BentoTypography, { attrs: { el: "span" } }, [e._v(" " + e._s(t.selectAllCheckboxText) + " ")])], 1) : e._e(), t.showSelectAllCheckbox ? l("hr", { staticClass: "b-listbox-multi-select__divider", attrs: { "aria-hidden": "true" } }) : e._e(), l(t.ListboxMultiSelectOptions, { ref: "listboxItemsRef", attrs: { items: e.items, "is-option-disabled": e.isOptionDisabled, "is-multi-level": t.isMultiLevelSelect, "static-categories": e.staticCategories, searching: e.searching, "selected-items-list": t.selectedItemsList, "focused-index": t.focusedIndex, "items-index": t.computedItemsIndex, role: t.computedOptionRole }, on: { "toggle-checkbox-selection": function(s) {
-    return t.toggleCheckboxSelection("select", s);
-  }, "select-category": t.selectAllCategory, "unselect-category": t.unselectAllCategory, "toggle-category-visibility": t.toggleCategoryVisibility, "space-pressed": function(s) {
-    return t.toggleCheckboxSelection(t.BentoListboxEvent.SPACE, s);
-  }, "tab-pressed": function(s) {
-    return t.toggleCheckboxSelection(t.BentoListboxEvent.TAB, s);
-  }, "enter-pressed": function(s) {
-    return t.toggleCheckboxSelection(t.BentoListboxEvent.ENTER, s);
-  } }, scopedSlots: e._u([e._l(t.slots, function(s, o) {
-    return { key: o, fn: function(i) {
-      return [e._t(o, null, null, i)];
+  }), 0), l("hr", { staticClass: "b-listbox-multi-select__divider", attrs: { "aria-hidden": "true" } })]) : e._e(), l("div", e._g(e._b({ directives: [{ name: "bento-keyboard-navigation-directive", rawName: "v-bento-keyboard-navigation-directive" }], attrs: { role: t.computedRole } }, "div", t.ariaAttributes, !1), t.listboxListeners), [t.showSelectAllCheckbox ? l(t.BentoListboxOption, { ref: "selectAllListboxItemsRef", staticClass: "b-listbox-multi-select__option", attrs: { tabindex: t.focusedIndex === 0 ? 0 : -1, "aria-selected": t.ariaCheckedComputed !== "false", "aria-checked": t.ariaCheckedComputed, role: t.computedOptionRole }, on: { click: t.handleSelectAll, "enter-pressed": t.handleSelectAll, "space-pressed": function(o) {
+    return o.preventDefault(), t.handleSelectAll.apply(null, arguments);
+  } } }, [l(t.DecorativeCheckbox, { attrs: { checked: t.isAllSelected, indeterminate: t.isIndeterminate } }), l(t.BentoTypography, { attrs: { el: "span" } }, [e._v(" " + e._s(t.selectAllCheckboxText) + " ")])], 1) : e._e(), t.showSelectAllCheckbox ? l("hr", { staticClass: "b-listbox-multi-select__divider", attrs: { "aria-hidden": "true" } }) : e._e(), l(t.ListboxMultiSelectOptions, { ref: "listboxItemsRef", attrs: { items: e.items, "is-option-disabled": e.isOptionDisabled, "is-multi-level": t.isMultiLevelSelect, "static-categories": e.staticCategories, searching: e.searching, "selected-items-list": t.selectedItemsList, "focused-index": t.focusedIndex, "items-index": t.computedItemsIndex, role: t.computedOptionRole }, on: { "toggle-checkbox-selection": function(o) {
+    return t.toggleCheckboxSelection("select", o);
+  }, "select-category": t.selectAllCategory, "unselect-category": t.unselectAllCategory, "toggle-category-visibility": t.toggleCategoryVisibility, "space-pressed": function(o) {
+    return t.toggleCheckboxSelection(t.BentoListboxEvent.SPACE, o);
+  }, "tab-pressed": function(o) {
+    return t.toggleCheckboxSelection(t.BentoListboxEvent.TAB, o);
+  }, "enter-pressed": function(o) {
+    return t.toggleCheckboxSelection(t.BentoListboxEvent.ENTER, o);
+  } }, scopedSlots: e._u([e._l(t.slots, function(o, s) {
+    return { key: s, fn: function(i) {
+      return [e._t(s, null, null, i)];
     } };
   })], null, !0) })], 1)]);
-}, Ml = [], Nl = /* @__PURE__ */ V(
-  Bl,
-  Rl,
-  Ml,
+}, Wl = [], Kl = /* @__PURE__ */ W(
+  Gl,
+  Ul,
+  Wl,
   !1,
   null,
   "78b94290"
 );
-const Ke = Nl.exports, ot = (a, e = 300) => {
+const Ze = Kl.exports, ft = (a, e = 300) => {
   let l;
-  return (...s) => {
-    l && clearTimeout(l), l = setTimeout(() => a(...s), e);
+  return (...o) => {
+    l && clearTimeout(l), l = setTimeout(() => a(...o), e);
   };
-}, $l = 36, Pl = F({
+}, ql = 36, Yl = z({
   name: "bento-listbox",
   components: {
-    BentoEmptyState: Qe,
-    BentoListboxSingleSelect: Jt,
-    BentoListboxMultiSelect: Ke,
-    BentoTypography: le,
-    BentoLoadingIndicator: Ze,
-    BentoListboxLazyLoad: at
+    BentoEmptyState: nt,
+    BentoListboxSingleSelect: sl,
+    BentoListboxMultiSelect: Ze,
+    BentoTypography: ue,
+    BentoLoadingIndicator: st,
+    BentoListboxLazyLoad: dt
   },
-  directives: { BentoKeyboardNavigationDirective: Te },
+  directives: { BentoKeyboardNavigationDirective: Re },
   props: {
     /**
      * Defines a string value that labels an interactive element.
      */
     ariaLabel: { type: String, default: null },
+    /**
+     * Identifies the currently active option in the listbox.
+     */
+    activeDescendantId: { type: String, default: null },
     /**
      * Empty state props that will be used with the inner empty state component to be displayed when no search results are found.
      */
@@ -1300,8 +1322,8 @@ const Ke = Nl.exports, ot = (a, e = 300) => {
      */
     lazyLoadType: {
       type: String,
-      default: Z.NONE,
-      validator: (a) => Object.values(Z).includes(a)
+      default: re.NONE,
+      validator: (a) => Object.values(re).includes(a)
     },
     /**
      * Indicates the listbox is loading filtered items.
@@ -1325,7 +1347,7 @@ const Ke = Nl.exports, ot = (a, e = 300) => {
      *
      * If enabled, hides the "Select all" checkbox in "multiple" mode.
      */
-    searching: Ke.props.searching,
+    searching: Ze.props.searching,
     /**
      * The `input` value.
      * Providing an empty string or empty array will select no options.
@@ -1345,176 +1367,176 @@ const Ke = Nl.exports, ot = (a, e = 300) => {
     }
   },
   emits: [
-    d.SELECT,
-    d.SPACE,
-    d.SHOW_MORE,
-    d.ENTER,
-    d.ESCAPE,
-    d.TAB
+    u.SELECT,
+    u.SPACE,
+    u.SHOW_MORE,
+    u.ENTER,
+    u.ESCAPE,
+    u.TAB
   ],
   setup(a, { emit: e, slots: l, expose: t }) {
-    const s = L([]), o = q(a, "items"), i = n(() => a.lazyLoadType !== Z.AUTOMATIC), p = n(() => a.lazyLoadType === Z.AUTOMATIC), _ = () => typeof a?.virtualScroll == "object" && a?.virtualScroll?.itemHeight ? a.virtualScroll.itemHeight : $l, c = !a?.multiple && a?.virtualScroll !== !1 && a?.lazyLoadType === "none", {
+    const o = x([]), s = H(a, "items"), i = n(() => a.lazyLoadType !== re.AUTOMATIC), b = n(() => a.lazyLoadType === re.AUTOMATIC), m = () => typeof a?.virtualScroll == "object" && a?.virtualScroll?.itemHeight ? a.virtualScroll.itemHeight : ql, d = !a?.multiple && a?.virtualScroll !== !1 && a?.lazyLoadType === "none", {
       containerRef: r,
-      containerProps: m,
-      onScroll: u,
-      list: b,
-      wrapperProps: x,
-      scrollToIndex: g,
-      startIndex: M
-    } = It(o, {
-      itemHeight: _(),
+      containerProps: v,
+      onScroll: c,
+      list: p,
+      wrapperProps: _,
+      scrollToIndex: O,
+      startIndex: w
+    } = Mt(s, {
+      itemHeight: m(),
       // Disable virtual scrolling if not enabled or if lazy loading is enabled or if multi-select
-      disabled: !c
-    }), B = n(() => c ? o.value.length : 0), v = n(
+      disabled: !d
+    }), P = n(() => d ? s.value.length : 0), h = n(
       () => a.componentLoading !== void 0 || i.value ? "true" : void 0
-    ), I = n(
+    ), C = n(
       () => i.value && a.loading || a.componentLoading ? "true" : "false"
-    ), D = n(
+    ), S = n(
       () => i.value || a.componentLoading !== void 0 ? "polite" : void 0
-    ), A = n(
+    ), T = n(
       () => ({
         "aria-label": a.ariaLabel,
-        "aria-busy": I.value,
-        "aria-atomic": v.value,
-        "aria-live": D.value
+        "aria-busy": C.value,
+        "aria-atomic": h.value,
+        "aria-live": S.value
       })
-    ), w = n(
+    ), E = n(
       () => a.componentLoading ? {
-        ...A.value,
+        ...T.value,
         role: "alert"
       } : {}
-    ), T = (K) => (j) => {
-      e(K, j);
-    }, G = () => {
-      e(d.SHOW_MORE);
-    }, U = ot(() => {
-      const K = r.value;
-      if (!K)
+    ), A = (X) => (q) => {
+      e(X, q);
+    }, N = () => {
+      e(u.SHOW_MORE);
+    }, Y = ft(() => {
+      const X = r.value;
+      if (!X)
         return;
-      const j = Math.round(K.scrollTop) + K.clientHeight >= K.scrollHeight;
-      a.hasMoreItems && j && !a.loading && G();
-    }), h = () => {
-      p.value ? U() : u();
-    }, R = n(() => a.items?.length === 0), k = n(
-      () => a.lazyLoadType === Z.BUTTON && a.hasMoreItems
-    ), y = n(
-      () => a.loading ? we.LOADING : we.START
-    ), P = n(() => ({
+      const q = Math.round(X.scrollTop) + X.clientHeight >= X.scrollHeight;
+      a.hasMoreItems && q && !a.loading && N();
+    }), G = () => {
+      b.value ? Y() : c();
+    }, L = n(() => a.items?.length === 0), I = n(
+      () => a.lazyLoadType === re.BUTTON && a.hasMoreItems
+    ), R = n(
+      () => a.loading ? Be.LOADING : Be.START
+    ), F = n(() => ({
       ...a.emptyState,
       variant: "condensed"
-    })), ie = {
-      [d.SELECT]: T(d.SELECT),
-      [d.SPACE]: T(d.SPACE),
-      [d.TAB]: T(d.TAB),
-      [d.ENTER]: T(d.ENTER)
+    })), J = {
+      [u.SELECT]: A(u.SELECT),
+      [u.SPACE]: A(u.SPACE),
+      [u.TAB]: A(u.TAB),
+      [u.ENTER]: A(u.ENTER)
     };
-    return t({ listboxRef: r, listboxItemRef: s }), {
+    return t({ listboxRef: r, listboxItemRef: o }), {
       // Refs
       listboxRef: r,
-      listboxItemRef: s,
+      listboxItemRef: o,
       // a11y
-      ariaAttributes: A,
-      listboxContainerAttributes: w,
+      ariaAttributes: T,
+      listboxContainerAttributes: E,
       // Values
-      containerProps: m,
-      isSearchResultEmpty: R,
-      limitedEmptyStateProps: P,
-      loadingButtonState: y,
+      containerProps: v,
+      isSearchResultEmpty: L,
+      limitedEmptyStateProps: F,
+      loadingButtonState: R,
       slots: l,
-      shouldDisplayShowMoreButton: k,
-      virtualisedItems: b,
-      wrapperProps: x,
+      shouldDisplayShowMoreButton: I,
+      virtualisedItems: p,
+      wrapperProps: _,
       // Virtual scroll
-      totalItemCount: B,
-      scrollToIndex: g,
-      virtualScrollStartIndex: M,
+      totalItemCount: P,
+      scrollToIndex: O,
+      virtualScrollStartIndex: w,
       // Enums
-      BentoKeyboardNavigationKeyDownEvent: z,
-      BentoListboxEvent: d,
+      BentoKeyboardNavigationKeyDownEvent: U,
+      BentoListboxEvent: u,
       // Methods
-      onListboxContainerScroll: h,
-      onOptionSelected: T,
-      emitShowMore: G,
-      listboxListeners: ie
+      onListboxContainerScroll: G,
+      onOptionSelected: A,
+      emitShowMore: N,
+      listboxListeners: J
     };
   }
 });
-var Fl = function() {
+var jl = function() {
   var e = this, l = e._self._c;
-  return e._self._setupProxy, l("div", e._b({ directives: [{ name: "bento-keyboard-navigation-directive", rawName: "v-bento-keyboard-navigation-directive" }], ref: "listboxRef", staticClass: "b-listbox", style: e.containerProps?.style, attrs: { id: e.id, tabindex: "-1", "data-testid": "listbox-container" }, on: { scroll: e.onListboxContainerScroll } }, "div", e.listboxContainerAttributes, !1), [l("div", e._b({}, "div", e.wrapperProps, !1), [e.componentLoading ? l("div", { staticClass: "b-listbox__loading-filtered-items" }, [l("bento-loading-indicator")], 1) : e.isSearchResultEmpty ? l("div", { staticClass: "b-listbox__empty-search-message" }, [e.emptyState ? l("bento-empty-state", e._b({}, "bento-empty-state", e.limitedEmptyStateProps, !1)) : l("bento-typography", { attrs: { el: "span" } }, [e._v(e._s(e.noResultsMessage))])], 1) : [e.multiple ? [l("bento-listbox-multi-select", e._g(e._b({ ref: "listboxItemRef", attrs: { "has-more-items": e.hasMoreItems, items: e.items, "lazy-load-type": e.lazyLoadType, "static-categories": e.staticCategories, "selected-values": e.selectedValue, searching: e.searching, "is-option-disabled": e.isOptionDisabled }, scopedSlots: e._u([e._l(e.slots, function(t, s) {
-    return { key: s, fn: function(o) {
-      return [e._t(s, null, null, o)];
+  return e._self._setupProxy, l("div", e._b({ directives: [{ name: "bento-keyboard-navigation-directive", rawName: "v-bento-keyboard-navigation-directive" }], ref: "listboxRef", staticClass: "b-listbox", style: e.containerProps?.style, attrs: { id: e.id, tabindex: "-1", "data-testid": "listbox-container" }, on: { scroll: e.onListboxContainerScroll } }, "div", e.listboxContainerAttributes, !1), [l("div", e._b({}, "div", e.wrapperProps, !1), [e.componentLoading ? l("div", { staticClass: "b-listbox__loading-filtered-items" }, [l("bento-loading-indicator")], 1) : e.isSearchResultEmpty ? l("div", { staticClass: "b-listbox__empty-search-message" }, [e.emptyState ? l("bento-empty-state", e._b({}, "bento-empty-state", e.limitedEmptyStateProps, !1)) : l("bento-typography", { attrs: { el: "span" } }, [e._v(e._s(e.noResultsMessage))])], 1) : [e.multiple ? [l("bento-listbox-multi-select", e._g(e._b({ ref: "listboxItemRef", attrs: { "has-more-items": e.hasMoreItems, items: e.items, "lazy-load-type": e.lazyLoadType, "static-categories": e.staticCategories, "selected-values": e.selectedValue, searching: e.searching, "is-option-disabled": e.isOptionDisabled }, scopedSlots: e._u([e._l(e.slots, function(t, o) {
+    return { key: o, fn: function(s) {
+      return [e._t(o, null, null, s)];
     } };
-  })], null, !0) }, "bento-listbox-multi-select", e.ariaAttributes, !1), e.listboxListeners))] : [l("bento-listbox-single-select", e._g(e._b({ ref: "listboxItemRef", attrs: { items: e.virtualisedItems, "total-item-count": e.totalItemCount, "scroll-to-index": e.scrollToIndex, "virtual-scroll-start-index": e.virtualScrollStartIndex, "selected-value": e.selectedValue, "static-categories": e.staticCategories, "is-option-disabled": e.isOptionDisabled }, scopedSlots: e._u([e._l(e.slots, function(t, s) {
-    return { key: s, fn: function(o) {
-      return [e._t(s, null, null, o)];
+  })], null, !0) }, "bento-listbox-multi-select", e.ariaAttributes, !1), e.listboxListeners))] : [l("bento-listbox-single-select", e._g(e._b({ ref: "listboxItemRef", attrs: { "active-descendant-id": e.activeDescendantId, items: e.virtualisedItems, "option-id-base": e.id, "total-item-count": e.totalItemCount, "scroll-to-index": e.scrollToIndex, "virtual-scroll-start-index": e.virtualScrollStartIndex, "selected-value": e.selectedValue, "static-categories": e.staticCategories, "is-option-disabled": e.isOptionDisabled }, scopedSlots: e._u([e._l(e.slots, function(t, o) {
+    return { key: o, fn: function(s) {
+      return [e._t(o, null, null, s)];
     } };
   })], 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 = [], Vl = /* @__PURE__ */ V(
-  Pl,
-  Fl,
-  zl,
+}, Hl = [], Jl = /* @__PURE__ */ W(
+  Yl,
+  jl,
+  Hl,
   !1,
   null,
-  "6756a7d9"
+  "74907ba1"
 );
-const Ne = Vl.exports, $e = (a, e) => {
+const Ve = Jl.exports, ze = (a, e) => {
   for (const l of a) {
     if (l.value === e)
       return l;
     if (l.items) {
-      const t = $e(l.items, e);
+      const t = ze(l.items, e);
       if (t)
         return t;
     }
   }
   return null;
-}, Gl = (a) => typeof a == "object" && a !== null && "value" in a && "label" in a, Ul = (a, e, l, t) => {
-  const s = L([]), o = L(), i = (r) => {
-    l.value ? o.value = r.map(({ value: m }) => m) : o.value = r.length > 0 ? r[0].value : null;
-  }, p = (r) => {
-    l.value ? o.value = r.map(({ value: m, label: u }) => ({ value: m, label: u })) : o.value = r.length > 0 ? { value: r[0].value, label: r[0].label } : null;
-  }, _ = (r) => {
-    s.value = r, t?.value ? p(r) : i(r);
-  }, c = () => {
-    s.value = [], o.value = null;
+}, Xl = (a) => typeof a == "object" && a !== null && "value" in a && "label" in a, Zl = (a, e, l, t) => {
+  const o = x([]), s = x(), i = (r) => {
+    l.value ? s.value = r.map(({ value: v }) => v) : s.value = r.length > 0 ? r[0].value : null;
+  }, b = (r) => {
+    l.value ? s.value = r.map(({ value: v, label: c }) => ({ value: v, label: c })) : s.value = r.length > 0 ? { value: r[0].value, label: r[0].label } : null;
+  }, m = (r) => {
+    o.value = r, t?.value ? b(r) : i(r);
+  }, d = () => {
+    o.value = [], s.value = null;
   };
-  return Q(
+  return ee(
     () => e.value,
     () => {
       if (!e.value && e.value !== 0) {
-        c();
+        d();
         return;
       }
-      const r = !Array.isArray(e.value), m = [...s.value];
-      c();
-      const u = (b) => {
-        if (Gl(b))
-          s.value.push(b);
+      const r = !Array.isArray(e.value), v = [...o.value];
+      d();
+      const c = (p) => {
+        if (Xl(p))
+          o.value.push(p);
         else {
-          let x = $e(a.value, b);
-          x || (x = $e(m, b)), x || (x = { value: b, label: b.toString() }), s.value.push(x);
+          let _ = ze(a.value, p);
+          _ || (_ = ze(v, p)), _ || (_ = { value: p, label: p.toString() }), o.value.push(_);
         }
       };
       if (r) {
-        const b = e.value;
-        u(b), t?.value ? p(s.value) : i(s.value);
+        const p = e.value;
+        c(p), t?.value ? b(o.value) : i(o.value);
         return;
       }
-      e.value.forEach(u), t?.value ? p(s.value) : i(s.value);
+      e.value.forEach(c), t?.value ? b(o.value) : i(o.value);
     },
     { immediate: !0 }
   ), {
     // Values
-    cachedSelectedListboxOptions: s,
-    cachedListboxSelectedValues: o,
+    cachedSelectedListboxOptions: o,
+    cachedListboxSelectedValues: s,
     // Methods
-    resetCache: c,
-    setCachedValues: _
+    resetCache: d,
+    setCachedValues: m
   };
 };
-var ye = /* @__PURE__ */ ((a) => (a.DEFAULT = "DropdownInputDefault", a.SMALL = "DropdownInputSmall", a))(ye || {});
-const Wl = {
+var ge = /* @__PURE__ */ ((a) => (a.DEFAULT = "DropdownInputDefault", a.SMALL = "DropdownInputSmall", a))(ge || {});
+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" },
@@ -1526,67 +1548,71 @@ const Wl = {
   "ja-JP": { apply: "適用", cancel: "キャンセル", noOptionsMatchThisSearch: "この検索に一致するオプションはありません" },
   "pt-BR": { apply: "Aplicar", cancel: "Cancelar", noOptionsMatchThisSearch: "Nenhuma opção corresponde a esta busca" },
   "zh-CN": { apply: "应用", cancel: "取消", noOptionsMatchThisSearch: "没有符合此搜索条件的选项" }
-}, Kl = (a, e, l, t) => {
-  const s = L(a.value), { t: o } = ae();
-  Q(a, () => {
-    s.value = a.value;
+}, ea = (a, e, l, t) => {
+  const o = x(a.value), { t: s } = de();
+  ee(a, () => {
+    o.value = a.value;
   });
   const i = n(
-    () => JSON.stringify(s.value) === JSON.stringify(a.value)
-  ), p = () => {
-    t(d.SELECT, s.value), t(d.CLOSE_DROPDOWN);
-  }, _ = () => {
-    s.value = a.value, t(d.CLOSE_DROPDOWN);
-  }, c = () => {
-    l.value && e.value && (s.value = a.value);
+    () => JSON.stringify(o.value) === JSON.stringify(a.value)
+  ), b = () => {
+    t(u.SELECT, o.value), t(u.CLOSE_DROPDOWN);
+  }, m = () => {
+    o.value = a.value, t(u.CLOSE_DROPDOWN);
+  }, d = () => {
+    l.value && e.value && (o.value = a.value);
   }, r = n(() => [
     {
-      title: o("apply"),
-      event: p,
+      title: s("apply"),
+      event: b,
       disabled: i.value
     },
     {
-      title: o("cancel"),
-      event: _
+      title: s("cancel"),
+      event: m
     }
-  ]), m = (v) => {
-    s.value = v, e.value || t(d.SELECT, v);
-  }, u = (v) => {
-    m(v), t(d.TAB);
-  }, b = (v) => {
-    m(v), t(d.ENTER);
-  }, x = (v) => {
-    m(v), t(d.SPACE);
-  }, g = () => {
-    _(), t(d.ESCAPE);
-  }, M = () => {
-    t(d.SHOW_MORE);
-  }, B = {
-    [d.SELECT]: m,
-    [d.SHOW_MORE]: M,
-    [d.TAB]: u,
-    [d.SPACE]: x,
-    [d.ENTER]: b
+  ]), v = (h) => {
+    o.value = h, e.value || t(u.SELECT, h);
+  }, c = (h) => {
+    v(h), t(u.TAB);
+  }, p = (h) => {
+    v(h), t(u.ENTER);
+  }, _ = (h) => {
+    v(h), t(u.SPACE);
+  }, O = () => {
+    m(), t(u.ESCAPE);
+  }, w = () => {
+    t(u.SHOW_MORE);
+  }, P = {
+    [u.SELECT]: v,
+    [u.SHOW_MORE]: w,
+    [u.TAB]: c,
+    [u.SPACE]: _,
+    [u.ENTER]: p
   };
   return {
     // Values
     actions: r,
-    internalSelectedValue: s,
+    internalSelectedValue: o,
     // Methods
-    listeners: B,
-    onEscapeKey: g,
-    onOutsideDropdownClick: c
+    listeners: P,
+    onEscapeKey: O,
+    onOutsideDropdownClick: d
   };
-}, ql = F({
-  i18n: { messages: Wl },
+}, ta = z({
+  i18n: { messages: Ql },
   name: "bento-dropdown-options-container"
-}), Yl = /* @__PURE__ */ F({
-  ...ql,
+}), la = /* @__PURE__ */ z({
+  ...ta,
   props: {
     /**
      * Defines a string value that labels an interactive element.
      */
     ariaLabel: { type: String, default: null },
+    /**
+     * Identifies the currently active option in the listbox.
+     */
+    activeDescendantId: { type: String, default: null },
     /**
      * Indicates that dropdown items are loading
      */
@@ -1640,8 +1666,8 @@ const Wl = {
      */
     lazyLoadType: {
       type: String,
-      default: Z.AUTOMATIC,
-      validator: (a) => Object.values(Z).includes(a)
+      default: re.AUTOMATIC,
+      validator: (a) => Object.values(re).includes(a)
     },
     /**
      * Indicates if new options are lazy loading.
@@ -1671,7 +1697,7 @@ const Wl = {
      *
      * If enabled, hides the "Select all" checkbox in "multiple" mode.
      */
-    searching: Ne.props.searching,
+    searching: Ve.props.searching,
     /**
      * If enabled, dropdown will display non-selectable, static categories
      */
@@ -1680,7 +1706,7 @@ const Wl = {
      * Reference to the DOM element or Vue component for positioning
      * the Dropdown container.
      */
-    targetElement: { type: Ge.props.targetElement.type, required: !0 },
+    targetElement: { type: He.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.
@@ -1692,27 +1718,27 @@ const Wl = {
   },
   emits: [],
   setup(a, { expose: e, emit: l }) {
-    const t = a, s = Se(), { selectedValue: o, multiple: i } = je(t), p = L(null), { t: _ } = ae(), c = n(() => t.open && !t.disabled), r = n(() => _("noOptionsMatchThisSearch")), m = n(() => ({
+    const t = a, o = he(), { selectedValue: s, multiple: i } = tt(t), b = x(null), { t: m } = de(), d = n(() => t.open && !t.disabled), r = n(() => m("noOptionsMatchThisSearch")), v = n(() => ({
       "b-dropdown-options-container--single": !t?.multiple
-    })), u = n(() => ({
+    })), c = n(() => ({
       "b-dropdown-options-container__listbox--single": !t?.multiple
-    })), { actions: b, internalSelectedValue: x, listeners: g, onEscapeKey: M, onOutsideDropdownClick: B } = Kl(o, i, c, l), v = n(() => t?.multiple ? St : Ge), I = n(() => {
-      const D = {
+    })), { actions: p, internalSelectedValue: _, listeners: O, onEscapeKey: w, onOutsideDropdownClick: P } = ea(s, i, d, l), h = n(() => t?.multiple ? At : He), C = n(() => {
+      const S = {
         "min-width": `${t?.targetElement?.clientWidth}px`,
         "max-width": "min(500px, 95%)"
       };
       return t?.multiple ? {
         actionsLayout: "space-between",
         ariaLabel: t.ariaLabel,
-        actions: b.value,
+        actions: p.value,
         divider: !0,
         fallbackPosition: ["top-start"],
-        id: te(`dropdown-options-${t.id}`),
+        id: ce(`dropdown-options-${t.id}`),
         open: t.open,
         position: "bottom-start",
         style: {
           width: "auto",
-          ...D
+          ...S
         },
         targetElement: t.targetElement
       } : {
@@ -1720,40 +1746,40 @@ const Wl = {
         offset: [0, 8],
         position: "bottom-start",
         style: {
-          display: c.value ? "block" : "none",
-          ...D
+          display: d.value ? "block" : "none",
+          ...S
         },
         targetElement: t.targetElement
       };
     });
     return e({
-      onOutsideDropdownClick: B,
-      dropdownOptionsListboxRef: p
-    }), { __sfc: !0, slots: s, emit: l, props: t, selectedValue: o, multiple: i, dropdownOptionsListboxRef: p, t: _, isDropdownOpen: c, noResultsMessage: r, conditionalClasses: m, conditionalListboxClasses: u, actions: b, internalSelectedValue: x, listeners: g, onEscapeKey: M, onOutsideDropdownClick: B, popperContainerOrPopoverComponent: v, popperContainerOrPopoverProps: I, BentoListbox: Ne };
+      onOutsideDropdownClick: P,
+      dropdownOptionsListboxRef: b
+    }), { __sfc: !0, slots: o, emit: l, props: t, selectedValue: s, multiple: i, dropdownOptionsListboxRef: b, t: m, isDropdownOpen: d, noResultsMessage: r, conditionalClasses: v, conditionalListboxClasses: c, actions: p, internalSelectedValue: _, listeners: O, onEscapeKey: w, onOutsideDropdownClick: P, popperContainerOrPopoverComponent: h, popperContainerOrPopoverProps: C, BentoListbox: Ve };
   }
 });
-var jl = function() {
+var aa = 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();
-  }, function(s) {
-    return !s.type.indexOf("key") && e._k(s.keyCode, "esc", 27, s.key, ["Esc", "Escape"]) ? null : t.onEscapeKey.apply(null, arguments);
-  }] } }, [l(t.BentoListbox, e._g({ ref: "dropdownOptionsListboxRef", staticClass: "b-dropdown-options-container__listbox", class: t.conditionalListboxClasses, attrs: { id: e.id, "aria-label": e.ariaLabel, "component-loading": e.componentLoading, "empty-state": e.emptyState, "is-option-disabled": e.isOptionDisabled, items: e.items, "selected-value": t.internalSelectedValue, multiple: t.multiple, "static-categories": e.staticCategories, "no-results-message": t.noResultsMessage, searching: e.searching, loading: e.loading, "lazy-load-type": e.lazyLoadType, "has-more-items": e.hasMoreItems, "virtual-scroll": e.virtualScroll }, scopedSlots: e._u([e._l(t.slots, function(s, o) {
-    return { key: o, fn: function(i) {
-      return [e._t(o, null, null, i)];
+  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(o) {
+    o.stopPropagation();
+  }, function(o) {
+    return !o.type.indexOf("key") && e._k(o.keyCode, "esc", 27, o.key, ["Esc", "Escape"]) ? null : t.onEscapeKey.apply(null, arguments);
+  }] } }, [l(t.BentoListbox, e._g({ ref: "dropdownOptionsListboxRef", staticClass: "b-dropdown-options-container__listbox", class: t.conditionalListboxClasses, attrs: { id: e.id, "active-descendant-id": e.activeDescendantId, "aria-label": e.ariaLabel, "component-loading": e.componentLoading, "empty-state": e.emptyState, "is-option-disabled": e.isOptionDisabled, items: e.items, "selected-value": t.internalSelectedValue, multiple: t.multiple, "static-categories": e.staticCategories, "no-results-message": t.noResultsMessage, searching: e.searching, loading: e.loading, "lazy-load-type": e.lazyLoadType, "has-more-items": e.hasMoreItems, "virtual-scroll": e.virtualScroll }, scopedSlots: e._u([e._l(t.slots, function(o, s) {
+    return { key: s, fn: function(i) {
+      return [e._t(s, null, null, i)];
     } };
   })], null, !0) }, t.listeners))], 1)]) : e._e();
-}, Hl = [], Jl = /* @__PURE__ */ V(
-  Yl,
-  jl,
-  Hl,
+}, oa = [], sa = /* @__PURE__ */ W(
+  la,
+  aa,
+  oa,
   !1,
   null,
-  "1254877d"
+  "045f1f85"
 );
-const Xl = Jl.exports;
-var H = /* @__PURE__ */ ((a) => (a.DISABLED = "disabled", a.READONLY = "readonly", a.HAS_ITEMS = "has-items", a.OPENED = "opened", a.ERROR = "error", a))(H || {}), W = /* @__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))(W || {});
-const Zl = /* @__PURE__ */ Symbol("dropdown small size injection key"), nt = /* @__PURE__ */ Symbol("dropdown underline style injection key"), Ql = {
+const na = sa.exports;
+var le = /* @__PURE__ */ ((a) => (a.DISABLED = "disabled", a.READONLY = "readonly", a.HAS_ITEMS = "has-items", a.OPENED = "opened", a.ERROR = "error", a))(le || {}), K = /* @__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))(K || {});
+const ia = /* @__PURE__ */ Symbol("dropdown small size injection key"), bt = /* @__PURE__ */ Symbol("dropdown underline style injection key"), ra = {
   "de-DE": { clearSearch: "Suche löschen" },
   "en-GB": { clearSearch: "Clear search" },
   "en-US": { clearSearch: "Clear search" },
@@ -1765,12 +1791,12 @@ const Zl = /* @__PURE__ */ Symbol("dropdown small size injection key"), nt = /*
   "ja-JP": { clearSearch: "検索をクリア" },
   "pt-BR": { clearSearch: "Limpar busca" },
   "zh-CN": { clearSearch: "清除搜索" }
-}, ea = F({
-  i18n: { messages: Ql },
+}, ca = z({
+  i18n: { messages: ra },
   name: "dropdown-base-textbox",
   inheritAttrs: !1
-}), ta = /* @__PURE__ */ F({
-  ...ea,
+}), ua = /* @__PURE__ */ z({
+  ...ca,
   props: {
     /**
      * The number of additional items that have been selected in the dropdown.
@@ -1798,6 +1824,10 @@ const Zl = /* @__PURE__ */ Symbol("dropdown small size injection key"), nt = /*
      * If no label element is used then the aria-label is be set should be set.
      */
     ariaLabel: { type: String, default: null },
+    /**
+     * Identifies the currently active option in the listbox.
+     */
+    ariaActiveDescendant: { type: String, default: null },
     /**
      * Corresponds to the label's id that labels the textbox element.
      */
@@ -1814,6 +1844,10 @@ const Zl = /* @__PURE__ */ Symbol("dropdown small size injection key"), nt = /*
      * Sets the possibility to type into the textbox.
      */
     dynamicFiltering: { type: Boolean, default: !1 },
+    /**
+     * Indicates whether the dropdown currently has a selected value.
+     */
+    hasSelectedValue: { type: Boolean, default: !1 },
     /**
      * Marks the textbox as invalid, rendering an error state
      */
@@ -1856,90 +1890,118 @@ const Zl = /* @__PURE__ */ Symbol("dropdown small size injection key"), nt = /*
   },
   emits: [],
   setup(a, { expose: e, emit: l }) {
-    const t = a, { t: s } = ae(), o = Pe(), i = Se(), p = He(i), _ = L(null), c = te("textbox"), r = Fe(nt, !1), m = n(() => ({
-      [`b-dropdown-base-textbox--${H.DISABLED}`]: t.disabled,
-      [`b-dropdown-base-textbox--${H.READONLY}`]: t.readonly,
-      [`b-dropdown-base-textbox--${H.HAS_ITEMS}`]: !!t.additionalItemsSelected,
-      "b-dropdown-base-textbox--underline": r
-    })), u = n(
-      () => B.value && o["aria-required"] ? "true" : null
-    ), b = n(() => ({
+    const t = a, { t: o } = de(), s = Ge(), i = he(), b = lt(i), m = x(null), d = ce("textbox"), r = x(!1), v = x(t.value), c = Ue(bt, !1), p = n(() => ({
+      [`b-dropdown-base-textbox--${le.DISABLED}`]: t.disabled,
+      [`b-dropdown-base-textbox--${le.READONLY}`]: t.readonly,
+      [`b-dropdown-base-textbox--${le.HAS_ITEMS}`]: !!t.additionalItemsSelected,
+      "b-dropdown-base-textbox--underline": c
+    })), _ = n(
+      () => E.value && s["aria-required"] ? "true" : null
+    ), O = n(() => ({
       "b-dropdown-base-textbox__input--dynamic-filtering": t.dynamicFiltering
-    })), x = n(() => t.dynamicFiltering && !!t.value && t.open), g = n(
+    })), w = n(() => t.dynamicFiltering && !!t.value && t.open), P = (D) => E.value && !t.multiple && !!t.value && D, h = n(
       () => ({
         "aria-haspopup": "listbox",
         "aria-controls": t.ariaControls,
-        "aria-describedby": o["aria-describedby"]?.toString(),
+        "aria-describedby": s["aria-describedby"]?.toString(),
         "aria-expanded": t.ariaExpanded ? "true" : "false",
+        "aria-activedescendant": t.ariaActiveDescendant,
         "aria-labelledby": t.ariaLabelledby,
         "aria-label": t.ariaLabelledby ? null : t.ariaLabel,
         "aria-invalid": t.isInvalid,
         "aria-disabled": t.disabled ? !0 : null,
-        "aria-required": o["aria-required"]
+        "aria-required": s["aria-required"]
       })
-    ), M = n(
+    ), C = n(
       () => t.multiple ? t.selectedValueItem : []
-    ), B = n(() => t.dynamicFiltering && (t.open || t.alwaysComboboxIsInput)), v = n(() => t.selectedValueItem && !t.multiple), I = n(
-      () => t.multiple && t.selectedValueItem && M.value.length > 0 && t.showSlotContentInMultiple
+    ), S = n(
+      () => t.dynamicFiltering && !t.multiple && !t.alwaysComboboxIsInput
+    ), T = n(
+      () => t.open || t.alwaysComboboxIsInput || S.value && r.value
+    ), E = n(() => t.dynamicFiltering && T.value), A = () => !t.value && t.hasSelectedValue && S.value ? t.displayValue ?? "" : t.value, N = n(() => !T.value || t.alwaysComboboxIsInput && !t.open ? t.displayValue : S.value ? v.value : t.value), Y = n(() => t.selectedValueItem && !t.multiple), G = n(
+      () => t.multiple && t.selectedValueItem && C.value.length > 0 && t.showSlotContentInMultiple
     );
-    Q(
-      () => B.value,
-      () => {
-        B.value && !t.alwaysComboboxIsInput && Y(() => {
-          _.value.focus();
+    ee(
+      () => E.value,
+      (D, ve) => {
+        D ? !ve && S.value && (v.value = A()) : v.value = t.value, D && !t.alwaysComboboxIsInput && Z(() => {
+          m.value?.focus(), !t.open && !t.value && t.hasSelectedValue && S.value && m.value?.select();
         });
       }
+    ), ee(
+      () => t.value,
+      (D) => {
+        (!S.value || D !== v.value) && (v.value = D);
+      }
+    ), ee(
+      () => t.displayValue,
+      () => {
+        S.value && t.hasSelectedValue && (v.value = A());
+      }
+    ), ee(
+      () => t.open,
+      (D) => {
+        D || (r.value = !1);
+      }
     );
-    const D = async () => {
-      !t.disabled && !t.readonly && (l(W.OPEN), await Y(), _.value.focus());
-    }, A = (h) => {
-      t.open && (h && ne(h), _.value.focus(), l(W.CLOSE));
-    }, w = (h) => t.open && h.target.tagName === "INPUT" ? null : t.open ? A() : D(), T = () => {
-      l(W.CLEAR), l(W.INPUT, ""), _.value.focus();
-    }, G = (h) => {
-      !t.readonly && !t.disabled ? l(W.INPUT, h.target.value) : (h.preventDefault(), h.stopPropagation());
-    }, U = () => {
-      _.value.focus();
+    const L = async () => {
+      !t.disabled && !t.readonly && (l(K.OPEN), await Z(), m.value.focus());
+    }, I = (D) => {
+      t.open && (D && be(D), m.value.focus(), l(K.CLOSE));
+    }, R = (D) => t.open && D.target.tagName === "INPUT" ? null : t.open ? I() : L(), F = (D) => t.dynamicFiltering ? null : R(D), J = () => {
+      l(K.CLEAR), l(K.INPUT, ""), m.value.focus();
+    }, X = () => {
+      r.value = !0;
+    }, q = () => {
+      r.value = !1;
+    }, y = (D) => {
+      !S.value || t.open || t.readonly || t.disabled || (D.preventDefault(), D.stopPropagation(), r.value = !0, l(K.OPEN));
+    }, Q = (D) => {
+      !t.readonly && !t.disabled ? (S.value && (v.value = D.target.value), t.dynamicFiltering && !t.open && l(K.OPEN), l(K.INPUT, D.target.value), Z(() => {
+        E.value && m.value?.focus();
+      })) : (D.preventDefault(), D.stopPropagation());
+    }, te = () => {
+      m.value.focus();
     };
     return e({
-      focus: U
-    }), { __sfc: !0, t: s, attrs: o, slots: i, hasSlot: p, props: t, emit: l, textbox: _, textboxId: c, isUnderlineStyle: r, conditionalClasses: m, showRequiredAttribute: u, comboboxConditionalClasses: b, isFiltering: x, ariaAttributes: g, selectedValueItems: M, shouldShowInput: B, shouldShowSingleSelectSlot: v, shouldShowMultipleSlot: I, onOpenDropdown: D, onCloseDropdown: A, onToggleDropdown: w, onClearSearch: T, onInputEvent: G, focus: U, BentoTypography: le, DropdownBaseTextboxEvent: W, CrossCircleFillIcon: ut, CrossCircleFillSmallIcon: pt, BentoDropdownSize: ye };
+      focus: te
+    }), { __sfc: !0, t: o, attrs: s, slots: i, hasSlot: b, props: t, emit: l, textbox: m, textboxId: d, isTextboxFocused: r, localInputValue: v, isUnderlineStyle: c, conditionalClasses: p, showRequiredAttribute: _, comboboxConditionalClasses: O, isFiltering: w, shouldShowAutocompleteSuggestion: P, ariaAttributes: h, selectedValueItems: C, shouldUseDynamicFilteringInputMode: S, shouldShowSearchValue: T, shouldShowInput: E, getInitialInputValue: A, inputValue: N, shouldShowSingleSelectSlot: Y, shouldShowMultipleSlot: G, onOpenDropdown: L, onCloseDropdown: I, onToggleDropdown: R, onTextboxEnterKey: F, onClearSearch: J, onTextboxFocus: X, onTextboxBlur: q, onClosedComboboxMouseDown: y, onInputEvent: Q, focus: te, BentoTypography: ue, DropdownBaseTextboxEvent: K, CrossCircleFillIcon: ht, CrossCircleFillSmallIcon: St, BentoDropdownSize: ge };
   }
 });
-var la = function() {
+var da = 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);
-  } } }, [l(t.BentoTypography, { staticClass: "b-dropdown-base-textbox", class: t.conditionalClasses, attrs: { variant: t.isUnderlineStyle ? "title" : "body", el: "div", "data-testid": "base-textbox" } }, [t.shouldShowInput ? l("input", e._b({ ref: "textbox", staticClass: "b-dropdown-base-textbox__input", attrs: { id: t.textboxId, role: "combobox", type: "text", "aria-autocomplete": "list", size: "1", disabled: e.disabled ? !0 : null, readonly: e.readonly, required: t.showRequiredAttribute }, domProps: { value: e.open ? e.value : e.displayValue }, on: { keydown: [function(s) {
-    return e.$emit(t.DropdownBaseTextboxEvent.KEYDOWN, s);
-  }, function(s) {
-    return !s.type.indexOf("key") && e._k(s.keyCode, "enter", 13, s.key, "Enter") ? null : t.onToggleDropdown.apply(null, arguments);
-  }], input: t.onInputEvent } }, "input", t.ariaAttributes, !1)) : l("div", e._b({ ref: "textbox", staticClass: "b-dropdown-base-textbox__input", class: t.comboboxConditionalClasses, attrs: { id: t.textboxId, "aria-readonly": e.readonly ? "true" : null, role: "combobox", tabindex: e.disabled ? -1 : 0 } }, "div", t.ariaAttributes, !1), [t.shouldShowSingleSelectSlot ? [t.hasSlot("display-value") ? e._t("display-value", null, null, e.selectedValueItem) : e._t("default", function() {
+  return l("div", { class: e.$attrs.class, attrs: { "data-testid": "textbox-wrapper" }, on: { click: t.onToggleDropdown, keydown: function(o) {
+    return !o.type.indexOf("key") && e._k(o.keyCode, "escape", void 0, o.key, void 0) ? null : t.onCloseDropdown.apply(null, arguments);
+  } } }, [l(t.BentoTypography, { staticClass: "b-dropdown-base-textbox", class: t.conditionalClasses, attrs: { variant: t.isUnderlineStyle ? "title" : "body", el: "div", "data-testid": "base-textbox" } }, [t.shouldShowAutocompleteSuggestion(t.hasSlot("autocomplete-suggestion")) ? l("span", { staticClass: "b-dropdown-base-textbox__autocomplete-suggestion", attrs: { "aria-hidden": "true", "data-testid": "autocomplete-suggestion" } }, [e._t("autocomplete-suggestion")], 2) : e._e(), t.shouldShowInput ? l("input", e._b({ ref: "textbox", staticClass: "b-dropdown-base-textbox__input", attrs: { id: t.textboxId, role: "combobox", type: "text", "aria-autocomplete": t.shouldShowAutocompleteSuggestion(t.hasSlot("autocomplete-suggestion")) ? "both" : "list", size: "1", disabled: e.disabled ? !0 : null, readonly: e.readonly, required: t.showRequiredAttribute }, domProps: { value: t.inputValue }, on: { keydown: [function(o) {
+    return e.$emit(t.DropdownBaseTextboxEvent.KEYDOWN, o);
+  }, function(o) {
+    return !o.type.indexOf("key") && e._k(o.keyCode, "enter", 13, o.key, "Enter") ? null : t.onTextboxEnterKey.apply(null, arguments);
+  }], focus: t.onTextboxFocus, blur: t.onTextboxBlur, input: t.onInputEvent } }, "input", t.ariaAttributes, !1)) : l("div", e._b({ ref: "textbox", staticClass: "b-dropdown-base-textbox__input", class: t.comboboxConditionalClasses, attrs: { id: t.textboxId, "aria-readonly": e.readonly ? "true" : null, role: "combobox", tabindex: e.disabled ? -1 : 0 }, on: { focus: t.onTextboxFocus, mousedown: t.onClosedComboboxMouseDown } }, "div", t.ariaAttributes, !1), [t.shouldShowSingleSelectSlot ? [t.hasSlot("display-value") ? e._t("display-value", null, null, e.selectedValueItem) : e._t("default", function() {
     return [e._v(" " + e._s(e.displayValue) + " ")];
-  }, null, e.selectedValueItem)] : t.shouldShowMultipleSlot ? [l("div", { staticClass: "b-dropdown-base-textbox__input-multiple-selected" }, e._l(t.selectedValueItems, function(s) {
-    return l("div", { key: s.value }, [l("div", { staticClass: "b-dropdown-base-textbox__input-selected-element" }, [e._t("default", function() {
+  }, null, e.selectedValueItem)] : t.shouldShowMultipleSlot ? [l("div", { staticClass: "b-dropdown-base-textbox__input-multiple-selected" }, e._l(t.selectedValueItems, function(o) {
+    return l("div", { key: o.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);
+    }, null, o)], 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(o) {
+    return o.stopPropagation(), t.onClearSearch.apply(null, arguments);
+  }, keydown: function(o) {
+    return !o.type.indexOf("key") && e._k(o.keyCode, "enter", 13, o.key, "Enter") ? null : (o.stopPropagation(), t.onClearSearch.apply(null, arguments));
+  }, keyup: function(o) {
+    return !o.type.indexOf("key") && e._k(o.keyCode, "space", 32, o.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);
-}, aa = [], sa = /* @__PURE__ */ V(
-  ta,
-  la,
-  aa,
+}, pa = [], fa = /* @__PURE__ */ W(
+  ua,
+  da,
+  pa,
   !1,
   null,
-  "20b3acdb"
+  "fb2a4a73"
 );
-const it = sa.exports, oa = F({
+const vt = fa.exports, ba = z({
   name: "dropdown-default-textbox",
   inheritAttrs: !1
-}), na = /* @__PURE__ */ F({
-  ...oa,
+}), va = /* @__PURE__ */ z({
+  ...ba,
   props: {
     /**
      * The number of additional items that have been selected in the dropdown.
@@ -1952,6 +2014,13 @@ const it = sa.exports, oa = F({
       type: String,
       required: !0
     },
+    /**
+     * Identifies the currently active option in the listbox.
+     */
+    ariaActiveDescendant: {
+      type: String,
+      default: null
+    },
     /**
      * Indicates whether the content the textbox triggers is visible or not. Needs to be set accordingly when the textbox is used and changed every time the popover is shown/hidden.
      */
@@ -2027,94 +2096,94 @@ const it = sa.exports, oa = F({
   },
   emits: ["clear", "close", "input", "keydown", "open"],
   setup(a, { expose: e, emit: l }) {
-    const t = a, s = Se(), o = L(null), i = n(() => ({
-      [`b-dropdown-default-textbox--${H.ERROR}`]: !t.disabled && !t.readonly && t.isInvalid,
-      [`b-dropdown-default-textbox--${H.DISABLED}`]: t.disabled,
-      [`b-dropdown-default-textbox--${H.READONLY}`]: t.readonly,
-      [`b-dropdown-default-textbox--${H.OPENED}`]: t.open,
+    const t = a, o = he(), s = x(null), i = n(() => ({
+      [`b-dropdown-default-textbox--${le.ERROR}`]: !t.disabled && !t.readonly && t.isInvalid,
+      [`b-dropdown-default-textbox--${le.DISABLED}`]: t.disabled,
+      [`b-dropdown-default-textbox--${le.READONLY}`]: t.readonly,
+      [`b-dropdown-default-textbox--${le.OPENED}`]: t.open,
       "b-dropdown-default-textbox--condensed": t.condensed
-    })), p = n(() => t.open && !t.disabled && !t.readonly), _ = (g) => {
-      l("input", g);
-    }, c = (g) => {
-      l("keydown", g);
-    }, r = (g) => {
-      ne(g), l("open");
-    }, m = (g) => {
-      ne(g), l("close");
-    }, u = (g) => {
-      ne(g), l("clear");
-    }, b = {
-      [W.INPUT]: _,
-      [W.OPEN]: r,
-      [W.CLOSE]: m,
-      [W.CLEAR]: u,
-      [W.KEYDOWN]: c
-    }, x = () => {
-      o.value.focus();
+    })), b = n(() => t.open && !t.disabled && !t.readonly), m = (O) => {
+      l("input", O);
+    }, d = (O) => {
+      l("keydown", O);
+    }, r = (O) => {
+      be(O), l("open");
+    }, v = (O) => {
+      be(O), l("close");
+    }, c = (O) => {
+      be(O), l("clear");
+    }, p = {
+      [K.INPUT]: m,
+      [K.OPEN]: r,
+      [K.CLOSE]: v,
+      [K.CLEAR]: c,
+      [K.KEYDOWN]: d
+    }, _ = () => {
+      s.value.focus();
     };
     return e({
-      focus: x
-    }), { __sfc: !0, emit: l, slots: s, props: t, baseTextbox: o, conditionalClasses: i, isDropdownOpen: p, onInput: _, onKeyDown: c, openDropdown: r, closeDropdown: m, clearValue: u, listeners: b, focus: x, DropdownBaseTextbox: it, ChevronDownIcon: Je, ChevronUpIcon: Xe };
+      focus: _
+    }), { __sfc: !0, emit: l, slots: o, props: t, baseTextbox: s, conditionalClasses: i, isDropdownOpen: b, onInput: m, onKeyDown: d, openDropdown: r, closeDropdown: v, clearValue: c, listeners: p, focus: _, DropdownBaseTextbox: vt, ChevronDownIcon: at, ChevronUpIcon: ot };
   }
 });
-var ia = function() {
+var ma = 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) {
-      return [e._t(o, null, null, i ?? {})];
+  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(o, s) {
+    return { key: s, fn: function(i) {
+      return [e._t(s, null, null, i ?? {})];
     } };
   }), { 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);
-}, ra = [], ca = /* @__PURE__ */ V(
-  na,
-  ia,
-  ra,
+}, ya = [], _a = /* @__PURE__ */ W(
+  va,
+  ma,
+  ya,
   !1,
   null,
-  "bf2d43b0"
+  "998402d4"
 );
-const da = ca.exports;
-let qe = 0;
-const ua = {
+const ga = _a.exports;
+let Qe = 0;
+const ha = {
   beforeCreate() {
-    this.uuid = qe.toString(), qe += 1;
+    this.uuid = Qe.toString(), Qe += 1;
   }
 };
-var pa = function() {
+var Sa = function() {
   var e = this, l = e._self._c;
   return 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" } })]);
-}, fa = [], ba = /* @__PURE__ */ V(
-  ua,
-  pa,
-  fa,
+}, xa = [], Ca = /* @__PURE__ */ W(
+  ha,
+  Sa,
+  xa,
   !1,
   null,
   null
 );
-const ma = ba.exports;
-let Ye = 0;
-const va = {
+const Ia = Ca.exports;
+let et = 0;
+const La = {
   beforeCreate() {
-    this.uuid = Ye.toString(), Ye += 1;
+    this.uuid = et.toString(), et += 1;
   }
 };
-var ya = function() {
+var Oa = function() {
   var e = this, l = e._self._c;
   return 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" } })]);
-}, _a = [], ga = /* @__PURE__ */ V(
-  va,
-  ya,
-  _a,
+}, Ea = [], wa = /* @__PURE__ */ W(
+  La,
+  Oa,
+  Ea,
   !1,
   null,
   null
 );
-const ha = ga.exports, Sa = F({
+const Ta = wa.exports, Aa = z({
   name: "dropdown-small-textbox",
   inheritAttrs: !1
-}), xa = /* @__PURE__ */ F({
-  ...Sa,
+}), Da = /* @__PURE__ */ z({
+  ...Aa,
   props: {
     /**
      * The number of additional items that have been selected in the dropdown.
@@ -2124,6 +2193,10 @@ const ha = ga.exports, Sa = F({
      * Sets the aria-controls attribute on the textbox. This should correspond to the popover's id that the textbox triggers.
      */
     ariaControls: { type: String, required: !0 },
+    /**
+     * Identifies the currently active option in the listbox.
+     */
+    ariaActiveDescendant: { type: String, default: null },
     /**
      * Indicates whether the content the textbox triggers is visible or not. Needs to be set accordingly when the textbox is used and changed every time the popover is shown/hidden.
      */
@@ -2171,162 +2244,180 @@ const ha = ga.exports, Sa = F({
   },
   emits: ["clear", "close", "input", "keydown", "open"],
   setup(a, { expose: e, emit: l }) {
-    const t = a, s = L(null), o = Fe(nt, !1), i = n(() => ({
-      [`b-dropdown-small-textbox--${H.DISABLED}`]: t.disabled,
-      [`b-dropdown-small-textbox--${H.READONLY}`]: t.readonly,
-      [`b-dropdown-small-textbox--${H.OPENED}`]: t.open,
-      "b-dropdown-small-textbox--underline": o
-    })), p = n(() => t.open && !t.disabled && !t.readonly), _ = (g) => {
-      l("input", g);
-    }, c = (g) => {
-      l("keydown", g);
-    }, r = (g) => {
-      ne(g), l("open");
-    }, m = (g) => {
-      ne(g), l("close");
-    }, u = (g) => {
-      ne(g), l("clear");
-    }, b = {
-      [W.INPUT]: _,
-      [W.OPEN]: r,
-      [W.CLOSE]: m,
-      [W.CLEAR]: u,
-      [W.KEYDOWN]: c
-    }, x = () => {
+    const t = a, o = he(), s = x(null), i = Ue(bt, !1), b = n(() => ({
+      [`b-dropdown-small-textbox--${le.DISABLED}`]: t.disabled,
+      [`b-dropdown-small-textbox--${le.READONLY}`]: t.readonly,
+      [`b-dropdown-small-textbox--${le.OPENED}`]: t.open,
+      "b-dropdown-small-textbox--underline": i
+    })), m = n(() => t.open && !t.disabled && !t.readonly), d = (w) => {
+      l("input", w);
+    }, r = (w) => {
+      l("keydown", w);
+    }, v = (w) => {
+      be(w), l("open");
+    }, c = (w) => {
+      be(w), l("close");
+    }, p = (w) => {
+      be(w), l("clear");
+    }, _ = {
+      [K.INPUT]: d,
+      [K.OPEN]: v,
+      [K.CLOSE]: c,
+      [K.CLEAR]: p,
+      [K.KEYDOWN]: r
+    }, O = () => {
       s.value.focus();
     };
     return e({
-      focus: x
-    }), { __sfc: !0, emit: l, props: t, baseTextbox: s, isUnderlineStyle: o, conditionalClasses: i, isDropdownOpen: p, onInput: _, onKeyDown: c, openDropdown: r, closeDropdown: m, clearValue: u, listeners: b, focus: x, BentoDropdownSize: ye, DropdownBaseTextbox: it, ChevronDownSmallIcon: ma, ChevronUpSmallIcon: ha };
+      focus: O
+    }), { __sfc: !0, emit: l, slots: o, props: t, baseTextbox: s, isUnderlineStyle: i, conditionalClasses: b, isDropdownOpen: m, onInput: d, onKeyDown: r, openDropdown: v, closeDropdown: c, clearValue: p, listeners: _, focus: O, BentoDropdownSize: ge, DropdownBaseTextbox: vt, ChevronDownSmallIcon: Ia, ChevronUpSmallIcon: Ta };
   }
 });
-var Ca = function() {
+var ka = 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([{ key: "icon", fn: function() {
+  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(o, s) {
+    return { key: s, fn: function(i) {
+      return [e._t(s, null, null, i ?? {})];
+    } };
+  }), { 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 }]) }, "dropdown-base-textbox", { ...e.$attrs, ...e.$props }, !1), t.listeners))], 1);
-}, La = [], Oa = /* @__PURE__ */ V(
-  xa,
-  Ca,
-  La,
+  }, proxy: !0 }], null, !0) }, "dropdown-base-textbox", { ...e.$attrs, ...e.$props }, !1), t.listeners))], 1);
+}, Ba = [], Ra = /* @__PURE__ */ W(
+  Da,
+  ka,
+  Ba,
   !1,
   null,
-  "fa225e76"
+  "f28de89c"
 );
-const Ia = Oa.exports, Ea = (a, e) => {
-  const l = /* @__PURE__ */ new Set(), t = new Set(a.value.map((o) => o.value)), s = e.value.reduce((o, i) => {
+const Ma = Ra.exports, Na = (a, e) => {
+  const l = /* @__PURE__ */ new Set(), t = new Set(a.value.map((s) => s.value)), o = e.value.reduce((s, i) => {
     if (i.items)
       if (t.has(i.value))
-        o.push(i.displayValue ?? i.label), l.add(i.value), i.items.forEach((_) => l.add(_.value));
+        s.push(i.displayValue ?? i.label), l.add(i.value), i.items.forEach((m) => l.add(m.value));
       else {
-        const _ = i.items.filter(
+        const m = i.items.filter(
           (r) => t.has(r.value)
         );
-        _.length > 0 && _.length === i.items.length ? (o.push(i.displayValue ?? i.label), l.add(i.value), i.items.forEach((r) => l.add(r.value))) : _.forEach(({ label: r, displayValue: m, value: u }) => {
-          o.push(m ?? r), l.add(u);
+        m.length > 0 && m.length === i.items.length ? (s.push(i.displayValue ?? i.label), l.add(i.value), i.items.forEach((r) => l.add(r.value))) : m.forEach(({ label: r, displayValue: v, value: c }) => {
+          s.push(v ?? r), l.add(c);
         });
       }
     else
-      t.has(i.value) && (o.push(i.displayValue ?? i.label), l.add(i.value));
-    return o;
+      t.has(i.value) && (s.push(i.displayValue ?? i.label), l.add(i.value));
+    return s;
   }, []);
-  return a.value.forEach((o) => {
-    l.has(o.value) || s.push(o.displayValue ?? o.label);
-  }), s.join(", ");
-}, wa = ({ items: a, placeholder: e, selectedValues: l, isMultiSelect: t }) => {
-  const s = n(
+  return a.value.forEach((s) => {
+    l.has(s.value) || o.push(s.displayValue ?? s.label);
+  }), o.join(", ");
+}, $a = ({ items: a, placeholder: e, selectedValues: l, isMultiSelect: t }) => {
+  const o = n(
     () => t.value && a.value.find((i) => i.items?.length)
   );
-  return n(() => l.value.length ? s.value ? Ea(l, a) : l.value.map(({ label: i, displayValue: p }) => p ?? i).join(", ") : e.value || null);
-}, rt = (a) => {
+  return n(() => l.value.length ? o.value ? Na(l, a) : l.value.map(({ label: i, displayValue: b }) => b ?? i).join(", ") : e.value || null);
+}, mt = (a) => {
   a.value.$children?.[0].$refs.textbox.focus();
-}, Ta = ({
+}, Pa = ({
   inputContainerRef: a,
   optionsContainerRef: e,
   selectedValueIndex: l,
   isDropdownOpen: t,
-  isDynamicFltering: s,
-  items: o,
+  isDynamicFltering: o,
+  items: s,
   isMultiple: i,
-  totalItemCount: p,
-  isVirtualScroll: _
-}, c, r, m) => {
-  const u = async (y) => {
-    s.value && await Y(), o.value[y]?.focus();
-  }, b = async (y) => {
-    s.value && await Y();
-    const P = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef?.$el.querySelectorAll(
+  isSearching: b,
+  activeDescendantIndex: m,
+  selectFirstMatchedOption: d,
+  totalItemCount: r,
+  isVirtualScroll: v,
+  removeActiveDescendant: c
+}, p, _, O) => {
+  const w = async (y) => {
+    o.value && await Z(), s.value[y]?.focus();
+  }, P = async (y) => {
+    o.value && await Z();
+    const Q = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef?.$el.querySelectorAll(
       "button"
     );
-    P?.length ? P[y]?.focus() : u(y);
-  }, x = (y) => e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef?.setListboxFocusedIndex(
+    Q?.length ? Q[y]?.focus() : w(y);
+  }, h = (y) => e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef?.setListboxFocusedIndex(
     y
-  ), g = async (y) => {
+  ), C = async (y) => {
     await e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef?.navigateToItem(y);
-  }, M = (y) => {
-    Y(() => {
-      _ ? g(y) : (x(y), u(y));
+  }, S = (y) => {
+    c?.(), !(y < 0) && Z(() => {
+      v ? C(y) : (h(y), w(y));
     });
-  }, B = () => {
-    t.value || r(), M(0);
-  }, v = () => {
-    t.value || r(), Y(() => {
-      M(_ ? p.value - 1 : o.value.length - 1);
+  }, T = () => {
+    t.value || _(), S(0);
+  }, E = () => {
+    t.value || _();
+    const y = v ? r.value - 1 : s.value.length - 1, Q = Math.min((m?.value ?? -1) + 1, y);
+    S(Q);
+  }, A = () => {
+    t.value || _(), Z(() => {
+      S(v ? r.value - 1 : s.value.length - 1);
     });
-  }, I = (y) => {
+  }, N = (y) => {
     y.preventDefault(), y.stopPropagation();
-  }, D = ({ detail: y }) => {
-    I(y), B();
-  }, A = ({ detail: y }) => {
-    I(y), v();
-  }, w = ({ detail: y }) => {
-    I(y), B();
-  }, T = ({ detail: y }) => {
-    I(y), v();
+  }, Y = ({ detail: y }) => {
+    if (N(y), m?.value !== void 0 && m.value >= 0) {
+      E();
+      return;
+    }
+    T();
   }, G = ({ detail: y }) => {
-    I(y), c(), t.value && (i ? b(0) : M(l.value));
-  }, U = ({ detail: y }) => {
-    I(y), c(), t.value && (i ? b(0) : M(l.value));
-  }, h = ({ detail: y }) => {
-    y.stopPropagation(), t.value && m();
+    N(y), A();
+  }, L = ({ detail: y }) => {
+    N(y), T();
+  }, I = ({ detail: y }) => {
+    N(y), A();
   }, R = ({ detail: y }) => {
-    y.stopPropagation(), t.value && (m(), rt(a));
+    N(y), p(), t.value && (i.value ? P(0) : S(l.value));
+  }, F = async ({ detail: y }) => {
+    if (N(y), o.value && !i.value)
+      return t.value && b.value && await d(), void 0;
+    p(), t.value && (i.value ? P(0) : S(l.value));
+  }, J = ({ detail: y }) => {
+    y.stopPropagation(), t.value && O();
+  }, X = ({ detail: y }) => {
+    y.stopPropagation(), t.value && (O(), mt(a));
   };
   return n(() => ({
-    [z.ARROW_DOWN]: D,
-    [z.ARROW_UP]: A,
-    [z.HOME]: w,
-    [z.END]: T,
-    ...s.value ? {} : { [z.SPACE]: G },
-    [z.ENTER]: U,
-    ...s.value ? {} : { [z.TAB]: h },
-    [z.ESCAPE]: R
+    [U.ARROW_DOWN]: Y,
+    [U.ARROW_UP]: G,
+    [U.HOME]: L,
+    [U.END]: I,
+    ...o.value ? {} : { [U.SPACE]: R },
+    [U.ENTER]: F,
+    ...o.value ? {} : { [U.TAB]: J },
+    [U.ESCAPE]: X
   }));
-}, Aa = ({ inputContainerRef: a, isDropdownOpen: e }, l) => {
+}, Fa = ({ inputContainerRef: a, isDropdownOpen: e }, l) => {
   const t = () => {
-    e.value && l(), Y(() => {
-      rt(a);
+    e.value && l(), Z(() => {
+      mt(a);
     });
   };
   return {
-    [d.ENTER]: t,
-    [d.ESCAPE]: t,
-    [d.TAB]: t,
-    [d.SPACE]: t
+    [u.ENTER]: t,
+    [u.ESCAPE]: t,
+    [u.TAB]: t,
+    [u.SPACE]: t
   };
 };
-function ka(a, e, l, t, s) {
-  const o = L(a), i = L(e), p = (r, m = []) => m.flatMap((u) => u.label.toLocaleLowerCase().includes(r) ? t?.value && u.items ? [...p(r, u.items)] : [u, ...p(r, u.items)] : u.items ? [...p(r, u.items)] : []), _ = l !== void 0 ? ot(() => l(o.value), s ?? 300) : void 0;
-  return Q(o, () => {
-    _ !== void 0 && _();
+function Va(a, e, l, t, o) {
+  const s = x(a), i = x(e), b = (r, v = []) => v.flatMap((c) => c.label.toLocaleLowerCase().includes(r) ? t?.value && c.items ? [...b(r, c.items)] : [c, ...b(r, c.items)] : c.items ? [...b(r, c.items)] : []), m = l !== void 0 ? ft(() => l(s.value), o ?? 300) : void 0;
+  return ee(s, () => {
+    m !== void 0 && m();
   }), n(() => {
-    if (!o.value || l !== void 0)
+    if (!s.value || l !== void 0)
       return i.value;
-    const r = o.value.toLocaleLowerCase();
-    return p(r, i.value);
+    const r = s.value.toLocaleLowerCase();
+    return b(r, i.value);
   });
 }
-const Da = {
+const za = {
   "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" },
@@ -2338,16 +2429,16 @@ const Da = {
   "ja-JP": { all: "すべて", ariaLabelFallback: "ドロップダウン", clearSearch: "フィルターをクリア" },
   "pt-BR": { all: "Todos", ariaLabelFallback: "Menu suspenso", clearSearch: "Limpar filtro" },
   "zh-CN": { all: "全部", ariaLabelFallback: "下拉菜单", clearSearch: "清除筛选器" }
-}, Ba = F({
-  i18n: { messages: Da },
+}, Ga = z({
+  i18n: { messages: za },
   name: "b-dropdown",
   components: {
-    DropdownInputDefault: da,
-    DropdownInputSmall: Ia
+    DropdownInputDefault: ga,
+    DropdownInputSmall: Ma
   },
   model: { prop: "modelValue" }
-}), Ra = /* @__PURE__ */ F({
-  ...Ba,
+}), Ua = /* @__PURE__ */ z({
+  ...Ga,
   props: {
     description: { default: null },
     disabled: { type: Boolean, default: !1 },
@@ -2368,7 +2459,7 @@ const Da = {
     items: { default: () => [] },
     loading: { type: Boolean, default: !1 },
     componentLoading: { type: Boolean, default: !1 },
-    lazyLoadType: { default: Ne.props.lazyLoadType.default },
+    lazyLoadType: { default: Ve.props.lazyLoadType.default },
     multiple: { type: Boolean, default: !1 },
     search: { default: void 0 },
     showSlotContentInMultiple: { type: Boolean, default: !1 },
@@ -2382,184 +2473,198 @@ const Da = {
   },
   emits: ["input", "update:model-value", "show-more", "open"],
   setup(a, { expose: e, emit: l }) {
-    const t = a, s = Pe(), o = Se(), i = He(o), { t: p } = ae(), { emitValue: _ } = bt(l), c = L(null), r = L(null), m = L(null), u = L(!1), b = te("bento-dropdown-options-container"), x = te("dropdown-label"), g = te("dropdown-description"), M = te("dropdown-error"), { isReadOnly: B } = mt(q(t, "readonly")), v = n(() => t.modelValue ?? t.value), { cachedSelectedListboxOptions: I, cachedListboxSelectedValues: D, setCachedValues: A } = Ul(
-      q(t, "items"),
-      v,
-      q(t, "multiple"),
-      q(t, "enableValueLabelPair")
-    ), w = L(s["aria-label"]), T = L(s["aria-describedby"]), { ariaLabel: G, label: U } = je(t), h = n(() => p("ariaLabelFallback")), R = ft({
+    const t = a, o = Ge(), s = he(), i = lt(s), { t: b } = de(), { emitValue: m } = Ct(l), d = x(null), r = x(null), v = x(null), c = x(!1), p = x(!1), _ = ce("bento-dropdown-options-container"), O = ce("dropdown-label"), w = ce("dropdown-description"), P = ce("dropdown-error"), { isReadOnly: h } = It(H(t, "readonly")), C = n(() => t.modelValue ?? t.value), { cachedSelectedListboxOptions: S, cachedListboxSelectedValues: T, setCachedValues: E } = Zl(
+      H(t, "items"),
+      C,
+      H(t, "multiple"),
+      H(t, "enableValueLabelPair")
+    ), A = x(o["aria-label"]), N = x(o["aria-describedby"]), { ariaLabel: Y, label: G } = tt(t), L = n(() => b("ariaLabelFallback")), I = xt({
       // TODO: take ariaLabel ref away when aria-label prop is removed
-      ariaLabel: G.value || w,
-      label: U,
-      defaultFallback: h
-    }), k = t.size === ye.SMALL || Fe(Zl, !1), y = n(() => k ? ye.SMALL : ye.DEFAULT), P = n(() => ({
+      ariaLabel: Y.value || A,
+      label: G,
+      defaultFallback: L
+    }), R = t.size === ge.SMALL || Ue(ia, !1), F = n(() => R ? ge.SMALL : ge.DEFAULT), J = n(() => ({
       "b-dropdown--condensed": t.condensed
-    })), ie = n(() => ({
+    })), X = n(() => ({
       "b-dropdown__description--error": !!t.errorMessage
-    })), K = L(""), j = q(t, "items"), ee = q(t, "staticCategories"), re = ka(
-      K,
-      j,
+    })), q = x(""), y = H(t, "items"), Q = H(t, "staticCategories"), te = Va(
+      q,
+      y,
       t?.search?.searchEvent,
-      ee,
+      Q,
       t?.search?.debounceTime
-    ), _e = n(() => t.dynamicFiltering && !!K.value), ke = wa({
-      items: j,
-      placeholder: q(t, "placeholder"),
-      isMultiSelect: q(t, "multiple"),
-      selectedValues: I
-    }), De = n(() => {
-      if (t?.multiple && Array.isArray(v.value))
+    ), D = n(() => t.dynamicFiltering && !!q.value), ve = $a({
+      items: y,
+      placeholder: H(t, "placeholder"),
+      isMultiSelect: H(t, "multiple"),
+      selectedValues: S
+    }), we = n(() => {
+      if (t?.multiple && Array.isArray(C.value))
         return t.items.filter(
-          ({ value: C }) => t?.value && (t?.value).includes(C)
+          ({ value: M }) => t?.value && (t?.value).includes(M)
         );
       if (!t.multiple && t.staticCategories) {
-        const C = t.items.find(
-          (O) => O.items?.some((ve) => ve.value === v.value)
+        const M = t.items.find(
+          (se) => se.items?.some((je) => je.value === C.value)
         );
-        return (C ? C.items.find((O) => O.value === v.value) : t.items.find(({ value: O }) => O === v.value)) ?? null;
+        return (M ? M.items.find((se) => se.value === C.value) : t.items.find(({ value: se }) => se === C.value)) ?? null;
       }
-      return t.items.find(({ value: C }) => C === v.value);
-    }), ce = n(() => {
-      const $ = (de.value ? ue.value : re.value).findIndex(({ value: O }) => t.enableValueLabelPair ? v.value?.value === O : v.value === O);
-      return $ > -1 ? $ : 0;
-    }), { isMultiLevelSelect: de, flattenedItemsList: ue } = st(j), J = n(() => de.value && !t.staticCategories), pe = n(() => J.value ? "treeitem" : "option"), xe = n(() => {
+      return t.items.find(({ value: M }) => M === C.value);
+    }), Se = n(() => {
+      const ne = (pe.value ? ae.value : te.value).findIndex(({ value: se }) => t.enableValueLabelPair ? C.value?.value === se : C.value === se);
+      return ne > -1 ? ne : 0;
+    }), { isMultiLevelSelect: pe, flattenedItemsList: ae } = pt(y), me = n(() => pe.value && !t.staticCategories), xe = n(() => me.value ? "treeitem" : "option"), Ne = n(() => {
       if (t.multiple) {
-        const C = Array.isArray(v.value) ? v.value.length : 0, $ = de.value ? ue.value.length : j.value.length;
-        return C === 0 ? null : !t.hasMoreItems && $ > 0 && $ === C ? p("all") : C;
+        const M = Array.isArray(C.value) ? C.value.length : 0, ne = pe.value ? ae.value.length : y.value.length;
+        return M === 0 ? null : !t.hasMoreItems && ne > 0 && ne === M ? b("all") : M;
       }
       return null;
-    }), Be = n(
+    }), oe = n(
+      () => te.value.find((M) => !t.isOptionDisabled?.(M))
+    ), ye = n(() => t.multiple || !D.value || !p.value ? "" : oe.value?.label ?? ""), Te = n(() => ye.value.toLocaleLowerCase().startsWith(q.value.toLocaleLowerCase()) ? ye.value.slice(q.value.length) : ""), Ce = n(
+      () => !t.multiple && c.value && D.value && p.value && oe.value ? ct(_, oe.value.value) : null
+    ), Ie = n(
+      () => Ce.value ? te.value.findIndex(({ value: M }) => M === oe.value?.value) : -1
+    ), Le = (M) => {
+      q.value = M, p.value = !0;
+    }, $e = n(
       () => [
-        t.description ? g : null,
-        T.value,
-        t.errorMessage ? M : null
+        t.description ? w : null,
+        N.value,
+        t.errorMessage ? P : null
       ].filter(Boolean).join(" ") || null
-    ), fe = n(() => {
-      const C = m.value?.dropdownOptionsListboxRef;
-      return C?.listboxRef?.value ?? C?.listboxRef;
-    }), { visibleDomOptions: ge, updateVisibleDomOptions: be } = ze(
-      fe,
-      re,
-      pe
-    ), he = () => {
-      B.value || (u.value = !0, Y(() => {
-        be();
+    ), _e = n(() => {
+      const M = v.value?.dropdownOptionsListboxRef;
+      return M?.listboxRef?.value ?? M?.listboxRef;
+    }), { visibleDomOptions: Ae, updateVisibleDomOptions: Oe } = We(
+      _e,
+      te,
+      xe
+    ), De = () => {
+      h.value || (c.value = !0, Z(() => {
+        Oe();
       }));
-    }, se = () => {
-      u.value = !1;
-    }, me = () => {
-      B.value || (u.value = !u.value, Y(() => {
-        be();
-      }), _e.value && (K.value = ""));
-    }, Ce = () => {
-      _e.value && (K.value = ""), u.value && (u.value = !1, m.value.onOutsideDropdownClick());
-    }, Le = n(() => [
-      Ce,
+    }, f = () => {
+      c.value = !1;
+    }, g = () => {
+      h.value || (c.value = !c.value, Z(() => {
+        Oe();
+      }), D.value && (q.value = ""));
+    }, k = () => {
+      D.value && (q.value = ""), c.value && (c.value = !1, v.value.onOutsideDropdownClick());
+    }, $ = n(() => [
+      k,
       {
-        ignore: [fe]
+        ignore: [_e]
       }
-    ]), Oe = async (C) => {
-      t.multiple || (K.value = "", u.value = !1), A(C), _(D.value), t.multiple || (await Y(), E());
-    }, Ie = () => {
-      l(d.SHOW_MORE);
-    }, Re = Ta(
+    ]), V = async (M) => {
+      t.multiple || (q.value = "", c.value = !1), E(M), m(T.value), t.multiple || (await Z(), Pe());
+    }, j = async () => oe.value ? (await V([oe.value]), !0) : !1, B = () => {
+      l(u.SHOW_MORE);
+    }, Ee = Pa(
       {
-        inputContainerRef: c,
-        optionsContainerRef: m,
-        selectedValueIndex: ce,
-        isDropdownOpen: u,
-        isDynamicFltering: q(t, "dynamicFiltering"),
-        items: ge,
-        isMultiple: t.multiple,
-        totalItemCount: n(() => re.value.length),
-        isVirtualScroll: !t?.multiple && t?.virtualScroll !== !1 && t?.lazyLoadType === "none"
+        inputContainerRef: d,
+        optionsContainerRef: v,
+        selectedValueIndex: Se,
+        isDropdownOpen: c,
+        isDynamicFltering: H(t, "dynamicFiltering"),
+        items: Ae,
+        isMultiple: H(t, "multiple"),
+        isSearching: D,
+        activeDescendantIndex: Ie,
+        selectFirstMatchedOption: j,
+        totalItemCount: n(() => te.value.length),
+        isVirtualScroll: !t?.multiple && t?.virtualScroll !== !1 && t?.lazyLoadType === "none",
+        removeActiveDescendant: () => {
+          p.value = !1;
+        }
       },
-      me,
-      he,
-      se
-    ), f = Aa(
+      g,
+      De,
+      f
+    ), qe = Fa(
       {
-        inputContainerRef: c,
-        isDropdownOpen: u
+        inputContainerRef: d,
+        isDropdownOpen: c
       },
-      se
-    ), S = {
-      [d.CLOSE_DROPDOWN]: se,
-      [d.SELECT]: Oe,
-      [d.SHOW_MORE]: Ie,
-      ...f
+      f
+    ), yt = {
+      [u.CLOSE_DROPDOWN]: f,
+      [u.SELECT]: V,
+      [u.SHOW_MORE]: B,
+      ...qe
     };
-    t.error && Me(
+    t.error && Fe(
       'BentoDropdown "error" property',
       `Use the BentoDropdown "errorMessage" property instead to indicate that there is a modifier error.
                             Having the field as "undefined" will hide/remove the error.
                             <bento-dropdown errorMessage="Error message text" />`,
       "2.0.0"
-    ), t.size && Me('BentoDropdown "size" property', "Do not use. Only 'default' size should be used.", "2.0.0"), t.value && Me(
+    ), t.size && Fe('BentoDropdown "size" property', "Do not use. Only 'default' size should be used.", "2.0.0"), t.value && Fe(
       'BentoDropdown "value" property',
       `The use of "value" prop in "BentoDropdown" is no longer supported.
                 Use the "v-model" or "model-value" property instead.`,
       "2.0.0"
     );
-    const E = () => {
-      c.value?.focus();
-    }, N = async () => {
-      if (await Y(), !u.value || t.multiple || !m.value)
+    const Pe = () => {
+      d.value?.focus();
+    }, Ye = async () => {
+      if (await Z(), !c.value || t.multiple || !v.value)
         return;
-      const C = ce.value;
-      if (C <= 0)
+      const M = Se.value;
+      if (M <= 0)
         return;
-      const $ = m.value.dropdownOptionsListboxRef, O = $?.listboxRef;
-      $?.listboxItemRef?.scrollToItem?.(C, O);
+      const ne = v.value.dropdownOptionsListboxRef, se = ne?.listboxRef;
+      ne?.listboxItemRef?.scrollToItem?.(M, se);
     };
-    return Q(
-      () => u.value,
-      (C) => {
-        C && (l("open"), N());
+    return ee(
+      () => c.value,
+      (M) => {
+        M && (l("open"), Ye());
       }
     ), e({
-      focus: E
-    }), { __sfc: !0, attrs: s, slots: o, hasSlot: i, props: t, emit: l, t: p, emitValue: _, inputContainerRef: c, inputContainerRefWrapper: r, optionsContainerRef: m, isDropdownOpen: u, dropdownOptionsContainerId: b, labelId: x, descriptionId: g, errorId: M, isReadOnly: B, dropdownValue: v, cachedSelectedListboxOptions: I, cachedListboxSelectedValues: D, setCachedValues: A, ariaLabelAttribute: w, ariaDescribedByAttribute: T, ariaLabel: G, label: U, computedAriaLabelFallbackMessage: h, computedAriaLabel: R, isInputComponent: k, computedSize: y, conditionalClasses: P, descriptionConditionalClasses: ie, searchTerm: K, items: j, staticCategories: ee, filteredItems: re, isSearching: _e, displayValue: ke, selectedValueItem: De, selectedValueIndex: ce, isMultiLevelSelect: de, flattenedItemsList: ue, isTreePattern: J, computedOptionRole: pe, additionalItemsSelected: xe, ariaDescribedBy: Be, listboxRef: fe, visibleDomOptions: ge, updateVisibleDomOptions: be, openDropdown: he, closeDropdown: se, toggleDropdown: me, clickOutsideDropdown: Ce, clickOutsideDropdownOptions: Le, onOptionSelected: Oe, emitShowMoreEvent: Ie, textboxKeyboardNavigationListeners: Re, listboxKeyboardNavigationListeners: f, listboxListeners: S, focus: E, scrollToSelectedOption: N, BentoDropdownOptionsContainer: Xl, BentoTypography: le, ErrorMessage: Ot, FieldLabel: Lt, BentoTeleport: xt, vBentoClickOutsideDirective: Ct, vBentoKeyboardNavigationDirective: Te };
+      focus: Pe
+    }), { __sfc: !0, attrs: o, slots: s, hasSlot: i, props: t, emit: l, t: b, emitValue: m, inputContainerRef: d, inputContainerRefWrapper: r, optionsContainerRef: v, isDropdownOpen: c, shouldShowActiveDescendant: p, dropdownOptionsContainerId: _, labelId: O, descriptionId: w, errorId: P, isReadOnly: h, dropdownValue: C, cachedSelectedListboxOptions: S, cachedListboxSelectedValues: T, setCachedValues: E, ariaLabelAttribute: A, ariaDescribedByAttribute: N, ariaLabel: Y, label: G, computedAriaLabelFallbackMessage: L, computedAriaLabel: I, isInputComponent: R, computedSize: F, conditionalClasses: J, descriptionConditionalClasses: X, searchTerm: q, items: y, staticCategories: Q, filteredItems: te, isSearching: D, displayValue: ve, selectedValueItem: we, selectedValueIndex: Se, isMultiLevelSelect: pe, flattenedItemsList: ae, isTreePattern: me, computedOptionRole: xe, additionalItemsSelected: Ne, firstEnabledFilteredItem: oe, autocompleteSuggestion: ye, autocompleteSuggestionSuffix: Te, activeDescendantId: Ce, activeDescendantIndex: Ie, onSearchTermInput: Le, ariaDescribedBy: $e, listboxRef: _e, visibleDomOptions: Ae, updateVisibleDomOptions: Oe, openDropdown: De, closeDropdown: f, toggleDropdown: g, clickOutsideDropdown: k, clickOutsideDropdownOptions: $, onOptionSelected: V, selectFirstMatchedOption: j, emitShowMoreEvent: B, textboxKeyboardNavigationListeners: Ee, listboxKeyboardNavigationListeners: qe, listboxListeners: yt, focus: Pe, scrollToSelectedOption: Ye, BentoDropdownOptionsContainer: na, BentoTypography: ue, ErrorMessage: Rt, FieldLabel: Bt, BentoTeleport: Dt, vBentoClickOutsideDirective: kt, vBentoKeyboardNavigationDirective: Re };
   }
 });
-var Ma = function() {
+var Wa = function() {
   var e = this, l = e._self._c, t = e._self._setupProxy;
-  return l("div", { directives: [{ name: "bento-click-outside-directive", rawName: "v-bento-click-outside-directive", value: t.clickOutsideDropdownOptions, expression: "clickOutsideDropdownOptions" }], staticClass: "b-dropdown", class: t.conditionalClasses }, [t.label ? l(t.FieldLabel, { attrs: { id: t.labelId, condensed: e.condensed, label: t.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, ariaExpanded: t.isDropdownOpen, "aria-labelledby": t.label ? t.labelId : null, "aria-describedby": t.ariaDescribedBy, "aria-label": t.computedAriaLabel, "aria-readonly": t.isReadOnly, "aria-required": e.required, readonly: t.isReadOnly, disabled: e.disabled, "display-value": t.displayValue, "dynamic-filtering": e.dynamicFiltering, "is-invalid": !!e.errorMessage || e.error, multiple: e.multiple, open: t.isDropdownOpen, "selected-value-item": t.isInputComponent ? void 0 : t.selectedValueItem, "show-slot-content-in-multiple": e.showSlotContentInMultiple }, on: { input: function(s) {
-    t.searchTerm = s;
-  }, open: t.toggleDropdown, close: t.toggleDropdown }, scopedSlots: e._u([e._l(t.slots, function(s, o) {
-    return { key: o, fn: function(i) {
-      return [e._t(o, null, null, i)];
+  return l("div", { directives: [{ name: "bento-click-outside-directive", rawName: "v-bento-click-outside-directive", value: t.clickOutsideDropdownOptions, expression: "clickOutsideDropdownOptions" }], staticClass: "b-dropdown", class: t.conditionalClasses }, [t.label ? l(t.FieldLabel, { attrs: { id: t.labelId, condensed: e.condensed, label: t.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": t.label ? t.labelId : null, "aria-describedby": t.ariaDescribedBy, "aria-label": t.computedAriaLabel, "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 || e.error, 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 [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(o, s) {
+    return { key: s, fn: function(i) {
+      return [e._t(s, null, null, i)];
     } };
-  })], null, !0) })], 1), t.inputContainerRef ? l(t.BentoTeleport, { attrs: { disabled: e.teleport?.disabled, to: e.teleport?.to } }, [l(t.BentoDropdownOptionsContainer, e._g({ ref: "optionsContainerRef", attrs: { id: t.dropdownOptionsContainerId, "aria-label": t.computedAriaLabel, "component-loading": e.componentLoading, "empty-state": e.emptyState, disabled: e.disabled, "is-option-disabled": e.isOptionDisabled, items: t.filteredItems, multiple: e.multiple, "static-categories": t.staticCategories, open: t.isDropdownOpen, "selected-value": t.cachedSelectedListboxOptions, searching: t.isSearching, "target-element": t.inputContainerRefWrapper, loading: e.loading, "has-more-items": e.hasMoreItems, "lazy-load-type": e.lazyLoadType, "virtual-scroll": e.virtualScroll }, scopedSlots: e._u([e._l(t.slots, function(s, o) {
-    return { key: o, fn: function(i) {
-      return [e._t(o, null, null, i)];
+  })], null, !0) })], 1), t.inputContainerRef ? l(t.BentoTeleport, { attrs: { disabled: e.teleport?.disabled, to: e.teleport?.to } }, [l(t.BentoDropdownOptionsContainer, e._g({ ref: "optionsContainerRef", attrs: { id: t.dropdownOptionsContainerId, "aria-label": t.computedAriaLabel, "active-descendant-id": t.activeDescendantId, "component-loading": e.componentLoading, "empty-state": e.emptyState, disabled: e.disabled, "is-option-disabled": e.isOptionDisabled, items: t.filteredItems, multiple: e.multiple, "static-categories": t.staticCategories, open: t.isDropdownOpen, "selected-value": t.cachedSelectedListboxOptions, searching: t.isSearching, "target-element": t.inputContainerRefWrapper, loading: e.loading, "has-more-items": e.hasMoreItems, "lazy-load-type": e.lazyLoadType, "virtual-scroll": e.virtualScroll }, scopedSlots: e._u([e._l(t.slots, function(o, s) {
+    return { key: s, fn: function(i) {
+      return [e._t(s, null, null, i)];
     } };
   })], 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);
-}, Na = [], $a = /* @__PURE__ */ V(
-  Ra,
-  Ma,
-  Na,
+}, Ka = [], qa = /* @__PURE__ */ W(
+  Ua,
+  Wa,
+  Ka,
   !1,
   null,
-  "61fced3a"
+  "824ac155"
 );
-const ps = $a.exports;
+const xo = qa.exports;
 export {
-  ps as B,
-  zt as C,
-  da as D,
-  d as a,
-  Z as b,
-  ye as c,
-  Ne as d,
-  st as e,
-  ka as f,
-  ot as g,
-  Zl as h,
-  nt as i,
-  Ve as j,
-  Ul as u
+  xo as B,
+  Ht as C,
+  ga as D,
+  u as a,
+  re as b,
+  ge as c,
+  Ve as d,
+  pt as e,
+  Va as f,
+  ft as g,
+  ia as h,
+  bt as i,
+  Ke as j,
+  Zl as u
 };
-//# sourceMappingURL=dropdown.Ce2P9MZ-.js.map
+//# sourceMappingURL=dropdown.D1HNF4S9.js.map