@adyen/bento-vue3 1.28.1 → 1.29.0

package/dist/chunks/{dropdown.CxBlK83Q.js → dropdown.CoVT4i0B.js}

@@ -1,81 +1,81 @@
-import { ref as w, watch as we, computed as u, defineComponent as F, useSlots as xe, toRefs as $e, openBlock as g, createBlock as k, resolveDynamicComponent as Oe, unref as l, mergeProps as A, withCtx as K, createElementVNode as Q, withKeys as He, createVNode as J, toHandlers as Z, createSlots as ne, renderList as se, renderSlot as Y, normalizeProps as ie, guardReactiveProps as re, createElementBlock as M, toDisplayString as fe, createCommentVNode as P, normalizeClass as de, withDirectives as G, vShow as ye, nextTick as T, useAttrs as Ve, toRef as I, inject as _e, createTextVNode as Je } from "vue";
-import { d as be, B as Ye } from "./typography.D7onlQ9v.js";
-import { a as oe, b as ge, c as Ze, B as Ge, D as Qe } from "./dropdown-default-textbox.-Oy2eT40.js";
-import { _ as V } from "./_plugin-vue_export-helper.CHgC5LLL.js";
-import { g as q } from "./unique-id.XFfoKuc2.js";
-import { u as Xe } from "./aria-label.CaUURpnB.js";
-import { u as pe } from "./i18n.DY5YXG5f.js";
-import { u as et } from "./use-form-layout-loading.D3lALhtC.js";
-import { B as R, a as tt } from "./keyboard-navigation.Clz1jOaA.js";
-import { a as d, B as ue, b as ce, c as at, u as lt } from "./use-cached-selected-values.BQBWFTvi.js";
-import { u as ot } from "./use-has-slot.B7eQSabc.js";
-import { F as nt, E as st } from "./error-message.DyjHMyEZ.js";
-import { P as he } from "./popper-container.B76aE-3-.js";
-import { B as it } from "./popover.DRb2GW7t.js";
+import { ref as S, watch as xe, computed as c, defineComponent as z, useSlots as $e, toRefs as Ee, openBlock as h, createBlock as k, resolveDynamicComponent as Oe, unref as l, mergeProps as A, withCtx as K, createElementVNode as X, withKeys as Ve, createVNode as Y, toHandlers as G, createSlots as ie, renderList as re, renderSlot as Z, normalizeProps as de, guardReactiveProps as ue, createElementBlock as N, toDisplayString as me, createCommentVNode as P, normalizeClass as ce, withDirectives as Q, vShow as ge, nextTick as T, useAttrs as _e, toRef as I, inject as Je, createTextVNode as Ye } from "vue";
+import { d as he, B as Ze } from "./typography.D7onlQ9v.js";
+import { g as H } from "./unique-id.XFfoKuc2.js";
+import { u as Ge } from "./aria-label.CaUURpnB.js";
+import { u as ve } from "./i18n.DY5YXG5f.js";
+import { u as Qe } from "./use-form-layout-loading.D3lALhtC.js";
+import { b as ne, c as q, d as Xe, B as V, a as et, D as tt } from "./dropdown-default-textbox.Bx0-dxhU.js";
+import { B as R, a as at } from "./keyboard-navigation.Clz1jOaA.js";
+import { a as u, B as fe, b as pe, c as lt, u as ot } from "./use-cached-selected-values.Bh2VFRA-.js";
+import { u as nt } from "./use-has-slot.B7eQSabc.js";
+import { F as st, E as it } from "./error-message.oV0CXm1m.js";
+import { P as Le } from "./popper-container.50jF-_VU.js";
+import { B as rt } from "./popover.CvUTNkQG.js";
+import { _ } from "./_plugin-vue_export-helper.CHgC5LLL.js";
+import { s as se } from "./events.CMzGybJJ.js";
 import "../assets/dropdown.css";
-var H = /* @__PURE__ */ ((e) => (e.DEFAULT = "DropdownInputDefault", e.SMALL = "DropdownInputSmall", e))(H || {});
-const me = {
+const ye = {
   "en-US": {
     apply: "Apply",
     cancel: "Cancel",
     noOptionsMatchThisSearch: "No options match this search"
   }
-}, rt = (e, o, t, a) => {
-  const n = w(e.value), { t: i } = pe({ messages: me });
-  we(e, () => {
-    n.value = e.value;
+}, dt = (t, o, e, a) => {
+  const n = S(t.value), { t: r } = ve({ messages: ye });
+  xe(t, () => {
+    n.value = t.value;
   });
-  const r = u(
-    () => JSON.stringify(n.value) === JSON.stringify(e.value)
-  ), c = () => {
-    a(d.SELECT, n.value), a(d.CLOSE_DROPDOWN);
-  }, f = () => {
-    n.value = e.value, a(d.CLOSE_DROPDOWN);
-  }, y = () => {
-    t.value && o.value && (n.value = e.value);
-  }, p = u(() => [
+  const d = c(
+    () => JSON.stringify(n.value) === JSON.stringify(t.value)
+  ), f = () => {
+    a(u.SELECT, n.value), a(u.CLOSE_DROPDOWN);
+  }, b = () => {
+    n.value = t.value, a(u.CLOSE_DROPDOWN);
+  }, m = () => {
+    e.value && o.value && (n.value = t.value);
+  }, p = c(() => [
     {
-      title: i("apply"),
-      event: c,
-      disabled: r.value
+      title: r("apply"),
+      event: f,
+      disabled: d.value
     },
     {
-      title: i("cancel"),
-      event: f
+      title: r("cancel"),
+      event: b
     }
-  ]), h = (s) => {
-    n.value = s, o.value || a(d.SELECT, s);
-  }, $ = (s) => {
-    h(s), a(d.TAB);
-  }, O = (s) => {
-    h(s), a(d.ENTER);
+  ]), i = (s) => {
+    n.value = s, o.value || a(u.SELECT, s);
+  }, x = (s) => {
+    i(s), a(u.TAB);
   }, E = (s) => {
-    h(s), a(d.SPACE);
+    i(s), a(u.ENTER);
+  }, O = (s) => {
+    i(s), a(u.SPACE);
   }, L = () => {
-    f(), a(d.ESCAPE);
-  }, x = () => {
-    a(d.SHOW_MORE);
-  }, N = {
-    [d.SELECT]: h,
-    [d.SHOW_MORE]: x,
-    [d.TAB]: $,
-    [d.SPACE]: E,
-    [d.ENTER]: O
+    b(), a(u.ESCAPE);
+  }, $ = () => {
+    a(u.SHOW_MORE);
+  }, M = {
+    [u.SELECT]: i,
+    [u.SHOW_MORE]: $,
+    [u.TAB]: x,
+    [u.SPACE]: O,
+    [u.ENTER]: E
   };
   return {
     // Values
     actions: p,
     internalSelectedValue: n,
     // Methods
-    listeners: N,
+    listeners: M,
     onEscapeKey: L,
-    onOutsideDropdownClick: y
+    onOutsideDropdownClick: m
   };
-}, dt = F({
-  i18n: { messages: me },
+}, ut = z({
+  i18n: { messages: ye },
   name: "bento-dropdown-options-container"
-}), ut = /* @__PURE__ */ F({
-  ...dt,
+}), ct = /* @__PURE__ */ z({
+  ...ut,
   props: {
     /**
      * Defines a string value that labels an interactive element.
@@ -130,8 +130,8 @@ const me = {
      */
     lazyLoadType: {
       type: String,
-      default: ue.AUTOMATIC,
-      validator: (e) => Object.values(ue).includes(e)
+      default: fe.AUTOMATIC,
+      validator: (t) => Object.values(fe).includes(t)
     },
     /**
      * Indicates if new options are loading.
@@ -161,7 +161,7 @@ const me = {
      *
      * If enabled, hides the "Select all" checkbox in "multiple" mode.
      */
-    searching: ce.props.searching,
+    searching: pe.props.searching,
     /**
      * If enabled, dropdown will display non-selectable, static categories
      */
@@ -170,7 +170,7 @@ const me = {
      * Reference to the DOM element or Vue component for positioning
      * the Dropdown container.
      */
-    targetElement: { type: he.props.targetElement.type, required: !0 },
+    targetElement: { type: Le.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.
@@ -180,28 +180,28 @@ const me = {
       default: !1
     }
   },
-  setup(e, { expose: o, emit: t }) {
-    const a = e, n = xe(), { selectedValue: i, multiple: r } = $e(a), c = w(null), { t: f } = pe({ messages: me }), y = u(() => a.open && !a.disabled), p = u(() => f("noOptionsMatchThisSearch")), h = u(() => ({
+  setup(t, { expose: o, emit: e }) {
+    const a = t, n = $e(), { selectedValue: r, multiple: d } = Ee(a), f = S(null), { t: b } = ve({ messages: ye }), m = c(() => a.open && !a.disabled), p = c(() => b("noOptionsMatchThisSearch")), i = c(() => ({
       "b-dropdown-options-container--single": !(a != null && a.multiple)
-    })), $ = u(() => ({
+    })), x = c(() => ({
       "b-dropdown-options-container__listbox--single": !(a != null && a.multiple)
-    })), { actions: O, internalSelectedValue: E, listeners: L, onEscapeKey: x, onOutsideDropdownClick: N } = rt(i, r, y, t), s = u(() => a != null && a.multiple ? it : he), m = u(() => {
-      var S;
-      const b = {
-        "min-width": `${(S = a == null ? void 0 : a.targetElement) == null ? void 0 : S.clientWidth}px`,
+    })), { actions: E, internalSelectedValue: O, listeners: L, onEscapeKey: $, onOutsideDropdownClick: M } = dt(r, d, m, e), s = c(() => a != null && a.multiple ? rt : Le), v = c(() => {
+      var w;
+      const g = {
+        "min-width": `${(w = a == null ? void 0 : a.targetElement) == null ? void 0 : w.clientWidth}px`,
         "max-width": "min(500px, 95%)"
       };
       return a != null && a.multiple ? {
         actionsLayout: "space-between",
-        actions: O.value,
+        actions: E.value,
         divider: !0,
         fallbackPosition: ["top-start"],
-        id: q(`dropdown-options-${a.id}`),
+        id: H(`dropdown-options-${a.id}`),
         open: a.open,
         position: "bottom-start",
         style: {
           width: "auto",
-          ...b
+          ...g
         },
         targetElement: a.targetElement
       } : {
@@ -209,49 +209,49 @@ const me = {
         offset: [0, 8],
         position: "bottom-start",
         style: {
-          display: y.value ? "block" : "none",
-          ...b
+          display: m.value ? "block" : "none",
+          ...g
         },
         targetElement: a.targetElement
       };
     });
     return o({
-      onOutsideDropdownClick: N
-    }), (b, S) => (g(), k(Oe(l(s)), A({
-      class: ["b-dropdown-options-container", l(h)],
-      "aria-label": e.ariaLabel
-    }, l(m)), {
+      onOutsideDropdownClick: M
+    }), (g, w) => (h(), k(Oe(l(s)), A({
+      class: ["b-dropdown-options-container", l(i)],
+      "aria-label": t.ariaLabel
+    }, l(v)), {
       default: K(() => [
-        Q("div", {
-          onKeydown: S[0] || (S[0] = He(
+        X("div", {
+          onKeydown: w[0] || (w[0] = Ve(
             //@ts-ignore
-            (...z) => l(x) && l(x)(...z),
+            (...F) => l($) && l($)(...F),
             ["esc"]
           ))
         }, [
-          J(l(ce), A({
-            id: e.id,
+          Y(l(pe), A({
+            id: t.id,
             ref_key: "dropdownOptionsListboxRef",
-            ref: c,
-            "aria-label": e.ariaLabel,
-            class: ["b-dropdown-options-container__listbox", l($)],
-            "empty-state": e.emptyState,
-            "is-option-disabled": e.isOptionDisabled,
-            items: e.items,
-            "selected-value": l(E),
-            multiple: l(r),
-            "static-categories": e.staticCategories,
+            ref: f,
+            "aria-label": t.ariaLabel,
+            class: ["b-dropdown-options-container__listbox", l(x)],
+            "empty-state": t.emptyState,
+            "is-option-disabled": t.isOptionDisabled,
+            items: t.items,
+            "selected-value": l(O),
+            multiple: l(d),
+            "static-categories": t.staticCategories,
             "no-results-message": l(p),
-            searching: e.searching,
-            loading: e.loading,
-            "lazy-load-type": e.lazyLoadType,
-            "has-more-items": e.hasMoreItems,
-            "virtual-scroll": e.virtualScroll
-          }, Z(l(L))), ne({ _: 2 }, [
-            se(l(n), (z, W) => ({
+            searching: t.searching,
+            loading: t.loading,
+            "lazy-load-type": t.lazyLoadType,
+            "has-more-items": t.hasMoreItems,
+            "virtual-scroll": t.virtualScroll
+          }, G(l(L))), ie({ _: 2 }, [
+            re(l(n), (F, W) => ({
               name: W,
-              fn: K((X) => [
-                Y(b.$slots, W, ie(re(X)), void 0, !0)
+              fn: K((ee) => [
+                Z(g.$slots, W, de(ue(ee)), void 0, !0)
               ])
             }))
           ]), 1040, ["id", "aria-label", "class", "empty-state", "is-option-disabled", "items", "selected-value", "multiple", "static-categories", "no-results-message", "searching", "loading", "lazy-load-type", "has-more-items", "virtual-scroll"])
@@ -260,55 +260,55 @@ const me = {
       _: 3
     }, 16, ["aria-label", "class"]));
   }
-}), ct = /* @__PURE__ */ V(ut, [["__scopeId", "data-v-cac3da66"]]);
-let Le = 0;
-const ft = {
+}), ft = /* @__PURE__ */ _(ct, [["__scopeId", "data-v-cac3da66"]]);
+let we = 0;
+const pt = {
   beforeCreate() {
-    this.uuid = Le.toString(), Le += 1;
+    this.uuid = we.toString(), we += 1;
   }
-}, pt = { key: 0 }, mt = /* @__PURE__ */ Q("path", {
+}, mt = { key: 0 }, vt = /* @__PURE__ */ X("path", {
   fill: "#00112C",
   d: "M5.00011 5.43922L8.00011 8.43922L11.0001 5.43922L12.0608 6.49988L8.00011 10.5605L3.93945 6.49988L5.00011 5.43922Z"
 }, null, -1);
-function vt(e, o, t, a, n, i) {
-  return g(), M("svg", A({ role: "img" }, e.$attrs, {
+function yt(t, o, e, a, n, r) {
+  return h(), N("svg", A({ role: "img" }, t.$attrs, {
     class: "ui-assets-icons-16",
     xmlns: "http://www.w3.org/2000/svg",
     width: "16",
     height: "16",
     fill: "none"
   }), [
-    e.$attrs["svg-title"] ? (g(), M("title", pt, fe(e.$attrs["svg-title"]), 1)) : P("", !0),
-    mt
+    t.$attrs["svg-title"] ? (h(), N("title", mt, me(t.$attrs["svg-title"]), 1)) : P("", !0),
+    vt
   ], 16);
 }
-const yt = /* @__PURE__ */ V(ft, [["render", vt]]);
+const bt = /* @__PURE__ */ _(pt, [["render", yt]]);
 let Se = 0;
-const bt = {
+const gt = {
   beforeCreate() {
     this.uuid = Se.toString(), Se += 1;
   }
-}, gt = { key: 0 }, ht = /* @__PURE__ */ Q("path", {
+}, ht = { key: 0 }, Lt = /* @__PURE__ */ X("path", {
   fill: "#00112C",
   d: "M10.9999 10.5608L7.9999 7.56077L4.9999 10.5608L3.93924 9.50011L7.9999 5.43945L12.0606 9.50011L10.9999 10.5608Z"
 }, null, -1);
-function Lt(e, o, t, a, n, i) {
-  return g(), M("svg", A({ role: "img" }, e.$attrs, {
+function wt(t, o, e, a, n, r) {
+  return h(), N("svg", A({ role: "img" }, t.$attrs, {
     class: "ui-assets-icons-16",
     xmlns: "http://www.w3.org/2000/svg",
     width: "16",
     height: "16",
     fill: "none"
   }), [
-    e.$attrs["svg-title"] ? (g(), M("title", gt, fe(e.$attrs["svg-title"]), 1)) : P("", !0),
-    ht
+    t.$attrs["svg-title"] ? (h(), N("title", ht, me(t.$attrs["svg-title"]), 1)) : P("", !0),
+    Lt
   ], 16);
 }
-const St = /* @__PURE__ */ V(bt, [["render", Lt]]), wt = { class: "b-dropdown-small-textbox__chevron" }, xt = F({
+const St = /* @__PURE__ */ _(gt, [["render", wt]]), xt = { class: "b-dropdown-small-textbox__chevron" }, $t = z({
   name: "dropdown-small-textbox",
   inheritAttrs: !1
-}), $t = /* @__PURE__ */ F({
-  ...xt,
+}), Et = /* @__PURE__ */ z({
+  ...$t,
   props: {
     /**
      * The number of additional items that have been selected in the dropdown.
@@ -367,149 +367,161 @@ const St = /* @__PURE__ */ V(bt, [["render", Lt]]), wt = { class: "b-dropdown-sm
      */
     value: { type: String, default: "" }
   },
-  emits: ["open", "close"],
-  setup(e, { emit: o }) {
-    const t = e, a = u(() => ({
-      [`b-dropdown-small-textbox--${oe.DISABLED}`]: t.disabled,
-      [`b-dropdown-small-textbox--${oe.READONLY}`]: t.readonly,
-      [`b-dropdown-small-textbox--${oe.OPENED}`]: t.open
-    })), n = u(() => t.open && !t.disabled && !t.readonly), i = () => {
-      o("open");
-    }, r = () => {
-      o("close");
-    }, c = {
-      [ge.OPEN]: i,
-      [ge.CLOSE]: r
+  emits: ["clear", "close", "input", "keydown", "open"],
+  setup(t, { emit: o }) {
+    const e = t, a = c(() => ({
+      [`b-dropdown-small-textbox--${ne.DISABLED}`]: e.disabled,
+      [`b-dropdown-small-textbox--${ne.READONLY}`]: e.readonly,
+      [`b-dropdown-small-textbox--${ne.OPENED}`]: e.open
+    })), n = c(() => e.open && !e.disabled && !e.readonly), r = (i) => {
+      o("input", i);
+    }, d = (i) => {
+      o("keydown", i);
+    }, f = (i) => {
+      se(i), o("open");
+    }, b = (i) => {
+      se(i), o("close");
+    }, m = (i) => {
+      se(i), o("clear");
+    }, p = {
+      [q.INPUT]: r,
+      [q.OPEN]: f,
+      [q.CLOSE]: b,
+      [q.CLEAR]: m,
+      [q.KEYDOWN]: d
     };
-    return (f, y) => (g(), M("div", {
-      class: de(["b-dropdown-small-textbox", l(a)])
+    return (i, x) => (h(), N("div", {
+      class: ce(["b-dropdown-small-textbox", l(a)])
     }, [
-      J(Ze, A({ ...f.$attrs, ...f.$props }, { class: "b-dropdown-small-textbox__textbox" }, Z(c)), {
+      Y(Xe, A({ ...i.$attrs, ...i.$props }, {
+        class: "b-dropdown-small-textbox__textbox",
+        size: l(V).SMALL
+      }, G(p)), {
         icon: K(() => [
-          Q("div", wt, [
-            G(J(l(St), { "svg-title": "opened" }, null, 512), [
-              [ye, l(n)]
+          X("div", xt, [
+            Q(Y(l(St), { "svg-title": "opened" }, null, 512), [
+              [ge, l(n)]
             ]),
-            G(J(l(yt), { "svg-title": "closed" }, null, 512), [
-              [ye, !l(n)]
+            Q(Y(l(bt), { "svg-title": "closed" }, null, 512), [
+              [ge, !l(n)]
             ])
           ])
         ]),
         _: 1
-      }, 16)
+      }, 16, ["size"])
     ], 2));
   }
-}), Ot = /* @__PURE__ */ V($t, [["__scopeId", "data-v-4703b87f"]]), Et = (e, o) => o.value.reduce((t, a) => {
+}), Ot = /* @__PURE__ */ _(Et, [["__scopeId", "data-v-2fa2d897"]]), Ct = (t, o) => o.value.reduce((e, a) => {
   if (a.items) {
     const n = a.items.filter(
-      (r) => e.value.find((c) => c.value === r.value)
+      (d) => t.value.find((f) => f.value === d.value)
     );
-    n.length === a.items.length ? t.push(a.label) : n.forEach(({ label: r }) => t.push(r));
+    n.length === a.items.length ? e.push(a.label) : n.forEach(({ label: d }) => e.push(d));
   }
-  return e.value.find((n) => n.value === a.value) && t.push(a.label), t;
-}, []).join(", "), Ct = ({ items: e, placeholder: o, selectedValues: t }) => {
-  const a = u(() => e.value.find((i) => {
-    var r;
-    return (r = i.items) == null ? void 0 : r.length;
+  return t.value.find((n) => n.value === a.value) && e.push(a.label), e;
+}, []).join(", "), Bt = ({ items: t, placeholder: o, selectedValues: e }) => {
+  const a = c(() => t.value.find((r) => {
+    var d;
+    return (d = r.items) == null ? void 0 : d.length;
   }));
-  return u(() => t.value.length ? a.value ? Et(t, e) : t.value.map(({ label: i }) => i).join(", ") : o.value || null);
-}, Ee = (e) => {
+  return c(() => e.value.length ? a.value ? Ct(e, t) : e.value.map(({ label: r }) => r).join(", ") : o.value || null);
+}, Ce = (t) => {
   var o;
-  (o = e.value.$children) == null || o[0].$refs.textbox.focus();
-}, Bt = ({
-  inputContainerRef: e,
+  (o = t.value.$children) == null || o[0].$refs.textbox.focus();
+}, Dt = ({
+  inputContainerRef: t,
   optionsContainerRef: o,
-  selectedValueIndex: t,
+  selectedValueIndex: e,
   isDropdownOpen: a,
   isDynamicFltering: n,
-  items: i,
-  isMultiple: r
-}, c, f, y) => {
+  items: r,
+  isMultiple: d
+}, f, b, m) => {
   const p = ({ detail: s }) => {
-    s.preventDefault(), a.value || (f(), T(() => {
-      var m, b;
-      r ? (m = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || m[0].$el.focus() : (b = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || b[t.value].$el.focus();
+    s.preventDefault(), a.value || (b(), T(() => {
+      var v, g;
+      d ? (v = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || v[0].$el.focus() : (g = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || g[e.value].$el.focus();
     }));
-  }, h = ({ detail: s }) => {
-    s.preventDefault(), a.value || (f(), T(() => {
-      var m;
-      (m = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || m[0].$el.focus();
+  }, i = ({ detail: s }) => {
+    s.preventDefault(), a.value || (b(), T(() => {
+      var v;
+      (v = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || v[0].$el.focus();
     }));
-  }, $ = () => {
-    a.value || (f(), T(() => {
-      var s, m;
-      if (r) {
-        const b = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children;
-        (s = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || s[b.length - 1].$children[i.length - 1].$el.focus();
+  }, x = () => {
+    a.value || (b(), T(() => {
+      var s, v;
+      if (d) {
+        const g = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children;
+        (s = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || s[g.length - 1].$children[r.length - 1].$el.focus();
       } else
-        (m = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || m[i.length - 1].$el.focus();
+        (v = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || v[r.length - 1].$el.focus();
     }));
-  }, O = () => {
-    a.value && (y(), Ee(e));
   }, E = () => {
-    a.value || f(), T(() => {
+    a.value && (m(), Ce(t));
+  }, O = () => {
+    a.value || b(), T(() => {
       var s;
       (s = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || s[0].$el.focus();
     });
   }, L = ({ detail: s }) => {
-    s.preventDefault(), c(), a.value && T(() => {
-      var m, b;
-      r ? (m = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || m[0].$el.focus() : (b = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || b[t.value].$el.focus();
+    s.preventDefault(), f(), a.value && T(() => {
+      var v, g;
+      d ? (v = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || v[0].$el.focus() : (g = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || g[e.value].$el.focus();
     });
-  }, x = () => {
-    c(), a.value && T(() => {
-      var s, m;
-      r ? (s = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || s[0].$el.focus() : (m = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || m[t.value].$el.focus();
+  }, $ = () => {
+    f(), a.value && T(() => {
+      var s, v;
+      d ? (s = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || s[0].$el.focus() : (v = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || v[e.value].$el.focus();
     });
   };
-  return u(() => ({
+  return c(() => ({
     ...n.value ? {} : { [R.SPACE]: L },
-    [R.ENTER]: x,
+    [R.ENTER]: $,
     [R.ARROW_DOWN]: p,
-    [R.ARROW_UP]: h,
-    [R.END]: $,
-    [R.ESCAPE]: O,
-    [R.HOME]: E
+    [R.ARROW_UP]: i,
+    [R.END]: x,
+    [R.ESCAPE]: E,
+    [R.HOME]: O
   }));
-}, Dt = ({ inputContainerRef: e, isDropdownOpen: o }, t) => {
+}, It = ({ inputContainerRef: t, isDropdownOpen: o }, e) => {
   const a = () => {
-    o.value && t(), T(() => {
-      Ee(e);
+    o.value && e(), T(() => {
+      Ce(t);
     });
   };
   return {
-    [d.ENTER]: a,
-    [d.ESCAPE]: a,
-    [d.TAB]: a,
-    [d.SPACE]: a
+    [u.ENTER]: a,
+    [u.ESCAPE]: a,
+    [u.TAB]: a,
+    [u.SPACE]: a
   };
 };
-function It(e, o, t) {
-  const a = w(e), n = w(o), i = (c, f = []) => f.flatMap((y) => y.label.toLocaleLowerCase().includes(c) ? [y, ...i(c, y.items)] : y.items ? [...i(c, y.items)] : []);
-  return we(a, () => {
-    t !== void 0 && t(a.value);
-  }), u(() => {
-    if (!a.value || t !== void 0)
+function Rt(t, o, e) {
+  const a = S(t), n = S(o), r = (f, b = []) => b.flatMap((m) => m.label.toLocaleLowerCase().includes(f) ? [m, ...r(f, m.items)] : m.items ? [...r(f, m.items)] : []);
+  return xe(a, () => {
+    e !== void 0 && e(a.value);
+  }), c(() => {
+    if (!a.value || e !== void 0)
       return n.value;
-    const c = a.value.toLocaleLowerCase();
-    return i(c, n.value);
+    const f = a.value.toLocaleLowerCase();
+    return r(f, n.value);
   });
 }
-const Ce = {
+const Be = {
   "en-US": {
     all: "All",
     clearSearch: "Clear filter",
     ariaLabelFallback: "Dropdown"
   }
-}, Rt = Symbol("input field component injection key"), Tt = F({
-  i18n: { messages: Ce },
+}, Tt = Symbol("input field component injection key"), At = z({
+  i18n: { messages: Be },
   name: "b-dropdown",
   components: {
-    DropdownInputDefault: Qe,
+    DropdownInputDefault: tt,
     DropdownInputSmall: Ot
   }
-}), At = /* @__PURE__ */ F({
-  ...Tt,
+}), Nt = /* @__PURE__ */ z({
+  ...At,
   props: {
     /**
      * @deprecated from version 2.0.0. Use the aria-label attribute instead.
@@ -596,8 +608,8 @@ const Ce = {
      */
     lazyLoadType: {
       type: String,
-      default: ce.props.lazyLoadType.default,
-      validator: (e) => Object.values(ue).includes(e)
+      default: pe.props.lazyLoadType.default,
+      validator: (t) => Object.values(fe).includes(t)
     },
     /*
      * If enabled, the user will be able to select multiple items.
@@ -637,7 +649,7 @@ const Ce = {
     size: {
       type: String,
       default: null,
-      validator: (e) => Object.values(H).includes(e)
+      validator: (t) => Object.values(V).includes(t)
     },
     /**
      * If enabled, dropdown will display non-selectable, static categories
@@ -666,203 +678,202 @@ const Ce = {
     }
   },
   emits: ["input", "show-more"],
-  setup(e, { emit: o }) {
-    var ve;
-    const t = e, a = Ve(), n = xe(), i = ot(n), { t: r } = pe({ messages: Ce }), c = w(null), f = w(null), y = w(null), p = w(!1), h = q("bento-dropdown-options-container"), $ = q("dropdown-label"), O = q("dropdown-description"), E = q("dropdown-error"), { isReadOnly: L } = et(I(t, "readonly")), { cachedSelectedListboxOptions: x, cachedListboxSelectedValues: N, setCachedValues: s } = at(
-      I(t, "items"),
-      I(t, "value"),
-      I(t, "multiple")
-    ), m = w(a["aria-label"]), { ariaLabel: b, label: S } = $e(t), z = Xe({
+  setup(t, { emit: o }) {
+    var be;
+    const e = t, a = _e(), n = $e(), r = nt(n), { t: d } = ve({ messages: Be }), f = S(null), b = S(null), m = S(null), p = S(!1), i = H("bento-dropdown-options-container"), x = H("dropdown-label"), E = H("dropdown-description"), O = H("dropdown-error"), { isReadOnly: L } = Qe(I(e, "readonly")), { cachedSelectedListboxOptions: $, cachedListboxSelectedValues: M, setCachedValues: s } = lt(
+      I(e, "items"),
+      I(e, "value"),
+      I(e, "multiple")
+    ), v = S(a["aria-label"]), { ariaLabel: g, label: w } = Ee(e), F = Ge({
       // TODO: take ariaLabel ref away when aria-label prop is removed
-      ariaLabel: b || m,
-      label: S,
-      defaultFallback: r("ariaLabelFallback")
-    }), W = t.size === H.SMALL || _e(Rt, !1), X = u(() => W ? H.SMALL : H.DEFAULT), Be = u(() => ({
-      "b-dropdown--condensed": t.condensed
-    })), De = u(() => ({
-      "b-dropdown__description--error": !!t.errorMessage
-    })), D = w(""), _ = I(t, "items"), Ie = It(D, _, (ve = t == null ? void 0 : t.search) == null ? void 0 : ve.searchEvent), ee = u(() => t.dynamicFiltering && !!D.value), Re = Ct({
-      items: _,
-      placeholder: I(t, "placeholder"),
-      selectedValues: x
-    }), Te = u(() => {
-      if (t != null && t.multiple && Array.isArray(t.value))
-        return t.items.filter(
-          ({ value: v }) => (t == null ? void 0 : t.value) && (t == null ? void 0 : t.value).includes(v)
+      ariaLabel: g || v,
+      label: w,
+      defaultFallback: d("ariaLabelFallback")
+    }), W = e.size === V.SMALL || Je(Tt, !1), ee = c(() => W ? V.SMALL : V.DEFAULT), De = c(() => ({
+      "b-dropdown--condensed": e.condensed
+    })), Ie = c(() => ({
+      "b-dropdown__description--error": !!e.errorMessage
+    })), D = S(""), J = I(e, "items"), Re = Rt(D, J, (be = e == null ? void 0 : e.search) == null ? void 0 : be.searchEvent), te = c(() => e.dynamicFiltering && !!D.value), Te = Bt({
+      items: J,
+      placeholder: I(e, "placeholder"),
+      selectedValues: $
+    }), Ae = c(() => {
+      if (e != null && e.multiple && Array.isArray(e.value))
+        return e.items.filter(
+          ({ value: y }) => (e == null ? void 0 : e.value) && (e == null ? void 0 : e.value).includes(y)
         );
-      if (!t.multiple && t.staticCategories) {
-        const v = t.items.find(
-          (B) => B.items.some((j) => j.value === t.value)
+      if (!e.multiple && e.staticCategories) {
+        const y = e.items.find(
+          (B) => B.items.some((j) => j.value === e.value)
         );
-        return v ? v.items.find((B) => B.value === t.value) : null;
+        return y ? y.items.find((B) => B.value === e.value) : null;
       }
-      return t.items.find(({ value: v }) => v === (t == null ? void 0 : t.value));
-    }), Ae = u(() => {
-      const v = t.items.findIndex(({ value: C }) => t.value === C);
-      return v > 0 ? v : 0;
-    }), { isMultiLevelSelect: Me, flattenedItemsList: Ne } = lt(_), ke = u(() => {
-      var v;
-      if (t.multiple) {
-        const C = (v = t == null ? void 0 : t.value) == null ? void 0 : v.length, B = Me.value ? Ne.value.length : _.value.length;
-        return !t.hasMoreItems && B === C ? r("all") : C;
+      return e.items.find(({ value: y }) => y === (e == null ? void 0 : e.value));
+    }), Ne = c(() => {
+      const y = e.items.findIndex(({ value: C }) => e.value === C);
+      return y > 0 ? y : 0;
+    }), { isMultiLevelSelect: Me, flattenedItemsList: ke } = ot(J), Pe = c(() => {
+      var y;
+      if (e.multiple) {
+        const C = (y = e == null ? void 0 : e.value) == null ? void 0 : y.length, B = Me.value ? ke.value.length : J.value.length;
+        return !e.hasMoreItems && B === C ? d("all") : C;
       }
       return null;
-    }), Pe = u(
-      () => `${t.description ? O : ""} ${t.errorMessage ? E : ""}`.trim() || null
-    ), Ke = () => {
+    }), Ke = c(
+      () => `${e.description ? E : ""} ${e.errorMessage ? O : ""}`.trim() || null
+    ), ze = () => {
       L.value || (p.value = !0);
-    }, te = () => {
-      p.value = !1;
     }, ae = () => {
-      L.value || (p.value = !p.value, ee.value && (D.value = ""));
+      p.value = !1;
+    }, le = () => {
+      L.value || (p.value = !p.value, te.value && (D.value = ""));
     }, Fe = () => {
-      ee.value && (D.value = ""), p.value && (p.value = !1, y.value.onOutsideDropdownClick());
-    }, ze = (v) => {
-      t.multiple || (D.value = "", p.value = !1), s(v), o("input", N.value);
-    }, We = () => {
-      o(d.SHOW_MORE);
-    }, je = Bt(
+      te.value && (D.value = ""), p.value && (p.value = !1, m.value.onOutsideDropdownClick());
+    }, We = (y) => {
+      e.multiple || (D.value = "", p.value = !1), s(y), o("input", M.value);
+    }, je = () => {
+      o(u.SHOW_MORE);
+    }, Ue = Dt(
       {
-        inputContainerRef: c,
-        optionsContainerRef: y,
-        selectedValueIndex: Ae,
+        inputContainerRef: f,
+        optionsContainerRef: m,
+        selectedValueIndex: Ne,
         isDropdownOpen: p,
-        isDynamicFltering: I(t, "dynamicFiltering"),
-        items: t.items,
-        isMultiple: t.multiple
+        isDynamicFltering: I(e, "dynamicFiltering"),
+        items: e.items,
+        isMultiple: e.multiple
       },
-      ae,
-      Ke,
-      te
-    ), Ue = Dt(
+      le,
+      ze,
+      ae
+    ), qe = It(
       {
-        inputContainerRef: c,
+        inputContainerRef: f,
         isDropdownOpen: p
       },
-      te
-    ), qe = {
-      [d.CLOSE_DROPDOWN]: te,
-      [d.SELECT]: ze,
-      [d.SHOW_MORE]: We,
-      ...Ue
+      ae
+    ), He = {
+      [u.CLOSE_DROPDOWN]: ae,
+      [u.SELECT]: We,
+      [u.SHOW_MORE]: je,
+      ...qe
     };
-    return t.error && be(
+    return e.error && he(
       '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 && be('BentoDropdown "size" property', "Do not use. Only 'default' size should be used.", "2.0.0"), (v, C) => {
+    ), e.size && he('BentoDropdown "size" property', "Do not use. Only 'default' size should be used.", "2.0.0"), (y, C) => {
       var B;
-      return G((g(), M("div", {
-        class: de(["b-dropdown", l(Be)])
+      return Q((h(), N("div", {
+        class: ce(["b-dropdown", l(De)])
       }, [
-        l(S) ? (g(), k(l(nt), {
+        l(w) ? (h(), k(l(st), {
           key: 0,
-          id: l($),
-          condensed: e.condensed,
-          label: l(S),
-          "tooltip-text": e.tooltipText,
-          optional: e.optional,
-          required: e.required
+          id: l(x),
+          condensed: t.condensed,
+          label: l(w),
+          "tooltip-text": t.tooltipText,
+          optional: t.optional,
+          required: t.required
         }, null, 8, ["id", "condensed", "label", "tooltip-text", "optional", "required"])) : P("", !0),
-        G((g(), M("div", A({
+        Q((h(), N("div", A({
           ref_key: "inputContainerRefWrapper",
-          ref: f
-        }, Z(l(je), !0)), [
-          (g(), k(Oe(l(X)), {
+          ref: b
+        }, G(l(Ue), !0)), [
+          (h(), k(Oe(l(ee)), {
             ref_key: "inputContainerRef",
-            ref: c,
-            condensed: e.condensed,
+            ref: f,
+            condensed: t.condensed,
             value: D.value,
-            "additional-items-selected": l(ke),
-            ariaControls: l(h),
+            "additional-items-selected": l(Pe),
+            ariaControls: l(i),
             ariaExpanded: p.value,
-            "aria-labelledby": l(S) ? l($) : null,
-            "aria-describedby": l(Pe),
-            "aria-label": l(z),
+            "aria-labelledby": l(w) ? l(x) : null,
+            "aria-describedby": l(Ke),
+            "aria-label": l(F),
             "aria-readonly": l(L),
             readonly: l(L),
-            disabled: e.disabled,
-            "display-value": l(Re),
-            "dynamic-filtering": e.dynamicFiltering,
-            "is-invalid": !!e.errorMessage || e.error,
-            multiple: e.multiple,
+            disabled: t.disabled,
+            "display-value": l(Te),
+            "dynamic-filtering": t.dynamicFiltering,
+            "is-invalid": !!t.errorMessage || t.error,
+            multiple: t.multiple,
             open: p.value,
-            "selected-value-item": l(W) ? void 0 : l(Te),
-            "show-slot-content-in-multiple": e.showSlotContentInMultiple,
+            "selected-value-item": l(W) ? void 0 : l(Ae),
+            "show-slot-content-in-multiple": t.showSlotContentInMultiple,
             onInput: C[0] || (C[0] = (j) => D.value = j),
-            onOpen: ae,
-            onClose: ae
-          }, ne({ _: 2 }, [
-            se(l(n), (j, U) => ({
+            onOpen: le,
+            onClose: le
+          }, ie({ _: 2 }, [
+            re(l(n), (j, U) => ({
               name: U,
-              fn: K((le) => [
-                Y(v.$slots, U, ie(re(le)), void 0, !0)
+              fn: K((oe) => [
+                Z(y.$slots, U, de(ue(oe)), void 0, !0)
               ])
             }))
           ]), 1064, ["condensed", "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"]))
         ], 16)), [
-          [l(tt)]
+          [l(at)]
         ]),
-        c.value ? (g(), k(l(ct), A({
+        f.value ? (h(), k(l(ft), A({
           key: 1,
-          id: l(h),
+          id: l(i),
           ref_key: "optionsContainerRef",
-          ref: y,
-          "aria-label": l(z),
-          "empty-state": e.emptyState,
-          "debounce-time": (B = e.search) == null ? void 0 : B.debounceTime,
-          disabled: e.disabled,
-          "is-option-disabled": e.isOptionDisabled,
-          items: l(Ie),
-          multiple: e.multiple,
-          "static-categories": e.staticCategories,
+          ref: m,
+          "aria-label": l(F),
+          "empty-state": t.emptyState,
+          "debounce-time": (B = t.search) == null ? void 0 : B.debounceTime,
+          disabled: t.disabled,
+          "is-option-disabled": t.isOptionDisabled,
+          items: l(Re),
+          multiple: t.multiple,
+          "static-categories": t.staticCategories,
           open: p.value,
-          "selected-value": l(x),
-          searching: l(ee),
-          "target-element": f.value,
-          loading: e.loading,
-          "has-more-items": e.hasMoreItems,
-          "lazy-load-type": e.lazyLoadType,
-          "virtual-scroll": e.virtualScroll
-        }, Z(qe)), ne({ _: 2 }, [
-          se(l(n), (j, U) => ({
+          "selected-value": l($),
+          searching: l(te),
+          "target-element": b.value,
+          loading: t.loading,
+          "has-more-items": t.hasMoreItems,
+          "lazy-load-type": t.lazyLoadType,
+          "virtual-scroll": t.virtualScroll
+        }, G(He)), ie({ _: 2 }, [
+          re(l(n), (j, U) => ({
             name: U,
-            fn: K((le) => [
-              Y(v.$slots, U, ie(re(le)), void 0, !0)
+            fn: K((oe) => [
+              Z(y.$slots, U, de(ue(oe)), void 0, !0)
             ])
           }))
         ]), 1040, ["id", "aria-label", "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"])) : P("", !0),
-        e.errorMessage ? (g(), k(l(st), {
+        t.errorMessage ? (h(), k(l(it), {
           key: 2,
-          id: l(E),
-          "error-message": e.errorMessage,
+          id: l(O),
+          "error-message": t.errorMessage,
           class: "b-dropdown__error-message"
         }, null, 8, ["id", "error-message"])) : P("", !0),
-        e.description || l(i)("description") ? (g(), k(l(Ye), {
+        t.description || l(r)("description") ? (h(), k(l(Ze), {
           key: 3,
-          id: l(O),
-          class: de(["b-dropdown__description", l(De)]),
+          id: l(E),
+          class: ce(["b-dropdown__description", l(Ie)]),
           el: "span"
         }, {
           default: K(() => [
-            Y(v.$slots, "description", {}, () => [
-              Je(fe(e.description), 1)
+            Z(y.$slots, "description", {}, () => [
+              Ye(me(t.description), 1)
             ], !0)
           ]),
           _: 3
         }, 8, ["id", "class"])) : P("", !0)
       ], 2)), [
-        [l(Ge), Fe]
+        [l(et), Fe]
       ]);
     };
   }
-}), Jt = /* @__PURE__ */ V(At, [["__scopeId", "data-v-690ac639"]]);
+}), Zt = /* @__PURE__ */ _(Nt, [["__scopeId", "data-v-690ac639"]]);
 export {
-  Jt as B,
-  Rt as I,
-  H as a,
-  It as u
+  Zt as B,
+  Tt as I,
+  Rt as u
 };
-//# sourceMappingURL=dropdown.CxBlK83Q.js.map
+//# sourceMappingURL=dropdown.CoVT4i0B.js.map