@adyen/bento-vue3 1.27.0 → 1.28.0

package/dist/chunks/{dropdown.0ae3b842.js → dropdown.CxBlK83Q.js}

@@ -1,36 +1,36 @@
-import { ref as w, watch as Se, computed as u, defineComponent as K, useSlots as Le, toRefs as $e, openBlock as g, createBlock as N, resolveDynamicComponent as Oe, unref as a, mergeProps as T, withCtx as P, createElementVNode as Q, withKeys as Ue, createVNode as J, toHandlers as Z, createSlots as ne, renderList as se, renderSlot as Y, normalizeProps as ie, guardReactiveProps as re, createElementBlock as A, toDisplayString as fe, createCommentVNode as k, normalizeClass as de, withDirectives as G, vShow as ye, nextTick as R, useAttrs as qe, toRef as I, inject as He, createTextVNode as Ve } from "vue";
-import { d as be, B as Je } from "./index.ee15db35.js";
-import { g as j } from "./unique-id.a2a2b458.js";
-import { u as Ye } from "./aria-label.ac9651a5.js";
-import { u as pe } from "./i18n.f7e6533e.js";
-import { u as Ze } from "./use-form-layout-loading.d03e5d48.js";
-import { D as oe, a as ge, b as Ge, B as Qe, c as Xe } from "./dropdown-default-textbox.cda0798f.js";
-import { B as _, a as et } from "./keyboard-navigation.bbc3d15c.js";
-import { c as d, b as ue, B as ce, a as tt, u as lt } from "./use-cached-selected-values.3c312296.js";
-import { u as at } from "./use-has-slot.4d98bf29.js";
-import { F as ot, E as nt } from "./error-message.d2bdeb80.js";
-import { a as he } from "./index.6295e754.js";
-import { a as st } from "./index.a001a0a8.js";
-import { _ as q } from "./_plugin-vue_export-helper.dad06003.js";
+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 "../assets/dropdown.css";
-var U = /* @__PURE__ */ ((e) => (e.DEFAULT = "DropdownInputDefault", e.SMALL = "DropdownInputSmall", e))(U || {});
+var H = /* @__PURE__ */ ((e) => (e.DEFAULT = "DropdownInputDefault", e.SMALL = "DropdownInputSmall", e))(H || {});
 const me = {
   "en-US": {
     apply: "Apply",
     cancel: "Cancel",
     noOptionsMatchThisSearch: "No options match this search"
   }
-}, it = (e, o, t, l) => {
+}, rt = (e, o, t, a) => {
   const n = w(e.value), { t: i } = pe({ messages: me });
-  Se(e, () => {
+  we(e, () => {
     n.value = e.value;
   });
   const r = u(
     () => JSON.stringify(n.value) === JSON.stringify(e.value)
   ), c = () => {
-    l(d.SELECT, n.value), l(d.CLOSE_DROPDOWN);
+    a(d.SELECT, n.value), a(d.CLOSE_DROPDOWN);
   }, f = () => {
-    n.value = e.value, l(d.CLOSE_DROPDOWN);
+    n.value = e.value, a(d.CLOSE_DROPDOWN);
   }, y = () => {
     t.value && o.value && (n.value = e.value);
   }, p = u(() => [
@@ -44,38 +44,38 @@ const me = {
       event: f
     }
   ]), h = (s) => {
-    n.value = s, o.value || l(d.SELECT, s);
-  }, L = (s) => {
-    h(s), l(d.TAB);
+    n.value = s, o.value || a(d.SELECT, s);
   }, $ = (s) => {
-    h(s), l(d.ENTER);
+    h(s), a(d.TAB);
   }, O = (s) => {
-    h(s), l(d.SPACE);
+    h(s), a(d.ENTER);
+  }, E = (s) => {
+    h(s), a(d.SPACE);
+  }, L = () => {
+    f(), a(d.ESCAPE);
   }, x = () => {
-    f(), l(d.ESCAPE);
-  }, S = () => {
-    l(d.SHOW_MORE);
-  }, M = {
+    a(d.SHOW_MORE);
+  }, N = {
     [d.SELECT]: h,
-    [d.SHOW_MORE]: S,
-    [d.TAB]: L,
-    [d.SPACE]: O,
-    [d.ENTER]: $
+    [d.SHOW_MORE]: x,
+    [d.TAB]: $,
+    [d.SPACE]: E,
+    [d.ENTER]: O
   };
   return {
     // Values
     actions: p,
     internalSelectedValue: n,
     // Methods
-    listeners: M,
-    onEscapeKey: x,
+    listeners: N,
+    onEscapeKey: L,
     onOutsideDropdownClick: y
   };
-}, rt = K({
+}, dt = F({
   i18n: { messages: me },
   name: "bento-dropdown-options-container"
-}), dt = /* @__PURE__ */ K({
-  ...rt,
+}), ut = /* @__PURE__ */ F({
+  ...dt,
   props: {
     /**
      * Defines a string value that labels an interactive element.
@@ -181,29 +181,29 @@ const me = {
     }
   },
   setup(e, { expose: o, emit: t }) {
-    const l = e, n = Le(), { selectedValue: i, multiple: r } = $e(l), c = w(null), { t: f } = pe({ messages: me }), y = u(() => l.open && !l.disabled), p = u(() => f("noOptionsMatchThisSearch")), h = u(() => ({
-      "b-dropdown-options-container--single": !(l != null && l.multiple)
-    })), L = u(() => ({
-      "b-dropdown-options-container__listbox--single": !(l != null && l.multiple)
-    })), { actions: $, internalSelectedValue: O, listeners: x, onEscapeKey: S, onOutsideDropdownClick: M } = it(i, r, y, t), s = u(() => l != null && l.multiple ? st : he), m = u(() => {
-      var E;
+    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(() => ({
+      "b-dropdown-options-container--single": !(a != null && a.multiple)
+    })), $ = u(() => ({
+      "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": `${(E = l == null ? void 0 : l.targetElement) == null ? void 0 : E.clientWidth}px`,
+        "min-width": `${(S = a == null ? void 0 : a.targetElement) == null ? void 0 : S.clientWidth}px`,
         "max-width": "min(500px, 95%)"
       };
-      return l != null && l.multiple ? {
+      return a != null && a.multiple ? {
         actionsLayout: "space-between",
-        actions: $.value,
+        actions: O.value,
         divider: !0,
         fallbackPosition: ["top-start"],
-        id: j(`dropdown-options-${l.id}`),
-        open: l.open,
+        id: q(`dropdown-options-${a.id}`),
+        open: a.open,
         position: "bottom-start",
         style: {
           width: "auto",
           ...b
         },
-        targetElement: l.targetElement
+        targetElement: a.targetElement
       } : {
         fallbackPosition: ["top-start"],
         offset: [0, 8],
@@ -212,103 +212,103 @@ const me = {
           display: y.value ? "block" : "none",
           ...b
         },
-        targetElement: l.targetElement
+        targetElement: a.targetElement
       };
     });
     return o({
-      onOutsideDropdownClick: M
-    }), (b, E) => (g(), N(Oe(a(s)), T({
-      class: ["b-dropdown-options-container", a(h)]
-    }, a(m)), {
-      default: P(() => [
+      onOutsideDropdownClick: N
+    }), (b, S) => (g(), k(Oe(l(s)), A({
+      class: ["b-dropdown-options-container", l(h)],
+      "aria-label": e.ariaLabel
+    }, l(m)), {
+      default: K(() => [
         Q("div", {
-          onKeydown: E[0] || (E[0] = Ue(
+          onKeydown: S[0] || (S[0] = He(
             //@ts-ignore
-            (...F) => a(S) && a(S)(...F),
+            (...z) => l(x) && l(x)(...z),
             ["esc"]
           ))
         }, [
-          J(a(ce), T({
+          J(l(ce), A({
             id: e.id,
             ref_key: "dropdownOptionsListboxRef",
             ref: c,
             "aria-label": e.ariaLabel,
-            class: ["b-dropdown-options-container__listbox", a(L)],
+            class: ["b-dropdown-options-container__listbox", l($)],
             "empty-state": e.emptyState,
             "is-option-disabled": e.isOptionDisabled,
             items: e.items,
-            "selected-value": a(O),
-            multiple: a(r),
+            "selected-value": l(E),
+            multiple: l(r),
             "static-categories": e.staticCategories,
-            "no-results-message": a(p),
+            "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(a(x))), ne({ _: 2 }, [
-            se(a(n), (F, H) => ({
-              name: H,
-              fn: P((X) => [
-                Y(b.$slots, H, ie(re(X)), void 0, !0)
+          }, Z(l(L))), ne({ _: 2 }, [
+            se(l(n), (z, W) => ({
+              name: W,
+              fn: K((X) => [
+                Y(b.$slots, W, ie(re(X)), 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"])
         ], 32)
       ]),
       _: 3
-    }, 16, ["class"]));
+    }, 16, ["aria-label", "class"]));
   }
-});
-const ut = /* @__PURE__ */ q(dt, [["__scopeId", "data-v-e9bd1bd4"]]);
-let xe = 0;
-const ct = {
+}), ct = /* @__PURE__ */ V(ut, [["__scopeId", "data-v-cac3da66"]]);
+let Le = 0;
+const ft = {
   beforeCreate() {
-    this.uuid = xe.toString(), xe += 1;
+    this.uuid = Le.toString(), Le += 1;
   }
-}, ft = { key: 0 }, pt = /* @__PURE__ */ Q("path", {
+}, pt = { key: 0 }, mt = /* @__PURE__ */ Q("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 mt(e, o, t, l, n, i) {
-  return g(), A("svg", T({ role: "img" }, e.$attrs, {
+function vt(e, o, t, a, n, i) {
+  return g(), M("svg", A({ 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"] ? (g(), A("title", ft, fe(e.$attrs["svg-title"]), 1)) : k("", !0),
-    pt
+    e.$attrs["svg-title"] ? (g(), M("title", pt, fe(e.$attrs["svg-title"]), 1)) : P("", !0),
+    mt
   ], 16);
 }
-const vt = /* @__PURE__ */ q(ct, [["render", mt]]);
-let we = 0;
-const yt = {
+const yt = /* @__PURE__ */ V(ft, [["render", vt]]);
+let Se = 0;
+const bt = {
   beforeCreate() {
-    this.uuid = we.toString(), we += 1;
+    this.uuid = Se.toString(), Se += 1;
   }
-}, bt = { key: 0 }, gt = /* @__PURE__ */ Q("path", {
+}, gt = { key: 0 }, ht = /* @__PURE__ */ Q("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 ht(e, o, t, l, n, i) {
-  return g(), A("svg", T({ role: "img" }, e.$attrs, {
+function Lt(e, o, t, a, n, i) {
+  return g(), M("svg", A({ 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"] ? (g(), A("title", bt, fe(e.$attrs["svg-title"]), 1)) : k("", !0),
-    gt
+    e.$attrs["svg-title"] ? (g(), M("title", gt, fe(e.$attrs["svg-title"]), 1)) : P("", !0),
+    ht
   ], 16);
 }
-const xt = /* @__PURE__ */ q(yt, [["render", ht]]), wt = { class: "b-dropdown-small-textbox__chevron" }, St = K({
+const St = /* @__PURE__ */ V(bt, [["render", Lt]]), wt = { class: "b-dropdown-small-textbox__chevron" }, xt = F({
   name: "dropdown-small-textbox",
   inheritAttrs: !1
-}), Lt = /* @__PURE__ */ K({
-  ...St,
+}), $t = /* @__PURE__ */ F({
+  ...xt,
   props: {
     /**
      * The number of additional items that have been selected in the dropdown.
@@ -369,7 +369,7 @@ const xt = /* @__PURE__ */ q(yt, [["render", ht]]), wt = { class: "b-dropdown-sm
   },
   emits: ["open", "close"],
   setup(e, { emit: o }) {
-    const t = e, l = u(() => ({
+    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
@@ -381,17 +381,17 @@ const xt = /* @__PURE__ */ q(yt, [["render", ht]]), wt = { class: "b-dropdown-sm
       [ge.OPEN]: i,
       [ge.CLOSE]: r
     };
-    return (f, y) => (g(), A("div", {
-      class: de(["b-dropdown-small-textbox", a(l)])
+    return (f, y) => (g(), M("div", {
+      class: de(["b-dropdown-small-textbox", l(a)])
     }, [
-      J(Ge, T({ ...f.$attrs, ...f.$props }, { class: "b-dropdown-small-textbox__textbox" }, Z(c)), {
-        icon: P(() => [
+      J(Ze, A({ ...f.$attrs, ...f.$props }, { class: "b-dropdown-small-textbox__textbox" }, Z(c)), {
+        icon: K(() => [
           Q("div", wt, [
-            G(J(a(xt), { "svg-title": "opened" }, null, 512), [
-              [ye, a(n)]
+            G(J(l(St), { "svg-title": "opened" }, null, 512), [
+              [ye, l(n)]
             ]),
-            G(J(a(vt), { "svg-title": "closed" }, null, 512), [
-              [ye, !a(n)]
+            G(J(l(yt), { "svg-title": "closed" }, null, 512), [
+              [ye, !l(n)]
             ])
           ])
         ]),
@@ -399,45 +399,44 @@ const xt = /* @__PURE__ */ q(yt, [["render", ht]]), wt = { class: "b-dropdown-sm
       }, 16)
     ], 2));
   }
-});
-const $t = /* @__PURE__ */ q(Lt, [["__scopeId", "data-v-4703b87f"]]), Ot = (e, o) => o.value.reduce((t, l) => {
-  if (l.items) {
-    const n = l.items.filter(
+}), Ot = /* @__PURE__ */ V($t, [["__scopeId", "data-v-4703b87f"]]), Et = (e, o) => o.value.reduce((t, a) => {
+  if (a.items) {
+    const n = a.items.filter(
       (r) => e.value.find((c) => c.value === r.value)
     );
-    n.length === l.items.length ? t.push(l.label) : n.forEach(({ label: r }) => t.push(r));
+    n.length === a.items.length ? t.push(a.label) : n.forEach(({ label: r }) => t.push(r));
   }
-  return e.value.find((n) => n.value === l.value) && t.push(l.label), t;
-}, []).join(", "), Et = ({ items: e, placeholder: o, selectedValues: t }) => {
-  const l = u(() => e.value.find((i) => {
+  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 u(() => t.value.length ? l.value ? Ot(t, e) : t.value.map(({ label: i }) => i).join(", ") : o.value || null);
+  return u(() => t.value.length ? a.value ? Et(t, e) : t.value.map(({ label: i }) => i).join(", ") : o.value || null);
 }, Ee = (e) => {
   var o;
   (o = e.value.$children) == null || o[0].$refs.textbox.focus();
-}, Ct = ({
+}, Bt = ({
   inputContainerRef: e,
   optionsContainerRef: o,
   selectedValueIndex: t,
-  isDropdownOpen: l,
+  isDropdownOpen: a,
   isDynamicFltering: n,
   items: i,
   isMultiple: r
 }, c, f, y) => {
   const p = ({ detail: s }) => {
-    s.preventDefault(), l.value || (f(), R(() => {
+    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();
     }));
   }, h = ({ detail: s }) => {
-    s.preventDefault(), l.value || (f(), R(() => {
+    s.preventDefault(), a.value || (f(), T(() => {
       var m;
       (m = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || m[0].$el.focus();
     }));
-  }, L = () => {
-    l.value || (f(), R(() => {
+  }, $ = () => {
+    a.value || (f(), T(() => {
       var s, m;
       if (r) {
         const b = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children;
@@ -445,54 +444,54 @@ const $t = /* @__PURE__ */ q(Lt, [["__scopeId", "data-v-4703b87f"]]), Ot = (e, o
       } else
         (m = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || m[i.length - 1].$el.focus();
     }));
-  }, $ = () => {
-    l.value && (y(), Ee(e));
   }, O = () => {
-    l.value || f(), R(() => {
+    a.value && (y(), Ee(e));
+  }, E = () => {
+    a.value || f(), T(() => {
       var s;
       (s = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || s[0].$el.focus();
     });
-  }, x = ({ detail: s }) => {
-    s.preventDefault(), c(), l.value && R(() => {
+  }, 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 = () => {
-    c(), l.value && R(() => {
+  }, 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();
     });
   };
   return u(() => ({
-    ...n.value ? {} : { [_.SPACE]: x },
-    [_.ENTER]: S,
-    [_.ARROW_DOWN]: p,
-    [_.ARROW_UP]: h,
-    [_.END]: L,
-    [_.ESCAPE]: $,
-    [_.HOME]: O
+    ...n.value ? {} : { [R.SPACE]: L },
+    [R.ENTER]: x,
+    [R.ARROW_DOWN]: p,
+    [R.ARROW_UP]: h,
+    [R.END]: $,
+    [R.ESCAPE]: O,
+    [R.HOME]: E
   }));
 }, Dt = ({ inputContainerRef: e, isDropdownOpen: o }, t) => {
-  const l = () => {
-    o.value && t(), R(() => {
+  const a = () => {
+    o.value && t(), T(() => {
       Ee(e);
     });
   };
   return {
-    [d.ENTER]: l,
-    [d.ESCAPE]: l,
-    [d.TAB]: l,
-    [d.SPACE]: l
+    [d.ENTER]: a,
+    [d.ESCAPE]: a,
+    [d.TAB]: a,
+    [d.SPACE]: a
   };
 };
-function Bt(e, o, t) {
-  const l = 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 Se(l, () => {
-    t !== void 0 && t(l.value);
+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 (!l.value || t !== void 0)
+    if (!a.value || t !== void 0)
       return n.value;
-    const c = l.value.toLocaleLowerCase();
+    const c = a.value.toLocaleLowerCase();
     return i(c, n.value);
   });
 }
@@ -502,15 +501,15 @@ const Ce = {
     clearSearch: "Clear filter",
     ariaLabelFallback: "Dropdown"
   }
-}, It = Symbol("input field component injection key"), _t = K({
+}, Rt = Symbol("input field component injection key"), Tt = F({
   i18n: { messages: Ce },
   name: "b-dropdown",
   components: {
-    DropdownInputDefault: Xe,
-    DropdownInputSmall: $t
+    DropdownInputDefault: Qe,
+    DropdownInputSmall: Ot
   }
-}), Rt = /* @__PURE__ */ K({
-  ..._t,
+}), At = /* @__PURE__ */ F({
+  ...Tt,
   props: {
     /**
      * @deprecated from version 2.0.0. Use the aria-label attribute instead.
@@ -638,7 +637,7 @@ const Ce = {
     size: {
       type: String,
       default: null,
-      validator: (e) => Object.values(U).includes(e)
+      validator: (e) => Object.values(H).includes(e)
     },
     /**
      * If enabled, dropdown will display non-selectable, static categories
@@ -669,83 +668,83 @@ const Ce = {
   emits: ["input", "show-more"],
   setup(e, { emit: o }) {
     var ve;
-    const t = e, l = qe(), n = Le(), i = at(n), { t: r } = pe({ messages: Ce }), c = w(null), f = w(null), y = w(null), p = w(!1), h = j("bento-dropdown-options-container"), L = j("dropdown-label"), $ = j("dropdown-description"), O = j("dropdown-error"), { isReadOnly: x } = Ze(I(t, "readonly")), { cachedSelectedListboxOptions: S, cachedListboxSelectedValues: M, setCachedValues: s } = tt(
+    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(l["aria-label"]), { ariaLabel: b } = $e(t), E = Ye({
-      ariaLabel: m.value,
-      // TODO: take this line away when the aria-label props is removed
-      label: b,
+    ), m = w(a["aria-label"]), { ariaLabel: b, label: S } = $e(t), z = Xe({
+      // TODO: take ariaLabel ref away when aria-label prop is removed
+      ariaLabel: b || m,
+      label: S,
       defaultFallback: r("ariaLabelFallback")
-    }), F = t.size === U.SMALL || He(It, !1), H = u(() => F ? U.SMALL : U.DEFAULT), X = u(() => ({
+    }), 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
-    })), B = w(""), V = I(t, "items"), Be = Bt(B, V, (ve = t == null ? void 0 : t.search) == null ? void 0 : ve.searchEvent), ee = u(() => t.dynamicFiltering && !!B.value), Ie = Et({
-      items: V,
+    })), 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: S
-    }), _e = u(() => {
+      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)
         );
       if (!t.multiple && t.staticCategories) {
         const v = t.items.find(
-          (D) => D.items.some((z) => z.value === t.value)
+          (B) => B.items.some((j) => j.value === t.value)
         );
-        return v ? v.items.find((D) => D.value === t.value) : null;
+        return v ? v.items.find((B) => B.value === t.value) : null;
       }
       return t.items.find(({ value: v }) => v === (t == null ? void 0 : t.value));
-    }), Re = u(() => {
+    }), Ae = u(() => {
       const v = t.items.findIndex(({ value: C }) => t.value === C);
       return v > 0 ? v : 0;
-    }), { isMultiLevelSelect: Te, flattenedItemsList: Ae } = lt(V), Me = u(() => {
+    }), { 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, D = Te.value ? Ae.value.length : V.value.length;
-        return !t.hasMoreItems && D === C ? r("all") : C;
+        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 null;
-    }), Ne = u(
-      () => `${t.description ? $ : ""} ${t.errorMessage ? O : ""}`.trim() || null
-    ), ke = () => {
-      x.value || (p.value = !0);
+    }), Pe = u(
+      () => `${t.description ? O : ""} ${t.errorMessage ? E : ""}`.trim() || null
+    ), Ke = () => {
+      L.value || (p.value = !0);
     }, te = () => {
       p.value = !1;
-    }, le = () => {
-      x.value || (p.value = !p.value, ee.value && (B.value = ""));
-    }, Pe = () => {
-      ee.value && (B.value = ""), p.value && (p.value = !1, y.value.onOutsideDropdownClick());
-    }, Ke = (v) => {
-      t.multiple || (B.value = "", p.value = !1), s(v), o("input", M.value);
+    }, ae = () => {
+      L.value || (p.value = !p.value, ee.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);
-    }, ze = Ct(
+    }, je = Bt(
       {
         inputContainerRef: c,
         optionsContainerRef: y,
-        selectedValueIndex: Re,
+        selectedValueIndex: Ae,
         isDropdownOpen: p,
         isDynamicFltering: I(t, "dynamicFiltering"),
         items: t.items,
         isMultiple: t.multiple
       },
-      le,
-      ke,
+      ae,
+      Ke,
       te
-    ), We = Dt(
+    ), Ue = Dt(
       {
         inputContainerRef: c,
         isDropdownOpen: p
       },
       te
-    ), je = {
+    ), qe = {
       [d.CLOSE_DROPDOWN]: te,
-      [d.SELECT]: Ke,
-      [d.SHOW_MORE]: Fe,
-      ...We
+      [d.SELECT]: ze,
+      [d.SHOW_MORE]: We,
+      ...Ue
     };
     return t.error && be(
       'BentoDropdown "error" property',
@@ -754,117 +753,116 @@ const Ce = {
                         <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) => {
-      var D;
-      return G((g(), A("div", {
-        class: de(["b-dropdown", a(X)])
+      var B;
+      return G((g(), M("div", {
+        class: de(["b-dropdown", l(Be)])
       }, [
-        e.label ? (g(), N(a(ot), {
+        l(S) ? (g(), k(l(nt), {
           key: 0,
-          id: a(L),
+          id: l($),
           condensed: e.condensed,
-          label: e.label,
+          label: l(S),
           "tooltip-text": e.tooltipText,
           optional: e.optional,
           required: e.required
-        }, null, 8, ["id", "condensed", "label", "tooltip-text", "optional", "required"])) : k("", !0),
-        G((g(), A("div", T({
+        }, null, 8, ["id", "condensed", "label", "tooltip-text", "optional", "required"])) : P("", !0),
+        G((g(), M("div", A({
           ref_key: "inputContainerRefWrapper",
           ref: f
-        }, Z(a(ze), !0)), [
-          (g(), N(Oe(a(H)), {
+        }, Z(l(je), !0)), [
+          (g(), k(Oe(l(X)), {
             ref_key: "inputContainerRef",
             ref: c,
             condensed: e.condensed,
-            value: B.value,
-            "additional-items-selected": a(Me),
-            ariaControls: a(h),
+            value: D.value,
+            "additional-items-selected": l(ke),
+            ariaControls: l(h),
             ariaExpanded: p.value,
-            "aria-labelledby": e.label ? a(L) : null,
-            "aria-describedby": a(Ne),
-            "aria-label": a(E),
-            "aria-readonly": a(x),
-            readonly: a(x),
+            "aria-labelledby": l(S) ? l($) : null,
+            "aria-describedby": l(Pe),
+            "aria-label": l(z),
+            "aria-readonly": l(L),
+            readonly: l(L),
             disabled: e.disabled,
-            "display-value": a(Ie),
+            "display-value": l(Re),
             "dynamic-filtering": e.dynamicFiltering,
             "is-invalid": !!e.errorMessage || e.error,
             multiple: e.multiple,
             open: p.value,
-            "selected-value-item": a(F) ? void 0 : a(_e),
+            "selected-value-item": l(W) ? void 0 : l(Te),
             "show-slot-content-in-multiple": e.showSlotContentInMultiple,
-            onInput: C[0] || (C[0] = (z) => B.value = z),
-            onOpen: le,
-            onClose: le
+            onInput: C[0] || (C[0] = (j) => D.value = j),
+            onOpen: ae,
+            onClose: ae
           }, ne({ _: 2 }, [
-            se(a(n), (z, W) => ({
-              name: W,
-              fn: P((ae) => [
-                Y(v.$slots, W, ie(re(ae)), void 0, !0)
+            se(l(n), (j, U) => ({
+              name: U,
+              fn: K((le) => [
+                Y(v.$slots, U, ie(re(le)), 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)), [
-          [a(et)]
+          [l(tt)]
         ]),
-        c.value ? (g(), N(a(ut), T({
+        c.value ? (g(), k(l(ct), A({
           key: 1,
-          id: a(h),
+          id: l(h),
           ref_key: "optionsContainerRef",
           ref: y,
-          "aria-label": a(E),
+          "aria-label": l(z),
           "empty-state": e.emptyState,
-          "debounce-time": (D = e.search) == null ? void 0 : D.debounceTime,
+          "debounce-time": (B = e.search) == null ? void 0 : B.debounceTime,
           disabled: e.disabled,
           "is-option-disabled": e.isOptionDisabled,
-          items: a(Be),
+          items: l(Ie),
           multiple: e.multiple,
           "static-categories": e.staticCategories,
           open: p.value,
-          "selected-value": a(S),
-          searching: a(ee),
+          "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(je)), ne({ _: 2 }, [
-          se(a(n), (z, W) => ({
-            name: W,
-            fn: P((ae) => [
-              Y(v.$slots, W, ie(re(ae)), void 0, !0)
+        }, Z(qe)), ne({ _: 2 }, [
+          se(l(n), (j, U) => ({
+            name: U,
+            fn: K((le) => [
+              Y(v.$slots, U, ie(re(le)), 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"])) : k("", !0),
-        e.errorMessage ? (g(), N(a(nt), {
+        ]), 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), {
           key: 2,
-          id: a(O),
+          id: l(E),
           "error-message": e.errorMessage,
           class: "b-dropdown__error-message"
-        }, null, 8, ["id", "error-message"])) : k("", !0),
-        e.description || a(i)("description") ? (g(), N(a(Je), {
+        }, null, 8, ["id", "error-message"])) : P("", !0),
+        e.description || l(i)("description") ? (g(), k(l(Ye), {
           key: 3,
-          id: a($),
-          class: de(["b-dropdown__description", a(De)]),
+          id: l(O),
+          class: de(["b-dropdown__description", l(De)]),
           el: "span"
         }, {
-          default: P(() => [
+          default: K(() => [
             Y(v.$slots, "description", {}, () => [
-              Ve(fe(e.description), 1)
+              Je(fe(e.description), 1)
             ], !0)
           ]),
           _: 3
-        }, 8, ["id", "class"])) : k("", !0)
+        }, 8, ["id", "class"])) : P("", !0)
       ], 2)), [
-        [a(Qe), Pe]
+        [l(Ge), Fe]
       ]);
     };
   }
-});
-const Vt = /* @__PURE__ */ q(Rt, [["__scopeId", "data-v-4ab2a16d"]]);
+}), Jt = /* @__PURE__ */ V(At, [["__scopeId", "data-v-690ac639"]]);
 export {
-  Vt as B,
-  It as I,
-  U as a,
-  Bt as u
+  Jt as B,
+  Rt as I,
+  H as a,
+  It as u
 };
-//# sourceMappingURL=dropdown.0ae3b842.js.map
+//# sourceMappingURL=dropdown.CxBlK83Q.js.map