@adyen/bento-vue3 1.2.0 → 1.3.0

package/dist/chunks/{dropdown.f9997464.js → dropdown.8b415aac.js}

@@ -1,16 +1,17 @@
-import { ref as E, watch as fe, computed as c, defineComponent as X, toRefs as De, resolveComponent as B, openBlock as m, createBlock as L, resolveDynamicComponent as me, mergeProps as I, withCtx as S, createElementVNode as q, withKeys as Be, createVNode as M, toHandlers as k, createSlots as x, renderList as j, renderSlot as J, normalizeProps as Z, guardReactiveProps as Y, createElementBlock as O, toDisplayString as A, createCommentVNode as _, pushScopeId as ve, popScopeId as ye, normalizeClass as be, withDirectives as W, vShow as ae, nextTick as D, toRef as N, resolveDirective as ie, createTextVNode as z } from "vue";
-import { a as s, B as G, b as F } from "./listbox.7b5e0eee.js";
-import { B as Te } from "./directive.0408e565.js";
-import { B as C, a as Ie } from "./debounce.f8d92e44.js";
-import { D as Re, a as R, b as H, c as Ae } from "./dropdown-default-textbox.dd77bb42.js";
-import { _ as K } from "./_plugin-vue_export-helper.dad06003.js";
-import { B as Ne, d as Pe, a as Me } from "./index.ebf5f6cf.js";
+import { ref as S, watch as fe, computed as c, defineComponent as X, toRefs as Be, resolveComponent as B, openBlock as m, createBlock as C, resolveDynamicComponent as me, mergeProps as I, withCtx as $, createElementVNode as q, withKeys as Te, createVNode as M, toHandlers as k, createSlots as x, renderList as j, renderSlot as J, normalizeProps as Z, guardReactiveProps as Y, createElementBlock as _, toDisplayString as N, createCommentVNode as E, pushScopeId as ve, popScopeId as be, normalizeClass as ye, withDirectives as W, vShow as ae, nextTick as D, toRef as R, resolveDirective as ie, createTextVNode as z } from "vue";
+import { a as s, B as G, b as F } from "./listbox.0c7c4e5e.js";
+import { B as Ie } from "./directive.0408e565.js";
+import { B as L, a as Re } from "./debounce.f8d92e44.js";
+import { B as Ae, d as Ne, a as Pe } from "./index.222d29b0.js";
 import { g as P } from "./unique-id.a2a2b458.js";
-import { PopperContainer as V, PopperContainerPosition as se } from "../popper-container.js";
+import { u as Me } from "./use-form-layout-loading.d03e5d48.js";
+import { PopperContainer as H, PopperContainerPosition as se } from "../popper-container.js";
 import { u as ge } from "./i18n.6c402773.js";
 import { BentoPopover as re, BentoPopoverPositions as de } from "../popover.js";
-import { c as ue } from "./button-actions.a6e541ad.js";
-import { E as Ke } from "./error-message.b88bb75a.js";
+import { c as ue } from "./button-actions.54e28e75.js";
+import { _ as K } from "./_plugin-vue_export-helper.dad06003.js";
+import { D as Ke, a as A, b as V, c as ze } from "./dropdown-default-textbox.203e747f.js";
+import { E as ke } from "./error-message.ddfe8ea5.js";
 import "../assets/dropdown.css";
 var T = /* @__PURE__ */ ((e) => (e.DEFAULT = "DropdownInputDefault", e.SMALL = "DropdownInputSmall", e))(T || {});
 const Q = {
@@ -19,8 +20,8 @@ const Q = {
     cancel: "Cancel",
     noOptionsMatchThisSearch: "No options match this search"
   }
-}, ze = (e, o, n) => {
-  const t = E(e.value), { t: a } = ge({ messages: Q });
+}, We = (e, o, n) => {
+  const t = S(e.value), { t: a } = ge({ messages: Q });
   fe(e, () => {
     t.value = e.value;
   });
@@ -44,35 +45,35 @@ const Q = {
     t.value = f, o.value || n(s.SELECT, f);
   }, y = (f) => {
     u(f), n(s.TAB);
-  }, h = (f) => {
+  }, v = (f) => {
     u(f), n(s.ENTER);
-  }, p = (f) => {
+  }, g = (f) => {
     u(f), n(s.SPACE);
-  }, v = () => {
+  }, p = () => {
     r(), n(s.ESCAPE);
   }, b = () => {
     n(s.SHOW_MORE);
-  }, w = {
+  }, O = {
     [s.SELECT]: u,
     [s.SHOW_MORE]: b,
     [s.TAB]: y,
-    [s.SPACE]: p,
-    [s.ENTER]: h
+    [s.SPACE]: g,
+    [s.ENTER]: v
   };
   return {
     // Values
     actions: d,
     internalSelectedValue: t,
     // Methods
-    listeners: w,
-    onEscapeKey: v
+    listeners: O,
+    onEscapeKey: p
   };
-}, ke = X({
+}, Fe = X({
   i18n: { messages: Q },
   name: "bento-dropdown-options-container",
   components: {
     BentoListbox: G,
-    PopperContainer: V,
+    PopperContainer: H,
     BentoPopover: re
   },
   props: {
@@ -167,7 +168,7 @@ const Q = {
      * Reference to the DOM element or Vue component for positioning
      * the Dropdown container.
      */
-    targetElement: { type: V.props.targetElement.type, required: !0 }
+    targetElement: { type: H.props.targetElement.type, required: !0 }
   },
   emits: [
     s.CLOSE_DROPDOWN,
@@ -179,16 +180,16 @@ const Q = {
     s.TAB
   ],
   setup(e, { emit: o, slots: n }) {
-    const { selectedValue: t, multiple: a } = De(e), i = E(null), { t: l } = ge({ messages: Q }), r = c(() => e.open && !e.disabled), d = c(() => l("noOptionsMatchThisSearch")), u = c(() => ({
+    const { selectedValue: t, multiple: a } = Be(e), i = S(null), { t: l } = ge({ messages: Q }), r = c(() => e.open && !e.disabled), d = c(() => l("noOptionsMatchThisSearch")), u = c(() => ({
       "b-dropdown-options-container__listbox--small": e.inputSize === T.SMALL,
       "b-dropdown-options-container__listbox--single": !(e != null && e.multiple)
-    })), { actions: y, internalSelectedValue: h, listeners: p, onEscapeKey: v } = ze(
+    })), { actions: y, internalSelectedValue: v, listeners: g, onEscapeKey: p } = We(
       t,
       a,
       o
     ), b = c(
-      () => e != null && e.multiple ? re : V
-    ), w = c(
+      () => e != null && e.multiple ? re : H
+    ), O = c(
       () => {
         var f;
         return e != null && e.multiple ? {
@@ -216,10 +217,10 @@ const Q = {
       noResultsMessage: d,
       slots: n,
       actions: y,
-      internalSelectedValue: h,
+      internalSelectedValue: v,
       // Component wrapper
       popperContainerOrPopoverComponent: b,
-      popperContainerOrPopoverProps: w,
+      popperContainerOrPopoverProps: O,
       // Refs
       dropdownOptionsListboxRef: i,
       // Enums
@@ -227,17 +228,17 @@ const Q = {
       BentoPopoverPositions: de,
       PopperContainerPosition: se,
       // Events
-      onEscapeKey: v,
-      listeners: p
+      onEscapeKey: p,
+      listeners: g
     };
   }
 });
-function We(e, o, n, t, a, i) {
+function qe(e, o, n, t, a, i) {
   const l = B("bento-listbox");
-  return m(), L(me(e.popperContainerOrPopoverComponent), I({ class: "b-dropdown-options-container" }, e.popperContainerOrPopoverProps), {
-    default: S(() => [
+  return m(), C(me(e.popperContainerOrPopoverComponent), I({ class: "b-dropdown-options-container" }, e.popperContainerOrPopoverProps), {
+    default: $(() => [
       q("div", {
-        onKeydown: o[0] || (o[0] = Be((...r) => e.onEscapeKey && e.onEscapeKey(...r), ["esc"]))
+        onKeydown: o[0] || (o[0] = Te((...r) => e.onEscapeKey && e.onEscapeKey(...r), ["esc"]))
       }, [
         M(l, I({
           id: e.id,
@@ -256,7 +257,7 @@ function We(e, o, n, t, a, i) {
         }, k(e.listeners)), x({ _: 2 }, [
           j(e.slots, (r, d) => ({
             name: d,
-            fn: S((u) => [
+            fn: $((u) => [
               J(e.$slots, d, Z(Y(u)), void 0, !0)
             ])
           }))
@@ -266,55 +267,56 @@ function We(e, o, n, t, a, i) {
     _: 3
   }, 16);
 }
-const Fe = /* @__PURE__ */ K(ke, [["render", We], ["__scopeId", "data-v-09e1e41e"]]);
+const Ue = /* @__PURE__ */ K(Fe, [["render", qe], ["__scopeId", "data-v-09e1e41e"]]);
 let ce = 0;
-const qe = {
+const He = {
   beforeCreate() {
     this.uuid = ce.toString(), ce += 1;
   }
-}, Ue = (e) => (ve("data-v-18645fe6"), e = e(), ye(), e), He = { key: 0 }, Ve = /* @__PURE__ */ Ue(() => /* @__PURE__ */ q("path", {
+}, Ve = (e) => (ve("data-v-18645fe6"), e = e(), be(), e), xe = { key: 0 }, je = /* @__PURE__ */ Ve(() => /* @__PURE__ */ q("path", {
   fill: "#00112C",
   "fill-rule": "evenodd",
   d: "M4.4697 5.96967C4.76259 5.67678 5.23747 5.67678 5.53036 5.96967L8.00003 8.43934L10.4697 5.96967C10.7626 5.67678 11.2375 5.67678 11.5304 5.96967C11.8233 6.26256 11.8233 6.73744 11.5304 7.03033L8.53036 10.0303C8.23747 10.3232 7.76259 10.3232 7.4697 10.0303L4.4697 7.03033C4.17681 6.73744 4.17681 6.26256 4.4697 5.96967Z",
   "clip-rule": "evenodd"
 }, null, -1));
-function xe(e, o, n, t, a, i) {
-  return m(), O("svg", I({ role: "img" }, e.$attrs, {
+function Je(e, o, n, t, a, i) {
+  return m(), _("svg", I({ role: "img" }, e.$attrs, {
     xmlns: "http://www.w3.org/2000/svg",
     width: "16",
     height: "16",
     fill: "none"
   }), [
-    e.$attrs["svg-title"] ? (m(), O("title", He, A(e.$attrs["svg-title"]), 1)) : _("", !0),
-    Ve
+    e.$attrs["svg-title"] ? (m(), _("title", xe, N(e.$attrs["svg-title"]), 1)) : E("", !0),
+    je
   ], 16);
 }
-const je = /* @__PURE__ */ K(qe, [["render", xe], ["__scopeId", "data-v-18645fe6"]]);
+const Ze = /* @__PURE__ */ K(He, [["render", Je], ["__scopeId", "data-v-18645fe6"]]);
 let pe = 0;
-const Je = {
+const Ye = {
   beforeCreate() {
     this.uuid = pe.toString(), pe += 1;
   }
-}, Ze = (e) => (ve("data-v-6f20d431"), e = e(), ye(), e), Ye = { key: 0 }, Ge = /* @__PURE__ */ Ze(() => /* @__PURE__ */ q("path", {
+}, Ge = (e) => (ve("data-v-6f20d431"), e = e(), be(), e), Qe = { key: 0 }, Xe = /* @__PURE__ */ Ge(() => /* @__PURE__ */ q("path", {
   fill: "#00112C",
   "fill-rule": "evenodd",
   d: "M11.5303 10.0303C11.2374 10.3232 10.7626 10.3232 10.4697 10.0303L8 7.56066L5.53033 10.0303C5.23744 10.3232 4.76256 10.3232 4.46967 10.0303C4.17678 9.73744 4.17678 9.26256 4.46967 8.96967L7.46967 5.96967C7.61032 5.82902 7.80109 5.75 8 5.75C8.19891 5.75 8.38968 5.82902 8.53033 5.96967L11.5303 8.96967C11.8232 9.26256 11.8232 9.73744 11.5303 10.0303Z",
   "clip-rule": "evenodd"
 }, null, -1));
-function Qe(e, o, n, t, a, i) {
-  return m(), O("svg", I({ role: "img" }, e.$attrs, {
+function et(e, o, n, t, a, i) {
+  return m(), _("svg", I({ role: "img" }, e.$attrs, {
     xmlns: "http://www.w3.org/2000/svg",
     width: "16",
     height: "16",
     fill: "none"
   }), [
-    e.$attrs["svg-title"] ? (m(), O("title", Ye, A(e.$attrs["svg-title"]), 1)) : _("", !0),
-    Ge
+    e.$attrs["svg-title"] ? (m(), _("title", Qe, N(e.$attrs["svg-title"]), 1)) : E("", !0),
+    Xe
   ], 16);
 }
-const Xe = /* @__PURE__ */ K(Je, [["render", Qe], ["__scopeId", "data-v-6f20d431"]]), et = X({
+const tt = /* @__PURE__ */ K(Ye, [["render", et], ["__scopeId", "data-v-6f20d431"]]), ot = X({
   name: "dropdown-small-textbox",
-  components: { ChevronDownSmallIcon: je, ChevronUpSmallIcon: Xe, DropdownBaseTextbox: Re },
+  components: { ChevronDownSmallIcon: Ze, ChevronUpSmallIcon: tt, DropdownBaseTextbox: Ke },
+  inheritAttrs: !1,
   props: {
     /**
      * The number of additional items that have been selected in the dropdown.
@@ -385,19 +387,19 @@ const Xe = /* @__PURE__ */ K(Je, [["render", Qe], ["__scopeId", "data-v-6f20d431
      */
     value: { type: String, default: "" }
   },
-  emits: [R.OPEN, R.CLOSE],
+  emits: [A.OPEN, A.CLOSE],
   setup(e, { emit: o }) {
     const n = c(() => ({
-      [`b-dropdown-small-textbox--${H.DISABLED}`]: e.disabled,
-      [`b-dropdown-small-textbox--${H.READONLY}`]: e.readonly,
-      [`b-dropdown-small-textbox--${H.OPENED}`]: e.open
+      [`b-dropdown-small-textbox--${V.DISABLED}`]: e.disabled,
+      [`b-dropdown-small-textbox--${V.READONLY}`]: e.readonly,
+      [`b-dropdown-small-textbox--${V.OPENED}`]: e.open
     })), t = c(() => e.open && !e.disabled && !e.readonly), a = () => {
-      o(R.OPEN);
+      o(A.OPEN);
     }, i = () => {
-      o(R.CLOSE);
+      o(A.CLOSE);
     }, l = {
-      [R.OPEN]: a,
-      [R.CLOSE]: i
+      [A.OPEN]: a,
+      [A.CLOSE]: i
     };
     return {
       // Values
@@ -408,15 +410,15 @@ const Xe = /* @__PURE__ */ K(Je, [["render", Qe], ["__scopeId", "data-v-6f20d431
     };
   }
 });
-const tt = { class: "b-dropdown-small-textbox__chevron" };
-function ot(e, o, n, t, a, i) {
+const nt = { class: "b-dropdown-small-textbox__chevron" };
+function lt(e, o, n, t, a, i) {
   const l = B("chevron-up-small-icon"), r = B("chevron-down-small-icon"), d = B("dropdown-base-textbox");
-  return m(), O("div", {
-    class: be(["b-dropdown-small-textbox", e.conditionalClasses])
+  return m(), _("div", {
+    class: ye(["b-dropdown-small-textbox", e.conditionalClasses])
   }, [
     M(d, I({ ...e.$attrs, ...e.$props }, { class: "b-dropdown-small-textbox__textbox" }, k(e.listeners)), {
-      icon: S(() => [
-        q("div", tt, [
+      icon: $(() => [
+        q("div", nt, [
           W(M(l, { "svg-title": "opened" }, null, 512), [
             [ae, e.isDropdownOpen]
           ]),
@@ -429,9 +431,9 @@ function ot(e, o, n, t, a, i) {
     }, 16)
   ], 2);
 }
-const nt = /* @__PURE__ */ K(et, [["render", ot], ["__scopeId", "data-v-076c3c8e"]]);
-function lt(e, o, n) {
-  const t = E(e), a = E(o), i = (r, d = []) => d.flatMap((u) => u.label.toLocaleLowerCase().includes(r) ? [u, ...i(r, u.items)] : u.items ? [...i(r, u.items)] : []);
+const at = /* @__PURE__ */ K(ot, [["render", lt], ["__scopeId", "data-v-55bc3614"]]);
+function it(e, o, n) {
+  const t = S(e), a = S(o), i = (r, d = []) => d.flatMap((u) => u.label.toLocaleLowerCase().includes(r) ? [u, ...i(r, u.items)] : u.items ? [...i(r, u.items)] : []);
   return fe(t, () => {
     n !== void 0 && n(t.value);
   }), c(() => {
@@ -441,13 +443,13 @@ function lt(e, o, n) {
     return i(r, a.value);
   });
 }
-const at = ({ items: e, placeholder: o, selectedValue: n }) => {
+const st = ({ items: e, placeholder: o, selectedValue: n }) => {
   const t = e.value.find(({ value: a }) => a === n.value);
   return (t == null ? void 0 : t.label) || o.value || null;
-}, it = ({ selectedValues: e, items: o, placeholder: n }) => e.value ? e.value.map((t) => {
+}, rt = ({ selectedValues: e, items: o, placeholder: n }) => e.value ? e.value.map((t) => {
   const { label: a } = o.value.find(({ value: i }) => i === t);
   return a;
-}).join(", ") : n.value || null, st = ({ selectedValues: e, items: o, placeholder: n }) => {
+}).join(", ") : n.value || null, dt = ({ selectedValues: e, items: o, placeholder: n }) => {
   var t;
   return (t = e.value) != null && t.length ? o.value.reduce((a, i) => {
     if (i.items) {
@@ -458,13 +460,13 @@ const at = ({ items: e, placeholder: o, selectedValue: n }) => {
     }
     return e.value.includes(i.value) && a.push(i.label), a;
   }, []).join(", ") : n.value || null;
-}, rt = ({ items: e, placeholder: o, value: n, multiple: t }) => {
+}, ut = ({ items: e, placeholder: o, value: n, multiple: t }) => {
   const a = c(() => e.value.find((l) => {
     var r;
     return (r = l.items) == null ? void 0 : r.length;
   }));
-  return c(() => t.value ? a.value ? st({ selectedValues: n, placeholder: o, items: e }) : it({ selectedValues: n, items: e, placeholder: o }) : at({ items: e, placeholder: o, selectedValue: n }));
-}, dt = {
+  return c(() => t.value ? a.value ? dt({ selectedValues: n, placeholder: o, items: e }) : rt({ selectedValues: n, items: e, placeholder: o }) : st({ items: e, placeholder: o, selectedValue: n }));
+}, ct = {
   "en-US": {
     optional: "optional",
     required: "required",
@@ -472,7 +474,7 @@ const at = ({ items: e, placeholder: o, selectedValue: n }) => {
   }
 }, he = (e) => {
   e.value.$children[0].$refs.textbox.focus();
-}, ut = ({
+}, pt = ({
   inputContainerRef: e,
   optionsContainerRef: o,
   selectedValueIndex: n,
@@ -481,30 +483,30 @@ const at = ({ items: e, placeholder: o, selectedValue: n }) => {
   items: i,
   isMultiple: l
 }, r, d, u) => {
-  const y = ({ detail: $ }) => {
-    $.preventDefault(), t.value || (d(), D(() => {
+  const y = ({ detail: w }) => {
+    w.preventDefault(), t.value || (d(), D(() => {
       l ? o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children[0].$el.focus() : o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children[n.value].$el.focus();
     }));
-  }, h = ({ detail: $ }) => {
-    $.preventDefault(), t.value || (d(), D(() => {
+  }, v = ({ detail: w }) => {
+    w.preventDefault(), t.value || (d(), D(() => {
       o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children[0].$el.focus();
     }));
-  }, p = () => {
+  }, g = () => {
     t.value || (d(), D(() => {
       if (l) {
-        const $ = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children;
-        o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children[$.length - 1].$children[i.length - 1].$el.focus();
+        const w = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children;
+        o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children[w.length - 1].$children[i.length - 1].$el.focus();
       } else
         o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children[i.length - 1].$el.focus();
     }));
-  }, v = () => {
+  }, p = () => {
     t.value && (u(), he(e));
   }, b = () => {
     t.value || d(), D(() => {
       o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children[0].$el.focus();
     });
-  }, w = ({ detail: $ }) => {
-    $.preventDefault(), r(), t.value && D(() => {
+  }, O = ({ detail: w }) => {
+    w.preventDefault(), r(), t.value && D(() => {
       l ? o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children[0].$el.focus() : o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children[n.value].$el.focus();
     });
   }, f = () => {
@@ -513,15 +515,15 @@ const at = ({ items: e, placeholder: o, selectedValue: n }) => {
     });
   };
   return c(() => ({
-    ...a.value ? {} : { [C.SPACE]: w },
-    [C.ENTER]: f,
-    [C.ARROW_DOWN]: y,
-    [C.ARROW_UP]: h,
-    [C.END]: p,
-    [C.ESCAPE]: v,
-    [C.HOME]: b
+    ...a.value ? {} : { [L.SPACE]: O },
+    [L.ENTER]: f,
+    [L.ARROW_DOWN]: y,
+    [L.ARROW_UP]: v,
+    [L.END]: g,
+    [L.ESCAPE]: p,
+    [L.HOME]: b
   }));
-}, ct = ({ inputContainerRef: e, isDropdownOpen: o }, n) => {
+}, ft = ({ inputContainerRef: e, isDropdownOpen: o }, n) => {
   const t = () => {
     o.value && n(), D(() => {
       he(e);
@@ -533,17 +535,17 @@ const at = ({ items: e, placeholder: o, selectedValue: n }) => {
     [s.TAB]: t,
     [s.SPACE]: t
   };
-}, pt = X({
-  i18n: { messages: dt },
+}, mt = X({
+  i18n: { messages: ct },
   name: "b-dropdown",
   components: {
-    BentoDropdownOptionsContainer: Fe,
-    BentoTypography: Ne,
-    DropdownInputDefault: Ae,
-    DropdownInputSmall: nt,
-    ErrorMessage: Ke
+    BentoDropdownOptionsContainer: Ue,
+    BentoTypography: Ae,
+    DropdownInputDefault: ze,
+    DropdownInputSmall: at,
+    ErrorMessage: ke
   },
-  directives: { BentoClickOutsideDirective: Te, BentoKeyboardNavigationDirective: Ie },
+  directives: { BentoClickOutsideDirective: Ie, BentoKeyboardNavigationDirective: Re },
   props: {
     /**
      * Defines a string value that labels an interactive element.
@@ -676,51 +678,51 @@ const at = ({ items: e, placeholder: o, selectedValue: n }) => {
   emits: ["input", s.SHOW_MORE],
   setup(e, { emit: o, slots: n }) {
     var le;
-    const t = E(null), a = E(null), i = E(null), l = E(!1), r = P("bento-dropdown-options-container"), d = P("dropdown-label"), u = P("dropdown-description"), y = P("dropdown-error"), h = c(() => ({
+    const t = S(null), a = S(null), i = S(null), l = S(!1), r = P("bento-dropdown-options-container"), d = P("dropdown-label"), u = P("dropdown-description"), y = P("dropdown-error"), { isReadOnly: v } = Me(R(e, "readonly")), g = c(() => ({
       "b-dropdown__description--error": !!e.errorMessage
-    })), p = E(""), v = N(e, "items"), b = lt(p, v, (le = e == null ? void 0 : e.search) == null ? void 0 : le.searchEvent), w = c(() => e.dynamicFiltering && !!p.value), f = rt({
-      items: v,
-      multiple: N(e, "multiple"),
-      placeholder: N(e, "placeholder"),
-      value: N(e, "value")
-    }), ee = c(
+    })), p = S(""), b = R(e, "items"), O = it(p, b, (le = e == null ? void 0 : e.search) == null ? void 0 : le.searchEvent), f = c(() => e.dynamicFiltering && !!p.value), ee = ut({
+      items: b,
+      multiple: R(e, "multiple"),
+      placeholder: R(e, "placeholder"),
+      value: R(e, "value")
+    }), w = c(
       () => e != null && e.multiple ? e.items.filter(
-        ({ value: g }) => (e == null ? void 0 : e.value) && (e == null ? void 0 : e.value).includes(g)
-      ) : e.items.find(({ value: g }) => g === (e == null ? void 0 : e.value))
-    ), $ = c(() => {
-      const g = e.items.findIndex(({ value: Le }) => e.value === Le);
-      return g > 0 ? g : 0;
-    }), we = c(() => {
-      var g;
-      return e.multiple ? (g = e == null ? void 0 : e.value) == null ? void 0 : g.length : null;
-    }), $e = c(
+        ({ value: h }) => (e == null ? void 0 : e.value) && (e == null ? void 0 : e.value).includes(h)
+      ) : e.items.find(({ value: h }) => h === (e == null ? void 0 : e.value))
+    ), we = c(() => {
+      const h = e.items.findIndex(({ value: De }) => e.value === De);
+      return h > 0 ? h : 0;
+    }), $e = c(() => {
+      var h;
+      return e.multiple ? (h = e == null ? void 0 : e.value) == null ? void 0 : h.length : null;
+    }), Se = c(
       () => `${e.description ? u : ""} ${e.errorMessage ? y : ""}`.trim() || null
-    ), Se = () => {
-      e.readonly || (l.value = !0);
+    ), Ee = () => {
+      v.value || (l.value = !0);
     }, U = () => {
       l.value = !1;
     }, te = () => {
-      e.readonly || (l.value = !l.value, w.value && (p.value = ""));
-    }, Ee = () => {
-      w.value && (p.value = ""), l.value && (l.value = !1);
-    }, oe = (g) => {
-      e.multiple || (p.value = "", l.value = !1), o("input", g);
+      v.value || (l.value = !l.value, f.value && (p.value = ""));
+    }, _e = () => {
+      f.value && (p.value = ""), l.value && (l.value = !1);
+    }, oe = (h) => {
+      e.multiple || (p.value = "", l.value = !1), o("input", h);
     }, ne = () => {
       o(s.SHOW_MORE);
-    }, _e = ut(
+    }, Oe = pt(
       {
         inputContainerRef: t,
         optionsContainerRef: i,
-        selectedValueIndex: $,
+        selectedValueIndex: we,
         isDropdownOpen: l,
-        isDynamicFltering: N(e, "dynamicFiltering"),
+        isDynamicFltering: R(e, "dynamicFiltering"),
         items: e.items,
         isMultiple: e.multiple
       },
       te,
-      Se,
+      Ee,
       U
-    ), Oe = ct(
+    ), Le = ft(
       {
         inputContainerRef: t,
         isDropdownOpen: l
@@ -730,9 +732,9 @@ const at = ({ items: e, placeholder: o, selectedValue: n }) => {
       [s.CLOSE_DROPDOWN]: U,
       [s.SELECT]: oe,
       [s.SHOW_MORE]: ne,
-      ...Oe
+      ...Le
     };
-    return e.error && Pe(
+    return e.error && Ne(
       '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.
@@ -740,48 +742,49 @@ const at = ({ items: e, placeholder: o, selectedValue: n }) => {
       "2.0.0"
     ), {
       // Values
-      additionalItemsSelected: we,
+      additionalItemsSelected: $e,
       isDropdownOpen: l,
-      displayValue: f,
+      displayValue: ee,
       dropdownOptionsContainerId: r,
-      filteredItems: b,
-      isSearching: w,
+      filteredItems: O,
+      isSearching: f,
+      isReadOnly: v,
       searchTerm: p,
       labelId: d,
       descriptionId: u,
       errorId: y,
-      ariaDescribedBy: $e,
-      selectedValueItem: ee,
+      ariaDescribedBy: Se,
+      selectedValueItem: w,
       // Conciliation of Vue2 $scopedSlots and Vue3 $scopes.
       // The setup method and the "useSlots" composible define
       // { slots } as a proxy of $scopedSlots and $scopes in their
       // respective Vue version. Source: https://github.com/vuejs/composition-api/issues/84#issuecomment-524885445
       slots: n,
-      descriptionConditionalClasses: h,
+      descriptionConditionalClasses: g,
       // Refs
       inputContainerRef: t,
       inputContainerRefWrapper: a,
       optionsContainerRef: i,
       // Events
-      closeOpenedDropdown: Ee,
+      closeOpenedDropdown: _e,
       toggleDropdown: te,
       onOptionSelected: oe,
       emitShowMoreEvent: ne,
-      textboxKeyboardNavigationListeners: _e,
+      textboxKeyboardNavigationListeners: Oe,
       listboxListeners: Ce,
       // Enums
-      BentoTypographyElement: Me,
+      BentoTypographyElement: Pe,
       BentoDropdownSize: T,
       BentoDropdownLazyLoadType: F
     };
   }
 });
-const ft = { class: "b-dropdown" }, mt = ["id"];
-function vt(e, o, n, t, a, i) {
-  var h;
+const vt = { class: "b-dropdown" }, bt = ["id"];
+function yt(e, o, n, t, a, i) {
+  var v;
   const l = B("bento-typography"), r = B("bento-dropdown-options-container"), d = B("error-message"), u = ie("bento-keyboard-navigation-directive"), y = ie("bento-click-outside-directive");
-  return W((m(), O("div", ft, [
-    e.label ? (m(), O("div", {
+  return W((m(), _("div", vt, [
+    e.label ? (m(), _("div", {
       key: 0,
       id: e.labelId,
       class: "b-dropdown__label"
@@ -790,34 +793,34 @@ function vt(e, o, n, t, a, i) {
         el: e.BentoTypographyElement.SPAN,
         stronger: ""
       }, {
-        default: S(() => [
-          z(A(e.label), 1)
+        default: $(() => [
+          z(N(e.label), 1)
         ]),
         _: 1
       }, 8, ["el"]),
-      e.optional ? (m(), L(l, {
+      e.optional ? (m(), C(l, {
         key: 0,
         class: "b-dropdown__label-requirement",
         el: e.BentoTypographyElement.SPAN
       }, {
-        default: S(() => [
-          z(" (" + A(e.$t("optional")) + ") ", 1)
+        default: $(() => [
+          z(" (" + N(e.$t("optional")) + ") ", 1)
         ]),
         _: 1
-      }, 8, ["el"])) : _("", !0),
-      e.required ? (m(), L(l, {
+      }, 8, ["el"])) : E("", !0),
+      e.required ? (m(), C(l, {
         key: 1,
         class: "b-dropdown__label-requirement",
         el: e.BentoTypographyElement.SPAN
       }, {
-        default: S(() => [
-          z(" (" + A(e.$t("required")) + ") ", 1)
+        default: $(() => [
+          z(" (" + N(e.$t("required")) + ") ", 1)
         ]),
         _: 1
-      }, 8, ["el"])) : _("", !0)
-    ], 8, mt)) : _("", !0),
-    W((m(), O("div", I({ ref: "inputContainerRefWrapper" }, k(e.textboxKeyboardNavigationListeners, !0)), [
-      (m(), L(me(e.size), {
+      }, 8, ["el"])) : E("", !0)
+    ], 8, bt)) : E("", !0),
+    W((m(), _("div", I({ ref: "inputContainerRefWrapper" }, k(e.textboxKeyboardNavigationListeners, !0)), [
+      (m(), C(me(e.size), {
         ref: "inputContainerRef",
         value: e.searchTerm,
         "additional-items-selected": e.additionalItemsSelected,
@@ -826,8 +829,8 @@ function vt(e, o, n, t, a, i) {
         "aria-labelledby": e.label ? e.labelId : null,
         "aria-describedby": e.ariaDescribedBy,
         "aria-label": e.ariaLabel ? e.ariaLabel : null,
-        "aria-readonly": e.readonly,
-        readonly: e.readonly,
+        "aria-readonly": e.isReadOnly,
+        readonly: e.isReadOnly,
         disabled: e.disabled,
         "display-value": e.displayValue,
         "dynamic-filtering": e.dynamicFiltering,
@@ -836,26 +839,26 @@ function vt(e, o, n, t, a, i) {
         open: e.isDropdownOpen,
         "selected-value-item": e.size === e.BentoDropdownSize.DEFAULT ? e.selectedValueItem : void 0,
         "show-slot-content-in-multiple": e.showSlotContentInMultiple,
-        onInput: o[0] || (o[0] = (p) => e.searchTerm = p),
+        onInput: o[0] || (o[0] = (g) => e.searchTerm = g),
         onOpen: e.toggleDropdown,
         onClose: e.toggleDropdown
       }, x({ _: 2 }, [
-        j(e.slots, (p, v) => ({
-          name: v,
-          fn: S((b) => [
-            J(e.$slots, v, Z(Y(b)), void 0, !0)
+        j(e.slots, (g, p) => ({
+          name: p,
+          fn: $((b) => [
+            J(e.$slots, p, Z(Y(b)), void 0, !0)
           ])
         }))
       ]), 1064, ["value", "additional-items-selected", "ariaControls", "ariaExpanded", "aria-labelledby", "aria-describedby", "aria-label", "aria-readonly", "readonly", "disabled", "display-value", "dynamic-filtering", "is-invalid", "multiple", "open", "selected-value-item", "show-slot-content-in-multiple", "onOpen", "onClose"]))
     ], 16)), [
       [u]
     ]),
-    e.inputContainerRef ? (m(), L(r, I({
+    e.inputContainerRef ? (m(), C(r, I({
       key: 1,
       id: e.dropdownOptionsContainerId,
       ref: "optionsContainerRef",
       "aria-label": e.ariaLabel,
-      "debounce-time": (h = e.search) == null ? void 0 : h.debounceTime,
+      "debounce-time": (v = e.search) == null ? void 0 : v.debounceTime,
       disabled: e.disabled,
       "input-size": e.size,
       "is-option-disabled": e.isOptionDisabled,
@@ -869,38 +872,38 @@ function vt(e, o, n, t, a, i) {
       "has-more-items": e.hasMoreItems,
       "lazy-load-type": e.lazyLoadType
     }, k(e.listboxListeners)), x({ _: 2 }, [
-      j(e.slots, (p, v) => ({
-        name: v,
-        fn: S((b) => [
-          J(e.$slots, v, Z(Y(b)), void 0, !0)
+      j(e.slots, (g, p) => ({
+        name: p,
+        fn: $((b) => [
+          J(e.$slots, p, Z(Y(b)), void 0, !0)
         ])
       }))
-    ]), 1040, ["id", "aria-label", "debounce-time", "disabled", "input-size", "is-option-disabled", "items", "multiple", "open", "selected-value", "searching", "target-element", "loading", "has-more-items", "lazy-load-type"])) : _("", !0),
-    e.errorMessage ? (m(), L(d, {
+    ]), 1040, ["id", "aria-label", "debounce-time", "disabled", "input-size", "is-option-disabled", "items", "multiple", "open", "selected-value", "searching", "target-element", "loading", "has-more-items", "lazy-load-type"])) : E("", !0),
+    e.errorMessage ? (m(), C(d, {
       key: 2,
       id: e.errorId,
       "error-message": e.errorMessage,
       class: "b-dropdown__error-message"
-    }, null, 8, ["id", "error-message"])) : _("", !0),
-    e.description ? (m(), L(l, {
+    }, null, 8, ["id", "error-message"])) : E("", !0),
+    e.description ? (m(), C(l, {
       key: 3,
       id: e.descriptionId,
-      class: be(["b-dropdown__description", e.descriptionConditionalClasses]),
+      class: ye(["b-dropdown__description", e.descriptionConditionalClasses]),
       el: e.BentoTypographyElement.SPAN
     }, {
-      default: S(() => [
-        z(A(e.description), 1)
+      default: $(() => [
+        z(N(e.description), 1)
       ]),
       _: 1
-    }, 8, ["id", "class", "el"])) : _("", !0)
+    }, 8, ["id", "class", "el"])) : E("", !0)
   ])), [
     [y, e.closeOpenedDropdown]
   ]);
 }
-const Bt = /* @__PURE__ */ K(pt, [["render", vt], ["__scopeId", "data-v-f66aa4cd"]]);
+const Rt = /* @__PURE__ */ K(mt, [["render", yt], ["__scopeId", "data-v-a62031bf"]]);
 export {
-  Bt as B,
+  Rt as B,
   T as a,
-  lt as u
+  it as u
 };
-//# sourceMappingURL=dropdown.f9997464.js.map
+//# sourceMappingURL=dropdown.8b415aac.js.map