@adyen/bento-vue3 1.65.0 → 1.67.0

package/dist/chunks/{dropdown.Bj6DK-2v.js → dropdown.B5ZaFDn_.js}

@@ -1,23 +1,23 @@
-import { ref as w, watch as be, computed as p, defineComponent as j, useSlots as Ne, toRefs as Ie, createBlock as K, openBlock as L, resolveDynamicComponent as Ae, mergeProps as P, withCtx as z, createElementVNode as te, withKeys as Xe, unref as n, createVNode as Q, toHandlers as G, createSlots as ue, renderList as ce, renderSlot as X, normalizeProps as pe, guardReactiveProps as fe, createElementBlock as k, createCommentVNode as F, toDisplayString as ge, normalizeClass as me, withDirectives as ee, vShow as Oe, nextTick as E, useAttrs as Ge, toRef as B, inject as et, createTextVNode as tt } from "vue";
-import { d as xe, B as at } from "./typography.DN5eC5ch.js";
-import { a as re, b as V, c as lt, B as _, D as ot } from "./dropdown-default-textbox.B05elQig.js";
+import { ref as C, watch as Te, computed as r, defineComponent as j, useSlots as Ie, toRefs as Ne, createBlock as K, openBlock as L, resolveDynamicComponent as Ae, mergeProps as R, withCtx as z, createElementVNode as te, withKeys as tt, unref as n, createVNode as Q, toHandlers as G, createSlots as de, renderList as ue, renderSlot as X, normalizeProps as ce, guardReactiveProps as pe, createElementBlock as P, createCommentVNode as F, toDisplayString as ye, normalizeClass as fe, withDirectives as ee, vShow as Ce, nextTick as w, useAttrs as at, toRef as x, inject as ot, createTextVNode as lt } from "vue";
+import { d as Oe, B as nt } from "./typography.DN5eC5ch.js";
+import { a as ie, b as V, c as st, B as J, D as it } from "./dropdown-default-textbox.Ce5D3ipi.js";
 /* empty css              */
 import { _ as Y } from "./_plugin-vue_export-helper.CHgC5LLL.js";
-import { s as de } from "./events.FNmSWp_P.js";
-import { g as J } from "./generate-uid.NJ8tVoha.js";
-import { u as nt } from "./aria-label.CaUURpnB.js";
-import { u as he } from "./i18n.B6g5VX0q.js";
-import { u as st } from "./use-form-layout-loading.D3lALhtC.js";
-import { B as it } from "./directive.Cbdox5VL.js";
-import { B as I, a as rt } from "./keyboard-navigation.CqgGzfZQ.js";
-import { a as m, b as ve, B as ye, c as dt, u as ut } from "./use-cached-selected-values.CEwKqYIe.js";
-import { u as ct } from "./use-has-slot.B7eQSabc.js";
-import { F as pt, E as ft } from "./error-message.DZWphzoT.js";
-import { P as Be } from "./popper-container.b5h4zYgT.js";
+import { s as re } from "./events.FNmSWp_P.js";
+import { g as _ } from "./generate-uid.NJ8tVoha.js";
+import { u as rt } from "./aria-label.CaUURpnB.js";
+import { u as be } from "./i18n.B6g5VX0q.js";
+import { a as m, b as me, B as ve, c as dt, u as ut, d as ct } from "./use-cached-selected-values.D7dOPJSO.js";
+import { u as pt } from "./use-form-layout-loading.D3lALhtC.js";
+import { B as ft } from "./directive.Cbdox5VL.js";
+import { B as I, a as mt } from "./keyboard-navigation.CqgGzfZQ.js";
+import { u as vt } from "./use-has-slot.B7eQSabc.js";
+import { F as yt, E as bt } from "./error-message.DHMHq9bR.js";
+import { P as xe } from "./popper-container.b5h4zYgT.js";
 import "./popper-container.types.BCZMbVFD.js";
-import { B as mt } from "./popover.maCMPyz8.js";
+import { B as gt } from "./popover.VI3TrUkL.js";
 import "../assets/dropdown.css";
-const Se = {
+const ge = {
   "en-US": {
     apply: "Apply",
     cancel: "Cancel",
@@ -31,62 +31,62 @@ const Se = {
     apply: "Aplicar",
     cancel: "Cancelar"
   }
-}, vt = (e, i, s, a) => {
-  const o = w(e.value), { t: l } = he({ messages: Se });
-  be(e, () => {
-    o.value = e.value;
+}, ht = (e, i, s, a) => {
+  const l = C(e.value), { t: o } = be({ messages: ge });
+  Te(e, () => {
+    l.value = e.value;
   });
-  const t = p(
-    () => JSON.stringify(o.value) === JSON.stringify(e.value)
-  ), u = () => {
-    a(m.SELECT, o.value), a(m.CLOSE_DROPDOWN);
+  const t = r(
+    () => JSON.stringify(l.value) === JSON.stringify(e.value)
+  ), c = () => {
+    a(m.SELECT, l.value), a(m.CLOSE_DROPDOWN);
   }, v = () => {
-    o.value = e.value, a(m.CLOSE_DROPDOWN);
+    l.value = e.value, a(m.CLOSE_DROPDOWN);
   }, g = () => {
-    s.value && i.value && (o.value = e.value);
-  }, r = p(() => [
+    s.value && i.value && (l.value = e.value);
+  }, d = r(() => [
     {
-      title: l("apply"),
-      event: u,
+      title: o("apply"),
+      event: c,
       disabled: t.value
     },
     {
-      title: l("cancel"),
+      title: o("cancel"),
       event: v
     }
   ]), b = (S) => {
-    o.value = S, i.value || a(m.SELECT, S);
-  }, d = (S) => {
+    l.value = S, i.value || a(m.SELECT, S);
+  }, u = (S) => {
     b(S), a(m.TAB);
-  }, x = (S) => {
+  }, O = (S) => {
     b(S), a(m.ENTER);
-  }, D = (S) => {
+  }, B = (S) => {
     b(S), a(m.SPACE);
   }, y = () => {
     v(), a(m.ESCAPE);
-  }, T = () => {
+  }, D = () => {
     a(m.SHOW_MORE);
-  }, C = {
+  }, E = {
     [m.SELECT]: b,
-    [m.SHOW_MORE]: T,
-    [m.TAB]: d,
-    [m.SPACE]: D,
-    [m.ENTER]: x
+    [m.SHOW_MORE]: D,
+    [m.TAB]: u,
+    [m.SPACE]: B,
+    [m.ENTER]: O
   };
   return {
     // Values
-    actions: r,
-    internalSelectedValue: o,
+    actions: d,
+    internalSelectedValue: l,
     // Methods
-    listeners: C,
+    listeners: E,
     onEscapeKey: y,
     onOutsideDropdownClick: g
   };
-}, yt = j({
-  i18n: { messages: Se },
+}, St = j({
+  i18n: { messages: ge },
   name: "bento-dropdown-options-container"
-}), bt = /* @__PURE__ */ j({
-  ...yt,
+}), Lt = /* @__PURE__ */ j({
+  ...St,
   props: {
     /**
      * Defines a string value that labels an interactive element.
@@ -145,8 +145,8 @@ const Se = {
      */
     lazyLoadType: {
       type: String,
-      default: ye.AUTOMATIC,
-      validator: (e) => Object.values(ye).includes(e)
+      default: ve.AUTOMATIC,
+      validator: (e) => Object.values(ve).includes(e)
     },
     /**
      * Indicates if new options are lazy loading.
@@ -176,7 +176,7 @@ const Se = {
      *
      * If enabled, hides the "Select all" checkbox in "multiple" mode.
      */
-    searching: ve.props.searching,
+    searching: me.props.searching,
     /**
      * If enabled, dropdown will display non-selectable, static categories
      */
@@ -185,7 +185,7 @@ const Se = {
      * Reference to the DOM element or Vue component for positioning
      * the Dropdown container.
      */
-    targetElement: { type: Be.props.targetElement.type, required: !0 },
+    targetElement: { type: xe.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.
@@ -196,66 +196,66 @@ const Se = {
     }
   },
   setup(e, { expose: i, emit: s }) {
-    const a = Ne(), o = s, l = e, { selectedValue: t, multiple: u } = Ie(l), v = w(null), { t: g } = he({ messages: Se }), r = p(() => l.open && !l.disabled), b = p(() => g("noOptionsMatchThisSearch")), d = p(() => ({
-      "b-dropdown-options-container--single": !(l != null && l.multiple)
-    })), x = p(() => ({
-      "b-dropdown-options-container__listbox--single": !(l != null && l.multiple)
-    })), { actions: D, internalSelectedValue: y, listeners: T, onEscapeKey: C, onOutsideDropdownClick: S } = vt(t, u, r, o), W = p(() => l != null && l.multiple ? mt : Be), U = p(() => {
-      var f;
-      const A = {
-        "min-width": `${(f = l == null ? void 0 : l.targetElement) == null ? void 0 : f.clientWidth}px`,
+    const a = Ie(), l = s, o = e, { selectedValue: t, multiple: c } = Ne(o), v = C(null), { t: g } = be({ messages: ge }), d = r(() => o.open && !o.disabled), b = r(() => g("noOptionsMatchThisSearch")), u = r(() => ({
+      "b-dropdown-options-container--single": !(o != null && o.multiple)
+    })), O = r(() => ({
+      "b-dropdown-options-container__listbox--single": !(o != null && o.multiple)
+    })), { actions: B, internalSelectedValue: y, listeners: D, onEscapeKey: E, onOutsideDropdownClick: S } = ht(t, c, d, l), W = r(() => o != null && o.multiple ? gt : xe), U = r(() => {
+      var p;
+      const N = {
+        "min-width": `${(p = o == null ? void 0 : o.targetElement) == null ? void 0 : p.clientWidth}px`,
         "max-width": "min(500px, 95%)"
       };
-      return l != null && l.multiple ? {
+      return o != null && o.multiple ? {
         actionsLayout: "space-between",
-        ariaLabel: l.ariaLabel,
-        actions: D.value,
+        ariaLabel: o.ariaLabel,
+        actions: B.value,
         divider: !0,
         fallbackPosition: ["top-start"],
-        id: J(`dropdown-options-${l.id}`),
-        open: l.open,
+        id: _(`dropdown-options-${o.id}`),
+        open: o.open,
         position: "bottom-start",
         style: {
           width: "auto",
-          ...A
+          ...N
         },
-        targetElement: l.targetElement
+        targetElement: o.targetElement
       } : {
         fallbackPosition: ["top-start"],
         offset: [0, 8],
         position: "bottom-start",
         style: {
-          display: r.value ? "block" : "none",
-          ...A
+          display: d.value ? "block" : "none",
+          ...N
         },
-        targetElement: l.targetElement
+        targetElement: o.targetElement
       };
     });
     return i({
       onOutsideDropdownClick: S
-    }), (A, f) => (L(), K(Ae(W.value), P({
-      class: ["b-dropdown-options-container", d.value]
+    }), (N, p) => (L(), K(Ae(W.value), R({
+      class: ["b-dropdown-options-container", u.value]
     }, U.value), {
       default: z(() => [
         te("div", {
-          onKeydown: f[0] || (f[0] = Xe(
+          onKeydown: p[0] || (p[0] = tt(
             //@ts-ignore
-            (...h) => n(C) && n(C)(...h),
+            (...h) => n(E) && n(E)(...h),
             ["esc"]
           ))
         }, [
-          Q(n(ve), P({
+          Q(n(me), R({
             id: e.id,
             ref_key: "dropdownOptionsListboxRef",
             ref: v,
             "aria-label": e.ariaLabel,
-            class: ["b-dropdown-options-container__listbox", x.value],
+            class: ["b-dropdown-options-container__listbox", O.value],
             "component-loading": e.componentLoading,
             "empty-state": e.emptyState,
             "is-option-disabled": e.isOptionDisabled,
             items: e.items,
             "selected-value": n(y),
-            multiple: n(u),
+            multiple: n(c),
             "static-categories": e.staticCategories,
             "no-results-message": b.value,
             searching: e.searching,
@@ -263,11 +263,11 @@ const Se = {
             "lazy-load-type": e.lazyLoadType,
             "has-more-items": e.hasMoreItems,
             "virtual-scroll": e.virtualScroll
-          }, G(n(T))), ue({ _: 2 }, [
-            ce(n(a), (h, $) => ({
-              name: $,
-              fn: z((M) => [
-                X(A.$slots, $, pe(fe(M)), void 0, !0)
+          }, G(n(D))), de({ _: 2 }, [
+            ue(n(a), (h, A) => ({
+              name: A,
+              fn: z(($) => [
+                X(N.$slots, A, ce(pe($)), void 0, !0)
               ])
             }))
           ]), 1040, ["id", "aria-label", "class", "component-loading", "empty-state", "is-option-disabled", "items", "selected-value", "multiple", "static-categories", "no-results-message", "searching", "loading", "lazy-load-type", "has-more-items", "virtual-scroll"])
@@ -276,55 +276,55 @@ const Se = {
       _: 3
     }, 16, ["class"]));
   }
-}), gt = /* @__PURE__ */ Y(bt, [["__scopeId", "data-v-aa806d62"]]);
-let De = 0;
-const ht = {
+}), Et = /* @__PURE__ */ Y(Lt, [["__scopeId", "data-v-aa806d62"]]);
+let Be = 0;
+const wt = {
   beforeCreate() {
-    this.uuid = De.toString(), De += 1;
+    this.uuid = Be.toString(), Be += 1;
   }
-}, St = { key: 0 };
-function Lt(e, i, s, a, o, l) {
-  return L(), k("svg", P({ role: "img" }, e.$attrs, {
+}, Ct = { key: 0 };
+function Ot(e, i, s, a, l, o) {
+  return L(), P("svg", R({ role: "img" }, e.$attrs, {
     class: "ui-assets-icons-16",
     xmlns: "http://www.w3.org/2000/svg",
     width: "16",
     height: "16",
     fill: "none"
   }), [
-    e.$attrs["svg-title"] ? (L(), k("title", St, ge(e.$attrs["svg-title"]), 1)) : F("", !0),
+    e.$attrs["svg-title"] ? (L(), P("title", Ct, ye(e.$attrs["svg-title"]), 1)) : F("", !0),
     i[0] || (i[0] = te("path", {
       fill: "#001222",
       d: "M5.00011 5.43922L8.00011 8.43922L11.0001 5.43922L12.0608 6.49988L8.00011 10.5605L3.93945 6.49988L5.00011 5.43922Z"
     }, null, -1))
   ], 16);
 }
-const Et = /* @__PURE__ */ Y(ht, [["render", Lt]]);
-let Te = 0;
-const wt = {
+const xt = /* @__PURE__ */ Y(wt, [["render", Ot]]);
+let De = 0;
+const Bt = {
   beforeCreate() {
-    this.uuid = Te.toString(), Te += 1;
+    this.uuid = De.toString(), De += 1;
   }
-}, Ct = { key: 0 };
-function Ot(e, i, s, a, o, l) {
-  return L(), k("svg", P({ role: "img" }, e.$attrs, {
+}, Dt = { key: 0 };
+function Tt(e, i, s, a, l, o) {
+  return L(), P("svg", R({ role: "img" }, e.$attrs, {
     class: "ui-assets-icons-16",
     xmlns: "http://www.w3.org/2000/svg",
     width: "16",
     height: "16",
     fill: "none"
   }), [
-    e.$attrs["svg-title"] ? (L(), k("title", Ct, ge(e.$attrs["svg-title"]), 1)) : F("", !0),
+    e.$attrs["svg-title"] ? (L(), P("title", Dt, ye(e.$attrs["svg-title"]), 1)) : F("", !0),
     i[0] || (i[0] = te("path", {
       fill: "#001222",
       d: "M10.9999 10.5608L7.9999 7.56077L4.9999 10.5608L3.93924 9.50011L7.9999 5.43945L12.0606 9.50011L10.9999 10.5608Z"
     }, null, -1))
   ], 16);
 }
-const xt = /* @__PURE__ */ Y(wt, [["render", Ot]]), Bt = { class: "b-dropdown-small-textbox__chevron" }, Dt = j({
+const It = /* @__PURE__ */ Y(Bt, [["render", Tt]]), Nt = { class: "b-dropdown-small-textbox__chevron" }, At = j({
   name: "dropdown-small-textbox",
   inheritAttrs: !1
-}), Tt = /* @__PURE__ */ j({
-  ...Dt,
+}), $t = /* @__PURE__ */ j({
+  ...At,
   props: {
     /**
      * The number of additional items that have been selected in the dropdown.
@@ -385,48 +385,48 @@ const xt = /* @__PURE__ */ Y(wt, [["render", Ot]]), Bt = { class: "b-dropdown-sm
   },
   emits: ["clear", "close", "input", "keydown", "open"],
   setup(e, { expose: i, emit: s }) {
-    const a = s, o = e, l = w(null), t = p(() => ({
-      [`b-dropdown-small-textbox--${re.DISABLED}`]: o.disabled,
-      [`b-dropdown-small-textbox--${re.READONLY}`]: o.readonly,
-      [`b-dropdown-small-textbox--${re.OPENED}`]: o.open
-    })), u = p(() => o.open && !o.disabled && !o.readonly), v = (y) => {
+    const a = s, l = e, o = C(null), t = r(() => ({
+      [`b-dropdown-small-textbox--${ie.DISABLED}`]: l.disabled,
+      [`b-dropdown-small-textbox--${ie.READONLY}`]: l.readonly,
+      [`b-dropdown-small-textbox--${ie.OPENED}`]: l.open
+    })), c = r(() => l.open && !l.disabled && !l.readonly), v = (y) => {
       a("input", y);
     }, g = (y) => {
       a("keydown", y);
-    }, r = (y) => {
-      de(y), a("open");
-    }, b = (y) => {
-      de(y), a("close");
     }, d = (y) => {
-      de(y), a("clear");
-    }, x = {
+      re(y), a("open");
+    }, b = (y) => {
+      re(y), a("close");
+    }, u = (y) => {
+      re(y), a("clear");
+    }, O = {
       [V.INPUT]: v,
-      [V.OPEN]: r,
+      [V.OPEN]: d,
       [V.CLOSE]: b,
-      [V.CLEAR]: d,
+      [V.CLEAR]: u,
       [V.KEYDOWN]: g
     };
     return i({
       focus: () => {
-        l.value.focus();
+        o.value.focus();
       }
-    }), (y, T) => (L(), k("div", {
-      class: me(["b-dropdown-small-textbox", t.value])
+    }), (y, D) => (L(), P("div", {
+      class: fe(["b-dropdown-small-textbox", t.value])
     }, [
-      Q(lt, P({
+      Q(st, R({
         ref_key: "baseTextbox",
-        ref: l
+        ref: o
       }, { ...y.$attrs, ...y.$props }, {
         class: "b-dropdown-small-textbox__textbox",
-        size: n(_).SMALL
-      }, G(x)), {
+        size: n(J).SMALL
+      }, G(O)), {
         icon: z(() => [
-          te("div", Bt, [
-            ee(Q(n(xt), { "svg-title": "opened" }, null, 512), [
-              [Oe, u.value]
+          te("div", Nt, [
+            ee(Q(n(It), { "svg-title": "opened" }, null, 512), [
+              [Ce, c.value]
             ]),
-            ee(Q(n(Et), { "svg-title": "closed" }, null, 512), [
-              [Oe, !u.value]
+            ee(Q(n(xt), { "svg-title": "closed" }, null, 512), [
+              [Ce, !c.value]
             ])
           ])
         ]),
@@ -434,91 +434,91 @@ const xt = /* @__PURE__ */ Y(wt, [["render", Ot]]), Bt = { class: "b-dropdown-sm
       }, 16, ["size"])
     ], 2));
   }
-}), Nt = /* @__PURE__ */ Y(Tt, [["__scopeId", "data-v-66b5eaa5"]]), It = (e, i) => i.value.reduce((s, a) => {
+}), Mt = /* @__PURE__ */ Y($t, [["__scopeId", "data-v-66b5eaa5"]]), Rt = (e, i) => i.value.reduce((s, a) => {
   if (a.items) {
-    const o = a.items.filter(
-      (t) => e.value.find((u) => u.value === t.value)
+    const l = a.items.filter(
+      (t) => e.value.find((c) => c.value === t.value)
     );
-    o.length === a.items.length ? s.push(a.displayValue ?? a.label) : o.forEach(({ label: t, displayValue: u }) => s.push(u ?? t));
+    l.length === a.items.length ? s.push(a.displayValue ?? a.label) : l.forEach(({ label: t, displayValue: c }) => s.push(c ?? t));
   }
-  return e.value.find((o) => o.value === a.value) && s.push(a.displayValue ?? a.label), s;
-}, []).join(", "), At = ({ items: e, placeholder: i, selectedValues: s, isMultiSelect: a }) => {
-  const o = p(
+  return e.value.find((l) => l.value === a.value) && s.push(a.displayValue ?? a.label), s;
+}, []).join(", "), Pt = ({ items: e, placeholder: i, selectedValues: s, isMultiSelect: a }) => {
+  const l = r(
     () => a.value && e.value.find((t) => {
-      var u;
-      return (u = t.items) == null ? void 0 : u.length;
+      var c;
+      return (c = t.items) == null ? void 0 : c.length;
     })
   );
-  return p(() => s.value.length ? o.value ? It(s, e) : s.value.map(({ label: t, displayValue: u }) => u ?? t).join(", ") : i.value || null);
+  return r(() => s.value.length ? l.value ? Rt(s, e) : s.value.map(({ label: t, displayValue: c }) => c ?? t).join(", ") : i.value || null);
 }, $e = (e) => {
   var i;
   (i = e.value.$children) == null || i[0].$refs.textbox.focus();
-}, $t = ({
+}, kt = ({
   inputContainerRef: e,
   optionsContainerRef: i,
   selectedValueIndex: s,
   isDropdownOpen: a,
-  isDynamicFltering: o,
-  items: l,
+  isDynamicFltering: l,
+  items: o,
   isMultiple: t
-}, u, v, g) => {
-  const r = async (f) => {
+}, c, v, g) => {
+  const d = async (p) => {
     var h;
-    o.value && await E(), (h = l.value[f]) == null || h.focus();
-  }, b = async (f) => {
-    var $, M;
-    o.value && await E();
-    const h = ($ = i.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef) == null ? void 0 : $.$el.querySelectorAll(
+    l.value && await w(), (h = o.value[p]) == null || h.focus();
+  }, b = async (p) => {
+    var A, $;
+    l.value && await w();
+    const h = (A = i.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef) == null ? void 0 : A.$el.querySelectorAll(
       "button"
     );
-    h.length ? (M = h[f]) == null || M.focus() : r(f);
-  }, d = (f) => {
+    h.length ? ($ = h[p]) == null || $.focus() : d(p);
+  }, u = (p) => {
     var h;
     return (h = i.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef) == null ? void 0 : h.setListboxFocusedIndex(
-      f
+      p
     );
-  }, x = ({ detail: f }) => {
-    f.preventDefault(), a.value || v(), E(() => {
-      t ? b(0) : (d(s.value), r(s.value));
+  }, O = ({ detail: p }) => {
+    p.preventDefault(), a.value || v(), w(() => {
+      t ? b(0) : (u(s.value), d(s.value));
     });
-  }, D = ({ detail: f }) => {
-    f.preventDefault(), a.value || v(), E(() => {
-      t ? b(0) : (d(s.value), r(s.value));
+  }, B = ({ detail: p }) => {
+    p.preventDefault(), a.value || v(), w(() => {
+      t ? b(0) : (u(s.value), d(s.value));
     });
   }, y = () => {
-    a.value || (v(), E(() => {
-      d(l.value.length - 1), r(l.value.length - 1);
+    a.value || (v(), w(() => {
+      u(o.value.length - 1), d(o.value.length - 1);
     }));
-  }, T = () => {
+  }, D = () => {
     a.value && (g(), $e(e));
-  }, C = () => {
+  }, E = () => {
     a.value && g();
   }, S = () => {
-    a.value || v(), E(() => {
-      r(0);
+    a.value || v(), w(() => {
+      d(0);
     });
-  }, W = ({ detail: f }) => {
-    f.preventDefault(), u(), a.value && E(() => {
-      t ? b(0) : (d(s.value), r(s.value));
+  }, W = ({ detail: p }) => {
+    p.preventDefault(), c(), a.value && w(() => {
+      t ? b(0) : (u(s.value), d(s.value));
     });
-  }, U = ({ detail: f }) => {
-    f.preventDefault(), u(), a.value && E(() => {
-      t ? b(0) : (d(s.value), r(s.value));
+  }, U = ({ detail: p }) => {
+    p.preventDefault(), c(), a.value && w(() => {
+      t ? b(0) : (u(s.value), d(s.value));
     });
   };
-  return p(() => ({
-    ...o.value ? {} : { [I.SPACE]: W },
+  return r(() => ({
+    ...l.value ? {} : { [I.SPACE]: W },
     [I.ENTER]: U,
-    [I.ARROW_DOWN]: x,
-    [I.ARROW_UP]: D,
+    [I.ARROW_DOWN]: O,
+    [I.ARROW_UP]: B,
     [I.END]: y,
-    [I.ESCAPE]: T,
+    [I.ESCAPE]: D,
     [I.HOME]: S,
-    [I.TAB]: C
+    [I.TAB]: E
   }));
-}, Mt = ({ inputContainerRef: e, isDropdownOpen: i }, s) => {
+}, Kt = ({ inputContainerRef: e, isDropdownOpen: i }, s) => {
   const a = () => {
-    i.value && s(), E(() => {
+    i.value && s(), w(() => {
       $e(e);
     });
   };
@@ -529,15 +529,15 @@ const xt = /* @__PURE__ */ Y(wt, [["render", Ot]]), Bt = { class: "b-dropdown-sm
     [m.SPACE]: a
   };
 };
-function Rt(e, i, s, a) {
-  const o = w(e), l = w(i), t = (v, g = []) => g.flatMap((r) => r.label.toLocaleLowerCase().includes(v) ? a != null && a.value && r.items ? [...t(v, r.items)] : [r, ...t(v, r.items)] : r.items ? [...t(v, r.items)] : []);
-  return be(o, () => {
-    s !== void 0 && s(o.value);
-  }), p(() => {
-    if (!o.value || s !== void 0)
-      return l.value;
-    const v = o.value.toLocaleLowerCase();
-    return t(v, l.value);
+function Ft(e, i, s, a) {
+  const l = C(e), o = C(i), t = (v, g = []) => g.flatMap((d) => d.label.toLocaleLowerCase().includes(v) ? a != null && a.value && d.items ? [...t(v, d.items)] : [d, ...t(v, d.items)] : d.items ? [...t(v, d.items)] : []);
+  return Te(l, () => {
+    s !== void 0 && s(l.value);
+  }), r(() => {
+    if (!l.value || s !== void 0)
+      return o.value;
+    const v = l.value.toLocaleLowerCase();
+    return t(v, o.value);
   });
 }
 const Me = {
@@ -554,15 +554,15 @@ const Me = {
     all: "Todos",
     clearFilter: "Limpar filtro"
   }
-}, Pt = Symbol("input field component injection key"), oa = Symbol("input field hint injection key"), na = Symbol("input field parent component injection key"), kt = j({
+}, zt = Symbol("input field component injection key"), ra = Symbol("input field hint injection key"), da = Symbol("input field parent component injection key"), jt = j({
   i18n: { messages: Me },
   name: "b-dropdown",
   components: {
-    DropdownInputDefault: ot,
-    DropdownInputSmall: Nt
+    DropdownInputDefault: it,
+    DropdownInputSmall: Mt
   }
-}), Kt = /* @__PURE__ */ j({
-  ...kt,
+}), Wt = /* @__PURE__ */ j({
+  ...jt,
   props: {
     /**
      * @deprecated from version 2.0.0. Use the aria-label attribute instead.
@@ -653,8 +653,8 @@ const Me = {
      */
     lazyLoadType: {
       type: String,
-      default: ve.props.lazyLoadType.default,
-      validator: (e) => Object.values(ye).includes(e)
+      default: me.props.lazyLoadType.default,
+      validator: (e) => Object.values(ve).includes(e)
     },
     /*
      * If enabled, the user will be able to select multiple items.
@@ -694,7 +694,7 @@ const Me = {
     size: {
       type: String,
       default: null,
-      validator: (e) => Object.values(_).includes(e)
+      validator: (e) => Object.values(J).includes(e)
     },
     /**
      * If enabled, dropdown will display non-selectable, static categories
@@ -738,225 +738,220 @@ const Me = {
   },
   emits: ["input", "show-more"],
   setup(e, { expose: i, emit: s }) {
-    var Ce;
-    const a = Ge(), o = Ne(), l = ct(o), t = e, u = s, { t: v } = he({ messages: Me }), g = w(null), r = w(null), b = w(null), d = w(!1), x = J("bento-dropdown-options-container"), D = J("dropdown-label"), y = J("dropdown-description"), T = J("dropdown-error"), { isReadOnly: C } = st(B(t, "readonly")), { cachedSelectedListboxOptions: S, cachedListboxSelectedValues: W, setCachedValues: U } = dt(
-      B(t, "items"),
-      B(t, "value"),
-      B(t, "multiple"),
-      B(t, "enableValueLabelPair")
-    ), A = w(a["aria-label"]), { ariaLabel: f, label: h } = Ie(t), $ = p(() => v("ariaLabelFallback")), M = nt({
+    var we;
+    const a = at(), l = Ie(), o = vt(l), t = e, c = s, { t: v } = be({ messages: Me }), g = C(null), d = C(null), b = C(null), u = C(!1), O = _("bento-dropdown-options-container"), B = _("dropdown-label"), y = _("dropdown-description"), D = _("dropdown-error"), { isReadOnly: E } = pt(x(t, "readonly")), { cachedSelectedListboxOptions: S, cachedListboxSelectedValues: W, setCachedValues: U } = dt(
+      x(t, "items"),
+      x(t, "value"),
+      x(t, "multiple"),
+      x(t, "enableValueLabelPair")
+    ), N = C(a["aria-label"]), { ariaLabel: p, label: h } = Ne(t), A = r(() => v("ariaLabelFallback")), $ = rt({
       // TODO: take ariaLabel ref away when aria-label prop is removed
-      ariaLabel: f.value || A,
+      ariaLabel: p.value || N,
       label: h,
-      defaultFallback: $
-    }), Le = t.size === _.SMALL || et(Pt, !1), Re = p(() => Le ? _.SMALL : _.DEFAULT), Pe = p(() => ({
+      defaultFallback: A
+    }), he = t.size === J.SMALL || ot(zt, !1), Re = r(() => he ? J.SMALL : J.DEFAULT), Pe = r(() => ({
       "b-dropdown--condensed": t.condensed
-    })), ke = p(() => ({
+    })), ke = r(() => ({
       "b-dropdown__description--error": !!t.errorMessage
-    })), R = w(""), Z = B(t, "items"), Ee = B(t, "staticCategories"), ae = Rt(R, Z, (Ce = t == null ? void 0 : t.search) == null ? void 0 : Ce.searchEvent, Ee), le = p(() => t.dynamicFiltering && !!R.value), Ke = At({
+    })), M = C(""), Z = x(t, "items"), Se = x(t, "staticCategories"), ae = Ft(M, Z, (we = t == null ? void 0 : t.search) == null ? void 0 : we.searchEvent, Se), oe = r(() => t.dynamicFiltering && !!M.value), Ke = Pt({
       items: Z,
-      placeholder: B(t, "placeholder"),
-      isMultiSelect: B(t, "multiple"),
+      placeholder: x(t, "placeholder"),
+      isMultiSelect: x(t, "multiple"),
       selectedValues: S
-    }), Fe = p(() => {
+    }), Fe = r(() => {
       if (t != null && t.multiple && Array.isArray(t.value))
         return t.items.filter(
-          ({ value: c }) => (t == null ? void 0 : t.value) && (t == null ? void 0 : t.value).includes(c)
+          ({ value: f }) => (t == null ? void 0 : t.value) && (t == null ? void 0 : t.value).includes(f)
         );
       if (!t.multiple && t.staticCategories) {
-        const c = t.items.find(
-          (N) => N.items.some((q) => q.value === t.value)
+        const f = t.items.find(
+          (k) => k.items.some((q) => q.value === t.value)
         );
-        return c ? c.items.find((N) => N.value === t.value) : null;
+        return f ? f.items.find((k) => k.value === t.value) : null;
       }
-      return t.items.find(({ value: c }) => c === (t == null ? void 0 : t.value));
-    }), ze = p(() => {
-      const c = ae.value.findIndex(({ value: O }) => t.value === O);
-      return c > -1 ? c : 0;
-    }), { isMultiLevelSelect: je, flattenedItemsList: We } = ut(Z), Ue = p(() => {
+      return t.items.find(({ value: f }) => f === (t == null ? void 0 : t.value));
+    }), ze = r(() => {
+      const f = ae.value.findIndex(({ value: T }) => t.value === T);
+      return f > -1 ? f : 0;
+    }), { isMultiLevelSelect: Le, flattenedItemsList: je } = ut(Z), We = r(() => Le.value && !t.staticCategories), Ue = r(() => We.value ? "treeitem" : "option"), qe = r(() => {
       if (t.multiple) {
-        const c = Array.isArray(t.value) ? t.value.length : 0, O = je.value ? We.value.length : Z.value.length;
-        return c === 0 ? null : !t.hasMoreItems && O > 0 && O === c ? v("all") : c;
+        const f = Array.isArray(t.value) ? t.value.length : 0, T = Le.value ? je.value.length : Z.value.length;
+        return f === 0 ? null : !t.hasMoreItems && T > 0 && T === f ? v("all") : f;
       }
       return null;
-    }), qe = p(
-      () => `${t.description ? y : ""} ${t.errorMessage ? T : ""}`.trim() || null
-    ), He = () => {
-      C.value || (d.value = !0, E(() => {
-        se();
+    }), He = r(
+      () => `${t.description ? y : ""} ${t.errorMessage ? D : ""}`.trim() || null
+    ), Ve = r(() => {
+      var f;
+      return (f = b.value) == null ? void 0 : f.$el;
+    }), { visibleDomOptions: Je, updateVisibleDomOptions: Ee } = ct(
+      Ve,
+      ae,
+      Ue
+    ), _e = () => {
+      E.value || (u.value = !0, w(() => {
+        Ee();
       }));
-    }, oe = () => {
-      d.value = !1;
+    }, le = () => {
+      u.value = !1;
     }, ne = () => {
-      C.value || (d.value = !d.value, E(() => {
-        se();
-      }), le.value && (R.value = ""));
-    }, Ve = () => {
-      le.value && (R.value = ""), d.value && (d.value = !1, b.value.onOutsideDropdownClick());
-    }, _e = (c) => {
-      t.multiple || (R.value = "", d.value = !1), U(c), u("input", W.value);
-    }, Je = () => {
-      u(m.SHOW_MORE);
-    }, we = w([]), se = () => {
-      var O;
-      const c = (O = b.value) == null ? void 0 : O.$el;
-      !c || c.nodeType === Node.COMMENT_NODE || (we.value = Array.from(
-        c.querySelectorAll('[role="option"]')
-      ).filter((N) => N.checkVisibility()));
-    };
-    be(ae, () => {
-      E(() => {
-        se();
-      });
-    });
-    const Ye = $t(
+      E.value || (u.value = !u.value, w(() => {
+        Ee();
+      }), oe.value && (M.value = ""));
+    }, Ye = () => {
+      oe.value && (M.value = ""), u.value && (u.value = !1, b.value.onOutsideDropdownClick());
+    }, Ze = (f) => {
+      t.multiple || (M.value = "", u.value = !1), U(f), c("input", W.value);
+    }, Qe = () => {
+      c(m.SHOW_MORE);
+    }, Xe = kt(
       {
         inputContainerRef: g,
         optionsContainerRef: b,
         selectedValueIndex: ze,
-        isDropdownOpen: d,
-        isDynamicFltering: B(t, "dynamicFiltering"),
-        items: we,
+        isDropdownOpen: u,
+        isDynamicFltering: x(t, "dynamicFiltering"),
+        items: Je,
         isMultiple: t.multiple
       },
       ne,
-      He,
-      oe
-    ), Ze = Mt(
+      _e,
+      le
+    ), Ge = Kt(
       {
         inputContainerRef: g,
-        isDropdownOpen: d
+        isDropdownOpen: u
       },
-      oe
-    ), Qe = {
-      [m.CLOSE_DROPDOWN]: oe,
-      [m.SELECT]: _e,
-      [m.SHOW_MORE]: Je,
-      ...Ze
+      le
+    ), et = {
+      [m.CLOSE_DROPDOWN]: le,
+      [m.SELECT]: Ze,
+      [m.SHOW_MORE]: Qe,
+      ...Ge
     };
-    return t.error && xe(
+    return t.error && Oe(
       'BentoDropdown "error" property',
       `Use the BentoDropdown "errorMessage" property instead to indicate that there is a modifier error.
                         Having the field as "undefined" will hide/remove the error.
                         <bento-dropdown errorMessage="Error message text" />`,
       "2.0.0"
-    ), t.size && xe('BentoDropdown "size" property', "Do not use. Only 'default' size should be used.", "2.0.0"), i({
+    ), t.size && Oe('BentoDropdown "size" property', "Do not use. Only 'default' size should be used.", "2.0.0"), i({
       focus: () => {
         g.value.focus();
       }
-    }), (c, O) => {
-      var N;
-      return ee((L(), k("div", {
-        class: me(["b-dropdown", Pe.value])
+    }), (f, T) => {
+      var k;
+      return ee((L(), P("div", {
+        class: fe(["b-dropdown", Pe.value])
       }, [
-        n(h) ? (L(), K(n(pt), {
+        n(h) ? (L(), K(n(yt), {
           key: 0,
-          id: n(D),
+          id: n(B),
           condensed: e.condensed,
           label: n(h),
           "tooltip-text": e.tooltipText,
           optional: e.optional,
           required: e.required
         }, null, 8, ["id", "condensed", "label", "tooltip-text", "optional", "required"])) : F("", !0),
-        ee((L(), k("div", P({
+        ee((L(), P("div", R({
           ref_key: "inputContainerRefWrapper",
-          ref: r
-        }, G(n(Ye), !0)), [
+          ref: d
+        }, G(n(Xe), !0)), [
           (L(), K(Ae(Re.value), {
             ref_key: "inputContainerRef",
             ref: g,
             condensed: e.condensed,
-            value: R.value,
-            "additional-items-selected": Ue.value,
-            "aria-controls": n(x),
-            ariaExpanded: d.value,
-            "aria-labelledby": n(h) ? n(D) : null,
-            "aria-describedby": qe.value,
-            "aria-label": n(M),
-            "aria-readonly": n(C),
-            readonly: n(C),
+            value: M.value,
+            "additional-items-selected": qe.value,
+            "aria-controls": n(O),
+            ariaExpanded: u.value,
+            "aria-labelledby": n(h) ? n(B) : null,
+            "aria-describedby": He.value,
+            "aria-label": n($),
+            "aria-readonly": n(E),
+            readonly: n(E),
             disabled: e.disabled,
             "display-value": n(Ke),
             "dynamic-filtering": e.dynamicFiltering,
             "is-invalid": !!e.errorMessage || e.error,
             multiple: e.multiple,
-            open: d.value,
-            "selected-value-item": n(Le) ? void 0 : Fe.value,
+            open: u.value,
+            "selected-value-item": n(he) ? void 0 : Fe.value,
             "show-slot-content-in-multiple": e.showSlotContentInMultiple,
-            onInput: O[0] || (O[0] = (q) => R.value = q),
+            onInput: T[0] || (T[0] = (q) => M.value = q),
             onOpen: ne,
             onClose: ne
-          }, ue({ _: 2 }, [
-            ce(n(o), (q, H) => ({
+          }, de({ _: 2 }, [
+            ue(n(l), (q, H) => ({
               name: H,
-              fn: z((ie) => [
-                X(c.$slots, H, pe(fe(ie)), void 0, !0)
+              fn: z((se) => [
+                X(f.$slots, H, ce(pe(se)), void 0, !0)
               ])
             }))
           ]), 1064, ["condensed", "value", "additional-items-selected", "aria-controls", "ariaExpanded", "aria-labelledby", "aria-describedby", "aria-label", "aria-readonly", "readonly", "disabled", "display-value", "dynamic-filtering", "is-invalid", "multiple", "open", "selected-value-item", "show-slot-content-in-multiple"]))
         ], 16)), [
-          [n(rt)]
+          [n(mt)]
         ]),
-        g.value ? (L(), K(n(gt), P({
+        g.value ? (L(), K(n(Et), R({
           key: 1,
-          id: n(x),
+          id: n(O),
           ref_key: "optionsContainerRef",
           ref: b,
-          "aria-label": n(M),
+          "aria-label": n($),
           "component-loading": e.componentLoading,
           "empty-state": e.emptyState,
-          "debounce-time": (N = e.search) == null ? void 0 : N.debounceTime,
+          "debounce-time": (k = e.search) == null ? void 0 : k.debounceTime,
           disabled: e.disabled,
           "is-option-disabled": e.isOptionDisabled,
           items: n(ae),
           multiple: e.multiple,
-          "static-categories": Ee.value,
-          open: d.value,
+          "static-categories": Se.value,
+          open: u.value,
           "selected-value": n(S),
-          searching: le.value,
-          "target-element": r.value,
+          searching: oe.value,
+          "target-element": d.value,
           loading: e.loading,
           "has-more-items": e.hasMoreItems,
           "lazy-load-type": e.lazyLoadType,
           "virtual-scroll": e.virtualScroll
-        }, G(Qe)), ue({ _: 2 }, [
-          ce(n(o), (q, H) => ({
+        }, G(et)), de({ _: 2 }, [
+          ue(n(l), (q, H) => ({
             name: H,
-            fn: z((ie) => [
-              X(c.$slots, H, pe(fe(ie)), void 0, !0)
+            fn: z((se) => [
+              X(f.$slots, H, ce(pe(se)), void 0, !0)
             ])
           }))
         ]), 1040, ["id", "aria-label", "component-loading", "empty-state", "debounce-time", "disabled", "is-option-disabled", "items", "multiple", "static-categories", "open", "selected-value", "searching", "target-element", "loading", "has-more-items", "lazy-load-type", "virtual-scroll"])) : F("", !0),
-        e.errorMessage ? (L(), K(n(ft), {
+        e.errorMessage ? (L(), K(n(bt), {
           key: 2,
-          id: n(T),
+          id: n(D),
           "error-message": e.errorMessage,
           class: "b-dropdown__error-message"
         }, null, 8, ["id", "error-message"])) : F("", !0),
-        e.description || n(l)("description") ? (L(), K(n(at), {
+        e.description || n(o)("description") ? (L(), K(n(nt), {
           key: 3,
           id: n(y),
-          class: me(["b-dropdown__description", ke.value]),
+          class: fe(["b-dropdown__description", ke.value]),
           el: "span"
         }, {
           default: z(() => [
-            X(c.$slots, "description", {}, () => [
-              tt(ge(e.description), 1)
+            X(f.$slots, "description", {}, () => [
+              lt(ye(e.description), 1)
             ], !0)
           ]),
           _: 3
         }, 8, ["id", "class"])) : F("", !0)
       ], 2)), [
-        [n(it), Ve]
+        [n(ft), Ye]
       ]);
     };
   }
-}), sa = /* @__PURE__ */ Y(Kt, [["__scopeId", "data-v-a3c2e9cb"]]);
+}), ua = /* @__PURE__ */ Y(Wt, [["__scopeId", "data-v-288c1407"]]);
 export {
-  sa as B,
-  oa as I,
-  Pt as a,
-  na as b,
-  Rt as u
+  ua as B,
+  ra as I,
+  zt as a,
+  da as b,
+  Ft as u
 };
-//# sourceMappingURL=dropdown.Bj6DK-2v.js.map
+//# sourceMappingURL=dropdown.B5ZaFDn_.js.map