@adyen/bento-vue2 1.76.2 → 1.77.0

package/dist/chunks/{dropdown.RxD2TqnP.js → dropdown.-3x2IBDg.js}

@@ -1,22 +1,23 @@
-import { ref as h, watch as X, 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 ve, B as Ae } from "./typography.hlOAxsEn.js";
+import { ref as h, watch as G, computed as r, defineComponent as R, useSlots as he, toRefs as we, nextTick as x, useAttrs as Ae, toRef as L, inject as Me } from "vue";
+import { d as Y, B as Pe } from "./typography.hlOAxsEn.js";
 import { g as $ } from "./generate-uid.NJ8tVoha.js";
-import { u as Me } from "./aria-label.CaUURpnB.js";
-import { u as G } from "./index.B6WW_F-J.js";
-import { a as p, b as Q, B as me, c as Pe, u as $e, d as ke } from "./use-cached-selected-values.BZd3CTeP.js";
-import { u as Fe } from "./use-form-layout-loading.D3lALhtC.js";
-import { a as Y, b as P, c as Ke, B as W, D as ze } from "./dropdown-default-textbox.yLeN0E2z.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.Auq-Pzho.js";
-import { P as be } from "./popper-container.agLYtGwv.js";
-import { h as He } from "./button-actions.B81vY51z.js";
+import { u as $e } from "./aria-label.CaUURpnB.js";
+import { u as ee } from "./index.B6WW_F-J.js";
+import { u as ke } from "./form-field.BBqLu-vs.js";
+import { a as p, b as X, B as be, c as Fe, u as Ke, d as ze } from "./use-cached-selected-values.BZd3CTeP.js";
+import { u as Ve } from "./use-form-layout-loading.D3lALhtC.js";
+import { a as Z, b as P, c as We, B as V, D as Ue } from "./dropdown-default-textbox.BCOVaw-a.js";
+import { u as je } from "./use-has-slot.C9lQZ6nz.js";
+import { B as E, a as qe } from "./keyboard-navigation.pB8weElW.js";
+import { B as He } from "./directive.Cbdox5VL.js";
+import { F as Je, E as Ye } from "./field-label.Auq-Pzho.js";
+import { P as ye } from "./popper-container.agLYtGwv.js";
+import { h as Ze } from "./button-actions.B81vY51z.js";
 import { n as k } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 /* empty css              */
-import { s as Z } from "./events.CMzGybJJ.js";
+import { s as Q } from "./events.CMzGybJJ.js";
 import "../assets/dropdown.css";
-const Je = {
+const Qe = {
   "en-US": {
     apply: "Apply",
     cancel: "Cancel",
@@ -30,62 +31,62 @@ const Je = {
     apply: "Aplicar",
     cancel: "Cancelar"
   }
-}, Ye = (a, t, o, e) => {
-  const n = h(a.value), { t: l } = G();
-  X(a, () => {
-    n.value = a.value;
+}, Xe = (n, t, o, e) => {
+  const a = h(n.value), { t: s } = ee();
+  G(n, () => {
+    a.value = n.value;
   });
-  const s = r(
-    () => JSON.stringify(n.value) === JSON.stringify(a.value)
+  const l = r(
+    () => JSON.stringify(a.value) === JSON.stringify(n.value)
   ), i = () => {
-    e(p.SELECT, n.value), e(p.CLOSE_DROPDOWN);
-  }, c = () => {
-    n.value = a.value, e(p.CLOSE_DROPDOWN);
-  }, b = () => {
-    o.value && t.value && (n.value = a.value);
-  }, d = r(() => [
+    e(p.SELECT, a.value), e(p.CLOSE_DROPDOWN);
+  }, f = () => {
+    a.value = n.value, e(p.CLOSE_DROPDOWN);
+  }, m = () => {
+    o.value && t.value && (a.value = n.value);
+  }, u = r(() => [
     {
-      title: l("apply"),
+      title: s("apply"),
       event: i,
-      disabled: s.value
+      disabled: l.value
     },
     {
-      title: l("cancel"),
-      event: c
+      title: s("cancel"),
+      event: f
     }
-  ]), u = (y) => {
-    n.value = y, t.value || e(p.SELECT, y);
-  }, _ = (y) => {
-    u(y), e(p.TAB);
-  }, g = (y) => {
-    u(y), e(p.ENTER);
-  }, v = (y) => {
-    u(y), e(p.SPACE);
+  ]), y = (d) => {
+    a.value = d, t.value || e(p.SELECT, d);
+  }, c = (d) => {
+    y(d), e(p.TAB);
+  }, g = (d) => {
+    y(d), e(p.ENTER);
+  }, b = (d) => {
+    y(d), e(p.SPACE);
+  }, S = () => {
+    f(), e(p.ESCAPE);
   }, O = () => {
-    c(), e(p.ESCAPE);
-  }, L = () => {
     e(p.SHOW_MORE);
-  }, x = {
-    [p.SELECT]: u,
-    [p.SHOW_MORE]: L,
-    [p.TAB]: _,
-    [p.SPACE]: v,
+  }, C = {
+    [p.SELECT]: y,
+    [p.SHOW_MORE]: O,
+    [p.TAB]: c,
+    [p.SPACE]: b,
     [p.ENTER]: g
   };
   return {
     // Values
-    actions: d,
-    internalSelectedValue: n,
+    actions: u,
+    internalSelectedValue: a,
     // Methods
-    listeners: x,
-    onEscapeKey: O,
-    onOutsideDropdownClick: b
+    listeners: C,
+    onEscapeKey: S,
+    onOutsideDropdownClick: m
   };
-}, Ze = R({
-  i18n: { messages: Je },
+}, Ge = R({
+  i18n: { messages: Qe },
   name: "bento-dropdown-options-container"
-}), Qe = /* @__PURE__ */ R({
-  ...Ze,
+}), et = /* @__PURE__ */ R({
+  ...Ge,
   props: {
     /**
      * Defines a string value that labels an interactive element.
@@ -144,8 +145,8 @@ const Je = {
      */
     lazyLoadType: {
       type: String,
-      default: me.AUTOMATIC,
-      validator: (a) => Object.values(me).includes(a)
+      default: be.AUTOMATIC,
+      validator: (n) => Object.values(be).includes(n)
     },
     /**
      * Indicates if new options are lazy loading.
@@ -175,7 +176,7 @@ const Je = {
      *
      * If enabled, hides the "Select all" checkbox in "multiple" mode.
      */
-    searching: Q.props.searching,
+    searching: X.props.searching,
     /**
      * If enabled, dropdown will display non-selectable, static categories
      */
@@ -184,7 +185,7 @@ const Je = {
      * Reference to the DOM element or Vue component for positioning
      * the Dropdown container.
      */
-    targetElement: { type: be.props.targetElement.type, required: !0 },
+    targetElement: { type: ye.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.
@@ -195,12 +196,12 @@ const Je = {
     }
   },
   emits: [],
-  setup(a, { expose: t, emit: o }) {
-    const e = a, n = ge(), { selectedValue: l, multiple: s } = he(e), i = h(null), { t: c } = G(), b = r(() => e.open && !e.disabled), d = r(() => c("noOptionsMatchThisSearch")), u = r(() => ({
+  setup(n, { expose: t, emit: o }) {
+    const e = n, a = he(), { selectedValue: s, multiple: l } = we(e), i = h(null), { t: f } = ee(), m = r(() => e.open && !e.disabled), u = r(() => f("noOptionsMatchThisSearch")), y = r(() => ({
       "b-dropdown-options-container--single": !(e != null && e.multiple)
-    })), _ = r(() => ({
+    })), c = r(() => ({
       "b-dropdown-options-container__listbox--single": !(e != null && e.multiple)
-    })), { actions: g, internalSelectedValue: v, listeners: O, onEscapeKey: L, onOutsideDropdownClick: x } = Ye(l, s, b, o), y = r(() => e != null && e.multiple ? He : be), I = r(() => {
+    })), { actions: g, internalSelectedValue: b, listeners: S, onEscapeKey: O, onOutsideDropdownClick: C } = Xe(s, l, m, o), d = r(() => e != null && e.multiple ? Ze : ye), I = r(() => {
       var B;
       const D = {
         "min-width": `${(B = e == null ? void 0 : e.targetElement) == null ? void 0 : B.clientWidth}px`,
@@ -225,75 +226,75 @@ const Je = {
         offset: [0, 8],
         position: "bottom-start",
         style: {
-          display: b.value ? "block" : "none",
+          display: m.value ? "block" : "none",
           ...D
         },
         targetElement: e.targetElement
       };
     });
     return t({
-      onOutsideDropdownClick: x
-    }), { __sfc: !0, slots: n, emit: o, props: e, selectedValue: l, multiple: s, dropdownOptionsListboxRef: i, t: c, isDropdownOpen: b, noResultsMessage: d, conditionalClasses: u, conditionalListboxClasses: _, actions: g, internalSelectedValue: v, listeners: O, onEscapeKey: L, onOutsideDropdownClick: x, popperContainerOrPopoverComponent: y, popperContainerOrPopoverProps: I, BentoListbox: Q };
+      onOutsideDropdownClick: C
+    }), { __sfc: !0, slots: a, emit: o, props: e, selectedValue: s, multiple: l, dropdownOptionsListboxRef: i, t: f, isDropdownOpen: m, noResultsMessage: u, conditionalClasses: y, conditionalListboxClasses: c, actions: g, internalSelectedValue: b, listeners: S, onEscapeKey: O, onOutsideDropdownClick: C, popperContainerOrPopoverComponent: d, popperContainerOrPopoverProps: I, BentoListbox: X };
   }
 });
-var Xe = function() {
+var tt = 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);
-  } } }, [o(e.BentoListbox, t._g({ ref: "dropdownOptionsListboxRef", staticClass: "b-dropdown-options-container__listbox", class: e.conditionalListboxClasses, attrs: { id: t.id, "aria-label": t.ariaLabel, "component-loading": t.componentLoading, "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(n, l) {
-    return { key: l, fn: function(s) {
-      return [t._t(l, null, null, s)];
+  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(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, "component-loading": t.componentLoading, "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, s) {
+    return { key: s, fn: function(l) {
+      return [t._t(s, null, null, l)];
     } };
   })], null, !0) }, e.listeners))], 1)]);
-}, Ge = [], et = /* @__PURE__ */ k(
-  Qe,
-  Xe,
-  Ge,
+}, ot = [], at = /* @__PURE__ */ k(
+  et,
+  tt,
+  ot,
   !1,
   null,
   "ddc50615"
 );
-const tt = et.exports;
-let ye = 0;
-const ot = {
+const nt = at.exports;
+let _e = 0;
+const lt = {
   beforeCreate() {
-    this.uuid = ye.toString(), ye += 1;
+    this.uuid = _e.toString(), _e += 1;
   }
 };
-var nt = function() {
+var st = 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" } })]);
-}, at = [], st = /* @__PURE__ */ k(
-  ot,
-  nt,
-  at,
+}, it = [], rt = /* @__PURE__ */ k(
+  lt,
+  st,
+  it,
   !1,
   null,
   null
 );
-const lt = st.exports;
-let _e = 0;
-const it = {
+const dt = rt.exports;
+let ge = 0;
+const ut = {
   beforeCreate() {
-    this.uuid = _e.toString(), _e += 1;
+    this.uuid = ge.toString(), ge += 1;
   }
 };
-var rt = function() {
+var ct = 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" } })]);
-}, dt = [], ut = /* @__PURE__ */ k(
-  it,
-  rt,
-  dt,
+}, pt = [], ft = /* @__PURE__ */ k(
+  ut,
+  ct,
+  pt,
   !1,
   null,
   null
 );
-const ct = ut.exports, pt = R({
+const vt = ft.exports, mt = R({
   name: "dropdown-small-textbox",
   inheritAttrs: !1
-}), ft = /* @__PURE__ */ R({
-  ...pt,
+}), bt = /* @__PURE__ */ R({
+  ...mt,
   props: {
     /**
      * The number of additional items that have been selected in the dropdown.
@@ -353,134 +354,134 @@ const ct = ut.exports, pt = R({
     value: { type: String, default: "" }
   },
   emits: ["clear", "close", "input", "keydown", "open"],
-  setup(a, { expose: t, emit: o }) {
-    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 = (v) => {
-      o("input", v);
-    }, c = (v) => {
-      o("keydown", v);
-    }, b = (v) => {
-      Z(v), o("open");
-    }, d = (v) => {
-      Z(v), o("close");
-    }, u = (v) => {
-      Z(v), o("clear");
-    }, _ = {
+  setup(n, { expose: t, emit: o }) {
+    const e = n, a = h(null), s = r(() => ({
+      [`b-dropdown-small-textbox--${Z.DISABLED}`]: e.disabled,
+      [`b-dropdown-small-textbox--${Z.READONLY}`]: e.readonly,
+      [`b-dropdown-small-textbox--${Z.OPENED}`]: e.open
+    })), l = r(() => e.open && !e.disabled && !e.readonly), i = (b) => {
+      o("input", b);
+    }, f = (b) => {
+      o("keydown", b);
+    }, m = (b) => {
+      Q(b), o("open");
+    }, u = (b) => {
+      Q(b), o("close");
+    }, y = (b) => {
+      Q(b), o("clear");
+    }, c = {
       [P.INPUT]: i,
-      [P.OPEN]: b,
-      [P.CLOSE]: d,
-      [P.CLEAR]: u,
-      [P.KEYDOWN]: c
+      [P.OPEN]: m,
+      [P.CLOSE]: u,
+      [P.CLEAR]: y,
+      [P.KEYDOWN]: f
     }, g = () => {
-      n.value.focus();
+      a.value.focus();
     };
     return t({
       focus: g
-    }), { __sfc: !0, emit: o, props: e, baseTextbox: n, conditionalClasses: l, isDropdownOpen: s, onInput: i, onKeyDown: c, openDropdown: b, closeDropdown: d, clearValue: u, listeners: _, focus: g, BentoDropdownSize: W, DropdownBaseTextbox: Ke, ChevronDownSmallIcon: lt, ChevronUpSmallIcon: ct };
+    }), { __sfc: !0, emit: o, props: e, baseTextbox: a, conditionalClasses: s, isDropdownOpen: l, onInput: i, onKeyDown: f, openDropdown: m, closeDropdown: u, clearValue: y, listeners: c, focus: g, BentoDropdownSize: V, DropdownBaseTextbox: We, ChevronDownSmallIcon: dt, ChevronUpSmallIcon: vt };
   }
 });
-var vt = function() {
+var yt = 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);
-}, mt = [], bt = /* @__PURE__ */ k(
-  ft,
-  vt,
-  mt,
+}, _t = [], gt = /* @__PURE__ */ k(
+  bt,
+  yt,
+  _t,
   !1,
   null,
   "2e5cb799"
 );
-const yt = bt.exports, _t = (a, t) => t.value.reduce((o, e) => {
+const ht = gt.exports, wt = (n, t) => t.value.reduce((o, e) => {
   if (e.items) {
-    const n = e.items.filter(
-      (s) => a.value.find((i) => i.value === s.value)
+    const a = e.items.filter(
+      (l) => n.value.find((i) => i.value === l.value)
     );
-    n.length === e.items.length ? o.push(e.displayValue ?? e.label) : n.forEach(({ label: s, displayValue: i }) => o.push(i ?? s));
+    a.length === e.items.length ? o.push(e.displayValue ?? e.label) : a.forEach(({ label: l, displayValue: i }) => o.push(i ?? l));
   }
-  return a.value.find((n) => n.value === e.value) && o.push(e.displayValue ?? e.label), o;
-}, []).join(", "), gt = ({ items: a, placeholder: t, selectedValues: o, isMultiSelect: e }) => {
-  const n = r(
-    () => e.value && a.value.find((s) => {
+  return n.value.find((a) => a.value === e.value) && o.push(e.displayValue ?? e.label), o;
+}, []).join(", "), Ct = ({ items: n, placeholder: t, selectedValues: o, isMultiSelect: e }) => {
+  const a = r(
+    () => e.value && n.value.find((l) => {
       var i;
-      return (i = s.items) == null ? void 0 : i.length;
+      return (i = l.items) == null ? void 0 : i.length;
     })
   );
-  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) => {
+  return r(() => o.value.length ? a.value ? wt(o, n) : o.value.map(({ label: l, displayValue: i }) => i ?? l).join(", ") : t.value || null);
+}, Ce = (n) => {
   var t;
-  (t = a.value.$children) == null || t[0].$refs.textbox.focus();
-}, ht = ({
-  inputContainerRef: a,
+  (t = n.value.$children) == null || t[0].$refs.textbox.focus();
+}, Lt = ({
+  inputContainerRef: n,
   optionsContainerRef: t,
   selectedValueIndex: o,
   isDropdownOpen: e,
-  isDynamicFltering: n,
-  items: l,
-  isMultiple: s
-}, i, c, b) => {
-  const d = async (m) => {
-    var C;
-    n.value && await S(), (C = l.value[m]) == null || C.focus();
-  }, u = async (m) => {
+  isDynamicFltering: a,
+  items: s,
+  isMultiple: l
+}, i, f, m) => {
+  const u = async (_) => {
+    var w;
+    a.value && await x(), (w = s.value[_]) == null || w.focus();
+  }, y = async (_) => {
     var A, K;
-    n.value && await S();
-    const C = (A = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef) == null ? void 0 : A.$el.querySelectorAll(
+    a.value && await x();
+    const w = (A = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef) == null ? void 0 : A.$el.querySelectorAll(
       "button"
     );
-    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
+    w.length ? (K = w[_]) == null || K.focus() : u(_);
+  }, c = (_) => {
+    var w;
+    return (w = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef) == null ? void 0 : w.setListboxFocusedIndex(
+      _
     );
   }, g = () => {
-    e.value || c(), S(() => {
-      _(0), d(0);
+    e.value || f(), x(() => {
+      c(0), u(0);
     });
-  }, v = () => {
-    e.value || c(), S(() => {
-      _(l.value.length - 1), d(l.value.length - 1);
+  }, b = () => {
+    e.value || f(), x(() => {
+      c(s.value.length - 1), u(s.value.length - 1);
     });
-  }, O = ({ detail: m }) => {
-    m.preventDefault(), g();
-  }, L = ({ detail: m }) => {
-    m.preventDefault(), v();
-  }, x = () => {
+  }, S = ({ detail: _ }) => {
+    _.preventDefault(), g();
+  }, O = ({ detail: _ }) => {
+    _.preventDefault(), b();
+  }, C = () => {
     g();
-  }, y = () => {
-    v();
-  }, I = ({ detail: m }) => {
-    m.preventDefault(), i(), e.value && S(() => {
-      s ? u(0) : (_(o.value), d(o.value));
+  }, d = () => {
+    b();
+  }, I = ({ detail: _ }) => {
+    _.preventDefault(), i(), e.value && x(() => {
+      l ? y(0) : (c(o.value), u(o.value));
     });
-  }, D = ({ detail: m }) => {
-    m.preventDefault(), i(), e.value && S(() => {
-      s ? u(0) : (_(o.value), d(o.value));
+  }, D = ({ detail: _ }) => {
+    _.preventDefault(), i(), e.value && x(() => {
+      l ? y(0) : (c(o.value), u(o.value));
     });
   }, B = () => {
-    e.value && b();
+    e.value && m();
   }, F = () => {
-    e.value && (b(), Ce(a));
+    e.value && (m(), Ce(n));
   };
   return r(() => ({
-    [E.ARROW_DOWN]: O,
-    [E.ARROW_UP]: L,
-    [E.HOME]: x,
-    [E.END]: y,
-    ...n.value ? {} : { [E.SPACE]: I },
+    [E.ARROW_DOWN]: S,
+    [E.ARROW_UP]: O,
+    [E.HOME]: C,
+    [E.END]: d,
+    ...a.value ? {} : { [E.SPACE]: I },
     [E.ENTER]: D,
     [E.TAB]: B,
     [E.ESCAPE]: F
   }));
-}, Ct = ({ inputContainerRef: a, isDropdownOpen: t }, o) => {
+}, xt = ({ inputContainerRef: n, isDropdownOpen: t }, o) => {
   const e = () => {
-    t.value && o(), S(() => {
-      Ce(a);
+    t.value && o(), x(() => {
+      Ce(n);
     });
   };
   return {
@@ -490,18 +491,18 @@ const yt = bt.exports, _t = (a, t) => t.value.reduce((o, e) => {
     [p.SPACE]: e
   };
 };
-function wt(a, t, o, e) {
-  const n = h(a), l = h(t), s = (c, b = []) => b.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)] : []);
-  return X(n, () => {
-    o !== void 0 && o(n.value);
+function St(n, t, o, e) {
+  const a = h(n), s = h(t), l = (f, m = []) => m.flatMap((u) => u.label.toLocaleLowerCase().includes(f) ? e != null && e.value && u.items ? [...l(f, u.items)] : [u, ...l(f, u.items)] : u.items ? [...l(f, u.items)] : []);
+  return G(a, () => {
+    o !== void 0 && o(a.value);
   }), r(() => {
-    if (!n.value || o !== void 0)
-      return l.value;
-    const c = n.value.toLocaleLowerCase();
-    return s(c, l.value);
+    if (!a.value || o !== void 0)
+      return s.value;
+    const f = a.value.toLocaleLowerCase();
+    return l(f, s.value);
   });
 }
-const Lt = {
+const Ot = {
   "en-US": {
     all: "All",
     ariaLabelFallback: "Dropdown",
@@ -515,15 +516,16 @@ const Lt = {
     all: "Todos",
     clearFilter: "Limpar filtro"
   }
-}, 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 },
+}, Et = Symbol("input field component injection key"), Qt = Symbol("input field hint injection key"), Xt = Symbol("input field parent component injection key"), Dt = R({
+  i18n: { messages: Ot },
   name: "b-dropdown",
   components: {
-    DropdownInputDefault: ze,
-    DropdownInputSmall: yt
-  }
-}), Ot = /* @__PURE__ */ R({
-  ...St,
+    DropdownInputDefault: Ue,
+    DropdownInputSmall: ht
+  },
+  model: { prop: "modelValue" }
+}), Bt = /* @__PURE__ */ R({
+  ...Dt,
   props: {
     description: { default: null },
     disabled: { type: Boolean, default: !1 },
@@ -544,163 +546,169 @@ const Lt = {
     items: { default: () => [] },
     loading: { type: Boolean, default: !1 },
     componentLoading: { type: Boolean, default: !1 },
-    lazyLoadType: { default: Q.props.lazyLoadType.default },
+    lazyLoadType: { default: X.props.lazyLoadType.default },
     multiple: { type: Boolean, default: !1 },
     search: { default: void 0 },
     showSlotContentInMultiple: { type: Boolean, default: !1 },
     size: { default: null },
     staticCategories: { type: Boolean, default: !1 },
     value: { default: null },
+    modelValue: { default: null },
     virtualScroll: { type: Boolean, default: !1 },
     enableValueLabelPair: { type: Boolean, default: !1 }
   },
-  emits: ["input", "show-more", "open"],
-  setup(a, { expose: t, emit: o }) {
-    var fe;
-    const e = a, n = Ne(), l = ge(), s = We(l), { t: i } = G(), c = h(null), b = h(null), d = h(null), u = h(!1), _ = $("bento-dropdown-options-container"), g = $("dropdown-label"), v = $("dropdown-description"), O = $("dropdown-error"), { isReadOnly: L } = Fe(w(e, "readonly")), { cachedSelectedListboxOptions: x, cachedListboxSelectedValues: y, setCachedValues: I } = Pe(
-      w(e, "items"),
-      w(e, "value"),
-      w(e, "multiple"),
-      w(e, "enableValueLabelPair")
-    ), D = h(n["aria-label"]), B = h(n["aria-describedby"]), { ariaLabel: F, label: U } = he(e), m = r(() => i("ariaLabelFallback")), C = Me({
+  emits: ["input", "update:model-value", "show-more", "open"],
+  setup(n, { expose: t, emit: o }) {
+    var me;
+    const e = n, a = Ae(), s = he(), l = je(s), { t: i } = ee(), { emitValue: f } = ke(o), m = h(null), u = h(null), y = h(null), c = h(!1), g = $("bento-dropdown-options-container"), b = $("dropdown-label"), S = $("dropdown-description"), O = $("dropdown-error"), { isReadOnly: C } = Ve(L(e, "readonly")), d = r(() => e.modelValue ?? e.value), { cachedSelectedListboxOptions: I, cachedListboxSelectedValues: D, setCachedValues: B } = Fe(
+      L(e, "items"),
+      d,
+      L(e, "multiple"),
+      L(e, "enableValueLabelPair")
+    ), F = h(a["aria-label"]), W = h(a["aria-describedby"]), { ariaLabel: _, label: w } = we(e), A = r(() => i("ariaLabelFallback")), K = $e({
       // TODO: take ariaLabel ref away when aria-label prop is removed
-      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(() => ({
+      ariaLabel: _.value || F,
+      label: w,
+      defaultFallback: A
+    }), te = e.size === V.SMALL || Me(Et, !1), Le = r(() => te ? V.SMALL : V.DEFAULT), xe = r(() => ({
       "b-dropdown--condensed": e.condensed
-    })), Le = r(() => ({
+    })), Se = r(() => ({
       "b-dropdown__description--error": !!e.errorMessage
-    })), T = h(""), M = w(e, "items"), ee = w(e, "staticCategories"), V = wt(T, M, (fe = e == null ? void 0 : e.search) == null ? void 0 : fe.searchEvent, ee), j = r(() => e.dynamicFiltering && !!T.value), xe = gt({
+    })), T = h(""), M = L(e, "items"), oe = L(e, "staticCategories"), U = St(T, M, (me = e == null ? void 0 : e.search) == null ? void 0 : me.searchEvent, oe), j = r(() => e.dynamicFiltering && !!T.value), Oe = Ct({
       items: M,
-      placeholder: w(e, "placeholder"),
-      isMultiSelect: w(e, "multiple"),
-      selectedValues: x
-    }), Se = r(() => {
-      if (e != null && e.multiple && Array.isArray(e.value))
+      placeholder: L(e, "placeholder"),
+      isMultiSelect: L(e, "multiple"),
+      selectedValues: I
+    }), Ee = r(() => {
+      if (e != null && e.multiple && Array.isArray(d.value))
         return e.items.filter(
-          ({ value: f }) => (e == null ? void 0 : e.value) && (e == null ? void 0 : e.value).includes(f)
+          ({ value: v }) => (e == null ? void 0 : e.value) && (e == null ? void 0 : e.value).includes(v)
         );
       if (!e.multiple && e.staticCategories) {
-        const f = e.items.find(
-          (J) => J.items.some((Te) => Te.value === e.value)
+        const v = e.items.find(
+          (J) => J.items.some((Re) => Re.value === d.value)
         );
-        return f ? f.items.find((J) => J.value === e.value) : null;
+        return v ? v.items.find((J) => J.value === d.value) : null;
       }
-      return e.items.find(({ value: f }) => f === (e == null ? void 0 : e.value));
-    }), te = r(() => {
-      const f = V.value.findIndex(({ value: N }) => e.enableValueLabelPair ? e.value.value === N : e.value === N);
-      return f > -1 ? f : 0;
-    }), { isMultiLevelSelect: q, flattenedItemsList: oe } = $e(M), ne = r(() => q.value && !e.staticCategories), ae = r(() => ne.value ? "treeitem" : "option"), Oe = r(() => {
+      return e.items.find(({ value: v }) => v === d.value);
+    }), ae = r(() => {
+      const v = U.value.findIndex(({ value: N }) => e.enableValueLabelPair ? d.value.value === N : d.value === N);
+      return v > -1 ? v : 0;
+    }), { isMultiLevelSelect: q, flattenedItemsList: ne } = Ke(M), le = r(() => q.value && !e.staticCategories), se = r(() => le.value ? "treeitem" : "option"), De = r(() => {
       if (e.multiple) {
-        const f = Array.isArray(e.value) ? e.value.length : 0, N = q.value ? oe.value.length : M.value.length;
-        return f === 0 ? null : !e.hasMoreItems && N > 0 && N === f ? i("all") : f;
+        const v = Array.isArray(d.value) ? d.value.length : 0, N = q.value ? ne.value.length : M.value.length;
+        return v === 0 ? null : !e.hasMoreItems && N > 0 && N === v ? i("all") : v;
       }
       return null;
-    }), Ee = r(
+    }), Be = r(
       () => [
-        e.description ? v : null,
-        B.value,
+        e.description ? S : null,
+        W.value,
         e.errorMessage ? O : null
       ].filter(Boolean).join(" ") || null
-    ), se = r(() => {
-      var f;
-      return (f = d.value) == null ? void 0 : f.$el;
-    }), { visibleDomOptions: le, updateVisibleDomOptions: H } = ke(
-      se,
-      V,
-      ae
-    ), ie = () => {
-      L.value || (u.value = !0, S(() => {
+    ), ie = r(() => {
+      var v;
+      return (v = y.value) == null ? void 0 : v.$el;
+    }), { visibleDomOptions: re, updateVisibleDomOptions: H } = ze(
+      ie,
+      U,
+      se
+    ), de = () => {
+      C.value || (c.value = !0, x(() => {
         H();
       }));
     }, z = () => {
-      u.value = !1;
-    }, re = () => {
-      L.value || (u.value = !u.value, S(() => {
+      c.value = !1;
+    }, ue = () => {
+      C.value || (c.value = !c.value, x(() => {
         H();
       }), j.value && (T.value = ""));
-    }, De = () => {
-      j.value && (T.value = ""), u.value && (u.value = !1, d.value.onOutsideDropdownClick());
-    }, de = (f) => {
-      e.multiple || (T.value = "", u.value = !1), I(f), o("input", y.value);
-    }, ue = () => {
+    }, Ie = () => {
+      j.value && (T.value = ""), c.value && (c.value = !1, y.value.onOutsideDropdownClick());
+    }, ce = (v) => {
+      e.multiple || (T.value = "", c.value = !1), B(v), f(D.value);
+    }, pe = () => {
       o(p.SHOW_MORE);
-    }, Be = ht(
+    }, Te = Lt(
       {
-        inputContainerRef: c,
-        optionsContainerRef: d,
-        selectedValueIndex: te,
-        isDropdownOpen: u,
-        isDynamicFltering: w(e, "dynamicFiltering"),
-        items: le,
+        inputContainerRef: m,
+        optionsContainerRef: y,
+        selectedValueIndex: ae,
+        isDropdownOpen: c,
+        isDynamicFltering: L(e, "dynamicFiltering"),
+        items: re,
         isMultiple: e.multiple
       },
-      re,
-      ie,
+      ue,
+      de,
       z
-    ), ce = Ct(
+    ), fe = xt(
       {
-        inputContainerRef: c,
-        isDropdownOpen: u
+        inputContainerRef: m,
+        isDropdownOpen: c
       },
       z
-    ), Ie = {
+    ), Ne = {
       [p.CLOSE_DROPDOWN]: z,
-      [p.SELECT]: de,
-      [p.SHOW_MORE]: ue,
-      ...ce
+      [p.SELECT]: ce,
+      [p.SHOW_MORE]: pe,
+      ...fe
     };
-    e.error && ve(
+    e.error && Y(
       '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 && ve('BentoDropdown "size" property', "Do not use. Only 'default' size should be used.", "2.0.0");
-    const pe = () => {
-      c.value.focus();
+    ), e.size && Y('BentoDropdown "size" property', "Do not use. Only 'default' size should be used.", "2.0.0"), e.value && Y(
+      'BentoDropdown "value" property',
+      `The use of "value" prop in "BentoDropdown" is no longer supported.
+                Use the "v-model" or "model-value" property instead.`,
+      "2.0.0"
+    );
+    const ve = () => {
+      m.value.focus();
     };
-    return X(
-      () => u.value,
-      (f) => {
-        f && o("open");
+    return G(
+      () => c.value,
+      (v) => {
+        v && o("open");
       }
     ), t({
-      focus: pe
-    }), { __sfc: !0, attrs: n, slots: l, hasSlot: s, props: e, emit: o, t: i, inputContainerRef: c, inputContainerRefWrapper: b, optionsContainerRef: d, isDropdownOpen: u, dropdownOptionsContainerId: _, labelId: g, descriptionId: v, 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: ee, filteredItems: V, isSearching: j, displayValue: xe, selectedValueItem: Se, selectedValueIndex: te, isMultiLevelSelect: q, flattenedItemsList: oe, isTreePattern: ne, computedOptionRole: ae, additionalItemsSelected: Oe, ariaDescribedBy: Ee, listboxRef: se, visibleDomOptions: le, updateVisibleDomOptions: H, openDropdown: ie, closeDropdown: z, toggleDropdown: re, clickOutsideDropdown: De, onOptionSelected: de, emitShowMoreEvent: ue, textboxKeyboardNavigationListeners: Be, listboxKeyboardNavigationListeners: ce, listboxListeners: Ie, focus: pe, BentoDropdownOptionsContainer: tt, BentoTypography: Ae, ErrorMessage: qe, FieldLabel: je, vBentoClickOutsideDirective: Ve, vBentoKeyboardNavigationDirective: Ue };
+      focus: ve
+    }), { __sfc: !0, attrs: a, slots: s, hasSlot: l, props: e, emit: o, t: i, emitValue: f, inputContainerRef: m, inputContainerRefWrapper: u, optionsContainerRef: y, isDropdownOpen: c, dropdownOptionsContainerId: g, labelId: b, descriptionId: S, errorId: O, isReadOnly: C, dropdownValue: d, cachedSelectedListboxOptions: I, cachedListboxSelectedValues: D, setCachedValues: B, ariaLabelAttribute: F, ariaDescribedByAttribute: W, ariaLabel: _, label: w, computedAriaLabelFallbackMessage: A, computedAriaLabel: K, isInputComponent: te, computedSize: Le, conditionalClasses: xe, descriptionConditionalClasses: Se, searchTerm: T, items: M, staticCategories: oe, filteredItems: U, isSearching: j, displayValue: Oe, selectedValueItem: Ee, selectedValueIndex: ae, isMultiLevelSelect: q, flattenedItemsList: ne, isTreePattern: le, computedOptionRole: se, additionalItemsSelected: De, ariaDescribedBy: Be, listboxRef: ie, visibleDomOptions: re, updateVisibleDomOptions: H, openDropdown: de, closeDropdown: z, toggleDropdown: ue, clickOutsideDropdown: Ie, onOptionSelected: ce, emitShowMoreEvent: pe, textboxKeyboardNavigationListeners: Te, listboxKeyboardNavigationListeners: fe, listboxListeners: Ne, focus: ve, BentoDropdownOptionsContainer: nt, BentoTypography: Pe, ErrorMessage: Ye, FieldLabel: Je, vBentoClickOutsideDirective: He, vBentoKeyboardNavigationDirective: qe };
   }
 });
-var Et = function() {
-  var n;
+var It = function() {
+  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.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) {
-    e.searchTerm = l;
-  }, open: e.toggleDropdown, close: e.toggleDropdown }, scopedSlots: t._u([t._l(e.slots, function(l, s) {
-    return { key: s, fn: function(i) {
-      return [t._t(s, null, null, i)];
+  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(s) {
+    e.searchTerm = s;
+  }, open: e.toggleDropdown, close: e.toggleDropdown }, scopedSlots: t._u([t._l(e.slots, function(s, l) {
+    return { key: l, fn: function(i) {
+      return [t._t(l, null, null, i)];
     } };
-  })], null, !0) })], 1), e.inputContainerRef ? o(e.BentoDropdownOptionsContainer, t._g({ ref: "optionsContainerRef", attrs: { id: e.dropdownOptionsContainerId, "aria-label": e.computedAriaLabel, "component-loading": t.componentLoading, "empty-state": t.emptyState, "debounce-time": (n = t.search) == null ? void 0 : n.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(l, s) {
-    return { key: s, fn: function(i) {
-      return [t._t(s, null, null, i)];
+  })], null, !0) })], 1), e.inputContainerRef ? o(e.BentoDropdownOptionsContainer, t._g({ ref: "optionsContainerRef", attrs: { id: e.dropdownOptionsContainerId, "aria-label": e.computedAriaLabel, "component-loading": t.componentLoading, "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(s, l) {
+    return { key: l, fn: function(i) {
+      return [t._t(l, null, null, i)];
     } };
   })], 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);
-}, Dt = [], Bt = /* @__PURE__ */ k(
-  Ot,
-  Et,
-  Dt,
+}, Tt = [], Nt = /* @__PURE__ */ k(
+  Bt,
+  It,
+  Tt,
   !1,
   null,
-  "05a0b831"
+  "bc2a6da5"
 );
-const Yt = Bt.exports;
+const Gt = Nt.exports;
 export {
-  Yt as B,
-  Ht as I,
-  xt as a,
-  Jt as b,
-  wt as u
+  Gt as B,
+  Qt as I,
+  Et as a,
+  Xt as b,
+  St as u
 };
-//# sourceMappingURL=dropdown.RxD2TqnP.js.map
+//# sourceMappingURL=dropdown.-3x2IBDg.js.map