@adyen/bento-vue3 2.1.0 → 2.2.0

package/dist/chunks/{dropdown.BoSI-Rre.js → dropdown.BJ0cJ9Ea.js}

@@ -1,31 +1,31 @@
-import { computed as r, ref as A, onMounted as Wt, onUnmounted as qt, watch as he, defineComponent as Q, resolveComponent as H, openBlock as p, createElementBlock as I, createVNode as q, withCtx as R, createTextVNode as ne, toDisplayString as j, createElementVNode as Z, renderSlot as J, mergeProps as V, withKeys as Se, getCurrentInstance as at, createCommentVNode as Y, createBlock as F, withModifiers as Oe, normalizeProps as ve, guardReactiveProps as Ae, withDirectives as Le, vShow as ze, nextTick as be, toRef as de, resolveDirective as Lt, toHandlers as fe, Fragment as Ce, renderList as re, createSlots as Ee, normalizeClass as we, unref as v, useSlots as Ge, useAttrs as vt, toRefs as Yt, resolveDynamicComponent as It, inject as ft } from "vue";
-import { B as Be } from "./typography.B6elnWpr.js";
-import { g as De } from "./generate-uid.DBWe4g6T.js";
-import { u as Re } from "./index.CGBfMQdv.js";
-import { s as Fe } from "./events.BQOQSSb7.js";
-import { u as Et } from "./use-has-slot.CyMiImRQ.js";
-import { _ as jt } from "./cross-circle-fill.DJbpTaVE.js";
-import { _ as Ht } from "./cross-circle-fill-small.C87G_8OX.js";
-import { _ as ue } from "./_plugin-vue_export-helper.CHgC5LLL.js";
-import { _ as Ot } from "./chevron-down.DDkuHzKj.js";
-import { _ as Tt } from "./chevron-up.CE9uVcoS.js";
+import { computed as r, ref as A, onMounted as qt, onUnmounted as Yt, watch as pe, defineComponent as le, resolveComponent as Z, openBlock as p, createElementBlock as E, createVNode as X, withCtx as B, createTextVNode as oe, toDisplayString as q, createElementVNode as Y, renderSlot as Q, mergeProps as z, withKeys as Ce, getCurrentInstance as ot, createCommentVNode as j, createBlock as M, withModifiers as ge, normalizeProps as me, guardReactiveProps as we, withDirectives as Le, vShow as Ke, nextTick as ne, toRef as de, resolveDirective as It, toHandlers as ve, Fragment as ye, renderList as ie, createSlots as Te, normalizeClass as _e, unref as f, useSlots as Ue, useAttrs as mt, toRefs as jt, resolveDynamicComponent as Et, inject as vt } from "vue";
+import { B as Me } from "./typography.B6elnWpr.js";
+import { g as xe } from "./generate-uid.DBWe4g6T.js";
+import { u as Ne } from "./index.CGBfMQdv.js";
+import { u as Ht } from "./form-field.B60VsF8d.js";
+import { u as Jt } from "./use-form-layout-loading.CWbjZiwP.js";
+import { u as Ot } from "./use-has-slot.CyMiImRQ.js";
+import { B as Xt } from "./directive.D1-d-C2K.js";
+import { B as ae, a as Xe } from "./keyboard-navigation.DWmhelVv.js";
+import { B as Tt } from "./loading-indicator.BPol9I84.js";
+import { B as At } from "./empty-state.CECdMida.js";
+import { B as lt, _ as Zt } from "./minus-small.DBR64xRS.js";
+import { _ as Qt } from "./checkmark-small.DJcd8Sd7.js";
 /* empty css              */
-import { u as Jt } from "./form-field.B60VsF8d.js";
-import { u as Xt } from "./use-form-layout-loading.CWbjZiwP.js";
-import { B as Zt } from "./directive.D1-d-C2K.js";
-import { B as le, a as je } from "./keyboard-navigation.DWmhelVv.js";
-import { B as At } from "./loading-indicator.BPol9I84.js";
-import { B as wt } from "./empty-state.BuK12EGe.js";
-import { B as tt, _ as Qt } from "./minus-small.DBR64xRS.js";
-import { _ as el } from "./checkmark-small.DJcd8Sd7.js";
-import { B as tl } from "./chip.D4OozULC.js";
-import { b as lt, a as ll, h as al, e as ol } from "./button-actions.DvuGEQxM.js";
-import { o as sl } from "./resize.Bqks3WUm.js";
-import { F as nl } from "./field-label.vrUwhoOg.js";
-import { P as ht } from "./popper-container.Rfj8UdMD.js";
-import { E as il } from "./error-message.DJ5l0EUH.js";
+import { _ as ce } from "./_plugin-vue_export-helper.CHgC5LLL.js";
+import { B as el } from "./chip.D4OozULC.js";
+import { _ as wt } from "./chevron-down.DDkuHzKj.js";
+import { _ as _t } from "./chevron-up.CE9uVcoS.js";
+import { b as at, a as tl, h as ll, e as al } from "./button-actions.BYoctIth.js";
+import { o as ol } from "./resize.Bqks3WUm.js";
+import { F as sl } from "./field-label.Dm9I8IDI.js";
+import { P as St } from "./popper-container.lfk_dyZi.js";
+import { E as nl } from "./error-message.DJ5l0EUH.js";
+import { s as Ve } from "./events.BQOQSSb7.js";
+import { _ as il } from "./cross-circle-fill.DJbpTaVE.js";
+import { _ as rl } from "./cross-circle-fill-small.C87G_8OX.js";
 import "../assets/dropdown.css";
-const _t = (e, a, o, l) => {
+const kt = (e, a, o, l) => {
   const i = r(
     () => !!e.value?.length && e.value?.length === a.value.length
   ), s = r(() => e.value == null || e.value.length === 0 ? !1 : e.value?.length !== a.value.length);
@@ -37,73 +37,73 @@ const _t = (e, a, o, l) => {
     }
   };
 };
-function rl(e, { disabled: a, itemHeight: o, overscan: l = 5, prefixHeight: i }) {
-  const s = A(null), n = A([]), t = A(0), f = A(0), u = A(0);
-  let c;
-  const d = r(() => {
-    const T = typeof o == "number" ? e.value.length * o : e.value.reduce((_, L, x) => _ + o(x), 0), M = typeof o == "number" ? t.value * o : e.value.slice(0, t.value).reduce((_, L, x) => _ + o(x), 0);
+function dl(e, { disabled: a, itemHeight: o, overscan: l = 5, prefixHeight: i }) {
+  const s = A(null), n = A([]), t = A(0), m = A(0), d = A(0);
+  let u;
+  const c = r(() => {
+    const C = typeof o == "number" ? e.value.length * o : e.value.reduce(($, I, k) => $ + o(k), 0), N = typeof o == "number" ? t.value * o : e.value.slice(0, t.value).reduce(($, I, k) => $ + o(k), 0);
     return {
       style: {
-        marginTop: `${M}px`,
-        height: `${T - M}px`
+        marginTop: `${N}px`,
+        height: `${C - N}px`
       }
     };
   }), b = () => {
-    const T = i?.value ?? 0, M = Math.max(s.value.scrollTop - T, 0);
+    const C = i?.value ?? 0, N = Math.max(s.value.scrollTop - C, 0);
     if (typeof o == "number")
-      return Math.floor(M / o);
-    let _ = 0, L = 0;
-    for (let x = 0; x < e.value.length; x += 1) {
-      const D = o(x);
-      if (_ += D, _ >= M) {
-        L = x;
+      return Math.floor(N / o);
+    let $ = 0, I = 0;
+    for (let k = 0; k < e.value.length; k += 1) {
+      const W = o(k);
+      if ($ += W, $ >= N) {
+        I = k;
         break;
       }
     }
-    return L;
-  }, S = () => {
-    if (u.value = s.value.clientHeight, typeof o == "number")
-      return Math.ceil(u.value / o);
-    const T = t.value ?? 0;
-    let M = 0, _ = 0;
-    for (let L = T; L < e.value.length; L += 1) {
-      const x = o(L);
-      if (M += x, _ = L, M > u.value)
+    return I;
+  }, v = () => {
+    if (d.value = s.value.clientHeight, typeof o == "number")
+      return Math.ceil(d.value / o);
+    const C = t.value ?? 0;
+    let N = 0, $ = 0;
+    for (let I = C; I < e.value.length; I += 1) {
+      const k = o(I);
+      if (N += k, $ = I, N > d.value)
         break;
     }
-    return _ - T;
-  }, h = () => {
+    return $ - C;
+  }, S = () => {
     if (s.value) {
-      const T = S();
-      t.value = b(), f.value = Math.min(t.value + T + l, e.value.length), n.value = e.value.slice(t.value, f.value);
+      const C = v();
+      t.value = b(), m.value = Math.min(t.value + C + l, e.value.length), n.value = e.value.slice(t.value, m.value);
     }
-  }, N = () => {
-    h();
+  }, D = () => {
+    S();
   };
-  a || (Wt(() => {
-    s.value && (u.value = s.value.clientHeight, c = sl(s.value, ({ clientHeight: T }) => {
-      u.value = T, h();
-    }), h());
-  }), qt(() => {
-    c?.disconnect();
-  }), he(
+  a || (qt(() => {
+    s.value && (d.value = s.value.clientHeight, u = ol(s.value, ({ clientHeight: C }) => {
+      d.value = C, S();
+    }), S());
+  }), Yt(() => {
+    u?.disconnect();
+  }), pe(
     () => e.value,
     () => {
-      h();
+      S();
     }
   ));
-  const w = {
+  const G = {
     ref: s,
     style: { overflowY: "auto" }
-  }, $ = (T) => {
+  }, x = (C) => {
     if (!s.value)
       return;
-    const M = typeof o == "number" ? T * o : e.value.slice(0, T).reduce((ie, oe, P) => ie + o(P), 0), _ = typeof o == "number" ? o : o(T), L = M + _, { scrollTop: x, clientHeight: D } = s.value, z = x + D;
-    L > z ? s.value.scrollTop = D > 0 ? L - D : M : M < x && (s.value.scrollTop = M), h();
+    const N = typeof o == "number" ? C * o : e.value.slice(0, C).reduce((H, re, _) => H + o(_), 0), $ = typeof o == "number" ? o : o(C), I = N + $, { scrollTop: k, clientHeight: W } = s.value, P = k + W;
+    I > P ? s.value.scrollTop = W > 0 ? I - W : N : N < k && (s.value.scrollTop = N), S();
   };
   return a ? {
     containerRef: s,
-    containerProps: w,
+    containerProps: G,
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     onScroll: () => {
     },
@@ -114,19 +114,19 @@ function rl(e, { disabled: a, itemHeight: o, overscan: l = 5, prefixHeight: i })
     startIndex: A(0)
   } : {
     containerRef: s,
-    containerProps: w,
-    onScroll: N,
+    containerProps: G,
+    onScroll: D,
     list: n,
-    wrapperProps: d,
-    scrollToIndex: $,
+    wrapperProps: c,
+    scrollToIndex: x,
     startIndex: t
   };
 }
-var y = /* @__PURE__ */ ((e) => (e.SELECT = "select", e.SHOW_MORE = "show-more", e.ESCAPE = "escape-pressed", e.CLICK = "click", e.ENTER = "enter-pressed", e.SPACE = "space-pressed", e.TAB = "tab-pressed", e.CLOSE_DROPDOWN = "close-dropdown", e))(y || {}), $e = /* @__PURE__ */ ((e) => (e.AUTOMATIC = "automatic", e.BUTTON = "button", e.NONE = "none", e))($e || {});
-const dl = Q({
+var g = /* @__PURE__ */ ((e) => (e.SELECT = "select", e.SHOW_MORE = "show-more", e.ESCAPE = "escape-pressed", e.CLICK = "click", e.ENTER = "enter-pressed", e.SPACE = "space-pressed", e.TAB = "tab-pressed", e.CLOSE_DROPDOWN = "close-dropdown", e))(g || {}), Ae = /* @__PURE__ */ ((e) => (e.AUTOMATIC = "automatic", e.BUTTON = "button", e.NONE = "none", e))(Ae || {});
+const cl = le({
   name: "bento-listbox-static-category",
   components: {
-    BentoTypography: Be
+    BentoTypography: Me
   },
   props: {
     /**
@@ -138,30 +138,30 @@ const dl = Q({
     }
   }
 }), ul = ["aria-label"];
-function cl(e, a, o, l, i, s) {
-  const n = H("bento-typography");
-  return p(), I("div", {
+function pl(e, a, o, l, i, s) {
+  const n = Z("bento-typography");
+  return p(), E("div", {
     class: "b-listbox-single-select-category",
     role: "group",
     "aria-label": e.categoryLabel
   }, [
-    q(n, {
+    X(n, {
       variant: "caption",
       el: "span",
       class: "b-listbox-single-select-category__label-text",
       "aria-hidden": "true"
     }, {
-      default: R(() => [
-        ne(j(e.categoryLabel), 1)
+      default: B(() => [
+        oe(q(e.categoryLabel), 1)
       ]),
       _: 1
     }),
-    Z("div", null, [
-      J(e.$slots, "default", {}, void 0, !0)
+    Y("div", null, [
+      Q(e.$slots, "default", {}, void 0, !0)
     ])
   ], 8, ul);
 }
-const pl = /* @__PURE__ */ ue(dl, [["render", cl], ["__scopeId", "data-v-27c4e09a"]]), bl = Q({
+const bl = /* @__PURE__ */ ce(cl, [["render", pl], ["__scopeId", "data-v-27c4e09a"]]), fl = le({
   name: "bento-listbox-option",
   props: {
     /**
@@ -177,7 +177,7 @@ const pl = /* @__PURE__ */ ue(dl, [["render", cl], ["__scopeId", "data-v-27c4e09
      */
     selected: { type: Boolean, default: !1 }
   },
-  emits: [y.CLICK, y.ENTER, y.SPACE, y.TAB],
+  emits: [g.CLICK, g.ENTER, g.SPACE, g.TAB],
   setup(e, { emit: a }) {
     const o = r(() => ({
       "b-listbox-option--active": e.active,
@@ -186,13 +186,13 @@ const pl = /* @__PURE__ */ ue(dl, [["render", cl], ["__scopeId", "data-v-27c4e09
     }));
     return {
       // Enums
-      BentoKeyboardNavigationKeyDownEvent: le,
-      BentoListboxEvent: y,
+      BentoKeyboardNavigationKeyDownEvent: ae,
+      BentoListboxEvent: g,
       // Values
       conditionalClasses: o,
       // Events
       onClick: (s) => {
-        a(y.CLICK, s);
+        a(g.CLICK, s);
       },
       onOptionSelected: (s, n) => {
         a(s, n);
@@ -200,45 +200,45 @@ const pl = /* @__PURE__ */ ue(dl, [["render", cl], ["__scopeId", "data-v-27c4e09
     };
   }
 });
-function vl(e, a, o, l, i, s) {
-  return p(), I("div", V({
+function ml(e, a, o, l, i, s) {
+  return p(), E("div", z({
     class: ["b-listbox-option", e.conditionalClasses],
     role: "option"
   }, e.$attrs, {
     onClick: a[0] || (a[0] = (...n) => e.onClick && e.onClick(...n)),
     onKeydown: [
-      a[1] || (a[1] = Se((n) => e.onOptionSelected(e.BentoListboxEvent.ENTER, n), ["enter"])),
-      a[2] || (a[2] = Se((n) => e.onOptionSelected(e.BentoListboxEvent.SPACE, n), ["space"])),
-      a[3] || (a[3] = Se((n) => e.onOptionSelected(e.BentoListboxEvent.TAB, n), ["tab"]))
+      a[1] || (a[1] = Ce((n) => e.onOptionSelected(e.BentoListboxEvent.ENTER, n), ["enter"])),
+      a[2] || (a[2] = Ce((n) => e.onOptionSelected(e.BentoListboxEvent.SPACE, n), ["space"])),
+      a[3] || (a[3] = Ce((n) => e.onOptionSelected(e.BentoListboxEvent.TAB, n), ["tab"]))
     ]
   }), [
-    J(e.$slots, "default", {}, void 0, !0)
+    Q(e.$slots, "default", {}, void 0, !0)
   ], 16);
 }
-const ot = /* @__PURE__ */ ue(bl, [["render", vl], ["__scopeId", "data-v-29f788bd"]]), fl = { key: 0 }, ml = {
+const st = /* @__PURE__ */ ce(fl, [["render", ml], ["__scopeId", "data-v-29f788bd"]]), vl = { key: 0 }, yl = {
   __name: "checkmark",
   setup(e) {
-    const a = at();
-    return String(a?.uid ?? a?.proxy?._uid), (o, l) => (p(), I("svg", V({ role: "img" }, o.$attrs, {
+    const a = ot();
+    return String(a?.uid ?? a?.proxy?._uid), (o, l) => (p(), E("svg", z({ role: "img" }, o.$attrs, {
       class: "ui-assets-icons-16",
       xmlns: "http://www.w3.org/2000/svg",
       width: "16",
       height: "16",
       fill: "none"
     }), [
-      o.$attrs["svg-title"] ? (p(), I("title", fl, j(o.$attrs["svg-title"]), 1)) : Y("", !0),
-      l[0] || (l[0] = Z("path", {
+      o.$attrs["svg-title"] ? (p(), E("title", vl, q(o.$attrs["svg-title"]), 1)) : j("", !0),
+      l[0] || (l[0] = Y("path", {
         fill: "#001222",
         d: "M15.0608 4.00011L14.0001 2.93945L6.00011 10.9395L2.00011 6.93945L0.939453 8.00011L6.00011 13.0608L15.0608 4.00011Z"
       }, null, -1))
     ], 16));
   }
-}, yl = Q({
+}, gl = le({
   name: "bento-listbox-single-select-option",
   components: {
-    BentoListboxOption: ot,
-    BentoTypography: Be,
-    CheckmarkIcon: ml
+    BentoListboxOption: st,
+    BentoTypography: Me,
+    CheckmarkIcon: yl
   },
   props: {
     /**
@@ -262,7 +262,7 @@ const ot = /* @__PURE__ */ ue(bl, [["render", vl], ["__scopeId", "data-v-29f788b
      */
     selected: { type: Boolean, default: !1 }
   },
-  emits: [y.ENTER, y.SELECT, y.SPACE, y.TAB],
+  emits: [g.ENTER, g.SELECT, g.SPACE, g.TAB],
   setup(e, { emit: a }) {
     const o = (n) => {
       e.disabled || a(n, e.option);
@@ -273,15 +273,15 @@ const ot = /* @__PURE__ */ ue(bl, [["render", vl], ["__scopeId", "data-v-29f788b
       ariaSelected: i,
       tabIndex: s,
       // Enums
-      BentoListboxEvent: y,
+      BentoListboxEvent: g,
       // Events
       onOptionSelected: o
     };
   }
-}), gl = { class: "b-listbox-single-select-option__text" }, hl = { class: "b-listbox-single-select-option__check-icon" };
-function Sl(e, a, o, l, i, s) {
-  const n = H("bento-typography"), t = H("checkmark-icon"), f = H("bento-listbox-option");
-  return p(), F(f, {
+}), hl = { class: "b-listbox-single-select-option__text" }, Sl = { class: "b-listbox-single-select-option__check-icon" };
+function Cl(e, a, o, l, i, s) {
+  const n = Z("bento-typography"), t = Z("checkmark-icon"), m = Z("bento-listbox-option");
+  return p(), M(m, {
     class: "b-listbox-single-select-option",
     active: e.active,
     disabled: e.disabled,
@@ -289,44 +289,44 @@ function Sl(e, a, o, l, i, s) {
     "aria-selected": e.ariaSelected,
     "aria-disabled": e.ariaDisabled,
     tabindex: e.tabIndex,
-    onClick: a[0] || (a[0] = (u) => e.onOptionSelected(e.BentoListboxEvent.SELECT)),
-    onEnterPressed: a[1] || (a[1] = (u) => e.onOptionSelected(e.BentoListboxEvent.ENTER)),
-    onSpacePressed: a[2] || (a[2] = Oe((u) => e.onOptionSelected(e.BentoListboxEvent.SPACE), ["prevent"])),
-    onTabPressed: a[3] || (a[3] = (u) => e.onOptionSelected(e.BentoListboxEvent.TAB))
+    onClick: a[0] || (a[0] = (d) => e.onOptionSelected(e.BentoListboxEvent.SELECT)),
+    onEnterPressed: a[1] || (a[1] = (d) => e.onOptionSelected(e.BentoListboxEvent.ENTER)),
+    onSpacePressed: a[2] || (a[2] = ge((d) => e.onOptionSelected(e.BentoListboxEvent.SPACE), ["prevent"])),
+    onTabPressed: a[3] || (a[3] = (d) => e.onOptionSelected(e.BentoListboxEvent.TAB))
   }, {
-    default: R(() => [
-      J(e.$slots, "default", ve(Ae(e.option)), () => [
-        Z("span", gl, [
-          q(n, { el: "span" }, {
-            default: R(() => [
-              ne(j(e.option.label), 1)
+    default: B(() => [
+      Q(e.$slots, "default", me(we(e.option)), () => [
+        Y("span", hl, [
+          X(n, { el: "span" }, {
+            default: B(() => [
+              oe(q(e.option.label), 1)
             ]),
             _: 1
           }),
-          e.option.description ? (p(), F(n, {
+          e.option.description ? (p(), M(n, {
             key: 0,
             class: "b-listbox-single-select-option__description",
             el: "span"
           }, {
-            default: R(() => [
-              ne(j(e.option.description), 1)
+            default: B(() => [
+              oe(q(e.option.description), 1)
             ]),
             _: 1
-          })) : Y("", !0)
+          })) : j("", !0)
         ])
       ], !0),
-      Z("span", hl, [
-        Le(q(t, { "svg-title": "selected" }, null, 512), [
-          [ze, e.selected]
+      Y("span", Sl, [
+        Le(X(t, { "svg-title": "selected" }, null, 512), [
+          [Ke, e.selected]
         ])
       ])
     ]),
     _: 3
   }, 8, ["active", "disabled", "selected", "aria-selected", "aria-disabled", "tabindex"]);
 }
-const Cl = /* @__PURE__ */ ue(yl, [["render", Sl], ["__scopeId", "data-v-dc2d167c"]]), kt = ({ items: e, totalItemCount: a }, o) => {
-  const l = r(() => a?.value ? a.value - 1 : e.value.length - 1), i = A(0), s = (S) => {
-    switch (S) {
+const Ll = /* @__PURE__ */ ce(gl, [["render", Cl], ["__scopeId", "data-v-dc2d167c"]]), $t = ({ items: e, totalItemCount: a }, o) => {
+  const l = r(() => a?.value ? a.value - 1 : e.value.length - 1), i = A(0), s = (v) => {
+    switch (v) {
       case "increase":
         i.value += 1;
         break;
@@ -334,53 +334,53 @@ const Cl = /* @__PURE__ */ ue(yl, [["render", Sl], ["__scopeId", "data-v-dc2d167
         i.value -= 1;
         break;
     }
-  }, n = ({ edgeCaseItem: S }, h) => {
-    i.value !== S && (s(h), o(i.value));
-  }, t = (S) => {
-    b(S), n(
+  }, n = ({ edgeCaseItem: v }, S) => {
+    i.value !== v && (s(S), o(i.value));
+  }, t = (v) => {
+    b(v), n(
       {
         edgeCaseItem: l.value
       },
       "increase"
       /* INCREASE */
     );
-  }, f = (S) => {
-    b(S), n(
+  }, m = (v) => {
+    b(v), n(
       {
         edgeCaseItem: 0
       },
       "decrease"
       /* DECREASE */
     );
-  }, u = (S) => {
-    b(S), i.value = 0, o(i.value);
-  }, c = (S) => {
-    b(S), i.value = l.value, o(i.value);
-  }, d = (S) => {
-    i.value = S;
-  }, b = (S) => {
-    S?.detail?.preventDefault(), S?.detail?.stopPropagation();
+  }, d = (v) => {
+    b(v), i.value = 0, o(i.value);
+  }, u = (v) => {
+    b(v), i.value = l.value, o(i.value);
+  }, c = (v) => {
+    i.value = v;
+  }, b = (v) => {
+    v?.detail?.preventDefault(), v?.detail?.stopPropagation();
   };
   return {
-    moveToFirstElement: u,
-    moveToLastElement: c,
+    moveToFirstElement: d,
+    moveToLastElement: u,
     moveToNextElement: t,
-    moveToPreviousElement: f,
-    setListboxFocusedIndex: d,
+    moveToPreviousElement: m,
+    setListboxFocusedIndex: c,
     preventDefault: b,
     focusedIndex: i
   };
-}, mt = (e, a, o = A("option"), l = !0) => {
+}, yt = (e, a, o = A("option"), l = !0) => {
   const i = A([]), s = async () => {
     if (!e.value || e.value.nodeType === Node.COMMENT_NODE)
       return;
     const n = Array.from(e.value.querySelectorAll(`[role="${o.value}"]`));
     i.value = l ? n.filter((t) => t.checkVisibility()) : n;
   };
-  return he(
+  return pe(
     a,
     () => {
-      be(() => {
+      ne(() => {
         s();
       });
     },
@@ -389,13 +389,13 @@ const Cl = /* @__PURE__ */ ue(yl, [["render", Sl], ["__scopeId", "data-v-dc2d167
     visibleDomOptions: i,
     updateVisibleDomOptions: s
   };
-}, $t = (e, a) => `${e}-option-${encodeURIComponent(String(a))}`, Ll = Q({
+}, Dt = (e, a) => `${e}-option-${encodeURIComponent(String(a))}`, Il = le({
   name: "bento-listbox-single-select",
   components: {
-    BentoListboxSingleSelectCategory: pl,
-    BentoListboxSingleSelectOption: Cl
+    BentoListboxSingleSelectCategory: bl,
+    BentoListboxSingleSelectOption: Ll
   },
-  directives: { BentoKeyboardNavigationDirective: je },
+  directives: { BentoKeyboardNavigationDirective: Xe },
   inheritAttrs: !1,
   props: {
     /**
@@ -457,71 +457,69 @@ const Cl = /* @__PURE__ */ ue(yl, [["render", Sl], ["__scopeId", "data-v-dc2d167
      */
     virtualScrollStartIndex: { type: Number, default: 0 }
   },
-  emits: [y.SELECT, y.ENTER, y.SPACE, y.TAB],
+  emits: [g.SELECT, g.ENTER, g.SPACE, g.TAB],
   setup(e, { emit: a, expose: o, slots: l, attrs: i }) {
-    const s = A(), n = A([]), t = r(() => !!e.selectedValue?.length && e.selectedValue.at(0)), f = r(
+    const s = A(), n = A([]), t = r(() => !!e.selectedValue?.length && e.selectedValue.at(0)), m = r(
       () => ({
         "aria-label": i["aria-label"]?.toString(),
-        "aria-busy": i["aria-busy"]?.toString(),
-        "aria-atomic": i["aria-atomic"]?.toString(),
-        "aria-live": i["aria-live"]?.toString()
+        "aria-busy": i["aria-busy"]?.toString()
       })
-    ), u = r(() => !!e.items.some(({ items: P }) => !!P)), c = (P) => (k) => {
-      a(P, [k]);
-    }, d = (P) => $t(e.optionIdBase, P.value), { visibleDomOptions: b, updateVisibleDomOptions: S } = mt(
+    ), d = r(() => !!e.items.some(({ items: _ }) => !!_)), u = (_) => (J) => {
+      a(_, [J]);
+    }, c = (_) => Dt(e.optionIdBase, _.value), { visibleDomOptions: b, updateVisibleDomOptions: v } = yt(
       s,
       de(e, "items"),
       A("option"),
       !1
-    ), h = r(() => e.totalItemCount > 0), N = (P) => {
-      if (!h.value)
+    ), S = r(() => e.totalItemCount > 0), D = (_) => {
+      if (!S.value)
         return;
-      const k = P.target;
-      if (k === s.value || k?.getAttribute("role") !== "option")
+      const J = _.target;
+      if (J === s.value || J?.getAttribute("role") !== "option")
         return;
-      const W = b.value.indexOf(k);
-      if (W !== -1) {
-        const ee = W + e.virtualScrollStartIndex;
-        z(ee);
+      const R = b.value.indexOf(J);
+      if (R !== -1) {
+        const V = R + e.virtualScrollStartIndex;
+        P(V);
       }
-    }, w = async (P) => {
-      if (h.value && e.scrollToIndex) {
-        e.scrollToIndex(P), await be(), await S();
-        const k = P - e.virtualScrollStartIndex;
-        b.value[k]?.focus();
+    }, G = async (_) => {
+      if (S.value && e.scrollToIndex) {
+        e.scrollToIndex(_), await ne(), await v();
+        const J = _ - e.virtualScrollStartIndex;
+        b.value[J]?.focus();
       } else
-        b.value[P]?.focus();
-    }, $ = async (P) => {
-      z(P), await w(P);
-    }, T = (P, k) => {
-      if (!P || !k)
+        b.value[_]?.focus();
+    }, x = async (_) => {
+      P(_), await G(_);
+    }, C = (_, J) => {
+      if (!_ || !J)
         return;
-      const W = P.getBoundingClientRect(), ee = k, U = ee.getBoundingClientRect();
-      W.top < U.top ? ee.scrollTop -= U.top - W.top : W.bottom > U.bottom && (ee.scrollTop += W.bottom - U.bottom);
-    }, M = async (P, k) => {
-      await S(), h.value && e.scrollToIndex ? e.scrollToIndex(P) : T(b.value[P], k);
+      const R = _.getBoundingClientRect(), V = J, F = V.getBoundingClientRect();
+      R.top < F.top ? V.scrollTop -= F.top - R.top : R.bottom > F.bottom && (V.scrollTop += R.bottom - F.bottom);
+    }, N = async (_, J) => {
+      await v(), S.value && e.scrollToIndex ? e.scrollToIndex(_) : C(b.value[_], J);
     }, {
-      moveToNextElement: _,
-      moveToPreviousElement: L,
-      moveToFirstElement: x,
-      moveToLastElement: D,
-      setListboxFocusedIndex: z
-    } = kt(
+      moveToNextElement: $,
+      moveToPreviousElement: I,
+      moveToFirstElement: k,
+      moveToLastElement: W,
+      setListboxFocusedIndex: P
+    } = $t(
       {
         items: b,
         totalItemCount: de(e, "totalItemCount")
       },
-      w
-    ), ie = {
-      [le.ARROW_UP]: L,
-      [le.ARROW_DOWN]: _,
-      [le.HOME]: x,
-      [le.END]: D
-    }, oe = {
-      [y.SELECT]: c(y.SELECT),
-      [y.SPACE]: c(y.SPACE),
-      [y.TAB]: c(y.TAB),
-      [y.ENTER]: c(y.ENTER)
+      G
+    ), H = {
+      [ae.ARROW_UP]: I,
+      [ae.ARROW_DOWN]: $,
+      [ae.HOME]: k,
+      [ae.END]: W
+    }, re = {
+      [g.SELECT]: u(g.SELECT),
+      [g.SPACE]: u(g.SPACE),
+      [g.TAB]: u(g.TAB),
+      [g.ENTER]: u(g.ENTER)
     };
     return o({
       /**
@@ -533,134 +531,134 @@ const Cl = /* @__PURE__ */ ue(yl, [["render", Sl], ["__scopeId", "data-v-dc2d167
        * 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: z,
+      setListboxFocusedIndex: P,
       /**
        * Navigates to an item by global index, handling virtual scroll if enabled.
        * Scrolls the virtual list and focuses the item.
        */
-      navigateToItem: $,
+      navigateToItem: x,
       /**
        * 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: M
+      scrollToItem: N
     }), {
       // Enums
-      BentoListboxEvent: y,
+      BentoListboxEvent: g,
       // Values
       listboxRef: s,
       listboxItemRef: n,
       selectedItem: t,
       slots: l,
-      ariaAttributes: f,
-      getOptionId: d,
+      ariaAttributes: m,
+      getOptionId: c,
       // Computed
-      hasCategories: u,
+      hasCategories: d,
       // Methods
-      onOptionSelected: c,
+      onOptionSelected: u,
       // Keyboard navigation
-      listboxListeners: ie,
-      listboxOptionListeners: oe,
+      listboxListeners: H,
+      listboxOptionListeners: re,
       // Virtual scroll focus management
-      handleVirtualScrollingFocus: N
+      handleVirtualScrollingFocus: D
     };
   }
 });
-function Il(e, a, o, l, i, s) {
-  const n = H("bento-listbox-single-select-option"), t = H("bento-listbox-single-select-category"), f = Lt("bento-keyboard-navigation-directive");
-  return Le((p(), I("div", V({ ref: "listboxRef" }, e.ariaAttributes, { role: "listbox" }, fe(e.listboxListeners, !0), {
-    onFocusin: a[0] || (a[0] = (...u) => e.handleVirtualScrollingFocus && e.handleVirtualScrollingFocus(...u))
+function El(e, a, o, l, i, s) {
+  const n = Z("bento-listbox-single-select-option"), t = Z("bento-listbox-single-select-category"), m = It("bento-keyboard-navigation-directive");
+  return Le((p(), E("div", z({ ref: "listboxRef" }, e.ariaAttributes, { role: "listbox" }, ve(e.listboxListeners, !0), {
+    onFocusin: a[0] || (a[0] = (...d) => e.handleVirtualScrollingFocus && e.handleVirtualScrollingFocus(...d))
   }), [
-    e.hasCategories && e.staticCategories ? (p(!0), I(Ce, { key: 0 }, re(e.items, (u) => (p(), I(Ce, null, [
-      u.items && u.items.length > 0 ? (p(), F(t, {
-        key: `category-${u.value}`,
-        "category-label": u.label
+    e.hasCategories && e.staticCategories ? (p(!0), E(ye, { key: 0 }, ie(e.items, (d) => (p(), E(ye, null, [
+      d.items && d.items.length > 0 ? (p(), M(t, {
+        key: `category-${d.value}`,
+        "category-label": d.label
       }, {
-        default: R(() => [
-          (p(!0), I(Ce, null, re(u.items, (c) => (p(), F(n, V({
-            id: e.getOptionId(c),
-            key: c.value,
+        default: B(() => [
+          (p(!0), E(ye, null, ie(d.items, (u) => (p(), M(n, z({
+            id: e.getOptionId(u),
+            key: u.value,
             ref_for: !0,
             ref: "listboxItemRef",
             role: "option",
-            active: e.activeDescendantId === e.getOptionId(c),
-            option: c,
-            disabled: e.isOptionDisabled ? e.isOptionDisabled(c) : null,
-            selected: c.value === e.selectedItem.value
-          }, fe(e.listboxOptionListeners)), Ee({ _: 2 }, [
-            re(e.slots, (d, b) => ({
+            active: e.activeDescendantId === e.getOptionId(u),
+            option: u,
+            disabled: e.isOptionDisabled ? e.isOptionDisabled(u) : null,
+            selected: u.value === e.selectedItem.value
+          }, ve(e.listboxOptionListeners)), Te({ _: 2 }, [
+            ie(e.slots, (c, b) => ({
               name: b,
-              fn: R((S) => [
-                J(e.$slots, b, V({ ref_for: !0 }, S))
+              fn: B((v) => [
+                Q(e.$slots, b, z({ ref_for: !0 }, v))
               ])
             }))
           ]), 1040, ["id", "active", "option", "disabled", "selected"]))), 128))
         ]),
         _: 2
-      }, 1032, ["category-label"])) : (p(), F(n, V({
-        id: e.getOptionId(u),
-        key: `option-${u.value}`,
+      }, 1032, ["category-label"])) : (p(), M(n, z({
+        id: e.getOptionId(d),
+        key: `option-${d.value}`,
         ref_for: !0,
         ref: "listboxItemRef",
         role: "option",
-        active: e.activeDescendantId === e.getOptionId(u),
-        option: u,
-        disabled: e.isOptionDisabled ? e.isOptionDisabled(u) : null,
-        selected: u.value === e.selectedItem.value
-      }, fe(e.listboxOptionListeners)), Ee({ _: 2 }, [
-        re(e.slots, (c, d) => ({
-          name: d,
-          fn: R((b) => [
-            J(e.$slots, d, V({ ref_for: !0 }, b))
+        active: e.activeDescendantId === e.getOptionId(d),
+        option: d,
+        disabled: e.isOptionDisabled ? e.isOptionDisabled(d) : null,
+        selected: d.value === e.selectedItem.value
+      }, ve(e.listboxOptionListeners)), Te({ _: 2 }, [
+        ie(e.slots, (u, c) => ({
+          name: c,
+          fn: B((b) => [
+            Q(e.$slots, c, z({ ref_for: !0 }, b))
           ])
         }))
       ]), 1040, ["id", "active", "option", "disabled", "selected"]))
-    ], 64))), 256)) : (p(!0), I(Ce, { key: 1 }, re(e.items, (u) => (p(), F(n, V({
-      id: e.getOptionId(u),
-      key: u.value,
+    ], 64))), 256)) : (p(!0), E(ye, { key: 1 }, ie(e.items, (d) => (p(), M(n, z({
+      id: e.getOptionId(d),
+      key: d.value,
       ref_for: !0,
       ref: "listboxItemRef",
       role: "option",
-      active: e.activeDescendantId === e.getOptionId(u),
-      option: u,
-      disabled: e.isOptionDisabled ? e.isOptionDisabled(u) : null,
-      selected: u.value === e.selectedItem.value
-    }, fe(e.listboxOptionListeners)), Ee({ _: 2 }, [
-      re(e.slots, (c, d) => ({
-        name: d,
-        fn: R((b) => [
-          J(e.$slots, d, V({ ref_for: !0 }, b))
+      active: e.activeDescendantId === e.getOptionId(d),
+      option: d,
+      disabled: e.isOptionDisabled ? e.isOptionDisabled(d) : null,
+      selected: d.value === e.selectedItem.value
+    }, ve(e.listboxOptionListeners)), Te({ _: 2 }, [
+      ie(e.slots, (u, c) => ({
+        name: c,
+        fn: B((b) => [
+          Q(e.$slots, c, z({ ref_for: !0 }, b))
         ])
       }))
     ]), 1040, ["id", "active", "option", "disabled", "selected"]))), 128))
   ], 16)), [
-    [f]
+    [m]
   ]);
 }
-const El = /* @__PURE__ */ ue(Ll, [["render", Il]]), Ol = { key: 0 }, Tl = {
+const Ol = /* @__PURE__ */ ce(Il, [["render", El]]), Tl = { key: 0 }, Al = {
   __name: "double-checkmark-small",
   setup(e) {
-    const a = at();
-    return String(a?.uid ?? a?.proxy?._uid), (o, l) => (p(), I("svg", V({ role: "img" }, o.$attrs, {
+    const a = ot();
+    return String(a?.uid ?? a?.proxy?._uid), (o, l) => (p(), E("svg", z({ role: "img" }, o.$attrs, {
       class: "ui-assets-icons-16",
       xmlns: "http://www.w3.org/2000/svg",
       width: "16",
       height: "16",
       fill: "none"
     }), [
-      o.$attrs["svg-title"] ? (p(), I("title", Ol, j(o.$attrs["svg-title"]), 1)) : Y("", !0),
-      l[0] || (l[0] = Z("path", {
+      o.$attrs["svg-title"] ? (p(), E("title", Tl, q(o.$attrs["svg-title"]), 1)) : j("", !0),
+      l[0] || (l[0] = Y("path", {
         fill: "#001222",
         d: "M9.69043 5.75L4.62988 10.8105L1.56934 7.75L2.62988 6.68945L4.62988 8.68945L8.62988 4.68945L9.69043 5.75Z"
       }, null, -1)),
-      l[1] || (l[1] = Z("path", {
+      l[1] || (l[1] = Y("path", {
         fill: "#001222",
         d: "M13.9307 5.75L8.87012 10.8105L7.80957 9.75L12.8701 4.68945L13.9307 5.75Z"
       }, null, -1))
     ], 16));
   }
-}, Al = {}, wl = /* @__PURE__ */ Q({
-  ...Al,
+}, wl = {}, _l = /* @__PURE__ */ le({
+  ...wl,
   __name: "decorative-checkbox",
   props: {
     disabled: { type: Boolean, default: !1 },
@@ -670,41 +668,41 @@ const El = /* @__PURE__ */ ue(Ll, [["render", Il]]), Ol = { key: 0 }, Tl = {
   },
   setup(e) {
     const a = e, o = r(() => ({
-      [`b-checkbox-input--${tt.DISABLED}`]: a.disabled
+      [`b-checkbox-input--${lt.DISABLED}`]: a.disabled
     })), l = r(() => ({
-      [`b-checkbox-input__outline--${tt.UNCHECKED}`]: !a.checked && !a.indeterminate && !a.allSelected,
-      [`b-checkbox-input__outline--${tt.CHECKED}`]: (a.checked || a.allSelected) && !a.indeterminate,
-      [`b-checkbox-input__outline--${tt.INDETERMINATE}`]: a.indeterminate
+      [`b-checkbox-input__outline--${lt.UNCHECKED}`]: !a.checked && !a.indeterminate && !a.allSelected,
+      [`b-checkbox-input__outline--${lt.CHECKED}`]: (a.checked || a.allSelected) && !a.indeterminate,
+      [`b-checkbox-input__outline--${lt.INDETERMINATE}`]: a.indeterminate
     }));
-    return (i, s) => (p(), I("div", {
-      class: we(["b-checkbox-input", o.value]),
+    return (i, s) => (p(), E("div", {
+      class: _e(["b-checkbox-input", o.value]),
       role: "presentation"
     }, [
-      i.indeterminate ? (p(), F(v(Qt), {
+      i.indeterminate ? (p(), M(f(Zt), {
         key: 0,
         class: "b-checkbox-input__icon",
         "svg-title": "",
         "aria-hidden": "true"
-      })) : i.allSelected ? (p(), F(v(Tl), {
+      })) : i.allSelected ? (p(), M(f(Al), {
         key: 1,
         class: "b-checkbox-input__icon",
         "svg-title": "",
         "aria-hidden": "true",
         "data-testid": "decorative-checkbox-double-checkmark-icon"
-      })) : i.checked ? (p(), F(v(el), {
+      })) : i.checked ? (p(), M(f(Qt), {
         key: 2,
         class: "b-checkbox-input__icon",
         "svg-title": "",
         "aria-hidden": "true"
-      })) : Y("", !0),
-      Z("div", {
-        class: we(["b-checkbox-input__outline", l.value])
+      })) : j("", !0),
+      Y("div", {
+        class: _e(["b-checkbox-input__outline", l.value])
       }, null, 2)
     ], 2));
   }
-}), yt = /* @__PURE__ */ ue(wl, [["__scopeId", "data-v-e40313a8"]]);
-var xt = /* @__PURE__ */ ((e) => (e.DISABLED = "disabled", e.STATIC_CATEGORY = "static-category", e))(xt || {}), Pe = /* @__PURE__ */ ((e) => (e.SELECT_CATEGORY = "select-category", e.UNSELECT_CATEGORY = "unselect-category", e.TOGGLE_CATEGORY_VISIBILITY = "toggle-category-visibility", e))(Pe || {});
-const Dt = {
+}), gt = /* @__PURE__ */ ce(_l, [["__scopeId", "data-v-e40313a8"]]);
+var xt = /* @__PURE__ */ ((e) => (e.DISABLED = "disabled", e.STATIC_CATEGORY = "static-category", e))(xt || {}), ze = /* @__PURE__ */ ((e) => (e.SELECT_CATEGORY = "select-category", e.UNSELECT_CATEGORY = "unselect-category", e.TOGGLE_CATEGORY_VISIBILITY = "toggle-category-visibility", e))(ze || {});
+const Bt = {
   "de-DE": { loading: "Laden", showMore: "Mehr anzeigen" },
   "en-GB": { loading: "Loading", showMore: "Show more" },
   "en-US": { loading: "Loading", showMore: "Show more" },
@@ -716,14 +714,19 @@ const Dt = {
   "ja-JP": { loading: "読み込み中", showMore: "さらに表示" },
   "pt-BR": { loading: "Carregando", showMore: "Mostrar mais" },
   "zh-CN": { loading: "正在加载", showMore: "显示更多" }
-}, _l = {
+}, kl = {
   key: 0,
   class: "b-listbox-lazy-load"
-}, kl = {
+}, $l = {
+  class: "b-listbox-lazy-load__announcement",
+  role: "status",
+  "aria-live": "polite",
+  "aria-atomic": "true"
+}, Dl = {
   name: "listbox-lazy-load",
-  i18n: { messages: Dt }
-}, $l = /* @__PURE__ */ Q({
-  ...kl,
+  i18n: { messages: Bt }
+}, xl = /* @__PURE__ */ le({
+  ...Dl,
   props: {
     condensed: { type: Boolean, default: !1 },
     hasMoreItems: { type: Boolean, default: !1 },
@@ -733,31 +736,36 @@ const Dt = {
   },
   emits: ["show-more"],
   setup(e) {
-    const { t: a } = Re({ messages: Dt }), o = e, l = r(
-      () => o.type === $e.BUTTON && o.hasMoreItems
+    const { t: a } = Ne({ messages: Bt }), o = e, l = r(
+      () => o.type === Ae.BUTTON && o.hasMoreItems
     ), i = r(
-      () => o.loading ? lt.LOADING : lt.START
+      () => o.loading ? at.LOADING : at.START
     ), s = r(() => o.loading ? a("loading") : a("showMore"));
-    return (n, t) => l.value || n.loading ? (p(), I("div", _l, [
-      l.value ? (p(), F(v(ll), {
+    return (n, t) => l.value || n.loading ? (p(), E("div", kl, [
+      Y("div", $l, [
+        n.type === f(Ae).AUTOMATIC && n.loading ? (p(), E(ye, { key: 0 }, [
+          oe(q(f(a)("loading")), 1)
+        ], 64)) : j("", !0)
+      ]),
+      l.value ? (p(), M(f(tl), {
         key: 0,
         state: i.value,
         tabindex: n.tabindex,
         condensed: n.condensed,
         variant: "secondary",
-        onClickCapture: t[0] || (t[0] = (f) => n.$emit("show-more", f))
+        onClickCapture: t[0] || (t[0] = (m) => n.$emit("show-more", m))
       }, {
-        default: R(() => [
-          ne(j(s.value), 1)
+        default: B(() => [
+          oe(q(s.value), 1)
         ]),
         _: 1
-      }, 8, ["state", "tabindex", "condensed"])) : n.loading ? (p(), F(v(At), { key: 1 })) : Y("", !0)
-    ])) : Y("", !0);
+      }, 8, ["state", "tabindex", "condensed"])) : n.loading ? (p(), M(f(Tt), { key: 1 })) : j("", !0)
+    ])) : j("", !0);
   }
-}), Bt = /* @__PURE__ */ ue($l, [["__scopeId", "data-v-ae5fccad"]]), Rt = {
+}), Rt = /* @__PURE__ */ ce(xl, [["__scopeId", "data-v-e8b6702e"]]), Mt = {
   "de-DE": { thereWasAnErrorLoadingNewItems: "Beim Laden neuer Artikel ist ein Fehler aufgetreten." },
   "en-GB": { thereWasAnErrorLoadingNewItems: "There was an error loading new items." },
-  "en-US": { thereWasAnErrorLoadingNewItems: "There was an error loading new items." },
+  "en-US": { loadMoreItemsForCategory: "Load more items for {category}.", loadingItemsForCategory: "Loading items for {category}.", pressEnterOrSpaceToLoadMoreItems: "Press Enter or Space to load more items.", thereWasAnErrorLoadingNewItems: "There was an error loading new items." },
   "es-419": { thereWasAnErrorLoadingNewItems: "Se produjo un error al cargar los nuevos elementos." },
   "es-ES": { thereWasAnErrorLoadingNewItems: "Se produjo un error al cargar los nuevos elementos." },
   "fr-FR": { thereWasAnErrorLoadingNewItems: "Une erreur s'est produite lors du chargement des nouveaux éléments." },
@@ -765,27 +773,36 @@ const Dt = {
   "ja-JP": { thereWasAnErrorLoadingNewItems: "新しいアイテムの読み込みにエラーが発生しました。" },
   "pt-BR": { thereWasAnErrorLoadingNewItems: "Ocorreu um erro ao carregar novos itens." },
   "zh-CN": { thereWasAnErrorLoadingNewItems: "加载新项目时出错。" }
-}, xl = ["onKeydown"], Dl = {
+}, Bl = ["aria-labelledby", "onKeydown"], Rl = ["id"], Ml = {
+  class: "b-listbox-multi-select-nested-lazy-load__visually-hidden",
+  role: "status",
+  "aria-live": "polite",
+  "aria-atomic": "true"
+}, Nl = {
   name: "listbox-multi-select-nested-lazy-load",
-  i18n: { messages: Rt }
-}, Bl = /* @__PURE__ */ Q({
-  ...Dl,
+  i18n: { messages: Mt }
+}, Pl = /* @__PURE__ */ le({
+  ...Nl,
   props: {
     index: {},
     option: {}
   },
   setup(e, { expose: a }) {
-    const o = A(!1), l = A(!1), { t: i } = Re({ messages: Rt }), s = e;
-    async function n(t) {
-      if (t.stopImmediatePropagation(), !o.value) {
-        l.value = !1, o.value = !0;
+    const o = A(!1), l = A(!1), i = A(""), s = A(null), n = xe("nested-lazy-load-name");
+    let t = !1;
+    const { t: m } = Ne({ messages: Mt }), d = e;
+    async function u(c) {
+      if (c.stopImmediatePropagation(), !(o.value || t)) {
+        t = !0, await ne(), s.value?.focus(), l.value = !1, o.value = !0, i.value = m("loadingItemsForCategory", { category: d.option.label }), t = !1;
         try {
-          await s.option.lazyLoad?.lazyLoadEvent({
-            value: s.option.value,
-            index: s.index
-          });
+          await d.option.lazyLoad?.lazyLoadEvent({
+            value: d.option.value,
+            index: d.index
+          }), i.value = "";
         } catch {
-          l.value = !0;
+          l.value = !0, i.value = `${m("thereWasAnErrorLoadingNewItems")} ${m(
+            "pressEnterOrSpaceToLoadMoreItems"
+          )}`;
         }
         o.value = !1;
       }
@@ -794,39 +811,53 @@ const Dt = {
       /**
        * Trigger the lazy load event programmatically.
        */
-      showMore: n
-    }), (t, f) => (p(), I("div", {
+      showMore: u
+    }), (c, b) => (p(), E("div", {
+      ref_key: "nestedLazyLoadRef",
+      ref: s,
       role: "treeitem",
       tabindex: 0,
+      "aria-labelledby": f(n),
       onKeydown: [
-        Se(Oe(n, ["prevent"]), ["enter"]),
-        Se(Oe(n, ["prevent"]), ["space"])
+        Ce(ge(u, ["prevent"]), ["enter"]),
+        Ce(ge(u, ["prevent"]), ["space"])
       ]
     }, [
-      l.value ? (p(), F(v(wt), {
-        key: 0,
-        variant: "basic",
-        class: "b-listbox-multi-select-nested-lazy-load__error-message"
-      }, {
-        default: R(() => [
-          ne(j(v(i)("thereWasAnErrorLoadingNewItems")), 1)
-        ]),
-        _: 1
-      })) : Y("", !0),
-      q(v(Bt), {
-        type: "button",
-        tabindex: -1,
-        condensed: "",
-        "has-more-items": t.option.lazyLoad?.hasMoreItems,
-        loading: o.value,
-        onShowMore: n
-      }, null, 8, ["has-more-items", "loading"])
-    ], 40, xl));
+      Y("span", {
+        id: f(n),
+        class: "b-listbox-multi-select-nested-lazy-load__visually-hidden"
+      }, q(f(m)("loadMoreItemsForCategory", { category: c.option.label })), 9, Rl),
+      Y("div", Ml, q(i.value), 1),
+      Y("div", {
+        "aria-hidden": "true",
+        onMousedown: b[0] || (b[0] = ge(() => {
+        }, ["prevent"]))
+      }, [
+        l.value ? (p(), M(f(At), {
+          key: 0,
+          variant: "basic",
+          class: "b-listbox-multi-select-nested-lazy-load__error-message"
+        }, {
+          default: B(() => [
+            oe(q(f(m)("thereWasAnErrorLoadingNewItems")), 1)
+          ]),
+          _: 1
+        })) : j("", !0),
+        X(f(Rt), {
+          type: "button",
+          tabindex: -1,
+          condensed: "",
+          "has-more-items": c.option.lazyLoad?.hasMoreItems,
+          loading: o.value,
+          onShowMore: u
+        }, null, 8, ["has-more-items", "loading"])
+      ], 32)
+    ], 40, Bl));
   }
-}), Rl = /* @__PURE__ */ ue(Bl, [["__scopeId", "data-v-b2f2697f"]]), St = {
+}), Fl = /* @__PURE__ */ ce(Pl, [["__scopeId", "data-v-d39fec1a"]]), Ct = {
   "de-DE": { categoryClosed: "{category} geschlossen", categoryOpened: "{category} geöffnet" },
   "en-GB": { categoryClosed: "{category} closed", categoryOpened: "{category} opened" },
-  "en-US": { categoryClosed: "{category} closed", categoryOpened: "{category} opened" },
+  "en-US": { allItemsForCategoryAreLoaded: "All items for {category} are loaded.", categoryClosed: "{category} closed", categoryOpened: "{category} opened" },
   "es-419": { categoryClosed: "{category} cerrado", categoryOpened: "{category} abierta" },
   "es-ES": { categoryClosed: "{category} cerrado", categoryOpened: "{category} abierto" },
   "es-MX": { categoryClosed: "{category} cerrado", categoryOpened: "{category} abierto" },
@@ -835,16 +866,16 @@ const Dt = {
   "ja-JP": { categoryClosed: "{category}を閉じました", categoryOpened: "{category}を開きました" },
   "pt-BR": { categoryClosed: "{category} fechada", categoryOpened: "{categoria} aberta" },
   "zh-CN": { categoryClosed: "{category} 已关闭", categoryOpened: "{category} 已打开" }
-}, Ml = Q({
-  i18n: { messages: St },
+}, zl = le({
+  i18n: { messages: Ct },
   name: "bento-listbox-multi-select-category",
   components: {
-    BentoTypography: Be,
-    BentoListboxOption: ot,
-    BentoListboxMultiSelectNestedLazyLoad: Rl,
-    ChevronDownIcon: Ot,
-    ChevronUpIcon: Tt,
-    DecorativeCheckbox: yt
+    BentoTypography: Me,
+    BentoListboxOption: st,
+    BentoListboxMultiSelectNestedLazyLoad: Fl,
+    ChevronDownIcon: wt,
+    ChevronUpIcon: _t,
+    DecorativeCheckbox: gt
   },
   props: {
     /**
@@ -897,89 +928,100 @@ const Dt = {
     tabindex: { type: Number, default: -1 }
   },
   emits: [
-    Pe.SELECT_CATEGORY,
-    Pe.UNSELECT_CATEGORY,
-    Pe.TOGGLE_CATEGORY_VISIBILITY
+    ze.SELECT_CATEGORY,
+    ze.UNSELECT_CATEGORY,
+    ze.TOGGLE_CATEGORY_VISIBILITY
   ],
   setup(e, { emit: a }) {
-    const o = A(!1), { t: l } = Re({ messages: St }), i = De("category-group"), s = De("category-name"), n = A(null), t = (k) => e.isOptionDisabled ? e.isOptionDisabled(k) : !1, f = r(() => e.category.lazyLoad && e.category.items?.length === 0 ? !1 : e.category.items.every((k) => t(k))), u = de(e, "staticCategories"), c = r(() => o.value || e.staticCategories), d = r(() => ({
-      [`b-listbox-multi-select-category--${xt.DISABLED}`]: f.value
-    })), b = (k, W) => {
-      k.preventDefault(), e.category.lazyLoad && e.category.items?.length === 0 && n.value.showMore(k), o.value = W !== void 0 ? W : !o.value, a(Pe.TOGGLE_CATEGORY_VISIBILITY, e.category.value);
-    }, S = (k) => {
-      const W = t(k), ee = e.selectedItemsList?.includes(k.value) || !1;
-      return { isDisabled: W, isPreSelected: ee };
-    }, h = r(
-      () => e.category.items.filter((k) => {
-        const { isDisabled: W, isPreSelected: ee } = S(k);
-        return W && ee || !W;
+    const o = A(!1), { t: l } = Ne({ messages: Ct }), i = xe("category-group"), s = xe("category-name"), n = A(null), t = A(""), m = (R) => e.isOptionDisabled ? e.isOptionDisabled(R) : !1, d = r(() => e.category.lazyLoad && e.category.items?.length === 0 ? !1 : e.category.items.every((R) => m(R))), u = de(e, "staticCategories"), c = r(() => o.value || e.staticCategories), b = r(() => ({
+      [`b-listbox-multi-select-category--${xt.DISABLED}`]: d.value
+    })), v = (R, V) => {
+      R.preventDefault(), e.category.lazyLoad && e.category.items?.length === 0 && n.value.showMore(R), o.value = V !== void 0 ? V : !o.value, a(ze.TOGGLE_CATEGORY_VISIBILITY, e.category.value);
+    }, S = (R) => {
+      const V = m(R), F = e.selectedItemsList?.includes(R.value) || !1;
+      return { isDisabled: V, isPreSelected: F };
+    }, D = r(
+      () => e.category.items.filter((R) => {
+        const { isDisabled: V, isPreSelected: F } = S(R);
+        return V && F || !V;
       })
-    ), N = r(
-      () => h.value?.filter(({ value: k }) => e.selectedItemsList?.includes(k))
-    ), w = r(() => {
-      const k = o.value ? "categoryOpened" : "categoryClosed";
-      return l(k, { category: e.category.label });
-    }), $ = () => {
-      a(Pe.SELECT_CATEGORY);
-    }, T = () => {
-      a(Pe.UNSELECT_CATEGORY);
-    }, M = r(
+    ), G = r(
+      () => D.value?.filter(({ value: R }) => e.selectedItemsList?.includes(R))
+    ), x = r(() => {
+      const R = o.value ? "categoryOpened" : "categoryClosed";
+      return l(R, { category: e.category.label });
+    }), C = () => {
+      a(ze.SELECT_CATEGORY);
+    }, N = () => {
+      a(ze.UNSELECT_CATEGORY);
+    }, $ = r(
       () => !!e.category.lazyLoad && e.selectedItemsList.includes(e.category.value)
     ), {
-      isAllSelected: _,
-      isIndeterminate: L,
-      toggleSelectAll: x
-    } = _t(N, h, $, T), D = r(() => M.value || _.value), z = r(() => !M.value && L.value), ie = r(() => z.value ? "mixed" : `${D.value}`), oe = A(D.value), P = () => {
-      oe.value = !oe.value, x(oe.value);
+      isAllSelected: I,
+      isIndeterminate: k,
+      toggleSelectAll: W
+    } = kt(G, D, C, N), P = r(() => $.value || I.value), H = r(() => !$.value && k.value), re = r(() => H.value ? "mixed" : `${P.value}`), _ = A(P.value), J = () => {
+      _.value = !_.value, W(_.value);
     };
-    return he(D, () => {
-      oe.value = D.value;
-    }), {
+    return pe(P, () => {
+      _.value = P.value;
+    }), pe(
+      () => e.category.lazyLoad?.hasMoreItems,
+      (R, V) => {
+        t.value = V === !0 && R === !1 ? l("allItemsForCategoryAreLoaded", { category: e.category.label }) : "";
+      }
+    ), {
       // Refs
       lazyLoadRef: n,
       // Values
-      chevronTitle: w,
-      conditionalClass: d,
-      hasAllPropsDisabled: f,
+      chevronTitle: x,
+      conditionalClass: b,
+      hasAllPropsDisabled: d,
       isOpen: o,
-      isAllSelected: D,
-      isIndeterminate: z,
+      isAllSelected: P,
+      isIndeterminate: H,
       isStaticCategory: u,
       categoryGroupId: i,
       categoryNameId: s,
+      lazyLoadAnnouncement: t,
       // Computed
       showItemChildren: c,
-      ariaCheckedComputed: ie,
+      ariaCheckedComputed: re,
       // Methods
-      handleSelectAll: P,
-      toggleOpen: b,
-      toggleSelectAll: x
+      handleSelectAll: J,
+      toggleOpen: v,
+      toggleSelectAll: W
     };
   }
-}), Nl = { class: "b-listbox-multi-select-category__label" }, Pl = {
+}), Vl = { class: "b-listbox-multi-select-category__label" }, Gl = {
+  class: "b-listbox-multi-select-category__announcement",
+  role: "status",
+  "aria-live": "polite",
+  "aria-atomic": "true"
+}, Kl = {
   key: 1,
   class: "b-listbox-multi-select-category b-listbox-multi-select-category--static-category",
   "aria-hidden": "true"
-}, Fl = { class: "b-listbox-multi-select-category__label" }, Vl = ["id", "aria-label"];
-function zl(e, a, o, l, i, s) {
-  const n = H("decorative-checkbox"), t = H("bento-typography"), f = H("chevron-up-icon"), u = H("chevron-down-icon"), c = H("bento-listbox-option"), d = H("bento-listbox-multi-select-nested-lazy-load");
-  return p(), I("div", null, [
-    e.isStaticCategory ? (p(), I("div", Pl, [
-      Z("span", Fl, [
-        q(t, {
+}, Ul = { class: "b-listbox-multi-select-category__label" }, Wl = ["id", "aria-label"];
+function ql(e, a, o, l, i, s) {
+  const n = Z("decorative-checkbox"), t = Z("bento-typography"), m = Z("chevron-up-icon"), d = Z("chevron-down-icon"), u = Z("bento-listbox-option"), c = Z("bento-listbox-multi-select-nested-lazy-load");
+  return p(), E("div", null, [
+    e.isStaticCategory ? (p(), E("div", Kl, [
+      Y("span", Ul, [
+        X(t, {
           el: "span",
           variant: "caption",
           class: "b-listbox-multi-select-category__label-text"
         }, {
-          default: R(() => [
-            ne(j(e.category.label), 1)
+          default: B(() => [
+            oe(q(e.category.label), 1)
           ]),
           _: 1
         })
       ])
-    ])) : (p(), F(c, {
+    ])) : (p(), M(u, {
       key: 0,
-      class: we(["b-listbox-multi-select-category__option", e.conditionalClass]),
+      class: _e(["b-listbox-multi-select-category__option", e.conditionalClass]),
       tabindex: e.tabindex,
       "aria-selected": e.ariaCheckedComputed !== "false",
       "aria-checked": e.ariaCheckedComputed,
@@ -990,73 +1032,74 @@ function zl(e, a, o, l, i, s) {
       "aria-labelledby": e.categoryNameId,
       onClick: e.handleSelectAll,
       onEnterPressed: e.handleSelectAll,
-      onSpacePressed: Oe(e.handleSelectAll, ["prevent"]),
+      onSpacePressed: ge(e.handleSelectAll, ["prevent"]),
       onKeydown: [
-        a[1] || (a[1] = Se((b) => e.toggleOpen(b, !1), ["arrow-left", "native"])),
-        a[2] || (a[2] = Se((b) => e.toggleOpen(b, !0), ["arrow-right", "native"]))
+        a[1] || (a[1] = Ce((b) => e.toggleOpen(b, !1), ["arrow-left", "native"])),
+        a[2] || (a[2] = Ce((b) => e.toggleOpen(b, !0), ["arrow-right", "native"]))
       ]
     }, {
-      default: R(() => [
-        q(n, {
+      default: B(() => [
+        X(n, {
           indeterminate: e.isIndeterminate,
           disabled: e.hasAllPropsDisabled,
           checked: e.isAllSelected
         }, null, 8, ["indeterminate", "disabled", "checked"]),
-        Z("span", Nl, [
-          q(t, {
+        Y("span", Vl, [
+          X(t, {
             id: e.categoryNameId,
             el: "span",
             class: "b-listbox-multi-select-category__label-text"
           }, {
-            default: R(() => [
-              ne(j(e.category.label), 1)
+            default: B(() => [
+              oe(q(e.category.label), 1)
             ]),
             _: 1
           }, 8, ["id"]),
-          Z("div", {
+          Y("div", {
             "aria-hidden": "true",
             class: "b-listbox-multi-select-category__label-chevron",
             "data-testid": "toggle-listbox",
-            onClickCapture: a[0] || (a[0] = Oe((...b) => e.toggleOpen && e.toggleOpen(...b), ["stop"]))
+            onClickCapture: a[0] || (a[0] = ge((...b) => e.toggleOpen && e.toggleOpen(...b), ["stop"]))
           }, [
-            e.isOpen ? (p(), F(f, {
+            e.isOpen ? (p(), M(m, {
               key: 0,
               "svg-title": e.chevronTitle
-            }, null, 8, ["svg-title"])) : (p(), F(u, {
+            }, null, 8, ["svg-title"])) : (p(), M(d, {
               key: 1,
               "svg-title": e.chevronTitle
             }, null, 8, ["svg-title"]))
           ], 32)
-        ])
+        ]),
+        Y("div", Gl, q(e.lazyLoadAnnouncement), 1)
       ]),
       _: 1
     }, 8, ["class", "tabindex", "aria-selected", "aria-checked", "aria-disabled", "aria-expanded", "aria-owns", "aria-labelledby", "onClick", "onEnterPressed", "onSpacePressed"])),
-    Le(Z("div", {
+    Le(Y("div", {
       id: e.categoryGroupId,
       role: "group",
       "aria-label": e.category.label
     }, [
-      J(e.$slots, "default", {}, void 0, !0),
-      e.category.lazyLoad?.hasMoreItems ? (p(), F(d, {
+      Q(e.$slots, "default", {}, void 0, !0),
+      e.category.lazyLoad?.hasMoreItems ? (p(), M(c, {
         key: 0,
         ref: "lazyLoadRef",
         option: e.category,
         index: e.optionIndex
-      }, null, 8, ["option", "index"])) : Y("", !0)
-    ], 8, Vl), [
-      [ze, e.showItemChildren]
+      }, null, 8, ["option", "index"])) : j("", !0)
+    ], 8, Wl), [
+      [Ke, e.showItemChildren]
     ])
   ]);
 }
-const Gl = /* @__PURE__ */ ue(Ml, [["render", zl], ["__scopeId", "data-v-893f89fc"]]);
-var ke = /* @__PURE__ */ ((e) => (e.SELECT_CATEGORY = "select-category", e.TOGGLE_CHECKBOX_SELECTION = "toggle-checkbox-selection", e.UNSELECT_CATEGORY = "unselect-category", e.TOGGLE_CATEGORY_VISIBILITY = "toggle-category-visibility", e))(ke || {});
-const Kl = Q({
+const Yl = /* @__PURE__ */ ce(zl, [["render", ql], ["__scopeId", "data-v-0f09e7be"]]);
+var De = /* @__PURE__ */ ((e) => (e.SELECT_CATEGORY = "select-category", e.TOGGLE_CHECKBOX_SELECTION = "toggle-checkbox-selection", e.UNSELECT_CATEGORY = "unselect-category", e.TOGGLE_CATEGORY_VISIBILITY = "toggle-category-visibility", e))(De || {});
+const jl = le({
   name: "listbox-multi-select-options",
   components: {
-    BentoListboxOption: ot,
-    BentoTypography: Be,
-    ListboxMultiSelectCategory: Gl,
-    DecorativeCheckbox: yt
+    BentoListboxOption: st,
+    BentoTypography: Me,
+    ListboxMultiSelectCategory: Yl,
+    DecorativeCheckbox: gt
   },
   inheritAttrs: !1,
   props: {
@@ -1133,30 +1176,30 @@ const Kl = Q({
     }
   },
   emits: [
-    ke.TOGGLE_CHECKBOX_SELECTION,
-    ke.SELECT_CATEGORY,
-    ke.UNSELECT_CATEGORY,
-    ke.TOGGLE_CATEGORY_VISIBILITY
+    De.TOGGLE_CHECKBOX_SELECTION,
+    De.SELECT_CATEGORY,
+    De.UNSELECT_CATEGORY,
+    De.TOGGLE_CATEGORY_VISIBILITY
   ],
   setup(e, { emit: a }) {
-    const o = (u) => {
-      e.isOptionDisabled(u) || a(ke.TOGGLE_CHECKBOX_SELECTION, u);
-    }, l = (u) => !!u.items, i = (u) => {
-      const c = e.isMultiLevel && e.searching;
-      return u.description && (!e.isMultiLevel || c);
-    }, s = (u) => {
-      const c = !!e.parentCategory?.lazyLoad && e.selectedItemsList.includes(e.parentCategory.value);
-      if (u.items) {
-        const d = !!u.lazyLoad && e.selectedItemsList.includes(u.value);
-        return c || d || !!u.items.find((b) => e.selectedItemsList.includes(b.value));
+    const o = (d) => {
+      e.isOptionDisabled(d) || a(De.TOGGLE_CHECKBOX_SELECTION, d);
+    }, l = (d) => !!d.items, i = (d) => {
+      const u = e.isMultiLevel && e.searching;
+      return d.description && (!e.isMultiLevel || u);
+    }, s = (d) => {
+      const u = !!e.parentCategory?.lazyLoad && e.selectedItemsList.includes(e.parentCategory.value);
+      if (d.items) {
+        const c = !!d.lazyLoad && e.selectedItemsList.includes(d.value);
+        return u || c || !!d.items.find((b) => e.selectedItemsList.includes(b.value));
       }
-      return c || e.selectedItemsList.includes(u.value);
-    }, n = (u) => {
-      if (l(u)) {
-        const c = s(u) ? ke.UNSELECT_CATEGORY : ke.SELECT_CATEGORY;
-        a(c, u);
+      return u || e.selectedItemsList.includes(d.value);
+    }, n = (d) => {
+      if (l(d)) {
+        const u = s(d) ? De.UNSELECT_CATEGORY : De.SELECT_CATEGORY;
+        a(u, d);
       } else
-        o(u);
+        o(d);
     };
     return {
       // Values
@@ -1169,76 +1212,76 @@ const Kl = Q({
       shouldShowDescription: i,
       toggleCheckboxSelection: o,
       toggleSearchOption: n,
-      computedTabindex: (u) => e.itemsIndex[u] === e.focusedIndex ? 0 : -1,
+      computedTabindex: (d) => e.itemsIndex[d] === e.focusedIndex ? 0 : -1,
       // Enums
-      BentoListboxEvent: y,
-      ListboxMultiSelectOptionsEvent: ke
+      BentoListboxEvent: g,
+      ListboxMultiSelectOptionsEvent: De
     };
   }
-}), Ul = { class: "b-listbox-multi-select__option-text" }, Wl = { class: "b-listbox-multi-select__option-text" };
-function ql(e, a, o, l, i, s) {
-  const n = H("decorative-checkbox"), t = H("bento-typography"), f = H("bento-listbox-option"), u = H("listbox-multi-select-options", !0), c = H("listbox-multi-select-category");
-  return p(), I("div", null, [
-    (p(!0), I(Ce, null, re(e.items, (d) => (p(), I("div", {
-      key: `selected-${d.value}`
+}), Hl = { class: "b-listbox-multi-select__option-text" }, Jl = { class: "b-listbox-multi-select__option-text" };
+function Xl(e, a, o, l, i, s) {
+  const n = Z("decorative-checkbox"), t = Z("bento-typography"), m = Z("bento-listbox-option"), d = Z("listbox-multi-select-options", !0), u = Z("listbox-multi-select-category");
+  return p(), E("div", null, [
+    (p(!0), E(ye, null, ie(e.items, (c) => (p(), E("div", {
+      key: `selected-${c.value}`
     }, [
-      e.searching && e.isMultiLevel ? (p(), F(f, {
+      e.searching && e.isMultiLevel ? (p(), M(m, {
         key: 0,
-        class: we(["b-listbox-multi-select-options", e.conditionalClasses]),
-        disabled: e.isOptionDisabled ? e.isOptionDisabled(d) : null,
-        tabindex: e.computedTabindex(d.value),
-        "aria-selected": `${e.isOptionSelected(d)}`,
-        "aria-checked": `${e.isOptionSelected(d)}`,
-        "aria-disabled": e.isOptionDisabled ? e.isOptionDisabled(d) : null,
+        class: _e(["b-listbox-multi-select-options", e.conditionalClasses]),
+        disabled: e.isOptionDisabled ? e.isOptionDisabled(c) : null,
+        tabindex: e.computedTabindex(c.value),
+        "aria-selected": `${e.isOptionSelected(c)}`,
+        "aria-checked": `${e.isOptionSelected(c)}`,
+        "aria-disabled": e.isOptionDisabled ? e.isOptionDisabled(c) : null,
         role: e.$attrs.role || "option",
-        onClick: (b) => e.toggleSearchOption(d),
-        onEnterPressed: (b) => e.toggleSearchOption(d),
-        onSpacePressed: Oe((b) => e.toggleSearchOption(d), ["prevent"])
+        onClick: (b) => e.toggleSearchOption(c),
+        onEnterPressed: (b) => e.toggleSearchOption(c),
+        onSpacePressed: ge((b) => e.toggleSearchOption(c), ["prevent"])
       }, {
-        default: R(() => [
-          q(n, {
-            disabled: e.isOptionDisabled ? e.isOptionDisabled(d) : null,
-            checked: e.isOptionSelected(d)
+        default: B(() => [
+          X(n, {
+            disabled: e.isOptionDisabled ? e.isOptionDisabled(c) : null,
+            checked: e.isOptionSelected(c)
           }, null, 8, ["disabled", "checked"]),
-          J(e.$slots, "default", V({ ref_for: !0 }, d), () => [
-            Z("span", Ul, [
-              q(t, { el: "span" }, {
-                default: R(() => [
-                  ne(j(d.label), 1)
+          Q(e.$slots, "default", z({ ref_for: !0 }, c), () => [
+            Y("span", Hl, [
+              X(t, { el: "span" }, {
+                default: B(() => [
+                  oe(q(c.label), 1)
                 ]),
                 _: 2
               }, 1024),
-              e.shouldShowDescription(d) ? (p(), F(t, {
+              e.shouldShowDescription(c) ? (p(), M(t, {
                 key: 0,
                 class: "b-listbox-multi-select__option-description",
                 el: "span"
               }, {
-                default: R(() => [
-                  ne(j(d.description), 1)
+                default: B(() => [
+                  oe(q(c.description), 1)
                 ]),
                 _: 2
-              }, 1024)) : Y("", !0)
+              }, 1024)) : j("", !0)
             ])
           ], !0)
         ]),
         _: 2
-      }, 1032, ["class", "disabled", "tabindex", "aria-selected", "aria-checked", "aria-disabled", "role", "onClick", "onEnterPressed", "onSpacePressed"])) : (p(), I(Ce, { key: 1 }, [
-        d.items ? (p(), F(c, {
+      }, 1032, ["class", "disabled", "tabindex", "aria-selected", "aria-checked", "aria-disabled", "role", "onClick", "onEnterPressed", "onSpacePressed"])) : (p(), E(ye, { key: 1 }, [
+        c.items ? (p(), M(u, {
           key: 0,
-          category: d,
+          category: c,
           "static-categories": e.staticCategories,
           "is-option-disabled": e.isOptionDisabled,
           "selected-items-list": e.selectedItemsList,
-          "option-index": e.itemsIndex[d.value],
-          tabindex: e.computedTabindex(d.value),
-          onSelectCategory: (b) => e.$emit(e.ListboxMultiSelectOptionsEvent.SELECT_CATEGORY, d),
-          onUnselectCategory: (b) => e.$emit(e.ListboxMultiSelectOptionsEvent.UNSELECT_CATEGORY, d),
+          "option-index": e.itemsIndex[c.value],
+          tabindex: e.computedTabindex(c.value),
+          onSelectCategory: (b) => e.$emit(e.ListboxMultiSelectOptionsEvent.SELECT_CATEGORY, c),
+          onUnselectCategory: (b) => e.$emit(e.ListboxMultiSelectOptionsEvent.UNSELECT_CATEGORY, c),
           onToggleCategoryVisibility: a[1] || (a[1] = (b) => e.$emit(e.ListboxMultiSelectOptionsEvent.TOGGLE_CATEGORY_VISIBILITY, b))
         }, {
-          default: R(() => [
-            q(u, {
+          default: B(() => [
+            X(d, {
               "category-items": "",
-              items: d.items,
+              items: c.items,
               "is-option-disabled": e.isOptionDisabled,
               "items-index": e.itemsIndex,
               "focused-index": e.focusedIndex,
@@ -1246,48 +1289,48 @@ function ql(e, a, o, l, i, s) {
               "static-categories": e.staticCategories,
               "selected-items-list": e.selectedItemsList,
               searching: e.searching,
-              "parent-category": d,
+              "parent-category": c,
               role: e.$attrs.role || "option",
               onToggleCheckboxSelection: a[0] || (a[0] = (b) => e.toggleCheckboxSelection(b))
             }, null, 8, ["items", "is-option-disabled", "items-index", "focused-index", "is-multi-level", "static-categories", "selected-items-list", "searching", "parent-category", "role"])
           ]),
           _: 2
-        }, 1032, ["category", "static-categories", "is-option-disabled", "selected-items-list", "option-index", "tabindex", "onSelectCategory", "onUnselectCategory"])) : (p(), F(f, {
+        }, 1032, ["category", "static-categories", "is-option-disabled", "selected-items-list", "option-index", "tabindex", "onSelectCategory", "onUnselectCategory"])) : (p(), M(m, {
           key: 1,
-          class: we(["b-listbox-multi-select-options", e.conditionalClasses]),
-          disabled: e.isOptionDisabled ? e.isOptionDisabled(d) : null,
-          tabindex: e.computedTabindex(d.value),
-          "aria-selected": `${e.isOptionSelected(d)}`,
-          "aria-checked": `${e.isOptionSelected(d)}`,
-          "aria-disabled": e.isOptionDisabled ? e.isOptionDisabled(d) : null,
+          class: _e(["b-listbox-multi-select-options", e.conditionalClasses]),
+          disabled: e.isOptionDisabled ? e.isOptionDisabled(c) : null,
+          tabindex: e.computedTabindex(c.value),
+          "aria-selected": `${e.isOptionSelected(c)}`,
+          "aria-checked": `${e.isOptionSelected(c)}`,
+          "aria-disabled": e.isOptionDisabled ? e.isOptionDisabled(c) : null,
           role: e.$attrs.role || "option",
-          onClick: (b) => e.toggleCheckboxSelection(d),
-          onEnterPressed: (b) => e.toggleCheckboxSelection(d),
-          onSpacePressed: Oe((b) => e.toggleCheckboxSelection(d), ["prevent"])
+          onClick: (b) => e.toggleCheckboxSelection(c),
+          onEnterPressed: (b) => e.toggleCheckboxSelection(c),
+          onSpacePressed: ge((b) => e.toggleCheckboxSelection(c), ["prevent"])
         }, {
-          default: R(() => [
-            q(n, {
-              disabled: e.isOptionDisabled ? e.isOptionDisabled(d) : null,
-              checked: e.isOptionSelected(d)
+          default: B(() => [
+            X(n, {
+              disabled: e.isOptionDisabled ? e.isOptionDisabled(c) : null,
+              checked: e.isOptionSelected(c)
             }, null, 8, ["disabled", "checked"]),
-            J(e.$slots, "default", V({ ref_for: !0 }, d), () => [
-              Z("span", Wl, [
-                q(t, { el: "span" }, {
-                  default: R(() => [
-                    ne(j(d.label), 1)
+            Q(e.$slots, "default", z({ ref_for: !0 }, c), () => [
+              Y("span", Jl, [
+                X(t, { el: "span" }, {
+                  default: B(() => [
+                    oe(q(c.label), 1)
                   ]),
                   _: 2
                 }, 1024),
-                e.shouldShowDescription(d) ? (p(), F(t, {
+                e.shouldShowDescription(c) ? (p(), M(t, {
                   key: 0,
                   class: "b-listbox-multi-select__option-description",
                   el: "span"
                 }, {
-                  default: R(() => [
-                    ne(j(d.description), 1)
+                  default: B(() => [
+                    oe(q(c.description), 1)
                   ]),
                   _: 2
-                }, 1024)) : Y("", !0)
+                }, 1024)) : j("", !0)
               ])
             ], !0)
           ]),
@@ -1297,13 +1340,13 @@ function ql(e, a, o, l, i, s) {
     ]))), 128))
   ]);
 }
-const Yl = /* @__PURE__ */ ue(Kl, [["render", ql], ["__scopeId", "data-v-dba55b05"]]), Mt = (e) => {
+const Zl = /* @__PURE__ */ ce(jl, [["render", Xl], ["__scopeId", "data-v-dba55b05"]]), Nt = (e) => {
   const a = r(() => !!e.value?.find(({ items: l }) => !!l)), o = r(() => a.value ? e.value?.reduce((l, i) => (i.items ? l.push(...i.items.flat()) : l.push(i), l), []) : e.value);
   return {
     isMultiLevelSelect: a,
     flattenedItemsList: o
   };
-}, Nt = {
+}, Pt = {
   "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})" },
@@ -1315,12 +1358,12 @@ const Yl = /* @__PURE__ */ ue(Kl, [["render", ql], ["__scopeId", "data-v-dba55b0
   "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}）个" }
-}, jl = { key: 0 }, Hl = ["role"], Jl = {
+}, Ql = { key: 0 }, ea = ["role"], ta = {
   key: 1,
   class: "b-listbox-multi-select__divider",
   "aria-hidden": "true"
-}, Xl = { i18n: { messages: Nt } }, Zl = /* @__PURE__ */ Q({
-  ...Xl,
+}, la = { i18n: { messages: Pt } }, aa = /* @__PURE__ */ le({
+  ...la,
   __name: "listbox-multi-select",
   props: {
     hasMoreItems: { type: Boolean, default: !1 },
@@ -1333,258 +1376,256 @@ const Yl = /* @__PURE__ */ ue(Kl, [["render", ql], ["__scopeId", "data-v-dba55b0
   },
   emits: ["select"],
   setup(e, { expose: a, emit: o }) {
-    const l = e, i = o, { t: s, n } = Re({ messages: Nt }), t = Ge(), f = vt(), u = r(
+    const l = e, i = o, { t: s, n } = Ne({ messages: Pt }), t = Ue(), m = mt(), d = r(
       () => ({
-        "aria-label": f["aria-label"]?.toString(),
-        "aria-busy": f["aria-busy"]?.toString(),
-        "aria-atomic": f["aria-atomic"]?.toString(),
-        "aria-live": f["aria-live"]?.toString(),
+        "aria-label": m["aria-label"]?.toString(),
+        "aria-busy": m["aria-busy"]?.toString(),
         "aria-multiselectable": !0
       })
-    ), c = A(null), d = A(null), b = A(null), S = A(null), h = r(() => l.selectedValues.map(({ value: g }) => g)), { isMultiLevelSelect: N, flattenedItemsList: w } = Mt(de(l, "items")), $ = r(() => l.items.some((g) => g.items && g.lazyLoad)), T = r(() => N.value ? l.items.reduce((g, C) => (C.items ? C.lazyLoad ? g.push(C) : g.push(...C.items) : g.push(C), g), []) : l.items), M = r(() => N.value && !l.staticCategories), _ = r(() => M.value ? "tree" : "listbox"), L = r(() => M.value ? "treeitem" : "option"), x = (g) => {
-      const C = l.isOptionDisabled(g), E = h.value?.includes(g.value) || !1;
-      return { isDisabled: C, isPreSelected: E };
-    }, D = r(() => {
-      if (l.searching && N)
+    ), u = A(null), c = A(null), b = A(null), v = A(null), S = r(() => l.selectedValues.map(({ value: h }) => h)), { isMultiLevelSelect: D, flattenedItemsList: G } = Nt(de(l, "items")), x = r(() => l.items.some((h) => h.items && h.lazyLoad)), C = r(() => D.value ? l.items.reduce((h, L) => (L.items ? L.lazyLoad ? h.push(L) : h.push(...L.items) : h.push(L), h), []) : l.items), N = r(() => D.value && !l.staticCategories), $ = r(() => N.value ? "tree" : "listbox"), I = r(() => N.value ? "treeitem" : "option"), k = (h) => {
+      const L = l.isOptionDisabled(h), O = S.value?.includes(h.value) || !1;
+      return { isDisabled: L, isPreSelected: O };
+    }, W = r(() => {
+      if (l.searching && D)
         return l.items;
-      const g = T.value.filter((C) => {
-        if (C.lazyLoad)
+      const h = C.value.filter((L) => {
+        if (L.lazyLoad)
           return !0;
-        const { isDisabled: E, isPreSelected: G } = x(C);
-        return E && G || !E;
+        const { isDisabled: O, isPreSelected: K } = k(L);
+        return O && K || !O;
       });
-      return l.selectedValues.forEach((C) => {
-        g.find((E) => E.value === C.value) || g.push(C);
-      }), g;
-    }), z = r(
-      () => D.value?.filter((g) => h.value?.includes(g.value))
-    ), ie = () => N.value && !l.searching ? w.value.length : l.items.length, oe = r(() => {
-      const g = D.value.length, C = ie(), E = z.value?.length || 0;
-      return E === 0 ? s("selectAll", { total: n(g) }) : E === C ? s("allSelected", { total: n(C) }) : E <= C ? s("numberOfTotalSelected", { number: n(E), total: n(C) }) : s("numbersSelected", { number: n(E) });
-    }), P = (g) => {
-      const C = (G) => {
-        const { isDisabled: X, isPreSelected: pe } = x(G);
-        return X && pe || !X;
-      }, E = g.filter(C).filter((G) => !h.value.includes(G.value));
-      i("select", [...l.selectedValues, ...E]);
-    }, k = (g) => {
-      const C = (X) => {
-        const { isDisabled: pe, isPreSelected: K } = x(X);
-        return !(pe && K);
-      }, E = g.filter(C).map(({ value: X }) => X), G = l.selectedValues.filter((X) => !E?.includes(X.value));
-      i("select", G);
-    }, W = () => {
-      P(w.value);
-    }, ee = () => {
-      k(w.value);
-    }, { isAllSelected: U, isIndeterminate: te, toggleSelectAll: me } = _t(
-      z,
-      D,
+      return l.selectedValues.forEach((L) => {
+        h.find((O) => O.value === L.value) || h.push(L);
+      }), h;
+    }), P = r(
+      () => W.value?.filter((h) => S.value?.includes(h.value))
+    ), H = () => D.value && !l.searching ? G.value.length : l.items.length, re = r(() => {
+      const h = W.value.length, L = H(), O = P.value?.length || 0;
+      return O === 0 ? s("selectAll", { total: n(h) }) : O === L ? s("allSelected", { total: n(L) }) : O <= L ? s("numberOfTotalSelected", { number: n(O), total: n(L) }) : s("numbersSelected", { number: n(O) });
+    }), _ = (h) => {
+      const L = (K) => {
+        const { isDisabled: ee, isPreSelected: ue } = k(K);
+        return ee && ue || !ee;
+      }, O = h.filter(L).filter((K) => !S.value.includes(K.value));
+      i("select", [...l.selectedValues, ...O]);
+    }, J = (h) => {
+      const L = (ee) => {
+        const { isDisabled: ue, isPreSelected: U } = k(ee);
+        return !(ue && U);
+      }, O = h.filter(L).map(({ value: ee }) => ee), K = l.selectedValues.filter((ee) => !O?.includes(ee.value));
+      i("select", K);
+    }, R = () => {
+      _(G.value);
+    }, V = () => {
+      J(G.value);
+    }, { isAllSelected: F, isIndeterminate: Ie, toggleSelectAll: ke } = kt(
+      P,
       W,
-      ee
-    ), O = r(() => te.value ? "mixed" : `${U.value}`), ae = A(U.value), Me = () => {
-      ae.value = !ae.value, me(ae.value);
+      R,
+      V
+    ), be = r(() => Ie.value ? "mixed" : `${F.value}`), T = A(F.value), fe = () => {
+      T.value = !T.value, ke(T.value);
     };
-    he(U, () => {
-      ae.value = U.value;
+    pe(F, () => {
+      T.value = F.value;
     });
-    const Je = (g) => {
-      if (g.lazyLoad) {
-        const C = (g.items ?? []).map(({ value: G }) => G), E = l.selectedValues.filter(({ value: G }) => !C.includes(G));
-        i("select", [...E, g]);
+    const Pe = (h) => {
+      if (h.lazyLoad) {
+        const L = (h.items ?? []).map(({ value: K }) => K), O = l.selectedValues.filter(({ value: K }) => !L.includes(K));
+        i("select", [...O, h]);
       } else
-        P(g.items);
-    }, B = (g) => {
-      g.lazyLoad ? i(
+        _(h.items);
+    }, Be = (h) => {
+      h.lazyLoad ? i(
         "select",
-        l.selectedValues.filter(({ value: C }) => C !== g.value)
-      ) : k(g.items);
-    }, ce = (g, C) => {
-      let E = !1, G = l.selectedValues.filter(({ value: pe }) => C.value === pe ? (E = !0, !1) : !0);
-      if (E) {
-        i(g, G);
+        l.selectedValues.filter(({ value: L }) => L !== h.value)
+      ) : J(h.items);
+    }, Ee = (h, L) => {
+      let O = !1, K = l.selectedValues.filter(({ value: ue }) => L.value === ue ? (O = !0, !1) : !0);
+      if (O) {
+        i(h, K);
         return;
       }
-      const X = l.items.find(
-        (pe) => pe.items?.some((K) => K.value === C.value) && pe.lazyLoad && h.value.includes(pe.value)
+      const ee = l.items.find(
+        (ue) => ue.items?.some((U) => U.value === L.value) && ue.lazyLoad && S.value.includes(ue.value)
       );
-      if (X) {
-        G = G.filter(({ value: K }) => K !== X.value);
-        const pe = X.items.filter(
-          (K) => K.value !== C.value
+      if (ee) {
+        K = K.filter(({ value: U }) => U !== ee.value);
+        const ue = ee.items.filter(
+          (U) => U.value !== L.value
         );
-        G.push(...pe);
+        K.push(...ue);
       } else
-        G.push(C);
-      i(g, G);
-    }, Te = r(() => {
-      if (!N.value)
+        K.push(L);
+      i(h, K);
+    }, Fe = r(() => {
+      if (!D.value)
         return l.selectedValues;
-      const g = (K) => h.value.includes(K.value), C = (K) => K.lazyLoad && g(K) ? !0 : !l.staticCategories && K.items.length > 0 && K.items.every((Ve) => g(Ve)), E = l.items.flatMap(
-        (K) => K.items && !C(K) ? K.items : K
-      ), G = E.filter((K) => K.items ? !0 : g(K)), X = /* @__PURE__ */ new Set();
-      E.forEach((K) => {
-        X.add(K.value), K.items?.forEach((Ve) => X.add(Ve.value));
+      const h = (U) => S.value.includes(U.value), L = (U) => U.lazyLoad && h(U) ? !0 : !l.staticCategories && U.items.length > 0 && U.items.every((Je) => h(Je)), O = l.items.flatMap(
+        (U) => U.items && !L(U) ? U.items : U
+      ), K = O.filter((U) => U.items ? !0 : h(U)), ee = /* @__PURE__ */ new Set();
+      O.forEach((U) => {
+        ee.add(U.value), U.items?.forEach((Je) => ee.add(Je.value));
       });
-      const pe = l.selectedValues.filter((K) => !X.has(K.value));
-      return [...G, ...pe];
-    }), st = r(() => {
-      if (!Te.value?.length)
+      const ue = l.selectedValues.filter((U) => !ee.has(U.value));
+      return [...K, ...ue];
+    }), We = r(() => {
+      if (!Fe.value?.length)
         return !1;
-      const g = ["automatic", "button"].includes(l.lazyLoadType), C = l.selectedValues?.length > 0 && z.value?.length !== D.value?.length;
-      return g && l.hasMoreItems ? !!l.selectedValues?.length : C;
-    }), Ke = r(() => $.value ? !1 : ["automatic", "button"].includes(l.lazyLoadType) ? !l.hasMoreItems : !0), Ne = A([]), { visibleDomOptions: _e, updateVisibleDomOptions: Xe } = mt(
-      c,
+      const h = ["automatic", "button"].includes(l.lazyLoadType), L = l.selectedValues?.length > 0 && P.value?.length !== W.value?.length;
+      return h && l.hasMoreItems ? !!l.selectedValues?.length : L;
+    }), Ge = r(() => x.value ? !1 : ["automatic", "button"].includes(l.lazyLoadType) ? !l.hasMoreItems : !0), w = A([]), { visibleDomOptions: se, updateVisibleDomOptions: $e } = yt(
+      u,
       de(l, "items"),
-      L
-    ), Ze = (g) => {
-      Ne.value.includes(g) ? Ne.value = Ne.value.filter((C) => C !== g) : Ne.value.push(g), be(() => {
-        Xe();
+      I
+    ), Qe = (h) => {
+      w.value.includes(h) ? w.value = w.value.filter((L) => L !== h) : w.value.push(h), ne(() => {
+        $e();
       });
-    }, Ue = (g) => {
-      _e.value[g]?.focus();
+    }, qe = (h) => {
+      se.value[h]?.focus();
     }, {
       moveToNextElement: nt,
       moveToPreviousElement: it,
       moveToFirstElement: rt,
-      moveToLastElement: Qe,
-      preventDefault: et,
-      focusedIndex: We,
-      setListboxFocusedIndex: dt
-    } = kt(
+      moveToLastElement: dt,
+      preventDefault: Ye,
+      focusedIndex: et,
+      setListboxFocusedIndex: tt
+    } = $t(
       {
-        items: _e
+        items: se
       },
-      Ue
-    ), qe = {
-      [le.ARROW_UP]: (g) => it(g),
-      [le.ARROW_DOWN]: (g) => nt(g),
-      [le.HOME]: rt,
-      [le.END]: Qe
+      qe
+    ), ct = {
+      [ae.ARROW_UP]: (h) => it(h),
+      [ae.ARROW_DOWN]: (h) => nt(h),
+      [ae.HOME]: rt,
+      [ae.END]: dt
     };
     a({
       /**
        * 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: dt
+      setListboxFocusedIndex: tt
     });
-    const Ye = {
-      [le.ARROW_UP]: et,
-      [le.ARROW_DOWN]: et
-    }, ut = r(() => {
-      let g = Ke.value ? 1 : 0;
-      const C = {};
-      return l.items.forEach((E) => {
-        let G = Ne.value.includes(E.value);
-        E.items ? (l.staticCategories ? G = !0 : C[E.value] = g++, G && E.items.forEach((X) => C[X.value] = g++)) : C[E.value] = g++;
-      }), C;
+    const je = {
+      [ae.ARROW_UP]: Ye,
+      [ae.ARROW_DOWN]: Ye
+    }, He = r(() => {
+      let h = Ge.value ? 1 : 0;
+      const L = {};
+      return l.items.forEach((O) => {
+        let K = w.value.includes(O.value);
+        O.items ? (l.staticCategories ? K = !0 : L[O.value] = h++, K && O.items.forEach((ee) => L[ee.value] = h++)) : L[O.value] = h++;
+      }), L;
     });
-    return (g, C) => (p(), I("div", {
+    return (h, L) => (p(), E("div", {
       ref_key: "listboxRef",
-      ref: c,
+      ref: u,
       class: "b-listbox-multi-select"
     }, [
-      st.value ? (p(), I("div", jl, [
-        Le((p(), I("ul", V({ class: "b-listbox-multi-select__chips" }, fe(Ye, !0)), [
-          (p(!0), I(Ce, null, re(Te.value, (E) => (p(), I("li", {
-            key: E.value
+      We.value ? (p(), E("div", Ql, [
+        Le((p(), E("ul", z({ class: "b-listbox-multi-select__chips" }, ve(je, !0)), [
+          (p(!0), E(ye, null, ie(Fe.value, (O) => (p(), E("li", {
+            key: O.value
           }, [
-            q(v(tl), {
+            X(f(el), {
               ref_for: !0,
               ref_key: "selectedListboxItemsRef",
               ref: b,
-              disabled: g.isOptionDisabled(E),
-              label: E.label,
+              disabled: h.isOptionDisabled(O),
+              label: O.label,
               condensed: "",
-              onClick: (G) => E.items ? B(E) : ce("select", E)
+              onClick: (K) => O.items ? Be(O) : Ee("select", O)
             }, null, 8, ["disabled", "label", "onClick"])
           ]))), 128))
         ], 16)), [
-          [v(je)]
+          [f(Xe)]
         ]),
-        C[4] || (C[4] = Z("hr", {
+        L[4] || (L[4] = Y("hr", {
           class: "b-listbox-multi-select__divider",
           "aria-hidden": "true"
         }, null, -1))
-      ])) : Y("", !0),
-      Le((p(), I("div", V(u.value, { role: _.value }, fe(qe, !0)), [
-        Ke.value ? (p(), F(v(ot), {
+      ])) : j("", !0),
+      Le((p(), E("div", z(d.value, { role: $.value }, ve(ct, !0)), [
+        Ge.value ? (p(), M(f(st), {
           key: 0,
           ref_key: "selectAllListboxItemsRef",
-          ref: d,
+          ref: c,
           class: "b-listbox-multi-select__option",
-          tabindex: v(We) === 0 ? 0 : -1,
-          "aria-selected": O.value !== "false",
-          "aria-checked": O.value,
-          role: L.value,
-          onClick: Me,
-          onEnterPressed: Me,
-          onSpacePressed: Oe(Me, ["prevent"])
+          tabindex: f(et) === 0 ? 0 : -1,
+          "aria-selected": be.value !== "false",
+          "aria-checked": be.value,
+          role: I.value,
+          onClick: fe,
+          onEnterPressed: fe,
+          onSpacePressed: ge(fe, ["prevent"])
         }, {
-          default: R(() => [
-            q(v(yt), {
-              checked: v(U),
-              indeterminate: v(te)
+          default: B(() => [
+            X(f(gt), {
+              checked: f(F),
+              indeterminate: f(Ie)
             }, null, 8, ["checked", "indeterminate"]),
-            q(v(Be), { el: "span" }, {
-              default: R(() => [
-                ne(j(oe.value), 1)
+            X(f(Me), { el: "span" }, {
+              default: B(() => [
+                oe(q(re.value), 1)
               ]),
               _: 1
             })
           ]),
           _: 1
-        }, 8, ["tabindex", "aria-selected", "aria-checked", "role"])) : Y("", !0),
-        Ke.value ? (p(), I("hr", Jl)) : Y("", !0),
-        q(v(Yl), {
+        }, 8, ["tabindex", "aria-selected", "aria-checked", "role"])) : j("", !0),
+        Ge.value ? (p(), E("hr", ta)) : j("", !0),
+        X(f(Zl), {
           ref_key: "listboxItemsRef",
-          ref: S,
-          items: g.items,
-          "is-option-disabled": g.isOptionDisabled,
-          "is-multi-level": v(N),
-          "static-categories": g.staticCategories,
-          searching: g.searching,
-          "selected-items-list": h.value,
-          "focused-index": v(We),
-          "items-index": ut.value,
-          role: L.value,
-          onToggleCheckboxSelection: C[0] || (C[0] = (E) => ce("select", E)),
-          onSelectCategory: Je,
-          onUnselectCategory: B,
-          onToggleCategoryVisibility: Ze,
-          onSpacePressed: C[1] || (C[1] = (E) => ce(v(y).SPACE, E)),
-          onTabPressed: C[2] || (C[2] = (E) => ce(v(y).TAB, E)),
-          onEnterPressed: C[3] || (C[3] = (E) => ce(v(y).ENTER, E))
-        }, Ee({ _: 2 }, [
-          re(v(t), (E, G) => ({
-            name: G,
-            fn: R((X) => [
-              J(g.$slots, G, ve(Ae(X)), void 0, !0)
+          ref: v,
+          items: h.items,
+          "is-option-disabled": h.isOptionDisabled,
+          "is-multi-level": f(D),
+          "static-categories": h.staticCategories,
+          searching: h.searching,
+          "selected-items-list": S.value,
+          "focused-index": f(et),
+          "items-index": He.value,
+          role: I.value,
+          onToggleCheckboxSelection: L[0] || (L[0] = (O) => Ee("select", O)),
+          onSelectCategory: Pe,
+          onUnselectCategory: Be,
+          onToggleCategoryVisibility: Qe,
+          onSpacePressed: L[1] || (L[1] = (O) => Ee(f(g).SPACE, O)),
+          onTabPressed: L[2] || (L[2] = (O) => Ee(f(g).TAB, O)),
+          onEnterPressed: L[3] || (L[3] = (O) => Ee(f(g).ENTER, O))
+        }, Te({ _: 2 }, [
+          ie(f(t), (O, K) => ({
+            name: K,
+            fn: B((ee) => [
+              Q(h.$slots, K, me(we(ee)), void 0, !0)
             ])
           }))
         ]), 1032, ["items", "is-option-disabled", "is-multi-level", "static-categories", "searching", "selected-items-list", "focused-index", "items-index", "role"])
-      ], 16, Hl)), [
-        [v(je)]
+      ], 16, ea)), [
+        [f(Xe)]
       ])
     ], 512));
   }
-}), Ct = /* @__PURE__ */ ue(Zl, [["__scopeId", "data-v-e11311e0"]]), Pt = (e, a = 300) => {
+}), Lt = /* @__PURE__ */ ce(aa, [["__scopeId", "data-v-a70d33ef"]]), Ft = (e, a = 300) => {
   let o;
   return (...i) => {
     o && clearTimeout(o), o = setTimeout(() => e(...i), a);
   };
-}, Ql = 36, ea = Q({
+}, oa = 36, sa = le({
   name: "bento-listbox",
   components: {
-    BentoEmptyState: wt,
-    BentoListboxSingleSelect: El,
-    BentoListboxMultiSelect: Ct,
-    BentoTypography: Be,
-    BentoLoadingIndicator: At,
-    BentoListboxLazyLoad: Bt
+    BentoEmptyState: At,
+    BentoListboxSingleSelect: Ol,
+    BentoListboxMultiSelect: Lt,
+    BentoTypography: Me,
+    BentoLoadingIndicator: Tt,
+    BentoListboxLazyLoad: Rt
   },
-  directives: { BentoKeyboardNavigationDirective: je },
+  directives: { BentoKeyboardNavigationDirective: Xe },
   props: {
     /**
      * Defines a string value that labels an interactive element.
@@ -1644,8 +1685,8 @@ const Yl = /* @__PURE__ */ ue(Kl, [["render", ql], ["__scopeId", "data-v-dba55b0
      */
     lazyLoadType: {
       type: String,
-      default: $e.NONE,
-      validator: (e) => Object.values($e).includes(e)
+      default: Ae.NONE,
+      validator: (e) => Object.values(Ae).includes(e)
     },
     /**
      * Indicates the listbox is loading filtered items.
@@ -1669,7 +1710,7 @@ const Yl = /* @__PURE__ */ ue(Kl, [["render", ql], ["__scopeId", "data-v-dba55b0
      *
      * If enabled, hides the "Select all" checkbox in "multiple" mode.
      */
-    searching: Ct.props.searching,
+    searching: Lt.props.searching,
     /**
      * The `input` value.
      * Providing an empty string or empty array will select no options.
@@ -1689,109 +1730,103 @@ const Yl = /* @__PURE__ */ ue(Kl, [["render", ql], ["__scopeId", "data-v-dba55b0
     }
   },
   emits: [
-    y.SELECT,
-    y.SPACE,
-    y.SHOW_MORE,
-    y.ENTER,
-    y.ESCAPE,
-    y.TAB
+    g.SELECT,
+    g.SPACE,
+    g.SHOW_MORE,
+    g.ENTER,
+    g.ESCAPE,
+    g.TAB
   ],
   setup(e, { emit: a, slots: o, expose: l }) {
-    const i = A([]), s = de(e, "items"), n = r(() => e.lazyLoadType !== $e.AUTOMATIC), t = r(() => e.lazyLoadType === $e.AUTOMATIC), f = () => typeof e?.virtualScroll == "object" && e?.virtualScroll?.itemHeight ? e.virtualScroll.itemHeight : Ql, u = !e?.multiple && e?.virtualScroll !== !1 && e?.lazyLoadType === "none", {
-      containerRef: c,
-      containerProps: d,
+    const i = A([]), s = de(e, "items"), n = r(() => e.lazyLoadType !== Ae.AUTOMATIC), t = r(() => e.lazyLoadType === Ae.AUTOMATIC), m = () => typeof e?.virtualScroll == "object" && e?.virtualScroll?.itemHeight ? e.virtualScroll.itemHeight : oa, d = !e?.multiple && e?.virtualScroll !== !1 && e?.lazyLoadType === "none", {
+      containerRef: u,
+      containerProps: c,
       onScroll: b,
-      list: S,
-      wrapperProps: h,
-      scrollToIndex: N,
-      startIndex: w
-    } = rl(s, {
-      itemHeight: f(),
+      list: v,
+      wrapperProps: S,
+      scrollToIndex: D,
+      startIndex: G
+    } = dl(s, {
+      itemHeight: m(),
       // Disable virtual scrolling if not enabled or if lazy loading is enabled or if multi-select
-      disabled: !u
-    }), $ = r(() => u ? s.value.length : 0), T = r(
-      () => e.componentLoading !== void 0 || n.value ? "true" : void 0
-    ), M = r(
+      disabled: !d
+    }), x = r(() => d ? s.value.length : 0), C = r(
       () => n.value && e.loading || e.componentLoading ? "true" : "false"
-    ), _ = r(
-      () => n.value || e.componentLoading !== void 0 ? "polite" : void 0
-    ), L = r(
+    ), N = r(
       () => ({
         "aria-label": e.ariaLabel,
-        "aria-busy": M.value,
-        "aria-atomic": T.value,
-        "aria-live": _.value
+        "aria-busy": C.value
       })
-    ), x = r(
+    ), $ = r(
       () => e.componentLoading ? {
-        ...L.value,
+        ...N.value,
         role: "alert"
       } : {}
-    ), D = (te) => (me) => {
-      a(te, me);
-    }, z = () => {
-      a(y.SHOW_MORE);
-    }, ie = Pt(() => {
-      const te = c.value;
-      if (!te)
+    ), I = (V) => (F) => {
+      a(V, F);
+    }, k = () => {
+      a(g.SHOW_MORE);
+    }, W = Ft(() => {
+      const V = u.value;
+      if (!V)
         return;
-      const me = Math.round(te.scrollTop) + te.clientHeight >= te.scrollHeight;
-      e.hasMoreItems && me && !e.loading && z();
-    }), oe = () => {
-      t.value ? ie() : b();
-    }, P = r(() => e.items?.length === 0), k = r(
-      () => e.lazyLoadType === $e.BUTTON && e.hasMoreItems
-    ), W = r(
-      () => e.loading ? lt.LOADING : lt.START
-    ), ee = r(() => ({
+      const F = Math.round(V.scrollTop) + V.clientHeight >= V.scrollHeight;
+      e.hasMoreItems && F && !e.loading && k();
+    }), P = () => {
+      t.value ? W() : b();
+    }, H = r(() => e.items?.length === 0), re = r(
+      () => e.lazyLoadType === Ae.BUTTON && e.hasMoreItems
+    ), _ = r(
+      () => e.loading ? at.LOADING : at.START
+    ), J = r(() => ({
       ...e.emptyState,
       variant: "condensed"
-    })), U = {
-      [y.SELECT]: D(y.SELECT),
-      [y.SPACE]: D(y.SPACE),
-      [y.TAB]: D(y.TAB),
-      [y.ENTER]: D(y.ENTER)
+    })), R = {
+      [g.SELECT]: I(g.SELECT),
+      [g.SPACE]: I(g.SPACE),
+      [g.TAB]: I(g.TAB),
+      [g.ENTER]: I(g.ENTER)
     };
-    return l({ listboxRef: c, listboxItemRef: i }), {
+    return l({ listboxRef: u, listboxItemRef: i }), {
       // Refs
-      listboxRef: c,
+      listboxRef: u,
       listboxItemRef: i,
       // a11y
-      ariaAttributes: L,
-      listboxContainerAttributes: x,
+      ariaAttributes: N,
+      listboxContainerAttributes: $,
       // Values
-      containerProps: d,
-      isSearchResultEmpty: P,
-      limitedEmptyStateProps: ee,
-      loadingButtonState: W,
+      containerProps: c,
+      isSearchResultEmpty: H,
+      limitedEmptyStateProps: J,
+      loadingButtonState: _,
       slots: o,
-      shouldDisplayShowMoreButton: k,
-      virtualisedItems: S,
-      wrapperProps: h,
+      shouldDisplayShowMoreButton: re,
+      virtualisedItems: v,
+      wrapperProps: S,
       // Virtual scroll
-      totalItemCount: $,
-      scrollToIndex: N,
-      virtualScrollStartIndex: w,
+      totalItemCount: x,
+      scrollToIndex: D,
+      virtualScrollStartIndex: G,
       // Enums
-      BentoKeyboardNavigationKeyDownEvent: le,
-      BentoListboxEvent: y,
+      BentoKeyboardNavigationKeyDownEvent: ae,
+      BentoListboxEvent: g,
       // Methods
-      onListboxContainerScroll: oe,
-      onOptionSelected: D,
-      emitShowMore: z,
-      listboxListeners: U
+      onListboxContainerScroll: P,
+      onOptionSelected: I,
+      emitShowMore: k,
+      listboxListeners: R
     };
   }
-}), ta = ["id"], la = {
+}), na = ["id"], ia = {
   key: 0,
   class: "b-listbox__loading-filtered-items"
-}, aa = {
+}, ra = {
   key: 1,
   class: "b-listbox__empty-search-message"
 };
-function oa(e, a, o, l, i, s) {
-  const n = H("bento-loading-indicator"), t = H("bento-empty-state"), f = H("bento-typography"), u = H("bento-listbox-multi-select"), c = H("bento-listbox-single-select"), d = H("bento-listbox-lazy-load"), b = Lt("bento-keyboard-navigation-directive");
-  return Le((p(), I("div", V({
+function da(e, a, o, l, i, s) {
+  const n = Z("bento-loading-indicator"), t = Z("bento-empty-state"), m = Z("bento-typography"), d = Z("bento-listbox-multi-select"), u = Z("bento-listbox-single-select"), c = Z("bento-listbox-lazy-load"), b = It("bento-keyboard-navigation-directive");
+  return Le((p(), E("div", z({
     id: e.id,
     ref: "listboxRef",
     class: "b-listbox",
@@ -1799,23 +1834,23 @@ function oa(e, a, o, l, i, s) {
   }, e.listboxContainerAttributes, {
     style: e.containerProps?.style,
     "data-testid": "listbox-container",
-    onScroll: a[0] || (a[0] = (...S) => e.onListboxContainerScroll && e.onListboxContainerScroll(...S))
+    onScroll: a[0] || (a[0] = (...v) => e.onListboxContainerScroll && e.onListboxContainerScroll(...v))
   }), [
-    Z("div", ve(Ae(e.wrapperProps)), [
-      e.componentLoading ? (p(), I("div", la, [
-        q(n)
-      ])) : e.isSearchResultEmpty ? (p(), I("div", aa, [
-        e.emptyState ? (p(), F(t, ve(V({ key: 0 }, e.limitedEmptyStateProps)), null, 16)) : (p(), F(f, {
+    Y("div", me(we(e.wrapperProps)), [
+      e.componentLoading ? (p(), E("div", ia, [
+        X(n)
+      ])) : e.isSearchResultEmpty ? (p(), E("div", ra, [
+        e.emptyState ? (p(), M(t, me(z({ key: 0 }, e.limitedEmptyStateProps)), null, 16)) : (p(), M(m, {
           key: 1,
           el: "span"
         }, {
-          default: R(() => [
-            ne(j(e.noResultsMessage), 1)
+          default: B(() => [
+            oe(q(e.noResultsMessage), 1)
           ]),
           _: 1
         }))
-      ])) : (p(), I(Ce, { key: 2 }, [
-        e.multiple ? (p(), F(u, V({
+      ])) : (p(), E(ye, { key: 2 }, [
+        e.multiple ? (p(), M(d, z({
           key: 0,
           ref: "listboxItemRef",
           "has-more-items": e.hasMoreItems
@@ -1826,14 +1861,14 @@ function oa(e, a, o, l, i, s) {
           "selected-values": e.selectedValue,
           searching: e.searching,
           "is-option-disabled": e.isOptionDisabled
-        }, fe(e.listboxListeners)), Ee({ _: 2 }, [
-          re(e.slots, (S, h) => ({
-            name: h,
-            fn: R((N) => [
-              J(e.$slots, h, ve(Ae(N)), void 0, !0)
+        }, ve(e.listboxListeners)), Te({ _: 2 }, [
+          ie(e.slots, (v, S) => ({
+            name: S,
+            fn: B((D) => [
+              Q(e.$slots, S, me(we(D)), void 0, !0)
             ])
           }))
-        ]), 1040, ["has-more-items", "items", "lazy-load-type", "static-categories", "selected-values", "searching", "is-option-disabled"])) : (p(), F(c, V({
+        ]), 1040, ["has-more-items", "items", "lazy-load-type", "static-categories", "selected-values", "searching", "is-option-disabled"])) : (p(), M(u, z({
           key: 1,
           ref: "listboxItemRef",
           "active-descendant-id": e.activeDescendantId,
@@ -1846,68 +1881,68 @@ function oa(e, a, o, l, i, s) {
           "selected-value": e.selectedValue,
           "static-categories": e.staticCategories,
           "is-option-disabled": e.isOptionDisabled
-        }, fe(e.listboxListeners)), Ee({ _: 2 }, [
-          re(e.slots, (S, h) => ({
-            name: h,
-            fn: R((N) => [
-              J(e.$slots, h, ve(Ae(N)), void 0, !0)
+        }, ve(e.listboxListeners)), Te({ _: 2 }, [
+          ie(e.slots, (v, S) => ({
+            name: S,
+            fn: B((D) => [
+              Q(e.$slots, S, me(we(D)), void 0, !0)
             ])
           }))
         ]), 1040, ["active-descendant-id", "items", "option-id-base", "total-item-count", "scroll-to-index", "virtual-scroll-start-index", "selected-value", "static-categories", "is-option-disabled"])),
-        e.lazyLoadType !== "none" ? (p(), F(d, {
+        e.lazyLoadType !== "none" ? (p(), M(c, {
           key: 2,
           "has-more-items": e.hasMoreItems,
           loading: e.loading,
           type: e.lazyLoadType,
           onShowMore: e.emitShowMore
-        }, null, 8, ["has-more-items", "loading", "type", "onShowMore"])) : Y("", !0)
+        }, null, 8, ["has-more-items", "loading", "type", "onShowMore"])) : j("", !0)
       ], 64))
     ], 16)
-  ], 16, ta)), [
+  ], 16, na)), [
     [b]
   ]);
 }
-const pt = /* @__PURE__ */ ue(ea, [["render", oa], ["__scopeId", "data-v-ccece965"]]), bt = (e, a) => {
+const bt = /* @__PURE__ */ ce(sa, [["render", da], ["__scopeId", "data-v-b7f464da"]]), ft = (e, a) => {
   for (const o of e) {
     if (o.value === a)
       return o;
     if (o.items) {
-      const l = bt(o.items, a);
+      const l = ft(o.items, a);
       if (l)
         return l;
     }
   }
   return null;
-}, sa = (e) => typeof e == "object" && e !== null && "value" in e && "label" in e, na = (e, a, o, l) => {
-  const i = A([]), s = A(), n = (c) => {
-    o.value ? s.value = c.map(({ value: d }) => d) : s.value = c.length > 0 ? c[0].value : null;
-  }, t = (c) => {
-    o.value ? s.value = c.map(({ value: d, label: b }) => ({ value: d, label: b })) : s.value = c.length > 0 ? { value: c[0].value, label: c[0].label } : null;
-  }, f = (c) => {
-    i.value = c, l?.value ? t(c) : n(c);
-  }, u = () => {
+}, ca = (e) => typeof e == "object" && e !== null && "value" in e && "label" in e, ua = (e, a, o, l) => {
+  const i = A([]), s = A(), n = (u) => {
+    o.value ? s.value = u.map(({ value: c }) => c) : s.value = u.length > 0 ? u[0].value : null;
+  }, t = (u) => {
+    o.value ? s.value = u.map(({ value: c, label: b }) => ({ value: c, label: b })) : s.value = u.length > 0 ? { value: u[0].value, label: u[0].label } : null;
+  }, m = (u) => {
+    i.value = u, l?.value ? t(u) : n(u);
+  }, d = () => {
     i.value = [], s.value = null;
   };
-  return he(
+  return pe(
     () => a.value,
     () => {
       if (!a.value && a.value !== 0) {
-        u();
+        d();
         return;
       }
-      const c = !Array.isArray(a.value), d = [...i.value];
-      u();
-      const b = (S) => {
-        if (sa(S))
-          i.value.push(S);
+      const u = !Array.isArray(a.value), c = [...i.value];
+      d();
+      const b = (v) => {
+        if (ca(v))
+          i.value.push(v);
         else {
-          let h = bt(e.value, S);
-          h || (h = bt(d, S)), h || (h = { value: S, label: S.toString() }), i.value.push(h);
+          let S = ft(e.value, v);
+          S || (S = ft(c, v)), S || (S = { value: v, label: v.toString() }), i.value.push(S);
         }
       };
-      if (c) {
-        const S = a.value;
-        b(S), l?.value ? t(i.value) : n(i.value);
+      if (u) {
+        const v = a.value;
+        b(v), l?.value ? t(i.value) : n(i.value);
         return;
       }
       a.value.forEach(b), l?.value ? t(i.value) : n(i.value);
@@ -1918,12 +1953,12 @@ const pt = /* @__PURE__ */ ue(ea, [["render", oa], ["__scopeId", "data-v-ccece96
     cachedSelectedListboxOptions: i,
     cachedListboxSelectedValues: s,
     // Methods
-    resetCache: u,
-    setCachedValues: f
+    resetCache: d,
+    setCachedValues: m
   };
 };
-var He = /* @__PURE__ */ ((e) => (e.DEFAULT = "DropdownInputDefault", e.SMALL = "DropdownInputSmall", e))(He || {});
-const gt = {
+var Ze = /* @__PURE__ */ ((e) => (e.DEFAULT = "DropdownInputDefault", e.SMALL = "DropdownInputSmall", e))(Ze || {});
+const ht = {
   "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" },
@@ -1935,20 +1970,20 @@ const gt = {
   "ja-JP": { apply: "適用", cancel: "キャンセル", noOptionsMatchThisSearch: "この検索に一致するオプションはありません" },
   "pt-BR": { apply: "Aplicar", cancel: "Cancelar", noOptionsMatchThisSearch: "Nenhuma opção corresponde a esta busca" },
   "zh-CN": { apply: "应用", cancel: "取消", noOptionsMatchThisSearch: "没有符合此搜索条件的选项" }
-}, ia = (e, a, o, l) => {
-  const i = A(e.value), { t: s } = Re({ messages: gt });
-  he(e, () => {
+}, pa = (e, a, o, l) => {
+  const i = A(e.value), { t: s } = Ne({ messages: ht });
+  pe(e, () => {
     i.value = e.value;
   });
   const n = r(
     () => JSON.stringify(i.value) === JSON.stringify(e.value)
   ), t = () => {
-    l(y.SELECT, i.value), l(y.CLOSE_DROPDOWN);
-  }, f = () => {
-    i.value = e.value, l(y.CLOSE_DROPDOWN);
-  }, u = () => {
+    l(g.SELECT, i.value), l(g.CLOSE_DROPDOWN);
+  }, m = () => {
+    i.value = e.value, l(g.CLOSE_DROPDOWN);
+  }, d = () => {
     o.value && a.value && (i.value = e.value);
-  }, c = r(() => [
+  }, u = r(() => [
     {
       title: s("apply"),
       event: t,
@@ -1956,41 +1991,41 @@ const gt = {
     },
     {
       title: s("cancel"),
-      event: f
+      event: m
     }
-  ]), d = (T) => {
-    i.value = T, a.value || l(y.SELECT, T);
-  }, b = (T) => {
-    d(T), l(y.TAB);
-  }, S = (T) => {
-    d(T), l(y.ENTER);
-  }, h = (T) => {
-    d(T), l(y.SPACE);
-  }, N = () => {
-    f(), l(y.ESCAPE);
-  }, w = () => {
-    l(y.SHOW_MORE);
-  }, $ = {
-    [y.SELECT]: d,
-    [y.SHOW_MORE]: w,
-    [y.TAB]: b,
-    [y.SPACE]: h,
-    [y.ENTER]: S
+  ]), c = (C) => {
+    i.value = C, a.value || l(g.SELECT, C);
+  }, b = (C) => {
+    c(C), l(g.TAB);
+  }, v = (C) => {
+    c(C), l(g.ENTER);
+  }, S = (C) => {
+    c(C), l(g.SPACE);
+  }, D = () => {
+    m(), l(g.ESCAPE);
+  }, G = () => {
+    l(g.SHOW_MORE);
+  }, x = {
+    [g.SELECT]: c,
+    [g.SHOW_MORE]: G,
+    [g.TAB]: b,
+    [g.SPACE]: S,
+    [g.ENTER]: v
   };
   return {
     // Values
-    actions: c,
+    actions: u,
     internalSelectedValue: i,
     // Methods
-    listeners: $,
-    onEscapeKey: N,
-    onOutsideDropdownClick: u
+    listeners: x,
+    onEscapeKey: D,
+    onOutsideDropdownClick: d
   };
-}, ra = Q({
-  i18n: { messages: gt },
+}, ba = le({
+  i18n: { messages: ht },
   name: "bento-dropdown-options-container"
-}), da = /* @__PURE__ */ Q({
-  ...ra,
+}), fa = /* @__PURE__ */ le({
+  ...ba,
   props: {
     /**
      * Defines a string value that labels an interactive element.
@@ -2053,8 +2088,8 @@ const gt = {
      */
     lazyLoadType: {
       type: String,
-      default: $e.AUTOMATIC,
-      validator: (e) => Object.values($e).includes(e)
+      default: Ae.AUTOMATIC,
+      validator: (e) => Object.values(Ae).includes(e)
     },
     /**
      * Indicates if new options are lazy loading.
@@ -2084,7 +2119,7 @@ const gt = {
      *
      * If enabled, hides the "Select all" checkbox in "multiple" mode.
      */
-    searching: pt.props.searching,
+    searching: bt.props.searching,
     /**
      * If enabled, dropdown will display non-selectable, static categories
      */
@@ -2093,7 +2128,7 @@ const gt = {
      * Reference to the DOM element or Vue component for positioning
      * the Dropdown container.
      */
-    targetElement: { type: ht.props.targetElement.type, required: !0 },
+    targetElement: { type: St.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.
@@ -2104,27 +2139,27 @@ const gt = {
     }
   },
   setup(e, { expose: a, emit: o }) {
-    const l = Ge(), i = o, s = e, { selectedValue: n, multiple: t } = Yt(s), f = A(null), { t: u } = Re({ messages: gt }), c = r(() => s.open && !s.disabled), d = r(() => u("noOptionsMatchThisSearch")), b = r(() => ({
+    const l = Ue(), i = o, s = e, { selectedValue: n, multiple: t } = jt(s), m = A(null), { t: d } = Ne({ messages: ht }), u = r(() => s.open && !s.disabled), c = r(() => d("noOptionsMatchThisSearch")), b = r(() => ({
       "b-dropdown-options-container--single": !s?.multiple
-    })), S = r(() => ({
+    })), v = r(() => ({
       "b-dropdown-options-container__listbox--single": !s?.multiple
-    })), { actions: h, internalSelectedValue: N, listeners: w, onEscapeKey: $, onOutsideDropdownClick: T } = ia(n, t, c, i), M = r(() => s?.multiple ? al : ht), _ = r(() => {
-      const L = {
+    })), { actions: S, internalSelectedValue: D, listeners: G, onEscapeKey: x, onOutsideDropdownClick: C } = pa(n, t, u, i), N = r(() => s?.multiple ? ll : St), $ = r(() => {
+      const I = {
         "min-width": `${s?.targetElement?.clientWidth}px`,
         "max-width": "min(500px, 95%)"
       };
       return s?.multiple ? {
         actionsLayout: "space-between",
         ariaLabel: s.ariaLabel,
-        actions: h.value,
+        actions: S.value,
         divider: !0,
         fallbackPosition: ["top-start"],
-        id: De(`dropdown-options-${s.id}`),
+        id: xe(`dropdown-options-${s.id}`),
         open: s.open,
         position: "bottom-start",
         style: {
           width: "auto",
-          ...L
+          ...I
         },
         targetElement: s.targetElement
       } : {
@@ -2132,70 +2167,70 @@ const gt = {
         offset: [0, 8],
         position: "bottom-start",
         style: {
-          display: c.value ? "block" : "none",
-          ...L
+          display: u.value ? "block" : "none",
+          ...I
         },
         targetElement: s.targetElement
       };
     });
     return a({
-      onOutsideDropdownClick: T,
-      dropdownOptionsListboxRef: f
-    }), (L, x) => c.value ? (p(), F(It(M.value), V({
+      onOutsideDropdownClick: C,
+      dropdownOptionsListboxRef: m
+    }), (I, k) => u.value ? (p(), M(Et(N.value), z({
       key: 0,
       class: ["b-dropdown-options-container", b.value]
-    }, _.value), {
-      default: R(() => [
-        Z("div", {
+    }, $.value), {
+      default: B(() => [
+        Y("div", {
           onKeydown: [
-            x[0] || (x[0] = Oe(() => {
+            k[0] || (k[0] = ge(() => {
             }, ["stop"])),
-            x[1] || (x[1] = Se(
+            k[1] || (k[1] = Ce(
               //@ts-ignore
-              (...D) => v($) && v($)(...D),
+              (...W) => f(x) && f(x)(...W),
               ["esc"]
             ))
           ]
         }, [
-          q(v(pt), V({
+          X(f(bt), z({
             id: e.id,
             ref_key: "dropdownOptionsListboxRef",
-            ref: f,
+            ref: m,
             "active-descendant-id": e.activeDescendantId,
             "aria-label": e.ariaLabel,
-            class: ["b-dropdown-options-container__listbox", S.value],
+            class: ["b-dropdown-options-container__listbox", v.value],
             "component-loading": e.componentLoading,
             "empty-state": e.emptyState,
             "is-option-disabled": e.isOptionDisabled,
             items: e.items,
-            "selected-value": v(N),
-            multiple: v(t),
+            "selected-value": f(D),
+            multiple: f(t),
             "static-categories": e.staticCategories,
-            "no-results-message": d.value,
+            "no-results-message": c.value,
             searching: e.searching,
             loading: e.loading,
             "lazy-load-type": e.lazyLoadType,
             "has-more-items": e.hasMoreItems,
             "virtual-scroll": e.virtualScroll
-          }, fe(v(w))), Ee({ _: 2 }, [
-            re(v(l), (D, z) => ({
-              name: z,
-              fn: R((ie) => [
-                J(L.$slots, z, ve(Ae(ie)), void 0, !0)
+          }, ve(f(G))), Te({ _: 2 }, [
+            ie(f(l), (W, P) => ({
+              name: P,
+              fn: B((H) => [
+                Q(I.$slots, P, me(we(H)), void 0, !0)
               ])
             }))
           ]), 1040, ["id", "active-descendant-id", "aria-label", "class", "component-loading", "empty-state", "is-option-disabled", "items", "selected-value", "multiple", "static-categories", "no-results-message", "searching", "loading", "lazy-load-type", "has-more-items", "virtual-scroll"])
         ], 32)
       ]),
       _: 3
-    }, 16, ["class"])) : Y("", !0);
+    }, 16, ["class"])) : j("", !0);
   }
-}), ua = /* @__PURE__ */ ue(da, [["__scopeId", "data-v-d4561ea6"]]);
-var se = /* @__PURE__ */ ((e) => (e.OPEN = "dropdown-base-open", e.KEYDOWN = "dropdown-base-keydown", e.CLOSE = "dropdown-base-close", e.INPUT = "dropdown-base-input", e.CLEAR = "dropdown-base-clear", e))(se || {}), Ie = /* @__PURE__ */ ((e) => (e.DISABLED = "disabled", e.READONLY = "readonly", e.HAS_ITEMS = "has-items", e.OPENED = "opened", e.ERROR = "error", e))(Ie || {});
-const ca = /* @__PURE__ */ Symbol("dropdown small size injection key"), Ft = /* @__PURE__ */ Symbol("dropdown underline style injection key"), Vt = {
+}), ma = /* @__PURE__ */ ce(fa, [["__scopeId", "data-v-d4561ea6"]]);
+var te = /* @__PURE__ */ ((e) => (e.OPEN = "dropdown-base-open", e.KEYDOWN = "dropdown-base-keydown", e.CLOSE = "dropdown-base-close", e.INPUT = "dropdown-base-input", e.CLEAR = "dropdown-base-clear", e.CLEAR_SELECTION = "dropdown-base-clear-selection", e))(te || {}), Oe = /* @__PURE__ */ ((e) => (e.DISABLED = "disabled", e.READONLY = "readonly", e.HAS_ITEMS = "has-items", e.OPENED = "opened", e.ERROR = "error", e))(Oe || {});
+const va = /* @__PURE__ */ Symbol("dropdown small size injection key"), zt = /* @__PURE__ */ Symbol("dropdown underline style injection key"), Vt = {
   "de-DE": { clearSearch: "Suche löschen" },
   "en-GB": { clearSearch: "Clear search" },
-  "en-US": { clearSearch: "Clear search" },
+  "en-US": { clearSearch: "Clear search", clearSelection: "Clear selection" },
   "es-419": { clearSearch: "Borrar búsqueda" },
   "es-ES": { clearSearch: "Borrar búsqueda" },
   "es-MX": { clearSearch: "Borrar búsqueda" },
@@ -2204,32 +2239,36 @@ const ca = /* @__PURE__ */ Symbol("dropdown small size injection key"), Ft = /*
   "ja-JP": { clearSearch: "検索をクリア" },
   "pt-BR": { clearSearch: "Limpar busca" },
   "zh-CN": { clearSearch: "清除搜索" }
-}, pa = {
+}, ya = {
   key: 0,
   class: "b-dropdown-base-textbox__autocomplete-suggestion",
   "aria-hidden": "true",
   "data-testid": "autocomplete-suggestion"
-}, ba = ["id", "aria-autocomplete", "value", "disabled", "readonly", "required"], va = ["id", "aria-readonly", "tabindex"], fa = {
+}, ga = ["id", "aria-autocomplete", "value", "disabled", "readonly", "required"], ha = ["id", "aria-readonly", "tabindex"], Sa = {
   key: 1,
   class: "b-dropdown-base-textbox__input-multiple-selected"
-}, ma = { class: "b-dropdown-base-textbox__input-selected-element" }, ya = {
+}, Ca = { class: "b-dropdown-base-textbox__input-selected-element" }, La = {
   key: 3,
   class: "b-dropdown-base-textbox__additional-items"
-}, ga = {
+}, Ia = {
   key: 4,
   class: "b-dropdown-base-textbox__icon",
   "aria-hidden": "true"
-}, ha = ["tabindex", "onKeydown"], Sa = Q({
+}, Ea = ["tabindex", "aria-label", "title", "data-testid", "onKeydown"], Oa = le({
   i18n: { messages: Vt },
   name: "dropdown-base-textbox",
   inheritAttrs: !1
-}), Ca = /* @__PURE__ */ Q({
-  ...Sa,
+}), Ta = /* @__PURE__ */ le({
+  ...Oa,
   props: {
     /**
      * The number of additional items that have been selected in the dropdown.
      */
     additionalItemsSelected: { type: [Number, String], default: 0 },
+    /**
+     * Allows the selected value to be cleared in a single-select dropdown.
+     */
+    clearable: { type: Boolean, default: !1 },
     /**
      * If the combobox DOM element should be an `input` element.
      */
@@ -2317,16 +2356,20 @@ const ca = /* @__PURE__ */ Symbol("dropdown small size injection key"), Ft = /*
     }
   },
   setup(e, { expose: a, emit: o }) {
-    const { t: l } = Re({ messages: Vt }), i = vt(), s = Ge(), n = Et(s), t = e, f = o, u = A(null), c = De("textbox"), d = A(!1), b = A(t.value), S = ft(Ft, !1), h = r(() => ({
-      [`b-dropdown-base-textbox--${Ie.DISABLED}`]: t.disabled,
-      [`b-dropdown-base-textbox--${Ie.READONLY}`]: t.readonly,
-      [`b-dropdown-base-textbox--${Ie.HAS_ITEMS}`]: !!t.additionalItemsSelected,
+    const { t: l } = Ne({ messages: Vt }), i = mt(), s = Ue(), n = Ot(s), t = e, m = o, d = A(null), u = A(null), c = xe("textbox"), b = A(!1), v = A(t.value), S = vt(zt, !1), D = r(() => ({
+      [`b-dropdown-base-textbox--${Oe.DISABLED}`]: t.disabled,
+      [`b-dropdown-base-textbox--${Oe.READONLY}`]: t.readonly,
+      [`b-dropdown-base-textbox--${Oe.HAS_ITEMS}`]: !!t.additionalItemsSelected,
       "b-dropdown-base-textbox--underline": S
-    })), N = r(
-      () => D.value && i["aria-required"] ? "true" : null
-    ), w = r(() => ({
+    })), G = r(
+      () => _.value && i["aria-required"] ? "true" : null
+    ), x = r(() => ({
       "b-dropdown-base-textbox__input--dynamic-filtering": t.dynamicFiltering
-    })), $ = r(() => t.dynamicFiltering && !!t.value && t.open), T = (B) => D.value && !t.multiple && !!t.value && B, M = r(
+    })), C = r(() => t.dynamicFiltering && !!t.value && t.open), N = r(
+      () => t.clearable && t.open && !t.multiple && t.hasSelectedValue
+    ), $ = r(
+      () => !t.disabled && !t.readonly && (C.value || N.value)
+    ), I = r(() => C.value ? l("clearSearch") : l("clearSelection")), k = (w) => _.value && !t.multiple && !!t.value && w, W = r(
       () => ({
         "aria-haspopup": "listbox",
         "aria-controls": t.ariaControls,
@@ -2339,157 +2382,176 @@ const ca = /* @__PURE__ */ Symbol("dropdown small size injection key"), Ft = /*
         "aria-disabled": t.disabled ? !0 : null,
         "aria-required": i["aria-required"]
       })
-    ), _ = r(
+    ), P = r(
       () => t.multiple ? t.selectedValueItem : []
-    ), L = r(
+    ), H = r(
       () => t.dynamicFiltering && !t.multiple && !t.alwaysComboboxIsInput
-    ), x = r(
-      () => t.open || t.alwaysComboboxIsInput || L.value && d.value
-    ), D = r(() => t.dynamicFiltering && x.value), z = () => !t.value && t.hasSelectedValue && L.value ? t.displayValue ?? "" : t.value, ie = r(() => !x.value || t.alwaysComboboxIsInput && !t.open ? t.displayValue : L.value ? b.value : t.value), oe = r(() => t.selectedValueItem && !t.multiple), P = r(
-      () => t.multiple && t.selectedValueItem && _.value.length > 0 && t.showSlotContentInMultiple
+    ), re = r(
+      () => t.open || t.alwaysComboboxIsInput || H.value && b.value
+    ), _ = r(() => t.dynamicFiltering && re.value), J = () => !t.value && t.hasSelectedValue && H.value ? t.displayValue ?? "" : t.value, R = r(() => !re.value || t.alwaysComboboxIsInput && !t.open ? t.displayValue : H.value ? v.value : t.value), V = r(() => t.selectedValueItem && !t.multiple), F = r(
+      () => t.multiple && t.selectedValueItem && P.value.length > 0 && t.showSlotContentInMultiple
     );
-    he(
-      () => D.value,
-      (B, ce) => {
-        B ? !ce && L.value && (b.value = z()) : b.value = t.value, B && !t.alwaysComboboxIsInput && be(() => {
-          u.value?.focus(), u.value?.select();
+    pe(
+      () => _.value,
+      (w, se) => {
+        w ? !se && H.value && (v.value = J()) : v.value = t.value, w && !t.alwaysComboboxIsInput && ne(() => {
+          d.value?.focus(), d.value?.select();
         });
       }
-    ), he(
+    ), pe(
       () => t.value,
-      (B) => {
-        (!L.value || B !== b.value) && (b.value = B);
+      (w) => {
+        (!H.value || w !== v.value) && (v.value = w);
       }
-    ), he(
+    ), pe(
       () => t.displayValue,
       () => {
-        L.value && t.hasSelectedValue && (b.value = z());
+        H.value && t.hasSelectedValue && (v.value = J());
+      }
+    ), pe(
+      () => t.hasSelectedValue,
+      (w) => {
+        H.value && !w && (v.value = t.value);
       }
-    ), he(
+    ), pe(
       () => t.open,
-      (B) => {
-        B || (d.value = !1);
+      (w) => {
+        w || (b.value = !1);
       }
     );
-    const k = async () => {
-      !t.disabled && !t.readonly && (f(se.OPEN), await be(), u.value.focus());
-    }, W = (B) => {
-      t.open && (B && Fe(B), u.value.focus(), f(se.CLOSE));
-    }, ee = (B) => t.open && B.target.tagName === "INPUT" ? null : t.open ? W() : k(), U = (B) => t.dynamicFiltering ? null : ee(B), te = () => {
-      f(se.CLEAR), f(se.INPUT, ""), u.value.focus();
-    }, me = () => {
-      d.value = !0;
-    }, O = () => {
-      d.value = !1;
-    }, ae = (B) => {
-      !L.value || t.open || t.readonly || t.disabled || (B.preventDefault(), B.stopPropagation());
-    }, Me = (B) => {
-      !t.readonly && !t.disabled ? (L.value && (b.value = B.target.value), t.dynamicFiltering && !t.open && f(se.OPEN), f(se.INPUT, B.target.value), be(() => {
-        D.value && u.value?.focus();
-      })) : (B.preventDefault(), B.stopPropagation());
+    const Ie = async () => {
+      !t.disabled && !t.readonly && (m(te.OPEN), await ne(), d.value.focus());
+    }, ke = (w) => {
+      t.open && (w && Ve(w), d.value.focus(), m(te.CLOSE));
+    }, be = (w) => t.open && w.target.tagName === "INPUT" ? null : t.open ? ke() : Ie(), T = (w) => t.dynamicFiltering ? null : be(w), fe = () => {
+      m(te.CLEAR), m(te.INPUT, ""), d.value.focus();
+    }, Pe = () => {
+      if (C.value) {
+        fe();
+        return;
+      }
+      m(te.CLEAR_SELECTION);
+    }, Be = () => {
+      b.value = !0;
+    }, Ee = () => {
+      b.value = !1;
+    }, Fe = (w) => {
+      !H.value || t.open || t.readonly || t.disabled || (w.preventDefault(), w.stopPropagation());
+    }, We = (w) => {
+      !t.readonly && !t.disabled ? (H.value && (v.value = w.target.value), t.dynamicFiltering && !t.open && m(te.OPEN), m(te.INPUT, w.target.value), ne(() => {
+        _.value && d.value?.focus();
+      })) : (w.preventDefault(), w.stopPropagation());
     };
     return a({
-      focus: () => {
-        u.value.focus();
+      focus: (w = "textbox") => {
+        const se = w === "clear-action" ? u.value : d.value;
+        return se?.focus(), !!se;
       }
-    }), (B, ce) => (p(), I("div", {
-      class: we(B.$attrs.class),
+    }), (w, se) => (p(), E("div", {
+      class: _e(w.$attrs.class),
       "data-testid": "textbox-wrapper",
-      onClick: ee,
-      onKeydown: Se(W, ["escape"])
+      onClick: be,
+      onKeydown: Ce(ke, ["escape"])
     }, [
-      q(v(Be), {
-        class: we(["b-dropdown-base-textbox", h.value]),
-        variant: v(S) ? "title" : "body",
+      X(f(Me), {
+        class: _e(["b-dropdown-base-textbox", D.value]),
+        variant: f(S) ? "title" : "body",
         el: "div",
         "data-testid": "base-textbox"
       }, {
-        default: R(() => [
-          T(v(n)("autocomplete-suggestion")) ? (p(), I("span", pa, [
-            J(B.$slots, "autocomplete-suggestion", {}, void 0, !0)
-          ])) : Y("", !0),
-          D.value ? (p(), I("input", V({ key: 1 }, M.value, {
-            id: v(c),
+        default: B(() => [
+          k(f(n)("autocomplete-suggestion")) ? (p(), E("span", ya, [
+            Q(w.$slots, "autocomplete-suggestion", {}, void 0, !0)
+          ])) : j("", !0),
+          _.value ? (p(), E("input", z({ key: 1 }, W.value, {
+            id: f(c),
             ref_key: "textbox",
-            ref: u,
+            ref: d,
             class: "b-dropdown-base-textbox__input",
             role: "combobox",
             type: "text",
-            "aria-autocomplete": T(v(n)("autocomplete-suggestion")) ? "both" : "list",
+            "aria-autocomplete": k(f(n)("autocomplete-suggestion")) ? "both" : "list",
             size: "1",
-            value: ie.value,
+            value: R.value,
             disabled: e.disabled ? !0 : null,
             readonly: e.readonly,
-            required: N.value,
+            required: G.value,
             onKeydown: [
-              ce[0] || (ce[0] = (Te) => B.$emit(v(se).KEYDOWN, Te)),
-              Se(U, ["enter"])
+              se[0] || (se[0] = ($e) => w.$emit(f(te).KEYDOWN, $e)),
+              Ce(T, ["enter"])
             ],
-            onFocus: me,
-            onBlur: O,
-            onInput: Me
-          }), null, 16, ba)) : (p(), I("div", V({
+            onFocus: Be,
+            onBlur: Ee,
+            onInput: We
+          }), null, 16, ga)) : (p(), E("div", z({
             key: 2,
-            id: v(c)
-          }, M.value, {
+            id: f(c)
+          }, W.value, {
             ref_key: "textbox",
-            ref: u,
-            class: ["b-dropdown-base-textbox__input", w.value],
+            ref: d,
+            class: ["b-dropdown-base-textbox__input", x.value],
             "aria-readonly": e.readonly ? "true" : null,
             role: "combobox",
             tabindex: e.disabled ? -1 : 0,
-            onFocus: me,
-            onMousedown: ae
+            onFocus: Be,
+            onMousedown: Fe
           }), [
-            oe.value ? (p(), I(Ce, { key: 0 }, [
-              v(n)("display-value") ? J(B.$slots, "display-value", ve(V({ key: 0 }, e.selectedValueItem)), void 0, !0) : J(B.$slots, "default", ve(V({ key: 1 }, e.selectedValueItem)), () => [
-                ne(j(e.displayValue), 1)
+            V.value ? (p(), E(ye, { key: 0 }, [
+              f(n)("display-value") ? Q(w.$slots, "display-value", me(z({ key: 0 }, e.selectedValueItem)), void 0, !0) : Q(w.$slots, "default", me(z({ key: 1 }, e.selectedValueItem)), () => [
+                oe(q(e.displayValue), 1)
               ], !0)
-            ], 64)) : P.value ? (p(), I("div", fa, [
-              (p(!0), I(Ce, null, re(_.value, (Te) => (p(), I("div", {
-                key: Te.value
+            ], 64)) : F.value ? (p(), E("div", Sa, [
+              (p(!0), E(ye, null, ie(P.value, ($e) => (p(), E("div", {
+                key: $e.value
               }, [
-                Z("div", ma, [
-                  J(B.$slots, "default", V({ ref_for: !0 }, Te), () => [
-                    ne(j(e.displayValue), 1)
+                Y("div", Ca, [
+                  Q(w.$slots, "default", z({ ref_for: !0 }, $e), () => [
+                    oe(q(e.displayValue), 1)
                   ], !0)
                 ])
               ]))), 128))
-            ])) : (p(), I(Ce, { key: 2 }, [
-              ne(j(e.displayValue), 1)
+            ])) : (p(), E(ye, { key: 2 }, [
+              oe(q(e.displayValue), 1)
             ], 64))
-          ], 16, va)),
-          e.additionalItemsSelected ? (p(), I("span", ya, j(e.additionalItemsSelected), 1)) : Y("", !0),
-          v(n)("icon") && !$.value ? (p(), I("span", ga, [
-            J(B.$slots, "icon", {}, void 0, !0)
-          ])) : Y("", !0),
-          $.value ? (p(), I("span", {
+          ], 16, ha)),
+          e.additionalItemsSelected ? (p(), E("span", La, q(e.additionalItemsSelected), 1)) : j("", !0),
+          f(n)("icon") && !$.value ? (p(), E("span", Ia, [
+            Q(w.$slots, "icon", {}, void 0, !0)
+          ])) : j("", !0),
+          $.value ? (p(), E("span", {
             key: 5,
-            class: "b-dropdown-base-textbox__clear-search",
+            ref_key: "clearAction",
+            ref: u,
+            class: "b-dropdown-base-textbox__clear-action",
             tabindex: e.disabled ? -1 : 0,
-            "data-testid": "clear-search-button",
-            onClick: Oe(te, ["stop"]),
-            onKeydown: Se(Oe(te, ["stop"]), ["enter"]),
-            onKeyup: Se(te, ["space"])
+            role: "button",
+            "aria-label": I.value,
+            title: I.value,
+            "data-testid": C.value ? "clear-search-button" : "clear-selection-button",
+            onClick: ge(Pe, ["stop"]),
+            onKeydown: [
+              Ce(ge(Pe, ["stop"]), ["enter"]),
+              Ce(ge(Pe, ["prevent", "stop"]), ["space"])
+            ]
           }, [
-            e.size === v(He).SMALL ? (p(), F(v(Ht), {
+            e.size === f(Ze).SMALL ? (p(), M(f(rl), {
               key: 0,
-              "svg-title": v(l)("clearSearch")
-            }, null, 8, ["svg-title"])) : (p(), F(v(jt), {
+              "aria-hidden": "true"
+            })) : (p(), M(f(il), {
               key: 1,
-              "svg-title": v(l)("clearSearch")
-            }, null, 8, ["svg-title"]))
-          ], 40, ha)) : Y("", !0)
+              "aria-hidden": "true"
+            }))
+          ], 40, Ea)) : j("", !0)
         ]),
         _: 3
       }, 8, ["class", "variant"])
     ], 34));
   }
-}), zt = /* @__PURE__ */ ue(Ca, [["__scopeId", "data-v-8f71384e"]]), La = { class: "b-dropdown-default-textbox__chevron" }, Ia = Q({
+}), Gt = /* @__PURE__ */ ce(Ta, [["__scopeId", "data-v-bf520189"]]), Aa = { class: "b-dropdown-default-textbox__chevron" }, wa = le({
   name: "dropdown-default-textbox",
   inheritAttrs: !1
-}), Ea = /* @__PURE__ */ Q({
-  ...Ia,
+}), _a = /* @__PURE__ */ le({
+  ...wa,
   props: {
     /**
      * The number of additional items that have been selected in the dropdown.
@@ -2534,6 +2596,10 @@ const ca = /* @__PURE__ */ Symbol("dropdown small size injection key"), Ft = /*
      * Renders the dropdown with a condensed style.
      */
     condensed: { type: Boolean, default: !1 },
+    /**
+     * Allows the selected value to be cleared in a single-select dropdown.
+     */
+    clearable: { type: Boolean, default: !1 },
     /**
      * Disables any textbox functionality
      */
@@ -2582,108 +2648,109 @@ const ca = /* @__PURE__ */ Symbol("dropdown small size injection key"), Ft = /*
      */
     multiple: { type: Boolean, default: !1 }
   },
-  emits: ["clear", "close", "input", "keydown", "open"],
+  emits: ["clear", "clear-selection", "close", "input", "keydown", "open"],
   setup(e, { expose: a, emit: o }) {
-    const l = o, i = Ge(), s = e, n = A(null), t = r(() => ({
-      [`b-dropdown-default-textbox--${Ie.ERROR}`]: !s.disabled && !s.readonly && s.isInvalid,
-      [`b-dropdown-default-textbox--${Ie.DISABLED}`]: s.disabled,
-      [`b-dropdown-default-textbox--${Ie.READONLY}`]: s.readonly,
-      [`b-dropdown-default-textbox--${Ie.OPENED}`]: s.open,
+    const l = o, i = Ue(), s = e, n = A(null), t = r(() => ({
+      [`b-dropdown-default-textbox--${Oe.ERROR}`]: !s.disabled && !s.readonly && s.isInvalid,
+      [`b-dropdown-default-textbox--${Oe.DISABLED}`]: s.disabled,
+      [`b-dropdown-default-textbox--${Oe.READONLY}`]: s.readonly,
+      [`b-dropdown-default-textbox--${Oe.OPENED}`]: s.open,
       "b-dropdown-default-textbox--condensed": s.condensed
-    })), f = r(() => s.open && !s.disabled && !s.readonly), u = (w) => {
-      l("input", w);
-    }, c = (w) => {
-      l("keydown", w);
-    }, d = (w) => {
-      Fe(w), l("open");
-    }, b = (w) => {
-      Fe(w), l("close");
-    }, S = (w) => {
-      Fe(w), l("clear");
-    }, h = {
-      [se.INPUT]: u,
-      [se.OPEN]: d,
-      [se.CLOSE]: b,
-      [se.CLEAR]: S,
-      [se.KEYDOWN]: c
+    })), m = r(() => s.open && !s.disabled && !s.readonly), d = (x) => {
+      l("input", x);
+    }, u = (x) => {
+      l("keydown", x);
+    }, c = (x) => {
+      Ve(x), l("open");
+    }, b = (x) => {
+      Ve(x), l("close");
+    }, v = (x) => {
+      Ve(x), l("clear");
+    }, S = () => {
+      l("clear-selection");
+    }, D = {
+      [te.INPUT]: d,
+      [te.OPEN]: c,
+      [te.CLOSE]: b,
+      [te.CLEAR]: v,
+      [te.CLEAR_SELECTION]: S,
+      [te.KEYDOWN]: u
     };
     return a({
-      focus: () => {
-        n.value.focus();
-      }
-    }), (w, $) => (p(), I("div", {
-      class: we(["b-dropdown-default-textbox", t.value]),
+      focus: (x) => n.value.focus(x)
+    }), (x, C) => (p(), E("div", {
+      class: _e(["b-dropdown-default-textbox", t.value]),
       "data-testid": "default-textbox"
     }, [
-      q(zt, V({
+      X(Gt, z({
         ref_key: "baseTextbox",
         ref: n
-      }, { ...w.$attrs, ...w.$props }, {
+      }, { ...x.$attrs, ...x.$props }, {
         class: "b-dropdown-default-textbox__textbox",
         value: e.value
-      }, fe(h)), Ee({
-        icon: R(() => [
-          Z("div", La, [
-            Le(q(v(Tt), { "svg-title": "opened" }, null, 512), [
-              [ze, f.value]
+      }, ve(D)), Te({
+        icon: B(() => [
+          Y("div", Aa, [
+            Le(X(f(_t), { "svg-title": "opened" }, null, 512), [
+              [Ke, m.value]
             ]),
-            Le(q(v(Ot), { "svg-title": "closed" }, null, 512), [
-              [ze, !f.value]
+            Le(X(f(wt), { "svg-title": "closed" }, null, 512), [
+              [Ke, !m.value]
             ])
           ])
         ]),
         _: 2
       }, [
-        re(v(i), (T, M) => ({
-          name: M,
-          fn: R((_) => [
-            J(w.$slots, M, ve(Ae(_ ?? {})), void 0, !0)
+        ie(f(i), (N, $) => ({
+          name: $,
+          fn: B((I) => [
+            Q(x.$slots, $, me(we(I ?? {})), void 0, !0)
           ])
         }))
       ]), 1040, ["value"])
     ], 2));
   }
-}), Oa = /* @__PURE__ */ ue(Ea, [["__scopeId", "data-v-5a18466f"]]), Ta = { key: 0 }, Aa = {
+}), ka = /* @__PURE__ */ ce(_a, [["__scopeId", "data-v-874bc432"]]), $a = { key: 0 }, Da = {
   __name: "chevron-down-small",
   setup(e) {
-    const a = at();
-    return String(a?.uid ?? a?.proxy?._uid), (o, l) => (p(), I("svg", V({ role: "img" }, o.$attrs, {
+    const a = ot();
+    return String(a?.uid ?? a?.proxy?._uid), (o, l) => (p(), E("svg", z({ role: "img" }, o.$attrs, {
       class: "ui-assets-icons-16",
       xmlns: "http://www.w3.org/2000/svg",
       width: "16",
       height: "16",
       fill: "none"
     }), [
-      o.$attrs["svg-title"] ? (p(), I("title", Ta, j(o.$attrs["svg-title"]), 1)) : Y("", !0),
-      l[0] || (l[0] = Z("path", {
+      o.$attrs["svg-title"] ? (p(), E("title", $a, q(o.$attrs["svg-title"]), 1)) : j("", !0),
+      l[0] || (l[0] = Y("path", {
         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"
       }, null, -1))
     ], 16));
   }
-}, wa = { key: 0 }, _a = {
+}, xa = { key: 0 }, Ba = {
   __name: "chevron-up-small",
   setup(e) {
-    const a = at();
-    return String(a?.uid ?? a?.proxy?._uid), (o, l) => (p(), I("svg", V({ role: "img" }, o.$attrs, {
+    const a = ot();
+    return String(a?.uid ?? a?.proxy?._uid), (o, l) => (p(), E("svg", z({ role: "img" }, o.$attrs, {
       class: "ui-assets-icons-16",
       xmlns: "http://www.w3.org/2000/svg",
       width: "16",
       height: "16",
       fill: "none"
     }), [
-      o.$attrs["svg-title"] ? (p(), I("title", wa, j(o.$attrs["svg-title"]), 1)) : Y("", !0),
-      l[0] || (l[0] = Z("path", {
+      o.$attrs["svg-title"] ? (p(), E("title", xa, q(o.$attrs["svg-title"]), 1)) : j("", !0),
+      l[0] || (l[0] = Y("path", {
         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"
       }, null, -1))
     ], 16));
   }
-}, ka = { class: "b-dropdown-small-textbox__chevron" }, $a = Q({
+}, Ra = { class: "b-dropdown-small-textbox__chevron" }, Ma = le({
   name: "dropdown-small-textbox",
   inheritAttrs: !1
-}), xa = /* @__PURE__ */ Q({
-  ...$a,
+}), Na = /* @__PURE__ */ le({
+  ...Ma,
   props: {
     /**
      * The number of additional items that have been selected in the dropdown.
@@ -2716,6 +2783,10 @@ const ca = /* @__PURE__ */ Symbol("dropdown small size injection key"), Ft = /*
      * Disables any textbox functionality
      */
     disabled: { type: Boolean, default: !1 },
+    /**
+     * Allows the selected value to be cleared in a single-select dropdown.
+     */
+    clearable: { type: Boolean, default: !1 },
     /**
      * Selected option's label
      */
@@ -2742,76 +2813,77 @@ const ca = /* @__PURE__ */ Symbol("dropdown small size injection key"), Ft = /*
      */
     value: { type: String, default: "" }
   },
-  emits: ["clear", "close", "input", "keydown", "open"],
+  emits: ["clear", "clear-selection", "close", "input", "keydown", "open"],
   setup(e, { expose: a, emit: o }) {
-    const l = o, i = Ge(), s = e, n = A(null), t = ft(Ft, !1), f = r(() => ({
-      [`b-dropdown-small-textbox--${Ie.DISABLED}`]: s.disabled,
-      [`b-dropdown-small-textbox--${Ie.READONLY}`]: s.readonly,
-      [`b-dropdown-small-textbox--${Ie.OPENED}`]: s.open,
+    const l = o, i = Ue(), s = e, n = A(null), t = vt(zt, !1), m = r(() => ({
+      [`b-dropdown-small-textbox--${Oe.DISABLED}`]: s.disabled,
+      [`b-dropdown-small-textbox--${Oe.READONLY}`]: s.readonly,
+      [`b-dropdown-small-textbox--${Oe.OPENED}`]: s.open,
       "b-dropdown-small-textbox--underline": t
-    })), u = r(() => s.open && !s.disabled && !s.readonly), c = ($) => {
-      l("input", $);
-    }, d = ($) => {
-      l("keydown", $);
-    }, b = ($) => {
-      Fe($), l("open");
-    }, S = ($) => {
-      Fe($), l("close");
-    }, h = ($) => {
-      Fe($), l("clear");
-    }, N = {
-      [se.INPUT]: c,
-      [se.OPEN]: b,
-      [se.CLOSE]: S,
-      [se.CLEAR]: h,
-      [se.KEYDOWN]: d
+    })), d = r(() => s.open && !s.disabled && !s.readonly), u = (C) => {
+      l("input", C);
+    }, c = (C) => {
+      l("keydown", C);
+    }, b = (C) => {
+      Ve(C), l("open");
+    }, v = (C) => {
+      Ve(C), l("close");
+    }, S = (C) => {
+      Ve(C), l("clear");
+    }, D = () => {
+      l("clear-selection");
+    }, G = {
+      [te.INPUT]: u,
+      [te.OPEN]: b,
+      [te.CLOSE]: v,
+      [te.CLEAR]: S,
+      [te.CLEAR_SELECTION]: D,
+      [te.KEYDOWN]: c
     };
     return a({
-      focus: () => {
-        n.value.focus();
-      }
-    }), ($, T) => (p(), I("div", {
-      class: we(["b-dropdown-small-textbox", f.value])
+      focus: (C) => n.value.focus(C)
+    }), (C, N) => (p(), E("div", {
+      class: _e(["b-dropdown-small-textbox", m.value])
     }, [
-      q(zt, V({
+      X(Gt, z({
         ref_key: "baseTextbox",
         ref: n
-      }, { ...$.$attrs, ...$.$props }, {
+      }, { ...C.$attrs, ...C.$props }, {
         class: "b-dropdown-small-textbox__textbox",
-        size: v(He).SMALL
-      }, fe(N)), Ee({
-        icon: R(() => [
-          Z("div", ka, [
-            Le(q(v(_a), { "svg-title": "opened" }, null, 512), [
-              [ze, u.value]
+        size: f(Ze).SMALL
+      }, ve(G)), Te({
+        icon: B(() => [
+          Y("div", Ra, [
+            Le(X(f(Ba), { "svg-title": "opened" }, null, 512), [
+              [Ke, d.value]
             ]),
-            Le(q(v(Aa), { "svg-title": "closed" }, null, 512), [
-              [ze, !u.value]
+            Le(X(f(Da), { "svg-title": "closed" }, null, 512), [
+              [Ke, !d.value]
             ])
           ])
         ]),
         _: 2
       }, [
-        re(v(i), (M, _) => ({
-          name: _,
-          fn: R((L) => [
-            J($.$slots, _, ve(Ae(L ?? {})), void 0, !0)
+        ie(f(i), ($, I) => ({
+          name: I,
+          fn: B((k) => [
+            Q(C.$slots, I, me(we(k ?? {})), void 0, !0)
           ])
         }))
       ]), 1040, ["size"])
     ], 2));
   }
-}), Da = /* @__PURE__ */ ue(xa, [["__scopeId", "data-v-2844670b"]]), Ba = (e, a) => {
+}), Pa = /* @__PURE__ */ ce(Na, [["__scopeId", "data-v-383a3a02"]]), Fa = (e, a) => {
   const o = /* @__PURE__ */ new Set(), l = new Set(e.value.map((s) => s.value)), i = a.value.reduce((s, n) => {
     if (n.items)
       if (l.has(n.value))
-        s.push(n.displayValue ?? n.label), o.add(n.value), n.items.forEach((f) => o.add(f.value));
+        s.push(n.displayValue ?? n.label), o.add(n.value), n.items.forEach((m) => o.add(m.value));
       else {
-        const f = n.items.filter(
-          (c) => l.has(c.value)
+        const m = n.items.filter(
+          (u) => l.has(u.value)
         );
-        f.length > 0 && f.length === n.items.length ? (s.push(n.displayValue ?? n.label), o.add(n.value), n.items.forEach((c) => o.add(c.value))) : f.forEach(({ label: c, displayValue: d, value: b }) => {
-          s.push(d ?? c), o.add(b);
+        m.length > 0 && m.length === n.items.length ? (s.push(n.displayValue ?? n.label), o.add(n.value), n.items.forEach((u) => o.add(u.value))) : m.forEach(({ label: u, displayValue: c, value: b }) => {
+          s.push(c ?? u), o.add(b);
         });
       }
     else
@@ -2821,14 +2893,14 @@ const ca = /* @__PURE__ */ Symbol("dropdown small size injection key"), Ft = /*
   return e.value.forEach((s) => {
     o.has(s.value) || i.push(s.displayValue ?? s.label);
   }), i.join(", ");
-}, Ra = ({ items: e, placeholder: a, selectedValues: o, isMultiSelect: l }) => {
+}, za = ({ items: e, placeholder: a, selectedValues: o, isMultiSelect: l }) => {
   const i = r(
     () => l.value && e.value.find((n) => n.items?.length)
   );
-  return r(() => o.value.length ? i.value ? Ba(o, e) : o.value.map(({ label: n, displayValue: t }) => t ?? n).join(", ") : a.value || null);
-}, Gt = (e) => {
+  return r(() => o.value.length ? i.value ? Fa(o, e) : o.value.map(({ label: n, displayValue: t }) => t ?? n).join(", ") : a.value || null);
+}, Kt = (e) => {
   e.value.$children?.[0].$refs.textbox.focus();
-}, Ma = ({
+}, Va = ({
   inputContainerRef: e,
   optionsContainerRef: a,
   selectedValueIndex: o,
@@ -2837,98 +2909,108 @@ const ca = /* @__PURE__ */ Symbol("dropdown small size injection key"), Ft = /*
   items: s,
   isMultiple: n,
   isSearching: t,
-  activeDescendantIndex: f,
-  selectFirstMatchedOption: u,
-  totalItemCount: c,
-  isVirtualScroll: d,
+  activeDescendantIndex: m,
+  selectFirstMatchedOption: d,
+  totalItemCount: u,
+  isVirtualScroll: c,
   removeActiveDescendant: b
-}, S, h, N) => {
-  const w = async (O) => {
-    i.value && await be(), s.value[O]?.focus();
-  }, $ = async (O) => {
-    i.value && await be();
-    const ae = a.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef?.$el.querySelectorAll(
+}, v, S, D) => {
+  const G = async (T) => {
+    i.value && await ne(), s.value[T]?.focus();
+  }, x = async (T) => {
+    i.value && await ne();
+    const fe = a.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef?.$el.querySelectorAll(
       "button"
     );
-    ae?.length ? ae[O]?.focus() : w(O);
-  }, T = (O) => a.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef?.setListboxFocusedIndex(
-    O
-  ), M = async (O) => {
-    await a.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef?.navigateToItem(O);
-  }, _ = (O) => {
-    b?.(), !(O < 0) && be(() => {
-      d ? M(O) : (T(O), w(O));
+    fe?.length ? fe[T]?.focus() : G(T);
+  }, C = (T) => a.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef?.setListboxFocusedIndex(
+    T
+  ), N = async (T) => {
+    await a.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef?.navigateToItem(T);
+  }, $ = (T) => {
+    b?.(), !(T < 0) && ne(() => {
+      c ? N(T) : (C(T), G(T));
     });
-  }, L = () => {
-    l.value || h(), _(0);
-  }, x = () => {
-    l.value || h();
-    const O = d ? c.value - 1 : s.value.length - 1, ae = Math.min((f?.value ?? -1) + 1, O);
-    _(ae);
-  }, D = () => {
-    l.value || h(), be(() => {
-      _(d ? c.value - 1 : s.value.length - 1);
+  }, I = () => {
+    l.value || S(), $(0);
+  }, k = () => {
+    l.value || S();
+    const T = c ? u.value - 1 : s.value.length - 1, fe = Math.min((m?.value ?? -1) + 1, T);
+    $(fe);
+  }, W = () => {
+    l.value || S(), ne(() => {
+      $(c ? u.value - 1 : s.value.length - 1);
     });
-  }, z = (O) => {
-    O.preventDefault(), O.stopPropagation();
-  }, ie = ({ detail: O }) => {
-    if (z(O), f?.value !== void 0 && f.value >= 0) {
-      x();
+  }, P = (T) => {
+    T.preventDefault(), T.stopPropagation();
+  }, H = ({ detail: T }) => {
+    if (P(T), m?.value !== void 0 && m.value >= 0) {
+      k();
       return;
     }
-    L();
-  }, oe = ({ detail: O }) => {
-    z(O), D();
-  }, P = ({ detail: O }) => {
-    z(O), L();
-  }, k = ({ detail: O }) => {
-    z(O), D();
-  }, W = ({ detail: O }) => {
-    z(O), S(), l.value && (n.value ? $(0) : _(o.value));
-  }, ee = async ({ detail: O }) => {
-    if (z(O), i.value && !n.value)
-      return l.value && t.value && await u(), void 0;
-    S(), l.value && (n.value ? $(0) : _(o.value));
-  }, U = ({ detail: O }) => {
-    O.stopPropagation(), l.value && N();
-  }, te = ({ detail: O }) => {
-    O.stopPropagation(), l.value && (N(), Gt(e));
+    I();
+  }, re = ({ detail: T }) => {
+    P(T), W();
+  }, _ = ({ detail: T }) => {
+    P(T), I();
+  }, J = ({ detail: T }) => {
+    P(T), W();
+  }, R = () => {
+    if (l.value) {
+      if (n.value) {
+        x(0);
+        return;
+      }
+      ne(() => {
+        e.value.focus("clear-action") || $(o.value);
+      });
+    }
+  }, V = ({ detail: T }) => {
+    P(T), v(), R();
+  }, F = async ({ detail: T }) => {
+    if (P(T), i.value && !n.value)
+      return l.value && t.value && await d(), void 0;
+    v(), R();
+  }, Ie = ({ detail: T }) => {
+    T.stopPropagation(), l.value && D();
+  }, ke = ({ detail: T }) => {
+    T.stopPropagation(), l.value && (D(), Kt(e));
   };
   return r(() => ({
-    [le.ARROW_DOWN]: ie,
-    [le.ARROW_UP]: oe,
-    [le.HOME]: P,
-    [le.END]: k,
-    ...i.value ? {} : { [le.SPACE]: W },
-    [le.ENTER]: ee,
-    ...i.value ? {} : { [le.TAB]: U },
-    [le.ESCAPE]: te
+    [ae.ARROW_DOWN]: H,
+    [ae.ARROW_UP]: re,
+    [ae.HOME]: _,
+    [ae.END]: J,
+    ...i.value ? {} : { [ae.SPACE]: V },
+    [ae.ENTER]: F,
+    ...i.value ? {} : { [ae.TAB]: Ie },
+    [ae.ESCAPE]: ke
   }));
-}, Na = ({ inputContainerRef: e, isDropdownOpen: a }, o) => {
+}, Ga = ({ inputContainerRef: e, isDropdownOpen: a }, o) => {
   const l = () => {
-    a.value && o(), be(() => {
-      Gt(e);
+    a.value && o(), ne(() => {
+      Kt(e);
     });
   };
   return {
-    [y.ENTER]: l,
-    [y.ESCAPE]: l,
-    [y.TAB]: l,
-    [y.SPACE]: l
+    [g.ENTER]: l,
+    [g.ESCAPE]: l,
+    [g.TAB]: l,
+    [g.SPACE]: l
   };
 };
-function Pa(e, a, o, l, i) {
-  const s = A(e), n = A(a), t = (c, d = []) => d.flatMap((b) => b.label.toLocaleLowerCase().includes(c) ? l?.value && b.items ? [...t(c, b.items)] : [b, ...t(c, b.items)] : b.items ? [...t(c, b.items)] : []), f = o !== void 0 ? Pt(() => o(s.value), i ?? 300) : void 0;
-  return he(s, () => {
-    f !== void 0 && f();
+function Ka(e, a, o, l, i) {
+  const s = A(e), n = A(a), t = (u, c = []) => c.flatMap((b) => b.label.toLocaleLowerCase().includes(u) ? l?.value && b.items ? [...t(u, b.items)] : [b, ...t(u, b.items)] : b.items ? [...t(u, b.items)] : []), m = o !== void 0 ? Ft(() => o(s.value), i ?? 300) : void 0;
+  return pe(s, () => {
+    m !== void 0 && m();
   }), r(() => {
     if (!s.value || o !== void 0)
       return n.value;
-    const c = s.value.toLocaleLowerCase();
-    return t(c, n.value);
+    const u = s.value.toLocaleLowerCase();
+    return t(u, n.value);
   });
 }
-const Kt = {
+const Ut = {
   "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" },
@@ -2940,18 +3022,19 @@ const Kt = {
   "ja-JP": { all: "すべて", ariaLabelFallback: "ドロップダウン", clearSearch: "フィルターをクリア" },
   "pt-BR": { all: "Todos", ariaLabelFallback: "Menu suspenso", clearSearch: "Limpar filtro" },
   "zh-CN": { all: "全部", ariaLabelFallback: "下拉菜单", clearSearch: "清除筛选器" }
-}, Fa = { class: "b-dropdown__autocomplete-hidden-prefix" }, Va = Q({
-  i18n: { messages: Kt },
+}, Ua = { class: "b-dropdown__autocomplete-hidden-prefix" }, Wa = le({
+  i18n: { messages: Ut },
   name: "bento-dropdown",
   components: {
-    DropdownInputDefault: Oa,
-    DropdownInputSmall: Da
+    DropdownInputDefault: ka,
+    DropdownInputSmall: Pa
   },
   inheritAttrs: !1,
   model: { prop: "modelValue", event: "update:model-value" }
-}), za = /* @__PURE__ */ Q({
-  ...Va,
+}), qa = /* @__PURE__ */ le({
+  ...Wa,
   props: {
+    clearable: { type: Boolean, default: !1 },
     condensed: { type: Boolean, default: !1 },
     emptyState: { default: void 0 },
     dynamicFiltering: { type: Boolean, default: !1 },
@@ -2960,7 +3043,7 @@ const Kt = {
     items: { default: () => [] },
     loading: { type: Boolean, default: !1 },
     componentLoading: { type: Boolean, default: !1 },
-    lazyLoadType: { default: pt.props.lazyLoadType.default },
+    lazyLoadType: { default: bt.props.lazyLoadType.default },
     multiple: { type: Boolean, default: !1 },
     search: { default: void 0 },
     showSlotContentInMultiple: { type: Boolean, default: !1 },
@@ -2981,277 +3064,281 @@ const Kt = {
   },
   emits: ["update:model-value", "show-more", "open"],
   setup(e, { expose: a, emit: o }) {
-    const l = vt(), i = Ge(), s = (m) => Object.fromEntries(Object.entries(m).filter(([ye]) => !ye.startsWith("aria-"))), n = Et(i), t = e, f = o, { t: u } = Re({ messages: Kt }), { emitValue: c } = Jt(f), d = A(null), b = A(null), S = A(null), h = A(!1), N = A(!1), w = De("bento-dropdown-options-container"), $ = De("dropdown-label"), T = De("dropdown-description"), M = De("dropdown-error"), { isReadOnly: _ } = Xt(de(t, "readonly")), L = r(() => t.modelValue), { cachedSelectedListboxOptions: x, cachedListboxSelectedValues: D, setCachedValues: z } = na(
+    const l = mt(), i = Ue(), s = (y) => Object.fromEntries(Object.entries(y).filter(([he]) => !he.startsWith("aria-"))), n = Ot(i), t = e, m = o, { t: d } = Ne({ messages: Ut }), { emitValue: u } = Ht(m), c = A(null), b = A(null), v = A(null), S = A(!1), D = A(!1), G = xe("bento-dropdown-options-container"), x = xe("dropdown-label"), C = xe("dropdown-description"), N = xe("dropdown-error"), { isReadOnly: $ } = Jt(de(t, "readonly")), I = r(() => t.modelValue), { cachedSelectedListboxOptions: k, cachedListboxSelectedValues: W, setCachedValues: P } = ua(
       de(t, "items"),
-      L,
+      I,
       de(t, "multiple"),
       de(t, "enableValueLabelPair")
-    ), ie = A(l["aria-describedby"]), oe = r(() => u("ariaLabelFallback")), P = ft(ca, !1), k = r(() => P ? He.SMALL : He.DEFAULT), W = r(() => ({
+    ), H = A(l["aria-describedby"]), re = r(() => d("ariaLabelFallback")), _ = vt(va, !1), J = r(() => _ ? Ze.SMALL : Ze.DEFAULT), R = r(() => ({
       "b-dropdown--condensed": t.condensed
-    })), ee = r(() => ({
+    })), V = r(() => ({
       "b-dropdown__description--error": !!t.errorMessage
-    })), U = A(""), te = de(t, "items"), me = de(t, "staticCategories"), O = Pa(
-      U,
-      te,
+    })), F = A(""), Ie = de(t, "items"), ke = de(t, "staticCategories"), be = Ka(
+      F,
+      Ie,
       t?.search?.searchEvent,
-      me,
+      ke,
       t?.search?.debounceTime
-    ), ae = r(() => t.dynamicFiltering && !!U.value), Me = Ra({
-      items: te,
+    ), T = r(() => t.dynamicFiltering && !!F.value), fe = za({
+      items: Ie,
       placeholder: de(t, "placeholder"),
       isMultiSelect: de(t, "multiple"),
-      selectedValues: x
-    }), Je = r(() => {
-      if (t?.multiple && Array.isArray(L.value))
+      selectedValues: k
+    }), Pe = r(() => {
+      if (t?.multiple && Array.isArray(I.value))
         return t.items.filter(
-          ({ value: m }) => L.value.includes(m)
+          ({ value: y }) => I.value.includes(y)
         );
       if (!t.multiple && t.staticCategories) {
-        const m = t.items.find(
-          (ge) => ge.items?.some((xe) => xe.value === L.value)
+        const y = t.items.find(
+          (Se) => Se.items?.some((Re) => Re.value === I.value)
         );
-        return (m ? m.items.find((ge) => ge.value === L.value) : t.items.find(({ value: ge }) => ge === L.value)) ?? null;
+        return (y ? y.items.find((Se) => Se.value === I.value) : t.items.find(({ value: Se }) => Se === I.value)) ?? null;
       }
-      return t.items.find(({ value: m }) => m === L.value);
-    }), B = r(() => {
-      const ye = (ce.value ? Te.value : O.value).findIndex(({ value: ge }) => t.enableValueLabelPair ? L.value?.value === ge : L.value === ge);
-      return ye > -1 ? ye : 0;
-    }), { isMultiLevelSelect: ce, flattenedItemsList: Te } = Mt(te), st = r(() => ce.value && !t.staticCategories), Ke = r(() => st.value ? "treeitem" : "option"), Ne = r(() => {
+      return t.items.find(({ value: y }) => y === I.value);
+    }), Be = r(() => {
+      const he = (Ee.value ? Fe.value : be.value).findIndex(({ value: Se }) => t.enableValueLabelPair ? I.value?.value === Se : I.value === Se);
+      return he > -1 ? he : 0;
+    }), { isMultiLevelSelect: Ee, flattenedItemsList: Fe } = Nt(Ie), We = r(() => Ee.value && !t.staticCategories), Ge = r(() => We.value ? "treeitem" : "option"), w = r(() => {
       if (t.multiple) {
-        const m = Array.isArray(L.value) ? L.value.length : 0, ye = ce.value ? Te.value.length : te.value.length;
-        return m === 0 ? null : !t.hasMoreItems && ye > 0 && ye === m ? u("all") : m;
+        const y = Array.isArray(I.value) ? I.value.length : 0, he = Ee.value ? Fe.value.length : Ie.value.length;
+        return y === 0 ? null : !t.hasMoreItems && he > 0 && he === y ? d("all") : y;
       }
       return null;
-    }), _e = r(
-      () => O.value.find((m) => !t.isOptionDisabled?.(m))
-    ), Xe = r(() => t.multiple || !ae.value || !N.value ? "" : _e.value?.label ?? ""), Ze = r(() => Xe.value.toLocaleLowerCase().startsWith(U.value.toLocaleLowerCase()) ? Xe.value.slice(U.value.length) : ""), Ue = r(
-      () => !t.multiple && h.value && ae.value && N.value && _e.value ? $t(w, _e.value.value) : null
+    }), se = r(
+      () => be.value.find((y) => !t.isOptionDisabled?.(y))
+    ), $e = r(() => t.multiple || !T.value || !D.value ? "" : se.value?.label ?? ""), Qe = r(() => $e.value.toLocaleLowerCase().startsWith(F.value.toLocaleLowerCase()) ? $e.value.slice(F.value.length) : ""), qe = r(
+      () => !t.multiple && S.value && T.value && D.value && se.value ? Dt(G, se.value.value) : null
     ), nt = r(
-      () => Ue.value ? O.value.findIndex(({ value: m }) => m === _e.value?.value) : -1
-    ), it = (m) => {
-      U.value = m, N.value = !0;
-    }, rt = r(
+      () => qe.value ? be.value.findIndex(({ value: y }) => y === se.value?.value) : -1
+    ), it = (y) => {
+      F.value = y, D.value = !0;
+    }, rt = async () => {
+      P([]), u(null), await ne(), ut();
+    }, dt = r(
       () => [
-        t.description ? T : null,
-        ie.value,
-        t.errorMessage ? M : null
+        t.description ? C : null,
+        H.value,
+        t.errorMessage ? N : null
       ].filter(Boolean).join(" ") || null
-    ), Qe = r(() => {
-      const m = S.value?.dropdownOptionsListboxRef;
-      return m?.listboxRef?.value ?? m?.listboxRef;
-    }), { visibleDomOptions: et, updateVisibleDomOptions: We } = mt(
-      Qe,
-      O,
-      Ke
-    ), dt = () => {
-      _.value || (h.value = !0, be(() => {
-        We();
+    ), Ye = r(() => {
+      const y = v.value?.dropdownOptionsListboxRef;
+      return y?.listboxRef?.value ?? y?.listboxRef;
+    }), { visibleDomOptions: et, updateVisibleDomOptions: tt } = yt(
+      Ye,
+      be,
+      Ge
+    ), ct = () => {
+      $.value || (S.value = !0, ne(() => {
+        tt();
       }));
-    }, qe = () => {
-      h.value = !1;
-    }, Ye = () => {
-      _.value || (h.value = !h.value, be(() => {
-        We();
-      }), ae.value && (U.value = ""));
-    }, ut = () => {
-      ae.value && (U.value = ""), h.value && (h.value = !1, S.value.onOutsideDropdownClick());
-    }, g = r(() => [
-      ut,
+    }, je = () => {
+      S.value = !1;
+    }, He = () => {
+      $.value || (S.value = !S.value, ne(() => {
+        tt();
+      }), T.value && (F.value = ""));
+    }, h = () => {
+      T.value && (F.value = ""), S.value && (S.value = !1, v.value.onOutsideDropdownClick());
+    }, L = r(() => [
+      h,
       {
-        ignore: [Qe]
+        ignore: [Ye]
       }
-    ]), C = async (m) => {
-      t.multiple || (U.value = "", h.value = !1), z(m), c(D.value), t.multiple || (await be(), Ve());
-    }, E = async () => _e.value ? (await C([_e.value]), !0) : !1, G = () => {
-      f(y.SHOW_MORE);
-    }, X = Ma(
+    ]), O = async (y) => {
+      t.multiple || (F.value = "", S.value = !1), P(y), u(W.value), t.multiple || (await ne(), ut());
+    }, K = async () => se.value ? (await O([se.value]), !0) : !1, ee = () => {
+      m(g.SHOW_MORE);
+    }, ue = Va(
       {
-        inputContainerRef: d,
-        optionsContainerRef: S,
-        selectedValueIndex: B,
-        isDropdownOpen: h,
+        inputContainerRef: c,
+        optionsContainerRef: v,
+        selectedValueIndex: Be,
+        isDropdownOpen: S,
         isDynamicFltering: de(t, "dynamicFiltering"),
         items: et,
         isMultiple: de(t, "multiple"),
-        isSearching: ae,
+        isSearching: T,
         activeDescendantIndex: nt,
-        selectFirstMatchedOption: E,
-        totalItemCount: r(() => O.value.length),
+        selectFirstMatchedOption: K,
+        totalItemCount: r(() => be.value.length),
         isVirtualScroll: !t?.multiple && t?.virtualScroll !== !1 && t?.lazyLoadType === "none",
         removeActiveDescendant: () => {
-          N.value = !1;
+          D.value = !1;
         }
       },
-      Ye,
-      dt,
-      qe
-    ), pe = Na(
+      He,
+      ct,
+      je
+    ), U = Ga(
       {
-        inputContainerRef: d,
-        isDropdownOpen: h
+        inputContainerRef: c,
+        isDropdownOpen: S
       },
-      qe
-    ), K = {
-      [y.CLOSE_DROPDOWN]: qe,
-      [y.SELECT]: C,
-      [y.SHOW_MORE]: G,
-      ...pe
-    }, Ve = () => {
-      d.value?.focus();
-    }, Ut = async () => {
-      if (await be(), !h.value || t.multiple || !S.value)
+      je
+    ), Je = {
+      [g.CLOSE_DROPDOWN]: je,
+      [g.SELECT]: O,
+      [g.SHOW_MORE]: ee,
+      ...U
+    }, ut = () => {
+      c.value?.focus();
+    }, Wt = async () => {
+      if (await ne(), !S.value || t.multiple || !v.value)
         return;
-      const m = B.value;
-      if (m <= 0)
+      const y = Be.value;
+      if (y <= 0)
         return;
-      const ye = S.value.dropdownOptionsListboxRef, ge = ye?.listboxRef;
-      ye?.listboxItemRef?.scrollToItem?.(m, ge);
+      const he = v.value.dropdownOptionsListboxRef, Se = he?.listboxRef;
+      he?.listboxItemRef?.scrollToItem?.(y, Se);
     };
-    return he(
-      () => h.value,
-      (m) => {
-        m && (f("open"), Ut());
+    return pe(
+      () => S.value,
+      (y) => {
+        y && (m("open"), Wt());
       }
     ), a({
-      focus: Ve
-    }), (m, ye) => Le((p(), I("div", V(s(m.$attrs), {
-      class: ["b-dropdown", W.value]
+      focus: ut
+    }), (y, he) => Le((p(), E("div", z(s(y.$attrs), {
+      class: ["b-dropdown", R.value]
     }), [
-      m.label ? (p(), F(v(nl), {
+      y.label ? (p(), M(f(sl), {
         key: 0,
-        id: v($),
-        condensed: m.condensed,
-        label: m.label,
-        "tooltip-text": m.tooltipText,
-        optional: m.optional,
-        required: m.required
-      }, null, 8, ["id", "condensed", "label", "tooltip-text", "optional", "required"])) : Y("", !0),
-      Le((p(), I("div", V({
+        id: f(x),
+        condensed: y.condensed,
+        label: y.label,
+        "tooltip-text": y.tooltipText,
+        optional: y.optional,
+        required: y.required
+      }, null, 8, ["id", "condensed", "label", "tooltip-text", "optional", "required"])) : j("", !0),
+      Le((p(), E("div", z({
         ref_key: "inputContainerRefWrapper",
         ref: b
-      }, fe(v(X), !0)), [
-        (p(), F(It(k.value), {
+      }, ve(f(ue), !0)), [
+        (p(), M(Et(J.value), {
           ref_key: "inputContainerRef",
-          ref: d,
-          condensed: m.condensed,
-          value: U.value,
-          "additional-items-selected": Ne.value,
-          "aria-controls": v(w),
-          "aria-active-descendant": Ue.value,
-          ariaExpanded: h.value,
-          "aria-labelledby": m.label ? v($) : null,
-          "aria-describedby": rt.value,
-          "aria-label": m.$attrs["aria-label"] ?? m.label ?? oe.value,
-          "aria-readonly": v(_),
-          "aria-required": m.required,
-          readonly: v(_),
-          disabled: m.disabled,
-          "display-value": v(Me),
-          "dynamic-filtering": m.dynamicFiltering,
-          "has-selected-value": v(x).length > 0,
-          "is-invalid": !!m.errorMessage,
-          multiple: m.multiple,
-          open: h.value,
-          "selected-value-item": v(P) ? void 0 : Je.value,
-          "show-slot-content-in-multiple": m.showSlotContentInMultiple,
+          ref: c,
+          condensed: y.condensed,
+          value: F.value,
+          "additional-items-selected": w.value,
+          "aria-controls": f(G),
+          "aria-active-descendant": qe.value,
+          ariaExpanded: S.value,
+          "aria-labelledby": y.label ? f(x) : null,
+          "aria-describedby": dt.value,
+          "aria-label": y.$attrs["aria-label"] ?? y.label ?? re.value,
+          "aria-readonly": f($),
+          "aria-required": y.required,
+          clearable: y.clearable && !y.required,
+          readonly: f($),
+          disabled: y.disabled,
+          "display-value": f(fe),
+          "dynamic-filtering": y.dynamicFiltering,
+          "has-selected-value": f(k).length > 0,
+          "is-invalid": !!y.errorMessage,
+          multiple: y.multiple,
+          open: S.value,
+          "selected-value-item": f(_) ? void 0 : Pe.value,
+          "show-slot-content-in-multiple": y.showSlotContentInMultiple,
           onInput: it,
-          onOpen: Ye,
-          onClose: Ye
-        }, Ee({
-          "autocomplete-suggestion": R(() => [
-            Ze.value ? (p(), I(Ce, { key: 0 }, [
-              Z("span", Fa, j(U.value), 1),
-              ne(j(Ze.value), 1)
-            ], 64)) : Y("", !0)
+          onOpen: He,
+          onClose: He,
+          onClearSelection: rt
+        }, Te({
+          "autocomplete-suggestion": B(() => [
+            Qe.value ? (p(), E(ye, { key: 0 }, [
+              Y("span", Ua, q(F.value), 1),
+              oe(q(Qe.value), 1)
+            ], 64)) : j("", !0)
           ]),
           _: 2
         }, [
-          re(v(i), (ge, xe) => ({
-            name: xe,
-            fn: R((ct) => [
-              J(m.$slots, xe, ve(Ae(ct)), void 0, !0)
+          ie(f(i), (Se, Re) => ({
+            name: Re,
+            fn: B((pt) => [
+              Q(y.$slots, Re, me(we(pt)), void 0, !0)
             ])
           }))
-        ]), 1064, ["condensed", "value", "additional-items-selected", "aria-controls", "aria-active-descendant", "ariaExpanded", "aria-labelledby", "aria-describedby", "aria-label", "aria-readonly", "aria-required", "readonly", "disabled", "display-value", "dynamic-filtering", "has-selected-value", "is-invalid", "multiple", "open", "selected-value-item", "show-slot-content-in-multiple"]))
+        ]), 1064, ["condensed", "value", "additional-items-selected", "aria-controls", "aria-active-descendant", "ariaExpanded", "aria-labelledby", "aria-describedby", "aria-label", "aria-readonly", "aria-required", "clearable", "readonly", "disabled", "display-value", "dynamic-filtering", "has-selected-value", "is-invalid", "multiple", "open", "selected-value-item", "show-slot-content-in-multiple"]))
       ], 16)), [
-        [v(je)]
+        [f(Xe)]
       ]),
-      d.value ? (p(), F(v(ol), {
+      c.value ? (p(), M(f(al), {
         key: 1,
-        disabled: m.teleport?.disabled,
-        to: m.teleport?.to
+        disabled: y.teleport?.disabled,
+        to: y.teleport?.to
       }, {
-        default: R(() => [
-          q(v(ua), V({
-            id: v(w),
+        default: B(() => [
+          X(f(ma), z({
+            id: f(G),
             ref_key: "optionsContainerRef",
-            ref: S,
-            "aria-label": m.$attrs["aria-label"] ?? m.label ?? oe.value,
-            "active-descendant-id": Ue.value,
-            "component-loading": m.componentLoading,
-            "empty-state": m.emptyState,
-            disabled: m.disabled,
-            "is-option-disabled": m.isOptionDisabled,
-            items: v(O),
-            multiple: m.multiple,
-            "static-categories": me.value,
-            open: h.value,
-            "selected-value": v(x),
-            searching: ae.value,
+            ref: v,
+            "aria-label": y.$attrs["aria-label"] ?? y.label ?? re.value,
+            "active-descendant-id": qe.value,
+            "component-loading": y.componentLoading,
+            "empty-state": y.emptyState,
+            disabled: y.disabled,
+            "is-option-disabled": y.isOptionDisabled,
+            items: f(be),
+            multiple: y.multiple,
+            "static-categories": ke.value,
+            open: S.value,
+            "selected-value": f(k),
+            searching: T.value,
             "target-element": b.value,
-            loading: m.loading,
-            "has-more-items": m.hasMoreItems,
-            "lazy-load-type": m.lazyLoadType,
-            "virtual-scroll": m.virtualScroll
-          }, fe(K)), Ee({ _: 2 }, [
-            re(v(i), (ge, xe) => ({
-              name: xe,
-              fn: R((ct) => [
-                J(m.$slots, xe, ve(Ae(ct)), void 0, !0)
+            loading: y.loading,
+            "has-more-items": y.hasMoreItems,
+            "lazy-load-type": y.lazyLoadType,
+            "virtual-scroll": y.virtualScroll
+          }, ve(Je)), Te({ _: 2 }, [
+            ie(f(i), (Se, Re) => ({
+              name: Re,
+              fn: B((pt) => [
+                Q(y.$slots, Re, me(we(pt)), void 0, !0)
               ])
             }))
           ]), 1040, ["id", "aria-label", "active-descendant-id", "component-loading", "empty-state", "disabled", "is-option-disabled", "items", "multiple", "static-categories", "open", "selected-value", "searching", "target-element", "loading", "has-more-items", "lazy-load-type", "virtual-scroll"])
         ]),
         _: 3
-      }, 8, ["disabled", "to"])) : Y("", !0),
-      m.errorMessage ? (p(), F(v(il), {
+      }, 8, ["disabled", "to"])) : j("", !0),
+      y.errorMessage ? (p(), M(f(nl), {
         key: 2,
-        id: v(M),
-        "error-message": m.errorMessage,
+        id: f(N),
+        "error-message": y.errorMessage,
         class: "b-dropdown__error-message"
-      }, null, 8, ["id", "error-message"])) : Y("", !0),
-      m.description || v(n)("description") ? (p(), F(v(Be), {
+      }, null, 8, ["id", "error-message"])) : j("", !0),
+      y.description || f(n)("description") ? (p(), M(f(Me), {
         key: 3,
-        id: v(T),
-        class: we(["b-dropdown__description", ee.value]),
+        id: f(C),
+        class: _e(["b-dropdown__description", V.value]),
         el: "span"
       }, {
-        default: R(() => [
-          J(m.$slots, "description", {}, () => [
-            ne(j(m.description), 1)
+        default: B(() => [
+          Q(y.$slots, "description", {}, () => [
+            oe(q(y.description), 1)
           ], !0)
         ]),
         _: 3
-      }, 8, ["id", "class"])) : Y("", !0)
+      }, 8, ["id", "class"])) : j("", !0)
     ], 16)), [
-      [v(Zt), g.value]
+      [f(Xt), L.value]
     ]);
   }
-}), fo = /* @__PURE__ */ ue(za, [["__scopeId", "data-v-1ca3a8a7"]]);
+}), So = /* @__PURE__ */ ce(qa, [["__scopeId", "data-v-c93d3f55"]]);
 export {
-  fo as B,
-  Oa as D,
-  ml as _,
-  y as a,
-  $e as b,
-  He as c,
-  pt as d,
-  Mt as e,
-  Pa as f,
-  Pt as g,
-  ca as h,
-  Ft as i,
-  yt as j,
-  na as u
+  So as B,
+  ka as D,
+  yl as _,
+  g as a,
+  Ae as b,
+  Ze as c,
+  bt as d,
+  Nt as e,
+  Ka as f,
+  Ft as g,
+  va as h,
+  zt as i,
+  gt as j,
+  ua as u
 };
-//# sourceMappingURL=dropdown.BoSI-Rre.js.map
+//# sourceMappingURL=dropdown.BJ0cJ9Ea.js.map