@adyen/bento-vue3 1.3.0 → 1.4.0

package/dist/chunks/{dropdown.8b415aac.js → dropdown.b798a82e.js}

@@ -1,80 +1,81 @@
-import { ref as S, watch as fe, computed as c, defineComponent as X, toRefs as Be, resolveComponent as B, openBlock as m, createBlock as C, resolveDynamicComponent as me, mergeProps as I, withCtx as $, createElementVNode as q, withKeys as Te, createVNode as M, toHandlers as k, createSlots as x, renderList as j, renderSlot as J, normalizeProps as Z, guardReactiveProps as Y, createElementBlock as _, toDisplayString as N, createCommentVNode as E, pushScopeId as ve, popScopeId as be, normalizeClass as ye, withDirectives as W, vShow as ae, nextTick as D, toRef as R, resolveDirective as ie, createTextVNode as z } from "vue";
-import { a as s, B as G, b as F } from "./listbox.0c7c4e5e.js";
-import { B as Ie } from "./directive.0408e565.js";
-import { B as L, a as Re } from "./debounce.f8d92e44.js";
-import { B as Ae, d as Ne, a as Pe } from "./index.222d29b0.js";
-import { g as P } from "./unique-id.a2a2b458.js";
-import { u as Me } from "./use-form-layout-loading.d03e5d48.js";
-import { PopperContainer as H, PopperContainerPosition as se } from "../popper-container.js";
-import { u as ge } from "./i18n.6c402773.js";
-import { BentoPopover as re, BentoPopoverPositions as de } from "../popover.js";
-import { c as ue } from "./button-actions.54e28e75.js";
-import { _ as K } from "./_plugin-vue_export-helper.dad06003.js";
-import { D as Ke, a as A, b as V, c as ze } from "./dropdown-default-textbox.203e747f.js";
-import { E as ke } from "./error-message.ddfe8ea5.js";
+import { ref as $, watch as be, computed as c, defineComponent as ne, toRefs as ve, resolveComponent as R, openBlock as b, createBlock as B, resolveDynamicComponent as ye, mergeProps as A, withCtx as E, createElementVNode as U, withKeys as Ne, createVNode as z, toHandlers as x, createSlots as Z, renderList as Y, renderSlot as G, normalizeProps as Q, guardReactiveProps as X, createElementBlock as O, toDisplayString as P, createCommentVNode as L, pushScopeId as ge, popScopeId as he, normalizeClass as we, withDirectives as q, vShow as de, nextTick as I, toRef as N, resolveDirective as ue, createTextVNode as W } from "vue";
+import { a as s, B as ee, b as te } from "./listbox.6b52af1a.js";
+import { B as Me } from "./directive.0408e565.js";
+import { B as D, a as Pe } from "./debounce.f8d92e44.js";
+import { B as Ke, d as ke } from "./index.89b00b94.js";
+import { g as k } from "./unique-id.a2a2b458.js";
+import { u as le } from "./i18n.6c402773.js";
+import { u as ze } from "./aria-label.ac9651a5.js";
+import { u as Fe } from "./use-form-layout-loading.d03e5d48.js";
+import { PopperContainer as j } from "../popper-container.js";
+import { BentoPopover as ce } from "../popover.js";
+import { BentoButtonActionsLayout as We } from "../button.js";
+import { _ as F } from "./_plugin-vue_export-helper.dad06003.js";
+import { D as xe, a as M, b as J, c as qe } from "./dropdown-default-textbox.a90e84f9.js";
+import { E as Ue } from "./error-message.9acead25.js";
 import "../assets/dropdown.css";
 var T = /* @__PURE__ */ ((e) => (e.DEFAULT = "DropdownInputDefault", e.SMALL = "DropdownInputSmall", e))(T || {});
-const Q = {
+const oe = {
   "en-US": {
     apply: "Apply",
     cancel: "Cancel",
     noOptionsMatchThisSearch: "No options match this search"
   }
-}, We = (e, o, n) => {
-  const t = S(e.value), { t: a } = ge({ messages: Q });
-  fe(e, () => {
+}, He = (e, o, n) => {
+  const t = $(e.value), { t: a } = le({ messages: oe });
+  be(e, () => {
     t.value = e.value;
   });
   const i = c(
     () => JSON.stringify(t.value) === JSON.stringify(e.value)
-  ), l = () => {
+  ), r = () => {
     n(s.SELECT, t.value), n(s.CLOSE_DROPDOWN);
-  }, r = () => {
+  }, d = () => {
     t.value = e.value, n(s.CLOSE_DROPDOWN);
-  }, d = c(() => [
+  }, l = c(() => [
     {
       title: a("apply"),
-      event: l,
+      event: r,
       disabled: i.value
     },
     {
       title: a("cancel"),
-      event: r
+      event: d
     }
-  ]), u = (f) => {
-    t.value = f, o.value || n(s.SELECT, f);
-  }, y = (f) => {
-    u(f), n(s.TAB);
-  }, v = (f) => {
-    u(f), n(s.ENTER);
-  }, g = (f) => {
-    u(f), n(s.SPACE);
-  }, p = () => {
-    r(), n(s.ESCAPE);
-  }, b = () => {
+  ]), f = (v) => {
+    t.value = v, o.value || n(s.SELECT, v);
+  }, _ = (v) => {
+    f(v), n(s.TAB);
+  }, y = (v) => {
+    f(v), n(s.ENTER);
+  }, g = (v) => {
+    f(v), n(s.SPACE);
+  }, m = () => {
+    d(), n(s.ESCAPE);
+  }, h = () => {
     n(s.SHOW_MORE);
-  }, O = {
-    [s.SELECT]: u,
-    [s.SHOW_MORE]: b,
-    [s.TAB]: y,
+  }, C = {
+    [s.SELECT]: f,
+    [s.SHOW_MORE]: h,
+    [s.TAB]: _,
     [s.SPACE]: g,
-    [s.ENTER]: v
+    [s.ENTER]: y
   };
   return {
     // Values
-    actions: d,
+    actions: l,
     internalSelectedValue: t,
     // Methods
-    listeners: O,
-    onEscapeKey: p
+    listeners: C,
+    onEscapeKey: m
   };
-}, Fe = X({
-  i18n: { messages: Q },
+}, Ve = ne({
+  i18n: { messages: oe },
   name: "bento-dropdown-options-container",
   components: {
-    BentoListbox: G,
-    PopperContainer: H,
-    BentoPopover: re
+    BentoListbox: ee,
+    PopperContainer: j,
+    BentoPopover: ce
   },
   props: {
     /**
@@ -108,7 +109,6 @@ const Q = {
     },
     /**
      * Dropdown input size
-     * @see BentoDropdownSize
      */
     inputSize: {
       type: String,
@@ -136,8 +136,8 @@ const Q = {
      */
     lazyLoadType: {
       type: String,
-      default: F.AUTOMATIC,
-      validator: (e) => Object.values(F).includes(e)
+      default: te.AUTOMATIC,
+      validator: (e) => Object.values(te).includes(e)
     },
     /**
      * If enabled, the user will be able to select multiple items.
@@ -163,12 +163,12 @@ const Q = {
      *
      * If enabled, hides the "Select all" checkbox in "multiple" mode.
      */
-    searching: G.props.searching,
+    searching: ee.props.searching,
     /**
      * Reference to the DOM element or Vue component for positioning
      * the Dropdown container.
      */
-    targetElement: { type: H.props.targetElement.type, required: !0 }
+    targetElement: { type: j.props.targetElement.type, required: !0 }
   },
   emits: [
     s.CLOSE_DROPDOWN,
@@ -180,67 +180,68 @@ const Q = {
     s.TAB
   ],
   setup(e, { emit: o, slots: n }) {
-    const { selectedValue: t, multiple: a } = Be(e), i = S(null), { t: l } = ge({ messages: Q }), r = c(() => e.open && !e.disabled), d = c(() => l("noOptionsMatchThisSearch")), u = c(() => ({
+    const { selectedValue: t, multiple: a } = ve(e), i = $(null), { t: r } = le({ messages: oe }), d = c(() => e.open && !e.disabled), l = c(() => r("noOptionsMatchThisSearch")), f = c(() => ({
+      "b-dropdown-options-container--single": !(e != null && e.multiple)
+    })), _ = c(() => ({
       "b-dropdown-options-container__listbox--small": e.inputSize === T.SMALL,
       "b-dropdown-options-container__listbox--single": !(e != null && e.multiple)
-    })), { actions: y, internalSelectedValue: v, listeners: g, onEscapeKey: p } = We(
+    })), { actions: y, internalSelectedValue: g, listeners: m, onEscapeKey: h } = He(
       t,
       a,
       o
-    ), b = c(
-      () => e != null && e.multiple ? re : H
-    ), O = c(
+    ), C = c(
+      () => e != null && e.multiple ? ce : j
+    ), v = c(
       () => {
-        var f;
+        var K;
         return e != null && e.multiple ? {
-          actionsLayout: ue.SPACE_BETWEEN,
+          actionsLayout: We.SPACE_BETWEEN,
           actions: y.value,
           divider: !0,
-          id: P(`dropdown-options-${e.id}`),
+          id: k(`dropdown-options-${e.id}`),
           open: e.open,
-          position: de.BOTTOM_START,
-          style: { width: `${(f = e == null ? void 0 : e.targetElement) == null ? void 0 : f.clientWidth}px` },
+          position: "bottom-start",
+          style: { width: `${(K = e == null ? void 0 : e.targetElement) == null ? void 0 : K.clientWidth}px` },
           targetElement: e.targetElement
         } : {
           matchWidth: !0,
           offset: [0, 8],
-          position: se.BOTTOM_START,
-          style: { display: r.value ? "block" : "none" },
+          position: "bottom-start",
+          style: { display: d.value ? "block" : "none" },
           targetElement: e.targetElement
         };
       }
     );
     return {
       // Values
-      isDropdownOpen: r,
-      conditionalListboxClasses: u,
-      noResultsMessage: d,
+      isDropdownOpen: d,
+      conditionalClasses: f,
+      conditionalListboxClasses: _,
+      noResultsMessage: l,
       slots: n,
       actions: y,
-      internalSelectedValue: v,
+      internalSelectedValue: g,
       // Component wrapper
-      popperContainerOrPopoverComponent: b,
-      popperContainerOrPopoverProps: O,
+      popperContainerOrPopoverComponent: C,
+      popperContainerOrPopoverProps: v,
       // Refs
       dropdownOptionsListboxRef: i,
-      // Enums
-      BentoButtonActionsLayout: ue,
-      BentoPopoverPositions: de,
-      PopperContainerPosition: se,
       // Events
-      onEscapeKey: p,
-      listeners: g
+      onEscapeKey: h,
+      listeners: m
     };
   }
 });
-function qe(e, o, n, t, a, i) {
-  const l = B("bento-listbox");
-  return m(), C(me(e.popperContainerOrPopoverComponent), I({ class: "b-dropdown-options-container" }, e.popperContainerOrPopoverProps), {
-    default: $(() => [
-      q("div", {
-        onKeydown: o[0] || (o[0] = Te((...r) => e.onEscapeKey && e.onEscapeKey(...r), ["esc"]))
+function je(e, o, n, t, a, i) {
+  const r = R("bento-listbox");
+  return b(), B(ye(e.popperContainerOrPopoverComponent), A({
+    class: ["b-dropdown-options-container", e.conditionalClasses]
+  }, e.popperContainerOrPopoverProps), {
+    default: E(() => [
+      U("div", {
+        onKeydown: o[0] || (o[0] = Ne((...d) => e.onEscapeKey && e.onEscapeKey(...d), ["esc"]))
       }, [
-        M(l, I({
+        z(r, A({
           id: e.id,
           ref: "dropdownOptionsListboxRef",
           "aria-label": e.ariaLabel,
@@ -254,68 +255,68 @@ function qe(e, o, n, t, a, i) {
           loading: e.loading,
           "lazy-load-type": e.lazyLoadType,
           "has-more-items": e.hasMoreItems
-        }, k(e.listeners)), x({ _: 2 }, [
-          j(e.slots, (r, d) => ({
-            name: d,
-            fn: $((u) => [
-              J(e.$slots, d, Z(Y(u)), void 0, !0)
+        }, x(e.listeners)), Z({ _: 2 }, [
+          Y(e.slots, (d, l) => ({
+            name: l,
+            fn: E((f) => [
+              G(e.$slots, l, Q(X(f)), void 0, !0)
             ])
           }))
         ]), 1040, ["id", "aria-label", "class", "is-option-disabled", "items", "selected-value", "multiple", "no-results-message", "searching", "loading", "lazy-load-type", "has-more-items"])
       ], 32)
     ]),
     _: 3
-  }, 16);
+  }, 16, ["class"]);
 }
-const Ue = /* @__PURE__ */ K(Fe, [["render", qe], ["__scopeId", "data-v-09e1e41e"]]);
-let ce = 0;
-const He = {
+const Je = /* @__PURE__ */ F(Ve, [["render", je], ["__scopeId", "data-v-de2a5709"]]);
+let fe = 0;
+const Ze = {
   beforeCreate() {
-    this.uuid = ce.toString(), ce += 1;
+    this.uuid = fe.toString(), fe += 1;
   }
-}, Ve = (e) => (ve("data-v-18645fe6"), e = e(), be(), e), xe = { key: 0 }, je = /* @__PURE__ */ Ve(() => /* @__PURE__ */ q("path", {
+}, Ye = (e) => (ge("data-v-18645fe6"), e = e(), he(), e), Ge = { key: 0 }, Qe = /* @__PURE__ */ Ye(() => /* @__PURE__ */ U("path", {
   fill: "#00112C",
   "fill-rule": "evenodd",
   d: "M4.4697 5.96967C4.76259 5.67678 5.23747 5.67678 5.53036 5.96967L8.00003 8.43934L10.4697 5.96967C10.7626 5.67678 11.2375 5.67678 11.5304 5.96967C11.8233 6.26256 11.8233 6.73744 11.5304 7.03033L8.53036 10.0303C8.23747 10.3232 7.76259 10.3232 7.4697 10.0303L4.4697 7.03033C4.17681 6.73744 4.17681 6.26256 4.4697 5.96967Z",
   "clip-rule": "evenodd"
 }, null, -1));
-function Je(e, o, n, t, a, i) {
-  return m(), _("svg", I({ role: "img" }, e.$attrs, {
+function Xe(e, o, n, t, a, i) {
+  return b(), O("svg", A({ role: "img" }, e.$attrs, {
     xmlns: "http://www.w3.org/2000/svg",
     width: "16",
     height: "16",
     fill: "none"
   }), [
-    e.$attrs["svg-title"] ? (m(), _("title", xe, N(e.$attrs["svg-title"]), 1)) : E("", !0),
-    je
+    e.$attrs["svg-title"] ? (b(), O("title", Ge, P(e.$attrs["svg-title"]), 1)) : L("", !0),
+    Qe
   ], 16);
 }
-const Ze = /* @__PURE__ */ K(He, [["render", Je], ["__scopeId", "data-v-18645fe6"]]);
+const et = /* @__PURE__ */ F(Ze, [["render", Xe], ["__scopeId", "data-v-18645fe6"]]);
 let pe = 0;
-const Ye = {
+const tt = {
   beforeCreate() {
     this.uuid = pe.toString(), pe += 1;
   }
-}, Ge = (e) => (ve("data-v-6f20d431"), e = e(), be(), e), Qe = { key: 0 }, Xe = /* @__PURE__ */ Ge(() => /* @__PURE__ */ q("path", {
+}, ot = (e) => (ge("data-v-6f20d431"), e = e(), he(), e), nt = { key: 0 }, lt = /* @__PURE__ */ ot(() => /* @__PURE__ */ U("path", {
   fill: "#00112C",
   "fill-rule": "evenodd",
   d: "M11.5303 10.0303C11.2374 10.3232 10.7626 10.3232 10.4697 10.0303L8 7.56066L5.53033 10.0303C5.23744 10.3232 4.76256 10.3232 4.46967 10.0303C4.17678 9.73744 4.17678 9.26256 4.46967 8.96967L7.46967 5.96967C7.61032 5.82902 7.80109 5.75 8 5.75C8.19891 5.75 8.38968 5.82902 8.53033 5.96967L11.5303 8.96967C11.8232 9.26256 11.8232 9.73744 11.5303 10.0303Z",
   "clip-rule": "evenodd"
 }, null, -1));
-function et(e, o, n, t, a, i) {
-  return m(), _("svg", I({ role: "img" }, e.$attrs, {
+function at(e, o, n, t, a, i) {
+  return b(), O("svg", A({ role: "img" }, e.$attrs, {
     xmlns: "http://www.w3.org/2000/svg",
     width: "16",
     height: "16",
     fill: "none"
   }), [
-    e.$attrs["svg-title"] ? (m(), _("title", Qe, N(e.$attrs["svg-title"]), 1)) : E("", !0),
-    Xe
+    e.$attrs["svg-title"] ? (b(), O("title", nt, P(e.$attrs["svg-title"]), 1)) : L("", !0),
+    lt
   ], 16);
 }
-const tt = /* @__PURE__ */ K(Ye, [["render", et], ["__scopeId", "data-v-6f20d431"]]), ot = X({
+const it = /* @__PURE__ */ F(tt, [["render", at], ["__scopeId", "data-v-6f20d431"]]), st = ne({
   name: "dropdown-small-textbox",
-  components: { ChevronDownSmallIcon: Ze, ChevronUpSmallIcon: tt, DropdownBaseTextbox: Ke },
+  components: { ChevronDownSmallIcon: et, ChevronUpSmallIcon: it, DropdownBaseTextbox: xe },
   inheritAttrs: !1,
   props: {
     /**
@@ -387,43 +388,43 @@ const tt = /* @__PURE__ */ K(Ye, [["render", et], ["__scopeId", "data-v-6f20d431
      */
     value: { type: String, default: "" }
   },
-  emits: [A.OPEN, A.CLOSE],
+  emits: [M.OPEN, M.CLOSE],
   setup(e, { emit: o }) {
     const n = c(() => ({
-      [`b-dropdown-small-textbox--${V.DISABLED}`]: e.disabled,
-      [`b-dropdown-small-textbox--${V.READONLY}`]: e.readonly,
-      [`b-dropdown-small-textbox--${V.OPENED}`]: e.open
+      [`b-dropdown-small-textbox--${J.DISABLED}`]: e.disabled,
+      [`b-dropdown-small-textbox--${J.READONLY}`]: e.readonly,
+      [`b-dropdown-small-textbox--${J.OPENED}`]: e.open
     })), t = c(() => e.open && !e.disabled && !e.readonly), a = () => {
-      o(A.OPEN);
+      o(M.OPEN);
     }, i = () => {
-      o(A.CLOSE);
-    }, l = {
-      [A.OPEN]: a,
-      [A.CLOSE]: i
+      o(M.CLOSE);
+    }, r = {
+      [M.OPEN]: a,
+      [M.CLOSE]: i
     };
     return {
       // Values
       conditionalClasses: n,
       isDropdownOpen: t,
       // Events
-      listeners: l
+      listeners: r
     };
   }
 });
-const nt = { class: "b-dropdown-small-textbox__chevron" };
-function lt(e, o, n, t, a, i) {
-  const l = B("chevron-up-small-icon"), r = B("chevron-down-small-icon"), d = B("dropdown-base-textbox");
-  return m(), _("div", {
-    class: ye(["b-dropdown-small-textbox", e.conditionalClasses])
+const rt = { class: "b-dropdown-small-textbox__chevron" };
+function dt(e, o, n, t, a, i) {
+  const r = R("chevron-up-small-icon"), d = R("chevron-down-small-icon"), l = R("dropdown-base-textbox");
+  return b(), O("div", {
+    class: we(["b-dropdown-small-textbox", e.conditionalClasses])
   }, [
-    M(d, I({ ...e.$attrs, ...e.$props }, { class: "b-dropdown-small-textbox__textbox" }, k(e.listeners)), {
-      icon: $(() => [
-        q("div", nt, [
-          W(M(l, { "svg-title": "opened" }, null, 512), [
-            [ae, e.isDropdownOpen]
+    z(l, A({ ...e.$attrs, ...e.$props }, { class: "b-dropdown-small-textbox__textbox" }, x(e.listeners)), {
+      icon: E(() => [
+        U("div", rt, [
+          q(z(r, { "svg-title": "opened" }, null, 512), [
+            [de, e.isDropdownOpen]
           ]),
-          W(M(r, { "svg-title": "closed" }, null, 512), [
-            [ae, !e.isDropdownOpen]
+          q(z(d, { "svg-title": "closed" }, null, 512), [
+            [de, !e.isDropdownOpen]
           ])
         ])
       ]),
@@ -431,102 +432,113 @@ function lt(e, o, n, t, a, i) {
     }, 16)
   ], 2);
 }
-const at = /* @__PURE__ */ K(ot, [["render", lt], ["__scopeId", "data-v-55bc3614"]]);
-function it(e, o, n) {
-  const t = S(e), a = S(o), i = (r, d = []) => d.flatMap((u) => u.label.toLocaleLowerCase().includes(r) ? [u, ...i(r, u.items)] : u.items ? [...i(r, u.items)] : []);
-  return fe(t, () => {
+const ut = /* @__PURE__ */ F(st, [["render", dt], ["__scopeId", "data-v-55bc3614"]]);
+function ct(e, o, n) {
+  const t = $(e), a = $(o), i = (d, l = []) => l.flatMap((f) => f.label.toLocaleLowerCase().includes(d) ? [f, ...i(d, f.items)] : f.items ? [...i(d, f.items)] : []);
+  return be(t, () => {
     n !== void 0 && n(t.value);
   }), c(() => {
     if (!t.value || n !== void 0)
       return a.value;
-    const r = t.value.toLocaleLowerCase();
-    return i(r, a.value);
+    const d = t.value.toLocaleLowerCase();
+    return i(d, a.value);
   });
 }
-const st = ({ items: e, placeholder: o, selectedValue: n }) => {
+const ft = ({ items: e, placeholder: o, selectedValue: n }) => {
   const t = e.value.find(({ value: a }) => a === n.value);
   return (t == null ? void 0 : t.label) || o.value || null;
-}, rt = ({ selectedValues: e, items: o, placeholder: n }) => e.value ? e.value.map((t) => {
-  const { label: a } = o.value.find(({ value: i }) => i === t);
-  return a;
-}).join(", ") : n.value || null, dt = ({ selectedValues: e, items: o, placeholder: n }) => {
+}, pt = ({ selectedValues: e, items: o, placeholder: n }) => {
   var t;
-  return (t = e.value) != null && t.length ? o.value.reduce((a, i) => {
+  return !e.value || ((t = e.value) == null ? void 0 : t.length) === 0 ? n.value || null : e.value.map((a) => {
+    const { label: i } = o.value.find(({ value: r }) => r === a);
+    return i;
+  }).join(", ");
+}, mt = ({ selectedValues: e, items: o, placeholder: n }) => {
+  var t;
+  return !e.value || !((t = e.value) != null && t.length) ? n.value || null : o.value.reduce((a, i) => {
     if (i.items) {
-      const l = i.items.filter(
-        (d) => e.value.includes(d.value)
+      const r = i.items.filter(
+        (l) => e.value.includes(l.value)
       );
-      l.length === i.items.length ? a.push(i.label) : l.forEach(({ label: d }) => a.push(d));
+      r.length === i.items.length ? a.push(i.label) : r.forEach(({ label: l }) => a.push(l));
     }
     return e.value.includes(i.value) && a.push(i.label), a;
-  }, []).join(", ") : n.value || null;
-}, ut = ({ items: e, placeholder: o, value: n, multiple: t }) => {
-  const a = c(() => e.value.find((l) => {
-    var r;
-    return (r = l.items) == null ? void 0 : r.length;
+  }, []).join(", ");
+}, bt = ({ items: e, placeholder: o, value: n, multiple: t }) => {
+  const a = c(() => e.value.find((r) => {
+    var d;
+    return (d = r.items) == null ? void 0 : d.length;
   }));
-  return c(() => t.value ? a.value ? dt({ selectedValues: n, placeholder: o, items: e }) : rt({ selectedValues: n, items: e, placeholder: o }) : st({ items: e, placeholder: o, selectedValue: n }));
-}, ct = {
+  return c(() => t.value ? a.value ? mt({ selectedValues: n, placeholder: o, items: e }) : pt({ selectedValues: n, items: e, placeholder: o }) : ft({ items: e, placeholder: o, selectedValue: n }));
+}, me = {
   "en-US": {
     optional: "optional",
     required: "required",
-    clearSearch: "Clear filter"
+    clearSearch: "Clear filter",
+    ariaLabelFallback: "Dropdown"
   }
-}, he = (e) => {
-  e.value.$children[0].$refs.textbox.focus();
-}, pt = ({
+}, $e = (e) => {
+  var o;
+  (o = e.value.$children) == null || o[0].$refs.textbox.focus();
+}, vt = ({
   inputContainerRef: e,
   optionsContainerRef: o,
   selectedValueIndex: n,
   isDropdownOpen: t,
   isDynamicFltering: a,
   items: i,
-  isMultiple: l
-}, r, d, u) => {
-  const y = ({ detail: w }) => {
-    w.preventDefault(), t.value || (d(), D(() => {
-      l ? o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children[0].$el.focus() : o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children[n.value].$el.focus();
+  isMultiple: r
+}, d, l, f) => {
+  const _ = ({ detail: u }) => {
+    u.preventDefault(), t.value || (l(), I(() => {
+      var p, S;
+      r ? (p = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || p[0].$el.focus() : (S = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || S[n.value].$el.focus();
     }));
-  }, v = ({ detail: w }) => {
-    w.preventDefault(), t.value || (d(), D(() => {
-      o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children[0].$el.focus();
+  }, y = ({ detail: u }) => {
+    u.preventDefault(), t.value || (l(), I(() => {
+      var p;
+      (p = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || p[0].$el.focus();
     }));
   }, g = () => {
-    t.value || (d(), D(() => {
-      if (l) {
-        const w = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children;
-        o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children[w.length - 1].$children[i.length - 1].$el.focus();
+    t.value || (l(), I(() => {
+      var u, p;
+      if (r) {
+        const S = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children;
+        (u = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || u[S.length - 1].$children[i.length - 1].$el.focus();
       } else
-        o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children[i.length - 1].$el.focus();
+        (p = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || p[i.length - 1].$el.focus();
     }));
-  }, p = () => {
-    t.value && (u(), he(e));
-  }, b = () => {
-    t.value || d(), D(() => {
-      o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children[0].$el.focus();
+  }, m = () => {
+    t.value && (f(), $e(e));
+  }, h = () => {
+    t.value || l(), I(() => {
+      var u;
+      (u = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || u[0].$el.focus();
     });
-  }, O = ({ detail: w }) => {
-    w.preventDefault(), r(), t.value && D(() => {
-      l ? o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children[0].$el.focus() : o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children[n.value].$el.focus();
+  }, C = ({ detail: u }) => {
+    u.preventDefault(), d(), t.value && I(() => {
+      var p, S;
+      r ? (p = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || p[0].$el.focus() : (S = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || S[n.value].$el.focus();
     });
-  }, f = () => {
-    r(), t.value && D(() => {
-      l ? o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children[0].$el.focus() : o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children[n.value].$el.focus();
+  }, v = () => {
+    d(), t.value && I(() => {
+      var u, p;
+      r ? (u = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || u[0].$el.focus() : (p = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || p[n.value].$el.focus();
     });
   };
   return c(() => ({
-    ...a.value ? {} : { [L.SPACE]: O },
-    [L.ENTER]: f,
-    [L.ARROW_DOWN]: y,
-    [L.ARROW_UP]: v,
-    [L.END]: g,
-    [L.ESCAPE]: p,
-    [L.HOME]: b
+    ...a.value ? {} : { [D.SPACE]: C },
+    [D.ENTER]: v,
+    [D.ARROW_DOWN]: _,
+    [D.ARROW_UP]: y,
+    [D.END]: g,
+    [D.ESCAPE]: m,
+    [D.HOME]: h
   }));
-}, ft = ({ inputContainerRef: e, isDropdownOpen: o }, n) => {
+}, yt = ({ inputContainerRef: e, isDropdownOpen: o }, n) => {
   const t = () => {
-    o.value && n(), D(() => {
-      he(e);
+    o.value && n(), I(() => {
+      $e(e);
     });
   };
   return {
@@ -535,18 +547,21 @@ const st = ({ items: e, placeholder: o, selectedValue: n }) => {
     [s.TAB]: t,
     [s.SPACE]: t
   };
-}, mt = X({
-  i18n: { messages: ct },
+}, gt = ne({
+  i18n: { messages: me },
   name: "b-dropdown",
   components: {
-    BentoDropdownOptionsContainer: Ue,
-    BentoTypography: Ae,
-    DropdownInputDefault: ze,
-    DropdownInputSmall: at,
-    ErrorMessage: ke
+    BentoDropdownOptionsContainer: Je,
+    BentoTypography: Ke,
+    DropdownInputDefault: qe,
+    DropdownInputSmall: ut,
+    ErrorMessage: Ue
   },
-  directives: { BentoClickOutsideDirective: Ie, BentoKeyboardNavigationDirective: Re },
+  directives: { BentoClickOutsideDirective: Me, BentoKeyboardNavigationDirective: Pe },
   props: {
+    /**
+     * @deprecated from version 2.0.0. Use the aria-label attribute instead.
+     */
     /**
      * Defines a string value that labels an interactive element.
      */
@@ -625,8 +640,8 @@ const st = ({ items: e, placeholder: o, selectedValue: n }) => {
      */
     lazyLoadType: {
       type: String,
-      default: G.props.lazyLoadType.default,
-      validator: (e) => Object.values(F).includes(e)
+      default: ee.props.lazyLoadType.default,
+      validator: (e) => Object.values(te).includes(e)
     },
     /*
      * If enabled, the user will be able to select multiple items.
@@ -650,7 +665,7 @@ const st = ({ items: e, placeholder: o, selectedValue: n }) => {
     showSlotContentInMultiple: { type: Boolean, default: !1 },
     /**
      * Dropdown input size
-     * @see BentoDropdownSize
+     * * @see BentoDropdownSize
      */
     size: {
       type: String,
@@ -676,151 +691,154 @@ const st = ({ items: e, placeholder: o, selectedValue: n }) => {
     }
   },
   emits: ["input", s.SHOW_MORE],
-  setup(e, { emit: o, slots: n }) {
-    var le;
-    const t = S(null), a = S(null), i = S(null), l = S(!1), r = P("bento-dropdown-options-container"), d = P("dropdown-label"), u = P("dropdown-description"), y = P("dropdown-error"), { isReadOnly: v } = Me(R(e, "readonly")), g = c(() => ({
+  setup(e, { attrs: o, emit: n, slots: t }) {
+    var re;
+    const { t: a } = le({ messages: me }), i = $(null), r = $(null), d = $(null), l = $(!1), f = k("bento-dropdown-options-container"), _ = k("dropdown-label"), y = k("dropdown-description"), g = k("dropdown-error"), { isReadOnly: m } = Fe(N(e, "readonly")), h = $(o["aria-label"]), { ariaLabel: C } = ve(e), v = ze({
+      ariaLabel: h.value,
+      // TODO: take this line away when the aria-label props is removed
+      label: C,
+      defaultFallback: a("ariaLabelFallback")
+    }), K = c(() => ({
       "b-dropdown__description--error": !!e.errorMessage
-    })), p = S(""), b = R(e, "items"), O = it(p, b, (le = e == null ? void 0 : e.search) == null ? void 0 : le.searchEvent), f = c(() => e.dynamicFiltering && !!p.value), ee = ut({
-      items: b,
-      multiple: R(e, "multiple"),
-      placeholder: R(e, "placeholder"),
-      value: R(e, "value")
-    }), w = c(
+    })), u = $(""), p = N(e, "items"), S = ct(u, p, (re = e == null ? void 0 : e.search) == null ? void 0 : re.searchEvent), H = c(() => e.dynamicFiltering && !!u.value), _e = bt({
+      items: p,
+      multiple: N(e, "multiple"),
+      placeholder: N(e, "placeholder"),
+      value: N(e, "value")
+    }), Se = c(() => e.size === T.DEFAULT), Ee = c(
       () => e != null && e.multiple ? e.items.filter(
-        ({ value: h }) => (e == null ? void 0 : e.value) && (e == null ? void 0 : e.value).includes(h)
-      ) : e.items.find(({ value: h }) => h === (e == null ? void 0 : e.value))
-    ), we = c(() => {
-      const h = e.items.findIndex(({ value: De }) => e.value === De);
-      return h > 0 ? h : 0;
-    }), $e = c(() => {
-      var h;
-      return e.multiple ? (h = e == null ? void 0 : e.value) == null ? void 0 : h.length : null;
-    }), Se = c(
-      () => `${e.description ? u : ""} ${e.errorMessage ? y : ""}`.trim() || null
-    ), Ee = () => {
-      v.value || (l.value = !0);
-    }, U = () => {
+        ({ value: w }) => (e == null ? void 0 : e.value) && (e == null ? void 0 : e.value).includes(w)
+      ) : e.items.find(({ value: w }) => w === (e == null ? void 0 : e.value))
+    ), Le = c(() => {
+      const w = e.items.findIndex(({ value: Ae }) => e.value === Ae);
+      return w > 0 ? w : 0;
+    }), Oe = c(() => {
+      var w;
+      return e.multiple ? (w = e == null ? void 0 : e.value) == null ? void 0 : w.length : null;
+    }), Ce = c(
+      () => `${e.description ? y : ""} ${e.errorMessage ? g : ""}`.trim() || null
+    ), De = () => {
+      m.value || (l.value = !0);
+    }, V = () => {
       l.value = !1;
-    }, te = () => {
-      v.value || (l.value = !l.value, f.value && (p.value = ""));
-    }, _e = () => {
-      f.value && (p.value = ""), l.value && (l.value = !1);
-    }, oe = (h) => {
-      e.multiple || (p.value = "", l.value = !1), o("input", h);
-    }, ne = () => {
-      o(s.SHOW_MORE);
-    }, Oe = pt(
+    }, ae = () => {
+      m.value || (l.value = !l.value, H.value && (u.value = ""));
+    }, Be = () => {
+      H.value && (u.value = ""), l.value && (l.value = !1);
+    }, ie = (w) => {
+      e.multiple || (u.value = "", l.value = !1), n("input", w);
+    }, se = () => {
+      n(s.SHOW_MORE);
+    }, Ie = vt(
       {
-        inputContainerRef: t,
-        optionsContainerRef: i,
-        selectedValueIndex: we,
+        inputContainerRef: i,
+        optionsContainerRef: d,
+        selectedValueIndex: Le,
         isDropdownOpen: l,
-        isDynamicFltering: R(e, "dynamicFiltering"),
+        isDynamicFltering: N(e, "dynamicFiltering"),
         items: e.items,
         isMultiple: e.multiple
       },
-      te,
-      Ee,
-      U
-    ), Le = ft(
+      ae,
+      De,
+      V
+    ), Re = yt(
       {
-        inputContainerRef: t,
+        inputContainerRef: i,
         isDropdownOpen: l
       },
-      U
-    ), Ce = {
-      [s.CLOSE_DROPDOWN]: U,
-      [s.SELECT]: oe,
-      [s.SHOW_MORE]: ne,
-      ...Le
+      V
+    ), Te = {
+      [s.CLOSE_DROPDOWN]: V,
+      [s.SELECT]: ie,
+      [s.SHOW_MORE]: se,
+      ...Re
     };
-    return e.error && Ne(
+    return e.error && ke(
       '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" />`,
+                        Having the field as "undefined" will hide/remove the error.
+                        <bento-dropdown errorMessage="Error message text" />`,
       "2.0.0"
     ), {
       // Values
-      additionalItemsSelected: $e,
+      computedAriaLabel: v,
+      additionalItemsSelected: Oe,
+      idDefaultSize: Se,
       isDropdownOpen: l,
-      displayValue: ee,
-      dropdownOptionsContainerId: r,
-      filteredItems: O,
-      isSearching: f,
-      isReadOnly: v,
-      searchTerm: p,
-      labelId: d,
-      descriptionId: u,
-      errorId: y,
-      ariaDescribedBy: Se,
-      selectedValueItem: w,
+      displayValue: _e,
+      dropdownOptionsContainerId: f,
+      filteredItems: S,
+      isSearching: H,
+      isReadOnly: m,
+      searchTerm: u,
+      labelId: _,
+      descriptionId: y,
+      errorId: g,
+      ariaDescribedBy: Ce,
+      selectedValueItem: Ee,
       // Conciliation of Vue2 $scopedSlots and Vue3 $scopes.
       // The setup method and the "useSlots" composible define
       // { slots } as a proxy of $scopedSlots and $scopes in their
       // respective Vue version. Source: https://github.com/vuejs/composition-api/issues/84#issuecomment-524885445
-      slots: n,
-      descriptionConditionalClasses: g,
+      slots: t,
+      descriptionConditionalClasses: K,
       // Refs
-      inputContainerRef: t,
-      inputContainerRefWrapper: a,
-      optionsContainerRef: i,
+      inputContainerRef: i,
+      inputContainerRefWrapper: r,
+      optionsContainerRef: d,
       // Events
-      closeOpenedDropdown: _e,
-      toggleDropdown: te,
-      onOptionSelected: oe,
-      emitShowMoreEvent: ne,
-      textboxKeyboardNavigationListeners: Oe,
-      listboxListeners: Ce,
-      // Enums
-      BentoTypographyElement: Pe,
-      BentoDropdownSize: T,
-      BentoDropdownLazyLoadType: F
+      closeOpenedDropdown: Be,
+      toggleDropdown: ae,
+      onOptionSelected: ie,
+      emitShowMoreEvent: se,
+      textboxKeyboardNavigationListeners: Ie,
+      listboxListeners: Te
     };
   }
 });
-const vt = { class: "b-dropdown" }, bt = ["id"];
-function yt(e, o, n, t, a, i) {
-  var v;
-  const l = B("bento-typography"), r = B("bento-dropdown-options-container"), d = B("error-message"), u = ie("bento-keyboard-navigation-directive"), y = ie("bento-click-outside-directive");
-  return W((m(), _("div", vt, [
-    e.label ? (m(), _("div", {
+const ht = { class: "b-dropdown" }, wt = ["id"];
+function $t(e, o, n, t, a, i) {
+  var y;
+  const r = R("bento-typography"), d = R("bento-dropdown-options-container"), l = R("error-message"), f = ue("bento-keyboard-navigation-directive"), _ = ue("bento-click-outside-directive");
+  return q((b(), O("div", ht, [
+    e.label ? (b(), O("div", {
       key: 0,
       id: e.labelId,
       class: "b-dropdown__label"
     }, [
-      M(l, {
-        el: e.BentoTypographyElement.SPAN,
+      z(r, {
+        el: "span",
         stronger: ""
       }, {
-        default: $(() => [
-          z(N(e.label), 1)
+        default: E(() => [
+          W(P(e.label), 1)
         ]),
         _: 1
-      }, 8, ["el"]),
-      e.optional ? (m(), C(l, {
+      }),
+      e.optional ? (b(), B(r, {
         key: 0,
         class: "b-dropdown__label-requirement",
-        el: e.BentoTypographyElement.SPAN
+        el: "span"
       }, {
-        default: $(() => [
-          z(" (" + N(e.$t("optional")) + ") ", 1)
+        default: E(() => [
+          W(" (" + P(e.$t("optional")) + ") ", 1)
         ]),
         _: 1
-      }, 8, ["el"])) : E("", !0),
-      e.required ? (m(), C(l, {
+      })) : L("", !0),
+      e.required ? (b(), B(r, {
         key: 1,
         class: "b-dropdown__label-requirement",
-        el: e.BentoTypographyElement.SPAN
+        el: "span"
       }, {
-        default: $(() => [
-          z(" (" + N(e.$t("required")) + ") ", 1)
+        default: E(() => [
+          W(" (" + P(e.$t("required")) + ") ", 1)
         ]),
         _: 1
-      }, 8, ["el"])) : E("", !0)
-    ], 8, bt)) : E("", !0),
-    W((m(), _("div", I({ ref: "inputContainerRefWrapper" }, k(e.textboxKeyboardNavigationListeners, !0)), [
-      (m(), C(me(e.size), {
+      })) : L("", !0)
+    ], 8, wt)) : L("", !0),
+    q((b(), O("div", A({ ref: "inputContainerRefWrapper" }, x(e.textboxKeyboardNavigationListeners, !0)), [
+      (b(), B(ye(e.size), {
         ref: "inputContainerRef",
         value: e.searchTerm,
         "additional-items-selected": e.additionalItemsSelected,
@@ -828,7 +846,7 @@ function yt(e, o, n, t, a, i) {
         ariaExpanded: e.isDropdownOpen,
         "aria-labelledby": e.label ? e.labelId : null,
         "aria-describedby": e.ariaDescribedBy,
-        "aria-label": e.ariaLabel ? e.ariaLabel : null,
+        "aria-label": e.computedAriaLabel,
         "aria-readonly": e.isReadOnly,
         readonly: e.isReadOnly,
         disabled: e.disabled,
@@ -837,28 +855,28 @@ function yt(e, o, n, t, a, i) {
         "is-invalid": !!e.errorMessage || e.error,
         multiple: e.multiple,
         open: e.isDropdownOpen,
-        "selected-value-item": e.size === e.BentoDropdownSize.DEFAULT ? e.selectedValueItem : void 0,
+        "selected-value-item": e.idDefaultSize ? e.selectedValueItem : void 0,
         "show-slot-content-in-multiple": e.showSlotContentInMultiple,
         onInput: o[0] || (o[0] = (g) => e.searchTerm = g),
         onOpen: e.toggleDropdown,
         onClose: e.toggleDropdown
-      }, x({ _: 2 }, [
-        j(e.slots, (g, p) => ({
-          name: p,
-          fn: $((b) => [
-            J(e.$slots, p, Z(Y(b)), void 0, !0)
+      }, Z({ _: 2 }, [
+        Y(e.slots, (g, m) => ({
+          name: m,
+          fn: E((h) => [
+            G(e.$slots, m, Q(X(h)), void 0, !0)
           ])
         }))
       ]), 1064, ["value", "additional-items-selected", "ariaControls", "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", "onOpen", "onClose"]))
     ], 16)), [
-      [u]
+      [f]
     ]),
-    e.inputContainerRef ? (m(), C(r, I({
+    e.inputContainerRef ? (b(), B(d, A({
       key: 1,
       id: e.dropdownOptionsContainerId,
       ref: "optionsContainerRef",
-      "aria-label": e.ariaLabel,
-      "debounce-time": (v = e.search) == null ? void 0 : v.debounceTime,
+      "aria-label": e.computedAriaLabel,
+      "debounce-time": (y = e.search) == null ? void 0 : y.debounceTime,
       disabled: e.disabled,
       "input-size": e.size,
       "is-option-disabled": e.isOptionDisabled,
@@ -871,39 +889,39 @@ function yt(e, o, n, t, a, i) {
       loading: e.loading,
       "has-more-items": e.hasMoreItems,
       "lazy-load-type": e.lazyLoadType
-    }, k(e.listboxListeners)), x({ _: 2 }, [
-      j(e.slots, (g, p) => ({
-        name: p,
-        fn: $((b) => [
-          J(e.$slots, p, Z(Y(b)), void 0, !0)
+    }, x(e.listboxListeners)), Z({ _: 2 }, [
+      Y(e.slots, (g, m) => ({
+        name: m,
+        fn: E((h) => [
+          G(e.$slots, m, Q(X(h)), void 0, !0)
         ])
       }))
-    ]), 1040, ["id", "aria-label", "debounce-time", "disabled", "input-size", "is-option-disabled", "items", "multiple", "open", "selected-value", "searching", "target-element", "loading", "has-more-items", "lazy-load-type"])) : E("", !0),
-    e.errorMessage ? (m(), C(d, {
+    ]), 1040, ["id", "aria-label", "debounce-time", "disabled", "input-size", "is-option-disabled", "items", "multiple", "open", "selected-value", "searching", "target-element", "loading", "has-more-items", "lazy-load-type"])) : L("", !0),
+    e.errorMessage ? (b(), B(l, {
       key: 2,
       id: e.errorId,
       "error-message": e.errorMessage,
       class: "b-dropdown__error-message"
-    }, null, 8, ["id", "error-message"])) : E("", !0),
-    e.description ? (m(), C(l, {
+    }, null, 8, ["id", "error-message"])) : L("", !0),
+    e.description ? (b(), B(r, {
       key: 3,
       id: e.descriptionId,
-      class: ye(["b-dropdown__description", e.descriptionConditionalClasses]),
-      el: e.BentoTypographyElement.SPAN
+      class: we(["b-dropdown__description", e.descriptionConditionalClasses]),
+      el: "span"
     }, {
-      default: $(() => [
-        z(N(e.description), 1)
+      default: E(() => [
+        W(P(e.description), 1)
       ]),
       _: 1
-    }, 8, ["id", "class", "el"])) : E("", !0)
+    }, 8, ["id", "class"])) : L("", !0)
   ])), [
-    [y, e.closeOpenedDropdown]
+    [_, e.closeOpenedDropdown]
   ]);
 }
-const Rt = /* @__PURE__ */ K(mt, [["render", yt], ["__scopeId", "data-v-a62031bf"]]);
+const Kt = /* @__PURE__ */ F(gt, [["render", $t], ["__scopeId", "data-v-79de8f04"]]);
 export {
-  Rt as B,
+  Kt as B,
   T as a,
-  it as u
+  ct as u
 };
-//# sourceMappingURL=dropdown.8b415aac.js.map
+//# sourceMappingURL=dropdown.b798a82e.js.map