@adyen/bento-vue2 1.72.0 → 1.73.0

package/dist/chunks/{dropdown.DQbTuKc5.js → dropdown.B4urOhfH.js}

@@ -1,22 +1,22 @@
-import { ref as C, watch as _e, computed as r, defineComponent as R, useSlots as ge, toRefs as he, nextTick as S, useAttrs as Te, toRef as w, inject as Ne } from "vue";
-import { d as fe, B as Re } from "./typography.hlOAxsEn.js";
-import { a as Y, b as M, c as Ae, B as W, D as Me } from "./dropdown-default-textbox.CDm-PQfc.js";
+import { ref as h, watch as _e, computed as r, defineComponent as R, useSlots as ge, toRefs as he, nextTick as S, useAttrs as Ne, toRef as w, inject as Re } from "vue";
+import { d as fe, B as Ae } from "./typography.hlOAxsEn.js";
+import { a as Y, b as P, c as Me, B as W, D as Pe } from "./dropdown-default-textbox.CDm-PQfc.js";
 /* empty css              */
-import { n as $ } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import { n as k } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import { s as Z } from "./events.CMzGybJJ.js";
-import { g as P } from "./generate-uid.NJ8tVoha.js";
-import { u as Pe } from "./aria-label.CaUURpnB.js";
+import { g as $ } from "./generate-uid.NJ8tVoha.js";
+import { u as $e } from "./aria-label.CaUURpnB.js";
 import { u as X } from "./i18n.BQkEbtPM.js";
-import { a as p, b as Q, B as ve, c as $e, u as ke, d as Fe } from "./use-cached-selected-values.C7j6YhuC.js";
-import { u as Ke } from "./use-form-layout-loading.D3lALhtC.js";
-import { u as ze } from "./use-has-slot.C9lQZ6nz.js";
-import { B as E, a as We } from "./keyboard-navigation.pB8weElW.js";
-import { B as Ue } from "./directive.Cbdox5VL.js";
-import { F as Ve, E as qe } from "./field-label.BKzuCnXr.js";
+import { a as p, b as Q, B as ve, c as ke, u as Fe, d as Ke } from "./use-cached-selected-values.C7j6YhuC.js";
+import { u as ze } from "./use-form-layout-loading.D3lALhtC.js";
+import { u as We } from "./use-has-slot.C9lQZ6nz.js";
+import { B as E, a as Ue } from "./keyboard-navigation.pB8weElW.js";
+import { B as Ve } from "./directive.Cbdox5VL.js";
+import { F as je, E as qe } from "./field-label.BKzuCnXr.js";
 import { P as me } from "./popper-container.C9KCAJxI.js";
-import { h as je } from "./button-actions.55vIvDsX.js";
+import { h as He } from "./button-actions.55vIvDsX.js";
 import "../assets/dropdown.css";
-const He = {
+const Je = {
   "en-US": {
     apply: "Apply",
     cancel: "Cancel",
@@ -30,8 +30,8 @@ const He = {
     apply: "Aplicar",
     cancel: "Cancelar"
   }
-}, Je = (a, t, o, e) => {
-  const n = C(a.value), { t: l } = X();
+}, Ye = (a, t, o, e) => {
+  const n = h(a.value), { t: l } = X();
   _e(a, () => {
     n.value = a.value;
   });
@@ -39,9 +39,9 @@ const He = {
     () => JSON.stringify(n.value) === JSON.stringify(a.value)
   ), i = () => {
     e(p.SELECT, n.value), e(p.CLOSE_DROPDOWN);
-  }, c = () => {
+  }, u = () => {
     n.value = a.value, e(p.CLOSE_DROPDOWN);
-  }, m = () => {
+  }, b = () => {
     o.value && t.value && (n.value = a.value);
   }, d = r(() => [
     {
@@ -51,22 +51,22 @@ const He = {
     },
     {
       title: l("cancel"),
-      event: c
+      event: u
     }
-  ]), u = (y) => {
+  ]), c = (y) => {
     n.value = y, t.value || e(p.SELECT, y);
   }, _ = (y) => {
-    u(y), e(p.TAB);
+    c(y), e(p.TAB);
   }, g = (y) => {
-    u(y), e(p.ENTER);
+    c(y), e(p.ENTER);
   }, f = (y) => {
-    u(y), e(p.SPACE);
+    c(y), e(p.SPACE);
   }, O = () => {
-    c(), e(p.ESCAPE);
+    u(), e(p.ESCAPE);
   }, L = () => {
     e(p.SHOW_MORE);
   }, x = {
-    [p.SELECT]: u,
+    [p.SELECT]: c,
     [p.SHOW_MORE]: L,
     [p.TAB]: _,
     [p.SPACE]: f,
@@ -79,13 +79,13 @@ const He = {
     // Methods
     listeners: x,
     onEscapeKey: O,
-    onOutsideDropdownClick: m
+    onOutsideDropdownClick: b
   };
-}, Ye = R({
-  i18n: { messages: He },
+}, Ze = R({
+  i18n: { messages: Je },
   name: "bento-dropdown-options-container"
-}), Ze = /* @__PURE__ */ R({
-  ...Ye,
+}), Qe = /* @__PURE__ */ R({
+  ...Ze,
   props: {
     /**
      * Defines a string value that labels an interactive element.
@@ -196,11 +196,11 @@ const He = {
   },
   emits: [],
   setup(a, { expose: t, emit: o }) {
-    const e = a, n = ge(), { selectedValue: l, multiple: s } = he(e), i = C(null), { t: c } = X(), m = r(() => e.open && !e.disabled), d = r(() => c("noOptionsMatchThisSearch")), u = r(() => ({
+    const e = a, n = ge(), { selectedValue: l, multiple: s } = he(e), i = h(null), { t: u } = X(), b = r(() => e.open && !e.disabled), d = r(() => u("noOptionsMatchThisSearch")), c = r(() => ({
       "b-dropdown-options-container--single": !(e != null && e.multiple)
     })), _ = r(() => ({
       "b-dropdown-options-container__listbox--single": !(e != null && e.multiple)
-    })), { actions: g, internalSelectedValue: f, listeners: O, onEscapeKey: L, onOutsideDropdownClick: x } = Je(l, s, m, o), y = r(() => e != null && e.multiple ? je : me), I = r(() => {
+    })), { actions: g, internalSelectedValue: f, listeners: O, onEscapeKey: L, onOutsideDropdownClick: x } = Ye(l, s, b, o), y = r(() => e != null && e.multiple ? He : me), I = r(() => {
       var B;
       const D = {
         "min-width": `${(B = e == null ? void 0 : e.targetElement) == null ? void 0 : B.clientWidth}px`,
@@ -212,7 +212,7 @@ const He = {
         actions: g.value,
         divider: !0,
         fallbackPosition: ["top-start"],
-        id: P(`dropdown-options-${e.id}`),
+        id: $(`dropdown-options-${e.id}`),
         open: e.open,
         position: "bottom-start",
         style: {
@@ -225,7 +225,7 @@ const He = {
         offset: [0, 8],
         position: "bottom-start",
         style: {
-          display: m.value ? "block" : "none",
+          display: b.value ? "block" : "none",
           ...D
         },
         targetElement: e.targetElement
@@ -233,10 +233,10 @@ const He = {
     });
     return t({
       onOutsideDropdownClick: x
-    }), { __sfc: !0, slots: n, emit: o, props: e, selectedValue: l, multiple: s, dropdownOptionsListboxRef: i, t: c, isDropdownOpen: m, noResultsMessage: d, conditionalClasses: u, conditionalListboxClasses: _, actions: g, internalSelectedValue: f, listeners: O, onEscapeKey: L, onOutsideDropdownClick: x, popperContainerOrPopoverComponent: y, popperContainerOrPopoverProps: I, BentoListbox: Q };
+    }), { __sfc: !0, slots: n, emit: o, props: e, selectedValue: l, multiple: s, dropdownOptionsListboxRef: i, t: u, isDropdownOpen: b, noResultsMessage: d, conditionalClasses: c, conditionalListboxClasses: _, actions: g, internalSelectedValue: f, listeners: O, onEscapeKey: L, onOutsideDropdownClick: x, popperContainerOrPopoverComponent: y, popperContainerOrPopoverProps: I, BentoListbox: Q };
   }
 });
-var Qe = function() {
+var Xe = function() {
   var t = this, o = t._self._c, e = t._self._setupProxy;
   return o(e.popperContainerOrPopoverComponent, t._b({ tag: "component", staticClass: "b-dropdown-options-container", class: e.conditionalClasses }, "component", e.popperContainerOrPopoverProps, !1), [o("div", { on: { keydown: function(n) {
     return !n.type.indexOf("key") && t._k(n.keyCode, "esc", 27, n.key, ["Esc", "Escape"]) ? null : e.onEscapeKey.apply(null, arguments);
@@ -245,55 +245,55 @@ var Qe = function() {
       return [t._t(l, null, null, s)];
     } };
   })], null, !0) }, e.listeners))], 1)]);
-}, Xe = [], Ge = /* @__PURE__ */ $(
-  Ze,
+}, Ge = [], et = /* @__PURE__ */ k(
   Qe,
   Xe,
+  Ge,
   !1,
   null,
   "30d60112"
 );
-const et = Ge.exports;
+const tt = et.exports;
 let be = 0;
-const tt = {
+const ot = {
   beforeCreate() {
     this.uuid = be.toString(), be += 1;
   }
 };
-var ot = function() {
+var nt = function() {
   var t = this, o = t._self._c;
   return o("svg", t._b({ staticClass: "ui-assets-icons-16", attrs: { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" } }, "svg", t.$attrs, !1), [t.$attrs["svg-title"] ? o("title", [t._v(t._s(t.$attrs["svg-title"]))]) : t._e(), o("path", { attrs: { fill: "#001222", d: "M5.00011 5.43922L8.00011 8.43922L11.0001 5.43922L12.0608 6.49988L8.00011 10.5605L3.93945 6.49988L5.00011 5.43922Z" } })]);
-}, nt = [], at = /* @__PURE__ */ $(
-  tt,
+}, at = [], st = /* @__PURE__ */ k(
   ot,
   nt,
+  at,
   !1,
   null,
   null
 );
-const st = at.exports;
+const lt = st.exports;
 let ye = 0;
-const lt = {
+const it = {
   beforeCreate() {
     this.uuid = ye.toString(), ye += 1;
   }
 };
-var it = function() {
+var rt = function() {
   var t = this, o = t._self._c;
   return o("svg", t._b({ staticClass: "ui-assets-icons-16", attrs: { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" } }, "svg", t.$attrs, !1), [t.$attrs["svg-title"] ? o("title", [t._v(t._s(t.$attrs["svg-title"]))]) : t._e(), o("path", { attrs: { fill: "#001222", d: "M10.9999 10.5608L7.9999 7.56077L4.9999 10.5608L3.93924 9.50011L7.9999 5.43945L12.0606 9.50011L10.9999 10.5608Z" } })]);
-}, rt = [], dt = /* @__PURE__ */ $(
-  lt,
+}, dt = [], ut = /* @__PURE__ */ k(
   it,
   rt,
+  dt,
   !1,
   null,
   null
 );
-const ct = dt.exports, ut = R({
+const ct = ut.exports, pt = R({
   name: "dropdown-small-textbox",
   inheritAttrs: !1
-}), pt = /* @__PURE__ */ R({
-  ...ut,
+}), ft = /* @__PURE__ */ R({
+  ...pt,
   props: {
     /**
      * The number of additional items that have been selected in the dropdown.
@@ -354,48 +354,48 @@ const ct = dt.exports, ut = R({
   },
   emits: ["clear", "close", "input", "keydown", "open"],
   setup(a, { expose: t, emit: o }) {
-    const e = a, n = C(null), l = r(() => ({
+    const e = a, n = h(null), l = r(() => ({
       [`b-dropdown-small-textbox--${Y.DISABLED}`]: e.disabled,
       [`b-dropdown-small-textbox--${Y.READONLY}`]: e.readonly,
       [`b-dropdown-small-textbox--${Y.OPENED}`]: e.open
     })), s = r(() => e.open && !e.disabled && !e.readonly), i = (f) => {
       o("input", f);
-    }, c = (f) => {
+    }, u = (f) => {
       o("keydown", f);
-    }, m = (f) => {
+    }, b = (f) => {
       Z(f), o("open");
     }, d = (f) => {
       Z(f), o("close");
-    }, u = (f) => {
+    }, c = (f) => {
       Z(f), o("clear");
     }, _ = {
-      [M.INPUT]: i,
-      [M.OPEN]: m,
-      [M.CLOSE]: d,
-      [M.CLEAR]: u,
-      [M.KEYDOWN]: c
+      [P.INPUT]: i,
+      [P.OPEN]: b,
+      [P.CLOSE]: d,
+      [P.CLEAR]: c,
+      [P.KEYDOWN]: u
     }, g = () => {
       n.value.focus();
     };
     return t({
       focus: g
-    }), { __sfc: !0, emit: o, props: e, baseTextbox: n, conditionalClasses: l, isDropdownOpen: s, onInput: i, onKeyDown: c, openDropdown: m, closeDropdown: d, clearValue: u, listeners: _, focus: g, BentoDropdownSize: W, DropdownBaseTextbox: Ae, ChevronDownSmallIcon: st, ChevronUpSmallIcon: ct };
+    }), { __sfc: !0, emit: o, props: e, baseTextbox: n, conditionalClasses: l, isDropdownOpen: s, onInput: i, onKeyDown: u, openDropdown: b, closeDropdown: d, clearValue: c, listeners: _, focus: g, BentoDropdownSize: W, DropdownBaseTextbox: Me, ChevronDownSmallIcon: lt, ChevronUpSmallIcon: ct };
   }
 });
-var ft = function() {
+var vt = function() {
   var t = this, o = t._self._c, e = t._self._setupProxy;
   return o("div", { staticClass: "b-dropdown-small-textbox", class: e.conditionalClasses }, [o(e.DropdownBaseTextbox, t._g(t._b({ ref: "baseTextbox", staticClass: "b-dropdown-small-textbox__textbox", attrs: { size: e.BentoDropdownSize.SMALL }, scopedSlots: t._u([{ key: "icon", fn: function() {
     return [o("div", { staticClass: "b-dropdown-small-textbox__chevron" }, [o(e.ChevronUpSmallIcon, { directives: [{ name: "show", rawName: "v-show", value: e.isDropdownOpen, expression: "isDropdownOpen" }], attrs: { "svg-title": "opened" } }), o(e.ChevronDownSmallIcon, { directives: [{ name: "show", rawName: "v-show", value: !e.isDropdownOpen, expression: "!isDropdownOpen" }], attrs: { "svg-title": "closed" } })], 1)];
   }, proxy: !0 }]) }, "dropdown-base-textbox", { ...t.$attrs, ...t.$props }, !1), e.listeners))], 1);
-}, vt = [], mt = /* @__PURE__ */ $(
-  pt,
+}, mt = [], bt = /* @__PURE__ */ k(
   ft,
   vt,
+  mt,
   !1,
   null,
   "5e83538c"
 );
-const bt = mt.exports, yt = (a, t) => t.value.reduce((o, e) => {
+const yt = bt.exports, _t = (a, t) => t.value.reduce((o, e) => {
   if (e.items) {
     const n = e.items.filter(
       (s) => a.value.find((i) => i.value === s.value)
@@ -403,18 +403,18 @@ const bt = mt.exports, yt = (a, t) => t.value.reduce((o, e) => {
     n.length === e.items.length ? o.push(e.displayValue ?? e.label) : n.forEach(({ label: s, displayValue: i }) => o.push(i ?? s));
   }
   return a.value.find((n) => n.value === e.value) && o.push(e.displayValue ?? e.label), o;
-}, []).join(", "), _t = ({ items: a, placeholder: t, selectedValues: o, isMultiSelect: e }) => {
+}, []).join(", "), gt = ({ items: a, placeholder: t, selectedValues: o, isMultiSelect: e }) => {
   const n = r(
     () => e.value && a.value.find((s) => {
       var i;
       return (i = s.items) == null ? void 0 : i.length;
     })
   );
-  return r(() => o.value.length ? n.value ? yt(o, a) : o.value.map(({ label: s, displayValue: i }) => i ?? s).join(", ") : t.value || null);
+  return r(() => o.value.length ? n.value ? _t(o, a) : o.value.map(({ label: s, displayValue: i }) => i ?? s).join(", ") : t.value || null);
 }, Ce = (a) => {
   var t;
   (t = a.value.$children) == null || t[0].$refs.textbox.focus();
-}, gt = ({
+}, ht = ({
   inputContainerRef: a,
   optionsContainerRef: t,
   selectedValueIndex: o,
@@ -422,50 +422,50 @@ const bt = mt.exports, yt = (a, t) => t.value.reduce((o, e) => {
   isDynamicFltering: n,
   items: l,
   isMultiple: s
-}, i, c, m) => {
-  const d = async (b) => {
-    var h;
-    n.value && await S(), (h = l.value[b]) == null || h.focus();
-  }, u = async (b) => {
-    var F, K;
+}, i, u, b) => {
+  const d = async (m) => {
+    var C;
+    n.value && await S(), (C = l.value[m]) == null || C.focus();
+  }, c = async (m) => {
+    var A, K;
     n.value && await S();
-    const h = (F = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef) == null ? void 0 : F.$el.querySelectorAll(
+    const C = (A = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef) == null ? void 0 : A.$el.querySelectorAll(
       "button"
     );
-    h.length ? (K = h[b]) == null || K.focus() : d(b);
-  }, _ = (b) => {
-    var h;
-    return (h = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef) == null ? void 0 : h.setListboxFocusedIndex(
-      b
+    C.length ? (K = C[m]) == null || K.focus() : d(m);
+  }, _ = (m) => {
+    var C;
+    return (C = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef) == null ? void 0 : C.setListboxFocusedIndex(
+      m
     );
   }, g = () => {
-    e.value || c(), S(() => {
+    e.value || u(), S(() => {
       _(0), d(0);
     });
   }, f = () => {
-    e.value || c(), S(() => {
+    e.value || u(), S(() => {
       _(l.value.length - 1), d(l.value.length - 1);
     });
-  }, O = ({ detail: b }) => {
-    b.preventDefault(), g();
-  }, L = ({ detail: b }) => {
-    b.preventDefault(), f();
+  }, O = ({ detail: m }) => {
+    m.preventDefault(), g();
+  }, L = ({ detail: m }) => {
+    m.preventDefault(), f();
   }, x = () => {
     g();
   }, y = () => {
     f();
-  }, I = ({ detail: b }) => {
-    b.preventDefault(), i(), e.value && S(() => {
-      s ? u(0) : (_(o.value), d(o.value));
+  }, I = ({ detail: m }) => {
+    m.preventDefault(), i(), e.value && S(() => {
+      s ? c(0) : (_(o.value), d(o.value));
     });
-  }, D = ({ detail: b }) => {
-    b.preventDefault(), i(), e.value && S(() => {
-      s ? u(0) : (_(o.value), d(o.value));
+  }, D = ({ detail: m }) => {
+    m.preventDefault(), i(), e.value && S(() => {
+      s ? c(0) : (_(o.value), d(o.value));
     });
   }, B = () => {
-    e.value && m();
-  }, k = () => {
-    e.value && (m(), Ce(a));
+    e.value && b();
+  }, F = () => {
+    e.value && (b(), Ce(a));
   };
   return r(() => ({
     [E.ARROW_DOWN]: O,
@@ -475,9 +475,9 @@ const bt = mt.exports, yt = (a, t) => t.value.reduce((o, e) => {
     ...n.value ? {} : { [E.SPACE]: I },
     [E.ENTER]: D,
     [E.TAB]: B,
-    [E.ESCAPE]: k
+    [E.ESCAPE]: F
   }));
-}, ht = ({ inputContainerRef: a, isDropdownOpen: t }, o) => {
+}, Ct = ({ inputContainerRef: a, isDropdownOpen: t }, o) => {
   const e = () => {
     t.value && o(), S(() => {
       Ce(a);
@@ -490,18 +490,18 @@ const bt = mt.exports, yt = (a, t) => t.value.reduce((o, e) => {
     [p.SPACE]: e
   };
 };
-function Ct(a, t, o, e) {
-  const n = C(a), l = C(t), s = (c, m = []) => m.flatMap((d) => d.label.toLocaleLowerCase().includes(c) ? e != null && e.value && d.items ? [...s(c, d.items)] : [d, ...s(c, d.items)] : d.items ? [...s(c, d.items)] : []);
+function wt(a, t, o, e) {
+  const n = h(a), l = h(t), s = (u, b = []) => b.flatMap((d) => d.label.toLocaleLowerCase().includes(u) ? e != null && e.value && d.items ? [...s(u, d.items)] : [d, ...s(u, d.items)] : d.items ? [...s(u, d.items)] : []);
   return _e(n, () => {
     o !== void 0 && o(n.value);
   }), r(() => {
     if (!n.value || o !== void 0)
       return l.value;
-    const c = n.value.toLocaleLowerCase();
-    return s(c, l.value);
+    const u = n.value.toLocaleLowerCase();
+    return s(u, l.value);
   });
 }
-const wt = {
+const Lt = {
   "en-US": {
     all: "All",
     ariaLabelFallback: "Dropdown",
@@ -515,15 +515,15 @@ const wt = {
     all: "Todos",
     clearFilter: "Limpar filtro"
   }
-}, Lt = Symbol("input field component injection key"), jt = Symbol("input field hint injection key"), Ht = Symbol("input field parent component injection key"), xt = R({
-  i18n: { messages: wt },
+}, xt = Symbol("input field component injection key"), Ht = Symbol("input field hint injection key"), Jt = Symbol("input field parent component injection key"), St = R({
+  i18n: { messages: Lt },
   name: "b-dropdown",
   components: {
-    DropdownInputDefault: Me,
-    DropdownInputSmall: bt
+    DropdownInputDefault: Pe,
+    DropdownInputSmall: yt
   }
-}), St = /* @__PURE__ */ R({
-  ...xt,
+}), Ot = /* @__PURE__ */ R({
+  ...St,
   props: {
     ariaLabel: { default: null },
     condensed: { type: Boolean, default: !1 },
@@ -557,33 +557,33 @@ const wt = {
   emits: ["input", "show-more"],
   setup(a, { expose: t, emit: o }) {
     var pe;
-    const e = a, n = Te(), l = ge(), s = ze(l), { t: i } = X(), c = C(null), m = C(null), d = C(null), u = C(!1), _ = P("bento-dropdown-options-container"), g = P("dropdown-label"), f = P("dropdown-description"), O = P("dropdown-error"), { isReadOnly: L } = Ke(w(e, "readonly")), { cachedSelectedListboxOptions: x, cachedListboxSelectedValues: y, setCachedValues: I } = $e(
+    const e = a, n = Ne(), l = ge(), s = We(l), { t: i } = X(), u = h(null), b = h(null), d = h(null), c = h(!1), _ = $("bento-dropdown-options-container"), g = $("dropdown-label"), f = $("dropdown-description"), O = $("dropdown-error"), { isReadOnly: L } = ze(w(e, "readonly")), { cachedSelectedListboxOptions: x, cachedListboxSelectedValues: y, setCachedValues: I } = ke(
       w(e, "items"),
       w(e, "value"),
       w(e, "multiple"),
       w(e, "enableValueLabelPair")
-    ), D = C(n["aria-label"]), { ariaLabel: B, label: k } = he(e), U = r(() => i("ariaLabelFallback")), b = Pe({
+    ), D = h(n["aria-label"]), B = h(n["aria-describedby"]), { ariaLabel: F, label: U } = he(e), m = r(() => i("ariaLabelFallback")), C = $e({
       // TODO: take ariaLabel ref away when aria-label prop is removed
-      ariaLabel: B.value || D,
-      label: k,
-      defaultFallback: U
-    }), h = e.size === W.SMALL || Ne(Lt, !1), F = r(() => h ? W.SMALL : W.DEFAULT), K = r(() => ({
+      ariaLabel: F.value || D,
+      label: U,
+      defaultFallback: m
+    }), A = e.size === W.SMALL || Re(xt, !1), K = r(() => A ? W.SMALL : W.DEFAULT), we = r(() => ({
       "b-dropdown--condensed": e.condensed
-    })), we = r(() => ({
+    })), Le = r(() => ({
       "b-dropdown__description--error": !!e.errorMessage
-    })), T = C(""), A = w(e, "items"), G = w(e, "staticCategories"), V = Ct(T, A, (pe = e == null ? void 0 : e.search) == null ? void 0 : pe.searchEvent, G), q = r(() => e.dynamicFiltering && !!T.value), Le = _t({
-      items: A,
+    })), T = h(""), M = w(e, "items"), G = w(e, "staticCategories"), V = wt(T, M, (pe = e == null ? void 0 : e.search) == null ? void 0 : pe.searchEvent, G), j = r(() => e.dynamicFiltering && !!T.value), xe = gt({
+      items: M,
       placeholder: w(e, "placeholder"),
       isMultiSelect: w(e, "multiple"),
       selectedValues: x
-    }), xe = r(() => {
+    }), Se = r(() => {
       if (e != null && e.multiple && Array.isArray(e.value))
         return e.items.filter(
           ({ value: v }) => (e == null ? void 0 : e.value) && (e == null ? void 0 : e.value).includes(v)
         );
       if (!e.multiple && e.staticCategories) {
         const v = e.items.find(
-          (J) => J.items.some((Ie) => Ie.value === e.value)
+          (J) => J.items.some((Te) => Te.value === e.value)
         );
         return v ? v.items.find((J) => J.value === e.value) : null;
       }
@@ -591,43 +591,47 @@ const wt = {
     }), ee = r(() => {
       const v = V.value.findIndex(({ value: N }) => e.enableValueLabelPair ? e.value.value === N : e.value === N);
       return v > -1 ? v : 0;
-    }), { isMultiLevelSelect: j, flattenedItemsList: te } = ke(A), oe = r(() => j.value && !e.staticCategories), ne = r(() => oe.value ? "treeitem" : "option"), Se = r(() => {
+    }), { isMultiLevelSelect: q, flattenedItemsList: te } = Fe(M), oe = r(() => q.value && !e.staticCategories), ne = r(() => oe.value ? "treeitem" : "option"), Oe = r(() => {
       if (e.multiple) {
-        const v = Array.isArray(e.value) ? e.value.length : 0, N = j.value ? te.value.length : A.value.length;
+        const v = Array.isArray(e.value) ? e.value.length : 0, N = q.value ? te.value.length : M.value.length;
         return v === 0 ? null : !e.hasMoreItems && N > 0 && N === v ? i("all") : v;
       }
       return null;
-    }), Oe = r(
-      () => `${e.description ? f : ""} ${e.errorMessage ? O : ""}`.trim() || null
+    }), Ee = r(
+      () => [
+        e.description ? f : null,
+        B.value,
+        e.errorMessage ? O : null
+      ].filter(Boolean).join(" ") || null
     ), ae = r(() => {
       var v;
       return (v = d.value) == null ? void 0 : v.$el;
-    }), { visibleDomOptions: se, updateVisibleDomOptions: H } = Fe(
+    }), { visibleDomOptions: se, updateVisibleDomOptions: H } = Ke(
       ae,
       V,
       ne
     ), le = () => {
-      L.value || (u.value = !0, S(() => {
+      L.value || (c.value = !0, S(() => {
         H();
       }));
     }, z = () => {
-      u.value = !1;
+      c.value = !1;
     }, ie = () => {
-      L.value || (u.value = !u.value, S(() => {
+      L.value || (c.value = !c.value, S(() => {
         H();
-      }), q.value && (T.value = ""));
-    }, Ee = () => {
-      q.value && (T.value = ""), u.value && (u.value = !1, d.value.onOutsideDropdownClick());
+      }), j.value && (T.value = ""));
+    }, De = () => {
+      j.value && (T.value = ""), c.value && (c.value = !1, d.value.onOutsideDropdownClick());
     }, re = (v) => {
-      e.multiple || (T.value = "", u.value = !1), I(v), o("input", y.value);
+      e.multiple || (T.value = "", c.value = !1), I(v), o("input", y.value);
     }, de = () => {
       o(p.SHOW_MORE);
-    }, De = gt(
+    }, Be = ht(
       {
-        inputContainerRef: c,
+        inputContainerRef: u,
         optionsContainerRef: d,
         selectedValueIndex: ee,
-        isDropdownOpen: u,
+        isDropdownOpen: c,
         isDynamicFltering: w(e, "dynamicFiltering"),
         items: se,
         isMultiple: e.multiple
@@ -635,17 +639,17 @@ const wt = {
       ie,
       le,
       z
-    ), ce = ht(
+    ), ue = Ct(
       {
-        inputContainerRef: c,
-        isDropdownOpen: u
+        inputContainerRef: u,
+        isDropdownOpen: c
       },
       z
-    ), Be = {
+    ), Ie = {
       [p.CLOSE_DROPDOWN]: z,
       [p.SELECT]: re,
       [p.SHOW_MORE]: de,
-      ...ce
+      ...ue
     };
     e.error && fe(
       'BentoDropdown "error" property',
@@ -654,15 +658,15 @@ const wt = {
                             <bento-dropdown errorMessage="Error message text" />`,
       "2.0.0"
     ), e.size && fe('BentoDropdown "size" property', "Do not use. Only 'default' size should be used.", "2.0.0");
-    const ue = () => {
-      c.value.focus();
+    const ce = () => {
+      u.value.focus();
     };
     return t({
-      focus: ue
-    }), { __sfc: !0, attrs: n, slots: l, hasSlot: s, props: e, emit: o, t: i, inputContainerRef: c, inputContainerRefWrapper: m, optionsContainerRef: d, isDropdownOpen: u, dropdownOptionsContainerId: _, labelId: g, descriptionId: f, errorId: O, isReadOnly: L, cachedSelectedListboxOptions: x, cachedListboxSelectedValues: y, setCachedValues: I, ariaLabelAttribute: D, ariaLabel: B, label: k, computedAriaLabelFallbackMessage: U, computedAriaLabel: b, isInputComponent: h, computedSize: F, conditionalClasses: K, descriptionConditionalClasses: we, searchTerm: T, items: A, staticCategories: G, filteredItems: V, isSearching: q, displayValue: Le, selectedValueItem: xe, selectedValueIndex: ee, isMultiLevelSelect: j, flattenedItemsList: te, isTreePattern: oe, computedOptionRole: ne, additionalItemsSelected: Se, ariaDescribedBy: Oe, listboxRef: ae, visibleDomOptions: se, updateVisibleDomOptions: H, openDropdown: le, closeDropdown: z, toggleDropdown: ie, clickOutsideDropdown: Ee, onOptionSelected: re, emitShowMoreEvent: de, textboxKeyboardNavigationListeners: De, listboxKeyboardNavigationListeners: ce, listboxListeners: Be, focus: ue, BentoDropdownOptionsContainer: et, BentoTypography: Re, ErrorMessage: qe, FieldLabel: Ve, vBentoClickOutsideDirective: Ue, vBentoKeyboardNavigationDirective: We };
+      focus: ce
+    }), { __sfc: !0, attrs: n, slots: l, hasSlot: s, props: e, emit: o, t: i, inputContainerRef: u, inputContainerRefWrapper: b, optionsContainerRef: d, isDropdownOpen: c, dropdownOptionsContainerId: _, labelId: g, descriptionId: f, errorId: O, isReadOnly: L, cachedSelectedListboxOptions: x, cachedListboxSelectedValues: y, setCachedValues: I, ariaLabelAttribute: D, ariaDescribedByAttribute: B, ariaLabel: F, label: U, computedAriaLabelFallbackMessage: m, computedAriaLabel: C, isInputComponent: A, computedSize: K, conditionalClasses: we, descriptionConditionalClasses: Le, searchTerm: T, items: M, staticCategories: G, filteredItems: V, isSearching: j, displayValue: xe, selectedValueItem: Se, selectedValueIndex: ee, isMultiLevelSelect: q, flattenedItemsList: te, isTreePattern: oe, computedOptionRole: ne, additionalItemsSelected: Oe, ariaDescribedBy: Ee, listboxRef: ae, visibleDomOptions: se, updateVisibleDomOptions: H, openDropdown: le, closeDropdown: z, toggleDropdown: ie, clickOutsideDropdown: De, onOptionSelected: re, emitShowMoreEvent: de, textboxKeyboardNavigationListeners: Be, listboxKeyboardNavigationListeners: ue, listboxListeners: Ie, focus: ce, BentoDropdownOptionsContainer: tt, BentoTypography: Ae, ErrorMessage: qe, FieldLabel: je, vBentoClickOutsideDirective: Ve, vBentoKeyboardNavigationDirective: Ue };
   }
 });
-var Ot = function() {
+var Et = function() {
   var n;
   var t = this, o = t._self._c, e = t._self._setupProxy;
   return o("div", { directives: [{ name: "bento-click-outside-directive", rawName: "v-bento-click-outside-directive", value: e.clickOutsideDropdown, expression: "clickOutsideDropdown" }], staticClass: "b-dropdown", class: e.conditionalClasses }, [e.label ? o(e.FieldLabel, { attrs: { id: e.labelId, condensed: t.condensed, label: e.label, "tooltip-text": t.tooltipText, optional: t.optional, required: t.required } }) : t._e(), o("div", t._g({ directives: [{ name: "bento-keyboard-navigation-directive", rawName: "v-bento-keyboard-navigation-directive" }], ref: "inputContainerRefWrapper" }, e.textboxKeyboardNavigationListeners), [o(e.computedSize, { ref: "inputContainerRef", tag: "component", attrs: { condensed: t.condensed, value: e.searchTerm, "additional-items-selected": e.additionalItemsSelected, "aria-controls": e.dropdownOptionsContainerId, ariaExpanded: e.isDropdownOpen, "aria-labelledby": e.label ? e.labelId : null, "aria-describedby": e.ariaDescribedBy, "aria-label": e.computedAriaLabel, "aria-readonly": e.isReadOnly, readonly: e.isReadOnly, required: t.required, disabled: t.disabled, "display-value": e.displayValue, "dynamic-filtering": t.dynamicFiltering, "is-invalid": !!t.errorMessage || t.error, multiple: t.multiple, open: e.isDropdownOpen, "selected-value-item": e.isInputComponent ? void 0 : e.selectedValueItem, "show-slot-content-in-multiple": t.showSlotContentInMultiple }, on: { input: function(l) {
@@ -678,20 +682,20 @@ var Ot = function() {
   })], null, !0) }, e.listboxListeners)) : t._e(), t.errorMessage ? o(e.ErrorMessage, { staticClass: "b-dropdown__error-message", attrs: { id: e.errorId, "error-message": t.errorMessage } }) : t._e(), t.description || e.hasSlot("description") ? o(e.BentoTypography, { staticClass: "b-dropdown__description", class: e.descriptionConditionalClasses, attrs: { id: e.descriptionId, el: "span" } }, [t._t("description", function() {
     return [t._v(" " + t._s(t.description) + " ")];
   })], 2) : t._e()], 1);
-}, Et = [], Dt = /* @__PURE__ */ $(
-  St,
+}, Dt = [], Bt = /* @__PURE__ */ k(
   Ot,
   Et,
+  Dt,
   !1,
   null,
-  "1c4a9144"
+  "f5d69bb1"
 );
-const Jt = Dt.exports;
+const Yt = Bt.exports;
 export {
-  Jt as B,
-  jt as I,
-  Lt as a,
-  Ht as b,
-  Ct as u
+  Yt as B,
+  Ht as I,
+  xt as a,
+  Jt as b,
+  wt as u
 };
-//# sourceMappingURL=dropdown.DQbTuKc5.js.map
+//# sourceMappingURL=dropdown.B4urOhfH.js.map