@adyen/bento-vue3 1.0.0 → 1.1.0

package/dist/chunks/{dropdown.751d23b5.js → dropdown.374481a8.js}

@@ -1,81 +1,80 @@
-import { ref as _, watch as ce, computed as c, defineComponent as X, toRefs as Le, resolveComponent as D, openBlock as f, createBlock as L, resolveDynamicComponent as pe, mergeProps as A, withCtx as S, createElementVNode as W, withKeys as Be, createVNode as M, toHandlers as k, createSlots as H, renderList as j, renderSlot as J, normalizeProps as Z, guardReactiveProps as Y, createElementBlock as w, toDisplayString as N, createCommentVNode as E, pushScopeId as fe, popScopeId as me, normalizeClass as ye, withDirectives as F, vShow as oe, nextTick as B, toRef as P, resolveDirective as le, createTextVNode as z } from "vue";
-import { D as De, a as I, b as U, c as Te } from "./dropdown-default-textbox.ae46144f.js";
+import { ref as E, watch as pe, computed as c, defineComponent as Q, toRefs as De, resolveComponent as B, openBlock as m, createBlock as L, resolveDynamicComponent as fe, mergeProps as I, withCtx as S, createElementVNode as F, withKeys as Be, createVNode as M, toHandlers as k, createSlots as V, renderList as x, renderSlot as j, normalizeProps as J, guardReactiveProps as Z, createElementBlock as O, toDisplayString as A, createCommentVNode as _, pushScopeId as me, popScopeId as ve, normalizeClass as ye, withDirectives as W, vShow as le, nextTick as D, toRef as N, resolveDirective as ae, createTextVNode as z } from "vue";
+import { a as s, B as Y, b as be } from "./listbox.ceacb0ca.js";
+import { B as Te } from "./directive.0408e565.js";
+import { B as C, a as Ie } from "./debounce.f8d92e44.js";
+import { B as Re, d as Ae, a as Ne } from "./index.92f7d550.js";
+import { g as P } from "./unique-id.a2a2b458.js";
+import { PopperContainer as U, PopperContainerPosition as ie } from "../popper-container.js";
+import { u as ge } from "./i18n.6c402773.js";
+import { BentoPopover as se, BentoPopoverPositions as re } from "../popover.js";
+import { c as de } from "./button-actions.59449cda.js";
 import { _ as K } from "./_plugin-vue_export-helper.dad06003.js";
-import { B as Ae, d as Ie, c as Ne } from "./index.1d501e31.js";
-import { g as R } from "./unique-id.a2a2b458.js";
-import { a as s, B as G, b as ve } from "./listbox.b34141cd.js";
-import { B as O, a as Pe } from "./debounce.f8d92e44.js";
-import { PopperContainer as V, PopperContainerPosition as ae } from "../popper-container.js";
-import { u as be } from "./i18n.3619d46c.js";
-import { BentoPopover as ie, BentoPopoverPositions as se } from "../popover.js";
-import { c as re } from "./button-actions.1dcbde15.js";
-import { E as Re } from "./error-message.f9c2a4be.js";
-import { B as Me } from "./directive.0408e565.js";
+import { D as Pe, a as R, b as H, c as Me } from "./dropdown-default-textbox.2ac50ee2.js";
+import { E as Ke } from "./error-message.a65a9abf.js";
 import "../assets/dropdown.css";
 var T = /* @__PURE__ */ ((e) => (e.DEFAULT = "DropdownInputDefault", e.SMALL = "DropdownInputSmall", e))(T || {});
-const Q = {
+const G = {
   "en-US": {
     apply: "Apply",
     cancel: "Cancel",
     noOptionsMatchThisSearch: "No options match this search"
   }
-}, Ke = (e, n, o) => {
-  const t = _(e.value), { t: a } = be({ messages: Q });
-  ce(e, () => {
+}, ze = (e, o, n) => {
+  const t = E(e.value), { t: a } = ge({ messages: G });
+  pe(e, () => {
     t.value = e.value;
   });
-  const l = c(
+  const i = c(
     () => JSON.stringify(t.value) === JSON.stringify(e.value)
-  ), r = () => {
-    o(s.SELECT, t.value), o(s.CLOSE_DROPDOWN);
-  }, i = () => {
-    t.value = e.value, o(s.CLOSE_DROPDOWN);
+  ), l = () => {
+    n(s.SELECT, t.value), n(s.CLOSE_DROPDOWN);
+  }, r = () => {
+    t.value = e.value, n(s.CLOSE_DROPDOWN);
   }, d = c(() => [
     {
       title: a("apply"),
-      event: r,
-      disabled: l.value
+      event: l,
+      disabled: i.value
     },
     {
       title: a("cancel"),
-      event: i
+      event: r
     }
-  ]), u = (m) => {
-    t.value = m, n.value || o(s.SELECT, m);
-  }, h = (m) => {
-    u(m), o(s.TAB);
-  }, p = (m) => {
-    u(m), o(s.ENTER);
-  }, b = (m) => {
-    u(m), o(s.SPACE);
-  }, y = () => {
-    i(), o(s.ESCAPE);
+  ]), u = (f) => {
+    t.value = f, o.value || n(s.SELECT, f);
+  }, y = (f) => {
+    u(f), n(s.TAB);
+  }, h = (f) => {
+    u(f), n(s.ENTER);
+  }, p = (f) => {
+    u(f), n(s.SPACE);
   }, v = () => {
-    o(s.SHOW_MORE);
-  }, C = {
+    r(), n(s.ESCAPE);
+  }, b = () => {
+    n(s.SHOW_MORE);
+  }, w = {
     [s.SELECT]: u,
-    [s.SHOW_MORE]: v,
-    [s.TAB]: h,
-    [s.SPACE]: b,
-    [s.ENTER]: p
+    [s.SHOW_MORE]: b,
+    [s.TAB]: y,
+    [s.SPACE]: p,
+    [s.ENTER]: h
   };
   return {
     // Values
     actions: d,
     internalSelectedValue: t,
     // Methods
-    listeners: C,
-    onEscapeKey: y
+    listeners: w,
+    onEscapeKey: v
   };
-}, ze = X({
-  i18n: { messages: Q },
+}, ke = Q({
+  i18n: { messages: G },
   name: "bento-dropdown-options-container",
   components: {
-    BentoListbox: G,
-    PopperContainer: V,
-    BentoPopover: ie
+    BentoListbox: Y,
+    PopperContainer: U,
+    BentoPopover: se
   },
-  inheritAttrs: !1,
   props: {
     /**
      * Defines a string value that labels an interactive element.
@@ -136,7 +135,7 @@ const Q = {
      */
     lazyLoadType: {
       type: String,
-      default: ve.AUTOMATIC
+      default: be.AUTOMATIC
     },
     /**
      * If enabled, the user will be able to select multiple items.
@@ -162,12 +161,12 @@ const Q = {
      *
      * If enabled, hides the "Select all" checkbox in "multiple" mode.
      */
-    searching: G.props.searching,
+    searching: Y.props.searching,
     /**
      * Reference to the DOM element or Vue component for positioning
      * the Dropdown container.
      */
-    targetElement: { type: V.props.targetElement.type, required: !0 }
+    targetElement: { type: U.props.targetElement.type, required: !0 }
   },
   emits: [
     s.CLOSE_DROPDOWN,
@@ -178,70 +177,70 @@ const Q = {
     s.SPACE,
     s.TAB
   ],
-  setup(e, { emit: n, slots: o }) {
-    const { selectedValue: t, multiple: a } = Le(e), l = _(null), { t: r } = be({ messages: Q }), i = c(() => e.open && !e.disabled), d = c(() => r("noOptionsMatchThisSearch")), u = c(() => ({
+  setup(e, { emit: o, slots: n }) {
+    const { selectedValue: t, multiple: a } = De(e), i = E(null), { t: l } = ge({ messages: G }), r = c(() => e.open && !e.disabled), d = c(() => l("noOptionsMatchThisSearch")), u = c(() => ({
       "b-dropdown-options-container__listbox--small": e.inputSize === T.SMALL,
       "b-dropdown-options-container__listbox--single": !(e != null && e.multiple)
-    })), { actions: h, internalSelectedValue: p, listeners: b, onEscapeKey: y } = Ke(
+    })), { actions: y, internalSelectedValue: h, listeners: p, onEscapeKey: v } = ze(
       t,
       a,
-      n
-    ), v = c(
-      () => e != null && e.multiple ? ie : V
-    ), C = c(
+      o
+    ), b = c(
+      () => e != null && e.multiple ? se : U
+    ), w = c(
       () => {
-        var m;
+        var f;
         return e != null && e.multiple ? {
-          actionsLayout: re.SPACE_BETWEEN,
-          actions: h.value,
+          actionsLayout: de.SPACE_BETWEEN,
+          actions: y.value,
           divider: !0,
-          id: R(`dropdown-options-${e.id}`),
+          id: P(`dropdown-options-${e.id}`),
           open: e.open,
-          position: se.BOTTOM_START,
-          style: { width: `${(m = e == null ? void 0 : e.targetElement) == null ? void 0 : m.clientWidth}px` },
+          position: re.BOTTOM_START,
+          style: { width: `${(f = e == null ? void 0 : e.targetElement) == null ? void 0 : f.clientWidth}px` },
           targetElement: e.targetElement
         } : {
           matchWidth: !0,
           offset: [0, 8],
-          position: ae.BOTTOM_START,
-          style: { display: i.value ? "block" : "none" },
+          position: ie.BOTTOM_START,
+          style: { display: r.value ? "block" : "none" },
           targetElement: e.targetElement
         };
       }
     );
     return {
       // Values
-      isDropdownOpen: i,
+      isDropdownOpen: r,
       conditionalListboxClasses: u,
       noResultsMessage: d,
-      slots: o,
-      actions: h,
-      internalSelectedValue: p,
+      slots: n,
+      actions: y,
+      internalSelectedValue: h,
       // Component wrapper
-      popperContainerOrPopoverComponent: v,
-      popperContainerOrPopoverProps: C,
+      popperContainerOrPopoverComponent: b,
+      popperContainerOrPopoverProps: w,
       // Refs
-      listboxRef: l,
+      dropdownOptionsListboxRef: i,
       // Enums
-      BentoButtonActionsLayout: re,
-      BentoPopoverPositions: se,
-      PopperContainerPosition: ae,
+      BentoButtonActionsLayout: de,
+      BentoPopoverPositions: re,
+      PopperContainerPosition: ie,
       // Events
-      onEscapeKey: y,
-      listeners: b
+      onEscapeKey: v,
+      listeners: p
     };
   }
 });
-function ke(e, n, o, t, a, l) {
-  const r = D("bento-listbox");
-  return f(), L(pe(e.popperContainerOrPopoverComponent), A({ class: "b-dropdown-options-container" }, e.popperContainerOrPopoverProps), {
+function We(e, o, n, t, a, i) {
+  const l = B("bento-listbox");
+  return m(), L(fe(e.popperContainerOrPopoverComponent), I({ class: "b-dropdown-options-container" }, e.popperContainerOrPopoverProps), {
     default: S(() => [
-      W("div", {
-        onKeydown: n[0] || (n[0] = Be((...i) => e.onEscapeKey && e.onEscapeKey(...i), ["esc"]))
+      F("div", {
+        onKeydown: o[0] || (o[0] = Be((...r) => e.onEscapeKey && e.onEscapeKey(...r), ["esc"]))
       }, [
-        M(r, A({
+        M(l, I({
           id: e.id,
-          ref: "listboxRef",
+          ref: "dropdownOptionsListboxRef",
           "aria-label": e.ariaLabel,
           class: ["b-dropdown-options-container__listbox", e.conditionalListboxClasses],
           "is-option-disabled": e.isOptionDisabled,
@@ -253,11 +252,11 @@ function ke(e, n, o, t, a, l) {
           loading: e.loading,
           "lazy-load-type": e.lazyLoadType,
           "has-more-items": e.hasMoreItems
-        }, k(e.listeners)), H({ _: 2 }, [
-          j(e.slots, (i, d) => ({
+        }, k(e.listeners)), V({ _: 2 }, [
+          x(e.slots, (r, d) => ({
             name: d,
             fn: S((u) => [
-              J(e.$slots, d, Z(Y(u)), void 0, !0)
+              j(e.$slots, d, J(Z(u)), 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"])
@@ -266,55 +265,55 @@ function ke(e, n, o, t, a, l) {
     _: 3
   }, 16);
 }
-const Fe = /* @__PURE__ */ K(ze, [["render", ke], ["__scopeId", "data-v-81aeee50"]]);
-let de = 0;
-const We = {
+const Fe = /* @__PURE__ */ K(ke, [["render", We], ["__scopeId", "data-v-44a22fa9"]]);
+let ue = 0;
+const qe = {
   beforeCreate() {
-    this.uuid = de.toString(), de += 1;
+    this.uuid = ue.toString(), ue += 1;
   }
-}, qe = (e) => (fe("data-v-18645fe6"), e = e(), me(), e), Ue = { key: 0 }, Ve = /* @__PURE__ */ qe(() => /* @__PURE__ */ W("path", {
+}, Ue = (e) => (me("data-v-18645fe6"), e = e(), ve(), e), He = { key: 0 }, Ve = /* @__PURE__ */ Ue(() => /* @__PURE__ */ F("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 He(e, n, o, t, a, l) {
-  return f(), w("svg", A({ role: "img" }, e.$attrs, {
+function xe(e, o, n, t, a, i) {
+  return m(), O("svg", I({ role: "img" }, e.$attrs, {
     xmlns: "http://www.w3.org/2000/svg",
     width: "16",
     height: "16",
     fill: "none"
   }), [
-    e.$attrs["svg-title"] ? (f(), w("title", Ue, N(e.$attrs["svg-title"]), 1)) : E("", !0),
+    e.$attrs["svg-title"] ? (m(), O("title", He, A(e.$attrs["svg-title"]), 1)) : _("", !0),
     Ve
   ], 16);
 }
-const je = /* @__PURE__ */ K(We, [["render", He], ["__scopeId", "data-v-18645fe6"]]);
-let ue = 0;
+const je = /* @__PURE__ */ K(qe, [["render", xe], ["__scopeId", "data-v-18645fe6"]]);
+let ce = 0;
 const Je = {
   beforeCreate() {
-    this.uuid = ue.toString(), ue += 1;
+    this.uuid = ce.toString(), ce += 1;
   }
-}, Ze = (e) => (fe("data-v-6f20d431"), e = e(), me(), e), Ye = { key: 0 }, Ge = /* @__PURE__ */ Ze(() => /* @__PURE__ */ W("path", {
+}, Ze = (e) => (me("data-v-6f20d431"), e = e(), ve(), e), Ye = { key: 0 }, Ge = /* @__PURE__ */ Ze(() => /* @__PURE__ */ F("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 Qe(e, n, o, t, a, l) {
-  return f(), w("svg", A({ role: "img" }, e.$attrs, {
+function Qe(e, o, n, t, a, i) {
+  return m(), O("svg", I({ role: "img" }, e.$attrs, {
     xmlns: "http://www.w3.org/2000/svg",
     width: "16",
     height: "16",
     fill: "none"
   }), [
-    e.$attrs["svg-title"] ? (f(), w("title", Ye, N(e.$attrs["svg-title"]), 1)) : E("", !0),
+    e.$attrs["svg-title"] ? (m(), O("title", Ye, A(e.$attrs["svg-title"]), 1)) : _("", !0),
     Ge
   ], 16);
 }
-const Xe = /* @__PURE__ */ K(Je, [["render", Qe], ["__scopeId", "data-v-6f20d431"]]), xe = X({
+const Xe = /* @__PURE__ */ K(Je, [["render", Qe], ["__scopeId", "data-v-6f20d431"]]), et = Q({
   name: "dropdown-small-textbox",
-  components: { ChevronDownSmallIcon: je, ChevronUpSmallIcon: Xe, DropdownBaseTextbox: De },
+  components: { ChevronDownSmallIcon: je, ChevronUpSmallIcon: Xe, DropdownBaseTextbox: Pe },
   props: {
     /**
      * The number of additional items that have been selected in the dropdown.
@@ -385,43 +384,43 @@ const Xe = /* @__PURE__ */ K(Je, [["render", Qe], ["__scopeId", "data-v-6f20d431
      */
     value: { type: String, default: "" }
   },
-  emits: [I.OPEN, I.CLOSE],
-  setup(e, { emit: n }) {
-    const o = c(() => ({
-      [`b-dropdown-small-textbox--${U.DISABLED}`]: e.disabled,
-      [`b-dropdown-small-textbox--${U.READONLY}`]: e.readonly,
-      [`b-dropdown-small-textbox--${U.OPENED}`]: e.open
+  emits: [R.OPEN, R.CLOSE],
+  setup(e, { emit: o }) {
+    const n = c(() => ({
+      [`b-dropdown-small-textbox--${H.DISABLED}`]: e.disabled,
+      [`b-dropdown-small-textbox--${H.READONLY}`]: e.readonly,
+      [`b-dropdown-small-textbox--${H.OPENED}`]: e.open
     })), t = c(() => e.open && !e.disabled && !e.readonly), a = () => {
-      n(I.OPEN);
-    }, l = () => {
-      n(I.CLOSE);
-    }, r = {
-      [I.OPEN]: a,
-      [I.CLOSE]: l
+      o(R.OPEN);
+    }, i = () => {
+      o(R.CLOSE);
+    }, l = {
+      [R.OPEN]: a,
+      [R.CLOSE]: i
     };
     return {
       // Values
-      conditionalClasses: o,
+      conditionalClasses: n,
       isDropdownOpen: t,
       // Events
-      listeners: r
+      listeners: l
     };
   }
 });
-const et = { class: "b-dropdown-small-textbox__chevron" };
-function tt(e, n, o, t, a, l) {
-  const r = D("chevron-up-small-icon"), i = D("chevron-down-small-icon"), d = D("dropdown-base-textbox");
-  return f(), w("div", {
+const tt = { class: "b-dropdown-small-textbox__chevron" };
+function ot(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(), O("div", {
     class: ye(["b-dropdown-small-textbox", e.conditionalClasses])
   }, [
-    M(d, A({ ...e.$attrs, ...e.$props }, { class: "b-dropdown-small-textbox__textbox" }, k(e.listeners)), {
+    M(d, I({ ...e.$attrs, ...e.$props }, { class: "b-dropdown-small-textbox__textbox" }, k(e.listeners)), {
       icon: S(() => [
-        W("div", et, [
-          F(M(r, { "svg-title": "opened" }, null, 512), [
-            [oe, e.isDropdownOpen]
+        F("div", tt, [
+          W(M(l, { "svg-title": "opened" }, null, 512), [
+            [le, e.isDropdownOpen]
           ]),
-          F(M(i, { "svg-title": "closed" }, null, 512), [
-            [oe, !e.isDropdownOpen]
+          W(M(r, { "svg-title": "closed" }, null, 512), [
+            [le, !e.isDropdownOpen]
           ])
         ])
       ]),
@@ -429,118 +428,121 @@ function tt(e, n, o, t, a, l) {
     }, 16)
   ], 2);
 }
-const nt = /* @__PURE__ */ K(xe, [["render", tt], ["__scopeId", "data-v-076c3c8e"]]);
-function ot(e, n, o) {
-  const t = _(e), a = _(n), l = (i, d = []) => d.flatMap((u) => u.label.toLocaleLowerCase().includes(i) ? [u, ...l(i, u.items)] : u.items ? [...l(i, u.items)] : []);
-  return ce(t, () => {
-    o !== void 0 && o(t.value);
+const nt = /* @__PURE__ */ K(et, [["render", ot], ["__scopeId", "data-v-076c3c8e"]]);
+function lt(e, o, n) {
+  const t = E(e), a = E(o), i = (r, d = []) => d.flatMap((u) => u.label.toLocaleLowerCase().includes(r) ? [u, ...i(r, u.items)] : u.items ? [...i(r, u.items)] : []);
+  return pe(t, () => {
+    n !== void 0 && n(t.value);
   }), c(() => {
-    if (!t.value || o !== void 0)
+    if (!t.value || n !== void 0)
       return a.value;
-    const i = t.value.toLocaleLowerCase();
-    return l(i, a.value);
+    const r = t.value.toLocaleLowerCase();
+    return i(r, a.value);
   });
 }
-const lt = ({ items: e, placeholder: n, selectedValue: o }) => {
-  const t = e.value.find(({ value: a }) => a === o.value);
-  return (t == null ? void 0 : t.label) || n.value || null;
-}, at = ({ selectedValues: e, items: n, placeholder: o }) => e.value ? e.value.map((t) => {
-  const { label: a } = n.value.find(({ value: l }) => l === t);
+const at = ({ 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;
+}, it = ({ 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(", ") : o.value || null, it = ({ selectedValues: e, items: n, placeholder: o }) => {
+}).join(", ") : n.value || null, st = ({ selectedValues: e, items: o, placeholder: n }) => {
   var t;
-  return (t = e.value) != null && t.length ? n.value.reduce((a, l) => {
-    if (l.items) {
-      const r = l.items.filter(
+  return (t = e.value) != null && t.length ? o.value.reduce((a, i) => {
+    if (i.items) {
+      const l = i.items.filter(
         (d) => e.value.includes(d.value)
       );
-      r.length === l.items.length ? a.push(l.label) : r.forEach(({ label: d }) => a.push(d));
+      l.length === i.items.length ? a.push(i.label) : l.forEach(({ label: d }) => a.push(d));
     }
-    return e.value.includes(l.value) && a.push(l.label), a;
-  }, []).join(", ") : o.value || null;
-}, st = ({ items: e, placeholder: n, value: o, multiple: t }) => {
-  const a = c(() => e.value.find((r) => {
-    var i;
-    return (i = r.items) == null ? void 0 : i.length;
+    return e.value.includes(i.value) && a.push(i.label), a;
+  }, []).join(", ") : n.value || null;
+}, rt = ({ 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;
   }));
-  return c(() => t.value ? a.value ? it({ selectedValues: o, placeholder: n, items: e }) : at({ selectedValues: o, items: e, placeholder: n }) : lt({ items: e, placeholder: n, selectedValue: o }));
-}, rt = {
+  return c(() => t.value ? a.value ? st({ selectedValues: n, placeholder: o, items: e }) : it({ selectedValues: n, items: e, placeholder: o }) : at({ items: e, placeholder: o, selectedValue: n }));
+}, dt = {
   "en-US": {
     optional: "optional",
     required: "required",
     clearSearch: "Clear filter"
   }
-}, ge = (e) => {
+}, he = (e) => {
   e.value.$children[0].$refs.textbox.focus();
-}, dt = ({ inputContainerRef: e, optionsContainerRef: n, selectedValueIndex: o, isDropdownOpen: t, isDynamicFltering: a, items: l }, r, i, d) => {
-  const u = ({ detail: $ }) => {
-    $.preventDefault(), t.value || (i(), B(() => {
-      n.value.$refs.listboxRef.$children[o.value].$el.focus();
+}, ut = ({
+  inputContainerRef: e,
+  optionsContainerRef: o,
+  selectedValueIndex: n,
+  isDropdownOpen: t,
+  isDynamicFltering: a,
+  items: i,
+  isMultiple: l
+}, r, d, u) => {
+  const y = ({ detail: $ }) => {
+    $.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();
     }));
   }, h = ({ detail: $ }) => {
-    $.preventDefault(), t.value || (i(), B(() => {
-      n.value.$refs.listboxRef.$children[0].$el.focus();
+    $.preventDefault(), t.value || (d(), D(() => {
+      o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children[0].$el.focus();
     }));
   }, p = () => {
-    t.value || (i(), B(() => {
-      n.value.$refs.listboxRef.$children[l.length - 1].$el.focus();
+    t.value || (d(), D(() => {
+      if (l) {
+        const $ = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children;
+        o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children[$.length - 1].$children[i.length - 1].$el.focus();
+      } else
+        o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children[i.length - 1].$el.focus();
     }));
+  }, v = () => {
+    t.value && (u(), he(e));
   }, b = () => {
-    t.value && (d(), ge(e));
-  }, y = () => {
-    t.value || i(), B(() => {
-      n.value.$refs.listboxRef.$children[0].$el.focus();
+    t.value || d(), D(() => {
+      o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children[0].$el.focus();
     });
-  }, v = ({ detail: $ }) => {
-    $.preventDefault(), r(), t.value && B(() => {
-      n.value.$refs.listboxRef.$children[o.value].$el.focus();
+  }, w = ({ detail: $ }) => {
+    $.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 = () => {
-    r(), t.value && B(() => {
-      n.value.$refs.listboxRef.$children[o.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();
     });
   };
   return c(() => ({
-    ...a.value ? {} : { [O.SPACE]: v },
-    [O.ENTER]: C,
-    [O.ARROW_DOWN]: u,
-    [O.ARROW_UP]: h,
-    [O.END]: p,
-    [O.ESCAPE]: b,
-    [O.HOME]: y
+    ...a.value ? {} : { [C.SPACE]: w },
+    [C.ENTER]: f,
+    [C.ARROW_DOWN]: y,
+    [C.ARROW_UP]: h,
+    [C.END]: p,
+    [C.ESCAPE]: v,
+    [C.HOME]: b
   }));
-}, ut = ({ inputContainerRef: e, isDropdownOpen: n }, o) => {
+}, ct = ({ inputContainerRef: e, isDropdownOpen: o }, n) => {
   const t = () => {
-    o(), B(() => {
-      ge(e);
+    o.value && n(), D(() => {
+      he(e);
     });
-  }, a = () => {
-    n.value && t();
-  }, l = () => {
-    n.value && t();
-  }, r = () => {
-    n.value && t();
-  }, i = () => {
-    t();
   };
   return {
-    [s.ENTER]: l,
-    [s.ESCAPE]: a,
-    [s.TAB]: r,
-    [s.SPACE]: i
+    [s.ENTER]: t,
+    [s.ESCAPE]: t,
+    [s.TAB]: t,
+    [s.SPACE]: t
   };
-}, ct = X({
-  i18n: { messages: rt },
+}, pt = Q({
+  i18n: { messages: dt },
   name: "b-dropdown",
   components: {
     BentoDropdownOptionsContainer: Fe,
-    BentoTypography: Ae,
-    DropdownInputDefault: Te,
+    BentoTypography: Re,
+    DropdownInputDefault: Me,
     DropdownInputSmall: nt,
-    ErrorMessage: Re
+    ErrorMessage: Ke
   },
-  directives: { BentoClickOutsideDirective: Me, BentoKeyboardNavigationDirective: Pe },
-  inheritAttrs: !1,
+  directives: { BentoClickOutsideDirective: Te, BentoKeyboardNavigationDirective: Ie },
   props: {
     /**
      * Defines a string value that labels an interactive element.
@@ -565,7 +567,9 @@ const lt = ({ items: e, placeholder: n, selectedValue: o }) => {
       default: !1
     },
     /**
-     * @deprecated Highlights the dropdown in an erroneous state.
+     * Highlights the dropdown in an erroneous state.
+     *
+     * @deprecated Use "errorMessage" prop instead
      */
     error: { type: Boolean, default: !1 },
     /**
@@ -618,7 +622,7 @@ const lt = ({ items: e, placeholder: n, selectedValue: o }) => {
      */
     lazyLoadType: {
       type: String,
-      default: G.props.lazyLoadType.default
+      default: Y.props.lazyLoadType.default
     },
     /*
      * If enabled, the user will be able to select multiple items.
@@ -668,146 +672,151 @@ const lt = ({ items: e, placeholder: n, selectedValue: o }) => {
     }
   },
   emits: ["input", s.SHOW_MORE],
-  setup(e, { emit: n, slots: o }) {
+  setup(e, { emit: o, slots: n }) {
     var ne;
-    const t = _(null), a = _(null), l = _(!1), r = R("bento-dropdown-options-container"), i = R("dropdown-label"), d = R("dropdown-description"), u = R("dropdown-error"), h = c(() => ({
+    const t = E(null), a = E(null), i = E(null), l = E(!1), r = P("bento-dropdown-options-container"), d = P("dropdown-label"), u = P("dropdown-description"), y = P("dropdown-error"), h = c(() => ({
       "b-dropdown__description--error": !!e.errorMessage
-    })), p = _(""), b = P(e, "items"), y = ot(p, b, (ne = e == null ? void 0 : e.search) == null ? void 0 : ne.searchEvent), v = c(() => e.dynamicFiltering && !!p.value), C = st({
-      items: b,
-      multiple: P(e, "multiple"),
-      placeholder: P(e, "placeholder"),
-      value: P(e, "value")
-    }), m = c(
+    })), p = E(""), v = N(e, "items"), b = lt(p, v, (ne = e == null ? void 0 : e.search) == null ? void 0 : ne.searchEvent), w = c(() => e.dynamicFiltering && !!p.value), f = rt({
+      items: v,
+      multiple: N(e, "multiple"),
+      placeholder: N(e, "placeholder"),
+      value: N(e, "value")
+    }), X = c(
       () => e != null && e.multiple ? e.items.filter(
         ({ value: g }) => (e == null ? void 0 : e.value) && (e == null ? void 0 : e.value).includes(g)
       ) : e.items.find(({ value: g }) => g === (e == null ? void 0 : e.value))
     ), $ = c(() => {
-      const g = e.items.findIndex(({ value: Oe }) => e.value === Oe);
+      const g = e.items.findIndex(({ value: Le }) => e.value === Le);
       return g > 0 ? g : 0;
-    }), he = c(() => {
+    }), we = c(() => {
       var g;
       return e.multiple ? (g = e == null ? void 0 : e.value) == null ? void 0 : g.length : null;
-    }), Se = c(
-      () => `${e.description ? d : ""} ${e.errorMessage ? u : ""}`.trim() || null
-    ), Ee = () => {
+    }), $e = c(
+      () => `${e.description ? u : ""} ${e.errorMessage ? y : ""}`.trim() || null
+    ), Se = () => {
       e.readonly || (l.value = !0);
     }, q = () => {
       l.value = !1;
-    }, x = () => {
-      e.readonly || (l.value = !l.value, v.value && (p.value = ""));
-    }, _e = () => {
-      v.value && (p.value = ""), l.value && (l.value = !1);
-    }, ee = (g) => {
-      e.multiple || (p.value = "", l.value = !1), n("input", g);
-    }, te = () => {
-      n(s.SHOW_MORE);
-    }, we = dt(
+    }, ee = () => {
+      e.readonly || (l.value = !l.value, w.value && (p.value = ""));
+    }, Ee = () => {
+      w.value && (p.value = ""), l.value && (l.value = !1);
+    }, te = (g) => {
+      e.multiple || (p.value = "", l.value = !1), o("input", g);
+    }, oe = () => {
+      o(s.SHOW_MORE);
+    }, _e = ut(
       {
         inputContainerRef: t,
-        optionsContainerRef: a,
+        optionsContainerRef: i,
         selectedValueIndex: $,
         isDropdownOpen: l,
-        isDynamicFltering: P(e, "dynamicFiltering"),
-        items: e.items
+        isDynamicFltering: N(e, "dynamicFiltering"),
+        items: e.items,
+        isMultiple: e.multiple
       },
-      x,
-      Ee,
+      ee,
+      Se,
       q
-    ), Ce = ut(
+    ), Oe = ct(
       {
         inputContainerRef: t,
         isDropdownOpen: l
       },
       q
-    ), $e = {
+    ), Ce = {
       [s.CLOSE_DROPDOWN]: q,
-      [s.SELECT]: ee,
-      [s.SHOW_MORE]: te,
-      ...Ce
+      [s.SELECT]: te,
+      [s.SHOW_MORE]: oe,
+      ...Oe
     };
-    return e.error && Ie(
-      "BentoDropdown Error modifier",
-      "Please provide an error message using the errorMessage modifier.",
+    return e.error && Ae(
+      '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"
     ), {
       // Values
-      additionalItemsSelected: he,
+      additionalItemsSelected: we,
       isDropdownOpen: l,
-      displayValue: C,
+      displayValue: f,
       dropdownOptionsContainerId: r,
-      filteredItems: y,
-      isSearching: v,
+      filteredItems: b,
+      isSearching: w,
       searchTerm: p,
-      labelId: i,
-      descriptionId: d,
-      errorId: u,
-      ariaDescribedBy: Se,
-      selectedValueItem: m,
+      labelId: d,
+      descriptionId: u,
+      errorId: y,
+      ariaDescribedBy: $e,
+      selectedValueItem: X,
       // 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: o,
+      slots: n,
       descriptionConditionalClasses: h,
       // Refs
       inputContainerRef: t,
-      optionsContainerRef: a,
+      inputContainerRefWrapper: a,
+      optionsContainerRef: i,
       // Events
-      closeOpenedDropdown: _e,
-      toggleDropdown: x,
-      onOptionSelected: ee,
-      emitShowMoreEvent: te,
-      textboxKeyboardNavigationListeners: we,
-      listboxListeners: $e,
+      closeOpenedDropdown: Ee,
+      toggleDropdown: ee,
+      onOptionSelected: te,
+      emitShowMoreEvent: oe,
+      textboxKeyboardNavigationListeners: _e,
+      listboxListeners: Ce,
       // Enums
       BentoTypographyElement: Ne,
       BentoDropdownSize: T,
-      BentoDropdownLazyLoadType: ve
+      BentoDropdownLazyLoadType: be
     };
   }
 });
-const pt = { class: "b-dropdown" }, ft = ["id"];
-function mt(e, n, o, t, a, l) {
-  var p;
-  const r = D("bento-typography"), i = D("bento-dropdown-options-container"), d = D("error-message"), u = le("bento-keyboard-navigation-directive"), h = le("bento-click-outside-directive");
-  return F((f(), w("div", pt, [
-    e.label ? (f(), w("div", {
+const ft = { class: "b-dropdown" }, mt = ["id"];
+function vt(e, o, n, t, a, i) {
+  var h;
+  const l = B("bento-typography"), r = B("bento-dropdown-options-container"), d = B("error-message"), u = ae("bento-keyboard-navigation-directive"), y = ae("bento-click-outside-directive");
+  return W((m(), O("div", ft, [
+    e.label ? (m(), O("div", {
       key: 0,
       id: e.labelId,
       class: "b-dropdown__label"
     }, [
-      M(r, {
+      M(l, {
         el: e.BentoTypographyElement.SPAN,
         stronger: ""
       }, {
         default: S(() => [
-          z(N(e.label), 1)
+          z(A(e.label), 1)
         ]),
         _: 1
       }, 8, ["el"]),
-      e.optional ? (f(), L(r, {
+      e.optional ? (m(), L(l, {
         key: 0,
         class: "b-dropdown__label-requirement",
         el: e.BentoTypographyElement.SPAN
       }, {
         default: S(() => [
-          z(" (" + N(e.$t("optional")) + ") ", 1)
+          z(" (" + A(e.$t("optional")) + ") ", 1)
         ]),
         _: 1
-      }, 8, ["el"])) : E("", !0),
-      e.required ? (f(), L(r, {
+      }, 8, ["el"])) : _("", !0),
+      e.required ? (m(), L(l, {
         key: 1,
         class: "b-dropdown__label-requirement",
         el: e.BentoTypographyElement.SPAN
       }, {
         default: S(() => [
-          z(" (" + N(e.$t("required")) + ") ", 1)
+          z(" (" + A(e.$t("required")) + ") ", 1)
         ]),
         _: 1
-      }, 8, ["el"])) : E("", !0)
-    ], 8, ft)) : E("", !0),
-    F((f(), w("div", A({ ref: "inputContainerRef" }, k(e.textboxKeyboardNavigationListeners, !0)), [
-      (f(), L(pe(e.size), {
+      }, 8, ["el"])) : _("", !0)
+    ], 8, mt)) : _("", !0),
+    W((m(), O("div", I({ ref: "inputContainerRefWrapper" }, k(e.textboxKeyboardNavigationListeners, !0)), [
+      (m(), L(fe(e.size), {
+        ref: "inputContainerRef",
         value: e.searchTerm,
         "additional-items-selected": e.additionalItemsSelected,
         ariaControls: e.dropdownOptionsContainerId,
@@ -825,26 +834,26 @@ function mt(e, n, o, t, a, l) {
         open: e.isDropdownOpen,
         "selected-value-item": e.size === e.BentoDropdownSize.DEFAULT ? e.selectedValueItem : void 0,
         "show-slot-content-in-multiple": e.showSlotContentInMultiple,
-        onInput: n[0] || (n[0] = (b) => e.searchTerm = b),
+        onInput: o[0] || (o[0] = (p) => e.searchTerm = p),
         onOpen: e.toggleDropdown,
         onClose: e.toggleDropdown
-      }, H({ _: 2 }, [
-        j(e.slots, (b, y) => ({
-          name: y,
-          fn: S((v) => [
-            J(e.$slots, y, Z(Y(v)), void 0, !0)
+      }, V({ _: 2 }, [
+        x(e.slots, (p, v) => ({
+          name: v,
+          fn: S((b) => [
+            j(e.$slots, v, J(Z(b)), 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]
     ]),
-    e.inputContainerRef ? (f(), L(i, A({
+    e.inputContainerRef ? (m(), L(r, I({
       key: 1,
       id: e.dropdownOptionsContainerId,
       ref: "optionsContainerRef",
       "aria-label": e.ariaLabel,
-      "debounce-time": (p = e.search) == null ? void 0 : p.debounceTime,
+      "debounce-time": (h = e.search) == null ? void 0 : h.debounceTime,
       disabled: e.disabled,
       "input-size": e.size,
       "is-option-disabled": e.isOptionDisabled,
@@ -853,43 +862,43 @@ function mt(e, n, o, t, a, l) {
       open: e.isDropdownOpen,
       "selected-value": e.value,
       searching: e.isSearching,
-      "target-element": e.inputContainerRef,
+      "target-element": e.inputContainerRefWrapper,
       loading: e.loading,
       "has-more-items": e.hasMoreItems,
       "lazy-load-type": e.lazyLoadType
-    }, k(e.listboxListeners)), H({ _: 2 }, [
-      j(e.slots, (b, y) => ({
-        name: y,
-        fn: S((v) => [
-          J(e.$slots, y, Z(Y(v)), void 0, !0)
+    }, k(e.listboxListeners)), V({ _: 2 }, [
+      x(e.slots, (p, v) => ({
+        name: v,
+        fn: S((b) => [
+          j(e.$slots, v, J(Z(b)), 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 ? (f(), L(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"])) : _("", !0),
+    e.errorMessage ? (m(), L(d, {
       key: 2,
       id: e.errorId,
       "error-message": e.errorMessage,
       class: "b-dropdown__error-message"
-    }, null, 8, ["id", "error-message"])) : E("", !0),
-    e.description ? (f(), L(r, {
+    }, null, 8, ["id", "error-message"])) : _("", !0),
+    e.description ? (m(), L(l, {
       key: 3,
       id: e.descriptionId,
       class: ye(["b-dropdown__description", e.descriptionConditionalClasses]),
       el: e.BentoTypographyElement.SPAN
     }, {
       default: S(() => [
-        z(N(e.description), 1)
+        z(A(e.description), 1)
       ]),
       _: 1
-    }, 8, ["id", "class", "el"])) : E("", !0)
+    }, 8, ["id", "class", "el"])) : _("", !0)
   ])), [
-    [h, e.closeOpenedDropdown]
+    [y, e.closeOpenedDropdown]
   ]);
 }
-const Bt = /* @__PURE__ */ K(ct, [["render", mt], ["__scopeId", "data-v-924fb568"]]);
+const Bt = /* @__PURE__ */ K(pt, [["render", vt], ["__scopeId", "data-v-c55e33eb"]]);
 export {
   Bt as B,
   T as a,
-  ot as u
+  lt as u
 };
-//# sourceMappingURL=dropdown.751d23b5.js.map
+//# sourceMappingURL=dropdown.374481a8.js.map