@adyen/bento-vue3 1.45.0 → 1.46.0

package/dist/chunks/{dropdown.CZDXXpKe.js → dropdown.DhvCTlVl.js}

@@ -1,22 +1,22 @@
-import { ref as w, watch as Ee, computed as c, defineComponent as j, useSlots as Oe, toRefs as Ce, createBlock as K, openBlock as x, resolveDynamicComponent as Be, mergeProps as k, withCtx as z, createElementVNode as te, withKeys as _e, unref as s, createVNode as Q, toHandlers as G, createSlots as re, renderList as de, renderSlot as X, normalizeProps as ue, guardReactiveProps as ce, createElementBlock as P, createCommentVNode as F, toDisplayString as ve, normalizeClass as fe, withDirectives as ee, vShow as xe, nextTick as M, useAttrs as Ze, toRef as E, inject as Qe, createTextVNode as Xe } from "vue";
-import { d as Le, B as Ge } from "./typography.DN5eC5ch.js";
-import { g as V } from "./generate-uid.NJ8tVoha.js";
-import { u as et } from "./aria-label.CaUURpnB.js";
-import { u as ye } from "./i18n.WMYWtwxB.js";
-import { u as tt } from "./use-form-layout-loading.D3lALhtC.js";
-import { B as lt } from "./directive.O3yEdalv.js";
-import { s as ne } from "./events.FNmSWp_P.js";
-import { B as R, a as at } from "./keyboard-navigation.C3QMVRKY.js";
-import { a as ie, b as q, c as ot, B as J, D as st } from "./dropdown-default-textbox.ipIFhyWZ.js";
-import { a as u, b as pe, B as me, c as nt, u as it } from "./use-cached-selected-values.BBD_AA1m.js";
+import { ref as $, watch as Ee, computed as u, defineComponent as j, useSlots as Oe, toRefs as Ce, openBlock as L, createBlock as K, resolveDynamicComponent as Be, mergeProps as k, withCtx as z, createElementVNode as te, withKeys as _e, unref as n, createVNode as Q, toHandlers as G, createSlots as re, renderList as de, renderSlot as X, normalizeProps as ue, guardReactiveProps as ce, createElementBlock as P, toDisplayString as ve, createCommentVNode as F, normalizeClass as fe, withDirectives as ee, vShow as xe, nextTick as M, useAttrs as Ze, toRef as B, inject as Qe, createTextVNode as Xe } from "vue";
+import { d as Le, B as Ge } from "./typography.DNzU41ah.js";
+import { a as ne, b as q, c as et, B as V, D as tt } from "./dropdown-default-textbox.3HzBUxC3.js";
+import { _ as Y } from "./_plugin-vue_export-helper.CHgC5LLL.js";
+import { s as ie } from "./events.FNmSWp_P.js";
+import { g as J } from "./generate-uid.D-HFI38h.js";
+import { u as lt } from "./aria-label.CaUURpnB.js";
+import { u as be } from "./i18n.CPGoe9tN.js";
+import { u as at } from "./use-form-layout-loading.D3lALhtC.js";
+import { B as ot } from "./directive.O3yEdalv.js";
+import { B as R, a as st } from "./keyboard-navigation.C3QMVRKY.js";
+import { a as d, B as pe, b as me, c as nt, u as it } from "./use-cached-selected-values.CvdhdRHz.js";
 import { u as rt } from "./use-has-slot.B7eQSabc.js";
-import { F as dt, E as ut } from "./error-message.BVE3JdTq.js";
-import { P as Se } from "./popper-container.DKDjRvdv.js";
+import { F as dt, E as ut } from "./error-message.C6QpZ9ux.js";
+import { P as Se } from "./popper-container.CQblHdJf.js";
 import "./popper-container.types.BCZMbVFD.js";
-import { B as ct } from "./popover.3KG1IoYE.js";
-import { _ as Y } from "./_plugin-vue_export-helper.CHgC5LLL.js";
+import { B as ct } from "./popover.BFZU1OKv.js";
 import "../assets/dropdown.css";
-const be = {
+const ye = {
   "en-US": {
     apply: "Apply",
     cancel: "Cancel",
@@ -30,59 +30,59 @@ const be = {
     apply: "適用",
     cancel: "キャンセル"
   }
-}, ft = (e, o, n, l) => {
-  const i = w(e.value), { t: a } = ye({ messages: be });
+}, ft = (e, o, i, l) => {
+  const s = $(e.value), { t: a } = be({ messages: ye });
   Ee(e, () => {
-    i.value = e.value;
+    s.value = e.value;
   });
-  const t = c(
-    () => JSON.stringify(i.value) === JSON.stringify(e.value)
-  ), d = () => {
-    l(u.SELECT, i.value), l(u.CLOSE_DROPDOWN);
-  }, f = () => {
-    i.value = e.value, l(u.CLOSE_DROPDOWN);
+  const t = u(
+    () => JSON.stringify(s.value) === JSON.stringify(e.value)
+  ), r = () => {
+    l(d.SELECT, s.value), l(d.CLOSE_DROPDOWN);
+  }, c = () => {
+    s.value = e.value, l(d.CLOSE_DROPDOWN);
   }, y = () => {
-    n.value && o.value && (i.value = e.value);
-  }, p = c(() => [
+    i.value && o.value && (s.value = e.value);
+  }, m = u(() => [
     {
       title: a("apply"),
-      event: d,
+      event: r,
       disabled: t.value
     },
     {
       title: a("cancel"),
-      event: f
+      event: c
     }
-  ]), g = (h) => {
-    i.value = h, o.value || l(u.SELECT, h);
-  }, r = (h) => {
-    g(h), l(u.TAB);
-  }, $ = (h) => {
-    g(h), l(u.ENTER);
-  }, O = (h) => {
-    g(h), l(u.SPACE);
+  ]), h = (x) => {
+    s.value = x, o.value || l(d.SELECT, x);
+  }, p = (x) => {
+    h(x), l(d.TAB);
+  }, E = (x) => {
+    h(x), l(d.ENTER);
+  }, O = (x) => {
+    h(x), l(d.SPACE);
+  }, f = () => {
+    c(), l(d.ESCAPE);
   }, C = () => {
-    f(), l(u.ESCAPE);
-  }, B = () => {
-    l(u.SHOW_MORE);
-  }, L = {
-    [u.SELECT]: g,
-    [u.SHOW_MORE]: B,
-    [u.TAB]: r,
-    [u.SPACE]: O,
-    [u.ENTER]: $
+    l(d.SHOW_MORE);
+  }, S = {
+    [d.SELECT]: h,
+    [d.SHOW_MORE]: C,
+    [d.TAB]: p,
+    [d.SPACE]: O,
+    [d.ENTER]: E
   };
   return {
     // Values
-    actions: p,
-    internalSelectedValue: i,
+    actions: m,
+    internalSelectedValue: s,
     // Methods
-    listeners: L,
-    onEscapeKey: C,
+    listeners: S,
+    onEscapeKey: f,
     onOutsideDropdownClick: y
   };
 }, pt = j({
-  i18n: { messages: be },
+  i18n: { messages: ye },
   name: "bento-dropdown-options-container"
 }), mt = /* @__PURE__ */ j({
   ...pt,
@@ -140,8 +140,8 @@ const be = {
      */
     lazyLoadType: {
       type: String,
-      default: me.AUTOMATIC,
-      validator: (e) => Object.values(me).includes(e)
+      default: pe.AUTOMATIC,
+      validator: (e) => Object.values(pe).includes(e)
     },
     /**
      * Indicates if new options are loading.
@@ -171,7 +171,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
      */
@@ -190,14 +190,14 @@ const be = {
       default: !1
     }
   },
-  setup(e, { expose: o, emit: n }) {
-    const l = Oe(), i = n, a = e, { selectedValue: t, multiple: d } = Ce(a), f = w(null), { t: y } = ye({ messages: be }), p = c(() => a.open && !a.disabled), g = c(() => y("noOptionsMatchThisSearch")), r = c(() => ({
+  setup(e, { expose: o, emit: i }) {
+    const l = Oe(), s = i, a = e, { selectedValue: t, multiple: r } = Ce(a), c = $(null), { t: y } = be({ messages: ye }), m = u(() => a.open && !a.disabled), h = u(() => y("noOptionsMatchThisSearch")), p = u(() => ({
       "b-dropdown-options-container--single": !(a != null && a.multiple)
-    })), $ = c(() => ({
+    })), E = u(() => ({
       "b-dropdown-options-container__listbox--single": !(a != null && a.multiple)
-    })), { actions: O, internalSelectedValue: C, listeners: B, onEscapeKey: L, onOutsideDropdownClick: h } = ft(t, d, p, i), m = c(() => a != null && a.multiple ? ct : Se), b = c(() => {
+    })), { actions: O, internalSelectedValue: f, listeners: C, onEscapeKey: S, onOutsideDropdownClick: x } = ft(t, r, m, s), v = u(() => a != null && a.multiple ? ct : Se), g = u(() => {
       var T;
-      const S = {
+      const w = {
         "min-width": `${(T = a == null ? void 0 : a.targetElement) == null ? void 0 : T.clientWidth}px`,
         "max-width": "min(500px, 95%)"
       };
@@ -206,12 +206,12 @@ const be = {
         actions: O.value,
         divider: !0,
         fallbackPosition: ["top-start"],
-        id: V(`dropdown-options-${a.id}`),
+        id: J(`dropdown-options-${a.id}`),
         open: a.open,
         position: "bottom-start",
         style: {
           width: "auto",
-          ...S
+          ...w
         },
         targetElement: a.targetElement
       } : {
@@ -219,49 +219,49 @@ const be = {
         offset: [0, 8],
         position: "bottom-start",
         style: {
-          display: p.value ? "block" : "none",
-          ...S
+          display: m.value ? "block" : "none",
+          ...w
         },
         targetElement: a.targetElement
       };
     });
     return o({
-      onOutsideDropdownClick: h
-    }), (S, T) => (x(), K(Be(m.value), k({
-      class: ["b-dropdown-options-container", r.value],
+      onOutsideDropdownClick: x
+    }), (w, T) => (L(), K(Be(v.value), k({
+      class: ["b-dropdown-options-container", p.value],
       "aria-label": e.ariaLabel
-    }, b.value), {
+    }, g.value), {
       default: z(() => [
         te("div", {
           onKeydown: T[0] || (T[0] = _e(
             //@ts-ignore
-            (...N) => s(L) && s(L)(...N),
+            (...N) => n(S) && n(S)(...N),
             ["esc"]
           ))
         }, [
-          Q(s(pe), k({
+          Q(n(me), k({
             id: e.id,
             ref_key: "dropdownOptionsListboxRef",
-            ref: f,
+            ref: c,
             "aria-label": e.ariaLabel,
-            class: ["b-dropdown-options-container__listbox", $.value],
+            class: ["b-dropdown-options-container__listbox", E.value],
             "empty-state": e.emptyState,
             "is-option-disabled": e.isOptionDisabled,
             items: e.items,
-            "selected-value": s(C),
-            multiple: s(d),
+            "selected-value": n(f),
+            multiple: n(r),
             "static-categories": e.staticCategories,
-            "no-results-message": g.value,
+            "no-results-message": h.value,
             searching: e.searching,
             loading: e.loading,
             "lazy-load-type": e.lazyLoadType,
             "has-more-items": e.hasMoreItems,
             "virtual-scroll": e.virtualScroll
-          }, G(s(B))), re({ _: 2 }, [
-            de(s(l), (N, W) => ({
+          }, G(n(C))), re({ _: 2 }, [
+            de(n(l), (N, W) => ({
               name: W,
               fn: z((_) => [
-                X(S.$slots, W, ue(ce(_)), void 0, !0)
+                X(w.$slots, W, ue(ce(_)), 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"])
@@ -272,42 +272,42 @@ const be = {
   }
 }), vt = /* @__PURE__ */ Y(mt, [["__scopeId", "data-v-9390dd46"]]);
 let we = 0;
-const yt = {
+const bt = {
   beforeCreate() {
     this.uuid = we.toString(), we += 1;
   }
-}, bt = { key: 0 };
-function gt(e, o, n, l, i, a) {
-  return x(), P("svg", k({ role: "img" }, e.$attrs, {
+}, yt = { key: 0 };
+function gt(e, o, i, l, s, a) {
+  return L(), P("svg", k({ role: "img" }, e.$attrs, {
     class: "ui-assets-icons-16",
     xmlns: "http://www.w3.org/2000/svg",
     width: "16",
     height: "16",
     fill: "none"
   }), [
-    e.$attrs["svg-title"] ? (x(), P("title", bt, ve(e.$attrs["svg-title"]), 1)) : F("", !0),
+    e.$attrs["svg-title"] ? (L(), P("title", yt, ve(e.$attrs["svg-title"]), 1)) : F("", !0),
     o[0] || (o[0] = te("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 ht = /* @__PURE__ */ Y(yt, [["render", gt]]);
+const ht = /* @__PURE__ */ Y(bt, [["render", gt]]);
 let $e = 0;
 const xt = {
   beforeCreate() {
     this.uuid = $e.toString(), $e += 1;
   }
 }, Lt = { key: 0 };
-function St(e, o, n, l, i, a) {
-  return x(), P("svg", k({ role: "img" }, e.$attrs, {
+function St(e, o, i, l, s, a) {
+  return L(), P("svg", k({ role: "img" }, e.$attrs, {
     class: "ui-assets-icons-16",
     xmlns: "http://www.w3.org/2000/svg",
     width: "16",
     height: "16",
     fill: "none"
   }), [
-    e.$attrs["svg-title"] ? (x(), P("title", Lt, ve(e.$attrs["svg-title"]), 1)) : F("", !0),
+    e.$attrs["svg-title"] ? (L(), P("title", Lt, ve(e.$attrs["svg-title"]), 1)) : F("", !0),
     o[0] || (o[0] = te("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"
@@ -378,42 +378,49 @@ const wt = /* @__PURE__ */ Y(xt, [["render", St]]), $t = { class: "b-dropdown-sm
     value: { type: String, default: "" }
   },
   emits: ["clear", "close", "input", "keydown", "open"],
-  setup(e, { emit: o }) {
-    const n = o, l = e, i = c(() => ({
-      [`b-dropdown-small-textbox--${ie.DISABLED}`]: l.disabled,
-      [`b-dropdown-small-textbox--${ie.READONLY}`]: l.readonly,
-      [`b-dropdown-small-textbox--${ie.OPENED}`]: l.open
-    })), a = c(() => l.open && !l.disabled && !l.readonly), t = (r) => {
-      n("input", r);
-    }, d = (r) => {
-      n("keydown", r);
-    }, f = (r) => {
-      ne(r), n("open");
-    }, y = (r) => {
-      ne(r), n("close");
-    }, p = (r) => {
-      ne(r), n("clear");
-    }, g = {
-      [q.INPUT]: t,
-      [q.OPEN]: f,
-      [q.CLOSE]: y,
+  setup(e, { expose: o, emit: i }) {
+    const l = i, s = e, a = $(null), t = u(() => ({
+      [`b-dropdown-small-textbox--${ne.DISABLED}`]: s.disabled,
+      [`b-dropdown-small-textbox--${ne.READONLY}`]: s.readonly,
+      [`b-dropdown-small-textbox--${ne.OPENED}`]: s.open
+    })), r = u(() => s.open && !s.disabled && !s.readonly), c = (f) => {
+      l("input", f);
+    }, y = (f) => {
+      l("keydown", f);
+    }, m = (f) => {
+      ie(f), l("open");
+    }, h = (f) => {
+      ie(f), l("close");
+    }, p = (f) => {
+      ie(f), l("clear");
+    }, E = {
+      [q.INPUT]: c,
+      [q.OPEN]: m,
+      [q.CLOSE]: h,
       [q.CLEAR]: p,
-      [q.KEYDOWN]: d
+      [q.KEYDOWN]: y
     };
-    return (r, $) => (x(), P("div", {
-      class: fe(["b-dropdown-small-textbox", i.value])
+    return o({
+      focus: () => {
+        a.value.focus();
+      }
+    }), (f, C) => (L(), P("div", {
+      class: fe(["b-dropdown-small-textbox", t.value])
     }, [
-      Q(ot, k({ ...r.$attrs, ...r.$props }, {
+      Q(et, k({
+        ref_key: "baseTextbox",
+        ref: a
+      }, { ...f.$attrs, ...f.$props }, {
         class: "b-dropdown-small-textbox__textbox",
-        size: s(J).SMALL
-      }, G(g)), {
+        size: n(V).SMALL
+      }, G(E)), {
         icon: z(() => [
           te("div", $t, [
-            ee(Q(s(wt), { "svg-title": "opened" }, null, 512), [
-              [xe, a.value]
+            ee(Q(n(wt), { "svg-title": "opened" }, null, 512), [
+              [xe, r.value]
             ]),
-            ee(Q(s(ht), { "svg-title": "closed" }, null, 512), [
-              [xe, !a.value]
+            ee(Q(n(ht), { "svg-title": "closed" }, null, 512), [
+              [xe, !r.value]
             ])
           ])
         ]),
@@ -421,108 +428,108 @@ const wt = /* @__PURE__ */ Y(xt, [["render", St]]), $t = { class: "b-dropdown-sm
       }, 16, ["size"])
     ], 2));
   }
-}), Ct = /* @__PURE__ */ Y(Ot, [["__scopeId", "data-v-2fa2d897"]]), Bt = (e, o) => o.value.reduce((n, l) => {
+}), Ct = /* @__PURE__ */ Y(Ot, [["__scopeId", "data-v-66b5eaa5"]]), Bt = (e, o) => o.value.reduce((i, l) => {
   if (l.items) {
-    const i = l.items.filter(
-      (t) => e.value.find((d) => d.value === t.value)
+    const s = l.items.filter(
+      (t) => e.value.find((r) => r.value === t.value)
     );
-    i.length === l.items.length ? n.push(l.displayValue ?? l.label) : i.forEach(({ label: t, displayValue: d }) => n.push(d ?? t));
+    s.length === l.items.length ? i.push(l.displayValue ?? l.label) : s.forEach(({ label: t, displayValue: r }) => i.push(r ?? t));
   }
-  return e.value.find((i) => i.value === l.value) && n.push(l.displayValue ?? l.label), n;
-}, []).join(", "), It = ({ items: e, placeholder: o, selectedValues: n, isMultiSelect: l }) => {
-  const i = c(
+  return e.value.find((s) => s.value === l.value) && i.push(l.displayValue ?? l.label), i;
+}, []).join(", "), It = ({ items: e, placeholder: o, selectedValues: i, isMultiSelect: l }) => {
+  const s = u(
     () => l.value && e.value.find((t) => {
-      var d;
-      return (d = t.items) == null ? void 0 : d.length;
+      var r;
+      return (r = t.items) == null ? void 0 : r.length;
     })
   );
-  return c(() => n.value.length ? i.value ? Bt(n, e) : n.value.map(({ label: t, displayValue: d }) => d ?? t).join(", ") : o.value || null);
+  return u(() => i.value.length ? s.value ? Bt(i, e) : i.value.map(({ label: t, displayValue: r }) => r ?? t).join(", ") : o.value || null);
 }, Ie = (e) => {
   var o;
   (o = e.value.$children) == null || o[0].$refs.textbox.focus();
 }, Dt = ({
   inputContainerRef: e,
   optionsContainerRef: o,
-  selectedValueIndex: n,
+  selectedValueIndex: i,
   isDropdownOpen: l,
-  isDynamicFltering: i,
+  isDynamicFltering: s,
   items: a,
   isMultiple: t
-}, d, f, y) => {
-  const p = ({ detail: m }) => {
-    m.preventDefault(), l.value || f(), M(() => {
-      var b;
-      t ? (b = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || b[0].$el.focus() : (o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.setListboxFocusedIndex(
-        n.value
-      ), o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.listboxItemRef[n.value].$el.focus());
+}, r, c, y) => {
+  const m = ({ detail: v }) => {
+    v.preventDefault(), l.value || c(), M(() => {
+      var g;
+      t ? (g = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || g[0].$el.focus() : (o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.setListboxFocusedIndex(
+        i.value
+      ), o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.listboxItemRef[i.value].$el.focus());
     });
-  }, g = ({ detail: m }) => {
-    m.preventDefault(), l.value || f(), M(() => {
+  }, h = ({ detail: v }) => {
+    v.preventDefault(), l.value || c(), M(() => {
       o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.setListboxFocusedIndex(
-        n.value
-      ), o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.listboxItemRef[n.value].$el.focus();
+        i.value
+      ), o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.listboxItemRef[i.value].$el.focus();
     });
-  }, r = () => {
-    l.value || (f(), M(() => {
-      var m, b;
+  }, p = () => {
+    l.value || (c(), M(() => {
+      var v, g;
       if (t) {
-        const S = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children;
-        (m = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || m[S.length - 1].$children[a.length - 1].$el.focus();
+        const w = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children;
+        (v = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || v[w.length - 1].$children[a.length - 1].$el.focus();
       } else
-        (b = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || b[a.length - 1].$el.focus();
+        (g = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || g[a.length - 1].$el.focus();
     }));
-  }, $ = () => {
+  }, E = () => {
     l.value && (y(), Ie(e));
   }, O = () => {
     l.value && y();
-  }, C = () => {
-    l.value || f(), M(() => {
-      var m;
-      (m = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || m[0].$el.focus();
+  }, f = () => {
+    l.value || c(), M(() => {
+      var v;
+      (v = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || v[0].$el.focus();
     });
-  }, B = ({ detail: m }) => {
-    m.preventDefault(), d(), l.value && M(() => {
-      var b, S;
-      t ? (b = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || b[0].$el.focus() : (S = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || S[n.value].$el.focus();
+  }, C = ({ detail: v }) => {
+    v.preventDefault(), r(), l.value && M(() => {
+      var g, w;
+      t ? (g = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || g[0].$el.focus() : (w = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || w[i.value].$el.focus();
     });
-  }, L = () => {
-    d(), l.value && M(() => {
-      var m, b;
-      t ? (m = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || m[0].$el.focus() : (b = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || b[n.value].$el.focus();
+  }, S = () => {
+    r(), l.value && M(() => {
+      var v, g;
+      t ? (v = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || v[0].$el.focus() : (g = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || g[i.value].$el.focus();
     });
   };
-  return c(() => ({
-    ...i.value ? {} : { [R.SPACE]: B },
-    [R.ENTER]: L,
-    [R.ARROW_DOWN]: p,
-    [R.ARROW_UP]: g,
-    [R.END]: r,
-    [R.ESCAPE]: $,
-    [R.HOME]: C,
+  return u(() => ({
+    ...s.value ? {} : { [R.SPACE]: C },
+    [R.ENTER]: S,
+    [R.ARROW_DOWN]: m,
+    [R.ARROW_UP]: h,
+    [R.END]: p,
+    [R.ESCAPE]: E,
+    [R.HOME]: f,
     [R.TAB]: O
   }));
-}, Rt = ({ inputContainerRef: e, isDropdownOpen: o }, n) => {
+}, Rt = ({ inputContainerRef: e, isDropdownOpen: o }, i) => {
   const l = () => {
-    o.value && n(), M(() => {
+    o.value && i(), M(() => {
       Ie(e);
     });
   };
   return {
-    [u.ENTER]: l,
-    [u.ESCAPE]: l,
-    [u.TAB]: l,
-    [u.SPACE]: l
+    [d.ENTER]: l,
+    [d.ESCAPE]: l,
+    [d.TAB]: l,
+    [d.SPACE]: l
   };
 };
-function Tt(e, o, n, l) {
-  const i = w(e), a = w(o), t = (f, y = []) => y.flatMap((p) => p.label.toLocaleLowerCase().includes(f) ? l != null && l.value && p.items ? [...t(f, p.items)] : [p, ...t(f, p.items)] : p.items ? [...t(f, p.items)] : []);
-  return Ee(i, () => {
-    n !== void 0 && n(i.value);
-  }), c(() => {
-    if (!i.value || n !== void 0)
+function Tt(e, o, i, l) {
+  const s = $(e), a = $(o), t = (c, y = []) => y.flatMap((m) => m.label.toLocaleLowerCase().includes(c) ? l != null && l.value && m.items ? [...t(c, m.items)] : [m, ...t(c, m.items)] : m.items ? [...t(c, m.items)] : []);
+  return Ee(s, () => {
+    i !== void 0 && i(s.value);
+  }), u(() => {
+    if (!s.value || i !== void 0)
       return a.value;
-    const f = i.value.toLocaleLowerCase();
-    return t(f, a.value);
+    const c = s.value.toLocaleLowerCase();
+    return t(c, a.value);
   });
 }
 const De = {
@@ -543,7 +550,7 @@ const De = {
   i18n: { messages: De },
   name: "b-dropdown",
   components: {
-    DropdownInputDefault: st,
+    DropdownInputDefault: tt,
     DropdownInputSmall: Ct
   }
 }), Mt = /* @__PURE__ */ j({
@@ -634,8 +641,8 @@ const De = {
      */
     lazyLoadType: {
       type: String,
-      default: pe.props.lazyLoadType.default,
-      validator: (e) => Object.values(me).includes(e)
+      default: me.props.lazyLoadType.default,
+      validator: (e) => Object.values(pe).includes(e)
     },
     /*
      * If enabled, the user will be able to select multiple items.
@@ -675,7 +682,7 @@ const De = {
     size: {
       type: String,
       default: null,
-      validator: (e) => Object.values(J).includes(e)
+      validator: (e) => Object.values(V).includes(e)
     },
     /**
      * If enabled, dropdown will display non-selectable, static categories
@@ -704,69 +711,69 @@ const De = {
     }
   },
   emits: ["input", "show-more"],
-  setup(e, { expose: o, emit: n }) {
+  setup(e, { expose: o, emit: i }) {
     var he;
-    const l = Ze(), i = Oe(), a = rt(i), t = e, d = n, { t: f } = ye({ messages: De }), y = w(null), p = w(null), g = w(null), r = w(!1), $ = V("bento-dropdown-options-container"), O = V("dropdown-label"), C = V("dropdown-description"), B = V("dropdown-error"), { isReadOnly: L } = tt(E(t, "readonly")), { cachedSelectedListboxOptions: h, cachedListboxSelectedValues: m, setCachedValues: b } = nt(
-      E(t, "items"),
-      E(t, "value"),
-      E(t, "multiple")
-    ), S = w(l["aria-label"]), { ariaLabel: T, label: N } = Ce(t), W = et({
+    const l = Ze(), s = Oe(), a = rt(s), t = e, r = i, { t: c } = be({ messages: De }), y = $(null), m = $(null), h = $(null), p = $(!1), E = J("bento-dropdown-options-container"), O = J("dropdown-label"), f = J("dropdown-description"), C = J("dropdown-error"), { isReadOnly: S } = at(B(t, "readonly")), { cachedSelectedListboxOptions: x, cachedListboxSelectedValues: v, setCachedValues: g } = nt(
+      B(t, "items"),
+      B(t, "value"),
+      B(t, "multiple")
+    ), w = $(l["aria-label"]), { ariaLabel: T, label: N } = Ce(t), W = lt({
       // TODO: take ariaLabel ref away when aria-label prop is removed
-      ariaLabel: T || S,
+      ariaLabel: T || w,
       label: N,
-      defaultFallback: f("ariaLabelFallback")
-    }), _ = t.size === J.SMALL || Qe(Nt, !1), Re = c(() => _ ? J.SMALL : J.DEFAULT), Te = c(() => ({
+      defaultFallback: c("ariaLabelFallback")
+    }), _ = t.size === V.SMALL || Qe(Nt, !1), Re = u(() => _ ? V.SMALL : V.DEFAULT), Te = u(() => ({
       "b-dropdown--condensed": t.condensed
-    })), Ne = c(() => ({
+    })), Ne = u(() => ({
       "b-dropdown__description--error": !!t.errorMessage
-    })), A = w(""), Z = E(t, "items"), ge = E(t, "staticCategories"), Ae = Tt(A, Z, (he = t == null ? void 0 : t.search) == null ? void 0 : he.searchEvent, ge), le = c(() => t.dynamicFiltering && !!A.value), Me = It({
+    })), A = $(""), Z = B(t, "items"), ge = B(t, "staticCategories"), Ae = Tt(A, Z, (he = t == null ? void 0 : t.search) == null ? void 0 : he.searchEvent, ge), le = u(() => t.dynamicFiltering && !!A.value), Me = It({
       items: Z,
-      placeholder: E(t, "placeholder"),
-      isMultiSelect: E(t, "multiple"),
-      selectedValues: h
-    }), ke = c(() => {
+      placeholder: B(t, "placeholder"),
+      isMultiSelect: B(t, "multiple"),
+      selectedValues: x
+    }), ke = 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)
+          ({ value: b }) => (t == null ? void 0 : t.value) && (t == null ? void 0 : t.value).includes(b)
         );
       if (!t.multiple && t.staticCategories) {
-        const v = t.items.find(
+        const b = t.items.find(
           (D) => D.items.some((U) => U.value === t.value)
         );
-        return v ? v.items.find((D) => D.value === t.value) : null;
+        return b ? b.items.find((D) => D.value === t.value) : null;
       }
-      return t.items.find(({ value: v }) => v === (t == null ? void 0 : t.value));
-    }), Pe = c(() => {
-      const v = t.items.findIndex(({ value: I }) => t.value === I);
-      return v > 0 ? v : 0;
-    }), { isMultiLevelSelect: Ke, flattenedItemsList: Fe } = it(Z), ze = c(() => {
-      var v;
+      return t.items.find(({ value: b }) => b === (t == null ? void 0 : t.value));
+    }), Pe = u(() => {
+      const b = t.items.findIndex(({ value: I }) => t.value === I);
+      return b > 0 ? b : 0;
+    }), { isMultiLevelSelect: Ke, flattenedItemsList: Fe } = it(Z), ze = u(() => {
+      var b;
       if (t.multiple) {
-        const I = (v = t == null ? void 0 : t.value) == null ? void 0 : v.length, D = Ke.value ? Fe.value.length : Z.value.length;
-        return !t.hasMoreItems && D === I ? f("all") : I;
+        const I = (b = t == null ? void 0 : t.value) == null ? void 0 : b.length, D = Ke.value ? Fe.value.length : Z.value.length;
+        return !t.hasMoreItems && D === I ? c("all") : I;
       }
       return null;
-    }), je = c(
-      () => `${t.description ? C : ""} ${t.errorMessage ? B : ""}`.trim() || null
+    }), je = u(
+      () => `${t.description ? f : ""} ${t.errorMessage ? C : ""}`.trim() || null
     ), We = () => {
-      L.value || (r.value = !0);
+      S.value || (p.value = !0);
     }, ae = () => {
-      r.value = !1;
+      p.value = !1;
     }, oe = () => {
-      L.value || (r.value = !r.value, le.value && (A.value = ""));
+      S.value || (p.value = !p.value, le.value && (A.value = ""));
     }, Ue = () => {
-      le.value && (A.value = ""), r.value && (r.value = !1, g.value.onOutsideDropdownClick());
-    }, He = (v) => {
-      t.multiple || (A.value = "", r.value = !1), b(v), d("input", m.value);
+      le.value && (A.value = ""), p.value && (p.value = !1, h.value.onOutsideDropdownClick());
+    }, He = (b) => {
+      t.multiple || (A.value = "", p.value = !1), g(b), r("input", v.value);
     }, qe = () => {
-      d(u.SHOW_MORE);
+      r(d.SHOW_MORE);
     }, Ve = Dt(
       {
         inputContainerRef: y,
-        optionsContainerRef: g,
+        optionsContainerRef: h,
         selectedValueIndex: Pe,
-        isDropdownOpen: r,
-        isDynamicFltering: E(t, "dynamicFiltering"),
+        isDropdownOpen: p,
+        isDynamicFltering: B(t, "dynamicFiltering"),
         items: t.items,
         isMultiple: t.multiple
       },
@@ -776,13 +783,13 @@ const De = {
     ), Je = Rt(
       {
         inputContainerRef: y,
-        isDropdownOpen: r
+        isDropdownOpen: p
       },
       ae
     ), Ye = {
-      [u.CLOSE_DROPDOWN]: ae,
-      [u.SELECT]: He,
-      [u.SHOW_MORE]: qe,
+      [d.CLOSE_DROPDOWN]: ae,
+      [d.SELECT]: He,
+      [d.SHOW_MORE]: qe,
       ...Je
     };
     return t.error && Le(
@@ -795,109 +802,109 @@ const De = {
       focus: () => {
         y.value.focus();
       }
-    }), (v, I) => {
+    }), (b, I) => {
       var D;
-      return ee((x(), P("div", {
+      return ee((L(), P("div", {
         class: fe(["b-dropdown", Te.value])
       }, [
-        s(N) ? (x(), K(s(dt), {
+        n(N) ? (L(), K(n(dt), {
           key: 0,
-          id: s(O),
+          id: n(O),
           condensed: e.condensed,
-          label: s(N),
+          label: n(N),
           "tooltip-text": e.tooltipText,
           optional: e.optional,
           required: e.required
         }, null, 8, ["id", "condensed", "label", "tooltip-text", "optional", "required"])) : F("", !0),
-        ee((x(), P("div", k({
+        ee((L(), P("div", k({
           ref_key: "inputContainerRefWrapper",
-          ref: p
-        }, G(s(Ve), !0)), [
-          (x(), K(Be(Re.value), {
+          ref: m
+        }, G(n(Ve), !0)), [
+          (L(), K(Be(Re.value), {
             ref_key: "inputContainerRef",
             ref: y,
             condensed: e.condensed,
             value: A.value,
             "additional-items-selected": ze.value,
-            ariaControls: s($),
-            ariaExpanded: r.value,
-            "aria-labelledby": s(N) ? s(O) : null,
+            ariaControls: n(E),
+            ariaExpanded: p.value,
+            "aria-labelledby": n(N) ? n(O) : null,
             "aria-describedby": je.value,
-            "aria-label": s(W),
-            "aria-readonly": s(L),
-            readonly: s(L),
+            "aria-label": n(W),
+            "aria-readonly": n(S),
+            readonly: n(S),
             disabled: e.disabled,
-            "display-value": s(Me),
+            "display-value": n(Me),
             "dynamic-filtering": e.dynamicFiltering,
             "is-invalid": !!e.errorMessage || e.error,
             multiple: e.multiple,
-            open: r.value,
-            "selected-value-item": s(_) ? void 0 : ke.value,
+            open: p.value,
+            "selected-value-item": n(_) ? void 0 : ke.value,
             "show-slot-content-in-multiple": e.showSlotContentInMultiple,
             onInput: I[0] || (I[0] = (U) => A.value = U),
             onOpen: oe,
             onClose: oe
           }, re({ _: 2 }, [
-            de(s(i), (U, H) => ({
+            de(n(s), (U, H) => ({
               name: H,
               fn: z((se) => [
-                X(v.$slots, H, ue(ce(se)), void 0, !0)
+                X(b.$slots, H, 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)), [
-          [s(at)]
+          [n(st)]
         ]),
-        y.value ? (x(), K(s(vt), k({
+        y.value ? (L(), K(n(vt), k({
           key: 1,
-          id: s($),
+          id: n(E),
           ref_key: "optionsContainerRef",
-          ref: g,
-          "aria-label": s(W),
+          ref: h,
+          "aria-label": n(W),
           "empty-state": e.emptyState,
           "debounce-time": (D = e.search) == null ? void 0 : D.debounceTime,
           disabled: e.disabled,
           "is-option-disabled": e.isOptionDisabled,
-          items: s(Ae),
+          items: n(Ae),
           multiple: e.multiple,
           "static-categories": ge.value,
-          open: r.value,
-          "selected-value": s(h),
+          open: p.value,
+          "selected-value": n(x),
           searching: le.value,
-          "target-element": p.value,
+          "target-element": m.value,
           loading: e.loading,
           "has-more-items": e.hasMoreItems,
           "lazy-load-type": e.lazyLoadType,
           "virtual-scroll": e.virtualScroll
         }, G(Ye)), re({ _: 2 }, [
-          de(s(i), (U, H) => ({
+          de(n(s), (U, H) => ({
             name: H,
             fn: z((se) => [
-              X(v.$slots, H, ue(ce(se)), void 0, !0)
+              X(b.$slots, H, 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"])) : F("", !0),
-        e.errorMessage ? (x(), K(s(ut), {
+        e.errorMessage ? (L(), K(n(ut), {
           key: 2,
-          id: s(B),
+          id: n(C),
           "error-message": e.errorMessage,
           class: "b-dropdown__error-message"
         }, null, 8, ["id", "error-message"])) : F("", !0),
-        e.description || s(a)("description") ? (x(), K(s(Ge), {
+        e.description || n(a)("description") ? (L(), K(n(Ge), {
           key: 3,
-          id: s(C),
+          id: n(f),
           class: fe(["b-dropdown__description", Ne.value]),
           el: "span"
         }, {
           default: z(() => [
-            X(v.$slots, "description", {}, () => [
+            X(b.$slots, "description", {}, () => [
               Xe(ve(e.description), 1)
             ], !0)
           ]),
           _: 3
         }, 8, ["id", "class"])) : F("", !0)
       ], 2)), [
-        [s(lt), Ue]
+        [n(ot), Ue]
       ]);
     };
   }
@@ -908,4 +915,4 @@ export {
   Nt as a,
   Tt as u
 };
-//# sourceMappingURL=dropdown.CZDXXpKe.js.map
+//# sourceMappingURL=dropdown.DhvCTlVl.js.map