@adyen/bento-vue3 1.32.0 → 1.33.0

package/dist/chunks/{dropdown.CZyiZiox.js → dropdown.DQpKDlC-.js}

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