@adyen/bento-vue2 1.49.0 → 1.50.0

package/dist/chunks/{dropdown.BBHNOorv.js → dropdown.CC1i41NX.js}

@@ -1,19 +1,19 @@
-import { ref as x, watch as re, computed as u, defineComponent as I, useSlots as de, toRefs as ce, nextTick as E, useAttrs as Oe, toRef as O, inject as Ce } from "vue";
-import { d as ae, B as $e } from "./typography.J1v_SPG3.js";
-import { a as K, b as N, c as Ee, B as A, D as De } from "./dropdown-default-textbox.CC9Z_RFG.js";
-import { n as k } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
-import { s as z } from "./events.CMzGybJJ.js";
-import { g as M } from "./generate-uid.NJ8tVoha.js";
+import { ref as h, watch as ce, computed as p, defineComponent as T, useSlots as ue, toRefs as pe, nextTick as E, useAttrs as Le, toRef as x, inject as Oe } from "vue";
+import { d as le, B as Ee } from "./typography.J1v_SPG3.js";
+import { a as W, b as $, c as De, B as M, D as Be } from "./dropdown-default-textbox.CC9Z_RFG.js";
+import { n as P } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import { s as j } from "./events.CMzGybJJ.js";
+import { g as k } from "./generate-uid.NJ8tVoha.js";
 import { u as Ie } from "./aria-label.CaUURpnB.js";
-import { u as U } from "./i18n.BQkEbtPM.js";
-import { u as Be } from "./use-form-layout-loading.D3lALhtC.js";
+import { u as H } from "./i18n.BQkEbtPM.js";
+import { u as Te } from "./use-form-layout-loading.D3lALhtC.js";
 import { u as Re } from "./use-has-slot.C9lQZ6nz.js";
-import { a as c, b as W, B as j, c as Te, u as Ne } from "./use-cached-selected-values.C5gHa-dC.js";
-import { B as $, a as Ae } from "./keyboard-navigation.pB8weElW.js";
+import { a as u, b as U, B as q, c as Ae, u as Ne } from "./use-cached-selected-values.a_5Iw6Dh.js";
+import { B as O, a as $e } from "./keyboard-navigation.pB8weElW.js";
 import { B as Me } from "./directive.O3yEdalv.js";
 import { F as ke, E as Pe } from "./error-message.xTNEaNn8.js";
-import { P as ne } from "./popper-container.CsW4R0-t.js";
-import { B as Fe } from "./popover.BQGNMbQN.js";
+import { P as ie } from "./popper-container.CsW4R0-t.js";
+import { B as Fe } from "./popover.CRdrSmFW.js";
 import "../assets/dropdown.css";
 const Ke = {
   "en-US": {
@@ -29,61 +29,61 @@ const Ke = {
     apply: "Aplicar",
     cancel: "Cancelar"
   }
-}, ze = (a, t, o, e) => {
-  const s = x(a.value), { t: i } = U();
-  re(a, () => {
-    s.value = a.value;
+}, ze = (n, t, o, e) => {
+  const a = h(n.value), { t: i } = H();
+  ce(n, () => {
+    a.value = n.value;
   });
-  const n = u(
-    () => JSON.stringify(s.value) === JSON.stringify(a.value)
-  ), l = () => {
-    e(c.SELECT, s.value), e(c.CLOSE_DROPDOWN);
-  }, r = () => {
-    s.value = a.value, e(c.CLOSE_DROPDOWN);
-  }, b = () => {
-    o.value && t.value && (s.value = a.value);
-  }, p = u(() => [
+  const s = p(
+    () => JSON.stringify(a.value) === JSON.stringify(n.value)
+  ), r = () => {
+    e(u.SELECT, a.value), e(u.CLOSE_DROPDOWN);
+  }, c = () => {
+    a.value = n.value, e(u.CLOSE_DROPDOWN);
+  }, m = () => {
+    o.value && t.value && (a.value = n.value);
+  }, l = p(() => [
     {
       title: i("apply"),
-      event: l,
-      disabled: n.value
+      event: r,
+      disabled: s.value
     },
     {
       title: i("cancel"),
-      event: r
+      event: c
     }
   ]), d = (y) => {
-    s.value = y, t.value || e(c.SELECT, y);
-  }, w = (y) => {
-    d(y), e(c.TAB);
+    a.value = y, t.value || e(u.SELECT, y);
+  }, C = (y) => {
+    d(y), e(u.TAB);
   }, g = (y) => {
-    d(y), e(c.ENTER);
-  }, v = (y) => {
-    d(y), e(c.SPACE);
-  }, C = () => {
-    r(), e(c.ESCAPE);
+    d(y), e(u.ENTER);
+  }, f = (y) => {
+    d(y), e(u.SPACE);
   }, L = () => {
-    e(c.SHOW_MORE);
+    c(), e(u.ESCAPE);
+  }, w = () => {
+    e(u.SHOW_MORE);
   }, S = {
-    [c.SELECT]: d,
-    [c.SHOW_MORE]: L,
-    [c.TAB]: w,
-    [c.SPACE]: v,
-    [c.ENTER]: g
+    [u.SELECT]: d,
+    [u.SHOW_MORE]: w,
+    [u.TAB]: C,
+    [u.SPACE]: f,
+    [u.ENTER]: g
   };
   return {
     // Values
-    actions: p,
-    internalSelectedValue: s,
+    actions: l,
+    internalSelectedValue: a,
     // Methods
     listeners: S,
-    onEscapeKey: C,
-    onOutsideDropdownClick: b
+    onEscapeKey: L,
+    onOutsideDropdownClick: m
   };
-}, We = I({
+}, We = T({
   i18n: { messages: Ke },
   name: "bento-dropdown-options-container"
-}), je = /* @__PURE__ */ I({
+}), je = /* @__PURE__ */ T({
   ...We,
   props: {
     /**
@@ -139,8 +139,8 @@ const Ke = {
      */
     lazyLoadType: {
       type: String,
-      default: j.AUTOMATIC,
-      validator: (a) => Object.values(j).includes(a)
+      default: q.AUTOMATIC,
+      validator: (n) => Object.values(q).includes(n)
     },
     /**
      * Indicates if new options are loading.
@@ -170,7 +170,7 @@ const Ke = {
      *
      * If enabled, hides the "Select all" checkbox in "multiple" mode.
      */
-    searching: W.props.searching,
+    searching: U.props.searching,
     /**
      * If enabled, dropdown will display non-selectable, static categories
      */
@@ -179,7 +179,7 @@ const Ke = {
      * Reference to the DOM element or Vue component for positioning
      * the Dropdown container.
      */
-    targetElement: { type: ne.props.targetElement.type, required: !0 },
+    targetElement: { type: ie.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.
@@ -190,15 +190,15 @@ const Ke = {
     }
   },
   emits: [],
-  setup(a, { expose: t, emit: o }) {
-    const e = a, s = de(), { selectedValue: i, multiple: n } = ce(e), l = x(null), { t: r } = U(), b = u(() => e.open && !e.disabled), p = u(() => r("noOptionsMatchThisSearch")), d = u(() => ({
+  setup(n, { expose: t, emit: o }) {
+    const e = n, a = ue(), { selectedValue: i, multiple: s } = pe(e), r = h(null), { t: c } = H(), m = p(() => e.open && !e.disabled), l = p(() => c("noOptionsMatchThisSearch")), d = p(() => ({
       "b-dropdown-options-container--single": !(e != null && e.multiple)
-    })), w = u(() => ({
+    })), C = p(() => ({
       "b-dropdown-options-container__listbox--single": !(e != null && e.multiple)
-    })), { actions: g, internalSelectedValue: v, listeners: C, onEscapeKey: L, onOutsideDropdownClick: S } = ze(i, n, b, o), y = u(() => e != null && e.multiple ? Fe : ne), f = u(() => {
-      var h;
-      const m = {
-        "min-width": `${(h = e == null ? void 0 : e.targetElement) == null ? void 0 : h.clientWidth}px`,
+    })), { actions: g, internalSelectedValue: f, listeners: L, onEscapeKey: w, onOutsideDropdownClick: S } = ze(i, s, m, o), y = p(() => e != null && e.multiple ? Fe : ie), D = p(() => {
+      var v;
+      const B = {
+        "min-width": `${(v = e == null ? void 0 : e.targetElement) == null ? void 0 : v.clientWidth}px`,
         "max-width": "min(500px, 95%)"
       };
       return e != null && e.multiple ? {
@@ -206,12 +206,12 @@ const Ke = {
         actions: g.value,
         divider: !0,
         fallbackPosition: ["top-start"],
-        id: M(`dropdown-options-${e.id}`),
+        id: k(`dropdown-options-${e.id}`),
         open: e.open,
         position: "bottom-start",
         style: {
           width: "auto",
-          ...m
+          ...B
         },
         targetElement: e.targetElement
       } : {
@@ -219,46 +219,46 @@ const Ke = {
         offset: [0, 8],
         position: "bottom-start",
         style: {
-          display: b.value ? "block" : "none",
-          ...m
+          display: m.value ? "block" : "none",
+          ...B
         },
         targetElement: e.targetElement
       };
     });
     return t({
       onOutsideDropdownClick: S
-    }), { __sfc: !0, slots: s, emit: o, props: e, selectedValue: i, multiple: n, dropdownOptionsListboxRef: l, t: r, isDropdownOpen: b, noResultsMessage: p, conditionalClasses: d, conditionalListboxClasses: w, actions: g, internalSelectedValue: v, listeners: C, onEscapeKey: L, onOutsideDropdownClick: S, popperContainerOrPopoverComponent: y, popperContainerOrPopoverProps: f, BentoListbox: W };
+    }), { __sfc: !0, slots: a, emit: o, props: e, selectedValue: i, multiple: s, dropdownOptionsListboxRef: r, t: c, isDropdownOpen: m, noResultsMessage: l, conditionalClasses: d, conditionalListboxClasses: C, actions: g, internalSelectedValue: f, listeners: L, onEscapeKey: w, onOutsideDropdownClick: S, popperContainerOrPopoverComponent: y, popperContainerOrPopoverProps: D, BentoListbox: U };
   }
 });
 var Ue = 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, attrs: { "aria-label": t.ariaLabel } }, "component", e.popperContainerOrPopoverProps, !1), [o("div", { on: { keydown: function(s) {
-    return !s.type.indexOf("key") && t._k(s.keyCode, "esc", 27, s.key, ["Esc", "Escape"]) ? null : e.onEscapeKey.apply(null, arguments);
-  } } }, [o(e.BentoListbox, t._g({ ref: "dropdownOptionsListboxRef", staticClass: "b-dropdown-options-container__listbox", class: e.conditionalListboxClasses, attrs: { id: t.id, "aria-label": t.ariaLabel, "empty-state": t.emptyState, "is-option-disabled": t.isOptionDisabled, items: t.items, "selected-value": e.internalSelectedValue, multiple: e.multiple, "static-categories": t.staticCategories, "no-results-message": e.noResultsMessage, searching: t.searching, loading: t.loading, "lazy-load-type": t.lazyLoadType, "has-more-items": t.hasMoreItems, "virtual-scroll": t.virtualScroll }, scopedSlots: t._u([t._l(e.slots, function(s, i) {
-    return { key: i, fn: function(n) {
-      return [t._t(i, null, null, n)];
+  return o(e.popperContainerOrPopoverComponent, t._b({ tag: "component", staticClass: "b-dropdown-options-container", class: e.conditionalClasses, attrs: { "aria-label": t.ariaLabel } }, "component", e.popperContainerOrPopoverProps, !1), [o("div", { on: { keydown: function(a) {
+    return !a.type.indexOf("key") && t._k(a.keyCode, "esc", 27, a.key, ["Esc", "Escape"]) ? null : e.onEscapeKey.apply(null, arguments);
+  } } }, [o(e.BentoListbox, t._g({ ref: "dropdownOptionsListboxRef", staticClass: "b-dropdown-options-container__listbox", class: e.conditionalListboxClasses, attrs: { id: t.id, "aria-label": t.ariaLabel, "empty-state": t.emptyState, "is-option-disabled": t.isOptionDisabled, items: t.items, "selected-value": e.internalSelectedValue, multiple: e.multiple, "static-categories": t.staticCategories, "no-results-message": e.noResultsMessage, searching: t.searching, loading: t.loading, "lazy-load-type": t.lazyLoadType, "has-more-items": t.hasMoreItems, "virtual-scroll": t.virtualScroll }, scopedSlots: t._u([t._l(e.slots, function(a, i) {
+    return { key: i, fn: function(s) {
+      return [t._t(i, null, null, s)];
     } };
   })], null, !0) }, e.listeners))], 1)]);
-}, He = [], qe = /* @__PURE__ */ k(
+}, qe = [], He = /* @__PURE__ */ P(
   je,
   Ue,
-  He,
+  qe,
   !1,
   null,
   "b7543bfc"
 );
-const Ve = qe.exports;
-let le = 0;
-const Je = {
+const Je = He.exports;
+let re = 0;
+const Ve = {
   beforeCreate() {
-    this.uuid = le.toString(), le += 1;
+    this.uuid = re.toString(), re += 1;
   }
 };
 var Ye = 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: "#00112C", d: "M5.00011 5.43922L8.00011 8.43922L11.0001 5.43922L12.0608 6.49988L8.00011 10.5605L3.93945 6.49988L5.00011 5.43922Z" } })]);
-}, Ze = [], Qe = /* @__PURE__ */ k(
-  Je,
+}, Ze = [], Qe = /* @__PURE__ */ P(
+  Ve,
   Ye,
   Ze,
   !1,
@@ -266,16 +266,16 @@ var Ye = function() {
   null
 );
 const Xe = Qe.exports;
-let ie = 0;
+let de = 0;
 const Ge = {
   beforeCreate() {
-    this.uuid = ie.toString(), ie += 1;
+    this.uuid = de.toString(), de += 1;
   }
 };
 var et = 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: "#00112C", d: "M10.9999 10.5608L7.9999 7.56077L4.9999 10.5608L3.93924 9.50011L7.9999 5.43945L12.0606 9.50011L10.9999 10.5608Z" } })]);
-}, tt = [], ot = /* @__PURE__ */ k(
+}, tt = [], ot = /* @__PURE__ */ P(
   Ge,
   et,
   tt,
@@ -283,11 +283,11 @@ var et = function() {
   null,
   null
 );
-const st = ot.exports, at = I({
+const at = ot.exports, nt = T({
   name: "dropdown-small-textbox",
   inheritAttrs: !1
-}), nt = /* @__PURE__ */ I({
-  ...at,
+}), st = /* @__PURE__ */ T({
+  ...nt,
   props: {
     /**
      * The number of additional items that have been selected in the dropdown.
@@ -347,33 +347,33 @@ const st = ot.exports, at = I({
     value: { type: String, default: "" }
   },
   emits: ["clear", "close", "input", "keydown", "open"],
-  setup(a, { expose: t, emit: o }) {
-    const e = a, s = x(null), i = u(() => ({
-      [`b-dropdown-small-textbox--${K.DISABLED}`]: e.disabled,
-      [`b-dropdown-small-textbox--${K.READONLY}`]: e.readonly,
-      [`b-dropdown-small-textbox--${K.OPENED}`]: e.open
-    })), n = u(() => e.open && !e.disabled && !e.readonly), l = (v) => {
-      o("input", v);
-    }, r = (v) => {
-      o("keydown", v);
-    }, b = (v) => {
-      z(v), o("open");
-    }, p = (v) => {
-      z(v), o("close");
-    }, d = (v) => {
-      z(v), o("clear");
-    }, w = {
-      [N.INPUT]: l,
-      [N.OPEN]: b,
-      [N.CLOSE]: p,
-      [N.CLEAR]: d,
-      [N.KEYDOWN]: r
+  setup(n, { expose: t, emit: o }) {
+    const e = n, a = h(null), i = p(() => ({
+      [`b-dropdown-small-textbox--${W.DISABLED}`]: e.disabled,
+      [`b-dropdown-small-textbox--${W.READONLY}`]: e.readonly,
+      [`b-dropdown-small-textbox--${W.OPENED}`]: e.open
+    })), s = p(() => e.open && !e.disabled && !e.readonly), r = (f) => {
+      o("input", f);
+    }, c = (f) => {
+      o("keydown", f);
+    }, m = (f) => {
+      j(f), o("open");
+    }, l = (f) => {
+      j(f), o("close");
+    }, d = (f) => {
+      j(f), o("clear");
+    }, C = {
+      [$.INPUT]: r,
+      [$.OPEN]: m,
+      [$.CLOSE]: l,
+      [$.CLEAR]: d,
+      [$.KEYDOWN]: c
     }, g = () => {
-      s.value.focus();
+      a.value.focus();
     };
     return t({
       focus: g
-    }), { __sfc: !0, emit: o, props: e, baseTextbox: s, conditionalClasses: i, isDropdownOpen: n, onInput: l, onKeyDown: r, openDropdown: b, closeDropdown: p, clearValue: d, listeners: w, focus: g, BentoDropdownSize: A, DropdownBaseTextbox: Ee, ChevronDownSmallIcon: Xe, ChevronUpSmallIcon: st };
+    }), { __sfc: !0, emit: o, props: e, baseTextbox: a, conditionalClasses: i, isDropdownOpen: s, onInput: r, onKeyDown: c, openDropdown: m, closeDropdown: l, clearValue: d, listeners: C, focus: g, BentoDropdownSize: M, DropdownBaseTextbox: De, ChevronDownSmallIcon: Xe, ChevronUpSmallIcon: at };
   }
 });
 var lt = function() {
@@ -381,116 +381,116 @@ var lt = function() {
   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);
-}, it = [], rt = /* @__PURE__ */ k(
-  nt,
+}, it = [], rt = /* @__PURE__ */ P(
+  st,
   lt,
   it,
   !1,
   null,
   "d0e53db8"
 );
-const dt = rt.exports, ct = (a, t) => t.value.reduce((o, e) => {
+const dt = rt.exports, ct = (n, t) => t.value.reduce((o, e) => {
   if (e.items) {
-    const s = e.items.filter(
-      (n) => a.value.find((l) => l.value === n.value)
+    const a = e.items.filter(
+      (s) => n.value.find((r) => r.value === s.value)
     );
-    s.length === e.items.length ? o.push(e.displayValue ?? e.label) : s.forEach(({ label: n, displayValue: l }) => o.push(l ?? n));
+    a.length === e.items.length ? o.push(e.displayValue ?? e.label) : a.forEach(({ label: s, displayValue: r }) => o.push(r ?? s));
   }
-  return a.value.find((s) => s.value === e.value) && o.push(e.displayValue ?? e.label), o;
-}, []).join(", "), ut = ({ items: a, placeholder: t, selectedValues: o, isMultiSelect: e }) => {
-  const s = u(
-    () => e.value && a.value.find((n) => {
-      var l;
-      return (l = n.items) == null ? void 0 : l.length;
+  return n.value.find((a) => a.value === e.value) && o.push(e.displayValue ?? e.label), o;
+}, []).join(", "), ut = ({ items: n, placeholder: t, selectedValues: o, isMultiSelect: e }) => {
+  const a = p(
+    () => e.value && n.value.find((s) => {
+      var r;
+      return (r = s.items) == null ? void 0 : r.length;
     })
   );
-  return u(() => o.value.length ? s.value ? ct(o, a) : o.value.map(({ label: n, displayValue: l }) => l ?? n).join(", ") : t.value || null);
-}, ue = (a) => {
+  return p(() => o.value.length ? a.value ? ct(o, n) : o.value.map(({ label: s, displayValue: r }) => r ?? s).join(", ") : t.value || null);
+}, fe = (n) => {
   var t;
-  (t = a.value.$children) == null || t[0].$refs.textbox.focus();
+  (t = n.value.$children) == null || t[0].$refs.textbox.focus();
 }, pt = ({
-  inputContainerRef: a,
+  inputContainerRef: n,
   optionsContainerRef: t,
   selectedValueIndex: o,
   isDropdownOpen: e,
-  isDynamicFltering: s,
+  isDynamicFltering: a,
   items: i,
-  isMultiple: n
-}, l, r, b) => {
-  const p = ({ detail: f }) => {
-    f.preventDefault(), e.value || r(), E(() => {
-      var m;
-      n ? (m = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || m[0].$el.focus() : (t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.setListboxFocusedIndex(
-        o.value
-      ), t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.listboxItemRef[o.value].$el.focus());
+  isMultiple: s
+}, r, c, m) => {
+  const l = async (v) => {
+    var _, F;
+    a.value && await E(), (F = (_ = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef) == null ? void 0 : _.$el.querySelectorAll('[role="option"]')[v]) == null || F.focus();
+  }, d = (v) => {
+    var _;
+    return (_ = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef) == null ? void 0 : _.setListboxFocusedIndex(
+      v
+    );
+  }, C = ({ detail: v }) => {
+    v.preventDefault(), e.value || c(), E(() => {
+      s ? l(0) : (d(o.value), l(o.value));
     });
-  }, d = ({ detail: f }) => {
-    f.preventDefault(), e.value || r(), E(() => {
-      t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.setListboxFocusedIndex(
-        o.value
-      ), t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.listboxItemRef[o.value].$el.focus();
+  }, g = ({ detail: v }) => {
+    v.preventDefault(), e.value || c(), E(() => {
+      d(o.value), l(o.value);
     });
-  }, w = () => {
-    e.value || (r(), E(() => {
-      var f, m;
-      if (n) {
-        const h = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children;
-        (f = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || f[h.length - 1].$children[i.length - 1].$el.focus();
+  }, f = () => {
+    e.value || (c(), E(() => {
+      var v;
+      if (s) {
+        const _ = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children;
+        (v = _ == null ? void 0 : _[_.length - 1].$el.querySelectorAll('[role="option"]')[i.length - 1]) == null || v.focus();
       } else
-        (m = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || m[i.length - 1].$el.focus();
+        d(i.length - 1), l(i.length - 1);
     }));
-  }, g = () => {
-    e.value && (b(), ue(a));
-  }, v = () => {
-    e.value && b();
-  }, C = () => {
-    e.value || r(), E(() => {
-      var f;
-      (f = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || f[0].$el.focus();
+  }, L = () => {
+    e.value && (m(), fe(n));
+  }, w = () => {
+    e.value && m();
+  }, S = () => {
+    e.value || c(), E(() => {
+      l(0);
     });
-  }, L = ({ detail: f }) => {
-    f.preventDefault(), l(), e.value && E(() => {
-      var m, h;
-      n ? (m = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || m[0].$el.focus() : (h = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || h[o.value].$el.focus();
+  }, y = ({ detail: v }) => {
+    v.preventDefault(), r(), e.value && E(() => {
+      s ? l(0) : (d(o.value), l(o.value));
     });
-  }, S = () => {
-    l(), e.value && E(() => {
-      var f, m;
-      n ? (f = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || f[0].$el.focus() : (m = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || m[o.value].$el.focus();
+  }, D = () => {
+    r(), e.value && E(() => {
+      s ? l(0) : (d(o.value), l(o.value));
     });
   };
-  return u(() => ({
-    ...s.value ? {} : { [$.SPACE]: L },
-    [$.ENTER]: S,
-    [$.ARROW_DOWN]: p,
-    [$.ARROW_UP]: d,
-    [$.END]: w,
-    [$.ESCAPE]: g,
-    [$.HOME]: C,
-    [$.TAB]: v
+  return p(() => ({
+    ...a.value ? {} : { [O.SPACE]: y },
+    [O.ENTER]: D,
+    [O.ARROW_DOWN]: C,
+    [O.ARROW_UP]: g,
+    [O.END]: f,
+    [O.ESCAPE]: L,
+    [O.HOME]: S,
+    [O.TAB]: w
   }));
-}, ft = ({ inputContainerRef: a, isDropdownOpen: t }, o) => {
+}, ft = ({ inputContainerRef: n, isDropdownOpen: t }, o) => {
   const e = () => {
     t.value && o(), E(() => {
-      ue(a);
+      fe(n);
     });
   };
   return {
-    [c.ENTER]: e,
-    [c.ESCAPE]: e,
-    [c.TAB]: e,
-    [c.SPACE]: e
+    [u.ENTER]: e,
+    [u.ESCAPE]: e,
+    [u.TAB]: e,
+    [u.SPACE]: e
   };
 };
-function vt(a, t, o, e) {
-  const s = x(a), i = x(t), n = (r, b = []) => b.flatMap((p) => p.label.toLocaleLowerCase().includes(r) ? e != null && e.value && p.items ? [...n(r, p.items)] : [p, ...n(r, p.items)] : p.items ? [...n(r, p.items)] : []);
-  return re(s, () => {
-    o !== void 0 && o(s.value);
-  }), u(() => {
-    if (!s.value || o !== void 0)
+function vt(n, t, o, e) {
+  const a = h(n), i = h(t), s = (c, m = []) => m.flatMap((l) => l.label.toLocaleLowerCase().includes(c) ? e != null && e.value && l.items ? [...s(c, l.items)] : [l, ...s(c, l.items)] : l.items ? [...s(c, l.items)] : []);
+  return ce(a, () => {
+    o !== void 0 && o(a.value);
+  }), p(() => {
+    if (!a.value || o !== void 0)
       return i.value;
-    const r = s.value.toLocaleLowerCase();
-    return n(r, i.value);
+    const c = a.value.toLocaleLowerCase();
+    return s(c, i.value);
   });
 }
 const mt = {
@@ -507,15 +507,15 @@ const mt = {
     all: "Todos",
     clearFilter: "Limpar filtro"
   }
-}, bt = Symbol("input field component injection key"), Pt = Symbol("input field hint injection key"), yt = I({
+}, yt = Symbol("input field component injection key"), Pt = Symbol("input field hint injection key"), bt = T({
   i18n: { messages: mt },
   name: "b-dropdown",
   components: {
-    DropdownInputDefault: De,
+    DropdownInputDefault: Be,
     DropdownInputSmall: dt
   }
-}), _t = /* @__PURE__ */ I({
-  ...yt,
+}), _t = /* @__PURE__ */ T({
+  ...bt,
   props: {
     /**
      * @deprecated from version 2.0.0. Use the aria-label attribute instead.
@@ -602,8 +602,8 @@ const mt = {
      */
     lazyLoadType: {
       type: String,
-      default: W.props.lazyLoadType.default,
-      validator: (a) => Object.values(j).includes(a)
+      default: U.props.lazyLoadType.default,
+      validator: (n) => Object.values(q).includes(n)
     },
     /*
      * If enabled, the user will be able to select multiple items.
@@ -643,7 +643,7 @@ const mt = {
     size: {
       type: String,
       default: null,
-      validator: (a) => Object.values(A).includes(a)
+      validator: (n) => Object.values(M).includes(n)
     },
     /**
      * If enabled, dropdown will display non-selectable, static categories
@@ -672,131 +672,131 @@ const mt = {
     }
   },
   emits: ["input", "show-more"],
-  setup(a, { expose: t, emit: o }) {
+  setup(n, { expose: t, emit: o }) {
     var se;
-    const e = a, s = Oe(), i = de(), n = Re(i), { t: l } = U(), r = x(null), b = x(null), p = x(null), d = x(!1), w = M("bento-dropdown-options-container"), g = M("dropdown-label"), v = M("dropdown-description"), C = M("dropdown-error"), { isReadOnly: L } = Be(O(e, "readonly")), { cachedSelectedListboxOptions: S, cachedListboxSelectedValues: y, setCachedValues: f } = Te(
-      O(e, "items"),
-      O(e, "value"),
-      O(e, "multiple")
-    ), m = x(s["aria-label"]), { ariaLabel: h, label: H } = ce(e), pe = Ie({
+    const e = n, a = Le(), i = ue(), s = Re(i), { t: r } = H(), c = h(null), m = h(null), l = h(null), d = h(!1), C = k("bento-dropdown-options-container"), g = k("dropdown-label"), f = k("dropdown-description"), L = k("dropdown-error"), { isReadOnly: w } = Te(x(e, "readonly")), { cachedSelectedListboxOptions: S, cachedListboxSelectedValues: y, setCachedValues: D } = Ae(
+      x(e, "items"),
+      x(e, "value"),
+      x(e, "multiple")
+    ), B = h(a["aria-label"]), { ariaLabel: v, label: _ } = pe(e), F = Ie({
       // TODO: take ariaLabel ref away when aria-label prop is removed
-      ariaLabel: h || m,
-      label: H,
-      defaultFallback: l("ariaLabelFallback")
-    }), q = e.size === A.SMALL || Ce(bt, !1), fe = u(() => q ? A.SMALL : A.DEFAULT), ve = u(() => ({
+      ariaLabel: v || B,
+      label: _,
+      defaultFallback: r("ariaLabelFallback")
+    }), J = e.size === M.SMALL || Oe(yt, !1), ve = p(() => J ? M.SMALL : M.DEFAULT), me = p(() => ({
       "b-dropdown--condensed": e.condensed
-    })), me = u(() => ({
+    })), ye = p(() => ({
       "b-dropdown__description--error": !!e.errorMessage
-    })), D = x(""), B = O(e, "items"), V = O(e, "staticCategories"), be = vt(D, B, (se = e == null ? void 0 : e.search) == null ? void 0 : se.searchEvent, V), F = u(() => e.dynamicFiltering && !!D.value), ye = ut({
-      items: B,
-      placeholder: O(e, "placeholder"),
-      isMultiSelect: O(e, "multiple"),
+    })), I = h(""), R = x(e, "items"), V = x(e, "staticCategories"), Y = vt(I, R, (se = e == null ? void 0 : e.search) == null ? void 0 : se.searchEvent, V), z = p(() => e.dynamicFiltering && !!I.value), be = ut({
+      items: R,
+      placeholder: x(e, "placeholder"),
+      isMultiSelect: x(e, "multiple"),
       selectedValues: S
-    }), _e = u(() => {
+    }), _e = p(() => {
       if (e != null && e.multiple && Array.isArray(e.value))
         return e.items.filter(
-          ({ value: _ }) => (e == null ? void 0 : e.value) && (e == null ? void 0 : e.value).includes(_)
+          ({ value: b }) => (e == null ? void 0 : e.value) && (e == null ? void 0 : e.value).includes(b)
         );
       if (!e.multiple && e.staticCategories) {
-        const _ = e.items.find(
-          (T) => T.items.some((Se) => Se.value === e.value)
+        const b = e.items.find(
+          (N) => N.items.some((xe) => xe.value === e.value)
         );
-        return _ ? _.items.find((T) => T.value === e.value) : null;
+        return b ? b.items.find((N) => N.value === e.value) : null;
       }
-      return e.items.find(({ value: _ }) => _ === (e == null ? void 0 : e.value));
-    }), J = u(() => {
-      const _ = e.items.findIndex(({ value: R }) => e.value === R);
-      return _ > 0 ? _ : 0;
-    }), { isMultiLevelSelect: Y, flattenedItemsList: Z } = Ne(B), ge = u(() => {
-      var _;
+      return e.items.find(({ value: b }) => b === (e == null ? void 0 : e.value));
+    }), Z = p(() => {
+      const b = Y.value.findIndex(({ value: A }) => e.value === A);
+      return b > 0 ? b : 0;
+    }), { isMultiLevelSelect: Q, flattenedItemsList: X } = Ne(R), ge = p(() => {
+      var b;
       if (e.multiple) {
-        const R = (_ = e == null ? void 0 : e.value) == null ? void 0 : _.length, T = Y.value ? Z.value.length : B.value.length;
-        return !e.hasMoreItems && T === R ? l("all") : R;
+        const A = (b = e == null ? void 0 : e.value) == null ? void 0 : b.length, N = Q.value ? X.value.length : R.value.length;
+        return !e.hasMoreItems && N === A ? r("all") : A;
       }
       return null;
-    }), xe = u(
-      () => `${e.description ? v : ""} ${e.errorMessage ? C : ""}`.trim() || null
-    ), Q = () => {
-      L.value || (d.value = !0);
-    }, P = () => {
+    }), he = p(
+      () => `${e.description ? f : ""} ${e.errorMessage ? L : ""}`.trim() || null
+    ), G = () => {
+      w.value || (d.value = !0);
+    }, K = () => {
       d.value = !1;
-    }, X = () => {
-      L.value || (d.value = !d.value, F.value && (D.value = ""));
-    }, he = () => {
-      F.value && (D.value = ""), d.value && (d.value = !1, p.value.onOutsideDropdownClick());
-    }, G = (_) => {
-      e.multiple || (D.value = "", d.value = !1), f(_), o("input", y.value);
     }, ee = () => {
-      o(c.SHOW_MORE);
+      w.value || (d.value = !d.value, z.value && (I.value = ""));
+    }, Ce = () => {
+      z.value && (I.value = ""), d.value && (d.value = !1, l.value.onOutsideDropdownClick());
+    }, te = (b) => {
+      e.multiple || (I.value = "", d.value = !1), D(b), o("input", y.value);
+    }, oe = () => {
+      o(u.SHOW_MORE);
     }, we = pt(
       {
-        inputContainerRef: r,
-        optionsContainerRef: p,
-        selectedValueIndex: J,
+        inputContainerRef: c,
+        optionsContainerRef: l,
+        selectedValueIndex: Z,
         isDropdownOpen: d,
-        isDynamicFltering: O(e, "dynamicFiltering"),
+        isDynamicFltering: x(e, "dynamicFiltering"),
         items: e.items,
         isMultiple: e.multiple
       },
-      X,
-      Q,
-      P
-    ), te = ft(
+      ee,
+      G,
+      K
+    ), ae = ft(
       {
-        inputContainerRef: r,
+        inputContainerRef: c,
         isDropdownOpen: d
       },
-      P
-    ), Le = {
-      [c.CLOSE_DROPDOWN]: P,
-      [c.SELECT]: G,
-      [c.SHOW_MORE]: ee,
-      ...te
+      K
+    ), Se = {
+      [u.CLOSE_DROPDOWN]: K,
+      [u.SELECT]: te,
+      [u.SHOW_MORE]: oe,
+      ...ae
     };
-    e.error && ae(
+    e.error && le(
       'BentoDropdown "error" property',
       `Use the BentoDropdown "errorMessage" property instead to indicate that there is a modifier error.
                         Having the field as "undefined" will hide/remove the error.
                         <bento-dropdown errorMessage="Error message text" />`,
       "2.0.0"
-    ), e.size && ae('BentoDropdown "size" property', "Do not use. Only 'default' size should be used.", "2.0.0");
-    const oe = () => {
-      r.value.focus();
+    ), e.size && le('BentoDropdown "size" property', "Do not use. Only 'default' size should be used.", "2.0.0");
+    const ne = () => {
+      c.value.focus();
     };
     return t({
-      focus: oe
-    }), { __sfc: !0, attrs: s, slots: i, hasSlot: n, props: e, emit: o, t: l, inputContainerRef: r, inputContainerRefWrapper: b, optionsContainerRef: p, isDropdownOpen: d, dropdownOptionsContainerId: w, labelId: g, descriptionId: v, errorId: C, isReadOnly: L, cachedSelectedListboxOptions: S, cachedListboxSelectedValues: y, setCachedValues: f, ariaLabelAttribute: m, ariaLabel: h, label: H, computedAriaLabel: pe, isInputComponent: q, size: fe, conditionalClasses: ve, descriptionConditionalClasses: me, searchTerm: D, items: B, staticCategories: V, filteredItems: be, isSearching: F, displayValue: ye, selectedValueItem: _e, selectedValueIndex: J, isMultiLevelSelect: Y, flattenedItemsList: Z, additionalItemsSelected: ge, ariaDescribedBy: xe, openDropdown: Q, closeDropdown: P, toggleDropdown: X, clickOutsideDropdown: he, onOptionSelected: G, emitShowMoreEvent: ee, textboxKeyboardNavigationListeners: we, listboxKeyboardNavigationListeners: te, listboxListeners: Le, focus: oe, BentoDropdownOptionsContainer: Ve, BentoTypography: $e, ErrorMessage: Pe, FieldLabel: ke, vBentoClickOutsideDirective: Me, vBentoKeyboardNavigationDirective: Ae };
+      focus: ne
+    }), { __sfc: !0, attrs: a, slots: i, hasSlot: s, props: e, emit: o, t: r, inputContainerRef: c, inputContainerRefWrapper: m, optionsContainerRef: l, isDropdownOpen: d, dropdownOptionsContainerId: C, labelId: g, descriptionId: f, errorId: L, isReadOnly: w, cachedSelectedListboxOptions: S, cachedListboxSelectedValues: y, setCachedValues: D, ariaLabelAttribute: B, ariaLabel: v, label: _, computedAriaLabel: F, isInputComponent: J, size: ve, conditionalClasses: me, descriptionConditionalClasses: ye, searchTerm: I, items: R, staticCategories: V, filteredItems: Y, isSearching: z, displayValue: be, selectedValueItem: _e, selectedValueIndex: Z, isMultiLevelSelect: Q, flattenedItemsList: X, additionalItemsSelected: ge, ariaDescribedBy: he, openDropdown: G, closeDropdown: K, toggleDropdown: ee, clickOutsideDropdown: Ce, onOptionSelected: te, emitShowMoreEvent: oe, textboxKeyboardNavigationListeners: we, listboxKeyboardNavigationListeners: ae, listboxListeners: Se, focus: ne, BentoDropdownOptionsContainer: Je, BentoTypography: Ee, ErrorMessage: Pe, FieldLabel: ke, vBentoClickOutsideDirective: Me, vBentoKeyboardNavigationDirective: $e };
   }
 });
 var gt = function() {
-  var s;
+  var a;
   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.size, { ref: "inputContainerRef", tag: "component", attrs: { condensed: t.condensed, value: e.searchTerm, "additional-items-selected": e.additionalItemsSelected, ariaControls: 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, 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(i) {
     e.searchTerm = i;
-  }, open: e.toggleDropdown, close: e.toggleDropdown }, scopedSlots: t._u([t._l(e.slots, function(i, n) {
-    return { key: n, fn: function(l) {
-      return [t._t(n, null, null, l)];
+  }, open: e.toggleDropdown, close: e.toggleDropdown }, scopedSlots: t._u([t._l(e.slots, function(i, s) {
+    return { key: s, fn: function(r) {
+      return [t._t(s, null, null, r)];
     } };
-  })], null, !0) })], 1), e.inputContainerRef ? o(e.BentoDropdownOptionsContainer, t._g({ ref: "optionsContainerRef", attrs: { id: e.dropdownOptionsContainerId, "aria-label": e.computedAriaLabel, "empty-state": t.emptyState, "debounce-time": (s = t.search) == null ? void 0 : s.debounceTime, disabled: t.disabled, "is-option-disabled": t.isOptionDisabled, items: e.filteredItems, multiple: t.multiple, "static-categories": e.staticCategories, open: e.isDropdownOpen, "selected-value": e.cachedSelectedListboxOptions, searching: e.isSearching, "target-element": e.inputContainerRefWrapper, loading: t.loading, "has-more-items": t.hasMoreItems, "lazy-load-type": t.lazyLoadType, "virtual-scroll": t.virtualScroll }, scopedSlots: t._u([t._l(e.slots, function(i, n) {
-    return { key: n, fn: function(l) {
-      return [t._t(n, null, null, l)];
+  })], null, !0) })], 1), e.inputContainerRef ? o(e.BentoDropdownOptionsContainer, t._g({ ref: "optionsContainerRef", attrs: { id: e.dropdownOptionsContainerId, "aria-label": e.computedAriaLabel, "empty-state": t.emptyState, "debounce-time": (a = t.search) == null ? void 0 : a.debounceTime, disabled: t.disabled, "is-option-disabled": t.isOptionDisabled, items: e.filteredItems, multiple: t.multiple, "static-categories": e.staticCategories, open: e.isDropdownOpen, "selected-value": e.cachedSelectedListboxOptions, searching: e.isSearching, "target-element": e.inputContainerRefWrapper, loading: t.loading, "has-more-items": t.hasMoreItems, "lazy-load-type": t.lazyLoadType, "virtual-scroll": t.virtualScroll }, scopedSlots: t._u([t._l(e.slots, function(i, s) {
+    return { key: s, fn: function(r) {
+      return [t._t(s, null, null, r)];
     } };
   })], 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);
-}, xt = [], ht = /* @__PURE__ */ k(
+}, ht = [], Ct = /* @__PURE__ */ P(
   _t,
   gt,
-  xt,
+  ht,
   !1,
   null,
-  "fe533f08"
+  "de09bc83"
 );
-const Ft = ht.exports;
+const Ft = Ct.exports;
 export {
   Ft as B,
   Pt as I,
-  bt as a,
+  yt as a,
   vt as u
 };
-//# sourceMappingURL=dropdown.BBHNOorv.js.map
+//# sourceMappingURL=dropdown.CC1i41NX.js.map